@tamagui/demos 1.89.27 → 1.89.29

package/dist/jsx/ToastDuplicateDemo.native.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckCircle2 } from "@tamagui/lucide-icons";
 import { Toast } from "@tamagui/toast";
 import React from "react";
@@ -65,38 +66,63 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 var ToastDuplicateDemo = function() {
   var _React_useState = _sliced_to_array(React.useState(0), 2), savedCount = _React_useState[0], setSavedCount = _React_useState[1];
-  return /* @__PURE__ */ React.createElement(YStack, {
-    alignItems: "center"
-  }, /* @__PURE__ */ React.createElement(Button, {
-    onPress: function() {
-      setSavedCount(function(old) {
-        return old + 1;
-      });
-    }
-  }, "Show toast"), _to_consumable_array(Array(savedCount)).map(function(_, index) {
-    return /* @__PURE__ */ React.createElement(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"
-    }, /* @__PURE__ */ React.createElement(XStack, {
-      space: !0,
-      alignItems: "center"
-    }, /* @__PURE__ */ React.createElement(YStack, null, /* @__PURE__ */ React.createElement(CheckCircle2, null)), /* @__PURE__ */ React.createElement(YStack, null, /* @__PURE__ */ React.createElement(Toast.Title, null, "Successfully saved!"), /* @__PURE__ */ React.createElement(Toast.Description, null, "Don't worry... We've got your data."))));
-  }));
+  return /* @__PURE__ */ _jsxs(YStack, {
+    alignItems: "center",
+    children: [
+      /* @__PURE__ */ _jsx(Button, {
+        onPress: function() {
+          setSavedCount(function(old) {
+            return old + 1;
+          });
+        },
+        children: "Show toast"
+      }),
+      _to_consumable_array(Array(savedCount)).map(function(_, index) {
+        return /* @__PURE__ */ _jsx(
+          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__ */ _jsxs(XStack, {
+              space: !0,
+              alignItems: "center",
+              children: [
+                /* @__PURE__ */ _jsx(YStack, {
+                  children: /* @__PURE__ */ _jsx(CheckCircle2, {})
+                }),
+                /* @__PURE__ */ _jsxs(YStack, {
+                  children: [
+                    /* @__PURE__ */ _jsx(Toast.Title, {
+                      children: "Successfully saved!"
+                    }),
+                    /* @__PURE__ */ _jsx(Toast.Description, {
+                      children: "Don't worry... We've got your data."
+                    })
+                  ]
+                })
+              ]
+            })
+          },
+          // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop
+          index
+        );
+      })
+    ]
+  });
 };
 export {
   ToastDuplicateDemo

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Users/n8/tamagui/packages/demos/src/ToastDuplicateDemo.tsx"],
-  "mappings": "AAAA,SAASA,oBAAoB;AAC7B,SAASC,aAAa;AACtB,OAAOC,WAAW;AAClB,SAASC,QAAQC,QAAQC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKhC,IAAMC,qBAAqB,WAAA;AAChC,MAAoCJ,kBAAAA,iBAAAA,MAAMK,SAAS,CAAA,GAAA,CAAA,GAA5CC,aAA6BN,gBAAAA,CAAAA,GAAjBO,gBAAiBP,gBAAAA,CAAAA;AAEpC,SACE,sBAAA,cAACG,QAAAA;IAAOK,YAAW;KACjB,sBAAA,cAACP,QAAAA;IACCQ,SAAS,WAAA;AACPF,oBAAc,SAACG,KAAAA;eAAQA,MAAM;;IAC/B;KACD,YAAA,GAGC,qBAAGC,MAAML,UAAAA,CAAAA,EAAaM,IAAI,SAACC,GAAGC,OAAAA;WAC9B,sBAAA,cAACf,OAAAA;MACCgB,cAAa;MACbC,KAAKF;MACLG,UAAU;MACVC,YAAY;QAAEC,SAAS;QAAGC,OAAO;QAAKC,GAAG;MAAI;MAC7CC,WAAW;QAAEH,SAAS;QAAGC,OAAO;QAAGC,GAAG;MAAI;MAC1CA,GAAG;MACHF,SAAS;MACTC,OAAO;MACPG,WAAU;OAEV,sBAAA,cAACrB,QAAAA;MAAOsB,OAAAA;MAAMhB,YAAW;OACvB,sBAAA,cAACL,QAAAA,MACC,sBAAA,cAACL,cAAAA,IAAAA,CAAAA,GAGH,sBAAA,cAACK,QAAAA,MACC,sBAAA,cAACJ,MAAM0B,OAAK,MAAC,qBAAA,GACb,sBAAA,cAAC1B,MAAM2B,aAAW,MAAC,qCAAA,CAAA,CAAA,CAAA;;AAOjC;",
-  "names": ["CheckCircle2", "Toast", "React", "Button", "XStack", "YStack", "ToastDuplicateDemo", "useState", "savedCount", "setSavedCount", "alignItems", "onPress", "old", "Array", "map", "_", "index", "viewportName", "key", "duration", "enterStyle", "opacity", "scale", "y", "exitStyle", "animation", "space", "Title", "Description"]
+  "mappings": ";AAAA,SAASA,oBAAoB;AAC7B,SAASC,aAAa;AACtB,OAAOC,WAAW;AAClB,SAASC,QAAQC,QAAQC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKhC,IAAMC,qBAAqB,WAAA;AAChC,MAAoCJ,kBAAAA,iBAAAA,MAAMK,SAAS,CAAA,GAAA,CAAA,GAA5CC,aAA6BN,gBAAAA,CAAAA,GAAjBO,gBAAiBP,gBAAAA,CAAAA;AAEpC,SACE,sBAACG,QAAAA;IAAOK,YAAW;;MACjB,qBAACP,QAAAA;QACCQ,SAAS,WAAA;AACPF,wBAAc,SAACG,KAAAA;mBAAQA,MAAM;;QAC/B;kBACD;;MAGC,qBAAGC,MAAML,UAAAA,CAAAA,EAAaM,IAAI,SAACC,GAAGC,OAAAA;eAC9B;UAACf;UAAAA;YACCgB,cAAa;YAEbC,UAAU;YACVC,YAAY;cAAEC,SAAS;cAAGC,OAAO;cAAKC,GAAG;YAAI;YAC7CC,WAAW;cAAEH,SAAS;cAAGC,OAAO;cAAGC,GAAG;YAAI;YAC1CA,GAAG;YACHF,SAAS;YACTC,OAAO;YACPG,WAAU;sBAEV,sBAACpB,QAAAA;cAAOqB,OAAK;cAACf,YAAW;;gBACvB,qBAACL,QAAAA;4BACC,qBAACL,cAAAA,CAAAA,CAAAA;;gBAGH,sBAACK,QAAAA;;oBACC,qBAACJ,MAAMyB,OAAK;gCAAC;;oBACb,qBAACzB,MAAM0B,aAAW;gCAAC;;;;;;;;UAhBlBX;QAAAA;;;;AAuBf;",
+  "names": ["CheckCircle2", "Toast", "React", "Button", "XStack", "YStack", "ToastDuplicateDemo", "useState", "savedCount", "setSavedCount", "alignItems", "onPress", "old", "Array", "map", "_", "index", "viewportName", "duration", "enterStyle", "opacity", "scale", "y", "exitStyle", "animation", "space", "Title", "Description"]
 }

