@vkzstudio/muza-ui 1.0.43 → 1.0.45

package/dist/components/Reorderable/Reorderable.d.ts

@@ -32,19 +32,40 @@ export interface ReorderableGroupProps<T> {
      * Fires when items are reordered with the new array order.
      * Required unless `onSync` is provided, in which case it becomes an optional
      * pass-through for immediate local feedback.
+     *
+     * @example
+     * const [items, setItems] = useState(initialItems)
+     * <ReorderableGroup values={items} onReorder={setItems}>...</ReorderableGroup>
      */
     onReorder?: (newOrder: T[]) => void;
     /**
      * Debounced sync callback. Fires once after the user finishes reordering
      * (`syncDelay` ms after the last reorder event). When provided, the component
      * manages internal state and blocks external `values` updates while sync is pending.
+     *
+     * @example
+     * // Persist new order to the server after the user finishes dragging
+     * <ReorderableGroup
+     *   values={serverItems}
+     *   onSync={(order) => api.saveOrder(order)}
+     *   syncDelay={500}
+     * >
+     *   {(items) => items.map(item => <ReorderableItem key={item.id} value={item}>...</ReorderableItem>)}
+     * </ReorderableGroup>
      */
     onSync?: (newOrder: T[]) => void;
     /** Milliseconds to wait after the last reorder event before calling `onSync`. @default 300 */
     syncDelay?: number;
     /**
-     * Called when the internal sync pending state changes.
+     * Fires when the internal sync pending state changes.
      * Useful for showing loading indicators or disabling other interactions during sync.
+     *
+     * @example
+     * <ReorderableGroup
+     *   values={items}
+     *   onSync={handleSync}
+     *   onSyncPendingChange={setIsSyncing}
+     * >...</ReorderableGroup>
      */
     onSyncPendingChange?: (isPending: boolean) => void;
     /** Fires when a pointer drag interaction starts (handle grab or direct item drag). */
@@ -64,6 +85,14 @@ export interface ReorderableGroupProps<T> {
     /**
      * Wraps children with AnimatePresence to enable exit animations on ReorderableItems.
      * Pass `true` for defaults (`mode="popLayout"`, `initial={false}`) or an object for custom config.
+     *
+     * @default false
+     * @example
+     * // Enable defaults
+     * <ReorderableGroup animatePresence values={items} onReorder={setItems}>...</ReorderableGroup>
+     *
+     * // Custom AnimatePresence config
+     * <ReorderableGroup animatePresence={{ mode: 'wait' }} values={items} onReorder={setItems}>...</ReorderableGroup>
      */
     animatePresence?: boolean | Omit<AnimatePresenceProps, 'children'>;
     /** Additional CSS classes. */
@@ -88,6 +117,16 @@ declare const ReorderableGroup: <T>(props: ReorderableGroupProps<T> & {
 type ReorderableItemElement = 'li' | 'div' | 'tr';
 /**
  * Custom animation configuration for enter/exit transitions on a ReorderableItem.
+ * Passed to a ReorderableItem via the `animation` prop. Any omitted field falls back
+ * to the built-in default (opacity + scale fade).
+ *
+ * @example
+ * const slideIn: ReorderableItemAnimationConfig = {
+ *   initial: { opacity: 0, x: -20 },
+ *   animate: { opacity: 1, x: 0 },
+ *   exit: { opacity: 0, x: 20 },
+ *   transition: { duration: 0.15, ease: 'easeOut' },
+ * }
  */
 export interface ReorderableItemAnimationConfig {
     /** Mount animation state (motion `initial`). Set `false` to skip enter animation. */
@@ -128,6 +167,10 @@ export interface ReorderableItemProps<T> {
      * - Object: merges with defaults — only override what you need.
      * - `false` or omitted: no animation unless the parent group has `animatePresence` enabled,
      *   in which case defaults are applied automatically.
+     *
+     * @see ReorderableItemAnimationConfig
+     * @example
+     * <ReorderableItem animation={{ initial: { opacity: 0, x: -20 } }} value={item}>...</ReorderableItem>
      */
     animation?: boolean | ReorderableItemAnimationConfig;
     /** Additional CSS classes. */
@@ -139,6 +182,10 @@ export interface ReorderableItemProps<T> {
     /**
      * Controls Motion's layout animation mode.
      * Use `"position"` to animate only position and prevent scale distortion when item height changes.
+     *
+     * @example
+     * // Prevent scale distortion on items with dynamic height
+     * <ReorderableItem layout="position" value={item}>...</ReorderableItem>
      */
     layout?: true | 'position';
     /**

package/dist/components/Reorderable/Reorderable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Reorderable.d.ts","sourceRoot":"","sources":["../../../src/components/Reorderable/Reorderable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Reorderable.d.ts","sourceRoot":"","sources":["../../../src/components/Reorderable/Reorderable.tsx"],"names":[],"mappings":"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"}

package/dist/components/ReorderableTable/ReorderableTable.d.ts

@@ -1,8 +1,9 @@
 import { ForwardedRef, ReactNode } from 'react';
 /**
- * Column definition for ReorderableTable.
+ * Column definition for the ReorderableTable. Describes how a single column's
+ * header and body cells are derived from row data.
  *
- * @typeParam T - Row data object type
+ * @typeParam T - The type of data objects in each row
  *
  * @example
  * const columns: ReorderableTableColumn<User>[] = [
@@ -13,17 +14,19 @@ import { ForwardedRef, ReactNode } from 'react';
 export interface ReorderableTableColumn<T> {
     /** Property key from the row data object to display in this column. */
     dataKey: keyof T;
-    /** Column header content. */
+    /** Header content rendered in the table head for this column. */
     title: ReactNode;
-    /** Applies custom CSS classes to cells in this column. */
+    /** Applies custom CSS classes to both header and body cells in this column. */
     className?: string;
     /**
-     * Controls text truncation via line clamping.
-     * `true` or `1` applies single-line clamp, `2` applies two-line clamp.
+     * Controls text truncation via line clamping. `true` or `1` applies a
+     * single-line clamp, `2` applies a two-line clamp. Only used when `render`
+     * is omitted (the default Typography renderer honors this prop).
      */
     lineClamp?: boolean | 1 | 2;
     /**
-     * Custom cell renderer. When omitted, the raw data value is rendered as text.
+     * Custom cell renderer. When omitted, the raw data value is rendered inside
+     * a Typography component.
      *
      * @example
      * render: (value, rowData, rowIndex) => <Tag>{value}</Tag>
@@ -34,7 +37,7 @@ export interface ReorderableTableColumn<T> {
  * Props for the ReorderableTable component.
  * Extends standard table attributes except `children` (rows are generated from `data`).
  *
- * @typeParam T - Row data object type; must include an `id` field
+ * @typeParam T - The type of data objects in each row; must include an `id` field used as the React key
  * @see ReorderableTableColumn
  */
 export interface ReorderableTableProps<T extends {
@@ -44,27 +47,37 @@ export interface ReorderableTableProps<T extends {
     data: T[];
     /**
      * Fires when rows are reordered. Receives the full array in its new order.
-     * Optional when `onSync` is provided.
+     * Optional when `onSync` is provided — in sync mode `onSync` is the primary
+     * handler and `onReorder` becomes a pass-through for immediate local feedback.
+     *
+     * @example
+     * onReorder={(newOrder) => setRows(newOrder)}
      */
     onReorder?: (newOrder: T[]) => void;
     /**
      * Debounced sync callback. Fires once after the user finishes reordering
      * (`syncDelay` ms after the last reorder event). When provided, the component
      * manages internal state and blocks external `data` updates while sync is pending.
+     *
+     * @example
+     * onSync={(newOrder) => api.saveOrder(newOrder)}
      */
     onSync?: (newOrder: T[]) => void;
     /** Milliseconds to wait after the last reorder event before calling `onSync`. @default 300 */
     syncDelay?: number;
     /**
-     * Called when the internal sync pending state changes.
-     * Useful for showing loading indicators or disabling other interactions during sync.
+     * Fires when the internal sync pending state changes. Useful for showing
+     * loading indicators or disabling other interactions during sync.
      */
     onSyncPendingChange?: (isPending: boolean) => void;
     /** Fires when a pointer drag interaction starts. */
     onDragStart?: () => void;
     /** Fires when a pointer drag interaction ends. */
     onDragEnd?: () => void;
-    /** Column definitions describing headers and cell rendering. @see ReorderableTableColumn */
+    /**
+     * Column definitions describing headers and cell rendering.
+     * @see ReorderableTableColumn
+     */
     columns: ReorderableTableColumn<T>[];
     /** Displays the table header row. @default false */
     showHeader?: boolean;
@@ -72,7 +85,8 @@ export interface ReorderableTableProps<T extends {
     disabled?: boolean;
     /**
      * Determines whether a specific row is disabled based on its data and index.
-     * Disabled rows cannot be dragged but may still shift when other rows are reordered.
+     * Disabled rows cannot be dragged but may still shift position when other
+     * rows are reordered around them.
      *
      * @example
      * isRowDisabled={(row) => row.status === 'inactive'}
@@ -85,14 +99,17 @@ export interface ReorderableTableProps<T extends {
     /** Enables enter/exit animations when rows are added or removed. @default false */
     animateItems?: boolean;
     /**
-     * Controls Motion's layout animation mode on rows.
-     * Use `"position"` to animate only position and prevent scale distortion when row height changes.
+     * Controls Motion's layout animation mode on rows. Use `"position"` to
+     * animate only position and prevent scale distortion when row height changes.
      */
     layout?: true | 'position';
     /**
      * Fires when a row is clicked. Does not fire when the click originates from
-     * the drag handle. Clicks inside interactive children (buttons, links) should
-     * call `event.stopPropagation()` to avoid double-firing.
+     * the drag handle column. Clicks inside interactive children (buttons, links,
+     * inputs) should call `event.stopPropagation()` to avoid double-firing.
+     *
+     * @example
+     * onRowClick={(rowData, rowIndex) => navigate(`/items/${rowData.id}`)}
      */
     onRowClick?: (rowData: T, rowIndex: number) => void;
 }

package/dist/components/ReorderableTable/ReorderableTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReorderableTable.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAA;AAWrE;;;;;;;;;;GAUG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,uEAAuE;IACvE,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAA;IAChB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,CAAA;IAC3B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAA;CACxE;AAED;;;;;;GAMG;AACH,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CACtE,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAChE,wFAAwF;IACxF,IAAI,EAAE,CAAC,EAAE,CAAA;IACT;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;IAChC,8FAA8F;IAC9F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAClD,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,4FAA4F;IAC5F,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAA;IACpC,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAA;IACzD,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uFAAuF;IACvF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,GAAG,UAAU,CAAA;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CACpD;AAkQD,QAAA,MAAM,gBAAgB,EAAwC,CAC5D,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAEjC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;CAAE,KACvE,KAAK,CAAC,YAAY,CACtB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"ReorderableTable.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAA;AAWrE;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,uEAAuE;IACvE,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,iEAAiE;IACjE,KAAK,EAAE,SAAS,CAAA;IAChB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,CAAA;IAC3B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAA;CACxE;AAED;;;;;;GAMG;AACH,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CACtE,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAChE,wFAAwF;IACxF,IAAI,EAAE,CAAC,EAAE,CAAA;IACT;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;IACnC;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;IAChC,8FAA8F;IAC9F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAClD,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB;;;OAGG;IACH,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAA;IACpC,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAA;IACzD,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uFAAuF;IACvF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,GAAG,UAAU,CAAA;IAC1B;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CACpD;AAkQD,QAAA,MAAM,gBAAgB,EAAwC,CAC5D,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAEjC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;CAAE,KACvE,KAAK,CAAC,YAAY,CACtB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ReorderableTable/ReorderableTable.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReorderableTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAc3D,OAAO,EACL,gBAAgB,EAEjB,MAAM,oBAAoB,CAAA;AAE3B,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAA;CAC9B;AAyCD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAoEvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAA;AAExD,eAAO,MAAM,OAAO,EAAE,KAkHrB,CAAA;AAMD,eAAO,MAAM,YAAY,EAAE,KAuL1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAsG3B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA2G7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KA0H1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAkG3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA4FtB,CAAA"}
+{"version":3,"file":"ReorderableTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAc3D,OAAO,EACL,gBAAgB,EAEjB,MAAM,oBAAoB,CAAA;AAE3B,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAA;CAC9B;AAyCD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CA0EvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAA;AAExD,eAAO,MAAM,OAAO,EAAE,KAkHrB,CAAA;AAMD,eAAO,MAAM,YAAY,EAAE,KAuL1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAsG3B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA2G7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KA0H1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAkG3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA4FtB,CAAA"}

package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.d.ts

@@ -0,0 +1,266 @@
+import { ResponsiveBreakpoint } from '../../hooks/use-is-breakpoint';
+import * as React from 'react';
+/**
+ * Column definition for a single layout of the ResponsiveLayoutTable.
+ *
+ * Each column either renders a raw value from the row via `dataKey` (wrapped in
+ * a Typography component) or a fully custom cell via `render`. Use `skeleton` to
+ * describe the loading placeholder shape.
+ *
+ * @typeParam T - The type of data objects in each row
+ *
+ * @example
+ * ```tsx
+ * const columns: ResponsiveLayoutTableColumn<Transaction>[] = [
+ *   { title: 'Customer', dataKey: 'customer', className: 'w-[240px]' },
+ *   {
+ *     title: 'Amount',
+ *     render: (row) => <AmountCell row={row} />,
+ *     skeleton: <Skeleton className="h-4 w-20" />,
+ *   },
+ * ]
+ * ```
+ */
+export interface ResponsiveLayoutTableColumn<T extends {
+    id: string | number;
+}> {
+    /** Header label. Accepts ReactNode for multi-line headers (e.g. tablet stacked text). */
+    title?: React.ReactNode;
+    /**
+     * Property key from the data object. Used as default cell content when `render`
+     * is omitted — the raw value is rendered inside a Typography component. Ignored
+     * when `render` is provided.
+     */
+    dataKey?: keyof T;
+    /** Additional CSS class applied to both the header and body cells. */
+    className?: string;
+    /**
+     * Truncates default cell text to the specified number of lines. Only applies
+     * when `render` is omitted. `true` or `1` clamps to one line, `2` clamps to two.
+     * @default false
+     */
+    lineClamp?: boolean | 1 | 2;
+    /**
+     * Custom render function for cell content. Receives the full row data so that
+     * compressed layouts can combine data from multiple fields in a single cell.
+     * When omitted, the raw `dataKey` value is displayed inside a Typography component.
+     *
+     * @param rowData - The data object for the current row
+     * @param rowIndex - The zero-based index of the row in `data`
+     * @param disabled - Whether the table is in the disabled state (forwarded from
+     *   `ResponsiveLayoutTableProps.disabled` so cells can mute their own styling)
+     */
+    render?: (rowData: T, rowIndex: number, disabled?: boolean) => React.ReactNode;
+    /**
+     * Skeleton placeholder rendered in this cell when the row is in a loading state
+     * (see `ResponsiveLayoutTableProps.isRowLoading`). Compose `<Skeleton />` primitives
+     * to match the shape of the real cell. Omit to fall back to a generic full-width bar.
+     */
+    skeleton?: React.ReactNode;
+}
+/**
+ * Per-layout className overrides for the header and body rows.
+ *
+ * @example
+ * ```tsx
+ * classNames: { row: 'border-dashed', header: 'bg-surface-base-tertiary' }
+ * ```
+ */
+export interface ResponsiveLayoutTableLayoutClassNames {
+    /** Additional CSS class applied to each body row. */
+    row?: string;
+    /** Additional CSS class applied to the header row. */
+    header?: string;
+}
+/**
+ * A single layout configuration for the ResponsiveLayoutTable. Each layout
+ * describes a distinct set of columns that becomes active when its `responsive`
+ * predicate matches. Layouts are evaluated in order and the first match wins;
+ * the last entry should omit `responsive` so it matches as a fallback.
+ *
+ * @typeParam T - The type of data objects in each row
+ *
+ * @example
+ * ```tsx
+ * const layouts: ResponsiveLayoutTableLayout<Transaction>[] = [
+ *   { responsive: 'lg', columns: desktopColumns },
+ *   { responsive: 'md', columns: tabletColumns },
+ *   { showHeader: false, columns: phoneColumns },
+ * ]
+ * ```
+ */
+export interface ResponsiveLayoutTableLayout<T extends {
+    id: string | number;
+}> {
+    /**
+     * Controls when this layout is active.
+     * - Named breakpoint (`'xs'..'3xl'`): active at and above that breakpoint, resolved internally via hooks.
+     * - Boolean: caller supplies the result directly (e.g. from `useMediaQuery('(min-width: 52rem)')`).
+     *   `true` activates this layout, `false` skips it. Use this for arbitrary thresholds.
+     * - Omitted: treated as fallback (always matches).
+     *
+     * @see {@link ResponsiveBreakpoint}
+     */
+    responsive?: ResponsiveBreakpoint | boolean;
+    /** Column definitions for this layout. */
+    columns: ResponsiveLayoutTableColumn<T>[];
+    /**
+     * Whether to show the header row.
+     * @default true
+     */
+    showHeader?: boolean;
+    /** Per-layout className overrides for the header and body rows. */
+    classNames?: ResponsiveLayoutTableLayoutClassNames;
+}
+/**
+ * Top-level className overrides for the ResponsiveLayoutTable.
+ *
+ * @example
+ * ```tsx
+ * classNames={{
+ *   root: 'rounded-xl',
+ *   rowBackgroundInset:
+ *     'before:-left-comp-webcheckout-table-cells-p-hor before:-right-comp-webcheckout-table-cells-p-hor',
+ * }}
+ * ```
+ */
+export interface ResponsiveLayoutTableClassNames {
+    /** Outer wrapper `<div>`. */
+    root?: string;
+    /**
+     * Classes applied to each row's `::before` pseudo-element when
+     * `overflowingRowBackground` is `true`. Default is zero bleed
+     * (the background sits flush inside the row). Consumer passes any
+     * Tailwind classes with the `before:` prefix and can use `first:` /
+     * `last:` variants to extend the tint past the first / last row so it
+     * reaches the surrounding card's top / bottom padding.
+     *
+     * @example
+     * ```tsx
+     * classNames={{
+     *   rowBackgroundInset:
+     *     'before:-left-comp-webcheckout-table-cells-p-hor ' +
+     *     'before:-right-comp-webcheckout-table-cells-p-hor ' +
+     *     'first:before:-top-sm last:before:-bottom-sm',
+     * }}
+     * ```
+     */
+    rowBackgroundInset?: string;
+}
+/**
+ * Props for the ResponsiveLayoutTable component.
+ * @typeParam T - The type of data objects in each row. Must include an
+ *   `id: string | number` field so each row has a stable React key —
+ *   keying by index corrupts focus / selection / animation state when
+ *   rows reorder, filter, or paginate.
+ */
+export interface ResponsiveLayoutTableProps<T extends {
+    id: string | number;
+}> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+    /** Array of data objects where each item represents one table row. */
+    data: T[];
+    /**
+     * Array of layout configurations ordered from largest to smallest breakpoint.
+     * The first layout whose `responsive` matches wins. The last layout should
+     * omit `responsive` (fallback for smallest viewports).
+     *
+     * Uses the same pattern as ExpandableTable's column `responsive` prop:
+     * - Named breakpoint (`'xs'..'3xl'`): resolved internally via hooks.
+     * - Boolean: consumer controls it with their own `useMediaQuery()`.
+     *
+     * @example
+     * ```tsx
+     * layouts={[
+     *   { responsive: 'lg', columns: desktopColumns },
+     *   { responsive: 'md', columns: tabletColumns },
+     *   { showHeader: false, columns: phoneColumns },
+     * ]}
+     * ```
+     */
+    layouts: ResponsiveLayoutTableLayout<T>[];
+    /**
+     * Fires when a row is clicked. When provided and not `disabled`, rows become
+     * interactive: pointer cursor, keyboard-activatable, and a hover border.
+     */
+    onRowClick?: (rowData: T, rowIndex: number) => void;
+    /** Prevents interaction and applies muted text colors. @default false */
+    disabled?: boolean;
+    /**
+     * Predicate that marks a row as "new", applying the
+     * `bg-comp-responsive-layout-table-bg-success` tint. On interactive rows,
+     * hover and focus-visible backgrounds visually override the new-state tint.
+     */
+    isRowNew?: (rowData: T, rowIndex: number) => boolean;
+    /**
+     * Predicate that marks a row as loading. Each cell renders its column
+     * `skeleton` (or a default bar) instead of the normal content, and the row
+     * becomes non-interactive regardless of `onRowClick`. The `isRowNew` tint is
+     * also suppressed for loading rows.
+     *
+     * Use for initial load (an array of empty objects with the predicate always
+     * returning true) and for pagination (append placeholder rows after real
+     * data and detect them in the predicate).
+     */
+    isRowLoading?: (rowData: T, rowIndex: number) => boolean;
+    /**
+     * When `true`, row backgrounds (new/hover/focus) render via a `::before`
+     * pseudo-element sized to the row (zero bleed by default). The outer
+     * wrapper switches to `overflow: visible` in this mode — horizontal
+     * scrolling is disabled, so only use when your active layout fits the
+     * viewport (typically the phone layout).
+     *
+     * Pair with `classNames.rowBackgroundInset` to extend the tint past any
+     * edge — typically to bleed through the surrounding card's horizontal
+     * padding, and (via `first:` / `last:`) its top and bottom padding.
+     * @default false
+     */
+    overflowingRowBackground?: boolean;
+    /** className overrides for sub-elements. */
+    classNames?: ResponsiveLayoutTableClassNames;
+    /**
+     * Controls how column widths are calculated, mirroring the CSS
+     * `table-layout` property.
+     *
+     * - `'auto'` (default): Columns size based on their content. This is more
+     *   flexible. In case of overflow the content is scrollable.
+     * - `'fixed'`: Columns use fixed widths (from column definitions or equal
+     *   distribution). This is more predictable and performs better for large
+     *   datasets, but content may truncate.
+     *
+     * @default 'auto'
+     */
+    tableLayout?: 'auto' | 'fixed';
+}
+/**
+ * A responsive table that switches between completely different column layouts
+ * at configurable breakpoints. Each layout defines its own set of columns with
+ * independent headers and render functions, enabling compressed tablet views
+ * (stacked cells) and phone card layouts (single full-width column) — not just
+ * hidden columns.
+ *
+ * Supports named Tailwind breakpoints and arbitrary boolean values for custom
+ * thresholds. Rows become interactive when `onRowClick` is provided (pointer
+ * cursor, keyboard-activatable, hover border). Loading rows are driven by the
+ * `isRowLoading` predicate and render per-column `skeleton` placeholders.
+ *
+ * @typeParam T - The type of data objects in each row. Must include an
+ *   `id: string | number` field so rows receive a stable React key.
+ *
+ * @example
+ * ```tsx
+ * <ResponsiveLayoutTable
+ *   data={transactions}
+ *   layouts={[
+ *     { responsive: 'lg', columns: desktopColumns },
+ *     { responsive: 'md', columns: tabletColumns },
+ *     { showHeader: false, columns: phoneColumns },
+ *   ]}
+ *   onRowClick={(row) => navigate(`/transactions/${row.id}`)}
+ * />
+ * ```
+ */
+declare const ResponsiveLayoutTable: <T extends {
+    id: string | number;
+}>({ data, layouts, onRowClick, disabled, isRowNew, isRowLoading, overflowingRowBackground, classNames, tableLayout, ...props }: ResponsiveLayoutTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export { ResponsiveLayoutTable };
+//# sourceMappingURL=ResponsiveLayoutTable.d.ts.map

package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveLayoutTable.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveLayoutTable/ResponsiveLayoutTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.examples.d.ts

@@ -0,0 +1,39 @@
+import { ResponsiveLayoutTableColumn, ResponsiveLayoutTableLayout } from './ResponsiveLayoutTable';
+export interface Transaction {
+    id: string;
+    date: string;
+    time: string;
+    customer: string;
+    transactionCode: string;
+    status: 'warning' | 'success' | 'info' | 'error';
+    statusLabel: string;
+    amount: number;
+    originalAmount?: number;
+    isNew?: boolean;
+}
+export declare const formatKc: (value: number) => string;
+export declare const transactions: Transaction[];
+interface CellProps {
+    row: Transaction;
+    disabled?: boolean;
+}
+export declare const DateTimeCell: ({ row, disabled }: CellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTimeCellSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomerCell: ({ row, disabled }: CellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CustomerCellSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const TransactionCodeCell: ({ row, disabled }: CellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TransactionCodeCellSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const StatusCell: ({ row, disabled }: CellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StatusCellSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const AmountCell: ({ row, disabled, hideOriginalAmount, }: CellProps & {
+    hideOriginalAmount?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const AmountCellSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const ActionArrowCell: ({ row, disabled }: CellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionArrowCellSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const desktopColumns: ResponsiveLayoutTableColumn<Transaction>[];
+export declare const tabletColumns: ResponsiveLayoutTableColumn<Transaction>[];
+export declare const phoneColumns: ResponsiveLayoutTableColumn<Transaction>[];
+export declare const layouts: ResponsiveLayoutTableLayout<Transaction>[];
+export {};
+//# sourceMappingURL=ResponsiveLayoutTable.examples.d.ts.map

package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.examples.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveLayoutTable.examples.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveLayoutTable/ResponsiveLayoutTable.examples.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,2BAA2B,EAC3B,2BAA2B,EAC5B,MAAM,yBAAyB,CAAA;AAIhC,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,eAAe,EAAE,MAAM,CAAA;IACvB,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;IAChD,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAID,eAAO,MAAM,QAAQ,GAAI,OAAO,MAAM,WAC+B,CAAA;AAIrE,eAAO,MAAM,YAAY,EAAE,WAAW,EAkCrC,CAAA;AAID,UAAU,SAAS;IACjB,GAAG,EAAE,WAAW,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,YAAY,GAAI,mBAAmB,SAAS,4CAyBxD,CAAA;AAED,eAAO,MAAM,oBAAoB,+CAKhC,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,mBAAmB,SAAS,4CAaxD,CAAA;AAED,eAAO,MAAM,oBAAoB,+CAEhC,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,mBAAmB,SAAS,4CAwC/D,CAAA;AAED,eAAO,MAAM,2BAA2B,+CAKvC,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,mBAAmB,SAAS,4CAItD,CAAA;AAED,eAAO,MAAM,kBAAkB,+CAE9B,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,wCAIxB,SAAS,GAAG;IAAE,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAAE,4CAgC9C,CAAA;AAED,eAAO,MAAM,kBAAkB,+CAE9B,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,mBAAmB,SAAS,4CAmC3D,CAAA;AAED,eAAO,MAAM,uBAAuB,+CAKnC,CAAA;AAID,eAAO,MAAM,cAAc,EAAE,2BAA2B,CAAC,WAAW,CAAC,EAsDpE,CAAA;AAID,eAAO,MAAM,aAAa,EAAE,2BAA2B,CAAC,WAAW,CAAC,EAqEnE,CAAA;AAID,eAAO,MAAM,YAAY,EAAE,2BAA2B,CAAC,WAAW,CAAC,EA2BlE,CAAA;AAID,eAAO,MAAM,OAAO,EAAE,2BAA2B,CAAC,WAAW,CAAC,EAI7D,CAAA"}