@usefragments/ui 1.5.4 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (497) hide show
  1. package/README.md +1 -1
  2. package/dist/assets/ui.css +8808 -5810
  3. package/dist/chart.cjs +7 -20
  4. package/dist/chart.js +7 -20
  5. package/dist/colorpicker.cjs +2 -1
  6. package/dist/colorpicker.js +2 -1
  7. package/dist/components/Accordion/Accordion.module.scss.cjs +8 -8
  8. package/dist/components/Accordion/Accordion.module.scss.js +8 -8
  9. package/dist/components/Alert/Alert.module.scss.cjs +12 -12
  10. package/dist/components/Alert/Alert.module.scss.js +12 -12
  11. package/dist/components/AppShell/AppShell.module.scss.cjs +14 -14
  12. package/dist/components/AppShell/AppShell.module.scss.js +14 -14
  13. package/dist/components/AppShell/index.cjs +5 -3
  14. package/dist/components/AppShell/index.d.ts +4 -2
  15. package/dist/components/AppShell/index.d.ts.map +1 -1
  16. package/dist/components/AppShell/index.js +5 -3
  17. package/dist/components/Avatar/Avatar.module.scss.cjs +17 -14
  18. package/dist/components/Avatar/Avatar.module.scss.js +17 -14
  19. package/dist/components/Avatar/index.cjs +100 -118
  20. package/dist/components/Avatar/index.d.ts +7 -5
  21. package/dist/components/Avatar/index.d.ts.map +1 -1
  22. package/dist/components/Avatar/index.js +100 -118
  23. package/dist/components/Badge/Badge.module.scss.cjs +19 -19
  24. package/dist/components/Badge/Badge.module.scss.js +19 -19
  25. package/dist/components/BentoGrid/BentoGrid.module.scss.cjs +14 -14
  26. package/dist/components/BentoGrid/BentoGrid.module.scss.js +14 -14
  27. package/dist/components/Box/Box.module.scss.cjs +152 -152
  28. package/dist/components/Box/Box.module.scss.js +152 -152
  29. package/dist/components/Breadcrumbs/Breadcrumbs.module.scss.cjs +8 -8
  30. package/dist/components/Breadcrumbs/Breadcrumbs.module.scss.js +8 -8
  31. package/dist/components/Button/Button.module.scss.cjs +14 -14
  32. package/dist/components/Button/Button.module.scss.js +14 -14
  33. package/dist/components/ButtonGroup/ButtonGroup.module.scss.cjs +15 -15
  34. package/dist/components/ButtonGroup/ButtonGroup.module.scss.js +15 -15
  35. package/dist/components/Card/Card.module.scss.cjs +18 -18
  36. package/dist/components/Card/Card.module.scss.js +18 -18
  37. package/dist/components/Chart/Chart.module.scss.cjs +15 -15
  38. package/dist/components/Chart/Chart.module.scss.js +15 -15
  39. package/dist/components/Chart/index.d.ts +7 -7
  40. package/dist/components/Chart/index.d.ts.map +1 -1
  41. package/dist/components/Checkbox/Checkbox.module.scss.cjs +9 -15
  42. package/dist/components/Checkbox/Checkbox.module.scss.js +9 -15
  43. package/dist/components/Checkbox/index.cjs +4 -6
  44. package/dist/components/Checkbox/index.d.ts.map +1 -1
  45. package/dist/components/Checkbox/index.js +4 -6
  46. package/dist/components/Chip/Chip.module.scss.cjs +15 -15
  47. package/dist/components/Chip/Chip.module.scss.js +15 -15
  48. package/dist/components/Chip/index.cjs +4 -5
  49. package/dist/components/Chip/index.d.ts +1 -1
  50. package/dist/components/Chip/index.d.ts.map +1 -1
  51. package/dist/components/Chip/index.js +2 -3
  52. package/dist/components/CodeBlock/CodeBlock.module.scss.cjs +22 -22
  53. package/dist/components/CodeBlock/CodeBlock.module.scss.js +22 -22
  54. package/dist/components/Collapsible/Collapsible.module.scss.cjs +9 -12
  55. package/dist/components/Collapsible/Collapsible.module.scss.js +9 -12
  56. package/dist/components/Collapsible/index.cjs +3 -2
  57. package/dist/components/Collapsible/index.d.ts +3 -3
  58. package/dist/components/Collapsible/index.d.ts.map +1 -1
  59. package/dist/components/Collapsible/index.js +3 -2
  60. package/dist/components/ColorPicker/ColorPicker.module.scss.cjs +16 -16
  61. package/dist/components/ColorPicker/ColorPicker.module.scss.js +16 -16
  62. package/dist/components/ColorPicker/index.d.ts.map +1 -1
  63. package/dist/components/Combobox/Combobox.module.scss.cjs +21 -27
  64. package/dist/components/Combobox/Combobox.module.scss.js +21 -27
  65. package/dist/components/Combobox/index.cjs +4 -4
  66. package/dist/components/Combobox/index.d.ts.map +1 -1
  67. package/dist/components/Combobox/index.js +4 -4
  68. package/dist/components/Command/Command.module.scss.cjs +11 -11
  69. package/dist/components/Command/Command.module.scss.js +11 -11
  70. package/dist/components/ConversationList/ConversationList.module.scss.cjs +11 -14
  71. package/dist/components/ConversationList/ConversationList.module.scss.js +11 -14
  72. package/dist/components/ConversationList/index.cjs +40 -44
  73. package/dist/components/ConversationList/index.d.ts +3 -3
  74. package/dist/components/ConversationList/index.d.ts.map +1 -1
  75. package/dist/components/ConversationList/index.js +40 -44
  76. package/dist/components/DataTable/DataTable.module.scss.cjs +32 -56
  77. package/dist/components/DataTable/DataTable.module.scss.js +32 -56
  78. package/dist/components/DataTable/index.d.ts +5 -4
  79. package/dist/components/DataTable/index.d.ts.map +1 -1
  80. package/dist/components/DatePicker/DatePicker.module.scss.cjs +33 -33
  81. package/dist/components/DatePicker/DatePicker.module.scss.js +33 -33
  82. package/dist/components/DatePicker/index.d.ts.map +1 -1
  83. package/dist/components/Dialog/Dialog.module.scss.cjs +14 -14
  84. package/dist/components/Dialog/Dialog.module.scss.js +14 -14
  85. package/dist/components/Drawer/Drawer.module.scss.cjs +31 -28
  86. package/dist/components/Drawer/Drawer.module.scss.js +31 -28
  87. package/dist/components/Drawer/index.cjs +1 -1
  88. package/dist/components/Drawer/index.js +1 -1
  89. package/dist/components/Editor/Editor.module.scss.cjs +23 -23
  90. package/dist/components/Editor/Editor.module.scss.js +23 -23
  91. package/dist/components/EmptyState/EmptyState.module.scss.cjs +12 -12
  92. package/dist/components/EmptyState/EmptyState.module.scss.js +12 -12
  93. package/dist/components/Field/Field.module.scss.cjs +8 -5
  94. package/dist/components/Field/Field.module.scss.js +8 -5
  95. package/dist/components/Field/index.cjs +10 -1
  96. package/dist/components/Field/index.d.ts +9 -2
  97. package/dist/components/Field/index.d.ts.map +1 -1
  98. package/dist/components/Field/index.js +10 -1
  99. package/dist/components/Fieldset/Fieldset.module.scss.cjs +3 -3
  100. package/dist/components/Fieldset/Fieldset.module.scss.js +3 -3
  101. package/dist/components/Form/Form.module.scss.cjs +5 -2
  102. package/dist/components/Form/Form.module.scss.js +5 -2
  103. package/dist/components/Form/index.cjs +6 -1
  104. package/dist/components/Form/index.d.ts +8 -3
  105. package/dist/components/Form/index.d.ts.map +1 -1
  106. package/dist/components/Form/index.js +6 -1
  107. package/dist/components/Grid/Grid.module.scss.cjs +54 -72
  108. package/dist/components/Grid/Grid.module.scss.js +54 -72
  109. package/dist/components/Grid/index.cjs +57 -77
  110. package/dist/components/Grid/index.d.ts +11 -11
  111. package/dist/components/Grid/index.d.ts.map +1 -1
  112. package/dist/components/Grid/index.js +57 -77
  113. package/dist/components/Header/Header.module.scss.cjs +33 -33
  114. package/dist/components/Header/Header.module.scss.js +33 -33
  115. package/dist/components/Header/index.cjs +2 -1
  116. package/dist/components/Header/index.d.ts.map +1 -1
  117. package/dist/components/Header/index.js +2 -1
  118. package/dist/components/Icon/Icon.module.scss.cjs +29 -8
  119. package/dist/components/Icon/Icon.module.scss.js +30 -9
  120. package/dist/components/Icon/index.cjs +30 -48
  121. package/dist/components/Icon/index.d.ts +6 -6
  122. package/dist/components/Icon/index.d.ts.map +1 -1
  123. package/dist/components/Icon/index.js +30 -48
  124. package/dist/components/IconButton/IconButton.module.scss.cjs +8 -8
  125. package/dist/components/IconButton/IconButton.module.scss.js +8 -8
  126. package/dist/components/Input/Input.module.scss.cjs +19 -25
  127. package/dist/components/Input/Input.module.scss.js +19 -25
  128. package/dist/components/Input/index.cjs +1 -2
  129. package/dist/components/Input/index.d.ts.map +1 -1
  130. package/dist/components/Input/index.js +1 -2
  131. package/dist/components/Link/Link.module.scss.cjs +10 -10
  132. package/dist/components/Link/Link.module.scss.js +10 -10
  133. package/dist/components/List/List.module.scss.cjs +19 -19
  134. package/dist/components/List/List.module.scss.js +19 -19
  135. package/dist/components/List/index.cjs +4 -7
  136. package/dist/components/List/index.d.ts.map +1 -1
  137. package/dist/components/List/index.js +4 -7
  138. package/dist/components/Listbox/Listbox.module.scss.cjs +9 -9
  139. package/dist/components/Listbox/Listbox.module.scss.js +9 -9
  140. package/dist/components/Loading/Loading.module.scss.cjs +30 -30
  141. package/dist/components/Loading/Loading.module.scss.js +30 -30
  142. package/dist/components/Loading/index.cjs +39 -67
  143. package/dist/components/Loading/index.d.ts +6 -6
  144. package/dist/components/Loading/index.d.ts.map +1 -1
  145. package/dist/components/Loading/index.js +39 -67
  146. package/dist/components/Main/Main.module.scss.cjs +7 -7
  147. package/dist/components/Main/Main.module.scss.js +7 -7
  148. package/dist/components/Markdown/Markdown.module.scss.cjs +1 -1
  149. package/dist/components/Markdown/Markdown.module.scss.js +1 -1
  150. package/dist/components/Menu/Menu.module.scss.cjs +16 -16
  151. package/dist/components/Menu/Menu.module.scss.js +16 -16
  152. package/dist/components/Menu/index.cjs +19 -61
  153. package/dist/components/Menu/index.d.ts +10 -10
  154. package/dist/components/Menu/index.d.ts.map +1 -1
  155. package/dist/components/Menu/index.js +19 -61
  156. package/dist/components/Message/Message.module.scss.cjs +18 -21
  157. package/dist/components/Message/Message.module.scss.js +18 -21
  158. package/dist/components/Message/index.cjs +15 -2
  159. package/dist/components/Message/index.d.ts.map +1 -1
  160. package/dist/components/Message/index.js +15 -2
  161. package/dist/components/NavigationMenu/NavigationMenu.module.scss.cjs +28 -28
  162. package/dist/components/NavigationMenu/NavigationMenu.module.scss.js +28 -28
  163. package/dist/components/Pagination/Pagination.module.scss.cjs +18 -9
  164. package/dist/components/Pagination/Pagination.module.scss.js +19 -10
  165. package/dist/components/Pagination/index.cjs +5 -2
  166. package/dist/components/Pagination/index.d.ts +3 -1
  167. package/dist/components/Pagination/index.d.ts.map +1 -1
  168. package/dist/components/Pagination/index.js +5 -2
  169. package/dist/components/Popover/Popover.module.scss.cjs +10 -10
  170. package/dist/components/Popover/Popover.module.scss.js +10 -10
  171. package/dist/components/Progress/Progress.module.scss.cjs +29 -32
  172. package/dist/components/Progress/Progress.module.scss.js +29 -32
  173. package/dist/components/Progress/geometry.cjs +30 -0
  174. package/dist/components/Progress/geometry.d.ts +8 -0
  175. package/dist/components/Progress/geometry.d.ts.map +1 -0
  176. package/dist/components/Progress/geometry.js +30 -0
  177. package/dist/components/Progress/index.cjs +40 -29
  178. package/dist/components/Progress/index.d.ts +4 -3
  179. package/dist/components/Progress/index.d.ts.map +1 -1
  180. package/dist/components/Progress/index.js +40 -29
  181. package/dist/components/Prompt/Prompt.module.scss.cjs +29 -29
  182. package/dist/components/Prompt/Prompt.module.scss.js +29 -29
  183. package/dist/components/Prompt/index.cjs +5 -4
  184. package/dist/components/Prompt/index.d.ts.map +1 -1
  185. package/dist/components/Prompt/index.js +5 -4
  186. package/dist/components/RadioGroup/RadioGroup.module.scss.cjs +15 -21
  187. package/dist/components/RadioGroup/RadioGroup.module.scss.js +15 -21
  188. package/dist/components/RadioGroup/index.cjs +7 -6
  189. package/dist/components/RadioGroup/index.d.ts.map +1 -1
  190. package/dist/components/RadioGroup/index.js +7 -6
  191. package/dist/components/ScrollArea/ScrollArea.module.scss.cjs +7 -22
  192. package/dist/components/ScrollArea/ScrollArea.module.scss.js +7 -22
  193. package/dist/components/ScrollArea/index.cjs +66 -42
  194. package/dist/components/ScrollArea/index.d.ts +3 -2
  195. package/dist/components/ScrollArea/index.d.ts.map +1 -1
  196. package/dist/components/ScrollArea/index.js +66 -42
  197. package/dist/components/ScrollArea/scroll-state.cjs +58 -0
  198. package/dist/components/ScrollArea/scroll-state.d.ts +16 -0
  199. package/dist/components/ScrollArea/scroll-state.d.ts.map +1 -0
  200. package/dist/components/ScrollArea/scroll-state.js +58 -0
  201. package/dist/components/Select/Select.module.scss.cjs +21 -21
  202. package/dist/components/Select/Select.module.scss.js +21 -21
  203. package/dist/components/Select/index.cjs +3 -2
  204. package/dist/components/Select/index.d.ts.map +1 -1
  205. package/dist/components/Select/index.js +3 -2
  206. package/dist/components/Separator/Separator.module.scss.cjs +13 -10
  207. package/dist/components/Separator/Separator.module.scss.js +13 -10
  208. package/dist/components/Separator/index.cjs +37 -38
  209. package/dist/components/Separator/index.d.ts +4 -4
  210. package/dist/components/Separator/index.d.ts.map +1 -1
  211. package/dist/components/Separator/index.js +37 -38
  212. package/dist/components/Sidebar/Sidebar.module.scss.cjs +43 -43
  213. package/dist/components/Sidebar/Sidebar.module.scss.js +43 -43
  214. package/dist/components/Sidebar/index.cjs +5 -3
  215. package/dist/components/Sidebar/index.d.ts +6 -1
  216. package/dist/components/Sidebar/index.d.ts.map +1 -1
  217. package/dist/components/Sidebar/index.js +5 -3
  218. package/dist/components/Skeleton/Skeleton.module.scss.cjs +50 -38
  219. package/dist/components/Skeleton/Skeleton.module.scss.js +50 -38
  220. package/dist/components/Skeleton/index.cjs +41 -55
  221. package/dist/components/Skeleton/index.d.ts +7 -7
  222. package/dist/components/Skeleton/index.d.ts.map +1 -1
  223. package/dist/components/Skeleton/index.js +41 -55
  224. package/dist/components/Slider/Slider.module.scss.cjs +12 -12
  225. package/dist/components/Slider/Slider.module.scss.js +12 -12
  226. package/dist/components/Stack/Stack.module.scss.cjs +25 -45
  227. package/dist/components/Stack/Stack.module.scss.js +25 -45
  228. package/dist/components/Stack/index.cjs +106 -101
  229. package/dist/components/Stack/index.d.ts +7 -7
  230. package/dist/components/Stack/index.d.ts.map +1 -1
  231. package/dist/components/Stack/index.js +106 -101
  232. package/dist/components/Switch/Switch.module.scss.cjs +32 -0
  233. package/dist/components/Switch/Switch.module.scss.js +32 -0
  234. package/dist/components/{Toggle → Switch}/index.cjs +9 -14
  235. package/dist/components/Switch/index.d.ts +37 -1
  236. package/dist/components/Switch/index.d.ts.map +1 -1
  237. package/dist/components/{Toggle → Switch}/index.js +5 -10
  238. package/dist/components/Table/Table.module.scss.cjs +18 -27
  239. package/dist/components/Table/Table.module.scss.js +18 -27
  240. package/dist/components/Table/index.d.ts +6 -5
  241. package/dist/components/Table/index.d.ts.map +1 -1
  242. package/dist/components/TableOfContents/TableOfContents.module.scss.cjs +15 -15
  243. package/dist/components/TableOfContents/TableOfContents.module.scss.js +15 -15
  244. package/dist/components/Tabs/Tabs.module.scss.cjs +12 -12
  245. package/dist/components/Tabs/Tabs.module.scss.js +12 -12
  246. package/dist/components/Tabs/index.cjs +2 -2
  247. package/dist/components/Tabs/index.js +2 -2
  248. package/dist/components/Text/Text.module.scss.cjs +93 -57
  249. package/dist/components/Text/Text.module.scss.js +93 -57
  250. package/dist/components/Text/index.cjs +14 -6
  251. package/dist/components/Text/index.d.ts +25 -15
  252. package/dist/components/Text/index.d.ts.map +1 -1
  253. package/dist/components/Text/index.js +14 -6
  254. package/dist/components/Textarea/Textarea.module.scss.cjs +26 -23
  255. package/dist/components/Textarea/Textarea.module.scss.js +26 -23
  256. package/dist/components/Textarea/index.cjs +5 -10
  257. package/dist/components/Textarea/index.d.ts.map +1 -1
  258. package/dist/components/Textarea/index.js +5 -10
  259. package/dist/components/Theme/context.cjs +39 -0
  260. package/dist/components/Theme/context.d.ts +21 -0
  261. package/dist/components/Theme/context.d.ts.map +1 -0
  262. package/dist/components/Theme/context.js +22 -0
  263. package/dist/components/Theme/index.cjs +14 -209
  264. package/dist/components/Theme/index.d.ts +4 -37
  265. package/dist/components/Theme/index.d.ts.map +1 -1
  266. package/dist/components/Theme/index.js +9 -204
  267. package/dist/components/{Theme → ThemeToggle}/ThemeToggle.module.scss.cjs +6 -6
  268. package/dist/components/ThemeToggle/ThemeToggle.module.scss.js +23 -0
  269. package/dist/components/ThemeToggle/index.cjs +115 -0
  270. package/dist/components/ThemeToggle/index.d.ts +21 -0
  271. package/dist/components/ThemeToggle/index.d.ts.map +1 -0
  272. package/dist/components/ThemeToggle/index.js +115 -0
  273. package/dist/components/ThinkingIndicator/ThinkingIndicator.module.scss.cjs +13 -13
  274. package/dist/components/ThinkingIndicator/ThinkingIndicator.module.scss.js +13 -13
  275. package/dist/components/ThinkingIndicator/index.cjs +34 -41
  276. package/dist/components/ThinkingIndicator/index.d.ts +4 -4
  277. package/dist/components/ThinkingIndicator/index.d.ts.map +1 -1
  278. package/dist/components/ThinkingIndicator/index.js +34 -41
  279. package/dist/components/Toast/Toast.module.scss.cjs +20 -20
  280. package/dist/components/Toast/Toast.module.scss.js +20 -20
  281. package/dist/components/Toggle/index.d.ts +2 -42
  282. package/dist/components/Toggle/index.d.ts.map +1 -1
  283. package/dist/components/ToggleGroup/ToggleGroup.module.scss.cjs +20 -20
  284. package/dist/components/ToggleGroup/ToggleGroup.module.scss.js +20 -20
  285. package/dist/components/ToggleGroup/index.cjs +3 -2
  286. package/dist/components/ToggleGroup/index.d.ts +2 -1
  287. package/dist/components/ToggleGroup/index.d.ts.map +1 -1
  288. package/dist/components/ToggleGroup/index.js +3 -2
  289. package/dist/components/Tooltip/Tooltip.module.scss.cjs +3 -3
  290. package/dist/components/Tooltip/Tooltip.module.scss.js +3 -3
  291. package/dist/components/VisuallyHidden/VisuallyHidden.module.scss.cjs +1 -1
  292. package/dist/components/VisuallyHidden/VisuallyHidden.module.scss.js +1 -1
  293. package/dist/data-table.cjs +12 -9
  294. package/dist/data-table.js +12 -9
  295. package/dist/datepicker.cjs +2 -1
  296. package/dist/datepicker.js +2 -1
  297. package/dist/index.cjs +100 -98
  298. package/dist/index.d.ts +2 -2
  299. package/dist/index.d.ts.map +1 -1
  300. package/dist/index.js +4 -2
  301. package/dist/markdown.cjs +1 -1
  302. package/dist/markdown.js +2 -2
  303. package/dist/measurements/generated.cjs +296 -0
  304. package/dist/measurements/generated.d.ts +261 -0
  305. package/dist/measurements/generated.d.ts.map +1 -0
  306. package/dist/measurements/generated.js +296 -0
  307. package/dist/measurements/index.d.ts +2 -0
  308. package/dist/measurements/index.d.ts.map +1 -0
  309. package/dist/measurements.cjs +6 -0
  310. package/dist/measurements.js +6 -0
  311. package/dist/recipes/popup.cjs +14 -0
  312. package/dist/recipes/popup.d.ts +4 -0
  313. package/dist/recipes/popup.d.ts.map +1 -0
  314. package/dist/recipes/popup.js +14 -0
  315. package/dist/recipes/table-chrome.cjs +18 -0
  316. package/dist/recipes/table-chrome.d.ts +10 -0
  317. package/dist/recipes/table-chrome.d.ts.map +1 -0
  318. package/dist/recipes/table-chrome.js +18 -0
  319. package/dist/table.cjs +5 -2
  320. package/dist/table.js +5 -2
  321. package/dist/utils/layout-spacing.cjs +27 -0
  322. package/dist/utils/layout-spacing.d.ts +5 -0
  323. package/dist/utils/layout-spacing.d.ts.map +1 -0
  324. package/dist/utils/layout-spacing.js +27 -0
  325. package/dist/utils/seed-derivation.cjs +4 -42
  326. package/dist/utils/seed-derivation.d.ts +4 -3
  327. package/dist/utils/seed-derivation.d.ts.map +1 -1
  328. package/dist/utils/seed-derivation.js +4 -42
  329. package/dist/utils/theme-presets.cjs +1 -0
  330. package/dist/utils/theme-presets.d.ts +3 -2
  331. package/dist/utils/theme-presets.d.ts.map +1 -1
  332. package/dist/utils/theme-presets.js +1 -0
  333. package/fragments.json +1 -1
  334. package/package.json +23 -4
  335. package/src/components/Accordion/Accordion.module.scss +31 -52
  336. package/src/components/Alert/Alert.module.scss +28 -44
  337. package/src/components/AppShell/AppShell.module.scss +6 -3
  338. package/src/components/AppShell/index.tsx +8 -4
  339. package/src/components/Avatar/Avatar.module.scss +22 -60
  340. package/src/components/Avatar/index.tsx +152 -146
  341. package/src/components/Badge/Badge.module.scss +51 -46
  342. package/src/components/BentoGrid/BentoGrid.module.scss +11 -32
  343. package/src/components/Box/Box.module.scss +253 -81
  344. package/src/components/Breadcrumbs/Breadcrumbs.module.scss +10 -11
  345. package/src/components/Button/Button.module.scss +52 -57
  346. package/src/components/ButtonGroup/ButtonGroup.module.scss +5 -5
  347. package/src/components/Card/Card.consumer-fixture.module.scss +8 -0
  348. package/src/components/Card/Card.module.scss +211 -175
  349. package/src/components/Chart/Chart.module.scss +28 -29
  350. package/src/components/Chart/index.tsx +40 -53
  351. package/src/components/Checkbox/Checkbox.module.scss +43 -64
  352. package/src/components/Checkbox/index.tsx +4 -9
  353. package/src/components/Chip/Chip.contract.json +4 -3
  354. package/src/components/Chip/Chip.module.scss +23 -34
  355. package/src/components/Chip/index.tsx +3 -4
  356. package/src/components/CodeBlock/CodeBlock.module.scss +102 -215
  357. package/src/components/Collapsible/Collapsible.module.scss +29 -63
  358. package/src/components/Collapsible/index.tsx +22 -26
  359. package/src/components/ColorPicker/ColorPicker.module.scss +42 -24
  360. package/src/components/ColorPicker/index.tsx +2 -1
  361. package/src/components/Combobox/Combobox.module.scss +60 -73
  362. package/src/components/Combobox/index.tsx +7 -5
  363. package/src/components/Command/Command.module.scss +47 -77
  364. package/src/components/ConversationList/ConversationList.module.scss +20 -78
  365. package/src/components/ConversationList/index.tsx +55 -59
  366. package/src/components/DataTable/DataTable.module.scss +76 -216
  367. package/src/components/DataTable/index.tsx +20 -25
  368. package/src/components/DatePicker/DatePicker.module.scss +54 -33
  369. package/src/components/DatePicker/index.tsx +2 -1
  370. package/src/components/Dialog/Dialog.module.scss +42 -66
  371. package/src/components/Drawer/Drawer.module.scss +93 -99
  372. package/src/components/Drawer/index.tsx +1 -1
  373. package/src/components/Editor/Editor.module.scss +115 -220
  374. package/src/components/EmptyState/EmptyState.module.scss +38 -85
  375. package/src/components/Field/Field.contract.json +2 -1
  376. package/src/components/Field/Field.module.scss +9 -11
  377. package/src/components/Field/index.tsx +27 -1
  378. package/src/components/Fieldset/Fieldset.module.scss +14 -6
  379. package/src/components/Form/Form.contract.json +10 -23
  380. package/src/components/Form/Form.module.scss +9 -4
  381. package/src/components/Form/index.tsx +22 -7
  382. package/src/components/Grid/Grid.module.scss +159 -63
  383. package/src/components/Grid/index.tsx +107 -126
  384. package/src/components/Header/Header.module.scss +25 -32
  385. package/src/components/Header/index.tsx +2 -1
  386. package/src/components/Icon/Icon.module.scss +16 -0
  387. package/src/components/Icon/index.tsx +74 -86
  388. package/src/components/IconButton/IconButton.module.scss +11 -21
  389. package/src/components/Input/Input.module.scss +67 -55
  390. package/src/components/Input/index.tsx +1 -2
  391. package/src/components/Link/Link.module.scss +8 -9
  392. package/src/components/List/List.module.scss +16 -21
  393. package/src/components/List/index.tsx +4 -10
  394. package/src/components/Listbox/Listbox.module.scss +26 -54
  395. package/src/components/Loading/Loading.module.scss +23 -33
  396. package/src/components/Loading/index.tsx +68 -97
  397. package/src/components/Main/Main.module.scss +3 -5
  398. package/src/components/Markdown/Markdown.module.scss +36 -184
  399. package/src/components/Markdown/index.tsx +2 -2
  400. package/src/components/Menu/Menu.module.scss +48 -133
  401. package/src/components/Menu/index.tsx +57 -89
  402. package/src/components/Message/Message.module.scss +52 -142
  403. package/src/components/Message/index.tsx +16 -6
  404. package/src/components/NavigationMenu/NavigationMenu.module.scss +59 -52
  405. package/src/components/Pagination/Pagination.module.scss +32 -25
  406. package/src/components/Pagination/index.tsx +7 -2
  407. package/src/components/Popover/Popover.module.scss +37 -73
  408. package/src/components/Progress/Progress.module.scss +61 -41
  409. package/src/components/Progress/geometry.ts +41 -0
  410. package/src/components/Progress/index.tsx +44 -30
  411. package/src/components/Prompt/Prompt.module.scss +45 -82
  412. package/src/components/Prompt/index.tsx +6 -5
  413. package/src/components/RadioGroup/RadioGroup.module.scss +50 -69
  414. package/src/components/RadioGroup/index.tsx +7 -9
  415. package/src/components/ScrollArea/ScrollArea.contract.json +8 -24
  416. package/src/components/ScrollArea/ScrollArea.module.scss +122 -96
  417. package/src/components/ScrollArea/index.tsx +78 -60
  418. package/src/components/ScrollArea/scroll-state.ts +87 -0
  419. package/src/components/Select/Select.module.scss +53 -41
  420. package/src/components/Select/index.tsx +6 -2
  421. package/src/components/Separator/Separator.module.scss +29 -19
  422. package/src/components/Separator/index.tsx +55 -51
  423. package/src/components/Sidebar/Sidebar.contract.json +12 -0
  424. package/src/components/Sidebar/Sidebar.module.scss +101 -99
  425. package/src/components/Sidebar/index.tsx +10 -3
  426. package/src/components/Skeleton/Skeleton.module.scss +26 -26
  427. package/src/components/Skeleton/index.tsx +65 -72
  428. package/src/components/Slider/Slider.module.scss +31 -25
  429. package/src/components/Stack/Stack.module.scss +101 -30
  430. package/src/components/Stack/index.tsx +157 -127
  431. package/src/components/{Toggle/Toggle.contract.json → Switch/Switch.contract.json} +1 -1
  432. package/src/components/{Toggle/Toggle.module.scss → Switch/Switch.module.scss} +55 -82
  433. package/src/components/{Toggle → Switch}/index.tsx +5 -21
  434. package/src/components/Table/Table.module.scss +38 -129
  435. package/src/components/Table/index.tsx +13 -6
  436. package/src/components/TableOfContents/TableOfContents.module.scss +20 -177
  437. package/src/components/Tabs/Tabs.module.scss +27 -22
  438. package/src/components/Tabs/index.tsx +2 -2
  439. package/src/components/Text/Text.module.scss +22 -3
  440. package/src/components/Text/index.tsx +56 -21
  441. package/src/components/Textarea/Textarea.module.scss +59 -39
  442. package/src/components/Textarea/index.tsx +5 -12
  443. package/src/components/Theme/context.ts +42 -0
  444. package/src/components/Theme/index.tsx +14 -309
  445. package/src/components/ThemeToggle/ThemeToggle.module.scss +73 -0
  446. package/src/components/ThemeToggle/index.tsx +144 -0
  447. package/src/components/ThinkingIndicator/ThinkingIndicator.module.scss +24 -19
  448. package/src/components/ThinkingIndicator/index.tsx +44 -54
  449. package/src/components/Toast/Toast.contract.json +5 -21
  450. package/src/components/Toast/Toast.module.scss +61 -138
  451. package/src/components/Toggle/index.ts +7 -0
  452. package/src/components/ToggleGroup/ToggleGroup.contract.json +12 -39
  453. package/src/components/ToggleGroup/ToggleGroup.module.scss +132 -88
  454. package/src/components/ToggleGroup/index.tsx +5 -3
  455. package/src/components/Tooltip/Tooltip.module.scss +23 -39
  456. package/src/components/VisuallyHidden/VisuallyHidden.module.scss +3 -0
  457. package/src/index.ts +2 -1
  458. package/src/measurements/MeasurementTargets.module.scss +229 -0
  459. package/src/measurements/generated.ts +317 -0
  460. package/src/measurements/index.ts +8 -0
  461. package/src/measurements/measurements.json +361 -0
  462. package/src/recipes/_action.scss +138 -0
  463. package/src/recipes/_boolean-range.scss +124 -0
  464. package/src/recipes/_feedback.scss +171 -0
  465. package/src/recipes/_field.scss +98 -0
  466. package/src/recipes/_layout.scss +67 -0
  467. package/src/recipes/_navigation.scss +110 -0
  468. package/src/recipes/_overlay.scss +191 -0
  469. package/src/recipes/_popup.scss +92 -0
  470. package/src/recipes/_prose.scss +174 -0
  471. package/src/recipes/_representation.scss +193 -0
  472. package/src/recipes/_segmented.scss +26 -0
  473. package/src/recipes/_surface.scss +13 -0
  474. package/src/recipes/_table-chrome.scss +105 -0
  475. package/src/recipes/_target.scss +31 -0
  476. package/src/recipes/_typography.scss +38 -0
  477. package/src/recipes/popup.ts +12 -0
  478. package/src/recipes/table-chrome.ts +30 -0
  479. package/src/styles/globals.scss +2 -2
  480. package/src/tokens/_component-properties.scss +2 -2
  481. package/src/tokens/_computed.scss +9 -9
  482. package/src/tokens/_density.scss +41 -132
  483. package/src/tokens/_measurements.catalog.generated.css +91 -0
  484. package/src/tokens/_measurements.generated.scss +604 -0
  485. package/src/tokens/_mixins.scss +0 -276
  486. package/src/tokens/_property-registrations.scss +96 -92
  487. package/src/tokens/_radius.scss +16 -70
  488. package/src/tokens/_seeds.scss +8 -7
  489. package/src/tokens/_variables.scss +163 -148
  490. package/src/utils/layout-spacing.ts +31 -0
  491. package/src/utils/seed-derivation.ts +134 -172
  492. package/src/utils/theme-presets.ts +58 -30
  493. package/dist/components/Theme/ThemeToggle.module.scss.js +0 -23
  494. package/dist/components/Toggle/Toggle.module.scss.cjs +0 -44
  495. package/dist/components/Toggle/Toggle.module.scss.js +0 -44
  496. package/src/components/Switch/index.ts +0 -3
  497. package/src/components/Theme/ThemeToggle.module.scss +0 -91
