@commercengine/checkout 0.1.0

package/README.md

@@ -0,0 +1,402 @@
+# @commercengine/checkout
+
+Universal checkout SDK for Commerce Engine. Works with React, Vue, Svelte, Solid, and vanilla JavaScript.
+
+## Features
+
+- **Universal** - One package for all frameworks
+- **No Provider Required** - Initialize once, use anywhere
+- **Reactive State** - Automatic UI updates when cart changes
+- **Type Safe** - Full TypeScript support
+- **Tree Shakeable** - Only bundle what you use
+
+## Architecture
+
+Designed for large applications with multiple routes (Next.js, Remix, etc.):
+
+- **Singleton Store** - One checkout instance shared across all components and routes
+- **Non-blocking Init** - `initCheckout()` returns immediately, iframe loads in background
+- **SSR Safe** - Initialization only runs on client, server renders with default state
+- **Zero Core Web Vitals Impact**:
+  - **LCP**: Iframe is hidden, doesn't affect largest contentful paint
+  - **INP/FID**: No main thread blocking during initialization
+  - **CLS**: Fixed positioning, no layout shifts
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  App Root (layout.tsx / _app.tsx)                           │
+│  └─ initCheckout() ──► Creates hidden iframe (async)        │
+├─────────────────────────────────────────────────────────────┤
+│  Any Component (header, product page, cart page...)         │
+│  └─ useCheckout() ──► Same singleton store                  │
+├─────────────────────────────────────────────────────────────┤
+│  Route Changes (SPA navigation)                             │
+│  └─ Checkout instance persists, no re-initialization        │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## Installation
+
+```bash
+npm install @commercengine/checkout
+# or
+pnpm add @commercengine/checkout
+# or
+yarn add @commercengine/checkout
+```
+
+## Quick Start
+
+### React / Next.js / Remix
+
+```tsx
+import { useCheckout, initCheckout, destroyCheckout } from "@commercengine/checkout/react";
+import { useEffect } from "react";
+
+// Initialize once at app root
+function App({ children }) {
+  useEffect(() => {
+    initCheckout({
+      storeId: "store_xxx",
+      apiKey: "ak_xxx",
+      onComplete: (order) => {
+        console.log("Order placed:", order.orderNumber);
+      },
+    });
+    return () => destroyCheckout();
+  }, []);
+
+  return <>{children}</>;
+}
+
+// Use anywhere - no provider needed
+function Header() {
+  const { cartCount, openCart, isReady } = useCheckout();
+
+  return (
+    <button onClick={openCart} disabled={!isReady}>
+      Cart ({cartCount})
+    </button>
+  );
+}
+
+function ProductCard({ product }) {
+  const { addToCart } = useCheckout();
+
+  return (
+    <button onClick={() => addToCart(product.id, product.variantId, 1)}>
+      Add to Cart
+    </button>
+  );
+}
+```
+
+### Vue / Nuxt
+
+```vue
+<script setup>
+import { useCheckout, initCheckout, destroyCheckout } from "@commercengine/checkout/vue";
+import { onMounted, onUnmounted } from "vue";
+
+// Initialize once at app root (App.vue or plugin)
+onMounted(() => {
+  initCheckout({
+    storeId: "store_xxx",
+    apiKey: "ak_xxx",
+  });
+});
+
+onUnmounted(() => {
+  destroyCheckout();
+});
+
+// Use anywhere
+const { cartCount, openCart, isReady } = useCheckout();
+</script>
+
+<template>
+  <button @click="openCart" :disabled="!isReady">
+    Cart ({{ cartCount }})
+  </button>
+</template>
+```
+
+### Svelte / SvelteKit
+
+```svelte
+<script>
+  import { checkout, initCheckout, destroyCheckout } from "@commercengine/checkout/svelte";
+  import { onMount, onDestroy } from "svelte";
+
+  // Initialize once at app root (+layout.svelte)
+  onMount(() => {
+    initCheckout({
+      storeId: "store_xxx",
+      apiKey: "ak_xxx",
+    });
+  });
+
+  onDestroy(() => {
+    destroyCheckout();
+  });
+</script>
+
+<button on:click={() => $checkout.openCart()} disabled={!$checkout.isReady}>
+  Cart ({$checkout.cartCount})
+</button>
+```
+
+Or use individual stores for fine-grained reactivity:
+
+```svelte
+<script>
+  import { cartCount, isReady } from "@commercengine/checkout/svelte";
+</script>
+
+<span class="badge">{$cartCount}</span>
+```
+
+### Solid / SolidStart
+
+```tsx
+import { useCheckout, initCheckout, destroyCheckout } from "@commercengine/checkout/solid";
+import { onMount, onCleanup } from "solid-js";
+
+// Initialize once at app root
+function App(props) {
+  onMount(() => {
+    initCheckout({
+      storeId: "store_xxx",
+      apiKey: "ak_xxx",
+    });
+  });
+
+  onCleanup(() => {
+    destroyCheckout();
+  });
+
+  return <>{props.children}</>;
+}
+
+// Use anywhere
+function Header() {
+  const checkout = useCheckout();
+
+  return (
+    <button onClick={() => checkout.openCart()} disabled={!checkout.isReady}>
+      Cart ({checkout.cartCount})
+    </button>
+  );
+}
+```
+
+### Vanilla JavaScript
+
+```ts
+import { initCheckout, getCheckout, subscribeToCheckout } from "@commercengine/checkout";
+
+// Initialize
+initCheckout({
+  storeId: "store_xxx",
+  apiKey: "ak_xxx",
+  onComplete: (order) => {
+    window.location.href = `/thank-you?order=${order.orderNumber}`;
+  },
+});
+
+// Use anywhere
+document.getElementById("cart-btn").onclick = () => {
+  getCheckout().openCart();
+};
+
+// Subscribe to cart updates
+subscribeToCheckout(
+  (state) => state.cartCount,
+  (count) => {
+    document.getElementById("cart-badge").textContent = count.toString();
+  }
+);
+```
+
+## Configuration
+
+Pass configuration to `initCheckout()`:
+
+```ts
+initCheckout({
+  // Required
+  storeId: "store_xxx",
+  apiKey: "ak_xxx",
+
+  // Environment (default: "production")
+  environment: "production", // or "staging"
+
+  // Or use custom URL for local development
+  url: "http://localhost:8080",
+
+  // Theme (default: "system")
+  theme: "light", // or "dark" or "system"
+
+  // Appearance
+  appearance: {
+    zIndex: 99999,
+  },
+
+  // Authentication
+  authMode: "managed", // or "provided"
+  accessToken: "...",  // if user already logged in
+  refreshToken: "...",
+
+  // Quick Buy (add product on init)
+  quickBuy: {
+    productId: "prod_xxx",
+    variantId: "var_xxx", // or null
+    quantity: 1,
+  },
+  sessionMode: "continue-existing", // or "force-new"
+  autoDetectQuickBuy: false, // parse URL params
+
+  // Callbacks
+  onReady: () => {},
+  onOpen: () => {},
+  onClose: () => {},
+  onComplete: (order) => {},
+  onCartUpdate: (cart) => {},
+  onLogin: (data) => {},
+  onLogout: (data) => {},
+  onTokenRefresh: (data) => {},
+  onSessionError: () => {},
+  onError: (error) => {},
+});
+```
+
+## API Reference
+
+### Initialization
+
+| Function | Description |
+|----------|-------------|
+| `initCheckout(config)` | Initialize checkout with configuration |
+| `destroyCheckout()` | Destroy checkout instance and cleanup |
+
+### Hooks / Composables
+
+| Framework | Import |
+|-----------|--------|
+| React | `useCheckout()` from `@commercengine/checkout/react` |
+| Vue | `useCheckout()` from `@commercengine/checkout/vue` |
+| Svelte | `checkout` store from `@commercengine/checkout/svelte` |
+| Solid | `useCheckout()` from `@commercengine/checkout/solid` |
+
+### Return Values
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `isReady` | `boolean` | Whether checkout is ready to use |
+| `isOpen` | `boolean` | Whether checkout overlay is open |
+| `cartCount` | `number` | Number of items in cart |
+| `cartTotal` | `number` | Cart subtotal amount |
+| `cartCurrency` | `string` | Currency code (e.g., "USD") |
+
+| Method | Description |
+|--------|-------------|
+| `openCart()` | Open the cart drawer |
+| `openCheckout()` | Open checkout directly (Buy Now flow) |
+| `close()` | Close the checkout overlay |
+| `addToCart(productId, variantId, quantity?)` | Add item to cart |
+| `updateTokens(accessToken, refreshToken?)` | Update auth tokens |
+
+### Vanilla JS Helpers
+
+| Function | Description |
+|----------|-------------|
+| `getCheckout()` | Get current state and methods (non-reactive) |
+| `subscribeToCheckout(listener)` | Subscribe to all state changes |
+| `subscribeToCheckout(selector, listener)` | Subscribe to specific state |
+| `checkoutStore` | Direct access to Zustand store |
+
+## TypeScript
+
+All types are exported for convenience:
+
+```ts
+import type {
+  // Configuration
+  CheckoutConfig,
+  Environment,
+  AuthMode,
+  SessionMode,
+  QuickBuyConfig,
+
+  // State
+  CartData,
+  OrderData,
+  UserInfo,
+  ErrorData,
+
+  // Auth events
+  AuthLoginData,
+  AuthLogoutData,
+  AuthRefreshData,
+
+  // Store types
+  CheckoutState,
+  CheckoutActions,
+  CheckoutStore,
+} from "@commercengine/checkout/react"; // or /vue, /svelte, /solid
+```
+
+## Migration from @commercengine/react
+
+If you're migrating from the old `@commercengine/react` package:
+
+**Before:**
+```tsx
+import { useCheckout } from "@commercengine/react";
+
+function App() {
+  const { openCart, cartCount } = useCheckout({
+    storeId: "store_xxx",
+    apiKey: "ak_xxx",
+    onComplete: (order) => { ... },
+  });
+
+  return <button onClick={openCart}>Cart ({cartCount})</button>;
+}
+```
+
+**After:**
+```tsx
+import { useCheckout, initCheckout, destroyCheckout } from "@commercengine/checkout/react";
+import { useEffect } from "react";
+
+// Initialize once at app root
+function App({ children }) {
+  useEffect(() => {
+    initCheckout({
+      storeId: "store_xxx",
+      apiKey: "ak_xxx",
+      onComplete: (order) => { ... },
+    });
+    return () => destroyCheckout();
+  }, []);
+
+  return <>{children}</>;
+}
+
+// Use anywhere without config
+function Header() {
+  const { openCart, cartCount } = useCheckout();
+  return <button onClick={openCart}>Cart ({cartCount})</button>;
+}
+```
+
+**Key differences:**
+1. Initialize once at app root with `initCheckout()` instead of passing config to every hook
+2. `useCheckout()` takes no parameters - just returns state and methods
+3. Cleanup with `destroyCheckout()` in app unmount
+4. Works across the entire app without prop drilling or providers
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,7 @@
+const require_store = require('./store.cjs');
+
+exports.checkoutStore = require_store.checkoutStore;
+exports.destroyCheckout = require_store.destroyCheckout;
+exports.getCheckout = require_store.getCheckout;
+exports.initCheckout = require_store.initCheckout;
+exports.subscribeToCheckout = require_store.subscribeToCheckout;

