@veevarts/design-system 1.12.7 → 1.13.0-alpha.1

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

@@ -40,6 +40,29 @@ export interface Offer {
      * Position for sorting offers in a list
      */
     position?: number;
+    /**
+     * Explicit sold-out override for buyer-flow states.
+     * When true, the offer is considered unavailable regardless of numeric ticket fields.
+     */
+    isSoldOut?: boolean;
+    /**
+     * Explicit max reached override for buyer-flow states.
+     * When true, increments are disabled and the max-reached message is shown.
+     */
+    isMaxReached?: boolean;
+    /**
+     * Flag used for blocked states (adult-required, business-rule restrictions, etc.).
+     * Blocked offers are read-only and render an explanatory status message.
+     */
+    isRuleBlocked?: boolean;
+    /**
+     * Optional disabled reason shown when the offer is unavailable.
+     */
+    disabledReason?: string;
+    /**
+     * Optional compact rendering mode for list/item layouts.
+     */
+    compact?: boolean;
 }
 /**
  * Selection state for offers (map of offer ID to quantity)
@@ -69,6 +92,14 @@ export interface OfferCardLabels {
      * Message when maximum tickets reached (e.g., "Maximum number of tickets allowed reached")
      */
     maxReached?: string;
+    /**
+     * Message for rule-blocked/buying-rule disabled states
+     */
+    ruleBlocked?: string;
+    /**
+     * Generic disabled message fallback
+     */
+    disabled?: string;
 }
 /**
  * Labels for error state
@@ -131,6 +162,14 @@ export interface OfferCardClassNames {
      * Class for the card footer
      */
     footer?: string;
+    /**
+     * Class for compact mode container
+     */
+    compact?: string;
+    /**
+     * Class for compact quantity/status area
+     */
+    compactFooter?: string;
 }
 /**
  * Class names for OfferCardList
@@ -235,6 +274,10 @@ export interface OfferCardSlots {
      * Custom render for max reached alert
      */
     renderMaxReachedAlert?: (message: string) => React.ReactNode;
+    /**
+     * Custom render for disabled state (sold out / max reached / rule blocked)
+     */
+    renderDisabledState?: (kind: 'soldOut' | 'maxReached' | 'ruleBlocked' | 'disabled', label: string) => React.ReactNode;
 }
 /**
  * Props for the OfferCard component
@@ -323,15 +366,53 @@ export interface OfferCardProps {
      * Class names for styling different parts of the component
      */
     classNames?: OfferCardClassNames;
+    /**
+     * Render in compact visual density mode.
+     * @default false
+     */
+    compact?: boolean;
+    /**
+     * Explicit sold-out override for this specific card.
+     * @default false
+     */
+    isSoldOut?: boolean;
+    /**
+     * Explicit max-reached override for this specific card.
+     * @default false
+     */
+    isMaxReached?: boolean;
+    /**
+     * Rule-blocked state for this specific card.
+     * @default false
+     */
+    isRuleBlocked?: boolean;
+    /**
+     * Status/tone shown for rule-blocked or max-reached states.
+     * @default 'warning'
+     */
+    statusTone?: 'default' | 'warning' | 'danger';
+    /**
+     * Optional message to explain why interaction is blocked.
+     */
+    disabledReason?: string;
+    /**
+     * Optional override for the disabled state status label.
+     */
+    statusLabel?: string;
+    /**
+     * Optional disabled override used by OfferCardList or list-level controls.
+     * @default false
+     */
+    disabled?: boolean;
 }
 /**
  * Props for the OfferCardList component
  */
