@develemit/storefront 0.0.0-stage → 0.3.0

package/README.md

@@ -1,3 +1,266 @@
-# Temporary Holding Version
+# @develemit/storefront
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Brand-agnostic storefront UI and commerce logic, built so it can be extracted
+and published as a standalone package.
+
+## Boundary rules
+
+- No client branding, copy, colors, or product data in this package.
+  The consuming app supplies those through props, theme tokens, and data adapters.
+- No imports from `apps/*` or other app-specific packages.
+- React, React DOM, and Next are peer dependencies, never bundled.
+
+## Commands
+
+- `pnpm exec nx build storefront` — library build to `packages/storefront/dist`
+- `pnpm exec nx test storefront`
+
+## Theme contract
+
+Import `@develemit/storefront/styles.css` for neutral defaults, then override
+the variables in the host app (or pass a `StorefrontTheme` through
+`themeToCssVars()`).
+
+| Variable                      | Purpose                                           |
+| ----------------------------- | ------------------------------------------------- |
+| `--sf-color-bg`               | Page background                                   |
+| `--sf-color-surface`          | Cards and raised surfaces                         |
+| `--sf-color-fg`               | Primary text                                      |
+| `--sf-color-muted`            | Secondary text                                    |
+| `--sf-color-accent`           | Buttons and links                                 |
+| `--sf-color-accent-fg`        | Text on accent backgrounds                        |
+| `--sf-color-border`           | Borders and dividers                              |
+| `--sf-color-sold`             | Sold / unavailable treatment                      |
+| `--sf-radius`                 | Corner radius                                     |
+| `--sf-font-display`           | Headings font stack                               |
+| `--sf-font-body`              | Body font stack                                   |
+| `--sf-space-unit`             | Base spacing unit                                 |
+| `--sf-motion-duration`        | Drawer motion (default `0ms`)                     |
+| `--sf-color-focus`            | Gallery focus ring (default `currentColor`)       |
+| `--sf-card-hover-lift`        | Card hover lift (default `0px`)                   |
+| `--sf-card-hover-shadow`      | Card hover shadow (default `none`)                |
+| `--sf-card-image-hover-scale` | Card image hover zoom (default `1`)               |
+| `--sf-sold-opacity`           | Sold card image opacity (default `0.55`)          |
+| `--sf-sold-filter`            | Sold card image filter (default `grayscale(0.6)`) |
+| `--sf-grid-columns-mobile`    | Grid columns below 40rem (default `1`)            |
+
+## Components
+
+`PriceTag`, `AvailabilityBadge`, `ProductCard`, `ProductGrid`,
+`CategoryFilter`, and `ProductGallery` are styled only through the `--sf-*`
+variables. Wrap them in `StorefrontProvider` to supply framework adapters;
+without it they fall back to plain `<a>` and `<img>`.
+
+Example Next.js host setup (host code, not part of this package):
+
+```tsx
+import Link from 'next/link';
+import Image from 'next/image';
+import { StorefrontProvider } from '@develemit/storefront';
+import '@develemit/storefront/styles.css';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <StorefrontProvider
+      locale="en-US"
+      renderLink={({ href, children, className }) => (
+        <Link href={href} className={className}>
+          {children}
+        </Link>
+      )}
+      renderImage={({ src, alt, sizes, className }) => (
+        <Image src={src} alt={alt} sizes={sizes} className={className} fill />
+      )}
+      hrefs={{
+        product: (slug) => `/shop/${slug}`,
+        category: (slug) => (slug ? `/shop?category=${slug}` : '/shop'),
+      }}
+    >
+      {children}
+    </StorefrontProvider>
+  );
+}
+```
+
+`AvailabilityBadge` and the components that embed it take a `labels` prop to
+override the default copy ("One of a kind", "Sold", "On hold", "Available").
+`CategoryFilter` renders buttons when `onSelect` is passed (controlled mode) and
+links otherwise.
+
+## Server-safe helpers
+
+The main entry carries a `"use client"` directive, so in React Server
+Components its exports are client references and cannot be called. Pure helpers
+live in a directive-free entry:
+
+```ts
+import { formatPrice, sortForDisplay } from '@develemit/storefront/format';
+
+formatPrice(2500, 'USD'); // "$25.00"
+```
+
+Both are still exported from the main entry for client components.
+
+## API client
+
+`createCommerceClient` lives in a separate, React-free entry so server code can
+use it without pulling in the UI:
+
+```ts
+import { createCommerceClient } from '@develemit/storefront/client';
+
+const client = createCommerceClient({ baseUrl: 'https://example.com/api' });
+const { items, nextCursor } = await client.listProducts({
+  category: 'rings',
+  limit: 24, // default 48, max 100
+  // cursor: nextCursor from the previous page
+});
+await client.getProduct('sample-piece'); // throws NotFoundError on 404
+await client.listCategories();
+await client.createCheckout([{ productId: 'p1', quantity: 1 }]); // { url }
+await client.getOrderBySession('cs_test_123'); // order summary
+```
+
+`baseUrl` is where the commerce server plugins are mounted; the client appends
+`/catalog/...`, `/checkout`, and `/orders/...`. Responses are parsed with the
+contract schemas, so a drifting server fails loudly. Other non-2xx responses
+throw `CommerceApiError`.
+
+`createCheckout` throws `CheckoutConflictError` (a 409) when some items are
+sold or held by another buyer; its `productIds` lists them so the cart can drop
+them. Send only ids and quantities: the server prices every line itself.
+Redirect the shopper to the returned `url`.
+
+## Images in production
+
+The default image adapter is a plain `<img loading="lazy" decoding="async">`
+(`priority` switches to `loading="eager"` and `fetchpriority="high"`). It does
+not resize. Production hosts **must** supply a resizing `renderImage` (such as
+`next/image`) or serve through a resizing CDN; otherwise every card downloads
+the full-size original, and admin uploads can be up to 8MB.
+
+Pass accurate `sizes` so the adapter picks a small variant. For `ProductGrid`,
+the sizes should match your column layout, for example
+`(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw`.
+
+## Views
+
+`ShopView`, `ProductDetailView`, and `FeaturedProducts` take plain data plus
+slots (`header`, `intro`, `emptyState`, `actions`, `afterDetails`).
+`ShopView` lists sold items last (`sortForDisplay`).
+
+### Render a shop in a Next app
+
+```tsx
+// app/shop/page.tsx (server component)
+import { createCommerceClient } from '@develemit/storefront/client';
+import { ShopView } from '@develemit/storefront';
+
+const client = createCommerceClient({ baseUrl: process.env.COMMERCE_API_URL! });
+
+export default async function ShopPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ category?: string; cursor?: string }>;
+}) {
+  const { category, cursor } = await searchParams;
+  const [page, categories] = await Promise.all([
+    client.listProducts({ category, cursor }),
+    client.listCategories(),
+  ]);
+  return (
+    <ShopView
+      products={page.items}
+      nextHref={
+        page.nextCursor
+          ? `/shop?cursor=${encodeURIComponent(page.nextCursor)}`
+          : undefined
+      }
+      categories={categories}
+      activeCategory={category}
+      slots={{ header: <h1>Shop</h1> }}
+    />
+  );
+}
+```
+
+```tsx
+// app/shop/[slug]/page.tsx
+import { notFound } from 'next/navigation';
+import {
+  createCommerceClient,
+  NotFoundError,
+} from '@develemit/storefront/client';
+import { ProductDetailView } from '@develemit/storefront';
+
+export default async function ProductPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  try {
+    const product = await client.getProduct(slug);
+    return <ProductDetailView product={product} />;
+  } catch (e) {
+    if (e instanceof NotFoundError) notFound();
+    throw e;
+  }
+}
+```
+
+## Cart
+
+Wrap the app in `CartProvider` (inside `StorefrontProvider`). State is a
+snapshot of `CartLine`s; prices and availability are re-verified server-side
+at checkout. Persistence goes through a `CartStorage` (`load`/`save`); the
+default is `localStorageCartStorage(key)`, which hydrates after mount and never
+touches `window` during render.
+
+```tsx
+<CartProvider>
+  <CartButton />
+  <CartDrawer summary={{ onCheckout, checkoutLabel: 'Checkout' }} />
+</CartProvider>
+
+<ProductDetailView
+  product={product}
+  slots={{ actions: <AddToCartButton product={product} /> }}
+/>
+```
+
+`useCart()` exposes `add` (returns `{ added, capped, reason? }`), `remove`,
+`setQuantity`, `clear`, `open`/`close`, and the derived `itemCount` and
+`subtotalCents`. A product's `quantity` is the line's `maxQuantity`, so
+one-of-a-kind items can only be added once. Every label is overridable
+through a `labels` prop.
+
+### Polish hooks
+
+- `CartDrawer` `slots={{ empty, summaryNote }}`: `empty` replaces the
+  `labels.empty` text (for example with a link back to the shop); `summaryNote`
+  renders under the subtotal and Checkout button. An empty cart shows no
+  summary or Checkout button. Close and Remove are at least 44×44px.
+- `CartButton` `icon` (rendered before the label), `labelHidden` (visually
+  hides the label, keeping an accessible name like "Cart, 2 items") and
+  `hideZeroCount` (omits the count at 0; the accessible name becomes
+  "Cart, empty").
+- `--sf-motion-duration` (default `0ms`, no motion) drives the drawer's
+  slide-in and the backdrop's fade, in and out. It is forced to `0ms` under
+  `prefers-reduced-motion: reduce`. Example: `--sf-motion-duration: 200ms`.
+
+### Catalog presentation hooks
+
+- Card hover: `--sf-card-hover-lift`, `--sf-card-hover-shadow` and
+  `--sf-card-image-hover-scale` apply on `:hover` and `:focus-within`, animated
+  with `--sf-motion-duration` (off under `prefers-reduced-motion: reduce`).
+- Sold treatment: `--sf-sold-opacity` and `--sf-sold-filter` style the sold
+  card image.
+- `--sf-grid-columns-mobile` sets the column count below 40rem.
+- `CategoryFilter` `formatLabel(category)` and `sortCategories(a, b)` change
+  the label text and order (the input array is not mutated); `allLabel` renames
+  the All item. `ShopView` forwards them as `formatCategoryLabel`,
+  `sortCategories` and `allLabel`.
+- `ShopView`, `FeaturedProducts` and `ProductDetailView` accept
+  `labels?: Partial<AvailabilityLabels>` for the availability badge.
+- The gallery focus ring uses `--sf-color-focus`.

