@mshafiqyajid/react-tabs 0.1.0 → 0.2.0

package/dist/{chunk-UCRNSS7N.js → chunk-NNDW3W6L.js}

@@ -12,7 +12,14 @@ function useStableId() {
   return ref.current;
 }
 function useTabs(opts = {}) {
-  const { tabs = [], value: controlledValue, defaultValue, onChange } = opts;
+  const {
+    tabs = [],
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    activation = "automatic",
+    orientation = "horizontal"
+  } = opts;
   const listId = useStableId();
   const isControlled = controlledValue !== void 0;
   const [internalValue, setInternalValue] = useState(
@@ -20,19 +27,21 @@ function useTabs(opts = {}) {
   );
   const activeValue = isControlled ? controlledValue : internalValue;
   const tabRefs = useRef(/* @__PURE__ */ new Map());
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
   const setActiveValue = useCallback(
-    (next) => {
+    (next, reason = "programmatic") => {
       const tab = tabs.find((t) => t.value === next);
       if (tab?.disabled) return;
       if (isControlled) {
-        if (next !== controlledValue) onChange?.(next);
+        if (next !== controlledValue) onChangeRef.current?.(next, reason);
       } else {
         if (next === internalValue) return;
         setInternalValue(next);
-        onChange?.(next);
+        onChangeRef.current?.(next, reason);
       }
     },
-    [tabs, isControlled, controlledValue, internalValue, onChange]
+    [tabs, isControlled, controlledValue, internalValue]
   );
   const focusTab = useCallback((value) => {
     tabRefs.current.get(value)?.focus();
@@ -42,37 +51,34 @@ function useTabs(opts = {}) {
       const enabled = tabs.filter((t) => !t.disabled);
       if (enabled.length === 0) return;
       const currentIndex = enabled.findIndex((t) => t.value === currentValue);
+      const isForward = orientation === "vertical" ? event.key === "ArrowDown" : event.key === "ArrowRight";
+      const isBackward = orientation === "vertical" ? event.key === "ArrowUp" : event.key === "ArrowLeft";
       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 (isForward) {
+        const nextIndex = (currentIndex + 1) % enabled.length;
+        nextValue = enabled[nextIndex]?.value;
+      } else if (isBackward) {
+        const prevIndex = (currentIndex - 1 + enabled.length) % enabled.length;
+        nextValue = enabled[prevIndex]?.value;
+      } else if (event.key === "Home") {
+        nextValue = enabled[0]?.value;
+      } else if (event.key === "End") {
+        nextValue = enabled[enabled.length - 1]?.value;
+      } else if (activation === "manual" && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        setActiveValue(currentValue, "keyboard");
+        return;
+      } else {
+        return;
       }
       if (nextValue === void 0 || nextValue === currentValue) return;
       event.preventDefault();
-      setActiveValue(nextValue);
       focusTab(nextValue);
+      if (activation === "automatic") {
+        setActiveValue(nextValue, "keyboard");
+      }
     },
-    [tabs, setActiveValue, focusTab]
+    [tabs, orientation, activation, setActiveValue, focusTab]
   );
   const getTabProps = useCallback(
     (value, options) => {
@@ -84,6 +90,7 @@ function useTabs(opts = {}) {
         "aria-selected": isSelected,
         "aria-controls": panelId(listId, value),
         "aria-disabled": isDisabled || void 0,
+        "data-state": isSelected ? "active" : "inactive",
         tabIndex: isSelected ? 0 : -1,
         disabled: isDisabled,
         ref: (node) => {
@@ -94,7 +101,7 @@ function useTabs(opts = {}) {
           }
         },
         onClick: () => {
-          if (!isDisabled) setActiveValue(value);
+          if (!isDisabled) setActiveValue(value, "click");
         },
         onKeyDown: handleKeyDown(value)
       };
@@ -103,11 +110,13 @@ function useTabs(opts = {}) {
   );
   const getPanelProps = useCallback(
     (value) => {
+      const isActive = activeValue === value;
       return {
         id: panelId(listId, value),
         role: "tabpanel",
         "aria-labelledby": tabId(listId, value),
-        hidden: activeValue !== value,
+        "data-state": isActive ? "active" : "inactive",
+        hidden: !isActive,
         tabIndex: 0
       };
     },
@@ -120,5 +129,5 @@ function useTabs(opts = {}) {
 }
 
 export { useTabs };
-//# sourceMappingURL=chunk-UCRNSS7N.js.map
-//# sourceMappingURL=chunk-UCRNSS7N.js.map
+//# sourceMappingURL=chunk-NNDW3W6L.js.map
+//# sourceMappingURL=chunk-NNDW3W6L.js.map

package/dist/chunk-NNDW3W6L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useTabs.ts"],"names":[],"mappings":"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","file":"chunk-NNDW3W6L.js","sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nexport type TabsActivation = \"automatic\" | \"manual\";\nexport type TabsOrientation = \"horizontal\" | \"vertical\";\nexport type TabsChangeReason = \"click\" | \"keyboard\" | \"programmatic\";\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. Optional second arg reports the trigger reason. */\n  onChange?: (value: string, reason: TabsChangeReason) => void;\n  /** \"automatic\" (default) — arrow keys move focus AND activate. \"manual\" — arrows move focus only; Enter/Space activates. */\n  activation?: TabsActivation;\n  /** Affects keyboard nav. Default \"horizontal\". */\n  orientation?: TabsOrientation;\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  \"data-state\": \"active\" | \"inactive\";\n  tabIndex: number;\n}\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  id: string;\n  role: \"tabpanel\";\n  \"aria-labelledby\": string;\n  \"data-state\": \"active\" | \"inactive\";\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 {\n    tabs = [],\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    activation = \"automatic\",\n    orientation = \"horizontal\",\n  } = 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  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n\n  const setActiveValue = useCallback(\n    (next: string, reason: TabsChangeReason = \"programmatic\") => {\n      const tab = tabs.find((t) => t.value === next);\n      if (tab?.disabled) return;\n      if (isControlled) {\n        if (next !== controlledValue) onChangeRef.current?.(next, reason);\n      } else {\n        if (next === internalValue) return;\n        setInternalValue(next);\n        onChangeRef.current?.(next, reason);\n      }\n    },\n    [tabs, isControlled, controlledValue, internalValue],\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        const isForward =\n          orientation === \"vertical\"\n            ? event.key === \"ArrowDown\"\n            : event.key === \"ArrowRight\";\n        const isBackward =\n          orientation === \"vertical\"\n            ? event.key === \"ArrowUp\"\n            : event.key === \"ArrowLeft\";\n\n        let nextValue: string | undefined;\n\n        if (isForward) {\n          const nextIndex = (currentIndex + 1) % enabled.length;\n          nextValue = enabled[nextIndex]?.value;\n        } else if (isBackward) {\n          const prevIndex = (currentIndex - 1 + enabled.length) % enabled.length;\n          nextValue = enabled[prevIndex]?.value;\n        } else if (event.key === \"Home\") {\n          nextValue = enabled[0]?.value;\n        } else if (event.key === \"End\") {\n          nextValue = enabled[enabled.length - 1]?.value;\n        } else if (\n          activation === \"manual\" &&\n          (event.key === \"Enter\" || event.key === \" \")\n        ) {\n          event.preventDefault();\n          setActiveValue(currentValue, \"keyboard\");\n          return;\n        } else {\n          return;\n        }\n\n        if (nextValue === undefined || nextValue === currentValue) return;\n        event.preventDefault();\n        focusTab(nextValue);\n        if (activation === \"automatic\") {\n          setActiveValue(nextValue, \"keyboard\");\n        }\n      },\n    [tabs, orientation, activation, 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        \"data-state\": isSelected ? \"active\" : \"inactive\",\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, \"click\");\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      const isActive = activeValue === value;\n      return {\n        id: panelId(listId, value),\n        role: \"tabpanel\",\n        \"aria-labelledby\": tabId(listId, value),\n        \"data-state\": isActive ? \"active\" : \"inactive\",\n        hidden: !isActive,\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

@@ -14,7 +14,14 @@ function useStableId() {
   return ref.current;
 }
 function useTabs(opts = {}) {
-  const { tabs = [], value: controlledValue, defaultValue, onChange } = opts;
+  const {
+    tabs = [],
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    activation = "automatic",
+    orientation = "horizontal"
+  } = opts;
   const listId = useStableId();
   const isControlled = controlledValue !== void 0;
   const [internalValue, setInternalValue] = react.useState(
@@ -22,19 +29,21 @@ function useTabs(opts = {}) {
   );
   const activeValue = isControlled ? controlledValue : internalValue;
   const tabRefs = react.useRef(/* @__PURE__ */ new Map());
+  const onChangeRef = react.useRef(onChange);
+  onChangeRef.current = onChange;
   const setActiveValue = react.useCallback(
-    (next) => {
+    (next, reason = "programmatic") => {
       const tab = tabs.find((t) => t.value === next);
       if (tab?.disabled) return;
       if (isControlled) {
-        if (next !== controlledValue) onChange?.(next);
+        if (next !== controlledValue) onChangeRef.current?.(next, reason);
       } else {
         if (next === internalValue) return;
         setInternalValue(next);
-        onChange?.(next);
+        onChangeRef.current?.(next, reason);
       }
     },
-    [tabs, isControlled, controlledValue, internalValue, onChange]
+    [tabs, isControlled, controlledValue, internalValue]
   );
   const focusTab = react.useCallback((value) => {
     tabRefs.current.get(value)?.focus();
@@ -44,37 +53,34 @@ function useTabs(opts = {}) {
       const enabled = tabs.filter((t) => !t.disabled);
       if (enabled.length === 0) return;
       const currentIndex = enabled.findIndex((t) => t.value === currentValue);
+      const isForward = orientation === "vertical" ? event.key === "ArrowDown" : event.key === "ArrowRight";
+      const isBackward = orientation === "vertical" ? event.key === "ArrowUp" : event.key === "ArrowLeft";
       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 (isForward) {
+        const nextIndex = (currentIndex + 1) % enabled.length;
+        nextValue = enabled[nextIndex]?.value;
+      } else if (isBackward) {
+        const prevIndex = (currentIndex - 1 + enabled.length) % enabled.length;
+        nextValue = enabled[prevIndex]?.value;
+      } else if (event.key === "Home") {
+        nextValue = enabled[0]?.value;
+      } else if (event.key === "End") {
+        nextValue = enabled[enabled.length - 1]?.value;
+      } else if (activation === "manual" && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        setActiveValue(currentValue, "keyboard");
+        return;
+      } else {
+        return;
       }
       if (nextValue === void 0 || nextValue === currentValue) return;
       event.preventDefault();
-      setActiveValue(nextValue);
       focusTab(nextValue);
+      if (activation === "automatic") {
+        setActiveValue(nextValue, "keyboard");
+      }
     },
-    [tabs, setActiveValue, focusTab]
+    [tabs, orientation, activation, setActiveValue, focusTab]
   );
   const getTabProps = react.useCallback(
     (value, options) => {
@@ -86,6 +92,7 @@ function useTabs(opts = {}) {
         "aria-selected": isSelected,
         "aria-controls": panelId(listId, value),
         "aria-disabled": isDisabled || void 0,
+        "data-state": isSelected ? "active" : "inactive",
         tabIndex: isSelected ? 0 : -1,
         disabled: isDisabled,
         ref: (node) => {
@@ -96,7 +103,7 @@ function useTabs(opts = {}) {
           }
         },
         onClick: () => {
-          if (!isDisabled) setActiveValue(value);
+          if (!isDisabled) setActiveValue(value, "click");
         },
         onKeyDown: handleKeyDown(value)
       };
@@ -105,11 +112,13 @@ function useTabs(opts = {}) {
   );
   const getPanelProps = react.useCallback(
     (value) => {
+      const isActive = activeValue === value;
       return {
         id: panelId(listId, value),
         role: "tabpanel",
         "aria-labelledby": tabId(listId, value),
-        hidden: activeValue !== value,
+        "data-state": isActive ? "active" : "inactive",
+        hidden: !isActive,
         tabIndex: 0
       };
     },

package/dist/index.cjs.map

@@ -1 +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"]}
+{"version":3,"sources":["../src/useTabs.ts"],"names":["useRef","useState","useCallback","useMemo"],"mappings":"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","file":"index.cjs","sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nexport type TabsActivation = \"automatic\" | \"manual\";\nexport type TabsOrientation = \"horizontal\" | \"vertical\";\nexport type TabsChangeReason = \"click\" | \"keyboard\" | \"programmatic\";\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. Optional second arg reports the trigger reason. */\n  onChange?: (value: string, reason: TabsChangeReason) => void;\n  /** \"automatic\" (default) — arrow keys move focus AND activate. \"manual\" — arrows move focus only; Enter/Space activates. */\n  activation?: TabsActivation;\n  /** Affects keyboard nav. Default \"horizontal\". */\n  orientation?: TabsOrientation;\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  \"data-state\": \"active\" | \"inactive\";\n  tabIndex: number;\n}\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  id: string;\n  role: \"tabpanel\";\n  \"aria-labelledby\": string;\n  \"data-state\": \"active\" | \"inactive\";\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 {\n    tabs = [],\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    activation = \"automatic\",\n    orientation = \"horizontal\",\n  } = 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  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n\n  const setActiveValue = useCallback(\n    (next: string, reason: TabsChangeReason = \"programmatic\") => {\n      const tab = tabs.find((t) => t.value === next);\n      if (tab?.disabled) return;\n      if (isControlled) {\n        if (next !== controlledValue) onChangeRef.current?.(next, reason);\n      } else {\n        if (next === internalValue) return;\n        setInternalValue(next);\n        onChangeRef.current?.(next, reason);\n      }\n    },\n    [tabs, isControlled, controlledValue, internalValue],\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        const isForward =\n          orientation === \"vertical\"\n            ? event.key === \"ArrowDown\"\n            : event.key === \"ArrowRight\";\n        const isBackward =\n          orientation === \"vertical\"\n            ? event.key === \"ArrowUp\"\n            : event.key === \"ArrowLeft\";\n\n        let nextValue: string | undefined;\n\n        if (isForward) {\n          const nextIndex = (currentIndex + 1) % enabled.length;\n          nextValue = enabled[nextIndex]?.value;\n        } else if (isBackward) {\n          const prevIndex = (currentIndex - 1 + enabled.length) % enabled.length;\n          nextValue = enabled[prevIndex]?.value;\n        } else if (event.key === \"Home\") {\n          nextValue = enabled[0]?.value;\n        } else if (event.key === \"End\") {\n          nextValue = enabled[enabled.length - 1]?.value;\n        } else if (\n          activation === \"manual\" &&\n          (event.key === \"Enter\" || event.key === \" \")\n        ) {\n          event.preventDefault();\n          setActiveValue(currentValue, \"keyboard\");\n          return;\n        } else {\n          return;\n        }\n\n        if (nextValue === undefined || nextValue === currentValue) return;\n        event.preventDefault();\n        focusTab(nextValue);\n        if (activation === \"automatic\") {\n          setActiveValue(nextValue, \"keyboard\");\n        }\n      },\n    [tabs, orientation, activation, 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        \"data-state\": isSelected ? \"active\" : \"inactive\",\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, \"click\");\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      const isActive = activeValue === value;\n      return {\n        id: panelId(listId, value),\n        role: \"tabpanel\",\n        \"aria-labelledby\": tabId(listId, value),\n        \"data-state\": isActive ? \"active\" : \"inactive\",\n        hidden: !isActive,\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

@@ -1,5 +1,8 @@
 import { HTMLAttributes } from 'react';
 
+type TabsActivation = "automatic" | "manual";
+type TabsOrientation = "horizontal" | "vertical";
+type TabsChangeReason = "click" | "keyboard" | "programmatic";
 interface UseTabsTab {
     value: string;
     disabled?: boolean;
@@ -11,8 +14,12 @@ interface UseTabsOptions {
     value?: string;
     /** Initial active value when uncontrolled. */
     defaultValue?: string;
-    /** Called when the active tab changes. */
-    onChange?: (value: string) => void;
+    /** Called when the active tab changes. Optional second arg reports the trigger reason. */
+    onChange?: (value: string, reason: TabsChangeReason) => void;
+    /** "automatic" (default) — arrow keys move focus AND activate. "manual" — arrows move focus only; Enter/Space activates. */
+    activation?: TabsActivation;
+    /** Affects keyboard nav. Default "horizontal". */
+    orientation?: TabsOrientation;
 }
 interface TabProps extends HTMLAttributes<HTMLButtonElement> {
     id: string;
@@ -20,12 +27,14 @@ interface TabProps extends HTMLAttributes<HTMLButtonElement> {
     "aria-selected": boolean;
     "aria-controls": string;
     "aria-disabled"?: boolean;
+    "data-state": "active" | "inactive";
     tabIndex: number;
 }
 interface PanelProps extends HTMLAttributes<HTMLDivElement> {
     id: string;
     role: "tabpanel";
     "aria-labelledby": string;
+    "data-state": "active" | "inactive";
     hidden: boolean;
 }
 interface UseTabsResult {
@@ -42,4 +51,4 @@ interface UseTabsResult {
 }
 declare function useTabs(opts?: UseTabsOptions): UseTabsResult;
 
-export { type PanelProps, type TabProps, type UseTabsOptions, type UseTabsResult, type UseTabsTab, useTabs };
+export { type PanelProps, type TabProps, type TabsActivation, type TabsChangeReason, type TabsOrientation, type UseTabsOptions, type UseTabsResult, type UseTabsTab, useTabs };

package/dist/index.d.ts

@@ -1,5 +1,8 @@
 import { HTMLAttributes } from 'react';
 
+type TabsActivation = "automatic" | "manual";
+type TabsOrientation = "horizontal" | "vertical";
+type TabsChangeReason = "click" | "keyboard" | "programmatic";
 interface UseTabsTab {
     value: string;
     disabled?: boolean;
@@ -11,8 +14,12 @@ interface UseTabsOptions {
     value?: string;
     /** Initial active value when uncontrolled. */
     defaultValue?: string;
-    /** Called when the active tab changes. */
-    onChange?: (value: string) => void;
+    /** Called when the active tab changes. Optional second arg reports the trigger reason. */
+    onChange?: (value: string, reason: TabsChangeReason) => void;
+    /** "automatic" (default) — arrow keys move focus AND activate. "manual" — arrows move focus only; Enter/Space activates. */
+    activation?: TabsActivation;
+    /** Affects keyboard nav. Default "horizontal". */
+    orientation?: TabsOrientation;
 }
 interface TabProps extends HTMLAttributes<HTMLButtonElement> {
     id: string;
@@ -20,12 +27,14 @@ interface TabProps extends HTMLAttributes<HTMLButtonElement> {
     "aria-selected": boolean;
     "aria-controls": string;
     "aria-disabled"?: boolean;
+    "data-state": "active" | "inactive";
     tabIndex: number;
 }
 interface PanelProps extends HTMLAttributes<HTMLDivElement> {
     id: string;
     role: "tabpanel";
     "aria-labelledby": string;
+    "data-state": "active" | "inactive";
     hidden: boolean;
 }
 interface UseTabsResult {
@@ -42,4 +51,4 @@ interface UseTabsResult {
 }
 declare function useTabs(opts?: UseTabsOptions): UseTabsResult;
 
-export { type PanelProps, type TabProps, type UseTabsOptions, type UseTabsResult, type UseTabsTab, useTabs };
+export { type PanelProps, type TabProps, type TabsActivation, type TabsChangeReason, type TabsOrientation, type UseTabsOptions, type UseTabsResult, type UseTabsTab, useTabs };

package/dist/index.js

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

package/dist/styled.cjs

@@ -15,7 +15,14 @@ function useStableId() {
   return ref.current;
 }
 function useTabs(opts = {}) {
-  const { tabs = [], value: controlledValue, defaultValue, onChange } = opts;
+  const {
+    tabs = [],
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    activation = "automatic",
+    orientation = "horizontal"
+  } = opts;
   const listId = useStableId();
   const isControlled = controlledValue !== void 0;
   const [internalValue, setInternalValue] = react.useState(
@@ -23,19 +30,21 @@ function useTabs(opts = {}) {
   );
   const activeValue = isControlled ? controlledValue : internalValue;
   const tabRefs = react.useRef(/* @__PURE__ */ new Map());
+  const onChangeRef = react.useRef(onChange);
+  onChangeRef.current = onChange;
   const setActiveValue = react.useCallback(
-    (next) => {
+    (next, reason = "programmatic") => {
       const tab = tabs.find((t) => t.value === next);
       if (tab?.disabled) return;
       if (isControlled) {
-        if (next !== controlledValue) onChange?.(next);
+        if (next !== controlledValue) onChangeRef.current?.(next, reason);
       } else {
         if (next === internalValue) return;
         setInternalValue(next);
-        onChange?.(next);
+        onChangeRef.current?.(next, reason);
       }
     },
-    [tabs, isControlled, controlledValue, internalValue, onChange]
+    [tabs, isControlled, controlledValue, internalValue]
   );
   const focusTab = react.useCallback((value) => {
     tabRefs.current.get(value)?.focus();
@@ -45,37 +54,34 @@ function useTabs(opts = {}) {
       const enabled = tabs.filter((t) => !t.disabled);
       if (enabled.length === 0) return;
       const currentIndex = enabled.findIndex((t) => t.value === currentValue);
+      const isForward = orientation === "vertical" ? event.key === "ArrowDown" : event.key === "ArrowRight";
+      const isBackward = orientation === "vertical" ? event.key === "ArrowUp" : event.key === "ArrowLeft";
       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 (isForward) {
+        const nextIndex = (currentIndex + 1) % enabled.length;
+        nextValue = enabled[nextIndex]?.value;
+      } else if (isBackward) {
+        const prevIndex = (currentIndex - 1 + enabled.length) % enabled.length;
+        nextValue = enabled[prevIndex]?.value;
+      } else if (event.key === "Home") {
+        nextValue = enabled[0]?.value;
+      } else if (event.key === "End") {
+        nextValue = enabled[enabled.length - 1]?.value;
+      } else if (activation === "manual" && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        setActiveValue(currentValue, "keyboard");
+        return;
+      } else {
+        return;
       }
       if (nextValue === void 0 || nextValue === currentValue) return;
       event.preventDefault();
-      setActiveValue(nextValue);
       focusTab(nextValue);
+      if (activation === "automatic") {
+        setActiveValue(nextValue, "keyboard");
+      }
     },
-    [tabs, setActiveValue, focusTab]
+    [tabs, orientation, activation, setActiveValue, focusTab]
   );
   const getTabProps = react.useCallback(
     (value, options) => {
@@ -87,6 +93,7 @@ function useTabs(opts = {}) {
         "aria-selected": isSelected,
         "aria-controls": panelId(listId, value),
         "aria-disabled": isDisabled || void 0,
+        "data-state": isSelected ? "active" : "inactive",
         tabIndex: isSelected ? 0 : -1,
         disabled: isDisabled,
         ref: (node) => {
@@ -97,7 +104,7 @@ function useTabs(opts = {}) {
           }
         },
         onClick: () => {
-          if (!isDisabled) setActiveValue(value);
+          if (!isDisabled) setActiveValue(value, "click");
         },
         onKeyDown: handleKeyDown(value)
       };
@@ -106,11 +113,13 @@ function useTabs(opts = {}) {
   );
   const getPanelProps = react.useCallback(
     (value) => {
+      const isActive = activeValue === value;
       return {
         id: panelId(listId, value),
         role: "tabpanel",
         "aria-labelledby": tabId(listId, value),
-        hidden: activeValue !== value,
+        "data-state": isActive ? "active" : "inactive",
+        hidden: !isActive,
         tabIndex: 0
       };
     },
@@ -122,7 +131,7 @@ function useTabs(opts = {}) {
   );
 }
 var useIsoLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
-function useIndicator(tabListRef, activeValue) {
+function useIndicator(tabListRef, activeValue, orientation) {
   const [style, setStyle] = react.useState({});
   useIsoLayoutEffect(() => {
     if (!tabListRef.current || activeValue === void 0) return;
@@ -135,20 +144,30 @@ function useIndicator(tabListRef, activeValue) {
       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"
-      });
+      if (orientation === "vertical") {
+        const y = tabRect.top - listRect.top;
+        const h = tabRect.height;
+        setStyle({
+          ["--rtab-indicator-y"]: `${y}px`,
+          ["--rtab-indicator-height"]: `${h}px`,
+          ["--rtab-indicator-ready"]: "1"
+        });
+      } else {
+        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]);
+  }, [activeValue, tabListRef, orientation]);
   return style;
 }
 var TabsStyled = react.forwardRef(
@@ -160,6 +179,12 @@ var TabsStyled = react.forwardRef(
     defaultValue,
     value,
     onChange,
+    activation = "automatic",
+    orientation = "horizontal",
+    lazyMount = false,
+    forceMount = false,
+    renderTab,
+    renderPanel,
     className
   }, ref) {
     const tabDefs = tabs.map((t) => ({ value: t.value, disabled: t.disabled }));
@@ -168,46 +193,68 @@ var TabsStyled = react.forwardRef(
       tabs: tabDefs,
       defaultValue: value === void 0 ? resolvedDefault : void 0,
       value,
-      onChange
+      onChange,
+      activation,
+      orientation
     });
     const tabListRef = react.useRef(null);
-    const indicatorStyle = useIndicator(tabListRef, activeValue);
+    const indicatorStyle = useIndicator(tabListRef, activeValue, orientation);
+    const activatedRef = react.useRef(/* @__PURE__ */ new Set());
+    if (activeValue !== void 0) activatedRef.current.add(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",
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: rootClass,
+        "data-orientation": orientation,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: tabListRef,
+              role: "tablist",
+              "aria-orientation": orientation,
+              className: "rtab-list",
+              "data-variant": variant,
+              "data-size": size,
+              "data-tone": tone,
+              "data-orientation": orientation,
+              style: indicatorStyle,
+              children: [
+                tabs.map((tab, index) => {
+                  const isActive = activeValue === tab.value;
+                  const isDisabled = !!tab.disabled;
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      className: "rtab-tab",
+                      ...getTabProps(tab.value, { disabled: tab.disabled }),
+                      children: renderTab ? renderTab({ tab, index, isActive, isDisabled }) : 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) => {
+            const isActive = activeValue === tab.value;
+            const shouldRender = forceMount || !lazyMount || activatedRef.current.has(tab.value);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
               {
-                className: "rtab-tab",
-                ...getTabProps(tab.value, { disabled: tab.disabled }),
-                children: tab.label
+                className: "rtab-panel",
+                ...getPanelProps(tab.value),
+                children: shouldRender ? renderPanel ? renderPanel({ tab, isActive }) : tab.content : null
               },
               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
-      )) })
-    ] });
+            );
+          }) })
+        ]
+      }
+    );
   }
 );
 

package/dist/styled.cjs.map

@@ -1 +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"]}
+{"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 HTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nexport type TabsActivation = \"automatic\" | \"manual\";\nexport type TabsOrientation = \"horizontal\" | \"vertical\";\nexport type TabsChangeReason = \"click\" | \"keyboard\" | \"programmatic\";\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. Optional second arg reports the trigger reason. */\n  onChange?: (value: string, reason: TabsChangeReason) => void;\n  /** \"automatic\" (default) — arrow keys move focus AND activate. \"manual\" — arrows move focus only; Enter/Space activates. */\n  activation?: TabsActivation;\n  /** Affects keyboard nav. Default \"horizontal\". */\n  orientation?: TabsOrientation;\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  \"data-state\": \"active\" | \"inactive\";\n  tabIndex: number;\n}\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  id: string;\n  role: \"tabpanel\";\n  \"aria-labelledby\": string;\n  \"data-state\": \"active\" | \"inactive\";\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 {\n    tabs = [],\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    activation = \"automatic\",\n    orientation = \"horizontal\",\n  } = 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  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n\n  const setActiveValue = useCallback(\n    (next: string, reason: TabsChangeReason = \"programmatic\") => {\n      const tab = tabs.find((t) => t.value === next);\n      if (tab?.disabled) return;\n      if (isControlled) {\n        if (next !== controlledValue) onChangeRef.current?.(next, reason);\n      } else {\n        if (next === internalValue) return;\n        setInternalValue(next);\n        onChangeRef.current?.(next, reason);\n      }\n    },\n    [tabs, isControlled, controlledValue, internalValue],\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        const isForward =\n          orientation === \"vertical\"\n            ? event.key === \"ArrowDown\"\n            : event.key === \"ArrowRight\";\n        const isBackward =\n          orientation === \"vertical\"\n            ? event.key === \"ArrowUp\"\n            : event.key === \"ArrowLeft\";\n\n        let nextValue: string | undefined;\n\n        if (isForward) {\n          const nextIndex = (currentIndex + 1) % enabled.length;\n          nextValue = enabled[nextIndex]?.value;\n        } else if (isBackward) {\n          const prevIndex = (currentIndex - 1 + enabled.length) % enabled.length;\n          nextValue = enabled[prevIndex]?.value;\n        } else if (event.key === \"Home\") {\n          nextValue = enabled[0]?.value;\n        } else if (event.key === \"End\") {\n          nextValue = enabled[enabled.length - 1]?.value;\n        } else if (\n          activation === \"manual\" &&\n          (event.key === \"Enter\" || event.key === \" \")\n        ) {\n          event.preventDefault();\n          setActiveValue(currentValue, \"keyboard\");\n          return;\n        } else {\n          return;\n        }\n\n        if (nextValue === undefined || nextValue === currentValue) return;\n        event.preventDefault();\n        focusTab(nextValue);\n        if (activation === \"automatic\") {\n          setActiveValue(nextValue, \"keyboard\");\n        }\n      },\n    [tabs, orientation, activation, 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        \"data-state\": isSelected ? \"active\" : \"inactive\",\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, \"click\");\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      const isActive = activeValue === value;\n      return {\n        id: panelId(listId, value),\n        role: \"tabpanel\",\n        \"aria-labelledby\": tabId(listId, value),\n        \"data-state\": isActive ? \"active\" : \"inactive\",\n        hidden: !isActive,\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 {\n  useTabs,\n  type TabsActivation,\n  type TabsChangeReason,\n  type TabsOrientation,\n} from \"../useTabs\";\n\nexport type TabsVariant = \"line\" | \"solid\" | \"pill\";\nexport type TabsSize = \"sm\" | \"md\" | \"lg\";\nexport type TabsTone = \"neutral\" | \"primary\" | \"success\" | \"danger\";\n\nexport interface TabItem {\n  value: string;\n  label: ReactNode;\n  content: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface TabsRenderTabContext {\n  tab: TabItem;\n  index: number;\n  isActive: boolean;\n  isDisabled: boolean;\n}\n\nexport interface TabsRenderPanelContext {\n  tab: TabItem;\n  isActive: 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  /** Optional second arg reports the trigger reason (\"click\" | \"keyboard\" | \"programmatic\"). */\n  onChange?: (value: string, reason: TabsChangeReason) => void;\n  /** \"automatic\" (default) — arrow keys move focus AND activate. \"manual\" — arrows move focus only. */\n  activation?: TabsActivation;\n  /** Affects keyboard nav direction. Default \"horizontal\". */\n  orientation?: TabsOrientation;\n  /** Only mount panels after they've been activated at least once. Default: false (all panels mount eagerly). */\n  lazyMount?: boolean;\n  /** Keep all panels mounted regardless of activation (useful with `lazyMount` overrides). Default: false. */\n  forceMount?: boolean;\n  /** Replace the default tab button content. The button shell (a11y, ref, key) stays owned by the component. */\n  renderTab?: (ctx: TabsRenderTabContext) => ReactNode;\n  /** Replace the default panel rendering. */\n  renderPanel?: (ctx: TabsRenderPanelContext) => ReactNode;\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  orientation: TabsOrientation,\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\n      if (orientation === \"vertical\") {\n        const y = tabRect.top - listRect.top;\n        const h = tabRect.height;\n        setStyle({\n          [\"--rtab-indicator-y\" as string]: `${y}px`,\n          [\"--rtab-indicator-height\" as string]: `${h}px`,\n          [\"--rtab-indicator-ready\" as string]: \"1\",\n        });\n      } else {\n        const x = tabRect.left - listRect.left;\n        const w = tabRect.width;\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\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, orientation]);\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      activation = \"automatic\",\n      orientation = \"horizontal\",\n      lazyMount = false,\n      forceMount = false,\n      renderTab,\n      renderPanel,\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      activation,\n      orientation,\n    });\n\n    const tabListRef = useRef<HTMLDivElement>(null);\n    const indicatorStyle = useIndicator(tabListRef, activeValue, orientation);\n\n    // Track which tabs have been activated for lazyMount.\n    const activatedRef = useRef<Set<string>>(new Set());\n    if (activeValue !== undefined) activatedRef.current.add(activeValue);\n\n    const rootClass = [\"rtab-root\", className].filter(Boolean).join(\" \");\n\n    return (\n      <div\n        ref={ref}\n        className={rootClass}\n        data-orientation={orientation}\n      >\n        <div\n          ref={tabListRef}\n          role=\"tablist\"\n          aria-orientation={orientation}\n          className=\"rtab-list\"\n          data-variant={variant}\n          data-size={size}\n          data-tone={tone}\n          data-orientation={orientation}\n          style={indicatorStyle}\n        >\n          {tabs.map((tab, index) => {\n            const isActive = activeValue === tab.value;\n            const isDisabled = !!tab.disabled;\n            return (\n              <button\n                key={tab.value}\n                className=\"rtab-tab\"\n                {...getTabProps(tab.value, { disabled: tab.disabled })}\n              >\n                {renderTab\n                  ? renderTab({ tab, index, isActive, isDisabled })\n                  : tab.label}\n              </button>\n            );\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            const isActive = activeValue === tab.value;\n            const shouldRender =\n              forceMount || !lazyMount || activatedRef.current.has(tab.value);\n            return (\n              <div\n                key={tab.value}\n                className=\"rtab-panel\"\n                {...getPanelProps(tab.value)}\n              >\n                {shouldRender\n                  ? renderPanel\n                    ? renderPanel({ tab, isActive })\n                    : tab.content\n                  : null}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  },\n);\n"]}

package/dist/styled.d.cts

@@ -1,15 +1,26 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
+import { TabsChangeReason, TabsActivation, TabsOrientation } from './index.cjs';
 
 type TabsVariant = "line" | "solid" | "pill";
 type TabsSize = "sm" | "md" | "lg";
-type TabsTone = "neutral" | "primary";
+type TabsTone = "neutral" | "primary" | "success" | "danger";
 interface TabItem {
     value: string;
     label: ReactNode;
     content: ReactNode;
     disabled?: boolean;
 }
+interface TabsRenderTabContext {
+    tab: TabItem;
+    index: number;
+    isActive: boolean;
+    isDisabled: boolean;
+}
+interface TabsRenderPanelContext {
+    tab: TabItem;
+    isActive: boolean;
+}
 interface TabsStyledProps {
     tabs: TabItem[];
     variant?: TabsVariant;
@@ -17,7 +28,20 @@ interface TabsStyledProps {
     tone?: TabsTone;
     defaultValue?: string;
     value?: string;
-    onChange?: (value: string) => void;
+    /** Optional second arg reports the trigger reason ("click" | "keyboard" | "programmatic"). */
+    onChange?: (value: string, reason: TabsChangeReason) => void;
+    /** "automatic" (default) — arrow keys move focus AND activate. "manual" — arrows move focus only. */
+    activation?: TabsActivation;
+    /** Affects keyboard nav direction. Default "horizontal". */
+    orientation?: TabsOrientation;
+    /** Only mount panels after they've been activated at least once. Default: false (all panels mount eagerly). */
+    lazyMount?: boolean;
+    /** Keep all panels mounted regardless of activation (useful with `lazyMount` overrides). Default: false. */
+    forceMount?: boolean;
+    /** Replace the default tab button content. The button shell (a11y, ref, key) stays owned by the component. */
+    renderTab?: (ctx: TabsRenderTabContext) => ReactNode;
+    /** Replace the default panel rendering. */
+    renderPanel?: (ctx: TabsRenderPanelContext) => ReactNode;
     className?: string;
 }
 declare const TabsStyled: react.ForwardRefExoticComponent<TabsStyledProps & react.RefAttributes<HTMLDivElement>>;

package/dist/styled.d.ts

@@ -1,15 +1,26 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
+import { TabsChangeReason, TabsActivation, TabsOrientation } from './index.js';
 
 type TabsVariant = "line" | "solid" | "pill";
 type TabsSize = "sm" | "md" | "lg";
-type TabsTone = "neutral" | "primary";
+type TabsTone = "neutral" | "primary" | "success" | "danger";
 interface TabItem {
     value: string;
     label: ReactNode;
     content: ReactNode;
     disabled?: boolean;
 }
+interface TabsRenderTabContext {
+    tab: TabItem;
+    index: number;
+    isActive: boolean;
+    isDisabled: boolean;
+}
+interface TabsRenderPanelContext {
+    tab: TabItem;
+    isActive: boolean;
+}
 interface TabsStyledProps {
     tabs: TabItem[];
     variant?: TabsVariant;
@@ -17,7 +28,20 @@ interface TabsStyledProps {
     tone?: TabsTone;
     defaultValue?: string;
     value?: string;
-    onChange?: (value: string) => void;
+    /** Optional second arg reports the trigger reason ("click" | "keyboard" | "programmatic"). */
+    onChange?: (value: string, reason: TabsChangeReason) => void;
+    /** "automatic" (default) — arrow keys move focus AND activate. "manual" — arrows move focus only. */
+    activation?: TabsActivation;
+    /** Affects keyboard nav direction. Default "horizontal". */
+    orientation?: TabsOrientation;
+    /** Only mount panels after they've been activated at least once. Default: false (all panels mount eagerly). */
+    lazyMount?: boolean;
+    /** Keep all panels mounted regardless of activation (useful with `lazyMount` overrides). Default: false. */
+    forceMount?: boolean;
+    /** Replace the default tab button content. The button shell (a11y, ref, key) stays owned by the component. */
+    renderTab?: (ctx: TabsRenderTabContext) => ReactNode;
+    /** Replace the default panel rendering. */
+    renderPanel?: (ctx: TabsRenderPanelContext) => ReactNode;
     className?: string;
 }
 declare const TabsStyled: react.ForwardRefExoticComponent<TabsStyledProps & react.RefAttributes<HTMLDivElement>>;

package/dist/styled.js

@@ -1,9 +1,9 @@
-import { useTabs } from './chunk-UCRNSS7N.js';
+import { useTabs } from './chunk-NNDW3W6L.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) {
+function useIndicator(tabListRef, activeValue, orientation) {
   const [style, setStyle] = useState({});
   useIsoLayoutEffect(() => {
     if (!tabListRef.current || activeValue === void 0) return;
@@ -16,20 +16,30 @@ function useIndicator(tabListRef, activeValue) {
       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"
-      });
+      if (orientation === "vertical") {
+        const y = tabRect.top - listRect.top;
+        const h = tabRect.height;
+        setStyle({
+          ["--rtab-indicator-y"]: `${y}px`,
+          ["--rtab-indicator-height"]: `${h}px`,
+          ["--rtab-indicator-ready"]: "1"
+        });
+      } else {
+        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]);
+  }, [activeValue, tabListRef, orientation]);
   return style;
 }
 var TabsStyled = forwardRef(
@@ -41,6 +51,12 @@ var TabsStyled = forwardRef(
     defaultValue,
     value,
     onChange,
+    activation = "automatic",
+    orientation = "horizontal",
+    lazyMount = false,
+    forceMount = false,
+    renderTab,
+    renderPanel,
     className
   }, ref) {
     const tabDefs = tabs.map((t) => ({ value: t.value, disabled: t.disabled }));
@@ -49,46 +65,68 @@ var TabsStyled = forwardRef(
       tabs: tabDefs,
       defaultValue: value === void 0 ? resolvedDefault : void 0,
       value,
-      onChange
+      onChange,
+      activation,
+      orientation
     });
     const tabListRef = useRef(null);
-    const indicatorStyle = useIndicator(tabListRef, activeValue);
+    const indicatorStyle = useIndicator(tabListRef, activeValue, orientation);
+    const activatedRef = useRef(/* @__PURE__ */ new Set());
+    if (activeValue !== void 0) activatedRef.current.add(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",
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: rootClass,
+        "data-orientation": orientation,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: tabListRef,
+              role: "tablist",
+              "aria-orientation": orientation,
+              className: "rtab-list",
+              "data-variant": variant,
+              "data-size": size,
+              "data-tone": tone,
+              "data-orientation": orientation,
+              style: indicatorStyle,
+              children: [
+                tabs.map((tab, index) => {
+                  const isActive = activeValue === tab.value;
+                  const isDisabled = !!tab.disabled;
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: "rtab-tab",
+                      ...getTabProps(tab.value, { disabled: tab.disabled }),
+                      children: renderTab ? renderTab({ tab, index, isActive, isDisabled }) : 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) => {
+            const isActive = activeValue === tab.value;
+            const shouldRender = forceMount || !lazyMount || activatedRef.current.has(tab.value);
+            return /* @__PURE__ */ jsx(
+              "div",
               {
-                className: "rtab-tab",
-                ...getTabProps(tab.value, { disabled: tab.disabled }),
-                children: tab.label
+                className: "rtab-panel",
+                ...getPanelProps(tab.value),
+                children: shouldRender ? renderPanel ? renderPanel({ tab, isActive }) : tab.content : null
               },
               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
-      )) })
-    ] });
+            );
+          }) })
+        ]
+      }
+    );
   }
 );
 

