@tamagui/demos 1.14.0 → 1.14.2

package/dist/jsx/CheckboxDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/CheckboxDemo.tsx"],
   "sourcesContent": ["import { Check as CheckIcon } from '@tamagui/lucide-icons'\nimport { Checkbox, Label, SizeTokens, XStack, YStack } from 'tamagui'\n\nexport function CheckboxDemo() {\n  return (\n    <YStack width={300} alignItems=\"center\" space=\"$2\">\n      <CheckboxWithLabel size=\"$3\" />\n      <CheckboxWithLabel size=\"$4\" defaultChecked />\n      <CheckboxWithLabel size=\"$5\" />\n    </YStack>\n  )\n}\n\nfunction CheckboxWithLabel(props: { size: SizeTokens; defaultChecked?: boolean }) {\n  const id = `checkbox-${props.size.toString().slice(1)}`\n  return (\n    <XStack width={300} alignItems=\"center\" space=\"$4\">\n      <Checkbox id={id} size={props.size} defaultChecked={props.defaultChecked}>\n        <Checkbox.Indicator>\n          <CheckIcon />\n        </Checkbox.Indicator>\n      </Checkbox>\n\n      <Label size={props.size} htmlFor={id}>\n        Accept terms and conditions\n      </Label>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAAA,OAAS,SAASA,MAAiB,wBACnC,OAAS,YAAAC,EAAU,SAAAC,EAAmB,UAAAC,EAAQ,UAAAC,MAAc,UAErD,SAASC,GAAe,CAC7B,MACE,CAACD,EAAO,OAAO,IAAK,WAAW,QAAS,MAAM,KAC5C,CAACE,EAAkB,KAAK,IAAK,EAC7B,CAACA,EAAkB,KAAK,IAAK,cAAe,EAC5C,CAACA,EAAkB,KAAK,IAAK,EAC/B,EAJCF,EAML,CAEA,SAASE,EAAkBC,EAAuD,CAChF,MAAMC,EAAK,YAAYD,EAAM,KAAK,SAAS,EAAE,MAAM,CAAC,IACpD,MACE,CAACJ,EAAO,OAAO,IAAK,WAAW,QAAS,MAAM,KAC5C,CAACF,EAAS,IAAIO,EAAI,MAAMD,EAAM,KAAM,gBAAgBA,EAAM,gBACxD,CAACN,EAAS,UACR,CAACD,CAAU,EACb,EAFCC,EAAS,UAGZ,EAJCA,EAMD,CAACC,EAAM,MAAMK,EAAM,KAAM,SAASC,GAAI,2BAEtC,EAFCN,EAGH,EAVCC,EAYL",
-  "names": ["CheckIcon", "Checkbox", "Label", "XStack", "YStack", "CheckboxDemo", "CheckboxWithLabel", "props", "id"]
+  "mappings": "AAAA,SAAS,SAAS,iBAAiB;AACnC,SAAS,UAAU,OAAmB,QAAQ,cAAc;AAErD,SAAS,eAAe;AAC7B,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,kBAAkB,KAAK,KAAK;AAAA,IAC7B,CAAC,kBAAkB,KAAK,KAAK,eAAe;AAAA,IAC5C,CAAC,kBAAkB,KAAK,KAAK;AAAA,EAC/B,EAJC;AAML;AAEA,SAAS,kBAAkB,OAAuD;AAChF,QAAM,KAAK,YAAY,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC;AACpD,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,SAAS,IAAI,IAAI,MAAM,MAAM,MAAM,gBAAgB,MAAM,gBACxD,CAAC,SAAS,UACR,CAAC,UAAU,EACb,EAFC,SAAS,UAGZ,EAJC;AAAA,IAMD,CAAC,MAAM,MAAM,MAAM,MAAM,SAAS,IAAI,2BAEtC,EAFC;AAAA,EAGH,EAVC;AAYL;",
+  "names": []
 }

package/dist/jsx/CheckboxDemo.mjs

@@ -1,2 +1,20 @@
-import{Check as $}from"@tamagui/lucide-icons";import{Checkbox as S,Label as I,XStack as L,YStack as T}from"tamagui";function D(){return<T width={300}alignItems="center"space="$2"><C size="$3"/><C size="$4"defaultChecked/><C size="$5"/></T>}function C(e){const b=`checkbox-${e.size.toString().slice(1)}`;return<L width={300}alignItems="center"space="$4"><S id={b}size={e.size}defaultChecked={e.defaultChecked}><S.Indicator><$/></S.Indicator></S><I size={e.size}htmlFor={b}>Accept terms and conditions</I></L>}export{D as CheckboxDemo};
+import { Check as CheckIcon } from "@tamagui/lucide-icons";
+import { Checkbox, Label, XStack, YStack } from "tamagui";
+function CheckboxDemo() {
+  return <YStack width={300} alignItems="center" space="$2">
+    <CheckboxWithLabel size="$3" />
+    <CheckboxWithLabel size="$4" defaultChecked />
+    <CheckboxWithLabel size="$5" />
+  </YStack>;
+}
+function CheckboxWithLabel(props) {
+  const id = `checkbox-${props.size.toString().slice(1)}`;
+  return <XStack width={300} alignItems="center" space="$4">
+    <Checkbox id={id} size={props.size} defaultChecked={props.defaultChecked}><Checkbox.Indicator><CheckIcon /></Checkbox.Indicator></Checkbox>
+    <Label size={props.size} htmlFor={id}>Accept terms and conditions</Label>
+  </XStack>;
+}
+export {
+  CheckboxDemo
+};
 //# sourceMappingURL=CheckboxDemo.mjs.map

package/dist/jsx/CheckboxDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/CheckboxDemo.tsx"],
   "sourcesContent": ["import { Check as CheckIcon } from '@tamagui/lucide-icons'\nimport { Checkbox, Label, SizeTokens, XStack, YStack } from 'tamagui'\n\nexport function CheckboxDemo() {\n  return (\n    <YStack width={300} alignItems=\"center\" space=\"$2\">\n      <CheckboxWithLabel size=\"$3\" />\n      <CheckboxWithLabel size=\"$4\" defaultChecked />\n      <CheckboxWithLabel size=\"$5\" />\n    </YStack>\n  )\n}\n\nfunction CheckboxWithLabel(props: { size: SizeTokens; defaultChecked?: boolean }) {\n  const id = `checkbox-${props.size.toString().slice(1)}`\n  return (\n    <XStack width={300} alignItems=\"center\" space=\"$4\">\n      <Checkbox id={id} size={props.size} defaultChecked={props.defaultChecked}>\n        <Checkbox.Indicator>\n          <CheckIcon />\n        </Checkbox.Indicator>\n      </Checkbox>\n\n      <Label size={props.size} htmlFor={id}>\n        Accept terms and conditions\n      </Label>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAAA,OAAS,SAASA,MAAiB,wBACnC,OAAS,YAAAC,EAAU,SAAAC,EAAmB,UAAAC,EAAQ,UAAAC,MAAc,UAErD,SAASC,GAAe,CAC7B,MACE,CAACD,EAAO,OAAO,IAAK,WAAW,QAAS,MAAM,KAC5C,CAACE,EAAkB,KAAK,IAAK,EAC7B,CAACA,EAAkB,KAAK,IAAK,cAAe,EAC5C,CAACA,EAAkB,KAAK,IAAK,EAC/B,EAJCF,EAML,CAEA,SAASE,EAAkBC,EAAuD,CAChF,MAAMC,EAAK,YAAYD,EAAM,KAAK,SAAS,EAAE,MAAM,CAAC,IACpD,MACE,CAACJ,EAAO,OAAO,IAAK,WAAW,QAAS,MAAM,KAC5C,CAACF,EAAS,IAAIO,EAAI,MAAMD,EAAM,KAAM,gBAAgBA,EAAM,gBACxD,CAACN,EAAS,UACR,CAACD,CAAU,EACb,EAFCC,EAAS,UAGZ,EAJCA,EAMD,CAACC,EAAM,MAAMK,EAAM,KAAM,SAASC,GAAI,2BAEtC,EAFCN,EAGH,EAVCC,EAYL",
-  "names": ["CheckIcon", "Checkbox", "Label", "XStack", "YStack", "CheckboxDemo", "CheckboxWithLabel", "props", "id"]
+  "mappings": "AAAA,SAAS,SAAS,iBAAiB;AACnC,SAAS,UAAU,OAAmB,QAAQ,cAAc;AAErD,SAAS,eAAe;AAC7B,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,kBAAkB,KAAK,KAAK;AAAA,IAC7B,CAAC,kBAAkB,KAAK,KAAK,eAAe;AAAA,IAC5C,CAAC,kBAAkB,KAAK,KAAK;AAAA,EAC/B,EAJC;AAML;AAEA,SAAS,kBAAkB,OAAuD;AAChF,QAAM,KAAK,YAAY,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC;AACpD,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,SAAS,IAAI,IAAI,MAAM,MAAM,MAAM,gBAAgB,MAAM,gBACxD,CAAC,SAAS,UACR,CAAC,UAAU,EACb,EAFC,SAAS,UAGZ,EAJC;AAAA,IAMD,CAAC,MAAM,MAAM,MAAM,MAAM,SAAS,IAAI,2BAEtC,EAFC;AAAA,EAGH,EAVC;AAYL;",
+  "names": []
 }

