@mshafiqyajid/react-tabs 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Shafiq Yajid
+
+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,114 @@
+# @mshafiqyajid/react-tabs
+
+Headless tabs hook and styled component for React. Accessible, keyboard-friendly, animated, SSR-safe, fully typed.
+
+**[Full docs →](https://docs.shafiqyajid.com/react/tabs/)**
+
+## Installation
+
+```bash
+npm install @mshafiqyajid/react-tabs
+```
+
+## Quick start — styled component
+
+```tsx
+import { TabsStyled } from "@mshafiqyajid/react-tabs/styled";
+import "@mshafiqyajid/react-tabs/styles.css";
+
+const tabs = [
+  { value: "account", label: "Account", content: <div>Account settings</div> },
+  { value: "security", label: "Security", content: <div>Security settings</div> },
+  { value: "billing", label: "Billing", content: <div>Billing info</div>, disabled: true },
+];
+
+export function App() {
+  return <TabsStyled tabs={tabs} defaultValue="account" />;
+}
+```
+
+## Quick start — headless hook
+
+```tsx
+import { useTabs } from "@mshafiqyajid/react-tabs";
+
+function MyTabs() {
+  const { getTabProps, getPanelProps, activeValue } = useTabs({
+    defaultValue: "account",
+  });
+
+  return (
+    <div>
+      <div role="tablist">
+        <button {...getTabProps("account")}>Account</button>
+        <button {...getTabProps("security")}>Security</button>
+      </div>
+      <div {...getPanelProps("account")}>Account content</div>
+      <div {...getPanelProps("security")}>Security content</div>
+    </div>
+  );
+}
+```
+
+## Props — `TabsStyled`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tabs` | `TabItem[]` | required | Array of tab definitions |
+| `variant` | `"line" \| "solid" \| "pill"` | `"line"` | Visual style of the tab indicator |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Size of tabs |
+| `tone` | `"neutral" \| "primary"` | `"neutral"` | Color tone |
+| `defaultValue` | `string` | — | Initial active tab (uncontrolled) |
+| `value` | `string` | — | Controlled active tab |
+| `onChange` | `(value: string) => void` | — | Called when tab changes |
+
+### `TabItem`
+
+```ts
+interface TabItem {
+  value: string;
+  label: React.ReactNode;
+  content: React.ReactNode;
+  disabled?: boolean;
+}
+```
+
+## Props — `useTabs`
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `defaultValue` | `string` | Initial active tab (uncontrolled) |
+| `value` | `string` | Controlled active tab |
+| `onChange` | `(value: string) => void` | Called when tab changes |
+| `tabs` | `{ value: string; disabled?: boolean }[]` | Tab definitions for keyboard navigation |
+
+### Returns
+
+| Key | Type | Description |
+|-----|------|-------------|
+| `activeValue` | `string \| undefined` | Currently active tab value |
+| `getTabProps` | `(value: string) => object` | Spread onto each tab button |
+| `getPanelProps` | `(value: string) => object` | Spread onto each panel |
+
+## Keyboard navigation
+
+| Key | Action |
+|-----|--------|
+| `ArrowRight` / `ArrowDown` | Move to next tab |
+| `ArrowLeft` / `ArrowUp` | Move to previous tab |
+| `Home` | Move to first tab |
+| `End` | Move to last tab |
+
+## Dark mode
+
+Add `data-theme="dark"` to a parent element (or `data-rtab-theme="dark"` for component-scoped dark mode). Never uses `@media (prefers-color-scheme: dark)`.
+
+```html
+<div data-theme="dark">
+  <!-- TabsStyled inherits dark mode here -->
+</div>
+```
+
+## License
+
+MIT

package/dist/chunk-UCRNSS7N.js

@@ -0,0 +1,124 @@
+import { useState, useRef, useCallback, useMemo } from 'react';
+
+// src/useTabs.ts
+var tabId = (listId, value) => `${listId}-tab-${value}`;
+var panelId = (listId, value) => `${listId}-panel-${value}`;
+var counter = 0;
+function useStableId() {
+  const ref = useRef(null);
+  if (ref.current === null) {
+    ref.current = `rtabs-${++counter}`;
+  }
+  return ref.current;
+}
+function useTabs(opts = {}) {
+  const { tabs = [], value: controlledValue, defaultValue, onChange } = opts;
+  const listId = useStableId();
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = useState(
+    defaultValue
+  );
+  const activeValue = isControlled ? controlledValue : internalValue;
+  const tabRefs = useRef(/* @__PURE__ */ new Map());
+  const setActiveValue = useCallback(
+    (next) => {
+      const tab = tabs.find((t) => t.value === next);
+      if (tab?.disabled) return;
+      if (isControlled) {
+        if (next !== controlledValue) onChange?.(next);
+      } else {
+        if (next === internalValue) return;
+        setInternalValue(next);
+        onChange?.(next);
+      }
+    },
+    [tabs, isControlled, controlledValue, internalValue, onChange]
+  );
+  const focusTab = useCallback((value) => {
+    tabRefs.current.get(value)?.focus();
+  }, []);
+  const handleKeyDown = useCallback(
+    (currentValue) => (event) => {
+      const enabled = tabs.filter((t) => !t.disabled);
+      if (enabled.length === 0) return;
+      const currentIndex = enabled.findIndex((t) => t.value === currentValue);
+      let nextValue;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown": {
+          const nextIndex = (currentIndex + 1) % enabled.length;
+          nextValue = enabled[nextIndex]?.value;
+          break;
+        }
+        case "ArrowLeft":
+        case "ArrowUp": {
+          const prevIndex = (currentIndex - 1 + enabled.length) % enabled.length;
+          nextValue = enabled[prevIndex]?.value;
+          break;
+        }
+        case "Home": {
+          nextValue = enabled[0]?.value;
+          break;
+        }
+        case "End": {
+          nextValue = enabled[enabled.length - 1]?.value;
+          break;
+        }
+        default:
+          return;
+      }
+      if (nextValue === void 0 || nextValue === currentValue) return;
+      event.preventDefault();
+      setActiveValue(nextValue);
+      focusTab(nextValue);
+    },
+    [tabs, setActiveValue, focusTab]
+  );
+  const getTabProps = useCallback(
+    (value, options) => {
+      const isDisabled = options?.disabled ?? tabs.find((t) => t.value === value)?.disabled;
+      const isSelected = activeValue === value;
+      return {
+        id: tabId(listId, value),
+        role: "tab",
+        "aria-selected": isSelected,
+        "aria-controls": panelId(listId, value),
+        "aria-disabled": isDisabled || void 0,
+        tabIndex: isSelected ? 0 : -1,
+        disabled: isDisabled,
+        ref: (node) => {
+          if (node) {
+            tabRefs.current.set(value, node);
+          } else {
+            tabRefs.current.delete(value);
+          }
+        },
+        onClick: () => {
+          if (!isDisabled) setActiveValue(value);
+        },
+        onKeyDown: handleKeyDown(value)
+      };
+    },
+    [activeValue, listId, tabs, setActiveValue, handleKeyDown]
+  );
+  const getPanelProps = useCallback(
+    (value) => {
+      return {
+        id: panelId(listId, value),
+        role: "tabpanel",
+        "aria-labelledby": tabId(listId, value),
+        hidden: activeValue !== value,
+        tabIndex: 0
+      };
+    },
+    [activeValue, listId]
+  );
+  return useMemo(
+    () => ({ activeValue, getTabProps, getPanelProps, setActiveValue }),
+    [activeValue, getTabProps, getPanelProps, setActiveValue]
+  );
+}
+
+export { useTabs };
+//# sourceMappingURL=chunk-UCRNSS7N.js.map
+//# sourceMappingURL=chunk-UCRNSS7N.js.map

