@tamagui/demos 1.14.0 → 1.14.2

package/dist/esm/ColorsDemo.js

@@ -1,2 +1,98 @@
-import{jsx as t,jsxs as c}from"react/jsx-runtime";import{H2 as k,Paragraph as $,Separator as h,Square as u,XStack as i,YStack as s,getTokens as m,getVariableValue as d}from"tamagui";const n=["orange","yellow","green","blue","purple","pink","red"];function y(){const a=m({prefixed:!1}).color,[o,r]=[g(a),g(a,!0)];return c(s,{marginTop:"$4",space:"$8",children:[t(p,{title:"Light",colors:o}),t(h,{}),t(p,{title:"Dark",colors:r})]})}function p({title:a,colors:o}){return c(s,{space:!0,$sm:{space:"$2"},children:[t(k,{size:"$2",children:a}),c(i,{space:!0,alignSelf:"center",children:[c(s,{space:!0,$sm:{space:"$2"},als:"center",children:[o.map((r,e)=>t(i,{space:"$2",children:r.map(l=>t(u,{borderRadius:"$2",size:"$4",height:"$4",borderWidth:1,backgroundColor:d(l),borderColor:"$color7",$sm:{size:"$2"},$xs:{size:"$1"}},`${l.key}${e}`))},e)),t(i,{space:"$2",alignSelf:"center",children:new Array(13).fill(0).slice(1).map((r,e)=>t($,{color:"$color10",textAlign:"center",width:"$4",$sm:{width:"$2"},$xs:{width:"$1"},children:e},e))})]}),t(s,{space:"$4",marginTop:"$2",children:n.map(r=>t($,{theme:r,color:"$color10",height:"$4",rotate:"-10deg",$sm:{height:"$2"},$xs:{height:"$1"},children:r},r))})]})]})}function g(a,o=!1){return n.map(r=>Object.keys(a).filter(e=>e.startsWith(r)&&(o?e.endsWith("Dark"):!e.endsWith("Dark"))).map(e=>a[e]))}export{y as ColorsDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+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 /* @__PURE__ */ jsxs(YStack, { marginTop: "$4", space: "$8", children: [
+    /* @__PURE__ */ jsx(ColorsRow, { title: "Light", colors: colorsLight }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(ColorsRow, { title: "Dark", colors: colorsDark })
+  ] });
+}
+function ColorsRow({ title, colors }) {
+  return /* @__PURE__ */ jsxs(YStack, { space: true, $sm: { space: "$2" }, children: [
+    /* @__PURE__ */ jsx(H2, { size: "$2", children: title }),
+    /* @__PURE__ */ jsxs(XStack, { space: true, alignSelf: "center", children: [
+      /* @__PURE__ */ jsxs(YStack, { space: true, $sm: { space: "$2" }, als: "center", children: [
+        colors.map((group, index) => {
+          return /* @__PURE__ */ jsx(XStack, { space: "$2", children: group.map((color) => {
+            return /* @__PURE__ */ jsx(
+              Square,
+              {
+                borderRadius: "$2",
+                size: "$4",
+                height: "$4",
+                borderWidth: 1,
+                backgroundColor: getVariableValue(color),
+                borderColor: "$color7",
+                $sm: {
+                  size: "$2"
+                },
+                $xs: {
+                  size: "$1"
+                }
+              },
+              `${color.key}${index}`
+            );
+          }) }, index);
+        }),
+        /* @__PURE__ */ jsx(XStack, { space: "$2", alignSelf: "center", children: new Array(13).fill(0).slice(1).map((_, index) => {
+          return /* @__PURE__ */ jsx(
+            Paragraph,
+            {
+              color: "$color10",
+              textAlign: "center",
+              width: "$4",
+              $sm: {
+                width: "$2"
+              },
+              $xs: {
+                width: "$1"
+              },
+              children: index
+            },
+            index
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx(YStack, { space: "$4", marginTop: "$2", children: colorGroups.map((name) => /* @__PURE__ */ jsx(
+        Paragraph,
+        {
+          theme: name,
+          color: "$color10",
+          height: "$4",
+          rotate: "-10deg",
+          $sm: {
+            height: "$2"
+          },
+          $xs: {
+            height: "$1"
+          },
+          children: name
+        },
+        name
+      )) })
+    ] })
+  ] });
+}
+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/esm/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": "AAmBI,OACE,OAAAA,EADF,QAAAC,MAAA,oBAlBJ,OACE,MAAAC,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,OACEX,EAACM,EAAA,CAAO,UAAU,KAAK,MAAM,KAC3B,UAAAP,EAACgB,EAAA,CAAU,MAAM,QAAQ,OAAQH,EAAa,EAC9Cb,EAACI,EAAA,EAAU,EACXJ,EAACgB,EAAA,CAAU,MAAM,OAAO,OAAQF,EAAY,GAC9C,CAEJ,CAEA,SAASE,EAAU,CAAE,MAAAC,EAAO,OAAAL,CAAO,EAA4C,CAC7E,OACEX,EAACM,EAAA,CAAO,MAAK,GAAC,IAAK,CAAE,MAAO,IAAK,EAC/B,UAAAP,EAACE,EAAA,CAAG,KAAK,KAAM,SAAAe,EAAM,EAErBhB,EAACK,EAAA,CAAO,MAAK,GAAC,UAAU,SACtB,UAAAL,EAACM,EAAA,CAAO,MAAK,GAAC,IAAK,CAAE,MAAO,IAAK,EAAG,IAAI,SACrC,UAAAK,EAAO,IAAI,CAACM,EAAOC,IAEhBnB,EAACM,EAAA,CAAO,MAAM,KACX,SAAAY,EAAM,IAAKE,GAERpB,EAACK,EAAA,CAEC,aAAa,KACb,KAAK,KACL,OAAO,KACP,YAAa,EACb,gBAAiBI,EAAiBW,CAAK,EACvC,YAAY,UACZ,IAAK,CACH,KAAM,IACR,EACA,IAAK,CACH,KAAM,IACR,GAZK,GAAGA,EAAM,MAAMD,GAatB,CAEH,GAnBqBA,CAoBxB,CAEH,EAEDnB,EAACM,EAAA,CAAO,MAAM,KAAK,UAAU,SAC1B,aAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAACe,EAAGF,IAELnB,EAACG,EAAA,CACC,MAAM,WACN,UAAU,SACV,MAAM,KACN,IAAK,CACJ,MAAM,IACP,EACA,IAAK,CACH,MAAO,IACT,EAGC,SAAAgB,GAFIA,CAGP,CAEH,EACL,GACF,EAEAnB,EAACO,EAAA,CAAO,MAAM,KAAK,UAAU,KAC1B,SAAAG,EAAY,IAAKY,GAChBtB,EAACG,EAAA,CACC,MAAOmB,EACP,MAAM,WACN,OAAO,KACP,OAAO,SACP,IAAK,CACH,OAAQ,IACV,EACA,IAAK,CACH,OAAQ,IACV,EAGC,SAAAA,GAFIA,CAGP,CACD,EACH,GACF,GACF,CAEJ,CAEA,SAASP,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": ["jsx", "jsxs", "H2", "Paragraph", "Separator", "Square", "XStack", "YStack", "getTokens", "getVariableValue", "colorGroups", "ColorsDemo", "colors", "colorsLight", "colorsDark", "getColors", "ColorsRow", "title", "group", "index", "color", "_", "name", "dark", "key"]
+  "mappings": "AAmBI,SACE,KADF;AAlBJ;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,qBAAC,UAAO,WAAU,MAAK,OAAM,MAC3B;AAAA,wBAAC,aAAU,OAAM,SAAQ,QAAQ,aAAa;AAAA,IAC9C,oBAAC,aAAU;AAAA,IACX,oBAAC,aAAU,OAAM,QAAO,QAAQ,YAAY;AAAA,KAC9C;AAEJ;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,qBAAC,UAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAC/B;AAAA,wBAAC,MAAG,MAAK,MAAM,iBAAM;AAAA,IAErB,qBAAC,UAAO,OAAK,MAAC,WAAU,UACtB;AAAA,2BAAC,UAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAAG,KAAI,UACrC;AAAA,eAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,oBAAC,UAAO,OAAM,MACX,gBAAM,IAAI,CAAC,UAAU;AACpB,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,cAAa;AAAA,gBACb,MAAK;AAAA,gBACL,QAAO;AAAA,gBACP,aAAa;AAAA,gBACb,iBAAiB,iBAAiB,KAAK;AAAA,gBACvC,aAAY;AAAA,gBACZ,KAAK;AAAA,kBACH,MAAM;AAAA,gBACR;AAAA,gBACA,KAAK;AAAA,kBACH,MAAM;AAAA,gBACR;AAAA;AAAA,cAZK,GAAG,MAAM,MAAM;AAAA,YAatB;AAAA,UAEJ,CAAC,KAnBqB,KAoBxB;AAAA,QAEJ,CAAC;AAAA,QAED,oBAAC,UAAO,OAAM,MAAK,WAAU,UAC1B,cAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAAU;AACjB,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,WAAU;AAAA,cACV,OAAM;AAAA,cACN,KAAK;AAAA,gBACJ,OAAM;AAAA,cACP;AAAA,cACA,KAAK;AAAA,gBACH,OAAO;AAAA,cACT;AAAA,cAGC;AAAA;AAAA,YAFI;AAAA,UAGP;AAAA,QAEJ,CAAC,GACL;AAAA,SACF;AAAA,MAEA,oBAAC,UAAO,OAAM,MAAK,WAAU,MAC1B,sBAAY,IAAI,CAAC,SAChB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,OAAM;AAAA,UACN,QAAO;AAAA,UACP,QAAO;AAAA,UACP,KAAK;AAAA,YACH,QAAQ;AAAA,UACV;AAAA,UACA,KAAK;AAAA,YACH,QAAQ;AAAA,UACV;AAAA,UAGC;AAAA;AAAA,QAFI;AAAA,MAGP,CACD,GACH;AAAA,OACF;AAAA,KACF;AAEJ;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/esm/ColorsDemo.mjs

@@ -1,2 +1,98 @@
-import{jsx as t,jsxs as c}from"react/jsx-runtime";import{H2 as k,Paragraph as $,Separator as h,Square as u,XStack as i,YStack as s,getTokens as m,getVariableValue as d}from"tamagui";const n=["orange","yellow","green","blue","purple","pink","red"];function y(){const a=m({prefixed:!1}).color,[o,r]=[g(a),g(a,!0)];return c(s,{marginTop:"$4",space:"$8",children:[t(p,{title:"Light",colors:o}),t(h,{}),t(p,{title:"Dark",colors:r})]})}function p({title:a,colors:o}){return c(s,{space:!0,$sm:{space:"$2"},children:[t(k,{size:"$2",children:a}),c(i,{space:!0,alignSelf:"center",children:[c(s,{space:!0,$sm:{space:"$2"},als:"center",children:[o.map((r,e)=>t(i,{space:"$2",children:r.map(l=>t(u,{borderRadius:"$2",size:"$4",height:"$4",borderWidth:1,backgroundColor:d(l),borderColor:"$color7",$sm:{size:"$2"},$xs:{size:"$1"}},`${l.key}${e}`))},e)),t(i,{space:"$2",alignSelf:"center",children:new Array(13).fill(0).slice(1).map((r,e)=>t($,{color:"$color10",textAlign:"center",width:"$4",$sm:{width:"$2"},$xs:{width:"$1"},children:e},e))})]}),t(s,{space:"$4",marginTop:"$2",children:n.map(r=>t($,{theme:r,color:"$color10",height:"$4",rotate:"-10deg",$sm:{height:"$2"},$xs:{height:"$1"},children:r},r))})]})]})}function g(a,o=!1){return n.map(r=>Object.keys(a).filter(e=>e.startsWith(r)&&(o?e.endsWith("Dark"):!e.endsWith("Dark"))).map(e=>a[e]))}export{y as ColorsDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+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 /* @__PURE__ */ jsxs(YStack, { marginTop: "$4", space: "$8", children: [
+    /* @__PURE__ */ jsx(ColorsRow, { title: "Light", colors: colorsLight }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(ColorsRow, { title: "Dark", colors: colorsDark })
+  ] });
+}
+function ColorsRow({ title, colors }) {
+  return /* @__PURE__ */ jsxs(YStack, { space: true, $sm: { space: "$2" }, children: [
+    /* @__PURE__ */ jsx(H2, { size: "$2", children: title }),
+    /* @__PURE__ */ jsxs(XStack, { space: true, alignSelf: "center", children: [
+      /* @__PURE__ */ jsxs(YStack, { space: true, $sm: { space: "$2" }, als: "center", children: [
+        colors.map((group, index) => {
+          return /* @__PURE__ */ jsx(XStack, { space: "$2", children: group.map((color) => {
+            return /* @__PURE__ */ jsx(
+              Square,
+              {
+                borderRadius: "$2",
+                size: "$4",
+                height: "$4",
+                borderWidth: 1,
+                backgroundColor: getVariableValue(color),
+                borderColor: "$color7",
+                $sm: {
+                  size: "$2"
+                },
+                $xs: {
+                  size: "$1"
+                }
+              },
+              `${color.key}${index}`
+            );
+          }) }, index);
+        }),
+        /* @__PURE__ */ jsx(XStack, { space: "$2", alignSelf: "center", children: new Array(13).fill(0).slice(1).map((_, index) => {
+          return /* @__PURE__ */ jsx(
+            Paragraph,
+            {
+              color: "$color10",
+              textAlign: "center",
+              width: "$4",
+              $sm: {
+                width: "$2"
+              },
+              $xs: {
+                width: "$1"
+              },
+              children: index
+            },
+            index
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx(YStack, { space: "$4", marginTop: "$2", children: colorGroups.map((name) => /* @__PURE__ */ jsx(
+        Paragraph,
+        {
+          theme: name,
+          color: "$color10",
+          height: "$4",
+          rotate: "-10deg",
+          $sm: {
+            height: "$2"
+          },
+          $xs: {
+            height: "$1"
+          },
+          children: name
+        },
+        name
+      )) })
+    ] })
+  ] });
+}
+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/esm/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": "AAmBI,OACE,OAAAA,EADF,QAAAC,MAAA,oBAlBJ,OACE,MAAAC,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,OACEX,EAACM,EAAA,CAAO,UAAU,KAAK,MAAM,KAC3B,UAAAP,EAACgB,EAAA,CAAU,MAAM,QAAQ,OAAQH,EAAa,EAC9Cb,EAACI,EAAA,EAAU,EACXJ,EAACgB,EAAA,CAAU,MAAM,OAAO,OAAQF,EAAY,GAC9C,CAEJ,CAEA,SAASE,EAAU,CAAE,MAAAC,EAAO,OAAAL,CAAO,EAA4C,CAC7E,OACEX,EAACM,EAAA,CAAO,MAAK,GAAC,IAAK,CAAE,MAAO,IAAK,EAC/B,UAAAP,EAACE,EAAA,CAAG,KAAK,KAAM,SAAAe,EAAM,EAErBhB,EAACK,EAAA,CAAO,MAAK,GAAC,UAAU,SACtB,UAAAL,EAACM,EAAA,CAAO,MAAK,GAAC,IAAK,CAAE,MAAO,IAAK,EAAG,IAAI,SACrC,UAAAK,EAAO,IAAI,CAACM,EAAOC,IAEhBnB,EAACM,EAAA,CAAO,MAAM,KACX,SAAAY,EAAM,IAAKE,GAERpB,EAACK,EAAA,CAEC,aAAa,KACb,KAAK,KACL,OAAO,KACP,YAAa,EACb,gBAAiBI,EAAiBW,CAAK,EACvC,YAAY,UACZ,IAAK,CACH,KAAM,IACR,EACA,IAAK,CACH,KAAM,IACR,GAZK,GAAGA,EAAM,MAAMD,GAatB,CAEH,GAnBqBA,CAoBxB,CAEH,EAEDnB,EAACM,EAAA,CAAO,MAAM,KAAK,UAAU,SAC1B,aAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAACe,EAAGF,IAELnB,EAACG,EAAA,CACC,MAAM,WACN,UAAU,SACV,MAAM,KACN,IAAK,CACJ,MAAM,IACP,EACA,IAAK,CACH,MAAO,IACT,EAGC,SAAAgB,GAFIA,CAGP,CAEH,EACL,GACF,EAEAnB,EAACO,EAAA,CAAO,MAAM,KAAK,UAAU,KAC1B,SAAAG,EAAY,IAAKY,GAChBtB,EAACG,EAAA,CACC,MAAOmB,EACP,MAAM,WACN,OAAO,KACP,OAAO,SACP,IAAK,CACH,OAAQ,IACV,EACA,IAAK,CACH,OAAQ,IACV,EAGC,SAAAA,GAFIA,CAGP,CACD,EACH,GACF,GACF,CAEJ,CAEA,SAASP,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": ["jsx", "jsxs", "H2", "Paragraph", "Separator", "Square", "XStack", "YStack", "getTokens", "getVariableValue", "colorGroups", "ColorsDemo", "colors", "colorsLight", "colorsDark", "getColors", "ColorsRow", "title", "group", "index", "color", "_", "name", "dark", "key"]
+  "mappings": "AAmBI,SACE,KADF;AAlBJ;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,qBAAC,UAAO,WAAU,MAAK,OAAM,MAC3B;AAAA,wBAAC,aAAU,OAAM,SAAQ,QAAQ,aAAa;AAAA,IAC9C,oBAAC,aAAU;AAAA,IACX,oBAAC,aAAU,OAAM,QAAO,QAAQ,YAAY;AAAA,KAC9C;AAEJ;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,qBAAC,UAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAC/B;AAAA,wBAAC,MAAG,MAAK,MAAM,iBAAM;AAAA,IAErB,qBAAC,UAAO,OAAK,MAAC,WAAU,UACtB;AAAA,2BAAC,UAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAAG,KAAI,UACrC;AAAA,eAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,oBAAC,UAAO,OAAM,MACX,gBAAM,IAAI,CAAC,UAAU;AACpB,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,cAAa;AAAA,gBACb,MAAK;AAAA,gBACL,QAAO;AAAA,gBACP,aAAa;AAAA,gBACb,iBAAiB,iBAAiB,KAAK;AAAA,gBACvC,aAAY;AAAA,gBACZ,KAAK;AAAA,kBACH,MAAM;AAAA,gBACR;AAAA,gBACA,KAAK;AAAA,kBACH,MAAM;AAAA,gBACR;AAAA;AAAA,cAZK,GAAG,MAAM,MAAM;AAAA,YAatB;AAAA,UAEJ,CAAC,KAnBqB,KAoBxB;AAAA,QAEJ,CAAC;AAAA,QAED,oBAAC,UAAO,OAAM,MAAK,WAAU,UAC1B,cAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAAU;AACjB,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,WAAU;AAAA,cACV,OAAM;AAAA,cACN,KAAK;AAAA,gBACJ,OAAM;AAAA,cACP;AAAA,cACA,KAAK;AAAA,gBACH,OAAO;AAAA,cACT;AAAA,cAGC;AAAA;AAAA,YAFI;AAAA,UAGP;AAAA,QAEJ,CAAC,GACL;AAAA,SACF;AAAA,MAEA,oBAAC,UAAO,OAAM,MAAK,WAAU,MAC1B,sBAAY,IAAI,CAAC,SAChB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,OAAM;AAAA,UACN,QAAO;AAAA,UACP,QAAO;AAAA,UACP,KAAK;AAAA,YACH,QAAQ;AAAA,UACV;AAAA,UACA,KAAK;AAAA,YACH,QAAQ;AAAA,UACV;AAAA,UAGC;AAAA;AAAA,QAFI;AAAA,MAGP,CACD,GACH;AAAA,OACF;AAAA,KACF;AAEJ;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/esm/DialogDemo.js

@@ -1,2 +1,74 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{X as p}from"@tamagui/lucide-icons";import{Adapt as l,Button as a,Dialog as t,Fieldset as n,Input as s,Label as r,Paragraph as d,Sheet as i,TooltipSimple as c,Unspaced as m,YStack as h}from"tamagui";import{SelectDemo as g}from"./SelectDemo";function D(){return o(t,{modal:!0,children:[e(t.Trigger,{asChild:!0,children:e(a,{children:"Edit Profile"})}),e(l,{when:"sm",platform:"touch",children:o(i,{zIndex:2e5,modal:!0,dismissOnSnapToBottom:!0,children:[e(i.Frame,{padding:"$4",space:!0,children:e(l.Contents,{})}),e(i.Overlay,{})]})}),o(t.Portal,{children:[e(t.Overlay,{animation:"quick",opacity:.5,enterStyle:{opacity:0},exitStyle:{opacity:0}},"overlay"),o(t.Content,{bordered:!0,elevate:!0,animation:["quick",{opacity:{overshootClamping:!0}}],enterStyle:{x:0,y:-20,opacity:0,scale:.9},exitStyle:{x:0,y:10,opacity:0,scale:.95},space:!0,children:[e(t.Title,{children:"Edit profile"}),e(t.Description,{children:"Make changes to your profile here. Click save when you're done."}),o(n,{space:"$4",horizontal:!0,children:[e(r,{width:160,justifyContent:"flex-end",htmlFor:"name",children:"Name"}),e(s,{flex:1,id:"name",defaultValue:"Nate Wienert"})]}),o(n,{space:"$4",horizontal:!0,children:[e(r,{width:160,justifyContent:"flex-end",htmlFor:"username",children:e(c,{label:"Pick your favorite",placement:"bottom-start",children:e(d,{children:"Food"})})}),e(g,{})]}),e(h,{alignItems:"flex-end",marginTop:"$2",children:e(t.Close,{displayWhenAdapted:!0,asChild:!0,children:e(a,{theme:"alt1","aria-label":"Close",children:"Save changes"})})}),e(m,{children:e(t.Close,{asChild:!0,children:e(a,{position:"absolute",top:"$3",right:"$3",size:"$2",circular:!0,icon:p})})})]},"content")]})]})}export{D as DialogDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+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 /* @__PURE__ */ jsxs(Dialog, { modal: true, children: [
+    /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Edit Profile" }) }),
+    /* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ jsxs(Sheet, { zIndex: 2e5, modal: true, dismissOnSnapToBottom: true, children: [
+      /* @__PURE__ */ jsx(Sheet.Frame, { padding: "$4", space: true, children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }),
+      /* @__PURE__ */ jsx(Sheet.Overlay, {})
+    ] }) }),
+    /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+      /* @__PURE__ */ jsx(
+        Dialog.Overlay,
+        {
+          animation: "quick",
+          opacity: 0.5,
+          enterStyle: { opacity: 0 },
+          exitStyle: { opacity: 0 }
+        },
+        "overlay"
+      ),
+      /* @__PURE__ */ jsxs(
+        Dialog.Content,
+        {
+          bordered: true,
+          elevate: true,
+          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: true,
+          children: [
+            /* @__PURE__ */ jsx(Dialog.Title, { children: "Edit profile" }),
+            /* @__PURE__ */ jsx(Dialog.Description, { children: "Make changes to your profile here. Click save when you're done." }),
+            /* @__PURE__ */ jsxs(Fieldset, { space: "$4", horizontal: true, children: [
+              /* @__PURE__ */ jsx(Label, { width: 160, justifyContent: "flex-end", htmlFor: "name", children: "Name" }),
+              /* @__PURE__ */ jsx(Input, { flex: 1, id: "name", defaultValue: "Nate Wienert" })
+            ] }),
+            /* @__PURE__ */ jsxs(Fieldset, { space: "$4", horizontal: true, children: [
+              /* @__PURE__ */ jsx(Label, { width: 160, justifyContent: "flex-end", htmlFor: "username", children: /* @__PURE__ */ jsx(TooltipSimple, { label: "Pick your favorite", placement: "bottom-start", children: /* @__PURE__ */ jsx(Paragraph, { children: "Food" }) }) }),
+              /* @__PURE__ */ jsx(SelectDemo, {})
+            ] }),
+            /* @__PURE__ */ jsx(YStack, { alignItems: "flex-end", marginTop: "$2", children: /* @__PURE__ */ jsx(Dialog.Close, { displayWhenAdapted: true, asChild: true, children: /* @__PURE__ */ jsx(Button, { theme: "alt1", "aria-label": "Close", children: "Save changes" }) }) }),
+            /* @__PURE__ */ jsx(Unspaced, { children: /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { position: "absolute", top: "$3", right: "$3", size: "$2", circular: true, icon: X }) }) })
+          ]
+        },
+        "content"
+      )
+    ] })
+  ] });
+}
+export {
+  DialogDemo
+};
 //# sourceMappingURL=DialogDemo.js.map

package/dist/esm/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": "AAsBQ,cAAAA,EAIA,QAAAC,MAJA,oBAtBR,OAAS,KAAAC,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,OACEd,EAACI,EAAA,CAAO,MAAK,GACX,UAAAL,EAACK,EAAO,QAAP,CAAe,QAAO,GACrB,SAAAL,EAACI,EAAA,CAAO,wBAAY,EACtB,EAEAJ,EAACG,EAAA,CAAM,KAAK,KAAK,SAAS,QACxB,SAAAF,EAACS,EAAA,CAAM,OAAQ,IAAQ,MAAK,GAAC,sBAAqB,GAChD,UAAAV,EAACU,EAAM,MAAN,CAAY,QAAQ,KAAK,MAAK,GAC7B,SAAAV,EAACG,EAAM,SAAN,EAAe,EAClB,EACAH,EAACU,EAAM,QAAN,EAAc,GACjB,EACF,EAEAT,EAACI,EAAO,OAAP,CACC,UAAAL,EAACK,EAAO,QAAP,CAEC,UAAU,QACV,QAAS,GACT,WAAY,CAAE,QAAS,CAAE,EACzB,UAAW,CAAE,QAAS,CAAE,GAJpB,SAKN,EAEAJ,EAACI,EAAO,QAAP,CACC,SAAQ,GACR,QAAO,GAEP,UAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EACA,WAAY,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,EAAG,MAAO,EAAI,EACnD,UAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,GAAK,EAClD,MAAK,GAEL,UAAAL,EAACK,EAAO,MAAP,CAAa,wBAAY,EAC1BL,EAACK,EAAO,YAAP,CAAmB,2EAEpB,EACAJ,EAACK,EAAA,CAAS,MAAM,KAAK,WAAU,GAC7B,UAAAN,EAACQ,EAAA,CAAM,MAAO,IAAK,eAAe,WAAW,QAAQ,OAAO,gBAE5D,EACAR,EAACO,EAAA,CAAM,KAAM,EAAG,GAAG,OAAO,aAAa,eAAe,GACxD,EACAN,EAACK,EAAA,CAAS,MAAM,KAAK,WAAU,GAC7B,UAAAN,EAACQ,EAAA,CAAM,MAAO,IAAK,eAAe,WAAW,QAAQ,WACnD,SAAAR,EAACW,EAAA,CAAc,MAAM,qBAAqB,UAAU,eAClD,SAAAX,EAACS,EAAA,CAAU,gBAAI,EACjB,EACF,EACAT,EAACc,EAAA,EAAW,GACd,EAEAd,EAACa,EAAA,CAAO,WAAW,WAAW,UAAU,KACtC,SAAAb,EAACK,EAAO,MAAP,CAAa,mBAAkB,GAAC,QAAO,GACtC,SAAAL,EAACI,EAAA,CAAO,MAAM,OAAO,aAAW,QAAQ,wBAExC,EACF,EACF,EAEAJ,EAACY,EAAA,CACC,SAAAZ,EAACK,EAAO,MAAP,CAAa,QAAO,GACnB,SAAAL,EAACI,EAAA,CAAO,SAAS,WAAW,IAAI,KAAK,MAAM,KAAK,KAAK,KAAK,SAAQ,GAAC,KAAMF,EAAG,EAC9E,EACF,IA5CI,SA6CN,GACF,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "X", "Adapt", "Button", "Dialog", "Fieldset", "Input", "Label", "Paragraph", "Sheet", "TooltipSimple", "Unspaced", "YStack", "SelectDemo", "DialogDemo"]
+  "mappings": "AAsBQ,cAIA,YAJA;AAtBR,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,qBAAC,UAAO,OAAK,MACX;AAAA,wBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,8BAAC,UAAO,0BAAY,GACtB;AAAA,IAEA,oBAAC,SAAM,MAAK,MAAK,UAAS,SACxB,+BAAC,SAAM,QAAQ,KAAQ,OAAK,MAAC,uBAAqB,MAChD;AAAA,0BAAC,MAAM,OAAN,EAAY,SAAQ,MAAK,OAAK,MAC7B,8BAAC,MAAM,UAAN,EAAe,GAClB;AAAA,MACA,oBAAC,MAAM,SAAN,EAAc;AAAA,OACjB,GACF;AAAA,IAEA,qBAAC,OAAO,QAAP,EACC;AAAA;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UAEC,WAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY,EAAE,SAAS,EAAE;AAAA,UACzB,WAAW,EAAE,SAAS,EAAE;AAAA;AAAA,QAJpB;AAAA,MAKN;AAAA,MAEA;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,UAAQ;AAAA,UACR,SAAO;AAAA,UAEP,WAAW;AAAA,YACT;AAAA,YACA;AAAA,cACE,SAAS;AAAA,gBACP,mBAAmB;AAAA,cACrB;AAAA,YACF;AAAA,UACF;AAAA,UACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,UACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,UAClD,OAAK;AAAA,UAEL;AAAA,gCAAC,OAAO,OAAP,EAAa,0BAAY;AAAA,YAC1B,oBAAC,OAAO,aAAP,EAAmB,6EAEpB;AAAA,YACA,qBAAC,YAAS,OAAM,MAAK,YAAU,MAC7B;AAAA,kCAAC,SAAM,OAAO,KAAK,gBAAe,YAAW,SAAQ,QAAO,kBAE5D;AAAA,cACA,oBAAC,SAAM,MAAM,GAAG,IAAG,QAAO,cAAa,gBAAe;AAAA,eACxD;AAAA,YACA,qBAAC,YAAS,OAAM,MAAK,YAAU,MAC7B;AAAA,kCAAC,SAAM,OAAO,KAAK,gBAAe,YAAW,SAAQ,YACnD,8BAAC,iBAAc,OAAM,sBAAqB,WAAU,gBAClD,8BAAC,aAAU,kBAAI,GACjB,GACF;AAAA,cACA,oBAAC,cAAW;AAAA,eACd;AAAA,YAEA,oBAAC,UAAO,YAAW,YAAW,WAAU,MACtC,8BAAC,OAAO,OAAP,EAAa,oBAAkB,MAAC,SAAO,MACtC,8BAAC,UAAO,OAAM,QAAO,cAAW,SAAQ,0BAExC,GACF,GACF;AAAA,YAEA,oBAAC,YACC,8BAAC,OAAO,OAAP,EAAa,SAAO,MACnB,8BAAC,UAAO,UAAS,YAAW,KAAI,MAAK,OAAM,MAAK,MAAK,MAAK,UAAQ,MAAC,MAAM,GAAG,GAC9E,GACF;AAAA;AAAA;AAAA,QA5CI;AAAA,MA6CN;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/esm/DialogDemo.mjs

@@ -1,2 +1,74 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{X as p}from"@tamagui/lucide-icons";import{Adapt as l,Button as a,Dialog as t,Fieldset as n,Input as s,Label as r,Paragraph as d,Sheet as i,TooltipSimple as c,Unspaced as m,YStack as h}from"tamagui";import{SelectDemo as g}from"./SelectDemo";function D(){return o(t,{modal:!0,children:[e(t.Trigger,{asChild:!0,children:e(a,{children:"Edit Profile"})}),e(l,{when:"sm",platform:"touch",children:o(i,{zIndex:2e5,modal:!0,dismissOnSnapToBottom:!0,children:[e(i.Frame,{padding:"$4",space:!0,children:e(l.Contents,{})}),e(i.Overlay,{})]})}),o(t.Portal,{children:[e(t.Overlay,{animation:"quick",opacity:.5,enterStyle:{opacity:0},exitStyle:{opacity:0}},"overlay"),o(t.Content,{bordered:!0,elevate:!0,animation:["quick",{opacity:{overshootClamping:!0}}],enterStyle:{x:0,y:-20,opacity:0,scale:.9},exitStyle:{x:0,y:10,opacity:0,scale:.95},space:!0,children:[e(t.Title,{children:"Edit profile"}),e(t.Description,{children:"Make changes to your profile here. Click save when you're done."}),o(n,{space:"$4",horizontal:!0,children:[e(r,{width:160,justifyContent:"flex-end",htmlFor:"name",children:"Name"}),e(s,{flex:1,id:"name",defaultValue:"Nate Wienert"})]}),o(n,{space:"$4",horizontal:!0,children:[e(r,{width:160,justifyContent:"flex-end",htmlFor:"username",children:e(c,{label:"Pick your favorite",placement:"bottom-start",children:e(d,{children:"Food"})})}),e(g,{})]}),e(h,{alignItems:"flex-end",marginTop:"$2",children:e(t.Close,{displayWhenAdapted:!0,asChild:!0,children:e(a,{theme:"alt1","aria-label":"Close",children:"Save changes"})})}),e(m,{children:e(t.Close,{asChild:!0,children:e(a,{position:"absolute",top:"$3",right:"$3",size:"$2",circular:!0,icon:p})})})]},"content")]})]})}export{D as DialogDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+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 /* @__PURE__ */ jsxs(Dialog, { modal: true, children: [
+    /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Edit Profile" }) }),
+    /* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ jsxs(Sheet, { zIndex: 2e5, modal: true, dismissOnSnapToBottom: true, children: [
+      /* @__PURE__ */ jsx(Sheet.Frame, { padding: "$4", space: true, children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }),
+      /* @__PURE__ */ jsx(Sheet.Overlay, {})
+    ] }) }),
+    /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+      /* @__PURE__ */ jsx(
+        Dialog.Overlay,
+        {
+          animation: "quick",
+          opacity: 0.5,
+          enterStyle: { opacity: 0 },
+          exitStyle: { opacity: 0 }
+        },
+        "overlay"
+      ),
+      /* @__PURE__ */ jsxs(
+        Dialog.Content,
+        {
+          bordered: true,
+          elevate: true,
+          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: true,
+          children: [
+            /* @__PURE__ */ jsx(Dialog.Title, { children: "Edit profile" }),
+            /* @__PURE__ */ jsx(Dialog.Description, { children: "Make changes to your profile here. Click save when you're done." }),
+            /* @__PURE__ */ jsxs(Fieldset, { space: "$4", horizontal: true, children: [
+              /* @__PURE__ */ jsx(Label, { width: 160, justifyContent: "flex-end", htmlFor: "name", children: "Name" }),
+              /* @__PURE__ */ jsx(Input, { flex: 1, id: "name", defaultValue: "Nate Wienert" })
+            ] }),
+            /* @__PURE__ */ jsxs(Fieldset, { space: "$4", horizontal: true, children: [
+              /* @__PURE__ */ jsx(Label, { width: 160, justifyContent: "flex-end", htmlFor: "username", children: /* @__PURE__ */ jsx(TooltipSimple, { label: "Pick your favorite", placement: "bottom-start", children: /* @__PURE__ */ jsx(Paragraph, { children: "Food" }) }) }),
+              /* @__PURE__ */ jsx(SelectDemo, {})
+            ] }),
+            /* @__PURE__ */ jsx(YStack, { alignItems: "flex-end", marginTop: "$2", children: /* @__PURE__ */ jsx(Dialog.Close, { displayWhenAdapted: true, asChild: true, children: /* @__PURE__ */ jsx(Button, { theme: "alt1", "aria-label": "Close", children: "Save changes" }) }) }),
+            /* @__PURE__ */ jsx(Unspaced, { children: /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { position: "absolute", top: "$3", right: "$3", size: "$2", circular: true, icon: X }) }) })
+          ]
+        },
+        "content"
+      )
+    ] })
+  ] });
+}
+export {
+  DialogDemo
+};
 //# sourceMappingURL=DialogDemo.mjs.map

