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

package/dist/patterns/AssistantMessage/AssistantMessage.d.ts

@@ -0,0 +1,17 @@
+import { JSX } from 'react';
+import { AssistantMessageProps } from './types';
+/**
+ * One turn of a conversation with an assistant: the person's on the right in
+ * a neutral bubble, the assistant's on the left at full width under a small
+ * mark, with no bubble of its own. Content, copy and controls all come in as props; the pattern renders
+ * whatever `children` it is given (plain text or a rendered answer).
+ *
+ * Each turn is an `<article>` named by its author, so a screen reader can move
+ * turn by turn. It announces nothing on its own: run-state announcements
+ * belong to `AssistantNotice`.
+ */
+export declare function AssistantMessage({ author, authorLabel, children, status, statusLabel, meta, actions, icon, className, classNames, 'data-testid': dataTestId, }: AssistantMessageProps): JSX.Element;
+export declare namespace AssistantMessage {
+    var displayName: string;
+}
+export default AssistantMessage;

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

@@ -0,0 +1,2 @@
+export { AssistantMessage } from './AssistantMessage';
+export type { AssistantMessageAuthor, AssistantMessageBaseProps, AssistantMessageClassNames, AssistantMessageProps, AssistantMessageStatus, AssistantMessageStatusLabel, AssistantMessageStatusProps, } from './types';

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

@@ -0,0 +1,45 @@
+import { AssistantMessageStatus } from './types';
+/**
+ * Every slot class of `AssistantMessage`.
+ *
+ * Colours are HeroUI semantic tokens (they flip under `.dark`) plus the `ai-*`
+ * palette (which flips with them). No `bg-white`: the assistant pieces carry
+ * their own dark values because the DS has no dark theme.
+ *
+ * The assistant's turn paints nothing: it is full width with no bubble, so it
+ * shows whatever surface the app puts it on (a card, an inset box, a
+ * translucent dark panel). Painting `ai-assistant-bubble` edge to edge with no
+ * padding made a bare block on any surface but HeroUI `content1`.
+ *
+ * Secondary text is `default-500` on a plain card and `default-600` inside a
+ * fill: default-500 measures 4.40:1 on the light user bubble, under AA. See
+ * `src/tokens/__test__/assistant-surface.test.ts`.
+ */
+export declare const assistantMessageClass: {
+    readonly base: "flex w-full min-w-0 flex-col gap-1.5";
+    readonly baseUser: "items-end";
+    readonly baseAssistant: "items-start";
+    readonly header: "flex min-w-0 max-w-full flex-wrap items-center gap-x-2 gap-y-0.5";
+    readonly mark: "inline-flex size-6 flex-none items-center justify-center rounded-full bg-ai-fill text-ai-accent";
+    readonly author: "min-w-0 text-sm font-semibold text-ai-accent [overflow-wrap:anywhere]";
+    readonly meta: "min-w-0 text-xs tabular-nums text-default-500 [overflow-wrap:anywhere]";
+    readonly body: "min-w-0 text-sm leading-relaxed text-foreground [overflow-wrap:anywhere]";
+    readonly bodyUser: "max-w-[85%] rounded-2xl rounded-br-md bg-ai-user-bubble px-4 py-2.5";
+    readonly bodyAssistant: "w-full";
+    /** A plain string keeps the line breaks the person typed. */
+    readonly plain: "whitespace-pre-wrap";
+    readonly status: "m-0 flex min-w-0 items-center gap-1.5 text-xs font-medium [overflow-wrap:anywhere]";
+    /**
+     * The status mark's own 14px box. Without words it is all a sighted reader
+     * sees, so it keeps its place before Iconify has loaded the icon.
+     */
+    readonly statusIcon: "inline-flex size-3.5 flex-none";
+    readonly actions: "flex flex-wrap items-center gap-1";
+    /** The person's name, for screen readers only. */
+    readonly userLabel: "sr-only";
+    /** The default status word when `statusLabel` is empty, for screen readers only: the icon shows it. */
+    readonly statusFallback: "sr-only";
+};
+export declare const assistantMessageStatusClass: Record<Exclude<AssistantMessageStatus, 'complete'>, string>;
+export declare const ASSISTANT_MESSAGE_STATUS_ICON: Record<Exclude<AssistantMessageStatus, 'complete'>, string>;
+export declare const ASSISTANT_MESSAGE_DEFAULT_ICON = "solar:stars-minimalistic-linear";

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

