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

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/FeedbackState/FeedbackState.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import { EmptyStateProps, ErrorStateProps, FeedbackStateProps, LoadingStateProps, SuccessStateProps } from './type';
-export declare function FeedbackState({ variant, surface, title, titleAs: TitleElement, description, icon, actions, role, ariaLive, iconSize, className, classNames, 'data-testid': dataTestId, }: FeedbackStateProps): JSX.Element;
+export declare function FeedbackState(props: FeedbackStateProps): JSX.Element;
 export declare namespace FeedbackState {
     var displayName: string;
 }

package/dist/patterns/FeedbackState/type.d.ts

@@ -20,6 +20,8 @@ export interface FeedbackStateClassNames {
     spinner?: string;
     title?: string;
     description?: string;
+    /** The `ErrorState` reference code line. */
+    referenceCode?: string;
     actions?: string;
 }
 export interface FeedbackStateProps {
@@ -50,6 +52,14 @@ export interface FeedbackStateProps {
     'data-testid'?: string;
 }
 export type EmptyStateProps = Omit<FeedbackStateProps, 'variant'>;
-export type ErrorStateProps = Omit<FeedbackStateProps, 'variant'>;
+export interface ErrorStateProps extends Omit<FeedbackStateProps, 'variant'> {
+    /**
+     * Support code for this failure, e.g. `"FR-QE-900"`, shown on a small line under the description
+     * so a user can quote it from a screenshot. Nothing is rendered without it.
+     */
+    referenceCode?: string;
+    /** Text before the code. Defaults to `"Reference code:"`; the caller owns i18n. */
+    referenceCodeLabel?: string;
+}
 export type LoadingStateProps = Omit<FeedbackStateProps, 'variant'>;
 export type SuccessStateProps = Omit<FeedbackStateProps, 'variant'>;

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/InstallmentSchedule/types.d.ts

@@ -1,7 +1,7 @@
 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;
@@ -13,9 +13,22 @@ export type ScheduledInstallment = {
      * 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 `paid` rows only; omit it to show none.
+     * `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;
@@ -120,8 +133,18 @@ export type InstallmentTableLabels = {
     installmentId?: string;
     amount?: string;
     scheduledDate?: string;
-    /** Prefix of the paid date shown under the scheduled date of a paid row: "Paid on Jun 3, 2026". */
+    /**
+     * 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;
@@ -151,8 +174,9 @@ 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;

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

@@ -28,3 +28,9 @@ export declare function hasManualRowErrors(errors: ManualRowErrors): boolean;
  * 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';