@asnewyla/tabs 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 XD
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,67 @@
+# @asnewyla/tabs
+
+Styled tabs built on `@asnewyla/unstyled-tabs`. Compound components, an
+underline active-tab indicator, and full keyboard/focus accessibility.
+
+## Install
+
+```bash
+npm install @asnewyla/tabs
+```
+
+Import the stylesheet once, anywhere in your app:
+
+```ts
+import '@asnewyla/tabs/styles.css';
+```
+
+## Usage
+
+```tsx
+import { Tab, TabList, TabPanel, Tabs } from '@asnewyla/tabs';
+
+// Uncontrolled
+<Tabs defaultValue="profile">
+  <TabList aria-label="Account settings">
+    <Tab value="profile">Profile</Tab>
+    <Tab value="settings">Settings</Tab>
+    <Tab value="billing" disabled>Billing</Tab>
+  </TabList>
+  <TabPanel value="profile">Profile content</TabPanel>
+  <TabPanel value="settings">Settings content</TabPanel>
+  <TabPanel value="billing">Billing content</TabPanel>
+</Tabs>
+
+// Controlled
+<Tabs value={active} onValueChange={setActive}>
+  ...
+</Tabs>
+```
+
+### Props
+
+Every prop is `@asnewyla/unstyled-tabs`'s own — `Tabs`/`TabList`/`Tab`/
+`TabPanel` each add no props of their own; `className` merges with each
+piece's base class (`xd-tabs`, `xd-tab-list`, `xd-tab`, `xd-tab-panel`,
+base class first), the same convention every styled component in this
+library follows. See `@asnewyla/unstyled-tabs`'s README for the full
+component/keyboard/accessibility contract — sorting, disabled tabs,
+`ArrowLeft`/`ArrowRight`/`Home`/`End` behavior, and the `aria-controls`/
+`aria-labelledby` wiring are all unchanged here.
+
+### Theming
+
+Override the CSS custom properties — defaults adapt automatically to
+`prefers-color-scheme` via `@asnewyla/tokens`:
+
+```css
+:root {
+  --xd-color-primary: #0d9488;
+  --xd-color-border: #cbd5e1;
+  --xd-color-text-muted: #475569;
+}
+```
+
+## License
+
+MIT

package/dist/index.css

