boreal-ui 0.0.890 → 0.0.892

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 (309) hide show
  1. package/README.md +4 -2
  2. package/README.npm.md +452 -450
  3. package/dist/core/{Accordion-TH1eafve.js → Accordion-Ca-YTsyh.js} +1 -1
  4. package/dist/core/Accordion.js +1 -1
  5. package/dist/core/{Avatar-DMkCihD8.js → Avatar-vwMaqd_Z.js} +1 -1
  6. package/dist/core/Avatar.js +1 -1
  7. package/dist/core/{Badge-Bk_A0284.js → Badge-BacQa6GO.js} +6 -6
  8. package/dist/core/Badge.js +1 -1
  9. package/dist/core/{Breadcrumbs-BKGwSa3h.js → Breadcrumbs-BbKsTJYG.js} +2 -2
  10. package/dist/core/Breadcrumbs.js +1 -1
  11. package/dist/core/{Button-CCxqbqTa.js → Button-C4gRx85g.js} +1 -1
  12. package/dist/core/Button.js +1 -1
  13. package/dist/core/{Card-Ch2Fi_JO.js → Card-BCRE_212.js} +4 -4
  14. package/dist/core/Card.js +1 -1
  15. package/dist/core/{Checkbox-veVDK7IF.js → Checkbox-C7ZLcONz.js} +1 -1
  16. package/dist/core/Checkbox.js +4 -0
  17. package/dist/core/{Chip-Buh7BASZ.js → Chip-BJsv99pn.js} +2 -2
  18. package/dist/core/Chip.js +1 -1
  19. package/dist/core/ChipGroup-B9bbZwce.js +135 -0
  20. package/dist/core/ChipGroup-FTVZhhMy.cjs +1 -0
  21. package/dist/core/ChipGroup.cjs.js +1 -0
  22. package/dist/core/ChipGroup.js +4 -0
  23. package/dist/core/{CircularProgress-Ctn44E5J.js → CircularProgress-9Whx0NNW.js} +1 -1
  24. package/dist/core/CircularProgress.js +1 -1
  25. package/dist/core/{ColorPicker-DafqIWSP.js → ColorPicker-Dn4gYuZK.js} +1 -1
  26. package/dist/core/ColorPicker.js +1 -1
  27. package/dist/core/{CommandPalette-CN4LrZ4X.js → CommandPalette-QyrhYmTe.js} +2 -2
  28. package/dist/core/CommandPalette.js +1 -1
  29. package/dist/core/{DataTable-DCyb-imf.js → DataTable-CIzyCBMe.js} +1 -1
  30. package/dist/core/DataTable.js +1 -1
  31. package/dist/core/{DateTimePicker-B9E3VjSN.js → DateTimePicker-DOOqfq3k.js} +1 -1
  32. package/dist/core/DateTimePicker.js +1 -1
  33. package/dist/core/{Divider-Be5dThEh.js → Divider-Bp09Y4cC.js} +1 -1
  34. package/dist/core/Divider.js +1 -1
  35. package/dist/core/{Dropdown-ysQsRPkI.js → Dropdown-Bn5CJ_cq.js} +2 -2
  36. package/dist/core/Dropdown.js +1 -1
  37. package/dist/core/{EmptyState-BYj-k4N8.js → EmptyState-D6RWs4Fw.js} +2 -2
  38. package/dist/core/EmptyState.js +1 -1
  39. package/dist/core/{FileUpload-BSSHZGoU.js → FileUpload-qZoUPMhI.js} +40 -40
  40. package/dist/core/FileUpload.js +1 -1
  41. package/dist/core/Footer-CmpLvoZb.cjs +1 -0
  42. package/dist/core/Footer-CoFPqecX.js +499 -0
  43. package/dist/core/Footer.cjs.js +1 -1
  44. package/dist/core/Footer.js +1 -1
  45. package/dist/core/{IconButton-BfMahcMh.js → IconButton-Dq8m4yuP.js} +1 -1
  46. package/dist/core/IconButton.js +1 -1
  47. package/dist/core/{MarkdownRenderer-BkLTaibn.js → MarkdownRenderer-DWOmLKt9.js} +1 -1
  48. package/dist/core/MarkdownRenderer.js +1 -1
  49. package/dist/core/{MessagePopup-gy5YOlH6.js → MessagePopup-BVffuAo9.js} +3 -3
  50. package/dist/core/MessagePopup.js +4 -0
  51. package/dist/core/{MetricBox-DZ8Hznah.js → MetricBox-8zq_MOaf.js} +1 -1
  52. package/dist/core/MetricBox.js +1 -1
  53. package/dist/core/{Modal-De93Hyrm.js → Modal-DgxOkW2j.js} +2 -2
  54. package/dist/core/Modal.js +1 -1
  55. package/dist/core/{NavBar-CtB3fYDQ.js → NavBar-BRHva7SR.js} +8 -8
  56. package/dist/core/Navbar.js +4 -0
  57. package/dist/core/{NotificationCenter-ChvEaunu.js → NotificationCenter-BKa7dQ6Q.js} +3 -3
  58. package/dist/core/NotificationCenter.js +1 -1
  59. package/dist/core/{Pager-BDLgjKX_.js → Pager-cJV7XjGl.js} +3 -3
  60. package/dist/core/Pager.js +1 -1
  61. package/dist/core/{PopOver-B8rqH1Hd.js → PopOver-wXCdMjo1.js} +1 -1
  62. package/dist/core/Popover.js +4 -0
  63. package/dist/core/{ProgressBar-FYByLbqz.js → ProgressBar-_o6fITsc.js} +1 -1
  64. package/dist/core/ProgressBar.js +1 -1
  65. package/dist/core/RadioButton.cjs.js +1 -1
  66. package/dist/core/RadioButton.js +1 -1
  67. package/dist/core/{RadioGroup-BE7ap9Q-.cjs → RadioGroup-Bdjdyec3.cjs} +1 -1
  68. package/dist/core/{RadioGroup-CIi8TMS6.js → RadioGroup-D1nlf4NZ.js} +30 -31
  69. package/dist/core/RadioGroup.cjs.js +1 -1
  70. package/dist/core/RadioGroup.js +1 -1
  71. package/dist/core/{Rating-DSaL08tW.js → Rating-C2ZtYBJg.js} +1 -1
  72. package/dist/core/Rating.js +1 -1
  73. package/dist/core/{ScrollToTop-C1B7dzRT.js → ScrollToTop-B5Db9dTW.js} +1 -1
  74. package/dist/core/ScrollToTop.js +1 -1
  75. package/dist/core/{Select-0YF1mL1x.js → Select-BtEKKotT.js} +1 -1
  76. package/dist/core/Select.js +1 -1
  77. package/dist/core/{Sidebar-D3DC4A4M.js → Sidebar-Bh2jCCus.js} +30 -30
  78. package/dist/core/Sidebar.js +1 -1
  79. package/dist/core/{Skeleton-BAG5fpNL.js → Skeleton-DXFd6yR_.js} +1 -1
  80. package/dist/core/Skeleton.js +1 -1
  81. package/dist/core/{Slider-DTjLKkU6.js → Slider-Dz0LeNww.js} +1 -1
  82. package/dist/core/Slider.js +1 -1
  83. package/dist/core/{Spinner-Cr7pB1Nr.js → Spinner-Dosj9otP.js} +14 -14
  84. package/dist/core/Spinner.js +1 -1
  85. package/dist/core/{Stepper-ZFQHZANQ.js → Stepper-GCqlEAH7.js} +12 -12
  86. package/dist/core/Stepper.js +1 -1
  87. package/dist/core/{Tabs-Cj0ap4OJ.js → Tabs-Blwnvx8m.js} +1 -1
  88. package/dist/core/Tabs.js +1 -1
  89. package/dist/core/{TagInput-DqdbjMou.js → TagInput-HtNd4Geh.js} +9 -9
  90. package/dist/core/TagInput.js +1 -1
  91. package/dist/core/{TextArea-Bs5rQYrW.js → TextArea-DGt2Gg8V.js} +1 -1
  92. package/dist/core/TextArea.js +1 -1
  93. package/dist/core/{TextInput-4LmKkS2c.js → TextInput-6X1gVpit.js} +13 -13
  94. package/dist/core/TextInput.js +1 -1
  95. package/dist/core/ThemeContext-D1VVOPG1.cjs +1 -0
  96. package/dist/core/{ThemeContext-DFVNYGOV.js → ThemeContext-DRXOWRyX.js} +165 -139
  97. package/dist/core/ThemeProvider.cjs.js +1 -1
  98. package/dist/core/ThemeProvider.js +1 -1
  99. package/dist/core/ThemeSelect-CPpf-wbN.cjs +1 -0
  100. package/dist/core/ThemeSelect-DxmyeZm_.js +71 -0
  101. package/dist/core/ThemeSelect.cjs.js +1 -0
  102. package/dist/core/ThemeSelect.js +4 -0
  103. package/dist/core/{Timeline-DXNbMnbQ.js → Timeline-BEWENd0r.js} +1 -1
  104. package/dist/core/Timeline.js +1 -1
  105. package/dist/core/{Toggle-iws5JAO5.js → Toggle-QENaIEKW.js} +1 -1
  106. package/dist/core/Toggle.js +1 -1
  107. package/dist/core/{Toolbar-DZR6SW8R.js → Toolbar-DV13gdUt.js} +7 -7
  108. package/dist/core/Toolbar.js +1 -1
  109. package/dist/core/{Tooltip-DyhZZJ3O.js → Tooltip-B7qNyJVE.js} +6 -6
  110. package/dist/core/Tooltip.js +1 -1
  111. package/dist/core/{Typography-DRZq3Isx.js → Typography-oCY4Pof0.js} +1 -1
  112. package/dist/core/Typography.js +1 -1
  113. package/dist/core/{boreal-style-config-C_UvmPI9.js → boreal-style-config-rYvfCHLY.js} +5 -5
  114. package/dist/core/index.cjs.js +4 -4
  115. package/dist/core/index.js +230 -340
  116. package/dist/generated-docs/Footer.props.js +9 -0
  117. package/dist/generated-docs/ThemeSelect.props.js +9 -0
  118. package/dist/next/{Accordion-Co4OLbTw.js → Accordion-n2CblCmc.js} +1 -1
  119. package/dist/next/Accordion.js +1 -1
  120. package/dist/next/{Avatar-LjsC6ioW.js → Avatar-IGW3cJGu.js} +1 -1
  121. package/dist/next/Avatar.js +1 -1
  122. package/dist/next/{Badge-taFlYzN7.js → Badge-BvoYwpEB.js} +1 -1
  123. package/dist/next/Badge.js +1 -1
  124. package/dist/next/{Breadcrumbs-DbMKXQB1.js → Breadcrumbs-DKGek98b.js} +2 -2
  125. package/dist/next/Breadcrumbs.js +1 -1
  126. package/dist/next/{Button-BNXrqIJd.js → Button-CwrETCBO.js} +1 -1
  127. package/dist/next/Button.js +1 -1
  128. package/dist/next/{Card-CceNdRIa.js → Card-BHlRPnic.js} +4 -4
  129. package/dist/next/Card.js +1 -1
  130. package/dist/next/{Checkbox-DPAF1KNu.js → Checkbox-D9Yq0CVt.js} +1 -1
  131. package/dist/next/Checkbox.js +5 -0
  132. package/dist/next/{Chip-D6zkwOiq.js → Chip-BJ8AgmOs.js} +14 -14
  133. package/dist/next/Chip.js +1 -1
  134. package/dist/next/ChipGroup-DdKu5Cvw.js +138 -0
  135. package/dist/next/ChipGroup.js +5 -0
  136. package/dist/next/{CircularProgress-Ct8ziw6Q.js → CircularProgress-BdZZ-ISe.js} +37 -37
  137. package/dist/next/CircularProgress.js +1 -1
  138. package/dist/next/{ColorPicker-B2l5URHq.js → ColorPicker-C-g5-oAF.js} +27 -27
  139. package/dist/next/ColorPicker.js +1 -1
  140. package/dist/next/{CommandPalette-CCjXNlBD.js → CommandPalette-NSYtszXq.js} +41 -41
  141. package/dist/next/CommandPalette.js +1 -1
  142. package/dist/next/{DataTable-BN4XibEB.js → DataTable-DwavmP9T.js} +1 -1
  143. package/dist/next/DataTable.js +1 -1
  144. package/dist/next/{DateTimePicker-pImaTn0f.js → DateTimePicker-JPfRrgkd.js} +36 -36
  145. package/dist/next/DateTimePicker.js +1 -1
  146. package/dist/next/{Divider-CTK7pgTp.js → Divider-BfaPNhmz.js} +22 -22
  147. package/dist/next/Divider.js +1 -1
  148. package/dist/next/{Dropdown-xf3TP2gN.js → Dropdown-tmE5RI-T.js} +45 -45
  149. package/dist/next/Dropdown.js +1 -1
  150. package/dist/next/{EmptyState-CEpFX119.js → EmptyState-D1hK4Rjp.js} +44 -44
  151. package/dist/next/EmptyState.js +1 -1
  152. package/dist/next/{FileUpload-BJAzIQF4.js → FileUpload-5jVycHrE.js} +50 -50
  153. package/dist/next/FileUpload.js +1 -1
  154. package/dist/next/Footer-D78Lzvjg.js +511 -0
  155. package/dist/next/Footer.js +1 -1
  156. package/dist/next/{IconButton-BO_aUFXb.js → IconButton-DZg1dNRI.js} +1 -1
  157. package/dist/next/IconButton.js +1 -1
  158. package/dist/next/{MarkdownRenderer-DG4IhBWf.js → MarkdownRenderer-lE6jpT9I.js} +1 -1
  159. package/dist/next/MarkdownRenderer.js +1 -1
  160. package/dist/next/{MessagePopup-5lTq7MGE.js → MessagePopup-BIgiY8CG.js} +3 -3
  161. package/dist/next/MessagePopup.js +5 -0
  162. package/dist/next/{MetricBox-DY_5Hw2c.js → MetricBox-DFhnVzFx.js} +1 -1
  163. package/dist/next/MetricBox.js +1 -1
  164. package/dist/next/{Modal-CukQF5jo.js → Modal-BtGTgAWt.js} +2 -2
  165. package/dist/next/Modal.js +1 -1
  166. package/dist/next/{NavBar-DPBd_eU3.js → NavBar-B-xlWKdF.js} +1 -1
  167. package/dist/next/Navbar.js +5 -0
  168. package/dist/next/{NextThemeProvider-A6VtyTUj.js → NextThemeProvider-NpALBYoC.js} +1 -1
  169. package/dist/next/{NotificationCenter-CQwHkffm.js → NotificationCenter-Dwpfcgdg.js} +3 -3
  170. package/dist/next/NotificationCenter.js +1 -1
  171. package/dist/next/{Pager-c69pdVtt.js → Pager-Bo3wLFtJ.js} +3 -3
  172. package/dist/next/Pager.js +1 -1
  173. package/dist/next/{PopOver-Cquv0_t_.js → PopOver-L_eZPELu.js} +1 -1
  174. package/dist/next/Popover.js +5 -0
  175. package/dist/next/{ProgressBar-BburpTS6.js → ProgressBar-DD5cvm5E.js} +1 -1
  176. package/dist/next/ProgressBar.js +1 -1
  177. package/dist/next/{RadioButton-CIyExY0U.js → RadioButton-BHoW7U55.js} +1 -1
  178. package/dist/next/RadioButton.js +2 -2
  179. package/dist/next/{RadioGroup-DvWO5a43.js → RadioGroup-DEFfETJs.js} +1 -2
  180. package/dist/next/RadioGroup.js +1 -1
  181. package/dist/next/{Rating-xnSWSRW0.js → Rating-Cm7_Imgv.js} +1 -1
  182. package/dist/next/Rating.js +1 -1
  183. package/dist/next/{ScrollToTop-Cc4pkUsN.js → ScrollToTop-MaejIn4U.js} +1 -1
  184. package/dist/next/ScrollToTop.js +1 -1
  185. package/dist/next/{Select-To9v81bu.js → Select-BJoe21vP.js} +1 -1
  186. package/dist/next/Select.js +1 -1
  187. package/dist/next/{Sidebar-BkcYQr8v.js → Sidebar-DYNqARud.js} +1 -1
  188. package/dist/next/Sidebar.js +1 -1
  189. package/dist/next/{Skeleton-BfcvTJ8_.js → Skeleton-BpDSExuk.js} +1 -1
  190. package/dist/next/Skeleton.js +1 -1
  191. package/dist/next/{Slider-BX9NMQBr.js → Slider-plx0lY04.js} +1 -1
  192. package/dist/next/Slider.js +1 -1
  193. package/dist/next/{Spinner-Do_9sSo0.js → Spinner-2UwrWdfP.js} +1 -1
  194. package/dist/next/Spinner.js +1 -1
  195. package/dist/next/{Stepper-CqJSCc3g.js → Stepper-u3qlCX3g.js} +2 -2
  196. package/dist/next/Stepper.js +1 -1
  197. package/dist/next/{Tabs-BT4lS3Qt.js → Tabs-Drw-uDfV.js} +1 -1
  198. package/dist/next/Tabs.js +1 -1
  199. package/dist/next/{TagInput-CyHiRs0i.js → TagInput-44YuRj4h.js} +3 -3
  200. package/dist/next/TagInput.js +1 -1
  201. package/dist/next/{TextArea-Coetd5pM.js → TextArea-CN4jvDmU.js} +1 -1
  202. package/dist/next/TextArea.js +1 -1
  203. package/dist/next/{TextInput-CGu2h16D.js → TextInput-BQ5K5T5P.js} +2 -2
  204. package/dist/next/TextInput.js +1 -1
  205. package/dist/next/{ThemeContext-BAYIo3D-.js → ThemeContext-19HbcfZg.js} +165 -139
  206. package/dist/next/ThemeProvider.js +2 -2
  207. package/dist/next/ThemeSelect-BdFqSfT_.js +72 -0
  208. package/dist/next/ThemeSelect.js +5 -0
  209. package/dist/next/{Timeline-BVRmgBD-.js → Timeline-Cef4zrPt.js} +1 -1
  210. package/dist/next/Timeline.js +1 -1
  211. package/dist/next/{Toggle-IaImZnL9.js → Toggle-DP4WQioq.js} +1 -1
  212. package/dist/next/Toggle.js +1 -1
  213. package/dist/next/{Toolbar-BhXwcqTi.js → Toolbar-BWhlmRY8.js} +8 -8
  214. package/dist/next/Toolbar.js +1 -1
  215. package/dist/next/{Tooltip-Bv3ODUcD.js → Tooltip-CEclPNYV.js} +9 -9
  216. package/dist/next/Tooltip.js +1 -1
  217. package/dist/next/{Typography-afxBZdty.js → Typography-B3GoXqWS.js} +1 -1
  218. package/dist/next/Typography.js +1 -1
  219. package/dist/next/{boreal-style-config-C_UvmPI9.js → boreal-style-config-rYvfCHLY.js} +5 -5
  220. package/dist/next/index.js +231 -343
  221. package/dist/tsconfig.build.tsbuildinfo +1 -1
  222. package/dist/types/components/Footer/Footer.types.d.ts +6 -0
  223. package/dist/types/components/Footer/Footer.types.d.ts.map +1 -1
  224. package/dist/types/components/Footer/FooterBase.d.ts.map +1 -1
  225. package/dist/types/components/RadioButton/RadioGroupBase.d.ts.map +1 -1
  226. package/dist/types/components/Select/Select.types.d.ts +1 -0
  227. package/dist/types/components/Select/Select.types.d.ts.map +1 -1
  228. package/dist/types/components/Select/ThemeSelect/core/ThemeSelect.d.ts.map +1 -1
  229. package/dist/types/components/Select/ThemeSelect/next/ThemeSelect.d.ts.map +1 -1
  230. package/dist/types/context/ThemeContext.d.ts.map +1 -1
  231. package/dist/types/context/themeRuntime.d.ts +3 -1
  232. package/dist/types/context/themeRuntime.d.ts.map +1 -1
  233. package/dist/types/core/{CheckBox.d.ts → Checkbox.d.ts} +1 -1
  234. package/dist/types/core/Checkbox.d.ts.map +1 -0
  235. package/dist/types/core/ChipGroup.d.ts +4 -0
  236. package/dist/types/core/ChipGroup.d.ts.map +1 -0
  237. package/dist/types/core/{MessagePopUp.d.ts → MessagePopup.d.ts} +1 -1
  238. package/dist/types/core/MessagePopup.d.ts.map +1 -0
  239. package/dist/types/core/{NavBar.d.ts → Navbar.d.ts} +1 -1
  240. package/dist/types/core/Navbar.d.ts.map +1 -0
  241. package/dist/types/core/{PopOver.d.ts → Popover.d.ts} +1 -1
  242. package/dist/types/core/Popover.d.ts.map +1 -0
  243. package/dist/types/core/ThemeSelect.d.ts +3 -0
  244. package/dist/types/core/ThemeSelect.d.ts.map +1 -0
  245. package/dist/types/generated-docs/Footer.props.d.ts.map +1 -1
  246. package/dist/types/generated-docs/ThemeSelect.props.d.ts.map +1 -1
  247. package/dist/types/index.core.d.ts +2 -2
  248. package/dist/types/index.next.d.ts +2 -2
  249. package/dist/types/next/{CheckBox.d.ts → Checkbox.d.ts} +1 -1
  250. package/dist/types/next/Checkbox.d.ts.map +1 -0
  251. package/dist/types/next/ChipGroup.d.ts +4 -0
  252. package/dist/types/next/ChipGroup.d.ts.map +1 -0
  253. package/dist/types/next/{MessagePopUp.d.ts → MessagePopup.d.ts} +1 -1
  254. package/dist/types/next/MessagePopup.d.ts.map +1 -0
  255. package/dist/types/next/{NavBar.d.ts → Navbar.d.ts} +1 -1
  256. package/dist/types/next/Navbar.d.ts.map +1 -0
  257. package/dist/types/next/{PopOver.d.ts → Popover.d.ts} +1 -1
  258. package/dist/types/next/Popover.d.ts.map +1 -0
  259. package/dist/types/next/ThemeSelect.d.ts +3 -0
  260. package/dist/types/next/ThemeSelect.d.ts.map +1 -0
  261. package/docs/README.md +10 -9
  262. package/docs/accessibility.md +4 -4
  263. package/docs/cli.md +261 -0
  264. package/docs/component-api-patterns.md +1 -1
  265. package/docs/development-workflow.md +105 -105
  266. package/docs/installation-and-imports.md +57 -55
  267. package/docs/prop-docs-and-types.md +43 -43
  268. package/docs/public-api-reference.md +142 -144
  269. package/docs/styling-and-theming.md +112 -112
  270. package/package.json +154 -134
  271. package/packages/cli/src/commands/init.js +754 -754
  272. package/packages/cli/src/index.js +9 -9
  273. package/packages/cli/src/utils/args.js +64 -64
  274. package/packages/cli/src/utils/constants.js +11 -11
  275. package/packages/cli/src/utils/help.js +26 -26
  276. package/packages/cli/src/utils/prompts.js +71 -71
  277. package/dist/core/CheckBox.js +0 -4
  278. package/dist/core/Footer-6H7E0aW5.cjs +0 -1
  279. package/dist/core/Footer-DC_LqIlJ.js +0 -536
  280. package/dist/core/MessagePopUp.js +0 -4
  281. package/dist/core/NavBar.js +0 -4
  282. package/dist/core/PopOver.js +0 -4
  283. package/dist/core/ThemeContext-BosEFe2d.cjs +0 -1
  284. package/dist/core/registerColorSheme.cjs.js +0 -1
  285. package/dist/core/registerColorSheme.js +0 -4
  286. package/dist/next/CheckBox.js +0 -5
  287. package/dist/next/Footer-znmCP-MT.js +0 -549
  288. package/dist/next/MessagePopUp.js +0 -5
  289. package/dist/next/NavBar.js +0 -5
  290. package/dist/next/PopOver.js +0 -5
  291. package/dist/next/registerColorSheme.js +0 -4
  292. package/dist/types/core/CheckBox.d.ts.map +0 -1
  293. package/dist/types/core/MessagePopUp.d.ts.map +0 -1
  294. package/dist/types/core/NavBar.d.ts.map +0 -1
  295. package/dist/types/core/PopOver.d.ts.map +0 -1
  296. package/dist/types/core/registerColorSheme.d.ts +0 -2
  297. package/dist/types/core/registerColorSheme.d.ts.map +0 -1
  298. package/dist/types/next/CheckBox.d.ts.map +0 -1
  299. package/dist/types/next/MessagePopUp.d.ts.map +0 -1
  300. package/dist/types/next/NavBar.d.ts.map +0 -1
  301. package/dist/types/next/PopOver.d.ts.map +0 -1
  302. package/dist/types/next/registerColorSheme.d.ts +0 -2
  303. package/dist/types/next/registerColorSheme.d.ts.map +0 -1
  304. /package/dist/core/{CheckBox.cjs.js → Checkbox.cjs.js} +0 -0
  305. /package/dist/core/{index.css → ChipGroup.css} +0 -0
  306. /package/dist/core/{MessagePopUp.cjs.js → MessagePopup.cjs.js} +0 -0
  307. /package/dist/core/{NavBar.cjs.js → Navbar.cjs.js} +0 -0
  308. /package/dist/core/{PopOver.cjs.js → Popover.cjs.js} +0 -0
  309. /package/dist/next/{index.css → ChipGroup.css} +0 -0
