@sableui/react 0.13.2 → 0.15.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 (203) hide show
  1. package/AGENTS.md +2 -2
  2. package/CHANGELOG.md +172 -0
  3. package/CONTRIBUTING.md +6 -4
  4. package/DESIGN.md +10 -3
  5. package/dist/blocks/approval-block.js +93 -0
  6. package/dist/blocks/approval-block.meta.js +23 -0
  7. package/dist/blocks/index.d.ts +27 -1
  8. package/dist/blocks/index.js +8 -0
  9. package/dist/blocks/message-reactions-block.js +87 -0
  10. package/dist/blocks/message-reactions-block.meta.js +23 -0
  11. package/dist/components/accordion/accordion.meta.js +8 -2
  12. package/dist/components/area-chart/area-chart.meta.js +10 -3
  13. package/dist/components/attachment/attachment.meta.js +26 -0
  14. package/dist/components/bar-chart/bar-chart.meta.js +11 -4
  15. package/dist/components/bottom-nav/bottom-nav.js +3 -1
  16. package/dist/components/bottom-nav/bottom-nav.meta.js +32 -0
  17. package/dist/components/breadcrumbs/breadcrumbs.meta.js +26 -0
  18. package/dist/components/bubble/bubble.js +105 -5
  19. package/dist/components/bubble/bubble.meta.js +42 -6
  20. package/dist/components/bubble/bubble.variants.js +1 -1
  21. package/dist/components/bubble/index.js +2 -0
  22. package/dist/components/button/button.js +21 -4
  23. package/dist/components/button/button.meta.js +7 -7
  24. package/dist/components/calendar/calendar.js +18 -1
  25. package/dist/components/calendar/calendar.meta.js +38 -0
  26. package/dist/components/carousel/carousel.js +6 -4
  27. package/dist/components/carousel/carousel.meta.js +42 -0
  28. package/dist/components/chat-composer/chat-composer.js +21 -21
  29. package/dist/components/chat-composer/chat-composer.meta.js +38 -0
  30. package/dist/components/chat-composer/use-eased-growth.js +70 -0
  31. package/dist/components/checkbox/checkbox-mark.js +8 -1
  32. package/dist/components/checkbox/checkbox.js +3 -1
  33. package/dist/components/checkbox/checkbox.meta.js +32 -0
  34. package/dist/components/checkbox-card/checkbox-card.js +3 -0
  35. package/dist/components/checkbox-card/checkbox-card.meta.js +32 -0
  36. package/dist/components/code-block/code-block.js +14 -3
  37. package/dist/components/code-block/code-block.meta.js +28 -1
  38. package/dist/components/collapsible/collapsible.meta.js +32 -0
  39. package/dist/components/color-field/color-field.meta.js +26 -0
  40. package/dist/components/combobox/combobox.meta.js +44 -0
  41. package/dist/components/command-menu/command-menu.js +8 -3
  42. package/dist/components/command-menu/command-menu.meta.js +38 -0
  43. package/dist/components/confirm-button/confirm-button.js +179 -0
  44. package/dist/components/confirm-button/confirm-button.meta.js +143 -0
  45. package/dist/components/confirm-button/index.js +7 -0
  46. package/dist/components/data-table/data-table.js +6 -2
  47. package/dist/components/data-table/data-table.meta.js +32 -0
  48. package/dist/components/entity/entity.meta.js +26 -0
  49. package/dist/components/feedback/feedback.js +120 -47
  50. package/dist/components/feedback/feedback.meta.js +55 -4
  51. package/dist/components/input-group/input-group.meta.js +27 -1
  52. package/dist/components/like-button/index.js +7 -0
  53. package/dist/components/like-button/like-button.js +89 -0
  54. package/dist/components/like-button/like-button.meta.js +132 -0
  55. package/dist/components/line-chart/line-chart.meta.js +10 -3
  56. package/dist/components/middle-truncate/middle-truncate.meta.js +1 -1
  57. package/dist/components/note/note.meta.js +32 -0
  58. package/dist/components/notification-badge/notification-badge.js +17 -5
  59. package/dist/components/notification-badge/notification-badge.meta.js +34 -2
  60. package/dist/components/number-ticker/index.js +7 -0
  61. package/dist/components/number-ticker/number-ticker.js +246 -0
  62. package/dist/components/number-ticker/number-ticker.meta.js +159 -0
  63. package/dist/components/otp-field/otp-field.js +23 -3
  64. package/dist/components/otp-field/otp-field.meta.js +23 -2
  65. package/dist/components/panel-group/panel-group.meta.js +26 -0
  66. package/dist/components/panel-section/panel-section.js +37 -10
  67. package/dist/components/panel-section/panel-section.meta.js +32 -0
  68. package/dist/components/pie-chart/pie-chart.js +20 -11
  69. package/dist/components/pie-chart/pie-chart.meta.js +17 -4
  70. package/dist/components/pill/pill.meta.js +32 -0
  71. package/dist/components/radar-chart/radar-chart.js +4 -3
  72. package/dist/components/radar-chart/radar-chart.meta.js +10 -3
  73. package/dist/components/radial-chart/radial-chart.js +22 -22
  74. package/dist/components/radial-chart/radial-chart.meta.js +17 -4
  75. package/dist/components/radio/radio.meta.js +26 -0
  76. package/dist/components/radio-card/radio-card.meta.js +38 -0
  77. package/dist/components/reaction-picker/index.js +13 -0
  78. package/dist/components/reaction-picker/reaction-picker.js +104 -0
  79. package/dist/components/reaction-picker/reaction-picker.meta.js +156 -0
  80. package/dist/components/relative-time/relative-time.meta.js +32 -0
  81. package/dist/components/scroller/scroller.meta.js +32 -0
  82. package/dist/components/scrub-field/scrub-field.meta.js +32 -0
  83. package/dist/components/search-input/search-input.js +9 -7
  84. package/dist/components/search-input/search-input.meta.js +26 -0
  85. package/dist/components/show-more/show-more.js +1 -4
  86. package/dist/components/show-more/show-more.meta.js +38 -0
  87. package/dist/components/side-nav/side-nav.js +21 -1
  88. package/dist/components/side-nav/side-nav.meta.js +32 -0
  89. package/dist/components/side-nav/side-nav.variants.js +3 -1
  90. package/dist/components/sidebar/sidebar.js +31 -8
  91. package/dist/components/sidebar/sidebar.meta.js +38 -0
  92. package/dist/components/slider/slider.meta.js +26 -0
  93. package/dist/components/sparkline/sparkline.js +7 -4
  94. package/dist/components/sparkline/sparkline.meta.js +9 -2
  95. package/dist/components/table/table.meta.js +26 -0
  96. package/dist/components/tabs/tabs.js +27 -8
  97. package/dist/components/tabs/tabs.meta.js +46 -3
  98. package/dist/components/theme-selector/theme-selector.meta.js +32 -0
  99. package/dist/components/theme-switcher/theme-switcher.js +4 -1
  100. package/dist/components/theme-switcher/theme-switcher.meta.js +42 -0
  101. package/dist/components/toast/toast.js +25 -13
  102. package/dist/components/toast/toast.meta.js +7 -1
  103. package/dist/components/toggle/toggle.js +28 -5
  104. package/dist/components/toggle/toggle.meta.js +44 -2
  105. package/dist/components/tool-call/index.js +8 -0
  106. package/dist/components/tool-call/tool-call.js +117 -0
  107. package/dist/components/tool-call/tool-call.meta.js +147 -0
  108. package/dist/components/tool-call/tool-call.variants.js +33 -0
  109. package/dist/components/tooltip/index.js +3 -1
  110. package/dist/components/tooltip/tooltip.js +84 -0
  111. package/dist/components/tooltip/tooltip.meta.js +16 -1
  112. package/dist/components/tree/tree.js +71 -6
  113. package/dist/components/tree/tree.meta.js +32 -0
  114. package/dist/components/video/video.meta.js +32 -0
  115. package/dist/file-hashes.json +130 -104
  116. package/dist/foundations/motion.js +69 -3
  117. package/dist/icon-sets/reicon.js +11 -1
  118. package/dist/index.d.ts +907 -104
  119. package/dist/index.js +6 -1
  120. package/dist/lib/chart/cartesian.js +9 -10
  121. package/dist/lib/chart/chart-center.js +30 -0
  122. package/dist/lib/chart/chart-frame.js +15 -8
  123. package/dist/lib/chart/dim.js +13 -0
  124. package/dist/lib/chart/format.js +7 -1
  125. package/dist/lib/chart/motion.js +6 -4
  126. package/dist/lib/highlight-glide.js +68 -10
  127. package/dist/lib/taxonomy.js +5 -0
  128. package/dist/motion/Burst.js +79 -0
  129. package/dist/motion/MotionProvider.js +45 -3
  130. package/dist/motion/Reveal.js +1 -1
  131. package/dist/motion/TextReveal.js +1 -1
  132. package/dist/motion/index.js +17 -2
  133. package/dist/motion/useAutoSize.js +42 -0
  134. package/dist/motion/useShake.js +25 -0
  135. package/dist/styles.css +439 -5
  136. package/llms/blocks/approval-block.md +128 -0
  137. package/llms/blocks/message-reactions-block.md +116 -0
  138. package/llms/components/accordion.md +3 -2
  139. package/llms/components/area-chart.md +4 -3
  140. package/llms/components/attachment.md +7 -0
  141. package/llms/components/bar-chart.md +5 -4
  142. package/llms/components/bottom-nav.md +8 -0
  143. package/llms/components/breadcrumbs.md +7 -0
  144. package/llms/components/bubble.md +17 -7
  145. package/llms/components/button.md +6 -6
  146. package/llms/components/calendar.md +9 -0
  147. package/llms/components/carousel.md +17 -0
  148. package/llms/components/chat-composer.md +9 -0
  149. package/llms/components/checkbox-card.md +8 -0
  150. package/llms/components/checkbox.md +8 -0
  151. package/llms/components/code-block.md +8 -0
  152. package/llms/components/collapsible.md +8 -0
  153. package/llms/components/color-field.md +7 -0
  154. package/llms/components/combobox.md +10 -0
  155. package/llms/components/command-menu.md +9 -0
  156. package/llms/components/confirm-button.md +92 -0
  157. package/llms/components/data-table.md +8 -0
  158. package/llms/components/entity.md +7 -0
  159. package/llms/components/feedback.md +23 -3
  160. package/llms/components/input-group.md +8 -1
  161. package/llms/components/like-button.md +91 -0
  162. package/llms/components/line-chart.md +4 -3
  163. package/llms/components/middle-truncate.md +1 -1
  164. package/llms/components/note.md +8 -0
  165. package/llms/components/notification-badge.md +10 -2
  166. package/llms/components/number-ticker.md +86 -0
  167. package/llms/components/otp-field.md +15 -1
  168. package/llms/components/panel-group.md +7 -0
  169. package/llms/components/panel-section.md +8 -0
  170. package/llms/components/pie-chart.md +6 -4
  171. package/llms/components/pill.md +8 -0
  172. package/llms/components/radar-chart.md +4 -3
  173. package/llms/components/radial-chart.md +6 -4
  174. package/llms/components/radio-card.md +9 -0
  175. package/llms/components/radio.md +7 -0
  176. package/llms/components/reaction-picker.md +115 -0
  177. package/llms/components/relative-time.md +8 -0
  178. package/llms/components/scroller.md +8 -0
  179. package/llms/components/scrub-field.md +8 -0
  180. package/llms/components/search-input.md +7 -0
  181. package/llms/components/show-more.md +9 -0
  182. package/llms/components/side-nav.md +8 -0
  183. package/llms/components/sidebar.md +9 -0
  184. package/llms/components/slider.md +7 -0
  185. package/llms/components/sparkline.md +3 -2
  186. package/llms/components/table.md +7 -0
  187. package/llms/components/tabs.md +20 -2
  188. package/llms/components/theme-selector.md +8 -0
  189. package/llms/components/theme-switcher.md +17 -0
  190. package/llms/components/toast.md +2 -1
  191. package/llms/components/toggle.md +19 -2
  192. package/llms/components/tool-call.md +115 -0
  193. package/llms/components/tooltip.md +11 -1
  194. package/llms/components/tree.md +8 -0
  195. package/llms/components/video.md +8 -0
  196. package/llms/foundations/motion.md +64 -3
  197. package/llms/reference/utilities.md +26 -1
  198. package/llms/tasks/reviewing-motion.md +14 -0
  199. package/llms-full.txt +1337 -69
  200. package/llms.txt +19 -11
  201. package/package.json +1 -1
  202. package/registry.json +3040 -124
  203. package/targets/ios.json +45 -0