@@ -5,11 +5,12 @@ const TextRoot = React.forwardRef(
5
5
  function Text2({
6
6
  children,
7
7
  as: Component = "span",
8
+ role,
8
9
  variant,
9
10
  size,
10
11
  weight,
11
12
  color,
12
- font = "sans",
13
+ font,
13
14
  truncate,
14
15
  lineClamp,
15
16
  letterSpacing,
@@ -18,16 +19,23 @@ const TextRoot = React.forwardRef(
18
19
  style,
19
20
  ...htmlProps
20
21
  }, ref) {
22
+ const ignoredLegacyProps = role ? [size, variant, weight, font, letterSpacing].some((value) => value !== void 0) : false;
23
+ if (process.env.NODE_ENV !== "production" && ignoredLegacyProps) {
24
+ console.warn(
25
+ "[Text] Semantic role takes precedence over size, variant, weight, font, and letterSpacing."
26
+ );
27
+ }
21
28
  const classes = [
22
29
  styles.text,
23
- variant && styles[`variant-${variant}`],
24
- size && styles[`size-${size}`],
25
- weight && styles[`weight-${weight}`],
30
+ role && styles[`role-${role}`],
31
+ !role && variant && styles[`variant-${variant}`],
32
+ !role && size && styles[`size-${size}`],
33
+ !role && weight && styles[`weight-${weight}`],
26
34
  color && styles[`color-${color}`],
27
- font === "mono" && styles.mono,
35
+ !role && font === "mono" && styles.mono,
28
36
  truncate && styles.truncate,
29
37
  lineClamp && styles.lineClamp,
30
- letterSpacing && styles[`tracking-${letterSpacing}`],
38
+ !role && letterSpacing && styles[`tracking-${letterSpacing}`],
31
39
  tabularNums && styles.tabularNums,
32
40
  className
33
41
  ].filter(Boolean).join(" ");
@@ -1,24 +1,25 @@
1
1
  "use strict";
2
2
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const wrapper = "_wrapper_id95e_1";
4
- const label = "_label_id95e_6";
5
- const required = "_required_id95e_14";
6
- const helper = "_helper_id95e_19";
7
- const helperError = "_helperError_id95e_26";
8
- const errorMessage = "_errorMessage_id95e_30";
9
- const textarea = "_textarea_id95e_36";
10
- const sm = "_sm_id95e_92";
11
- const lg = "_lg_id95e_103";
12
- const resizeNone = "_resize-none_id95e_114";
13
- const resizeVertical = "_resize-vertical_id95e_118";
14
- const resizeHorizontal = "_resize-horizontal_id95e_122";
15
- const resizeBoth = "_resize-both_id95e_126";
16
- const error = "_error_id95e_30";
17
- const success = "_success_id95e_141";
18
- const helperSuccess = "_helperSuccess_id95e_155";
19
- const footer = "_footer_id95e_159";
20
- const charCount = "_charCount_id95e_170";
21
- const charCountOver = "_charCountOver_id95e_180";
3
+ const wrapper = "_wrapper_1tjgn_1";
4
+ const label = "_label_1tjgn_8";
5
+ const required = "_required_1tjgn_17";
6
+ const helper = "_helper_1tjgn_22";
7
+ const helperError = "_helperError_1tjgn_32";
8
+ const errorMessage = "_errorMessage_1tjgn_33";
9
+ const textarea = "_textarea_1tjgn_43";
10
+ const sm = "_sm_1tjgn_83";
11
+ const md = "_md_1tjgn_95";
12
+ const lg = "_lg_1tjgn_107";
13
+ const resizeNone = "_resize-none_1tjgn_119";
14
+ const resizeVertical = "_resize-vertical_1tjgn_123";
15
+ const resizeHorizontal = "_resize-horizontal_1tjgn_127";
16
+ const resizeBoth = "_resize-both_1tjgn_131";
17
+ const error = "_error_1tjgn_33";
18
+ const success = "_success_1tjgn_146";
19
+ const helperSuccess = "_helperSuccess_1tjgn_160";
20
+ const footer = "_footer_1tjgn_164";
21
+ const charCount = "_charCount_1tjgn_175";
22
+ const charCountOver = "_charCountOver_1tjgn_187";
22
23
  const styles = {
23
24
  wrapper,
24
25
  label,
@@ -28,14 +29,15 @@ const styles = {
28
29
  errorMessage,
29
30
  textarea,
30
31
  sm,
32
+ md,
31
33
  lg,
32
- "resize-none": "_resize-none_id95e_114",
34
+ "resize-none": "_resize-none_1tjgn_119",
33
35
  resizeNone,
34
- "resize-vertical": "_resize-vertical_id95e_118",
36
+ "resize-vertical": "_resize-vertical_1tjgn_123",
35
37
  resizeVertical,
36
- "resize-horizontal": "_resize-horizontal_id95e_122",
38
+ "resize-horizontal": "_resize-horizontal_1tjgn_127",
37
39
  resizeHorizontal,
38
- "resize-both": "_resize-both_id95e_126",
40
+ "resize-both": "_resize-both_1tjgn_131",
39
41
  resizeBoth,
40
42
  error,
41
43
  success,
@@ -55,6 +57,7 @@ exports.helperError = helperError;
55
57
  exports.helperSuccess = helperSuccess;
56
58
  exports.label = label;
57
59
  exports.lg = lg;
60
+ exports.md = md;
58
61
  exports.required = required;
59
62
  exports.resizeBoth = resizeBoth;
60
63
  exports.resizeHorizontal = resizeHorizontal;
@@ -1,22 +1,23 @@
1
- const wrapper = "_wrapper_id95e_1";
2
- const label = "_label_id95e_6";
3
- const required = "_required_id95e_14";
4
- const helper = "_helper_id95e_19";
5
- const helperError = "_helperError_id95e_26";
6
- const errorMessage = "_errorMessage_id95e_30";
7
- const textarea = "_textarea_id95e_36";
8
- const sm = "_sm_id95e_92";
9
- const lg = "_lg_id95e_103";
10
- const resizeNone = "_resize-none_id95e_114";
11
- const resizeVertical = "_resize-vertical_id95e_118";
12
- const resizeHorizontal = "_resize-horizontal_id95e_122";
13
- const resizeBoth = "_resize-both_id95e_126";
14
- const error = "_error_id95e_30";
15
- const success = "_success_id95e_141";
16
- const helperSuccess = "_helperSuccess_id95e_155";
17
- const footer = "_footer_id95e_159";
18
- const charCount = "_charCount_id95e_170";
19
- const charCountOver = "_charCountOver_id95e_180";
1
+ const wrapper = "_wrapper_1tjgn_1";
2
+ const label = "_label_1tjgn_8";
3
+ const required = "_required_1tjgn_17";
4
+ const helper = "_helper_1tjgn_22";
5
+ const helperError = "_helperError_1tjgn_32";
6
+ const errorMessage = "_errorMessage_1tjgn_33";
7
+ const textarea = "_textarea_1tjgn_43";
8
+ const sm = "_sm_1tjgn_83";
9
+ const md = "_md_1tjgn_95";
10
+ const lg = "_lg_1tjgn_107";
11
+ const resizeNone = "_resize-none_1tjgn_119";
12
+ const resizeVertical = "_resize-vertical_1tjgn_123";
13
+ const resizeHorizontal = "_resize-horizontal_1tjgn_127";
14
+ const resizeBoth = "_resize-both_1tjgn_131";
15
+ const error = "_error_1tjgn_33";
16
+ const success = "_success_1tjgn_146";
17
+ const helperSuccess = "_helperSuccess_1tjgn_160";
18
+ const footer = "_footer_1tjgn_164";
19
+ const charCount = "_charCount_1tjgn_175";
20
+ const charCountOver = "_charCountOver_1tjgn_187";
20
21
  const styles = {
21
22
  wrapper,
22
23
  label,
@@ -26,14 +27,15 @@ const styles = {
26
27
  errorMessage,
27
28
  textarea,
28
29
  sm,
30
+ md,
29
31
  lg,
30
- "resize-none": "_resize-none_id95e_114",
32
+ "resize-none": "_resize-none_1tjgn_119",
31
33
  resizeNone,
32
- "resize-vertical": "_resize-vertical_id95e_118",
34
+ "resize-vertical": "_resize-vertical_1tjgn_123",
33
35
  resizeVertical,
34
- "resize-horizontal": "_resize-horizontal_id95e_122",
36
+ "resize-horizontal": "_resize-horizontal_1tjgn_127",
35
37
  resizeHorizontal,
36
- "resize-both": "_resize-both_id95e_126",
38
+ "resize-both": "_resize-both_1tjgn_131",
37
39
  resizeBoth,
38
40
  error,
39
41
  success,
@@ -54,6 +56,7 @@ export {
54
56
  helperSuccess,
55
57
  label,
56
58
  lg,
59
+ md,
57
60
  required,
58
61
  resizeBoth,
59
62
  resizeHorizontal,
@@ -74,15 +74,10 @@ const TextareaRoot = React__namespace.forwardRef(function Textarea2({
74
74
  error && Textarea_module.default.helperError,
75
75
  success && Textarea_module.default.helperSuccess
76
76
  ].filter(Boolean).join(" ");
77
- const rowLine = "var(--fui-line-height-normal, 1.5) * 1em";
78
- const rowPad = "var(--fui-space-3, 1.5rem)";
79
- const textareaInlineStyle = {};
80
- if (minRows) {
81
- textareaInlineStyle.minHeight = `calc(${minRows} * ${rowLine} + ${rowPad})`;
82
- }
83
- if (maxRows) {
84
- textareaInlineStyle.maxHeight = `calc(${maxRows} * ${rowLine} + ${rowPad})`;
85
- }
77
+ const textareaInlineStyle = {
78
+ "--_fui-textarea-min-rows": minRows ?? 1,
79
+ "--_fui-textarea-max-rows": maxRows ?? 9999
80
+ };
86
81
  return /* @__PURE__ */ jsxRuntime.jsxs(
87
82
  "div",
88
83
  {
@@ -122,7 +117,7 @@ const TextareaRoot = React__namespace.forwardRef(function Textarea2({
122
117
  onBlur: (e) => onBlur == null ? void 0 : onBlur(e),
123
118
  onFocus: (e) => onFocus == null ? void 0 : onFocus(e),
124
119
  className: textareaClasses,
125
- style: Object.keys(textareaInlineStyle).length > 0 ? textareaInlineStyle : void 0
120
+ style: textareaInlineStyle
126
121
  }
127
122
  ),
128
123
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Textarea_module.default.footer, children: [
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACjD,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CACnE;IACC,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IACrD;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uCAAuC;IACvC,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACtD,0CAA0C;IAC1C,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACvD,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACjD,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA0ID,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACjD,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CACnE;IACC,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IACrD;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uCAAuC;IACvC,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACtD,0CAA0C;IAC1C,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACvD,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACjD,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAmID,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}
@@ -55,15 +55,10 @@ const TextareaRoot = React.forwardRef(function Textarea2({
55
55
  error && styles.helperError,
56
56
  success && styles.helperSuccess
57
57
  ].filter(Boolean).join(" ");
58
- const rowLine = "var(--fui-line-height-normal, 1.5) * 1em";
59
- const rowPad = "var(--fui-space-3, 1.5rem)";
60
- const textareaInlineStyle = {};
61
- if (minRows) {
62
- textareaInlineStyle.minHeight = `calc(${minRows} * ${rowLine} + ${rowPad})`;
63
- }
64
- if (maxRows) {
65
- textareaInlineStyle.maxHeight = `calc(${maxRows} * ${rowLine} + ${rowPad})`;
66
- }
58
+ const textareaInlineStyle = {
59
+ "--_fui-textarea-min-rows": minRows ?? 1,
60
+ "--_fui-textarea-max-rows": maxRows ?? 9999
61
+ };
67
62
  return /* @__PURE__ */ jsxs(
68
63
  "div",
69
64
  {
@@ -103,7 +98,7 @@ const TextareaRoot = React.forwardRef(function Textarea2({
103
98
  onBlur: (e) => onBlur == null ? void 0 : onBlur(e),
104
99
  onFocus: (e) => onFocus == null ? void 0 : onFocus(e),
105
100
  className: textareaClasses,
106
- style: Object.keys(textareaInlineStyle).length > 0 ? textareaInlineStyle : void 0
101
+ style: textareaInlineStyle
107
102
  }
108
103
  ),
109
104
  /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
@@ -0,0 +1,39 @@
1
+ "use client";
2
+ "use strict";
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
+ const React = require("react");
5
+ function _interopNamespaceDefault(e) {
6
+ const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
7
+ if (e) {
8
+ for (const k in e) {
9
+ if (k !== "default") {
10
+ const d = Object.getOwnPropertyDescriptor(e, k);
11
+ Object.defineProperty(n, k, d.get ? d : {
12
+ enumerable: true,
13
+ get: () => e[k]
14
+ });
15
+ }
16
+ }
17
+ }
18
+ n.default = e;
19
+ return Object.freeze(n);
20
+ }
21
+ const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
22
+ const ThemeContext = React__namespace.createContext(null);
23
+ function useTheme() {
24
+ const context = React__namespace.useContext(ThemeContext);
25
+ if (!context) {
26
+ return {
27
+ mode: "system",
28
+ setMode: () => {
29
+ },
30
+ resolvedMode: "light",
31
+ systemPreference: "light",
32
+ toggleMode: () => {
33
+ }
34
+ };
35
+ }
36
+ return context;
37
+ }
38
+ exports.ThemeContext = ThemeContext;
39
+ exports.useTheme = useTheme;
@@ -0,0 +1,21 @@
1
+ import * as React from "react";
2
+ export type ThemeMode = "light" | "dark" | "system";
3
+ export interface UseThemeReturn {
4
+ /** Current theme mode setting */
5
+ mode: ThemeMode;
6
+ /** Set the theme mode */
7
+ setMode: (mode: ThemeMode) => void;
8
+ /** Resolved mode (never 'system', always 'light' or 'dark') */
9
+ resolvedMode: "light" | "dark";
10
+ /** System preference detected from prefers-color-scheme */
11
+ systemPreference: "light" | "dark";
12
+ /** Toggle between light and dark (skips system) */
13
+ toggleMode: () => void;
14
+ }
15
+ export type ThemeContextValue = UseThemeReturn;
16
+ export declare const ThemeContext: React.Context<UseThemeReturn | null>;
17
+ /**
18
+ * Hook to access theme context.
19
+ */
20
+ export declare function useTheme(): UseThemeReturn;
21
+ //# sourceMappingURL=context.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/Theme/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEpD,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,IAAI,EAAE,SAAS,CAAC;IAChB,yBAAyB;IACzB,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,+DAA+D;IAC/D,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,2DAA2D;IAC3D,gBAAgB,EAAE,OAAO,GAAG,MAAM,CAAC;IACnC,mDAAmD;IACnD,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC;AAE/C,eAAO,MAAM,YAAY,sCAAsD,CAAC;AAEhF;;GAEG;AACH,wBAAgB,QAAQ,IAAI,cAAc,CAezC"}
@@ -0,0 +1,22 @@
1
+ "use client";
2
+ import * as React from "react";
3
+ const ThemeContext = React.createContext(null);
4
+ function useTheme() {
5
+ const context = React.useContext(ThemeContext);
6
+ if (!context) {
7
+ return {
8
+ mode: "system",
9
+ setMode: () => {
10
+ },
11
+ resolvedMode: "light",
12
+ systemPreference: "light",
13
+ toggleMode: () => {
14
+ }
15
+ };
16
+ }
17
+ return context;
18
+ }
19
+ export {
20
+ ThemeContext,
21
+ useTheme
22
+ };
@@ -3,8 +3,10 @@
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
4
  const jsxRuntime = require("react/jsx-runtime");
5
5
  const React = require("react");
6
- const index = require("../ComponentDefaults/index.cjs");
7
- const ThemeToggle_module = require("./ThemeToggle.module.scss.cjs");
6
+ const index$1 = require("../ComponentDefaults/index.cjs");
7
+ const index = require("../ThemeToggle/index.cjs");
8
+ const context = require("./context.cjs");
9
+ const generated = require("../../measurements/generated.cjs");
8
10
  function _interopNamespaceDefault(e) {
9
11
  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
10
12
  if (e) {
@@ -22,7 +24,6 @@ function _interopNamespaceDefault(e) {
22
24
  return Object.freeze(n);
23
25
  }
24
26
  const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
25
- const ThemeContext = React__namespace.createContext(null);
26
27
  function useSystemPreference() {
27
28
  const [preference, setPreference] = React__namespace.useState("light");
28
29
  React__namespace.useEffect(() => {
@@ -37,63 +38,6 @@ function useSystemPreference() {
37
38
  }, []);
38
39
  return preference;
39
40
  }
40
- function useTheme() {
41
- const context = React__namespace.useContext(ThemeContext);
42
- if (!context) {
43
- return {
44
- mode: "system",
45
- setMode: () => {
46
- },
47
- resolvedMode: "light",
48
- systemPreference: "light",
49
- toggleMode: () => {
50
- }
51
- };
52
- }
53
- return context;
54
- }
55
- function SunIcon({ size = 20 }) {
56
- return /* @__PURE__ */ jsxRuntime.jsx(
57
- "svg",
58
- {
59
- xmlns: "http://www.w3.org/2000/svg",
60
- width: size,
61
- height: size,
62
- viewBox: "0 0 256 256",
63
- fill: "currentColor",
64
- "aria-hidden": "true",
65
- children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z" })
66
- }
67
- );
68
- }
69
- function MoonIcon({ size = 20 }) {
70
- return /* @__PURE__ */ jsxRuntime.jsx(
71
- "svg",
72
- {
73
- xmlns: "http://www.w3.org/2000/svg",
74
- width: size,
75
- height: size,
76
- viewBox: "0 0 256 256",
77
- fill: "currentColor",
78
- "aria-hidden": "true",
79
- children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z" })
80
- }
81
- );
82
- }
83
- function MonitorIcon({ size = 20 }) {
84
- return /* @__PURE__ */ jsxRuntime.jsx(
85
- "svg",
86
- {
87
- xmlns: "http://www.w3.org/2000/svg",
88
- width: size,
89
- height: size,
90
- viewBox: "0 0 256 256",
91
- fill: "currentColor",
92
- "aria-hidden": "true",
93
- children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M208,40H48A24,24,0,0,0,24,64V176a24,24,0,0,0,24,24H208a24,24,0,0,0,24-24V64A24,24,0,0,0,208,40Zm8,136a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8Zm-48,48a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,224Z" })
94
- }
95
- );
96
- }
97
41
  function ThemeProvider({
98
42
  children,
99
43
  componentDefaults,
@@ -160,122 +104,18 @@ function ThemeProvider({
160
104
  systemPreference,
161
105
  toggleMode
162
106
  };
163
- const themedChildren = /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: contextValue, children });
107
+ const themedChildren = /* @__PURE__ */ jsxRuntime.jsx(context.ThemeContext.Provider, { value: contextValue, children });
164
108
  if (!componentDefaults) {
165
109
  return themedChildren;
166
110
  }
167
- return /* @__PURE__ */ jsxRuntime.jsx(index.ComponentDefaultsProvider, { value: componentDefaults, children: themedChildren });
168
- }
169
- function ThemeToggle({
170
- size: sizeProp,
171
- showSystem = false,
172
- value: controlledValue,
173
- onValueChange,
174
- "aria-label": ariaLabel,
175
- className,
176
- ...htmlProps
177
- }) {
178
- const size = index.useResolvedControlSize(sizeProp);
179
- const { mode: contextMode, setMode: setContextMode } = useTheme();
180
- const isControlled = controlledValue !== void 0;
181
- const currentMode = isControlled ? controlledValue : contextMode;
182
- const handleModeChange = (newMode) => {
183
- if (isControlled) {
184
- onValueChange == null ? void 0 : onValueChange(newMode);
185
- } else {
186
- setContextMode(newMode);
187
- }
188
- };
189
- const groupClasses = [
190
- ThemeToggle_module.default.toggleGroup,
191
- ThemeToggle_module.default[`size${size.charAt(0).toUpperCase() + size.slice(1)}`],
192
- className
193
- ].filter(Boolean).join(" ");
194
- const getButtonClasses = (buttonMode) => {
195
- return [ThemeToggle_module.default.toggleButton, currentMode === buttonMode && ThemeToggle_module.default.toggleButtonActive].filter(Boolean).join(" ");
196
- };
197
- const label = ariaLabel || "Theme toggle";
198
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlProps, className: groupClasses, role: "group", "aria-label": label, children: [
199
- /* @__PURE__ */ jsxRuntime.jsx(
200
- "button",
201
- {
202
- type: "button",
203
- className: getButtonClasses("light"),
204
- onClick: () => handleModeChange("light"),
205
- "aria-pressed": currentMode === "light",
206
- "aria-label": "Light mode",
207
- children: /* @__PURE__ */ jsxRuntime.jsx(SunIcon, {})
208
- }
209
- ),
210
- /* @__PURE__ */ jsxRuntime.jsx(
211
- "button",
212
- {
213
- type: "button",
214
- className: getButtonClasses("dark"),
215
- onClick: () => handleModeChange("dark"),
216
- "aria-pressed": currentMode === "dark",
217
- "aria-label": "Dark mode",
218
- children: /* @__PURE__ */ jsxRuntime.jsx(MoonIcon, {})
219
- }
220
- ),
221
- showSystem && !isControlled && /* @__PURE__ */ jsxRuntime.jsx(
222
- "button",
223
- {
224
- type: "button",
225
- className: getButtonClasses("system"),
226
- onClick: () => setContextMode("system"),
227
- "aria-pressed": contextMode === "system",
228
- "aria-label": "System preference",
229
- children: /* @__PURE__ */ jsxRuntime.jsx(MonitorIcon, {})
230
- }
231
- )
232
- ] });
111
+ return /* @__PURE__ */ jsxRuntime.jsx(index$1.ComponentDefaultsProvider, { value: componentDefaults, children: themedChildren });
233
112
  }
234
113
  const Theme = Object.assign(ThemeProvider, {
235
114
  Root: ThemeProvider,
236
115
  Provider: ThemeProvider,
237
- Toggle: ThemeToggle,
238
- useTheme
116
+ Toggle: index.ThemeToggle,
117
+ useTheme: context.useTheme
239
118
  });
240
- const RADIUS_PRESETS = {
241
- sharp: { sm: "0", md: "0", lg: "0", xl: "0" },
242
- subtle: { sm: "0.125rem", md: "0.25rem", lg: "0.375rem", xl: "0.5rem" },
243
- default: { sm: "0.25rem", md: "0.429rem", lg: "0.571rem", xl: "0.857rem" },
244
- rounded: { sm: "0.375rem", md: "0.5rem", lg: "0.75rem", xl: "1rem" },
245
- pill: { sm: "0.5rem", md: "0.75rem", lg: "1rem", xl: "1.5rem" }
246
- };
247
- const DENSITY_CONFIGS = {
248
- compact: {
249
- baseUnit: 6,
250
- baseFontSize: 14,
251
- buttonHeightXs: 32,
252
- buttonHeights: [32, 32, 36],
253
- inputHeights: [32, 32, 36],
254
- touchTargets: [32, 32, 40],
255
- sidebarItemHeight: 32
256
- },
257
- default: {
258
- baseUnit: 7,
259
- baseFontSize: 14,
260
- buttonHeightXs: 32,
261
- buttonHeights: [32, 40, 44],
262
- inputHeights: [32, 40, 44],
263
- touchTargets: [32, 32, 44],
264
- sidebarItemHeight: 32
265
- },
266
- relaxed: {
267
- baseUnit: 8,
268
- baseFontSize: 14,
269
- buttonHeightXs: 32,
270
- buttonHeights: [32, 44, 48],
271
- inputHeights: [32, 44, 48],
272
- touchTargets: [32, 40, 48],
273
- sidebarItemHeight: 36
274
- }
275
- };
276
- function pxToRem(px, baseFontSize) {
277
- return `${px / baseFontSize}rem`;
278
- }
279
119
  function hexToRgb(hex) {
280
120
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
281
121
  if (!result) return null;
@@ -307,48 +147,13 @@ function configureTheme(options) {
307
147
  if (options.success) setVar(root, "--fui-color-success", options.success);
308
148
  if (options.warning) setVar(root, "--fui-color-warning", options.warning);
309
149
  if (options.info) setVar(root, "--fui-color-info", options.info);
310
- if (options.radiusStyle) {
311
- const r = RADIUS_PRESETS[options.radiusStyle];
312
- if (r) {
313
- setVar(root, "--fui-radius-sm", r.sm);
314
- setVar(root, "--fui-radius-md", r.md);
315
- setVar(root, "--fui-radius-lg", r.lg);
316
- setVar(root, "--fui-radius-xl", r.xl);
317
- }
318
- }
319
- if (options.density) {
320
- const d = DENSITY_CONFIGS[options.density];
321
- if (d) {
322
- const unitRem = d.baseUnit / d.baseFontSize;
323
- setVar(root, "--fui-space-0-5", `${unitRem * 0.3}rem`);
324
- setVar(root, "--fui-space-0-75", `${unitRem * 0.43}rem`);
325
- setVar(root, "--fui-space-1", `${unitRem}rem`);
326
- setVar(root, "--fui-space-2", `${unitRem * 2}rem`);
327
- setVar(root, "--fui-space-3", `${unitRem * 3}rem`);
328
- setVar(root, "--fui-space-4", `${unitRem * 4}rem`);
329
- setVar(root, "--fui-space-5", `${unitRem * 5}rem`);
330
- setVar(root, "--fui-space-6", `${unitRem * 6}rem`);
331
- setVar(root, "--fui-space-8", `${unitRem * 8}rem`);
332
- setVar(root, "--fui-space-10", `${unitRem * 10}rem`);
333
- setVar(root, "--fui-space-12", `${unitRem * 12}rem`);
334
- setVar(root, "--fui-button-height-xs", pxToRem(d.buttonHeightXs, d.baseFontSize));
335
- setVar(root, "--fui-button-height-sm", pxToRem(d.buttonHeights[0], d.baseFontSize));
336
- setVar(root, "--fui-button-height-md", pxToRem(d.buttonHeights[1], d.baseFontSize));
337
- setVar(root, "--fui-button-height-lg", pxToRem(d.buttonHeights[2], d.baseFontSize));
338
- setVar(root, "--fui-input-height-sm", pxToRem(d.inputHeights[0], d.baseFontSize));
339
- setVar(root, "--fui-input-height", pxToRem(d.inputHeights[1], d.baseFontSize));
340
- setVar(root, "--fui-input-height-lg", pxToRem(d.inputHeights[2], d.baseFontSize));
341
- setVar(root, "--fui-touch-sm", pxToRem(d.touchTargets[0], d.baseFontSize));
342
- setVar(root, "--fui-touch-md", pxToRem(d.touchTargets[1], d.baseFontSize));
343
- setVar(root, "--fui-touch-lg", pxToRem(d.touchTargets[2], d.baseFontSize));
344
- setVar(root, "--fui-target-size-min", pxToRem(32, d.baseFontSize));
345
- setVar(root, "--fui-sidebar-item-height", pxToRem(d.sidebarItemHeight, d.baseFontSize));
346
- setVar(root, "--fui-base-unit", `${d.baseUnit}px`);
347
- }
348
- }
150
+ generated.applyMeasurementSelection(root, {
151
+ density: options.density,
152
+ radiusStyle: options.radiusStyle
153
+ });
349
154
  }
155
+ exports.ThemeToggle = index.ThemeToggle;
156
+ exports.useTheme = context.useTheme;
350
157
  exports.Theme = Theme;
351
158
  exports.ThemeProvider = ThemeProvider;
352
- exports.ThemeToggle = ThemeToggle;
353
159
  exports.configureTheme = configureTheme;
354
- exports.useTheme = useTheme;