@tamagui/tabs 1.12.0 → 1.12.2

package/dist/cjs/Tabs.js

@@ -49,33 +49,35 @@ const TabsListFrame = (0, import_web.styled)(import_group.Group, {
   //   flexGrow: 0,
   // },
 });
-const TabsList = React.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeTabs, loop = true, children, ...listProps } = props;
-    const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);
-    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_roving_focus.RovingFocusGroup,
-      {
-        asChild: true,
-        orientation: context.orientation,
-        dir: context.dir,
-        loop,
-        ...rovingFocusGroupScope,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          TabsListFrame,
-          {
-            role: "tablist",
-            "aria-orientation": context.orientation,
-            ref: forwardedRef,
-            axis: context.orientation,
-            ...listProps,
-            children
-          }
-        )
-      }
-    );
-  }
+const TabsList = TabsListFrame.extractable(
+  React.forwardRef(
+    (props, forwardedRef) => {
+      const { __scopeTabs, loop = true, children, ...listProps } = props;
+      const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);
+      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_roving_focus.RovingFocusGroup,
+        {
+          asChild: true,
+          orientation: context.orientation,
+          dir: context.dir,
+          loop,
+          ...rovingFocusGroupScope,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            TabsListFrame,
+            {
+              role: "tablist",
+              "aria-orientation": context.orientation,
+              ref: forwardedRef,
+              axis: context.orientation,
+              ...listProps,
+              children
+            }
+          )
+        }
+      );
+    }
+  )
 );
 TabsList.displayName = TAB_LIST_NAME;
 const TRIGGER_NAME = "TabsTrigger";
@@ -86,6 +88,7 @@ const TabsTriggerFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
   flexWrap: "nowrap",
   flexDirection: "row",
   cursor: "pointer",
+  focusable: true,
   variants: {
     size: {
       "...size": import_get_button_sized.getButtonSized
@@ -95,25 +98,23 @@ const TabsTriggerFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
         pointerEvents: "none"
       }
     },
-    theme: {
-      Button: {
-        focusable: true,
-        hoverTheme: true,
-        pressTheme: true,
-        backgrounded: true,
-        borderWidth: 1,
-        borderColor: "transparent",
+    unstyled: {
+      false: {
+        backgroundColor: "$background",
         pressStyle: {
-          borderColor: "transparent"
+          backgroundColor: "$backgroundPress"
         },
         hoverStyle: {
-          borderColor: "transparent"
+          backgroundColor: "$backgroundHover"
         },
         focusStyle: {
-          borderColor: "$borderColorFocus"
+          backgroundColor: "$backgroundFocus"
         }
       }
     }
+  },
+  defaultVariants: {
+    unstyled: false
   }
 });
 const TabsTrigger = TabsTriggerFrame.extractable(
@@ -213,6 +214,7 @@ const TabsTrigger = TabsTriggerFrame.extractable(
                   (event) => {
                     if ([" ", "Enter"].includes(event.key)) {
                       context.onChange(value);
+                      event.preventDefault();
                     }
                   }
                 ),
@@ -242,33 +244,35 @@ const CONTENT_NAME = "TabsContent";
 const TabsContentFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
   name: CONTENT_NAME
 });
-const TabsContent = React.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeTabs, value, forceMount, children, ...contentProps } = props;
-    const context = useTabsContext(CONTENT_NAME, __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)(
-      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
-    );
-  }
+const TabsContent = TabsContentFrame.extractable(
+  React.forwardRef(
+    (props, forwardedRef) => {
+      const { __scopeTabs, value, forceMount, children, ...contentProps } = props;
+      const context = useTabsContext(CONTENT_NAME, __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)(
+        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
+      );
+    }
+  )
 );
 TabsContent.displayName = CONTENT_NAME;
 const TABS_NAME = "Tabs";