package/llms.txt CHANGED
@@ -1,6 +1,6 @@
1
1
  # Sable (@sableui/react)
2
2
 
3
- > An owned, themeable React component system. Default theme: **Sable** (dark-by-default, content-first, fluid product UI). Behavior from Base UI; styling via Tailwind v4 + semantic CSS-variable tokens; Reicon icons via a pluggable adapter. 116 components, 13 layout primitives, and a **patterns** tier of canonical page shells. The full, per-component contract is the generated `registry.json`.
3
+ > An owned, themeable React component system. Default theme: **Sable** (dark-by-default, content-first, fluid product UI). Behavior from Base UI; styling via Tailwind v4 + semantic CSS-variable tokens; Reicon icons via a pluggable adapter. 121 components, 13 layout primitives, and a **patterns** tier of canonical page shells. The full, per-component contract is the generated `registry.json`.
4
4
 
5
5
  ## Start here — brief, composition, evidence
6
6
 
@@ -273,7 +273,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
273
273
  - **Spacing & sizing** — Baseline from the type · 8px steps · 3 roles · 1 control ladder. One scale, derived from the type: the baseline is one line of body text, split into steps every gap, inset and line height lands on. → [`llms/foundations/spacing.md`](./llms/foundations/spacing.md)
274
274
  - **Shape** — 7 radius steps · concentric nesting · 1 edge treatment per boundary. Radius signals what something is: tight on containers, full on actions. → [`llms/foundations/shape.md`](./llms/foundations/shape.md)
