@shopify/shop-minis-react 0.0.26 → 0.0.27

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

@@ -0,0 +1,30 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { cn as m } from "../../lib/utils.js";
+import { Skeleton as s } from "../ui/skeleton.js";
+function n({
+  className: t,
+  ...r
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: m(
+        "relative w-full shadow-sm rounded-lg p-4 items-center",
+        t
+      ),
+      ...r,
+      children: /* @__PURE__ */ l("div", { className: "flex flex-row items-center justify-center w-full", children: [
+        /* @__PURE__ */ e(s, { className: "aspect-square w-15 h-15" }),
+        /* @__PURE__ */ l("div", { className: "flex flex-col justify-center items-start ml-2 w-full pt-2", children: [
+          /* @__PURE__ */ e(s, { className: "mb-3 h-3 w-3/4" }),
+          /* @__PURE__ */ e(s, { className: "mb-2 h-3 w-1/4" }),
+          /* @__PURE__ */ e(s, { className: "mb-2 h-3 w-1/3" })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  n as ProductLinkSkeleton
+};
+//# sourceMappingURL=product-link-skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-link-skeleton.js","sources":["../../../src/components/commerce/product-link-skeleton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {cn} from '../../lib/utils'\nimport {Skeleton} from '../ui/skeleton'\n\nfunction ProductLinkSkeleton({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'relative w-full shadow-sm rounded-lg p-4 items-center',\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex flex-row items-center justify-center w-full\">\n        <Skeleton className=\"aspect-square w-15 h-15\" />\n        <div className=\"flex flex-col justify-center items-start ml-2 w-full pt-2\">\n          <Skeleton className=\"mb-3 h-3 w-3/4\" />\n          <Skeleton className=\"mb-2 h-3 w-1/4\" />\n          <Skeleton className=\"mb-2 h-3 w-1/3\" />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport {ProductLinkSkeleton}\n"],"names":["ProductLinkSkeleton","className","props","jsx","cn","jsxs","Skeleton"],"mappings":";;;AAKA,SAASA,EAAoB;AAAA,EAC3B,WAAAC;AAAA,EACA,GAAGC;AACL,GAAgC;AAE5B,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MACF;AAAA,MACC,GAAGC;AAAA,MAEJ,UAAA,gBAAAG,EAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,QAAC,gBAAAF,EAAAG,GAAA,EAAS,WAAU,0BAA0B,CAAA;AAAA,QAC9C,gBAAAD,EAAC,OAAI,EAAA,WAAU,6DACb,UAAA;AAAA,UAAC,gBAAAF,EAAAG,GAAA,EAAS,WAAU,iBAAiB,CAAA;AAAA,UACrC,gBAAAH,EAACG,GAAS,EAAA,WAAU,iBAAiB,CAAA;AAAA,UACrC,gBAAAH,EAACG,GAAS,EAAA,WAAU,iBAAiB,CAAA;AAAA,QAAA,EACvC,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

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

@@ -1,16 +1,16 @@
-import { jsxs as c, jsx as t, Fragment as V } from "react/jsx-runtime";
+import { jsxs as c, jsx as t, Fragment as F } from "react/jsx-runtime";
 import * as w from "react";
-import { cva as F } from "../../shop-minis-react/node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { useShopNavigation as j } from "../../hooks/navigation/useShopNavigation.js";
-import { useSavedProductsActions as O } from "../../hooks/user/useSavedProductsActions.js";
-import { formatMoney as b } from "../../lib/formatMoney.js";
+import { cva as j } from "../../shop-minis-react/node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { useShopNavigation as O } from "../../hooks/navigation/useShopNavigation.js";
+import { useSavedProductsActions as M } from "../../hooks/user/useSavedProductsActions.js";
+import { formatMoney as A } from "../../lib/formatMoney.js";
 import { cn as n } from "../../lib/utils.js";
-import { FavoriteButton as M } from "../atoms/favorite-button.js";
-import { Touchable as A } from "../atoms/touchable.js";
-import { Card as D, CardContent as q, CardAction as B } from "../ui/card.js";
-import U from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/star.js";
-import { Root as _ } from "../../shop-minis-react/node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.js";
-const E = F("", {
+import { FavoriteButton as D } from "../atoms/favorite-button.js";
+import { Touchable as z } from "../atoms/touchable.js";
+import { Card as q, CardContent as B, CardAction as U } from "../ui/card.js";
+import _ from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/star.js";
+import { Root as E } from "../../shop-minis-react/node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.js";
+const G = j("", {
   variants: {
     layout: {
       horizontal: "w-full !flex-row items-center gap-3 px-4 py-3",
@@ -27,37 +27,37 @@ const E = F("", {
     discount: "none"
   }
 });
-function G({
+function H({
   className: o,
   layout: e,
   discount: r,
   asChild: i = !1,
-  onPress: a,
-  ...s
+  onPress: l,
+  ...a
 }) {
   return /* @__PURE__ */ t(
-    A,
+    z,
     {
-      onClick: a,
+      onClick: l,
       whileTap: { opacity: 0.7 },
       transition: {
         opacity: { type: "tween", duration: 0.08, ease: "easeInOut" }
       },
       children: /* @__PURE__ */ t(
-        i ? _ : D,
+        i ? E : q,
         {
           className: n(
-            E({ layout: e, discount: r }),
+            G({ layout: e, discount: r }),
             "border-0 bg-white rounded-xl shadow-lg shadow-black/10",
             o
           ),
-          ...s
+          ...a
         }
       )
     }
   );
 }
-function H({
+function J({
   className: o,
   layout: e = "horizontal",
   ...r
@@ -75,13 +75,13 @@ function H({
     }
   );
 }
-function J({
+function K({
   className: o,
   layout: e = "horizontal",
   ...r
 }) {
   return /* @__PURE__ */ t(
-    q,
+    B,
     {
       className: n(
         e === "horizontal" ? "flex-1 min-w-0 space-y-1 px-0 py-0" : "space-y-2",
@@ -91,7 +91,7 @@ function J({
     }
   );
 }
-function K({
+function Q({
   className: o,
   children: e,
   ...r
@@ -109,7 +109,7 @@ function K({
     }
   );
 }
-function Q({ className: o, ...e }) {
+function W({ className: o, ...e }) {
   return /* @__PURE__ */ t(
     "div",
     {
@@ -119,7 +119,7 @@ function Q({ className: o, ...e }) {
     }
   );
 }
-function W({
+function X({
   className: o,
   ...e
 }) {
@@ -132,7 +132,7 @@ function W({
     }
   );
 }
-function X({
+function Y({
   className: o,
   ...e
 }) {
@@ -145,7 +145,7 @@ function X({
     }
   );
 }
-function Y({
+function Z({
   className: o,
   ...e
 }) {
@@ -158,7 +158,7 @@ function Y({
     }
   );
 }
-function Z({ className: o, ...e }) {
+function $({ className: o, ...e }) {
   return /* @__PURE__ */ t(
     "div",
     {
@@ -171,19 +171,19 @@ function Z({ className: o, ...e }) {
     }
   );
 }
-function $({
+function tt({
   className: o,
   onPress: e,
   filled: r = !1,
   ...i
 }) {
   return /* @__PURE__ */ t(
-    B,
+    U,
     {
       className: n("flex-shrink-0 self-center px-0 py-0", o),
       ...i,
       children: /* @__PURE__ */ t(
-        A,
+        z,
         {
           stopPropagation: !0,
           onClick: e,
@@ -192,43 +192,43 @@ function $({
             opacity: { type: "tween", duration: 0.08, ease: "easeInOut" },
             scale: { type: "tween", duration: 0.08, ease: "easeInOut" }
           },
-          children: /* @__PURE__ */ t(M, { filled: r, onClick: e })
+          children: /* @__PURE__ */ t(D, { filled: r, onClick: e })
         }
       )
     }
   );
 }
-function ut({ product: o }) {
-  const { navigateToProduct: e } = j(), { saveProduct: r, unsaveProduct: i } = O(), {
+function mt({ product: o, hideFavoriteAction: e = !1 }) {
+  const { navigateToProduct: r } = O(), { saveProduct: i, unsaveProduct: l } = M(), {
     id: a,
-    title: s,
-    featuredImage: u,
-    reviewAnalytics: P,
+    title: u,
+    featuredImage: P,
+    reviewAnalytics: C,
     price: m,
     compareAtPrice: p,
-    isFavorited: z,
+    isFavorited: T,
     selectedVariant: f,
     defaultVariantId: h,
     shop: g
-  } = o, [x, C] = w.useState(z), y = P?.averageRating, N = P?.reviewCount, v = m?.amount ? b(m?.amount, m?.currencyCode) : void 0, I = u?.url, T = u?.altText || s, k = p?.amount ? b(p?.amount, p?.currencyCode) : void 0, L = k && k !== v, R = w.useCallback(() => {
-    e({
+  } = o, [x, N] = w.useState(T), y = C?.averageRating, I = C?.reviewCount, v = m?.amount ? A(m?.amount, m?.currencyCode) : void 0, L = P?.url, R = P?.altText || u, k = p?.amount ? A(p?.amount, p?.currencyCode) : void 0, b = k && k !== v, S = w.useCallback(() => {
+    r({
       productId: a
     });
-  }, [e, a]), S = w.useCallback(async () => {
-    const l = x;
-    C(!l);
+  }, [r, a]), V = w.useCallback(async () => {
+    const s = x;
+    N(!s);
     try {
-      l ? await i({
+      s ? await l({
         productId: a,
         shopId: g.id,
         productVariantId: f?.id || h
-      }) : await r({
+      }) : await i({
         productId: a,
         shopId: g.id,
         productVariantId: f?.id || h
       });
     } catch {
-      C(l);
+      N(s);
     }
   }, [
     x,
@@ -236,29 +236,29 @@ function ut({ product: o }) {
     g.id,
     f?.id,
     h,
-    r,
-    i
+    i,
+    l
   ]);
   return /* @__PURE__ */ c(
-    G,
+    H,
     {
       layout: "horizontal",
-      discount: L ? "small" : "none",
-      onPress: R,
+      discount: b ? "small" : "none",
+      onPress: S,
       children: [
-        /* @__PURE__ */ t(H, { layout: "horizontal", children: I ? /* @__PURE__ */ t(
+        /* @__PURE__ */ t(J, { layout: "horizontal", children: L ? /* @__PURE__ */ t(
           "img",
           {
-            src: I,
-            alt: T,
+            src: L,
+            alt: R,
             className: "h-full w-full object-cover"
           }
         ) : /* @__PURE__ */ t("div", { className: "h-full w-full bg-muted flex items-center justify-center text-muted-foreground text-xs", children: "No Image" }) }),
-        /* @__PURE__ */ c(J, { layout: "horizontal", children: [
-          /* @__PURE__ */ t(K, { children: s }),
-          N && y && /* @__PURE__ */ t(Z, { children: /* @__PURE__ */ c("div", { className: "flex items-center gap-1", children: [
-            Array.from({ length: 5 }, (l, d) => /* @__PURE__ */ t(
-              U,
+        /* @__PURE__ */ c(K, { layout: "horizontal", children: [
+          /* @__PURE__ */ t(Q, { children: u }),
+          I && y && /* @__PURE__ */ t($, { children: /* @__PURE__ */ c("div", { className: "flex items-center gap-1", children: [
+            Array.from({ length: 5 }, (s, d) => /* @__PURE__ */ t(
+              _,
               {
                 fill: d < Math.floor(y) ? "currentColor" : "none",
                 className: n(
@@ -270,20 +270,20 @@ function ut({ product: o }) {
             )),
             /* @__PURE__ */ c("span", { className: "text-xs text-gray-600 ml-1", children: [
               "(",
-              N,
+              I,
               ")"
             ] })
           ] }) }),
-          /* @__PURE__ */ t(Q, { children: L ? /* @__PURE__ */ c(V, { children: [
-            /* @__PURE__ */ t(Y, { children: v }),
-            /* @__PURE__ */ t(X, { children: k })
-          ] }) : /* @__PURE__ */ t(W, { children: v }) })
+          /* @__PURE__ */ t(W, { children: b ? /* @__PURE__ */ c(F, { children: [
+            /* @__PURE__ */ t(Z, { children: v }),
+            /* @__PURE__ */ t(Y, { children: k })
+          ] }) : /* @__PURE__ */ t(X, { children: v }) })
         ] }),
-        /* @__PURE__ */ t(
-          $,
+        e ? null : /* @__PURE__ */ t(
+          tt,
           {
             filled: x,
-            onPress: S
+            onPress: V
           }
         )
       ]
@@ -291,6 +291,6 @@ function ut({ product: o }) {
   );
 }
 export {
-  ut as ProductLink
+  mt as ProductLink
 };
 //# sourceMappingURL=product-link.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"product-link.js","sources":["../../../src/components/commerce/product-link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {type Product} from '@shopify/shop-minis-platform'\nimport {cva, type VariantProps} from 'class-variance-authority'\nimport {Star} from 'lucide-react'\nimport {Slot as SlotPrimitive} from 'radix-ui'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'\nimport {formatMoney} from '../../lib/formatMoney'\nimport {cn} from '../../lib/utils'\nimport {FavoriteButton} from '../atoms/favorite-button'\nimport {Touchable} from '../atoms/touchable'\nimport {Card, CardContent, CardAction} from '../ui/card'\n\nconst productLinkVariants = cva('', {\n  variants: {\n    layout: {\n      horizontal: 'w-full !flex-row items-center gap-3 px-4 py-3',\n      vertical: 'flex-col',\n    },\n    discount: {\n      none: '',\n      small: '',\n      large: '',\n    },\n  },\n  defaultVariants: {\n    layout: 'horizontal',\n    discount: 'none',\n  },\n})\n\n// Primitive components (building blocks)\nexport interface ProductLinkRootProps\n  extends React.ComponentProps<typeof Card>,\n    VariantProps<typeof productLinkVariants> {\n  layout?: 'horizontal' | 'vertical'\n  asChild?: boolean\n  onPress?: () => void\n}\n\nfunction ProductLinkRoot({\n  className,\n  layout,\n  discount,\n  asChild = false,\n  onPress,\n  ...props\n}: ProductLinkRootProps) {\n  const Comp = asChild ? SlotPrimitive.Root : Card\n\n  return (\n    <Touchable\n      onClick={onPress}\n      whileTap={{opacity: 0.7}}\n      transition={{\n        opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n      }}\n    >\n      <Comp\n        className={cn(\n          productLinkVariants({layout, discount}),\n          'border-0 bg-white rounded-xl shadow-lg shadow-black/10',\n          className\n        )}\n        {...props}\n      />\n    </Touchable>\n  )\n}\n\nfunction ProductLinkImage({\n  className,\n  layout = 'horizontal',\n  ...props\n}: React.ComponentProps<'div'> & {layout?: 'horizontal' | 'vertical'}) {\n  return (\n    <div\n      data-slot=\"product-link-image\"\n      className={cn(\n        'overflow-hidden rounded-md bg-muted',\n        layout === 'horizontal'\n          ? 'h-16 w-16 flex-shrink-0'\n          : 'aspect-square w-full',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkInfo({\n  className,\n  layout = 'horizontal',\n  ...props\n}: React.ComponentProps<typeof CardContent> & {\n  layout?: 'horizontal' | 'vertical'\n}) {\n  return (\n    <CardContent\n      className={cn(\n        layout === 'horizontal'\n          ? 'flex-1 min-w-0 space-y-1 px-0 py-0'\n          : 'space-y-2',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  return (\n    <h3\n      data-slot=\"product-link-title\"\n      className={cn(\n        'text-sm font-medium leading-tight text-gray-900 truncate overflow-hidden whitespace-nowrap text-ellipsis',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </h3>\n  )\n}\n\nfunction ProductLinkPrice({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"product-link-price\"\n      className={cn('flex items-center gap-2', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkCurrentPrice({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"product-link-current-price\"\n      className={cn('text-sm font-semibold text-gray-900', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkOriginalPrice({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"product-link-original-price\"\n      className={cn('text-sm text-gray-500 line-through', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkDiscountPrice({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"product-link-discount-price\"\n      className={cn('text-sm font-semibold text-red-600', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkRating({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"product-link-rating\"\n      className={cn(\n        'flex items-center gap-1 text-xs text-muted-foreground',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkActions({\n  className,\n  onPress,\n  filled = false,\n  ...props\n}: React.ComponentProps<typeof CardAction> & {\n  onPress?: () => void\n  filled?: boolean\n}) {\n  return (\n    <CardAction\n      className={cn('flex-shrink-0 self-center px-0 py-0', className)}\n      {...props}\n    >\n      <Touchable\n        stopPropagation\n        onClick={onPress}\n        whileTap={{opacity: 0.7, scale: 0.95}}\n        transition={{\n          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n          scale: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n        }}\n      >\n        <FavoriteButton filled={filled} onClick={onPress} />\n      </Touchable>\n    </CardAction>\n  )\n}\n\nexport interface ProductLinkProps {\n  product: Product\n}\n\n// Composed ProductLink component\nfunction ProductLink({product}: ProductLinkProps) {\n  const {navigateToProduct} = useShopNavigation()\n  const {saveProduct, unsaveProduct} = useSavedProductsActions()\n\n  const {\n    id,\n    title,\n    featuredImage,\n    reviewAnalytics,\n    price,\n    compareAtPrice,\n    isFavorited,\n    selectedVariant,\n    defaultVariantId,\n    shop,\n  } = product\n\n  // Local state for optimistic UI updates\n  const [isFavoritedLocal, setIsFavoritedLocal] = React.useState(isFavorited)\n\n  const averageRating = reviewAnalytics?.averageRating\n  const reviewCount = reviewAnalytics?.reviewCount\n  const amount = price?.amount\n    ? formatMoney(price?.amount, price?.currencyCode)\n    : undefined\n  const imageUrl = featuredImage?.url\n  const imageAltText = featuredImage?.altText || title\n  const compareAtPriceAmount = compareAtPrice?.amount\n    ? formatMoney(compareAtPrice?.amount, compareAtPrice?.currencyCode)\n    : undefined\n  const hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount\n\n  const handlePress = React.useCallback(() => {\n    navigateToProduct({\n      productId: id,\n    })\n  }, [navigateToProduct, id])\n\n  const handleActionPress = React.useCallback(async () => {\n    const previousState = isFavoritedLocal\n\n    // Optimistic update\n    setIsFavoritedLocal(!previousState)\n\n    try {\n      if (previousState) {\n        await unsaveProduct({\n          productId: id,\n          shopId: shop.id,\n          productVariantId: selectedVariant?.id || defaultVariantId,\n        })\n      } else {\n        await saveProduct({\n          productId: id,\n          shopId: shop.id,\n          productVariantId: selectedVariant?.id || defaultVariantId,\n        })\n      }\n    } catch (error) {\n      // Revert optimistic update on error\n      setIsFavoritedLocal(previousState)\n    }\n  }, [\n    isFavoritedLocal,\n    id,\n    shop.id,\n    selectedVariant?.id,\n    defaultVariantId,\n    saveProduct,\n    unsaveProduct,\n  ])\n\n  return (\n    <ProductLinkRoot\n      layout=\"horizontal\"\n      discount={hasDiscount ? 'small' : 'none'}\n      onPress={handlePress}\n    >\n      <ProductLinkImage layout=\"horizontal\">\n        {imageUrl ? (\n          <img\n            src={imageUrl}\n            alt={imageAltText}\n            className=\"h-full w-full object-cover\"\n          />\n        ) : (\n          <div className=\"h-full w-full bg-muted flex items-center justify-center text-muted-foreground text-xs\">\n            No Image\n          </div>\n        )}\n      </ProductLinkImage>\n\n      <ProductLinkInfo layout=\"horizontal\">\n        <ProductLinkTitle>{title}</ProductLinkTitle>\n\n        {reviewCount && averageRating && (\n          <ProductLinkRating>\n            <div className=\"flex items-center gap-1\">\n              {Array.from({length: 5}, (_, i) => (\n                <Star\n                  key={i}\n                  fill={\n                    i < Math.floor(averageRating!) ? 'currentColor' : 'none'\n                  }\n                  className={cn(\n                    'h-3 w-3',\n                    i < Math.floor(averageRating!)\n                      ? 'text-primary'\n                      : 'text-gray-300'\n                  )}\n                />\n              ))}\n              <span className=\"text-xs text-gray-600 ml-1\">\n                ({reviewCount})\n              </span>\n            </div>\n          </ProductLinkRating>\n        )}\n\n        <ProductLinkPrice>\n          {hasDiscount ? (\n            <>\n              <ProductLinkDiscountPrice>{amount}</ProductLinkDiscountPrice>\n              <ProductLinkOriginalPrice>\n                {compareAtPriceAmount}\n              </ProductLinkOriginalPrice>\n            </>\n          ) : (\n            <ProductLinkCurrentPrice>{amount}</ProductLinkCurrentPrice>\n          )}\n        </ProductLinkPrice>\n      </ProductLinkInfo>\n\n      <ProductLinkActions\n        filled={isFavoritedLocal}\n        onPress={handleActionPress}\n      />\n    </ProductLinkRoot>\n  )\n}\n\nexport {ProductLink}\n"],"names":["productLinkVariants","cva","ProductLinkRoot","className","layout","discount","asChild","onPress","props","jsx","Touchable","SlotPrimitive.Root","Card","cn","ProductLinkImage","ProductLinkInfo","CardContent","ProductLinkTitle","children","ProductLinkPrice","ProductLinkCurrentPrice","ProductLinkOriginalPrice","ProductLinkDiscountPrice","ProductLinkRating","ProductLinkActions","filled","CardAction","FavoriteButton","ProductLink","product","navigateToProduct","useShopNavigation","saveProduct","unsaveProduct","useSavedProductsActions","id","title","featuredImage","reviewAnalytics","price","compareAtPrice","isFavorited","selectedVariant","defaultVariantId","shop","isFavoritedLocal","setIsFavoritedLocal","React","averageRating","reviewCount","amount","formatMoney","imageUrl","imageAltText","compareAtPriceAmount","hasDiscount","handlePress","handleActionPress","previousState","jsxs","_","i","Star","Fragment"],"mappings":"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"}
+{"version":3,"file":"product-link.js","sources":["../../../src/components/commerce/product-link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {type Product} from '@shopify/shop-minis-platform'\nimport {cva, type VariantProps} from 'class-variance-authority'\nimport {Star} from 'lucide-react'\nimport {Slot as SlotPrimitive} from 'radix-ui'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'\nimport {formatMoney} from '../../lib/formatMoney'\nimport {cn} from '../../lib/utils'\nimport {FavoriteButton} from '../atoms/favorite-button'\nimport {Touchable} from '../atoms/touchable'\nimport {Card, CardContent, CardAction} from '../ui/card'\n\nconst productLinkVariants = cva('', {\n  variants: {\n    layout: {\n      horizontal: 'w-full !flex-row items-center gap-3 px-4 py-3',\n      vertical: 'flex-col',\n    },\n    discount: {\n      none: '',\n      small: '',\n      large: '',\n    },\n  },\n  defaultVariants: {\n    layout: 'horizontal',\n    discount: 'none',\n  },\n})\n\n// Primitive components (building blocks)\nexport interface ProductLinkRootProps\n  extends React.ComponentProps<typeof Card>,\n    VariantProps<typeof productLinkVariants> {\n  layout?: 'horizontal' | 'vertical'\n  asChild?: boolean\n  onPress?: () => void\n}\n\nfunction ProductLinkRoot({\n  className,\n  layout,\n  discount,\n  asChild = false,\n  onPress,\n  ...props\n}: ProductLinkRootProps) {\n  const Comp = asChild ? SlotPrimitive.Root : Card\n\n  return (\n    <Touchable\n      onClick={onPress}\n      whileTap={{opacity: 0.7}}\n      transition={{\n        opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n      }}\n    >\n      <Comp\n        className={cn(\n          productLinkVariants({layout, discount}),\n          'border-0 bg-white rounded-xl shadow-lg shadow-black/10',\n          className\n        )}\n        {...props}\n      />\n    </Touchable>\n  )\n}\n\nfunction ProductLinkImage({\n  className,\n  layout = 'horizontal',\n  ...props\n}: React.ComponentProps<'div'> & {layout?: 'horizontal' | 'vertical'}) {\n  return (\n    <div\n      data-slot=\"product-link-image\"\n      className={cn(\n        'overflow-hidden rounded-md bg-muted',\n        layout === 'horizontal'\n          ? 'h-16 w-16 flex-shrink-0'\n          : 'aspect-square w-full',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkInfo({\n  className,\n  layout = 'horizontal',\n  ...props\n}: React.ComponentProps<typeof CardContent> & {\n  layout?: 'horizontal' | 'vertical'\n}) {\n  return (\n    <CardContent\n      className={cn(\n        layout === 'horizontal'\n          ? 'flex-1 min-w-0 space-y-1 px-0 py-0'\n          : 'space-y-2',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  return (\n    <h3\n      data-slot=\"product-link-title\"\n      className={cn(\n        'text-sm font-medium leading-tight text-gray-900 truncate overflow-hidden whitespace-nowrap text-ellipsis',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </h3>\n  )\n}\n\nfunction ProductLinkPrice({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"product-link-price\"\n      className={cn('flex items-center gap-2', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkCurrentPrice({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"product-link-current-price\"\n      className={cn('text-sm font-semibold text-gray-900', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkOriginalPrice({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"product-link-original-price\"\n      className={cn('text-sm text-gray-500 line-through', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkDiscountPrice({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"product-link-discount-price\"\n      className={cn('text-sm font-semibold text-red-600', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkRating({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"product-link-rating\"\n      className={cn(\n        'flex items-center gap-1 text-xs text-muted-foreground',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkActions({\n  className,\n  onPress,\n  filled = false,\n  ...props\n}: React.ComponentProps<typeof CardAction> & {\n  onPress?: () => void\n  filled?: boolean\n}) {\n  return (\n    <CardAction\n      className={cn('flex-shrink-0 self-center px-0 py-0', className)}\n      {...props}\n    >\n      <Touchable\n        stopPropagation\n        onClick={onPress}\n        whileTap={{opacity: 0.7, scale: 0.95}}\n        transition={{\n          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n          scale: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n        }}\n      >\n        <FavoriteButton filled={filled} onClick={onPress} />\n      </Touchable>\n    </CardAction>\n  )\n}\n\nexport interface ProductLinkProps {\n  product: Product\n  hideFavoriteAction?: boolean\n}\n\n// Composed ProductLink component\nfunction ProductLink({product, hideFavoriteAction = false}: ProductLinkProps) {\n  const {navigateToProduct} = useShopNavigation()\n  const {saveProduct, unsaveProduct} = useSavedProductsActions()\n\n  const {\n    id,\n    title,\n    featuredImage,\n    reviewAnalytics,\n    price,\n    compareAtPrice,\n    isFavorited,\n    selectedVariant,\n    defaultVariantId,\n    shop,\n  } = product\n\n  // Local state for optimistic UI updates\n  const [isFavoritedLocal, setIsFavoritedLocal] = React.useState(isFavorited)\n\n  const averageRating = reviewAnalytics?.averageRating\n  const reviewCount = reviewAnalytics?.reviewCount\n  const amount = price?.amount\n    ? formatMoney(price?.amount, price?.currencyCode)\n    : undefined\n  const imageUrl = featuredImage?.url\n  const imageAltText = featuredImage?.altText || title\n  const compareAtPriceAmount = compareAtPrice?.amount\n    ? formatMoney(compareAtPrice?.amount, compareAtPrice?.currencyCode)\n    : undefined\n  const hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount\n\n  const handlePress = React.useCallback(() => {\n    navigateToProduct({\n      productId: id,\n    })\n  }, [navigateToProduct, id])\n\n  const handleActionPress = React.useCallback(async () => {\n    const previousState = isFavoritedLocal\n\n    // Optimistic update\n    setIsFavoritedLocal(!previousState)\n\n    try {\n      if (previousState) {\n        await unsaveProduct({\n          productId: id,\n          shopId: shop.id,\n          productVariantId: selectedVariant?.id || defaultVariantId,\n        })\n      } else {\n        await saveProduct({\n          productId: id,\n          shopId: shop.id,\n          productVariantId: selectedVariant?.id || defaultVariantId,\n        })\n      }\n    } catch (error) {\n      // Revert optimistic update on error\n      setIsFavoritedLocal(previousState)\n    }\n  }, [\n    isFavoritedLocal,\n    id,\n    shop.id,\n    selectedVariant?.id,\n    defaultVariantId,\n    saveProduct,\n    unsaveProduct,\n  ])\n\n  return (\n    <ProductLinkRoot\n      layout=\"horizontal\"\n      discount={hasDiscount ? 'small' : 'none'}\n      onPress={handlePress}\n    >\n      <ProductLinkImage layout=\"horizontal\">\n        {imageUrl ? (\n          <img\n            src={imageUrl}\n            alt={imageAltText}\n            className=\"h-full w-full object-cover\"\n          />\n        ) : (\n          <div className=\"h-full w-full bg-muted flex items-center justify-center text-muted-foreground text-xs\">\n            No Image\n          </div>\n        )}\n      </ProductLinkImage>\n\n      <ProductLinkInfo layout=\"horizontal\">\n        <ProductLinkTitle>{title}</ProductLinkTitle>\n\n        {reviewCount && averageRating && (\n          <ProductLinkRating>\n            <div className=\"flex items-center gap-1\">\n              {Array.from({length: 5}, (_, i) => (\n                <Star\n                  key={i}\n                  fill={\n                    i < Math.floor(averageRating!) ? 'currentColor' : 'none'\n                  }\n                  className={cn(\n                    'h-3 w-3',\n                    i < Math.floor(averageRating!)\n                      ? 'text-primary'\n                      : 'text-gray-300'\n                  )}\n                />\n              ))}\n              <span className=\"text-xs text-gray-600 ml-1\">\n                ({reviewCount})\n              </span>\n            </div>\n          </ProductLinkRating>\n        )}\n\n        <ProductLinkPrice>\n          {hasDiscount ? (\n            <>\n              <ProductLinkDiscountPrice>{amount}</ProductLinkDiscountPrice>\n              <ProductLinkOriginalPrice>\n                {compareAtPriceAmount}\n              </ProductLinkOriginalPrice>\n            </>\n          ) : (\n            <ProductLinkCurrentPrice>{amount}</ProductLinkCurrentPrice>\n          )}\n        </ProductLinkPrice>\n      </ProductLinkInfo>\n\n      {hideFavoriteAction ? null : (\n        <ProductLinkActions\n          filled={isFavoritedLocal}\n          onPress={handleActionPress}\n        />\n      )}\n    </ProductLinkRoot>\n  )\n}\n\nexport {ProductLink}\n"],"names":["productLinkVariants","cva","ProductLinkRoot","className","layout","discount","asChild","onPress","props","jsx","Touchable","SlotPrimitive.Root","Card","cn","ProductLinkImage","ProductLinkInfo","CardContent","ProductLinkTitle","children","ProductLinkPrice","ProductLinkCurrentPrice","ProductLinkOriginalPrice","ProductLinkDiscountPrice","ProductLinkRating","ProductLinkActions","filled","CardAction","FavoriteButton","ProductLink","product","hideFavoriteAction","navigateToProduct","useShopNavigation","saveProduct","unsaveProduct","useSavedProductsActions","id","title","featuredImage","reviewAnalytics","price","compareAtPrice","isFavorited","selectedVariant","defaultVariantId","shop","isFavoritedLocal","setIsFavoritedLocal","React","averageRating","reviewCount","amount","formatMoney","imageUrl","imageAltText","compareAtPriceAmount","hasDiscount","handlePress","handleActionPress","previousState","jsxs","_","i","Star","Fragment"],"mappings":"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"}

package/dist/components/commerce/search.js

@@ -0,0 +1,144 @@
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import { useState as P, useCallback as y, createContext as k, useContext as L } from "react";
+import { useProductSearch as T } from "../../hooks/product/useProductSearch.js";
+import { cn as p } from "../../lib/utils.js";
+import { IconButton as E } from "../atoms/icon-button.js";
+import { List as _ } from "../atoms/list.js";
+import { Input as j } from "../ui/input.js";
+import { ProductLink as v } from "./product-link.js";
+import { ProductLinkSkeleton as u } from "./product-link-skeleton.js";
+import z from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/search.js";
+import M from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/x.js";
+const Q = 100, S = k(null);
+function N() {
+  const t = L(S);
+  if (!t)
+    throw new Error("useSearchContext must be used within a SearchProvider");
+  return t;
+}
+function q({ initialQuery: t = "", children: i }) {
+  const [r, a] = P(t), { products: o, loading: s, error: n, fetchMore: c, hasNextPage: l, isTyping: d } = T({
+    query: r,
+    fetchPolicy: "network-only"
+  }), m = y((f) => {
+    a(f);
+  }, []), h = {
+    query: r,
+    setQuery: m,
+    products: o,
+    loading: s,
+    error: n,
+    fetchMore: c,
+    hasNextPage: l,
+    isTyping: d
+  };
+  return /* @__PURE__ */ e(S.Provider, { value: h, children: i });
+}
+function A({
+  placeholder: t = "Search products...",
+  className: i,
+  inputProps: r
+}) {
+  const { query: a, setQuery: o } = N(), s = y(
+    (n) => {
+      o(n.target.value), r?.onChange?.(n);
+    },
+    [r, o]
+  );
+  return /* @__PURE__ */ g("div", { className: "relative flex flex-1 items-center rounded-full pl-4 pr-2 py-1 bg-gray-100", children: [
+    /* @__PURE__ */ e("div", { className: "relative flex items-center", children: /* @__PURE__ */ e(
+      z,
+      {
+        size: 18,
+        className: p("text-accent-foreground opacity-60")
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: "relative flex-1 flex items-center mx-2", children: /* @__PURE__ */ e(
+      j,
+      {
+        name: "search",
+        onChange: s,
+        placeholder: t,
+        type: "search",
+        role: "searchbox",
+        autoComplete: "off",
+        value: a,
+        "data-testid": "search-input",
+        ...r,
+        className: p(
+          "w-full flex overflow-hidden rounded-radius-28 border-none py-4 px-0 text-text placeholder:text-text placeholder:opacity-60",
+          i
+        )
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: "relative flex items-center", children: a === "" ? null : /* @__PURE__ */ e(
+      E,
+      {
+        Icon: M,
+        size: "sm",
+        filled: !1,
+        iconStyles: "",
+        onClick: () => o(""),
+        buttonStyles: "flex items-center rounded-radius-max bg-[var(--grayscale-l20)]"
+      }
+    ) })
+  ] });
+}
+function F({
+  height: t = window.innerHeight,
+  renderItem: i,
+  itemHeight: r = Q,
+  initialStateComponent: a,
+  showScrollbar: o,
+  overscanCount: s = 5
+}) {
+  const { query: n, products: c, loading: l, fetchMore: d, hasNextPage: m, isTyping: h } = N(), f = (x, I) => i ? i(x, I) : /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(v, { product: x, hideFavoriteAction: !0 }, x.id) }), b = n.trim().length === 0, w = (!c || c.length === 0) && (l || h), C = (!c || c.length === 0) && !l;
+  return b ? a || /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-32 text-gray-500", children: "Start typing to search for products" }) : w ? /* @__PURE__ */ g("div", { className: "flex flex-col px-4 py-4", children: [
+    /* @__PURE__ */ e(u, { className: "mb-4" }),
+    /* @__PURE__ */ e(u, { className: "mb-4" }),
+    /* @__PURE__ */ e(u, { className: "mb-4" }),
+    /* @__PURE__ */ e(u, { className: "mb-4" })
+  ] }) : C ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-32 text-gray-500", children: `No products found for "${n}"` }) : /* @__PURE__ */ e(
+    _,
+    {
+      items: c || [],
+      height: t,
+      renderItem: f,
+      itemSizeForRow: () => r,
+      fetchMore: m ? d : void 0,
+      showScrollbar: o,
+      overscanCount: s
+    }
+  );
+}
+function J({
+  initialQuery: t,
+  placeholder: i,
+  inputProps: r,
+  height: a,
+  className: o,
+  renderItem: s,
+  itemHeight: n
+}) {
+  const c = (l, d) => s ? s(l, d) : /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(v, { product: l, hideFavoriteAction: !0 }, l.id) });
+  return /* @__PURE__ */ e(q, { initialQuery: t, children: /* @__PURE__ */ g("div", { className: p("flex flex-col ", o), 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: i, inputProps: r }) }),
+    /* @__PURE__ */ e("div", { className: "h-14" }),
+    /* @__PURE__ */ e(
+      F,
+      {
+        height: a,
+        renderItem: c,
+        itemHeight: n,
+        showScrollbar: !0
+      }
+    )
+  ] }) });
+}
+export {
+  J as Search,
+  A as SearchInput,
+  q as SearchProvider,
+  F as SearchResultsList
+};
+//# sourceMappingURL=search.js.map

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

@@ -0,0 +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\nconst ESTIMATED_PRODUCT_LINK_HEIGHT = 100\n\ninterface SearchContextValue {\n  query: string\n  setQuery: (query: string) => void\n  products: Product[] | null\n  loading: boolean\n  error: Error | null\n  fetchMore?: () => 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  itemHeight = ESTIMATED_PRODUCT_LINK_HEIGHT,\n  initialStateComponent,\n  showScrollbar,\n  overscanCount = 5,\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      itemSizeForRow={() => itemHeight}\n      fetchMore={hasNextPage ? fetchMore : undefined}\n      showScrollbar={showScrollbar}\n      overscanCount={overscanCount}\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}\n\nfunction Search({\n  initialQuery,\n  placeholder,\n  inputProps,\n  height,\n  className,\n  renderItem,\n  itemHeight,\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 key={product.id} product={product} hideFavoriteAction />\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":["ESTIMATED_PRODUCT_LINK_HEIGHT","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","itemHeight","initialStateComponent","showScrollbar","overscanCount","_renderItem","product","index","ProductLink","shouldShowStartingState","shouldShowLoading","shouldShowEmptyState","ProductLinkSkeleton","List","Search"],"mappings":"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"}

package/dist/components/ui/input.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import { cn as n } from "../../lib/utils.js";
-function a({ className: e, type: i, ...r }) {
+function l({ className: e, type: i, ...r }) {
   return /* @__PURE__ */ t(
     "input",
     {
@@ -8,7 +8,7 @@ function a({ className: e, type: i, ...r }) {
       "data-slot": "input",
       className: n(
         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:outline-none",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         e
       ),
@@ -17,6 +17,6 @@ function a({ className: e, type: i, ...r }) {
   );
 }
 export {
-  a as Input
+  l as Input
 };
 //# sourceMappingURL=input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {cn} from '../../lib/utils'\n\nfunction Input({className, type, ...props}: React.ComponentProps<'input'>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {Input}\n"],"names":["Input","className","type","props","jsx","cn"],"mappings":";;AAIA,SAASA,EAAM,EAAC,WAAAC,GAAW,MAAAC,GAAM,GAAGC,KAAuC;AAEvE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAF;AAAA,MACA,aAAU;AAAA,MACV,WAAWG;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MACF;AAAA,MACC,GAAGE;AAAA,IAAA;AAAA,EACN;AAEJ;"}
+{"version":3,"file":"input.js","sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {cn} from '../../lib/utils'\n\nfunction Input({className, type, ...props}: React.ComponentProps<'input'>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n        'focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:outline-none',\n        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {Input}\n"],"names":["Input","className","type","props","jsx","cn"],"mappings":";;AAIA,SAASA,EAAM,EAAC,WAAAC,GAAW,MAAAC,GAAM,GAAGC,KAAuC;AAEvE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAF;AAAA,MACA,aAAU;AAAA,MACV,WAAWG;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MACF;AAAA,MACC,GAAGE;AAAA,IAAA;AAAA,EACN;AAEJ;"}