@veevarts/design-system 2.22.0 → 2.23.0

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

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

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

@@ -0,0 +1,32 @@
+import { DonationAmountsProps, DonationAmountsVariant } from './types';
+type TiledVariant = Exclude<DonationAmountsVariant, 'pill'>;
+type FieldSize = NonNullable<DonationAmountsProps['size']>;
+interface VariantSlots {
+    root: string;
+    title: string;
+    eyebrow: string;
+    caption: string;
+    grid: string;
+    preset: string;
+    presetIdle: string;
+    presetSelected: string;
+    amount: string;
+    amountSelected: string;
+    sublabel: string;
+    customLabel: string;
+    inputBase: string;
+    inputWrapper: string;
+    inputWrapperActive: string;
+    input: string;
+}
+export declare const donationAmountsSlots: Record<TiledVariant, VariantSlots>;
+/**
+ * What `size` changes in `tile` and `pos`: the custom field's height and text.
+ * `md` is the mockup's field (38px in `tile`, 40px in `pos`); `sm` and `lg`
+ * are HeroUI's 32px and 48px fields. The Add button takes `size` directly.
+ */
+export declare const donationAmountsFieldSize: Record<TiledVariant, Record<FieldSize, {
+    wrapper: string;
+    input: string;
+}>>;
+export {};

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

@@ -18,7 +18,27 @@ export interface DonationAmount {
      * If not provided, the formatted currency will be used
      */
     label?: string;
+    /**
+     * Second line under the amount, e.g. `'+$0.56 donation'` on a round-up
+     * offer. Rendered by the `tile` and `pos` variants only; the `pill`
+     * variant has no room for it.
+     */
+    sublabel?: string;
 }
+/**
+ * How the presets and the custom input are drawn.
+ *
+ * - `pill` (default): HeroUI bordered pill buttons; the selected one fills
+ *   with the brand colour. The original look, unchanged.
+ * - `tile`: the Quick Donation / Quick Membership amount grid. Rectangular
+ *   12px tiles on the `pos-field` hairline; the selected tile takes a brand
+ *   border, a 9% brand tint and brand digits.
+ * - `pos`: the register's donation modal and round-up offer. 14px chips on
+ *   the `pos-line` hairline that auto-fit the row (min 96px), 19px digits
+ *   that stay ink when selected over a 5% brand tint, an optional sublabel,
+ *   and a visible label over the custom input.
+ */
+export type DonationAmountsVariant = 'pill' | 'tile' | 'pos';
 /**
  * Selected donation value (can be preset or custom)
  */
@@ -57,6 +77,27 @@ export interface DonationLabels {
      * @default 'Add Donation'
      */
     addDonationButton?: string;
+    /**
+     * Small uppercase heading above the presets ("Round up your total").
+     * `tile` and `pos` variants only.
+     */
+    eyebrow?: string;
+    /**
+     * Muted line under the eyebrow or title ("Current total $19.44").
+     * `tile` and `pos` variants only.
+     */
+    caption?: string;
+    /**
+     * Visible label over the custom amount input ("Custom amount"). When set
+     * it also names the input, so `customAmountAriaLabel` is not needed.
+     * `tile` and `pos` variants only.
+     */
+    customAmountLabel?: string;
+    /**
+     * Accessible name of the preset group when no `title` is shown.
+     * @default 'Suggested amounts'
+     */
+    presetsAriaLabel?: string;
 }
 /**
  * Props for DonationAmounts component
@@ -145,10 +186,23 @@ export interface DonationAmountsProps {
      */
     inputVariant?: 'flat' | 'bordered' | 'faded' | 'underlined';
     /**
-     * Size of the custom amount input and add button
+     * Size of the custom amount input and add button. In `tile` and `pos`,
+     * `md` is the mockup's field; the presets keep their size in every variant.
      * @default 'md'
      */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Visual variant. See {@link DonationAmountsVariant}.
+     * @default 'pill'
+     */
+    variant?: DonationAmountsVariant;
+    /**
+     * Marks the title as required with a danger asterisk (`tile` and `pos`
+     * variants). The asterisk is decorative; announce the requirement through
+     * the form's own validation.
+     * @default false
+     */
+    isRequired?: boolean;
     /**
      * Additional CSS classes
      */

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

