@tamagui/demos 1.6.2 → 1.7.0

package/dist/jsx/ProgressDemo.js

@@ -18,7 +18,7 @@ function ProgressDemo() {
       </Paragraph>
       <Progress size={sizeProp} value={progress}><Progress.Indicator animation="bouncy" /></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}
@@ -30,7 +30,7 @@ function ProgressDemo() {
           setSize(val);
         }}
       >
-        <Slider.Track><Slider.TrackActive /></Slider.Track>
+        <Slider.Track bw={1} boc="$color5"><Slider.TrackActive /></Slider.Track>
         <Slider.Thumb circular index={0} />
       </Slider>
       <Button size="$2" onPress={() => setProgress((prev) => (prev + 20) % 100)}>Load</Button>

package/dist/jsx/ProgressDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ProgressDemo.tsx"],
-  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport { Button, Paragraph, Progress, SizeTokens, Slider, XStack, YStack } from 'tamagui'\n\nexport function ProgressDemo() {\n  const [size, setSize] = useState(4)\n  const [progress, setProgress] = useState(20)\n  const sizeProp = `$${size}` as SizeTokens\n\n  useEffect(() => {\n    const timer = setTimeout(() => setProgress(60), 1000)\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [])\n\n  return (\n    <>\n      <YStack h={60} ai=\"center\" space>\n        <Paragraph h={30} o={0.5}>\n          Size: {size}\n        </Paragraph>\n        <Progress size={sizeProp} value={progress}>\n          <Progress.Indicator animation=\"bouncy\" />\n        </Progress>\n      </YStack>\n\n      <XStack ai=\"center\" space pos=\"absolute\" b={10} l={20} $xxs={{ dsp: 'none' }}>\n        <Slider\n          size=\"$2\"\n          w={130}\n          defaultValue={[4]}\n          min={2}\n          max={6}\n          step={1}\n          onValueChange={([val]) => {\n            setSize(val)\n          }}\n        >\n          <Slider.Track>\n            <Slider.TrackActive />\n          </Slider.Track>\n          <Slider.Thumb circular index={0} />\n        </Slider>\n\n        <Button size=\"$2\" onPress={() => setProgress((prev) => (prev + 20) % 100)}>\n          Load\n        </Button>\n      </XStack>\n    </>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,WAAW,UAAsB,QAAQ,QAAQ,cAAc;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,WAAW,IAAI;AAErB,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,EAAE,GAAG,GAAI;AACpD,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IACE,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS;AAAA,MACzB,CAAC,UAAU,GAAG,IAAI,GAAG;AAAA,SAAK;AAAA,SACjB;AAAA,MACT,EAFC;AAAA,MAGD,CAAC,SAAS,MAAM,UAAU,OAAO,UAC/B,CAAC,SAAS,UAAU,UAAU,SAAS,EACzC,EAFC;AAAA,IAGH,EAPC;AAAA,IASD,CAAC,OAAO,GAAG,SAAS,MAAM,IAAI,WAAW,GAAG,IAAI,GAAG,IAAI,MAAM,EAAE,KAAK,OAAO;AAAA,MACzE,CAAC;AAAA,QACC,KAAK;AAAA,QACL,GAAG;AAAA,QACH,cAAc,CAAC,CAAC;AAAA,QAChB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,MAAM;AAAA,QACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,kBAAQ,GAAG;AAAA,QACb;AAAA;AAAA,QAEA,CAAC,OAAO,MACN,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,QAGR,CAAC,OAAO,MAAM,SAAS,OAAO,GAAG;AAAA,MACnC,EAfC;AAAA,MAiBD,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,IAE3E,EAFC;AAAA,IAGH,EArBC;AAAA,EAsBH;AAEJ;",
+  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport { Button, Paragraph, Progress, SizeTokens, Slider, XStack, YStack } from 'tamagui'\n\nexport function ProgressDemo() {\n  const [size, setSize] = useState(4)\n  const [progress, setProgress] = useState(20)\n  const sizeProp = `$${size}` as SizeTokens\n\n  useEffect(() => {\n    const timer = setTimeout(() => setProgress(60), 1000)\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [])\n\n  return (\n    <>\n      <YStack h={60} ai=\"center\" space>\n        <Paragraph h={30} o={0.5}>\n          Size: {size}\n        </Paragraph>\n        <Progress size={sizeProp} value={progress}>\n          <Progress.Indicator animation=\"bouncy\" />\n        </Progress>\n      </YStack>\n\n      <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n        <Slider\n          size=\"$2\"\n          w={130}\n          defaultValue={[4]}\n          min={2}\n          max={6}\n          step={1}\n          onValueChange={([val]) => {\n            setSize(val)\n          }}\n        >\n          <Slider.Track bw={1} boc=\"$color5\">\n            <Slider.TrackActive />\n          </Slider.Track>\n          <Slider.Thumb circular index={0} />\n        </Slider>\n\n        <Button size=\"$2\" onPress={() => setProgress((prev) => (prev + 20) % 100)}>\n          Load\n        </Button>\n      </XStack>\n    </>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,WAAW,UAAsB,QAAQ,QAAQ,cAAc;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,WAAW,IAAI;AAErB,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,EAAE,GAAG,GAAI;AACpD,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IACE,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS;AAAA,MACzB,CAAC,UAAU,GAAG,IAAI,GAAG;AAAA,SAAK;AAAA,SACjB;AAAA,MACT,EAFC;AAAA,MAGD,CAAC,SAAS,MAAM,UAAU,OAAO,UAC/B,CAAC,SAAS,UAAU,UAAU,SAAS,EACzC,EAFC;AAAA,IAGH,EAPC;AAAA,IASD,CAAC,OAAO,GAAG,SAAS,MAAM,IAAI,WAAW,EAAE,KAAK,EAAE,KAAK,MAAM,EAAE,KAAK,OAAO;AAAA,MACzE,CAAC;AAAA,QACC,KAAK;AAAA,QACL,GAAG;AAAA,QACH,cAAc,CAAC,CAAC;AAAA,QAChB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,MAAM;AAAA,QACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,kBAAQ,GAAG;AAAA,QACb;AAAA;AAAA,QAEA,CAAC,OAAO,MAAM,IAAI,GAAG,IAAI,UACvB,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,QAGR,CAAC,OAAO,MAAM,SAAS,OAAO,GAAG;AAAA,MACnC,EAfC;AAAA,MAiBD,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,IAE3E,EAFC;AAAA,IAGH,EArBC;AAAA,EAsBH;AAEJ;",
   "names": []
 }

package/dist/jsx/ProgressDemo.mjs

@@ -18,7 +18,7 @@ function ProgressDemo() {
       </Paragraph>
       <Progress size={sizeProp} value={progress}><Progress.Indicator animation="bouncy" /></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}
@@ -30,7 +30,7 @@ function ProgressDemo() {
           setSize(val);
         }}
       >
-        <Slider.Track><Slider.TrackActive /></Slider.Track>
+        <Slider.Track bw={1} boc="$color5"><Slider.TrackActive /></Slider.Track>
         <Slider.Thumb circular index={0} />
       </Slider>
       <Button size="$2" onPress={() => setProgress((prev) => (prev + 20) % 100)}>Load</Button>

package/dist/jsx/ProgressDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ProgressDemo.tsx"],
-  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport { Button, Paragraph, Progress, SizeTokens, Slider, XStack, YStack } from 'tamagui'\n\nexport function ProgressDemo() {\n  const [size, setSize] = useState(4)\n  const [progress, setProgress] = useState(20)\n  const sizeProp = `$${size}` as SizeTokens\n\n  useEffect(() => {\n    const timer = setTimeout(() => setProgress(60), 1000)\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [])\n\n  return (\n    <>\n      <YStack h={60} ai=\"center\" space>\n        <Paragraph h={30} o={0.5}>\n          Size: {size}\n        </Paragraph>\n        <Progress size={sizeProp} value={progress}>\n          <Progress.Indicator animation=\"bouncy\" />\n        </Progress>\n      </YStack>\n\n      <XStack ai=\"center\" space pos=\"absolute\" b={10} l={20} $xxs={{ dsp: 'none' }}>\n        <Slider\n          size=\"$2\"\n          w={130}\n          defaultValue={[4]}\n          min={2}\n          max={6}\n          step={1}\n          onValueChange={([val]) => {\n            setSize(val)\n          }}\n        >\n          <Slider.Track>\n            <Slider.TrackActive />\n          </Slider.Track>\n          <Slider.Thumb circular index={0} />\n        </Slider>\n\n        <Button size=\"$2\" onPress={() => setProgress((prev) => (prev + 20) % 100)}>\n          Load\n        </Button>\n      </XStack>\n    </>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,WAAW,UAAsB,QAAQ,QAAQ,cAAc;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,WAAW,IAAI;AAErB,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,EAAE,GAAG,GAAI;AACpD,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IACE,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS;AAAA,MACzB,CAAC,UAAU,GAAG,IAAI,GAAG;AAAA,SAAK;AAAA,SACjB;AAAA,MACT,EAFC;AAAA,MAGD,CAAC,SAAS,MAAM,UAAU,OAAO,UAC/B,CAAC,SAAS,UAAU,UAAU,SAAS,EACzC,EAFC;AAAA,IAGH,EAPC;AAAA,IASD,CAAC,OAAO,GAAG,SAAS,MAAM,IAAI,WAAW,GAAG,IAAI,GAAG,IAAI,MAAM,EAAE,KAAK,OAAO;AAAA,MACzE,CAAC;AAAA,QACC,KAAK;AAAA,QACL,GAAG;AAAA,QACH,cAAc,CAAC,CAAC;AAAA,QAChB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,MAAM;AAAA,QACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,kBAAQ,GAAG;AAAA,QACb;AAAA;AAAA,QAEA,CAAC,OAAO,MACN,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,QAGR,CAAC,OAAO,MAAM,SAAS,OAAO,GAAG;AAAA,MACnC,EAfC;AAAA,MAiBD,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,IAE3E,EAFC;AAAA,IAGH,EArBC;AAAA,EAsBH;AAEJ;",
+  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport { Button, Paragraph, Progress, SizeTokens, Slider, XStack, YStack } from 'tamagui'\n\nexport function ProgressDemo() {\n  const [size, setSize] = useState(4)\n  const [progress, setProgress] = useState(20)\n  const sizeProp = `$${size}` as SizeTokens\n\n  useEffect(() => {\n    const timer = setTimeout(() => setProgress(60), 1000)\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [])\n\n  return (\n    <>\n      <YStack h={60} ai=\"center\" space>\n        <Paragraph h={30} o={0.5}>\n          Size: {size}\n        </Paragraph>\n        <Progress size={sizeProp} value={progress}>\n          <Progress.Indicator animation=\"bouncy\" />\n        </Progress>\n      </YStack>\n\n      <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n        <Slider\n          size=\"$2\"\n          w={130}\n          defaultValue={[4]}\n          min={2}\n          max={6}\n          step={1}\n          onValueChange={([val]) => {\n            setSize(val)\n          }}\n        >\n          <Slider.Track bw={1} boc=\"$color5\">\n            <Slider.TrackActive />\n          </Slider.Track>\n          <Slider.Thumb circular index={0} />\n        </Slider>\n\n        <Button size=\"$2\" onPress={() => setProgress((prev) => (prev + 20) % 100)}>\n          Load\n        </Button>\n      </XStack>\n    </>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,WAAW,UAAsB,QAAQ,QAAQ,cAAc;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,WAAW,IAAI;AAErB,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,EAAE,GAAG,GAAI;AACpD,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IACE,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS;AAAA,MACzB,CAAC,UAAU,GAAG,IAAI,GAAG;AAAA,SAAK;AAAA,SACjB;AAAA,MACT,EAFC;AAAA,MAGD,CAAC,SAAS,MAAM,UAAU,OAAO,UAC/B,CAAC,SAAS,UAAU,UAAU,SAAS,EACzC,EAFC;AAAA,IAGH,EAPC;AAAA,IASD,CAAC,OAAO,GAAG,SAAS,MAAM,IAAI,WAAW,EAAE,KAAK,EAAE,KAAK,MAAM,EAAE,KAAK,OAAO;AAAA,MACzE,CAAC;AAAA,QACC,KAAK;AAAA,QACL,GAAG;AAAA,QACH,cAAc,CAAC,CAAC;AAAA,QAChB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,MAAM;AAAA,QACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,kBAAQ,GAAG;AAAA,QACb;AAAA;AAAA,QAEA,CAAC,OAAO,MAAM,IAAI,GAAG,IAAI,UACvB,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,QAGR,CAAC,OAAO,MAAM,SAAS,OAAO,GAAG;AAAA,MACnC,EAfC;AAAA,MAiBD,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,IAE3E,EAFC;AAAA,IAGH,EArBC;AAAA,EAsBH;AAEJ;",
   "names": []
 }

package/dist/jsx/SliderDemo.js

@@ -8,7 +8,7 @@ function SliderDemo() {
 function SimpleSlider({ children, ...props }) {
   return <Slider defaultValue={[50]} max={100} step={1} {...props}>
     <Slider.Track><Slider.TrackActive /></Slider.Track>
-    <Slider.Thumb bordered circular elevate index={0} />
+    <Slider.Thumb index={0} circular elevate />
     {children}
   </Slider>;
 }

package/dist/jsx/SliderDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SliderDemo.tsx"],
-  "sourcesContent": ["import { Slider, SliderProps, Spacer, XStack } from 'tamagui'\n\nexport function SliderDemo() {\n  return (\n    <XStack height={200} ai=\"center\" space=\"$8\">\n      <SimpleSlider height={200} orientation=\"vertical\" />\n      <SimpleSlider width={200} />\n    </XStack>\n  )\n}\n\nfunction SimpleSlider({ children, ...props }: SliderProps) {\n  return (\n    <Slider defaultValue={[50]} max={100} step={1} {...props}>\n      <Slider.Track>\n        <Slider.TrackActive />\n      </Slider.Track>\n      <Slider.Thumb bordered circular elevate index={0} />\n      {children}\n    </Slider>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,QAA6B,cAAc;AAE7C,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,QAAQ,KAAK,GAAG,SAAS,MAAM;AAAA,IACrC,CAAC,aAAa,QAAQ,KAAK,YAAY,WAAW;AAAA,IAClD,CAAC,aAAa,OAAO,KAAK;AAAA,EAC5B,EAHC;AAKL;AAEA,SAAS,aAAa,EAAE,UAAU,GAAG,MAAM,GAAgB;AACzD,SACE,CAAC,OAAO,cAAc,CAAC,EAAE,GAAG,KAAK,KAAK,MAAM,OAAO;AAAA,IACjD,CAAC,OAAO,MACN,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,IAGR,CAAC,OAAO,MAAM,SAAS,SAAS,QAAQ,OAAO,GAAG;AAAA,KACjD;AAAA,EACH,EANC;AAQL;",
+  "sourcesContent": ["import { Slider, SliderProps, Spacer, XStack } from 'tamagui'\n\nexport function SliderDemo() {\n  return (\n    <XStack height={200} ai=\"center\" space=\"$8\">\n      <SimpleSlider height={200} orientation=\"vertical\" />\n      <SimpleSlider width={200} />\n    </XStack>\n  )\n}\n\nfunction SimpleSlider({ children, ...props }: SliderProps) {\n  return (\n    <Slider defaultValue={[50]} max={100} step={1} {...props}>\n      <Slider.Track>\n        <Slider.TrackActive />\n      </Slider.Track>\n      <Slider.Thumb index={0} circular elevate />\n      {children}\n    </Slider>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,QAA6B,cAAc;AAE7C,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,QAAQ,KAAK,GAAG,SAAS,MAAM;AAAA,IACrC,CAAC,aAAa,QAAQ,KAAK,YAAY,WAAW;AAAA,IAClD,CAAC,aAAa,OAAO,KAAK;AAAA,EAC5B,EAHC;AAKL;AAEA,SAAS,aAAa,EAAE,UAAU,GAAG,MAAM,GAAgB;AACzD,SACE,CAAC,OAAO,cAAc,CAAC,EAAE,GAAG,KAAK,KAAK,MAAM,OAAO;AAAA,IACjD,CAAC,OAAO,MACN,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,IAGR,CAAC,OAAO,MAAM,OAAO,GAAG,SAAS,QAAQ;AAAA,KACxC;AAAA,EACH,EANC;AAQL;",
   "names": []
 }

package/dist/jsx/SliderDemo.mjs

@@ -8,7 +8,7 @@ function SliderDemo() {
 function SimpleSlider({ children, ...props }) {
   return <Slider defaultValue={[50]} max={100} step={1} {...props}>
     <Slider.Track><Slider.TrackActive /></Slider.Track>
-    <Slider.Thumb bordered circular elevate index={0} />
+    <Slider.Thumb index={0} circular elevate />
     {children}
   </Slider>;
 }

package/dist/jsx/SliderDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SliderDemo.tsx"],
-  "sourcesContent": ["import { Slider, SliderProps, Spacer, XStack } from 'tamagui'\n\nexport function SliderDemo() {\n  return (\n    <XStack height={200} ai=\"center\" space=\"$8\">\n      <SimpleSlider height={200} orientation=\"vertical\" />\n      <SimpleSlider width={200} />\n    </XStack>\n  )\n}\n\nfunction SimpleSlider({ children, ...props }: SliderProps) {\n  return (\n    <Slider defaultValue={[50]} max={100} step={1} {...props}>\n      <Slider.Track>\n        <Slider.TrackActive />\n      </Slider.Track>\n      <Slider.Thumb bordered circular elevate index={0} />\n      {children}\n    </Slider>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,QAA6B,cAAc;AAE7C,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,QAAQ,KAAK,GAAG,SAAS,MAAM;AAAA,IACrC,CAAC,aAAa,QAAQ,KAAK,YAAY,WAAW;AAAA,IAClD,CAAC,aAAa,OAAO,KAAK;AAAA,EAC5B,EAHC;AAKL;AAEA,SAAS,aAAa,EAAE,UAAU,GAAG,MAAM,GAAgB;AACzD,SACE,CAAC,OAAO,cAAc,CAAC,EAAE,GAAG,KAAK,KAAK,MAAM,OAAO;AAAA,IACjD,CAAC,OAAO,MACN,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,IAGR,CAAC,OAAO,MAAM,SAAS,SAAS,QAAQ,OAAO,GAAG;AAAA,KACjD;AAAA,EACH,EANC;AAQL;",
+  "sourcesContent": ["import { Slider, SliderProps, Spacer, XStack } from 'tamagui'\n\nexport function SliderDemo() {\n  return (\n    <XStack height={200} ai=\"center\" space=\"$8\">\n      <SimpleSlider height={200} orientation=\"vertical\" />\n      <SimpleSlider width={200} />\n    </XStack>\n  )\n}\n\nfunction SimpleSlider({ children, ...props }: SliderProps) {\n  return (\n    <Slider defaultValue={[50]} max={100} step={1} {...props}>\n      <Slider.Track>\n        <Slider.TrackActive />\n      </Slider.Track>\n      <Slider.Thumb index={0} circular elevate />\n      {children}\n    </Slider>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,QAA6B,cAAc;AAE7C,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,QAAQ,KAAK,GAAG,SAAS,MAAM;AAAA,IACrC,CAAC,aAAa,QAAQ,KAAK,YAAY,WAAW;AAAA,IAClD,CAAC,aAAa,OAAO,KAAK;AAAA,EAC5B,EAHC;AAKL;AAEA,SAAS,aAAa,EAAE,UAAU,GAAG,MAAM,GAAgB;AACzD,SACE,CAAC,OAAO,cAAc,CAAC,EAAE,GAAG,KAAK,KAAK,MAAM,OAAO;AAAA,IACjD,CAAC,OAAO,MACN,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,IAGR,CAAC,OAAO,MAAM,OAAO,GAAG,SAAS,QAAQ;AAAA,KACxC;AAAA,EACH,EANC;AAQL;",
   "names": []
 }

package/dist/jsx/TabsAdvancedDemo.js

@@ -0,0 +1,103 @@
+import { useRef, useState } from "react";
+import {
+  AnimatePresence,
+  H5,
+  SizableText,
+  Stack,
+  Tabs,
+  YStack,
+  styled
+} from "tamagui";
+const TabsAdvancedDemo = () => {
+  const [currentTab, setCurrentTab] = useState("tab1");
+  const [IntentIndicator, setIntentIndicator] = useState(null);
+  const [selectIndicator, setSelectIndicator] = useState(null);
+  const prevSelectionIndicatorLayout = useRef(null);
+  const handleUpdateSelectionIndicator = (newSize) => {
+    prevSelectionIndicatorLayout.current = selectIndicator;
+    setSelectIndicator(newSize);
+  };
+  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 = (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 } }
+  }
+});
+export {
+  TabsAdvancedDemo
+};
+//# sourceMappingURL=TabsAdvancedDemo.js.map

package/dist/jsx/TabsAdvancedDemo.js.map

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

package/dist/jsx/TabsAdvancedDemo.mjs

@@ -0,0 +1,103 @@
+import { useRef, useState } from "react";
+import {
+  AnimatePresence,
+  H5,
+  SizableText,
+  Stack,
+  Tabs,
+  YStack,
+  styled
+} from "tamagui";
+const TabsAdvancedDemo = () => {
+  const [currentTab, setCurrentTab] = useState("tab1");
+  const [IntentIndicator, setIntentIndicator] = useState(null);
+  const [selectIndicator, setSelectIndicator] = useState(null);
+  const prevSelectionIndicatorLayout = useRef(null);
+  const handleUpdateSelectionIndicator = (newSize) => {
+    prevSelectionIndicatorLayout.current = selectIndicator;
+    setSelectIndicator(newSize);
+  };
+  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 = (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 } }
+  }
+});
+export {
+  TabsAdvancedDemo
+};
+//# sourceMappingURL=TabsAdvancedDemo.mjs.map

package/dist/jsx/TabsAdvancedDemo.mjs.map

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

package/dist/jsx/TabsDemo.js

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { Button, H5, SizableText, Tabs, XStack } from "tamagui";
+const demos = ["horizontal", "vertical"];
+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>;
+};
+export {
+  TabsDemo
+};
+//# sourceMappingURL=TabsDemo.js.map

package/dist/jsx/TabsDemo.js.map

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

package/dist/jsx/TabsDemo.mjs

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { Button, H5, SizableText, Tabs, XStack } from "tamagui";
+const demos = ["horizontal", "vertical"];
+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>;
+};
+export {
+  TabsDemo
+};
+//# sourceMappingURL=TabsDemo.mjs.map

package/dist/jsx/TabsDemo.mjs.map

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