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

package/dist/patterns/AdminTextField/AdminTextField.d.ts

@@ -1,53 +1,13 @@
 import { default as React } from 'react';
+import { AdminFieldLabelProps, AdminTextFieldProps } from './types';
 /**
  * The uppercase field label, standalone — for a control this component does
  * not cover (a checkbox group, a read-only preview) that should still be
  * captioned like every other admin field. `suffix` is the lighter tail:
  * "· optional", "· auto-generated, immutable".
- */
-export declare const AdminFieldLabel: React.FC<{
-    children: React.ReactNode;
-    suffix?: React.ReactNode;
-    className?: string;
-    'data-testid'?: string;
-}>;
-interface AdminTextFieldBase {
-    /** Uppercase label above the control. Omit only when an adjacent element already names it. */
-    label?: React.ReactNode;
-    /** Lighter annotation after the label (e.g. `· optional`). Ignored without a label. */
-    labelSuffix?: React.ReactNode;
-    value: string;
-    placeholder?: string;
-    disabled?: boolean;
-    /** Monospace face without the read-only treatment, for codes the user types. */
-    mono?: boolean;
-    /** Claim initial focus. Only for the first field of a dialog, never on a page. */
-    autoFocus?: boolean;
-    /** Small helper or error text under the control. */
-    hint?: React.ReactNode;
-    /** Renders the hint as an error and marks the control invalid. */
-    invalid?: boolean;
-    className?: string;
-    'data-testid'?: string;
-}
-/**
- * `onChange` is REQUIRED unless the field is read-only.
- *
- * This is a controlled input: given a `value` and no handler, React pins it and
- * typing does nothing — a field that looks editable, accepts focus, and silently
- * discards every keystroke. That is indistinguishable from a bug at a glance,
- * and it is what happens by accident when someone renders one to show a value.
  *
- * Showing a value without accepting edits is a real case, so it stays possible;
- * it just has to be said, with `readOnly`, which also renders it as system-owned
- * and announces it correctly.
+ * `isRequired` adds a visible `*` and the screen-reader `requiredLabel`;
+ * `help` adds an ⓘ that opens it in a popover, kept outside the label text.
  */
-export type AdminTextFieldProps = AdminTextFieldBase & ({
-    readOnly: true;
-    onChange?: never;
-} | {
-    readOnly?: false;
-    onChange: (value: string) => void;
-});
+export declare const AdminFieldLabel: React.FC<AdminFieldLabelProps>;
 export declare const AdminTextField: React.FC<AdminTextFieldProps>;
-export {};

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

@@ -1,3 +1,3 @@
 export { AdminFieldLabel, AdminTextField } from './AdminTextField';
