@tamagui/demos 1.14.0 → 1.14.2

package/dist/jsx/LucideIconsDemo.js

@@ -1,2 +1,40 @@
-import*as L from"@tamagui/lucide-icons";import{useMemo as x,useState as z}from"react";import{ScrollView as C}from"react-native";import{Grid as M,Input as V,Paragraph as D,Spacer as G,YStack as I,useDebounceValue as P}from"tamagui";const W=Object.keys(L).map(e=>({key:e.toLowerCase(),name:e,Icon:L[e]}));function T(){const[e,Y]=z(""),$=P(e,400),t=100,b=x(()=>W.filter(S=>S.key.startsWith($.toLowerCase())).slice(0,835).map(({Icon:S,name:y})=><I h={t+20}ai="center"jc="center"key={y}><S size={t*.25}/><G/><D h="$6"ww="break-word"maw="100%"ta="center"px="$2"size="$1"o={.5}>{y}</D></I>),[$]);return<I miw="100%"padding="$4"paddingBottom="$0"space><V value={e}onChangeText={Y}placeholder="Search..."/><I height={420}><C><M itemMinWidth={t}>{b}</M></C></I></I>}export{T as LucideIconsDemo};
+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 <YStack h={size + 20} ai="center" jc="center" key={name}>
+        <Icon size={size * 0.25} />
+        <Spacer />
+        <Paragraph
+          h="$6"
+          ww="break-word"
+          maw="100%"
+          ta="center"
+          px="$2"
+          size="$1"
+          o={0.5}
+        >{name}</Paragraph>
+      </YStack>;
+    });
+  }, [search]);
+  return <YStack miw="100%" padding="$4" paddingBottom="$0" space>
+    <Input value={searchRaw} onChangeText={setSearch} placeholder="Search..." />
+    <YStack height={420}><ScrollView><Grid itemMinWidth={size}>{iconsMemo}</Grid></ScrollView></YStack>
+  </YStack>;
+}
+export {
+  LucideIconsDemo
+};
 //# sourceMappingURL=LucideIconsDemo.js.map

package/dist/jsx/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": "AAAA,UAAYA,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,IAEzC,CAACH,EAAO,GAAGQ,EAAO,GAAI,GAAG,QAAS,GAAG,QAAS,KAAKL,GACjD,CAACQ,EAAK,MAAMH,EAAO,IAAM,EACzB,CAACT,CAAO,EACR,CAACD,EACC,EAAE,IACF,GAAG,YACH,IAAI,MACJ,GAAG,QACH,GAAG,IACH,KAAK,IACL,GAAG,KAEFK,EACH,EAVCL,EAWH,EAdCE,EAgBJ,EACA,CAACO,CAAM,CAAC,EAEX,MACE,CAACP,EAAO,IAAI,MAAO,QAAQ,IAAK,cAAc,IAAK,MACjD,CAACH,EAAM,OAAOQ,EAAW,cAAcC,EAAW,YAAY,WAAY,EAE1E,CAACN,EAAO,QAAQ,KACd,CAACL,EACC,CAACC,EAAK,cAAcY,IAAOC,EAAU,EAApCb,EACH,EAFCD,EAGH,EAJCK,EAKH,EARCA,EAUL",
-  "names": ["LucideIcons", "useMemo", "useState", "ScrollView", "Grid", "Input", "Paragraph", "Spacer", "YStack", "useDebounceValue", "lucideIcons", "name", "LucideIconsDemo", "searchRaw", "setSearch", "search", "size", "iconsMemo", "x", "Icon"]
+  "mappings": "AAAA,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,CAAC,OAAO,GAAG,OAAO,IAAI,GAAG,SAAS,GAAG,SAAS,KAAK;AAAA,QACjD,CAAC,KAAK,MAAM,OAAO,MAAM;AAAA,QACzB,CAAC,OAAO;AAAA,QACR,CAAC;AAAA,UACC,EAAE;AAAA,UACF,GAAG;AAAA,UACH,IAAI;AAAA,UACJ,GAAG;AAAA,UACH,GAAG;AAAA,UACH,KAAK;AAAA,UACL,GAAG;AAAA,UAEF,KACH,EAVC;AAAA,MAWH,EAdC;AAAA,IAgBL,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,CAAC,OAAO,IAAI,OAAO,QAAQ,KAAK,cAAc,KAAK;AAAA,IACjD,CAAC,MAAM,OAAO,WAAW,cAAc,WAAW,YAAY,YAAY;AAAA,IAE1E,CAAC,OAAO,QAAQ,KACd,CAAC,WACC,CAAC,KAAK,cAAc,OAAO,UAAU,EAApC,KACH,EAFC,WAGH,EAJC;AAAA,EAKH,EARC;AAUL;",
+  "names": []
 }

package/dist/jsx/LucideIconsDemo.mjs

@@ -1,2 +1,40 @@
-import*as L from"@tamagui/lucide-icons";import{useMemo as x,useState as z}from"react";import{ScrollView as C}from"react-native";import{Grid as M,Input as V,Paragraph as D,Spacer as G,YStack as I,useDebounceValue as P}from"tamagui";const W=Object.keys(L).map(e=>({key:e.toLowerCase(),name:e,Icon:L[e]}));function T(){const[e,Y]=z(""),$=P(e,400),t=100,b=x(()=>W.filter(S=>S.key.startsWith($.toLowerCase())).slice(0,835).map(({Icon:S,name:y})=><I h={t+20}ai="center"jc="center"key={y}><S size={t*.25}/><G/><D h="$6"ww="break-word"maw="100%"ta="center"px="$2"size="$1"o={.5}>{y}</D></I>),[$]);return<I miw="100%"padding="$4"paddingBottom="$0"space><V value={e}onChangeText={Y}placeholder="Search..."/><I height={420}><C><M itemMinWidth={t}>{b}</M></C></I></I>}export{T as LucideIconsDemo};
+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 <YStack h={size + 20} ai="center" jc="center" key={name}>
+        <Icon size={size * 0.25} />
+        <Spacer />
+        <Paragraph
+          h="$6"
+          ww="break-word"
+          maw="100%"
+          ta="center"
+          px="$2"
+          size="$1"
+          o={0.5}
+        >{name}</Paragraph>
+      </YStack>;
+    });
+  }, [search]);
+  return <YStack miw="100%" padding="$4" paddingBottom="$0" space>
+    <Input value={searchRaw} onChangeText={setSearch} placeholder="Search..." />
+    <YStack height={420}><ScrollView><Grid itemMinWidth={size}>{iconsMemo}</Grid></ScrollView></YStack>
+  </YStack>;
+}
+export {
+  LucideIconsDemo
+};
 //# sourceMappingURL=LucideIconsDemo.mjs.map

