@tamagui/demos 1.1.7 → 1.1.9

package/dist/cjs/LinearGradientDemo.js

@@ -25,27 +25,30 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_tamagui = require("tamagui");
 var import_linear_gradient = require("tamagui/linear-gradient");
 function LinearGradientDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-    space: true,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_linear_gradient.LinearGradient, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_linear_gradient.LinearGradient,
+      {
         width: "$6",
         height: "$6",
         br: "$4",
         colors: ["$red10", "$yellow10"],
         start: [0, 1],
         end: [0, 0]
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_linear_gradient.LinearGradient, {
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_linear_gradient.LinearGradient,
+      {
         width: "$6",
         height: "$6",
         br: "$4",
         colors: ["$background", "$color"],
         start: [1, 1],
         end: [0, 0]
-      })
-    ]
-  });
+      }
+    )
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/LinearGradientDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/LinearGradientDemo.tsx"],
   "sourcesContent": ["import { XStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function LinearGradientDemo() {\n  return (\n    <XStack space>\n      {/* tokens */}\n      <LinearGradient\n        width=\"$6\"\n        height=\"$6\"\n        br=\"$4\"\n        colors={['$red10', '$yellow10']}\n        start={[0, 1]}\n        end={[0, 0]}\n      />\n\n      {/* theme values */}\n      <LinearGradient\n        width=\"$6\"\n        height=\"$6\"\n        br=\"$4\"\n        colors={['$background', '$color']}\n        start={[1, 1]}\n        end={[0, 0]}\n      />\n    </XStack>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKI;AALJ,qBAAuB;AACvB,6BAA+B;AAExB,SAAS,qBAAqB;AACnC,SACE,6CAAC;AAAA,IAAO,OAAK;AAAA,IAEX;AAAA,kDAAC;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,IAAG;AAAA,QACH,QAAQ,CAAC,UAAU,WAAW;AAAA,QAC9B,OAAO,CAAC,GAAG,CAAC;AAAA,QACZ,KAAK,CAAC,GAAG,CAAC;AAAA,OACZ;AAAA,MAGA,4CAAC;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,IAAG;AAAA,QACH,QAAQ,CAAC,eAAe,QAAQ;AAAA,QAChC,OAAO,CAAC,GAAG,CAAC;AAAA,QACZ,KAAK,CAAC,GAAG,CAAC;AAAA,OACZ;AAAA;AAAA,GACF;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKI;AALJ,qBAAuB;AACvB,6BAA+B;AAExB,SAAS,qBAAqB;AACnC,SACE,6CAAC,yBAAO,OAAK,MAEX;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,IAAG;AAAA,QACH,QAAQ,CAAC,UAAU,WAAW;AAAA,QAC9B,OAAO,CAAC,GAAG,CAAC;AAAA,QACZ,KAAK,CAAC,GAAG,CAAC;AAAA;AAAA,IACZ;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,IAAG;AAAA,QACH,QAAQ,CAAC,eAAe,QAAQ;AAAA,QAChC,OAAO,CAAC,GAAG,CAAC;AAAA,QACZ,KAAK,CAAC,GAAG,CAAC;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/ListItemDemo.js

@@ -25,73 +25,44 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_lucide_icons = require("@tamagui/lucide-icons");
 var import_tamagui = require("tamagui");
 function ListItemDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-    $sm: { flexDirection: "column" },
-    px: "$4",
-    space: true,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemDemo1, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemDemo2, {})
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { $sm: { flexDirection: "column" }, px: "$4", space: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemDemo1, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemDemo2, {})
+  ] });
 }
 function ListItemDemo1() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YGroup, {
-    als: "center",
-    bordered: true,
-    w: 240,
-    size: "$4",
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
-        hoverTheme: true,
-        icon: import_lucide_icons.Star,
-        title: "Star",
-        subTitle: "Twinkles"
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
-        hoverTheme: true,
-        icon: import_lucide_icons.Moon,
-        children: "Moon"
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
-        hoverTheme: true,
-        icon: import_lucide_icons.Sun,
-        children: "Sun"
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
-        hoverTheme: true,
-        icon: import_lucide_icons.Cloud,
-        children: "Cloud"
-      })
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YGroup, { als: "center", bordered: true, w: 240, size: "$4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { hoverTheme: true, icon: import_lucide_icons.Star, title: "Star", subTitle: "Twinkles" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { hoverTheme: true, icon: import_lucide_icons.Moon, children: "Moon" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { hoverTheme: true, icon: import_lucide_icons.Sun, children: "Sun" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { hoverTheme: true, icon: import_lucide_icons.Cloud, children: "Cloud" })
+  ] });
 }
 function ListItemDemo2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YGroup, {
-    als: "center",
-    bordered: true,
-    w: 240,
-    size: "$5",
-    separator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}),
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YGroup, { als: "center", bordered: true, w: 240, size: "$5", separator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.ListItem,
+      {
         hoverTheme: true,
         pressTheme: true,
         title: "Star",
         subTitle: "Subtitle",
         icon: import_lucide_icons.Star,
         iconAfter: import_lucide_icons.ChevronRight
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.ListItem,
+      {
         hoverTheme: true,
         pressTheme: true,
         title: "Moon",
         subTitle: "Subtitle",
         icon: import_lucide_icons.Moon,
         iconAfter: import_lucide_icons.ChevronRight
-      })
-    ]
-  });
+      }
+    )
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/ListItemDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/ListItemDemo.tsx"],
   "sourcesContent": ["import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { ListItem, Separator, XStack, YGroup } from 'tamagui'\n\nexport function ListItemDemo() {\n  return (\n    <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n      <ListItemDemo1 />\n      <ListItemDemo2 />\n    </XStack>\n  )\n}\n\nfunction ListItemDemo1() {\n  return (\n    <YGroup als=\"center\" bordered w={240} size=\"$4\">\n      <ListItem hoverTheme icon={Star} title=\"Star\" subTitle=\"Twinkles\" />\n      <ListItem hoverTheme icon={Moon}>\n        Moon\n      </ListItem>\n      <ListItem hoverTheme icon={Sun}>\n        Sun\n      </ListItem>\n      <ListItem hoverTheme icon={Cloud}>\n        Cloud\n      </ListItem>\n    </YGroup>\n  )\n}\n\nfunction ListItemDemo2() {\n  return (\n    <YGroup als=\"center\" bordered w={240} size=\"$5\" separator={<Separator />}>\n      <ListItem\n        hoverTheme\n        pressTheme\n        title=\"Star\"\n        subTitle=\"Subtitle\"\n        icon={Star}\n        iconAfter={ChevronRight}\n      />\n      <ListItem\n        hoverTheme\n        pressTheme\n        title=\"Moon\"\n        subTitle=\"Subtitle\"\n        icon={Moon}\n        iconAfter={ChevronRight}\n      />\n    </YGroup>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMI;AANJ,0BAAqD;AAErD,qBAAoD;AAE7C,SAAS,eAAe;AAC7B,SACE,6CAAC;AAAA,IAAO,KAAK,EAAE,eAAe,SAAS;AAAA,IAAG,IAAG;AAAA,IAAK,OAAK;AAAA,IACrD;AAAA,kDAAC,iBAAc;AAAA,MACf,4CAAC,iBAAc;AAAA;AAAA,GACjB;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,6CAAC;AAAA,IAAO,KAAI;AAAA,IAAS,UAAQ;AAAA,IAAC,GAAG;AAAA,IAAK,MAAK;AAAA,IACzC;AAAA,kDAAC;AAAA,QAAS,YAAU;AAAA,QAAC,MAAM;AAAA,QAAM,OAAM;AAAA,QAAO,UAAS;AAAA,OAAW;AAAA,MAClE,4CAAC;AAAA,QAAS,YAAU;AAAA,QAAC,MAAM;AAAA,QAAM;AAAA,OAEjC;AAAA,MACA,4CAAC;AAAA,QAAS,YAAU;AAAA,QAAC,MAAM;AAAA,QAAK;AAAA,OAEhC;AAAA,MACA,4CAAC;AAAA,QAAS,YAAU;AAAA,QAAC,MAAM;AAAA,QAAO;AAAA,OAElC;AAAA;AAAA,GACF;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,6CAAC;AAAA,IAAO,KAAI;AAAA,IAAS,UAAQ;AAAA,IAAC,GAAG;AAAA,IAAK,MAAK;AAAA,IAAK,WAAW,4CAAC,4BAAU;AAAA,IACpE;AAAA,kDAAC;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA,OACb;AAAA,MACA,4CAAC;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA,OACb;AAAA;AAAA,GACF;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMI;AANJ,0BAAqD;AAErD,qBAAoD;AAE7C,SAAS,eAAe;AAC7B,SACE,6CAAC,yBAAO,KAAK,EAAE,eAAe,SAAS,GAAG,IAAG,MAAK,OAAK,MACrD;AAAA,gDAAC,iBAAc;AAAA,IACf,4CAAC,iBAAc;AAAA,KACjB;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,6CAAC,yBAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MACzC;AAAA,gDAAC,2BAAS,YAAU,MAAC,MAAM,0BAAM,OAAM,QAAO,UAAS,YAAW;AAAA,IAClE,4CAAC,2BAAS,YAAU,MAAC,MAAM,0BAAM,kBAEjC;AAAA,IACA,4CAAC,2BAAS,YAAU,MAAC,MAAM,yBAAK,iBAEhC;AAAA,IACA,4CAAC,2BAAS,YAAU,MAAC,MAAM,2BAAO,mBAElC;AAAA,KACF;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,6CAAC,yBAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MAAK,WAAW,4CAAC,4BAAU,GACpE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/LucideIconsDemo.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -44,46 +48,17 @@ function LucideIconsDemo() {
   const iconsMemo = (0, import_react.useMemo)(() => {
     const icons = lucideIcons.filter((x) => x.key.startsWith(search.toLowerCase()));
     return icons.slice(0, 835).map(({ Icon, name }) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        h: size,
-        ai: "center",
-        jc: "center",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
-            size: size * 0.25
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Spacer, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
-            size: "$2",
-            o: 0.5,
-            children: name
-          })
-        ]
-      }, name);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { h: size, ai: "center", jc: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: size * 0.25 }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Spacer, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { size: "$2", o: 0.5, children: name })
+      ] }, name);
     });
   }, [search]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    als: "stretch",