package/dist/chunk-UCRNSS7N.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useTabs.ts"],"names":[],"mappings":"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","file":"chunk-UCRNSS7N.js","sourcesContent":["import {\n  type AriaAttributes,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nexport interface UseTabsTab {\n  value: string;\n  disabled?: boolean;\n}\n\nexport interface UseTabsOptions {\n  /** Tab definitions — needed for keyboard navigation between tabs. */\n  tabs?: UseTabsTab[];\n  /** Controlled active value. */\n  value?: string;\n  /** Initial active value when uncontrolled. */\n  defaultValue?: string;\n  /** Called when the active tab changes. */\n  onChange?: (value: string) => void;\n}\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n  id: string;\n  role: \"tab\";\n  \"aria-selected\": boolean;\n  \"aria-controls\": string;\n  \"aria-disabled\"?: boolean;\n  tabIndex: number;\n}\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  id: string;\n  role: \"tabpanel\";\n  \"aria-labelledby\": string;\n  hidden: boolean;\n}\n\nexport interface UseTabsResult {\n  /** Currently active tab value. */\n  activeValue: string | undefined;\n  /** Returns props to spread onto a tab trigger `<button>`. */\n  getTabProps: (value: string, options?: { disabled?: boolean }) => TabProps;\n  /** Returns props to spread onto a tab panel. */\n  getPanelProps: (value: string) => PanelProps;\n  /** Programmatically set the active tab. */\n  setActiveValue: (value: string) => void;\n}\n\nconst tabId = (listId: string, value: string) => `${listId}-tab-${value}`;\nconst panelId = (listId: string, value: string) => `${listId}-panel-${value}`;\n\nlet counter = 0;\nfunction useStableId() {\n  const ref = useRef<string | null>(null);\n  if (ref.current === null) {\n    ref.current = `rtabs-${++counter}`;\n  }\n  return ref.current;\n}\n\nexport function useTabs(opts: UseTabsOptions = {}): UseTabsResult {\n  const { tabs = [], value: controlledValue, defaultValue, onChange } = opts;\n\n  const listId = useStableId();\n  const isControlled = controlledValue !== undefined;\n\n  const [internalValue, setInternalValue] = useState<string | undefined>(\n    defaultValue,\n  );\n\n  const activeValue = isControlled ? controlledValue : internalValue;\n\n  const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n\n  const setActiveValue = useCallback(\n    (next: string) => {\n      const tab = tabs.find((t) => t.value === next);\n      if (tab?.disabled) return;\n      if (isControlled) {\n        if (next !== controlledValue) onChange?.(next);\n      } else {\n        if (next === internalValue) return;\n        setInternalValue(next);\n        onChange?.(next);\n      }\n    },\n    [tabs, isControlled, controlledValue, internalValue, onChange],\n  );\n\n  const focusTab = useCallback((value: string) => {\n    tabRefs.current.get(value)?.focus();\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (currentValue: string) =>\n      (event: KeyboardEvent<HTMLButtonElement>) => {\n        const enabled = tabs.filter((t) => !t.disabled);\n        if (enabled.length === 0) return;\n\n        const currentIndex = enabled.findIndex((t) => t.value === currentValue);\n\n        let nextValue: string | undefined;\n\n        switch (event.key) {\n          case \"ArrowRight\":\n          case \"ArrowDown\": {\n            const nextIndex = (currentIndex + 1) % enabled.length;\n            nextValue = enabled[nextIndex]?.value;\n            break;\n          }\n          case \"ArrowLeft\":\n          case \"ArrowUp\": {\n            const prevIndex =\n              (currentIndex - 1 + enabled.length) % enabled.length;\n            nextValue = enabled[prevIndex]?.value;\n            break;\n          }\n          case \"Home\": {\n            nextValue = enabled[0]?.value;\n            break;\n          }\n          case \"End\": {\n            nextValue = enabled[enabled.length - 1]?.value;\n            break;\n          }\n          default:\n            return;\n        }\n\n        if (nextValue === undefined || nextValue === currentValue) return;\n        event.preventDefault();\n        setActiveValue(nextValue);\n        focusTab(nextValue);\n      },\n    [tabs, setActiveValue, focusTab],\n  );\n\n  const getTabProps = useCallback(\n    (value: string, options?: { disabled?: boolean }): TabProps => {\n      const isDisabled =\n        options?.disabled ?? tabs.find((t) => t.value === value)?.disabled;\n      const isSelected = activeValue === value;\n      return {\n        id: tabId(listId, value),\n        role: \"tab\",\n        \"aria-selected\": isSelected,\n        \"aria-controls\": panelId(listId, value),\n        \"aria-disabled\": isDisabled || undefined,\n        tabIndex: isSelected ? 0 : -1,\n        disabled: isDisabled,\n        ref: (node: HTMLButtonElement | null) => {\n          if (node) {\n            tabRefs.current.set(value, node);\n          } else {\n            tabRefs.current.delete(value);\n          }\n        },\n        onClick: () => {\n          if (!isDisabled) setActiveValue(value);\n        },\n        onKeyDown: handleKeyDown(value),\n      } as TabProps & {\n        disabled: boolean | undefined;\n        ref: (node: HTMLButtonElement | null) => void;\n      };\n    },\n    [activeValue, listId, tabs, setActiveValue, handleKeyDown],\n  );\n\n  const getPanelProps = useCallback(\n    (value: string): PanelProps => {\n      return {\n        id: panelId(listId, value),\n        role: \"tabpanel\",\n        \"aria-labelledby\": tabId(listId, value),\n        hidden: activeValue !== value,\n        tabIndex: 0,\n      };\n    },\n    [activeValue, listId],\n  );\n\n  return useMemo(\n    () => ({ activeValue, getTabProps, getPanelProps, setActiveValue }),\n    [activeValue, getTabProps, getPanelProps, setActiveValue],\n  );\n}\n"]}

package/dist/index.cjs