package/dist/jsx/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": "AAAA,UAAYA,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,IAEzC,CAACH,EAAO,GAAGQ,EAAO,GAAI,GAAG,QAAS,GAAG,QAAS,KAAKL,GACjD,CAACQ,EAAK,MAAMH,EAAO,IAAM,EACzB,CAACT,CAAO,EACR,CAACD,EACC,EAAE,IACF,GAAG,YACH,IAAI,MACJ,GAAG,QACH,GAAG,IACH,KAAK,IACL,GAAG,KAEFK,EACH,EAVCL,EAWH,EAdCE,EAgBJ,EACA,CAACO,CAAM,CAAC,EAEX,MACE,CAACP,EAAO,IAAI,MAAO,QAAQ,IAAK,cAAc,IAAK,MACjD,CAACH,EAAM,OAAOQ,EAAW,cAAcC,EAAW,YAAY,WAAY,EAE1E,CAACN,EAAO,QAAQ,KACd,CAACL,EACC,CAACC,EAAK,cAAcY,IAAOC,EAAU,EAApCb,EACH,EAFCD,EAGH,EAJCK,EAKH,EARCA,EAUL",
-  "names": ["LucideIcons", "useMemo", "useState", "ScrollView", "Grid", "Input", "Paragraph", "Spacer", "YStack", "useDebounceValue", "lucideIcons", "name", "LucideIconsDemo", "searchRaw", "setSearch", "search", "size", "iconsMemo", "x", "Icon"]
+  "mappings": "AAAA,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,CAAC,OAAO,GAAG,OAAO,IAAI,GAAG,SAAS,GAAG,SAAS,KAAK;AAAA,QACjD,CAAC,KAAK,MAAM,OAAO,MAAM;AAAA,QACzB,CAAC,OAAO;AAAA,QACR,CAAC;AAAA,UACC,EAAE;AAAA,UACF,GAAG;AAAA,UACH,IAAI;AAAA,UACJ,GAAG;AAAA,UACH,GAAG;AAAA,UACH,KAAK;AAAA,UACL,GAAG;AAAA,UAEF,KACH,EAVC;AAAA,MAWH,EAdC;AAAA,IAgBL,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,CAAC,OAAO,IAAI,OAAO,QAAQ,KAAK,cAAc,KAAK;AAAA,IACjD,CAAC,MAAM,OAAO,WAAW,cAAc,WAAW,YAAY,YAAY;AAAA,IAE1E,CAAC,OAAO,QAAQ,KACd,CAAC,WACC,CAAC,KAAK,cAAc,OAAO,UAAU,EAApC,KACH,EAFC,WAGH,EAJC;AAAA,EAKH,EARC;AAUL;",
+  "names": []
 }

package/dist/jsx/PopoverDemo.js

@@ -1,2 +1,67 @@
-import{ChevronDown as z,ChevronLeft as G,ChevronRight as Y,ChevronUp as A}from"@tamagui/lucide-icons";import{Adapt as I,Button as $,Input as B,Label as D,Popover as C,XStack as N,YGroup as S}from"tamagui";function X(){return<N space="$2"flex={1}justifyContent="center"alignItems="center"><P placement="left"Icon={G}Name="left-popover"/><P placement="bottom"Icon={z}Name="bottom-popover"/><P placement="top"Icon={A}Name="top-popover"/><P placement="right"Icon={Y}Name="right-popover"/></N>}function P({Icon:k,Name:g,...w}){return<C size="$5"{...w}><C.Trigger asChild><$ icon={k}/></C.Trigger><I when="sm"platform="web"><C.Sheet modal dismissOnSnapToBottom><C.Sheet.Frame padding="$4"><I.Contents/></C.Sheet.Frame><C.Sheet.Overlay/></C.Sheet></I><C.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><C.Arrow borderWidth={1}borderColor="$borderColor"/><S space="$3"><S.Item><N space="$3"><D size="$3"htmlFor={g}>Name</D><B size="$3"id={g}/></N></S.Item><S.Item><C.Close asChild><$ size="$3"onPress={()=>{}}>Submit</$></C.Close></S.Item></S></C.Content></C>}export{P as Demo,X as PopoverDemo};
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "@tamagui/lucide-icons";
+import {
+  Adapt,
+  Button,
+  Input,
+  Label,
+  Popover,
+  XStack,
+  YGroup
+} from "tamagui";
+function PopoverDemo() {
+  return <XStack space="$2" flex={1} justifyContent="center" alignItems="center">
+    <Demo placement="left" Icon={ChevronLeft} Name="left-popover" />
+    <Demo placement="bottom" Icon={ChevronDown} Name="bottom-popover" />
+    <Demo placement="top" Icon={ChevronUp} Name="top-popover" />
+    <Demo placement="right" Icon={ChevronRight} Name="right-popover" />
+  </XStack>;
+}
+function Demo({
+  Icon,
+  Name,
+  ...props
+}) {
+  return <Popover size="$5" {...props}>
+    <Popover.Trigger asChild><Button icon={Icon} /></Popover.Trigger>
+    <Adapt when="sm" platform="web"><Popover.Sheet modal dismissOnSnapToBottom>
+      <Popover.Sheet.Frame padding="$4"><Adapt.Contents /></Popover.Sheet.Frame>
+      <Popover.Sheet.Overlay />
+    </Popover.Sheet></Adapt>
+    <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
+    >
+      <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+      <YGroup space="$3">
+        <YGroup.Item><XStack space="$3">
+          <Label size="$3" htmlFor={Name}>Name</Label>
+          <Input size="$3" id={Name} />
+        </XStack></YGroup.Item>
+        <YGroup.Item><Popover.Close asChild><Button
+          size="$3"
+          onPress={() => {
+          }}
+        >Submit</Button></Popover.Close></YGroup.Item>
+      </YGroup>
+    </Popover.Content>
+  </Popover>;
+}
+export {
+  Demo,
+  PopoverDemo
+};
 //# sourceMappingURL=PopoverDemo.js.map

