@veevarts/design-system 2.0.0-beta.7 → 2.0.0-csm.1

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

@@ -0,0 +1,8 @@
+import { KeyValueRowsDensity } from './KeyValueRows';
+export declare const keyValueRowsClass: {
+    readonly list: "m-0 divide-y divide-pos-hair";
+    readonly row: "flex items-baseline gap-3";
+    readonly label: "min-w-0 text-[0.84375rem] text-default-500";
+    readonly value: "m-0 ml-auto flex min-w-0 flex-wrap justify-end gap-[0.3125rem] text-right text-[0.875rem] text-default-900 [overflow-wrap:anywhere]";
+};
+export declare const keyValueRowPadding: Record<KeyValueRowsDensity, string>;

package/dist/patterns/LineItemRows/LineItemRows.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface LineItemRow {
+    id: string;
+    name: React.ReactNode;
+    details?: React.ReactNode[];
+    amount: React.ReactNode;
+    originalAmount?: React.ReactNode;
+    chip?: React.ReactNode;
+    tone?: 'violet';
+}
+export interface LineItemRowsProps {
+    items: LineItemRow[];
+    ariaLabel?: string;
+    originalAmountLabel?: string;
+    'data-testid'?: string;
+}
+export declare const LineItemRows: React.FC<LineItemRowsProps>;

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

@@ -0,0 +1,2 @@
+export { LineItemRows } from './LineItemRows';
+export type { LineItemRowsProps, LineItemRow } from './LineItemRows';

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

@@ -0,0 +1,13 @@
+export declare const lineItemRowsClass: {
+    readonly list: "m-0 list-none p-0";
+    readonly row: "flex items-start gap-[0.875rem] border-t border-pos-hair px-5 py-3";
+    readonly body: "min-w-0 flex-1";
+    readonly name: "text-[0.90625rem] font-semibold text-default-900 [overflow-wrap:anywhere] [text-wrap:pretty]";
+    readonly details: "mt-[0.3125rem] flex flex-wrap items-center gap-[0.4375rem] text-[0.8125rem] text-default-500";
+    readonly separator: "text-default-400";
+    readonly detail: "tabular-nums";
+    readonly trailing: "flex shrink-0 flex-col items-end gap-1.5 text-right";
+    readonly amounts: "inline-flex items-baseline gap-2";
+    readonly original: "text-[0.8125rem] tabular-nums text-default-500 line-through";
+    readonly amount: "whitespace-nowrap text-[0.9375rem] font-bold tabular-nums text-default-900";
+};

package/dist/patterns/ListPanel/ListPanel.d.ts

