@handamade/psi-react 0.14.0 → 0.15.0

package/dist/manifest.json

@@ -5,6 +5,13 @@
       "description": "Action trigger. With `href` renders an anchor with identical styling (D33); `disabled` then maps to `aria-disabled`.",
       "slots": [],
       "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Label content."
+        },
         {
           "name": "variant",
           "type": "\"accent\" | \"accent-subtle\" | \"neutral\" | \"neutral-subtle\" | \"ghost\" | \"danger\" | \"danger-subtle\" | \"outline\"",
@@ -61,6 +68,13 @@
       "description": "Square icon-only button; same variant/size/href contract as Button. Give it an accessible name (`aria-label`).",
       "slots": [],
       "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "The icon element — an Icon* component."
+        },
         {
           "name": "aria-label",
           "type": "string",
@@ -124,6 +138,13 @@
       "description": "Content container with an optional edge-to-edge media slot; `stacked` (media above body) or `featured` (media beside body) layout.",
       "slots": [],
       "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Body content, beside or below the media slot."
+        },
         {
           "name": "variant",
           "type": "\"stacked\" | \"featured\"",
@@ -173,6 +194,13 @@
         }
       ],
       "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Panel contents."
+        },
         {
           "name": "padding",
           "type": "16 | 24",
@@ -212,6 +240,13 @@
         }
       ],
       "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "One DescriptionItem per field."
+        },
         {
           "name": "layout",
           "type": "\"stacked\" | \"inline\"",
@@ -247,6 +282,13 @@
       "description": "One term/value pair. The term is a prop and the value is children, matching Field's `label` idiom rather than inventing a two-slot shape. Renders `<div><dt/><dd/></div>`. The wrapper is the HTML5-sanctioned grouping element for a `<dl>`, so the `<dt>`/`<dd>` association assistive tech relies on is intact — and it keeps both layouts to one CSS rule each instead of fighting a single grid to space pairs differently from the term/value inside a pair.",
       "slots": [],
       "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "The value — renders the <dd>."
+        },
         {
           "name": "term",
           "type": "ReactNode",
@@ -324,6 +366,13 @@
       "description": "Styled native `<select>` with pixel-true heights (24–48) and an error state. Inside a Field, id/aria-describedby/aria-invalid/required are wired automatically (D49).",
       "slots": [],
       "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "The <option> elements."
+        },
         {
           "name": "size",
           "type": "24 | 32 | 40 | 48",
@@ -378,6 +427,13 @@
         }
       ],
       "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "The control this field labels."
+        },
         {
           "name": "label",
           "type": "ReactNode",
@@ -471,6 +527,13 @@
         }
       ],
       "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Body content, between the title and footer slots."
+        },
         {
           "name": "open",
           "type": "boolean",
@@ -660,6 +723,13 @@
         }
       ],
       "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "The controls."
+        },
         {
           "name": "gap",
           "type": "8 | 12 | 16",
@@ -758,6 +828,13 @@
       "description": "Fixed-aspect-ratio box that sizes its child media.",
       "slots": [],
       "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Content constrained to the ratio."
+        },
         {
           "name": "ratio",
           "type": "number",
@@ -843,6 +920,13 @@
           "default": null,
           "description": "Accessible name for the menu when there is no visible label."
         },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "MenuItem and MenuSeparator children."
+        },
         {
           "name": "className",
           "type": "string",
@@ -864,6 +948,13 @@
       "description": "One action in a Menu. Renders a real <button> so activation, Enter and Space come from the platform; the roving tabindex is applied by Menu's keyboard hook, which finds items via [data-psi-menu-item] (D53).",
       "slots": [],
       "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "Item label."
+        },
         {
           "name": "onSelect",
           "type": "() => void",
@@ -966,6 +1057,13 @@
           "default": null,
           "description": "Called with the next selection. See `onSortChange` on why it is optional."
         },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "TableHead and TableBody."
+        },
         {
           "name": "className",
           "type": "string",
@@ -987,6 +1085,13 @@
       "description": "`<thead>`. When the table is selectable, prepends the select-all cell to the FIRST header row so the header's column count matches the body's — the checkbox column is Table's, not the consumer's schema. Clones the row rather than rebuilding it, so the consumer's own props on that `TableRow` survive.",
       "slots": [],
       "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "The header TableRow."
+        },
         {
           "name": "className",
           "type": "string",
@@ -1001,6 +1106,13 @@
       "description": "`<tbody>` wrapper.",
       "slots": [],
       "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "The body TableRows."
+        },
         {
           "name": "className",
           "type": "string",
@@ -1029,6 +1141,13 @@
           "default": null,
           "description": "Accessible name for this row's selection checkbox."
         },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "The row's cells."
