{"_id":"@booga/vui","_rev":"5-f9f48a0292f20808e03c6efe00b67ebb","name":"@booga/vui","dist-tags":{"latest":"0.4.0"},"versions":{"0.1.0":{"name":"@booga/vui","version":"0.1.0","author":{"name":"bvasilenko"},"license":"MIT","_id":"@booga/vui@0.1.0","maintainers":[{"name":"dreaktor","email":"me@dreaktor.com"}],"dist":{"shasum":"ebd997d8ee7b0cb918b6ede98eb35a2e9e884fe1","tarball":"https://registry.npmjs.org/@booga/vui/-/vui-0.1.0.tgz","fileCount":162,"integrity":"sha512-mDkk1oNOD9Wn24sPvFnY8rDO0Yiy8iI0rnrdp4mZybXIDzrwL8dh4elMo9W6Tyo91cWYUzTexLVdnFKZK7y1Xg==","signatures":[{"sig":"MEQCIESifr19Q4tSn00vO72HkLQd4J5f5Jp3vvyzksBLFKIRAiA7Icu2I7Pj/C9R1XHpl+HgJ7f+wGCn5K+yWmxTsDFMtA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":488687},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"1f90cc91c6ab2658a71966c742d89a9bd6be4617","scripts":{"dev":"tsup --watch","lint":"eslint .","test":"vitest run --coverage","build":"tsup","typecheck":"tsc --noEmit","test:watch":"vitest"},"_npmUser":{"name":"dreaktor","email":"me@dreaktor.com"},"_npmVersion":"10.9.3","description":"Polymorphic React primitives. CVA variants, cn() dedup, token bridge to vTheme. Semantic HTML, ARIA defaults, split-bundle tree-shaking.","directories":{},"sideEffects":false,"_nodeVersion":"22.19.0","dependencies":{"clsx":"^2.0.0","lucide-react":"^1.0.0","@booga/vtheme":"^0.1.0","tailwind-merge":"^2.0.0","@radix-ui/react-slot":"^1.0.0","class-variance-authority":"^0.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^25.0.0","react":"^18.0.0","eslint":"^9.0.0","vitest":"^3.0.0","globals":"^15.0.0","react-dom":"^18.0.0","@eslint/js":"^9.0.0","typescript":"^5.0.0","@types/node":"^20.19.39","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","typescript-eslint":"^8.0.0","@vitest/coverage-v8":"^3.0.0","@vitejs/plugin-react":"^4.0.0","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.0.0","@testing-library/user-event":"^14.0.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","tailwindcss":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vui_0.1.0_1778074748734_0.5982173766311731","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@booga/vui","version":"0.2.0","author":{"name":"bvasilenko"},"license":"MIT","_id":"@booga/vui@0.2.0","maintainers":[{"name":"dreaktor","email":"me@dreaktor.com"}],"dist":{"shasum":"b886d68075442770a23d4bf605eec05aa22a05f4","tarball":"https://registry.npmjs.org/@booga/vui/-/vui-0.2.0.tgz","fileCount":162,"integrity":"sha512-I8IUuGcR53q/3eAnvpcJ3ck6X1NkNUns15hxpaWV7g+XVFIhBvif5+CX5KJ9i3XFhm/UgBF2RLT3+Teo7iaIFg==","signatures":[{"sig":"MEUCIQDsrgB7IDZx8TiJHjsboMEsEQqCx0tbuy8FZdsn58dQiwIgB01QJDukmrPCkXrVsBIdeSZvKyXVCcZwnZw5714fSro=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":489330},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"cbe1802b9f048e587e7d29d2ee4b85f26ed3b38f","scripts":{"dev":"tsup --watch","lint":"eslint .","test":"vitest run --coverage","build":"tsup","typecheck":"tsc --noEmit","test:watch":"vitest"},"_npmUser":{"name":"dreaktor","email":"me@dreaktor.com"},"_npmVersion":"10.9.3","description":"Polymorphic React primitives. CVA variants, cn() dedup, token bridge to vTheme. Semantic HTML, ARIA defaults, split-bundle tree-shaking.","directories":{},"sideEffects":false,"_nodeVersion":"22.19.0","dependencies":{"clsx":"^2.0.0","lucide-react":"^1.0.0","@booga/vtheme":"^0.2.0","tailwind-merge":"^2.0.0","@radix-ui/react-slot":"^1.0.0","class-variance-authority":"^0.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^25.0.0","react":"^18.0.0","eslint":"^9.0.0","vitest":"^3.0.0","globals":"^15.0.0","react-dom":"^18.0.0","@eslint/js":"^9.0.0","typescript":"^5.0.0","@types/node":"^20.19.39","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","typescript-eslint":"^8.0.0","@vitest/coverage-v8":"^3.0.0","@vitejs/plugin-react":"^4.0.0","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.0.0","@testing-library/user-event":"^14.0.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","tailwindcss":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/vui_0.2.0_1779052413866_0.8774634797838157","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@booga/vui","version":"0.3.0","author":{"name":"bvasilenko"},"license":"MIT","_id":"@booga/vui@0.3.0","maintainers":[{"name":"dreaktor","email":"me@dreaktor.com"}],"dist":{"shasum":"e945589e316035d508497bf0300c6891cdbd9768","tarball":"https://registry.npmjs.org/@booga/vui/-/vui-0.3.0.tgz","fileCount":163,"integrity":"sha512-IOsZM7zcq255MVJ4n2DjgUq2BiyuSserm+DNRKU5QSk9Ft7n9xTDkvq6jqGx/5HMY3r7Zvzyh1kp21DyD7F5KA==","signatures":[{"sig":"MEUCIQCczQZuSVqPH2ACgqofRMazNihTO0LZfbGv7AeXXU922AIgV4DD8XTrHM1CDFrmyB0LcKIZeKL6JZDd+hWckksOPJk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":506395},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"gitHead":"17082ca83b54133b9032bbe90e6945ce49eb52bc","scripts":{"dev":"tsup --watch","lint":"eslint .","test":"vitest run --coverage","build":"tsup && npm run build:css","build:css":"tailwindcss -i ./styles-entry.css -c ./tailwind.config.js -o ./dist/styles.css --minify","typecheck":"tsc --noEmit","test:watch":"vitest"},"_npmUser":{"name":"dreaktor","email":"me@dreaktor.com"},"_npmVersion":"10.9.3","description":"Polymorphic React primitives. CVA variants, cn() dedup, token bridge to vTheme. Semantic HTML, ARIA defaults, split-bundle tree-shaking.","directories":{},"sideEffects":false,"_nodeVersion":"22.19.0","dependencies":{"clsx":"^2.0.0","lucide-react":"^1.0.0","@booga/vtheme":"^0.2.1","tailwind-merge":"^2.0.0","@radix-ui/react-slot":"^1.0.0","class-variance-authority":"^0.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^25.0.0","react":"^18.0.0","eslint":"^9.0.0","vitest":"^3.0.0","globals":"^15.0.0","react-dom":"^18.0.0","@eslint/js":"^9.0.0","typescript":"^5.0.0","@types/node":"^20.19.39","tailwindcss":"^3.4.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","typescript-eslint":"^8.0.0","@vitest/coverage-v8":"^3.0.0","@vitejs/plugin-react":"^4.0.0","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.0.0","@testing-library/user-event":"^14.0.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","tailwindcss":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/vui_0.3.0_1779105938436_0.013441095120087176","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"@booga/vui","version":"0.3.1","author":{"name":"bvasilenko"},"license":"MIT","_id":"@booga/vui@0.3.1","maintainers":[{"name":"dreaktor","email":"me@dreaktor.com"}],"dist":{"shasum":"3f3b81b056d4234cd4c909ed8e610c3686ee8e11","tarball":"https://registry.npmjs.org/@booga/vui/-/vui-0.3.1.tgz","fileCount":163,"integrity":"sha512-6+v0FhWE9wdQDubVkBpKH/Nru1T+w7tWw8Hdcx8b0O/MgA4/ZDBEf6wF+kKtyk5x5Dxyi9NmXq3q8MXZfhswjg==","signatures":[{"sig":"MEYCIQDiCkOTlvOh47hKcxrDw1qidSxrXL6J2rn+9kH09s4jTwIhAM2GtZVKohd+FoaMUSCeA8MpDfhfUwTQZyA2DZmByEpF","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":506914},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"gitHead":"a363fb37b1dfd07e8ccf4e5127d6f7028208937c","scripts":{"dev":"tsup --watch","lint":"eslint .","test":"vitest run --coverage","build":"tsup && npm run build:css","build:css":"tailwindcss -i ./styles-entry.css -c ./tailwind.config.js -o ./dist/styles.css --minify","typecheck":"tsc --noEmit","test:watch":"vitest"},"_npmUser":{"name":"dreaktor","email":"me@dreaktor.com"},"_npmVersion":"10.9.3","description":"Polymorphic React primitives. CVA variants, cn() dedup, token bridge to vTheme. Semantic HTML, ARIA defaults, split-bundle tree-shaking.","directories":{},"sideEffects":false,"_nodeVersion":"22.19.0","dependencies":{"clsx":"^2.0.0","lucide-react":"^1.0.0","@booga/vtheme":"^0.2.2","tailwind-merge":"^2.0.0","@radix-ui/react-slot":"^1.0.0","class-variance-authority":"^0.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^25.0.0","react":"^18.0.0","eslint":"^9.0.0","vitest":"^3.0.0","globals":"^15.0.0","react-dom":"^18.0.0","@eslint/js":"^9.0.0","typescript":"^5.0.0","@types/node":"^20.19.39","tailwindcss":"^3.4.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","typescript-eslint":"^8.0.0","@vitest/coverage-v8":"^3.0.0","@vitejs/plugin-react":"^4.0.0","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.0.0","@testing-library/user-event":"^14.0.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","tailwindcss":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/vui_0.3.1_1779123088291_0.8238720059533597","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@booga/vui","version":"0.4.0","description":"Polymorphic React primitives. CVA variants, cn() dedup, token bridge to vTheme. Semantic HTML, ARIA defaults, split-bundle tree-shaking.","type":"module","sideEffects":false,"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"scripts":{"dev":"tsup --watch","build":"tsup && npm run build:css","typecheck":"tsc --noEmit","lint":"eslint .","test":"vitest run --coverage","test:watch":"vitest","build:css":"tailwindcss -i ./styles-entry.css -c ./tailwind.config.js -o ./dist/styles.css --minify"},"dependencies":{"@booga/vtheme":"^0.3.0","@booga/vdsl":"^0.3.0","@radix-ui/react-slot":"^1.0.0","class-variance-authority":"^0.7.0","clsx":"^2.0.0","lucide-react":"^1.0.0","tailwind-merge":"^2.0.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","tailwindcss":"^3.4.0"},"devDependencies":{"@eslint/js":"^9.0.0","@testing-library/jest-dom":"^6.0.0","@testing-library/react":"^16.0.0","@testing-library/user-event":"^14.0.0","@types/node":"^20.19.39","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.0.0","@vitest/coverage-v8":"^3.0.0","eslint":"^9.0.0","globals":"^15.0.0","jsdom":"^25.0.0","react":"^18.0.0","react-dom":"^18.0.0","tailwindcss":"^3.4.0","tsup":"^8.0.0","typescript":"^5.0.0","typescript-eslint":"^8.0.0","vitest":"^3.0.0"},"publishConfig":{"access":"public"},"license":"MIT","author":{"name":"bvasilenko"},"_id":"@booga/vui@0.4.0","gitHead":"fa24787c10dd78ff7d777ae46dbd560bf1dd6377","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-E9N5tkqClZ9ke6ZV65JpT8KHEUHHN9F6mowaPVuvG4uNH95aYBL71WrPj7IlJD7XUUS/sAZsNXnpr1d9ZxJDxw==","shasum":"d209fea24c66ed73fb44dc2d52eb484bc414e309","tarball":"https://registry.npmjs.org/@booga/vui/-/vui-0.4.0.tgz","fileCount":187,"unpackedSize":613401,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFc3C27GpOMnaFhSFecEHUK31vmy49NoHIpMTqUsvj8bAiEA6QivxnshD1yy/sy7cxIKDr/5+aWxaTo+CKMRnWV8Dmo="}]},"_npmUser":{"name":"dreaktor","email":"me@dreaktor.com"},"directories":{},"maintainers":[{"name":"dreaktor","email":"me@dreaktor.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vui_0.4.0_1780313863234_0.0007852843095854656"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-06T13:39:08.661Z","modified":"2026-06-01T11:37:43.514Z","0.1.0":"2026-05-06T13:39:08.896Z","0.2.0":"2026-05-17T21:13:34.038Z","0.3.0":"2026-05-18T12:05:38.598Z","0.3.1":"2026-05-18T16:51:28.435Z","0.4.0":"2026-06-01T11:37:43.381Z"},"author":{"name":"bvasilenko"},"license":"MIT","description":"Polymorphic React primitives. CVA variants, cn() dedup, token bridge to vTheme. Semantic HTML, ARIA defaults, split-bundle tree-shaking.","maintainers":[{"name":"dreaktor","email":"me@dreaktor.com"}],"readme":"# vUi\n\nPolymorphic React primitives. CVA variants, `cn()` class dedup, token bridge to vTheme. Semantic HTML defaults, ARIA inline, ref forwarding  - no theme provider, no runtime config.\n\n## Install\n\n```sh\nnpm install @booga/vui\n```\n\nPeer deps: `react ^18`, `react-dom ^18`, `tailwindcss ^3.4`.\n\n## Theme setup\n\nvUi's components emit Tailwind color-role classes (`bg-primary`, `border-input`, …). Those roles are defined by `@booga/vtheme`. Apply its preset so they resolve:\n\n```js\n// tailwind.config.js\nimport vtheme from \"@booga/vtheme/preset\";\n\nexport default {\n  presets: [vtheme],\n  content: [\n    \"./src/**/*.{ts,tsx}\",\n    \"./node_modules/@booga/vui/dist/**/*.js\",\n  ],\n};\n```\n\nWithout the preset the role classes compile to nothing  - components render unstyled.\n\n## Usage\n\n```tsx\nimport { Button, Card, CardContent, Input, cn } from \"@booga/vui\";\n\n<Button variant=\"default\" size=\"md\">Save</Button>\n<Button as=\"a\" href=\"/docs\">Docs</Button>\n<Button asChild><a href=\"/docs\">Docs</a></Button>\n\n<Card>\n  <CardContent>\n    <Input defaultValue=\"hello\" />\n  </CardContent>\n</Card>\n\ncn(\"p-2\", \"p-4\") // → \"p-4\"\n```\n\n## Polymorphic `as` prop\n\nEvery component accepts `as` to change the rendered element. TypeScript narrows props to the target element type.\n\n```tsx\n<Button as=\"a\" href=\"/home\">Link button</Button>\n// → <a href=\"/home\" class=\"...button classes...\">Link button</a>\n```\n\n## `asChild` / Slot composition\n\n`asChild` delegates rendering to the immediate child, merging classes and props.\n\n```tsx\n<Button asChild>\n  <a href=\"/home\">Link</a>\n</Button>\n// → <a href=\"/home\" class=\"...button classes...\">Link</a>\n```\n\n## Variants (Button)\n\n`variant`: `default` | `secondary` | `destructive` | `outline` | `ghost` | `link`  \n`size`: `sm` | `md` | `lg` | `icon`  \n`tone`: `ok` | `warn` | `bad` | `info` | `meta` (paints with vTheme tone tokens)\n\n## Proposal-vocabulary primitives\n\n`Kicker`, `Eyebrow`, `Lead`, `Pill` carry the proposal-style typography and\ndensity vocabulary inherited from vTheme 0.3.0. Each forwards refs, is\npolymorphic via `as`, and accepts `tone` where semantic palette applies.\n\n```tsx\nimport { Kicker, Eyebrow, Lead, Pill } from \"@booga/vui\";\n\n<Kicker tone=\"info\">Phase 1</Kicker>\n<Eyebrow>Section overhead</Eyebrow>\n<Lead>Opening paragraph with constrained measure.</Lead>\n<Pill tone=\"ok\">Client</Pill>\n<Pill tone=\"warn\" outlined>Heads up</Pill>\n```\n\n`Badge` and `Card` also accept the `tone` prop for semantic surfaces.\n\n## Token bridge\n\nButton's default variant references `--v-color-accent` from vTheme CSS variables. Set tokens at `:root` via `cssVars(tokens)` from `@booga/vtheme`.\n\n## Layout primitives\n\n`Box`, `Stack`, `Inline`, `Grid`  - flex/grid wrappers, polymorphic, extend via `className`.\n\n## Overlay components\n\n`Sheet`, `Dialog`, `Popover`, `Tooltip`  - compound components with ARIA defaults. Enhanced by `vAria` when installed.\n\n```tsx\n<Sheet open={open} onOpenChange={setOpen}>\n  <SheetTrigger>Open</SheetTrigger>\n  <SheetContent aria-label=\"Panel\">...</SheetContent>\n</Sheet>\n```\n\n## Contributing\n\nContributions follow the [Contributor Covenant 2.1](https://www.contributor-covenant.org/version/2/1/code_of_conduct/).\n\n## License\n\nMIT © 2026 bvasilenko\n","readmeFilename":"README.md"}