-    p: "$4",
-    pb: "$0",
-    space: true,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, {
-        value: searchRaw,
-        onChangeText: setSearch,
-        placeholder: "Search..."
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-        h: 420,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ScrollView, {
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Grid, {
-            itemMinWidth: size,
-            children: iconsMemo
-          })
-        })
-      })
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { als: "stretch", p: "$4", pb: "$0", space: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, { value: searchRaw, onChangeText: setSearch, placeholder: "Search..." }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { h: 420, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ScrollView, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Grid, { itemMinWidth: size, children: iconsMemo }) }) })
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/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} ai=\"center\" jc=\"center\" key={name}>\n          <Icon size={size * 0.25} />\n          <Spacer />\n          <Paragraph size=\"$2\" o={0.5}>\n            {name}\n          </Paragraph>\n        </YStack>\n      )\n    })\n  }, [search])\n\n  return (\n    <YStack als=\"stretch\" p=\"$4\" pb=\"$0\" space>\n      <Input value={searchRaw} onChangeText={setSearch} placeholder=\"Search...\" />\n\n      <YStack h={420}>\n        <ScrollView>\n          <Grid itemMinWidth={size}>{iconsMemo}</Grid>\n        </ScrollView>\n      </YStack>\n    </YStack>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBQ;AArBR,kBAA6B;AAC7B,mBAAkC;AAClC,0BAA2B;AAC3B,qBAAyE;AAEzE,MAAM,cAAc,OAAO,KAAK,WAAW,EAAE,IAAI,CAAC,UAAU;AAAA,EAC1D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,YAAY;AACpB,EAAE;AAEK,SAAS,kBAAkB;AAChC,QAAM,CAAC,WAAW,SAAS,QAAI,uBAAS,EAAE;AAC1C,QAAM,aAAS,iCAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,gBAAY,sBAAQ,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,6CAAC;AAAA,QAAO,GAAG;AAAA,QAAM,IAAG;AAAA,QAAS,IAAG;AAAA,QAC9B;AAAA,sDAAC;AAAA,YAAK,MAAM,OAAO;AAAA,WAAM;AAAA,UACzB,4CAAC,yBAAO;AAAA,UACR,4CAAC;AAAA,YAAU,MAAK;AAAA,YAAK,GAAG;AAAA,YACrB;AAAA,WACH;AAAA;AAAA,SAL4C,IAM9C;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,6CAAC;AAAA,IAAO,KAAI;AAAA,IAAU,GAAE;AAAA,IAAK,IAAG;AAAA,IAAK,OAAK;AAAA,IACxC;AAAA,kDAAC;AAAA,QAAM,OAAO;AAAA,QAAW,cAAc;AAAA,QAAW,aAAY;AAAA,OAAY;AAAA,MAE1E,4CAAC;AAAA,QAAO,GAAG;AAAA,QACT,sDAAC;AAAA,UACC,sDAAC;AAAA,YAAK,cAAc;AAAA,YAAO;AAAA,WAAU;AAAA,SACvC;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBQ;AArBR,kBAA6B;AAC7B,mBAAkC;AAClC,0BAA2B;AAC3B,qBAAyE;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,QAAI,uBAAS,EAAE;AAC1C,QAAM,aAAS,iCAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,gBAAY,sBAAQ,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,6CAAC,yBAAO,GAAG,MAAM,IAAG,UAAS,IAAG,UAC9B;AAAA,oDAAC,QAAK,MAAM,OAAO,MAAM;AAAA,QACzB,4CAAC,yBAAO;AAAA,QACR,4CAAC,4BAAU,MAAK,MAAK,GAAG,KACrB,gBACH;AAAA,WAL4C,IAM9C;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,6CAAC,yBAAO,KAAI,WAAU,GAAE,MAAK,IAAG,MAAK,OAAK,MACxC;AAAA,gDAAC,wBAAM,OAAO,WAAW,cAAc,WAAW,aAAY,aAAY;AAAA,IAE1E,4CAAC,yBAAO,GAAG,KACT,sDAAC,kCACC,sDAAC,uBAAK,cAAc,MAAO,qBAAU,GACvC,GACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/PopoverDemo.js