package/dist/cart/cart-provider.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { CartLine } from '@develemit/commerce-contracts';
+import { AddResult } from './cart-reducer';
+import { CartStorage } from './cart-storage';
+export interface CartContextValue {
+    lines: CartLine[];
+    itemCount: number;
+    subtotalCents: number;
+    currency: string | null;
+    hydrated: boolean;
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    add: (line: CartLine) => AddResult;
+    remove: (productId: string) => void;
+    setQuantity: (productId: string, quantity: number) => void;
+    clear: () => void;
+}
+export interface CartProviderProps {
+    storage?: CartStorage;
+    children: ReactNode;
+}
+export declare function CartProvider({ storage, children, }: CartProviderProps): import('react').JSX.Element;
+export declare function useCart(): CartContextValue;

package/dist/cart/cart-reducer.d.ts

@@ -0,0 +1,31 @@
+import { CartLine } from '@develemit/commerce-contracts';
+export interface CartState {
+    lines: CartLine[];
+}
+export type CartAction = {
+    type: 'add';
+    line: CartLine;
+} | {
+    type: 'remove';
+    productId: string;
+} | {
+    type: 'setQuantity';
+    productId: string;
+    quantity: number;
+} | {
+    type: 'clear';
+} | {
+    type: 'hydrate';
+    state: CartState;
+};
+export interface AddResult {
+    state: CartState;
+    added: boolean;
+    capped: boolean;
+    reason?: 'currency-mismatch';
+}
+export declare const emptyCart: CartState;
+export declare function addLine(state: CartState, line: CartLine): AddResult;
+export declare function cartReducer(state: CartState, action: CartAction): CartState;
+export declare function subtotalCents(state: CartState): number;
+export declare function itemCount(state: CartState): number;

