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

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

@@ -18,7 +18,27 @@ export interface DonationAmount {
      * If not provided, the formatted currency will be used
      */
     label?: string;
+    /**
+     * Second line under the amount, e.g. `'+$0.56 donation'` on a round-up
+     * offer. Rendered by the `tile` and `pos` variants only; the `pill`
+     * variant has no room for it.
+     */
+    sublabel?: string;
 }
+/**
+ * How the presets and the custom input are drawn.
+ *
+ * - `pill` (default): HeroUI bordered pill buttons; the selected one fills
+ *   with the brand colour. The original look, unchanged.
+ * - `tile`: the Quick Donation / Quick Membership amount grid. Rectangular
+ *   12px tiles on the `pos-field` hairline; the selected tile takes a brand
+ *   border, a 9% brand tint and brand digits.
+ * - `pos`: the register's donation modal and round-up offer. 14px chips on
+ *   the `pos-line` hairline that auto-fit the row (min 96px), 19px digits
+ *   that stay ink when selected over a 5% brand tint, an optional sublabel,
+ *   and a visible label over the custom input.
+ */
+export type DonationAmountsVariant = 'pill' | 'tile' | 'pos';
 /**
  * Selected donation value (can be preset or custom)
  */
@@ -57,6 +77,27 @@ export interface DonationLabels {
      * @default 'Add Donation'
      */
     addDonationButton?: string;
+    /**
+     * Small uppercase heading above the presets ("Round up your total").
+     * `tile` and `pos` variants only.
+     */
+    eyebrow?: string;
+    /**
+     * Muted line under the eyebrow or title ("Current total $19.44").
+     * `tile` and `pos` variants only.
+     */
+    caption?: string;
+    /**
+     * Visible label over the custom amount input ("Custom amount"). When set
+     * it also names the input, so `customAmountAriaLabel` is not needed.
+     * `tile` and `pos` variants only.
+     */
+    customAmountLabel?: string;
+    /**
+     * Accessible name of the preset group when no `title` is shown.
+     * @default 'Suggested amounts'
+     */
+    presetsAriaLabel?: string;
 }
 /**
  * Props for DonationAmounts component
@@ -145,10 +186,23 @@ export interface DonationAmountsProps {
      */
     inputVariant?: 'flat' | 'bordered' | 'faded' | 'underlined';
     /**
-     * Size of the custom amount input and add button
+     * Size of the custom amount input and add button. In `tile` and `pos`,
+     * `md` is the mockup's field; the presets keep their size in every variant.
      * @default 'md'
      */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Visual variant. See {@link DonationAmountsVariant}.
+     * @default 'pill'
+     */
+    variant?: DonationAmountsVariant;
+    /**
+     * Marks the title as required with a danger asterisk (`tile` and `pos`
+     * variants). The asterisk is decorative; announce the requirement through
+     * the form's own validation.
+     * @default false
+     */
+    isRequired?: boolean;
     /**
      * Additional CSS classes
      */

package/dist/patterns/DonationAmounts/utils/currency.d.ts

@@ -6,13 +6,17 @@
  * @param amount - The amount to format
  * @param locale - The locale to use for formatting (e.g., 'en-US', 'es-ES')
  * @param currency - The currency code (ISO 4217, e.g., 'USD', 'EUR')
+ * @param trimZeroCents - Drop the fraction of a whole amount ("$25" rather than
+ *   "$25.00"). Default `true`; `false` keeps the currency's own digits, as a
+ *   register price does.
  * @returns Formatted currency string
  *
  * @example
- * formatCurrency(1000, 'en-US', 'USD') // "$1,000.00"
- * formatCurrency(1000, 'es-ES', 'EUR') // "1.000,00 €"
+ * formatCurrency(1000, 'en-US', 'USD') // "$1,000"
+ * formatCurrency(1000.5, 'es-ES', 'EUR') // "1000,5 €"
+ * formatCurrency(5, 'en-US', 'USD', false) // "$5.00"
  */
