@shopify/shop-minis-react 0.0.32 → 0.0.34

package/dist/_virtual/index2.js

@@ -1,8 +1,8 @@
 import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as o } from "../shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/index.js";
-var t = o();
-const a = /* @__PURE__ */ r(t);
+import { __require as o } from "../shop-minis-react/node_modules/.pnpm/color@4.2.3/node_modules/color/index.js";
+var t = /* @__PURE__ */ o();
+const l = /* @__PURE__ */ r(t);
 export {
-  a as default
+  l as default
 };
 //# sourceMappingURL=index2.js.map

package/dist/_virtual/index3.js

@@ -1,8 +1,8 @@
 import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as o } from "../shop-minis-react/node_modules/.pnpm/color@4.2.3/node_modules/color/index.js";
-var t = /* @__PURE__ */ o();
-const l = /* @__PURE__ */ r(t);
+import { __require as o } from "../shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/index.js";
+var t = o();
+const a = /* @__PURE__ */ r(t);
 export {
-  l as default
+  a as default
 };
 //# sourceMappingURL=index3.js.map

package/dist/_virtual/index4.js

@@ -1,5 +1,5 @@
-var r = {};
+var e = { exports: {} };
 export {
-  r as __exports
+  e as __module
 };
 //# sourceMappingURL=index4.js.map

package/dist/_virtual/index5.js

@@ -1,5 +1,6 @@
-var e = { exports: {} };
+import { __require as r } from "../shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js";
+var i = r();
 export {
-  e as __module
+  i as l
 };
 //# sourceMappingURL=index5.js.map

package/dist/_virtual/index5.js.map

@@ -1 +1 @@
-{"version":3,"file":"index5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/index6.js

@@ -1,6 +1,6 @@
-import { __require as r } from "../shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js";
+import { __require as r } from "../shop-minis-react/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js";
 var i = r();
 export {
-  i as l
+  i as s
 };
 //# sourceMappingURL=index6.js.map

package/dist/_virtual/index7.js

@@ -1,6 +1,5 @@
-import { __require as r } from "../shop-minis-react/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js";
-var i = r();
+var r = {};
 export {
-  i as s
+  r as __exports
 };
 //# sourceMappingURL=index7.js.map

package/dist/_virtual/index7.js.map

@@ -1 +1 @@
-{"version":3,"file":"index7.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index7.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/index8.js

@@ -1,5 +1,5 @@
-var r = {};
+var o = { exports: {} };
 export {
-  r as __exports
+  o as __module
 };
 //# sourceMappingURL=index8.js.map

package/dist/_virtual/index9.js

@@ -1,5 +1,5 @@
-var o = { exports: {} };
+var r = {};
 export {
-  o as __module
+  r as __exports
 };
 //# sourceMappingURL=index9.js.map

package/dist/components/atoms/image.js

@@ -0,0 +1,52 @@
+import { jsx as s } from "react/jsx-runtime";
+import { memo as f, useState as L, useMemo as r, useCallback as v } from "react";
+import { cn as c } from "../../lib/utils.js";
+import { getThumbhashDataURL as I, getResizedImageUrl as k } from "../../utils/image.js";
+const U = f(function(m) {
+  const {
+    src: e,
+    thumbhash: o,
+    onLoad: a,
+    className: i,
+    style: n,
+    aspectRatio: d = "auto",
+    ...l
+  } = m, [u, g] = L(!1), t = r(
+    () => I(o ?? void 0),
+    [o]
+  ), h = v(
+    (p) => {
+      g(!0), a?.(p);
+    },
+    [a]
+  ), b = r(() => k(e), [e]);
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: c("relative w-full ", i),
+      style: {
+        ...n,
+        aspectRatio: d,
+        backgroundImage: t ? `url(${t})` : void 0,
+        backgroundSize: "cover",
+        backgroundPosition: "center"
+      },
+      children: /* @__PURE__ */ s(
+        "img",
+        {
+          className: c(
+            "absolute inset-0 opacity-0 object-cover",
+            u && "opacity-100"
+          ),
+          src: b,
+          onLoad: h,
+          ...l
+        }
+      )
+    }
+  );
+});
+export {
+  U as Image
+};
+//# sourceMappingURL=image.js.map

