@veevarts/design-system 2.0.0-alpha.6 → 2.0.0-alpha.60

package/dist/patterns/Notice/styles.d.ts

@@ -0,0 +1,35 @@
+import { NoticeTone, NoticeVariant } from './type';
+/**
+ * One glyph per tone, on every variant. Solar `bold` so the shape reads at
+ * callout size; the danger tone had four different glyphs across the apps
+ * before this (HeroUI's own, two Solar outlines and a gravity-ui fill).
+ */
+export declare const NOTICE_ICON: Record<NoticeTone, string>;
+export declare const NOTICE_DISMISS_ICON = "solar:close-circle-linear";
+/**
+ * Every size is rem (or em off a rem font size), so the POS "Text size"
+ * setting, which scales the root font size, scales the notice with it. The
+ * values are the design hub's px at a 16px root.
+ */
+export declare const noticeClass: Record<NoticeVariant, {
+    root: string;
+    iconWrapper: string;
+    iconSize: string;
+    text: string;
+    title: string;
+    description: string;
+    actions: string;
+    dismiss: string;
+}>;
+/**
+ * Tints. All `pos-*` tokens, the palette the Quick and POS surfaces style
+ * with; each text tone clears 4.5:1 on its fill (`pos-surface.test.ts`). The
+ * banner discs for danger and warning are the mockup's own tints; info and
+ * success have none in the mockup, so their disc is the tone at 15%.
+ */
+export declare const noticeTone: Record<NoticeTone, {
+    callout: string;
+    banner: string;
+    disc: string;
+    title: string;
+}>;

package/dist/patterns/Notice/type.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+/** Severity. Picks the tint, the glyph and the default live-region role. */
+export type NoticeTone = 'info' | 'success' | 'warning' | 'danger';
+/**
+ * Which of the design hub's two notice shapes to draw.
+ *
+ * `callout` is the inline note of the Quick Donation and Quick Membership
+ * mockups (`.callout-info`, `.callout-warn`): a small tinted block, the glyph
+ * on the first line, the title run in bold ahead of the text.
+ *
+ * `banner` is the POS `.banner`: the glyph in a filled disc, the title in the
+ * tone on its own line, muted body copy and an action row under it.
+ */
+export type NoticeVariant = 'callout' | 'banner';
+export interface NoticeProps {
+    /** Severity. Defaults to `info`. */
+    tone?: NoticeTone;
+    /** `callout` (default) or `banner`. */
+    variant?: NoticeVariant;
+    /** Short lead: run in bold before the description on a callout, its own line on a banner. */
+    title?: ReactNode;
+    /** The message. Phrasing content (text, links, `strong`): it shares a line with a callout's title. */
+    description?: ReactNode;
+    /** Buttons or links, rendered under the text. */
+    actions?: ReactNode;
+    /** Shows a dismiss button that calls this. The notice does not hide itself: the caller stops rendering it. */
+    onDismiss?: () => void;
+    /** Accessible name of the dismiss button. Defaults to `"Dismiss"`. */
+    dismissLabel?: string;
+    /**
+     * Live-region role. Defaults to `alert` for `danger` and `warning`, `status`
+     * for `info` and `success`; the matching `aria-live` follows it.
+     */
+    role?: 'alert' | 'status';
+    /** Root className, for layout (margins, width). */
+    className?: string;
+    /** Root test id; the parts are suffixed (`-icon`, `-title`, `-description`, `-actions`, `-dismiss`). */
+    'data-testid'?: string;
+}

package/dist/patterns/OutcomeView/index.d.ts

@@ -1,2 +1,2 @@
 export { OutcomeView } from './OutcomeView';
-export type { OutcomeViewProps, OutcomeViewLabels, ReceiptChannel } from './types';
+export type { OutcomeViewProps, OutcomeViewLabels, ReceiptChannel, OutcomeViewKind, OutcomePaidWithLine, OutcomeGroup, OutcomeReceiptAction, OutcomeEmailReceipt, OutcomeChangeDue, } from './types';

package/dist/patterns/OutcomeView/types.d.ts

