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

package/dist/patterns/InlineConfirm/InlineConfirm.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export type InlineConfirmVariant = 'danger' | 'warning';
+export type InlineConfirmSize = 'sm' | 'md' | 'lg';
+export interface InlineConfirmProps {
+    /** The question. Also the accessible name of the alertdialog. */
+    message: React.ReactNode;
+    /** Optional consequences. Becomes `aria-describedby`. */
+    description?: React.ReactNode;
+    /** Label for the confirm action. Carry the verb ("Remove"), not "OK". */
+    confirmLabel: string;
+    /** Label for the cancel action. Default `'Cancel'`. */
+    cancelLabel?: string;
+    onConfirm: () => void;
+    /** Fires from the Cancel button and from Escape. */
+    onCancel: () => void;
+    /** Drives the surface tone and the confirm colour. Default `'danger'`. */
+    variant?: InlineConfirmVariant;
+    /** Spinner on confirm; Cancel and Escape locked. Default `false`. */
+    isPending?: boolean;
+    /** Which button receives focus on mount. Default `'cancel'`. */
+    initialFocus?: 'cancel' | 'confirm';
+    /** Stop Escape from reaching ancestors (e.g. an enclosing Modal). Default `true`. */
+    containEscape?: boolean;
+    /**
+     * Button size: `'sm'` 32px (default), `'md'` 40px, `'lg'` 48px for a touch
+     * register.
+     */
+    size?: InlineConfirmSize;
+    /**
+     * `'li'` wraps the box in a list item, for swapping it in place of a row of
+     * a `ul`/`ol`. Default `'div'`.
+     */
+    as?: 'li' | 'div';
+    className?: string;
+    /** Root test id; the buttons get `<id>-confirm` and `<id>-cancel`. */
+    'data-testid'?: string;
+}
+export declare const InlineConfirm: React.FC<InlineConfirmProps>;

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

@@ -0,0 +1,2 @@
+export { InlineConfirm } from './InlineConfirm';
+export type { InlineConfirmProps, InlineConfirmVariant, InlineConfirmSize } from './InlineConfirm';

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

@@ -0,0 +1,16 @@
+import { InlineConfirmVariant } from './InlineConfirm';
+export declare const inlineConfirmClass: {
+    /** The `li` that keeps list semantics when the box replaces a row. */
+    readonly item: "list-none";
+    /**
+     * The alertdialog itself. It only takes focus programmatically, while pending,
+     * and then shows the system focus ring when the user is on the keyboard.
+     */
+    readonly box: "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus";
+    readonly body: "gap-3 px-4 py-3";
+    readonly text: "flex min-w-0 flex-col gap-1";
+    readonly message: "text-sm text-gray-900 [overflow-wrap:anywhere]";
+    readonly description: "text-sm text-gray-600 [overflow-wrap:anywhere]";
+    readonly actions: "flex flex-wrap items-center gap-2";
+};
+export declare const inlineConfirmSurface: Record<InlineConfirmVariant, string>;

package/dist/patterns/InstallmentFundAssignment/InstallmentFundAssignment.d.ts

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
 import { InstallmentFundAssignmentProps } from './types';
-export declare function InstallmentFundAssignment({ assignments, funds, labels: customLabels, classNames, isSaving, hasSavedAssignments, isFundPickerOpen, activeAssignmentId, modalPortalContainer, footer, onAssignmentsChange, onOpenFundPicker, onCloseFundPicker, onCollapseChange, onSave, }: InstallmentFundAssignmentProps): JSX.Element;
+export declare function InstallmentFundAssignment({ assignments, funds, labels: customLabels, classNames, isSaving, hasSavedAssignments, showSavedIndicator, isCollapsed, isFundPickerOpen, activeAssignmentId, modalPortalContainer, footer, onAssignmentsChange, onOpenFundPicker, onCloseFundPicker, onCollapseChange, onSave, }: InstallmentFundAssignmentProps): JSX.Element;

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

