@kb.ui/react 0.11.0 → 0.12.1

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 (81) hide show
  1. package/README.md +79 -66
  2. package/dist/components/ConfirmAction/ConfirmAction.d.ts +42 -0
  3. package/dist/components/Dashboard/Dashboard.d.ts +17 -0
  4. package/dist/components/Form/Form.d.ts +19 -0
  5. package/dist/components/FormSection/FormSection.d.ts +26 -0
  6. package/dist/components/Gallery/Gallery.d.ts +26 -0
  7. package/dist/components/PageHeader/PageHeader.d.ts +27 -0
  8. package/dist/components/Panel/Panel.d.ts +3 -1
  9. package/dist/components/Settings/Settings.d.ts +11 -0
  10. package/dist/components/Skeleton/Skeleton.d.ts +8 -6
  11. package/dist/components/Stack/Stack.d.ts +15 -0
  12. package/dist/components/StatsRow/StatsRow.d.ts +33 -0
  13. package/dist/components/SupportingPane/SupportingPane.d.ts +15 -0
  14. package/dist/index.d.ts +10 -0
  15. package/dist/index.js +718 -333
  16. package/dist/index.js.map +1 -1
  17. package/dist/styles.css +1 -1
  18. package/docs/components/Accordion.md +9 -9
  19. package/docs/components/Avatar.md +4 -4
  20. package/docs/components/Badge.md +4 -4
  21. package/docs/components/Button.md +8 -8
  22. package/docs/components/Callout.md +3 -3
  23. package/docs/components/Card.md +4 -4
  24. package/docs/components/Checkbox.md +5 -5
  25. package/docs/components/Code.md +2 -2
  26. package/docs/components/CodeBlock.md +7 -7
  27. package/docs/components/Collection.md +5 -5
  28. package/docs/components/CollectionList.md +6 -6
  29. package/docs/components/CollectionRow.md +11 -11
  30. package/docs/components/Combobox.md +3 -3
  31. package/docs/components/ConfirmAction.md +100 -0
  32. package/docs/components/Container.md +2 -2
  33. package/docs/components/CopyableText.md +9 -9
  34. package/docs/components/Dashboard.md +81 -0
  35. package/docs/components/DescriptionList.md +3 -3
  36. package/docs/components/Dialog.md +7 -7
  37. package/docs/components/Disclosure.md +4 -4
  38. package/docs/components/EmptyState.md +1 -1
  39. package/docs/components/ErrorSummary.md +5 -3
  40. package/docs/components/Fieldset.md +6 -6
  41. package/docs/components/FileInput.md +5 -5
  42. package/docs/components/Form.md +67 -0
  43. package/docs/components/FormActions.md +3 -3
  44. package/docs/components/FormSection.md +57 -0
  45. package/docs/components/Gallery.md +84 -0
  46. package/docs/components/Grid.md +13 -13
  47. package/docs/components/Heading.md +3 -3
  48. package/docs/components/Image.md +3 -3
  49. package/docs/components/Inline.md +3 -3
  50. package/docs/components/Input.md +3 -3
  51. package/docs/components/Link.md +2 -2
  52. package/docs/components/Menu.md +5 -5
  53. package/docs/components/MultiSelect.md +2 -2
  54. package/docs/components/NumberField.md +5 -5
  55. package/docs/components/PageHeader.md +68 -0
  56. package/docs/components/Panel.md +11 -3
  57. package/docs/components/Popover.md +9 -9
  58. package/docs/components/Progress.md +1 -1
  59. package/docs/components/RadioGroup.md +3 -3
  60. package/docs/components/ScrollArea.md +1 -1
  61. package/docs/components/Select.md +2 -2
  62. package/docs/components/Separator.md +3 -3
  63. package/docs/components/Settings.md +57 -0
  64. package/docs/components/Skeleton.md +56 -16
  65. package/docs/components/Spinner.md +9 -4
  66. package/docs/components/Split.md +4 -4
  67. package/docs/components/Stack.md +54 -0
  68. package/docs/components/Stat.md +1 -1
  69. package/docs/components/StatsRow.md +80 -0
  70. package/docs/components/Status.md +7 -6
  71. package/docs/components/SupportingPane.md +59 -0
  72. package/docs/components/Switch.md +5 -5
  73. package/docs/components/Table.md +12 -12
  74. package/docs/components/Tabs.md +10 -10
  75. package/docs/components/Text.md +2 -2
  76. package/docs/components/Textarea.md +4 -4
  77. package/docs/components/Thumbnail.md +7 -7
  78. package/docs/components/Toast.md +9 -9
  79. package/docs/components/Toolbar.md +4 -4
  80. package/docs/components/Tooltip.md +3 -3
  81. package/package.json +1 -1