package/dist/index.d.cts

@@ -0,0 +1,3 @@
+import { a as destroyCheckout, c as subscribeToCheckout, i as checkoutStore, n as CheckoutState, o as getCheckout, r as CheckoutStore, s as initCheckout, t as CheckoutActions } from "./store.cjs";
+import { AddToCartItem, AuthLoginData, AuthLogoutData, AuthMode, AuthRefreshData, CartData, Channel, CheckoutConfig, CheckoutEventType, Environment, ErrorData, LoginMethod, OrderData, QuickBuyConfig, SessionMode, UserInfo } from "@commercengine/js";
+export { type AddToCartItem, type AuthLoginData, type AuthLogoutData, type AuthMode, type AuthRefreshData, type CartData, type Channel, type CheckoutActions, type CheckoutConfig, type CheckoutEventType, type CheckoutState, type CheckoutStore, type Environment, type ErrorData, type LoginMethod, type OrderData, type QuickBuyConfig, type SessionMode, type UserInfo, checkoutStore, destroyCheckout, getCheckout, initCheckout, subscribeToCheckout };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { a as destroyCheckout, c as subscribeToCheckout, i as checkoutStore, n as CheckoutState, o as getCheckout, r as CheckoutStore, s as initCheckout, t as CheckoutActions } from "./store.js";
+import { AddToCartItem, AuthLoginData, AuthLogoutData, AuthMode, AuthRefreshData, CartData, Channel, CheckoutConfig, CheckoutEventType, Environment, ErrorData, LoginMethod, OrderData, QuickBuyConfig, SessionMode, UserInfo } from "@commercengine/js";
+export { type AddToCartItem, type AuthLoginData, type AuthLogoutData, type AuthMode, type AuthRefreshData, type CartData, type Channel, type CheckoutActions, type CheckoutConfig, type CheckoutEventType, type CheckoutState, type CheckoutStore, type Environment, type ErrorData, type LoginMethod, type OrderData, type QuickBuyConfig, type SessionMode, type UserInfo, checkoutStore, destroyCheckout, getCheckout, initCheckout, subscribeToCheckout };

