@commercengine/react 0.1.0

package/README.md

@@ -0,0 +1,358 @@
+# @commercengine/react
+
+React hook for Commerce Engine checkout.
+
+## Installation
+
+```bash
+npm install @commercengine/react
+```
+
+## Quick Start
+
+```tsx
+import { useCheckout } from "@commercengine/react";
+
+function App() {
+  const { openCart, cartCount, isReady } = useCheckout({
+    storeId: "store_xxx",
+    apiKey: "ak_xxx",
+  });
+
+  return (
+    <button onClick={openCart} disabled={!isReady}>
+      Cart ({cartCount})
+    </button>
+  );
+}
+```
+
+## Configuration
+
+### UseCheckoutOptions
+
+```typescript
+interface UseCheckoutOptions {
+  // === Credentials (required) ===
+  storeId: string;              // Your Commerce Engine Store ID
+  apiKey: string;               // Your Commerce Engine API Key
+
+  // === Development ===
+  url?: string;                 // Direct checkout URL (local dev only)
+
+  // === Theme ===
+  theme?: "light" | "dark" | "system";  // Default: "system"
+
+  // === Appearance ===
+  zIndex?: number;              // Overlay z-index. Default: 99999
+
+  // === Authentication ===
+  authMode?: "managed" | "provided";  // Default: "managed"
+  accessToken?: string;         // Initial access token
+  refreshToken?: string;        // Initial refresh token
+
+  // === Quick Buy ===
+  quickBuy?: {
+    productId: string;          // Product ID (required)
+    variantId: string | null;   // Variant ID (required, null for non-variant)
+    quantity?: number;          // Default: 1
+  };
+  sessionMode?: "continue-existing" | "force-new";  // Default: "continue-existing"
+  autoDetectQuickBuy?: boolean; // Auto-detect from parent URL. Default: false
+
+  // === Callbacks ===
+  onReady?: () => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onComplete?: (order: OrderData) => void;
+  onCartUpdate?: (cart: CartData) => void;
+  onAuthChange?: (auth: AuthChangeData) => void;
+}
+```
+
+**Session Modes:**
+- **`continue-existing`** (default): Add quick-buy item to existing cart
+- **`force-new`**: Delete existing cart and start fresh with only the quick-buy item
+
+**Note:** When quick buy params are provided (via config or auto-detected), the cart drawer automatically opens once checkout is ready.
+
+### Example: Full Configuration
+
+```tsx
+import { useCheckout } from "@commercengine/react";
+
+function Store() {
+  const {
+    openCart,
+    openCheckout,
+    close,
+    updateTokens,
+    isReady,
+    isOpen,
+    cartCount,
+    cartTotal,
+    cartCurrency,
+  } = useCheckout({
+    storeId: "store_xxx",
+    apiKey: "ak_xxx",
+    theme: "dark",
+    zIndex: 100000,
+    accessToken: session?.accessToken,
+    refreshToken: session?.refreshToken,
+    onReady: () => {
+      console.log("Checkout ready");
+    },
+    onComplete: (order) => {
+      router.push(`/thank-you?order=${order.orderNumber}`);
+    },
+    onCartUpdate: (cart) => {
+      console.log("Cart updated:", cart.count, cart.total);
+    },
+    onAuthChange: ({ type, accessToken }) => {
+      if (type === "login") {
+        // Sync to your auth system
+        setSession({ accessToken });
+      } else if (type === "logout") {
+        setSession(null);
+      }
+    },
+  });
+
+  return (
+    <nav>
+      <button onClick={openCart} disabled={!isReady}>
+        Cart ({cartCount}) - {cartCurrency} {cartTotal}
+      </button>
+    </nav>
+  );
+}
+```
+
+## Return Value
+
+### UseCheckoutReturn
+
+```typescript
+interface UseCheckoutReturn {
+  // === Methods ===
+  openCart: () => void;         // Open cart drawer
+  openCheckout: () => void;     // Open checkout directly (Buy Now)
+  close: () => void;            // Close overlay
+  updateTokens: (             // Sync auth state
+    accessToken: string,
+    refreshToken?: string
+  ) => void;
+  addToCart: (                // Add item to cart and open cart drawer
+    productId: string,
+    variantId: string | null,
+    quantity?: number
+  ) => void;
+
+  // === State ===
+  isReady: boolean;             // Checkout initialized
+  isOpen: boolean;              // Overlay visible
+  cartCount: number;            // Items in cart
+  cartTotal: number;            // Cart subtotal
+  cartCurrency: string;         // Currency code (e.g., "USD")
+}
+```
+
+## Examples
+
+### Cart Button with Badge
+
+```tsx
+function CartButton() {
+  const { openCart, cartCount, isReady } = useCheckout({
+    storeId: "store_xxx",
+    apiKey: "ak_xxx",
+  });
+
+  return (
+    <button onClick={openCart} disabled={!isReady}>
+      <ShoppingCart />
+      {cartCount > 0 && <span className="badge">{cartCount}</span>}
+    </button>
+  );
+}
+```
+
+### Add to Cart
+
+```tsx
+function ProductCard({ product }: { product: Product }) {
+  const { addToCart, isReady } = useCheckout({
+    storeId: "store_xxx",
+    apiKey: "ak_xxx",
+  });
+
+  const handleAddToCart = () => {
+    // variantId is required - use null for non-variant products
+    // Cart drawer opens automatically after adding
+    addToCart(product.id, product.variantId ?? null, 1);
+  };
+
+  return (
+    <div>
+      <h3>{product.name}</h3>
+      <button onClick={handleAddToCart} disabled={!isReady}>
+        Add to Cart
+      </button>
+    </div>
+  );
+}
+```
+
+### Buy Now Button
+
+```tsx
+function BuyNowButton({ productId, variantId }: { productId: string; variantId: string | null }) {
+  const { addToCart, openCheckout, isReady } = useCheckout({
+    storeId: "store_xxx",
+    apiKey: "ak_xxx",
+  });
+
+  const handleBuyNow = () => {
+    addToCart(productId, variantId, 1);
+    openCheckout();
+  };
+
+  return (
+    <button onClick={handleBuyNow} disabled={!isReady}>
+      Buy Now
+    </button>
+  );
+}
+```
+
+### Order Completion with Redirect
+
+```tsx
+function CheckoutButton() {
+  const router = useRouter();
+
+  const { openCart, isReady } = useCheckout({
+    storeId: "store_xxx",
+    apiKey: "ak_xxx",
+    onComplete: (order) => {
+      // Redirect to thank you page
+      router.push(`/order/${order.orderNumber}`);
+    },
+  });
+
+  return (
+    <button onClick={openCart} disabled={!isReady}>
+      Checkout
+    </button>
+  );
+}
+```
+
+### Syncing Authentication
+
+```tsx
+function App() {
+  const [session, setSession] = useState(null);
+
+  const { updateTokens, openCart } = useCheckout({
+    storeId: "store_xxx",
+    apiKey: "ak_xxx",
+    // Pass initial tokens
+    accessToken: session?.accessToken,
+    refreshToken: session?.refreshToken,
+    // Sync when user logs in via checkout
+    onAuthChange: ({ type, accessToken, refreshToken }) => {
+      if (type === "login") {
+        setSession({ accessToken, refreshToken });
+      } else if (type === "logout") {
+        setSession(null);
+      }
+    },
+  });
+
+  // Sync when user logs in on your site
+  const handleLogin = async (credentials) => {
+    const tokens = await login(credentials);
+    setSession(tokens);
+    updateTokens(tokens.accessToken, tokens.refreshToken);
+  };
+
+  // Sync when user logs out on your site
+  const handleLogout = () => {
+    setSession(null);
+    updateTokens("", "");
+  };
+
+  return (
+    <div>
+      {session ? (
+        <button onClick={handleLogout}>Logout</button>
+      ) : (
+        <button onClick={() => handleLogin({ ... })}>Login</button>
+      )}
+      <button onClick={openCart}>Cart</button>
+    </div>
+  );
+}
+```
+
+### Mini Cart Display
+
+```tsx
+function MiniCart() {
+  const { openCart, cartCount, cartTotal, cartCurrency, isReady } = useCheckout({
+    storeId: "store_xxx",
+    apiKey: "ak_xxx",
+  });
+
+  if (!isReady) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div className="mini-cart" onClick={openCart}>
+      <span>{cartCount} items</span>
+      <span>{cartCurrency} {cartTotal.toFixed(2)}</span>
+    </div>
+  );
+}
+```
+
+## Hook Lifecycle
+
+The hook:
+1. Creates checkout iframe on mount
+2. Destroys iframe on unmount
+3. Reinitializes when `url`, `storeId`, or `apiKey` change
+4. Other options (theme, callbacks, tokens) update without reinitializing
+
+```tsx
+// This will NOT cause reinit (callbacks stored in ref)
+const { openCart } = useCheckout({
+  storeId: "store_xxx",
+  apiKey: "ak_xxx",
+  onComplete: (order) => {
+    // Safe to use state/props here - always uses latest values
+    doSomething(currentState);
+  },
+});
+```
+
+## TypeScript
+
+Types are re-exported from `@commercengine/js`:
+
+```typescript
+import {
+  useCheckout,
+  type UseCheckoutOptions,
+  type UseCheckoutReturn,
+  type CartData,
+  type OrderData,
+  type AuthChangeData,
+} from "@commercengine/react";
+```
+
+## Peer Dependencies
+
+- `react` >= 17.0.0

