{"_id":"@asnewyla/tabs","name":"@asnewyla/tabs","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@asnewyla/tabs","version":"0.2.0","description":"Styled tabs with roving-focus keyboard navigation and accessibility","license":"MIT","repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/tabs"},"publishConfig":{"access":"public"},"main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/index.css"},"sideEffects":["*.css"],"keywords":["react","tabs","styled","accessible"],"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"@asnewyla/unstyled-tabs":"0.2.0"},"devDependencies":{"@testing-library/jest-dom":"^6.4.0","@testing-library/react":"^16.0.0","@testing-library/user-event":"^14.5.0","@vitest/coverage-v8":"^2.0.0","jsdom":"^24.0.0","react":"^18.3.0","react-dom":"^18.3.0","tsup":"^8.1.0","typescript":"^5.5.0","vitest":"^2.0.0"},"scripts":{"build":"tsup","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","type-check":"tsc --noEmit"},"_nodeVersion":"24.19.0","_id":"@asnewyla/tabs@0.2.0","dist":{"integrity":"sha512-x7w2VQTDX8y4RbslOCk8xs7GkZShfqgBu1EVGCMP1IRL0wLvy34QD3zPE1o6wcbFHx2qv2DLRGAcEVg860EUHw==","shasum":"b2922b6bd169a5847843d8f422a6847ed83e8ac6","tarball":"https://registry.npmjs.org/@asnewyla/tabs/-/tabs-0.2.0.tgz","fileCount":11,"unpackedSize":21986,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGEwbj6tdKqbInRldA8lzNgJ+Bl++KUnwRyMnSHRpNKFAiEAjk0CPDrtNXp+TMjgiV1wUT3mkD1zx1Z/lw6dpQfSuZA="}]},"_npmUser":{"name":"asnewyla","email":"asnewyla@gmail.com"},"directories":{},"maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tabs_0.2.0_1788128079817_0.705354541782458"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-30T22:14:39.671Z","0.2.0":"2026-08-30T22:14:39.946Z","modified":"2026-08-30T22:14:40.149Z"},"maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"description":"Styled tabs with roving-focus keyboard navigation and accessibility","keywords":["react","tabs","styled","accessible"],"repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/tabs"},"license":"MIT","readme":"# @asnewyla/tabs\n\nStyled tabs built on `@asnewyla/unstyled-tabs`. Compound components, an\nunderline active-tab indicator, and full keyboard/focus accessibility.\n\n## Install\n\n```bash\nnpm install @asnewyla/tabs\n```\n\nImport the stylesheet once, anywhere in your app:\n\n```ts\nimport '@asnewyla/tabs/styles.css';\n```\n\n## Usage\n\n```tsx\nimport { Tab, TabList, TabPanel, Tabs } from '@asnewyla/tabs';\n\n// Uncontrolled\n<Tabs defaultValue=\"profile\">\n  <TabList aria-label=\"Account settings\">\n    <Tab value=\"profile\">Profile</Tab>\n    <Tab value=\"settings\">Settings</Tab>\n    <Tab value=\"billing\" disabled>Billing</Tab>\n  </TabList>\n  <TabPanel value=\"profile\">Profile content</TabPanel>\n  <TabPanel value=\"settings\">Settings content</TabPanel>\n  <TabPanel value=\"billing\">Billing content</TabPanel>\n</Tabs>\n\n// Controlled\n<Tabs value={active} onValueChange={setActive}>\n  ...\n</Tabs>\n```\n\n### Props\n\nEvery prop is `@asnewyla/unstyled-tabs`'s own — `Tabs`/`TabList`/`Tab`/\n`TabPanel` each add no props of their own; `className` merges with each\npiece's base class (`xd-tabs`, `xd-tab-list`, `xd-tab`, `xd-tab-panel`,\nbase class first), the same convention every styled component in this\nlibrary follows. See `@asnewyla/unstyled-tabs`'s README for the full\ncomponent/keyboard/accessibility contract — sorting, disabled tabs,\n`ArrowLeft`/`ArrowRight`/`Home`/`End` behavior, and the `aria-controls`/\n`aria-labelledby` wiring are all unchanged here.\n\n### Theming\n\nOverride the CSS custom properties — defaults adapt automatically to\n`prefers-color-scheme` via `@asnewyla/tokens`:\n\n```css\n:root {\n  --xd-color-primary: #0d9488;\n  --xd-color-border: #cbd5e1;\n  --xd-color-text-muted: #475569;\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"","_rev":"1-8344adabb167c1188f4eb7648d928fb1"}