@tamagui/tabs 2.7.7 → 3.0.0-beta.643.1

package/dist/jsx/Tabs.mjs

@@ -1,56 +1,207 @@
-import { styled, View } from "@tamagui/core";
-import { getButtonSized } from "@tamagui/get-button-sized";
-import { SizableStack, ThemeableStack } from "@tamagui/stacks";
-const TABS_NAME = "Tabs";
-const DefaultTabsFrame = styled(SizableStack, {
-  name: TABS_NAME
-});
-const TRIGGER_NAME = "TabsTrigger";
-const DefaultTabsTabFrame = styled(View, {
-  name: TRIGGER_NAME,
-  role: "tab",
-  variants: {
-    size: {
-      "...size": 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.TAMAGUI_HEADLESS === "1"
-  }
-}, {
-  accept: {
-    activeStyle: "style"
-  }
-});
-const CONTENT_NAME = "TabsContent";
-const DefaultTabsContentFrame = styled(ThemeableStack, {
-  name: CONTENT_NAME
-});
-export { DefaultTabsContentFrame, DefaultTabsFrame, DefaultTabsTabFrame };
+import { composeRefs } from "@tamagui/compose-refs";
+import { isWeb } from "@tamagui/constants";
+import { View, createStyledHOC, styled } from "@tamagui/core";
+import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
+import { RovingFocusGroup } from "@tamagui/roving-focus";
+import { SizeContext } from "@tamagui/size";
+import { useTab, useTabContent, useTabs, useTabsList } from "@tamagui/tabs-headless";
+import { useEvent } from "@tamagui/web";
+import * as React from "react";
+import { TabsProvider, useTabsContext } from "./StyledContext.mjs";
+import { jsx } from "react/jsx-runtime";
+
+const TABS_CONTEXT = "TabsContext";
+const TabsFrame = styled(View, {
+	displayName: "Tabs",
+	context: SizeContext
+});
+const TabsListFrame = styled(View, {
+	displayName: "TabsList",
+	context: SizeContext,
+	role: "tablist"
+});
+const TabsTabFrame = styled(View, {
+	displayName: "TabsTrigger",
+	context: SizeContext,
+	role: "tab",
+	variants: { disabled: { true: { pointerEvents: "none" } } }
+});
+const TabsContentFrame = styled(View, {
+	displayName: "TabsContent",
+	context: SizeContext
+});
+const TabsListDisabledContext = React.createContext(false);
+const TabsList = createStyledHOC(TabsListFrame, function TabsList2(props, forwardedRef) {
+	const { __scopeTabs, loop = true, disabled = false, children, ...listProps } = props;
+	const context = useTabsContext(__scopeTabs);
+	const { listProps: headlessListProps } = useTabsList({
+		orientation: context.orientation,
+		disabled
+	});
+	return /* @__PURE__ */ jsx(TabsListDisabledContext.Provider, {
+		value: disabled,
+		children: /* @__PURE__ */ jsx(RovingFocusGroup, {
+			__scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,
+			orientation: context.orientation,
+			dir: context.dir,
+			loop,
+			asChild: true,
+			children: /* @__PURE__ */ jsx(TabsListFrame, {
+				...headlessListProps,
+				flexDirection: context.orientation === "vertical" ? "column" : "row",
+				ref: forwardedRef,
+				...listProps,
+				children
+			})
+		})
+	});
+});
+const TabsTab = createStyledHOC(TabsTabFrame, function TabsTab2(props, forwardedRef) {
+	const { __scopeTabs, value, disabled: disabledProp, onInteraction, activeStyle, activeTheme, onLayout, onMouseEnter, onMouseLeave, onPress, onKeyDown, onFocus, onBlur, ...triggerProps } = props;
+	const context = useTabsContext(__scopeTabs);
+	const listDisabled = React.useContext(TabsListDisabledContext);
+	const disabled = disabledProp ?? listDisabled;
+	const { isSelected, tabProps } = useTab({
+		baseId: context.baseId,
+		value,
+		selectedValue: context.value,
+		disabled,
+		activationMode: context.activationMode,
+		onChange: context.onChange
+	});
+	const { onPress: activateOnPress, onKeyDown: activateOnKeyDown, onFocus: activateOnFocus, ...tabA11yProps } = tabProps;
+	const [layout, setLayout] = React.useState(null);
+	const triggerRef = React.useRef(null);
+	const emitInteraction = useEvent((type, layout2) => {
+		onInteraction?.(type, layout2);
+	});
+	React.useEffect(() => {
+		context.registerTrigger();
+		return () => context.unregisterTrigger();
+	}, []);
+	React.useEffect(() => {
+		if (!triggerRef.current || !isWeb) return;
+		const element = triggerRef.current;
+		function updateTriggerSize() {
+			const next = {
+				width: element.offsetWidth,
+				height: element.offsetHeight,
+				x: element.offsetLeft,
+				y: element.offsetTop
+			};
+			setLayout((previous) => previous && previous.width === next.width && previous.height === next.height && previous.x === next.x && previous.y === next.y ? previous : next);
+		}
+		updateTriggerSize();
+		const observer = new ResizeObserver(updateTriggerSize);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [context.triggersCount]);
+	React.useEffect(() => {
+		if (isSelected && layout) {
+			emitInteraction("select", layout);
+		}
+	}, [
+		emitInteraction,
+		isSelected,
+		layout
+	]);
+	return /* @__PURE__ */ jsx(RovingFocusGroup.Item, {
+		__scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,
+		asChild: true,
+		tabIndex: disabled ? -1 : 0,
+		active: isSelected,
+		children: /* @__PURE__ */ jsx(TabsTabFrame, {
+			onLayout: isWeb ? onLayout : composeEventHandlers(onLayout, (event) => {
+				setLayout(event.nativeEvent.layout);
+			}),
+			onMouseEnter: composeEventHandlers(onMouseEnter, () => {
+				if (layout) {
+					emitInteraction("hover", layout);
+				}
+			}),
+			onMouseLeave: composeEventHandlers(onMouseLeave, () => {
+				emitInteraction("hover", null);
+			}),
+			...tabA11yProps,
+			theme: isSelected ? activeTheme ?? null : null,
+			size: context.size,
+			...triggerProps,
+			...isSelected && activeStyle,
+			ref: composeRefs(forwardedRef, triggerRef),
+			onPress: composeEventHandlers(onPress ?? void 0, activateOnPress),
+			...isWeb && {
+				onKeyDown: composeEventHandlers(onKeyDown, activateOnKeyDown),
+				onFocus: composeEventHandlers(onFocus, composeEventHandlers(() => {
+					if (layout) {
+						emitInteraction("focus", layout);
+					}
+				}, activateOnFocus)),
+				onBlur: composeEventHandlers(onBlur, () => {
+					emitInteraction("focus", null);
+				})
+			}
+		})
+	});
+});
+const TabsContent = createStyledHOC(TabsContentFrame, function TabsContent2(props, forwardedRef) {
+	const { __scopeTabs, value, forceMount, children, ...contentProps } = props;
+	const context = useTabsContext(__scopeTabs);
+	const { shouldMount, contentProps: headlessContentProps } = useTabContent({
+		baseId: context.baseId,
+		value,
+		selectedValue: context.value,
+		orientation: context.orientation,
+		forceMount
+	});
+	if (!shouldMount) {
+		return null;
+	}
+	return /* @__PURE__ */ jsx(TabsContentFrame, {
+		...headlessContentProps,
+		...contentProps,
+		ref: forwardedRef,
+		children
+	}, value);
+});
+const TabsComponent = createStyledHOC(TabsFrame, function Tabs(props, forwardedRef) {
+	const { __scopeTabs, value: valueProp, onValueChange, defaultValue, orientation = "horizontal", dir, activationMode = "automatic", size = true, ...tabsProps } = props;
+	const { value, setValue, baseId, direction, triggersCount, registerTrigger, unregisterTrigger, tabsProps: headlessTabsProps } = useTabs({
+		value: valueProp,
+		onValueChange,
+		defaultValue,
+		orientation,
+		dir,
+		activationMode
+	});
+	return /* @__PURE__ */ jsx(SizeContext.Provider, {
+		size,
+		children: /* @__PURE__ */ jsx(TabsProvider, {
+			scope: __scopeTabs,
+			baseId,
+			value,
+			onChange: setValue,
+			orientation,
+			dir: direction,
+			activationMode,
+			size,
+			registerTrigger,
+			triggersCount,
+			unregisterTrigger,
+			children: /* @__PURE__ */ jsx(TabsFrame, {
+				direction,
+				...headlessTabsProps,
+				...tabsProps,
+				ref: forwardedRef
+			})
+		})
+	});
+});
+const Tabs2 = withStaticProperties(TabsComponent, {
+	Frame: TabsFrame,
+	List: TabsList,
+	Tab: TabsTab,
+	Content: TabsContent
+});
+
+export { Tabs2 as Tabs, TabsContent, TabsContentFrame, TabsFrame, TabsList, TabsListFrame, TabsTab, TabsTabFrame };
 //# sourceMappingURL=Tabs.mjs.map

package/dist/jsx/Tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["styled","View","getButtonSized","SizableStack","ThemeableStack","TABS_NAME","DefaultTabsFrame","name","TRIGGER_NAME","DefaultTabsTabFrame","role","variants","size","disabled","true","pointerEvents","unstyled","false","borderWidth","backgroundColor","userSelect","justifyContent","alignItems","flexWrap","flexDirection","cursor","pressStyle","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","zIndex","defaultVariants","process","env","TAMAGUI_HEADLESS","accept","activeStyle","CONTENT_NAME","DefaultTabsContentFrame"],"sources":["../../src/Tabs.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,EAAQC,IAAA,QAAY;AAC7B,SAASC,cAAA,QAAsB;AAC/B,SAASC,YAAA,EAAcC,cAAA,QAAsB;AAE7C,MAAMC,SAAA,GAAY;AACX,MAAMC,gBAAA,GAAmBN,MAAA,CAAOG,YAAA,EAAc;EACnDI,IAAA,EAAMF;AACR,CAAC;AAED,MAAMG,YAAA,GAAe;AAEd,MAAMC,mBAAA,GAAsBT,MAAA,CACjCC,IAAA,EACA;EACEM,IAAA,EAAMC,YAAA;EACNE,IAAA,EAAM;EAENC,QAAA,EAAU;IACRC,IAAA,EAAM;MACJ,WAAWV;IACb;IAEAW,QAAA,EAAU;MACRC,IAAA,EAAM;QACJC,aAAA,EAAe;MACjB;IACF;IAEAC,QAAA,EAAU;MACRC,KAAA,EAAO;QACLC,WAAA,EAAa;QACbC,eAAA,EAAiB;QACjBC,UAAA,EAAY;QACZC,cAAA,EAAgB;QAChBC,UAAA,EAAY;QACZC,QAAA,EAAU;QACVC,aAAA,EAAe;QACfC,MAAA,EAAQ;QAERC,UAAA,EAAY;UACVP,eAAA,EAAiB;QACnB;QAEAQ,iBAAA,EAAmB;UACjBC,YAAA,EAAc;UACdC,YAAA,EAAc;UACdC,YAAA,EAAc;UACdC,MAAA,EAAQ;QACV;MACF;IACF;EACF;EAEAC,eAAA,EAAiB;IACfhB,QAAA,EAAUiB,OAAA,CAAQC,GAAA,CAAIC,gBAAA,KAAqB;EAC7C;AACF,GACA;EACEC,MAAA,EAAQ;IACNC,WAAA,EAAa;EACf;AACF,CACF;AAEA,MAAMC,YAAA,GAAe;AAEd,MAAMC,uBAAA,GAA0BvC,MAAA,CAAOI,cAAA,EAAgB;EAC5DG,IAAA,EAAM+B;AACR,CAAC","ignoreList":[]}
+{"version":3,"file":"Tabs.js","names":[],"sources":["jsx/Tabs.js"],"sourcesContent":["import { composeRefs } from \"@tamagui/compose-refs\";\nimport { isWeb } from \"@tamagui/constants\";\nimport { createStyledHOC, styled, View } from \"@tamagui/core\";\nimport { composeEventHandlers, withStaticProperties } from \"@tamagui/helpers\";\nimport { RovingFocusGroup } from \"@tamagui/roving-focus\";\nimport { SizeContext } from \"@tamagui/size\";\nimport { useTab, useTabContent, useTabs, useTabsList } from \"@tamagui/tabs-headless\";\nimport { useEvent } from \"@tamagui/web\";\nimport * as React from \"react\";\nimport { TabsProvider, useTabsContext } from \"./StyledContext\";\nimport { jsx } from \"react/jsx-runtime\";\nconst TABS_CONTEXT = \"TabsContext\";\nconst TabsFrame = styled(View, {\n  displayName: \"Tabs\",\n  context: SizeContext\n});\nconst TabsListFrame = styled(View, {\n  displayName: \"TabsList\",\n  context: SizeContext,\n  role: \"tablist\"\n});\nconst TabsTabFrame = styled(View, {\n  displayName: \"TabsTrigger\",\n  context: SizeContext,\n  role: \"tab\",\n  variants: {\n    disabled: {\n      true: {\n        pointerEvents: \"none\"\n      }\n    }\n  }\n});\nconst TabsContentFrame = styled(View, {\n  displayName: \"TabsContent\",\n  context: SizeContext\n});\nconst TabsListDisabledContext = React.createContext(false);\nconst TabsList = createStyledHOC(\n  TabsListFrame,\n  function TabsList2(props, forwardedRef) {\n    const { __scopeTabs, loop = true, disabled = false, children, ...listProps } = props;\n    const context = useTabsContext(__scopeTabs);\n    const { listProps: headlessListProps } = useTabsList({\n      orientation: context.orientation,\n      disabled\n    });\n    return /* @__PURE__ */ jsx(TabsListDisabledContext.Provider, { value: disabled, children: /* @__PURE__ */ jsx(\n      RovingFocusGroup,\n      {\n        __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,\n        orientation: context.orientation,\n        dir: context.dir,\n        loop,\n        asChild: true,\n        children: /* @__PURE__ */ jsx(\n          TabsListFrame,\n          {\n            ...headlessListProps,\n            flexDirection: context.orientation === \"vertical\" ? \"column\" : \"row\",\n            ref: forwardedRef,\n            ...listProps,\n            children\n          }\n        )\n      }\n    ) });\n  }\n);\nconst TabsTab = createStyledHOC(\n  TabsTabFrame,\n  function TabsTab2(props, forwardedRef) {\n    const {\n      __scopeTabs,\n      value,\n      disabled: disabledProp,\n      onInteraction,\n      activeStyle,\n      activeTheme,\n      onLayout,\n      onMouseEnter,\n      onMouseLeave,\n      onPress,\n      onKeyDown,\n      onFocus,\n      onBlur,\n      ...triggerProps\n    } = props;\n    const context = useTabsContext(__scopeTabs);\n    const listDisabled = React.useContext(TabsListDisabledContext);\n    const disabled = disabledProp ?? listDisabled;\n    const { isSelected, tabProps } = useTab({\n      baseId: context.baseId,\n      value,\n      selectedValue: context.value,\n      disabled,\n      activationMode: context.activationMode,\n      onChange: context.onChange\n    });\n    const {\n      onPress: activateOnPress,\n      onKeyDown: activateOnKeyDown,\n      onFocus: activateOnFocus,\n      ...tabA11yProps\n    } = tabProps;\n    const [layout, setLayout] = React.useState(null);\n    const triggerRef = React.useRef(null);\n    const emitInteraction = useEvent(\n      (type, layout2) => {\n        onInteraction?.(type, layout2);\n      }\n    );\n    React.useEffect(() => {\n      context.registerTrigger();\n      return () => context.unregisterTrigger();\n    }, []);\n    React.useEffect(() => {\n      if (!triggerRef.current || !isWeb) return;\n      const element = triggerRef.current;\n      function updateTriggerSize() {\n        const next = {\n          width: element.offsetWidth,\n          height: element.offsetHeight,\n          x: element.offsetLeft,\n          y: element.offsetTop\n        };\n        setLayout(\n          (previous) => previous && previous.width === next.width && previous.height === next.height && previous.x === next.x && previous.y === next.y ? previous : next\n        );\n      }\n      updateTriggerSize();\n      const observer = new ResizeObserver(updateTriggerSize);\n      observer.observe(element);\n      return () => observer.disconnect();\n    }, [context.triggersCount]);\n    React.useEffect(() => {\n      if (isSelected && layout) {\n        emitInteraction(\"select\", layout);\n      }\n    }, [emitInteraction, isSelected, layout]);\n    return /* @__PURE__ */ jsx(\n      RovingFocusGroup.Item,\n      {\n        __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,\n        asChild: true,\n        tabIndex: disabled ? -1 : 0,\n        active: isSelected,\n        children: /* @__PURE__ */ jsx(\n          TabsTabFrame,\n          {\n            onLayout: isWeb ? onLayout : composeEventHandlers(onLayout, (event) => {\n              setLayout(event.nativeEvent.layout);\n            }),\n            onMouseEnter: composeEventHandlers(onMouseEnter, () => {\n              if (layout) {\n                emitInteraction(\"hover\", layout);\n              }\n            }),\n            onMouseLeave: composeEventHandlers(onMouseLeave, () => {\n              emitInteraction(\"hover\", null);\n            }),\n            ...tabA11yProps,\n            theme: isSelected ? activeTheme ?? null : null,\n            size: context.size,\n            ...triggerProps,\n            ...isSelected && activeStyle,\n            ref: composeRefs(forwardedRef, triggerRef),\n            onPress: composeEventHandlers(onPress ?? void 0, activateOnPress),\n            ...isWeb && {\n              onKeyDown: composeEventHandlers(onKeyDown, activateOnKeyDown),\n              // emit the focus interaction before activating, matching the order\n              // the indicator animations were built against\n              onFocus: composeEventHandlers(\n                onFocus,\n                composeEventHandlers(() => {\n                  if (layout) {\n                    emitInteraction(\"focus\", layout);\n                  }\n                }, activateOnFocus)\n              ),\n              onBlur: composeEventHandlers(onBlur, () => {\n                emitInteraction(\"focus\", null);\n              })\n            }\n          }\n        )\n      }\n    );\n  }\n);\nconst TabsContent = createStyledHOC(\n  TabsContentFrame,\n  function TabsContent2(props, forwardedRef) {\n    const { __scopeTabs, value, forceMount, children, ...contentProps } = props;\n    const context = useTabsContext(__scopeTabs);\n    const { shouldMount, contentProps: headlessContentProps } = useTabContent({\n      baseId: context.baseId,\n      value,\n      selectedValue: context.value,\n      orientation: context.orientation,\n      forceMount\n    });\n    if (!shouldMount) {\n      return null;\n    }\n    return /* @__PURE__ */ jsx(\n      TabsContentFrame,\n      {\n        ...headlessContentProps,\n        ...contentProps,\n        ref: forwardedRef,\n        children\n      },\n      value\n    );\n  }\n);\nconst TabsComponent = createStyledHOC(\n  TabsFrame,\n  function Tabs(props, forwardedRef) {\n    const {\n      __scopeTabs,\n      value: valueProp,\n      onValueChange,\n      defaultValue,\n      orientation = \"horizontal\",\n      dir,\n      activationMode = \"automatic\",\n      size = true,\n      ...tabsProps\n    } = props;\n    const {\n      value,\n      setValue,\n      baseId,\n      direction,\n      triggersCount,\n      registerTrigger,\n      unregisterTrigger,\n      tabsProps: headlessTabsProps\n    } = useTabs({\n      value: valueProp,\n      onValueChange,\n      defaultValue,\n      orientation,\n      dir,\n      activationMode\n    });\n    return /* @__PURE__ */ jsx(SizeContext.Provider, { size, children: /* @__PURE__ */ jsx(\n      TabsProvider,\n      {\n        scope: __scopeTabs,\n        baseId,\n        value,\n        onChange: setValue,\n        orientation,\n        dir: direction,\n        activationMode,\n        size,\n        registerTrigger,\n        triggersCount,\n        unregisterTrigger,\n        children: /* @__PURE__ */ jsx(\n          TabsFrame,\n          {\n            direction,\n            ...headlessTabsProps,\n            ...tabsProps,\n            ref: forwardedRef\n          }\n        )\n      }\n    ) });\n  }\n);\nconst Tabs2 = withStaticProperties(TabsComponent, {\n  Frame: TabsFrame,\n  List: TabsList,\n  Tab: TabsTab,\n  Content: TabsContent\n});\nexport {\n  Tabs2 as Tabs,\n  TabsContent,\n  TabsContentFrame,\n  TabsFrame,\n  TabsList,\n  TabsListFrame,\n  TabsTab,\n  TabsTabFrame\n};\n//# sourceMappingURL=Tabs.js.map\n"],"mappings":"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"}

package/dist/jsx/Tabs.native.cjs

@@ -0,0 +1,250 @@
+"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(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Tabs_exports = {};
+__export(Tabs_exports, {
+	Tabs: () => Tabs2,
+	TabsContent: () => TabsContent,
+	TabsContentFrame: () => TabsContentFrame,
+	TabsFrame: () => TabsFrame,
+	TabsList: () => TabsList,
+	TabsListFrame: () => TabsListFrame,
+	TabsTab: () => TabsTab,
+	TabsTabFrame: () => TabsTabFrame
+});
+module.exports = __toCommonJS(Tabs_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_constants = require("@tamagui/constants");
+var import_core = require("@tamagui/core");
+var import_helpers = require("@tamagui/helpers");
+var import_roving_focus = require("@tamagui/roving-focus");
+var import_size = require("@tamagui/size");
+var import_tabs_headless = require("@tamagui/tabs-headless");
+var import_web = require("@tamagui/web");
+var React = __toESM(require("react"), 1);
+var import_StyledContext = require("./StyledContext.native.js");
+var TABS_CONTEXT = "TabsContext";
+var TabsFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "Tabs",
+	context: import_size.SizeContext
+});
+var TabsListFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "TabsList",
+	context: import_size.SizeContext,
+	role: "tablist"
+});
+var TabsTabFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "TabsTrigger",
+	context: import_size.SizeContext,
+	role: "tab",
+	variants: { disabled: { true: { pointerEvents: "none" } } }
+});
+var TabsContentFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "TabsContent",
+	context: import_size.SizeContext
+});
+var TabsListDisabledContext = /* @__PURE__ */ React.createContext(false);
+var TabsList = (0, import_core.createStyledHOC)(TabsListFrame, function TabsList2(props, forwardedRef) {
+	var { __scopeTabs, loop = true, disabled = false, children, ...listProps } = props;
+	var context = (0, import_StyledContext.useTabsContext)(__scopeTabs);
+	var { listProps: headlessListProps } = (0, import_tabs_headless.useTabsList)({
+		orientation: context.orientation,
+		disabled
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsListDisabledContext.Provider, {
+		value: disabled,
+		children: /* @__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)(TabsListFrame, {
+				...headlessListProps,
+				flexDirection: context.orientation === "vertical" ? "column" : "row",
+				ref: forwardedRef,
+				...listProps,
+				children
+			})
+		})
+	});
+});
+var TabsTab = (0, import_core.createStyledHOC)(TabsTabFrame, function TabsTab2(props, forwardedRef) {
+	var { __scopeTabs, value, disabled: disabledProp, onInteraction, activeStyle, activeTheme, onLayout, onMouseEnter, onMouseLeave, onPress, onKeyDown, onFocus, onBlur, ...triggerProps } = props;
+	var context = (0, import_StyledContext.useTabsContext)(__scopeTabs);
+	var listDisabled = React.useContext(TabsListDisabledContext);
+	var disabled = disabledProp !== null && disabledProp !== void 0 ? disabledProp : listDisabled;
+	var { isSelected, tabProps } = (0, import_tabs_headless.useTab)({
+		baseId: context.baseId,
+		value,
+		selectedValue: context.value,
+		disabled,
+		activationMode: context.activationMode,
+		onChange: context.onChange
+	});
+	var { onPress: activateOnPress, onKeyDown: activateOnKeyDown, onFocus: activateOnFocus, ...tabA11yProps } = tabProps;
+	var [layout, setLayout] = React.useState(null);
+	var triggerRef = React.useRef(null);
+	var emitInteraction = (0, import_web.useEvent)(function(type, layout2) {
+		onInteraction === null || onInteraction === void 0 ? void 0 : onInteraction(type, layout2);
+	});
+	React.useEffect(function() {
+		context.registerTrigger();
+		return function() {
+			return context.unregisterTrigger();
+		};
+	}, []);
+	React.useEffect(function() {
+		if (!triggerRef.current || !import_constants.isWeb) return;
+		var element = triggerRef.current;
+		function updateTriggerSize() {
+			var next = {
+				width: element.offsetWidth,
+				height: element.offsetHeight,
+				x: element.offsetLeft,
+				y: element.offsetTop
+			};
+			setLayout(function(previous) {
+				return previous && previous.width === next.width && previous.height === next.height && previous.x === next.x && previous.y === next.y ? previous : next;
+			});
+		}
+		updateTriggerSize();
+		var observer = new ResizeObserver(updateTriggerSize);
+		observer.observe(element);
+		return function() {
+			return observer.disconnect();
+		};
+	}, [context.triggersCount]);
+	React.useEffect(function() {
+		if (isSelected && layout) {
+			emitInteraction("select", layout);
+		}
+	}, [
+		emitInteraction,
+		isSelected,
+		layout
+	]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
+		__scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,
+		asChild: true,
+		tabIndex: disabled ? -1 : 0,
+		active: isSelected,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsTabFrame, {
+			onLayout: import_constants.isWeb ? onLayout : (0, import_helpers.composeEventHandlers)(onLayout, function(event) {
+				setLayout(event.nativeEvent.layout);
+			}),
+			onMouseEnter: (0, import_helpers.composeEventHandlers)(onMouseEnter, function() {
+				if (layout) {
+					emitInteraction("hover", layout);
+				}
+			}),
+			onMouseLeave: (0, import_helpers.composeEventHandlers)(onMouseLeave, function() {
+				emitInteraction("hover", null);
+			}),
+			...tabA11yProps,
+			theme: isSelected ? activeTheme !== null && activeTheme !== void 0 ? activeTheme : null : null,
+			size: context.size,
+			...triggerProps,
+			...isSelected && activeStyle,
+			ref: (0, import_compose_refs.composeRefs)(forwardedRef, triggerRef),
+			onPress: (0, import_helpers.composeEventHandlers)(onPress !== null && onPress !== void 0 ? onPress : void 0, activateOnPress),
+			...import_constants.isWeb && {
+				onKeyDown: (0, import_helpers.composeEventHandlers)(onKeyDown, activateOnKeyDown),
+				onFocus: (0, import_helpers.composeEventHandlers)(onFocus, (0, import_helpers.composeEventHandlers)(function() {
+					if (layout) {
+						emitInteraction("focus", layout);
+					}
+				}, activateOnFocus)),
+				onBlur: (0, import_helpers.composeEventHandlers)(onBlur, function() {
+					emitInteraction("focus", null);
+				})
+			}
+		})
+	});
+});
+var TabsContent = (0, import_core.createStyledHOC)(TabsContentFrame, function TabsContent2(props, forwardedRef) {
+	var { __scopeTabs, value, forceMount, children, ...contentProps } = props;
+	var context = (0, import_StyledContext.useTabsContext)(__scopeTabs);
+	var { shouldMount, contentProps: headlessContentProps } = (0, import_tabs_headless.useTabContent)({
+		baseId: context.baseId,
+		value,
+		selectedValue: context.value,
+		orientation: context.orientation,
+		forceMount
+	});
+	if (!shouldMount) {
+		return null;
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContentFrame, {
+		...headlessContentProps,
+		...contentProps,
+		ref: forwardedRef,
+		children
+	}, value);
+});
+var TabsComponent = (0, import_core.createStyledHOC)(TabsFrame, function Tabs(props, forwardedRef) {
+	var { __scopeTabs, value: valueProp, onValueChange, defaultValue, orientation = "horizontal", dir, activationMode = "automatic", size = true, ...tabsProps } = props;
+	var { value, setValue, baseId, direction, triggersCount, registerTrigger, unregisterTrigger, tabsProps: headlessTabsProps } = (0, import_tabs_headless.useTabs)({
+		value: valueProp,
+		onValueChange,
+		defaultValue,
+		orientation,
+		dir,
+		activationMode
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_size.SizeContext.Provider, {
+		size,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyledContext.TabsProvider, {
+			scope: __scopeTabs,
+			baseId,
+			value,
+			onChange: setValue,
+			orientation,
+			dir: direction,
+			activationMode,
+			size,
+			registerTrigger,
+			triggersCount,
+			unregisterTrigger,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsFrame, {
+				direction,
+				...headlessTabsProps,
+				...tabsProps,
+				ref: forwardedRef
+			})
+		})
+	});
+});
+var Tabs2 = (0, import_helpers.withStaticProperties)(TabsComponent, {
+	Frame: TabsFrame,
+	List: TabsList,
+	Tab: TabsTab,
+	Content: TabsContent
+});