package/dist/jsx/ColorsDemo.js

@@ -1,2 +1,86 @@
-import{H2 as W,Paragraph as C,Separator as X,Square as P,XStack as S,YStack as $,getTokens as R,getVariableValue as T}from"tamagui";const D=["orange","yellow","green","blue","purple","pink","red"];function j(){const t=R({prefixed:!1}).color,[a,r]=[Y(t),Y(t,!0)];return<$ marginTop="$4"space="$8"><V title="Light"colors={a}/><X/><V title="Dark"colors={r}/></$>}function V({title:t,colors:a}){return<$ space $sm={{space:"$2"}}><W size="$2">{t}</W><S space alignSelf="center"><$ space $sm={{space:"$2"}}als="center">{a.map((r,e)=><S space="$2"key={e}>{r.map(f=><P key={`${f.key}${e}`}borderRadius="$2"size="$4"height="$4"borderWidth={1}backgroundColor={T(f)}borderColor="$color7"$sm={{size:"$2"}}$xs={{size:"$1"}}/>)}</S>)}<S space="$2"alignSelf="center">{new Array(13).fill(0).slice(1).map((r,e)=><C color="$color10"textAlign="center"width="$4"$sm={{width:"$2"}}$xs={{width:"$1"}}key={e}>{e}</C>)}</S></$><$ space="$4"marginTop="$2">{D.map(r=><C theme={r}color="$color10"height="$4"rotate="-10deg"$sm={{height:"$2"}}$xs={{height:"$1"}}key={r}>{r}</C>)}</$></S></$>}function Y(t,a=!1){return D.map(r=>Object.keys(t).filter(e=>e.startsWith(r)&&(a?e.endsWith("Dark"):!e.endsWith("Dark"))).map(e=>t[e]))}export{j as ColorsDemo};
+import {
+  H2,
+  Paragraph,
+  Separator,
+  Square,
+  XStack,
+  YStack,
+  getTokens,
+  getVariableValue
+} from "tamagui";
+const colorGroups = ["orange", "yellow", "green", "blue", "purple", "pink", "red"];
+function ColorsDemo() {
+  const colors = getTokens({ prefixed: false }).color;
+  const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)];
+  return <YStack marginTop="$4" space="$8">
+    <ColorsRow title="Light" colors={colorsLight} />
+    <Separator />
+    <ColorsRow title="Dark" colors={colorsDark} />
+  </YStack>;
+}
+function ColorsRow({ title, colors }) {
+  return <YStack space $sm={{ space: "$2" }}>
+    <H2 size="$2">{title}</H2>
+    <XStack space alignSelf="center">
+      <YStack space $sm={{ space: "$2" }} als="center">
+        {colors.map((group, index) => {
+          return <XStack space="$2" key={index}>{group.map((color) => {
+            return <Square
+              key={`${color.key}${index}`}
+              borderRadius="$2"
+              size="$4"
+              height="$4"
+              borderWidth={1}
+              backgroundColor={getVariableValue(color)}
+              borderColor="$color7"
+              $sm={{
+                size: "$2"
+              }}
+              $xs={{
+                size: "$1"
+              }}
+            />;
+          })}</XStack>;
+        })}
+        <XStack space="$2" alignSelf="center">{new Array(13).fill(0).slice(1).map((_, index) => {
+          return <Paragraph
+            color="$color10"
+            textAlign="center"
+            width="$4"
+            $sm={{
+              width: "$2"
+            }}
+            $xs={{
+              width: "$1"
+            }}
+            key={index}
+          >{index}</Paragraph>;
+        })}</XStack>
+      </YStack>
+      <YStack space="$4" marginTop="$2">{colorGroups.map((name) => <Paragraph
+        theme={name}
+        color="$color10"
+        height="$4"
+        rotate="-10deg"
+        $sm={{
+          height: "$2"
+        }}
+        $xs={{
+          height: "$1"
+        }}
+        key={name}
+      >{name}</Paragraph>)}</YStack>
+    </XStack>
+  </YStack>;
+}
+function getColors(colors, dark = false) {
+  return colorGroups.map((group) => {
+    return Object.keys(colors).filter(
+      (color) => color.startsWith(group) && (dark ? color.endsWith("Dark") : !color.endsWith("Dark"))
+    ).map((key) => colors[key]);
+  });
+}
+export {
+  ColorsDemo
+};
 //# sourceMappingURL=ColorsDemo.js.map

package/dist/jsx/ColorsDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/ColorsDemo.tsx"],
   "sourcesContent": ["import { Variable } from '@tamagui/core'\nimport {\n  H2,\n  Paragraph,\n  Separator,\n  Square,\n  XStack,\n  YStack,\n  getTokens,\n  getVariableValue,\n} from 'tamagui'\n\nconst colorGroups = ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red']\n\nexport function ColorsDemo() {\n  const colors = getTokens({ prefixed: false }).color\n  const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)]\n\n  return (\n    <YStack marginTop=\"$4\" space=\"$8\">\n      <ColorsRow title=\"Light\" colors={colorsLight} />\n      <Separator />\n      <ColorsRow title=\"Dark\" colors={colorsDark} />\n    </YStack>\n  )\n}\n\nfunction ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {\n  return (\n    <YStack space $sm={{ space: '$2' }}>\n      <H2 size=\"$2\">{title}</H2>\n\n      <XStack space alignSelf=\"center\">\n        <YStack space $sm={{ space: '$2' }} als=\"center\">\n          {colors.map((group, index) => {\n            return (\n              <XStack space=\"$2\" key={index}>\n                {group.map((color) => {\n                  return (\n                    <Square\n                      key={`${color.key}${index}`}\n                      borderRadius=\"$2\"\n                      size=\"$4\"\n                      height=\"$4\"\n                      borderWidth={1}\n                      backgroundColor={getVariableValue(color)}\n                      borderColor=\"$color7\"\n                      $sm={{\n                        size: '$2',\n                      }}\n                      $xs={{\n                        size: '$1',\n                      }}\n                    />\n                  )\n                })}\n              </XStack>\n            )\n          })}\n\n          <XStack space=\"$2\" alignSelf=\"center\">\n            {new Array(13)\n              .fill(0)\n              .slice(1)\n              .map((_, index) => {\n                return (\n                  <Paragraph\n                    color=\"$color10\"\n                    textAlign=\"center\"\n                    width=\"$4\"\n                    $sm={{\n                     width:'$2',\n                    }}\n                    $xs={{\n                      width: '$1',\n                    }}\n                    key={index}\n                  >\n                    {index}\n                  </Paragraph>\n                )\n              })}\n          </XStack>\n        </YStack>\n\n        <YStack space=\"$4\" marginTop=\"$2\">\n          {colorGroups.map((name) => (\n            <Paragraph\n              theme={name as any}\n              color=\"$color10\"\n              height=\"$4\"\n              rotate=\"-10deg\"\n              $sm={{\n                height: '$2',\n              }}\n              $xs={{\n                height: '$1',\n              }}\n              key={name}\n            >\n              {name}\n            </Paragraph>\n          ))}\n        </YStack>\n      </XStack>\n    </YStack>\n  )\n}\n\nfunction getColors(colors: Record<string, Variable>, dark = false) {\n  return colorGroups.map((group) => {\n    return Object.keys(colors)\n      .filter(\n        (color) =>\n          color.startsWith(group) &&\n          (dark ? color.endsWith('Dark') : !color.endsWith('Dark'))\n      )\n      .map((key) => colors[key])\n  })\n}\n"],