package/dist/jsx/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": "AAAA,OAAS,eAAAA,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,MACE,CAACF,EAAO,MAAM,IAAK,MAAM,EAAG,eAAe,QAAS,WAAW,SAC7D,CAACG,EAAK,UAAU,MAAO,MAAMX,EAAa,KAAK,cAAe,EAC9D,CAACW,EAAK,UAAU,QAAS,MAAMZ,EAAa,KAAK,gBAAiB,EAClE,CAACY,EAAK,UAAU,KAAM,MAAMT,EAAW,KAAK,aAAc,EAC1D,CAACS,EAAK,UAAU,OAAQ,MAAMV,EAAc,KAAK,eAAgB,EACnE,EALCO,EAOL,CAEO,SAASG,EAAK,CACnB,KAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAiD,CAC/C,MACE,CAACP,EAAQ,KAAK,QAASO,GACrB,CAACP,EAAQ,QAAQ,QACf,CAACH,EAAO,MAAMQ,EAAM,EACtB,EAFCL,EAAQ,QAIT,CAACJ,EAAM,KAAK,IAAK,SAAS,MACxB,CAACI,EAAQ,MAAM,MAAM,sBACnB,CAACA,EAAQ,MAAM,MAAM,QAAQ,KAC3B,CAACJ,EAAM,QAAS,EAClB,EAFCI,EAAQ,MAAM,MAGf,CAACA,EAAQ,MAAM,OAAQ,EACzB,EALCA,EAAQ,MAMX,EAPCJ,EASD,CAACI,EAAQ,QACP,aAAa,EACb,YAAY,cACZ,YAAY,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,CAAE,EACvC,WAAW,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,CAAE,EACtC,GAAG,EACH,GAAG,EACH,SAAS,EACT,WAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EACA,QAEA,CAACA,EAAQ,MAAM,aAAa,EAAG,YAAY,cAAe,EAE1D,CAACE,EAAO,MAAM,KACZ,CAACA,EAAO,KACN,CAACD,EAAO,MAAM,KACZ,CAACF,EAAM,KAAK,IAAK,SAASO,GAAM,IAEhC,EAFCP,EAGD,CAACD,EAAM,KAAK,IAAK,IAAIQ,EAAM,EAC7B,EALCL,EAMH,EAPCC,EAAO,KAQR,CAACA,EAAO,KACN,CAACF,EAAQ,MAAM,QACb,CAACH,EACC,KAAK,IACL,SAAS,IAAM,CAEf,GACD,MAED,EAPCA,EAQH,EATCG,EAAQ,MAUX,EAXCE,EAAO,KAYV,EArBCA,EAsBH,EA1CCF,EAAQ,QA2CX,EAzDCA,EA2DL",
-  "names": ["ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Adapt", "Button", "Input", "Label", "Popover", "XStack", "YGroup", "PopoverDemo", "Demo", "Icon", "Name", "props"]
+  "mappings": "AAAA,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,CAAC,OAAO,MAAM,KAAK,MAAM,GAAG,eAAe,SAAS,WAAW;AAAA,IAC7D,CAAC,KAAK,UAAU,OAAO,MAAM,aAAa,KAAK,eAAe;AAAA,IAC9D,CAAC,KAAK,UAAU,SAAS,MAAM,aAAa,KAAK,iBAAiB;AAAA,IAClE,CAAC,KAAK,UAAU,MAAM,MAAM,WAAW,KAAK,cAAc;AAAA,IAC1D,CAAC,KAAK,UAAU,QAAQ,MAAM,cAAc,KAAK,gBAAgB;AAAA,EACnE,EALC;AAOL;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE,CAAC,QAAQ,KAAK,SAAS;AAAA,IACrB,CAAC,QAAQ,QAAQ,QACf,CAAC,OAAO,MAAM,MAAM,EACtB,EAFC,QAAQ;AAAA,IAIT,CAAC,MAAM,KAAK,KAAK,SAAS,MACxB,CAAC,QAAQ,MAAM,MAAM;AAAA,MACnB,CAAC,QAAQ,MAAM,MAAM,QAAQ,KAC3B,CAAC,MAAM,SAAS,EAClB,EAFC,QAAQ,MAAM;AAAA,MAGf,CAAC,QAAQ,MAAM,QAAQ;AAAA,IACzB,EALC,QAAQ,MAMX,EAPC;AAAA,IASD,CAAC,QAAQ;AAAA,MACP,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,EAAE;AAAA,MACvC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,EAAE;AAAA,MACtC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,SAAS;AAAA,MACT,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,SAAS;AAAA,YACP,mBAAmB;AAAA,UACrB;AAAA,QACF;AAAA,MACF;AAAA,MACA;AAAA;AAAA,MAEA,CAAC,QAAQ,MAAM,aAAa,GAAG,YAAY,eAAe;AAAA,MAE1D,CAAC,OAAO,MAAM;AAAA,QACZ,CAAC,OAAO,KACN,CAAC,OAAO,MAAM;AAAA,UACZ,CAAC,MAAM,KAAK,KAAK,SAAS,MAAM,IAEhC,EAFC;AAAA,UAGD,CAAC,MAAM,KAAK,KAAK,IAAI,MAAM;AAAA,QAC7B,EALC,OAMH,EAPC,OAAO;AAAA,QAQR,CAAC,OAAO,KACN,CAAC,QAAQ,MAAM,QACb,CAAC;AAAA,UACC,KAAK;AAAA,UACL,SAAS,MAAM;AAAA,UAEf;AAAA,SACD,MAED,EAPC,OAQH,EATC,QAAQ,MAUX,EAXC,OAAO;AAAA,MAYV,EArBC;AAAA,IAsBH,EA1CC,QAAQ;AAAA,EA2CX,EAzDC;AA2DL;",
+  "names": []
 }

package/dist/jsx/PopoverDemo.mjs

