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

package/dist/patterns/CatalogItemCard/CatalogItemCard.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from 'react';
+import { CatalogItemCardProps } from './type';
+export declare const CatalogItemCard: {
+    ({ id, title, media, imageUrl, imageAlt, imageClassName, imageAspect, meta, price, action, footer, onPress, isPressable, isDisabled, compact, className, bodyClassName, footerClassName, dataTestId, }: CatalogItemCardProps): JSX.Element;
+    displayName: string;
+};
+export default CatalogItemCard;

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

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

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

@@ -0,0 +1,82 @@
+import { ButtonProps } from '../../components';
+/**
+ * Metadata row displayed under the card title.
+ */
+export interface CatalogItemCardMetaItem {
+    /** Iconify icon name for the metadata row. */
+    icon: string;
+    /** Human-readable metadata value. */
+    label: string;
+}
+/**
+ * Optional price block shown in the card footer.
+ */
+export interface CatalogItemCardPrice {
+    /** Optional prefix before the value, typically `From` or `Starts at`. */
+    label: string;
+    /** Fully formatted amount to render. */
+    value: string;
+}
+/**
+ * Optional action shown in the card footer.
+ */
+export interface CatalogItemCardAction {
+    /** Action label for the button. */
+    label: string;
+    /** Iconify icon name. */
+    icon?: string;
+    /** Click handler for the action button. */
+    onPress?: () => void;
+    /** HeroUI button variant. */
+    variant?: ButtonProps['variant'];
+    /** HeroUI button color. */
+    color?: ButtonProps['color'];
+    /** HeroUI button size. */
+    size?: ButtonProps['size'];
+    /** Additional classes for action button. */
+    className?: string;
+    /** Disabled state for action button. */
+    isDisabled?: boolean;
+    /** Optional aria label override for action button. */
+    ariaLabel?: string;
+}
+export interface CatalogItemCardProps {
+    /** Optional card identifier used for data-testid and DOM debugging. */
+    id?: string;
+    /** Card title. */
+    title: string;
+    /** Optional custom media node. If not provided, `imageUrl` is used. */
+    media?: React.ReactNode;
+    /** Optional image URL used when `media` is not set. */
+    imageUrl?: string;
+    /** Optional image alt text used when `media` is not set. */
+    imageAlt?: string;
+    /** Optional className for the image wrapper. */
+    imageClassName?: string;
+    /** Optional aspect ratio class for media wrapper. */
+    imageAspect?: string;
+    /** Optional list of metadata rows. */
+    meta?: CatalogItemCardMetaItem[];
+    /** Optional price block. */
+    price?: CatalogItemCardPrice;
+    /** Optional root action button. */
+    action?: CatalogItemCardAction;
+    /** Optional custom footer content. If provided, `price` and `action` still render above it. */
+    footer?: React.ReactNode;
+    /** Set a press handler on the card root. */
+    onPress?: () => void;
+    /** Enables pressable visual behavior when combined with `onPress`. */
+    isPressable?: boolean;
+    /** Disable all card interactions. */
+    isDisabled?: boolean;
+    /** Compact layout mode. */
+    compact?: boolean;
+    /** Root className for the component. */
+    className?: string;
+    /** Root className for card body. */
+    bodyClassName?: string;
+    /** Footer container className. */
+    footerClassName?: string;
+    /** Optional root test id for QA. */
+    dataTestId?: string;
+}

package/dist/patterns/EventDetails/EventDetails.d.ts

