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

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

@@ -0,0 +1,2 @@
+export { RefundMethodCards } from './RefundMethodCards';
+export type { RefundMethodCardsProps, RefundMethodCardsLabels, RefundMethodCardsError, RefundMethodView, RefundMethodKind, RefundMethodStatus, RefundMethodOption, RefundMethodAnotherMethod, RefundMethodPaidWith, } from './types';

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

@@ -0,0 +1,59 @@
+import { CSSProperties } from 'react';
+import { RefundMethodKind } from './types';
+export declare const PRIMARY = "hsl(var(--heroui-primary))";
+export declare const refundMethodKindIcon: Record<RefundMethodKind, string>;
+export declare const refundMethodCardsClass: {
+    readonly root: "flex flex-col text-default-900";
+    readonly banner: "mb-[18px]";
+    readonly eyebrowRow: "mb-3 flex min-h-6 items-center justify-between gap-3";
+    readonly eyebrow: "text-[11px] font-semibold uppercase tracking-[.08em] text-default-500";
+    readonly grid: "grid grid-cols-3 gap-2.5";
+    readonly card: "relative flex min-h-[132px] flex-col rounded-[14px] border-[1.5px] bg-white transition-colors";
+    readonly focusRing: "outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";
+    readonly toggle: "flex w-full items-center gap-[11px] rounded-[12px] px-[15px] pt-[13px] text-left disabled:cursor-not-allowed";
+    readonly toggleUnselected: "flex-1 flex-col items-stretch gap-3 pb-[13px]";
+    readonly toggleHeader: "flex w-full items-center gap-[11px]";
+    readonly toggleRemovable: "pr-12";
+    readonly iconBox: "flex h-[38px] w-[38px] shrink-0 items-center justify-center rounded-[10px]";
+    readonly text: "min-w-0 flex-1";
+    readonly label: "block truncate text-[15px] font-semibold leading-5";
+    readonly subtitle: "block truncate text-xs text-default-500";
+    readonly status: "block truncate text-xs font-semibold";
+    readonly lowerSlot: "mt-auto flex h-11 w-full items-center rounded-[10px] px-3 text-[13px] font-medium tabular-nums";
+    readonly amountSlot: "mt-auto px-[15px] pb-[13px] pt-3";
+    readonly amountWrapper: "h-11 min-h-11 rounded-[10px] bg-white shadow-none";
+    readonly amountInput: "text-[15px] font-semibold tabular-nums";
+    readonly remove: "absolute right-1 top-1 flex h-11 w-11 items-center justify-center rounded-[10px] text-default-500 hover:text-default-900 disabled:cursor-not-allowed";
+    readonly badge: "inline-flex h-[22px] shrink-0 items-center whitespace-nowrap rounded-full px-[9px] text-xs font-medium leading-none";
+    readonly another: "flex min-h-[132px] w-full flex-col items-start justify-center gap-3 rounded-[14px] border-[1.5px] border-dashed bg-white px-[15px] py-[13px] text-left transition-colors disabled:cursor-not-allowed";
+    readonly anotherOpen: "aria-expanded:scale-100";
+    readonly menuItem: "py-2";
+};
+type CardTone = 'idle' | 'selected' | 'declined';
+export declare const refundMethodCardStyle: Record<CardTone, CSSProperties>;
+export declare const refundMethodIconStyle: {
+    readonly idle: {
+        readonly backgroundColor: "hsl(var(--heroui-default-100))";
+        readonly color: "hsl(var(--heroui-default-600))";
+    };
+    readonly selected: {
+        readonly backgroundColor: "hsl(var(--heroui-primary))";
+        readonly color: "#fff";
+    };
+};
+export declare const refundMethodLowerSlotStyle: CSSProperties;
+export declare const refundMethodAnotherStyle: CSSProperties;
+export declare const refundMethodStatusStyle: {
+    readonly declined: {
+        readonly color: "#B62214";
+    };
+    readonly pending: {
+        readonly color: "#854F0B";
+        readonly backgroundColor: "#FAEEDA";
+    };
+    readonly done: {
+        readonly color: "#3B6D11";
+        readonly backgroundColor: "#EAF3DE";
+    };
+};
+export {};

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

