@tamagui/demos 1.11.2 → 1.12.0

package/dist/esm/ToastDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToastDemo.tsx"],
-  "sourcesContent": ["import { Check } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport {\n  Button,\n  Checkbox,\n  Label,\n  Toast,\n  ToastImperativeProvider,\n  ToastNativePlatform,\n  XStack,\n  YStack,\n  useToast,\n} from 'tamagui'\n\nexport const ToastDemo = () => {\n  const [native, setNative] = React.useState<ToastNativePlatform[]>([])\n\n  return (\n    <YStack space=\"$5\">\n      <ToastImperativeProvider options={{ native }}>\n        <ToastControl />\n        <CurrentToast />\n      </ToastImperativeProvider>\n\n      <NativeOptions native={native} setNative={setNative} />\n    </YStack>\n  )\n}\n\nconst CurrentToast = () => {\n  const { currentToast } = useToast()\n\n  if (!currentToast || currentToast.isHandledNatively) return null\n  return (\n    <Toast\n      key={currentToast.id}\n      duration={currentToast.duration}\n      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n      exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n      y={0}\n      opacity={1}\n      scale={1}\n      animation=\"100ms\"\n    >\n      <YStack>\n        <Toast.Title>{currentToast.title}</Toast.Title>\n        {!!currentToast.message && (\n          <Toast.Description>{currentToast.message}</Toast.Description>\n        )}\n      </YStack>\n    </Toast>\n  )\n}\n\nconst ToastControl = () => {\n  const toast = useToast()\n  return (\n    <XStack space=\"$2\" jc=\"center\">\n      <Button\n        onPress={() => {\n          toast.show('Successfully saved!', {\n            message: \"Don't worry, we've got your data.\",\n          })\n        }}\n      >\n        Show\n      </Button>\n      <Button\n        onPress={() => {\n          toast.hide()\n        }}\n      >\n        Hide\n      </Button>\n    </XStack>\n  )\n}\n\nconst NativeOptions = ({\n  native,\n  setNative,\n}: {\n  native: ToastNativePlatform[]\n  setNative: (native: ToastNativePlatform[]) => void\n}) => {\n  const supportedNativePlatforms: ToastNativePlatform[] = ['web', 'mobile']\n\n  return (\n    <XStack space>\n      {supportedNativePlatforms.map((platform) => (\n        <XStack ai=\"center\" space=\"$2\" key={platform}>\n          <Checkbox\n            id={platform}\n            checked={native?.includes(platform)}\n            onCheckedChange={(checked) => {\n              if (checked) setNative([...native, platform])\n              else setNative(native.filter((val) => val !== platform))\n            }}\n            size=\"$3\"\n          >\n            <Checkbox.Indicator>\n              <Check />\n            </Checkbox.Indicator>\n          </Checkbox>\n          <Label size=\"$3\" htmlFor={platform}>\n            Native {platform} toast\n          </Label>\n        </XStack>\n      ))}\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAmBM,SACE,KADF;AAnBN,SAAS,aAAa;AACtB,OAAO,WAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAgC,CAAC,CAAC;AAEpE,SACE,qBAAC,UAAO,OAAM,MACZ;AAAA,yBAAC,2BAAwB,SAAS,EAAE,OAAO,GACzC;AAAA,0BAAC,gBAAa;AAAA,MACd,oBAAC,gBAAa;AAAA,OAChB;AAAA,IAEA,oBAAC,iBAAc,QAAgB,WAAsB;AAAA,KACvD;AAEJ;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,EAAE,aAAa,IAAI,SAAS;AAElC,MAAI,CAAC,gBAAgB,aAAa;AAAmB,WAAO;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,UAAU,aAAa;AAAA,MACvB,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,MAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,MAC1C,GAAG;AAAA,MACH,SAAS;AAAA,MACT,OAAO;AAAA,MACP,WAAU;AAAA,MAEV,+BAAC,UACC;AAAA,4BAAC,MAAM,OAAN,EAAa,uBAAa,OAAM;AAAA,QAChC,CAAC,CAAC,aAAa,WACd,oBAAC,MAAM,aAAN,EAAmB,uBAAa,SAAQ;AAAA,SAE7C;AAAA;AAAA,IAdK,aAAa;AAAA,EAepB;AAEJ;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,QAAQ,SAAS;AACvB,SACE,qBAAC,UAAO,OAAM,MAAK,IAAG,UACpB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK,uBAAuB;AAAA,YAChC,SAAS;AAAA,UACX,CAAC;AAAA,QACH;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK;AAAA,QACb;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAGM;AACJ,QAAM,2BAAkD,CAAC,OAAO,QAAQ;AAExE,SACE,oBAAC,UAAO,OAAK,MACV,mCAAyB,IAAI,CAAC,aAC7B,qBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,SAAS,iCAAQ,SAAS;AAAA,QAC1B,iBAAiB,CAAC,YAAY;AAC5B,cAAI;AAAS,sBAAU,CAAC,GAAG,QAAQ,QAAQ,CAAC;AAAA;AACvC,sBAAU,OAAO,OAAO,CAAC,QAAQ,QAAQ,QAAQ,CAAC;AAAA,QACzD;AAAA,QACA,MAAK;AAAA,QAEL,8BAAC,SAAS,WAAT,EACC,8BAAC,SAAM,GACT;AAAA;AAAA,IACF;AAAA,IACA,qBAAC,SAAM,MAAK,MAAK,SAAS,UAAU;AAAA;AAAA,MAC1B;AAAA,MAAS;AAAA,OACnB;AAAA,OAhBkC,QAiBpC,CACD,GACH;AAEJ;",
+  "sourcesContent": ["import React from 'react'\nimport { Button, SizableText, Switch, Toast, XStack, YStack, useToast } from 'tamagui'\n\nexport const ToastDemo = () => {\n  const [native, setNative] = React.useState<boolean>(false)\n\n  return (\n    <YStack space alignItems=\"center\">\n      <ToastControl native={native} />\n      <CurrentToast />\n\n      <NativeOptions native={native} setNative={setNative} />\n    </YStack>\n  )\n}\n\nconst CurrentToast = () => {\n  const { currentToast } = useToast()\n\n  if (!currentToast || currentToast.isHandledNatively) return null\n  return (\n    <Toast\n      key={currentToast.id}\n      duration={currentToast.duration}\n      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n      exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n      y={0}\n      opacity={1}\n      scale={1}\n      animation=\"100ms\"\n    >\n      <YStack>\n        <Toast.Title>{currentToast.title}</Toast.Title>\n        {!!currentToast.message && (\n          <Toast.Description>{currentToast.message}</Toast.Description>\n        )}\n      </YStack>\n    </Toast>\n  )\n}\n\nconst ToastControl = ({ native }: { native: boolean }) => {\n  const toast = useToast()\n  return (\n    <XStack space=\"$2\" justifyContent=\"center\">\n      <Button\n        onPress={() => {\n          toast.show('Successfully saved!', {\n            message: \"Don't worry, we've got your data.\",\n            native,\n          })\n        }}\n      >\n        Show\n      </Button>\n      <Button\n        onPress={() => {\n          toast.hide()\n        }}\n      >\n        Hide\n      </Button>\n    </XStack>\n  )\n}\n\nconst NativeOptions = ({\n  native,\n  setNative,\n}: {\n  native: boolean\n  setNative: (native: boolean) => void\n}) => {\n  return (\n    <XStack space=\"$3\">\n      <SizableText size=\"$1\">Custom</SizableText>\n\n      <Switch\n        theme=\"active\"\n        size=\"$1\"\n        checked={!!native}\n        onCheckedChange={(val) => setNative(val)}\n      >\n        <Switch.Thumb\n          animation={[\n            'quick',\n            {\n              transform: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n        />\n      </Switch>\n\n      <SizableText size=\"$1\">Native</SizableText>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAOI,SACE,KADF;AAPJ,OAAO,WAAW;AAClB,SAAS,QAAQ,aAAa,QAAQ,OAAO,QAAQ,QAAQ,gBAAgB;AAEtE,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAkB,KAAK;AAEzD,SACE,qBAAC,UAAO,OAAK,MAAC,YAAW,UACvB;AAAA,wBAAC,gBAAa,QAAgB;AAAA,IAC9B,oBAAC,gBAAa;AAAA,IAEd,oBAAC,iBAAc,QAAgB,WAAsB;AAAA,KACvD;AAEJ;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,EAAE,aAAa,IAAI,SAAS;AAElC,MAAI,CAAC,gBAAgB,aAAa;AAAmB,WAAO;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,UAAU,aAAa;AAAA,MACvB,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,MAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,MAC1C,GAAG;AAAA,MACH,SAAS;AAAA,MACT,OAAO;AAAA,MACP,WAAU;AAAA,MAEV,+BAAC,UACC;AAAA,4BAAC,MAAM,OAAN,EAAa,uBAAa,OAAM;AAAA,QAChC,CAAC,CAAC,aAAa,WACd,oBAAC,MAAM,aAAN,EAAmB,uBAAa,SAAQ;AAAA,SAE7C;AAAA;AAAA,IAdK,aAAa;AAAA,EAepB;AAEJ;AAEA,MAAM,eAAe,CAAC,EAAE,OAAO,MAA2B;AACxD,QAAM,QAAQ,SAAS;AACvB,SACE,qBAAC,UAAO,OAAM,MAAK,gBAAe,UAChC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK,uBAAuB;AAAA,YAChC,SAAS;AAAA,YACT;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK;AAAA,QACb;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAGM;AACJ,SACE,qBAAC,UAAO,OAAM,MACZ;AAAA,wBAAC,eAAY,MAAK,MAAK,oBAAM;AAAA,IAE7B;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAK;AAAA,QACL,SAAS,CAAC,CAAC;AAAA,QACX,iBAAiB,CAAC,QAAQ,UAAU,GAAG;AAAA,QAEvC;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,gBACE,WAAW;AAAA,kBACT,mBAAmB;AAAA,gBACrB;AAAA,cACF;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,eAAY,MAAK,MAAK,oBAAM;AAAA,KAC/B;AAEJ;",
   "names": []
 }

package/dist/esm/ToastDemo.mjs

@@ -1,23 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check } from "@tamagui/lucide-icons";
 import React from "react";
