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

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;

package/package.json

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