275
275
  - **Surfaces & elevation** — 4 surface tokens · 5 elevation roles · 1 shadow per surface · 1 layer scale. Depth is a step up the surface ladder, chosen by how transient a surface is. → [`llms/foundations/surfaces.md`](./llms/foundations/surfaces.md)
276
- - **Motion** — 4 slots · 3 speeds · enter-only overshoot · 1 kill switch. Motion explains a change: where something came from, what responded, and that work is happening. → [`llms/foundations/motion.md`](./llms/foundations/motion.md)
276
+ - **Motion** — 4 slots · 3 speeds · 2 levels · enter-only overshoot · 1 kill switch. Motion explains a change: where something came from, what responded, and that work is happening. → [`llms/foundations/motion.md`](./llms/foundations/motion.md)
277
277
  - **Scrolling** — 2 policies · vertical gets a bar · horizontal gets a fade. Every scroll container declares a policy. → [`llms/foundations/scrolling.md`](./llms/foundations/scrolling.md)
278
278
  - **Accessibility** — WCAG AA · 44px targets · visible focus · reduced motion · logical properties. Sable's components ship accessible behavior from Base UI. → [`llms/foundations/accessibility.md`](./llms/foundations/accessibility.md)
279
279
 
@@ -288,9 +288,10 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
288
288
  - **ListDetailPage** — Searchable list beside the selected record's detail: interactive Entity rows in a CardList (5 of 12 columns) and a sticky detail pane (7) with an editable field, a label/value list, record actions with a destructive confirmation, and recent activity. → [`llms/patterns/list-detail-page.md`](./llms/patterns/list-detail-page.md)
