@shopbb/helium 0.1.0 → 0.3.0-alpha.1

package/dist/client.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @shopbb/helium/client — Browser-side hydration helpers
+ *
+ * 商家的客户端 entry：
+ *
+ *   import { hydrate } from '@shopbb/helium/client';
+ *   import { App } from './app';
+ *
+ *   hydrate(<App />);
+ *
+ * 行为：
+ *   - 从 window.__HELIUM__ 拿 SSR 时塞进去的 boot data
+ *   - 包一层 BrowserHeliumContextProvider（含 storefront.query helper，纯客户端 fetch）
+ *   - 调 hydrateRoot
+ */
+import * as React from 'react';
+interface ClientStorefrontClient {
+    query<T = any>(graphql: string, options?: {
+        variables?: any;
+    }): Promise<T>;
+    mutate<T = any>(graphql: string, options?: {
+        variables?: any;
+    }): Promise<T>;
+}
+interface ClientHeliumContext {
+    storefront: ClientStorefrontClient;
+    url: string;
+}
+declare global {
+    interface Window {
+        __HELIUM__?: {
+            storefront: {
+                apiUrl: string;
+                publicAccessToken: string;
+                storeId: string;
+            };
+            url: string;
+        };
+    }
+}
+export declare function useHeliumClient(): ClientHeliumContext;
+/**
+ * 客户端 hydrate 入口。
+ * 通常调用一次即可。
+ */
+export declare function hydrate(app: React.ReactElement): void;
+export {};
+//# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,UAAU,sBAAsB;IAC9B,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,GAAG,CAAA;KAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;IAC3E,MAAM,CAAC,CAAC,GAAG,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,GAAG,CAAA;KAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;CAC7E;AAED,UAAU,mBAAmB;IAC3B,UAAU,EAAE,sBAAsB,CAAC;IACnC,GAAG,EAAE,MAAM,CAAC;CACb;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,CAAC,EAAE;YACX,UAAU,EAAE;gBAAE,MAAM,EAAE,MAAM,CAAC;gBAAC,iBAAiB,EAAE,MAAM,CAAC;gBAAC,OAAO,EAAE,MAAM,CAAA;aAAE,CAAC;YAC3E,GAAG,EAAE,MAAM,CAAC;SACb,CAAC;KACH;CACF;AAID,wBAAgB,eAAe,IAAI,mBAAmB,CAQrD;AA4BD;;;GAGG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,YAAY,QAgB9C"}

package/dist/client.js

