kelt-ui-kit-react 2.0.8 → 2.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 (319) hide show
  1. package/.github/workflows/publish.yml +40 -31
  2. package/README.md +124 -72
  3. package/dist/App.d.ts +2 -3
  4. package/dist/App.menu.d.ts +10 -10
  5. package/dist/App.routes.d.ts +1 -1
  6. package/dist/_core/hooks/HistoryProvider.d.ts +5 -5
  7. package/dist/_core/hooks/ImageChecker.d.ts +5 -6
  8. package/dist/_core/hooks/imageExist.d.ts +5 -6
  9. package/dist/_core/hooks/isEAN13.d.ts +1 -1
  10. package/dist/_core/hooks/objectToQueryParams.d.ts +1 -1
  11. package/dist/_core/hooks/useCurrency.d.ts +3 -3
  12. package/dist/_core/hooks/useDateutils.d.ts +4 -4
  13. package/dist/_core/hooks/useIsMobile.d.ts +1 -1
  14. package/dist/_core/hooks/useToken.d.ts +3 -3
  15. package/dist/_core/hooks/useValidate.d.ts +5 -5
  16. package/dist/_core/hooks/widgetSupport.d.ts +1 -1
  17. package/dist/_core/type/generiqueType.d.ts +4 -0
  18. package/dist/action/Action.view.d.ts +1 -1
  19. package/dist/action/ButtonAction.d.ts +8 -9
  20. package/dist/addressSearch/AddressSearch.d.ts +18 -19
  21. package/dist/addressSearch/AddressSearch.view.d.ts +1 -1
  22. package/dist/badge/Badge.d.ts +10 -9
  23. package/dist/badge/Badge.view.d.ts +1 -1
  24. package/dist/button/Button.d.ts +1 -2
  25. package/dist/button/Button.view.d.ts +1 -1
  26. package/dist/button/button.interface.d.ts +19 -20
  27. package/dist/button/buttonActions/ButtonActions.d.ts +11 -12
  28. package/dist/button/buttonFile/ButtonFile.d.ts +9 -9
  29. package/dist/button/buttonFile/ButtonFile.view.d.ts +1 -1
  30. package/dist/button/buttonFilters/ButtonFilters.d.ts +16 -17
  31. package/dist/card/Card.d.ts +14 -15
  32. package/dist/card/Card.view.d.ts +1 -1
  33. package/dist/card/card.interface.d.ts +10 -10
  34. package/dist/card/cardAction/CardAction.d.ts +13 -14
  35. package/dist/card/cardAction.interface.d.ts +8 -9
  36. package/dist/card/hook/useCardInteractions.d.ts +8 -8
  37. package/dist/carousel/Carousel.d.ts +14 -15
  38. package/dist/carousel/Carousel.view.d.ts +1 -1
  39. package/dist/damier/Damier.d.ts +9 -10
  40. package/dist/damier/Damier.view.d.ts +1 -1
  41. package/dist/damier/damierCell/DamierCell.d.ts +6 -7
  42. package/dist/damier/damierCell/damierCell.interface.d.ts +6 -6
  43. package/dist/dataTable/DataTable.d.ts +37 -33
  44. package/dist/dataTable/DataTable.view.d.ts +1 -1
  45. package/dist/dataTable/dataTable.interface.d.ts +70 -47
  46. package/dist/dataTable/dataTable.utils.d.ts +17 -0
  47. package/dist/dataTable/dataTableActions/DataTableAction.d.ts +9 -10
  48. package/dist/dataTable/dataTableColumn/DataTableColumn.d.ts +14 -8
  49. package/dist/dataTable/dataTableColumn/dataTableColumnFilter/DataTableColumnFilter.d.ts +9 -0
  50. package/dist/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDate/DataTableColumnFilterDate.d.ts +9 -0
  51. package/dist/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDateRange/dataTableColumnFilterDateRange.d.ts +9 -0
  52. package/dist/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterEnum/DataTableColumnFilterEnum.d.ts +12 -0
  53. package/dist/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterString/DataTableColumnFilterString.d.ts +9 -0
  54. package/dist/dataTable/dataTableColumn/dataTableColumnSort/DataTableColumnSort.d.ts +10 -0
  55. package/dist/dataTable/dataTableFilters/DataTableFilters.d.ts +6 -0
  56. package/dist/dataTable/dataTableLoading/DataTableLoading.d.ts +8 -7
  57. package/dist/dataTable/dataTableRow/DataTableRow.d.ts +12 -11
  58. package/dist/dataTable/useDataTableState.d.ts +13 -0
  59. package/dist/datePicker/DatePicker.d.ts +7 -8
  60. package/dist/datePicker/DatePicker.view.d.ts +1 -1
  61. package/dist/docs/ComponentDocs.d.ts +6 -0
  62. package/dist/docs/catalog.d.ts +8 -0
  63. package/dist/docs/documentation.types.d.ts +21 -0
  64. package/dist/expands/Expands.d.ts +11 -12
  65. package/dist/expands/Expands.view.d.ts +1 -1
  66. package/dist/expands/expand/expand.d.ts +10 -11
  67. package/dist/expands/expand/expand.interface.d.ts +9 -9
  68. package/dist/filAriane/FilAriane.d.ts +8 -9
  69. package/dist/filAriane/FilAriane.view.d.ts +1 -1
  70. package/dist/filAriane/filAriane.interface.d.ts +6 -6
  71. package/dist/form/Form.d.ts +35 -36
  72. package/dist/form/Form.view.d.ts +1 -1
  73. package/dist/form/form.enum.d.ts +16 -15
  74. package/dist/form/form.interface.d.ts +53 -54
  75. package/dist/form/input/Input.d.ts +27 -25
  76. package/dist/form/inputNumber/InputNumber.d.ts +21 -22
  77. package/dist/form/inputNumber/InputNumber.view.d.ts +1 -1
  78. package/dist/form/inputPrice/InputPrice.d.ts +14 -15
  79. package/dist/form/inputPrice/InputPrice.view.d.ts +1 -1
  80. package/dist/form/textArea/TextArea.d.ts +14 -15
  81. package/dist/form/textArea/TextArea.view.d.ts +1 -1
  82. package/dist/geocoding/GeocodingService.d.ts +11 -12
  83. package/dist/geocoding/geocoding.interface.d.ts +20 -20
  84. package/dist/grid/Grid.d.ts +9 -10
  85. package/dist/grid/Grid.view.d.ts +1 -1
  86. package/dist/grid/col/Col.d.ts +5 -6
  87. package/dist/grid/col/colStyled/ColStyled.d.ts +10 -11
  88. package/dist/grid/container/Container.d.ts +5 -6
  89. package/dist/grid/grid.interface.d.ts +23 -23
  90. package/dist/grid/row/Row.d.ts +13 -14
  91. package/dist/header/Header.d.ts +1 -2
  92. package/dist/header/Header.view.d.ts +1 -1
  93. package/dist/header/header.interface.d.ts +12 -12
  94. package/dist/home/Home.d.ts +1 -1
  95. package/dist/icon/Icon.d.ts +1 -2
  96. package/dist/icon/Icons.view.d.ts +1 -1
  97. package/dist/icon/icon.interface.d.ts +5 -5
  98. package/dist/icon/iconSize.enum.d.ts +7 -7
  99. package/dist/index.d.ts +56 -54
  100. package/dist/index.html +18 -18
  101. package/dist/index.js +4001 -3510
  102. package/dist/loader/Loader.d.ts +7 -8
  103. package/dist/loader/Loader.view.d.ts +1 -1
  104. package/dist/main.d.ts +0 -1
  105. package/dist/manifest.json +25 -25
  106. package/dist/menus/Menus.d.ts +5 -6
  107. package/dist/menus/Menus.view.d.ts +1 -1
  108. package/dist/menus/menu/Menu.d.ts +7 -8
  109. package/dist/menus/menu/menu.interface.d.ts +10 -10
  110. package/dist/message/Message.d.ts +6 -7
  111. package/dist/message/Message.view.d.ts +1 -1
  112. package/dist/modal/Modal.d.ts +13 -14
  113. package/dist/modal/Modal.view.d.ts +1 -1
  114. package/dist/notFound/NotFound.d.ts +1 -1
  115. package/dist/overlayPanel/OverlayPanel.d.ts +22 -23
  116. package/dist/overlayPanel/OverlayPanel.view.d.ts +1 -1
  117. package/dist/overlayPanel/overlay.context.d.ts +9 -10
  118. package/dist/overlayPanel/overlayPanelStyled/OverlayPanelStyled.d.ts +9 -9
  119. package/dist/pdfViewer/PdfViewer.d.ts +12 -12
  120. package/dist/pdfViewer/PdfViewer.view.d.ts +1 -1
  121. package/dist/quantity/Quantity.d.ts +10 -11
  122. package/dist/robots.txt +3 -3
  123. package/dist/search/Search.d.ts +21 -22
  124. package/dist/search/Search.view.d.ts +1 -1
  125. package/dist/select/Select.d.ts +23 -24
  126. package/dist/select/Select.view.d.ts +1 -1
  127. package/dist/select/selectOption.interface.d.ts +5 -5
  128. package/dist/sidebar/Sidebar.d.ts +12 -13
  129. package/dist/sidebar/Sidebar.view.d.ts +1 -1
  130. package/dist/sidebarData/SidebarData.d.ts +6 -7
  131. package/dist/sidebarData/SidebarData.view.d.ts +1 -1
  132. package/dist/style.css +1 -1
  133. package/dist/tabs/Tabs.d.ts +17 -17
  134. package/dist/tabs/Tabs.view.d.ts +1 -1
  135. package/dist/toaster/Toaster.d.ts +1 -2
  136. package/dist/toaster/Toaster.view.d.ts +1 -1
  137. package/dist/toaster/store/useToasterStore.d.ts +24 -24
  138. package/docs.plugin.ts +223 -0
  139. package/index.html +20 -18
  140. package/package.json +64 -56
  141. package/public/index.html +18 -18
  142. package/public/manifest.json +25 -25
  143. package/public/robots.txt +3 -3
  144. package/src/App.css +178 -11
  145. package/src/App.menu.tsx +277 -257
  146. package/src/App.routes.tsx +21 -16
  147. package/src/App.tsx +31 -30
  148. package/src/_core/hooks/HistoryProvider.tsx +25 -25
  149. package/src/_core/hooks/ImageChecker.tsx +26 -26
  150. package/src/_core/hooks/imageExist.tsx +9 -9
  151. package/src/_core/hooks/isEAN13.tsx +16 -16
  152. package/src/_core/hooks/objectToQueryParams.tsx +32 -32
  153. package/src/_core/hooks/useCurrency.tsx +18 -18
  154. package/src/_core/hooks/useDateutils.ts +64 -64
  155. package/src/_core/hooks/useIsMobile.ts +18 -18
  156. package/src/_core/hooks/useToken.tsx +19 -19
  157. package/src/_core/hooks/useValidate.tsx +18 -18
  158. package/src/_core/hooks/widgetSupport.tsx +39 -39
  159. package/src/_core/type/generiqueType.tsx +4 -0
  160. package/src/action/Action.view.tsx +21 -21
  161. package/src/action/ButtonAction.tsx +32 -32
  162. package/src/action/action.css +20 -20
  163. package/src/addressSearch/AddressSearch.tsx +246 -246
  164. package/src/addressSearch/AddressSearch.view.tsx +52 -52
  165. package/src/addressSearch/addressSearch.css +132 -132
  166. package/src/badge/Badge.tsx +41 -34
  167. package/src/badge/Badge.view.tsx +15 -15
  168. package/src/badge/badge.css +63 -55
  169. package/src/button/Button.tsx +48 -48
  170. package/src/button/Button.view.tsx +85 -85
  171. package/src/button/button.css +53 -53
  172. package/src/button/button.interface.tsx +22 -22
  173. package/src/button/buttonActions/ButtonActions.tsx +104 -104
  174. package/src/button/buttonFile/ButtonFile.tsx +59 -59
  175. package/src/button/buttonFile/ButtonFile.view.tsx +70 -70
  176. package/src/button/buttonFilters/ButtonFilters.tsx +102 -102
  177. package/src/button/buttonFilters/buttonFilters.css +22 -22
  178. package/src/card/Card.tsx +151 -151
  179. package/src/card/Card.view.tsx +73 -73
  180. package/src/card/card.css +144 -144
  181. package/src/card/card.interface.tsx +9 -9
  182. package/src/card/cardAction/CardAction.tsx +135 -135
  183. package/src/card/cardAction/cardAction.css +10 -10
  184. package/src/card/cardAction.interface.tsx +10 -10
  185. package/src/card/hook/useCardInteractions.tsx +30 -30
  186. package/src/carousel/Carousel.css +44 -44
  187. package/src/carousel/Carousel.tsx +115 -115
  188. package/src/carousel/Carousel.view.tsx +13 -13
  189. package/src/damier/Damier.tsx +64 -64
  190. package/src/damier/Damier.view.tsx +31 -31
  191. package/src/damier/damier.css +50 -50
  192. package/src/damier/damierCell/DamierCell.tsx +18 -18
  193. package/src/damier/damierCell/damierCell.interface.tsx +5 -5
  194. package/src/dataTable/DataTable.tsx +840 -746
  195. package/src/dataTable/DataTable.view.tsx +105 -71
  196. package/src/dataTable/dataTable.css +233 -208
  197. package/src/dataTable/dataTable.interface.ts +66 -45
  198. package/src/dataTable/dataTable.utils.ts +45 -0
  199. package/src/dataTable/dataTableActions/DataTableAction.tsx +82 -65
  200. package/src/dataTable/dataTableColumn/DataTableColumn.tsx +48 -27
  201. package/src/dataTable/dataTableColumn/dataTableColumnFilter/DataTableColumnFilter.tsx +36 -0
  202. package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilter.css +0 -0
  203. package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDate/DataTableColumnFilterDate.tsx +39 -0
  204. package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDateRange/dataTableColumnFilterDateRange.tsx +80 -0
  205. package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterEnum/DataTableColumnFilterEnum.tsx +89 -0
  206. package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterString/DataTableColumnFilterString.tsx +37 -0
  207. package/src/dataTable/dataTableColumn/dataTableColumnSort/DataTableColumnSort.tsx +42 -0
  208. package/src/dataTable/dataTableFilters/DataTableFilters.tsx +91 -0
  209. package/src/dataTable/dataTableFilters/dataTableFilters.css +16 -0
  210. package/src/dataTable/dataTableLoading/DataTableLoading.tsx +23 -21
  211. package/src/dataTable/dataTableRow/DataTableRow.tsx +155 -208
  212. package/src/dataTable/useDataTableState.tsx +89 -0
  213. package/src/datePicker/DatePicker.tsx +110 -110
  214. package/src/datePicker/DatePicker.view.tsx +9 -9
  215. package/src/datePicker/datePicker.css +77 -77
  216. package/src/docs/ComponentDocs.tsx +156 -0
  217. package/src/docs/catalog.ts +40 -0
  218. package/src/docs/documentation.types.ts +20 -0
  219. package/src/docs/virtual.d.ts +7 -0
  220. package/src/expands/Expands.tsx +46 -46
  221. package/src/expands/Expands.view.tsx +90 -90
  222. package/src/expands/expand/expand.interface.tsx +8 -8
  223. package/src/expands/expand/expand.tsx +191 -191
  224. package/src/expands/expands.css +101 -101
  225. package/src/filAriane/FilAriane.tsx +57 -57
  226. package/src/filAriane/FilAriane.view.tsx +28 -28
  227. package/src/filAriane/filAriane.css +23 -23
  228. package/src/filAriane/filAriane.interface.tsx +6 -6
  229. package/src/form/Form.tsx +477 -477
  230. package/src/form/Form.view.tsx +67 -67
  231. package/src/form/form.css +135 -135
  232. package/src/form/form.enum.ts +16 -15
  233. package/src/form/form.interface.tsx +67 -67
  234. package/src/form/input/Input.tsx +146 -106
  235. package/src/form/input/input.css +39 -29
  236. package/src/form/inputNumber/InputNumber.tsx +132 -132
  237. package/src/form/inputNumber/InputNumber.view.tsx +15 -15
  238. package/src/form/inputPrice/InputPrice.tsx +42 -42
  239. package/src/form/inputPrice/InputPrice.view.tsx +15 -15
  240. package/src/form/textArea/TextArea.tsx +59 -59
  241. package/src/form/textArea/TextArea.view.tsx +34 -34
  242. package/src/form/textArea/textArea.css +9 -9
  243. package/src/geocoding/GeocodingService.ts +89 -89
  244. package/src/geocoding/geocoding.interface.ts +25 -25
  245. package/src/grid/Grid.tsx +34 -34
  246. package/src/grid/Grid.view.tsx +24 -24
  247. package/src/grid/col/Col.tsx +24 -24
  248. package/src/grid/col/col.css +3 -3
  249. package/src/grid/col/colStyled/ColStyled.tsx +59 -59
  250. package/src/grid/container/Container.tsx +8 -8
  251. package/src/grid/container/container.css +4 -4
  252. package/src/grid/grid.interface.tsx +27 -27
  253. package/src/grid/row/Row.tsx +49 -49
  254. package/src/grid/row/row.css +25 -25
  255. package/src/header/Header.tsx +64 -64
  256. package/src/header/Header.view.tsx +5 -5
  257. package/src/header/header.css +43 -43
  258. package/src/header/header.interface.tsx +11 -11
  259. package/src/home/Home.tsx +40 -3
  260. package/src/icon/Icon.tsx +6 -6
  261. package/src/icon/Icons.view.tsx +29 -29
  262. package/src/icon/icon.css +20 -20
  263. package/src/icon/icon.interface.tsx +7 -6
  264. package/src/icon/iconSize.enum.ts +7 -7
  265. package/src/index.css +547 -547
  266. package/src/index.ts +76 -70
  267. package/src/loader/Loader.tsx +37 -37
  268. package/src/loader/Loader.view.tsx +20 -20
  269. package/src/loader/loader.css +30 -30
  270. package/src/main.tsx +10 -10
  271. package/src/menus/Menus.tsx +43 -43
  272. package/src/menus/Menus.view.tsx +39 -39
  273. package/src/menus/menu/Menu.tsx +18 -18
  274. package/src/menus/menu/menu.interface.tsx +9 -9
  275. package/src/menus/menus.css +47 -47
  276. package/src/message/Message.tsx +30 -30
  277. package/src/message/Message.view.tsx +22 -22
  278. package/src/message/message.css +29 -29
  279. package/src/modal/Modal.tsx +59 -59
  280. package/src/modal/Modal.view.tsx +26 -26
  281. package/src/modal/modal.css +71 -71
  282. package/src/notFound/NotFound.tsx +3 -3
  283. package/src/overlayPanel/OverlayPanel.tsx +260 -255
  284. package/src/overlayPanel/OverlayPanel.view.tsx +25 -25
  285. package/src/overlayPanel/overlay.context.tsx +30 -30
  286. package/src/overlayPanel/overlayPanel.css +43 -43
  287. package/src/overlayPanel/overlayPanelStyled/OverlayPanelStyled.tsx +23 -23
  288. package/src/pdfViewer/PdfViewer.tsx +73 -73
  289. package/src/pdfViewer/PdfViewer.view.tsx +5 -5
  290. package/src/quantity/Quantity.tsx +103 -103
  291. package/src/quantity/quantity.css +26 -26
  292. package/src/search/Search.tsx +161 -161
  293. package/src/search/Search.view.tsx +14 -14
  294. package/src/search/search.css +59 -59
  295. package/src/select/Select.tsx +245 -245
  296. package/src/select/Select.view.tsx +71 -71
  297. package/src/select/select.css +150 -150
  298. package/src/select/selectOption.interface.ts +5 -5
  299. package/src/sidebar/Sidebar.tsx +213 -213
  300. package/src/sidebar/Sidebar.view.tsx +17 -17
  301. package/src/sidebar/sidebar.css +103 -103
  302. package/src/sidebarData/SidebarData.tsx +19 -19
  303. package/src/sidebarData/SidebarData.view.tsx +19 -19
  304. package/src/sidebarData/sidebarData.css +27 -27
  305. package/src/tabs/Tabs.tsx +101 -90
  306. package/src/tabs/Tabs.view.tsx +20 -20
  307. package/src/tabs/tabs.css +29 -29
  308. package/src/toaster/Toaster.tsx +61 -61
  309. package/src/toaster/Toaster.view.tsx +25 -25
  310. package/src/toaster/store/useToasterStore.tsx +54 -54
  311. package/src/toaster/toaster.css +105 -105
  312. package/tests/dataTable.test.mjs +93 -0
  313. package/tests/documentation.test.mjs +75 -0
  314. package/tsconfig.docs.json +10 -0
  315. package/tsconfig.json +28 -28
  316. package/vite.config.ts +26 -20
  317. package/vite.config.ts.timestamp-1733262892554-a13dfef6e8a29.mjs +24 -24
  318. package/vite.config.ts.timestamp-1757847121745-e5a5bf54b81b.mjs +28 -28
  319. package/vite.config.ts.timestamp-1759742478362-4ac5c5a7db34b.mjs +28 -28
