@doswiftly/storefront-sdk 11.2.0 → 11.4.0

package/dist/react/components/CartTotals.js

@@ -0,0 +1,38 @@
+/**
+ * `<CartTotals>` — render a description list (`<dl>`) of cart financial
+ * breakdown rows: subtotal, optional discount / shipping / tax, total.
+ *
+ * Renders only the rows you pass. `subtotal`, `total`, and `currency` are
+ * required; everything else is optional and elided when undefined or zero
+ * (discount specifically — pass zero to hide rather than showing "-0,00").
+ *
+ * Labels are passed by the consumer (i18n is its responsibility). The
+ * component defaults to English labels so it works out of the box during
+ * prototyping.
+ *
+ * @example
+ * ```tsx
+ * <CartTotals
+ *   subtotal={cart.cost.subtotal.amount * 100}
+ *   shipping={cart.cost.shipping?.amount * 100}
+ *   tax={cart.cost.tax?.amount * 100}
+ *   total={cart.cost.total.amount * 100}
+ *   currency={cart.cost.total.currencyCode}
+ *   labels={{ subtotal: 'Suma częściowa', shipping: 'Dostawa', tax: 'Podatek', total: 'Razem' }}
+ * />
+ * ```
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Money } from './Money';
+const DEFAULT_LABELS = {
+    subtotal: 'Subtotal',
+    discount: 'Discount',
+    shipping: 'Shipping',
+    tax: 'Tax',
+    total: 'Total',
+};
+export function CartTotals({ subtotal, discount, shipping, tax, total, currency, className, rowClassName, labels, }) {
+    const L = { ...DEFAULT_LABELS, ...labels };
+    return (_jsxs("dl", { className: className, children: [_jsxs("div", { className: rowClassName, children: [_jsx("dt", { children: L.subtotal }), _jsx("dd", { children: _jsx(Money, { amount: subtotal, currency: currency }) })] }), discount !== undefined && discount > 0 && (_jsxs("div", { className: rowClassName, children: [_jsx("dt", { children: L.discount }), _jsxs("dd", { children: [_jsx("span", { "aria-hidden": "true", children: "\u2212" }), _jsx(Money, { amount: discount, currency: currency })] })] })), shipping !== undefined && (_jsxs("div", { className: rowClassName, children: [_jsx("dt", { children: L.shipping }), _jsx("dd", { children: _jsx(Money, { amount: shipping, currency: currency }) })] })), tax !== undefined && (_jsxs("div", { className: rowClassName, children: [_jsx("dt", { children: L.tax }), _jsx("dd", { children: _jsx(Money, { amount: tax, currency: currency }) })] })), _jsxs("div", { className: rowClassName, children: [_jsx("dt", { children: L.total }), _jsx("dd", { children: _jsx(Money, { amount: total, currency: currency }) })] })] }));
+}

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

@@ -0,0 +1,42 @@
+/**
+ * `<Image>` — render a GraphQL `Image` payload as an `<img>` with thumbhash
+ * blur placeholder (via `thumbHashToDataURL` from core).
+ *
+ * Headless and framework-agnostic — does NOT depend on `next/image`. If you
+ * want Next.js `<Image>` optimisations, pass `data.url` to it directly; this
+ * component is for runtimes outside Next or when you don't need `next/image`'s
+ * trade-offs (CLS guard, prefetch).
+ *
+ * Lazy by default. Pass `priority` for above-the-fold images to switch to
+ * `loading="eager"` + `fetchPriority="high"`.
+ *
+ * @example
+ * ```tsx
+ * <Image data={product.featuredImage} sizes="(max-width: 768px) 100vw, 800px" />
+ * ```
+ */
+import type { CSSProperties } from 'react';
+import { type ImageData } from '../../core/image';
+export interface ImageComponentProps {
+    /** Image payload from a GraphQL query (`url`, `altText`, `width`, `height`, `thumbhash`). */
+    data: ImageData;
+    /** Responsive `sizes` attribute. Defaults to `100vw`. */
+    sizes?: string;
+    /** Class name for styling — keeps the component headless. */
+    className?: string;
+    /** Inline style override. Merged with the blur placeholder background. */
+    style?: CSSProperties;
+    /**
+     * Above-the-fold flag. When true: `loading="eager"` + `fetchPriority="high"`.
+     * When false (default): `loading="lazy"` + `fetchPriority="auto"`.
+     */
+    priority?: boolean;
+    /**
+     * Alt text override. Defaults to `data.altText`. Pass an empty string
+     * (`alt=""`) when the image is purely decorative — explicit empty alt is the
+     * correct accessibility signal.
+     */
+    alt?: string;
+}
+export declare function Image({ data, sizes, className, style, priority, alt }: ImageComponentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/react/components/Image.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEtE,MAAM,WAAW,mBAAmB;IAClC,6FAA6F;IAC7F,IAAI,EAAE,SAAS,CAAC;IAChB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,mBAAmB,2CA6B1F"}

package/dist/react/components/Image.js

@@ -0,0 +1,33 @@
+/**
+ * `<Image>` — render a GraphQL `Image` payload as an `<img>` with thumbhash
+ * blur placeholder (via `thumbHashToDataURL` from core).
+ *
+ * Headless and framework-agnostic — does NOT depend on `next/image`. If you
+ * want Next.js `<Image>` optimisations, pass `data.url` to it directly; this
+ * component is for runtimes outside Next or when you don't need `next/image`'s
+ * trade-offs (CLS guard, prefetch).
+ *
+ * Lazy by default. Pass `priority` for above-the-fold images to switch to
+ * `loading="eager"` + `fetchPriority="high"`.
+ *
+ * @example
+ * ```tsx
+ * <Image data={product.featuredImage} sizes="(max-width: 768px) 100vw, 800px" />
+ * ```
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { thumbHashToDataURL } from '../../core/image';
+export function Image({ data, sizes, className, style, priority, alt }) {
+    const blurUrl = data.thumbhash ? thumbHashToDataURL(data.thumbhash) : undefined;
+    const effectiveAlt = alt ?? data.altText ?? '';
+    const composedStyle = blurUrl
+        ? {
+            backgroundImage: `url(${blurUrl})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            ...style,
+        }
+        : style;
+    return (_jsx("img", { src: data.url, alt: effectiveAlt, width: data.width ?? undefined, height: data.height ?? undefined, sizes: sizes ?? '100vw', loading: priority ? 'eager' : 'lazy', decoding: "async", ...{ fetchpriority: priority ? 'high' : 'auto' }, style: composedStyle, className: className }));
+}

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

@@ -0,0 +1,32 @@
+/**
+ * `<Money>` — render a price in minor units (grosze / cents) as a locale-aware
+ * formatted string. Wraps `formatPrice` from core so consumers don't need to
+ * import the formatter manually.
+ *
+ * Headless: no styling, no currency context dependency. `currency` is required
+ * — render explicitly from your cart/product/shop data. This keeps the
+ * component usable both inside `StorefrontProvider` and in isolated rendering
+ * (server components, e-mail templates, PDFs).
+ *
+ * @example
+ * ```tsx
+ * <Money amount={9990} currency="PLN" />           // → "99,90 zł"
+ * <Money amount={1295} currency="USD" />           // → "$12.95"
+ * <Money amount={0} currency="EUR" />              // → "0,00 €"
+ * ```
+ */
+export interface MoneyProps {
+    /** Amount in minor units (grosze, cents). 9990 = 99.90 PLN. */
+    amount: number;
+    /** ISO 4217 currency code (PLN, EUR, USD, …). Required — no implicit default. */
+    currency: string;
+    /** Optional class for styling — keeps the component headless. */
+    className?: string;
+    /**
+     * HTML element to render. Defaults to `<span>` so the price flows inline.
+     * Pass `'div'` (or `'p'`) when the price is a block-level item.
+     */
+    as?: 'span' | 'div' | 'p' | 'strong' | 'em' | 'output';
+}
+export declare function Money({ amount, currency, className, as: As }: MoneyProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Money.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Money.d.ts","sourceRoot":"","sources":["../../../src/react/components/Money.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAMH,MAAM,WAAW,UAAU;IACzB,+DAA+D;IAC/D,MAAM,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,QAAQ,EAAE,MAAM,CAAC;IACjB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,GAAG,GAAG,QAAQ,GAAG,IAAI,GAAG,QAAQ,CAAC;CACxD;AAED,wBAAgB,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,EAAW,EAAE,EAAE,UAAU,2CAMjF"}

package/dist/react/components/Money.js

@@ -0,0 +1,27 @@
+/**
+ * `<Money>` — render a price in minor units (grosze / cents) as a locale-aware
+ * formatted string. Wraps `formatPrice` from core so consumers don't need to
+ * import the formatter manually.
+ *
+ * Headless: no styling, no currency context dependency. `currency` is required
+ * — render explicitly from your cart/product/shop data. This keeps the
+ * component usable both inside `StorefrontProvider` and in isolated rendering
+ * (server components, e-mail templates, PDFs).
+ *
+ * @example
+ * ```tsx
+ * <Money amount={9990} currency="PLN" />           // → "99,90 zł"
+ * <Money amount={1295} currency="USD" />           // → "$12.95"
+ * <Money amount={0} currency="EUR" />              // → "0,00 €"
+ * ```
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { formatPrice } from '../../core/format';
+export function Money({ amount, currency, className, as: As = 'span' }) {
+    const formatted = formatPrice({
+        amount: (amount / 100).toString(),
+        currencyCode: currency,
+    });
+    return _jsx(As, { className: className, children: formatted });
+}

package/dist/react/components/PriceDisplay.d.ts

@@ -0,0 +1,34 @@
+/**
+ * `<PriceDisplay>` — render a single price or a sale-price layout (current
+ * price + strikethrough compare-at). Composes `<Money>` so locale + currency
+ * formatting stays consistent with the rest of the SDK.
+ *
+ * @example
+ * ```tsx
+ * <PriceDisplay price={9990} currency="PLN" />
+ * // → "99,90 zł"
+ *
+ * <PriceDisplay price={7990} compareAtPrice={9990} currency="PLN" />
+ * // → "79,90 zł  <s>99,90 zł</s>"
+ * ```
+ */
+export interface PriceDisplayProps {
+    /** Current price in minor units. */
+    price: number;
+    /**
+     * Original price in minor units before the discount. When provided AND
+     * strictly greater than `price`, renders as strikethrough next to the
+     * current price. Otherwise ignored.
+     */
+    compareAtPrice?: number;
+    /** ISO 4217 currency code. */
+    currency: string;
+    /** Wrapping element class. */
+    className?: string;
+    /** Class for the *current* price portion. */
+    priceClassName?: string;
+    /** Class for the strikethrough compare-at portion. */
+    compareAtClassName?: string;
+}
+export declare function PriceDisplay({ price, compareAtPrice, currency, className, priceClassName, compareAtClassName, }: PriceDisplayProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PriceDisplay.d.ts.map

package/dist/react/components/PriceDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriceDisplay.d.ts","sourceRoot":"","sources":["../../../src/react/components/PriceDisplay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAMH,MAAM,WAAW,iBAAiB;IAChC,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sDAAsD;IACtD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,cAAc,EACd,QAAQ,EACR,SAAS,EACT,cAAc,EACd,kBAAkB,GACnB,EAAE,iBAAiB,2CAgBnB"}

package/dist/react/components/PriceDisplay.js

@@ -0,0 +1,21 @@
+/**
+ * `<PriceDisplay>` — render a single price or a sale-price layout (current
+ * price + strikethrough compare-at). Composes `<Money>` so locale + currency
+ * formatting stays consistent with the rest of the SDK.
+ *
+ * @example
+ * ```tsx
+ * <PriceDisplay price={9990} currency="PLN" />
+ * // → "99,90 zł"
+ *
+ * <PriceDisplay price={7990} compareAtPrice={9990} currency="PLN" />
+ * // → "79,90 zł  <s>99,90 zł</s>"
+ * ```
+ */
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Money } from './Money';
+export function PriceDisplay({ price, compareAtPrice, currency, className, priceClassName, compareAtClassName, }) {
+    const isOnSale = compareAtPrice !== undefined && compareAtPrice > price;
+    return (_jsxs("span", { className: className, children: [_jsx(Money, { amount: price, currency: currency, className: priceClassName }), isOnSale && (_jsxs(_Fragment, { children: [' ', _jsx("s", { className: compareAtClassName, children: _jsx(Money, { amount: compareAtPrice, currency: currency }) })] }))] }));
+}

package/dist/react/components/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Pre-built React components — headless, accessibility-aware, framework-agnostic.
+ *
+ * Every component is intentionally unstyled. Pass `className` (or `style`) to
+ * integrate with your CSS approach (Tailwind, CSS Modules, styled-components,
+ * vanilla CSS). Components compose `formatPrice` + `thumbHashToDataURL` from
+ * core and `useCartManager` from the hook layer.
+ */
+export { Money, type MoneyProps } from './Money';
+export { Image, type ImageComponentProps } from './Image';
+export { CartCount, type CartCountProps } from './CartCount';
+export { AddToCartButton, type AddToCartButtonProps } from './AddToCartButton';
+export { PriceDisplay, type PriceDisplayProps } from './PriceDisplay';
+export { CartTotals, type CartTotalsProps, type CartTotalsLabels } from './CartTotals';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/components/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,gBAAgB,EAAE,MAAM,cAAc,CAAC"}

package/dist/react/components/index.js

@@ -0,0 +1,14 @@
+/**
+ * Pre-built React components — headless, accessibility-aware, framework-agnostic.
+ *
+ * Every component is intentionally unstyled. Pass `className` (or `style`) to
+ * integrate with your CSS approach (Tailwind, CSS Modules, styled-components,
+ * vanilla CSS). Components compose `formatPrice` + `thumbHashToDataURL` from
+ * core and `useCartManager` from the hook layer.
+ */
+export { Money } from './Money';
+export { Image } from './Image';
+export { CartCount } from './CartCount';
+export { AddToCartButton } from './AddToCartButton';
+export { PriceDisplay } from './PriceDisplay';
+export { CartTotals } from './CartTotals';

package/dist/react/hooks/use-auth.d.ts

@@ -1,56 +1,29 @@
 /**
- * useAuth — wraps AuthClient + updates auth store.
+ * useAuth — convenience facade composing `useLogin`, `useLogout`, and
+ * `useRefreshToken`. Preserves the pre-11.2 API for backward compatibility.
  *
- * Centralizes login/logout/renew with dual-layer persistence:
- * - httpOnly cookie (for SSR/middleware) — via onSetToken/onClearToken callbacks
- * - Zustand store (for client-side state)
+ * **Prefer the focused hooks** in new code — they tree-shake better, isolate
+ * state, and keep dependency arrays smaller:
  *
- * Does NOT use React Query — plain async + store updates.
- * Template can wrap in useMutation() if React Query features are needed.
- *
- * @example
  * ```tsx
- * const { login, logout, isLoading } = useAuth();
+ * // Smaller bundle, single-responsibility:
+ * const { login, isLoggingIn } = useLogin({ onSetToken });
+ * const { logout } = useLogout({ onClearToken });
  *
- * const result = await login('user@example.com', 'password');
- * if (result.success) router.push('/account');
+ * // Convenience aggregator (legacy / mixed flows):
+ * const { login, logout, refreshToken, isLoading } = useAuth({ onSetToken, onClearToken });
  * ```
+ *
+ * Centralizes dual-layer persistence:
+ *   - httpOnly cookie (for SSR/middleware) — via `onSetToken`/`onClearToken`
+ *     callbacks that hit your BFF route handlers
+ *   - Zustand auth store (for client-side state).
  */
-export interface UseAuthOptions {
-    /**
-     * Called after successful login/refreshToken with the new access token.
-     * Use to set httpOnly cookie via API route.
-     */
-    onSetToken?: (token: string) => Promise<void>;
-    /**
-     * Called after logout to clear httpOnly cookie.
-     */
-    onClearToken?: () => Promise<void>;
-}
-export interface LoginResult {
-    success: boolean;
-    userErrors: Array<{
-        message: string;
-        field?: string[];
-    }>;
-    accessToken?: string;
-    expiresAt?: string;
-}
-export interface LogoutResult {
-    success: boolean;
-    userErrors: Array<{
-        message: string;
-        field?: string[];
-    }>;
-}
-export interface TokenRefreshResult {
-    success: boolean;
-    userErrors: Array<{
-        message: string;
-        field?: string[];
-    }>;
-    accessToken?: string;
-    expiresAt?: string;
+import { type UseLoginOptions, type LoginResult } from './use-login';
+import { type UseLogoutOptions, type LogoutResult } from './use-logout';
+import { type UseRefreshTokenOptions, type TokenRefreshResult } from './use-refresh-token';
+export type { LoginResult, LogoutResult, TokenRefreshResult };
+export interface UseAuthOptions extends UseLoginOptions, UseLogoutOptions, UseRefreshTokenOptions {
 }
 export declare function useAuth(options?: UseAuthOptions): {
     login: (email: string, password: string) => Promise<LoginResult>;

package/dist/react/hooks/use-auth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-auth.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/use-auth.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AASH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,CAAC;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,CAAC;CAC1D;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,CAAC;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,OAAO,CAAC,OAAO,GAAE,cAAmB;mBAUV,MAAM,YAAY,MAAM,KAAG,OAAO,CAAC,WAAW,CAAC;kBA2DlD,OAAO,CAAC,YAAY,CAAC;wBA2Bf,OAAO,CAAC,kBAAkB,CAAC;;;;;;EAwDvE"}
+{"version":3,"file":"use-auth.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/use-auth.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH,OAAO,EAAY,KAAK,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/E,OAAO,EAAa,KAAK,gBAAgB,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AACnF,OAAO,EAAmB,KAAK,sBAAsB,EAAE,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE5G,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAE9D,MAAM,WAAW,cAAe,SAAQ,eAAe,EAAE,gBAAgB,EAAE,sBAAsB;CAAG;AAEpG,wBAAgB,OAAO,CAAC,OAAO,GAAE,cAAmB;;;;;;;;;EAoBnD"}

package/dist/react/hooks/use-auth.js

@@ -1,153 +1,36 @@
 /**
- * useAuth — wraps AuthClient + updates auth store.
+ * useAuth — convenience facade composing `useLogin`, `useLogout`, and
+ * `useRefreshToken`. Preserves the pre-11.2 API for backward compatibility.
  *
- * Centralizes login/logout/renew with dual-layer persistence:
- * - httpOnly cookie (for SSR/middleware) — via onSetToken/onClearToken callbacks
- * - Zustand store (for client-side state)
+ * **Prefer the focused hooks** in new code — they tree-shake better, isolate
+ * state, and keep dependency arrays smaller:
  *
- * Does NOT use React Query — plain async + store updates.
- * Template can wrap in useMutation() if React Query features are needed.
- *
- * @example
  * ```tsx
- * const { login, logout, isLoading } = useAuth();
+ * // Smaller bundle, single-responsibility:
+ * const { login, isLoggingIn } = useLogin({ onSetToken });
+ * const { logout } = useLogout({ onClearToken });
  *
- * const result = await login('user@example.com', 'password');
- * if (result.success) router.push('/account');
+ * // Convenience aggregator (legacy / mixed flows):
+ * const { login, logout, refreshToken, isLoading } = useAuth({ onSetToken, onClearToken });
  * ```
+ *
+ * Centralizes dual-layer persistence:
+ *   - httpOnly cookie (for SSR/middleware) — via `onSetToken`/`onClearToken`
+ *     callbacks that hit your BFF route handlers
+ *   - Zustand auth store (for client-side state).
  */
 'use client';
-import { useState, useCallback } from 'react';
-import { useStorefrontClientContext } from '../providers/storefront-client-provider';
-import { useAuthStore, useAuthStoreApi } from '../stores/store-context';
-import { StorefrontError } from '../../core/errors';
+import { useLogin } from './use-login';
+import { useLogout } from './use-logout';
+import { useRefreshToken } from './use-refresh-token';
 export function useAuth(options = {}) {
-    const { authClient } = useStorefrontClientContext();
-    const { setAuth, clearAuth } = useAuthStore();
-    const authStore = useAuthStoreApi();
-    const [isLoggingIn, setIsLoggingIn] = useState(false);
-    const [isLoggingOut, setIsLoggingOut] = useState(false);
-    const [isRefreshingToken, setIsRenewingToken] = useState(false);
-    const [error, setError] = useState(null);
-    const login = useCallback(async (email, password) => {
-        setError(null);
-        setIsLoggingIn(true);
-        try {
-            const result = await authClient.login(email, password);
-            // Set httpOnly cookie
-            if (options.onSetToken) {
-                await options.onSetToken(result.accessToken);
-            }
-            // Fetch customer data and set store
-            try {
-                const customer = await authClient.getCustomer();
-                if (customer) {
-                    setAuth({
-                        id: customer.id,
-                        email: customer.email,
-                        firstName: customer.firstName ?? undefined,
-                        lastName: customer.lastName ?? undefined,
-                        phone: customer.phone ?? undefined,
-                    }, result.accessToken);
-                }
-                else {
-                    setAuth({ id: '', email }, result.accessToken);
-                }
-            }
-            catch {
-                // Customer fetch failed — store minimal data
-                setAuth({ id: '', email }, result.accessToken);
-            }
-            return {
-                success: true,
-                userErrors: [],
-                accessToken: result.accessToken,
-                expiresAt: result.expiresAt,
-            };
-        }
-        catch (err) {
-            if (err instanceof StorefrontError && err.hasUserErrors) {
-                return {
-                    success: false,
-                    userErrors: err.userErrors.map((e) => ({
-                        message: e.message,
-                        field: e.field,
-                    })),
-                };
-            }
-            const message = err instanceof Error ? err.message : 'Login failed';
-            setError(message);
-            return { success: false, userErrors: [{ message }] };
-        }
-        finally {
-            setIsLoggingIn(false);
-        }
-    }, [authClient, setAuth, options]);
-    const logout = useCallback(async () => {
-        setError(null);
-        setIsLoggingOut(true);
-        try {
-            // Auth context resolved server-side from cookie/Bearer — no token arg needed
-            await authClient.logout();
-            // Clear httpOnly cookie
-            if (options.onClearToken) {
-                await options.onClearToken();
-            }
-            clearAuth();
-            return { success: true, userErrors: [] };
-        }
-        catch (err) {
-            // Even on error, clear local state
-            clearAuth();
-            const message = err instanceof Error ? err.message : 'Logout failed';
-            setError(message);
-            return { success: false, userErrors: [{ message }] };
-        }
-        finally {
-            setIsLoggingOut(false);
-        }
-    }, [authClient, clearAuth, options, authStore]);
-    const refreshToken = useCallback(async () => {
-        setError(null);
-        setIsRenewingToken(true);
-        try {
-            // Auth context resolved server-side from cookie/Bearer — no token arg needed.
-            // If no active session, backend will return 401 and refreshToken throws.
-            const result = await authClient.refreshToken();
-            // Update httpOnly cookie
-            if (options.onSetToken) {
-                await options.onSetToken(result.accessToken);
-            }
-            // Update store (keep customer data, update token)
-            const currentCustomer = authStore.getState().customer;
-            if (currentCustomer) {
-                setAuth(currentCustomer, result.accessToken);
-            }
-            return {
-                success: true,
-                userErrors: [],
-                accessToken: result.accessToken,
-                expiresAt: result.expiresAt,
-            };
-        }
-        catch (err) {
-            if (err instanceof StorefrontError && err.hasUserErrors) {
-                return {
-                    success: false,
-                    userErrors: err.userErrors.map((e) => ({
-                        message: e.message,
-                        field: e.field,
-                    })),
-                };
-            }
-            const message = err instanceof Error ? err.message : 'Token renewal failed';
-            setError(message);
-            return { success: false, userErrors: [{ message }] };
-        }
-        finally {
-            setIsRenewingToken(false);
-        }
-    }, [authClient, setAuth, options, authStore]);
+    const { login, isLoggingIn, error: loginError } = useLogin(options);
+    const { logout, isLoggingOut, error: logoutError } = useLogout(options);
+    const { refreshToken, isRefreshingToken, error: refreshError } = useRefreshToken(options);
+    // Aggregate the most-recent error across the three flows. Each focused hook
+    // tracks its own error independently, but legacy consumers expect a single
+    // `error` field — surface whichever is non-null (priority: login > logout > refresh).
+    const error = loginError ?? logoutError ?? refreshError;
     return {
         login,
         logout,

package/dist/react/hooks/use-cart-manager.d.ts

@@ -38,6 +38,37 @@
 import type { Cart, CartLineInput, CartLineUpdateInput, CartBuyerIdentityInput, CartAddressInput } from '../../core/cart/types';
 import type { CartMutationOutcome } from '../../core/cart/cart-client';
 import { type CartExpiredEvent } from '../../core/cart/cart-recovery';
+/**
+ * Names of mutations exposed by the hook — narrows `status.operation` for
+ * exhaustive consumer-side switching (e.g. operation-specific spinners).
+ */
+export type CartManagerOperation = 'addItem' | 'updateItem' | 'removeItem' | 'updateBuyerIdentity' | 'setShippingAddress' | 'updateDiscountCodes' | 'updateNote';
+/**
+ * Tagged union of cart mutation lifecycle states. Lets callers do exhaustive
+ * switching without remembering which boolean flag pairs with which:
+ *
+ * ```tsx
+ * const { status } = useCartManager();
+ * if (status.type === 'loading') return <Spinner label={status.operation} />;
+ * if (status.type === 'error') return <ErrorBanner error={status.error} />;
+ * // narrowed here: status.type ∈ { 'idle', 'success' }
+ * ```
+ *
+ * `idle` is the initial state and the state after `clearCart()`.
+ */
+export type CartManagerStatus = {
+    type: 'idle';
+} | {
+    type: 'loading';
+    operation: CartManagerOperation;
+} | {
+    type: 'error';
+    operation: CartManagerOperation;
+    error: Error;
+} | {
+    type: 'success';
+    operation: CartManagerOperation;
+};
 export interface UseCartManagerResult {
     getCart: () => Promise<Cart | null>;
     getCartId: () => string | null;
@@ -50,7 +81,10 @@ export interface UseCartManagerResult {
     removeItem: (lineIds: string[]) => Promise<CartMutationOutcome>;
     clearCart: () => void;
     onExpired: (listener: (event: CartExpiredEvent) => void) => () => void;
+    status: CartManagerStatus;
+    /** `true` when status.type === 'loading'. */
     isLoading: boolean;
+    /** Error message when status.type === 'error', otherwise null. */
     error: string | null;
 }
 export declare function useCartManager(): UseCartManagerResult;

package/dist/react/hooks/use-cart-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-cart-manager.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/use-cart-manager.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAMH,OAAO,KAAK,EACV,IAAI,EACJ,aAAa,EACb,mBAAmB,EACnB,sBAAsB,EACtB,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAGL,KAAK,gBAAgB,EAEtB,MAAM,+BAA+B,CAAC;AAGvC,MAAM,WAAW,oBAAoB;IAEnC,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACpC,SAAS,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;IAG/B,OAAO,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAClE,mBAAmB,EAAE,CAAC,aAAa,EAAE,sBAAsB,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAC7F,kBAAkB,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAChF,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACvE,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAG3D,UAAU,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAC3E,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAGhE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,KAAK,MAAM,IAAI,CAAC;IAGvE,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,cAAc,IAAI,oBAAoB,CA6KrD"}
+{"version":3,"file":"use-cart-manager.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/use-cart-manager.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAMH,OAAO,KAAK,EACV,IAAI,EACJ,aAAa,EACb,mBAAmB,EACnB,sBAAsB,EACtB,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAGL,KAAK,gBAAgB,EAEtB,MAAM,+BAA+B,CAAC;AAGvC;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAC5B,SAAS,GACT,YAAY,GACZ,YAAY,GACZ,qBAAqB,GACrB,oBAAoB,GACpB,qBAAqB,GACrB,YAAY,CAAC;AAEjB;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,iBAAiB,GACzB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,SAAS,EAAE,oBAAoB,CAAA;CAAE,GACpD;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,oBAAoB,CAAC;IAAC,KAAK,EAAE,KAAK,CAAA;CAAE,GAChE;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,SAAS,EAAE,oBAAoB,CAAA;CAAE,CAAC;AAEzD,MAAM,WAAW,oBAAoB;IAEnC,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACpC,SAAS,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;IAG/B,OAAO,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAClE,mBAAmB,EAAE,CAAC,aAAa,EAAE,sBAAsB,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAC7F,kBAAkB,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAChF,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACvE,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAG3D,UAAU,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAC3E,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAGhE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,KAAK,MAAM,IAAI,CAAC;IAGvE,MAAM,EAAE,iBAAiB,CAAC;IAG1B,6CAA6C;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,cAAc,IAAI,oBAAoB,CA0LrD"}