@tamagui/demos 1.89.26 → 1.89.27-1708113113238

package/dist/jsx/CheckboxHeadlessDemo.native.js

@@ -3,39 +3,109 @@ import { Check, Minus } from "@tamagui/lucide-icons";
 import { forwardRef, useState } from "react";
 import { Pressable } from "react-native";
 import { Label, XStack, YStack } from "tamagui";
-import { jsx, jsxs } from "react/jsx-runtime";
-function CheckboxHeadlessDemo() {
-  return /* @__PURE__ */ jsx(YStack, { width: 200, alignItems: "center", space: "$3", children: /* @__PURE__ */ jsxs(XStack, { space: "$3", alignItems: "center", children: [
-    /* @__PURE__ */ jsx(HeadlessCheckbox, { defaultChecked: "indeterminate", id: "headless" }),
-    /* @__PURE__ */ jsx(Label, { htmlFor: "headless", children: "Headless" })
-  ] }) });
-}
-const HeadlessCheckbox = forwardRef((props, ref) => {
-  const [checked, setChecked] = useState(props.defaultChecked || !1), { checkboxProps, checkboxRef, bubbleInput } = useCheckbox(
-    props,
-    [checked, setChecked],
-    ref
-  );
-  return /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      style: {
-        width: 20,
-        height: 20,
-        borderRadius: 4,
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: checked === !0 ? "lightblue" : "silver"
-      },
-      ref: checkboxRef,
-      ...checkboxProps,
-      children: [
-        checked === "indeterminate" && /* @__PURE__ */ jsx(Minus, { width: 18, height: 18 }),
-        checked === !0 && /* @__PURE__ */ jsx(Check, { width: 18, height: 18 }),
-        bubbleInput
-      ]
+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++)
+    arr2[i] = arr[i];
+  return arr2;
+}
+function _array_with_holes(arr) {
+  if (Array.isArray(arr))
+    return arr;
+}
+function _define_property(obj, key, value) {
+  return key in obj ? Object.defineProperty(obj, key, {
+    value,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : obj[key] = value, obj;
+}
+function _iterable_to_array_limit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol < "u" && arr[Symbol.iterator] || arr["@@iterator"];
+  if (_i != null) {
+    var _arr = [], _n = !0, _d = !1, _s, _e;
+    try {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done) && (_arr.push(_s.value), !(i && _arr.length === i)); _n = !0)
+        ;
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        !_n && _i.return != null && _i.return();
+      } finally {
+        if (_d)
+          throw _e;
+      }
     }
