@tamagui/demos 1.113.0 → 1.113.2

package/dist/esm/CheckboxDemo.native.js

@@ -2,46 +2,51 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check as CheckIcon } from "@tamagui/lucide-icons";
 import { Checkbox, Label, XStack, YStack } from "tamagui";
 function CheckboxDemo() {
-  return /* @__PURE__ */_jsxs(YStack, {
+  return /* @__PURE__ */ _jsxs(YStack, {
     width: 300,
     alignItems: "center",
     gap: "$2",
-    children: [/* @__PURE__ */_jsx(CheckboxWithLabel, {
-      size: "$3"
-    }), /* @__PURE__ */_jsx(CheckboxWithLabel, {
-      size: "$4",
-      defaultChecked: !0
-    }), /* @__PURE__ */_jsx(CheckboxWithLabel, {
-      size: "$5",
-      disabled: !0,
-      label: "Accept terms (disabled)"
-    })]
+    children: [
+      /* @__PURE__ */ _jsx(CheckboxWithLabel, {
+        size: "$3"
+      }),
+      /* @__PURE__ */ _jsx(CheckboxWithLabel, {
+        size: "$4",
+        defaultChecked: !0
+      }),
+      /* @__PURE__ */ _jsx(CheckboxWithLabel, {
+        size: "$5",
+        disabled: !0,
+        label: "Accept terms (disabled)"
+      })
+    ]
   });
 }
 function CheckboxWithLabel(param) {
-  var {
-      size,
-      label = "Accept terms and conditions",
-      ...checkboxProps
-    } = param,
-    id = `checkbox-${(size || "").toString().slice(1)}`;
-  return /* @__PURE__ */_jsxs(XStack, {
+  var { size, label = "Accept terms and conditions", ...checkboxProps } = param, id = `checkbox-${(size || "").toString().slice(1)}`;
+  return /* @__PURE__ */ _jsxs(XStack, {
     width: 300,
     alignItems: "center",
     gap: "$4",
-    children: [/* @__PURE__ */_jsx(Checkbox, {
-      id,
-      size,
-      ...checkboxProps,
-      children: /* @__PURE__ */_jsx(Checkbox.Indicator, {
-        children: /* @__PURE__ */_jsx(CheckIcon, {})
+    children: [
+      /* @__PURE__ */ _jsx(Checkbox, {
+        id,
+        size,
+        ...checkboxProps,
+        children: /* @__PURE__ */ _jsx(Checkbox.Indicator, {
+          children: /* @__PURE__ */ _jsx(CheckIcon, {})
+        })
+      }),
+      /* @__PURE__ */ _jsx(Label, {
+        size,
+        htmlFor: id,
+        children: label
       })
-    }), /* @__PURE__ */_jsx(Label, {
-      size,
-      htmlFor: id,
-      children: label
-    })]
+    ]
   });
 }
-export { CheckboxDemo, CheckboxWithLabel };
-//# sourceMappingURL=CheckboxDemo.native.js.map
+export {
+  CheckboxDemo,
+  CheckboxWithLabel
+};
+//# sourceMappingURL=CheckboxDemo.js.map

package/dist/esm/CheckboxDemo.native.js.map

@@ -1 +1,6 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Check","CheckIcon","Checkbox","Label","XStack","YStack","CheckboxDemo","width","alignItems","gap","children","CheckboxWithLabel","size","defaultChecked","disabled","label"],"sources":["../../src/CheckboxDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAS,EAAAC,IAAA,IAAAC,KAAiB;AAEnC,SAASC,KAAA,IAAAC,SAAiB,QAAQ,uBAAc;AAI5C,SACEC,QADF,EAAAC,KAAA,EAAAC,MAAA,EAAAC,MAAA;AAFG,SAASC,aAAA,EAAe;EAC7B,OACE,eAAAP,KAAC,CAAAM,MAAA;IACCE,KAAA;IACAC,UAAA,UAAC;IACDC,GAAA;IAAsEC,QACxE,GAEJ,eAAAb,IAAA,CAAAc,iBAAA;MAEOC,IAAS;IACd,IACA,eAAQf,IAAA,CAAAc,iBAAA;MACLC,IAAA;MACkCC,cAAA;IACrC,EAAM,EACN,eACEhB,IAAA,CAAAc,iBAAQ;MACNC,IAAA;MAMAE,QAAA;MAGFC,KAAA;IAEJ","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/Users/n8/tamagui/code/demos/src/CheckboxDemo.tsx"],
+  "mappings": ";AAAA,SAASA,SAASC,iBAAiB;AAEnC,SAASC,UAAUC,OAAOC,QAAQC,cAAc;AAEzC,SAASC,eAAAA;AACd,SACE,sBAACD,QAAAA;IAAOE,OAAO;IAAKC,YAAW;IAASC,KAAI;;MAC1C,qBAACC,mBAAAA;QAAkBC,MAAK;;MACxB,qBAACD,mBAAAA;QAAkBC,MAAK;QAAKC,gBAAc;;MAC3C,qBAACF,mBAAAA;QAAkBC,MAAK;QAAKE,UAAQ;QAACC,OAAM;;;;AAGlD;AAEO,SAASJ,kBAAkB,OAIG;MAJH,EAChCC,MACAG,QAAQ,+BACR,GAAGC,cAAAA,IAH6B,OAK1BC,KAAK,aAAaL,QAAQ,IAAIM,SAAQ,EAAGC,MAAM,CAAA,CAAA;AACrD,SACE,sBAACd,QAAAA;IAAOG,OAAO;IAAKC,YAAW;IAASC,KAAI;;MAC1C,qBAACP,UAAAA;QAASc;QAAQL;QAAa,GAAGI;kBAChC,qBAACb,SAASiB,WAAS;oBACjB,qBAAClB,WAAAA,CAAAA,CAAAA;;;MAIL,qBAACE,OAAAA;QAAMQ;QAAYS,SAASJ;kBACzBF;;;;AAIT;",
+  "names": ["Check", "CheckIcon", "Checkbox", "Label", "XStack", "YStack", "CheckboxDemo", "width", "alignItems", "gap", "CheckboxWithLabel", "size", "defaultChecked", "disabled", "label", "checkboxProps", "id", "toString", "slice", "Indicator", "htmlFor"]
+}

package/dist/esm/CheckboxHeadlessDemo.native.js

@@ -5,31 +5,32 @@ import { Check, Minus } from "@tamagui/lucide-icons";
 import { Pressable } from "react-native";
 import { Label, XStack, YStack } from "tamagui";
 function CheckboxHeadlessDemo() {
-  return /* @__PURE__ */_jsx(YStack, {
+  return /* @__PURE__ */ _jsx(YStack, {
     width: 200,
     alignItems: "center",
     gap: "$3",
-    children: /* @__PURE__ */_jsxs(XStack, {
+    children: /* @__PURE__ */ _jsxs(XStack, {
       gap: "$3",
       alignItems: "center",
-      children: [/* @__PURE__ */_jsx(HeadlessCheckbox, {
-        defaultChecked: "indeterminate",
-        id: "headless"
-      }), /* @__PURE__ */_jsx(Label, {
-        htmlFor: "headless",
-        children: "Headless"
-      })]
+      children: [
+        /* @__PURE__ */ _jsx(HeadlessCheckbox, {
+          defaultChecked: "indeterminate",
+          id: "headless"
+        }),
+        /* @__PURE__ */ _jsx(Label, {
+          htmlFor: "headless",
+          children: "Headless"
+        })
+      ]
     })
   });
 }
-var HeadlessCheckbox = /* @__PURE__ */React.forwardRef(function (props, ref) {
-  var [checked, setChecked] = React.useState(props.defaultChecked || !1),
-    {
-      checkboxProps,
-      checkboxRef,
-      bubbleInput
-    } = useCheckbox(props, [checked, setChecked], ref);
-  return /* @__PURE__ */_jsxs(Pressable, {
+var HeadlessCheckbox = /* @__PURE__ */ React.forwardRef(function(props, ref) {
+  var [checked, setChecked] = React.useState(props.defaultChecked || !1), { checkboxProps, checkboxRef, bubbleInput } = useCheckbox(props, [
+    checked,
+    setChecked
+  ], ref);
+  return /* @__PURE__ */ _jsxs(Pressable, {
     style: {
       width: 20,
       height: 20,
@@ -40,14 +41,20 @@ var HeadlessCheckbox = /* @__PURE__ */React.forwardRef(function (props, ref) {
     },
     ref: checkboxRef,
     ...checkboxProps,
-    children: [checked === "indeterminate" && /* @__PURE__ */_jsx(Minus, {
-      width: 18,
-      height: 18
-    }), checked === !0 && /* @__PURE__ */_jsx(Check, {
-      width: 18,
-      height: 18
-    }), bubbleInput]
+    children: [
+      checked === "indeterminate" && /* @__PURE__ */ _jsx(Minus, {
+        width: 18,
+        height: 18
+      }),
+      checked === !0 && /* @__PURE__ */ _jsx(Check, {
+        width: 18,
+        height: 18
+      }),
+      bubbleInput
+    ]
   });
 });
-export { CheckboxHeadlessDemo };
-//# sourceMappingURL=CheckboxHeadlessDemo.native.js.map
+export {
+  CheckboxHeadlessDemo
+};
+//# sourceMappingURL=CheckboxHeadlessDemo.js.map

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

@@ -1 +1,6 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","React","useCheckbox","Check","Minus","Pressable","Label","XStack","YStack","CheckboxHeadlessDemo","width","alignItems","gap","children","HeadlessCheckbox","defaultChecked","id","htmlFor","forwardRef","props","ref","checked","setChecked","useState","checkboxProps","checkboxRef","bubbleInput","style","height","borderRadius","justifyContent"],"sources":["../../src/CheckboxHeadlessDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAAOA,GAAA,IAAAC,IAAW,EAAAC,IAAA,IAAAC,KAAA;AAElB,OAAAC,KAAS;AACT,SAASC,WAAO,oCAAa;AAG7B,SAASC,KAAA,EAAAC,KAAA,QAAiB;AAC1B,SAASC,SAAO,QAAQ,cAAc;AAKhC,SACEC,KADF,EAAAC,MAAA,EAAAC,MAAA;AAHC,SAASC,qBAAA,EAAuB;EACrC,OACE,eAAAX,IAAC,CAAAU,MAAA;IAEGE,KAAA;IACAC,UAAA,UAAC;IAAiCC,GACpC,EACF;IAEJC,QAAA,iBAAAb,KAAA,CAAAO,MAAA;MAEMK,GAAA;MACJD,UAAO,EAAS;MAEdE,QAAA,GACC,eAAmBf,IAAA,CAAAgB,gBAAA;QACpBC,cAAA;QACFC,EAAA;MAEA,CACE,GAAC,eAAAlB,IAAA,CAAAQ,KAAA;QAAAW,OAAA;QACCJ,QAAO;MACL;IACQ;EACM;AACE;AACJ,IAAAC,gBACZ,kBAA6Bb,KAAO,CAAAiB,UAAA,CAAc,UAAAC,KAAA,EAAAC,GAAA;EAAA,IACpD,CAAAC,OAAA,EAAAC,UAAA,IAAArB,KAAA,CAAAsB,QAAA,CAAAJ,KAAA,CAAAJ,cAAA;IAAA;MAAAS,aAAA;MAAAC,WAAA;MAAAC;IAAA,IAAAxB,WAAA,CAAAiB,KAAA,GAAAE,OACK,EAAAC,UACD,GAAAF,GAEH;EAAA,sBAAYpB,KAAA,CAAAK,SAAmB;IAA8BsB,KAC7D;MAAkDjB,KAClD;MAAAkB,MAAA;MAAAC,YAAA;MACHC,cAAA;MAEHnB,UAAA","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/Users/n8/tamagui/code/demos/src/CheckboxHeadlessDemo.tsx"],
+  "mappings": ";AAAA,OAAOA,WAAW;AAElB,SAASC,mBAAmB;AAC5B,SAASC,OAAOC,aAAa;AAG7B,SAASC,iBAAiB;AAC1B,SAASC,OAAOC,QAAQC,cAAc;AAE/B,SAASC,uBAAAA;AACd,SACE,qBAACD,QAAAA;IAAOE,OAAO;IAAKC,YAAW;IAASC,KAAI;cAC1C,sBAACL,QAAAA;MAAOK,KAAI;MAAKD,YAAW;;QAC1B,qBAACE,kBAAAA;UAAiBC,gBAAe;UAAgBC,IAAG;;QACpD,qBAACT,OAAAA;UAAMU,SAAQ;oBAAW;;;;;AAIlC;AAEA,IAAMH,mBAAmBZ,sBAAMgB,WAAwC,SAACC,OAAOC,KAAAA;AAC7E,MAAM,CAACC,SAASC,UAAAA,IAAcpB,MAAMqB,SAASJ,MAAMJ,kBAAkB,EAAA,GAC/D,EAAES,eAAeC,aAAaC,YAAW,IAAKvB,YAClDgB,OACA;IAACE;IAASC;KACVF,GAAAA;AAGF,SACE,sBAACd,WAAAA;IACCqB,OAAO;MACLhB,OAAO;MACPiB,QAAQ;MACRC,cAAc;MACdC,gBAAgB;MAChBlB,YAAY;MACZmB,iBAAiBV,YAAY,KAAO,cAAc;IACpD;IACAD,KAAKK;IACJ,GAAGD;;MAEHH,YAAY,mBAAmB,qBAAChB,OAAAA;QAAMM,OAAO;QAAIiB,QAAQ;;MACzDP,YAAY,MAAQ,qBAACjB,OAAAA;QAAMO,OAAO;QAAIiB,QAAQ;;MAC9CF;;;AAGP,CAAA;",
+  "names": ["React", "useCheckbox", "Check", "Minus", "Pressable", "Label", "XStack", "YStack", "CheckboxHeadlessDemo", "width", "alignItems", "gap", "HeadlessCheckbox", "defaultChecked", "id", "htmlFor", "forwardRef", "props", "ref", "checked", "setChecked", "useState", "checkboxProps", "checkboxRef", "bubbleInput", "style", "height", "borderRadius", "justifyContent", "backgroundColor"]
+}

package/dist/esm/CheckboxUnstyledDemo.native.js

@@ -4,51 +4,55 @@ import { Stack, styled } from "@tamagui/core";
 import { Check } from "@tamagui/lucide-icons";
 import { Label, XStack, YStack } from "tamagui";
 var Frame = styled(Stack, {
-    borderWidth: 1,
-    borderColor: "$borderColor",
-    borderRadius: 5,
-    alignItems: "center",
-    justifyContent: "center",
-    variants: {
-      checked: {
-        indeterminate: {},
-        true: {
-          backgroundColor: "$color5"
-        },
-        false: {
-          backgroundColor: "$color3"
-        }
+  borderWidth: 1,
+  borderColor: "$borderColor",
+  borderRadius: 5,
+  alignItems: "center",
+  justifyContent: "center",
+  variants: {
+    checked: {
+      indeterminate: {},
+      true: {
+        backgroundColor: "$color5"
+      },
+      false: {
+        backgroundColor: "$color3"
       }
-    },
-    defaultVariants: {
-      checked: !1
     }
-  }),
-  Indicator = styled(Stack, {}),
-  Checkbox = createCheckbox({
-    Frame,
-    Indicator
-  });
+  },
+  defaultVariants: {
+    checked: !1
+  }
+}), Indicator = styled(Stack, {}), Checkbox = createCheckbox({
+  Frame,
+  Indicator
+});
 function CheckboxUnstyledDemo() {
-  return /* @__PURE__ */_jsx(YStack, {
+  return /* @__PURE__ */ _jsx(YStack, {
     width: 200,
     alignItems: "center",
     gap: "$3",
-    children: /* @__PURE__ */_jsxs(XStack, {
+    children: /* @__PURE__ */ _jsxs(XStack, {
       gap: "$3",
       alignItems: "center",
-      children: [/* @__PURE__ */_jsx(Checkbox, {
-        defaultChecked: !0,
-        id: "unstyled",
-        children: /* @__PURE__ */_jsx(Checkbox.Indicator, {
-          children: /* @__PURE__ */_jsx(Check, {})
+      children: [
+        /* @__PURE__ */ _jsx(Checkbox, {
+          defaultChecked: !0,
+          id: "unstyled",
+          children: /* @__PURE__ */ _jsx(Checkbox.Indicator, {
+            children: /* @__PURE__ */ _jsx(Check, {})
+          })
+        }),
+        /* @__PURE__ */ _jsx(Label, {
+          htmlFor: "unstyled",
+          children: "Unstyled"
         })
-      }), /* @__PURE__ */_jsx(Label, {
-        htmlFor: "unstyled",
-        children: "Unstyled"
-      })]
+      ]
     })
   });
 }
-export { Checkbox, CheckboxUnstyledDemo };
-//# sourceMappingURL=CheckboxUnstyledDemo.native.js.map
+export {
+  Checkbox,
+  CheckboxUnstyledDemo
+};
+//# sourceMappingURL=CheckboxUnstyledDemo.js.map

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

@@ -1 +1,6 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","createCheckbox","Stack","styled","Check","Label","XStack","YStack","Frame","borderWidth","borderColor","borderRadius","alignItems","justifyContent","variants","checked","indeterminate","true","backgroundColor","false","defaultVariants","Indicator","Checkbox","CheckboxUnstyledDemo","width","gap","children"],"sources":["../../src/CheckboxUnstyledDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAAgCA,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAsB;AACtD,SAASC,cAAO,QAAc;AAC9B,SAASC,KAAA,EAAAC,MAAa;AACtB,SAASC,KAAA,QAAO,uBAAsB;AAmChC,SAGMC,KAHN,EAAAC,MAAA,EAAAC,MAAA;AAjCN,IAAAC,KAAM,GAAAL,MAAQ,CAAAD,KAAO;IACnBO,WAAA,EAAa;IACbC,WAAA,EAAa;IACbC,YAAA,EAAc;IACdC,UAAA,EAAY;IACZC,cAAA,EAAgB;IAChBC,QAAA,EAAU;MACRC,OAAA,EAAS;QACPC,aAAA,EAAe,CAAC;QAChBC,IAAA,EAAM;UACJC,eAAA,EAAiB;QACnB;QACAC,KAAA,EAAO;UACLD,eAAA,EAAiB;QACnB;MACF;IACF;IAEAE,eAAA,EAAiB;MACfL,OAAA,EAAS;IACX;EACF,CAAC;EAEKM,SAAA,GAAYlB,MAAA,CAAOD,KAAA,EAAO,CAAC,CAAC;EAErBoB,QAAA,GAAWrB,cAAA,CAAe;IACrCO,KAAA;IACAa;EACF,CAAC;AAEM,SAASE,qBAAA,EAAuB;EACrC,OACE,eAAAzB,IAAC,CAAAS,MAAA;IAEGiB,KAAA;IAKAZ,UAAA,UAAC;IAAiCa,GACpC,EACF;IAEJC,QAAA,iBAAA1B,KAAA,CAAAM,MAAA","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/Users/n8/tamagui/code/demos/src/CheckboxUnstyledDemo.tsx"],
+  "mappings": ";AAAA,SAAgCA,sBAAsB;AACtD,SAASC,OAAOC,cAAc;AAC9B,SAASC,aAAa;AACtB,SAASC,OAAOC,QAAQC,cAAc;AAEtC,IAAMC,QAAQL,OAAOD,OAAO;EAC1BO,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,YAAYlB,OAAOD,OAAO,CAAC,CAAA,GAEpBoB,WAAWrB,eAAe;EACrCO;EACAa;AACF,CAAA;AAEO,SAASE,uBAAAA;AACd,SACE,qBAAChB,QAAAA;IAAOiB,OAAO;IAAKZ,YAAW;IAASa,KAAI;cAC1C,sBAACnB,QAAAA;MAAOmB,KAAI;MAAKb,YAAW;;QAC1B,qBAACU,UAAAA;UAASI,gBAAc;UAACC,IAAG;oBAC1B,qBAACL,SAASD,WAAS;sBACjB,qBAACjB,OAAAA,CAAAA,CAAAA;;;QAGL,qBAACC,OAAAA;UAAMuB,SAAQ;oBAAW;;;;;AAIlC;",
+  "names": ["createCheckbox", "Stack", "styled", "Check", "Label", "XStack", "YStack", "Frame", "borderWidth", "borderColor", "borderRadius", "alignItems", "justifyContent", "variants", "checked", "indeterminate", "true", "backgroundColor", "false", "defaultVariants", "Indicator", "Checkbox", "CheckboxUnstyledDemo", "width", "gap", "defaultChecked", "id", "htmlFor"]
+}

package/dist/esm/ColorsDemo.native.js

@@ -1,114 +1,136 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { H2, Paragraph, Separator, Square, XStack, YStack, getTokens, getVariableValue } from "tamagui";
-var colorGroups = ["orange", "yellow", "green", "blue", "purple", "pink", "red"];
+var colorGroups = [
+  "orange",
+  "yellow",
+  "green",
+  "blue",
+  "purple",
+  "pink",
+  "red"
+];
 function ColorsDemo() {
   var colors = getTokens({
-      prefixed: !1
-    }).color,
-    [colorsLight, colorsDark] = [getColors(colors), getColors(colors, !0)];
-  return /* @__PURE__ */_jsxs(YStack, {
+    prefixed: !1
+  }).color, [colorsLight, colorsDark] = [
+    getColors(colors),
+    getColors(colors, !0)
+  ];
+  return /* @__PURE__ */ _jsxs(YStack, {
     marginTop: "$4",
     space: "$8",
-    children: [/* @__PURE__ */_jsx(ColorsRow, {
-      title: "Light",
-      colors: colorsLight
-    }), /* @__PURE__ */_jsx(Separator, {}), /* @__PURE__ */_jsx(ColorsRow, {
-      title: "Dark",
-      colors: colorsDark
-    })]
+    children: [
+      /* @__PURE__ */ _jsx(ColorsRow, {
+        title: "Light",
+        colors: colorsLight
+      }),
+      /* @__PURE__ */ _jsx(Separator, {}),
+      /* @__PURE__ */ _jsx(ColorsRow, {
+        title: "Dark",
+        colors: colorsDark
+      })
+    ]
   });
 }
 function ColorsRow(param) {
-  var {
-    title,
-    colors
-  } = param;
-  return /* @__PURE__ */_jsxs(YStack, {
+  var { title, colors } = param;
+  return /* @__PURE__ */ _jsxs(YStack, {
     space: !0,
     $sm: {
       space: "$2"
     },
-    children: [/* @__PURE__ */_jsx(H2, {
-      size: "$2",
-      children: title
-    }), /* @__PURE__ */_jsxs(XStack, {
-      space: !0,
-      alignSelf: "center",
-      children: [/* @__PURE__ */_jsxs(YStack, {
+    children: [
+      /* @__PURE__ */ _jsx(H2, {
+        size: "$2",
+        children: title
+      }),
+      /* @__PURE__ */ _jsxs(XStack, {
         space: !0,
-        $sm: {
-          space: "$2"
-        },
         alignSelf: "center",
-        children: [colors.map(function (group, index) {
-          return /* @__PURE__ */_jsx(XStack, {
-            gap: "$2",
-            children: group.map(function (color) {
-              return /* @__PURE__ */_jsx(Square, {
-                borderRadius: "$2",
-                size: "$4",
+        children: [
+          /* @__PURE__ */ _jsxs(YStack, {
+            space: !0,
+            $sm: {
+              space: "$2"
+            },
+            alignSelf: "center",
+            children: [
+              colors.map(function(group, index) {
+                return /* @__PURE__ */ _jsx(XStack, {
+                  gap: "$2",
+                  children: group.map(function(color) {
+                    return /* @__PURE__ */ _jsx(Square, {
+                      borderRadius: "$2",
+                      size: "$4",
+                      height: "$4",
+                      borderWidth: 1,
+                      backgroundColor: getVariableValue(color),
+                      borderColor: "$color7",
+                      $sm: {
+                        size: "$2"
+                      },
+                      $xs: {
+                        size: "$1"
+                      }
+                    }, `${color.key}${index}`);
+                  })
+                }, index);
+              }),
+              /* @__PURE__ */ _jsx(XStack, {
+                gap: "$2",
+                alignSelf: "center",
+                children: new Array(13).fill(0).slice(1).map(function(_, index) {
+                  return /* @__PURE__ */ _jsx(Paragraph, {
+                    color: "$color10",
+                    textAlign: "center",
+                    width: "$4",
+                    $sm: {
+                      width: "$2"
+                    },
+                    $xs: {
+                      width: "$1"
+                    },
+                    children: index
+                  }, index);
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ _jsx(YStack, {
+            gap: "$4",
+            marginTop: "$2",
+            children: colorGroups.map(function(name) {
+              return /* @__PURE__ */ _jsx(Paragraph, {
+                theme: name,
+                color: "$color10",
                 height: "$4",
-                borderWidth: 1,
-                backgroundColor: getVariableValue(color),
-                borderColor: "$color7",
+                rotate: "-10deg",
                 $sm: {
-                  size: "$2"
+                  height: "$2"
                 },
                 $xs: {
-                  size: "$1"
-                }
-              }, `${color.key}${index}`);
+                  height: "$1"
+                },
+                children: name
+              }, name);
             })
-          }, index);
-        }), /* @__PURE__ */_jsx(XStack, {
-          gap: "$2",
-          alignSelf: "center",
-          children: new Array(13).fill(0).slice(1).map(function (_, index) {
-            return /* @__PURE__ */_jsx(Paragraph, {
-              color: "$color10",
-              textAlign: "center",
-              width: "$4",
-              $sm: {
-                width: "$2"
-              },
-              $xs: {
-                width: "$1"
-              },
-              children: index
-            }, index);
           })
-        })]
-      }), /* @__PURE__ */_jsx(YStack, {
-        gap: "$4",
-        marginTop: "$2",
-        children: colorGroups.map(function (name) {
-          return /* @__PURE__ */_jsx(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;
-  return colorGroups.map(function (group) {
-    return Object.keys(colors).filter(function (color) {
+  return colorGroups.map(function(group) {
+    return Object.keys(colors).filter(function(color) {
       return color.startsWith(group) && (dark ? color.endsWith("Dark") : !color.endsWith("Dark"));
-    }).map(function (key) {
+    }).map(function(key) {
       return colors[key];
     });
   });
 }
-export { ColorsDemo };
-//# sourceMappingURL=ColorsDemo.native.js.map
+export {
+  ColorsDemo
+};
+//# sourceMappingURL=ColorsDemo.js.map

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

@@ -1 +1,6 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","H2","Paragraph","Separator","Square","XStack","YStack","getTokens","getVariableValue","colorGroups","ColorsDemo","colors","prefixed","color","colorsLight","colorsDark","getColors","marginTop","space","children","ColorsRow","title","param","$sm","size","alignSelf","map","group","index","gap","borderRadius","height","borderWidth","backgroundColor","borderColor","$xs","key","Array","fill","slice","_","textAlign"],"sources":["../../src/ColorsDemo.tsx"],"sourcesContent":[null],"mappings":"AACA,SAAAA,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAAA,SACEC,EAAA,EAAAC,SAAA,EAAAC,SAAA,EAAAC,MAAA,EAAAC,MAAA,EAAAC,MAAA,EAAAC,SAAA,EAAAC,gBAAA;AAAA,IACAC,WAAA,IACA,UACA,UACA,SACA,QACA,UACA,aACK,CASH;AAPJ,SAAMC,WAAA,EAAe;EAEd,IAAAC,MAAS,GAAAJ,SAAa;MAC3BK,QAAM;IAGN,GAAAC,KACE;IAAA,CAAAC,WAAA,EAAAC,UAAC,IAAO,CACNC,SAAA,CAAAL,MAAA,GACAK,SAAA,CAAAL,MAAA,IAAC,EAAU;EACiC,OAC9C,eAAAX,KAAA,CAAAM,MAAA;IAEJW,SAAA;IAEAC,KAAS;IACPC,QACE,GACE,eAAArB,IAAC,CAAAsB,SAAQ;MAETC,KAAA;MACEV,MAAA,EAAAG;IACG,IAKS,eAAChB,IAAA,CAAAK,SAAA,sBAAAL,IAAA,CAAAsB,SAAA;MAAAC,KAEC;MAAaV,MACb,EAAAI;IAAK;EAEQ;AAC0B;AAC3B,SAAAK,SACPA,CAAAE,KAAA;EAAA;IAAAD,KAAA;IACHV;EAAM,IAAAW,KAAA;EAAA,sBACRtB,KAAA,CAAAM,MAAA;IAAAY,KAAA,GACA;IAAKK,GAAA;MACGL,KAAA,EACR;IAAA;IAAAC,QAZK,EAAG,CAAiB,eAkBpCrB,IAAA,CAAAG,EAAA;MAEDuB,IAAA;MAMQL,QAAC,EAAAE;IAAA,mBACOrB,KAAA,CAAAK,MAAA;MAAAa,KACN;MAAUO,SACV,EAAM;MAAAN,QACN,EAAK,gBACInB,KAAA,CAAAM,MAAA;QACTY,KAAA;QACAK,GAAA,EAAK;UACHL,KAAA,EAAO;QACT;QAGCO,SAAA;QAAAN,QAAA,GAFIR,MAAA,CAAAe,GAAA,WAAAC,KAAA,EAAAC,KAAA;UAMf,sBAAA9B,IAAA,CAAAO,MAAA;YACFwB,GAAA;YAEAV,QAAC,EAAAQ,KAAA,CAAAD,GAAO,WAASb,KAAA;cAEZ,sBAAAf,IAAA,CAAAM,MAAA;gBAAA0B,YAAA;gBACQN,IAAA;gBACDO,MAAA;gBACCC,WAAA;gBACAC,eAAA,EAAAzB,gBAAA,CAAAK,KAAA;gBACFqB,WAAA;gBACKX,GAAA;kBACVC,IAAA;gBACK;gBACKW,GAAA;kBACVX,IAAA;gBAGC;cAAA,MAAAX,KAAA,CAAAuB,GAAA,GAAAR,KAAA;YAFI;UAKX,GAAAA,KAAA;QACF,IACF,eAAA9B,IAAA,CAAAO,MAAA;UAEJwB,GAAA;UAESJ,SAAU,EAAkC,QAAO;UACnDN,QAAY,EAAK,IAAAkB,KAAA,CACf,IAAAC,IAAO,IAAKC,KAAA,CAAM,EACtB,CAAAb,GAAA,WAAAc,CAAA,EAAAZ,KAAA;YAEG,OAAM,eAAgB9B,IACrB,CAAAI,SAAO,EAAM;cAEJW,KAAO,EAAG,UAC3B;cACH4B,SAAA","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/Users/n8/tamagui/code/demos/src/ColorsDemo.tsx"],
+  "mappings": ";AACA,SACEA,IACAC,WACAC,WACAC,QACAC,QACAC,QACAC,WACAC,wBACK;AAEP,IAAMC,cAAc;EAAC;EAAU;EAAU;EAAS;EAAQ;EAAU;EAAQ;;AAErE,SAASC,aAAAA;AACd,MAAMC,SAASJ,UAAU;IAAEK,UAAU;EAAM,CAAA,EAAGC,OACxC,CAACC,aAAaC,UAAAA,IAAc;IAACC,UAAUL,MAAAA;IAASK,UAAUL,QAAQ,EAAA;;AAExE,SACE,sBAACL,QAAAA;IAAOW,WAAU;IAAKC,OAAM;;MAC3B,qBAACC,WAAAA;QAAUC,OAAM;QAAQT,QAAQG;;MACjC,qBAACX,WAAAA,CAAAA,CAAAA;MACD,qBAACgB,WAAAA;QAAUC,OAAM;QAAOT,QAAQI;;;;AAGtC;AAEA,SAASI,UAAU,OAA0D;MAA1D,EAAEC,OAAOT,OAAM,IAAf;AACjB,SACE,sBAACL,QAAAA;IAAOY,OAAK;IAACG,KAAK;MAAEH,OAAO;IAAK;;MAC/B,qBAACjB,IAAAA;QAAGqB,MAAK;kBAAMF;;MAEf,sBAACf,QAAAA;QAAOa,OAAK;QAACK,WAAU;;UACtB,sBAACjB,QAAAA;YAAOY,OAAK;YAACG,KAAK;cAAEH,OAAO;YAAK;YAAGK,WAAU;;cAC3CZ,OAAOa,IAAI,SAACC,OAAOC,OAAAA;AAClB,uBACE,qBAACrB,QAAAA;kBAAOsB,KAAI;4BACTF,MAAMD,IAAI,SAACX,OAAAA;AACV,2BACE,qBAACT,QAAAA;sBAECwB,cAAa;sBACbN,MAAK;sBACLO,QAAO;sBACPC,aAAa;sBACbC,iBAAiBvB,iBAAiBK,KAAAA;sBAClCmB,aAAY;sBACZX,KAAK;wBACHC,MAAM;sBACR;sBACAW,KAAK;wBACHX,MAAM;sBACR;uBAZK,GAAGT,MAAMqB,GAAG,GAAGR,KAAAA,EAAO;kBAejC,CAAA;mBAnBoBA,KAAAA;cAsB1B,CAAA;cAEA,qBAACrB,QAAAA;gBAAOsB,KAAI;gBAAKJ,WAAU;0BACxB,IAAIY,MAAM,EAAA,EACRC,KAAK,CAAA,EACLC,MAAM,CAAA,EACNb,IAAI,SAACc,GAAGZ,OAAAA;AACP,yBACE,qBAACxB,WAAAA;oBACCW,OAAM;oBACN0B,WAAU;oBACVC,OAAM;oBACNnB,KAAK;sBACHmB,OAAO;oBACT;oBACAP,KAAK;sBACHO,OAAO;oBACT;8BAGCd;qBAFIA,KAAAA;gBAKX,CAAA;;;;UAIN,qBAACpB,QAAAA;YAAOqB,KAAI;YAAKV,WAAU;sBACxBR,YAAYe,IAAI,SAACiB,MAAAA;qBAChB,qBAACvC,WAAAA;gBACCwC,OAAOD;gBACP5B,OAAM;gBACNgB,QAAO;gBACPc,QAAO;gBACPtB,KAAK;kBACHQ,QAAQ;gBACV;gBACAI,KAAK;kBACHJ,QAAQ;gBACV;0BAGCY;iBAFIA,IAAAA;;;;;;;AASnB;AAEA,SAASzB,UAAUL,QAAgC;MAAEiC,OAAAA,UAAAA,SAAAA,KAAAA,UAAAA,CAAAA,MAAAA,SAAAA,UAAAA,CAAAA,IAAO;AAC1D,SAAOnC,YAAYe,IAAI,SAACC,OAAAA;AACtB,WAAOoB,OAAOC,KAAKnC,MAAAA,EAChBoC,OACC,SAAClC,OAAAA;aACCA,MAAMmC,WAAWvB,KAAAA,MAChBmB,OAAO/B,MAAMoC,SAAS,MAAA,IAAU,CAACpC,MAAMoC,SAAS,MAAA;OAEpDzB,IAAI,SAACU,KAAAA;aAAQvB,OAAOuB,GAAAA;;EACzB,CAAA;AACF;",
+  "names": ["H2", "Paragraph", "Separator", "Square", "XStack", "YStack", "getTokens", "getVariableValue", "colorGroups", "ColorsDemo", "colors", "prefixed", "color", "colorsLight", "colorsDark", "getColors", "marginTop", "space", "ColorsRow", "title", "$sm", "size", "alignSelf", "map", "group", "index", "gap", "borderRadius", "height", "borderWidth", "backgroundColor", "borderColor", "$xs", "key", "Array", "fill", "slice", "_", "textAlign", "width", "name", "theme", "rotate", "dark", "Object", "keys", "filter", "startsWith", "endsWith"]
+}