@@ -1,2 +1,67 @@
-import{ChevronDown as z,ChevronLeft as G,ChevronRight as Y,ChevronUp as A}from"@tamagui/lucide-icons";import{Adapt as I,Button as $,Input as B,Label as D,Popover as C,XStack as N,YGroup as S}from"tamagui";function X(){return<N space="$2"flex={1}justifyContent="center"alignItems="center"><P placement="left"Icon={G}Name="left-popover"/><P placement="bottom"Icon={z}Name="bottom-popover"/><P placement="top"Icon={A}Name="top-popover"/><P placement="right"Icon={Y}Name="right-popover"/></N>}function P({Icon:k,Name:g,...w}){return<C size="$5"{...w}><C.Trigger asChild><$ icon={k}/></C.Trigger><I when="sm"platform="web"><C.Sheet modal dismissOnSnapToBottom><C.Sheet.Frame padding="$4"><I.Contents/></C.Sheet.Frame><C.Sheet.Overlay/></C.Sheet></I><C.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><C.Arrow borderWidth={1}borderColor="$borderColor"/><S space="$3"><S.Item><N space="$3"><D size="$3"htmlFor={g}>Name</D><B size="$3"id={g}/></N></S.Item><S.Item><C.Close asChild><$ size="$3"onPress={()=>{}}>Submit</$></C.Close></S.Item></S></C.Content></C>}export{P as Demo,X as PopoverDemo};
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "@tamagui/lucide-icons";
+import {
+  Adapt,
+  Button,
+  Input,
+  Label,
+  Popover,
+  XStack,
+  YGroup
+} from "tamagui";
+function PopoverDemo() {
+  return <XStack space="$2" flex={1} justifyContent="center" alignItems="center">
+    <Demo placement="left" Icon={ChevronLeft} Name="left-popover" />
+    <Demo placement="bottom" Icon={ChevronDown} Name="bottom-popover" />
+    <Demo placement="top" Icon={ChevronUp} Name="top-popover" />
+    <Demo placement="right" Icon={ChevronRight} Name="right-popover" />
+  </XStack>;
+}
+function Demo({
+  Icon,
+  Name,
+  ...props
+}) {
+  return <Popover size="$5" {...props}>
+    <Popover.Trigger asChild><Button icon={Icon} /></Popover.Trigger>
+    <Adapt when="sm" platform="web"><Popover.Sheet modal dismissOnSnapToBottom>
+      <Popover.Sheet.Frame padding="$4"><Adapt.Contents /></Popover.Sheet.Frame>
+      <Popover.Sheet.Overlay />
+    </Popover.Sheet></Adapt>
+    <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
+    >
+      <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+      <YGroup space="$3">
+        <YGroup.Item><XStack space="$3">
+          <Label size="$3" htmlFor={Name}>Name</Label>
+          <Input size="$3" id={Name} />
+        </XStack></YGroup.Item>
+        <YGroup.Item><Popover.Close asChild><Button
+          size="$3"
+          onPress={() => {
+          }}
+        >Submit</Button></Popover.Close></YGroup.Item>
+      </YGroup>
+    </Popover.Content>
+  </Popover>;
+}
+export {
+  Demo,
+  PopoverDemo
+};
 //# sourceMappingURL=PopoverDemo.mjs.map

package/dist/jsx/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": "AAAA,OAAS,eAAAA,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,MACE,CAACF,EAAO,MAAM,IAAK,MAAM,EAAG,eAAe,QAAS,WAAW,SAC7D,CAACG,EAAK,UAAU,MAAO,MAAMX,EAAa,KAAK,cAAe,EAC9D,CAACW,EAAK,UAAU,QAAS,MAAMZ,EAAa,KAAK,gBAAiB,EAClE,CAACY,EAAK,UAAU,KAAM,MAAMT,EAAW,KAAK,aAAc,EAC1D,CAACS,EAAK,UAAU,OAAQ,MAAMV,EAAc,KAAK,eAAgB,EACnE,EALCO,EAOL,CAEO,SAASG,EAAK,CACnB,KAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAiD,CAC/C,MACE,CAACP,EAAQ,KAAK,QAASO,GACrB,CAACP,EAAQ,QAAQ,QACf,CAACH,EAAO,MAAMQ,EAAM,EACtB,EAFCL,EAAQ,QAIT,CAACJ,EAAM,KAAK,IAAK,SAAS,MACxB,CAACI,EAAQ,MAAM,MAAM,sBACnB,CAACA,EAAQ,MAAM,MAAM,QAAQ,KAC3B,CAACJ,EAAM,QAAS,EAClB,EAFCI,EAAQ,MAAM,MAGf,CAACA,EAAQ,MAAM,OAAQ,EACzB,EALCA,EAAQ,MAMX,EAPCJ,EASD,CAACI,EAAQ,QACP,aAAa,EACb,YAAY,cACZ,YAAY,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,CAAE,EACvC,WAAW,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,CAAE,EACtC,GAAG,EACH,GAAG,EACH,SAAS,EACT,WAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EACA,QAEA,CAACA,EAAQ,MAAM,aAAa,EAAG,YAAY,cAAe,EAE1D,CAACE,EAAO,MAAM,KACZ,CAACA,EAAO,KACN,CAACD,EAAO,MAAM,KACZ,CAACF,EAAM,KAAK,IAAK,SAASO,GAAM,IAEhC,EAFCP,EAGD,CAACD,EAAM,KAAK,IAAK,IAAIQ,EAAM,EAC7B,EALCL,EAMH,EAPCC,EAAO,KAQR,CAACA,EAAO,KACN,CAACF,EAAQ,MAAM,QACb,CAACH,EACC,KAAK,IACL,SAAS,IAAM,CAEf,GACD,MAED,EAPCA,EAQH,EATCG,EAAQ,MAUX,EAXCE,EAAO,KAYV,EArBCA,EAsBH,EA1CCF,EAAQ,QA2CX,EAzDCA,EA2DL",
-  "names": ["ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Adapt", "Button", "Input", "Label", "Popover", "XStack", "YGroup", "PopoverDemo", "Demo", "Icon", "Name", "props"]
+  "mappings": "AAAA,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,CAAC,OAAO,MAAM,KAAK,MAAM,GAAG,eAAe,SAAS,WAAW;AAAA,IAC7D,CAAC,KAAK,UAAU,OAAO,MAAM,aAAa,KAAK,eAAe;AAAA,IAC9D,CAAC,KAAK,UAAU,SAAS,MAAM,aAAa,KAAK,iBAAiB;AAAA,IAClE,CAAC,KAAK,UAAU,MAAM,MAAM,WAAW,KAAK,cAAc;AAAA,IAC1D,CAAC,KAAK,UAAU,QAAQ,MAAM,cAAc,KAAK,gBAAgB;AAAA,EACnE,EALC;AAOL;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE,CAAC,QAAQ,KAAK,SAAS;AAAA,IACrB,CAAC,QAAQ,QAAQ,QACf,CAAC,OAAO,MAAM,MAAM,EACtB,EAFC,QAAQ;AAAA,IAIT,CAAC,MAAM,KAAK,KAAK,SAAS,MACxB,CAAC,QAAQ,MAAM,MAAM;AAAA,MACnB,CAAC,QAAQ,MAAM,MAAM,QAAQ,KAC3B,CAAC,MAAM,SAAS,EAClB,EAFC,QAAQ,MAAM;AAAA,MAGf,CAAC,QAAQ,MAAM,QAAQ;AAAA,IACzB,EALC,QAAQ,MAMX,EAPC;AAAA,IASD,CAAC,QAAQ;AAAA,MACP,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,EAAE;AAAA,MACvC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,EAAE;AAAA,MACtC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,SAAS;AAAA,MACT,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,SAAS;AAAA,YACP,mBAAmB;AAAA,UACrB;AAAA,QACF;AAAA,MACF;AAAA,MACA;AAAA;AAAA,MAEA,CAAC,QAAQ,MAAM,aAAa,GAAG,YAAY,eAAe;AAAA,MAE1D,CAAC,OAAO,MAAM;AAAA,QACZ,CAAC,OAAO,KACN,CAAC,OAAO,MAAM;AAAA,UACZ,CAAC,MAAM,KAAK,KAAK,SAAS,MAAM,IAEhC,EAFC;AAAA,UAGD,CAAC,MAAM,KAAK,KAAK,IAAI,MAAM;AAAA,QAC7B,EALC,OAMH,EAPC,OAAO;AAAA,QAQR,CAAC,OAAO,KACN,CAAC,QAAQ,MAAM,QACb,CAAC;AAAA,UACC,KAAK;AAAA,UACL,SAAS,MAAM;AAAA,UAEf;AAAA,SACD,MAED,EAPC,OAQH,EATC,QAAQ,MAUX,EAXC,OAAO;AAAA,MAYV,EArBC;AAAA,IAsBH,EA1CC,QAAQ;AAAA,EA2CX,EAzDC;AA2DL;",
+  "names": []
 }