-export declare function formatCurrency(amount: number, locale?: string, currency?: string): string;
+export declare function formatCurrency(amount: number, locale?: string, currency?: string, trimZeroCents?: boolean): string;
 /**
  * Parses a currency string to a number
  * @param value - The currency string to parse

package/dist/patterns/EntityRow/EntityList.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { EntityListProps, EntityListSkeletonProps } from './types';
+export declare const EntityList: React.FC<EntityListProps>;
+/**
+ * The list in skeleton form, at the same row height so nothing shifts when the
+ * rows arrive. The placeholder rows are hidden from assistive tech; `label` is
+ * announced once through a `role="status"` region instead.
+ */
+export declare const EntityListSkeleton: React.FC<EntityListSkeletonProps>;

package/dist/patterns/EntityRow/EntityRow.d.ts

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

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

@@ -0,0 +1,2 @@
+/** True inside an `EntityList`, so rows default to `li`. */
+export declare const EntityListContext: import('react').Context<boolean>;

package/dist/patterns/EntityRow/icons.d.ts

@@ -0,0 +1,3 @@
+/** Inline so the defaults render offline and without an icon registry. */
+export declare const ChevronRightIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const MenuDotsIcon: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+export { EntityRow } from './EntityRow';
+export { EntityList, EntityListSkeleton } from './EntityList';
+export type { EntityRowProps, EntityRowSize, EntityRowVariant, EntityRowTag, EntityRowTagTone, EntityRowLeading, EntityRowAction, EntityListProps, EntityListSkeletonProps, } from './types';

package/dist/patterns/EntityRow/initials.d.ts

@@ -0,0 +1,6 @@
+/**
+ * "Chidi Okafor" → "CO", "Ana María de la Cruz" → "AC", "Cher" → "C".
+ * First and last word, so a long name does not spell an acronym the way
+ * HeroUI's default (every word's initial) does. Empty → "—".
+ */
+export declare function initialsFromName(name: string): string;

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

@@ -0,0 +1,59 @@
+import { EntityListProps, EntityRowSize, EntityRowTagTone, EntityRowVariant } from './types';
+export declare const entityRowClass: {
+    readonly base: "relative flex w-full items-center gap-2 transition-colors";
+    readonly content: "flex min-w-0 flex-1 items-center gap-3 text-left";
+    /**
+     * The press target is a HeroUI `Button` (or `Link`) stretched over the row
+     * by its `::after`. Its base classes have to be undone for that to work:
+     * `relative` would make the button the overlay's containing block,
+     * `transform-gpu` would too, `overflow-hidden` clips the overlay,
+     * `min-w-max` and `whitespace-nowrap` defeat truncation, and the focus
+     * outline is moved from the button to the overlay so it rings the row.
+     */
+    readonly pressTarget: string;
+    readonly text: "flex min-w-0 flex-col";
+    readonly titleLine: "flex min-w-0 items-center gap-2";
+    readonly title: "truncate font-medium text-default-900";
+    readonly subtitle: "truncate text-default-600";
+    readonly tags: "flex shrink-0 items-center gap-1";
+    /** Lifted above the stretched overlay so each stays its own control. */
+    readonly side: "relative z-10 flex shrink-0 items-center gap-1";
+    readonly chevron: "flex shrink-0 text-default-500";
+    readonly menuTrigger: "text-default-600";
+    readonly avatar: "shrink-0 bg-default-200 text-default-700";
+    readonly dangerItem: "text-danger";
+};
+/**
+ * Text overrides for flat chips whose HeroUI tone measures under 4.5:1 on the
+ * plain row's hover tint (default-100): primary 4.39:1 and warning 4.03:1 at
+ * their `-700` text. One step darker clears it; the others already do.
+ */
+export declare const entityRowTagToneClass: Record<EntityRowTagTone, string | undefined>;
+export declare const entityRowVariantClass: Record<EntityRowVariant, {
+    row: string;
+    hover: string;
+    overlay: string;
+}>;
+export declare const entityRowSizeClass: Record<EntityRowSize, {
+    row: string;
+    content: string;
+    title: string;
+    subtitle: string;
+    avatar: 'sm' | 'md';
+    control: 'md' | 'lg';
+}>;
+export declare const entityRowMenuItemClass: Record<EntityRowSize, string | undefined>;
+export declare const entityListGapClass: Record<NonNullable<EntityListProps['gap']>, string>;
+export declare const entityListClass = "m-0 flex list-none flex-col p-0";
+export declare const entityListSkeletonClass: {
+    readonly row: "flex items-center gap-3 px-2";
+    readonly avatar: {
+        readonly md: "size-8 shrink-0 rounded-full";
+        readonly lg: "size-10 shrink-0 rounded-full";
+    };
+    readonly lines: "flex flex-col gap-2";
+    readonly title: "h-4 rounded-md";
+    readonly subtitle: "h-3 w-44 rounded-md";
+    /** Varied so the placeholder does not read as a ruled grid. */
+    readonly titleWidths: readonly ["w-32", "w-28", "w-36", "w-24", "w-40", "w-28"];
+};

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