@@ -3,6 +3,77 @@ import { Money } from '../../utils/money';
 export type { DestinationLine, DestinationStatus } from '..';
 export type { Money } from '../../utils/money';
 export type ReceiptChannel = 'email' | 'print';
+/**
+ * Which settled screen this is. Both are the POS `ex` screen's done stage
+ * (`.excard .exdone`); they differ in their default copy and in the top
+ * block's spacing.
+ *
+ * - `refund` (default): "Refund complete", `Reason · …`, "Done". Keeps the
+ *   refund wizard's `4px 0 2px` top block.
+ * - `payment`: "Payment complete", "New sale", "Handled by …". Top block
+ *   flush with the card padding, as `veevart-2-pos-latest` draws it.
+ */
+export type OutcomeViewKind = 'refund' | 'payment';
+/** One tender in "Paid with": icon box, method, amount, status pill. */
+export interface OutcomePaidWithLine {
+    /** Method name ("Card", "Cash", "Visa •••4242"). */
+    label: string;
+    amount: Money;
+    /** Iconify name for the 34px icon box (`'solar:card-outline'`). Omit for no box. */
+    icon?: string;
+    /** Pill at the row's end ("Paid", "Pending"). Omit for none. */
+    status?: string;
+}
+/** One "Outcome" group: an eyebrow over the things the sale produced. */
+export interface OutcomeGroup {
+    /** Eyebrow ("Purchased", "Returned"). */
+    label: string;
+    /** One chip each ("Observer", "Donation"). */
+    items: string[];
+}
+/**
+ * A receipt button in the `.rc-row` (Email receipt / Print receipt / Send
+ * digital card). The host decides which ones a sale offers.
+ */
+export interface OutcomeReceiptAction {
+    /** Stable key; also the testid suffix (`-receipt-action-<key>`). */
+    key: string;
+    label: string;
+    /** Iconify name, 16px, before the label. */
+    icon?: string;
+    onPress: () => void;
+    /**
+     * The action opens a panel under the row (the email box). `true` draws it
+     * pressed and sets `aria-expanded`. Leave `undefined` for a plain action.
+     */
+    expanded?: boolean;
+    isDisabled?: boolean;
+}
+/**
+ * The email box under the receipt row (`.rc-emailbox`): recipients as
+ * removable chips, a free-text field, and the send button. Controlled: the
+ * host owns the list, the draft and the validation.
+ */
+export interface OutcomeEmailReceipt {
+    emails: string[];
+    draft: string;
+    onDraftChange: (draft: string) => void;
+    /** Enter in the field. The host validates and adds (or flags `isInvalid`). */
+    onAddEmail: (draft: string) => void;
+    onRemoveEmail: (email: string) => void;
+    onSend: () => void;
+    /** Danger border on the recipients box. */
+    isInvalid?: boolean;
+    isSending?: boolean;
+    /** Default: disabled while there is no recipient. */
+    isSendDisabled?: boolean;
+}
+/** Cash paid over the total: the screen leads with the change instead of the total. */
+export interface OutcomeChangeDue {
+    amount: Money;
+    /** Muted line under the amount ("Total $19.44 · Cash tendered $20.00"). */
+    caption?: string;
+}
 export interface OutcomeViewLabels {
     processing?: string;
     title?: string;
@@ -17,19 +88,55 @@ export interface OutcomeViewLabels {
     reason?: string;
     /** `{name}` is replaced with the `authorizedBy` prop. */
     authorizedBy?: string;
+    /** Eyebrow over `paidWith`. Default `'Paid with'`. */
+    paidWithTitle?: string;
+    /** Eyebrow over `outcomeGroups`. Default `'Outcome'`. */
+    outcomeTitle?: string;
+    /** Label over the change amount. Default `'Change due'`. */
+    changeDue?: string;
+    /** Placeholder of the email field. Default `'Add email…'`. */
+    emailPlaceholder?: string;
+    /** Accessible name of the email field. Default `'Add email address'`. */
+    emailAriaLabel?: string;
+    /** `{email}` is replaced with the address. Default `'Remove {email}'`. */
+    removeEmail?: string;
+    /** Send button of the email box. Default `'Send receipt'`. */
+    sendEmail?: string;
 }
 export interface OutcomeViewProps {
     state: 'processing' | 'complete';
-    /** Amount refunded — shown under the spinner, then as the receipt headline. */
+    /** See {@link OutcomeViewKind}. Default `'refund'`. */
+    kind?: OutcomeViewKind;
+    /** Amount refunded or paid — shown under the spinner, then as the receipt headline. */
     total?: Money;
-    destinations: DestinationLine[];
+    /**
+     * Where a refund went, with a per-line status chip. A payment omits it:
+     * the section is drawn only when the prop is given.
+     */
+    destinations?: DestinationLine[];
+    /** Muted line under the total ("TXN-10483 · Marcus Chen"). */
+    subtitle?: string;
     /** Refund reason, printed under the total as `Reason · …`. */
     reason?: string;
-    /** Who authorized the refund, printed as the receipt's footer line. */
+    /** "Paid with" rows. */
+    paidWith?: OutcomePaidWithLine[];
+    /** "Outcome" groups: what the sale produced, as chips. */
+    outcomeGroups?: OutcomeGroup[];
+    /** Cash change to hand back. Replaces the title + total block. */
+    changeDue?: OutcomeChangeDue;
+    /** Who authorized the refund or handled the sale, printed as the footer line. */
     authorizedBy?: string;
     /** Receipt channels already chosen, reflected in the row checkboxes. */
     selectedReceipts?: ReceiptChannel[];
+    /** The refund's receipt checkbox rows. Ignored when `receiptActions` is given. */
     onSendReceipt?: (channel: ReceiptChannel) => void;
+    /**
+     * Receipt buttons in one row (`.rc-row`), the payment screen's
+     * Email / Print / Send digital card. Takes the place of the checkbox rows.
+     */
+    receiptActions?: OutcomeReceiptAction[];
+    /** The email box under the receipt row. Pass it while the email action is expanded. */
+    emailReceipt?: OutcomeEmailReceipt;
     onDone: () => void;
     /**
      * Drops the settled state's own `.excard` frame, for hosts that already

package/dist/patterns/PageHeader/PageHeader.d.ts

@@ -26,6 +26,7 @@ export interface PageHeaderProps {
     actions?: React.ReactNode;
     /** Heading level for the title element. Default `'h1'`. */
     titleAs?: 'h1' | 'h2' | 'h3';
+    variant?: 'default' | 'list';
     className?: string;
     classNames?: PageHeaderClassNames;
     'data-testid'?: string;

package/dist/patterns/PaginationSummary/PaginationSummary.d.ts

@@ -3,6 +3,12 @@ export interface PaginationSummaryClassNames {
     base?: string;
     emphasis?: string;
 }
+/** The range `format` receives; `from` and `to` are both 0 when there is nothing to show. */
+export interface PaginationSummaryRange {
+    from: number;
+    to: number;
+    total: number;
+}
 export interface PaginationSummaryProps {
     /** Current page, 1-based. */
     page: number;
@@ -19,6 +25,12 @@ export interface PaginationSummaryProps {
      * avoid reading the change twice.
      */
     announce?: boolean;
+    /**
+     * Writes the sentence instead of the built-in English "Showing {range} of
+     * {total} {unit}". Use it to translate; `unit` and `classNames.emphasis`
+     * do not apply, since the returned node is the whole sentence.
+     */
+    format?: (range: PaginationSummaryRange) => React.ReactNode;
     className?: string;
     classNames?: PaginationSummaryClassNames;
     'data-testid'?: string;

package/dist/patterns/PaginationSummary/index.d.ts

@@ -1,3 +1,3 @@
 export { PaginationSummary } from './PaginationSummary';
-export type { PaginationSummaryProps, PaginationSummaryClassNames } from './PaginationSummary';
+export type { PaginationSummaryProps, PaginationSummaryClassNames, PaginationSummaryRange } from './PaginationSummary';
 export { pageRange } from './page-range';

package/dist/patterns/PaymentSubAmountInput/PaymentSubAmountInput.d.ts

@@ -10,6 +10,8 @@ export interface PaymentSubAmountInputProps {
     defaultValue?: string;
     /** Fires on every keystroke with the raw string. */
     onChange?: (next: string) => void;
+    /** Fires when the amount field loses focus. */
+    onBlur?: () => void;
     /** Placeholder shown when value is empty (e.g. "$150.00"). */
     placeholder?: string;
     isDisabled?: boolean;

package/dist/patterns/PillTabs/PillTabs.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { PillTabsProps } from './types';
+export declare const PillTabs: React.FC<PillTabsProps>;

package/dist/patterns/PillTabs/ids.d.ts

@@ -0,0 +1,9 @@
+export declare const DEFAULT_PILL_TABS_ID = "pill-tabs";
+export declare const pillTabId: (key: string, idPrefix?: string) => string;
+export declare const pillTabPanelId: (key: string, idPrefix?: string) => string;
+export declare const pillTabPanelProps: (key: string, idPrefix?: string) => {
+    role: "tabpanel";
+    id: string;
+    'aria-labelledby': string;
+    tabIndex: number;
+};

package/dist/patterns/PillTabs/index.d.ts

@@ -0,0 +1,3 @@
+export { PillTabs } from './PillTabs';
+export { pillTabId, pillTabPanelId, pillTabPanelProps } from './ids';
+export type { PillTabsProps, PillTabItem, PillTabsSize } from './types';

package/dist/patterns/PillTabs/styles.d.ts

@@ -0,0 +1,20 @@
+import { PillTabsSize } from './types';
+export declare const pillTabsClass: {
+    readonly base: "mb-3.5 w-full";
+    readonly tabList: "w-full gap-1 rounded-full border border-pos-line bg-default-100 p-1";
+    readonly cursor: "rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,.10)]";
+    readonly tab: "h-auto flex-1 data-[hover-unselected=true]:opacity-100";
+    readonly tabStill: "rounded-full data-[selected=true]:bg-white data-[selected=true]:shadow-[0_1px_3px_rgba(0,0,0,.10)]";
+    readonly tabContent: "leading-[1.5] font-normal text-default-600 group-data-[selected=true]:font-semibold group-data-[selected=true]:text-default-900";
+    readonly title: "flex items-center whitespace-nowrap";
+    readonly icon: "flex shrink-0";
+    readonly count: "rounded-full bg-default-200 py-px leading-[1.5] font-semibold text-default-600 group-data-[selected=true]:bg-acct-rust-fill group-data-[selected=true]:text-primary-600";
+};
+/** `lg`: 12px above and below a 24px line (16px text) is a 48px tab, in rem so it scales. */
+export declare const pillTabsSizeClass: Record<PillTabsSize, {
+    tab: string;
+    tabContent: string;
+    title: string;
+    icon: string;
+    count: string;
+}>;

package/dist/patterns/PillTabs/types.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+export type PillTabsSize = 'md' | 'lg';
+export interface PillTabItem {
+    key: string;
+    label: string;
+    count?: number;
+    /** Decorative glyph before the label; hidden from assistive tech, the label names the tab. */
+    icon?: ReactNode;
+    /** Replaces the derived `<data-testid>-<key>`; the count becomes `<this>-count`. */
+    'data-testid'?: string;
+}
+export interface PillTabsProps {
+    items: PillTabItem[];
+    value: string;
+    onChange: (key: string) => void;
+    ariaLabel: string;
+    idPrefix?: string;
+    /** `md` (default) is the 38px record-page tab; `lg` is the 48px touch target, with larger text. */
+    size?: PillTabsSize;
+    'data-testid'?: string;
+}

package/dist/patterns/{CatalogItemCard → Programs/CatalogItemCard}/type.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '../../components';
+import { ButtonProps } from '../../../components';
 /**
  * Metadata row displayed under the card title.
  */

package/dist/patterns/{EventDetails → Programs/EventDetails}/EventDetails.d.ts

@@ -20,6 +20,8 @@ export interface EventDetailsProps {
     classes?: string;
     /** @property {boolean} [compact] - Dense spacing mode for compact side layouts. */
     compact?: boolean;
+    /** @property {'stacked' | 'horizontal'} [layout] - Places the image beside content on desktop when horizontal. */
+    layout?: 'stacked' | 'horizontal';
     /** @property {boolean} [showImage] - Optional flag to show or hide the event image. Defaults to true. */
     showImage?: boolean;
     /** @property {'lazy' | 'eager'} [imageLoading] - Optional loading strategy for the event image. Use `'lazy'` for off-screen placements (long lists, below-the-fold). Defaults to `'eager'` since the banner is typically above-the-fold. */
@@ -37,5 +39,5 @@ export interface EventDetailsProps {
  * @function EventDetails
  * @description Displays a card with event information such as name, image, date, time, location, and description.
  */
-export declare const EventDetails: ({ classes, name, imageUrl, eventDate, eventTime, location, description, showImage, compact, imageLoading, showMoreButtonClassName, labels, }: EventDetailsProps) => JSX.Element;
+export declare const EventDetails: ({ classes, name, imageUrl, eventDate, eventTime, location, description, showImage, compact, layout, imageLoading, showMoreButtonClassName, labels, }: EventDetailsProps) => JSX.Element;
 export default EventDetails;

package/dist/patterns/{OfferCard → Programs/OfferCard}/OfferCard.d.ts

@@ -6,7 +6,7 @@ import { OfferCardProps } from './types';
  * Supports slot-based customization for all rendered elements.
  */
 export declare const OfferCard: {
-    ({ offer, quantity: quantityProp, defaultQuantity, onQuantityChange, currency, locale, labels: customLabels, slots, isDisabled, buttonVariant, buttonColor, showCard, showDescription, showPeopleCount, showPrice, priceDisplay, classNames, "data-testid": dataTestId, selectedColor, compact, isSoldOut: isSoldOutProp, isMaxReached: isMaxReachedProp, isRuleBlocked: isRuleBlockedProp, statusTone: statusToneProp, statusLabel, disabledReason, disabled, }: OfferCardProps): JSX.Element;
+    ({ offer, quantity: quantityProp, defaultQuantity, onQuantityChange, currency, locale, labels: customLabels, slots, isDisabled, buttonVariant, buttonColor, showCard, showDescription, showPeopleCount, showPrice, priceDisplay, classNames, "data-testid": dataTestId, selectedColor, selectionMode, compact, isSoldOut: isSoldOutProp, isMaxReached: isMaxReachedProp, isRuleBlocked: isRuleBlockedProp, statusTone: statusToneProp, statusLabel, disabledReason, disabled, }: OfferCardProps): JSX.Element;
     displayName: string;
 };
 export default OfferCard;

package/dist/patterns/{OfferCard → Programs/OfferCard}/types.d.ts

@@ -350,6 +350,13 @@ export interface OfferCardProps {
      * @default 'primary'
      */
     selectedColor?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+    /**
+     * How an available offer is added to the selection.
+     * `press-to-add` makes the whole card add one item and omits the inline
+     * stepper. It is useful when a separate order summary owns removal.
+     * @default 'stepper'
+     */
+    selectionMode?: 'stepper' | 'press-to-add';
     /**
      * Whether to show the component inside a Card
      * @default true

package/dist/patterns/Programs/ProgramListItem/ProgramListItem.d.ts

@@ -0,0 +1,17 @@
+import { JSX } from 'react';
+export type ProgramListItemStatus = 'open' | 'selling-fast' | 'sold-out';
+export interface ProgramListItemProps {
+    title: string;
+    subtitle: string;
+    price?: string;
+    imageUrl?: string;
+    status?: ProgramListItemStatus;
+    isDisabled?: boolean;
+    onPress?(): void;
+    className?: string;
+}
+/** Pressable Programs catalog row for POS list mode. */
+export declare function ProgramListItem({ title, subtitle, price, imageUrl, status, isDisabled, onPress, className }: ProgramListItemProps): JSX.Element;
+export declare namespace ProgramListItem {
+    var displayName: string;
+}

package/dist/patterns/Programs/ProgramListItem/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgramListItem } from './ProgramListItem';
+export type { ProgramListItemProps, ProgramListItemStatus } from './ProgramListItem';

package/dist/patterns/Programs/index.d.ts

@@ -0,0 +1,5 @@
+export * from './CatalogItemCard';
+export * from './EventDetails';
+export * from './OfferCard';
+export * from './ProgramListItem';
+export * from './SessionTimeline';

package/dist/patterns/ReasonSelect/types.d.ts

@@ -11,6 +11,7 @@ export interface ReasonSelectProps {
     value: string | null;
     onChange: (id: string) => void;
     error?: string;
+    isRequired?: boolean;
     labels?: ReasonSelectLabels;
     className?: string;
     'data-testid'?: string;

package/dist/patterns/RecordCard/RecordCard.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { RecordCardProps } from './types';
+export declare const RecordCard: React.FC<RecordCardProps>;

package/dist/patterns/RecordCard/index.d.ts

@@ -0,0 +1,2 @@
+export { RecordCard } from './RecordCard';
+export type { RecordCardProps, RecordCardVariant, RecordCardBody, RecordCardSurface } from './types';

package/dist/patterns/RecordCard/styles.d.ts

@@ -0,0 +1,16 @@
+import { RecordCardBody, RecordCardSurface, RecordCardVariant } from './types';
+export declare const recordCardShadow = "shadow-[0_1px_4px_rgba(0,0,0,.06),0_4px_12px_rgba(0,0,0,.06)]";
+export declare const recordCardClass: {
+    readonly base: "overflow-hidden rounded-2xl border border-pos-line bg-white";
+    readonly title: "m-0 min-w-0 text-[0.90625rem] font-semibold text-default-900 [overflow-wrap:anywhere]";
+    readonly count: "rounded-full bg-default-100 px-2 py-px text-[0.75rem] font-semibold text-default-600";
+    readonly icon: "flex shrink-0 text-default-500 [&_svg]:size-[1.125rem]";
+    readonly action: "ml-auto";
+    readonly description: "m-0 text-[0.84375rem] leading-[1.55] text-default-500 [&_b]:font-bold [&_b]:tabular-nums [&_b]:text-default-900";
+    readonly footer: "flex flex-wrap gap-2";
+    readonly footerAfterContent: "mt-[0.875rem]";
+    readonly footerAfterDescription: "mt-3";
+};
+export declare const recordCardSurfaceClass: Record<RecordCardSurface, string>;
+export declare const recordCardHeaderClass: Record<RecordCardVariant, string>;
+export declare const recordCardBodyClass: Record<RecordCardVariant, Record<RecordCardBody, string>>;

package/dist/patterns/RecordCard/types.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export type RecordCardVariant = 'section' | 'aside';
+export type RecordCardBody = 'padded' | 'rows' | 'flush' | 'none';
+/** `card` sits on a grey page with the layered shadow; `flat` keeps the border and drops the shadow, for a card inside a modal. */
+export type RecordCardSurface = 'card' | 'flat';
+export interface RecordCardProps {
+    title?: ReactNode;
+    titleAs?: 'h2' | 'h3' | 'h4';
+    icon?: ReactNode;
+    count?: ReactNode;
+    badge?: ReactNode;
+    action?: ReactNode;
+    description?: ReactNode;
+    footer?: ReactNode;
+    variant?: RecordCardVariant;
+    body?: RecordCardBody;
+    surface?: RecordCardSurface;
+    /** Merged onto the root, after the chrome (e.g. `break-inside-avoid` in a multi-column host). */
+    className?: string;
+    children?: ReactNode;
+    'data-testid'?: string;
+}

package/dist/patterns/RecordHeader/RecordHeader.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { RecordHeaderProps } from './types';
+export declare const RecordHeader: React.FC<RecordHeaderProps>;

package/dist/patterns/RecordHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { RecordHeader } from './RecordHeader';
+export type { RecordHeaderProps, RecordHeaderStat } from './types';

package/dist/patterns/RecordHeader/styles.d.ts

@@ -0,0 +1,43 @@
+export declare const RECORD_HEADER_WIDE_REM = 48;
+export declare const recordHeaderClass: {
+    readonly base: "mb-4 overflow-hidden rounded-2xl border border-pos-line bg-white shadow-[0_1px_4px_rgba(0,0,0,.06),0_4px_12px_rgba(0,0,0,.06)]";
+    readonly band: "flex items-center gap-2.5 border-b border-pos-hair bg-pos-page px-4 py-2.5";
+    readonly back: "inline-flex size-[1.625rem] shrink-0 items-center justify-center rounded-[0.625rem] text-default-500 outline-none transition-colors hover:bg-default-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+    readonly backIcon: "size-[0.875rem]";
+    readonly breadcrumb: "min-w-0 flex-1";
+    readonly breadcrumbList: "flex-nowrap gap-[0.375rem]";
+    readonly crumbBase: "min-w-0";
+    readonly crumb: "whitespace-nowrap text-[0.875rem] text-default-500 data-[disabled=true]:opacity-100 data-[current=true]:overflow-hidden data-[current=true]:font-normal data-[current=true]:text-default-900";
+    readonly crumbSeparator: "ms-[0.375rem] px-0 text-default-400 data-[disabled=true]:opacity-100";
+    readonly body: "flex flex-wrap gap-5";
+    readonly bodyWide: "px-5 pb-5 pt-[1.125rem]";
+    readonly bodyNarrow: "p-4";
+    readonly identity: "min-w-0 flex-[1_1_18.75rem]";
+    readonly title: "m-0 font-semibold tracking-[-.02em] text-default-900 [overflow-wrap:anywhere]";
+    readonly titleWide: "text-[1.5rem]";
+    readonly titleNarrow: "text-[1.3125rem]";
+    readonly meta: "m-0 mt-[0.6875rem] flex list-none flex-col gap-[0.4375rem] p-0";
+    readonly metaLine: "flex min-w-0 items-center gap-[0.5625rem] text-[0.84375rem] text-default-700";
+    readonly metaIcon: "flex shrink-0 text-default-400 [&_svg]:size-[0.9375rem]";
+    readonly metaText: "min-w-0 truncate";
+    readonly money: "flex flex-col gap-[0.3125rem]";
+    readonly moneyWide: "ml-auto min-w-[12.5rem] flex-none items-end text-right";
+    readonly moneyNarrow: "w-full items-start text-left";
+    readonly amountLabel: "text-[0.8125rem] text-default-500";
+    readonly amount: "whitespace-nowrap font-bold tracking-[-.03em] tabular-nums text-default-900";
+    readonly amountWide: "text-[1.9375rem] leading-[1.1]";
+    readonly amountNarrow: "text-[1.6875rem] leading-[1.1]";
+    readonly amountCaption: "text-[0.8125rem] text-default-500";
+    readonly recordId: "text-[0.8125rem] text-default-500";
+    readonly chips: "mt-[0.1875rem] flex flex-wrap gap-1.5";
+    readonly chipsWide: "justify-end";
+    readonly chipsNarrow: "justify-start";
+    readonly statItems: "m-0 mt-2.5 flex flex-wrap gap-[1.375rem]";
+    readonly stat: "flex flex-col-reverse";
+    readonly statWide: "text-right";
+    readonly statNarrow: "text-left";
+    readonly statValue: "m-0 text-[0.9375rem] font-bold tabular-nums text-default-900";
+    readonly statLabel: "mt-0.5 text-[0.75rem] text-default-500";
+    readonly statsWide: "px-5 pb-5";
+    readonly statsNarrow: "px-4 pb-4";
+};

package/dist/patterns/RecordHeader/types.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { RecordTone } from '../shared/recordTone';
+export interface RecordHeaderStat {
+    id?: string;
+    label: ReactNode;
+    value: ReactNode;
+    tone?: RecordTone;
+}
+export interface RecordHeaderProps {
+    breadcrumb?: Array<{
+        label: string;
+        onClick?: () => void;
+    }>;
+    onBack?: () => void;
+    backLabel: string;
+    title: ReactNode;
+    meta?: Array<{
+        icon?: ReactNode;
+        text: ReactNode;
+    }>;
+    amountLabel?: string;
+    amount?: ReactNode;
+    amountCaption?: ReactNode;
+    recordId?: ReactNode;
+    chips?: ReactNode;
+    statItems?: RecordHeaderStat[];
+    stats?: ReactNode;
+    banner?: ReactNode;
+    'data-testid'?: string;
+}

package/dist/patterns/RecordLayout/RecordLayout.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { RecordLayoutProps } from './types';
+export declare const RecordLayout: React.FC<RecordLayoutProps>;

package/dist/patterns/RecordLayout/index.d.ts

@@ -0,0 +1,2 @@
+export { RecordLayout } from './RecordLayout';
+export type { RecordLayoutProps } from './types';

package/dist/patterns/RecordLayout/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const RECORD_LAYOUT_SPLIT_REM = 50;
+export declare const recordLayoutClass: {
+    readonly base: "grid items-start gap-4";
+    readonly split: "grid-cols-[minmax(0,1fr)_23.25rem]";
+    readonly stacked: "grid-cols-[minmax(0,1fr)]";
+    readonly column: "min-w-0";
+    readonly aside: "flex min-w-0 flex-col gap-[0.875rem]";
+};

package/dist/patterns/RecordLayout/types.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface RecordLayoutProps {
+    children: ReactNode;
+    aside?: ReactNode;
+    'data-testid'?: string;
+}

package/dist/patterns/RecordTotals/RecordTotals.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { SignedAmountTone } from '../shared/recordTone';
+export interface RecordTotalsRow {
+    id: string;
+    label: React.ReactNode;
+    note?: React.ReactNode;
+    value: React.ReactNode;
+    tone?: SignedAmountTone;
+}
+export interface RecordTotalsProps {
+    rows: RecordTotalsRow[];
+    total: {
+        label: React.ReactNode;
+        value: React.ReactNode;
+    };
+    memo?: React.ReactNode;
+    'data-testid'?: string;
+}
+export declare const RecordTotals: React.FC<RecordTotalsProps>;

package/dist/patterns/RecordTotals/index.d.ts

@@ -0,0 +1,2 @@
+export { RecordTotals } from './RecordTotals';
+export type { RecordTotalsProps, RecordTotalsRow } from './RecordTotals';

package/dist/patterns/RecordTotals/styles.d.ts

@@ -0,0 +1,19 @@
+export declare const RECORD_TOTALS_WIDE_REM = 37.5;
+export declare const recordTotalsClass: {
+    readonly base: "mx-5 border-t border-pos-hair pb-[1.125rem] pt-2.5";
+    readonly rowWide: "flex items-baseline gap-4";
+    readonly rowNarrow: "flex flex-wrap items-baseline gap-x-3";
+    readonly labelWide: "shrink-0 grow-0 basis-[11.875rem]";
+    readonly labelNarrow: "flex-auto";
+    readonly noteWide: "min-w-0 flex-1";
+    readonly noteNarrow: "order-3 mt-px basis-full";
+    readonly row: "py-2";
+    readonly label: "text-[0.875rem] text-default-900";
+    readonly note: "text-[0.8125rem] text-default-500";
+    readonly value: "ml-auto shrink-0 whitespace-nowrap text-right text-[0.875rem] tabular-nums text-default-900";
+    readonly totalRule: "mt-1.5 border-t border-pos-line";
+    readonly totalRow: "pt-3";
+    readonly totalLabel: "text-[0.9375rem] font-bold text-default-900";
+    readonly totalValue: "ml-auto shrink-0 whitespace-nowrap text-right text-[1.0625rem] font-bold tabular-nums text-default-900";
+    readonly memo: "mt-2 text-[0.78125rem] leading-[1.6] text-default-500";
+};

package/dist/patterns/RefundMethodCards/RefundMethodCards.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { RefundMethodCardsProps } from './types';
+export declare const RefundMethodCards: React.FC<RefundMethodCardsProps>;
+export default RefundMethodCards;