@@ -0,0 +1,55 @@
+/* src/components/Tabs.css */
+.xd-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--xd-space-md, 0.5rem);
+}
+.xd-tab-list {
+  display: flex;
+  gap: var(--xd-space-sm, 0.375rem);
+  border-bottom: var(--xd-border-width-thin, 1px) solid var(--xd-color-border, #cbd5e1);
+}
+.xd-tab {
+  position: relative;
+  margin-bottom: -1px;
+  padding: var(--xd-space-sm, 0.375rem) var(--xd-space-md, 0.5rem);
+  border: none;
+  border-bottom: var(--xd-border-width-thick, 2px) solid transparent;
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--xd-font-size-md, 0.875rem);
+  font-weight: var(--xd-font-weight-medium, 500);
+  color: var(--xd-color-text-muted, #475569);
+  cursor: pointer;
+  transition: color var(--xd-motion-fast, 120ms ease-out), border-color var(--xd-motion-fast, 120ms ease-out);
+}
+.xd-tab:hover:not(:disabled) {
+  color: var(--xd-color-text, #0f172a);
+}
+.xd-tab[aria-selected=true] {
+  color: var(--xd-color-primary, #0d9488);
+  border-bottom-color: var(--xd-color-primary, #0d9488);
+}
+.xd-tab:focus-visible {
+  outline: var(--xd-focus-ring-width, 2px) solid var(--xd-color-focus, var(--xd-color-primary, #0d9488));
+  outline-offset: -2px;
+}
+.xd-tab:disabled {
+  opacity: var(--xd-opacity-disabled, 0.5);
+  cursor: not-allowed;
+}
+.xd-tab-panel {
+  font-size: var(--xd-font-size-md, 0.875rem);
+  line-height: var(--xd-line-height-normal, 1.25);
+  color: var(--xd-color-text, #0f172a);
+}
+.xd-tab-panel:focus-visible {
+  outline: var(--xd-focus-ring-width, 2px) solid var(--xd-color-focus, var(--xd-color-primary, #0d9488));
+  outline-offset: var(--xd-focus-ring-offset, 2px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .xd-tab {
+    transition-duration: 1ms;
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tabs.css"],"sourcesContent":[".xd-tabs {\n  display: flex;\n  flex-direction: column;\n  gap: var(--xd-space-md, 0.5rem);\n}\n\n.xd-tab-list {\n  display: flex;\n  gap: var(--xd-space-sm, 0.375rem);\n  border-bottom: var(--xd-border-width-thin, 1px) solid\n    var(--xd-color-border, #cbd5e1);\n}\n\n.xd-tab {\n  position: relative;\n  /* Sits flush against the tablist's own border, so the active tab's\n     indicator below overlaps it exactly at the seam instead of leaving\n     a visible gap or double line. */\n  margin-bottom: -1px;\n  padding: var(--xd-space-sm, 0.375rem) var(--xd-space-md, 0.5rem);\n  border: none;\n  border-bottom: var(--xd-border-width-thick, 2px) solid transparent;\n  background: transparent;\n  font-family: inherit;\n  font-size: var(--xd-font-size-md, 0.875rem);\n  font-weight: var(--xd-font-weight-medium, 500);\n  color: var(--xd-color-text-muted, #475569);\n  cursor: pointer;\n  transition:\n    color var(--xd-motion-fast, 120ms ease-out),\n    border-color var(--xd-motion-fast, 120ms ease-out);\n}\n\n.xd-tab:hover:not(:disabled) {\n  color: var(--xd-color-text, #0f172a);\n}\n\n.xd-tab[aria-selected=\"true\"] {\n  color: var(--xd-color-primary, #0d9488);\n  border-bottom-color: var(--xd-color-primary, #0d9488);\n}\n\n.xd-tab:focus-visible {\n  outline: var(--xd-focus-ring-width, 2px) solid\n    var(--xd-color-focus, var(--xd-color-primary, #0d9488));\n  outline-offset: -2px;\n}\n\n.xd-tab:disabled {\n  opacity: var(--xd-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n.xd-tab-panel {\n  font-size: var(--xd-font-size-md, 0.875rem);\n  line-height: var(--xd-line-height-normal, 1.25);\n  color: var(--xd-color-text, #0f172a);\n}\n\n.xd-tab-panel:focus-visible {\n  outline: var(--xd-focus-ring-width, 2px) solid\n    var(--xd-color-focus, var(--xd-color-primary, #0d9488));\n  outline-offset: var(--xd-focus-ring-offset, 2px);\n}\n\n/* --- Motion preference --- */\n\n@media (prefers-reduced-motion: reduce) {\n  .xd-tab {\n    transition-duration: 1ms;\n  }\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI,aAAa,EAAE;AAC1B;AAEA,CAAC;AACC,WAAS;AACT,OAAK,IAAI,aAAa,EAAE;AACxB,iBAAe,IAAI,sBAAsB,EAAE,KAAK,MAC9C,IAAI,iBAAiB,EAAE;AAC3B;AAEA,CAAC;AACC,YAAU;AAIV,iBAAe;AACf,WAAS,IAAI,aAAa,EAAE,UAAU,IAAI,aAAa,EAAE;AACzD,UAAQ;AACR,iBAAe,IAAI,uBAAuB,EAAE,KAAK,MAAM;AACvD,cAAY;AACZ,eAAa;AACb,aAAW,IAAI,iBAAiB,EAAE;AAClC,eAAa,IAAI,uBAAuB,EAAE;AAC1C,SAAO,IAAI,qBAAqB,EAAE;AAClC,UAAQ;AACR,cACE,MAAM,IAAI,gBAAgB,EAAE,MAAM,SAAS,EAC3C,aAAa,IAAI,gBAAgB,EAAE,MAAM;AAC7C;AAEA,CApBC,MAoBM,MAAM,KAAK;AAChB,SAAO,IAAI,eAAe,EAAE;AAC9B;AAEA,CAxBC,MAwBM,CAAC;AACN,SAAO,IAAI,kBAAkB,EAAE;AAC/B,uBAAqB,IAAI,kBAAkB,EAAE;AAC/C;AAEA,CA7BC,MA6BM;AACL,WAAS,IAAI,qBAAqB,EAAE,KAAK,MACvC,IAAI,gBAAgB,EAAE,IAAI,kBAAkB,EAAE;AAChD,kBAAgB;AAClB;AAEA,CAnCC,MAmCM;AACL,WAAS,IAAI,qBAAqB,EAAE;AACpC,UAAQ;AACV;AAEA,CAAC;AACC,aAAW,IAAI,iBAAiB,EAAE;AAClC,eAAa,IAAI,uBAAuB,EAAE;AAC1C,SAAO,IAAI,eAAe,EAAE;AAC9B;AAEA,CANC,YAMY;AACX,WAAS,IAAI,qBAAqB,EAAE,KAAK,MACvC,IAAI,gBAAgB,EAAE,IAAI,kBAAkB,EAAE;AAChD,kBAAgB,IAAI,sBAAsB,EAAE;AAC9C;AAIA,QAAO,wBAAyB;AAC9B,GAvDD;AAwDG,yBAAqB;AACvB;AACF;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1 } from '@asnewyla/unstyled-tabs';
+
+type TabProps = TabProps$1;
+declare const Tab: react.ForwardRefExoticComponent<{
+    value: string;
+    disabled?: boolean;
+} & Omit<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "disabled" | "type" | "value" | "role"> & react.RefAttributes<HTMLButtonElement>>;
+
+type TabListProps = TabListProps$1;
+declare const TabList: react.ForwardRefExoticComponent<TabListProps$1 & react.RefAttributes<HTMLDivElement>>;
+
+type TabPanelProps = TabPanelProps$1;
+declare const TabPanel: react.ForwardRefExoticComponent<{
+    value: string;
+} & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "role"> & react.RefAttributes<HTMLDivElement>>;
+
+type TabsProps = TabsProps$1;
+declare const Tabs: react.ForwardRefExoticComponent<{
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    children: react.ReactNode;
+} & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "defaultValue" | "children" | "onChange"> & react.RefAttributes<HTMLDivElement>>;
+
+export { Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps };

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1 } from '@asnewyla/unstyled-tabs';
+
+type TabProps = TabProps$1;
+declare const Tab: react.ForwardRefExoticComponent<{
+    value: string;
+    disabled?: boolean;
+} & Omit<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "disabled" | "type" | "value" | "role"> & react.RefAttributes<HTMLButtonElement>>;
+
+type TabListProps = TabListProps$1;
+declare const TabList: react.ForwardRefExoticComponent<TabListProps$1 & react.RefAttributes<HTMLDivElement>>;
+
+type TabPanelProps = TabPanelProps$1;
+declare const TabPanel: react.ForwardRefExoticComponent<{
+    value: string;
+} & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "role"> & react.RefAttributes<HTMLDivElement>>;
+
+type TabsProps = TabsProps$1;
+declare const Tabs: react.ForwardRefExoticComponent<{
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    children: react.ReactNode;
+} & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "defaultValue" | "children" | "onChange"> & react.RefAttributes<HTMLDivElement>>;
+
+export { Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps };

package/dist/index.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var unstyledTabs = require('@asnewyla/unstyled-tabs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Tab.tsx
+function TabInner({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    unstyledTabs.Tab,
+    {
+      ...rest,
+      className: className ? `xd-tab ${className}` : "xd-tab",
+      ref
+    }
+  );
+}
+var Tab = react.forwardRef(TabInner);
+function TabListInner({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    unstyledTabs.TabList,
+    {
+      ...rest,
+      className: className ? `xd-tab-list ${className}` : "xd-tab-list",
+      ref
+    }
+  );
+}
+var TabList = react.forwardRef(TabListInner);
+function TabPanelInner({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    unstyledTabs.TabPanel,
+    {
+      ...rest,
+      className: className ? `xd-tab-panel ${className}` : "xd-tab-panel",
+      ref
+    }
+  );
+}
+var TabPanel = react.forwardRef(
+  TabPanelInner
+);
+function TabsInner({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    unstyledTabs.Tabs,
+    {
+      ...rest,
+      className: className ? `xd-tabs ${className}` : "xd-tabs",
+      ref
+    }
+  );
+}
+var Tabs = react.forwardRef(TabsInner);
+
+exports.Tab = Tab;
+exports.TabList = TabList;
+exports.TabPanel = TabPanel;
+exports.Tabs = Tabs;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tab.tsx","../src/components/TabList.tsx","../src/components/TabPanel.tsx","../src/components/Tabs.tsx"],"names":["jsx","UnstyledTab","forwardRef","UnstyledTabList","UnstyledTabPanel","UnstyledTabs"],"mappings":";;;;;;;AAQA,SAAS,SACP,EAAE,SAAA,EAAW,GAAG,IAAA,IAChB,GAAA,EACA;AACA,EAAA,uBACEA,cAAA;AAAA,IAACC,gBAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,SAAA,GAAY,CAAA,OAAA,EAAU,SAAS,CAAA,CAAA,GAAK,QAAA;AAAA,MAC/C;AAAA;AAAA,GACF;AAEJ;AAEO,IAAM,GAAA,GAAMC,iBAAwC,QAAQ;ACbnE,SAAS,aACP,EAAE,SAAA,EAAW,GAAG,IAAA,IAChB,GAAA,EACA;AACA,EAAA,uBACEF,cAAAA;AAAA,IAACG,oBAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,SAAA,GAAY,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,GAAK,aAAA;AAAA,MACpD;AAAA;AAAA,GACF;AAEJ;AAEO,IAAM,OAAA,GAAUD,iBAAyC,YAAY;ACb5E,SAAS,cACP,EAAE,SAAA,EAAW,GAAG,IAAA,IAChB,GAAA,EACA;AACA,EAAA,uBACEF,cAAAA;AAAA,IAACI,qBAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,SAAA,GAAY,CAAA,aAAA,EAAgB,SAAS,CAAA,CAAA,GAAK,cAAA;AAAA,MACrD;AAAA;AAAA,GACF;AAEJ;AAEO,IAAM,QAAA,GAAWF,gBAAAA;AAAA,EACtB;AACF;ACdA,SAAS,UACP,EAAE,SAAA,EAAW,GAAG,IAAA,IAChB,GAAA,EACA;AACA,EAAA,uBACEF,cAAAA;AAAA,IAACK,iBAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,SAAA,GAAY,CAAA,QAAA,EAAW,SAAS,CAAA,CAAA,GAAK,SAAA;AAAA,MAChD;AAAA;AAAA,GACF;AAEJ;AAEO,IAAM,IAAA,GAAOH,iBAAsC,SAAS","file":"index.js","sourcesContent":["import {\n  Tab as UnstyledTab,\n  type TabProps as UnstyledTabProps,\n} from '@asnewyla/unstyled-tabs';\nimport { type ForwardedRef, forwardRef } from 'react';\n\nexport type TabProps = UnstyledTabProps;\n\nfunction TabInner(\n  { className, ...rest }: TabProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  return (\n    <UnstyledTab\n      {...rest}\n      className={className ? `xd-tab ${className}` : 'xd-tab'}\n      ref={ref}\n    />\n  );\n}\n\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>(TabInner);\n","import {\n  TabList as UnstyledTabList,\n  type TabListProps as UnstyledTabListProps,\n} from '@asnewyla/unstyled-tabs';\nimport { type ForwardedRef, forwardRef } from 'react';\n\nexport type TabListProps = UnstyledTabListProps;\n\nfunction TabListInner(\n  { className, ...rest }: TabListProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <UnstyledTabList\n      {...rest}\n      className={className ? `xd-tab-list ${className}` : 'xd-tab-list'}\n      ref={ref}\n    />\n  );\n}\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(TabListInner);\n","import {\n  TabPanel as UnstyledTabPanel,\n  type TabPanelProps as UnstyledTabPanelProps,\n} from '@asnewyla/unstyled-tabs';\nimport { type ForwardedRef, forwardRef } from 'react';\n\nexport type TabPanelProps = UnstyledTabPanelProps;\n\nfunction TabPanelInner(\n  { className, ...rest }: TabPanelProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <UnstyledTabPanel\n      {...rest}\n      className={className ? `xd-tab-panel ${className}` : 'xd-tab-panel'}\n      ref={ref}\n    />\n  );\n}\n\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(\n  TabPanelInner,\n);\n","import {\n  Tabs as UnstyledTabs,\n  type TabsProps as UnstyledTabsProps,\n} from '@asnewyla/unstyled-tabs';\nimport { type ForwardedRef, forwardRef } from 'react';\nimport './Tabs.css';\n\nexport type TabsProps = UnstyledTabsProps;\n\nfunction TabsInner(\n  { className, ...rest }: TabsProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <UnstyledTabs\n      {...rest}\n      className={className ? `xd-tabs ${className}` : 'xd-tabs'}\n      ref={ref}\n    />\n  );\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(TabsInner);\n"]}

package/dist/index.mjs

@@ -0,0 +1,55 @@
+import { Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1, Tabs as Tabs$1 } from '@asnewyla/unstyled-tabs';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Tab.tsx
+function TabInner({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    Tab$1,
+    {
+      ...rest,
+      className: className ? `xd-tab ${className}` : "xd-tab",
+      ref
+    }
+  );
+}
+var Tab = forwardRef(TabInner);
+function TabListInner({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    TabList$1,
+    {
+      ...rest,
+      className: className ? `xd-tab-list ${className}` : "xd-tab-list",
+      ref
+    }
+  );
+}
+var TabList = forwardRef(TabListInner);
+function TabPanelInner({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    TabPanel$1,
+    {
+      ...rest,
+      className: className ? `xd-tab-panel ${className}` : "xd-tab-panel",
+      ref
+    }
+  );
+}
+var TabPanel = forwardRef(
+  TabPanelInner
+);
+function TabsInner({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1,
+    {
+      ...rest,
+      className: className ? `xd-tabs ${className}` : "xd-tabs",
+      ref
+    }
+  );
+}
+var Tabs = forwardRef(TabsInner);
+
+export { Tab, TabList, TabPanel, Tabs };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tab.tsx","../src/components/TabList.tsx","../src/components/TabPanel.tsx","../src/components/Tabs.tsx"],"names":["UnstyledTab","jsx","UnstyledTabList","forwardRef","UnstyledTabPanel","UnstyledTabs"],"mappings":";;;;;AAQA,SAAS,SACP,EAAE,SAAA,EAAW,GAAG,IAAA,IAChB,GAAA,EACA;AACA,EAAA,uBACE,GAAA;AAAA,IAACA,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,SAAA,GAAY,CAAA,OAAA,EAAU,SAAS,CAAA,CAAA,GAAK,QAAA;AAAA,MAC/C;AAAA;AAAA,GACF;AAEJ;AAEO,IAAM,GAAA,GAAM,WAAwC,QAAQ;ACbnE,SAAS,aACP,EAAE,SAAA,EAAW,GAAG,IAAA,IAChB,GAAA,EACA;AACA,EAAA,uBACEC,GAAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,SAAA,GAAY,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,GAAK,aAAA;AAAA,MACpD;AAAA;AAAA,GACF;AAEJ;AAEO,IAAM,OAAA,GAAUC,WAAyC,YAAY;ACb5E,SAAS,cACP,EAAE,SAAA,EAAW,GAAG,IAAA,IAChB,GAAA,EACA;AACA,EAAA,uBACEF,GAAAA;AAAA,IAACG,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,SAAA,GAAY,CAAA,aAAA,EAAgB,SAAS,CAAA,CAAA,GAAK,cAAA;AAAA,MACrD;AAAA;AAAA,GACF;AAEJ;AAEO,IAAM,QAAA,GAAWD,UAAAA;AAAA,EACtB;AACF;ACdA,SAAS,UACP,EAAE,SAAA,EAAW,GAAG,IAAA,IAChB,GAAA,EACA;AACA,EAAA,uBACEF,GAAAA;AAAA,IAACI,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,SAAA,GAAY,CAAA,QAAA,EAAW,SAAS,CAAA,CAAA,GAAK,SAAA;AAAA,MAChD;AAAA;AAAA,GACF;AAEJ;AAEO,IAAM,IAAA,GAAOF,WAAsC,SAAS","file":"index.mjs","sourcesContent":["import {\n  Tab as UnstyledTab,\n  type TabProps as UnstyledTabProps,\n} from '@asnewyla/unstyled-tabs';\nimport { type ForwardedRef, forwardRef } from 'react';\n\nexport type TabProps = UnstyledTabProps;\n\nfunction TabInner(\n  { className, ...rest }: TabProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  return (\n    <UnstyledTab\n      {...rest}\n      className={className ? `xd-tab ${className}` : 'xd-tab'}\n      ref={ref}\n    />\n  );\n}\n\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>(TabInner);\n","import {\n  TabList as UnstyledTabList,\n  type TabListProps as UnstyledTabListProps,\n} from '@asnewyla/unstyled-tabs';\nimport { type ForwardedRef, forwardRef } from 'react';\n\nexport type TabListProps = UnstyledTabListProps;\n\nfunction TabListInner(\n  { className, ...rest }: TabListProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <UnstyledTabList\n      {...rest}\n      className={className ? `xd-tab-list ${className}` : 'xd-tab-list'}\n      ref={ref}\n    />\n  );\n}\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(TabListInner);\n","import {\n  TabPanel as UnstyledTabPanel,\n  type TabPanelProps as UnstyledTabPanelProps,\n} from '@asnewyla/unstyled-tabs';\nimport { type ForwardedRef, forwardRef } from 'react';\n\nexport type TabPanelProps = UnstyledTabPanelProps;\n\nfunction TabPanelInner(\n  { className, ...rest }: TabPanelProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <UnstyledTabPanel\n      {...rest}\n      className={className ? `xd-tab-panel ${className}` : 'xd-tab-panel'}\n      ref={ref}\n    />\n  );\n}\n\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(\n  TabPanelInner,\n);\n","import {\n  Tabs as UnstyledTabs,\n  type TabsProps as UnstyledTabsProps,\n} from '@asnewyla/unstyled-tabs';\nimport { type ForwardedRef, forwardRef } from 'react';\nimport './Tabs.css';\n\nexport type TabsProps = UnstyledTabsProps;\n\nfunction TabsInner(\n  { className, ...rest }: TabsProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <UnstyledTabs\n      {...rest}\n      className={className ? `xd-tabs ${className}` : 'xd-tabs'}\n      ref={ref}\n    />\n  );\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(TabsInner);\n"]}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "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"
+  },
+  "files": [
+    "dist"
+  ],
+  "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"
+  }
+}