@@ -1,6 +1,6 @@
1
1
  # Toast
2
2
 
3
- Use Toast for temporary feedback about background work. One provider owns the message list, timers and focus. Keep essential results available in the page or a notification history.
3
+ Use `Toast` for temporary feedback about background work. One provider owns the message list, timers and focus. Keep essential results available in the page or a notification history.
4
4
 
5
5
  [All components](../../README.md#components) · [Usage](#usage) · [Examples](#more-examples) · [Reference](#reference) · [Live examples and accessibility](https://kbui.kcb.pro/storybook/?path=/docs/components-toast--docs)
6
6
 
@@ -69,9 +69,9 @@ F6 moves focus into the viewport without notifications interrupting the current
69
69
  | `placement` | `ToastPlacement` | `bottom-end` | Four logical corners or `inline` |
70
70
  | `container` | `HTMLElement` or ref | `document.body` | Portal host for fixed placements; unused for inline |
71
71
  | `aria-label` | `string` | `Notifications` | Localize and distinguish the notification region |
72
- | `renderToast` | `(toast: ToastObject<Data>) => ReactNode` | complete Toast | Custom renderer; give each returned root `key={toast.id}` |
72
+ | `renderToast` | `(toast: ToastObject<Data>) => ReactNode` | complete `Toast` | Custom renderer; give each returned root `key={toast.id}` |
73
73
  | `children` | `ReactNode` | managed messages | Explicit children replace automatic rendering |
74
- | `className`, `ref`, DOM props | native div props | unset | Reach the viewport; Base UI `render` composition is supported |
74
+ | `className`, `ref`, DOM props | native `div` props | unset | Reach the viewport; Base UI `render` composition is supported |
75
75
 
76
76
  ### Toast and parts
77
77
 
@@ -86,7 +86,7 @@ F6 moves focus into the viewport without notifications interrupting the current
86
86
  | `Toast.Content` | content wrapper | div | Groups message content |
87
87
  | `Toast.Title` | heading | message title | Supplies the root accessible name |
88
88
  | `Toast.Description` | paragraph | message description | Supplies the root accessible description |
89
- | `Toast.Action` | button | message actionProps | Does not close automatically; explicitly call close or update |
89
+ | `Toast.Action` | button | message `actionProps` | Does not close automatically; explicitly call close or update |
90
90
  | `Toast.Close` | button | caller children | Dismisses its message; supply visible text or an accessible name |
91
91
  | `className`, `ref`, DOM props | part element props | unset | Every part supports a plain class string, ref and Base UI render composition |
92
92
 
@@ -107,17 +107,17 @@ Custom children own their own slot classes and close control. For a link action,
107
107
  | `priority` | `low` or `high` | Low is polite; high uses a separate urgent alert announcement |
108
108
  | `timeout` | `number` | Per-message duration; `0` disables automatic dismissal |
109
109
  | `id` | `string` | Optional stable key for upsert |
110
- | `actionProps` | native button props | Includes action text, handler, disabled state and accessible name |
110
+ | `actionProps` | native `button` props | Includes action text, handler, disabled state and accessible name |
111
111
  | `onClose`, `onRemove` | `() => void` | Close intent and final removal after exit transition |
112
- | `data` | caller-defined object | Typed custom data for renderToast |
112
+ | `data` | caller-defined object | Typed custom data for `renderToast` |
113
113
 
114
114
  Promise options accept `loading`, `success` and `error` as text or update options; success/error also accept functions of the result/error. Handle rejected returned promises in application code. `ToastObject`, `ToastManager`, `ToastAddOptions`, `ToastUpdateOptions`, `ToastPromiseOptions`, component prop types, `ToastTone` and `ToastPlacement` are public exports.
115
115
 
116
- Base UI owns interaction and lifecycle semantics; see its [Toast reference](https://base-ui.com/react/components/toast). CSS-only consumers must implement queueing, announcements, timing and focus themselves. Component tokens use the `--kb-toast-*` namespace; importing a standalone `toast.css` also requires tokens and reset.
116
+ Base UI owns interaction and lifecycle semantics; see its [`Toast` reference](https://base-ui.com/react/components/toast). CSS-only consumers must implement queueing, announcements, timing and focus themselves. Component tokens use the `--kb-toast-*` namespace; importing a standalone `toast.css` also requires tokens and reset.
117
117
 
118
118
  ## Motion
119
119
 
120
- Messages enter with a short slide and soft scale settle; dismissal fades and collapses the space before removal. Stack spacing opens as a new message enters, and swipe dismissal continues in the gesture direction. Reduced motion removes transitions and geometric movement.
120
+ Messages enter with a short slide and soft scale settle; dismissal fades and collapses the space before removal. `Stack` spacing opens as a new message enters, and swipe dismissal continues in the gesture direction. Reduced motion removes transitions and geometric movement.
121
121
 
122
122
  Tune `--kb-toast-motion-duration`, `--kb-toast-exit-duration`, `--kb-toast-motion-easing`, `--kb-toast-enter-offset` and `--kb-toast-enter-scale` to match the application. Keep exits brief so notifications do not obstruct work.
123
123
 
@@ -127,4 +127,4 @@ Component tests cover lifecycle, announcements in the DOM, provider isolation, c
127
127
 
128
128
  ## Related components
129
129
 
130
- Use [Status](Status.md) for state beside its content, [Callout](Callout.md) for an inline message with fuller context, and [Dialog](Dialog.md) when a decision must interrupt work.
130
+ Use [`Status`](Status.md) for state beside its content, [`Callout`](Callout.md) for an inline message with fuller context, and [`Dialog`](Dialog.md) when a decision must interrupt work.
@@ -27,13 +27,13 @@ export function Example() {
27
27
 
28
28
  | Part | Props and responsibility |
29
29
  | ------------------- | ------------------------------------------------------------------------------- |
30
- | `Toolbar` | Root; name with aria-label; Base UI orientation controls the keyboard direction |
30
+ | `Toolbar` | Root; name with `aria-label`; Base UI orientation controls the keyboard direction |
31
31
  | `Toolbar.Group` | Groups related controls inside the toolbar |
32
- | `Toolbar.Button` | Action; variant accepts Button variants and defaults to ghost |
32
+ | `Toolbar.Button` | Action; variant accepts `Button` variants and defaults to ghost |
33
33
  | `Toolbar.Separator` | Visual division between groups |
34
34
 
35
- Tab enters the toolbar once; arrow keys move between its controls. Give icon-only actions their own accessible names. Use Checkbox or RadioGroup when a control represents a persistent choice rather than an action.
35
+ Tab enters the toolbar once; arrow keys move between its controls. Give icon-only actions their own accessible names. Use `Checkbox` or `RadioGroup` when a control represents a persistent choice rather than an action.
36
36
 
37
37
  ## Related components
38
38
 
39
- Use [Inline](Inline.md) for independent controls that should each retain their normal Tab stop, and [Menu](Menu.md) for a compact action list.
39
+ Use [`Inline`](Inline.md) for independent controls that should each retain their normal Tab stop, and [`Menu`](Menu.md) for a compact action list.
@@ -22,7 +22,7 @@ export function Example() {
22
22
  ## More examples
23
23
 
24
24
  - [An optional description](https://kbui.kcb.pro/storybook/?path=/story/components-tooltip--on-hover): Try pointer and keyboard access to a named trigger.
25
- - [A themed hint](https://kbui.kcb.pro/storybook/?path=/story/components-tooltip--nested-theme): Keep a portaled hint within its intended theme.
25
+ - [A themed hint](https://kbui.kcb.pro/storybook/?path=/story/components-tooltip--nested-theme): Check that the hint uses its parent theme.
26
26
 
27
27
  ## Reference
28
28
 
@@ -35,8 +35,8 @@ export function Example() {
35
35
  | `container` | portal container | document body | Use a themed host when the popup belongs to a nested theme |
36
36
  | `className` | `string` | unset | Class on the popup |
37
37
 
38
- Give icon-only triggers their own aria-label. The tooltip is a description, not a replacement for the control's name. Do not put links, buttons, or required instructions in the popup.
38
+ Give icon-only triggers their own `aria-label`. The tooltip is a description, not a replacement for the control's name. Do not put links, buttons, or required instructions in the popup.
39
39
 
40
40
  ## Related components
41
41
 
42
- Use [Input](Input.md) descriptions for essential field instructions and [Callout](Callout.md) for a persistent message.
42
+ Use [`Input`](Input.md) descriptions for essential field instructions and [`Callout`](Callout.md) for a persistent message.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kb.ui/react",
3
- "version": "0.11.0",
3
+ "version": "0.12.1",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "repository": {