@tamagui/demos 1.6.3 → 1.7.1

package/dist/jsx/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport * from './useOnIntersecting'\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,cAAc;",
+  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,cAAc;",
   "names": []
 }

package/dist/jsx/index.mjs

@@ -37,6 +37,8 @@ import { ThemeInverseDemo } from "./ThemeInverseDemo";
 import { TooltipDemo } from "./TooltipDemo";
 import { ColorsDemo } from "./ColorsDemo";
 import { TokensDemo } from "./TokensDemo";
+import { TabsDemo } from "./TabsDemo";
+import { TabsAdvancedDemo } from "./TabsAdvancedDemo";
 export * from "./useOnIntersecting";
 export {
   AddThemeDemo,
@@ -73,6 +75,8 @@ export {
   SpinnerDemo,
   StacksDemo,
   SwitchDemo,
+  TabsAdvancedDemo,
+  TabsDemo,
   TextDemo,
   ThemeInverseDemo,
   TokensDemo,

package/dist/jsx/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport * from './useOnIntersecting'\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,cAAc;",
+  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,cAAc;",
   "names": []
 }

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@tamagui/demos",
-  "version": "1.6.3",
+  "version": "1.7.1",
   "sideEffects": [
     "*.css"
   ],
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
-  "type": "module",
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
@@ -29,28 +28,28 @@
     }
   },
   "dependencies": {
-    "@tamagui/avatar": "1.6.3",
-    "@tamagui/button": "1.6.3",
-    "@tamagui/config": "1.6.3",
-    "@tamagui/core": "1.6.3",
-    "@tamagui/list-item": "1.6.3",
-    "@tamagui/logo": "1.6.3",
-    "@tamagui/menu": "1.6.3",
-    "@tamagui/popover": "1.6.3",
-    "@tamagui/progress": "1.6.3",
-    "@tamagui/radio-group": "1.6.3",
-    "@tamagui/select": "1.6.3",
-    "@tamagui/sheet": "1.6.3",
-    "@tamagui/slider": "1.6.3",
-    "@tamagui/stacks": "1.6.3",
-    "tamagui": "1.6.3"
+    "@tamagui/avatar": "1.7.1",
+    "@tamagui/button": "1.7.1",
+    "@tamagui/config": "1.7.1",
+    "@tamagui/core": "1.7.1",
+    "@tamagui/list-item": "1.7.1",
+    "@tamagui/logo": "1.7.1",
+    "@tamagui/menu": "1.7.1",
+    "@tamagui/popover": "1.7.1",
+    "@tamagui/progress": "1.7.1",
+    "@tamagui/radio-group": "1.7.1",
+    "@tamagui/select": "1.7.1",
+    "@tamagui/sheet": "1.7.1",
+    "@tamagui/slider": "1.7.1",
+    "@tamagui/stacks": "1.7.1",
+    "tamagui": "1.7.1"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.6.3",
+    "@tamagui/build": "1.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/ProgressDemo.tsx

@@ -24,7 +24,7 @@ export function ProgressDemo() {
         </Progress>
       </YStack>
 
-      <XStack ai="center" space pos="absolute" b={10} l={20} $xxs={{ dsp: 'none' }}>
+      <XStack ai="center" space pos="absolute" b="$3" l="$4" $xxs={{ dsp: 'none' }}>
         <Slider
           size="$2"
           w={130}
@@ -36,7 +36,7 @@ export function ProgressDemo() {
             setSize(val)
           }}
         >
-          <Slider.Track>
+          <Slider.Track bw={1} boc="$color5">
             <Slider.TrackActive />
           </Slider.Track>
           <Slider.Thumb circular index={0} />

package/src/SliderDemo.tsx

@@ -15,7 +15,7 @@ function SimpleSlider({ children, ...props }: SliderProps) {
       <Slider.Track>
         <Slider.TrackActive />
       </Slider.Track>
-      <Slider.Thumb bordered circular elevate index={0} />
+      <Slider.Thumb index={0} circular elevate />
       {children}
     </Slider>
   )

package/src/TabsAdvancedDemo.tsx

@@ -0,0 +1,148 @@
+import { useRef, useState } from 'react'
+import {
+  AnimatePresence,
+  H5,
+  SizableText,
+  Stack,
+  TabTriggerLayout,
+  Tabs,
+  TabsTriggerProps,
+  YStack,
+  styled,
+} from 'tamagui'
+
+export const TabsAdvancedDemo = () => {
+  const [currentTab, setCurrentTab] = useState('tab1')
+
+  // Layout of the trigger user might intend to select (hovering / focusing)
+  const [IntentIndicator, setIntentIndicator] = useState<TabTriggerLayout | null>(null)
+
+  // Layout of the trigger user selected
+  const [selectIndicator, setSelectIndicator] = useState<TabTriggerLayout | null>(null)
+  const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)
+
+  const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {
+    prevSelectionIndicatorLayout.current = selectIndicator
+    setSelectIndicator(newSize)
+  }
+
+  /**
+   * -1: from left
+   *  0: n/a
+   *  1: from right
+   */
+  const direction = (() => {
+    if (
+      !selectIndicator ||
+      !prevSelectionIndicatorLayout.current ||
+      selectIndicator.x === prevSelectionIndicatorLayout.current.x
+    ) {
+      return 0
+    }
+    return selectIndicator.x > prevSelectionIndicatorLayout.current.x ? -1 : 1
+  })()
+
+  const enterVariant =
+    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'
+  const exitVariant =
+    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'
+
+  const handleOnInteraction: TabsTriggerProps['onInteraction'] = (type, layout) => {
+    if (type === 'select') {
+      handleUpdateSelectionIndicator(layout)
+    } else {
+      setIntentIndicator(layout)
+    }
+  }
+
+  return (
+    <Tabs
+      value={currentTab}
+      onValueChange={setCurrentTab}
+      orientation="horizontal"
+      br="$4"
+      size="$3"
+      p="$2"
+      height={150}
+      flexDirection="column"
+      activationMode="manual"
+    >
+      <YStack borderColor="$color3" borderBottomWidth="$0.5">
+        <Tabs.List
+          loop={false}
+          aria-label="Manage your account"
+          disablePassBorderRadius
+          overflow="visible"
+          pb="$1.5"
+        >
+          {IntentIndicator && (
+            <TabsRovingIndicator
+              width={IntentIndicator.width}
+              height={IntentIndicator.height}
+              x={IntentIndicator.x}
+              y={IntentIndicator.y}
+            />
+          )}
+
+          {selectIndicator && (
+            <TabsRovingIndicator
+              theme="active"
+              active
+              width={selectIndicator.width}
+              height="$0.25"
+              x={selectIndicator.x}
+              borderRadius={0}
+              bottom={-3}
+            />
+          )}
+
+          <Tabs.Trigger value="tab1" onInteraction={handleOnInteraction}>
+            <SizableText>Profile</SizableText>
+          </Tabs.Trigger>
+          <Tabs.Trigger value="tab2" onInteraction={handleOnInteraction}>
+            <SizableText>Connections</SizableText>
+          </Tabs.Trigger>
+          <Tabs.Trigger value="tab3" onInteraction={handleOnInteraction}>
+            <SizableText>Notifications</SizableText>
+          </Tabs.Trigger>
+        </Tabs.List>
+      </YStack>
+
+      <AnimatePresence
+        exitBeforeEnter
+        enterVariant={enterVariant}
+        exitVariant={exitVariant}
+      >
+        <AnimatedYStack key={currentTab} animation="100ms" x={0} o={1} f={1}>
+          <Tabs.Content value={currentTab} forceMount f={1} jc="center">
+            <H5 ta="center">{currentTab}</H5>
+          </Tabs.Content>
+        </AnimatedYStack>
+      </AnimatePresence>
+    </Tabs>
+  )
+}
+
+const TabsRovingIndicator = styled(Stack, {
+  position: 'absolute',
+  backgroundColor: '$color5',
+  opacity: 1,
+  animation: '100ms',
+  borderRadius: '$4',
+
+  variants: {
+    active: {
+      true: {
+        backgroundColor: '$color8',
+      },
+    },
+  },
+})
+
+const AnimatedYStack = styled(YStack, {
+  variants: {
+    isLeft: { true: { x: -25, opacity: 0 } },
+    isRight: { true: { x: 25, opacity: 0 } },
+    defaultFade: { true: { opacity: 0 } },
+  } as const,
+})

