@handamade/psi-react 0.13.1 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/README.md +5 -2
  2. package/dist/DescriptionList/DescriptionItem.d.ts +17 -0
  3. package/dist/DescriptionList/DescriptionItem.d.ts.map +1 -0
  4. package/dist/DescriptionList/DescriptionList.d.ts +17 -0
  5. package/dist/DescriptionList/DescriptionList.d.ts.map +1 -0
  6. package/dist/icons/IconMoreHorizontal.d.ts +10 -0
  7. package/dist/icons/IconMoreHorizontal.d.ts.map +1 -0
  8. package/dist/icons/index.d.ts +1 -0
  9. package/dist/icons/index.d.ts.map +1 -1
  10. package/dist/index.d.ts +4 -0
  11. package/dist/index.d.ts.map +1 -1
  12. package/dist/index.js +592 -558
  13. package/dist/manifest.json +74 -0
  14. package/dist/patterns.json +40 -9
  15. package/dist/styles.css +1 -1
  16. package/docs/AspectRatio.md +1 -0
  17. package/docs/Button.md +1 -0
  18. package/docs/Card.md +1 -0
  19. package/docs/Checkbox.md +1 -0
  20. package/docs/DescriptionItem.md +30 -0
  21. package/docs/DescriptionList.md +31 -0
  22. package/docs/Dialog.md +1 -0
  23. package/docs/Field.md +1 -0
  24. package/docs/IconButton.md +1 -0
  25. package/docs/Input.md +1 -0
  26. package/docs/Menu.md +1 -0
  27. package/docs/MenuItem.md +1 -0
  28. package/docs/MenuSeparator.md +1 -0
  29. package/docs/NavBar.md +1 -0
  30. package/docs/Pagination.md +1 -0
  31. package/docs/Panel.md +1 -0
  32. package/docs/Select.md +1 -0
  33. package/docs/Switch.md +1 -0
  34. package/docs/Tab.md +1 -0
  35. package/docs/TabList.md +1 -0
  36. package/docs/TabPanel.md +1 -0
  37. package/docs/Table.md +1 -0
  38. package/docs/TableBody.md +1 -0
  39. package/docs/TableCell.md +1 -0
  40. package/docs/TableHead.md +1 -0
  41. package/docs/TableHeaderCell.md +1 -0
  42. package/docs/TableRow.md +1 -0
  43. package/docs/Tabs.md +1 -0
  44. package/docs/Tag.md +1 -0
  45. package/docs/Toast.md +1 -0
  46. package/docs/ToastProvider.md +1 -0
  47. package/docs/ToastRegion.md +1 -0
  48. package/docs/Toolbar.md +1 -0
  49. package/docs/Tooltip.md +1 -0
  50. package/llms.txt +8 -3
  51. package/package.json +2 -2
@@ -36,4 +36,5 @@ This component has no `--psi-toast-provider-*` tokens — its styling binds scal
36
36
  - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
37
37
  - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
38
38
  - Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
39
+ - Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination ("Rows per page" visible, so Field).
39
40
  - Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.
@@ -36,4 +36,5 @@ This component has no `--psi-toast-region-*` tokens — its styling binds scale
36
36
  - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
37
37
  - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
38
38
  - Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
39
+ - Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination ("Rows per page" visible, so Field).
39
40
  - Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.
package/docs/Toolbar.md CHANGED
@@ -34,4 +34,5 @@ This component has no `--psi-toolbar-*` tokens — its styling binds scale token
34
34
  - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
35
35
  - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
36
36
  - Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
37
+ - Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination ("Rows per page" visible, so Field).
37
38
  - Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.
package/docs/Tooltip.md CHANGED
@@ -35,4 +35,5 @@ Override `--psi-tooltip-*` custom properties at any scope.
35
35
  - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
36
36
  - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
37
37
  - Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
38
+ - Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination ("Rows per page" visible, so Field).
38
39
  - Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.
package/llms.txt CHANGED
@@ -1,6 +1,6 @@
1
1
  # @handamade/psi-react
2
2
 
3
- 32 React 19 components consuming @handamade/psi-tokens. Zero runtime deps, CSS Modules, ref-as-prop.
3
+ 34 React 19 components consuming @handamade/psi-tokens. Zero runtime deps, CSS Modules, ref-as-prop.
4
4
 
