@tamagui/demos 1.7.6 → 1.7.8

package/dist/esm/TokensDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TokensDemo.tsx"],
-  "sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n  {\n    name: `Size`,\n    key: `size`,\n  },\n  {\n    name: `Space`,\n    key: 'space',\n  },\n  {\n    name: `Space (-)`,\n    key: `spaceNegative`,\n  },\n  {\n    name: `Radius`,\n    key: `radius`,\n  },\n]\n\nexport function TokensDemo() {\n  const [section, setSection] = useState<Section>('size')\n\n  return (\n    <YStack space>\n      <XGroup ai=\"center\" als=\"center\">\n        {sections.map(({ name, key }) => {\n          return (\n            <XGroup.Item key={key}>\n              <Button\n                size=\"$3\"\n                theme={section === key ? 'active' : null}\n                fontFamily=\"$silkscreen\"\n                onPress={() => setSection(key)}\n              >\n                {name}\n              </Button>\n            </XGroup.Item>\n          )\n        })}\n      </XGroup>\n\n      {(section === 'size' ||\n        section === 'spaceNegative' ||\n        section === 'space' ||\n        section === 'radius') && <SizeSection section={section} />}\n    </YStack>\n  )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n  const allTokens = getConfig().tokens\n  const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n  const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))\n  const spaceTokens = st.filter((t) => parseFloat(t) >= 0 && t !== '-0')\n  const spaceTokensNegative = st\n    .filter((t) => parseFloat(t) < 0 || t === '-0')\n    .sort((a, b) => (parseFloat(a) > parseFloat(b) ? -1 : 1))\n\n  return (\n    <YStack f={1} space>\n      <H2>Sizes</H2>\n      <YStack w=\"100%\" space=\"$2\" separator={<Separator />}>\n        {(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map(\n          (token) => {\n            return (\n              <XStack w=\"100%\" ai=\"center\" key={token}>\n                <YStack w=\"25%\">\n                  <H3 size=\"$6\">${token}</H3>\n                </YStack>\n                <YStack w=\"20%\">\n                  <H4 size=\"$5\">{tokens[token]?.val}px</H4>\n                </YStack>\n                <Square\n                  size={tokens[token]?.val}\n                  bc=\"$color5\"\n                  {...(section === 'spaceNegative' && {\n                    bc: '$red5',\n                    size: -tokens[\n                      spaceTokensNegative.find(\n                        (t) => parseFloat(t) === -parseFloat(token)\n                      ) ?? token\n                    ]?.val,\n                  })}\n                  {...(section === 'radius' && {\n                    // @ts-ignore\n                    size: allTokens.size[token]?.val,\n                    br: tokens[token]?.val,\n                  })}\n                />\n              </XStack>\n            )\n          }\n        )}\n      </YStack>\n    </YStack>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n  {\n    name: `Size`,\n    key: `size`,\n  },\n  {\n    name: `Space`,\n    key: 'space',\n  },\n  {\n    name: `Space (-)`,\n    key: `spaceNegative`,\n  },\n  {\n    name: `Radius`,\n    key: `radius`,\n  },\n]\n\nexport function TokensDemo() {\n  const [section, setSection] = useState<Section>('size')\n\n  return (\n    <YStack space>\n      <XGroup ai=\"center\" als=\"center\">\n        {sections.map(({ name, key }) => {\n          return (\n            <XGroup.Item key={key}>\n              <Button\n                size=\"$3\"\n                theme={section === key ? 'active' : null}\n                fontFamily=\"$silkscreen\"\n                onPress={() => setSection(key)}\n              >\n                {name}\n              </Button>\n            </XGroup.Item>\n          )\n        })}\n      </XGroup>\n\n      {(section === 'size' ||\n        section === 'spaceNegative' ||\n        section === 'space' ||\n        section === 'radius') && <SizeSection section={section} />}\n    </YStack>\n  )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n  const allTokens = getConfig().tokens\n  const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n  const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))\n  const spaceTokens = st.filter((t) => parseFloat(t) >= 0)\n  const spaceTokensNegative = st\n    .filter((t) => parseFloat(t) < 0)\n    .sort((a, b) => (parseFloat(a) > parseFloat(b) ? -1 : 1))\n\n  return (\n    <YStack f={1} space>\n      <H2>Sizes</H2>\n      <YStack w=\"100%\" space=\"$2\" separator={<Separator />}>\n        {(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map(\n          (token) => {\n            return (\n              <XStack w=\"100%\" ai=\"center\" key={token}>\n                <YStack w=\"25%\">\n                  <H3 size=\"$6\">${token}</H3>\n                </YStack>\n                <YStack w=\"20%\">\n                  <H4 size=\"$5\">{tokens[token]?.val}px</H4>\n                </YStack>\n                <Square\n                  size={tokens[token]?.val}\n                  bc=\"$color5\"\n                  {...(section === 'spaceNegative' && {\n                    bc: '$red5',\n                    size: -tokens[\n                      spaceTokensNegative.find(\n                        (t) => parseFloat(t) === -parseFloat(token)\n                      ) ?? token\n                    ]?.val,\n                  })}\n                  {...(section === 'radius' && {\n                    // @ts-ignore\n                    size: allTokens.size[token]?.val,\n                    br: tokens[token]?.val,\n                  })}\n                />\n              </XStack>\n            )\n          }\n        )}\n      </YStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/jsx/SelectDemo.js