@@ -0,0 +1,118 @@
+import { ElementType, ReactNode } from 'react';
+/** `md` is a desk row (48px), `lg` a touch row (56px). */
+export type EntityRowSize = 'md' | 'lg';
+/** `plain` sits in a list and tints on hover; `bordered` is a standalone hairline card. */
+export type EntityRowVariant = 'plain' | 'bordered';
+export type EntityRowTagTone = 'default' | 'primary' | 'success' | 'warning' | 'danger';
+export interface EntityRowTag {
+    key: string;
+    label: ReactNode;
+    /** Maps to the HeroUI `Chip` color, always `variant="flat"`. */
+    tone?: EntityRowTagTone;
+}
+/**
+ * What the row leads with. Always decorative (`aria-hidden`): the title is the
+ * row's name. Precedence: `src`, then `icon`, then initials (`initials`, else
+ * derived from `name`, else from a string `title`).
+ */
+export interface EntityRowLeading {
+    /** Image URL. */
+    src?: string;
+    /** An icon tile instead of initials (a household, an organization). */
+    icon?: ReactNode;
+    /** Explicit initials, used verbatim. */
+    initials?: string;
+    /** Source for derived initials when the title is not the person's name. */
+    name?: string;
+    /** `circle` for people (default), `square` for a tile. */
+    shape?: 'circle' | 'square';
+}
+export interface EntityRowAction {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    tone?: 'default' | 'danger';
+    isDisabled?: boolean;
+    onAction: () => void;
+    /** Defaults to `<row testid>-menu-<key>`. */
+    'data-testid'?: string;
+}
+/**
+ * Actions and their label travel together: an overflow trigger is icon-only,
+ * so without a label it is announced as "button" and nothing else.
+ */
+type EntityRowActionsProps = {
+    actions?: undefined;
+    actionsLabel?: undefined;
+} | {
+    /** Overflow menu items. An empty array renders no trigger. */
+    actions: EntityRowAction[];
+    /**
+     * Accessible name of the `⋯` trigger and of the menu. Include the
+     * subject: "Actions for Chidi Okafor", not "Actions" — a list of
+     * these otherwise reads as a column of identical buttons.
+     */
+    actionsLabel: string;
+};
+interface EntityRowBaseProps {
+    /** The row's accessible name. */
+    title: ReactNode;
+    /** Second line (contact details, a count, "View household"). */
+    subtitle?: ReactNode;
+    leading?: EntityRowLeading;
+    /** Chips beside the title. */
+    tags?: EntityRowTag[];
+    /**
+     * Makes the whole row a button. The press target is stretched over the
+     * row; `trailing` and the actions menu stay their own controls.
+     */
+    onPress?: () => void;
+    /** Makes the whole row a link (wins over `onPress` for semantics; both fire). */
+    href?: string;
+    /** Router link component for `href` (Next.js `Link`, React Router `Link`). */
+    linkAs?: ElementType;
+    /** e.g. `'dialog'` when the row opens a picker. Only for button rows. */
+    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | true;
+    /** Explicit control between the text and the menu ("Select", "Add"). */
+    trailing?: ReactNode;
+    /** Trailing chevron: the row leads somewhere. */
+    showChevron?: boolean;
+    /** Overrides the default chevron glyph. */
+    chevronIcon?: ReactNode;
+    /** Overrides the default `⋯` glyph. */
+    actionsIcon?: ReactNode;
+    /** Defaults from `DensityProvider`: `touch` → `lg`, otherwise `md`. */
+    size?: EntityRowSize;
+    variant?: EntityRowVariant;
+    /** Disables the press target and the actions trigger (not `trailing`, which the host owns). */
+    isDisabled?: boolean;
+    /** Container element. Defaults to `li` inside `EntityList`, `div` elsewhere. */
+    as?: 'li' | 'div';
+    className?: string;
+    /**
+     * Row container. Derived: `-trigger` (press target), `-menu-trigger`,
+     * `-menu`, `-menu-<key>`.
+     */
+    'data-testid'?: string;
+}
+export type EntityRowProps = EntityRowBaseProps & EntityRowActionsProps;
+export interface EntityListProps {
+    children: ReactNode;
+    /** Name the list: `aria-label` or `aria-labelledby` (one is required by a11y review). */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /** Spacing between rows; `bordered` rows read better apart. */
+    gap?: 'none' | 'sm' | 'md';
+    className?: string;
+    'data-testid'?: string;
+}
+export interface EntityListSkeletonProps {
+    /** Announced to assistive tech while the rows load ("Loading contacts"). */
+    label: string;
+    rows?: number;
+    /** Defaults from `DensityProvider`, like `EntityRow`. */
+    size?: EntityRowSize;
+    className?: string;
+    'data-testid'?: string;
+}
+export {};