289
289
  - **SettingsPage** — Account settings inside the app shell: a sticky SideNav section rail beside a column of section Cards — a Profile form with the page's one explicit save, Card + CardList + Entity rows with Switches that apply instantly, a read-only payouts summary, account rows, and a delete card confirmed through DestructiveActionModal. → [`llms/patterns/settings-page.md`](./llms/patterns/settings-page.md)
290
290
 
291
- ### Blocks (40) — section-sized compositions (cards, forms, lists), copy as starting points (registry.json → blocks; importable from `@sableui/react/blocks`; `sable block <Name>`)
291
+ ### Blocks (42) — section-sized compositions (cards, forms, lists), copy as starting points (registry.json → blocks; importable from `@sableui/react/blocks`; `sable block <Name>`)
292
292
 
293
293
  - **ApiKeysBlock** (Settings & team) — An API keys card: each key's name with its masked hint in Code, when it was created and last used, and an OverflowMenu to rename, roll or revoke. → [`llms/blocks/api-keys-block.md`](./llms/blocks/api-keys-block.md)
294
+ - **ApprovalBlock** (AI & agents) — An agent asking permission for one tool call: the question, what will happen and what can't be undone, the call's details, an "allow for the rest of this chat" Checkbox, and Deny / Allow. → [`llms/blocks/approval-block.md`](./llms/blocks/approval-block.md)
294
295
  - **ChatThreadBlock** (Social & messaging) — A short message thread on a card: Message rows with incoming muted Bubbles on the start side and your own primary Bubbles on the end. → [`llms/blocks/chat-thread-block.md`](./llms/blocks/chat-thread-block.md)
295
296
  - **CommandPaletteBlock** (Navigation) — An inline command palette: CommandMenuPanel with a filter field and grouped actions, each with an icon and its keyboard shortcut. → [`llms/blocks/command-palette-block.md`](./llms/blocks/command-palette-block.md)
296
297
  - **CtaBandBlock** (Marketing) — A closing call to action: a centred h2 and one-line lede on a card, with a primary and an outline action. → [`llms/blocks/cta-band-block.md`](./llms/blocks/cta-band-block.md)
@@ -306,6 +307,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
306
307
  - **InvoiceHistoryBlock** (Commerce) — A billing history card: a flush Table of date, plan, amount and status per invoice, with a download button on each row. → [`llms/blocks/invoice-history-block.md`](./llms/blocks/invoice-history-block.md)
307
308
  - **KpiSparklineBlock** (Dashboard) — A KPI row with trends: three stat cards, each the value in the metric mono tier, a Sparkline of its last twelve weeks, and the change as a Badge. → [`llms/blocks/kpi-sparkline-block.md`](./llms/blocks/kpi-sparkline-block.md)
308
309
  - **MediaPlayerBlock** (Media & files) — A now-playing card: cover, title and artist as an Entity with a Like action, a position Slider with elapsed and remaining time, and previous / play-pause / next. → [`llms/blocks/media-player-block.md`](./llms/blocks/media-player-block.md)
310
+ - **MessageReactionsBlock** (Social & messaging) — A short thread you can react to: right-click or long-press a bubble for a menu with a row of quick reactions above Reply and Copy, or use the add-reaction pill under a message. → [`llms/blocks/message-reactions-block.md`](./llms/blocks/message-reactions-block.md)
309
311
  - **NewsletterBlock** (Marketing) — A newsletter sign-up card: the list's name, what it sends and how often, and an email field with Subscribe. → [`llms/blocks/newsletter-block.md`](./llms/blocks/newsletter-block.md)
