@hanzogui/demos 2.0.0

package/dist/cjs/AnimationsPresenceDemo.cjs

@@ -0,0 +1,123 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var AnimationsPresenceDemo_exports = {};
+__export(AnimationsPresenceDemo_exports, {
+  AnimationsPresenceDemo: () => AnimationsPresenceDemo,
+  images: () => images
+});
+module.exports = __toCommonJS(AnimationsPresenceDemo_exports);
+var import_react = __toESM(require("react"), 1),
+  import_animate_presence = require("@hanzogui/animate-presence"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_gui = require("@hanzo/gui"),
+  import_photo1 = __toESM(require("../../public/photo1.jpg"), 1),
+  import_photo2 = __toESM(require("../../public/photo2.jpg"), 1),
+  import_photo3 = __toESM(require("../../public/photo3.jpg"), 1),
+  import_jsx_runtime = require("react/jsx-runtime");
+const images = [import_photo1.default, import_photo2.default, import_photo3.default].map(x => x.src || x),
+  GalleryItem = (0, import_gui.styled)(import_gui.YStack, {
+    z: 1,
+    x: 0,
+    opacity: 1,
+    fullscreen: !0,
+    variants: {
+      // 1 = right, 0 = nowhere, -1 = left
+      going: {
+        ":number": going => ({
+          enterStyle: {
+            x: going > 0 ? 1e3 : -1e3,
+            opacity: 0
+          },
+          exitStyle: {
+            zIndex: 0,
+            x: going < 0 ? 1e3 : -1e3,
+            opacity: 0
+          }
+        })
+      }
+    }
+  }),
+  wrap = (min, max, v) => {
+    const rangeSize = max - min;
+    return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
+  };
+function AnimationsPresenceDemo() {
+  const [[page, going], setPage] = import_react.default.useState([0, 0]),
+    imageIndex = wrap(0, images.length, page),
+    paginate = going2 => {
+      setPage([page + going2, going2]);
+    };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+    overflow: "hidden",
+    bg: "#000",
+    position: "relative",
+    height: 300,
+    width: "100%",
+    items: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, {
+      initial: !1,
+      custom: {
+        going
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(GalleryItem, {
+        transition: "slow",
+        going,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Image, {
+          src: images[imageIndex],
+          width: 820,
+          height: 300,
+          objectFit: "cover"
+        })
+      }, page)
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+      "aria-label": "Carousel left",
+      icon: import_lucide_icons_2.ArrowLeft,
+      size: "$5",
+      position: "absolute",
+      l: "$4",
+      circular: !0,
+      onPress: () => paginate(-1),
+      boxShadow: "0 0 10px rgba(0,0,0,0.5)",
+      z: 100
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+      "aria-label": "Carousel right",
+      icon: import_lucide_icons_2.ArrowRight,
+      size: "$5",
+      position: "absolute",
+      r: "$4",
+      circular: !0,
+      onPress: () => paginate(1),
+      boxShadow: "0 0 10px rgba(0,0,0,0.5)",
+      z: 100
+    })]
+  });
+}