package/dist/index.cjs

@@ -0,0 +1,132 @@
+let _commercengine_js = require("@commercengine/js");
+let react = require("react");
+
+//#region src/use-checkout.ts
+/**
+* useCheckout Hook
+*
+* React hook for Commerce Engine Checkout integration.
+* Handles checkout initialization, state management, and cleanup.
+*
+* @example
+* ```tsx
+* import { useCheckout } from "@commercengine/react";
+*
+* function MyStore() {
+*   const { openCart, openCheckout, cartCount, isReady } = useCheckout({
+*     storeId: "store_xxx",
+*     apiKey: "ak_xxx",
+*     theme: "dark",
+*     onComplete: (order) => {
+*       console.log("Order placed:", order.orderNumber);
+*       window.location.href = "/thank-you";
+*     },
+*   });
+*
+*   return (
+*     <button onClick={openCart} disabled={!isReady}>
+*       Cart ({cartCount})
+*     </button>
+*   );
+* }
+* ```
+*/
+/**
+* React hook for Commerce Engine Checkout
+*
+* @param options - Checkout configuration
+* @returns Checkout state and methods
+*/
+function useCheckout(options) {
+	const checkoutRef = (0, react.useRef)(null);
+	const [isReady, setIsReady] = (0, react.useState)(false);
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const [cart, setCart] = (0, react.useState)({
+		count: 0,
+		total: 0,
+		currency: "INR"
+	});
+	const optionsRef = (0, react.useRef)(options);
+	optionsRef.current = options;
+	const { url, storeId, apiKey } = options;
+	(0, react.useEffect)(() => {
+		if (typeof window === "undefined") return;
+		const opts = optionsRef.current;
+		const checkout = new _commercengine_js.Checkout({
+			url,
+			storeId,
+			apiKey,
+			theme: opts.theme,
+			authMode: opts.authMode,
+			accessToken: opts.accessToken,
+			refreshToken: opts.refreshToken,
+			quickBuy: opts.quickBuy,
+			sessionMode: opts.sessionMode,
+			autoDetectQuickBuy: opts.autoDetectQuickBuy,
+			appearance: { zIndex: opts.zIndex },
+			onReady: () => {
+				setIsReady(true);
+				optionsRef.current.onReady?.();
+			},
+			onOpen: () => {
+				setIsOpen(true);
+				optionsRef.current.onOpen?.();
+			},
+			onClose: () => {
+				setIsOpen(false);
+				optionsRef.current.onClose?.();
+			},
+			onComplete: (order) => {
+				optionsRef.current.onComplete?.(order);
+			},
+			onCartUpdate: (cartData) => {
+				setCart(cartData);
+				optionsRef.current.onCartUpdate?.(cartData);
+			},
+			onAuthChange: (auth) => {
+				optionsRef.current.onAuthChange?.(auth);
+			},
+			onError: (error) => {
+				setIsReady(true);
+				optionsRef.current.onError?.(error);
+			}
+		});
+		checkoutRef.current = checkout;
+		return () => {
+			checkout.destroy();
+			checkoutRef.current = null;
+			setIsReady(false);
+			setIsOpen(false);
+		};
+	}, [
+		url,
+		storeId,
+		apiKey
+	]);
+	return {
+		openCart: (0, react.useCallback)(() => {
+			checkoutRef.current?.openCart();
+		}, []),
+		openCheckout: (0, react.useCallback)(() => {
+			checkoutRef.current?.openCheckout();
+		}, []),
+		close: (0, react.useCallback)(() => {
+			checkoutRef.current?.close();
+		}, []),
+		updateTokens: (0, react.useCallback)((accessToken, refreshToken) => {
+			checkoutRef.current?.updateTokens(accessToken, refreshToken);
+		}, []),
+		addToCart: (0, react.useCallback)((productId, variantId, quantity) => {
+			checkoutRef.current?.addToCart(productId, variantId, quantity);
+		}, []),
+		isReady,
+		isOpen,
+		cartCount: cart.count,
+		cartTotal: cart.total,
+		cartCurrency: cart.currency
+	};
+}
+
+//#endregion
+exports.useCheckout = useCheckout;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Checkout"],"sources":["../src/use-checkout.ts"],"sourcesContent":["/**\n * useCheckout Hook\n *\n * React hook for Commerce Engine Checkout integration.\n * Handles checkout initialization, state management, and cleanup.\n *\n * @example\n * ```tsx\n * import { useCheckout } from \"@commercengine/react\";\n *\n * function MyStore() {\n *   const { openCart, openCheckout, cartCount, isReady } = useCheckout({\n *     storeId: \"store_xxx\",\n *     apiKey: \"ak_xxx\",\n *     theme: \"dark\",\n *     onComplete: (order) => {\n *       console.log(\"Order placed:\", order.orderNumber);\n *       window.location.href = \"/thank-you\";\n *     },\n *   });\n *\n *   return (\n *     <button onClick={openCart} disabled={!isReady}>\n *       Cart ({cartCount})\n *     </button>\n *   );\n * }\n * ```\n */\n\nimport {\n  type AuthChangeData,\n  type AuthMode,\n  type CartData,\n  Checkout,\n  type CheckoutConfig,\n  type ErrorData,\n  type OrderData,\n  type QuickBuyConfig,\n  type SessionMode,\n} from \"@commercengine/js\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\n/**\n * Options for useCheckout hook\n */\nexport interface UseCheckoutOptions {\n  /**\n   * Your Commerce Engine Store ID\n   * @example \"store_abc123\"\n   */\n  storeId?: string;\n\n  /**\n   * Your Commerce Engine API Key\n   * @example \"ak_test_xyz789\"\n   */\n  apiKey?: string;\n\n  /**\n   * Checkout URL for local development\n   * In production, URL is resolved from storeId/apiKey\n   */\n  url?: string;\n\n  /**\n   * Theme preference\n   * @default \"system\"\n   */\n  theme?: \"light\" | \"dark\" | \"system\";\n\n  /**\n   * Z-index for the checkout overlay\n   * @default 99999\n   */\n  zIndex?: number;\n\n  /**\n   * Authentication mode\n   * - 'managed': Checkout manages token lifecycle (default)\n   * - 'provided': Parent manages tokens, checkout uses in-memory only\n   * @default \"managed\"\n   */\n  authMode?: AuthMode;\n\n  /**\n   * Initial access token (if user already logged in)\n   */\n  accessToken?: string;\n\n  /**\n   * Initial refresh token\n   */\n  refreshToken?: string;\n\n  /**\n   * Quick buy configuration for \"Buy Now\" flows\n   * When provided, adds the product to cart on initialization\n   */\n  quickBuy?: QuickBuyConfig;\n\n  /**\n   * Session behavior when quick buy is used\n   * @default \"continue-existing\"\n   */\n  sessionMode?: SessionMode;\n\n  /**\n   * Auto-detect quick buy params from parent page URL\n   * When enabled, SDK parses window.location.search for:\n   * - product_id, variant_id, qty/quantity, session_mode\n   * Useful for ad-driven traffic to embedded checkout pages\n   * @default false\n   */\n  autoDetectQuickBuy?: boolean;\n\n  /**\n   * Called when checkout iframe is ready\n   */\n  onReady?: () => void;\n\n  /**\n   * Called when checkout is opened\n   */\n  onOpen?: () => void;\n\n  /**\n   * Called when checkout is closed\n   */\n  onClose?: () => void;\n\n  /**\n   * Called when order is completed\n   */\n  onComplete?: (order: OrderData) => void;\n\n  /**\n   * Called when cart state changes\n   */\n  onCartUpdate?: (cart: CartData) => void;\n\n  /**\n   * Called when auth state changes\n   */\n  onAuthChange?: (auth: AuthChangeData) => void;\n\n  /**\n   * Called when checkout encounters a configuration error\n   */\n  onError?: (error: ErrorData) => void;\n}\n\n/**\n * Return value from useCheckout hook\n */\nexport interface UseCheckoutReturn {\n  /**\n   * Open the cart drawer\n   */\n  openCart: () => void;\n\n  /**\n   * Open the checkout drawer directly (for Buy Now flow)\n   */\n  openCheckout: () => void;\n\n  /**\n   * Close the checkout overlay\n   */\n  close: () => void;\n\n  /**\n   * Update auth tokens (when user logs in/out on parent site)\n   */\n  updateTokens: (accessToken: string, refreshToken?: string) => void;\n\n  /**\n   * Add item to cart\n   * @param productId - Product ID (required)\n   * @param variantId - Variant ID (required, null for non-variant products)\n   * @param quantity - Quantity to add (default: 1)\n   */\n  addToCart: (productId: string, variantId: string | null, quantity?: number) => void;\n\n  /**\n   * Whether checkout is ready to use\n   */\n  isReady: boolean;\n\n  /**\n   * Whether checkout overlay is currently open\n   */\n  isOpen: boolean;\n\n  /**\n   * Number of items in cart\n   */\n  cartCount: number;\n\n  /**\n   * Cart subtotal amount\n   */\n  cartTotal: number;\n\n  /**\n   * Cart currency code\n   */\n  cartCurrency: string;\n}\n\n// =============================================================================\n// HOOK\n// =============================================================================\n\n/**\n * React hook for Commerce Engine Checkout\n *\n * @param options - Checkout configuration\n * @returns Checkout state and methods\n */\nexport function useCheckout(options: UseCheckoutOptions): UseCheckoutReturn {\n  const checkoutRef = useRef<Checkout | null>(null);\n  const [isReady, setIsReady] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const [cart, setCart] = useState<CartData>({ count: 0, total: 0, currency: \"INR\" });\n\n  // Store options in ref to avoid recreating checkout on callback changes\n  // This allows stable callbacks while still using latest callback values\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n\n  // Destructure stable keys for dependency array\n  const { url, storeId, apiKey } = options;\n\n  // Initialize checkout on mount or when key config changes\n  useEffect(() => {\n    // Skip on server\n    if (typeof window === \"undefined\") return;\n\n    // Get current options from ref for non-key values\n    const opts = optionsRef.current;\n\n    const config: CheckoutConfig = {\n      url,\n      storeId,\n      apiKey,\n      theme: opts.theme,\n      authMode: opts.authMode,\n      accessToken: opts.accessToken,\n      refreshToken: opts.refreshToken,\n      quickBuy: opts.quickBuy,\n      sessionMode: opts.sessionMode,\n      autoDetectQuickBuy: opts.autoDetectQuickBuy,\n      appearance: {\n        zIndex: opts.zIndex,\n      },\n      onReady: () => {\n        setIsReady(true);\n        optionsRef.current.onReady?.();\n      },\n      onOpen: () => {\n        setIsOpen(true);\n        optionsRef.current.onOpen?.();\n      },\n      onClose: () => {\n        setIsOpen(false);\n        optionsRef.current.onClose?.();\n      },\n      onComplete: (order) => {\n        optionsRef.current.onComplete?.(order);\n      },\n      onCartUpdate: (cartData) => {\n        setCart(cartData);\n        optionsRef.current.onCartUpdate?.(cartData);\n      },\n      onAuthChange: (auth) => {\n        optionsRef.current.onAuthChange?.(auth);\n      },\n      onError: (error) => {\n        // Still set ready so buttons are enabled (error drawer will show)\n        setIsReady(true);\n        optionsRef.current.onError?.(error);\n      },\n    };\n\n    const checkout = new Checkout(config);\n    checkoutRef.current = checkout;\n\n    return () => {\n      checkout.destroy();\n      checkoutRef.current = null;\n      setIsReady(false);\n      setIsOpen(false);\n    };\n    // Only reinitialize when URL or credentials change\n    // Other options like theme, tokens, callbacks are read from optionsRef\n  }, [url, storeId, apiKey]);\n\n  // Stable callback refs\n  const openCart = useCallback(() => {\n    checkoutRef.current?.openCart();\n  }, []);\n\n  const openCheckout = useCallback(() => {\n    checkoutRef.current?.openCheckout();\n  }, []);\n\n  const close = useCallback(() => {\n    checkoutRef.current?.close();\n  }, []);\n\n  const updateTokens = useCallback((accessToken: string, refreshToken?: string) => {\n    checkoutRef.current?.updateTokens(accessToken, refreshToken);\n  }, []);\n\n  const addToCart = useCallback(\n    (productId: string, variantId: string | null, quantity?: number) => {\n      checkoutRef.current?.addToCart(productId, variantId, quantity);\n    },\n    []\n  );\n\n  return {\n    openCart,\n    openCheckout,\n    close,\n    updateTokens,\n    addToCart,\n    isReady,\n    isOpen,\n    cartCount: cart.count,\n    cartTotal: cart.total,\n    cartCurrency: cart.currency,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgOA,SAAgB,YAAY,SAAgD;CAC1E,MAAM,gCAAsC,KAAK;CACjD,MAAM,CAAC,SAAS,kCAAuB,MAAM;CAC7C,MAAM,CAAC,QAAQ,iCAAsB,MAAM;CAC3C,MAAM,CAAC,MAAM,+BAA8B;EAAE,OAAO;EAAG,OAAO;EAAG,UAAU;EAAO,CAAC;CAInF,MAAM,+BAAoB,QAAQ;AAClC,YAAW,UAAU;CAGrB,MAAM,EAAE,KAAK,SAAS,WAAW;AAGjC,4BAAgB;AAEd,MAAI,OAAO,WAAW,YAAa;EAGnC,MAAM,OAAO,WAAW;EA6CxB,MAAM,WAAW,IAAIA,2BA3CU;GAC7B;GACA;GACA;GACA,OAAO,KAAK;GACZ,UAAU,KAAK;GACf,aAAa,KAAK;GAClB,cAAc,KAAK;GACnB,UAAU,KAAK;GACf,aAAa,KAAK;GAClB,oBAAoB,KAAK;GACzB,YAAY,EACV,QAAQ,KAAK,QACd;GACD,eAAe;AACb,eAAW,KAAK;AAChB,eAAW,QAAQ,WAAW;;GAEhC,cAAc;AACZ,cAAU,KAAK;AACf,eAAW,QAAQ,UAAU;;GAE/B,eAAe;AACb,cAAU,MAAM;AAChB,eAAW,QAAQ,WAAW;;GAEhC,aAAa,UAAU;AACrB,eAAW,QAAQ,aAAa,MAAM;;GAExC,eAAe,aAAa;AAC1B,YAAQ,SAAS;AACjB,eAAW,QAAQ,eAAe,SAAS;;GAE7C,eAAe,SAAS;AACtB,eAAW,QAAQ,eAAe,KAAK;;GAEzC,UAAU,UAAU;AAElB,eAAW,KAAK;AAChB,eAAW,QAAQ,UAAU,MAAM;;GAEtC,CAEoC;AACrC,cAAY,UAAU;AAEtB,eAAa;AACX,YAAS,SAAS;AAClB,eAAY,UAAU;AACtB,cAAW,MAAM;AACjB,aAAU,MAAM;;IAIjB;EAAC;EAAK;EAAS;EAAO,CAAC;AA0B1B,QAAO;EACL,uCAxBiC;AACjC,eAAY,SAAS,UAAU;KAC9B,EAAE,CAAC;EAuBJ,2CArBqC;AACrC,eAAY,SAAS,cAAc;KAClC,EAAE,CAAC;EAoBJ,oCAlB8B;AAC9B,eAAY,SAAS,OAAO;KAC3B,EAAE,CAAC;EAiBJ,sCAfgC,aAAqB,iBAA0B;AAC/E,eAAY,SAAS,aAAa,aAAa,aAAa;KAC3D,EAAE,CAAC;EAcJ,mCAXC,WAAmB,WAA0B,aAAsB;AAClE,eAAY,SAAS,UAAU,WAAW,WAAW,SAAS;KAEhE,EAAE,CACH;EAQC;EACA;EACA,WAAW,KAAK;EAChB,WAAW,KAAK;EAChB,cAAc,KAAK;EACpB"}

