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

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

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { TimeFieldProps } from './types';
+export declare function TimeField({ value: valueProp, defaultValue, onChange, label, 'aria-label': ariaLabel, placeholder, emptyContent, invalidMessage, minTime, minTimeMessage, listStart, listEnd, listStep, locale, isRequired, isDisabled, isInvalid, errorMessage, isClearable, clearLabel, onBlur, size, variant, labelPlacement, className, inputProps, popoverProps, 'data-testid': dataTestId, }: TimeFieldProps): JSX.Element;
+export declare namespace TimeField {
+    var displayName: string;
+}

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

@@ -0,0 +1,3 @@
+export { TimeField } from './TimeField';
+export { parseTimeInput } from './time';
+export type { TimeFieldProps } from './types';

package/dist/patterns/TimeField/time.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The time logic behind {@link TimeField}, kept free of React so it can be
+ * tested and reused on its own. Every time in and out is 24-hour `"HH:mm"`.
+ */
+/** Minutes since midnight of an `"HH:mm"` time. */
+export declare function toMinutes(time: string): number;
+/**
+ * Read typed text as a time: `"HH:mm"`, or `null` when it is not one.
+ *
+ * Forgiving on purpose: `"7:15 pm"`, `"7:15pm"`, `"715p"`, `"7p"`, `"19:15"`,
+ * `"1915"` and `"7"` all work; case, spaces and dots do not matter
+ * (`"7:15 P.M."`). Without am/pm, hours 1–6 read as afternoon (no venue opens
+ * at 3 AM) and every other hour as 24-hour: `"3"` is 15:00, `"7"` is 07:00,
+ * `"19"` is 19:00, `"0"` is midnight.
+ *
+ * @example
+ * parseTimeInput('715p'); // '19:15'
+ * parseTimeInput('3');    // '15:00'
+ * parseTimeInput('25');   // null
+ */
+export declare function parseTimeInput(input: string): string | null;
+/**
+ * The suggested times: `start` to `end` inclusive, every `step` whole
+ * minutes. Empty when `step` is under a minute or `end` is before `start`.
+ */
+export declare function buildTimeOptions(start: string, end: string, step: number): string[];
+/**
+ * Whether the list keeps `time` while `query` is typed. It compares against
+ * the 12-hour form (`"7:30"`) and the 24-hour forms (`"19:30"`, `"07:30"`), so
+ * it does not depend on how the label is formatted: `"7"` keeps 7:00 and
+ * 7:30 AM and PM, `"7p"` only the PM ones, `"19"` the 7 PM ones, `"p"` every
+ * PM time.
+ */
+export declare function matchesTimeQuery(time: string, query: string): boolean;
+/**
+ * The label for a time in `locale`: `"7:15 PM"` in `en-US`, `"19:15"` in
+ * `en-GB`, `"7:15 p. m."` in `es-CO`. No-break spaces become plain ones, so
+ * the label matches what people type and what tests search for.
+ */
+export declare function formatTimeLabel(time: string, locale: string): string;

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