package/dist/cart/cart-storage.d.ts

@@ -0,0 +1,6 @@
+import { CartState } from './cart-reducer';
+export interface CartStorage {
+    load: () => CartState | Promise<CartState>;
+    save: (state: CartState) => void | Promise<void>;
+}
+export declare function localStorageCartStorage(key?: string): CartStorage;

package/dist/client/commerce-client.d.ts

@@ -0,0 +1,13 @@
+import { Category, CheckoutRequest, CheckoutResponse, OrderSummary, ProductCardPage, Product, ProductListQuery } from '@develemit/commerce-contracts';
+export interface CommerceClientOptions {
+    baseUrl: string;
+    fetch?: typeof fetch;
+}
+export interface CommerceClient {
+    listProducts(query?: ProductListQuery): Promise<ProductCardPage>;
+    getProduct(slug: string): Promise<Product>;
+    listCategories(): Promise<Category[]>;
+    createCheckout(items: CheckoutRequest['items']): Promise<CheckoutResponse>;
+    getOrderBySession(sessionId: string): Promise<OrderSummary>;
+}
+export declare function createCommerceClient({ baseUrl, fetch: fetchImpl, }: CommerceClientOptions): CommerceClient;

package/dist/client/errors.d.ts

@@ -0,0 +1,12 @@
+export declare class CommerceApiError extends Error {
+    readonly status: number;
+    readonly url: string;
+    constructor(status: number, url: string, message?: string);
+}
+export declare class NotFoundError extends CommerceApiError {
+    constructor(url: string);
+}
+export declare class CheckoutConflictError extends CommerceApiError {
+    readonly productIds: string[];
+    constructor(url: string, productIds: string[]);
+}