@@ -0,0 +1,84 @@
+import { ReactNode } from 'react';
+/** Who wrote the turn. */
+export type AssistantMessageAuthor = 'user' | 'assistant';
+/**
+ * How the turn ended. `stopped` means the person stopped it; `error` means
+ * it failed. Either way the content that arrived is still shown.
+ */
+export type AssistantMessageStatus = 'complete' | 'stopped' | 'error';
+/** Extra classes per slot, merged after the pattern's own. */
+export interface AssistantMessageClassNames {
+    /** The `<article>`. */
+    base?: string;
+    /** The row with the mark, the name and `meta`. */
+    header?: string;
+    /** The content. Add padding and `bg-ai-assistant-bubble` here to draw the assistant's turn as a bubble. */
+    body?: string;
+    /** The status line of a stopped or failed turn. */
+    status?: string;
+    /** The secondary line. */
+    meta?: string;
+    /** The controls under the turn. */
+    actions?: string;
+}
+/** A label that says something: text or an element, never empty or absent. */
+export type AssistantMessageStatusLabel = Exclude<ReactNode, null | undefined | boolean>;
+/**
+ * A stopped or failed turn must say so in words: without a label it would
+ * read as a finished answer, to sighted people and screen readers alike. The
+ * union makes the label required whenever `status` is not `complete`, and
+ * still accepts a `status` computed at runtime as long as a label comes with it.
+ *
+ * The type is not the only guard: an empty string, an `undefined` from an
+ * unchecked lookup, or a wrapper that loses the union all reach the component
+ * without words, so it still draws the status icon with a default word for
+ * screen readers ("Stopped" / "Failed").
+ *
+ * A wrapper keeps the requirement by omitting from the base props, not from
+ * the union: `Omit<AssistantMessageBaseProps, 'author'> & AssistantMessageStatusProps`.
+ */
+export type AssistantMessageStatusProps = {
+    /** Defaults to `complete`. */
+    status?: 'complete';
+    /** Ignored on a complete turn. */
+    statusLabel?: ReactNode;
+} | {
+    /** The person stopped the turn, or it failed. The content that arrived is still shown. */
+    status: 'stopped' | 'error';
+    /** Shown under the content, e.g. "Stopped by you". Required: it is the only text that says so. */
+    statusLabel: AssistantMessageStatusLabel;
+};
+export interface AssistantMessageBaseProps {
+    /**
+     * Who wrote the turn. Named `author`, not `role`, because `role` on a DS
+     * pattern means the ARIA role (`FeedbackState`).
+     */
+    author: AssistantMessageAuthor;
+    /**
+     * The turn's accessible name, e.g. "You" or "Assistant". Shown next to the
+     * assistant mark; on the person's own turn it is read by screen readers
+     * only.
+     */
+    authorLabel: string;
+    /**
+     * The turn's content. A plain string keeps its line breaks. Empty (a turn
+     * that failed before any text arrived), no body is drawn.
+     */
+    children?: ReactNode;
+    /** Small secondary line: a time, a duration. */
+    meta?: ReactNode;
+    /** Controls under the turn (copy, retry). Rendered as given. */
+    actions?: ReactNode;
+    /**
+     * Iconify name of the assistant mark, or `false` for none. Defaults to a
+     * sparkle. Ignored on the person's own turn.
+     */
+    icon?: string | false;
+    /** Classes on the root `<article>`. */
+    className?: string;
+    /** Classes per slot. */
+    classNames?: AssistantMessageClassNames;
+    /** Test id of the root; its parts add suffixes (see Test ids in the docs). Defaults to `assistant-message`. */
+    'data-testid'?: string;
+}
+export type AssistantMessageProps = AssistantMessageBaseProps & AssistantMessageStatusProps;

