{"_id":"@bishwas-timalsina/my-ui-library","_rev":"2-4c3f6996177176b0cd41ac2a9bbea86e","name":"@bishwas-timalsina/my-ui-library","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@bishwas-timalsina/my-ui-library","version":"1.0.0","license":"MIT","_id":"@bishwas-timalsina/my-ui-library@1.0.0","maintainers":[{"name":"bishwas-timalsina","email":"timalsinabishwas999@gmail.com"}],"dist":{"shasum":"e20480c05f007042013572ba6366b2b58890d5da","tarball":"https://registry.npmjs.org/@bishwas-timalsina/my-ui-library/-/my-ui-library-1.0.0.tgz","fileCount":112,"integrity":"sha512-qiijMyM1XHzFtKy4UC6cZ7IemKhb2pZI3vB0woLRM4w2Fk/wS+6dmGcDJstqGAo9NGQPpSPXjqSptYTBoW69VQ==","signatures":[{"sig":"MEUCIQCSdmkBJiG4SZn4jdSvJkgfNnNd5y+TAf/OJvJjavSDlgIgNim7KKy5oz4vYDRY7OFvoxgfbSwjGfsaur8n93BW4sk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":518813},"main":"./dist/index.cjs.js","type":"module","_from":"file:bishwas-timalsina-my-ui-library-1.0.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"},"./style.css":"./dist/my-ui-library.css"},"private":false,"scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"bishwas-timalsina","email":"timalsinabishwas999@gmail.com"},"_resolved":"C:\\Users\\DELL\\AppData\\Local\\Temp\\9a30b4a6cb8670be535c7d20fb9687f4\\bishwas-timalsina-my-ui-library-1.0.0.tgz","_integrity":"sha512-qiijMyM1XHzFtKy4UC6cZ7IemKhb2pZI3vB0woLRM4w2Fk/wS+6dmGcDJstqGAo9NGQPpSPXjqSptYTBoW69VQ==","_npmVersion":"11.6.2","description":"A reusable React UI component library built with React, TypeScript, Tailwind CSS, and Vite.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.12.0","dependencies":{"clsx":"^2.1.1","lucide-react":"^1.27.0","tailwind-merge":"^3.6.0","react-router-dom":"^7.18.1","class-variance-authority":"^0.7.1"},"publishConfig":{"publish-branch":"development"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.1","jsdom":"^30.0.0","react":"^19.2.7","eslint":"^10.6.0","vitest":"^4.1.10","globals":"^17.7.0","react-dom":"^19.2.7","storybook":"^10.5.5","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.10","playwright":"^1.62.0","typescript":"~6.0.2","@types/node":"^24.13.2","tailwindcss":"^4.3.3","@types/react":"^19.2.17","vite-plugin-dts":"^5.0.3","@storybook/react":"^10.5.5","@types/react-dom":"^19.2.3","@tailwindcss/vite":"^4.3.3","typescript-eslint":"^8.62.0","@vitest/coverage-v8":"^4.1.10","@vitejs/plugin-react":"^6.0.3","@storybook/addon-a11y":"^10.5.5","@storybook/addon-docs":"^10.5.5","@storybook/react-vite":"^10.5.5","@testing-library/react":"^16.3.2","@storybook/addon-vitest":"^10.5.5","eslint-plugin-storybook":"^10.5.5","@chromatic-com/storybook":"^5.2.1","@testing-library/jest-dom":"^7.0.0","eslint-plugin-react-hooks":"^7.1.1","@vitest/browser-playwright":"^4.1.10","@testing-library/user-event":"^14.6.1","eslint-plugin-react-refresh":"^0.5.3"},"peerDependencies":{"react":"^18||^19","react-dom":"^18||^19"},"_npmOperationalInternal":{"tmp":"tmp/my-ui-library_1.0.0_1785402906654_0.9730024341662731","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bishwas-timalsina/my-ui-library","version":"1.0.1","description":"A reusable React UI component library built with React, TypeScript, Tailwind CSS, and Vite.","license":"MIT","type":"module","main":"./dist/index.cjs.js","module":"./dist/index.es.js","types":"./dist/index.d.ts","private":false,"publishConfig":{"publish-branch":"development"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"},"./style.css":"./dist/my-ui-library.css"},"sideEffects":["*.css"],"peerDependencies":{"react":"^18||^19","react-dom":"^18||^19"},"dependencies":{"class-variance-authority":"^0.7.1","clsx":"^2.1.1","lucide-react":"^1.27.0","react-router-dom":"^7.18.1","tailwind-merge":"^3.6.0"},"devDependencies":{"@chromatic-com/storybook":"^5.2.1","@eslint/js":"^10.0.1","@storybook/addon-a11y":"^10.5.5","@storybook/addon-docs":"^10.5.5","@storybook/addon-vitest":"^10.5.5","@storybook/react":"^10.5.5","@storybook/react-vite":"^10.5.5","@tailwindcss/vite":"^4.3.3","@testing-library/jest-dom":"^7.0.0","@testing-library/react":"^16.3.2","@testing-library/user-event":"^14.6.1","@types/node":"^24.13.2","@types/react":"^19.2.17","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.3","@vitest/browser-playwright":"^4.1.10","@vitest/coverage-v8":"^4.1.10","@vitest/ui":"^4.1.10","eslint":"^10.6.0","eslint-plugin-react-hooks":"^7.1.1","eslint-plugin-react-refresh":"^0.5.3","eslint-plugin-storybook":"^10.5.5","gh-pages":"^6.3.0","globals":"^17.7.0","jsdom":"^30.0.0","playwright":"^1.62.0","react":"^19.2.7","react-dom":"^19.2.7","storybook":"^10.5.5","tailwindcss":"^4.3.3","typescript":"~6.0.2","typescript-eslint":"^8.62.0","vite":"^8.1.1","vite-plugin-dts":"^5.0.3","vitest":"^4.1.10"},"scripts":{"dev":"vite","build":"tsc -b && vite build","lint":"eslint .","preview":"vite preview","storybook":"storybook dev -p 6006","build-storybook":"storybook build","deploy-storybook":"gh-pages -d storybook-static"},"_id":"@bishwas-timalsina/my-ui-library@1.0.1","_integrity":"sha512-mxYKl4dvaoW76b3djCSjARscMdXZFdd+HS4jkSuMuOxJv3zPzULEXIoFAVL5SdOHHaB16cpzub4lZVaWc2iSxQ==","_resolved":"C:\\Users\\DELL\\AppData\\Local\\Temp\\35b13502eb180199f56ddd98da450610\\bishwas-timalsina-my-ui-library-1.0.01.tgz","_from":"file:bishwas-timalsina-my-ui-library-1.0.01.tgz","_nodeVersion":"24.12.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-mxYKl4dvaoW76b3djCSjARscMdXZFdd+HS4jkSuMuOxJv3zPzULEXIoFAVL5SdOHHaB16cpzub4lZVaWc2iSxQ==","shasum":"c9a8e2c114ea415ea8b7f2786ecfce8915c606bf","tarball":"https://registry.npmjs.org/@bishwas-timalsina/my-ui-library/-/my-ui-library-1.0.1.tgz","fileCount":112,"unpackedSize":537452,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDI1bb+pvhrn+uBrwRqAd5p2bev0AUPoRqjTBmPxwzWJAiAVwKcXQ5/cSaq3kn/IxIJAylMXdrDRc7EMYjC8CljKkg=="}]},"_npmUser":{"name":"bishwas-timalsina","email":"timalsinabishwas999@gmail.com"},"directories":{},"maintainers":[{"name":"bishwas-timalsina","email":"timalsinabishwas999@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/my-ui-library_1.0.1_1785499116563_0.7051119139392725"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-30T09:15:06.500Z","modified":"2026-07-31T11:58:36.838Z","1.0.0":"2026-07-30T09:15:06.800Z","1.0.1":"2026-07-31T11:58:36.692Z"},"license":"MIT","description":"A reusable React UI component library built with React, TypeScript, Tailwind CSS, and Vite.","maintainers":[{"name":"bishwas-timalsina","email":"timalsinabishwas999@gmail.com"}],"readme":"# @bishwas-timalsina/my-ui-library\n\nA reusable React UI component library built with **React, TypeScript, Tailwind CSS, and Vite**. It ships a set of accessible, themeable components (Button, Input, Modal, Table, Tabs, and more) with sensible variants, sizes, and states out of the box.\n\n## Features\n\n- 🎨 19 ready-to-use components (Button, Avatar, Alert, Badge, Card, Checkbox, Divider, Input, Label, Modal, Pagination, Radio, Select, Spinner, Switch, Table, Tabs, Text, TextArea)\n- 🧩 Fully typed with TypeScript — props, variants, and sizes are all typed\n- 🎯 Built with `class-variance-authority` + `tailwind-merge` for consistent, composable styling\n- 📦 Ships as ESM and CommonJS, with bundled type declarations\n- 🌗 Works with React 18 and 19\n\n## Installation\n\n```bash\nnpm install @bishwas-timalsina/my-ui-library\n```\n\nThis package has `react` and `react-dom` (`^18` or `^19`) as peer dependencies, so make sure they're installed in your project.\n\n## Setup\n\nImport the stylesheet once, near the root of your app (e.g. in `main.tsx` or `App.tsx`):\n\n```tsx\nimport \"@bishwas-timalsina/my-ui-library/style.css\";\n```\n\nThen import any component from the package root:\n\n```tsx\nimport { Button } from \"@bishwas-timalsina/my-ui-library\";\n\nfunction App() {\n  return <Button label=\"Click me\" variant=\"primary\" />;\n}\n```\n\n## Components\n\n### Button\n\n```tsx\nimport { Button } from \"@bishwas-timalsina/my-ui-library\";\n\n<Button label=\"Save\" variant=\"primary\" size=\"md\" />\n<Button label=\"Delete\" variant=\"error\" isLoading />\n```\n\n| Prop         | Type                                                                                              | Default     |\n| ------------ | ------------------------------------------------------------------------------------------------- | ----------- |\n| `label`      | `string`                                                                                          | —           |\n| `icon`       | `ReactNode`                                                                                       | —           |\n| `variant`    | `\"primary\" \\| \"secondary\" \\| \"ghost\" \\| \"outline\" \\| \"link\" \\| \"success\" \\| \"warning\" \\| \"error\"` | `\"primary\"` |\n| `size`       | `\"xs\" \\| \"sm\" \\| \"md\" \\| \"lg\" \\| \"xl\"`                                                            | `\"md\"`      |\n| `invert`     | `boolean`                                                                                         | `false`     |\n| `fullWidth`  | `boolean`                                                                                         | `false`     |\n| `rounded`    | `\"none\" \\| \"sm\" \\| \"md\" \\| \"full\"`                                                                | —           |\n| `isLoading`  | `boolean`                                                                                         | `false`     |\n| `textSize`   | `\"xs\" \\| \"sm\" \\| \"md\" \\| \"lg\" \\| \"xl\"`                                                            | —           |\n| `textWeight` | `\"light\" \\| \"normal\" \\| \"medium\" \\| \"semibold\" \\| \"bold\"`                                         | —           |\n\nAlso accepts all standard `<button>` HTML attributes.\n\n### Input\n\n```tsx\n<Input label=\"Email\" placeholder=\"you@example.com\" leftIcon={<MailIcon />} />\n```\n\n| Prop                     | Type                                             | Default     |\n| ------------------------ | ------------------------------------------------ | ----------- |\n| `label`                  | `string`                                         | —           |\n| `helperText`             | `string`                                         | —           |\n| `error`                  | `string`                                         | —           |\n| `variant`                | `\"default\" \\| \"outline\" \\| \"filled\" \\| \"ghost\"`  | `\"default\"` |\n| `state`                  | `\"default\" \\| \"error\" \\| \"success\" \\| \"warning\"` | `\"default\"` |\n| `inputSize`              | `\"sm\" \\| \"md\" \\| \"lg\"`                           | `\"md\"`      |\n| `rounded`                | `\"none\" \\| \"sm\" \\| \"md\" \\| \"lg\" \\| \"full\"`       | —           |\n| `leftIcon` / `rightIcon` | `ReactNode`                                      | —           |\n| `fullWidth`              | `boolean`                                        | `false`     |\n\nAlso accepts all standard `<input>` HTML attributes.\n\n### TextArea\n\nSame shape as `Input`, plus `resize` (`\"none\" | \"vertical\" | \"horizontal\" | \"both\"`) and `startAdornment` / `endAdornment` (`ReactNode`).\n\n### Select\n\n```tsx\n<Select\n  label=\"Country\"\n  options={[\n    { label: \"Nepal\", value: \"np\" },\n    { label: \"USA\", value: \"us\" },\n  ]}\n  value={value}\n  onChange={setValue}\n  searchable\n  clearable\n/>\n```\n\n| Prop                                                  | Type                                                               | Default      |\n| ----------------------------------------------------- | ------------------------------------------------------------------ | ------------ |\n| `options`                                             | `{ label: string; value: string \\| number; disabled?: boolean }[]` | — (required) |\n| `value`                                               | `string \\| number`                                                 | —            |\n| `onChange`                                            | `(value: string \\| number) => void`                                | —            |\n| `placeholder`                                         | `string`                                                           | —            |\n| `helperText` / `error`                                | `string`                                                           | —            |\n| `searchable` / `clearable` / `disabled` / `fullWidth` | `boolean`                                                          | `false`      |\n| `variant`                                             | `\"default\" \\| \"outline\" \\| \"filled\" \\| \"ghost\" \\| \"error\"`         | `\"default\"`  |\n| `size`                                                | `\"xs\" \\| \"sm\" \\| \"md\" \\| \"lg\" \\| \"xl\"`                             | `\"md\"`       |\n| `rounded`                                             | `\"none\" \\| \"sm\" \\| \"md\" \\| \"full\"`                                 | —            |\n\n### Checkbox / Radio / Switch\n\nAll three share a similar shape:\n\n| Prop                   | Type                                                            | Default     |\n| ---------------------- | --------------------------------------------------------------- | ----------- |\n| `label`                | `string`                                                        | —           |\n| `variant`              | `\"primary\" \\| \"secondary\" \\| \"success\" \\| \"warning\" \\| \"error\"` | `\"primary\"` |\n| `size`                 | `\"sm\" \\| \"md\" \\| \"lg\"`                                          | `\"md\"`      |\n| `helperText` / `error` | `string`                                                        | —           |\n| `fullWidth`            | `boolean`                                                       | `false`     |\n\n`Checkbox` additionally supports `indeterminate?: boolean`.\n\n```tsx\n<Checkbox label=\"Accept terms\" />\n<Radio label=\"Option A\" name=\"group\" />\n<Switch label=\"Enable notifications\" />\n```\n\n### Label\n\n```tsx\n<Label required>Username</Label>\n```\n\n| Prop                    | Type                                                                     | Default     |\n| ----------------------- | ------------------------------------------------------------------------ | ----------- |\n| `required` / `optional` | `boolean`                                                                | `false`     |\n| `variant`               | `\"default\" \\| \"primary\" \\| \"success\" \\| \"warning\" \\| \"error\" \\| \"muted\"` | `\"default\"` |\n| `size`                  | `\"xs\" \\| \"sm\" \\| \"md\" \\| \"lg\"`                                           | `\"md\"`      |\n\n### Card\n\n```tsx\n<Card variant=\"outline\" padding=\"md\" shadow=\"sm\">\n  Content goes here\n</Card>\n```\n\n| Prop        | Type                                                                                  | Default     |\n| ----------- | ------------------------------------------------------------------------------------- | ----------- |\n| `variant`   | `\"default\" \\| \"outline\" \\| \"ghost\" \\| \"primary\" \\| \"success\" \\| \"warning\" \\| \"error\"` | `\"default\"` |\n| `padding`   | `\"none\" \\| \"sm\" \\| \"md\" \\| \"lg\"`                                                      | `\"md\"`      |\n| `rounded`   | `\"none\" \\| \"sm\" \\| \"md\" \\| \"full\"`                                                    | —           |\n| `shadow`    | `\"none\" \\| \"sm\" \\| \"md\" \\| \"lg\"`                                                      | —           |\n| `fullWidth` | `boolean`                                                                             | `false`     |\n\n### Alert\n\n```tsx\n<Alert\n  title=\"Heads up\"\n  description=\"Your session will expire soon.\"\n  variant=\"warning\"\n  closable\n  onClose={() => {}}\n/>\n```\n\n| Prop                    | Type                                          | Default  |\n| ----------------------- | --------------------------------------------- | -------- |\n| `title` / `description` | `string`                                      | —        |\n| `variant`               | `\"info\" \\| \"success\" \\| \"warning\" \\| \"error\"` | `\"info\"` |\n| `appearance`            | `\"solid\" \\| \"soft\" \\| \"outline\"`              | `\"soft\"` |\n| `icon`                  | `ReactNode`                                   | —        |\n| `closable`              | `boolean`                                     | `false`  |\n| `onClose`               | `() => void`                                  | —        |\n| `action`                | `ReactNode`                                   | —        |\n| `fullWidth`             | `boolean`                                     | `false`  |\n| `rounded`               | `\"sm\" \\| \"md\" \\| \"lg\"`                        | —        |\n\n### Badge\n\n```tsx\n<Badge label=\"New\" variant=\"success\" dot />\n```\n\n| Prop                     | Type                                                                      | Default     |\n| ------------------------ | ------------------------------------------------------------------------- | ----------- |\n| `label`                  | `string`                                                                  | —           |\n| `variant`                | `\"primary\" \\| \"secondary\" \\| \"success\" \\| \"warning\" \\| \"error\" \\| \"info\"` | `\"primary\"` |\n| `appearance`             | `\"solid\" \\| \"outline\" \\| \"soft\"`                                          | `\"solid\"`   |\n| `size`                   | `\"xs\" \\| \"sm\" \\| \"md\" \\| \"lg\"`                                            | `\"md\"`      |\n| `rounded`                | `\"sm\" \\| \"md\" \\| \"full\"`                                                  | —           |\n| `icon`                   | `ReactNode`                                                               | —           |\n| `dot`                    | `boolean`                                                                 | `false`     |\n| `removable` / `onRemove` | `boolean` / `() => void`                                                  | —           |\n\n### Avatar\n\n```tsx\n<Avatar src=\"/avatar.jpg\" name=\"Bishwas Timalsina\" status=\"online\" />\n```\n\n| Prop                   | Type                                                                      | Default  |\n| ---------------------- | ------------------------------------------------------------------------- | -------- |\n| `src` / `alt` / `name` | `string`                                                                  | —        |\n| `icon`                 | `ReactNode`                                                               | —        |\n| `size`                 | `\"xs\" \\| \"sm\" \\| \"md\" \\| \"lg\" \\| \"xl\"`                                    | `\"md\"`   |\n| `rounded`              | `\"none\" \\| \"sm\" \\| \"md\" \\| \"full\"`                                        | `\"full\"` |\n| `background`           | `\"primary\" \\| \"secondary\" \\| \"success\" \\| \"warning\" \\| \"error\" \\| \"info\"` | —        |\n| `status`               | `\"online\" \\| \"offline\" \\| \"away\" \\| \"busy\"`                               | —        |\n| `border`               | `boolean`                                                                 | `false`  |\n| `imageProps`           | `ImgHTMLAttributes<HTMLImageElement>`                                     | —        |\n\n### Divider\n\n```tsx\n<Divider label=\"OR\" />\n<Divider orientation=\"vertical\" />\n```\n\n| Prop          | Type                                                                                   | Default        |\n| ------------- | -------------------------------------------------------------------------------------- | -------------- |\n| `orientation` | `\"horizontal\" \\| \"vertical\"`                                                           | `\"horizontal\"` |\n| `variant`     | `\"solid\" \\| \"dashed\" \\| \"dotted\"`                                                      | `\"solid\"`      |\n| `size`        | `\"sm\" \\| \"md\" \\| \"lg\"`                                                                 | —              |\n| `color`       | `\"default\" \\| \"primary\" \\| \"secondary\" \\| \"success\" \\| \"warning\" \\| \"error\" \\| \"info\"` | `\"default\"`    |\n| `label`       | `ReactNode`                                                                            | —              |\n\n### Modal\n\n```tsx\n<Modal\n  open={isOpen}\n  onClose={() => setIsOpen(false)}\n  title=\"Confirm\"\n  footer={<Button label=\"OK\" />}\n>\n  Are you sure you want to continue?\n</Modal>\n```\n\n| Prop                  | Type                                 | Default     |\n| --------------------- | ------------------------------------ | ----------- |\n| `open`                | `boolean`                            | `false`     |\n| `onClose`             | `() => void`                         | —           |\n| `title`               | `string`                             | —           |\n| `footer`              | `ReactNode`                          | —           |\n| `size`                | `\"sm\" \\| \"md\" \\| \"lg\" \\| \"xl\"`       | `\"md\"`      |\n| `variant`             | `\"default\" \\| \"danger\" \\| \"success\"` | `\"default\"` |\n| `closeOnOverlayClick` | `boolean`                            | `true`      |\n\n### Pagination\n\n```tsx\n<Pagination page={page} totalPages={10} onPageChange={setPage} />\n```\n\n| Prop                             | Type                               | Default      |\n| -------------------------------- | ---------------------------------- | ------------ |\n| `page`                           | `number`                           | — (required) |\n| `totalPages`                     | `number`                           | — (required) |\n| `onPageChange`                   | `(page: number) => void`           | — (required) |\n| `siblingCount`                   | `number`                           | —            |\n| `showFirstLast` / `showPrevNext` | `boolean`                          | `true`       |\n| `variant`                        | `\"solid\" \\| \"outline\" \\| \"ghost\"`  | `\"solid\"`    |\n| `size`                           | `\"sm\" \\| \"md\" \\| \"lg\"`             | `\"md\"`       |\n| `rounded`                        | `\"none\" \\| \"sm\" \\| \"md\" \\| \"full\"` | —            |\n| `fullWidth` / `disabled`         | `boolean`                          | `false`      |\n\n### Table\n\n```tsx\n<Table\n  columns={[\n    { key: \"name\", title: \"Name\" },\n    { key: \"age\", title: \"Age\", align: \"right\" },\n  ]}\n  data={rows}\n  rowKey=\"id\"\n  hoverable\n  striped\n/>\n```\n\n| Prop                                                    | Type                                                                                                                                                            | Default      |\n| ------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `columns`                                               | `{ key: keyof T \\| string; title: ReactNode; width?: string \\| number; align?: \"left\" \\| \"center\" \\| \"right\"; render?: (value, record, index) => ReactNode }[]` | — (required) |\n| `data`                                                  | `T[]`                                                                                                                                                           | — (required) |\n| `rowKey`                                                | `keyof T \\| ((record: T) => string)`                                                                                                                            | —            |\n| `loading`                                               | `boolean`                                                                                                                                                       | `false`      |\n| `emptyText`                                             | `ReactNode`                                                                                                                                                     | —            |\n| `variant`                                               | `\"default\" \\| \"bordered\" \\| \"minimal\"`                                                                                                                          | `\"default\"`  |\n| `size`                                                  | `\"sm\" \\| \"md\" \\| \"lg\"`                                                                                                                                          | `\"md\"`       |\n| `hoverable` / `striped` / `stickyHeader` / `responsive` | `boolean`                                                                                                                                                       | —            |\n| `onRowClick`                                            | `(record: T, index: number) => void`                                                                                                                            | —            |\n\n### Tabs\n\n```tsx\n<Tabs\n  items={[\n    { value: \"a\", label: \"Tab A\", content: <div>Content A</div> },\n    { value: \"b\", label: \"Tab B\", content: <div>Content B</div> },\n  ]}\n  defaultValue=\"a\"\n/>\n```\n\n| Prop                     | Type                                                                                           | Default        |\n| ------------------------ | ---------------------------------------------------------------------------------------------- | -------------- |\n| `items`                  | `{ value: string; label: string; icon?: ReactNode; disabled?: boolean; content: ReactNode }[]` | — (required)   |\n| `defaultValue` / `value` | `string`                                                                                       | —              |\n| `onValueChange`          | `(value: string) => void`                                                                      | —              |\n| `variant`                | `\"solid\" \\| \"soft\" \\| \"outline\" \\| \"underline\"`                                                | `\"solid\"`      |\n| `size`                   | `\"sm\" \\| \"md\" \\| \"lg\"`                                                                         | `\"md\"`         |\n| `rounded`                | `\"none\" \\| \"sm\" \\| \"md\" \\| \"full\"`                                                             | —              |\n| `orientation`            | `\"horizontal\" \\| \"vertical\"`                                                                   | `\"horizontal\"` |\n| `fullWidth`              | `boolean`                                                                                      | `false`        |\n\n### Spinner\n\n```tsx\n<Spinner size=\"lg\" variant=\"primary\" label=\"Loading...\" />\n```\n\n| Prop      | Type                                                                      | Default     |\n| --------- | ------------------------------------------------------------------------- | ----------- |\n| `size`    | `\"xs\" \\| \"sm\" \\| \"md\" \\| \"lg\" \\| \"xl\"`                                    | `\"md\"`      |\n| `variant` | `\"primary\" \\| \"secondary\" \\| \"success\" \\| \"warning\" \\| \"error\" \\| \"info\"` | `\"primary\"` |\n| `type`    | `\"border\" \\| \"dots\"`                                                      | `\"border\"`  |\n| `label`   | `string`                                                                  | —           |\n\n### Text\n\n```tsx\n<Text as=\"h1\" content=\"Hello world\" />\n```\n\nRenders as any element via the `as` prop, and accepts `children`, `content`, `icon`, `iconPosition` (`\"left\" | \"right\"`), plus the variant props defined by its internal `class-variance-authority` config.\n\n## Peer dependencies\n\n```json\n{\n  \"react\": \"^18 || ^19\",\n  \"react-dom\": \"^18 || ^19\"\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}