package/dist/client/index.d.ts

@@ -0,0 +1,2 @@
+export * from './commerce-client';
+export * from './errors';

package/dist/client/index.js

@@ -0,0 +1,64 @@
+import { categorySchema as e, checkoutConflictSchema as t, checkoutResponseSchema as n, orderSummarySchema as r, productCardPageSchema as i, productSchema as a } from "@develemit/commerce-contracts";
+// src/client/errors.ts
+var o = class extends Error {
+	status;
+	url;
+	constructor(e, t, n) {
+		super(n ?? `Commerce API request failed (${e}): ${t}`), this.status = e, this.url = t, this.name = "CommerceApiError";
+	}
+}, s = class extends o {
+	constructor(e) {
+		super(404, e, `Not found: ${e}`), this.name = "NotFoundError";
+	}
+}, c = class extends o {
+	productIds;
+	constructor(e, t) {
+		super(409, e, `Some items are no longer available: ${t.join(", ")}`), this.productIds = t, this.name = "CheckoutConflictError";
+	}
+};
+// src/client/commerce-client.ts
+function l({ baseUrl: l, fetch: u = (...e) => globalThis.fetch(...e) }) {
+	let d = l.replace(/\/+$/, "");
+	async function f(e, t, n) {
+		if (t.status === 404) throw new s(e);
+		if (!t.ok) throw new o(t.status, e);
+		return n.parse(await t.json());
+	}
+	async function p(e, t) {
+		let n = `${d}${e}`;
+		return f(n, await u(n, { headers: { accept: "application/json" } }), t);
+	}
+	async function m(e) {
+		let r = `${d}/checkout`, i = await u(r, {
+			method: "POST",
+			headers: {
+				accept: "application/json",
+				"content-type": "application/json"
+			},
+			body: JSON.stringify({ items: e })
+		});
+		if (i.status === 409) throw new c(r, t.parse(await i.json()).unavailableProductIds);
+		return f(r, i, n);
+	}
+	return {
+		async listProducts(e = {}) {
+			let t = new URLSearchParams();
+			e.category && t.set("category", e.category), e.featured !== void 0 && t.set("featured", String(e.featured)), e.limit !== void 0 && t.set("limit", String(e.limit)), e.cursor && t.set("cursor", e.cursor);
+			let n = t.toString();
+			return p(`/catalog/products${n ? `?${n}` : ""}`, i);
+		},
+		getProduct(e) {
+			return p(`/catalog/products/${encodeURIComponent(e)}`, a);
+		},
+		listCategories() {
+			return p("/catalog/categories", e.array());
+		},
+		createCheckout: m,
+		getOrderBySession(e) {
+			return p(`/orders/session/${encodeURIComponent(e)}`, r);
+		}
+	};
+}
+export { c as CheckoutConflictError, o as CommerceApiError, s as NotFoundError, l as createCommerceClient };
+
+//# sourceMappingURL=index.js.map

