@shopify/shop-minis-react 0.0.21 → 0.0.23

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

@@ -1,13 +1,16 @@
-import { jsxs as i, jsx as r, Fragment as x } from "react/jsx-runtime";
-import * as C from "react";
-import { cva as N } from "../../shop-minis-react/node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { useShopNavigation as y } from "../../hooks/navigation/useShopNavigation.js";
-import { cn as o } from "../../lib/utils.js";
-import { Touchable as M } from "../atoms/touchable.js";
-import b from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/star.js";
-import { Root as I } from "../../shop-minis-react/node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.js";
-const R = N(
-  "relative w-full aspect-square overflow-hidden rounded-xl border border-grayscale-l20 bg-grayscale-l0 flex flex-col",
+import { jsx as e, jsxs as i, Fragment as w } from "react/jsx-runtime";
+import * as d from "react";
+import { cva as F } from "../../shop-minis-react/node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { useShopNavigation as O } from "../../hooks/navigation/useShopNavigation.js";
+import { cn as l } from "../../lib/utils.js";
+import { isDarkColor as N } from "../../utils/colors.js";
+import { ThumbhashImage as H } from "../atoms/thumbhash-image.js";
+import { Touchable as P } from "../atoms/touchable.js";
+import { getFeaturedImages as V, extractBrandTheme as q, normalizeRating as L, formatReviewCount as U } from "../../utils/merchant-card.js";
+import E from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/star.js";
+import { Root as G } from "../../shop-minis-react/node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.js";
+const J = F(
+  "relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200",
   {
     variants: {
       touchable: {
@@ -20,187 +23,314 @@ const R = N(
     }
   }
 );
-function j(e) {
-  return e >= 1e6 ? `${Math.floor(e / 1e5) / 10}M` : e >= 1e3 ? `${Math.floor(e / 1e3)}K` : e.toString();
-}
-function S(e) {
-  return Math.round(e * 10) / 10;
-}
-function m({
-  className: e,
+function C({
+  className: t,
   touchable: a = !0,
-  asChild: t = !1,
-  onPress: n,
-  ...l
+  asChild: r = !1,
+  onPress: o,
+  ...n
 }) {
-  const c = /* @__PURE__ */ r(
-    t ? I : "div",
+  const m = /* @__PURE__ */ e(
+    r ? G : "div",
     {
-      className: o(R({ touchable: a }), e),
-      ...l
+      className: l(J({ touchable: a }), t),
+      ...n
     }
   );
-  return a && n ? /* @__PURE__ */ r(
-    M,
+  return a && o ? /* @__PURE__ */ e(
+    P,
     {
-      onClick: n,
+      onClick: o,
       whileTap: { opacity: 0.7 },
       transition: {
         opacity: { type: "tween", duration: 0.08, ease: "easeInOut" }
       },
-      children: c
+      children: m
     }
-  ) : c;
+  ) : m;
 }
-function f({
-  className: e,
+function y({
+  className: t,
   ...a
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "merchant-card-image-container",
-      className: o("relative overflow-hidden w-full flex-grow", e),
+      className: l("relative overflow-hidden w-full flex-grow", t),
       ...a
     }
   );
 }
-function u({
-  className: e,
+function g({
+  className: t,
   src: a,
-  alt: t,
+  alt: r,
+  thumbhash: o,
   ...n
 }) {
-  return a ? /* @__PURE__ */ r(
+  return a ? o ? /* @__PURE__ */ e(
+    H,
+    {
+      "data-slot": "merchant-card-image",
+      src: a,
+      alt: r,
+      thumbhash: o,
+      className: l("w-full h-full object-cover", t),
+      ...n
+    }
+  ) : /* @__PURE__ */ e(
     "img",
     {
       "data-slot": "merchant-card-image",
       src: a,
-      alt: t,
-      className: o("w-full h-full object-cover", e),
+      alt: r,
+      className: l("w-full h-full object-cover", t),
       ...n
     }
-  ) : /* @__PURE__ */ r("div", { className: "w-full h-full bg-grayscale-l10" });
+  ) : /* @__PURE__ */ e("div", { className: "w-full h-full bg-gray-100" });
 }
-function h({
-  className: e,
+function v({
+  className: t,
   src: a,
-  alt: t,
+  alt: r,
+  shopName: o,
   ...n
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "merchant-card-logo",
-      className: o(
-        "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
-        "w-14 h-14 rounded-xl",
+      className: l(
+        "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10",
+        "w-16 h-16 rounded-xl bg-white border-2 border-white shadow-sm",
         "flex items-center justify-center overflow-hidden",
-        e
+        t
       ),
       ...n,
-      children: a ? /* @__PURE__ */ r("img", { src: a, alt: t, className: "w-full h-full object-cover" }) : /* @__PURE__ */ r("div", { className: "w-full h-full bg-grayscale-l20" })
+      children: a ? /* @__PURE__ */ e("img", { src: a, alt: r, className: "w-full h-full object-cover" }) : /* @__PURE__ */ e("div", { className: "w-full h-full bg-gray-200 flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-gray-600 font-semibold text-lg", children: o?.slice(0, 1) }) })
     }
   );
 }
-function g({ className: e, ...a }) {
-  return /* @__PURE__ */ r(
+function k({ className: t, ...a }) {
+  return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "merchant-card-info",
-      className: o("p-3 space-y-1 flex-shrink-0", e),
+      className: l(
+        "p-3 space-y-2 flex-shrink-0 flex items-center justify-between",
+        t
+      ),
       ...a
     }
   );
 }
-function p({
-  className: e,
+function I({
+  className: t,
   children: a,
-  ...t
+  ...r
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ e(
     "h3",
     {
       "data-slot": "merchant-card-name",
-      className: o(
+      className: l(
         "text-sm font-medium text-grayscale-d100",
         "truncate overflow-hidden whitespace-nowrap text-ellipsis",
-        e
+        t
       ),
-      ...t,
+      ...r,
       children: a
     }
   );
 }
-function v({
-  className: e,
+function M({
+  className: t,
   rating: a,
-  reviewCount: t,
-  ...n
+  reviewCount: r,
+  ...o
 }) {
-  return !a || !t ? null : /* @__PURE__ */ i(
+  return !a || !r ? null : /* @__PURE__ */ i(
     "div",
     {
       "data-slot": "merchant-card-rating",
-      className: o(
-        "flex items-center gap-1 text-sm text-grayscale-d100",
-        e
-      ),
-      ...n,
+      className: l("flex items-center gap-1 text-xs", t),
+      ...o,
       children: [
-        /* @__PURE__ */ r(b, { className: "h-3.5 w-3.5 fill-current" }),
-        /* @__PURE__ */ i(x, { children: [
-          S(a),
+        /* @__PURE__ */ e(E, { className: "h-3 w-3 fill-current" }),
+        /* @__PURE__ */ i("span", { className: "text-xs", children: [
+          L(a),
           " (",
-          j(t),
+          U(r),
           ")"
         ] })
       ]
     }
   );
 }
-function q({ shop: e, touchable: a = !0 }) {
-  const { navigateToShop: t } = y(), {
-    id: n,
-    name: l,
-    reviewAnalytics: { averageRating: s, reviewCount: c },
-    visualTheme: d
-  } = e, w = C.useCallback(() => {
-    a && t({ shopId: n });
-  }, [t, n, a]);
-  return /* @__PURE__ */ i(m, { touchable: a, onPress: w, children: [
-    /* @__PURE__ */ i(f, { children: [
-      /* @__PURE__ */ r(
-        u,
+function j({
+  shop: t,
+  cardTheme: a,
+  logoBackgroundClassName: r
+}) {
+  const o = t.visualTheme?.brandSettings?.headerTheme?.wordmark;
+  return /* @__PURE__ */ i("div", { className: "size-full relative", children: [
+    a.type === "coverImage" && /* @__PURE__ */ i(w, { children: [
+      /* @__PURE__ */ e(
+        g,
         {
-          src: d?.featuredImages?.[0]?.url,
-          alt: `${l} featured image`
+          src: a.coverImageUrl,
+          alt: t.name,
+          thumbhash: a.coverImageThumbhash ?? void 0,
+          className: "size-full"
         }
       ),
-      /* @__PURE__ */ r(
-        h,
+      /* @__PURE__ */ e("div", { className: "absolute inset-0 z-[1] bg-black/20" }),
+      /* @__PURE__ */ e(
+        "div",
         {
-          src: d?.logoImage?.url,
-          alt: `${l} logo`
+          className: "absolute bottom-0 z-[1] size-full",
+          style: {
+            background: `linear-gradient(to top, ${a.backgroundColor} 0%, ${a.backgroundColor}00 40%)`
+          }
         }
       )
     ] }),
-    /* @__PURE__ */ i(g, { children: [
-      /* @__PURE__ */ r(p, { children: l }),
-      /* @__PURE__ */ r(v, { rating: s, reviewCount: c })
-    ] })
+    /* @__PURE__ */ e("div", { className: "absolute inset-0 z-[1] flex items-center justify-center", children: o ? /* @__PURE__ */ e(
+      "img",
+      {
+        src: o.url,
+        alt: o.altText || t.name,
+        className: "max-h-16 min-h-10 max-w-28 object-contain",
+        "data-testid": "store-data-wordmark"
+      }
+    ) : /* @__PURE__ */ e(
+      v,
+      {
+        src: t.visualTheme?.logoImage?.url,
+        alt: `${t.name} logo`,
+        shopName: t.name,
+        className: r
+      }
+    ) })
   ] });
 }
-const z = Object.assign(m, {
-  ImageContainer: f,
-  Image: u,
-  Logo: h,
-  Info: g,
-  Name: p,
-  Rating: v
+function oe({
+  shop: t,
+  touchable: a = !0,
+  fixedHeight: r = !1,
+  featuredImagesLimit: o = 4
+}) {
+  const { navigateToShop: n } = O(), {
+    id: f,
+    name: m,
+    reviewAnalytics: { averageRating: T, reviewCount: z },
+    visualTheme: s
+  } = t, S = d.useCallback(() => {
+    a && n({ shopId: f });
+  }, [n, f, a]), b = d.useMemo(
+    () => V(s, o),
+    [s, o]
+  ), R = b?.length ?? 0, B = s?.brandSettings?.colors?.logoAverage, D = s?.brandSettings?.colors?.logoDominant, h = B || D, x = d.useMemo(
+    () => h && N(h) ? "bg-white" : "bg-gray-800",
+    [h]
+  ), c = d.useMemo(
+    () => q(s?.brandSettings),
+    [s?.brandSettings]
+  ), p = d.useMemo(() => c.backgroundColor !== "white" && N(c.backgroundColor), [c.backgroundColor]) ? "text-primary-foreground" : "text-foreground", $ = c.type === "coverImage" || c.type === "brandColor";
+  return /* @__PURE__ */ e("div", { className: l("flex", r ? "" : "aspect-square"), children: /* @__PURE__ */ i(
+    C,
+    {
+      touchable: a,
+      onPress: S,
+      style: {
+        backgroundColor: c.backgroundColor
+      },
+      children: [
+        /* @__PURE__ */ e(
+          y,
+          {
+            className: l(
+              "relative overflow-hidden w-full",
+              r ? "h-[120px]" : "flex-1"
+            ),
+            children: $ ? /* @__PURE__ */ e(
+              j,
+              {
+                shop: t,
+                cardTheme: c,
+                logoBackgroundClassName: x
+              }
+            ) : /* @__PURE__ */ i(w, { children: [
+              /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10", children: /* @__PURE__ */ e(
+                v,
+                {
+                  src: s?.logoImage?.url,
+                  alt: `${m} logo`,
+                  shopName: m,
+                  className: x,
+                  "data-testid": "merchant-logo"
+                }
+              ) }),
+              R > 0 ? b?.map((u, A) => /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "z-0 flex h-full flex-1",
+                  children: /* @__PURE__ */ e(
+                    g,
+                    {
+                      src: u.url,
+                      alt: u.altText || "",
+                      thumbhash: u.thumbhash ?? void 0
+                    }
+                  )
+                },
+                u.url || A
+              )) : /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "h-20 bg-gray-100",
+                  "data-testid": "image-fallback"
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ e(k, { className: "flex items-center justify-between p-3", children: /* @__PURE__ */ e("div", { className: "flex flex-col items-start gap-2", children: /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ e(
+            I,
+            {
+              className: l(
+                "line-clamp-1 overflow-hidden text-ellipsis",
+                p
+              ),
+              children: m
+            }
+          ),
+          /* @__PURE__ */ e(
+            M,
+            {
+              rating: T,
+              reviewCount: z,
+              className: p
+            }
+          )
+        ] }) }) })
+      ]
+    }
+  ) });
+}
+const le = Object.assign(C, {
+  ImageContainer: y,
+  Image: g,
+  Logo: v,
+  Info: k,
+  Name: I,
+  Rating: M,
+  BrandedHeader: j
 });
 export {
-  q as MerchantCard,
-  z as MerchantCardPrimitive
+  oe as MerchantCard,
+  le as MerchantCardPrimitive
 };
 //# sourceMappingURL=merchant-card.js.map

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  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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"}
+{"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 {\n  type ExtractedBrandTheme,\n  extractBrandTheme,\n  formatReviewCount,\n  getFeaturedImages,\n  normalizeRating,\n} from '../../utils'\nimport {isDarkColor} from '../../utils/colors'\nimport {ThumbhashImage} from '../atoms/thumbhash-image'\nimport {Touchable} from '../atoms/touchable'\n\nconst merchantCardVariants = cva(\n  'relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200',\n  {\n    variants: {\n      touchable: {\n        true: 'cursor-pointer',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      touchable: true,\n    },\n  }\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  thumbhash,\n  ...props\n}: React.ComponentProps<'img'> & {\n  src?: string\n  alt?: string\n  thumbhash?: string\n}) {\n  if (!src) {\n    return <div className=\"w-full h-full bg-gray-100\" />\n  }\n\n  if (thumbhash) {\n    return (\n      <ThumbhashImage\n        data-slot=\"merchant-card-image\"\n        src={src}\n        alt={alt}\n        thumbhash={thumbhash}\n        className={cn('w-full h-full object-cover', className)}\n        {...props}\n      />\n    )\n  }\n\n  return (\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}\n\nfunction MerchantCardLogo({\n  className,\n  src,\n  alt,\n  shopName,\n  ...props\n}: React.ComponentProps<'div'> & {\n  src?: string\n  alt?: string\n  shopName?: 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 z-10',\n        'w-16 h-16 rounded-xl bg-white border-2 border-white shadow-sm',\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-gray-200 flex items-center justify-center\">\n          <span className=\"text-gray-600 font-semibold text-lg\">\n            {shopName?.slice(0, 1)}\n          </span>\n        </div>\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(\n        'p-3 space-y-2 flex-shrink-0 flex items-center justify-between',\n        className\n      )}\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('flex items-center gap-1 text-xs', className)}\n      {...props}\n    >\n      <Star className=\"h-3 w-3 fill-current\" />\n      <span className=\"text-xs\">\n        {normalizeRating(rating)} ({formatReviewCount(reviewCount)})\n      </span>\n    </div>\n  )\n}\n\nfunction MerchantCardBrandedHeader({\n  shop,\n  cardTheme,\n  logoBackgroundClassName,\n}: {\n  shop: Shop\n  cardTheme: ExtractedBrandTheme\n  logoBackgroundClassName?: string\n}) {\n  const wordmarkImage = shop.visualTheme?.brandSettings?.headerTheme?.wordmark\n\n  return (\n    <div className=\"size-full relative\">\n      {cardTheme.type === 'coverImage' && (\n        <>\n          <MerchantCardImage\n            src={cardTheme.coverImageUrl}\n            alt={shop.name}\n            thumbhash={cardTheme.coverImageThumbhash ?? undefined}\n            className=\"size-full\"\n          />\n\n          <div className=\"absolute inset-0 z-[1] bg-black/20\" />\n\n          <div\n            className=\"absolute bottom-0 z-[1] size-full\"\n            style={{\n              background: `linear-gradient(to top, ${cardTheme.backgroundColor} 0%, ${cardTheme.backgroundColor}00 40%)`,\n            }}\n          />\n        </>\n      )}\n\n      <div className=\"absolute inset-0 z-[1] flex items-center justify-center\">\n        {wordmarkImage ? (\n          <img\n            src={wordmarkImage.url}\n            alt={wordmarkImage.altText || shop.name}\n            className=\"max-h-16 min-h-10 max-w-28 object-contain\"\n            data-testid=\"store-data-wordmark\"\n          />\n        ) : (\n          <MerchantCardLogo\n            src={shop.visualTheme?.logoImage?.url}\n            alt={`${shop.name} logo`}\n            shopName={shop.name}\n            className={logoBackgroundClassName}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\nexport interface MerchantCardProps {\n  shop: Shop\n  touchable?: boolean\n  fixedHeight?: boolean\n  featuredImagesLimit?: number\n}\n\nfunction MerchantCard({\n  shop,\n  touchable = true,\n  fixedHeight = false,\n  featuredImagesLimit = 4,\n}: 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  const featuredImages = React.useMemo(\n    () => getFeaturedImages(visualTheme, featuredImagesLimit),\n    [visualTheme, featuredImagesLimit]\n  )\n\n  const numberOfFeaturedImages = featuredImages?.length ?? 0\n\n  const logoAverageColor = visualTheme?.brandSettings?.colors?.logoAverage\n  const logoDominantColor = visualTheme?.brandSettings?.colors?.logoDominant\n  const logoColor = logoAverageColor || logoDominantColor\n\n  const logoBackgroundClassName = React.useMemo(\n    () => (logoColor && isDarkColor(logoColor) ? 'bg-white' : 'bg-gray-800'),\n    [logoColor]\n  )\n\n  const cardTheme = React.useMemo(\n    () => extractBrandTheme(visualTheme?.brandSettings),\n    [visualTheme?.brandSettings]\n  )\n\n  const isDarkTheme = React.useMemo(() => {\n    return (\n      cardTheme.backgroundColor !== 'white' &&\n      isDarkColor(cardTheme.backgroundColor)\n    )\n  }, [cardTheme.backgroundColor])\n\n  const textColor = isDarkTheme ? 'text-primary-foreground' : 'text-foreground'\n\n  const hasBrandedHeader =\n    cardTheme.type === 'coverImage' || cardTheme.type === 'brandColor'\n\n  return (\n    <div className={cn('flex', fixedHeight ? '' : 'aspect-square')}>\n      <MerchantCardRoot\n        touchable={touchable}\n        onPress={handlePress}\n        style={{\n          backgroundColor: cardTheme.backgroundColor,\n        }}\n      >\n        <MerchantCardImageContainer\n          className={cn(\n            'relative overflow-hidden w-full',\n            fixedHeight ? 'h-[120px]' : 'flex-1'\n          )}\n        >\n          {hasBrandedHeader ? (\n            <MerchantCardBrandedHeader\n              shop={shop}\n              cardTheme={cardTheme}\n              logoBackgroundClassName={logoBackgroundClassName}\n            />\n          ) : (\n            <>\n              <div className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10\">\n                <MerchantCardLogo\n                  src={visualTheme?.logoImage?.url}\n                  alt={`${name} logo`}\n                  shopName={name}\n                  className={logoBackgroundClassName}\n                  data-testid=\"merchant-logo\"\n                />\n              </div>\n\n              {numberOfFeaturedImages > 0 ? (\n                featuredImages?.map((image, index) => (\n                  <div\n                    className=\"z-0 flex h-full flex-1\"\n                    key={image.url || index}\n                  >\n                    <MerchantCardImage\n                      src={image.url}\n                      alt={image.altText || ''}\n                      thumbhash={image.thumbhash ?? undefined}\n                    />\n                  </div>\n                ))\n              ) : (\n                <div\n                  className=\"h-20 bg-gray-100\"\n                  data-testid=\"image-fallback\"\n                />\n              )}\n            </>\n          )}\n        </MerchantCardImageContainer>\n\n        <MerchantCardInfo className=\"flex items-center justify-between p-3\">\n          <div className=\"flex flex-col items-start gap-2\">\n            <div className=\"flex min-w-0 flex-1 flex-col\">\n              <MerchantCardName\n                className={cn(\n                  'line-clamp-1 overflow-hidden text-ellipsis',\n                  textColor\n                )}\n              >\n                {name}\n              </MerchantCardName>\n\n              <MerchantCardRating\n                rating={averageRating}\n                reviewCount={reviewCount}\n                className={textColor}\n              />\n            </div>\n          </div>\n        </MerchantCardInfo>\n      </MerchantCardRoot>\n    </div>\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  BrandedHeader: MerchantCardBrandedHeader,\n})\n\nexport {MerchantCard}\n"],"names":["merchantCardVariants","cva","MerchantCardRoot","className","touchable","asChild","onPress","props","content","jsx","SlotPrimitive.Slot","cn","Touchable","MerchantCardImageContainer","MerchantCardImage","src","alt","thumbhash","ThumbhashImage","MerchantCardLogo","shopName","MerchantCardInfo","MerchantCardName","children","MerchantCardRating","rating","reviewCount","jsxs","Star","normalizeRating","formatReviewCount","MerchantCardBrandedHeader","shop","cardTheme","logoBackgroundClassName","wordmarkImage","Fragment","MerchantCard","fixedHeight","featuredImagesLimit","navigateToShop","useShopNavigation","id","name","averageRating","visualTheme","handlePress","React","featuredImages","getFeaturedImages","numberOfFeaturedImages","logoAverageColor","logoDominantColor","logoColor","isDarkColor","extractBrandTheme","textColor","hasBrandedHeader","image","index","MerchantCardPrimitive"],"mappings":"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"}

package/dist/components/commerce/quantity-selector.js

@@ -0,0 +1,80 @@
+import { jsx as t, Fragment as y, jsxs as g } from "react/jsx-runtime";
+import { useState as h, useEffect as u, useCallback as m } from "react";
+import { cn as n } from "../../lib/utils.js";
+import { IconButton as p } from "../atoms/icon-button.js";
+import k from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/minus.js";
+import w from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/plus.js";
+const C = ({
+  quantity: r,
+  onQuantityChange: d,
+  maxQuantity: s,
+  minQuantity: o = 1,
+  disabled: f = !1
+}) => {
+  const [e, c] = h(r);
+  u(() => {
+    c(r);
+  }, [r]), u(() => {
+    d(e);
+  }, [e, d]);
+  const i = f || e >= s, l = f || e <= o, x = m(() => {
+    if (i) return;
+    const a = e + 1 > s ? e : e + 1;
+    c(a);
+  }, [i, e, s]), b = m(() => {
+    if (l) return;
+    const a = e - 1 < o ? e : e - 1;
+    c(a);
+  }, [l, e, o]);
+  return /* @__PURE__ */ t(y, { children: /* @__PURE__ */ t(
+    "div",
+    {
+      "data-testid": "QuantitySelector",
+      className: n("inline-flex w-auto bg-tertiary rounded-[8px]"),
+      children: /* @__PURE__ */ g(
+        "div",
+        {
+          className: n(
+            "flex h-space-32 items-center self-center overflow-hidden rounded-radius-8 bg-bg-fill-secondary",
+            "p-space-8"
+          ),
+          children: [
+            /* @__PURE__ */ t(
+              p,
+              {
+                Icon: k,
+                onClick: b,
+                buttonStyles: "transition bg-transparent",
+                filled: !1,
+                size: "sm",
+                iconStyles: n(
+                  l ? "text-background" : "text-foreground",
+                  "stroke-3"
+                )
+              }
+            ),
+            /* @__PURE__ */ t("div", { className: n("grow", "w-[20px]"), children: /* @__PURE__ */ t("span", { className: "flex items-center justify-center w-full h-full font-medium text-[10px]", children: e }) }),
+            /* @__PURE__ */ t(
+              p,
+              {
+                Icon: w,
+                onClick: x,
+                buttonStyles: "transition bg-transparent",
+                filled: !1,
+                size: "sm",
+                iconStyles: n(
+                  i ? "text-background" : "text-secondary",
+                  "stroke-3"
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+};
+export {
+  C as QuantitySelector
+};
+//# sourceMappingURL=quantity-selector.js.map

package/dist/components/commerce/quantity-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-selector.js","sources":["../../../src/components/commerce/quantity-selector.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react'\n\nimport {Minus, Plus} from 'lucide-react'\n\nimport {cn} from '../../lib/utils'\nimport {IconButton} from '../atoms/icon-button'\n\ninterface QuantitySelectorProps {\n  quantity: number\n  onQuantityChange: (quantity: number) => void\n  maxQuantity: number\n  minQuantity?: number\n  disabled?: boolean\n}\n\nexport const QuantitySelector = ({\n  quantity: _quantity,\n  onQuantityChange,\n  maxQuantity,\n  minQuantity = 1,\n  disabled = false,\n}: QuantitySelectorProps) => {\n  const [quantity, setQuantity] = useState(_quantity)\n\n  useEffect(() => {\n    setQuantity(_quantity)\n  }, [_quantity])\n\n  useEffect(() => {\n    onQuantityChange(quantity)\n  }, [quantity, onQuantityChange])\n\n  const incrementDisabled = disabled || quantity >= maxQuantity\n  const decrementDisabled = disabled || quantity <= minQuantity\n\n  const incrementQuantity = useCallback(() => {\n    if (incrementDisabled) return\n    const newQuantity = quantity + 1 > maxQuantity ? quantity : quantity + 1\n    setQuantity(newQuantity)\n  }, [incrementDisabled, quantity, maxQuantity])\n\n  const decrementQuantity = useCallback(() => {\n    if (decrementDisabled) return\n    const newQuantity = quantity - 1 < minQuantity ? quantity : quantity - 1\n    setQuantity(newQuantity)\n  }, [decrementDisabled, quantity, minQuantity])\n\n  return (\n    <>\n      <div\n        data-testid=\"QuantitySelector\"\n        className={cn('inline-flex w-auto bg-tertiary rounded-[8px]')}\n      >\n        <div\n          className={cn(\n            'flex h-space-32 items-center self-center overflow-hidden rounded-radius-8 bg-bg-fill-secondary',\n            `p-space-8`\n          )}\n        >\n          <IconButton\n            Icon={Minus}\n            onClick={decrementQuantity}\n            buttonStyles=\"transition bg-transparent\"\n            filled={false}\n            size=\"sm\"\n            iconStyles={cn(\n              decrementDisabled ? 'text-background' : 'text-foreground',\n              'stroke-3'\n            )}\n          />\n\n          <div className={cn('grow', `w-[20px]`)}>\n            <span className=\"flex items-center justify-center w-full h-full font-medium text-[10px]\">\n              {quantity}\n            </span>\n          </div>\n          <IconButton\n            Icon={Plus}\n            onClick={incrementQuantity}\n            buttonStyles=\"transition bg-transparent\"\n            filled={false}\n            size=\"sm\"\n            iconStyles={cn(\n              incrementDisabled ? 'text-background' : 'text-secondary',\n              'stroke-3'\n            )}\n          />\n        </div>\n      </div>\n    </>\n  )\n}\n"],"names":["QuantitySelector","_quantity","onQuantityChange","maxQuantity","minQuantity","disabled","quantity","setQuantity","useState","useEffect","incrementDisabled","decrementDisabled","incrementQuantity","useCallback","newQuantity","decrementQuantity","jsx","Fragment","cn","jsxs","IconButton","Minus","Plus"],"mappings":";;;;;;AAeO,MAAMA,IAAmB,CAAC;AAAA,EAC/B,UAAUC;AAAA,EACV,kBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AACb,MAA6B;AAC3B,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAASP,CAAS;AAElD,EAAAQ,EAAU,MAAM;AACd,IAAAF,EAAYN,CAAS;AAAA,EAAA,GACpB,CAACA,CAAS,CAAC,GAEdQ,EAAU,MAAM;AACd,IAAAP,EAAiBI,CAAQ;AAAA,EAAA,GACxB,CAACA,GAAUJ,CAAgB,CAAC;AAEzB,QAAAQ,IAAoBL,KAAYC,KAAYH,GAC5CQ,IAAoBN,KAAYC,KAAYF,GAE5CQ,IAAoBC,EAAY,MAAM;AAC1C,QAAIH,EAAmB;AACvB,UAAMI,IAAcR,IAAW,IAAIH,IAAcG,IAAWA,IAAW;AACvE,IAAAC,EAAYO,CAAW;AAAA,EACtB,GAAA,CAACJ,GAAmBJ,GAAUH,CAAW,CAAC,GAEvCY,IAAoBF,EAAY,MAAM;AAC1C,QAAIF,EAAmB;AACvB,UAAMG,IAAcR,IAAW,IAAIF,IAAcE,IAAWA,IAAW;AACvE,IAAAC,EAAYO,CAAW;AAAA,EACtB,GAAA,CAACH,GAAmBL,GAAUF,CAAW,CAAC;AAE7C,SAEI,gBAAAY,EAAAC,GAAA,EAAA,UAAA,gBAAAD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWE,EAAG,8CAA8C;AAAA,MAE5D,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWD;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,UAEA,UAAA;AAAA,YAAA,gBAAAF;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,MAAMC;AAAA,gBACN,SAASN;AAAA,gBACT,cAAa;AAAA,gBACb,QAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,YAAYG;AAAA,kBACVP,IAAoB,oBAAoB;AAAA,kBACxC;AAAA,gBAAA;AAAA,cACF;AAAA,YACF;AAAA,YAEC,gBAAAK,EAAA,OAAA,EAAI,WAAWE,EAAG,QAAQ,UAAU,GACnC,UAAA,gBAAAF,EAAC,QAAK,EAAA,WAAU,0EACb,UAAAV,EACH,CAAA,GACF;AAAA,YACA,gBAAAU;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,MAAME;AAAA,gBACN,SAASV;AAAA,gBACT,cAAa;AAAA,gBACb,QAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,YAAYM;AAAA,kBACVR,IAAoB,oBAAoB;AAAA,kBACxC;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,GAEJ;AAEJ;"}