310
312
  - **NotFoundBlock** (System) — A not-found page body: the status code in mono, a plain-language h1, what probably happened, and two ways on — home and search. → [`llms/blocks/not-found-block.md`](./llms/blocks/not-found-block.md)
311
313
  - **NotificationListBlock** (Social & messaging) — An activity list: Entity rows with the actor's Avatar, who did what, and a compact time with an unread StatusDot. → [`llms/blocks/notification-list-block.md`](./llms/blocks/notification-list-block.md)
@@ -347,7 +349,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
347
349
  - **SafeArea** — Pads for device safe-areas (notch, home indicator) on fixed or native-shell surfaces. → [`llms/layout/safe-area.md`](./llms/layout/safe-area.md)
348
350
  - **GridOverlay** — Dev/docs structure visualizer — overlays the column grid so the layout skeleton is legible. → [`llms/layout/grid-overlay.md`](./llms/layout/grid-overlay.md)
349
351
 
350
- ### Utilities (65) — relative surfaces, frames, state variants, scroll policies, chrome type, motion recipes; reach for these before hand-written CSS (registry.json → utilities; `sable utility <name>`) → [`llms/reference/utilities.md`](./llms/reference/utilities.md)
352
+ ### Utilities (72) — relative surfaces, frames, state variants, scroll policies, chrome type, motion recipes; reach for these before hand-written CSS (registry.json → utilities; `sable utility <name>`) → [`llms/reference/utilities.md`](./llms/reference/utilities.md)
351
353
 
352
354
  - **relative surface** — `sable-surface`, `sable-surface-muted`, `sable-surface-popover`, `sable-surface-accent`, `sable-surface-interactive`, `sable-well`
353
355
  - **frame** — `sable-frame`, `sable-frame-popover`, `sable-frame-tool`, `sable-frame-borderless`, `sable-frame-r-*`, `sable-frame-p-*`, `sable-frame-inner`
@@ -355,22 +357,23 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
355
357
  - **state variant** — `sable-highlighted:`, `sable-selected:`, `sable-open:`, `sable-disabled:`, `sable-invalid:`
356
358
  - **scroll** — `scrollbar-quiet`, `scrollbar-hidden`
357
359
  - **text** — `sable-list`, `sable-list-numbered`, `sable-list-dl`, `sable-list-dl-2`, `text-overline`, `text-ui-md`, `text-ui-sm`, `text-ui-body`, `text-ui-section`, `text-ui-micro`, `text-ui-num`, `stream-tail`
358
- - **motion** — `motion-interactive`, `motion-press`, `motion-fade`, `motion-pop`, `motion-slide-up`, `motion-slide-down`, `motion-slide-left`, `motion-slide-right`, `motion-disclosure`, `motion-icon-swap`, `motion-spin`, `motion-orbit`, `motion-pulse`, `motion-shimmer`, `motion-text-shimmer`, `motion-dot-bounce`, `motion-ping`, `animate-fade-in`, `animate-fade-up`, `animate-fade-down`, `motion-stream-in`, `motion-caret`, `motion-reveal`, `motion-draw`
360
+ - **motion** — `motion-interactive`, `motion-press`, `motion-fade`, `motion-pop`, `motion-slide-up`, `motion-slide-down`, `motion-slide-left`, `motion-slide-right`, `motion-disclosure`, `motion-icon-swap`, `motion-glide`, `motion-shake`, `motion-tick`, `motion-appear`, `motion-arrive`, `motion-bloom`, `motion-size`, `motion-spin`, `motion-orbit`, `motion-pulse`, `motion-shimmer`, `motion-text-shimmer`, `motion-dot-bounce`, `motion-ping`, `animate-fade-in`, `animate-fade-up`, `animate-fade-down`, `motion-stream-in`, `motion-caret`, `motion-reveal`, `motion-draw`
359
361
  - **helper** — `hit-target`, `reveal-on-hover`, `stretched-link`, `link-underline`, `checkerboard`
360
362
  - **elsewhere** — paired `text-*` page tiers: registry.json → tokens.typography (also `sable utility text-heading-1`).
361
363
 
362
- ### Providers (8) — app-level context: where each goes, whether it is required, props, examples (registry.json → providers; `sable provider <Name>`)
364
+ ### Providers (9) — app-level context: where each goes, whether it is required, props, examples (registry.json → providers; `sable provider <Name>`)
363
365
 
364
366
  - **CodeHighlightProvider** (part of CodeBlock) — Supplies one highlighter to every CodeBlock beneath it, so an app wires highlighting once.
365
367
  - **DensityProvider** — The bare React context behind density.
366
368
  - **IconProvider** — Supplies the icon set every <Icon> renders with, including the icons inside Sable's own components.
