@shopify/shop-minis-react 0.1.5 → 0.1.7

package/dist/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.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../../../../../../../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.mjs"],"sourcesContent":["\"use client\";\nimport { jsx, Fragment } from 'react/jsx-runtime';\nimport { useMemo, useRef, useState, useContext } from 'react';\nimport { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\nimport { PresenceChild } from './PresenceChild.mjs';\nimport { usePresence } from './use-presence.mjs';\nimport { onlyElements, getChildKey } from './utils.mjs';\n\n/**\n * `AnimatePresence` enables the animation of components that have been removed from the tree.\n *\n * When adding/removing more than a single child, every child **must** be given a unique `key` prop.\n *\n * Any `motion` components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\n * ```jsx\n * import { motion, AnimatePresence } from 'framer-motion'\n *\n * export const Items = ({ items }) => (\n *   <AnimatePresence>\n *     {items.map(item => (\n *       <motion.div\n *         key={item.id}\n *         initial={{ opacity: 0 }}\n *         animate={{ opacity: 1 }}\n *         exit={{ opacity: 0 }}\n *       />\n *     ))}\n *   </AnimatePresence>\n * )\n * ```\n *\n * You can sequence exit animations throughout a tree using variants.\n *\n * If a child contains multiple `motion` components with `exit` props, it will only unmount the child\n * once all `motion` components have finished animating out. Likewise, any components using\n * `usePresence` all need to call `safeToRemove`.\n *\n * @public\n */\nconst AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = \"sync\", propagate = false, anchorX = \"left\", }) => {\n    const [isParentPresent, safeToRemove] = usePresence(propagate);\n    /**\n     * Filter any children that aren't ReactElements. We can only track components\n     * between renders with a props.key.\n     */\n    const presentChildren = useMemo(() => onlyElements(children), [children]);\n    /**\n     * Track the keys of the currently rendered children. This is used to\n     * determine which children are exiting.\n     */\n    const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);\n    /**\n     * If `initial={false}` we only want to pass this to components in the first render.\n     */\n    const isInitialRender = useRef(true);\n    /**\n     * A ref containing the currently present children. When all exit animations\n     * are complete, we use this to re-render the component with the latest children\n     * *committed* rather than the latest children *rendered*.\n     */\n    const pendingPresentChildren = useRef(presentChildren);\n    /**\n     * Track which exiting children have finished animating out.\n     */\n    const exitComplete = useConstant(() => new Map());\n    /**\n     * Save children to render as React state. To ensure this component is concurrent-safe,\n     * we check for exiting children via an effect.\n     */\n    const [diffedChildren, setDiffedChildren] = useState(presentChildren);\n    const [renderedChildren, setRenderedChildren] = useState(presentChildren);\n    useIsomorphicLayoutEffect(() => {\n        isInitialRender.current = false;\n        pendingPresentChildren.current = presentChildren;\n        /**\n         * Update complete status of exiting children.\n         */\n        for (let i = 0; i < renderedChildren.length; i++) {\n            const key = getChildKey(renderedChildren[i]);\n            if (!presentKeys.includes(key)) {\n                if (exitComplete.get(key) !== true) {\n                    exitComplete.set(key, false);\n                }\n            }\n            else {\n                exitComplete.delete(key);\n            }\n        }\n    }, [renderedChildren, presentKeys.length, presentKeys.join(\"-\")]);\n    const exitingChildren = [];\n    if (presentChildren !== diffedChildren) {\n        let nextChildren = [...presentChildren];\n        /**\n         * Loop through all the currently rendered components and decide which\n         * are exiting.\n         */\n        for (let i = 0; i < renderedChildren.length; i++) {\n            const child = renderedChildren[i];\n            const key = getChildKey(child);\n            if (!presentKeys.includes(key)) {\n                nextChildren.splice(i, 0, child);\n                exitingChildren.push(child);\n            }\n        }\n        /**\n         * If we're in \"wait\" mode, and we have exiting children, we want to\n         * only render these until they've all exited.\n         */\n        if (mode === \"wait\" && exitingChildren.length) {\n            nextChildren = exitingChildren;\n        }\n        setRenderedChildren(onlyElements(nextChildren));\n        setDiffedChildren(presentChildren);\n        /**\n         * Early return to ensure once we've set state with the latest diffed\n         * children, we can immediately re-render.\n         */\n        return null;\n    }\n    if (process.env.NODE_ENV !== \"production\" &&\n        mode === \"wait\" &&\n        renderedChildren.length > 1) {\n        console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to \"wait\". This will lead to odd visual behaviour.`);\n    }\n    /**\n     * If we've been provided a forceRender function by the LayoutGroupContext,\n     * we can use it to force a re-render amongst all surrounding components once\n     * all components have finished animating out.\n     */\n    const { forceRender } = useContext(LayoutGroupContext);\n    return (jsx(Fragment, { children: renderedChildren.map((child) => {\n            const key = getChildKey(child);\n            const isPresent = propagate && !isParentPresent\n                ? false\n                : presentChildren === renderedChildren ||\n                    presentKeys.includes(key);\n            const onExit = () => {\n                if (exitComplete.has(key)) {\n                    exitComplete.set(key, true);\n                }\n                else {\n                    return;\n                }\n                let isEveryExitComplete = true;\n                exitComplete.forEach((isExitComplete) => {\n                    if (!isExitComplete)\n                        isEveryExitComplete = false;\n                });\n                if (isEveryExitComplete) {\n                    forceRender?.();\n                    setRenderedChildren(pendingPresentChildren.current);\n                    propagate && safeToRemove?.();\n                    onExitComplete && onExitComplete();\n                }\n            };\n            return (jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial\n                    ? undefined\n                    : false, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, onExitComplete: isPresent ? undefined : onExit, anchorX: anchorX, children: child }, key));\n        }) }));\n};\n\nexport { AnimatePresence };\n"],"names":["AnimatePresence","children","custom","initial","onExitComplete","presenceAffectsLayout","mode","propagate","anchorX","isParentPresent","safeToRemove","usePresence","presentChildren","useMemo","onlyElements","presentKeys","getChildKey","isInitialRender","useRef","pendingPresentChildren","exitComplete","useConstant","diffedChildren","setDiffedChildren","useState","renderedChildren","setRenderedChildren","useIsomorphicLayoutEffect","i","key","exitingChildren","nextChildren","child","forceRender","useContext","LayoutGroupContext","jsx","Fragment","isPresent","onExit","isEveryExitComplete","isExitComplete","PresenceChild"],"mappings":";;;;;;;;AA2CK,MAACA,IAAkB,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,SAAAC,IAAU,IAAM,gBAAAC,GAAgB,uBAAAC,IAAwB,IAAM,MAAAC,IAAO,QAAQ,WAAAC,IAAY,IAAO,SAAAC,IAAU,aAAc;AACjK,QAAM,CAACC,GAAiBC,CAAY,IAAIC,EAAYJ,CAAS,GAKvDK,IAAkBC,EAAQ,MAAMC,EAAab,CAAQ,GAAG,CAACA,CAAQ,CAAC,GAKlEc,IAAcR,KAAa,CAACE,IAAkB,CAAA,IAAKG,EAAgB,IAAII,CAAW,GAIlFC,IAAkBC,EAAO,EAAI,GAM7BC,IAAyBD,EAAON,CAAe,GAI/CQ,IAAeC,EAAY,MAAM,oBAAI,IAAG,CAAE,GAK1C,CAACC,GAAgBC,CAAiB,IAAIC,EAASZ,CAAe,GAC9D,CAACa,GAAkBC,CAAmB,IAAIF,EAASZ,CAAe;AACxE,EAAAe,EAA0B,MAAM;AAC5B,IAAAV,EAAgB,UAAU,IAC1BE,EAAuB,UAAUP;AAIjC,aAASgB,IAAI,GAAGA,IAAIH,EAAiB,QAAQG,KAAK;AAC9C,YAAMC,IAAMb,EAAYS,EAAiBG,CAAC,CAAC;AAC3C,MAAKb,EAAY,SAASc,CAAG,IAMzBT,EAAa,OAAOS,CAAG,IALnBT,EAAa,IAAIS,CAAG,MAAM,MAC1BT,EAAa,IAAIS,GAAK,EAAK;AAAA,IAM/C;AAAA,EACA,GAAO,CAACJ,GAAkBV,EAAY,QAAQA,EAAY,KAAK,GAAG,CAAC,CAAC;AAChE,QAAMe,IAAkB,CAAE;AAC1B,MAAIlB,MAAoBU,GAAgB;AACpC,QAAIS,IAAe,CAAC,GAAGnB,CAAe;AAKtC,aAASgB,IAAI,GAAGA,IAAIH,EAAiB,QAAQG,KAAK;AAC9C,YAAMI,IAAQP,EAAiBG,CAAC,GAC1BC,IAAMb,EAAYgB,CAAK;AAC7B,MAAKjB,EAAY,SAASc,CAAG,MACzBE,EAAa,OAAOH,GAAG,GAAGI,CAAK,GAC/BF,EAAgB,KAAKE,CAAK;AAAA,IAE1C;AAKQ,WAAI1B,MAAS,UAAUwB,EAAgB,WACnCC,IAAeD,IAEnBJ,EAAoBZ,EAAaiB,CAAY,CAAC,GAC9CR,EAAkBX,CAAe,GAK1B;AAAA,EACf;AACI,EAAI,QAAQ,IAAI,aAAa,gBACzBN,MAAS,UACTmB,EAAiB,SAAS,KAC1B,QAAQ,KAAK,+IAA+I;AAOhK,QAAM,EAAE,aAAAQ,EAAW,IAAKC,EAAWC,CAAkB;AACrD,SAAQC,EAAIC,GAAU,EAAE,UAAUZ,EAAiB,IAAI,CAACO,MAAU;AAC1D,UAAMH,IAAMb,EAAYgB,CAAK,GACvBM,IAAY/B,KAAa,CAACE,IAC1B,KACAG,MAAoBa,KAClBV,EAAY,SAASc,CAAG,GAC1BU,IAAS,MAAM;AACjB,UAAInB,EAAa,IAAIS,CAAG;AACpB,QAAAT,EAAa,IAAIS,GAAK,EAAI;AAAA;AAG1B;AAEJ,UAAIW,IAAsB;AAC1B,MAAApB,EAAa,QAAQ,CAACqB,MAAmB;AACrC,QAAKA,MACDD,IAAsB;AAAA,MAC9C,CAAiB,GACGA,MACAP,IAAe,GACfP,EAAoBP,EAAuB,OAAO,GAClDZ,KAAaG,IAAgB,GAC7BN,KAAkBA,EAAgB;AAAA,IAEzC;AACD,WAAQgC,EAAIM,GAAe,EAAE,WAAWJ,GAAW,SAAS,CAACrB,EAAgB,WAAWd,IAC9E,SACA,IAAO,QAAQD,GAAQ,uBAAuBG,GAAuB,MAAMC,GAAM,gBAAgBgC,IAAY,SAAYC,GAAQ,SAAS/B,GAAS,UAAUwB,EAAO,GAAEH,CAAG;AAAA,EACtL,CAAA,GAAG;AACZ;","x_google_ignoreList":[0]}