package/dist/jsx/ProgressDemo.js

@@ -1,2 +1,43 @@
-import{useEffect as b,useState as k}from"react";import{Button as B,Paragraph as C,Progress as P,Slider as S,XStack as I,YStack as V}from"tamagui";function A(){const[g,T]=k(4),[$,h]=k(20),f=`$${g}`;return b(()=>{const e=setTimeout(()=>h(60),1e3);return()=>{clearTimeout(e)}},[]),<><V height={60}alignItems="center"space><C height={30}opacity={.5}>Size: {g}</C><P size={f}value={$}><P.Indicator animation="bouncy"/></P></V><I ai="center"space position="absolute"bottom="$3"left="$4"$xxs={{display:"none"}}><S size="$2"width={130}defaultValue={[4]}min={2}max={6}step={1}onValueChange={([e])=>{T(e)}}><S.Track borderWidth={1}borderColor="$color5"><S.TrackActive/></S.Track><S.Thumb circular index={0}/></S><B size="$2"onPress={()=>h(e=>(e+20)%100)}>Load</B></I></>}export{A as ProgressDemo};
+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 <>
+    <YStack height={60} alignItems="center" space>
+      <Paragraph height={30} opacity={0.5}>
+        {"Size: "}
+        {size}
+      </Paragraph>
+      <Progress size={sizeProp} value={progress}><Progress.Indicator animation="bouncy" /></Progress>
+    </YStack>
+    <XStack ai="center" space position="absolute" bottom="$3" left="$4" $xxs={{ display: "none" }}>
+      <Slider
+        size="$2"
+        width={130}
+        defaultValue={[4]}
+        min={2}
+        max={6}
+        step={1}
+        onValueChange={([val]) => {
+          setSize(val);
+        }}
+      >
+        <Slider.Track borderWidth={1} borderColor="$color5"><Slider.TrackActive /></Slider.Track>
+        <Slider.Thumb circular index={0} />
+      </Slider>
+      <Button size="$2" onPress={() => setProgress((prev) => (prev + 20) % 100)}>Load</Button>
+    </XStack>
+  </>;
+}
+export {
+  ProgressDemo
+};
 //# sourceMappingURL=ProgressDemo.js.map

package/dist/jsx/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": "AAAA,OAAS,aAAAA,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,EAGH,EACE,CAACP,EAAO,QAAQ,GAAI,WAAW,QAAS,MACtC,CAACJ,EAAU,QAAQ,GAAI,SAAS,IAAK,OAC5BM,EACT,EAFCN,EAGD,CAACC,EAAS,MAAMS,EAAU,OAAOF,GAC/B,CAACP,EAAS,UAAU,UAAU,QAAS,EACzC,EAFCA,EAGH,EAPCG,EASD,CAACD,EAAO,GAAG,QAAS,MAAM,SAAS,UAAW,OAAO,IAAK,KAAK,IAAK,MAAM,CAAE,QAAS,MAAO,GAC1F,CAACD,EACC,KAAK,IACL,OAAO,IACP,cAAc,CAAC,CAAC,EAChB,KAAK,EACL,KAAK,EACL,MAAM,EACN,eAAe,CAAC,CAACU,CAAG,IAAM,CACxBL,EAAQK,CAAG,CACb,GAEA,CAACV,EAAO,MAAM,aAAa,EAAG,YAAY,UACxC,CAACA,EAAO,WAAY,EACtB,EAFCA,EAAO,MAGR,CAACA,EAAO,MAAM,SAAS,OAAO,EAAG,EACnC,EAfCA,EAiBD,CAACH,EAAO,KAAK,IAAK,SAAS,IAAMU,EAAaI,IAAUA,EAAO,IAAM,GAAG,GAAG,IAE3E,EAFCd,EAGH,EArBCI,EAsBH,GAEJ",
-  "names": ["useEffect", "useState", "Button", "Paragraph", "Progress", "Slider", "XStack", "YStack", "ProgressDemo", "size", "setSize", "progress", "setProgress", "sizeProp", "timer", "val", "prev"]
+  "mappings": "AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,WAAW,UAAsB,QAAQ,QAAQ,cAAc;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,WAAW,IAAI;AAErB,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,EAAE,GAAG,GAAI;AACpD,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IACE,CAAC,OAAO,QAAQ,IAAI,WAAW,SAAS;AAAA,MACtC,CAAC,UAAU,QAAQ,IAAI,SAAS;AAAA,SAAK;AAAA,SAC5B;AAAA,MACT,EAFC;AAAA,MAGD,CAAC,SAAS,MAAM,UAAU,OAAO,UAC/B,CAAC,SAAS,UAAU,UAAU,SAAS,EACzC,EAFC;AAAA,IAGH,EAPC;AAAA,IASD,CAAC,OAAO,GAAG,SAAS,MAAM,SAAS,WAAW,OAAO,KAAK,KAAK,KAAK,MAAM,EAAE,SAAS,OAAO;AAAA,MAC1F,CAAC;AAAA,QACC,KAAK;AAAA,QACL,OAAO;AAAA,QACP,cAAc,CAAC,CAAC;AAAA,QAChB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,MAAM;AAAA,QACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,kBAAQ,GAAG;AAAA,QACb;AAAA;AAAA,QAEA,CAAC,OAAO,MAAM,aAAa,GAAG,YAAY,UACxC,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,QAGR,CAAC,OAAO,MAAM,SAAS,OAAO,GAAG;AAAA,MACnC,EAfC;AAAA,MAiBD,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,IAE3E,EAFC;AAAA,IAGH,EArBC;AAAA,EAsBH;AAEJ;",
+  "names": []
 }

