themelia-ui 1.0.0

package/.agents/skills/themelia-ui/references/components/admin--patterns--commerce.md

@@ -0,0 +1,1973 @@
+<!-- GENERATED by scripts/gen-consumer-docs.mjs — do not edit. -->
+
+# `admin/patterns/commerce`
+
+Admin screens present orders, invoices, carts, fulfilment and loyalty.
+
+## Selection
+
+- **Use when:** Admin screens present orders, invoices, carts, fulfilment and loyalty.
+- **Avoid when:** The record is a catalogue product, whose options and readiness live in features/products.
+- **Consider instead:** `features/products`
+- **Stability:** stable.
+
+## Import
+
+```tsx fragment — import-only example
+import { AddressCard } from "themelia-ui/admin/patterns/commerce"
+import "themelia-ui/admin/patterns/commerce.css"
+```
+
+## Composition
+
+This family composes `base/action-menu`, `base/avatar`, `base/badge`, `base/buttons`, `base/choice-inputs`, `base/copyable`, `base/display`, `base/feedback`, `base/forms`, `base/item`, `base/navigation`, `base/table`, `base/text-inputs`, `base/timeline`, `base/typography`, `base/value-inputs`, `patterns/timelines`.
+
+Application policy—routing, fetching, persistence, permissions, and translation—stays
+outside the package and arrives through the public props, callbacks, slots, or accessors below.
+
+## Public declarations
+
+### `AddressCard`
+
+Kind: callable.
+
+```text
+({ kind, name, line1, line2, city, region, postalCode, country, phone, isDefault, onEdit, onRemove, onMakeDefault, strings, className, ...props }: AddressCardProps) => import("react").JSX.Element
+```
+
+### `AddressCardProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `kind` | no | `AddressKind` |
+| `name` | yes | `string` |
+| `line1` | yes | `string` |
+| `line2` | no | `string` |
+| `city` | yes | `string` |
+| `region` | no | `string` |
+| `postalCode` | no | `string` |
+| `country` | yes | `string` |
+| `phone` | no | `string` |
+| `isDefault` | no | `boolean` |
+| `onEdit` | no | `() => void` |
+| `onRemove` | no | `() => void` |
+| `onMakeDefault` | no | `() => void` |
+| `strings` | no | `Partial<AddressStrings>` |
+
+### `AddressKind`
+
+Kind: type.
+
+```text
+"shipping" | "billing" | "pickup"
+```
+
+### `AddressStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `defaultBadge` | yes | `string` |
+| `edit` | yes | `string` |
+| `remove` | yes | `string` |
+| `makeDefault` | yes | `string` |
+| `shipping` | yes | `string` |
+| `billing` | yes | `string` |
+| `pickup` | yes | `string` |
+
+### `AmountRow`
+
+Kind: callable.
+
+```text
+({ label, amount, total, deduction, note, className, ...props }: AmountRowProps) => import("react").JSX.Element
+```
+
+### `AmountRowProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<"div">, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `label` | yes | `ReactNode` |
+| `amount` | yes | `string` |
+| `total` | no | `boolean` |
+| `deduction` | no | `boolean` |
+| `note` | no | `ReactNode` |
+
+### `Booking`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `id` | yes | `string` |
+| `date` | yes | `Date \| string \| number` |
+| `service` | yes | `string` |
+| `customer` | yes | `string` |
+| `time` | yes | `string` |
+| `amount` | yes | `string` |
+
+### `BookingCard`
+
+Kind: callable.
+
+```text
+({ status, details, actionLabel, onAction, className, ...props }: BookingCardProps) => import("react").JSX.Element
+```
+
+### `BookingCardProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `status` | no | `ReactNode` |
+| `details` | yes | `BookingDetail[]` |
+| `actionLabel` | no | `ReactNode` |
+| `onAction` | no | `() => void` |
+
+### `BookingDetail`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `id` | yes | `string` |
+| `label` | yes | `ReactNode` |
+| `value` | yes | `ReactNode` |
+| `fullWidth` | no | `boolean` |
+
+### `calculateSeoScore`
+
+Kind: callable.
+
+```text
+(input: SeoScoreInput) => SeoScore
+```
+
+### `CartLine`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `id` | yes | `string` |
+| `title` | yes | `string` |
+| `variantTitle` | no | `string` |
+| `quantity` | yes | `number` |
+| `price` | yes | `string` |
+| `imageSrc` | no | `string` |
+| `imageAlt` | no | `string` |
+
+### `CartStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `title` | yes | `string` |
+| `subtotal` | yes | `string` |
+| `tax` | yes | `string` |
+| `shipping` | yes | `string` |
+| `discount` | yes | `string` |
+| `total` | yes | `string` |
+| `checkout` | yes | `string` |
+| `formatQuantity` | yes | `(quantity: number) => string` |
+
+### `CartSummary`
+
+Kind: callable.
+
+```text
+({ items, subtotal, tax, shipping, discount, total, onCheckout, strings, className, ...props }: CartSummaryProps) => import("react").JSX.Element
+```
+
+### `CartSummaryProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `items` | yes | `CartLine[]` |
+| `subtotal` | no | `string` |
+| `tax` | no | `string` |
+| `shipping` | no | `string` |
+| `discount` | no | `string` |
+| `total` | yes | `string` |
+| `onCheckout` | no | `() => void` |
+| `strings` | no | `Partial<CartStrings>` |
+
+### `CodeEntry`
+
+Kind: callable.
+
+```text
+({ kind, appliedCode, appliedDiscount, balance, error, loading, onApply, onRemove, strings, className, ...props }: CodeEntryProps) => import("react").JSX.Element
+```
+
+### `CodeEntryKind`
+
+Kind: type.
+
+```text
+"discount" | "gift"
+```
+
+### `CodeEntryProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children" | "onSubmit">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `kind` | no | `CodeEntryKind` |
+| `appliedCode` | no | `string` |
+| `appliedDiscount` | no | `string` |
+| `balance` | no | `string` |
+| `error` | no | `string` |
+| `loading` | no | `boolean` |
+| `onApply` | no | `(code: string) => void` |
+| `onRemove` | no | `() => void` |
+| `strings` | no | `Partial<CodeEntryStrings>` |
+
+### `CodeEntryStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `title` | yes | `string` |
+| `helperText` | no | `string` |
+| `fieldLabel` | yes | `string` |
+| `placeholder` | yes | `string` |
+| `apply` | yes | `string` |
+| `remove` | yes | `string` |
+| `applied` | yes | `string` |
+| `balance` | yes | `string` |
+
+### `DEFAULT_SEO_LIMITS`
+
+Kind: const.
+
+```text
+SeoLimits
+```
+
+### `defaultAddressStrings`
+
+Kind: const.
+
+```text
+AddressStrings
+```
+
+### `defaultCartStrings`
+
+Kind: const.
+
+```text
+CartStrings
+```
+
+### `defaultDiscountCodeStrings`
+
+Kind: const.
+
+```text
+CodeEntryStrings
+```
+
+### `defaultDiscountStackStrings`
+
+Kind: const.
+
+```text
+DiscountStackStrings
+```
+
+### `defaultFulfillmentGroupStrings`
+
+Kind: const.
+
+```text
+FulfillmentGroupStrings
+```
+
+### `defaultGiftCodeStrings`
+
+Kind: const.
+
+```text
+CodeEntryStrings
+```
+
+### `defaultInventorySectionStrings`
+
+Kind: const.
+
+```text
+InventorySectionStrings
+```
+
+### `defaultInventoryStrings`
+
+Kind: const.
+
+```text
+InventoryStrings
+```
+
+### `defaultInvoiceStrings`
+
+Kind: const.
+
+```text
+InvoiceStrings
+```
+
+### `defaultLoyaltyStrings`
+
+Kind: const.
+
+```text
+LoyaltyStrings
+```
+
+### `defaultOrderCustomerStrings`
+
+Kind: const.
+
+```text
+OrderCustomerStrings
+```
+
+### `defaultOrderHeaderStrings`
+
+Kind: const.
+
+```text
+OrderHeaderStrings
+```
+
+### `defaultOrderStatusStrings`
+
+Kind: const.
+
+```text
+OrderStatusStrings
+```
+
+### `defaultOrderStatusVocabulary`
+
+Kind: const.
+
+```text
+OrderStatusVocabulary
+```
+
+### `defaultOrderSummaryStrings`
+
+Kind: const.
+
+```text
+OrderSummaryStrings
+```
+
+### `defaultPaymentMethodStrings`
+
+Kind: const.
+
+```text
+PaymentMethodStrings
+```
+
+### `defaultRefundStrings`
+
+Kind: const.
+
+```text
+RefundStrings
+```
+
+### `defaultSeoStrings`
+
+Kind: const.
+
+```text
+SeoStrings
+```
+
+### `defaultShipmentStrings`
+
+Kind: const.
+
+```text
+ShipmentStrings
+```
+
+### `defaultSubscriptionStrings`
+
+Kind: const.
+
+```text
+SubscriptionStrings
+```
+
+### `defaultTaxBreakdownStrings`
+
+Kind: const.
+
+```text
+TaxBreakdownStrings
+```
+
+### `defaultTransactionStrings`
+
+Kind: const.
+
+```text
+TransactionStrings
+```
+
+### `defaultVendorStrings`
+
+Kind: const.
+
+```text
+VendorStrings
+```
+
+### `Discount`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `id` | no | `string` |
+| `label` | yes | `string` |
+| `kind` | no | `ReactNode` |
+| `amount` | yes | `string` |
+
+### `DiscountStack`
+
+Kind: callable.
+
+```text
+({ discounts, totalSavings, strings, className, ...props }: DiscountStackProps) => import("react").JSX.Element
+```
+
+### `DiscountStackProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `discounts` | yes | `Discount[]` |
+| `totalSavings` | yes | `string` |
+| `strings` | no | `Partial<DiscountStackStrings>` |
+
+### `DiscountStackStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `title` | yes | `string` |
+| `totalSavings` | yes | `string` |
+
+### `formatDeduction`
+
+Kind: callable.
+
+```text
+(value: string) => string
+```
+
+### `FULFILLMENT_STATUS_TONE`
+
+Kind: const.
+
+```text
+Record<FulfillmentStatus, BadgeTone>
+```
+
+### `FulfillmentGroup`
+
+Kind: callable.
+
+```text
+({ status, location, notice, noticeIcon: NoticeIcon, items, children, actions, strings, vocabulary, className, ...props }: FulfillmentGroupProps) => import("react").JSX.Element
+```
+
+### `FulfillmentGroupProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<"div">, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `status` | yes | `FulfillmentStatus` |
+| `location` | no | `ReactNode` |
+| `notice` | no | `ReactNode` |
+| `noticeIcon` | no | `LucideIcon` |
+| `items` | no | `OrderLine[]` |
+| `children` | no | `ReactNode` |
+| `actions` | no | `ActionDefinition[]` |
+| `strings` | no | `Partial<FulfillmentGroupStrings>` |
+| `vocabulary` | no | `Partial<OrderStatusVocabulary>` |
+
+### `FulfillmentGroupStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `formatHeading` | yes | `(status: string, count: number) => string` |
+| `formatUnitPrice` | yes | `(unitPrice: string, quantity: number) => string` |
+
+### `FulfillmentStatus`
+
+Kind: type.
+
+```text
+"unfulfilled" | "partiallyFulfilled" | "fulfilled" | "scheduled" | "onHold" | "cancelled"
+```
+
+### `InventoryLevel`
+
+Kind: callable.
+
+```text
+({ productName, variant, stock, reorderLevel, maxStock, lastRestocked, strings, className, ...props }: InventoryLevelProps) => import("react").JSX.Element
+```
+
+### `InventoryLevelProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `productName` | yes | `string` |
+| `variant` | no | `string` |
+| `stock` | yes | `number` |
+| `reorderLevel` | yes | `number` |
+| `maxStock` | yes | `number` |
+| `lastRestocked` | no | `string` |
+| `strings` | no | `Partial<InventoryStrings>` |
+
+### `InventoryPolicy`
+
+Kind: type.
+
+```text
+"deny" | "continue"
+```
+
+### `InventorySection`
+
+Kind: callable.
+
+```text
+({ value, onFieldChange, sections, strings, className, ...props }: InventorySectionProps) => import("react").JSX.Element
+```
+
+### `InventorySectionField`
+
+Kind: type.
+
+```text
+keyof InventorySectionValue
+```
+
+### `InventorySectionName`
+
+Kind: type.
+
+```text
+"summary" | "identity" | "tracking" | "location" | "shipping" | "customs" | "tags"
+```
+
+### `InventorySectionProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children" | "onChange">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `value` | yes | `InventorySectionValue` |
+| `onFieldChange` | no | `(change: { field: InventorySectionField; value: InventorySectionValue[InventorySectionField]; previousValue: InventorySectionValue[InventorySectionField]; }) => void` |
+| `sections` | no | `InventorySectionName[]` |
+| `strings` | no | `Partial<InventorySectionStrings>` |
+
+### `InventorySectionStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `title` | yes | `string` |
+| `description` | yes | `string` |
+| `sections` | yes | `Record<"identity" \| "tracking" \| "location" \| "shipping" \| "customs" \| "tags", string>` |
+| `fields` | yes | `Record<"sku" \| "barcode" \| "trackQuantity" \| "available" \| "committed" \| "incoming" \| "lowStockThreshold" \| "inventoryPolicy" \| "binLocation" \| "requiresShipping" \| "weight" \| "countryOfOrigin" \| "hsCode" \| "tags", string>` |
+| `placeholders` | yes | `Partial<Record<string, string>>` |
+| `hints` | yes | `Partial<Record<string, string>>` |
+| `policy` | yes | `Record<"deny" \| "continue", string>` |
+| `summary` | yes | `Record<"available" \| "committed" \| "incoming" \| "threshold", string>` |
+
+### `InventorySectionValue`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `sku` | no | `string` |
+| `barcode` | no | `string` |
+| `trackQuantity` | no | `boolean` |
+| `available` | no | `string` |
+| `committed` | no | `string` |
+| `incoming` | no | `string` |
+| `lowStockThreshold` | no | `string` |
+| `inventoryPolicy` | no | `InventoryPolicy` |
+| `binLocation` | no | `string` |
+| `requiresShipping` | no | `boolean` |
+| `weight` | no | `string` |
+| `countryOfOrigin` | no | `string` |
+| `hsCode` | no | `string` |
+| `tags` | no | `string[]` |
+
+### `InventoryStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `inStock` | yes | `string` |
+| `lowStock` | yes | `string` |
+| `outOfStock` | yes | `string` |
+| `reorderAt` | yes | `string` |
+| `lastRestocked` | yes | `string` |
+| `formatLevel` | yes | `(stock: number, max: number) => string` |
+
+### `INVOICE_STATUS_TONE`
+
+Kind: const.
+
+```text
+Record<InvoiceStatus, BadgeTone>
+```
+
+### `InvoiceHeader`
+
+Kind: callable.
+
+```text
+({ invoiceNumber, status, from, to, issuedAt, dueAt, amountDue, strings, className, ...props }: InvoiceHeaderProps) => import("react").JSX.Element
+```
+
+### `InvoiceHeaderProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `invoiceNumber` | yes | `string` |
+| `status` | yes | `InvoiceStatus` |
+| `from` | yes | `InvoiceParty` |
+| `to` | yes | `InvoiceParty` |
+| `issuedAt` | no | `string` |
+| `dueAt` | no | `string` |
+| `amountDue` | yes | `string` |
+| `strings` | no | `Partial<InvoiceStrings>` |
+
+### `InvoiceLine`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `id` | no | `string` |
+| `description` | yes | `string` |
+| `quantity` | yes | `number` |
+| `unitPrice` | yes | `number` |
+
+### `InvoiceLineItems`
+
+Kind: callable.
+
+```text
+({ lines, currency, taxRate, strings, className, ...props }: InvoiceLineItemsProps) => import("react").JSX.Element
+```
+
+### `InvoiceLineItemsProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<"div">, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `lines` | yes | `InvoiceLine[]` |
+| `currency` | no | `string` |
+| `taxRate` | no | `number` |
+| `strings` | no | `Partial<InvoiceStrings>` |
+
+### `InvoiceMini`
+
+Kind: callable.
+
+```text
+({ invoiceNumber, status, customerName, lineCount, dueAt, total, strings, className, ...props }: InvoiceMiniProps) => import("react").JSX.Element
+```
+
+### `InvoiceMiniProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<"div">, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `invoiceNumber` | yes | `string` |
+| `status` | yes | `InvoiceStatus` |
+| `customerName` | yes | `string` |
+| `lineCount` | yes | `number` |
+| `dueAt` | yes | `string` |
+| `total` | yes | `string` |
+| `strings` | no | `Partial<InvoiceStrings>` |
+
+### `InvoiceParty`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `name` | yes | `string` |
+| `location` | no | `ReactNode` |
+
+### `InvoiceStatus`
+
+Kind: type.
+
+```text
+"paid" | "pending" | "overdue"
+```
+
+### `InvoiceStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `title` | yes | `string` |
+| `billFrom` | yes | `string` |
+| `billTo` | yes | `string` |
+| `issued` | yes | `string` |
+| `due` | yes | `string` |
+| `amountDue` | yes | `string` |
+| `item` | yes | `string` |
+| `quantity` | yes | `string` |
+| `price` | yes | `string` |
+| `amount` | yes | `string` |
+| `subtotal` | yes | `string` |
+| `tax` | yes | `string` |
+| `total` | yes | `string` |
+| `paid` | yes | `string` |
+| `pending` | yes | `string` |
+| `overdue` | yes | `string` |
+| `formatLineCount` | yes | `(count: number) => string` |
+
+### `LoyaltyMovement`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `id` | yes | `string` |
+| `label` | yes | `string` |
+| `date` | yes | `string` |
+| `points` | yes | `string` |
+| `earned` | yes | `boolean` |
+
+### `LoyaltyPoints`
+
+Kind: callable.
+
+```text
+({ balance, tier, tierTone, movements, onRedeem, strings, className, ...props }: LoyaltyPointsProps) => import("react").JSX.Element
+```
+
+### `LoyaltyPointsProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `balance` | yes | `number \| string` |
+| `tier` | no | `ReactNode` |
+| `tierTone` | no | `BadgeTone` |
+| `movements` | no | `LoyaltyMovement[]` |
+| `onRedeem` | no | `() => void` |
+| `strings` | no | `Partial<LoyaltyStrings>` |
+
+### `LoyaltyStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `title` | yes | `string` |
+| `balanceLabel` | yes | `string` |
+| `pointsAvailable` | yes | `string` |
+| `activityLabel` | yes | `string` |
+| `redeem` | yes | `string` |
+
+### `MINUS_SIGN`
+
+Kind: const.
+
+```text
+unknown
+```
+
+### `ORDER_STATUS_TONE`
+
+Kind: const.
+
+```text
+Record<OrderStatus, BadgeTone>
+```
+
+### `OrderAddress`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `name` | no | `string` |
+| `line1` | yes | `string` |
+| `line2` | no | `string` |
+| `city` | yes | `string` |
+| `region` | no | `string` |
+| `postalCode` | no | `string` |
+| `country` | yes | `string` |
+| `phone` | no | `string` |
+
+### `OrderCustomer`
+
+Kind: callable.
+
+```text
+({ name, email, phone, orderCount, shippingAddress, billingAddress, billingSameAsShipping, onOpenCustomer, onEditShipping, onEditBilling, strings, className, ...props }: OrderCustomerProps) => import("react").JSX.Element
+```
+
+### `OrderCustomerProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `name` | yes | `string` |
+| `email` | no | `string` |
+| `phone` | no | `string` |
+| `orderCount` | no | `number` |
+| `shippingAddress` | no | `OrderAddress` |
+| `billingAddress` | no | `OrderAddress` |
+| `billingSameAsShipping` | no | `boolean` |
+| `onOpenCustomer` | no | `() => void` |
+| `onEditShipping` | no | `() => void` |
+| `onEditBilling` | no | `() => void` |
+| `strings` | no | `Partial<OrderCustomerStrings>` |
+
+### `OrderCustomerStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `title` | yes | `string` |
+| `shippingAddress` | yes | `string` |
+| `billingAddress` | yes | `string` |
+| `editShipping` | yes | `string` |
+| `editBilling` | yes | `string` |
+| `sameAsShipping` | yes | `string` |
+| `noAddress` | yes | `string` |
+| `formatOrderCount` | yes | `(count: number) => string` |
+
+### `OrderEvent`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `id` | yes | `string` |
+| `label` | yes | `string` |
+| `timestamp` | no | `string` |
+| `complete` | yes | `boolean` |
+
+### `OrderHeader`
+
+Kind: callable.
+
+```text
+({ orderNumber, fulfillmentStatus, paymentStatus, placedAt, source, actions, strings, vocabulary, className, ...props }: OrderHeaderProps) => import("react").JSX.Element
+```
+
+### `OrderHeaderProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<"div">, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `orderNumber` | yes | `string` |
+| `fulfillmentStatus` | no | `FulfillmentStatus` |
+| `paymentStatus` | no | `PaymentStatus` |
+| `placedAt` | no | `string` |
+| `source` | no | `string` |
+| `actions` | no | `ActionDefinition[]` |
+| `strings` | no | `Partial<OrderHeaderStrings>` |
+| `vocabulary` | no | `Partial<OrderStatusVocabulary>` |
+
+### `OrderHeaderStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `formatOrderNumber` | yes | `(orderNumber: string) => string` |
+| `formatOrigin` | yes | `(placedAt: string, source: string) => string` |
+
+### `OrderLine`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `id` | yes | `string` |
+| `title` | yes | `string` |
+| `variantTitle` | no | `string` |
+| `sku` | no | `string` |
+| `imageSrc` | no | `string` |
+| `imageAlt` | no | `string` |
+| `unitPrice` | yes | `string` |
+| `quantity` | yes | `number` |
+| `total` | yes | `string` |
+| `properties` | no | `OrderLineProperty[]` |
+| `children` | no | `ReactNode` |
+
+### `OrderLineItem`
+
+Kind: callable.
+
+```text
+({ id: _id, title, variantTitle, sku, imageSrc, imageAlt, unitPrice, quantity, total, properties, children, strings, className, ...props }: OrderLineItemProps) => import("react").JSX.Element
+```
+
+### `OrderLineItemProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<"div">, "children" | "id" | "title">`, `OrderLine`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `strings` | no | `Partial<FulfillmentGroupStrings>` |
+
+### `OrderLineProperty`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `label` | yes | `ReactNode` |
+| `value` | yes | `ReactNode` |
+
+### `OrderStatus`
+
+Kind: type.
+
+```text
+"pending" | "paid" | "fulfilled" | "shipped" | "delivered" | "cancelled"
+```
+
+### `OrderStatusCard`
+
+Kind: callable.
+
+```text
+({ orderNumber, status, events, eta, defaultHistoryOpen, strings, className, ...props }: OrderStatusCardProps) => import("react").JSX.Element
+```
+
+### `OrderStatusCardProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `orderNumber` | yes | `string` |
+| `status` | yes | `OrderStatus` |
+| `events` | yes | `OrderEvent[]` |
+| `eta` | no | `string` |
+| `defaultHistoryOpen` | no | `boolean` |
+| `strings` | no | `Partial<OrderStatusStrings>` |
+
+### `OrderStatusStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `title` | yes | `string` |
+| `statusLabel` | yes | `string` |
+| `latestEvent` | yes | `string` |
+| `nextStep` | yes | `string` |
+| `eta` | yes | `string` |
+| `formatHistory` | yes | `(count: number) => string` |
+| `pending` | yes | `string` |
+| `paid` | yes | `string` |
+| `fulfilled` | yes | `string` |
+| `shipped` | yes | `string` |
+| `delivered` | yes | `string` |
+| `cancelled` | yes | `string` |
+
+### `OrderStatusVocabulary`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `fulfillment` | yes | `Record<"unfulfilled" \| "partiallyFulfilled" \| "fulfilled" \| "scheduled" \| "onHold" \| "cancelled", string>` |
+| `payment` | yes | `Record<"pending" \| "authorized" \| "paid" \| "partiallyRefunded" \| "refunded" \| "voided", string>` |
+
+### `OrderSummary`
+
+Kind: callable.
+
+```text
+({ goods, total, payments, paymentStatus, alert, strings, vocabulary, className, ...props }: OrderSummaryProps) => import("react").JSX.Element
+```
+
+### `OrderSummaryProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `goods` | yes | `SummaryLine[]` |
+| `total` | yes | `SummaryLine` |
+| `payments` | no | `SummaryLine[]` |
+| `paymentStatus` | no | `PaymentStatus` |
+| `alert` | no | `ReactNode` |
+| `strings` | no | `Partial<OrderSummaryStrings>` |
+| `vocabulary` | no | `Partial<OrderStatusVocabulary>` |
+
+### `OrderSummaryStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `title` | yes | `string` |
+
+### `OrderTimeline`
+
+Kind: callable.
+
+```text
+({ events, className, ...props }: OrderTimelineProps) => import("react").JSX.Element
+```
+
+### `OrderTimelineEvent`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `id` | yes | `string` |
+| `title` | yes | `string` |
+| `description` | no | `string` |
+| `timestamp` | yes | `string` |
+| `status` | yes | `"completed" \| "current" \| "pending"` |
+
+### `OrderTimelineProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `events` | yes | `OrderTimelineEvent[]` |
+
+### `OrderTransactions`
+
+Kind: callable.
+
+```text
+({ transactions, strings, className, ...props }: OrderTransactionsProps) => import("react").JSX.Element
+```
+
+### `OrderTransactionsProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `transactions` | yes | `Transaction[]` |
+| `strings` | no | `Partial<TransactionStrings>` |
+
+### `OUTGOING_TRANSACTION_KINDS`
+
+Kind: const.
+
+```text
+ReadonlySet<TransactionKind>
+```
+
+### `PAYMENT_STATUS_TONE`
+
+Kind: const.
+
+```text
+Record<PaymentStatus, BadgeTone>
+```
+
+### `PaymentBrand`
+
+Kind: type.
+
+```text
+"visa" | "mastercard" | "amex" | "paypal" | "applePay" | "googlePay" | "unknown"
+```
+
+### `PaymentEvent`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `id` | yes | `string` |
+| `label` | yes | `string` |
+| `date` | yes | `string` |
+| `amount` | no | `string` |
+| `icon` | no | `LucideIcon` |
+| `settled` | yes | `boolean` |
+
+### `PaymentMethodCard`
+
+Kind: callable.
+
+```text
+({ brand, last4, expiry, holderName, isDefault, onChange, strings, className, ...props }: PaymentMethodCardProps) => import("react").JSX.Element
+```
+
+### `PaymentMethodCardProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `brand` | yes | `PaymentBrand` |
+| `last4` | yes | `string` |
+| `expiry` | no | `string` |
+| `holderName` | no | `string` |
+| `isDefault` | no | `boolean` |
+| `onChange` | no | `() => void` |
+| `strings` | no | `Partial<PaymentMethodStrings>` |
+
+### `PaymentMethodStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `title` | yes | `string` |
+| `defaultBadge` | yes | `string` |
+| `expires` | yes | `string` |
+| `change` | yes | `string` |
+| `formatCard` | yes | `(brand: string, last4: string) => string` |
+
+### `PaymentStatus`
+
+Kind: type.
+
+```text
+"pending" | "authorized" | "paid" | "partiallyRefunded" | "refunded" | "voided"
+```
+
+### `PaymentTimeline`
+
+Kind: callable.
+
+```text
+({ events, className, ...props }: PaymentTimelineProps) => import("react").JSX.Element
+```
+
+### `PaymentTimelineProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<"div">, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `events` | yes | `PaymentEvent[]` |
+
+### `REFUND_STAGES`
+
+Kind: const.
+
+```text
+readonly RefundStage[]
+```
+
+### `RefundStage`
+
+Kind: type.
+
+```text
+"requested" | "approved" | "processing" | "completed"
+```
+
+### `RefundStatus`
+
+Kind: callable.
+
+```text
+({ stage, amount, reason, method, eta, strings, className, ...props }: RefundStatusProps) => import("react").JSX.Element
+```
+
+### `RefundStatusProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `stage` | yes | `RefundStage` |
+| `amount` | yes | `string` |
+| `reason` | no | `ReactNode` |
+| `method` | no | `ReactNode` |
+| `eta` | no | `string` |
+| `strings` | no | `Partial<RefundStrings>` |
+
+### `RefundStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `title` | yes | `string` |
+| `amount` | yes | `string` |
+| `reason` | yes | `string` |
+| `method` | yes | `string` |
+| `eta` | yes | `string` |
+| `requested` | yes | `string` |
+| `approved` | yes | `string` |
+| `processing` | yes | `string` |
+| `completed` | yes | `string` |
+
+### `SeoCheck`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `id` | yes | `SeoCheckId` |
+| `status` | yes | `SeoCheckStatus` |
+| `score` | yes | `number` |
+| `maxScore` | yes | `number` |
+| `ratio` | no | `number` |
+| `actual` | yes | `number` |
+| `min` | no | `number` |
+| `max` | no | `number` |
+
+### `SeoCheckId`
+
+Kind: type.
+
+```text
+"title" | "description" | "permalink" | "slug" | "url" | "keyword"
+```
+
+### `SeoCheckStatus`
+
+Kind: type.
+
+```text
+"good" | "review" | "missing"
+```
+
+### `SeoLimits`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `titleMin` | yes | `number` |
+| `titleMax` | yes | `number` |
+| `descriptionMin` | yes | `number` |
+| `descriptionMax` | yes | `number` |
+| `permalinkMax` | yes | `number` |
+
+### `SeoListing`
+
+Kind: callable.
+
+```text
+({ listing, score, onEdit, strings, className, ...props }: SeoListingProps) => import("react").JSX.Element
+```
+
+### `SeoListingProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children" | "title">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `listing` | yes | `SeoScoreInput` |
+| `score` | no | `SeoScore` |
+| `onEdit` | no | `() => void` |
+| `strings` | no | `Partial<SeoStrings>` |
+
+### `seoPermalinkPath`
+
+Kind: callable.
+
+```text
+(permalink?: string) => string
+```
+
+### `seoPermalinkSlug`
+
+Kind: callable.
+
+```text
+(permalink?: string) => string
+```
+
+### `SeoScore`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `score` | yes | `number` |
+| `status` | yes | `SeoCheckStatus` |
+| `checks` | yes | `SeoCheck[]` |
+| `limits` | yes | `SeoLimits` |
+
+### `SeoScoreInput`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `title` | no | `string` |
+| `description` | no | `string` |
+| `permalink` | no | `string` |
+| `baseUrl` | no | `string` |
+| `keyword` | no | `string` |
+| `limits` | no | `Partial<SeoLimits>` |
+
+### `SeoStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `title` | yes | `string` |
+| `edit` | yes | `string` |
+| `noTitle` | yes | `string` |
+| `noDescription` | yes | `string` |
+| `noPermalink` | yes | `string` |
+| `checks` | yes | `Record<"title" \| "description" \| "permalink" \| "slug" \| "url" \| "keyword", string>` |
+| `status` | yes | `Record<"good" \| "review" \| "missing", string>` |
+| `formatScore` | yes | `(score: number) => string` |
+| `formatMeasure` | yes | `(actual: number, max: number) => string` |
+| `formatPercent` | yes | `(percent: number) => string` |
+
+### `SHIPMENT_STATUS_TONE`
+
+Kind: const.
+
+```text
+Record<ShipmentStatus, BadgeTone>
+```
+
+### `ShipmentDetail`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `label` | yes | `string` |
+| `value` | yes | `ReactNode` |
+
+### `ShipmentStatus`
+
+Kind: type.
+
+```text
+"pending" | "inTransit" | "delivered" | "delayed"
+```
+
+### `ShipmentStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `title` | yes | `string` |
+| `carrier` | yes | `string` |
+| `trackingNumber` | yes | `string` |
+| `pending` | yes | `string` |
+| `inTransit` | yes | `string` |
+| `delivered` | yes | `string` |
+| `delayed` | yes | `string` |
+
+### `ShipmentTracking`
+
+Kind: callable.
+
+```text
+({ trackingNumber, carrier, status, steps, details, strings, className, ...props }: ShipmentTrackingProps) => import("react").JSX.Element
+```
+
+### `ShipmentTrackingProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `trackingNumber` | yes | `string` |
+| `carrier` | no | `string` |
+| `status` | yes | `ShipmentStatus` |
+| `steps` | yes | `TrackingStep[]` |
+| `details` | no | `ShipmentDetail[]` |
+| `strings` | no | `Partial<ShipmentStrings>` |
+
+### `stripLeadingMinus`
+
+Kind: callable.
+
+```text
+(value: string) => string
+```
+
+### `SubscriptionPerk`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `label` | yes | `string` |
+| `icon` | no | `LucideIcon` |
+
+### `SubscriptionStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `title` | yes | `string` |
+| `plan` | yes | `string` |
+| `nextBilling` | yes | `string` |
+| `included` | yes | `string` |
+| `manage` | yes | `string` |
+| `upgrade` | yes | `string` |
+
+### `SubscriptionSummary`
+
+Kind: callable.
+
+```text
+({ planName, price, cycle, nextBillingDate, status, perks, onManage, onUpgrade, strings, className, ...props }: SubscriptionSummaryProps) => import("react").JSX.Element
+```
+
+### `SubscriptionSummaryProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `planName` | yes | `string` |
+| `price` | yes | `string` |
+| `cycle` | yes | `string` |
+| `nextBillingDate` | yes | `string` |
+| `status` | no | `ReactNode` |
+| `perks` | no | `SubscriptionPerk[]` |
+| `onManage` | no | `() => void` |
+| `onUpgrade` | no | `() => void` |
+| `strings` | no | `Partial<SubscriptionStrings>` |
+
+### `SummaryLine`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `id` | no | `string` |
+| `label` | yes | `ReactNode` |
+| `note` | no | `ReactNode` |
+| `amount` | yes | `string` |
+| `deduction` | no | `boolean` |
+
+### `SummaryPanel`
+
+Kind: callable.
+
+```text
+({ children, className, ...props }: SummaryPanelProps) => import("react").JSX.Element
+```
+
+### `SummaryPanelProps`
+
+Kind: interface.
+
+Extends: `ComponentProps<"div">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `children` | yes | `ReactNode` |
+
+### `TaxBreakdown`
+
+Kind: callable.
+
+```text
+({ subtotal, taxes, totalTax, total, strings, className, ...props }: TaxBreakdownProps) => import("react").JSX.Element
+```
+
+### `TaxBreakdownProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `subtotal` | yes | `string` |
+| `taxes` | yes | `TaxLine[]` |
+| `totalTax` | no | `string` |
+| `total` | yes | `string` |
+| `strings` | no | `Partial<TaxBreakdownStrings>` |
+
+### `TaxBreakdownStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `title` | yes | `string` |
+| `subtotal` | yes | `string` |
+| `totalTax` | yes | `string` |
+| `total` | yes | `string` |
+
+### `TaxLine`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `id` | no | `string` |
+| `label` | yes | `string` |
+| `rate` | no | `string` |
+| `amount` | yes | `string` |
+
+### `TrackingStep`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `id` | no | `string` |
+| `label` | yes | `string` |
+| `done` | yes | `boolean` |
+| `timestamp` | no | `string` |
+
+### `Transaction`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `id` | yes | `string` |
+| `kind` | yes | `TransactionKind` |
+| `status` | yes | `TransactionStatus` |
+| `amount` | yes | `string` |
+| `processedAt` | yes | `string` |
+| `method` | no | `string` |
+| `reference` | no | `string` |
+| `gateway` | no | `string` |
+
+### `TRANSACTION_STATUS_TONE`
+
+Kind: const.
+
+```text
+Record<TransactionStatus, BadgeTone>
+```
+
+### `TransactionKind`
+
+Kind: type.
+
+```text
+"authorization" | "capture" | "sale" | "refund" | "void" | "chargeback"
+```
+
+### `TransactionStatus`
+
+Kind: type.
+
+```text
+"success" | "pending" | "failure"
+```
+
+### `TransactionStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `title` | yes | `string` |
+| `kind` | yes | `Record<"authorization" \| "capture" \| "sale" \| "refund" \| "void" \| "chargeback", string>` |
+| `status` | yes | `Record<"success" \| "pending" \| "failure", string>` |
+| `reference` | yes | `string` |
+| `empty` | yes | `string` |
+
+### `UpcomingBookings`
+
+Kind: callable.
+
+```text
+({ bookings, boxedDate, className, ...props }: UpcomingBookingsProps) => import("react").JSX.Element
+```
+
+### `UpcomingBookingsProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<"div">, "children">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `bookings` | yes | `Booking[]` |
+| `boxedDate` | no | `boolean` |
+
+### `VendorMetric`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `id` | no | `string` |
+| `label` | yes | `ReactNode` |
+| `value` | yes | `ReactNode` |
+
+### `VendorProfile`
+
+Kind: callable.
+
+```text
+({ name, initials, avatarUrl, role, verified, earnings, metrics, stats, view, onViewChange, onMessage, onHire, strings, className, ...props }: VendorProfileProps) => import("react").JSX.Element
+```
+
+### `VendorProfileProps`
+
+Kind: interface.
+
+Extends: `Omit<ComponentProps<typeof ContentBlock>, "children" | "title" | "role">`.
+
+| member | required | type |
+| --- | :-: | --- |
+| `name` | yes | `string` |
+| `initials` | no | `string` |
+| `avatarUrl` | no | `string` |
+| `role` | no | `ReactNode` |
+| `verified` | no | `boolean` |
+| `earnings` | no | `string` |
+| `metrics` | no | `VendorMetric[]` |
+| `stats` | no | `VendorStat[]` |
+| `view` | no | `VendorView` |
+| `onViewChange` | no | `(view: VendorView) => void` |
+| `onMessage` | no | `() => void` |
+| `onHire` | no | `() => void` |
+| `strings` | no | `Partial<VendorStrings>` |
+
+### `VendorStat`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `id` | no | `string` |
+| `label` | yes | `ReactNode` |
+| `value` | yes | `ReactNode` |
+| `change` | no | `ReactNode` |
+| `changeTone` | no | `"secondary" \| "success" \| "warning" \| "destructive"` |
+
+### `VendorStrings`
+
+Kind: interface.
+
+| member | required | type |
+| --- | :-: | --- |
+| `tabOverview` | yes | `string` |
+| `tabStats` | yes | `string` |
+| `totalEarnings` | yes | `string` |
+| `message` | yes | `string` |
+| `hire` | yes | `string` |
+| `verified` | yes | `string` |
+
+### `VendorView`
+
+Kind: type.
+
+```text
+"overview" | "stats"
+```
+
+## Preview recipes
+
+Preview route: Catalogue & partners — `/blocks-catalogue`
+
+### SeoListing
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { calculateSeoScore } from "themelia-ui/admin/patterns/commerce"
+
+const score = calculateSeoScore({ title, description, permalink, baseUrl, keyword })
+<SeoListing listing={listing} score={score} onEdit={edit} />
+```
+
+### InventorySection
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<InventorySection
+  value={value}
+  sections={["summary", "identity", "tracking"]}
+  onFieldChange={({ field, value }) => update(field, value)}
+/>
+```
+
+### VendorProfile
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<VendorProfile name="Northwind Traders" earnings="48,200.00 EUR" metrics={metrics} stats={stats} />
+```
+
+### BookingCard
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<BookingCard title="Reservation #4417" details={details} actionLabel="Open booking" onAction={open} />
+```
+
+### CartSummary
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<CartSummary items={items} subtotal="258.00 EUR" discount="50.00 EUR" total="264.40 EUR" />
+```
+
+### TaxBreakdown
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<TaxBreakdown subtotal="258.00 EUR" taxes={taxes} totalTax="52.89 EUR" total="310.89 EUR" />
+```
+
+### DiscountStack
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<DiscountStack discounts={discounts} totalSavings="50.00 EUR" />
+```
+
+### CodeEntry
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<CodeEntry onApply={apply} />
+<CodeEntry kind="gift" appliedCode="GC-4417-92AB" balance="45.00 EUR" onRemove={remove} />
+```
+
+### OrderStatusCard
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<OrderStatusCard orderNumber="#1041" status="shipped" events={events} eta="18 Aug" />
+```
+
+### ShipmentTracking
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<ShipmentTracking trackingNumber="1Z999AA1…" carrier="UPS" status="inTransit" steps={steps} />
+```
+
+### RefundStatus
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<RefundStatus stage="processing" amount="124.00 EUR" reason="Damaged on arrival" />
+```
+
+### InvoiceHeader
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<InvoiceHeader invoiceNumber="INV-2026-0114" status="overdue" from={from} to={to} amountDue="3,120.00 EUR" />
+```
+
+### InvoiceLineItems
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<InvoiceLineItems currency="EUR" taxRate={0.2} lines={lines} />
+```
+
+### InvoiceMini
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<InvoiceMini invoiceNumber="INV-0114" status="overdue" customerName="…" total="3,120.00 EUR" />
+```
+
+### AddressCard
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<AddressCard kind="shipping" name="Alice Mercer" line1="14 Kingsway" city="London" country="United Kingdom" isDefault />
+```
+
+### PaymentMethodCard
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<PaymentMethodCard brand="visa" last4="4417" expiry="09/28" isDefault onChange={change} />
+```
+
+### PaymentTimeline
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<PaymentTimeline events={events} />
+```
+
+### SubscriptionSummary
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<SubscriptionSummary planName="Scale" price="240.00 EUR" cycle="Per month" nextBillingDate="01 Sep 2026" />
+```
+
+### InventoryLevel
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<InventoryLevel productName="Merino crew neck" stock={8} reorderLevel={12} maxStock={120} />
+```
+
+### UpcomingBookings
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<UpcomingBookings bookings={bookings} boxedDate />
+```
+
+### LoyaltyPoints
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<LoyaltyPoints balance={4830} tier="Platinum" movements={movements} onRedeem={redeem} />
+```
+
+### Two statuses, not one
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<OrderHeader
+  orderNumber="1036"
+  paymentStatus="refunded"
+  fulfillmentStatus="unfulfilled"
+  placedAt="December 21, 2025 at 10:10 pm"
+  source="Simple Sample Data (via import)"
+/>
+```
+
+### Fulfillment groups
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<FulfillmentGroup
+  status="unfulfilled"
+  location="Bul Bulgaria 111"
+  notice="Shipping not required"
+  items={lines}
+  actions={[{ id: "fulfil", label: "Mark as fulfilled", onClick: fulfil }]}
+/>
+```
+
+### A line, and what a consumer attaches to it
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<OrderLineItem
+  {...line}
+  properties={[
+    { label: "Engraving", value: "A. MERCER" },
+    { label: "Gift message", value: "Happy birthday" },
+  ]}
+/>
+```
+
+### OrderSummary
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<OrderSummary
+  goods={[{ label: "Subtotal", note: "3 items", amount: "€239.95" }]}
+  total={{ label: "Total", amount: "€239.95" }}
+  payments={[{ label: "Paid", amount: "€0.00" }, { label: "Balance", amount: "€239.95" }]}
+  alert="€239.95 of the balance is currently unauthorized"
+/>
+```
+
+### OrderTransactions
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<OrderTransactions transactions={transactions} />
+```
+
+### Customer and addresses
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<OrderCustomer
+  name="Alice Mercer"
+  email="alice@example.test"
+  orderCount={4}
+  shippingAddress={address}
+  billingSameAsShipping
+/>
+```