package/dist/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/utils.js

@@ -0,0 +1,13 @@
+import { Children as o, isValidElement as r } from "react";
+const l = (e) => e.key || "";
+function f(e) {
+  const t = [];
+  return o.forEach(e, (n) => {
+    r(n) && t.push(n);
+  }), t;
+}
+export {
+  l as getChildKey,
+  f as onlyElements
+};
+//# sourceMappingURL=utils.js.map

package/dist/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/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../../../../../../../../../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/utils.mjs"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nconst getChildKey = (child) => child.key || \"\";\nfunction onlyElements(children) {\n    const filtered = [];\n    // We use forEach here instead of map as map mutates the component key by preprending `.$`\n    Children.forEach(children, (child) => {\n        if (isValidElement(child))\n            filtered.push(child);\n    });\n    return filtered;\n}\n\nexport { getChildKey, onlyElements };\n"],"names":["getChildKey","child","onlyElements","children","filtered","Children","isValidElement"],"mappings":";AAEK,MAACA,IAAc,CAACC,MAAUA,EAAM,OAAO;AAC5C,SAASC,EAAaC,GAAU;AAC5B,QAAMC,IAAW,CAAE;AAEnB,SAAAC,EAAS,QAAQF,GAAU,CAACF,MAAU;AAClC,IAAIK,EAAeL,CAAK,KACpBG,EAAS,KAAKH,CAAK;AAAA,EAC/B,CAAK,GACMG;AACX;","x_google_ignoreList":[0]}

