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

package/dist/patterns/ActivityTimeline/ActivityTimeline.d.ts

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

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

@@ -0,0 +1,2 @@
+export { ActivityTimeline } from './ActivityTimeline';
+export type { ActivityTimelineProps, ActivityTimelineEvent } from './types';

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

@@ -0,0 +1,15 @@
+export declare const activityTimelineClass: {
+    readonly list: "m-0 list-none p-0 pl-0.5";
+    readonly event: "flex gap-3.5";
+    readonly eventSpaced: "pb-4";
+    readonly rail: "flex flex-none flex-col items-center";
+    readonly dot: "mt-[0.3125rem] size-2.5 rounded-full";
+    readonly connector: "mt-1 w-[1.5px] flex-1 bg-pos-hair";
+    readonly body: "min-w-0 flex-1 pb-0.5";
+    readonly head: "flex min-w-0 flex-wrap items-baseline gap-x-3";
+    readonly title: "min-w-0 text-[0.90625rem] font-semibold text-default-900 [overflow-wrap:anywhere]";
+    readonly timestamp: "ml-auto min-w-0 max-w-full text-[0.8125rem] tabular-nums text-default-500 [overflow-wrap:anywhere]";
+    readonly detail: "mt-[0.1875rem] min-w-0 text-[0.84375rem] leading-[1.5] text-default-500 [overflow-wrap:anywhere]";
+    readonly actor: "mt-[0.1875rem] min-w-0 text-[0.78125rem] text-default-500 [overflow-wrap:anywhere]";
+    readonly empty: "text-[0.875rem] text-default-500";
+};

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

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { RecordTone } from '../shared/recordTone';
+export interface ActivityTimelineEvent {
+    id: string;
+    tone: RecordTone;
+    title: ReactNode;
+    timestamp: ReactNode;
+    detail?: ReactNode;
+    actor?: ReactNode;
+}
+export interface ActivityTimelineProps {
+    events: ActivityTimelineEvent[];
+    emptyContent?: ReactNode;
+    'data-testid'?: string;
+}

package/dist/patterns/AdminTable/AdminTable.d.ts

