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

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

@@ -11,7 +11,7 @@ export declare const DEFAULT_SEARCH_WIDTH: Record<AdminToolbarSearchWidth, strin
 export declare const FRAMED_WIDE_REM = 48;
 export declare const FRAMED_CLASS: {
     readonly base: "flex flex-wrap items-center gap-2.5 border-b border-pos-hair px-4 py-[0.875rem]";
-    readonly narrow: "[&_[data-slot=filter-select]]:!max-w-none [&_[data-slot=filter-select]]:!min-w-[calc(50%-0.3125rem)] [&_[data-slot=filter-select]]:grow [&_[data-slot=filter-select]]:basis-[calc(50%-0.3125rem)]";
+    readonly narrow: "[&_[data-slot=filter-select-group]]:flex [&_[data-slot=filter-select-group]]:flex-wrap [&_[data-slot=filter-select-group]]:!max-w-none [&_[data-slot=filter-select]]:!max-w-none [&_[data-slot=filter-select]]:!min-w-[calc(50%-0.3125rem)] [&_[data-slot=filter-select]]:grow [&_[data-slot=filter-select]]:basis-[calc(50%-0.3125rem)]";
     readonly searchWide: "ml-auto";
     /** Fill wins over the narrow rule: it already takes the row, and keeps a trailing action beside it until 12.5rem. */
     readonly searchFill: "min-w-[12.5rem] flex-1";

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

@@ -29,6 +29,10 @@ export interface CashTenderLabels {
      * `{due}` is replaced with the formatted due amount.
      */
     insufficientMessageTemplate?: string;
+    exactAmountLabel?: string;
+    exactAmountAriaTemplate?: string;
+    quickAmountsLabel?: string;
+    quickAmountAriaTemplate?: string;
 }
 export interface CashTenderFormProps {
     /**
@@ -70,6 +74,8 @@ export interface CashTenderFormProps {
      * the guard is value-based. Omit for no cap.
      */
     maxAmount?: number;
+    quickAmounts?: readonly number[];
+    showExactAmount?: boolean;
     /**
      * Auto-focus the Cash Received field when this component mounts.
      * Pair with `key={...}` from the host to re-trigger focus on every

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

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

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

@@ -1,2 +1,3 @@
 export { FilterSelect } from './FilterSelect';
-export type { FilterSelectProps, FilterSelectOption } from './types';
+export { FilterSelectGroup } from './FilterSelectGroup';
+export type { FilterSelectProps, FilterSelectOption, FilterSelectGroupProps } from './types';

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

@@ -12,4 +12,6 @@ export declare const filterSelectClass: {
     readonly iconActive: "!text-primary-600";
     readonly clear: "absolute right-[1.875rem] top-1/2 z-20 inline-flex size-[1.25rem] -translate-y-1/2 items-center justify-center rounded-md text-primary-600 outline-none hover:bg-white/70 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary";
     readonly clearIcon: "size-[0.8125rem]";
+    readonly optionTitle: "whitespace-normal break-words";
 };
+export declare const filterSelectGroupClass = "grid shrink grow basis-0 grid-flow-col auto-cols-auto gap-2.5 [--filter-select-cap:16rem] max-w-[calc(var(--filter-select-count)*var(--filter-select-cap)+(var(--filter-select-count)-1)*0.625rem)] [&>[data-slot=filter-select]]:max-w-none";

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 export interface FilterSelectOption {
     value: string;
     label: string;
@@ -11,3 +12,8 @@ export interface FilterSelectProps {
     minWidth?: number;
     'data-testid'?: string;
 }
+export interface FilterSelectGroupProps {
+    children: ReactNode;
+    className?: string;
+    'data-testid'?: string;
+}

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

@@ -9,6 +9,8 @@ export interface MetaCardRowProps {
     label: string;
     /** Associates the caption with the control it labels. */
     htmlFor?: string;
+    /** Marks the caption with a red asterisk; pair it with the control's own required state. */
+    required?: boolean;
     children: ReactNode;
     className?: string;
     'data-testid'?: string;

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

@@ -11,6 +11,7 @@ export interface ReasonSelectProps {
     value: string | null;
     onChange: (id: string) => void;
     error?: string;
+    isRequired?: boolean;
     labels?: ReasonSelectLabels;
     className?: string;
     'data-testid'?: string;

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

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

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