package/dist/index.d.cts

@@ -0,0 +1,153 @@
+import { AddToCartItem, AuthChangeData, AuthChangeData as AuthChangeData$1, AuthMode, AuthMode as AuthMode$1, CartData, CartData as CartData$1, ErrorData, OrderData, OrderData as OrderData$1, QuickBuyConfig, QuickBuyConfig as QuickBuyConfig$1, SessionMode, SessionMode as SessionMode$1 } from "@commercengine/js";
+
+//#region src/use-checkout.d.ts
+
+/**
+ * Options for useCheckout hook
+ */
+interface UseCheckoutOptions {
+  /**
+   * Your Commerce Engine Store ID
+   * @example "store_abc123"
+   */
+  storeId?: string;
+  /**
+   * Your Commerce Engine API Key
+   * @example "ak_test_xyz789"
+   */
+  apiKey?: string;
+  /**
+   * Checkout URL for local development
+   * In production, URL is resolved from storeId/apiKey
+   */
+  url?: string;
+  /**
+   * Theme preference
+   * @default "system"
+   */
+  theme?: "light" | "dark" | "system";
+  /**
+   * Z-index for the checkout overlay
+   * @default 99999
+   */
+  zIndex?: number;
+  /**
+   * Authentication mode
+   * - 'managed': Checkout manages token lifecycle (default)
+   * - 'provided': Parent manages tokens, checkout uses in-memory only
+   * @default "managed"
+   */
+  authMode?: AuthMode$1;
+  /**
+   * Initial access token (if user already logged in)
+   */
+  accessToken?: string;
+  /**
+   * Initial refresh token
+   */
+  refreshToken?: string;
+  /**
+   * Quick buy configuration for "Buy Now" flows
+   * When provided, adds the product to cart on initialization
+   */
+  quickBuy?: QuickBuyConfig$1;
+  /**
+   * Session behavior when quick buy is used
+   * @default "continue-existing"
+   */
+  sessionMode?: SessionMode$1;
+  /**
+   * Auto-detect quick buy params from parent page URL
+   * When enabled, SDK parses window.location.search for:
+   * - product_id, variant_id, qty/quantity, session_mode
+   * Useful for ad-driven traffic to embedded checkout pages
+   * @default false
+   */
+  autoDetectQuickBuy?: boolean;
+  /**
+   * Called when checkout iframe is ready
+   */
+  onReady?: () => void;
+  /**
+   * Called when checkout is opened
+   */
+  onOpen?: () => void;
+  /**
+   * Called when checkout is closed
+   */
+  onClose?: () => void;
+  /**
+   * Called when order is completed
+   */
+  onComplete?: (order: OrderData$1) => void;
+  /**
+   * Called when cart state changes
+   */
+  onCartUpdate?: (cart: CartData$1) => void;
+  /**
+   * Called when auth state changes
+   */
+  onAuthChange?: (auth: AuthChangeData$1) => void;
+  /**
+   * Called when checkout encounters a configuration error
+   */
+  onError?: (error: ErrorData) => void;
+}
+/**
+ * Return value from useCheckout hook
+ */
+interface UseCheckoutReturn {
+  /**
+   * Open the cart drawer
+   */
+  openCart: () => void;
+  /**
+   * Open the checkout drawer directly (for Buy Now flow)
+   */
+  openCheckout: () => void;
+  /**
+   * Close the checkout overlay
+   */
+  close: () => void;
+  /**
+   * Update auth tokens (when user logs in/out on parent site)
+   */
+  updateTokens: (accessToken: string, refreshToken?: string) => void;
+  /**
+   * Add item to cart
+   * @param productId - Product ID (required)
+   * @param variantId - Variant ID (required, null for non-variant products)
+   * @param quantity - Quantity to add (default: 1)
+   */
+  addToCart: (productId: string, variantId: string | null, quantity?: number) => void;
+  /**
+   * Whether checkout is ready to use
+   */
+  isReady: boolean;
+  /**
+   * Whether checkout overlay is currently open
+   */
+  isOpen: boolean;
+  /**
+   * Number of items in cart
+   */
+  cartCount: number;
+  /**
+   * Cart subtotal amount
+   */
+  cartTotal: number;
+  /**
+   * Cart currency code
+   */
+  cartCurrency: string;
+}
+/**
+ * React hook for Commerce Engine Checkout
+ *
+ * @param options - Checkout configuration
+ * @returns Checkout state and methods
+ */
+declare function useCheckout(options: UseCheckoutOptions): UseCheckoutReturn;
+//#endregion
+export { type AddToCartItem, type AuthChangeData, type AuthMode, type CartData, type OrderData, type QuickBuyConfig, type SessionMode, type UseCheckoutOptions, type UseCheckoutReturn, useCheckout };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/use-checkout.ts"],"sourcesContent":[],"mappings":";;;;;;;UAkDiB,kBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAqCJ;;;;;;;;;;;;;aAgBA;;;;;gBAMG;;;;;;;;;;;;;;;;;;;;;;;;uBA6BO;;;;wBAKC;;;;wBAKA;;;;oBAKJ;;;;;UAMH,iBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiED,WAAA,UAAqB,qBAAqB"}

