@tamagui/demos 1.89.28 → 1.89.30

package/dist/cjs/CheckboxHeadlessDemo.native.js

@@ -18,7 +18,7 @@ __export(CheckboxHeadlessDemo_exports, {
   CheckboxHeadlessDemo: () => CheckboxHeadlessDemo
 });
 module.exports = __toCommonJS(CheckboxHeadlessDemo_exports);
-var import_checkbox_headless = require("@tamagui/checkbox-headless"), import_lucide_icons = require("@tamagui/lucide-icons"), import_react = require("react"), import_react_native = require("react-native"), import_tamagui = require("tamagui");
+var import_jsx_runtime = require("react/jsx-runtime"), import_checkbox_headless = require("@tamagui/checkbox-headless"), import_lucide_icons = require("@tamagui/lucide-icons"), import_react = require("react"), import_react_native = require("react-native"), import_tamagui = require("tamagui");
 function _array_like_to_array(arr, len) {
   (len == null || len > arr.length) && (len = arr.length);
   for (var i = 0, arr2 = new Array(len); i < len; i++)
@@ -62,15 +62,30 @@ function _non_iterable_rest() {
 }
 function _object_spread(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {}, ownKeys = Object.keys(source);
-    typeof Object.getOwnPropertySymbols == "function" && (ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+    var source = arguments[i] != null ? arguments[i] : {}, ownKeys2 = Object.keys(source);
+    typeof Object.getOwnPropertySymbols == "function" && (ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
       return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-    }))), ownKeys.forEach(function(key) {
+    }))), ownKeys2.forEach(function(key) {
       _define_property(target, key, source[key]);
     });
   }
   return target;
 }
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _object_spread_props(target, source) {
+  return source = source ?? {}, Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+    Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+  }), target;
+}
 function _sliced_to_array(arr, i) {
   return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
@@ -86,26 +101,32 @@ function _unsupported_iterable_to_array(o, minLen) {
   }
 }
 function CheckboxHeadlessDemo() {
-  return /* @__PURE__ */ React.createElement(import_tamagui.YStack, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
     width: 200,
     alignItems: "center",
-    space: "$3"
-  }, /* @__PURE__ */ React.createElement(import_tamagui.XStack, {
     space: "$3",
-    alignItems: "center"
-  }, /* @__PURE__ */ React.createElement(HeadlessCheckbox, {
-    defaultChecked: "indeterminate",
-    id: "headless"
-  }), /* @__PURE__ */ React.createElement(import_tamagui.Label, {
-    htmlFor: "headless"
-  }, "Headless")));
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      space: "$3",
+      alignItems: "center",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeadlessCheckbox, {
+          defaultChecked: "indeterminate",
+          id: "headless"
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+          htmlFor: "headless",
+          children: "Headless"
+        })
+      ]
+    })
+  });
 }
 var HeadlessCheckbox = /* @__PURE__ */ (0, import_react.forwardRef)(function(props, ref) {
   var _useState = _sliced_to_array((0, import_react.useState)(props.defaultChecked || !1), 2), checked = _useState[0], setChecked = _useState[1], _useCheckbox = (0, import_checkbox_headless.useCheckbox)(props, [
     checked,
     setChecked
   ], ref), checkboxProps = _useCheckbox.checkboxProps, checkboxRef = _useCheckbox.checkboxRef, bubbleInput = _useCheckbox.bubbleInput;
-  return /* @__PURE__ */ React.createElement(import_react_native.Pressable, _object_spread({
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.Pressable, _object_spread_props(_object_spread({
     style: {
       width: 20,
       height: 20,
@@ -115,13 +136,19 @@ var HeadlessCheckbox = /* @__PURE__ */ (0, import_react.forwardRef)(function(pro
       backgroundColor: checked === !0 ? "lightblue" : "silver"
     },
     ref: checkboxRef
-  }, checkboxProps), checked === "indeterminate" && /* @__PURE__ */ React.createElement(import_lucide_icons.Minus, {
-    width: 18,
-    height: 18
-  }), checked === !0 && /* @__PURE__ */ React.createElement(import_lucide_icons.Check, {
-    width: 18,
-    height: 18
-  }), bubbleInput);
+  }, checkboxProps), {
+    children: [
+      checked === "indeterminate" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.Minus, {
+        width: 18,
+        height: 18
+      }),
+      checked === !0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.Check, {
+        width: 18,
+        height: 18
+      }),
+      bubbleInput
+    ]
+  }));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/CheckboxHeadlessDemo.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Users/n8/tamagui/packages/demos/src/CheckboxHeadlessDemo.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AACA,+BAA4B,uCAC5B,sBAA6B,kCAC7B,eAAqC,kBAErC,sBAA0B,yBAC1B,iBAAsC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE/B,SAASA,uBAAAA;AACd,SACE,sBAAA,cAACC,uBAAAA;IAAOC,OAAO;IAAKC,YAAW;IAASC,OAAM;KAC5C,sBAAA,cAACC,uBAAAA;IAAOD,OAAM;IAAKD,YAAW;KAC5B,sBAAA,cAACG,kBAAAA;IAAiBC,gBAAe;IAAgBC,IAAG;MAEpD,sBAAA,cAACC,sBAAAA;IAAMC,SAAQ;KAAW,UAAA,CAAA,CAAA;AAIlC;AAEA,IAAMJ,mBAAmBK,6CAAwC,SAACC,OAAOC,KAAAA;AACvE,MAA8BC,YAAAA,qBAAAA,uBAASF,MAAML,kBAAkB,EAAA,GAAA,CAAA,GAAxDQ,UAAuBD,UAAAA,CAAAA,GAAdE,aAAcF,UAAAA,CAAAA,GACsBG,mBAAAA,sCAClDL,OACA;IAACG;IAASC;KACVH,GAAAA,GAHMK,gBAA4CD,aAA5CC,eAAeC,cAA6BF,aAA7BE,aAAaC,cAAgBH,aAAhBG;AAMpC,SACE,sBAAA,cAACC,+BAAAA,eAAAA;IACCC,OAAO;MACLpB,OAAO;MACPqB,QAAQ;MACRC,cAAc;MACdC,gBAAgB;MAChBtB,YAAY;MACZuB,iBAAiBX,YAAY,KAAO,cAAc;IACpD;IACAF,KAAKM;KACDD,aAAAA,GAEHH,YAAY,mBAAmB,sBAAA,cAACY,2BAAAA;IAAMzB,OAAO;IAAIqB,QAAQ;MACzDR,YAAY,MAAQ,sBAAA,cAACa,2BAAAA;IAAM1B,OAAO;IAAIqB,QAAQ;MAC9CH,WAAAA;AAGP,CAAA;",
-  "names": ["CheckboxHeadlessDemo", "YStack", "width", "alignItems", "space", "XStack", "HeadlessCheckbox", "defaultChecked", "id", "Label", "htmlFor", "forwardRef", "props", "ref", "useState", "checked", "setChecked", "useCheckbox", "checkboxProps", "checkboxRef", "bubbleInput", "Pressable", "style", "height", "borderRadius", "justifyContent", "backgroundColor", "Minus", "Check"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;uDACA,2BAA4B,uCAC5B,sBAA6B,kCAC7B,eAAqC,kBAErC,sBAA0B,yBAC1B,iBAAsC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE/B,SAASA,uBAAAA;AACd,SACE,uCAAAC,KAACC,uBAAAA;IAAOC,OAAO;IAAKC,YAAW;IAASC,OAAM;cAC5C,uCAAAC,MAACC,uBAAAA;MAAOF,OAAM;MAAKD,YAAW;;QAC5B,uCAAAH,KAACO,kBAAAA;UAAiBC,gBAAe;UAAgBC,IAAG;;QAEpD,uCAAAT,KAACU,sBAAAA;UAAMC,SAAQ;oBAAW;;;;;AAIlC;AAEA,IAAMJ,mBAAmBK,6CAAwC,SAACC,OAAOC,KAAAA;AACvE,MAA8BC,YAAAA,qBAAAA,uBAASF,MAAML,kBAAkB,EAAA,GAAA,CAAA,GAAxDQ,UAAuBD,UAAAA,CAAAA,GAAdE,aAAcF,UAAAA,CAAAA,GACsBG,mBAAAA,sCAClDL,OACA;IAACG;IAASC;KACVH,GAAAA,GAHMK,gBAA4CD,aAA5CC,eAAeC,cAA6BF,aAA7BE,aAAaC,cAAgBH,aAAhBG;AAMpC,SACE,uCAAAhB,MAACiB,+BAAAA,qBAAAA,eAAAA;IACCC,OAAO;MACLrB,OAAO;MACPsB,QAAQ;MACRC,cAAc;MACdC,gBAAgB;MAChBvB,YAAY;MACZwB,iBAAiBX,YAAY,KAAO,cAAc;IACpD;IACAF,KAAKM;KACDD,aAAAA,GAAAA;;MAEHH,YAAY,mBAAmB,uCAAAhB,KAAC4B,2BAAAA;QAAM1B,OAAO;QAAIsB,QAAQ;;MACzDR,YAAY,MAAQ,uCAAAhB,KAAC6B,2BAAAA;QAAM3B,OAAO;QAAIsB,QAAQ;;MAC9CH;;;AAGP,CAAA;",
+  "names": ["CheckboxHeadlessDemo", "_jsx", "YStack", "width", "alignItems", "space", "_jsxs", "XStack", "HeadlessCheckbox", "defaultChecked", "id", "Label", "htmlFor", "forwardRef", "props", "ref", "useState", "checked", "setChecked", "useCheckbox", "checkboxProps", "checkboxRef", "bubbleInput", "Pressable", "style", "height", "borderRadius", "justifyContent", "backgroundColor", "Minus", "Check"]
 }

package/dist/cjs/CheckboxUnstyledDemo.native.js

@@ -19,7 +19,7 @@ __export(CheckboxUnstyledDemo_exports, {
   CheckboxUnstyledDemo: () => CheckboxUnstyledDemo
 });
 module.exports = __toCommonJS(CheckboxUnstyledDemo_exports);
-var import_checkbox = require("@tamagui/checkbox"), import_core = require("@tamagui/core"), import_lucide_icons = require("@tamagui/lucide-icons"), import_tamagui = require("tamagui"), Frame = (0, import_core.styled)(import_core.Stack, {
+var import_jsx_runtime = require("react/jsx-runtime"), import_checkbox = require("@tamagui/checkbox"), import_core = require("@tamagui/core"), import_lucide_icons = require("@tamagui/lucide-icons"), import_tamagui = require("tamagui"), Frame = (0, import_core.styled)(import_core.Stack, {
   borderWidth: 1,
   borderColor: "$borderColor",
   borderRadius: 5,
@@ -44,19 +44,28 @@ var import_checkbox = require("@tamagui/checkbox"), import_core = require("@tama
   Indicator
 });
 function CheckboxUnstyledDemo() {
-  return /* @__PURE__ */ React.createElement(import_tamagui.YStack, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
     width: 200,
     alignItems: "center",
-    gap: "$3"
-  }, /* @__PURE__ */ React.createElement(import_tamagui.XStack, {
     gap: "$3",
-    alignItems: "center"
-  }, /* @__PURE__ */ React.createElement(Checkbox, {
-    defaultChecked: !0,
-    id: "unstyled"
-  }, /* @__PURE__ */ React.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React.createElement(import_lucide_icons.Check, null))), /* @__PURE__ */ React.createElement(import_tamagui.Label, {
-    htmlFor: "unstyled"
-  }, "Unstyled")));
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      gap: "$3",
+      alignItems: "center",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Checkbox, {
+          defaultChecked: !0,
+          id: "unstyled",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Checkbox.Indicator, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.Check, {})
+          })
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+          htmlFor: "unstyled",
+          children: "Unstyled"
+        })
+      ]
+    })
+  });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/CheckboxUnstyledDemo.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Users/n8/tamagui/packages/demos/src/CheckboxUnstyledDemo.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;AAAA;;;;;;sBAAsD,8BACtD,cAA8B,0BAC9B,sBAAsB,kCACtB,iBAAsC,oBAEhCA,YAAQC,oBAAOC,mBAAO;EAC1BC,aAAa;EACbC,aAAa;EACbC,cAAc;EACdC,YAAY;EACZC,gBAAgB;EAChBC,UAAU;IACRC,SAAS;MACPC,eAAe,CAAC;MAChBC,MAAM;QACJC,iBAAiB;MACnB;MACAC,OAAO;QACLD,iBAAiB;MACnB;IACF;EACF;EAEAE,iBAAiB;IACfL,SAAS;EACX;AACF,CAAA,GAEMM,gBAAYd,oBAAOC,mBAAO,CAAC,CAAA,GAEpBc,eAAWC,gCAAe;EACrCjB;EACAe;AACF,CAAA;AAEO,SAASG,uBAAAA;AACd,SACE,sBAAA,cAACC,uBAAAA;IAAOC,OAAO;IAAKd,YAAW;IAASe,KAAI;KAC1C,sBAAA,cAACC,uBAAAA;IAAOD,KAAI;IAAKf,YAAW;KAC1B,sBAAA,cAACU,UAAAA;IAASO,gBAAAA;IAAeC,IAAG;KAC1B,sBAAA,cAACR,SAASD,WAAS,MACjB,sBAAA,cAACU,2BAAAA,IAAAA,CAAAA,CAAAA,GAGL,sBAAA,cAACC,sBAAAA;IAAMC,SAAQ;KAAW,UAAA,CAAA,CAAA;AAIlC;",
-  "names": ["Frame", "styled", "Stack", "borderWidth", "borderColor", "borderRadius", "alignItems", "justifyContent", "variants", "checked", "indeterminate", "true", "backgroundColor", "false", "defaultVariants", "Indicator", "Checkbox", "createCheckbox", "CheckboxUnstyledDemo", "YStack", "width", "gap", "XStack", "defaultChecked", "id", "Check", "Label", "htmlFor"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;uDAAA,kBAAsD,8BACtD,cAA8B,0BAC9B,sBAAsB,kCACtB,iBAAsC,oBAEhCA,YAAQC,oBAAOC,mBAAO;EAC1BC,aAAa;EACbC,aAAa;EACbC,cAAc;EACdC,YAAY;EACZC,gBAAgB;EAChBC,UAAU;IACRC,SAAS;MACPC,eAAe,CAAC;MAChBC,MAAM;QACJC,iBAAiB;MACnB;MACAC,OAAO;QACLD,iBAAiB;MACnB;IACF;EACF;EAEAE,iBAAiB;IACfL,SAAS;EACX;AACF,CAAA,GAEMM,gBAAYd,oBAAOC,mBAAO,CAAC,CAAA,GAEpBc,eAAWC,gCAAe;EACrCjB;EACAe;AACF,CAAA;AAEO,SAASG,uBAAAA;AACd,SACE,uCAAAC,KAACC,uBAAAA;IAAOC,OAAO;IAAKf,YAAW;IAASgB,KAAI;cAC1C,uCAAAC,MAACC,uBAAAA;MAAOF,KAAI;MAAKhB,YAAW;;QAC1B,uCAAAa,KAACH,UAAAA;UAASS,gBAAc;UAACC,IAAG;oBAC1B,uCAAAP,KAACH,SAASD,WAAS;sBACjB,uCAAAI,KAACQ,2BAAAA,CAAAA,CAAAA;;;QAGL,uCAAAR,KAACS,sBAAAA;UAAMC,SAAQ;oBAAW;;;;;AAIlC;",
+  "names": ["Frame", "styled", "Stack", "borderWidth", "borderColor", "borderRadius", "alignItems", "justifyContent", "variants", "checked", "indeterminate", "true", "backgroundColor", "false", "defaultVariants", "Indicator", "Checkbox", "createCheckbox", "CheckboxUnstyledDemo", "_jsx", "YStack", "width", "gap", "_jsxs", "XStack", "defaultChecked", "id", "Check", "Label", "htmlFor"]
 }

