@shopify/shop-minis-react 0.15.0 → 0.16.1

package/dist/components/atoms/video-player.js

@@ -1,126 +0,0 @@
-import { jsx as t, jsxs as D } from "react/jsx-runtime";
-import { forwardRef as I, useRef as b, useState as B, useImperativeHandle as M, useMemo as R, useEffect as a, useCallback as z } from "react";
-import F from "../../shop-minis-react/node_modules/.pnpm/video.js@8.23.3/node_modules/video.js/dist/video.es.js";
-/* empty css                                                                                                */
-const q = I(
-  ({
-    src: f,
-    format: d = "video/mp4",
-    poster: p,
-    muted: s,
-    autoplay: m,
-    preload: v = "auto",
-    loop: y = !1,
-    width: l,
-    height: h,
-    playButtonComponent: w,
-    onPlay: j,
-    onPause: x,
-    onEnded: P,
-    onReady: c
-  }, E) => {
-    const i = b(null), e = b(null), [o, n] = B(!1);
-    M(
-      E,
-      () => ({
-        play: async () => {
-          if (e.current)
-            try {
-              await e.current.play(), n(!0);
-            } catch (r) {
-              console.error("Error playing video:", r);
-            }
-        },
-        pause: () => {
-          e.current && (e.current.pause(), n(!1));
-        }
-      }),
-      []
-    );
-    const g = R(
-      () => ({
-        controls: !1,
-        controlBar: {
-          volumePanel: {
-            inline: !1
-          }
-        },
-        preload: v,
-        loop: y,
-        muted: s,
-        // This makes sure that the video player does not take over the whole screen
-        preferFullWindow: !1,
-        playsinline: !0,
-        poster: p,
-        height: h,
-        width: l,
-        sources: [
-          {
-            src: f,
-            type: d
-          }
-        ]
-      }),
-      [s, p, h, l, f, d, v, y]
-    );
-    a(() => {
-      const r = e.current;
-      return () => {
-        r && !r.isDisposed() && (r.dispose(), e.current = null);
-      };
-    }, [e]), a(() => {
-      if (!e.current) return;
-      const r = () => {
-        j?.(), n(!0);
-      }, C = () => {
-        x?.(), n(!1);
-      }, N = () => {
-        P?.(), n(!1);
-      };
-      return e.current.on("play", r), e.current.on("pause", C), e.current.on("ended", N), () => {
-        e.current && (e.current.off("play", r), e.current.off("pause", C), e.current.off("ended", N));
-      };
-    }, [P, x, j]);
-    const u = z(() => {
-      o ? (e.current?.pause(), n(!1)) : (e.current?.play(), n(!0));
-    }, [o]);
-    a(() => {
-      if (!e.current) {
-        const r = document.createElement("video-js");
-        i.current?.appendChild(r), e.current = F(r, g, () => {
-          c && c(), m && u();
-        });
-      }
-    }, [g, i, m, c, u]), a(() => {
-      e.current && !e.current.isDisposed() && e.current.muted(s ?? !1);
-    }, [s]);
-    const k = [
-      l ? `w-${l}` : void 0,
-      "relative"
-    ].join(" ");
-    return /* @__PURE__ */ t("div", { className: "flex", children: /* @__PURE__ */ D("div", { "data-vjs-player": !0, className: k, children: [
-      /* @__PURE__ */ t("div", { ref: i }),
-      /* @__PURE__ */ t(
-        "div",
-        {
-          className: "absolute top-0 left-0 w-full h-full flex items-center justify-center cursor-pointer",
-          onClick: u,
-          "aria-hidden": !0,
-          children: o ? null : w ?? /* @__PURE__ */ t(H, {})
-        }
-      )
-    ] }) });
-  }
-), H = () => /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center bg-black/20 cursor-pointer animate-in fade-in duration-200", children: /* @__PURE__ */ t(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    className: "w-10 h-10 text-white",
-    fill: "currentColor",
-    children: /* @__PURE__ */ t("path", { d: "M8 5v14l11-7z" })
-  }
-) });
-export {
-  q as VideoPlayer
-};
-//# sourceMappingURL=video-player.js.map