package/dist/index.d.mts

@@ -0,0 +1,153 @@
+import { AddToCartItem, AuthChangeData, AuthChangeData as AuthChangeData$1, AuthMode, AuthMode as AuthMode$1, CartData, CartData as CartData$1, ErrorData, OrderData, OrderData as OrderData$1, QuickBuyConfig, QuickBuyConfig as QuickBuyConfig$1, SessionMode, SessionMode as SessionMode$1 } from "@commercengine/js";
+
+//#region src/use-checkout.d.ts
+
+/**
+ * Options for useCheckout hook
+ */
+interface UseCheckoutOptions {
+  /**
+   * Your Commerce Engine Store ID
+   * @example "store_abc123"
+   */
+  storeId?: string;
+  /**
+   * Your Commerce Engine API Key
+   * @example "ak_test_xyz789"
+   */
+  apiKey?: string;
+  /**
+   * Checkout URL for local development
+   * In production, URL is resolved from storeId/apiKey
+   */
+  url?: string;
+  /**
+   * Theme preference
+   * @default "system"
+   */
+  theme?: "light" | "dark" | "system";
+  /**
+   * Z-index for the checkout overlay
+   * @default 99999
+   */
+  zIndex?: number;
+  /**
+   * Authentication mode
+   * - 'managed': Checkout manages token lifecycle (default)
+   * - 'provided': Parent manages tokens, checkout uses in-memory only
+   * @default "managed"
+   */
+  authMode?: AuthMode$1;
+  /**
+   * Initial access token (if user already logged in)
+   */
+  accessToken?: string;
+  /**
+   * Initial refresh token
+   */
+  refreshToken?: string;
+  /**
+   * Quick buy configuration for "Buy Now" flows
+   * When provided, adds the product to cart on initialization
+   */
+  quickBuy?: QuickBuyConfig$1;
+  /**
+   * Session behavior when quick buy is used
+   * @default "continue-existing"
+   */
+  sessionMode?: SessionMode$1;
+  /**
+   * Auto-detect quick buy params from parent page URL
+   * When enabled, SDK parses window.location.search for:
+   * - product_id, variant_id, qty/quantity, session_mode
+   * Useful for ad-driven traffic to embedded checkout pages
+   * @default false
+   */
+  autoDetectQuickBuy?: boolean;
+  /**
+   * Called when checkout iframe is ready
+   */
+  onReady?: () => void;
+  /**
+   * Called when checkout is opened
+   */
+  onOpen?: () => void;
+  /**
+   * Called when checkout is closed
+   */
+  onClose?: () => void;
+  /**
+   * Called when order is completed
+   */
+  onComplete?: (order: OrderData$1) => void;
+  /**
+   * Called when cart state changes
+   */
+  onCartUpdate?: (cart: CartData$1) => void;
+  /**
+   * Called when auth state changes
+   */
+  onAuthChange?: (auth: AuthChangeData$1) => void;
+  /**
+   * Called when checkout encounters a configuration error
+   */
+  onError?: (error: ErrorData) => void;
+}
+/**
+ * Return value from useCheckout hook
+ */
+interface UseCheckoutReturn {
+  /**
+   * Open the cart drawer
+   */
+  openCart: () => void;
+  /**
+   * Open the checkout drawer directly (for Buy Now flow)
+   */
+  openCheckout: () => void;
+  /**
+   * Close the checkout overlay
+   */
+  close: () => void;
+  /**
+   * Update auth tokens (when user logs in/out on parent site)
+   */
+  updateTokens: (accessToken: string, refreshToken?: string) => void;
+  /**
+   * Add item to cart
+   * @param productId - Product ID (required)
+   * @param variantId - Variant ID (required, null for non-variant products)
+   * @param quantity - Quantity to add (default: 1)
+   */
+  addToCart: (productId: string, variantId: string | null, quantity?: number) => void;
+  /**
+   * Whether checkout is ready to use
+   */
+  isReady: boolean;
+  /**
+   * Whether checkout overlay is currently open
+   */
+  isOpen: boolean;
+  /**
+   * Number of items in cart
+   */
+  cartCount: number;
+  /**
+   * Cart subtotal amount
+   */
+  cartTotal: number;
+  /**
+   * Cart currency code
+   */
+  cartCurrency: string;
+}
+/**
+ * React hook for Commerce Engine Checkout
+ *
+ * @param options - Checkout configuration
+ * @returns Checkout state and methods
+ */
+declare function useCheckout(options: UseCheckoutOptions): UseCheckoutReturn;
+//#endregion
+export { type AddToCartItem, type AuthChangeData, type AuthMode, type CartData, type OrderData, type QuickBuyConfig, type SessionMode, type UseCheckoutOptions, type UseCheckoutReturn, useCheckout };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/use-checkout.ts"],"sourcesContent":[],"mappings":";;;;;;;UAkDiB,kBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAqCJ;;;;;;;;;;;;;aAgBA;;;;;gBAMG;;;;;;;;;;;;;;;;;;;;;;;;uBA6BO;;;;wBAKC;;;;wBAKA;;;;oBAKJ;;;;;UAMH,iBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiED,WAAA,UAAqB,qBAAqB"}

