@dashforge/tw 0.8.1-beta → 0.9.1-beta

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 (204) hide show
  1. package/CHANGELOG.md +155 -0
  2. package/COVERAGE.md +63 -0
  3. package/LICENSE +21 -0
  4. package/PERFORMANCE.md +59 -0
  5. package/REFINEMENT-NOTES.md +50 -0
  6. package/dist/index.esm.js +806 -134
  7. package/dist/src/components/Calendar/Calendar.d.ts +14 -0
  8. package/dist/src/components/Calendar/Calendar.d.ts.map +1 -0
  9. package/dist/src/components/Calendar/calendar.types.d.ts +72 -0
  10. package/dist/src/components/Calendar/calendar.types.d.ts.map +1 -0
  11. package/dist/src/components/Calendar/calendar.variants.d.ts +99 -0
  12. package/dist/src/components/Calendar/calendar.variants.d.ts.map +1 -0
  13. package/dist/src/components/DataGrid/DataGrid.d.ts.map +1 -1
  14. package/dist/src/components/DataGrid/filters/ColumnFilters.d.ts.map +1 -1
  15. package/dist/src/components/DataGrid/resize/useColumnResize.d.ts +7 -0
  16. package/dist/src/components/DataGrid/resize/useColumnResize.d.ts.map +1 -1
  17. package/dist/src/components/DataGrid/visibility/ColumnVisibilityMenu.d.ts +6 -2
  18. package/dist/src/components/DataGrid/visibility/ColumnVisibilityMenu.d.ts.map +1 -1
  19. package/dist/src/components/DatePicker/DatePicker.d.ts +14 -0
  20. package/dist/src/components/DatePicker/DatePicker.d.ts.map +1 -0
  21. package/dist/src/components/DatePicker/datePicker.types.d.ts +88 -0
  22. package/dist/src/components/DatePicker/datePicker.types.d.ts.map +1 -0
  23. package/dist/src/components/DatePicker/datePicker.variants.d.ts +97 -0
  24. package/dist/src/components/DatePicker/datePicker.variants.d.ts.map +1 -0
  25. package/dist/src/components/Dialog/Dialog.d.ts.map +1 -1
  26. package/dist/src/components/Table/Table.d.ts.map +1 -1
  27. package/dist/src/components/Table/cells/RenderChip.d.ts.map +1 -1
  28. package/dist/src/components/Table/table.types.d.ts +28 -3
  29. package/dist/src/components/Table/table.types.d.ts.map +1 -1
  30. package/dist/src/components/Typography/typography.variants.d.ts.map +1 -1
  31. package/dist/src/index.d.ts +6 -0
  32. package/dist/src/index.d.ts.map +1 -1
  33. package/eslint.config.mjs +16 -1
  34. package/package.json +10 -6
  35. package/src/components/Breadcrumbs/Breadcrumbs.perf.test.tsx +5 -2
  36. package/src/components/Calendar/Calendar.test.tsx +75 -0
  37. package/src/components/Calendar/Calendar.tsx +264 -0
  38. package/src/components/Calendar/calendar.types.ts +65 -0
  39. package/src/components/Calendar/calendar.variants.ts +64 -0
  40. package/src/components/DataGrid/DataGrid.perf.test.tsx +114 -0
  41. package/src/components/DataGrid/DataGrid.test.tsx +240 -0
  42. package/src/components/DataGrid/DataGrid.tsx +104 -16
  43. package/src/components/DataGrid/filters/ColumnFilters.test.tsx +330 -0
  44. package/src/components/DataGrid/filters/ColumnFilters.tsx +26 -2
  45. package/src/components/DataGrid/reorder/useColumnReorder.test.ts +95 -3
  46. package/src/components/DataGrid/resize/useColumnResize.test.ts +144 -0
  47. package/src/components/DataGrid/resize/useColumnResize.ts +30 -1
  48. package/src/components/DataGrid/visibility/ColumnVisibilityMenu.tsx +42 -25
  49. package/src/components/DatePicker/DatePicker.test.tsx +76 -0
  50. package/src/components/DatePicker/DatePicker.tsx +305 -0
  51. package/src/components/DatePicker/datePicker.types.ts +77 -0
  52. package/src/components/DatePicker/datePicker.variants.ts +50 -0
  53. package/src/components/Dialog/Dialog.tsx +9 -0
  54. package/src/components/Table/Table.perf.test.tsx +81 -0
  55. package/src/components/Table/Table.test.tsx +72 -1
  56. package/src/components/Table/Table.tsx +40 -4
  57. package/src/components/Table/cells/RenderChip.tsx +6 -9
  58. package/src/components/Table/cells/cells.test.tsx +247 -0
  59. package/src/components/Table/table.types.ts +28 -3
  60. package/src/components/Typography/Typography.test.tsx +15 -0
  61. package/src/components/Typography/typography.variants.ts +14 -1
  62. package/src/index.ts +21 -1
  63. package/test-output/vitest/coverage/base.css +224 -0
  64. package/test-output/vitest/coverage/block-navigation.js +87 -0
  65. package/test-output/vitest/coverage/clover.xml +2418 -0
  66. package/test-output/vitest/coverage/coverage-final.json +89 -0
  67. package/test-output/vitest/coverage/favicon.png +0 -0
  68. package/test-output/vitest/coverage/index.html +746 -0
  69. package/test-output/vitest/coverage/prettify.css +1 -0
  70. package/test-output/vitest/coverage/prettify.js +2 -0
  71. package/test-output/vitest/coverage/sort-arrow-sprite.png +0 -0
  72. package/test-output/vitest/coverage/sorter.js +210 -0
  73. package/test-output/vitest/coverage/src/components/Accordion/Accordion.tsx.html +376 -0
  74. package/test-output/vitest/coverage/src/components/Accordion/accordion.variants.ts.html +181 -0
  75. package/test-output/vitest/coverage/src/components/Accordion/index.html +131 -0
  76. package/test-output/vitest/coverage/src/components/AppShell/AppShell.tsx.html +802 -0
  77. package/test-output/vitest/coverage/src/components/AppShell/appShell.variants.ts.html +247 -0
  78. package/test-output/vitest/coverage/src/components/AppShell/index.html +131 -0
  79. package/test-output/vitest/coverage/src/components/AspectRatio/AspectRatio.tsx.html +304 -0
  80. package/test-output/vitest/coverage/src/components/AspectRatio/index.html +116 -0
  81. package/test-output/vitest/coverage/src/components/Autocomplete/Autocomplete.tsx.html +3292 -0
  82. package/test-output/vitest/coverage/src/components/Autocomplete/autocomplete.variants.ts.html +508 -0
  83. package/test-output/vitest/coverage/src/components/Autocomplete/index.html +131 -0
  84. package/test-output/vitest/coverage/src/components/Box/Box.tsx.html +334 -0
  85. package/test-output/vitest/coverage/src/components/Box/box.variants.ts.html +775 -0
  86. package/test-output/vitest/coverage/src/components/Box/index.html +131 -0
  87. package/test-output/vitest/coverage/src/components/Breadcrumbs/Breadcrumbs.tsx.html +694 -0
  88. package/test-output/vitest/coverage/src/components/Breadcrumbs/breadcrumbs.variants.ts.html +247 -0
  89. package/test-output/vitest/coverage/src/components/Breadcrumbs/index.html +131 -0
  90. package/test-output/vitest/coverage/src/components/Button/Button.tsx.html +535 -0
  91. package/test-output/vitest/coverage/src/components/Button/button.variants.ts.html +562 -0
  92. package/test-output/vitest/coverage/src/components/Button/index.html +131 -0
  93. package/test-output/vitest/coverage/src/components/Checkbox/Checkbox.tsx.html +943 -0
  94. package/test-output/vitest/coverage/src/components/Checkbox/checkbox.variants.ts.html +289 -0
  95. package/test-output/vitest/coverage/src/components/Checkbox/index.html +131 -0
  96. package/test-output/vitest/coverage/src/components/ConfirmDialog/ConfirmDialog.tsx.html +841 -0
  97. package/test-output/vitest/coverage/src/components/ConfirmDialog/confirmDialog.variants.ts.html +313 -0
  98. package/test-output/vitest/coverage/src/components/ConfirmDialog/index.html +131 -0
  99. package/test-output/vitest/coverage/src/components/Container/Container.tsx.html +307 -0
  100. package/test-output/vitest/coverage/src/components/Container/container.variants.ts.html +328 -0
  101. package/test-output/vitest/coverage/src/components/Container/index.html +131 -0
  102. package/test-output/vitest/coverage/src/components/DataGrid/DataGrid.tsx.html +3937 -0
  103. package/test-output/vitest/coverage/src/components/DataGrid/dataGrid.variants.ts.html +541 -0
  104. package/test-output/vitest/coverage/src/components/DataGrid/filters/ColumnFilters.tsx.html +1453 -0
  105. package/test-output/vitest/coverage/src/components/DataGrid/filters/index.html +116 -0
  106. package/test-output/vitest/coverage/src/components/DataGrid/index.html +131 -0
  107. package/test-output/vitest/coverage/src/components/DataGrid/reorder/index.html +116 -0
  108. package/test-output/vitest/coverage/src/components/DataGrid/reorder/useColumnReorder.ts.html +517 -0
  109. package/test-output/vitest/coverage/src/components/DataGrid/resize/index.html +116 -0
  110. package/test-output/vitest/coverage/src/components/DataGrid/resize/useColumnResize.ts.html +490 -0
  111. package/test-output/vitest/coverage/src/components/DataGrid/visibility/ColumnVisibilityMenu.tsx.html +592 -0
  112. package/test-output/vitest/coverage/src/components/DataGrid/visibility/index.html +116 -0
  113. package/test-output/vitest/coverage/src/components/DateTimePicker/DateTimePicker.tsx.html +1042 -0
  114. package/test-output/vitest/coverage/src/components/DateTimePicker/dateTimePicker.variants.ts.html +337 -0
  115. package/test-output/vitest/coverage/src/components/DateTimePicker/index.html +131 -0
  116. package/test-output/vitest/coverage/src/components/Dialog/Dialog.tsx.html +391 -0
  117. package/test-output/vitest/coverage/src/components/Dialog/dialog.variants.ts.html +283 -0
  118. package/test-output/vitest/coverage/src/components/Dialog/index.html +131 -0
  119. package/test-output/vitest/coverage/src/components/Divider/Divider.tsx.html +505 -0
  120. package/test-output/vitest/coverage/src/components/Divider/divider.variants.ts.html +433 -0
  121. package/test-output/vitest/coverage/src/components/Divider/index.html +131 -0
  122. package/test-output/vitest/coverage/src/components/Grid/Grid.tsx.html +529 -0
  123. package/test-output/vitest/coverage/src/components/Grid/grid.variants.ts.html +484 -0
  124. package/test-output/vitest/coverage/src/components/Grid/index.html +131 -0
  125. package/test-output/vitest/coverage/src/components/LeftNav/LeftNav.tsx.html +1075 -0
  126. package/test-output/vitest/coverage/src/components/LeftNav/index.html +131 -0
  127. package/test-output/vitest/coverage/src/components/LeftNav/leftNav.variants.ts.html +406 -0
  128. package/test-output/vitest/coverage/src/components/NumberField/NumberField.tsx.html +1048 -0
  129. package/test-output/vitest/coverage/src/components/NumberField/index.html +131 -0
  130. package/test-output/vitest/coverage/src/components/NumberField/numberField.variants.ts.html +367 -0
  131. package/test-output/vitest/coverage/src/components/OTPField/OTPField.tsx.html +835 -0
  132. package/test-output/vitest/coverage/src/components/OTPField/index.html +131 -0
  133. package/test-output/vitest/coverage/src/components/OTPField/otpField.variants.ts.html +301 -0
  134. package/test-output/vitest/coverage/src/components/Pagination/Pagination.tsx.html +916 -0
  135. package/test-output/vitest/coverage/src/components/Pagination/index.html +146 -0
  136. package/test-output/vitest/coverage/src/components/Pagination/pagination.helpers.ts.html +391 -0
  137. package/test-output/vitest/coverage/src/components/Pagination/pagination.variants.ts.html +436 -0
  138. package/test-output/vitest/coverage/src/components/Popover/Popover.tsx.html +250 -0
  139. package/test-output/vitest/coverage/src/components/Popover/index.html +131 -0
  140. package/test-output/vitest/coverage/src/components/Popover/popover.variants.ts.html +157 -0
  141. package/test-output/vitest/coverage/src/components/RadioGroup/RadioGroup.tsx.html +934 -0
  142. package/test-output/vitest/coverage/src/components/RadioGroup/index.html +131 -0
  143. package/test-output/vitest/coverage/src/components/RadioGroup/radioGroup.variants.ts.html +346 -0
  144. package/test-output/vitest/coverage/src/components/Skeleton/Skeleton.tsx.html +232 -0
  145. package/test-output/vitest/coverage/src/components/Skeleton/index.html +131 -0
  146. package/test-output/vitest/coverage/src/components/Skeleton/skeleton.variants.ts.html +346 -0
  147. package/test-output/vitest/coverage/src/components/Snackbar/Snackbar.tsx.html +979 -0
  148. package/test-output/vitest/coverage/src/components/Snackbar/index.html +131 -0
  149. package/test-output/vitest/coverage/src/components/Snackbar/snackbar.variants.ts.html +307 -0
  150. package/test-output/vitest/coverage/src/components/Stack/Stack.tsx.html +430 -0
  151. package/test-output/vitest/coverage/src/components/Stack/index.html +131 -0
  152. package/test-output/vitest/coverage/src/components/Stack/stack.variants.ts.html +325 -0
  153. package/test-output/vitest/coverage/src/components/Switch/Switch.tsx.html +559 -0
  154. package/test-output/vitest/coverage/src/components/Switch/index.html +131 -0
  155. package/test-output/vitest/coverage/src/components/Switch/switch.variants.ts.html +295 -0
  156. package/test-output/vitest/coverage/src/components/Table/Table.tsx.html +2677 -0
  157. package/test-output/vitest/coverage/src/components/Table/cells/RenderButton.tsx.html +154 -0
  158. package/test-output/vitest/coverage/src/components/Table/cells/RenderChip.tsx.html +385 -0
  159. package/test-output/vitest/coverage/src/components/Table/cells/RenderText.tsx.html +196 -0
  160. package/test-output/vitest/coverage/src/components/Table/cells/RenderTwoLine.tsx.html +187 -0
  161. package/test-output/vitest/coverage/src/components/Table/cells/RowActionsMenu.tsx.html +526 -0
  162. package/test-output/vitest/coverage/src/components/Table/cells/index.html +191 -0
  163. package/test-output/vitest/coverage/src/components/Table/cells/index.ts.html +127 -0
  164. package/test-output/vitest/coverage/src/components/Table/index.html +131 -0
  165. package/test-output/vitest/coverage/src/components/Table/table.variants.ts.html +706 -0
  166. package/test-output/vitest/coverage/src/components/Tabs/Tabs.tsx.html +283 -0
  167. package/test-output/vitest/coverage/src/components/Tabs/index.html +131 -0
  168. package/test-output/vitest/coverage/src/components/Tabs/tabs.variants.ts.html +292 -0
  169. package/test-output/vitest/coverage/src/components/TextField/TextField.tsx.html +820 -0
  170. package/test-output/vitest/coverage/src/components/TextField/index.html +131 -0
  171. package/test-output/vitest/coverage/src/components/TextField/textField.variants.ts.html +400 -0
  172. package/test-output/vitest/coverage/src/components/Textarea/Textarea.tsx.html +655 -0
  173. package/test-output/vitest/coverage/src/components/Textarea/index.html +131 -0
  174. package/test-output/vitest/coverage/src/components/Textarea/textarea.variants.ts.html +340 -0
  175. package/test-output/vitest/coverage/src/components/Tooltip/Tooltip.tsx.html +295 -0
  176. package/test-output/vitest/coverage/src/components/Tooltip/index.html +131 -0
  177. package/test-output/vitest/coverage/src/components/Tooltip/tooltip.variants.ts.html +169 -0
  178. package/test-output/vitest/coverage/src/components/TopBar/TopBar.tsx.html +283 -0
  179. package/test-output/vitest/coverage/src/components/TopBar/index.html +131 -0
  180. package/test-output/vitest/coverage/src/components/TopBar/topBar.variants.ts.html +199 -0
  181. package/test-output/vitest/coverage/src/components/Typography/Typography.tsx.html +421 -0
  182. package/test-output/vitest/coverage/src/components/Typography/index.html +131 -0
  183. package/test-output/vitest/coverage/src/components/Typography/typography.variants.ts.html +436 -0
  184. package/test-output/vitest/coverage/src/components/VisuallyHidden/VisuallyHidden.tsx.html +262 -0
  185. package/test-output/vitest/coverage/src/components/VisuallyHidden/index.html +116 -0
  186. package/test-output/vitest/coverage/src/components/_shared/data/getNestedValue.ts.html +181 -0
  187. package/test-output/vitest/coverage/src/components/_shared/data/index.html +236 -0
  188. package/test-output/vitest/coverage/src/components/_shared/data/useColumnAutoDetect.ts.html +385 -0
  189. package/test-output/vitest/coverage/src/components/_shared/data/useControllableState.ts.html +229 -0
  190. package/test-output/vitest/coverage/src/components/_shared/data/useDebouncedValue.ts.html +157 -0
  191. package/test-output/vitest/coverage/src/components/_shared/data/useTableFilter.ts.html +439 -0
  192. package/test-output/vitest/coverage/src/components/_shared/data/useTableSearch.ts.html +283 -0
  193. package/test-output/vitest/coverage/src/components/_shared/data/useTableSelection.ts.html +385 -0
  194. package/test-output/vitest/coverage/src/components/_shared/data/useTableSort.ts.html +508 -0
  195. package/test-output/vitest/coverage/src/components/_shared/data/useVirtualizer.ts.html +682 -0
  196. package/test-output/vitest/coverage/src/components/_shared/index.html +116 -0
  197. package/test-output/vitest/coverage/src/components/_shared/resolveValidationState.ts.html +265 -0
  198. package/test-output/vitest/coverage/src/hooks/index.html +116 -0
  199. package/test-output/vitest/coverage/src/hooks/useAccessState.ts.html +328 -0
  200. package/test-output/vitest/coverage/src/index.html +116 -0
  201. package/test-output/vitest/coverage/src/index.ts.html +1153 -0
  202. package/test-output/vitest/coverage/src/utils/cn.ts.html +172 -0
  203. package/test-output/vitest/coverage/src/utils/index.html +116 -0
  204. package/tsconfig.lib.json +7 -4
