@revolist/ui 4.0.6-rc → 4.0.9

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 (339) hide show
  1. package/MIGRATION.md +7 -7
  2. package/OWNERSHIP.md +33 -33
  3. package/README.md +65 -410
  4. package/_button.scss +6 -2
  5. package/_chunks/{arrow-up-Cw8hW9vp.js → arrow-up-BSYhTAus.js} +1 -1
  6. package/_chunks/{calculator-CDWOuAcp.js → calculator-BG0Xd_Uw.js} +1 -1
  7. package/_chunks/{calendar-QWDyYzdo.js → calendar-C4zH4Ppn.js} +7 -7
  8. package/_chunks/{cell-visuals-E-2oEKHg.js → cell-visuals-r6DOOhGh.js} +7 -7
  9. package/_chunks/{chart-frame-hcOlnQ1K.js → chart-frame-DzvJooS2.js} +7 -7
  10. package/_chunks/{check-BwI7iCAm.js → check-BFIC9pge.js} +1 -1
  11. package/_chunks/{chevron-down-GbplLa6s.js → chevron-down-BkrpxJYD.js} +1 -1
  12. package/_chunks/chevron-right-DZ79RmYV.js +4 -0
  13. package/_chunks/{chevron-up-BLuNMPDn.js → chevron-up-Dt846uIR.js} +1 -1
  14. package/_chunks/{choice-chips-A6WR-WJe.js → choice-chips-D2cJju-g.js} +6 -6
  15. package/_chunks/{clock-BOhPNlW3.js → clock-DTfr4p2S.js} +1 -1
  16. package/_chunks/{color-palette-DMJUChWC.js → color-palette-D7AS20M1.js} +5 -5
  17. package/_chunks/{color-picker-BK4W1nd6.js → color-picker-BanAQVfz.js} +8 -8
  18. package/_chunks/{component-CMkF17YZ.js → component-B8SvtSaB.js} +54 -55
  19. package/_chunks/{component-metadata-BKd7U8OW.js → component-metadata-DlVkpW3h.js} +1 -1
  20. package/_chunks/{configurator-actions-By8WSL2m.js → configurator-actions-CvZf5nYp.js} +11 -11
  21. package/_chunks/{configurator-field-icon-CmcM_sPs.js → configurator-field-icon-B0S_208W.js} +2 -2
  22. package/_chunks/{control-mlH7l0Uq.js → control-Dj7IR-i0.js} +4 -4
  23. package/_chunks/{controller-hRBm_Lfz.js → controller-ChkqiANQ.js} +6 -6
  24. package/_chunks/{controls-FUU-MUKC.js → controls-BF6WlGT4.js} +140 -105
  25. package/_chunks/{date-control-Dup_P3w5.js → date-control-BNj2FBF2.js} +8 -8
  26. package/_chunks/{date-time-9z6pAG5T.js → date-time-Ucx1ep76.js} +25 -25
  27. package/_chunks/{delete-button-CW9vjLnk.js → delete-button-DQSK6G-4.js} +2 -2
  28. package/_chunks/{dialog.parts-Bi7YbXqS.js → dialog.parts-BqkmnhIL.js} +7 -7
  29. package/_chunks/{duration-D7oRjsmP.js → duration-BIESsyLI.js} +9 -9
  30. package/_chunks/{editor-commit-Bq3wSgvr.js → editor-commit-BXIUX0As.js} +3 -3
  31. package/_chunks/{editor-popup-ByU7qiub.js → editor-popup-BTmjGg2_.js} +5 -5
  32. package/_chunks/field-configurator-BWZnm3gE.js +288 -0
  33. package/_chunks/field-context-0oUi-w-G.js +5 -0
  34. package/_chunks/{framework-mount-Bk4O_T7T.js → framework-mount-DQ4opSL0.js} +4 -4
  35. package/_chunks/{hooks.module-CG3gN83z.js → hooks.module-CXpO2xq6.js} +2 -2
  36. package/_chunks/{icon-toolbar-DSjOdwM7.js → icon-toolbar-C4J_Wqph.js} +7 -7
  37. package/_chunks/{icons-Ci5mADVc.js → icons-B4qN13Yj.js} +1 -1
  38. package/_chunks/{iso-B0YHBK7m.js → iso-CJQl2kmq.js} +1 -1
  39. package/_chunks/{jsxRuntime.module-F6UFnpT-.js → jsxRuntime.module-ksX_VSbv.js} +2 -2
  40. package/_chunks/{magnifying-glass-CvrTDSkB.js → magnifying-glass-BFZrFs8M.js} +1 -1
  41. package/_chunks/{minus-BOAR3A1C.js → minus-DE8NPK_D.js} +1 -1
  42. package/_chunks/{model-mPO2tG2f.js → model-CFrBgRHm.js} +3 -3
  43. package/_chunks/mount-DTCXtKfT.js +267 -0
  44. package/_chunks/{native-Blr3byjO.js → native-RudS9C_q.js} +3 -3
  45. package/_chunks/{native-control-pFMuHf3G.js → native-control-xc_B4vfn.js} +146 -141
  46. package/_chunks/{number-input-DqXV6vgP.js → number-input-C_TPzAJq.js} +6 -6
  47. package/_chunks/{picker-gEGTu1Ki.js → picker-0h5TwXGT.js} +8 -8
  48. package/_chunks/{plus-CbGRkIGl.js → plus-BaXticu7.js} +1 -1
  49. package/_chunks/{popup-C35Isk7p.js → popup-CISbXDnE.js} +6 -6
  50. package/_chunks/{preact.module-BBM36DnO.js → preact.module-DzTStiZX.js} +1 -1
  51. package/_chunks/{rating-choice-DbxdUJr-.js → rating-choice-FhWNdsiC.js} +4 -4
  52. package/_chunks/{render-m5eMMwFR.js → render-C6PFWlqh.js} +4 -4
  53. package/_chunks/{reorder-list-B0_13Sja.js → reorder-list-CR1DO4EG.js} +5 -5
  54. package/_chunks/{request-trail-CCSK6TJA.js → request-trail-ay92DQpo.js} +155 -146
  55. package/_chunks/{rich-text-5rnc8lpI.js → rich-text-ByjXFv1S.js} +15 -15
  56. package/_chunks/{rotate-left-BF6G883o.js → rotate-left-CTHmcGBP.js} +1 -1
  57. package/_chunks/{rotate-right-Iha5ScJ1.js → rotate-right-BIfKgVun.js} +1 -1
  58. package/_chunks/selection-list-tooltips-DqqLeO_m.js +42 -0
  59. package/_chunks/{title-tooltip-Cw6LOZhb.js → title-tooltip-DKiWhsL7.js} +3 -3
  60. package/_chunks/{tooltip-D4xkio5G.js → tooltip-B5ziciEP.js} +4 -4
  61. package/_chunks/{tooltip-owner-DjdvqKzz.js → tooltip-owner-BYho-vJl.js} +1 -1
  62. package/_chunks/{tooltip-session-B6X6x8G_.js → tooltip-session-D74h-uqu.js} +3 -3
  63. package/_chunks/{tooltip-text-BXsUEmBH.js → tooltip-text-CH_c2J-J.js} +3 -3
  64. package/_chunks/{top-layer-popup-CNSDdfJV.js → top-layer-popup-BHajfliG.js} +4 -4
  65. package/_chunks/{xmark-DD_PBvZI.js → xmark-DQRQfXZI.js} +1 -1
  66. package/_dialog.scss +57 -22
  67. package/_form.scss +71 -21
  68. package/_legend.scss +25 -7
  69. package/_variables.scss +2 -1
  70. package/_view-switcher.scss +6 -0
  71. package/activity-message.d.ts +1 -1
  72. package/activity-message.js +2 -2
  73. package/ai/_chat.scss +7 -0
  74. package/ai/_style.scss +27 -20
  75. package/ai/components.d.ts +3 -1
  76. package/ai/index.js +2 -2
  77. package/ai/mount.d.ts +15 -7
  78. package/ai/request-trail.d.ts +9 -3
  79. package/ai/results/index.d.ts +1 -1
  80. package/ai/translations.d.ts +1 -1
  81. package/angular/angular.d.ts +1 -1
  82. package/angular/angular.js +13 -7
  83. package/assignee/assignee.scss +24 -6
  84. package/assignee/index.js +8 -8
  85. package/avatar/avatar.style.scss +23 -6
  86. package/avatar/index.d.ts +1 -1
  87. package/avatar/index.js +4 -4
  88. package/badge.d.ts +1 -1
  89. package/badge.js +1 -1
  90. package/badge.view.d.ts +1 -1
  91. package/brush-range/_brush-range.scss +55 -49
  92. package/brush-range/component.js +3 -3
  93. package/buttons/delete-button.js +1 -1
  94. package/buttons/delete-button.style.scss +6 -2
  95. package/buttons/remove-button.js +3 -3
  96. package/buttons/svg-button.js +4 -4
  97. package/calendar/_calendar.scss +19 -23
  98. package/calendar/calendar.js +1 -1
  99. package/calendar/day.js +3 -3
  100. package/calendar/header.js +3 -4
  101. package/calendar/index.js +3 -3
  102. package/calendar/model.js +1 -1
  103. package/calendar/month-grid.js +3 -3
  104. package/calendar/translations.js +1 -1
  105. package/calendar/year-grid.js +3 -3
  106. package/cell-input.js +1 -1
  107. package/cell-input.scss +3 -7
  108. package/cell-visuals/badge.style.scss +6 -3
  109. package/cell-visuals/bar-chart.style.scss +2 -1
  110. package/cell-visuals/column-type.style.css +12 -0
  111. package/cell-visuals/index.js +1 -1
  112. package/cell-visuals/progress-line-value.renderer.style.scss +4 -2
  113. package/cell-visuals/progress-line.style.scss +1 -4
  114. package/cell-visuals/sparkline.style.scss +2 -1
  115. package/cell-visuals/timeline.style.css +4 -2
  116. package/checkbox/checkbox.scss +5 -2
  117. package/checkbox/index.js +2 -2
  118. package/choice-chips/index.js +1 -1
  119. package/color-palette/built-in-palettes.js +1 -1
  120. package/color-palette/chart-palettes.js +1 -1
  121. package/color-palette/color-palette.js +1 -1
  122. package/color-palette/color-palette.style.scss +88 -25
  123. package/color-palette/color-picker.constants.js +1 -1
  124. package/color-palette/color-picker.js +2 -2
  125. package/color-palette/color-picker.style.scss +23 -10
  126. package/color-palette/common-palettes.d.ts +1 -1
  127. package/color-palette/common-palettes.js +2 -2
  128. package/color-palette/gantt-palettes.js +1 -1
  129. package/color-palette/palette.js +1 -1
  130. package/color-palette/pivot-palettes.js +1 -1
  131. package/color-palette/platform-palettes.js +1 -1
  132. package/color-palette/pro-palettes.js +1 -1
  133. package/color-palette/scheduler-palettes.js +1 -1
  134. package/configurator-actions.d.ts +6 -6
  135. package/configurator-actions.js +1 -1
  136. package/configurator-aggregation-list.d.ts +1 -1
  137. package/configurator-aggregation-list.js +22 -20
  138. package/configurator-drop-zone.d.ts +2 -1
  139. package/configurator-drop-zone.js +36 -34
  140. package/configurator-field-icon.js +1 -1
  141. package/configurator-focus.js +2 -2
  142. package/configurator-sections.d.ts +3 -3
  143. package/configurator-sections.js +4 -4
  144. package/control-attributes.js +1 -1
  145. package/control-presentation.js +4 -4
  146. package/controls.d.ts +11 -0
  147. package/controls.js +4 -4
  148. package/core/anchored-popover.js +1 -1
  149. package/core/control-id.js +1 -1
  150. package/core/editor-popup.js +1 -1
  151. package/core/motion.js +1 -1
  152. package/{_chunks/popover-controller-D-AvKQ7B.js → core/popover-controller.js} +8 -8
  153. package/core/selection-list-tooltips.d.ts +2 -0
  154. package/core/tooltip.d.ts +1 -1
  155. package/core/top-layer-popup.d.ts +1 -1
  156. package/core/top-layer-popup.js +1 -1
  157. package/date-time/date-control.d.ts +1 -1
  158. package/date-time/field.d.ts +1 -0
  159. package/date-time/index.js +1 -1
  160. package/date-time/style.scss +192 -46
  161. package/date-time/time-selection.d.ts +1 -1
  162. package/dialog/dialog.dom.js +4 -4
  163. package/dialog/dialog.drag.js +1 -1
  164. package/dialog/dialog.parts.js +1 -1
  165. package/dialog/dialog.preact.js +2 -2
  166. package/distribution-chart/_distribution-chart.scss +106 -28
  167. package/distribution-chart/area-chart.js +4 -4
  168. package/distribution-chart/bar-chart.js +3 -3
  169. package/distribution-chart/chart-frame.d.ts +1 -1
  170. package/distribution-chart/index.js +2 -2
  171. package/distribution-chart/line-chart.js +3 -3
  172. package/dropdown/content.js +1 -1
  173. package/dropdown/control.js +1 -1
  174. package/dropdown/dropdown.service.js +2 -2
  175. package/dropdown/dropdown.types.d.ts +1 -1
  176. package/dropdown/editor-dropdown.style.scss +14 -9
  177. package/dropdown/index.js +2 -2
  178. package/dropdown/lookup-field.js +5 -5
  179. package/dropdown/popup.js +1 -1
  180. package/duration/index.js +1 -1
  181. package/editor-actions.js +4 -4
  182. package/editor-layout/index.d.ts +4 -4
  183. package/editor-layout/index.js +40 -35
  184. package/editor-layout/style.scss +82 -18
  185. package/favicon.svg +9 -0
  186. package/field-configurator.d.ts +14 -3
  187. package/field-configurator.js +1 -1
  188. package/field-reorder.hook.js +2 -2
  189. package/field-reorder.js +1 -1
  190. package/filter/filters/slider/_single-slider.scss +57 -38
  191. package/filter/filters/slider/_slider.scss +35 -10
  192. package/filter/filters/slider/component.js +1 -1
  193. package/filter/filters/slider/control.js +1 -1
  194. package/filter/filters/slider/inputs.js +1 -1
  195. package/filter/filters/slider/logic.js +1 -1
  196. package/filter/filters/slider/preact.js +2 -2
  197. package/filter/filters/slider/runtime.js +3 -3
  198. package/filter/filters/slider/single.js +3 -3
  199. package/filter-badge.js +5 -5
  200. package/filter-controls.js +4 -4
  201. package/form-controls/index.js +4 -4
  202. package/form-controls/presentation.d.ts +1 -1
  203. package/form-controls/presentation.js +5 -5
  204. package/formatting/index.js +11 -11
  205. package/formatting/styles.scss +13 -11
  206. package/framework.js +76 -77
  207. package/history-controls.js +4 -4
  208. package/html-controls.js +1 -1
  209. package/icon-toolbar.d.ts +1 -1
  210. package/icon-toolbar.js +1 -1
  211. package/icons/icon.d.ts +1 -1
  212. package/icons/icon.js +2 -2
  213. package/legend.d.ts +1 -1
  214. package/legend.js +2 -2
  215. package/masked-input/index.js +6 -6
  216. package/native-control.js +1 -1
  217. package/native-styles.css +1 -1
  218. package/native-styles.scss +6 -2
  219. package/native.d.ts +3 -3
  220. package/native.js +18 -18
  221. package/number-input/index.d.ts +1 -1
  222. package/number-input/index.js +1 -1
  223. package/package.json +53 -1
  224. package/pagination.js +2 -2
  225. package/pdf-viewer/controller.js +1 -1
  226. package/pdf-viewer/header.d.ts +1 -1
  227. package/pdf-viewer/index.d.ts +2 -2
  228. package/pdf-viewer/index.js +4 -4
  229. package/pdf-viewer/search-bar.d.ts +1 -1
  230. package/pdf-viewer/status.d.ts +1 -1
  231. package/pdf-viewer/style.scss +203 -42
  232. package/preact-mount.js +2 -2
  233. package/preact.d.ts +5 -4
  234. package/preact.js +105 -67
  235. package/progress/_bar.scss +9 -3
  236. package/progress/_circular.scss +2 -1
  237. package/progress/bar.js +1 -1
  238. package/progress/circular.js +1 -1
  239. package/progress/range.js +1 -1
  240. package/rating-choice.js +1 -1
  241. package/react-adapter.d.ts +4 -2
  242. package/react-control.js +1 -1
  243. package/react.d.ts +2 -2
  244. package/react.js +30 -31
  245. package/reorder-list.d.ts +1 -1
  246. package/reorder-list.js +1 -1
  247. package/reorder-list.scss +59 -17
  248. package/resource-picker/resource-picker-avatar.js +3 -3
  249. package/resource-picker/resource-picker-option.js +2 -2
  250. package/resource-picker/resource-picker-popup.js +3 -3
  251. package/resource-picker/resource-picker.js +76 -74
  252. package/resource-picker/resource-picker.scss +62 -34
  253. package/resource-picker/resource-picker.utils.js +1 -1
  254. package/rich-text/index.js +1 -1
  255. package/rich-text/style.scss +203 -49
  256. package/rich-text/toolbar.d.ts +1 -1
  257. package/robots.txt +4 -0
  258. package/search-input/index.js +4 -4
  259. package/segmented-switch/index.js +2 -2
  260. package/select.js +1 -1
  261. package/selection-list.d.ts +1 -0
  262. package/selection-list.js +3 -1
  263. package/status-feedback/badge.js +2 -2
  264. package/status-feedback/exit-snapshot.js +2 -2
  265. package/status-feedback/header.js +5 -5
  266. package/status-feedback/icons.js +1 -1
  267. package/status-feedback/index.js +1 -1
  268. package/status-feedback/item.js +2 -2
  269. package/status-feedback/motion.js +1 -1
  270. package/status-feedback/placement.js +1 -1
  271. package/status-feedback/popover.js +2 -2
  272. package/status-feedback/render.js +1 -1
  273. package/status-feedback/status-feedback.scss +124 -35
  274. package/styles/_activity-message.scss +24 -7
  275. package/styles/_alert.scss +61 -14
  276. package/styles/_cell-editor-frame.scss +11 -0
  277. package/styles/_compositions.scss +399 -79
  278. package/styles/_control.scss +30 -8
  279. package/styles/_disclosure.scss +15 -5
  280. package/styles/_editor-counter.scss +16 -6
  281. package/styles/_editor-slider.scss +8 -2
  282. package/styles/_field-configurator.scss +192 -41
  283. package/styles/_fields-grid.scss +16 -4
  284. package/styles/_filter-controls.scss +10 -2
  285. package/styles/_icon-action.scss +48 -15
  286. package/styles/_loading.scss +12 -3
  287. package/styles/_motion.scss +32 -9
  288. package/styles/_primitives.scss +346 -96
  289. package/styles/_theme.scss +130 -86
  290. package/styles/_thresholds.scss +28 -25
  291. package/styles/_time-grid.scss +8 -3
  292. package/styles/_tokens.scss +6 -1
  293. package/styles/color-roles.js +1 -1
  294. package/styles/configurator-actions.scss +126 -26
  295. package/styles/pagination.css +114 -30
  296. package/styles/rating.css +8 -3
  297. package/styles.css +1 -1
  298. package/styles.scss +1 -3
  299. package/surfaces.d.ts +4 -2
  300. package/surfaces.js +8 -8
  301. package/svelte/UiComponent.svelte +44 -11
  302. package/svelte-control.js +1 -1
  303. package/svelte.d.ts +1 -1
  304. package/svelte.js +5 -5
  305. package/switch/index.js +3 -3
  306. package/time-grid.js +5 -5
  307. package/timeline-track/_style.scss +96 -24
  308. package/timeline-track/index.js +5 -5
  309. package/timeline-track/model.js +1 -1
  310. package/ui.css +1 -1
  311. package/view-switcher.d.ts +23 -0
  312. package/vue-badge.js +1 -1
  313. package/vue-control.js +1 -1
  314. package/vue-segmented-switch.js +1 -1
  315. package/vue.d.ts +3 -2
  316. package/vue.js +45 -46
  317. package/_chunks/badge.view-D30pMUfi.js +0 -14
  318. package/_chunks/chevron-left-D0nc4Z5S.js +0 -4
  319. package/_chunks/chevron-right-sxHQMSkq.js +0 -4
  320. package/_chunks/field-configurator-BCINdXpU.js +0 -223
  321. package/_chunks/field-context-D57PnBbH.js +0 -5
  322. package/_chunks/mount-Cw2zk58T.js +0 -266
  323. package/_shared/data-query/binding.d.ts +0 -30
  324. package/_shared/data-query/blocks.d.ts +0 -30
  325. package/_shared/data-query/commands.d.ts +0 -47
  326. package/_shared/data-query/contracts.d.ts +0 -106
  327. package/_shared/data-query/cursor-reader.d.ts +0 -25
  328. package/_shared/data-query/direct-binding.d.ts +0 -3
  329. package/_shared/data-query/index.d.ts +0 -23
  330. package/_shared/data-query/infinite-binding.d.ts +0 -18
  331. package/_shared/data-query/keys.d.ts +0 -9
  332. package/_shared/data-query/limiter.d.ts +0 -12
  333. package/_shared/data-query/load-options.d.ts +0 -25
  334. package/_shared/data-query/materialize.d.ts +0 -2
  335. package/_shared/data-query/policy.d.ts +0 -14
  336. package/_shared/data-query/provider-queries.d.ts +0 -22
  337. package/_shared/data-query/reader.d.ts +0 -23
  338. package/_shared/data-query/remote-load.d.ts +0 -7
  339. package/_shared/data-query/source.d.ts +0 -40