package/dist/patterns/AssistantNotice/AssistantNotice.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from 'react';
+import { AssistantNoticeProps } from './types';
+/**
+ * The run state of an assistant panel: working, nothing yet, failed, a limit,
+ * offline, no access, or a plain note. A HeroUI `Alert` underneath, with one
+ * kind per state and every word supplied by the caller.
+ *
+ * Announcements follow `FeedbackState`: `error` is `role="alert"`
+ * (assertive), every other kind `role="status"` (polite). The live region
+ * wraps the title and description only; the clock, the action and the
+ * details stay outside it, so a ticking clock or revealing details is not
+ * announced.
+ */
+export declare function AssistantNotice({ kind, title, description, elapsed, action, details, detailsLabel, icon, role, ariaLive, className, classNames, 'data-testid': dataTestId, }: AssistantNoticeProps): JSX.Element;
+export declare namespace AssistantNotice {
+    var displayName: string;
+}
+export default AssistantNotice;

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

@@ -0,0 +1,2 @@
+export { AssistantNotice } from './AssistantNotice';
+export type { AssistantNoticeClassNames, AssistantNoticeKind, AssistantNoticeProps } from './types';

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

@@ -0,0 +1,49 @@
+import { AssistantNoticeKind } from './types';
+type AlertColor = 'default' | 'danger' | 'warning';
+interface KindStyle {
+    /** HeroUI `Alert` colour: its flat fill for the kind. */
+    color: AlertColor;
+    /** Extra base classes. `dark:` repeats are needed to beat Alert's own `dark:bg-*`. */
+    base: string;
+    title: string;
+    description: string;
+    icon: string;
+}
+export declare const assistantNoticeKindStyle: Record<AssistantNoticeKind, KindStyle>;
+export declare const assistantNoticeClass: {
+    /** Alert centres a body with no title prop; the copy here is children, so pin it to the top-left. */
+    readonly base: "items-start gap-x-3 px-4 py-3";
+    readonly mainWrapper: "ms-0 min-h-0 min-w-0 items-start justify-start gap-0.5";
+    readonly icon: "mt-0.5 inline-flex size-5 flex-none items-center justify-center";
+    /**
+     * The live region: title and description only. The clock, the action and
+     * the details sit outside it, so a ticking clock or opening "Details" on
+     * an error does not re-announce anything.
+     */
+    readonly live: "col-span-full row-start-1 grid min-w-0 grid-cols-subgrid gap-y-0.5";
+    /**
+     * Title, description and clock. The live region spans every column as a
+     * subgrid (title in the first, description across all), and the clock
+     * sits outside it, so a ticking clock never changes the region. Without a
+     * clock there is one column, and the title has the full width.
+     */
+    readonly text: "grid w-full min-w-0 grid-cols-1 items-baseline gap-x-2";
+    /**
+     * With a clock, two columns: the title, then the clock on the title's
+     * baseline, in the second column of the first row. Both the region and the
+     * clock have an explicit row, or auto-placement would move the region below
+     * the clock. A title too long for its line wraps beside the clock.
+     */
+    readonly textWithClock: "grid-cols-[auto_1fr]";
+    readonly title: "col-start-1 m-0 min-w-0 justify-self-start text-sm font-medium [overflow-wrap:anywhere]";
+    readonly elapsed: "col-start-2 row-start-1 justify-self-start whitespace-nowrap text-sm tabular-nums";
+    readonly description: "col-span-full m-0 min-w-0 text-sm [overflow-wrap:anywhere]";
+    readonly action: "mt-2 flex flex-wrap items-center gap-2";
+    readonly detailsToggle: "-ms-1.5 h-7 min-w-0 gap-1 px-1.5 text-xs font-medium text-current";
+    readonly detailsWrapper: "w-full min-w-0";
+    readonly detailsChevron: "transition-transform motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+    readonly detailsChevronOpen: "rotate-180";
+    readonly details: "mt-1 max-h-48 overflow-auto whitespace-pre-wrap rounded-md bg-content1 p-2 font-mono text-xs text-foreground [overflow-wrap:anywhere]";
+};
+export declare const ASSISTANT_NOTICE_DEFAULT_ROLE: Record<AssistantNoticeKind, 'alert' | 'status'>;
+export {};

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

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+/**
+ * The run states an assistant panel shows. The caller maps its own errors to
+ * these; the pattern knows nothing about where they came from.
+ *
+ * - `thinking`: a turn is running. Pair it with `elapsed`.
+ * - `empty`: nothing asked yet.
+ * - `error`: the turn failed.
+ * - `caution`: a limit was reached (rate, daily, per-turn); no retry now.
+ * - `offline`: the service or the connection is down.
+ * - `blocked`: the person cannot use the assistant (no access, not set up).
+ * - `info`: anything else worth saying.
+ */
+export type AssistantNoticeKind = 'thinking' | 'empty' | 'error' | 'caution' | 'offline' | 'blocked' | 'info';
+/** Extra classes per slot, merged after the pattern's own. */
+export interface AssistantNoticeClassNames {
+    /** The notice. */
+    base?: string;
+    /** The title. */
+    title?: string;
+    /** The description. */
+    description?: string;
+    /** The wrapper of `action`. */
+    action?: string;
+    /** The revealed details. */
+    details?: string;
+}
+export interface AssistantNoticeProps {
+    /** The run state. It picks the icon, the tone and the default announcement. */
+    kind: AssistantNoticeKind;
+    /** What is happening, in a few words, e.g. "Working…". Announced once. */
+    title: ReactNode;
+    /** More detail under the title, e.g. when they can ask again. */
+    description?: ReactNode;
+    /**
+     * A running clock next to the title ("12 s"). Hidden from screen readers so
+     * a ticking value is not announced every second; they hear the title once.
+     */
+    elapsed?: ReactNode;
+    /** A control under the text (Retry, Sign in). Rendered as given. */
+    action?: ReactNode;
+    /** Technical detail, revealed by a "Details" toggle. */
+    details?: ReactNode;
+    /** Name of the details toggle. Defaults to "Details". */
+    detailsLabel?: string;
+    /** Iconify name to replace the kind's icon, or `false` for none. */
+    icon?: string | false;
+    /** Defaults to `alert` for `error`, `status` otherwise. */
+    role?: 'alert' | 'status';
+    /** Defaults to `assertive` for `error`, `polite` otherwise. */
+    ariaLive?: 'polite' | 'assertive' | 'off';
+    /** Classes on the notice. */
+    className?: string;
+    /** Classes per slot. */
+    classNames?: AssistantNoticeClassNames;
+    /** Test id of the root; its parts add suffixes (see Test ids in the docs). Defaults to `assistant-notice`. */
+    '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, DonationAmountsCustomAmountPlacement, } from './types';
 export { formatCurrency, parseCurrency } from './utils/currency';

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

@@ -0,0 +1,51 @@
+import { DonationAmountsProps, DonationAmountsVariant } from './types';
+type TiledVariant = Exclude<DonationAmountsVariant, 'pill'>;
+type FieldSize = NonNullable<DonationAmountsProps['size']>;
+interface VariantSlots {
+    root: string;
+    title: string;
+    eyebrow: string;
+    caption: string;
+    grid: string;
+    preset: string;
+    presetIdle: string;
+    presetSelected: string;
+    amount: string;
+    amountSelected: string;
+    sublabel: string;
+    customLabel: string;
+    inputBase: string;
+    inputWrapper: string;
+    inputWrapperActive: string;
+    input: string;
+}
+export declare const donationAmountsSlots: Record<TiledVariant, VariantSlots>;
+/**
+ * `customAmountPlacement="inline"` on `tile`: the Quick entry amount row
+ * (`Main.dc.html`, `QMDonation.dc.html`), merged over the `tile` slots.
+ *
+ * One wrapping flex row instead of the grid: tiles `flex: 1 1 4.5rem`, the
+ * field `flex: 2 1 10rem`, 8px apart, as the mockup lays them out. Tiles and
+ * field are both the mockup's 3rem (`min-h-12` drops the tile's own padding
+ * height, `h-12` the field's `size` height), so the row lines up. The field
+ * keeps the `tile` hairline, radius, padding and focus ring; its digits are
+ * the mockup's 15px and the symbol beside them 14px in the neutral tone.
+ */
+export declare const donationAmountsInline: {
+    row: string;
+    preset: string;
+    field: string;
+    inputWrapper: string;
+    input: string;
+    affix: string;
+};
+/**
+ * What `size` changes in `tile` and `pos`: the custom field's height and text.
+ * `md` is the mockup's field (38px in `tile`, 40px in `pos`); `sm` and `lg`
+ * are HeroUI's 32px and 48px fields. The Add button takes `size` directly.
+ */
+export declare const donationAmountsFieldSize: Record<TiledVariant, Record<FieldSize, {
+    wrapper: string;
+    input: string;
+}>>;
+export {};