package/dist/index.js

@@ -0,0 +1,3 @@
+import { a as subscribeToCheckout, i as initCheckout, n as destroyCheckout, r as getCheckout, t as checkoutStore } from "./store.js";
+
+export { checkoutStore, destroyCheckout, getCheckout, initCheckout, subscribeToCheckout };

package/dist/react.cjs

@@ -0,0 +1,105 @@
+const require_store = require('./store.cjs');
+let zustand = require("zustand");
+let zustand_react_shallow = require("zustand/react/shallow");
+
+//#region src/react.ts
+/**
+* Commerce Engine Checkout - React Binding
+*
+* React hook for checkout integration with automatic state synchronization.
+*
+* @example
+* ```tsx
+* import { useCheckout, initCheckout } from "@commercengine/checkout/react";
+*
+* // Initialize once at app root
+* function App() {
+*   useEffect(() => {
+*     initCheckout({
+*       storeId: "store_xxx",
+*       apiKey: "ak_xxx",
+*       onComplete: (order) => router.push("/thank-you"),
+*     });
+*     return () => destroyCheckout();
+*   }, []);
+*
+*   return <>{children}</>;
+* }
+*
+* // Use anywhere - no provider needed
+* function Header() {
+*   const { cartCount, openCart, isReady } = useCheckout();
+*
+*   return (
+*     <button onClick={openCart} disabled={!isReady}>
+*       Cart ({cartCount})
+*     </button>
+*   );
+* }
+* ```
+*
+* @packageDocumentation
+*/
+/**
+* React hook for checkout integration
+*
+* Provides reactive access to checkout state and methods.
+* No provider required - works anywhere in your component tree.
+*
+* @returns Checkout state and methods
+*
+* @example Basic usage
+* ```tsx
+* function CartButton() {
+*   const { cartCount, openCart, isReady } = useCheckout();
+*
+*   return (
+*     <button onClick={openCart} disabled={!isReady}>
+*       Cart ({cartCount})
+*     </button>
+*   );
+* }
+* ```
+*
+* @example Add to cart
+* ```tsx
+* function ProductCard({ product }) {
+*   const { addToCart } = useCheckout();
+*
+*   return (
+*     <button onClick={() => addToCart(product.id, product.variantId, 1)}>
+*       Add to Cart
+*     </button>
+*   );
+* }
+* ```
+*/
+function useCheckout() {
+	const state = (0, zustand.useStore)(require_store.checkoutStore, (0, zustand_react_shallow.useShallow)((s) => ({
+		isReady: s.isReady,
+		isOpen: s.isOpen,
+		cartCount: s.cartCount,
+		cartTotal: s.cartTotal,
+		cartCurrency: s.cartCurrency
+	})));
+	const actions = (0, zustand.useStore)(require_store.checkoutStore, (0, zustand_react_shallow.useShallow)((s) => ({
+		openCart: s.openCart,
+		openCheckout: s.openCheckout,
+		close: s.close,
+		addToCart: s.addToCart,
+		updateTokens: s.updateTokens
+	})));
+	return {
+		...state,
+		...actions
+	};
+}
+
+//#endregion
+exports.checkoutStore = require_store.checkoutStore;
+exports.destroyCheckout = require_store.destroyCheckout;
+exports.getCheckout = require_store.getCheckout;
+exports.initCheckout = require_store.initCheckout;
+exports.subscribeToCheckout = require_store.subscribeToCheckout;
+exports.useCheckout = useCheckout;
+//# sourceMappingURL=react.cjs.map

