@tamagui/demos 1.88.0 → 1.88.2

package/dist/jsx/RadioGroupDemo.native.js

@@ -1,20 +1,42 @@
-import { Label, RadioGroup, XStack, YStack } from "tamagui";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var RadioGroupDemo_exports = {};
+__export(RadioGroupDemo_exports, {
+  RadioGroupDemo: () => RadioGroupDemo,
+  RadioGroupItemWithLabel: () => RadioGroupItemWithLabel
+});
+module.exports = __toCommonJS(RadioGroupDemo_exports);
+var import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
 function RadioGroupDemo() {
-  return <RadioGroup aria-labelledby="Select one item" 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>;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.RadioGroup, { "aria-labelledby": "Select one item", defaultValue: "3", name: "form", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { width: 300, alignItems: "center", space: "$2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadioGroupItemWithLabel, { size: "$3", value: "2", label: "Second value" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadioGroupItemWithLabel, { size: "$4", value: "3", label: "Third value" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadioGroupItemWithLabel, { size: "$5", value: "4", label: "Fourth value" })
+  ] }) });
 }
 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>;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { width: 300, alignItems: "center", space: "$4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.RadioGroup.Item, { value: props.value, id, size: props.size, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.RadioGroup.Indicator, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { size: props.size, htmlFor: id, children: props.label })
+  ] });
 }
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   RadioGroupDemo,
   RadioGroupItemWithLabel
-};
+});
 //# sourceMappingURL=RadioGroupDemo.js.map

package/dist/jsx/RadioGroupDemo.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/RadioGroupDemo.tsx"],
-  "mappings": "AAAA,SAAS,OAAO,YAAwB,QAAQ,cAAc;AAEvD,SAAS,iBAAiB;AAC/B,SACE,CAAC,WAAW,gBAAgB,kBAAkB,aAAa,IAAI,KAAK,OAClE,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;AAEO,SAAS,wBAAwB,OAIrC;AACD,QAAM,KAAK,cAAc,MAAM,KAAK;AACpC,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;",
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA8D,oBAKxD;AAHC,SAAS,iBAAiB;AAC/B,SACE,4CAAC,6BAAW,mBAAgB,mBAAkB,cAAa,KAAI,MAAK,QAClE,uDAAC,yBAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,gDAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,gBAAe;AAAA,IAClE,4CAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,eAAc;AAAA,IACjE,4CAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,gBAAe;AAAA,KACpE,GACF;AAEJ;AAEO,SAAS,wBAAwB,OAIrC;AACD,QAAM,KAAK,cAAc,MAAM,KAAK;AACpC,SACE,6CAAC,yBAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,gDAAC,0BAAW,MAAX,EAAgB,OAAO,MAAM,OAAO,IAAQ,MAAM,MAAM,MACvD,sDAAC,0BAAW,WAAX,EAAqB,GACxB;AAAA,IAEA,4CAAC,wBAAM,MAAM,MAAM,MAAM,SAAS,IAC/B,gBAAM,OACT;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/jsx/ReplaceThemeDemo.js