@@ -0,0 +1,77 @@
+import { FocusEvent, ReactNode } from 'react';
+import { AutocompleteProps } from '../../components';
+/** One row of the list: the `"HH:mm"` key and its locale label. */
+export interface TimeFieldOption {
+    key: string;
+    label: string;
+}
+export interface TimeFieldProps {
+    /**
+     * The time as 24-hour `"HH:mm"` text, or `null` for none. Omit for
+     * uncontrolled mode.
+     */
+    value?: string | null;
+    /** Starting time in uncontrolled mode. */
+    defaultValue?: string | null;
+    /** Called with the committed `"HH:mm"`, or `null` when a clearable field is emptied. */
+    onChange?: (time: string | null) => void;
+    /** Visible label. Without one, pass `aria-label`. */
+    label?: ReactNode;
+    'aria-label'?: string;
+    /** "e.g. 7:15 PM". */
+    placeholder?: string;
+    /**
+     * Shown in the list when nothing matches the typed text, or the text was
+     * erased ("Type a time like 7:15 PM"). Required and non-empty: HeroUI's
+     * own is English, and an Autocomplete that hides an empty list loses its
+     * options to `aria-hidden` when they come back.
+     */
+    emptyContent: ReactNode;
+    /** Shown when the typed text is not a time ("Enter a time like 7:15 PM."). */
+    invalidMessage: ReactNode;
+    /**
+     * Earliest allowed `"HH:mm"`. Earlier times leave the list, and typing
+     * one, or receiving one as `value`, shows `minTimeMessage`.
+     */
+    minTime?: string;
+    /** Shown for a time before `minTime` ("Ends after it starts."). Defaults to `invalidMessage`. */
+    minTimeMessage?: ReactNode;
+    /** First time the list suggests. @default '07:00' */
+    listStart?: string;
+    /** Last time the list suggests, inclusive. @default '21:00' */
+    listEnd?: string;
+    /** Minutes between suggested times. @default 30 */
+    listStep?: number;
+    /**
+     * BCP 47 locale the times are written in: "7:15 PM" in `en-US`, "19:15"
+     * in `en-GB`. Pass the same one as `HeroUIProvider`. @default 'en-US'
+     */
+    locale?: string;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    /** Marks the field invalid from outside; `errorMessage` is shown with it. */
+    isInvalid?: boolean;
+    errorMessage?: ReactNode;
+    /**
+     * Whether the field may be emptied: a clear button shows, and leaving it
+     * empty commits `null`. Otherwise leaving it empty restores the time it
+     * had. @default false
+     */
+    isClearable?: boolean;
+    /** Accessible name of the clear button ("Clear time"); HeroUI gives it none. */
+    clearLabel?: string;
+    /** Called after the field has committed what was typed (react-hook-form's `field.onBlur`). */
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    size?: AutocompleteProps['size'];
+    /** @default 'bordered' */
+    variant?: AutocompleteProps['variant'];
+    /** @default 'outside-top' */
+    labelPlacement?: AutocompleteProps['labelPlacement'];
+    className?: string;
+    /** Passed to HeroUI's input: `{ classNames: { inputWrapper: 'h-11' } }`. */
+    inputProps?: AutocompleteProps['inputProps'];
+    /** Passed to HeroUI's popover. */
+    popoverProps?: AutocompleteProps['popoverProps'];
+    /** Lands on the `<input>`. Options get `${data-testid}-option-${HH:mm}`. */
+    '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' | 'lg' | '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,20 @@ 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;
+    /**
+     * Something on this tab's panel needs a fix: a warning dot after the label,
+     * and `needsFixLabel` read out with the tab's name. Pick the tab a panel
+     * opens on with `firstNeedsFixKey(items, fallback)`.
+     */
+    needsFix?: boolean;
 }
 export interface UnderlineTabsProps<K extends string = string> {
     items: UnderlineTabItem<K>[];
@@ -22,10 +43,28 @@ 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. `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;
+    /**
+     * Spoken after the name of a tab with `needsFix` ("Needs a fix"), in place
+     * of the dot, which is hidden from assistive tech. Pass it whenever an
+     * item can need a fix: without it the state is color alone.
+     */
+    needsFixLabel?: string;
     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, showDivider, needsFixLabel, 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,21 @@
+export interface UnderlineTabsSlots {
+    base: string;
+    tabList: string;
+    cursor: string;
+    tab: string;
+    tabContent: string;
+}
+export declare const underlineTabsSlots: Record<'md' | 'lg' | 'sm-primary' | 'sm-secondary', UnderlineTabsSlots>;
+/**
+ * Merged over any look by `showDivider={false}`: no hairline under the strip
+ * and no gap after it. `md` draws its hairline on the list, the other looks on
+ * `base`, so both slots drop theirs (and `-mb-px`, which only overlapped it).
+ */
+export declare const underlineTabsNoDivider: Pick<UnderlineTabsSlots, 'base' | 'tabList'>;
+/**
+ * The title of a tab with `needsFix`: the label, then the dot 6px after it
+ * (the prototype's `gap-1.5`), centred on the label's line.
+ */
+export declare const underlineTabsNeedsFixTitleClass = "inline-flex items-center gap-1.5";
+/** 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;
+}

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

@@ -0,0 +1,15 @@
+import { JSX } from 'react';
+import { StepsReadinessProps } from './types';
+/**
+ * The verdict that sits in `VerticalSteps`' `header`: ready to publish,
+ * N things to fix, or already live. Copy comes in as props.
+ *
+ * `role="status"` on every variant: the count changes while the user edits,
+ * and a polite announcement is the right weight for it. `data-ready` is
+ * `"true"` for `ready` and `live`, `"false"` for `fix`, so a test can wait on
+ * it without reading copy.
+ */
+export declare function StepsReadiness({ variant, title, description, className, 'data-testid': dataTestId, }: StepsReadinessProps): JSX.Element;
+export declare namespace StepsReadiness {
+    var displayName: string;
+}

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

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { VerticalStepsProps } from './types';
+export declare function VerticalSteps({ steps, currentStep: currentStepProp, defaultStep, onStepChange, isStepReachable, ariaLabel, statusLabels, header, maxHeight, className, style, 'data-testid': dataTestId, ...rest }: VerticalStepsProps): JSX.Element;
+export declare namespace VerticalSteps {
+    var displayName: string;
+}