@@ -281,58 +285,64 @@ const TabsFrame = (0, import_web.styled)(import_stacks.SizableStack, {
   name: TABS_NAME
 });
 const Tabs = (0, import_web.withStaticProperties)(
-  React.forwardRef(
-    (props, forwardedRef) => {
-      const {
-        __scopeTabs,
-        value: valueProp,
-        onValueChange,
-        defaultValue,
-        orientation = "horizontal",
-        dir,
-        activationMode = "automatic",
-        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)(
-        TabsProvider,
-        {
-          scope: __scopeTabs,
-          baseId: (0, import_web.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
-            }
-          )
-        }
-      );
-    }
+  TabsFrame.extractable(
+    React.forwardRef(
+      (props, forwardedRef) => {
+        const {
+          __scopeTabs,
+          value: valueProp,
+          onValueChange,
+          defaultValue,
+          orientation = "horizontal",
+          dir,
+          activationMode = "automatic",
+          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)(
+          TabsProvider,
+          {
+            scope: __scopeTabs,
+            baseId: (0, import_web.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
+              }
+            )
+          }
+        );
+      }
+    )
   ),
   {
     List: TabsList,
+    /**
+     * @deprecated Use Tabs.Tab instead
+     */
     Trigger: TabsTrigger,
+    Tab: TabsTrigger,
     Content: TabsContent
   }
 );

