@tamagui/demos 1.88.1 → 1.88.2

package/dist/jsx/ToastDuplicateDemo.native.js

@@ -1,35 +1,69 @@
-import { CheckCircle2 } from "@tamagui/lucide-icons";
-import { Toast } from "@tamagui/toast";
-import React from "react";
-import { Button, XStack, YStack } from "tamagui";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf, __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 __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: !0 }) : target,
+  mod
+)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var ToastDuplicateDemo_exports = {};
+__export(ToastDuplicateDemo_exports, {
+  ToastDuplicateDemo: () => ToastDuplicateDemo
+});
+module.exports = __toCommonJS(ToastDuplicateDemo_exports);
+var import_lucide_icons = require("@tamagui/lucide-icons"), import_toast = require("@tamagui/toast"), import_react = __toESM(require("react")), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
 const ToastDuplicateDemo = () => {
-  const [savedCount, setSavedCount] = React.useState(0);
-  return <YStack alignItems="center">
-    <Button
-      onPress={() => {
-        setSavedCount((old) => old + 1);
-      }}
-    >Show toast</Button>
-    {[...Array(savedCount)].map((_, index) => <Toast
-      viewportName="viewport-multiple"
-      key={index}
-      duration={4e3}
-      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
-      exitStyle={{ opacity: 0, scale: 1, y: -20 }}
-      y={0}
-      opacity={1}
-      scale={1}
-      animation="100ms"
-    ><XStack space alignItems="center">
-      <YStack><CheckCircle2 /></YStack>
-      <YStack>
-        <Toast.Title>Successfully saved!</Toast.Title>
-        <Toast.Description>Don't worry... We've got your data.</Toast.Description>
-      </YStack>
-    </XStack></Toast>)}
-  </YStack>;
+  const [savedCount, setSavedCount] = import_react.default.useState(0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { alignItems: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Button,
+      {
+        onPress: () => {
+          setSavedCount((old) => old + 1);
+        },
+        children: "Show toast"
+      }
+    ),
+    [...Array(savedCount)].map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_toast.Toast,
+      {
+        viewportName: "viewport-multiple",
+        duration: 4e3,
+        enterStyle: { opacity: 0, scale: 0.5, y: -25 },
+        exitStyle: { opacity: 0, scale: 1, y: -20 },
+        y: 0,
+        opacity: 1,
+        scale: 1,
+        animation: "100ms",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: !0, alignItems: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.CheckCircle2, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toast.Toast.Title, { children: "Successfully saved!" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toast.Toast.Description, { children: "Don't worry... We've got your data." })
+          ] })
+        ] })
+      },
+      index
+    ))
+  ] });
 };
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   ToastDuplicateDemo
-};
+});
 //# sourceMappingURL=ToastDuplicateDemo.js.map

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToastDuplicateDemo.tsx"],
-  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AACtB,OAAO,WAAW;AAClB,SAAS,QAAQ,QAAQ,cAAc;AAKhC,MAAM,qBAAqB,MAAM;AACtC,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AAEpD,SACE,CAAC,OAAO,WAAW;AAAA,IACjB,CAAC;AAAA,MACC,SAAS,MAAM;AACb,sBAAc,CAAC,QAAQ,MAAM,CAAC;AAAA,MAChC;AAAA,KACD,UAED,EANC;AAAA,KAOA,CAAC,GAAG,MAAM,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9B,CAAC;AAAA,MACC,aAAa;AAAA,MACb,KAAK;AAAA,MACL,UAAU;AAAA,MACV,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,MAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,MAC1C,GAAG;AAAA,MACH,SAAS;AAAA,MACT,OAAO;AAAA,MACP,UAAU;AAAA,KAEV,CAAC,OAAO,MAAM,WAAW;AAAA,MACvB,CAAC,OACC,CAAC,aAAa,EAChB,EAFC;AAAA,MAID,CAAC;AAAA,QACC,CAAC,MAAM,MAAM,mBAAmB,EAA/B,MAAM;AAAA,QACP,CAAC,MAAM,YAAY,mCAAmC,EAArD,MAAM;AAAA,MACT,EAHC;AAAA,IAIH,EATC,OAUH,EArBC,MAsBF;AAAA,EACH,EAhCC;AAkCL;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B,kCAC7B,eAAsB,2BACtB,eAAkB,2BAClB,iBAAuC,oBAUjC;AALC,MAAM,qBAAqB,MAAM;AACtC,QAAM,CAAC,YAAY,aAAa,IAAI,aAAAA,QAAM,SAAS,CAAC;AAEpD,SACE,6CAAC,yBAAO,YAAW,UACjB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,wBAAc,CAAC,QAAQ,MAAM,CAAC;AAAA,QAChC;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACC,CAAC,GAAG,MAAM,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9B;AAAA,MAAC;AAAA;AAAA,QACC,cAAa;AAAA,QAEb,UAAU;AAAA,QACV,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,QAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,QAC1C,GAAG;AAAA,QACH,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAU;AAAA,QAEV,uDAAC,yBAAO,OAAK,IAAC,YAAW,UACvB;AAAA,sDAAC,yBACC,sDAAC,oCAAa,GAChB;AAAA,UAEA,6CAAC,yBACC;AAAA,wDAAC,mBAAM,OAAN,EAAY,iCAAmB;AAAA,YAChC,4CAAC,mBAAM,aAAN,EAAkB,iDAAmC;AAAA,aACxD;AAAA,WACF;AAAA;AAAA,MAlBK;AAAA,IAmBP,CACD;AAAA,KACH;AAEJ;",
+  "names": ["React"]
 }