package/dist/react.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.cjs","names":["checkoutStore"],"sources":["../src/react.ts"],"sourcesContent":["/**\n * Commerce Engine Checkout - React Binding\n *\n * React hook for checkout integration with automatic state synchronization.\n *\n * @example\n * ```tsx\n * import { useCheckout, initCheckout } from \"@commercengine/checkout/react\";\n *\n * // Initialize once at app root\n * function App() {\n *   useEffect(() => {\n *     initCheckout({\n *       storeId: \"store_xxx\",\n *       apiKey: \"ak_xxx\",\n *       onComplete: (order) => router.push(\"/thank-you\"),\n *     });\n *     return () => destroyCheckout();\n *   }, []);\n *\n *   return <>{children}</>;\n * }\n *\n * // Use anywhere - no provider needed\n * function Header() {\n *   const { cartCount, openCart, isReady } = useCheckout();\n *\n *   return (\n *     <button onClick={openCart} disabled={!isReady}>\n *       Cart ({cartCount})\n *     </button>\n *   );\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport { useStore } from \"zustand\";\nimport { useShallow } from \"zustand/react/shallow\";\nimport { type CheckoutActions, type CheckoutState, checkoutStore } from \"./store\";\n\n// Re-export types from @commercengine/js\nexport type {\n  AddToCartItem,\n  AuthLoginData,\n  AuthLogoutData,\n  AuthMode,\n  AuthRefreshData,\n  CartData,\n  Channel,\n  CheckoutConfig,\n  CheckoutEventType,\n  Environment,\n  ErrorData,\n  LoginMethod,\n  OrderData,\n  QuickBuyConfig,\n  SessionMode,\n  UserInfo,\n} from \"@commercengine/js\";\n// Re-export everything from vanilla for convenience\nexport {\n  type CheckoutActions,\n  type CheckoutState,\n  type CheckoutStore,\n  checkoutStore,\n  destroyCheckout,\n  getCheckout,\n  initCheckout,\n  subscribeToCheckout,\n} from \"./store\";\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\n/**\n * Return type from useCheckout hook\n */\nexport interface UseCheckoutReturn {\n  /** Whether checkout is ready to use */\n  isReady: boolean;\n  /** Whether checkout overlay is currently open */\n  isOpen: boolean;\n  /** Number of items in cart */\n  cartCount: number;\n  /** Cart subtotal amount */\n  cartTotal: number;\n  /** Cart currency code */\n  cartCurrency: string;\n  /** Open the cart drawer */\n  openCart: () => void;\n  /** Open the checkout drawer directly */\n  openCheckout: () => void;\n  /** Close the checkout overlay */\n  close: () => void;\n  /** Add item to cart */\n  addToCart: (productId: string, variantId: string | null, quantity?: number) => void;\n  /** Update authentication tokens */\n  updateTokens: (accessToken: string, refreshToken?: string) => void;\n}\n\n// =============================================================================\n// HOOK\n// =============================================================================\n\n/**\n * React hook for checkout integration\n *\n * Provides reactive access to checkout state and methods.\n * No provider required - works anywhere in your component tree.\n *\n * @returns Checkout state and methods\n *\n * @example Basic usage\n * ```tsx\n * function CartButton() {\n *   const { cartCount, openCart, isReady } = useCheckout();\n *\n *   return (\n *     <button onClick={openCart} disabled={!isReady}>\n *       Cart ({cartCount})\n *     </button>\n *   );\n * }\n * ```\n *\n * @example Add to cart\n * ```tsx\n * function ProductCard({ product }) {\n *   const { addToCart } = useCheckout();\n *\n *   return (\n *     <button onClick={() => addToCart(product.id, product.variantId, 1)}>\n *       Add to Cart\n *     </button>\n *   );\n * }\n * ```\n */\nexport function useCheckout(): UseCheckoutReturn {\n  // Subscribe to state with shallow comparison to prevent unnecessary re-renders\n  const state = useStore(\n    checkoutStore,\n    useShallow((s: CheckoutState) => ({\n      isReady: s.isReady,\n      isOpen: s.isOpen,\n      cartCount: s.cartCount,\n      cartTotal: s.cartTotal,\n      cartCurrency: s.cartCurrency,\n    }))\n  );\n\n  // Actions are stable references from the store\n  const actions = useStore(\n    checkoutStore,\n    useShallow((s: CheckoutActions) => ({\n      openCart: s.openCart,\n      openCheckout: s.openCheckout,\n      close: s.close,\n      addToCart: s.addToCart,\n      updateTokens: s.updateTokens,\n    }))\n  );\n\n  return {\n    ...state,\n    ...actions,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6IA,SAAgB,cAAiC;CAE/C,MAAM,8BACJA,oEACY,OAAsB;EAChC,SAAS,EAAE;EACX,QAAQ,EAAE;EACV,WAAW,EAAE;EACb,WAAW,EAAE;EACb,cAAc,EAAE;EACjB,EAAE,CACJ;CAGD,MAAM,gCACJA,oEACY,OAAwB;EAClC,UAAU,EAAE;EACZ,cAAc,EAAE;EAChB,OAAO,EAAE;EACT,WAAW,EAAE;EACb,cAAc,EAAE;EACjB,EAAE,CACJ;AAED,QAAO;EACL,GAAG;EACH,GAAG;EACJ"}