@@ -0,0 +1,126 @@
+'use strict';
+
+var react = require('react');
+
+// src/useTabs.ts
+var tabId = (listId, value) => `${listId}-tab-${value}`;
+var panelId = (listId, value) => `${listId}-panel-${value}`;
+var counter = 0;
+function useStableId() {
+  const ref = react.useRef(null);
+  if (ref.current === null) {
+    ref.current = `rtabs-${++counter}`;
+  }
+  return ref.current;
+}
+function useTabs(opts = {}) {
+  const { tabs = [], value: controlledValue, defaultValue, onChange } = opts;
+  const listId = useStableId();
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = react.useState(
+    defaultValue
+  );
+  const activeValue = isControlled ? controlledValue : internalValue;
+  const tabRefs = react.useRef(/* @__PURE__ */ new Map());
+  const setActiveValue = react.useCallback(
+    (next) => {
+      const tab = tabs.find((t) => t.value === next);
+      if (tab?.disabled) return;
+      if (isControlled) {
+        if (next !== controlledValue) onChange?.(next);
+      } else {
+        if (next === internalValue) return;
+        setInternalValue(next);
+        onChange?.(next);
+      }
+    },
+    [tabs, isControlled, controlledValue, internalValue, onChange]
+  );
+  const focusTab = react.useCallback((value) => {
+    tabRefs.current.get(value)?.focus();
+  }, []);
+  const handleKeyDown = react.useCallback(
+    (currentValue) => (event) => {
+      const enabled = tabs.filter((t) => !t.disabled);
+      if (enabled.length === 0) return;
+      const currentIndex = enabled.findIndex((t) => t.value === currentValue);
+      let nextValue;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown": {
+          const nextIndex = (currentIndex + 1) % enabled.length;
+          nextValue = enabled[nextIndex]?.value;
+          break;
+        }
+        case "ArrowLeft":
+        case "ArrowUp": {
+          const prevIndex = (currentIndex - 1 + enabled.length) % enabled.length;
+          nextValue = enabled[prevIndex]?.value;
+          break;
+        }
+        case "Home": {
+          nextValue = enabled[0]?.value;
+          break;
+        }
+        case "End": {
+          nextValue = enabled[enabled.length - 1]?.value;
+          break;
+        }
+        default:
+          return;
+      }
+      if (nextValue === void 0 || nextValue === currentValue) return;
+      event.preventDefault();
+      setActiveValue(nextValue);
+      focusTab(nextValue);
+    },
+    [tabs, setActiveValue, focusTab]
+  );
+  const getTabProps = react.useCallback(
+    (value, options) => {
+      const isDisabled = options?.disabled ?? tabs.find((t) => t.value === value)?.disabled;
+      const isSelected = activeValue === value;
+      return {
+        id: tabId(listId, value),
+        role: "tab",
+        "aria-selected": isSelected,
+        "aria-controls": panelId(listId, value),
+        "aria-disabled": isDisabled || void 0,
+        tabIndex: isSelected ? 0 : -1,
+        disabled: isDisabled,
+        ref: (node) => {
+          if (node) {
+            tabRefs.current.set(value, node);
+          } else {
+            tabRefs.current.delete(value);
+          }
+        },
+        onClick: () => {
+          if (!isDisabled) setActiveValue(value);
+        },
+        onKeyDown: handleKeyDown(value)
+      };
+    },
+    [activeValue, listId, tabs, setActiveValue, handleKeyDown]
+  );
+  const getPanelProps = react.useCallback(
+    (value) => {
+      return {
+        id: panelId(listId, value),
+        role: "tabpanel",
+        "aria-labelledby": tabId(listId, value),
+        hidden: activeValue !== value,
+        tabIndex: 0
+      };
+    },
+    [activeValue, listId]
+  );
+  return react.useMemo(
+    () => ({ activeValue, getTabProps, getPanelProps, setActiveValue }),
+    [activeValue, getTabProps, getPanelProps, setActiveValue]
+  );
+}
+
+exports.useTabs = useTabs;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useTabs.ts"],"names":["useRef","useState","useCallback","useMemo"],"mappings":"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","file":"index.cjs","sourcesContent":["import {\n  type AriaAttributes,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nexport interface UseTabsTab {\n  value: string;\n  disabled?: boolean;\n}\n\nexport interface UseTabsOptions {\n  /** Tab definitions — needed for keyboard navigation between tabs. */\n  tabs?: UseTabsTab[];\n  /** Controlled active value. */\n  value?: string;\n  /** Initial active value when uncontrolled. */\n  defaultValue?: string;\n  /** Called when the active tab changes. */\n  onChange?: (value: string) => void;\n}\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n  id: string;\n  role: \"tab\";\n  \"aria-selected\": boolean;\n  \"aria-controls\": string;\n  \"aria-disabled\"?: boolean;\n  tabIndex: number;\n}\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  id: string;\n  role: \"tabpanel\";\n  \"aria-labelledby\": string;\n  hidden: boolean;\n}\n\nexport interface UseTabsResult {\n  /** Currently active tab value. */\n  activeValue: string | undefined;\n  /** Returns props to spread onto a tab trigger `<button>`. */\n  getTabProps: (value: string, options?: { disabled?: boolean }) => TabProps;\n  /** Returns props to spread onto a tab panel. */\n  getPanelProps: (value: string) => PanelProps;\n  /** Programmatically set the active tab. */\n  setActiveValue: (value: string) => void;\n}\n\nconst tabId = (listId: string, value: string) => `${listId}-tab-${value}`;\nconst panelId = (listId: string, value: string) => `${listId}-panel-${value}`;\n\nlet counter = 0;\nfunction useStableId() {\n  const ref = useRef<string | null>(null);\n  if (ref.current === null) {\n    ref.current = `rtabs-${++counter}`;\n  }\n  return ref.current;\n}\n\nexport function useTabs(opts: UseTabsOptions = {}): UseTabsResult {\n  const { tabs = [], value: controlledValue, defaultValue, onChange } = opts;\n\n  const listId = useStableId();\n  const isControlled = controlledValue !== undefined;\n\n  const [internalValue, setInternalValue] = useState<string | undefined>(\n    defaultValue,\n  );\n\n  const activeValue = isControlled ? controlledValue : internalValue;\n\n  const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n\n  const setActiveValue = useCallback(\n    (next: string) => {\n      const tab = tabs.find((t) => t.value === next);\n      if (tab?.disabled) return;\n      if (isControlled) {\n        if (next !== controlledValue) onChange?.(next);\n      } else {\n        if (next === internalValue) return;\n        setInternalValue(next);\n        onChange?.(next);\n      }\n    },\n    [tabs, isControlled, controlledValue, internalValue, onChange],\n  );\n\n  const focusTab = useCallback((value: string) => {\n    tabRefs.current.get(value)?.focus();\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (currentValue: string) =>\n      (event: KeyboardEvent<HTMLButtonElement>) => {\n        const enabled = tabs.filter((t) => !t.disabled);\n        if (enabled.length === 0) return;\n\n        const currentIndex = enabled.findIndex((t) => t.value === currentValue);\n\n        let nextValue: string | undefined;\n\n        switch (event.key) {\n          case \"ArrowRight\":\n          case \"ArrowDown\": {\n            const nextIndex = (currentIndex + 1) % enabled.length;\n            nextValue = enabled[nextIndex]?.value;\n            break;\n          }\n          case \"ArrowLeft\":\n          case \"ArrowUp\": {\n            const prevIndex =\n              (currentIndex - 1 + enabled.length) % enabled.length;\n            nextValue = enabled[prevIndex]?.value;\n            break;\n          }\n          case \"Home\": {\n            nextValue = enabled[0]?.value;\n            break;\n          }\n          case \"End\": {\n            nextValue = enabled[enabled.length - 1]?.value;\n            break;\n          }\n          default:\n            return;\n        }\n\n        if (nextValue === undefined || nextValue === currentValue) return;\n        event.preventDefault();\n        setActiveValue(nextValue);\n        focusTab(nextValue);\n      },\n    [tabs, setActiveValue, focusTab],\n  );\n\n  const getTabProps = useCallback(\n    (value: string, options?: { disabled?: boolean }): TabProps => {\n      const isDisabled =\n        options?.disabled ?? tabs.find((t) => t.value === value)?.disabled;\n      const isSelected = activeValue === value;\n      return {\n        id: tabId(listId, value),\n        role: \"tab\",\n        \"aria-selected\": isSelected,\n        \"aria-controls\": panelId(listId, value),\n        \"aria-disabled\": isDisabled || undefined,\n        tabIndex: isSelected ? 0 : -1,\n        disabled: isDisabled,\n        ref: (node: HTMLButtonElement | null) => {\n          if (node) {\n            tabRefs.current.set(value, node);\n          } else {\n            tabRefs.current.delete(value);\n          }\n        },\n        onClick: () => {\n          if (!isDisabled) setActiveValue(value);\n        },\n        onKeyDown: handleKeyDown(value),\n      } as TabProps & {\n        disabled: boolean | undefined;\n        ref: (node: HTMLButtonElement | null) => void;\n      };\n    },\n    [activeValue, listId, tabs, setActiveValue, handleKeyDown],\n  );\n\n  const getPanelProps = useCallback(\n    (value: string): PanelProps => {\n      return {\n        id: panelId(listId, value),\n        role: \"tabpanel\",\n        \"aria-labelledby\": tabId(listId, value),\n        hidden: activeValue !== value,\n        tabIndex: 0,\n      };\n    },\n    [activeValue, listId],\n  );\n\n  return useMemo(\n    () => ({ activeValue, getTabProps, getPanelProps, setActiveValue }),\n    [activeValue, getTabProps, getPanelProps, setActiveValue],\n  );\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,45 @@
+import { HTMLAttributes } from 'react';
+
+interface UseTabsTab {
+    value: string;
+    disabled?: boolean;
+}
+interface UseTabsOptions {
+    /** Tab definitions — needed for keyboard navigation between tabs. */
+    tabs?: UseTabsTab[];
+    /** Controlled active value. */
+    value?: string;
+    /** Initial active value when uncontrolled. */
+    defaultValue?: string;
+    /** Called when the active tab changes. */
+    onChange?: (value: string) => void;
+}
+interface TabProps extends HTMLAttributes<HTMLButtonElement> {
+    id: string;
+    role: "tab";
+    "aria-selected": boolean;
+    "aria-controls": string;
+    "aria-disabled"?: boolean;
+    tabIndex: number;
+}
+interface PanelProps extends HTMLAttributes<HTMLDivElement> {
+    id: string;
+    role: "tabpanel";
+    "aria-labelledby": string;
+    hidden: boolean;
+}
+interface UseTabsResult {
+    /** Currently active tab value. */
+    activeValue: string | undefined;
+    /** Returns props to spread onto a tab trigger `<button>`. */
+    getTabProps: (value: string, options?: {
+        disabled?: boolean;
+    }) => TabProps;
+    /** Returns props to spread onto a tab panel. */
+    getPanelProps: (value: string) => PanelProps;
+    /** Programmatically set the active tab. */
+    setActiveValue: (value: string) => void;
+}
+declare function useTabs(opts?: UseTabsOptions): UseTabsResult;
+
+export { type PanelProps, type TabProps, type UseTabsOptions, type UseTabsResult, type UseTabsTab, useTabs };

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+import { HTMLAttributes } from 'react';
+
+interface UseTabsTab {
+    value: string;
+    disabled?: boolean;
+}
+interface UseTabsOptions {
+    /** Tab definitions — needed for keyboard navigation between tabs. */
+    tabs?: UseTabsTab[];
+    /** Controlled active value. */
+    value?: string;
+    /** Initial active value when uncontrolled. */
+    defaultValue?: string;
+    /** Called when the active tab changes. */
+    onChange?: (value: string) => void;
+}
+interface TabProps extends HTMLAttributes<HTMLButtonElement> {
+    id: string;
+    role: "tab";
+    "aria-selected": boolean;
+    "aria-controls": string;
+    "aria-disabled"?: boolean;
+    tabIndex: number;
+}
+interface PanelProps extends HTMLAttributes<HTMLDivElement> {
+    id: string;
+    role: "tabpanel";
+    "aria-labelledby": string;
+    hidden: boolean;
+}
+interface UseTabsResult {
+    /** Currently active tab value. */
+    activeValue: string | undefined;
+    /** Returns props to spread onto a tab trigger `<button>`. */
+    getTabProps: (value: string, options?: {
+        disabled?: boolean;
+    }) => TabProps;
+    /** Returns props to spread onto a tab panel. */
+    getPanelProps: (value: string) => PanelProps;
+    /** Programmatically set the active tab. */
+    setActiveValue: (value: string) => void;
+}
+declare function useTabs(opts?: UseTabsOptions): UseTabsResult;
+
+export { type PanelProps, type TabProps, type UseTabsOptions, type UseTabsResult, type UseTabsTab, useTabs };

package/dist/index.js

@@ -0,0 +1,3 @@
+export { useTabs } from './chunk-UCRNSS7N.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/styled.cjs

@@ -0,0 +1,216 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/styled/TabsStyled.tsx
+var tabId = (listId, value) => `${listId}-tab-${value}`;
+var panelId = (listId, value) => `${listId}-panel-${value}`;
+var counter = 0;
+function useStableId() {
+  const ref = react.useRef(null);
+  if (ref.current === null) {
+    ref.current = `rtabs-${++counter}`;
+  }
+  return ref.current;
+}
+function useTabs(opts = {}) {
+  const { tabs = [], value: controlledValue, defaultValue, onChange } = opts;
+  const listId = useStableId();
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = react.useState(
+    defaultValue
+  );
+  const activeValue = isControlled ? controlledValue : internalValue;
+  const tabRefs = react.useRef(/* @__PURE__ */ new Map());
+  const setActiveValue = react.useCallback(
+    (next) => {
+      const tab = tabs.find((t) => t.value === next);
+      if (tab?.disabled) return;
+      if (isControlled) {
+        if (next !== controlledValue) onChange?.(next);
+      } else {
+        if (next === internalValue) return;
+        setInternalValue(next);
+        onChange?.(next);
+      }
+    },
+    [tabs, isControlled, controlledValue, internalValue, onChange]
+  );
+  const focusTab = react.useCallback((value) => {
+    tabRefs.current.get(value)?.focus();
+  }, []);
+  const handleKeyDown = react.useCallback(
+    (currentValue) => (event) => {
+      const enabled = tabs.filter((t) => !t.disabled);
+      if (enabled.length === 0) return;
+      const currentIndex = enabled.findIndex((t) => t.value === currentValue);
+      let nextValue;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown": {
+          const nextIndex = (currentIndex + 1) % enabled.length;
+          nextValue = enabled[nextIndex]?.value;
+          break;
+        }
+        case "ArrowLeft":
+        case "ArrowUp": {
+          const prevIndex = (currentIndex - 1 + enabled.length) % enabled.length;
+          nextValue = enabled[prevIndex]?.value;
+          break;
+        }
+        case "Home": {
+          nextValue = enabled[0]?.value;
+          break;
+        }
+        case "End": {
+          nextValue = enabled[enabled.length - 1]?.value;
+          break;
+        }
+        default:
+          return;
+      }
+      if (nextValue === void 0 || nextValue === currentValue) return;
+      event.preventDefault();
+      setActiveValue(nextValue);
+      focusTab(nextValue);
+    },
+    [tabs, setActiveValue, focusTab]
+  );
+  const getTabProps = react.useCallback(
+    (value, options) => {
+      const isDisabled = options?.disabled ?? tabs.find((t) => t.value === value)?.disabled;
+      const isSelected = activeValue === value;
+      return {
+        id: tabId(listId, value),
+        role: "tab",
+        "aria-selected": isSelected,
+        "aria-controls": panelId(listId, value),
+        "aria-disabled": isDisabled || void 0,
+        tabIndex: isSelected ? 0 : -1,
+        disabled: isDisabled,
+        ref: (node) => {
+          if (node) {
+            tabRefs.current.set(value, node);
+          } else {
+            tabRefs.current.delete(value);
+          }
+        },
+        onClick: () => {
+          if (!isDisabled) setActiveValue(value);
+        },
+        onKeyDown: handleKeyDown(value)
+      };
+    },
+    [activeValue, listId, tabs, setActiveValue, handleKeyDown]
+  );
+  const getPanelProps = react.useCallback(
+    (value) => {
+      return {
+        id: panelId(listId, value),
+        role: "tabpanel",
+        "aria-labelledby": tabId(listId, value),
+        hidden: activeValue !== value,
+        tabIndex: 0
+      };
+    },
+    [activeValue, listId]
+  );
+  return react.useMemo(
+    () => ({ activeValue, getTabProps, getPanelProps, setActiveValue }),
+    [activeValue, getTabProps, getPanelProps, setActiveValue]
+  );
+}
+var useIsoLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+function useIndicator(tabListRef, activeValue) {
+  const [style, setStyle] = react.useState({});
+  useIsoLayoutEffect(() => {
+    if (!tabListRef.current || activeValue === void 0) return;
+    const measure = () => {
+      const list = tabListRef.current;
+      if (!list) return;
+      const activeTab = list.querySelector(
+        `[aria-selected="true"]`
+      );
+      if (!activeTab) return;
+      const listRect = list.getBoundingClientRect();
+      const tabRect = activeTab.getBoundingClientRect();
+      const x = tabRect.left - listRect.left;
+      const w = tabRect.width;
+      setStyle({
+        ["--rtab-indicator-x"]: `${x}px`,
+        ["--rtab-indicator-width"]: `${w}px`,
+        ["--rtab-indicator-ready"]: "1"
+      });
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(tabListRef.current);
+    return () => ro.disconnect();
+  }, [activeValue, tabListRef]);
+  return style;
+}
+var TabsStyled = react.forwardRef(
+  function TabsStyled2({
+    tabs,
+    variant = "line",
+    size = "md",
+    tone = "neutral",
+    defaultValue,
+    value,
+    onChange,
+    className
+  }, ref) {
+    const tabDefs = tabs.map((t) => ({ value: t.value, disabled: t.disabled }));
+    const resolvedDefault = defaultValue ?? tabs.find((t) => !t.disabled)?.value;
+    const { activeValue, getTabProps, getPanelProps } = useTabs({
+      tabs: tabDefs,
+      defaultValue: value === void 0 ? resolvedDefault : void 0,
+      value,
+      onChange
+    });
+    const tabListRef = react.useRef(null);
+    const indicatorStyle = useIndicator(tabListRef, activeValue);
+    const rootClass = ["rtab-root", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: rootClass, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: tabListRef,
+          role: "tablist",
+          className: "rtab-list",
+          "data-variant": variant,
+          "data-size": size,
+          "data-tone": tone,
+          style: indicatorStyle,
+          children: [
+            tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "rtab-tab",
+                ...getTabProps(tab.value, { disabled: tab.disabled }),
+                children: tab.label
+              },
+              tab.value
+            )),
+            (variant === "line" || variant === "solid" || variant === "pill") && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rtab-indicator", "aria-hidden": "true" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rtab-panels", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "rtab-panel",
+          ...getPanelProps(tab.value),
+          children: tab.content
+        },
+        tab.value
+      )) })
+    ] });
+  }
+);
+
+exports.TabsStyled = TabsStyled;
+//# sourceMappingURL=styled.cjs.map
+//# sourceMappingURL=styled.cjs.map