@@ -38,6 +38,8 @@ export interface ListPanelProps {
     emptyContent?: React.ReactNode;
     /** The table/list rendered when none of the async states apply. */
     children?: React.ReactNode;
+    toolbar?: React.ReactNode;
+    variant?: 'default' | 'framed';
     className?: string;
     classNames?: ListPanelClassNames;
     'data-testid'?: string;

package/dist/patterns/LoadMoreFooter/LoadMoreFooter.d.ts

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

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

@@ -0,0 +1,2 @@
+export { LoadMoreFooter } from './LoadMoreFooter';
+export type { LoadMoreFooterProps, LoadMoreStatus } from './types';

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

@@ -0,0 +1,7 @@
+export declare const loadMoreFooterClass: {
+    readonly base: "flex flex-wrap items-center justify-center gap-2.5 border-t border-pos-hair px-5 py-[0.875rem] text-[0.84375rem] text-default-500";
+    readonly idle: "w-full";
+    readonly sentinel: "h-px w-full";
+    readonly spinner: "inline-flex";
+    readonly error: "text-pos-danger";
+};

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

@@ -0,0 +1,10 @@
+export type LoadMoreStatus = 'idle' | 'loading' | 'error' | 'end';
+export interface LoadMoreFooterProps {
+    status: LoadMoreStatus;
+    onLoadMore: () => void;
+    loadingLabel: string;
+    errorLabel: string;
+    retryLabel: string;
+    endLabel?: string;
+    'data-testid'?: string;
+}

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

@@ -9,6 +9,8 @@ export interface MetaCardRowProps {
     label: string;
     /** Associates the caption with the control it labels. */
     htmlFor?: string;
+    /** Marks the caption with a red asterisk; pair it with the control's own required state. */
+    required?: boolean;
     children: ReactNode;
     className?: string;
     'data-testid'?: string;

package/dist/patterns/ModalPanels/ModalPanels.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+import { ModalPanelEntry, ModalPanelsController } from './useModalPanels';
+export interface ModalPanelsProps<TPanel> {
+    /** The stack from `useModalPanels()`. */
+    panels: ModalPanelsController<TPanel>;
+    /** Renders one panel. Called for every entry on the stack; only the top one is shown. */
+    children: (panel: TPanel, entry: ModalPanelEntry<TPanel>) => React.ReactNode;
+}
+export declare function ModalPanels<TPanel>({ panels, children }: ModalPanelsProps<TPanel>): React.ReactElement;
+export interface ModalPanelHeaderProps {
+    /** Panel title, rendered as an `h2`. */
+    title: React.ReactNode;
+    /**
+     * Where Back goes. Default: the panel beneath, from the stack. Either way
+     * it goes through the discard guard, scoped to this panel.
+     */
+    onBack?: () => void;
+    /** Back's accessible name. Default `'Back'`. */
+    backLabel?: string;
+    isBackDisabled?: boolean;
+    /** Back button size: `'md'` 40px, `'lg'` 48px (touch registers). Default `'md'`. */
+    size?: 'md' | 'lg';
+    /** Content at the end of the header, before the modal's close button. */
+    actions?: React.ReactNode;
+    className?: string;
+    /** Root test id; derives `-back` and `-title`. Default `'modal-panel-header'`. */
+    'data-testid'?: string;
+}
+/**
+ * Back + title for a panel pushed over the first one. Back is navigation, not
+ * one of the footer's decisions, so it lives top-left where it never moves.
+ * It is shown when there is somewhere to go back to (or `onBack` is given),
+ * and it is the element focus lands on when the panel opens.
+ */
+export declare const ModalPanelHeader: React.FC<ModalPanelHeaderProps>;

package/dist/patterns/ModalPanels/context.d.ts

@@ -0,0 +1,20 @@
+export interface ModalPanelContextValue {
+    isActive: boolean;
+    canGoBack: boolean;
+    back: () => void;
+    setEntryFocus: (node: HTMLElement | null) => void;
+}
+export declare const ModalPanelContext: import('react').Context<ModalPanelContextValue | null>;
+export interface ModalPanelState {
+    /** True for the panel on screen. */
+    isActive: boolean;
+    /** True when a panel lies beneath this one. */
+    canGoBack: boolean;
+    /** Returns to the panel beneath — asking first if this panel holds unsaved input. */
+    back: () => void;
+}
+/**
+ * The enclosing panel, for controls other than the header's Back — a footer
+ * Cancel, say. Outside `ModalPanels` it reports a lone, active panel.
+ */
+export declare function useModalPanel(): ModalPanelState;

package/dist/patterns/ModalPanels/focus.d.ts

@@ -0,0 +1,44 @@
+/** First element in `container` a Tab press would reach, skipping anything inside a hidden or inert subtree. */
+export declare function firstTabbable(container: HTMLElement): HTMLElement | null;
+/** Still in `container` and still able to take focus — not removed, disabled or hidden since it was recorded. */
+export declare function canStillFocus(element: HTMLElement | null, container: HTMLElement): element is HTMLElement;
+/**
+ * A popup (menu, listbox) currently open from a trigger inside `container`,
+ * found through the trigger's own ARIA wiring: `aria-expanded="true"` plus
+ * `aria-controls` naming the popup.
+ *
+ * Only POPUPS: the trigger declares `aria-haspopup`, or the element it
+ * controls has a popup role. An expanded accordion or disclosure carries the
+ * same `aria-expanded` + `aria-controls` pair, but its region is page content
+ * that cannot take focus; treating it as a popup sent focus nowhere.
+ */
+export declare function openPopupFrom(container: HTMLElement): HTMLElement | null;
+/**
+ * Fired by react-aria's `FocusScope` on the element it is about to restore
+ * focus to when an overlay (a menu, a select, a dialog) unmounts; cancelable,
+ * and bubbles from that element. It is react-aria's own seam for redirecting a
+ * restore, and the reason no timer is needed here (see the file header).
+ */
+export declare const FOCUS_RESTORE_EVENT = "react-aria-focus-scope-restore";
+/** DOM handles per panel key, and which panel is on screen. Plain bookkeeping; never read during render. */
+export declare class PanelFocusMemory {
+    private readonly panels;
+    private active;
+    setContainer(key: string, node: HTMLElement | null): void;
+    setEntry(key: string, node: HTMLElement | null): void;
+    remember(key: string, node: HTMLElement): void;
+    /** The panel now on screen, and whether the operator came back to it (vs. opened it). */
+    setActive(key: string, isReturn: boolean): void;
+    /**
+     * Puts focus in the panel on screen, unless it is already there. Returning:
+     * the element that last had focus in it — the opener of the panel just left.
+     * Entering, or when that element is gone: Back, then the first tabbable element.
+     */
+    focusActive(): void;
+    /**
+     * Focus was dropped by an overlay closing over a hidden panel. If the
+     * operator has since opened a menu or select in the panel on screen, that
+     * is where they are; otherwise it is the panel's own target.
+     */
+    recoverFocus(): void;
+}

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

@@ -0,0 +1,6 @@
+export { ModalPanels, ModalPanelHeader } from './ModalPanels';
+export type { ModalPanelsProps, ModalPanelHeaderProps } from './ModalPanels';
+export { useModalPanel } from './context';
+export type { ModalPanelState } from './context';
+export { useModalPanels } from './useModalPanels';
+export type { ModalPanelsController, ModalPanelEntry } from './useModalPanels';

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

@@ -0,0 +1,13 @@
+/**
+ * ModalPanelHeader slots. The header mirrors HeroUI's `ModalHeader` slot
+ * (`flex py-4 px-6 flex-initial text-large font-semibold`) so a panel header
+ * and the first panel's `ModalHeader` line up when they swap.
+ *
+ * `pl-4`, not `px-6`: the Back button's hit area is wider than its 20px glyph,
+ * so starting it 16px in puts the arrow on the 24px content edge. `pr-12`
+ * leaves the corner to HeroUI's absolutely-positioned close button.
+ */
+export declare const modalPanelHeaderClass = "flex flex-initial items-center gap-2 py-4 pl-4 pr-12 text-large font-semibold";
+export declare const modalPanelTitleClass = "min-w-0 flex-1 truncate text-large font-semibold";
+export declare const modalPanelActionsClass = "flex shrink-0 items-center gap-2";
+export declare const modalPanelBackIconClass = "size-5";

package/dist/patterns/ModalPanels/useModalPanels.d.ts

@@ -0,0 +1,30 @@
+/** One panel on the stack. `key` is unique per visit, so pushing the same panel twice mounts it twice. */
+export interface ModalPanelEntry<TPanel> {
+    readonly key: string;
+    readonly panel: TPanel;
+}
+export interface ModalPanelsController<TPanel> {
+    /** The panel on top — the one on screen. */
+    readonly current: TPanel;
+    /** Bottom to top. Every entry stays mounted; only the last one is shown. */
+    readonly entries: readonly ModalPanelEntry<TPanel>[];
+    /** True when there is a panel beneath the current one. */
+    readonly canGoBack: boolean;
+    /** Opens `panel` on top; Back returns to the one showing now. */
+    push: (panel: TPanel) => void;
+    /** Returns to the panel beneath. No-op on the first panel. */
+    back: () => void;
+    /** Swaps the top panel for `panel` (e.g. a saved form for its detail); Back skips the old one. */
+    replace: (panel: TPanel) => void;
+    /** Starts over with a single fresh panel — `initial` unless another is given. */
+    reset: (panel?: TPanel) => void;
+}
+/**
+ * The back-stack behind `ModalPanels`: which panel is on screen, and where Back
+ * goes from it. Back goes where the operator came from because the stack
+ * remembers it — no per-panel "return to" flags to keep in step.
+ *
+ * Owned by the component that owns the modal, so it outlives the modal's
+ * content; call `reset()` when the modal closes to start the next visit fresh.
+ */
+export declare function useModalPanels<TPanel>(initial: TPanel): ModalPanelsController<TPanel>;

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>>;