@tamagui/tabs 1.116.0 → 1.116.2

package/dist/cjs/Tabs.js

@@ -0,0 +1,274 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__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: !0 }) : target,
+  mod
+)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var Tabs_exports = {};
+__export(Tabs_exports, {
+  Tabs: () => Tabs,
+  useTabsContext: () => useTabsContext
+});
+module.exports = __toCommonJS(Tabs_exports);
+var import_compose_refs = require("@tamagui/compose-refs"), import_constants = require("@tamagui/constants"), import_get_button_sized = require("@tamagui/get-button-sized"), import_group = require("@tamagui/group"), import_helpers = require("@tamagui/helpers"), import_roving_focus = require("@tamagui/roving-focus"), import_stacks = require("@tamagui/stacks"), import_use_controllable_state = require("@tamagui/use-controllable-state"), import_use_direction = require("@tamagui/use-direction"), import_web = require("@tamagui/web"), React = __toESM(require("react")), import_jsx_runtime = require("react/jsx-runtime");
+const TABS_CONTEXT = "TabsContext", TAB_LIST_NAME = "TabsList", TabsList = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeTabs, loop = !0, children, ...listProps } = props, context = 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: !0,
+        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", TabsTriggerFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
+  name: TRIGGER_NAME,
+  tag: "button",
+  justifyContent: "center",
+  alignItems: "center",
+  flexWrap: "nowrap",
+  flexDirection: "row",
+  cursor: "pointer",
+  userSelect: "none",
+  variants: {
+    size: {
+      "...size": import_get_button_sized.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(
+  (props, forwardedRef) => {
+    const {
+      __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 = (0, import_group.useGroupItem)({ disabled: !!disabled });
+    return React.useEffect(() => (context.registerTrigger(), () => context.unregisterTrigger()), []), React.useEffect(() => {
+      if (!triggerRef.current || !import_constants.isWeb) return;
+      function getTriggerSize() {
+        triggerRef.current && setLayout({
+          width: triggerRef.current.offsetWidth,
+          height: triggerRef.current.offsetHeight,
+          x: triggerRef.current.offsetLeft,
+          y: triggerRef.current.offsetTop
+        });
+      }
+      getTriggerSize();
+      const observer = new ResizeObserver(getTriggerSize);
+      return observer.observe(triggerRef.current), () => {
+        triggerRef.current && observer.unobserve(triggerRef.current);
+      };
+    }, [context.triggersCount]), React.useEffect(() => {
+      isSelected && layout && onInteraction?.("select", layout);
+    }, [isSelected, value, layout]), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web.Theme, { name: isSelected && !disableActiveTheme ? "active" : null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_roving_focus.RovingFocusGroup.Item,
+      {
+        __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,
+        asChild: !0,
+        focusable: !disabled,
+        active: isSelected,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          TabsTriggerFrame,
+          {
+            onLayout: (event) => {
+              import_constants.isWeb || setLayout(event.nativeEvent.layout);
+            },
+            onHoverIn: (0, import_helpers.composeEventHandlers)(props.onHoverIn, () => {
+              layout && onInteraction?.("hover", layout);
+            }),
+            onHoverOut: (0, import_helpers.composeEventHandlers)(props.onHoverOut, () => {
+              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: (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 === !1;
+              !disabled && !isSelected && webChecks ? context.onChange(value) : event.preventDefault();
+            }),
+            ...import_constants.isWeb && {
+              type: "button",
+              onKeyDown: (0, import_helpers.composeEventHandlers)(
+                props.onKeyDown,
+                (event) => {
+                  [" ", "Enter"].includes(event.key) && (context.onChange(value), event.preventDefault());
+                }
+              ),
+              onFocus: (0, import_helpers.composeEventHandlers)(props.onFocus, (event) => {
+                layout && onInteraction?.("focus", layout);
+                const isAutomaticActivation = context.activationMode !== "manual";
+                !isSelected && !disabled && isAutomaticActivation && context.onChange(value);
+              }),
+              onBlur: (0, import_helpers.composeEventHandlers)(props.onFocus, () => {
+                onInteraction?.("focus", null);
+              })
+            }
+          }
+        )
+      }
+    ) });
+  }
+);
+TabsTrigger.displayName = TRIGGER_NAME;
+const CONTENT_NAME = "TabsContent", TabsContentFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
+  name: CONTENT_NAME
+}), TabsContent = TabsContentFrame.styleable(
+  function(props, forwardedRef) {
+    const { __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__ */ (0, import_jsx_runtime.jsx)(
+      TabsContentFrame,
+      {
+        "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
+    ) : null;
+  }
+), TABS_NAME = "Tabs", { Provider: TabsProvider, useStyledContext: useTabsContext } = (0, import_web.createStyledContext)(), TabsFrame = (0, import_web.styled)(import_stacks.SizableStack, {
+  name: TABS_NAME
+}), TabsComponent = TabsFrame.styleable(
+  (props, forwardedRef) => {
+    const {
+      __scopeTabs,
+      value: valueProp,
+      onValueChange,
+      defaultValue,
+      orientation = "horizontal",
+      dir,
+      activationMode = "automatic",
+      size = "$true",
+      ...tabsProps
+    } = props, direction = (0, import_use_direction.useDirection)(dir), [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+      prop: valueProp,
+      onChange: onValueChange,
+      defaultProp: defaultValue ?? ""
+    }), [triggersCount, setTriggersCount] = React.useState(0), registerTrigger = (0, import_web.useEvent)(() => setTriggersCount((v) => v + 1)), unregisterTrigger = (0, import_web.useEvent)(() => setTriggersCount((v) => v - 1));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      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
+          }
+        )
+      }
+    );
+  }
+), Tabs = (0, import_helpers.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}`;
+}
+//# sourceMappingURL=Tabs.js.map

package/dist/cjs/index.js

@@ -0,0 +1,15 @@
+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))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+}, __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var src_exports = {};
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("./Tabs"), module.exports);
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/tabs",
-  "version": "1.116.0",
+  "version": "1.116.2",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -32,23 +32,23 @@
     }
   },
   "dependencies": {
-    "@tamagui/compose-refs": "1.116.0",
-    "@tamagui/constants": "1.116.0",
-    "@tamagui/create-context": "1.116.0",
-    "@tamagui/get-button-sized": "1.116.0",
-    "@tamagui/group": "1.116.0",
-    "@tamagui/helpers": "1.116.0",
-    "@tamagui/roving-focus": "1.116.0",
-    "@tamagui/stacks": "1.116.0",
-    "@tamagui/use-controllable-state": "1.116.0",
-    "@tamagui/use-direction": "1.116.0",
-    "@tamagui/web": "1.116.0"
+    "@tamagui/compose-refs": "1.116.2",
+    "@tamagui/constants": "1.116.2",
+    "@tamagui/create-context": "1.116.2",
+    "@tamagui/get-button-sized": "1.116.2",
+    "@tamagui/group": "1.116.2",
+    "@tamagui/helpers": "1.116.2",
+    "@tamagui/roving-focus": "1.116.2",
+    "@tamagui/stacks": "1.116.2",
+    "@tamagui/use-controllable-state": "1.116.2",
+    "@tamagui/use-direction": "1.116.2",
+    "@tamagui/web": "1.116.2"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.116.0",
+    "@tamagui/build": "1.116.2",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0"
   },