-  "mappings": "AACA,OACE,MAAAA,EACA,aAAAC,EACA,aAAAC,EACA,UAAAC,EACA,UAAAC,EACA,UAAAC,EACA,aAAAC,EACA,oBAAAC,MACK,UAEP,MAAMC,EAAc,CAAC,SAAU,SAAU,QAAS,OAAQ,SAAU,OAAQ,KAAK,EAE1E,SAASC,GAAa,CAC3B,MAAMC,EAASJ,EAAU,CAAE,SAAU,EAAM,CAAC,EAAE,MACxC,CAACK,EAAaC,CAAU,EAAI,CAACC,EAAUH,CAAM,EAAGG,EAAUH,EAAQ,EAAI,CAAC,EAE7E,MACE,CAACL,EAAO,UAAU,IAAK,MAAM,KAC3B,CAACS,EAAU,MAAM,OAAQ,QAAQH,EAAa,EAC9C,CAACT,CAAU,EACX,CAACY,EAAU,MAAM,MAAO,QAAQF,EAAY,EAC9C,EAJCP,EAML,CAEA,SAASS,EAAU,CAAE,MAAAC,EAAO,OAAAL,CAAO,EAA4C,CAC7E,MACE,CAACL,EAAO,MAAM,KAAK,CAAE,MAAO,IAAK,GAC/B,CAACL,EAAG,KAAK,MAAMe,EAAM,EAApBf,EAED,CAACI,EAAO,MAAM,UAAU,SACtB,CAACC,EAAO,MAAM,KAAK,CAAE,MAAO,IAAK,EAAG,IAAI,UACrCK,EAAO,IAAI,CAACM,EAAOC,IAEhB,CAACb,EAAO,MAAM,IAAK,KAAKa,IACrBD,EAAM,IAAKE,GAER,CAACf,EACC,KAAK,GAAGe,EAAM,MAAMD,IACpB,aAAa,IACb,KAAK,IACL,OAAO,IACP,aAAa,EACb,iBAAiBV,EAAiBW,CAAK,EACvC,YAAY,SACZ,KAAK,CACH,KAAM,IACR,EACA,KAAK,CACH,KAAM,IACR,EACF,EAEH,EACH,EApBCd,EAsBJ,EAED,CAACA,EAAO,MAAM,IAAK,UAAU,UAC1B,IAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAACe,EAAGF,IAEL,CAAChB,EACC,MAAM,UACN,UAAU,QACV,MAAM,IACN,KAAK,CACJ,MAAM,IACP,EACA,KAAK,CACH,MAAO,IACT,EACA,KAAKgB,IAEJA,EACH,EAbChB,EAeJ,EACL,EAtBCG,EAuBH,EAlDCC,EAoDD,CAACA,EAAO,MAAM,IAAK,UAAU,MAC1BG,EAAY,IAAKY,GAChB,CAACnB,EACC,OAAOmB,EACP,MAAM,UACN,OAAO,IACP,OAAO,QACP,KAAK,CACH,OAAQ,IACV,EACA,KAAK,CACH,OAAQ,IACV,EACA,KAAKA,IAEJA,EACH,EAdCnB,EAeF,EACH,EAlBCI,EAmBH,EAxECD,EAyEH,EA5ECC,EA8EL,CAEA,SAASQ,EAAUH,EAAkCW,EAAO,GAAO,CACjE,OAAOb,EAAY,IAAKQ,GACf,OAAO,KAAKN,CAAM,EACtB,OACEQ,GACCA,EAAM,WAAWF,CAAK,IACrBK,EAAOH,EAAM,SAAS,MAAM,EAAI,CAACA,EAAM,SAAS,MAAM,EAC3D,EACC,IAAKI,GAAQZ,EAAOY,CAAG,CAAC,CAC5B,CACH",
-  "names": ["H2", "Paragraph", "Separator", "Square", "XStack", "YStack", "getTokens", "getVariableValue", "colorGroups", "ColorsDemo", "colors", "colorsLight", "colorsDark", "getColors", "ColorsRow", "title", "group", "index", "color", "_", "name", "dark", "key"]
+  "mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,SAAS,UAAU,EAAE,UAAU,MAAM,CAAC,EAAE;AAC9C,QAAM,CAAC,aAAa,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,UAAU,QAAQ,IAAI,CAAC;AAE7E,SACE,CAAC,OAAO,UAAU,KAAK,MAAM;AAAA,IAC3B,CAAC,UAAU,MAAM,QAAQ,QAAQ,aAAa;AAAA,IAC9C,CAAC,UAAU;AAAA,IACX,CAAC,UAAU,MAAM,OAAO,QAAQ,YAAY;AAAA,EAC9C,EAJC;AAML;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK;AAAA,IAC/B,CAAC,GAAG,KAAK,MAAM,MAAM,EAApB;AAAA,IAED,CAAC,OAAO,MAAM,UAAU;AAAA,MACtB,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK,GAAG,IAAI;AAAA,SACrC,OAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,CAAC,OAAO,MAAM,KAAK,KAAK,QACrB,MAAM,IAAI,CAAC,UAAU;AACpB,mBACE,CAAC;AAAA,cACC,KAAK,GAAG,MAAM,MAAM;AAAA,cACpB,aAAa;AAAA,cACb,KAAK;AAAA,cACL,OAAO;AAAA,cACP,aAAa;AAAA,cACb,iBAAiB,iBAAiB,KAAK;AAAA,cACvC,YAAY;AAAA,cACZ,KAAK;AAAA,gBACH,MAAM;AAAA,cACR;AAAA,cACA,KAAK;AAAA,gBACH,MAAM;AAAA,cACR;AAAA,YACF;AAAA,UAEJ,CAAC,EACH,EApBC;AAAA,QAsBL,CAAC;AAAA,QAED,CAAC,OAAO,MAAM,KAAK,UAAU,UAC1B,IAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAAU;AACjB,iBACE,CAAC;AAAA,YACC,MAAM;AAAA,YACN,UAAU;AAAA,YACV,MAAM;AAAA,YACN,KAAK;AAAA,cACJ,OAAM;AAAA,YACP;AAAA,YACA,KAAK;AAAA,cACH,OAAO;AAAA,YACT;AAAA,YACA,KAAK;AAAA,YAEJ,MACH,EAbC;AAAA,QAeL,CAAC,EACL,EAtBC;AAAA,MAuBH,EAlDC;AAAA,MAoDD,CAAC,OAAO,MAAM,KAAK,UAAU,MAC1B,YAAY,IAAI,CAAC,SAChB,CAAC;AAAA,QACC,OAAO;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,KAAK;AAAA,UACH,QAAQ;AAAA,QACV;AAAA,QACA,KAAK;AAAA,UACH,QAAQ;AAAA,QACV;AAAA,QACA,KAAK;AAAA,QAEJ,KACH,EAdC,UAeF,EACH,EAlBC;AAAA,IAmBH,EAxEC;AAAA,EAyEH,EA5EC;AA8EL;AAEA,SAAS,UAAU,QAAkC,OAAO,OAAO;AACjE,SAAO,YAAY,IAAI,CAAC,UAAU;AAChC,WAAO,OAAO,KAAK,MAAM,EACtB;AAAA,MACC,CAAC,UACC,MAAM,WAAW,KAAK,MACrB,OAAO,MAAM,SAAS,MAAM,IAAI,CAAC,MAAM,SAAS,MAAM;AAAA,IAC3D,EACC,IAAI,CAAC,QAAQ,OAAO,GAAG,CAAC;AAAA,EAC7B,CAAC;AACH;",
+  "names": []
 }

package/dist/jsx/ColorsDemo.mjs

@@ -1,2 +1,86 @@
-import{H2 as W,Paragraph as C,Separator as X,Square as P,XStack as S,YStack as $,getTokens as R,getVariableValue as T}from"tamagui";const D=["orange","yellow","green","blue","purple","pink","red"];function j(){const t=R({prefixed:!1}).color,[a,r]=[Y(t),Y(t,!0)];return<$ marginTop="$4"space="$8"><V title="Light"colors={a}/><X/><V title="Dark"colors={r}/></$>}function V({title:t,colors:a}){return<$ space $sm={{space:"$2"}}><W size="$2">{t}</W><S space alignSelf="center"><$ space $sm={{space:"$2"}}als="center">{a.map((r,e)=><S space="$2"key={e}>{r.map(f=><P key={`${f.key}${e}`}borderRadius="$2"size="$4"height="$4"borderWidth={1}backgroundColor={T(f)}borderColor="$color7"$sm={{size:"$2"}}$xs={{size:"$1"}}/>)}</S>)}<S space="$2"alignSelf="center">{new Array(13).fill(0).slice(1).map((r,e)=><C color="$color10"textAlign="center"width="$4"$sm={{width:"$2"}}$xs={{width:"$1"}}key={e}>{e}</C>)}</S></$><$ space="$4"marginTop="$2">{D.map(r=><C theme={r}color="$color10"height="$4"rotate="-10deg"$sm={{height:"$2"}}$xs={{height:"$1"}}key={r}>{r}</C>)}</$></S></$>}function Y(t,a=!1){return D.map(r=>Object.keys(t).filter(e=>e.startsWith(r)&&(a?e.endsWith("Dark"):!e.endsWith("Dark"))).map(e=>t[e]))}export{j as ColorsDemo};
+import {
+  H2,
+  Paragraph,
+  Separator,
+  Square,
+  XStack,
+  YStack,
+  getTokens,
+  getVariableValue
+} from "tamagui";
+const colorGroups = ["orange", "yellow", "green", "blue", "purple", "pink", "red"];
+function ColorsDemo() {
+  const colors = getTokens({ prefixed: false }).color;
+  const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)];
+  return <YStack marginTop="$4" space="$8">
+    <ColorsRow title="Light" colors={colorsLight} />
+    <Separator />
+    <ColorsRow title="Dark" colors={colorsDark} />
+  </YStack>;
+}
+function ColorsRow({ title, colors }) {
+  return <YStack space $sm={{ space: "$2" }}>
+    <H2 size="$2">{title}</H2>
+    <XStack space alignSelf="center">
+      <YStack space $sm={{ space: "$2" }} als="center">
+        {colors.map((group, index) => {
+          return <XStack space="$2" key={index}>{group.map((color) => {
+            return <Square
+              key={`${color.key}${index}`}
+              borderRadius="$2"
+              size="$4"
+              height="$4"
+              borderWidth={1}
+              backgroundColor={getVariableValue(color)}
+              borderColor="$color7"
+              $sm={{
+                size: "$2"
+              }}
+              $xs={{
+                size: "$1"
+              }}
+            />;
+          })}</XStack>;
+        })}
+        <XStack space="$2" alignSelf="center">{new Array(13).fill(0).slice(1).map((_, index) => {
+          return <Paragraph
+            color="$color10"
+            textAlign="center"
+            width="$4"
+            $sm={{
+              width: "$2"
+            }}
+            $xs={{
+              width: "$1"
+            }}
+            key={index}
+          >{index}</Paragraph>;
+        })}</XStack>
+      </YStack>
+      <YStack space="$4" marginTop="$2">{colorGroups.map((name) => <Paragraph
+        theme={name}
+        color="$color10"
+        height="$4"
+        rotate="-10deg"
+        $sm={{
+          height: "$2"
+        }}
+        $xs={{
+          height: "$1"
+        }}
+        key={name}
+      >{name}</Paragraph>)}</YStack>
+    </XStack>
+  </YStack>;
+}
+function getColors(colors, dark = false) {
+  return colorGroups.map((group) => {
+    return Object.keys(colors).filter(
+      (color) => color.startsWith(group) && (dark ? color.endsWith("Dark") : !color.endsWith("Dark"))
+    ).map((key) => colors[key]);
+  });
+}
+export {
+  ColorsDemo
+};
 //# sourceMappingURL=ColorsDemo.mjs.map