@@ -0,0 +1,72 @@
+import { CurrencyCode, Money } from '../../utils/money';
+export type RefundMethodKind = 'card' | 'cash' | 'check' | 'store_credit' | 'reader' | 'other';
+export type RefundMethodStatus = 'idle' | 'declined' | 'pending' | 'done';
+export interface RefundMethodView {
+    id: string;
+    kind: RefundMethodKind;
+    label: string;
+    subtitle?: string;
+    /** Most this method can take back; shown as "Up to …" and enforced on the amount input. */
+    cap?: Money;
+    selected: boolean;
+    /** The text the cashier typed, owned by the host. */
+    amount?: string;
+    status?: RefundMethodStatus;
+    statusLabel?: string;
+    removable?: boolean;
+}
+export interface RefundMethodOption {
+    id: string;
+    kind: RefundMethodKind;
+    label: string;
+    description: string;
+}
+export interface RefundMethodAnotherMethod {
+    label: string;
+    subtitle: string;
+    options: RefundMethodOption[];
+    onPick: (optionId: string) => void;
+}
+export interface RefundMethodPaidWith {
+    label: string;
+    value: string;
+}
+export interface RefundMethodCardsError {
+    tone: 'danger' | 'warning';
+    title?: string;
+    body: string;
+    onRetry?: () => void;
+    onChooseDifferent: () => void;
+}
+export interface RefundMethodCardsLabels {
+    heading?: string;
+    /** `{amount}` is replaced with the formatted cap. */
+    upTo?: string;
+    /** Shown in the lower slot of an unselected method that has no cap. */
+    noCap?: string;
+    /** Accessible name of the amount input; `{method}` is replaced with the method label. */
+    amountFor?: string;
+    /** Accessible name of the remove button; `{method}` is replaced with the method label. */
+    remove?: string;
+    declined?: string;
+    pending?: string;
+    done?: string;
+    retry?: string;
+    chooseDifferent?: string;
+}
+export interface RefundMethodCardsProps {
+    methods: RefundMethodView[];
+    onToggle: (id: string) => void;
+    onAmountChange: (id: string, draft: string) => void;
+    onAmountBlur?: (id: string) => void;
+    onRemove?: (id: string) => void;
+    /** Currency of the typed amounts when a method has no cap. Default `'USD'`. */
+    currency?: CurrencyCode;
+    paidWith?: RefundMethodPaidWith;
+    anotherMethod?: RefundMethodAnotherMethod;
+    error?: RefundMethodCardsError;
+    busy?: boolean;
+    labels?: RefundMethodCardsLabels;
+    className?: string;
+    'data-testid'?: string;
+}

package/dist/patterns/RefundProgressList/RefundProgressList.d.ts

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

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

@@ -0,0 +1,2 @@
+export { RefundProgressList } from './RefundProgressList';
+export type { RefundProgressListProps, RefundProgressListLabels, RefundProgressPart, RefundProgressStatus, RefundProgressAction, } from './types';

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

@@ -0,0 +1,44 @@
+import { CSSProperties } from 'react';
+import { RefundProgressStatus } from './types';
+export declare const refundProgressListClass: {
+    readonly root: "flex flex-col text-default-900";
+    readonly eyebrow: "mb-3 text-[11px] font-semibold uppercase tracking-[.08em] text-default-500";
+    readonly list: "flex flex-col gap-2.5";
+    readonly row: "flex flex-col gap-3 rounded-[14px] border-[1.5px] px-[15px] py-[13px] transition-colors";
+    readonly main: "flex items-center gap-[11px]";
+    readonly iconBox: "flex h-[38px] w-[38px] shrink-0 items-center justify-center rounded-[10px]";
+    readonly text: "min-w-0 flex-1";
+    readonly label: "block truncate text-[15px] font-semibold leading-5";
+    readonly note: "block truncate text-xs text-default-500";
+    readonly amount: "shrink-0 text-[15px] font-semibold tabular-nums";
+    readonly badge: "inline-flex h-[22px] shrink-0 items-center gap-[5px] whitespace-nowrap rounded-full px-[9px] text-xs font-medium leading-none";
+    readonly prompt: "flex flex-wrap items-center gap-3 rounded-[10px] px-3 py-2";
+    readonly promptText: "min-w-0 flex-1 text-[13px] font-medium";
+    readonly action: "h-11 min-w-0 rounded-[12px] px-4 text-[14px] font-semibold";
+};
+export declare const refundProgressRowStyle: {
+    readonly idle: {
+        readonly borderColor: "#E7E7E9";
+        readonly backgroundColor: "#fff";
+    };
+    readonly active: {
+        readonly borderColor: "hsl(var(--heroui-primary))";
+        readonly backgroundColor: "hsl(var(--heroui-primary) / 0.05)";
+    };
+    readonly failed: {
+        readonly borderColor: "#B62214";
+        readonly backgroundColor: "#FCEBEB";
+    };
+};
+export declare const refundProgressIconStyle: {
+    readonly idle: {
+        readonly backgroundColor: "hsl(var(--heroui-default-100))";
+        readonly color: "hsl(var(--heroui-default-600))";
+    };
+    readonly active: {
+        readonly backgroundColor: "hsl(var(--heroui-primary))";
+        readonly color: "#fff";
+    };
+};
+export declare const refundProgressPromptStyle: CSSProperties;
+export declare const refundProgressStatusStyle: Record<RefundProgressStatus, CSSProperties>;

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

