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

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

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+/**
+ * Decides what a link may do: return the href to use (as is, or rewritten),
+ * or `null` to show the link's text without a link.
+ */
+export type AssistantMarkdownLinkPolicy = (href: string) => string | null;
+export interface AssistantMarkdownProps {
+    /** The Markdown to render. Untrusted: raw HTML, images and bare or angle-bracket URLs render as text. */
+    source: string;
+    /**
+     * Defaults to `defaultAssistantLinkPolicy`: absolute `http://` and `https://`
+     * URLs, and `mailto:` (address only), only. Whatever a policy returns is
+     * checked too: an `http(s)` href must name its host (`https://…`) and is
+     * rendered in canonical form, and an href with no scheme that names a host
+     * (`//…`) is refused, so the domain shown is where the link goes.
+     */
+    linkPolicy?: AssistantMarkdownLinkPolicy;
+    /**
+     * Shifts heading levels so an answer fits under the page's own headings:
+     * `#` renders as `h(1 + headingOffset)`, capped at `h6`. Defaults to 2.
+     */
+    headingOffset?: number;
+    /**
+     * Renders each `[n]` in the text (n from 1 to 999), for example with
+     * `CitationMarker`. Not inside link text, where a control would nest in a
+     * link, and not for an escaped `\\[n\\]`. Without it, `[n]` stays text.
+     */
+    renderCitation?: (index: number) => ReactNode;
+    /** Read by screen readers after each link. Defaults to "opens in a new tab". */
+    newTabLabel?: string;
+    /** Accessible name of each table's scroll box. Defaults to "Table". */
+    tableLabel?: string;
+    /** Accessible name of each code block's scroll box. Defaults to "Code". */
+    codeLabel?: string;
+    className?: string;
+    'data-testid'?: string;
+}

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,73 @@
+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';
+export interface AssistantMessageClassNames {
+    base?: string;
+    header?: string;
+    body?: string;
+    status?: string;
+    meta?: string;
+    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;
+} | {
+    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;
+    className?: string;
+    classNames?: AssistantMessageClassNames;
+    'data-testid'?: string;
+}
+export type AssistantMessageProps = AssistantMessageBaseProps & AssistantMessageStatusProps;

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

@@ -0,0 +1,17 @@
+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 action and the details stay
+ * outside it, so revealing details is not announced as a new alert.
+ */
+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,36 @@
+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 action and the details
+     * sit outside it, so opening "Details" on an error does not re-announce
+     * the technical text assertively.
+     */
+    readonly live: "flex w-full min-w-0 flex-col gap-0.5";
+    readonly titleRow: "flex min-w-0 flex-wrap items-baseline gap-x-2";
+    readonly title: "m-0 min-w-0 text-sm font-medium [overflow-wrap:anywhere]";
+    readonly elapsed: "text-sm tabular-nums";
+    readonly description: "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,46 @@
+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';
+export interface AssistantNoticeClassNames {
+    base?: string;
+    title?: string;
+    description?: string;
+    action?: string;
+    details?: string;
+}
+export interface AssistantNoticeProps {
+    kind: AssistantNoticeKind;
+    title: ReactNode;
+    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';
+    className?: string;
+    classNames?: AssistantNoticeClassNames;
+    '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/CitationMarker/CitationMarker.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'react';
+import { CitationMarkerProps } from './types';
+/**
+ * A `[n]` marker inside an assistant's answer, pointing at one of its sources.
+ * Pressed, it calls `onSelect` (reveal the source, open it); without
+ * `onSelect` it is plain text with the same look.
+ *
+ * A native `<button>`, not HeroUI's: it sits inside a sentence and must align
+ * to the text baseline at text size, which HeroUI's Button (a fixed-height
+ * control with a minimum width) is not built for.
+ */
+export declare function CitationMarker({ index, label, onSelect, 'data-testid': dataTestId, }: CitationMarkerProps): JSX.Element;
+export declare namespace CitationMarker {
+    var displayName: string;
+}
+export default CitationMarker;

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

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

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

@@ -0,0 +1,19 @@
+/**
+ * Every slot class of `CitationMarker`. The `ai-*` palette marks it as the
+ * assistant's: `ai-accent` on `ai-fill` measures 5.49:1 light and 8.15:1 dark
+ * (`src/tokens/__test__/assistant-surface.test.ts`), enough for 11px bold.
+ */
+/**
+ * The `[n]` badge, shared with `SourcePill`'s marker: the two exist to be
+ * matched by eye, so they must never drift apart.
+ */
+export declare const citationBadgeClass = "inline-flex items-center rounded border border-ai-border bg-ai-fill px-1 text-[0.6875rem] font-semibold leading-4 tabular-nums text-ai-accent";
+export declare const citationMarkerClass: {
+    /**
+     * Inline in a sentence: baseline-aligned, a left margin only (a right one
+     * would strand the punctuation after it), no fixed height.
+     */
+    readonly base: "ms-0.5 align-baseline inline-flex items-center rounded border border-ai-border bg-ai-fill px-1 text-[0.6875rem] font-semibold leading-4 tabular-nums text-ai-accent";
+    readonly interactive: "cursor-pointer transition-colors hover:border-ai-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ai-focus motion-reduce:transition-none";
+    readonly srOnly: "sr-only";
+};

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

@@ -0,0 +1,12 @@
+export interface CitationMarkerProps {
+    /** What the marker shows: `1` renders as `[1]`; `E1` as `[E1]`. */
+    index: number | string;
+    /**
+     * The accessible name, e.g. "Show source 1: email, Renewal pricing". The
+     * visible `[1]` alone says nothing to a screen reader.
+     */
+    label: string;
+    /** Called when the marker is pressed, typically to reveal its source. Omitted, the marker is plain text. */
+    onSelect?: () => void;
+    'data-testid'?: 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';

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

@@ -0,0 +1,32 @@
+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>;
+/**
+ * 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 {};