package/dist/esm/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": "AAsBQ,cAAAA,EAIA,QAAAC,MAJA,oBAtBR,OAAS,KAAAC,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,OACEd,EAACI,EAAA,CAAO,MAAK,GACX,UAAAL,EAACK,EAAO,QAAP,CAAe,QAAO,GACrB,SAAAL,EAACI,EAAA,CAAO,wBAAY,EACtB,EAEAJ,EAACG,EAAA,CAAM,KAAK,KAAK,SAAS,QACxB,SAAAF,EAACS,EAAA,CAAM,OAAQ,IAAQ,MAAK,GAAC,sBAAqB,GAChD,UAAAV,EAACU,EAAM,MAAN,CAAY,QAAQ,KAAK,MAAK,GAC7B,SAAAV,EAACG,EAAM,SAAN,EAAe,EAClB,EACAH,EAACU,EAAM,QAAN,EAAc,GACjB,EACF,EAEAT,EAACI,EAAO,OAAP,CACC,UAAAL,EAACK,EAAO,QAAP,CAEC,UAAU,QACV,QAAS,GACT,WAAY,CAAE,QAAS,CAAE,EACzB,UAAW,CAAE,QAAS,CAAE,GAJpB,SAKN,EAEAJ,EAACI,EAAO,QAAP,CACC,SAAQ,GACR,QAAO,GAEP,UAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EACA,WAAY,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,EAAG,MAAO,EAAI,EACnD,UAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,GAAK,EAClD,MAAK,GAEL,UAAAL,EAACK,EAAO,MAAP,CAAa,wBAAY,EAC1BL,EAACK,EAAO,YAAP,CAAmB,2EAEpB,EACAJ,EAACK,EAAA,CAAS,MAAM,KAAK,WAAU,GAC7B,UAAAN,EAACQ,EAAA,CAAM,MAAO,IAAK,eAAe,WAAW,QAAQ,OAAO,gBAE5D,EACAR,EAACO,EAAA,CAAM,KAAM,EAAG,GAAG,OAAO,aAAa,eAAe,GACxD,EACAN,EAACK,EAAA,CAAS,MAAM,KAAK,WAAU,GAC7B,UAAAN,EAACQ,EAAA,CAAM,MAAO,IAAK,eAAe,WAAW,QAAQ,WACnD,SAAAR,EAACW,EAAA,CAAc,MAAM,qBAAqB,UAAU,eAClD,SAAAX,EAACS,EAAA,CAAU,gBAAI,EACjB,EACF,EACAT,EAACc,EAAA,EAAW,GACd,EAEAd,EAACa,EAAA,CAAO,WAAW,WAAW,UAAU,KACtC,SAAAb,EAACK,EAAO,MAAP,CAAa,mBAAkB,GAAC,QAAO,GACtC,SAAAL,EAACI,EAAA,CAAO,MAAM,OAAO,aAAW,QAAQ,wBAExC,EACF,EACF,EAEAJ,EAACY,EAAA,CACC,SAAAZ,EAACK,EAAO,MAAP,CAAa,QAAO,GACnB,SAAAL,EAACI,EAAA,CAAO,SAAS,WAAW,IAAI,KAAK,MAAM,KAAK,KAAK,KAAK,SAAQ,GAAC,KAAMF,EAAG,EAC9E,EACF,IA5CI,SA6CN,GACF,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "X", "Adapt", "Button", "Dialog", "Fieldset", "Input", "Label", "Paragraph", "Sheet", "TooltipSimple", "Unspaced", "YStack", "SelectDemo", "DialogDemo"]
+  "mappings": "AAsBQ,cAIA,YAJA;AAtBR,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,qBAAC,UAAO,OAAK,MACX;AAAA,wBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,8BAAC,UAAO,0BAAY,GACtB;AAAA,IAEA,oBAAC,SAAM,MAAK,MAAK,UAAS,SACxB,+BAAC,SAAM,QAAQ,KAAQ,OAAK,MAAC,uBAAqB,MAChD;AAAA,0BAAC,MAAM,OAAN,EAAY,SAAQ,MAAK,OAAK,MAC7B,8BAAC,MAAM,UAAN,EAAe,GAClB;AAAA,MACA,oBAAC,MAAM,SAAN,EAAc;AAAA,OACjB,GACF;AAAA,IAEA,qBAAC,OAAO,QAAP,EACC;AAAA;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UAEC,WAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY,EAAE,SAAS,EAAE;AAAA,UACzB,WAAW,EAAE,SAAS,EAAE;AAAA;AAAA,QAJpB;AAAA,MAKN;AAAA,MAEA;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,UAAQ;AAAA,UACR,SAAO;AAAA,UAEP,WAAW;AAAA,YACT;AAAA,YACA;AAAA,cACE,SAAS;AAAA,gBACP,mBAAmB;AAAA,cACrB;AAAA,YACF;AAAA,UACF;AAAA,UACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,UACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,UAClD,OAAK;AAAA,UAEL;AAAA,gCAAC,OAAO,OAAP,EAAa,0BAAY;AAAA,YAC1B,oBAAC,OAAO,aAAP,EAAmB,6EAEpB;AAAA,YACA,qBAAC,YAAS,OAAM,MAAK,YAAU,MAC7B;AAAA,kCAAC,SAAM,OAAO,KAAK,gBAAe,YAAW,SAAQ,QAAO,kBAE5D;AAAA,cACA,oBAAC,SAAM,MAAM,GAAG,IAAG,QAAO,cAAa,gBAAe;AAAA,eACxD;AAAA,YACA,qBAAC,YAAS,OAAM,MAAK,YAAU,MAC7B;AAAA,kCAAC,SAAM,OAAO,KAAK,gBAAe,YAAW,SAAQ,YACnD,8BAAC,iBAAc,OAAM,sBAAqB,WAAU,gBAClD,8BAAC,aAAU,kBAAI,GACjB,GACF;AAAA,cACA,oBAAC,cAAW;AAAA,eACd;AAAA,YAEA,oBAAC,UAAO,YAAW,YAAW,WAAU,MACtC,8BAAC,OAAO,OAAP,EAAa,oBAAkB,MAAC,SAAO,MACtC,8BAAC,UAAO,OAAM,QAAO,cAAW,SAAQ,0BAExC,GACF,GACF;AAAA,YAEA,oBAAC,YACC,8BAAC,OAAO,OAAP,EAAa,SAAO,MACnB,8BAAC,UAAO,UAAS,YAAW,KAAI,MAAK,OAAM,MAAK,MAAK,MAAK,UAAQ,MAAC,MAAM,GAAG,GAC9E,GACF;AAAA;AAAA;AAAA,QA5CI;AAAA,MA6CN;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/esm/FormsDemo.js