package/dist/jsx/ToggleGroupDemo.js

@@ -1,38 +1,47 @@
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
 import { Label, ToggleGroup, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
 function ToggleGroupDemo() {
-  return <YStack paddingHorizontal="$4"><XStack alignItems="center" space="$10">
-    <YStack alignItems="center" space="$6">
-      <ToggleGroupComponent type="single" size="$3" orientation="horizontal" />
-      <ToggleGroupComponent type="multiple" size="$4" orientation="horizontal" />
-    </YStack>
-    <XStack alignItems="center" space="$6">
-      <ToggleGroupComponent type="single" size="$3" orientation="vertical" />
-      <ToggleGroupComponent type="multiple" size="$4" orientation="vertical" />
-    </XStack>
-  </XStack></YStack>;
+  return /* @__PURE__ */ jsx(YStack, { paddingHorizontal: "$4", children: /* @__PURE__ */ jsxs(XStack, { alignItems: "center", space: "$10", children: [
+    /* @__PURE__ */ jsxs(YStack, { alignItems: "center", space: "$6", children: [
+      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "single", size: "$3", orientation: "horizontal" }),
+      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "multiple", size: "$4", orientation: "horizontal" })
+    ] }),
+    /* @__PURE__ */ jsxs(XStack, { alignItems: "center", space: "$6", children: [
+      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "single", size: "$3", orientation: "vertical" }),
+      /* @__PURE__ */ jsx(ToggleGroupComponent, { type: "multiple", size: "$4", orientation: "vertical" })
+    ] })
+  ] }) });
 }
 function ToggleGroupComponent(props) {
   const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
-  return <XStack
-    flexDirection={props.orientation === "horizontal" ? "row" : "column"}
-    alignItems="center"
-    justifyContent="center"
-    space="$4"
-  >
-    <Label paddingRight="$0" justifyContent="flex-end" size={props.size} htmlFor={id}>{props.type === "single" ? "Single" : "Multiple"}</Label>
-    <ToggleGroup
-      orientation={props.orientation}
-      id={id}
-      type={props.type}
-      size={props.size}
-      disableDeactivation={props.type === "single" ? !0 : void 0}
-    >
-      <ToggleGroup.Item value="left" aria-label="Left aligned"><AlignLeft /></ToggleGroup.Item>
-      <ToggleGroup.Item value="center" aria-label="Center aligned"><AlignCenter /></ToggleGroup.Item>
-      <ToggleGroup.Item value="right" aria-label="Right aligned"><AlignRight /></ToggleGroup.Item>
-    </ToggleGroup>
-  </XStack>;
+  return /* @__PURE__ */ jsxs(
+    XStack,
+    {
+      flexDirection: props.orientation === "horizontal" ? "row" : "column",
+      alignItems: "center",
+      justifyContent: "center",
+      space: "$4",
+      children: [
+        /* @__PURE__ */ jsx(Label, { paddingRight: "$0", justifyContent: "flex-end", size: props.size, htmlFor: id, children: props.type === "single" ? "Single" : "Multiple" }),
+        /* @__PURE__ */ jsxs(
+          ToggleGroup,
+          {
+            orientation: props.orientation,
+            id,
+            type: props.type,
+            size: props.size,
+            disableDeactivation: props.type === "single" ? !0 : void 0,
+            children: [
+              /* @__PURE__ */ jsx(ToggleGroup.Item, { value: "left", "aria-label": "Left aligned", children: /* @__PURE__ */ jsx(AlignLeft, {}) }),
+              /* @__PURE__ */ jsx(ToggleGroup.Item, { value: "center", "aria-label": "Center aligned", children: /* @__PURE__ */ jsx(AlignCenter, {}) }),
+              /* @__PURE__ */ jsx(ToggleGroup.Item, { value: "right", "aria-label": "Right aligned", children: /* @__PURE__ */ jsx(AlignRight, {}) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   ToggleGroupDemo

package/dist/jsx/ToggleGroupDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToggleGroupDemo.tsx"],
-  "mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,CAAC,OAAO,kBAAkB,KACxB,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,IAChC,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,MAChC,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,aAAa;AAAA,MACvE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,aAAa;AAAA,IAC3E,EAHC;AAAA,IAID,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,MAChC,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,WAAW;AAAA,MACrE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,WAAW;AAAA,IACzE,EAHC;AAAA,EAIH,EATC,OAUH,EAXC;AAaL;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,CAAC,IAAI,MAAM,IAAI;AACjE,SACE,CAAC;AAAA,IACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,IAC5D,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA;AAAA,IAEN,CAAC,MAAM,aAAa,KAAK,eAAe,WAAW,MAAM,MAAM,MAAM,SAAS,KAC3E,MAAM,SAAS,WAAW,WAAW,WACxC,EAFC;AAAA,IAID,CAAC;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,IAAI;AAAA,MACJ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,qBAAqB,MAAM,SAAS,WAAW,KAAO;AAAA;AAAA,MAEtD,CAAC,YAAY,KAAK,MAAM,OAAO,WAAW,eACxC,CAAC,UAAU,EACb,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,SAAS,WAAW,iBAC1C,CAAC,YAAY,EACf,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,QAAQ,WAAW,gBACzC,CAAC,WAAW,EACd,EAFC,YAAY;AAAA,IAGf,EAhBC;AAAA,EAiBH,EA3BC;AA6BL;",
+  "mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAMvD,SACE,KADF;AAJD,SAAS,kBAAkB;AAChC,SACE,oBAAC,UAAO,mBAAkB,MACxB,+BAAC,UAAO,YAAW,UAAS,OAAM,OAChC;AAAA,yBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,cAAa;AAAA,MACvE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,cAAa;AAAA,OAC3E;AAAA,IACA,qBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF,GACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,CAAC,IAAI,MAAM,IAAI;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,OAAM;AAAA,MAEN;AAAA,4BAAC,SAAM,cAAa,MAAK,gBAAe,YAAW,MAAM,MAAM,MAAM,SAAS,IAC3E,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS,WAAW,KAAO;AAAA,YAEtD;AAAA,kCAAC,YAAY,MAAZ,EAAiB,OAAM,QAAO,cAAW,gBACxC,8BAAC,aAAU,GACb;AAAA,cACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,UAAS,cAAW,kBAC1C,8BAAC,eAAY,GACf;AAAA,cACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,SAAQ,cAAW,iBACzC,8BAAC,cAAW,GACd;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/jsx/ToggleGroupDemo.native.js

@@ -1,40 +1,68 @@
-import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
-import { Label, ToggleGroup, 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 ToggleGroupDemo_exports = {};
+__export(ToggleGroupDemo_exports, {
+  ToggleGroupDemo: () => ToggleGroupDemo
+});
+module.exports = __toCommonJS(ToggleGroupDemo_exports);
+var import_lucide_icons = require("@tamagui/lucide-icons"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
 function ToggleGroupDemo() {
-  return <YStack paddingHorizontal="$4"><XStack alignItems="center" space="$10">
-    <YStack alignItems="center" space="$6">
-      <ToggleGroupComponent type="single" size="$3" orientation="horizontal" />
-      <ToggleGroupComponent type="multiple" size="$4" orientation="horizontal" />
-    </YStack>
-    <XStack alignItems="center" space="$6">
-      <ToggleGroupComponent type="single" size="$3" orientation="vertical" />
-      <ToggleGroupComponent type="multiple" size="$4" orientation="vertical" />
-    </XStack>
-  </XStack></YStack>;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { paddingHorizontal: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { alignItems: "center", space: "$10", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { alignItems: "center", space: "$6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupComponent, { type: "single", size: "$3", orientation: "horizontal" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupComponent, { type: "multiple", size: "$4", orientation: "horizontal" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { alignItems: "center", space: "$6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupComponent, { type: "single", size: "$3", orientation: "vertical" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupComponent, { type: "multiple", size: "$4", orientation: "vertical" })
+    ] })
+  ] }) });
 }
 function ToggleGroupComponent(props) {
   const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
-  return <XStack
-    flexDirection={props.orientation === "horizontal" ? "row" : "column"}
-    alignItems="center"
-    justifyContent="center"
-    space="$4"
-  >
-    <Label paddingRight="$0" justifyContent="flex-end" size={props.size} htmlFor={id}>{props.type === "single" ? "Single" : "Multiple"}</Label>
-    <ToggleGroup
-      orientation={props.orientation}
-      id={id}
-      type={props.type}
-      size={props.size}
-      disableDeactivation={props.type === "single" ? !0 : void 0}
-    >
-      <ToggleGroup.Item value="left" aria-label="Left aligned"><AlignLeft /></ToggleGroup.Item>
-      <ToggleGroup.Item value="center" aria-label="Center aligned"><AlignCenter /></ToggleGroup.Item>
-      <ToggleGroup.Item value="right" aria-label="Right aligned"><AlignRight /></ToggleGroup.Item>
-    </ToggleGroup>
-  </XStack>;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_tamagui.XStack,
+    {
+      flexDirection: props.orientation === "horizontal" ? "row" : "column",
+      alignItems: "center",
+      justifyContent: "center",
+      space: "$4",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { paddingRight: "$0", justifyContent: "flex-end", size: props.size, htmlFor: id, children: props.type === "single" ? "Single" : "Multiple" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_tamagui.ToggleGroup,
+          {
+            orientation: props.orientation,
+            id,
+            type: props.type,
+            size: props.size,
+            disableDeactivation: props.type === "single" ? !0 : void 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, { value: "left", "aria-label": "Left aligned", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.AlignLeft, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, { value: "center", "aria-label": "Center aligned", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.AlignCenter, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, { value: "right", "aria-label": "Right aligned", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.AlignRight, {}) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   ToggleGroupDemo
-};
+});
 //# sourceMappingURL=ToggleGroupDemo.js.map

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToggleGroupDemo.tsx"],
-  "mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,CAAC,OAAO,kBAAkB,KACxB,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,IAChC,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,MAChC,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,aAAa;AAAA,MACvE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,aAAa;AAAA,IAC3E,EAHC;AAAA,IAID,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,MAChC,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,WAAW;AAAA,MACrE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,WAAW;AAAA,IACzE,EAHC;AAAA,EAIH,EATC,OAUH,EAXC;AAaL;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,CAAC,IAAI,MAAM,IAAI;AACjE,SACE,CAAC;AAAA,IACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,IAC5D,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA;AAAA,IAEN,CAAC,MAAM,aAAa,KAAK,eAAe,WAAW,MAAM,MAAM,MAAM,SAAS,KAC3E,MAAM,SAAS,WAAW,WAAW,WACxC,EAFC;AAAA,IAID,CAAC;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,IAAI;AAAA,MACJ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,qBAAqB,MAAM,SAAS,WAAW,KAAO;AAAA;AAAA,MAEtD,CAAC,YAAY,KAAK,MAAM,OAAO,WAAW,eACxC,CAAC,UAAU,EACb,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,SAAS,WAAW,iBAC1C,CAAC,YAAY,EACf,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,QAAQ,WAAW,gBACzC,CAAC,WAAW,EACd,EAFC,YAAY;AAAA,IAGf,EAhBC;AAAA,EAiBH,EA3BC;AA6BL;",
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAmD,kCACnD,iBAA+D,oBAMvD;AAJD,SAAS,kBAAkB;AAChC,SACE,4CAAC,yBAAO,mBAAkB,MACxB,uDAAC,yBAAO,YAAW,UAAS,OAAM,OAChC;AAAA,iDAAC,yBAAO,YAAW,UAAS,OAAM,MAChC;AAAA,kDAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,cAAa;AAAA,MACvE,4CAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,cAAa;AAAA,OAC3E;AAAA,IACA,6CAAC,yBAAO,YAAW,UAAS,OAAM,MAChC;AAAA,kDAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,4CAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF,GACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,CAAC,IAAI,MAAM,IAAI;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,OAAM;AAAA,MAEN;AAAA,oDAAC,wBAAM,cAAa,MAAK,gBAAe,YAAW,MAAM,MAAM,MAAM,SAAS,IAC3E,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS,WAAW,KAAO;AAAA,YAEtD;AAAA,0DAAC,2BAAY,MAAZ,EAAiB,OAAM,QAAO,cAAW,gBACxC,sDAAC,iCAAU,GACb;AAAA,cACA,4CAAC,2BAAY,MAAZ,EAAiB,OAAM,UAAS,cAAW,kBAC1C,sDAAC,mCAAY,GACf;AAAA,cACA,4CAAC,2BAAY,MAAZ,EAAiB,OAAM,SAAQ,cAAW,iBACzC,sDAAC,kCAAW,GACd;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/jsx/TokensDemo.js

@@ -1,6 +1,7 @@
 import { getConfig } from "@tamagui/core";
 import { useState } from "react";
 import { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
 const sections = [
   {
     name: "Size",
@@ -21,47 +22,54 @@ const sections = [
 ];
 function TokensDemo() {
   const [section, setSection] = useState("size");
-  return <YStack space>
-    <XGroup alignItems="center" alignSelf="center">{sections.map(({ name, key }) => <XGroup.Item key={key}><Button
-      size="$3"
-      theme={section === key ? "active" : null}
-      fontFamily="$silkscreen"
-      onPress={() => setSection(key)}
-    >{name}</Button></XGroup.Item>)}</XGroup>
-    {(section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && <SizeSection section={section} />}
-  </YStack>;
+  return /* @__PURE__ */ jsxs(YStack, { space: !0, children: [
+    /* @__PURE__ */ jsx(XGroup, { alignItems: "center", alignSelf: "center", children: sections.map(({ name, key }) => /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "$3",
+        theme: section === key ? "active" : null,
+        fontFamily: "$silkscreen",
+        onPress: () => setSection(key),
+        children: name
+      }
+    ) }, key)) }),
+    (section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && /* @__PURE__ */ jsx(SizeSection, { section })
+  ] });
 }
 function SizeSection({ section }) {
   const allTokens = getConfig().tokens, tokens = allTokens[section.startsWith("space") ? "space" : section], st = Object.keys(tokens).sort((a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1), spaceTokens = st.filter((t) => parseFloat(t) >= 0), spaceTokensNegative = st.filter((t) => parseFloat(t) < 0).sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
-  return <YStack flex={1} space>
-    <H2>Sizes</H2>
-    <YStack width="100%" space="$2" separator={<Separator />}>{(section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
-      (token) => <XStack width="100%" alignItems="center" key={token}>
-        <YStack width="25%"><H3 size="$6">
-          {"$"}
-          {token}
-        </H3></YStack>
-        <YStack width="20%"><H4 size="$5">
-          {tokens[token]?.val}
-          {"px"}
-        </H4></YStack>
-        <Square
-          size={tokens[token]?.val}
-          backgroundColor="$color5"
-          {...section === "spaceNegative" && {
-            backgroundColor: "$red5",
-            size: -tokens[spaceTokensNegative.find(
-              (t) => parseFloat(t) === -parseFloat(token)
-            ) ?? token]?.val
-          }}
-          {...section === "radius" && {
-            size: allTokens.size[token]?.val,
-            borderRadius: tokens[token]?.val
-          }}
-        />
-      </XStack>
-    )}</YStack>
-  </YStack>;
+  return /* @__PURE__ */ jsxs(YStack, { flex: 1, space: !0, children: [
+    /* @__PURE__ */ jsx(H2, { children: "Sizes" }),
+    /* @__PURE__ */ jsx(YStack, { width: "100%", space: "$2", separator: /* @__PURE__ */ jsx(Separator, {}), children: (section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
+      (token) => /* @__PURE__ */ jsxs(XStack, { width: "100%", alignItems: "center", children: [
+        /* @__PURE__ */ jsx(YStack, { width: "25%", children: /* @__PURE__ */ jsxs(H3, { size: "$6", children: [
+          "$",
+          token
+        ] }) }),
+        /* @__PURE__ */ jsx(YStack, { width: "20%", children: /* @__PURE__ */ jsxs(H4, { size: "$5", children: [
+          tokens[token]?.val,
+          "px"
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          Square,
+          {
+            size: tokens[token]?.val,
+            backgroundColor: "$color5",
+            ...section === "spaceNegative" && {
+              backgroundColor: "$red5",
+              size: -tokens[spaceTokensNegative.find(
+                (t) => parseFloat(t) === -parseFloat(token)
+              ) ?? token]?.val
+            },
+            ...section === "radius" && {
+              size: allTokens.size[token]?.val,
+              borderRadius: tokens[token]?.val
+            }
+          }
+        )
+      ] }, token)
+    ) })
+  ] });
 }
 export {
   TokensDemo

package/dist/jsx/TokensDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/TokensDemo.tsx"],
-  "mappings": "AAAA,SAAiB,iBAAiB;AAClC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,IAAI,WAAW,QAAQ,QAAQ,QAAQ,cAAc;AAI9E,MAAM,WAA6C;AAAA,EACjD;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF;AAEO,SAAS,aAAa;AAC3B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,MAAM;AAEtD,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,WAAW,SAAS,UAAU,UACnC,SAAS,IAAI,CAAC,EAAE,MAAM,IAAI,MAEvB,CAAC,OAAO,KAAK,KAAK,KAChB,CAAC;AAAA,MACC,KAAK;AAAA,MACL,OAAO,YAAY,MAAM,WAAW;AAAA,MACpC,WAAW;AAAA,MACX,SAAS,MAAM,WAAW,GAAG;AAAA,MAE5B,KACH,EAPC,OAQH,EATC,OAAO,KAWX,EACH,EAfC;AAAA,MAiBC,YAAY,UACZ,YAAY,mBACZ,YAAY,WACZ,YAAY,aAAa,CAAC,YAAY,SAAS,SAAS;AAAA,EAC5D,EAtBC;AAwBL;AAEA,SAAS,YAAY,EAAE,QAAQ,GAAyB;AACtD,QAAM,YAAY,UAAU,EAAE,QACxB,SAAS,UAAU,QAAQ,WAAW,OAAO,IAAI,UAAU,OAAO,GAClE,KAAK,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,IAAI,EAAG,GAChF,cAAc,GAAG,OAAO,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,GACjD,sBAAsB,GACzB,OAAO,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAC/B,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,KAAK,CAAE;AAE1D,SACE,CAAC,OAAO,MAAM,GAAG;AAAA,IACf,CAAC,GAAG,KAAK,EAAR;AAAA,IACD,CAAC,OAAO,MAAM,OAAO,MAAM,KAAK,WAAW,CAAC,UAAU,MAClD,YAAY,kBAAkB,sBAAsB,aAAa;AAAA,MACjE,CAAC,UAEG,CAAC,OAAO,MAAM,OAAO,WAAW,SAAS,KAAK;AAAA,QAC5C,CAAC,OAAO,MAAM,MACZ,CAAC,GAAG,KAAK;AAAA,WAAK;AAAA,WAAE;AAAA,QAAM,EAArB,GACH,EAFC;AAAA,QAGD,CAAC,OAAO,MAAM,MACZ,CAAC,GAAG,KAAK;AAAA,WAAM,OAAO,KAAK,GAAG;AAAA,WAAI;AAAA,QAAE,EAAnC,GACH,EAFC;AAAA,QAGD,CAAC;AAAA,UACC,MAAM,OAAO,KAAK,GAAG;AAAA,UACrB,gBAAgB;AAAA,cACX,YAAY,mBAAmB;AAAA,YAClC,iBAAiB;AAAA,YACjB,MACE,CAAC,OACC,oBAAoB;AAAA,cAClB,CAAC,MAAM,WAAW,CAAC,MAAM,CAAC,WAAW,KAAK;AAAA,YAC5C,KAAK,KACP,GAAG;AAAA,UACP;AAAA,cACK,YAAY,YAAY;AAAA,YAC3B,MAAM,UAAU,KAAK,KAAK,GAAG;AAAA,YAC7B,cAAc,OAAO,KAAK,GAAG;AAAA,UAC/B;AAAA,QACF;AAAA,MACF,EAxBC;AAAA,IA2BP,EACF,EAhCC;AAAA,EAiCH,EAnCC;AAqCL;",
+  "mappings": "AAAA,SAAiB,iBAAiB;AAClC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,IAAI,WAAW,QAAQ,QAAQ,QAAQ,cAAc;AA2B1E,SAKU,KALV;AAvBJ,MAAM,WAA6C;AAAA,EACjD;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF;AAEO,SAAS,aAAa;AAC3B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,MAAM;AAEtD,SACE,qBAAC,UAAO,OAAK,IACX;AAAA,wBAAC,UAAO,YAAW,UAAS,WAAU,UACnC,mBAAS,IAAI,CAAC,EAAE,MAAM,IAAI,MAEvB,oBAAC,OAAO,MAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,YAAY,MAAM,WAAW;AAAA,QACpC,YAAW;AAAA,QACX,SAAS,MAAM,WAAW,GAAG;AAAA,QAE5B;AAAA;AAAA,IACH,KARgB,GASlB,CAEH,GACH;AAAA,KAEE,YAAY,UACZ,YAAY,mBACZ,YAAY,WACZ,YAAY,aAAa,oBAAC,eAAY,SAAkB;AAAA,KAC5D;AAEJ;AAEA,SAAS,YAAY,EAAE,QAAQ,GAAyB;AACtD,QAAM,YAAY,UAAU,EAAE,QACxB,SAAS,UAAU,QAAQ,WAAW,OAAO,IAAI,UAAU,OAAO,GAClE,KAAK,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,IAAI,EAAG,GAChF,cAAc,GAAG,OAAO,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,GACjD,sBAAsB,GACzB,OAAO,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAC/B,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,KAAK,CAAE;AAE1D,SACE,qBAAC,UAAO,MAAM,GAAG,OAAK,IACpB;AAAA,wBAAC,MAAG,mBAAK;AAAA,IACT,oBAAC,UAAO,OAAM,QAAO,OAAM,MAAK,WAAW,oBAAC,aAAU,GAClD,uBAAY,kBAAkB,sBAAsB,aAAa;AAAA,MACjE,CAAC,UAEG,qBAAC,UAAO,OAAM,QAAO,YAAW,UAC9B;AAAA,4BAAC,UAAO,OAAM,OACZ,+BAAC,MAAG,MAAK,MAAK;AAAA;AAAA,UAAE;AAAA,WAAM,GACxB;AAAA,QACA,oBAAC,UAAO,OAAM,OACZ,+BAAC,MAAG,MAAK,MAAM;AAAA,iBAAO,KAAK,GAAG;AAAA,UAAI;AAAA,WAAE,GACtC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,OAAO,KAAK,GAAG;AAAA,YACrB,iBAAgB;AAAA,YACf,GAAI,YAAY,mBAAmB;AAAA,cAClC,iBAAiB;AAAA,cACjB,MACE,CAAC,OACC,oBAAoB;AAAA,gBAClB,CAAC,MAAM,WAAW,CAAC,MAAM,CAAC,WAAW,KAAK;AAAA,cAC5C,KAAK,KACP,GAAG;AAAA,YACP;AAAA,YACC,GAAI,YAAY,YAAY;AAAA,cAC3B,MAAM,UAAU,KAAK,KAAK,GAAG;AAAA,cAC7B,cAAc,OAAO,KAAK,GAAG;AAAA,YAC/B;AAAA;AAAA,QACF;AAAA,WAvB4C,KAwB9C;AAAA,IAGN,GACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/jsx/TokensDemo.native.js

@@ -1,6 +1,24 @@
-import { getConfig } from "@tamagui/core";
-import { useState } from "react";
-import { Button, H2, H3, H4, Separator, Square, XGroup, 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 TokensDemo_exports = {};
+__export(TokensDemo_exports, {
+  TokensDemo: () => TokensDemo
+});
+module.exports = __toCommonJS(TokensDemo_exports);
+var import_core = require("@tamagui/core"), import_react = require("react"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
 const sections = [
   {
     name: "Size",
@@ -20,53 +38,61 @@ const sections = [
   }
 ];
 function TokensDemo() {
-  const [section, setSection] = useState("size");
-  return <YStack space>
-    <XGroup alignItems="center" alignSelf="center">{sections.map(({ name, key }) => <XGroup.Item key={key}><Button
-      size="$3"
-      theme={section === key ? "active" : null}
-      fontFamily="$silkscreen"
-      onPress={() => setSection(key)}
-    >{name}</Button></XGroup.Item>)}</XGroup>
-    {(section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && <SizeSection section={section} />}
-  </YStack>;
+  const [section, setSection] = (0, import_react.useState)("size");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { space: !0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XGroup, { alignItems: "center", alignSelf: "center", children: sections.map(({ name, key }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Button,
+      {
+        size: "$3",
+        theme: section === key ? "active" : null,
+        fontFamily: "$silkscreen",
+        onPress: () => setSection(key),
+        children: name
+      }
+    ) }, key)) }),
+    (section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SizeSection, { section })
+  ] });
 }
 function SizeSection({ section }) {
-  const allTokens = getConfig().tokens, tokens = allTokens[section.startsWith("space") ? "space" : section], st = Object.keys(tokens).sort((a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1), spaceTokens = st.filter((t) => parseFloat(t) >= 0), spaceTokensNegative = st.filter((t) => parseFloat(t) < 0).sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
-  return <YStack flex={1} space>
-    <H2>Sizes</H2>
-    <YStack width="100%" space="$2" separator={<Separator />}>{(section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
+  const allTokens = (0, import_core.getConfig)().tokens, tokens = allTokens[section.startsWith("space") ? "space" : section], st = Object.keys(tokens).sort((a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1), spaceTokens = st.filter((t) => parseFloat(t) >= 0), spaceTokensNegative = st.filter((t) => parseFloat(t) < 0).sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { flex: 1, space: !0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H2, { children: "Sizes" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { width: "100%", space: "$2", separator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), children: (section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
       (token) => {
         var _a, _b, _c, _d, _e;
-        return <XStack width="100%" alignItems="center" key={token}>
-          <YStack width="25%"><H3 size="$6">
-            {"$"}
-            {token}
-          </H3></YStack>
-          <YStack width="20%"><H4 size="$5">
-            {(_a = tokens[token]) == null ? void 0 : _a.val}
-            {"px"}
-          </H4></YStack>
-          <Square
-            size={(_b = tokens[token]) == null ? void 0 : _b.val}
-            backgroundColor="$color5"
-            {...section === "spaceNegative" && {
-              backgroundColor: "$red5",
-              size: -((_c = tokens[spaceTokensNegative.find(
-                (t) => parseFloat(t) === -parseFloat(token)
-              ) ?? token]) == null ? void 0 : _c.val)
-            }}
-            {...section === "radius" && {
-              size: (_d = allTokens.size[token]) == null ? void 0 : _d.val,
-              borderRadius: (_e = tokens[token]) == null ? void 0 : _e.val
-            }}
-          />
-        </XStack>;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { width: "100%", alignItems: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { width: "25%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.H3, { size: "$6", children: [
+            "$",
+            token
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { width: "20%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.H4, { size: "$5", children: [
+            (_a = tokens[token]) == null ? void 0 : _a.val,
+            "px"
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_tamagui.Square,
+            {
+              size: (_b = tokens[token]) == null ? void 0 : _b.val,
+              backgroundColor: "$color5",
+              ...section === "spaceNegative" && {
+                backgroundColor: "$red5",
+                size: -((_c = tokens[spaceTokensNegative.find(
+                  (t) => parseFloat(t) === -parseFloat(token)
+                ) ?? token]) == null ? void 0 : _c.val)
+              },
+              ...section === "radius" && {
+                size: (_d = allTokens.size[token]) == null ? void 0 : _d.val,
+                borderRadius: (_e = tokens[token]) == null ? void 0 : _e.val
+              }
+            }
+          )
+        ] }, token);
       }
-    )}</YStack>
-  </YStack>;
+    ) })
+  ] });
 }
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   TokensDemo
-};
+});
 //# sourceMappingURL=TokensDemo.js.map