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

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

@@ -18,7 +18,39 @@ 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';
+/**
+ * Where the `tile` variant puts the custom amount field.
+ *
+ * - `below` (default): a row of its own under the preset grid.
+ * - `inline`: the last item of the preset row, the Quick entry amount row
+ *   (`Main.dc.html`, `QMDonation.dc.html`). Tiles share the row evenly and
+ *   the field takes twice a tile's share; the row wraps, so in a narrow
+ *   column the field drops to a full-width line of its own. Tiles and field
+ *   are both 48px tall, and the currency symbol sits beside the digits on the
+ *   side the locale puts it, so the field shows "$ Other amount".
+ */
+export type DonationAmountsCustomAmountPlacement = 'below' | 'inline';
 /**
  * Selected donation value (can be preset or custom)
  */
@@ -57,6 +89,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 +198,35 @@ 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;
+    /**
+     * Where the custom amount field sits. See
+     * {@link DonationAmountsCustomAmountPlacement}. `tile` variant only.
+     *
+     * `inline` lays the presets out as one wrapping row, so `mobileColumns`
+     * and `desktopColumns` do not apply, and it has no room for
+     * `labels.customAmountLabel` above the field: when set, that label names
+     * the field instead. The preset group then holds the field too, so name it
+     * for the whole amount (`labels.title` or `labels.presetsAriaLabel`).
+     * @default 'below'
+     */
+    customAmountPlacement?: DonationAmountsCustomAmountPlacement;
+    /**
+     * 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,33 @@
  * @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;
+/**
+ * What a field that draws the currency symbol beside the digits needs: the
+ * symbol, the side of the digits `locale` puts it on ("$" before in en-US,
+ * "$" after in fr-CA), and number formatting with the currency's own fraction
+ * digits but no symbol, so the field never shows it twice.
+ *
+ * @example
+ * currencyAffix('en-US', 'USD') // { symbol: '$', position: 'start', formatOptions: { ..., minimumFractionDigits: 2 } }
+ * currencyAffix('fr-FR', 'EUR') // { symbol: '€', position: 'end', ... }
+ * currencyAffix('ja-JP', 'JPY') // { symbol: '￥', position: 'start', formatOptions: { ..., maximumFractionDigits: 0 } }
+ */
+export declare function currencyAffix(locale?: string, currency?: string): {
+    symbol: string;
+    position: 'start' | 'end';
+    formatOptions: Intl.NumberFormatOptions;
+};
 /**
  * Parses a currency string to a number
  * @param value - The currency string to parse

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

@@ -0,0 +1,15 @@
+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.
+ *
+ * The root is `aria-busy`: the area is loading. `role="status"` stays on the
+ * label, not on the root, so the live region itself is never busy, which would
+ * let a screen reader hold its announcement back.
+ *
+ * The bars are the DS `Skeleton`, so their shimmer stops under reduced motion.
+ */
+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,74 @@
+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";
+    /** The menu otherwise grows to its longest line; a description wraps instead. */
+    readonly menuWithDescriptions: "max-w-xs";
+    /**
+     * HeroUI truncates a string description; a reason cut short is no reason.
+     * default-600 like the row's subtitle, sized by the same per-size token.
+     */
+    readonly menuItemDescription: "whitespace-normal text-default-600";
+    /**
+     * A disabled item with a description. HeroUI dims the whole item, which
+     * would take the description to about 2:1, and opacity cannot be undone by
+     * a child. So the item stays opaque and the label and icon are dimmed.
+     */
+    readonly menuItemDisabledWithDescription: "opacity-100";
+    readonly menuItemDimmed: "opacity-disabled";
+    readonly menuItemDimmedIcon: "flex shrink-0 opacity-disabled";
+    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,125 @@
+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;
+    /**
+     * Second line under the label, typically why a disabled action is
+     * unavailable. It stays readable on a disabled item. react-aria never
+     * focuses a disabled item, so the descriptions of disabled actions also
+     * describe the `⋯` trigger (`aria-describedby`).
+     */
+    description?: string;
+    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/ExpandableTable/ExpandableTable.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { ExpandableTableProps } from './types';
+export declare function ExpandableTable<Row>({ ariaLabel, columns, rows, getRowKey, getRowLabel, renderCell, renderExpanded, renderExpandedActions, getRowActions, rowNeedsFix, expandedKeys, defaultExpandedKeys, onExpandedChange, labels, emptyContent, className, 'data-testid': dataTestId, }: ExpandableTableProps<Row>): JSX.Element;
+export declare namespace ExpandableTable {
+    var displayName: string;
+}

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