package/dist/cjs/Tabs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Tabs.tsx"],
-  "sourcesContent": ["import type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { Group, GroupProps, useGroupItem } from '@tamagui/group'\nimport { RovingFocusGroup, createRovingFocusGroupScope } from '@tamagui/roving-focus'\nimport { SizableStack, ThemeableStack, ThemeableStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport {\n  GetProps,\n  SizeTokens,\n  Theme,\n  composeEventHandlers,\n  composeRefs,\n  isWeb,\n  styled,\n  useEvent,\n  useId,\n  withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n  name: TAB_LIST_NAME,\n  focusable: true,\n  // defaultVariants: {\n  //   flexGrow: 0,\n  // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n  /**\n   * Whether to loop over after reaching the end or start of the items\n   * @default true\n   */\n  loop?: boolean\n}\n\nconst TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(\n  (props: ScopedProps<TabsListProps>, forwardedRef) => {\n    const { __scopeTabs, loop = true, children, ...listProps } = props\n    const context = useTabsContext(TAB_LIST_NAME, __scopeTabs)\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n\n    return (\n      <RovingFocusGroup\n        asChild\n        orientation={context.orientation}\n        dir={context.dir}\n        loop={loop}\n        {...rovingFocusGroupScope}\n      >\n        <TabsListFrame\n          role=\"tablist\"\n          aria-orientation={context.orientation}\n          ref={forwardedRef}\n          axis={context.orientation}\n          {...listProps}\n        >\n          {children}\n        </TabsListFrame>\n      </RovingFocusGroup>\n    )\n  }\n)\n\nTabsList.displayName = TAB_LIST_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger'\n\nconst TabsTriggerFrame = styled(ThemeableStack, {\n  name: TRIGGER_NAME,\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n  cursor: 'pointer',\n\n  variants: {\n    size: {\n      '...size': getButtonSized,\n    },\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n    theme: {\n      Button: {\n        focusable: true,\n        hoverTheme: true,\n        pressTheme: true,\n        backgrounded: true,\n        borderWidth: 1,\n        borderColor: 'transparent',\n\n        pressStyle: {\n          borderColor: 'transparent',\n        },\n\n        hoverStyle: {\n          borderColor: 'transparent',\n        },\n\n        focusStyle: {\n          borderColor: '$borderColorFocus',\n        },\n      },\n    },\n  },\n})\n\ntype TabTriggerLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = ThemeableStackProps\ntype TabsTriggerProps = TabsTriggerFrameProps & {\n  /** The value for the tabs state to be changed to after activation of the trigger */\n  value: string\n\n  /** Used for making custom indicators when trigger interacted with */\n  onInteraction?: (type: InteractionType, layout: TabTriggerLayout | null) => void\n}\n\nconst TabsTrigger = TabsTriggerFrame.extractable(\n  React.forwardRef<HTMLButtonElement, TabsTriggerProps>(\n    (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n      const {\n        __scopeTabs,\n        value,\n        disabled = false,\n        onInteraction,\n        ...triggerProps\n      } = props\n      const context = useTabsContext(TRIGGER_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n      const isSelected = value === context.value\n      const [layout, setLayout] = React.useState<TabTriggerLayout | null>(null)\n      const triggerRef = React.useRef<HTMLButtonElement>(null)\n      const groupItemProps = useGroupItem({ disabled })\n\n      React.useEffect(() => {\n        context.registerTrigger()\n        return () => context.unregisterTrigger()\n      }, [])\n\n      React.useEffect(() => {\n        if (!triggerRef.current || !isWeb) return\n\n        function getTriggerSize() {\n          if (!triggerRef.current) return\n          setLayout({\n            width: triggerRef.current.offsetWidth,\n            height: triggerRef.current.offsetHeight,\n            x: triggerRef.current.offsetLeft,\n            y: triggerRef.current.offsetTop,\n          })\n        }\n        getTriggerSize()\n\n        const observer = new ResizeObserver(getTriggerSize)\n        observer.observe(triggerRef.current)\n\n        return () => {\n          if (!triggerRef.current) return\n          observer.unobserve(triggerRef.current)\n        }\n      }, [context.triggersCount])\n\n      React.useEffect(() => {\n        if (isSelected && layout) {\n          onInteraction?.('select', layout)\n        }\n      }, [isSelected, value, layout])\n\n      return (\n        <Theme forceClassName name={isSelected ? 'active' : null}>\n          <RovingFocusGroup.Item\n            asChild\n            {...rovingFocusGroupScope}\n            focusable={!disabled}\n            active={isSelected}\n          >\n            <TabsTriggerFrame\n              onLayout={(event) => {\n                if (!isWeb) {\n                  setLayout(event.nativeEvent.layout)\n                }\n              }}\n              onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n                if (layout) {\n                  onInteraction?.('hover', layout)\n                }\n              })}\n              onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n                onInteraction?.('hover', null)\n              })}\n              role=\"tab\"\n              aria-selected={isSelected}\n              aria-controls={contentId}\n              data-state={isSelected ? 'active' : 'inactive'}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              id={triggerId}\n              // @ts-ignore\n              size={context.size}\n              {...triggerProps}\n              ref={composeRefs(forwardedRef, triggerRef)}\n              onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n                // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n                // but not when the control key is pressed (avoiding MacOS right click)\n\n                const webChecks =\n                  !isWeb ||\n                  ((event as unknown as React.MouseEvent).button === 0 &&\n                    (event as unknown as React.MouseEvent).ctrlKey === false)\n                if (!disabled && !isSelected && webChecks) {\n                  context.onChange(value)\n                } else {\n                  // prevent focus to avoid accidental activation\n                  event.preventDefault()\n                }\n              })}\n              {...(isWeb && {\n                type: 'button',\n                onKeyDown: composeEventHandlers(\n                  (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n                  (event) => {\n                    if ([' ', 'Enter'].includes(event.key)) {\n                      context.onChange(value)\n                    }\n                  }\n                ),\n                onFocus: composeEventHandlers(props.onFocus, (event) => {\n                  if (layout) {\n                    onInteraction?.('focus', layout)\n                  }\n                  // handle \"automatic\" activation if necessary\n                  // ie. activate tab following focus\n                  const isAutomaticActivation = context.activationMode !== 'manual'\n                  if (!isSelected && !disabled && isAutomaticActivation) {\n                    context.onChange(value)\n                  }\n                }),\n                onBlur: composeEventHandlers(props.onFocus, () => {\n                  onInteraction?.('focus', null)\n                }),\n              })}\n              {...groupItemProps}\n            />\n          </RovingFocusGroup.Item>\n        </Theme>\n      )\n    }\n  )\n)\n\nTabsTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent'\n\nconst TabsContentFrame = styled(ThemeableStack, {\n  name: CONTENT_NAME,\n})\ntype TabsContentFrameProps = GetProps<typeof TabsContentFrame>\ntype TabsContentProps = TabsContentFrameProps & {\n  /** Will show the content when the value matches the state of Tabs root */\n  value: string\n\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Tamagui animations.\n   */\n  forceMount?: true\n}\n\nconst TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(\n  (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n    const { __scopeTabs, value, forceMount, children, ...contentProps } = props\n    const context = useTabsContext(CONTENT_NAME, __scopeTabs)\n    const isSelected = value === context.value\n    const show = forceMount || isSelected\n\n    const triggerId = makeTriggerId(context.baseId, value)\n    const contentId = makeContentId(context.baseId, value)\n\n    if (!show) return null\n    return (\n      <TabsContentFrame\n        key={value}\n        data-state={isSelected ? 'active' : 'inactive'}\n        data-orientation={context.orientation}\n        role=\"tabpanel\"\n        aria-labelledby={triggerId}\n        // @ts-ignore\n        hidden={!show}\n        id={contentId}\n        tabIndex={0}\n        {...contentProps}\n        ref={forwardedRef}\n      >\n        {children}\n      </TabsContentFrame>\n    )\n  }\n)\n\nTabsContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs'\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope }\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n  createRovingFocusGroupScope,\n])\nconst useRovingFocusGroupScope = createRovingFocusGroupScope()\n\ntype TabsContextValue = {\n  baseId: string\n  value?: string\n  onChange: (value: string) => void\n  orientation?: TabsProps['orientation']\n  dir?: TabsProps['dir']\n  activationMode?: TabsProps['activationMode']\n  size: SizeTokens\n  registerTrigger: () => void\n  unregisterTrigger: () => void\n  triggersCount: number\n}\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME)\n\nconst TabsFrame = styled(SizableStack, {\n  name: TABS_NAME,\n})\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>\ntype TabsFrameProps = GetProps<typeof TabsFrame>\ntype TabsProps = TabsFrameProps & {\n  /** The value for the selected tab, if controlled */\n  value?: string\n  /** The value of the tab to select by default, if uncontrolled */\n  defaultValue?: string\n  /** A function called when a new tab is selected */\n  onValueChange?: (value: string) => void\n  /**\n   * The orientation the tabs are layed out.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   * @defaultValue horizontal\n   */\n  orientation?: RovingFocusGroupProps['orientation']\n  /**\n   * The direction of navigation between toolbar items.\n   */\n  dir?: RovingFocusGroupProps['dir']\n  /**\n   * Whether a tab is activated automatically or manually. Only supported in web.\n   * @defaultValue automatic\n   * */\n  activationMode?: 'automatic' | 'manual'\n}\n\nexport const Tabs = withStaticProperties(\n  React.forwardRef<HTMLDivElement, TabsProps>(\n    (props: ScopedProps<TabsProps>, 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 direction = useDirection(dir)\n      const [value, setValue] = useControllableState({\n        prop: valueProp,\n        onChange: onValueChange,\n        defaultProp: defaultValue ?? '',\n      })\n      const [triggersCount, setTriggersCount] = React.useState(0)\n      const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))\n      const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))\n\n      return (\n        <TabsProvider\n          scope={__scopeTabs}\n          baseId={useId()}\n          value={value}\n          onChange={setValue}\n          orientation={orientation}\n          dir={direction}\n          activationMode={activationMode}\n          size={size}\n          registerTrigger={registerTrigger}\n          triggersCount={triggersCount}\n          unregisterTrigger={unregisterTrigger}\n        >\n          <TabsFrame\n            direction={direction}\n            //   dir={direction}\n            data-orientation={orientation}\n            {...tabsProps}\n            ref={forwardedRef}\n          />\n        </TabsProvider>\n      )\n    }\n  ),\n  {\n    List: TabsList,\n    Trigger: TabsTrigger,\n    Content: TabsContent,\n  }\n)\n\nTabs.displayName = TABS_NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`\n}\n\nfunction makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`\n}\n\nexport type {\n  TabsProps,\n  TabsListProps,\n  TabsTriggerProps,\n  TabsContentProps,\n  TabTriggerLayout,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { Group, GroupProps, useGroupItem } from '@tamagui/group'\nimport { RovingFocusGroup, createRovingFocusGroupScope } from '@tamagui/roving-focus'\nimport { SizableStack, ThemeableStack, ThemeableStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport {\n  GetProps,\n  SizeTokens,\n  Theme,\n  composeEventHandlers,\n  composeRefs,\n  isWeb,\n  styled,\n  useEvent,\n  useId,\n  withStaticProperties,\n} from '@tamagui/web'\nimport * as React from 'react'\nimport type { LayoutRectangle } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList'\n\nconst TabsListFrame = styled(Group, {\n  name: TAB_LIST_NAME,\n  focusable: true,\n  // defaultVariants: {\n  //   flexGrow: 0,\n  // },\n})\n\ntype TabsListFrameProps = GroupProps\n\ntype TabsListProps = TabsListFrameProps & {\n  /**\n   * Whether to loop over after reaching the end or start of the items\n   * @default true\n   */\n  loop?: boolean\n}\n\nconst TabsList = TabsListFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsListProps>(\n    (props: ScopedProps<TabsListProps>, forwardedRef) => {\n      const { __scopeTabs, loop = true, children, ...listProps } = props\n      const context = useTabsContext(TAB_LIST_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n\n      return (\n        <RovingFocusGroup\n          asChild\n          orientation={context.orientation}\n          dir={context.dir}\n          loop={loop}\n          {...rovingFocusGroupScope}\n        >\n          <TabsListFrame\n            role=\"tablist\"\n            aria-orientation={context.orientation}\n            ref={forwardedRef}\n            axis={context.orientation}\n            {...listProps}\n          >\n            {children}\n          </TabsListFrame>\n        </RovingFocusGroup>\n      )\n    }\n  )\n)\n\nTabsList.displayName = TAB_LIST_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger'\n\nconst TabsTriggerFrame = styled(ThemeableStack, {\n  name: TRIGGER_NAME,\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n  cursor: 'pointer',\n  focusable: true,\n\n  variants: {\n    size: {\n      '...size': getButtonSized,\n    },\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n    unstyled: {\n      false: {\n        backgroundColor: '$background',\n\n        pressStyle: {\n          backgroundColor: '$backgroundPress',\n        },\n\n        hoverStyle: {\n          backgroundColor: '$backgroundHover',\n        },\n\n        focusStyle: {\n          backgroundColor: '$backgroundFocus',\n        },\n      },\n    },\n  } as const,\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\n/**\n * @deprecated Use `TabLayout` instead\n */\ntype TabsTriggerLayout = LayoutRectangle\ntype TabLayout = LayoutRectangle\ntype InteractionType = 'select' | 'focus' | 'hover'\n\ntype TabsTriggerFrameProps = GetProps<typeof TabsTriggerFrame>\n/**\n * @deprecated use `TabTabsProps` instead\n */\ntype TabsTriggerProps = TabsTriggerFrameProps & {\n  /** The value for the tabs state to be changed to after activation of the trigger */\n  value: string\n\n  /** Used for making custom indicators when trigger interacted with */\n  onInteraction?: (type: InteractionType, layout: TabLayout | null) => void\n}\n\ntype TabsTabProps = TabsTriggerProps\n\nconst TabsTrigger = TabsTriggerFrame.extractable(\n  React.forwardRef<HTMLButtonElement, TabsTriggerProps>(\n    (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n      const {\n        __scopeTabs,\n        value,\n        disabled = false,\n        onInteraction,\n        ...triggerProps\n      } = props\n      const context = useTabsContext(TRIGGER_NAME, __scopeTabs)\n      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs)\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n      const isSelected = value === context.value\n      const [layout, setLayout] = React.useState<TabLayout | null>(null)\n      const triggerRef = React.useRef<HTMLButtonElement>(null)\n      const groupItemProps = useGroupItem({ disabled })\n\n      React.useEffect(() => {\n        context.registerTrigger()\n        return () => context.unregisterTrigger()\n      }, [])\n\n      React.useEffect(() => {\n        if (!triggerRef.current || !isWeb) return\n\n        function getTriggerSize() {\n          if (!triggerRef.current) return\n          setLayout({\n            width: triggerRef.current.offsetWidth,\n            height: triggerRef.current.offsetHeight,\n            x: triggerRef.current.offsetLeft,\n            y: triggerRef.current.offsetTop,\n          })\n        }\n        getTriggerSize()\n\n        const observer = new ResizeObserver(getTriggerSize)\n        observer.observe(triggerRef.current)\n\n        return () => {\n          if (!triggerRef.current) return\n          observer.unobserve(triggerRef.current)\n        }\n      }, [context.triggersCount])\n\n      React.useEffect(() => {\n        if (isSelected && layout) {\n          onInteraction?.('select', layout)\n        }\n      }, [isSelected, value, layout])\n\n      return (\n        <Theme forceClassName name={isSelected ? 'active' : null}>\n          <RovingFocusGroup.Item\n            asChild\n            {...rovingFocusGroupScope}\n            focusable={!disabled}\n            active={isSelected}\n          >\n            <TabsTriggerFrame\n              onLayout={(event) => {\n                if (!isWeb) {\n                  setLayout(event.nativeEvent.layout)\n                }\n              }}\n              onHoverIn={composeEventHandlers(props.onHoverIn, () => {\n                if (layout) {\n                  onInteraction?.('hover', layout)\n                }\n              })}\n              onHoverOut={composeEventHandlers(props.onHoverOut, () => {\n                onInteraction?.('hover', null)\n              })}\n              role=\"tab\"\n              aria-selected={isSelected}\n              aria-controls={contentId}\n              data-state={isSelected ? 'active' : 'inactive'}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              id={triggerId}\n              // @ts-ignore\n              size={context.size}\n              {...triggerProps}\n              ref={composeRefs(forwardedRef, triggerRef)}\n              onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n                // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n                // but not when the control key is pressed (avoiding MacOS right click)\n\n                const webChecks =\n                  !isWeb ||\n                  ((event as unknown as React.MouseEvent).button === 0 &&\n                    (event as unknown as React.MouseEvent).ctrlKey === false)\n                if (!disabled && !isSelected && webChecks) {\n                  context.onChange(value)\n                } else {\n                  // prevent focus to avoid accidental activation\n                  event.preventDefault()\n                }\n              })}\n              {...(isWeb && {\n                type: 'button',\n                onKeyDown: composeEventHandlers(\n                  (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n                  (event) => {\n                    if ([' ', 'Enter'].includes(event.key)) {\n                      context.onChange(value)\n                      event.preventDefault()\n                    }\n                  }\n                ),\n                onFocus: composeEventHandlers(props.onFocus, (event) => {\n                  if (layout) {\n                    onInteraction?.('focus', layout)\n                  }\n                  // handle \"automatic\" activation if necessary\n                  // ie. activate tab following focus\n                  const isAutomaticActivation = context.activationMode !== 'manual'\n                  if (!isSelected && !disabled && isAutomaticActivation) {\n                    context.onChange(value)\n                  }\n                }),\n                onBlur: composeEventHandlers(props.onFocus, () => {\n                  onInteraction?.('focus', null)\n                }),\n              })}\n              {...groupItemProps}\n            />\n          </RovingFocusGroup.Item>\n        </Theme>\n      )\n    }\n  )\n)\n\nTabsTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent'\n\nconst TabsContentFrame = styled(ThemeableStack, {\n  name: CONTENT_NAME,\n})\ntype TabsContentFrameProps = GetProps<typeof TabsContentFrame>\ntype TabsContentProps = TabsContentFrameProps & {\n  /** Will show the content when the value matches the state of Tabs root */\n  value: string\n\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Tamagui animations.\n   */\n  forceMount?: true\n}\n\nconst TabsContent = TabsContentFrame.extractable(\n  React.forwardRef<HTMLDivElement, TabsContentProps>(\n    (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n      const { __scopeTabs, value, forceMount, children, ...contentProps } = props\n      const context = useTabsContext(CONTENT_NAME, __scopeTabs)\n      const isSelected = value === context.value\n      const show = forceMount || isSelected\n\n      const triggerId = makeTriggerId(context.baseId, value)\n      const contentId = makeContentId(context.baseId, value)\n\n      if (!show) return null\n      return (\n        <TabsContentFrame\n          key={value}\n          data-state={isSelected ? 'active' : 'inactive'}\n          data-orientation={context.orientation}\n          role=\"tabpanel\"\n          aria-labelledby={triggerId}\n          // @ts-ignore\n          hidden={!show}\n          id={contentId}\n          tabIndex={0}\n          {...contentProps}\n          ref={forwardedRef}\n        >\n          {children}\n        </TabsContentFrame>\n      )\n    }\n  )\n)\n\nTabsContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs'\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope }\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n  createRovingFocusGroupScope,\n])\nconst useRovingFocusGroupScope = createRovingFocusGroupScope()\n\ntype TabsContextValue = {\n  baseId: string\n  value?: string\n  onChange: (value: string) => void\n  orientation?: TabsProps['orientation']\n  dir?: TabsProps['dir']\n  activationMode?: TabsProps['activationMode']\n  size: SizeTokens\n  registerTrigger: () => void\n  unregisterTrigger: () => void\n  triggersCount: number\n}\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME)\n\nconst TabsFrame = styled(SizableStack, {\n  name: TABS_NAME,\n})\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>\ntype TabsFrameProps = GetProps<typeof TabsFrame>\ntype TabsProps = TabsFrameProps & {\n  /** The value for the selected tab, if controlled */\n  value?: string\n  /** The value of the tab to select by default, if uncontrolled */\n  defaultValue?: string\n  /** A function called when a new tab is selected */\n  onValueChange?: (value: string) => void\n  /**\n   * The orientation the tabs are layed out.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   * @defaultValue horizontal\n   */\n  orientation?: RovingFocusGroupProps['orientation']\n  /**\n   * The direction of navigation between toolbar items.\n   */\n  dir?: RovingFocusGroupProps['dir']\n  /**\n   * Whether a tab is activated automatically or manually. Only supported in web.\n   * @defaultValue automatic\n   * */\n  activationMode?: 'automatic' | 'manual'\n}\n\nexport const Tabs = withStaticProperties(\n  TabsFrame.extractable(\n    React.forwardRef<HTMLDivElement, TabsProps>(\n      (props: ScopedProps<TabsProps>, 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 direction = useDirection(dir)\n        const [value, setValue] = useControllableState({\n          prop: valueProp,\n          onChange: onValueChange,\n          defaultProp: defaultValue ?? '',\n        })\n        const [triggersCount, setTriggersCount] = React.useState(0)\n        const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1))\n        const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1))\n\n        return (\n          <TabsProvider\n            scope={__scopeTabs}\n            baseId={useId()}\n            value={value}\n            onChange={setValue}\n            orientation={orientation}\n            dir={direction}\n            activationMode={activationMode}\n            size={size}\n            registerTrigger={registerTrigger}\n            triggersCount={triggersCount}\n            unregisterTrigger={unregisterTrigger}\n          >\n            <TabsFrame\n              direction={direction}\n              //   dir={direction}\n              data-orientation={orientation}\n              {...tabsProps}\n              ref={forwardedRef}\n            />\n          </TabsProvider>\n        )\n      }\n    )\n  ),\n  {\n    List: TabsList,\n    /**\n     * @deprecated Use Tabs.Tab instead\n     */\n    Trigger: TabsTrigger,\n    Tab: TabsTrigger,\n    Content: TabsContent,\n  }\n)\nTabs.displayName = TABS_NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`\n}\n\nfunction makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`\n}\n\nexport type {\n  TabsProps,\n  TabsListProps,\n  TabsTriggerProps,\n  TabsTriggerLayout,\n  TabsTabProps,\n  TabsContentProps,\n  TabLayout,\n}\n"],
+  "mappings": "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",
   "names": []
 }