package/dist/cjs/AnimationsPresenceDemo.native.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var AnimationsPresenceDemo_exports = {};
+__export(AnimationsPresenceDemo_exports, {
+  AnimationsPresenceDemo: () => AnimationsPresenceDemo,
+  images: () => images
+});
+module.exports = __toCommonJS(AnimationsPresenceDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_react = __toESM(require("react"), 1),
+  import_animate_presence = require("@hanzogui/animate-presence"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_gui = require("@hanzo/gui"),
+  import_photo1 = __toESM(require("../../public/photo1.jpg"), 1),
+  import_photo2 = __toESM(require("../../public/photo2.jpg"), 1),
+  import_photo3 = __toESM(require("../../public/photo3.jpg"), 1),
+  images = [import_photo1.default, import_photo2.default, import_photo3.default].map(function (x) {
+    return x.src || x;
+  }),
+  GalleryItem = (0, import_gui.styled)(import_gui.YStack, {
+    z: 1,
+    x: 0,
+    opacity: 1,
+    fullscreen: !0,
+    variants: {
+      // 1 = right, 0 = nowhere, -1 = left
+      going: {
+        ":number": function (going) {
+          return {
+            enterStyle: {
+              x: going > 0 ? 1e3 : -1e3,
+              opacity: 0
+            },
+            exitStyle: {
+              zIndex: 0,
+              x: going < 0 ? 1e3 : -1e3,
+              opacity: 0
+            }
+          };
+        }
+      }
+    }
+  }),
+  wrap = function (min, max, v) {
+    var rangeSize = max - min;
+    return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
+  };
+function AnimationsPresenceDemo() {
+  var [[page, going], setPage] = import_react.default.useState([0, 0]),
+    imageIndex = wrap(0, images.length, page),
+    paginate = function (going2) {
+      setPage([page + going2, going2]);
+    };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+    overflow: "hidden",
+    bg: "#000",
+    position: "relative",
+    height: 300,
+    width: "100%",
+    items: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, {
+      initial: !1,
+      custom: {
+        going
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(GalleryItem, {
+        transition: "slow",
+        going,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Image, {
+          src: images[imageIndex],
+          width: 820,
+          height: 300,
+          objectFit: "cover"
+        })
+      }, page)
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+      "aria-label": "Carousel left",
+      icon: import_lucide_icons_2.ArrowLeft,
+      size: "$5",
+      position: "absolute",
+      l: "$4",
+      circular: !0,
+      onPress: function () {
+        return paginate(-1);
+      },
+      boxShadow: "0 0 10px rgba(0,0,0,0.5)",
+      z: 100
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+      "aria-label": "Carousel right",
+      icon: import_lucide_icons_2.ArrowRight,
+      size: "$5",
+      position: "absolute",
+      r: "$4",
+      circular: !0,
+      onPress: function () {
+        return paginate(1);
+      },
+      boxShadow: "0 0 10px rgba(0,0,0,0.5)",
+      z: 100
+    })]
+  });
+}
+//# sourceMappingURL=AnimationsPresenceDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","AnimationsPresenceDemo_exports","__export","AnimationsPresenceDemo","images","module","exports","import_jsx_runtime","require","import_react","__toESM","import_animate_presence","import_lucide_icons_2","import_gui","import_photo1","import_photo2","import_photo3","default","map","x","src","GalleryItem","styled","YStack","z","opacity","fullscreen","variants","going",":number","enterStyle","exitStyle","zIndex","wrap","min","max","v","rangeSize","page","setPage","useState","imageIndex","length","paginate","going2","jsxs","XStack","overflow","bg","position","height","width","items","children","jsx","AnimatePresence","initial","custom","transition","Image","objectFit","Button","icon","ArrowLeft","size"],"sources":["../../src/AnimationsPresenceDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/AnimationsTimingDemo.cjs

@@ -0,0 +1,46 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var AnimationsTimingDemo_exports = {};
+__export(AnimationsTimingDemo_exports, {
+  AnimationsTimingDemo: () => AnimationsTimingDemo
+});
+module.exports = __toCommonJS(AnimationsTimingDemo_exports);
+var import_logo = require("@hanzogui/logo"),
+  import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function AnimationsTimingDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+    bg: "$color9",
+    transition: "100ms",
+    elevation: "$4",
+    size: 110,
+    rounded: "$9",
+    hoverStyle: {
+      scale: 1.2
+    },
+    pressStyle: {
+      scale: 0.9
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_logo.LogoIcon, {
+      downscale: 0.75
+    })
+  });
+}

package/dist/cjs/AnimationsTimingDemo.native.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var AnimationsTimingDemo_exports = {};
+__export(AnimationsTimingDemo_exports, {
+  AnimationsTimingDemo: () => AnimationsTimingDemo
+});
+module.exports = __toCommonJS(AnimationsTimingDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_logo = require("@hanzogui/logo"),
+  import_gui = require("@hanzo/gui");
+function AnimationsTimingDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+    bg: "$color9",
+    transition: "100ms",
+    elevation: "$4",
+    size: 110,
+    rounded: "$9",
+    hoverStyle: {
+      scale: 1.2
+    },
+    pressStyle: {
+      scale: 0.9
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_logo.LogoIcon, {
+      downscale: 0.75
+    })
+  });
+}
+//# sourceMappingURL=AnimationsTimingDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","AnimationsTimingDemo_exports","__export","AnimationsTimingDemo","module","exports","import_jsx_runtime","require","import_logo","import_gui","jsx","Square","bg","transition","elevation","size","rounded","hoverStyle","scale","pressStyle","children","LogoIcon","downscale"],"sources":["../../src/AnimationsTimingDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,4BAAA;AAAAC,QAAA,CAAAD,4BAAA;EAAAE,oBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAyB,CAAAK,4BACF;AAEhB,IAAAK,kBAAS,GAAAC,OAAuB;EAAAC,WAAA,GAAAD,OAAA;EAAAE,UAAA,GAAAF,OAAA;AACrC,SACEJ,qBAAA;EAAA,OAAC,mBAAAG,kBAAA,CAAAI,GAAA,EAAAD,UAAA,CAAAE,MAAA;IAAAC,EAAA;IAAAC,UACI;IAAAC,SACH,MAAW;IAAAC,IACX;IAAUC,OACV,EAAM;IAAAC,UACN,EAAQ;MACRC,KAAA;IAAY;IACHC,UACT;MACAD,KAAA;IAAY;IACHE,QACT,qBAAAd,kBAAA,CAAAI,GAAA,EAAAF,WAAA,CAAAa,QAAA;MAEAC,SAAA;IAA2B;EAC7B;AAEJ","ignoreList":[]}