package/dist/styled.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useTabs.ts","../src/styled/TabsStyled.tsx"],"names":["useRef","useState","useCallback","useMemo","useLayoutEffect","useEffect","forwardRef","TabsStyled","jsxs","jsx"],"mappings":"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","file":"styled.cjs","sourcesContent":["import {\n  type AriaAttributes,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nexport interface UseTabsTab {\n  value: string;\n  disabled?: boolean;\n}\n\nexport interface UseTabsOptions {\n  /** Tab definitions — needed for keyboard navigation between tabs. */\n  tabs?: UseTabsTab[];\n  /** Controlled active value. */\n  value?: string;\n  /** Initial active value when uncontrolled. */\n  defaultValue?: string;\n  /** Called when the active tab changes. */\n  onChange?: (value: string) => void;\n}\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n  id: string;\n  role: \"tab\";\n  \"aria-selected\": boolean;\n  \"aria-controls\": string;\n  \"aria-disabled\"?: boolean;\n  tabIndex: number;\n}\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  id: string;\n  role: \"tabpanel\";\n  \"aria-labelledby\": string;\n  hidden: boolean;\n}\n\nexport interface UseTabsResult {\n  /** Currently active tab value. */\n  activeValue: string | undefined;\n  /** Returns props to spread onto a tab trigger `<button>`. */\n  getTabProps: (value: string, options?: { disabled?: boolean }) => TabProps;\n  /** Returns props to spread onto a tab panel. */\n  getPanelProps: (value: string) => PanelProps;\n  /** Programmatically set the active tab. */\n  setActiveValue: (value: string) => void;\n}\n\nconst tabId = (listId: string, value: string) => `${listId}-tab-${value}`;\nconst panelId = (listId: string, value: string) => `${listId}-panel-${value}`;\n\nlet counter = 0;\nfunction useStableId() {\n  const ref = useRef<string | null>(null);\n  if (ref.current === null) {\n    ref.current = `rtabs-${++counter}`;\n  }\n  return ref.current;\n}\n\nexport function useTabs(opts: UseTabsOptions = {}): UseTabsResult {\n  const { tabs = [], value: controlledValue, defaultValue, onChange } = opts;\n\n  const listId = useStableId();\n  const isControlled = controlledValue !== undefined;\n\n  const [internalValue, setInternalValue] = useState<string | undefined>(\n    defaultValue,\n  );\n\n  const activeValue = isControlled ? controlledValue : internalValue;\n\n  const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n\n  const setActiveValue = useCallback(\n    (next: string) => {\n      const tab = tabs.find((t) => t.value === next);\n      if (tab?.disabled) return;\n      if (isControlled) {\n        if (next !== controlledValue) onChange?.(next);\n      } else {\n        if (next === internalValue) return;\n        setInternalValue(next);\n        onChange?.(next);\n      }\n    },\n    [tabs, isControlled, controlledValue, internalValue, onChange],\n  );\n\n  const focusTab = useCallback((value: string) => {\n    tabRefs.current.get(value)?.focus();\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (currentValue: string) =>\n      (event: KeyboardEvent<HTMLButtonElement>) => {\n        const enabled = tabs.filter((t) => !t.disabled);\n        if (enabled.length === 0) return;\n\n        const currentIndex = enabled.findIndex((t) => t.value === currentValue);\n\n        let nextValue: string | undefined;\n\n        switch (event.key) {\n          case \"ArrowRight\":\n          case \"ArrowDown\": {\n            const nextIndex = (currentIndex + 1) % enabled.length;\n            nextValue = enabled[nextIndex]?.value;\n            break;\n          }\n          case \"ArrowLeft\":\n          case \"ArrowUp\": {\n            const prevIndex =\n              (currentIndex - 1 + enabled.length) % enabled.length;\n            nextValue = enabled[prevIndex]?.value;\n            break;\n          }\n          case \"Home\": {\n            nextValue = enabled[0]?.value;\n            break;\n          }\n          case \"End\": {\n            nextValue = enabled[enabled.length - 1]?.value;\n            break;\n          }\n          default:\n            return;\n        }\n\n        if (nextValue === undefined || nextValue === currentValue) return;\n        event.preventDefault();\n        setActiveValue(nextValue);\n        focusTab(nextValue);\n      },\n    [tabs, setActiveValue, focusTab],\n  );\n\n  const getTabProps = useCallback(\n    (value: string, options?: { disabled?: boolean }): TabProps => {\n      const isDisabled =\n        options?.disabled ?? tabs.find((t) => t.value === value)?.disabled;\n      const isSelected = activeValue === value;\n      return {\n        id: tabId(listId, value),\n        role: \"tab\",\n        \"aria-selected\": isSelected,\n        \"aria-controls\": panelId(listId, value),\n        \"aria-disabled\": isDisabled || undefined,\n        tabIndex: isSelected ? 0 : -1,\n        disabled: isDisabled,\n        ref: (node: HTMLButtonElement | null) => {\n          if (node) {\n            tabRefs.current.set(value, node);\n          } else {\n            tabRefs.current.delete(value);\n          }\n        },\n        onClick: () => {\n          if (!isDisabled) setActiveValue(value);\n        },\n        onKeyDown: handleKeyDown(value),\n      } as TabProps & {\n        disabled: boolean | undefined;\n        ref: (node: HTMLButtonElement | null) => void;\n      };\n    },\n    [activeValue, listId, tabs, setActiveValue, handleKeyDown],\n  );\n\n  const getPanelProps = useCallback(\n    (value: string): PanelProps => {\n      return {\n        id: panelId(listId, value),\n        role: \"tabpanel\",\n        \"aria-labelledby\": tabId(listId, value),\n        hidden: activeValue !== value,\n        tabIndex: 0,\n      };\n    },\n    [activeValue, listId],\n  );\n\n  return useMemo(\n    () => ({ activeValue, getTabProps, getPanelProps, setActiveValue }),\n    [activeValue, getTabProps, getPanelProps, setActiveValue],\n  );\n}\n","import {\n  type CSSProperties,\n  type ReactNode,\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useTabs } from \"../useTabs\";\n\nexport type TabsVariant = \"line\" | \"solid\" | \"pill\";\nexport type TabsSize = \"sm\" | \"md\" | \"lg\";\nexport type TabsTone = \"neutral\" | \"primary\";\n\nexport interface TabItem {\n  value: string;\n  label: ReactNode;\n  content: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface TabsStyledProps {\n  tabs: TabItem[];\n  variant?: TabsVariant;\n  size?: TabsSize;\n  tone?: TabsTone;\n  defaultValue?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  className?: string;\n}\n\n// Run layout effects on the client; fall back to a no-op effect on the server.\nconst useIsoLayoutEffect =\n  typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n\nfunction useIndicator(\n  tabListRef: React.RefObject<HTMLDivElement | null>,\n  activeValue: string | undefined,\n) {\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  useIsoLayoutEffect(() => {\n    if (!tabListRef.current || activeValue === undefined) return;\n\n    const measure = () => {\n      const list = tabListRef.current;\n      if (!list) return;\n      const activeTab = list.querySelector<HTMLElement>(\n        `[aria-selected=\"true\"]`,\n      );\n      if (!activeTab) return;\n\n      const listRect = list.getBoundingClientRect();\n      const tabRect = activeTab.getBoundingClientRect();\n      const x = tabRect.left - listRect.left;\n      const w = tabRect.width;\n\n      setStyle({\n        [\"--rtab-indicator-x\" as string]: `${x}px`,\n        [\"--rtab-indicator-width\" as string]: `${w}px`,\n        [\"--rtab-indicator-ready\" as string]: \"1\",\n      });\n    };\n\n    measure();\n\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(measure);\n    ro.observe(tabListRef.current);\n    return () => ro.disconnect();\n  }, [activeValue, tabListRef]);\n\n  return style;\n}\n\nexport const TabsStyled = forwardRef<HTMLDivElement, TabsStyledProps>(\n  function TabsStyled(\n    {\n      tabs,\n      variant = \"line\",\n      size = \"md\",\n      tone = \"neutral\",\n      defaultValue,\n      value,\n      onChange,\n      className,\n    },\n    ref,\n  ) {\n    const tabDefs = tabs.map((t) => ({ value: t.value, disabled: t.disabled }));\n\n    const resolvedDefault =\n      defaultValue ?? tabs.find((t) => !t.disabled)?.value;\n\n    const { activeValue, getTabProps, getPanelProps } = useTabs({\n      tabs: tabDefs,\n      defaultValue: value === undefined ? resolvedDefault : undefined,\n      value,\n      onChange,\n    });\n\n    const tabListRef = useRef<HTMLDivElement>(null);\n    const indicatorStyle = useIndicator(tabListRef, activeValue);\n\n    const rootClass = [\"rtab-root\", className].filter(Boolean).join(\" \");\n\n    return (\n      <div ref={ref} className={rootClass}>\n        <div\n          ref={tabListRef}\n          role=\"tablist\"\n          className=\"rtab-list\"\n          data-variant={variant}\n          data-size={size}\n          data-tone={tone}\n          style={indicatorStyle}\n        >\n          {tabs.map((tab) => (\n            <button\n              key={tab.value}\n              className=\"rtab-tab\"\n              {...getTabProps(tab.value, { disabled: tab.disabled })}\n            >\n              {tab.label}\n            </button>\n          ))}\n          {(variant === \"line\" || variant === \"solid\" || variant === \"pill\") && (\n            <span className=\"rtab-indicator\" aria-hidden=\"true\" />\n          )}\n        </div>\n        <div className=\"rtab-panels\">\n          {tabs.map((tab) => (\n            <div\n              key={tab.value}\n              className=\"rtab-panel\"\n              {...getPanelProps(tab.value)}\n            >\n              {tab.content}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  },\n);\n"]}