package/dist/jsx/ColorsDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/ColorsDemo.tsx"],
   "sourcesContent": ["import { Variable } from '@tamagui/core'\nimport {\n  H2,\n  Paragraph,\n  Separator,\n  Square,\n  XStack,\n  YStack,\n  getTokens,\n  getVariableValue,\n} from 'tamagui'\n\nconst colorGroups = ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red']\n\nexport function ColorsDemo() {\n  const colors = getTokens({ prefixed: false }).color\n  const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)]\n\n  return (\n    <YStack marginTop=\"$4\" space=\"$8\">\n      <ColorsRow title=\"Light\" colors={colorsLight} />\n      <Separator />\n      <ColorsRow title=\"Dark\" colors={colorsDark} />\n    </YStack>\n  )\n}\n\nfunction ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {\n  return (\n    <YStack space $sm={{ space: '$2' }}>\n      <H2 size=\"$2\">{title}</H2>\n\n      <XStack space alignSelf=\"center\">\n        <YStack space $sm={{ space: '$2' }} als=\"center\">\n          {colors.map((group, index) => {\n            return (\n              <XStack space=\"$2\" key={index}>\n                {group.map((color) => {\n                  return (\n                    <Square\n                      key={`${color.key}${index}`}\n                      borderRadius=\"$2\"\n                      size=\"$4\"\n                      height=\"$4\"\n                      borderWidth={1}\n                      backgroundColor={getVariableValue(color)}\n                      borderColor=\"$color7\"\n                      $sm={{\n                        size: '$2',\n                      }}\n                      $xs={{\n                        size: '$1',\n                      }}\n                    />\n                  )\n                })}\n              </XStack>\n            )\n          })}\n\n          <XStack space=\"$2\" alignSelf=\"center\">\n            {new Array(13)\n              .fill(0)\n              .slice(1)\n              .map((_, index) => {\n                return (\n                  <Paragraph\n                    color=\"$color10\"\n                    textAlign=\"center\"\n                    width=\"$4\"\n                    $sm={{\n                     width:'$2',\n                    }}\n                    $xs={{\n                      width: '$1',\n                    }}\n                    key={index}\n                  >\n                    {index}\n                  </Paragraph>\n                )\n              })}\n          </XStack>\n        </YStack>\n\n        <YStack space=\"$4\" marginTop=\"$2\">\n          {colorGroups.map((name) => (\n            <Paragraph\n              theme={name as any}\n              color=\"$color10\"\n              height=\"$4\"\n              rotate=\"-10deg\"\n              $sm={{\n                height: '$2',\n              }}\n              $xs={{\n                height: '$1',\n              }}\n              key={name}\n            >\n              {name}\n            </Paragraph>\n          ))}\n        </YStack>\n      </XStack>\n    </YStack>\n  )\n}\n\nfunction getColors(colors: Record<string, Variable>, dark = false) {\n  return colorGroups.map((group) => {\n    return Object.keys(colors)\n      .filter(\n        (color) =>\n          color.startsWith(group) &&\n          (dark ? color.endsWith('Dark') : !color.endsWith('Dark'))\n      )\n      .map((key) => colors[key])\n  })\n}\n"],
-  "mappings": "AACA,OACE,MAAAA,EACA,aAAAC,EACA,aAAAC,EACA,UAAAC,EACA,UAAAC,EACA,UAAAC,EACA,aAAAC,EACA,oBAAAC,MACK,UAEP,MAAMC,EAAc,CAAC,SAAU,SAAU,QAAS,OAAQ,SAAU,OAAQ,KAAK,EAE1E,SAASC,GAAa,CAC3B,MAAMC,EAASJ,EAAU,CAAE,SAAU,EAAM,CAAC,EAAE,MACxC,CAACK,EAAaC,CAAU,EAAI,CAACC,EAAUH,CAAM,EAAGG,EAAUH,EAAQ,EAAI,CAAC,EAE7E,MACE,CAACL,EAAO,UAAU,IAAK,MAAM,KAC3B,CAACS,EAAU,MAAM,OAAQ,QAAQH,EAAa,EAC9C,CAACT,CAAU,EACX,CAACY,EAAU,MAAM,MAAO,QAAQF,EAAY,EAC9C,EAJCP,EAML,CAEA,SAASS,EAAU,CAAE,MAAAC,EAAO,OAAAL,CAAO,EAA4C,CAC7E,MACE,CAACL,EAAO,MAAM,KAAK,CAAE,MAAO,IAAK,GAC/B,CAACL,EAAG,KAAK,MAAMe,EAAM,EAApBf,EAED,CAACI,EAAO,MAAM,UAAU,SACtB,CAACC,EAAO,MAAM,KAAK,CAAE,MAAO,IAAK,EAAG,IAAI,UACrCK,EAAO,IAAI,CAACM,EAAOC,IAEhB,CAACb,EAAO,MAAM,IAAK,KAAKa,IACrBD,EAAM,IAAKE,GAER,CAACf,EACC,KAAK,GAAGe,EAAM,MAAMD,IACpB,aAAa,IACb,KAAK,IACL,OAAO,IACP,aAAa,EACb,iBAAiBV,EAAiBW,CAAK,EACvC,YAAY,SACZ,KAAK,CACH,KAAM,IACR,EACA,KAAK,CACH,KAAM,IACR,EACF,EAEH,EACH,EApBCd,EAsBJ,EAED,CAACA,EAAO,MAAM,IAAK,UAAU,UAC1B,IAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAACe,EAAGF,IAEL,CAAChB,EACC,MAAM,UACN,UAAU,QACV,MAAM,IACN,KAAK,CACJ,MAAM,IACP,EACA,KAAK,CACH,MAAO,IACT,EACA,KAAKgB,IAEJA,EACH,EAbChB,EAeJ,EACL,EAtBCG,EAuBH,EAlDCC,EAoDD,CAACA,EAAO,MAAM,IAAK,UAAU,MAC1BG,EAAY,IAAKY,GAChB,CAACnB,EACC,OAAOmB,EACP,MAAM,UACN,OAAO,IACP,OAAO,QACP,KAAK,CACH,OAAQ,IACV,EACA,KAAK,CACH,OAAQ,IACV,EACA,KAAKA,IAEJA,EACH,EAdCnB,EAeF,EACH,EAlBCI,EAmBH,EAxECD,EAyEH,EA5ECC,EA8EL,CAEA,SAASQ,EAAUH,EAAkCW,EAAO,GAAO,CACjE,OAAOb,EAAY,IAAKQ,GACf,OAAO,KAAKN,CAAM,EACtB,OACEQ,GACCA,EAAM,WAAWF,CAAK,IACrBK,EAAOH,EAAM,SAAS,MAAM,EAAI,CAACA,EAAM,SAAS,MAAM,EAC3D,EACC,IAAKI,GAAQZ,EAAOY,CAAG,CAAC,CAC5B,CACH",
-  "names": ["H2", "Paragraph", "Separator", "Square", "XStack", "YStack", "getTokens", "getVariableValue", "colorGroups", "ColorsDemo", "colors", "colorsLight", "colorsDark", "getColors", "ColorsRow", "title", "group", "index", "color", "_", "name", "dark", "key"]
+  "mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,SAAS,UAAU,EAAE,UAAU,MAAM,CAAC,EAAE;AAC9C,QAAM,CAAC,aAAa,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,UAAU,QAAQ,IAAI,CAAC;AAE7E,SACE,CAAC,OAAO,UAAU,KAAK,MAAM;AAAA,IAC3B,CAAC,UAAU,MAAM,QAAQ,QAAQ,aAAa;AAAA,IAC9C,CAAC,UAAU;AAAA,IACX,CAAC,UAAU,MAAM,OAAO,QAAQ,YAAY;AAAA,EAC9C,EAJC;AAML;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK;AAAA,IAC/B,CAAC,GAAG,KAAK,MAAM,MAAM,EAApB;AAAA,IAED,CAAC,OAAO,MAAM,UAAU;AAAA,MACtB,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK,GAAG,IAAI;AAAA,SACrC,OAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,CAAC,OAAO,MAAM,KAAK,KAAK,QACrB,MAAM,IAAI,CAAC,UAAU;AACpB,mBACE,CAAC;AAAA,cACC,KAAK,GAAG,MAAM,MAAM;AAAA,cACpB,aAAa;AAAA,cACb,KAAK;AAAA,cACL,OAAO;AAAA,cACP,aAAa;AAAA,cACb,iBAAiB,iBAAiB,KAAK;AAAA,cACvC,YAAY;AAAA,cACZ,KAAK;AAAA,gBACH,MAAM;AAAA,cACR;AAAA,cACA,KAAK;AAAA,gBACH,MAAM;AAAA,cACR;AAAA,YACF;AAAA,UAEJ,CAAC,EACH,EApBC;AAAA,QAsBL,CAAC;AAAA,QAED,CAAC,OAAO,MAAM,KAAK,UAAU,UAC1B,IAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAAU;AACjB,iBACE,CAAC;AAAA,YACC,MAAM;AAAA,YACN,UAAU;AAAA,YACV,MAAM;AAAA,YACN,KAAK;AAAA,cACJ,OAAM;AAAA,YACP;AAAA,YACA,KAAK;AAAA,cACH,OAAO;AAAA,YACT;AAAA,YACA,KAAK;AAAA,YAEJ,MACH,EAbC;AAAA,QAeL,CAAC,EACL,EAtBC;AAAA,MAuBH,EAlDC;AAAA,MAoDD,CAAC,OAAO,MAAM,KAAK,UAAU,MAC1B,YAAY,IAAI,CAAC,SAChB,CAAC;AAAA,QACC,OAAO;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,KAAK;AAAA,UACH,QAAQ;AAAA,QACV;AAAA,QACA,KAAK;AAAA,UACH,QAAQ;AAAA,QACV;AAAA,QACA,KAAK;AAAA,QAEJ,KACH,EAdC,UAeF,EACH,EAlBC;AAAA,IAmBH,EAxEC;AAAA,EAyEH,EA5EC;AA8EL;AAEA,SAAS,UAAU,QAAkC,OAAO,OAAO;AACjE,SAAO,YAAY,IAAI,CAAC,UAAU;AAChC,WAAO,OAAO,KAAK,MAAM,EACtB;AAAA,MACC,CAAC,UACC,MAAM,WAAW,KAAK,MACrB,OAAO,MAAM,SAAS,MAAM,IAAI,CAAC,MAAM,SAAS,MAAM;AAAA,IAC3D,EACC,IAAI,CAAC,QAAQ,OAAO,GAAG,CAAC;AAAA,EAC7B,CAAC;AACH;",
+  "names": []
 }

