@tamagui/tabs 1.110.5 → 1.111.0

package/dist/esm/Tabs.native.mjs

@@ -0,0 +1,289 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { composeRefs } from "@tamagui/compose-refs";
+import { isWeb } from "@tamagui/constants";
+import { getButtonSized } from "@tamagui/get-button-sized";
+import { Group, useGroupItem } from "@tamagui/group";
+import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
+import { RovingFocusGroup } from "@tamagui/roving-focus";
+import { SizableStack, ThemeableStack } from "@tamagui/stacks";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import { useDirection } from "@tamagui/use-direction";
+import { Theme, createStyledContext, styled, useEvent } from "@tamagui/web";
+import * as React from "react";
+var TABS_CONTEXT = "TabsContext",
+  TAB_LIST_NAME = "TabsList",
+  TabsList = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+    var {
+        __scopeTabs,
+        loop = !0,
+        children,
+        ...listProps
+      } = props,
+      context = useTabsContext(__scopeTabs);
+    return /* @__PURE__ */_jsx(RovingFocusGroup, {
+      __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,
+      orientation: context.orientation,
+      dir: context.dir,
+      loop,
+      asChild: !0,
+      children: /* @__PURE__ */_jsx(Group, {
+        role: "tablist",
+        componentName: TAB_LIST_NAME,
+        "aria-orientation": context.orientation,
+        ref: forwardedRef,
+        orientation: context.orientation,
+        ...listProps,
+        children
+      })
+    });
+  });
+TabsList.displayName = TAB_LIST_NAME;
+var TRIGGER_NAME = "TabsTrigger",
+  TabsTriggerFrame = styled(ThemeableStack, {
+    name: TRIGGER_NAME,
+    tag: "button",
+    justifyContent: "center",
+    alignItems: "center",
+    flexWrap: "nowrap",
+    flexDirection: "row",
+    cursor: "pointer",
+    userSelect: "none",
+    variants: {
+      size: {
+        "...size": getButtonSized
+      },
+      disabled: {
+        true: {
+          pointerEvents: "none"
+        }
+      },
+      active: {
+        true: {
+          hoverStyle: {
+            backgroundColor: "$background"
+          },
+          focusStyle: {
+            backgroundColor: "$background"
+          }
+        }
+      },
+      unstyled: {
+        false: {
+          backgroundColor: "$background",
+          pressStyle: {
+            backgroundColor: "$backgroundPress"
+          },
+          hoverStyle: {
+            backgroundColor: "$backgroundHover"
+          },
+          focusStyle: {
+            backgroundColor: "$backgroundFocus"
+          }
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.TAMAGUI_HEADLESS === "1"
+    }
+  }),
+  TabsTrigger = TabsTriggerFrame.styleable(function (props, forwardedRef) {
+    var {
+        __scopeTabs,
+        value,
+        disabled = !1,
+        onInteraction,
+        disableActiveTheme,
+        ...triggerProps
+      } = props,
+      context = useTabsContext(__scopeTabs),
+      triggerId = makeTriggerId(context.baseId, value),
+      contentId = makeContentId(context.baseId, value),
+      isSelected = value === context.value,
+      [layout, setLayout] = React.useState(null),
+      triggerRef = React.useRef(null),
+      groupItemProps = useGroupItem({
+        disabled: !!disabled
+      });
+    React.useEffect(function () {
+      return context.registerTrigger(), function () {
+        return context.unregisterTrigger();
+      };
+    }, []), React.useEffect(function () {
+      if (!triggerRef.current || !isWeb) return;
+      function getTriggerSize() {
+        triggerRef.current && setLayout({
+          width: triggerRef.current.offsetWidth,
+          height: triggerRef.current.offsetHeight,
+          x: triggerRef.current.offsetLeft,
+          y: triggerRef.current.offsetTop
+        });
+      }
+      getTriggerSize();
+      var observer = new ResizeObserver(getTriggerSize);
+      return observer.observe(triggerRef.current), function () {
+        triggerRef.current && observer.unobserve(triggerRef.current);
+      };
+    }, [context.triggersCount]), React.useEffect(function () {
+      isSelected && layout && onInteraction?.("select", layout);
+    }, [isSelected, value, layout]);
+    var _props_onPress;
+    return /* @__PURE__ */_jsx(Theme, {
+      name: isSelected && !disableActiveTheme ? "active" : null,
+      children: /* @__PURE__ */_jsx(RovingFocusGroup.Item, {
+        __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,
+        asChild: !0,
+        focusable: !disabled,
+        active: isSelected,
+        children: /* @__PURE__ */_jsx(TabsTriggerFrame, {
+          onLayout: function (event) {
+            isWeb || setLayout(event.nativeEvent.layout);
+          },
+          onHoverIn: composeEventHandlers(props.onHoverIn, function () {
+            layout && onInteraction?.("hover", layout);
+          }),
+          onHoverOut: composeEventHandlers(props.onHoverOut, function () {
+            onInteraction?.("hover", null);
+          }),
+          role: "tab",
+          "aria-selected": isSelected,
+          "aria-controls": contentId,
+          "data-state": isSelected ? "active" : "inactive",
+          "data-disabled": disabled ? "" : void 0,
+          disabled,
+          id: triggerId,
+          ...(!props.unstyled && {
+            size: context.size
+          }),
+          ...groupItemProps,
+          ...triggerProps,
+          ref: composeRefs(forwardedRef, triggerRef),
+          onPress: composeEventHandlers((_props_onPress = props.onPress) !== null && _props_onPress !== void 0 ? _props_onPress : void 0, function (event) {
+            var webChecks = !isWeb || event.button === 0 && event.ctrlKey === !1;
+            !disabled && !isSelected && webChecks ? context.onChange(value) : event.preventDefault();
+          }),
+          ...(isWeb && {
+            type: "button",
+            onKeyDown: composeEventHandlers(props.onKeyDown, function (event) {
+              [" ", "Enter"].includes(event.key) && (context.onChange(value), event.preventDefault());
+            }),
+            onFocus: composeEventHandlers(props.onFocus, function (event) {
+              layout && onInteraction?.("focus", layout);
+              var isAutomaticActivation = context.activationMode !== "manual";
+              !isSelected && !disabled && isAutomaticActivation && context.onChange(value);
+            }),
+            onBlur: composeEventHandlers(props.onFocus, function () {
+              onInteraction?.("focus", null);
+            })
+          })
+        })
+      })
+    });
+  });
+TabsTrigger.displayName = TRIGGER_NAME;
+var CONTENT_NAME = "TabsContent",
+  TabsContentFrame = styled(ThemeableStack, {
+    name: CONTENT_NAME
+  }),
+  TabsContent = TabsContentFrame.styleable(function (props, forwardedRef) {
+    var {
+        __scopeTabs,
+        value,
+        forceMount,
+        children,
+        ...contentProps
+      } = props,
+      context = useTabsContext(__scopeTabs),
+      isSelected = value === context.value,
+      show = forceMount || isSelected,
+      triggerId = makeTriggerId(context.baseId, value),
+      contentId = makeContentId(context.baseId, value);
+    return show ? /* @__PURE__ */_jsx(TabsContentFrame, {
+      "data-state": isSelected ? "active" : "inactive",
+      "data-orientation": context.orientation,
+      role: "tabpanel",
+      "aria-labelledby": triggerId,
+      // @ts-ignore
+      hidden: !show,
+      id: contentId,
+      tabIndex: 0,
+      ...contentProps,
+      ref: forwardedRef,
+      children
+    }, value) : null;
+  }),
+  TABS_NAME = "Tabs",
+  {
+    Provider: TabsProvider,
+    useStyledContext: useTabsContext
+  } = createStyledContext(),
+  TabsFrame = styled(SizableStack, {
+    name: TABS_NAME
+  }),
+  TabsComponent = TabsFrame.styleable(function (props, forwardedRef) {
+    var {
+        __scopeTabs,
+        value: valueProp,
+        onValueChange,
+        defaultValue,
+        orientation = "horizontal",
+        dir,
+        activationMode = "automatic",
+        size = "$true",
+        ...tabsProps
+      } = props,
+      direction = useDirection(dir),
+      [value, setValue] = useControllableState({
+        prop: valueProp,
+        onChange: onValueChange,
+        defaultProp: defaultValue ?? ""
+      }),
+      [triggersCount, setTriggersCount] = React.useState(0),
+      registerTrigger = useEvent(function () {
+        return setTriggersCount(function (v) {
+          return v + 1;
+        });
+      }),
+      unregisterTrigger = useEvent(function () {
+        return setTriggersCount(function (v) {
+          return v - 1;
+        });
+      });
+    return /* @__PURE__ */_jsx(TabsProvider, {
+      scope: __scopeTabs,
+      baseId: React.useId(),
+      value,
+      onChange: setValue,
+      orientation,
+      dir: direction,
+      activationMode,
+      size,
+      registerTrigger,
+      triggersCount,
+      unregisterTrigger,
+      children: /* @__PURE__ */_jsx(TabsFrame, {
+        direction,
+        //   dir={direction}
+        "data-orientation": orientation,
+        ...tabsProps,
+        ref: forwardedRef
+      })
+    });
+  }),
+  Tabs = withStaticProperties(TabsComponent, {
+    List: TabsList,
+    /**
+    * @deprecated Use Tabs.Tab instead
+    */
+    Trigger: TabsTrigger,
+    Tab: TabsTrigger,
+    Content: TabsContent
+  });
+Tabs.displayName = TABS_NAME;
+function makeTriggerId(baseId, value) {
+  return `${baseId}-trigger-${value}`;
+}
+function makeContentId(baseId, value) {
+  return `${baseId}-content-${value}`;
+}
+export { Tabs, useTabsContext };
+//# sourceMappingURL=Tabs.native.mjs.map

package/dist/esm/Tabs.native.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","composeRefs","isWeb","getButtonSized","Group","useGroupItem","composeEventHandlers","withStaticProperties","RovingFocusGroup","SizableStack","ThemeableStack","useControllableState","useDirection","Theme","createStyledContext","styled","useEvent","React","TABS_CONTEXT","TAB_LIST_NAME","TabsList","forwardRef","props","forwardedRef","__scopeTabs","loop","children","listProps","context","useTabsContext","__scopeRovingFocusGroup","orientation","dir","asChild","role","componentName","ref","displayName","TRIGGER_NAME","TabsTriggerFrame","name","tag","justifyContent","alignItems","flexWrap","flexDirection","cursor","userSelect","variants","size","disabled","true","pointerEvents","active","hoverStyle","backgroundColor","focusStyle","unstyled","false","pressStyle","defaultVariants","process","env","TAMAGUI_HEADLESS","TabsTrigger","styleable","value","onInteraction","disableActiveTheme","triggerProps","triggerId","makeTriggerId","baseId","contentId","makeContentId","isSelected","layout","setLayout","useState","triggerRef","useRef","groupItemProps","useEffect","registerTrigger","unregisterTrigger","current","getTriggerSize","width","offsetWidth","height","offsetHeight","x","offsetLeft","y","offsetTop","observer","ResizeObserver","observe","unobserve","triggersCount","_props_onPress","Item","focusable","onLayout","event","nativeEvent","onHoverIn","onHoverOut","id","onPress","webChecks","button","ctrlKey","onChange","preventDefault","type","onKeyDown","includes","key","onFocus","isAutomaticActivation","activationMode","onBlur","CONTENT_NAME","TabsContentFrame","TabsContent","forceMount","contentProps","show","hidden","tabIndex","TABS_NAME","Provider","TabsProvider","useStyledContext","TabsFrame","TabsComponent","valueProp","onValueChange","defaultValue","tabsProps","direction","setValue","prop","defaultProp","setTriggersCount","v","scope","useId","Tabs","List","Trigger","Tab","Content"],"sources":["../../src/Tabs.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/index.native.mjs

@@ -0,0 +1,2 @@
+export * from "./Tabs.mjs";
+//# sourceMappingURL=index.native.mjs.map

package/dist/esm/index.native.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/jsx/Tabs.native.js

@@ -10,119 +10,23 @@ import { useControllableState } from "@tamagui/use-controllable-state";
 import { useDirection } from "@tamagui/use-direction";
 import { Theme, createStyledContext, styled, useEvent } from "@tamagui/web";
 import * as React from "react";
-function _array_like_to_array(arr, len) {
-  (len == null || len > arr.length) && (len = arr.length);
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _array_with_holes(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-function _define_property(obj, key, value) {
-  return key in obj ? Object.defineProperty(obj, key, {
-    value,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
-  }) : obj[key] = value, obj;
-}
-function _iterable_to_array_limit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol < "u" && arr[Symbol.iterator] || arr["@@iterator"];
-  if (_i != null) {
-    var _arr = [], _n = !0, _d = !1, _s, _e;
-    try {
-      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done) && (_arr.push(_s.value), !(i && _arr.length === i)); _n = !0)
-        ;
-    } catch (err) {
-      _d = !0, _e = err;
-    } finally {
-      try {
-        !_n && _i.return != null && _i.return();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-    return _arr;
-  }
-}
-function _non_iterable_rest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _object_spread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {}, ownKeys2 = Object.keys(source);
-    typeof Object.getOwnPropertySymbols == "function" && (ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-    }))), ownKeys2.forEach(function(key) {
-      _define_property(target, key, source[key]);
-    });
-  }
-  return target;
-}
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _object_spread_props(target, source) {
-  return source = source ?? {}, Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
-    Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-  }), target;
-}
-function _object_without_properties(source, excluded) {
-  if (source == null) return {};
-  var target = _object_without_properties_loose(source, excluded), key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++)
-      key = sourceSymbolKeys[i], !(excluded.indexOf(key) >= 0) && Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]);
-  }
-  return target;
-}
-function _object_without_properties_loose(source, excluded) {
-  if (source == null) return {};
-  var target = {}, sourceKeys = Object.keys(source), key, i;
-  for (i = 0; i < sourceKeys.length; i++)
-    key = sourceKeys[i], !(excluded.indexOf(key) >= 0) && (target[key] = source[key]);
-  return target;
-}
-function _sliced_to_array(arr, i) {
-  return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-  if (o) {
-    if (typeof o == "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor && (n = o.constructor.name), n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-  }
-}
 var TABS_CONTEXT = "TabsContext", TAB_LIST_NAME = "TabsList", TabsList = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
-  var __scopeTabs = props.__scopeTabs, _props_loop = props.loop, loop = _props_loop === void 0 ? !0 : _props_loop, children = props.children, listProps = _object_without_properties(props, [
-    "__scopeTabs",
-    "loop",
-    "children"
-  ]), context = useTabsContext(__scopeTabs);
+  var { __scopeTabs, loop = !0, children, ...listProps } = props, context = useTabsContext(__scopeTabs);
   return /* @__PURE__ */ _jsx(RovingFocusGroup, {
     __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,
     orientation: context.orientation,
     dir: context.dir,
     loop,
     asChild: !0,
-    children: /* @__PURE__ */ _jsx(Group, _object_spread_props(_object_spread({
+    children: /* @__PURE__ */ _jsx(Group, {
       role: "tablist",
       componentName: TAB_LIST_NAME,
       "aria-orientation": context.orientation,
       ref: forwardedRef,
-      orientation: context.orientation
-    }, listProps), {
+      orientation: context.orientation,
+      ...listProps,
       children
-    }))
+    })
   });
 });
 TabsList.displayName = TAB_LIST_NAME;