+        },
         {
           "name": "className",
           "type": "string",
@@ -1057,6 +1176,13 @@
           "default": null,
           "description": "Right-aligns and renders tabular figures (D62)."
         },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Header label."
+        },
         {
           "name": "className",
           "type": "string",
@@ -1078,6 +1204,13 @@
           "default": null,
           "description": "Right-aligns and renders tabular figures (D62)."
         },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Cell content."
+        },
         {
           "name": "className",
           "type": "string",
@@ -1462,5 +1595,33 @@
         }
       ]
     }
+  ],
+  "icons": [
+    "IconAlertCircle",
+    "IconAlertTriangle",
+    "IconArrowDown",
+    "IconArrowUpRight",
+    "IconCheck",
+    "IconChevronDown",
+    "IconChevronRight",
+    "IconClose",
+    "IconCopy",
+    "IconEdit",
+    "IconExternalLink",
+    "IconEye",
+    "IconEyeOff",
+    "IconGitHub",
+    "IconInfo",
+    "IconInstagram",
+    "IconLinkedIn",
+    "IconLoader",
+    "IconMinus",
+    "IconMoreHorizontal",
+    "IconPlus",
+    "IconSearch",
+    "IconSettings",
+    "IconTrash",
+    "IconUser",
+    "IconX"
   ]
 }

package/dist/patterns.json

@@ -477,11 +477,15 @@
               "component": "Input",
               "props": {
                 "type": "search",
+                "aria-label": "{content:search-label}",
                 "placeholder": "{content:search-placeholder}"
               }
             },
             {
-              "component": "Select"
+              "component": "Select",
+              "props": {
+                "aria-label": "{content:select-label}"
+              }
             },
             {
               "component": "Tag",
@@ -492,12 +496,14 @@
       },
       "parameters": [],
       "content": {
+        "search-label": "Search transactions",
         "search-placeholder": "Search transactions",
+        "select-label": "Category",
         "example-filter": "[active filter]"
       },
       "gaps": [],
       "blocked": false,