@@ -26,55 +26,27 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_lucide_icons = require("@tamagui/lucide-icons");
 var import_tamagui = require("tamagui");
 function PopoverDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-    space: "$2",
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, {
-        placement: "left",
-        Icon: import_lucide_icons.ChevronLeft
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, {
-        placement: "bottom",
-        Icon: import_lucide_icons.ChevronDown
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, {
-        placement: "top",
-        Icon: import_lucide_icons.ChevronUp
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, {
-        placement: "right",
-        Icon: import_lucide_icons.ChevronRight
-      })
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$2", f: 1, jc: "center", ai: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, { placement: "left", Icon: import_lucide_icons.ChevronLeft, Name: "left-popover" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, { placement: "bottom", Icon: import_lucide_icons.ChevronDown, Name: "bottom-popover" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, { placement: "top", Icon: import_lucide_icons.ChevronUp, Name: "top-popover" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, { placement: "right", Icon: import_lucide_icons.ChevronRight, Name: "right-popover" })
+  ] });
 }
-function Demo({ Icon, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
-    size: "$5",
-    ...props,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
-        asChild: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-          icon: Icon
-        })
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt, {
-        when: "sm",
-        platform: "touch",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Popover.Sheet, {
-          modal: true,
-          dismissOnSnapToBottom: true,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Sheet.Frame, {
-              padding: "$4",
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt.Contents, {})
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Sheet.Overlay, {})
-          ]
-        })
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Popover.Content, {
+function Demo({
+  Icon,
+  Name,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Popover, { size: "$5", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { icon: Icon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt, { when: "sm", platform: "web", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Popover.Sheet, { modal: true, dismissOnSnapToBottom: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Sheet.Frame, { padding: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt.Contents, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Sheet.Overlay, {})
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_tamagui.Popover.Content,
+      {
         bw: 1,
         boc: "$borderColor",
         enterStyle: { x: 0, y: -10, o: 0 },
@@ -92,41 +64,26 @@ function Demo({ Icon, ...props }) {
         ],
         elevate: true,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Arrow, {
-            bw: 1,
-            boc: "$borderColor"
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YGroup, {
-            space: "$3",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-                space: "$3",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, {
-                    size: "$3",
-                    htmlFor: "name",
-                    children: "Name"
-                  }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, {
-                    size: "$3",
-                    id: "name"
-                  })
-                ]
-              }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-                  size: "$3",
-                  onPress: () => {
-                  },
-                  children: "Submit"
-                })
-              })
-            ]
-          })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Arrow, { bw: 1, boc: "$borderColor" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YGroup, { space: "$3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { size: "$3", htmlFor: Name, children: "Name" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, { size: "$3", id: Name })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_tamagui.Button,
+              {
+                size: "$3",
+                onPress: () => {
+                },
+                children: "Submit"
+              }
+            ) })
+          ] })
         ]