@@ -0,0 +1,37 @@
+import { Money } from '../../utils/money';
+import { RefundMethodKind } from '../RefundMethodCards/types';
+export type RefundProgressStatus = 'queued' | 'processing' | 'waiting_reader' | 'waiting_cash' | 'done' | 'failed';
+export interface RefundProgressAction {
+    label: string;
+    onPress: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+}
+export interface RefundProgressPart {
+    id: string;
+    kind: RefundMethodKind;
+    label: string;
+    amount: Money;
+    status: RefundProgressStatus;
+    note?: string;
+    /** Instruction for the cashier under the row, e.g. "Give $30.00 from the drawer". */
+    prompt?: string;
+    action?: RefundProgressAction;
+}
+export interface RefundProgressListLabels {
+    heading?: string;
+    queued?: string;
+    processing?: string;
+    waitingReader?: string;
+    waitingCash?: string;
+    done?: string;
+    failed?: string;
+}
+export interface RefundProgressListProps {
+    parts: RefundProgressPart[];
+    /** Highlighted row. Defaults to the first part that is processing or waiting. */
+    activeId?: string;
+    labels?: RefundProgressListLabels;
+    className?: string;
+    'data-testid'?: string;
+}

package/dist/patterns/RelatedRecordList/RelatedRecordList.d.ts

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

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

@@ -0,0 +1,2 @@
+export { RelatedRecordList } from './RelatedRecordList';
+export type { RelatedRecordListProps, RelatedRecordRow } from './types';

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

@@ -0,0 +1,19 @@
+export declare const relatedRecordListClass: {
+    readonly base: "overflow-hidden rounded-2xl border border-pos-line bg-white shadow-[0_1px_4px_rgba(0,0,0,.06),0_4px_12px_rgba(0,0,0,.06)]";
+    readonly header: "flex flex-wrap items-center gap-2 px-5 pt-4";
+    readonly title: "m-0 min-w-0 text-[0.90625rem] font-semibold text-default-900 [overflow-wrap:anywhere]";
+    readonly count: "rounded-full bg-default-100 px-2 py-px text-[0.75rem] font-semibold text-default-600";
+    readonly list: "m-0 list-none p-0";
+    readonly item: "border-t border-pos-hair";
+    readonly itemFirstHeadless: "border-t-0";
+    readonly row: "flex w-full items-center gap-2.5 px-5 py-3 text-left";
+    readonly rowInteractive: "cursor-pointer outline-none transition-colors hover:bg-default-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+    readonly rowBody: "flex min-w-0 flex-1 flex-col";
+    readonly rowHead: "flex min-w-0 flex-wrap items-center gap-2";
+    readonly primaryLinked: "min-w-0 text-[0.875rem] font-normal text-primary [overflow-wrap:anywhere]";
+    readonly primaryPlain: "min-w-0 text-[0.875rem] font-normal text-default-900 [overflow-wrap:anywhere]";
+    readonly secondary: "mt-[0.1875rem] block min-w-0 truncate text-[0.8125rem] text-default-500";
+    readonly amount: "max-w-[45%] shrink-0 text-right text-[0.875rem] font-semibold tabular-nums text-default-900 [overflow-wrap:anywhere]";
+    readonly empty: "min-w-0 px-5 pb-5 pt-[0.875rem] text-[0.875rem] text-default-500 [overflow-wrap:anywhere]";
+    readonly emptyHeadless: "pt-5";
+};

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

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export interface RelatedRecordRow {
+    id: string;
+    primary: ReactNode;
+    chip?: ReactNode;
+    secondary?: ReactNode;
+    amount?: ReactNode;
+    amountTone?: 'positive' | 'negative' | 'neutral';
+    onSelect?: () => void;
+}
+export interface RelatedRecordListProps {
+    title?: ReactNode;
+    count?: number;
+    rows: RelatedRecordRow[];
+    emptyContent: ReactNode;
+    'data-testid'?: string;
+}