367
- - **MotionProvider** — Holds the app's motion policy and writes it as `data-motion` on <html>, which drives the `--motion-scale` switch every Sable motion recipe reads.
369
+ - **MotionProvider** — Holds the app's motion policy and writes it as `data-motion` on <html>, which drives the `--motion-scale` and `--motion-expressive` switches every Sable motion recipe reads.
370
+ - **MotionScope** — Turns motion down for one region — a dense data view, an embedded widget, a screen a test captures — by writing `data-motion` on a box-less wrapper and passing the same level to useMotion() below it.
368
371
  - **PresentationProvider** — Declares what its subtree is presented in, a page or a sheet.
369
372
  - **SableThemeProvider** — Applies and persists Sable's two theme axes on <html>: the colour preference (light, dark or system, written as the `.dark` class) and the design theme (written as `data-sable-theme`).
370
373
  - **ToastProvider** (part of Toast) — Wraps Base UI Toast.Provider and renders the themed Viewport + toast list.
371
374
  - **TooltipProvider** (part of Tooltip) — Wraps an app or group of Tooltips to share open/close delays.
372
375
 
373
- ### Components (116) — full props/subcomponents/variants/guidance/a11y/examples in registry.json → components
376
+ ### Components (121) — full props/subcomponents/variants/guidance/a11y/examples in registry.json → components
374
377
 
375
378
  - **Accordion** — Stacked, collapsible disclosure sections over Base UI Accordion — roving focus, arrow-key navigation, ARIA region/heading/button wiring, and an animated height transition. *Parts:* AccordionItem, AccordionTrigger, AccordionPanel. → [`llms/components/accordion.md`](./llms/components/accordion.md)
376
379
  - **AppHeader** — Mobile top bar (sticky, hidden at lg) with leading / title / actions slots on a 3-column grid that keeps the title optically centered. → [`llms/components/app-header.md`](./llms/components/app-header.md)
@@ -384,7 +387,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
384
387
  - **BottomNav** — Mobile bottom tab bar (fixed, hidden at lg), with home-indicator safe-area padding and evenly distributed BottomNavItem tabs. *Parts:* BottomNavItem. → [`llms/components/bottom-nav.md`](./llms/components/bottom-nav.md)
385
388
  - **Breadcrumbs** — Navigation trail showing the path to the current page. *Parts:* BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator. → [`llms/components/breadcrumbs.md`](./llms/components/breadcrumbs.md)
386
389
  - **Browser** — A generic, current browser window: one compact toolbar (window controls, back/forward/reload, a centered address field) around page content. → [`llms/components/browser.md`](./llms/components/browser.md)
387
- - **Bubble** — The surface a message's content sits on: four treatments, an align-aware tail, a readable measure cap, and an optional row of reaction pills. *Parts:* BubbleReactions, BubbleReaction. → [`llms/components/bubble.md`](./llms/components/bubble.md)
390
+ - **Bubble** — The surface a message's content sits on: four treatments, an align-aware tail, a readable measure cap, and an optional row of reaction pills. *Parts:* BubbleReactions, BubbleReaction, BubbleReactionAdd. → [`llms/components/bubble.md`](./llms/components/bubble.md)
388
391
  - **Button** — Pill-shaped action primitive (theme-driven radius via --button-radius, defaults to full). → [`llms/components/button.md`](./llms/components/button.md)
389
392
  - **ButtonGroup** — Buttons joined into one control: a split button (an action beside the chevron that opens its menu) or a short run of related actions. → [`llms/components/button-group.md`](./llms/components/button-group.md)
390
393
  - **Calendar** — Date picker grid wrapping react-day-picker v9, themed entirely with semantic tokens (no external stylesheet). → [`llms/components/calendar.md`](./llms/components/calendar.md)
@@ -400,6 +403,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
400
403
  - **ColorField** — A colour swatch that opens a themed picker — saturation/value area, hue and alpha sliders, hex entry, presets, and transparent as a value rather than a separate toggle. → [`llms/components/color-field.md`](./llms/components/color-field.md)
401
404
  - **Combobox** — Autocomplete over Base UI Combobox — type-to-filter, roving focus, ARIA combobox/listbox wiring, collision-aware positioning, Esc/outside dismissal. *Parts:* ComboboxInput, ComboboxChips, ComboboxContent, ComboboxList, ComboboxVirtualList, ComboboxItem, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel. → [`llms/components/combobox.md`](./llms/components/combobox.md)
402
405
  - **CommandMenu** — A command palette (Cmd+K) built on our Dialog: a top-aligned wide surface with a search input and a scrollable, JS-filtered list of grouped commands. *Parts:* CommandMenuTrigger, useCommandMenuShortcut, CommandMenuPanel, CommandMenuGroup, CommandMenuItem. → [`llms/components/command-menu.md`](./llms/components/command-menu.md)
406
+ - **ConfirmButton** — An inline two-step confirm for a low-stakes destructive or irreversible action: the first press arms it ("Delete" → "Confirm delete?", destructive), a second press within a few seconds runs it, and leaving it disarms it. → [`llms/components/confirm-button.md`](./llms/components/confirm-button.md)
403
407
  - **ContextCard** — Hover/focus-triggered rich preview card over Base UI PreviewCard. *Parts:* ContextCardTrigger, ContextCardContent, ContextCardArrow. → [`llms/components/context-card.md`](./llms/components/context-card.md)