-import {
-  Button,
-  Checkbox,
-  Label,
-  Toast,
-  ToastImperativeProvider,
-  XStack,
-  YStack,
-  useToast
-} from "tamagui";
+import { Button, SizableText, Switch, Toast, XStack, YStack, useToast } from "tamagui";
 const ToastDemo = () => {
-  const [native, setNative] = React.useState([]);
-  return /* @__PURE__ */ jsxs(YStack, { space: "$5", children: [
-    /* @__PURE__ */ jsxs(ToastImperativeProvider, { options: { native }, children: [
-      /* @__PURE__ */ jsx(ToastControl, {}),
-      /* @__PURE__ */ jsx(CurrentToast, {})
-    ] }),
+  const [native, setNative] = React.useState(false);
+  return /* @__PURE__ */ jsxs(YStack, { space: true, alignItems: "center", children: [
+    /* @__PURE__ */ jsx(ToastControl, { native }),
+    /* @__PURE__ */ jsx(CurrentToast, {}),
     /* @__PURE__ */ jsx(NativeOptions, { native, setNative })
   ] });
 };
@@ -43,15 +31,16 @@ const CurrentToast = () => {
     currentToast.id
   );
 };
-const ToastControl = () => {
+const ToastControl = ({ native }) => {
   const toast = useToast();
-  return /* @__PURE__ */ jsxs(XStack, { space: "$2", jc: "center", children: [
+  return /* @__PURE__ */ jsxs(XStack, { space: "$2", justifyContent: "center", children: [
     /* @__PURE__ */ jsx(
       Button,
       {
         onPress: () => {
           toast.show("Successfully saved!", {
-            message: "Don't worry, we've got your data."
+            message: "Don't worry, we've got your data.",
+            native
           });
         },
         children: "Show"
@@ -72,29 +61,32 @@ const NativeOptions = ({
   native,
   setNative
 }) => {
-  const supportedNativePlatforms = ["web", "mobile"];
-  return /* @__PURE__ */ jsx(XStack, { space: true, children: supportedNativePlatforms.map((platform) => /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$2", children: [
+  return /* @__PURE__ */ jsxs(XStack, { space: "$3", children: [
+    /* @__PURE__ */ jsx(SizableText, { size: "$1", children: "Custom" }),
     /* @__PURE__ */ jsx(
-      Checkbox,
+      Switch,
       {
-        id: platform,
-        checked: native == null ? void 0 : native.includes(platform),
-        onCheckedChange: (checked) => {
-          if (checked)
-            setNative([...native, platform]);
-          else
-            setNative(native.filter((val) => val !== platform));
-        },
-        size: "$3",
-        children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: /* @__PURE__ */ jsx(Check, {}) })
+        theme: "active",
+        size: "$1",
+        checked: !!native,
+        onCheckedChange: (val) => setNative(val),
+        children: /* @__PURE__ */ jsx(
+          Switch.Thumb,
+          {
+            animation: [
+              "quick",
+              {
+                transform: {
+                  overshootClamping: true
+                }
+              }
+            ]
+          }
+        )
       }
     ),
-    /* @__PURE__ */ jsxs(Label, { size: "$3", htmlFor: platform, children: [
-      "Native ",
-      platform,
-      " toast"
-    ] })
-  ] }, platform)) });
+    /* @__PURE__ */ jsx(SizableText, { size: "$1", children: "Native" })
+  ] });
 };
 export {
   ToastDemo

package/dist/esm/ToastDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToastDemo.tsx"],
-  "sourcesContent": ["import { Check } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport {\n  Button,\n  Checkbox,\n  Label,\n  Toast,\n  ToastImperativeProvider,\n  ToastNativePlatform,\n  XStack,\n  YStack,\n  useToast,\n} from 'tamagui'\n\nexport const ToastDemo = () => {\n  const [native, setNative] = React.useState<ToastNativePlatform[]>([])\n\n  return (\n    <YStack space=\"$5\">\n      <ToastImperativeProvider options={{ native }}>\n        <ToastControl />\n        <CurrentToast />\n      </ToastImperativeProvider>\n\n      <NativeOptions native={native} setNative={setNative} />\n    </YStack>\n  )\n}\n\nconst CurrentToast = () => {\n  const { currentToast } = useToast()\n\n  if (!currentToast || currentToast.isHandledNatively) return null\n  return (\n    <Toast\n      key={currentToast.id}\n      duration={currentToast.duration}\n      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n      exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n      y={0}\n      opacity={1}\n      scale={1}\n      animation=\"100ms\"\n    >\n      <YStack>\n        <Toast.Title>{currentToast.title}</Toast.Title>\n        {!!currentToast.message && (\n          <Toast.Description>{currentToast.message}</Toast.Description>\n        )}\n      </YStack>\n    </Toast>\n  )\n}\n\nconst ToastControl = () => {\n  const toast = useToast()\n  return (\n    <XStack space=\"$2\" jc=\"center\">\n      <Button\n        onPress={() => {\n          toast.show('Successfully saved!', {\n            message: \"Don't worry, we've got your data.\",\n          })\n        }}\n      >\n        Show\n      </Button>\n      <Button\n        onPress={() => {\n          toast.hide()\n        }}\n      >\n        Hide\n      </Button>\n    </XStack>\n  )\n}\n\nconst NativeOptions = ({\n  native,\n  setNative,\n}: {\n  native: ToastNativePlatform[]\n  setNative: (native: ToastNativePlatform[]) => void\n}) => {\n  const supportedNativePlatforms: ToastNativePlatform[] = ['web', 'mobile']\n\n  return (\n    <XStack space>\n      {supportedNativePlatforms.map((platform) => (\n        <XStack ai=\"center\" space=\"$2\" key={platform}>\n          <Checkbox\n            id={platform}\n            checked={native?.includes(platform)}\n            onCheckedChange={(checked) => {\n              if (checked) setNative([...native, platform])\n              else setNative(native.filter((val) => val !== platform))\n            }}\n            size=\"$3\"\n          >\n            <Checkbox.Indicator>\n              <Check />\n            </Checkbox.Indicator>\n          </Checkbox>\n          <Label size=\"$3\" htmlFor={platform}>\n            Native {platform} toast\n          </Label>\n        </XStack>\n      ))}\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAmBM,SACE,KADF;AAnBN,SAAS,aAAa;AACtB,OAAO,WAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAgC,CAAC,CAAC;AAEpE,SACE,qBAAC,UAAO,OAAM,MACZ;AAAA,yBAAC,2BAAwB,SAAS,EAAE,OAAO,GACzC;AAAA,0BAAC,gBAAa;AAAA,MACd,oBAAC,gBAAa;AAAA,OAChB;AAAA,IAEA,oBAAC,iBAAc,QAAgB,WAAsB;AAAA,KACvD;AAEJ;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,EAAE,aAAa,IAAI,SAAS;AAElC,MAAI,CAAC,gBAAgB,aAAa;AAAmB,WAAO;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,UAAU,aAAa;AAAA,MACvB,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,MAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,MAC1C,GAAG;AAAA,MACH,SAAS;AAAA,MACT,OAAO;AAAA,MACP,WAAU;AAAA,MAEV,+BAAC,UACC;AAAA,4BAAC,MAAM,OAAN,EAAa,uBAAa,OAAM;AAAA,QAChC,CAAC,CAAC,aAAa,WACd,oBAAC,MAAM,aAAN,EAAmB,uBAAa,SAAQ;AAAA,SAE7C;AAAA;AAAA,IAdK,aAAa;AAAA,EAepB;AAEJ;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,QAAQ,SAAS;AACvB,SACE,qBAAC,UAAO,OAAM,MAAK,IAAG,UACpB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK,uBAAuB;AAAA,YAChC,SAAS;AAAA,UACX,CAAC;AAAA,QACH;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK;AAAA,QACb;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAGM;AACJ,QAAM,2BAAkD,CAAC,OAAO,QAAQ;AAExE,SACE,oBAAC,UAAO,OAAK,MACV,mCAAyB,IAAI,CAAC,aAC7B,qBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,SAAS,iCAAQ,SAAS;AAAA,QAC1B,iBAAiB,CAAC,YAAY;AAC5B,cAAI;AAAS,sBAAU,CAAC,GAAG,QAAQ,QAAQ,CAAC;AAAA;AACvC,sBAAU,OAAO,OAAO,CAAC,QAAQ,QAAQ,QAAQ,CAAC;AAAA,QACzD;AAAA,QACA,MAAK;AAAA,QAEL,8BAAC,SAAS,WAAT,EACC,8BAAC,SAAM,GACT;AAAA;AAAA,IACF;AAAA,IACA,qBAAC,SAAM,MAAK,MAAK,SAAS,UAAU;AAAA;AAAA,MAC1B;AAAA,MAAS;AAAA,OACnB;AAAA,OAhBkC,QAiBpC,CACD,GACH;AAEJ;",
+  "sourcesContent": ["import React from 'react'\nimport { Button, SizableText, Switch, Toast, XStack, YStack, useToast } from 'tamagui'\n\nexport const ToastDemo = () => {\n  const [native, setNative] = React.useState<boolean>(false)\n\n  return (\n    <YStack space alignItems=\"center\">\n      <ToastControl native={native} />\n      <CurrentToast />\n\n      <NativeOptions native={native} setNative={setNative} />\n    </YStack>\n  )\n}\n\nconst CurrentToast = () => {\n  const { currentToast } = useToast()\n\n  if (!currentToast || currentToast.isHandledNatively) return null\n  return (\n    <Toast\n      key={currentToast.id}\n      duration={currentToast.duration}\n      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n      exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n      y={0}\n      opacity={1}\n      scale={1}\n      animation=\"100ms\"\n    >\n      <YStack>\n        <Toast.Title>{currentToast.title}</Toast.Title>\n        {!!currentToast.message && (\n          <Toast.Description>{currentToast.message}</Toast.Description>\n        )}\n      </YStack>\n    </Toast>\n  )\n}\n\nconst ToastControl = ({ native }: { native: boolean }) => {\n  const toast = useToast()\n  return (\n    <XStack space=\"$2\" justifyContent=\"center\">\n      <Button\n        onPress={() => {\n          toast.show('Successfully saved!', {\n            message: \"Don't worry, we've got your data.\",\n            native,\n          })\n        }}\n      >\n        Show\n      </Button>\n      <Button\n        onPress={() => {\n          toast.hide()\n        }}\n      >\n        Hide\n      </Button>\n    </XStack>\n  )\n}\n\nconst NativeOptions = ({\n  native,\n  setNative,\n}: {\n  native: boolean\n  setNative: (native: boolean) => void\n}) => {\n  return (\n    <XStack space=\"$3\">\n      <SizableText size=\"$1\">Custom</SizableText>\n\n      <Switch\n        theme=\"active\"\n        size=\"$1\"\n        checked={!!native}\n        onCheckedChange={(val) => setNative(val)}\n      >\n        <Switch.Thumb\n          animation={[\n            'quick',\n            {\n              transform: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n        />\n      </Switch>\n\n      <SizableText size=\"$1\">Native</SizableText>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAOI,SACE,KADF;AAPJ,OAAO,WAAW;AAClB,SAAS,QAAQ,aAAa,QAAQ,OAAO,QAAQ,QAAQ,gBAAgB;AAEtE,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAkB,KAAK;AAEzD,SACE,qBAAC,UAAO,OAAK,MAAC,YAAW,UACvB;AAAA,wBAAC,gBAAa,QAAgB;AAAA,IAC9B,oBAAC,gBAAa;AAAA,IAEd,oBAAC,iBAAc,QAAgB,WAAsB;AAAA,KACvD;AAEJ;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,EAAE,aAAa,IAAI,SAAS;AAElC,MAAI,CAAC,gBAAgB,aAAa;AAAmB,WAAO;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,UAAU,aAAa;AAAA,MACvB,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,MAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,MAC1C,GAAG;AAAA,MACH,SAAS;AAAA,MACT,OAAO;AAAA,MACP,WAAU;AAAA,MAEV,+BAAC,UACC;AAAA,4BAAC,MAAM,OAAN,EAAa,uBAAa,OAAM;AAAA,QAChC,CAAC,CAAC,aAAa,WACd,oBAAC,MAAM,aAAN,EAAmB,uBAAa,SAAQ;AAAA,SAE7C;AAAA;AAAA,IAdK,aAAa;AAAA,EAepB;AAEJ;AAEA,MAAM,eAAe,CAAC,EAAE,OAAO,MAA2B;AACxD,QAAM,QAAQ,SAAS;AACvB,SACE,qBAAC,UAAO,OAAM,MAAK,gBAAe,UAChC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK,uBAAuB;AAAA,YAChC,SAAS;AAAA,YACT;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK;AAAA,QACb;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAGM;AACJ,SACE,qBAAC,UAAO,OAAM,MACZ;AAAA,wBAAC,eAAY,MAAK,MAAK,oBAAM;AAAA,IAE7B;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAK;AAAA,QACL,SAAS,CAAC,CAAC;AAAA,QACX,iBAAiB,CAAC,QAAQ,UAAU,GAAG;AAAA,QAEvC;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,gBACE,WAAW;AAAA,kBACT,mBAAmB;AAAA,gBACrB;AAAA,cACF;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,eAAY,MAAK,MAAK,oBAAM;AAAA,KAC/B;AAEJ;",
   "names": []
 }

package/dist/esm/ToastDuplicateDemo.js

@@ -4,7 +4,7 @@ import React from "react";
 import { Button, Toast, XStack, YStack } from "tamagui";
 const ToastDuplicateDemo = () => {
   const [savedCount, setSavedCount] = React.useState(0);
-  return /* @__PURE__ */ jsxs(YStack, { ai: "center", children: [
+  return /* @__PURE__ */ jsxs(YStack, { alignItems: "center", children: [
     /* @__PURE__ */ jsx(
       Button,
       {
@@ -25,7 +25,7 @@ const ToastDuplicateDemo = () => {
         opacity: 1,
         scale: 1,
         animation: "100ms",
-        children: /* @__PURE__ */ jsxs(XStack, { space: true, ai: "center", children: [
+        children: /* @__PURE__ */ jsxs(XStack, { space: true, alignItems: "center", children: [
           /* @__PURE__ */ jsx(YStack, { children: /* @__PURE__ */ jsx(CheckCircle2, {}) }),
           /* @__PURE__ */ jsxs(YStack, { children: [
             /* @__PURE__ */ jsx(Toast.Title, { children: "Successfully saved!" }),

package/dist/esm/ToastDuplicateDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToastDuplicateDemo.tsx"],
-  "sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { Button, Toast, XStack, YStack } from 'tamagui'\n\nexport const ToastDuplicateDemo = () => {\n  const [savedCount, setSavedCount] = React.useState(0)\n\n  return (\n    <YStack ai=\"center\">\n      <Button\n        onPress={() => {\n          setSavedCount((old) => old + 1)\n        }}\n      >\n        Show toast\n      </Button>\n      {[...Array(savedCount)].map((_, index) => (\n        <Toast\n          viewportName=\"viewport-multiple\" // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop\n          key={index}\n          duration={4000}\n          enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n          exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n          y={0}\n          opacity={1}\n          scale={1}\n          animation=\"100ms\"\n        >\n          <XStack space ai=\"center\">\n            <YStack>\n              <CheckCircle2 />\n            </YStack>\n\n            <YStack>\n              <Toast.Title>Successfully saved!</Toast.Title>\n              <Toast.Description>Don't worry... We've got your data.</Toast.Description>\n            </YStack>\n          </XStack>\n        </Toast>\n      ))}\n    </YStack>\n  )\n}\n"],
-  "mappings": "AASM,cAwBM,YAxBN;AATN,SAAS,oBAAoB;AAC7B,OAAO,WAAW;AAClB,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,MAAM,qBAAqB,MAAM;AACtC,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AAEpD,SACE,qBAAC,UAAO,IAAG,UACT;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,wBAAc,CAAC,QAAQ,MAAM,CAAC;AAAA,QAChC;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACC,CAAC,GAAG,MAAM,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9B;AAAA,MAAC;AAAA;AAAA,QACC,cAAa;AAAA,QAEb,UAAU;AAAA,QACV,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,QAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,QAC1C,GAAG;AAAA,QACH,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAU;AAAA,QAEV,+BAAC,UAAO,OAAK,MAAC,IAAG,UACf;AAAA,8BAAC,UACC,8BAAC,gBAAa,GAChB;AAAA,UAEA,qBAAC,UACC;AAAA,gCAAC,MAAM,OAAN,EAAY,iCAAmB;AAAA,YAChC,oBAAC,MAAM,aAAN,EAAkB,iDAAmC;AAAA,aACxD;AAAA,WACF;AAAA;AAAA,MAlBK;AAAA,IAmBP,CACD;AAAA,KACH;AAEJ;",
+  "sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { Button, Toast, XStack, YStack } from 'tamagui'\n\nexport const ToastDuplicateDemo = () => {\n  const [savedCount, setSavedCount] = React.useState(0)\n\n  return (\n    <YStack alignItems=\"center\">\n      <Button\n        onPress={() => {\n          setSavedCount((old) => old + 1)\n        }}\n      >\n        Show toast\n      </Button>\n      {[...Array(savedCount)].map((_, index) => (\n        <Toast\n          viewportName=\"viewport-multiple\" // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop\n          key={index}\n          duration={4000}\n          enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n          exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n          y={0}\n          opacity={1}\n          scale={1}\n          animation=\"100ms\"\n        >\n          <XStack space alignItems=\"center\">\n            <YStack>\n              <CheckCircle2 />\n            </YStack>\n\n            <YStack>\n              <Toast.Title>Successfully saved!</Toast.Title>\n              <Toast.Description>Don't worry... We've got your data.</Toast.Description>\n            </YStack>\n          </XStack>\n        </Toast>\n      ))}\n    </YStack>\n  )\n}\n"],
+  "mappings": "AASM,cAwBM,YAxBN;AATN,SAAS,oBAAoB;AAC7B,OAAO,WAAW;AAClB,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,MAAM,qBAAqB,MAAM;AACtC,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AAEpD,SACE,qBAAC,UAAO,YAAW,UACjB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,wBAAc,CAAC,QAAQ,MAAM,CAAC;AAAA,QAChC;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACC,CAAC,GAAG,MAAM,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9B;AAAA,MAAC;AAAA;AAAA,QACC,cAAa;AAAA,QAEb,UAAU;AAAA,QACV,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,QAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,QAC1C,GAAG;AAAA,QACH,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAU;AAAA,QAEV,+BAAC,UAAO,OAAK,MAAC,YAAW,UACvB;AAAA,8BAAC,UACC,8BAAC,gBAAa,GAChB;AAAA,UAEA,qBAAC,UACC;AAAA,gCAAC,MAAM,OAAN,EAAY,iCAAmB;AAAA,YAChC,oBAAC,MAAM,aAAN,EAAkB,iDAAmC;AAAA,aACxD;AAAA,WACF;AAAA;AAAA,MAlBK;AAAA,IAmBP,CACD;AAAA,KACH;AAEJ;",
   "names": []
 }

package/dist/esm/ToastDuplicateDemo.mjs

@@ -4,7 +4,7 @@ import React from "react";
 import { Button, Toast, XStack, YStack } from "tamagui";
 const ToastDuplicateDemo = () => {
   const [savedCount, setSavedCount] = React.useState(0);
-  return /* @__PURE__ */ jsxs(YStack, { ai: "center", children: [
+  return /* @__PURE__ */ jsxs(YStack, { alignItems: "center", children: [
     /* @__PURE__ */ jsx(
       Button,
       {
@@ -25,7 +25,7 @@ const ToastDuplicateDemo = () => {
         opacity: 1,
         scale: 1,
         animation: "100ms",
-        children: /* @__PURE__ */ jsxs(XStack, { space: true, ai: "center", children: [
+        children: /* @__PURE__ */ jsxs(XStack, { space: true, alignItems: "center", children: [
           /* @__PURE__ */ jsx(YStack, { children: /* @__PURE__ */ jsx(CheckCircle2, {}) }),
           /* @__PURE__ */ jsxs(YStack, { children: [
             /* @__PURE__ */ jsx(Toast.Title, { children: "Successfully saved!" }),

package/dist/esm/ToastDuplicateDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToastDuplicateDemo.tsx"],
-  "sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { Button, Toast, XStack, YStack } from 'tamagui'\n\nexport const ToastDuplicateDemo = () => {\n  const [savedCount, setSavedCount] = React.useState(0)\n\n  return (\n    <YStack ai=\"center\">\n      <Button\n        onPress={() => {\n          setSavedCount((old) => old + 1)\n        }}\n      >\n        Show toast\n      </Button>\n      {[...Array(savedCount)].map((_, index) => (\n        <Toast\n          viewportName=\"viewport-multiple\" // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop\n          key={index}\n          duration={4000}\n          enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n          exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n          y={0}\n          opacity={1}\n          scale={1}\n          animation=\"100ms\"\n        >\n          <XStack space ai=\"center\">\n            <YStack>\n              <CheckCircle2 />\n            </YStack>\n\n            <YStack>\n              <Toast.Title>Successfully saved!</Toast.Title>\n              <Toast.Description>Don't worry... We've got your data.</Toast.Description>\n            </YStack>\n          </XStack>\n        </Toast>\n      ))}\n    </YStack>\n  )\n}\n"],
-  "mappings": "AASM,cAwBM,YAxBN;AATN,SAAS,oBAAoB;AAC7B,OAAO,WAAW;AAClB,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,MAAM,qBAAqB,MAAM;AACtC,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AAEpD,SACE,qBAAC,UAAO,IAAG,UACT;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,wBAAc,CAAC,QAAQ,MAAM,CAAC;AAAA,QAChC;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACC,CAAC,GAAG,MAAM,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9B;AAAA,MAAC;AAAA;AAAA,QACC,cAAa;AAAA,QAEb,UAAU;AAAA,QACV,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,QAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,QAC1C,GAAG;AAAA,QACH,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAU;AAAA,QAEV,+BAAC,UAAO,OAAK,MAAC,IAAG,UACf;AAAA,8BAAC,UACC,8BAAC,gBAAa,GAChB;AAAA,UAEA,qBAAC,UACC;AAAA,gCAAC,MAAM,OAAN,EAAY,iCAAmB;AAAA,YAChC,oBAAC,MAAM,aAAN,EAAkB,iDAAmC;AAAA,aACxD;AAAA,WACF;AAAA;AAAA,MAlBK;AAAA,IAmBP,CACD;AAAA,KACH;AAEJ;",
+  "sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { Button, Toast, XStack, YStack } from 'tamagui'\n\nexport const ToastDuplicateDemo = () => {\n  const [savedCount, setSavedCount] = React.useState(0)\n\n  return (\n    <YStack alignItems=\"center\">\n      <Button\n        onPress={() => {\n          setSavedCount((old) => old + 1)\n        }}\n      >\n        Show toast\n      </Button>\n      {[...Array(savedCount)].map((_, index) => (\n        <Toast\n          viewportName=\"viewport-multiple\" // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop\n          key={index}\n          duration={4000}\n          enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n          exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n          y={0}\n          opacity={1}\n          scale={1}\n          animation=\"100ms\"\n        >\n          <XStack space alignItems=\"center\">\n            <YStack>\n              <CheckCircle2 />\n            </YStack>\n\n            <YStack>\n              <Toast.Title>Successfully saved!</Toast.Title>\n              <Toast.Description>Don't worry... We've got your data.</Toast.Description>\n            </YStack>\n          </XStack>\n        </Toast>\n      ))}\n    </YStack>\n  )\n}\n"],
+  "mappings": "AASM,cAwBM,YAxBN;AATN,SAAS,oBAAoB;AAC7B,OAAO,WAAW;AAClB,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,MAAM,qBAAqB,MAAM;AACtC,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AAEpD,SACE,qBAAC,UAAO,YAAW,UACjB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,wBAAc,CAAC,QAAQ,MAAM,CAAC;AAAA,QAChC;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACC,CAAC,GAAG,MAAM,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9B;AAAA,MAAC;AAAA;AAAA,QACC,cAAa;AAAA,QAEb,UAAU;AAAA,QACV,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,QAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,QAC1C,GAAG;AAAA,QACH,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAU;AAAA,QAEV,+BAAC,UAAO,OAAK,MAAC,YAAW,UACvB;AAAA,8BAAC,UACC,8BAAC,gBAAa,GAChB;AAAA,UAEA,qBAAC,UACC;AAAA,gCAAC,MAAM,OAAN,EAAY,iCAAmB;AAAA,YAChC,oBAAC,MAAM,aAAN,EAAkB,iDAAmC;AAAA,aACxD;AAAA,WACF;AAAA;AAAA,MAlBK;AAAA,IAmBP,CACD;AAAA,KACH;AAEJ;",
   "names": []
 }

package/dist/esm/ToggleGroupDemo.js

@@ -2,16 +2,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
 import { Label, ToggleGroup, XStack, YStack } from "tamagui";
 function ToggleGroupDemo() {
-  return /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$10", children: [
-    /* @__PURE__ */ jsxs(YStack, { ai: "center", space: "$6", children: [
+  return /* @__PURE__ */ jsx(YStack, { paddingHorizontal: "$4", children: /* @__PURE__ */ jsxs(XStack, { alignItems: "center", space: "$10", children: [
+    /* @__PURE__ */ jsxs(YStack, { alignItems: "center", space: "$6", children: [
       /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "single", size: "$3", orientation: "horizontal" }),
       /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "multiple", size: "$4", orientation: "horizontal" })
     ] }),
-    /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$6", children: [
+    /* @__PURE__ */ jsxs(XStack, { alignItems: "center", space: "$6", children: [
       /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "single", size: "$3", orientation: "vertical" }),
       /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "multiple", size: "$4", orientation: "vertical" })
     ] })
-  ] });
+  ] }) });
 }
 function ToggleGroupComponent(props) {
   const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
@@ -19,11 +19,11 @@ function ToggleGroupComponent(props) {
     XStack,
     {
       flexDirection: props.orientation === "horizontal" ? "row" : "column",
-      ai: "center",
-      jc: "center",
+      alignItems: "center",
+      justifyContent: "center",
       space: "$4",
       children: [
-        /* @__PURE__ */ jsx(Label, { pr: "$0", jc: "flex-end", size: props.size, htmlFor: id, children: props.type === "single" ? "Single" : "Multiple" }),
+        /* @__PURE__ */ jsx(Label, { paddingRight: "$0", justifyContent: "flex-end", size: props.size, htmlFor: id, children: props.type === "single" ? "Single" : "Multiple" }),
         /* @__PURE__ */ jsxs(
           ToggleGroup,
           {

package/dist/esm/ToggleGroupDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToggleGroupDemo.tsx"],
-  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n  return (\n    <XStack ai=\"center\" space=\"$10\">\n      <YStack ai=\"center\" space=\"$6\">\n        <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n      </YStack>\n      <XStack ai=\"center\" space=\"$6\">\n        <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n      </XStack>\n    </XStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: {\n  size: SizeTokens\n  type: 'single' | 'multiple'\n  orientation: 'vertical' | 'horizontal'\n}) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack\n      flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n      ai=\"center\"\n      jc=\"center\"\n      space=\"$4\"\n    >\n      <Label pr=\"$0\"  jc=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n      <ToggleGroup\n        orientation={props.orientation}\n        id={id}\n        type={props.type}\n        size={props.size}\n        disableDeactivation={props.type === \"single\" ? true : undefined}\n      >\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAMM,SACE,KADF;AANN,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,qBAAC,UAAO,IAAG,UAAS,OAAM,OACxB;AAAA,yBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,cAAa;AAAA,MACvE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,cAAa;AAAA,OAC3E;AAAA,IACA,qBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,IAAG;AAAA,MACH,IAAG;AAAA,MACH,OAAM;AAAA,MAEN;AAAA,4BAAC,SAAM,IAAG,MAAM,IAAG,YAAW,MAAM,MAAM,MAAM,SAAS,IACtD,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS,WAAW,OAAO;AAAA,YAEtD;AAAA,kCAAC,YAAY,MAAZ,EAAiB,OAAM,QAAO,cAAW,gBACxC,8BAAC,aAAU,GACb;AAAA,cACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,UAAS,cAAW,kBAC1C,8BAAC,eAAY,GACf;AAAA,cACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,SAAQ,cAAW,iBACzC,8BAAC,cAAW,GACd;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n  return (\n    <YStack paddingHorizontal=\"$4\">\n      <XStack alignItems=\"center\" space=\"$10\">\n        <YStack alignItems=\"center\" space=\"$6\">\n          <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n          <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n        </YStack>\n        <XStack alignItems=\"center\" space=\"$6\">\n          <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n          <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n        </XStack>\n      </XStack>\n    </YStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: {\n  size: SizeTokens\n  type: 'single' | 'multiple'\n  orientation: 'vertical' | 'horizontal'\n}) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack\n      flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      space=\"$4\"\n    >\n      <Label paddingRight=\"$0\" justifyContent=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n      <ToggleGroup\n        orientation={props.orientation}\n        id={id}\n        type={props.type}\n        size={props.size}\n        disableDeactivation={props.type === 'single' ? true : undefined}\n      >\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAOQ,SACE,KADF;AAPR,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,oBAAC,UAAO,mBAAkB,MACxB,+BAAC,UAAO,YAAW,UAAS,OAAM,OAChC;AAAA,yBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,cAAa;AAAA,MACvE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,cAAa;AAAA,OAC3E;AAAA,IACA,qBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF,GACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,OAAM;AAAA,MAEN;AAAA,4BAAC,SAAM,cAAa,MAAK,gBAAe,YAAW,MAAM,MAAM,MAAM,SAAS,IAC3E,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS,WAAW,OAAO;AAAA,YAEtD;AAAA,kCAAC,YAAY,MAAZ,EAAiB,OAAM,QAAO,cAAW,gBACxC,8BAAC,aAAU,GACb;AAAA,cACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,UAAS,cAAW,kBAC1C,8BAAC,eAAY,GACf;AAAA,cACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,SAAQ,cAAW,iBACzC,8BAAC,cAAW,GACd;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/ToggleGroupDemo.mjs

@@ -2,16 +2,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
 import { Label, ToggleGroup, XStack, YStack } from "tamagui";
 function ToggleGroupDemo() {
-  return /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$10", children: [
-    /* @__PURE__ */ jsxs(YStack, { ai: "center", space: "$6", children: [
+  return /* @__PURE__ */ jsx(YStack, { paddingHorizontal: "$4", children: /* @__PURE__ */ jsxs(XStack, { alignItems: "center", space: "$10", children: [
+    /* @__PURE__ */ jsxs(YStack, { alignItems: "center", space: "$6", children: [
       /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "single", size: "$3", orientation: "horizontal" }),
       /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "multiple", size: "$4", orientation: "horizontal" })
     ] }),
-    /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$6", children: [
+    /* @__PURE__ */ jsxs(XStack, { alignItems: "center", space: "$6", children: [
       /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "single", size: "$3", orientation: "vertical" }),
       /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "multiple", size: "$4", orientation: "vertical" })
     ] })
-  ] });
+  ] }) });
 }
 function ToggleGroupComponent(props) {
   const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
@@ -19,11 +19,11 @@ function ToggleGroupComponent(props) {
     XStack,
     {
       flexDirection: props.orientation === "horizontal" ? "row" : "column",
-      ai: "center",
-      jc: "center",
+      alignItems: "center",
+      justifyContent: "center",
       space: "$4",
       children: [
-        /* @__PURE__ */ jsx(Label, { pr: "$0", jc: "flex-end", size: props.size, htmlFor: id, children: props.type === "single" ? "Single" : "Multiple" }),
+        /* @__PURE__ */ jsx(Label, { paddingRight: "$0", justifyContent: "flex-end", size: props.size, htmlFor: id, children: props.type === "single" ? "Single" : "Multiple" }),
         /* @__PURE__ */ jsxs(
           ToggleGroup,
           {

package/dist/esm/ToggleGroupDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToggleGroupDemo.tsx"],
-  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n  return (\n    <XStack ai=\"center\" space=\"$10\">\n      <YStack ai=\"center\" space=\"$6\">\n        <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n      </YStack>\n      <XStack ai=\"center\" space=\"$6\">\n        <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n      </XStack>\n    </XStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: {\n  size: SizeTokens\n  type: 'single' | 'multiple'\n  orientation: 'vertical' | 'horizontal'\n}) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack\n      flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n      ai=\"center\"\n      jc=\"center\"\n      space=\"$4\"\n    >\n      <Label pr=\"$0\"  jc=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n      <ToggleGroup\n        orientation={props.orientation}\n        id={id}\n        type={props.type}\n        size={props.size}\n        disableDeactivation={props.type === \"single\" ? true : undefined}\n      >\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAMM,SACE,KADF;AANN,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,qBAAC,UAAO,IAAG,UAAS,OAAM,OACxB;AAAA,yBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,cAAa;AAAA,MACvE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,cAAa;AAAA,OAC3E;AAAA,IACA,qBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,IAAG;AAAA,MACH,IAAG;AAAA,MACH,OAAM;AAAA,MAEN;AAAA,4BAAC,SAAM,IAAG,MAAM,IAAG,YAAW,MAAM,MAAM,MAAM,SAAS,IACtD,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS,WAAW,OAAO;AAAA,YAEtD;AAAA,kCAAC,YAAY,MAAZ,EAAiB,OAAM,QAAO,cAAW,gBACxC,8BAAC,aAAU,GACb;AAAA,cACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,UAAS,cAAW,kBAC1C,8BAAC,eAAY,GACf;AAAA,cACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,SAAQ,cAAW,iBACzC,8BAAC,cAAW,GACd;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n  return (\n    <YStack paddingHorizontal=\"$4\">\n      <XStack alignItems=\"center\" space=\"$10\">\n        <YStack alignItems=\"center\" space=\"$6\">\n          <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n          <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n        </YStack>\n        <XStack alignItems=\"center\" space=\"$6\">\n          <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n          <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n        </XStack>\n      </XStack>\n    </YStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: {\n  size: SizeTokens\n  type: 'single' | 'multiple'\n  orientation: 'vertical' | 'horizontal'\n}) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack\n      flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      space=\"$4\"\n    >\n      <Label paddingRight=\"$0\" justifyContent=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n      <ToggleGroup\n        orientation={props.orientation}\n        id={id}\n        type={props.type}\n        size={props.size}\n        disableDeactivation={props.type === 'single' ? true : undefined}\n      >\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAOQ,SACE,KADF;AAPR,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,oBAAC,UAAO,mBAAkB,MACxB,+BAAC,UAAO,YAAW,UAAS,OAAM,OAChC;AAAA,yBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,cAAa;AAAA,MACvE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,cAAa;AAAA,OAC3E;AAAA,IACA,qBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF,GACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,OAAM;AAAA,MAEN;AAAA,4BAAC,SAAM,cAAa,MAAK,gBAAe,YAAW,MAAM,MAAM,MAAM,SAAS,IAC3E,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS,WAAW,OAAO;AAAA,YAEtD;AAAA,kCAAC,YAAY,MAAZ,EAAiB,OAAM,QAAO,cAAW,gBACxC,8BAAC,aAAU,GACb;AAAA,cACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,UAAS,cAAW,kBAC1C,8BAAC,eAAY,GACf;AAAA,cACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,SAAQ,cAAW,iBACzC,8BAAC,cAAW,GACd;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/TokensDemo.js

@@ -23,7 +23,7 @@ const sections = [
 function TokensDemo() {
   const [section, setSection] = useState("size");
   return /* @__PURE__ */ jsxs(YStack, { space: true, children: [
-    /* @__PURE__ */ jsx(XGroup, { ai: "center", als: "center", children: sections.map(({ name, key }) => {
+    /* @__PURE__ */ jsx(XGroup, { alignItems: "center", alignSelf: "center", children: sections.map(({ name, key }) => {
       return /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(
         Button,
         {
@@ -44,17 +44,17 @@ function SizeSection({ section }) {
   const st = Object.keys(tokens).sort((a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1);
   const spaceTokens = st.filter((t) => parseFloat(t) >= 0);
   const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0).sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
-  return /* @__PURE__ */ jsxs(YStack, { f: 1, space: true, children: [
+  return /* @__PURE__ */ jsxs(YStack, { flex: 1, space: true, children: [
     /* @__PURE__ */ jsx(H2, { children: "Sizes" }),
-    /* @__PURE__ */ jsx(YStack, { w: "100%", space: "$2", separator: /* @__PURE__ */ jsx(Separator, {}), children: (section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
+    /* @__PURE__ */ jsx(YStack, { width: "100%", space: "$2", separator: /* @__PURE__ */ jsx(Separator, {}), children: (section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
       (token) => {
         var _a, _b, _c, _d, _e;
-        return /* @__PURE__ */ jsxs(XStack, { w: "100%", ai: "center", children: [
-          /* @__PURE__ */ jsx(YStack, { w: "25%", children: /* @__PURE__ */ jsxs(H3, { size: "$6", children: [
+        return /* @__PURE__ */ jsxs(XStack, { width: "100%", alignItems: "center", children: [
+          /* @__PURE__ */ jsx(YStack, { width: "25%", children: /* @__PURE__ */ jsxs(H3, { size: "$6", children: [
             "$",
             token
           ] }) }),
-          /* @__PURE__ */ jsx(YStack, { w: "20%", children: /* @__PURE__ */ jsxs(H4, { size: "$5", children: [
+          /* @__PURE__ */ jsx(YStack, { width: "20%", children: /* @__PURE__ */ jsxs(H4, { size: "$5", children: [
             (_a = tokens[token]) == null ? void 0 : _a.val,
             "px"
           ] }) }),
@@ -62,9 +62,9 @@ function SizeSection({ section }) {
             Square,
             {
               size: (_b = tokens[token]) == null ? void 0 : _b.val,
-              bc: "$color5",
+              backgroundColor: "$color5",
               ...section === "spaceNegative" && {
-                bc: "$red5",
+                backgroundColor: "$red5",
                 size: -((_c = tokens[spaceTokensNegative.find(
                   (t) => parseFloat(t) === -parseFloat(token)
                 ) ?? token]) == null ? void 0 : _c.val)
@@ -72,7 +72,7 @@ function SizeSection({ section }) {
               ...section === "radius" && {
                 // @ts-ignore
                 size: (_d = allTokens.size[token]) == null ? void 0 : _d.val,
-                br: (_e = tokens[token]) == null ? void 0 : _e.val
+                borderRadius: (_e = tokens[token]) == null ? void 0 : _e.val
               }
             }
           )

package/dist/esm/TokensDemo.js.map

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

package/dist/esm/TokensDemo.mjs

@@ -23,7 +23,7 @@ const sections = [
 function TokensDemo() {
   const [section, setSection] = useState("size");
   return /* @__PURE__ */ jsxs(YStack, { space: true, children: [
-    /* @__PURE__ */ jsx(XGroup, { ai: "center", als: "center", children: sections.map(({ name, key }) => {
+    /* @__PURE__ */ jsx(XGroup, { alignItems: "center", alignSelf: "center", children: sections.map(({ name, key }) => {
       return /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(
         Button,
         {
@@ -44,17 +44,17 @@ function SizeSection({ section }) {
   const st = Object.keys(tokens).sort((a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1);
   const spaceTokens = st.filter((t) => parseFloat(t) >= 0);
   const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0).sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
-  return /* @__PURE__ */ jsxs(YStack, { f: 1, space: true, children: [
+  return /* @__PURE__ */ jsxs(YStack, { flex: 1, space: true, children: [
     /* @__PURE__ */ jsx(H2, { children: "Sizes" }),
-    /* @__PURE__ */ jsx(YStack, { w: "100%", space: "$2", separator: /* @__PURE__ */ jsx(Separator, {}), children: (section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
+    /* @__PURE__ */ jsx(YStack, { width: "100%", space: "$2", separator: /* @__PURE__ */ jsx(Separator, {}), children: (section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
       (token) => {
         var _a, _b, _c, _d, _e;
-        return /* @__PURE__ */ jsxs(XStack, { w: "100%", ai: "center", children: [
-          /* @__PURE__ */ jsx(YStack, { w: "25%", children: /* @__PURE__ */ jsxs(H3, { size: "$6", children: [
+        return /* @__PURE__ */ jsxs(XStack, { width: "100%", alignItems: "center", children: [
+          /* @__PURE__ */ jsx(YStack, { width: "25%", children: /* @__PURE__ */ jsxs(H3, { size: "$6", children: [
             "$",
             token
           ] }) }),
-          /* @__PURE__ */ jsx(YStack, { w: "20%", children: /* @__PURE__ */ jsxs(H4, { size: "$5", children: [
+          /* @__PURE__ */ jsx(YStack, { width: "20%", children: /* @__PURE__ */ jsxs(H4, { size: "$5", children: [
             (_a = tokens[token]) == null ? void 0 : _a.val,
             "px"
           ] }) }),
@@ -62,9 +62,9 @@ function SizeSection({ section }) {
             Square,
             {
               size: (_b = tokens[token]) == null ? void 0 : _b.val,
-              bc: "$color5",
+              backgroundColor: "$color5",
               ...section === "spaceNegative" && {
-                bc: "$red5",
+                backgroundColor: "$red5",
                 size: -((_c = tokens[spaceTokensNegative.find(
                   (t) => parseFloat(t) === -parseFloat(token)
                 ) ?? token]) == null ? void 0 : _c.val)
@@ -72,7 +72,7 @@ function SizeSection({ section }) {
               ...section === "radius" && {
                 // @ts-ignore
                 size: (_d = allTokens.size[token]) == null ? void 0 : _d.val,
-                br: (_e = tokens[token]) == null ? void 0 : _e.val
+                borderRadius: (_e = tokens[token]) == null ? void 0 : _e.val
               }
             }
           )

package/dist/esm/TokensDemo.mjs.map

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

package/dist/esm/TooltipDemo.js

@@ -16,7 +16,7 @@ import {
   YStack
 } from "tamagui";
 function TooltipDemo() {
-  return /* @__PURE__ */ jsx(TooltipGroup, { delay: { open: 3e3, close: 100 }, children: /* @__PURE__ */ jsxs(YStack, { space: "$2", als: "center", children: [
+  return /* @__PURE__ */ jsx(TooltipGroup, { delay: { open: 3e3, close: 100 }, children: /* @__PURE__ */ jsxs(YStack, { space: "$2", alignSelf: "center", children: [
     /* @__PURE__ */ jsxs(XStack, { space: "$2", children: [
       /* @__PURE__ */ jsx(Demo, { groupId: "0", placement: "top-end", Icon: Circle }),
       /* @__PURE__ */ jsx(Demo, { groupId: "1", placement: "top", Icon: ChevronUp }),
@@ -24,7 +24,7 @@ function TooltipDemo() {
     ] }),
     /* @__PURE__ */ jsxs(XStack, { space: "$2", children: [
       /* @__PURE__ */ jsx(Demo, { groupId: "3", placement: "left", Icon: ChevronLeft }),
-      /* @__PURE__ */ jsx(YStack, { f: 1 }),
+      /* @__PURE__ */ jsx(YStack, { flex: 1 }),
       /* @__PURE__ */ jsx(Demo, { groupId: "4", placement: "right", Icon: ChevronRight })
     ] }),
     /* @__PURE__ */ jsxs(XStack, { space: "$2", children: [
@@ -40,12 +40,12 @@ function Demo({ Icon, ...props }) {
     /* @__PURE__ */ jsx(Theme, { inverse: true, children: /* @__PURE__ */ jsxs(
       Tooltip.Content,
       {
-        enterStyle: { x: 0, y: -5, o: 0, scale: 0.9 },
-        exitStyle: { x: 0, y: -5, o: 0, scale: 0.9 },
+        enterStyle: { x: 0, y: -5, opacity: 0, scale: 0.9 },
+        exitStyle: { x: 0, y: -5, opacity: 0, scale: 0.9 },
         scale: 1,
         x: 0,
         y: 0,
-        o: 1,
+        opacity: 1,
         animation: [
           "quick",
           {