@veevarts/design-system 2.1.0-beta.16 → 2.1.0-beta.17

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

@@ -63,6 +63,15 @@ export interface SummaryLineItem {
     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 {
@@ -81,6 +90,8 @@ export interface SummaryTotalRow {
     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}; rows with

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/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';

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

@@ -28,10 +28,16 @@ export interface WizardShellSecondaryAction {
  * the return covers less than the order, `owes` reads "Customer owes" when the
  * balance runs the other way.
  */
+export interface WizardShellTotalBadge {
+    label: string;
+    tone: 'warn' | 'neutral' | 'ok';
+}
 export interface WizardShellTotalRow {
     label: string;
     amount?: Money;
-    badge?: 'partial' | 'owes';
+    /** Renders the amount as a counter against this total: "Assigned $40.00 of $46.00". */
+    of?: Money;
+    badge?: 'partial' | 'owes' | WizardShellTotalBadge;
 }
 export interface WizardShellLabels {
     back?: string;
@@ -40,6 +46,8 @@ export interface WizardShellLabels {
     cancel?: string;
     partialBadge?: string;
     owesBadge?: string;
+    /** The word between `totalRow.amount` and `totalRow.of`. */
+    ofSeparator?: string;
 }
 export interface WizardShellProps {
     onClose?: () => void;

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,8 +107,10 @@ 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, WizardShellLabels, } from './WizardShell';
+export type { WizardShellProps, WizardStep, WizardStepState, WizardShellPrimaryAction, WizardShellSecondaryAction, WizardShellTotalRow, WizardShellTotalBadge, WizardShellLabels, } from './WizardShell';
 export type { TenderError, DestinationLine, DestinationStatus, RecordTone } from './shared';
 export { LineItemList } from './LineItemList';
 export type { LineItemListProps, LineItemView, ItemSelection, LineItemState, LineItemRestockView, ItemDisposition, AmountOnlyView, LineItemListLabels, } from './LineItemList';
@@ -126,12 +128,16 @@ export { TenderMethods } from './TenderMethods';
 export type { TenderMethodsProps, TenderView, TenderKind, TenderMethodsLabels } from './TenderMethods';
 export { SplitTenderPanel } from './SplitTenderPanel';
 export type { SplitTenderPanelProps, SplitPartView, SplitMethodOption, SplitTenderPanelLabels, } from './SplitTenderPanel';
+export { RefundMethodCards } from './RefundMethodCards';
+export type { RefundMethodCardsProps, RefundMethodCardsLabels, RefundMethodCardsError, RefundMethodView, RefundMethodKind, RefundMethodStatus, RefundMethodOption, RefundMethodAnotherMethod, RefundMethodPaidWith, } from './RefundMethodCards';
+export { RefundProgressList } from './RefundProgressList';
+export type { RefundProgressListProps, RefundProgressListLabels, RefundProgressPart, RefundProgressStatus, RefundProgressAction, } from './RefundProgressList';
 export { PinField } from './PinField';
 export type { PinFieldProps, PinFieldLabels } from './PinField';
 export { OutcomeView } from './OutcomeView';
-export type { OutcomeViewProps, OutcomeViewLabels, ReceiptChannel } from './OutcomeView';
-export { FilterSelect } from './FilterSelect';
-export type { FilterSelectProps, FilterSelectOption } from './FilterSelect';
+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';
 export type { LoadMoreFooterProps, LoadMoreStatus } from './LoadMoreFooter';
 export { CardList } from './CardList';

package/dist/patterns/shared/usePrefillEdits.d.ts

@@ -0,0 +1,7 @@
+export interface PrefillEdits<T> {
+    isUntouched: () => boolean;
+    markEdited: (emitted: T) => void;
+    markUntouched: () => void;
+}
+export declare const usePrefillEdits: <T>(source: T, isSame?: (a: T, b: T) => boolean) => PrefillEdits<T>;
+export declare const useReplaceWhileUntouched: (isUntouched: () => boolean, replace: (text: string) => void) => import('react').RefObject<HTMLInputElement | null>;

package/dist/providers/HeroUIProvider.d.ts

@@ -1,6 +1,14 @@
 import { ReactNode } from 'react';
 interface HeroUIProviderProps {
     children: ReactNode;
+    /**
+     * App-wide accessible name for the corner close button of every DS `Modal` and `Drawer`, e.g. `"Fermer"`.
+     * HeroUI hard-codes `"Close"`, so a localized app sets this once instead of on each overlay.
+     *
+     * A `closeLabel` on a `Modal` / `Drawer` wins over it. A nested provider without one inherits the
+     * outer provider's. With none anywhere, HeroUI's own button is rendered untouched.
+     */
+    closeLabel?: string;
 }
-export declare function HeroUIProvider({ children }: HeroUIProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function HeroUIProvider({ children, closeLabel }: HeroUIProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/providers/close-label-context.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The app-wide default accessible name of an overlay's corner close button.
+ *
+ * HeroUI renders that button with the literal `aria-label="Close"`, so a French
+ * or Spanish screen announces English. `HeroUIProvider` carries a translated
+ * label here and the DS `Modal` / `Drawer` read it.
+ *
+ * A leaf file on purpose: `providers/` and `components/` never import each
+ * other. Both import this context, and neither imports the other's barrel.
+ * Split from `HeroUIProvider.tsx` so that file exports a component only (fast
+ * refresh), as `density.ts` does for the density context.
+ *
+ * `undefined` means "no app-wide label": the overlay keeps HeroUI's own button
+ * and its `"Close"` name untouched.
+ */
+export declare const CloseLabelContext: import('react').Context<string | undefined>;
+/** The label of the nearest `HeroUIProvider` that set `closeLabel`; `undefined` outside one. */
+export declare function useCloseLabel(): string | undefined;

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.1.0-beta.16",
+    "version": "2.1.0-beta.17",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",