package/dist/client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["CommerceApiError","message","status","url","NotFoundError","CheckoutConflictError","productIds","createCommerceClient","fetchImpl","args","root","baseUrl","readJson","res","schema","get","path","createCheckout","checkoutConflictSchema","checkoutResponseSchema","params","query","qs","productCardPageSchema","slug","productSchema","categorySchema","sessionId","orderSummarySchema"],"sources":["../../src/client/errors.ts","../../src/client/commerce-client.ts"],"sourcesContent":["export class CommerceApiError extends Error {\n  constructor(\n    readonly status: number,\n    readonly url: string,\n    message?: string,\n  ) {\n    super(message ?? `Commerce API request failed (${status}): ${url}`);\n    this.name = 'CommerceApiError';\n  }\n}\n\nexport class NotFoundError extends CommerceApiError {\n  constructor(url: string) {\n    super(404, url, `Not found: ${url}`);\n    this.name = 'NotFoundError';\n  }\n}\n\nexport class CheckoutConflictError extends CommerceApiError {\n  constructor(\n    url: string,\n    readonly productIds: string[],\n  ) {\n    super(\n      409,\n      url,\n      `Some items are no longer available: ${productIds.join(', ')}`,\n    );\n    this.name = 'CheckoutConflictError';\n  }\n}\n","import {\n  categorySchema,\n  checkoutConflictSchema,\n  checkoutResponseSchema,\n  orderSummarySchema,\n  productCardPageSchema,\n  productSchema,\n  type Category,\n  type CheckoutRequest,\n  type CheckoutResponse,\n  type OrderSummary,\n  type ProductCardPage,\n  type Product,\n  type ProductListQuery,\n} from '@develemit/commerce-contracts';\nimport {\n  CheckoutConflictError,\n  CommerceApiError,\n  NotFoundError,\n} from './errors';\n\nexport interface CommerceClientOptions {\n  baseUrl: string;\n  fetch?: typeof fetch;\n}\n\nexport interface CommerceClient {\n  listProducts(query?: ProductListQuery): Promise<ProductCardPage>;\n  getProduct(slug: string): Promise<Product>;\n  listCategories(): Promise<Category[]>;\n  createCheckout(items: CheckoutRequest['items']): Promise<CheckoutResponse>;\n  getOrderBySession(sessionId: string): Promise<OrderSummary>;\n}\n\ntype Schema<T> = { parse(data: unknown): T };\n\nexport function createCommerceClient({\n  baseUrl,\n  fetch: fetchImpl = (...args) => globalThis.fetch(...args),\n}: CommerceClientOptions): CommerceClient {\n  const root = baseUrl.replace(/\\/+$/, '');\n\n  async function readJson<T>(\n    url: string,\n    res: Response,\n    schema: Schema<T>,\n  ): Promise<T> {\n    if (res.status === 404) throw new NotFoundError(url);\n    if (!res.ok) throw new CommerceApiError(res.status, url);\n    return schema.parse(await res.json());\n  }\n\n  async function get<T>(path: string, schema: Schema<T>): Promise<T> {\n    const url = `${root}${path}`;\n    const res = await fetchImpl(url, {\n      headers: { accept: 'application/json' },\n    });\n    return readJson(url, res, schema);\n  }\n\n  async function createCheckout(\n    items: CheckoutRequest['items'],\n  ): Promise<CheckoutResponse> {\n    const url = `${root}/checkout`;\n    const res = await fetchImpl(url, {\n      method: 'POST',\n      headers: {\n        accept: 'application/json',\n        'content-type': 'application/json',\n      },\n      body: JSON.stringify({ items }),\n    });\n    if (res.status === 409) {\n      const conflict = checkoutConflictSchema.parse(await res.json());\n      throw new CheckoutConflictError(url, conflict.unavailableProductIds);\n    }\n    return readJson(url, res, checkoutResponseSchema);\n  }\n\n  return {\n    async listProducts(query = {}) {\n      const params = new URLSearchParams();\n      if (query.category) params.set('category', query.category);\n      if (query.featured !== undefined) {\n        params.set('featured', String(query.featured));\n      }\n      if (query.limit !== undefined) params.set('limit', String(query.limit));\n      if (query.cursor) params.set('cursor', query.cursor);\n      const qs = params.toString();\n      return get(\n        `/catalog/products${qs ? `?${qs}` : ''}`,\n        productCardPageSchema,\n      );\n    },\n    getProduct(slug) {\n      return get(\n        `/catalog/products/${encodeURIComponent(slug)}`,\n        productSchema,\n      );\n    },\n    listCategories() {\n      return get('/catalog/categories', categorySchema.array());\n    },\n    createCheckout,\n    getOrderBySession(sessionId) {\n      return get(\n        `/orders/session/${encodeURIComponent(sessionId)}`,\n        orderSummarySchema,\n      );\n    },\n  };\n}\n"],"mappings":";;AAAA,IAAaA,IAAb,cAAsC,MAAM;CAE/B;CACA;CAFX,YACE,GACA,GACA,GACA;EAEA,AADA,MAAMC,KAAW,gCAAgCC,EAAO,KAAKC,GAAK,GAJzD,KAAA,SAAAD,GACA,KAAA,MAAAC,GAIT,KAAK,OAAO;CACd;AACF,GAEaC,IAAb,cAAmCJ,EAAiB;CAClD,YAAY,GAAa;EAEvB,AADA,MAAM,KAAKG,GAAK,cAAcA,GAAK,GACnC,KAAK,OAAO;CACd;AACF,GAEaE,IAAb,cAA2CL,EAAiB;CAG/C;CAFX,YACE,GACA,GACA;EAMA,AALA,MACE,KACAG,GACA,uCAAuCG,EAAW,KAAK,IAAI,GAC7D,GANS,KAAA,aAAAA,GAOT,KAAK,OAAO;CACd;AACF;;ACMA,SAAgBC,EAAqB,EACnC,YACA,OAAOC,KAAa,GAAGC,MAAS,WAAW,MAAM,GAAGA,CAAI,KAChB;CACxC,IAAMC,IAAOC,EAAQ,QAAQ,QAAQ,EAAE;CAEvC,eAAeC,EACb,GACA,GACA,GACY;EACZ,IAAIC,EAAI,WAAW,KAAK,MAAM,IAAIT,EAAcD,CAAG;EACnD,IAAI,CAACU,EAAI,IAAI,MAAM,IAAIb,EAAiBa,EAAI,QAAQV,CAAG;EACvD,OAAOW,EAAO,MAAM,MAAMD,EAAI,KAAK,CAAC;CACtC;CAEA,eAAeE,EAAO,GAAc,GAA+B;EACjE,IAAMZ,IAAM,GAAGO,IAAOM;EAItB,OAAOJ,EAAST,GAAK,MAHHK,EAAUL,GAAK,EAC/B,SAAS,EAAE,QAAQ,mBAAmB,EACxC,CAAC,GACyBW,CAAM;CAClC;CAEA,eAAeG,EACb,GAC2B;EAC3B,IAAMd,IAAM,GAAGO,EAAK,YACdG,IAAM,MAAML,EAAUL,GAAK;GAC/B,QAAQ;GACR,SAAS;IACP,QAAQ;IACR,gBAAgB;GAClB;GACA,MAAM,KAAK,UAAU,EAAE,SAAM,CAAC;EAChC,CAAC;EACD,IAAIU,EAAI,WAAW,KAEjB,MAAM,IAAIR,EAAsBF,GADfe,EAAuB,MAAM,MAAML,EAAI,KAAK,CACxB,CAAA,CAAS,qBAAqB;EAErE,OAAOD,EAAST,GAAKU,GAAKM,CAAsB;CAClD;CAEA,OAAO;EACL,MAAM,aAAa,IAAQ,CAAC,GAAG;GAC7B,IAAMC,IAAS,IAAI,gBAAgB;GAMnC,AALIC,EAAM,YAAUD,EAAO,IAAI,YAAYC,EAAM,QAAQ,GACrDA,EAAM,aAAa,KAAA,KACrBD,EAAO,IAAI,YAAY,OAAOC,EAAM,QAAQ,CAAC,GAE3CA,EAAM,UAAU,KAAA,KAAWD,EAAO,IAAI,SAAS,OAAOC,EAAM,KAAK,CAAC,GAClEA,EAAM,UAAQD,EAAO,IAAI,UAAUC,EAAM,MAAM;GACnD,IAAMC,IAAKF,EAAO,SAAS;GAC3B,OAAOL,EACL,oBAAoBO,IAAK,IAAIA,MAAO,MACpCC,CACF;EACF;EACA,WAAW,GAAM;GACf,OAAOR,EACL,qBAAqB,mBAAmBS,CAAI,KAC5CC,CACF;EACF;EACA,iBAAiB;GACf,OAAOV,EAAI,uBAAuBW,EAAe,MAAM,CAAC;EAC1D;EACA;EACA,kBAAkB,GAAW;GAC3B,OAAOX,EACL,mBAAmB,mBAAmBY,CAAS,KAC/CC,CACF;EACF;CACF;AACF"}