package/dist/components/atoms/video-player.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"video-player.js","sources":["../../../src/components/atoms/video-player.tsx"],"sourcesContent":["import {\n  useRef,\n  useEffect,\n  useState,\n  useCallback,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n} from 'react'\n\nimport videojs from 'video.js'\nimport Player from 'video.js/dist/types/player'\nimport 'video.js/dist/video-js.css'\n\nexport interface VideoPlayerRef {\n  play: () => Promise<void>\n  pause: () => void\n}\n\nexport interface VideoPlayerProps {\n  /** The video source URL */\n  src: string\n  /** The format/MIME type of the video (default: 'video/mp4') */\n  format?: string\n  /** Whether the video should be muted */\n  muted?: boolean\n  /** URL for the poster image shown before playback */\n  poster?: string\n  /** Whether the video should autoplay */\n  autoplay?: boolean\n  /** Preload behavior: 'none', 'metadata', or 'auto' */\n  preload?: 'none' | 'metadata' | 'auto'\n  /** Whether the video should loop */\n  loop?: boolean\n  /** Video width in pixels */\n  width?: number\n  /** Video height in pixels */\n  height?: number\n  /** Custom play button component */\n  playButtonComponent?: React.ReactNode\n  /** Callback when video starts playing */\n  onPlay?: () => void\n  /** Callback when video is paused */\n  onPause?: () => void\n  /** Callback when video ends */\n  onEnded?: () => void\n  /** Callback when video player is ready */\n  onReady?: () => void\n}\n\nexport const VideoPlayer: React.ForwardRefExoticComponent<\n  VideoPlayerProps & React.RefAttributes<VideoPlayerRef>\n> = forwardRef<VideoPlayerRef, VideoPlayerProps>(\n  (\n    {\n      src,\n      format = 'video/mp4',\n      poster,\n      muted,\n      autoplay,\n      preload = 'auto',\n      loop = false,\n      width,\n      height,\n      playButtonComponent,\n      onPlay,\n      onPause,\n      onEnded,\n      onReady,\n    },\n    ref\n  ) => {\n    const videoContainerRef = useRef<HTMLDivElement>(null)\n    const playerRef = useRef<Player | null>(null)\n\n    const [isPlaying, setIsPlaying] = useState(false)\n\n    // Expose imperative methods to parent components\n    useImperativeHandle(\n      ref,\n      () => ({\n        play: async () => {\n          if (playerRef.current) {\n            try {\n              await playerRef.current.play()\n              setIsPlaying(true)\n            } catch (error) {\n              console.error('Error playing video:', error)\n            }\n          }\n        },\n        pause: () => {\n          if (playerRef.current) {\n            playerRef.current.pause()\n            setIsPlaying(false)\n          }\n        },\n      }),\n      []\n    )\n\n    const options = useMemo(\n      () => ({\n        controls: false,\n        controlBar: {\n          volumePanel: {\n            inline: false,\n          },\n        },\n        preload,\n        loop,\n        muted,\n        // This makes sure that the video player does not take over the whole screen\n        preferFullWindow: false,\n        playsinline: true,\n        poster,\n        height,\n        width,\n        sources: [\n          {\n            src,\n            type: format,\n          },\n        ],\n      }),\n      [muted, poster, height, width, src, format, preload, loop]\n    )\n\n    useEffect(() => {\n      const player = playerRef.current\n\n      return () => {\n        if (player && !player.isDisposed()) {\n          player.dispose()\n          playerRef.current = null\n        }\n      }\n    }, [playerRef])\n\n    useEffect(() => {\n      if (!playerRef.current) return\n\n      const handlePlay = () => {\n        onPlay?.()\n        setIsPlaying(true)\n      }\n      const handlePause = () => {\n        onPause?.()\n        setIsPlaying(false)\n      }\n      const handleEnded = () => {\n        onEnded?.()\n        setIsPlaying(false)\n      }\n\n      playerRef.current.on('play', handlePlay)\n      playerRef.current.on('pause', handlePause)\n      playerRef.current.on('ended', handleEnded)\n\n      return () => {\n        if (playerRef.current) {\n          playerRef.current.off('play', handlePlay)\n          playerRef.current.off('pause', handlePause)\n          playerRef.current.off('ended', handleEnded)\n        }\n      }\n    }, [onEnded, onPause, onPlay])\n\n    const togglePlayPause = useCallback(() => {\n      if (isPlaying) {\n        playerRef.current?.pause()\n        setIsPlaying(false)\n      } else {\n        playerRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [isPlaying])\n\n    useEffect(() => {\n      if (!playerRef.current) {\n        const videoElement = document.createElement('video-js')\n\n        // The Video.js player needs to be _inside_ the component element for React 18 Strict Mode.\n        videoContainerRef.current?.appendChild(videoElement)\n\n        playerRef.current = videojs(videoElement, options, () => {\n          onReady && onReady()\n\n          if (autoplay) {\n            togglePlayPause()\n          }\n        })\n      }\n    }, [options, videoContainerRef, autoplay, onReady, togglePlayPause])\n\n    // Update muted state when prop changes after initial render\n    useEffect(() => {\n      if (playerRef.current && !playerRef.current.isDisposed()) {\n        playerRef.current.muted(muted ?? false)\n      }\n    }, [muted])\n\n    const containerClassName = [\n      width ? `w-${width}` : undefined,\n      'relative',\n    ].join(' ')\n\n    return (\n      <div className=\"flex\">\n        <div data-vjs-player className={containerClassName}>\n          <div ref={videoContainerRef} />\n          <div\n            className=\"absolute top-0 left-0 w-full h-full flex items-center justify-center cursor-pointer\"\n            onClick={togglePlayPause}\n            aria-hidden\n          >\n            {isPlaying ? null : (playButtonComponent ?? <DefaultPlayIcon />)}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nconst DefaultPlayIcon = () => (\n  <div className=\"absolute inset-0 flex items-center justify-center bg-black/20 cursor-pointer animate-in fade-in duration-200\">\n    <svg\n      viewBox=\"0 0 24 24\"\n      className=\"w-10 h-10 text-white\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M8 5v14l11-7z\" />\n    </svg>\n  </div>\n)\n"],"names":["VideoPlayer","forwardRef","src","format","poster","muted","autoplay","preload","loop","width","height","playButtonComponent","onPlay","onPause","onEnded","onReady","ref","videoContainerRef","useRef","playerRef","isPlaying","setIsPlaying","useState","useImperativeHandle","error","options","useMemo","useEffect","player","handlePlay","handlePause","handleEnded","togglePlayPause","useCallback","videoElement","videojs","containerClassName","jsx","DefaultPlayIcon"],"mappings":"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"}