-      "preset": "<Toolbar>\n  <Input placeholder=\"Search transactions\" type=\"search\" />\n  <Select />\n  <Tag>[active filter]</Tag>\n</Toolbar>\n"
+      "preset": "<Toolbar>\n  <Input aria-label=\"Search transactions\" placeholder=\"Search transactions\" type=\"search\" />\n  <Select aria-label=\"Category\" />\n  <Tag>[active filter]</Tag>\n</Toolbar>\n"
     },
     {
       "id": "row-actions",

package/docs/AspectRatio.md

@@ -7,6 +7,7 @@ Fixed-aspect-ratio box that sizes its child media.
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
+| `children` | `ReactNode` | — | no | Content constrained to the ratio. |
 | `ratio` | `number` | — | yes | Width/height ratio, e.g. 16/10 or 4/5. |
 | `ref` | `Ref<HTMLDivElement>` | — | no | Forwarded ref to the frame element. |
 | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |

package/docs/Button.md

@@ -7,6 +7,7 @@ Action trigger. With `href` renders an anchor with identical styling (D33); `dis
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
+| `children` | `ReactNode` | — | no | Label content. |
 | `variant` | `"accent" \| "accent-subtle" \| "neutral" \| "neutral-subtle" \| "ghost" \| "danger" \| "danger-subtle" \| "outline"` | neutral | no | Visual variant. |
 | `size` | `24 \| 32 \| 40 \| 48` | 32 | no | Height in px (24 \| 32 \| 40 \| 48). |
 | `href` | `string` | — | no | Render as an anchor with this href (D33). disabled → aria-disabled, no href attribute, pointer-events: none. |

package/docs/Card.md

@@ -7,6 +7,7 @@ Content container with an optional edge-to-edge media slot; `stacked` (media abo
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
+| `children` | `ReactNode` | — | no | Body content, beside or below the media slot. |
 | `variant` | `"stacked" \| "featured"` | stacked | no | stacked = media above body; featured = media beside body (~1.6fr/1fr), stacks under md. |
 | `media` | `ReactNode` | — | no | Media slot rendered edge-to-edge (img, AspectRatio, …). |
 | `hoverLift` | `boolean` | false | no | Lift on hover: translateY(-6px) over --psi-duration-350. |

package/docs/DescriptionItem.md

@@ -7,6 +7,7 @@ One term/value pair. The term is a prop and the value is children, matching Fiel
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
+| `children` | `ReactNode` | — | no | The value — renders the <dd>. |
 | `term` | `ReactNode` | — | yes | The term — renders the `<dt>`. |
 | `ref` | `Ref<HTMLDivElement>` | — | no | Forwarded ref to the group wrapper. |
 | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |

package/docs/DescriptionList.md

@@ -7,6 +7,7 @@ Key/value display (D70): a `<dl>` of term/value pairs, the body `detail-drawer`
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
+| `children` | `ReactNode` | — | no | One DescriptionItem per field. |
 | `layout` | `"stacked" \| "inline"` | stacked | no | `stacked` puts the term above its value; `inline` puts them in a two-column grid, which is what a detail drawer wants. |
 | `gap` | `8 \| 12 \| 16` | 12 | no | Gap between pairs, in px. |
 | `ref` | `Ref<HTMLDListElement>` | — | no | Forwarded ref to the root element. |

package/docs/Dialog.md

@@ -7,6 +7,7 @@ Modal dialog on the native <dialog> top layer: focus trap, aria-modal and focus
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
+| `children` | `ReactNode` | — | no | Body content, between the title and footer slots. |
 | `open` | `boolean` | — | yes | Controlled open state; syncs to showModal()/close(). |
 | `onClose` | `(reason: "esc" \| "backdrop" \| "close-button") => void` | — | yes | Called on every dismissal attempt with its source; the consumer flips `open`. |
 | `title` | `ReactNode` | — | no | Heading; renders an <h2> wired to aria-labelledby. Without it, pass aria-label. |

package/docs/Field.md

@@ -7,6 +7,7 @@ Labeled form-row wrapper: label above, control, one message line below — descr
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
+| `children` | `ReactNode` | — | no | The control this field labels. |
 | `label` | `ReactNode` | — | no | Label content; renders a <label> (or <legend> in group mode). |
 | `description` | `ReactNode` | — | no | Helper line under the control; replaced by error when error is set. |
 | `error` | `ReactNode` | — | no | Error content; when truthy it replaces the description and switches the field (and a wrapped Input/Select) into error state. |

package/docs/IconButton.md

@@ -7,6 +7,7 @@ Square icon-only button; same variant/size/href contract as Button. Give it an a
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
+| `children` | `ReactNode` | — | no | The icon element — an Icon* component. |
 | `aria-label` | `string` | — | yes | Accessible name for the icon-only control. Required: an IconButton has no text to name it, so omitting this ships an unnameable button (D60). If you also pass `aria-labelledby`, that wins per the accname algorithm. |
 | `variant` | `"accent" \| "neutral" \| "ghost" \| "danger"` | neutral | no | Visual variant. |
 | `size` | `24 \| 32 \| 40 \| 48` | 32 | no | Square size in px (24 \| 32 \| 40 \| 48). |

package/docs/Menu.md

@@ -12,6 +12,7 @@ Action menu on the native Popover API top layer: the top layer and light dismiss
 | `trigger` | `ReactElement<Record<string, unknown>, string \| JSXElementConstructor<any>>` | — | yes | The trigger element. Must be a single React element that spreads unknown props onto a focusable node (a Psi `Button`, say): Menu clones it to add `aria-haspopup="menu"` and `aria-expanded`, so assistive tech associates the menu with the control users actually focus. |
 | `placement` | `"bottom-start" \| "bottom-end" \| "top-start" \| "top-end"` | bottom-start | no | Placement relative to the trigger. |
 | `aria-label` | `string` | — | no | Accessible name for the menu when there is no visible label. |
+| `children` | `ReactNode` | — | yes | MenuItem and MenuSeparator children. |
 | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
 | `ref` | `Ref<HTMLDivElement>` | — | no | Forwarded ref to the popover element. |
 

package/docs/MenuItem.md

@@ -7,6 +7,7 @@ One action in a Menu. Renders a real <button> so activation, Enter and Space com
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
+| `children` | `ReactNode` | — | yes | Item label. |
 | `onSelect` | `() => void` | — | yes | Fires on activation; Menu then reports the dismissal via onClose("item-select") (D50). |
 | `variant` | `"neutral" \| "danger"` | neutral | no | danger is for destructive actions only (house rule). |
 | `disabled` | `boolean` | false | no |  |

package/docs/Panel.md

@@ -7,6 +7,7 @@ Elevated surface panel (D51): secondary background, faint hairline, radius-12
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
+| `children` | `ReactNode` | — | no | Panel contents. |
 | `padding` | `16 \| 24` | 24 | no | Inner padding in px. |
 | `ref` | `Ref<HTMLDivElement>` | — | no | Forwarded ref to the root element. |
 | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |

package/docs/Select.md

@@ -7,6 +7,7 @@ Styled native `<select>` with pixel-true heights (24–48) and an error state. I
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
+| `children` | `ReactNode` | — | no | The <option> elements. |
 | `size` | `24 \| 32 \| 40 \| 48` | 32 | no | Height in px (24 \| 32 \| 40 \| 48). Replaces the native `size` attribute (which sets the visible option-row count on a listbox-style `<select>`) with the design system's control height in pixels. |
 | `error` | `boolean` | false | no | Show error styling. Inside a Field, the Field's error also lights this. |
 | `ref` | `Ref<HTMLSelectElement>` | — | no | Forwarded ref to the underlying `<select>` element. |

package/docs/Table.md

@@ -15,6 +15,7 @@ Data table on native table semantics. Holds no state: sorting, selection and pag
 | `selectable` | `boolean` | false | no | Renders the row-selection checkbox column. |
 | `selected` | `ReadonlySet<string>` | new Set<string>() | no | Controlled selection, keyed by each `TableRow`'s `rowId`. |
 | `onSelectionChange` | `((selected: ReadonlySet<string>) => void)` | — | no | Called with the next selection. See `onSortChange` on why it is optional. |
+| `children` | `ReactNode` | — | yes | TableHead and TableBody. |
 | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
 | `ref` | `Ref<HTMLTableElement>` | — | no | Forwarded ref to the underlying `<table>` element. |
 

package/docs/TableBody.md

@@ -7,6 +7,7 @@
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
+| `children` | `ReactNode` | — | yes | The body TableRows. |
 | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
 
 ## Theming

package/docs/TableCell.md

@@ -8,6 +8,7 @@
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
 | `numeric` | `boolean` | — | no | Right-aligns and renders tabular figures (D62). |
+| `children` | `ReactNode` | — | no | Cell content. |
 | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
 
 ## Theming

package/docs/TableHead.md

@@ -7,6 +7,7 @@
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
+| `children` | `ReactNode` | — | yes | The header TableRow. |
 | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
 
 ## Theming

package/docs/TableHeaderCell.md

@@ -9,6 +9,7 @@
 |---|---|---|---|---|
 | `sortKey` | `string` | — | no | Sort key this column emits. Enables the sort control when the table is `sortable`. |
 | `numeric` | `boolean` | — | no | Right-aligns and renders tabular figures (D62). |
+| `children` | `ReactNode` | — | no | Header label. |
 | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
 
 ## Theming

package/docs/TableRow.md

@@ -9,6 +9,7 @@
 |---|---|---|---|---|
 | `rowId` | `string` | — | no | Stable identity for selection. Required for selectable tables (D62). |
 | `selectLabel` | `string` | — | no | Accessible name for this row's selection checkbox. |
+| `children` | `ReactNode` | — | yes | The row's cells. |
 | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
 
 ## Theming

package/docs/Toolbar.md

@@ -7,6 +7,7 @@ Horizontal grouping row for filter/search controls (D52). Wraps on overflow; zer
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
+| `children` | `ReactNode` | — | no | The controls. |
 | `gap` | `8 \| 12 \| 16` | 8 | no | Gap between controls in px. |
 | `ref` | `Ref<HTMLDivElement>` | — | no | Forwarded ref to the root element. |
 | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handamade/psi-react",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -46,7 +46,7 @@
     "tsx": "^4.22.4",
     "vite": "^6.0.0",
     "vitest": "^3.2.6",
-    "@handamade/psi-tokens": "0.14.0"
+    "@handamade/psi-tokens": "0.15.0"
   },
   "scripts": {
     "build": "vite build && tsc -p tsconfig.build.json && tsx scripts/emit-styles-dts.ts && tsx scripts/emit-manifest.ts && tsx scripts/emit-patterns.ts && tsx scripts/emit-docs.ts",