package/dist/components/add-to-cart-button/add-to-cart-button.d.ts

@@ -0,0 +1,14 @@
+import { Product } from '@develemit/commerce-contracts';
+export interface AddToCartLabels {
+    add: string;
+    inCart: string;
+    unavailable: string;
+}
+export declare const defaultAddToCartLabels: AddToCartLabels;
+export interface AddToCartButtonProps {
+    product: Product;
+    labels?: Partial<AddToCartLabels>;
+    openOnAdd?: boolean;
+    className?: string;
+}
+export declare function AddToCartButton({ product, labels, openOnAdd, className, }: AddToCartButtonProps): import('react').JSX.Element;

package/dist/components/availability-badge/availability-badge.d.ts

@@ -0,0 +1,15 @@
+import { ProductAvailability } from '@develemit/commerce-contracts';
+export interface AvailabilityLabels {
+    oneOfAKind: string;
+    sold: string;
+    reserved: string;
+    available: string;
+}
+export declare const defaultAvailabilityLabels: AvailabilityLabels;
+export interface AvailabilityBadgeProps {
+    availability: ProductAvailability;
+    quantity: number;
+    labels?: Partial<AvailabilityLabels>;
+    className?: string;
+}
+export declare function AvailabilityBadge({ availability, quantity, labels, className, }: AvailabilityBadgeProps): import('react').JSX.Element;