@@ -21,7 +21,7 @@ function SelectDemo() {
           br="$4"
         />
       </Select.ScrollUpButton>
-      <Select.Viewport minWidth={200}><Select.Group space="$-0">
+      <Select.Viewport minWidth={200}><Select.Group space="$0">
         <Select.Label>Fruits</Select.Label>
         {items.map((item, i) => {
           return <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>

package/dist/jsx/SelectDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SelectDemo.tsx"],
-  "sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n  const [val, setVal] = useState('apple')\n  return (\n    <Select id=\"food\" value={val} onValueChange={setVal}>\n      <Select.Trigger w={180} iconAfter={ChevronDown}>\n        <Select.Value placeholder=\"Something\" />\n      </Select.Trigger>\n\n      <Adapt when=\"sm\" platform=\"touch\">\n        <Sheet modal dismissOnSnapToBottom>\n          <Sheet.Frame>\n            <Sheet.ScrollView>\n              <Adapt.Contents />\n            </Sheet.ScrollView>\n          </Sheet.Frame>\n          <Sheet.Overlay />\n        </Sheet>\n      </Adapt>\n\n      <Select.Content zIndex={200000}>\n        <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n          <YStack zi={10}>\n            <ChevronUp size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$background', '$backgroundTransparent']}\n            br=\"$4\"\n          />\n        </Select.ScrollUpButton>\n\n        <Select.Viewport minWidth={200}>\n          <Select.Group space=\"$-0\">\n            <Select.Label>Fruits</Select.Label>\n            {items.map((item, i) => {\n              return (\n                <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n                  <Select.ItemText>{item.name}</Select.ItemText>\n                  <Select.ItemIndicator ml=\"auto\">\n                    <Check size={16} />\n                  </Select.ItemIndicator>\n                </Select.Item>\n              )\n            })}\n          </Select.Group>\n        </Select.Viewport>\n\n        <Select.ScrollDownButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n          <YStack zi={10}>\n            <ChevronDown size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$backgroundTransparent', '$background']}\n            br=\"$4\"\n          />\n        </Select.ScrollDownButton>\n      </Select.Content>\n    </Select>\n  )\n}\n\nconst items = [\n  { name: 'Apple' },\n  { name: 'Pear' },\n  { name: 'Blackberry' },\n  { name: 'Peach' },\n  { name: 'Apricot' },\n  { name: 'Melon' },\n  { name: 'Honeydew' },\n  { name: 'Starfruit' },\n  { name: 'Blueberry' },\n  { name: 'Rasberry' },\n  { name: 'Strawberry' },\n  { name: 'Mango' },\n  { name: 'Pineapple' },\n  { name: 'Lime' },\n  { name: 'Lemon' },\n  { name: 'Coconut' },\n  { name: 'Guava' },\n  { name: 'Papaya' },\n  { name: 'Orange' },\n  { name: 'Grape' },\n  { name: 'Jackfruit' },\n  { name: 'Durian' },\n]\n"],
+  "sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n  const [val, setVal] = useState('apple')\n  return (\n    <Select id=\"food\" value={val} onValueChange={setVal}>\n      <Select.Trigger w={180} iconAfter={ChevronDown}>\n        <Select.Value placeholder=\"Something\" />\n      </Select.Trigger>\n\n      <Adapt when=\"sm\" platform=\"touch\">\n        <Sheet modal dismissOnSnapToBottom>\n          <Sheet.Frame>\n            <Sheet.ScrollView>\n              <Adapt.Contents />\n            </Sheet.ScrollView>\n          </Sheet.Frame>\n          <Sheet.Overlay />\n        </Sheet>\n      </Adapt>\n\n      <Select.Content zIndex={200000}>\n        <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n          <YStack zi={10}>\n            <ChevronUp size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$background', '$backgroundTransparent']}\n            br=\"$4\"\n          />\n        </Select.ScrollUpButton>\n\n        <Select.Viewport minWidth={200}>\n          <Select.Group space=\"$0\">\n            <Select.Label>Fruits</Select.Label>\n            {items.map((item, i) => {\n              return (\n                <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n                  <Select.ItemText>{item.name}</Select.ItemText>\n                  <Select.ItemIndicator ml=\"auto\">\n                    <Check size={16} />\n                  </Select.ItemIndicator>\n                </Select.Item>\n              )\n            })}\n          </Select.Group>\n        </Select.Viewport>\n\n        <Select.ScrollDownButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n          <YStack zi={10}>\n            <ChevronDown size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$backgroundTransparent', '$background']}\n            br=\"$4\"\n          />\n        </Select.ScrollDownButton>\n      </Select.Content>\n    </Select>\n  )\n}\n\nconst items = [\n  { name: 'Apple' },\n  { name: 'Pear' },\n  { name: 'Blackberry' },\n  { name: 'Peach' },\n  { name: 'Apricot' },\n  { name: 'Melon' },\n  { name: 'Honeydew' },\n  { name: 'Starfruit' },\n  { name: 'Blueberry' },\n  { name: 'Rasberry' },\n  { name: 'Strawberry' },\n  { name: 'Mango' },\n  { name: 'Pineapple' },\n  { name: 'Lime' },\n  { name: 'Lemon' },\n  { name: 'Coconut' },\n  { name: 'Guava' },\n  { name: 'Papaya' },\n  { name: 'Orange' },\n  { name: 'Grape' },\n  { name: 'Jackfruit' },\n  { name: 'Durian' },\n]\n"],
   "mappings": "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",
   "names": []
 }

package/dist/jsx/SelectDemo.mjs

@@ -21,7 +21,7 @@ function SelectDemo() {
           br="$4"
         />
       </Select.ScrollUpButton>
-      <Select.Viewport minWidth={200}><Select.Group space="$-0">
+      <Select.Viewport minWidth={200}><Select.Group space="$0">
         <Select.Label>Fruits</Select.Label>
         {items.map((item, i) => {
           return <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>

package/dist/jsx/SelectDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SelectDemo.tsx"],
-  "sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n  const [val, setVal] = useState('apple')\n  return (\n    <Select id=\"food\" value={val} onValueChange={setVal}>\n      <Select.Trigger w={180} iconAfter={ChevronDown}>\n        <Select.Value placeholder=\"Something\" />\n      </Select.Trigger>\n\n      <Adapt when=\"sm\" platform=\"touch\">\n        <Sheet modal dismissOnSnapToBottom>\n          <Sheet.Frame>\n            <Sheet.ScrollView>\n              <Adapt.Contents />\n            </Sheet.ScrollView>\n          </Sheet.Frame>\n          <Sheet.Overlay />\n        </Sheet>\n      </Adapt>\n\n      <Select.Content zIndex={200000}>\n        <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n          <YStack zi={10}>\n            <ChevronUp size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$background', '$backgroundTransparent']}\n            br=\"$4\"\n          />\n        </Select.ScrollUpButton>\n\n        <Select.Viewport minWidth={200}>\n          <Select.Group space=\"$-0\">\n            <Select.Label>Fruits</Select.Label>\n            {items.map((item, i) => {\n              return (\n                <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n                  <Select.ItemText>{item.name}</Select.ItemText>\n                  <Select.ItemIndicator ml=\"auto\">\n                    <Check size={16} />\n                  </Select.ItemIndicator>\n                </Select.Item>\n              )\n            })}\n          </Select.Group>\n        </Select.Viewport>\n\n        <Select.ScrollDownButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n          <YStack zi={10}>\n            <ChevronDown size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$backgroundTransparent', '$background']}\n            br=\"$4\"\n          />\n        </Select.ScrollDownButton>\n      </Select.Content>\n    </Select>\n  )\n}\n\nconst items = [\n  { name: 'Apple' },\n  { name: 'Pear' },\n  { name: 'Blackberry' },\n  { name: 'Peach' },\n  { name: 'Apricot' },\n  { name: 'Melon' },\n  { name: 'Honeydew' },\n  { name: 'Starfruit' },\n  { name: 'Blueberry' },\n  { name: 'Rasberry' },\n  { name: 'Strawberry' },\n  { name: 'Mango' },\n  { name: 'Pineapple' },\n  { name: 'Lime' },\n  { name: 'Lemon' },\n  { name: 'Coconut' },\n  { name: 'Guava' },\n  { name: 'Papaya' },\n  { name: 'Orange' },\n  { name: 'Grape' },\n  { name: 'Jackfruit' },\n  { name: 'Durian' },\n]\n"],
+  "sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n  const [val, setVal] = useState('apple')\n  return (\n    <Select id=\"food\" value={val} onValueChange={setVal}>\n      <Select.Trigger w={180} iconAfter={ChevronDown}>\n        <Select.Value placeholder=\"Something\" />\n      </Select.Trigger>\n\n      <Adapt when=\"sm\" platform=\"touch\">\n        <Sheet modal dismissOnSnapToBottom>\n          <Sheet.Frame>\n            <Sheet.ScrollView>\n              <Adapt.Contents />\n            </Sheet.ScrollView>\n          </Sheet.Frame>\n          <Sheet.Overlay />\n        </Sheet>\n      </Adapt>\n\n      <Select.Content zIndex={200000}>\n        <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n          <YStack zi={10}>\n            <ChevronUp size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$background', '$backgroundTransparent']}\n            br=\"$4\"\n          />\n        </Select.ScrollUpButton>\n\n        <Select.Viewport minWidth={200}>\n          <Select.Group space=\"$0\">\n            <Select.Label>Fruits</Select.Label>\n            {items.map((item, i) => {\n              return (\n                <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n                  <Select.ItemText>{item.name}</Select.ItemText>\n                  <Select.ItemIndicator ml=\"auto\">\n                    <Check size={16} />\n                  </Select.ItemIndicator>\n                </Select.Item>\n              )\n            })}\n          </Select.Group>\n        </Select.Viewport>\n\n        <Select.ScrollDownButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n          <YStack zi={10}>\n            <ChevronDown size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$backgroundTransparent', '$background']}\n            br=\"$4\"\n          />\n        </Select.ScrollDownButton>\n      </Select.Content>\n    </Select>\n  )\n}\n\nconst items = [\n  { name: 'Apple' },\n  { name: 'Pear' },\n  { name: 'Blackberry' },\n  { name: 'Peach' },\n  { name: 'Apricot' },\n  { name: 'Melon' },\n  { name: 'Honeydew' },\n  { name: 'Starfruit' },\n  { name: 'Blueberry' },\n  { name: 'Rasberry' },\n  { name: 'Strawberry' },\n  { name: 'Mango' },\n  { name: 'Pineapple' },\n  { name: 'Lime' },\n  { name: 'Lemon' },\n  { name: 'Coconut' },\n  { name: 'Guava' },\n  { name: 'Papaya' },\n  { name: 'Orange' },\n  { name: 'Grape' },\n  { name: 'Jackfruit' },\n  { name: 'Durian' },\n]\n"],
   "mappings": "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",
   "names": []
 }

package/dist/jsx/TabsAnimatedDemo.js

@@ -0,0 +1,114 @@
+import { useState } from "react";
+import { AnimatePresence, H5, Tabs, XStack, YStack } from "tamagui";
+function TabsAnimatedDemo() {
+  return <XStack maxHeight="100%" maxWidth="100%" justifyContent="flex-start"><XStack space="$3" px="$8">
+    <UnderlineTabs />
+    <HighlightTabs />
+  </XStack></XStack>;
+}
+const UnderlineTabs = () => {
+  const [currentTab, setCurrentTab] = useState("tab1");
+  const [direction, setDirection] = useState(0);
+  return <Tabs
+    value={currentTab}
+    onValueChange={setCurrentTab}
+    onDirectionChange={setDirection}
+    orientation="vertical"
+    width={300}
+    br="$4"
+    ai="center"
+  >
+    <YStack borderColor="$color3" borderRightWidth="$0.5" mr="$2"><YStack>
+      <Tabs.RovingIndicator
+        highlightMode="hoverOrFocus"
+        width="$0.5"
+        right={0}
+        animation="100ms"
+      />
+      <Tabs.RovingIndicator
+        highlightMode="select"
+        width="$0.5"
+        right={0}
+        animation="100ms"
+      />
+      <Tabs.List aria-label="Manage your account" flexDirection="column">
+        <Tabs.Trigger unstyled color="$color12" value="tab1">Profile</Tabs.Trigger>
+        <Tabs.Trigger unstyled color="$color12" value="tab2">Connections</Tabs.Trigger>
+        <Tabs.Trigger unstyled color="$color12" value="tab3">Notifications</Tabs.Trigger>
+      </Tabs.List>
+    </YStack></YStack>
+    <AnimatePresence exitBeforeEnter><Tabs.Content
+      value={currentTab}
+      key={currentTab}
+      forceMount
+      p="$2"
+      animation="100ms"
+      o={1}
+      y={0}
+      f={1}
+      enterStyle={{
+        ...direction === -1 ? { y: -25 } : {},
+        ...direction === 1 ? { y: 25 } : {},
+        opacity: 0
+      }}
+      exitStyle={{
+        ...direction === -1 ? { y: 25 } : {},
+        ...direction === 1 ? { y: -25 } : {},
+        opacity: 0
+      }}
+    ><H5 ta="center">{currentTab}</H5></Tabs.Content></AnimatePresence>
+  </Tabs>;
+};
+const HighlightTabs = () => {
+  const [currentTab, setCurrentTab] = useState("tab1");
+  const [direction, setDirection] = useState(0);
+  return <Tabs
+    value={currentTab}
+    onValueChange={setCurrentTab}
+    onDirectionChange={setDirection}
+    orientation="horizontal"
+    br="$4"
+    flexDirection="column"
+  >
+    <YStack>
+      <Tabs.RovingIndicator
+        highlightMode="hoverOrFocus"
+        borderRadius="$4"
+        animation="100ms"
+      />
+      <Tabs.RovingIndicator
+        highlightMode="select"
+        borderRadius="$4"
+        animation="100ms"
+      />
+      <Tabs.List aria-label="Manage your account">
+        <Tabs.Trigger unstyled color="$color12" value="tab1">Profile</Tabs.Trigger>
+        <Tabs.Trigger unstyled color="$color12" value="tab2">Connections</Tabs.Trigger>
+        <Tabs.Trigger unstyled color="$color12" value="tab3">Notifications</Tabs.Trigger>
+      </Tabs.List>
+    </YStack>
+    <AnimatePresence exitBeforeEnter><Tabs.Content
+      value={currentTab}
+      key={currentTab}
+      forceMount
+      p="$2"
+      animation="100ms"
+      o={1}
+      x={0}
+      enterStyle={{
+        ...direction === -1 ? { x: -25 } : {},
+        ...direction === 1 ? { x: 25 } : {},
+        opacity: 0
+      }}
+      exitStyle={{
+        ...direction === -1 ? { x: 25 } : {},
+        ...direction === 1 ? { x: -25 } : {},
+        opacity: 0
+      }}
+    ><H5 ta="center">{currentTab}</H5></Tabs.Content></AnimatePresence>
+  </Tabs>;
+};
+export {
+  TabsAnimatedDemo
+};
+//# sourceMappingURL=TabsAnimatedDemo.js.map

package/dist/jsx/TabsAnimatedDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TabsAnimatedDemo.tsx"],
+  "sourcesContent": ["import { useState } from 'react'\nimport { AnimatePresence, H5, Tabs, XStack, YStack } from 'tamagui'\n\nexport function TabsAnimatedDemo() {\n  return (\n    <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\">\n      <XStack space=\"$3\" px=\"$8\">\n        <UnderlineTabs />\n        <HighlightTabs />\n      </XStack>\n    </XStack>\n  )\n}\n\nconst UnderlineTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [direction, setDirection] = useState<-1 | 0 | 1>(0)\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      onDirectionChange={setDirection}\n      orientation=\"vertical\"\n      width={300}\n      br=\"$4\"\n      ai=\"center\"\n    >\n      <YStack borderColor=\"$color3\" borderRightWidth=\"$0.5\" mr=\"$2\">\n        <YStack>\n          <Tabs.RovingIndicator\n            highlightMode=\"hoverOrFocus\"\n            width=\"$0.5\"\n            right={0}\n            animation=\"100ms\"\n          />\n          <Tabs.RovingIndicator\n            highlightMode=\"select\"\n            width=\"$0.5\"\n            right={0}\n            animation=\"100ms\"\n          />\n          <Tabs.List aria-label=\"Manage your account\" flexDirection=\"column\">\n            <Tabs.Trigger unstyled color=\"$color12\" value=\"tab1\">\n              Profile\n            </Tabs.Trigger>\n            <Tabs.Trigger unstyled color=\"$color12\" value=\"tab2\">\n              Connections\n            </Tabs.Trigger>\n            <Tabs.Trigger unstyled color=\"$color12\" value=\"tab3\">\n              Notifications\n            </Tabs.Trigger>\n          </Tabs.List>\n        </YStack>\n      </YStack>\n      <AnimatePresence exitBeforeEnter>\n        <Tabs.Content\n          value={currentTab}\n          key={currentTab}\n          forceMount\n          p=\"$2\"\n          animation=\"100ms\"\n          o={1}\n          y={0}\n          f={1}\n          enterStyle={{\n            ...(direction === -1 ? { y: -25 } : {}),\n            ...(direction === 1 ? { y: 25 } : {}),\n            opacity: 0,\n          }}\n          exitStyle={{\n            ...(direction === -1 ? { y: 25 } : {}),\n            ...(direction === 1 ? { y: -25 } : {}),\n            opacity: 0,\n          }}\n        >\n          <H5 ta=\"center\">{currentTab}</H5>\n        </Tabs.Content>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst HighlightTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [direction, setDirection] = useState<-1 | 0 | 1>(0)\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      onDirectionChange={setDirection}\n      orientation=\"horizontal\"\n      br=\"$4\"\n      flexDirection=\"column\"\n    >\n      <YStack>\n        <Tabs.RovingIndicator\n          highlightMode=\"hoverOrFocus\"\n          borderRadius=\"$4\"\n          animation=\"100ms\"\n        />\n        <Tabs.RovingIndicator\n          highlightMode=\"select\"\n          borderRadius=\"$4\"\n          animation=\"100ms\"\n        />\n        <Tabs.List aria-label=\"Manage your account\">\n          <Tabs.Trigger unstyled color=\"$color12\" value=\"tab1\">\n            Profile\n          </Tabs.Trigger>\n          <Tabs.Trigger unstyled color=\"$color12\" value=\"tab2\">\n            Connections\n          </Tabs.Trigger>\n          <Tabs.Trigger unstyled color=\"$color12\" value=\"tab3\">\n            Notifications\n          </Tabs.Trigger>\n        </Tabs.List>\n      </YStack>\n      <AnimatePresence exitBeforeEnter>\n        <Tabs.Content\n          value={currentTab}\n          key={currentTab}\n          forceMount\n          p=\"$2\"\n          animation=\"100ms\"\n          o={1}\n          x={0}\n          enterStyle={{\n            ...(direction === -1 ? { x: -25 } : {}),\n            ...(direction === 1 ? { x: 25 } : {}),\n            opacity: 0,\n          }}\n          exitStyle={{\n            ...(direction === -1 ? { x: 25 } : {}),\n            ...(direction === 1 ? { x: -25 } : {}),\n            opacity: 0,\n          }}\n        >\n          <H5 ta=\"center\">{currentTab}</H5>\n        </Tabs.Content>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/jsx/TabsAnimatedDemo.mjs

@@ -0,0 +1,114 @@
+import { useState } from "react";
+import { AnimatePresence, H5, Tabs, XStack, YStack } from "tamagui";
+function TabsAnimatedDemo() {
+  return <XStack maxHeight="100%" maxWidth="100%" justifyContent="flex-start"><XStack space="$3" px="$8">
+    <UnderlineTabs />
+    <HighlightTabs />
+  </XStack></XStack>;
+}
+const UnderlineTabs = () => {
+  const [currentTab, setCurrentTab] = useState("tab1");
+  const [direction, setDirection] = useState(0);
+  return <Tabs
+    value={currentTab}
+    onValueChange={setCurrentTab}
+    onDirectionChange={setDirection}
+    orientation="vertical"
+    width={300}
+    br="$4"
+    ai="center"
+  >
+    <YStack borderColor="$color3" borderRightWidth="$0.5" mr="$2"><YStack>
+      <Tabs.RovingIndicator
+        highlightMode="hoverOrFocus"
+        width="$0.5"
+        right={0}
+        animation="100ms"
+      />
+      <Tabs.RovingIndicator
+        highlightMode="select"
+        width="$0.5"
+        right={0}
+        animation="100ms"
+      />
+      <Tabs.List aria-label="Manage your account" flexDirection="column">
+        <Tabs.Trigger unstyled color="$color12" value="tab1">Profile</Tabs.Trigger>
+        <Tabs.Trigger unstyled color="$color12" value="tab2">Connections</Tabs.Trigger>
+        <Tabs.Trigger unstyled color="$color12" value="tab3">Notifications</Tabs.Trigger>
+      </Tabs.List>
+    </YStack></YStack>
+    <AnimatePresence exitBeforeEnter><Tabs.Content
+      value={currentTab}
+      key={currentTab}
+      forceMount
+      p="$2"
+      animation="100ms"
+      o={1}
+      y={0}
+      f={1}
+      enterStyle={{
+        ...direction === -1 ? { y: -25 } : {},
+        ...direction === 1 ? { y: 25 } : {},
+        opacity: 0
+      }}
+      exitStyle={{
+        ...direction === -1 ? { y: 25 } : {},
+        ...direction === 1 ? { y: -25 } : {},
+        opacity: 0
+      }}
+    ><H5 ta="center">{currentTab}</H5></Tabs.Content></AnimatePresence>
+  </Tabs>;
+};
+const HighlightTabs = () => {
+  const [currentTab, setCurrentTab] = useState("tab1");
+  const [direction, setDirection] = useState(0);
+  return <Tabs
+    value={currentTab}
+    onValueChange={setCurrentTab}
+    onDirectionChange={setDirection}
+    orientation="horizontal"
+    br="$4"
+    flexDirection="column"
+  >
+    <YStack>
+      <Tabs.RovingIndicator
+        highlightMode="hoverOrFocus"
+        borderRadius="$4"
+        animation="100ms"
+      />
+      <Tabs.RovingIndicator
+        highlightMode="select"
+        borderRadius="$4"
+        animation="100ms"
+      />
+      <Tabs.List aria-label="Manage your account">
+        <Tabs.Trigger unstyled color="$color12" value="tab1">Profile</Tabs.Trigger>
+        <Tabs.Trigger unstyled color="$color12" value="tab2">Connections</Tabs.Trigger>
+        <Tabs.Trigger unstyled color="$color12" value="tab3">Notifications</Tabs.Trigger>
+      </Tabs.List>
+    </YStack>
+    <AnimatePresence exitBeforeEnter><Tabs.Content
+      value={currentTab}
+      key={currentTab}
+      forceMount
+      p="$2"
+      animation="100ms"
+      o={1}
+      x={0}
+      enterStyle={{
+        ...direction === -1 ? { x: -25 } : {},
+        ...direction === 1 ? { x: 25 } : {},
+        opacity: 0
+      }}
+      exitStyle={{
+        ...direction === -1 ? { x: 25 } : {},
+        ...direction === 1 ? { x: -25 } : {},
+        opacity: 0
+      }}
+    ><H5 ta="center">{currentTab}</H5></Tabs.Content></AnimatePresence>
+  </Tabs>;
+};
+export {
+  TabsAnimatedDemo
+};
+//# sourceMappingURL=TabsAnimatedDemo.mjs.map

package/dist/jsx/TabsAnimatedDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TabsAnimatedDemo.tsx"],
+  "sourcesContent": ["import { useState } from 'react'\nimport { AnimatePresence, H5, Tabs, XStack, YStack } from 'tamagui'\n\nexport function TabsAnimatedDemo() {\n  return (\n    <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\">\n      <XStack space=\"$3\" px=\"$8\">\n        <UnderlineTabs />\n        <HighlightTabs />\n      </XStack>\n    </XStack>\n  )\n}\n\nconst UnderlineTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [direction, setDirection] = useState<-1 | 0 | 1>(0)\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      onDirectionChange={setDirection}\n      orientation=\"vertical\"\n      width={300}\n      br=\"$4\"\n      ai=\"center\"\n    >\n      <YStack borderColor=\"$color3\" borderRightWidth=\"$0.5\" mr=\"$2\">\n        <YStack>\n          <Tabs.RovingIndicator\n            highlightMode=\"hoverOrFocus\"\n            width=\"$0.5\"\n            right={0}\n            animation=\"100ms\"\n          />\n          <Tabs.RovingIndicator\n            highlightMode=\"select\"\n            width=\"$0.5\"\n            right={0}\n            animation=\"100ms\"\n          />\n          <Tabs.List aria-label=\"Manage your account\" flexDirection=\"column\">\n            <Tabs.Trigger unstyled color=\"$color12\" value=\"tab1\">\n              Profile\n            </Tabs.Trigger>\n            <Tabs.Trigger unstyled color=\"$color12\" value=\"tab2\">\n              Connections\n            </Tabs.Trigger>\n            <Tabs.Trigger unstyled color=\"$color12\" value=\"tab3\">\n              Notifications\n            </Tabs.Trigger>\n          </Tabs.List>\n        </YStack>\n      </YStack>\n      <AnimatePresence exitBeforeEnter>\n        <Tabs.Content\n          value={currentTab}\n          key={currentTab}\n          forceMount\n          p=\"$2\"\n          animation=\"100ms\"\n          o={1}\n          y={0}\n          f={1}\n          enterStyle={{\n            ...(direction === -1 ? { y: -25 } : {}),\n            ...(direction === 1 ? { y: 25 } : {}),\n            opacity: 0,\n          }}\n          exitStyle={{\n            ...(direction === -1 ? { y: 25 } : {}),\n            ...(direction === 1 ? { y: -25 } : {}),\n            opacity: 0,\n          }}\n        >\n          <H5 ta=\"center\">{currentTab}</H5>\n        </Tabs.Content>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst HighlightTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [direction, setDirection] = useState<-1 | 0 | 1>(0)\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      onDirectionChange={setDirection}\n      orientation=\"horizontal\"\n      br=\"$4\"\n      flexDirection=\"column\"\n    >\n      <YStack>\n        <Tabs.RovingIndicator\n          highlightMode=\"hoverOrFocus\"\n          borderRadius=\"$4\"\n          animation=\"100ms\"\n        />\n        <Tabs.RovingIndicator\n          highlightMode=\"select\"\n          borderRadius=\"$4\"\n          animation=\"100ms\"\n        />\n        <Tabs.List aria-label=\"Manage your account\">\n          <Tabs.Trigger unstyled color=\"$color12\" value=\"tab1\">\n            Profile\n          </Tabs.Trigger>\n          <Tabs.Trigger unstyled color=\"$color12\" value=\"tab2\">\n            Connections\n          </Tabs.Trigger>\n          <Tabs.Trigger unstyled color=\"$color12\" value=\"tab3\">\n            Notifications\n          </Tabs.Trigger>\n        </Tabs.List>\n      </YStack>\n      <AnimatePresence exitBeforeEnter>\n        <Tabs.Content\n          value={currentTab}\n          key={currentTab}\n          forceMount\n          p=\"$2\"\n          animation=\"100ms\"\n          o={1}\n          x={0}\n          enterStyle={{\n            ...(direction === -1 ? { x: -25 } : {}),\n            ...(direction === 1 ? { x: 25 } : {}),\n            opacity: 0,\n          }}\n          exitStyle={{\n            ...(direction === -1 ? { x: 25 } : {}),\n            ...(direction === 1 ? { x: -25 } : {}),\n            opacity: 0,\n          }}\n        >\n          <H5 ta=\"center\">{currentTab}</H5>\n        </Tabs.Content>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/jsx/TabsHighlightedDemo.js

@@ -75,16 +75,15 @@ const HighlightTabs = () => {
     onValueChange={setCurrentTab}
     orientation="horizontal"
     br="$4"
-    p="$2"
     height={150}
     flexDirection="column"
     activationMode="manual"
   >
     <Tabs.List
+      scrollable
       loop={false}
       aria-label="Manage your account"
       disablePassBorderRadius
-      overflow="visible"
     >
       {intentIndicatorLayout && <TabsRovingIndicator
         width={intentIndicatorLayout.width}
@@ -96,15 +95,14 @@ const HighlightTabs = () => {
         theme="active"
         active
         width={selectionIndicatorLayout.width}
-        height={2}
+        height={selectionIndicatorLayout.height}
         x={selectionIndicatorLayout.x}
-        y={40}
+        y={selectionIndicatorLayout.y}
       />}
       <Tabs.Trigger
         unstyled
         color="$color12"
         value="tab1"
-        size="$3"
         onSelectedLayoutChange={handleUpdateSelectionIndicator}
         onHoveredLayoutChange={setHoverIndicatorLayout}
         onFocusedLayoutChange={setFocusIndicatorLayout}
@@ -112,7 +110,6 @@ const HighlightTabs = () => {
       <Tabs.Trigger
         unstyled
         color="$color12"
-        size="$3"
         value="tab2"
         onSelectedLayoutChange={handleUpdateSelectionIndicator}
         onHoveredLayoutChange={setHoverIndicatorLayout}
@@ -121,18 +118,17 @@ const HighlightTabs = () => {
       <Tabs.Trigger
         unstyled
         color="$color12"
-        size="$3"
         value="tab3"
         onSelectedLayoutChange={handleUpdateSelectionIndicator}
         onHoveredLayoutChange={setHoverIndicatorLayout}
         onFocusedLayoutChange={setFocusIndicatorLayout}
       >Notifications</Tabs.Trigger>
     </Tabs.List>
-    <YStack f={1}><AnimatePresence
+    <AnimatePresence
       exitBeforeEnter
       enterVariant={enterVariant}
       exitVariant={exitVariant}
-    ><AnimatedYStack key={currentTab} animation="100ms" x={0} o={1} f={1}><Tabs.Content value={currentTab} forceMount p="$2" f={1} jc="center"><H5 ta="center">{currentTab}</H5></Tabs.Content></AnimatedYStack></AnimatePresence></YStack>
+    ><AnimatedYStack key={currentTab} animation="100ms" x={0} o={1}><Tabs.Content value={currentTab} forceMount p="$2"><H5 ta="center">{currentTab}</H5></Tabs.Content></AnimatedYStack></AnimatePresence>
   </Tabs>;
 };
 export {

package/dist/jsx/TabsHighlightedDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TabsHighlightedDemo.tsx"],
-  "sourcesContent": ["import { useMemo, useRef, useState } from 'react'\nimport {\n  AnimatePresence,\n  H5,\n  Stack,\n  TabTriggerLayout,\n  Tabs,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nexport function TabsHighlightedDemo() {\n  return (\n    <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\" px=\"$4\">\n      <HighlightTabs />\n    </XStack>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  name: 'TabsRovingIndicator',\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n      },\n    },\n    variants: {\n      active: {\n        true: {\n          backgroundColor: '$color8',\n        },\n      },\n      enter: {\n        true: {\n          opacity: 0,\n        },\n      },\n      exit: {\n        true: {\n          opacity: 0,\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    position: 'absolute',\n    backgroundColor: '$color5',\n    opacity: 1,\n    animation: '100ms',\n    borderRadius: '$4',\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n  } as const,\n})\n\nconst HighlightTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [focusIndicatorLayout, setFocusIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [hoverIndicatorLayout, setHoverIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [selectionIndicatorLayout, setSelectionIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n  const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n    prevSelectionIndicatorLayout.current = selectionIndicatorLayout\n    setSelectionIndicatorLayout(newSize)\n  }\n\n  const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout\n\n  /**\n   * -1: from left\n   * 0: n/a\n   * 1: from right\n   */\n  const direction = useMemo(() => {\n    if (\n      !selectionIndicatorLayout ||\n      !prevSelectionIndicatorLayout.current ||\n      selectionIndicatorLayout.x === prevSelectionIndicatorLayout.current.x\n    ) {\n      return 0\n    }\n    return selectionIndicatorLayout.x > prevSelectionIndicatorLayout.current.x ? 1 : -1\n  }, [selectionIndicatorLayout])\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : undefined\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : undefined\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      br=\"$4\"\n      p=\"$2\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n    >\n      <Tabs.List\n        loop={false}\n        aria-label=\"Manage your account\"\n        disablePassBorderRadius\n        overflow=\"visible\"\n      >\n        {intentIndicatorLayout && (\n          <TabsRovingIndicator\n            width={intentIndicatorLayout.width}\n            height={intentIndicatorLayout.height}\n            x={intentIndicatorLayout.x}\n            y={intentIndicatorLayout.y}\n          />\n        )}\n\n        {selectionIndicatorLayout && (\n          <TabsRovingIndicator\n            theme=\"active\"\n            active\n            width={selectionIndicatorLayout.width}\n            height={2}\n            x={selectionIndicatorLayout.x}\n            y={40}\n          />\n        )}\n\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab1\"\n          size=\"$3\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Profile\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          size=\"$3\"\n          value=\"tab2\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Connections\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          size=\"$3\"\n          value=\"tab3\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Notifications\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <YStack f={1}>\n        <AnimatePresence\n          exitBeforeEnter\n          enterVariant={enterVariant}\n          exitVariant={exitVariant}\n        >\n          <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} o={1} f={1}>\n            <Tabs.Content value={currentTab} forceMount p=\"$2\" f={1} jc=\"center\">\n              <H5 ta=\"center\">{currentTab}</H5>\n            </Tabs.Content>\n          </AnimatedYStack>\n        </AnimatePresence>\n      </YStack>\n    </Tabs>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useMemo, useRef, useState } from 'react'\nimport {\n  AnimatePresence,\n  H5,\n  Stack,\n  TabTriggerLayout,\n  Tabs,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nexport function TabsHighlightedDemo() {\n  return (\n    <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\" px=\"$4\">\n      <HighlightTabs />\n    </XStack>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  name: 'TabsRovingIndicator',\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n      },\n    },\n    variants: {\n      active: {\n        true: {\n          backgroundColor: '$color8',\n        },\n      },\n      enter: {\n        true: {\n          opacity: 0,\n        },\n      },\n      exit: {\n        true: {\n          opacity: 0,\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    position: 'absolute',\n    backgroundColor: '$color5',\n    opacity: 1,\n    animation: '100ms',\n    borderRadius: '$4',\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n  } as const,\n})\n\nconst HighlightTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [focusIndicatorLayout, setFocusIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [hoverIndicatorLayout, setHoverIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [selectionIndicatorLayout, setSelectionIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n  const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n    prevSelectionIndicatorLayout.current = selectionIndicatorLayout\n    setSelectionIndicatorLayout(newSize)\n  }\n\n  const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout\n\n  /**\n   * -1: from left\n   * 0: n/a\n   * 1: from right\n   */\n  const direction = useMemo(() => {\n    if (\n      !selectionIndicatorLayout ||\n      !prevSelectionIndicatorLayout.current ||\n      selectionIndicatorLayout.x === prevSelectionIndicatorLayout.current.x\n    ) {\n      return 0\n    }\n    return selectionIndicatorLayout.x > prevSelectionIndicatorLayout.current.x ? 1 : -1\n  }, [selectionIndicatorLayout])\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : undefined\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : undefined\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      br=\"$4\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n    >\n      <Tabs.List\n        scrollable\n        loop={false}\n        aria-label=\"Manage your account\"\n        disablePassBorderRadius\n      >\n        {intentIndicatorLayout && (\n          <TabsRovingIndicator\n            width={intentIndicatorLayout.width}\n            height={intentIndicatorLayout.height}\n            x={intentIndicatorLayout.x}\n            y={intentIndicatorLayout.y}\n          />\n        )}\n        {selectionIndicatorLayout && (\n          <TabsRovingIndicator\n            theme=\"active\"\n            active\n            width={selectionIndicatorLayout.width}\n            height={selectionIndicatorLayout.height}\n            x={selectionIndicatorLayout.x}\n            y={selectionIndicatorLayout.y}\n          />\n        )}\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab1\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Profile\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab2\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Connections\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab3\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Notifications\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} o={1}>\n          <Tabs.Content value={currentTab} forceMount p=\"$2\">\n            <H5 ta=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/jsx/TabsHighlightedDemo.mjs

@@ -75,16 +75,15 @@ const HighlightTabs = () => {
     onValueChange={setCurrentTab}
     orientation="horizontal"
     br="$4"
-    p="$2"
     height={150}
     flexDirection="column"
     activationMode="manual"
   >
     <Tabs.List
+      scrollable
       loop={false}
       aria-label="Manage your account"
       disablePassBorderRadius
-      overflow="visible"
     >
       {intentIndicatorLayout && <TabsRovingIndicator
         width={intentIndicatorLayout.width}
@@ -96,15 +95,14 @@ const HighlightTabs = () => {
         theme="active"
         active
         width={selectionIndicatorLayout.width}
-        height={2}
+        height={selectionIndicatorLayout.height}
         x={selectionIndicatorLayout.x}
-        y={40}
+        y={selectionIndicatorLayout.y}
       />}
       <Tabs.Trigger
         unstyled
         color="$color12"
         value="tab1"
-        size="$3"
         onSelectedLayoutChange={handleUpdateSelectionIndicator}
         onHoveredLayoutChange={setHoverIndicatorLayout}
         onFocusedLayoutChange={setFocusIndicatorLayout}
@@ -112,7 +110,6 @@ const HighlightTabs = () => {
       <Tabs.Trigger
         unstyled
         color="$color12"
-        size="$3"
         value="tab2"
         onSelectedLayoutChange={handleUpdateSelectionIndicator}
         onHoveredLayoutChange={setHoverIndicatorLayout}
@@ -121,18 +118,17 @@ const HighlightTabs = () => {
       <Tabs.Trigger
         unstyled
         color="$color12"
-        size="$3"
         value="tab3"
         onSelectedLayoutChange={handleUpdateSelectionIndicator}
         onHoveredLayoutChange={setHoverIndicatorLayout}
         onFocusedLayoutChange={setFocusIndicatorLayout}
       >Notifications</Tabs.Trigger>
     </Tabs.List>
-    <YStack f={1}><AnimatePresence
+    <AnimatePresence
       exitBeforeEnter
       enterVariant={enterVariant}
       exitVariant={exitVariant}
-    ><AnimatedYStack key={currentTab} animation="100ms" x={0} o={1} f={1}><Tabs.Content value={currentTab} forceMount p="$2" f={1} jc="center"><H5 ta="center">{currentTab}</H5></Tabs.Content></AnimatedYStack></AnimatePresence></YStack>
+    ><AnimatedYStack key={currentTab} animation="100ms" x={0} o={1}><Tabs.Content value={currentTab} forceMount p="$2"><H5 ta="center">{currentTab}</H5></Tabs.Content></AnimatedYStack></AnimatePresence>
   </Tabs>;
 };
 export {

package/dist/jsx/TabsHighlightedDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TabsHighlightedDemo.tsx"],
-  "sourcesContent": ["import { useMemo, useRef, useState } from 'react'\nimport {\n  AnimatePresence,\n  H5,\n  Stack,\n  TabTriggerLayout,\n  Tabs,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nexport function TabsHighlightedDemo() {\n  return (\n    <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\" px=\"$4\">\n      <HighlightTabs />\n    </XStack>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  name: 'TabsRovingIndicator',\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n      },\n    },\n    variants: {\n      active: {\n        true: {\n          backgroundColor: '$color8',\n        },\n      },\n      enter: {\n        true: {\n          opacity: 0,\n        },\n      },\n      exit: {\n        true: {\n          opacity: 0,\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    position: 'absolute',\n    backgroundColor: '$color5',\n    opacity: 1,\n    animation: '100ms',\n    borderRadius: '$4',\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n  } as const,\n})\n\nconst HighlightTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [focusIndicatorLayout, setFocusIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [hoverIndicatorLayout, setHoverIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [selectionIndicatorLayout, setSelectionIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n  const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n    prevSelectionIndicatorLayout.current = selectionIndicatorLayout\n    setSelectionIndicatorLayout(newSize)\n  }\n\n  const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout\n\n  /**\n   * -1: from left\n   * 0: n/a\n   * 1: from right\n   */\n  const direction = useMemo(() => {\n    if (\n      !selectionIndicatorLayout ||\n      !prevSelectionIndicatorLayout.current ||\n      selectionIndicatorLayout.x === prevSelectionIndicatorLayout.current.x\n    ) {\n      return 0\n    }\n    return selectionIndicatorLayout.x > prevSelectionIndicatorLayout.current.x ? 1 : -1\n  }, [selectionIndicatorLayout])\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : undefined\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : undefined\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      br=\"$4\"\n      p=\"$2\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n    >\n      <Tabs.List\n        loop={false}\n        aria-label=\"Manage your account\"\n        disablePassBorderRadius\n        overflow=\"visible\"\n      >\n        {intentIndicatorLayout && (\n          <TabsRovingIndicator\n            width={intentIndicatorLayout.width}\n            height={intentIndicatorLayout.height}\n            x={intentIndicatorLayout.x}\n            y={intentIndicatorLayout.y}\n          />\n        )}\n\n        {selectionIndicatorLayout && (\n          <TabsRovingIndicator\n            theme=\"active\"\n            active\n            width={selectionIndicatorLayout.width}\n            height={2}\n            x={selectionIndicatorLayout.x}\n            y={40}\n          />\n        )}\n\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab1\"\n          size=\"$3\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Profile\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          size=\"$3\"\n          value=\"tab2\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Connections\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          size=\"$3\"\n          value=\"tab3\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Notifications\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <YStack f={1}>\n        <AnimatePresence\n          exitBeforeEnter\n          enterVariant={enterVariant}\n          exitVariant={exitVariant}\n        >\n          <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} o={1} f={1}>\n            <Tabs.Content value={currentTab} forceMount p=\"$2\" f={1} jc=\"center\">\n              <H5 ta=\"center\">{currentTab}</H5>\n            </Tabs.Content>\n          </AnimatedYStack>\n        </AnimatePresence>\n      </YStack>\n    </Tabs>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useMemo, useRef, useState } from 'react'\nimport {\n  AnimatePresence,\n  H5,\n  Stack,\n  TabTriggerLayout,\n  Tabs,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nexport function TabsHighlightedDemo() {\n  return (\n    <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\" px=\"$4\">\n      <HighlightTabs />\n    </XStack>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  name: 'TabsRovingIndicator',\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n      },\n    },\n    variants: {\n      active: {\n        true: {\n          backgroundColor: '$color8',\n        },\n      },\n      enter: {\n        true: {\n          opacity: 0,\n        },\n      },\n      exit: {\n        true: {\n          opacity: 0,\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    position: 'absolute',\n    backgroundColor: '$color5',\n    opacity: 1,\n    animation: '100ms',\n    borderRadius: '$4',\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n  } as const,\n})\n\nconst HighlightTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [focusIndicatorLayout, setFocusIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [hoverIndicatorLayout, setHoverIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [selectionIndicatorLayout, setSelectionIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n  const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n    prevSelectionIndicatorLayout.current = selectionIndicatorLayout\n    setSelectionIndicatorLayout(newSize)\n  }\n\n  const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout\n\n  /**\n   * -1: from left\n   * 0: n/a\n   * 1: from right\n   */\n  const direction = useMemo(() => {\n    if (\n      !selectionIndicatorLayout ||\n      !prevSelectionIndicatorLayout.current ||\n      selectionIndicatorLayout.x === prevSelectionIndicatorLayout.current.x\n    ) {\n      return 0\n    }\n    return selectionIndicatorLayout.x > prevSelectionIndicatorLayout.current.x ? 1 : -1\n  }, [selectionIndicatorLayout])\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : undefined\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : undefined\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      br=\"$4\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n    >\n      <Tabs.List\n        scrollable\n        loop={false}\n        aria-label=\"Manage your account\"\n        disablePassBorderRadius\n      >\n        {intentIndicatorLayout && (\n          <TabsRovingIndicator\n            width={intentIndicatorLayout.width}\n            height={intentIndicatorLayout.height}\n            x={intentIndicatorLayout.x}\n            y={intentIndicatorLayout.y}\n          />\n        )}\n        {selectionIndicatorLayout && (\n          <TabsRovingIndicator\n            theme=\"active\"\n            active\n            width={selectionIndicatorLayout.width}\n            height={selectionIndicatorLayout.height}\n            x={selectionIndicatorLayout.x}\n            y={selectionIndicatorLayout.y}\n          />\n        )}\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab1\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Profile\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab2\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Connections\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab3\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Notifications\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} o={1}>\n          <Tabs.Content value={currentTab} forceMount p=\"$2\">\n            <H5 ta=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/jsx/TokensDemo.js

@@ -37,8 +37,8 @@ function SizeSection({ section }) {
   const allTokens = getConfig().tokens;
   const tokens = allTokens[section.startsWith("space") ? "space" : section];
   const st = Object.keys(tokens).sort((a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1);
-  const spaceTokens = st.filter((t) => parseFloat(t) >= 0 && t !== "-0");
-  const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0 || t === "-0").sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
+  const spaceTokens = st.filter((t) => parseFloat(t) >= 0);
+  const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0).sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
   return <YStack f={1} space>
     <H2>Sizes</H2>
     <YStack w="100%" space="$2" separator={<Separator />}>{(section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(