package/dist/patterns/ScrollToLatest/ScrollToLatest.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from 'react';
+import { ScrollToLatestProps } from './types';
+/**
+ * A scroll box that stays on its newest content, like a chat transcript. It
+ * follows the bottom until the person scrolls up, then offers a "Jump to
+ * newest" button; reaching the bottom again, by scrolling or the button,
+ * resumes following. Built on HeroUI's `ScrollShadow`.
+ *
+ * Only scrolling UP stops the following, so the box's own scrolling (and the
+ * browser clamping after content shrinks) never does. Being at the bottom
+ * resumes it, however the box got there: a scroll, or content that now fits
+ * without the box moving (which fires no scroll event).
+ */
+export declare function ScrollToLatest({ children, label, followKey, jumpLabel, onFollowChange, threshold, className, classNames, 'data-testid': dataTestId, }: ScrollToLatestProps): JSX.Element;
+export declare namespace ScrollToLatest {
+    var displayName: string;
+}
+export default ScrollToLatest;

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

@@ -0,0 +1,2 @@
+export { ScrollToLatest } from './ScrollToLatest';
+export type { ScrollToLatestClassNames, ScrollToLatestProps } from './types';

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

@@ -0,0 +1,11 @@
+/**
+ * Every slot class of `ScrollToLatest`. The box takes its height from its
+ * parent (`h-full` / `flex-1`), so give the parent one.
+ */
+export declare const scrollToLatestClass: {
+    readonly base: "relative flex min-h-0 w-full flex-col";
+    readonly scroller: "min-h-0 flex-1 overflow-y-auto overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ai-focus";
+    readonly content: "min-w-0";
+    readonly jumpBar: "pointer-events-none absolute inset-x-0 bottom-3 flex justify-center";
+    readonly jump: "pointer-events-auto border border-divider bg-content1 text-foreground shadow-medium";
+};

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

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+/** Extra classes per slot, merged after the pattern's own. */
+export interface ScrollToLatestClassNames {
+    /** The root. */
+    base?: string;
+    /** The scrolling region (HeroUI `ScrollShadow`). */
+    scroller?: string;
+    /** The wrapper around `children` that the box watches for growth. */
+    content?: string;
+    /** The "Jump to newest" button. */
+    jump?: string;
+}
+export interface ScrollToLatestProps {
+    /** The transcript, usually one `AssistantMessage` per turn. */
+    children: ReactNode;
+    /** Accessible name of the scrolling region, e.g. "Conversation". */
+    label: string;
+    /**
+     * Change it when new content arrives (a message count, the last id). While
+     * the person is following the bottom, the box scrolls to it. Growth inside
+     * the content (a group expanding) is followed without it.
+     */
+    followKey?: unknown;
+    /** Text of the button that returns to the bottom. Defaults to "Jump to newest". */
+    jumpLabel?: string;
+    /** Called when the person stops or starts following the bottom. */
+    onFollowChange?: (isFollowing: boolean) => void;
+    /** How close to the bottom, in px, still counts as "at the bottom". Defaults to 32. */
+    threshold?: number;
+    /** Classes on the root. Give it a height here or on its parent. */
+    className?: string;
+    /** Classes per slot. */
+    classNames?: ScrollToLatestClassNames;
+    /** Test id of the root; its parts add suffixes (see Test ids in the docs). Defaults to `scroll-to-latest`. */
+    'data-testid'?: string;
+}

package/dist/patterns/SessionExpiredCard/SessionExpiredCard.d.ts

@@ -0,0 +1,14 @@
+import { JSX } from 'react';
+import { SessionExpiredCardProps } from './type';
+/**
+ * What a Salesforce Canvas widget shows once its session is gone. There is no
+ * reload button: the Canvas frame is loaded by a POST, so the reload has to
+ * come from the Salesforce tab, not from inside the frame.
+ * The card is `role="alert"` so the change is announced, and `min-h-52` (208px)
+ * keeps it tall enough to be the first height the Salesforce wrapper reveals
+ * (its threshold is 200px). Copy comes in as props; the caller owns i18n.
+ */
+export declare function SessionExpiredCard({ testId, title, description }: Readonly<SessionExpiredCardProps>): JSX.Element;
+export declare namespace SessionExpiredCard {
+    var displayName: string;
+}

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

@@ -0,0 +1,2 @@
+export { SessionExpiredCard } from './SessionExpiredCard';
+export type * from './type';

package/dist/patterns/SessionExpiredCard/type.d.ts

@@ -0,0 +1,6 @@
+export type SessionExpiredCardProps = {
+    /** Stable selector for the state this card stands in for (`…-state`). */
+    testId: string;
+    title: string;
+    description: 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>;