@shopify/shop-minis-react 0.2.6 → 0.2.9

package/dist/components/MinisContainer.js

@@ -3,35 +3,35 @@ import { useState as u, useCallback as f, useEffect as p } from "react";
 import { useShopActions as v } from "../internal/useShopActions.js";
 import { injectMocks as y } from "../mocks.js";
 import { ImagePickerProvider as h } from "../providers/ImagePickerProvider.js";
-import { ErrorBoundary as g } from "./ErrorBoundary.js";
+import { ErrorBoundary as E } from "./ErrorBoundary.js";
 y();
 function b({ children: a }) {
-  const [i, n] = u(!1), { reportError: o } = v(), c = f(
-    async (t) => {
+  const [i, o] = u(!1), t = v(), c = f(
+    async (n) => {
       try {
-        await o(t);
+        t && t.reportError && await t.reportError(n);
       } catch (e) {
         console.error("Failed to report error to app:", e);
       }
     },
-    [o]
+    [t]
   );
   return p(() => {
-    const t = () => window.minisSDK ? (n(!0), !0) : !1;
-    if (t())
+    const n = () => window.minisSDK ? (o(!0), !0) : !1;
+    if (n())
       return;
     const e = (d) => {
       const { type: m } = JSON.parse(d.data);
-      m === "MINIS_SDK_READY" && n(!0);
+      m === "MINIS_SDK_READY" && o(!0);
     };
     window.addEventListener("message", e), document.addEventListener("message", e);
     const s = setInterval(() => {
-      t() && clearInterval(s);
+      n() && clearInterval(s);
     }, 100);
     return () => {
       clearInterval(s), window.removeEventListener("message", e), document.removeEventListener("message", e);
     };
-  }, []), i ? /* @__PURE__ */ r(g, { onError: c, children: /* @__PURE__ */ r(h, { children: a }) }) : /* @__PURE__ */ r("div", { className: "h-screen bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ l("div", { className: "text-center", children: [
+  }, []), i ? /* @__PURE__ */ r(E, { onError: c, children: /* @__PURE__ */ r(h, { children: a }) }) : /* @__PURE__ */ r("div", { className: "h-screen bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ l("div", { className: "text-center", children: [
     /* @__PURE__ */ r("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4" }),
     /* @__PURE__ */ r("p", { className: "text-gray-600", children: "Loading..." })
   ] }) });