@@ -18,6 +18,8 @@ export interface EventDetailsProps {
     description?: string;
     /** @property {string} [classes] - Optional Tailwind CSS utility classes for custom styling. */
     classes?: string;
+    /** @property {boolean} [compact] - Dense spacing mode for compact side layouts. */
+    compact?: boolean;
     /** @property {boolean} [showImage] - Optional flag to show or hide the event image. Defaults to true. */
     showImage?: boolean;
     /** @property {'lazy' | 'eager'} [imageLoading] - Optional loading strategy for the event image. Use `'lazy'` for off-screen placements (long lists, below-the-fold). Defaults to `'eager'` since the banner is typically above-the-fold. */
@@ -35,5 +37,5 @@ export interface EventDetailsProps {
  * @function EventDetails
  * @description Displays a card with event information such as name, image, date, time, location, and description.
  */
-export declare const EventDetails: ({ classes, name, imageUrl, eventDate, eventTime, location, description, showImage, imageLoading, showMoreButtonClassName, labels, }: EventDetailsProps) => JSX.Element;
+export declare const EventDetails: ({ classes, name, imageUrl, eventDate, eventTime, location, description, showImage, compact, imageLoading, showMoreButtonClassName, labels, }: EventDetailsProps) => JSX.Element;
 export default EventDetails;

package/dist/patterns/FeedbackState/FeedbackState.d.ts

@@ -0,0 +1,23 @@
+import { JSX } from 'react';
+import { EmptyStateProps, ErrorStateProps, FeedbackStateProps, LoadingStateProps, SuccessStateProps } from './type';
+export declare function FeedbackState({ variant, title, titleAs: TitleElement, description, icon, actions, role, ariaLive, iconSize, className, classNames, 'data-testid': dataTestId, }: FeedbackStateProps): JSX.Element;
+export declare namespace FeedbackState {
+    var displayName: string;
+}
+export declare function EmptyState(props: EmptyStateProps): JSX.Element;
+export declare namespace EmptyState {
+    var displayName: string;
+}
+export declare function ErrorState(props: ErrorStateProps): JSX.Element;
+export declare namespace ErrorState {
+    var displayName: string;
+}
+export declare function LoadingState(props: LoadingStateProps): JSX.Element;
+export declare namespace LoadingState {
+    var displayName: string;
+}
+export declare function SuccessState(props: SuccessStateProps): JSX.Element;
+export declare namespace SuccessState {
+    var displayName: string;
+}
+export default FeedbackState;

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

@@ -0,0 +1,2 @@
+export { FeedbackState, EmptyState, ErrorState, LoadingState, SuccessState } from './FeedbackState';
+export type * from './type';

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

@@ -0,0 +1,40 @@
+import { AriaRole, ReactNode } from 'react';
+export type FeedbackStateVariant = 'empty' | 'error' | 'success' | 'loading';
+export interface FeedbackStateClassNames {
+    base?: string;
+    iconWrapper?: string;
+    icon?: string;
+    spinner?: string;
+    title?: string;
+    description?: string;
+    actions?: string;
+}
+export interface FeedbackStateProps {
+    /** Visual tone and default accessibility role. */
+    variant?: FeedbackStateVariant;
+    /** Main state message. */
+    title: ReactNode;
+    /** Semantic element used for the title. Defaults to a paragraph for inline states. */
+    titleAs?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'div';
+    /** Supporting copy rendered under the title. */
+    description?: ReactNode;
+    /** Iconify name, custom React node, or false to hide the icon. Loading defaults to a spinner. */
+    icon?: string | ReactNode | false;
+    /** Optional CTA area; pass buttons, links, or any custom action group. */
+    actions?: ReactNode;
+    /** Overrides the default role: error => alert, otherwise status. */
+    role?: AriaRole;
+    /** Overrides the default live-region politeness. */
+    ariaLive?: 'off' | 'polite' | 'assertive';
+    /** Icon size in pixels when icon is an Iconify name. */
+    iconSize?: number;
+    /** Root className shortcut. */
+    className?: string;
+    /** Slot-level className overrides. */
+    classNames?: FeedbackStateClassNames;
+    'data-testid'?: string;
+}
+export type EmptyStateProps = Omit<FeedbackStateProps, 'variant'>;
+export type ErrorStateProps = Omit<FeedbackStateProps, 'variant'>;
+export type LoadingStateProps = Omit<FeedbackStateProps, 'variant'>;
+export type SuccessStateProps = Omit<FeedbackStateProps, 'variant'>;

package/dist/patterns/FilterPopover/FilterPopover.d.ts

@@ -0,0 +1,6 @@
+import { FilterPopoverProps } from './type';
+export declare const FilterPopover: {
+    ({ triggerLabel, triggerAriaLabel, triggerIcon, triggerVariant, triggerColor, triggerSize, triggerClassName, popoverClassName, className, sections, onConfirm, onClear, appliedCount, countAriaLabel, countDisplay, confirmLabel, clearLabel, isOpen, defaultOpen, onOpenChange, isDisabled, closeOnConfirm, keepOpenAfterClear, }: FilterPopoverProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default FilterPopover;

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

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

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

@@ -0,0 +1,85 @@
+import { ButtonProps } from '../../components';
+export interface FilterOption {
+    /** Option value used in payload. */
+    value: string;
+    /** Label for the option. */
+    label: string;
+    /** Option disabled state. */
+    isDisabled?: boolean;
+}
+export interface FilterSectionBase {
+    /** Unique identifier for this filter section. */
+    id: string;
+    /** Section label above its options. */
+    label: string;
+}
+export interface CheckboxFilterSection extends FilterSectionBase {
+    /** Render options as multi-select checkboxes. */
+    type: 'checkbox';
+    /** Currently selected values for this section. */
+    selectedValues: readonly string[];
+    /** Checkbox section options. */
+    options: readonly FilterOption[];
+}
+export interface RadioFilterSection extends FilterSectionBase {
+    /** Render options as mutually exclusive radio buttons. */
+    type: 'radio';
+    /** Currently selected value; empty when no option selected. */
+    selectedValue: string | null;
+    /** Radio section options. */
+    options: readonly FilterOption[];
+}
+export type FilterSection = CheckboxFilterSection | RadioFilterSection;
+export type AppliedFilterValues = Record<string, string | string[] | null>;
+export type DraftFilterValues = Record<string, string[]>;
+export interface FilterPopoverProps {
+    /** Label for popover trigger button. */
+    triggerLabel: string;
+    /** Optional accessible label for the popover trigger. */
+    triggerAriaLabel?: string;
+    /** Optional icon for trigger button. */
+    triggerIcon?: string;
+    /** Text for confirmation button. */
+    confirmLabel?: string;
+    /** Text for clear button. */
+    clearLabel?: string;
+    /** Count badge accessibility label. */
+    countAriaLabel?: (count: number) => string;
+    /**
+     * How to render the applied filter count on the trigger.
+     * Defaults to compact badge rendering for buyer-flow toolbar usage.
+     */
+    countDisplay?: 'summary' | 'badge';
+    /** Applied sections to initialize draft state. */
+    sections: readonly FilterSection[];
+    /** Called with normalized values when user clicks Confirm. */
+    onConfirm: (values: AppliedFilterValues) => void | Promise<void>;
+    /** Clears all filters. */
+    onClear: () => void | Promise<void>;
+    /** Optional external count override. */
+    appliedCount?: number;
+    /** Control popover open state. */
+    isOpen?: boolean;
+    /** Uncontrolled initial open state. */
+    defaultOpen?: boolean;
+    /** Controlled open-state change handler. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Trigger variant. */
+    triggerVariant?: ButtonProps['variant'];
+    /** Trigger color. */
+    triggerColor?: ButtonProps['color'];
+    /** Trigger size. */
+    triggerSize?: ButtonProps['size'];
+    /** Trigger button className. */
+    triggerClassName?: string;
+    /** Popover content className. */
+    popoverClassName?: string;
+    /** Container className. */
+    className?: string;
+    /** Disable entire control. */
+    isDisabled?: boolean;
+    /** Close popover when confirm is clicked. */
+    closeOnConfirm?: boolean;
+    /** Keep popover open after clearing. */
+    keepOpenAfterClear?: boolean;
+}

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

@@ -3,12 +3,64 @@ export interface ItemCardProps {
      * Selection key. Pass as `itemKey` in JSX (React reserves `key` and does not forward it).
      */
     itemKey: string;
+    /**
+     * Display name
+     */
     name: string;
+    /**
+     * Raw price value
+     */
     price: number;
+    /**
+     * Whether to render the price column.
+     * Useful for buyer-flow selection cards where the value is represented by a status badge.
+     * @default true
+     */
+    showPrice?: boolean;
+    /**
+     * Locale for price formatting
+     */
     locale?: string;
+    /**
+     * Currency code
+     */
     currency?: string;
+    /**
+     * Optional type label
+     */
     type?: string;
+    /**
+     * Whether this item is selected
+     */
     isSelected?: boolean;
+    /**
+     * Compact rendering mode
+     * @default false
+     */
+    compact?: boolean;
+    /**
+     * Whether card actions are disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Optional label describing disabled reason
+     */
+    disabledReason?: string;
+    /**
+     * Optional status label used in compact/badged states
+     */
+    statusLabel?: string;
+    /**
+     * Status tone for disabled state
+     */
+    statusTone?: 'default' | 'success' | 'warning' | 'danger';
+    /**
+     * Selection handler, turns card pressable
+     */
     onSelect?: (key: string) => void;
+    /**
+     * Optional custom class
+     */
     className?: string;
 }

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

@@ -6,7 +6,7 @@ import { OfferCardProps } from './types';
  * Supports slot-based customization for all rendered elements.
  */
 export declare const OfferCard: {
-    ({ offer, quantity: quantityProp, defaultQuantity, onQuantityChange, currency, locale, labels: customLabels, slots, isDisabled, buttonVariant, buttonColor, showCard, showDescription, showPeopleCount, showPrice, classNames, "data-testid": dataTestId, selectedColor, }: OfferCardProps): JSX.Element;
+    ({ offer, quantity: quantityProp, defaultQuantity, onQuantityChange, currency, locale, labels: customLabels, slots, isDisabled, buttonVariant, buttonColor, showCard, showDescription, showPeopleCount, showPrice, classNames, "data-testid": dataTestId, selectedColor, compact, isSoldOut: isSoldOutProp, isMaxReached: isMaxReachedProp, isRuleBlocked: isRuleBlockedProp, statusTone: statusToneProp, statusLabel, disabledReason, disabled, }: OfferCardProps): JSX.Element;
     displayName: string;
 };
 export default OfferCard;

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

@@ -115,12 +115,15 @@ export interface SummaryProps {
     };
     /**
      * 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.
+     * 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 (default open). */
+    /**
+     * 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;
@@ -128,7 +131,11 @@ export interface SummaryProps {
     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'. */
+    /**
+     * 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?: {

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;