package/test-output/vitest/coverage/src/components/Divider/Divider.tsx.html ADDED
@@ -0,0 +1,505 @@
1
+
2
+ <!doctype html>
3
+ <html lang="en">
4
+
5
+ <head>
6
+ <title>Code coverage report for src/components/Divider/Divider.tsx</title>
7
+ <meta charset="utf-8" />
8
+ <link rel="stylesheet" href="../../../prettify.css" />
9
+ <link rel="stylesheet" href="../../../base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
12
+ <style type='text/css'>
13
+ .coverage-summary .sorter {
14
+ background-image: url(../../../sort-arrow-sprite.png);
15
+ }
16
+ </style>
17
+ </head>
18
+
19
+ <body>
20
+ <div class='wrapper'>
21
+ <div class='pad1'>
22
+ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/components/Divider</a> Divider.tsx</h1>
23
+ <div class='clearfix'>
24
+
25
+ <div class='fl pad1y space-right2'>
26
+ <span class="strong">100% </span>
27
+ <span class="quiet">Statements</span>
28
+ <span class='fraction'>16/16</span>
29
+ </div>
30
+
31
+
32
+ <div class='fl pad1y space-right2'>
33
+ <span class="strong">88.88% </span>
34
+ <span class="quiet">Branches</span>
35
+ <span class='fraction'>16/18</span>
36
+ </div>
37
+
38
+
39
+ <div class='fl pad1y space-right2'>
40
+ <span class="strong">100% </span>
41
+ <span class="quiet">Functions</span>
42
+ <span class='fraction'>1/1</span>
43
+ </div>
44
+
45
+
46
+ <div class='fl pad1y space-right2'>
47
+ <span class="strong">100% </span>
48
+ <span class="quiet">Lines</span>
49
+ <span class='fraction'>16/16</span>
50
+ </div>
51
+
52
+
53
+ </div>
54
+ <p class="quiet">
55
+ Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
+ </p>
57
+ <template id="filterTemplate">
58
+ <div class="quiet">
59
+ Filter:
60
+ <input type="search" id="fileSearch">
61
+ </div>
62
+ </template>
63
+ </div>
64
+ <div class='status-line high'></div>
65
+ <pre><table class="coverage">
66
+ <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
+ <a name='L2'></a><a href='#L2'>2</a>
68
+ <a name='L3'></a><a href='#L3'>3</a>
69
+ <a name='L4'></a><a href='#L4'>4</a>
70
+ <a name='L5'></a><a href='#L5'>5</a>
71
+ <a name='L6'></a><a href='#L6'>6</a>
72
+ <a name='L7'></a><a href='#L7'>7</a>
73
+ <a name='L8'></a><a href='#L8'>8</a>
74
+ <a name='L9'></a><a href='#L9'>9</a>
75
+ <a name='L10'></a><a href='#L10'>10</a>
76
+ <a name='L11'></a><a href='#L11'>11</a>
77
+ <a name='L12'></a><a href='#L12'>12</a>
78
+ <a name='L13'></a><a href='#L13'>13</a>
79
+ <a name='L14'></a><a href='#L14'>14</a>
80
+ <a name='L15'></a><a href='#L15'>15</a>
81
+ <a name='L16'></a><a href='#L16'>16</a>
82
+ <a name='L17'></a><a href='#L17'>17</a>
83
+ <a name='L18'></a><a href='#L18'>18</a>
84
+ <a name='L19'></a><a href='#L19'>19</a>
85
+ <a name='L20'></a><a href='#L20'>20</a>
86
+ <a name='L21'></a><a href='#L21'>21</a>
87
+ <a name='L22'></a><a href='#L22'>22</a>
88
+ <a name='L23'></a><a href='#L23'>23</a>
89
+ <a name='L24'></a><a href='#L24'>24</a>
90
+ <a name='L25'></a><a href='#L25'>25</a>
91
+ <a name='L26'></a><a href='#L26'>26</a>
92
+ <a name='L27'></a><a href='#L27'>27</a>
93
+ <a name='L28'></a><a href='#L28'>28</a>
94
+ <a name='L29'></a><a href='#L29'>29</a>
95
+ <a name='L30'></a><a href='#L30'>30</a>
96
+ <a name='L31'></a><a href='#L31'>31</a>
97
+ <a name='L32'></a><a href='#L32'>32</a>
98
+ <a name='L33'></a><a href='#L33'>33</a>
99
+ <a name='L34'></a><a href='#L34'>34</a>
100
+ <a name='L35'></a><a href='#L35'>35</a>
101
+ <a name='L36'></a><a href='#L36'>36</a>
102
+ <a name='L37'></a><a href='#L37'>37</a>
103
+ <a name='L38'></a><a href='#L38'>38</a>
104
+ <a name='L39'></a><a href='#L39'>39</a>
105
+ <a name='L40'></a><a href='#L40'>40</a>
106
+ <a name='L41'></a><a href='#L41'>41</a>
107
+ <a name='L42'></a><a href='#L42'>42</a>
108
+ <a name='L43'></a><a href='#L43'>43</a>
109
+ <a name='L44'></a><a href='#L44'>44</a>
110
+ <a name='L45'></a><a href='#L45'>45</a>
111
+ <a name='L46'></a><a href='#L46'>46</a>
112
+ <a name='L47'></a><a href='#L47'>47</a>
113
+ <a name='L48'></a><a href='#L48'>48</a>
114
+ <a name='L49'></a><a href='#L49'>49</a>
115
+ <a name='L50'></a><a href='#L50'>50</a>
116
+ <a name='L51'></a><a href='#L51'>51</a>
117
+ <a name='L52'></a><a href='#L52'>52</a>
118
+ <a name='L53'></a><a href='#L53'>53</a>
119
+ <a name='L54'></a><a href='#L54'>54</a>
120
+ <a name='L55'></a><a href='#L55'>55</a>
121
+ <a name='L56'></a><a href='#L56'>56</a>
122
+ <a name='L57'></a><a href='#L57'>57</a>
123
+ <a name='L58'></a><a href='#L58'>58</a>
124
+ <a name='L59'></a><a href='#L59'>59</a>
125
+ <a name='L60'></a><a href='#L60'>60</a>
126
+ <a name='L61'></a><a href='#L61'>61</a>
127
+ <a name='L62'></a><a href='#L62'>62</a>
128
+ <a name='L63'></a><a href='#L63'>63</a>
129
+ <a name='L64'></a><a href='#L64'>64</a>
130
+ <a name='L65'></a><a href='#L65'>65</a>
131
+ <a name='L66'></a><a href='#L66'>66</a>
132
+ <a name='L67'></a><a href='#L67'>67</a>
133
+ <a name='L68'></a><a href='#L68'>68</a>
134
+ <a name='L69'></a><a href='#L69'>69</a>
135
+ <a name='L70'></a><a href='#L70'>70</a>
136
+ <a name='L71'></a><a href='#L71'>71</a>
137
+ <a name='L72'></a><a href='#L72'>72</a>
138
+ <a name='L73'></a><a href='#L73'>73</a>
139
+ <a name='L74'></a><a href='#L74'>74</a>
140
+ <a name='L75'></a><a href='#L75'>75</a>
141
+ <a name='L76'></a><a href='#L76'>76</a>
142
+ <a name='L77'></a><a href='#L77'>77</a>
143
+ <a name='L78'></a><a href='#L78'>78</a>
144
+ <a name='L79'></a><a href='#L79'>79</a>
145
+ <a name='L80'></a><a href='#L80'>80</a>
146
+ <a name='L81'></a><a href='#L81'>81</a>
147
+ <a name='L82'></a><a href='#L82'>82</a>
148
+ <a name='L83'></a><a href='#L83'>83</a>
149
+ <a name='L84'></a><a href='#L84'>84</a>
150
+ <a name='L85'></a><a href='#L85'>85</a>
151
+ <a name='L86'></a><a href='#L86'>86</a>
152
+ <a name='L87'></a><a href='#L87'>87</a>
153
+ <a name='L88'></a><a href='#L88'>88</a>
154
+ <a name='L89'></a><a href='#L89'>89</a>
155
+ <a name='L90'></a><a href='#L90'>90</a>
156
+ <a name='L91'></a><a href='#L91'>91</a>
157
+ <a name='L92'></a><a href='#L92'>92</a>
158
+ <a name='L93'></a><a href='#L93'>93</a>
159
+ <a name='L94'></a><a href='#L94'>94</a>
160
+ <a name='L95'></a><a href='#L95'>95</a>
161
+ <a name='L96'></a><a href='#L96'>96</a>
162
+ <a name='L97'></a><a href='#L97'>97</a>
163
+ <a name='L98'></a><a href='#L98'>98</a>
164
+ <a name='L99'></a><a href='#L99'>99</a>
165
+ <a name='L100'></a><a href='#L100'>100</a>
166
+ <a name='L101'></a><a href='#L101'>101</a>
167
+ <a name='L102'></a><a href='#L102'>102</a>
168
+ <a name='L103'></a><a href='#L103'>103</a>
169
+ <a name='L104'></a><a href='#L104'>104</a>
170
+ <a name='L105'></a><a href='#L105'>105</a>
171
+ <a name='L106'></a><a href='#L106'>106</a>
172
+ <a name='L107'></a><a href='#L107'>107</a>
173
+ <a name='L108'></a><a href='#L108'>108</a>
174
+ <a name='L109'></a><a href='#L109'>109</a>
175
+ <a name='L110'></a><a href='#L110'>110</a>
176
+ <a name='L111'></a><a href='#L111'>111</a>
177
+ <a name='L112'></a><a href='#L112'>112</a>
178
+ <a name='L113'></a><a href='#L113'>113</a>
179
+ <a name='L114'></a><a href='#L114'>114</a>
180
+ <a name='L115'></a><a href='#L115'>115</a>
181
+ <a name='L116'></a><a href='#L116'>116</a>
182
+ <a name='L117'></a><a href='#L117'>117</a>
183
+ <a name='L118'></a><a href='#L118'>118</a>
184
+ <a name='L119'></a><a href='#L119'>119</a>
185
+ <a name='L120'></a><a href='#L120'>120</a>
186
+ <a name='L121'></a><a href='#L121'>121</a>
187
+ <a name='L122'></a><a href='#L122'>122</a>
188
+ <a name='L123'></a><a href='#L123'>123</a>
189
+ <a name='L124'></a><a href='#L124'>124</a>
190
+ <a name='L125'></a><a href='#L125'>125</a>
191
+ <a name='L126'></a><a href='#L126'>126</a>
192
+ <a name='L127'></a><a href='#L127'>127</a>
193
+ <a name='L128'></a><a href='#L128'>128</a>
194
+ <a name='L129'></a><a href='#L129'>129</a>
195
+ <a name='L130'></a><a href='#L130'>130</a>
196
+ <a name='L131'></a><a href='#L131'>131</a>
197
+ <a name='L132'></a><a href='#L132'>132</a>
198
+ <a name='L133'></a><a href='#L133'>133</a>
199
+ <a name='L134'></a><a href='#L134'>134</a>
200
+ <a name='L135'></a><a href='#L135'>135</a>
201
+ <a name='L136'></a><a href='#L136'>136</a>
202
+ <a name='L137'></a><a href='#L137'>137</a>
203
+ <a name='L138'></a><a href='#L138'>138</a>
204
+ <a name='L139'></a><a href='#L139'>139</a>
205
+ <a name='L140'></a><a href='#L140'>140</a>
206
+ <a name='L141'></a><a href='#L141'>141</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
207
+ <span class="cline-any cline-neutral">&nbsp;</span>
208
+ <span class="cline-any cline-neutral">&nbsp;</span>
209
+ <span class="cline-any cline-neutral">&nbsp;</span>
210
+ <span class="cline-any cline-neutral">&nbsp;</span>
211
+ <span class="cline-any cline-neutral">&nbsp;</span>
212
+ <span class="cline-any cline-neutral">&nbsp;</span>
213
+ <span class="cline-any cline-neutral">&nbsp;</span>
214
+ <span class="cline-any cline-neutral">&nbsp;</span>
215
+ <span class="cline-any cline-neutral">&nbsp;</span>
216
+ <span class="cline-any cline-neutral">&nbsp;</span>
217
+ <span class="cline-any cline-neutral">&nbsp;</span>
218
+ <span class="cline-any cline-neutral">&nbsp;</span>
219
+ <span class="cline-any cline-neutral">&nbsp;</span>
220
+ <span class="cline-any cline-neutral">&nbsp;</span>
221
+ <span class="cline-any cline-neutral">&nbsp;</span>
222
+ <span class="cline-any cline-neutral">&nbsp;</span>
223
+ <span class="cline-any cline-neutral">&nbsp;</span>
224
+ <span class="cline-any cline-neutral">&nbsp;</span>
225
+ <span class="cline-any cline-neutral">&nbsp;</span>
226
+ <span class="cline-any cline-neutral">&nbsp;</span>
227
+ <span class="cline-any cline-neutral">&nbsp;</span>
228
+ <span class="cline-any cline-neutral">&nbsp;</span>
229
+ <span class="cline-any cline-neutral">&nbsp;</span>
230
+ <span class="cline-any cline-neutral">&nbsp;</span>
231
+ <span class="cline-any cline-neutral">&nbsp;</span>
232
+ <span class="cline-any cline-neutral">&nbsp;</span>
233
+ <span class="cline-any cline-neutral">&nbsp;</span>
234
+ <span class="cline-any cline-neutral">&nbsp;</span>
235
+ <span class="cline-any cline-neutral">&nbsp;</span>
236
+ <span class="cline-any cline-neutral">&nbsp;</span>
237
+ <span class="cline-any cline-neutral">&nbsp;</span>
238
+ <span class="cline-any cline-neutral">&nbsp;</span>
239
+ <span class="cline-any cline-neutral">&nbsp;</span>
240
+ <span class="cline-any cline-neutral">&nbsp;</span>
241
+ <span class="cline-any cline-neutral">&nbsp;</span>
242
+ <span class="cline-any cline-neutral">&nbsp;</span>
243
+ <span class="cline-any cline-neutral">&nbsp;</span>
244
+ <span class="cline-any cline-neutral">&nbsp;</span>
245
+ <span class="cline-any cline-neutral">&nbsp;</span>
246
+ <span class="cline-any cline-neutral">&nbsp;</span>
247
+ <span class="cline-any cline-neutral">&nbsp;</span>
248
+ <span class="cline-any cline-neutral">&nbsp;</span>
249
+ <span class="cline-any cline-neutral">&nbsp;</span>
250
+ <span class="cline-any cline-neutral">&nbsp;</span>
251
+ <span class="cline-any cline-neutral">&nbsp;</span>
252
+ <span class="cline-any cline-neutral">&nbsp;</span>
253
+ <span class="cline-any cline-neutral">&nbsp;</span>
254
+ <span class="cline-any cline-neutral">&nbsp;</span>
255
+ <span class="cline-any cline-neutral">&nbsp;</span>
256
+ <span class="cline-any cline-neutral">&nbsp;</span>
257
+ <span class="cline-any cline-neutral">&nbsp;</span>
258
+ <span class="cline-any cline-yes">2x</span>
259
+ <span class="cline-any cline-neutral">&nbsp;</span>
260
+ <span class="cline-any cline-neutral">&nbsp;</span>
261
+ <span class="cline-any cline-neutral">&nbsp;</span>
262
+ <span class="cline-any cline-neutral">&nbsp;</span>
263
+ <span class="cline-any cline-neutral">&nbsp;</span>
264
+ <span class="cline-any cline-neutral">&nbsp;</span>
265
+ <span class="cline-any cline-neutral">&nbsp;</span>
266
+ <span class="cline-any cline-neutral">&nbsp;</span>
267
+ <span class="cline-any cline-neutral">&nbsp;</span>
268
+ <span class="cline-any cline-neutral">&nbsp;</span>
269
+ <span class="cline-any cline-yes">36x</span>
270
+ <span class="cline-any cline-neutral">&nbsp;</span>
271
+ <span class="cline-any cline-neutral">&nbsp;</span>
272
+ <span class="cline-any cline-neutral">&nbsp;</span>
273
+ <span class="cline-any cline-yes">36x</span>
274
+ <span class="cline-any cline-neutral">&nbsp;</span>
275
+ <span class="cline-any cline-neutral">&nbsp;</span>
276
+ <span class="cline-any cline-yes">36x</span>
277
+ <span class="cline-any cline-yes">21x</span>
278
+ <span class="cline-any cline-neutral">&nbsp;</span>
279
+ <span class="cline-any cline-neutral">&nbsp;</span>
280
+ <span class="cline-any cline-neutral">&nbsp;</span>
281
+ <span class="cline-any cline-neutral">&nbsp;</span>
282
+ <span class="cline-any cline-neutral">&nbsp;</span>
283
+ <span class="cline-any cline-neutral">&nbsp;</span>
284
+ <span class="cline-any cline-neutral">&nbsp;</span>
285
+ <span class="cline-any cline-neutral">&nbsp;</span>
286
+ <span class="cline-any cline-yes">21x</span>
287
+ <span class="cline-any cline-yes">18x</span>
288
+ <span class="cline-any cline-neutral">&nbsp;</span>
289
+ <span class="cline-any cline-neutral">&nbsp;</span>
290
+ <span class="cline-any cline-neutral">&nbsp;</span>
291
+ <span class="cline-any cline-neutral">&nbsp;</span>
292
+ <span class="cline-any cline-neutral">&nbsp;</span>
293
+ <span class="cline-any cline-neutral">&nbsp;</span>
294
+ <span class="cline-any cline-neutral">&nbsp;</span>
295
+ <span class="cline-any cline-neutral">&nbsp;</span>
296
+ <span class="cline-any cline-neutral">&nbsp;</span>
297
+ <span class="cline-any cline-yes">3x</span>
298
+ <span class="cline-any cline-neutral">&nbsp;</span>
299
+ <span class="cline-any cline-neutral">&nbsp;</span>
300
+ <span class="cline-any cline-neutral">&nbsp;</span>
301
+ <span class="cline-any cline-neutral">&nbsp;</span>
302
+ <span class="cline-any cline-neutral">&nbsp;</span>
303
+ <span class="cline-any cline-neutral">&nbsp;</span>
304
+ <span class="cline-any cline-neutral">&nbsp;</span>
305
+ <span class="cline-any cline-neutral">&nbsp;</span>
306
+ <span class="cline-any cline-neutral">&nbsp;</span>
307
+ <span class="cline-any cline-neutral">&nbsp;</span>
308
+ <span class="cline-any cline-neutral">&nbsp;</span>
309
+ <span class="cline-any cline-yes">15x</span>
310
+ <span class="cline-any cline-neutral">&nbsp;</span>
311
+ <span class="cline-any cline-neutral">&nbsp;</span>
312
+ <span class="cline-any cline-neutral">&nbsp;</span>
313
+ <span class="cline-any cline-neutral">&nbsp;</span>
314
+ <span class="cline-any cline-neutral">&nbsp;</span>
315
+ <span class="cline-any cline-neutral">&nbsp;</span>
316
+ <span class="cline-any cline-neutral">&nbsp;</span>
317
+ <span class="cline-any cline-neutral">&nbsp;</span>
318
+ <span class="cline-any cline-neutral">&nbsp;</span>
319
+ <span class="cline-any cline-neutral">&nbsp;</span>
320
+ <span class="cline-any cline-yes">15x</span>
321
+ <span class="cline-any cline-yes">15x</span>
322
+ <span class="cline-any cline-yes">36x</span>
323
+ <span class="cline-any cline-neutral">&nbsp;</span>
324
+ <span class="cline-any cline-yes">36x</span>
325
+ <span class="cline-any cline-yes">36x</span>
326
+ <span class="cline-any cline-neutral">&nbsp;</span>
327
+ <span class="cline-any cline-yes">36x</span>
328
+ <span class="cline-any cline-neutral">&nbsp;</span>
329
+ <span class="cline-any cline-neutral">&nbsp;</span>
330
+ <span class="cline-any cline-neutral">&nbsp;</span>
331
+ <span class="cline-any cline-neutral">&nbsp;</span>
332
+ <span class="cline-any cline-neutral">&nbsp;</span>
333
+ <span class="cline-any cline-neutral">&nbsp;</span>
334
+ <span class="cline-any cline-neutral">&nbsp;</span>
335
+ <span class="cline-any cline-neutral">&nbsp;</span>
336
+ <span class="cline-any cline-neutral">&nbsp;</span>
337
+ <span class="cline-any cline-neutral">&nbsp;</span>
338
+ <span class="cline-any cline-neutral">&nbsp;</span>
339
+ <span class="cline-any cline-neutral">&nbsp;</span>
340
+ <span class="cline-any cline-neutral">&nbsp;</span>
341
+ <span class="cline-any cline-neutral">&nbsp;</span>
342
+ <span class="cline-any cline-neutral">&nbsp;</span>
343
+ <span class="cline-any cline-neutral">&nbsp;</span>
344
+ <span class="cline-any cline-neutral">&nbsp;</span>
345
+ <span class="cline-any cline-yes">2x</span>
346
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { forwardRef } from 'react';
347
+ import { cn } from '../../utils/cn.js';
348
+ import { dividerVariants, dividerLineVariants } from './divider.variants.js';
349
+ import type { DividerProps } from './divider.types.js';
350
+ &nbsp;
351
+ /**
352
+ * `&lt;Divider&gt;` — visual separator. Two modes:
353
+ *
354
+ * 1. Line-only (no children):
355
+ *
356
+ * &lt;Divider /&gt;
357
+ * → &lt;hr role="separator" aria-orientation="horizontal" /&gt;
358
+ *
359
+ * Renders a single horizontal line via `border-t-*` on an `&lt;hr&gt;`
360
+ * (which by default has no `display`, no margin in our reset, just
361
+ * acts as the border carrier).
362
+ *
363
+ * 2. Labeled (with children):
364
+ *
365
+ * &lt;Divider&gt;&lt;Typography variant="overline"&gt;OR&lt;/Typography&gt;&lt;/Divider&gt;
366
+ * → &lt;div role="separator" aria-orientation="horizontal"&gt;
367
+ * &lt;span aria-hidden className="flex-1 border-t" /&gt;
368
+ * &lt;span className="px-3"&gt;OR&lt;/span&gt;
369
+ * &lt;span aria-hidden className="flex-1 border-t" /&gt;
370
+ * &lt;/div&gt;
371
+ *
372
+ * Two line segments share the available space; the label sits
373
+ * between them with horizontal padding for breathing room. Each
374
+ * line segment is `aria-hidden` (the role="separator" on the root
375
+ * conveys the separator semantics — duplicating it would confuse
376
+ * screen readers).
377
+ *
378
+ * Alignment:
379
+ * • align="start" → label hugs the left, right segment grows
380
+ * • align="center" (default) → both segments equal
381
+ * • align="end" → label hugs the right, left segment grows
382
+ *
383
+ * Implemented by setting `flex-basis: 0` to either segment to keep
384
+ * it minimal. We use `basis-[2rem]` (32px short stub) rather than
385
+ * `basis-0` so a tiny line still hints at the divider on the squashed
386
+ * side — pure flex-1 vs basis-0 would collapse it invisibly.
387
+ *
388
+ * Vertical orientation:
389
+ * The line orientation flips (border-l instead of border-t). Vertical
390
+ * labeled dividers are RARE in practice — supported for parity but
391
+ * the typical use is line-only between flex row items.
392
+ *
393
+ * a11y:
394
+ * • Root element gets `role="separator"` (or implicit via `&lt;hr&gt;`)
395
+ * • `aria-orientation` is set explicitly so AT knows the axis
396
+ * • Labeled mode: label has no extra role; the visual layout speaks
397
+ */
398
+ export const Divider = forwardRef&lt;HTMLElement, DividerProps&gt;(
399
+ function Divider(props, ref) {
400
+ const {
401
+ orientation = 'horizontal',
402
+ align = 'center',
403
+ variant = 'solid',
404
+ color = 'neutral',
405
+ children,
406
+ flexItem, // currently a no-op (see types) — `self-stretch` is in TV base
407
+ sx,
408
+ ...rest
409
+ } = props;
410
+ &nbsp;
411
+ // Reference flexItem to silence unused-var lint while keeping it in the
412
+ // public API for parity with MUI Divider. Forward-compat hook.
413
+ void flexItem;
414
+ &nbsp;
415
+ // ─── Mode 1: line-only (no children) ─────────────────────────────
416
+ if (children == null) {
417
+ const lineClasses = cn(
418
+ dividerLineVariants({ orientation, variant, color, segment: 'full' }),
419
+ sx,
420
+ );
421
+ &nbsp;
422
+ // Horizontal → &lt;hr&gt;: zero default styling once we strip the UA
423
+ // default `&lt;hr&gt;` border via `border-0` (in `dividerLineVariants`
424
+ // base) and apply our own `border-t-*`. Vertical → &lt;div&gt; because
425
+ // &lt;hr&gt; can't be vertical cross-browser-consistently.
426
+ if (orientation === 'horizontal') {
427
+ return (
428
+ &lt;hr
429
+ ref={ref as never}
430
+ role="separator"
431
+ aria-orientation="horizontal"
432
+ className={cn('border-0', lineClasses)}
433
+ {...rest}
434
+ /&gt;
435
+ );
436
+ }
437
+ return (
438
+ &lt;div
439
+ ref={ref as never}
440
+ role="separator"
441
+ aria-orientation="vertical"
442
+ className={lineClasses}
443
+ {...rest}
444
+ /&gt;
445
+ );
446
+ }
447
+ &nbsp;
448
+ // ─── Mode 2: labeled (with children) ─────────────────────────────
449
+ const rootClasses = cn(dividerVariants({ orientation, align }), sx);
450
+ &nbsp;
451
+ /*
452
+ * Segment widths per `align`:
453
+ * • center → both flex-1 (equal share)
454
+ * • start → left short stub, right grows
455
+ * • end → left grows, right short stub
456
+ *
457
+ * "Short stub" = 2rem so the divider visually exists on the squashed
458
+ * side without dominating the label.
459
+ */
460
+ const isHorizontal = orientation === 'horizontal';
461
+ const leftStubClass = align === 'start' ? (isHorizontal ? 'basis-8 grow-0' : <span class="branch-1 cbranch-no" title="branch not covered" >'basis-8 grow-0') : '</span>flex-1';
462
+ const rightStubClass = align === 'end' ? (isHorizontal ? 'basis-8 grow-0' : <span class="branch-1 cbranch-no" title="branch not covered" >'basis-8 grow-0') : '</span>flex-1';
463
+ &nbsp;
464
+ const lineCommon = dividerLineVariants({ orientation, variant, color, segment: 'grow' });
465
+ const labelPadding = isHorizontal ? 'px-3' : 'py-3';
466
+ &nbsp;
467
+ return (
468
+ &lt;div
469
+ ref={ref as never}
470
+ role="separator"
471
+ aria-orientation={orientation}
472
+ className={rootClasses}
473
+ {...rest}
474
+ &gt;
475
+ &lt;span aria-hidden="true" className={cn(lineCommon, leftStubClass)} /&gt;
476
+ &lt;span className={cn('shrink-0 text-sm text-neutral-500', labelPadding)}&gt;
477
+ {children}
478
+ &lt;/span&gt;
479
+ &lt;span aria-hidden="true" className={cn(lineCommon, rightStubClass)} /&gt;
480
+ &lt;/div&gt;
481
+ );
482
+ },
483
+ );
484
+ &nbsp;
485
+ Divider.displayName = 'Divider';
486
+ &nbsp;</pre></td></tr></table></pre>
487
+
488
+ <div class='push'></div><!-- for sticky footer -->
489
+ </div><!-- /wrapper -->
490
+ <div class='footer quiet pad2 space-top1 center small'>
491
+ Code coverage generated by
492
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
493
+ at 2026-05-20T08:18:26.407Z
494
+ </div>
495
+ <script src="../../../prettify.js"></script>
496
+ <script>
497
+ window.onload = function () {
498
+ prettyPrint();
499
+ };
500
+ </script>
501
+ <script src="../../../sorter.js"></script>
502
+ <script src="../../../block-navigation.js"></script>
503
+ </body>
504
+ </html>
505
+