@veevarts/design-system 1.13.1 → 1.14.0-alpha.1

package/dist/patterns/InstallmentFundAssignment/utils.d.ts

@@ -1,5 +1,6 @@
 import { InstallmentFundAssignmentEntry, InstallmentFundAssignmentMode } from './types';
 export declare const createEmptyAssignment: () => InstallmentFundAssignmentEntry;
+export declare function isEmptyAssignmentDraft(assignment: InstallmentFundAssignmentEntry): boolean;
 export declare function getAssignmentsForModeChange({ nextMode, assignments, previousSingleAssignments, previousSplitAssignments, }: {
     nextMode: InstallmentFundAssignmentMode;
     assignments: InstallmentFundAssignmentEntry[];

package/dist/patterns/InstallmentSchedule/InstallmentSchedule.d.ts

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
 import { InstallmentScheduleProps } from './types';
-export declare function InstallmentSchedule({ mode, donationAmount, currency, locale, installments, automaticSettings, labels: customLabels, classNames, isSaving, isModeSwitchDisabled, onModeChange, onAutomaticSettingsChange, onInstallmentsChange, onSave, }: InstallmentScheduleProps): JSX.Element;
+export declare function InstallmentSchedule({ mode: controlledMode, donationAmount, currency, locale, installments, automaticSettings, defaultTab, showTitle, showCard, showSavePayment, showTabs, inputs, startDate, labels: customLabels, classNames, isSaving, isModeSwitchDisabled, onModeChange, onAutomaticSettingsChange, onInstallmentsChange, onSave, }: InstallmentScheduleProps): JSX.Element;

package/dist/patterns/InstallmentSchedule/InstallmentTable.d.ts

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
 import { InstallmentTableProps } from './types';
-export declare function InstallmentTable({ installments, currency, locale, labels: customLabels, isSaving, onEditInstallments, onPayInstallment, onDeleteInstallment, }: InstallmentTableProps): JSX.Element;
+export declare function InstallmentTable({ installments, currency, locale, showTitle, showCard, showEditPayment, labels: customLabels, isSaving, onEditInstallments, onPayInstallment, onDeleteInstallment, }: InstallmentTableProps): JSX.Element;

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

@@ -2,4 +2,4 @@ export { InstallmentSchedule } from './InstallmentSchedule';
 export { InstallmentScheduleSkeleton } from './InstallmentScheduleSkeleton';
 export { InstallmentTable } from './InstallmentTable';
 export { generateAutomaticInstallments } from './utils';
-export type { AutomaticScheduleSettings, InstallmentFrequency, InstallmentTableLabels, InstallmentTableProps, InstallmentScheduleClassNames, InstallmentScheduleLabels, InstallmentScheduleMode, InstallmentScheduleProps, ScheduledInstallment, } from './types';
+export type { AutomaticScheduleSettings, InstallmentFrequency, InstallmentScheduleInput, InstallmentTableLabels, InstallmentTableProps, InstallmentScheduleClassNames, InstallmentScheduleLabels, InstallmentScheduleMode, InstallmentScheduleProps, ScheduledInstallment, } from './types';

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 export type InstallmentScheduleMode = 'automatic' | 'manual';
-export type InstallmentFrequency = 'monthly' | 'quarterly' | 'annual';
+export type InstallmentFrequency = 'weekly' | 'monthly' | 'quarterly' | 'annual';
 export type ScheduledInstallment = {
     id: string;
     dueDate: string;
@@ -12,6 +12,7 @@ export type AutomaticScheduleSettings = {
     frequency: InstallmentFrequency;
     firstInstallmentDate: string;
 };
+export type InstallmentScheduleInput = keyof AutomaticScheduleSettings | 'dayOfMonth';
 export type InstallmentScheduleLabels = {
     title?: string;
     automaticMode?: string;
@@ -24,6 +25,7 @@ export type InstallmentScheduleLabels = {
     emptyManual?: string;
     numberOfInstallments?: string;
     frequency?: string;
+    dayOfMonth?: string;
     firstInstallmentDate?: string;
     installment?: string;
     dueDate?: string;
@@ -31,6 +33,7 @@ export type InstallmentScheduleLabels = {
     total?: string;
     remaining?: string;
     deleteInstallment?: string;
+    weekly?: string;
     monthly?: string;
     quarterly?: string;
     annual?: string;
@@ -48,23 +51,33 @@ export type InstallmentScheduleClassNames = {
     panel?: string;
     header?: string;
     tabs?: string;
+    controls?: string;
+    preview?: string;
+    summary?: string;
     content?: string;
 };
 export type InstallmentScheduleProps = {
-    mode: InstallmentScheduleMode;
+    mode?: InstallmentScheduleMode;
     donationAmount: number;
     currency?: string;
     locale?: string;
     installments: ScheduledInstallment[];
     automaticSettings: AutomaticScheduleSettings;
+    defaultTab?: InstallmentScheduleMode;
+    showTitle?: boolean;
+    showCard?: boolean;
+    showSavePayment?: boolean;
+    showTabs?: boolean;
+    inputs?: InstallmentScheduleInput[];
+    startDate?: string;
     labels?: InstallmentScheduleLabels;
     classNames?: InstallmentScheduleClassNames;
     isSaving?: boolean;
     isModeSwitchDisabled?: boolean;
-    onModeChange: (mode: InstallmentScheduleMode) => void;
+    onModeChange?: (mode: InstallmentScheduleMode) => void;
     onAutomaticSettingsChange: (settings: AutomaticScheduleSettings) => void;
     onInstallmentsChange: (installments: ScheduledInstallment[]) => void;
-    onSave: () => void;
+    onSave?: () => void;
 };
 export type InstallmentTableLabels = {
     title?: string;
@@ -92,6 +105,9 @@ export type InstallmentTableProps = {
     installments: ScheduledInstallment[];
     currency: string;
     locale?: string;
+    showTitle?: boolean;
+    showCard?: boolean;
+    showEditPayment?: boolean;
     labels?: InstallmentTableLabels;
     isSaving?: boolean;
     onEditInstallments: () => void;

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

@@ -20,6 +20,18 @@ export declare const DRAG_TOGGLE_THRESHOLD = 60;
 export declare const shouldToggleOnDrag: (offsetY: number, open: boolean, threshold?: number) => boolean;
 /** Clamp a proposed reveal height into `[0, fullHeight]`. */
 export declare const clampRevealHeight: (proposed: number, fullHeight: number) => number;
+/**
+ * Vertical viewport space reserved for the sheet's chrome around the reveal
+ * panel (collapse header + action bar + the sheet paddings). Exported so the
+ * cap is testable and tunable.
+ */
+export declare const SHEET_CHROME_PX = 160;
+/**
+ * Cap the panel's natural height to the room the viewport leaves after the
+ * sheet chrome, so the OPEN sheet never outgrows the screen — taller content
+ * scrolls inside the reveal panel instead.
+ */
+export declare const capRevealHeight: (naturalHeight: number, viewportHeight: number, chrome?: number) => number;
 /**
  * Live reveal height while dragging: dragging **up** (negative `offsetY`) grows
  * the panel from its `baseHeight`; dragging **down** shrinks it. Clamped to the

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
@@ -121,12 +173,19 @@ export interface SummaryProps {
      */
     collapsible?: boolean;
     /**
-     * Controlled open/closed state. Defaults to **closed** when collapsible (the
-     * mobile sheet rests collapsed) and always open on the non-collapsible card.
+     * Controlled open/closed state. OMIT it and the component manages the
+     * state itself (uncontrolled — every toggle surface just works), starting
+     * at {@link defaultOpen}. The non-collapsible card is always open.
      */
     isOpen?: boolean;
-    /** Fires when the header (open) — or the closed bar's Total (closed) — is activated to toggle. */
+    /**
+     * Fires when the header (open) — or the closed bar's Total (closed) — is
+     * activated to toggle. Uncontrolled summaries flip themselves AND still
+     * notify through this callback.
+     */
     onToggleOpen?: () => void;
+    /** Initial open state when uncontrolled. Defaults to `false` (the mobile sheet rests collapsed). */
+    defaultOpen?: boolean;
     /** The primary CTA. */
     primaryAction?: SummaryPrimaryAction;
     /** When provided, item rows show a red trash remove control. */

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.13.1",
+    "version": "1.14.0-alpha.1",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",