cleanplate 0.3.10 → 0.3.12

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/PageHeader.md

@@ -90,12 +90,14 @@ import { PageHeader, Button } from "cleanplate";
 ### Custom title (ReactNode)
 
 ```jsx
+import { PageHeader, Button, Container, Icon } from "cleanplate";
+
 <PageHeader
   title={
-    <span style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-      <span>📋</span>
-      Custom title
-    </span>
+    <Container display="flex" align="center" gap="2" padding="0" margin="m-0">
+      <Icon name="assignment" size="medium" />
+      Custom title with icon
+    </Container>
   }
   subtitle="Optional subtitle"
   primaryCta={<Button>Action</Button>}
@@ -121,14 +123,15 @@ import { PageHeader, Button } from "cleanplate";
 ## Behavior Notes
 
 - **Layout:** Root is a `<header>`. Flex row: left (title + subtitle), right (CTA + more trigger). Right column uses margin-left: auto for right alignment.
-- **Title / subtitle:** If string, rendered with Typography (h4 / p). If ReactNode, rendered in a div with the same layout class.
-- **More menu:** When moreMenuItems is set, renders a Dropdown with an icon Button (more_vert) and a list; each item onClick runs and the dropdown closes. When moreMenuContent is set, that content is shown in the dropdown. Use one or the other.
-- **Accessibility:** More trigger has aria-expanded and aria-haspopup; list uses role="menu" and role="menuitem".
+- **Title / subtitle:** Always rendered with Typography (`h4` / `p`); strings and custom ReactNode children share the same heading styles and semantics.
+- **More menu:** When moreMenuItems is set, renders a Dropdown with an icon Button (more_vert) and MenuList; each item onClick runs and the dropdown closes. When moreMenuContent is set, that content is shown in the dropdown. Use one or the other.
+- **Accessibility:** More trigger has aria-expanded, aria-haspopup, and aria-label; menu items use MenuList semantics.
 
 ## Related Components / Links
 
 - Button (typically for primaryCta)
 - Typography (used internally for string title and subtitle)
 - Dropdown (used internally for the more menu)
+- MenuList (used internally for moreMenuItems)
 - Icon (more_vert trigger)
 - Container (wrap PageHeader and page content)

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.10",
+  "version": "0.3.12",
   "description": "CleanPlate - A Headless React UI Framework",
   "files": [
     "dist",