@veevarts/design-system 1.12.0-alpha.1 → 1.12.0-alpha.2

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

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

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

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { SummaryClassNames, SummaryPrimaryAction, SummaryProps } from '../types';
+export interface ActionBarProps {
+    open: boolean;
+    /** Open progress 0→1; drives the cross-fade opacity. */
+    progress: number;
+    /** True while a drag is in progress (disables the eased transition). */
+    dragging: boolean;
+    primaryAction?: SummaryPrimaryAction;
+    isLoading: boolean;
+    cart?: SummaryProps['cart'];
+    cartAriaLabel: string;
+    /** Expand the summary — the closed-bar cart button opens it on click. */
+    onToggleOpen?: () => void;
+    classNames: SummaryClassNames;
+}
+export declare const ActionBar: React.FC<ActionBarProps>;

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

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { SummaryProps } from '../types';
+export interface CartButtonProps {
+    cart: NonNullable<SummaryProps['cart']>;
+    ariaLabel: string;
+    /** Click handler — wired by the action bar to open the summary (and still
+     * fire the consumer's `cart.onPress` if provided). */
+    onPress: () => void;
+    className?: string;
+}
+export declare const CartButton: React.FC<CartButtonProps>;

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

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { Money, SummaryClassNames } from '../types';
+export interface CollapseHeaderProps {
+    title: React.ReactNode;
+    total: {
+        label?: React.ReactNode;
+        amount: Money;
+    };
+    locale: string;
+    open: boolean;
+    /** Open progress 0→1; drives the cross-fade opacity. */
+    progress: number;
+    /** True while a drag is in progress (disables the eased transition). */
+    dragging: boolean;
+    toggleAriaLabel: string;
+    onToggleOpen?: () => void;
+    classNames: SummaryClassNames;
+}
+export declare const CollapseHeader: React.FC<CollapseHeaderProps>;

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

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

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { SummaryLineItem } from '../types';
+export interface ItemRowProps {
+    item: SummaryLineItem;
+    locale: string;
+    onRemove?: (id: string) => void;
+    removeAriaLabel: string;
+}
+export declare const ItemRow: React.FC<ItemRowProps>;

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

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { SummaryProps } from '../types';
+export interface PrimaryCtaProps {
+    action: NonNullable<SummaryProps['primaryAction']>;
+    disabledByLoading: boolean;
+    className?: string;
+    /** Disambiguates the two cross-fade CTA layers. Default `summary-cta` (the
+     * open / desktop instance); the closed compact layer passes `summary-cta-compact`. */
+    testId?: string;
+}
+export declare const PrimaryCta: React.FC<PrimaryCtaProps>;

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { SummaryServiceFee } from '../types';
+export interface ServiceFeeRowProps {
+    fee: SummaryServiceFee;
+    locale: string;
+    className?: string;
+}
+export declare const ServiceFeeRow: React.FC<ServiceFeeRowProps>;

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

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { SummaryClassNames, SummaryLineItem, SummaryServiceFee, SummaryTotalRow } from '../types';
+export interface SummaryBodyProps {
+    pricesInLabel: React.ReactNode;
+    currency?: React.ReactNode;
+    items?: SummaryLineItem[];
+    serviceFee?: SummaryServiceFee;
+    rows?: SummaryTotalRow[];
+    locale: string;
+    onRemoveItem?: (id: string) => void;
+    removeAriaLabel: string;
+    emptyState?: React.ReactNode;
+    classNames: SummaryClassNames;
+}
+export declare const SummaryBody: React.FC<SummaryBodyProps>;

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { SummaryTotalRow } from '../types';
+export interface TotalsLineRowProps {
+    row: SummaryTotalRow;
+    locale: string;
+    emphasized: boolean;
+}
+export declare const TotalsLineRow: React.FC<TotalsLineRowProps>;

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