package/README.npm.md CHANGED
@@ -1,450 +1,452 @@
1
- # Boreal UI
2
-
3
- Boreal UI is a customizable, accessible React and Next.js component library with SCSS-powered theming, TypeScript types, generated prop metadata, and parallel `core` and `next` package outputs.
4
-
5
- Use it when you want production-ready UI primitives that can be themed globally, customized per component, tested predictably, and imported in either standard React apps or Next.js app-router projects.
6
-
7
- ## Highlights
8
-
9
- - **React and Next.js builds:** import from `boreal-ui/core` for React apps or `boreal-ui/next` for Next.js apps.
10
- - **Deep component set:** buttons, forms, navigation, data display, feedback, overlays, layout primitives, and utility components.
11
- - **Theme system:** curated color schemes, custom schemes, runtime theme selection, CSS variables, and `ThemeSelect`.
12
- - **Global defaults:** configure default theme, size, rounding, shadow, border width, glass, outline, and color scheme once with `borealConfig`.
13
- - **Accessible by default:** semantic markup, ARIA support, keyboard behavior, visible focus states, disabled states, live announcements where useful, and predictable test IDs.
14
- - **Styling flexibility:** theme, state, size, rounding, shadow, outline, glass, custom class names, SCSS variables, and consumer CSS overrides.
15
- - **Typed public API:** TypeScript component props, shared type exports, and generated prop documentation objects for docs tooling.
16
-
17
- ## Installation
18
-
19
- ```bash
20
- npm install boreal-ui
21
- ```
22
-
23
- Boreal UI expects React and React DOM in the consuming app. Next.js users should also have Next installed.
24
-
25
- Some components and utilities rely on `marked` and `uuid`, so make sure they are available if your package manager does not install peer dependencies automatically.
26
-
27
- ## CLI Setup
28
-
29
- Use the CLI inside an existing React or Next.js project to add the package dependency, global stylesheet import, `ThemeProvider`, and default style config.
30
-
31
- ```bash
32
- npx boreal-ui@latest init
33
- ```
34
-
35
- Preview changes before writing files:
36
-
37
- ```bash
38
- npx boreal-ui init --dry-run
39
- ```
40
-
41
- Run non-interactively:
42
-
43
- ```bash
44
- npx boreal-ui init --framework next --yes
45
- ```
46
-
47
- For Next.js projects, you can also apply Boreal’s recommended global CSS baseline:
48
-
49
- ```bash
50
- npx boreal-ui init --framework next --recommended-globals
51
- ```
52
-
53
- ## Setup
54
-
55
- Import the global stylesheet once near the top of your application.
56
-
57
- ## React
58
-
59
- ```tsx
60
- import "boreal-ui/core/globals.css";
61
- ```
62
-
63
- Then import components from the core build:
64
-
65
- ```tsx
66
- import { Button, Card, TextInput } from "boreal-ui/core";
67
-
68
- export function Example() {
69
- return (
70
- <Card title="Welcome" theme="primary" shadow="medium">
71
- <TextInput label="Project name" placeholder="Aurora dashboard" />
72
- <Button theme="secondary" size="large">
73
- Continue
74
- </Button>
75
- </Card>
76
- );
77
- }
78
- ```
79
-
80
- ## Next.js
81
-
82
- Import the Next stylesheet once from `app/layout.tsx`, `pages/_app.tsx`, or your global stylesheet.
83
-
84
- ```tsx
85
- import "boreal-ui/next/globals.css";
86
- ```
87
-
88
- Then import components from the Next build:
89
-
90
- ```tsx
91
- "use client";
92
-
93
- import { Button, Card, TextInput } from "boreal-ui/next";
94
-
95
- export default function Example() {
96
- return (
97
- <Card title="Welcome" theme="primary" shadow="medium">
98
- <TextInput label="Project name" placeholder="Aurora dashboard" />
99
- <Button theme="secondary" size="large">
100
- Continue
101
- </Button>
102
- </Card>
103
- );
104
- }
105
- ```
106
-
107
- ### Next.js Global CSS Note
108
-
109
- If your Next.js app still has the default starter reset below, avoid loading it after Boreal styles:
110
-
111
- ```css
112
- * {
113
- box-sizing: border-box;
114
- padding: 0;
115
- margin: 0;
116
- }
117
- ```
118
-
119
- The universal `padding` and `margin` reset can override spacing that Boreal components and nested content rely on.
120
-
121
- Prefer this safer baseline:
122
-
123
- ```css
124
- html {
125
- box-sizing: border-box;
126
- }
127
-
128
- *,
129
- *::before,
130
- *::after {
131
- box-sizing: inherit;
132
- }
133
-
134
- body {
135
- margin: 0;
136
- }
137
- ```
138
-
139
- ## Standalone Component Imports
140
-
141
- You can import individual components directly:
142
-
143
- ```tsx
144
- import Button from "boreal-ui/core/Button";
145
- import Card from "boreal-ui/next/Card";
146
- ```
147
-
148
- ## Package Entry Points
149
-
150
- ```tsx
151
- import { Button } from "boreal-ui/core";
152
- import Button from "boreal-ui/core/Button";
153
- import "boreal-ui/core/globals.css";
154
-
155
- import { Button as NextButton } from "boreal-ui/next";
156
- import NextCard from "boreal-ui/next/Card";
157
- import "boreal-ui/next/globals.css";
158
- ```
159
-
160
- The root `boreal-ui` entry currently points to the core build. For Next.js apps, prefer `boreal-ui/next` so the Next wrappers and client directives are used.
161
-
162
- ## Components
163
-
164
- ### Actions
165
-
166
- - `Button`
167
- - `IconButton`
168
- - `ScrollToTop`
169
-
170
- ### Forms and Inputs
171
-
172
- - `TextInput`
173
- - `TextArea`
174
- - `Select`
175
- - `ThemeSelect`
176
- - `Checkbox`
177
- - `RadioButton`
178
- - `RadioGroup`
179
- - `Toggle`
180
- - `Slider`
181
- - `ColorPicker`
182
- - `DateTimePicker`
183
- - `FileUpload`
184
- - `TagInput`
185
- - `FormGroup`
186
-
187
- ### Data and Content
188
-
189
- - `DataTable`
190
- - `MarkdownRenderer`
191
- - `Typography`
192
- - `MetricBox`
193
-
194
- ### Feedback and Status
195
-
196
- - `Badge`
197
- - `Chip`
198
- - `ChipGroup`
199
- - `Progressbar`
200
- - `CircularProgress`
201
- - `Spinner`
202
- - `Skeleton`
203
- - `Rating`
204
- - `Tooltip`
205
- - `MessagePopup`
206
- - `PopOver`
207
- - `Modal`
208
- - `NotificationCenter`
209
- - `EmptyState`
210
-
211
- ### Navigation and Layout
212
-
213
- - `Navbar`
214
- - `Sidebar`
215
- - `Footer`
216
- - `Breadcrumbs`
217
- - `Tabs`
218
- - `Stepper`
219
- - `Timeline`
220
- - `Accordion`
221
- - `Pager`
222
- - `Toolbar`
223
- - `Dropdown`
224
- - `Divider`
225
- - `Card`
226
- - `Avatar`
227
-
228
- ## Common Styling Props
229
-
230
- Many components share the same styling vocabulary:
231
-
232
- | Prop | Values |
233
- | ------------- | --------------------------------------------------------- |
234
- | `theme` | `primary`, `secondary`, `tertiary`, `quaternary`, `clear` |
235
- | `state` | `success`, `error`, `warning`, `disabled`, empty string |
236
- | `size` | `xs`, `small`, `medium`, `large`, `xl` |
237
- | `rounding` | `none`, `small`, `medium`, `large`, `full` |
238
- | `shadow` | `none`, `light`, `medium`, `strong`, `intense` |
239
- | `borderWidth` | `none`, `xs`, `small`, `medium`, `large`, `xl` |
240
- | `outline` | outline treatment where supported |
241
- | `glass` | translucent theme-aware surface where supported |
242
- | `className` | consumer styling hook |
243
- | `data-testid` | stable test selector |
244
-
245
- Exact props vary by component. TypeScript and the generated prop docs are the source of truth for each component.
246
-
247
- ## Global Style Defaults
248
-
249
- Call `borealConfig` once before rendering your app to set project-wide defaults.
250
-
251
- ```tsx
252
- import { borealConfig } from "boreal-ui/core";
253
-
254
- borealConfig({
255
- defaultTheme: "secondary",
256
- defaultSize: "medium",
257
- defaultRounding: "medium",
258
- defaultShadow: "light",
259
- defaultBorderWidth: "none",
260
- defaultGlass: false,
261
- defaultOutline: false,
262
- defaultColorSchemeName: "Forest Dusk",
263
- });
264
- ```
265
-
266
- For Next.js, import the same API from `boreal-ui/next`:
267
-
268
- ```tsx
269
- import { borealConfig } from "boreal-ui/next";
270
- ```
271
-
272
- Component props still win over global defaults:
273
-
274
- ```tsx
275
- <Button theme="primary" size="large" shadow="strong">
276
- Save changes
277
- </Button>
278
- ```
279
-
280
- ## Theme Provider and Color Schemes
281
-
282
- `ThemeProvider` manages the active color scheme and writes the scheme into CSS variables used by Boreal UI components.
283
-
284
- ```tsx
285
- "use client";
286
-
287
- import { ThemeProvider } from "boreal-ui/next";
288
-
289
- const customSchemes = [
290
- {
291
- name: "Cyberpunk Pulse",
292
- primaryColor: "#ff006e",
293
- secondaryColor: "#8338ec",
294
- tertiaryColor: "#3a0ca3",
295
- quaternaryColor: "#fb5607",
296
- backgroundColor: "#0f0f0f",
297
- forceTextColor: "#ffffff",
298
- },
299
- ];
300
-
301
- export function Providers({ children }: { children: React.ReactNode }) {
302
- return (
303
- <ThemeProvider
304
- customSchemes={customSchemes}
305
- enableThemeScript={false}
306
- initialSchemeName="Cyberpunk Pulse"
307
- >
308
- {children}
309
- </ThemeProvider>
310
- );
311
- }
312
- ```
313
-
314
- ### ThemeProvider Props
315
-
316
- | Prop | Description |
317
- | ---------------------- | ---------------------------------------------------------------------------------------- |
318
- | `customSchemes` | Register additional color schemes at runtime. |
319
- | `enableThemeScript` | Render the pre-hydration theme script. Defaults to `true` for core and `false` for Next. |
320
- | `initialSchemeName` | Select an initial scheme by name. |
321
- | `useOnlyCustomSchemes` | Use only custom schemes instead of the built-in list. |
322
-
323
- ### Color Scheme Shape
324
-
325
- ```ts
326
- type ColorScheme = {
327
- name: string;
328
- primaryColor: string;
329
- secondaryColor: string;
330
- tertiaryColor: string;
331
- quaternaryColor: string;
332
- backgroundColor: string;
333
- forceTextColor?: string;
334
- };
335
- ```
336
-
337
- You can also register schemes manually:
338
-
339
- ```tsx
340
- import {
341
- defaultColorSchemes,
342
- registerColorScheme,
343
- ThemeSelect,
344
- } from "boreal-ui/core";
345
-
346
- registerColorScheme({
347
- name: "Brand Night",
348
- primaryColor: "#4f46e5",
349
- secondaryColor: "#06b6d4",
350
- tertiaryColor: "#a855f7",
351
- quaternaryColor: "#22c55e",
352
- backgroundColor: "#0f172a",
353
- forceTextColor: "#ffffff",
354
- });
355
-
356
- console.log(defaultColorSchemes.map((scheme) => scheme.name));
357
- ```
358
-
359
- ## Type Exports
360
-
361
- Shared public types are exported from both builds:
362
-
363
- ```ts
364
- import type {
365
- BorderType,
366
- ColorScheme,
367
- RoundingType,
368
- ShadowType,
369
- SizeType,
370
- ThemeType,
371
- } from "boreal-ui/core";
372
- ```
373
-
374
- Standalone type entry points are also available:
375
-
376
- ```ts
377
- import type { ThemeType } from "boreal-ui/core/types";
378
- import type { SizeType } from "boreal-ui/next/types";
379
- ```
380
-
381
- ## Generated Prop Docs
382
-
383
- Boreal UI exports generated prop metadata for documentation sites, playgrounds, and prop tables.
384
-
385
- ```tsx
386
- import { buttonPropDocs, dataTablePropDocs } from "boreal-ui/core";
387
-
388
- console.log(buttonPropDocs.name);
389
- console.log(dataTablePropDocs.props);
390
- ```
391
-
392
- The docs export includes `GeneratedComponentDoc` and `GeneratedPropDoc` types, plus one prop-doc object per documented component.
393
-
394
- ## CSS Customization
395
-
396
- Boreal UI styles are built on CSS variables and SCSS. You can override variables globally or scope them to a subtree:
397
-
398
- ```css
399
- :root {
400
- --font-family-ui: Inter, system-ui, sans-serif;
401
- --border-radius-md: 0.5rem;
402
- --transition-default: 160ms ease;
403
- --focus-outline-color: #2563eb;
404
- }
405
-
406
- .admin-shell {
407
- --background-color: #0f172a;
408
- --text-color: #f8fafc;
409
- }
410
- ```
411
-
412
- Most components also accept `className`, and larger components expose section-level class props such as:
413
-
414
- ```tsx
415
- <Card
416
- title="Custom Card"
417
- className="dashboard-card"
418
- headerClassName="dashboard-card__header"
419
- contentClassName="dashboard-card__content"
420
- footerClassName="dashboard-card__footer"
421
- />
422
- ```
423
-
424
- ## Accessibility and Testing
425
-
426
- Boreal UI is designed for Testing Library, Jest, jest-axe, Cypress, and Storybook workflows.
427
-
428
- - Prefer roles and accessible names in tests.
429
- - Use `data-testid` when a stable selector is needed.
430
- - Icon-only controls should receive an accessible label.
431
- - Helper and error text are connected with ARIA where components support those states.
432
- - Interactive components are built with keyboard behavior and visible focus states in mind.
433
-
434
- ```tsx
435
- import { render, screen } from "@testing-library/react";
436
- import { Button } from "boreal-ui/core";
437
-
438
- it("renders an accessible button", () => {
439
- render(<Button>Submit</Button>);
440
- expect(screen.getByRole("button", { name: /submit/i })).toBeInTheDocument();
441
- });
442
- ```
443
-
444
- ## Documentation
445
-
446
- For full documentation, examples, and API guides, [View the Boreal UI docs](https://www.borealui.ca)
447
-
448
- ## License
449
-
450
- MIT © Davin Chiupka
1
+ # Boreal UI
2
+
3
+ Boreal UI is a customizable, accessible React and Next.js component library with SCSS-powered theming, TypeScript types, generated prop metadata, and parallel `core` and `next` package outputs.
4
+
5
+ Use it when you want production-ready UI primitives that can be themed globally, customized per component, tested predictably, and imported in either standard React apps or Next.js app-router projects.
6
+
7
+ ## Highlights
8
+
9
+ - **React and Next.js builds:** import from `boreal-ui/core` for React apps or `boreal-ui/next` for Next.js apps.
10
+ - **Deep component set:** buttons, forms, navigation, data display, feedback, overlays, layout primitives, and utility components.
11
+ - **Theme system:** curated color schemes, custom schemes, runtime theme selection, CSS variables, and `ThemeSelect`.
12
+ - **Global defaults:** configure default theme, size, rounding, shadow, border width, glass, outline, and color scheme once with `borealConfig`.
13
+ - **Accessible by default:** semantic markup, ARIA support, keyboard behavior, visible focus states, disabled states, live announcements where useful, and predictable test IDs.
14
+ - **Styling flexibility:** theme, state, size, rounding, shadow, outline, glass, custom class names, SCSS variables, and consumer CSS overrides.
15
+ - **Typed public API:** TypeScript component props, shared type exports, and generated prop documentation objects for docs tooling.
16
+
17
+ ## Installation
18
+
19
+ ```bash
20
+ npm install boreal-ui
21
+ ```
22
+
23
+ Boreal UI expects React and React DOM in the consuming app. Next.js users should also have Next installed.
24
+
25
+ Some components and utilities rely on `marked` and `uuid`, so make sure they are available if your package manager does not install peer dependencies automatically.
26
+
27
+ ## CLI Setup
28
+
29
+ Use the CLI inside an existing React or Next.js project to add the package dependency, global stylesheet import, `ThemeProvider`, and default style config.
30
+
31
+ ```bash
32
+ npx boreal-ui@latest init
33
+ ```
34
+
35
+ Preview changes before writing files:
36
+
37
+ ```bash
38
+ npx boreal-ui init --dry-run
39
+ ```
40
+
41
+ Run non-interactively:
42
+
43
+ ```bash
44
+ npx boreal-ui init --framework next --yes
45
+ ```
46
+
47
+ For Next.js projects, you can also apply Boreal’s recommended global CSS baseline:
48
+
49
+ ```bash
50
+ npx boreal-ui init --framework next --recommended-globals
51
+ ```
52
+
53
+ See [CLI guide](./docs/cli.md) for all commands, options, prompts, and generated file changes.
54
+
55
+ ## Setup
56
+
57
+ Import the global stylesheet once near the top of your application.
58
+
59
+ ## React
60
+
61
+ ```tsx
62
+ import "boreal-ui/core/globals.css";
63
+ ```
64
+
65
+ Then import components from the core build:
66
+
67
+ ```tsx
68
+ import { Button, Card, TextInput } from "boreal-ui/core";
69
+
70
+ export function Example() {
71
+ return (
72
+ <Card title="Welcome" theme="primary" shadow="medium">
73
+ <TextInput label="Project name" placeholder="Aurora dashboard" />
74
+ <Button theme="secondary" size="large">
75
+ Continue
76
+ </Button>
77
+ </Card>
78
+ );
79
+ }
80
+ ```
81
+
82
+ ## Next.js
83
+
84
+ Import the Next stylesheet once from `app/layout.tsx`, `pages/_app.tsx`, or your global stylesheet.
85
+
86
+ ```tsx
87
+ import "boreal-ui/next/globals.css";
88
+ ```
89
+
90
+ Then import components from the Next build:
91
+
92
+ ```tsx
93
+ "use client";
94
+
95
+ import { Button, Card, TextInput } from "boreal-ui/next";
96
+
97
+ export default function Example() {
98
+ return (
99
+ <Card title="Welcome" theme="primary" shadow="medium">
100
+ <TextInput label="Project name" placeholder="Aurora dashboard" />
101
+ <Button theme="secondary" size="large">
102
+ Continue
103
+ </Button>
104
+ </Card>
105
+ );
106
+ }
107
+ ```
108
+
109
+ ### Next.js Global CSS Note
110
+
111
+ If your Next.js app still has the default starter reset below, avoid loading it after Boreal styles:
112
+
113
+ ```css
114
+ * {
115
+ box-sizing: border-box;
116
+ padding: 0;
117
+ margin: 0;
118
+ }
119
+ ```
120
+
121
+ The universal `padding` and `margin` reset can override spacing that Boreal components and nested content rely on.
122
+
123
+ Prefer this safer baseline:
124
+
125
+ ```css
126
+ html {
127
+ box-sizing: border-box;
128
+ }
129
+
130
+ *,
131
+ *::before,
132
+ *::after {
133
+ box-sizing: inherit;
134
+ }
135
+
136
+ body {
137
+ margin: 0;
138
+ }
139
+ ```
140
+
141
+ ## Standalone Component Imports
142
+
143
+ You can import individual components directly:
144
+
145
+ ```tsx
146
+ import Button from "boreal-ui/core/Button";
147
+ import Card from "boreal-ui/next/Card";
148
+ ```
149
+
150
+ ## Package Entry Points
151
+
152
+ ```tsx
153
+ import { Button } from "boreal-ui/core";
154
+ import Button from "boreal-ui/core/Button";
155
+ import "boreal-ui/core/globals.css";
156
+
157
+ import { Button as NextButton } from "boreal-ui/next";
158
+ import NextCard from "boreal-ui/next/Card";
159
+ import "boreal-ui/next/globals.css";
160
+ ```
161
+
162
+ The root `boreal-ui` entry currently points to the core build. For Next.js apps, prefer `boreal-ui/next` so the Next wrappers and client directives are used.
163
+
164
+ ## Components
165
+
166
+ ### Actions
167
+
168
+ - `Button`
169
+ - `IconButton`
170
+ - `ScrollToTop`
171
+
172
+ ### Forms and Inputs
173
+
174
+ - `TextInput`
175
+ - `TextArea`
176
+ - `Select`
177
+ - `ThemeSelect`
178
+ - `Checkbox`
179
+ - `RadioButton`
180
+ - `RadioGroup`
181
+ - `Toggle`
182
+ - `Slider`
183
+ - `ColorPicker`
184
+ - `DateTimePicker`
185
+ - `FileUpload`
186
+ - `TagInput`
187
+ - `FormGroup`
188
+
189
+ ### Data and Content
190
+
191
+ - `DataTable`
192
+ - `MarkdownRenderer`
193
+ - `Typography`
194
+ - `MetricBox`
195
+
196
+ ### Feedback and Status
197
+
198
+ - `Badge`
199
+ - `Chip`
200
+ - `ChipGroup`
201
+ - `ProgressBar`
202
+ - `CircularProgress`
203
+ - `Spinner`
204
+ - `Skeleton`
205
+ - `Rating`
206
+ - `Tooltip`
207
+ - `MessagePopup`
208
+ - `Popover`
209
+ - `Modal`
210
+ - `NotificationCenter`
211
+ - `EmptyState`
212
+
213
+ ### Navigation and Layout
214
+
215
+ - `Navbar`
216
+ - `Sidebar`
217
+ - `Footer`
218
+ - `Breadcrumbs`
219
+ - `Tabs`
220
+ - `Stepper`
221
+ - `Timeline`
222
+ - `Accordion`
223
+ - `Pager`
224
+ - `Toolbar`
225
+ - `Dropdown`
226
+ - `Divider`
227
+ - `Card`
228
+ - `Avatar`
229
+
230
+ ## Common Styling Props
231
+
232
+ Many components share the same styling vocabulary:
233
+
234
+ | Prop | Values |
235
+ | ------------- | --------------------------------------------------------- |
236
+ | `theme` | `primary`, `secondary`, `tertiary`, `quaternary`, `clear` |
237
+ | `state` | `success`, `error`, `warning`, `disabled`, empty string |
238
+ | `size` | `xs`, `small`, `medium`, `large`, `xl` |
239
+ | `rounding` | `none`, `small`, `medium`, `large`, `full` |
240
+ | `shadow` | `none`, `light`, `medium`, `strong`, `intense` |
241
+ | `borderWidth` | `none`, `xs`, `small`, `medium`, `large`, `xl` |
242
+ | `outline` | outline treatment where supported |
243
+ | `glass` | translucent theme-aware surface where supported |
244
+ | `className` | consumer styling hook |
245
+ | `data-testid` | stable test selector |
246
+
247
+ Exact props vary by component. TypeScript and the generated prop docs are the source of truth for each component.
248
+
249
+ ## Global Style Defaults
250
+
251
+ Call `borealConfig` once before rendering your app to set project-wide defaults.
252
+
253
+ ```tsx
254
+ import { borealConfig } from "boreal-ui/core";
255
+
256
+ borealConfig({
257
+ defaultTheme: "secondary",
258
+ defaultSize: "medium",
259
+ defaultRounding: "medium",
260
+ defaultShadow: "light",
261
+ defaultBorderWidth: "none",
262
+ defaultGlass: false,
263
+ defaultOutline: false,
264
+ defaultColorSchemeName: "Forest Dusk",
265
+ });
266
+ ```
267
+
268
+ For Next.js, import the same API from `boreal-ui/next`:
269
+
270
+ ```tsx
271
+ import { borealConfig } from "boreal-ui/next";
272
+ ```
273
+
274
+ Component props still win over global defaults:
275
+
276
+ ```tsx
277
+ <Button theme="primary" size="large" shadow="strong">
278
+ Save changes
279
+ </Button>
280
+ ```
281
+
282
+ ## Theme Provider and Color Schemes
283
+
284
+ `ThemeProvider` manages the active color scheme and writes the scheme into CSS variables used by Boreal UI components.
285
+
286
+ ```tsx
287
+ "use client";
288
+
289
+ import { ThemeProvider } from "boreal-ui/next";
290
+
291
+ const customSchemes = [
292
+ {
293
+ name: "Cyberpunk Pulse",
294
+ primaryColor: "#ff006e",
295
+ secondaryColor: "#8338ec",
296
+ tertiaryColor: "#3a0ca3",
297
+ quaternaryColor: "#fb5607",
298
+ backgroundColor: "#0f0f0f",
299
+ forceTextColor: "#ffffff",
300
+ },
301
+ ];
302
+
303
+ export function Providers({ children }: { children: React.ReactNode }) {
304
+ return (
305
+ <ThemeProvider
306
+ customSchemes={customSchemes}
307
+ enableThemeScript={false}
308
+ initialSchemeName="Cyberpunk Pulse"
309
+ >
310
+ {children}
311
+ </ThemeProvider>
312
+ );
313
+ }
314
+ ```
315
+
316
+ ### ThemeProvider Props
317
+
318
+ | Prop | Description |
319
+ | ---------------------- | ---------------------------------------------------------------------------------------- |
320
+ | `customSchemes` | Register additional color schemes at runtime. |
321
+ | `enableThemeScript` | Render the pre-hydration theme script. Defaults to `true` for core and `false` for Next. |
322
+ | `initialSchemeName` | Select an initial scheme by name. |
323
+ | `useOnlyCustomSchemes` | Use only custom schemes instead of the built-in list. |
324
+
325
+ ### Color Scheme Shape
326
+
327
+ ```ts
328
+ type ColorScheme = {
329
+ name: string;
330
+ primaryColor: string;
331
+ secondaryColor: string;
332
+ tertiaryColor: string;
333
+ quaternaryColor: string;
334
+ backgroundColor: string;
335
+ forceTextColor?: string;
336
+ };
337
+ ```
338
+
339
+ You can also register schemes manually:
340
+
341
+ ```tsx
342
+ import {
343
+ defaultColorSchemes,
344
+ registerColorScheme,
345
+ ThemeSelect,
346
+ } from "boreal-ui/core";
347
+
348
+ registerColorScheme({
349
+ name: "Brand Night",
350
+ primaryColor: "#4f46e5",
351
+ secondaryColor: "#06b6d4",
352
+ tertiaryColor: "#a855f7",
353
+ quaternaryColor: "#22c55e",
354
+ backgroundColor: "#0f172a",
355
+ forceTextColor: "#ffffff",
356
+ });
357
+
358
+ console.log(defaultColorSchemes.map((scheme) => scheme.name));
359
+ ```
360
+
361
+ ## Type Exports
362
+
363
+ Shared public types are exported from both builds:
364
+
365
+ ```ts
366
+ import type {
367
+ BorderType,
368
+ ColorScheme,
369
+ RoundingType,
370
+ ShadowType,
371
+ SizeType,
372
+ ThemeType,
373
+ } from "boreal-ui/core";
374
+ ```
375
+
376
+ Standalone type entry points are also available:
377
+
378
+ ```ts
379
+ import type { ThemeType } from "boreal-ui/core/types";
380
+ import type { SizeType } from "boreal-ui/next/types";
381
+ ```
382
+
383
+ ## Generated Prop Docs
384
+
385
+ Boreal UI exports generated prop metadata for documentation sites, playgrounds, and prop tables.
386
+
387
+ ```tsx
388
+ import { buttonPropDocs, dataTablePropDocs } from "boreal-ui/core";
389
+
390
+ console.log(buttonPropDocs.name);
391
+ console.log(dataTablePropDocs.props);
392
+ ```
393
+
394
+ The docs export includes `GeneratedComponentDoc` and `GeneratedPropDoc` types, plus one prop-doc object per documented component.
395
+
396
+ ## CSS Customization
397
+
398
+ Boreal UI styles are built on CSS variables and SCSS. You can override variables globally or scope them to a subtree:
399
+
400
+ ```css
401
+ :root {
402
+ --font-family-ui: Inter, system-ui, sans-serif;
403
+ --border-radius-md: 0.5rem;
404
+ --transition-default: 160ms ease;
405
+ --focus-outline-color: #2563eb;
406
+ }
407
+
408
+ .admin-shell {
409
+ --background-color: #0f172a;
410
+ --text-color: #f8fafc;
411
+ }
412
+ ```
413
+
414
+ Most components also accept `className`, and larger components expose section-level class props such as:
415
+
416
+ ```tsx
417
+ <Card
418
+ title="Custom Card"
419
+ className="dashboard-card"
420
+ headerClassName="dashboard-card__header"
421
+ contentClassName="dashboard-card__content"
422
+ footerClassName="dashboard-card__footer"
423
+ />
424
+ ```
425
+
426
+ ## Accessibility and Testing
427
+
428
+ Boreal UI is designed for Testing Library, Jest, jest-axe, Cypress, and Storybook workflows.
429
+
430
+ - Prefer roles and accessible names in tests.
431
+ - Use `data-testid` when a stable selector is needed.
432
+ - Icon-only controls should receive an accessible label.
433
+ - Helper and error text are connected with ARIA where components support those states.
434
+ - Interactive components are built with keyboard behavior and visible focus states in mind.
435
+
436
+ ```tsx
437
+ import { render, screen } from "@testing-library/react";
438
+ import { Button } from "boreal-ui/core";
439
+
440
+ it("renders an accessible button", () => {
441
+ render(<Button>Submit</Button>);
442
+ expect(screen.getByRole("button", { name: /submit/i })).toBeInTheDocument();
443
+ });
444
+ ```
445
+
446
+ ## Documentation
447
+
448
+ For full documentation, examples, and API guides, [View the Boreal UI docs](https://www.borealui.ca)
449
+
450
+ ## License
451
+
452
+ MIT © Davin Chiupka