package/dist/jsx/ToggleGroupDemo.native.js

@@ -1,63 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
 import { Label, ToggleGroup, XStack, YStack } from "tamagui";
 function ToggleGroupDemo() {
-  return /* @__PURE__ */ React.createElement(YStack, {
-    paddingHorizontal: "$4"
-  }, /* @__PURE__ */ React.createElement(XStack, {
-    alignItems: "center",
-    space: "$10"
-  }, /* @__PURE__ */ React.createElement(YStack, {
-    alignItems: "center",
-    space: "$6"
-  }, /* @__PURE__ */ React.createElement(ToggleGroupComponent, {
-    type: "single",
-    size: "$3",
-    orientation: "horizontal"
-  }), /* @__PURE__ */ React.createElement(ToggleGroupComponent, {
-    type: "multiple",
-    size: "$4",
-    orientation: "horizontal"
-  })), /* @__PURE__ */ React.createElement(XStack, {
-    alignItems: "center",
-    space: "$6"
-  }, /* @__PURE__ */ React.createElement(ToggleGroupComponent, {
-    type: "single",
-    size: "$3",
-    orientation: "vertical"
-  }), /* @__PURE__ */ React.createElement(ToggleGroupComponent, {
-    type: "multiple",
-    size: "$4",
-    orientation: "vertical"
-  }))));
+  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) {
   var id = "switch-".concat(props.size.toString().slice(1), "-").concat(props.type);
-  return /* @__PURE__ */ React.createElement(XStack, {
+  return /* @__PURE__ */ _jsxs(XStack, {
     flexDirection: props.orientation === "horizontal" ? "row" : "column",
     alignItems: "center",
     justifyContent: "center",
-    space: "$4"
-  }, /* @__PURE__ */ React.createElement(Label, {
-    paddingRight: "$0",
-    justifyContent: "flex-end",
-    size: props.size,
-    htmlFor: id
-  }, props.type === "single" ? "Single" : "Multiple"), /* @__PURE__ */ React.createElement(ToggleGroup, {
-    orientation: props.orientation,
-    id,
-    type: props.type,
-    size: props.size,
-    disableDeactivation: props.type === "single" ? !0 : void 0
-  }, /* @__PURE__ */ React.createElement(ToggleGroup.Item, {
-    value: "left",
-    "aria-label": "Left aligned"
-  }, /* @__PURE__ */ React.createElement(AlignLeft, null)), /* @__PURE__ */ React.createElement(ToggleGroup.Item, {
-    value: "center",
-    "aria-label": "Center aligned"
-  }, /* @__PURE__ */ React.createElement(AlignCenter, null)), /* @__PURE__ */ React.createElement(ToggleGroup.Item, {
-    value: "right",
-    "aria-label": "Right aligned"
-  }, /* @__PURE__ */ React.createElement(AlignRight, null))));
+    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.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Users/n8/tamagui/packages/demos/src/ToggleGroupDemo.tsx"],
-  "mappings": "AAAA,SAASA,aAAaC,WAAWC,kBAAkB;AAEnD,SAASC,OAAOC,aAAaC,QAAQC,cAAc;AAE5C,SAASC,kBAAAA;AACd,SACE,sBAAA,cAACD,QAAAA;IAAOE,mBAAkB;KACxB,sBAAA,cAACH,QAAAA;IAAOI,YAAW;IAASC,OAAM;KAChC,sBAAA,cAACJ,QAAAA;IAAOG,YAAW;IAASC,OAAM;KAChC,sBAAA,cAACC,sBAAAA;IAAqBC,MAAK;IAASC,MAAK;IAAKC,aAAY;MAC1D,sBAAA,cAACH,sBAAAA;IAAqBC,MAAK;IAAWC,MAAK;IAAKC,aAAY;OAE9D,sBAAA,cAACT,QAAAA;IAAOI,YAAW;IAASC,OAAM;KAChC,sBAAA,cAACC,sBAAAA;IAAqBC,MAAK;IAASC,MAAK;IAAKC,aAAY;MAC1D,sBAAA,cAACH,sBAAAA;IAAqBC,MAAK;IAAWC,MAAK;IAAKC,aAAY;;AAKtE;AAEA,SAASH,qBAAqBI,OAI7B;AACC,MAAMC,KAAM,UAA2CD,OAAlCA,MAAMF,KAAKI,SAAQ,EAAGC,MAAM,CAAA,GAAG,GAAA,EAAc,OAAXH,MAAMH,IAAI;AACjE,SACE,sBAAA,cAACP,QAAAA;IACCc,eAAeJ,MAAMD,gBAAgB,eAAe,QAAQ;IAC5DL,YAAW;IACXW,gBAAe;IACfV,OAAM;KAEN,sBAAA,cAACP,OAAAA;IAAMkB,cAAa;IAAKD,gBAAe;IAAWP,MAAME,MAAMF;IAAMS,SAASN;KAC3ED,MAAMH,SAAS,WAAW,WAAW,UAAA,GAGxC,sBAAA,cAACR,aAAAA;IACCU,aAAaC,MAAMD;IACnBE;IACAJ,MAAMG,MAAMH;IACZC,MAAME,MAAMF;IACZU,qBAAqBR,MAAMH,SAAS,WAAW,KAAOY;KAEtD,sBAAA,cAACpB,YAAYqB,MAAI;IAACC,OAAM;IAAOC,cAAW;KACxC,sBAAA,cAAC1B,WAAAA,IAAAA,CAAAA,GAEH,sBAAA,cAACG,YAAYqB,MAAI;IAACC,OAAM;IAASC,cAAW;KAC1C,sBAAA,cAAC3B,aAAAA,IAAAA,CAAAA,GAEH,sBAAA,cAACI,YAAYqB,MAAI;IAACC,OAAM;IAAQC,cAAW;KACzC,sBAAA,cAACzB,YAAAA,IAAAA,CAAAA,CAAAA,CAAAA;AAKX;",
+  "mappings": ";AAAA,SAASA,aAAaC,WAAWC,kBAAkB;AAEnD,SAASC,OAAOC,aAAaC,QAAQC,cAAc;AAE5C,SAASC,kBAAAA;AACd,SACE,qBAACD,QAAAA;IAAOE,mBAAkB;cACxB,sBAACH,QAAAA;MAAOI,YAAW;MAASC,OAAM;;QAChC,sBAACJ,QAAAA;UAAOG,YAAW;UAASC,OAAM;;YAChC,qBAACC,sBAAAA;cAAqBC,MAAK;cAASC,MAAK;cAAKC,aAAY;;YAC1D,qBAACH,sBAAAA;cAAqBC,MAAK;cAAWC,MAAK;cAAKC,aAAY;;;;QAE9D,sBAACT,QAAAA;UAAOI,YAAW;UAASC,OAAM;;YAChC,qBAACC,sBAAAA;cAAqBC,MAAK;cAASC,MAAK;cAAKC,aAAY;;YAC1D,qBAACH,sBAAAA;cAAqBC,MAAK;cAAWC,MAAK;cAAKC,aAAY;;;;;;;AAKtE;AAEA,SAASH,qBAAqBI,OAI7B;AACC,MAAMC,KAAM,UAA2CD,OAAlCA,MAAMF,KAAKI,SAAQ,EAAGC,MAAM,CAAA,GAAG,GAAA,EAAc,OAAXH,MAAMH,IAAI;AACjE,SACE,sBAACP,QAAAA;IACCc,eAAeJ,MAAMD,gBAAgB,eAAe,QAAQ;IAC5DL,YAAW;IACXW,gBAAe;IACfV,OAAM;;MAEN,qBAACP,OAAAA;QAAMkB,cAAa;QAAKD,gBAAe;QAAWP,MAAME,MAAMF;QAAMS,SAASN;kBAC3ED,MAAMH,SAAS,WAAW,WAAW;;MAGxC,sBAACR,aAAAA;QACCU,aAAaC,MAAMD;QACnBE;QACAJ,MAAMG,MAAMH;QACZC,MAAME,MAAMF;QACZU,qBAAqBR,MAAMH,SAAS,WAAW,KAAOY;;UAEtD,qBAACpB,YAAYqB,MAAI;YAACC,OAAM;YAAOC,cAAW;sBACxC,qBAAC1B,WAAAA,CAAAA,CAAAA;;UAEH,qBAACG,YAAYqB,MAAI;YAACC,OAAM;YAASC,cAAW;sBAC1C,qBAAC3B,aAAAA,CAAAA,CAAAA;;UAEH,qBAACI,YAAYqB,MAAI;YAACC,OAAM;YAAQC,cAAW;sBACzC,qBAACzB,YAAAA,CAAAA,CAAAA;;;;;;AAKX;",
   "names": ["AlignCenter", "AlignLeft", "AlignRight", "Label", "ToggleGroup", "XStack", "YStack", "ToggleGroupDemo", "paddingHorizontal", "alignItems", "space", "ToggleGroupComponent", "type", "size", "orientation", "props", "id", "toString", "slice", "flexDirection", "justifyContent", "paddingRight", "htmlFor", "disableDeactivation", "undefined", "Item", "value", "aria-label"]
 }

package/dist/jsx/TokensDemo.native.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getConfig } from "@tamagui/core";
 import { useState } from "react";
 import { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from "tamagui";
@@ -87,26 +88,32 @@ var sections = [
 ];
 function TokensDemo() {
   var _useState = _sliced_to_array(useState("size"), 2), section = _useState[0], setSection = _useState[1];
-  return /* @__PURE__ */ React.createElement(YStack, {
-    space: !0
-  }, /* @__PURE__ */ React.createElement(XGroup, {
-    alignItems: "center",
-    alignSelf: "center"
-  }, sections.map(function(param) {
-    var name = param.name, key = param.key;
-    return /* @__PURE__ */ React.createElement(XGroup.Item, {
-      key
-    }, /* @__PURE__ */ React.createElement(Button, {
-      size: "$3",
-      theme: section === key ? "active" : null,
-      fontFamily: "$silkscreen",
-      onPress: function() {
-        return setSection(key);
-      }
-    }, name));
-  })), (section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && /* @__PURE__ */ React.createElement(SizeSection, {
-    section
-  }));
+  return /* @__PURE__ */ _jsxs(YStack, {
+    space: !0,
+    children: [
+      /* @__PURE__ */ _jsx(XGroup, {
+        alignItems: "center",
+        alignSelf: "center",
+        children: sections.map(function(param) {
+          var name = param.name, key = param.key;
+          return /* @__PURE__ */ _jsx(XGroup.Item, {
+            children: /* @__PURE__ */ _jsx(Button, {
+              size: "$3",
+              theme: section === key ? "active" : null,
+              fontFamily: "$silkscreen",
+              onPress: function() {
+                return setSection(key);
+              },
+              children: name
+            })
+          }, key);
+        })
+      }),
+      (section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && /* @__PURE__ */ _jsx(SizeSection, {
+        section
+      })
+    ]
+  });
 }
 function SizeSection(param) {
   var section = param.section, allTokens = getConfig().tokens, tokens = allTokens[section.startsWith("space") ? "space" : section], st = Object.keys(tokens).sort(function(a, b) {
@@ -118,40 +125,61 @@ function SizeSection(param) {
   }).sort(function(a, b) {
     return parseFloat(a) > parseFloat(b) ? -1 : 1;
   });
-  return /* @__PURE__ */ React.createElement(YStack, {
+  return /* @__PURE__ */ _jsxs(YStack, {
     flex: 1,
-    space: !0
-  }, /* @__PURE__ */ React.createElement(H2, null, "Sizes"), /* @__PURE__ */ React.createElement(YStack, {
-    width: "100%",
-    space: "$2",
-    separator: /* @__PURE__ */ React.createElement(Separator, null)
-  }, (section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(function(token) {
-    var _tokens_token, _tokens_token1, _tokens_, _allTokens_size_token, _tokens_token2, _spaceTokensNegative_find;
-    return /* @__PURE__ */ React.createElement(XStack, {
-      width: "100%",
-      alignItems: "center",
-      key: token
-    }, /* @__PURE__ */ React.createElement(YStack, {
-      width: "25%"
-    }, /* @__PURE__ */ React.createElement(H3, {
-      size: "$6"
-    }, "$", token)), /* @__PURE__ */ React.createElement(YStack, {
-      width: "20%"
-    }, /* @__PURE__ */ React.createElement(H4, {
-      size: "$5"
-    }, (_tokens_token = tokens[token]) === null || _tokens_token === void 0 ? void 0 : _tokens_token.val, "px")), /* @__PURE__ */ React.createElement(Square, _object_spread({
-      size: (_tokens_token1 = tokens[token]) === null || _tokens_token1 === void 0 ? void 0 : _tokens_token1.val,
-      backgroundColor: "$color5"
-    }, section === "spaceNegative" && {
-      backgroundColor: "$red5",
-      size: -((_tokens_ = tokens[(_spaceTokensNegative_find = spaceTokensNegative.find(function(t) {
-        return parseFloat(t) === -parseFloat(token);
-      })) !== null && _spaceTokensNegative_find !== void 0 ? _spaceTokensNegative_find : token]) === null || _tokens_ === void 0 ? void 0 : _tokens_.val)
-    }, section === "radius" && {
-      size: (_allTokens_size_token = allTokens.size[token]) === null || _allTokens_size_token === void 0 ? void 0 : _allTokens_size_token.val,
-      borderRadius: (_tokens_token2 = tokens[token]) === null || _tokens_token2 === void 0 ? void 0 : _tokens_token2.val
-    })));
-  })));
+    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(function(token) {
+          var _tokens_token, _tokens_token1, _tokens_, _allTokens_size_token, _tokens_token2, _spaceTokensNegative_find;
+          return /* @__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 = tokens[token]) === null || _tokens_token === void 0 ? void 0 : _tokens_token.val,
+                    "px"
+                  ]
+                })
+              }),
+              /* @__PURE__ */ _jsx(Square, _object_spread({
+                size: (_tokens_token1 = tokens[token]) === null || _tokens_token1 === void 0 ? void 0 : _tokens_token1.val,
+                backgroundColor: "$color5"
+              }, section === "spaceNegative" && {
+                backgroundColor: "$red5",
+                size: -((_tokens_ = tokens[(_spaceTokensNegative_find = spaceTokensNegative.find(function(t) {
+                  return parseFloat(t) === -parseFloat(token);
+                })) !== null && _spaceTokensNegative_find !== void 0 ? _spaceTokensNegative_find : token]) === null || _tokens_ === void 0 ? void 0 : _tokens_.val)
+              }, section === "radius" && {
+                size: (_allTokens_size_token = allTokens.size[token]) === null || _allTokens_size_token === void 0 ? void 0 : _allTokens_size_token.val,
+                borderRadius: (_tokens_token2 = tokens[token]) === null || _tokens_token2 === void 0 ? void 0 : _tokens_token2.val
+              }))
+            ]
+          }, token);
+        })
+      })
+    ]
+  });
 }
 export {
   TokensDemo

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Users/n8/tamagui/packages/demos/src/TokensDemo.tsx"],
-  "mappings": "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",
+  "mappings": "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",
   "names": ["getConfig", "useState", "Button", "H2", "H3", "H4", "Separator", "Square", "XGroup", "XStack", "YStack", "sections", "name", "key", "TokensDemo", "section", "setSection", "space", "alignItems", "alignSelf", "map", "Item", "size", "theme", "fontFamily", "onPress", "SizeSection", "allTokens", "tokens", "startsWith", "st", "Object", "keys", "sort", "a", "b", "parseFloat", "spaceTokens", "filter", "t", "spaceTokensNegative", "flex", "width", "separator", "token", "val", "backgroundColor", "find", "borderRadius"]
 }