-export interface OfferCardListProps {
+export interface OfferCardListProps<TOffer = Offer> {
     /**
      * Array of offers to display
      */
-    offers: Offer[];
+    offers: TOffer[];
     /**
      * Currently selected quantities (controlled mode)
      * Map of offer ID to quantity
@@ -401,6 +482,16 @@ export interface OfferCardListProps {
      * Class names for styling different parts of the component
      */
     classNames?: OfferCardListClassNames;
+    /**
+     * Render the offer list in compact mode
+     * @default false
+     */
+    compact?: boolean;
+    /**
+     * Map incoming offer-like items to OfferCard props.
+     * This supports lightweight adapters for buyer-flow data shapes.
+     */
+    mapOffer?: (offer: TOffer) => Offer;
 }
 /**
  * Props for the OfferCardSkeleton component

package/dist/patterns/OfferCard/variants/OfferCardList.d.ts

@@ -1,12 +1,12 @@
 import { JSX } from 'react';
-import { OfferCardListProps } from '../types';
+import { OfferCardListProps, Offer } from '../types';
 /**
  * OfferCardList component displays a collection of offer cards in a responsive grid.
  * It manages selection state internally or accepts external control via props.
  * When animated is true, cards animate in/out using Framer Motion variants.
  */
 export declare const OfferCardList: {
-    ({ offers, selection: selectionProp, defaultSelection, onSelectionChange, onQuantityChange, currency, locale, labels, slots, isDisabled, buttonVariant, buttonColor, showCard, animated, gap, classNames, }: OfferCardListProps): JSX.Element;
+    <TOffer = Offer>({ offers, mapOffer, selection: selectionProp, defaultSelection, onSelectionChange, onQuantityChange, currency, locale, labels, slots, isDisabled, buttonVariant, buttonColor, showCard, animated, gap, compact, classNames, }: OfferCardListProps<TOffer>): JSX.Element;
     displayName: string;
 };
 export default OfferCardList;

package/dist/patterns/PaymentSubAmountInput/PaymentSubAmountInput.d.ts

@@ -38,6 +38,17 @@ export interface PaymentSubAmountInputProps {
      * step (e.g. opening Split, advancing to Payment #N).
      */
     autoFocus?: boolean;
+    /**
+     * Hard upper bound for the typed amount, in the same MAJOR-unit scale
+     * the host parses the emitted string with. A keystroke that would push
+     * the parsed value above this is REJECTED (the controlled `value` is
+     * left unchanged, so the input reverts the offending character). Keeps
+     * the cashier from entering an amount that overflows the PSP integer
+     * range downstream. A character `maxLength` can't enforce this (e.g.
+     * `99999999` is only 8 chars yet far over a $999,999.99 cap), so the
+     * guard is value-based. Omit for no cap.
+     */
+    maxAmount?: number;
     'data-testid'?: string;
     className?: string;
 }

package/dist/patterns/SessionTimeline/SessionTimeline.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from 'react';
+import { SessionTimelineProps } from './type';
+export declare const SessionTimeline: {
+    ({ heading, subheading, days, selectedDate, onDateSelect, quickDates, selectedSessionId, onSessionSelect, emptyStateMessage, statusLabel, statusTone, sessionAriaLabel, dayButtonClassName, calendarSlot, dayGroupAriaLabel, sessionGridAriaLabel, className, headingClassName, subheadingClassName, }: SessionTimelineProps): JSX.Element;
+    displayName: string;
+};
+export default SessionTimeline;

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

@@ -0,0 +1,2 @@
+export { default as SessionTimeline } from './SessionTimeline';
+export type * from './type';

package/dist/patterns/SessionTimeline/type.d.ts

@@ -0,0 +1,76 @@
+export type SessionTimelineStatus = 'available' | 'limited' | 'sold-out' | 'closed';
+export interface SessionTimelineSession {
+    /** Unique identifier for the session. */
+    id: string;
+    /** Human-readable start time text. */
+    startTime: string;
+    /** Human-readable end time text. */
+    endTime: string;
+    /** Remaining seats, if applicable. */
+    seatsRemaining?: number;
+    /** Status used for tone and accessibility text. */
+    status?: SessionTimelineStatus;
+    /** Whether this session has no capacity cap. */
+    isUnlimited?: boolean;
+    /** Force-disable regardless of status. */
+    isDisabled?: boolean;
+}
+export interface SessionTimelineDay {
+    /** Stable day key (ISO date or grouped value). */
+    date: string;
+    /** Optional custom label for quick controls and cards. */
+    label: string;
+    /** Sessions available for this day. */
+    sessions: SessionTimelineSession[];
+}
+export interface SessionTimelineQuickDate {
+    /** Day key from `SessionTimelineDay.date`. */
+    date: string;
+    /** Label shown for this quick button. */
+    label: string;
+    /** Disable quick button. */
+    isDisabled?: boolean;
+}
+export interface SessionTimelineProps {
+    /** Optional section heading. */
+    heading: string;
+    /** Optional section description. */
+    subheading?: string;
+    /** All available session days. */
+    days: readonly SessionTimelineDay[];
+    /** Currently selected day key. */
+    selectedDate: string | null;
+    /** Day selection callback. */
+    onDateSelect: (date: string) => void | Promise<void>;
+    /** Optional quick selector buttons rendered above the timeline. */
+    quickDates?: readonly SessionTimelineQuickDate[];
+    /** Currently selected session id. */
+    selectedSessionId?: string | null;
+    /** Session selection callback (toggle null to clear). */
+    onSessionSelect: (sessionId: string | null) => void | Promise<void>;
+    /** Text when the selected day has no sessions. */
+    emptyStateMessage?: string;
+    /** Custom status label factory. */
+    statusLabel?: (session: SessionTimelineSession) => string;
+    /** Custom session status tone. */
+    statusTone?: (session: SessionTimelineSession) => 'default' | 'success' | 'danger';
+    /** Custom session card accessible label factory. */
+    sessionAriaLabel?: (session: SessionTimelineSession, state: {
+        isSelected: boolean;
+        isUnavailable: boolean;
+    }) => string;
+    /** Custom day selection status class. */
+    dayButtonClassName?: string;
+    /** Optional additional control slot for a calendar trigger/popover. */
+    calendarSlot?: React.ReactNode;
+    /** Aria label for day quick switch group. */
+    dayGroupAriaLabel?: string;
+    /** Aria label for session grid region. */
+    sessionGridAriaLabel?: string;
+    /** Optional custom root class. */
+    className?: string;
+    /** Optional custom heading class. */
+    headingClassName?: string;
+    /** Optional custom subheading class. */
+    subheadingClassName?: string;
+}

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,154 @@
+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'` (including
+     * the auto-detected mobile variant — see `variant`). Pass explicitly to
+     * override the automatic behaviour.
+     */
+    collapsible?: boolean;
+    /**
+     * Controlled open/closed state. Defaults to **closed** when collapsible (the
+     * mobile sheet rests collapsed) and always open on the non-collapsible card.
+     */
+    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 the bottom-sheet / compact bar (`'mobile'`).
+     * When OMITTED the layout is auto-detected from the viewport (below `md`
+     * → `'mobile'`, `md`+ → `'main'`). Pass explicitly to pin a layout.
+     */
+    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/Summary/useIsMobile.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Below Tailwind's `md` (768px): phones / small tablets get the bottom-sheet,
+ * everything `md`+ gets the bordered card. Exported so the threshold is shared
+ * and overridable.
+ */
+export declare const MOBILE_MEDIA_QUERY = "(max-width: 767px)";
+/**
+ * Pure, SSR-safe read of a media query. Returns `false` when `matchMedia` is
+ * unavailable (server / jsdom), so callers default to the non-mobile layout.
+ */
+export declare const mediaMatches: (query: string) => boolean;
+/**
+ * Subscribe to a media query and re-render on viewport changes. Initialises
+ * from `mediaMatches` (so the first paint already reflects the viewport on the
+ * client) and updates live as the screen crosses the breakpoint.
+ */
+export declare const useIsMobile: (query?: string) => boolean;