@@ -0,0 +1,64 @@
+/**
+ * @shopbb/helium/client — Browser-side hydration helpers
+ *
+ * 商家的客户端 entry：
+ *
+ *   import { hydrate } from '@shopbb/helium/client';
+ *   import { App } from './app';
+ *
+ *   hydrate(<App />);
+ *
+ * 行为：
+ *   - 从 window.__HELIUM__ 拿 SSR 时塞进去的 boot data
+ *   - 包一层 BrowserHeliumContextProvider（含 storefront.query helper，纯客户端 fetch）
+ *   - 调 hydrateRoot
+ */
+import * as React from 'react';
+import { hydrateRoot } from 'react-dom/client';
+const ClientHeliumReactContext = React.createContext(null);
+export function useHeliumClient() {
+    const ctx = React.useContext(ClientHeliumReactContext);
+    if (!ctx) {
+        throw new Error('useHeliumClient() must be called within HeliumClientProvider (use hydrate())');
+    }
+    return ctx;
+}
+function makeClientStorefront(boot) {
+    async function call(graphql, variables) {
+        const res = await fetch(boot.apiUrl, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-Storefront-Access-Token': boot.publicAccessToken,
+            },
+            body: JSON.stringify({ query: graphql, variables }),
+        });
+        const json = (await res.json());
+        if (json.errors) {
+            throw new Error(json.errors[0]?.message || 'GraphQL error');
+        }
+        return json.data;
+    }
+    return {
+        query: (q, opts) => call(q, opts?.variables),
+        mutate: (q, opts) => call(q, opts?.variables),
+    };
+}
+/**
+ * 客户端 hydrate 入口。
+ * 通常调用一次即可。
+ */
+export function hydrate(app) {
+    const boot = window.__HELIUM__;
+    if (!boot) {
+        console.warn('[helium] window.__HELIUM__ missing, hydrate skipped');
+        return;
+    }
+    const ctx = {
+        storefront: makeClientStorefront(boot.storefront),
+        url: boot.url,
+    };
+    const wrapped = React.createElement(ClientHeliumReactContext.Provider, { value: ctx }, app);
+    hydrateRoot(document.getElementById('root'), wrapped);
+}
+//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../src/client.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AA2B/C,MAAM,wBAAwB,GAAG,KAAK,CAAC,aAAa,CAA6B,IAAI,CAAC,CAAC;AAEvF,MAAM,UAAU,eAAe;IAC7B,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAwB,CAAC,CAAC;IACvD,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,8EAA8E,CAC/E,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAED,SAAS,oBAAoB,CAAC,IAI7B;IACC,KAAK,UAAU,IAAI,CAAI,OAAe,EAAE,SAAe;QACrD,MAAM,GAAG,GAAG,MAAM,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE;YACnC,MAAM,EAAE,MAAM;YACd,OAAO,EAAE;gBACP,cAAc,EAAE,kBAAkB;gBAClC,2BAA2B,EAAE,IAAI,CAAC,iBAAiB;aACpD;YACD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;SACpD,CAAC,CAAC;QACH,MAAM,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,IAAI,EAAE,CAAsD,CAAC;QACrF,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,MAAM,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,OAAO,IAAI,eAAe,CAAC,CAAC;QAC9D,CAAC;QACD,OAAO,IAAI,CAAC,IAAS,CAAC;IACxB,CAAC;IACD,OAAO;QACL,KAAK,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,CAAC;QAC5C,MAAM,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,CAAC;KAC9C,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,OAAO,CAAC,GAAuB;IAC7C,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC;IAC/B,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,CAAC,IAAI,CAAC,qDAAqD,CAAC,CAAC;QACpE,OAAO;IACT,CAAC;IACD,MAAM,GAAG,GAAwB;QAC/B,UAAU,EAAE,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC;QACjD,GAAG,EAAE,IAAI,CAAC,GAAG;KACd,CAAC;IACF,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CACjC,wBAAwB,CAAC,QAAQ,EACjC,EAAE,KAAK,EAAE,GAAG,EAAE,EACd,GAAG,CACJ,CAAC;IACF,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAE,EAAE,OAAO,CAAC,CAAC;AACzD,CAAC"}

package/dist/components/AddToCartButton.d.ts