@@ -6,13 +6,17 @@
  * @param amount - The amount to format
  * @param locale - The locale to use for formatting (e.g., 'en-US', 'es-ES')
  * @param currency - The currency code (ISO 4217, e.g., 'USD', 'EUR')
+ * @param trimZeroCents - Drop the fraction of a whole amount ("$25" rather than
+ *   "$25.00"). Default `true`; `false` keeps the currency's own digits, as a
+ *   register price does.
  * @returns Formatted currency string
  *
  * @example
- * formatCurrency(1000, 'en-US', 'USD') // "$1,000.00"
- * formatCurrency(1000, 'es-ES', 'EUR') // "1.000,00 €"
+ * formatCurrency(1000, 'en-US', 'USD') // "$1,000"
+ * formatCurrency(1000.5, 'es-ES', 'EUR') // "1000,5 €"
+ * formatCurrency(5, 'en-US', 'USD', false) // "$5.00"
  */
-export declare function formatCurrency(amount: number, locale?: string, currency?: string): string;
+export declare function formatCurrency(amount: number, locale?: string, currency?: string, trimZeroCents?: boolean): string;
 /**
  * Parses a currency string to a number
  * @param value - The currency string to parse

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

@@ -1,2 +1,2 @@
 export { OutcomeView } from './OutcomeView';
-export type { OutcomeViewProps, OutcomeViewLabels, ReceiptChannel } from './types';
+export type { OutcomeViewProps, OutcomeViewLabels, ReceiptChannel, OutcomeViewKind, OutcomePaidWithLine, OutcomeGroup, OutcomeReceiptAction, OutcomeEmailReceipt, OutcomeChangeDue, } from './types';

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

@@ -3,6 +3,77 @@ import { Money } from '../../utils/money';
 export type { DestinationLine, DestinationStatus } from '..';
 export type { Money } from '../../utils/money';
 export type ReceiptChannel = 'email' | 'print';
+/**
+ * Which settled screen this is. Both are the POS `ex` screen's done stage
+ * (`.excard .exdone`); they differ in their default copy and in the top
+ * block's spacing.
+ *
+ * - `refund` (default): "Refund complete", `Reason · …`, "Done". Keeps the
+ *   refund wizard's `4px 0 2px` top block.
+ * - `payment`: "Payment complete", "New sale", "Handled by …". Top block
+ *   flush with the card padding, as `veevart-2-pos-latest` draws it.
+ */
+export type OutcomeViewKind = 'refund' | 'payment';
+/** One tender in "Paid with": icon box, method, amount, status pill. */
+export interface OutcomePaidWithLine {
+    /** Method name ("Card", "Cash", "Visa •••4242"). */
+    label: string;
+    amount: Money;
+    /** Iconify name for the 34px icon box (`'solar:card-outline'`). Omit for no box. */
+    icon?: string;
+    /** Pill at the row's end ("Paid", "Pending"). Omit for none. */
+    status?: string;
+}
+/** One "Outcome" group: an eyebrow over the things the sale produced. */
+export interface OutcomeGroup {
+    /** Eyebrow ("Purchased", "Returned"). */
+    label: string;
+    /** One chip each ("Observer", "Donation"). */
+    items: string[];
+}
+/**
+ * A receipt button in the `.rc-row` (Email receipt / Print receipt / Send
+ * digital card). The host decides which ones a sale offers.
+ */
+export interface OutcomeReceiptAction {
+    /** Stable key; also the testid suffix (`-receipt-action-<key>`). */
+    key: string;
+    label: string;
+    /** Iconify name, 16px, before the label. */
+    icon?: string;
+    onPress: () => void;
+    /**
+     * The action opens a panel under the row (the email box). `true` draws it
+     * pressed and sets `aria-expanded`. Leave `undefined` for a plain action.
+     */
+    expanded?: boolean;
+    isDisabled?: boolean;
+}
+/**
+ * The email box under the receipt row (`.rc-emailbox`): recipients as
+ * removable chips, a free-text field, and the send button. Controlled: the
+ * host owns the list, the draft and the validation.
+ */
+export interface OutcomeEmailReceipt {
+    emails: string[];
+    draft: string;
+    onDraftChange: (draft: string) => void;
+    /** Enter in the field. The host validates and adds (or flags `isInvalid`). */
+    onAddEmail: (draft: string) => void;
+    onRemoveEmail: (email: string) => void;
+    onSend: () => void;
+    /** Danger border on the recipients box. */
+    isInvalid?: boolean;
+    isSending?: boolean;
+    /** Default: disabled while there is no recipient. */
+    isSendDisabled?: boolean;
+}
+/** Cash paid over the total: the screen leads with the change instead of the total. */
+export interface OutcomeChangeDue {
+    amount: Money;
+    /** Muted line under the amount ("Total $19.44 · Cash tendered $20.00"). */
+    caption?: string;
+}
 export interface OutcomeViewLabels {
     processing?: string;
     title?: string;
@@ -17,19 +88,55 @@ export interface OutcomeViewLabels {
     reason?: string;
     /** `{name}` is replaced with the `authorizedBy` prop. */
     authorizedBy?: string;
+    /** Eyebrow over `paidWith`. Default `'Paid with'`. */
+    paidWithTitle?: string;
+    /** Eyebrow over `outcomeGroups`. Default `'Outcome'`. */
+    outcomeTitle?: string;
+    /** Label over the change amount. Default `'Change due'`. */
+    changeDue?: string;
+    /** Placeholder of the email field. Default `'Add email…'`. */
+    emailPlaceholder?: string;
+    /** Accessible name of the email field. Default `'Add email address'`. */
+    emailAriaLabel?: string;
+    /** `{email}` is replaced with the address. Default `'Remove {email}'`. */
+    removeEmail?: string;
+    /** Send button of the email box. Default `'Send receipt'`. */
+    sendEmail?: string;
 }
 export interface OutcomeViewProps {
     state: 'processing' | 'complete';
-    /** Amount refunded — shown under the spinner, then as the receipt headline. */
+    /** See {@link OutcomeViewKind}. Default `'refund'`. */
+    kind?: OutcomeViewKind;
+    /** Amount refunded or paid — shown under the spinner, then as the receipt headline. */
     total?: Money;
-    destinations: DestinationLine[];
+    /**
+     * Where a refund went, with a per-line status chip. A payment omits it:
+     * the section is drawn only when the prop is given.
+     */
+    destinations?: DestinationLine[];
+    /** Muted line under the total ("TXN-10483 · Marcus Chen"). */
+    subtitle?: string;
     /** Refund reason, printed under the total as `Reason · …`. */
     reason?: string;
-    /** Who authorized the refund, printed as the receipt's footer line. */
+    /** "Paid with" rows. */
+    paidWith?: OutcomePaidWithLine[];
+    /** "Outcome" groups: what the sale produced, as chips. */
+    outcomeGroups?: OutcomeGroup[];
+    /** Cash change to hand back. Replaces the title + total block. */
+    changeDue?: OutcomeChangeDue;
+    /** Who authorized the refund or handled the sale, printed as the footer line. */
     authorizedBy?: string;
     /** Receipt channels already chosen, reflected in the row checkboxes. */
     selectedReceipts?: ReceiptChannel[];
+    /** The refund's receipt checkbox rows. Ignored when `receiptActions` is given. */
     onSendReceipt?: (channel: ReceiptChannel) => void;
+    /**
+     * Receipt buttons in one row (`.rc-row`), the payment screen's
+     * Email / Print / Send digital card. Takes the place of the checkbox rows.
+     */
+    receiptActions?: OutcomeReceiptAction[];
+    /** The email box under the receipt row. Pass it while the email action is expanded. */
+    emailReceipt?: OutcomeEmailReceipt;
     onDone: () => void;
     /**
      * Drops the settled state's own `.excard` frame, for hosts that already

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

@@ -65,6 +65,13 @@ export interface SummaryLineItem {
     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 {

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

@@ -52,6 +52,17 @@ export interface TileSelectOption {
  * "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[];
@@ -98,6 +109,8 @@ export interface TileSelectProps {
      */
     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, TileSelectVariant } 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/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/index.d.ts

@@ -10,7 +10,7 @@ export type { MultiselectProps } from './Multiselect';
 export { RichTextArea, RICH_TEXT_PRESETS } from './RichText';
 export type { RichTextAreaProps } from './RichText';
 export { DonationAmounts } from './DonationAmounts';
-export type { DonationAmountsProps, DonationAmount, SelectedDonation, DonationLabels } from './DonationAmounts';
+export type { DonationAmountsProps, DonationAmount, SelectedDonation, DonationLabels, DonationAmountsVariant, } from './DonationAmounts';
 export { ExpireCartTimer } from './ExpireCartTimer';
 export type { ExpireCartTimerProps } from './ExpireCartTimer';
 export { EventDetails } from './Programs/EventDetails';
@@ -62,7 +62,7 @@ export type { AdminToolbarProps, AdminToolbarSearchWidth, AdminToolbarSize } fro
 export { ToolbarButton } from './ToolbarButton';
 export type { ToolbarButtonProps } from './ToolbarButton';
 export { UnderlineTabs } from './UnderlineTabs';
-export type { UnderlineTabsProps, UnderlineTabItem } from './UnderlineTabs';
+export type { UnderlineTabsProps, UnderlineTabItem, UnderlineTabsSize, UnderlineTabsLevel } from './UnderlineTabs';
 export { AdminFieldLabel, AdminTextField, adminFieldErrorClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelSuffixClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './AdminTextField';
 export type { AdminTextFieldProps } from './AdminTextField';
 export { RowActions } from './RowActions';
@@ -86,7 +86,7 @@ export type { SplitPaymentSummaryProps, SplitPaymentSummaryLabels, SplitPaymentS
 export { ModalShell, ModalShellHeader, ModalShellFooter } from './ModalShell';
 export type { ModalShellProps, ModalShellHeaderProps, ModalShellFooterProps } from './ModalShell';
 export { TileSelect } from './TileSelect';
-export type { TileSelectProps, TileSelectOption, TileSelectVariant } from './TileSelect';
+export type { TileSelectProps, TileSelectOption, TileSelectVariant, TileSelectSize } from './TileSelect';
 export { PaymentTotalBanner } from './PaymentTotalBanner';
 export type { PaymentTotalBannerProps } from './PaymentTotalBanner';
 export { LoadingOverlay } from './LoadingOverlay';
@@ -107,6 +107,8 @@ export { DiscardGuard, useDiscardGuard, useDiscardGuardActions, useReportUnsaved
 export type { DiscardGuardProps, DiscardGuardController, DiscardGuardActions } from './DiscardGuard';
 export { Summary } from './Summary';
 export type { SummaryProps, SummaryLineItem, SummaryItemDetail, SummaryServiceFee, SummaryTotalRow, SummaryPostTotalRow, SummaryPrimaryAction, SummaryLabels, } from './Summary';
+export { StepProgress } from './StepProgress';
+export type { StepProgressProps, StepProgressStep, StepProgressLabels } from './StepProgress';
 export { WizardShell } from './WizardShell';
 export type { WizardShellProps, WizardStep, WizardStepState, WizardShellPrimaryAction, WizardShellSecondaryAction, WizardShellTotalRow, WizardShellTotalBadge, WizardShellLabels, } from './WizardShell';
 export type { TenderError, DestinationLine, DestinationStatus, RecordTone } from './shared';
@@ -133,7 +135,7 @@ export type { RefundProgressListProps, RefundProgressListLabels, RefundProgressP
 export { PinField } from './PinField';
 export type { PinFieldProps, PinFieldLabels } from './PinField';
 export { OutcomeView } from './OutcomeView';
-export type { OutcomeViewProps, OutcomeViewLabels, ReceiptChannel } from './OutcomeView';
+export type { OutcomeViewProps, OutcomeViewLabels, ReceiptChannel, OutcomeViewKind, OutcomePaidWithLine, OutcomeGroup, OutcomeReceiptAction, OutcomeEmailReceipt, OutcomeChangeDue, } from './OutcomeView';
 export { FilterSelect, FilterSelectGroup } from './FilterSelect';
 export type { FilterSelectProps, FilterSelectOption, FilterSelectGroupProps } from './FilterSelect';
 export { LoadMoreFooter } from './LoadMoreFooter';

package/dist/tailwind/index.cjs

@@ -277,6 +277,14 @@ var posSurfaceTokens = {
   hair: "#F0F0F1",
   page: "#FBFBFB",
   field: "#E5E5E5",
+  /** A hairline under the pointer (`default-300`). */
+  "line-strong": "#D4D4D8",
+  /** `--ink`: body text (`default-900`). */
+  ink: "#18181B",
+  /** `--muted`: secondary text and eyebrows, 4.83:1 on white (`default-500`). */
+  muted: "#71717A",
+  /** Placeholder text (`default-400`). Never for content: 2.56:1 on white. */
+  faint: "#A1A1AA",
   /** `--okb` / `--okf` */
   "ok-fill": "#EAF3DE",
   ok: "#3B6D11",

package/dist/tailwind/index.mjs

@@ -238,6 +238,14 @@ var posSurfaceTokens = {
   hair: "#F0F0F1",
   page: "#FBFBFB",
   field: "#E5E5E5",
+  /** A hairline under the pointer (`default-300`). */
+  "line-strong": "#D4D4D8",
+  /** `--ink`: body text (`default-900`). */
+  ink: "#18181B",
+  /** `--muted`: secondary text and eyebrows, 4.83:1 on white (`default-500`). */
+  muted: "#71717A",
+  /** Placeholder text (`default-400`). Never for content: 2.56:1 on white. */
+  faint: "#A1A1AA",
   /** `--okb` / `--okf` */
   "ok-fill": "#EAF3DE",
   ok: "#3B6D11",

package/dist/test/px-class-names.d.ts

@@ -0,0 +1 @@
+export declare const pxClasses: (root: Element) => string[];

package/dist/test/px-classes.d.ts

@@ -1,2 +1,3 @@
-export declare const pxClasses: (root: Element) => string[];
+import { pxClasses } from './px-class-names';
+export { pxClasses };
 export declare const expectNoPxClasses: (root: Element) => void;

package/dist/tokens/pos-surface.d.ts

@@ -4,10 +4,14 @@
  * The refund wizard is a pixel-signed-off surface: every fill, hairline and
  * status tone in it comes from the Jul-28 POS mockup, and "close enough from
  * the nearest scale step" is not the contract. Most of that mockup already
- * agrees with what we ship — its `--tc` is `primary-500` to the byte and its
- * `--ink`/`--muted`/`--muted2`/`--sec` are HeroUI's `default-900`/`500`/`600`/
- * `100`. Those are consumed through the semantic classes and are deliberately
- * NOT repeated here.
+ * agrees with what we ship — its `--tc` is `primary-500` to the byte, so the
+ * brand is consumed as `primary` and is deliberately NOT repeated here.
+ *
+ * Its text tones (`--ink`, `--muted`, the placeholder and hover greys) equal
+ * HeroUI's stock `default-900`/`500`/`400`/`300`, but they are kept below as
+ * DS tokens: POS and Quick surfaces style text with `pos-*`, never with the
+ * stock HeroUI semantic scale (decision of 2026-10-21). `--muted2`/`--sec`
+ * were already here as `neutral` / `neutral-fill`.
  *
  * What IS here is the remainder: the two hairlines and the warm status
  * fill/text pairs, none of which have an equivalent in either scale. They are
@@ -28,6 +32,14 @@ export declare const posSurfaceTokens: {
     readonly hair: "#F0F0F1";
     readonly page: "#FBFBFB";
     readonly field: "#E5E5E5";
+    /** A hairline under the pointer (`default-300`). */
+    readonly 'line-strong': "#D4D4D8";
+    /** `--ink`: body text (`default-900`). */
+    readonly ink: "#18181B";
+    /** `--muted`: secondary text and eyebrows, 4.83:1 on white (`default-500`). */
+    readonly muted: "#71717A";
+    /** Placeholder text (`default-400`). Never for content: 2.56:1 on white. */
+    readonly faint: "#A1A1AA";
     /** `--okb` / `--okf` */
     readonly 'ok-fill': "#EAF3DE";
     readonly ok: "#3B6D11";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "2.22.0",
+    "version": "2.23.0",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",