package/dist/components/cart-button/cart-button.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface CartButtonProps {
+    label?: string;
+    className?: string;
+    icon?: ReactNode;
+    labelHidden?: boolean;
+    hideZeroCount?: boolean;
+}
+export declare function CartButton({ label, className, icon, labelHidden, hideZeroCount, }: CartButtonProps): import('react').JSX.Element;

package/dist/components/cart-drawer/cart-drawer.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { CartSummaryProps } from '../cart-summary/cart-summary';
+export interface CartDrawerLabels {
+    title: string;
+    close: string;
+    empty: string;
+}
+export declare const defaultCartDrawerLabels: CartDrawerLabels;
+export interface CartDrawerProps {
+    labels?: Partial<CartDrawerLabels>;
+    summary?: CartSummaryProps;
+    slots?: CartDrawerSlots;
+}
+export interface CartDrawerSlots {
+    empty?: ReactNode;
+    summaryNote?: ReactNode;
+}
+export declare function CartDrawer({ labels, summary, slots }: CartDrawerProps): import('react').JSX.Element | null;

package/dist/components/cart-drawer/use-drawer-presence.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+export declare function useDrawerPresence(isOpen: boolean, backdropRef: RefObject<HTMLElement | null>): {
+    mounted: boolean;
+    state: string;
+};

package/dist/components/cart-line-item/cart-line-item.d.ts

@@ -0,0 +1,11 @@
+import { CartLine } from '@develemit/commerce-contracts';
+export interface CartLineItemLabels {
+    remove: string;
+    quantity: string;
+}
+export declare const defaultCartLineItemLabels: CartLineItemLabels;
+export interface CartLineItemProps {
+    line: CartLine;
+    labels?: Partial<CartLineItemLabels>;
+}
+export declare function CartLineItem({ line, labels }: CartLineItemProps): import('react').JSX.Element;

package/dist/components/cart-summary/cart-summary.d.ts

@@ -0,0 +1,10 @@
+export interface CartSummaryLabels {
+    subtotal: string;
+}
+export interface CartSummaryProps {
+    onCheckout?: () => void;
+    checkoutLabel?: string;
+    checkoutDisabled?: boolean;
+    labels?: Partial<CartSummaryLabels>;
+}
+export declare function CartSummary({ onCheckout, checkoutLabel, checkoutDisabled, labels, }: CartSummaryProps): import('react').JSX.Element;