package/README.md CHANGED
@@ -1,446 +1,101 @@
1
- # Revo UI
1
+ # Revo UI — A minimal, framework-agnostic UI library
2
2
 
3
- **RevoGrid's UI component library for financial apps, reporting dashboards, and project management.**
4
-
5
- Compose data-rich workspaces with shared controls, pickers, charts, timelines, dialogs, and feedback. Use React, Vue, Angular, Svelte, Preact, or vanilla TypeScript. Revo UI is published as the public npm package **[`@revolist/ui`](https://www.npmjs.com/package/@revolist/ui)** and is MIT licensed for personal and commercial projects.
6
-
7
- [GitHub repository](https://github.com/revolist/revo-ui) · [npm package](https://www.npmjs.com/package/@revolist/ui) · [Live components](https://ui.rv-grid.com/components/buttons/) · [Interactive overview](https://ui.rv-grid.com/) · [Framework guides](https://ui.rv-grid.com/frameworks/) · [RevoGrid](https://rv-grid.com/) · [Pro documentation](https://pro.rv-grid.com/)
8
-
9
- [![Revo UI components for financial dashboards and project management](https://raw.githubusercontent.com/revolist/revo-ui/main/docs/assets/components-preview.jpg)](https://ui.rv-grid.com/)
10
-
11
- Explore the [Revo UI gallery](https://ui.rv-grid.com/) for live previews, component variants, and expandable code examples. The [gallery repository](https://github.com/revolist/revo-ui) contains the gallery app and generated component API documentation.
3
+ [![npm version](https://img.shields.io/npm/v/%40revolist%2Fui?style=flat&color=2563eb)](https://www.npmjs.com/package/@revolist/ui)
4
+ [![MIT license](https://img.shields.io/github/license/revolist/revo-ui?style=flat&color=16a34a)](LICENSE)
5
+ [![Build status](https://img.shields.io/github/actions/workflow/status/revolist/revo-ui/pages.yml?branch=main&style=flat&label=build)](https://github.com/revolist/revo-ui/actions/workflows/pages.yml)
6
+ [![0 runtime dependencies](https://img.shields.io/badge/dependencies-0-16a34a?style=flat)](https://www.npmjs.com/package/@revolist/ui?activeTab=dependencies)
7
+ [![Tree-shakeable ESM](https://img.shields.io/badge/tree%20shaking-supported-16a34a?style=flat)](https://github.com/revolist/revo-ui/blob/main/package.json)
12
8
 
13
- ## Contents
9
+ **RevoGrid's UI component library for financial apps, reporting dashboards, and project management.**
14
10
 
15
- - [Getting started](#getting-started)
16
- - [Framework integrations](#framework-integrations)
17
- - [Components](#components)
18
- - [Complete component reference](#complete-component-reference)
19
- - [Usage contracts](#usage-contracts)
20
- - [Buttons and navigation](#buttons-and-navigation)
21
- - [Dropdowns with user images](#dropdowns-with-user-images)
22
- - [Advanced slider](#advanced-slider)
23
- - [Conditional chart colors](#conditional-chart-colors)
24
- - [Interactive timeline](#interactive-timeline)
25
- - [Theming, sizing, and motion](#theming-sizing-and-motion)
26
- - [Accessibility and localization](#accessibility-and-localization)
27
- - [RevoGrid products](#revogrid-products)
28
- - [Repository and support](#repository-and-support)
29
- - [Licensing](#licensing)
11
+ Compose data-rich workspaces with shared controls, pickers, charts, timelines, dialogs, and feedback. Use React, Vue, Angular, Svelte, Preact, or vanilla TypeScript.
30
12
 
31
- ## Getting started
13
+ [Live components](https://ui.rv-grid.com/components/buttons/) · [Interactive overview](https://ui.rv-grid.com/) · [Framework guides](https://ui.rv-grid.com/frameworks/) · [RevoGrid](https://rv-grid.com/) · [Pro documentation](https://pro.rv-grid.com/)
32
14
 
33
- Release publishing sends `@revolist/ui` to both npm and GitHub Packages. npm is the default for public installation. To install the GitHub Packages copy, configure `@revolist:registry=https://npm.pkg.github.com` and authenticate with a token that has package read access. GitHub package visibility is managed separately in GitHub's package settings.
15
+ [![Revo UI components for financial dashboards and project management](docs/assets/components-preview.jpg)](https://ui.rv-grid.com/)
34
16
 
35
- Install the public package from npm. The published package bundles its Preact rendering runtime; install your application's host framework separately. React adapters require both `react` and `react-dom`. Install `preact` separately when using Preact in your own application code.
17
+ ## Get started
36
18
 
37
19
  ```sh
38
20
  pnpm add @revolist/ui
39
21
  ```
40
22
 
41
- Import the shared stylesheet once in your application entry point:
23
+ Import the shared styles once:
42
24
 
43
25
  ```ts
44
26
  import '@revolist/ui/styles.css';
45
27
  ```
46
28
 
47
- A controlled React example:
48
-
49
- ```tsx
50
- import { useState } from 'react';
51
- import { Button, TextInput } from '@revolist/ui/react';
52
-
53
- export function ReportName() {
54
- const [name, setName] = useState('Monthly revenue');
55
- return (
56
- <>
57
- <TextInput aria-label="Report name" value={name} onValueChange={setName} />
58
- <Button rounded variant="primary" onClick={() => console.log(name)}>
59
- Create report
60
- </Button>
61
- </>
62
- );
63
- }
64
- ```
29
+ Choose your framework for setup instructions and usage examples:
65
30
 
66
- Controls can be used without a RevoGrid instance. Grid cell templates, providers, row data, and product-specific scheduling logic stay in their owning product packages.
31
+ [React](https://ui.rv-grid.com/frameworks/react/) · [Vue](https://ui.rv-grid.com/frameworks/vue/) · [Angular](https://ui.rv-grid.com/frameworks/angular/) · [Svelte](https://ui.rv-grid.com/frameworks/svelte/) · [Preact](https://ui.rv-grid.com/frameworks/preact/) · [Vanilla TypeScript](https://ui.rv-grid.com/frameworks/vanilla-typescript/)
67
32
 
68
- ## Popover dismissal
33
+ ## Framework support
69
34
 
70
- `Popover` accepts `closeOnOutside` and `closeOnEscape`, both enabled by default, matching `PopoverController`. Set either to `false` independently; changes also apply while open. `open` remains controlled: update it in `onClose` (Vue: `@close`), or close it directly from an action.
35
+ Use the same component library and shared styles across frameworks, while keeping application state in your chosen stack.
71
36
 
72
- ```vue
73
- <Popover
74
- :open="open"
75
- :anchor="anchor"
76
- :close-on-outside="false"
77
- :close-on-escape="false"
78
- @close="open = false"
79
- >
80
- <button @click="open = false">Done</button>
81
- </Popover>
82
- ```
83
-
84
- ## Framework integrations
85
-
86
- | Framework | Entry point | Integration | Guide |
87
- | --- | --- | --- | --- |
88
- | React | `@revolist/ui/react` | Named React components; controlled props, callbacks, children, and custom content. | [React usage](https://ui.rv-grid.com/frameworks/react/) |
89
- | Vue | `@revolist/ui/vue` | Named Vue components, events and slots; declared value models support `v-model`. | [Vue usage](https://ui.rv-grid.com/frameworks/vue/) |
90
- | Angular | `@revolist/ui/angular` | Standalone `UiComponent` host with `component`, `props`, `uiEvent`, `valueChange`, and `rvUiSlot` templates. | [Angular usage](https://ui.rv-grid.com/frameworks/angular/) |
91
- | Svelte 5 | `@revolist/ui/svelte` | `UiComponent` host with reactive props, callbacks, and content snippets. | [Svelte usage](https://ui.rv-grid.com/frameworks/svelte/) |
92
- | Preact | `@revolist/ui/preact` | Direct components with Preact state, hooks, and render callbacks. | [Preact usage](https://ui.rv-grid.com/frameworks/preact/) |
93
- | Vanilla TypeScript | `@revolist/ui/framework` | `createFrameworkMount` and `uiComponents`; call `render` to update and `destroy` on disposal. | [Vanilla usage](https://ui.rv-grid.com/frameworks/vanilla-typescript/) |
94
-
95
- Additional entries include `@revolist/ui/native` for DOM controllers and presentation helpers, `@revolist/ui/react-control` / `vue-control` / `angular-control` / `svelte-control` for framework-owned controls, and dedicated entries such as `@revolist/ui/select`, `@revolist/ui/timeline-track`, and `@revolist/ui/pdf-viewer`. Use the installed package's TypeScript declarations for exact prop types.
37
+ | Framework | Integration |
38
+ | --- | --- |
39
+ | <img src="src/assets/frameworks/react.svg" width="24" height="24" alt=""> React | Named components from `@revolist/ui/react`, with React state, children, and callbacks. |
40
+ | <img src="src/assets/frameworks/vue.svg" width="24" height="24" alt=""> Vue | Named components from `@revolist/ui/vue`, with events, slots, and `v-model` for controls with a declared model. |
41
+ | <img src="src/assets/frameworks/angular.svg" width="24" height="24" alt=""> Angular | Standalone `UiComponent` from `@revolist/ui/angular`, with props, events, and templates for custom content. |
42
+ | <img src="src/assets/frameworks/svelte.svg" width="24" height="24" alt=""> Svelte | Svelte 5 `UiComponent` from `@revolist/ui/svelte`, with reactive props, callbacks, and snippets. |
43
+ | <img src="src/assets/frameworks/preact.svg" width="24" height="24" alt=""> Preact | Components from `@revolist/ui/preact`, with Preact hooks and JSX. |
44
+ | <img src="src/assets/frameworks/typescript.svg" width="24" height="24" alt=""> Vanilla TypeScript | Mount components into a DOM element with `createFrameworkMount` from `@revolist/ui/framework`. |
96
45
 
97
46
  ## Components
98
47
 
99
- Browse the same component families as the public gallery. Each page includes live previews, variants, and usage examples.
100
-
101
- | Component family | What you can build |
102
- | --- | --- |
103
- | [Buttons](https://ui.rv-grid.com/components/buttons/) | Actions, icon buttons, toggles, and button groups. |
104
- | [Inputs and forms](https://ui.rv-grid.com/components/inputs-and-forms/) | Text, search, numbers, validation, and field layouts. |
105
- | [Selects and pickers](https://ui.rv-grid.com/components/selects-chips-and-resources/) | Searchable dropdowns, multiple selections, user images, and assignees. |
106
- | [Selection controls](https://ui.rv-grid.com/components/selection-controls/) | Checkboxes, switches, radio buttons, and choice chips. |
107
- | [Tabs and lists](https://ui.rv-grid.com/components/tabs-and-lists/) | Tabs, segmented controls, and selectable lists. |
108
- | [Sliders](https://ui.rv-grid.com/components/sliders/) | Single values and ranges with labels and value badges. |
109
- | [Timeline](https://ui.rv-grid.com/components/timeline-track/) | Draggable, resizable events with colors and tooltips. |
110
- | [Calendars and dates](https://ui.rv-grid.com/components/calendar-and-dates/) | Date and time pickers, ranges, and weekly planning. |
111
- | [Charts](https://ui.rv-grid.com/components/charts-and-range-selection/) | Bar, line, and area charts with tooltips and range selection. |
112
- | [Dialogs and tooltips](https://ui.rv-grid.com/components/dialogs-and-floating-surfaces/) | Dialogs, confirmations, popovers, and tooltips. |
113
- | [Menus and toolbars](https://ui.rv-grid.com/components/menus-and-toolbars/) | Dropdown menus, nested commands, and toolbar actions. |
114
- | [Status and feedback](https://ui.rv-grid.com/components/status-and-feedback/) | Badges, alerts, loading indicators, and empty states. |
115
- | [Layout](https://ui.rv-grid.com/components/layout/) | Panels, resizable split views, and expandable sections. |
116
- | [Pagination](https://ui.rv-grid.com/components/pagination/) | Page navigation for tables and lists. |
117
- | [Progress and rating](https://ui.rv-grid.com/components/progress-and-rating/) | Progress bars, circular indicators, and star ratings. |
118
- | [Activity messages](https://ui.rv-grid.com/components/activity-messages/) | Updates with avatars, timestamps, and actions. |
119
- | [AI assistant](https://ui.rv-grid.com/components/ai-assistant/) | Chat messages, prompts, suggestions, and task states. |
120
- | [PDF viewer](https://ui.rv-grid.com/components/pdf-viewer/) | PDF navigation, search, zoom, and download controls. |
121
- | [Color](https://ui.rv-grid.com/components/color/) | Palettes, color pickers, and shared semantic interface colors. |
122
- | [Field configurators](https://ui.rv-grid.com/components/field-configurators/) | Field libraries, selected-field lists, ordering, summaries, actions, and drop feedback. |
123
- | [Formatting controls](https://ui.rv-grid.com/components/formatting-controls/) | Typography choices, icon choices, inspector sections, preview comparisons, and contextual filter badges. |
48
+ Explore live previews, variants, and expandable code examples on the website.
49
+
50
+ - [Buttons](https://ui.rv-grid.com/components/buttons/) — Actions, icon buttons, toggles, and button groups.
51
+ - [Inputs and forms](https://ui.rv-grid.com/components/inputs-and-forms/) — Text, search, numbers, validation, and field layouts.
52
+ - [Selects and pickers](https://ui.rv-grid.com/components/selects-chips-and-resources/) — Searchable dropdowns, multiple selections, user images, and assignees.
53
+ - [Selection controls](https://ui.rv-grid.com/components/selection-controls/) — Checkboxes, switches, radio buttons, and choice chips.
54
+ - [Tabs and lists](https://ui.rv-grid.com/components/tabs-and-lists/) — Tabs, segmented controls, and selectable lists.
55
+ - [Sliders](https://ui.rv-grid.com/components/sliders/) — Single values and ranges with labels and value badges.
56
+ - [Timeline](https://ui.rv-grid.com/components/timeline-track/) — Draggable, resizable events with colors and tooltips.
57
+ - [Calendars and dates](https://ui.rv-grid.com/components/calendar-and-dates/) — Date and time pickers, ranges, and weekly planning.
58
+ - [Charts](https://ui.rv-grid.com/components/charts-and-range-selection/) — Bar, line, and area charts with tooltips and range selection.
59
+ - [Dialogs and tooltips](https://ui.rv-grid.com/components/dialogs-and-floating-surfaces/) — Dialogs, confirmations, popovers, and tooltips.
60
+ - [Menus and toolbars](https://ui.rv-grid.com/components/menus-and-toolbars/) — Dropdown menus, nested commands, and toolbar actions.
61
+ - [Status and feedback](https://ui.rv-grid.com/components/status-and-feedback/) — Badges, alerts, loading indicators, and empty states.
62
+ - [Layout](https://ui.rv-grid.com/components/layout/) — Panels, resizable split views, and expandable sections.
63
+ - [Pagination](https://ui.rv-grid.com/components/pagination/) — Page navigation for tables and lists.
64
+ - [Progress and rating](https://ui.rv-grid.com/components/progress-and-rating/) — Progress bars, circular indicators, and star ratings.
65
+ - [Activity messages](https://ui.rv-grid.com/components/activity-messages/) — Updates with avatars, timestamps, and actions.
66
+ - [AI assistant](https://ui.rv-grid.com/components/ai-assistant/) — Chat messages, prompts, suggestions, and task states.
67
+ - [PDF viewer](https://ui.rv-grid.com/components/pdf-viewer/) — PDF navigation, search, zoom, and download controls.
68
+ - [Color](https://ui.rv-grid.com/components/color/) — Choose a color from a palette or picker and apply shared semantic interface colors.
69
+ - [Field configurators](https://ui.rv-grid.com/components/field-configurators/) — Compose field libraries, selected-field lists, ordering, summaries, actions and drop feedback from shared pieces.
70
+ - [Formatting controls](https://ui.rv-grid.com/components/formatting-controls/) — Typography choices, icon choices, inspector sections, preview comparisons and contextual filter badges.
124
71
 
125
72
  ## Complete component reference
126
73
 
127
- Every component in the shared adapter catalog is listed below. Each name links to a generated prop/API reference, followed by its live example page, where variants and expandable, formatted usage examples are grouped together. Composition helpers are documented alongside their parent control; not every helper has an isolated specimen.
128
-
129
- ### Buttons
130
-
131
- Actions, grouped commands, toggled state, icons, compact sizing, busy states and pill corners.
132
-
133
- [Button](https://github.com/revolist/revo-ui/blob/main/docs/api/Button.md) ([examples](https://ui.rv-grid.com/components/buttons/)) | [IconButton](https://github.com/revolist/revo-ui/blob/main/docs/api/IconButton.md) ([examples](https://ui.rv-grid.com/components/buttons/)) | [SvgButton](https://github.com/revolist/revo-ui/blob/main/docs/api/SvgButton.md) ([examples](https://ui.rv-grid.com/components/buttons/)) | [ToggleButton](https://github.com/revolist/revo-ui/blob/main/docs/api/ToggleButton.md) ([examples](https://ui.rv-grid.com/components/buttons/)) | [ButtonGroup](https://github.com/revolist/revo-ui/blob/main/docs/api/ButtonGroup.md) ([examples](https://ui.rv-grid.com/components/buttons/)) | [DeleteButton](https://github.com/revolist/revo-ui/blob/main/docs/api/DeleteButton.md) ([examples](https://ui.rv-grid.com/components/buttons/)) | [RemoveButton](https://github.com/revolist/revo-ui/blob/main/docs/api/RemoveButton.md) ([examples](https://ui.rv-grid.com/components/buttons/)) | [SvgIcon](https://github.com/revolist/revo-ui/blob/main/docs/api/SvgIcon.md) ([examples](https://ui.rv-grid.com/components/buttons/))
134
-
135
- ### Selection controls
136
-
137
- Checkboxes, switches, radio groups, choice chips and option rows for independent or exclusive choices.
138
-
139
- [Checkbox](https://github.com/revolist/revo-ui/blob/main/docs/api/Checkbox.md) ([examples](https://ui.rv-grid.com/components/selection-controls/)) | [Switch](https://github.com/revolist/revo-ui/blob/main/docs/api/Switch.md) ([examples](https://ui.rv-grid.com/components/selection-controls/)) | [RadioGroup](https://github.com/revolist/revo-ui/blob/main/docs/api/RadioGroup.md) ([examples](https://ui.rv-grid.com/components/selection-controls/)) | [ChoiceChips](https://github.com/revolist/revo-ui/blob/main/docs/api/ChoiceChips.md) ([examples](https://ui.rv-grid.com/components/selection-controls/)) | [ChoiceChip](https://github.com/revolist/revo-ui/blob/main/docs/api/ChoiceChip.md) ([examples](https://ui.rv-grid.com/components/selection-controls/)) | [ChoiceChipInfoButton](https://github.com/revolist/revo-ui/blob/main/docs/api/ChoiceChipInfoButton.md) ([examples](https://ui.rv-grid.com/components/selection-controls/)) | [OptionButton](https://github.com/revolist/revo-ui/blob/main/docs/api/OptionButton.md) ([examples](https://ui.rv-grid.com/components/selection-controls/))
140
-
141
- ### Tabs and lists
142
-
143
- Switch content, group options and present plain, icon or descriptive selection rows.
144
-
145
- [SegmentedControl](https://github.com/revolist/revo-ui/blob/main/docs/api/SegmentedControl.md) ([examples](https://ui.rv-grid.com/components/tabs-and-lists/)) | [SegmentedSwitch](https://github.com/revolist/revo-ui/blob/main/docs/api/SegmentedSwitch.md) ([examples](https://ui.rv-grid.com/components/tabs-and-lists/)) | [Tabs](https://github.com/revolist/revo-ui/blob/main/docs/api/Tabs.md) ([examples](https://ui.rv-grid.com/components/tabs-and-lists/)) | [TabPanel](https://github.com/revolist/revo-ui/blob/main/docs/api/TabPanel.md) ([examples](https://ui.rv-grid.com/components/tabs-and-lists/)) | [Listbox](https://github.com/revolist/revo-ui/blob/main/docs/api/Listbox.md) ([examples](https://ui.rv-grid.com/components/tabs-and-lists/)) | [ListboxOption](https://github.com/revolist/revo-ui/blob/main/docs/api/ListboxOption.md) ([examples](https://ui.rv-grid.com/components/tabs-and-lists/)) | [ListboxGroup](https://github.com/revolist/revo-ui/blob/main/docs/api/ListboxGroup.md) ([examples](https://ui.rv-grid.com/components/tabs-and-lists/)) | [ListboxOptionContent](https://github.com/revolist/revo-ui/blob/main/docs/api/ListboxOptionContent.md) ([examples](https://ui.rv-grid.com/components/tabs-and-lists/)) | [EditorList](https://github.com/revolist/revo-ui/blob/main/docs/api/EditorList.md) ([examples](https://ui.rv-grid.com/components/tabs-and-lists/)) | [EditorListItem](https://github.com/revolist/revo-ui/blob/main/docs/api/EditorListItem.md) ([examples](https://ui.rv-grid.com/components/tabs-and-lists/)) | [EditorListItemContent](https://github.com/revolist/revo-ui/blob/main/docs/api/EditorListItemContent.md) ([examples](https://ui.rv-grid.com/components/tabs-and-lists/)) | [EditorListGroup](https://github.com/revolist/revo-ui/blob/main/docs/api/EditorListGroup.md) ([examples](https://ui.rv-grid.com/components/tabs-and-lists/))
146
-
147
- ### Inputs and forms
148
-
149
- Text, search and numeric entry; field labels, validation, inline layouts and editor drafts.
150
-
151
- [Input](https://github.com/revolist/revo-ui/blob/main/docs/api/Input.md) ([examples](https://ui.rv-grid.com/components/inputs-and-forms/)) | [TextInput](https://github.com/revolist/revo-ui/blob/main/docs/api/TextInput.md) ([examples](https://ui.rv-grid.com/components/inputs-and-forms/)) | [Textarea](https://github.com/revolist/revo-ui/blob/main/docs/api/Textarea.md) ([examples](https://ui.rv-grid.com/components/inputs-and-forms/)) | [SearchInput](https://github.com/revolist/revo-ui/blob/main/docs/api/SearchInput.md) ([examples](https://ui.rv-grid.com/components/inputs-and-forms/)) | [NumberInput](https://github.com/revolist/revo-ui/blob/main/docs/api/NumberInput.md) ([examples](https://ui.rv-grid.com/components/inputs-and-forms/)) | [NumberStepper](https://github.com/revolist/revo-ui/blob/main/docs/api/NumberStepper.md) ([examples](https://ui.rv-grid.com/components/inputs-and-forms/)) | [DateInput](https://github.com/revolist/revo-ui/blob/main/docs/api/DateInput.md) ([examples](https://ui.rv-grid.com/components/inputs-and-forms/)) | [TimeInput](https://github.com/revolist/revo-ui/blob/main/docs/api/TimeInput.md) ([examples](https://ui.rv-grid.com/components/inputs-and-forms/)) | [DateTimeInput](https://github.com/revolist/revo-ui/blob/main/docs/api/DateTimeInput.md) ([examples](https://ui.rv-grid.com/components/inputs-and-forms/)) | [FormField](https://github.com/revolist/revo-ui/blob/main/docs/api/FormField.md) ([examples](https://ui.rv-grid.com/components/inputs-and-forms/)) | [FieldHint](https://github.com/revolist/revo-ui/blob/main/docs/api/FieldHint.md) ([examples](https://ui.rv-grid.com/components/inputs-and-forms/)) | [FieldError](https://github.com/revolist/revo-ui/blob/main/docs/api/FieldError.md) ([examples](https://ui.rv-grid.com/components/inputs-and-forms/)) | [FormSection](https://github.com/revolist/revo-ui/blob/main/docs/api/FormSection.md) ([examples](https://ui.rv-grid.com/components/inputs-and-forms/)) | [HighlightedTextInput](https://github.com/revolist/revo-ui/blob/main/docs/api/HighlightedTextInput.md) ([examples](https://ui.rv-grid.com/components/inputs-and-forms/)) | [InlineFieldGroup](https://github.com/revolist/revo-ui/blob/main/docs/api/InlineFieldGroup.md) ([examples](https://ui.rv-grid.com/components/inputs-and-forms/)) | [NumberDraft](https://github.com/revolist/revo-ui/blob/main/docs/api/NumberDraft.md) ([examples](https://ui.rv-grid.com/components/inputs-and-forms/)) | [MaskedDraft](https://github.com/revolist/revo-ui/blob/main/docs/api/MaskedDraft.md) ([examples](https://ui.rv-grid.com/components/inputs-and-forms/)) | [HtmlEditor](https://github.com/revolist/revo-ui/blob/main/docs/api/HtmlEditor.md) ([examples](https://ui.rv-grid.com/components/inputs-and-forms/))
152
-
153
- ### Selects, chips and resources
154
-
155
- Single or multiple selections, searchable options, selected-value templates, avatars, resource lists and assignee fields.
156
-
157
- [Dropdown](https://github.com/revolist/revo-ui/blob/main/docs/api/Dropdown.md) ([examples](https://ui.rv-grid.com/components/selects-chips-and-resources/)) | [DropdownPopup](https://github.com/revolist/revo-ui/blob/main/docs/api/DropdownPopup.md) ([examples](https://ui.rv-grid.com/components/selects-chips-and-resources/)) | [DropdownPopupContent](https://github.com/revolist/revo-ui/blob/main/docs/api/DropdownPopupContent.md) ([examples](https://ui.rv-grid.com/components/selects-chips-and-resources/)) | [Combobox](https://github.com/revolist/revo-ui/blob/main/docs/api/Combobox.md) ([examples](https://ui.rv-grid.com/components/selects-chips-and-resources/)) | [MultiSelect](https://github.com/revolist/revo-ui/blob/main/docs/api/MultiSelect.md) ([examples](https://ui.rv-grid.com/components/selects-chips-and-resources/)) | [Chip](https://github.com/revolist/revo-ui/blob/main/docs/api/Chip.md) ([examples](https://ui.rv-grid.com/components/selects-chips-and-resources/)) | [FilterChip](https://github.com/revolist/revo-ui/blob/main/docs/api/FilterChip.md) ([examples](https://ui.rv-grid.com/components/selects-chips-and-resources/)) | [Avatar](https://github.com/revolist/revo-ui/blob/main/docs/api/Avatar.md) ([examples](https://ui.rv-grid.com/components/selects-chips-and-resources/)) | [SharedResourcePicker](https://github.com/revolist/revo-ui/blob/main/docs/api/SharedResourcePicker.md) ([examples](https://ui.rv-grid.com/components/selects-chips-and-resources/)) | [ResourcePickerAvatar](https://github.com/revolist/revo-ui/blob/main/docs/api/ResourcePickerAvatar.md) ([examples](https://ui.rv-grid.com/components/selects-chips-and-resources/)) | [AssigneePicker](https://github.com/revolist/revo-ui/blob/main/docs/api/AssigneePicker.md) ([examples](https://ui.rv-grid.com/components/selects-chips-and-resources/)) | [AssigneeField](https://github.com/revolist/revo-ui/blob/main/docs/api/AssigneeField.md) ([examples](https://ui.rv-grid.com/components/selects-chips-and-resources/)) | [AssigneePickerLayout](https://github.com/revolist/revo-ui/blob/main/docs/api/AssigneePickerLayout.md) ([examples](https://ui.rv-grid.com/components/selects-chips-and-resources/))
158
-
159
- ### Sliders
160
-
161
- Scalar and interval controls with labels, value badges, thumb values, ticks and units.
162
-
163
- [SingleValueSlider](https://github.com/revolist/revo-ui/blob/main/docs/api/SingleValueSlider.md) ([examples](https://ui.rv-grid.com/components/sliders/)) | [PreactRangeSlider](https://github.com/revolist/revo-ui/blob/main/docs/api/PreactRangeSlider.md) ([examples](https://ui.rv-grid.com/components/sliders/)) | [SliderField](https://github.com/revolist/revo-ui/blob/main/docs/api/SliderField.md) ([examples](https://ui.rv-grid.com/components/sliders/))
164
-
165
- ### Timeline track
166
-
167
- Controlled timeline events with move/resize interactions, event colors, weighted phases and tooltips.
168
-
169
- [TimelineTrack](https://github.com/revolist/revo-ui/blob/main/docs/api/TimelineTrack.md) ([examples](https://ui.rv-grid.com/components/timeline-track/))
170
-
171
- ### Calendar and dates
172
-
173
- Calendar views and date/time fields, ranges, duration drafts, weekly availability and descriptive legends.
174
-
175
- [Calendar](https://github.com/revolist/revo-ui/blob/main/docs/api/Calendar.md) ([examples](https://ui.rv-grid.com/components/calendar-and-dates/)) | [CalendarHeader](https://github.com/revolist/revo-ui/blob/main/docs/api/CalendarHeader.md) ([examples](https://ui.rv-grid.com/components/calendar-and-dates/)) | [CalendarWeekdays](https://github.com/revolist/revo-ui/blob/main/docs/api/CalendarWeekdays.md) ([examples](https://ui.rv-grid.com/components/calendar-and-dates/)) | [CalendarDay](https://github.com/revolist/revo-ui/blob/main/docs/api/CalendarDay.md) ([examples](https://ui.rv-grid.com/components/calendar-and-dates/)) | [CalendarMonthGrid](https://github.com/revolist/revo-ui/blob/main/docs/api/CalendarMonthGrid.md) ([examples](https://ui.rv-grid.com/components/calendar-and-dates/)) | [CalendarYearGrid](https://github.com/revolist/revo-ui/blob/main/docs/api/CalendarYearGrid.md) ([examples](https://ui.rv-grid.com/components/calendar-and-dates/)) | [CalendarPicker](https://github.com/revolist/revo-ui/blob/main/docs/api/CalendarPicker.md) ([examples](https://ui.rv-grid.com/components/calendar-and-dates/)) | [DatePicker](https://github.com/revolist/revo-ui/blob/main/docs/api/DatePicker.md) ([examples](https://ui.rv-grid.com/components/calendar-and-dates/)) | [DateRangePicker](https://github.com/revolist/revo-ui/blob/main/docs/api/DateRangePicker.md) ([examples](https://ui.rv-grid.com/components/calendar-and-dates/)) | [DurationField](https://github.com/revolist/revo-ui/blob/main/docs/api/DurationField.md) ([examples](https://ui.rv-grid.com/components/calendar-and-dates/)) | [DurationDraft](https://github.com/revolist/revo-ui/blob/main/docs/api/DurationDraft.md) ([examples](https://ui.rv-grid.com/components/calendar-and-dates/)) | [TemporalPicker](https://github.com/revolist/revo-ui/blob/main/docs/api/TemporalPicker.md) ([examples](https://ui.rv-grid.com/components/calendar-and-dates/)) | [TemporalDraft](https://github.com/revolist/revo-ui/blob/main/docs/api/TemporalDraft.md) ([examples](https://ui.rv-grid.com/components/calendar-and-dates/)) | [DateTimeField](https://github.com/revolist/revo-ui/blob/main/docs/api/DateTimeField.md) ([examples](https://ui.rv-grid.com/components/calendar-and-dates/)) | [TimeGrid](https://github.com/revolist/revo-ui/blob/main/docs/api/TimeGrid.md) ([examples](https://ui.rv-grid.com/components/calendar-and-dates/)) | [Legend](https://github.com/revolist/revo-ui/blob/main/docs/api/Legend.md) ([examples](https://ui.rv-grid.com/components/calendar-and-dates/))
176
-
177
- ### Color
178
-
179
- Choose a color from a palette or picker and apply shared semantic interface colors.
180
-
181
- [ColorPicker](https://github.com/revolist/revo-ui/blob/main/docs/api/ColorPicker.md) ([examples](https://ui.rv-grid.com/components/color/)) | [ColorPalette](https://github.com/revolist/revo-ui/blob/main/docs/api/ColorPalette.md) ([examples](https://ui.rv-grid.com/components/color/))
182
-
183
- ### Field configurators
184
-
185
- Compose field libraries, selected-field lists, ordering, summaries, actions and drop feedback from shared pieces.
186
-
187
- [FieldIcon](https://github.com/revolist/revo-ui/blob/main/docs/api/FieldIcon.md) ([examples](https://ui.rv-grid.com/components/field-configurators/)) | [FieldSummary](https://github.com/revolist/revo-ui/blob/main/docs/api/FieldSummary.md) ([examples](https://ui.rv-grid.com/components/field-configurators/)) | [FieldLibrary](https://github.com/revolist/revo-ui/blob/main/docs/api/FieldLibrary.md) ([examples](https://ui.rv-grid.com/components/field-configurators/)) | [FieldGroupHeading](https://github.com/revolist/revo-ui/blob/main/docs/api/FieldGroupHeading.md) ([examples](https://ui.rv-grid.com/components/field-configurators/)) | [FieldGroup](https://github.com/revolist/revo-ui/blob/main/docs/api/FieldGroup.md) ([examples](https://ui.rv-grid.com/components/field-configurators/)) | [FieldList](https://github.com/revolist/revo-ui/blob/main/docs/api/FieldList.md) ([examples](https://ui.rv-grid.com/components/field-configurators/)) | [FieldRow](https://github.com/revolist/revo-ui/blob/main/docs/api/FieldRow.md) ([examples](https://ui.rv-grid.com/components/field-configurators/)) | [FieldContent](https://github.com/revolist/revo-ui/blob/main/docs/api/FieldContent.md) ([examples](https://ui.rv-grid.com/components/field-configurators/)) | [FieldItem](https://github.com/revolist/revo-ui/blob/main/docs/api/FieldItem.md) ([examples](https://ui.rv-grid.com/components/field-configurators/)) | [FieldLibraryList](https://github.com/revolist/revo-ui/blob/main/docs/api/FieldLibraryList.md) ([examples](https://ui.rv-grid.com/components/field-configurators/)) | [SelectedField](https://github.com/revolist/revo-ui/blob/main/docs/api/SelectedField.md) ([examples](https://ui.rv-grid.com/components/field-configurators/)) | [FieldActions](https://github.com/revolist/revo-ui/blob/main/docs/api/FieldActions.md) ([examples](https://ui.rv-grid.com/components/field-configurators/)) | [FieldStatusBadge](https://github.com/revolist/revo-ui/blob/main/docs/api/FieldStatusBadge.md) ([examples](https://ui.rv-grid.com/components/field-configurators/)) | [FieldRemoveButton](https://github.com/revolist/revo-ui/blob/main/docs/api/FieldRemoveButton.md) ([examples](https://ui.rv-grid.com/components/field-configurators/)) | [FieldRemoveIcon](https://github.com/revolist/revo-ui/blob/main/docs/api/FieldRemoveIcon.md) ([examples](https://ui.rv-grid.com/components/field-configurators/)) | [FieldDropIndicator](https://github.com/revolist/revo-ui/blob/main/docs/api/FieldDropIndicator.md) ([examples](https://ui.rv-grid.com/components/field-configurators/)) | [ReorderList](https://github.com/revolist/revo-ui/blob/main/docs/api/ReorderList.md) ([examples](https://ui.rv-grid.com/components/field-configurators/)) | [ReorderHandle](https://github.com/revolist/revo-ui/blob/main/docs/api/ReorderHandle.md) ([examples](https://ui.rv-grid.com/components/field-configurators/))
188
-
189
- ### Formatting controls
190
-
191
- Typography choices, icon choices, inspector sections, preview comparisons and contextual filter badges.
192
-
193
- [InspectorSection](https://github.com/revolist/revo-ui/blob/main/docs/api/InspectorSection.md) ([examples](https://ui.rv-grid.com/components/formatting-controls/)) | [IconChoiceGroup](https://github.com/revolist/revo-ui/blob/main/docs/api/IconChoiceGroup.md) ([examples](https://ui.rv-grid.com/components/formatting-controls/)) | [IconToggleButton](https://github.com/revolist/revo-ui/blob/main/docs/api/IconToggleButton.md) ([examples](https://ui.rv-grid.com/components/formatting-controls/)) | [TypographyControls](https://github.com/revolist/revo-ui/blob/main/docs/api/TypographyControls.md) ([examples](https://ui.rv-grid.com/components/formatting-controls/)) | [ComparisonPreview](https://github.com/revolist/revo-ui/blob/main/docs/api/ComparisonPreview.md) ([examples](https://ui.rv-grid.com/components/formatting-controls/)) | [FilterBadgeInfoButton](https://github.com/revolist/revo-ui/blob/main/docs/api/FilterBadgeInfoButton.md) ([examples](https://ui.rv-grid.com/components/formatting-controls/)) | [FilterBadge](https://github.com/revolist/revo-ui/blob/main/docs/api/FilterBadge.md) ([examples](https://ui.rv-grid.com/components/formatting-controls/))
194
-
195
- ### Charts and range selection
196
-
197
- Compact bar, line and area charts with values, labels, tooltips and a composed range brush.
198
-
199
- [DistributionChart](https://github.com/revolist/revo-ui/blob/main/docs/api/DistributionChart.md) ([examples](https://ui.rv-grid.com/components/charts-and-range-selection/)) | [BarChart](https://github.com/revolist/revo-ui/blob/main/docs/api/BarChart.md) ([examples](https://ui.rv-grid.com/components/charts-and-range-selection/)) | [LineChart](https://github.com/revolist/revo-ui/blob/main/docs/api/LineChart.md) ([examples](https://ui.rv-grid.com/components/charts-and-range-selection/)) | [AreaChart](https://github.com/revolist/revo-ui/blob/main/docs/api/AreaChart.md) ([examples](https://ui.rv-grid.com/components/charts-and-range-selection/)) | [BrushRange](https://github.com/revolist/revo-ui/blob/main/docs/api/BrushRange.md) ([examples](https://ui.rv-grid.com/components/charts-and-range-selection/))
200
-
201
- ### Dialogs and floating surfaces
202
-
203
- Dialogs, confirmations, contextual surfaces and editable dialog sections with shared actions.
204
-
205
- [Dialog](https://github.com/revolist/revo-ui/blob/main/docs/api/Dialog.md) ([examples](https://ui.rv-grid.com/components/dialogs-and-floating-surfaces/)) | [ConfirmDialog](https://github.com/revolist/revo-ui/blob/main/docs/api/ConfirmDialog.md) ([examples](https://ui.rv-grid.com/components/dialogs-and-floating-surfaces/)) | [Popover](https://github.com/revolist/revo-ui/blob/main/docs/api/Popover.md) ([examples](https://ui.rv-grid.com/components/dialogs-and-floating-surfaces/)) | [Tooltip](https://github.com/revolist/revo-ui/blob/main/docs/api/Tooltip.md) ([examples](https://ui.rv-grid.com/components/dialogs-and-floating-surfaces/)) | [ControlTooltip](https://github.com/revolist/revo-ui/blob/main/docs/api/ControlTooltip.md) ([examples](https://ui.rv-grid.com/components/dialogs-and-floating-surfaces/)) | [DialogHeader](https://github.com/revolist/revo-ui/blob/main/docs/api/DialogHeader.md) ([examples](https://ui.rv-grid.com/components/dialogs-and-floating-surfaces/)) | [DialogBody](https://github.com/revolist/revo-ui/blob/main/docs/api/DialogBody.md) ([examples](https://ui.rv-grid.com/components/dialogs-and-floating-surfaces/)) | [DialogFooter](https://github.com/revolist/revo-ui/blob/main/docs/api/DialogFooter.md) ([examples](https://ui.rv-grid.com/components/dialogs-and-floating-surfaces/)) | [DialogForm](https://github.com/revolist/revo-ui/blob/main/docs/api/DialogForm.md) ([examples](https://ui.rv-grid.com/components/dialogs-and-floating-surfaces/)) | [DialogCloseButton](https://github.com/revolist/revo-ui/blob/main/docs/api/DialogCloseButton.md) ([examples](https://ui.rv-grid.com/components/dialogs-and-floating-surfaces/)) | [DialogActionFooter](https://github.com/revolist/revo-ui/blob/main/docs/api/DialogActionFooter.md) ([examples](https://ui.rv-grid.com/components/dialogs-and-floating-surfaces/)) | [DialogActions](https://github.com/revolist/revo-ui/blob/main/docs/api/DialogActions.md) ([examples](https://ui.rv-grid.com/components/dialogs-and-floating-surfaces/)) | [DialogTitleInput](https://github.com/revolist/revo-ui/blob/main/docs/api/DialogTitleInput.md) ([examples](https://ui.rv-grid.com/components/dialogs-and-floating-surfaces/)) | [EditableDialogHeader](https://github.com/revolist/revo-ui/blob/main/docs/api/EditableDialogHeader.md) ([examples](https://ui.rv-grid.com/components/dialogs-and-floating-surfaces/))
206
-
207
- ### Menus and toolbars
208
-
209
- Command menus, nested commands, separators and grouped toolbar actions.
210
-
211
- [Menu](https://github.com/revolist/revo-ui/blob/main/docs/api/Menu.md) ([examples](https://ui.rv-grid.com/components/menus-and-toolbars/)) | [MenuItem](https://github.com/revolist/revo-ui/blob/main/docs/api/MenuItem.md) ([examples](https://ui.rv-grid.com/components/menus-and-toolbars/)) | [MenuSeparator](https://github.com/revolist/revo-ui/blob/main/docs/api/MenuSeparator.md) ([examples](https://ui.rv-grid.com/components/menus-and-toolbars/)) | [Submenu](https://github.com/revolist/revo-ui/blob/main/docs/api/Submenu.md) ([examples](https://ui.rv-grid.com/components/menus-and-toolbars/)) | [Toolbar](https://github.com/revolist/revo-ui/blob/main/docs/api/Toolbar.md) ([examples](https://ui.rv-grid.com/components/menus-and-toolbars/)) | [ToolbarGroup](https://github.com/revolist/revo-ui/blob/main/docs/api/ToolbarGroup.md) ([examples](https://ui.rv-grid.com/components/menus-and-toolbars/)) | [ToolbarSeparator](https://github.com/revolist/revo-ui/blob/main/docs/api/ToolbarSeparator.md) ([examples](https://ui.rv-grid.com/components/menus-and-toolbars/))
212
-
213
- ### Status and feedback
214
-
215
- Semantic badges, counters, alerts, progress indicators, loading surfaces, empty states and feedback panels.
216
-
217
- [Badge](https://github.com/revolist/revo-ui/blob/main/docs/api/Badge.md) ([examples](https://ui.rv-grid.com/components/status-and-feedback/)) | [CountBadge](https://github.com/revolist/revo-ui/blob/main/docs/api/CountBadge.md) ([examples](https://ui.rv-grid.com/components/status-and-feedback/)) | [Alert](https://github.com/revolist/revo-ui/blob/main/docs/api/Alert.md) ([examples](https://ui.rv-grid.com/components/status-and-feedback/)) | [Spinner](https://github.com/revolist/revo-ui/blob/main/docs/api/Spinner.md) ([examples](https://ui.rv-grid.com/components/status-and-feedback/)) | [LoadingOverlay](https://github.com/revolist/revo-ui/blob/main/docs/api/LoadingOverlay.md) ([examples](https://ui.rv-grid.com/components/status-and-feedback/)) | [EmptyState](https://github.com/revolist/revo-ui/blob/main/docs/api/EmptyState.md) ([examples](https://ui.rv-grid.com/components/status-and-feedback/)) | [StatusFeedbackPanel](https://github.com/revolist/revo-ui/blob/main/docs/api/StatusFeedbackPanel.md) ([examples](https://ui.rv-grid.com/components/status-and-feedback/)) | [StatusBadge](https://github.com/revolist/revo-ui/blob/main/docs/api/StatusBadge.md) ([examples](https://ui.rv-grid.com/components/status-and-feedback/))
218
-
219
- ### Layout
220
-
221
- Compose panes, split layouts, panels and disclosures with an interactive resize divider.
222
-
223
- [Panel](https://github.com/revolist/revo-ui/blob/main/docs/api/Panel.md) ([examples](https://ui.rv-grid.com/components/layout/)) | [Pane](https://github.com/revolist/revo-ui/blob/main/docs/api/Pane.md) ([examples](https://ui.rv-grid.com/components/layout/)) | [SplitLayout](https://github.com/revolist/revo-ui/blob/main/docs/api/SplitLayout.md) ([examples](https://ui.rv-grid.com/components/layout/)) | [EditorPane](https://github.com/revolist/revo-ui/blob/main/docs/api/EditorPane.md) ([examples](https://ui.rv-grid.com/components/layout/)) | [EditorSplitLayout](https://github.com/revolist/revo-ui/blob/main/docs/api/EditorSplitLayout.md) ([examples](https://ui.rv-grid.com/components/layout/)) | [ResizeHandle](https://github.com/revolist/revo-ui/blob/main/docs/api/ResizeHandle.md) ([examples](https://ui.rv-grid.com/components/layout/)) | [Disclosure](https://github.com/revolist/revo-ui/blob/main/docs/api/Disclosure.md) ([examples](https://ui.rv-grid.com/components/layout/)) | [DisclosureSummary](https://github.com/revolist/revo-ui/blob/main/docs/api/DisclosureSummary.md) ([examples](https://ui.rv-grid.com/components/layout/))
224
-
225
- ### Pagination
74
+ For individual component props and API details, see the [complete component reference](docs/component-reference.md#complete-component-reference).
226
75
 
227
- Page selection and compact or numbered navigation.
228
-
229
- [Pagination](https://github.com/revolist/revo-ui/blob/main/docs/api/Pagination.md) ([examples](https://ui.rv-grid.com/components/pagination/))
230
-
231
- ### Progress and rating
232
-
233
- Linear/circular completion and star-based rating controls.
234
-
235
- [ProgressBar](https://github.com/revolist/revo-ui/blob/main/docs/api/ProgressBar.md) ([examples](https://ui.rv-grid.com/components/progress-and-rating/)) | [CircularProgress](https://github.com/revolist/revo-ui/blob/main/docs/api/CircularProgress.md) ([examples](https://ui.rv-grid.com/components/progress-and-rating/)) | [Rating](https://github.com/revolist/revo-ui/blob/main/docs/api/Rating.md) ([examples](https://ui.rv-grid.com/components/progress-and-rating/)) | [RatingStar](https://github.com/revolist/revo-ui/blob/main/docs/api/RatingStar.md) ([examples](https://ui.rv-grid.com/components/progress-and-rating/)) | [RatingChoice](https://github.com/revolist/revo-ui/blob/main/docs/api/RatingChoice.md) ([examples](https://ui.rv-grid.com/components/progress-and-rating/))
236
-
237
- ### Activity messages
238
-
239
- Compose an activity entry from an avatar, timestamp, header, body, details and actions.
240
-
241
- [ActivityMessage](https://github.com/revolist/revo-ui/blob/main/docs/api/ActivityMessage.md) ([examples](https://ui.rv-grid.com/components/activity-messages/))
242
-
243
- ### AI assistant
244
-
245
- Presentation for messages, prompts, suggestions, reasoning, tasks, action state and result summaries. Applications provide the model and tools.
246
-
247
- [AiChat](https://github.com/revolist/revo-ui/blob/main/docs/api/AiChat.md) ([examples](https://ui.rv-grid.com/components/ai-assistant/)) | [AiChatContent](https://github.com/revolist/revo-ui/blob/main/docs/api/AiChatContent.md) ([examples](https://ui.rv-grid.com/components/ai-assistant/)) | [AiChatComposer](https://github.com/revolist/revo-ui/blob/main/docs/api/AiChatComposer.md) ([examples](https://ui.rv-grid.com/components/ai-assistant/)) | [AiChatEmptyState](https://github.com/revolist/revo-ui/blob/main/docs/api/AiChatEmptyState.md) ([examples](https://ui.rv-grid.com/components/ai-assistant/)) | [AiMessage](https://github.com/revolist/revo-ui/blob/main/docs/api/AiMessage.md) ([examples](https://ui.rv-grid.com/components/ai-assistant/)) | [AiMessageContent](https://github.com/revolist/revo-ui/blob/main/docs/api/AiMessageContent.md) ([examples](https://ui.rv-grid.com/components/ai-assistant/)) | [AiMessageActions](https://github.com/revolist/revo-ui/blob/main/docs/api/AiMessageActions.md) ([examples](https://ui.rv-grid.com/components/ai-assistant/)) | [AiReasoning](https://github.com/revolist/revo-ui/blob/main/docs/api/AiReasoning.md) ([examples](https://ui.rv-grid.com/components/ai-assistant/)) | [AiTask](https://github.com/revolist/revo-ui/blob/main/docs/api/AiTask.md) ([examples](https://ui.rv-grid.com/components/ai-assistant/)) | [AiTaskItem](https://github.com/revolist/revo-ui/blob/main/docs/api/AiTaskItem.md) ([examples](https://ui.rv-grid.com/components/ai-assistant/)) | [AiPromptInput](https://github.com/revolist/revo-ui/blob/main/docs/api/AiPromptInput.md) ([examples](https://ui.rv-grid.com/components/ai-assistant/)) | [AiSuggestions](https://github.com/revolist/revo-ui/blob/main/docs/api/AiSuggestions.md) ([examples](https://ui.rv-grid.com/components/ai-assistant/)) | [AiActionStatus](https://github.com/revolist/revo-ui/blob/main/docs/api/AiActionStatus.md) ([examples](https://ui.rv-grid.com/components/ai-assistant/)) | [AiResult](https://github.com/revolist/revo-ui/blob/main/docs/api/AiResult.md) ([examples](https://ui.rv-grid.com/components/ai-assistant/)) | [AiChangePreview](https://github.com/revolist/revo-ui/blob/main/docs/api/AiChangePreview.md) ([examples](https://ui.rv-grid.com/components/ai-assistant/)) | [AiAssistant](https://github.com/revolist/revo-ui/blob/main/docs/api/AiAssistant.md) ([examples](https://ui.rv-grid.com/components/ai-assistant/)) | [AiRequestTrail](https://github.com/revolist/revo-ui/blob/main/docs/api/AiRequestTrail.md) ([examples](https://ui.rv-grid.com/components/ai-assistant/))
248
-
249
- ### PDF viewer
250
-
251
- Display local or remote PDFs with navigation, search, zoom, rotation, print/download actions and a composable toolbar.
252
-
253
- [PdfViewer](https://github.com/revolist/revo-ui/blob/main/docs/api/PdfViewer.md) ([examples](https://ui.rv-grid.com/components/pdf-viewer/)) | [PdfViewerToolbar](https://github.com/revolist/revo-ui/blob/main/docs/api/PdfViewerToolbar.md) ([examples](https://ui.rv-grid.com/components/pdf-viewer/))
254
-
255
-
256
- ### JSX select adapter
257
-
258
- [**Select**](https://github.com/revolist/revo-ui/blob/main/docs/api/Select.md) ([examples](https://ui.rv-grid.com/components/selects-chips-and-resources/)) is an additional direct Preact adapter exported from `@revolist/ui/select`. Its JSX `<option>` children are data descriptors for the shared dropdown, not mounted native select elements. Use `value` / `onValueChange` for controlled state, `defaultValue` for uncontrolled state, and `multiple` for an array of selected strings. React/Vue applications can use their named `Combobox`, `MultiSelect`, or `Dropdown` adapters.
259
-
260
- ```tsx
261
- import { Select } from '@revolist/ui/select';
262
-
263
- <Select aria-label="View" value={view} onValueChange={setView}>
264
- <option value="table">Table</option>
265
- <option value="board">Board</option>
266
- <option value="calendar" disabled>Calendar</option>
267
- </Select>
268
- ```
269
-
270
- ## Usage contracts
271
-
272
- | Concern | Contract |
273
- | --- | --- |
274
- | Controlled state | Keep values in the application and pass the matching callback. `TextInput` uses `onValueChange`; many pickers/sliders use `onChange`; verify the component's typed contract. |
275
- | Dropdown data | `source` is an array of `{ value, label, ...metadata }` descriptors. `disabled` options remain visible and are skipped by keyboard selection. |
276
- | Custom dropdown content | `renderOption` changes option content; `renderValue` changes the selected value. Preact receives `(h, option, selected)` / `(h, option)`. React callbacks omit the element-factory argument; Vue uses named slots. |
277
- | Angular/Svelte hosts | Use names from the component catalog. `valueChange` / `onValueChange` is tied to the component's declared value model, not every callback. For a generic callback such as `onClick`, supply that callback in `props` so the host can forward it. |
278
- | Forms | Associate inputs with a visible label or an accessible name. Use shared field hint/error presentation and pass disabled/invalid state explicitly. |
279
- | Overlays | Use the shared popup lifecycle. Dropdowns inside top-layer dialogs/calendars can opt into `config.topLayer`. Standalone selects dismiss and advance focus on Tab/Shift+Tab. |
280
- | Lifecycle | Framework adapters clean up their mounts. Manual framework mounts and native controllers must be destroyed when their view is removed. |
281
- | AI components | These render chat, prompt, task and result UI. Your application provides model access, data, authorization and tool execution. |
282
- | PDF viewer | Supply a PDF source and compatible PDF.js worker configuration. Remote files require appropriate CORS access. Tool groups, text and toolbar/status rendering are configurable. See the [PDF viewer examples](https://ui.rv-grid.com/components/pdf-viewer/). |
283
- | Charts | Revo UI includes compact bar/line/area primitives and a range brush. The separate [RevoGrid Charts product](https://rv-grid.com/charts/) provides the larger charting surface. |
284
-
285
- The following snippets use the direct Preact APIs; the framework guides show their equivalent integration patterns. Values and callbacks such as `saved` / `setSaved` are application-owned state inside your component; the linked live examples include the complete surrounding setup.
286
-
287
- ## Buttons and navigation
288
-
289
- ```tsx
290
- import { Button, IconButton, ToggleButton } from '@revolist/ui/preact';
291
-
292
- <Button variant="primary" rounded onClick={save}>Save report</Button>
293
- <Button rounded href="https://rv-grid.com/">Explore RevoGrid</Button>
294
- <Button size="compact" disabled>Unavailable</Button>
295
- <Button variant="solid" busy={saving}>Saving</Button>
296
- <ToggleButton pressed={pinned} onPressedChange={setPinned}>Pin</ToggleButton>
297
- ```
298
-
299
- `Button` variants: `default`, `solid`, `primary`, `secondary`, `danger`, `danger-outline`, `ghost`, and `link`. `size` is `default` or `compact`. `rounded` applies pill corners, including icon controls. `href` renders native anchor navigation. `busy` blocks activation while preserving the variant's appearance.
300
-
301
- ## Dropdowns with user images
302
-
303
- ```tsx
304
- import { Avatar, Dropdown } from '@revolist/ui/preact';
305
-
306
- const people = [
307
- { value: 'alex', label: 'Alex Morgan', photo: '/people/alex.jpg' },
308
- { value: 'sam', label: 'Sam Rivera', photo: '/people/sam.jpg' },
309
- ];
310
- const personContent = (_h: unknown, person: { label: string; photo?: string }) => (
311
- <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
312
- <Avatar value={person.photo} label="" initials={person.label[0]} size={16} />
313
- <span>{person.label}</span>
314
- </span>
315
- );
316
-
317
- <Dropdown
318
- className="rv-select"
319
- source={people}
320
- value={personId}
321
- onChange={next => setPersonId(String(next))}
322
- config={{ ariaLabel: 'Team member', topLayer: true, nativeTabNavigation: true }}
323
- renderOption={personContent}
324
- renderValue={personContent}
325
- />
326
- ```
327
-
328
- Use `Combobox` for search and `MultiSelect` for multiple values. See [user images, search and resource examples](https://ui.rv-grid.com/components/selects-chips-and-resources/).
329
-
330
- ## Advanced slider
331
-
332
- ```tsx
333
- import { SliderField } from '@revolist/ui/filter/filters/slider/single';
334
-
335
- <SliderField
336
- label="Saved"
337
- ariaLabel="Savings goal completion"
338
- layout="stacked"
339
- min={0}
340
- max={20000}
341
- step={50}
342
- value={saved}
343
- valuePlacement="end"
344
- formatValue={value => `${Math.round(value / 20000 * 100)}%`}
345
- onChange={setSaved}
346
- />
347
- ```
348
-
349
- `layout="stacked"` gives the slider a full-width row; `valuePlacement="end"` puts the formatted value beside the label. Optional accent colors, ticks and thumb callouts are shown on the [Sliders page](https://ui.rv-grid.com/components/sliders/).
350
-
351
- ## Conditional chart colors
352
-
353
- ```tsx
354
- import { BarChart } from '@revolist/ui/preact';
355
-
356
- const largestExpense = Math.max(...expenses.map(item => item.value));
357
-
358
- <BarChart
359
- data={expenses}
360
- ariaLabel="Expenses by category"
361
- height={170}
362
- showGrid
363
- showLabels
364
- tooltipIndicator="dot"
365
- barColor={datum => datum.value === largestExpense ? '#f97316' : undefined}
366
- />
367
- ```
368
-
369
- Each datum has `key`, `value`, and `tooltip: { title, details? }`; optional `selected` controls emphasis. `barColor` accepts a CSS color or `(datum, index) => color | undefined`. Returning `undefined` retains the theme color. Tooltip markers use the resolved bar color. See [Charts and range selection](https://ui.rv-grid.com/components/charts-and-range-selection/).
370
-
371
- ## Interactive timeline
372
-
373
- ```tsx
374
- import { TimelineTrack } from '@revolist/ui/timeline-track';
375
-
376
- // Application-owned rows; retain these metadata fields when committing changes.
377
- const initialRows = [
378
- { id: 'build', event: { start: 8, end: 12, label: 'Build', color: '#2563eb', textColor: '#ffffff' } },
379
- { id: 'review', event: {
380
- start: 14, end: 18, label: 'Review', color: '#7c3aed', textColor: '#ffffff',
381
- segments: [{ color: '#7c3aed', weight: 3 }, { color: '#c2410c', weight: 1 }],
382
- } },
383
- ];
76
+ ## RevoGrid products
384
77
 
385
- <TimelineTrack
386
- rows={rows}
387
- selected={selected}
388
- range={{ start: 0, end: 24 }}
389
- onSelect={setSelected}
390
- onEventChange={(id, event) => setRows(current => current.map(row => row.id === id ? { ...row, event } : row))}
391
- formatValue={value => `${String(value).padStart(2, '0')}:00`}
392
- />
393
- ```
78
+ Build alongside [RevoGrid](https://rv-grid.com/), [Grid Pro](https://pro.rv-grid.com/), [Charts](https://rv-grid.com/charts/), [Pivot](https://rv-grid.com/pivot/), [Gantt](https://rv-grid.com/gantt/), [Scheduler](https://rv-grid.com/jsscheduler/), and [Kanban](https://rv-grid.com/kanban/).
394
79
 
395
- Events support single colors or weighted color segments. Moving/resizing preserves metadata and scales phase proportions. Hover/focus tooltips show the event name and range; use `getTooltip` for custom text or `tooltip={false}` to disable them. Pointer dragging and Left/Right keyboard controls are demonstrated on [Timeline track](https://ui.rv-grid.com/components/timeline-track/).
80
+ ## Licensing
396
81
 
397
- `TimeGrid` is the separate weekly-availability surface. Compose it with `useTimeGridInteraction` for painting and keyboard movement; provide cells, focus state, day/hour labels, weekends and working hours. See [weekly planning and calendar examples](https://ui.rv-grid.com/components/calendar-and-dates/).
82
+ Revo UI is [MIT licensed](LICENSE). Anyone can use, modify, and distribute it, including in commercial projects.
398
83
 
399
- ## Theming, sizing, and motion
84
+ ## Develop from source
400
85
 
401
- Load shared styles once, then configure semantic tokens rather than duplicating control styles. The gallery demonstrates light/dark themes and right-to-left layouts. [Explore interface colors](https://ui.rv-grid.com/colors/).
86
+ This repository contains the MIT-licensed Revo UI library and its gallery demo. No private repository access is needed.
402
87
 
403
- ```css
404
- .my-workspace {
405
- --rv-ui-accent: #2563eb;
406
- --rv-control-height: 32px;
407
- --rv-control-font-size: 0.875rem;
408
- }
88
+ ```sh
89
+ pnpm install --frozen-lockfile
90
+ pnpm dev
91
+ pnpm --filter @revolist/ui lint
92
+ pnpm --filter @revolist/ui test
93
+ pnpm build
94
+ pnpm --filter @revolist/ui pack:public
95
+ pnpm --filter @revolist/ui test:public
96
+ pnpm build:demo
409
97
  ```
410
98
 
411
- Standard single-line inputs, dropdowns and buttons use matching 32px minimum height and 14px text at the default root font size. Explicit compact controls, multiline editors, editable titles and grid scene controls have their own sizing. Use `rv-control--compact` where the compact field presentation is needed.
412
-
413
- Motion follows the system's reduced-motion preference. `data-rv-ui-motion="off"` on the document root disables shared UI motion; removing it restores system behavior. Do not force animations on for users who requested reduced motion.
414
-
415
- ## Accessibility and localization
416
-
417
- - Give icon-only actions and controls meaningful accessible names; connect visible labels, hints and errors to their fields.
418
- - Preserve keyboard focus and use the shared dropdown, dialog and tooltip lifecycles. Disabled options remain announced but cannot be chosen.
419
- - Provide localized labels through each component's `text`, `labels`, or related typed configuration. Use the date/calendar APIs for locale and calendar-system choices.
420
- - Keep application state and authorization in the host application. A visual disabled or readonly state does not replace server-side permissions.
421
- - Test your composed workflow with keyboard, reduced motion, light/dark themes and RTL. Accessibility of an application depends on its content and composition, not only the controls.
422
-
423
- ## RevoGrid products
424
-
425
- | Product | Website | Documentation |
426
- | --- | --- | --- |
427
- | RevoGrid | [rv-grid.com](https://rv-grid.com/) | [Core docs](https://rv-grid.com/guide/) |
428
- | Grid Pro | [RevoGrid Pro](https://pro.rv-grid.com/) | [Pro guides](https://pro.rv-grid.com/guides/installation/) |
429
- | Pivot | [Pivot tables](https://rv-grid.com/pivot/) | [Pivot guide](https://pro.rv-grid.com/guides/pivot/) |
430
- | Charts | [JavaScript charts](https://rv-grid.com/charts/) | [Pro documentation](https://pro.rv-grid.com/) |
431
- | Gantt | [Gantt charts](https://rv-grid.com/gantt/) | [Gantt guide](https://pro.rv-grid.com/guides/gantt/) |
432
- | Scheduler | [Resource scheduling](https://rv-grid.com/jsscheduler/) | [Pro documentation](https://pro.rv-grid.com/) |
433
- | Kanban | [Kanban boards](https://rv-grid.com/kanban/) | [Pro documentation](https://pro.rv-grid.com/) |
434
-
435
- ## Repository and support
436
-
437
- - [Revo UI on GitHub](https://github.com/revolist/revo-ui): gallery app, documentation, and project information.
438
- - [Component API reference](https://github.com/revolist/revo-ui/blob/main/docs/component-reference.md#complete-component-reference): individual component props and API details.
439
- - [Issues](https://github.com/revolist/revo-ui/issues): report bugs or request improvements; include your framework, package version, and a minimal reproduction.
440
- - [npm package](https://www.npmjs.com/package/@revolist/ui): published versions and installation information.
441
-
442
- ## Licensing
443
-
444
- Revo UI is [MIT licensed](LICENSE). Anyone can use, modify, and distribute it, including in commercial projects.
99
+ Library source lives directly in `package/`; the root manifest owns its public exports. The internal workspace packages in `internal/` provide date and chart utilities that are bundled into the public distribution. Gallery source lives in `src/`.
445
100
 
446
- See [Current UI APIs](MIGRATION.md) for removed compatibility names and consumer migrations.
101
+ Gallery and package builds share `vite.config.ts`; library builds select `--mode library`. The npm archive uses this README. The `package/` folder contains source only. All manifests, scripts, configuration and project documentation live at the repository root. The gallery in `src/` is the demo.