@veevarts/design-system 1.14.0 → 1.15.0-beta.1

package/dist/patterns/Stepper/Stepper.d.ts

@@ -16,6 +16,46 @@ export interface StepperProps extends React.HTMLAttributes<HTMLElement> {
      * ```
      */
     label?: string;
+    /**
+     * Labels rendered inside the active step when using the `activeLabel` variant.
+     * The array index matches the zero-based step index.
+         *
+     * @example
+     * ```tsx
+     * <Stepper
+     *   variant="activeLabel"
+     *   stepLabels={['Details', 'Recurrences', 'Attendance']}
+     *   stepsCount={3}
+     * />
+     * ```
+     */
+    stepLabels?: string[];
+    /**
+     * Whether to render a step counter like "Step 1 of 6".
+     *
+     * @default false
+     */
+    showStepCounter?: boolean;
+    /**
+     * Position of the optional step counter relative to the step list.
+     *
+     * @default "right"
+     */
+    stepCounterPosition?: 'left' | 'right';
+    /**
+     * Layout distribution for the stepper and optional step counter.
+     *
+     * - `compact`: content stays grouped together
+     * - `spread`: content stretches to opposite sides of the available width
+     *
+     * @default "compact"
+     */
+    layout?: 'compact' | 'spread';
+    /**
+     * Optional formatter for the step counter text.
+     * Receives one-based current step number and total step count.
+     */
+    stepCounterFormat?: (currentStepNumber: number, totalSteps: number) => string;
     /**
      * Total number of steps in the sequence.
      *
@@ -40,6 +80,15 @@ export interface StepperProps extends React.HTMLAttributes<HTMLElement> {
      * ```
      */
     color?: ButtonProps['color'];
+    /**
+     * Visual presentation of the stepper.
+     *
+     * - `default`: current behavior with checkmarks on completed steps
+     * - `activeLabel`: active step expands into a pill with number + label
+     *
+     * @default "default"
+     */
+    variant?: 'default' | 'activeLabel';
     /**
      * The current active step index (zero-based).
      * Use this prop for controlled mode.

package/dist/patterns/Summary/components/ActionBar.d.ts

@@ -10,6 +10,8 @@ export interface ActionBarProps {
     isLoading: boolean;
     cart?: SummaryProps['cart'];
     cartAriaLabel: string;
+    /** Optional caption rendered under the open-layer CTA (e.g. installment breakdown). */
+    ctaCaption?: React.ReactNode;
     /** Expand the summary — the closed-bar cart button opens it on click. */
     onToggleOpen?: () => void;
     classNames: SummaryClassNames;

package/dist/patterns/Summary/components/ItemRow.d.ts

@@ -5,5 +5,7 @@ export interface ItemRowProps {
     locale: string;
     onRemove?: (id: string) => void;
     removeAriaLabel: string;
+    /** Show the per-item remove control. Defaults to `true`. */
+    showRemoveButton?: boolean;
 }
 export declare const ItemRow: React.FC<ItemRowProps>;

package/dist/patterns/Summary/components/SecondaryTotalRow.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { Money } from '../types';
+export interface SecondaryTotalRowProps {
+    secondaryTotal: {
+        label: React.ReactNode;
+        amount: Money;
+    };
+    locale: string;
+    className?: string;
+}
+export declare const SecondaryTotalRow: React.FC<SecondaryTotalRowProps>;

package/dist/patterns/Summary/components/SummaryBody.d.ts

@@ -9,6 +9,8 @@ export interface SummaryBodyProps {
     locale: string;
     onRemoveItem?: (id: string) => void;
     removeAriaLabel: string;
+    /** Show the per-item remove control. Defaults to `true`. */
+    showRemoveButton?: boolean;
     emptyState?: React.ReactNode;
     classNames: SummaryClassNames;
 }

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

@@ -4,4 +4,4 @@
  * Total + CTA, and a compact mobile bottom-bar.
  */
 export { Summary } from './Summary';
-export type { SummaryProps, SummaryLineItem, SummaryServiceFee, SummaryTotalRow, SummaryPrimaryAction, SummaryLabels, Money, } from './types';
+export type { SummaryProps, SummaryLineItem, SummaryItemDetail, SummaryServiceFee, SummaryTotalRow, SummaryPrimaryAction, SummaryLabels, Money, } from './types';

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

@@ -1,6 +1,28 @@
 import { ReactNode } from 'react';
 import { Money } from '../../utils/money';
 export type { Money } from '../../utils/money';
+/**
+ * A generic, parametrizable detail row rendered under a line item — an icon +
+ * label, an optional right-aligned value, and an optional info tooltip. It is
+ * intentionally agnostic: the host composes whatever the design needs (e.g. an
+ * auto-renewal note, a "pay by installments" line, a fulfilment hint) without
+ * the Summary pattern knowing those domains. The existing `dateLabel` /
+ * `dateRange` slots stay as dedicated rows; this covers everything else.
+ */
+export interface SummaryItemDetail {
+    /** Stable key for `data-testid` (falls back to the row index). */
+    key?: string;
+    /** Leading icon node (e.g. `lucide:refresh-cw`, `lucide:scissors`). */
+    icon?: ReactNode;
+    /** Left label (rendered muted, like the date rows). */
+    label: ReactNode;
+    /** Optional right-aligned value (e.g. "$4.23 / month"). */
+    value?: ReactNode;
+    /** Tone of the value: `'primary'` paints it in the primary color; default inherits the muted label tone. */
+    valueTone?: 'default' | 'primary';
+    /** When set, an info icon next to the value reveals this content in a tooltip. */
+    tooltip?: ReactNode;
+}
 /**
  * A single, flexible line item. The four Figma "types" (Ticket, Event,
  * Membership, Donation) are compositions of this one shape — not rigid
@@ -28,6 +50,12 @@ export interface SummaryLineItem {
     };
     /** Nested rows, indented (Event's Adult / Children). */
     children?: SummaryLineItem[];
+    /**
+     * Extra detail rows rendered under the item (after any date row). Generic
+     * and agnostic — see {@link SummaryItemDetail}. Used e.g. by membership to
+     * show an auto-renewal note and a pay-by-installments line.
+     */
+    details?: SummaryItemDetail[];
 }
 /** The "Pay Service fee" radio-toggle row. */
 export interface SummaryServiceFee {
@@ -86,8 +114,12 @@ export interface SummaryClassNames {
     totalsRows?: string;
     /** The Total row. */
     total?: string;
+    /** The secondary (primary-colored) total row under the Total. */
+    secondaryTotal?: string;
     /** Primary CTA button. */
     cta?: string;
+    /** The caption rendered under the CTA. */
+    ctaCaption?: string;
     /** Mobile compact bottom-bar. */
     mobileBar?: string;
     /** Mobile cart button. */
@@ -113,6 +145,26 @@ export interface SummaryProps {
         label?: ReactNode;
         amount: Money;
     };
+    /**
+     * An optional secondary total rendered right under the Total, in the primary
+     * color (e.g. "Due Today"). Purely presentational — the host supplies both
+     * the label and the already-computed amount.
+     */
+    secondaryTotal?: {
+        label: ReactNode;
+        amount: Money;
+    };
+    /**
+     * An optional caption rendered under the CTA, in muted text (e.g. an
+     * installment breakdown like "$50.75 total · 12 monthly installments…").
+     */
+    ctaCaption?: ReactNode;
+    /**
+     * Whether the per-item remove (trash) control is shown. Defaults to `true`;
+     * pass `false` to hide it even when `onRemoveItem` is wired. Independent of
+     * `onRemoveItem` so a host can keep the handler but suppress the control.
+     */
+    showRemoveButton?: boolean;
     /**
      * Whether the summary can collapse — the header shows a `×` and the whole
      * header toggles Open/Closed. Defaults to `variant === 'mobile'` (including

package/dist/patterns/index.d.ts

@@ -66,4 +66,4 @@ export type { PaymentSubAmountInputProps } from './PaymentSubAmountInput';
 export { ConfirmDialog } from './ConfirmDialog';
 export type { ConfirmDialogProps } from './ConfirmDialog';
 export { Summary } from './Summary';
-export type { SummaryProps, SummaryLineItem, SummaryServiceFee, SummaryTotalRow, SummaryPrimaryAction, SummaryLabels, } from './Summary';
+export type { SummaryProps, SummaryLineItem, SummaryItemDetail, SummaryServiceFee, SummaryTotalRow, SummaryPrimaryAction, SummaryLabels, } from './Summary';

package/package.json

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