package/dist/styled.d.cts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type TabsVariant = "line" | "solid" | "pill";
+type TabsSize = "sm" | "md" | "lg";
+type TabsTone = "neutral" | "primary";
+interface TabItem {
+    value: string;
+    label: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+}
+interface TabsStyledProps {
+    tabs: TabItem[];
+    variant?: TabsVariant;
+    size?: TabsSize;
+    tone?: TabsTone;
+    defaultValue?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+}
+declare const TabsStyled: react.ForwardRefExoticComponent<TabsStyledProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type TabItem, type TabsSize, TabsStyled, type TabsStyledProps, type TabsTone, type TabsVariant };

package/dist/styled.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type TabsVariant = "line" | "solid" | "pill";
+type TabsSize = "sm" | "md" | "lg";
+type TabsTone = "neutral" | "primary";
+interface TabItem {
+    value: string;
+    label: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+}
+interface TabsStyledProps {
+    tabs: TabItem[];
+    variant?: TabsVariant;
+    size?: TabsSize;
+    tone?: TabsTone;
+    defaultValue?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+}
+declare const TabsStyled: react.ForwardRefExoticComponent<TabsStyledProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type TabItem, type TabsSize, TabsStyled, type TabsStyledProps, type TabsTone, type TabsVariant };