package/dist/patterns/FilterSelect/FilterSelect.d.ts

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

package/dist/patterns/FilterSelect/FilterSelectGroup.d.ts

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

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

@@ -0,0 +1,3 @@
+export { FilterSelect } from './FilterSelect';
+export { FilterSelectGroup } from './FilterSelectGroup';
+export type { FilterSelectProps, FilterSelectOption, FilterSelectGroupProps } from './types';

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

@@ -0,0 +1,17 @@
+export declare const filterSelectClass: {
+    readonly base: "relative inline-grid min-w-[var(--filter-select-min)] max-w-max shrink grow basis-[var(--filter-select-min)] grid-cols-[minmax(0,1fr)] [--filter-select-min:6rem]";
+    readonly baseActive: "[--filter-select-min:8rem]";
+    readonly cell: "[grid-area:1/1]";
+    readonly sizer: "invisible h-0 max-w-[20rem] overflow-hidden whitespace-nowrap border-x-2 border-transparent pl-2 pr-[2.0625rem] text-[0.875rem]";
+    readonly sizerActive: "pr-[3.4375rem] font-semibold";
+    readonly select: "w-full [contain:inline-size]";
+    readonly trigger: "h-[2.375rem] min-h-[2.375rem] rounded-[0.625rem] border-medium border-pos-field bg-white px-2 shadow-none data-[hover=true]:border-default-300 data-[focus=true]:border-primary data-[open=true]:border-primary data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-primary data-[focus-visible=true]:ring-offset-1";
+    readonly triggerActive: "!border-acct-rust-border !bg-acct-rust-fill pr-[1.875rem]";
+    readonly value: "text-[0.875rem] !text-default-900";
+    readonly valueActive: "font-semibold !text-primary-600";
+    readonly iconActive: "!text-primary-600";
+    readonly clear: "absolute right-[1.875rem] top-1/2 z-20 inline-flex size-[1.25rem] -translate-y-1/2 items-center justify-center rounded-md text-primary-600 outline-none hover:bg-white/70 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary";
+    readonly clearIcon: "size-[0.8125rem]";
+    readonly optionTitle: "whitespace-normal break-words";
+};
+export declare const filterSelectGroupClass = "grid shrink grow basis-0 grid-flow-col auto-cols-auto gap-2.5 [--filter-select-cap:16rem] max-w-[calc(var(--filter-select-count)*var(--filter-select-cap)+(var(--filter-select-count)-1)*0.625rem)] [&>[data-slot=filter-select]]:max-w-none";

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

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+export interface FilterSelectOption {
+    value: string;
+    label: string;
+}
+export interface FilterSelectProps {
+    label: string;
+    value: string | null;
+    options: FilterSelectOption[];
+    onChange: (value: string | null) => void;
+    clearLabel: string;
+    minWidth?: number;
+    'data-testid'?: string;
+}
+export interface FilterSelectGroupProps {
+    children: ReactNode;
+    className?: string;
+    'data-testid'?: string;
+}

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, firstInstallmentDateOverride, 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/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 = 'scheduled' | 'paid' | 'payment_due' | 'overdue' | 'failed' | 'refunded' | 'disputed' | 'canceled' | 'processing' | 'pending_confirmation';
+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 = {
@@ -90,20 +116,35 @@ export type InstallmentScheduleProps = {
     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;
@@ -133,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,6 +1,21 @@
 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.
  *
@@ -13,3 +28,9 @@ export declare function getInvalidDateRowIds(installments: ScheduledInstallment[
  * 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';