@hanzogui/tabs 7.0.0 → 7.3.0

package/LICENSE

@@ -1,21 +1,42 @@
-MIT License
-
-Copyright (c) 2021 Radix
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+BSD 3-Clause License
+
+Copyright (c) 2026-present, Hanzo AI, Inc.
+
+Portions of this software are derived from upstream code originally licensed under
+the MIT License, with the following copyright notices retained per its terms:
+
+  Copyright (c) 2020 Nate Wienert
+  Copyright (c) 2015-present, Nicolas Gallagher.
+  Copyright (c) 2015-present, Facebook, Inc.
+  Copyright (c) 2021 Radix
+  Copyright (c) 2017 Carmelo Pullara
+  Copyright (c) 2018 Framer B.V.
+  Copyright (c) 2022 WorkOS
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors
+   may be used to endorse or promote products derived from this software
+   without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
+LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.

package/dist/cjs/StyledContext.cjs

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var StyledContext_exports = {};
+__export(StyledContext_exports, {
+  TabsProvider: () => TabsProvider,
+  useTabsContext: () => useTabsContext
+});
+module.exports = __toCommonJS(StyledContext_exports);
+var import_core = require("@hanzogui/core");
+const {
+  Provider: TabsProvider,
+  useStyledContext: useTabsContext
+} = (0, import_core.createStyledContext)();

package/dist/cjs/StyledContext.native.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var StyledContext_exports = {};
+__export(StyledContext_exports, {
+  TabsProvider: () => TabsProvider,
+  useTabsContext: () => useTabsContext
+});
+module.exports = __toCommonJS(StyledContext_exports);
+var import_core = require("@hanzogui/core");
+var {
+  Provider: TabsProvider,
+  useStyledContext: useTabsContext
+} = (0, import_core.createStyledContext)();
+//# sourceMappingURL=StyledContext.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","StyledContext_exports","__export","TabsProvider","useTabsContext","module","exports","import_core","require"],"sources":["../../src/StyledContext.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,qBAAA;AAAAC,QAAA,CAAAD,qBAAA;EAAAE,YAAA,EAAAA,CAAA,KAAAA,YAAA;EAAAC,cAAA,EAAAA,CAAA,KAAAA;AAAA;AACAC,MAAA,CAAAC,OAAA,GAAAV,YAAoC,CAAAK,qBAAA;AAgB7B,IAAAM,WAAQ,GAAUC,OAAA,iBAAc","ignoreList":[]}

package/dist/cjs/Tabs.cjs

