@tamagui/demos 1.14.0 → 1.14.2

package/dist/esm/ListItemDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/ListItemDemo.tsx"],
   "sourcesContent": ["import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/lucide-icons'\nimport { ListItem, Separator, XStack, YGroup } from 'tamagui'\n\nexport function ListItemDemo() {\n  return (\n    <XStack $sm={{ flexDirection: 'column' }} paddingHorizontal=\"$4\" space>\n      <ListItemDemo1 />\n      <ListItemDemo2 />\n    </XStack>\n  )\n}\n\nfunction ListItemDemo1() {\n  return (\n    <YGroup alignSelf=\"center\" bordered width={240} size=\"$4\">\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Star} title=\"Star\" subTitle=\"Twinkles\" />\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Moon}>\n          Moon\n        </ListItem>\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Sun}>\n          Sun\n        </ListItem>\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Cloud}>\n          Cloud\n        </ListItem>\n      </YGroup.Item>\n    </YGroup>\n  )\n}\n\nfunction ListItemDemo2() {\n  return (\n    <YGroup alignSelf=\"center\" bordered width={240} size=\"$5\" separator={<Separator />}>\n      <YGroup.Item>\n        <ListItem\n          hoverTheme\n          pressTheme\n          title=\"Star\"\n          subTitle=\"Subtitle\"\n          icon={Star}\n          iconAfter={ChevronRight}\n        />\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem\n          hoverTheme\n          pressTheme\n          title=\"Moon\"\n          subTitle=\"Subtitle\"\n          icon={Moon}\n          iconAfter={ChevronRight}\n        />\n      </YGroup.Item>\n    </YGroup>\n  )\n}\n"],
-  "mappings": "AAKI,OACE,OAAAA,EADF,QAAAC,MAAA,oBALJ,OAAS,gBAAAC,EAAc,SAAAC,EAAO,QAAAC,EAAM,QAAAC,EAAM,OAAAC,MAAW,wBACrD,OAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,EAAQ,UAAAC,MAAc,UAE7C,SAASC,GAAe,CAC7B,OACEV,EAACQ,EAAA,CAAO,IAAK,CAAE,cAAe,QAAS,EAAG,kBAAkB,KAAK,MAAK,GACpE,UAAAT,EAACY,EAAA,EAAc,EACfZ,EAACa,EAAA,EAAc,GACjB,CAEJ,CAEA,SAASD,GAAgB,CACvB,OACEX,EAACS,EAAA,CAAO,UAAU,SAAS,SAAQ,GAAC,MAAO,IAAK,KAAK,KACnD,UAAAV,EAACU,EAAO,KAAP,CACC,SAAAV,EAACO,EAAA,CAAS,WAAU,GAAC,KAAMF,EAAM,MAAM,OAAO,SAAS,WAAW,EACpE,EACAL,EAACU,EAAO,KAAP,CACC,SAAAV,EAACO,EAAA,CAAS,WAAU,GAAC,KAAMH,EAAM,gBAEjC,EACF,EACAJ,EAACU,EAAO,KAAP,CACC,SAAAV,EAACO,EAAA,CAAS,WAAU,GAAC,KAAMD,EAAK,eAEhC,EACF,EACAN,EAACU,EAAO,KAAP,CACC,SAAAV,EAACO,EAAA,CAAS,WAAU,GAAC,KAAMJ,EAAO,iBAElC,EACF,GACF,CAEJ,CAEA,SAASU,GAAgB,CACvB,OACEZ,EAACS,EAAA,CAAO,UAAU,SAAS,SAAQ,GAAC,MAAO,IAAK,KAAK,KAAK,UAAWV,EAACQ,EAAA,EAAU,EAC9E,UAAAR,EAACU,EAAO,KAAP,CACC,SAAAV,EAACO,EAAA,CACC,WAAU,GACV,WAAU,GACV,MAAM,OACN,SAAS,WACT,KAAMF,EACN,UAAWH,EACb,EACF,EACAF,EAACU,EAAO,KAAP,CACC,SAAAV,EAACO,EAAA,CACC,WAAU,GACV,WAAU,GACV,MAAM,OACN,SAAS,WACT,KAAMH,EACN,UAAWF,EACb,EACF,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "ChevronRight", "Cloud", "Moon", "Star", "Sun", "ListItem", "Separator", "XStack", "YGroup", "ListItemDemo", "ListItemDemo1", "ListItemDemo2"]
+  "mappings": "AAKI,SACE,KADF;AALJ,SAAS,cAAc,OAAO,MAAM,MAAM,WAAW;AACrD,SAAS,UAAU,WAAW,QAAQ,cAAc;AAE7C,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,KAAK,EAAE,eAAe,SAAS,GAAG,mBAAkB,MAAK,OAAK,MACpE;AAAA,wBAAC,iBAAc;AAAA,IACf,oBAAC,iBAAc;AAAA,KACjB;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,WAAU,UAAS,UAAQ,MAAC,OAAO,KAAK,MAAK,MACnD;AAAA,wBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,MAAM,OAAM,QAAO,UAAS,YAAW,GACpE;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,MAAM,kBAEjC,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,KAAK,iBAEhC,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,OAAO,mBAElC,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,WAAU,UAAS,UAAQ,MAAC,OAAO,KAAK,MAAK,MAAK,WAAW,oBAAC,aAAU,GAC9E;AAAA,wBAAC,OAAO,MAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb,GACF;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/esm/LucideIconsDemo.js