@@ -14,6 +14,7 @@ export type InstallmentFundAssignmentEntry = {
 };
 export type InstallmentFundAssignmentLabels = {
     title?: string;
+    saved?: string;
     singleFund?: string;
     splitFunds?: string;
     saveAssignment?: string;
@@ -55,6 +56,8 @@ export type InstallmentFundAssignmentProps = {
     classNames?: InstallmentFundAssignmentClassNames;
     isSaving?: boolean;
     hasSavedAssignments?: boolean;
+    showSavedIndicator?: boolean;
+    isCollapsed?: boolean;
     isFundPickerOpen?: boolean;
     activeAssignmentId?: string | null;
     modalPortalContainer?: Element;

package/dist/patterns/InstallmentSchedule/InstallmentSchedule.d.ts

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
 import { InstallmentScheduleProps } from './types';
-export declare function InstallmentSchedule({ mode: controlledMode, donationAmount, currency, locale, installments, automaticSettings, defaultTab, showTitle, showCard, showSavePayment, showTabs, inputs, startDate, labels: customLabels, classNames, isSaving, isModeSwitchDisabled, onModeChange, onAutomaticSettingsChange, onInstallmentsChange, onSave, }: InstallmentScheduleProps): JSX.Element;
+export declare function InstallmentSchedule({ mode: controlledMode, donationAmount, currency, locale, installments, automaticSettings, defaultTab, showTitle, showCard, showSavePayment, showTabs, inputs, startDate, firstInstallmentDateOverride, labels: customLabels, classNames, isSaving, showSavedIndicator, isModeSwitchDisabled, onModeChange, onAutomaticSettingsChange, onInstallmentsChange, onSave, onCancel, }: InstallmentScheduleProps): JSX.Element;

package/dist/patterns/InstallmentSchedule/InstallmentTable.d.ts

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
 import { InstallmentTableProps } from './types';
-export declare function InstallmentTable({ installments, currency, locale, showTitle, showCard, showEditPayment, showDelete, payNowHiddenStatuses, labels: customLabels, isSaving, onEditInstallments, onPayInstallment, onDeleteInstallment, }: InstallmentTableProps): JSX.Element;
+export declare function InstallmentTable({ installments, currency, locale, showTitle, showCard, showEditPayment, showDelete, payNowHiddenStatuses, showSavedIndicator, labels: customLabels, isSaving, onEditInstallments, onPayInstallment, onDeleteInstallment, }: InstallmentTableProps): JSX.Element;

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

@@ -1,5 +1,5 @@
 export { InstallmentSchedule } from './InstallmentSchedule';
 export { InstallmentScheduleSkeleton } from './InstallmentScheduleSkeleton';
 export { InstallmentTable } from './InstallmentTable';
-export { generateAutomaticInstallments } from './utils';
+export { applyFirstInstallmentDateOverride, generateAutomaticInstallments } from './utils';
 export type { AutomaticScheduleSettings, InstallmentFrequency, InstallmentScheduleInput, InstallmentTableLabels, InstallmentTableProps, InstallmentScheduleClassNames, InstallmentScheduleLabels, InstallmentScheduleMode, InstallmentScheduleProps, InstallmentStatus, ScheduledInstallment, } from './types';

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

@@ -1,12 +1,34 @@
 import { ReactNode } from 'react';
 export type InstallmentScheduleMode = 'automatic' | 'manual';
 export type InstallmentFrequency = 'weekly' | 'monthly' | 'quarterly' | 'annual';
-export type InstallmentStatus = 'schedule' | 'paid' | 'payment_due' | 'overdue' | 'failed' | 'refunded' | 'disputed' | 'canceled';
+export type InstallmentStatus = 'scheduled' | 'paid' | 'payment_due' | 'overdue' | 'failed' | 'refunded' | 'partially_refunded' | 'disputed' | 'canceled' | 'processing' | 'pending_confirmation';
 export type ScheduledInstallment = {
     id: string;
+    name?: string | null;
     dueDate: string;
     amount: number;
     status?: InstallmentStatus | (string & {});
+    /**
+     * When the installment was actually paid: a calendar date (`YYYY-MM-DD`)
+     * or an ISO timestamp (shown in the viewer's timezone). Named after the
+     * field the commitments API already returns for this, so installments
+     * passed straight through from the API carry it without any mapping.
+     * `InstallmentTable` shows it on rows whose payment happened (`paid`,
+     * `partially_refunded`, `refunded`) and on no other status; omit it to
+     * show none.
+     */
+    fulfilledAt?: string | null;
+    /**
+     * FR-1422 — how much of the installment was refunded, in the same units as
+     * `amount` (a major-unit number: `50` is $50.00). `InstallmentTable`
+     * formats it with its own `currency` and `locale` and shows it as
+     * "Refunded $50.00" under the amount of a `partially_refunded` row.
+     *
+     * Ignored on every other status: a `refunded` row gave the whole amount
+     * back, so its amount and badge already say it. Also ignored when missing,
+     * zero or negative, so a row never reads "Refunded $0.00".
+     */
+    refundedAmount?: number | null;
 };
 export type AutomaticScheduleSettings = {
     numberOfInstallments: number;
@@ -16,11 +38,13 @@ export type AutomaticScheduleSettings = {
 export type InstallmentScheduleInput = keyof AutomaticScheduleSettings | 'dayOfMonth';
 export type InstallmentScheduleLabels = {
     title?: string;
+    saved?: string;
     automaticMode?: string;
     manualMode?: string;
     createInstallments?: string;
     generateSchedule?: string;
     saveInstallments?: string;
+    cancelEdit?: string;
     addInstallment?: string;
     emptyAutomatic?: string;
     emptyManual?: string;
@@ -45,6 +69,8 @@ export type InstallmentScheduleLabels = {
     totalIncreaseConfirmationCancel?: string;
     totalIncreaseConfirmationConfirm?: string;
     dateOrderError?: string;
+    /** Inline error on a manual row whose payment date was cleared or left incomplete. */
+    dueDateRequiredError?: string;
     amountGreaterThanZeroError?: string;
 };
 export type InstallmentScheduleClassNames = {
@@ -71,23 +97,54 @@ export type InstallmentScheduleProps = {
     showTabs?: boolean;
     inputs?: InstallmentScheduleInput[];
     startDate?: string;
+    /**
+     * Automatic mode only. Dates installment #1 on this day instead of the day
+     * the generated cadence would put it on. Installments #2..N keep the
+     * generated cadence untouched.
+     *
+     * For flows where the first charge happens when the plan is COMMITTED
+     * while the schedule anchors on a later term start: a plan created today
+     * with a term starting next month charges #1 today, then follows the term.
+     * Without this the first charge silently moves to the term start, and the
+     * schedule on screen stops matching the one that gets persisted.
+     *
+     * Ignored in manual mode, where the host already owns every date, and
+     * ignored when `firstInstallmentDate` is one of `inputs` — there the user
+     * picks that date themselves and the schedule must agree with the field.
+     */
+    firstInstallmentDateOverride?: string;
     labels?: InstallmentScheduleLabels;
     classNames?: InstallmentScheduleClassNames;
     isSaving?: boolean;
+    showSavedIndicator?: boolean;
     isModeSwitchDisabled?: boolean;
     onModeChange?: (mode: InstallmentScheduleMode) => void;
     onAutomaticSettingsChange: (settings: AutomaticScheduleSettings) => void;
     onInstallmentsChange: (installments: ScheduledInstallment[]) => void;
     onSave?: () => void;
+    onCancel?: () => void;
 };
 export type InstallmentTableLabels = {
     title?: string;
+    saved?: string;
     searchLabel?: string;
     searchPlaceholder?: string;
     editInstallments?: string;
     installmentId?: string;
     amount?: string;
     scheduledDate?: string;
+    /**
+     * Prefix of the paid date shown under the scheduled date of a row whose
+     * payment happened: "Paid on Jun 3, 2026".
+     */
+    paidOn?: string;
+    /** FR-1422 — text of the `partially_refunded` status badge. Defaults to "Partially refunded". */
+    partiallyRefunded?: string;
+    /**
+     * FR-1422 — prefix of the refunded amount shown under the amount of a
+     * `partially_refunded` row: "Refunded $50.00". Defaults to "Refunded".
+     */
+    refundedAmount?: string;
     status?: string;
     actions?: string;
     payNow?: string;
@@ -117,10 +174,12 @@ export type InstallmentTableProps = {
     /**
      * FR-1619 — statuses for which the Pay Now button is NOT rendered on a row.
      * Typed with the `InstallmentStatus` union so consumers get compile-time
-     * safety on status keys. The pre-existing `paid` disabled guard still
-     * applies to any Pay Now button that IS rendered. Defaults to `[]`.
+     * safety on status keys. A Pay Now button that IS rendered is still
+     * disabled on a row whose payment already happened (`paid`,
+     * `partially_refunded`, `refunded`). Defaults to `[]`.
      */
     payNowHiddenStatuses?: InstallmentStatus[];
+    showSavedIndicator?: boolean;
     labels?: InstallmentTableLabels;
     isSaving?: boolean;
     onEditInstallments: () => void;

package/dist/patterns/InstallmentSchedule/utils.d.ts

@@ -1,3 +1,36 @@
 import { AutomaticScheduleSettings, ScheduledInstallment } from './types';
 export declare function generateAutomaticInstallments(donationAmount: number, settings: AutomaticScheduleSettings): ScheduledInstallment[];
 export declare function getInvalidDateRowIds(installments: ScheduledInstallment[]): Set<string>;
+export type ManualRowErrors = {
+    /** Rows with no due date: the date picker reports a cleared or incomplete date as `''`. */
+    missingDateRows: Set<string>;
+    /** Rows dated after the next row. */
+    invalidDateRows: Set<string>;
+    /** Rows whose amount is not greater than zero. */
+    invalidAmountRows: Set<string>;
+};
+/**
+ * Every inline error a manual schedule can show, computed once so the rows
+ * that render the messages and the Save button that must refuse them can
+ * never disagree.
+ */
+export declare function getManualRowErrors(installments: ScheduledInstallment[]): ManualRowErrors;
+export declare function hasManualRowErrors(errors: ManualRowErrors): boolean;
+/**
+ * Re-dates installment #1 without touching the rest of the schedule.
+ *
+ * The generator produces one uniform cadence from a single anchor, which
+ * cannot express "charge #1 today, then follow the term start". This applies
+ * that shape on top: only the first date moves, and only when an override is
+ * given and it actually differs.
+ *
+ * Amounts are never touched — the first-installment rounding remainder stays
+ * where the generator put it.
+ */
+export declare function applyFirstInstallmentDateOverride(installments: ScheduledInstallment[], firstInstallmentDateOverride?: string): ScheduledInstallment[];
+/**
+ * Whether the installment's payment already happened: it was paid, and may
+ * since have been refunded in part or in full. Such a row is a record of money
+ * that moved, so it cannot be paid again, edited or deleted.
+ */
+export declare function isSettledInstallment(status: ScheduledInstallment['status']): boolean;

package/dist/patterns/KeyValueChip/KeyValueChip.d.ts

@@ -6,6 +6,7 @@ export interface KeyValueChipProps {
     value: React.ReactNode;
     /** Chip size. `'sm'` (default) for dense tables, `'md'` for detail panels. */
     size?: 'sm' | 'md';
+    variant?: 'default' | 'record';
     className?: string;
     'data-testid'?: string;
 }

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

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface KeyValueRow {
+    id?: string;
+    label: React.ReactNode;
+    value: React.ReactNode;
+}
+export type KeyValueRowsDensity = 'regular' | 'compact';
+export interface KeyValueRowsProps {
+    rows: KeyValueRow[];
+    density?: KeyValueRowsDensity;
+    'data-testid'?: string;
+}
+export declare const KeyValueRows: React.FC<KeyValueRowsProps>;

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

@@ -0,0 +1,2 @@
+export { KeyValueRows } from './KeyValueRows';
+export type { KeyValueRowsProps, KeyValueRow, KeyValueRowsDensity } from './KeyValueRows';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/patterns/NeedsFixDot/NeedsFixDot.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'react';
+export interface NeedsFixDotProps {
+    /**
+     * Read out in place of the dot ("Needs a fix"). Required: without it the
+     * state is color alone. It follows the label it sits beside, so include any
+     * punctuation your language wants between the two.
+     */
+    label: string;
+    className?: string;
+    /** Root test id. The visible dot is `${data-testid}-mark`. */
+    'data-testid'?: string;
+}
+export declare function NeedsFixDot({ label, className, 'data-testid': dataTestId, }: NeedsFixDotProps): JSX.Element;
+export declare namespace NeedsFixDot {
+    var displayName: string;
+}

package/dist/patterns/NeedsFixDot/firstNeedsFixKey.d.ts

@@ -0,0 +1,18 @@
+/** The shape `firstNeedsFixKey` reads: an `UnderlineTabItem`, or any keyed item. */
+export interface NeedsFixItem<K extends string = string> {
+    key: K;
+    needsFix?: boolean;
+    isDisabled?: boolean;
+}
+/**
+ * The key a details panel should open on: the first item that needs a fix and
+ * can be selected, else `fallback`.
+ *
+ * A pure helper rather than tab behaviour, because only the host knows when
+ * the panel "opens" — moving to the next record keeps the tab the user is on.
+ *
+ * ```ts
+ * if (justOpened) setTab(firstNeedsFixKey(tabs, 'general'));
+ * ```
+ */
+export declare function firstNeedsFixKey<K extends string>(items: ReadonlyArray<NeedsFixItem<K>>, fallback: K): K;

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

@@ -0,0 +1,4 @@
+export { NeedsFixDot } from './NeedsFixDot';
+export { firstNeedsFixKey } from './firstNeedsFixKey';
+export type { NeedsFixDotProps } from './NeedsFixDot';
+export type { NeedsFixItem } from './firstNeedsFixKey';

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

@@ -0,0 +1,20 @@
+/**
+ * The needs-fix dot's appearance, in one place.
+ *
+ * The color is inline, read from `adminSurfaceTokens`, not a Tailwind class:
+ * the dot carries meaning, so it must survive a consumer whose Tailwind
+ * `content` globs miss this package. Same reasoning as `VerticalSteps`'
+ * status tones and `StatusChip`'s `DOT_TONE`.
+ */
+/**
+ * `--warn` (warning-700), the tone `VerticalSteps` paints a step that needs a
+ * fix with. The prototype's amber-500 measures 2.15:1 on white, under the 3:1
+ * WCAG 1.4.11 asks of a graphic a sighted user reads state from; warning-700
+ * measures 5.02:1.
+ */
+export declare const NEEDS_FIX_DOT_COLOR: string;
+export declare const needsFixDotClass: {
+    readonly root: "inline-flex shrink-0 items-center";
+    /** 6px, the prototype's `size-1.5`, in rem so a root font size change scales it. */
+    readonly dot: "block size-1.5 shrink-0 rounded-full";
+};

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