@@ -0,0 +1,2 @@
+export { ExpandableTable } from './ExpandableTable';
+export type { ExpandableTableBreakpoint, ExpandableTableColumn, ExpandableTableExpandedChange, ExpandableTableLabels, ExpandableTableProps, ExpandableTableReason, ExpandableTableRowContext, } from './types';

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

@@ -0,0 +1,43 @@
+import { ExpandableTableBreakpoint } from './types';
+/**
+ * warning-50 (`#FFFBEB`), the prototype's pale amber row. Not `--warn-fill`
+ * (warning-100): on that, the `--sub` text a row's second line uses drops to
+ * 4.35:1. On this one `--sub` holds 4.67:1 and `--warn` 4.85:1, pinned in the
+ * tests.
+ */
+export declare const NEEDS_FIX_ROW_TINT: "#fffbeb";
+/** The toggle's chevron: down while closed, up while open. */
+export declare const EXPANDABLE_TABLE_CHEVRON_ICON = "solar:alt-arrow-down-outline";
+/** Before the open panel's title. */
+export declare const EXPANDABLE_TABLE_PANEL_ICON = "solar:pen-2-outline";
+/** `hidden <bp>:table-cell` per breakpoint, written out so Tailwind sees every class. */
+export declare const expandableTableHideBelowClass: Record<ExpandableTableBreakpoint, string>;
+export declare const expandableTableClass: {
+    /** The `VerticalSteps` card; scrolls sideways rather than overflow the page. */
+    readonly root: "w-full overflow-x-auto rounded-2xl border border-acct-border bg-acct-surface";
+    readonly table: "w-full";
+    readonly th: "text-left text-[11px] font-semibold uppercase tracking-[.04em] text-acct-sub px-4 pt-4 pb-3 whitespace-nowrap bg-transparent";
+    readonly alignRight: "text-right";
+    /** Shrinks to the toggle and the icon buttons. */
+    readonly thActions: "w-px";
+    readonly row: "border-t border-acct-hair transition-colors duration-150 hover:bg-acct-page data-[hover=true]:bg-acct-page";
+    readonly rowOpen: "bg-acct-page hover:bg-acct-page";
+    /** The admin cell had HeroUI's padding under it; a native cell needs its own (12px). */
+    readonly td: import('tailwind-variants').CnReturn;
+    readonly tdActions: "w-px whitespace-nowrap py-2 pl-2 pr-3 align-middle";
+    readonly actions: "flex items-center justify-end gap-0.5";
+    readonly toggle: "gap-1.5 text-acct-ink2 data-[hover=true]:bg-acct-hair";
+    readonly toggleOpen: "bg-acct-surface shadow-sm ring-1 ring-acct-border data-[hover=true]:bg-acct-surface";
+    readonly chevron: "size-4 shrink-0 transition-transform duration-150 motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+    readonly chevronOpen: "rotate-180";
+    /** The open panel's row: same tint as the open summary line, no hairline between them. */
+    readonly panelRow: "bg-acct-page";
+    readonly panelCell: "px-4 pb-4 pt-0";
+    readonly panel: "rounded-xl border border-acct-border bg-acct-surface p-4 shadow-sm";
+    /** 12px uppercase in `--sub` (4.83:1 on white). */
+    readonly panelTitle: "mb-4 flex items-center gap-1.5 border-b border-acct-hair pb-3 text-xs font-semibold uppercase tracking-wide text-acct-sub";
+    readonly panelTitleIcon: "size-3.5 shrink-0";
+    readonly panelFooter: "mt-4 flex flex-wrap items-center justify-end gap-2 border-t border-acct-hair pt-3";
+    readonly done: "border-acct-border bg-acct-surface";
+    readonly empty: "px-4 py-10 text-center text-sm text-acct-sub";
+};

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

