@shopify/shop-minis-react 0.0.16 → 0.0.18

package/README.md

@@ -69,25 +69,29 @@ function App() {
 
 ### Custom Theme
 
-You can customize the design system by overriding CSS variables:
+You can customize the design system by overriding theme variables:
 
 ```css
 :root {
-  /* Customize border radius */
-  --radius: 0.75rem;
+  /* Customize primary brand color */
+  --theme-primary: #00843d;
+  --theme-primary-foreground: #ffffff;
 
-  /* Customize colors */
-  --primary: oklch(0.7 0.25 280);
-  --primary-foreground: oklch(0.98 0.02 280);
+  /* Customize other semantic colors */
+  --theme-secondary: #f0f0f0;
+  --theme-destructive: #cc0000;
 
-  /* Add your brand colors */
-  --brand: oklch(0.6 0.3 200);
+  /* Customize border radius */
+  --radius: 0.75rem;
 }
 
 .dark {
-  --primary: oklch(0.5 0.3 280);
-  /* ... dark mode overrides */
+  --theme-primary: #10b554;
+  --theme-background: #1a1a1a;
 }
+```
+
+See [THEME-CUSTOMIZATION.md](./THEME-CUSTOMIZATION.md) for detailed customization options.
 
 ### Vite Configuration
 

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

@@ -1,88 +1,43 @@
-import { jsx as s } from "react/jsx-runtime";
-import * as b from "react";
-import { cva as l } from "../../shop-minis-react/node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as u } from "../../lib/utils.js";
-import { Touchable as c } from "./touchable.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 h = l(
-  "flex w-full items-center justify-center gap-3 whitespace-nowrap rounded-xl text-base font-semibold disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-5 shrink-0 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        primary: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        secondary: "bg-slate-900 text-white shadow-xs hover:bg-slate-800",
-        tertiary: "bg-slate-100 text-slate-900 shadow-xs hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700",
-        blurred: "bg-black/20 text-white shadow-xs hover:bg-black/30 backdrop-blur-md border border-white/20",
-        text: "bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground",
-        borderless: "bg-transparent text-primary hover:text-primary/80",
-        borderlessUnbranded: "bg-transparent text-foreground hover:text-foreground/80",
-        outlined: "border border-border bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground",
-        dangerous: "bg-destructive text-white shadow-xs hover:bg-destructive/90",
-        "outlined-dangerous": "border border-destructive bg-transparent text-destructive shadow-xs hover:bg-destructive/10"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "default"
-    }
-  }
-);
-function x({
-  className: r,
-  variant: o,
-  size: e,
-  asChild: t = !1,
-  ...a
-}) {
-  return /* @__PURE__ */ s(
-    t ? g : "button",
-    {
-      "data-slot": "button",
-      className: u(h({ variant: o, size: e, className: r })),
-      ...a
-    }
-  );
-}
-function y({
-  className: r,
+import { jsx as l } from "react/jsx-runtime";
+import u from "react";
+import { cn as r } from "../../lib/utils.js";
+import { BaseButton as i } from "../ui/button.js";
+import { Touchable as p } from "./touchable.js";
+function C({
+  className: a,
   variant: o,
-  size: e,
-  onClick: t,
-  stopPropagation: a = !1,
-  ...n
+  size: m,
+  onClick: e,
+  stopPropagation: c = !1,
+  ...s
 }) {
-  const d = b.useCallback(
-    (i) => {
-      t?.(i);
+  const f = u.useCallback(
+    (n) => {
+      e?.(n);
     },
-    [t]
+    [e]
+  ), t = r(
+    o === "icon" ? "flex w-auto" : "flex w-full"
   );
-  return /* @__PURE__ */ s(
-    c,
+  return /* @__PURE__ */ l(
+    p,
     {
-      onClick: d,
-      stopPropagation: a,
-      className: e === "icon" ? "flex w-auto" : "flex w-full",
-      children: /* @__PURE__ */ s(
-        x,
+      onClick: f,
+      stopPropagation: c,
+      className: t,
+      children: /* @__PURE__ */ l(
+        i,
         {
-          className: r,
+          className: r(a, t),
           variant: o,
-          size: e,
-          ...n
+          size: m,
+          ...s
         }
       )
     }
   );
 }
 export {
-  y as Button,
-  h as buttonVariants
+  C as Button
 };
 //# sourceMappingURL=button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/components/atoms/button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {cva, type VariantProps} from 'class-variance-authority'\nimport {Slot as SlotPrimitive} from 'radix-ui'\n\nimport {cn} from '../../lib/utils'\n\nimport {Touchable} from './touchable'\n\nconst buttonVariants = cva(\n  \"flex w-full items-center justify-center gap-3 whitespace-nowrap rounded-xl text-base font-semibold disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-5 shrink-0 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',\n        secondary: 'bg-slate-900 text-white shadow-xs hover:bg-slate-800',\n        tertiary:\n          'bg-slate-100 text-slate-900 shadow-xs hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700',\n        blurred:\n          'bg-black/20 text-white shadow-xs hover:bg-black/30 backdrop-blur-md border border-white/20',\n        text: 'bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',\n        borderless: 'bg-transparent text-primary hover:text-primary/80',\n        borderlessUnbranded:\n          'bg-transparent text-foreground hover:text-foreground/80',\n        outlined:\n          'border border-border bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground',\n        dangerous:\n          'bg-destructive text-white shadow-xs hover:bg-destructive/90',\n        'outlined-dangerous':\n          'border border-destructive bg-transparent text-destructive shadow-xs hover:bg-destructive/10',\n      },\n      size: {\n        default: 'h-9 px-4 py-2 has-[>svg]:px-3',\n        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',\n        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n        icon: 'size-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'default',\n    },\n  }\n)\n\nfunction BaseButton({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'button'\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({variant, size, className}))}\n      {...props}\n    />\n  )\n}\n\nfunction Button({\n  className,\n  variant,\n  size,\n  onClick,\n  stopPropagation = false,\n  ...props\n}: React.ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {stopPropagation?: boolean}) {\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<any>) => {\n      onClick?.(event)\n    },\n    [onClick]\n  )\n\n  return (\n    <Touchable\n      onClick={handleClick}\n      stopPropagation={stopPropagation}\n      className={size === 'icon' ? 'flex w-auto' : 'flex w-full'}\n    >\n      <BaseButton\n        className={className}\n        variant={variant}\n        size={size}\n        {...props}\n      />\n    </Touchable>\n  )\n}\n\nexport {Button, buttonVariants}\n"],"names":["buttonVariants","cva","BaseButton","className","variant","size","asChild","props","jsx","SlotPrimitive.Slot","cn","Button","onClick","stopPropagation","handleClick","React","event","Touchable"],"mappings":";;;;;;AASA,MAAMA,IAAiBC;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WAAW;AAAA,QACX,UACE;AAAA,QACF,SACE;AAAA,QACF,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,qBACE;AAAA,QACF,UACE;AAAA,QACF,WACE;AAAA,QACF,sBACE;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAEA,SAASC,EAAW;AAAA,EAClB,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,GAGK;AAID,SAAA,gBAAAC;AAAA,IAHWF,IAAUG,IAAqB;AAAA,IAGzC;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAGV,EAAe,EAAC,SAAAI,GAAS,MAAAC,GAAM,WAAAF,EAAA,CAAU,CAAC;AAAA,MACvD,GAAGI;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASI,EAAO;AAAA,EACd,WAAAR;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAO;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,GAAGN;AACL,GACqE;AACnE,QAAMO,IAAcC,EAAM;AAAA,IACxB,CAACC,MAAiC;AAChC,MAAAJ,IAAUI,CAAK;AAAA,IACjB;AAAA,IACA,CAACJ,CAAO;AAAA,EACV;AAGE,SAAA,gBAAAJ;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,SAASH;AAAA,MACT,iBAAAD;AAAA,MACA,WAAWR,MAAS,SAAS,gBAAgB;AAAA,MAE7C,UAAA,gBAAAG;AAAA,QAACN;AAAA,QAAA;AAAA,UACC,WAAAC;AAAA,UACA,SAAAC;AAAA,UACA,MAAAC;AAAA,UACC,GAAGE;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"button.js","sources":["../../../src/components/atoms/button.tsx"],"sourcesContent":["import React from 'react'\n\nimport {VariantProps} from 'class-variance-authority'\n\nimport {cn} from '../../lib/utils'\nimport {BaseButton, buttonVariants} from '../ui/button'\n\nimport {Touchable} from './touchable'\n\nexport function Button({\n  className,\n  variant,\n  size,\n  onClick,\n  stopPropagation = false,\n  ...props\n}: React.ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {stopPropagation?: boolean}) {\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<any>) => {\n      onClick?.(event)\n    },\n    [onClick]\n  )\n\n  const wrapperClassName = cn(\n    variant === 'icon' ? 'flex w-auto' : 'flex w-full'\n  )\n\n  return (\n    <Touchable\n      onClick={handleClick}\n      stopPropagation={stopPropagation}\n      className={wrapperClassName}\n    >\n      <BaseButton\n        className={cn(className, wrapperClassName)}\n        variant={variant}\n        size={size}\n        {...props}\n      />\n    </Touchable>\n  )\n}\n"],"names":["Button","className","variant","size","onClick","stopPropagation","props","handleClick","React","event","wrapperClassName","cn","jsx","Touchable","BaseButton"],"mappings":";;;;;AASO,SAASA,EAAO;AAAA,EACrB,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,GAAGC;AACL,GACqE;AACnE,QAAMC,IAAcC,EAAM;AAAA,IACxB,CAACC,MAAiC;AAChC,MAAAL,IAAUK,CAAK;AAAA,IACjB;AAAA,IACA,CAACL,CAAO;AAAA,EACV,GAEMM,IAAmBC;AAAA,IACvBT,MAAY,SAAS,gBAAgB;AAAA,EACvC;AAGE,SAAA,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASN;AAAA,MACT,iBAAAF;AAAA,MACA,WAAWK;AAAA,MAEX,UAAA,gBAAAE;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,WAAWH,EAAGV,GAAWS,CAAgB;AAAA,UACzC,SAAAR;AAAA,UACA,MAAAC;AAAA,UACC,GAAGG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ;"}

package/dist/components/atoms/favorite-button.js

@@ -0,0 +1,21 @@
+import { jsx as r } from "react/jsx-runtime";
+import { IconButton as n } from "./icon-button.js";
+import m from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/heart.js";
+function e({
+  onClick: t,
+  filled: o = !1
+}) {
+  return /* @__PURE__ */ r(
+    n,
+    {
+      Icon: m,
+      filled: o,
+      onClick: t,
+      buttonStyles: o ? "bg-primary" : "bg-button-overlay/30 backdrop-blur-sm"
+    }
+  );
+}
+export {
+  e as FavoriteButton
+};
+//# sourceMappingURL=favorite-button.js.map

package/dist/components/atoms/favorite-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"favorite-button.js","sources":["../../../src/components/atoms/favorite-button.tsx"],"sourcesContent":["import {Heart} from 'lucide-react'\n\nimport {IconButton} from './icon-button'\n\nexport function FavoriteButton({\n  onClick,\n  filled = false,\n}: {\n  onClick?: () => void\n  filled?: boolean\n}) {\n  return (\n    <IconButton\n      Icon={Heart}\n      filled={filled}\n      onClick={onClick}\n      buttonStyles={\n        filled ? 'bg-primary' : 'bg-button-overlay/30 backdrop-blur-sm'\n      }\n    />\n  )\n}\n"],"names":["FavoriteButton","onClick","filled","jsx","IconButton","Heart"],"mappings":";;;AAIO,SAASA,EAAe;AAAA,EAC7B,SAAAC;AAAA,EACA,QAAAC,IAAS;AACX,GAGG;AAEC,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMC;AAAA,MACN,QAAAH;AAAA,MACA,SAAAD;AAAA,MACA,cACEC,IAAS,eAAe;AAAA,IAAA;AAAA,EAE5B;AAEJ;"}

package/dist/components/atoms/icon-button.js

@@ -0,0 +1,38 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cn as t } from "../../lib/utils.js";
+import { Button as l } from "./button.js";
+function u({
+  onClick: e,
+  filled: n = !1,
+  size: r = "default",
+  Icon: a,
+  buttonStyles: i,
+  iconStyles: s
+}) {
+  const m = {
+    sm: "size-3",
+    default: "size-4",
+    lg: "size-6"
+  };
+  return /* @__PURE__ */ o(
+    l,
+    {
+      onClick: e,
+      variant: "icon",
+      size: r,
+      className: t("bg-primary", i),
+      stopPropagation: !0,
+      children: /* @__PURE__ */ o(
+        a,
+        {
+          fill: n ? "currentColor" : "none",
+          className: t("text-primary-foreground", m[r], s)
+        }
+      )
+    }
+  );
+}
+export {
+  u as IconButton
+};
+//# sourceMappingURL=icon-button.js.map

package/dist/components/atoms/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","sources":["../../../src/components/atoms/icon-button.tsx"],"sourcesContent":["import {LucideIcon} from 'lucide-react'\n\nimport {cn} from '../../lib/utils'\n\nimport {Button} from './button'\n\nexport function IconButton({\n  onClick,\n  filled = false,\n  size = 'default',\n  Icon,\n  buttonStyles,\n  iconStyles,\n}: {\n  onClick?: () => void\n  filled?: boolean\n  size?: 'default' | 'sm' | 'lg'\n  Icon: LucideIcon\n  buttonStyles?: string\n  iconStyles?: string\n}) {\n  const sizeMap = {\n    sm: 'size-3',\n    default: 'size-4',\n    lg: 'size-6',\n  }\n\n  return (\n    <Button\n      onClick={onClick}\n      variant=\"icon\"\n      size={size}\n      className={cn('bg-primary', buttonStyles)}\n      stopPropagation\n    >\n      <Icon\n        fill={filled ? 'currentColor' : 'none'}\n        className={cn('text-primary-foreground', sizeMap[size], iconStyles)}\n      />\n    </Button>\n  )\n}\n"],"names":["IconButton","onClick","filled","size","Icon","buttonStyles","iconStyles","sizeMap","jsx","Button","cn"],"mappings":";;;AAMO,SAASA,EAAW;AAAA,EACzB,SAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AACF,GAOG;AACD,QAAMC,IAAU;AAAA,IACd,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,EACN;AAGE,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAR;AAAA,MACA,SAAQ;AAAA,MACR,MAAAE;AAAA,MACA,WAAWO,EAAG,cAAcL,CAAY;AAAA,MACxC,iBAAe;AAAA,MAEf,UAAA,gBAAAG;AAAA,QAACJ;AAAA,QAAA;AAAA,UACC,MAAMF,IAAS,iBAAiB;AAAA,UAChC,WAAWQ,EAAG,2BAA2BH,EAAQJ,CAAI,GAAGG,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACpE;AAAA,EACF;AAEJ;"}

package/dist/components/atoms/touchable.js

@@ -1,14 +1,14 @@
 import { jsx as d } from "react/jsx-runtime";
 import * as i from "react";
-import { useAnimationControls as p } from "../../shop-minis-react/node_modules/.pnpm/motion@12.17.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/motion/dist/es/framer-motion/dist/es/animation/hooks/use-animation.js";
-import { motion as f } from "../../shop-minis-react/node_modules/.pnpm/motion@12.17.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
-const y = ({
+import { useAnimationControls as f } from "../../shop-minis-react/node_modules/.pnpm/motion@12.17.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/motion/dist/es/framer-motion/dist/es/animation/hooks/use-animation.js";
+import { motion as h } from "../../shop-minis-react/node_modules/.pnpm/motion@12.17.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
+const L = ({
   children: l,
   onClick: a,
   stopPropagation: e = !1,
   ...u
 }) => {
-  const r = i.useRef(null), o = p(), m = i.useCallback(
+  const r = i.useRef(null), n = f(), { ref: v, ...m } = u, p = i.useCallback(
     (t) => {
       e && t.stopPropagation(), a?.(t);
     },
@@ -16,13 +16,13 @@ const y = ({
   );
   return i.useEffect(() => {
     if (!e || !r.current) return;
-    const t = r.current, s = (n) => {
-      n.stopImmediatePropagation(), n.stopPropagation(), o.start({
+    const t = r.current, s = (o) => {
+      o.stopImmediatePropagation(), o.stopPropagation(), n.start({
         scale: 0.95,
         opacity: 0.7
       });
-    }, c = (n) => {
-      n.stopImmediatePropagation(), n.stopPropagation(), o.start({
+    }, c = (o) => {
+      o.stopImmediatePropagation(), o.stopPropagation(), n.start({
         scale: 1,
         opacity: 1
       });
@@ -30,28 +30,28 @@ const y = ({
     return t.addEventListener("pointerdown", s, !0), t.addEventListener("pointerup", c, !0), () => {
       t.removeEventListener("pointerdown", s, !0), t.removeEventListener("pointerup", c, !0);
     };
-  }, [e, o]), /* @__PURE__ */ d(
-    f.div,
+  }, [e, n]), /* @__PURE__ */ d(
+    h.div,
     {
       ref: r,
       "data-touchable": "true",
       className: "flex w-full",
-      animate: e ? o : void 0,
+      animate: e ? n : void 0,
       whileTap: e ? void 0 : { scale: 0.95, opacity: 0.7 },
       transition: {
         scale: { type: "tween", duration: 0.08, ease: "linear" },
         opacity: { type: "tween", duration: 0.08, ease: "linear" }
       },
-      onClick: m,
+      onClick: p,
       style: {
         touchAction: e ? "manipulation" : void 0
       },
-      ...u,
+      ...m,
       children: l
     }
   );
 };
 export {
-  y as Touchable
+  L as Touchable
 };
 //# sourceMappingURL=touchable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"touchable.js","sources":["../../../src/components/atoms/touchable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {motion, HTMLMotionProps, useAnimationControls} from 'motion/react'\n\nexport const Touchable = ({\n  children,\n  onClick,\n  stopPropagation = false,\n  ...props\n}: HTMLMotionProps<'div'> & {\n  onClick?: React.MouseEventHandler<HTMLDivElement>\n  stopPropagation?: boolean\n}) => {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const controls = useAnimationControls()\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (stopPropagation) event.stopPropagation()\n      onClick?.(event)\n    },\n    [stopPropagation, onClick]\n  )\n\n  // Handle animations manually when stopPropagation is true to prevent parent from receiving event\n  React.useEffect(() => {\n    if (!stopPropagation || !ref.current) return\n\n    const element = ref.current\n\n    const handlePointerDown = (event: PointerEvent) => {\n      event.stopImmediatePropagation()\n      event.stopPropagation()\n\n      // Animate to pressed state\n      controls.start({\n        scale: 0.95,\n        opacity: 0.7,\n      })\n    }\n\n    const handlePointerUp = (event: PointerEvent) => {\n      event.stopImmediatePropagation()\n      event.stopPropagation()\n\n      // Animate back to normal state\n      controls.start({\n        scale: 1,\n        opacity: 1,\n      })\n    }\n\n    // Capture pointer event before Motion\n    element.addEventListener('pointerdown', handlePointerDown, true)\n    element.addEventListener('pointerup', handlePointerUp, true)\n\n    return () => {\n      element.removeEventListener('pointerdown', handlePointerDown, true)\n      element.removeEventListener('pointerup', handlePointerUp, true)\n    }\n  }, [stopPropagation, controls])\n\n  return (\n    <motion.div\n      ref={ref}\n      data-touchable=\"true\"\n      className=\"flex w-full\"\n      animate={stopPropagation ? controls : undefined}\n      whileTap={stopPropagation ? undefined : {scale: 0.95, opacity: 0.7}}\n      transition={{\n        scale: {type: 'tween', duration: 0.08, ease: 'linear'},\n        opacity: {type: 'tween', duration: 0.08, ease: 'linear'},\n      }}\n      onClick={handleClick}\n      style={{\n        touchAction: stopPropagation ? 'manipulation' : undefined,\n      }}\n      {...props} // TODO: We may need to filter out some props, as we only need motion props\n    >\n      {children}\n    </motion.div>\n  )\n}\n"],"names":["Touchable","children","onClick","stopPropagation","props","ref","React","controls","useAnimationControls","handleClick","event","element","handlePointerDown","handlePointerUp","jsx","motion"],"mappings":";;;;AAIO,MAAMA,IAAY,CAAC;AAAA,EACxB,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,GAAGC;AACL,MAGM;AACE,QAAAC,IAAMC,EAAM,OAAuB,IAAI,GACvCC,IAAWC,EAAqB,GAEhCC,IAAcH,EAAM;AAAA,IACxB,CAACI,MAA4C;AACvC,MAAAP,OAAuB,gBAAgB,GAC3CD,IAAUQ,CAAK;AAAA,IACjB;AAAA,IACA,CAACP,GAAiBD,CAAO;AAAA,EAC3B;AAGA,SAAAI,EAAM,UAAU,MAAM;AACpB,QAAI,CAACH,KAAmB,CAACE,EAAI,QAAS;AAEtC,UAAMM,IAAUN,EAAI,SAEdO,IAAoB,CAACF,MAAwB;AACjD,MAAAA,EAAM,yBAAyB,GAC/BA,EAAM,gBAAgB,GAGtBH,EAAS,MAAM;AAAA,QACb,OAAO;AAAA,QACP,SAAS;AAAA,MAAA,CACV;AAAA,IACH,GAEMM,IAAkB,CAACH,MAAwB;AAC/C,MAAAA,EAAM,yBAAyB,GAC/BA,EAAM,gBAAgB,GAGtBH,EAAS,MAAM;AAAA,QACb,OAAO;AAAA,QACP,SAAS;AAAA,MAAA,CACV;AAAA,IACH;AAGQ,WAAAI,EAAA,iBAAiB,eAAeC,GAAmB,EAAI,GACvDD,EAAA,iBAAiB,aAAaE,GAAiB,EAAI,GAEpD,MAAM;AACH,MAAAF,EAAA,oBAAoB,eAAeC,GAAmB,EAAI,GAC1DD,EAAA,oBAAoB,aAAaE,GAAiB,EAAI;AAAA,IAChE;AAAA,EAAA,GACC,CAACV,GAAiBI,CAAQ,CAAC,GAG5B,gBAAAO;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACC,KAAAV;AAAA,MACA,kBAAe;AAAA,MACf,WAAU;AAAA,MACV,SAASF,IAAkBI,IAAW;AAAA,MACtC,UAAUJ,IAAkB,SAAY,EAAC,OAAO,MAAM,SAAS,IAAG;AAAA,MAClE,YAAY;AAAA,QACV,OAAO,EAAC,MAAM,SAAS,UAAU,MAAM,MAAM,SAAQ;AAAA,QACrD,SAAS,EAAC,MAAM,SAAS,UAAU,MAAM,MAAM,SAAQ;AAAA,MACzD;AAAA,MACA,SAASM;AAAA,MACT,OAAO;AAAA,QACL,aAAaN,IAAkB,iBAAiB;AAAA,MAClD;AAAA,MACC,GAAGC;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"touchable.js","sources":["../../../src/components/atoms/touchable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {motion, HTMLMotionProps, useAnimationControls} from 'motion/react'\n\nexport const Touchable = ({\n  children,\n  onClick,\n  stopPropagation = false,\n  ...props\n}: HTMLMotionProps<'div'> & {\n  onClick?: React.MouseEventHandler<HTMLDivElement>\n  stopPropagation?: boolean\n}) => {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const controls = useAnimationControls()\n\n  // Filter out props that shouldn't be passed to motion.div\n  // Any other custom props that get added to the component interface should be filtered here\n  const {ref: _, ...motionProps} = props\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (stopPropagation) event.stopPropagation()\n      onClick?.(event)\n    },\n    [stopPropagation, onClick]\n  )\n\n  // Handle animations manually when stopPropagation is true to prevent parent from receiving event\n  React.useEffect(() => {\n    if (!stopPropagation || !ref.current) return\n\n    const element = ref.current\n\n    const handlePointerDown = (event: PointerEvent) => {\n      event.stopImmediatePropagation()\n      event.stopPropagation()\n\n      // Animate to pressed state\n      controls.start({\n        scale: 0.95,\n        opacity: 0.7,\n      })\n    }\n\n    const handlePointerUp = (event: PointerEvent) => {\n      event.stopImmediatePropagation()\n      event.stopPropagation()\n\n      // Animate back to normal state\n      controls.start({\n        scale: 1,\n        opacity: 1,\n      })\n    }\n\n    // Capture pointer event before Motion\n    element.addEventListener('pointerdown', handlePointerDown, true)\n    element.addEventListener('pointerup', handlePointerUp, true)\n\n    return () => {\n      element.removeEventListener('pointerdown', handlePointerDown, true)\n      element.removeEventListener('pointerup', handlePointerUp, true)\n    }\n  }, [stopPropagation, controls])\n\n  return (\n    <motion.div\n      ref={ref}\n      data-touchable=\"true\"\n      className=\"flex w-full\"\n      animate={stopPropagation ? controls : undefined}\n      whileTap={stopPropagation ? undefined : {scale: 0.95, opacity: 0.7}}\n      transition={{\n        scale: {type: 'tween', duration: 0.08, ease: 'linear'},\n        opacity: {type: 'tween', duration: 0.08, ease: 'linear'},\n      }}\n      onClick={handleClick}\n      style={{\n        touchAction: stopPropagation ? 'manipulation' : undefined,\n      }}\n      {...motionProps}\n    >\n      {children}\n    </motion.div>\n  )\n}\n"],"names":["Touchable","children","onClick","stopPropagation","props","ref","React","controls","useAnimationControls","_","motionProps","handleClick","event","element","handlePointerDown","handlePointerUp","jsx","motion"],"mappings":";;;;AAIO,MAAMA,IAAY,CAAC;AAAA,EACxB,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,GAAGC;AACL,MAGM;AACE,QAAAC,IAAMC,EAAM,OAAuB,IAAI,GACvCC,IAAWC,EAAqB,GAIhC,EAAC,KAAKC,GAAG,GAAGC,EAAe,IAAAN,GAE3BO,IAAcL,EAAM;AAAA,IACxB,CAACM,MAA4C;AACvC,MAAAT,OAAuB,gBAAgB,GAC3CD,IAAUU,CAAK;AAAA,IACjB;AAAA,IACA,CAACT,GAAiBD,CAAO;AAAA,EAC3B;AAGA,SAAAI,EAAM,UAAU,MAAM;AACpB,QAAI,CAACH,KAAmB,CAACE,EAAI,QAAS;AAEtC,UAAMQ,IAAUR,EAAI,SAEdS,IAAoB,CAACF,MAAwB;AACjD,MAAAA,EAAM,yBAAyB,GAC/BA,EAAM,gBAAgB,GAGtBL,EAAS,MAAM;AAAA,QACb,OAAO;AAAA,QACP,SAAS;AAAA,MAAA,CACV;AAAA,IACH,GAEMQ,IAAkB,CAACH,MAAwB;AAC/C,MAAAA,EAAM,yBAAyB,GAC/BA,EAAM,gBAAgB,GAGtBL,EAAS,MAAM;AAAA,QACb,OAAO;AAAA,QACP,SAAS;AAAA,MAAA,CACV;AAAA,IACH;AAGQ,WAAAM,EAAA,iBAAiB,eAAeC,GAAmB,EAAI,GACvDD,EAAA,iBAAiB,aAAaE,GAAiB,EAAI,GAEpD,MAAM;AACH,MAAAF,EAAA,oBAAoB,eAAeC,GAAmB,EAAI,GAC1DD,EAAA,oBAAoB,aAAaE,GAAiB,EAAI;AAAA,IAChE;AAAA,EAAA,GACC,CAACZ,GAAiBI,CAAQ,CAAC,GAG5B,gBAAAS;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACC,KAAAZ;AAAA,MACA,kBAAe;AAAA,MACf,WAAU;AAAA,MACV,SAASF,IAAkBI,IAAW;AAAA,MACtC,UAAUJ,IAAkB,SAAY,EAAC,OAAO,MAAM,SAAS,IAAG;AAAA,MAClE,YAAY;AAAA,QACV,OAAO,EAAC,MAAM,SAAS,UAAU,MAAM,MAAM,SAAQ;AAAA,QACrD,SAAS,EAAC,MAAM,SAAS,UAAU,MAAM,MAAM,SAAQ;AAAA,MACzD;AAAA,MACA,SAASQ;AAAA,MACT,OAAO;AAAA,QACL,aAAaR,IAAkB,iBAAiB;AAAA,MAClD;AAAA,MACC,GAAGO;AAAA,MAEH,UAAAT;AAAA,IAAA;AAAA,EACH;AAEJ;"}

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

@@ -195,13 +195,6 @@ const z = Object.assign(d, {
 });
 export {
   q as MerchantCard,
-  f as MerchantCardImage,
-  m as MerchantCardImageContainer,
-  h as MerchantCardInfo,
-  u as MerchantCardLogo,
-  g as MerchantCardName,
-  z as MerchantCardPrimitive,
-  p as MerchantCardRating,
-  d as MerchantCardRoot
+  z 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  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 {\n  // Composed component\n  MerchantCard,\n  // Primitive components for custom composition\n  MerchantCardRoot,\n  MerchantCardImageContainer,\n  MerchantCardImage,\n  MerchantCardLogo,\n  MerchantCardInfo,\n  MerchantCardName,\n  MerchantCardRating,\n}\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  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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"}