-export type { AdminTextFieldProps } from './AdminTextField';
-export { adminFieldErrorClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelSuffixClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './styles';
+export type { AdminTextFieldProps, AdminFieldLabelProps, AdminFieldRequiredProps, AdminFieldHelpProps } from './types';
+export { adminFieldErrorClass, adminFieldHelpButtonClass, adminFieldHelpContentClass, adminFieldHelpIconClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelNoAutoMarkClass, adminFieldLabelRowClass, adminFieldLabelSuffixClass, adminFieldRequiredClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './styles';

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

@@ -22,6 +22,35 @@ export declare const adminFieldLabelClass = "text-[11px] font-semibold uppercase
  * aside, not as part of the field's name.
  */
 export declare const adminFieldLabelSuffixClass = "font-normal normal-case tracking-normal";
+/**
+ * The visible `*` of a required field. `after:content-none` switches off the
+ * `*` HeroUI's own `isRequired` paints into its label slot, so there is one
+ * mark, the one carrying the screen-reader word.
+ */
+export declare const adminFieldRequiredClass = "ms-0.5 text-acct-danger";
+/**
+ * The label row a field with `help` draws itself, in place of HeroUI's.
+ * HeroUI pushes its box down by `font-size-small + 10px` (24px) to make room
+ * for its outside label; this row takes the same height from the same
+ * variable, so a field with help and one without line up in a form row.
+ * `min-h` rather than `h`, so a label that wraps grows the row instead of
+ * running into the box.
+ *
+ * `text-foreground` because that is the color HeroUI's label actually renders
+ * in above the box (`group-data-[filled-within=true]:text-foreground` beats
+ * the `text-acct-muted` it is given), measured at `rgb(17, 24, 28)`.
+ */
+export declare const adminFieldLabelRowClass = "mb-0 min-h-[calc(var(--heroui-font-size-small)_+_10px)] text-foreground";
+/** Added to HeroUI's `label` slot so its `isRequired` mark does not double ours. */
+export declare const adminFieldLabelNoAutoMarkClass = "after:content-none";
+/**
+ * The ⓘ that opens a field's help: a 24px round hit target (WCAG 2.5.8) whose
+ * negative margin keeps the 11px label row from growing to fit it.
+ */
+export declare const adminFieldHelpButtonClass = "ms-0.5 -my-1.5 size-6 min-w-6 align-middle text-acct-sub data-[hover=true]:bg-acct-page data-[hover=true]:text-acct-ink";
+export declare const adminFieldHelpIconClass = "size-4";
+/** The popover the ⓘ opens. Body copy, so sentence case and ink. */
+export declare const adminFieldHelpContentClass = "max-w-xs rounded-xl px-3 py-2 text-xs leading-normal text-acct-ink2";
 /**
  * The 38px box — HeroUI's `inputWrapper` slot, which carries the border and
  * background (the `input` slot is the bare field).

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

@@ -0,0 +1,78 @@
+import { default as React } from 'react';
+/**
+ * The required mark. Plain optional props rather than a union that forces
+ * `requiredLabel` with `isRequired`: a union collapses under
+ * `Omit<AdminTextFieldProps, …>`, so every wrapper that forwards props would
+ * stop compiling.
+ */
+export interface AdminFieldRequiredProps {
+    /** Adds a visible `*` after the label (and its suffix). */
+    isRequired?: boolean;
+    /**
+     * The word screen readers hear for the `*` ("required", "obligatoire").
+     * Pass it with `isRequired`: the `*` itself is hidden from them.
+     */
+    requiredLabel?: string;
+}
+/** Help on demand: an ⓘ button after the label that opens it in a popover. */
+export interface AdminFieldHelpProps {
+    help?: React.ReactNode;
+    /** Accessible name of the ⓘ ("About timezone"). Without it the ⓘ is named by the label text. */
+    helpLabel?: string;
+}
+export interface AdminFieldLabelProps extends AdminFieldRequiredProps, AdminFieldHelpProps {
+    children: React.ReactNode;
+    /** The lighter tail: "· optional", "· auto-generated, immutable". */
+    suffix?: React.ReactNode;
+    /**
+     * `id` of the control this captions. The text then renders as a real
+     * `<label>`, so clicking it focuses the control. The ⓘ stays outside it.
+     */
+    htmlFor?: string;
+    /** `id` of the text element, for a group to point `aria-labelledby` at. */
+    id?: string;
+    className?: string;
+    'data-testid'?: string;
+}
+export interface AdminTextFieldBase extends AdminFieldRequiredProps, AdminFieldHelpProps {
+    /** Uppercase label above the control. Omit only when an adjacent element already names it. */
+    label?: React.ReactNode;
+    /** Lighter annotation after the label (e.g. `· optional`). Ignored without a label. */
+    labelSuffix?: React.ReactNode;
+    value: string;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Monospace face without the read-only treatment, for codes the user types. */
+    mono?: boolean;
+    /** Claim initial focus. Only for the first field of a dialog, never on a page. */
+    autoFocus?: boolean;
+    /** Small helper or error text under the control. */
+    hint?: React.ReactNode;
+    /** Renders the hint as an error and marks the control invalid. */
+    invalid?: boolean;
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * `onChange` is REQUIRED unless the field is read-only.
+ *
+ * This is a controlled input: given a `value` and no handler, React pins it and
+ * typing does nothing — a field that looks editable, accepts focus, and silently
+ * discards every keystroke. That is indistinguishable from a bug at a glance,
+ * and it is what happens by accident when someone renders one to show a value.
+ *
+ * Showing a value without accepting edits is a real case, so it stays possible;
+ * it just has to be said, with `readOnly`, which also renders it as system-owned
+ * and announces it correctly.
+ *
+ * `isRequired` / `help` behave as on {@link AdminFieldLabelProps}, and are
+ * ignored without a `label`. `isRequired` also marks the input
+ * `aria-required`, without the browser's own `required` validation.
+ */
+export type AdminTextFieldProps = AdminTextFieldBase & ({
+    readOnly: true;
+    onChange?: never;
+} | {
+    readOnly?: false;
+    onChange: (value: string) => void;
+});

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

@@ -5,5 +5,5 @@
  * Ensures exclusive selection (preset OR custom).
  */
 export { DonationAmounts } from './DonationAmounts';
-export type { DonationAmount, SelectedDonation, DonationLabels, DonationAmountsProps, DonationAmountsVariant, } from './types';
+export type { DonationAmount, SelectedDonation, DonationLabels, DonationAmountsProps, DonationAmountsVariant, DonationAmountsCustomAmountPlacement, } from './types';
 export { formatCurrency, parseCurrency } from './utils/currency';

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

@@ -20,6 +20,25 @@ interface VariantSlots {
     input: string;
 }
 export declare const donationAmountsSlots: Record<TiledVariant, VariantSlots>;
+/**
+ * `customAmountPlacement="inline"` on `tile`: the Quick entry amount row
+ * (`Main.dc.html`, `QMDonation.dc.html`), merged over the `tile` slots.
+ *
+ * One wrapping flex row instead of the grid: tiles `flex: 1 1 4.5rem`, the
+ * field `flex: 2 1 10rem`, 8px apart, as the mockup lays them out. Tiles and
+ * field are both the mockup's 3rem (`min-h-12` drops the tile's own padding
+ * height, `h-12` the field's `size` height), so the row lines up. The field
+ * keeps the `tile` hairline, radius, padding and focus ring; its digits are
+ * the mockup's 15px and the symbol beside them 14px in the neutral tone.
+ */
+export declare const donationAmountsInline: {
+    row: string;
+    preset: string;
+    field: string;
+    inputWrapper: string;
+    input: string;
+    affix: string;
+};
 /**
  * What `size` changes in `tile` and `pos`: the custom field's height and text.
  * `md` is the mockup's field (38px in `tile`, 40px in `pos`); `sm` and `lg`

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

@@ -39,6 +39,18 @@ export interface DonationAmount {
  *   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)
  */
@@ -196,6 +208,18 @@ export interface DonationAmountsProps {
      * @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

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

@@ -17,6 +17,22 @@
  * formatCurrency(5, 'en-US', 'USD', false) // "$5.00"
  */
 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/styles.d.ts

@@ -20,6 +20,21 @@ export declare const entityRowClass: {
     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";
 };

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

@@ -33,6 +33,13 @@ export interface EntityRowAction {
     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;

package/dist/patterns/TileSelect/TileSelect.d.ts

@@ -1,117 +1,4 @@
 import { default as React } from 'react';
-export interface TileSelectOption {
-    /** Stable identifier returned via `onSelect`. */
-    key: string;
-    /** Visible label rendered under the icon. */
-    label: string;
-    /**
-     * Icon: iconify name (`'lucide:credit-card'`) or a `ReactNode` for
-     * fully-custom SVGs.
-     */
-    icon: string | React.ReactNode;
-    /** Disable the tile (greyed out, no click). */
-    isDisabled?: boolean;
-    /**
-     * One line of supporting copy. Rendered only by `variant="compact"`,
-     * for an option that ended up in the "More" menu, where the label
-     * alone ("Other") rarely says enough.
-     */
-    description?: string;
-    /**
-     * `variant="compact"` only: keep this option in the "More" menu at
-     * every width, however much room the track has. For an action that is
-     * secondary by decision rather than by measurement — a payments picker
-     * that wants "Other" one click away so the methods people actually
-     * reach for own the row.
-     *
-     * The menu is rendered whenever an option asks for it, so this also
-     * overrides the rule that suppresses a menu holding a single option.
-     */
-    alwaysInMenu?: boolean;
-    /**
-     * `variant="compact"` only: what this option is worth keeping on the
-     * track. When the pill runs out of room the LOWEST priority folds into
-     * the menu first; equal priorities fold from the end of the list.
-     * Default `0`.
-     *
-     * Display order is untouched — this decides what survives a squeeze,
-     * not where anything sits. A payments picker can list "Other" before
-     * "Split payment" and still lose "Other" first, because splitting a
-     * payment is the rarer, weightier thing to reach for.
-     */
-    priority?: number;
-    /** Override per-tile test id; defaults to `${dataTestId}-${key}`. */
-    'data-testid'?: string;
-}
-/**
- * `'tiles'` — the icon-over-label grid, with a `<Select>` dropdown under
- * `md`. The picker is the subject of the step.
- *
- * `'compact'` — a segmented pill of label-only toggles at every width,
- * keeping every option the track can hold and folding the rest into a
- * "More" menu rather than scrolling. The picker is a control among others.
- */
-export type TileSelectVariant = 'tiles' | 'compact';
-/**
- * Tile size for `variant="tiles"`.
- *
- * `'md'` (default) — the 80px icon-over-label tile of the payments drop-in.
- *
- * `'sm'` — the 58px tender tile of the Quick Donation / Quick Membership
- * mockups (`.tender-tile`): 17px icon over an 11.5px label, 10px/4px padding,
- * 12px radius, 8px between tiles; the picked tile takes a brand border, a 9%
- * brand tint and brand text. DS tokens only, rem only.
- */
-export type TileSelectSize = 'md' | 'sm';
-export interface TileSelectProps {
-    /** Options to render in order. */
-    options: readonly TileSelectOption[];
-    /** Currently selected option `key`. `null` = no selection. */
-    selectedKey: string | null;
-    /** Fires when a tile is selected. */
-    onSelect: (key: string) => void;
-    /** Optional heading rendered above the grid. */
-    heading?: string;
-    /**
-     * `aria-label` for the wrapping group when `heading` is omitted.
-     * Translatable. Default `'Select an option'`. When `heading` is
-     * provided this prop is ignored — the grid is labelled by the
-     * heading element.
-     */
-    ariaLabel?: string;
-    /**
-     * How the options render. Default `'tiles'`.
-     * See {@link TileSelectVariant}.
-     */
-    variant?: TileSelectVariant;
-    /**
-     * `variant="compact"` only: a CAP on how many options stay on the pill.
-     * Unset by default, and normally best left that way — the pill already
-     * measures the track and keeps every option that fits, folding only
-     * what is left over. Set it when a surface wants a shorter row than
-     * its width allows.
-     *
-     * The cap gives way in one case: when honouring it would leave a single
-     * option in the menu that the track had room for. A "More" button is
-     * wider than most labels, so that fold costs space and buys a click.
-     */
-    maxVisible?: number;
-    /**
-     * `variant="compact"` only: label for the overflow trigger. Shown
-     * until an option inside the menu is selected, after which the
-     * trigger carries that option's label. Translatable. Default `'More'`.
-     */
-    moreLabel?: string;
-    /**
-     * Grid columns on >= sm. Default `3`. Mobile collapses to 2.
-     * `5` and `6` keep a full method set on one row on a wide surface.
-     * Ignored by `variant="compact"`, which is a single strip.
-     */
-    columnsDesktop?: 2 | 3 | 4 | 5 | 6;
-    columnsMobile?: 1 | 2;
-    /** `variant="tiles"` only. See {@link TileSelectSize}. Default `'md'`. */
-    size?: TileSelectSize;
-    className?: string;
-    'data-testid'?: string;
-}
+import { TileSelectProps } from './types';
+export type { TileSelectOption, TileSelectProps, TileSelectSize, TileSelectVariant } from './types';
 export declare const TileSelect: React.FC<TileSelectProps>;

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

@@ -1,2 +1,2 @@
 export { TileSelect } from './TileSelect';
-export type { TileSelectProps, TileSelectOption, TileSelectVariant, TileSelectSize } from './TileSelect';
+export type { TileSelectProps, TileSelectOption, TileSelectVariant, TileSelectSize } from './types';

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

@@ -11,4 +11,46 @@ export declare const smallTileClass: {
     readonly active: "border-primary bg-primary/[.09] text-primary data-[hover=true]:bg-primary/[.09]";
     readonly icon: "flex h-[1.0625rem] w-[1.0625rem] items-center justify-center";
     readonly label: "text-[0.71875rem] font-medium leading-[0.875rem]";
+    /** `isLocked`: dashed and muted, and inert under the pointer. `pos-muted` is 4.83:1 on white. */
+    readonly locked: "cursor-not-allowed border-dashed border-pos-line-strong bg-white text-pos-muted data-[hover=true]:border-pos-line-strong data-[hover=true]:bg-white data-[pressed=true]:scale-100";
+};
+/**
+ * `size="md"` tile classes.
+ *
+ * Sized to the Figma spec for the payments-drop-in method picker (PP-1154):
+ * 48px inner content (icon 20 + gap 8 + label 20) + 32px vertical padding
+ * (`py-4`) = 80px. `h-auto` lets the tile grow past that floor when content
+ * wraps (localised long labels, a description).
+ *
+ * `bg-transparent` suppresses HeroUI's own fill so the active and hover
+ * surfaces come from these classes alone.
+ */
+export declare const mediumTileClass: {
+    readonly tile: "flex flex-col items-center justify-center gap-2 h-auto min-h-20 px-4 py-4 border bg-transparent transition-colors motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+    readonly idle: "border-default-200 text-default-800 hover:bg-default-50";
+    readonly active: "border-primary bg-primary-50 text-primary";
+    readonly label: "text-sm font-medium";
+    /**
+     * The grid holds a description or a badge: every tile left-aligns, with
+     * the icon and badge on one row, then the label, then the description.
+     */
+    readonly detailed: "items-start justify-start gap-1 whitespace-normal text-left";
+    /** Wraps the badge under the icon rather than overflowing a narrow tile. */
+    readonly header: "mb-1 flex w-full flex-wrap items-start justify-between gap-2";
+    /**
+     * `default-600`, not 500: on the picked tile's `primary-50` tint the 500
+     * measured 4.498:1, a hair under the floor.
+     */
+    readonly description: "text-xs font-normal leading-snug text-default-600";
+    /** The locked tile's description, muted with the rest of it (4.6:1 on `default-50`). */
+    readonly lockedDescription: "text-default-500";
+    /** `default-600` on `default-100`: about 7:1. */
+    readonly badge: "shrink-0 whitespace-nowrap rounded-full bg-default-100 px-2 py-0.5 text-[11px] font-medium leading-4 text-default-600";
+    /**
+     * `isLocked`: dashed, muted, inert under the pointer. Muted by color, not
+     * opacity, so the text keeps its contrast: `default-500` on `default-50`
+     * measures 4.6:1. HeroUI's hover dim and press scale are switched off.
+     */
+    readonly locked: "cursor-not-allowed border-dashed border-default-300 bg-default-50 text-default-500 hover:bg-default-50 data-[hover=true]:opacity-100 data-[pressed=true]:scale-100";
+    readonly lockedIcon: "text-default-400";
 };

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

@@ -0,0 +1,140 @@
+import { default as React } from 'react';
+export interface TileSelectOption {
+    /** Stable identifier returned via `onSelect`. */
+    key: string;
+    /** Visible label rendered under the icon. */
+    label: string;
+    /**
+     * Icon: iconify name (`'lucide:credit-card'`) or a `ReactNode` for
+     * fully-custom SVGs.
+     */
+    icon: string | React.ReactNode;
+    /**
+     * Disable the tile (greyed out, no click). The tile is `disabled`, so it
+     * also leaves the tab order. For an option that exists but cannot be
+     * picked yet, use `isLocked`.
+     */
+    isDisabled?: boolean;
+    /**
+     * One line of supporting copy. `variant="compact"` renders it for an
+     * option that ended up in the "More" menu, where the label alone
+     * ("Other") rarely says enough. `variant="tiles"` renders it only in a
+     * grid opted in to the detailed tile (some option has a `badge` or is
+     * `isLocked`): on the `size="md"` tile under the label, and as the item
+     * description in the small-viewport `<Select>`. On its own it changes
+     * nothing in the tile grid.
+     */
+    description?: string;
+    /**
+     * A short tag on the tile's top row: "Coming soon", "New".
+     * `variant="tiles"` at `size="md"`; also the end of its `<Select>` item.
+     * Opts the grid in to the detailed tile.
+     */
+    badge?: string;
+    /**
+     * Shown, not pickable: a dashed, muted tile that ignores presses. Unlike
+     * `isDisabled` it stays focusable and is `aria-disabled`, so keyboard and
+     * screen-reader users reach it and hear `lockedReason`. `variant="compact"`
+     * and the small-viewport `<Select>` treat it as disabled. Opts the grid in
+     * to the detailed tile.
+     */
+    isLocked?: boolean;
+    /** What a locked tile announces. Defaults to `badge`. */
+    lockedReason?: string;
+    /**
+     * `variant="compact"` only: keep this option in the "More" menu at
+     * every width, however much room the track has. For an action that is
+     * secondary by decision rather than by measurement — a payments picker
+     * that wants "Other" one click away so the methods people actually
+     * reach for own the row.
+     *
+     * The menu is rendered whenever an option asks for it, so this also
+     * overrides the rule that suppresses a menu holding a single option.
+     */
+    alwaysInMenu?: boolean;
+    /**
+     * `variant="compact"` only: what this option is worth keeping on the
+     * track. When the pill runs out of room the LOWEST priority folds into
+     * the menu first; equal priorities fold from the end of the list.
+     * Default `0`.
+     *
+     * Display order is untouched — this decides what survives a squeeze,
+     * not where anything sits. A payments picker can list "Other" before
+     * "Split payment" and still lose "Other" first, because splitting a
+     * payment is the rarer, weightier thing to reach for.
+     */
+    priority?: number;
+    /** Override per-tile test id; defaults to `${dataTestId}-${key}`. */
+    'data-testid'?: string;
+}
+/**
+ * `'tiles'` — the icon-over-label grid, with a `<Select>` dropdown under
+ * `md`. The picker is the subject of the step.
+ *
+ * `'compact'` — a segmented pill of label-only toggles at every width,
+ * keeping every option the track can hold and folding the rest into a
+ * "More" menu rather than scrolling. The picker is a control among others.
+ */
+export type TileSelectVariant = 'tiles' | 'compact';
+/**
+ * Tile size for `variant="tiles"`.
+ *
+ * `'md'` (default) — the 80px icon-over-label tile of the payments drop-in.
+ *
+ * `'sm'` — the 58px tender tile of the Quick Donation / Quick Membership
+ * mockups (`.tender-tile`): 17px icon over an 11.5px label, 10px/4px padding,
+ * 12px radius, 8px between tiles; the picked tile takes a brand border, a 9%
+ * brand tint and brand text. DS tokens only, rem only.
+ */
+export type TileSelectSize = 'md' | 'sm';
+export interface TileSelectProps {
+    /** Options to render in order. */
+    options: readonly TileSelectOption[];
+    /** Currently selected option `key`. `null` = no selection. */
+    selectedKey: string | null;
+    /** Fires when a tile is selected. */
+    onSelect: (key: string) => void;
+    /** Optional heading rendered above the grid. */
+    heading?: string;
+    /**
+     * `aria-label` for the wrapping group when `heading` is omitted.
+     * Translatable. Default `'Select an option'`. When `heading` is
+     * provided this prop is ignored — the grid is labelled by the
+     * heading element.
+     */
+    ariaLabel?: string;
+    /**
+     * How the options render. Default `'tiles'`.
+     * See {@link TileSelectVariant}.
+     */
+    variant?: TileSelectVariant;
+    /**
+     * `variant="compact"` only: a CAP on how many options stay on the pill.
+     * Unset by default, and normally best left that way — the pill already
+     * measures the track and keeps every option that fits, folding only
+     * what is left over. Set it when a surface wants a shorter row than
+     * its width allows.
+     *
+     * The cap gives way in one case: when honouring it would leave a single
+     * option in the menu that the track had room for. A "More" button is
+     * wider than most labels, so that fold costs space and buys a click.
+     */
+    maxVisible?: number;
+    /**
+     * `variant="compact"` only: label for the overflow trigger. Shown
+     * until an option inside the menu is selected, after which the
+     * trigger carries that option's label. Translatable. Default `'More'`.
+     */
+    moreLabel?: string;
+    /**
+     * Grid columns on >= sm. Default `3`. Mobile collapses to 2.
+     * `5` and `6` keep a full method set on one row on a wide surface.
+     * Ignored by `variant="compact"`, which is a single strip.
+     */
+    columnsDesktop?: 2 | 3 | 4 | 5 | 6;
+    columnsMobile?: 1 | 2;
+    /** `variant="tiles"` only. See {@link TileSelectSize}. Default `'md'`. */
+    size?: TileSelectSize;
+    className?: string;
+    'data-testid'?: string;
+}

package/dist/patterns/UnderlineTabs/UnderlineTabs.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export type UnderlineTabsSize = 'md' | 'sm';
+export type UnderlineTabsSize = 'md' | 'lg' | 'sm';
 /**
  * `primary`: the page's own tabs; the selected label turns ink.
  * `secondary`: tabs nested inside a section; flush, padded, semibold, the
@@ -37,14 +37,22 @@ export interface UnderlineTabsProps<K extends string = string> {
     onChange: (key: K) => void;
     /** Names the tablist. Required — an unnamed tablist gives no context. */
     ariaLabel: string;
-    /** `md` (default): the back-office strip. `sm`: the Quick Donation / Quick Membership strip. */
+    /**
+     * `md` (default): the back-office strip. `sm`: the Quick Donation / Quick
+     * Membership strip. `lg`: the Quick entry header strip.
+     */
     size?: UnderlineTabsSize;
     /** See {@link UnderlineTabsLevel}. Default `primary`. Read by `size="sm"` only. */
     level?: UnderlineTabsLevel;
+    /**
+     * `true` (default): the strip draws its hairline and keeps its gap to what
+     * follows. `false`: neither, for a strip at the foot of a card.
+     */
+    showDivider?: boolean;
     className?: string;
     'data-testid'?: string;
 }
-export declare function UnderlineTabs<K extends string = string>({ items, value, onChange, ariaLabel, size, level, className, 'data-testid': dataTestId, }: UnderlineTabsProps<K>): import("react/jsx-runtime").JSX.Element;
+export declare function UnderlineTabs<K extends string = string>({ items, value, onChange, ariaLabel, size, level, showDivider, className, 'data-testid': dataTestId, }: UnderlineTabsProps<K>): import("react/jsx-runtime").JSX.Element;
 export declare namespace UnderlineTabs {
     var displayName: string;
 }