@veevarts/design-system 2.1.0-beta.2 → 2.1.0-beta.22

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

@@ -0,0 +1,16 @@
+import { JSX } from 'react';
+import { NoticeProps } from './type';
+/**
+ * An inline message with a severity: the DS answer to HeroUI's
+ * `Alert variant="flat" isClosable={false}` repeated per call, and to the
+ * hand-rolled red lines and boxes of the POS.
+ *
+ * Danger and warning are `role="alert"` (assertive), info and success
+ * `role="status"` (polite). Copy comes in as props; the caller owns i18n.
+ * The only motion is the dismiss button's press feedback, which is dropped
+ * when the OS or the POS asks for reduced motion.
+ */
+export declare function Notice({ tone, variant, title, description, actions, onDismiss, dismissLabel, role, className, 'data-testid': dataTestId, }: NoticeProps): JSX.Element;
+export declare namespace Notice {
+    var displayName: string;
+}

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

@@ -0,0 +1,2 @@
+export { Notice } from './Notice';
+export type { NoticeProps, NoticeTone, NoticeVariant } from './type';

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;