package/dist/cjs/AvatarDemo.cjs

@@ -0,0 +1,53 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var AvatarDemo_exports = {};
+__export(AvatarDemo_exports, {
+  AvatarDemo: () => AvatarDemo
+});
+module.exports = __toCommonJS(AvatarDemo_exports);
+var import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function AvatarDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+    items: "center",
+    gap: "$6",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Avatar, {
+      circular: !0,
+      size: "$10",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Avatar.Image, {
+        "aria-label": "Cam",
+        src: "https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Avatar.Fallback, {
+        bg: "$blue10"
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Avatar, {
+      circular: !0,
+      size: "$8",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Avatar.Image, {
+        "aria-label": "Nate Wienert",
+        src: "https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Avatar.Fallback, {
+        delayMs: 600,
+        bg: "$blue10"
+      })]
+    })]
+  });
+}

package/dist/cjs/AvatarDemo.native.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var AvatarDemo_exports = {};
+__export(AvatarDemo_exports, {
+  AvatarDemo: () => AvatarDemo
+});
+module.exports = __toCommonJS(AvatarDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_gui = require("@hanzo/gui");
+function AvatarDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+    items: "center",
+    gap: "$6",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Avatar, {
+      circular: !0,
+      size: "$10",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Avatar.Image, {
+        "aria-label": "Cam",
+        src: "https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Avatar.Fallback, {
+        bg: "$blue10"
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Avatar, {
+      circular: !0,
+      size: "$8",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Avatar.Image, {
+        "aria-label": "Nate Wienert",
+        src: "https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Avatar.Fallback, {
+        delayMs: 600,
+        bg: "$blue10"
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=AvatarDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","AvatarDemo_exports","__export","AvatarDemo","module","exports","import_jsx_runtime","require","import_gui","jsxs","XStack","items","gap","children","Avatar","circular","size","jsx","Image","src","Fallback","bg"],"sources":["../../src/AvatarDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,kBAAA;AAAAC,QAAA,CAAAD,kBAAA;EAAAE,UAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAA+BT,YAAA,CAAAK,kBAKzB;AAHC,IAAAK,kBAAsB,GAAAC,OAAA;EAAAC,UAAA,GAAAD,OAAA;AAC3B,SACEJ,WAAA;EACE,0BAAAG,kBAAA,CAAAG,IAAC,EAAAD,UAAA,CAAAE,MAAO;IACNC,KAAA;IAAAC,GAAA,EAAC;IAAOC,QAAP,kBACC,EAAW,EAAAP,kBAAA,CAAAG,IAAA,EAAAD,UAAA,CAAAM,MAAA;MAAAC,QACP;MAAAC,IAAA;MACNH,QAAA,GACA,mBAAAP,kBAAA,CAAAW,GAAC,EAAAT,UAAA,CAAAM,MAAO,CAAAI,KAAA,EAAP;QACH;QAEAC,GAAA;MACE,IAAC,eAAO,IAAAb,kBAAA,CAAAW,GAAA,EAAAT,UAAA,CAAAM,MAAA,CAAAM,QAAA;QAAPC,EAAA;MACC;IACI,IACN,mBAAAf,kBAAA,CAAAG,IAAA,EAAAD,UAAA,CAAAM,MAAA;MACAC,QAAA;MACFC,IAAA;MACFH,QAAA,GAEJ,mBAAAP,kBAAA,CAAAW,GAAA,EAAAT,UAAA,CAAAM,MAAA,CAAAI,KAAA","ignoreList":[]}

package/dist/cjs/BoxShadowTokenDemo.cjs

@@ -0,0 +1,57 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var BoxShadowTokenDemo_exports = {};
+__export(BoxShadowTokenDemo_exports, {
+  BoxShadowTokenDemo: () => BoxShadowTokenDemo
+});
+module.exports = __toCommonJS(BoxShadowTokenDemo_exports);
+var import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const StyledShadowBox = (0, import_gui.styled)(import_gui.View, {
+  width: 100,
+  height: 100,
+  backgroundColor: "$color5",
+  borderRadius: "$4",
+  boxShadow: "0px 2px 8px $shadowColor"
+});
+function BoxShadowTokenDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    gap: "$4",
+    items: "center",
+    p: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Text, {
+      testID: "box-shadow-token-title",
+      children: "BoxShadow Token Test"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledShadowBox, {
+      testID: "box-shadow-styled"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.View, {
+      width: 100,
+      height: 100,
+      backgroundColor: "$color5",
+      borderRadius: "$4",
+      boxShadow: "0px 2px 8px $shadowColor",
+      testID: "box-shadow-prop"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Text, {
+      testID: "box-shadow-token-ok",
+      children: "OK"
+    })]
+  });
+}

package/dist/cjs/BoxShadowTokenDemo.native.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var BoxShadowTokenDemo_exports = {};
+__export(BoxShadowTokenDemo_exports, {
+  BoxShadowTokenDemo: () => BoxShadowTokenDemo
+});
+module.exports = __toCommonJS(BoxShadowTokenDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_gui = require("@hanzo/gui"),
+  StyledShadowBox = (0, import_gui.styled)(import_gui.View, {
+    width: 100,
+    height: 100,
+    backgroundColor: "$color5",
+    borderRadius: "$4",
+    boxShadow: "0px 2px 8px $shadowColor"
+  });
+function BoxShadowTokenDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    gap: "$4",
+    items: "center",
+    p: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Text, {
+      testID: "box-shadow-token-title",
+      children: "BoxShadow Token Test"
+    }), /* styled() definition - breaks if web imports leak to native */
+    /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledShadowBox, {
+      testID: "box-shadow-styled"
+    }), /* inline prop - should always work */
+    /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.View, {
+      width: 100,
+      height: 100,
+      backgroundColor: "$color5",
+      borderRadius: "$4",
+      boxShadow: "0px 2px 8px $shadowColor",
+      testID: "box-shadow-prop"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Text, {
+      testID: "box-shadow-token-ok",
+      children: "OK"
+    })]
+  });
+}
+//# sourceMappingURL=BoxShadowTokenDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","BoxShadowTokenDemo_exports","__export","BoxShadowTokenDemo","module","exports","import_jsx_runtime","require","import_gui","StyledShadowBox","styled","View","width","height","backgroundColor","borderRadius","boxShadow","jsxs","YStack","gap","items","p","children","jsx","Text","testID"],"sources":["../../src/BoxShadowTokenDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,0BAAA;AAAAC,QAAA,CAAAD,0BAAA;EAAAE,kBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAA2CT,YAAA,CAAAK,0BAevC;AAVJ,IAAAK,kBAAM,GAAAC,OAAkB,oBAAO;EAAAC,UAAM,GAAAD,OAAA;EAAAE,eAAA,OAAAD,UAAA,CAAAE,MAAA,EAAAF,UAAA,CAAAG,IAAA;IACnCC,KAAA,EAAO;IACPC,MAAA,EAAQ;IACRC,eAAA,EAAiB;IACjBC,YAAA,EAAc;IACdC,SAAA,EAAW;EACb,CAAC;AAEM,SAASb,mBAAA,EAAqB;EACnC,OACE,mBAAAG,kBAAA,CAAAW,IAAA,EAACT,UAAA,CAAAU,MAAA;IACCC,GAAA;IAGAC,KAAA;IAGAC,CAAA;IAAAC,QAAC,sBAAAhB,kBAAA,CAAAiB,GAAA,EAAAf,UAAA,CAAAgB,IAAA;MACCC,MAAA,EAAO;MACPH,QAAQ;IAAA,EACR,EAAgB;IACH,eACH,IAAAhB,kBAAA,CAAAiB,GAAA,EAAAd,eAAA;MACVgB,MAAA,EAAO;IAAA,IACT;IAEA,mBAAAnB,kBAAA,CAAAiB,GAAC,EAAAf,UAAA,CAAAG,IAAA,EAAK;MACRC,KAAA;MAEJC,MAAA","ignoreList":[]}