package/dist/react.d.cts

@@ -0,0 +1,69 @@
+import { a as destroyCheckout, c as subscribeToCheckout, i as checkoutStore, n as CheckoutState, o as getCheckout, r as CheckoutStore, s as initCheckout, t as CheckoutActions } from "./store.cjs";
+import { AddToCartItem, AuthLoginData, AuthLogoutData, AuthMode, AuthRefreshData, CartData, Channel, CheckoutConfig, CheckoutEventType, Environment, ErrorData, LoginMethod, OrderData, QuickBuyConfig, SessionMode, UserInfo } from "@commercengine/js";
+
+//#region src/react.d.ts
+
+/**
+ * Return type from useCheckout hook
+ */
+interface UseCheckoutReturn {
+  /** 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;
+  /** Open the cart drawer */
+  openCart: () => void;
+  /** Open the checkout drawer directly */
+  openCheckout: () => void;
+  /** Close the checkout overlay */
+  close: () => void;
+  /** Add item to cart */
+  addToCart: (productId: string, variantId: string | null, quantity?: number) => void;
+  /** Update authentication tokens */
+  updateTokens: (accessToken: string, refreshToken?: string) => void;
+}
+/**
+ * React hook for checkout integration
+ *
+ * Provides reactive access to checkout state and methods.
+ * No provider required - works anywhere in your component tree.
+ *
+ * @returns Checkout state and methods
+ *
+ * @example Basic usage
+ * ```tsx
+ * function CartButton() {
+ *   const { cartCount, openCart, isReady } = useCheckout();
+ *
+ *   return (
+ *     <button onClick={openCart} disabled={!isReady}>
+ *       Cart ({cartCount})
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
+ * @example Add to cart
+ * ```tsx
+ * function ProductCard({ product }) {
+ *   const { addToCart } = useCheckout();
+ *
+ *   return (
+ *     <button onClick={() => addToCart(product.id, product.variantId, 1)}>
+ *       Add to Cart
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare function useCheckout(): UseCheckoutReturn;
+//# sourceMappingURL=react.d.ts.map
+//#endregion
+export { type AddToCartItem, type AuthLoginData, type AuthLogoutData, type AuthMode, type AuthRefreshData, type CartData, type Channel, type CheckoutActions, type CheckoutConfig, type CheckoutEventType, type CheckoutState, type CheckoutStore, type Environment, type ErrorData, type LoginMethod, type OrderData, type QuickBuyConfig, type SessionMode, UseCheckoutReturn, type UserInfo, checkoutStore, destroyCheckout, getCheckout, initCheckout, subscribeToCheckout, useCheckout };
+//# sourceMappingURL=react.d.cts.map

package/dist/react.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.cts","names":[],"sources":["../src/react.ts"],"sourcesContent":[],"mappings":";;;;;;;;UAgFiB,iBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6DD,WAAA,CAAA,GAAe"}

package/dist/react.d.ts

@@ -0,0 +1,69 @@
+import { a as destroyCheckout, c as subscribeToCheckout, i as checkoutStore, n as CheckoutState, o as getCheckout, r as CheckoutStore, s as initCheckout, t as CheckoutActions } from "./store.js";
+import { AddToCartItem, AuthLoginData, AuthLogoutData, AuthMode, AuthRefreshData, CartData, Channel, CheckoutConfig, CheckoutEventType, Environment, ErrorData, LoginMethod, OrderData, QuickBuyConfig, SessionMode, UserInfo } from "@commercengine/js";
+
+//#region src/react.d.ts
+
+/**
+ * Return type from useCheckout hook
+ */
+interface UseCheckoutReturn {
+  /** 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;
+  /** Open the cart drawer */
+  openCart: () => void;
+  /** Open the checkout drawer directly */
+  openCheckout: () => void;
+  /** Close the checkout overlay */
+  close: () => void;
+  /** Add item to cart */
+  addToCart: (productId: string, variantId: string | null, quantity?: number) => void;
+  /** Update authentication tokens */
+  updateTokens: (accessToken: string, refreshToken?: string) => void;
+}
+/**
+ * React hook for checkout integration
+ *
+ * Provides reactive access to checkout state and methods.
+ * No provider required - works anywhere in your component tree.
+ *
+ * @returns Checkout state and methods
+ *
+ * @example Basic usage
+ * ```tsx
+ * function CartButton() {
+ *   const { cartCount, openCart, isReady } = useCheckout();
+ *
+ *   return (
+ *     <button onClick={openCart} disabled={!isReady}>
+ *       Cart ({cartCount})
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
+ * @example Add to cart
+ * ```tsx
+ * function ProductCard({ product }) {
+ *   const { addToCart } = useCheckout();
+ *
+ *   return (
+ *     <button onClick={() => addToCart(product.id, product.variantId, 1)}>
+ *       Add to Cart
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare function useCheckout(): UseCheckoutReturn;
+//# sourceMappingURL=react.d.ts.map
+//#endregion
+export { type AddToCartItem, type AuthLoginData, type AuthLogoutData, type AuthMode, type AuthRefreshData, type CartData, type Channel, type CheckoutActions, type CheckoutConfig, type CheckoutEventType, type CheckoutState, type CheckoutStore, type Environment, type ErrorData, type LoginMethod, type OrderData, type QuickBuyConfig, type SessionMode, UseCheckoutReturn, type UserInfo, checkoutStore, destroyCheckout, getCheckout, initCheckout, subscribeToCheckout, useCheckout };
+//# sourceMappingURL=react.d.ts.map

package/dist/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","names":[],"sources":["../src/react.ts"],"sourcesContent":[],"mappings":";;;;;;;;UAgFiB,iBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6DD,WAAA,CAAA,GAAe"}