package/dist/styled.js

@@ -0,0 +1,97 @@
+import { useTabs } from './chunk-UCRNSS7N.js';
+import { forwardRef, useRef, useState, useLayoutEffect, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function useIndicator(tabListRef, activeValue) {
+  const [style, setStyle] = useState({});
+  useIsoLayoutEffect(() => {
+    if (!tabListRef.current || activeValue === void 0) return;
+    const measure = () => {
+      const list = tabListRef.current;
+      if (!list) return;
+      const activeTab = list.querySelector(
+        `[aria-selected="true"]`
+      );
+      if (!activeTab) return;
+      const listRect = list.getBoundingClientRect();
+      const tabRect = activeTab.getBoundingClientRect();
+      const x = tabRect.left - listRect.left;
+      const w = tabRect.width;
+      setStyle({
+        ["--rtab-indicator-x"]: `${x}px`,
+        ["--rtab-indicator-width"]: `${w}px`,
+        ["--rtab-indicator-ready"]: "1"
+      });
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(tabListRef.current);
+    return () => ro.disconnect();
+  }, [activeValue, tabListRef]);
+  return style;
+}
+var TabsStyled = forwardRef(
+  function TabsStyled2({
+    tabs,
+    variant = "line",
+    size = "md",
+    tone = "neutral",
+    defaultValue,
+    value,
+    onChange,
+    className
+  }, ref) {
+    const tabDefs = tabs.map((t) => ({ value: t.value, disabled: t.disabled }));
+    const resolvedDefault = defaultValue ?? tabs.find((t) => !t.disabled)?.value;
+    const { activeValue, getTabProps, getPanelProps } = useTabs({
+      tabs: tabDefs,
+      defaultValue: value === void 0 ? resolvedDefault : void 0,
+      value,
+      onChange
+    });
+    const tabListRef = useRef(null);
+    const indicatorStyle = useIndicator(tabListRef, activeValue);
+    const rootClass = ["rtab-root", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ref, className: rootClass, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: tabListRef,
+          role: "tablist",
+          className: "rtab-list",
+          "data-variant": variant,
+          "data-size": size,
+          "data-tone": tone,
+          style: indicatorStyle,
+          children: [
+            tabs.map((tab) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "rtab-tab",
+                ...getTabProps(tab.value, { disabled: tab.disabled }),
+                children: tab.label
+              },
+              tab.value
+            )),
+            (variant === "line" || variant === "solid" || variant === "pill") && /* @__PURE__ */ jsx("span", { className: "rtab-indicator", "aria-hidden": "true" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "rtab-panels", children: tabs.map((tab) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "rtab-panel",
+          ...getPanelProps(tab.value),
+          children: tab.content
+        },
+        tab.value
+      )) })
+    ] });
+  }
+);
+
+export { TabsStyled };
+//# sourceMappingURL=styled.js.map
+//# sourceMappingURL=styled.js.map