-  );
+    return _arr;
+  }
+}
+function _non_iterable_rest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+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) {
+      return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+    }))), ownKeys.forEach(function(key) {
+      _define_property(target, key, source[key]);
+    });
+  }
+  return 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();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+  if (o) {
+    if (typeof o == "string")
+      return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor && (n = o.constructor.name), n === "Map" || n === "Set")
+      return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
+      return _array_like_to_array(o, minLen);
+  }
+}
+function CheckboxHeadlessDemo() {
+  return /* @__PURE__ */ React.createElement(YStack, {
+    width: 200,
+    alignItems: "center",
+    space: "$3"
+  }, /* @__PURE__ */ React.createElement(XStack, {
+    space: "$3",
+    alignItems: "center"
+  }, /* @__PURE__ */ React.createElement(HeadlessCheckbox, {
+    defaultChecked: "indeterminate",
+    id: "headless"
+  }), /* @__PURE__ */ React.createElement(Label, {
+    htmlFor: "headless"
+  }, "Headless")));
+}
+var HeadlessCheckbox = /* @__PURE__ */ forwardRef(function(props, ref) {
+  var _useState = _sliced_to_array(useState(props.defaultChecked || !1), 2), checked = _useState[0], setChecked = _useState[1], _useCheckbox = useCheckbox(props, [
+    checked,
+    setChecked
+  ], ref), checkboxProps = _useCheckbox.checkboxProps, checkboxRef = _useCheckbox.checkboxRef, bubbleInput = _useCheckbox.bubbleInput;
+  return /* @__PURE__ */ React.createElement(Pressable, _object_spread({
+    style: {
+      width: 20,
+      height: 20,
+      borderRadius: 4,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: checked === !0 ? "lightblue" : "silver"
+    },
+    ref: checkboxRef
+  }, checkboxProps), checked === "indeterminate" && /* @__PURE__ */ React.createElement(Minus, {
+    width: 18,
+    height: 18
+  }), checked === !0 && /* @__PURE__ */ React.createElement(Check, {
+    width: 18,
+    height: 18
+  }), bubbleInput);
 });
 export {
   CheckboxHeadlessDemo

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/CheckboxHeadlessDemo.tsx"],
-  "mappings": "AACA,SAAS,mBAAmB;AAC5B,SAAS,OAAO,aAAa;AAC7B,SAAS,YAAY,gBAAgB;AAErC,SAAS,iBAAiB;AAC1B,SAAS,OAAO,QAAQ,cAAc;AAKhC,SACE,KADF;AAHC,SAAS,uBAAuB;AACrC,SACE,oBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C,+BAAC,UAAO,OAAM,MAAK,YAAW,UAC5B;AAAA,wBAAC,oBAAiB,gBAAe,iBAAgB,IAAG,YAAW;AAAA,IAE/D,oBAAC,SAAM,SAAQ,YAAW,sBAAQ;AAAA,KACpC,GACF;AAEJ;AAEA,MAAM,mBAAmB,WAAwC,CAAC,OAAO,QAAQ;AAC/E,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,MAAM,kBAAkB,EAAK,GAC9D,EAAE,eAAe,aAAa,YAAY,IAAI;AAAA,IAClD;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,IACpB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,iBAAiB,YAAY,KAAO,cAAc;AAAA,MACpD;AAAA,MACA,KAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA,oBAAY,mBAAmB,oBAAC,SAAM,OAAO,IAAI,QAAQ,IAAI;AAAA,QAC7D,YAAY,MAAQ,oBAAC,SAAM,OAAO,IAAI,QAAQ,IAAI;AAAA,QAClD;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;",
-  "names": []
+  "sources": ["../../src/Users/n8/tamagui/packages/demos/src/CheckboxHeadlessDemo.tsx"],
+  "mappings": "AACA,SAASA,mBAAmB;AAC5B,SAASC,OAAOC,aAAa;AAC7B,SAASC,YAAYC,gBAAgB;AAErC,SAASC,iBAAiB;AAC1B,SAASC,OAAOC,QAAQC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE/B,SAASC,uBAAAA;AACd,SACE,sBAAA,cAACD,QAAAA;IAAOE,OAAO;IAAKC,YAAW;IAASC,OAAM;KAC5C,sBAAA,cAACL,QAAAA;IAAOK,OAAM;IAAKD,YAAW;KAC5B,sBAAA,cAACE,kBAAAA;IAAiBC,gBAAe;IAAgBC,IAAG;MAEpD,sBAAA,cAACT,OAAAA;IAAMU,SAAQ;KAAW,UAAA,CAAA,CAAA;AAIlC;AAEA,IAAMH,mBAAmBV,2BAAwC,SAACc,OAAOC,KAAAA;AACvE,MAA8Bd,YAAAA,iBAAAA,SAASa,MAAMH,kBAAkB,EAAA,GAAA,CAAA,GAAxDK,UAAuBf,UAAAA,CAAAA,GAAdgB,aAAchB,UAAAA,CAAAA,GACsBJ,eAAAA,YAClDiB,OACA;IAACE;IAASC;KACVF,GAAAA,GAHMG,gBAA4CrB,aAA5CqB,eAAeC,cAA6BtB,aAA7BsB,aAAaC,cAAgBvB,aAAhBuB;AAMpC,SACE,sBAAA,cAAClB,WAAAA,eAAAA;IACCmB,OAAO;MACLd,OAAO;MACPe,QAAQ;MACRC,cAAc;MACdC,gBAAgB;MAChBhB,YAAY;MACZiB,iBAAiBT,YAAY,KAAO,cAAc;IACpD;IACAD,KAAKI;KACDD,aAAAA,GAEHF,YAAY,mBAAmB,sBAAA,cAACjB,OAAAA;IAAMQ,OAAO;IAAIe,QAAQ;MACzDN,YAAY,MAAQ,sBAAA,cAAClB,OAAAA;IAAMS,OAAO;IAAIe,QAAQ;MAC9CF,WAAAA;AAGP,CAAA;",
+  "names": ["useCheckbox", "Check", "Minus", "forwardRef", "useState", "Pressable", "Label", "XStack", "YStack", "CheckboxHeadlessDemo", "width", "alignItems", "space", "HeadlessCheckbox", "defaultChecked", "id", "htmlFor", "props", "ref", "checked", "setChecked", "checkboxProps", "checkboxRef", "bubbleInput", "style", "height", "borderRadius", "justifyContent", "backgroundColor"]
 }

