@shopify/shop-minis-react 0.1.1 → 0.1.2

package/dist/_virtual/index10.js

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

package/dist/_virtual/index4.js

@@ -1,5 +1,6 @@
-var e = { exports: {} };
+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 {
-  e as __module
+  i as s
 };
 //# sourceMappingURL=index4.js.map

package/dist/_virtual/index4.js.map

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

package/dist/_virtual/index5.js

@@ -1,6 +1,5 @@
-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();
+var e = { exports: {} };
 export {
-  i as l
+  e as __module
 };
 //# 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/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js";
+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 {
-  i as s
+  i as l
 };
 //# sourceMappingURL=index6.js.map

package/dist/_virtual/index9.js

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

package/dist/components/atoms/image.js

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

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

@@ -1 +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 size-full 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;"}
+{"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 {\n  ImgHTMLAttributes,\n  useCallback,\n  useMemo,\n  memo,\n  useState,\n  useEffect,\n} from 'react'\n\nimport {cn} from '../../lib/utils'\nimport {getThumbhashDataURL, getResizedImageUrl} from '../../utils'\n\ntype ImageProps = ImgHTMLAttributes<HTMLImageElement> & {\n  src?: string\n  file?: File\n  thumbhash?: string | null\n  aspectRatio?: number | string\n}\n\nexport const Image = memo(function Image(props: ImageProps) {\n  const {\n    src,\n    file,\n    thumbhash,\n    onLoad,\n    className,\n    style,\n    aspectRatio = 'auto',\n    ...restProps\n  } = props\n\n  const [isLoaded, setIsLoaded] = useState(false)\n  const [blobUrl, setBlobUrl] = useState<string | null>(null)\n\n  // Create and manage blob URL for File objects\n  useEffect(() => {\n    if (!file) {\n      setBlobUrl(null)\n      return\n    }\n\n    const url = URL.createObjectURL(file)\n    setBlobUrl(url)\n\n    // Cleanup on unmount or when file changes\n    return () => {\n      URL.revokeObjectURL(url)\n    }\n  }, [file])\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  // Use blob URL if file is provided, otherwise use src\n  const imageSrc = useMemo(() => {\n    if (blobUrl) return blobUrl\n    return getResizedImageUrl(src)\n  }, [blobUrl, 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 size-full object-cover',\n          isLoaded && 'opacity-100'\n        )}\n        src={imageSrc}\n        onLoad={handleLoad}\n        {...restProps}\n      />\n    </div>\n  )\n})\n"],"names":["Image","memo","props","src","file","thumbhash","onLoad","className","style","aspectRatio","restProps","isLoaded","setIsLoaded","useState","blobUrl","setBlobUrl","useEffect","url","thumbhashDataURL","useMemo","getThumbhashDataURL","handleLoad","useCallback","event","imageSrc","getResizedImageUrl","jsx","cn"],"mappings":";;;;AAqBO,MAAMA,IAAQC,EAAK,SAAeC,GAAmB;AACpD,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,GAAGC;AAAA,EAAA,IACDR,GAEE,CAACS,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxC,CAACC,GAASC,CAAU,IAAIF,EAAwB,IAAI;AAG1D,EAAAG,EAAU,MAAM;AACd,QAAI,CAACZ,GAAM;AACT,MAAAW,EAAW,IAAI;AACf;AAAA,IAAA;AAGI,UAAAE,IAAM,IAAI,gBAAgBb,CAAI;AACpC,WAAAW,EAAWE,CAAG,GAGP,MAAM;AACX,UAAI,gBAAgBA,CAAG;AAAA,IACzB;AAAA,EAAA,GACC,CAACb,CAAI,CAAC;AAET,QAAMc,IAAmBC;AAAA,IACvB,MAAMC,EAAoBf,KAAa,MAAS;AAAA,IAChD,CAACA,CAAS;AAAA,EACZ,GAEMgB,IAAaC;AAAA,IACjB,CAACC,MAAyD;AACxD,MAAAX,EAAY,EAAI,GAChBN,IAASiB,CAAK;AAAA,IAChB;AAAA,IACA,CAACjB,CAAM;AAAA,EACT,GAGMkB,IAAWL,EAAQ,MACnBL,KACGW,EAAmBtB,CAAG,GAC5B,CAACW,GAASX,CAAG,CAAC;AAGf,SAAA,gBAAAuB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,oBAAoBpB,CAAS;AAAA,MAC3C,OAAO;AAAA,QACL,GAAGC;AAAA,QACH,aAAAC;AAAA,QACA,iBAAiBS,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,YACAhB,KAAY;AAAA,UACd;AAAA,UACA,KAAKa;AAAA,UACL,QAAQH;AAAA,UACP,GAAGX;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;"}

package/dist/shop-minis-react/node_modules/.pnpm/@radix-ui_react-use-is-hydrated@0.1.0_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-use-is-hydrated/dist/index.js