@@ -9,6 +9,7 @@ import {
   useForceUpdate,
   useIsomorphicLayoutEffect
 } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
 function ReplaceThemeDemo() {
   const [theme, setTheme] = useState(), update = useForceUpdate();
   return useIsomorphicLayoutEffect(() => {
@@ -20,19 +21,23 @@ function ReplaceThemeDemo() {
         color2: "green"
       }
     }), setTheme("mytheme");
-  }, []), <YStack alignItems="center" space>
-    <XStack gap="$5"><Theme name={theme ?? null}><Square borderRadius="$8" size={100} backgroundColor="$color" /></Theme></XStack>
-    <Button
-      onPress={() => {
-        replaceTheme({
-          name: "mytheme",
-          theme: {
-            color: "blue"
-          }
-        }), update();
-      }}
-    >Replace theme to only have $color: blue</Button>
-  </YStack>;
+  }, []), /* @__PURE__ */ jsxs(YStack, { alignItems: "center", space: !0, children: [
+    /* @__PURE__ */ jsx(XStack, { gap: "$5", children: /* @__PURE__ */ jsx(Theme, { name: theme ?? null, children: /* @__PURE__ */ jsx(Square, { borderRadius: "$8", size: 100, backgroundColor: "$color" }) }) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onPress: () => {
+          replaceTheme({
+            name: "mytheme",
+            theme: {
+              color: "blue"
+            }
+          }), update();
+        },
+        children: "Replace theme to only have $color: blue"
+      }
+    )
+  ] });
 }
 export {
   ReplaceThemeDemo

package/dist/jsx/ReplaceThemeDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ReplaceThemeDemo.tsx"],
-  "mappings": "AAAA,SAAS,UAAU,oBAAoB;AACvC,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,mBAAmB;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAc,GAClC,SAAS,eAAe;AAE9B,mCAA0B,MAAM;AAC9B,aAAS;AAAA,MACP,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,IACF,CAAC,GACD,SAAS,SAAS;AAAA,EACpB,GAAG,CAAC,CAAC,GAGH,CAAC,OAAO,WAAW,SAAS;AAAA,IAC1B,CAAC,OAAO,IAAI,KACV,CAAC,MAAM,MAAM,SAAS,MACpB,CAAC,OAAO,aAAa,KAAK,MAAM,KAAK,gBAAgB,SAAS,EAChE,EAFC,MAGH,EAJC;AAAA,IAMD,CAAC;AAAA,MACC,SAAS,MAAM;AACb,qBAAa;AAAA,UACX,MAAM;AAAA,UACN,OAAO;AAAA,YACL,OAAO;AAAA,UACT;AAAA,QACF,CAAC,GACD,OAAO;AAAA,MACT;AAAA,KACD,uCAED,EAZC;AAAA,EAaH,EApBC;AAsBL;",
+  "mappings": "AAAA,SAAS,UAAU,oBAAoB;AACvC,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAmBH,SAGM,KAHN;AAjBG,SAAS,mBAAmB;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAc,GAClC,SAAS,eAAe;AAE9B,mCAA0B,MAAM;AAC9B,aAAS;AAAA,MACP,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,IACF,CAAC,GACD,SAAS,SAAS;AAAA,EACpB,GAAG,CAAC,CAAC,GAGH,qBAAC,UAAO,YAAW,UAAS,OAAK,IAC/B;AAAA,wBAAC,UAAO,KAAI,MACV,8BAAC,SAAM,MAAM,SAAS,MACpB,8BAAC,UAAO,cAAa,MAAK,MAAM,KAAK,iBAAgB,UAAS,GAChE,GACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,uBAAa;AAAA,YACX,MAAM;AAAA,YACN,OAAO;AAAA,cACL,OAAO;AAAA,YACT;AAAA,UACF,CAAC,GACD,OAAO;AAAA,QACT;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/jsx/ReplaceThemeDemo.native.js

@@ -1,18 +1,28 @@
-import { addTheme, replaceTheme } from "@tamagui/theme";
-import { useState } from "react";
-import {
-  Button,
-  Square,
-  Theme,
-  XStack,
-  YStack,
-  useForceUpdate,
-  useIsomorphicLayoutEffect
-} from "tamagui";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var ReplaceThemeDemo_exports = {};
+__export(ReplaceThemeDemo_exports, {
+  ReplaceThemeDemo: () => ReplaceThemeDemo
+});
+module.exports = __toCommonJS(ReplaceThemeDemo_exports);
+var import_theme = require("@tamagui/theme"), import_react = require("react"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
 function ReplaceThemeDemo() {
-  const [theme, setTheme] = useState(), update = useForceUpdate();
-  return useIsomorphicLayoutEffect(() => {
-    addTheme({
+  const [theme, setTheme] = (0, import_react.useState)(), update = (0, import_tamagui.useForceUpdate)();
+  return (0, import_tamagui.useIsomorphicLayoutEffect)(() => {
+    (0, import_theme.addTheme)({
       name: "mytheme",
       insertCSS: !0,
       theme: {
@@ -20,21 +30,26 @@ function ReplaceThemeDemo() {
         color2: "green"
       }
     }), setTheme("mytheme");
-  }, []), <YStack alignItems="center" space>
-    <XStack gap="$5"><Theme name={theme ?? null}><Square borderRadius="$8" size={100} backgroundColor="$color" /></Theme></XStack>
-    <Button
-      onPress={() => {
-        replaceTheme({
-          name: "mytheme",
-          theme: {
-            color: "blue"
-          }
-        }), update();
-      }}
-    >Replace theme to only have $color: blue</Button>
-  </YStack>;
+  }, []), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { alignItems: "center", space: !0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, { gap: "$5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Theme, { name: theme ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { borderRadius: "$8", size: 100, backgroundColor: "$color" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Button,
+      {
+        onPress: () => {
+          (0, import_theme.replaceTheme)({
+            name: "mytheme",
+            theme: {
+              color: "blue"
+            }
+          }), update();
+        },
+        children: "Replace theme to only have $color: blue"
+      }
+    )
+  ] });
 }
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   ReplaceThemeDemo
-};
+});
 //# sourceMappingURL=ReplaceThemeDemo.js.map