package/dist/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styled/TabsStyled.tsx"],"names":["TabsStyled"],"mappings":"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","file":"styled.js","sourcesContent":["import {\n  type CSSProperties,\n  type ReactNode,\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useTabs } from \"../useTabs\";\n\nexport type TabsVariant = \"line\" | \"solid\" | \"pill\";\nexport type TabsSize = \"sm\" | \"md\" | \"lg\";\nexport type TabsTone = \"neutral\" | \"primary\";\n\nexport interface TabItem {\n  value: string;\n  label: ReactNode;\n  content: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface TabsStyledProps {\n  tabs: TabItem[];\n  variant?: TabsVariant;\n  size?: TabsSize;\n  tone?: TabsTone;\n  defaultValue?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  className?: string;\n}\n\n// Run layout effects on the client; fall back to a no-op effect on the server.\nconst useIsoLayoutEffect =\n  typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n\nfunction useIndicator(\n  tabListRef: React.RefObject<HTMLDivElement | null>,\n  activeValue: string | undefined,\n) {\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  useIsoLayoutEffect(() => {\n    if (!tabListRef.current || activeValue === undefined) return;\n\n    const measure = () => {\n      const list = tabListRef.current;\n      if (!list) return;\n      const activeTab = list.querySelector<HTMLElement>(\n        `[aria-selected=\"true\"]`,\n      );\n      if (!activeTab) return;\n\n      const listRect = list.getBoundingClientRect();\n      const tabRect = activeTab.getBoundingClientRect();\n      const x = tabRect.left - listRect.left;\n      const w = tabRect.width;\n\n      setStyle({\n        [\"--rtab-indicator-x\" as string]: `${x}px`,\n        [\"--rtab-indicator-width\" as string]: `${w}px`,\n        [\"--rtab-indicator-ready\" as string]: \"1\",\n      });\n    };\n\n    measure();\n\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(measure);\n    ro.observe(tabListRef.current);\n    return () => ro.disconnect();\n  }, [activeValue, tabListRef]);\n\n  return style;\n}\n\nexport const TabsStyled = forwardRef<HTMLDivElement, TabsStyledProps>(\n  function TabsStyled(\n    {\n      tabs,\n      variant = \"line\",\n      size = \"md\",\n      tone = \"neutral\",\n      defaultValue,\n      value,\n      onChange,\n      className,\n    },\n    ref,\n  ) {\n    const tabDefs = tabs.map((t) => ({ value: t.value, disabled: t.disabled }));\n\n    const resolvedDefault =\n      defaultValue ?? tabs.find((t) => !t.disabled)?.value;\n\n    const { activeValue, getTabProps, getPanelProps } = useTabs({\n      tabs: tabDefs,\n      defaultValue: value === undefined ? resolvedDefault : undefined,\n      value,\n      onChange,\n    });\n\n    const tabListRef = useRef<HTMLDivElement>(null);\n    const indicatorStyle = useIndicator(tabListRef, activeValue);\n\n    const rootClass = [\"rtab-root\", className].filter(Boolean).join(\" \");\n\n    return (\n      <div ref={ref} className={rootClass}>\n        <div\n          ref={tabListRef}\n          role=\"tablist\"\n          className=\"rtab-list\"\n          data-variant={variant}\n          data-size={size}\n          data-tone={tone}\n          style={indicatorStyle}\n        >\n          {tabs.map((tab) => (\n            <button\n              key={tab.value}\n              className=\"rtab-tab\"\n              {...getTabProps(tab.value, { disabled: tab.disabled })}\n            >\n              {tab.label}\n            </button>\n          ))}\n          {(variant === \"line\" || variant === \"solid\" || variant === \"pill\") && (\n            <span className=\"rtab-indicator\" aria-hidden=\"true\" />\n          )}\n        </div>\n        <div className=\"rtab-panels\">\n          {tabs.map((tab) => (\n            <div\n              key={tab.value}\n              className=\"rtab-panel\"\n              {...getPanelProps(tab.value)}\n            >\n              {tab.content}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  },\n);\n"]}

package/dist/styles.css

