@veevarts/design-system 2.20.0 → 2.21.0

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

@@ -108,7 +108,7 @@ export type { DiscardGuardProps, DiscardGuardController, DiscardGuardActions } f
 export { Summary } from './Summary';
 export type { SummaryProps, SummaryLineItem, SummaryItemDetail, SummaryServiceFee, SummaryTotalRow, SummaryPostTotalRow, SummaryPrimaryAction, SummaryLabels, } from './Summary';
 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,6 +126,10 @@ 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';

package/package.json

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