@doswiftly/storefront-sdk 11.1.0 → 11.3.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"CartCount.d.ts","sourceRoot":"","sources":["../../../src/react/components/CartCount.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH,MAAM,WAAW,cAAc;IAC7B,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,SAAS,EACT,SAAS,EACT,KAAK,EACL,aAAqB,GACtB,EAAE,cAAc,kDAYhB"}

package/dist/react/components/CartCount.js

@@ -0,0 +1,23 @@
+/**
+ * `<CartCount>` — render the cart item count with screen-reader-friendly
+ * semantics (`aria-live="polite"`).
+ *
+ * Receives `count` explicitly rather than reading from a store — the SDK's
+ * cart store tracks `cartId`, not line totals (which come from a GraphQL
+ * query in the consumer). This keeps the component reusable across data
+ * layers (React Query, SWR, Apollo, custom fetcher).
+ *
+ * @example
+ * ```tsx
+ * const { data } = useCartQuery(cartId);
+ * <CartCount count={data?.totalQuantity ?? 0} />
+ * ```
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CartCount({ count, className, formatter, label, hideWhenEmpty = false, }) {
+    if (hideWhenEmpty && count === 0)
+        return null;
+    const text = formatter ? formatter(count) : String(count);
+    return (_jsxs("span", { className: className, "aria-live": "polite", "aria-atomic": "true", children: [_jsx("span", { "aria-hidden": "true", children: text }), _jsxs("span", { className: "sr-only", children: [text, label ? ` ${label}` : ''] })] }));
+}

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

@@ -0,0 +1,54 @@
+/**
+ * `<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' }}
+ * />
+ * ```
+ */
+import type { ReactNode } from 'react';
+export interface CartTotalsLabels {
+    subtotal?: ReactNode;
+    discount?: ReactNode;
+    shipping?: ReactNode;
+    tax?: ReactNode;
+    total?: ReactNode;
+}
+export interface CartTotalsProps {
+    /** Subtotal in minor units. */
+    subtotal: number;
+    /** Discount in minor units. Rendered as `−<amount>` when > 0. */
+    discount?: number;
+    /** Shipping in minor units. Rendered when provided (incl. 0 = free shipping). */
+    shipping?: number;
+    /** Tax in minor units. Rendered when provided. */
+    tax?: number;
+    /** Total in minor units. */
+    total: number;
+    /** ISO 4217 currency code shared by every line. */
+    currency: string;
+    /** Class applied to the wrapping `<dl>`. */
+    className?: string;
+    /** Class applied to each `<div>` row (subtotal, discount, etc.). */
+    rowClassName?: string;
+    /** Custom row labels. Defaults to English. */
+    labels?: CartTotalsLabels;
+}
+export declare function CartTotals({ subtotal, discount, shipping, tax, total, currency, className, rowClassName, labels, }: CartTotalsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CartTotals.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CartTotals.d.ts","sourceRoot":"","sources":["../../../src/react/components/CartTotals.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,QAAQ,EAAE,MAAM,CAAC;IACjB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAUD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,MAAM,GACP,EAAE,eAAe,2CAoCjB"}

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/cookies.d.ts

@@ -23,6 +23,27 @@ export declare function setCookie(name: string, value: string, options?: {
  * Delete cookie (client-side only).
  */
 export declare function deleteCookie(name: string, path?: string): void;
+import type { CartCookieStore } from '../core/cart/cart-recovery';
+/**
+ * Build a browser-side `CartCookieStore` backed by `document.cookie`.
+ *
+ * SSR-safe: when `document` is unavailable (Node / Edge SSR) `get` returns null
+ * and `set`/`clear` are no-ops — the runner falls back to creating a cart on
+ * first client-side interaction.
+ *
+ * Defaults: `maxAge = CART_COOKIE_MAX_AGE` (30 days), `samesite=lax`, `path=/`,
+ * `secure` auto-detected from `location.protocol`. Pass per-call `maxAge` via
+ * `set(cartId, { maxAge })` if needed.
+ *
+ * @example
+ * ```tsx
+ * const runner = createCartRecoveryRunner({
+ *   cartClient,
+ *   cookieStore: createBrowserCartCookieStore(),
+ * });
+ * ```
+ */
+export declare function createBrowserCartCookieStore(): CartCookieStore;
 /**
  * Get preferred currency from cookie (async — works with Next.js cookies()).
  * Falls back to document.cookie on client.

package/dist/react/cookies.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cookies.d.ts","sourceRoot":"","sources":["../../src/react/cookies.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAIrD;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,OAAO,GAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAO,GACpF,IAAI,CAON;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,SAAM,GAAG,IAAI,CAG3D;AAKD;;;GAGG;AACH,wBAAsB,0BAA0B,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAYzE;AAED;;;;;;;;;;;;GAYG;AACH,wBAAsB,wBAAwB,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAYvE"}
+{"version":3,"file":"cookies.d.ts","sourceRoot":"","sources":["../../src/react/cookies.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAIrD;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,OAAO,GAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAO,GACpF,IAAI,CAON;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,SAAM,GAAG,IAAI,CAG3D;AAID,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,4BAA4B,IAAI,eAAe,CAQ9D;AAED;;;GAGG;AACH,wBAAsB,0BAA0B,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAYzE;AAED;;;;;;;;;;;;GAYG;AACH,wBAAsB,wBAAwB,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAYvE"}

package/dist/react/cookies.js

@@ -36,7 +36,35 @@ export function deleteCookie(name, path = '/') {
     document.cookie = `${name}=;max-age=0;path=${path}`;
 }
 import { CURRENCY_COOKIE_NAME } from '../core/currency/cookie-config';
-import { CART_COOKIE_NAME } from '../core/cart/cookie-config';
+import { CART_COOKIE_NAME, CART_COOKIE_MAX_AGE } from '../core/cart/cookie-config';
+/**
+ * Build a browser-side `CartCookieStore` backed by `document.cookie`.
+ *
+ * SSR-safe: when `document` is unavailable (Node / Edge SSR) `get` returns null
+ * and `set`/`clear` are no-ops — the runner falls back to creating a cart on
+ * first client-side interaction.
+ *
+ * Defaults: `maxAge = CART_COOKIE_MAX_AGE` (30 days), `samesite=lax`, `path=/`,
+ * `secure` auto-detected from `location.protocol`. Pass per-call `maxAge` via
+ * `set(cartId, { maxAge })` if needed.
+ *
+ * @example
+ * ```tsx
+ * const runner = createCartRecoveryRunner({
+ *   cartClient,
+ *   cookieStore: createBrowserCartCookieStore(),
+ * });
+ * ```
+ */
+export function createBrowserCartCookieStore() {
+    return {
+        get: () => getCookie(CART_COOKIE_NAME),
+        set: (cartId, options) => {
+            setCookie(CART_COOKIE_NAME, cartId, { maxAge: options?.maxAge ?? CART_COOKIE_MAX_AGE });
+        },
+        clear: () => deleteCookie(CART_COOKIE_NAME),
+    };
+}
 /**
  * Get preferred currency from cookie (async — works with Next.js cookies()).
  * Falls back to document.cookie on client.

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"}