@tamagui/tabs 1.11.2 → 1.12.1

package/dist/jsx/Tabs.js

@@ -24,25 +24,27 @@ const TabsListFrame = styled(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 <RovingFocusGroup
-      asChild
-      orientation={context.orientation}
-      dir={context.dir}
-      loop={loop}
-      {...rovingFocusGroupScope}
-    ><TabsListFrame
-      role="tablist"
-      aria-orientation={context.orientation}
-      ref={forwardedRef}
-      axis={context.orientation}
-      {...listProps}
-    >{children}</TabsListFrame></RovingFocusGroup>;
-  }
+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 <RovingFocusGroup
+        asChild
+        orientation={context.orientation}
+        dir={context.dir}
+        loop={loop}
+        {...rovingFocusGroupScope}
+      ><TabsListFrame
+        role="tablist"
+        aria-orientation={context.orientation}
+        ref={forwardedRef}
+        axis={context.orientation}
+        {...listProps}
+      >{children}</TabsListFrame></RovingFocusGroup>;
+    }
+  )
 );
 TabsList.displayName = TAB_LIST_NAME;
 const TRIGGER_NAME = "TabsTrigger";
@@ -53,6 +55,7 @@ const TabsTriggerFrame = styled(ThemeableStack, {
   flexWrap: "nowrap",
   flexDirection: "row",
   cursor: "pointer",
+  focusable: true,
   variants: {
     size: {
       "...size": getButtonSized
@@ -62,25 +65,23 @@ const TabsTriggerFrame = styled(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(
@@ -176,6 +177,7 @@ const TabsTrigger = TabsTriggerFrame.extractable(
             (event) => {
               if ([" ", "Enter"].includes(event.key)) {
                 context.onChange(value);
+                event.preventDefault();
               }
             }
           ),
@@ -202,29 +204,31 @@ const CONTENT_NAME = "TabsContent";
 const TabsContentFrame = styled(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 <TabsContentFrame
-      key={value}
-      data-state={isSelected ? "active" : "inactive"}
-      data-orientation={context.orientation}
-      role="tabpanel"
-      aria-labelledby={triggerId}
-      hidden={!show}
-      id={contentId}
-      tabIndex={0}
-      {...contentProps}
-      ref={forwardedRef}
-    >{children}</TabsContentFrame>;
-  }
+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 <TabsContentFrame
+        key={value}
+        data-state={isSelected ? "active" : "inactive"}
+        data-orientation={context.orientation}
+        role="tabpanel"
+        aria-labelledby={triggerId}
+        hidden={!show}
+        id={contentId}
+        tabIndex={0}
+        {...contentProps}
+        ref={forwardedRef}
+      >{children}</TabsContentFrame>;
+    }
+  )
 );
 TabsContent.displayName = CONTENT_NAME;
 const TABS_NAME = "Tabs";
@@ -237,51 +241,57 @@ const TabsFrame = styled(SizableStack, {
   name: TABS_NAME
 });
 const Tabs = withStaticProperties(
-  React.forwardRef(
-    (props, forwardedRef) => {
-      const {
-        __scopeTabs,
-        value: valueProp,
-        onValueChange,
-        defaultValue,
-        orientation = "horizontal",
-        dir,
-        activationMode = "automatic",
-        size = "$true",
-        ...tabsProps
-      } = props;
-      const direction = useDirection(dir);
-      const [value, setValue] = useControllableState({
-        prop: valueProp,
-        onChange: onValueChange,
-        defaultProp: defaultValue ?? ""
-      });
-      const [triggersCount, setTriggersCount] = React.useState(0);
-      const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1));
-      const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1));
-      return <TabsProvider
-        scope={__scopeTabs}
-        baseId={useId()}
-        value={value}
-        onChange={setValue}
-        orientation={orientation}
-        dir={direction}
-        activationMode={activationMode}
-        size={size}
-        registerTrigger={registerTrigger}
-        triggersCount={triggersCount}
-        unregisterTrigger={unregisterTrigger}
-      ><TabsFrame
-        direction={direction}
-        data-orientation={orientation}
-        {...tabsProps}
-        ref={forwardedRef}
-      /></TabsProvider>;
-    }
+  TabsFrame.extractable(
+    React.forwardRef(
+      (props, forwardedRef) => {
+        const {
+          __scopeTabs,
+          value: valueProp,
+          onValueChange,
+          defaultValue,
+          orientation = "horizontal",
+          dir,
+          activationMode = "automatic",
+          size = "$true",
+          ...tabsProps
+        } = props;
+        const direction = useDirection(dir);
+        const [value, setValue] = useControllableState({
+          prop: valueProp,
+          onChange: onValueChange,
+          defaultProp: defaultValue ?? ""
+        });
+        const [triggersCount, setTriggersCount] = React.useState(0);
+        const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1));
+        const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1));
+        return <TabsProvider
+          scope={__scopeTabs}
+          baseId={useId()}
+          value={value}
+          onChange={setValue}
+          orientation={orientation}
+          dir={direction}
+          activationMode={activationMode}
+          size={size}
+          registerTrigger={registerTrigger}
+          triggersCount={triggersCount}
+          unregisterTrigger={unregisterTrigger}
+        ><TabsFrame
+          direction={direction}
+          data-orientation={orientation}
+          {...tabsProps}
+          ref={forwardedRef}
+        /></TabsProvider>;
+      }
+    )
   ),
   {
     List: TabsList,
+    /**
+     * @deprecated Use Tabs.Tab instead
+     */
     Trigger: TabsTrigger,
+    Tab: TabsTrigger,
     Content: TabsContent
   }
 );

