{"_id":"@byearlybird/budgie","_rev":"4-3272700459e0a43ed3021827795c94f5","name":"@byearlybird/budgie","dist-tags":{"latest":"0.2.0"},"versions":{"0.0.1":{"name":"@byearlybird/budgie","version":"0.0.1","keywords":["css-in-js","javascript","typescript"],"author":"Nick Murphy","license":"MIT","_id":"@byearlybird/budgie@0.0.1","maintainers":[{"name":"nickmurphy","email":"nickrmurphy@icloud.com"}],"homepage":"https://github.com/byearlybird/budgie#readme","bugs":{"url":"https://github.com/byearlybird/budgie/issues"},"dist":{"shasum":"989d0bc3d857e32fb33aaf76c30618c1a60e1440","tarball":"https://registry.npmjs.org/@byearlybird/budgie/-/budgie-0.0.1.tgz","fileCount":17,"integrity":"sha512-QfIYLhIiarujNMYmyfZNeJk0IR6oA6uLwYBiH6qJT+um3c9j2tcLuUVTnm6U+3I0sTNbIcywe7aiAljalrbYFQ==","signatures":[{"sig":"MEQCIAeo9uldPLZJHkwJLBS9N1Iz8Gs+51PGCFozLF2CiEALAiBGEomalaBJD4yzI7r+lFabUMVmzoM9aj/kR6otGh8/YQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":96461},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.mts","shasum":"989d0bc3d857e32fb33aaf76c30618c1a60e1440","exports":{".":{"types":"./dist/index.d.mts","import":"./dist/index.mjs","default":"./dist/index.mjs"},"./tokens":{"types":"./dist/tokens/index.d.mts","import":"./dist/tokens/index.mjs","default":"./dist/tokens/index.mjs"},"./compile":{"types":"./dist/compile.d.mts","import":"./dist/compile.mjs","default":"./dist/compile.mjs"}},"scripts":{"dev":"bun --watch build.ts","test":"bun test --coverage","bench":"bun benchmarks/index.bench.ts","build":"bun run build.ts","format":"prettier \"**/*.{ts,tsx,md}\" --write","publish":"bun publish","bench:css":"bun benchmarks/css.bench.ts","bench:hash":"bun benchmarks/hash.bench.ts","bench:parse":"bun benchmarks/parse.bench.ts","bench:utils":"bun benchmarks/utils.bench.ts","bench:inject":"bun benchmarks/inject.bench.ts","version:minor":"bun pm version minor","version:patch":"bun pm version patch","compile-styles":"bun run src/compile.ts","prepublishOnly":"bun run build.ts"},"_npmUser":{"name":"nickmurphy","email":"nickrmurphy@icloud.com"},"_integrity":"sha512-QfIYLhIiarujNMYmyfZNeJk0IR6oA6uLwYBiH6qJT+um3c9j2tcLuUVTnm6U+3I0sTNbIcywe7aiAljalrbYFQ==","repository":{"url":"https://github.com/byearlybird/budgie.git","type":"git"},"_npmVersion":"10.8.3","description":"Type-safe CSS-in-JS with atomic design tokens, <1KB","directories":{},"sideEffects":false,"_nodeVersion":"24.3.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"mitata":"^1.0.34","tsdown":"^0.16.1","csstype":"^3.0.10","@types/bun":"latest","typescript":"^5.3.3","@biomejs/biome":"2.3.4","@happy-dom/global-registrator":"^20.0.10"},"peerDependencies":{"csstype":"^3.0.10"},"_npmOperationalInternal":{"tmp":"tmp/budgie_0.0.1_1762790054316_0.15316260418667516","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@byearlybird/budgie","version":"0.0.2","keywords":["css-in-js","javascript","typescript"],"author":"Nick Murphy","license":"MIT","_id":"@byearlybird/budgie@0.0.2","maintainers":[{"name":"nickmurphy","email":"nickrmurphy@icloud.com"}],"homepage":"https://github.com/byearlybird/budgie#readme","bugs":{"url":"https://github.com/byearlybird/budgie/issues"},"dist":{"shasum":"692ed2b3e14419da5a55375a39666e4bd320bb2e","tarball":"https://registry.npmjs.org/@byearlybird/budgie/-/budgie-0.0.2.tgz","fileCount":17,"integrity":"sha512-bCwEsOSRnrGK4UnEOG8ZR+5AotW5vyiQthrBgNBmz/75+MQkYAS6LqAYLvVxmNruFOmpSS+LgDgj1s1888bvfw==","signatures":[{"sig":"MEUCIQDVOw21gvpoZZoco4JGdL4eS2KpihnZQS0cioT1MmNrNQIgCDFcHQcD+LLCX0w5WdpEtcvQQQZdGXVxLBSDhPVv0KQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":96461},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.mts","shasum":"692ed2b3e14419da5a55375a39666e4bd320bb2e","exports":{".":{"types":"./dist/index.d.mts","import":"./dist/index.mjs","default":"./dist/index.mjs"},"./tokens":{"types":"./dist/tokens/index.d.mts","import":"./dist/tokens/index.mjs","default":"./dist/tokens/index.mjs"},"./compile":{"types":"./dist/compile.d.mts","import":"./dist/compile.mjs","default":"./dist/compile.mjs"}},"scripts":{"dev":"bun --watch build.ts","test":"bun test --coverage","bench":"bun benchmarks/index.bench.ts","build":"bun run build.ts","format":"prettier \"**/*.{ts,tsx,md}\" --write","publish":"bun publish","bench:css":"bun benchmarks/css.bench.ts","bench:hash":"bun benchmarks/hash.bench.ts","bench:parse":"bun benchmarks/parse.bench.ts","bench:utils":"bun benchmarks/utils.bench.ts","bench:inject":"bun benchmarks/inject.bench.ts","version:minor":"bun pm version minor","version:patch":"bun pm version patch","compile-styles":"bun run src/compile.ts","prepublishOnly":"bun run build.ts"},"_npmUser":{"name":"nickmurphy","email":"nickrmurphy@icloud.com"},"_integrity":"sha512-bCwEsOSRnrGK4UnEOG8ZR+5AotW5vyiQthrBgNBmz/75+MQkYAS6LqAYLvVxmNruFOmpSS+LgDgj1s1888bvfw==","repository":{"url":"https://github.com/byearlybird/budgie.git","type":"git"},"_npmVersion":"10.8.3","description":"Type-safe CSS-in-JS with atomic design tokens, <1KB","directories":{},"sideEffects":false,"_nodeVersion":"24.3.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"mitata":"^1.0.34","tsdown":"^0.16.1","csstype":"^3.0.10","@types/bun":"latest","typescript":"^5.3.3","@biomejs/biome":"2.3.4","@happy-dom/global-registrator":"^20.0.10"},"peerDependencies":{"csstype":"^3.0.10"},"_npmOperationalInternal":{"tmp":"tmp/budgie_0.0.2_1762790101421_0.8347698968220238","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@byearlybird/budgie","version":"0.1.0","keywords":["component-library","components","design-system","react","typescript"],"author":{"name":"Nick Murphy"},"license":"MIT","_id":"@byearlybird/budgie@0.1.0","maintainers":[{"name":"nickmurphy","email":"nickrmurphy@icloud.com"}],"dist":{"shasum":"53e3ee5de980b15bb780eecab18a1521b19f8f83","tarball":"https://registry.npmjs.org/@byearlybird/budgie/-/budgie-0.1.0.tgz","fileCount":10,"integrity":"sha512-ynlPZF/1ZRSIRaWVZ5EIkvEy6zOXmrZq2QlH0dqEPZj1ZnbKRqqMY61ShT4iGmTAdy2+Nl/dws27keNsufMTiQ==","signatures":[{"sig":"MEUCIQCddHoNo9wJUbuwJpy/dIQez7xqqCbQPis2L1Jj0ta8RwIgBG96J0gKRMRVXnUmIzJM/C9HRx69r2lV/btjf3vqajQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":431226},"main":"./dist/index.cjs","type":"module","_from":"file:byearlybird-budgie-0.1.0.tgz","types":"./dist/index.d.mts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./style.css":"./dist/style.css","./package.json":"./package.json"},"scripts":{"dev":"vp pack --watch","test":"vp test","build":"vp pack","check":"vp check","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"nickmurphy","email":"nickrmurphy@icloud.com"},"_resolved":"/private/var/folders/4h/bb9c_tbs151_51ycndd342740000gn/T/7b0ce3189fdbf71695f38f40461c76df/byearlybird-budgie-0.1.0.tgz","_integrity":"sha512-ynlPZF/1ZRSIRaWVZ5EIkvEy6zOXmrZq2QlH0dqEPZj1ZnbKRqqMY61ShT4iGmTAdy2+Nl/dws27keNsufMTiQ==","devEngines":{"packageManager":{"name":"pnpm","onFail":"download","version":"11.17.0"}},"_npmVersion":"11.18.0","description":"Reusable React components from By Early Bird.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.18.0","dependencies":{"clsx":"^2.1.1","recharts":"^3.10.0","@base-ui/react":"^1.6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"npm:@voidzero-dev/vite-plus-core@0.2.5","bumpp":"^11.1.0","react":"^19.2.8","vitest":"4.1.10","react-dom":"^19.2.8","storybook":"10.5.3","vite-plus":"0.2.5","playwright":"1.61.1","typescript":"^7.0.2","@types/node":"^26.1.1","@types/react":"^19.2.17","@types/react-dom":"^19.2.3","@storybook/addon-a11y":"10.5.3","@storybook/react-vite":"10.5.3","@storybook/addon-vitest":"10.5.3","@fontsource-variable/inter":"5.3.0","@vitest/browser-playwright":"4.1.10"},"peerDependencies":{"react":"^19.2.0","react-dom":"^19.2.0"},"_npmOperationalInternal":{"tmp":"tmp/budgie_0.1.0_1785190655488_0.20774369038112162","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@byearlybird/budgie","version":"0.2.0","description":"Reusable React components from By Early Bird.","keywords":["component-library","components","design-system","react","typescript"],"license":"MIT","author":"Nick Murphy","type":"module","sideEffects":["**/*.css"],"main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.mts","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./package.json":"./package.json","./tokens.css":"./dist/tokens.css","./style.css":"./dist/style.css"},"publishConfig":{"access":"public"},"dependencies":{"@base-ui/react":"^1.6.0","clsx":"^2.1.1","recharts":"^3.10.0"},"devDependencies":{"@fontsource-variable/karla":"5.3.0","@phosphor-icons/react":"2.1.10","@storybook/addon-a11y":"10.5.3","@storybook/addon-vitest":"10.5.3","@storybook/react-vite":"10.5.3","@types/node":"^26.1.1","@types/react":"^19.2.17","@types/react-dom":"^19.2.3","@vitest/browser-playwright":"4.1.10","bumpp":"^11.1.0","playwright":"1.61.1","react":"^19.2.8","react-dom":"^19.2.8","storybook":"10.5.3","typescript":"^7.0.2","vite":"npm:@voidzero-dev/vite-plus-core@0.2.5","vite-plus":"0.2.5","vitest":"4.1.10"},"peerDependencies":{"react":"^19.2.0","react-dom":"^19.2.0"},"devEngines":{"packageManager":{"name":"pnpm","version":"11.17.0","onFail":"download"}},"scripts":{"build":"vp pack","dev":"vp pack --watch","storybook":"storybook dev -p 6006","build-storybook":"storybook build","test":"vp test","check":"vp check"},"_nodeVersion":"24.18.0","_id":"@byearlybird/budgie@0.2.0","dist":{"integrity":"sha512-uojjVmB+4V14Oo1Ao7WEgYcnr1Gmo+r/z9HAhIf+k5g8M5BBCY4L3xvn9HqONppuqIls89tlRWqmRwxvNZNWrg==","shasum":"9ff2b21183012180e3cb58cf2c3cc42229686b1e","tarball":"https://registry.npmjs.org/@byearlybird/budgie/-/budgie-0.2.0.tgz","fileCount":11,"unpackedSize":691794,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGc/xRqOFha4oefY+5uRAnYC9ZNtaeH0GZx4NXIklW3RAiBv8EcIAjHpr7w/4EodsxJeSTbTrLpQ3cjA4X6wea3XNA=="}]},"_npmUser":{"name":"nickmurphy","email":"nickrmurphy@icloud.com"},"directories":{},"maintainers":[{"name":"nickmurphy","email":"nickrmurphy@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/budgie_0.2.0_1785278972041_0.05888517786541958"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-10T15:54:14.206Z","modified":"2026-07-28T22:49:32.359Z","0.0.1":"2025-11-10T15:54:14.522Z","0.0.2":"2025-11-10T15:55:01.645Z","0.1.0":"2026-07-27T22:17:35.654Z","0.2.0":"2026-07-28T22:49:32.194Z"},"author":"Nick Murphy","license":"MIT","keywords":["component-library","components","design-system","react","typescript"],"description":"Reusable React components from By Early Bird.","maintainers":[{"name":"nickmurphy","email":"nickrmurphy@icloud.com"}],"readme":"# @byearlybird/budgie\n\nReusable React components by Early Bird, built with TypeScript and CSS Modules.\n\n> [!WARNING]\n> **Status: Alpha.** Budgie is under active development. Component APIs, styling,\n> and design tokens may change before 1.0.\n\n## Install\n\n```bash\npnpm add @byearlybird/budgie\n```\n\nBudgie supports React 19.2 and later React 19 releases. If the consuming app does not\nalready have React installed, add it too:\n\n```bash\npnpm add react react-dom\n```\n\nKarla is Budgie's preferred font. Font files are not bundled with the component\nlibrary, so install them in the consuming application:\n\n```bash\npnpm add @fontsource-variable/karla\n```\n\n## Use\n\n```tsx\nimport \"@fontsource-variable/karla\";\nimport {\n  BarChart,\n  Button,\n  ButtonIcon,\n  Checkbox,\n  Combobox,\n  ComboboxClear,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxInputGroup,\n  ComboboxItem,\n  ComboboxLeadingIcon,\n  ComboboxList,\n  ComboboxTrigger,\n  Input,\n  InputAction,\n  InputGroup,\n  InputIcon,\n  LineChart,\n  Menu,\n  MenuContent,\n  MenuItem,\n  MenuTrigger,\n  PieChart,\n  Radio,\n  RadioGroup,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectLeadingIcon,\n  SelectList,\n  SelectTrigger,\n  SelectValue,\n  Switch,\n  Textarea,\n} from \"@byearlybird/budgie\";\nimport \"@byearlybird/budgie/style.css\";\nimport { PaletteIcon, SearchIcon } from \"./icons\";\n\nexport function Example() {\n  return (\n    <form>\n      <InputGroup>\n        <InputIcon>\n          <SearchIcon />\n        </InputIcon>\n        <Input aria-label=\"Search\" placeholder=\"Search\" />\n        <InputAction type=\"submit\">Search</InputAction>\n      </InputGroup>\n      <Button>\n        <ButtonIcon>\n          <SearchIcon />\n        </ButtonIcon>\n        Find another\n      </Button>\n      <Textarea aria-label=\"Notes\" name=\"notes\" placeholder=\"Add notes\" />\n      <label>\n        <Checkbox name=\"updates\" />\n        Send me updates\n      </label>\n      <RadioGroup aria-label=\"Theme preference\" defaultValue=\"system\" name=\"theme-preference\">\n        <label>\n          <Radio value=\"system\" />\n          System\n        </label>\n        <label>\n          <Radio value=\"dark\" />\n          Dark\n        </label>\n      </RadioGroup>\n      <label>\n        <Switch name=\"compact\" />\n        Compact mode\n      </label>\n      <Menu>\n        <MenuTrigger>Actions</MenuTrigger>\n        <MenuContent>\n          <MenuItem>Duplicate</MenuItem>\n          <MenuItem>Rename</MenuItem>\n        </MenuContent>\n      </Menu>\n      <Combobox items={fruits} name=\"fruit\">\n        <ComboboxInputGroup>\n          <ComboboxLeadingIcon>\n            <SearchIcon />\n          </ComboboxLeadingIcon>\n          <ComboboxInput aria-label=\"Fruit\" placeholder=\"Search for a fruit\" />\n          <ComboboxClear />\n          <ComboboxTrigger />\n        </ComboboxInputGroup>\n        <ComboboxContent>\n          <ComboboxEmpty>No fruits found.</ComboboxEmpty>\n          <ComboboxList>\n            {(fruit) => (\n              <ComboboxItem key={fruit.value} value={fruit}>\n                {fruit.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={themes} name=\"theme\">\n        <SelectTrigger aria-label=\"Theme\">\n          <SelectLeadingIcon>\n            <PaletteIcon />\n          </SelectLeadingIcon>\n          <SelectValue placeholder=\"Select a theme\" />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={false}>\n          <SelectList>\n            {themes.map((theme) => (\n              <SelectItem key={theme.value} value={theme.value}>\n                {theme.label}\n              </SelectItem>\n            ))}\n          </SelectList>\n        </SelectContent>\n      </Select>\n    </form>\n  );\n}\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n];\n\nconst fruits = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Mango\", value: \"mango\" },\n];\n```\n\nImport `@byearlybird/budgie/style.css` once in the consuming app's root entry or\nlayout. The component source uses CSS Modules, and the package exposes the compiled,\nscoped stylesheet as this stable CSS entry.\n\n`Button`, `Input`, and the Select and Combobox parts extend their\ncorresponding Base UI primitives, including state-aware `className`, Field\nintegration, and ref support. Wrap `Input` in `InputGroup` when icons or other\nadornments need to sit beside it. `SelectLeadingIcon` and\n`ComboboxLeadingIcon` provide the same leading-icon composition for selection\ncontrols. `Textarea` extends the native textarea props.\n\n## Overlays\n\nDialog and Drawer include themed backdrops, surfaces, titles, descriptions, triggers,\nand close controls. Their `Content` components supply the standard portal, backdrop,\nviewport, and popup structure. Drawer additionally supports Base UI's swipe\ndirections, snap points, nested drawers, and virtual keyboard provider.\n\n```tsx\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@byearlybird/budgie\";\n\n<Dialog>\n  <DialogTrigger>Open dialog</DialogTrigger>\n  <DialogContent>\n    <DialogTitle>Edit profile</DialogTitle>\n    <DialogDescription>Update your public profile details.</DialogDescription>\n    <DialogClose>Close</DialogClose>\n  </DialogContent>\n</Dialog>;\n\n<Drawer swipeDirection=\"right\">\n  <DrawerTrigger>Open drawer</DrawerTrigger>\n  <DrawerContent>\n    <DrawerTitle>Account settings</DrawerTitle>\n    <DrawerDescription>Update your account details.</DrawerDescription>\n    <DrawerClose>Close</DrawerClose>\n  </DrawerContent>\n</Drawer>;\n```\n\n## Layout\n\nBudgie provides `Box`, `Flex`, `Grid`, `Container`, and `Section` for token-backed\npage and component layouts. Spacing props use the Pollen size token names rather\nthan raw measurements. `px` controls the inline (x) axis and `py` controls the block\n(y) axis.\n\n```tsx\n<Section size=\"2\">\n  <Container size=\"3\" px={{ initial: \"4\", md: \"8\" }}>\n    <Grid columns={{ initial: \"1\", sm: \"2\" }} gap=\"4\">\n      <Box p=\"4\">First</Box>\n      <Box p=\"4\">Second</Box>\n    </Grid>\n  </Container>\n</Section>\n```\n\nAll layout props accept responsive objects keyed by `initial`, `xs`, `sm`, `md`,\n`lg`, and `xl`. The spacing values `\"1\"`, `\"2\"`, `\"3\"`, `\"4\"`, `\"8\"`, and `\"10\"`\nresolve to their matching `--size-*` tokens. CSS variable references are also\naccepted when an application provides a semantic token of its own.\n\n## Design tokens\n\nBudgie exposes its tokens separately from its component styles. Apps that only need\nthe shared tokens can import the standalone entry:\n\n```css\n@import \"@byearlybird/budgie/tokens.css\";\n```\n\n`@byearlybird/budgie/style.css` already includes these tokens, so apps using Budgie\ncomponents should import only the component stylesheet. The standalone token entry\ncontains Budgie's public theme and layout values and the Pollen primitives used by\nthe library.\n\n```css\n:root {\n  --budgie-color-primary: #252523;\n  --budgie-color-primary-text: #faf9f6;\n  --budgie-color-background: #faf9f6;\n  --budgie-color-text: #252523;\n  --budgie-color-border: #b8b5ad;\n  --budgie-color-muted: #e3e1da;\n  --budgie-font-family: \"Karla Variable\", \"Karla\", ui-sans-serif, system-ui, sans-serif;\n  --budgie-radius-surface: 2px;\n  --budgie-radius-input: 9999px;\n  --budgie-radius-button: 9999px;\n  --budgie-layout-container-1: 28rem;\n  --budgie-layout-container-2: 43rem;\n  --budgie-layout-container-3: 55rem;\n  --budgie-layout-container-4: 71rem;\n}\n```\n\nBudgie follows the system color-scheme preference by default. Set `data-theme` on\nthe document root or any containing element to select a mode explicitly:\n\n```html\n<html data-theme=\"dark\">\n  <!-- Budgie components use the dark theme -->\n</html>\n```\n\nBoth `data-theme=\"light\"` and `data-theme=\"dark\"` can be scoped to part of a page.\nThe light defaults use a warm off-white surface with softened neutral borders. The\ndark defaults use a deep charcoal surface, warm light text, and quieter dark\nborders. Surfaces use a crisp 2px radius, while form inputs and buttons use fully\nrounded shapes.\n\nOverride any of these values after the Budgie stylesheet:\n\n```css\n@import \"@byearlybird/budgie/style.css\";\n\n:root {\n  --budgie-color-primary: #1d4ed8;\n  --budgie-color-primary-text: #fff;\n  --budgie-font-family: \"Avenir Next\", ui-sans-serif, system-ui, sans-serif;\n  --budgie-radius-surface: 12px;\n  --budgie-radius-input: 6px;\n  --budgie-radius-button: 9999px;\n}\n```\n\nIf Karla is not installed or loaded, the token falls back to the application's\nsystem sans-serif font. Budgie supplies consistent hover and focus behavior. Its\ndefaults use `:where(:root)`, so applications can override them without specificity\ntricks.\n\n## Charts\n\nBudgie includes opinionated line, bar, and pie charts powered by Recharts. Each chart\nis responsive, supports light and dark themes, and uses the existing Budgie color\ntokens by default.\n\n```tsx\nconst data = [\n  { month: \"Jan\", current: 42, previous: 32 },\n  { month: \"Feb\", current: 48, previous: 38 },\n  { month: \"Mar\", current: 45, previous: 41 },\n];\n\n<LineChart\n  data={data}\n  title=\"Account growth\"\n  description=\"Monthly active accounts.\"\n  xKey=\"month\"\n  series={[\n    { dataKey: \"current\", label: \"This year\" },\n    { dataKey: \"previous\", label: \"Last year\" },\n  ]}\n/>;\n\n<BarChart\n  data={data}\n  title=\"Monthly accounts\"\n  xKey=\"month\"\n  series={[{ dataKey: \"current\", label: \"Accounts\" }]}\n/>;\n\n<PieChart\n  data={[\n    { plan: \"Individual\", share: 54 },\n    { plan: \"Team\", share: 29 },\n    { plan: \"Enterprise\", share: 17 },\n  ]}\n  title=\"Customer mix\"\n  nameKey=\"plan\"\n  valueKey=\"share\"\n  valueFormatter={(value) => `${value}%`}\n/>;\n```\n\nSet a series `color` or pass a `colors` array to `PieChart` when a product-specific\npalette is needed. CSS color values, including application theme variables, are\nsupported.\n\n## Develop\n\n```bash\nvp install\nvp exec playwright install chromium\nvp run storybook\n```\n\nStorybook runs at `http://localhost:6006`.\n\n## Validate and build\n\n```bash\nvp check\nvp test\nvp run build\nvp run build-storybook\n```\n\n`vp test` runs the SSR smoke test and all Storybook component tests in headless Chromium.\nThe package build is written to `dist/`, and the static Storybook site is written to\n`storybook-static/`.\n\n## Publish\n\nAuthenticate with npm, choose a new version, then publish:\n\n```bash\nvp dlx bumpp\npnpm publish\n```\n\nThe package is configured for public scoped publishing.\n","readmeFilename":""}