404
408
  - **ContextMenu** — Right-click menu over Base UI ContextMenu — opens on the native contextmenu event or long press and positions at the pointer. *Parts:* ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuGroup, ContextMenuGroupLabel. → [`llms/components/context-menu.md`](./llms/components/context-menu.md)
405
409
  - **DataTable** — A data-driven table over the Table primitives — a columns def + data array with built-in client-side sorting (click a sortable header to cycle asc → desc → none), optional row click / selection, and an empty state. → [`llms/components/data-table.md`](./llms/components/data-table.md)
@@ -422,6 +426,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
422
426
  - **InputGroup** — An Input with addons inside the same field: a prefix or suffix ("https://", ".com", "$"), an icon, or a borderless Button such as copy or reveal. → [`llms/components/input-group.md`](./llms/components/input-group.md)
423
427
  - **Kbd** — A keyboard key indicator. → [`llms/components/kbd.md`](./llms/components/kbd.md)
424
428
  - **Label** — Styled native <label>. → [`llms/components/label.md`](./llms/components/label.md)
429
+ - **LikeButton** — A pressed-or-not toggle for a like, a star or a save, with its count. → [`llms/components/like-button.md`](./llms/components/like-button.md)
425
430
  - **LineChart** — **BETA.** Lines over a sequence — for comparing how measures move. → [`llms/components/line-chart.md`](./llms/components/line-chart.md)
426
431
  - **Marker** — A non-message row in a conversation: streaming status, system note, bordered notice, or a labelled rule for date breaks. → [`llms/components/marker.md`](./llms/components/marker.md)
427
432
  - **Marquee** — Seamless, constant-speed infinite loop (logos, tags, testimonials). → [`llms/components/marquee.md`](./llms/components/marquee.md)
@@ -437,6 +442,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
437
442
  - **Note** — Callout / admonition box. → [`llms/components/note.md`](./llms/components/note.md)
438
443
  - **NotificationBadge** — An unread indicator. → [`llms/components/notification-badge.md`](./llms/components/notification-badge.md)
439
444
  - **NumberField** — Numeric input with decrement/increment steppers over Base UI NumberField — keyboard arrows, scroll, scrub-to-change, min/max clamping, locale formatting, and form integration. → [`llms/components/number-field.md`](./llms/components/number-field.md)
445
+ - **NumberTicker** — A number that rolls to its new value digit by digit, like an odometer. → [`llms/components/number-ticker.md`](./llms/components/number-ticker.md)
440
446
  - **OtpField** — One-time-code entry over Base UI's OTP Field — one slot per character, SMS autofill on the first slot, paste fills every slot, and only one tab stop for the whole code. → [`llms/components/otp-field.md`](./llms/components/otp-field.md)
441
447
  - **OverflowMenu** — An overflow ellipsis icon button that opens a Menu. → [`llms/components/overflow-menu.md`](./llms/components/overflow-menu.md)
442
448
  - **PageHeader** — In-flow page heading block: a title row (optional back control + actions) over an optional description, with room for children (filters, tabs) below. → [`llms/components/page-header.md`](./llms/components/page-header.md)
@@ -453,6 +459,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
453
459
  - **RadialChart** — **BETA.** Progress or share as rings: one ring per row against a muted track, a full circle or a gauge (`sweep`), one ring split between rows (`stacked`), ring labels and a value in the middle. → [`llms/components/radial-chart.md`](./llms/components/radial-chart.md)
454
460
  - **Radio** — Single-select control over Base UI RadioGroup + Radio (roving focus, arrow-key nav, ARIA radiogroup wiring, form integration). *Parts:* RadioGroup. → [`llms/components/radio.md`](./llms/components/radio.md)
455
461
  - **RadioCard** — A selectable card option (radio-card) over Base UI RadioGroup + Radio. *Parts:* RadioGroup. → [`llms/components/radio-card.md`](./llms/components/radio-card.md)