@@ -173,13 +77,7 @@ var TRIGGER_NAME = "TabsTrigger", TabsTriggerFrame = styled(ThemeableStack, {
     unstyled: process.env.TAMAGUI_HEADLESS === "1"
   }
 }), TabsTrigger = TabsTriggerFrame.styleable(function(props, forwardedRef) {
-  var __scopeTabs = props.__scopeTabs, value = props.value, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? !1 : _props_disabled, onInteraction = props.onInteraction, disableActiveTheme = props.disableActiveTheme, triggerProps = _object_without_properties(props, [
-    "__scopeTabs",
-    "value",
-    "disabled",
-    "onInteraction",
-    "disableActiveTheme"
-  ]), context = useTabsContext(__scopeTabs), triggerId = makeTriggerId(context.baseId, value), contentId = makeContentId(context.baseId, value), isSelected = value === context.value, _React_useState = _sliced_to_array(React.useState(null), 2), layout = _React_useState[0], setLayout = _React_useState[1], triggerRef = React.useRef(null), groupItemProps = useGroupItem({
+  var { __scopeTabs, value, disabled = !1, onInteraction, disableActiveTheme, ...triggerProps } = props, context = useTabsContext(__scopeTabs), triggerId = makeTriggerId(context.baseId, value), contentId = makeContentId(context.baseId, value), isSelected = value === context.value, [layout, setLayout] = React.useState(null), triggerRef = React.useRef(null), groupItemProps = useGroupItem({
     disabled: !!disabled
   });
   React.useEffect(function() {
@@ -187,21 +85,20 @@ var TRIGGER_NAME = "TabsTrigger", TabsTriggerFrame = styled(ThemeableStack, {
       return context.unregisterTrigger();
     };
   }, []), React.useEffect(function() {
-    var getTriggerSize = function() {
+    if (!triggerRef.current || !isWeb) return;
+    function getTriggerSize() {
       triggerRef.current && setLayout({
         width: triggerRef.current.offsetWidth,
         height: triggerRef.current.offsetHeight,
         x: triggerRef.current.offsetLeft,
         y: triggerRef.current.offsetTop
       });
-    };
-    if (!(!triggerRef.current || !isWeb)) {
-      getTriggerSize();
-      var observer = new ResizeObserver(getTriggerSize);
-      return observer.observe(triggerRef.current), function() {
-        triggerRef.current && observer.unobserve(triggerRef.current);
-      };
     }
+    getTriggerSize();
+    var observer = new ResizeObserver(getTriggerSize);
+    return observer.observe(triggerRef.current), function() {
+      triggerRef.current && observer.unobserve(triggerRef.current);
+    };
   }, [
     context.triggersCount
   ]), React.useEffect(function() {
@@ -219,7 +116,7 @@ var TRIGGER_NAME = "TabsTrigger", TabsTriggerFrame = styled(ThemeableStack, {
       asChild: !0,
       focusable: !disabled,
       active: isSelected,
-      children: /* @__PURE__ */ _jsx(TabsTriggerFrame, _object_spread(_object_spread_props(_object_spread({
+      children: /* @__PURE__ */ _jsx(TabsTriggerFrame, {
         onLayout: function(event) {
           isWeb || setLayout(event.nativeEvent.layout);
         },
@@ -235,32 +132,35 @@ var TRIGGER_NAME = "TabsTrigger", TabsTriggerFrame = styled(ThemeableStack, {
         "data-state": isSelected ? "active" : "inactive",
         "data-disabled": disabled ? "" : void 0,
         disabled,
-        id: triggerId
-      }, !props.unstyled && {
-        size: context.size
-      }, groupItemProps, triggerProps), {
+        id: triggerId,
+        ...!props.unstyled && {
+          size: context.size
+        },
+        ...groupItemProps,
+        ...triggerProps,
         ref: composeRefs(forwardedRef, triggerRef),
         onPress: composeEventHandlers((_props_onPress = props.onPress) !== null && _props_onPress !== void 0 ? _props_onPress : void 0, function(event) {
           var webChecks = !isWeb || event.button === 0 && event.ctrlKey === !1;
           !disabled && !isSelected && webChecks ? context.onChange(value) : event.preventDefault();
-        })
-      }), isWeb && {
-        type: "button",
-        onKeyDown: composeEventHandlers(props.onKeyDown, function(event) {
-          [
-            " ",
-            "Enter"
-          ].includes(event.key) && (context.onChange(value), event.preventDefault());
         }),
-        onFocus: composeEventHandlers(props.onFocus, function(event) {
-          layout && (onInteraction == null || onInteraction("focus", layout));
-          var isAutomaticActivation = context.activationMode !== "manual";
-          !isSelected && !disabled && isAutomaticActivation && context.onChange(value);
-        }),
-        onBlur: composeEventHandlers(props.onFocus, function() {
-          onInteraction == null || onInteraction("focus", null);
-        })
-      }))
+        ...isWeb && {
+          type: "button",
+          onKeyDown: composeEventHandlers(props.onKeyDown, function(event) {
+            [
+              " ",
+              "Enter"
+            ].includes(event.key) && (context.onChange(value), event.preventDefault());
+          }),
+          onFocus: composeEventHandlers(props.onFocus, function(event) {
+            layout && (onInteraction == null || onInteraction("focus", layout));
+            var isAutomaticActivation = context.activationMode !== "manual";
+            !isSelected && !disabled && isAutomaticActivation && context.onChange(value);
+          }),
+          onBlur: composeEventHandlers(props.onFocus, function() {
+            onInteraction == null || onInteraction("focus", null);
+          })
+        }
+      })
     })
   });
 });
@@ -268,13 +168,8 @@ TabsTrigger.displayName = TRIGGER_NAME;
 var CONTENT_NAME = "TabsContent", TabsContentFrame = styled(ThemeableStack, {
   name: CONTENT_NAME
 }), TabsContent = TabsContentFrame.styleable(function(props, forwardedRef) {
-  var __scopeTabs = props.__scopeTabs, value = props.value, forceMount = props.forceMount, children = props.children, contentProps = _object_without_properties(props, [
-    "__scopeTabs",
-    "value",
-    "forceMount",
-    "children"
-  ]), context = useTabsContext(__scopeTabs), isSelected = value === context.value, show = forceMount || isSelected, triggerId = makeTriggerId(context.baseId, value), contentId = makeContentId(context.baseId, value);
-  return show ? /* @__PURE__ */ _jsx(TabsContentFrame, _object_spread_props(_object_spread({
+  var { __scopeTabs, value, forceMount, children, ...contentProps } = props, context = useTabsContext(__scopeTabs), isSelected = value === context.value, show = forceMount || isSelected, triggerId = makeTriggerId(context.baseId, value), contentId = makeContentId(context.baseId, value);
+  return show ? /* @__PURE__ */ _jsx(TabsContentFrame, {
     "data-state": isSelected ? "active" : "inactive",
     "data-orientation": context.orientation,
     role: "tabpanel",
@@ -282,28 +177,19 @@ var CONTENT_NAME = "TabsContent", TabsContentFrame = styled(ThemeableStack, {
     // @ts-ignore
     hidden: !show,
     id: contentId,
-    tabIndex: 0
-  }, contentProps), {
+    tabIndex: 0,
+    ...contentProps,
     ref: forwardedRef,
     children
-  }), value) : null;
-}), TABS_NAME = "Tabs", _createStyledContext = createStyledContext(), TabsProvider = _createStyledContext.Provider, useTabsContext = _createStyledContext.useStyledContext, TabsFrame = styled(SizableStack, {
+  }, value) : null;
+}), TABS_NAME = "Tabs", { Provider: TabsProvider, useStyledContext: useTabsContext } = createStyledContext(), TabsFrame = styled(SizableStack, {
   name: TABS_NAME
 }), TabsComponent = TabsFrame.styleable(function(props, forwardedRef) {
-  var __scopeTabs = props.__scopeTabs, valueProp = props.value, onValueChange = props.onValueChange, defaultValue = props.defaultValue, _props_orientation = props.orientation, orientation = _props_orientation === void 0 ? "horizontal" : _props_orientation, dir = props.dir, _props_activationMode = props.activationMode, activationMode = _props_activationMode === void 0 ? "automatic" : _props_activationMode, _props_size = props.size, size = _props_size === void 0 ? "$true" : _props_size, tabsProps = _object_without_properties(props, [
-    "__scopeTabs",
-    "value",
-    "onValueChange",
-    "defaultValue",
-    "orientation",
-    "dir",
-    "activationMode",
-    "size"
-  ]), direction = useDirection(dir), _useControllableState = _sliced_to_array(useControllableState({
+  var { __scopeTabs, value: valueProp, onValueChange, defaultValue, orientation = "horizontal", dir, activationMode = "automatic", size = "$true", ...tabsProps } = props, direction = useDirection(dir), [value, setValue] = useControllableState({
     prop: valueProp,
     onChange: onValueChange,
     defaultProp: defaultValue ?? ""
-  }), 2), value = _useControllableState[0], setValue = _useControllableState[1], _React_useState = _sliced_to_array(React.useState(0), 2), triggersCount = _React_useState[0], setTriggersCount = _React_useState[1], registerTrigger = useEvent(function() {
+  }), [triggersCount, setTriggersCount] = React.useState(0), registerTrigger = useEvent(function() {
     return setTriggersCount(function(v) {
       return v + 1;
     });
@@ -324,13 +210,13 @@ var CONTENT_NAME = "TabsContent", TabsContentFrame = styled(ThemeableStack, {
     registerTrigger,
     triggersCount,
     unregisterTrigger,
-    children: /* @__PURE__ */ _jsx(TabsFrame, _object_spread_props(_object_spread({
+    children: /* @__PURE__ */ _jsx(TabsFrame, {
       direction,
       //   dir={direction}
-      "data-orientation": orientation
-    }, tabsProps), {
+      "data-orientation": orientation,
+      ...tabsProps,
       ref: forwardedRef
-    }))
+    })
   });
 }), Tabs = withStaticProperties(TabsComponent, {
   List: TabsList,
@@ -343,10 +229,10 @@ var CONTENT_NAME = "TabsContent", TabsContentFrame = styled(ThemeableStack, {
 });
 Tabs.displayName = TABS_NAME;
 function makeTriggerId(baseId, value) {
-  return "".concat(baseId, "-trigger-").concat(value);
+  return `${baseId}-trigger-${value}`;
 }
 function makeContentId(baseId, value) {
-  return "".concat(baseId, "-content-").concat(value);
+  return `${baseId}-content-${value}`;
 }
 export {
   Tabs,