package/dist/jsx/DialogDemo.js

@@ -1,2 +1,66 @@
-import{X as P}from"@tamagui/lucide-icons";import{Adapt as F,Button as D,Dialog as C,Fieldset as T,Input as B,Label as $,Paragraph as A,Sheet as S,TooltipSimple as I,Unspaced as L,YStack as O}from"tamagui";import{SelectDemo as E}from"./SelectDemo";function H(){return<C modal><C.Trigger asChild><D>Edit Profile</D></C.Trigger><F when="sm"platform="touch"><S zIndex={2e5}modal dismissOnSnapToBottom><S.Frame padding="$4"space><F.Contents/></S.Frame><S.Overlay/></S></F><C.Portal><C.Overlay key="overlay"animation="quick"opacity={.5}enterStyle={{opacity:0}}exitStyle={{opacity:0}}/><C.Content bordered elevate key="content"animation={["quick",{opacity:{overshootClamping:!0}}]}enterStyle={{x:0,y:-20,opacity:0,scale:.9}}exitStyle={{x:0,y:10,opacity:0,scale:.95}}space><C.Title>Edit profile</C.Title><C.Description>Make changes to your profile here. Click save when you're done.</C.Description><T space="$4"horizontal><$ width={160}justifyContent="flex-end"htmlFor="name">Name</$><B flex={1}id="name"defaultValue="Nate Wienert"/></T><T space="$4"horizontal><$ width={160}justifyContent="flex-end"htmlFor="username"><I label="Pick your favorite"placement="bottom-start"><A>Food</A></I></$><E/></T><O alignItems="flex-end"marginTop="$2"><C.Close displayWhenAdapted asChild><D theme="alt1"aria-label="Close">Save changes</D></C.Close></O><L><C.Close asChild><D position="absolute"top="$3"right="$3"size="$2"circular icon={P}/></C.Close></L></C.Content></C.Portal></C>}export{H as DialogDemo};
+import { X } from "@tamagui/lucide-icons";
+import {
+  Adapt,
+  Button,
+  Dialog,
+  Fieldset,
+  Input,
+  Label,
+  Paragraph,
+  Sheet,
+  TooltipSimple,
+  Unspaced,
+  YStack
+} from "tamagui";
+import { SelectDemo } from "./SelectDemo";
+function DialogDemo() {
+  return <Dialog modal>
+    <Dialog.Trigger asChild><Button>Edit Profile</Button></Dialog.Trigger>
+    <Adapt when="sm" platform="touch"><Sheet zIndex={2e5} modal dismissOnSnapToBottom>
+      <Sheet.Frame padding="$4" space><Adapt.Contents /></Sheet.Frame>
+      <Sheet.Overlay />
+    </Sheet></Adapt>
+    <Dialog.Portal>
+      <Dialog.Overlay
+        key="overlay"
+        animation="quick"
+        opacity={0.5}
+        enterStyle={{ opacity: 0 }}
+        exitStyle={{ opacity: 0 }}
+      />
+      <Dialog.Content
+        bordered
+        elevate
+        key="content"
+        animation={[
+          "quick",
+          {
+            opacity: {
+              overshootClamping: true
+            }
+          }
+        ]}
+        enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
+        exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+        space
+      >
+        <Dialog.Title>Edit profile</Dialog.Title>
+        <Dialog.Description>Make changes to your profile here. Click save when you're done.</Dialog.Description>
+        <Fieldset space="$4" horizontal>
+          <Label width={160} justifyContent="flex-end" htmlFor="name">Name</Label>
+          <Input flex={1} id="name" defaultValue="Nate Wienert" />
+        </Fieldset>
+        <Fieldset space="$4" horizontal>
+          <Label width={160} justifyContent="flex-end" htmlFor="username"><TooltipSimple label="Pick your favorite" placement="bottom-start"><Paragraph>Food</Paragraph></TooltipSimple></Label>
+          <SelectDemo />
+        </Fieldset>
+        <YStack alignItems="flex-end" marginTop="$2"><Dialog.Close displayWhenAdapted asChild><Button theme="alt1" aria-label="Close">Save changes</Button></Dialog.Close></YStack>
+        <Unspaced><Dialog.Close asChild><Button position="absolute" top="$3" right="$3" size="$2" circular icon={X} /></Dialog.Close></Unspaced>
+      </Dialog.Content>
+    </Dialog.Portal>
+  </Dialog>;
+}
+export {
+  DialogDemo
+};
 //# sourceMappingURL=DialogDemo.js.map

package/dist/jsx/DialogDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/DialogDemo.tsx"],
   "sourcesContent": ["import { X } from '@tamagui/lucide-icons'\nimport {\n  Adapt,\n  Button,\n  Dialog,\n  Fieldset,\n  H2,\n  Input,\n  Label,\n  Paragraph,\n  Sheet,\n  TooltipSimple,\n  Unspaced,\n  YStack,\n} from 'tamagui'\n\nimport { SelectDemo } from './SelectDemo'\n\nexport function DialogDemo() {\n  return (\n    <Dialog modal>\n      <Dialog.Trigger asChild>\n        <Button>Edit Profile</Button>\n      </Dialog.Trigger>\n\n      <Adapt when=\"sm\" platform=\"touch\">\n        <Sheet zIndex={200000} modal dismissOnSnapToBottom>\n          <Sheet.Frame padding=\"$4\" space>\n            <Adapt.Contents />\n          </Sheet.Frame>\n          <Sheet.Overlay />\n        </Sheet>\n      </Adapt>\n\n      <Dialog.Portal>\n        <Dialog.Overlay\n          key=\"overlay\"\n          animation=\"quick\"\n          opacity={0.5}\n          enterStyle={{ opacity: 0 }}\n          exitStyle={{ opacity: 0 }}\n        />\n\n        <Dialog.Content\n          bordered\n          elevate\n          key=\"content\"\n          animation={[\n            'quick',\n            {\n              opacity: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}\n          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}\n          space\n        >\n          <Dialog.Title>Edit profile</Dialog.Title>\n          <Dialog.Description>\n            Make changes to your profile here. Click save when you're done.\n          </Dialog.Description>\n          <Fieldset space=\"$4\" horizontal>\n            <Label width={160} justifyContent=\"flex-end\" htmlFor=\"name\">\n              Name\n            </Label>\n            <Input flex={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n          </Fieldset>\n          <Fieldset space=\"$4\" horizontal>\n            <Label width={160} justifyContent=\"flex-end\" htmlFor=\"username\">\n              <TooltipSimple label=\"Pick your favorite\" placement=\"bottom-start\">\n                <Paragraph>Food</Paragraph>\n              </TooltipSimple>\n            </Label>\n            <SelectDemo />\n          </Fieldset>\n\n          <YStack alignItems=\"flex-end\" marginTop=\"$2\">\n            <Dialog.Close displayWhenAdapted asChild>\n              <Button theme=\"alt1\" aria-label=\"Close\">\n                Save changes\n              </Button>\n            </Dialog.Close>\n          </YStack>\n\n          <Unspaced>\n            <Dialog.Close asChild>\n              <Button position=\"absolute\" top=\"$3\" right=\"$3\" size=\"$2\" circular icon={X} />\n            </Dialog.Close>\n          </Unspaced>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog>\n  )\n}\n"],
-  "mappings": "AAAA,OAAS,KAAAA,MAAS,wBAClB,OACE,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,YAAAC,EAEA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,UAAAC,MACK,UAEP,OAAS,cAAAC,MAAkB,eAEpB,SAASC,GAAa,CAC3B,MACE,CAACV,EAAO,MACN,CAACA,EAAO,QAAQ,QACd,CAACD,EAAO,YAAY,EAAnBA,EACH,EAFCC,EAAO,QAIR,CAACF,EAAM,KAAK,IAAK,SAAS,QACxB,CAACO,EAAM,QAAQ,IAAQ,MAAM,sBAC3B,CAACA,EAAM,MAAM,QAAQ,IAAK,MACxB,CAACP,EAAM,QAAS,EAClB,EAFCO,EAAM,MAGP,CAACA,EAAM,OAAQ,EACjB,EALCA,EAMH,EAPCP,EASD,CAACE,EAAO,OACN,CAACA,EAAO,QACN,IAAI,SACJ,UAAU,OACV,SAAS,GACT,YAAY,CAAE,QAAS,CAAE,EACzB,WAAW,CAAE,QAAS,CAAE,EAC1B,EAEA,CAACA,EAAO,QACN,SACA,QACA,IAAI,SACJ,WAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EACA,YAAY,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,EAAG,MAAO,EAAI,EACnD,WAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,GAAK,EAClD,MAEA,CAACA,EAAO,MAAM,YAAY,EAAzBA,EAAO,MACR,CAACA,EAAO,YAAY,+DAEpB,EAFCA,EAAO,YAGR,CAACC,EAAS,MAAM,IAAK,WACnB,CAACE,EAAM,OAAO,IAAK,eAAe,UAAW,QAAQ,OAAO,IAE5D,EAFCA,EAGD,CAACD,EAAM,MAAM,EAAG,GAAG,MAAO,aAAa,cAAe,EACxD,EALCD,EAMD,CAACA,EAAS,MAAM,IAAK,WACnB,CAACE,EAAM,OAAO,IAAK,eAAe,UAAW,QAAQ,WACnD,CAACG,EAAc,MAAM,oBAAqB,UAAU,eAClD,CAACF,EAAU,IAAI,EAAdA,EACH,EAFCE,EAGH,EAJCH,EAKD,CAACM,CAAW,EACd,EAPCR,EASD,CAACO,EAAO,WAAW,UAAW,UAAU,KACtC,CAACR,EAAO,MAAM,mBAAmB,QAC/B,CAACD,EAAO,MAAM,MAAO,WAAW,QAAQ,YAExC,EAFCA,EAGH,EAJCC,EAAO,MAKV,EANCQ,EAQD,CAACD,EACC,CAACP,EAAO,MAAM,QACZ,CAACD,EAAO,SAAS,UAAW,IAAI,IAAK,MAAM,IAAK,KAAK,IAAK,SAAS,MAAMF,EAAG,EAC9E,EAFCG,EAAO,MAGV,EAJCO,EAKH,EAhDCP,EAAO,QAiDV,EA1DCA,EAAO,OA2DV,EAzECA,EA2EL",
-  "names": ["X", "Adapt", "Button", "Dialog", "Fieldset", "Input", "Label", "Paragraph", "Sheet", "TooltipSimple", "Unspaced", "YStack", "SelectDemo", "DialogDemo"]
+  "mappings": "AAAA,SAAS,SAAS;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kBAAkB;AAEpB,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,QAAQ,QACd,CAAC,OAAO,YAAY,EAAnB,OACH,EAFC,OAAO;AAAA,IAIR,CAAC,MAAM,KAAK,KAAK,SAAS,QACxB,CAAC,MAAM,QAAQ,KAAQ,MAAM;AAAA,MAC3B,CAAC,MAAM,MAAM,QAAQ,KAAK,MACxB,CAAC,MAAM,SAAS,EAClB,EAFC,MAAM;AAAA,MAGP,CAAC,MAAM,QAAQ;AAAA,IACjB,EALC,MAMH,EAPC;AAAA,IASD,CAAC,OAAO;AAAA,MACN,CAAC,OAAO;AAAA,QACN,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,SAAS;AAAA,QACT,YAAY,EAAE,SAAS,EAAE;AAAA,QACzB,WAAW,EAAE,SAAS,EAAE;AAAA,MAC1B;AAAA,MAEA,CAAC,OAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA,IAAI;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,QACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,QAClD;AAAA;AAAA,QAEA,CAAC,OAAO,MAAM,YAAY,EAAzB,OAAO;AAAA,QACR,CAAC,OAAO,YAAY,+DAEpB,EAFC,OAAO;AAAA,QAGR,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,OAAO,KAAK,eAAe,WAAW,QAAQ,OAAO,IAE5D,EAFC;AAAA,UAGD,CAAC,MAAM,MAAM,GAAG,GAAG,OAAO,aAAa,eAAe;AAAA,QACxD,EALC;AAAA,QAMD,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,OAAO,KAAK,eAAe,WAAW,QAAQ,WACnD,CAAC,cAAc,MAAM,qBAAqB,UAAU,eAClD,CAAC,UAAU,IAAI,EAAd,UACH,EAFC,cAGH,EAJC;AAAA,UAKD,CAAC,WAAW;AAAA,QACd,EAPC;AAAA,QASD,CAAC,OAAO,WAAW,WAAW,UAAU,KACtC,CAAC,OAAO,MAAM,mBAAmB,QAC/B,CAAC,OAAO,MAAM,OAAO,WAAW,QAAQ,YAExC,EAFC,OAGH,EAJC,OAAO,MAKV,EANC;AAAA,QAQD,CAAC,SACC,CAAC,OAAO,MAAM,QACZ,CAAC,OAAO,SAAS,WAAW,IAAI,KAAK,MAAM,KAAK,KAAK,KAAK,SAAS,MAAM,GAAG,EAC9E,EAFC,OAAO,MAGV,EAJC;AAAA,MAKH,EAhDC,OAAO;AAAA,IAiDV,EA1DC,OAAO;AAAA,EA2DV,EAzEC;AA2EL;",
+  "names": []
 }