@@ -0,0 +1,55 @@
+/**
+ * Drag/reveal gesture helpers for the collapsible `<Summary>`.
+ *
+ * Kept in their own module (not in `Summary.tsx`) so the component file only
+ * exports a component — the Design-System fast-refresh convention — and so the
+ * gesture math is pure and fully unit-tested (framer's drag `info` never fires
+ * under the test mock).
+ */
+/**
+ * Minimum vertical drag distance (px) past which a collapsible summary toggles.
+ * Exported so the gesture threshold is testable and tunable.
+ */
+export declare const DRAG_TOGGLE_THRESHOLD = 60;
+/**
+ * Pure decision for the drag-to-toggle gesture: drag **up** (negative offset)
+ * while closed opens; drag **down** (positive offset) while open closes. A drag
+ * shorter than `threshold`, or in the wrong direction for the current state,
+ * does nothing.
+ */
+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;
+/**
+ * Live reveal height while dragging: dragging **up** (negative `offsetY`) grows
+ * the panel from its `baseHeight`; dragging **down** shrinks it. Clamped to the
+ * panel's natural `fullHeight` so it tracks the finger 1:1 without overshooting.
+ */
+export declare const revealHeightFromDrag: (baseHeight: number, offsetY: number, fullHeight: number) => number;
+/**
+ * Resolve the reveal panel's current height. While dragging (`dragHeight` set)
+ * the finger drives it; otherwise it rests fully open (`fullHeight`) or fully
+ * collapsed (`0`).
+ */
+export declare const currentRevealHeight: (dragHeight: number | null, open: boolean, fullHeight: number) => number;
+/**
+ * The reveal panel animates its height smoothly at rest, but tracks the finger
+ * with no transition while dragging (so the drag feels 1:1, not laggy).
+ */
+export declare const revealTransitionClass: (dragging: boolean) => string;
+export interface DragInfo {
+    offset?: {
+        y?: number;
+    };
+}
+export interface DragHandlerDeps {
+    open: boolean;
+    fullHeight: number;
+    setDragHeight: (height: number | null) => void;
+    onToggleOpen?: () => void;
+}
+export interface DragHandlers {
+    onDrag: (event: unknown, info?: DragInfo) => void;
+    onDragEnd: (event: unknown, info?: DragInfo) => void;
+}
+export declare const createDragHandlers: (deps: DragHandlerDeps) => DragHandlers;

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

@@ -0,0 +1,2 @@
+import { Money } from '../../utils/money';
+export declare const fmt: (m: Money, locale: string) => string;

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

@@ -0,0 +1,7 @@
+/**
+ * Summary Pattern — pure-UI order summary (Figma node 12127-11831):
+ * header, flexible line items, service-fee toggle, totals, collapsible
+ * Total + CTA, and a compact mobile bottom-bar.
+ */
+export { Summary } from './Summary';
+export type { SummaryProps, SummaryLineItem, SummaryServiceFee, SummaryTotalRow, SummaryPrimaryAction, SummaryLabels, Money, } from './types';

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