package/src/TabsDemo.tsx

@@ -0,0 +1,91 @@
+import { useState } from 'react'
+import { Button, H5, SizableText, Tabs, XStack } from 'tamagui'
+
+const demos = ['horizontal', 'vertical'] as const
+
+export function TabsDemo() {
+  const [demoIndex, setDemoIndex] = useState(0)
+  const demo = demos[demoIndex]
+
+  return (
+    <>
+      {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}
+
+      <XStack ai="center" space pos="absolute" b="$3" l="$4" $xxs={{ dsp: 'none' }}>
+        <Button size="$2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>
+          {demo}
+        </Button>
+      </XStack>
+    </>
+  )
+}
+
+const HorizontalTabs = () => {
+  return (
+    <Tabs
+      defaultValue="tab1"
+      orientation="horizontal"
+      flexDirection="column"
+      width={400}
+      height={150}
+      br="$4"
+    >
+      <Tabs.List disablePassBorderRadius="bottom" aria-label="Manage your account">
+        <Tabs.Trigger theme="Button" f={1} value="tab1">
+          <SizableText fontFamily="$body">Profile</SizableText>
+        </Tabs.Trigger>
+        <Tabs.Trigger theme="Button" f={1} value="tab2">
+          <SizableText fontFamily="$body">Connections</SizableText>
+        </Tabs.Trigger>
+        <Tabs.Trigger theme="Button" f={1} value="tab3">
+          <SizableText fontFamily="$body">Notifications</SizableText>
+        </Tabs.Trigger>
+      </Tabs.List>
+
+      <Tabs.Content value="tab1" key="tab1" p="$5" ai="center" jc="center" f={1}>
+        <H5>Profile</H5>
+      </Tabs.Content>
+
+      <Tabs.Content value="tab2" key="tab2" p="$5" ai="center" jc="center" f={1}>
+        <H5>Connections</H5>
+      </Tabs.Content>
+
+      <Tabs.Content value="tab3" key="tab3" p="$5" ai="center" jc="center" f={1}>
+        <H5>Notifications</H5>
+      </Tabs.Content>
+    </Tabs>
+  )
+}
+
+const VerticalTabs = () => {
+  return (
+    <Tabs
+      defaultValue="tab1"
+      flexDirection="row"
+      orientation="vertical"
+      width={400}
+      br="$4"
+    >
+      <Tabs.List disablePassBorderRadius="end" aria-label="Manage your account">
+        <Tabs.Trigger theme="Button" value="tab1">
+          <SizableText fontFamily="$body">Profile</SizableText>
+        </Tabs.Trigger>
+        <Tabs.Trigger theme="Button" value="tab2">
+          <SizableText fontFamily="$body">Connections</SizableText>
+        </Tabs.Trigger>
+        <Tabs.Trigger theme="Button" value="tab3">
+          <SizableText fontFamily="$body">Notifications</SizableText>
+        </Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="tab1" key="tab1" p="$2" ai="center" jc="center" f={1}>
+        <H5 ta="center">Profile</H5>
+      </Tabs.Content>
+      <Tabs.Content value="tab2" key="tab2" p="$2" ai="center" jc="center" f={1}>
+        <H5 ta="center">Connections</H5>
+      </Tabs.Content>
+      <Tabs.Content value="tab3" key="tab3" p="$2" ai="center" jc="center" f={1}>
+        <H5 ta="center">Notifications</H5>
+      </Tabs.Content>
+    </Tabs>
+  )
+}