@@ -1,2 +1,45 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as s from"@tamagui/lucide-icons";import{useMemo as m,useState as u}from"react";import{ScrollView as d}from"react-native";import{Grid as l,Input as w,Paragraph as S,Spacer as k,YStack as r,useDebounceValue as f}from"tamagui";const g=Object.keys(s).map(o=>({key:o.toLowerCase(),name:o,Icon:s[o]}));function Y(){const[o,p]=u(""),a=f(o,400),t=100,h=m(()=>g.filter(c=>c.key.startsWith(a.toLowerCase())).slice(0,835).map(({Icon:c,name:i})=>n(r,{h:t+20,ai:"center",jc:"center",children:[e(c,{size:t*.25}),e(k,{}),e(S,{h:"$6",ww:"break-word",maw:"100%",ta:"center",px:"$2",size:"$1",o:.5,children:i})]},i)),[a]);return n(r,{miw:"100%",padding:"$4",paddingBottom:"$0",space:!0,children:[e(w,{value:o,onChangeText:p,placeholder:"Search..."}),e(r,{height:420,children:e(d,{children:e(l,{itemMinWidth:t,children:h})})})]})}export{Y as LucideIconsDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as LucideIcons from "@tamagui/lucide-icons";
+import { useMemo, useState } from "react";
+import { ScrollView } from "react-native";
+import { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from "tamagui";
+const lucideIcons = Object.keys(LucideIcons).map((name) => ({
+  key: name.toLowerCase(),
+  name,
+  Icon: LucideIcons[name]
+}));
+function LucideIconsDemo() {
+  const [searchRaw, setSearch] = useState("");
+  const search = useDebounceValue(searchRaw, 400);
+  const size = 100;
+  const iconsMemo = useMemo(() => {
+    const icons = lucideIcons.filter((x) => x.key.startsWith(search.toLowerCase()));
+    return icons.slice(0, 835).map(({ Icon, name }) => {
+      return /* @__PURE__ */ jsxs(YStack, { h: size + 20, ai: "center", jc: "center", children: [
+        /* @__PURE__ */ jsx(Icon, { size: size * 0.25 }),
+        /* @__PURE__ */ jsx(Spacer, {}),
+        /* @__PURE__ */ jsx(
+          Paragraph,
+          {
+            h: "$6",
+            ww: "break-word",
+            maw: "100%",
+            ta: "center",
+            px: "$2",
+            size: "$1",
+            o: 0.5,
+            children: name
+          }
+        )
+      ] }, name);
+    });
+  }, [search]);
+  return /* @__PURE__ */ jsxs(YStack, { miw: "100%", padding: "$4", paddingBottom: "$0", space: true, children: [
+    /* @__PURE__ */ jsx(Input, { value: searchRaw, onChangeText: setSearch, placeholder: "Search..." }),
+    /* @__PURE__ */ jsx(YStack, { height: 420, children: /* @__PURE__ */ jsx(ScrollView, { children: /* @__PURE__ */ jsx(Grid, { itemMinWidth: size, children: iconsMemo }) }) })
+  ] });
+}
+export {
+  LucideIconsDemo
+};
 //# sourceMappingURL=LucideIconsDemo.js.map

package/dist/esm/LucideIconsDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/LucideIconsDemo.tsx"],
   "sourcesContent": ["import * as LucideIcons from '@tamagui/lucide-icons'\nimport { useMemo, useState } from 'react'\nimport { ScrollView } from 'react-native'\nimport { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'\n\nconst lucideIcons = Object.keys(LucideIcons).map((name) => ({\n  key: name.toLowerCase(),\n  name,\n  Icon: LucideIcons[name],\n}))\n\nexport function LucideIconsDemo() {\n  const [searchRaw, setSearch] = useState('')\n  const search = useDebounceValue(searchRaw, 400)\n\n  const size = 100\n\n  const iconsMemo = useMemo(() => {\n    const icons = lucideIcons.filter((x) => x.key.startsWith(search.toLowerCase()))\n    return icons.slice(0, 835).map(({ Icon, name }) => {\n      return (\n        <YStack h={size + 20} ai=\"center\" jc=\"center\" key={name}>\n          <Icon size={size * 0.25} />\n          <Spacer />\n          <Paragraph\n            h=\"$6\"\n            ww=\"break-word\"\n            maw=\"100%\"\n            ta=\"center\"\n            px=\"$2\"\n            size=\"$1\"\n            o={0.5}\n          >\n            {name}\n          </Paragraph>\n        </YStack>\n      )\n    })\n  }, [search])\n\n  return (\n    <YStack miw=\"100%\" padding=\"$4\" paddingBottom=\"$0\" space>\n      <Input value={searchRaw} onChangeText={setSearch} placeholder=\"Search...\" />\n\n      <YStack height={420}>\n        <ScrollView>\n          <Grid itemMinWidth={size}>{iconsMemo}</Grid>\n        </ScrollView>\n      </YStack>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAqBQ,OACE,OAAAA,EADF,QAAAC,MAAA,oBArBR,UAAYC,MAAiB,wBAC7B,OAAS,WAAAC,EAAS,YAAAC,MAAgB,QAClC,OAAS,cAAAC,MAAkB,eAC3B,OAAS,QAAAC,EAAM,SAAAC,EAAO,aAAAC,EAAW,UAAAC,EAAQ,UAAAC,EAAQ,oBAAAC,MAAwB,UAEzE,MAAMC,EAAc,OAAO,KAAKV,CAAW,EAAE,IAAKW,IAAU,CAC1D,IAAKA,EAAK,YAAY,EACtB,KAAAA,EACA,KAAMX,EAAYW,CAAI,CACxB,EAAE,EAEK,SAASC,GAAkB,CAChC,KAAM,CAACC,EAAWC,CAAS,EAAIZ,EAAS,EAAE,EACpCa,EAASN,EAAiBI,EAAW,GAAG,EAExCG,EAAO,IAEPC,EAAYhB,EAAQ,IACVS,EAAY,OAAQQ,GAAMA,EAAE,IAAI,WAAWH,EAAO,YAAY,CAAC,CAAC,EACjE,MAAM,EAAG,GAAG,EAAE,IAAI,CAAC,CAAE,KAAAI,EAAM,KAAAR,CAAK,IAEzCZ,EAACS,EAAA,CAAO,EAAGQ,EAAO,GAAI,GAAG,SAAS,GAAG,SACnC,UAAAlB,EAACqB,EAAA,CAAK,KAAMH,EAAO,IAAM,EACzBlB,EAACS,EAAA,EAAO,EACRT,EAACQ,EAAA,CACC,EAAE,KACF,GAAG,aACH,IAAI,OACJ,GAAG,SACH,GAAG,KACH,KAAK,KACL,EAAG,GAEF,SAAAK,EACH,IAbiDA,CAcnD,CAEH,EACA,CAACI,CAAM,CAAC,EAEX,OACEhB,EAACS,EAAA,CAAO,IAAI,OAAO,QAAQ,KAAK,cAAc,KAAK,MAAK,GACtD,UAAAV,EAACO,EAAA,CAAM,MAAOQ,EAAW,aAAcC,EAAW,YAAY,YAAY,EAE1EhB,EAACU,EAAA,CAAO,OAAQ,IACd,SAAAV,EAACK,EAAA,CACC,SAAAL,EAACM,EAAA,CAAK,aAAcY,EAAO,SAAAC,EAAU,EACvC,EACF,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "LucideIcons", "useMemo", "useState", "ScrollView", "Grid", "Input", "Paragraph", "Spacer", "YStack", "useDebounceValue", "lucideIcons", "name", "LucideIconsDemo", "searchRaw", "setSearch", "search", "size", "iconsMemo", "x", "Icon"]
+  "mappings": "AAqBQ,SACE,KADF;AArBR,YAAY,iBAAiB;AAC7B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,MAAM,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEzE,MAAM,cAAc,OAAO,KAAK,WAAW,EAAE,IAAI,CAAC,UAAU;AAAA,EAC1D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,YAAY,IAAI;AACxB,EAAE;AAEK,SAAS,kBAAkB;AAChC,QAAM,CAAC,WAAW,SAAS,IAAI,SAAS,EAAE;AAC1C,QAAM,SAAS,iBAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,QAAQ,YAAY,OAAO,CAAC,MAAM,EAAE,IAAI,WAAW,OAAO,YAAY,CAAC,CAAC;AAC9E,WAAO,MAAM,MAAM,GAAG,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,MAAM;AACjD,aACE,qBAAC,UAAO,GAAG,OAAO,IAAI,IAAG,UAAS,IAAG,UACnC;AAAA,4BAAC,QAAK,MAAM,OAAO,MAAM;AAAA,QACzB,oBAAC,UAAO;AAAA,QACR;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,IAAG;AAAA,YACH,KAAI;AAAA,YACJ,IAAG;AAAA,YACH,IAAG;AAAA,YACH,MAAK;AAAA,YACL,GAAG;AAAA,YAEF;AAAA;AAAA,QACH;AAAA,WAbiD,IAcnD;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,qBAAC,UAAO,KAAI,QAAO,SAAQ,MAAK,eAAc,MAAK,OAAK,MACtD;AAAA,wBAAC,SAAM,OAAO,WAAW,cAAc,WAAW,aAAY,aAAY;AAAA,IAE1E,oBAAC,UAAO,QAAQ,KACd,8BAAC,cACC,8BAAC,QAAK,cAAc,MAAO,qBAAU,GACvC,GACF;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/esm/LucideIconsDemo.mjs

@@ -1,2 +1,45 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as s from"@tamagui/lucide-icons";import{useMemo as m,useState as u}from"react";import{ScrollView as d}from"react-native";import{Grid as l,Input as w,Paragraph as S,Spacer as k,YStack as r,useDebounceValue as f}from"tamagui";const g=Object.keys(s).map(o=>({key:o.toLowerCase(),name:o,Icon:s[o]}));function Y(){const[o,p]=u(""),a=f(o,400),t=100,h=m(()=>g.filter(c=>c.key.startsWith(a.toLowerCase())).slice(0,835).map(({Icon:c,name:i})=>n(r,{h:t+20,ai:"center",jc:"center",children:[e(c,{size:t*.25}),e(k,{}),e(S,{h:"$6",ww:"break-word",maw:"100%",ta:"center",px:"$2",size:"$1",o:.5,children:i})]},i)),[a]);return n(r,{miw:"100%",padding:"$4",paddingBottom:"$0",space:!0,children:[e(w,{value:o,onChangeText:p,placeholder:"Search..."}),e(r,{height:420,children:e(d,{children:e(l,{itemMinWidth:t,children:h})})})]})}export{Y as LucideIconsDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as LucideIcons from "@tamagui/lucide-icons";
+import { useMemo, useState } from "react";
+import { ScrollView } from "react-native";
+import { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from "tamagui";
+const lucideIcons = Object.keys(LucideIcons).map((name) => ({
+  key: name.toLowerCase(),
+  name,
+  Icon: LucideIcons[name]
+}));
+function LucideIconsDemo() {
+  const [searchRaw, setSearch] = useState("");
+  const search = useDebounceValue(searchRaw, 400);
+  const size = 100;
+  const iconsMemo = useMemo(() => {
+    const icons = lucideIcons.filter((x) => x.key.startsWith(search.toLowerCase()));
+    return icons.slice(0, 835).map(({ Icon, name }) => {
+      return /* @__PURE__ */ jsxs(YStack, { h: size + 20, ai: "center", jc: "center", children: [
+        /* @__PURE__ */ jsx(Icon, { size: size * 0.25 }),
+        /* @__PURE__ */ jsx(Spacer, {}),
+        /* @__PURE__ */ jsx(
+          Paragraph,
+          {
+            h: "$6",
+            ww: "break-word",
+            maw: "100%",
+            ta: "center",
+            px: "$2",
+            size: "$1",
+            o: 0.5,
+            children: name
+          }
+        )
+      ] }, name);
+    });
+  }, [search]);
+  return /* @__PURE__ */ jsxs(YStack, { miw: "100%", padding: "$4", paddingBottom: "$0", space: true, children: [
+    /* @__PURE__ */ jsx(Input, { value: searchRaw, onChangeText: setSearch, placeholder: "Search..." }),
+    /* @__PURE__ */ jsx(YStack, { height: 420, children: /* @__PURE__ */ jsx(ScrollView, { children: /* @__PURE__ */ jsx(Grid, { itemMinWidth: size, children: iconsMemo }) }) })
+  ] });
+}
+export {
+  LucideIconsDemo
+};
 //# sourceMappingURL=LucideIconsDemo.mjs.map

package/dist/esm/LucideIconsDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/LucideIconsDemo.tsx"],
   "sourcesContent": ["import * as LucideIcons from '@tamagui/lucide-icons'\nimport { useMemo, useState } from 'react'\nimport { ScrollView } from 'react-native'\nimport { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'\n\nconst lucideIcons = Object.keys(LucideIcons).map((name) => ({\n  key: name.toLowerCase(),\n  name,\n  Icon: LucideIcons[name],\n}))\n\nexport function LucideIconsDemo() {\n  const [searchRaw, setSearch] = useState('')\n  const search = useDebounceValue(searchRaw, 400)\n\n  const size = 100\n\n  const iconsMemo = useMemo(() => {\n    const icons = lucideIcons.filter((x) => x.key.startsWith(search.toLowerCase()))\n    return icons.slice(0, 835).map(({ Icon, name }) => {\n      return (\n        <YStack h={size + 20} ai=\"center\" jc=\"center\" key={name}>\n          <Icon size={size * 0.25} />\n          <Spacer />\n          <Paragraph\n            h=\"$6\"\n            ww=\"break-word\"\n            maw=\"100%\"\n            ta=\"center\"\n            px=\"$2\"\n            size=\"$1\"\n            o={0.5}\n          >\n            {name}\n          </Paragraph>\n        </YStack>\n      )\n    })\n  }, [search])\n\n  return (\n    <YStack miw=\"100%\" padding=\"$4\" paddingBottom=\"$0\" space>\n      <Input value={searchRaw} onChangeText={setSearch} placeholder=\"Search...\" />\n\n      <YStack height={420}>\n        <ScrollView>\n          <Grid itemMinWidth={size}>{iconsMemo}</Grid>\n        </ScrollView>\n      </YStack>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAqBQ,OACE,OAAAA,EADF,QAAAC,MAAA,oBArBR,UAAYC,MAAiB,wBAC7B,OAAS,WAAAC,EAAS,YAAAC,MAAgB,QAClC,OAAS,cAAAC,MAAkB,eAC3B,OAAS,QAAAC,EAAM,SAAAC,EAAO,aAAAC,EAAW,UAAAC,EAAQ,UAAAC,EAAQ,oBAAAC,MAAwB,UAEzE,MAAMC,EAAc,OAAO,KAAKV,CAAW,EAAE,IAAKW,IAAU,CAC1D,IAAKA,EAAK,YAAY,EACtB,KAAAA,EACA,KAAMX,EAAYW,CAAI,CACxB,EAAE,EAEK,SAASC,GAAkB,CAChC,KAAM,CAACC,EAAWC,CAAS,EAAIZ,EAAS,EAAE,EACpCa,EAASN,EAAiBI,EAAW,GAAG,EAExCG,EAAO,IAEPC,EAAYhB,EAAQ,IACVS,EAAY,OAAQQ,GAAMA,EAAE,IAAI,WAAWH,EAAO,YAAY,CAAC,CAAC,EACjE,MAAM,EAAG,GAAG,EAAE,IAAI,CAAC,CAAE,KAAAI,EAAM,KAAAR,CAAK,IAEzCZ,EAACS,EAAA,CAAO,EAAGQ,EAAO,GAAI,GAAG,SAAS,GAAG,SACnC,UAAAlB,EAACqB,EAAA,CAAK,KAAMH,EAAO,IAAM,EACzBlB,EAACS,EAAA,EAAO,EACRT,EAACQ,EAAA,CACC,EAAE,KACF,GAAG,aACH,IAAI,OACJ,GAAG,SACH,GAAG,KACH,KAAK,KACL,EAAG,GAEF,SAAAK,EACH,IAbiDA,CAcnD,CAEH,EACA,CAACI,CAAM,CAAC,EAEX,OACEhB,EAACS,EAAA,CAAO,IAAI,OAAO,QAAQ,KAAK,cAAc,KAAK,MAAK,GACtD,UAAAV,EAACO,EAAA,CAAM,MAAOQ,EAAW,aAAcC,EAAW,YAAY,YAAY,EAE1EhB,EAACU,EAAA,CAAO,OAAQ,IACd,SAAAV,EAACK,EAAA,CACC,SAAAL,EAACM,EAAA,CAAK,aAAcY,EAAO,SAAAC,EAAU,EACvC,EACF,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "LucideIcons", "useMemo", "useState", "ScrollView", "Grid", "Input", "Paragraph", "Spacer", "YStack", "useDebounceValue", "lucideIcons", "name", "LucideIconsDemo", "searchRaw", "setSearch", "search", "size", "iconsMemo", "x", "Icon"]
+  "mappings": "AAqBQ,SACE,KADF;AArBR,YAAY,iBAAiB;AAC7B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,MAAM,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEzE,MAAM,cAAc,OAAO,KAAK,WAAW,EAAE,IAAI,CAAC,UAAU;AAAA,EAC1D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,YAAY,IAAI;AACxB,EAAE;AAEK,SAAS,kBAAkB;AAChC,QAAM,CAAC,WAAW,SAAS,IAAI,SAAS,EAAE;AAC1C,QAAM,SAAS,iBAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,QAAQ,YAAY,OAAO,CAAC,MAAM,EAAE,IAAI,WAAW,OAAO,YAAY,CAAC,CAAC;AAC9E,WAAO,MAAM,MAAM,GAAG,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,MAAM;AACjD,aACE,qBAAC,UAAO,GAAG,OAAO,IAAI,IAAG,UAAS,IAAG,UACnC;AAAA,4BAAC,QAAK,MAAM,OAAO,MAAM;AAAA,QACzB,oBAAC,UAAO;AAAA,QACR;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,IAAG;AAAA,YACH,KAAI;AAAA,YACJ,IAAG;AAAA,YACH,IAAG;AAAA,YACH,MAAK;AAAA,YACL,GAAG;AAAA,YAEF;AAAA;AAAA,QACH;AAAA,WAbiD,IAcnD;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,qBAAC,UAAO,KAAI,QAAO,SAAQ,MAAK,eAAc,MAAK,OAAK,MACtD;AAAA,wBAAC,SAAM,OAAO,WAAW,cAAc,WAAW,aAAY,aAAY;AAAA,IAE1E,oBAAC,UAAO,QAAQ,KACd,8BAAC,cACC,8BAAC,QAAK,cAAc,MAAO,qBAAU,GACvC,GACF;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/esm/PopoverDemo.js

@@ -1,2 +1,76 @@
-import{jsx as o,jsxs as t}from"react/jsx-runtime";import{ChevronDown as s,ChevronLeft as v,ChevronRight as h,ChevronUp as d}from"@tamagui/lucide-icons";import{Adapt as a,Button as i,Input as C,Label as u,Popover as e,XStack as m,YGroup as p}from"tamagui";function S(){return t(m,{space:"$2",flex:1,justifyContent:"center",alignItems:"center",children:[o(r,{placement:"left",Icon:v,Name:"left-popover"}),o(r,{placement:"bottom",Icon:s,Name:"bottom-popover"}),o(r,{placement:"top",Icon:d,Name:"top-popover"}),o(r,{placement:"right",Icon:h,Name:"right-popover"})]})}function r({Icon:l,Name:n,...c}){return t(e,{size:"$5",...c,children:[o(e.Trigger,{asChild:!0,children:o(i,{icon:l})}),o(a,{when:"sm",platform:"web",children:t(e.Sheet,{modal:!0,dismissOnSnapToBottom:!0,children:[o(e.Sheet.Frame,{padding:"$4",children:o(a.Contents,{})}),o(e.Sheet.Overlay,{})]})}),t(e.Content,{borderWidth:1,borderColor:"$borderColor",enterStyle:{x:0,y:-10,opacity:0},exitStyle:{x:0,y:-10,opacity:0},x:0,y:0,opacity:1,animation:["quick",{opacity:{overshootClamping:!0}}],elevate:!0,children:[o(e.Arrow,{borderWidth:1,borderColor:"$borderColor"}),t(p,{space:"$3",children:[o(p.Item,{children:t(m,{space:"$3",children:[o(u,{size:"$3",htmlFor:n,children:"Name"}),o(C,{size:"$3",id:n})]})}),o(p.Item,{children:o(e.Close,{asChild:!0,children:o(i,{size:"$3",onPress:()=>{},children:"Submit"})})})]})]})]})}export{r as Demo,S as PopoverDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "@tamagui/lucide-icons";
+import {
+  Adapt,
+  Button,
+  Input,
+  Label,
+  Popover,
+  XStack,
+  YGroup
+} from "tamagui";
+function PopoverDemo() {
+  return /* @__PURE__ */ jsxs(XStack, { space: "$2", flex: 1, justifyContent: "center", alignItems: "center", children: [
+    /* @__PURE__ */ jsx(Demo, { placement: "left", Icon: ChevronLeft, Name: "left-popover" }),
+    /* @__PURE__ */ jsx(Demo, { placement: "bottom", Icon: ChevronDown, Name: "bottom-popover" }),
+    /* @__PURE__ */ jsx(Demo, { placement: "top", Icon: ChevronUp, Name: "top-popover" }),
+    /* @__PURE__ */ jsx(Demo, { placement: "right", Icon: ChevronRight, Name: "right-popover" })
+  ] });
+}
+function Demo({
+  Icon,
+  Name,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Popover, { size: "$5", ...props, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { icon: Icon }) }),
+    /* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "web", children: /* @__PURE__ */ jsxs(Popover.Sheet, { modal: true, dismissOnSnapToBottom: true, children: [
+      /* @__PURE__ */ jsx(Popover.Sheet.Frame, { padding: "$4", children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }),
+      /* @__PURE__ */ jsx(Popover.Sheet.Overlay, {})
+    ] }) }),
+    /* @__PURE__ */ jsxs(
+      Popover.Content,
+      {
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        enterStyle: { x: 0, y: -10, opacity: 0 },
+        exitStyle: { x: 0, y: -10, opacity: 0 },
+        x: 0,
+        y: 0,
+        opacity: 1,
+        animation: [
+          "quick",
+          {
+            opacity: {
+              overshootClamping: true
+            }
+          }
+        ],
+        elevate: true,
+        children: [
+          /* @__PURE__ */ jsx(Popover.Arrow, { borderWidth: 1, borderColor: "$borderColor" }),
+          /* @__PURE__ */ jsxs(YGroup, { space: "$3", children: [
+            /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsxs(XStack, { space: "$3", children: [
+              /* @__PURE__ */ jsx(Label, { size: "$3", htmlFor: Name, children: "Name" }),
+              /* @__PURE__ */ jsx(Input, { size: "$3", id: Name })
+            ] }) }),
+            /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(Popover.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "$3",
+                onPress: () => {
+                },
+                children: "Submit"
+              }
+            ) }) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Demo,
+  PopoverDemo
+};
 //# sourceMappingURL=PopoverDemo.js.map

package/dist/esm/PopoverDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/PopoverDemo.tsx"],
   "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n  Adapt,\n  Button,\n  Input,\n  Label,\n  Popover,\n  PopoverProps,\n  XStack,\n  YGroup,\n} from 'tamagui'\n\nexport function PopoverDemo() {\n  return (\n    <XStack space=\"$2\" flex={1} justifyContent=\"center\" alignItems=\"center\">\n      <Demo placement=\"left\" Icon={ChevronLeft} Name=\"left-popover\" />\n      <Demo placement=\"bottom\" Icon={ChevronDown} Name=\"bottom-popover\" />\n      <Demo placement=\"top\" Icon={ChevronUp} Name=\"top-popover\" />\n      <Demo placement=\"right\" Icon={ChevronRight} Name=\"right-popover\" />\n    </XStack>\n  )\n}\n\nexport function Demo({\n  Icon,\n  Name,\n  ...props\n}: PopoverProps & { Icon?: any; Name?: string }) {\n  return (\n    <Popover size=\"$5\" {...props}>\n      <Popover.Trigger asChild>\n        <Button icon={Icon} />\n      </Popover.Trigger>\n\n      <Adapt when=\"sm\" platform=\"web\">\n        <Popover.Sheet modal dismissOnSnapToBottom>\n          <Popover.Sheet.Frame padding=\"$4\">\n            <Adapt.Contents />\n          </Popover.Sheet.Frame>\n          <Popover.Sheet.Overlay />\n        </Popover.Sheet>\n      </Adapt>\n\n      <Popover.Content\n        borderWidth={1}\n        borderColor=\"$borderColor\"\n        enterStyle={{ x: 0, y: -10, opacity: 0 }}\n        exitStyle={{ x: 0, y: -10, opacity: 0 }}\n        x={0}\n        y={0}\n        opacity={1}\n        animation={[\n          'quick',\n          {\n            opacity: {\n              overshootClamping: true,\n            },\n          },\n        ]}\n        elevate\n      >\n        <Popover.Arrow borderWidth={1} borderColor=\"$borderColor\" />\n\n        <YGroup space=\"$3\">\n          <YGroup.Item>\n            <XStack space=\"$3\">\n              <Label size=\"$3\" htmlFor={Name}>\n                Name\n              </Label>\n              <Input size=\"$3\" id={Name} />\n            </XStack>\n          </YGroup.Item>\n          <YGroup.Item>\n            <Popover.Close asChild>\n              <Button\n                size=\"$3\"\n                onPress={() => {\n                  /* Custom code goes here, does not interfere with popover closure */\n                }}\n              >\n                Submit\n              </Button>\n            </Popover.Close>\n          </YGroup.Item>\n        </YGroup>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],
-  "mappings": "AAcI,OACE,OAAAA,EADF,QAAAC,MAAA,oBAdJ,OAAS,eAAAC,EAAa,eAAAC,EAAa,gBAAAC,EAAc,aAAAC,MAAiB,wBAClE,OACE,SAAAC,EACA,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,WAAAC,EAEA,UAAAC,EACA,UAAAC,MACK,UAEA,SAASC,GAAc,CAC5B,OACEZ,EAACU,EAAA,CAAO,MAAM,KAAK,KAAM,EAAG,eAAe,SAAS,WAAW,SAC7D,UAAAX,EAACc,EAAA,CAAK,UAAU,OAAO,KAAMX,EAAa,KAAK,eAAe,EAC9DH,EAACc,EAAA,CAAK,UAAU,SAAS,KAAMZ,EAAa,KAAK,iBAAiB,EAClEF,EAACc,EAAA,CAAK,UAAU,MAAM,KAAMT,EAAW,KAAK,cAAc,EAC1DL,EAACc,EAAA,CAAK,UAAU,QAAQ,KAAMV,EAAc,KAAK,gBAAgB,GACnE,CAEJ,CAEO,SAASU,EAAK,CACnB,KAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAiD,CAC/C,OACEhB,EAACS,EAAA,CAAQ,KAAK,KAAM,GAAGO,EACrB,UAAAjB,EAACU,EAAQ,QAAR,CAAgB,QAAO,GACtB,SAAAV,EAACO,EAAA,CAAO,KAAMQ,EAAM,EACtB,EAEAf,EAACM,EAAA,CAAM,KAAK,KAAK,SAAS,MACxB,SAAAL,EAACS,EAAQ,MAAR,CAAc,MAAK,GAAC,sBAAqB,GACxC,UAAAV,EAACU,EAAQ,MAAM,MAAd,CAAoB,QAAQ,KAC3B,SAAAV,EAACM,EAAM,SAAN,EAAe,EAClB,EACAN,EAACU,EAAQ,MAAM,QAAd,EAAsB,GACzB,EACF,EAEAT,EAACS,EAAQ,QAAR,CACC,YAAa,EACb,YAAY,eACZ,WAAY,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,CAAE,EACvC,UAAW,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,CAAE,EACtC,EAAG,EACH,EAAG,EACH,QAAS,EACT,UAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EACA,QAAO,GAEP,UAAAV,EAACU,EAAQ,MAAR,CAAc,YAAa,EAAG,YAAY,eAAe,EAE1DT,EAACW,EAAA,CAAO,MAAM,KACZ,UAAAZ,EAACY,EAAO,KAAP,CACC,SAAAX,EAACU,EAAA,CAAO,MAAM,KACZ,UAAAX,EAACS,EAAA,CAAM,KAAK,KAAK,QAASO,EAAM,gBAEhC,EACAhB,EAACQ,EAAA,CAAM,KAAK,KAAK,GAAIQ,EAAM,GAC7B,EACF,EACAhB,EAACY,EAAO,KAAP,CACC,SAAAZ,EAACU,EAAQ,MAAR,CAAc,QAAO,GACpB,SAAAV,EAACO,EAAA,CACC,KAAK,KACL,QAAS,IAAM,CAEf,EACD,kBAED,EACF,EACF,GACF,GACF,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Adapt", "Button", "Input", "Label", "Popover", "XStack", "YGroup", "PopoverDemo", "Demo", "Icon", "Name", "props"]
+  "mappings": "AAcI,SACE,KADF;AAdJ,SAAS,aAAa,aAAa,cAAc,iBAAiB;AAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc;AAC5B,SACE,qBAAC,UAAO,OAAM,MAAK,MAAM,GAAG,gBAAe,UAAS,YAAW,UAC7D;AAAA,wBAAC,QAAK,WAAU,QAAO,MAAM,aAAa,MAAK,gBAAe;AAAA,IAC9D,oBAAC,QAAK,WAAU,UAAS,MAAM,aAAa,MAAK,kBAAiB;AAAA,IAClE,oBAAC,QAAK,WAAU,OAAM,MAAM,WAAW,MAAK,eAAc;AAAA,IAC1D,oBAAC,QAAK,WAAU,SAAQ,MAAM,cAAc,MAAK,iBAAgB;AAAA,KACnE;AAEJ;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE,qBAAC,WAAQ,MAAK,MAAM,GAAG,OACrB;AAAA,wBAAC,QAAQ,SAAR,EAAgB,SAAO,MACtB,8BAAC,UAAO,MAAM,MAAM,GACtB;AAAA,IAEA,oBAAC,SAAM,MAAK,MAAK,UAAS,OACxB,+BAAC,QAAQ,OAAR,EAAc,OAAK,MAAC,uBAAqB,MACxC;AAAA,0BAAC,QAAQ,MAAM,OAAd,EAAoB,SAAQ,MAC3B,8BAAC,MAAM,UAAN,EAAe,GAClB;AAAA,MACA,oBAAC,QAAQ,MAAM,SAAd,EAAsB;AAAA,OACzB,GACF;AAAA,IAEA;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACC,aAAa;AAAA,QACb,aAAY;AAAA,QACZ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,EAAE;AAAA,QACvC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,EAAE;AAAA,QACtC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAO;AAAA,QAEP;AAAA,8BAAC,QAAQ,OAAR,EAAc,aAAa,GAAG,aAAY,gBAAe;AAAA,UAE1D,qBAAC,UAAO,OAAM,MACZ;AAAA,gCAAC,OAAO,MAAP,EACC,+BAAC,UAAO,OAAM,MACZ;AAAA,kCAAC,SAAM,MAAK,MAAK,SAAS,MAAM,kBAEhC;AAAA,cACA,oBAAC,SAAM,MAAK,MAAK,IAAI,MAAM;AAAA,eAC7B,GACF;AAAA,YACA,oBAAC,OAAO,MAAP,EACC,8BAAC,QAAQ,OAAR,EAAc,SAAO,MACpB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM;AAAA,gBAEf;AAAA,gBACD;AAAA;AAAA,YAED,GACF,GACF;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/esm/PopoverDemo.mjs

@@ -1,2 +1,76 @@
-import{jsx as o,jsxs as t}from"react/jsx-runtime";import{ChevronDown as s,ChevronLeft as v,ChevronRight as h,ChevronUp as d}from"@tamagui/lucide-icons";import{Adapt as a,Button as i,Input as C,Label as u,Popover as e,XStack as m,YGroup as p}from"tamagui";function S(){return t(m,{space:"$2",flex:1,justifyContent:"center",alignItems:"center",children:[o(r,{placement:"left",Icon:v,Name:"left-popover"}),o(r,{placement:"bottom",Icon:s,Name:"bottom-popover"}),o(r,{placement:"top",Icon:d,Name:"top-popover"}),o(r,{placement:"right",Icon:h,Name:"right-popover"})]})}function r({Icon:l,Name:n,...c}){return t(e,{size:"$5",...c,children:[o(e.Trigger,{asChild:!0,children:o(i,{icon:l})}),o(a,{when:"sm",platform:"web",children:t(e.Sheet,{modal:!0,dismissOnSnapToBottom:!0,children:[o(e.Sheet.Frame,{padding:"$4",children:o(a.Contents,{})}),o(e.Sheet.Overlay,{})]})}),t(e.Content,{borderWidth:1,borderColor:"$borderColor",enterStyle:{x:0,y:-10,opacity:0},exitStyle:{x:0,y:-10,opacity:0},x:0,y:0,opacity:1,animation:["quick",{opacity:{overshootClamping:!0}}],elevate:!0,children:[o(e.Arrow,{borderWidth:1,borderColor:"$borderColor"}),t(p,{space:"$3",children:[o(p.Item,{children:t(m,{space:"$3",children:[o(u,{size:"$3",htmlFor:n,children:"Name"}),o(C,{size:"$3",id:n})]})}),o(p.Item,{children:o(e.Close,{asChild:!0,children:o(i,{size:"$3",onPress:()=>{},children:"Submit"})})})]})]})]})}export{r as Demo,S as PopoverDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "@tamagui/lucide-icons";
+import {
+  Adapt,
+  Button,
+  Input,
+  Label,
+  Popover,
+  XStack,
+  YGroup
+} from "tamagui";
+function PopoverDemo() {
+  return /* @__PURE__ */ jsxs(XStack, { space: "$2", flex: 1, justifyContent: "center", alignItems: "center", children: [
+    /* @__PURE__ */ jsx(Demo, { placement: "left", Icon: ChevronLeft, Name: "left-popover" }),
+    /* @__PURE__ */ jsx(Demo, { placement: "bottom", Icon: ChevronDown, Name: "bottom-popover" }),
+    /* @__PURE__ */ jsx(Demo, { placement: "top", Icon: ChevronUp, Name: "top-popover" }),
+    /* @__PURE__ */ jsx(Demo, { placement: "right", Icon: ChevronRight, Name: "right-popover" })
+  ] });
+}
+function Demo({
+  Icon,
+  Name,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Popover, { size: "$5", ...props, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { icon: Icon }) }),
+    /* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "web", children: /* @__PURE__ */ jsxs(Popover.Sheet, { modal: true, dismissOnSnapToBottom: true, children: [
+      /* @__PURE__ */ jsx(Popover.Sheet.Frame, { padding: "$4", children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }),
+      /* @__PURE__ */ jsx(Popover.Sheet.Overlay, {})
+    ] }) }),
+    /* @__PURE__ */ jsxs(
+      Popover.Content,
+      {
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        enterStyle: { x: 0, y: -10, opacity: 0 },
+        exitStyle: { x: 0, y: -10, opacity: 0 },
+        x: 0,
+        y: 0,
+        opacity: 1,
+        animation: [
+          "quick",
+          {
+            opacity: {
+              overshootClamping: true
+            }
+          }
+        ],
+        elevate: true,
+        children: [
+          /* @__PURE__ */ jsx(Popover.Arrow, { borderWidth: 1, borderColor: "$borderColor" }),
+          /* @__PURE__ */ jsxs(YGroup, { space: "$3", children: [
+            /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsxs(XStack, { space: "$3", children: [
+              /* @__PURE__ */ jsx(Label, { size: "$3", htmlFor: Name, children: "Name" }),
+              /* @__PURE__ */ jsx(Input, { size: "$3", id: Name })
+            ] }) }),
+            /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(Popover.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "$3",
+                onPress: () => {
+                },
+                children: "Submit"
+              }
+            ) }) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Demo,
+  PopoverDemo
+};
 //# sourceMappingURL=PopoverDemo.mjs.map

package/dist/esm/PopoverDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/PopoverDemo.tsx"],
   "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n  Adapt,\n  Button,\n  Input,\n  Label,\n  Popover,\n  PopoverProps,\n  XStack,\n  YGroup,\n} from 'tamagui'\n\nexport function PopoverDemo() {\n  return (\n    <XStack space=\"$2\" flex={1} justifyContent=\"center\" alignItems=\"center\">\n      <Demo placement=\"left\" Icon={ChevronLeft} Name=\"left-popover\" />\n      <Demo placement=\"bottom\" Icon={ChevronDown} Name=\"bottom-popover\" />\n      <Demo placement=\"top\" Icon={ChevronUp} Name=\"top-popover\" />\n      <Demo placement=\"right\" Icon={ChevronRight} Name=\"right-popover\" />\n    </XStack>\n  )\n}\n\nexport function Demo({\n  Icon,\n  Name,\n  ...props\n}: PopoverProps & { Icon?: any; Name?: string }) {\n  return (\n    <Popover size=\"$5\" {...props}>\n      <Popover.Trigger asChild>\n        <Button icon={Icon} />\n      </Popover.Trigger>\n\n      <Adapt when=\"sm\" platform=\"web\">\n        <Popover.Sheet modal dismissOnSnapToBottom>\n          <Popover.Sheet.Frame padding=\"$4\">\n            <Adapt.Contents />\n          </Popover.Sheet.Frame>\n          <Popover.Sheet.Overlay />\n        </Popover.Sheet>\n      </Adapt>\n\n      <Popover.Content\n        borderWidth={1}\n        borderColor=\"$borderColor\"\n        enterStyle={{ x: 0, y: -10, opacity: 0 }}\n        exitStyle={{ x: 0, y: -10, opacity: 0 }}\n        x={0}\n        y={0}\n        opacity={1}\n        animation={[\n          'quick',\n          {\n            opacity: {\n              overshootClamping: true,\n            },\n          },\n        ]}\n        elevate\n      >\n        <Popover.Arrow borderWidth={1} borderColor=\"$borderColor\" />\n\n        <YGroup space=\"$3\">\n          <YGroup.Item>\n            <XStack space=\"$3\">\n              <Label size=\"$3\" htmlFor={Name}>\n                Name\n              </Label>\n              <Input size=\"$3\" id={Name} />\n            </XStack>\n          </YGroup.Item>\n          <YGroup.Item>\n            <Popover.Close asChild>\n              <Button\n                size=\"$3\"\n                onPress={() => {\n                  /* Custom code goes here, does not interfere with popover closure */\n                }}\n              >\n                Submit\n              </Button>\n            </Popover.Close>\n          </YGroup.Item>\n        </YGroup>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],
-  "mappings": "AAcI,OACE,OAAAA,EADF,QAAAC,MAAA,oBAdJ,OAAS,eAAAC,EAAa,eAAAC,EAAa,gBAAAC,EAAc,aAAAC,MAAiB,wBAClE,OACE,SAAAC,EACA,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,WAAAC,EAEA,UAAAC,EACA,UAAAC,MACK,UAEA,SAASC,GAAc,CAC5B,OACEZ,EAACU,EAAA,CAAO,MAAM,KAAK,KAAM,EAAG,eAAe,SAAS,WAAW,SAC7D,UAAAX,EAACc,EAAA,CAAK,UAAU,OAAO,KAAMX,EAAa,KAAK,eAAe,EAC9DH,EAACc,EAAA,CAAK,UAAU,SAAS,KAAMZ,EAAa,KAAK,iBAAiB,EAClEF,EAACc,EAAA,CAAK,UAAU,MAAM,KAAMT,EAAW,KAAK,cAAc,EAC1DL,EAACc,EAAA,CAAK,UAAU,QAAQ,KAAMV,EAAc,KAAK,gBAAgB,GACnE,CAEJ,CAEO,SAASU,EAAK,CACnB,KAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAiD,CAC/C,OACEhB,EAACS,EAAA,CAAQ,KAAK,KAAM,GAAGO,EACrB,UAAAjB,EAACU,EAAQ,QAAR,CAAgB,QAAO,GACtB,SAAAV,EAACO,EAAA,CAAO,KAAMQ,EAAM,EACtB,EAEAf,EAACM,EAAA,CAAM,KAAK,KAAK,SAAS,MACxB,SAAAL,EAACS,EAAQ,MAAR,CAAc,MAAK,GAAC,sBAAqB,GACxC,UAAAV,EAACU,EAAQ,MAAM,MAAd,CAAoB,QAAQ,KAC3B,SAAAV,EAACM,EAAM,SAAN,EAAe,EAClB,EACAN,EAACU,EAAQ,MAAM,QAAd,EAAsB,GACzB,EACF,EAEAT,EAACS,EAAQ,QAAR,CACC,YAAa,EACb,YAAY,eACZ,WAAY,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,CAAE,EACvC,UAAW,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,CAAE,EACtC,EAAG,EACH,EAAG,EACH,QAAS,EACT,UAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EACA,QAAO,GAEP,UAAAV,EAACU,EAAQ,MAAR,CAAc,YAAa,EAAG,YAAY,eAAe,EAE1DT,EAACW,EAAA,CAAO,MAAM,KACZ,UAAAZ,EAACY,EAAO,KAAP,CACC,SAAAX,EAACU,EAAA,CAAO,MAAM,KACZ,UAAAX,EAACS,EAAA,CAAM,KAAK,KAAK,QAASO,EAAM,gBAEhC,EACAhB,EAACQ,EAAA,CAAM,KAAK,KAAK,GAAIQ,EAAM,GAC7B,EACF,EACAhB,EAACY,EAAO,KAAP,CACC,SAAAZ,EAACU,EAAQ,MAAR,CAAc,QAAO,GACpB,SAAAV,EAACO,EAAA,CACC,KAAK,KACL,QAAS,IAAM,CAEf,EACD,kBAED,EACF,EACF,GACF,GACF,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Adapt", "Button", "Input", "Label", "Popover", "XStack", "YGroup", "PopoverDemo", "Demo", "Icon", "Name", "props"]
+  "mappings": "AAcI,SACE,KADF;AAdJ,SAAS,aAAa,aAAa,cAAc,iBAAiB;AAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc;AAC5B,SACE,qBAAC,UAAO,OAAM,MAAK,MAAM,GAAG,gBAAe,UAAS,YAAW,UAC7D;AAAA,wBAAC,QAAK,WAAU,QAAO,MAAM,aAAa,MAAK,gBAAe;AAAA,IAC9D,oBAAC,QAAK,WAAU,UAAS,MAAM,aAAa,MAAK,kBAAiB;AAAA,IAClE,oBAAC,QAAK,WAAU,OAAM,MAAM,WAAW,MAAK,eAAc;AAAA,IAC1D,oBAAC,QAAK,WAAU,SAAQ,MAAM,cAAc,MAAK,iBAAgB;AAAA,KACnE;AAEJ;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE,qBAAC,WAAQ,MAAK,MAAM,GAAG,OACrB;AAAA,wBAAC,QAAQ,SAAR,EAAgB,SAAO,MACtB,8BAAC,UAAO,MAAM,MAAM,GACtB;AAAA,IAEA,oBAAC,SAAM,MAAK,MAAK,UAAS,OACxB,+BAAC,QAAQ,OAAR,EAAc,OAAK,MAAC,uBAAqB,MACxC;AAAA,0BAAC,QAAQ,MAAM,OAAd,EAAoB,SAAQ,MAC3B,8BAAC,MAAM,UAAN,EAAe,GAClB;AAAA,MACA,oBAAC,QAAQ,MAAM,SAAd,EAAsB;AAAA,OACzB,GACF;AAAA,IAEA;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACC,aAAa;AAAA,QACb,aAAY;AAAA,QACZ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,EAAE;AAAA,QACvC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,EAAE;AAAA,QACtC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAO;AAAA,QAEP;AAAA,8BAAC,QAAQ,OAAR,EAAc,aAAa,GAAG,aAAY,gBAAe;AAAA,UAE1D,qBAAC,UAAO,OAAM,MACZ;AAAA,gCAAC,OAAO,MAAP,EACC,+BAAC,UAAO,OAAM,MACZ;AAAA,kCAAC,SAAM,MAAK,MAAK,SAAS,MAAM,kBAEhC;AAAA,cACA,oBAAC,SAAM,MAAK,MAAK,IAAI,MAAM;AAAA,eAC7B,GACF;AAAA,YACA,oBAAC,OAAO,MAAP,EACC,8BAAC,QAAQ,OAAR,EAAc,SAAO,MACpB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM;AAAA,gBAEf;AAAA,gBACD;AAAA;AAAA,YAED,GACF,GACF;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/esm/ProgressDemo.js

@@ -1,2 +1,48 @@
-import{Fragment as h,jsx as e,jsxs as o}from"react/jsx-runtime";import{useEffect as m,useState as a}from"react";import{Button as p,Paragraph as d,Progress as n,Slider as r,XStack as S,YStack as g}from"tamagui";function T(){const[s,c]=a(4),[u,i]=a(20),l=`$${s}`;return m(()=>{const t=setTimeout(()=>i(60),1e3);return()=>{clearTimeout(t)}},[]),o(h,{children:[o(g,{height:60,alignItems:"center",space:!0,children:[o(d,{height:30,opacity:.5,children:["Size: ",s]}),e(n,{size:l,value:u,children:e(n.Indicator,{animation:"bouncy"})})]}),o(S,{ai:"center",space:!0,position:"absolute",bottom:"$3",left:"$4",$xxs:{display:"none"},children:[o(r,{size:"$2",width:130,defaultValue:[4],min:2,max:6,step:1,onValueChange:([t])=>{c(t)},children:[e(r.Track,{borderWidth:1,borderColor:"$color5",children:e(r.TrackActive,{})}),e(r.Thumb,{circular:!0,index:0})]}),e(p,{size:"$2",onPress:()=>i(t=>(t+20)%100),children:"Load"})]})]})}export{T as ProgressDemo};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Button, Paragraph, Progress, Slider, XStack, YStack } from "tamagui";
+function ProgressDemo() {
+  const [size, setSize] = useState(4);
+  const [progress, setProgress] = useState(20);
+  const sizeProp = `$${size}`;
+  useEffect(() => {
+    const timer = setTimeout(() => setProgress(60), 1e3);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(YStack, { height: 60, alignItems: "center", space: true, children: [
+      /* @__PURE__ */ jsxs(Paragraph, { height: 30, opacity: 0.5, children: [
+        "Size: ",
+        size
+      ] }),
+      /* @__PURE__ */ jsx(Progress, { size: sizeProp, value: progress, children: /* @__PURE__ */ jsx(Progress.Indicator, { animation: "bouncy" }) })
+    ] }),
+    /* @__PURE__ */ jsxs(XStack, { ai: "center", space: true, position: "absolute", bottom: "$3", left: "$4", $xxs: { display: "none" }, children: [
+      /* @__PURE__ */ jsxs(
+        Slider,
+        {
+          size: "$2",
+          width: 130,
+          defaultValue: [4],
+          min: 2,
+          max: 6,
+          step: 1,
+          onValueChange: ([val]) => {
+            setSize(val);
+          },
+          children: [
+            /* @__PURE__ */ jsx(Slider.Track, { borderWidth: 1, borderColor: "$color5", children: /* @__PURE__ */ jsx(Slider.TrackActive, {}) }),
+            /* @__PURE__ */ jsx(Slider.Thumb, { circular: true, index: 0 })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { size: "$2", onPress: () => setProgress((prev) => (prev + 20) % 100), children: "Load" })
+    ] })
+  ] });
+}
+export {
+  ProgressDemo
+};
 //# sourceMappingURL=ProgressDemo.js.map

package/dist/esm/ProgressDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/ProgressDemo.tsx"],
   "sourcesContent": ["import { useEffect, useState } from 'react'\nimport { Button, Paragraph, Progress, SizeTokens, Slider, XStack, YStack } from 'tamagui'\n\nexport function ProgressDemo() {\n  const [size, setSize] = useState(4)\n  const [progress, setProgress] = useState(20)\n  const sizeProp = `$${size}` as SizeTokens\n\n  useEffect(() => {\n    const timer = setTimeout(() => setProgress(60), 1000)\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [])\n\n  return (\n    <>\n      <YStack height={60} alignItems=\"center\" space>\n        <Paragraph height={30} opacity={0.5}>\n          Size: {size}\n        </Paragraph>\n        <Progress size={sizeProp} value={progress}>\n          <Progress.Indicator animation=\"bouncy\" />\n        </Progress>\n      </YStack>\n\n      <XStack ai=\"center\" space position=\"absolute\" bottom=\"$3\" left=\"$4\" $xxs={{ display: 'none' }}>\n        <Slider\n          size=\"$2\"\n          width={130}\n          defaultValue={[4]}\n          min={2}\n          max={6}\n          step={1}\n          onValueChange={([val]) => {\n            setSize(val)\n          }}\n        >\n          <Slider.Track borderWidth={1} borderColor=\"$color5\">\n            <Slider.TrackActive />\n          </Slider.Track>\n          <Slider.Thumb circular index={0} />\n        </Slider>\n\n        <Button size=\"$2\" onPress={() => setProgress((prev) => (prev + 20) % 100)}>\n          Load\n        </Button>\n      </XStack>\n    </>\n  )\n}\n"],
-  "mappings": "AAgBI,mBAAAA,EAMM,OAAAC,EAJF,QAAAC,MAFJ,oBAhBJ,OAAS,aAAAC,EAAW,YAAAC,MAAgB,QACpC,OAAS,UAAAC,EAAQ,aAAAC,EAAW,YAAAC,EAAsB,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAEzE,SAASC,GAAe,CAC7B,KAAM,CAACC,EAAMC,CAAO,EAAIT,EAAS,CAAC,EAC5B,CAACU,EAAUC,CAAW,EAAIX,EAAS,EAAE,EACrCY,EAAW,IAAIJ,IAErB,OAAAT,EAAU,IAAM,CACd,MAAMc,EAAQ,WAAW,IAAMF,EAAY,EAAE,EAAG,GAAI,EACpD,MAAO,IAAM,CACX,aAAaE,CAAK,CACpB,CACF,EAAG,CAAC,CAAC,EAGHf,EAAAF,EAAA,CACE,UAAAE,EAACQ,EAAA,CAAO,OAAQ,GAAI,WAAW,SAAS,MAAK,GAC3C,UAAAR,EAACI,EAAA,CAAU,OAAQ,GAAI,QAAS,GAAK,mBAC5BM,GACT,EACAX,EAACM,EAAA,CAAS,KAAMS,EAAU,MAAOF,EAC/B,SAAAb,EAACM,EAAS,UAAT,CAAmB,UAAU,SAAS,EACzC,GACF,EAEAL,EAACO,EAAA,CAAO,GAAG,SAAS,MAAK,GAAC,SAAS,WAAW,OAAO,KAAK,KAAK,KAAK,KAAM,CAAE,QAAS,MAAO,EAC1F,UAAAP,EAACM,EAAA,CACC,KAAK,KACL,MAAO,IACP,aAAc,CAAC,CAAC,EAChB,IAAK,EACL,IAAK,EACL,KAAM,EACN,cAAe,CAAC,CAACU,CAAG,IAAM,CACxBL,EAAQK,CAAG,CACb,EAEA,UAAAjB,EAACO,EAAO,MAAP,CAAa,YAAa,EAAG,YAAY,UACxC,SAAAP,EAACO,EAAO,YAAP,EAAmB,EACtB,EACAP,EAACO,EAAO,MAAP,CAAa,SAAQ,GAAC,MAAO,EAAG,GACnC,EAEAP,EAACI,EAAA,CAAO,KAAK,KAAK,QAAS,IAAMU,EAAaI,IAAUA,EAAO,IAAM,GAAG,EAAG,gBAE3E,GACF,GACF,CAEJ",
-  "names": ["Fragment", "jsx", "jsxs", "useEffect", "useState", "Button", "Paragraph", "Progress", "Slider", "XStack", "YStack", "ProgressDemo", "size", "setSize", "progress", "setProgress", "sizeProp", "timer", "val", "prev"]
+  "mappings": "AAgBI,mBAMM,KAJF,YAFJ;AAhBJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,WAAW,UAAsB,QAAQ,QAAQ,cAAc;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,WAAW,IAAI;AAErB,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,EAAE,GAAG,GAAI;AACpD,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,iCACE;AAAA,yBAAC,UAAO,QAAQ,IAAI,YAAW,UAAS,OAAK,MAC3C;AAAA,2BAAC,aAAU,QAAQ,IAAI,SAAS,KAAK;AAAA;AAAA,QAC5B;AAAA,SACT;AAAA,MACA,oBAAC,YAAS,MAAM,UAAU,OAAO,UAC/B,8BAAC,SAAS,WAAT,EAAmB,WAAU,UAAS,GACzC;AAAA,OACF;AAAA,IAEA,qBAAC,UAAO,IAAG,UAAS,OAAK,MAAC,UAAS,YAAW,QAAO,MAAK,MAAK,MAAK,MAAM,EAAE,SAAS,OAAO,GAC1F;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,cAAc,CAAC,CAAC;AAAA,UAChB,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,oBAAQ,GAAG;AAAA,UACb;AAAA,UAEA;AAAA,gCAAC,OAAO,OAAP,EAAa,aAAa,GAAG,aAAY,WACxC,8BAAC,OAAO,aAAP,EAAmB,GACtB;AAAA,YACA,oBAAC,OAAO,OAAP,EAAa,UAAQ,MAAC,OAAO,GAAG;AAAA;AAAA;AAAA,MACnC;AAAA,MAEA,oBAAC,UAAO,MAAK,MAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,kBAE3E;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/esm/ProgressDemo.mjs

@@ -1,2 +1,48 @@
-import{Fragment as h,jsx as e,jsxs as o}from"react/jsx-runtime";import{useEffect as m,useState as a}from"react";import{Button as p,Paragraph as d,Progress as n,Slider as r,XStack as S,YStack as g}from"tamagui";function T(){const[s,c]=a(4),[u,i]=a(20),l=`$${s}`;return m(()=>{const t=setTimeout(()=>i(60),1e3);return()=>{clearTimeout(t)}},[]),o(h,{children:[o(g,{height:60,alignItems:"center",space:!0,children:[o(d,{height:30,opacity:.5,children:["Size: ",s]}),e(n,{size:l,value:u,children:e(n.Indicator,{animation:"bouncy"})})]}),o(S,{ai:"center",space:!0,position:"absolute",bottom:"$3",left:"$4",$xxs:{display:"none"},children:[o(r,{size:"$2",width:130,defaultValue:[4],min:2,max:6,step:1,onValueChange:([t])=>{c(t)},children:[e(r.Track,{borderWidth:1,borderColor:"$color5",children:e(r.TrackActive,{})}),e(r.Thumb,{circular:!0,index:0})]}),e(p,{size:"$2",onPress:()=>i(t=>(t+20)%100),children:"Load"})]})]})}export{T as ProgressDemo};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Button, Paragraph, Progress, Slider, XStack, YStack } from "tamagui";
+function ProgressDemo() {
+  const [size, setSize] = useState(4);
+  const [progress, setProgress] = useState(20);
+  const sizeProp = `$${size}`;
+  useEffect(() => {
+    const timer = setTimeout(() => setProgress(60), 1e3);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(YStack, { height: 60, alignItems: "center", space: true, children: [
+      /* @__PURE__ */ jsxs(Paragraph, { height: 30, opacity: 0.5, children: [
+        "Size: ",
+        size
+      ] }),
+      /* @__PURE__ */ jsx(Progress, { size: sizeProp, value: progress, children: /* @__PURE__ */ jsx(Progress.Indicator, { animation: "bouncy" }) })
+    ] }),
+    /* @__PURE__ */ jsxs(XStack, { ai: "center", space: true, position: "absolute", bottom: "$3", left: "$4", $xxs: { display: "none" }, children: [
+      /* @__PURE__ */ jsxs(
+        Slider,
+        {
+          size: "$2",
+          width: 130,
+          defaultValue: [4],
+          min: 2,
+          max: 6,
+          step: 1,
+          onValueChange: ([val]) => {
+            setSize(val);
+          },
+          children: [
+            /* @__PURE__ */ jsx(Slider.Track, { borderWidth: 1, borderColor: "$color5", children: /* @__PURE__ */ jsx(Slider.TrackActive, {}) }),
+            /* @__PURE__ */ jsx(Slider.Thumb, { circular: true, index: 0 })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { size: "$2", onPress: () => setProgress((prev) => (prev + 20) % 100), children: "Load" })
+    ] })
+  ] });
+}
+export {
+  ProgressDemo
+};
 //# sourceMappingURL=ProgressDemo.mjs.map

package/dist/esm/ProgressDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/ProgressDemo.tsx"],
   "sourcesContent": ["import { useEffect, useState } from 'react'\nimport { Button, Paragraph, Progress, SizeTokens, Slider, XStack, YStack } from 'tamagui'\n\nexport function ProgressDemo() {\n  const [size, setSize] = useState(4)\n  const [progress, setProgress] = useState(20)\n  const sizeProp = `$${size}` as SizeTokens\n\n  useEffect(() => {\n    const timer = setTimeout(() => setProgress(60), 1000)\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [])\n\n  return (\n    <>\n      <YStack height={60} alignItems=\"center\" space>\n        <Paragraph height={30} opacity={0.5}>\n          Size: {size}\n        </Paragraph>\n        <Progress size={sizeProp} value={progress}>\n          <Progress.Indicator animation=\"bouncy\" />\n        </Progress>\n      </YStack>\n\n      <XStack ai=\"center\" space position=\"absolute\" bottom=\"$3\" left=\"$4\" $xxs={{ display: 'none' }}>\n        <Slider\n          size=\"$2\"\n          width={130}\n          defaultValue={[4]}\n          min={2}\n          max={6}\n          step={1}\n          onValueChange={([val]) => {\n            setSize(val)\n          }}\n        >\n          <Slider.Track borderWidth={1} borderColor=\"$color5\">\n            <Slider.TrackActive />\n          </Slider.Track>\n          <Slider.Thumb circular index={0} />\n        </Slider>\n\n        <Button size=\"$2\" onPress={() => setProgress((prev) => (prev + 20) % 100)}>\n          Load\n        </Button>\n      </XStack>\n    </>\n  )\n}\n"],
-  "mappings": "AAgBI,mBAAAA,EAMM,OAAAC,EAJF,QAAAC,MAFJ,oBAhBJ,OAAS,aAAAC,EAAW,YAAAC,MAAgB,QACpC,OAAS,UAAAC,EAAQ,aAAAC,EAAW,YAAAC,EAAsB,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAEzE,SAASC,GAAe,CAC7B,KAAM,CAACC,EAAMC,CAAO,EAAIT,EAAS,CAAC,EAC5B,CAACU,EAAUC,CAAW,EAAIX,EAAS,EAAE,EACrCY,EAAW,IAAIJ,IAErB,OAAAT,EAAU,IAAM,CACd,MAAMc,EAAQ,WAAW,IAAMF,EAAY,EAAE,EAAG,GAAI,EACpD,MAAO,IAAM,CACX,aAAaE,CAAK,CACpB,CACF,EAAG,CAAC,CAAC,EAGHf,EAAAF,EAAA,CACE,UAAAE,EAACQ,EAAA,CAAO,OAAQ,GAAI,WAAW,SAAS,MAAK,GAC3C,UAAAR,EAACI,EAAA,CAAU,OAAQ,GAAI,QAAS,GAAK,mBAC5BM,GACT,EACAX,EAACM,EAAA,CAAS,KAAMS,EAAU,MAAOF,EAC/B,SAAAb,EAACM,EAAS,UAAT,CAAmB,UAAU,SAAS,EACzC,GACF,EAEAL,EAACO,EAAA,CAAO,GAAG,SAAS,MAAK,GAAC,SAAS,WAAW,OAAO,KAAK,KAAK,KAAK,KAAM,CAAE,QAAS,MAAO,EAC1F,UAAAP,EAACM,EAAA,CACC,KAAK,KACL,MAAO,IACP,aAAc,CAAC,CAAC,EAChB,IAAK,EACL,IAAK,EACL,KAAM,EACN,cAAe,CAAC,CAACU,CAAG,IAAM,CACxBL,EAAQK,CAAG,CACb,EAEA,UAAAjB,EAACO,EAAO,MAAP,CAAa,YAAa,EAAG,YAAY,UACxC,SAAAP,EAACO,EAAO,YAAP,EAAmB,EACtB,EACAP,EAACO,EAAO,MAAP,CAAa,SAAQ,GAAC,MAAO,EAAG,GACnC,EAEAP,EAACI,EAAA,CAAO,KAAK,KAAK,QAAS,IAAMU,EAAaI,IAAUA,EAAO,IAAM,GAAG,EAAG,gBAE3E,GACF,GACF,CAEJ",
-  "names": ["Fragment", "jsx", "jsxs", "useEffect", "useState", "Button", "Paragraph", "Progress", "Slider", "XStack", "YStack", "ProgressDemo", "size", "setSize", "progress", "setProgress", "sizeProp", "timer", "val", "prev"]
+  "mappings": "AAgBI,mBAMM,KAJF,YAFJ;AAhBJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,WAAW,UAAsB,QAAQ,QAAQ,cAAc;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,WAAW,IAAI;AAErB,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,EAAE,GAAG,GAAI;AACpD,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,iCACE;AAAA,yBAAC,UAAO,QAAQ,IAAI,YAAW,UAAS,OAAK,MAC3C;AAAA,2BAAC,aAAU,QAAQ,IAAI,SAAS,KAAK;AAAA;AAAA,QAC5B;AAAA,SACT;AAAA,MACA,oBAAC,YAAS,MAAM,UAAU,OAAO,UAC/B,8BAAC,SAAS,WAAT,EAAmB,WAAU,UAAS,GACzC;AAAA,OACF;AAAA,IAEA,qBAAC,UAAO,IAAG,UAAS,OAAK,MAAC,UAAS,YAAW,QAAO,MAAK,MAAK,MAAK,MAAM,EAAE,SAAS,OAAO,GAC1F;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,cAAc,CAAC,CAAC;AAAA,UAChB,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,oBAAQ,GAAG;AAAA,UACb;AAAA,UAEA;AAAA,gCAAC,OAAO,OAAP,EAAa,aAAa,GAAG,aAAY,WACxC,8BAAC,OAAO,aAAP,EAAmB,GACtB;AAAA,YACA,oBAAC,OAAO,OAAP,EAAa,UAAQ,MAAC,OAAO,GAAG;AAAA;AAAA;AAAA,MACnC;AAAA,MAEA,oBAAC,UAAO,MAAK,MAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,kBAE3E;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/esm/RadioGroupDemo.js

@@ -1,2 +1,20 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Label as u,RadioGroup as i,XStack as n,YStack as r}from"tamagui";function m(){return e(i,{defaultValue:"3",name:"form",children:o(r,{width:300,alignItems:"center",space:"$2",children:[e(l,{size:"$3",value:"2",label:"Second value"}),e(l,{size:"$4",value:"3",label:"Third value"}),e(l,{size:"$5",value:"4",label:"Fourth value"})]})})}function l(a){const t=`radiogroup-${a.value}`;return o(n,{width:300,alignItems:"center",space:"$4",children:[e(i.Item,{value:a.value,id:t,size:a.size,children:e(i.Indicator,{})}),e(u,{size:a.size,htmlFor:t,children:a.label})]})}export{m as RadioGroupDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label, RadioGroup, XStack, YStack } from "tamagui";
+function RadioGroupDemo() {
+  return /* @__PURE__ */ jsx(RadioGroup, { defaultValue: "3", name: "form", children: /* @__PURE__ */ jsxs(YStack, { width: 300, alignItems: "center", space: "$2", children: [
+    /* @__PURE__ */ jsx(RadioGroupItemWithLabel, { size: "$3", value: "2", label: "Second value" }),
+    /* @__PURE__ */ jsx(RadioGroupItemWithLabel, { size: "$4", value: "3", label: "Third value" }),
+    /* @__PURE__ */ jsx(RadioGroupItemWithLabel, { size: "$5", value: "4", label: "Fourth value" })
+  ] }) });
+}
+function RadioGroupItemWithLabel(props) {
+  const id = `radiogroup-${props.value}`;
+  return /* @__PURE__ */ jsxs(XStack, { width: 300, alignItems: "center", space: "$4", children: [
+    /* @__PURE__ */ jsx(RadioGroup.Item, { value: props.value, id, size: props.size, children: /* @__PURE__ */ jsx(RadioGroup.Indicator, {}) }),
+    /* @__PURE__ */ jsx(Label, { size: props.size, htmlFor: id, children: props.label })
+  ] });
+}
+export {
+  RadioGroupDemo
+};
 //# sourceMappingURL=RadioGroupDemo.js.map

package/dist/esm/RadioGroupDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/RadioGroupDemo.tsx"],
   "sourcesContent": ["import { Label, RadioGroup, SizeTokens, ThemeableStack, XStack, YStack } from 'tamagui'\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"3\" name=\"form\">\n      <YStack width={300} alignItems=\"center\" space=\"$2\">\n        <RadioGroupItemWithLabel size=\"$3\" value=\"2\" label=\"Second value\" />\n        <RadioGroupItemWithLabel size=\"$4\" value=\"3\" label=\"Third value\" />\n        <RadioGroupItemWithLabel size=\"$5\" value=\"4\" label=\"Fourth value\" />\n      </YStack>\n    </RadioGroup>\n  )\n}\n\nfunction RadioGroupItemWithLabel(props: {\n  size: SizeTokens\n  value: string\n  label: string\n}) {\n  const id = `radiogroup-${props.value}`\n  return (\n    <XStack width={300} alignItems=\"center\" space=\"$4\">\n      <RadioGroup.Item value={props.value} id={id} size={props.size}>\n        <RadioGroup.Indicator />\n      </RadioGroup.Item>\n\n      <Label size={props.size} htmlFor={id}>\n        {props.label}\n      </Label>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAKM,OACE,OAAAA,EADF,QAAAC,MAAA,oBALN,OAAS,SAAAC,EAAO,cAAAC,EAAwC,UAAAC,EAAQ,UAAAC,MAAc,UAEvE,SAASC,GAAiB,CAC/B,OACEN,EAACG,EAAA,CAAW,aAAa,IAAI,KAAK,OAChC,SAAAF,EAACI,EAAA,CAAO,MAAO,IAAK,WAAW,SAAS,MAAM,KAC5C,UAAAL,EAACO,EAAA,CAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,eAAe,EAClEP,EAACO,EAAA,CAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,cAAc,EACjEP,EAACO,EAAA,CAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,eAAe,GACpE,EACF,CAEJ,CAEA,SAASA,EAAwBC,EAI9B,CACD,MAAMC,EAAK,cAAcD,EAAM,QAC/B,OACEP,EAACG,EAAA,CAAO,MAAO,IAAK,WAAW,SAAS,MAAM,KAC5C,UAAAJ,EAACG,EAAW,KAAX,CAAgB,MAAOK,EAAM,MAAO,GAAIC,EAAI,KAAMD,EAAM,KACvD,SAAAR,EAACG,EAAW,UAAX,EAAqB,EACxB,EAEAH,EAACE,EAAA,CAAM,KAAMM,EAAM,KAAM,QAASC,EAC/B,SAAAD,EAAM,MACT,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "Label", "RadioGroup", "XStack", "YStack", "RadioGroupDemo", "RadioGroupItemWithLabel", "props", "id"]
+  "mappings": "AAKM,SACE,KADF;AALN,SAAS,OAAO,YAAwC,QAAQ,cAAc;AAEvE,SAAS,iBAAiB;AAC/B,SACE,oBAAC,cAAW,cAAa,KAAI,MAAK,QAChC,+BAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,wBAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,gBAAe;AAAA,IAClE,oBAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,eAAc;AAAA,IACjE,oBAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,gBAAe;AAAA,KACpE,GACF;AAEJ;AAEA,SAAS,wBAAwB,OAI9B;AACD,QAAM,KAAK,cAAc,MAAM;AAC/B,SACE,qBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,wBAAC,WAAW,MAAX,EAAgB,OAAO,MAAM,OAAO,IAAQ,MAAM,MAAM,MACvD,8BAAC,WAAW,WAAX,EAAqB,GACxB;AAAA,IAEA,oBAAC,SAAM,MAAM,MAAM,MAAM,SAAS,IAC/B,gBAAM,OACT;AAAA,KACF;AAEJ;",
+  "names": []
 }