package/dist/components/atoms/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","sources":["../../../src/components/atoms/image.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/alt-text */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport {ImgHTMLAttributes, useCallback, useMemo, memo, useState} from 'react'\n\nimport {cn} from '../../lib/utils'\nimport {getThumbhashDataURL, getResizedImageUrl} from '../../utils'\n\ntype ImageProps = ImgHTMLAttributes<HTMLImageElement> & {\n  src?: string\n  thumbhash?: string | null\n  aspectRatio?: number | string\n}\n\nexport const Image = memo(function Image(props: ImageProps) {\n  const {\n    src,\n    thumbhash,\n    onLoad,\n    className,\n    style,\n    aspectRatio = 'auto',\n    ...restProps\n  } = props\n\n  const [isLoaded, setIsLoaded] = useState(false)\n\n  const thumbhashDataURL = useMemo(\n    () => getThumbhashDataURL(thumbhash ?? undefined),\n    [thumbhash]\n  )\n\n  const handleLoad = useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n      setIsLoaded(true)\n      onLoad?.(event)\n    },\n    [onLoad]\n  )\n\n  const resizedImageSrc = useMemo(() => getResizedImageUrl(src), [src])\n\n  return (\n    <div\n      className={cn('relative w-full ', className)}\n      style={{\n        ...style,\n        aspectRatio,\n        backgroundImage: thumbhashDataURL\n          ? `url(${thumbhashDataURL})`\n          : undefined,\n        backgroundSize: 'cover',\n        backgroundPosition: 'center',\n      }}\n    >\n      <img\n        className={cn(\n          'absolute inset-0 opacity-0 object-cover',\n          isLoaded && 'opacity-100'\n        )}\n        src={resizedImageSrc}\n        onLoad={handleLoad}\n        {...restProps}\n      />\n    </div>\n  )\n})\n"],"names":["Image","memo","props","src","thumbhash","onLoad","className","style","aspectRatio","restProps","isLoaded","setIsLoaded","useState","thumbhashDataURL","useMemo","getThumbhashDataURL","handleLoad","useCallback","event","resizedImageSrc","getResizedImageUrl","jsx","cn"],"mappings":";;;;AAaO,MAAMA,IAAQC,EAAK,SAAeC,GAAmB;AACpD,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,GAAGC;AAAA,EAAA,IACDP,GAEE,CAACQ,GAAUC,CAAW,IAAIC,EAAS,EAAK,GAExCC,IAAmBC;AAAA,IACvB,MAAMC,EAAoBX,KAAa,MAAS;AAAA,IAChD,CAACA,CAAS;AAAA,EACZ,GAEMY,IAAaC;AAAA,IACjB,CAACC,MAAyD;AACxD,MAAAP,EAAY,EAAI,GAChBN,IAASa,CAAK;AAAA,IAChB;AAAA,IACA,CAACb,CAAM;AAAA,EACT,GAEMc,IAAkBL,EAAQ,MAAMM,EAAmBjB,CAAG,GAAG,CAACA,CAAG,CAAC;AAGlE,SAAA,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,oBAAoBhB,CAAS;AAAA,MAC3C,OAAO;AAAA,QACL,GAAGC;AAAA,QACH,aAAAC;AAAA,QACA,iBAAiBK,IACb,OAAOA,CAAgB,MACvB;AAAA,QACJ,gBAAgB;AAAA,QAChB,oBAAoB;AAAA,MACtB;AAAA,MAEA,UAAA,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC;AAAA,YACT;AAAA,YACAZ,KAAY;AAAA,UACd;AAAA,UACA,KAAKS;AAAA,UACL,QAAQH;AAAA,UACP,GAAGP;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;"}