@@ -1,2 +1,36 @@
-import{jsx as o,jsxs as f}from"react/jsx-runtime";import{useEffect as s,useState as n}from"react";import{Button as m,Form as e,H4 as u,Spinner as d}from"tamagui";function T(a){const[t,r]=n("off");return s(()=>{if(t==="submitting"){const i=setTimeout(()=>r("off"),2e3);return()=>{clearTimeout(i)}}},[t]),f(e,{alignItems:"center",minWidth:300,space:!0,onSubmit:()=>r("submitting"),borderWidth:1,borderRadius:"$4",backgroundColor:"$background",borderColor:"$borderColor",padding:"$8",children:[o(u,{children:t[0].toUpperCase()+t.slice(1)}),o(e.Trigger,{asChild:!0,disabled:t!=="off",children:o(m,{icon:t==="submitting"?()=>o(d,{}):void 0,children:"Submit"})})]})}export{T as FormsDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+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 /* @__PURE__ */ jsxs(
+    Form,
+    {
+      alignItems: "center",
+      minWidth: 300,
+      space: true,
+      onSubmit: () => setStatus("submitting"),
+      borderWidth: 1,
+      borderRadius: "$4",
+      backgroundColor: "$background",
+      borderColor: "$borderColor",
+      padding: "$8",
+      children: [
+        /* @__PURE__ */ jsx(H4, { children: status[0].toUpperCase() + status.slice(1) }),
+        /* @__PURE__ */ jsx(Form.Trigger, { asChild: true, disabled: status !== "off", children: /* @__PURE__ */ jsx(Button, { icon: status === "submitting" ? () => /* @__PURE__ */ jsx(Spinner, {}) : void 0, children: "Submit" }) })
+      ]
+    }
+  );
+}
+export {
+  FormsDemo
+};
 //# sourceMappingURL=FormsDemo.js.map