package/dist/jsx/ReplaceThemeDemo.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ReplaceThemeDemo.tsx"],
-  "mappings": "AAAA,SAAS,UAAU,oBAAoB;AACvC,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,mBAAmB;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAc,GAClC,SAAS,eAAe;AAE9B,mCAA0B,MAAM;AAC9B,aAAS;AAAA,MACP,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,IACF,CAAC,GACD,SAAS,SAAS;AAAA,EACpB,GAAG,CAAC,CAAC,GAGH,CAAC,OAAO,WAAW,SAAS;AAAA,IAC1B,CAAC,OAAO,IAAI,KACV,CAAC,MAAM,MAAM,SAAS,MACpB,CAAC,OAAO,aAAa,KAAK,MAAM,KAAK,gBAAgB,SAAS,EAChE,EAFC,MAGH,EAJC;AAAA,IAMD,CAAC;AAAA,MACC,SAAS,MAAM;AACb,qBAAa;AAAA,UACX,MAAM;AAAA,UACN,OAAO;AAAA,YACL,OAAO;AAAA,UACT;AAAA,QACF,CAAC,GACD,OAAO;AAAA,MACT;AAAA,KACD,uCAED,EAZC;AAAA,EAaH,EApBC;AAsBL;",
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuC,2BACvC,eAAyB,kBACzB,iBAQO,oBAmBH;AAjBG,SAAS,mBAAmB;AACjC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAc,GAClC,aAAS,+BAAe;AAE9B,uDAA0B,MAAM;AAC9B,+BAAS;AAAA,MACP,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,IACF,CAAC,GACD,SAAS,SAAS;AAAA,EACpB,GAAG,CAAC,CAAC,GAGH,6CAAC,yBAAO,YAAW,UAAS,OAAK,IAC/B;AAAA,gDAAC,yBAAO,KAAI,MACV,sDAAC,wBAAM,MAAM,SAAS,MACpB,sDAAC,yBAAO,cAAa,MAAK,MAAM,KAAK,iBAAgB,UAAS,GAChE,GACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,yCAAa;AAAA,YACX,MAAM;AAAA,YACN,OAAO;AAAA,cACL,OAAO;AAAA,YACT;AAAA,UACF,CAAC,GACD,OAAO;AAAA,QACT;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/jsx/ScrollViewDemo.js