@@ -0,0 +1,99 @@
+import { ReactNode } from 'react';
+import { RowAction } from '../RowActions';
+/** A breakpoint below which a column (header and cells) is not drawn. */
+export type ExpandableTableBreakpoint = 'sm' | 'md' | 'lg';
+export interface ExpandableTableColumn {
+    /** Stable id. `renderCell` receives it to know which cell it is drawing. */
+    key: string;
+    /** Header text. */
+    label: ReactNode;
+    /** `'right'` for numbers (price); `'left'` by default. */
+    align?: 'left' | 'right';
+    /** Width hint for the column: px number or any CSS length. Omit to size to content. */
+    width?: number | string;
+    /** Not drawn below this breakpoint, so a narrow screen keeps the columns that matter. */
+    hideBelow?: ExpandableTableBreakpoint;
+}
+/**
+ * Every string the table draws or speaks, translated by the host. No English
+ * lives in the component.
+ */
+export interface ExpandableTableLabels {
+    /** Visible text of each row's toggle ("Quick edit"). */
+    toggle: string;
+    /**
+     * Accessible name of one row's toggle, and of the panel it opens:
+     * `(rowLabel) => \`Quick edit ${rowLabel}\``. Keep `toggle` inside it, so
+     * voice control can say what it sees (WCAG 2.5.3).
+     */
+    toggleRow: (rowLabel: string) => string;
+    /** Header of the controls column, read by screen readers only ("Actions"). */
+    actions: string;
+    /** The button at the foot of an open panel that closes it ("Done"). */
+    done: string;
+    /** Small heading at the top of an open panel ("Quick edit"). Omit for none. */
+    panelTitle?: ReactNode;
+}
+/**
+ * Why a row closed or opened. `toggle` is the row's own button; the rest only
+ * close: `done` is the Done button or `close()`, `enter` is Enter in a
+ * single-line field, `escape` is Escape anywhere in the panel. Changes apply
+ * as the host's fields change, so none of them reverts anything; a host that
+ * keeps a draft can discard it on `escape`.
+ */
+export type ExpandableTableReason = 'toggle' | 'done' | 'enter' | 'escape';
+export interface ExpandableTableExpandedChange {
+    /** The row that opened or closed. */
+    key: string;
+    expanded: boolean;
+    reason: ExpandableTableReason;
+}
+/** What `renderExpanded` and `renderExpandedActions` get besides the row. */
+export interface ExpandableTableRowContext {
+    rowIndex: number;
+    /** Closes this row's panel and returns focus to its toggle (reason `done`). */
+    close: () => void;
+}
+export interface ExpandableTableProps<Row> {
+    /** Accessible name of the table ("Ticket types"). */
+    ariaLabel: string;
+    columns: ExpandableTableColumn[];
+    rows: Row[];
+    /** Stable, unique id of a row: keys its group, its test ids and the open set. */
+    getRowKey: (row: Row) => string;
+    /** Short name of a row ("Adult"), used in the accessible names of its controls. */
+    getRowLabel: (row: Row) => string;
+    /** One cell of the summary line. */
+    renderCell: (row: Row, columnKey: string, rowIndex: number) => ReactNode;
+    /** The fields an open row shows under its summary line (the Quick edit form). */
+    renderExpanded: (row: Row, context: ExpandableTableRowContext) => ReactNode;
+    /** Buttons at the foot of an open row, before Done ("More details"). */
+    renderExpandedActions?: (row: Row, context: ExpandableTableRowContext) => ReactNode;
+    /**
+     * Icon buttons after the toggle, drawn by `RowActions` (Duplicate, All
+     * details, Delete). Name each with its subject: "Duplicate Adult".
+     */
+    getRowActions?: (row: Row, rowIndex: number) => RowAction[];
+    /**
+     * Rows that need a fix get a pale warning tint (warning-50) while closed,
+     * and `data-needs-fix="true"`. The tint is a cue, not the message: say what
+     * is missing in a cell, as text.
+     */
+    rowNeedsFix?: (row: Row) => boolean;
+    /** Open rows, controlled. Several can be open at once. */
+    expandedKeys?: Iterable<string>;
+    /** Open rows at first render, uncontrolled. */
+    defaultExpandedKeys?: Iterable<string>;
+    /** Every open or close, with the new open set and which row changed why. */
+    onExpandedChange?: (keys: Set<string>, change: ExpandableTableExpandedChange) => void;
+    labels: ExpandableTableLabels;
+    /** Shown in place of the rows when there are none. */
+    emptyContent?: ReactNode;
+    className?: string;
+    /**
+     * Root test id (default `expandable-table`). Per row: `-row-<key>` (with
+     * `data-expanded` and `data-needs-fix`), `-toggle-<key>`, `-panel-<key>`,
+     * `-done-<key>` and `-actions-<key>` (each action `-actions-<key>-<action>`).
+     */
+    'data-testid'?: string;
+}

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;
+}