package/dist/jsx/DialogDemo.mjs

@@ -1,2 +1,66 @@
-import{X as P}from"@tamagui/lucide-icons";import{Adapt as F,Button as D,Dialog as C,Fieldset as T,Input as B,Label as $,Paragraph as A,Sheet as S,TooltipSimple as I,Unspaced as L,YStack as O}from"tamagui";import{SelectDemo as E}from"./SelectDemo";function H(){return<C modal><C.Trigger asChild><D>Edit Profile</D></C.Trigger><F when="sm"platform="touch"><S zIndex={2e5}modal dismissOnSnapToBottom><S.Frame padding="$4"space><F.Contents/></S.Frame><S.Overlay/></S></F><C.Portal><C.Overlay key="overlay"animation="quick"opacity={.5}enterStyle={{opacity:0}}exitStyle={{opacity:0}}/><C.Content bordered elevate key="content"animation={["quick",{opacity:{overshootClamping:!0}}]}enterStyle={{x:0,y:-20,opacity:0,scale:.9}}exitStyle={{x:0,y:10,opacity:0,scale:.95}}space><C.Title>Edit profile</C.Title><C.Description>Make changes to your profile here. Click save when you're done.</C.Description><T space="$4"horizontal><$ width={160}justifyContent="flex-end"htmlFor="name">Name</$><B flex={1}id="name"defaultValue="Nate Wienert"/></T><T space="$4"horizontal><$ width={160}justifyContent="flex-end"htmlFor="username"><I label="Pick your favorite"placement="bottom-start"><A>Food</A></I></$><E/></T><O alignItems="flex-end"marginTop="$2"><C.Close displayWhenAdapted asChild><D theme="alt1"aria-label="Close">Save changes</D></C.Close></O><L><C.Close asChild><D position="absolute"top="$3"right="$3"size="$2"circular icon={P}/></C.Close></L></C.Content></C.Portal></C>}export{H as DialogDemo};
+import { X } from "@tamagui/lucide-icons";
+import {
+  Adapt,
+  Button,
+  Dialog,
+  Fieldset,
+  Input,
+  Label,
+  Paragraph,
+  Sheet,
+  TooltipSimple,
+  Unspaced,
+  YStack
+} from "tamagui";
+import { SelectDemo } from "./SelectDemo";
+function DialogDemo() {
+  return <Dialog modal>
+    <Dialog.Trigger asChild><Button>Edit Profile</Button></Dialog.Trigger>
+    <Adapt when="sm" platform="touch"><Sheet zIndex={2e5} modal dismissOnSnapToBottom>
+      <Sheet.Frame padding="$4" space><Adapt.Contents /></Sheet.Frame>
+      <Sheet.Overlay />
+    </Sheet></Adapt>
+    <Dialog.Portal>
+      <Dialog.Overlay
+        key="overlay"
+        animation="quick"
+        opacity={0.5}
+        enterStyle={{ opacity: 0 }}
+        exitStyle={{ opacity: 0 }}
+      />
+      <Dialog.Content
+        bordered
+        elevate
+        key="content"
+        animation={[
+          "quick",
+          {
+            opacity: {
+              overshootClamping: true
+            }
+          }
+        ]}
+        enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
+        exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+        space
+      >
+        <Dialog.Title>Edit profile</Dialog.Title>
+        <Dialog.Description>Make changes to your profile here. Click save when you're done.</Dialog.Description>
+        <Fieldset space="$4" horizontal>
+          <Label width={160} justifyContent="flex-end" htmlFor="name">Name</Label>
+          <Input flex={1} id="name" defaultValue="Nate Wienert" />
+        </Fieldset>
+        <Fieldset space="$4" horizontal>
+          <Label width={160} justifyContent="flex-end" htmlFor="username"><TooltipSimple label="Pick your favorite" placement="bottom-start"><Paragraph>Food</Paragraph></TooltipSimple></Label>
+          <SelectDemo />
+        </Fieldset>
+        <YStack alignItems="flex-end" marginTop="$2"><Dialog.Close displayWhenAdapted asChild><Button theme="alt1" aria-label="Close">Save changes</Button></Dialog.Close></YStack>
+        <Unspaced><Dialog.Close asChild><Button position="absolute" top="$3" right="$3" size="$2" circular icon={X} /></Dialog.Close></Unspaced>
+      </Dialog.Content>
+    </Dialog.Portal>
+  </Dialog>;
+}
+export {
+  DialogDemo
+};
 //# sourceMappingURL=DialogDemo.mjs.map

package/dist/jsx/DialogDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/DialogDemo.tsx"],
   "sourcesContent": ["import { X } from '@tamagui/lucide-icons'\nimport {\n  Adapt,\n  Button,\n  Dialog,\n  Fieldset,\n  H2,\n  Input,\n  Label,\n  Paragraph,\n  Sheet,\n  TooltipSimple,\n  Unspaced,\n  YStack,\n} from 'tamagui'\n\nimport { SelectDemo } from './SelectDemo'\n\nexport function DialogDemo() {\n  return (\n    <Dialog modal>\n      <Dialog.Trigger asChild>\n        <Button>Edit Profile</Button>\n      </Dialog.Trigger>\n\n      <Adapt when=\"sm\" platform=\"touch\">\n        <Sheet zIndex={200000} modal dismissOnSnapToBottom>\n          <Sheet.Frame padding=\"$4\" space>\n            <Adapt.Contents />\n          </Sheet.Frame>\n          <Sheet.Overlay />\n        </Sheet>\n      </Adapt>\n\n      <Dialog.Portal>\n        <Dialog.Overlay\n          key=\"overlay\"\n          animation=\"quick\"\n          opacity={0.5}\n          enterStyle={{ opacity: 0 }}\n          exitStyle={{ opacity: 0 }}\n        />\n\n        <Dialog.Content\n          bordered\n          elevate\n          key=\"content\"\n          animation={[\n            'quick',\n            {\n              opacity: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}\n          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}\n          space\n        >\n          <Dialog.Title>Edit profile</Dialog.Title>\n          <Dialog.Description>\n            Make changes to your profile here. Click save when you're done.\n          </Dialog.Description>\n          <Fieldset space=\"$4\" horizontal>\n            <Label width={160} justifyContent=\"flex-end\" htmlFor=\"name\">\n              Name\n            </Label>\n            <Input flex={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n          </Fieldset>\n          <Fieldset space=\"$4\" horizontal>\n            <Label width={160} justifyContent=\"flex-end\" htmlFor=\"username\">\n              <TooltipSimple label=\"Pick your favorite\" placement=\"bottom-start\">\n                <Paragraph>Food</Paragraph>\n              </TooltipSimple>\n            </Label>\n            <SelectDemo />\n          </Fieldset>\n\n          <YStack alignItems=\"flex-end\" marginTop=\"$2\">\n            <Dialog.Close displayWhenAdapted asChild>\n              <Button theme=\"alt1\" aria-label=\"Close\">\n                Save changes\n              </Button>\n            </Dialog.Close>\n          </YStack>\n\n          <Unspaced>\n            <Dialog.Close asChild>\n              <Button position=\"absolute\" top=\"$3\" right=\"$3\" size=\"$2\" circular icon={X} />\n            </Dialog.Close>\n          </Unspaced>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog>\n  )\n}\n"],
-  "mappings": "AAAA,OAAS,KAAAA,MAAS,wBAClB,OACE,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,YAAAC,EAEA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,UAAAC,MACK,UAEP,OAAS,cAAAC,MAAkB,eAEpB,SAASC,GAAa,CAC3B,MACE,CAACV,EAAO,MACN,CAACA,EAAO,QAAQ,QACd,CAACD,EAAO,YAAY,EAAnBA,EACH,EAFCC,EAAO,QAIR,CAACF,EAAM,KAAK,IAAK,SAAS,QACxB,CAACO,EAAM,QAAQ,IAAQ,MAAM,sBAC3B,CAACA,EAAM,MAAM,QAAQ,IAAK,MACxB,CAACP,EAAM,QAAS,EAClB,EAFCO,EAAM,MAGP,CAACA,EAAM,OAAQ,EACjB,EALCA,EAMH,EAPCP,EASD,CAACE,EAAO,OACN,CAACA,EAAO,QACN,IAAI,SACJ,UAAU,OACV,SAAS,GACT,YAAY,CAAE,QAAS,CAAE,EACzB,WAAW,CAAE,QAAS,CAAE,EAC1B,EAEA,CAACA,EAAO,QACN,SACA,QACA,IAAI,SACJ,WAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EACA,YAAY,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,EAAG,MAAO,EAAI,EACnD,WAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,GAAK,EAClD,MAEA,CAACA,EAAO,MAAM,YAAY,EAAzBA,EAAO,MACR,CAACA,EAAO,YAAY,+DAEpB,EAFCA,EAAO,YAGR,CAACC,EAAS,MAAM,IAAK,WACnB,CAACE,EAAM,OAAO,IAAK,eAAe,UAAW,QAAQ,OAAO,IAE5D,EAFCA,EAGD,CAACD,EAAM,MAAM,EAAG,GAAG,MAAO,aAAa,cAAe,EACxD,EALCD,EAMD,CAACA,EAAS,MAAM,IAAK,WACnB,CAACE,EAAM,OAAO,IAAK,eAAe,UAAW,QAAQ,WACnD,CAACG,EAAc,MAAM,oBAAqB,UAAU,eAClD,CAACF,EAAU,IAAI,EAAdA,EACH,EAFCE,EAGH,EAJCH,EAKD,CAACM,CAAW,EACd,EAPCR,EASD,CAACO,EAAO,WAAW,UAAW,UAAU,KACtC,CAACR,EAAO,MAAM,mBAAmB,QAC/B,CAACD,EAAO,MAAM,MAAO,WAAW,QAAQ,YAExC,EAFCA,EAGH,EAJCC,EAAO,MAKV,EANCQ,EAQD,CAACD,EACC,CAACP,EAAO,MAAM,QACZ,CAACD,EAAO,SAAS,UAAW,IAAI,IAAK,MAAM,IAAK,KAAK,IAAK,SAAS,MAAMF,EAAG,EAC9E,EAFCG,EAAO,MAGV,EAJCO,EAKH,EAhDCP,EAAO,QAiDV,EA1DCA,EAAO,OA2DV,EAzECA,EA2EL",
-  "names": ["X", "Adapt", "Button", "Dialog", "Fieldset", "Input", "Label", "Paragraph", "Sheet", "TooltipSimple", "Unspaced", "YStack", "SelectDemo", "DialogDemo"]
+  "mappings": "AAAA,SAAS,SAAS;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kBAAkB;AAEpB,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,QAAQ,QACd,CAAC,OAAO,YAAY,EAAnB,OACH,EAFC,OAAO;AAAA,IAIR,CAAC,MAAM,KAAK,KAAK,SAAS,QACxB,CAAC,MAAM,QAAQ,KAAQ,MAAM;AAAA,MAC3B,CAAC,MAAM,MAAM,QAAQ,KAAK,MACxB,CAAC,MAAM,SAAS,EAClB,EAFC,MAAM;AAAA,MAGP,CAAC,MAAM,QAAQ;AAAA,IACjB,EALC,MAMH,EAPC;AAAA,IASD,CAAC,OAAO;AAAA,MACN,CAAC,OAAO;AAAA,QACN,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,SAAS;AAAA,QACT,YAAY,EAAE,SAAS,EAAE;AAAA,QACzB,WAAW,EAAE,SAAS,EAAE;AAAA,MAC1B;AAAA,MAEA,CAAC,OAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA,IAAI;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,QACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,QAClD;AAAA;AAAA,QAEA,CAAC,OAAO,MAAM,YAAY,EAAzB,OAAO;AAAA,QACR,CAAC,OAAO,YAAY,+DAEpB,EAFC,OAAO;AAAA,QAGR,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,OAAO,KAAK,eAAe,WAAW,QAAQ,OAAO,IAE5D,EAFC;AAAA,UAGD,CAAC,MAAM,MAAM,GAAG,GAAG,OAAO,aAAa,eAAe;AAAA,QACxD,EALC;AAAA,QAMD,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,OAAO,KAAK,eAAe,WAAW,QAAQ,WACnD,CAAC,cAAc,MAAM,qBAAqB,UAAU,eAClD,CAAC,UAAU,IAAI,EAAd,UACH,EAFC,cAGH,EAJC;AAAA,UAKD,CAAC,WAAW;AAAA,QACd,EAPC;AAAA,QASD,CAAC,OAAO,WAAW,WAAW,UAAU,KACtC,CAAC,OAAO,MAAM,mBAAmB,QAC/B,CAAC,OAAO,MAAM,OAAO,WAAW,QAAQ,YAExC,EAFC,OAGH,EAJC,OAAO,MAKV,EANC;AAAA,QAQD,CAAC,SACC,CAAC,OAAO,MAAM,QACZ,CAAC,OAAO,SAAS,WAAW,IAAI,KAAK,MAAM,KAAK,KAAK,KAAK,SAAS,MAAM,GAAG,EAC9E,EAFC,OAAO,MAGV,EAJC;AAAA,MAKH,EAhDC,OAAO;AAAA,IAiDV,EA1DC,OAAO;AAAA,EA2DV,EAzEC;AA2EL;",
+  "names": []
 }