@@ -0,0 +1,41 @@
+/**
+ * <AddToCartButton> — 加入购物车按钮
+ *
+ * 对齐 @shopify/hydrogen <AddToCartButton>：
+ *   - 内置 loading 态、disabled、error 处理
+ *   - 支持 onAdd 回调（实际加购逻辑由外部 cart hook 提供）
+ *   - 触发 analytics 事件钩子
+ *   - 不带样式，商家自己控制
+ *
+ * 用法（Phase 1，需要传 onAdd）：
+ *   const { addLine } = useCart();
+ *   <AddToCartButton
+ *     variantId={selectedVariant.id}
+ *     quantity={1}
+ *     disabled={!selectedVariant.availableForSale}
+ *     onAdd={(vid, qty) => addLine(vid, qty)}
+ *   >
+ *     加入购物车
+ *   </AddToCartButton>
+ *
+ * Phase 2 后：组件会自动从 <CartProvider> 拿，无需 onAdd 也能用。
+ */
+import * as React from 'react';
+export interface AddToCartButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onError'> {
+    /** 必传：variant 的 GID（gid://shopbb/ProductVariant/...） */
+    variantId: string;
+    /** 数量，默认 1 */
+    quantity?: number;
+    /** 实际加购回调。Phase 1 必传；Phase 2 后可从 Provider 自动获取 */
+    onAdd?: (variantId: string, quantity: number) => Promise<void>;
+    /** 加购成功回调（如导航到 /cart） */
+    onAdded?: () => void;
+    /** 加购失败回调 */
+    onError?: (err: Error) => void;
+    /** 加购中显示的文本，默认 "加入中..." */
+    loadingText?: React.ReactNode;
+    /** 不可用时显示的文本，默认 "缺货" */
+    unavailableText?: React.ReactNode;
+}
+export declare function AddToCartButton(props: AddToCartButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AddToCartButton.d.ts.map

package/dist/components/AddToCartButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddToCartButton.d.ts","sourceRoot":"","sources":["../../src/components/AddToCartButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACtH,wDAAwD;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/D,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa;IACb,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAC/B,2BAA2B;IAC3B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,wBAAwB;IACxB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CA+C1D"}

package/dist/components/AddToCartButton.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * <AddToCartButton> — 加入购物车按钮
+ *
+ * 对齐 @shopify/hydrogen <AddToCartButton>：
+ *   - 内置 loading 态、disabled、error 处理
+ *   - 支持 onAdd 回调（实际加购逻辑由外部 cart hook 提供）
+ *   - 触发 analytics 事件钩子
+ *   - 不带样式，商家自己控制
+ *
+ * 用法（Phase 1，需要传 onAdd）：
+ *   const { addLine } = useCart();
+ *   <AddToCartButton
+ *     variantId={selectedVariant.id}
+ *     quantity={1}
+ *     disabled={!selectedVariant.availableForSale}
+ *     onAdd={(vid, qty) => addLine(vid, qty)}
+ *   >
+ *     加入购物车
+ *   </AddToCartButton>
+ *
+ * Phase 2 后：组件会自动从 <CartProvider> 拿，无需 onAdd 也能用。
+ */
+import * as React from 'react';
+export function AddToCartButton(props) {
+    const { variantId, quantity = 1, onAdd, onAdded, onError, loadingText = '加入中...', unavailableText = '缺货', children = '加入购物车', disabled: disabledProp, ...rest } = props;
+    const [adding, setAdding] = React.useState(false);
+    const handleClick = async (e) => {
+        e.preventDefault();
+        if (adding || disabledProp)
+            return;
+        if (!onAdd) {
+            console.warn('[AddToCartButton] onAdd not provided; this button does nothing in Phase 1');
+            return;
+        }
+        setAdding(true);
+        try {
+            await onAdd(variantId, quantity);
+            onAdded?.();
+        }
+        catch (err) {
+            console.error('[AddToCartButton] add failed:', err);
+            onError?.(err instanceof Error ? err : new Error(String(err)));
+        }
+        finally {
+            setAdding(false);
+        }
+    };
+    return (_jsx("button", { type: "button", ...rest, "data-add-to-cart": true, "data-loading": adding ? '' : undefined, disabled: disabledProp || adding, onClick: handleClick, children: adding ? loadingText : disabledProp ? unavailableText : children }));
+}
+//# sourceMappingURL=AddToCartButton.js.map

package/dist/components/AddToCartButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddToCartButton.js","sourceRoot":"","sources":["../../src/components/AddToCartButton.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,MAAM,EACJ,SAAS,EACT,QAAQ,GAAG,CAAC,EACZ,KAAK,EACL,OAAO,EACP,OAAO,EACP,WAAW,GAAG,QAAQ,EACtB,eAAe,GAAG,IAAI,EACtB,QAAQ,GAAG,OAAO,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,WAAW,GAAG,KAAK,EAAE,CAAsC,EAAE,EAAE;QACnE,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,MAAM,IAAI,YAAY;YAAE,OAAO;QACnC,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,CAAC,IAAI,CAAC,2EAA2E,CAAC,CAAC;YAC1F,OAAO;QACT,CAAC;QACD,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,IAAI,CAAC;YACH,MAAM,KAAK,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;YACjC,OAAO,EAAE,EAAE,CAAC;QACd,CAAC;QAAC,OAAO,GAAQ,EAAE,CAAC;YAClB,OAAO,CAAC,KAAK,CAAC,+BAA+B,EAAE,GAAG,CAAC,CAAC;YACpD,OAAO,EAAE,CAAC,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACjE,CAAC;gBAAS,CAAC;YACT,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,KACT,IAAI,4CAEM,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACrC,QAAQ,EAAE,YAAY,IAAI,MAAM,EAChC,OAAO,EAAE,WAAW,YAEnB,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,GAC1D,CACV,CAAC;AACJ,CAAC"}

package/dist/components/CartLineQuantityAdjustButton.d.ts

@@ -0,0 +1,40 @@
+/**
+ * <CartLineQuantityAdjustButton> — cart 行数量加减按钮
+ *
+ * 对齐 @shopify/hydrogen <CartLineQuantityAdjustButton>:
+ *   - +/- 按钮调用 onChange
+ *   - 防抖（300ms）避免点快导致多次请求
+ *   - min/max 校验
+ *   - 移除时弹确认（可选）
+ *
+ * 用法：
+ *   const { updateLine, removeLine } = useCart();
+ *   <CartLineQuantityAdjustButton
+ *     line={line}
+ *     onUpdate={(newQty) => updateLine(line.id, newQty)}
+ *     onRemove={() => removeLine(line.id)}
+ *   />
+ */
+import * as React from 'react';
+export interface CartLineQuantityAdjustButtonProps {
+    /** line 的当前数量 */
+    quantity: number;
+    /** 最小值，默认 1（小于此值改成 remove） */
+    min?: number;
+    /** 最大值，默认 99 */
+    max?: number;
+    /** 数量变化回调 */
+    onUpdate?: (newQuantity: number) => Promise<void> | void;
+    /** 数量降到 0 时触发 remove */
+    onRemove?: () => Promise<void> | void;
+    /** 防抖延迟（ms），默认 300 */
+    debounceMs?: number;
+    /** 自定义包装容器 className */
+    className?: string;
+    /** 减号按钮 props 透传 */
+    decreaseProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    /** 加号按钮 props 透传 */
+    increaseProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+export declare function CartLineQuantityAdjustButton(props: CartLineQuantityAdjustButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CartLineQuantityAdjustButton.d.ts.map

package/dist/components/CartLineQuantityAdjustButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartLineQuantityAdjustButton.d.ts","sourceRoot":"","sources":["../../src/components/CartLineQuantityAdjustButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,iCAAiC;IAChD,iBAAiB;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,8BAA8B;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa;IACb,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACzD,wBAAwB;IACxB,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACtC,sBAAsB;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,aAAa,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAC9D,oBAAoB;IACpB,aAAa,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;CAC/D;AAED,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,iCAAiC,2CA6EpF"}

package/dist/components/CartLineQuantityAdjustButton.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * <CartLineQuantityAdjustButton> — cart 行数量加减按钮
+ *
+ * 对齐 @shopify/hydrogen <CartLineQuantityAdjustButton>:
+ *   - +/- 按钮调用 onChange
+ *   - 防抖（300ms）避免点快导致多次请求
+ *   - min/max 校验
+ *   - 移除时弹确认（可选）
+ *
+ * 用法：
+ *   const { updateLine, removeLine } = useCart();
+ *   <CartLineQuantityAdjustButton
+ *     line={line}
+ *     onUpdate={(newQty) => updateLine(line.id, newQty)}
+ *     onRemove={() => removeLine(line.id)}
+ *   />
+ */
+import * as React from 'react';
+export function CartLineQuantityAdjustButton(props) {
+    const { quantity, min = 1, max = 99, onUpdate, onRemove, debounceMs = 300, className, decreaseProps, increaseProps, } = props;
+    // optimistic 显示的 quantity
+    const [optimistic, setOptimistic] = React.useState(quantity);
+    React.useEffect(() => setOptimistic(quantity), [quantity]);
+    const [pending, setPending] = React.useState(false);
+    const timerRef = React.useRef(null);
+    const flushUpdate = React.useCallback((target) => {
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(async () => {
+            setPending(true);
+            try {
+                if (target < min) {
+                    await onRemove?.();
+                }
+                else {
+                    await onUpdate?.(target);
+                }
+            }
+            finally {
+                setPending(false);
+            }
+        }, debounceMs);
+    }, [min, onRemove, onUpdate, debounceMs]);
+    const handleAdjust = (delta) => {
+        const next = optimistic + delta;
+        if (next > max)
+            return;
+        setOptimistic(next);
+        flushUpdate(next);
+    };
+    React.useEffect(() => () => {
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+    }, []);
+    return (_jsxs("div", { className: className, "data-quantity-adjust": true, style: { display: 'inline-flex', alignItems: 'center' }, children: [_jsx("button", { type: "button", ...decreaseProps, "aria-label": "\u51CF\u5C11", "data-quantity-decrease": true, onClick: () => handleAdjust(-1), disabled: pending && optimistic <= min, children: decreaseProps?.children ?? '−' }), _jsx("span", { "data-quantity-value": true, "aria-live": "polite", style: { margin: '0 0.5em', minWidth: '1.5em', textAlign: 'center' }, children: optimistic }), _jsx("button", { type: "button", ...increaseProps, "aria-label": "\u589E\u52A0", "data-quantity-increase": true, onClick: () => handleAdjust(1), disabled: pending && optimistic >= max, children: increaseProps?.children ?? '+' })] }));
+}
+//# sourceMappingURL=CartLineQuantityAdjustButton.js.map

package/dist/components/CartLineQuantityAdjustButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartLineQuantityAdjustButton.js","sourceRoot":"","sources":["../../src/components/CartLineQuantityAdjustButton.tsx"],"names":[],"mappings":"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"}

package/dist/components/Image.d.ts

@@ -0,0 +1,39 @@
+/**
+ * <Image> — 响应式商品图片
+ *
+ * 对齐 @shopify/hydrogen 的 <Image>：
+ *   - 自动生成 srcset（5 个分辨率档：375 / 750 / 1024 / 1536 / 1920）
+ *   - sizes 媒体查询
+ *   - loading="lazy" 默认（首屏可关）
+ *   - decoding="async"
+ *   - aspectRatio 占位（不抖）
+ *   - 自动 alt
+ *
+ * srcset 里的 url 通过 ?width= query 表达，服务端可忽略或接 cdn-cgi/image。
+ *
+ * 用法：
+ *   <Image data={{ url, altText, width, height }} sizes="(min-width: 768px) 50vw, 100vw" />
+ *   <Image data={...} aspectRatio="1/1" />
+ *   <Image data={...} loading="eager" />   // 首屏
+ */
+import * as React from 'react';
+export interface ImageData {
+    url: string;
+    altText?: string | null;
+    width?: number | null;
+    height?: number | null;
+}
+export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'srcSet' | 'loading'> {
+    /** 必传：图片对象 */
+    data: ImageData;
+    /** 媒体查询 sizes，例如 (min-width: 768px) 50vw, 100vw */
+    sizes?: string;
+    /** 强制宽高比，例如 '1/1' '4/3' '16/9' */
+    aspectRatio?: string;
+    /** lazy（默认） / eager（首屏图用） */
+    loading?: 'lazy' | 'eager';
+    /** 自定义 srcset 档位 */
+    widths?: number[];
+}
+export declare function Image(props: ImageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Image.d.ts.map

package/dist/components/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../src/components/Image.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC/G,cAAc;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAkBD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CAmCtC"}

package/dist/components/Image.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// 默认 srcset 档位
+const DEFAULT_WIDTHS = [375, 750, 1024, 1536, 1920];
+/** 给 url 加 ?width=N query */
+function withWidth(url, width) {
+    try {
+        const u = new URL(url);
+        u.searchParams.set('width', String(width));
+        return u.toString();
+    }
+    catch {
+        // 不是绝对 URL，按相对路径处理
+        const sep = url.includes('?') ? '&' : '?';
+        return `${url}${sep}width=${width}`;
+    }
+}
+export function Image(props) {
+    const { data, sizes, aspectRatio, loading = 'lazy', widths = DEFAULT_WIDTHS, style, alt: altProp, ...rest } = props;
+    const srcset = widths.map((w) => `${withWidth(data.url, w)} ${w}w`).join(', ');
+    // src 用中间档位
+    const src = withWidth(data.url, widths[Math.floor(widths.length / 2)]);
+    const finalStyle = {
+        ...(aspectRatio ? { aspectRatio, objectFit: 'cover' } : null),
+        ...style,
+    };
+    return (_jsx("img", { ...rest, src: src, srcSet: srcset, sizes: sizes, alt: altProp ?? data.altText ?? '', loading: loading, decoding: "async", width: data.width || undefined, height: data.height || undefined, style: finalStyle }));
+}
+//# sourceMappingURL=Image.js.map

package/dist/components/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../src/components/Image.tsx"],"names":[],"mappings":";AAyCA,eAAe;AACf,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AAEpD,6BAA6B;AAC7B,SAAS,SAAS,CAAC,GAAW,EAAE,KAAa;IAC3C,IAAI,CAAC;QACH,MAAM,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;QACvB,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAC3C,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC;IACtB,CAAC;IAAC,MAAM,CAAC;QACP,mBAAmB;QACnB,MAAM,GAAG,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QAC1C,OAAO,GAAG,GAAG,GAAG,GAAG,SAAS,KAAK,EAAE,CAAC;IACtC,CAAC;AACH,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EACJ,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,GAAG,MAAM,EAChB,MAAM,GAAG,cAAc,EACvB,KAAK,EACL,GAAG,EAAE,OAAO,EACZ,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/E,YAAY;IACZ,MAAM,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAEvE,MAAM,UAAU,GAAwB;QACtC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,OAAgB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACtE,GAAG,KAAK;KACT,CAAC;IAEF,OAAO,CACL,iBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,OAAO,IAAI,IAAI,CAAC,OAAO,IAAI,EAAE,EAClC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAC,OAAO,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS,EAC9B,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,SAAS,EAChC,KAAK,EAAE,UAAU,GACjB,CACH,CAAC;AACJ,CAAC"}

package/dist/components/Money.d.ts

@@ -0,0 +1,41 @@
+/**
+ * <Money> — 货币格式化
+ *
+ * 对齐 @shopify/hydrogen 的 <Money>。
+ * - 自动按 currencyCode + locale 用 Intl.NumberFormat 格式化
+ * - 支持 withoutCurrency / withoutTrailingZeros
+ * - 支持 as 渲染成任意元素（默认 <span>）
+ * - 支持 measurement（unit price，例如 ¥9.99/100g）
+ *
+ * 用法：
+ *   <Money data={{ amount: '9.99', currencyCode: 'CNY' }} />
+ *   <Money data={{ ... }} withoutCurrency />
+ *   <Money data={{ ... }} as="div" measurement={{ referenceUnit: 'kg', quantity: 0.1 }} />
+ */
+import * as React from 'react';
+export interface MoneyData {
+    amount: string;
+    currencyCode: string;
+}
+export interface MoneyMeasurement {
+    /** 比如 'kg' / '100g' / 'l' */
+    referenceUnit: string;
+    /** 比如 0.1 表示每 100g */
+    quantity?: number;
+}
+export interface MoneyProps extends React.HTMLAttributes<HTMLElement> {
+    /** 必传：金额对象 */
+    data: MoneyData;
+    /** 不显示货币符号，只显示数字 */
+    withoutCurrency?: boolean;
+    /** 整数时不显示 .00 */
+    withoutTrailingZeros?: boolean;
+    /** locale 字符串（zh-CN / en-US / ...）。默认按 currencyCode 推断 */
+    locale?: string;
+    /** 渲染元素，默认 span */
+    as?: keyof JSX.IntrinsicElements;
+    /** unit price：渲染 ¥99.00/100g */
+    measurement?: MoneyMeasurement;
+}
+export declare function Money(props: MoneyProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Money.d.ts.map

package/dist/components/Money.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Money.d.ts","sourceRoot":"","sources":["../../src/components/Money.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,6BAA6B;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACnE,cAAc;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,oBAAoB;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB;IACjB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;IACjC,gCAAgC;IAChC,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAChC;AAYD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CAmDtC"}

package/dist/components/Money.js

@@ -0,0 +1,48 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+// currencyCode → 默认 locale 推断
+const DEFAULT_LOCALE_BY_CURRENCY = {
+    CNY: 'zh-CN',
+    USD: 'en-US',
+    EUR: 'de-DE',
+    GBP: 'en-GB',
+    JPY: 'ja-JP',
+    KRW: 'ko-KR',
+};
+export function Money(props) {
+    const { data, withoutCurrency, withoutTrailingZeros, locale: localeProp, as, measurement, ...rest } = props;
+    const Tag = as || 'span';
+    const locale = localeProp || DEFAULT_LOCALE_BY_CURRENCY[data.currencyCode] || 'en-US';
+    const amount = Number(data.amount);
+    let formatted;
+    try {
+        const opts = withoutCurrency
+            ? {
+                minimumFractionDigits: withoutTrailingZeros && Number.isInteger(amount) ? 0 : 2,
+                maximumFractionDigits: 2,
+            }
+            : {
+                style: 'currency',
+                currency: data.currencyCode,
+                minimumFractionDigits: withoutTrailingZeros && Number.isInteger(amount) ? 0 : 2,
+                maximumFractionDigits: 2,
+            };
+        formatted = new Intl.NumberFormat(locale, opts).format(amount);
+    }
+    catch {
+        // Fallback：Intl 不支持的 currencyCode
+        formatted = withoutCurrency ? amount.toFixed(2) : `${data.currencyCode} ${amount.toFixed(2)}`;
+    }
+    // measurement suffix（unit price）
+    let suffix = '';
+    if (measurement) {
+        const q = measurement.quantity ?? 1;
+        if (q === 1) {
+            suffix = `/${measurement.referenceUnit}`;
+        }
+        else {
+            suffix = `/${q}${measurement.referenceUnit}`;
+        }
+    }
+    return (_jsxs(Tag, { ...rest, "data-money": data.amount, "data-money-currency": data.currencyCode, children: [formatted, suffix] }));
+}
+//# sourceMappingURL=Money.js.map

package/dist/components/Money.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Money.js","sourceRoot":"","sources":["../../src/components/Money.tsx"],"names":[],"mappings":";AA4CA,8BAA8B;AAC9B,MAAM,0BAA0B,GAA2B;IACzD,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;CACb,CAAC;AAEF,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EACJ,IAAI,EACJ,eAAe,EACf,oBAAoB,EACpB,MAAM,EAAE,UAAU,EAClB,EAAE,EACF,WAAW,EACX,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,GAAG,GAAQ,EAAE,IAAI,MAAM,CAAC;IAC9B,MAAM,MAAM,GAAG,UAAU,IAAI,0BAA0B,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC;IACtF,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAEnC,IAAI,SAAiB,CAAC;IACtB,IAAI,CAAC;QACH,MAAM,IAAI,GAA6B,eAAe;YACpD,CAAC,CAAC;gBACE,qBAAqB,EAAE,oBAAoB,IAAI,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC/E,qBAAqB,EAAE,CAAC;aACzB;YACH,CAAC,CAAC;gBACE,KAAK,EAAE,UAAU;gBACjB,QAAQ,EAAE,IAAI,CAAC,YAAY;gBAC3B,qBAAqB,EAAE,oBAAoB,IAAI,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC/E,qBAAqB,EAAE,CAAC;aACzB,CAAC;QACN,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACjE,CAAC;IAAC,MAAM,CAAC;QACP,kCAAkC;QAClC,SAAS,GAAG,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,YAAY,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAChG,CAAC;IAED,iCAAiC;IACjC,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,IAAI,WAAW,EAAE,CAAC;QAChB,MAAM,CAAC,GAAG,WAAW,CAAC,QAAQ,IAAI,CAAC,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACZ,MAAM,GAAG,IAAI,WAAW,CAAC,aAAa,EAAE,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,MAAM,GAAG,IAAI,CAAC,GAAG,WAAW,CAAC,aAAa,EAAE,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,OAAO,CACL,MAAC,GAAG,OAAK,IAAI,gBAAc,IAAI,CAAC,MAAM,yBAAuB,IAAI,CAAC,YAAY,aAC3E,SAAS,EACT,MAAM,IACH,CACP,CAAC;AACJ,CAAC"}

package/dist/components/ProductPrice.d.ts

@@ -0,0 +1,28 @@
+/**
+ * <ProductPrice> — 商品价格
+ *
+ * 对齐 @shopify/hydrogen <ProductPrice>:
+ *   - 渲染当前价
+ *   - 当 compareAtPrice > price 时自动显示划线对比价
+ *   - 支持 unit price 模式
+ *   - 可定制 className / 容器
+ *
+ * 用法：
+ *   <ProductPrice price={{ amount: '99', currencyCode: 'CNY' }} />
+ *   <ProductPrice price={...} compareAtPrice={{ amount: '129', ... }} />
+ */
+import * as React from 'react';
+import { type MoneyData, type MoneyMeasurement } from './Money';
+export interface ProductPriceProps extends React.HTMLAttributes<HTMLElement> {
+    price: MoneyData;
+    compareAtPrice?: MoneyData | null;
+    /** unit price，例如每 100g */
+    measurement?: MoneyMeasurement;
+    /** locale 透传 */
+    locale?: string;
+    /** 划线价的额外 className */
+    compareAtClassName?: string;
+    as?: keyof JSX.IntrinsicElements;
+}
+export declare function ProductPrice(props: ProductPriceProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProductPrice.d.ts.map

package/dist/components/ProductPrice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductPrice.d.ts","sourceRoot":"","sources":["../../src/components/ProductPrice.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAS,KAAK,SAAS,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC1E,KAAK,EAAE,SAAS,CAAC;IACjB,cAAc,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAClC,0BAA0B;IAC1B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,gBAAgB;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA+BpD"}

package/dist/components/ProductPrice.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Money } from './Money';
+export function ProductPrice(props) {
+    const { price, compareAtPrice, measurement, locale, compareAtClassName, as, ...rest } = props;
+    const Tag = as || 'div';
+    const hasDiscount = compareAtPrice &&
+        Number(compareAtPrice.amount) > Number(price.amount);
+    return (_jsxs(Tag, { ...rest, "data-product-price": true, children: [_jsx(Money, { data: price, locale: locale, measurement: measurement }), hasDiscount && compareAtPrice && (_jsx(Money, { data: compareAtPrice, locale: locale, as: "s", className: compareAtClassName, "data-compare-at": "true", style: { marginLeft: '0.5em', opacity: 0.6 } }))] }));
+}
+//# sourceMappingURL=ProductPrice.js.map

package/dist/components/ProductPrice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductPrice.js","sourceRoot":"","sources":["../../src/components/ProductPrice.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,KAAK,EAAyC,MAAM,SAAS,CAAC;AAcvE,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EACJ,KAAK,EACL,cAAc,EACd,WAAW,EACX,MAAM,EACN,kBAAkB,EAClB,EAAE,EACF,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,GAAG,GAAQ,EAAE,IAAI,KAAK,CAAC;IAC7B,MAAM,WAAW,GACf,cAAc;QACd,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAEvD,OAAO,CACL,MAAC,GAAG,OAAK,IAAI,yCACX,KAAC,KAAK,IAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,GAAI,EAC/D,WAAW,IAAI,cAAc,IAAI,CAChC,KAAC,KAAK,IACJ,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,MAAM,EACd,EAAE,EAAC,GAAG,EACN,SAAS,EAAE,kBAAkB,qBACb,MAAM,EACtB,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAC5C,CACH,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/components/VariantSelector.d.ts

@@ -0,0 +1,80 @@
+/**
+ * <VariantSelector> — 商品 variant 选择器
+ *
+ * 对齐 @shopify/hydrogen <VariantSelector>:
+ *   - 自动解析 variants 的 selectedOptions 维度（颜色 / 尺寸 等）
+ *   - 渲染每个维度的选项按钮
+ *   - 不可购买组合 disabled
+ *   - URL 同步（可选）
+ *   - 默认选第一个 availableForSale
+ *
+ * 设计：组件用 render prop，把每个 option 的选项交给商家渲染。
+ *
+ * 用法：
+ *   <VariantSelector
+ *     product={product}
+ *     value={selectedVariantId}
+ *     onChange={setSelectedVariantId}
+ *   >
+ *     {({ option, value, onSelect }) => (
+ *       <div>
+ *         <h4>{option.name}</h4>
+ *         {option.values.map((v) => (
+ *           <button
+ *             key={v.value}
+ *             disabled={!v.available}
+ *             onClick={() => onSelect(v.value)}
+ *             aria-pressed={v.value === value}
+ *           >
+ *             {v.value}
+ *           </button>
+ *         ))}
+ *       </div>
+ *     )}
+ *   </VariantSelector>
+ */
+import * as React from 'react';
+interface SelectedOption {
+    name: string;
+    value: string;
+}
+interface ProductVariant {
+    id: string;
+    availableForSale: boolean;
+    selectedOptions?: SelectedOption[];
+}
+interface ProductLike {
+    options?: Array<{
+        name: string;
+        values: string[];
+    }>;
+    variants: {
+        nodes: ProductVariant[];
+    };
+}
+export interface VariantOption {
+    name: string;
+    values: Array<{
+        value: string;
+        available: boolean;
+    }>;
+}
+export interface VariantSelectorRenderProps {
+    option: VariantOption;
+    /** 当前已选择的 value（在这个 option 维度上） */
+    value: string | undefined;
+    /** 选择 value，触发 onChange 更新 selectedVariantId */
+    onSelect: (value: string) => void;
+}
+export interface VariantSelectorProps {
+    product: ProductLike;
+    /** 当前选中 variant 的 GID */
+    value: string;
+    /** variant 切换时调用 */
+    onChange?: (variantId: string) => void;
+    /** 每个 option 的渲染函数 */
+    children: (renderProps: VariantSelectorRenderProps) => React.ReactNode;
+}
+export declare function VariantSelector(props: VariantSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VariantSelector.d.ts.map