package/dist/jsx/CheckboxUnstyledDemo.native.js

@@ -2,8 +2,7 @@ import { createCheckbox } from "@tamagui/checkbox";
 import { Stack, styled } from "@tamagui/core";
 import { Check } from "@tamagui/lucide-icons";
 import { Label, XStack, YStack } from "tamagui";
-import { jsx, jsxs } from "react/jsx-runtime";
-const Frame = styled(Stack, {
+var Frame = styled(Stack, {
   borderWidth: 1,
   borderColor: "$borderColor",
   borderRadius: 5,
@@ -28,10 +27,19 @@ const Frame = styled(Stack, {
   Indicator
 });
 function CheckboxUnstyledDemo() {
-  return /* @__PURE__ */ jsx(YStack, { width: 200, alignItems: "center", gap: "$3", 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, {}) }) }),
-    /* @__PURE__ */ jsx(Label, { htmlFor: "unstyled", children: "Unstyled" })
-  ] }) });
+  return /* @__PURE__ */ React.createElement(YStack, {
+    width: 200,
+    alignItems: "center",
+    gap: "$3"
+  }, /* @__PURE__ */ React.createElement(XStack, {
+    gap: "$3",
+    alignItems: "center"
+  }, /* @__PURE__ */ React.createElement(Checkbox, {
+    defaultChecked: !0,
+    id: "unstyled"
+  }, /* @__PURE__ */ React.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React.createElement(Check, null))), /* @__PURE__ */ React.createElement(Label, {
+    htmlFor: "unstyled"
+  }, "Unstyled")));
 }
 export {
   Checkbox,

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/CheckboxUnstyledDemo.tsx"],
-  "mappings": "AAAA,SAAgC,sBAAsB;AACtD,SAAS,OAAO,cAAc;AAC9B,SAAS,aAAa;AACtB,SAAS,OAAO,QAAQ,cAAc;AAmChC,SAGM,KAHN;AAjCN,MAAM,QAAQ,OAAO,OAAO;AAAA,EAC1B,aAAa;AAAA,EACb,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,UAAU;AAAA,IACR,SAAS;AAAA,MACP,eAAe,CAAC;AAAA,MAChB,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC,GAEK,YAAY,OAAO,OAAO,CAAC,CAAC,GAErB,WAAW,eAAe;AAAA,EACrC;AAAA,EACA;AACF,CAAC;AAEM,SAAS,uBAAuB;AACrC,SACE,oBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,KAAI,MAC1C,+BAAC,UAAO,KAAI,MAAK,YAAW,UAC1B;AAAA,wBAAC,YAAS,gBAAc,IAAC,IAAG,YAC1B,8BAAC,SAAS,WAAT,EACC,8BAAC,SAAM,GACT,GACF;AAAA,IACA,oBAAC,SAAM,SAAQ,YAAW,sBAAQ;AAAA,KACpC,GACF;AAEJ;",
-  "names": []
+  "sources": ["../../src/Users/n8/tamagui/packages/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,sBAAA,cAAChB,QAAAA;IAAOiB,OAAO;IAAKZ,YAAW;IAASa,KAAI;KAC1C,sBAAA,cAACnB,QAAAA;IAAOmB,KAAI;IAAKb,YAAW;KAC1B,sBAAA,cAACU,UAAAA;IAASI,gBAAAA;IAAeC,IAAG;KAC1B,sBAAA,cAACL,SAASD,WAAS,MACjB,sBAAA,cAACjB,OAAAA,IAAAA,CAAAA,CAAAA,GAGL,sBAAA,cAACC,OAAAA;IAAMuB,SAAQ;KAAW,UAAA,CAAA,CAAA;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/jsx/ColorsDemo.native.js

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

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/ColorsDemo.tsx"],
-  "mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AASH,SACE,KADF;AAPJ,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,SAAS,UAAU,EAAE,UAAU,GAAM,CAAC,EAAE,OACxC,CAAC,aAAa,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,UAAU,QAAQ,EAAI,CAAC;AAE7E,SACE,qBAAC,UAAO,WAAU,MAAK,OAAM,MAC3B;AAAA,wBAAC,aAAU,OAAM,SAAQ,QAAQ,aAAa;AAAA,IAC9C,oBAAC,aAAU;AAAA,IACX,oBAAC,aAAU,OAAM,QAAO,QAAQ,YAAY;AAAA,KAC9C;AAEJ;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,qBAAC,UAAO,OAAK,IAAC,KAAK,EAAE,OAAO,KAAK,GAC/B;AAAA,wBAAC,MAAG,MAAK,MAAM,iBAAM;AAAA,IAErB,qBAAC,UAAO,OAAK,IAAC,WAAU,UACtB;AAAA,2BAAC,UAAO,OAAK,IAAC,KAAK,EAAE,OAAO,KAAK,GAAG,WAAU,UAC3C;AAAA,eAAO,IAAI,CAAC,OAAO,UAEhB,oBAAC,UAAO,OAAM,MACX,gBAAM,IAAI,CAAC,UAER;AAAA,UAAC;AAAA;AAAA,YAEC,cAAa;AAAA,YACb,MAAK;AAAA,YACL,QAAO;AAAA,YACP,aAAa;AAAA,YACb,iBAAiB,iBAAiB,KAAK;AAAA,YACvC,aAAY;AAAA,YACZ,KAAK;AAAA,cACH,MAAM;AAAA,YACR;AAAA,YACA,KAAK;AAAA,cACH,MAAM;AAAA,YACR;AAAA;AAAA,UAZK,GAAG,MAAM,GAAG,GAAG,KAAK;AAAA,QAa3B,CAEH,KAnBqB,KAoBxB,CAEH;AAAA,QAED,oBAAC,UAAO,OAAM,MAAK,WAAU,UAC1B,cAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAEL;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,WAAU;AAAA,YACV,OAAM;AAAA,YACN,KAAK;AAAA,cACH,OAAO;AAAA,YACT;AAAA,YACA,KAAK;AAAA,cACH,OAAO;AAAA,YACT;AAAA,YAGC;AAAA;AAAA,UAFI;AAAA,QAGP,CAEH,GACL;AAAA,SACF;AAAA,MAEA,oBAAC,UAAO,OAAM,MAAK,WAAU,MAC1B,sBAAY,IAAI,CAAC,SAChB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,OAAM;AAAA,UACN,QAAO;AAAA,UACP,QAAO;AAAA,UACP,KAAK;AAAA,YACH,QAAQ;AAAA,UACV;AAAA,UACA,KAAK;AAAA,YACH,QAAQ;AAAA,UACV;AAAA,UAGC;AAAA;AAAA,QAFI;AAAA,MAGP,CACD,GACH;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,SAAS,UAAU,QAAkC,OAAO,IAAO;AACjE,SAAO,YAAY,IAAI,CAAC,UACf,OAAO,KAAK,MAAM,EACtB;AAAA,IACC,CAAC,UACC,MAAM,WAAW,KAAK,MACrB,OAAO,MAAM,SAAS,MAAM,IAAI,CAAC,MAAM,SAAS,MAAM;AAAA,EAC3D,EACC,IAAI,CAAC,QAAQ,OAAO,GAAG,CAAC,CAC5B;AACH;",
-  "names": []
+  "sources": ["../../src/Users/n8/tamagui/packages/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,OACZ,OAAA;IAACC,UAAUH,MAAAA;IAASG,UAAUH,QAAQ,EAAA;KAAjEI,cAA2B,KAAA,CAAA,GAAdC,aAAc,KAAA,CAAA;AAElC,SACE,sBAAA,cAACV,QAAAA;IAAOW,WAAU;IAAKC,OAAM;KAC3B,sBAAA,cAACC,WAAAA;IAAUC,OAAM;IAAQT,QAAQI;MACjC,sBAAA,cAACZ,WAAAA,IAAAA,GACD,sBAAA,cAACgB,WAAAA;IAAUC,OAAM;IAAOT,QAAQK;;AAGtC;AAEA,SAASG,UAAU,OAA0D;MAAxDC,QAAF,MAAEA,OAAOT,SAAT,MAASA;AAC1B,SACE,sBAAA,cAACL,QAAAA;IAAOY,OAAAA;IAAMG,KAAK;MAAEH,OAAO;IAAK;KAC/B,sBAAA,cAACjB,IAAAA;IAAGqB,MAAK;KAAMF,KAAAA,GAEf,sBAAA,cAACf,QAAAA;IAAOa,OAAAA;IAAMK,WAAU;KACtB,sBAAA,cAACjB,QAAAA;IAAOY,OAAAA;IAAMG,KAAK;MAAEH,OAAO;IAAK;IAAGK,WAAU;KAC3CZ,OAAOa,IAAI,SAACC,OAAOC,OAAAA;AAClB,WACE,sBAAA,cAACrB,QAAAA;MAAOa,OAAM;MAAKS,KAAKD;OACrBD,MAAMD,IAAI,SAACX,OAAAA;AACV,aACE,sBAAA,cAACT,QAAAA;QACCuB,KAAM,GAAcD,OAAZb,MAAMc,GAAG,EAAS,OAAND,KAAAA;QACpBE,cAAa;QACbN,MAAK;QACLO,QAAO;QACPC,aAAa;QACbC,iBAAiBvB,iBAAiBK,KAAAA;QAClCmB,aAAY;QACZX,KAAK;UACHC,MAAM;QACR;QACAW,KAAK;UACHX,MAAM;QACR;;IAGN,CAAA,CAAA;EAGN,CAAA,GAEA,sBAAA,cAACjB,QAAAA;IAAOa,OAAM;IAAKK,WAAU;KAC1B,IAAIW,MAAM,EAAA,EACRC,KAAK,CAAA,EACLC,MAAM,CAAA,EACNZ,IAAI,SAACa,GAAGX,OAAAA;AACP,WACE,sBAAA,cAACxB,WAAAA;MACCW,OAAM;MACNyB,WAAU;MACVC,OAAM;MACNlB,KAAK;QACHkB,OAAO;MACT;MACAN,KAAK;QACHM,OAAO;MACT;MACAZ,KAAKD;OAEJA,KAAAA;EAGP,CAAA,CAAA,CAAA,GAIN,sBAAA,cAACpB,QAAAA;IAAOY,OAAM;IAAKD,WAAU;KAC1BR,YAAYe,IAAI,SAACgB,MAAAA;WAChB,sBAAA,cAACtC,WAAAA;MACCuC,OAAOD;MACP3B,OAAM;MACNgB,QAAO;MACPa,QAAO;MACPrB,KAAK;QACHQ,QAAQ;MACV;MACAI,KAAK;QACHJ,QAAQ;MACV;MACAF,KAAKa;OAEJA,IAAAA;;AAOf;AAEA,SAAS1B,UAAUH,QAAgC;MAAEgC,OAAAA,UAAAA,SAAAA,KAAAA,UAAAA,CAAAA,MAAAA,SAAAA,UAAAA,CAAAA,IAAO;AAC1D,SAAOlC,YAAYe,IAAI,SAACC,OAAAA;AACtB,WAAOmB,OAAOC,KAAKlC,MAAAA,EAChBmC,OACC,SAACjC,OAAAA;aACCA,MAAMkC,WAAWtB,KAAAA,MAChBkB,OAAO9B,MAAMmC,SAAS,MAAA,IAAU,CAACnC,MAAMmC,SAAS,MAAA;OAEpDxB,IAAI,SAACG,KAAAA;aAAQhB,OAAOgB,GAAAA;;EACzB,CAAA;AACF;",
+  "names": ["H2", "Paragraph", "Separator", "Square", "XStack", "YStack", "getTokens", "getVariableValue", "colorGroups", "ColorsDemo", "colors", "prefixed", "color", "getColors", "colorsLight", "colorsDark", "marginTop", "space", "ColorsRow", "title", "$sm", "size", "alignSelf", "map", "group", "index", "key", "borderRadius", "height", "borderWidth", "backgroundColor", "borderColor", "$xs", "Array", "fill", "slice", "_", "textAlign", "width", "name", "theme", "rotate", "dark", "Object", "keys", "filter", "startsWith", "endsWith"]
 }

package/dist/jsx/DialogDemo.native.js

@@ -1,96 +1,112 @@
 import { X } from "@tamagui/lucide-icons";
-import {
-  Adapt,
-  Button,
-  Dialog,
-  Fieldset,
-  Input,
-  Label,
-  Paragraph,
-  Sheet,
-  TooltipSimple,
-  Unspaced,
-  XStack
-} from "tamagui";
+import { Adapt, Button, Dialog, Fieldset, Input, Label, Paragraph, Sheet, TooltipSimple, Unspaced, XStack } from "tamagui";
 import { SelectDemoItem } from "./SelectDemo";
-import { jsx, jsxs } from "react/jsx-runtime";
 function DialogDemo() {
-  return /* @__PURE__ */ jsx(DialogInstance, {});
+  return /* @__PURE__ */ React.createElement(DialogInstance, null);
 }
 function DialogInstance() {
-  return /* @__PURE__ */ jsxs(Dialog, { modal: !0, children: [
-    /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { children: "Show Dialog" }) }),
-    /* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ jsxs(Sheet, { animation: "medium", zIndex: 2e5, modal: !0, dismissOnSnapToBottom: !0, children: [
-      /* @__PURE__ */ jsx(Sheet.Frame, { padding: "$4", gap: "$4", children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }),
-      /* @__PURE__ */ jsx(
-        Sheet.Overlay,
-        {
-          animation: "lazy",
-          enterStyle: { opacity: 0 },
-          exitStyle: { opacity: 0 }
+  return /* @__PURE__ */ React.createElement(Dialog, {
+    modal: !0
+  }, /* @__PURE__ */ React.createElement(Dialog.Trigger, {
+    asChild: !0
+  }, /* @__PURE__ */ React.createElement(Button, null, "Show Dialog")), /* @__PURE__ */ React.createElement(Adapt, {
+    when: "sm",
+    platform: "touch"
+  }, /* @__PURE__ */ React.createElement(Sheet, {
+    animation: "medium",
+    zIndex: 2e5,
+    modal: !0,
+    dismissOnSnapToBottom: !0
+  }, /* @__PURE__ */ React.createElement(Sheet.Frame, {
+    padding: "$4",
+    gap: "$4"
+  }, /* @__PURE__ */ React.createElement(Adapt.Contents, null)), /* @__PURE__ */ React.createElement(Sheet.Overlay, {
+    animation: "lazy",
+    enterStyle: {
+      opacity: 0
+    },
+    exitStyle: {
+      opacity: 0
+    }
+  }))), /* @__PURE__ */ React.createElement(Dialog.Portal, null, /* @__PURE__ */ React.createElement(Dialog.Overlay, {
+    key: "overlay",
+    animation: "slow",
+    opacity: 0.5,
+    enterStyle: {
+      opacity: 0
+    },
+    exitStyle: {
+      opacity: 0
+    }
+  }), /* @__PURE__ */ React.createElement(Dialog.Content, {
+    bordered: !0,
+    elevate: !0,
+    key: "content",
+    animateOnly: [
+      "transform",
+      "opacity"
+    ],
+    animation: [
+      "quicker",
+      {
+        opacity: {
+          overshootClamping: !0
         }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
-      /* @__PURE__ */ jsx(
-        Dialog.Overlay,
-        {
-          animation: "slow",
-          opacity: 0.5,
-          enterStyle: { opacity: 0 },
-          exitStyle: { opacity: 0 }
-        },
-        "overlay"
-      ),
-      /* @__PURE__ */ jsxs(
-        Dialog.Content,
-        {
-          bordered: !0,
-          elevate: !0,
-          animateOnly: ["transform", "opacity"],
-          animation: [
-            "quicker",
-            {
-              opacity: {
-                overshootClamping: !0
-              }
-            }
-          ],
-          enterStyle: { x: 0, y: -20, opacity: 0, scale: 0.9 },
-          exitStyle: { x: 0, y: 10, opacity: 0, scale: 0.95 },
-          gap: "$4",
-          children: [
-            /* @__PURE__ */ jsx(Dialog.Title, { children: "Edit profile" }),
-            /* @__PURE__ */ jsx(Dialog.Description, { children: "Make changes to your profile here. Click save when you're done." }),
-            /* @__PURE__ */ jsxs(Fieldset, { gap: "$4", horizontal: !0, children: [
-              /* @__PURE__ */ jsx(Label, { width: 160, justifyContent: "flex-end", htmlFor: "name", children: "Name" }),
-              /* @__PURE__ */ jsx(Input, { flex: 1, id: "name", defaultValue: "Nate Wienert" })
-            ] }),
-            /* @__PURE__ */ jsxs(Fieldset, { gap: "$4", horizontal: !0, children: [
-              /* @__PURE__ */ jsx(Label, { width: 160, justifyContent: "flex-end", htmlFor: "username", children: /* @__PURE__ */ jsx(TooltipSimple, { label: "Pick your favorite", placement: "bottom-start", children: /* @__PURE__ */ jsx(Paragraph, { children: "Food" }) }) }),
-              /* @__PURE__ */ jsx(SelectDemoItem, {})
-            ] }),
-            /* @__PURE__ */ jsxs(XStack, { alignSelf: "flex-end", gap: "$4", children: [
-              /* @__PURE__ */ jsx(DialogInstance, {}),
-              /* @__PURE__ */ jsx(Dialog.Close, { displayWhenAdapted: !0, asChild: !0, children: /* @__PURE__ */ jsx(Button, { theme: "active", "aria-label": "Close", children: "Save changes" }) })
-            ] }),
-            /* @__PURE__ */ jsx(Unspaced, { children: /* @__PURE__ */ jsx(Dialog.Close, { asChild: !0, children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                position: "absolute",
-                top: "$3",
-                right: "$3",
-                size: "$2",
-                circular: !0,
-                icon: X
-              }
-            ) }) })
-          ]
-        },
-        "content"
-      )
-    ] })
-  ] });
+      }
+    ],
+    enterStyle: {
+      x: 0,
+      y: -20,
+      opacity: 0,
+      scale: 0.9
+    },
+    exitStyle: {
+      x: 0,
+      y: 10,
+      opacity: 0,
+      scale: 0.95
+    },
+    gap: "$4"
+  }, /* @__PURE__ */ React.createElement(Dialog.Title, null, "Edit profile"), /* @__PURE__ */ React.createElement(Dialog.Description, null, "Make changes to your profile here. Click save when you're done."), /* @__PURE__ */ React.createElement(Fieldset, {
+    gap: "$4",
+    horizontal: !0
+  }, /* @__PURE__ */ React.createElement(Label, {
+    width: 160,
+    justifyContent: "flex-end",
+    htmlFor: "name"
+  }, "Name"), /* @__PURE__ */ React.createElement(Input, {
+    flex: 1,
+    id: "name",
+    defaultValue: "Nate Wienert"
+  })), /* @__PURE__ */ React.createElement(Fieldset, {
+    gap: "$4",
+    horizontal: !0
+  }, /* @__PURE__ */ React.createElement(Label, {
+    width: 160,
+    justifyContent: "flex-end",
+    htmlFor: "username"
+  }, /* @__PURE__ */ React.createElement(TooltipSimple, {
+    label: "Pick your favorite",
+    placement: "bottom-start"
+  }, /* @__PURE__ */ React.createElement(Paragraph, null, "Food"))), /* @__PURE__ */ React.createElement(SelectDemoItem, null)), /* @__PURE__ */ React.createElement(XStack, {
+    alignSelf: "flex-end",
+    gap: "$4"
+  }, /* @__PURE__ */ React.createElement(DialogInstance, null), /* @__PURE__ */ React.createElement(Dialog.Close, {
+    displayWhenAdapted: !0,
+    asChild: !0
+  }, /* @__PURE__ */ React.createElement(Button, {
+    theme: "active",
+    "aria-label": "Close"
+  }, "Save changes"))), /* @__PURE__ */ React.createElement(Unspaced, null, /* @__PURE__ */ React.createElement(Dialog.Close, {
+    asChild: !0
+  }, /* @__PURE__ */ React.createElement(Button, {
+    position: "absolute",
+    top: "$3",
+    right: "$3",
+    size: "$2",
+    circular: !0,
+    icon: X
+  }))))));
 }
 export {
   DialogDemo