package/dist/styled.js.map

@@ -1 +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"]}
+{"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 {\n  useTabs,\n  type TabsActivation,\n  type TabsChangeReason,\n  type TabsOrientation,\n} from \"../useTabs\";\n\nexport type TabsVariant = \"line\" | \"solid\" | \"pill\";\nexport type TabsSize = \"sm\" | \"md\" | \"lg\";\nexport type TabsTone = \"neutral\" | \"primary\" | \"success\" | \"danger\";\n\nexport interface TabItem {\n  value: string;\n  label: ReactNode;\n  content: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface TabsRenderTabContext {\n  tab: TabItem;\n  index: number;\n  isActive: boolean;\n  isDisabled: boolean;\n}\n\nexport interface TabsRenderPanelContext {\n  tab: TabItem;\n  isActive: 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  /** Optional second arg reports the trigger reason (\"click\" | \"keyboard\" | \"programmatic\"). */\n  onChange?: (value: string, reason: TabsChangeReason) => void;\n  /** \"automatic\" (default) — arrow keys move focus AND activate. \"manual\" — arrows move focus only. */\n  activation?: TabsActivation;\n  /** Affects keyboard nav direction. Default \"horizontal\". */\n  orientation?: TabsOrientation;\n  /** Only mount panels after they've been activated at least once. Default: false (all panels mount eagerly). */\n  lazyMount?: boolean;\n  /** Keep all panels mounted regardless of activation (useful with `lazyMount` overrides). Default: false. */\n  forceMount?: boolean;\n  /** Replace the default tab button content. The button shell (a11y, ref, key) stays owned by the component. */\n  renderTab?: (ctx: TabsRenderTabContext) => ReactNode;\n  /** Replace the default panel rendering. */\n  renderPanel?: (ctx: TabsRenderPanelContext) => ReactNode;\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  orientation: TabsOrientation,\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\n      if (orientation === \"vertical\") {\n        const y = tabRect.top - listRect.top;\n        const h = tabRect.height;\n        setStyle({\n          [\"--rtab-indicator-y\" as string]: `${y}px`,\n          [\"--rtab-indicator-height\" as string]: `${h}px`,\n          [\"--rtab-indicator-ready\" as string]: \"1\",\n        });\n      } else {\n        const x = tabRect.left - listRect.left;\n        const w = tabRect.width;\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\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, orientation]);\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      activation = \"automatic\",\n      orientation = \"horizontal\",\n      lazyMount = false,\n      forceMount = false,\n      renderTab,\n      renderPanel,\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      activation,\n      orientation,\n    });\n\n    const tabListRef = useRef<HTMLDivElement>(null);\n    const indicatorStyle = useIndicator(tabListRef, activeValue, orientation);\n\n    // Track which tabs have been activated for lazyMount.\n    const activatedRef = useRef<Set<string>>(new Set());\n    if (activeValue !== undefined) activatedRef.current.add(activeValue);\n\n    const rootClass = [\"rtab-root\", className].filter(Boolean).join(\" \");\n\n    return (\n      <div\n        ref={ref}\n        className={rootClass}\n        data-orientation={orientation}\n      >\n        <div\n          ref={tabListRef}\n          role=\"tablist\"\n          aria-orientation={orientation}\n          className=\"rtab-list\"\n          data-variant={variant}\n          data-size={size}\n          data-tone={tone}\n          data-orientation={orientation}\n          style={indicatorStyle}\n        >\n          {tabs.map((tab, index) => {\n            const isActive = activeValue === tab.value;\n            const isDisabled = !!tab.disabled;\n            return (\n              <button\n                key={tab.value}\n                className=\"rtab-tab\"\n                {...getTabProps(tab.value, { disabled: tab.disabled })}\n              >\n                {renderTab\n                  ? renderTab({ tab, index, isActive, isDisabled })\n                  : tab.label}\n              </button>\n            );\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            const isActive = activeValue === tab.value;\n            const shouldRender =\n              forceMount || !lazyMount || activatedRef.current.has(tab.value);\n            return (\n              <div\n                key={tab.value}\n                className=\"rtab-panel\"\n                {...getPanelProps(tab.value)}\n              >\n                {shouldRender\n                  ? renderPanel\n                    ? renderPanel({ tab, isActive })\n                    : tab.content\n                  : null}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  },\n);\n"]}