package/src/index.tsx

@@ -37,4 +37,6 @@ export { ThemeInverseDemo } from './ThemeInverseDemo'
 export { TooltipDemo } from './TooltipDemo'
 export { ColorsDemo } from './ColorsDemo'
 export { TokensDemo } from './TokensDemo'
+export { TabsDemo } from './TabsDemo'
+export { TabsAdvancedDemo } from './TabsAdvancedDemo'
 export * from './useOnIntersecting'

package/types/TabsAdvancedDemo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const TabsAdvancedDemo: () => JSX.Element;
+//# sourceMappingURL=TabsAdvancedDemo.d.ts.map

package/types/TabsAdvancedDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsAdvancedDemo.d.ts","sourceRoot":"","sources":["../src/TabsAdvancedDemo.tsx"],"names":[],"mappings":";AAaA,eAAO,MAAM,gBAAgB,mBA8G5B,CAAA"}

package/types/TabsDemo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function TabsDemo(): JSX.Element;
+//# sourceMappingURL=TabsDemo.d.ts.map

package/types/TabsDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsDemo.d.ts","sourceRoot":"","sources":["../src/TabsDemo.tsx"],"names":[],"mappings":";AAKA,wBAAgB,QAAQ,gBAevB"}

package/types/TabsHighlightedDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsHighlightedDemo.d.ts","sourceRoot":"","sources":["../src/TabsHighlightedDemo.tsx"],"names":[],"mappings":";AAYA,wBAAgB,mBAAmB,gBAMlC"}

package/types/TabsUnderlinedDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsUnderlinedDemo.d.ts","sourceRoot":"","sources":["../src/TabsUnderlinedDemo.tsx"],"names":[],"mappings":";AAYA,wBAAgB,kBAAkB,gBAMjC"}

package/types/index.d.ts

@@ -37,5 +37,7 @@ export { ThemeInverseDemo } from './ThemeInverseDemo';
 export { TooltipDemo } from './TooltipDemo';
 export { ColorsDemo } from './ColorsDemo';
 export { TokensDemo } from './TokensDemo';
+export { TabsDemo } from './TabsDemo';
+export { TabsAdvancedDemo } from './TabsAdvancedDemo';
 export * from './useOnIntersecting';
 //# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,cAAc,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,cAAc,qBAAqB,CAAA"}