package/dist/cjs/ColorsDemo.native.js

@@ -18,7 +18,7 @@ __export(ColorsDemo_exports, {
   ColorsDemo: () => ColorsDemo
 });
 module.exports = __toCommonJS(ColorsDemo_exports);
-var import_tamagui = require("tamagui"), colorGroups = [
+var import_jsx_runtime = require("react/jsx-runtime"), import_tamagui = require("tamagui"), colorGroups = [
   "orange",
   "yellow",
   "green",
@@ -34,90 +34,109 @@ function ColorsDemo() {
     getColors(colors),
     getColors(colors, !0)
   ], colorsLight = _ref[0], colorsDark = _ref[1];
-  return /* @__PURE__ */ React.createElement(import_tamagui.YStack, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     marginTop: "$4",
-    space: "$8"
-  }, /* @__PURE__ */ React.createElement(ColorsRow, {
-    title: "Light",
-    colors: colorsLight
-  }), /* @__PURE__ */ React.createElement(import_tamagui.Separator, null), /* @__PURE__ */ React.createElement(ColorsRow, {
-    title: "Dark",
-    colors: colorsDark
-  }));
+    space: "$8",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorsRow, {
+        title: "Light",
+        colors: colorsLight
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorsRow, {
+        title: "Dark",
+        colors: colorsDark
+      })
+    ]
+  });
 }
 function ColorsRow(param) {
   var title = param.title, colors = param.colors;
-  return /* @__PURE__ */ React.createElement(import_tamagui.YStack, {
-    space: !0,
-    $sm: {
-      space: "$2"
-    }
-  }, /* @__PURE__ */ React.createElement(import_tamagui.H2, {
-    size: "$2"
-  }, title), /* @__PURE__ */ React.createElement(import_tamagui.XStack, {
-    space: !0,
-    alignSelf: "center"
-  }, /* @__PURE__ */ React.createElement(import_tamagui.YStack, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     space: !0,
     $sm: {
       space: "$2"
     },
-    alignSelf: "center"
-  }, colors.map(function(group, index) {
-    return /* @__PURE__ */ React.createElement(import_tamagui.XStack, {
-      space: "$2",
-      key: index
-    }, group.map(function(color) {
-      return /* @__PURE__ */ React.createElement(import_tamagui.Square, {
-        key: "".concat(color.key).concat(index),
-        borderRadius: "$2",
-        size: "$4",
-        height: "$4",
-        borderWidth: 1,
-        backgroundColor: (0, import_tamagui.getVariableValue)(color),
-        borderColor: "$color7",
-        $sm: {
-          size: "$2"
-        },
-        $xs: {
-          size: "$1"
-        }
-      });
-    }));
-  }), /* @__PURE__ */ React.createElement(import_tamagui.XStack, {
-    space: "$2",
-    alignSelf: "center"
-  }, new Array(13).fill(0).slice(1).map(function(_, index) {
-    return /* @__PURE__ */ React.createElement(import_tamagui.Paragraph, {
-      color: "$color10",
-      textAlign: "center",
-      width: "$4",
-      $sm: {
-        width: "$2"
-      },
-      $xs: {
-        width: "$1"
-      },
-      key: index
-    }, index);
-  }))), /* @__PURE__ */ React.createElement(import_tamagui.YStack, {
-    space: "$4",
-    marginTop: "$2"
-  }, colorGroups.map(function(name) {
-    return /* @__PURE__ */ React.createElement(import_tamagui.Paragraph, {
-      theme: name,
-      color: "$color10",
-      height: "$4",
-      rotate: "-10deg",
-      $sm: {
-        height: "$2"
-      },
-      $xs: {
-        height: "$1"
-      },
-      key: name
-    }, name);
-  }))));
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H2, {
+        size: "$2",
+        children: title
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        space: !0,
+        alignSelf: "center",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+            space: !0,
+            $sm: {
+              space: "$2"
+            },
+            alignSelf: "center",
+            children: [
+              colors.map(function(group, index) {
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+                  space: "$2",
+                  children: group.map(function(color) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+                      borderRadius: "$2",
+                      size: "$4",
+                      height: "$4",
+                      borderWidth: 1,
+                      backgroundColor: (0, import_tamagui.getVariableValue)(color),
+                      borderColor: "$color7",
+                      $sm: {
+                        size: "$2"
+                      },
+                      $xs: {
+                        size: "$1"
+                      }
+                    }, "".concat(color.key).concat(index));
+                  })
+                }, index);
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+                space: "$2",
+                alignSelf: "center",
+                children: new Array(13).fill(0).slice(1).map(function(_, index) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+                    color: "$color10",
+                    textAlign: "center",
+                    width: "$4",
+                    $sm: {
+                      width: "$2"
+                    },
+                    $xs: {
+                      width: "$1"
+                    },
+                    children: index
+                  }, index);
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+            space: "$4",
+            marginTop: "$2",
+            children: colorGroups.map(function(name) {
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+                theme: name,
+                color: "$color10",
+                height: "$4",
+                rotate: "-10deg",
+                $sm: {
+                  height: "$2"
+                },
+                $xs: {
+                  height: "$1"
+                },
+                children: name
+              }, name);
+            })
+          })
+        ]
+      })
+    ]
+  });
 }
 function getColors(colors) {
   var dark = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1;

package/dist/cjs/ColorsDemo.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Users/n8/tamagui/packages/demos/src/ColorsDemo.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;AACA;;;;;qBASO,oBAEDA,cAAc;EAAC;EAAU;EAAU;EAAS;EAAQ;EAAU;EAAQ;;AAErE,SAASC,aAAAA;AACd,MAAMC,aAASC,0BAAU;IAAEC,UAAU;EAAM,CAAA,EAAGC,OACZ,OAAA;IAACC,UAAUJ,MAAAA;IAASI,UAAUJ,QAAQ,EAAA;KAAjEK,cAA2B,KAAA,CAAA,GAAdC,aAAc,KAAA,CAAA;AAElC,SACE,sBAAA,cAACC,uBAAAA;IAAOC,WAAU;IAAKC,OAAM;KAC3B,sBAAA,cAACC,WAAAA;IAAUC,OAAM;IAAQX,QAAQK;MACjC,sBAAA,cAACO,0BAAAA,IAAAA,GACD,sBAAA,cAACF,WAAAA;IAAUC,OAAM;IAAOX,QAAQM;;AAGtC;AAEA,SAASI,UAAU,OAA0D;MAAxDC,QAAF,MAAEA,OAAOX,SAAT,MAASA;AAC1B,SACE,sBAAA,cAACO,uBAAAA;IAAOE,OAAAA;IAAMI,KAAK;MAAEJ,OAAO;IAAK;KAC/B,sBAAA,cAACK,mBAAAA;IAAGC,MAAK;KAAMJ,KAAAA,GAEf,sBAAA,cAACK,uBAAAA;IAAOP,OAAAA;IAAMQ,WAAU;KACtB,sBAAA,cAACV,uBAAAA;IAAOE,OAAAA;IAAMI,KAAK;MAAEJ,OAAO;IAAK;IAAGQ,WAAU;KAC3CjB,OAAOkB,IAAI,SAACC,OAAOC,OAAAA;AAClB,WACE,sBAAA,cAACJ,uBAAAA;MAAOP,OAAM;MAAKY,KAAKD;OACrBD,MAAMD,IAAI,SAACf,OAAAA;AACV,aACE,sBAAA,cAACmB,uBAAAA;QACCD,KAAM,GAAcD,OAAZjB,MAAMkB,GAAG,EAAS,OAAND,KAAAA;QACpBG,cAAa;QACbR,MAAK;QACLS,QAAO;QACPC,aAAa;QACbC,qBAAiBC,iCAAiBxB,KAAAA;QAClCyB,aAAY;QACZf,KAAK;UACHE,MAAM;QACR;QACAc,KAAK;UACHd,MAAM;QACR;;IAGN,CAAA,CAAA;EAGN,CAAA,GAEA,sBAAA,cAACC,uBAAAA;IAAOP,OAAM;IAAKQ,WAAU;KAC1B,IAAIa,MAAM,EAAA,EACRC,KAAK,CAAA,EACLC,MAAM,CAAA,EACNd,IAAI,SAACe,GAAGb,OAAAA;AACP,WACE,sBAAA,cAACc,0BAAAA;MACC/B,OAAM;MACNgC,WAAU;MACVC,OAAM;MACNvB,KAAK;QACHuB,OAAO;MACT;MACAP,KAAK;QACHO,OAAO;MACT;MACAf,KAAKD;OAEJA,KAAAA;EAGP,CAAA,CAAA,CAAA,GAIN,sBAAA,cAACb,uBAAAA;IAAOE,OAAM;IAAKD,WAAU;KAC1BV,YAAYoB,IAAI,SAACmB,MAAAA;WAChB,sBAAA,cAACH,0BAAAA;MACCI,OAAOD;MACPlC,OAAM;MACNqB,QAAO;MACPe,QAAO;MACP1B,KAAK;QACHW,QAAQ;MACV;MACAK,KAAK;QACHL,QAAQ;MACV;MACAH,KAAKgB;OAEJA,IAAAA;;AAOf;AAEA,SAASjC,UAAUJ,QAAgC;MAAEwC,OAAAA,UAAAA,SAAAA,KAAAA,UAAAA,CAAAA,MAAAA,SAAAA,UAAAA,CAAAA,IAAO;AAC1D,SAAO1C,YAAYoB,IAAI,SAACC,OAAAA;AACtB,WAAOsB,OAAOC,KAAK1C,MAAAA,EAChB2C,OACC,SAACxC,OAAAA;aACCA,MAAMyC,WAAWzB,KAAAA,MAChBqB,OAAOrC,MAAM0C,SAAS,MAAA,IAAU,CAAC1C,MAAM0C,SAAS,MAAA;OAEpD3B,IAAI,SAACG,KAAAA;aAAQrB,OAAOqB,GAAAA;;EACzB,CAAA;AACF;",
-  "names": ["colorGroups", "ColorsDemo", "colors", "getTokens", "prefixed", "color", "getColors", "colorsLight", "colorsDark", "YStack", "marginTop", "space", "ColorsRow", "title", "Separator", "$sm", "H2", "size", "XStack", "alignSelf", "map", "group", "index", "key", "Square", "borderRadius", "height", "borderWidth", "backgroundColor", "getVariableValue", "borderColor", "$xs", "Array", "fill", "slice", "_", "Paragraph", "textAlign", "width", "name", "theme", "rotate", "dark", "Object", "keys", "filter", "startsWith", "endsWith"]
+  "mappings": "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",
+  "names": ["colorGroups", "ColorsDemo", "colors", "getTokens", "prefixed", "color", "getColors", "colorsLight", "colorsDark", "_jsxs", "YStack", "marginTop", "space", "_jsx", "ColorsRow", "title", "Separator", "$sm", "H2", "size", "XStack", "alignSelf", "map", "group", "index", "Square", "borderRadius", "height", "borderWidth", "backgroundColor", "getVariableValue", "borderColor", "$xs", "key", "Array", "fill", "slice", "_", "Paragraph", "textAlign", "width", "name", "theme", "rotate", "dark", "Object", "keys", "filter", "startsWith", "endsWith"]
 }