-      })
-    ]
-  });
+      }
+    )
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/PopoverDemo.js.map

@@ -1,7 +1,7 @@
 {
   "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\">\n      <Demo placement=\"left\" Icon={ChevronLeft} />\n      <Demo placement=\"bottom\" Icon={ChevronDown} />\n      <Demo placement=\"top\" Icon={ChevronUp} />\n      <Demo placement=\"right\" Icon={ChevronRight} />\n    </XStack>\n  )\n}\n\nexport function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {\n  return (\n    <Popover size=\"$5\" {...props}>\n      <Popover.Trigger asChild>\n        <Button icon={Icon} />\n      </Popover.Trigger>\n\n      <Adapt when=\"sm\" platform=\"touch\">\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        bw={1}\n        boc=\"$borderColor\"\n        enterStyle={{ x: 0, y: -10, o: 0 }}\n        exitStyle={{ x: 0, y: -10, o: 0 }}\n        x={0}\n        y={0}\n        o={1}\n        animation={[\n          'quick',\n          {\n            opacity: {\n              overshootClamping: true,\n            },\n          },\n        ]}\n        elevate\n      >\n        <Popover.Arrow bw={1} boc=\"$borderColor\" />\n\n        <YGroup space=\"$3\">\n          <XStack space=\"$3\">\n            <Label size=\"$3\" htmlFor=\"name\">\n              Name\n            </Label>\n            <Input size=\"$3\" id=\"name\" />\n          </XStack>\n          <Popover.Trigger>\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.Trigger>\n        </YGroup>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcI;AAdJ,0BAAkE;AAClE,qBASO;AAEA,SAAS,cAAc;AAC5B,SACE,6CAAC;AAAA,IAAO,OAAM;AAAA,IACZ;AAAA,kDAAC;AAAA,QAAK,WAAU;AAAA,QAAO,MAAM;AAAA,OAAa;AAAA,MAC1C,4CAAC;AAAA,QAAK,WAAU;AAAA,QAAS,MAAM;AAAA,OAAa;AAAA,MAC5C,4CAAC;AAAA,QAAK,WAAU;AAAA,QAAM,MAAM;AAAA,OAAW;AAAA,MACvC,4CAAC;AAAA,QAAK,WAAU;AAAA,QAAQ,MAAM;AAAA,OAAc;AAAA;AAAA,GAC9C;AAEJ;AAEO,SAAS,KAAK,EAAE,SAAS,MAAM,GAAkC;AACtE,SACE,6CAAC;AAAA,IAAQ,MAAK;AAAA,IAAM,GAAG;AAAA,IACrB;AAAA,kDAAC,uBAAQ,SAAR;AAAA,QAAgB,SAAO;AAAA,QACtB,sDAAC;AAAA,UAAO,MAAM;AAAA,SAAM;AAAA,OACtB;AAAA,MAEA,4CAAC;AAAA,QAAM,MAAK;AAAA,QAAK,UAAS;AAAA,QACxB,uDAAC,uBAAQ,OAAR;AAAA,UAAc,OAAK;AAAA,UAAC,uBAAqB;AAAA,UACxC;AAAA,wDAAC,uBAAQ,MAAM,OAAd;AAAA,cAAoB,SAAQ;AAAA,cAC3B,sDAAC,qBAAM,UAAN,EAAe;AAAA,aAClB;AAAA,YACA,4CAAC,uBAAQ,MAAM,SAAd,EAAsB;AAAA;AAAA,SACzB;AAAA,OACF;AAAA,MAEA,6CAAC,uBAAQ,SAAR;AAAA,QACC,IAAI;AAAA,QACJ,KAAI;AAAA,QACJ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QAChC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAO;AAAA,QAEP;AAAA,sDAAC,uBAAQ,OAAR;AAAA,YAAc,IAAI;AAAA,YAAG,KAAI;AAAA,WAAe;AAAA,UAEzC,6CAAC;AAAA,YAAO,OAAM;AAAA,YACZ;AAAA,2DAAC;AAAA,gBAAO,OAAM;AAAA,gBACZ;AAAA,8DAAC;AAAA,oBAAM,MAAK;AAAA,oBAAK,SAAQ;AAAA,oBAAO;AAAA,mBAEhC;AAAA,kBACA,4CAAC;AAAA,oBAAM,MAAK;AAAA,oBAAK,IAAG;AAAA,mBAAO;AAAA;AAAA,eAC7B;AAAA,cACA,4CAAC,uBAAQ,SAAR;AAAA,gBACC,sDAAC;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS,MAAM;AAAA,kBAEf;AAAA,kBACD;AAAA,iBAED;AAAA,eACF;AAAA;AAAA,WACF;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
+  "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\" f={1} jc=\"center\" ai=\"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        bw={1}\n        boc=\"$borderColor\"\n        enterStyle={{ x: 0, y: -10, o: 0 }}\n        exitStyle={{ x: 0, y: -10, o: 0 }}\n        x={0}\n        y={0}\n        o={1}\n        animation={[\n          'quick',\n          {\n            opacity: {\n              overshootClamping: true,\n            },\n          },\n        ]}\n        elevate\n      >\n        <Popover.Arrow bw={1} boc=\"$borderColor\" />\n\n        <YGroup space=\"$3\">\n          <XStack space=\"$3\">\n            <Label size=\"$3\" htmlFor={Name}>\n              Name\n            </Label>\n            <Input size=\"$3\" id={Name} />\n          </XStack>\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>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcI;AAdJ,0BAAkE;AAClE,qBASO;AAEA,SAAS,cAAc;AAC5B,SACE,6CAAC,yBAAO,OAAM,MAAK,GAAG,GAAG,IAAG,UAAS,IAAG,UACtC;AAAA,gDAAC,QAAK,WAAU,QAAO,MAAM,iCAAa,MAAK,gBAAe;AAAA,IAC9D,4CAAC,QAAK,WAAU,UAAS,MAAM,iCAAa,MAAK,kBAAiB;AAAA,IAClE,4CAAC,QAAK,WAAU,OAAM,MAAM,+BAAW,MAAK,eAAc;AAAA,IAC1D,4CAAC,QAAK,WAAU,SAAQ,MAAM,kCAAc,MAAK,iBAAgB;AAAA,KACnE;AAEJ;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE,6CAAC,0BAAQ,MAAK,MAAM,GAAG,OACrB;AAAA,gDAAC,uBAAQ,SAAR,EAAgB,SAAO,MACtB,sDAAC,yBAAO,MAAM,MAAM,GACtB;AAAA,IAEA,4CAAC,wBAAM,MAAK,MAAK,UAAS,OACxB,uDAAC,uBAAQ,OAAR,EAAc,OAAK,MAAC,uBAAqB,MACxC;AAAA,kDAAC,uBAAQ,MAAM,OAAd,EAAoB,SAAQ,MAC3B,sDAAC,qBAAM,UAAN,EAAe,GAClB;AAAA,MACA,4CAAC,uBAAQ,MAAM,SAAd,EAAsB;AAAA,OACzB,GACF;AAAA,IAEA;AAAA,MAAC,uBAAQ;AAAA,MAAR;AAAA,QACC,IAAI;AAAA,QACJ,KAAI;AAAA,QACJ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QAChC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAO;AAAA,QAEP;AAAA,sDAAC,uBAAQ,OAAR,EAAc,IAAI,GAAG,KAAI,gBAAe;AAAA,UAEzC,6CAAC,yBAAO,OAAM,MACZ;AAAA,yDAAC,yBAAO,OAAM,MACZ;AAAA,0DAAC,wBAAM,MAAK,MAAK,SAAS,MAAM,kBAEhC;AAAA,cACA,4CAAC,wBAAM,MAAK,MAAK,IAAI,MAAM;AAAA,eAC7B;AAAA,YACA,4CAAC,uBAAQ,OAAR,EAAc,SAAO,MACpB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM;AAAA,gBAEf;AAAA,gBACD;AAAA;AAAA,YAED,GACF;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/ProgressDemo.js

@@ -34,67 +34,36 @@ function ProgressDemo() {
       clearTimeout(timer);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        h: 60,
-        ai: "center",
-        space: true,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Paragraph, {
-            h: 30,
-            o: 0.5,
-            children: [
-              "Size: ",
-              size
-            ]
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Progress, {
-            size: sizeProp,
-            value: progress,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Progress.Indicator, {
-              animation: "bouncy"
-            })
-          })
-        ]
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-        ai: "center",
-        space: true,
-        pos: "absolute",
-        b: 10,
-        l: 20,
-        $xxs: { dsp: "none" },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Slider, {
-            size: "$2",
-            w: 130,
-            defaultValue: [4],
-            min: 2,
-            max: 6,
-            step: 1,
-            onValueChange: ([val]) => {
-              setSize(val);
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.TrackActive, {})
-              }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.Thumb, {
-                circular: true,
-                index: 0
-              })
-            ]
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-            size: "$2",
-            onPress: () => setProgress((prev) => (prev + 20) % 100),
-            children: "Load"
-          })
-        ]
-      })
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { h: 60, ai: "center", space: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Paragraph, { h: 30, o: 0.5, children: [
+        "Size: ",
+        size
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Progress, { size: sizeProp, value: progress, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Progress.Indicator, { animation: "bouncy" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { ai: "center", space: true, pos: "absolute", b: 10, l: 20, $xxs: { dsp: "none" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_tamagui.Slider,
+        {
+          size: "$2",
+          w: 130,
+          defaultValue: [4],
+          min: 2,
+          max: 6,
+          step: 1,
+          onValueChange: ([val]) => {
+            setSize(val);
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.TrackActive, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.Thumb, { circular: true, index: 0 })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: "$2", onPress: () => setProgress((prev) => (prev + 20) % 100), children: "Load" })
+    ] })
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/ProgressDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/ProgressDemo.tsx"],
   "sourcesContent": ["import React from 'react'\nimport { useEffect, useState } from 'react'\nimport {\n  Button,\n  Paragraph,\n  Progress,\n  SizeTokens,\n  Slider,\n  XStack,\n  YStack,\n} 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 h={60} ai=\"center\" space>\n        <Paragraph h={30} o={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 pos=\"absolute\" b={10} l={20} $xxs={{ dsp: 'none' }}>\n        <Slider\n          size=\"$2\"\n          w={130}\n          defaultValue={[4]}\n          min={2}\n          max={6}\n          step={1}\n          onValueChange={([val]) => {\n            setSize(val)\n          }}\n        >\n          <Slider.Track>\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;AAAA;AAAA;AAAA;AAAA;AAyBI;AAxBJ,IAAAA,gBAAoC;AACpC,qBAQO;AAEA,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,QAAI,wBAAS,EAAE;AAC3C,QAAM,WAAW,IAAI;AAErB,+BAAU,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;AAAA,mDAAC;AAAA,QAAO,GAAG;AAAA,QAAI,IAAG;AAAA,QAAS,OAAK;AAAA,QAC9B;AAAA,uDAAC;AAAA,YAAU,GAAG;AAAA,YAAI,GAAG;AAAA,YAAK;AAAA;AAAA,cACjB;AAAA;AAAA,WACT;AAAA,UACA,4CAAC;AAAA,YAAS,MAAM;AAAA,YAAU,OAAO;AAAA,YAC/B,sDAAC,wBAAS,WAAT;AAAA,cAAmB,WAAU;AAAA,aAAS;AAAA,WACzC;AAAA;AAAA,OACF;AAAA,MAEA,6CAAC;AAAA,QAAO,IAAG;AAAA,QAAS,OAAK;AAAA,QAAC,KAAI;AAAA,QAAW,GAAG;AAAA,QAAI,GAAG;AAAA,QAAI,MAAM,EAAE,KAAK,OAAO;AAAA,QACzE;AAAA,uDAAC;AAAA,YACC,MAAK;AAAA,YACL,GAAG;AAAA,YACH,cAAc,CAAC,CAAC;AAAA,YAChB,KAAK;AAAA,YACL,KAAK;AAAA,YACL,MAAM;AAAA,YACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,sBAAQ,GAAG;AAAA,YACb;AAAA,YAEA;AAAA,0DAAC,sBAAO,OAAP;AAAA,gBACC,sDAAC,sBAAO,aAAP,EAAmB;AAAA,eACtB;AAAA,cACA,4CAAC,sBAAO,OAAP;AAAA,gBAAa,UAAQ;AAAA,gBAAC,OAAO;AAAA,eAAG;AAAA;AAAA,WACnC;AAAA,UAEA,4CAAC;AAAA,YAAO,MAAK;AAAA,YAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG;AAAA,YAAG;AAAA,WAE3E;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBI;AAxBJ,IAAAA,gBAAoC;AACpC,qBAQO;AAEA,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,QAAI,wBAAS,EAAE;AAC3C,QAAM,WAAW,IAAI;AAErB,+BAAU,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,4EACE;AAAA,iDAAC,yBAAO,GAAG,IAAI,IAAG,UAAS,OAAK,MAC9B;AAAA,mDAAC,4BAAU,GAAG,IAAI,GAAG,KAAK;AAAA;AAAA,QACjB;AAAA,SACT;AAAA,MACA,4CAAC,2BAAS,MAAM,UAAU,OAAO,UAC/B,sDAAC,wBAAS,WAAT,EAAmB,WAAU,UAAS,GACzC;AAAA,OACF;AAAA,IAEA,6CAAC,yBAAO,IAAG,UAAS,OAAK,MAAC,KAAI,YAAW,GAAG,IAAI,GAAG,IAAI,MAAM,EAAE,KAAK,OAAO,GACzE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAG;AAAA,UACH,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,wDAAC,sBAAO,OAAP,EACC,sDAAC,sBAAO,aAAP,EAAmB,GACtB;AAAA,YACA,4CAAC,sBAAO,OAAP,EAAa,UAAQ,MAAC,OAAO,GAAG;AAAA;AAAA;AAAA,MACnC;AAAA,MAEA,4CAAC,yBAAO,MAAK,MAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,kBAE3E;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": ["import_react"]
 }

package/dist/cjs/ScrollViewDemo.js

@@ -24,60 +24,16 @@ module.exports = __toCommonJS(ScrollViewDemo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_tamagui = require("tamagui");
 function ScrollViewDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
-    maxHeight: 250,
-    w: "75%",
-    bc: "$background",
-    p: "$4",
-    br: "$4",
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-      flexWrap: "wrap",
-      ai: "center",
-      jc: "center",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, {
-          m: "$4",
-          size: 120,
-          bc: "$red9"
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, {
-          m: "$4",
-          size: 120,
-          bc: "$orange9"
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, {
-          m: "$4",
-          size: 120,
-          bc: "$yellow9"
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, {
-          m: "$4",
-          size: 120,
-          bc: "$green9"
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, {
-          m: "$4",
-          size: 120,
-          bc: "$blue9"
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, {
-          m: "$4",
-          size: 120,
-          bc: "$purple9"
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, {
-          m: "$4",
-          size: 120,
-          bc: "$pink9"
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, {
-          m: "$4",
-          size: 120,
-          bc: "$red9"
-        })
-      ]
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, { maxHeight: 250, w: "75%", bc: "$background", p: "$4", br: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { flexWrap: "wrap", ai: "center", jc: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { m: "$4", size: 120, bc: "$red9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, { m: "$4", size: 120, bc: "$orange9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { m: "$4", size: 120, bc: "$yellow9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, { m: "$4", size: 120, bc: "$green9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { m: "$4", size: 120, bc: "$blue9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, { m: "$4", size: 120, bc: "$purple9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { m: "$4", size: 120, bc: "$pink9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, { m: "$4", size: 120, bc: "$red9" })
+  ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/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} w=\"75%\" bc=\"$background\" p=\"$4\" br=\"$4\">\n      <XStack flexWrap=\"wrap\" ai=\"center\" jc=\"center\">\n        <Square m=\"$4\" size={120} bc=\"$red9\" />\n        <Circle m=\"$4\" size={120} bc=\"$orange9\" />\n        <Square m=\"$4\" size={120} bc=\"$yellow9\" />\n        <Circle m=\"$4\" size={120} bc=\"$green9\" />\n        <Square m=\"$4\" size={120} bc=\"$blue9\" />\n        <Circle m=\"$4\" size={120} bc=\"$purple9\" />\n        <Square m=\"$4\" size={120} bc=\"$pink9\" />\n        <Circle m=\"$4\" size={120} bc=\"$red9\" />\n      </XStack>\n    </ScrollView>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKM;AALN,qBAAmD;AAE5C,SAAS,iBAAiB;AAC/B,SACE,4CAAC;AAAA,IAAW,WAAW;AAAA,IAAK,GAAE;AAAA,IAAM,IAAG;AAAA,IAAc,GAAE;AAAA,IAAK,IAAG;AAAA,IAC7D,uDAAC;AAAA,MAAO,UAAS;AAAA,MAAO,IAAG;AAAA,MAAS,IAAG;AAAA,MACrC;AAAA,oDAAC;AAAA,UAAO,GAAE;AAAA,UAAK,MAAM;AAAA,UAAK,IAAG;AAAA,SAAQ;AAAA,QACrC,4CAAC;AAAA,UAAO,GAAE;AAAA,UAAK,MAAM;AAAA,UAAK,IAAG;AAAA,SAAW;AAAA,QACxC,4CAAC;AAAA,UAAO,GAAE;AAAA,UAAK,MAAM;AAAA,UAAK,IAAG;AAAA,SAAW;AAAA,QACxC,4CAAC;AAAA,UAAO,GAAE;AAAA,UAAK,MAAM;AAAA,UAAK,IAAG;AAAA,SAAU;AAAA,QACvC,4CAAC;AAAA,UAAO,GAAE;AAAA,UAAK,MAAM;AAAA,UAAK,IAAG;AAAA,SAAS;AAAA,QACtC,4CAAC;AAAA,UAAO,GAAE;AAAA,UAAK,MAAM;AAAA,UAAK,IAAG;AAAA,SAAW;AAAA,QACxC,4CAAC;AAAA,UAAO,GAAE;AAAA,UAAK,MAAM;AAAA,UAAK,IAAG;AAAA,SAAS;AAAA,QACtC,4CAAC;AAAA,UAAO,GAAE;AAAA,UAAK,MAAM;AAAA,UAAK,IAAG;AAAA,SAAQ;AAAA;AAAA,KACvC;AAAA,GACF;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKM;AALN,qBAAmD;AAE5C,SAAS,iBAAiB;AAC/B,SACE,4CAAC,6BAAW,WAAW,KAAK,GAAE,OAAM,IAAG,eAAc,GAAE,MAAK,IAAG,MAC7D,uDAAC,yBAAO,UAAS,QAAO,IAAG,UAAS,IAAG,UACrC;AAAA,gDAAC,yBAAO,GAAE,MAAK,MAAM,KAAK,IAAG,SAAQ;AAAA,IACrC,4CAAC,yBAAO,GAAE,MAAK,MAAM,KAAK,IAAG,YAAW;AAAA,IACxC,4CAAC,yBAAO,GAAE,MAAK,MAAM,KAAK,IAAG,YAAW;AAAA,IACxC,4CAAC,yBAAO,GAAE,MAAK,MAAM,KAAK,IAAG,WAAU;AAAA,IACvC,4CAAC,yBAAO,GAAE,MAAK,MAAM,KAAK,IAAG,UAAS;AAAA,IACtC,4CAAC,yBAAO,GAAE,MAAK,MAAM,KAAK,IAAG,YAAW;AAAA,IACxC,4CAAC,yBAAO,GAAE,MAAK,MAAM,KAAK,IAAG,UAAS;AAAA,IACtC,4CAAC,yBAAO,GAAE,MAAK,MAAM,KAAK,IAAG,SAAQ;AAAA,KACvC,GACF;AAEJ;",
   "names": []
 }