package/dist/shop-minis-react/node_modules/.pnpm/mpd-parser@1.3.1/node_modules/mpd-parser/dist/mpd-parser.es.js

@@ -2,7 +2,7 @@ import L from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-ut
 import T from "../../../../../../../_virtual/window.js";
 import { forEachMediaGroup as Z } from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/media-groups.js";
 import J from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/decode-b64-to-uint8-array.js";
-import { l as Q } from "../../../../../../../_virtual/index7.js";
+import { l as Q } from "../../../../../../../_virtual/index6.js";
 /*! @name mpd-parser @version 1.3.1 @license Apache-2.0 */
 const w = (e) => !!e && typeof e == "object", E = (...e) => e.reduce((n, t) => (typeof t != "object" || Object.keys(t).forEach((r) => {
   Array.isArray(n[r]) && Array.isArray(t[r]) ? n[r] = n[r].concat(t[r]) : w(n[r]) && w(t[r]) ? n[r] = E(n[r], t[r]) : n[r] = t[r];

package/dist/shop-minis-react/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js

@@ -1,4 +1,4 @@
-import { __module as r } from "../../../../../../../_virtual/index9.js";
+import { __module as r } from "../../../../../../../_virtual/index10.js";
 import { __require as o } from "../cjs/use-sync-external-store-shim.production.js";
 import { __require as i } from "../cjs/use-sync-external-store-shim.development.js";
 var e;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -38,7 +38,7 @@
     "typescript": ">=5.0.0"
   },
   "dependencies": {
-    "@shopify/shop-minis-platform": "0.4.0",
+    "@shopify/shop-minis-platform": "0.5.0",
     "@tailwindcss/vite": "4.1.8",
     "@types/color": "3.0.6",
     "@types/lodash": "4.17.20",

package/src/components/atoms/list.tsx

@@ -1,12 +1,18 @@
-import {useCallback, useRef} from 'react'
+import {useCallback, useEffect, useRef} from 'react'
 
 import {Virtuoso, VirtuosoProps} from 'react-virtuoso'
 
+import {RefreshIndicator} from '../../internal/components/refresh-indicator'
+import {usePullToRefresh} from '../../internal/usePullToRefresh'
+import {findVirtuosoScrollableElement} from '../../internal/utils/virtuoso-dom'
 import {cn} from '../../lib/utils'
 import '../../styles/utilities.css'
 
 import {Pagination} from './pagination'
 
+const DEFAULT_REFRESH_PULL_THRESHOLD = 200
+const ELEMENT_BIND_DELAY = 100
+
 interface Props<T = any>
   extends Omit<
     VirtuosoProps<T, unknown>,
@@ -19,6 +25,9 @@ interface Props<T = any>
   fetchMore?: () => Promise<void>
   loadingComponent?: React.ReactNode
   isFetchingMore?: boolean
+  onRefresh?: () => Promise<void>
+  refreshing?: boolean
+  enablePullToRefresh?: boolean
 }
 
 export function List<T = any>({
@@ -31,9 +40,20 @@ export function List<T = any>({
   fetchMore,
   loadingComponent,
   isFetchingMore,
+  onRefresh,
+  refreshing,
+  enablePullToRefresh = true,
   ...virtuosoProps
 }: Props<T>) {
   const inFlightFetchMoreRef = useRef<Promise<void> | null>(null)
+  const virtuosoRef = useRef<any>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const {state: pullToRefreshState, bindToElement} = usePullToRefresh({
+    onRefresh,
+    threshold: DEFAULT_REFRESH_PULL_THRESHOLD,
+    enabled: enablePullToRefresh && Boolean(onRefresh),
+  })
 
   const _fetchMore = useCallback(() => {
     // Dedupe concurrent calls by returning the same in-flight promise
@@ -68,18 +88,83 @@ export function List<T = any>({
 
   const classNames = cn(showScrollbar ? undefined : 'no-scrollbars', className)
 
+  useEffect(() => {
+    if (containerRef.current && enablePullToRefresh && onRefresh) {
+      let cleanup: (() => void) | undefined
+
+      const findAndBind = () => {
+        if (!containerRef.current) return
+
+        const scrollableElement = findVirtuosoScrollableElement(
+          containerRef.current
+        )
+        cleanup = bindToElement(scrollableElement)
+      }
+
+      const timeoutId = setTimeout(findAndBind, ELEMENT_BIND_DELAY)
+
+      return () => {
+        clearTimeout(timeoutId)
+        if (cleanup) cleanup()
+      }
+    }
+    return undefined
+  }, [bindToElement, enablePullToRefresh, onRefresh])
+
+  const EnhancedHeader = useCallback(() => {
+    const effectivePullDistance = refreshing
+      ? Math.max(pullToRefreshState.pullDistance, 140)
+      : pullToRefreshState.pullDistance
+
+    const refreshHeaderHeight = Math.min(
+      Math.max(effectivePullDistance, 0),
+      140
+    )
+
+    return (
+      <>
+        {enablePullToRefresh && onRefresh && (
+          <div
+            className="flex items-center justify-center"
+            style={{
+              height: refreshHeaderHeight,
+              overflow: 'hidden',
+            }}
+          >
+            <RefreshIndicator
+              pullDistance={pullToRefreshState.pullDistance}
+              threshold={DEFAULT_REFRESH_PULL_THRESHOLD}
+              isRefreshing={refreshing ?? false}
+              canRefresh={pullToRefreshState.canRefresh}
+              className="relative top-0 inset-x-auto"
+            />
+          </div>
+        )}
+        {header && <div>{header}</div>}
+      </>
+    )
+  }, [header, enablePullToRefresh, onRefresh, pullToRefreshState, refreshing])
+
   return (
-    <Virtuoso
-      className={classNames}
-      style={{height}}
-      data={items}
-      itemContent={itemContent}
-      components={{
-        Header: header ? () => <div>{header}</div> : undefined,
-        Footer,
+    <div
+      ref={containerRef}
+      className={cn('relative transition-all duration-200', classNames)}
+      style={{
+        height,
       }}
-      endReached={fetchMore ? _fetchMore : undefined}
-      {...virtuosoProps}
-    />
+    >
+      <Virtuoso
+        ref={virtuosoRef}
+        className="h-full w-full"
+        data={items}
+        itemContent={itemContent}
+        components={{
+          Header: EnhancedHeader,
+          Footer,
+        }}
+        endReached={fetchMore ? _fetchMore : undefined}
+        {...virtuosoProps}
+      />
+    </div>
   )
 }

package/src/components/commerce/add-to-cart.test.tsx

@@ -0,0 +1,73 @@
+import {describe, expect, it, vi} from 'vitest'
+
+import {render, screen, mockMinisSDK, resetAllMocks} from '../../test-utils'
+
+import {AddToCartButton} from './add-to-cart'
+
+// Mock hooks
+vi.mock('../../hooks/shop/useShopCartActions', () => ({
+  useShopCartActions: () => ({
+    addToCart: mockMinisSDK.addToCart,
+    buyProduct: mockMinisSDK.buyProduct,
+  }),
+}))
+
+describe('AddToCartButton', () => {
+  const defaultProps = {
+    productId: 'gid://shopify/Product/123',
+    productVariantId: 'gid://shopify/ProductVariant/456',
+  }
+
+  // eslint-disable-next-line jest/require-top-level-describe
+  beforeEach(() => {
+    resetAllMocks()
+  })
+
+  it('renders with default text', () => {
+    render(<AddToCartButton {...defaultProps} />)
+
+    expect(screen.getByRole('button')).toBeInTheDocument()
+    expect(screen.getByText('Add to cart')).toBeInTheDocument()
+  })
+
+  it('renders with required props', () => {
+    render(<AddToCartButton {...defaultProps} />)
+
+    const button = screen.getByRole('button')
+    expect(button).toBeInTheDocument()
+  })
+
+  it('respects disabled prop', () => {
+    render(<AddToCartButton {...defaultProps} disabled />)
+
+    const button = screen.getByRole('button')
+    expect(button).toBeDisabled()
+  })
+
+  it('applies custom className', () => {
+    render(<AddToCartButton {...defaultProps} className="custom-class" />)
+
+    const button = screen.getByRole('button')
+    expect(button).toHaveClass('custom-class')
+  })
+
+  it('renders with different sizes', () => {
+    const {rerender} = render(<AddToCartButton {...defaultProps} size="sm" />)
+
+    expect(screen.getByRole('button')).toBeInTheDocument()
+
+    rerender(<AddToCartButton {...defaultProps} size="default" />)
+    expect(screen.getByRole('button')).toBeInTheDocument()
+
+    rerender(<AddToCartButton {...defaultProps} size="lg" />)
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+
+  it('renders with discount codes prop', () => {
+    const discountCodes = ['SUMMER20', 'FREESHIP']
+
+    render(<AddToCartButton {...defaultProps} discountCodes={discountCodes} />)
+
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+})

package/src/components/commerce/add-to-cart.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react'
+import {useState, useCallback} from 'react'
+
+import {CheckIcon} from 'lucide-react'
+import {motion, AnimatePresence} from 'motion/react'
+
+import {useErrorToast, useShopCartActions} from '../../hooks'
+import {cn} from '../../lib/utils'
+import {Button} from '../atoms/button'
+
+interface AddToCartButtonProps {
+  disabled?: boolean
+  className?: string
+  size?: 'default' | 'sm' | 'lg'
+  /**
+   * The discount codes to apply to the cart.
+   */
+  discountCodes?: string[]
+  /**
+   * The GID of the product. E.g. `gid://shopify/Product/123`.
+   */
+  productId: string
+  /**
+   * The GID of the product variant. E.g. `gid://shopify/ProductVariant/456`.
+   */
+  productVariantId: string
+}
+
+export function AddToCartButton({
+  disabled = false,
+  className,
+  size = 'default',
+  productId,
+  productVariantId,
+  discountCodes,
+}: AddToCartButtonProps) {
+  const {addToCart} = useShopCartActions()
+  const [isAdded, setIsAdded] = useState(false)
+  const timeoutRef = React.useRef<number | undefined>(undefined)
+
+  const {showErrorToast} = useErrorToast()
+
+  const handleClick = useCallback(async () => {
+    if (isAdded || disabled) return
+
+    try {
+      // Call the callback if provided
+      if (productId && productVariantId) {
+        // Optimistic update with error toast
+        addToCart({
+          productId,
+          productVariantId,
+          quantity: 1,
+          discountCodes,
+        })
+          .then(() => {})
+          .catch(() => {
+            showErrorToast({message: 'Failed to add to cart'})
+          })
+      }
+
+      // Show success state
+      setIsAdded(true)
+
+      // Clear any existing timeout
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+
+      // Reset to initial state after delay
+      timeoutRef.current = window.setTimeout(() => {
+        setIsAdded(false)
+      }, 2000)
+    } catch (error) {
+      // Handle error - reset to initial state
+      setIsAdded(false)
+      console.error('Failed to add to cart:', error)
+    }
+  }, [
+    isAdded,
+    disabled,
+    addToCart,
+    productId,
+    productVariantId,
+    discountCodes,
+    showErrorToast,
+  ])
+
+  // Cleanup timeout on unmount
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+
+  return (
+    <Button
+      onClick={handleClick}
+      disabled={disabled}
+      className={cn(
+        'relative overflow-hidden transition-all duration-300',
+        className
+      )}
+      size={size}
+    >
+      <div className="relative flex items-center justify-center">
+        <AnimatePresence>
+          {isAdded && (
+            <motion.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-0"
+              style={{x: -8}}
+            >
+              <CheckIcon className="size-4" />
+            </motion.div>
+          )}
+        </AnimatePresence>
+        <span className={cn(isAdded && 'pl-5', 'transition-all duration-300')}>
+          {isAdded ? 'Added to cart' : 'Add to cart'}
+        </span>
+      </div>
+    </Button>
+  )
+}

package/src/components/{atoms → commerce}/favorite-button.tsx

@@ -1,6 +1,6 @@
 import {Heart} from 'lucide-react'
 
-import {IconButton} from './icon-button'
+import {IconButton} from '../atoms/icon-button'
 
 export function FavoriteButton({
   onClick,

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

@@ -7,12 +7,13 @@ import {useShopNavigation} from '../../hooks/navigation/useShopNavigation'
 import {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'
 import {formatMoney} from '../../lib/formatMoney'
 import {cn} from '../../lib/utils'
-import {FavoriteButton} from '../atoms/favorite-button'
 import {Image} from '../atoms/image'
 import {ProductVariantPrice} from '../atoms/product-variant-price'
 import {Touchable} from '../atoms/touchable'
 import {Badge} from '../ui/badge'
 
+import {FavoriteButton} from './favorite-button'
+
 // Context definition
 interface ProductCardContextValue {
   // Core data

package/src/components/commerce/product-link.test.tsx

@@ -248,6 +248,7 @@ describe('ProductLink', () => {
         isFavorited: false,
         selectedVariant: {
           id: 'selected-variant-id',
+          title: 'Selected Variant',
           isFavorited: false,
           price: {amount: '29.99', currencyCode: 'USD'},
           compareAtPrice: null,

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

@@ -9,10 +9,11 @@ import {useShopNavigation} from '../../hooks/navigation/useShopNavigation'
 import {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'
 import {formatMoney} from '../../lib/formatMoney'
 import {cn} from '../../lib/utils'
-import {FavoriteButton} from '../atoms/favorite-button'
 import {Touchable} from '../atoms/touchable'
 import {Card, CardContent, CardAction} from '../ui/card'
 
+import {FavoriteButton} from './favorite-button'
+
 const productLinkVariants = cva('', {
   variants: {
     layout: {

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './MinisContainer'
 
+export * from './commerce/add-to-cart'
 export * from './commerce/product-card'
 export * from './commerce/product-link'
 export * from './commerce/merchant-card'
@@ -7,6 +8,7 @@ export * from './commerce/product-card-skeleton'
 export * from './commerce/merchant-card-skeleton'
 export * from './commerce/quantity-selector'
 export * from './commerce/search'
+export * from './commerce/favorite-button'
 
 export * from './content/image-content-wrapper'
 
@@ -14,7 +16,6 @@ export * from './navigation/minis-router'
 export * from './navigation/transition-link'
 
 export * from './atoms/button'
-export * from './atoms/favorite-button'
 export * from './atoms/icon-button'
 export * from './atoms/image'
 export * from './atoms/touchable'

package/src/internal/components/refresh-indicator.tsx

@@ -0,0 +1,103 @@
+import {forwardRef, useEffect, useState} from 'react'
+
+import {cn} from '../../lib/utils'
+
+export interface PullToRefreshIndicatorProps {
+  pullDistance: number
+  threshold: number
+  isRefreshing: boolean
+  canRefresh: boolean
+  className?: string
+}
+
+export const RefreshIndicator = forwardRef<
+  HTMLDivElement,
+  PullToRefreshIndicatorProps
+>(({pullDistance, threshold, isRefreshing, canRefresh, className}, ref) => {
+  const [showBumpAnimation, setShowBumpAnimation] = useState(false)
+
+  const progress = Math.min(pullDistance / threshold, 1)
+
+  const spinnerProgress = 0.54 + progress * (1 - 0.54)
+
+  const scale = isRefreshing ? 1 : 0.5 + progress * 0.5
+
+  const opacity = isRefreshing ? 1 : Math.min(progress * 1.5, 1)
+
+  const translateY = isRefreshing ? 0 : progress * 3
+
+  useEffect(() => {
+    if (isRefreshing && !showBumpAnimation) {
+      setShowBumpAnimation(true)
+      const timer = setTimeout(() => setShowBumpAnimation(false), 360)
+      return () => clearTimeout(timer)
+    }
+    return undefined
+  }, [isRefreshing, showBumpAnimation])
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'flex items-center justify-center w-full h-full',
+        'transition-all duration-200 ease-out',
+        className
+      )}
+      style={{
+        transform: `translateY(${translateY}px)`,
+      }}
+    >
+      <div
+        className={cn(
+          'flex flex-col items-center space-y-2 rounded-full px-4 py-2 backdrop-blur-sm transition-all duration-200',
+          canRefresh || isRefreshing
+            ? 'bg-primary/20 border-2 border-primary/40'
+            : 'bg-background/90'
+        )}
+        style={{
+          opacity,
+          transform: `scale(${scale})`,
+        }}
+      >
+        <div
+          className={cn(
+            'h-8 w-8 transition-all duration-200',
+            showBumpAnimation && 'animate-bump'
+          )}
+        >
+          <svg
+            viewBox="0 0 52 58"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={cn(
+              'h-full w-full transition-colors duration-200',
+              canRefresh || isRefreshing
+                ? 'text-primary'
+                : 'text-muted-foreground'
+            )}
+          >
+            <path
+              className={cn(
+                'shop-spinner-path',
+                !isRefreshing && 'shop-spinner-progress',
+                isRefreshing && 'animate-shop-spin'
+              )}
+              d="M3 13C5 11.75 10.4968 6.92307 21.5 6.4999C34.5 5.99993 42 13 45 23C48.3 34 42.9211 48.1335 30.5 51C17.5 54 6.6 46 6 37C5.46667 29 10.5 25 14 23"
+              stroke="currentColor"
+              strokeWidth="8"
+              strokeLinecap="square"
+              strokeLinejoin="miter"
+              style={
+                {
+                  '--spinner-progress': isRefreshing ? '1' : spinnerProgress,
+                } as React.CSSProperties
+              }
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+RefreshIndicator.displayName = 'RefreshIndicator'