@@ -0,0 +1,147 @@
+import { ReactNode } from 'react';
+import { Money } from '../../utils/money';
+export type { Money } from '../../utils/money';
+/**
+ * A single, flexible line item. The four Figma "types" (Ticket, Event,
+ * Membership, Donation) are compositions of this one shape — not rigid
+ * variants — honouring "grouping, but flexible".
+ */
+export interface SummaryLineItem {
+    /** Stable id (keys, remove handler, and `data-testid`). */
+    id: string;
+    /** Display name (Ticket / Event title / Membership / Donation). */
+    name: ReactNode;
+    /** Quantity; renders a `{qty} x` prefix (Ticket / Adult / Children). */
+    quantity?: number;
+    /** Right-aligned price. Omit on an Event header that only groups children. */
+    amount?: Money;
+    /** Render the name in a heavier weight (Event / Membership / Donation titles). */
+    emphasis?: boolean;
+    /** Leading icon node (e.g. `lucide:ticket` for Event, `lucide:star` for Membership). */
+    leadingIcon?: ReactNode;
+    /** Calendar row, e.g. "March 26th, 2026 - 9:45 am - 09:45 pm" (Event). */
+    dateLabel?: ReactNode;
+    /** Date-range row joined by an arrow (Membership), e.g. Jan 26, 2026 → Jan 26, 2027. */
+    dateRange?: {
+        from: ReactNode;
+        to: ReactNode;
+    };
+    /** Nested rows, indented (Event's Adult / Children). */
+    children?: SummaryLineItem[];
+}
+/** The "Pay Service fee" radio-toggle row. */
+export interface SummaryServiceFee {
+    label: ReactNode;
+    amount: Money;
+    /** Selected (filled radio) state. */
+    isSelected?: boolean;
+    /** Fires when the row/radio is toggled. */
+    onToggle?: () => void;
+}
+/** A plain totals row (Subtotal, Taxes). */
+export interface SummaryTotalRow {
+    /** Stable key for `data-testid` (e.g. 'subtotal', 'taxes'). */
+    key: string;
+    label: ReactNode;
+    amount: Money;
+}
+/** The primary call-to-action (orange pill + arrow). */
+export interface SummaryPrimaryAction {
+    label: ReactNode;
+    onPress: () => void;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+}
+/** Overridable copy. */
+export interface SummaryLabels {
+    /** Aria label for the per-item remove control. Default "Remove item". */
+    removeAriaLabel?: string;
+    /** Aria label for the collapse/expand press target. Default "Toggle summary". */
+    toggleAriaLabel?: string;
+    /** Aria label for the mobile cart button. Default "View cart". */
+    cartAriaLabel?: string;
+}
+/**
+ * Per-slot class overrides — the Design-System `classNames` convention (HeroUI
+ * `SlotsToClasses`). Each key targets one visual region and is merged AFTER the
+ * component's own classes via `cn`, so any Tailwind utility you pass wins. The
+ * root also accepts the plain `className`.
+ */
+export interface SummaryClassNames {
+    /** Root `<section>` (applied alongside `className`). */
+    base?: string;
+    /** Header row (title + `×`). */
+    header?: string;
+    /** Title text. */
+    title?: string;
+    /** The header collapse/close (`×`) control. */
+    closeButton?: string;
+    /** "Prices are in / currency" row. */
+    prices?: string;
+    /** Line-items container. */
+    items?: string;
+    /** Service-fee row. */
+    serviceFee?: string;
+    /** Totals-rows container (Subtotal / Taxes). */
+    totalsRows?: string;
+    /** The Total row. */
+    total?: string;
+    /** Primary CTA button. */
+    cta?: string;
+    /** Mobile compact bottom-bar. */
+    mobileBar?: string;
+    /** Mobile cart button. */
+    cart?: string;
+}
+export interface SummaryProps {
+    /** Header title. Default "Summary". */
+    title?: ReactNode;
+    /** Left text of the prices row. Default "Prices are in". */
+    pricesInLabel?: ReactNode;
+    /** Right text of the prices row (currency code), e.g. "USD". */
+    currency?: ReactNode;
+    /** BCP-47 locale for money formatting. Default 'en-US'. */
+    locale?: string;
+    /** Flexible line items (flat or grouped via `children`). */
+    items?: SummaryLineItem[];
+    /** Optional "Pay Service fee" radio-toggle row. */
+    serviceFee?: SummaryServiceFee;
+    /** Plain totals rows rendered above the Total (Subtotal, Taxes). */
+    rows?: SummaryTotalRow[];
+    /** The emphasized Total row (label default "Total"). */
+    total: {
+        label?: ReactNode;
+        amount: Money;
+    };
+    /**
+     * Whether the summary can collapse — the header shows a `×` and the whole
+     * header toggles Open/Closed. Defaults to `variant === 'mobile'` (mobile
+     * collapses, desktop does not). Pass explicitly to override the automatic
+     * behaviour.
+     */
+    collapsible?: boolean;
+    /** Controlled open/closed state (default open). */
+    isOpen?: boolean;
+    /** Fires when the header (open) — or the closed bar's Total (closed) — is activated to toggle. */
+    onToggleOpen?: () => void;
+    /** The primary CTA. */
+    primaryAction?: SummaryPrimaryAction;
+    /** When provided, item rows show a red trash remove control. */
+    onRemoveItem?: (id: string) => void;
+    /** Layout: full card ('main') or compact bottom-bar ('mobile'). Default 'main'. */
+    variant?: 'main' | 'mobile';
+    /** Mobile bottom-bar cart button + badge count. */
+    cart?: {
+        count?: number;
+        onPress?: () => void;
+    };
+    /** Disables the CTA and signals recalculation. */
+    isLoading?: boolean;
+    /** Rendered when there are no items. */
+    emptyState?: ReactNode;
+    labels?: SummaryLabels;
+    'data-testid'?: string;
+    className?: string;
+    /** Per-slot class overrides (Design-System `classNames` convention). */
+    classNames?: SummaryClassNames;
+}

package/dist/patterns/index.d.ts

@@ -57,3 +57,5 @@ export { PaymentSubAmountInput } from './PaymentSubAmountInput';
 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';

package/package.json

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