462
+ - **ReactionPicker** — The quick row of emoji you react to a message with: a toolbar of large emoji toggles that bloom in one after another as it opens and magnify under the pointer, with MenuReactions as the same row inside a right-click menu. *Parts:* MenuReactions. → [`llms/components/reaction-picker.md`](./llms/components/reaction-picker.md)
456
463
  - **RelativeTime** — A human relative timestamp (e.g. → [`llms/components/relative-time.md`](./llms/components/relative-time.md)
457
464
  - **Scroller** — Scroll container that fades its leading/trailing edges when content overflows. → [`llms/components/scroller.md`](./llms/components/scroller.md)
458
465
  - **ScrubField** — The compact numeric field a property grid is built from: a leading glyph inside the field that doubles as a drag-to-scrub handle, the value, and an optional unit. → [`llms/components/scrub-field.md`](./llms/components/scrub-field.md)
@@ -476,7 +483,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
476
483
  - **StreamingText** — Prose arriving from a live source, a token at a time. → [`llms/components/streaming-text.md`](./llms/components/streaming-text.md)
477
484
  - **Switch** — Binary on/off toggle for immediate-effect settings. → [`llms/components/switch.md`](./llms/components/switch.md)
478
485
  - **Table** — Styled native table subcomponents (Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption). *Parts:* TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption. → [`llms/components/table.md`](./llms/components/table.md)
479
- - **Tabs** — Tabs over Base UI Tabs (roving focus, arrow-key nav, ARIA tablist wiring) in two styles: underline (page sections) or pill (compact switchers). *Parts:* TabsList, TabsTrigger, TabsPanel, TabsContent. → [`llms/components/tabs.md`](./llms/components/tabs.md)
486
+ - **Tabs** — Tabs over Base UI Tabs (roving focus, arrow-key nav, ARIA tablist wiring) in two styles: underline (page sections) or pill (compact switchers), with one indicator that glides to the active tab. *Parts:* TabsList, TabsTrigger, TabsPanel, TabsContent. → [`llms/components/tabs.md`](./llms/components/tabs.md)
480
487
  - **Textarea** — Styled native multi-line text control. → [`llms/components/textarea.md`](./llms/components/textarea.md)
481
488
  - **ThemeSelector** — A presentational radiogroup for choosing a Sable design theme from theme manifests — tiles that draw each theme as a miniature of its own interface (its colours, type and corner shape) for a settings page, or compact rows for tool chrome. *Parts:* ThemePreview. → [`llms/components/theme-selector.md`](./llms/components/theme-selector.md)
482
489
  - **ThemeSwitcher** — A segmented light / dark / system switch. → [`llms/components/theme-switcher.md`](./llms/components/theme-switcher.md)
@@ -484,7 +491,8 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
484
491
  - **Toast** — Imperative notification system over Base UI Toast — auto-dismiss timers, swipe-to-dismiss, focus management, ARIA live-region announcements, and a limit-aware stack. *Parts:* ToastRoot, ToastContent, ToastTitle, ToastDescription, ToastClose, ToastAction. → [`llms/components/toast.md`](./llms/components/toast.md)
485
492
  - **Toggle** — Pressed-state button over Base UI Toggle, plus ToggleGroup for shared single- or multi-select rows. *Parts:* ToggleGroup, ToggleGroupItem. → [`llms/components/toggle.md`](./llms/components/toggle.md)
486
493
  - **Toolbar** — A row or column of controls that is one tab stop, with arrow-key movement between its items (role="toolbar"), over Base UI Toolbar. *Parts:* ToolbarButton, ToolbarLink, ToolbarInput, ToolbarGroup, ToolbarSeparator. → [`llms/components/toolbar.md`](./llms/components/toolbar.md)
487
- - **Tooltip** — Hover/focus label over Base UI Tooltip (collision-aware positioning, ARIA wiring, delay grouping via TooltipProvider). *Parts:* TooltipProvider, TooltipTrigger, TooltipContent, TooltipArrow, SimpleTooltip. → [`llms/components/tooltip.md`](./llms/components/tooltip.md)
494
+ - **ToolCall** — One tool an agent called, as a quiet row inside its turn: a status glyph, what it did, the tool's name and where it is — with the arguments and result behind a disclosure. → [`llms/components/tool-call.md`](./llms/components/tool-call.md)
495
+ - **Tooltip** — Hover/focus label over Base UI Tooltip (collision-aware positioning, ARIA wiring, delay grouping via TooltipProvider). *Parts:* TooltipProvider, TooltipTrigger, TooltipContent, TooltipArrow, SimpleTooltip, TooltipGroup. → [`llms/components/tooltip.md`](./llms/components/tooltip.md)
488
496
  - **Tree** — The object list a tool is built around — layers, scene graph, outline — on one shared grid, so every left edge in the panel resolves to the rail or an exact multiple of the indent step. *Parts:* TreeSection, TreeRow, TreeAddRow, TreeEmpty, treeIndent. → [`llms/components/tree.md`](./llms/components/tree.md)
489
497
  - **Video** — Styled 16:9 video player frame. → [`llms/components/video.md`](./llms/components/video.md)
490
498
  - **Workspace** — The shell for a tool: a fixed viewport partitioned into independently scrolling regions, with a compact density scope, a skip link, and a canvas landmark. *Parts:* WorkspaceBar, WorkspaceCanvas. → [`llms/components/workspace.md`](./llms/components/workspace.md)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sableui/react",
3
- "version": "0.13.2",
3
+ "version": "0.15.0",
4
4
  "description": "Sable: themeable React components, layout patterns, and tools for coding agents.",
5
5
  "type": "module",
6
6
  "sideEffects": [