@@ -35,6 +35,7 @@ export interface AdminTableProps {
     footer?: React.ReactNode;
     /** Accessible name. Required: a table with no name is unnavigable by screen reader. */
     ariaLabel: string;
+    variant?: 'default' | 'framed';
     className?: string;
     classNames?: AdminTableClassNames;
     'data-testid'?: string;

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

@@ -42,3 +42,9 @@ export declare const adminRowClass = "border-t border-acct-hair transition-color
 export declare const adminTableClass = "w-full";
 /** The strip under the table where a pager sits. */
 export declare const adminTableFooterClass = "border-t border-acct-border px-5 py-3.5";
+export declare const adminTableFramedClass: {
+    readonly base: "overflow-x-auto";
+    readonly th: "h-auto whitespace-nowrap border-b border-pos-hair bg-transparent px-4 py-[0.875rem] text-left text-[0.6875rem] font-semibold uppercase leading-[1.5] tracking-[.055em] text-default-500 first:rounded-none last:rounded-none last:pr-3";
+    readonly tr: "border-t border-pos-hair transition-colors duration-[120ms] first:border-t-0 data-[focus-visible=true]:outline-offset-[-2px] [tbody>&]:hover:bg-default-50 [tbody>&]:data-[hover=true]:bg-default-50 motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+    readonly td: "h-[3.875rem] px-4 data-[focus-visible=true]:outline-offset-[-2px] py-[0.625rem] align-middle text-[0.875rem] text-default-900 last:pr-3";
+};

package/dist/patterns/AdminTextField/AdminTextField.d.ts

@@ -1,53 +1,13 @@
 import { default as React } from 'react';
+import { AdminFieldLabelProps, AdminTextFieldProps } from './types';
 /**
  * The uppercase field label, standalone — for a control this component does
  * not cover (a checkbox group, a read-only preview) that should still be
  * captioned like every other admin field. `suffix` is the lighter tail:
  * "· optional", "· auto-generated, immutable".
- */
-export declare const AdminFieldLabel: React.FC<{
-    children: React.ReactNode;
-    suffix?: React.ReactNode;
-    className?: string;
-    'data-testid'?: string;
-}>;
-interface AdminTextFieldBase {
-    /** Uppercase label above the control. Omit only when an adjacent element already names it. */
-    label?: React.ReactNode;
-    /** Lighter annotation after the label (e.g. `· optional`). Ignored without a label. */
-    labelSuffix?: React.ReactNode;
-    value: string;
-    placeholder?: string;
-    disabled?: boolean;
-    /** Monospace face without the read-only treatment, for codes the user types. */
-    mono?: boolean;
-    /** Claim initial focus. Only for the first field of a dialog, never on a page. */
-    autoFocus?: boolean;
-    /** Small helper or error text under the control. */
-    hint?: React.ReactNode;
-    /** Renders the hint as an error and marks the control invalid. */
-    invalid?: boolean;
-    className?: string;
-    'data-testid'?: string;
-}
-/**
- * `onChange` is REQUIRED unless the field is read-only.
- *
- * This is a controlled input: given a `value` and no handler, React pins it and
- * typing does nothing — a field that looks editable, accepts focus, and silently
- * discards every keystroke. That is indistinguishable from a bug at a glance,
- * and it is what happens by accident when someone renders one to show a value.
  *
- * Showing a value without accepting edits is a real case, so it stays possible;
- * it just has to be said, with `readOnly`, which also renders it as system-owned
- * and announces it correctly.
+ * `isRequired` adds a visible `*` and the screen-reader `requiredLabel`;
+ * `help` adds an ⓘ that opens it in a popover, kept outside the label text.
  */
-export type AdminTextFieldProps = AdminTextFieldBase & ({
-    readOnly: true;
-    onChange?: never;
-} | {
-    readOnly?: false;
-    onChange: (value: string) => void;
-});
+export declare const AdminFieldLabel: React.FC<AdminFieldLabelProps>;
 export declare const AdminTextField: React.FC<AdminTextFieldProps>;
-export {};

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

@@ -1,3 +1,3 @@
 export { AdminFieldLabel, AdminTextField } from './AdminTextField';
-export type { AdminTextFieldProps } from './AdminTextField';
-export { adminFieldErrorClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelSuffixClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './styles';
+export type { AdminTextFieldProps, AdminFieldLabelProps, AdminFieldRequiredProps, AdminFieldHelpProps } from './types';
+export { adminFieldErrorClass, adminFieldHelpButtonClass, adminFieldHelpContentClass, adminFieldHelpIconClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelNoAutoMarkClass, adminFieldLabelRowClass, adminFieldLabelSuffixClass, adminFieldRequiredClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './styles';

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

@@ -22,6 +22,35 @@ export declare const adminFieldLabelClass = "text-[11px] font-semibold uppercase
  * aside, not as part of the field's name.
  */
 export declare const adminFieldLabelSuffixClass = "font-normal normal-case tracking-normal";
+/**
+ * The visible `*` of a required field. `after:content-none` switches off the
+ * `*` HeroUI's own `isRequired` paints into its label slot, so there is one
+ * mark, the one carrying the screen-reader word.
+ */
+export declare const adminFieldRequiredClass = "ms-0.5 text-acct-danger";
+/**
+ * The label row a field with `help` draws itself, in place of HeroUI's.
+ * HeroUI pushes its box down by `font-size-small + 10px` (24px) to make room
+ * for its outside label; this row takes the same height from the same
+ * variable, so a field with help and one without line up in a form row.
+ * `min-h` rather than `h`, so a label that wraps grows the row instead of
+ * running into the box.
+ *
+ * `text-foreground` because that is the color HeroUI's label actually renders
+ * in above the box (`group-data-[filled-within=true]:text-foreground` beats
+ * the `text-acct-muted` it is given), measured at `rgb(17, 24, 28)`.
+ */
+export declare const adminFieldLabelRowClass = "mb-0 min-h-[calc(var(--heroui-font-size-small)_+_10px)] text-foreground";
+/** Added to HeroUI's `label` slot so its `isRequired` mark does not double ours. */
+export declare const adminFieldLabelNoAutoMarkClass = "after:content-none";
+/**
+ * The ⓘ that opens a field's help: a 24px round hit target (WCAG 2.5.8) whose
+ * negative margin keeps the 11px label row from growing to fit it.
+ */
+export declare const adminFieldHelpButtonClass = "ms-0.5 -my-1.5 size-6 min-w-6 align-middle text-acct-sub data-[hover=true]:bg-acct-page data-[hover=true]:text-acct-ink";
+export declare const adminFieldHelpIconClass = "size-4";
+/** The popover the ⓘ opens. Body copy, so sentence case and ink. */
+export declare const adminFieldHelpContentClass = "max-w-xs rounded-xl px-3 py-2 text-xs leading-normal text-acct-ink2";
 /**
  * The 38px box — HeroUI's `inputWrapper` slot, which carries the border and
  * background (the `input` slot is the bare field).

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

@@ -0,0 +1,78 @@
+import { default as React } from 'react';
+/**
+ * The required mark. Plain optional props rather than a union that forces
+ * `requiredLabel` with `isRequired`: a union collapses under
+ * `Omit<AdminTextFieldProps, …>`, so every wrapper that forwards props would
+ * stop compiling.
+ */
+export interface AdminFieldRequiredProps {
+    /** Adds a visible `*` after the label (and its suffix). */
+    isRequired?: boolean;
+    /**
+     * The word screen readers hear for the `*` ("required", "obligatoire").
+     * Pass it with `isRequired`: the `*` itself is hidden from them.
+     */
+    requiredLabel?: string;
+}
+/** Help on demand: an ⓘ button after the label that opens it in a popover. */
+export interface AdminFieldHelpProps {
+    help?: React.ReactNode;
+    /** Accessible name of the ⓘ ("About timezone"). Without it the ⓘ is named by the label text. */
+    helpLabel?: string;
+}
+export interface AdminFieldLabelProps extends AdminFieldRequiredProps, AdminFieldHelpProps {
+    children: React.ReactNode;
+    /** The lighter tail: "· optional", "· auto-generated, immutable". */
+    suffix?: React.ReactNode;
+    /**
+     * `id` of the control this captions. The text then renders as a real
+     * `<label>`, so clicking it focuses the control. The ⓘ stays outside it.
+     */
+    htmlFor?: string;
+    /** `id` of the text element, for a group to point `aria-labelledby` at. */
+    id?: string;
+    className?: string;
+    'data-testid'?: string;
+}
+export interface AdminTextFieldBase extends AdminFieldRequiredProps, AdminFieldHelpProps {
+    /** Uppercase label above the control. Omit only when an adjacent element already names it. */
+    label?: React.ReactNode;
+    /** Lighter annotation after the label (e.g. `· optional`). Ignored without a label. */
+    labelSuffix?: React.ReactNode;
+    value: string;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Monospace face without the read-only treatment, for codes the user types. */
+    mono?: boolean;
+    /** Claim initial focus. Only for the first field of a dialog, never on a page. */
+    autoFocus?: boolean;
+    /** Small helper or error text under the control. */
+    hint?: React.ReactNode;
+    /** Renders the hint as an error and marks the control invalid. */
+    invalid?: boolean;
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * `onChange` is REQUIRED unless the field is read-only.
+ *
+ * This is a controlled input: given a `value` and no handler, React pins it and
+ * typing does nothing — a field that looks editable, accepts focus, and silently
+ * discards every keystroke. That is indistinguishable from a bug at a glance,
+ * and it is what happens by accident when someone renders one to show a value.
+ *
+ * Showing a value without accepting edits is a real case, so it stays possible;
+ * it just has to be said, with `readOnly`, which also renders it as system-owned
+ * and announces it correctly.
+ *
+ * `isRequired` / `help` behave as on {@link AdminFieldLabelProps}, and are
+ * ignored without a `label`. `isRequired` also marks the input
+ * `aria-required`, without the browser's own `required` validation.
+ */
+export type AdminTextFieldProps = AdminTextFieldBase & ({
+    readOnly: true;
+    onChange?: never;
+} | {
+    readOnly?: false;
+    onChange: (value: string) => void;
+});

package/dist/patterns/AdminToolbar/AdminToolbar.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { AdminToolbarSearchWidth, AdminToolbarSize } from './types';
 export interface AdminToolbarProps {
     searchValue: string;
     onSearchChange: (value: string) => void;
@@ -8,12 +9,22 @@ export interface AdminToolbarProps {
     searchPlaceholder?: string;
     /** Leading glyph inside the search box. */
     searchIcon?: React.ReactNode;
+    /** Shows a clear button inside the search box while it holds text. Off by default. */
+    searchClearable?: boolean;
+    /** The clear button's accessible name. `'Clear search'` by default; pass a translation. */
+    clearLabel?: string;
     /** Filters, sort pickers, a toggle — laid out after the search box. */
     children?: React.ReactNode;
     /** Pushed to the far right, for a primary action. */
     trailing?: React.ReactNode;
-    /** Search box width. `'md'` (280px) by default, `'lg'` (360px) for wide tables. */
-    searchWidth?: 'md' | 'lg';
+    /**
+     * Search box width. `'md'` (280px; 250px framed) by default, `'lg'` (360px)
+     * for wide tables, `'fill'` to grow into the space the row leaves.
+     */
+    searchWidth?: AdminToolbarSearchWidth;
+    /** `'lg'` is the 48px touch field with 16px text; `'md'` (default) keeps each variant's own height. */
+    size?: AdminToolbarSize;
+    variant?: 'default' | 'framed';
     className?: string;
     'data-testid'?: string;
 }

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

@@ -1,2 +1,3 @@
 export { AdminToolbar } from './AdminToolbar';
 export type { AdminToolbarProps } from './AdminToolbar';
+export type { AdminToolbarSearchWidth, AdminToolbarSize } from './types';

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

@@ -0,0 +1,49 @@
+import { AdminToolbarSearchWidth, AdminToolbarSize } from './types';
+/** The default variant: a pixel-port of the accounting mockups, so its values stay in px. */
+export declare const DEFAULT_CLASS: {
+    readonly base: "flex flex-wrap items-center gap-3 mb-4";
+    readonly trailing: "ml-auto";
+    readonly icon: "flex text-acct-muted";
+    readonly inputWrapper: string;
+    readonly input: "text-[13.5px] text-acct-ink";
+};
+export declare const DEFAULT_SEARCH_WIDTH: Record<AdminToolbarSearchWidth, string>;
+export declare const FRAMED_WIDE_REM = 48;
+export declare const FRAMED_CLASS: {
+    readonly base: "flex flex-wrap items-center gap-2.5 border-b border-pos-hair px-4 py-[0.875rem]";
+    readonly narrow: "[&_[data-slot=filter-select-group]]:flex [&_[data-slot=filter-select-group]]:flex-wrap [&_[data-slot=filter-select-group]]:!max-w-none [&_[data-slot=filter-select]]:!max-w-none [&_[data-slot=filter-select]]:!min-w-[calc(50%-0.3125rem)] [&_[data-slot=filter-select]]:grow [&_[data-slot=filter-select]]:basis-[calc(50%-0.3125rem)]";
+    readonly searchWide: "ml-auto";
+    /** Fill wins over the narrow rule: it already takes the row, and keeps a trailing action beside it until 12.5rem. */
+    readonly searchFill: "min-w-[12.5rem] flex-1";
+    readonly searchNarrow: "basis-full";
+    readonly inputBaseNarrow: "w-full";
+    readonly inputWrapper: "h-[2.375rem] min-h-[2.375rem] !h-[2.375rem] rounded-[0.625rem] border border-pos-field bg-white pl-3 pr-3 shadow-none data-[hover=true]:border-pos-field group-data-[focus=true]:border-primary";
+    readonly innerWrapper: "gap-[0.3125rem]";
+    readonly input: "text-ellipsis text-[0.875rem] text-default-900 data-[has-start-content=true]:ps-0.5";
+    readonly icon: "flex text-default-400 [&_svg]:size-4";
+};
+export declare const FRAMED_SEARCH_WIDTH: Record<AdminToolbarSearchWidth, string>;
+/**
+ * `lg` is the POS register's touch row: a 48px field with 16px text and a 20px
+ * glyph, in rem so the text-size setting scales it. Merged after either
+ * variant's own classes, so it overrides their height and type only.
+ */
+export declare const LG_CLASS: {
+    readonly inputWrapper: "h-12 min-h-12 !h-12";
+    readonly input: "text-base";
+    readonly icon: "[&_svg]:size-5";
+};
+/**
+ * The clear control: a DS `Button`, so it is in the tab order and takes a
+ * translated name, unlike HeroUI's `isClearable` (tabIndex -1, English label).
+ * 32px inside the 38–40px fields, 44px inside the 48px one.
+ */
+export declare const CLEAR_CLASS: {
+    readonly button: "shrink-0 text-default-500";
+    /** The browser's own search "x" would sit beside ours. */
+    readonly input: "[&::-webkit-search-cancel-button]:appearance-none";
+};
+export declare const CLEAR_SIZE_CLASS: Record<AdminToolbarSize, {
+    button: string;
+    icon: string;
+}>;

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

@@ -0,0 +1,2 @@
+export type AdminToolbarSearchWidth = 'md' | 'lg' | 'fill';
+export type AdminToolbarSize = 'md' | 'lg';

package/dist/patterns/AmountList/AmountList.d.ts

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

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

@@ -0,0 +1,2 @@
+export { AmountList } from './AmountList';
+export type { AmountListProps, AmountListRow } from './types';

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

@@ -0,0 +1,23 @@
+export declare const amountListClass: {
+    readonly base: "w-full";
+    readonly list: "m-0 list-none p-0";
+    readonly item: "border-t border-pos-hair";
+    readonly row: "flex w-full items-start gap-3 px-5 py-3 text-left";
+    readonly rowInteractive: "cursor-pointer outline-none transition-colors hover:bg-default-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+    readonly dot: "mt-[0.4375rem] size-[0.4375rem] shrink-0 rounded-full";
+    readonly body: "flex min-w-0 flex-1 flex-col";
+    readonly title: "text-[0.875rem] font-semibold text-default-900 [overflow-wrap:anywhere] [text-wrap:pretty]";
+    readonly meta: "mt-1 flex min-w-0 flex-wrap items-center gap-[0.4375rem] text-[0.78125rem] text-default-500";
+    readonly reference: "min-w-0 font-normal text-primary [overflow-wrap:anywhere]";
+    readonly separator: "text-default-400";
+    readonly timestamp: "tabular-nums";
+    readonly detail: "mt-[0.1875rem] text-[0.78125rem] text-default-500 [overflow-wrap:anywhere] [text-wrap:pretty]";
+    readonly trailing: "max-w-[45%] min-w-min shrink-0 text-right text-[0.90625rem]";
+    readonly amount: "whitespace-nowrap text-[0.90625rem] font-bold tabular-nums text-default-900";
+    readonly note: "text-[0.78125rem] italic text-default-500 [overflow-wrap:anywhere]";
+    readonly footer: "flex items-baseline gap-3 border-t border-pos-line bg-pos-page px-5 py-[0.8125rem]";
+    readonly footerLabel: "min-w-0 text-[0.875rem] font-bold text-default-900 [overflow-wrap:anywhere]";
+    readonly footerAmount: "ml-auto whitespace-nowrap text-[1rem] font-bold tabular-nums text-default-900";
+    readonly footerNote: "border-t border-pos-hair px-5 py-[0.8125rem] text-[0.78125rem] leading-[1.6] text-default-500";
+    readonly empty: "px-5 pb-5 pt-[0.875rem] text-[0.875rem] text-default-500";
+};

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

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { RecordTone } from '../shared/recordTone';
+export interface AmountListRow {
+    id: string;
+    tone: RecordTone;
+    title: ReactNode;
+    reference?: ReactNode;
+    timestamp?: ReactNode;
+    detail?: ReactNode;
+    amount?: ReactNode;
+    amountTone?: 'positive' | 'negative' | 'neutral';
+    note?: ReactNode;
+    noteTone?: 'muted' | 'warn';
+}
+export interface AmountListProps {
+    rows: AmountListRow[];
+    footer?: {
+        label: ReactNode;
+        amount: ReactNode;
+        amountTone?: 'positive' | 'negative' | 'neutral';
+        note?: ReactNode;
+    };
+    emptyContent?: ReactNode;
+    onSelect?: (id: string) => void;
+    'data-testid'?: string;
+}

package/dist/patterns/CardList/CardList.d.ts

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

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

@@ -0,0 +1,2 @@
+export { CardList } from './CardList';
+export type { CardListProps, CardListItem } from './types';

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

@@ -0,0 +1,20 @@
+export declare const cardListClass: {
+    readonly base: "w-full";
+    readonly list: "m-0 list-none p-0";
+    readonly item: "relative border-b border-pos-hair last:border-b-0";
+    readonly card: "block w-full px-4 py-[0.875rem] text-left";
+    readonly cardInteractive: "cursor-pointer outline-none transition-colors hover:bg-default-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+    readonly headline: "flex items-baseline gap-2.5";
+    readonly headlineWithActions: "pr-[3.25rem]";
+    readonly title: "min-w-0 text-[0.90625rem] font-semibold text-primary [overflow-wrap:anywhere]";
+    readonly amount: "ml-auto shrink-0 whitespace-nowrap text-[0.9375rem] font-bold tabular-nums text-default-900";
+    readonly actions: "absolute right-4 top-[0.1875rem] z-[1]";
+    readonly chips: "mt-[0.5625rem] flex flex-wrap gap-1.5";
+    readonly chipsLine: "mt-[0.5625rem] flex items-center gap-2.5";
+    readonly chipsInline: "flex min-w-0 flex-wrap gap-1.5";
+    readonly rows: "mt-[0.5625rem] block";
+    readonly row: "flex items-baseline gap-3 py-[0.1875rem] text-[0.8125rem]";
+    readonly rowLabel: "shrink-0 text-default-500";
+    readonly rowValue: "ml-auto min-w-0 text-right text-default-700 [overflow-wrap:anywhere]";
+    readonly skeletonRow: "border-b border-pos-hair p-4 last:border-b-0";
+};

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

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export interface CardListItem {
+    id: string;
+    title: ReactNode;
+    amount?: ReactNode;
+    chips?: ReactNode;
+    rows?: Array<{
+        label: string;
+        value: ReactNode;
+    }>;
+    actions?: ReactNode;
+}
+export interface CardListProps {
+    items: CardListItem[];
+    ariaLabel: string;
+    onSelect?: (id: string) => void;
+    loading?: boolean;
+    skeletonCount?: number;
+    'data-testid'?: string;
+}

package/dist/patterns/CardStack/CardStack.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export type CardStackLayout = 'stack' | 'grid';
+export interface CardStackProps extends React.HTMLAttributes<HTMLDivElement> {
+    layout?: CardStackLayout;
+    'data-testid'?: string;
+}
+export declare const CardStack: React.FC<CardStackProps>;

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

@@ -0,0 +1,2 @@
+export { CardStack } from './CardStack';
+export type { CardStackProps, CardStackLayout } from './CardStack';

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

@@ -0,0 +1,2 @@
+import { CardStackLayout } from './CardStack';
+export declare const cardStackClass: Record<CardStackLayout, string>;

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

@@ -29,6 +29,10 @@ export interface CashTenderLabels {
      * `{due}` is replaced with the formatted due amount.
      */
     insufficientMessageTemplate?: string;
+    exactAmountLabel?: string;
+    exactAmountAriaTemplate?: string;
+    quickAmountsLabel?: string;
+    quickAmountAriaTemplate?: string;
 }
 export interface CashTenderFormProps {
     /**
@@ -70,6 +74,8 @@ export interface CashTenderFormProps {
      * the guard is value-based. Omit for no cap.
      */
     maxAmount?: number;
+    quickAmounts?: readonly number[];
+    showExactAmount?: boolean;
     /**
      * Auto-focus the Cash Received field when this component mounts.
      * Pair with `key={...}` from the host to re-trigger focus on every

package/dist/patterns/CellText/CellText.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { SignedAmountTone } from '../shared/recordTone';
+export type CellTextVariant = 'text' | 'reference' | 'amount';
+export interface CellTextProps {
+    variant?: CellTextVariant;
+    tone?: SignedAmountTone;
+    secondary?: React.ReactNode;
+    children: React.ReactNode;
+    'data-testid'?: string;
+}
+export declare const CellText: React.FC<CellTextProps>;
+export interface ChipStackProps {
+    children: React.ReactNode;
+    'data-testid'?: string;
+}
+export declare const ChipStack: React.FC<ChipStackProps>;

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

@@ -0,0 +1,2 @@
+export { CellText, ChipStack } from './CellText';
+export type { CellTextProps, CellTextVariant, ChipStackProps } from './CellText';

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

@@ -0,0 +1,7 @@
+import { CellTextVariant } from './CellText';
+export declare const cellTextClass: {
+    readonly base: "whitespace-nowrap text-[0.875rem]";
+    readonly secondary: "text-default-500";
+    readonly chipStack: "inline-flex flex-col items-start gap-[0.3125rem]";
+};
+export declare const cellTextVariantClass: Record<CellTextVariant, string>;

package/dist/patterns/DiscardGuard/DiscardGuard.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { DiscardGuardController } from './useDiscardGuard';
+/** @internal Used by `ModalPanels` to make each panel its own guard scope. */
+export declare const DiscardGuardScope: React.FC<{
+    scope: string;
+    children: React.ReactNode;
+}>;
+export interface DiscardGuardProps {
+    /** The controller from `useDiscardGuard()`. */
+    guard: DiscardGuardController;
+    children: React.ReactNode;
+    /** Confirmation heading. Default `'Discard changes?'`. */
+    title?: string;
+    /** What is lost by confirming. Default `'What you entered will be lost.'`. */
+    description?: React.ReactNode;
+    /** Confirm (discard) label. Default `'Discard'`. */
+    confirmLabel?: string;
+    /** Label of the action that returns to the form. Default `'Keep editing'`. */
+    keepEditingLabel?: string;
+    /** Root test id of the confirmation; derives `-confirm` and `-dismiss`. Default `'discard-guard'`. */
+    'data-testid'?: string;
+}
+export declare const DiscardGuard: React.FC<DiscardGuardProps>;

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

@@ -0,0 +1,25 @@
+import { DirtyReport, Leave } from './useDiscardGuard';
+export interface DiscardGuardContextValue {
+    guardScope: (scope: string | null, leave: Leave) => void;
+    bypass: (leave: Leave) => void;
+    report: (id: string, report: DirtyReport) => void;
+    unreport: (id: string) => void;
+}
+export declare const DiscardGuardContext: import('react').Context<DiscardGuardContextValue>;
+/** The scope a reporter or a Back press belongs to. `ModalPanels` sets one per panel. */
+export declare const DiscardScopeContext: import('react').Context<string | null>;
+/**
+ * Call from a form while it is mounted. Unmounting withdraws the report, so a
+ * form that is gone never holds an exit hostage.
+ */
+export declare function useReportUnsavedChanges(isDirty: boolean): void;
+export interface DiscardGuardActions {
+    /** Leave the whole surface: asks when any form is dirty. */
+    guard: (leave: Leave) => void;
+    /** Leave without asking — the input was saved. */
+    bypass: (leave: Leave) => void;
+}
+/** The guard's exits, for components rendered inside `<DiscardGuard>`. */
+export declare function useDiscardGuardActions(): DiscardGuardActions;
+/** @internal Back inside a panel: asks only when that panel holds unsaved input. */
+export declare function useScopedDiscardGuard(): (leave: Leave) => void;

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

@@ -0,0 +1,6 @@
+export { DiscardGuard } from './DiscardGuard';
+export type { DiscardGuardProps } from './DiscardGuard';
+export { useDiscardGuard } from './useDiscardGuard';
+export type { DiscardGuardController } from './useDiscardGuard';
+export { useDiscardGuardActions, useReportUnsavedChanges } from './context';
+export type { DiscardGuardActions } from './context';

package/dist/patterns/DiscardGuard/useDiscardGuard.d.ts

@@ -0,0 +1,38 @@
+export type Leave = () => void;
+/** One mounted reporter: which scope (panel) it belongs to and whether it holds unsaved input. */
+export interface DirtyReport {
+    scope: string | null;
+    isDirty: boolean;
+}
+interface PendingLeave {
+    leave: Leave;
+}
+/** Wiring `<DiscardGuard>` reads; not part of the consumer contract. */
+interface DiscardGuardInternals {
+    pending: PendingLeave | null;
+    /** Bumped on confirm so the dialog unmounts in the same commit as the exit (see the file header). */
+    confirmKey: number;
+    confirm: () => void;
+    keepEditing: () => void;
+    report: (id: string, report: DirtyReport) => void;
+    unreport: (id: string) => void;
+    guardScope: (scope: string | null, leave: Leave) => void;
+}
+export interface DiscardGuardController {
+    /** True while any mounted form reports unsaved input. */
+    readonly isDirty: boolean;
+    /** Runs `leave` now, or after the operator confirms when a form is dirty. */
+    guard: (leave: Leave) => void;
+    /** Runs `leave` without asking — for exits that keep the input, like a successful save. */
+    bypass: (leave: Leave) => void;
+    /**
+     * Wraps a modal's `onOpenChange` so its close button, Escape and outside
+     * click go through `guard`. Opening passes straight through.
+     */
+    guardOpenChange: (onOpenChange: (open: boolean) => void) => (open: boolean) => void;
+    /** @internal Read by `<DiscardGuard>`. */
+    readonly internals: DiscardGuardInternals;
+}
+/** Creates the guard. Call it in the component that owns the modal. */
+export declare function useDiscardGuard(): DiscardGuardController;
+export {};

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

@@ -5,5 +5,5 @@
  * Ensures exclusive selection (preset OR custom).
  */
 export { DonationAmounts } from './DonationAmounts';
-export type { DonationAmount, SelectedDonation, DonationLabels, DonationAmountsProps } from './types';
+export type { DonationAmount, SelectedDonation, DonationLabels, DonationAmountsProps, DonationAmountsVariant, } from './types';
 export { formatCurrency, parseCurrency } from './utils/currency';