package/dist/jsx/FormsDemo.js

@@ -1,2 +1,31 @@
-import{useEffect as k,useState as T}from"react";import{Button as C,Form as S,H4 as F,Spinner as $}from"tamagui";function I(h){const[t,o]=T("off");return k(()=>{if(t==="submitting"){const l=setTimeout(()=>o("off"),2e3);return()=>{clearTimeout(l)}}},[t]),<S alignItems="center"minWidth={300}space onSubmit={()=>o("submitting")}borderWidth={1}borderRadius="$4"backgroundColor="$background"borderColor="$borderColor"padding="$8"><F>{t[0].toUpperCase()+t.slice(1)}</F><S.Trigger asChild disabled={t!=="off"}><C icon={t==="submitting"?()=><$/>:void 0}>Submit</C></S.Trigger></S>}export{I as FormsDemo};
+import { useEffect, useState } from "react";
+import { Button, Form, H4, Spinner } from "tamagui";
+function FormsDemo(props) {
+  const [status, setStatus] = useState("off");
+  useEffect(() => {
+    if (status === "submitting") {
+      const timer = setTimeout(() => setStatus("off"), 2e3);
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [status]);
+  return <Form
+    alignItems="center"
+    minWidth={300}
+    space
+    onSubmit={() => setStatus("submitting")}
+    borderWidth={1}
+    borderRadius="$4"
+    backgroundColor="$background"
+    borderColor="$borderColor"
+    padding="$8"
+  >
+    <H4>{status[0].toUpperCase() + status.slice(1)}</H4>
+    <Form.Trigger asChild disabled={status !== "off"}><Button icon={status === "submitting" ? () => <Spinner /> : void 0}>Submit</Button></Form.Trigger>
+  </Form>;
+}
+export {
+  FormsDemo
+};
 //# sourceMappingURL=FormsDemo.js.map

package/dist/jsx/FormsDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/FormsDemo.tsx"],
   "sourcesContent": ["import { stat } from 'fs'\n\nimport { useEffect, useState } from 'react'\nimport { Button, Form, H4, SizeTokens, Spinner, XStack, YStack } from 'tamagui'\n\nexport function FormsDemo(props: { size: SizeTokens }) {\n  const [status, setStatus] = useState<'off' | 'submitting' | 'submitted'>('off')\n\n  useEffect(() => {\n    if (status === 'submitting') {\n      const timer = setTimeout(() => setStatus('off'), 2000)\n      return () => {\n        clearTimeout(timer)\n      }\n    }\n  }, [status])\n\n  return (\n    <Form\n      alignItems=\"center\"\n      minWidth={300}\n      space\n      onSubmit={() => setStatus('submitting')}\n      borderWidth={1}\n      borderRadius=\"$4\"\n      backgroundColor=\"$background\"\n      borderColor=\"$borderColor\"\n      padding=\"$8\"\n    >\n      <H4>{status[0].toUpperCase() + status.slice(1)}</H4>\n\n      <Form.Trigger asChild disabled={status !== 'off'}>\n        <Button icon={status === 'submitting' ? () => <Spinner /> : undefined}>\n          Submit\n        </Button>\n      </Form.Trigger>\n    </Form>\n  )\n}\n"],
-  "mappings": "AAEA,OAAS,aAAAA,EAAW,YAAAC,MAAgB,QACpC,OAAS,UAAAC,EAAQ,QAAAC,EAAM,MAAAC,EAAgB,WAAAC,MAA+B,UAE/D,SAASC,EAAUC,EAA6B,CACrD,KAAM,CAACC,EAAQC,CAAS,EAAIR,EAA6C,KAAK,EAE9E,OAAAD,EAAU,IAAM,CACd,GAAIQ,IAAW,aAAc,CAC3B,MAAME,EAAQ,WAAW,IAAMD,EAAU,KAAK,EAAG,GAAI,EACrD,MAAO,IAAM,CACX,aAAaC,CAAK,CACpB,CACF,CACF,EAAG,CAACF,CAAM,CAAC,EAGT,CAACL,EACC,WAAW,QACX,UAAU,IACV,MACA,UAAU,IAAMM,EAAU,YAAY,EACtC,aAAa,EACb,aAAa,IACb,gBAAgB,aAChB,YAAY,cACZ,QAAQ,KAER,CAACL,GAAII,EAAO,CAAC,EAAE,YAAY,EAAIA,EAAO,MAAM,CAAC,EAAE,EAA9CJ,EAED,CAACD,EAAK,QAAQ,QAAQ,UAAUK,IAAW,OACzC,CAACN,EAAO,MAAMM,IAAW,aAAe,IAAM,CAACH,CAAQ,GAAK,QAAW,MAEvE,EAFCH,EAGH,EAJCC,EAAK,QAKR,EAlBCA,EAoBL",
-  "names": ["useEffect", "useState", "Button", "Form", "H4", "Spinner", "FormsDemo", "props", "status", "setStatus", "timer"]
+  "mappings": "AAEA,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,MAAM,IAAgB,eAA+B;AAE/D,SAAS,UAAU,OAA6B;AACrD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6C,KAAK;AAE9E,YAAU,MAAM;AACd,QAAI,WAAW,cAAc;AAC3B,YAAM,QAAQ,WAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AACrD,aAAO,MAAM;AACX,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,CAAC;AAAA,IACC,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,UAAU,MAAM,UAAU,YAAY;AAAA,IACtC,aAAa;AAAA,IACb,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA;AAAA,IAER,CAAC,IAAI,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,EAAE,EAA9C;AAAA,IAED,CAAC,KAAK,QAAQ,QAAQ,UAAU,WAAW,OACzC,CAAC,OAAO,MAAM,WAAW,eAAe,MAAM,CAAC,QAAQ,KAAK,QAAW,MAEvE,EAFC,OAGH,EAJC,KAAK;AAAA,EAKR,EAlBC;AAoBL;",
+  "names": []
 }

package/dist/jsx/FormsDemo.mjs

@@ -1,2 +1,31 @@
-import{useEffect as k,useState as T}from"react";import{Button as C,Form as S,H4 as F,Spinner as $}from"tamagui";function I(h){const[t,o]=T("off");return k(()=>{if(t==="submitting"){const l=setTimeout(()=>o("off"),2e3);return()=>{clearTimeout(l)}}},[t]),<S alignItems="center"minWidth={300}space onSubmit={()=>o("submitting")}borderWidth={1}borderRadius="$4"backgroundColor="$background"borderColor="$borderColor"padding="$8"><F>{t[0].toUpperCase()+t.slice(1)}</F><S.Trigger asChild disabled={t!=="off"}><C icon={t==="submitting"?()=><$/>:void 0}>Submit</C></S.Trigger></S>}export{I as FormsDemo};
+import { useEffect, useState } from "react";
+import { Button, Form, H4, Spinner } from "tamagui";
+function FormsDemo(props) {
+  const [status, setStatus] = useState("off");
+  useEffect(() => {
+    if (status === "submitting") {
+      const timer = setTimeout(() => setStatus("off"), 2e3);
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [status]);
+  return <Form
+    alignItems="center"
+    minWidth={300}
+    space
+    onSubmit={() => setStatus("submitting")}
+    borderWidth={1}
+    borderRadius="$4"
+    backgroundColor="$background"
+    borderColor="$borderColor"
+    padding="$8"
+  >
+    <H4>{status[0].toUpperCase() + status.slice(1)}</H4>
+    <Form.Trigger asChild disabled={status !== "off"}><Button icon={status === "submitting" ? () => <Spinner /> : void 0}>Submit</Button></Form.Trigger>
+  </Form>;
+}
+export {
+  FormsDemo
+};
 //# sourceMappingURL=FormsDemo.mjs.map