@@ -0,0 +1,83 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Tabs_exports = {};
+__export(Tabs_exports, {
+  DefaultTabsContentFrame: () => DefaultTabsContentFrame,
+  DefaultTabsFrame: () => DefaultTabsFrame,
+  DefaultTabsTabFrame: () => DefaultTabsTabFrame
+});
+module.exports = __toCommonJS(Tabs_exports);
+var import_core = require("@hanzogui/core");
+var import_get_button_sized = require("@hanzogui/get-button-sized");
+var import_stacks = require("@hanzogui/stacks");
+const TABS_NAME = "Tabs";
+const DefaultTabsFrame = (0, import_core.styled)(import_stacks.SizableStack, {
+  name: TABS_NAME
+});
+const TRIGGER_NAME = "TabsTrigger";
+const DefaultTabsTabFrame = (0, import_core.styled)(import_core.View, {
+  name: TRIGGER_NAME,
+  role: "tab",
+  variants: {
+    size: {
+      "...size": import_get_button_sized.getButtonSized
+    },
+    disabled: {
+      true: {
+        pointerEvents: "none"
+      }
+    },
+    unstyled: {
+      false: {
+        borderWidth: 0,
+        backgroundColor: "$background",
+        userSelect: "none",
+        justifyContent: "center",
+        alignItems: "center",
+        flexWrap: "nowrap",
+        flexDirection: "row",
+        cursor: "pointer",
+        pressStyle: {
+          backgroundColor: "$backgroundPress"
+        },
+        focusVisibleStyle: {
+          outlineColor: "$outlineColor",
+          outlineWidth: 2,
+          outlineStyle: "solid",
+          zIndex: 10
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.GUI_HEADLESS === "1"
+  }
+}, {
+  accept: {
+    activeStyle: "style"
+  }
+});
+const CONTENT_NAME = "TabsContent";
+const DefaultTabsContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
+  name: CONTENT_NAME
+});

package/dist/cjs/Tabs.native.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Tabs_exports = {};
+__export(Tabs_exports, {
+  DefaultTabsContentFrame: () => DefaultTabsContentFrame,
+  DefaultTabsFrame: () => DefaultTabsFrame,
+  DefaultTabsTabFrame: () => DefaultTabsTabFrame
+});
+module.exports = __toCommonJS(Tabs_exports);
+var import_core = require("@hanzogui/core");
+var import_get_button_sized = require("@hanzogui/get-button-sized");
+var import_stacks = require("@hanzogui/stacks");
+var TABS_NAME = "Tabs";
+var DefaultTabsFrame = (0, import_core.styled)(import_stacks.SizableStack, {
+  name: TABS_NAME
+});
+var TRIGGER_NAME = "TabsTrigger";
+var DefaultTabsTabFrame = (0, import_core.styled)(import_core.View, {
+  name: TRIGGER_NAME,
+  role: "tab",
+  variants: {
+    size: {
+      "...size": import_get_button_sized.getButtonSized
+    },
+    disabled: {
+      true: {
+        pointerEvents: "none"
+      }
+    },
+    unstyled: {
+      false: {
+        borderWidth: 0,
+        backgroundColor: "$background",
+        userSelect: "none",
+        justifyContent: "center",
+        alignItems: "center",
+        flexWrap: "nowrap",
+        flexDirection: "row",
+        cursor: "pointer",
+        pressStyle: {
+          backgroundColor: "$backgroundPress"
+        },
+        focusVisibleStyle: {
+          outlineColor: "$outlineColor",
+          outlineWidth: 2,
+          outlineStyle: "solid",
+          zIndex: 10
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.GUI_HEADLESS === "1"
+  }
+}, {
+  accept: {
+    activeStyle: "style"
+  }
+});
+var CONTENT_NAME = "TabsContent";
+var DefaultTabsContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
+  name: CONTENT_NAME
+});
+//# sourceMappingURL=Tabs.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Tabs_exports","__export","DefaultTabsContentFrame","DefaultTabsFrame","DefaultTabsTabFrame","module","exports","import_core","require","import_get_button_sized","import_stacks","TABS_NAME","styled","SizableStack","name","TRIGGER_NAME","View","role","variants","size","getButtonSized","disabled","true","pointerEvents","unstyled","false","borderWidth","backgroundColor","userSelect","justifyContent","alignItems","flexWrap","flexDirection","cursor","pressStyle","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","zIndex","defaultVariants","process","env","GUI_HEADLESS","accept","activeStyle","CONTENT_NAME","ThemeableStack"],"sources":["../../src/Tabs.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,YAAA;AAAAC,QAAA,CAAAD,YAAA;EAAAE,uBAAA,EAAAA,CAAA,KAAAA,uBAAA;EAAAC,gBAAA,EAAAA,CAAA,KAAAA,gBAAA;EAAAC,mBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAX,YAA6B,CAAAK,YAAA;AAC7B,IAAAO,WAAA,GAAAC,OAAA,iBAA+B;AAC/B,IAAAC,uBAA6C,GAAAD,OAAA;AAE7C,IAAAE,aAAM,GAAYF,OAAA;AACX,IAAAG,SAAM;AAAwC,IACnDR,gBAAM,OAAAI,WAAA,CAAAK,MAAA,EAAAF,aAAA,CAAAG,YAAA;EACPC,IAAA,EAAAH;AAED;AAEO,IAAAI,YAAM,gBAAsB;AAAA,IACjCX,mBAAA,OAAAG,WAAA,CAAAK,MAAA,EAAAL,WAAA,CAAAS,IAAA;EACAF,IAAA,EAAAC,YAAA;EAAAE,IACE,OAAM;EAAAC,QACA;IAENC,IAAA;MACE,SAAM,EAAAV,uBAAA,CAAAW;IAAA;IACOC,QACb;MAEAC,IAAA;QACEC,aAAM;MAAA;IACW;IACjBC,QACF;MAEAC,KAAA;QACEC,WAAO;QAAAC,eACQ;QAAAC,UACb;QAAiBC,cACL;QAAAC,UACZ,UAAgB;QAAAC,QAChB,UAAY;QAAAC,aACF;QAAAC,MACV,WAAe;QAAAC,UACP;UAERP,eAAY;QAAA;QACOQ,iBACnB;UAEAC,YAAA,iBAAmB;UAAAC,YACjB;UAAcC,YACd,SAAc;UAAAC,MACd;QAAc;MACN;IACV;EACF;EACFC,eACF;IAEAhB,QAAA,EAAAiB,OAAiB,CAAAC,GAAA,CAAAC,YAAA;EAAA;AACwB;EAE3CC,MAAA;IACAC,WAAA;EAAA;AACU;AACO,IACfC,YAAA;AAAA,IACF5C,uBAAA,OAAAK,WAAA,CAAAK,MAAA,EAAAF,aAAA,CAAAqC,cAAA;EACFjC,IAAA,EAAAgC;AAEA","ignoreList":[]}

package/dist/cjs/createTabs.cjs

@@ -0,0 +1,293 @@
+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 createTabs_exports = {};
+__export(createTabs_exports, {
+  createTabs: () => createTabs
+});
+module.exports = __toCommonJS(createTabs_exports);
+var import_compose_refs = require("@hanzogui/compose-refs");
+var import_constants = require("@hanzogui/constants");
+var import_group = require("@hanzogui/group");
+var import_helpers = require("@hanzogui/helpers");
+var import_roving_focus = require("@hanzogui/roving-focus");
+var import_sizable_context = require("@hanzogui/sizable-context");
+var import_use_controllable_state = require("@hanzogui/use-controllable-state");
+var import_use_direction = require("@hanzogui/use-direction");
+var import_web = require("@hanzogui/web");
+var React = __toESM(require("react"), 1);
+var import_StyledContext = require("./StyledContext.cjs");
+var import_Tabs = require("./Tabs.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function createTabs(createProps) {
+  const {
+    ContentFrame = import_Tabs.DefaultTabsContentFrame,
+    TabFrame = import_Tabs.DefaultTabsTabFrame,
+    TabsFrame = import_Tabs.DefaultTabsFrame
+  } = createProps;
+  const TABS_CONTEXT = "TabsContext";
+  const TAB_LIST_NAME = "TabsList";
+  const TabsList = React.forwardRef((props, forwardedRef) => {
+    const {
+      __scopeTabs,
+      loop = true,
+      children,
+      ...listProps
+    } = props;
+    const context = (0, import_StyledContext.useTabsContext)(__scopeTabs);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {
+      __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,
+      orientation: context.orientation,
+      dir: context.dir,
+      loop,
+      asChild: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_group.Group, {
+        role: "tablist",
+        componentName: TAB_LIST_NAME,
+        "aria-orientation": context.orientation,
+        ref: forwardedRef,
+        orientation: context.orientation,
+        ...listProps,
+        children
+      })
+    });
+  });
+  TabsList.displayName = TAB_LIST_NAME;
+  const TRIGGER_NAME = "TabsTrigger";
+  const TabsTrigger = TabFrame.styleable((props, forwardedRef) => {
+    const {
+      __scopeTabs,
+      value,
+      disabled = false,
+      onInteraction,
+      activeStyle,
+      activeTheme,
+      unstyled = false,
+      ...triggerProps
+    } = props;
+    const context = (0, import_StyledContext.useTabsContext)(__scopeTabs);
+    const triggerId = makeTriggerId(context.baseId, value);
+    const contentId = makeContentId(context.baseId, value);
+    const isSelected = value === context.value;
+    const [layout, setLayout] = React.useState(null);
+    const triggerRef = React.useRef(null);
+    const groupItemProps = (0, import_group.useGroupItem)({
+      disabled: !!disabled
+    });
+    React.useEffect(() => {
+      context.registerTrigger();
+      return () => context.unregisterTrigger();
+    }, []);
+    React.useEffect(() => {
+      if (!triggerRef.current || !import_constants.isWeb) return;
+      const el = triggerRef.current;
+      function getTriggerSize() {
+        if (!el) return;
+        setLayout({
+          width: el.offsetWidth,
+          height: el.offsetHeight,
+          x: el.offsetLeft,
+          y: el.offsetTop
+        });
+      }
+      getTriggerSize();
+      const observer = new ResizeObserver(getTriggerSize);
+      observer.observe(el);
+      return () => {
+        observer.disconnect();
+      };
+    }, [context.triggersCount]);
+    React.useEffect(() => {
+      if (isSelected && layout) {
+        onInteraction?.("select", layout);
+      }
+    }, [isSelected, value, layout]);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
+      __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,
+      asChild: true,
+      focusable: !disabled,
+      active: isSelected,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabFrame, {
+        ...(!import_constants.isWeb && {
+          onLayout: event => {
+            setLayout(event.nativeEvent.layout);
+          }
+        }),
+        onMouseEnter: (0, import_helpers.composeEventHandlers)(props.onMouseEnter, () => {
+          if (layout) {
+            onInteraction?.("hover", layout);
+          }
+        }),
+        onMouseLeave: (0, import_helpers.composeEventHandlers)(props.onMouseLeave, () => {
+          onInteraction?.("hover", null);
+        }),
+        role: "tab",
+        "aria-selected": isSelected,
+        "aria-controls": contentId,
+        "data-state": isSelected ? "active" : "inactive",
+        "data-disabled": disabled ? "" : void 0,
+        id: triggerId,
+        theme: activeTheme ?? null,
+        unstyled,
+        ...(!unstyled && {
+          size: context.size
+        }),
+        ...(isSelected && {
+          ...(!unstyled && !activeStyle && {
+            backgroundColor: "$backgroundActive"
+          }),
+          ...activeStyle
+        }),
+        ...groupItemProps,
+        disabled: disabled ?? groupItemProps.disabled,
+        ...triggerProps,
+        ref: (0, import_compose_refs.composeRefs)(forwardedRef, triggerRef),
+        onPress: (0, import_helpers.composeEventHandlers)(props.onPress ?? void 0, event => {
+          const webChecks = !import_constants.isWeb || event.button === 0 && event.ctrlKey === false;
+          if (!disabled && !isSelected && webChecks) {
+            context.onChange(value);
+          }
+        }),
+        ...(import_constants.isWeb && {
+          onKeyDown: (0, import_helpers.composeEventHandlers)(props.onKeyDown, event => {
+            if ([" ", "Enter"].includes(event.key)) {
+              context.onChange(value);
+              event.preventDefault();
+            }
+          }),
+          onFocus: (0, import_helpers.composeEventHandlers)(props.onFocus, event => {
+            if (layout) {
+              onInteraction?.("focus", layout);
+            }
+            const isAutomaticActivation = context.activationMode !== "manual";
+            if (!isSelected && !disabled && isAutomaticActivation) {
+              context.onChange(value);
+            }
+          }),
+          onBlur: (0, import_helpers.composeEventHandlers)(props.onBlur, () => {
+            onInteraction?.("focus", null);
+          })
+        })
+      })
+    });
+  });
+  TabsTrigger.displayName = TRIGGER_NAME;
+  const TabsContent = ContentFrame.styleable(function TabsContent2(props, forwardedRef) {
+    const {
+      __scopeTabs,
+      value,
+      forceMount,
+      children,
+      ...contentProps
+    } = props;
+    const context = (0, import_StyledContext.useTabsContext)(__scopeTabs);
+    const isSelected = value === context.value;
+    const show = forceMount || isSelected;
+    const triggerId = makeTriggerId(context.baseId, value);
+    const contentId = makeContentId(context.baseId, value);
+    if (!show) {
+      return null;
+    }
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ContentFrame, {
+      "data-state": isSelected ? "active" : "inactive",
+      "data-orientation": context.orientation,
+      role: "tabpanel",
+      "aria-labelledby": triggerId,
+      hidden: !show,
+      id: contentId,
+      tabIndex: 0,
+      ...contentProps,
+      ref: forwardedRef,
+      children
+    }, value);
+  });
+  const TabsComponent = TabsFrame.styleable(function Tabs(props, forwardedRef) {
+    const {
+      __scopeTabs,
+      value: valueProp,
+      onValueChange,
+      defaultValue,
+      orientation = "horizontal",
+      dir,
+      activationMode = "manual",
+      size = "$true",
+      ...tabsProps
+    } = props;
+    const direction = (0, import_use_direction.useDirection)(dir);
+    const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+      prop: valueProp,
+      onChange: onValueChange,
+      defaultProp: defaultValue ?? ""
+    });
+    const [triggersCount, setTriggersCount] = React.useState(0);
+    const registerTrigger = (0, import_web.useEvent)(() => setTriggersCount(v => v + 1));
+    const unregisterTrigger = (0, import_web.useEvent)(() => setTriggersCount(v => v - 1));
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sizable_context.SizableContext.Provider, {
+      size,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_StyledContext.TabsProvider, {
+        scope: __scopeTabs,
+        baseId: React.useId(),
+        value,
+        onChange: setValue,
+        orientation,
+        dir: direction,
+        activationMode,
+        size,
+        registerTrigger,
+        triggersCount,
+        unregisterTrigger,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsFrame, {
+          direction,
+          "data-orientation": orientation,
+          ...tabsProps,
+          ref: forwardedRef
+        })
+      })
+    });
+  });
+  return (0, import_helpers.withStaticProperties)(TabsComponent, {
+    List: TabsList,
+    /**
+     * @deprecated Use Tabs.Tab instead
+     */
+    Trigger: TabsTrigger,
+    Tab: TabsTrigger,
+    Content: TabsContent
+  });
+}
+function makeTriggerId(baseId, value) {
+  return `${baseId}-trigger-${value}`;
+}
+function makeContentId(baseId, value) {
+  return `${baseId}-content-${value}`;
+}