@shopify/shop-minis-react 0.0.18 → 0.0.19

package/dist/_virtual/index2.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=index2.js.map

package/dist/_virtual/index2.js.map

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

package/dist/_virtual/index3.js

@@ -1,5 +1,6 @@
-var r = {};
+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 {
-  r as __exports
+  i as s
 };
 //# sourceMappingURL=index3.js.map

package/dist/_virtual/index3.js.map

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

package/dist/components/atoms/alert-dialog.js

@@ -0,0 +1,41 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { AlertDialog as h, AlertDialogTrigger as p, AlertDialogContent as m, AlertDialogHeader as C, AlertDialogTitle as f, AlertDialogDescription as u, AlertDialogFooter as x, AlertDialogCancel as O, AlertDialogAction as j } from "../ui/alert-dialog.js";
+const H = ({
+  children: i,
+  title: t,
+  description: o,
+  cancelButtonText: n,
+  confirmationButtonText: a,
+  open: c,
+  onOpenChange: g,
+  onConfirmationAction: A
+}) => {
+  const [s, D] = d(c);
+  return /* @__PURE__ */ r(
+    h,
+    {
+      open: s,
+      onOpenChange: (l) => {
+        D(l), g(l);
+      },
+      children: [
+        /* @__PURE__ */ e(p, { asChild: !0, children: i }),
+        /* @__PURE__ */ r(m, { children: [
+          /* @__PURE__ */ r(C, { children: [
+            /* @__PURE__ */ e(f, { children: t }),
+            /* @__PURE__ */ e(u, { children: o })
+          ] }),
+          /* @__PURE__ */ r(x, { children: [
+            /* @__PURE__ */ e(O, { children: n }),
+            /* @__PURE__ */ e(j, { onClick: A, children: a })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  H as AlertDialogAtom
+};
+//# sourceMappingURL=alert-dialog.js.map

package/dist/components/atoms/alert-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.js","sources":["../../../src/components/atoms/alert-dialog.tsx"],"sourcesContent":["import {useState} from 'react'\n\nimport {\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogCancel,\n  AlertDialogAction,\n  AlertDialog as AlertDialogPrimitive,\n} from '../ui/alert-dialog'\n\nexport const AlertDialogAtom = ({\n  children,\n  title,\n  description,\n  cancelButtonText,\n  confirmationButtonText,\n  open,\n  onOpenChange,\n  onConfirmationAction,\n}: {\n  /** The trigger element that opens the alert dialog */\n  children: React.ReactNode\n  /** The title text shown in the alert dialog header */\n  title: string\n  /** The description text shown in the alert dialog body */\n  description: string\n  /** The text shown in the cancel button */\n  cancelButtonText: string\n  /** The text shown in the confirmation button */\n  confirmationButtonText: string\n  /** Whether the alert dialog is open */\n  open: boolean\n  /** Callback fired when the alert dialog open state changes */\n  onOpenChange: (open: boolean) => void\n  /** Callback fired when the confirmation button is clicked */\n  onConfirmationAction: () => void\n}) => {\n  const [isOpen, setIsOpen] = useState(open)\n\n  return (\n    <AlertDialogPrimitive\n      open={isOpen}\n      onOpenChange={open => {\n        setIsOpen(open)\n        onOpenChange(open)\n      }}\n    >\n      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>{title}</AlertDialogTitle>\n          <AlertDialogDescription>{description}</AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>{cancelButtonText}</AlertDialogCancel>\n          <AlertDialogAction onClick={onConfirmationAction}>\n            {confirmationButtonText}\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialogPrimitive>\n  )\n}\n"],"names":["AlertDialogAtom","children","title","description","cancelButtonText","confirmationButtonText","open","onOpenChange","onConfirmationAction","isOpen","setIsOpen","useState","jsxs","AlertDialogPrimitive","jsx","AlertDialogTrigger","AlertDialogContent","AlertDialogHeader","AlertDialogTitle","AlertDialogDescription","AlertDialogFooter","AlertDialogCancel","AlertDialogAction"],"mappings":";;;AAcO,MAAMA,IAAkB,CAAC;AAAA,EAC9B,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,sBAAAC;AACF,MAiBM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAASL,CAAI;AAGvC,SAAA,gBAAAM;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,MAAMJ;AAAA,MACN,cAAc,CAAAH,MAAQ;AACpB,QAAAI,EAAUJ,CAAI,GACdC,EAAaD,CAAI;AAAA,MACnB;AAAA,MAEA,UAAA;AAAA,QAAC,gBAAAQ,EAAAC,GAAA,EAAmB,SAAO,IAAE,UAAAd,EAAS,CAAA;AAAA,0BACrCe,GACC,EAAA,UAAA;AAAA,UAAA,gBAAAJ,EAACK,GACC,EAAA,UAAA;AAAA,YAAA,gBAAAH,EAACI,KAAkB,UAAMhB,EAAA,CAAA;AAAA,YACzB,gBAAAY,EAACK,KAAwB,UAAYhB,EAAA,CAAA;AAAA,UAAA,GACvC;AAAA,4BACCiB,GACC,EAAA,UAAA;AAAA,YAAA,gBAAAN,EAACO,KAAmB,UAAiBjB,EAAA,CAAA;AAAA,YACpC,gBAAAU,EAAAQ,GAAA,EAAkB,SAASd,GACzB,UACHH,EAAA,CAAA;AAAA,UAAA,EACF,CAAA;AAAA,QAAA,EACF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/atoms/thumbhash-image.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"thumbhash-image.js","sources":["../../../src/components/atoms/thumbhash-image.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport {ImgHTMLAttributes, useCallback, useMemo, memo, useState} from 'react'\n\nimport {cn} from '../../lib/utils'\nimport {getThumbhashDataURL} from '../../utils/image'\n\ntype ThumbhashImageProps = ImgHTMLAttributes<HTMLImageElement> & {\n  src: string\n  thumbhash: string\n  alt?: string | null\n  aspectRatio?: number | string\n}\n\nexport const ThumbhashImage = memo(function ThumbhashImage(\n  props: ThumbhashImageProps\n) {\n  const {\n    src,\n    alt,\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 dataURL = 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  return (\n    <div\n      className={cn('relative w-full ', className)}\n      style={{\n        ...style,\n        aspectRatio,\n        backgroundImage: dataURL ? `url(${dataURL})` : undefined,\n        backgroundSize: 'cover',\n        backgroundPosition: 'center',\n      }}\n    >\n      <img\n        className={cn(\n          'absolute inset-0 w-full h-full opacity-0 object-cover',\n          isLoaded && 'opacity-100'\n        )}\n        src={src}\n        alt={alt}\n        onLoad={handleLoad}\n        {...restProps}\n      />\n    </div>\n  )\n})\n"],"names":["ThumbhashImage","memo","props","src","alt","thumbhash","onLoad","className","style","aspectRatio","restProps","isLoaded","setIsLoaded","useState","dataURL","useMemo","getThumbhashDataURL","handleLoad","useCallback","event","jsx","cn"],"mappings":";;;;AAaO,MAAMA,IAAiBC,EAAK,SACjCC,GACA;AACM,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,KAAAC;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,GAExCC,IAAUC;AAAA,IACd,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;AAGE,SAAA,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,oBAAoBd,CAAS;AAAA,MAC3C,OAAO;AAAA,QACL,GAAGC;AAAA,QACH,aAAAC;AAAA,QACA,iBAAiBK,IAAU,OAAOA,CAAO,MAAM;AAAA,QAC/C,gBAAgB;AAAA,QAChB,oBAAoB;AAAA,MACtB;AAAA,MAEA,UAAA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC;AAAA,YACT;AAAA,YACAV,KAAY;AAAA,UACd;AAAA,UACA,KAAAR;AAAA,UACA,KAAAC;AAAA,UACA,QAAQa;AAAA,UACP,GAAGP;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;"}

package/dist/components/commerce/merchant-card-skeleton.js

@@ -0,0 +1,29 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { cn as s } from "../../lib/utils.js";
+import { Skeleton as l } from "../ui/skeleton.js";
+function i({
+  className: a,
+  ...m
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: s(
+        "relative w-full aspect-square overflow-hidden rounded-xl border border-gray-100",
+        a
+      ),
+      ...m,
+      children: [
+        /* @__PURE__ */ e("div", { className: "w-full h-2/3", children: /* @__PURE__ */ e(l, { className: "w-full h-full" }) }),
+        /* @__PURE__ */ r("div", { className: "mt-3 mb-3 ml-3", children: [
+          /* @__PURE__ */ e(l, { className: "mb-2 h-4 w-2/3" }),
+          /* @__PURE__ */ e(l, { className: "mb-2 h-5 w-1/3" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  i as MerchantCardSkeleton
+};
+//# sourceMappingURL=merchant-card-skeleton.js.map

package/dist/components/commerce/merchant-card-skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merchant-card-skeleton.js","sources":["../../../src/components/commerce/merchant-card-skeleton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {cn} from '../../lib/utils'\nimport {Skeleton} from '../ui/skeleton'\n\ninterface MerchantCardSkeletonProps extends React.ComponentProps<'div'> {}\n\nfunction MerchantCardSkeleton({\n  className,\n  ...props\n}: MerchantCardSkeletonProps) {\n  return (\n    <div\n      className={cn(\n        'relative w-full aspect-square overflow-hidden rounded-xl border border-gray-100',\n        className\n      )}\n      {...props}\n    >\n      <div className=\"w-full h-2/3\">\n        <Skeleton className=\"w-full h-full\" />\n      </div>\n      <div className=\"mt-3 mb-3 ml-3\">\n        <Skeleton className=\"mb-2 h-4 w-2/3\" />\n        <Skeleton className=\"mb-2 h-5 w-1/3\" />\n      </div>\n    </div>\n  )\n}\n\nexport {MerchantCardSkeleton}\n"],"names":["MerchantCardSkeleton","className","props","jsxs","cn","jsx","Skeleton"],"mappings":";;;AAOA,SAASA,EAAqB;AAAA,EAC5B,WAAAC;AAAA,EACA,GAAGC;AACL,GAA8B;AAE1B,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MACF;AAAA,MACC,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAG,EAAC,SAAI,WAAU,gBACb,4BAACC,GAAS,EAAA,WAAU,iBAAgB,EACtC,CAAA;AAAA,QACA,gBAAAH,EAAC,OAAI,EAAA,WAAU,kBACb,UAAA;AAAA,UAAC,gBAAAE,EAAAC,GAAA,EAAS,WAAU,iBAAiB,CAAA;AAAA,UACrC,gBAAAD,EAACC,GAAS,EAAA,WAAU,iBAAiB,CAAA;AAAA,QAAA,EACvC,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/commerce/merchant-card.js

@@ -26,7 +26,7 @@ function j(e) {
 function S(e) {
   return Math.round(e * 10) / 10;
 }
-function d({
+function m({
   className: e,
   touchable: a = !0,
   asChild: t = !1,
@@ -52,7 +52,7 @@ function d({
     }
   ) : c;
 }
-function m({
+function f({
   className: e,
   ...a
 }) {
@@ -65,7 +65,7 @@ function m({
     }
   );
 }
-function f({
+function u({
   className: e,
   src: a,
   alt: t,
@@ -82,7 +82,7 @@ function f({
     }
   ) : /* @__PURE__ */ r("div", { className: "w-full h-full bg-grayscale-l10" });
 }
-function u({
+function h({
   className: e,
   src: a,
   alt: t,
@@ -103,7 +103,7 @@ function u({
     }
   );
 }
-function h({ className: e, ...a }) {
+function g({ className: e, ...a }) {
   return /* @__PURE__ */ r(
     "div",
     {
@@ -113,7 +113,7 @@ function h({ className: e, ...a }) {
     }
   );
 }
-function g({
+function p({
   className: e,
   children: a,
   ...t
@@ -132,7 +132,7 @@ function g({
     }
   );
 }
-function p({
+function v({
   className: e,
   rating: a,
   reviewCount: t,
@@ -164,34 +164,40 @@ function q({ shop: e, touchable: a = !0 }) {
     id: n,
     name: l,
     reviewAnalytics: { averageRating: s, reviewCount: c },
-    visualTheme: v
+    visualTheme: d
   } = e, w = C.useCallback(() => {
     a && t({ shopId: n });
   }, [t, n, a]);
-  return /* @__PURE__ */ i(d, { touchable: a, onPress: w, children: [
-    /* @__PURE__ */ i(m, { children: [
-      /* @__PURE__ */ r(f, { src: void 0, alt: `${l} featured image` }),
+  return /* @__PURE__ */ i(m, { touchable: a, onPress: w, children: [
+    /* @__PURE__ */ i(f, { children: [
       /* @__PURE__ */ r(
         u,
         {
-          src: v?.logoImage?.url,
+          src: d?.featuredImages?.[0]?.url,
+          alt: `${l} featured image`
+        }
+      ),
+      /* @__PURE__ */ r(
+        h,
+        {
+          src: d?.logoImage?.url,
           alt: `${l} logo`
         }
       )
     ] }),
-    /* @__PURE__ */ i(h, { children: [
-      /* @__PURE__ */ r(g, { children: l }),
-      /* @__PURE__ */ r(p, { rating: s, reviewCount: c })
+    /* @__PURE__ */ i(g, { children: [
+      /* @__PURE__ */ r(p, { children: l }),
+      /* @__PURE__ */ r(v, { rating: s, reviewCount: c })
     ] })
   ] });
 }
-const z = Object.assign(d, {
-  ImageContainer: m,
-  Image: f,
-  Logo: u,
-  Info: h,
-  Name: g,
-  Rating: p
+const z = Object.assign(m, {
+  ImageContainer: f,
+  Image: u,
+  Logo: h,
+  Info: g,
+  Name: p,
+  Rating: v
 });
 export {
   q as MerchantCard,

package/dist/components/commerce/merchant-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"merchant-card.js","sources":["../../../src/components/commerce/merchant-card.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {type Shop} from '@shopify/shop-minis-platform'\nimport {cva, type VariantProps} from 'class-variance-authority'\nimport {Star} from 'lucide-react'\nimport {Slot as SlotPrimitive} from 'radix-ui'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {cn} from '../../lib/utils'\nimport {Touchable} from '../atoms/touchable'\n\nconst merchantCardVariants = cva(\n  'relative w-full aspect-square overflow-hidden rounded-xl border border-grayscale-l20 bg-grayscale-l0 flex flex-col',\n  {\n    variants: {\n      touchable: {\n        true: 'cursor-pointer',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      touchable: true,\n    },\n  }\n)\n\nfunction formatReviewCount(count: number): string {\n  if (count >= 1000000) {\n    return `${Math.floor(count / 100000) / 10}M`\n  }\n  if (count >= 1000) {\n    return `${Math.floor(count / 1000)}K`\n  }\n  return count.toString()\n}\n\nfunction normalizeRating(rating: number): number {\n  return Math.round(rating * 10) / 10\n}\n\nexport interface MerchantCardRootProps\n  extends React.ComponentProps<'div'>,\n    VariantProps<typeof merchantCardVariants> {\n  touchable?: boolean\n  asChild?: boolean\n  onPress?: () => void\n}\n\nfunction MerchantCardRoot({\n  className,\n  touchable = true,\n  asChild = false,\n  onPress,\n  ...props\n}: MerchantCardRootProps) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'div'\n\n  const content = (\n    <Comp\n      className={cn(merchantCardVariants({touchable}), className)}\n      {...props}\n    />\n  )\n\n  if (touchable && onPress) {\n    return (\n      <Touchable\n        onClick={onPress}\n        whileTap={{opacity: 0.7}}\n        transition={{\n          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n        }}\n      >\n        {content}\n      </Touchable>\n    )\n  }\n\n  return content\n}\n\nfunction MerchantCardImageContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"merchant-card-image-container\"\n      className={cn('relative overflow-hidden w-full flex-grow', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MerchantCardImage({\n  className,\n  src,\n  alt,\n  ...props\n}: React.ComponentProps<'img'> & {\n  src?: string\n  alt?: string\n}) {\n  return src ? (\n    <img\n      data-slot=\"merchant-card-image\"\n      src={src}\n      alt={alt}\n      className={cn('w-full h-full object-cover', className)}\n      {...props}\n    />\n  ) : (\n    <div className=\"w-full h-full bg-grayscale-l10\" />\n  )\n}\n\nfunction MerchantCardLogo({\n  className,\n  src,\n  alt,\n  ...props\n}: React.ComponentProps<'div'> & {\n  src?: string\n  alt?: string\n}) {\n  return (\n    <div\n      data-slot=\"merchant-card-logo\"\n      className={cn(\n        'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n        'w-14 h-14 rounded-xl',\n        'flex items-center justify-center overflow-hidden',\n        className\n      )}\n      {...props}\n    >\n      {src ? (\n        <img src={src} alt={alt} className=\"w-full h-full object-cover\" />\n      ) : (\n        <div className=\"w-full h-full bg-grayscale-l20\" />\n      )}\n    </div>\n  )\n}\n\nfunction MerchantCardInfo({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"merchant-card-info\"\n      className={cn('p-3 space-y-1 flex-shrink-0', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MerchantCardName({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  return (\n    <h3\n      data-slot=\"merchant-card-name\"\n      className={cn(\n        'text-sm font-medium text-grayscale-d100',\n        'truncate overflow-hidden whitespace-nowrap text-ellipsis',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </h3>\n  )\n}\n\nfunction MerchantCardRating({\n  className,\n  rating,\n  reviewCount,\n  ...props\n}: React.ComponentProps<'div'> & {\n  rating?: number | null\n  reviewCount?: number\n}) {\n  if (!rating || !reviewCount) return null\n\n  return (\n    <div\n      data-slot=\"merchant-card-rating\"\n      className={cn(\n        'flex items-center gap-1 text-sm text-grayscale-d100',\n        className\n      )}\n      {...props}\n    >\n      <Star className=\"h-3.5 w-3.5 fill-current\" />\n      <>\n        {normalizeRating(rating)} ({formatReviewCount(reviewCount)})\n      </>\n    </div>\n  )\n}\n\nexport interface MerchantCardProps {\n  shop: Shop\n  touchable?: boolean\n}\n\n// Composed MerchantCard component\nfunction MerchantCard({shop, touchable = true}: MerchantCardProps) {\n  const {navigateToShop} = useShopNavigation()\n\n  const {\n    id,\n    name,\n    reviewAnalytics: {averageRating, reviewCount},\n    visualTheme,\n  } = shop\n\n  const handlePress = React.useCallback(() => {\n    if (!touchable) return\n    navigateToShop({shopId: id})\n  }, [navigateToShop, id, touchable])\n\n  return (\n    <MerchantCardRoot touchable={touchable} onPress={handlePress}>\n      <MerchantCardImageContainer>\n        {/* TODO: Add featured image */}\n        <MerchantCardImage src={undefined} alt={`${name} featured image`} />\n        <MerchantCardLogo\n          src={visualTheme?.logoImage?.url}\n          alt={`${name} logo`}\n        />\n      </MerchantCardImageContainer>\n\n      <MerchantCardInfo>\n        <MerchantCardName>{name}</MerchantCardName>\n        <MerchantCardRating rating={averageRating} reviewCount={reviewCount} />\n      </MerchantCardInfo>\n    </MerchantCardRoot>\n  )\n}\n\nexport const MerchantCardPrimitive = Object.assign(MerchantCardRoot, {\n  ImageContainer: MerchantCardImageContainer,\n  Image: MerchantCardImage,\n  Logo: MerchantCardLogo,\n  Info: MerchantCardInfo,\n  Name: MerchantCardName,\n  Rating: MerchantCardRating,\n})\n\nexport {MerchantCard}\n"],"names":["merchantCardVariants","cva","formatReviewCount","count","normalizeRating","rating","MerchantCardRoot","className","touchable","asChild","onPress","props","content","jsx","SlotPrimitive.Slot","cn","Touchable","MerchantCardImageContainer","MerchantCardImage","src","alt","MerchantCardLogo","MerchantCardInfo","MerchantCardName","children","MerchantCardRating","reviewCount","jsxs","Star","Fragment","MerchantCard","shop","navigateToShop","useShopNavigation","id","name","averageRating","visualTheme","handlePress","React","MerchantCardPrimitive"],"mappings":"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"}
+{"version":3,"file":"merchant-card.js","sources":["../../../src/components/commerce/merchant-card.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {type Shop} from '@shopify/shop-minis-platform'\nimport {cva, type VariantProps} from 'class-variance-authority'\nimport {Star} from 'lucide-react'\nimport {Slot as SlotPrimitive} from 'radix-ui'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {cn} from '../../lib/utils'\nimport {Touchable} from '../atoms/touchable'\n\nconst merchantCardVariants = cva(\n  'relative w-full aspect-square overflow-hidden rounded-xl border border-grayscale-l20 bg-grayscale-l0 flex flex-col',\n  {\n    variants: {\n      touchable: {\n        true: 'cursor-pointer',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      touchable: true,\n    },\n  }\n)\n\nfunction formatReviewCount(count: number): string {\n  if (count >= 1000000) {\n    return `${Math.floor(count / 100000) / 10}M`\n  }\n  if (count >= 1000) {\n    return `${Math.floor(count / 1000)}K`\n  }\n  return count.toString()\n}\n\nfunction normalizeRating(rating: number): number {\n  return Math.round(rating * 10) / 10\n}\n\nexport interface MerchantCardRootProps\n  extends React.ComponentProps<'div'>,\n    VariantProps<typeof merchantCardVariants> {\n  touchable?: boolean\n  asChild?: boolean\n  onPress?: () => void\n}\n\nfunction MerchantCardRoot({\n  className,\n  touchable = true,\n  asChild = false,\n  onPress,\n  ...props\n}: MerchantCardRootProps) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'div'\n\n  const content = (\n    <Comp\n      className={cn(merchantCardVariants({touchable}), className)}\n      {...props}\n    />\n  )\n\n  if (touchable && onPress) {\n    return (\n      <Touchable\n        onClick={onPress}\n        whileTap={{opacity: 0.7}}\n        transition={{\n          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n        }}\n      >\n        {content}\n      </Touchable>\n    )\n  }\n\n  return content\n}\n\nfunction MerchantCardImageContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"merchant-card-image-container\"\n      className={cn('relative overflow-hidden w-full flex-grow', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MerchantCardImage({\n  className,\n  src,\n  alt,\n  ...props\n}: React.ComponentProps<'img'> & {\n  src?: string\n  alt?: string\n}) {\n  return src ? (\n    <img\n      data-slot=\"merchant-card-image\"\n      src={src}\n      alt={alt}\n      className={cn('w-full h-full object-cover', className)}\n      {...props}\n    />\n  ) : (\n    <div className=\"w-full h-full bg-grayscale-l10\" />\n  )\n}\n\nfunction MerchantCardLogo({\n  className,\n  src,\n  alt,\n  ...props\n}: React.ComponentProps<'div'> & {\n  src?: string\n  alt?: string\n}) {\n  return (\n    <div\n      data-slot=\"merchant-card-logo\"\n      className={cn(\n        'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n        'w-14 h-14 rounded-xl',\n        'flex items-center justify-center overflow-hidden',\n        className\n      )}\n      {...props}\n    >\n      {src ? (\n        <img src={src} alt={alt} className=\"w-full h-full object-cover\" />\n      ) : (\n        <div className=\"w-full h-full bg-grayscale-l20\" />\n      )}\n    </div>\n  )\n}\n\nfunction MerchantCardInfo({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"merchant-card-info\"\n      className={cn('p-3 space-y-1 flex-shrink-0', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MerchantCardName({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  return (\n    <h3\n      data-slot=\"merchant-card-name\"\n      className={cn(\n        'text-sm font-medium text-grayscale-d100',\n        'truncate overflow-hidden whitespace-nowrap text-ellipsis',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </h3>\n  )\n}\n\nfunction MerchantCardRating({\n  className,\n  rating,\n  reviewCount,\n  ...props\n}: React.ComponentProps<'div'> & {\n  rating?: number | null\n  reviewCount?: number\n}) {\n  if (!rating || !reviewCount) return null\n\n  return (\n    <div\n      data-slot=\"merchant-card-rating\"\n      className={cn(\n        'flex items-center gap-1 text-sm text-grayscale-d100',\n        className\n      )}\n      {...props}\n    >\n      <Star className=\"h-3.5 w-3.5 fill-current\" />\n      <>\n        {normalizeRating(rating)} ({formatReviewCount(reviewCount)})\n      </>\n    </div>\n  )\n}\n\nexport interface MerchantCardProps {\n  variant?: 'default' | 'compact'\n  shop: Shop\n  touchable?: boolean\n}\n\n// Composed MerchantCard component\nfunction MerchantCard({shop, touchable = true}: MerchantCardProps) {\n  const {navigateToShop} = useShopNavigation()\n\n  const {\n    id,\n    name,\n    reviewAnalytics: {averageRating, reviewCount},\n    visualTheme,\n  } = shop\n\n  const handlePress = React.useCallback(() => {\n    if (!touchable) return\n    navigateToShop({shopId: id})\n  }, [navigateToShop, id, touchable])\n\n  return (\n    <MerchantCardRoot touchable={touchable} onPress={handlePress}>\n      <MerchantCardImageContainer>\n        <MerchantCardImage\n          src={visualTheme?.featuredImages?.[0]?.url}\n          alt={`${name} featured image`}\n        />\n        <MerchantCardLogo\n          src={visualTheme?.logoImage?.url}\n          alt={`${name} logo`}\n        />\n      </MerchantCardImageContainer>\n\n      <MerchantCardInfo>\n        <MerchantCardName>{name}</MerchantCardName>\n        <MerchantCardRating rating={averageRating} reviewCount={reviewCount} />\n      </MerchantCardInfo>\n    </MerchantCardRoot>\n  )\n}\n\nexport const MerchantCardPrimitive = Object.assign(MerchantCardRoot, {\n  ImageContainer: MerchantCardImageContainer,\n  Image: MerchantCardImage,\n  Logo: MerchantCardLogo,\n  Info: MerchantCardInfo,\n  Name: MerchantCardName,\n  Rating: MerchantCardRating,\n})\n\nexport {MerchantCard}\n"],"names":["merchantCardVariants","cva","formatReviewCount","count","normalizeRating","rating","MerchantCardRoot","className","touchable","asChild","onPress","props","content","jsx","SlotPrimitive.Slot","cn","Touchable","MerchantCardImageContainer","MerchantCardImage","src","alt","MerchantCardLogo","MerchantCardInfo","MerchantCardName","children","MerchantCardRating","reviewCount","jsxs","Star","Fragment","MerchantCard","shop","navigateToShop","useShopNavigation","id","name","averageRating","visualTheme","handlePress","React","MerchantCardPrimitive"],"mappings":"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"}

package/dist/components/commerce/product-card-skeleton.js

@@ -0,0 +1,20 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { cn as m } from "../../lib/utils.js";
+import { Skeleton as l } from "../ui/skeleton.js";
+function i({
+  className: a,
+  variant: s = "default",
+  ...d
+}) {
+  return /* @__PURE__ */ r("div", { className: m("relative w-full", a), ...d, children: [
+    /* @__PURE__ */ e("div", { className: "aspect-square w-full overflow-hidden rounded-xl border border-gray-100", children: /* @__PURE__ */ e(l, { className: "h-full w-full" }) }),
+    s === "default" ? /* @__PURE__ */ r("div", { className: "mt-3 mb-3", children: [
+      /* @__PURE__ */ e(l, { className: "mb-2 h-4 w-2/3" }),
+      /* @__PURE__ */ e(l, { className: "mb-2 h-5 w-1/3" })
+    ] }) : null
+  ] });
+}
+export {
+  i as ProductCardSkeleton
+};
+//# sourceMappingURL=product-card-skeleton.js.map

package/dist/components/commerce/product-card-skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-card-skeleton.js","sources":["../../../src/components/commerce/product-card-skeleton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {cn} from '../../lib/utils'\nimport {Skeleton} from '../ui/skeleton'\n\ninterface ProductCardSkeletonProps extends React.ComponentProps<'div'> {\n  variant?: 'default' | 'priceOverlay' | 'compact'\n}\n\nfunction ProductCardSkeleton({\n  className,\n  variant = 'default',\n  ...props\n}: ProductCardSkeletonProps) {\n  return (\n    <div className={cn('relative w-full', className)} {...props}>\n      <div className=\"aspect-square w-full overflow-hidden rounded-xl border border-gray-100\">\n        <Skeleton className=\"h-full w-full\" />\n      </div>\n      {variant === 'default' ? (\n        <div className=\"mt-3 mb-3\">\n          <Skeleton className=\"mb-2 h-4 w-2/3\" />\n          <Skeleton className=\"mb-2 h-5 w-1/3\" />\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport {ProductCardSkeleton}\n"],"names":["ProductCardSkeleton","className","variant","props","jsxs","cn","jsx","Skeleton"],"mappings":";;;AASA,SAASA,EAAoB;AAAA,EAC3B,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,GAA6B;AAEzB,SAAA,gBAAAC,EAAC,SAAI,WAAWC,EAAG,mBAAmBJ,CAAS,GAAI,GAAGE,GACpD,UAAA;AAAA,IAAA,gBAAAG,EAAC,SAAI,WAAU,0EACb,4BAACC,GAAS,EAAA,WAAU,iBAAgB,EACtC,CAAA;AAAA,IACCL,MAAY,YACV,gBAAAE,EAAA,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,MAAC,gBAAAE,EAAAC,GAAA,EAAS,WAAU,iBAAiB,CAAA;AAAA,MACrC,gBAAAD,EAACC,GAAS,EAAA,WAAU,iBAAiB,CAAA;AAAA,IAAA,EAAA,CACvC,IACE;AAAA,EAAA,GACN;AAEJ;"}