@hanzogui/tabs-headless 7.0.0 → 7.3.1

package/dist/cjs/index.cjs

@@ -0,0 +1,20 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var index_exports = {};
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./useTabs.cjs"), module.exports);

package/dist/cjs/index.native.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var index_exports = {};
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./useTabs.native.js"), module.exports);
+//# sourceMappingURL=index.native.js.map

package/dist/cjs/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__copyProps","to","from","except","desc","key","call","get","enumerable","__reExport","target","mod","secondTarget","__toCommonJS","value","index_exports","module","exports","require"],"sources":["index.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, \"default\"), secondTarget && __copyProps(secondTarget, mod, \"default\"));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar index_exports = {};\nmodule.exports = __toCommonJS(index_exports);\n__reExport(index_exports, require(\"./useTabs\"), module.exports);\n//# sourceMappingURL=index.js.map\n"],"mappings":"AAAA,YAAY;;AACZ,IAAIA,SAAS,GAAGC,MAAM,CAACC,cAAc;AACrC,IAAIC,gBAAgB,GAAGF,MAAM,CAACG,wBAAwB;AACtD,IAAIC,iBAAiB,GAAGJ,MAAM,CAACK,mBAAmB;AAClD,IAAIC,YAAY,GAAGN,MAAM,CAACO,SAAS,CAACC,cAAc;AAClD,IAAIC,WAAW,GAAGA,CAACC,EAAE,EAAEC,IAAI,EAAEC,MAAM,EAAEC,IAAI,KAAK;EAC5C,IAAIF,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,IAAI,OAAOA,IAAI,KAAK,UAAU,EAAE;IAClE,KAAK,IAAIG,GAAG,IAAIV,iBAAiB,CAACO,IAAI,CAAC,EACrC,IAAI,CAACL,YAAY,CAACS,IAAI,CAACL,EAAE,EAAEI,GAAG,CAAC,IAAIA,GAAG,KAAKF,MAAM,EAC/Cb,SAAS,CAACW,EAAE,EAAEI,GAAG,EAAE;MAAEE,GAAG,EAAEA,CAAA,KAAML,IAAI,CAACG,GAAG,CAAC;MAAEG,UAAU,EAAE,EAAEJ,IAAI,GAAGX,gBAAgB,CAACS,IAAI,EAAEG,GAAG,CAAC,CAAC,IAAID,IAAI,CAACI;IAAW,CAAC,CAAC;EACxH;EACA,OAAOP,EAAE;AACX,CAAC;AACD,IAAIQ,UAAU,GAAGA,CAACC,MAAM,EAAEC,GAAG,EAAEC,YAAY,MAAMZ,WAAW,CAACU,MAAM,EAAEC,GAAG,EAAE,SAAS,CAAC,EAAEC,YAAY,IAAIZ,WAAW,CAACY,YAAY,EAAED,GAAG,EAAE,SAAS,CAAC,CAAC;AAChJ,IAAIE,YAAY,GAAIF,GAAG,IAAKX,WAAW,CAACV,SAAS,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE;EAAEwB,KAAK,EAAE;AAAK,CAAC,CAAC,EAAEH,GAAG,CAAC;AAC1F,IAAII,aAAa,GAAG,CAAC,CAAC;AACtBC,MAAM,CAACC,OAAO,GAAGJ,YAAY,CAACE,aAAa,CAAC;AAC5CN,UAAU,CAACM,aAAa,EAAEG,OAAO,CAAC,qBAAW,CAAC,EAAEF,MAAM,CAACC,OAAO,CAAC","ignoreList":[]}

package/dist/cjs/useTabs.cjs