package/dist/components/commerce/add-to-cart.js

@@ -1,99 +0,0 @@
-import { jsx as o, jsxs as g } from "react/jsx-runtime";
-import * as p from "react";
-import { useState as w, useCallback as y } from "react";
-import { useShopCartActions as k } from "../../internal/useShopCartActions.js";
-import { cn as h } from "../../lib/utils.js";
-import { Button as j } from "../atoms/button.js";
-import { useShopNavigation as E } from "../../hooks/navigation/useShopNavigation.js";
-import { useErrorToast as R } from "../../hooks/util/useErrorToast.js";
-import { AnimatePresence as S } from "../../shop-minis-react/node_modules/.pnpm/motion@12.17.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.js";
-import { motion as B } from "../../shop-minis-react/node_modules/.pnpm/motion@12.17.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
-import F from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/check.js";
-function L({
-  disabled: i = !1,
-  className: T,
-  size: v = "default",
-  productVariantId: a,
-  discountCodes: l,
-  product: x
-}) {
-  const { addToCart: d } = k(), { navigateToProduct: m } = E(), [t, n] = w(!1), e = p.useRef(void 0), { id: r, referral: s, variants: C } = x ?? {}, u = C?.find(
-    (c) => c.id === a
-  )?.image?.url, { showErrorToast: f } = R(), A = y(async () => {
-    if (!i) {
-      if (r && s) {
-        m({
-          productId: r
-        });
-        return;
-      }
-      if (!t)
-        try {
-          r && a && d({
-            productId: r,
-            productVariantId: a,
-            quantity: 1,
-            discountCodes: l,
-            variantImageUrl: u
-          }).then(() => {
-          }).catch(() => {
-            f({ message: "Failed to add to cart" });
-          }), n(!0), e.current && clearTimeout(e.current), e.current = window.setTimeout(() => {
-            n(!1);
-          }, 2e3);
-        } catch (c) {
-          n(!1), console.error("Failed to add to cart:", c);
-        }
-    }
-  }, [
-    i,
-    r,
-    s,
-    t,
-    m,
-    a,
-    d,
-    l,
-    u,
-    f
-  ]);
-  p.useEffect(() => () => {
-    e.current && clearTimeout(e.current);
-  }, []);
-  const N = s ? "View product" : t ? "Added to cart" : "Add to cart";
-  return /* @__PURE__ */ o(
-    j,
-    {
-      onClick: A,
-      disabled: i,
-      className: h(
-        "relative overflow-hidden transition-all duration-300",
-        T
-      ),
-      size: v,
-      children: /* @__PURE__ */ g("div", { className: "relative flex items-center justify-center", children: [
-        /* @__PURE__ */ o(S, { children: t && /* @__PURE__ */ o(
-          B.div,
-          {
-            initial: { scale: 0, rotate: -180 },
-            animate: { scale: 1, rotate: 0 },
-            exit: { scale: 0, rotate: 180 },
-            transition: {
-              duration: 0.4,
-              ease: [0.175, 0.885, 0.32, 1.275]
-              // bounce effect
-            },
-            className: "absolute left-2",
-            style: { x: -8 },
-            children: /* @__PURE__ */ o(F, { className: "size-4" })
-          }
-        ) }),
-        /* @__PURE__ */ o("span", { className: h(t && "pl-5", "transition-all duration-300"), children: N })
-      ] })
-    }
-  );
-}
-export {
-  L as AddToCartButton
-};
-//# sourceMappingURL=add-to-cart.js.map

