{"_id":"@ayoungh/cmpnnts","_rev":"4-184dbb6405188b6dd7fc0e57a17af67c","name":"@ayoungh/cmpnnts","dist-tags":{"latest":"0.1.7"},"versions":{"0.1.0":{"name":"@ayoungh/cmpnnts","version":"0.1.0","_id":"@ayoungh/cmpnnts@0.1.0","maintainers":[{"name":"ayoungh","email":"ayoung93@gmail.com"}],"dist":{"shasum":"7ed241d31d5b6f433c4b4bb36c619c208e9e2261","tarball":"https://registry.npmjs.org/@ayoungh/cmpnnts/-/cmpnnts-0.1.0.tgz","fileCount":199,"integrity":"sha512-jMYb/gNkL784CCKH0IhSnRStuYShgg8th+rh6W0+NUBHeDbvgCgCt4Phr+TqfWuGkDn4lAiyTwtE3ai2fPZA/g==","signatures":[{"sig":"MEUCIQCvF+ewoMdxuIbrcjXB5RmAZLay9y853P4dZnCzMsjUVAIgKfUHlljdC2j5vXCLEven4iTZMlG6fE1AGtYWXUSiXcc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":285471},"main":"./dist/index.js","type":"module","_from":"file:ayoungh-cmpnnts-0.1.0.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./lib/*":{"types":"./dist/lib/*.d.ts","import":"./dist/lib/*.js"},"./styles.css":"./dist/styles.css","./components/*":{"types":"./dist/components/*.d.ts","import":"./dist/components/*.js"}},"private":false,"scripts":{"dev":"next dev","lint":"next lint","build":"pnpm build:package","clean":"rm -rf dist","start":"next start","build:app":"next build","pack:check":"pnpm pack --dry-run","build:package":"rm -rf dist && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json && mkdir -p dist && cp styles.css dist/styles.css"},"_npmUser":{"name":"ayoungh","email":"ayoung93@gmail.com"},"_resolved":"/private/var/folders/hm/7krdk7px6bg6ntnd1jsgt5mw0000gn/T/0a365fa015badb9ca13dc5379e559b29/ayoungh-cmpnnts-0.1.0.tgz","_integrity":"sha512-jMYb/gNkL784CCKH0IhSnRStuYShgg8th+rh6W0+NUBHeDbvgCgCt4Phr+TqfWuGkDn4lAiyTwtE3ai2fPZA/g==","_npmVersion":"11.6.2","description":"Reusable React UI components and utilities for your design system.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.13.0","dependencies":{"zod":"^3.23.8","clsx":"^2.1.1","cmdk":"^1.0.0","vaul":"^0.9.1","sonner":"^1.4.41","date-fns":"^3.6.0","input-otp":"^1.2.4","next-themes":"^0.3.0","lucide-react":"^0.381.0","@geist-ui/core":"^2.3.8","tailwind-merge":"^2.3.0","react-hook-form":"^7.51.5","react-day-picker":"^8.10.1","@hookform/resolvers":"^3.4.2","tailwindcss-animate":"^1.0.7","@radix-ui/react-slot":"^1.0.2","@radix-ui/react-tabs":"^1.0.4","embla-carousel-react":"^8.1.3","@radix-ui/react-label":"^2.0.2","@radix-ui/react-toast":"^1.1.5","@tanstack/react-table":"^8.17.3","@radix-ui/react-avatar":"^1.0.4","@radix-ui/react-dialog":"^1.0.5","@radix-ui/react-select":"^2.0.0","@radix-ui/react-slider":"^1.1.2","@radix-ui/react-switch":"^1.0.3","@radix-ui/react-toggle":"^1.0.3","react-resizable-panels":"^2.0.19","@radix-ui/react-menubar":"^1.0.4","@radix-ui/react-popover":"^1.0.7","@radix-ui/react-tooltip":"^1.0.7","@radix-ui/react-checkbox":"^1.0.4","@radix-ui/react-progress":"^1.0.3","class-variance-authority":"^0.7.0","@radix-ui/react-accordion":"^1.1.2","@radix-ui/react-separator":"^1.0.3","@radix-ui/react-hover-card":"^1.0.7","@radix-ui/react-collapsible":"^1.0.3","@radix-ui/react-radio-group":"^1.1.3","@radix-ui/react-scroll-area":"^1.0.5","@radix-ui/react-alert-dialog":"^1.0.5","@radix-ui/react-aspect-ratio":"^1.0.3","@radix-ui/react-context-menu":"^2.1.5","@radix-ui/react-toggle-group":"^1.0.4","@radix-ui/react-dropdown-menu":"^2.0.6","@radix-ui/react-navigation-menu":"^1.1.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"next":"15.0.0-canary.14","react":"19.0.0-rc-f994737d14-20240522","eslint":"^8","postcss":"^8","react-dom":"19.0.0-rc-f994737d14-20240522","tsc-alias":"^1.8.10","typescript":"^5","@types/node":"^20","tailwindcss":"^3.4.1","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"15.0.0-canary.5"},"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/cmpnnts_0.1.0_1770929259391_0.06610896642541131","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"@ayoungh/cmpnnts","version":"0.1.5","_id":"@ayoungh/cmpnnts@0.1.5","maintainers":[{"name":"ayoungh","email":"ayoung93@gmail.com"}],"dist":{"shasum":"0dd1c15732e420cf8f830973a9dec4f0e9ca31e0","tarball":"https://registry.npmjs.org/@ayoungh/cmpnnts/-/cmpnnts-0.1.5.tgz","fileCount":207,"integrity":"sha512-E/8w7vogoLyF1defLL8CnSSCyIklTzSk8IHpTn3SV7PkkbcZwzIbHVlovNx9gq9Npm+NPnBnL/WhAnasqg43Ow==","signatures":[{"sig":"MEUCIQDmYYYKrPIw6vuCkEMntjHaLWx3aUtrfPCYmZZmNs9wxgIgXPy/uLCi/RbksPfPzOf7tBG8QEPzvfMI8TKrEXJMTD0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":292528},"main":"./dist/index.js","type":"module","_from":"file:ayoungh-cmpnnts-0.1.5.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./lib/*":{"types":"./dist/lib/*.d.ts","import":"./dist/lib/*.js"},"./styles.css":"./dist/styles.css","./components/*":{"types":"./dist/components/*.d.ts","import":"./dist/components/*.js"}},"private":false,"scripts":{"dev":"next dev","lint":"next lint","build":"pnpm build:package","clean":"rm -rf dist","start":"next start","build:app":"next build","pack:check":"pnpm pack --dry-run","build:package":"rm -rf dist && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json && mkdir -p dist && cp styles.css dist/styles.css"},"_npmUser":{"name":"ayoungh","email":"ayoung93@gmail.com"},"_resolved":"/private/var/folders/hm/7krdk7px6bg6ntnd1jsgt5mw0000gn/T/5b50422846330906a667e42ac5c6d0ac/ayoungh-cmpnnts-0.1.5.tgz","_integrity":"sha512-E/8w7vogoLyF1defLL8CnSSCyIklTzSk8IHpTn3SV7PkkbcZwzIbHVlovNx9gq9Npm+NPnBnL/WhAnasqg43Ow==","_npmVersion":"11.6.2","description":"Reusable React UI components and utilities for your design system.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.13.0","dependencies":{"zod":"^3.23.8","clsx":"^2.1.1","cmdk":"^1.0.0","vaul":"^0.9.1","sonner":"^1.4.41","date-fns":"^3.6.0","input-otp":"^1.2.4","next-themes":"^0.3.0","lucide-react":"^0.381.0","@geist-ui/core":"^2.3.8","tailwind-merge":"^2.3.0","react-hook-form":"^7.51.5","react-day-picker":"^8.10.1","@hookform/resolvers":"^3.4.2","tailwindcss-animate":"^1.0.7","@radix-ui/react-slot":"^1.0.2","@radix-ui/react-tabs":"^1.0.4","embla-carousel-react":"^8.1.3","@radix-ui/react-label":"^2.0.2","@radix-ui/react-toast":"^1.1.5","@tanstack/react-table":"^8.17.3","@radix-ui/react-avatar":"^1.0.4","@radix-ui/react-dialog":"^1.0.5","@radix-ui/react-select":"^2.0.0","@radix-ui/react-slider":"^1.1.2","@radix-ui/react-switch":"^1.0.3","@radix-ui/react-toggle":"^1.0.3","react-resizable-panels":"^2.0.19","@radix-ui/react-menubar":"^1.0.4","@radix-ui/react-popover":"^1.0.7","@radix-ui/react-tooltip":"^1.0.7","@radix-ui/react-checkbox":"^1.0.4","@radix-ui/react-progress":"^1.0.3","class-variance-authority":"^0.7.0","@radix-ui/react-accordion":"^1.1.2","@radix-ui/react-separator":"^1.0.3","@radix-ui/react-hover-card":"^1.0.7","@radix-ui/react-collapsible":"^1.0.3","@radix-ui/react-radio-group":"^1.1.3","@radix-ui/react-scroll-area":"^1.0.5","@radix-ui/react-alert-dialog":"^1.0.5","@radix-ui/react-aspect-ratio":"^1.0.3","@radix-ui/react-context-menu":"^2.1.5","@radix-ui/react-toggle-group":"^1.0.4","@radix-ui/react-dropdown-menu":"^2.0.6","@radix-ui/react-navigation-menu":"^1.1.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"next":"15.0.0-canary.14","react":"19.0.0-rc-f994737d14-20240522","eslint":"^8","postcss":"^8","react-dom":"19.0.0-rc-f994737d14-20240522","tsc-alias":"^1.8.10","typescript":"^5","@types/node":"^20","tailwindcss":"^3.4.1","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"15.0.0-canary.5"},"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/cmpnnts_0.1.5_1770929818367_0.8429258176785384","host":"s3://npm-registry-packages-npm-production"}},"0.1.6":{"name":"@ayoungh/cmpnnts","version":"0.1.6","_id":"@ayoungh/cmpnnts@0.1.6","maintainers":[{"name":"ayoungh","email":"ayoung93@gmail.com"}],"dist":{"shasum":"f9750cca42721240f4950c690f5f5f453c47faab","tarball":"https://registry.npmjs.org/@ayoungh/cmpnnts/-/cmpnnts-0.1.6.tgz","fileCount":207,"integrity":"sha512-gjEY6u6T+1JPfzZFg2layzGh2kE0x80AdqCgOYJ2XKDAu2wj02NIZGD+KwGZvWrahKZ5xPdkvQ0i4M5Df8fuPQ==","signatures":[{"sig":"MEUCIQCTrYsDk4HIZk3AbymH4QkIDKDmnL1lvDTz6vh+XUmnpQIgA3z8Bg29uuaPaAU5fKNXblCV/8zhDWu+y//7MaNDNFM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":293678},"main":"./dist/index.js","type":"module","_from":"file:ayoungh-cmpnnts-0.1.6.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./lib/*":{"types":"./dist/lib/*.d.ts","import":"./dist/lib/*.js"},"./styles.css":"./dist/styles.css","./components/*":{"types":"./dist/components/*.d.ts","import":"./dist/components/*.js"}},"private":false,"scripts":{"dev":"next dev","lint":"next lint","build":"pnpm build:package","clean":"rm -rf dist","start":"next start","build:app":"next build","pack:check":"pnpm pack --dry-run","build:package":"rm -rf dist && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json && mkdir -p dist && cp styles.css dist/styles.css"},"_npmUser":{"name":"ayoungh","email":"ayoung93@gmail.com"},"_resolved":"/private/var/folders/hm/7krdk7px6bg6ntnd1jsgt5mw0000gn/T/e1b7c97c908302e1fa086b2654b87ff4/ayoungh-cmpnnts-0.1.6.tgz","_integrity":"sha512-gjEY6u6T+1JPfzZFg2layzGh2kE0x80AdqCgOYJ2XKDAu2wj02NIZGD+KwGZvWrahKZ5xPdkvQ0i4M5Df8fuPQ==","_npmVersion":"11.6.2","description":"Reusable React UI components and utilities for your design system.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.13.0","dependencies":{"zod":"^3.23.8","clsx":"^2.1.1","cmdk":"^1.0.0","vaul":"^0.9.1","sonner":"^1.4.41","date-fns":"^3.6.0","input-otp":"^1.2.4","next-themes":"^0.3.0","lucide-react":"^0.381.0","@geist-ui/core":"^2.3.8","tailwind-merge":"^2.3.0","react-hook-form":"^7.51.5","react-day-picker":"^8.10.1","@hookform/resolvers":"^3.4.2","tailwindcss-animate":"^1.0.7","@radix-ui/react-slot":"^1.0.2","@radix-ui/react-tabs":"^1.0.4","embla-carousel-react":"^8.1.3","@radix-ui/react-label":"^2.0.2","@radix-ui/react-toast":"^1.1.5","@tanstack/react-table":"^8.17.3","@radix-ui/react-avatar":"^1.0.4","@radix-ui/react-dialog":"^1.0.5","@radix-ui/react-select":"^2.0.0","@radix-ui/react-slider":"^1.1.2","@radix-ui/react-switch":"^1.0.3","@radix-ui/react-toggle":"^1.0.3","react-resizable-panels":"^2.0.19","@radix-ui/react-menubar":"^1.0.4","@radix-ui/react-popover":"^1.0.7","@radix-ui/react-tooltip":"^1.0.7","@radix-ui/react-checkbox":"^1.0.4","@radix-ui/react-progress":"^1.0.3","class-variance-authority":"^0.7.0","@radix-ui/react-accordion":"^1.1.2","@radix-ui/react-separator":"^1.0.3","@radix-ui/react-hover-card":"^1.0.7","@radix-ui/react-collapsible":"^1.0.3","@radix-ui/react-radio-group":"^1.1.3","@radix-ui/react-scroll-area":"^1.0.5","@radix-ui/react-alert-dialog":"^1.0.5","@radix-ui/react-aspect-ratio":"^1.0.3","@radix-ui/react-context-menu":"^2.1.5","@radix-ui/react-toggle-group":"^1.0.4","@radix-ui/react-dropdown-menu":"^2.0.6","@radix-ui/react-navigation-menu":"^1.1.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"next":"15.0.0-canary.14","react":"19.0.0-rc-f994737d14-20240522","eslint":"^8","postcss":"^8","react-dom":"19.0.0-rc-f994737d14-20240522","tsc-alias":"^1.8.10","typescript":"^5","@types/node":"^20","tailwindcss":"^3.4.1","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"15.0.0-canary.5"},"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/cmpnnts_0.1.6_1770930254631_0.4856356894136886","host":"s3://npm-registry-packages-npm-production"}},"0.1.7":{"name":"@ayoungh/cmpnnts","version":"0.1.7","private":false,"type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./dist/styles.css","./components/*":{"types":"./dist/components/*.d.ts","import":"./dist/components/*.js"},"./lib/*":{"types":"./dist/lib/*.d.ts","import":"./dist/lib/*.js"}},"publishConfig":{"access":"public"},"sideEffects":["**/*.css"],"dependencies":{"@geist-ui/core":"^2.3.8","@hookform/resolvers":"^3.4.2","@radix-ui/react-accordion":"^1.1.2","@radix-ui/react-alert-dialog":"^1.0.5","@radix-ui/react-aspect-ratio":"^1.0.3","@radix-ui/react-avatar":"^1.0.4","@radix-ui/react-checkbox":"^1.0.4","@radix-ui/react-collapsible":"^1.0.3","@radix-ui/react-context-menu":"^2.1.5","@radix-ui/react-dialog":"^1.0.5","@radix-ui/react-dropdown-menu":"^2.0.6","@radix-ui/react-hover-card":"^1.0.7","@radix-ui/react-label":"^2.0.2","@radix-ui/react-menubar":"^1.0.4","@radix-ui/react-navigation-menu":"^1.1.4","@radix-ui/react-popover":"^1.0.7","@radix-ui/react-progress":"^1.0.3","@radix-ui/react-radio-group":"^1.1.3","@radix-ui/react-scroll-area":"^1.0.5","@radix-ui/react-select":"^2.0.0","@radix-ui/react-separator":"^1.0.3","@radix-ui/react-slider":"^1.1.2","@radix-ui/react-slot":"^1.0.2","@radix-ui/react-switch":"^1.0.3","@radix-ui/react-tabs":"^1.0.4","@radix-ui/react-toast":"^1.1.5","@radix-ui/react-toggle":"^1.0.3","@radix-ui/react-toggle-group":"^1.0.4","@radix-ui/react-tooltip":"^1.0.7","@tanstack/react-table":"^8.17.3","class-variance-authority":"^0.7.0","clsx":"^2.1.1","cmdk":"^1.0.0","date-fns":"^3.6.0","embla-carousel-react":"^8.1.3","input-otp":"^1.2.4","lucide-react":"^0.381.0","next-themes":"^0.3.0","react-day-picker":"^8.10.1","react-hook-form":"^7.51.5","react-resizable-panels":"^2.0.19","sonner":"^1.4.41","tailwind-merge":"^2.3.0","tailwindcss-animate":"^1.0.7","vaul":"^0.9.1","zod":"^3.23.8"},"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0"},"devDependencies":{"next":"15.0.0-canary.14","react":"19.0.0-rc-f994737d14-20240522","react-dom":"19.0.0-rc-f994737d14-20240522","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","eslint":"^8","eslint-config-next":"15.0.0-canary.5","postcss":"^8","tailwindcss":"^3.4.1","tsc-alias":"^1.8.10","typescript":"^5"},"scripts":{"dev":"next dev","build":"pnpm build:package","build:app":"next build","build:package":"rm -rf dist && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json && mkdir -p dist && cp styles.css dist/styles.css","start":"next start","lint":"next lint","clean":"rm -rf dist","pack:check":"pnpm pack --dry-run"},"_id":"@ayoungh/cmpnnts@0.1.7","description":"Reusable React UI components and utilities for your design system.","_integrity":"sha512-eF6JDtT3Utf+uXvEHaGAfJRGx6BG7RoCxmPK/ya3baD/XAIa49l0yken73E5F4n9O2wtFn1CW6cS8+MU72Jsjw==","_resolved":"/private/var/folders/hm/7krdk7px6bg6ntnd1jsgt5mw0000gn/T/e4bf53146b9b2d028e6b9c96713a52b7/ayoungh-cmpnnts-0.1.7.tgz","_from":"file:ayoungh-cmpnnts-0.1.7.tgz","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-eF6JDtT3Utf+uXvEHaGAfJRGx6BG7RoCxmPK/ya3baD/XAIa49l0yken73E5F4n9O2wtFn1CW6cS8+MU72Jsjw==","shasum":"2e1b7bc9dbff382db52b8bc27a1ca16f20a1dfff","tarball":"https://registry.npmjs.org/@ayoungh/cmpnnts/-/cmpnnts-0.1.7.tgz","fileCount":207,"unpackedSize":299260,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDbGKz6pAqB9hYe7IXFV2XkHOmG6YLDfriYjwzf5d0a0gIgfqkqsHyhbc/Ys6aA/C3E7E9e+Rb8Z2KRJ7r7JR+XB70="}]},"_npmUser":{"name":"ayoungh","email":"ayoung93@gmail.com"},"directories":{},"maintainers":[{"name":"ayoungh","email":"ayoung93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cmpnnts_0.1.7_1770930895131_0.26574831539826427"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-12T20:47:39.316Z","modified":"2026-02-12T21:14:55.436Z","0.1.0":"2026-02-12T20:47:39.543Z","0.1.5":"2026-02-12T20:56:58.577Z","0.1.6":"2026-02-12T21:04:14.773Z","0.1.7":"2026-02-12T21:14:55.307Z"},"description":"Reusable React UI components and utilities for your design system.","maintainers":[{"name":"ayoungh","email":"ayoung93@gmail.com"}],"readme":"# @ayoungh/cmpnnts\n\nReusable React UI components and utilities for your design system.\n\n## Install\n\n```bash\npnpm add @ayoungh/cmpnnts\n```\n\n## Consumer setup (Next.js App Router)\n\n1. Import styles once in your root layout:\n\n```tsx\nimport \"@ayoungh/cmpnnts/styles.css\"\n```\n\n2. Wrap your app with the design system provider:\n\n```tsx\nimport { DesignSystemProvider } from \"@ayoungh/cmpnnts\"\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    <html lang=\"en\" suppressHydrationWarning>\n      <body>\n        <DesignSystemProvider>{children}</DesignSystemProvider>\n      </body>\n    </html>\n  )\n}\n```\n\n3. Use components anywhere:\n\n```tsx\nimport { Button, Card, CardContent, CardHeader, CardTitle } from \"@ayoungh/cmpnnts\"\n\nexport function ExampleCard() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Design System</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <Button>Click me</Button>\n      </CardContent>\n    </Card>\n  )\n}\n```\n\n## Theme provider options\n\n`DesignSystemProvider` includes:\n- `ThemeProvider` (via `next-themes`)\n- `TooltipProvider`\n- Sonner toaster (`SonnerToaster`)\n\nYou can disable pieces when needed:\n\n```tsx\n<DesignSystemProvider withToaster={false} withTooltipProvider={false}>\n  {children}\n</DesignSystemProvider>\n```\n\nYou can also use `ThemeProvider` directly if you only want theming:\n\n```tsx\nimport { ThemeProvider } from \"@ayoungh/cmpnnts\"\n\n<ThemeProvider attribute=\"class\" defaultTheme=\"system\" enableSystem>\n  {children}\n</ThemeProvider>\n```\n\n## Geist components (including Tree)\n\nGeist components are re-exported so you can import them from this package.\n\n```tsx\nimport { Tree, GeistProvider, CssBaseline } from \"@ayoungh/cmpnnts\"\n```\n\nExample:\n\n```tsx\n<GeistProvider>\n  <CssBaseline />\n  <Tree>\n    <Tree.File name=\"package.json\" />\n    <Tree.Folder name=\"components\">\n      <Tree.File name=\"button.tsx\" />\n    </Tree.Folder>\n  </Tree>\n</GeistProvider>\n```\n\n## Tailwind setup (required)\n\nComponents use utilities like `bg-background`, `text-foreground`, and `border-border`.\nYour app's Tailwind theme must define those tokens.\n\nFor Tailwind v4, add token mapping in your global CSS (after `@import \"tailwindcss\"`):\n\n```css\n@theme inline {\n  --color-border: hsl(var(--border));\n  --color-input: hsl(var(--input));\n  --color-ring: hsl(var(--ring));\n  --color-background: hsl(var(--background));\n  --color-foreground: hsl(var(--foreground));\n  --color-primary: hsl(var(--primary));\n  --color-primary-foreground: hsl(var(--primary-foreground));\n  --color-secondary: hsl(var(--secondary));\n  --color-secondary-foreground: hsl(var(--secondary-foreground));\n  --color-muted: hsl(var(--muted));\n  --color-muted-foreground: hsl(var(--muted-foreground));\n  --color-accent: hsl(var(--accent));\n  --color-accent-foreground: hsl(var(--accent-foreground));\n  --color-destructive: hsl(var(--destructive));\n  --color-destructive-foreground: hsl(var(--destructive-foreground));\n  --color-popover: hsl(var(--popover));\n  --color-popover-foreground: hsl(var(--popover-foreground));\n  --color-card: hsl(var(--card));\n  --color-card-foreground: hsl(var(--card-foreground));\n}\n```\n\nFor Tailwind v3, add the equivalent `theme.extend.colors` mapping in `tailwind.config`.\n\n## Theming and tokens\n\nBase tokens are shipped in `@ayoungh/cmpnnts/styles.css` (`:root` and `.dark` CSS variables).\n\nTo brand your system from another repo, override CSS variables in your app after importing package CSS.\n\n1. In your app layout, import in this order:\n\n```tsx\nimport \"@ayoungh/cmpnnts/styles.css\"\nimport \"./brand-tokens.css\"\n```\n\n2. Create `brand-tokens.css` and override tokens:\n\n```css\n:root {\n  --background: 0 0% 100%;\n  --foreground: 222.2 84% 4.9%;\n  --primary: 220 90% 56%;\n  --primary-foreground: 210 40% 98%;\n  --border: 214.3 31.8% 91.4%;\n  --input: 214.3 31.8% 91.4%;\n  --ring: 220 90% 56%;\n  --radius: 0.75rem;\n}\n\n.dark {\n  --background: 222.2 84% 4.9%;\n  --foreground: 210 40% 98%;\n  --primary: 210 40% 98%;\n  --primary-foreground: 222.2 47.4% 11.2%;\n}\n```\n\n3. Keep the Tailwind token mapping section above so classes like `bg-background` and `border-border` resolve correctly.\n\n4. Optional multi-brand mode: scope tokens by attribute/class:\n\n```css\n[data-brand=\"acme\"] {\n  --primary: 220 90% 56%;\n}\n\n[data-brand=\"sunset\"] {\n  --primary: 12 90% 55%;\n}\n```\n\nThen set the brand at runtime, for example on `<html data-brand=\"acme\">`.\n\n## Exports\n\nPrimary entrypoint:\n- `@ayoungh/cmpnnts` for components/utilities/providers\n\nStyles entrypoint:\n- `@ayoungh/cmpnnts/styles.css`\n\n## Components\n\n- `Accordion`\n- `AccordionItem`\n- `AccordionTrigger`\n- `AccordionContent`\n- `Alert`\n- `AlertTitle`\n- `AlertDescription`\n- `AlertDialog`\n- `AlertDialogPortal`\n- `AlertDialogOverlay`\n- `AlertDialogTrigger`\n- `AlertDialogContent`\n- `AlertDialogHeader`\n- `AlertDialogFooter`\n- `AlertDialogTitle`\n- `AlertDialogDescription`\n- `AlertDialogAction`\n- `AlertDialogCancel`\n- `AspectRatio`\n- `Avatar`\n- `AvatarImage`\n- `AvatarFallback`\n- `Badge`\n- `Breadcrumb`\n- `BreadcrumbList`\n- `BreadcrumbItem`\n- `BreadcrumbLink`\n- `BreadcrumbPage`\n- `BreadcrumbSeparator`\n- `BreadcrumbEllipsis`\n- `Button`\n- `Calendar`\n- `Card`\n- `CardHeader`\n- `CardFooter`\n- `CardTitle`\n- `CardDescription`\n- `CardContent`\n- `Carousel`\n- `CarouselContent`\n- `CarouselItem`\n- `CarouselPrevious`\n- `CarouselNext`\n- `Checkbox`\n- `Collapsible`\n- `CollapsibleTrigger`\n- `CollapsibleContent`\n- `Command`\n- `CommandDialog`\n- `CommandInput`\n- `CommandList`\n- `CommandEmpty`\n- `CommandGroup`\n- `CommandItem`\n- `CommandShortcut`\n- `CommandSeparator`\n- `ContextMenu`\n- `ContextMenuTrigger`\n- `ContextMenuContent`\n- `ContextMenuItem`\n- `ContextMenuCheckboxItem`\n- `ContextMenuRadioItem`\n- `ContextMenuLabel`\n- `ContextMenuSeparator`\n- `ContextMenuShortcut`\n- `ContextMenuGroup`\n- `ContextMenuPortal`\n- `ContextMenuSub`\n- `ContextMenuSubContent`\n- `ContextMenuSubTrigger`\n- `ContextMenuRadioGroup`\n- `Dialog`\n- `DialogPortal`\n- `DialogOverlay`\n- `DialogClose`\n- `DialogTrigger`\n- `DialogContent`\n- `DialogHeader`\n- `DialogFooter`\n- `DialogTitle`\n- `DialogDescription`\n- `Drawer`\n- `DrawerPortal`\n- `DrawerOverlay`\n- `DrawerTrigger`\n- `DrawerClose`\n- `DrawerContent`\n- `DrawerHeader`\n- `DrawerFooter`\n- `DrawerTitle`\n- `DrawerDescription`\n- `DropdownMenu`\n- `DropdownMenuTrigger`\n- `DropdownMenuContent`\n- `DropdownMenuItem`\n- `DropdownMenuCheckboxItem`\n- `DropdownMenuRadioItem`\n- `DropdownMenuLabel`\n- `DropdownMenuSeparator`\n- `DropdownMenuShortcut`\n- `DropdownMenuGroup`\n- `DropdownMenuPortal`\n- `DropdownMenuSub`\n- `DropdownMenuSubContent`\n- `DropdownMenuSubTrigger`\n- `DropdownMenuRadioGroup`\n- `Form`\n- `FormItem`\n- `FormLabel`\n- `FormControl`\n- `FormDescription`\n- `FormMessage`\n- `FormField`\n- `HoverCard`\n- `HoverCardTrigger`\n- `HoverCardContent`\n- `Input`\n- `InputOTP`\n- `InputOTPGroup`\n- `InputOTPSlot`\n- `InputOTPSeparator`\n- `Label`\n- `Menubar`\n- `MenubarMenu`\n- `MenubarTrigger`\n- `MenubarContent`\n- `MenubarItem`\n- `MenubarSeparator`\n- `MenubarLabel`\n- `MenubarCheckboxItem`\n- `MenubarRadioGroup`\n- `MenubarRadioItem`\n- `MenubarPortal`\n- `MenubarSubContent`\n- `MenubarSubTrigger`\n- `MenubarGroup`\n- `MenubarSub`\n- `MenubarShortcut`\n- `NavigationMenu`\n- `NavigationMenuList`\n- `NavigationMenuItem`\n- `NavigationMenuContent`\n- `NavigationMenuTrigger`\n- `NavigationMenuLink`\n- `NavigationMenuIndicator`\n- `NavigationMenuViewport`\n- `Pagination`\n- `PaginationContent`\n- `PaginationEllipsis`\n- `PaginationItem`\n- `PaginationLink`\n- `PaginationNext`\n- `PaginationPrevious`\n- `Popover`\n- `PopoverTrigger`\n- `PopoverContent`\n- `Progress`\n- `RadioGroup`\n- `RadioGroupItem`\n- `ResizablePanelGroup`\n- `ResizablePanel`\n- `ResizableHandle`\n- `ScrollArea`\n- `ScrollBar`\n- `Select`\n- `SelectGroup`\n- `SelectValue`\n- `SelectTrigger`\n- `SelectContent`\n- `SelectLabel`\n- `SelectItem`\n- `SelectSeparator`\n- `SelectScrollUpButton`\n- `SelectScrollDownButton`\n- `Separator`\n- `Sheet`\n- `SheetPortal`\n- `SheetOverlay`\n- `SheetTrigger`\n- `SheetClose`\n- `SheetContent`\n- `SheetHeader`\n- `SheetFooter`\n- `SheetTitle`\n- `SheetDescription`\n- `Skeleton`\n- `Slider`\n- `Switch`\n- `Table`\n- `TableHeader`\n- `TableBody`\n- `TableFooter`\n- `TableHead`\n- `TableRow`\n- `TableCell`\n- `TableCaption`\n- `Tabs`\n- `TabsList`\n- `TabsTrigger`\n- `TabsContent`\n- `Textarea`\n- `ToastProvider`\n- `ToastViewport`\n- `Toast`\n- `ToastTitle`\n- `ToastDescription`\n- `ToastClose`\n- `ToastAction`\n- `Toaster`\n- `ToastToaster`\n- `SonnerToaster`\n- `Tree`\n- `GeistProvider`\n- `CssBaseline`\n- `Toggle`\n- `ToggleGroup`\n- `ToggleGroupItem`\n- `Tooltip`\n- `TooltipTrigger`\n- `TooltipContent`\n- `TooltipProvider`\n\n## Local development (this repo)\n\n```bash\npnpm install\npnpm dev\n```\n\nPreview app runs at `http://localhost:3000`.\n\n## Build the npm package\n\n```bash\npnpm build:package\n```\n\nThis creates a publishable package in `dist/` with:\n- compiled JS\n- type declarations\n- `styles.css` (for design tokens/base styles)\n\n## Publish to npm\n\n1. Login:\n\n```bash\npnpm login\n```\n\n2. Verify the package content:\n\n```bash\npnpm pack:check\n```\n\n3. Publish:\n\n```bash\npnpm publish --access public\n```\n\n## Notes\n\n- Current package name is `@ayoungh/cmpnnts` (change in `package.json` if you want a different npm scope/name).\n- The repository still includes the Next.js app for previewing components while developing the design system.\n","readmeFilename":"README.md"}