package/dist/jsx/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": []
 }

package/dist/jsx/Tabs.mjs

@@ -24,25 +24,27 @@ const TabsListFrame = styled(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 <RovingFocusGroup
-      asChild
-      orientation={context.orientation}
-      dir={context.dir}
-      loop={loop}
-      {...rovingFocusGroupScope}
-    ><TabsListFrame
-      role="tablist"
-      aria-orientation={context.orientation}
-      ref={forwardedRef}
-      axis={context.orientation}
-      {...listProps}
-    >{children}</TabsListFrame></RovingFocusGroup>;
-  }
+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 <RovingFocusGroup
+        asChild
+        orientation={context.orientation}
+        dir={context.dir}
+        loop={loop}
+        {...rovingFocusGroupScope}
+      ><TabsListFrame
+        role="tablist"
+        aria-orientation={context.orientation}
+        ref={forwardedRef}
+        axis={context.orientation}
+        {...listProps}
+      >{children}</TabsListFrame></RovingFocusGroup>;
+    }
+  )
 );
 TabsList.displayName = TAB_LIST_NAME;
 const TRIGGER_NAME = "TabsTrigger";
@@ -53,6 +55,7 @@ const TabsTriggerFrame = styled(ThemeableStack, {
   flexWrap: "nowrap",
   flexDirection: "row",
   cursor: "pointer",
+  focusable: true,
   variants: {
     size: {
       "...size": getButtonSized
@@ -62,25 +65,23 @@ const TabsTriggerFrame = styled(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(
@@ -176,6 +177,7 @@ const TabsTrigger = TabsTriggerFrame.extractable(
             (event) => {
               if ([" ", "Enter"].includes(event.key)) {
                 context.onChange(value);
+                event.preventDefault();
               }
             }
           ),
@@ -202,29 +204,31 @@ const CONTENT_NAME = "TabsContent";
 const TabsContentFrame = styled(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 <TabsContentFrame
-      key={value}
-      data-state={isSelected ? "active" : "inactive"}
-      data-orientation={context.orientation}
-      role="tabpanel"
-      aria-labelledby={triggerId}
-      hidden={!show}
-      id={contentId}
-      tabIndex={0}
-      {...contentProps}
-      ref={forwardedRef}
-    >{children}</TabsContentFrame>;
-  }
+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 <TabsContentFrame
+        key={value}
+        data-state={isSelected ? "active" : "inactive"}
+        data-orientation={context.orientation}
+        role="tabpanel"
+        aria-labelledby={triggerId}
+        hidden={!show}
+        id={contentId}
+        tabIndex={0}
+        {...contentProps}
+        ref={forwardedRef}
+      >{children}</TabsContentFrame>;
+    }
+  )
 );
 TabsContent.displayName = CONTENT_NAME;
 const TABS_NAME = "Tabs";
@@ -237,51 +241,57 @@ const TabsFrame = styled(SizableStack, {
   name: TABS_NAME
 });
 const Tabs = withStaticProperties(
-  React.forwardRef(
-    (props, forwardedRef) => {
-      const {
-        __scopeTabs,
-        value: valueProp,
-        onValueChange,
-        defaultValue,
-        orientation = "horizontal",
-        dir,
-        activationMode = "automatic",
-        size = "$true",
-        ...tabsProps
-      } = props;
-      const direction = useDirection(dir);
-      const [value, setValue] = useControllableState({
-        prop: valueProp,
-        onChange: onValueChange,
-        defaultProp: defaultValue ?? ""
-      });
-      const [triggersCount, setTriggersCount] = React.useState(0);
-      const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1));
-      const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1));
-      return <TabsProvider
-        scope={__scopeTabs}
-        baseId={useId()}
-        value={value}
-        onChange={setValue}
-        orientation={orientation}
-        dir={direction}
-        activationMode={activationMode}
-        size={size}
-        registerTrigger={registerTrigger}
-        triggersCount={triggersCount}
-        unregisterTrigger={unregisterTrigger}
-      ><TabsFrame
-        direction={direction}
-        data-orientation={orientation}
-        {...tabsProps}
-        ref={forwardedRef}
-      /></TabsProvider>;
-    }
+  TabsFrame.extractable(
+    React.forwardRef(
+      (props, forwardedRef) => {
+        const {
+          __scopeTabs,
+          value: valueProp,
+          onValueChange,
+          defaultValue,
+          orientation = "horizontal",
+          dir,
+          activationMode = "automatic",
+          size = "$true",
+          ...tabsProps
+        } = props;
+        const direction = useDirection(dir);
+        const [value, setValue] = useControllableState({
+          prop: valueProp,
+          onChange: onValueChange,
+          defaultProp: defaultValue ?? ""
+        });
+        const [triggersCount, setTriggersCount] = React.useState(0);
+        const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1));
+        const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1));
+        return <TabsProvider
+          scope={__scopeTabs}
+          baseId={useId()}
+          value={value}
+          onChange={setValue}
+          orientation={orientation}
+          dir={direction}
+          activationMode={activationMode}
+          size={size}
+          registerTrigger={registerTrigger}
+          triggersCount={triggersCount}
+          unregisterTrigger={unregisterTrigger}
+        ><TabsFrame
+          direction={direction}
+          data-orientation={orientation}
+          {...tabsProps}
+          ref={forwardedRef}
+        /></TabsProvider>;
+      }
+    )
   ),
   {
     List: TabsList,
+    /**
+     * @deprecated Use Tabs.Tab instead
+     */
     Trigger: TabsTrigger,
+    Tab: TabsTrigger,
     Content: TabsContent
   }
 );