@@ -1,4 +1,4 @@
-import { s as r } from "../../../../../../../../_virtual/index6.js";
+import { s as r } from "../../../../../../../../_virtual/index4.js";
 function s() {
   return r.useSyncExternalStore(
     e,

package/dist/shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/index.js

@@ -1,4 +1,4 @@
-import { __module as q } from "../../../../../../../../_virtual/index4.js";
+import { __module as q } from "../../../../../../../../_virtual/index5.js";
 import { __require as F } from "../../../../../global@4.4.0/node_modules/global/window.js";
 import { __require as N } from "../../../../../@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/extends.js";
 import { __require as J } from "../../../../../is-function@1.0.2/node_modules/is-function/index.js";

package/dist/shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js

@@ -1,4 +1,4 @@
-import { __exports as r } from "../../../../../../../../_virtual/index9.js";
+import { __exports as r } from "../../../../../../../../_virtual/index10.js";
 import { __require as a } from "./dom.js";
 import { __require as o } from "./dom-parser.js";
 var i;

package/dist/shop-minis-react/node_modules/.pnpm/mpd-parser@1.3.1/node_modules/mpd-parser/dist/mpd-parser.es.js

@@ -2,7 +2,7 @@ import L from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-ut
 import T from "../../../../../../../_virtual/window.js";
 import { forEachMediaGroup as Z } from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/media-groups.js";
 import J from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/decode-b64-to-uint8-array.js";
-import { l as Q } from "../../../../../../../_virtual/index5.js";
+import { l as Q } from "../../../../../../../_virtual/index6.js";
 /*! @name mpd-parser @version 1.3.1 @license Apache-2.0 */
 const w = (e) => !!e && typeof e == "object", E = (...e) => e.reduce((n, t) => (typeof t != "object" || Object.keys(t).forEach((r) => {
   Array.isArray(n[r]) && Array.isArray(t[r]) ? n[r] = n[r].concat(t[r]) : w(n[r]) && w(t[r]) ? n[r] = E(n[r], t[r]) : n[r] = t[r];

package/dist/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

@@ -1,4 +1,4 @@
-import { __module as r } from "../../../../../../../_virtual/index10.js";
+import { __module as r } from "../../../../../../../_virtual/index9.js";
 import { __require as o } from "../cjs/use-sync-external-store-shim.production.js";
 import { __require as i } from "../cjs/use-sync-external-store-shim.development.js";
 var e;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "sideEffects": false,
   "type": "module",
   "engines": {

package/src/components/atoms/image.tsx

@@ -1,12 +1,20 @@
 /* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-import {ImgHTMLAttributes, useCallback, useMemo, memo, useState} from 'react'
+import {
+  ImgHTMLAttributes,
+  useCallback,
+  useMemo,
+  memo,
+  useState,
+  useEffect,
+} from 'react'
 
 import {cn} from '../../lib/utils'
 import {getThumbhashDataURL, getResizedImageUrl} from '../../utils'
 
 type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
   src?: string
+  file?: File
   thumbhash?: string | null
   aspectRatio?: number | string
 }
@@ -14,6 +22,7 @@ type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
 export const Image = memo(function Image(props: ImageProps) {
   const {
     src,
+    file,
     thumbhash,
     onLoad,
     className,
@@ -23,6 +32,23 @@ export const Image = memo(function Image(props: ImageProps) {
   } = props
 
   const [isLoaded, setIsLoaded] = useState(false)
+  const [blobUrl, setBlobUrl] = useState<string | null>(null)
+
+  // Create and manage blob URL for File objects
+  useEffect(() => {
+    if (!file) {
+      setBlobUrl(null)
+      return
+    }
+
+    const url = URL.createObjectURL(file)
+    setBlobUrl(url)
+
+    // Cleanup on unmount or when file changes
+    return () => {
+      URL.revokeObjectURL(url)
+    }
+  }, [file])
 
   const thumbhashDataURL = useMemo(
     () => getThumbhashDataURL(thumbhash ?? undefined),
@@ -37,7 +63,11 @@ export const Image = memo(function Image(props: ImageProps) {
     [onLoad]
   )
 
-  const resizedImageSrc = useMemo(() => getResizedImageUrl(src), [src])
+  // Use blob URL if file is provided, otherwise use src
+  const imageSrc = useMemo(() => {
+    if (blobUrl) return blobUrl
+    return getResizedImageUrl(src)
+  }, [blobUrl, src])
 
   return (
     <div
@@ -57,7 +87,7 @@ export const Image = memo(function Image(props: ImageProps) {
           'absolute inset-0 opacity-0 size-full object-cover',
           isLoaded && 'opacity-100'
         )}
-        src={resizedImageSrc}
+        src={imageSrc}
         onLoad={handleLoad}
         {...restProps}
       />