package/dist/components/category-filter/category-filter.d.ts

@@ -0,0 +1,11 @@
+import { Category } from '@develemit/commerce-contracts';
+export interface CategoryFilterProps {
+    categories: Category[];
+    selected?: string;
+    onSelect?: (slug: string | undefined) => void;
+    allLabel?: string;
+    label?: string;
+    formatLabel?: (category: Category) => string;
+    sortCategories?: (a: Category, b: Category) => number;
+}
+export declare function CategoryFilter({ categories, selected, onSelect, allLabel, label, formatLabel, sortCategories, }: CategoryFilterProps): import('react').JSX.Element;

package/dist/components/fixtures.d.ts

@@ -0,0 +1,2 @@
+import { Product } from '@develemit/commerce-contracts';
+export declare function makeProduct(overrides?: Partial<Product>): Product;

package/dist/components/price-tag/price-tag.d.ts

@@ -0,0 +1,7 @@
+export interface PriceTagProps {
+    priceCents: number;
+    currency: string;
+    sold?: boolean;
+    className?: string;
+}
+export declare function PriceTag({ priceCents, currency, sold, className, }: PriceTagProps): import('react').JSX.Element;

package/dist/components/product-card/product-card.d.ts

@@ -0,0 +1,9 @@
+import { ProductCard as ProductCardData } from '@develemit/commerce-contracts';
+import { AvailabilityLabels } from '../availability-badge/availability-badge';
+export interface ProductCardProps {
+    product: ProductCardData;
+    labels?: Partial<AvailabilityLabels>;
+    sizes?: string;
+    priority?: boolean;
+}
+export declare function ProductCard({ product, labels, sizes, priority, }: ProductCardProps): import('react').JSX.Element;

package/dist/components/product-gallery/product-gallery.d.ts

@@ -0,0 +1,6 @@
+import { ProductImage } from '@develemit/commerce-contracts';
+export interface ProductGalleryProps {
+    images: ProductImage[];
+    sizes?: string;
+}
+export declare function ProductGallery({ images, sizes }: ProductGalleryProps): import('react').JSX.Element | null;

package/dist/components/product-grid/product-grid.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ProductCard as ProductCardData } from '@develemit/commerce-contracts';
+import { AvailabilityLabels } from '../availability-badge/availability-badge';
+export interface ProductGridProps {
+    products: ProductCardData[];
+    emptyState?: ReactNode;
+    labels?: Partial<AvailabilityLabels>;
+    priorityCount?: number;
+}
+export declare function ProductGrid({ products, emptyState, labels, priorityCount, }: ProductGridProps): import('react').JSX.Element;

package/dist/components/render-with-cart.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { CartStorage } from '../cart/cart-storage';
+export declare function renderWithCart(ui: ReactElement, storage: CartStorage): Promise<void>;

package/dist/format/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../lib/format-price';
+export * from '../views/sort-for-display';

package/dist/format/index.js

@@ -0,0 +1 @@
+export { n as formatPrice, t as sortForDisplay } from "../sort-for-display-Cj6GMeCY.js";

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+export type { Product, ProductCard as ProductCardData, ProductCardPage, ProductImage, ProductAvailability, Category, CartLine, CheckoutRequest, CheckoutResponse, OrderSummary, } from '@develemit/commerce-contracts';
+export * from './lib/format-price';
+export * from './lib/theme';
+export * from './lib/provider';
+export * from './components/price-tag/price-tag';
+export * from './components/availability-badge/availability-badge';
+export * from './components/product-card/product-card';
+export * from './components/product-grid/product-grid';
+export * from './components/category-filter/category-filter';
+export * from './components/product-gallery/product-gallery';
+export * from './views/shop-view';
+export * from './views/product-detail-view';
+export * from './views/featured-products';
+export * from './views/sort-for-display';
+export * from './cart/cart-reducer';
+export * from './cart/cart-storage';
+export * from './cart/cart-provider';
+export * from './components/add-to-cart-button/add-to-cart-button';
+export * from './components/cart-drawer/cart-drawer';
+export * from './components/cart-line-item/cart-line-item';
+export * from './components/cart-summary/cart-summary';
+export * from './components/cart-button/cart-button';