package/dist/components/commerce/add-to-cart.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"add-to-cart.js","sources":["../../../src/components/commerce/add-to-cart.tsx"],"sourcesContent":["import * as React from 'react'\nimport {useState, useCallback} from 'react'\n\nimport {Product} from '@shopify/shop-minis-platform'\nimport {CheckIcon} from 'lucide-react'\nimport {motion, AnimatePresence} from 'motion/react'\n\nimport {useErrorToast, useShopNavigation} from '../../hooks'\nimport {useShopCartActions} from '../../internal/useShopCartActions'\nimport {cn} from '../../lib/utils'\nimport {Button} from '../atoms/button'\n\nexport interface AddToCartButtonProps {\n  /** Whether the button is disabled */\n  disabled?: boolean\n  /** CSS class name */\n  className?: string\n  /** Button size variant */\n  size?: 'default' | 'sm' | 'lg'\n  /** The discount codes to apply to the cart */\n  discountCodes?: string[]\n  /** The GID of the product variant. E.g. `gid://shopify/ProductVariant/456` */\n  productVariantId: string\n  /** The product to add to the cart */\n  product?: Product\n}\n\nexport function AddToCartButton({\n  disabled = false,\n  className,\n  size = 'default',\n  productVariantId,\n  discountCodes,\n  product,\n}: AddToCartButtonProps) {\n  const {addToCart} = useShopCartActions()\n  const {navigateToProduct} = useShopNavigation()\n  const [isAdded, setIsAdded] = useState(false)\n  const timeoutRef = React.useRef<number | undefined>(undefined)\n  const {id, referral, variants} = product ?? {}\n\n  const variantImageUrl = variants?.find(\n    variant => variant.id === productVariantId\n  )?.image?.url\n\n  const {showErrorToast} = useErrorToast()\n\n  const handleClick = useCallback(async () => {\n    if (disabled) return\n\n    if (id && referral) {\n      navigateToProduct({\n        productId: id,\n      })\n\n      return\n    }\n\n    if (isAdded) return\n\n    try {\n      if (id && productVariantId) {\n        addToCart({\n          productId: id,\n          productVariantId,\n          quantity: 1,\n          discountCodes,\n          variantImageUrl,\n        })\n          .then(() => {})\n          .catch(() => {\n            showErrorToast({message: 'Failed to add to cart'})\n          })\n      }\n\n      // Show success state\n      setIsAdded(true)\n\n      // Clear any existing timeout\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current)\n      }\n\n      // Reset to initial state after delay\n      timeoutRef.current = window.setTimeout(() => {\n        setIsAdded(false)\n      }, 2000)\n    } catch (error) {\n      // Handle error - reset to initial state\n      setIsAdded(false)\n      console.error('Failed to add to cart:', error)\n    }\n  }, [\n    disabled,\n    id,\n    referral,\n    isAdded,\n    navigateToProduct,\n    productVariantId,\n    addToCart,\n    discountCodes,\n    variantImageUrl,\n    showErrorToast,\n  ])\n\n  // Cleanup timeout on unmount\n  React.useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current)\n      }\n    }\n  }, [])\n\n  const addToCartText = isAdded ? 'Added to cart' : 'Add to cart'\n  const buttonText = referral ? 'View product' : addToCartText\n\n  return (\n    <Button\n      onClick={handleClick}\n      disabled={disabled}\n      className={cn(\n        'relative overflow-hidden transition-all duration-300',\n        className\n      )}\n      size={size}\n    >\n      <div className=\"relative flex items-center justify-center\">\n        <AnimatePresence>\n          {isAdded && (\n            <motion.div\n              initial={{scale: 0, rotate: -180}}\n              animate={{scale: 1, rotate: 0}}\n              exit={{scale: 0, rotate: 180}}\n              transition={{\n                duration: 0.4,\n                ease: [0.175, 0.885, 0.32, 1.275], // bounce effect\n              }}\n              className=\"absolute left-2\"\n              style={{x: -8}}\n            >\n              <CheckIcon className=\"size-4\" />\n            </motion.div>\n          )}\n        </AnimatePresence>\n        <span className={cn(isAdded && 'pl-5', 'transition-all duration-300')}>\n          {buttonText}\n        </span>\n      </div>\n    </Button>\n  )\n}\n"],"names":["AddToCartButton","disabled","className","size","productVariantId","discountCodes","product","addToCart","useShopCartActions","navigateToProduct","useShopNavigation","isAdded","setIsAdded","useState","timeoutRef","React","id","referral","variants","variantImageUrl","variant","showErrorToast","useErrorToast","handleClick","useCallback","error","buttonText","jsx","Button","cn","jsxs","AnimatePresence","motion","CheckIcon"],"mappings":"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"}