package/dist/index.mjs

@@ -0,0 +1,132 @@
+import { Checkout } from "@commercengine/js";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+//#region src/use-checkout.ts
+/**
+* useCheckout Hook
+*
+* React hook for Commerce Engine Checkout integration.
+* Handles checkout initialization, state management, and cleanup.
+*
+* @example
+* ```tsx
+* import { useCheckout } from "@commercengine/react";
+*
+* function MyStore() {
+*   const { openCart, openCheckout, cartCount, isReady } = useCheckout({
+*     storeId: "store_xxx",
+*     apiKey: "ak_xxx",
+*     theme: "dark",
+*     onComplete: (order) => {
+*       console.log("Order placed:", order.orderNumber);
+*       window.location.href = "/thank-you";
+*     },
+*   });
+*
+*   return (
+*     <button onClick={openCart} disabled={!isReady}>
+*       Cart ({cartCount})
+*     </button>
+*   );
+* }
+* ```
+*/
+/**
+* React hook for Commerce Engine Checkout
+*
+* @param options - Checkout configuration
+* @returns Checkout state and methods
+*/
+function useCheckout(options) {
+	const checkoutRef = useRef(null);
+	const [isReady, setIsReady] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
+	const [cart, setCart] = useState({
+		count: 0,
+		total: 0,
+		currency: "INR"
+	});
+	const optionsRef = useRef(options);
+	optionsRef.current = options;
+	const { url, storeId, apiKey } = options;
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const opts = optionsRef.current;
+		const checkout = new Checkout({
+			url,
+			storeId,
+			apiKey,
+			theme: opts.theme,
+			authMode: opts.authMode,
+			accessToken: opts.accessToken,
+			refreshToken: opts.refreshToken,
+			quickBuy: opts.quickBuy,
+			sessionMode: opts.sessionMode,
+			autoDetectQuickBuy: opts.autoDetectQuickBuy,
+			appearance: { zIndex: opts.zIndex },
+			onReady: () => {
+				setIsReady(true);
+				optionsRef.current.onReady?.();
+			},
+			onOpen: () => {
+				setIsOpen(true);
+				optionsRef.current.onOpen?.();
+			},
+			onClose: () => {
+				setIsOpen(false);
+				optionsRef.current.onClose?.();
+			},
+			onComplete: (order) => {
+				optionsRef.current.onComplete?.(order);
+			},
+			onCartUpdate: (cartData) => {
+				setCart(cartData);
+				optionsRef.current.onCartUpdate?.(cartData);
+			},
+			onAuthChange: (auth) => {
+				optionsRef.current.onAuthChange?.(auth);
+			},
+			onError: (error) => {
+				setIsReady(true);
+				optionsRef.current.onError?.(error);
+			}
+		});
+		checkoutRef.current = checkout;
+		return () => {
+			checkout.destroy();
+			checkoutRef.current = null;
+			setIsReady(false);
+			setIsOpen(false);
+		};
+	}, [
+		url,
+		storeId,
+		apiKey
+	]);
+	return {
+		openCart: useCallback(() => {
+			checkoutRef.current?.openCart();
+		}, []),
+		openCheckout: useCallback(() => {
+			checkoutRef.current?.openCheckout();
+		}, []),
+		close: useCallback(() => {
+			checkoutRef.current?.close();
+		}, []),
+		updateTokens: useCallback((accessToken, refreshToken) => {
+			checkoutRef.current?.updateTokens(accessToken, refreshToken);
+		}, []),
+		addToCart: useCallback((productId, variantId, quantity) => {
+			checkoutRef.current?.addToCart(productId, variantId, quantity);
+		}, []),
+		isReady,
+		isOpen,
+		cartCount: cart.count,
+		cartTotal: cart.total,
+		cartCurrency: cart.currency
+	};
+}
+
+//#endregion
+export { useCheckout };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/use-checkout.ts"],"sourcesContent":["/**\n * useCheckout Hook\n *\n * React hook for Commerce Engine Checkout integration.\n * Handles checkout initialization, state management, and cleanup.\n *\n * @example\n * ```tsx\n * import { useCheckout } from \"@commercengine/react\";\n *\n * function MyStore() {\n *   const { openCart, openCheckout, cartCount, isReady } = useCheckout({\n *     storeId: \"store_xxx\",\n *     apiKey: \"ak_xxx\",\n *     theme: \"dark\",\n *     onComplete: (order) => {\n *       console.log(\"Order placed:\", order.orderNumber);\n *       window.location.href = \"/thank-you\";\n *     },\n *   });\n *\n *   return (\n *     <button onClick={openCart} disabled={!isReady}>\n *       Cart ({cartCount})\n *     </button>\n *   );\n * }\n * ```\n */\n\nimport {\n  type AuthChangeData,\n  type AuthMode,\n  type CartData,\n  Checkout,\n  type CheckoutConfig,\n  type ErrorData,\n  type OrderData,\n  type QuickBuyConfig,\n  type SessionMode,\n} from \"@commercengine/js\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\n/**\n * Options for useCheckout hook\n */\nexport interface UseCheckoutOptions {\n  /**\n   * Your Commerce Engine Store ID\n   * @example \"store_abc123\"\n   */\n  storeId?: string;\n\n  /**\n   * Your Commerce Engine API Key\n   * @example \"ak_test_xyz789\"\n   */\n  apiKey?: string;\n\n  /**\n   * Checkout URL for local development\n   * In production, URL is resolved from storeId/apiKey\n   */\n  url?: string;\n\n  /**\n   * Theme preference\n   * @default \"system\"\n   */\n  theme?: \"light\" | \"dark\" | \"system\";\n\n  /**\n   * Z-index for the checkout overlay\n   * @default 99999\n   */\n  zIndex?: number;\n\n  /**\n   * Authentication mode\n   * - 'managed': Checkout manages token lifecycle (default)\n   * - 'provided': Parent manages tokens, checkout uses in-memory only\n   * @default \"managed\"\n   */\n  authMode?: AuthMode;\n\n  /**\n   * Initial access token (if user already logged in)\n   */\n  accessToken?: string;\n\n  /**\n   * Initial refresh token\n   */\n  refreshToken?: string;\n\n  /**\n   * Quick buy configuration for \"Buy Now\" flows\n   * When provided, adds the product to cart on initialization\n   */\n  quickBuy?: QuickBuyConfig;\n\n  /**\n   * Session behavior when quick buy is used\n   * @default \"continue-existing\"\n   */\n  sessionMode?: SessionMode;\n\n  /**\n   * Auto-detect quick buy params from parent page URL\n   * When enabled, SDK parses window.location.search for:\n   * - product_id, variant_id, qty/quantity, session_mode\n   * Useful for ad-driven traffic to embedded checkout pages\n   * @default false\n   */\n  autoDetectQuickBuy?: boolean;\n\n  /**\n   * Called when checkout iframe is ready\n   */\n  onReady?: () => void;\n\n  /**\n   * Called when checkout is opened\n   */\n  onOpen?: () => void;\n\n  /**\n   * Called when checkout is closed\n   */\n  onClose?: () => void;\n\n  /**\n   * Called when order is completed\n   */\n  onComplete?: (order: OrderData) => void;\n\n  /**\n   * Called when cart state changes\n   */\n  onCartUpdate?: (cart: CartData) => void;\n\n  /**\n   * Called when auth state changes\n   */\n  onAuthChange?: (auth: AuthChangeData) => void;\n\n  /**\n   * Called when checkout encounters a configuration error\n   */\n  onError?: (error: ErrorData) => void;\n}\n\n/**\n * Return value from useCheckout hook\n */\nexport interface UseCheckoutReturn {\n  /**\n   * Open the cart drawer\n   */\n  openCart: () => void;\n\n  /**\n   * Open the checkout drawer directly (for Buy Now flow)\n   */\n  openCheckout: () => void;\n\n  /**\n   * Close the checkout overlay\n   */\n  close: () => void;\n\n  /**\n   * Update auth tokens (when user logs in/out on parent site)\n   */\n  updateTokens: (accessToken: string, refreshToken?: string) => void;\n\n  /**\n   * Add item to cart\n   * @param productId - Product ID (required)\n   * @param variantId - Variant ID (required, null for non-variant products)\n   * @param quantity - Quantity to add (default: 1)\n   */\n  addToCart: (productId: string, variantId: string | null, quantity?: number) => void;\n\n  /**\n   * Whether checkout is ready to use\n   */\n  isReady: boolean;\n\n  /**\n   * Whether checkout overlay is currently open\n   */\n  isOpen: boolean;\n\n  /**\n   * Number of items in cart\n   */\n  cartCount: number;\n\n  /**\n   * Cart subtotal amount\n   */\n  cartTotal: number;\n\n  /**\n   * Cart currency code\n   */\n  cartCurrency: string;\n}\n\n// =============================================================================\n// HOOK\n// =============================================================================\n\n/**\n * React hook for Commerce Engine Checkout\n *\n * @param options - Checkout configuration\n * @returns Checkout state and methods\n */\nexport function useCheckout(options: UseCheckoutOptions): UseCheckoutReturn {\n  const checkoutRef = useRef<Checkout | null>(null);\n  const [isReady, setIsReady] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const [cart, setCart] = useState<CartData>({ count: 0, total: 0, currency: \"INR\" });\n\n  // Store options in ref to avoid recreating checkout on callback changes\n  // This allows stable callbacks while still using latest callback values\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n\n  // Destructure stable keys for dependency array\n  const { url, storeId, apiKey } = options;\n\n  // Initialize checkout on mount or when key config changes\n  useEffect(() => {\n    // Skip on server\n    if (typeof window === \"undefined\") return;\n\n    // Get current options from ref for non-key values\n    const opts = optionsRef.current;\n\n    const config: CheckoutConfig = {\n      url,\n      storeId,\n      apiKey,\n      theme: opts.theme,\n      authMode: opts.authMode,\n      accessToken: opts.accessToken,\n      refreshToken: opts.refreshToken,\n      quickBuy: opts.quickBuy,\n      sessionMode: opts.sessionMode,\n      autoDetectQuickBuy: opts.autoDetectQuickBuy,\n      appearance: {\n        zIndex: opts.zIndex,\n      },\n      onReady: () => {\n        setIsReady(true);\n        optionsRef.current.onReady?.();\n      },\n      onOpen: () => {\n        setIsOpen(true);\n        optionsRef.current.onOpen?.();\n      },\n      onClose: () => {\n        setIsOpen(false);\n        optionsRef.current.onClose?.();\n      },\n      onComplete: (order) => {\n        optionsRef.current.onComplete?.(order);\n      },\n      onCartUpdate: (cartData) => {\n        setCart(cartData);\n        optionsRef.current.onCartUpdate?.(cartData);\n      },\n      onAuthChange: (auth) => {\n        optionsRef.current.onAuthChange?.(auth);\n      },\n      onError: (error) => {\n        // Still set ready so buttons are enabled (error drawer will show)\n        setIsReady(true);\n        optionsRef.current.onError?.(error);\n      },\n    };\n\n    const checkout = new Checkout(config);\n    checkoutRef.current = checkout;\n\n    return () => {\n      checkout.destroy();\n      checkoutRef.current = null;\n      setIsReady(false);\n      setIsOpen(false);\n    };\n    // Only reinitialize when URL or credentials change\n    // Other options like theme, tokens, callbacks are read from optionsRef\n  }, [url, storeId, apiKey]);\n\n  // Stable callback refs\n  const openCart = useCallback(() => {\n    checkoutRef.current?.openCart();\n  }, []);\n\n  const openCheckout = useCallback(() => {\n    checkoutRef.current?.openCheckout();\n  }, []);\n\n  const close = useCallback(() => {\n    checkoutRef.current?.close();\n  }, []);\n\n  const updateTokens = useCallback((accessToken: string, refreshToken?: string) => {\n    checkoutRef.current?.updateTokens(accessToken, refreshToken);\n  }, []);\n\n  const addToCart = useCallback(\n    (productId: string, variantId: string | null, quantity?: number) => {\n      checkoutRef.current?.addToCart(productId, variantId, quantity);\n    },\n    []\n  );\n\n  return {\n    openCart,\n    openCheckout,\n    close,\n    updateTokens,\n    addToCart,\n    isReady,\n    isOpen,\n    cartCount: cart.count,\n    cartTotal: cart.total,\n    cartCurrency: cart.currency,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgOA,SAAgB,YAAY,SAAgD;CAC1E,MAAM,cAAc,OAAwB,KAAK;CACjD,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,MAAM,WAAW,SAAmB;EAAE,OAAO;EAAG,OAAO;EAAG,UAAU;EAAO,CAAC;CAInF,MAAM,aAAa,OAAO,QAAQ;AAClC,YAAW,UAAU;CAGrB,MAAM,EAAE,KAAK,SAAS,WAAW;AAGjC,iBAAgB;AAEd,MAAI,OAAO,WAAW,YAAa;EAGnC,MAAM,OAAO,WAAW;EA6CxB,MAAM,WAAW,IAAI,SA3CU;GAC7B;GACA;GACA;GACA,OAAO,KAAK;GACZ,UAAU,KAAK;GACf,aAAa,KAAK;GAClB,cAAc,KAAK;GACnB,UAAU,KAAK;GACf,aAAa,KAAK;GAClB,oBAAoB,KAAK;GACzB,YAAY,EACV,QAAQ,KAAK,QACd;GACD,eAAe;AACb,eAAW,KAAK;AAChB,eAAW,QAAQ,WAAW;;GAEhC,cAAc;AACZ,cAAU,KAAK;AACf,eAAW,QAAQ,UAAU;;GAE/B,eAAe;AACb,cAAU,MAAM;AAChB,eAAW,QAAQ,WAAW;;GAEhC,aAAa,UAAU;AACrB,eAAW,QAAQ,aAAa,MAAM;;GAExC,eAAe,aAAa;AAC1B,YAAQ,SAAS;AACjB,eAAW,QAAQ,eAAe,SAAS;;GAE7C,eAAe,SAAS;AACtB,eAAW,QAAQ,eAAe,KAAK;;GAEzC,UAAU,UAAU;AAElB,eAAW,KAAK;AAChB,eAAW,QAAQ,UAAU,MAAM;;GAEtC,CAEoC;AACrC,cAAY,UAAU;AAEtB,eAAa;AACX,YAAS,SAAS;AAClB,eAAY,UAAU;AACtB,cAAW,MAAM;AACjB,aAAU,MAAM;;IAIjB;EAAC;EAAK;EAAS;EAAO,CAAC;AA0B1B,QAAO;EACL,UAxBe,kBAAkB;AACjC,eAAY,SAAS,UAAU;KAC9B,EAAE,CAAC;EAuBJ,cArBmB,kBAAkB;AACrC,eAAY,SAAS,cAAc;KAClC,EAAE,CAAC;EAoBJ,OAlBY,kBAAkB;AAC9B,eAAY,SAAS,OAAO;KAC3B,EAAE,CAAC;EAiBJ,cAfmB,aAAa,aAAqB,iBAA0B;AAC/E,eAAY,SAAS,aAAa,aAAa,aAAa;KAC3D,EAAE,CAAC;EAcJ,WAZgB,aACf,WAAmB,WAA0B,aAAsB;AAClE,eAAY,SAAS,UAAU,WAAW,WAAW,SAAS;KAEhE,EAAE,CACH;EAQC;EACA;EACA,WAAW,KAAK;EAChB,WAAW,KAAK;EAChB,cAAc,KAAK;EACpB"}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@commercengine/react",
+  "version": "0.1.0",
+  "description": "Commerce Engine Checkout - React SDK",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.mts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@commercengine/js": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "react": "^18.3.1",
+    "tsdown": "^0.18.4",
+    "typescript": "^5.9.3"
+  },
+  "keywords": [
+    "commercengine",
+    "checkout",
+    "react",
+    "hook",
+    "ecommerce"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://docs.commercengine.io",
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown"
+  }
+}