@@ -0,0 +1,298 @@
+/* ============================================================================
+ * react-tabs — styled component
+ *
+ * Themable via CSS variables. The sliding indicator uses
+ * --rtab-indicator-x / --rtab-indicator-width set by the hook on the tablist.
+ * ========================================================================== */
+
+.rtab-root {
+  --rtab-fg: #18181b;
+  --rtab-fg-muted: #71717a;
+  --rtab-fg-active: #18181b;
+  --rtab-fg-inactive: #52525b;
+  --rtab-bg-tab-active: transparent;
+  --rtab-bg-indicator: #18181b;
+  --rtab-border-list: #e4e4e7;
+  --rtab-ring: rgba(99, 102, 241, 0.4);
+
+  --rtab-font-size: 0.875rem;
+  --rtab-font-weight: 500;
+  --rtab-tab-padding-y: 0.5rem;
+  --rtab-tab-padding-x: 1rem;
+
+  --rtab-duration: 300ms;
+  --rtab-duration-fast: 160ms;
+  --rtab-ease: cubic-bezier(0.32, 0.72, 0, 1);
+  --rtab-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  display: flex;
+  flex-direction: column;
+  font-family: inherit;
+  color: var(--rtab-fg);
+}
+
+/* ============================================================================
+ * Tab list
+ * ========================================================================== */
+.rtab-list {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  isolation: isolate;
+}
+
+/* ============================================================================
+ * Sliding indicator
+ * ========================================================================== */
+.rtab-indicator {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 0;
+  width: var(--rtab-indicator-width, 0px);
+  transform: translateX(var(--rtab-indicator-x, 0px));
+  transition:
+    transform var(--rtab-duration) var(--rtab-ease-spring),
+    width var(--rtab-duration) var(--rtab-ease-spring),
+    background-color var(--rtab-duration-fast) var(--rtab-ease);
+}
+
+/* Hide indicator on first paint — before the layout effect measures. */
+.rtab-list:not([style*="--rtab-indicator-ready: 1"]) .rtab-indicator {
+  opacity: 0;
+}
+
+/* ============================================================================
+ * Tab buttons
+ * ========================================================================== */
+.rtab-tab {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: var(--rtab-tab-padding-y) var(--rtab-tab-padding-x);
+  font: inherit;
+  font-size: var(--rtab-font-size);
+  font-weight: var(--rtab-font-weight);
+  line-height: 1.2;
+  color: var(--rtab-fg-inactive);
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+  transition:
+    color var(--rtab-duration-fast) var(--rtab-ease),
+    background-color var(--rtab-duration-fast) var(--rtab-ease);
+}
+
+.rtab-tab[aria-selected="true"] {
+  color: var(--rtab-fg-active);
+  background: var(--rtab-bg-tab-active);
+}
+
+.rtab-tab:hover:not(:disabled):not([aria-selected="true"]) {
+  color: var(--rtab-fg);
+}
+
+.rtab-tab:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.rtab-tab:focus-visible {
+  box-shadow: 0 0 0 2px var(--rtab-ring);
+  border-radius: 4px;
+}
+
+/* ============================================================================
+ * Tab panels
+ * ========================================================================== */
+.rtab-panels {
+  flex: 1;
+}
+
+.rtab-panel {
+  outline: none;
+}
+
+.rtab-panel[hidden] {
+  display: none;
+}
+
+/* ============================================================================
+ * Variant — line (default)
+ * ========================================================================== */
+.rtab-list[data-variant="line"] {
+  border-bottom: 1px solid var(--rtab-border-list);
+}
+
+.rtab-list[data-variant="line"] .rtab-tab {
+  border-radius: 0;
+  padding-bottom: calc(var(--rtab-tab-padding-y) + 2px);
+}
+
+.rtab-list[data-variant="line"] .rtab-indicator {
+  height: 2px;
+  background: var(--rtab-bg-indicator);
+  border-radius: 2px 2px 0 0;
+  bottom: -1px;
+}
+
+/* ============================================================================
+ * Variant — solid
+ * ========================================================================== */
+.rtab-list[data-variant="solid"] {
+  background: #f4f4f5;
+  border-radius: 8px;
+  padding: 3px;
+  gap: 2px;
+}
+
+.rtab-list[data-variant="solid"] .rtab-tab {
+  border-radius: 6px;
+}
+
+.rtab-list[data-variant="solid"] .rtab-tab[aria-selected="true"] {
+  color: var(--rtab-fg-active);
+}
+
+.rtab-list[data-variant="solid"] .rtab-indicator {
+  top: 3px;
+  bottom: 3px;
+  height: auto;
+  background: #ffffff;
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+/* ============================================================================
+ * Variant — pill
+ * ========================================================================== */
+.rtab-list[data-variant="pill"] {
+  background: #f4f4f5;
+  border-radius: 999px;
+  padding: 3px;
+  gap: 2px;
+}
+
+.rtab-list[data-variant="pill"] .rtab-tab {
+  border-radius: 999px;
+}
+
+.rtab-list[data-variant="pill"] .rtab-tab[aria-selected="true"] {
+  color: var(--rtab-fg-active);
+}
+
+.rtab-list[data-variant="pill"] .rtab-indicator {
+  top: 3px;
+  bottom: 3px;
+  height: auto;
+  background: #ffffff;
+  border-radius: 999px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+/* ============================================================================
+ * Sizes
+ * ========================================================================== */
+.rtab-list[data-size="sm"] {
+  --rtab-tab-padding-y: 0.3rem;
+  --rtab-tab-padding-x: 0.75rem;
+  --rtab-font-size: 0.8rem;
+}
+
+.rtab-list[data-size="lg"] {
+  --rtab-tab-padding-y: 0.65rem;
+  --rtab-tab-padding-x: 1.25rem;
+  --rtab-font-size: 0.95rem;
+}
+
+/* ============================================================================
+ * Tones — doubled selector for theme-override resilience
+ * ========================================================================== */
+.rtab-list[data-tone="primary"][data-tone] {
+  --rtab-bg-indicator: #6366f1;
+  --rtab-ring: rgba(99, 102, 241, 0.4);
+}
+
+.rtab-list[data-tone="primary"][data-tone][data-variant="solid"] .rtab-indicator,
+.rtab-list[data-tone="primary"][data-tone][data-variant="pill"] .rtab-indicator {
+  background: #6366f1;
+  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.45);
+}
+
+.rtab-list[data-tone="primary"][data-tone][data-variant="solid"] .rtab-tab[aria-selected="true"],
+.rtab-list[data-tone="primary"][data-tone][data-variant="pill"] .rtab-tab[aria-selected="true"] {
+  color: #ffffff;
+}
+
+/* ============================================================================
+ * Dark mode (explicit override — set data-rtab-theme="dark" on a wrapper,
+ * or rely on the page root having data-theme="dark")
+ * ========================================================================== */
+
+[data-theme="dark"] .rtab-root,
+[data-rtab-theme="dark"] .rtab-root {
+  --rtab-fg: #fafafa;
+  --rtab-fg-muted: #a1a1aa;
+  --rtab-fg-active: #fafafa;
+  --rtab-fg-inactive: #a1a1aa;
+  --rtab-border-list: #3f3f46;
+  --rtab-bg-indicator: #fafafa;
+  --rtab-ring: rgba(129, 140, 248, 0.5);
+}
+
+[data-theme="dark"] .rtab-list[data-variant="solid"],
+[data-rtab-theme="dark"] .rtab-list[data-variant="solid"],
+[data-theme="dark"] .rtab-list[data-variant="pill"],
+[data-rtab-theme="dark"] .rtab-list[data-variant="pill"] {
+  background: #27272a;
+}
+
+[data-theme="dark"] .rtab-list[data-variant="solid"] .rtab-indicator,
+[data-rtab-theme="dark"] .rtab-list[data-variant="solid"] .rtab-indicator,
+[data-theme="dark"] .rtab-list[data-variant="pill"] .rtab-indicator,
+[data-rtab-theme="dark"] .rtab-list[data-variant="pill"] .rtab-indicator {
+  background: #3f3f46;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+[data-theme="dark"] .rtab-list[data-tone="primary"][data-tone][data-variant="solid"] .rtab-indicator,
+[data-theme="dark"] .rtab-list[data-tone="primary"][data-tone][data-variant="pill"] .rtab-indicator,
+[data-rtab-theme="dark"] .rtab-list[data-tone="primary"][data-tone][data-variant="solid"] .rtab-indicator,
+[data-rtab-theme="dark"] .rtab-list[data-tone="primary"][data-tone][data-variant="pill"] .rtab-indicator {
+  background: #6366f1;
+  box-shadow: 0 4px 14px -2px rgba(99, 102, 241, 0.5);
+}
+
+[data-theme="dark"] .rtab-list[data-tone="primary"][data-tone][data-variant="solid"] .rtab-tab[aria-selected="true"],
+[data-theme="dark"] .rtab-list[data-tone="primary"][data-tone][data-variant="pill"] .rtab-tab[aria-selected="true"],
+[data-rtab-theme="dark"] .rtab-list[data-tone="primary"][data-tone][data-variant="solid"] .rtab-tab[aria-selected="true"],
+[data-rtab-theme="dark"] .rtab-list[data-tone="primary"][data-tone][data-variant="pill"] .rtab-tab[aria-selected="true"] {
+  color: #ffffff;
+}
+
+[data-rtab-theme="light"] .rtab-root {
+  --rtab-fg: #18181b;
+  --rtab-fg-muted: #71717a;
+  --rtab-fg-active: #18181b;
+  --rtab-fg-inactive: #52525b;
+  --rtab-border-list: #e4e4e7;
+  --rtab-bg-indicator: #18181b;
+  --rtab-ring: rgba(99, 102, 241, 0.4);
+}
+
+/* ============================================================================
+ * Reduced motion
+ * ========================================================================== */
+@media (prefers-reduced-motion: reduce) {
+  .rtab-indicator,
+  .rtab-tab {
+    transition-duration: 0ms !important;
+  }
+}

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@mshafiqyajid/react-tabs",
+  "version": "0.0.0",
+  "description": "Headless tabs hook and styled component for React. Accessible, keyboard-friendly, animated, SSR-safe, fully typed.",
+  "keywords": [
+    "react",
+    "tabs",
+    "accessible",
+    "headless",
+    "hook",
+    "typescript"
+  ],
+  "license": "MIT",
+  "author": "Shafiq Yajid",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mshafiqyajid/packages.git",
+    "directory": "packages/react-tabs"
+  },
+  "bugs": {
+    "url": "https://github.com/mshafiqyajid/packages/issues"
+  },
+  "homepage": "https://docs.shafiqyajid.com/react/tabs/",
+  "type": "module",
+  "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"
+    },
+    "./styled": {
+      "types": "./dist/styled.d.ts",
+      "import": "./dist/styled.js",
+      "require": "./dist/styled.cjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "jsdom": "^25.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0",
+    "vitest": "^2.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}