package/dist/components/commerce/buy-now.js

@@ -1,75 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useState as h, useCallback as d } from "react";
-import { useShopCartActions as w } from "../../internal/useShopCartActions.js";
-import { cn as g } from "../../lib/utils.js";
-import { Button as v } from "../atoms/button.js";
-import { AnimatePresence as P } from "../../shop-minis-react/node_modules/.pnpm/motion@12.17.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.js";
-import { motion as x } from "../../shop-minis-react/node_modules/.pnpm/motion@12.17.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
-import { useShopNavigation as B } from "../../hooks/navigation/useShopNavigation.js";
-import { useErrorToast as k } from "../../hooks/util/useErrorToast.js";
-function I({
-  disabled: r = !1,
-  className: f,
-  size: l = "default",
-  productVariantId: i,
-  discountCode: s,
-  product: p
-}) {
-  const { buyProduct: c } = w(), { navigateToProduct: m } = B(), [o, e] = h(!1), { id: t, referral: a } = p ?? {}, { showErrorToast: u } = k(), y = d(async () => {
-    if (!r) {
-      if (t && a) {
-        m({
-          productId: t
-        });
-        return;
-      }
-      if (!o)
-        try {
-          t && i && (e(!0), await c({
-            productId: t,
-            productVariantId: i,
-            quantity: 1,
-            discountCode: s
-          }), e(!1));
-        } catch {
-          u({ message: "Failed to complete purchase" }), e(!1);
-        }
-    }
-  }, [
-    r,
-    t,
-    a,
-    o,
-    m,
-    i,
-    c,
-    s,
-    u
-  ]);
-  return /* @__PURE__ */ n(
-    v,
-    {
-      onClick: y,
-      disabled: r || o,
-      className: g("relative overflow-hidden", f),
-      size: l,
-      "aria-live": "polite",
-      "aria-busy": o,
-      children: /* @__PURE__ */ n(P, { mode: "wait", children: /* @__PURE__ */ n(
-        x.span,
-        {
-          initial: { opacity: 0, y: 10 },
-          animate: { opacity: 1, y: 0 },
-          exit: { opacity: 0, y: -10 },
-          transition: { duration: 0.2 },
-          children: a ? "View product" : "Buy now"
-        },
-        "text"
-      ) })
-    }
-  );
-}
-export {
-  I as BuyNowButton
-};
-//# sourceMappingURL=buy-now.js.map