@@ -1,21 +1,26 @@
 import { Circle, ScrollView, Square, XStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
 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>;
+  return /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      maxHeight: 250,
+      width: "75%",
+      backgroundColor: "$background",
+      padding: "$4",
+      borderRadius: "$4",
+      children: /* @__PURE__ */ jsxs(XStack, { flexWrap: "wrap", alignItems: "center", justifyContent: "center", children: [
+        /* @__PURE__ */ jsx(Square, { margin: "$4", size: 120, backgroundColor: "$red9" }),
+        /* @__PURE__ */ jsx(Circle, { margin: "$4", size: 120, backgroundColor: "$orange9" }),
+        /* @__PURE__ */ jsx(Square, { margin: "$4", size: 120, backgroundColor: "$yellow9" }),
+        /* @__PURE__ */ jsx(Circle, { margin: "$4", size: 120, backgroundColor: "$green9" }),
+        /* @__PURE__ */ jsx(Square, { margin: "$4", size: 120, backgroundColor: "$blue9" }),
+        /* @__PURE__ */ jsx(Circle, { margin: "$4", size: 120, backgroundColor: "$purple9" }),
+        /* @__PURE__ */ jsx(Square, { margin: "$4", size: 120, backgroundColor: "$pink9" }),
+        /* @__PURE__ */ jsx(Circle, { margin: "$4", size: 120, backgroundColor: "$red9" })
+      ] })
+    }
+  );
 }
 export {
   ScrollViewDemo

package/dist/jsx/ScrollViewDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ScrollViewDemo.tsx"],
-  "mappings": "AAAA,SAAS,QAAQ,YAAY,QAAQ,cAAc;AAE5C,SAAS,iBAAiB;AAC/B,SACE,CAAC;AAAA,IACC,WAAW;AAAA,IACX,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,aAAa;AAAA,GAEb,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,EAjBC;AAmBL;",
+  "mappings": "AAAA,SAAS,QAAQ,YAAY,QAAQ,cAAc;AAW7C,SACE,KADF;AATC,SAAS,iBAAiB;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,SAAQ;AAAA,MACR,cAAa;AAAA,MAEb,+BAAC,UAAO,UAAS,QAAO,YAAW,UAAS,gBAAe,UACzD;AAAA,4BAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,SAAQ;AAAA,QACvD,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,YAAW;AAAA,QAC1D,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,YAAW;AAAA,QAC1D,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,WAAU;AAAA,QACzD,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,UAAS;AAAA,QACxD,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,YAAW;AAAA,QAC1D,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,UAAS;AAAA,QACxD,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,SAAQ;AAAA,SACzD;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/jsx/ScrollViewDemo.native.js

@@ -1,23 +1,48 @@
-import { Circle, ScrollView, Square, XStack } from "tamagui";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var ScrollViewDemo_exports = {};
+__export(ScrollViewDemo_exports, {
+  ScrollViewDemo: () => ScrollViewDemo
+});
+module.exports = __toCommonJS(ScrollViewDemo_exports);
+var import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
 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>;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tamagui.ScrollView,
+    {
+      maxHeight: 250,
+      width: "75%",
+      backgroundColor: "$background",
+      padding: "$4",
+      borderRadius: "$4",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { flexWrap: "wrap", alignItems: "center", justifyContent: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { margin: "$4", size: 120, backgroundColor: "$red9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, { margin: "$4", size: 120, backgroundColor: "$orange9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { margin: "$4", size: 120, backgroundColor: "$yellow9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, { margin: "$4", size: 120, backgroundColor: "$green9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { margin: "$4", size: 120, backgroundColor: "$blue9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, { margin: "$4", size: 120, backgroundColor: "$purple9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { margin: "$4", size: 120, backgroundColor: "$pink9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, { margin: "$4", size: 120, backgroundColor: "$red9" })
+      ] })
+    }
+  );
 }
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   ScrollViewDemo
-};
+});
 //# sourceMappingURL=ScrollViewDemo.js.map

package/dist/jsx/ScrollViewDemo.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ScrollViewDemo.tsx"],
-  "mappings": "AAAA,SAAS,QAAQ,YAAY,QAAQ,cAAc;AAE5C,SAAS,iBAAiB;AAC/B,SACE,CAAC;AAAA,IACC,WAAW;AAAA,IACX,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,aAAa;AAAA,GAEb,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,EAjBC;AAmBL;",
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmD,oBAW7C;AATC,SAAS,iBAAiB;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,SAAQ;AAAA,MACR,cAAa;AAAA,MAEb,uDAAC,yBAAO,UAAS,QAAO,YAAW,UAAS,gBAAe,UACzD;AAAA,oDAAC,yBAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,SAAQ;AAAA,QACvD,4CAAC,yBAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,YAAW;AAAA,QAC1D,4CAAC,yBAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,YAAW;AAAA,QAC1D,4CAAC,yBAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,WAAU;AAAA,QACzD,4CAAC,yBAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,UAAS;AAAA,QACxD,4CAAC,yBAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,YAAW;AAAA,QAC1D,4CAAC,yBAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,UAAS;AAAA,QACxD,4CAAC,yBAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,SAAQ;AAAA,SACzD;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/jsx/SelectDemo.js