5
5
  ## Machine-readable artifacts
6
6
  - dist/manifest.json: full component/prop inventory with types and defaults
@@ -27,6 +27,11 @@
27
27
  ## Panel
28
28
  - <Panel padding={16|24}>: the elevated surface panel (D51) — bg-secondary, faint hairline border, radius-12, space-24 padding (16 for compact). Binds the shared --psi-surface-* recipe Dialog's panel also uses; brands retune both by overriding --psi-surface-*. Not a Card: no media slot, no hover lift.
29
29
 
30
+ ## DescriptionList (2)
31
+ - `<DescriptionList layout="stacked|inline" gap={8|12|16}>` with one `<DescriptionItem term="Date">value</DescriptionItem>` per field (D70). Renders `<dl>`; each item is a `<div><dt/><dd/></div>` group, which is the HTML5 grouping element, so the term/value association survives.
32
+ - `stacked` (default) puts the term above its value; `inline` is a two-column grid and is what a detail drawer wants. This is the body of the `detail-drawer` pattern — do not hand-roll a `<dl>`.
33
+ - The term is a prop and the value is children, matching Field's `label` idiom. No `size` prop: this is type, so restyle through `--psi-description-list-*`.
34
+
30
35
  ## Toolbar
31
36
  - <Toolbar gap={8|12|16} aria-label="Filters">: horizontal wrapping row for filter/search controls (Input, Select, Tag, Button). Wraps on overflow (D52); with aria-label it announces as role=group. Deliberately not ARIA role=toolbar (no roving tabindex). Unblocks the filter-toolbar pattern — consult dist/patterns.json for the preset.
32
37
 
@@ -36,8 +41,8 @@
36
41
  ## AspectRatio
37
42
  - <AspectRatio ratio={16/10}>{children}</AspectRatio>: a frame div with CSS aspect-ratio set from the numeric ratio prop — wrap images/media to reserve layout space before load. Combine with the .psi-media-tint utility for the brand media-tint treatment.
38
43
 
39
- ## Icons (25)
40
- - Full icon set: IconPlus, IconMinus, IconCheck, IconClose, IconChevronDown, IconChevronRight, IconSearch, IconSettings, IconUser, IconEye, IconEyeOff, IconEdit, IconCopy, IconTrash, IconLoader, IconExternalLink, plus D36 additions — arrows IconArrowDown and IconArrowUpRight, and social glyphs IconLinkedIn, IconGitHub, IconX, IconInstagram — plus the D64 status glyphs IconInfo, IconAlertTriangle and IconAlertCircle.
44
+ ## Icons (26)
45
+ - Full icon set: IconPlus, IconMinus, IconCheck, IconClose, IconChevronDown, IconChevronRight, IconSearch, IconSettings, IconUser, IconEye, IconEyeOff, IconEdit, IconCopy, IconTrash, IconLoader, IconExternalLink, plus D36 additions — arrows IconArrowDown and IconArrowUpRight, and social glyphs IconLinkedIn, IconGitHub, IconX, IconInstagram — plus the D64 status glyphs IconInfo, IconAlertTriangle and IconAlertCircle, and the D70 IconMoreHorizontal — the ellipsis glyph for a row-actions trigger.
41
46
 
42
47
  ## Table family (6)
43
48
  - `<Table>` renders `<table>` and is **controlled-only** — it holds no state (D62). Sorting is `sort={{key, direction}}` + `onSortChange`; selection is `selected` (a `ReadonlySet<string>` keyed by each `<TableRow rowId>`) + `onSelectionChange`. `sortable` and `selectable` only enable the affordances. `size` is `32 | 40 | 48` px (default 40) and `stickyHeader` pins the header. It does no filtering, sorting or slicing of rows — the consumer does that.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@handamade/psi-react",
3
- "version": "0.13.1",
3
+ "version": "0.14.0",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -46,7 +46,7 @@
46
46
  "tsx": "^4.22.4",
47
47
  "vite": "^6.0.0",
48
48
  "vitest": "^3.2.6",
49
- "@handamade/psi-tokens": "0.13.1"
49
+ "@handamade/psi-tokens": "0.14.0"
50
50
  },
51
51
  "scripts": {
52
52
  "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",