package/dist/esm/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": "AAkBI,OAWE,OAAAA,EAXF,QAAAC,MAAA,oBAhBJ,OAAS,aAAAC,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,EAGTT,EAACI,EAAA,CACC,WAAW,SACX,SAAU,IACV,MAAK,GACL,SAAU,IAAMM,EAAU,YAAY,EACtC,YAAa,EACb,aAAa,KACb,gBAAgB,cAChB,YAAY,eACZ,QAAQ,KAER,UAAAX,EAACM,EAAA,CAAI,SAAAI,EAAO,CAAC,EAAE,YAAY,EAAIA,EAAO,MAAM,CAAC,EAAE,EAE/CV,EAACK,EAAK,QAAL,CAAa,QAAO,GAAC,SAAUK,IAAW,MACzC,SAAAV,EAACI,EAAA,CAAO,KAAMM,IAAW,aAAe,IAAMV,EAACO,EAAA,EAAQ,EAAK,OAAW,kBAEvE,EACF,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "useEffect", "useState", "Button", "Form", "H4", "Spinner", "FormsDemo", "props", "status", "setStatus", "timer"]
+  "mappings": "AAkBI,SAWE,KAXF;AAhBJ,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;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,UAAU;AAAA,MACV,OAAK;AAAA,MACL,UAAU,MAAM,UAAU,YAAY;AAAA,MACtC,aAAa;AAAA,MACb,cAAa;AAAA,MACb,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,SAAQ;AAAA,MAER;AAAA,4BAAC,MAAI,iBAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,GAAE;AAAA,QAE/C,oBAAC,KAAK,SAAL,EAAa,SAAO,MAAC,UAAU,WAAW,OACzC,8BAAC,UAAO,MAAM,WAAW,eAAe,MAAM,oBAAC,WAAQ,IAAK,QAAW,oBAEvE,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
 }