@@ -10,117 +10,152 @@ import {
   getFontSize
 } from "tamagui";
 import { LinearGradient } from "tamagui/linear-gradient";
+import { jsx, jsxs } from "react/jsx-runtime";
 function SelectDemo() {
-  return <YStack space>
-    <XStack ai="center" space>
-      <Label f={1} fb={0}>Custom</Label>
-      <SelectDemoItem />
-    </XStack>
-    <XStack ai="center" space>
-      <Label f={1} fb={0}>Native</Label>
-      <SelectDemoItem native />
-    </XStack>
-  </YStack>;
+  return /* @__PURE__ */ jsxs(YStack, { space: !0, children: [
+    /* @__PURE__ */ jsxs(XStack, { ai: "center", space: !0, children: [
+      /* @__PURE__ */ jsx(Label, { f: 1, fb: 0, children: "Custom" }),
+      /* @__PURE__ */ jsx(SelectDemoItem, {})
+    ] }),
+    /* @__PURE__ */ jsxs(XStack, { ai: "center", space: !0, children: [
+      /* @__PURE__ */ jsx(Label, { f: 1, fb: 0, children: "Native" }),
+      /* @__PURE__ */ jsx(SelectDemoItem, { native: !0 })
+    ] })
+  ] });
 }
 function SelectDemoItem(props) {
   const [val, setVal] = useState("apple");
-  return <Select
-    id="food"
-    value={val}
-    onValueChange={setVal}
-    disablePreventBodyScroll
-    {...props}
-  >
-    <Select.Trigger width={220} iconAfter={ChevronDown}><Select.Value placeholder="Something" /></Select.Trigger>
-    <Adapt when="sm" platform="touch"><Sheet
-      native={!!props.native}
-      modal
-      dismissOnSnapToBottom
-      animationConfig={{
-        type: "spring",
-        damping: 20,
-        mass: 1.2,
-        stiffness: 250
-      }}
-    >
-      <Sheet.Frame><Sheet.ScrollView><Adapt.Contents /></Sheet.ScrollView></Sheet.Frame>
-      <Sheet.Overlay
-        animation="lazy"
-        enterStyle={{ opacity: 0 }}
-        exitStyle={{ opacity: 0 }}
-      />
-    </Sheet></Adapt>
-    <Select.Content zIndex={2e5}>
-      <Select.ScrollUpButton
-        alignItems="center"
-        justifyContent="center"
-        position="relative"
-        width="100%"
-        height="$3"
-      >
-        <YStack zIndex={10}><ChevronUp size={20} /></YStack>
-        <LinearGradient
-          start={[0, 0]}
-          end={[0, 1]}
-          fullscreen
-          colors={["$background", "transparent"]}
-          borderRadius="$4"
-        />
-      </Select.ScrollUpButton>
-      <Select.Viewport
-        minWidth={200}
-      >
-        <Select.Group>
-          <Select.Label>Fruits</Select.Label>
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      id: "food",
+      value: val,
+      onValueChange: setVal,
+      disablePreventBodyScroll: !0,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Select.Trigger, { width: 220, iconAfter: ChevronDown, children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Something" }) }),
+        /* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ jsxs(
+          Sheet,
           {
-            /* for longer lists memoizing these is useful */
+            native: !!props.native,
+            modal: !0,
+            dismissOnSnapToBottom: !0,
+            animationConfig: {
+              type: "spring",
+              damping: 20,
+              mass: 1.2,
+              stiffness: 250
+            },
+            children: [
+              /* @__PURE__ */ jsx(Sheet.Frame, { children: /* @__PURE__ */ jsx(Sheet.ScrollView, { children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }) }),
+              /* @__PURE__ */ jsx(
+                Sheet.Overlay,
+                {
+                  animation: "lazy",
+                  enterStyle: { opacity: 0 },
+                  exitStyle: { opacity: 0 }
+                }
+              )
+            ]
           }
-          {useMemo(
-            () => items.map((item, i) => <Select.Item
-              index={i}
-              key={item.name}
-              value={item.name.toLowerCase()}
-            >
-              <Select.ItemText>{item.name}</Select.ItemText>
-              <Select.ItemIndicator marginLeft="auto"><Check size={16} /></Select.ItemIndicator>
-            </Select.Item>),
-            [items]
-          )}
-        </Select.Group>
-        {
-          /* Native gets an extra icon */
-        }
-        {props.native && <YStack
-          position="absolute"
-          right={0}
-          top={0}
-          bottom={0}
-          alignItems="center"
-          justifyContent="center"
-          width="$4"
-          pointerEvents="none"
-        ><ChevronDown
-          size={getFontSize(props.size ?? "$true")}
-        /></YStack>}
-      </Select.Viewport>
-      <Select.ScrollDownButton
-        alignItems="center"
-        justifyContent="center"
-        position="relative"
-        width="100%"
-        height="$3"
-      >
-        <YStack zIndex={10}><ChevronDown size={20} /></YStack>
-        <LinearGradient
-          start={[0, 0]}
-          end={[0, 1]}
-          fullscreen
-          colors={["transparent", "$background"]}
-          borderRadius="$4"
-        />
-      </Select.ScrollDownButton>
-    </Select.Content>
-  </Select>;
+        ) }),
+        /* @__PURE__ */ jsxs(Select.Content, { zIndex: 2e5, children: [
+          /* @__PURE__ */ jsxs(
+            Select.ScrollUpButton,
+            {
+              alignItems: "center",
+              justifyContent: "center",
+              position: "relative",
+              width: "100%",
+              height: "$3",
+              children: [
+                /* @__PURE__ */ jsx(YStack, { zIndex: 10, children: /* @__PURE__ */ jsx(ChevronUp, { size: 20 }) }),
+                /* @__PURE__ */ jsx(
+                  LinearGradient,
+                  {
+                    start: [0, 0],
+                    end: [0, 1],
+                    fullscreen: !0,
+                    colors: ["$background", "transparent"],
+                    borderRadius: "$4"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Select.Viewport,
+            {
+              minWidth: 200,
+              children: [
+                /* @__PURE__ */ jsxs(Select.Group, { children: [
+                  /* @__PURE__ */ jsx(Select.Label, { children: "Fruits" }),
+                  useMemo(
+                    () => items.map((item, i) => /* @__PURE__ */ jsxs(
+                      Select.Item,
+                      {
+                        index: i,
+                        value: item.name.toLowerCase(),
+                        children: [
+                          /* @__PURE__ */ jsx(Select.ItemText, { children: item.name }),
+                          /* @__PURE__ */ jsx(Select.ItemIndicator, { marginLeft: "auto", children: /* @__PURE__ */ jsx(Check, { size: 16 }) })
+                        ]
+                      },
+                      item.name
+                    )),
+                    [items]
+                  )
+                ] }),
+                props.native && /* @__PURE__ */ jsx(
+                  YStack,
+                  {
+                    position: "absolute",
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "$4",
+                    pointerEvents: "none",
+                    children: /* @__PURE__ */ jsx(
+                      ChevronDown,
+                      {
+                        size: getFontSize(props.size ?? "$true")
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Select.ScrollDownButton,
+            {
+              alignItems: "center",
+              justifyContent: "center",
+              position: "relative",
+              width: "100%",
+              height: "$3",
+              children: [
+                /* @__PURE__ */ jsx(YStack, { zIndex: 10, children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 }) }),
+                /* @__PURE__ */ jsx(
+                  LinearGradient,
+                  {
+                    start: [0, 0],
+                    end: [0, 1],
+                    fullscreen: !0,
+                    colors: ["transparent", "$background"],
+                    borderRadius: "$4"
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 const items = [
   { name: "Apple" },