@tamagui/demos 1.11.2 → 1.12.0

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=\"$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;",
+  "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 height={60} alignItems=\"center\" space>\n        <Paragraph height={30} opacity={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 position=\"absolute\" bottom=\"$3\" left=\"$4\" $xxs={{ display: 'none' }}>\n        <Slider\n          size=\"$2\"\n          width={130}\n          defaultValue={[4]}\n          min={2}\n          max={6}\n          step={1}\n          onValueChange={([val]) => {\n            setSize(val)\n          }}\n        >\n          <Slider.Track borderWidth={1} borderColor=\"$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,QAAQ,IAAI,WAAW,SAAS;AAAA,MACtC,CAAC,UAAU,QAAQ,IAAI,SAAS;AAAA,SAAK;AAAA,SAC5B;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,SAAS,WAAW,OAAO,KAAK,KAAK,KAAK,MAAM,EAAE,SAAS,OAAO;AAAA,MAC1F,CAAC;AAAA,QACC,KAAK;AAAA,QACL,OAAO;AAAA,QACP,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,aAAa,GAAG,YAAY,UACxC,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/RadioGroupDemo.js

@@ -1,6 +1,6 @@
 import { Label, RadioGroup, XStack, YStack } from "tamagui";
 function RadioGroupDemo() {
-  return <RadioGroup defaultValue="3" name="form"><YStack w={300} ai="center" space="$2">
+  return <RadioGroup defaultValue="3" name="form"><YStack width={300} alignItems="center" space="$2">
     <RadioGroupItemWithLabel size="$3" value="2" label="Second value" />
     <RadioGroupItemWithLabel size="$4" value="3" label="Third value" />
     <RadioGroupItemWithLabel size="$5" value="4" label="Fourth value" />
@@ -8,7 +8,7 @@ function RadioGroupDemo() {
 }
 function RadioGroupItemWithLabel(props) {
   const id = `radiogroup-${props.value}`;
-  return <XStack w={300} ai="center" space="$4">
+  return <XStack width={300} alignItems="center" space="$4">
     <RadioGroup.Item value={props.value} id={id} size={props.size}><RadioGroup.Indicator /></RadioGroup.Item>
     <Label size={props.size} htmlFor={id}>{props.label}</Label>
   </XStack>;

package/dist/jsx/RadioGroupDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/RadioGroupDemo.tsx"],
-  "sourcesContent": ["import { Label, RadioGroup, SizeTokens, ThemeableStack, XStack, YStack } from 'tamagui'\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"3\" name=\"form\">\n      <YStack w={300} ai=\"center\" space=\"$2\">\n        <RadioGroupItemWithLabel size=\"$3\" value=\"2\" label=\"Second value\" />\n        <RadioGroupItemWithLabel size=\"$4\" value=\"3\" label=\"Third value\" />\n        <RadioGroupItemWithLabel size=\"$5\" value=\"4\" label=\"Fourth value\" />\n      </YStack>\n    </RadioGroup>\n  )\n}\n\nfunction RadioGroupItemWithLabel(props: {\n  size: SizeTokens\n  value: string\n  label: string\n}) {\n  const id = `radiogroup-${props.value}`\n  return (\n    <XStack w={300} ai=\"center\" space=\"$4\">\n      <RadioGroup.Item value={props.value} id={id} size={props.size}>\n        <RadioGroup.Indicator />\n      </RadioGroup.Item>\n\n      <Label size={props.size} htmlFor={id}>\n        {props.label}\n      </Label>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,OAAO,YAAwC,QAAQ,cAAc;AAEvE,SAAS,iBAAiB;AAC/B,SACE,CAAC,WAAW,aAAa,IAAI,KAAK,OAChC,CAAC,OAAO,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,IAChC,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,eAAe;AAAA,IAClE,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,cAAc;AAAA,IACjE,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,eAAe;AAAA,EACpE,EAJC,OAKH,EANC;AAQL;AAEA,SAAS,wBAAwB,OAI9B;AACD,QAAM,KAAK,cAAc,MAAM;AAC/B,SACE,CAAC,OAAO,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,IAChC,CAAC,WAAW,KAAK,OAAO,MAAM,OAAO,IAAI,IAAI,MAAM,MAAM,MACvD,CAAC,WAAW,UAAU,EACxB,EAFC,WAAW;AAAA,IAIZ,CAAC,MAAM,MAAM,MAAM,MAAM,SAAS,KAC/B,MAAM,MACT,EAFC;AAAA,EAGH,EARC;AAUL;",
+  "sourcesContent": ["import { Label, RadioGroup, SizeTokens, ThemeableStack, XStack, YStack } from 'tamagui'\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"3\" name=\"form\">\n      <YStack width={300} alignItems=\"center\" space=\"$2\">\n        <RadioGroupItemWithLabel size=\"$3\" value=\"2\" label=\"Second value\" />\n        <RadioGroupItemWithLabel size=\"$4\" value=\"3\" label=\"Third value\" />\n        <RadioGroupItemWithLabel size=\"$5\" value=\"4\" label=\"Fourth value\" />\n      </YStack>\n    </RadioGroup>\n  )\n}\n\nfunction RadioGroupItemWithLabel(props: {\n  size: SizeTokens\n  value: string\n  label: string\n}) {\n  const id = `radiogroup-${props.value}`\n  return (\n    <XStack width={300} alignItems=\"center\" space=\"$4\">\n      <RadioGroup.Item value={props.value} id={id} size={props.size}>\n        <RadioGroup.Indicator />\n      </RadioGroup.Item>\n\n      <Label size={props.size} htmlFor={id}>\n        {props.label}\n      </Label>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,OAAO,YAAwC,QAAQ,cAAc;AAEvE,SAAS,iBAAiB;AAC/B,SACE,CAAC,WAAW,aAAa,IAAI,KAAK,OAChC,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,eAAe;AAAA,IAClE,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,cAAc;AAAA,IACjE,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,eAAe;AAAA,EACpE,EAJC,OAKH,EANC;AAQL;AAEA,SAAS,wBAAwB,OAI9B;AACD,QAAM,KAAK,cAAc,MAAM;AAC/B,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,WAAW,KAAK,OAAO,MAAM,OAAO,IAAI,IAAI,MAAM,MAAM,MACvD,CAAC,WAAW,UAAU,EACxB,EAFC,WAAW;AAAA,IAIZ,CAAC,MAAM,MAAM,MAAM,MAAM,SAAS,KAC/B,MAAM,MACT,EAFC;AAAA,EAGH,EARC;AAUL;",
   "names": []
 }

package/dist/jsx/RadioGroupDemo.mjs

@@ -1,6 +1,6 @@
 import { Label, RadioGroup, XStack, YStack } from "tamagui";
 function RadioGroupDemo() {
-  return <RadioGroup defaultValue="3" name="form"><YStack w={300} ai="center" space="$2">
+  return <RadioGroup defaultValue="3" name="form"><YStack width={300} alignItems="center" space="$2">
     <RadioGroupItemWithLabel size="$3" value="2" label="Second value" />
     <RadioGroupItemWithLabel size="$4" value="3" label="Third value" />
     <RadioGroupItemWithLabel size="$5" value="4" label="Fourth value" />
@@ -8,7 +8,7 @@ function RadioGroupDemo() {
 }
 function RadioGroupItemWithLabel(props) {
   const id = `radiogroup-${props.value}`;
-  return <XStack w={300} ai="center" space="$4">
+  return <XStack width={300} alignItems="center" space="$4">
     <RadioGroup.Item value={props.value} id={id} size={props.size}><RadioGroup.Indicator /></RadioGroup.Item>
     <Label size={props.size} htmlFor={id}>{props.label}</Label>
   </XStack>;

package/dist/jsx/RadioGroupDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/RadioGroupDemo.tsx"],
-  "sourcesContent": ["import { Label, RadioGroup, SizeTokens, ThemeableStack, XStack, YStack } from 'tamagui'\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"3\" name=\"form\">\n      <YStack w={300} ai=\"center\" space=\"$2\">\n        <RadioGroupItemWithLabel size=\"$3\" value=\"2\" label=\"Second value\" />\n        <RadioGroupItemWithLabel size=\"$4\" value=\"3\" label=\"Third value\" />\n        <RadioGroupItemWithLabel size=\"$5\" value=\"4\" label=\"Fourth value\" />\n      </YStack>\n    </RadioGroup>\n  )\n}\n\nfunction RadioGroupItemWithLabel(props: {\n  size: SizeTokens\n  value: string\n  label: string\n}) {\n  const id = `radiogroup-${props.value}`\n  return (\n    <XStack w={300} ai=\"center\" space=\"$4\">\n      <RadioGroup.Item value={props.value} id={id} size={props.size}>\n        <RadioGroup.Indicator />\n      </RadioGroup.Item>\n\n      <Label size={props.size} htmlFor={id}>\n        {props.label}\n      </Label>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,OAAO,YAAwC,QAAQ,cAAc;AAEvE,SAAS,iBAAiB;AAC/B,SACE,CAAC,WAAW,aAAa,IAAI,KAAK,OAChC,CAAC,OAAO,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,IAChC,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,eAAe;AAAA,IAClE,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,cAAc;AAAA,IACjE,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,eAAe;AAAA,EACpE,EAJC,OAKH,EANC;AAQL;AAEA,SAAS,wBAAwB,OAI9B;AACD,QAAM,KAAK,cAAc,MAAM;AAC/B,SACE,CAAC,OAAO,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,IAChC,CAAC,WAAW,KAAK,OAAO,MAAM,OAAO,IAAI,IAAI,MAAM,MAAM,MACvD,CAAC,WAAW,UAAU,EACxB,EAFC,WAAW;AAAA,IAIZ,CAAC,MAAM,MAAM,MAAM,MAAM,SAAS,KAC/B,MAAM,MACT,EAFC;AAAA,EAGH,EARC;AAUL;",
+  "sourcesContent": ["import { Label, RadioGroup, SizeTokens, ThemeableStack, XStack, YStack } from 'tamagui'\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"3\" name=\"form\">\n      <YStack width={300} alignItems=\"center\" space=\"$2\">\n        <RadioGroupItemWithLabel size=\"$3\" value=\"2\" label=\"Second value\" />\n        <RadioGroupItemWithLabel size=\"$4\" value=\"3\" label=\"Third value\" />\n        <RadioGroupItemWithLabel size=\"$5\" value=\"4\" label=\"Fourth value\" />\n      </YStack>\n    </RadioGroup>\n  )\n}\n\nfunction RadioGroupItemWithLabel(props: {\n  size: SizeTokens\n  value: string\n  label: string\n}) {\n  const id = `radiogroup-${props.value}`\n  return (\n    <XStack width={300} alignItems=\"center\" space=\"$4\">\n      <RadioGroup.Item value={props.value} id={id} size={props.size}>\n        <RadioGroup.Indicator />\n      </RadioGroup.Item>\n\n      <Label size={props.size} htmlFor={id}>\n        {props.label}\n      </Label>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,OAAO,YAAwC,QAAQ,cAAc;AAEvE,SAAS,iBAAiB;AAC/B,SACE,CAAC,WAAW,aAAa,IAAI,KAAK,OAChC,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,eAAe;AAAA,IAClE,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,cAAc;AAAA,IACjE,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,eAAe;AAAA,EACpE,EAJC,OAKH,EANC;AAQL;AAEA,SAAS,wBAAwB,OAI9B;AACD,QAAM,KAAK,cAAc,MAAM;AAC/B,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,WAAW,KAAK,OAAO,MAAM,OAAO,IAAI,IAAI,MAAM,MAAM,MACvD,CAAC,WAAW,UAAU,EACxB,EAFC,WAAW;AAAA,IAIZ,CAAC,MAAM,MAAM,MAAM,MAAM,SAAS,KAC/B,MAAM,MACT,EAFC;AAAA,EAGH,EARC;AAUL;",
   "names": []
 }

package/dist/jsx/ScrollViewDemo.js

@@ -1,14 +1,14 @@
 import { Circle, ScrollView, Square, XStack } from "tamagui";
 function ScrollViewDemo() {
-  return <ScrollView maxHeight={250} w="75%" bc="$background" p="$4" br="$4"><XStack flexWrap="wrap" ai="center" jc="center">
-    <Square m="$4" size={120} bc="$red9" />
-    <Circle m="$4" size={120} bc="$orange9" />
-    <Square m="$4" size={120} bc="$yellow9" />
-    <Circle m="$4" size={120} bc="$green9" />
-    <Square m="$4" size={120} bc="$blue9" />
-    <Circle m="$4" size={120} bc="$purple9" />
-    <Square m="$4" size={120} bc="$pink9" />
-    <Circle m="$4" size={120} bc="$red9" />
+  return <ScrollView maxHeight={250} width="75%" backgroundColor="$background" padding="$4" borderRadius="$4"><XStack flexWrap="wrap" alignItems="center" justifyContent="center">
+    <Square margin="$4" size={120} backgroundColor="$red9" />
+    <Circle margin="$4" size={120} backgroundColor="$orange9" />
+    <Square margin="$4" size={120} backgroundColor="$yellow9" />
+    <Circle margin="$4" size={120} backgroundColor="$green9" />
+    <Square margin="$4" size={120} backgroundColor="$blue9" />
+    <Circle margin="$4" size={120} backgroundColor="$purple9" />
+    <Square margin="$4" size={120} backgroundColor="$pink9" />
+    <Circle margin="$4" size={120} backgroundColor="$red9" />
   </XStack></ScrollView>;
 }
 export {

package/dist/jsx/ScrollViewDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ScrollViewDemo.tsx"],
-  "sourcesContent": ["import { Circle, ScrollView, Square, XStack } from 'tamagui'\n\nexport function ScrollViewDemo() {\n  return (\n    <ScrollView maxHeight={250} w=\"75%\" bc=\"$background\" p=\"$4\" br=\"$4\">\n      <XStack flexWrap=\"wrap\" ai=\"center\" jc=\"center\">\n        <Square m=\"$4\" size={120} bc=\"$red9\" />\n        <Circle m=\"$4\" size={120} bc=\"$orange9\" />\n        <Square m=\"$4\" size={120} bc=\"$yellow9\" />\n        <Circle m=\"$4\" size={120} bc=\"$green9\" />\n        <Square m=\"$4\" size={120} bc=\"$blue9\" />\n        <Circle m=\"$4\" size={120} bc=\"$purple9\" />\n        <Square m=\"$4\" size={120} bc=\"$pink9\" />\n        <Circle m=\"$4\" size={120} bc=\"$red9\" />\n      </XStack>\n    </ScrollView>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,QAAQ,YAAY,QAAQ,cAAc;AAE5C,SAAS,iBAAiB;AAC/B,SACE,CAAC,WAAW,WAAW,KAAK,EAAE,MAAM,GAAG,cAAc,EAAE,KAAK,GAAG,KAC7D,CAAC,OAAO,SAAS,OAAO,GAAG,SAAS,GAAG;AAAA,IACrC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,QAAQ;AAAA,IACrC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,WAAW;AAAA,IACxC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,WAAW;AAAA,IACxC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,UAAU;AAAA,IACvC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,SAAS;AAAA,IACtC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,WAAW;AAAA,IACxC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,SAAS;AAAA,IACtC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,QAAQ;AAAA,EACvC,EATC,OAUH,EAXC;AAaL;",
+  "sourcesContent": ["import { Circle, ScrollView, Square, XStack } from 'tamagui'\n\nexport function ScrollViewDemo() {\n  return (\n    <ScrollView maxHeight={250} width=\"75%\" backgroundColor=\"$background\" padding=\"$4\" borderRadius=\"$4\">\n      <XStack flexWrap=\"wrap\" alignItems=\"center\" justifyContent=\"center\">\n        <Square margin=\"$4\" size={120} backgroundColor=\"$red9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$orange9\" />\n        <Square margin=\"$4\" size={120} backgroundColor=\"$yellow9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$green9\" />\n        <Square margin=\"$4\" size={120} backgroundColor=\"$blue9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$purple9\" />\n        <Square margin=\"$4\" size={120} backgroundColor=\"$pink9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$red9\" />\n      </XStack>\n    </ScrollView>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,QAAQ,YAAY,QAAQ,cAAc;AAE5C,SAAS,iBAAiB;AAC/B,SACE,CAAC,WAAW,WAAW,KAAK,MAAM,MAAM,gBAAgB,cAAc,QAAQ,KAAK,aAAa,KAC9F,CAAC,OAAO,SAAS,OAAO,WAAW,SAAS,eAAe;AAAA,IACzD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,QAAQ;AAAA,IACvD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,WAAW;AAAA,IAC1D,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,WAAW;AAAA,IAC1D,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,UAAU;AAAA,IACzD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,SAAS;AAAA,IACxD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,WAAW;AAAA,IAC1D,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,SAAS;AAAA,IACxD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,QAAQ;AAAA,EACzD,EATC,OAUH,EAXC;AAaL;",
   "names": []
 }

package/dist/jsx/ScrollViewDemo.mjs

@@ -1,14 +1,14 @@
 import { Circle, ScrollView, Square, XStack } from "tamagui";
 function ScrollViewDemo() {
-  return <ScrollView maxHeight={250} w="75%" bc="$background" p="$4" br="$4"><XStack flexWrap="wrap" ai="center" jc="center">
-    <Square m="$4" size={120} bc="$red9" />
-    <Circle m="$4" size={120} bc="$orange9" />
-    <Square m="$4" size={120} bc="$yellow9" />
-    <Circle m="$4" size={120} bc="$green9" />
-    <Square m="$4" size={120} bc="$blue9" />
-    <Circle m="$4" size={120} bc="$purple9" />
-    <Square m="$4" size={120} bc="$pink9" />
-    <Circle m="$4" size={120} bc="$red9" />
+  return <ScrollView maxHeight={250} width="75%" backgroundColor="$background" padding="$4" borderRadius="$4"><XStack flexWrap="wrap" alignItems="center" justifyContent="center">
+    <Square margin="$4" size={120} backgroundColor="$red9" />
+    <Circle margin="$4" size={120} backgroundColor="$orange9" />
+    <Square margin="$4" size={120} backgroundColor="$yellow9" />
+    <Circle margin="$4" size={120} backgroundColor="$green9" />
+    <Square margin="$4" size={120} backgroundColor="$blue9" />
+    <Circle margin="$4" size={120} backgroundColor="$purple9" />
+    <Square margin="$4" size={120} backgroundColor="$pink9" />
+    <Circle margin="$4" size={120} backgroundColor="$red9" />
   </XStack></ScrollView>;
 }
 export {

package/dist/jsx/ScrollViewDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ScrollViewDemo.tsx"],
-  "sourcesContent": ["import { Circle, ScrollView, Square, XStack } from 'tamagui'\n\nexport function ScrollViewDemo() {\n  return (\n    <ScrollView maxHeight={250} w=\"75%\" bc=\"$background\" p=\"$4\" br=\"$4\">\n      <XStack flexWrap=\"wrap\" ai=\"center\" jc=\"center\">\n        <Square m=\"$4\" size={120} bc=\"$red9\" />\n        <Circle m=\"$4\" size={120} bc=\"$orange9\" />\n        <Square m=\"$4\" size={120} bc=\"$yellow9\" />\n        <Circle m=\"$4\" size={120} bc=\"$green9\" />\n        <Square m=\"$4\" size={120} bc=\"$blue9\" />\n        <Circle m=\"$4\" size={120} bc=\"$purple9\" />\n        <Square m=\"$4\" size={120} bc=\"$pink9\" />\n        <Circle m=\"$4\" size={120} bc=\"$red9\" />\n      </XStack>\n    </ScrollView>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,QAAQ,YAAY,QAAQ,cAAc;AAE5C,SAAS,iBAAiB;AAC/B,SACE,CAAC,WAAW,WAAW,KAAK,EAAE,MAAM,GAAG,cAAc,EAAE,KAAK,GAAG,KAC7D,CAAC,OAAO,SAAS,OAAO,GAAG,SAAS,GAAG;AAAA,IACrC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,QAAQ;AAAA,IACrC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,WAAW;AAAA,IACxC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,WAAW;AAAA,IACxC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,UAAU;AAAA,IACvC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,SAAS;AAAA,IACtC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,WAAW;AAAA,IACxC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,SAAS;AAAA,IACtC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,QAAQ;AAAA,EACvC,EATC,OAUH,EAXC;AAaL;",
+  "sourcesContent": ["import { Circle, ScrollView, Square, XStack } from 'tamagui'\n\nexport function ScrollViewDemo() {\n  return (\n    <ScrollView maxHeight={250} width=\"75%\" backgroundColor=\"$background\" padding=\"$4\" borderRadius=\"$4\">\n      <XStack flexWrap=\"wrap\" alignItems=\"center\" justifyContent=\"center\">\n        <Square margin=\"$4\" size={120} backgroundColor=\"$red9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$orange9\" />\n        <Square margin=\"$4\" size={120} backgroundColor=\"$yellow9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$green9\" />\n        <Square margin=\"$4\" size={120} backgroundColor=\"$blue9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$purple9\" />\n        <Square margin=\"$4\" size={120} backgroundColor=\"$pink9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$red9\" />\n      </XStack>\n    </ScrollView>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,QAAQ,YAAY,QAAQ,cAAc;AAE5C,SAAS,iBAAiB;AAC/B,SACE,CAAC,WAAW,WAAW,KAAK,MAAM,MAAM,gBAAgB,cAAc,QAAQ,KAAK,aAAa,KAC9F,CAAC,OAAO,SAAS,OAAO,WAAW,SAAS,eAAe;AAAA,IACzD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,QAAQ;AAAA,IACvD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,WAAW;AAAA,IAC1D,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,WAAW;AAAA,IAC1D,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,UAAU;AAAA,IACzD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,SAAS;AAAA,IACxD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,WAAW;AAAA,IAC1D,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,SAAS;AAAA,IACxD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,QAAQ;AAAA,EACzD,EATC,OAUH,EAXC;AAaL;",
   "names": []
 }

package/dist/jsx/SelectDemo.js

@@ -5,20 +5,20 @@ import { LinearGradient } from "tamagui/linear-gradient";
 function SelectDemo() {
   const [val, setVal] = useState("apple");
   return <Select id="food" value={val} onValueChange={setVal}>
-    <Select.Trigger w={180} iconAfter={ChevronDown}><Select.Value placeholder="Something" /></Select.Trigger>
+    <Select.Trigger width={180} iconAfter={ChevronDown}><Select.Value placeholder="Something" /></Select.Trigger>
     <Adapt when="sm" platform="touch"><Sheet modal dismissOnSnapToBottom>
       <Sheet.Frame><Sheet.ScrollView><Adapt.Contents /></Sheet.ScrollView></Sheet.Frame>
       <Sheet.Overlay />
     </Sheet></Adapt>
     <Select.Content zIndex={2e5}>
-      <Select.ScrollUpButton ai="center" jc="center" pos="relative" w="100%" h="$3">
-        <YStack zi={10}><ChevronUp size={20} /></YStack>
+      <Select.ScrollUpButton alignItems="center" justifyContent="center" position="relative" width="100%" height="$3">
+        <YStack zIndex={10}><ChevronUp size={20} /></YStack>
         <LinearGradient
           start={[0, 0]}
           end={[0, 1]}
           fullscreen
           colors={["$background", "$backgroundTransparent"]}
-          br="$4"
+          borderRadius="$4"
         />
       </Select.ScrollUpButton>
       <Select.Viewport minWidth={200}><Select.Group space="$0">
@@ -26,18 +26,18 @@ function SelectDemo() {
         {items.map((item, i) => {
           return <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>
             <Select.ItemText>{item.name}</Select.ItemText>
-            <Select.ItemIndicator ml="auto"><Check size={16} /></Select.ItemIndicator>
+            <Select.ItemIndicator marginLeft="auto"><Check size={16} /></Select.ItemIndicator>
           </Select.Item>;
         })}
       </Select.Group></Select.Viewport>
-      <Select.ScrollDownButton ai="center" jc="center" pos="relative" w="100%" h="$3">
-        <YStack zi={10}><ChevronDown size={20} /></YStack>
+      <Select.ScrollDownButton alignItems="center" justifyContent="center" position="relative" width="100%" height="$3">
+        <YStack zIndex={10}><ChevronDown size={20} /></YStack>
         <LinearGradient
           start={[0, 0]}
           end={[0, 1]}
           fullscreen
           colors={["$backgroundTransparent", "$background"]}
-          br="$4"
+          borderRadius="$4"
         />
       </Select.ScrollDownButton>
     </Select.Content>

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: 'Raspberry' },\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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",
+  "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 width={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 alignItems=\"center\" justifyContent=\"center\" position=\"relative\" width=\"100%\" height=\"$3\">\n          <YStack zIndex={10}>\n            <ChevronUp size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$background', '$backgroundTransparent']}\n            borderRadius=\"$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 marginLeft=\"auto\">\n                    <Check size={16} />\n                  </Select.ItemIndicator>\n                </Select.Item>\n              )\n            })}\n          </Select.Group>\n        </Select.Viewport>\n\n        <Select.ScrollDownButton alignItems=\"center\" justifyContent=\"center\" position=\"relative\" width=\"100%\" height=\"$3\">\n          <YStack zIndex={10}>\n            <ChevronDown size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$backgroundTransparent', '$background']}\n            borderRadius=\"$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: 'Raspberry' },\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

@@ -5,20 +5,20 @@ import { LinearGradient } from "tamagui/linear-gradient";
 function SelectDemo() {
   const [val, setVal] = useState("apple");
   return <Select id="food" value={val} onValueChange={setVal}>
-    <Select.Trigger w={180} iconAfter={ChevronDown}><Select.Value placeholder="Something" /></Select.Trigger>
+    <Select.Trigger width={180} iconAfter={ChevronDown}><Select.Value placeholder="Something" /></Select.Trigger>
     <Adapt when="sm" platform="touch"><Sheet modal dismissOnSnapToBottom>
       <Sheet.Frame><Sheet.ScrollView><Adapt.Contents /></Sheet.ScrollView></Sheet.Frame>
       <Sheet.Overlay />
     </Sheet></Adapt>
     <Select.Content zIndex={2e5}>
-      <Select.ScrollUpButton ai="center" jc="center" pos="relative" w="100%" h="$3">
-        <YStack zi={10}><ChevronUp size={20} /></YStack>
+      <Select.ScrollUpButton alignItems="center" justifyContent="center" position="relative" width="100%" height="$3">
+        <YStack zIndex={10}><ChevronUp size={20} /></YStack>
         <LinearGradient
           start={[0, 0]}
           end={[0, 1]}
           fullscreen
           colors={["$background", "$backgroundTransparent"]}
-          br="$4"
+          borderRadius="$4"
         />
       </Select.ScrollUpButton>
       <Select.Viewport minWidth={200}><Select.Group space="$0">
@@ -26,18 +26,18 @@ function SelectDemo() {
         {items.map((item, i) => {
           return <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>
             <Select.ItemText>{item.name}</Select.ItemText>
-            <Select.ItemIndicator ml="auto"><Check size={16} /></Select.ItemIndicator>
+            <Select.ItemIndicator marginLeft="auto"><Check size={16} /></Select.ItemIndicator>
           </Select.Item>;
         })}
       </Select.Group></Select.Viewport>
-      <Select.ScrollDownButton ai="center" jc="center" pos="relative" w="100%" h="$3">
-        <YStack zi={10}><ChevronDown size={20} /></YStack>
+      <Select.ScrollDownButton alignItems="center" justifyContent="center" position="relative" width="100%" height="$3">
+        <YStack zIndex={10}><ChevronDown size={20} /></YStack>
         <LinearGradient
           start={[0, 0]}
           end={[0, 1]}
           fullscreen
           colors={["$backgroundTransparent", "$background"]}
-          br="$4"
+          borderRadius="$4"
         />
       </Select.ScrollDownButton>
     </Select.Content>

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: 'Raspberry' },\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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",
+  "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 width={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 alignItems=\"center\" justifyContent=\"center\" position=\"relative\" width=\"100%\" height=\"$3\">\n          <YStack zIndex={10}>\n            <ChevronUp size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$background', '$backgroundTransparent']}\n            borderRadius=\"$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 marginLeft=\"auto\">\n                    <Check size={16} />\n                  </Select.ItemIndicator>\n                </Select.Item>\n              )\n            })}\n          </Select.Group>\n        </Select.Viewport>\n\n        <Select.ScrollDownButton alignItems=\"center\" justifyContent=\"center\" position=\"relative\" width=\"100%\" height=\"$3\">\n          <YStack zIndex={10}>\n            <ChevronDown size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$backgroundTransparent', '$background']}\n            borderRadius=\"$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: 'Raspberry' },\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/SeparatorDemo.js

@@ -1,14 +1,14 @@
 import { Paragraph, Separator, XStack, YStack } from "tamagui";
 function SeparatorDemo() {
-  return <YStack w="100%" maw={300} mx={15}>
+  return <YStack width="100%" maxWidth={300} marginHorizontal={15}>
     <Paragraph fontWeight="800">Tamagui</Paragraph>
     <Paragraph>A cross-platform component library.</Paragraph>
-    <Separator my={15} />
-    <XStack h={20} ai="center">
+    <Separator marginVertical={15} />
+    <XStack height={20} alignItems="center">
       <Paragraph>Blog</Paragraph>
-      <Separator als="stretch" vertical mx={15} />
+      <Separator alignSelf="stretch" vertical marginHorizontal={15} />
       <Paragraph>Docs</Paragraph>
-      <Separator als="stretch" vertical mx={15} />
+      <Separator alignSelf="stretch" vertical marginHorizontal={15} />
       <Paragraph>Source</Paragraph>
     </XStack>
   </YStack>;

package/dist/jsx/SeparatorDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SeparatorDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Paragraph, Separator, XStack, YStack } from 'tamagui'\n\nexport function SeparatorDemo() {\n  return (\n    <YStack w=\"100%\" maw={300} mx={15}>\n      <Paragraph fontWeight=\"800\">Tamagui</Paragraph>\n      <Paragraph>A cross-platform component library.</Paragraph>\n      <Separator my={15} />\n      <XStack h={20} ai=\"center\">\n        <Paragraph>Blog</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Docs</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Source</Paragraph>\n      </XStack>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AACA,SAAS,WAAW,WAAW,QAAQ,cAAc;AAE9C,SAAS,gBAAgB;AAC9B,SACE,CAAC,OAAO,EAAE,OAAO,KAAK,KAAK,IAAI;AAAA,IAC7B,CAAC,UAAU,WAAW,MAAM,OAAO,EAAlC;AAAA,IACD,CAAC,UAAU,mCAAmC,EAA7C;AAAA,IACD,CAAC,UAAU,IAAI,IAAI;AAAA,IACnB,CAAC,OAAO,GAAG,IAAI,GAAG;AAAA,MAChB,CAAC,UAAU,IAAI,EAAd;AAAA,MACD,CAAC,UAAU,IAAI,UAAU,SAAS,IAAI,IAAI;AAAA,MAC1C,CAAC,UAAU,IAAI,EAAd;AAAA,MACD,CAAC,UAAU,IAAI,UAAU,SAAS,IAAI,IAAI;AAAA,MAC1C,CAAC,UAAU,MAAM,EAAhB;AAAA,IACH,EANC;AAAA,EAOH,EAXC;AAaL;",
+  "sourcesContent": ["import React from 'react'\nimport { Paragraph, Separator, XStack, YStack } from 'tamagui'\n\nexport function SeparatorDemo() {\n  return (\n    <YStack width=\"100%\" maxWidth={300} marginHorizontal={15}>\n      <Paragraph fontWeight=\"800\">Tamagui</Paragraph>\n      <Paragraph>A cross-platform component library.</Paragraph>\n      <Separator marginVertical={15} />\n      <XStack height={20} alignItems=\"center\">\n        <Paragraph>Blog</Paragraph>\n        <Separator alignSelf=\"stretch\" vertical marginHorizontal={15} />\n        <Paragraph>Docs</Paragraph>\n        <Separator alignSelf=\"stretch\" vertical marginHorizontal={15} />\n        <Paragraph>Source</Paragraph>\n      </XStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AACA,SAAS,WAAW,WAAW,QAAQ,cAAc;AAE9C,SAAS,gBAAgB;AAC9B,SACE,CAAC,OAAO,MAAM,OAAO,UAAU,KAAK,kBAAkB;AAAA,IACpD,CAAC,UAAU,WAAW,MAAM,OAAO,EAAlC;AAAA,IACD,CAAC,UAAU,mCAAmC,EAA7C;AAAA,IACD,CAAC,UAAU,gBAAgB,IAAI;AAAA,IAC/B,CAAC,OAAO,QAAQ,IAAI,WAAW;AAAA,MAC7B,CAAC,UAAU,IAAI,EAAd;AAAA,MACD,CAAC,UAAU,UAAU,UAAU,SAAS,kBAAkB,IAAI;AAAA,MAC9D,CAAC,UAAU,IAAI,EAAd;AAAA,MACD,CAAC,UAAU,UAAU,UAAU,SAAS,kBAAkB,IAAI;AAAA,MAC9D,CAAC,UAAU,MAAM,EAAhB;AAAA,IACH,EANC;AAAA,EAOH,EAXC;AAaL;",
   "names": []
 }

package/dist/jsx/SeparatorDemo.mjs

@@ -1,14 +1,14 @@
 import { Paragraph, Separator, XStack, YStack } from "tamagui";
 function SeparatorDemo() {
-  return <YStack w="100%" maw={300} mx={15}>
+  return <YStack width="100%" maxWidth={300} marginHorizontal={15}>
     <Paragraph fontWeight="800">Tamagui</Paragraph>
     <Paragraph>A cross-platform component library.</Paragraph>
-    <Separator my={15} />
-    <XStack h={20} ai="center">
+    <Separator marginVertical={15} />
+    <XStack height={20} alignItems="center">
       <Paragraph>Blog</Paragraph>
-      <Separator als="stretch" vertical mx={15} />
+      <Separator alignSelf="stretch" vertical marginHorizontal={15} />
       <Paragraph>Docs</Paragraph>
-      <Separator als="stretch" vertical mx={15} />
+      <Separator alignSelf="stretch" vertical marginHorizontal={15} />
       <Paragraph>Source</Paragraph>
     </XStack>
   </YStack>;

package/dist/jsx/SeparatorDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SeparatorDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Paragraph, Separator, XStack, YStack } from 'tamagui'\n\nexport function SeparatorDemo() {\n  return (\n    <YStack w=\"100%\" maw={300} mx={15}>\n      <Paragraph fontWeight=\"800\">Tamagui</Paragraph>\n      <Paragraph>A cross-platform component library.</Paragraph>\n      <Separator my={15} />\n      <XStack h={20} ai=\"center\">\n        <Paragraph>Blog</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Docs</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Source</Paragraph>\n      </XStack>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AACA,SAAS,WAAW,WAAW,QAAQ,cAAc;AAE9C,SAAS,gBAAgB;AAC9B,SACE,CAAC,OAAO,EAAE,OAAO,KAAK,KAAK,IAAI;AAAA,IAC7B,CAAC,UAAU,WAAW,MAAM,OAAO,EAAlC;AAAA,IACD,CAAC,UAAU,mCAAmC,EAA7C;AAAA,IACD,CAAC,UAAU,IAAI,IAAI;AAAA,IACnB,CAAC,OAAO,GAAG,IAAI,GAAG;AAAA,MAChB,CAAC,UAAU,IAAI,EAAd;AAAA,MACD,CAAC,UAAU,IAAI,UAAU,SAAS,IAAI,IAAI;AAAA,MAC1C,CAAC,UAAU,IAAI,EAAd;AAAA,MACD,CAAC,UAAU,IAAI,UAAU,SAAS,IAAI,IAAI;AAAA,MAC1C,CAAC,UAAU,MAAM,EAAhB;AAAA,IACH,EANC;AAAA,EAOH,EAXC;AAaL;",
+  "sourcesContent": ["import React from 'react'\nimport { Paragraph, Separator, XStack, YStack } from 'tamagui'\n\nexport function SeparatorDemo() {\n  return (\n    <YStack width=\"100%\" maxWidth={300} marginHorizontal={15}>\n      <Paragraph fontWeight=\"800\">Tamagui</Paragraph>\n      <Paragraph>A cross-platform component library.</Paragraph>\n      <Separator marginVertical={15} />\n      <XStack height={20} alignItems=\"center\">\n        <Paragraph>Blog</Paragraph>\n        <Separator alignSelf=\"stretch\" vertical marginHorizontal={15} />\n        <Paragraph>Docs</Paragraph>\n        <Separator alignSelf=\"stretch\" vertical marginHorizontal={15} />\n        <Paragraph>Source</Paragraph>\n      </XStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AACA,SAAS,WAAW,WAAW,QAAQ,cAAc;AAE9C,SAAS,gBAAgB;AAC9B,SACE,CAAC,OAAO,MAAM,OAAO,UAAU,KAAK,kBAAkB;AAAA,IACpD,CAAC,UAAU,WAAW,MAAM,OAAO,EAAlC;AAAA,IACD,CAAC,UAAU,mCAAmC,EAA7C;AAAA,IACD,CAAC,UAAU,gBAAgB,IAAI;AAAA,IAC/B,CAAC,OAAO,QAAQ,IAAI,WAAW;AAAA,MAC7B,CAAC,UAAU,IAAI,EAAd;AAAA,MACD,CAAC,UAAU,UAAU,UAAU,SAAS,kBAAkB,IAAI;AAAA,MAC9D,CAAC,UAAU,IAAI,EAAd;AAAA,MACD,CAAC,UAAU,UAAU,UAAU,SAAS,kBAAkB,IAAI;AAAA,MAC9D,CAAC,UAAU,MAAM,EAAhB;AAAA,IACH,EANC;AAAA,EAOH,EAXC;AAaL;",
   "names": []
 }

package/dist/jsx/ShapesDemo.js

@@ -1,8 +1,8 @@
 import { Circle, Square, XStack } from "tamagui";
 function ShapesDemo() {
-  return <XStack p="$2" space="$4">
-    <Square size={100} bc="$color" elevation="$4" />
-    <Circle size={100} bc="$color" elevation="$4" />
+  return <XStack padding="$2" space="$4">
+    <Square size={100} backgroundColor="$color" elevation="$4" />
+    <Circle size={100} backgroundColor="$color" elevation="$4" />
   </XStack>;
 }
 export {

package/dist/jsx/ShapesDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ShapesDemo.tsx"],
-  "sourcesContent": ["import { Circle, Square, XStack } from 'tamagui'\n\nexport function ShapesDemo() {\n  return (\n    <XStack p=\"$2\" space=\"$4\">\n      <Square size={100} bc=\"$color\" elevation=\"$4\" />\n      <Circle size={100} bc=\"$color\" elevation=\"$4\" />\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,EAAE,KAAK,MAAM;AAAA,IACnB,CAAC,OAAO,MAAM,KAAK,GAAG,SAAS,UAAU,KAAK;AAAA,IAC9C,CAAC,OAAO,MAAM,KAAK,GAAG,SAAS,UAAU,KAAK;AAAA,EAChD,EAHC;AAKL;",
+  "sourcesContent": ["import { Circle, Square, XStack } from 'tamagui'\n\nexport function ShapesDemo() {\n  return (\n    <XStack padding=\"$2\" space=\"$4\">\n      <Square size={100} backgroundColor=\"$color\" elevation=\"$4\" />\n      <Circle size={100} backgroundColor=\"$color\" elevation=\"$4\" />\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,QAAQ,KAAK,MAAM;AAAA,IACzB,CAAC,OAAO,MAAM,KAAK,gBAAgB,SAAS,UAAU,KAAK;AAAA,IAC3D,CAAC,OAAO,MAAM,KAAK,gBAAgB,SAAS,UAAU,KAAK;AAAA,EAC7D,EAHC;AAKL;",
   "names": []
 }

package/dist/jsx/ShapesDemo.mjs

@@ -1,8 +1,8 @@
 import { Circle, Square, XStack } from "tamagui";
 function ShapesDemo() {
-  return <XStack p="$2" space="$4">
-    <Square size={100} bc="$color" elevation="$4" />
-    <Circle size={100} bc="$color" elevation="$4" />
+  return <XStack padding="$2" space="$4">
+    <Square size={100} backgroundColor="$color" elevation="$4" />
+    <Circle size={100} backgroundColor="$color" elevation="$4" />
   </XStack>;
 }
 export {

package/dist/jsx/ShapesDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ShapesDemo.tsx"],
-  "sourcesContent": ["import { Circle, Square, XStack } from 'tamagui'\n\nexport function ShapesDemo() {\n  return (\n    <XStack p=\"$2\" space=\"$4\">\n      <Square size={100} bc=\"$color\" elevation=\"$4\" />\n      <Circle size={100} bc=\"$color\" elevation=\"$4\" />\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,EAAE,KAAK,MAAM;AAAA,IACnB,CAAC,OAAO,MAAM,KAAK,GAAG,SAAS,UAAU,KAAK;AAAA,IAC9C,CAAC,OAAO,MAAM,KAAK,GAAG,SAAS,UAAU,KAAK;AAAA,EAChD,EAHC;AAKL;",
+  "sourcesContent": ["import { Circle, Square, XStack } from 'tamagui'\n\nexport function ShapesDemo() {\n  return (\n    <XStack padding=\"$2\" space=\"$4\">\n      <Square size={100} backgroundColor=\"$color\" elevation=\"$4\" />\n      <Circle size={100} backgroundColor=\"$color\" elevation=\"$4\" />\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,QAAQ,KAAK,MAAM;AAAA,IACzB,CAAC,OAAO,MAAM,KAAK,gBAAgB,SAAS,UAAU,KAAK;AAAA,IAC3D,CAAC,OAAO,MAAM,KAAK,gBAAgB,SAAS,UAAU,KAAK;AAAA,EAC7D,EAHC;AAKL;",
   "names": []
 }

package/dist/jsx/SheetDemo.js

@@ -26,9 +26,9 @@ const SheetDemo = () => {
     >
       <Sheet.Overlay />
       <Sheet.Handle />
-      <Sheet.Frame f={1} p="$4" jc="center" ai="center" space="$5">
+      <Sheet.Frame flex={1} padding="$4" justifyContent="center" alignItems="center" space="$5">
         <Button size="$6" circular icon={ChevronDown} onPress={() => setOpen(false)} />
-        <Input w={200} />
+        <Input width={200} />
         {modal && <>
           <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />
           <Button
@@ -46,11 +46,11 @@ function InnerSheet(props) {
   return <Sheet modal snapPoints={[90]} dismissOnSnapToBottom {...props}>
     <Sheet.Overlay />
     <Sheet.Handle />
-    <Sheet.Frame f={1} jc="center" ai="center" space="$5"><Sheet.ScrollView p="$4" space>
+    <Sheet.Frame flex={1} justifyContent="center" alignItems="center" space="$5"><Sheet.ScrollView padding="$4" space>
       <Button
         size="$8"
         circular
-        als="center"
+        alignSelf="center"
         icon={ChevronDown}
         onPress={() => props.onOpenChange?.(false)}
       />

package/dist/jsx/SheetDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SheetDemo.tsx"],
-  "sourcesContent": ["import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { Sheet } from '@tamagui/sheet'\nimport { SheetProps } from '@tamagui/sheet/types/types'\nimport { useState } from 'react'\nimport { Button, H1, H2, Input, Paragraph, XStack } from 'tamagui'\n\nexport const SheetDemo = () => {\n  const [position, setPosition] = useState(0)\n  const [open, setOpen] = useState(false)\n  const [modal, setModal] = useState(false)\n  const [innerOpen, setInnerOpen] = useState(false)\n\n  return (\n    <>\n      <XStack space>\n        <Button onPress={() => setOpen(true)}>Open</Button>\n        <Button onPress={() => setModal((x) => !x)}>\n          {modal ? 'Type: Modal' : 'Type: Inline'}\n        </Button>\n      </XStack>\n\n      <Sheet\n        forceRemoveScrollEnabled={open}\n        modal={modal}\n        open={open}\n        onOpenChange={setOpen}\n        snapPoints={[85, 50, 25]}\n        dismissOnSnapToBottom\n        position={position}\n        onPositionChange={setPosition}\n        zIndex={100_000}\n        animation=\"bouncy\" // for the css driver\n      >\n        <Sheet.Overlay />\n        <Sheet.Handle />\n        <Sheet.Frame f={1} p=\"$4\" jc=\"center\" ai=\"center\" space=\"$5\">\n          <Button size=\"$6\" circular icon={ChevronDown} onPress={() => setOpen(false)} />\n          <Input w={200} />\n          {modal && (\n            <>\n              <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />\n              <Button\n                size=\"$6\"\n                circular\n                icon={ChevronUp}\n                onPress={() => setInnerOpen(true)}\n              ></Button>\n            </>\n          )}\n        </Sheet.Frame>\n      </Sheet>\n    </>\n  )\n}\n\nfunction InnerSheet(props: SheetProps) {\n  return (\n    <Sheet modal snapPoints={[90]} dismissOnSnapToBottom {...props}>\n      <Sheet.Overlay />\n      <Sheet.Handle />\n      <Sheet.Frame f={1} jc=\"center\" ai=\"center\" space=\"$5\">\n        <Sheet.ScrollView p=\"$4\" space>\n          <Button\n            size=\"$8\"\n            circular\n            als=\"center\"\n            icon={ChevronDown}\n            onPress={() => props.onOpenChange?.(false)}\n          />\n          <H1>Hello world</H1>\n          <H2>You can scroll me</H2>\n          {[1, 2, 3].map((i) => (\n            <Paragraph key={i} size=\"$10\">\n              Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad\n              pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation\n              ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat\n              ullamco veniam aliquip reprehenderit officia. Officia labore culpa ullamco\n              velit. In sit occaecat velit ipsum fugiat esse aliqua dolor sint.\n            </Paragraph>\n          ))}\n        </Sheet.ScrollView>\n      </Sheet.Frame>\n    </Sheet>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa,iBAAiB;AACvC,SAAS,aAAa;AAEtB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,OAAO,WAAW,cAAc;AAElD,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE;AAAA,IACE,CAAC,OAAO;AAAA,MACN,CAAC,OAAO,SAAS,MAAM,QAAQ,IAAI,GAAG,IAAI,EAAzC;AAAA,MACD,CAAC,OAAO,SAAS,MAAM,SAAS,CAAC,MAAM,CAAC,CAAC,IACtC,QAAQ,gBAAgB,eAC3B,EAFC;AAAA,IAGH,EALC;AAAA,IAOD,CAAC;AAAA,MACC,0BAA0B;AAAA,MAC1B,OAAO;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,YAAY,CAAC,IAAI,IAAI,EAAE;AAAA,MACvB;AAAA,MACA,UAAU;AAAA,MACV,kBAAkB;AAAA,MAClB,QAAQ;AAAA,MACR,UAAU;AAAA;AAAA,MAEV,CAAC,MAAM,QAAQ;AAAA,MACf,CAAC,MAAM,OAAO;AAAA,MACd,CAAC,MAAM,MAAM,GAAG,GAAG,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,MAAM;AAAA,QACtD,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,aAAa,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,QAC7E,CAAC,MAAM,GAAG,KAAK;AAAA,SACd,SACC;AAAA,UACE,CAAC,WAAW,MAAM,WAAW,cAAc,cAAc;AAAA,UACzD,CAAC;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,MAAM;AAAA,YACN,SAAS,MAAM,aAAa,IAAI;AAAA,UACjC;AAAA,QACH;AAAA,MAEJ,EAdC,MAAM;AAAA,IAeT,EA7BC;AAAA,EA8BH;AAEJ;AAEA,SAAS,WAAW,OAAmB;AACrC,SACE,CAAC,MAAM,MAAM,YAAY,CAAC,EAAE,GAAG,0BAA0B;AAAA,IACvD,CAAC,MAAM,QAAQ;AAAA,IACf,CAAC,MAAM,OAAO;AAAA,IACd,CAAC,MAAM,MAAM,GAAG,GAAG,GAAG,SAAS,GAAG,SAAS,MAAM,KAC/C,CAAC,MAAM,WAAW,EAAE,KAAK;AAAA,MACvB,CAAC;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,SAAS,MAAM,MAAM,eAAe,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,GAAG,WAAW,EAAd;AAAA,MACD,CAAC,GAAG,iBAAiB,EAApB;AAAA,OACA,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACd,CAAC,UAAU,KAAK,GAAG,KAAK,MAAM,0WAM9B,EANC,UAOF;AAAA,IACH,EAnBC,MAAM,WAoBT,EArBC,MAAM;AAAA,EAsBT,EAzBC;AA2BL;",
+  "sourcesContent": ["import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { Sheet } from '@tamagui/sheet'\nimport { SheetProps } from '@tamagui/sheet/types/types'\nimport { useState } from 'react'\nimport { Button, H1, H2, Input, Paragraph, XStack } from 'tamagui'\n\nexport const SheetDemo = () => {\n  const [position, setPosition] = useState(0)\n  const [open, setOpen] = useState(false)\n  const [modal, setModal] = useState(false)\n  const [innerOpen, setInnerOpen] = useState(false)\n\n  return (\n    <>\n      <XStack space>\n        <Button onPress={() => setOpen(true)}>Open</Button>\n        <Button onPress={() => setModal((x) => !x)}>\n          {modal ? 'Type: Modal' : 'Type: Inline'}\n        </Button>\n      </XStack>\n\n      <Sheet\n        forceRemoveScrollEnabled={open}\n        modal={modal}\n        open={open}\n        onOpenChange={setOpen}\n        snapPoints={[85, 50, 25]}\n        dismissOnSnapToBottom\n        position={position}\n        onPositionChange={setPosition}\n        zIndex={100_000}\n        animation=\"bouncy\" // for the css driver\n      >\n        <Sheet.Overlay />\n        <Sheet.Handle />\n        <Sheet.Frame flex={1} padding=\"$4\" justifyContent=\"center\" alignItems=\"center\" space=\"$5\">\n          <Button size=\"$6\" circular icon={ChevronDown} onPress={() => setOpen(false)} />\n          <Input width={200} />\n          {modal && (\n            <>\n              <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />\n              <Button\n                size=\"$6\"\n                circular\n                icon={ChevronUp}\n                onPress={() => setInnerOpen(true)}\n              ></Button>\n            </>\n          )}\n        </Sheet.Frame>\n      </Sheet>\n    </>\n  )\n}\n\nfunction InnerSheet(props: SheetProps) {\n  return (\n    <Sheet modal snapPoints={[90]} dismissOnSnapToBottom {...props}>\n      <Sheet.Overlay />\n      <Sheet.Handle />\n      <Sheet.Frame flex={1} justifyContent=\"center\" alignItems=\"center\" space=\"$5\">\n        <Sheet.ScrollView padding=\"$4\" space>\n          <Button\n            size=\"$8\"\n            circular\n            alignSelf=\"center\"\n            icon={ChevronDown}\n            onPress={() => props.onOpenChange?.(false)}\n          />\n          <H1>Hello world</H1>\n          <H2>You can scroll me</H2>\n          {[1, 2, 3].map((i) => (\n            <Paragraph key={i} size=\"$10\">\n              Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad\n              pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation\n              ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat\n              ullamco veniam aliquip reprehenderit officia. Officia labore culpa ullamco\n              velit. In sit occaecat velit ipsum fugiat esse aliqua dolor sint.\n            </Paragraph>\n          ))}\n        </Sheet.ScrollView>\n      </Sheet.Frame>\n    </Sheet>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa,iBAAiB;AACvC,SAAS,aAAa;AAEtB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,OAAO,WAAW,cAAc;AAElD,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE;AAAA,IACE,CAAC,OAAO;AAAA,MACN,CAAC,OAAO,SAAS,MAAM,QAAQ,IAAI,GAAG,IAAI,EAAzC;AAAA,MACD,CAAC,OAAO,SAAS,MAAM,SAAS,CAAC,MAAM,CAAC,CAAC,IACtC,QAAQ,gBAAgB,eAC3B,EAFC;AAAA,IAGH,EALC;AAAA,IAOD,CAAC;AAAA,MACC,0BAA0B;AAAA,MAC1B,OAAO;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,YAAY,CAAC,IAAI,IAAI,EAAE;AAAA,MACvB;AAAA,MACA,UAAU;AAAA,MACV,kBAAkB;AAAA,MAClB,QAAQ;AAAA,MACR,UAAU;AAAA;AAAA,MAEV,CAAC,MAAM,QAAQ;AAAA,MACf,CAAC,MAAM,OAAO;AAAA,MACd,CAAC,MAAM,MAAM,MAAM,GAAG,QAAQ,KAAK,eAAe,SAAS,WAAW,SAAS,MAAM;AAAA,QACnF,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,aAAa,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,QAC7E,CAAC,MAAM,OAAO,KAAK;AAAA,SAClB,SACC;AAAA,UACE,CAAC,WAAW,MAAM,WAAW,cAAc,cAAc;AAAA,UACzD,CAAC;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,MAAM;AAAA,YACN,SAAS,MAAM,aAAa,IAAI;AAAA,UACjC;AAAA,QACH;AAAA,MAEJ,EAdC,MAAM;AAAA,IAeT,EA7BC;AAAA,EA8BH;AAEJ;AAEA,SAAS,WAAW,OAAmB;AACrC,SACE,CAAC,MAAM,MAAM,YAAY,CAAC,EAAE,GAAG,0BAA0B;AAAA,IACvD,CAAC,MAAM,QAAQ;AAAA,IACf,CAAC,MAAM,OAAO;AAAA,IACd,CAAC,MAAM,MAAM,MAAM,GAAG,eAAe,SAAS,WAAW,SAAS,MAAM,KACtE,CAAC,MAAM,WAAW,QAAQ,KAAK;AAAA,MAC7B,CAAC;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS,MAAM,MAAM,eAAe,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,GAAG,WAAW,EAAd;AAAA,MACD,CAAC,GAAG,iBAAiB,EAApB;AAAA,OACA,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACd,CAAC,UAAU,KAAK,GAAG,KAAK,MAAM,0WAM9B,EANC,UAOF;AAAA,IACH,EAnBC,MAAM,WAoBT,EArBC,MAAM;AAAA,EAsBT,EAzBC;AA2BL;",
   "names": []
 }

package/dist/jsx/SheetDemo.mjs

@@ -26,9 +26,9 @@ const SheetDemo = () => {
     >
       <Sheet.Overlay />
       <Sheet.Handle />
-      <Sheet.Frame f={1} p="$4" jc="center" ai="center" space="$5">
+      <Sheet.Frame flex={1} padding="$4" justifyContent="center" alignItems="center" space="$5">
         <Button size="$6" circular icon={ChevronDown} onPress={() => setOpen(false)} />
-        <Input w={200} />
+        <Input width={200} />
         {modal && <>
           <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />
           <Button
@@ -46,11 +46,11 @@ function InnerSheet(props) {
   return <Sheet modal snapPoints={[90]} dismissOnSnapToBottom {...props}>
     <Sheet.Overlay />
     <Sheet.Handle />
-    <Sheet.Frame f={1} jc="center" ai="center" space="$5"><Sheet.ScrollView p="$4" space>
+    <Sheet.Frame flex={1} justifyContent="center" alignItems="center" space="$5"><Sheet.ScrollView padding="$4" space>
       <Button
         size="$8"
         circular
-        als="center"
+        alignSelf="center"
         icon={ChevronDown}
         onPress={() => props.onOpenChange?.(false)}
       />