package/dist/jsx/ProgressDemo.mjs

@@ -1,2 +1,43 @@
-import{useEffect as b,useState as k}from"react";import{Button as B,Paragraph as C,Progress as P,Slider as S,XStack as I,YStack as V}from"tamagui";function A(){const[g,T]=k(4),[$,h]=k(20),f=`$${g}`;return b(()=>{const e=setTimeout(()=>h(60),1e3);return()=>{clearTimeout(e)}},[]),<><V height={60}alignItems="center"space><C height={30}opacity={.5}>Size: {g}</C><P size={f}value={$}><P.Indicator animation="bouncy"/></P></V><I ai="center"space position="absolute"bottom="$3"left="$4"$xxs={{display:"none"}}><S size="$2"width={130}defaultValue={[4]}min={2}max={6}step={1}onValueChange={([e])=>{T(e)}}><S.Track borderWidth={1}borderColor="$color5"><S.TrackActive/></S.Track><S.Thumb circular index={0}/></S><B size="$2"onPress={()=>h(e=>(e+20)%100)}>Load</B></I></>}export{A as ProgressDemo};
+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 <>
+    <YStack height={60} alignItems="center" space>
+      <Paragraph height={30} opacity={0.5}>
+        {"Size: "}
+        {size}
+      </Paragraph>
+      <Progress size={sizeProp} value={progress}><Progress.Indicator animation="bouncy" /></Progress>
+    </YStack>
+    <XStack ai="center" space position="absolute" bottom="$3" left="$4" $xxs={{ display: "none" }}>
+      <Slider
+        size="$2"
+        width={130}
+        defaultValue={[4]}
+        min={2}
+        max={6}
+        step={1}
+        onValueChange={([val]) => {
+          setSize(val);
+        }}
+      >
+        <Slider.Track borderWidth={1} borderColor="$color5"><Slider.TrackActive /></Slider.Track>
+        <Slider.Thumb circular index={0} />
+      </Slider>
+      <Button size="$2" onPress={() => setProgress((prev) => (prev + 20) % 100)}>Load</Button>
+    </XStack>
+  </>;
+}
+export {
+  ProgressDemo
+};
 //# sourceMappingURL=ProgressDemo.mjs.map

package/dist/jsx/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": "AAAA,OAAS,aAAAA,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,EAGH,EACE,CAACP,EAAO,QAAQ,GAAI,WAAW,QAAS,MACtC,CAACJ,EAAU,QAAQ,GAAI,SAAS,IAAK,OAC5BM,EACT,EAFCN,EAGD,CAACC,EAAS,MAAMS,EAAU,OAAOF,GAC/B,CAACP,EAAS,UAAU,UAAU,QAAS,EACzC,EAFCA,EAGH,EAPCG,EASD,CAACD,EAAO,GAAG,QAAS,MAAM,SAAS,UAAW,OAAO,IAAK,KAAK,IAAK,MAAM,CAAE,QAAS,MAAO,GAC1F,CAACD,EACC,KAAK,IACL,OAAO,IACP,cAAc,CAAC,CAAC,EAChB,KAAK,EACL,KAAK,EACL,MAAM,EACN,eAAe,CAAC,CAACU,CAAG,IAAM,CACxBL,EAAQK,CAAG,CACb,GAEA,CAACV,EAAO,MAAM,aAAa,EAAG,YAAY,UACxC,CAACA,EAAO,WAAY,EACtB,EAFCA,EAAO,MAGR,CAACA,EAAO,MAAM,SAAS,OAAO,EAAG,EACnC,EAfCA,EAiBD,CAACH,EAAO,KAAK,IAAK,SAAS,IAAMU,EAAaI,IAAUA,EAAO,IAAM,GAAG,GAAG,IAE3E,EAFCd,EAGH,EArBCI,EAsBH,GAEJ",
-  "names": ["useEffect", "useState", "Button", "Paragraph", "Progress", "Slider", "XStack", "YStack", "ProgressDemo", "size", "setSize", "progress", "setProgress", "sizeProp", "timer", "val", "prev"]
+  "mappings": "AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,WAAW,UAAsB,QAAQ,QAAQ,cAAc;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,WAAW,IAAI;AAErB,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,EAAE,GAAG,GAAI;AACpD,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IACE,CAAC,OAAO,QAAQ,IAAI,WAAW,SAAS;AAAA,MACtC,CAAC,UAAU,QAAQ,IAAI,SAAS;AAAA,SAAK;AAAA,SAC5B;AAAA,MACT,EAFC;AAAA,MAGD,CAAC,SAAS,MAAM,UAAU,OAAO,UAC/B,CAAC,SAAS,UAAU,UAAU,SAAS,EACzC,EAFC;AAAA,IAGH,EAPC;AAAA,IASD,CAAC,OAAO,GAAG,SAAS,MAAM,SAAS,WAAW,OAAO,KAAK,KAAK,KAAK,MAAM,EAAE,SAAS,OAAO;AAAA,MAC1F,CAAC;AAAA,QACC,KAAK;AAAA,QACL,OAAO;AAAA,QACP,cAAc,CAAC,CAAC;AAAA,QAChB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,MAAM;AAAA,QACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,kBAAQ,GAAG;AAAA,QACb;AAAA;AAAA,QAEA,CAAC,OAAO,MAAM,aAAa,GAAG,YAAY,UACxC,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,QAGR,CAAC,OAAO,MAAM,SAAS,OAAO,GAAG;AAAA,MACnC,EAfC;AAAA,MAiBD,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,IAE3E,EAFC;AAAA,IAGH,EArBC;AAAA,EAsBH;AAEJ;",
+  "names": []
 }

package/dist/jsx/RadioGroupDemo.js