package/src/App.css CHANGED
@@ -1,11 +1,178 @@
1
- .main-layout {
2
- display: flex;
3
- height: 100vh;
4
- width: 100%;
5
- flex-direction: column;
6
- container: app-container/ inline-size;
7
- & .main-layout-content {
8
- flex: 1;
9
- padding: 2rem;
10
- }
11
- }
1
+ .docs-app {
2
+ --docs-ink: #192a35;
3
+ --docs-muted: #657682;
4
+ --docs-accent: #16776c;
5
+ --docs-line: #e2e8eb;
6
+ --docs-soft: #f3f7f6;
7
+ color: var(--docs-ink);
8
+ background: #fafbfc;
9
+ min-height: 100vh;
10
+ font-family: "Lexend", sans-serif;
11
+ font-size: 14px;
12
+ line-height: 1.6;
13
+ display: grid;
14
+ grid-template-columns: 258px minmax(0, 1fr);
15
+ container: app-container / inline-size;
16
+ }
17
+ .docs-app button, .docs-app input { font: inherit; }
18
+ .docs-app button { cursor: pointer; }
19
+ .docs-tablist > button, .docs-toolbar-actions > button, .docs-category-filters > button, .docs-code-toolbar > button { min-width: 0; max-height: none; font-weight: 400; }
20
+ .docs-app button:focus-visible, .docs-app a:focus-visible, .docs-app input:focus-visible, .docs-app summary:focus-visible { outline: 3px solid #48ad9e; outline-offset: 4px; }
21
+ .docs-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
22
+ .docs-skip-link { position: fixed; top: -100px; left: 20px; z-index: 10000; background: white; padding: 12px 20px; }
23
+ .docs-skip-link:focus { top: 12px; }
24
+ .docs-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: #fff; border-right: 1px solid var(--docs-line); padding: 28px 18px 18px; display: flex; flex-direction: column; gap: 24px; }
25
+ .docs-brand { display: flex; gap: 12px; align-items: center; padding: 0 10px; font-size: 21px; font-weight: 600; letter-spacing: -.8px; }
26
+ .docs-brand-mark { display: grid; place-items: center; background: var(--docs-ink); color: #9ce3cc; border-radius: 13px; width: 42px; height: 42px; font-size: 27px; }
27
+ .docs-brand-subtitle { display: block; font-size: 10px; font-weight: 400; letter-spacing: .3px; color: var(--docs-muted); }
28
+ .docs-search { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--docs-line); background: #fff; border-radius: 9px; color: var(--docs-muted); }
29
+ .docs-search:focus-within { border-color: var(--docs-accent); }
30
+ .docs-search input { width: 100%; min-width: 0; height: auto; padding: 0; margin: 0; border: 0; background: transparent; color: var(--docs-ink); outline: none; font-size: 12px; }
31
+ .docs-sidebar nav { flex: 1; }
32
+ .docs-sidebar nav a { display: flex; align-items: center; gap: 11px; padding: 8px 12px; margin-bottom: 2px; border-radius: 8px; font-size: 12px; color: #536572; transition: background .15s; }
33
+ .docs-sidebar nav a:hover { background: #f5f7f8; }
34
+ .docs-sidebar nav a.active { background: #eaf5f1; color: #116355; font-weight: 500; }
35
+ .docs-sidebar nav a > .bi:first-child { font-size: 15px; width: 18px; }
36
+ .docs-nav-arrow { margin-left: auto; font-size: 9px; opacity: 0; }
37
+ .docs-sidebar nav a.active .docs-nav-arrow { opacity: 1; }
38
+ .docs-nav-group { margin-top: 25px; }
39
+ .docs-nav-group h2 { display: flex; justify-content: space-between; padding: 0 12px; margin-bottom: 9px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: #77868f; font-weight: 500; }
40
+ .docs-nav-group h2 span { letter-spacing: 0; color: #97a2a9; }
41
+ .docs-sidebar-footer { border-top: 1px solid var(--docs-line); padding: 18px 5px 0; font-size: 10px; color: var(--docs-muted); display: flex; align-items: center; gap: 8px; }
42
+ .docs-main { min-width: 0; }
43
+ .docs-topbar { min-height: 72px; border-bottom: 1px solid var(--docs-line); display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 40px; font-size: 10px; letter-spacing: 1.5px; background: #ffffffd9; }
44
+ .docs-topbar > span { color: var(--docs-muted); }
45
+ .docs-topbar-divider { padding: 0 12px; color: #bdc7cd; }
46
+ .docs-topbar a { display: flex; gap: 10px; align-items: center; font-size: 11px; letter-spacing: 0; }
47
+ .docs-content { max-width: 1480px; margin: 0 auto; padding: 42px 40px 60px; }
48
+ .docs-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 500; letter-spacing: 1.8px; color: var(--docs-accent); text-transform: uppercase; }
49
+ .docs-status-dot, .docs-live > span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #289983; flex-shrink: 0; }
50
+ .docs-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; border: 1px solid var(--docs-line); border-radius: 18px; background: linear-gradient(120deg, #fff 35%, #eff7f3); padding: 48px 40px; overflow: hidden; }
51
+ .docs-hero h1 { font-size: clamp(30px, 3.2vw, 48px); font-weight: 500; line-height: 1.2; letter-spacing: -2px; margin: 20px 0; }
52
+ .docs-hero h1 > span { color: var(--docs-accent); }
53
+ .docs-hero-copy > p { max-width: 475px; color: var(--docs-muted); font-size: 13px; line-height: 1.9; }
54
+ .docs-hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 27px; flex-wrap: wrap; font-size: 11px; }
55
+ .docs-hero-actions a { display: flex; align-items: center; gap: 12px; }
56
+ .docs-primary-link { background: var(--docs-ink); color: #fff; border-radius: 8px; padding: 12px 18px; }
57
+ .docs-hero-visual { position: relative; padding: 10px; }
58
+ .docs-mini-window { border: 1px solid #dce5e2; border-radius: 13px; overflow: hidden; background: #fff; box-shadow: 0 20px 40px #1a453014; transform: rotate(-2deg); }
59
+ .docs-window-dots { display: flex; align-items: center; gap: 5px; padding: 15px; border-bottom: 1px solid #edf0f2; }
60
+ .docs-window-dots > span { width: 7px; height: 7px; background: #d5dfdb; border-radius: 50%; }
61
+ .docs-window-dots > code { margin-left: auto; color: #8b999f; font-size: 10px; }
62
+ .docs-mini-window pre { padding: 22px; font-size: 11px; line-height: 1.9; color: #586674; overflow: auto; }
63
+ .docs-mini-window pre > span { color: #8b5cb2; }
64
+ .docs-mini-window pre > em { color: #16776c; font-style: normal; }
65
+ .docs-mini-preview { border-top: 1px solid #edf0f2; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; background: #f8faf9; }
66
+ .docs-mini-preview > span { background: #123852; color: #fff; font-size: 11px; border-radius: 6px; padding: 9px 14px; display: flex; gap: 8px; }
67
+ .docs-mini-preview > small { color: #8b999f; font-size: 9px; }
68
+ .docs-floating-label { position: absolute; right: -10px; bottom: 30px; padding: 9px 12px; border: 1px solid #dce5e2; border-radius: 8px; box-shadow: 0 4px 10px #00000008; background: #fff; color: var(--docs-accent); font-size: 10px; display: flex; gap: 8px; }
69
+ .docs-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 26px 0; border-bottom: 1px solid var(--docs-line); margin-bottom: 38px; }
70
+ .docs-stats > div { display: flex; flex-direction: column; gap: 3px; padding-left: 28px; border-right: 1px solid var(--docs-line); }
71
+ .docs-stats > div:first-child { padding-left: 0; }
72
+ .docs-stats > div:last-child { border: 0; }
73
+ .docs-stats strong { font-weight: 500; font-size: 20px; letter-spacing: -.6px; }
74
+ .docs-stats span { color: var(--docs-muted); font-size: 11px; }
75
+ .docs-catalog-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
76
+ .docs-catalog-heading h2 { font-size: 22px; letter-spacing: -.7px; font-weight: 500; margin-top: 7px; }
77
+ .docs-catalog-heading .docs-search { width: 235px; }
78
+ .docs-category-filters { display: flex; gap: 8px; flex-wrap: wrap; }
79
+ .docs-category-filters button { padding: 7px 14px; border-radius: 7px; border: 1px solid var(--docs-line); color: var(--docs-muted); background: #fff; font-size: 11px; }
80
+ .docs-category-filters button[aria-pressed="true"] { border-color: var(--docs-ink); background: var(--docs-ink); color: white; }
81
+ .docs-result-count { color: var(--docs-muted); font-size: 10px; margin: 18px 0 12px; }
82
+ .docs-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
83
+ .docs-catalog-card { padding: 23px; background: #fff; border: 1px solid var(--docs-line); border-radius: 12px; display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s; }
84
+ .docs-catalog-card:hover { border-color: #93c5b5; box-shadow: 0 6px 22px #14392e0a; }
85
+ .docs-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
86
+ .docs-component-icon { width: 43px; height: 43px; border-radius: 11px; background: #edf5f2; color: var(--docs-accent); display: grid; place-items: center; font-size: 19px; flex-shrink: 0; }
87
+ .docs-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 400; border: 1px solid var(--docs-line); border-radius: 20px; padding: 3px 9px; color: var(--docs-muted); white-space: nowrap; }
88
+ .docs-catalog-card h3 { font-size: 15px; font-weight: 500; margin: 20px 0 7px; }
89
+ .docs-catalog-card p { color: var(--docs-muted); font-size: 11px; line-height: 1.8; flex: 1; }
90
+ .docs-card-link { display: flex; align-items: center; justify-content: space-between; font-size: 10px; margin-top: 22px; padding-top: 14px; border-top: 1px solid #edf0f2; color: var(--docs-accent); }
91
+ .docs-breadcrumb { font-size: 10px; color: var(--docs-muted); margin-bottom: 27px; }
92
+ .docs-breadcrumb > span { padding: 0 10px; color: #b0bdc5; }
93
+ .docs-page-heading { display: flex; align-items: center; gap: 20px; margin-bottom: 34px; }
94
+ .docs-page-heading .docs-component-icon { width: 60px; height: 60px; border-radius: 15px; font-size: 25px; }
95
+ .docs-page-heading h1 { font-size: 34px; line-height: 1.3; font-weight: 500; letter-spacing: -1.2px; margin: 5px 0; }
96
+ .docs-page-heading p { font-size: 12px; color: var(--docs-muted); }
97
+ .docs-live { margin-left: auto; }
98
+ .docs-workbench { background: #fff; border: 1px solid var(--docs-line); border-radius: 13px; overflow: hidden; }
99
+ .docs-tablist { display: flex; gap: 24px; border-bottom: 1px solid var(--docs-line); padding: 0 24px; }
100
+ .docs-tablist > button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--docs-muted); padding: 18px 0; display: flex; align-items: center; gap: 9px; font-size: 12px; }
101
+ .docs-tablist > button[aria-selected="true"] { color: var(--docs-accent); border-bottom-color: var(--docs-accent); }
102
+ .docs-tab-count { font-size: 9px; background: #edf3f1; padding: 1px 6px; border-radius: 5px; }
103
+ .docs-preview-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid #eff2f3; padding: 14px 24px; font-size: 10px; color: var(--docs-muted); }
104
+ .docs-preview-toolbar > span { display: flex; align-items: center; gap: 8px; }
105
+ .docs-toolbar-actions { display: flex; gap: 6px; }
106
+ .docs-toolbar-actions > button { display: flex; align-items: center; gap: 7px; font-size: 10px; border: 1px solid var(--docs-line); border-radius: 6px; background: #fff; padding: 5px 9px; color: var(--docs-muted); }
107
+ .docs-toolbar-actions > button[aria-pressed="true"] { background: var(--docs-soft); color: var(--docs-accent); }
108
+ .docs-preview { min-height: 320px; padding: 38px 28px; background: #fcfdfd; overflow: auto; }
109
+ .docs-preview-grid { background-image: radial-gradient(#dce4e7 .7px, transparent .7px); background-size: 16px 16px; }
110
+ .docs-preview-frame { width: 100%; min-width: 0; container: app-container / inline-size; font-size: 18px; line-height: normal; color: #000; }
111
+ .docs-preview-frame.is-mobile { max-width: 375px; margin: 0 auto; min-height: 380px; border: 1px solid #dce4e7; border-radius: 12px; background: #fff; padding: 16px; box-shadow: 0 8px 24px #20372b0a; }
112
+ .docs-preview-footer { border-top: 1px solid var(--docs-line); padding: 15px 24px; color: var(--docs-muted); font-size: 10px; display: flex; align-items: baseline; gap: 9px; }
113
+ .docs-api { padding: 26px; }
114
+ .docs-api-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
115
+ .docs-api-intro h2 { font-size: 17px; font-weight: 500; }
116
+ .docs-api-intro p, .docs-related-types > p { color: var(--docs-muted); font-size: 11px; margin-top: 5px; }
117
+ .docs-api-intro .docs-search { min-width: 220px; }
118
+ .docs-api-section + .docs-api-section { margin-top: 34px; border-top: 1px solid var(--docs-line); padding-top: 30px; }
119
+ .docs-section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 5px; }
120
+ .docs-section-heading h2 { font-size: 17px; font-weight: 500; }
121
+ .docs-source { color: var(--docs-muted); font-family: monospace; font-size: 11px; margin-bottom: 16px; }
122
+ .docs-table-scroll { width: 100%; overflow: auto; border: 1px solid var(--docs-line); border-radius: 8px; margin-top: 16px; }
123
+ .docs-props-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; }
124
+ .docs-props-table th, .docs-props-table td { padding: 13px 14px; border-bottom: 1px solid #edf0f2; vertical-align: top; }
125
+ .docs-props-table thead th { background: #f7f9fa; font-weight: 500; color: var(--docs-muted); font-size: 10px; }
126
+ .docs-props-table tbody th { font-weight: 500; color: var(--docs-accent); }
127
+ .docs-props-table tbody tr:last-child > * { border-bottom: 0; }
128
+ .docs-prop-type { display: block; max-width: 380px; min-width: 150px; overflow-wrap: anywhere; color: #6d4ca0; white-space: pre-wrap; }
129
+ .docs-requirement { font-size: 9px; color: var(--docs-muted); }
130
+ .docs-requirement.is-required { border-radius: 4px; background: #fff3df; color: #865713; padding: 3px 6px; }
131
+ .docs-related-types { margin-top: 26px; }
132
+ .docs-related-types h3 { font-size: 12px; font-weight: 500; }
133
+ .docs-related-types > p { margin-bottom: 12px; }
134
+ .docs-type-detail { border: 1px solid var(--docs-line); border-radius: 7px; margin-top: 8px; overflow: hidden; }
135
+ .docs-type-detail summary { padding: 10px 14px; cursor: pointer; font-size: 11px; color: var(--docs-ink); background: #f8fafb; }
136
+ .docs-type-detail summary i { padding-right: 5px; color: var(--docs-accent); }
137
+ .docs-type-detail pre { padding: 16px; background: #f8fafb; border-top: 1px solid var(--docs-line); font-size: 11px; line-height: 1.8; overflow: auto; }
138
+ .docs-note { color: var(--docs-muted); font-size: 11px; padding: 14px 0; }
139
+ .docs-empty { color: var(--docs-muted); padding: 25px 10px; font-size: 12px; }
140
+ .docs-code-panel { padding: 24px; }
141
+ .docs-code-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11px; }
142
+ .docs-code-toolbar > span, .docs-code-toolbar > button { display: flex; align-items: center; gap: 8px; }
143
+ .docs-code-toolbar > button { border: 1px solid var(--docs-line); border-radius: 6px; padding: 6px 10px; background: #fff; color: var(--docs-accent); font-size: 11px; }
144
+ .docs-copy-status { color: var(--docs-accent); font-size: 11px; margin-bottom: 10px; }
145
+ .docs-code { border-radius: 10px; background: #152631; color: #d2e3e7; padding: 26px; font-size: 12px; line-height: 1.8; overflow: auto; max-height: 700px; tab-size: 2; }
146
+ .docs-page-footnote { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--docs-muted); font-size: 10px; }
147
+ @media (min-width: 1600px) { .docs-content { padding-top: 55px; } .docs-hero { padding: 60px; } }
148
+ @media (max-width: 1150px) { .docs-app { grid-template-columns: 225px minmax(0, 1fr); } .docs-content { padding: 30px 24px; } .docs-topbar { padding: 18px 24px; } .docs-hero { padding: 30px; gap: 20px; } .docs-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .docs-live { display: none; } }
149
+ @media (max-width: 850px) { .docs-hero { grid-template-columns: 1fr; } .docs-hero-visual { display: none; } .docs-api-intro, .docs-catalog-heading { align-items: stretch; flex-direction: column; } .docs-catalog-heading .docs-search { width: 100%; } }
150
+ @media (max-width: 640px) {
151
+ .docs-app { display: block; }
152
+ .docs-sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--docs-line); padding: 16px; gap: 15px; }
153
+ .docs-sidebar nav { max-height: 190px; overflow-y: auto; }
154
+ .docs-sidebar-footer { display: none; }
155
+ .docs-brand { font-size: 19px; }
156
+ .docs-topbar { padding: 15px 20px; min-height: 55px; }
157
+ .docs-topbar > a { font-size: 0; gap: 0; }
158
+ .docs-topbar > a > i:first-child { font-size: 18px; }
159
+ .docs-content { padding: 26px 16px 40px; }
160
+ .docs-hero { padding: 28px 22px; }
161
+ .docs-hero h1 { font-size: 34px; letter-spacing: -1.3px; }
162
+ .docs-stats { gap: 12px; }
163
+ .docs-stats > div { padding-left: 10px; }
164
+ .docs-stats strong { font-size: 15px; }
165
+ .docs-stats span { font-size: 9px; }
166
+ .docs-catalog-heading h2 { font-size: 20px; }
167
+ .docs-card-grid { grid-template-columns: 1fr; }
168
+ .docs-page-heading { gap: 12px; align-items: flex-start; }
169
+ .docs-page-heading h1 { font-size: 27px; }
170
+ .docs-page-heading .docs-component-icon { width: 44px; height: 44px; font-size: 21px; }
171
+ .docs-tablist { padding: 0 14px; gap: 20px; }
172
+ .docs-tablist > button { font-size: 11px; gap: 6px; }
173
+ .docs-preview-toolbar { padding: 12px; }
174
+ .docs-preview { padding: 24px 14px; }
175
+ .docs-api, .docs-code-panel { padding: 18px 14px; }
176
+ .docs-preview-footer { padding: 14px; }
177
+ }
178
+ @media (prefers-reduced-motion: reduce) { .docs-app * { transition: none !important; } }