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

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

@@ -0,0 +1,2 @@
+export { SourcePill } from './SourcePill';
+export type { SourcePillProps } from './types';

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

@@ -0,0 +1,19 @@
+/**
+ * Every slot class of `SourcePill`. HeroUI semantic colours plus the `ai-*`
+ * marker badge. Secondary text is `default-600`, because the pill's hover fill
+ * is `default-100` and `default-500` falls under 4.5:1 there.
+ */
+export declare const sourcePillClass: {
+    readonly base: "inline-flex h-auto min-h-8 min-w-0 max-w-full items-center justify-start gap-1.5 rounded-full border border-default-200 bg-content1 px-2.5 py-1 text-xs text-foreground";
+    readonly interactive: "data-[hover=true]:bg-default-100 data-[focus-visible=true]:outline-none data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-ai-focus";
+    readonly disabled: "border-dashed";
+    /** The same badge as `CitationMarker`, so `[n]` in the text and on the pill match. */
+    readonly marker: "flex-none inline-flex items-center rounded border border-ai-border bg-ai-fill px-1 text-[0.6875rem] font-semibold leading-4 tabular-nums text-ai-accent";
+    readonly srOnly: "sr-only";
+    readonly icon: "flex-none text-default-600";
+    readonly kind: "flex-none font-semibold";
+    readonly title: "min-w-0 truncate";
+    readonly date: "flex-none tabular-nums text-default-600";
+    readonly reason: "flex flex-none items-center gap-1 text-default-600";
+    readonly separator: "flex-none text-default-600";
+};

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

@@ -0,0 +1,19 @@
+export interface SourcePillProps {
+    /** What kind of source it is, e.g. "Email", "Call", "Case". */
+    kindLabel: string;
+    /** The source's short title. Long titles are cut with an ellipsis; the full text stays in the accessible name. */
+    title: string;
+    /** A preformatted date, e.g. "12 Oct". */
+    date?: string;
+    /** Iconify name for the kind. */
+    icon?: string;
+    /** The `[n]` this source answers to in the text, shown first so the two can be matched by eye. */
+    marker?: number | string;
+    /** Opens the source. Omitted, the pill is plain text. */
+    onOpen?: () => void;
+    /** The source can't be opened (deleted, no longer linked). Shown with `disabledReason`, never as a dead button. */
+    isDisabled?: boolean;
+    /** Why it can't be opened, shown next to it, e.g. "No longer available". */
+    disabledReason?: string;
+    'data-testid'?: string;
+}

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

@@ -6,4 +6,4 @@
  * `<PaymentsDropIn>` orchestrator.
  */
 export { SplitPaymentSummary } from './SplitPaymentSummary';
-export type { SplitPaymentSummaryProps, SplitPaymentSummaryLabels, TenderRow, TenderRowStatus, TenderRowType, Money, } from './types';
+export type { SplitPaymentSummaryProps, SplitPaymentSummaryLabels, SplitPaymentSummaryVariant, TenderRow, TenderRowStatus, TenderRowType, Money, } from './types';

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

@@ -38,6 +38,13 @@ export interface SplitPaymentSummaryLabels {
     statusRecorded?: string;
     statusFailed?: string;
 }
+/**
+ * How the remaining balance is presented.
+ *
+ * `banner` is the original: a padded card with the label over a 4xl amount,
+ * ~104px tall. `compact` says the same thing on one ~24px row.
+ */
+export type SplitPaymentSummaryVariant = 'banner' | 'compact';
 export interface SplitPaymentSummaryProps {
     /** Total amount the host is collecting (sum target). */
     total: Money;
@@ -56,6 +63,17 @@ export interface SplitPaymentSummaryProps {
     labels?: SplitPaymentSummaryLabels;
     /** Hide the collected list (just the remaining banner). */
     hideCollectedList?: boolean;
+    /**
+     * Default `'banner'`. `'compact'` trades the padded card for a single
+     * label-and-amount row — the same information in ~24px instead of ~104px.
+     *
+     * For surfaces where the split summary shares a modal with a tender form:
+     * measured in the payments drop-in, the banner alone was two thirds of
+     * that modal's overflow, and the card form could not be seen whole.
+     * The collected list is unaffected — it is the part that cannot be said
+     * in one line.
+     */
+    variant?: SplitPaymentSummaryVariant;
     'data-testid'?: string;
     className?: string;
 }

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

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

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

@@ -0,0 +1,2 @@
+export { StatTiles } from './StatTiles';
+export type { StatTilesProps, StatTileItem } from './types';

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

@@ -0,0 +1,8 @@
+export declare const STAT_TILES_PAIR_MIN = 560;
+export declare const statTilesClass: {
+    readonly base: "grid gap-3";
+    readonly tile: "min-w-0 rounded-[14px] border border-pos-line bg-white px-[18px] py-4 shadow-[0_1px_4px_rgba(0,0,0,.06),0_4px_12px_rgba(0,0,0,.06)]";
+    readonly value: "text-[23px] font-bold leading-[1.2] tracking-[-.02em] tabular-nums text-default-900 [overflow-wrap:anywhere]";
+    readonly label: "mt-[5px] text-[13.5px] text-default-500";
+    readonly caption: "mt-0.5 text-[12.5px] text-default-500";
+};

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

@@ -11,9 +11,58 @@ export interface TileSelectOption {
     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[];
@@ -30,9 +79,38 @@ export interface TileSelectProps {
      * heading element.
      */
     ariaLabel?: string;
-    /** Grid columns on >= sm. Default `3`. Mobile collapses to 2. */
-    columnsDesktop?: 2 | 3 | 4;
+    /**
+     * 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/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 './TileSelect';

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

@@ -0,0 +1,14 @@
+/**
+ * `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]";
+};

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

@@ -1,2 +1,2 @@
 export { WizardShell } from './WizardShell';
-export type { WizardShellProps, WizardStep, WizardStepState, WizardShellPrimaryAction, WizardShellSecondaryAction, WizardShellTotalRow, WizardShellLabels, } from './types';
+export type { WizardShellProps, WizardStep, WizardStepState, WizardShellPrimaryAction, WizardShellSecondaryAction, WizardShellTotalRow, WizardShellTotalBadge, WizardShellLabels, } from './types';