package/dist/esm/FormsDemo.mjs

@@ -1,2 +1,36 @@
-import{jsx as o,jsxs as f}from"react/jsx-runtime";import{useEffect as s,useState as n}from"react";import{Button as m,Form as e,H4 as u,Spinner as d}from"tamagui";function T(a){const[t,r]=n("off");return s(()=>{if(t==="submitting"){const i=setTimeout(()=>r("off"),2e3);return()=>{clearTimeout(i)}}},[t]),f(e,{alignItems:"center",minWidth:300,space:!0,onSubmit:()=>r("submitting"),borderWidth:1,borderRadius:"$4",backgroundColor:"$background",borderColor:"$borderColor",padding:"$8",children:[o(u,{children:t[0].toUpperCase()+t.slice(1)}),o(e.Trigger,{asChild:!0,disabled:t!=="off",children:o(m,{icon:t==="submitting"?()=>o(d,{}):void 0,children:"Submit"})})]})}export{T as FormsDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+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 /* @__PURE__ */ jsxs(
+    Form,
+    {
+      alignItems: "center",
+      minWidth: 300,
+      space: true,
+      onSubmit: () => setStatus("submitting"),
+      borderWidth: 1,
+      borderRadius: "$4",
+      backgroundColor: "$background",
+      borderColor: "$borderColor",
+      padding: "$8",
+      children: [
+        /* @__PURE__ */ jsx(H4, { children: status[0].toUpperCase() + status.slice(1) }),
+        /* @__PURE__ */ jsx(Form.Trigger, { asChild: true, disabled: status !== "off", children: /* @__PURE__ */ jsx(Button, { icon: status === "submitting" ? () => /* @__PURE__ */ jsx(Spinner, {}) : void 0, children: "Submit" }) })
+      ]
+    }
+  );
+}
+export {
+  FormsDemo
+};
 //# sourceMappingURL=FormsDemo.mjs.map

