cleanplate 0.3.11 → 0.3.13

package/dist/stories/table/table-arg-types.d.ts

@@ -0,0 +1,5 @@
+import type { ArgTypes } from "@storybook/types";
+/** Storybook argTypes override — docgen shows "union" for TableMobileColumns | null. */
+export declare const tableMobileColumnsArgType: ArgTypes[string];
+export declare const tableDocsArgTypes: ArgTypes;
+//# sourceMappingURL=table-arg-types.d.ts.map

package/dist/stories/table/table-arg-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-arg-types.d.ts","sourceRoot":"","sources":["../../../src/stories/table/table-arg-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAejD,wFAAwF;AACxF,eAAO,MAAM,yBAAyB,EAAE,QAAQ,CAAC,MAAM,CAWtD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,QAE/B,CAAC"}

package/docs/Modal.md

@@ -137,10 +137,10 @@ const App = () => {
 
 ## Behavior Notes
 
-- **Rendering:** When `isOpen` is false, the component returns `null` (nothing in the DOM).
+- **Rendering:** The modal mounts when `isOpen` is true and unmounts shortly after close so the exit transition can finish.
 - **Close:** onClose is called when the user clicks the X button (if showCloseButton), the overlay (if closeOnOverlayClick), or Escape (if closeOnEscape). Footer buttons do not auto-close; call onClose in their handlers if desired.
-- **Body scroll:** When open, `document.body.style.overflow` is set to `"hidden"`; restored on close.
-- **Focus:** On open, focus moves to the modal panel (ref + tabIndex={-1}); on close, focus returns to the previously focused element.
+- **Body scroll:** Body scroll is locked while open and restored when dismissed.
+- **Focus:** Focus is trapped while open and returned to the previously focused element on close.
 - **ARIA:** The overlay has `role="dialog"`, `aria-modal="true"`, and `aria-labelledby` pointing to the title when present.
 - **Spacing:** `margin` accepts a full class string (e.g. "m-0") or an array of spacing suffixes; the component uses `getSpacingClass` with prefix `m-`.
 

package/docs/Table.md

@@ -61,16 +61,29 @@ interface TableColumn {
 ```
 
 ### TableMobileColumns
+Extends static [MediaObject](./MediaObject.md) options (`margin`, `padding`, `descriptionLineClamp`, `className`, and other div attributes except `onClick`). Row-driven slots accept a **row key** or a **per-row resolver**.
+
 ```typescript
-interface TableMobileColumns {
-  title: string;           // row key for MediaObject title
-  description?: string;    // row key for description
-  mediaAvatar?: string;    // row key for avatar value
-  mediaIcon?: string;      // static icon name for all rows
-  mediaImage?: string;     // static image URL
-  className?: string;
-  margin?: TableMargin;
-  padding?: string | SpacingOption[];
+type TableMobileColumnKey = string;
+
+type TableMobileColumnField<T = React.ReactNode> =
+  | TableMobileColumnKey
+  | ((row: TableRow) => T | undefined);
+
+interface TableMobileColumns
+  extends Omit<
+    MediaObjectProps,
+    | "title" | "subtitle" | "description" | "meta" | "action"
+    | "mediaAvatar" | "mediaIcon" | "mediaImage" | "onClick"
+  > {
+  title: TableMobileColumnKey;              // required row key
+  subtitle?: TableMobileColumnField;
+  description?: TableMobileColumnField;
+  meta?: TableMobileColumnField;
+  mediaAvatar?: TableMobileColumnKey;
+  mediaIcon?: TableMobileColumnField<string>;  // static icon, row key, or resolver
+  mediaImage?: TableMobileColumnField<string>; // static URL, row key, or resolver
+  action?: (row: TableRow) => React.ReactNode;
 }
 ```
 
@@ -163,8 +176,12 @@ const columns = [
   data={data}
   mobileColumns={{
     title: "name",
+    subtitle: "role",
     description: "email",
-    mediaAvatar: "avatarUrl",
+    meta: "status",
+    mediaAvatar: "name",
+    descriptionLineClamp: 2,
+    action: (row) => <Badge label={String(row.status)} variant="success" />,
   }}
 />
 ```
@@ -183,7 +200,7 @@ const columns = [
 
 - **Required:** `columns` and `data` are required. Each column must have `id` and `title`; row keys should match `id` for default cell display.
 - **Pagination:** Built-in Pagination is shown when `totalItems` > 0 and `hidePagination` is false. Pass `onPageChange` and optionally `onRowsPerPageChange`; keep `currentPage` and `rowsPerPage` in parent state.
-- **Mobile:** When viewport width < 768px and `mobileColumns` is set, the table is replaced by a list of MediaObject items; `title` (and optionally `description`, `mediaAvatar`) are row keys whose values are passed to MediaObject.
+- **Mobile:** When viewport width < 768px and `mobileColumns` is set, each row renders as a `MediaObject`. Map row keys to `title`, `subtitle`, `description`, `meta`, and media fields, or use resolvers / `action` for custom per-row UI. Static MediaObject props (`descriptionLineClamp`, `margin`, `padding`, etc.) pass through unchanged.
 - **customRender:** Receives `(rowData, column)` and returns a React node; use for badges, buttons, or any custom cell content.
 - **Spacing:** `margin` uses the suffix API; the component adds the `m-` prefix via `getSpacingClass`.
 

package/llms.txt

@@ -152,7 +152,7 @@ All component documentation is located in the `docs/` folder. The following docu
 - File: `docs/Table.md`
 - Purpose: Displays structured data in a table with configurable columns, optional built-in pagination, and responsive mobile view (MediaObject cards when viewport < 768px and mobileColumns set).
 - Key Features: columns (id, title, textAlign, widthPercentage, customRender), data (TableRow[]), variants (default, compact), mobileColumns, onRowClick, pagination props (totalItems, currentPage, onPageChange, etc.), hidePagination, margin (suffix API)
-- Types: TableProps, TableColumn, TableRow, TableVariant, TableMargin, TableColumnTextAlign, TableMobileColumns, SpacingOption
+- Types: TableProps, TableColumn, TableRow, TableVariant, TableMargin, TableColumnTextAlign, TableMobileColumns, TableMobileColumnKey, TableMobileColumnField, SpacingOption
 - Related Components: Pagination (built-in), MediaObject (mobile view), Typography, Container, Badge (often in customRender)
 
 ### Badge Component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cleanplate",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "description": "CleanPlate - A Headless React UI Framework",
   "files": [
     "dist",