@@ -0,0 +1,305 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var useTabs_exports = {};
+__export(useTabs_exports, {
+  TabsProvider: () => TabsProvider,
+  useTab: () => useTab,
+  useTabContent: () => useTabContent,
+  useTabs: () => useTabs,
+  useTabsContext: () => useTabsContext
+});
+module.exports = __toCommonJS(useTabs_exports);
+var import_helpers = require("@hanzogui/helpers");
+var import_use_controllable_state = require("@hanzogui/use-controllable-state");
+var import_use_direction = require("@hanzogui/use-direction");
+var React = __toESM(require("react"), 1);
+var import_react = require("react");
+function useTabs(props = {}) {
+  const {
+    value: valueProp,
+    onValueChange,
+    defaultValue = "",
+    orientation = "horizontal",
+    dir,
+    activationMode = "automatic",
+    loop = true
+  } = props;
+  const direction = (0, import_use_direction.useDirection)(dir);
+  const baseId = (0, import_react.useId)();
+  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+    prop: valueProp,
+    onChange: onValueChange,
+    defaultProp: defaultValue
+  });
+  const tabRefs = (0, import_react.useRef)(/* @__PURE__ */new Map());
+  const [tabValues, setTabValues] = (0, import_react.useState)([]);
+  const registerTab = (0, import_react.useCallback)((tabValue, element) => {
+    if (element) {
+      tabRefs.current.set(tabValue, element);
+      setTabValues(prev => prev.includes(tabValue) ? prev : [...prev, tabValue]);
+    } else {
+      tabRefs.current.delete(tabValue);
+      setTabValues(prev => prev.filter(v => v !== tabValue));
+    }
+  }, []);
+  const focusTab = (0, import_react.useCallback)(tabValue => {
+    const element = tabRefs.current.get(tabValue);
+    element?.focus();
+  }, []);
+  const getNextTab = (0, import_react.useCallback)((currentValue, direction2) => {
+    const currentIndex = tabValues.indexOf(currentValue);
+    if (currentIndex === -1) return null;
+    let nextIndex = currentIndex + direction2;
+    if (loop) {
+      nextIndex = (nextIndex + tabValues.length) % tabValues.length;
+    } else {
+      if (nextIndex < 0 || nextIndex >= tabValues.length) return null;
+    }
+    return tabValues[nextIndex] ?? null;
+  }, [tabValues, loop]);
+  const handleKeyDown = (0, import_react.useCallback)(tabValue => event => {
+    const isHorizontal = orientation === "horizontal";
+    const isRtl = direction === "rtl";
+    let nextTab = null;
+    switch (event.key) {
+      case "ArrowRight":
+        if (isHorizontal) {
+          nextTab = getNextTab(tabValue, isRtl ? -1 : 1);
+        }
+        break;
+      case "ArrowLeft":
+        if (isHorizontal) {
+          nextTab = getNextTab(tabValue, isRtl ? 1 : -1);
+        }
+        break;
+      case "ArrowDown":
+        if (!isHorizontal) {
+          nextTab = getNextTab(tabValue, 1);
+        }
+        break;
+      case "ArrowUp":
+        if (!isHorizontal) {
+          nextTab = getNextTab(tabValue, -1);
+        }
+        break;
+      case "Home":
+        nextTab = tabValues[0] ?? null;
+        break;
+      case "End":
+        nextTab = tabValues[tabValues.length - 1] ?? null;
+        break;
+      case " ":
+      case "Enter":
+        if (activationMode === "manual") {
+          setValue(tabValue);
+          event.preventDefault();
+        }
+        return;
+    }
+    if (nextTab) {
+      event.preventDefault();
+      focusTab(nextTab);
+      if (activationMode === "automatic") {
+        setValue(nextTab);
+      }
+    }
+  }, [orientation, direction, getNextTab, tabValues, activationMode, setValue, focusTab]);
+  const getTabProps = (0, import_react.useCallback)((tabValue, disabled) => {
+    const isSelected = value === tabValue;
+    const triggerId = makeTriggerId(baseId, tabValue);
+    const contentId = makeContentId(baseId, tabValue);
+    return {
+      role: "tab",
+      id: triggerId,
+      "aria-selected": isSelected,
+      "aria-controls": contentId,
+      "data-state": isSelected ? "active" : "inactive",
+      ...(disabled && {
+        "data-disabled": ""
+      }),
+      disabled,
+      tabIndex: isSelected ? 0 : -1,
+      onKeyDown: disabled ? () => {} : handleKeyDown(tabValue),
+      onClick: event => {
+        if (!disabled && !isSelected) {
+          setValue(tabValue);
+        }
+      },
+      onFocus: event => {
+        registerTab(tabValue, event.currentTarget);
+        if (!disabled && !isSelected && activationMode === "automatic") {
+          setValue(tabValue);
+        }
+      }
+    };
+  }, [value, baseId, handleKeyDown, setValue, activationMode, registerTab]);
+  const getContentProps = (0, import_react.useCallback)(tabValue => {
+    const isSelected = value === tabValue;
+    const triggerId = makeTriggerId(baseId, tabValue);
+    const contentId = makeContentId(baseId, tabValue);
+    return {
+      role: "tabpanel",
+      id: contentId,
+      "aria-labelledby": triggerId,
+      "data-state": isSelected ? "active" : "inactive",
+      "data-orientation": orientation,
+      hidden: !isSelected,
+      tabIndex: 0
+    };
+  }, [value, baseId, orientation]);
+  const contextValue = {
+    baseId,
+    value,
+    setValue,
+    orientation,
+    direction,
+    activationMode,
+    loop
+  };
+  return {
+    value,
+    setValue,
+    direction,
+    tabsProps: {
+      "data-orientation": orientation,
+      dir: direction
+    },
+    listProps: {
+      role: "tablist",
+      "aria-orientation": orientation
+    },
+    getTabProps,
+    getContentProps,
+    contextValue
+  };
+}
+const TabsContext = React.createContext(null);
+const TabsProvider = TabsContext.Provider;
+function useTabsContext() {
+  const context = React.useContext(TabsContext);
+  if (!context) {
+    throw new Error("useTabsContext must be used within a TabsProvider");
+  }
+  return context;
+}
+function useTab(props) {
+  const {
+    value: tabValue,
+    disabled,
+    onPress,
+    onKeyDown,
+    onFocus
+  } = props;
+  const context = useTabsContext();
+  const {
+    value,
+    setValue,
+    baseId,
+    activationMode,
+    orientation,
+    direction,
+    loop
+  } = context;
+  const isSelected = value === tabValue;
+  const triggerId = makeTriggerId(baseId, tabValue);
+  const contentId = makeContentId(baseId, tabValue);
+  const ref = (0, import_react.useRef)(null);
+  return {
+    isSelected,
+    tabProps: {
+      ref,
+      role: "tab",
+      id: triggerId,
+      "aria-selected": isSelected,
+      "aria-controls": contentId,
+      "data-state": isSelected ? "active" : "inactive",
+      ...(disabled && {
+        "data-disabled": ""
+      }),
+      disabled,
+      tabIndex: isSelected ? 0 : -1,
+      onKeyDown: (0, import_helpers.composeEventHandlers)(onKeyDown, event => {
+        if (disabled) return;
+        if ([" ", "Enter"].includes(event.key)) {
+          setValue(tabValue);
+          event.preventDefault();
+        }
+      }),
+      onPress: (0, import_helpers.composeEventHandlers)(onPress, () => {
+        if (!disabled && !isSelected) {
+          setValue(tabValue);
+        }
+      }),
+      onFocus: (0, import_helpers.composeEventHandlers)(onFocus, () => {
+        if (!disabled && !isSelected && activationMode === "automatic") {
+          setValue(tabValue);
+        }
+      })
+    }
+  };
+}
+function useTabContent(props) {
+  const {
+    value: tabValue,
+    forceMount
+  } = props;
+  const context = useTabsContext();
+  const {
+    value,
+    baseId,
+    orientation
+  } = context;
+  const isSelected = value === tabValue;
+  const triggerId = makeTriggerId(baseId, tabValue);
+  const contentId = makeContentId(baseId, tabValue);
+  return {
+    isSelected,
+    shouldMount: forceMount || isSelected,
+    contentProps: {
+      role: "tabpanel",
+      id: contentId,
+      "aria-labelledby": triggerId,
+      "data-state": isSelected ? "active" : "inactive",
+      "data-orientation": orientation,
+      hidden: !isSelected,
+      tabIndex: 0
+    }
+  };
+}
+function makeTriggerId(baseId, value) {
+  return `${baseId}-trigger-${value}`;
+}
+function makeContentId(baseId, value) {
+  return `${baseId}-content-${value}`;
+}