package/dist/components/commerce/buy-now.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"buy-now.js","sources":["../../../src/components/commerce/buy-now.tsx"],"sourcesContent":["import {useState, useCallback} from 'react'\n\nimport {Product} from '@shopify/shop-minis-platform'\nimport {motion, AnimatePresence} from 'motion/react'\n\nimport {useErrorToast, useShopNavigation} from '../../hooks'\nimport {useShopCartActions} from '../../internal/useShopCartActions'\nimport {cn} from '../../lib/utils'\nimport {Button} from '../atoms/button'\n\nexport interface BuyNowButtonProps {\n  /** Whether the button is disabled */\n  disabled?: boolean\n  /** CSS class name */\n  className?: string\n  /** Button size variant */\n  size?: 'default' | 'sm' | 'lg'\n  /** The discount code to apply to the purchase */\n  discountCode?: string\n  /** The GID of the product variant. E.g. `gid://shopify/ProductVariant/456` */\n  productVariantId: string\n  /** The product to buy now */\n  product?: Product\n}\n\nexport function BuyNowButton({\n  disabled = false,\n  className,\n  size = 'default',\n  productVariantId,\n  discountCode,\n  product,\n}: BuyNowButtonProps) {\n  const {buyProduct} = useShopCartActions()\n  const {navigateToProduct} = useShopNavigation()\n  const [isPurchasing, setIsPurchasing] = useState(false)\n  const {id, referral} = product ?? {}\n\n  const {showErrorToast} = useErrorToast()\n\n  const handleClick = useCallback(async () => {\n    if (disabled) return\n\n    if (id && referral) {\n      navigateToProduct({\n        productId: id,\n      })\n\n      return\n    }\n\n    if (isPurchasing) return\n\n    try {\n      if (id && productVariantId) {\n        setIsPurchasing(true)\n\n        await buyProduct({\n          productId: id,\n          productVariantId,\n          quantity: 1,\n          discountCode,\n        })\n\n        setIsPurchasing(false)\n      }\n    } catch (error) {\n      showErrorToast({message: 'Failed to complete purchase'})\n      setIsPurchasing(false)\n    }\n  }, [\n    disabled,\n    id,\n    referral,\n    isPurchasing,\n    navigateToProduct,\n    productVariantId,\n    buyProduct,\n    discountCode,\n    showErrorToast,\n  ])\n\n  return (\n    <Button\n      onClick={handleClick}\n      disabled={disabled || isPurchasing}\n      className={cn('relative overflow-hidden', className)}\n      size={size}\n      aria-live=\"polite\"\n      aria-busy={isPurchasing}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.span\n          key=\"text\"\n          initial={{opacity: 0, y: 10}}\n          animate={{opacity: 1, y: 0}}\n          exit={{opacity: 0, y: -10}}\n          transition={{duration: 0.2}}\n        >\n          {referral ? 'View product' : 'Buy now'}\n        </motion.span>\n      </AnimatePresence>\n    </Button>\n  )\n}\n"],"names":["BuyNowButton","disabled","className","size","productVariantId","discountCode","product","buyProduct","useShopCartActions","navigateToProduct","useShopNavigation","isPurchasing","setIsPurchasing","useState","id","referral","showErrorToast","useErrorToast","handleClick","useCallback","jsx","Button","cn","AnimatePresence","motion"],"mappings":";;;;;;;;;AAyBO,SAASA,EAAa;AAAA,EAC3B,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AACF,GAAsB;AACd,QAAA,EAAC,YAAAC,EAAU,IAAIC,EAAmB,GAClC,EAAC,mBAAAC,EAAiB,IAAIC,EAAkB,GACxC,CAACC,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAChD,EAAC,IAAAC,GAAI,UAAAC,EAAQ,IAAIT,KAAW,CAAC,GAE7B,EAAC,gBAAAU,EAAc,IAAIC,EAAc,GAEjCC,IAAcC,EAAY,YAAY;AAC1C,QAAI,CAAAlB,GAEJ;AAAA,UAAIa,KAAMC,GAAU;AACA,QAAAN,EAAA;AAAA,UAChB,WAAWK;AAAA,QAAA,CACZ;AAED;AAAA,MAAA;AAGF,UAAI,CAAAH;AAEA,YAAA;AACF,UAAIG,KAAMV,MACRQ,EAAgB,EAAI,GAEpB,MAAML,EAAW;AAAA,YACf,WAAWO;AAAA,YACX,kBAAAV;AAAA,YACA,UAAU;AAAA,YACV,cAAAC;AAAA,UAAA,CACD,GAEDO,EAAgB,EAAK;AAAA,gBAET;AACC,UAAAI,EAAA,EAAC,SAAS,+BAA8B,GACvDJ,EAAgB,EAAK;AAAA,QAAA;AAAA;AAAA,EACvB,GACC;AAAA,IACDX;AAAA,IACAa;AAAA,IACAC;AAAA,IACAJ;AAAA,IACAF;AAAA,IACAL;AAAA,IACAG;AAAA,IACAF;AAAA,IACAW;AAAA,EAAA,CACD;AAGC,SAAA,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASH;AAAA,MACT,UAAUjB,KAAYU;AAAA,MACtB,WAAWW,EAAG,4BAA4BpB,CAAS;AAAA,MACnD,MAAAC;AAAA,MACA,aAAU;AAAA,MACV,aAAWQ;AAAA,MAEX,UAAA,gBAAAS,EAACG,GAAgB,EAAA,MAAK,QACpB,UAAA,gBAAAH;AAAA,QAACI,EAAO;AAAA,QAAP;AAAA,UAEC,SAAS,EAAC,SAAS,GAAG,GAAG,GAAE;AAAA,UAC3B,SAAS,EAAC,SAAS,GAAG,GAAG,EAAC;AAAA,UAC1B,MAAM,EAAC,SAAS,GAAG,GAAG,IAAG;AAAA,UACzB,YAAY,EAAC,UAAU,IAAG;AAAA,UAEzB,cAAW,iBAAiB;AAAA,QAAA;AAAA,QANzB;AAAA,MAAA,EAQR,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"favorite-button.js","sources":["../../../src/components/commerce/favorite-button.tsx"],"sourcesContent":["import {Heart} from 'lucide-react'\n\nimport {IconButton} from '../atoms/icon-button'\n\nexport interface FavoriteButtonProps {\n  /** Click handler for toggling favorite state */\n  onClick?: () => void\n  /** Whether the product is currently favorited */\n  filled?: boolean\n}\n\nexport function FavoriteButton({onClick, filled = false}: FavoriteButtonProps) {\n  return (\n    <IconButton\n      Icon={Heart}\n      filled={filled}\n      onClick={onClick}\n      buttonStyles={\n        filled ? 'bg-primary' : 'bg-button-overlay/30 backdrop-blur-sm'\n      }\n    />\n  )\n}\n"],"names":["FavoriteButton","onClick","filled","jsx","IconButton","Heart"],"mappings":";;;AAWO,SAASA,EAAe,EAAC,SAAAC,GAAS,QAAAC,IAAS,MAA6B;AAE3E,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMC;AAAA,MACN,QAAAH;AAAA,MACA,SAAAD;AAAA,MACA,cACEC,IAAS,eAAe;AAAA,IAAA;AAAA,EAE5B;AAEJ;"}

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

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

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

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