@@ -1,2 +1,19 @@
-import{Label as G,RadioGroup as S,XStack as R,YStack as T}from"tamagui";function F(){return<S defaultValue="3"name="form"><T width={300}alignItems="center"space="$2"><I size="$3"value="2"label="Second value"/><I size="$4"value="3"label="Third value"/><I size="$5"value="4"label="Fourth value"/></T></S>}function I(e){const $=`radiogroup-${e.value}`;return<R width={300}alignItems="center"space="$4"><S.Item value={e.value}id={$}size={e.size}><S.Indicator/></S.Item><G size={e.size}htmlFor={$}>{e.label}</G></R>}export{F as RadioGroupDemo};
+import { Label, RadioGroup, XStack, YStack } from "tamagui";
+function RadioGroupDemo() {
+  return <RadioGroup defaultValue="3" name="form"><YStack width={300} alignItems="center" space="$2">
+    <RadioGroupItemWithLabel size="$3" value="2" label="Second value" />
+    <RadioGroupItemWithLabel size="$4" value="3" label="Third value" />
+    <RadioGroupItemWithLabel size="$5" value="4" label="Fourth value" />
+  </YStack></RadioGroup>;
+}
+function RadioGroupItemWithLabel(props) {
+  const id = `radiogroup-${props.value}`;
+  return <XStack width={300} alignItems="center" space="$4">
+    <RadioGroup.Item value={props.value} id={id} size={props.size}><RadioGroup.Indicator /></RadioGroup.Item>
+    <Label size={props.size} htmlFor={id}>{props.label}</Label>
+  </XStack>;
+}
+export {
+  RadioGroupDemo
+};
 //# sourceMappingURL=RadioGroupDemo.js.map

package/dist/jsx/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": "AAAA,OAAS,SAAAA,EAAO,cAAAC,EAAwC,UAAAC,EAAQ,UAAAC,MAAc,UAEvE,SAASC,GAAiB,CAC/B,MACE,CAACH,EAAW,aAAa,GAAI,KAAK,OAChC,CAACE,EAAO,OAAO,IAAK,WAAW,QAAS,MAAM,KAC5C,CAACE,EAAwB,KAAK,IAAK,MAAM,GAAI,MAAM,cAAe,EAClE,CAACA,EAAwB,KAAK,IAAK,MAAM,GAAI,MAAM,aAAc,EACjE,CAACA,EAAwB,KAAK,IAAK,MAAM,GAAI,MAAM,cAAe,EACpE,EAJCF,EAKH,EANCF,EAQL,CAEA,SAASI,EAAwBC,EAI9B,CACD,MAAMC,EAAK,cAAcD,EAAM,QAC/B,MACE,CAACJ,EAAO,OAAO,IAAK,WAAW,QAAS,MAAM,KAC5C,CAACD,EAAW,KAAK,OAAOK,EAAM,MAAO,IAAIC,EAAI,MAAMD,EAAM,MACvD,CAACL,EAAW,SAAU,EACxB,EAFCA,EAAW,KAIZ,CAACD,EAAM,MAAMM,EAAM,KAAM,SAASC,IAC/BD,EAAM,MACT,EAFCN,EAGH,EARCE,EAUL",
-  "names": ["Label", "RadioGroup", "XStack", "YStack", "RadioGroupDemo", "RadioGroupItemWithLabel", "props", "id"]
+  "mappings": "AAAA,SAAS,OAAO,YAAwC,QAAQ,cAAc;AAEvE,SAAS,iBAAiB;AAC/B,SACE,CAAC,WAAW,aAAa,IAAI,KAAK,OAChC,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,eAAe;AAAA,IAClE,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,cAAc;AAAA,IACjE,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,eAAe;AAAA,EACpE,EAJC,OAKH,EANC;AAQL;AAEA,SAAS,wBAAwB,OAI9B;AACD,QAAM,KAAK,cAAc,MAAM;AAC/B,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,WAAW,KAAK,OAAO,MAAM,OAAO,IAAI,IAAI,MAAM,MAAM,MACvD,CAAC,WAAW,UAAU,EACxB,EAFC,WAAW;AAAA,IAIZ,CAAC,MAAM,MAAM,MAAM,MAAM,SAAS,KAC/B,MAAM,MACT,EAFC;AAAA,EAGH,EARC;AAUL;",
+  "names": []
 }

package/dist/jsx/RadioGroupDemo.mjs

@@ -1,2 +1,19 @@
-import{Label as G,RadioGroup as S,XStack as R,YStack as T}from"tamagui";function F(){return<S defaultValue="3"name="form"><T width={300}alignItems="center"space="$2"><I size="$3"value="2"label="Second value"/><I size="$4"value="3"label="Third value"/><I size="$5"value="4"label="Fourth value"/></T></S>}function I(e){const $=`radiogroup-${e.value}`;return<R width={300}alignItems="center"space="$4"><S.Item value={e.value}id={$}size={e.size}><S.Indicator/></S.Item><G size={e.size}htmlFor={$}>{e.label}</G></R>}export{F as RadioGroupDemo};
+import { Label, RadioGroup, XStack, YStack } from "tamagui";
+function RadioGroupDemo() {
+  return <RadioGroup defaultValue="3" name="form"><YStack width={300} alignItems="center" space="$2">
+    <RadioGroupItemWithLabel size="$3" value="2" label="Second value" />
+    <RadioGroupItemWithLabel size="$4" value="3" label="Third value" />
+    <RadioGroupItemWithLabel size="$5" value="4" label="Fourth value" />
+  </YStack></RadioGroup>;
+}
+function RadioGroupItemWithLabel(props) {
+  const id = `radiogroup-${props.value}`;
+  return <XStack width={300} alignItems="center" space="$4">
+    <RadioGroup.Item value={props.value} id={id} size={props.size}><RadioGroup.Indicator /></RadioGroup.Item>
+    <Label size={props.size} htmlFor={id}>{props.label}</Label>
+  </XStack>;
+}
+export {
+  RadioGroupDemo
+};
 //# sourceMappingURL=RadioGroupDemo.mjs.map

package/dist/jsx/RadioGroupDemo.mjs.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": "AAAA,OAAS,SAAAA,EAAO,cAAAC,EAAwC,UAAAC,EAAQ,UAAAC,MAAc,UAEvE,SAASC,GAAiB,CAC/B,MACE,CAACH,EAAW,aAAa,GAAI,KAAK,OAChC,CAACE,EAAO,OAAO,IAAK,WAAW,QAAS,MAAM,KAC5C,CAACE,EAAwB,KAAK,IAAK,MAAM,GAAI,MAAM,cAAe,EAClE,CAACA,EAAwB,KAAK,IAAK,MAAM,GAAI,MAAM,aAAc,EACjE,CAACA,EAAwB,KAAK,IAAK,MAAM,GAAI,MAAM,cAAe,EACpE,EAJCF,EAKH,EANCF,EAQL,CAEA,SAASI,EAAwBC,EAI9B,CACD,MAAMC,EAAK,cAAcD,EAAM,QAC/B,MACE,CAACJ,EAAO,OAAO,IAAK,WAAW,QAAS,MAAM,KAC5C,CAACD,EAAW,KAAK,OAAOK,EAAM,MAAO,IAAIC,EAAI,MAAMD,EAAM,MACvD,CAACL,EAAW,SAAU,EACxB,EAFCA,EAAW,KAIZ,CAACD,EAAM,MAAMM,EAAM,KAAM,SAASC,IAC/BD,EAAM,MACT,EAFCN,EAGH,EARCE,EAUL",
-  "names": ["Label", "RadioGroup", "XStack", "YStack", "RadioGroupDemo", "RadioGroupItemWithLabel", "props", "id"]
+  "mappings": "AAAA,SAAS,OAAO,YAAwC,QAAQ,cAAc;AAEvE,SAAS,iBAAiB;AAC/B,SACE,CAAC,WAAW,aAAa,IAAI,KAAK,OAChC,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,eAAe;AAAA,IAClE,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,cAAc;AAAA,IACjE,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,eAAe;AAAA,EACpE,EAJC,OAKH,EANC;AAQL;AAEA,SAAS,wBAAwB,OAI9B;AACD,QAAM,KAAK,cAAc,MAAM;AAC/B,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,WAAW,KAAK,OAAO,MAAM,OAAO,IAAI,IAAI,MAAM,MAAM,MACvD,CAAC,WAAW,UAAU,EACxB,EAFC,WAAW;AAAA,IAIZ,CAAC,MAAM,MAAM,MAAM,MAAM,SAAS,KAC/B,MAAM,MACT,EAFC;AAAA,EAGH,EARC;AAUL;",
+  "names": []
 }