package/dist/cjs/useTabs.native.js

@@ -0,0 +1,320 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var useTabs_exports = {};
+__export(useTabs_exports, {
+  TabsProvider: () => TabsProvider,
+  useTab: () => useTab,
+  useTabContent: () => useTabContent,
+  useTabs: () => useTabs,
+  useTabsContext: () => useTabsContext
+});
+module.exports = __toCommonJS(useTabs_exports);
+var import_helpers = require("@hanzogui/helpers");
+var import_use_controllable_state = require("@hanzogui/use-controllable-state");
+var import_use_direction = require("@hanzogui/use-direction");
+var React = __toESM(require("react"), 1);
+var import_react = require("react");
+function useTabs() {
+  var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+  var {
+    value: valueProp,
+    onValueChange,
+    defaultValue = "",
+    orientation = "horizontal",
+    dir,
+    activationMode = "automatic",
+    loop = true
+  } = props;
+  var direction = (0, import_use_direction.useDirection)(dir);
+  var baseId = (0, import_react.useId)();
+  var [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+    prop: valueProp,
+    onChange: onValueChange,
+    defaultProp: defaultValue
+  });
+  var tabRefs = (0, import_react.useRef)(/* @__PURE__ */new Map());
+  var [tabValues, setTabValues] = (0, import_react.useState)([]);
+  var registerTab = (0, import_react.useCallback)(function (tabValue, element) {
+    if (element) {
+      tabRefs.current.set(tabValue, element);
+      setTabValues(function (prev) {
+        return prev.includes(tabValue) ? prev : [...prev, tabValue];
+      });
+    } else {
+      tabRefs.current.delete(tabValue);
+      setTabValues(function (prev) {
+        return prev.filter(function (v) {
+          return v !== tabValue;
+        });
+      });
+    }
+  }, []);
+  var focusTab = (0, import_react.useCallback)(function (tabValue) {
+    var element = tabRefs.current.get(tabValue);
+    element === null || element === void 0 ? void 0 : element.focus();
+  }, []);
+  var getNextTab = (0, import_react.useCallback)(function (currentValue, direction2) {
+    var currentIndex = tabValues.indexOf(currentValue);
+    if (currentIndex === -1) return null;
+    var nextIndex = currentIndex + direction2;
+    if (loop) {
+      nextIndex = (nextIndex + tabValues.length) % tabValues.length;
+    } else {
+      if (nextIndex < 0 || nextIndex >= tabValues.length) return null;
+    }
+    var _tabValues_nextIndex;
+    return (_tabValues_nextIndex = tabValues[nextIndex]) !== null && _tabValues_nextIndex !== void 0 ? _tabValues_nextIndex : null;
+  }, [tabValues, loop]);
+  var handleKeyDown = (0, import_react.useCallback)(function (tabValue) {
+    return function (event) {
+      var isHorizontal = orientation === "horizontal";
+      var isRtl = direction === "rtl";
+      var nextTab = null;
+      switch (event.key) {
+        case "ArrowRight":
+          if (isHorizontal) {
+            nextTab = getNextTab(tabValue, isRtl ? -1 : 1);
+          }
+          break;
+        case "ArrowLeft":
+          if (isHorizontal) {
+            nextTab = getNextTab(tabValue, isRtl ? 1 : -1);
+          }
+          break;
+        case "ArrowDown":
+          if (!isHorizontal) {
+            nextTab = getNextTab(tabValue, 1);
+          }
+          break;
+        case "ArrowUp":
+          if (!isHorizontal) {
+            nextTab = getNextTab(tabValue, -1);
+          }
+          break;
+        case "Home":
+          var _tabValues_;
+          nextTab = (_tabValues_ = tabValues[0]) !== null && _tabValues_ !== void 0 ? _tabValues_ : null;
+          break;
+        case "End":
+          var _tabValues_1;
+          nextTab = (_tabValues_1 = tabValues[tabValues.length - 1]) !== null && _tabValues_1 !== void 0 ? _tabValues_1 : null;
+          break;
+        case " ":
+        case "Enter":
+          if (activationMode === "manual") {
+            setValue(tabValue);
+            event.preventDefault();
+          }
+          return;
+      }
+      if (nextTab) {
+        event.preventDefault();
+        focusTab(nextTab);
+        if (activationMode === "automatic") {
+          setValue(nextTab);
+        }
+      }
+    };
+  }, [orientation, direction, getNextTab, tabValues, activationMode, setValue, focusTab]);
+  var getTabProps = (0, import_react.useCallback)(function (tabValue, disabled) {
+    var isSelected = value === tabValue;
+    var triggerId = makeTriggerId(baseId, tabValue);
+    var contentId = makeContentId(baseId, tabValue);
+    return {
+      role: "tab",
+      id: triggerId,
+      "aria-selected": isSelected,
+      "aria-controls": contentId,
+      "data-state": isSelected ? "active" : "inactive",
+      ...(disabled && {
+        "data-disabled": ""
+      }),
+      disabled,
+      tabIndex: isSelected ? 0 : -1,
+      onKeyDown: disabled ? function () {} : handleKeyDown(tabValue),
+      onClick: function (event) {
+        if (!disabled && !isSelected) {
+          setValue(tabValue);
+        }
+      },
+      onFocus: function (event) {
+        registerTab(tabValue, event.currentTarget);
+        if (!disabled && !isSelected && activationMode === "automatic") {
+          setValue(tabValue);
+        }
+      }
+    };
+  }, [value, baseId, handleKeyDown, setValue, activationMode, registerTab]);
+  var getContentProps = (0, import_react.useCallback)(function (tabValue) {
+    var isSelected = value === tabValue;
+    var triggerId = makeTriggerId(baseId, tabValue);
+    var contentId = makeContentId(baseId, tabValue);
+    return {
+      role: "tabpanel",
+      id: contentId,
+      "aria-labelledby": triggerId,
+      "data-state": isSelected ? "active" : "inactive",
+      "data-orientation": orientation,
+      hidden: !isSelected,
+      tabIndex: 0
+    };
+  }, [value, baseId, orientation]);
+  var contextValue = {
+    baseId,
+    value,
+    setValue,
+    orientation,
+    direction,
+    activationMode,
+    loop
+  };
+  return {
+    value,
+    setValue,
+    direction,
+    tabsProps: {
+      "data-orientation": orientation,
+      dir: direction
+    },
+    listProps: {
+      role: "tablist",
+      "aria-orientation": orientation
+    },
+    getTabProps,
+    getContentProps,
+    contextValue
+  };
+}
+var TabsContext = /* @__PURE__ */React.createContext(null);
+var TabsProvider = TabsContext.Provider;
+function useTabsContext() {
+  var context = React.useContext(TabsContext);
+  if (!context) {
+    throw new Error("useTabsContext must be used within a TabsProvider");
+  }
+  return context;
+}
+function useTab(props) {
+  var {
+    value: tabValue,
+    disabled,
+    onPress,
+    onKeyDown,
+    onFocus
+  } = props;
+  var context = useTabsContext();
+  var {
+    value,
+    setValue,
+    baseId,
+    activationMode,
+    orientation,
+    direction,
+    loop
+  } = context;
+  var isSelected = value === tabValue;
+  var triggerId = makeTriggerId(baseId, tabValue);
+  var contentId = makeContentId(baseId, tabValue);
+  var ref = (0, import_react.useRef)(null);
+  return {
+    isSelected,
+    tabProps: {
+      ref,
+      role: "tab",
+      id: triggerId,
+      "aria-selected": isSelected,
+      "aria-controls": contentId,
+      "data-state": isSelected ? "active" : "inactive",
+      ...(disabled && {
+        "data-disabled": ""
+      }),
+      disabled,
+      tabIndex: isSelected ? 0 : -1,
+      onKeyDown: (0, import_helpers.composeEventHandlers)(onKeyDown, function (event) {
+        if (disabled) return;
+        if ([" ", "Enter"].includes(event.key)) {
+          setValue(tabValue);
+          event.preventDefault();
+        }
+      }),
+      onPress: (0, import_helpers.composeEventHandlers)(onPress, function () {
+        if (!disabled && !isSelected) {
+          setValue(tabValue);
+        }
+      }),
+      onFocus: (0, import_helpers.composeEventHandlers)(onFocus, function () {
+        if (!disabled && !isSelected && activationMode === "automatic") {
+          setValue(tabValue);
+        }
+      })
+    }
+  };
+}
+function useTabContent(props) {
+  var {
+    value: tabValue,
+    forceMount
+  } = props;
+  var context = useTabsContext();
+  var {
+    value,
+    baseId,
+    orientation
+  } = context;
+  var isSelected = value === tabValue;
+  var triggerId = makeTriggerId(baseId, tabValue);
+  var contentId = makeContentId(baseId, tabValue);
+  return {
+    isSelected,
+    shouldMount: forceMount || isSelected,
+    contentProps: {
+      role: "tabpanel",
+      id: contentId,
+      "aria-labelledby": triggerId,
+      "data-state": isSelected ? "active" : "inactive",
+      "data-orientation": orientation,
+      hidden: !isSelected,
+      tabIndex: 0
+    }
+  };
+}
+function makeTriggerId(baseId, value) {
+  return `${baseId}-trigger-${value}`;
+}
+function makeContentId(baseId, value) {
+  return `${baseId}-content-${value}`;
+}
+//# sourceMappingURL=useTabs.native.js.map