package/dist/styles.css

@@ -296,3 +296,35 @@
     transition-duration: 0ms !important;
   }
 }
+
+/* ============================================================================
+ * 0.2.0 additions: vertical orientation, success/danger tones, data-state
+ * ========================================================================== */
+.rtab-root[data-orientation="vertical"] { display: flex; gap: 1rem; align-items: flex-start; }
+.rtab-list[data-orientation="vertical"] {
+  flex-direction: column;
+  align-items: stretch;
+  border-right: 1px solid var(--rtab-border-list);
+  border-bottom: none;
+  min-width: 160px;
+}
+.rtab-list[data-orientation="vertical"] .rtab-tab { text-align: left; justify-content: flex-start; }
+.rtab-list[data-orientation="vertical"] .rtab-indicator {
+  --rtab-indicator-x: auto;
+  --rtab-indicator-width: 2px;
+  inset-inline-start: auto;
+  inset-inline-end: -1px;
+  top: 0;
+  bottom: auto;
+  width: 2px;
+  height: var(--rtab-indicator-height, 0);
+  transform: translateY(var(--rtab-indicator-y, 0));
+}
+.rtab-root[data-orientation="vertical"] .rtab-panels { flex: 1; }
+
+/* Tones — success / danger */
+.rtab-list[data-tone="success"] { --rtab-fg-active: #166534; --rtab-bg-tab-active: #dcfce7; --rtab-bg-indicator: #16a34a; --rtab-ring: rgba(34, 197, 94, 0.45); }
+.rtab-list[data-tone="danger"]  { --rtab-fg-active: #991b1b; --rtab-bg-tab-active: #fee2e2; --rtab-bg-indicator: #dc2626; --rtab-ring: rgba(239, 68, 68, 0.45); }
+
+[data-theme="dark"] .rtab-list[data-tone="success"] { --rtab-fg-active: #bbf7d0; --rtab-bg-tab-active: #14532d; --rtab-bg-indicator: #4ade80; }
+[data-theme="dark"] .rtab-list[data-tone="danger"]  { --rtab-fg-active: #fecaca; --rtab-bg-tab-active: #7f1d1d; --rtab-bg-indicator: #f87171; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mshafiqyajid/react-tabs",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Headless tabs hook and styled component for React. Accessible, keyboard-friendly, animated, SSR-safe, fully typed.",
   "keywords": [
     "react",

package/dist/chunk-UCRNSS7N.js.map

@@ -1 +0,0 @@
-{"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"]}