package/dist/jsx/ScrollViewDemo.js

@@ -1,2 +1,17 @@
-import{Circle as $,ScrollView as S,Square as C,XStack as V}from"tamagui";function y(){return<S maxHeight={250}width="75%"backgroundColor="$background"padding="$4"borderRadius="$4"><V flexWrap="wrap"alignItems="center"justifyContent="center"><C margin="$4"size={120}backgroundColor="$red9"/><$ margin="$4"size={120}backgroundColor="$orange9"/><C margin="$4"size={120}backgroundColor="$yellow9"/><$ margin="$4"size={120}backgroundColor="$green9"/><C margin="$4"size={120}backgroundColor="$blue9"/><$ margin="$4"size={120}backgroundColor="$purple9"/><C margin="$4"size={120}backgroundColor="$pink9"/><$ margin="$4"size={120}backgroundColor="$red9"/></V></S>}export{y as ScrollViewDemo};
+import { Circle, ScrollView, Square, XStack } from "tamagui";
+function ScrollViewDemo() {
+  return <ScrollView maxHeight={250} width="75%" backgroundColor="$background" padding="$4" borderRadius="$4"><XStack flexWrap="wrap" alignItems="center" justifyContent="center">
+    <Square margin="$4" size={120} backgroundColor="$red9" />
+    <Circle margin="$4" size={120} backgroundColor="$orange9" />
+    <Square margin="$4" size={120} backgroundColor="$yellow9" />
+    <Circle margin="$4" size={120} backgroundColor="$green9" />
+    <Square margin="$4" size={120} backgroundColor="$blue9" />
+    <Circle margin="$4" size={120} backgroundColor="$purple9" />
+    <Square margin="$4" size={120} backgroundColor="$pink9" />
+    <Circle margin="$4" size={120} backgroundColor="$red9" />
+  </XStack></ScrollView>;
+}
+export {
+  ScrollViewDemo
+};
 //# sourceMappingURL=ScrollViewDemo.js.map

package/dist/jsx/ScrollViewDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/ScrollViewDemo.tsx"],
   "sourcesContent": ["import { Circle, ScrollView, Square, XStack } from 'tamagui'\n\nexport function ScrollViewDemo() {\n  return (\n    <ScrollView maxHeight={250} width=\"75%\" backgroundColor=\"$background\" padding=\"$4\" borderRadius=\"$4\">\n      <XStack flexWrap=\"wrap\" alignItems=\"center\" justifyContent=\"center\">\n        <Square margin=\"$4\" size={120} backgroundColor=\"$red9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$orange9\" />\n        <Square margin=\"$4\" size={120} backgroundColor=\"$yellow9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$green9\" />\n        <Square margin=\"$4\" size={120} backgroundColor=\"$blue9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$purple9\" />\n        <Square margin=\"$4\" size={120} backgroundColor=\"$pink9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$red9\" />\n      </XStack>\n    </ScrollView>\n  )\n}\n"],
-  "mappings": "AAAA,OAAS,UAAAA,EAAQ,cAAAC,EAAY,UAAAC,EAAQ,UAAAC,MAAc,UAE5C,SAASC,GAAiB,CAC/B,MACE,CAACH,EAAW,WAAW,IAAK,MAAM,KAAM,gBAAgB,aAAc,QAAQ,IAAK,aAAa,KAC9F,CAACE,EAAO,SAAS,MAAO,WAAW,QAAS,eAAe,SACzD,CAACD,EAAO,OAAO,IAAK,MAAM,IAAK,gBAAgB,OAAQ,EACvD,CAACF,EAAO,OAAO,IAAK,MAAM,IAAK,gBAAgB,UAAW,EAC1D,CAACE,EAAO,OAAO,IAAK,MAAM,IAAK,gBAAgB,UAAW,EAC1D,CAACF,EAAO,OAAO,IAAK,MAAM,IAAK,gBAAgB,SAAU,EACzD,CAACE,EAAO,OAAO,IAAK,MAAM,IAAK,gBAAgB,QAAS,EACxD,CAACF,EAAO,OAAO,IAAK,MAAM,IAAK,gBAAgB,UAAW,EAC1D,CAACE,EAAO,OAAO,IAAK,MAAM,IAAK,gBAAgB,QAAS,EACxD,CAACF,EAAO,OAAO,IAAK,MAAM,IAAK,gBAAgB,OAAQ,EACzD,EATCG,EAUH,EAXCF,EAaL",
-  "names": ["Circle", "ScrollView", "Square", "XStack", "ScrollViewDemo"]
+  "mappings": "AAAA,SAAS,QAAQ,YAAY,QAAQ,cAAc;AAE5C,SAAS,iBAAiB;AAC/B,SACE,CAAC,WAAW,WAAW,KAAK,MAAM,MAAM,gBAAgB,cAAc,QAAQ,KAAK,aAAa,KAC9F,CAAC,OAAO,SAAS,OAAO,WAAW,SAAS,eAAe;AAAA,IACzD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,QAAQ;AAAA,IACvD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,WAAW;AAAA,IAC1D,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,WAAW;AAAA,IAC1D,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,UAAU;AAAA,IACzD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,SAAS;AAAA,IACxD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,WAAW;AAAA,IAC1D,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,SAAS;AAAA,IACxD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,QAAQ;AAAA,EACzD,EATC,OAUH,EAXC;AAaL;",
+  "names": []
 }