@mshafiqyajid/react-tabs 0.1.0 → 0.3.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