package/dist/esm/FormsDemo.mjs.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": "AAkBI,OAWE,OAAAA,EAXF,QAAAC,MAAA,oBAhBJ,OAAS,aAAAC,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,EAGTT,EAACI,EAAA,CACC,WAAW,SACX,SAAU,IACV,MAAK,GACL,SAAU,IAAMM,EAAU,YAAY,EACtC,YAAa,EACb,aAAa,KACb,gBAAgB,cAChB,YAAY,eACZ,QAAQ,KAER,UAAAX,EAACM,EAAA,CAAI,SAAAI,EAAO,CAAC,EAAE,YAAY,EAAIA,EAAO,MAAM,CAAC,EAAE,EAE/CV,EAACK,EAAK,QAAL,CAAa,QAAO,GAAC,SAAUK,IAAW,MACzC,SAAAV,EAACI,EAAA,CAAO,KAAMM,IAAW,aAAe,IAAMV,EAACO,EAAA,EAAQ,EAAK,OAAW,kBAEvE,EACF,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "useEffect", "useState", "Button", "Form", "H4", "Spinner", "FormsDemo", "props", "status", "setStatus", "timer"]
+  "mappings": "AAkBI,SAWE,KAXF;AAhBJ,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;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,UAAU;AAAA,MACV,OAAK;AAAA,MACL,UAAU,MAAM,UAAU,YAAY;AAAA,MACtC,aAAa;AAAA,MACb,cAAa;AAAA,MACb,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,SAAQ;AAAA,MAER;AAAA,4BAAC,MAAI,iBAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,GAAE;AAAA,QAE/C,oBAAC,KAAK,SAAL,EAAa,SAAO,MAAC,UAAU,WAAW,OACzC,8BAAC,UAAO,MAAM,WAAW,eAAe,MAAM,oBAAC,WAAQ,IAAK,QAAW,oBAEvE,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
 }