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

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { RecordTone } from '../shared/recordTone';
+export interface StatTileItem {
+    label: string;
+    value: ReactNode;
+    tone?: RecordTone;
+    caption?: ReactNode;
+}
+export interface StatTilesProps {
+    items: StatTileItem[];
+    'data-testid'?: string;
+}

package/dist/patterns/StatusChip/StatusChip.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { ChipProps } from '../../components';
 /** Domain-agnostic lifecycle states an admin row can be in. */
-export type StatusChipStatus = 'active' | 'archived' | 'inactive' | 'draft' | 'pending' | 'success' | 'warning' | 'danger' | 'neutral';
+export type StatusChipStatus = 'active' | 'archived' | 'inactive' | 'draft' | 'pending' | 'success' | 'warning' | 'danger' | 'neutral' | 'info' | 'violet';
 export interface StatusChipProps {
     /** Lifecycle state — selects the colour/tone only, never the text. */
     status: StatusChipStatus;
@@ -12,12 +12,12 @@ export interface StatusChipProps {
      * `'dot'` variant: a soft, radius-full pill with a leading tone dot,
      * 12px / weight-600 text, tuned for dense admin lifecycle tables.
      */
-    variant?: ChipProps['variant'] | 'dot';
+    variant?: ChipProps['variant'] | 'dot' | 'plain';
     /** Chip size. Default `'sm'`. Ignored by `variant="dot"`. */
     size?: ChipProps['size'];
     /**
      * Override the colour derived from `status`. Escape hatch for the
-     * rare state not covered by `StatusChipStatus`. Ignored by `variant="dot"`.
+     * rare state not covered by `StatusChipStatus`. Ignored by `variant="dot"` and `variant="plain"`.
      */
     color?: ChipProps['color'];
     /** Optional leading element (dot, icon). Ignored by `variant="dot"`. */

package/dist/patterns/StepProgress/StepProgress.d.ts

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

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

@@ -0,0 +1,2 @@
+export { StepProgress } from './StepProgress';
+export type { StepProgressProps, StepProgressStep, StepProgressLabels } from './types';

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

@@ -0,0 +1,29 @@
+/**
+ * Slot classes for `StepProgress`, measured off `veevart-2-pos-latest`
+ * (`.stepbar` and `.exprog`, read with `getComputedStyle` on 2026-10-21).
+ *
+ * Segment colours are the screen's own: done is `pos-ok` (#3B6D11), active the
+ * brand, upcoming the `pos-line` hairline. Names are 12px/600 on an 18px line:
+ * upcoming in `pos-muted`, active in `pos-ink`, done in `pos-ok` behind a 13px
+ * filled check with a 5px gap. DS tokens only, no stock HeroUI colours.
+ *
+ * Every size is rem (the 4px segment is `h-1`), so the POS "Text size"
+ * setting, which scales the root font size, scales the bar with the screen.
+ * Nothing here animates, so reduced motion has nothing to turn off.
+ */
+export declare const stepProgressClass: {
+    /** `.stepbar`: bare segments, 6px apart. */
+    readonly bare: "flex gap-1.5";
+    /** `.exprog`: labelled steps, 16px apart. */
+    readonly list: "m-0 flex list-none gap-4 p-0";
+    readonly item: "flex min-w-0 flex-1 flex-col";
+    readonly step: "flex min-w-0 flex-1 flex-col items-stretch gap-1.5 text-left";
+    readonly button: "cursor-pointer rounded-md border-none bg-transparent p-0 font-[inherit] outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[0.1875rem] focus-visible:outline-primary disabled:cursor-default";
+    readonly segment: "block h-1 rounded-full";
+    readonly name: "flex min-w-0 items-center gap-[0.3125rem] truncate text-xs font-semibold leading-[1.125rem]";
+    /** The 13px filled check in front of a finished step's name. */
+    readonly check: "flex h-[0.8125rem] w-[0.8125rem] shrink-0";
+};
+export type StepTone = 'done' | 'active' | 'upcoming';
+export declare const segmentToneClass: Record<StepTone, string>;
+export declare const nameToneClass: Record<StepTone, string>;

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

@@ -0,0 +1,43 @@
+import { WizardStepState } from '../WizardShell/types';
+export interface StepProgressStep {
+    id: string;
+    /** Step name, printed under its segment when `showLabels` is on. */
+    label: string;
+    /**
+     * Only `'skipped'` is read: a skipped step gets no segment. Every other
+     * state is derived from the step's position against `activeStepId`, so a
+     * `WizardStep[]` can be passed as is.
+     */
+    state?: WizardStepState;
+}
+export interface StepProgressLabels {
+    /** Accessible name of the step list. Default `'Progress'`. */
+    ariaLabel?: string;
+    /** Screen-reader suffix on a finished step. Default `'completed'`. */
+    completed?: string;
+}
+export interface StepProgressProps {
+    steps: readonly StepProgressStep[];
+    /** The step the host is on. Steps before it read as done, steps after it as upcoming. */
+    activeStepId: string;
+    /**
+     * `true` (default) prints each step's name under its segment, with a check
+     * on finished steps: the POS "Sell a membership" bar (`.exprog`).
+     * `false` draws the bare segments only, as `WizardShell` does (`.stepbar`).
+     */
+    showLabels?: boolean;
+    /**
+     * Makes the labelled steps buttons. Fires with the step's `id` when a
+     * reachable step is pressed. Without it the bar is display-only.
+     */
+    onStepPress?: (stepId: string) => void;
+    /**
+     * Which steps `onStepPress` may go to. Default: the finished ones (before
+     * the active step). Unreachable steps render as disabled buttons.
+     */
+    isStepReachable?: (stepId: string, index: number) => boolean;
+    labels?: StepProgressLabels;
+    /** Padding and placement belong to the host: the bar draws none of its own. */
+    className?: string;
+    'data-testid'?: string;
+}

package/dist/patterns/Summary/components/ActionBar.d.ts

@@ -12,6 +12,8 @@ export interface ActionBarProps {
     cartAriaLabel: string;
     /** Optional caption rendered under the open-layer CTA (e.g. installment breakdown). */
     ctaCaption?: React.ReactNode;
+    /** Optional error rendered ABOVE the CTA, so it clears the screen edge and the thumb. */
+    ctaError?: React.ReactNode;
     /** Expand the summary — the closed-bar cart button opens it on click. */
     onToggleOpen?: () => void;
     classNames: SummaryClassNames;

package/dist/patterns/Summary/components/GrandTotalRow.d.ts

@@ -6,6 +6,7 @@ export interface GrandTotalRowProps {
         amount: Money;
     };
     locale: string;
+    compact?: boolean;
     className?: string;
 }
 export declare const GrandTotalRow: React.FC<GrandTotalRowProps>;

package/dist/patterns/Summary/components/ItemRow.d.ts

@@ -7,5 +7,6 @@ export interface ItemRowProps {
     removeAriaLabel: string;
     /** Show the per-item remove control. Defaults to `true`. */
     showRemoveButton?: boolean;
+    compact?: boolean;
 }
 export declare const ItemRow: React.FC<ItemRowProps>;

package/dist/patterns/Summary/components/SummaryBody.d.ts

@@ -9,9 +9,12 @@ export interface SummaryBodyProps {
     locale: string;
     onRemoveItem?: (id: string) => void;
     removeAriaLabel: string;
-    /** Show the per-item remove control. Defaults to `true`. */
+    onRemoveTotalRow?: (id: string) => void;
+    removeTotalRowAriaLabel: string;
+    /** Show the per-item and per-totals-row remove controls. Defaults to `true`. */
     showRemoveButton?: boolean;
     emptyState?: React.ReactNode;
+    compact?: boolean;
     classNames: SummaryClassNames;
 }
 export declare const SummaryBody: React.FC<SummaryBodyProps>;

package/dist/patterns/Summary/components/TotalsLineRow.d.ts

@@ -1,12 +1,13 @@
 import { default as React } from 'react';
-import { SummaryPostTotalRow } from '../types';
+import { SummaryTotalRow } from '../types';
 export interface TotalsLineRowProps {
-    row: SummaryPostTotalRow;
+    row: SummaryTotalRow;
     locale: string;
     emphasized: boolean;
     onRemove?: (id: string) => void;
     removeAriaLabel?: string;
     /** Show the per-row remove control. Defaults to `true`. */
     showRemoveButton?: boolean;
+    compact?: boolean;
 }
 export declare const TotalsLineRow: React.FC<TotalsLineRowProps>;

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { Money } from '../../utils/money';
+import { RecordTone } from '../shared/recordTone';
 export type { Money } from '../../utils/money';
 /**
  * A generic, parametrizable detail row rendered under a line item — an icon +
@@ -56,6 +57,21 @@ export interface SummaryLineItem {
      * show an auto-renewal note and a pay-by-installments line.
      */
     details?: SummaryItemDetail[];
+    /** Pre-formatted list price, rendered struck through before `amount`. */
+    originalAmount?: string;
+    /** Node rendered under the amount, right-aligned (e.g. a `StatusChip`). */
+    trailing?: ReactNode;
+    /** Tints the whole row with the tone's fill. */
+    tone?: RecordTone;
+    /** Dims the price while it is being recalculated (e.g. a quantity change not yet confirmed). */
+    pending?: boolean;
+    /**
+     * `false` hides this row's remove (trash) control even when `onRemoveItem`
+     * is wired and `showRemoveButton` is on — for a line the host changes
+     * through another flow (the register's own membership line goes through
+     * "Change membership"). Applies to nested rows one by one. Default `true`.
+     */
+    removable?: boolean;
 }
 /** The "Pay Service fee" radio-toggle row. */
 export interface SummaryServiceFee {
@@ -66,18 +82,20 @@ export interface SummaryServiceFee {
     /** Fires when the row/radio is toggled. */
     onToggle?: () => void;
 }
-/** A plain totals row (Subtotal, Taxes). */
+/** A plain totals row (Subtotal, Discounts, Taxes). */
 export interface SummaryTotalRow {
     /** Stable key for `data-testid` (e.g. 'subtotal', 'taxes'). */
     key: string;
     label: ReactNode;
     amount: Money;
+    /** Stable id; when set and `onRemoveTotalRow` exists, the row shows the remove control (e.g. one row per removable discount). */
+    id?: string;
+    /** Tone of the amount: `'success'` paints it in the success color (e.g. a discount); default inherits the row tone. */
+    amountTone?: 'default' | 'success';
 }
 /**
- * A post-total row — the same flat shape as {@link SummaryTotalRow}, plus an
- * optional `id` that (together with `onRemovePostTotalRow`) enables the same
- * trash remove control the line items use. Kept as its own interface so the
- * pre-total `rows` — where an id/remove has no meaning — stay untouched.
+ * A post-total row — the same flat shape as {@link SummaryTotalRow}; rows with
+ * an `id` show the trash remove control when `onRemovePostTotalRow` exists.
  */
 export interface SummaryPostTotalRow extends SummaryTotalRow {
     /** Stable id; when set and `onRemovePostTotalRow` exists, the row shows the remove control. */
@@ -94,6 +112,8 @@ export interface SummaryPrimaryAction {
 export interface SummaryLabels {
     /** Aria label for the per-item remove control. Default "Remove item". */
     removeAriaLabel?: string;
+    /** Aria label for the per-totals-row remove control. Default "Remove discount". */
+    removeTotalRowAriaLabel?: string;
     /** Aria label for the per-post-total-row remove control. Default "Remove applied code". */
     removePostTotalRowAriaLabel?: string;
     /** Aria label for the collapse/expand press target. Default "Toggle summary". */
@@ -132,6 +152,8 @@ export interface SummaryClassNames {
     cta?: string;
     /** The caption rendered under the CTA. */
     ctaCaption?: string;
+    /** The error rendered next to the CTA. */
+    ctaError?: string;
     /** Mobile compact bottom-bar. */
     mobileBar?: string;
     /** Mobile cart button. */
@@ -150,7 +172,11 @@ export interface SummaryProps {
     items?: SummaryLineItem[];
     /** Optional "Pay Service fee" radio-toggle row. */
     serviceFee?: SummaryServiceFee;
-    /** Plain totals rows rendered above the Total (Subtotal, Taxes). */
+    /**
+     * Plain totals rows rendered above the Total (Subtotal, Discounts, Taxes).
+     * Rows with an `id` show the trash remove control when `onRemoveTotalRow`
+     * is provided (same gating as the item remove, incl. `showRemoveButton`).
+     */
     rows?: SummaryTotalRow[];
     /** The emphasized Total row (label default "Total"). */
     total: {
@@ -182,9 +208,16 @@ export interface SummaryProps {
      */
     ctaCaption?: ReactNode;
     /**
-     * Whether the remove (trash) controls are shown — per-item and
-     * per-post-total-row alike. Defaults to `true`; pass `false` to hide them
-     * even when `onRemoveItem` / `onRemovePostTotalRow` are wired. Independent
+     * An optional error (e.g. a rejected request) shown in danger text next to
+     * the CTA: under it in the card layout, ABOVE it in the mobile bottom bar,
+     * where the sticky CTA sits at the screen edge and a message under it would
+     * hug the edge and sit beneath the thumb. Rendered as `role="alert"`.
+     */
+    ctaError?: ReactNode;
+    /**
+     * Whether the remove (trash) controls are shown — per-item, per-totals-row
+     * and per-post-total-row alike. Defaults to `true`; pass `false` to hide them
+     * even when `onRemoveItem` / `onRemoveTotalRow` / `onRemovePostTotalRow` are wired. Independent
      * of the handlers so a host can keep them but suppress the controls.
      */
     showRemoveButton?: boolean;
@@ -213,6 +246,8 @@ export interface SummaryProps {
     primaryAction?: SummaryPrimaryAction;
     /** When provided, item rows show a red trash remove control. */
     onRemoveItem?: (id: string) => void;
+    /** When provided, totals rows (above the Total) with an `id` show the same red trash remove control. */
+    onRemoveTotalRow?: (id: string) => void;
     /** When provided, post-total rows with an `id` show the same red trash remove control. */
     onRemovePostTotalRow?: (id: string) => void;
     /**
@@ -231,6 +266,13 @@ export interface SummaryProps {
     /** Rendered when there are no items. */
     emptyState?: ReactNode;
     labels?: SummaryLabels;
+    /**
+     * Visual density. `'compact'` drops the card's title and the prices row, removes the
+     * `{qty} x` prefix, separates items with dividers, renders the totals rows
+     * small and muted and a smaller Total without a divider above it (e.g. a POS
+     * cart panel). Defaults to `'default'`.
+     */
+    density?: 'default' | 'compact';
     'data-testid'?: string;
     className?: string;
     /** Per-slot class overrides (Design-System `classNames` convention). */

package/dist/patterns/TableSkeleton/TableSkeleton.d.ts

@@ -25,6 +25,7 @@ export interface TableSkeletonProps {
     barHeight?: number;
     /** Right-aligns the last column's bar, for a trailing numeric or actions column. */
     alignLastRight?: boolean;
+    appearance?: 'pulse' | 'shimmer';
     className?: string;
     classNames?: TableSkeletonClassNames;
     'data-testid'?: string;

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

@@ -1,39 +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;
-    /** Override per-tile test id; defaults to `${dataTestId}-${key}`. */
-    'data-testid'?: string;
-}
-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;
-    /** Grid columns on >= sm. Default `3`. Mobile collapses to 2. */
-    columnsDesktop?: 2 | 3 | 4;
-    columnsMobile?: 1 | 2;
-    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 } from './TileSelect';
+export type { TileSelectProps, TileSelectOption, TileSelectVariant, TileSelectSize } from './types';

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

@@ -0,0 +1,56 @@
+/**
+ * `size="sm"` tile classes (`.tender-tile`). rem only: 1px border + `py-2.5` +
+ * 17px icon + 5px gap + 14px label line + `py-2.5` + 1px border = the
+ * mockup's 58px. Reduced motion (OS or the POS override on `<html>`) drops
+ * the colour easing and the press scale.
+ */
+export declare const smallTileClass: {
+    readonly grid: "gap-2";
+    readonly tile: "flex flex-col items-center justify-center gap-[0.3125rem] h-auto min-h-0 min-w-0 rounded-xl border px-1 py-2.5 transition-colors motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none motion-reduce:data-[pressed=true]:scale-100 [html[data-pos-reduce-motion=true]_&]:data-[pressed=true]:scale-100";
+    readonly idle: "border-pos-field bg-white text-pos-ink data-[hover=true]:border-pos-line-strong data-[hover=true]:bg-white";
+    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/ToolbarButton/ToolbarButton.d.ts

@@ -10,6 +10,7 @@ export type ToolbarButtonProps = Omit<ComponentPropsWithoutRef<typeof Button>, '
      * count straight through without guarding it.
      */
     count?: number;
+    appearance?: 'pill' | 'outline';
     /** Forwarded as `data-testid`. */
     testId?: string;
 };
@@ -23,6 +24,7 @@ export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<Omit<Om
      * count straight through without guarding it.
      */
     count?: number;
+    appearance?: "pill" | "outline";
     /** Forwarded as `data-testid`. */
     testId?: string;
 } & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,4 +1,11 @@
 import { default as React } from 'react';
+export type UnderlineTabsSize = 'md' | 'sm';
+/**
+ * `primary`: the page's own tabs; the selected label turns ink.
+ * `secondary`: tabs nested inside a section; flush, padded, semibold, the
+ * selected label turns brand. Read by `size="sm"` only.
+ */
+export type UnderlineTabsLevel = 'primary' | 'secondary';
 export interface UnderlineTabItem<K extends string = string> {
     key: K;
     label: React.ReactNode;
@@ -15,6 +22,14 @@ export interface UnderlineTabItem<K extends string = string> {
      * the DOM does not contain; passing `content` is the fix.
      */
     content?: React.ReactNode;
+    /** Not selectable: drawn at 40% and skipped by the arrow keys. */
+    isDisabled?: boolean;
+    /**
+     * The browser tooltip on the tab (its `title`), read out as its
+     * description: why a disabled tab is out of reach ("Corporate memberships
+     * cannot be gifted").
+     */
+    hint?: string;
 }
 export interface UnderlineTabsProps<K extends string = string> {
     items: UnderlineTabItem<K>[];
@@ -22,10 +37,14 @@ 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. */
+    size?: UnderlineTabsSize;
+    /** See {@link UnderlineTabsLevel}. Default `primary`. Read by `size="sm"` only. */
+    level?: UnderlineTabsLevel;
     className?: string;
     'data-testid'?: string;
 }
-export declare function UnderlineTabs<K extends string = string>({ items, value, onChange, ariaLabel, 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, className, 'data-testid': dataTestId, }: UnderlineTabsProps<K>): import("react/jsx-runtime").JSX.Element;
 export declare namespace UnderlineTabs {
     var displayName: string;
 }

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

@@ -1,2 +1,2 @@
 export { UnderlineTabs } from './UnderlineTabs';
-export type { UnderlineTabsProps, UnderlineTabItem } from './UnderlineTabs';
+export type { UnderlineTabsProps, UnderlineTabItem, UnderlineTabsSize, UnderlineTabsLevel } from './UnderlineTabs';

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

@@ -0,0 +1,10 @@
+export interface UnderlineTabsSlots {
+    base: string;
+    tabList: string;
+    cursor: string;
+    tab: string;
+    tabContent: string;
+}
+export declare const underlineTabsSlots: Record<'md' | 'sm-primary' | 'sm-secondary', UnderlineTabsSlots>;
+/** Added to the `md` cursor under reduced motion: it jumps instead of sliding. */
+export declare const stillCursorClass = "data-[animated=true]:transition-none";

package/dist/patterns/VerticalSteps/StepPager.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { StepPagerProps } from './types';
+export declare function StepPager({ steps, currentStep, onStepChange, progressLabel, nextLabel, previousLabel, finalActionLabel, onFinalAction, isFinalActionDisabled, className, 'data-testid': dataTestId, previousTestId, nextTestId, finalActionTestId, }: StepPagerProps): JSX.Element;
+export declare namespace StepPager {
+    var displayName: string;
+}