package/dist/components/MinisContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MinisContainer.js","sources":["../../src/components/MinisContainer.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useState} from 'react'\n\nimport {ReportErrorParams} from '@shopify/shop-minis-platform/actions'\n\nimport {useShopActions} from '../internal/useShopActions'\nimport {injectMocks} from '../mocks'\nimport {ImagePickerProvider} from '../providers/ImagePickerProvider'\n\nimport {ErrorBoundary} from './ErrorBoundary'\n\ninjectMocks()\n\nexport function MinisContainer({children}: {children: React.ReactNode}) {\n  const [isSDKReady, setIsSDKReady] = useState(false)\n  const {reportError} = useShopActions()\n\n  const handleError = useCallback(\n    async (params: ReportErrorParams) => {\n      try {\n        await reportError(params)\n      } catch (error) {\n        // If reporting fails, at least log to console\n        console.error('Failed to report error to app:', error)\n      }\n    },\n    [reportError]\n  )\n\n  useEffect(() => {\n    // Function to check if SDK is ready\n    const checkSDKReady = () => {\n      if (window.minisSDK) {\n        setIsSDKReady(true)\n        return true\n      }\n      return false\n    }\n\n    // Check immediately\n    if (checkSDKReady()) {\n      return\n    }\n\n    // If not ready, set up a listener for the MINIS_SDK_READY event\n    const handleSDKReady = (event: any) => {\n      const {type} = JSON.parse(event.data)\n\n      if (type === 'MINIS_SDK_READY') {\n        setIsSDKReady(true)\n      }\n    }\n\n    // Listen for the MINIS_SDK_READY event\n    window.addEventListener('message', handleSDKReady)\n    document.addEventListener('message', handleSDKReady)\n\n    // Also poll for SDK availability as a fallback\n    const pollInterval = setInterval(() => {\n      if (checkSDKReady()) {\n        clearInterval(pollInterval)\n      }\n    }, 100)\n\n    // Cleanup\n    return () => {\n      clearInterval(pollInterval)\n      window.removeEventListener('message', handleSDKReady)\n      document.removeEventListener('message', handleSDKReady)\n    }\n  }, [])\n\n  // Don't render anything until SDK is ready\n  if (!isSDKReady) {\n    return (\n      <div className=\"h-screen bg-gray-50 flex items-center justify-center\">\n        <div className=\"text-center\">\n          <div className=\"animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4\" />\n          <p className=\"text-gray-600\">Loading...</p>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <ErrorBoundary onError={handleError}>\n      <ImagePickerProvider>{children}</ImagePickerProvider>\n    </ErrorBoundary>\n  )\n}\n"],"names":["injectMocks","MinisContainer","children","isSDKReady","setIsSDKReady","useState","reportError","useShopActions","handleError","useCallback","params","error","useEffect","checkSDKReady","handleSDKReady","event","type","pollInterval","ErrorBoundary","jsx","ImagePickerProvider","jsxs"],"mappings":";;;;;;AAUAA,EAAY;AAEI,SAAAC,EAAe,EAAC,UAAAC,KAAwC;AACtE,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,EAAC,aAAAC,EAAW,IAAIC,EAAe,GAE/BC,IAAcC;AAAA,IAClB,OAAOC,MAA8B;AAC/B,UAAA;AACF,cAAMJ,EAAYI,CAAM;AAAA,eACjBC,GAAO;AAEN,gBAAA,MAAM,kCAAkCA,CAAK;AAAA,MAAA;AAAA,IAEzD;AAAA,IACA,CAACL,CAAW;AAAA,EACd;AA8CA,SA5CAM,EAAU,MAAM;AAEd,UAAMC,IAAgB,MAChB,OAAO,YACTT,EAAc,EAAI,GACX,MAEF;AAIT,QAAIS;AACF;AAII,UAAAC,IAAiB,CAACC,MAAe;AACrC,YAAM,EAAC,MAAAC,EAAI,IAAI,KAAK,MAAMD,EAAM,IAAI;AAEpC,MAAIC,MAAS,qBACXZ,EAAc,EAAI;AAAA,IAEtB;AAGO,WAAA,iBAAiB,WAAWU,CAAc,GACxC,SAAA,iBAAiB,WAAWA,CAAc;AAG7C,UAAAG,IAAe,YAAY,MAAM;AACrC,MAAIJ,OACF,cAAcI,CAAY;AAAA,OAE3B,GAAG;AAGN,WAAO,MAAM;AACX,oBAAcA,CAAY,GACnB,OAAA,oBAAoB,WAAWH,CAAc,GAC3C,SAAA,oBAAoB,WAAWA,CAAc;AAAA,IACxD;AAAA,EACF,GAAG,EAAE,GAGAX,sBAYFe,GAAc,EAAA,SAASV,GACtB,UAAC,gBAAAW,EAAAC,GAAA,EAAqB,UAAAlB,GAAS,EACjC,CAAA,sBAZG,OAAI,EAAA,WAAU,wDACb,UAAC,gBAAAmB,EAAA,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,IAAC,gBAAAF,EAAA,OAAA,EAAI,WAAU,4EAA4E,CAAA;AAAA,IAC1F,gBAAAA,EAAA,KAAA,EAAE,WAAU,iBAAgB,UAAU,aAAA,CAAA;AAAA,EAAA,EAAA,CACzC,EACF,CAAA;AASN;"}
+{"version":3,"file":"MinisContainer.js","sources":["../../src/components/MinisContainer.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useState} from 'react'\n\nimport {ReportErrorParams} from '@shopify/shop-minis-platform/actions'\n\nimport {useShopActions} from '../internal/useShopActions'\nimport {injectMocks} from '../mocks'\nimport {ImagePickerProvider} from '../providers/ImagePickerProvider'\n\nimport {ErrorBoundary} from './ErrorBoundary'\n\ninjectMocks()\n\nexport function MinisContainer({children}: {children: React.ReactNode}) {\n  const [isSDKReady, setIsSDKReady] = useState(false)\n  const actions = useShopActions()\n\n  const handleError = useCallback(\n    async (params: ReportErrorParams) => {\n      try {\n        if (actions && actions.reportError) {\n          await actions.reportError(params)\n        }\n      } catch (error) {\n        // If reporting fails, at least log to console\n        console.error('Failed to report error to app:', error)\n      }\n    },\n    [actions]\n  )\n\n  useEffect(() => {\n    // Function to check if SDK is ready\n    const checkSDKReady = () => {\n      if (window.minisSDK) {\n        setIsSDKReady(true)\n        return true\n      }\n      return false\n    }\n\n    // Check immediately\n    if (checkSDKReady()) {\n      return\n    }\n\n    // If not ready, set up a listener for the MINIS_SDK_READY event\n    const handleSDKReady = (event: any) => {\n      const {type} = JSON.parse(event.data)\n\n      if (type === 'MINIS_SDK_READY') {\n        setIsSDKReady(true)\n      }\n    }\n\n    // Listen for the MINIS_SDK_READY event\n    window.addEventListener('message', handleSDKReady)\n    document.addEventListener('message', handleSDKReady)\n\n    // Also poll for SDK availability as a fallback\n    const pollInterval = setInterval(() => {\n      if (checkSDKReady()) {\n        clearInterval(pollInterval)\n      }\n    }, 100)\n\n    // Cleanup\n    return () => {\n      clearInterval(pollInterval)\n      window.removeEventListener('message', handleSDKReady)\n      document.removeEventListener('message', handleSDKReady)\n    }\n  }, [])\n\n  // Don't render anything until SDK is ready\n  if (!isSDKReady) {\n    return (\n      <div className=\"h-screen bg-gray-50 flex items-center justify-center\">\n        <div className=\"text-center\">\n          <div className=\"animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4\" />\n          <p className=\"text-gray-600\">Loading...</p>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <ErrorBoundary onError={handleError}>\n      <ImagePickerProvider>{children}</ImagePickerProvider>\n    </ErrorBoundary>\n  )\n}\n"],"names":["injectMocks","MinisContainer","children","isSDKReady","setIsSDKReady","useState","actions","useShopActions","handleError","useCallback","params","error","useEffect","checkSDKReady","handleSDKReady","event","type","pollInterval","ErrorBoundary","jsx","ImagePickerProvider","jsxs"],"mappings":";;;;;;AAUAA,EAAY;AAEI,SAAAC,EAAe,EAAC,UAAAC,KAAwC;AACtE,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5CC,IAAUC,EAAe,GAEzBC,IAAcC;AAAA,IAClB,OAAOC,MAA8B;AAC/B,UAAA;AACE,QAAAJ,KAAWA,EAAQ,eACf,MAAAA,EAAQ,YAAYI,CAAM;AAAA,eAE3BC,GAAO;AAEN,gBAAA,MAAM,kCAAkCA,CAAK;AAAA,MAAA;AAAA,IAEzD;AAAA,IACA,CAACL,CAAO;AAAA,EACV;AA8CA,SA5CAM,EAAU,MAAM;AAEd,UAAMC,IAAgB,MAChB,OAAO,YACTT,EAAc,EAAI,GACX,MAEF;AAIT,QAAIS;AACF;AAII,UAAAC,IAAiB,CAACC,MAAe;AACrC,YAAM,EAAC,MAAAC,EAAI,IAAI,KAAK,MAAMD,EAAM,IAAI;AAEpC,MAAIC,MAAS,qBACXZ,EAAc,EAAI;AAAA,IAEtB;AAGO,WAAA,iBAAiB,WAAWU,CAAc,GACxC,SAAA,iBAAiB,WAAWA,CAAc;AAG7C,UAAAG,IAAe,YAAY,MAAM;AACrC,MAAIJ,OACF,cAAcI,CAAY;AAAA,OAE3B,GAAG;AAGN,WAAO,MAAM;AACX,oBAAcA,CAAY,GACnB,OAAA,oBAAoB,WAAWH,CAAc,GAC3C,SAAA,oBAAoB,WAAWA,CAAc;AAAA,IACxD;AAAA,EACF,GAAG,EAAE,GAGAX,sBAYFe,GAAc,EAAA,SAASV,GACtB,UAAC,gBAAAW,EAAAC,GAAA,EAAqB,UAAAlB,GAAS,EACjC,CAAA,sBAZG,OAAI,EAAA,WAAU,wDACb,UAAC,gBAAAmB,EAAA,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,IAAC,gBAAAF,EAAA,OAAA,EAAI,WAAU,4EAA4E,CAAA;AAAA,IAC1F,gBAAAA,EAAA,KAAA,EAAE,WAAU,iBAAgB,UAAU,aAAA,CAAA;AAAA,EAAA,EAAA,CACzC,EACF,CAAA;AASN;"}

package/dist/components/atoms/product-variant-price.js

@@ -1,61 +1,54 @@
-import { jsx as n, jsxs as d, Fragment as c } from "react/jsx-runtime";
+import { jsx as n, jsxs as h, Fragment as d } from "react/jsx-runtime";
 import { formatMoney as a } from "../../lib/formatMoney.js";
 import { cn as i } from "../../lib/utils.js";
-function b({
+function N({
   amount: r,
   currencyCode: t,
   compareAtPriceAmount: s,
   compareAtPriceCurrencyCode: o,
   currentPriceClassName: e,
   originalPriceClassName: m,
-  containerClassName: x,
-  className: f
+  className: x
 }) {
   if (!r || !t)
     return null;
-  const g = s && s !== r, l = String(r), h = s ? String(s) : void 0;
-  return /* @__PURE__ */ n(
-    "div",
-    {
-      className: i("flex items-center gap-2", x, f),
-      children: g ? /* @__PURE__ */ d(c, { children: [
-        /* @__PURE__ */ n(
-          "span",
-          {
-            className: i(
-              "text-sm font-semibold text-gray-900",
-              e
-            ),
-            children: a(l, t)
-          }
+  const f = s && s !== r, l = String(r), g = s ? String(s) : void 0;
+  return /* @__PURE__ */ n("div", { className: i("flex items-center gap-2", x), children: f ? /* @__PURE__ */ h(d, { children: [
+    /* @__PURE__ */ n(
+      "span",
+      {
+        className: i(
+          "text-sm font-semibold text-gray-900",
+          e
+        ),
+        children: a(l, t)
+      }
+    ),
+    /* @__PURE__ */ n(
+      "span",
+      {
+        className: i(
+          "text-sm text-gray-500 line-through",
+          m
         ),
-        /* @__PURE__ */ n(
-          "span",
-          {
-            className: i(
-              "text-sm text-gray-500 line-through",
-              m
-            ),
-            children: a(
-              h,
-              o || t
-            )
-          }
+        children: a(
+          g,
+          o || t
         )
-      ] }) : /* @__PURE__ */ n(
-        "span",
-        {
-          className: i(
-            "text-sm font-semibold text-gray-900",
-            e
-          ),
-          children: a(l, t)
-        }
-      )
+      }
+    )
+  ] }) : /* @__PURE__ */ n(
+    "span",
+    {
+      className: i(
+        "text-sm font-semibold text-gray-900",
+        e
+      ),
+      children: a(l, t)
     }
-  );
+  ) });
 }
 export {
-  b as ProductVariantPrice
+  N as ProductVariantPrice
 };
 //# sourceMappingURL=product-variant-price.js.map

package/dist/components/atoms/product-variant-price.js.map

@@ -1 +1 @@
-{"version":3,"file":"product-variant-price.js","sources":["../../../src/components/atoms/product-variant-price.tsx"],"sourcesContent":["import {formatMoney} from '../../lib/formatMoney'\nimport {cn} from '../../lib/utils'\n\nexport interface ProductVariantPriceProps {\n  amount: number | string\n  currencyCode?: string\n  compareAtPriceAmount?: number | string\n  compareAtPriceCurrencyCode?: string\n  currentPriceClassName?: string\n  originalPriceClassName?: string\n  containerClassName?: string\n  className?: string\n}\n\nexport function ProductVariantPrice({\n  amount,\n  currencyCode,\n  compareAtPriceAmount,\n  compareAtPriceCurrencyCode,\n  currentPriceClassName,\n  originalPriceClassName,\n  containerClassName,\n  className,\n}: ProductVariantPriceProps) {\n  if (!amount || !currencyCode) {\n    return null\n  }\n\n  const hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount\n\n  const amountStr = String(amount)\n  const compareAtPriceAmountStr = compareAtPriceAmount\n    ? String(compareAtPriceAmount)\n    : undefined\n\n  return (\n    <div\n      className={cn('flex items-center gap-2', containerClassName, className)}\n    >\n      {hasDiscount ? (\n        <>\n          <span\n            className={cn(\n              'text-sm font-semibold text-gray-900',\n              currentPriceClassName\n            )}\n          >\n            {formatMoney(amountStr, currencyCode)}\n          </span>\n          <span\n            className={cn(\n              'text-sm text-gray-500 line-through',\n              originalPriceClassName\n            )}\n          >\n            {formatMoney(\n              compareAtPriceAmountStr!,\n              compareAtPriceCurrencyCode || currencyCode\n            )}\n          </span>\n        </>\n      ) : (\n        <span\n          className={cn(\n            'text-sm font-semibold text-gray-900',\n            currentPriceClassName\n          )}\n        >\n          {formatMoney(amountStr, currencyCode)}\n        </span>\n      )}\n    </div>\n  )\n}\n"],"names":["ProductVariantPrice","amount","currencyCode","compareAtPriceAmount","compareAtPriceCurrencyCode","currentPriceClassName","originalPriceClassName","containerClassName","className","hasDiscount","amountStr","compareAtPriceAmountStr","jsx","cn","jsxs","Fragment","formatMoney"],"mappings":";;;AAcO,SAASA,EAAoB;AAAA,EAClC,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,4BAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,WAAAC;AACF,GAA6B;AACvB,MAAA,CAACP,KAAU,CAACC;AACP,WAAA;AAGH,QAAAO,IAAcN,KAAwBA,MAAyBF,GAE/DS,IAAY,OAAOT,CAAM,GACzBU,IAA0BR,IAC5B,OAAOA,CAAoB,IAC3B;AAGF,SAAA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,2BAA2BN,GAAoBC,CAAS;AAAA,MAErE,cAEG,gBAAAM,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,cACAR;AAAA,YACF;AAAA,YAEC,UAAAW,EAAYN,GAAWR,CAAY;AAAA,UAAA;AAAA,QACtC;AAAA,QACA,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,cACAP;AAAA,YACF;AAAA,YAEC,UAAAU;AAAA,cACCL;AAAA,cACAP,KAA8BF;AAAA,YAAA;AAAA,UAChC;AAAA,QAAA;AAAA,MACF,EAAA,CACF,IAEA,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC;AAAA,YACT;AAAA,YACAR;AAAA,UACF;AAAA,UAEC,UAAAW,EAAYN,GAAWR,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IACtC;AAAA,EAEJ;AAEJ;"}
+{"version":3,"file":"product-variant-price.js","sources":["../../../src/components/atoms/product-variant-price.tsx"],"sourcesContent":["import {formatMoney} from '../../lib/formatMoney'\nimport {cn} from '../../lib/utils'\n\nexport interface ProductVariantPriceProps {\n  amount: number | string\n  currencyCode?: string\n  compareAtPriceAmount?: number | string\n  compareAtPriceCurrencyCode?: string\n  currentPriceClassName?: string\n  originalPriceClassName?: string\n  className?: string\n}\n\nexport function ProductVariantPrice({\n  amount,\n  currencyCode,\n  compareAtPriceAmount,\n  compareAtPriceCurrencyCode,\n  currentPriceClassName,\n  originalPriceClassName,\n  className,\n}: ProductVariantPriceProps) {\n  if (!amount || !currencyCode) {\n    return null\n  }\n\n  const hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount\n\n  const amountStr = String(amount)\n  const compareAtPriceAmountStr = compareAtPriceAmount\n    ? String(compareAtPriceAmount)\n    : undefined\n\n  return (\n    <div className={cn('flex items-center gap-2', className)}>\n      {hasDiscount ? (\n        <>\n          <span\n            className={cn(\n              'text-sm font-semibold text-gray-900',\n              currentPriceClassName\n            )}\n          >\n            {formatMoney(amountStr, currencyCode)}\n          </span>\n          <span\n            className={cn(\n              'text-sm text-gray-500 line-through',\n              originalPriceClassName\n            )}\n          >\n            {formatMoney(\n              compareAtPriceAmountStr!,\n              compareAtPriceCurrencyCode || currencyCode\n            )}\n          </span>\n        </>\n      ) : (\n        <span\n          className={cn(\n            'text-sm font-semibold text-gray-900',\n            currentPriceClassName\n          )}\n        >\n          {formatMoney(amountStr, currencyCode)}\n        </span>\n      )}\n    </div>\n  )\n}\n"],"names":["ProductVariantPrice","amount","currencyCode","compareAtPriceAmount","compareAtPriceCurrencyCode","currentPriceClassName","originalPriceClassName","className","hasDiscount","amountStr","compareAtPriceAmountStr","jsx","cn","jsxs","Fragment","formatMoney"],"mappings":";;;AAaO,SAASA,EAAoB;AAAA,EAClC,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,4BAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,WAAAC;AACF,GAA6B;AACvB,MAAA,CAACN,KAAU,CAACC;AACP,WAAA;AAGH,QAAAM,IAAcL,KAAwBA,MAAyBF,GAE/DQ,IAAY,OAAOR,CAAM,GACzBS,IAA0BP,IAC5B,OAAOA,CAAoB,IAC3B;AAGF,SAAA,gBAAAQ,EAAC,SAAI,WAAWC,EAAG,2BAA2BL,CAAS,GACpD,cAEG,gBAAAM,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAP;AAAA,QACF;AAAA,QAEC,UAAAU,EAAYN,GAAWP,CAAY;AAAA,MAAA;AAAA,IACtC;AAAA,IACA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAN;AAAA,QACF;AAAA,QAEC,UAAAS;AAAA,UACCL;AAAA,UACAN,KAA8BF;AAAA,QAAA;AAAA,MAChC;AAAA,IAAA;AAAA,EACF,EAAA,CACF,IAEA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAP;AAAA,MACF;AAAA,MAEC,UAAAU,EAAYN,GAAWP,CAAY;AAAA,IAAA;AAAA,EAAA,GAG1C;AAEJ;"}

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

@@ -1,18 +1,18 @@
 import { jsx as o, jsxs as v } from "react/jsx-runtime";
-import * as F from "react";
-import { useState as A, useCallback as C, useMemo as k, useContext as B } from "react";
-import { useShopNavigation as V } from "../../hooks/navigation/useShopNavigation.js";
-import { useSavedProductsActions as j } from "../../hooks/user/useSavedProductsActions.js";
-import { formatMoney as z } from "../../lib/formatMoney.js";
+import * as N from "react";
+import { useState as A, useCallback as C, useMemo as k, useContext as z } from "react";
+import { useShopNavigation as B } from "../../hooks/navigation/useShopNavigation.js";
+import { useSavedProductsActions as V } from "../../hooks/user/useSavedProductsActions.js";
+import { formatMoney as j } from "../../lib/formatMoney.js";
 import { cn as s } from "../../lib/utils.js";
 import { Image as T } from "../atoms/image.js";
 import { ProductVariantPrice as E } from "../atoms/product-variant-price.js";
 import { Touchable as O } from "../atoms/touchable.js";
 import { Badge as S } from "../ui/badge.js";
 import { FavoriteButton as L } from "./favorite-button.js";
-const b = F.createContext(void 0);
+const b = N.createContext(void 0);
 function u() {
-  const t = B(b);
+  const t = z(b);
   if (!t)
     throw new Error(
       "ProductCard components must be used within a ProductCard provider"
@@ -27,7 +27,7 @@ function M({
     "div",
     {
       className: s(
-        "relative w-full overflow-hidden rounded-xl border-0",
+        "relative size-full overflow-hidden rounded-xl border-0",
         t
       ),
       ...e
@@ -55,10 +55,8 @@ function R({
     {
       "data-slot": "product-card-image-container",
       className: s(
-        // Ensure the product image is stretched to the full size of the container (can't use width/height: 100% because of flex)
-        "flex justify-stretch items-stretch",
         "relative overflow-hidden rounded-xl border border-gray-200",
-        "w-full  aspect-square",
+        "aspect-square",
         r === "compact" ? "min-h-[104px]" : "min-h-[134px]",
         t
       ),
@@ -76,7 +74,8 @@ function q({ className: t, ...e }) {
         alt: d,
         aspectRatio: 1,
         thumbhash: c,
-        className: s("size-full object-cover", t),
+        objectFit: "cover",
+        className: s("size-full", t),
         ...e
       }
     ) : /* @__PURE__ */ o(
@@ -85,7 +84,7 @@ function q({ className: t, ...e }) {
         "data-slot": "product-card-image",
         src: l,
         alt: d,
-        className: s("size-full", t),
+        className: s("size-full object-cover", t),
         ...e
       }
     ),
@@ -179,7 +178,7 @@ function K() {
   const { product: t, selectedProductVariant: e, variant: r } = u();
   if (r !== "priceOverlay") return null;
   const a = e?.price || t.price, n = a?.currencyCode, i = a?.amount;
-  return !n || !i ? null : /* @__PURE__ */ o(w, { position: "top-left", children: z(i, n) });
+  return !n || !i ? null : /* @__PURE__ */ o(w, { position: "top-left", children: j(i, n) });
 }
 function at({
   product: t,
@@ -193,7 +192,7 @@ function at({
   children: p,
   favoriteButtonDisabled: l = !1
 }) {
-  const { navigateToProduct: h } = V(), { saveProduct: g, unsaveProduct: P } = j(), [f, y] = A(t.isFavorited), x = C(() => {
+  const { navigateToProduct: h } = B(), { saveProduct: g, unsaveProduct: P } = V(), [f, y] = A(t.isFavorited), x = C(() => {
     a && (d?.(), h({
       productId: t.id
     }));
@@ -222,7 +221,7 @@ function at({
     g,
     P,
     c
-  ]), N = k(
+  ]), F = k(
     () => ({
       // Core data
       product: t,
@@ -252,7 +251,7 @@ function at({
       l
     ]
   );
-  return /* @__PURE__ */ o(b.Provider, { value: N, children: p ?? /* @__PURE__ */ v(M, { children: [
+  return /* @__PURE__ */ o(b.Provider, { value: F, children: p ?? /* @__PURE__ */ v(M, { children: [
     /* @__PURE__ */ v(R, { children: [
       /* @__PURE__ */ o(q, {}),
       r === "priceOverlay" && /* @__PURE__ */ o(K, {}),

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

@@ -1 +1 @@
-{"version":3,"file":"product-card.js","sources":["../../../src/components/commerce/product-card.tsx"],"sourcesContent":["import * as React from 'react'\nimport {useCallback, useContext, useMemo, useState} from 'react'\n\nimport {type Product, type ProductVariant} from '@shopify/shop-minis-platform'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'\nimport {formatMoney} from '../../lib/formatMoney'\nimport {cn} from '../../lib/utils'\nimport {Image} from '../atoms/image'\nimport {ProductVariantPrice} from '../atoms/product-variant-price'\nimport {Touchable} from '../atoms/touchable'\nimport {Badge} from '../ui/badge'\n\nimport {FavoriteButton} from './favorite-button'\n\n// Context definition\ninterface ProductCardContextValue {\n  // Core data\n  product: Product\n  selectedProductVariant?: ProductVariant\n\n  // UI configuration\n  variant: 'default' | 'priceOverlay' | 'compact'\n  touchable: boolean\n  badgeText?: string\n  badgeVariant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'none'\n\n  // State\n  isFavorited: boolean\n  isFavoriteButtonDisabled: boolean\n\n  // Actions\n  onClick: () => void\n  onFavoriteToggle: () => void\n}\n\nconst ProductCardContext = React.createContext<\n  ProductCardContextValue | undefined\n>(undefined)\n\nfunction useProductCardContext() {\n  const context = useContext(ProductCardContext)\n  if (!context) {\n    throw new Error(\n      'ProductCard components must be used within a ProductCard provider'\n    )\n  }\n  return context\n}\n\n// Primitive components (building blocks)\nfunction ProductCardContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {touchable, onClick} = useProductCardContext()\n\n  const content = (\n    <div\n      className={cn(\n        'relative w-full overflow-hidden rounded-xl border-0',\n        className\n      )}\n      {...props}\n    />\n  )\n\n  if (touchable && onClick) {\n    return (\n      <Touchable\n        onClick={onClick}\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 ProductCardImageContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {variant} = useProductCardContext()\n\n  return (\n    <div\n      data-slot=\"product-card-image-container\"\n      className={cn(\n        // Ensure the product image is stretched to the full size of the container (can't use width/height: 100% because of flex)\n        'flex justify-stretch items-stretch',\n        'relative overflow-hidden rounded-xl border border-gray-200',\n        'w-full  aspect-square',\n        variant === 'compact' ? 'min-h-[104px]' : 'min-h-[134px]',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductCardImage({className, ...props}: React.ComponentProps<'img'>) {\n  const {product, selectedProductVariant} = useProductCardContext()\n\n  // Derive display image locally\n  const displayImage = selectedProductVariant?.image || product.featuredImage\n  const src = displayImage?.url\n  const alt = displayImage?.altText || product.title\n  const thumbhash = product.featuredImage?.thumbhash\n\n  const renderImageElement = useCallback(\n    (src: string) => {\n      const imageElement = thumbhash ? (\n        <Image\n          data-slot=\"product-card-image\"\n          src={src}\n          alt={alt}\n          aspectRatio={1}\n          thumbhash={thumbhash}\n          className={cn('size-full object-cover', className)}\n          {...props}\n        />\n      ) : (\n        <img\n          data-slot=\"product-card-image\"\n          src={src}\n          alt={alt}\n          className={cn('size-full', className)}\n          {...props}\n        />\n      )\n\n      return imageElement\n    },\n    [alt, className, props, thumbhash]\n  )\n\n  return (\n    <div className=\"bg-gray-100 flex items-center justify-center size-full\">\n      {src ? (\n        renderImageElement(src)\n      ) : (\n        <div className=\"text-gray-400 text-sm w-full text-center\">No Image</div>\n      )}\n    </div>\n  )\n}\n\nfunction ProductCardBadge({\n  className,\n  position = 'bottom-left',\n  variant,\n  children,\n  ...props\n}: React.ComponentProps<typeof Badge> & {\n  position?: 'top-left' | 'bottom-left'\n}) {\n  const {badgeText, badgeVariant} = useProductCardContext()\n  // If no children provided, use badgeText from context\n  const content = children || badgeText\n\n  if (!content) return null\n\n  return (\n    <div\n      className={cn(\n        'absolute z-10',\n        position === 'top-left' ? 'top-3 left-3' : 'bottom-2 left-2'\n      )}\n    >\n      <Badge\n        variant={variant ?? badgeVariant ?? 'none'}\n        className={cn(\n          !badgeVariant &&\n            !variant &&\n            'bg-black/50 text-white border-transparent',\n          'rounded',\n          className\n        )}\n        {...props}\n      >\n        {content}\n      </Badge>\n    </div>\n  )\n}\n\nfunction ProductCardFavoriteButton({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {isFavorited, isFavoriteButtonDisabled, onFavoriteToggle} =\n    useProductCardContext()\n  if (isFavoriteButtonDisabled) return null\n\n  return (\n    <div className={cn('absolute bottom-3 right-3 z-10', className)} {...props}>\n      <FavoriteButton onClick={onFavoriteToggle} filled={isFavorited} />\n    </div>\n  )\n}\n\nfunction ProductCardInfo({className, ...props}: React.ComponentProps<'div'>) {\n  const {variant} = useProductCardContext()\n  if (variant !== 'default') {\n    return null\n  }\n\n  return (\n    <div\n      data-slot=\"product-card-info\"\n      className={cn('px-1 pt-2 pb-0 space-y-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductCardTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  const {product} = useProductCardContext()\n  return (\n    <h3\n      data-slot=\"product-card-title\"\n      className={cn(\n        'text-sm font-medium leading-tight text-gray-900',\n        'truncate overflow-hidden whitespace-nowrap text-ellipsis',\n        className\n      )}\n      {...props}\n    >\n      {children || product.title}\n    </h3>\n  )\n}\n\nfunction ProductCardPrice({className}: {className?: string}) {\n  const {product, selectedProductVariant} = useProductCardContext()\n\n  // Derive price data locally\n  const displayPrice = selectedProductVariant?.price || product?.price\n  const displayCompareAtPrice =\n    selectedProductVariant?.compareAtPrice || product?.compareAtPrice\n\n  return (\n    <ProductVariantPrice\n      amount={displayPrice?.amount || ''}\n      currencyCode={displayPrice?.currencyCode || ''}\n      compareAtPriceAmount={displayCompareAtPrice?.amount}\n      compareAtPriceCurrencyCode={displayCompareAtPrice?.currencyCode}\n      className={className}\n    />\n  )\n}\n\n// Special PriceOverlayBadge for price overlay variant\nfunction ProductCardPriceOverlayBadge() {\n  const {product, selectedProductVariant, variant} = useProductCardContext()\n  if (variant !== 'priceOverlay') return null\n  const displayPrice = selectedProductVariant?.price || product.price\n  const currencyCode = displayPrice?.currencyCode\n  const amount = displayPrice?.amount\n\n  if (!currencyCode || !amount) return null\n  return (\n    <ProductCardBadge position=\"top-left\">\n      {formatMoney(amount, currencyCode)}\n    </ProductCardBadge>\n  )\n}\n\nexport interface ProductCardProps {\n  /** The product to display in the card */\n  product: Product\n  /** Optional selected variant of the product to show specific variant data */\n  selectedProductVariant?: ProductVariant\n  /** Visual style variant of the card */\n  variant?: 'default' | 'priceOverlay' | 'compact'\n  /** Whether the card can be clicked/tapped to navigate to product details */\n  touchable?: boolean\n  /** Optional text to display in a badge on the card */\n  badgeText?: string\n  /** Visual style variant for the badge */\n  badgeVariant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'none'\n  /** Callback fired when the product is clicked */\n  onProductClick?: () => void\n  /** Callback fired when the favorite button is toggled */\n  onFavoriteToggled?: (isFavorited: boolean) => void\n  /** Custom layout via children */\n  children?: React.ReactNode\n  /** Whether the favorite button is disabled */\n  favoriteButtonDisabled?: boolean\n}\n\nfunction ProductCard({\n  product,\n  selectedProductVariant,\n  variant = 'default',\n  touchable = true,\n  badgeText,\n  badgeVariant,\n  onProductClick,\n  onFavoriteToggled,\n  children,\n  favoriteButtonDisabled = false,\n}: ProductCardProps) {\n  const {navigateToProduct} = useShopNavigation()\n  const {saveProduct, unsaveProduct} = useSavedProductsActions()\n\n  // Local state for optimistic UI updates\n  const [isFavoritedLocal, setIsFavoritedLocal] = useState(product.isFavorited)\n\n  const handleClick = useCallback(() => {\n    if (!touchable) return\n\n    onProductClick?.()\n\n    navigateToProduct({\n      productId: product.id,\n    })\n  }, [navigateToProduct, product.id, touchable, onProductClick])\n\n  const handleFavoriteClick = useCallback(async () => {\n    const previousState = isFavoritedLocal\n\n    // Optimistic update\n    setIsFavoritedLocal(!previousState)\n    onFavoriteToggled?.(!previousState)\n\n    try {\n      if (previousState) {\n        await unsaveProduct({\n          productId: product.id,\n          shopId: product.shop.id,\n          productVariantId:\n            selectedProductVariant?.id || product.defaultVariantId,\n        })\n      } else {\n        await saveProduct({\n          productId: product.id,\n          shopId: product.shop.id,\n          productVariantId:\n            selectedProductVariant?.id || product.defaultVariantId,\n        })\n      }\n    } catch (error) {\n      // Revert optimistic update on error\n      setIsFavoritedLocal(previousState)\n      onFavoriteToggled?.(previousState)\n    }\n  }, [\n    isFavoritedLocal,\n    product.id,\n    product.shop.id,\n    product.defaultVariantId,\n    selectedProductVariant?.id,\n    saveProduct,\n    unsaveProduct,\n    onFavoriteToggled,\n  ])\n\n  const contextValue = useMemo<ProductCardContextValue>(\n    () => ({\n      // Core data\n      product,\n      selectedProductVariant,\n\n      // UI configuration\n      variant,\n      touchable,\n      badgeText,\n      badgeVariant,\n\n      // State\n      isFavorited: isFavoritedLocal,\n      isFavoriteButtonDisabled: favoriteButtonDisabled,\n      // Actions\n      onClick: handleClick,\n      onFavoriteToggle: handleFavoriteClick,\n    }),\n    [\n      product,\n      selectedProductVariant,\n      variant,\n      touchable,\n      badgeText,\n      badgeVariant,\n      isFavoritedLocal,\n      handleClick,\n      handleFavoriteClick,\n      favoriteButtonDisabled,\n    ]\n  )\n\n  return (\n    <ProductCardContext.Provider value={contextValue}>\n      {children ?? (\n        <ProductCardContainer>\n          <ProductCardImageContainer>\n            <ProductCardImage />\n            {variant === 'priceOverlay' && <ProductCardPriceOverlayBadge />}\n            <ProductCardBadge />\n            <ProductCardFavoriteButton />\n          </ProductCardImageContainer>\n          {variant === 'default' && (\n            <ProductCardInfo>\n              <ProductCardTitle />\n              <ProductCardPrice />\n            </ProductCardInfo>\n          )}\n        </ProductCardContainer>\n      )}\n    </ProductCardContext.Provider>\n  )\n}\n\nexport {\n  ProductCard,\n  ProductCardContainer,\n  ProductCardImageContainer,\n  ProductCardImage,\n  ProductCardBadge,\n  ProductCardFavoriteButton,\n  ProductCardInfo,\n  ProductCardTitle,\n  ProductCardPrice,\n}\n"],"names":["ProductCardContext","React","useProductCardContext","context","useContext","ProductCardContainer","className","props","touchable","onClick","content","jsx","cn","Touchable","ProductCardImageContainer","variant","ProductCardImage","product","selectedProductVariant","displayImage","src","alt","thumbhash","renderImageElement","useCallback","Image","ProductCardBadge","position","children","badgeText","badgeVariant","Badge","ProductCardFavoriteButton","isFavorited","isFavoriteButtonDisabled","onFavoriteToggle","FavoriteButton","ProductCardInfo","ProductCardTitle","ProductCardPrice","displayPrice","displayCompareAtPrice","ProductVariantPrice","ProductCardPriceOverlayBadge","currencyCode","amount","formatMoney","ProductCard","onProductClick","onFavoriteToggled","favoriteButtonDisabled","navigateToProduct","useShopNavigation","saveProduct","unsaveProduct","useSavedProductsActions","isFavoritedLocal","setIsFavoritedLocal","useState","handleClick","handleFavoriteClick","previousState","contextValue","useMemo","jsxs"],"mappings":"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"}
+{"version":3,"file":"product-card.js","sources":["../../../src/components/commerce/product-card.tsx"],"sourcesContent":["import * as React from 'react'\nimport {useCallback, useContext, useMemo, useState} from 'react'\n\nimport {type Product, type ProductVariant} from '@shopify/shop-minis-platform'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'\nimport {formatMoney} from '../../lib/formatMoney'\nimport {cn} from '../../lib/utils'\nimport {Image} from '../atoms/image'\nimport {ProductVariantPrice} from '../atoms/product-variant-price'\nimport {Touchable} from '../atoms/touchable'\nimport {Badge} from '../ui/badge'\n\nimport {FavoriteButton} from './favorite-button'\n\n// Context definition\ninterface ProductCardContextValue {\n  // Core data\n  product: Product\n  selectedProductVariant?: ProductVariant\n\n  // UI configuration\n  variant: 'default' | 'priceOverlay' | 'compact'\n  touchable: boolean\n  badgeText?: string\n  badgeVariant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'none'\n\n  // State\n  isFavorited: boolean\n  isFavoriteButtonDisabled: boolean\n\n  // Actions\n  onClick: () => void\n  onFavoriteToggle: () => void\n}\n\nconst ProductCardContext = React.createContext<\n  ProductCardContextValue | undefined\n>(undefined)\n\nfunction useProductCardContext() {\n  const context = useContext(ProductCardContext)\n  if (!context) {\n    throw new Error(\n      'ProductCard components must be used within a ProductCard provider'\n    )\n  }\n  return context\n}\n\n// Primitive components (building blocks)\nfunction ProductCardContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {touchable, onClick} = useProductCardContext()\n\n  const content = (\n    <div\n      className={cn(\n        'relative size-full overflow-hidden rounded-xl border-0',\n        className\n      )}\n      {...props}\n    />\n  )\n\n  if (touchable && onClick) {\n    return (\n      <Touchable\n        onClick={onClick}\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 ProductCardImageContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {variant} = useProductCardContext()\n\n  return (\n    <div\n      data-slot=\"product-card-image-container\"\n      className={cn(\n        'relative overflow-hidden rounded-xl border border-gray-200',\n        'aspect-square',\n        variant === 'compact' ? 'min-h-[104px]' : 'min-h-[134px]',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductCardImage({className, ...props}: React.ComponentProps<'img'>) {\n  const {product, selectedProductVariant} = useProductCardContext()\n\n  // Derive display image locally\n  const displayImage = selectedProductVariant?.image || product.featuredImage\n  const src = displayImage?.url\n  const alt = displayImage?.altText || product.title\n  const thumbhash = product.featuredImage?.thumbhash\n\n  const renderImageElement = useCallback(\n    (src: string) => {\n      const imageElement = thumbhash ? (\n        <Image\n          data-slot=\"product-card-image\"\n          src={src}\n          alt={alt}\n          aspectRatio={1}\n          thumbhash={thumbhash}\n          objectFit=\"cover\"\n          className={cn('size-full', className)}\n          {...props}\n        />\n      ) : (\n        <img\n          data-slot=\"product-card-image\"\n          src={src}\n          alt={alt}\n          className={cn('size-full object-cover', className)}\n          {...props}\n        />\n      )\n\n      return imageElement\n    },\n    [alt, className, props, thumbhash]\n  )\n\n  return (\n    <div className=\"bg-gray-100 flex items-center justify-center size-full\">\n      {src ? (\n        renderImageElement(src)\n      ) : (\n        <div className=\"text-gray-400 text-sm w-full text-center\">No Image</div>\n      )}\n    </div>\n  )\n}\n\nfunction ProductCardBadge({\n  className,\n  position = 'bottom-left',\n  variant,\n  children,\n  ...props\n}: React.ComponentProps<typeof Badge> & {\n  position?: 'top-left' | 'bottom-left'\n}) {\n  const {badgeText, badgeVariant} = useProductCardContext()\n  // If no children provided, use badgeText from context\n  const content = children || badgeText\n\n  if (!content) return null\n\n  return (\n    <div\n      className={cn(\n        'absolute z-10',\n        position === 'top-left' ? 'top-3 left-3' : 'bottom-2 left-2'\n      )}\n    >\n      <Badge\n        variant={variant ?? badgeVariant ?? 'none'}\n        className={cn(\n          !badgeVariant &&\n            !variant &&\n            'bg-black/50 text-white border-transparent',\n          'rounded',\n          className\n        )}\n        {...props}\n      >\n        {content}\n      </Badge>\n    </div>\n  )\n}\n\nfunction ProductCardFavoriteButton({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {isFavorited, isFavoriteButtonDisabled, onFavoriteToggle} =\n    useProductCardContext()\n  if (isFavoriteButtonDisabled) return null\n\n  return (\n    <div className={cn('absolute bottom-3 right-3 z-10', className)} {...props}>\n      <FavoriteButton onClick={onFavoriteToggle} filled={isFavorited} />\n    </div>\n  )\n}\n\nfunction ProductCardInfo({className, ...props}: React.ComponentProps<'div'>) {\n  const {variant} = useProductCardContext()\n  if (variant !== 'default') {\n    return null\n  }\n\n  return (\n    <div\n      data-slot=\"product-card-info\"\n      className={cn('px-1 pt-2 pb-0 space-y-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductCardTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  const {product} = useProductCardContext()\n  return (\n    <h3\n      data-slot=\"product-card-title\"\n      className={cn(\n        'text-sm font-medium leading-tight text-gray-900',\n        'truncate overflow-hidden whitespace-nowrap text-ellipsis',\n        className\n      )}\n      {...props}\n    >\n      {children || product.title}\n    </h3>\n  )\n}\n\nfunction ProductCardPrice({className}: {className?: string}) {\n  const {product, selectedProductVariant} = useProductCardContext()\n\n  // Derive price data locally\n  const displayPrice = selectedProductVariant?.price || product?.price\n  const displayCompareAtPrice =\n    selectedProductVariant?.compareAtPrice || product?.compareAtPrice\n\n  return (\n    <ProductVariantPrice\n      amount={displayPrice?.amount || ''}\n      currencyCode={displayPrice?.currencyCode || ''}\n      compareAtPriceAmount={displayCompareAtPrice?.amount}\n      compareAtPriceCurrencyCode={displayCompareAtPrice?.currencyCode}\n      className={className}\n    />\n  )\n}\n\n// Special PriceOverlayBadge for price overlay variant\nfunction ProductCardPriceOverlayBadge() {\n  const {product, selectedProductVariant, variant} = useProductCardContext()\n  if (variant !== 'priceOverlay') return null\n  const displayPrice = selectedProductVariant?.price || product.price\n  const currencyCode = displayPrice?.currencyCode\n  const amount = displayPrice?.amount\n\n  if (!currencyCode || !amount) return null\n  return (\n    <ProductCardBadge position=\"top-left\">\n      {formatMoney(amount, currencyCode)}\n    </ProductCardBadge>\n  )\n}\n\nexport interface ProductCardProps {\n  /** The product to display in the card */\n  product: Product\n  /** Optional selected variant of the product to show specific variant data */\n  selectedProductVariant?: ProductVariant\n  /** Visual style variant of the card */\n  variant?: 'default' | 'priceOverlay' | 'compact'\n  /** Whether the card can be clicked/tapped to navigate to product details */\n  touchable?: boolean\n  /** Optional text to display in a badge on the card */\n  badgeText?: string\n  /** Visual style variant for the badge */\n  badgeVariant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'none'\n  /** Callback fired when the product is clicked */\n  onProductClick?: () => void\n  /** Callback fired when the favorite button is toggled */\n  onFavoriteToggled?: (isFavorited: boolean) => void\n  /** Custom layout via children */\n  children?: React.ReactNode\n  /** Whether the favorite button is disabled */\n  favoriteButtonDisabled?: boolean\n}\n\nfunction ProductCard({\n  product,\n  selectedProductVariant,\n  variant = 'default',\n  touchable = true,\n  badgeText,\n  badgeVariant,\n  onProductClick,\n  onFavoriteToggled,\n  children,\n  favoriteButtonDisabled = false,\n}: ProductCardProps) {\n  const {navigateToProduct} = useShopNavigation()\n  const {saveProduct, unsaveProduct} = useSavedProductsActions()\n\n  // Local state for optimistic UI updates\n  const [isFavoritedLocal, setIsFavoritedLocal] = useState(product.isFavorited)\n\n  const handleClick = useCallback(() => {\n    if (!touchable) return\n\n    onProductClick?.()\n\n    navigateToProduct({\n      productId: product.id,\n    })\n  }, [navigateToProduct, product.id, touchable, onProductClick])\n\n  const handleFavoriteClick = useCallback(async () => {\n    const previousState = isFavoritedLocal\n\n    // Optimistic update\n    setIsFavoritedLocal(!previousState)\n    onFavoriteToggled?.(!previousState)\n\n    try {\n      if (previousState) {\n        await unsaveProduct({\n          productId: product.id,\n          shopId: product.shop.id,\n          productVariantId:\n            selectedProductVariant?.id || product.defaultVariantId,\n        })\n      } else {\n        await saveProduct({\n          productId: product.id,\n          shopId: product.shop.id,\n          productVariantId:\n            selectedProductVariant?.id || product.defaultVariantId,\n        })\n      }\n    } catch (error) {\n      // Revert optimistic update on error\n      setIsFavoritedLocal(previousState)\n      onFavoriteToggled?.(previousState)\n    }\n  }, [\n    isFavoritedLocal,\n    product.id,\n    product.shop.id,\n    product.defaultVariantId,\n    selectedProductVariant?.id,\n    saveProduct,\n    unsaveProduct,\n    onFavoriteToggled,\n  ])\n\n  const contextValue = useMemo<ProductCardContextValue>(\n    () => ({\n      // Core data\n      product,\n      selectedProductVariant,\n\n      // UI configuration\n      variant,\n      touchable,\n      badgeText,\n      badgeVariant,\n\n      // State\n      isFavorited: isFavoritedLocal,\n      isFavoriteButtonDisabled: favoriteButtonDisabled,\n      // Actions\n      onClick: handleClick,\n      onFavoriteToggle: handleFavoriteClick,\n    }),\n    [\n      product,\n      selectedProductVariant,\n      variant,\n      touchable,\n      badgeText,\n      badgeVariant,\n      isFavoritedLocal,\n      handleClick,\n      handleFavoriteClick,\n      favoriteButtonDisabled,\n    ]\n  )\n\n  return (\n    <ProductCardContext.Provider value={contextValue}>\n      {children ?? (\n        <ProductCardContainer>\n          <ProductCardImageContainer>\n            <ProductCardImage />\n            {variant === 'priceOverlay' && <ProductCardPriceOverlayBadge />}\n            <ProductCardBadge />\n            <ProductCardFavoriteButton />\n          </ProductCardImageContainer>\n          {variant === 'default' && (\n            <ProductCardInfo>\n              <ProductCardTitle />\n              <ProductCardPrice />\n            </ProductCardInfo>\n          )}\n        </ProductCardContainer>\n      )}\n    </ProductCardContext.Provider>\n  )\n}\n\nexport {\n  ProductCard,\n  ProductCardContainer,\n  ProductCardImageContainer,\n  ProductCardImage,\n  ProductCardBadge,\n  ProductCardFavoriteButton,\n  ProductCardInfo,\n  ProductCardTitle,\n  ProductCardPrice,\n}\n"],"names":["ProductCardContext","React","useProductCardContext","context","useContext","ProductCardContainer","className","props","touchable","onClick","content","jsx","cn","Touchable","ProductCardImageContainer","variant","ProductCardImage","product","selectedProductVariant","displayImage","src","alt","thumbhash","renderImageElement","useCallback","Image","ProductCardBadge","position","children","badgeText","badgeVariant","Badge","ProductCardFavoriteButton","isFavorited","isFavoriteButtonDisabled","onFavoriteToggle","FavoriteButton","ProductCardInfo","ProductCardTitle","ProductCardPrice","displayPrice","displayCompareAtPrice","ProductVariantPrice","ProductCardPriceOverlayBadge","currencyCode","amount","formatMoney","ProductCard","onProductClick","onFavoriteToggled","favoriteButtonDisabled","navigateToProduct","useShopNavigation","saveProduct","unsaveProduct","useSavedProductsActions","isFavoritedLocal","setIsFavoritedLocal","useState","handleClick","handleFavoriteClick","previousState","contextValue","useMemo","jsxs"],"mappings":"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"}

package/dist/components/commerce/search.js

@@ -16,8 +16,8 @@ function N() {
     throw new Error("useSearchContext must be used within a SearchProvider");
   return r;
 }
-function M({ initialQuery: r = "", children: a }) {
-  const [o, i] = C(r), { products: n, loading: t, error: c, fetchMore: l, hasNextPage: d, isTyping: s } = I({
+function M({ initialQuery: r = "", children: c }) {
+  const [o, i] = C(r), { products: n, loading: t, error: a, fetchMore: l, hasNextPage: d, isTyping: s } = I({
     query: o,
     fetchPolicy: "network-only"
   }), u = y((f) => {
@@ -27,21 +27,21 @@ function M({ initialQuery: r = "", children: a }) {
     setQuery: u,
     products: n,
     loading: t,
-    error: c,
+    error: a,
     fetchMore: l,
     hasNextPage: d,
     isTyping: s
   };
-  return /* @__PURE__ */ e(S.Provider, { value: h, children: a });
+  return /* @__PURE__ */ e(S.Provider, { value: h, children: c });
 }
 function A({
   placeholder: r = "Search products...",
-  className: a,
+  className: c,
   inputProps: o
 }) {
   const { query: i, setQuery: n } = N(), t = y(
-    (c) => {
-      n(c.target.value), o?.onChange?.(c);
+    (a) => {
+      n(a.target.value), o?.onChange?.(a);
     },
     [o, n]
   );
@@ -66,8 +66,8 @@ function A({
         "data-testid": "search-input",
         ...o,
         className: p(
-          "w-full flex overflow-hidden rounded-radius-28 border-none py-4 px-0 text-text placeholder:text-text placeholder:opacity-60",
-          a
+          "w-full flex overflow-hidden rounded-radius-28 border-none shadow-none py-4 px-0 text-text placeholder:text-text placeholder:opacity-60",
+          c
         )
       }
     ) }),
@@ -86,11 +86,11 @@ function A({
 }
 function E({
   height: r = window.innerHeight,
-  renderItem: a,
+  renderItem: c,
   initialStateComponent: o,
   showScrollbar: i
 }) {
-  const { query: n, products: t, loading: c, fetchMore: l, hasNextPage: d, isTyping: s } = N(), u = (x, w) => a ? a(x, w) : /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(v, { product: x, hideFavoriteAction: !0 }, x.id) }), h = n.trim().length === 0, f = (!t || t.length === 0) && (c || s), b = (!t || t.length === 0) && !c;
+  const { query: n, products: t, loading: a, fetchMore: l, hasNextPage: d, isTyping: s } = N(), u = (x, w) => c ? c(x, w) : /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(v, { product: x, hideFavoriteAction: !0 }, x.id) }), h = n.trim().length === 0, f = (!t || t.length === 0) && (a || s), b = (!t || t.length === 0) && !a;
   return h ? o || /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-32 text-gray-500", children: "Start typing to search for products" }) : f ? /* @__PURE__ */ g("div", { className: "flex flex-col px-4 py-4", children: [
     /* @__PURE__ */ e(m, { className: "mb-4" }),
     /* @__PURE__ */ e(m, { className: "mb-4" }),
@@ -109,12 +109,12 @@ function E({
 }
 function J({
   initialQuery: r,
-  placeholder: a,
+  placeholder: c,
   inputProps: o,
   height: i,
   className: n,
   renderItem: t,
-  itemHeight: c,
+  itemHeight: a,
   onProductClick: l
 }) {
   const d = (s, u) => t ? t(s, u) : /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
@@ -127,14 +127,14 @@ function J({
     s.id
   ) });
   return /* @__PURE__ */ e(M, { initialQuery: r, children: /* @__PURE__ */ g("div", { className: p("flex flex-col ", n), children: [
-    /* @__PURE__ */ e("div", { className: "fixed top-0 left-0 right-0 p-4 w-full z-20 bg-background", children: /* @__PURE__ */ e(A, { placeholder: a, inputProps: o }) }),
+    /* @__PURE__ */ e("div", { className: "fixed top-0 left-0 right-0 p-4 w-full z-20 bg-background", children: /* @__PURE__ */ e(A, { placeholder: c, inputProps: o }) }),
     /* @__PURE__ */ e("div", { className: "h-14" }),
     /* @__PURE__ */ e(
       E,
       {
         height: i,
         renderItem: d,
-        itemHeight: c,
+        itemHeight: a,
         showScrollbar: !0
       }
     )

package/dist/components/commerce/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","sources":["../../../src/components/commerce/search.tsx"],"sourcesContent":["import * as React from 'react'\nimport {createContext, useContext, useState, useCallback} from 'react'\n\nimport {SearchIcon, X} from 'lucide-react'\n\nimport {useProductSearch} from '../../hooks/product/useProductSearch'\nimport {cn} from '../../lib/utils'\nimport {type Product} from '../../types'\nimport {IconButton} from '../atoms/icon-button'\nimport {List} from '../atoms/list'\nimport {Input} from '../ui/input'\n\nimport {ProductLink} from './product-link'\nimport {ProductLinkSkeleton} from './product-link-skeleton'\n\ninterface SearchContextValue {\n  query: string\n  setQuery: (query: string) => void\n  products: Product[] | null\n  loading: boolean\n  error: Error | null\n  fetchMore?: () => Promise<void>\n  hasNextPage: boolean\n  isTyping: boolean\n}\n\nconst SearchContext = createContext<SearchContextValue | null>(null)\n\nfunction useSearchContext() {\n  const context = useContext(SearchContext)\n  if (!context) {\n    throw new Error('useSearchContext must be used within a SearchProvider')\n  }\n  return context\n}\n\nexport interface SearchProviderProps {\n  initialQuery?: string\n  children: React.ReactNode\n}\n\nfunction SearchProvider({initialQuery = '', children}: SearchProviderProps) {\n  const [query, setQueryState] = useState(initialQuery)\n\n  const {products, loading, error, fetchMore, hasNextPage, isTyping} =\n    useProductSearch({\n      query,\n      fetchPolicy: 'network-only',\n    })\n\n  const setQuery = useCallback((newQuery: string) => {\n    setQueryState(newQuery)\n  }, [])\n\n  const contextValue: SearchContextValue = {\n    query,\n    setQuery,\n    products,\n    loading,\n    error,\n    fetchMore,\n    hasNextPage,\n    isTyping,\n  }\n\n  return (\n    <SearchContext.Provider value={contextValue}>\n      {children}\n    </SearchContext.Provider>\n  )\n}\n\nexport interface SearchInputProps {\n  placeholder?: string\n  className?: string\n  inputProps?: React.ComponentProps<'input'>\n}\n\nfunction SearchInput({\n  placeholder = 'Search products...',\n  className,\n  inputProps,\n}: SearchInputProps) {\n  const {query, setQuery} = useSearchContext()\n\n  const handleQueryChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setQuery(event.target.value)\n      inputProps?.onChange?.(event)\n    },\n    [inputProps, setQuery]\n  )\n\n  return (\n    <div className=\"relative flex flex-1 items-center rounded-full pl-4 pr-2 py-1 bg-gray-100\">\n      <div className=\"relative flex items-center\">\n        <SearchIcon\n          size={18}\n          className={cn('text-accent-foreground opacity-60')}\n        />\n      </div>\n      <div className=\"relative flex-1 flex items-center mx-2\">\n        <Input\n          name=\"search\"\n          onChange={handleQueryChange}\n          placeholder={placeholder}\n          type=\"search\"\n          role=\"searchbox\"\n          autoComplete=\"off\"\n          value={query}\n          data-testid=\"search-input\"\n          {...inputProps}\n          className={cn(\n            `w-full flex overflow-hidden rounded-radius-28 border-none py-4 px-0 text-text placeholder:text-text placeholder:opacity-60`,\n            className\n          )}\n        />\n      </div>\n      <div className=\"relative flex items-center\">\n        {query === '' ? null : (\n          <IconButton\n            Icon={X}\n            size=\"sm\"\n            filled={false}\n            iconStyles=\"\"\n            onClick={() => setQuery('')}\n            buttonStyles=\"flex items-center rounded-radius-max bg-[var(--grayscale-l20)]\"\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport interface SearchResultsListProps {\n  renderItem?: (product: Product, index: number) => React.ReactNode\n  height?: number\n  itemHeight?: number\n  initialStateComponent?: React.JSX.Element\n  showScrollbar?: boolean\n  overscanCount?: number\n}\n\nfunction SearchResultsList({\n  height = window.innerHeight,\n  renderItem,\n  initialStateComponent,\n  showScrollbar,\n}: SearchResultsListProps) {\n  const {query, products, loading, fetchMore, hasNextPage, isTyping} =\n    useSearchContext()\n\n  const _renderItem = (product: Product, index: number) => {\n    if (renderItem) {\n      return renderItem(product, index)\n    }\n\n    return (\n      <div className=\"p-2\">\n        <ProductLink key={product.id} product={product} hideFavoriteAction />\n      </div>\n    )\n  }\n\n  const shouldShowStartingState = query.trim().length === 0\n  const shouldShowLoading =\n    (!products || products.length === 0) && (loading || isTyping)\n  const shouldShowEmptyState = (!products || products.length === 0) && !loading\n\n  if (shouldShowStartingState) {\n    return (\n      initialStateComponent || (\n        <div className=\"flex items-center justify-center h-32 text-gray-500\">\n          Start typing to search for products\n        </div>\n      )\n    )\n  }\n\n  if (shouldShowLoading) {\n    return (\n      <div className=\"flex flex-col px-4 py-4\">\n        <ProductLinkSkeleton className=\"mb-4\" />\n        <ProductLinkSkeleton className=\"mb-4\" />\n        <ProductLinkSkeleton className=\"mb-4\" />\n        <ProductLinkSkeleton className=\"mb-4\" />\n      </div>\n    )\n  }\n\n  if (shouldShowEmptyState) {\n    return (\n      <div className=\"flex items-center justify-center h-32 text-gray-500\">\n        {`No products found for \"${query}\"`}\n      </div>\n    )\n  }\n\n  return (\n    <List\n      items={products || []}\n      height={height}\n      renderItem={_renderItem}\n      fetchMore={hasNextPage ? fetchMore : undefined}\n      showScrollbar={showScrollbar}\n    />\n  )\n}\n\ninterface SearchProviderPropsWithoutChildren\n  extends Omit<SearchProviderProps, 'children'> {}\nexport interface SearchResultsProps\n  extends SearchProviderPropsWithoutChildren,\n    SearchInputProps,\n    SearchResultsListProps {\n  showSearchInput?: boolean\n  onProductClick?: (product: Product) => void\n}\n\nfunction Search({\n  initialQuery,\n  placeholder,\n  inputProps,\n  height,\n  className,\n  renderItem,\n  itemHeight,\n  onProductClick,\n}: SearchResultsProps) {\n  const _renderItem = (product: Product, index: number) => {\n    if (renderItem) {\n      return renderItem(product, index)\n    }\n\n    return (\n      <div className=\"p-2\">\n        <ProductLink\n          key={product.id}\n          product={product}\n          hideFavoriteAction\n          onClick={onProductClick}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <SearchProvider initialQuery={initialQuery}>\n      <div className={cn('flex flex-col ', className)}>\n        <div className=\"fixed top-0 left-0 right-0 p-4 w-full z-20 bg-background\">\n          <SearchInput placeholder={placeholder} inputProps={inputProps} />\n        </div>\n        <div className=\"h-14\" />\n        <SearchResultsList\n          height={height}\n          renderItem={_renderItem}\n          itemHeight={itemHeight}\n          showScrollbar\n        />\n      </div>\n    </SearchProvider>\n  )\n}\n\nexport {SearchProvider, SearchInput, SearchResultsList, Search}\n"],"names":["SearchContext","createContext","useSearchContext","context","useContext","SearchProvider","initialQuery","children","query","setQueryState","useState","products","loading","error","fetchMore","hasNextPage","isTyping","useProductSearch","setQuery","useCallback","newQuery","contextValue","SearchInput","placeholder","className","inputProps","handleQueryChange","event","jsxs","jsx","SearchIcon","cn","Input","IconButton","X","SearchResultsList","height","renderItem","initialStateComponent","showScrollbar","_renderItem","product","index","ProductLink","shouldShowStartingState","shouldShowLoading","shouldShowEmptyState","ProductLinkSkeleton","List","Search","itemHeight","onProductClick"],"mappings":"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"}
+{"version":3,"file":"search.js","sources":["../../../src/components/commerce/search.tsx"],"sourcesContent":["import * as React from 'react'\nimport {createContext, useContext, useState, useCallback} from 'react'\n\nimport {SearchIcon, X} from 'lucide-react'\n\nimport {useProductSearch} from '../../hooks/product/useProductSearch'\nimport {cn} from '../../lib/utils'\nimport {type Product} from '../../types'\nimport {IconButton} from '../atoms/icon-button'\nimport {List} from '../atoms/list'\nimport {Input} from '../ui/input'\n\nimport {ProductLink} from './product-link'\nimport {ProductLinkSkeleton} from './product-link-skeleton'\n\ninterface SearchContextValue {\n  query: string\n  setQuery: (query: string) => void\n  products: Product[] | null\n  loading: boolean\n  error: Error | null\n  fetchMore?: () => Promise<void>\n  hasNextPage: boolean\n  isTyping: boolean\n}\n\nconst SearchContext = createContext<SearchContextValue | null>(null)\n\nfunction useSearchContext() {\n  const context = useContext(SearchContext)\n  if (!context) {\n    throw new Error('useSearchContext must be used within a SearchProvider')\n  }\n  return context\n}\n\nexport interface SearchProviderProps {\n  initialQuery?: string\n  children: React.ReactNode\n}\n\nfunction SearchProvider({initialQuery = '', children}: SearchProviderProps) {\n  const [query, setQueryState] = useState(initialQuery)\n\n  const {products, loading, error, fetchMore, hasNextPage, isTyping} =\n    useProductSearch({\n      query,\n      fetchPolicy: 'network-only',\n    })\n\n  const setQuery = useCallback((newQuery: string) => {\n    setQueryState(newQuery)\n  }, [])\n\n  const contextValue: SearchContextValue = {\n    query,\n    setQuery,\n    products,\n    loading,\n    error,\n    fetchMore,\n    hasNextPage,\n    isTyping,\n  }\n\n  return (\n    <SearchContext.Provider value={contextValue}>\n      {children}\n    </SearchContext.Provider>\n  )\n}\n\nexport interface SearchInputProps {\n  placeholder?: string\n  className?: string\n  inputProps?: React.ComponentProps<'input'>\n}\n\nfunction SearchInput({\n  placeholder = 'Search products...',\n  className,\n  inputProps,\n}: SearchInputProps) {\n  const {query, setQuery} = useSearchContext()\n\n  const handleQueryChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setQuery(event.target.value)\n      inputProps?.onChange?.(event)\n    },\n    [inputProps, setQuery]\n  )\n\n  return (\n    <div className=\"relative flex flex-1 items-center rounded-full pl-4 pr-2 py-1 bg-gray-100\">\n      <div className=\"relative flex items-center\">\n        <SearchIcon\n          size={18}\n          className={cn('text-accent-foreground opacity-60')}\n        />\n      </div>\n      <div className=\"relative flex-1 flex items-center mx-2\">\n        <Input\n          name=\"search\"\n          onChange={handleQueryChange}\n          placeholder={placeholder}\n          type=\"search\"\n          role=\"searchbox\"\n          autoComplete=\"off\"\n          value={query}\n          data-testid=\"search-input\"\n          {...inputProps}\n          className={cn(\n            `w-full flex overflow-hidden rounded-radius-28 border-none shadow-none py-4 px-0 text-text placeholder:text-text placeholder:opacity-60`,\n            className\n          )}\n        />\n      </div>\n      <div className=\"relative flex items-center\">\n        {query === '' ? null : (\n          <IconButton\n            Icon={X}\n            size=\"sm\"\n            filled={false}\n            iconStyles=\"\"\n            onClick={() => setQuery('')}\n            buttonStyles=\"flex items-center rounded-radius-max bg-[var(--grayscale-l20)]\"\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport interface SearchResultsListProps {\n  renderItem?: (product: Product, index: number) => React.ReactNode\n  height?: number\n  itemHeight?: number\n  initialStateComponent?: React.JSX.Element\n  showScrollbar?: boolean\n  overscanCount?: number\n}\n\nfunction SearchResultsList({\n  height = window.innerHeight,\n  renderItem,\n  initialStateComponent,\n  showScrollbar,\n}: SearchResultsListProps) {\n  const {query, products, loading, fetchMore, hasNextPage, isTyping} =\n    useSearchContext()\n\n  const _renderItem = (product: Product, index: number) => {\n    if (renderItem) {\n      return renderItem(product, index)\n    }\n\n    return (\n      <div className=\"p-2\">\n        <ProductLink key={product.id} product={product} hideFavoriteAction />\n      </div>\n    )\n  }\n\n  const shouldShowStartingState = query.trim().length === 0\n  const shouldShowLoading =\n    (!products || products.length === 0) && (loading || isTyping)\n  const shouldShowEmptyState = (!products || products.length === 0) && !loading\n\n  if (shouldShowStartingState) {\n    return (\n      initialStateComponent || (\n        <div className=\"flex items-center justify-center h-32 text-gray-500\">\n          Start typing to search for products\n        </div>\n      )\n    )\n  }\n\n  if (shouldShowLoading) {\n    return (\n      <div className=\"flex flex-col px-4 py-4\">\n        <ProductLinkSkeleton className=\"mb-4\" />\n        <ProductLinkSkeleton className=\"mb-4\" />\n        <ProductLinkSkeleton className=\"mb-4\" />\n        <ProductLinkSkeleton className=\"mb-4\" />\n      </div>\n    )\n  }\n\n  if (shouldShowEmptyState) {\n    return (\n      <div className=\"flex items-center justify-center h-32 text-gray-500\">\n        {`No products found for \"${query}\"`}\n      </div>\n    )\n  }\n\n  return (\n    <List\n      items={products || []}\n      height={height}\n      renderItem={_renderItem}\n      fetchMore={hasNextPage ? fetchMore : undefined}\n      showScrollbar={showScrollbar}\n    />\n  )\n}\n\ninterface SearchProviderPropsWithoutChildren\n  extends Omit<SearchProviderProps, 'children'> {}\nexport interface SearchResultsProps\n  extends SearchProviderPropsWithoutChildren,\n    SearchInputProps,\n    SearchResultsListProps {\n  showSearchInput?: boolean\n  onProductClick?: (product: Product) => void\n}\n\nfunction Search({\n  initialQuery,\n  placeholder,\n  inputProps,\n  height,\n  className,\n  renderItem,\n  itemHeight,\n  onProductClick,\n}: SearchResultsProps) {\n  const _renderItem = (product: Product, index: number) => {\n    if (renderItem) {\n      return renderItem(product, index)\n    }\n\n    return (\n      <div className=\"p-2\">\n        <ProductLink\n          key={product.id}\n          product={product}\n          hideFavoriteAction\n          onClick={onProductClick}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <SearchProvider initialQuery={initialQuery}>\n      <div className={cn('flex flex-col ', className)}>\n        <div className=\"fixed top-0 left-0 right-0 p-4 w-full z-20 bg-background\">\n          <SearchInput placeholder={placeholder} inputProps={inputProps} />\n        </div>\n        <div className=\"h-14\" />\n        <SearchResultsList\n          height={height}\n          renderItem={_renderItem}\n          itemHeight={itemHeight}\n          showScrollbar\n        />\n      </div>\n    </SearchProvider>\n  )\n}\n\nexport {SearchProvider, SearchInput, SearchResultsList, Search}\n"],"names":["SearchContext","createContext","useSearchContext","context","useContext","SearchProvider","initialQuery","children","query","setQueryState","useState","products","loading","error","fetchMore","hasNextPage","isTyping","useProductSearch","setQuery","useCallback","newQuery","contextValue","SearchInput","placeholder","className","inputProps","handleQueryChange","event","jsxs","jsx","SearchIcon","cn","Input","IconButton","X","SearchResultsList","height","renderItem","initialStateComponent","showScrollbar","_renderItem","product","index","ProductLink","shouldShowStartingState","shouldShowLoading","shouldShowEmptyState","ProductLinkSkeleton","List","Search","itemHeight","onProductClick"],"mappings":"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"}

package/dist/components/ui/drawer.js

@@ -1,25 +1,25 @@
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { Drawer as e } from "../../shop-minis-react/node_modules/.pnpm/vaul@1.1.2_@types_react-dom@19.1.6_@types_react@19.1.6__@types_react@19.1.6_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/vaul/dist/index.js";
 import { cn as d } from "../../lib/utils.js";
-function s({ ...t }) {
+function m({ ...t }) {
   return /* @__PURE__ */ a(e.Root, { "data-slot": "drawer", ...t });
 }
-function m({
+function f({
   ...t
 }) {
   return /* @__PURE__ */ a(e.Trigger, { "data-slot": "drawer-trigger", ...t });
 }
-function n({
+function l({
   ...t
 }) {
   return /* @__PURE__ */ a(e.Portal, { "data-slot": "drawer-portal", ...t });
 }
-function f({
+function v({
   ...t
 }) {
   return /* @__PURE__ */ a(e.Close, { "data-slot": "drawer-close", ...t });
 }
-function l({
+function c({
   className: t,
   ...r
 }) {
@@ -35,38 +35,40 @@ function l({
     }
   );
 }
-function v({
+function p({
   className: t,
-  children: r,
-  ...i
+  fullHeight: r = !1,
+  children: i,
+  ...n
 }) {
   return (
     // vaul's Portal type incorrectly excludes children
-    /* @__PURE__ */ o(n, { children: [
-      /* @__PURE__ */ a(l, {}),
+    /* @__PURE__ */ o(l, { children: [
+      /* @__PURE__ */ a(c, {}),
       /* @__PURE__ */ o(
         e.Content,
         {
           "data-slot": "drawer-content",
           className: d(
             "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
-            "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
-            "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+            "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[100vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+            "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[100vh] data-[vaul-drawer-direction=bottom]:rounded-t-[28px] data-[vaul-drawer-direction=bottom]:border-t",
             "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
             "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+            r ? "h-[100vh]" : "",
             t
           ),
-          ...i,
+          ...n,
           children: [
             /* @__PURE__ */ a("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
-            r
+            i
           ]
         }
       )
     ] })
   );
 }
-function p({ className: t, ...r }) {
+function g({ className: t, ...r }) {
   return /* @__PURE__ */ a(
     "div",
     {
@@ -79,7 +81,7 @@ function p({ className: t, ...r }) {
     }
   );
 }
-function g({ className: t, ...r }) {
+function x({ className: t, ...r }) {
   return /* @__PURE__ */ a(
     "div",
     {
@@ -89,7 +91,7 @@ function g({ className: t, ...r }) {
     }
   );
 }
-function x({
+function b({
   className: t,
   ...r
 }) {
@@ -102,7 +104,7 @@ function x({
     }
   );
 }
-function b({
+function h({
   className: t,
   ...r
 }) {
@@ -116,15 +118,15 @@ function b({
   );
 }
 export {
-  s as Drawer,
-  f as DrawerClose,
-  v as DrawerContent,
-  b as DrawerDescription,
-  g as DrawerFooter,
-  p as DrawerHeader,
-  l as DrawerOverlay,
-  n as DrawerPortal,
-  x as DrawerTitle,
-  m as DrawerTrigger
+  m as Drawer,
+  v as DrawerClose,
+  p as DrawerContent,
+  h as DrawerDescription,
+  x as DrawerFooter,
+  g as DrawerHeader,
+  c as DrawerOverlay,
+  l as DrawerPortal,
+  b as DrawerTitle,
+  f as DrawerTrigger
 };
 //# sourceMappingURL=drawer.js.map

package/dist/components/ui/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sources":["../../../src/components/ui/drawer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {Drawer as DrawerPrimitive} from 'vaul'\n\nimport {cn} from '../../lib/utils'\n\nfunction Drawer({...props}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    // vaul's Portal type incorrectly excludes children\n    <DrawerPortal {...({} as any)}>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',\n          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',\n          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',\n          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',\n          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn('text-foreground font-semibold', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n"],"names":["Drawer","props","DrawerPrimitive","DrawerTrigger","DrawerPortal","DrawerClose","DrawerOverlay","className","jsx","cn","DrawerContent","children","jsxs","DrawerHeader","DrawerFooter","DrawerTitle","DrawerDescription"],"mappings":";;;AAMA,SAASA,EAAO,EAAC,GAAGC,KAA2D;AAC7E,2BAAQC,EAAgB,MAAhB,EAAqB,aAAU,UAAU,GAAGD,GAAO;AAC7D;AAEA,SAASE,EAAc;AAAA,EACrB,GAAGF;AACL,GAAyD;AACvD,2BAAQC,EAAgB,SAAhB,EAAwB,aAAU,kBAAkB,GAAGD,GAAO;AACxE;AAEA,SAASG,EAAa;AAAA,EACpB,GAAGH;AACL,GAAwD;AACtD,2BAAQC,EAAgB,QAAhB,EAAuB,aAAU,iBAAiB,GAAGD,GAAO;AACtE;AAEA,SAASI,EAAY;AAAA,EACnB,GAAGJ;AACL,GAAuD;AACrD,2BAAQC,EAAgB,OAAhB,EAAsB,aAAU,gBAAgB,GAAGD,GAAO;AACpE;AAEA,SAASK,EAAc;AAAA,EACrB,WAAAC;AAAA,EACA,GAAGN;AACL,GAAyD;AAErD,SAAA,gBAAAO;AAAA,IAACN,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWO;AAAA,QACT;AAAA,QACAF;AAAA,MACF;AAAA,MACC,GAAGN;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASS,EAAc;AAAA,EACrB,WAAAH;AAAA,EACA,UAAAI;AAAA,EACA,GAAGV;AACL,GAAyD;AACvD;AAAA;AAAA,IAEG,gBAAAW,EAAAR,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAI,EAACF,GAAc,EAAA;AAAA,MACf,gBAAAM;AAAA,QAACV,EAAgB;AAAA,QAAhB;AAAA,UACC,aAAU;AAAA,UACV,WAAWO;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAF;AAAA,UACF;AAAA,UACC,GAAGN;AAAA,UAEJ,UAAA;AAAA,YAAC,gBAAAO,EAAA,OAAA,EAAI,WAAU,kIAAkI,CAAA;AAAA,YAChJG;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EACF,CAAA;AAAA;AAEJ;AAEA,SAASE,EAAa,EAAC,WAAAN,GAAW,GAAGN,KAAqC;AAEtE,SAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAF;AAAA,MACF;AAAA,MACC,GAAGN;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASa,EAAa,EAAC,WAAAP,GAAW,GAAGN,KAAqC;AAEtE,SAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,mCAAmCF,CAAS;AAAA,MACzD,GAAGN;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASc,EAAY;AAAA,EACnB,WAAAR;AAAA,EACA,GAAGN;AACL,GAAuD;AAEnD,SAAA,gBAAAO;AAAA,IAACN,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWO,EAAG,iCAAiCF,CAAS;AAAA,MACvD,GAAGN;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASe,EAAkB;AAAA,EACzB,WAAAT;AAAA,EACA,GAAGN;AACL,GAA6D;AAEzD,SAAA,gBAAAO;AAAA,IAACN,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWO,EAAG,iCAAiCF,CAAS;AAAA,MACvD,GAAGN;AAAA,IAAA;AAAA,EACN;AAEJ;"}
+{"version":3,"file":"drawer.js","sources":["../../../src/components/ui/drawer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {Drawer as DrawerPrimitive} from 'vaul'\n\nimport {cn} from '../../lib/utils'\n\nfunction Drawer({...props}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  fullHeight = false,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content> & {\n  fullHeight?: boolean\n}) {\n  return (\n    // vaul's Portal type incorrectly excludes children\n    <DrawerPortal {...({} as any)}>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',\n          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[100vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',\n          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[100vh] data-[vaul-drawer-direction=bottom]:rounded-t-[28px] data-[vaul-drawer-direction=bottom]:border-t',\n          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',\n          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',\n          fullHeight ? 'h-[100vh]' : '',\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn('text-foreground font-semibold', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n"],"names":["Drawer","props","DrawerPrimitive","DrawerTrigger","DrawerPortal","DrawerClose","DrawerOverlay","className","jsx","cn","DrawerContent","fullHeight","children","jsxs","DrawerHeader","DrawerFooter","DrawerTitle","DrawerDescription"],"mappings":";;;AAMA,SAASA,EAAO,EAAC,GAAGC,KAA2D;AAC7E,2BAAQC,EAAgB,MAAhB,EAAqB,aAAU,UAAU,GAAGD,GAAO;AAC7D;AAEA,SAASE,EAAc;AAAA,EACrB,GAAGF;AACL,GAAyD;AACvD,2BAAQC,EAAgB,SAAhB,EAAwB,aAAU,kBAAkB,GAAGD,GAAO;AACxE;AAEA,SAASG,EAAa;AAAA,EACpB,GAAGH;AACL,GAAwD;AACtD,2BAAQC,EAAgB,QAAhB,EAAuB,aAAU,iBAAiB,GAAGD,GAAO;AACtE;AAEA,SAASI,EAAY;AAAA,EACnB,GAAGJ;AACL,GAAuD;AACrD,2BAAQC,EAAgB,OAAhB,EAAsB,aAAU,gBAAgB,GAAGD,GAAO;AACpE;AAEA,SAASK,EAAc;AAAA,EACrB,WAAAC;AAAA,EACA,GAAGN;AACL,GAAyD;AAErD,SAAA,gBAAAO;AAAA,IAACN,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWO;AAAA,QACT;AAAA,QACAF;AAAA,MACF;AAAA,MACC,GAAGN;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASS,EAAc;AAAA,EACrB,WAAAH;AAAA,EACA,YAAAI,IAAa;AAAA,EACb,UAAAC;AAAA,EACA,GAAGX;AACL,GAEG;AACD;AAAA;AAAA,IAEG,gBAAAY,EAAAT,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAI,EAACF,GAAc,EAAA;AAAA,MACf,gBAAAO;AAAA,QAACX,EAAgB;AAAA,QAAhB;AAAA,UACC,aAAU;AAAA,UACV,WAAWO;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAE,IAAa,cAAc;AAAA,YAC3BJ;AAAA,UACF;AAAA,UACC,GAAGN;AAAA,UAEJ,UAAA;AAAA,YAAC,gBAAAO,EAAA,OAAA,EAAI,WAAU,kIAAkI,CAAA;AAAA,YAChJI;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EACF,CAAA;AAAA;AAEJ;AAEA,SAASE,EAAa,EAAC,WAAAP,GAAW,GAAGN,KAAqC;AAEtE,SAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAF;AAAA,MACF;AAAA,MACC,GAAGN;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASc,EAAa,EAAC,WAAAR,GAAW,GAAGN,KAAqC;AAEtE,SAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,mCAAmCF,CAAS;AAAA,MACzD,GAAGN;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASe,EAAY;AAAA,EACnB,WAAAT;AAAA,EACA,GAAGN;AACL,GAAuD;AAEnD,SAAA,gBAAAO;AAAA,IAACN,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWO,EAAG,iCAAiCF,CAAS;AAAA,MACvD,GAAGN;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASgB,EAAkB;AAAA,EACzB,WAAAV;AAAA,EACA,GAAGN;AACL,GAA6D;AAEzD,SAAA,gBAAAO;AAAA,IAACN,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWO,EAAG,iCAAiCF,CAAS;AAAA,MACvD,GAAGN;AAAA,IAAA;AAAA,EACN;AAEJ;"}

package/package.json

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

package/src/components/MinisContainer.tsx

@@ -12,18 +12,20 @@ injectMocks()
 
 export function MinisContainer({children}: {children: React.ReactNode}) {
   const [isSDKReady, setIsSDKReady] = useState(false)
-  const {reportError} = useShopActions()
+  const actions = useShopActions()
 
   const handleError = useCallback(
     async (params: ReportErrorParams) => {
       try {
-        await reportError(params)
+        if (actions && actions.reportError) {
+          await actions.reportError(params)
+        }
       } catch (error) {
         // If reporting fails, at least log to console
         console.error('Failed to report error to app:', error)
       }
     },
-    [reportError]
+    [actions]
   )
 
   useEffect(() => {

package/src/components/atoms/product-variant-price.tsx

@@ -8,7 +8,6 @@ export interface ProductVariantPriceProps {
   compareAtPriceCurrencyCode?: string
   currentPriceClassName?: string
   originalPriceClassName?: string
-  containerClassName?: string
   className?: string
 }
 
@@ -19,7 +18,6 @@ export function ProductVariantPrice({
   compareAtPriceCurrencyCode,
   currentPriceClassName,
   originalPriceClassName,
-  containerClassName,
   className,
 }: ProductVariantPriceProps) {
   if (!amount || !currencyCode) {
@@ -34,9 +32,7 @@ export function ProductVariantPrice({
     : undefined
 
   return (
-    <div
-      className={cn('flex items-center gap-2', containerClassName, className)}
-    >
+    <div className={cn('flex items-center gap-2', className)}>
       {hasDiscount ? (
         <>
           <span

package/src/components/commerce/product-card.tsx

@@ -59,7 +59,7 @@ function ProductCardContainer({
   const content = (
     <div
       className={cn(
-        'relative w-full overflow-hidden rounded-xl border-0',
+        'relative size-full overflow-hidden rounded-xl border-0',
         className
       )}
       {...props}
@@ -93,10 +93,8 @@ function ProductCardImageContainer({
     <div
       data-slot="product-card-image-container"
       className={cn(
-        // Ensure the product image is stretched to the full size of the container (can't use width/height: 100% because of flex)
-        'flex justify-stretch items-stretch',
         'relative overflow-hidden rounded-xl border border-gray-200',
-        'w-full  aspect-square',
+        'aspect-square',
         variant === 'compact' ? 'min-h-[104px]' : 'min-h-[134px]',
         className
       )}
@@ -123,7 +121,8 @@ function ProductCardImage({className, ...props}: React.ComponentProps<'img'>) {
           alt={alt}
           aspectRatio={1}
           thumbhash={thumbhash}
-          className={cn('size-full object-cover', className)}
+          objectFit="cover"
+          className={cn('size-full', className)}
           {...props}
         />
       ) : (
@@ -131,7 +130,7 @@ function ProductCardImage({className, ...props}: React.ComponentProps<'img'>) {
           data-slot="product-card-image"
           src={src}
           alt={alt}
-          className={cn('size-full', className)}
+          className={cn('size-full object-cover', className)}
           {...props}
         />
       )

package/src/components/commerce/search.tsx

@@ -111,7 +111,7 @@ function SearchInput({
           data-testid="search-input"
           {...inputProps}
           className={cn(
-            `w-full flex overflow-hidden rounded-radius-28 border-none py-4 px-0 text-text placeholder:text-text placeholder:opacity-60`,
+            `w-full flex overflow-hidden rounded-radius-28 border-none shadow-none py-4 px-0 text-text placeholder:text-text placeholder:opacity-60`,
             className
           )}
         />

package/src/components/ui/drawer.tsx

@@ -44,9 +44,12 @@ function DrawerOverlay({
 
 function DrawerContent({
   className,
+  fullHeight = false,
   children,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+}: React.ComponentProps<typeof DrawerPrimitive.Content> & {
+  fullHeight?: boolean
+}) {
   return (
     // vaul's Portal type incorrectly excludes children
     <DrawerPortal {...({} as any)}>
@@ -55,10 +58,11 @@ function DrawerContent({
         data-slot="drawer-content"
         className={cn(
           'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
-          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
-          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
+          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[100vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
+          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[100vh] data-[vaul-drawer-direction=bottom]:rounded-t-[28px] data-[vaul-drawer-direction=bottom]:border-t',
           'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
           'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
+          fullHeight ? 'h-[100vh]' : '',
           className
         )}
         {...props}

package/src/stories/ProductVariantPrice.stories.tsx

@@ -34,9 +34,6 @@ const meta = {
     originalPriceClassName: {
       control: 'text',
     },
-    containerClassName: {
-      control: 'text',
-    },
   },
   tags: ['autodocs'],
 } satisfies Meta<ProductVariantPriceProps>
@@ -68,6 +65,6 @@ export const CustomStyling: Story = {
     compareAtPriceAmount: '119.99',
     currentPriceClassName: 'text-2xl font-bold text-green-600',
     originalPriceClassName: 'text-lg text-red-500 line-through',
-    containerClassName: 'gap-3 p-4 bg-gray-50 rounded-lg',
+    className: 'gap-3 p-4 bg-gray-50 rounded-lg',
   },
 }