@tcn/ui 0.3.0 → 0.3.2

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 (584) hide show
  1. package/README.md +2 -1
  2. package/dist/Color-ASIRERSW-B4GaVKuQ.js +990 -0
  3. package/dist/Color-ASIRERSW-B4GaVKuQ.js.map +1 -0
  4. package/dist/WithTooltip-IO6J4KBT-B1oq93K5.js +1485 -0
  5. package/dist/WithTooltip-IO6J4KBT-B1oq93K5.js.map +1 -0
  6. package/dist/actions/__docs__/components/gallery.d.ts +8 -0
  7. package/dist/actions/__docs__/components/gallery.d.ts.map +1 -0
  8. package/dist/actions/__docs__/components/gallery.js +20 -0
  9. package/dist/actions/__docs__/components/gallery.js.map +1 -0
  10. package/dist/actions/__docs__/components/showcase.d.ts +27 -0
  11. package/dist/actions/__docs__/components/showcase.d.ts.map +1 -0
  12. package/dist/actions/__docs__/components/showcase.js +15 -0
  13. package/dist/actions/__docs__/components/showcase.js.map +1 -0
  14. package/dist/actions/button/base_button/base_button.d.ts +2 -0
  15. package/dist/actions/button/base_button/base_button.d.ts.map +1 -1
  16. package/dist/actions/button/base_button/base_button.js +30 -28
  17. package/dist/actions/button/base_button/base_button.js.map +1 -1
  18. package/dist/actions/button/button/button.js +6 -6
  19. package/dist/actions/button/button_group/button_group.d.ts +1 -1
  20. package/dist/actions/button/button_group/button_group.d.ts.map +1 -1
  21. package/dist/actions/button/button_group/button_group.js +11 -8
  22. package/dist/actions/button/button_group/button_group.js.map +1 -1
  23. package/dist/actions/button/select_group/select_group.js +15 -15
  24. package/dist/actions/button/select_group/select_group.js.map +1 -1
  25. package/dist/actions/button/select_group/single_select_group.js +6 -6
  26. package/dist/actions/button/slim_button/slim_button.js +2 -2
  27. package/dist/actions/types.d.ts +2 -0
  28. package/dist/actions/types.d.ts.map +1 -0
  29. package/dist/badge.css +1 -1
  30. package/dist/base_button.css +1 -1
  31. package/dist/body_text.css +1 -1
  32. package/dist/bottom_resize_handle.css +1 -1
  33. package/dist/bubble.css +1 -1
  34. package/dist/button.css +1 -1
  35. package/dist/button_group.css +1 -1
  36. package/dist/callout.css +1 -1
  37. package/dist/caption.css +1 -1
  38. package/dist/checkbox.css +1 -1
  39. package/dist/chip.css +1 -1
  40. package/dist/circle.css +1 -1
  41. package/dist/collapsible_box.css +1 -1
  42. package/dist/color_input.css +1 -1
  43. package/dist/color_picker.css +1 -1
  44. package/dist/column.css +1 -1
  45. package/dist/confirm.css +1 -1
  46. package/dist/css/layers.css +1 -0
  47. package/dist/date_picker.css +1 -1
  48. package/dist/date_picker_date.css +1 -1
  49. package/dist/date_picker_day.css +1 -1
  50. package/dist/date_picker_header.css +1 -1
  51. package/dist/date_picker_input.css +1 -1
  52. package/dist/date_picker_time_selector.css +1 -1
  53. package/dist/date_picker_year_input.css +1 -1
  54. package/dist/date_picker_year_selector.css +1 -1
  55. package/dist/divider.css +1 -1
  56. package/dist/draggable.css +1 -1
  57. package/dist/drawer_bottom.css +1 -1
  58. package/dist/drawer_end.css +1 -1
  59. package/dist/drawer_start.css +1 -1
  60. package/dist/drawer_top.css +1 -1
  61. package/dist/end_resize_handle.css +1 -1
  62. package/dist/feedback/loading/loading.js +12 -12
  63. package/dist/feedback/loading/loading.js.map +1 -1
  64. package/dist/feedback/progress/progress_bar.d.ts.map +1 -1
  65. package/dist/feedback/progress/progress_bar.js +34 -26
  66. package/dist/feedback/progress/progress_bar.js.map +1 -1
  67. package/dist/field_control.css +1 -1
  68. package/dist/field_set.css +1 -1
  69. package/dist/footer.css +1 -1
  70. package/dist/footnote.css +1 -1
  71. package/dist/form/field/common/field_control/field_control.js +1 -1
  72. package/dist/form/field/common/field_control/field_control.js.map +1 -1
  73. package/dist/form/field/common/field_description.js +3 -3
  74. package/dist/form/field/common/field_description.js.map +1 -1
  75. package/dist/form/field/common/field_error.js +8 -7
  76. package/dist/form/field/common/field_error.js.map +1 -1
  77. package/dist/form/field/common/field_header.js +7 -7
  78. package/dist/form/field/common/field_header.js.map +1 -1
  79. package/dist/form/field/common/status_input/status_input.d.ts.map +1 -1
  80. package/dist/form/field/common/status_input/status_input.js +20 -14
  81. package/dist/form/field/common/status_input/status_input.js.map +1 -1
  82. package/dist/form/field/field.js +5 -5
  83. package/dist/form/field/h_field/h_field.js +11 -11
  84. package/dist/form/field/h_field/h_field.js.map +1 -1
  85. package/dist/form/field/v_field/v_field.js +8 -8
  86. package/dist/form/field/v_field/v_field.js.map +1 -1
  87. package/dist/form/field_set/field_set.d.ts.map +1 -1
  88. package/dist/form/field_set/field_set.js +19 -12
  89. package/dist/form/field_set/field_set.js.map +1 -1
  90. package/dist/formatter-QJ4M4OGQ-DaIl2Wi_.js +6 -0
  91. package/dist/formatter-QJ4M4OGQ-DaIl2Wi_.js.map +1 -0
  92. package/dist/frame.css +1 -1
  93. package/dist/gallery.css +1 -0
  94. package/dist/grid.css +1 -1
  95. package/dist/h_body.css +1 -1
  96. package/dist/h_field.css +1 -1
  97. package/dist/h_panel.css +1 -1
  98. package/dist/header.css +1 -1
  99. package/dist/headline.css +1 -1
  100. package/dist/input.css +1 -1
  101. package/dist/inputs/checkbox/checkbox.js +15 -15
  102. package/dist/inputs/checkbox/checkbox.js.map +1 -1
  103. package/dist/inputs/checkbox/checkbox_row.d.ts +1 -1
  104. package/dist/inputs/checkbox/checkbox_row.d.ts.map +1 -1
  105. package/dist/inputs/checkbox/checkbox_row.js +19 -8
  106. package/dist/inputs/checkbox/checkbox_row.js.map +1 -1
  107. package/dist/inputs/color_input/color_input.d.ts.map +1 -1
  108. package/dist/inputs/color_input/color_input.js +32 -28
  109. package/dist/inputs/color_input/color_input.js.map +1 -1
  110. package/dist/inputs/color_input/color_picker.js +14 -14
  111. package/dist/inputs/color_input/color_picker.js.map +1 -1
  112. package/dist/inputs/combo_box/combo_box.js +16 -16
  113. package/dist/inputs/combo_box/combo_box.js.map +1 -1
  114. package/dist/inputs/date_picker/date_picker.js +26 -26
  115. package/dist/inputs/date_picker/date_picker.js.map +1 -1
  116. package/dist/inputs/date_picker/date_picker_body.js +3 -3
  117. package/dist/inputs/date_picker/date_picker_body.js.map +1 -1
  118. package/dist/inputs/date_picker/date_picker_date.js +2 -2
  119. package/dist/inputs/date_picker/date_picker_date.js.map +1 -1
  120. package/dist/inputs/date_picker/date_picker_day.d.ts.map +1 -1
  121. package/dist/inputs/date_picker/date_picker_day.js +16 -8
  122. package/dist/inputs/date_picker/date_picker_day.js.map +1 -1
  123. package/dist/inputs/date_picker/date_picker_header.js +1 -1
  124. package/dist/inputs/date_picker/date_picker_header.js.map +1 -1
  125. package/dist/inputs/date_picker/date_picker_input.js +18 -18
  126. package/dist/inputs/date_picker/date_picker_input.js.map +1 -1
  127. package/dist/inputs/date_picker/date_picker_time_selector.d.ts.map +1 -1
  128. package/dist/inputs/date_picker/date_picker_time_selector.js +14 -11
  129. package/dist/inputs/date_picker/date_picker_time_selector.js.map +1 -1
  130. package/dist/inputs/date_picker/date_picker_year_input.js +4 -4
  131. package/dist/inputs/date_picker/date_picker_year_input.js.map +1 -1
  132. package/dist/inputs/date_picker/date_picker_year_selector.d.ts.map +1 -1
  133. package/dist/inputs/date_picker/date_picker_year_selector.js +13 -10
  134. package/dist/inputs/date_picker/date_picker_year_selector.js.map +1 -1
  135. package/dist/inputs/index.d.ts +0 -4
  136. package/dist/inputs/index.d.ts.map +1 -1
  137. package/dist/inputs/index.js +53 -61
  138. package/dist/inputs/index.js.map +1 -1
  139. package/dist/inputs/input/input.js +6 -6
  140. package/dist/inputs/input/input.js.map +1 -1
  141. package/dist/inputs/mask_input/key_capture_input.js +7 -7
  142. package/dist/inputs/mask_input/mask_input.js +4 -4
  143. package/dist/inputs/multi_combo_box/multi_combo_box.js +17 -17
  144. package/dist/inputs/multiselect/multiselect.d.ts.map +1 -1
  145. package/dist/inputs/multiselect/multiselect.js +23 -22
  146. package/dist/inputs/multiselect/multiselect.js.map +1 -1
  147. package/dist/inputs/multiselect/multiselect_inline_values.d.ts.map +1 -1
  148. package/dist/inputs/multiselect/multiselect_inline_values.js +18 -17
  149. package/dist/inputs/multiselect/multiselect_inline_values.js.map +1 -1
  150. package/dist/inputs/multiselect/multiselect_values.js +20 -20
  151. package/dist/inputs/multiselect/multiselect_values.js.map +1 -1
  152. package/dist/inputs/phone_number_input/phone_number_input.d.ts.map +1 -1
  153. package/dist/inputs/phone_number_input/phone_number_input.js +104 -91
  154. package/dist/inputs/phone_number_input/phone_number_input.js.map +1 -1
  155. package/dist/inputs/radio/radio.js +18 -18
  156. package/dist/inputs/radio/radio.js.map +1 -1
  157. package/dist/inputs/radio/radio_row.js +3 -3
  158. package/dist/inputs/select/select.d.ts.map +1 -1
  159. package/dist/inputs/select/select.js +40 -40
  160. package/dist/inputs/select/select.js.map +1 -1
  161. package/dist/inputs/slider/slider.js +9 -9
  162. package/dist/inputs/slider/slider.js.map +1 -1
  163. package/dist/inputs/suggestions/suggestion_item.js +9 -9
  164. package/dist/inputs/suggestions/suggestion_item.js.map +1 -1
  165. package/dist/inputs/suggestions/suggestion_list.d.ts.map +1 -1
  166. package/dist/inputs/suggestions/suggestion_list.js +29 -22
  167. package/dist/inputs/suggestions/suggestion_list.js.map +1 -1
  168. package/dist/inputs/switch/switch.js +16 -16
  169. package/dist/inputs/switch/switch.js.map +1 -1
  170. package/dist/inputs/textarea/textarea.js +4 -4
  171. package/dist/inputs/textarea/textarea.js.map +1 -1
  172. package/dist/inputs/unit_input/unit_input.js +12 -12
  173. package/dist/inputs/unit_input/unit_input.js.map +1 -1
  174. package/dist/layouts/body/h_body.js +7 -7
  175. package/dist/layouts/body/h_body.js.map +1 -1
  176. package/dist/layouts/body/v_body.js +6 -6
  177. package/dist/layouts/column/column.js +14 -14
  178. package/dist/layouts/column/column.js.map +1 -1
  179. package/dist/layouts/divider/divider.d.ts.map +1 -1
  180. package/dist/layouts/divider/divider.js +11 -12
  181. package/dist/layouts/divider/divider.js.map +1 -1
  182. package/dist/layouts/footer/footer.js +7 -7
  183. package/dist/layouts/grid/grid.d.ts.map +1 -1
  184. package/dist/layouts/grid/grid.js +40 -31
  185. package/dist/layouts/grid/grid.js.map +1 -1
  186. package/dist/layouts/header/header.js +5 -5
  187. package/dist/layouts/header/header.js.map +1 -1
  188. package/dist/layouts/list/item.js +2 -2
  189. package/dist/layouts/list/list.js +7 -7
  190. package/dist/layouts/list/section_header.d.ts.map +1 -1
  191. package/dist/layouts/list/section_header.js +17 -7
  192. package/dist/layouts/list/section_header.js.map +1 -1
  193. package/dist/layouts/scaffold/scaffold.js +16 -16
  194. package/dist/layouts/sidebar_end/sidebar_end.js +25 -25
  195. package/dist/layouts/sidebar_end/sidebar_end.js.map +1 -1
  196. package/dist/layouts/sidebar_start/sidebar_start.js +21 -21
  197. package/dist/layouts/sidebar_start/sidebar_start.js.map +1 -1
  198. package/dist/layouts/utility_bar/utility_bar.d.ts.map +1 -1
  199. package/dist/layouts/utility_bar/utility_bar.js +12 -17
  200. package/dist/layouts/utility_bar/utility_bar.js.map +1 -1
  201. package/dist/left_resize_handle.css +1 -1
  202. package/dist/loading.css +1 -1
  203. package/dist/menu.css +1 -1
  204. package/dist/modal.css +1 -1
  205. package/dist/multi_combo_box.css +1 -1
  206. package/dist/multiselect.css +1 -1
  207. package/dist/multiselect_values.css +1 -1
  208. package/dist/overlay/context_menu/context_menu.js +5 -5
  209. package/dist/overlay/context_menu/context_menu.js.map +1 -1
  210. package/dist/overlay/frame/frame.js +4 -4
  211. package/dist/overlay/menu/menu.js +35 -35
  212. package/dist/overlay/menu/menu.js.map +1 -1
  213. package/dist/overlay/popper/legacy/popper.d.ts.map +1 -1
  214. package/dist/overlay/popper/legacy/popper.js +12 -11
  215. package/dist/overlay/popper/legacy/popper.js.map +1 -1
  216. package/dist/overlay/popper/preview_popper.js +16 -16
  217. package/dist/overlay/popper/preview_popper.js.map +1 -1
  218. package/dist/overlay/portal/portal.css +1 -0
  219. package/dist/overlay/portal/portal_platform.d.ts.map +1 -1
  220. package/dist/overlay/portal/portal_platform.js +6 -5
  221. package/dist/overlay/portal/portal_platform.js.map +1 -1
  222. package/dist/overlay/portal/portal_platform_context.js +4 -4
  223. package/dist/page.css +1 -1
  224. package/dist/phone_number_input.css +1 -1
  225. package/dist/picture_placeholder.css +1 -1
  226. package/dist/popper.css +1 -1
  227. package/dist/progress_bar.css +1 -1
  228. package/dist/radio.css +1 -1
  229. package/dist/rect.css +1 -1
  230. package/dist/right_resize_handle.css +1 -1
  231. package/dist/scaffold.css +1 -1
  232. package/dist/select.css +1 -1
  233. package/dist/select_group.css +1 -1
  234. package/dist/showcase-WfP6kBEb.js +58401 -0
  235. package/dist/showcase-WfP6kBEb.js.map +1 -0
  236. package/dist/showcase.css +1 -0
  237. package/dist/sidebar_end.css +1 -1
  238. package/dist/sidebar_start.css +1 -1
  239. package/dist/slider.css +1 -1
  240. package/dist/slim_button.css +1 -1
  241. package/dist/stack.css +1 -1
  242. package/dist/stacks/box/bottom_resize_handle.js +1 -1
  243. package/dist/stacks/box/bottom_resize_handle.js.map +1 -1
  244. package/dist/stacks/box/box.js +24 -24
  245. package/dist/stacks/box/box.js.map +1 -1
  246. package/dist/stacks/box/end_resize_handle.js +1 -1
  247. package/dist/stacks/box/end_resize_handle.js.map +1 -1
  248. package/dist/stacks/box/left_resize_handle.js +7 -7
  249. package/dist/stacks/box/left_resize_handle.js.map +1 -1
  250. package/dist/stacks/box/right_resize_handle.js +3 -3
  251. package/dist/stacks/box/right_resize_handle.js.map +1 -1
  252. package/dist/stacks/box/start_resize_handle.js +6 -6
  253. package/dist/stacks/box/start_resize_handle.js.map +1 -1
  254. package/dist/stacks/box/top_resize_handle.js +1 -1
  255. package/dist/stacks/box/top_resize_handle.js.map +1 -1
  256. package/dist/stacks/h_collapsible_box.d.ts.map +1 -1
  257. package/dist/stacks/h_collapsible_box.js +10 -6
  258. package/dist/stacks/h_collapsible_box.js.map +1 -1
  259. package/dist/stacks/h_stack.js +45 -45
  260. package/dist/stacks/h_stack.js.map +1 -1
  261. package/dist/stacks/spacer.js +16 -16
  262. package/dist/stacks/spacer.js.map +1 -1
  263. package/dist/stacks/story_components/circle.js +9 -9
  264. package/dist/stacks/story_components/circle.js.map +1 -1
  265. package/dist/stacks/story_components/picture_placeholder.d.ts.map +1 -1
  266. package/dist/stacks/story_components/picture_placeholder.js +13 -9
  267. package/dist/stacks/story_components/picture_placeholder.js.map +1 -1
  268. package/dist/stacks/story_components/rect.js +5 -5
  269. package/dist/stacks/story_components/rect.js.map +1 -1
  270. package/dist/stacks/story_components/style_box.js +4 -4
  271. package/dist/stacks/utils/use_is_collapsed.js +6 -6
  272. package/dist/stacks/v_collapsible_box.d.ts.map +1 -1
  273. package/dist/stacks/v_collapsible_box.js +12 -8
  274. package/dist/stacks/v_collapsible_box.js.map +1 -1
  275. package/dist/stacks/v_stack.js +45 -45
  276. package/dist/stacks/v_stack.js.map +1 -1
  277. package/dist/stacks/z_stack.js +39 -39
  278. package/dist/stacks/z_stack.js.map +1 -1
  279. package/dist/start_resize_handle.css +1 -1
  280. package/dist/status_input.css +1 -1
  281. package/dist/subheadline.css +1 -1
  282. package/dist/suggestion_item.css +1 -1
  283. package/dist/suggestion_list.css +1 -1
  284. package/dist/surfaces/alert/alert.js +3 -3
  285. package/dist/surfaces/alert/alert.js.map +1 -1
  286. package/dist/surfaces/card/card.js +4 -4
  287. package/dist/surfaces/confirm/confirm.d.ts.map +1 -1
  288. package/dist/surfaces/confirm/confirm.js +27 -20
  289. package/dist/surfaces/confirm/confirm.js.map +1 -1
  290. package/dist/surfaces/drawers/drawer_bottom/drawer_bottom.js +3 -3
  291. package/dist/surfaces/drawers/drawer_bottom/drawer_bottom.js.map +1 -1
  292. package/dist/surfaces/drawers/drawer_end/drawer_end.js +4 -4
  293. package/dist/surfaces/drawers/drawer_end/drawer_end.js.map +1 -1
  294. package/dist/surfaces/drawers/drawer_start/drawer_start.js +3 -3
  295. package/dist/surfaces/drawers/drawer_start/drawer_start.js.map +1 -1
  296. package/dist/surfaces/drawers/drawer_top/drawer_top.js +3 -3
  297. package/dist/surfaces/drawers/drawer_top/drawer_top.js.map +1 -1
  298. package/dist/surfaces/modal/modal.js +5 -5
  299. package/dist/surfaces/page/h_page.js +7 -7
  300. package/dist/surfaces/page/h_page.js.map +1 -1
  301. package/dist/surfaces/page/v_page.js +7 -7
  302. package/dist/surfaces/page/v_page.js.map +1 -1
  303. package/dist/surfaces/panel/h_panel.js +14 -14
  304. package/dist/surfaces/panel/v_panel.js +9 -9
  305. package/dist/surfaces/pop_confirm/pop_confirm.js +6 -6
  306. package/dist/surfaces/popconfirm/pop_confirm.js +8 -8
  307. package/dist/surfaces/popover/popover.js +1 -1
  308. package/dist/surfaces/popover/popover.js.map +1 -1
  309. package/dist/surfaces/tooltip/tooltip.js +8 -8
  310. package/dist/surfaces/window/window.js +9 -9
  311. package/dist/switch.css +1 -1
  312. package/dist/syntaxhighlighter-IQDEPFLK-BX_eF8__.js +3777 -0
  313. package/dist/syntaxhighlighter-IQDEPFLK-BX_eF8__.js.map +1 -0
  314. package/dist/tethered.css +1 -1
  315. package/dist/textarea.css +1 -1
  316. package/dist/themes/stylesheets/reset.css +1 -0
  317. package/dist/themes/stylesheets/reset.js +133 -131
  318. package/dist/themes/stylesheets/reset.js.map +1 -1
  319. package/dist/themes/theme.d.ts.map +1 -1
  320. package/dist/themes/theme.js +15 -6
  321. package/dist/themes/theme.js.map +1 -1
  322. package/dist/themes/themes/ergo/ergo_theme.css +1 -0
  323. package/dist/themes/themes/ergo/ergo_theme.js +505 -515
  324. package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
  325. package/dist/themes/themes/windows_98/windows_98.css +1 -0
  326. package/dist/themes/themes/windows_98/windows_98_theme.js +1034 -1168
  327. package/dist/themes/themes/windows_98/windows_98_theme.js.map +1 -1
  328. package/dist/title.css +1 -1
  329. package/dist/tokens/badge/badge.js +13 -13
  330. package/dist/tokens/badge/badge.js.map +1 -1
  331. package/dist/tokens/bubble/bubble.js +6 -5
  332. package/dist/tokens/bubble/bubble.js.map +1 -1
  333. package/dist/tokens/chip/chip.js +4 -3
  334. package/dist/tokens/chip/chip.js.map +1 -1
  335. package/dist/tooltip.css +1 -1
  336. package/dist/top_resize_handle.css +1 -1
  337. package/dist/typography/body_text/body_text.js +9 -9
  338. package/dist/typography/body_text/body_text.js.map +1 -1
  339. package/dist/typography/callout/callout.js +9 -9
  340. package/dist/typography/callout/callout.js.map +1 -1
  341. package/dist/typography/caption/caption.js +5 -5
  342. package/dist/typography/caption/caption.js.map +1 -1
  343. package/dist/typography/footnote/footnote.js +9 -9
  344. package/dist/typography/footnote/footnote.js.map +1 -1
  345. package/dist/typography/headline/headline.js +13 -13
  346. package/dist/typography/headline/headline.js.map +1 -1
  347. package/dist/typography/subheadline/subheadline.js +10 -10
  348. package/dist/typography/subheadline/subheadline.js.map +1 -1
  349. package/dist/typography/title/title.js +6 -6
  350. package/dist/typography/title/title.js.map +1 -1
  351. package/dist/unit_input.css +1 -1
  352. package/dist/utility_bar.css +1 -1
  353. package/dist/utils/click_away_listener.js +10 -10
  354. package/dist/utils/click_away_listener.js.map +1 -1
  355. package/dist/utils/dnd/draggable/draggable.js +4 -4
  356. package/dist/utils/dnd/handle.js +8 -8
  357. package/dist/utils/focus_redirect.js +5 -5
  358. package/dist/utils/hooks/make_context_hook.js +4 -4
  359. package/dist/utils/hooks/use_media_query.js +2 -2
  360. package/dist/utils/hooks/use_media_query.js.map +1 -1
  361. package/dist/v_body.css +1 -1
  362. package/dist/window.css +1 -1
  363. package/package.json +3 -3
  364. package/src/actions/__docs__/actions.mdx +194 -0
  365. package/src/actions/__docs__/actions.stories.tsx +481 -0
  366. package/src/actions/__docs__/components/gallery.module.css +6 -0
  367. package/src/actions/__docs__/components/gallery.tsx +28 -0
  368. package/src/actions/__docs__/components/showcase.module.css +55 -0
  369. package/src/actions/__docs__/components/showcase.tsx +121 -0
  370. package/src/actions/button/__stories__/button_group.stories.tsx +63 -0
  371. package/src/actions/button/__stories__/select_group.stories.tsx +47 -4
  372. package/src/actions/button/base_button/base_button.module.css +15 -13
  373. package/src/actions/button/base_button/base_button.tsx +6 -1
  374. package/src/actions/button/button/button.module.css +52 -50
  375. package/src/actions/button/button_group/button_group.module.css +54 -52
  376. package/src/actions/button/button_group/button_group.tsx +9 -4
  377. package/src/actions/button/select_group/select_group.module.css +54 -52
  378. package/src/actions/button/select_group/select_group.tsx +2 -2
  379. package/src/actions/button/slim_button/slim_button.module.css +7 -5
  380. package/src/actions/types.ts +6 -0
  381. package/src/css/layers.css +1 -0
  382. package/src/feedback/loading/loading.module.css +17 -15
  383. package/src/feedback/progress/progress_bar.module.css +52 -50
  384. package/src/feedback/progress/progress_bar.tsx +6 -1
  385. package/src/form/field/common/field_control/field_control.module.css +17 -15
  386. package/src/form/field/common/field_control/field_control.tsx +1 -1
  387. package/src/form/field/common/field_description.tsx +1 -1
  388. package/src/form/field/common/field_error.tsx +1 -1
  389. package/src/form/field/common/field_header.tsx +1 -1
  390. package/src/form/field/common/status_input/status_input.module.css +10 -8
  391. package/src/form/field/common/status_input/status_input.tsx +8 -5
  392. package/src/form/field/h_field/h_field.module.css +7 -5
  393. package/src/form/field/h_field/h_field.tsx +1 -1
  394. package/src/form/field/v_field/v_field.tsx +1 -1
  395. package/src/form/field_set/field_set.module.css +16 -14
  396. package/src/form/field_set/field_set.tsx +7 -4
  397. package/src/inputs/checkbox/checkbox.module.css +45 -43
  398. package/src/inputs/checkbox/checkbox.tsx +1 -1
  399. package/src/inputs/checkbox/checkbox_row.tsx +9 -2
  400. package/src/inputs/color_input/color_input.module.css +58 -56
  401. package/src/inputs/color_input/color_input.tsx +8 -4
  402. package/src/inputs/color_input/color_picker.module.css +13 -11
  403. package/src/inputs/color_input/color_picker.tsx +2 -2
  404. package/src/inputs/combo_box/combo_box.tsx +1 -1
  405. package/src/inputs/date_picker/date_picker.module.css +19 -17
  406. package/src/inputs/date_picker/date_picker.tsx +2 -2
  407. package/src/inputs/date_picker/date_picker_body.tsx +1 -1
  408. package/src/inputs/date_picker/date_picker_date.module.css +71 -69
  409. package/src/inputs/date_picker/date_picker_date.tsx +2 -2
  410. package/src/inputs/date_picker/date_picker_day.module.css +5 -3
  411. package/src/inputs/date_picker/date_picker_day.tsx +7 -2
  412. package/src/inputs/date_picker/date_picker_header.module.css +4 -2
  413. package/src/inputs/date_picker/date_picker_header.tsx +1 -1
  414. package/src/inputs/date_picker/date_picker_input.module.css +55 -53
  415. package/src/inputs/date_picker/date_picker_input.tsx +3 -3
  416. package/src/inputs/date_picker/date_picker_time_selector.module.css +30 -28
  417. package/src/inputs/date_picker/date_picker_time_selector.tsx +7 -4
  418. package/src/inputs/date_picker/date_picker_year_input.module.css +46 -44
  419. package/src/inputs/date_picker/date_picker_year_input.tsx +1 -1
  420. package/src/inputs/date_picker/date_picker_year_selector.module.css +48 -46
  421. package/src/inputs/date_picker/date_picker_year_selector.tsx +5 -2
  422. package/src/inputs/index.ts +0 -4
  423. package/src/inputs/input/input.module.css +56 -79
  424. package/src/inputs/input/input.tsx +1 -1
  425. package/src/inputs/multi_combo_box/multi_combo_box.module.css +4 -2
  426. package/src/inputs/multiselect/multiselect.module.css +4 -2
  427. package/src/inputs/multiselect/multiselect.tsx +2 -1
  428. package/src/inputs/multiselect/multiselect_inline_values.tsx +3 -2
  429. package/src/inputs/multiselect/multiselect_values.module.css +28 -26
  430. package/src/inputs/multiselect/multiselect_values.tsx +3 -3
  431. package/src/inputs/phone_number_input/phone_number_input.module.css +54 -52
  432. package/src/inputs/phone_number_input/phone_number_input.tsx +15 -6
  433. package/src/inputs/radio/radio.module.css +48 -66
  434. package/src/inputs/radio/radio.tsx +2 -2
  435. package/src/inputs/select/select.module.css +57 -59
  436. package/src/inputs/select/select.tsx +4 -2
  437. package/src/inputs/slider/slider.module.css +151 -149
  438. package/src/inputs/slider/slider.tsx +1 -1
  439. package/src/inputs/suggestions/suggestion_item.module.css +35 -53
  440. package/src/inputs/suggestions/suggestion_item.tsx +1 -1
  441. package/src/inputs/suggestions/suggestion_list.module.css +29 -27
  442. package/src/inputs/suggestions/suggestion_list.tsx +6 -3
  443. package/src/inputs/switch/switch.module.css +111 -109
  444. package/src/inputs/switch/switch.tsx +3 -3
  445. package/src/inputs/textarea/textarea.module.css +47 -65
  446. package/src/inputs/textarea/textarea.tsx +1 -1
  447. package/src/inputs/unit_input/unit_input.module.css +20 -18
  448. package/src/inputs/unit_input/unit_input.tsx +3 -3
  449. package/src/layouts/body/h_body.module.css +7 -4
  450. package/src/layouts/body/h_body.tsx +1 -1
  451. package/src/layouts/body/v_body.module.css +6 -4
  452. package/src/layouts/column/column.module.css +30 -28
  453. package/src/layouts/column/column.tsx +2 -2
  454. package/src/layouts/divider/divider.module.css +103 -101
  455. package/src/layouts/divider/divider.tsx +1 -2
  456. package/src/layouts/footer/footer.module.css +24 -21
  457. package/src/layouts/grid/grid.module.css +20 -18
  458. package/src/layouts/grid/grid.tsx +6 -1
  459. package/src/layouts/header/header.module.css +7 -5
  460. package/src/layouts/header/header.tsx +1 -1
  461. package/src/layouts/list/section_header.module.css +16 -14
  462. package/src/layouts/list/section_header.tsx +7 -1
  463. package/src/layouts/scaffold/scaffold.module.css +6 -4
  464. package/src/layouts/sidebar_end/sidebar_end.module.css +28 -26
  465. package/src/layouts/sidebar_end/sidebar_end.tsx +2 -2
  466. package/src/layouts/sidebar_start/sidebar_start.module.css +28 -26
  467. package/src/layouts/sidebar_start/sidebar_start.tsx +2 -2
  468. package/src/layouts/utility_bar/utility_bar.module.css +5 -3
  469. package/src/layouts/utility_bar/utility_bar.tsx +1 -6
  470. package/src/overlay/context_menu/context_menu.tsx +1 -1
  471. package/src/overlay/frame/frame.module.css +6 -4
  472. package/src/overlay/frame/frame_stories.module.css +14 -12
  473. package/src/overlay/menu/menu.module.css +30 -28
  474. package/src/overlay/menu/menu.tsx +2 -2
  475. package/src/overlay/popper/legacy/popper.module.css +10 -8
  476. package/src/overlay/popper/legacy/popper.tsx +2 -1
  477. package/src/overlay/popper/preview_popper.tsx +1 -1
  478. package/src/overlay/portal/portal.css +33 -31
  479. package/src/overlay/portal/portal_platform.tsx +5 -5
  480. package/src/overlay/tethered/tethered.module.css +9 -7
  481. package/src/stacks/box/bottom_resize_handle.module.css +11 -9
  482. package/src/stacks/box/bottom_resize_handle.tsx +1 -1
  483. package/src/stacks/box/box.tsx +1 -1
  484. package/src/stacks/box/end_resize_handle.module.css +16 -14
  485. package/src/stacks/box/end_resize_handle.tsx +1 -1
  486. package/src/stacks/box/left_resize_handle.module.css +11 -9
  487. package/src/stacks/box/left_resize_handle.tsx +1 -1
  488. package/src/stacks/box/right_resize_handle.module.css +11 -9
  489. package/src/stacks/box/right_resize_handle.tsx +1 -1
  490. package/src/stacks/box/start_resize_handle.module.css +16 -14
  491. package/src/stacks/box/start_resize_handle.tsx +1 -1
  492. package/src/stacks/box/top_resize_handle.module.css +11 -9
  493. package/src/stacks/box/top_resize_handle.tsx +1 -1
  494. package/src/stacks/collapsible_box.module.css +45 -29
  495. package/src/stacks/demo.module.css +5 -3
  496. package/src/stacks/h_collapsible_box.tsx +5 -1
  497. package/src/stacks/h_stack.tsx +1 -1
  498. package/src/stacks/spacer.tsx +1 -1
  499. package/src/stacks/stack.module.css +400 -393
  500. package/src/stacks/story_components/circle.module.css +8 -6
  501. package/src/stacks/story_components/circle.tsx +1 -1
  502. package/src/stacks/story_components/picture_placeholder.module.css +4 -2
  503. package/src/stacks/story_components/picture_placeholder.tsx +5 -1
  504. package/src/stacks/story_components/rect.module.css +9 -7
  505. package/src/stacks/story_components/rect.tsx +1 -1
  506. package/src/stacks/v_collapsible_box.tsx +5 -1
  507. package/src/stacks/v_stack.tsx +1 -1
  508. package/src/stacks/z_stack.tsx +1 -1
  509. package/src/surfaces/alert/alert.tsx +1 -1
  510. package/src/surfaces/card/card_stories.module.css +13 -11
  511. package/src/surfaces/confirm/confirm.module.css +37 -35
  512. package/src/surfaces/confirm/confirm.tsx +7 -4
  513. package/src/surfaces/drawers/drawer_bottom/drawer_bottom.module.css +4 -2
  514. package/src/surfaces/drawers/drawer_bottom/drawer_bottom.tsx +1 -1
  515. package/src/surfaces/drawers/drawer_end/drawer_end.module.css +4 -2
  516. package/src/surfaces/drawers/drawer_end/drawer_end.tsx +1 -1
  517. package/src/surfaces/drawers/drawer_start/drawer_start.module.css +4 -2
  518. package/src/surfaces/drawers/drawer_start/drawer_start.tsx +1 -1
  519. package/src/surfaces/drawers/drawer_top/drawer_top.module.css +4 -2
  520. package/src/surfaces/drawers/drawer_top/drawer_top.tsx +1 -1
  521. package/src/surfaces/modal/modal.module.css +5 -3
  522. package/src/surfaces/page/h_page.tsx +1 -1
  523. package/src/surfaces/page/page.module.css +12 -10
  524. package/src/surfaces/page/v_page.tsx +1 -1
  525. package/src/surfaces/panel/panel.module.css +8 -7
  526. package/src/surfaces/popover/popover.tsx +1 -1
  527. package/src/surfaces/tooltip/tooltip.module.css +4 -2
  528. package/src/surfaces/window/window.module.css +6 -4
  529. package/src/themes/stylesheets/reset.css +133 -131
  530. package/src/themes/theme.tsx +17 -0
  531. package/src/themes/themes/ergo/ergo_theme.css +505 -515
  532. package/src/themes/themes/windows_98/windows_98.css +1030 -1164
  533. package/src/tokens/badge/badge.module.css +13 -11
  534. package/src/tokens/badge/badge.tsx +2 -2
  535. package/src/tokens/bubble/bubble.module.css +12 -10
  536. package/src/tokens/bubble/bubble.tsx +1 -1
  537. package/src/tokens/chip/chip.module.css +14 -12
  538. package/src/tokens/chip/chip.tsx +1 -1
  539. package/src/typography/body_text/body_text.module.css +61 -59
  540. package/src/typography/body_text/body_text.tsx +1 -1
  541. package/src/typography/callout/callout.module.css +56 -54
  542. package/src/typography/callout/callout.tsx +1 -1
  543. package/src/typography/caption/caption.module.css +56 -54
  544. package/src/typography/caption/caption.tsx +1 -1
  545. package/src/typography/footnote/footnote.module.css +56 -54
  546. package/src/typography/footnote/footnote.tsx +1 -1
  547. package/src/typography/headline/headline.module.css +57 -55
  548. package/src/typography/headline/headline.tsx +1 -1
  549. package/src/typography/subheadline/subheadline.module.css +57 -55
  550. package/src/typography/subheadline/subheadline.tsx +1 -1
  551. package/src/typography/title/title.module.css +54 -52
  552. package/src/typography/title/title.tsx +1 -1
  553. package/src/utils/dnd/draggable/draggable.module.css +8 -6
  554. package/dist/form/field/common/types.js +0 -2
  555. package/dist/form/field/common/types.js.map +0 -1
  556. package/dist/inputs/mask_input/mask_config.js +0 -2
  557. package/dist/inputs/mask_input/mask_config.js.map +0 -1
  558. package/dist/inputs/mask_input/mask_cursor.js +0 -2
  559. package/dist/inputs/mask_input/mask_cursor.js.map +0 -1
  560. package/dist/inputs/multiselect/multiselect_row.d.ts +0 -10
  561. package/dist/inputs/multiselect/multiselect_row.d.ts.map +0 -1
  562. package/dist/inputs/multiselect/multiselect_row.js +0 -35
  563. package/dist/inputs/multiselect/multiselect_row.js.map +0 -1
  564. package/dist/inputs/switch/switch_row.d.ts +0 -8
  565. package/dist/inputs/switch/switch_row.d.ts.map +0 -1
  566. package/dist/inputs/switch/switch_row.js +0 -16
  567. package/dist/inputs/switch/switch_row.js.map +0 -1
  568. package/dist/inputs/textarea/textarea_row.d.ts +0 -8
  569. package/dist/inputs/textarea/textarea_row.d.ts.map +0 -1
  570. package/dist/inputs/textarea/textarea_row.js +0 -12
  571. package/dist/inputs/textarea/textarea_row.js.map +0 -1
  572. package/dist/overlay/tethered/types.js +0 -2
  573. package/dist/overlay/tethered/types.js.map +0 -1
  574. package/dist/portal_platform.css +0 -1
  575. package/dist/stacks/box/handle_props.js +0 -2
  576. package/dist/stacks/box/handle_props.js.map +0 -1
  577. package/dist/utils/calendar/calendar_date.js +0 -2
  578. package/dist/utils/calendar/calendar_date.js.map +0 -1
  579. package/dist/utils/dnd/types.js +0 -2
  580. package/dist/utils/dnd/types.js.map +0 -1
  581. package/src/inputs/multiselect/multiselect_row.tsx +0 -57
  582. package/src/inputs/switch/TODO.md +0 -3
  583. package/src/inputs/switch/switch_row.tsx +0 -33
  584. package/src/inputs/textarea/textarea_row.tsx +0 -24
@@ -1,56 +1,58 @@
1
- .headline {
2
- margin: 0;
3
- padding: 0;
4
- line-height: 1.2;
5
- letter-spacing: -0.01em;
6
- }
7
-
8
- .headline[data-selectable="true"] {
9
- user-select: auto;
10
- }
11
-
12
- .headline[data-selectable="false"] {
13
- user-select: none;
14
- }
15
-
16
- /* Sizes */
17
- .headline[data-size="sm"] {
18
- font-size: calc(14px * var(--scalar, 1));
19
- line-height: 1.3;
20
- }
21
-
22
- .headline[data-size="md"] {
23
- font-size: calc(16px * var(--scalar, 1));
24
- line-height: 1.25;
25
- }
26
-
27
- .headline[data-size="lg"] {
28
- font-size: calc(20px * var(--scalar, 1));
29
- line-height: 1.2;
30
- }
31
-
32
- /* Hierarchy */
33
- .headline[data-hierarchy="primary"] {
34
- opacity: 1;
35
- }
36
-
37
- .headline[data-hierarchy="secondary"] {
38
- opacity: 0.85;
39
- }
40
-
41
- .headline[data-hierarchy="tertiary"] {
42
- opacity: 0.7;
43
- }
44
-
45
- /* Emphasis */
46
- .headline[data-emphasis="strong"] {
47
- font-weight: 700;
48
- }
49
-
50
- .headline[data-emphasis="normal"] {
51
- font-weight: 600;
52
- }
53
-
54
- .headline[data-emphasis="light"] {
55
- font-weight: 400;
1
+ @layer tcn-system {
2
+ :where(.headline) {
3
+ margin: 0;
4
+ padding: 0;
5
+ line-height: 1.2;
6
+ letter-spacing: -0.01em;
7
+ }
8
+
9
+ :where(.headline[data-selectable="true"]) {
10
+ user-select: auto;
11
+ }
12
+
13
+ :where(.headline[data-selectable="false"]) {
14
+ user-select: none;
15
+ }
16
+
17
+ /* Sizes */
18
+ :where(.headline[data-size="sm"]) {
19
+ font-size: calc(14px * var(--scalar, 1));
20
+ line-height: 1.3;
21
+ }
22
+
23
+ :where(.headline[data-size="md"]) {
24
+ font-size: calc(16px * var(--scalar, 1));
25
+ line-height: 1.25;
26
+ }
27
+
28
+ :where(.headline[data-size="lg"]) {
29
+ font-size: calc(20px * var(--scalar, 1));
30
+ line-height: 1.2;
31
+ }
32
+
33
+ /* Hierarchy */
34
+ :where(.headline[data-hierarchy="primary"]) {
35
+ opacity: 1;
36
+ }
37
+
38
+ :where(.headline[data-hierarchy="secondary"]) {
39
+ opacity: 0.85;
40
+ }
41
+
42
+ :where(.headline[data-hierarchy="tertiary"]) {
43
+ opacity: 0.7;
44
+ }
45
+
46
+ /* Emphasis */
47
+ :where(.headline[data-emphasis="strong"]) {
48
+ font-weight: 700;
49
+ }
50
+
51
+ :where(.headline[data-emphasis="normal"]) {
52
+ font-weight: 600;
53
+ }
54
+
55
+ :where(.headline[data-emphasis="light"]) {
56
+ font-weight: 400;
57
+ }
56
58
  }
@@ -74,7 +74,7 @@ export function Headline({
74
74
  data-hierarchy={hierarchy}
75
75
  data-emphasis={emphasis}
76
76
  data-selectable={selectable}
77
- className={clsx(styles['headline'], 'headline', className)}
77
+ className={clsx(styles['headline'], className, 'tcn-headline')}
78
78
  style={style}
79
79
  data-size={size}
80
80
  >
@@ -1,56 +1,58 @@
1
- .subheadline {
2
- margin: 0;
3
- padding: 0;
4
- line-height: 1.3;
5
- letter-spacing: 0.005em;
6
- }
7
-
8
- .subheadline[data-selectable="true"] {
9
- user-select: auto;
10
- }
11
-
12
- .subheadline[data-selectable="false"] {
13
- user-select: none;
14
- }
15
-
16
- /* Sizes */
17
- .subheadline[data-size="sm"] {
18
- font-size: calc(12px * var(--scalar, 1));
19
- line-height: 1.4;
20
- }
21
-
22
- .subheadline[data-size="md"] {
23
- font-size: calc(14px * var(--scalar, 1));
24
- line-height: 1.3;
25
- }
26
-
27
- .subheadline[data-size="lg"] {
28
- font-size: calc(18px * var(--scalar, 1));
29
- line-height: 1.25;
30
- }
31
-
32
- /* Hierarchy */
33
- .subheadline[data-hierarchy="primary"] {
34
- opacity: 1;
35
- }
36
-
37
- .subheadline[data-hierarchy="secondary"] {
38
- opacity: 0.85;
39
- }
40
-
41
- .subheadline[data-hierarchy="tertiary"] {
42
- opacity: 0.7;
43
- }
44
-
45
- /* Emphasis */
46
- .subheadline[data-emphasis="strong"] {
47
- font-weight: 600;
48
- }
49
-
50
- .subheadline[data-emphasis="normal"] {
51
- font-weight: 500;
52
- }
53
-
54
- .subheadline[data-emphasis="light"] {
55
- font-weight: 400;
1
+ @layer tcn-system {
2
+ :where(.subheadline) {
3
+ margin: 0;
4
+ padding: 0;
5
+ line-height: 1.3;
6
+ letter-spacing: 0.005em;
7
+ }
8
+
9
+ :where(.subheadline[data-selectable="true"]) {
10
+ user-select: auto;
11
+ }
12
+
13
+ :where(.subheadline[data-selectable="false"]) {
14
+ user-select: none;
15
+ }
16
+
17
+ /* Sizes */
18
+ :where(.subheadline[data-size="sm"]) {
19
+ font-size: calc(12px * var(--scalar, 1));
20
+ line-height: 1.4;
21
+ }
22
+
23
+ :where(.subheadline[data-size="md"]) {
24
+ font-size: calc(14px * var(--scalar, 1));
25
+ line-height: 1.3;
26
+ }
27
+
28
+ :where(.subheadline[data-size="lg"]) {
29
+ font-size: calc(18px * var(--scalar, 1));
30
+ line-height: 1.25;
31
+ }
32
+
33
+ /* Hierarchy */
34
+ :where(.subheadline[data-hierarchy="primary"]) {
35
+ opacity: 1;
36
+ }
37
+
38
+ :where(.subheadline[data-hierarchy="secondary"]) {
39
+ opacity: 0.85;
40
+ }
41
+
42
+ :where(.subheadline[data-hierarchy="tertiary"]) {
43
+ opacity: 0.7;
44
+ }
45
+
46
+ /* Emphasis */
47
+ :where(.subheadline[data-emphasis="strong"]) {
48
+ font-weight: 600;
49
+ }
50
+
51
+ :where(.subheadline[data-emphasis="normal"]) {
52
+ font-weight: 500;
53
+ }
54
+
55
+ :where(.subheadline[data-emphasis="light"]) {
56
+ font-weight: 400;
57
+ }
56
58
  }
@@ -77,7 +77,7 @@ export function Subheadline({
77
77
  data-hierarchy={hierarchy}
78
78
  data-emphasis={emphasis}
79
79
  data-selectable={selectable}
80
- className={clsx(styles['subheadline'], 'subheadline', className)}
80
+ className={clsx(styles['subheadline'], className, 'tcn-subheadline')}
81
81
  style={style}
82
82
  data-size={size}
83
83
  >
@@ -1,53 +1,55 @@
1
- .title {
2
- margin: 0;
3
- padding: 0;
4
- line-height: 1.1;
5
- color: rgb(57, 85, 120);
6
- }
7
-
8
- .title[data-selectable="true"] {
9
- user-select: auto;
10
- }
11
-
12
- .title[data-selectable="false"] {
13
- user-select: none;
14
- }
15
-
16
- /* Sizes */
17
- .title[data-size="sm"] {
18
- font-size: calc(16px * var(--scalar, 1));
19
- }
20
-
21
- .title[data-size="md"] {
22
- font-size: calc(18px * var(--scalar, 1));
23
- }
24
-
25
- .title[data-size="lg"] {
26
- font-size: calc(21px * var(--scalar, 1));
27
- }
28
-
29
- /* Hierarchy */
30
- .title[data-hierarchy="primary"] {
31
- opacity: 1;
32
- }
33
-
34
- .title[data-hierarchy="secondary"] {
35
- opacity: 0.85;
36
- }
37
-
38
- .title[data-hierarchy="tertiary"] {
39
- opacity: 0.7;
40
- }
41
-
42
- /* Emphasis */
43
- .title[data-emphasis="strong"] {
44
- font-weight: 700;
45
- }
46
-
47
- .title[data-emphasis="normal"] {
48
- font-weight: 400;
49
- }
50
-
51
- .title[data-emphasis="light"] {
52
- font-weight: 200;
1
+ @layer tcn-system {
2
+ :where(.title) {
3
+ margin: 0;
4
+ padding: 0;
5
+ line-height: 1.1;
6
+ color: rgb(57, 85, 120);
7
+ }
8
+
9
+ :where(.title[data-selectable="true"]) {
10
+ user-select: auto;
11
+ }
12
+
13
+ :where(.title[data-selectable="false"]) {
14
+ user-select: none;
15
+ }
16
+
17
+ /* Sizes */
18
+ :where(.title[data-size="sm"]) {
19
+ font-size: calc(16px * var(--scalar, 1));
20
+ }
21
+
22
+ :where(.title[data-size="md"]) {
23
+ font-size: calc(18px * var(--scalar, 1));
24
+ }
25
+
26
+ :where(.title[data-size="lg"]) {
27
+ font-size: calc(21px * var(--scalar, 1));
28
+ }
29
+
30
+ /* Hierarchy */
31
+ :where(.title[data-hierarchy="primary"]) {
32
+ opacity: 1;
33
+ }
34
+
35
+ :where(.title[data-hierarchy="secondary"]) {
36
+ opacity: 0.85;
37
+ }
38
+
39
+ :where(.title[data-hierarchy="tertiary"]) {
40
+ opacity: 0.7;
41
+ }
42
+
43
+ /* Emphasis */
44
+ :where(.title[data-emphasis="strong"]) {
45
+ font-weight: 700;
46
+ }
47
+
48
+ :where(.title[data-emphasis="normal"]) {
49
+ font-weight: 400;
50
+ }
51
+
52
+ :where(.title[data-emphasis="light"]) {
53
+ font-weight: 200;
54
+ }
53
55
  }
@@ -82,7 +82,7 @@ export const Title = forwardRef<HTMLHeadingElement, TitleProps>(function Title(
82
82
  data-hierarchy={hierarchy}
83
83
  data-emphasis={emphasis}
84
84
  data-selectable={selectable}
85
- className={clsx(styles['title'], 'title', 'tcn-typography', 'tcn-title', className)}
85
+ className={clsx(styles['title'], className, 'tcn-typography', 'tcn-title')}
86
86
  style={style}
87
87
  data-size={size}
88
88
  >
@@ -1,8 +1,10 @@
1
- .draggable {
2
- position: relative;
3
- }
1
+ @layer tcn-system {
2
+ :where(.draggable) {
3
+ position: relative;
4
+ }
4
5
 
5
- .draggable[data-is-draggable="true"] {
6
- left: var(--position-x);
7
- top: var(--position-y);
6
+ :where(.draggable[data-is-draggable="true"]) {
7
+ left: var(--position-x);
8
+ top: var(--position-y);
9
+ }
8
10
  }
@@ -1,2 +0,0 @@
1
-
2
- //# sourceMappingURL=types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
-
2
- //# sourceMappingURL=mask_config.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"mask_config.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
-
2
- //# sourceMappingURL=mask_cursor.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"mask_cursor.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1,10 +0,0 @@
1
- import { default as React } from 'react';
2
- import { MultiselectProps } from './multiselect.js';
3
- import { OptionsFieldPresenter } from '../../form/field_presenters/options_field_presenter.js';
4
- export interface MultiselectRowProps<T> extends Omit<MultiselectProps, 'onChange' | 'value' | 'children'> {
5
- presenter: OptionsFieldPresenter<T[], T>;
6
- children: (value: T, index: number) => React.ReactElement<'option'>;
7
- id: string;
8
- }
9
- export declare const MultiselectRow: React.ForwardRefExoticComponent<Omit<MultiselectRowProps<unknown>, "ref"> & React.RefAttributes<HTMLDivElement>>;
10
- //# sourceMappingURL=multiselect_row.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"multiselect_row.d.ts","sourceRoot":"","sources":["../../../src/inputs/multiselect/multiselect_row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAe,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wDAAwD,CAAC;AAEpG,MAAM,WAAW,mBAAmB,CAAC,CAAC,CACpC,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;IACjE,SAAS,EAAE,qBAAqB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IACpE,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,cAAc,kHA2CzB,CAAC"}
@@ -1,35 +0,0 @@
1
- import { jsx as i } from "react/jsx-runtime";
2
- import R from "react";
3
- import { useSignalValue as p } from "@tcn/state";
4
- import { HField as E } from "../../form/field/h_field/h_field.js";
5
- import { Multiselect as S } from "./multiselect.js";
6
- const C = R.forwardRef(function({ presenter: r, children: c, id: u, ...m }, d) {
7
- let n = [];
8
- const s = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map(), f = p(r.optionsBroadcast), { value: g, label: M, description: w, error: v } = p(r.stateBroadcast), V = f.map((e, o) => {
9
- const t = c(e, o);
10
- return s.set(e, t.props.value), a.set(t.props.value, e), t;
11
- });
12
- function h(e) {
13
- const o = e.map((t) => {
14
- const l = a.get(t);
15
- if (l == null) throw new Error(`Invalid value: ${t}`);
16
- return l;
17
- });
18
- o && r.setValue(o);
19
- }
20
- return n = g.map((e) => s.get(e) || "") || [], /* @__PURE__ */ i(
21
- E,
22
- {
23
- id: u,
24
- ref: d,
25
- label: M,
26
- description: w,
27
- errorMessage: v,
28
- children: /* @__PURE__ */ i(S, { ...m, value: n, onChange: h, children: V })
29
- }
30
- );
31
- });
32
- export {
33
- C as MultiselectRow
34
- };
35
- //# sourceMappingURL=multiselect_row.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"multiselect_row.js","sources":["../../../src/inputs/multiselect/multiselect_row.tsx"],"sourcesContent":["import React from 'react';\nimport { useSignalValue } from '@tcn/state';\nimport { HField } from '../../form/field/h_field/h_field.js';\nimport { Multiselect, MultiselectProps } from './multiselect.js';\nimport type { OptionsFieldPresenter } from '../../form/field_presenters/options_field_presenter.js';\n\nexport interface MultiselectRowProps<T>\n extends Omit<MultiselectProps, 'onChange' | 'value' | 'children'> {\n presenter: OptionsFieldPresenter<T[], T>;\n children: (value: T, index: number) => React.ReactElement<'option'>;\n id: string;\n}\n\nexport const MultiselectRow = React.forwardRef(function MultiselectRow<T = string>(\n { presenter, children, id, ...props }: MultiselectRowProps<T>,\n ref: React.Ref<HTMLDivElement>\n) {\n let stringValues: string[] = [];\n const typeToStringMap = new Map<T, string>();\n const stringToTypeMap = new Map<string, T>();\n const options = useSignalValue(presenter.optionsBroadcast);\n\n const { value, label, description, error } = useSignalValue(presenter.stateBroadcast);\n\n const optionElements = options.map((o, index) => {\n const optionElement = children(o, index);\n typeToStringMap.set(o, (optionElement.props as any).value);\n stringToTypeMap.set((optionElement.props as any).value, o);\n return optionElement;\n });\n\n function mapSelectedValues(values: string[]) {\n const selectedValues = values.map(v => {\n const value = stringToTypeMap.get(v);\n if (value == null) throw new Error(`Invalid value: ${v}`);\n return value;\n });\n\n selectedValues && presenter.setValue(selectedValues);\n }\n\n stringValues = value.map(v => typeToStringMap.get(v) || '') || [];\n\n return (\n <HField\n id={id}\n ref={ref}\n label={label}\n description={description}\n errorMessage={error}\n >\n <Multiselect {...props} value={stringValues} onChange={mapSelectedValues}>\n {optionElements as any}\n </Multiselect>\n </HField>\n );\n});\n"],"names":["MultiselectRow","React","presenter","children","id","props","ref","stringValues","typeToStringMap","stringToTypeMap","options","useSignalValue","value","label","description","error","optionElements","o","index","optionElement","mapSelectedValues","values","selectedValues","v","jsx","HField","Multiselect"],"mappings":";;;;;AAaO,MAAMA,IAAiBC,EAAM,WAAW,SAC7C,EAAE,WAAAC,GAAW,UAAAC,GAAU,IAAAC,GAAI,GAAGC,EAAA,GAC9BC,GACA;AACA,MAAIC,IAAyB,CAAA;AAC7B,QAAMC,wBAAsB,IAAA,GACtBC,wBAAsB,IAAA,GACtBC,IAAUC,EAAeT,EAAU,gBAAgB,GAEnD,EAAE,OAAAU,GAAO,OAAAC,GAAO,aAAAC,GAAa,OAAAC,MAAUJ,EAAeT,EAAU,cAAc,GAE9Ec,IAAiBN,EAAQ,IAAI,CAACO,GAAGC,MAAU;AAC/C,UAAMC,IAAgBhB,EAASc,GAAGC,CAAK;AACvC,WAAAV,EAAgB,IAAIS,GAAIE,EAAc,MAAc,KAAK,GACzDV,EAAgB,IAAKU,EAAc,MAAc,OAAOF,CAAC,GAClDE;AAAA,EACT,CAAC;AAED,WAASC,EAAkBC,GAAkB;AAC3C,UAAMC,IAAiBD,EAAO,IAAI,CAAAE,MAAK;AACrC,YAAMX,IAAQH,EAAgB,IAAIc,CAAC;AACnC,UAAIX,KAAS,KAAM,OAAM,IAAI,MAAM,kBAAkBW,CAAC,EAAE;AACxD,aAAOX;AAAAA,IACT,CAAC;AAED,IAAAU,KAAkBpB,EAAU,SAASoB,CAAc;AAAA,EACrD;AAEA,SAAAf,IAAeK,EAAM,IAAI,CAAAW,MAAKf,EAAgB,IAAIe,CAAC,KAAK,EAAE,KAAK,CAAA,GAG7D,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAArB;AAAA,MACA,KAAAE;AAAA,MACA,OAAAO;AAAA,MACA,aAAAC;AAAA,MACA,cAAcC;AAAA,MAEd,UAAA,gBAAAS,EAACE,KAAa,GAAGrB,GAAO,OAAOE,GAAc,UAAUa,GACpD,UAAAJ,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
@@ -1,8 +0,0 @@
1
- import { FieldPresenter } from '../../form/field_presenters/field_presenter.js';
2
- import { SwitchProps } from './switch.js';
3
- export interface SwitchRowProps extends Omit<SwitchProps, 'onChange' | 'checked' | 'label' | 'description' | 'errorMessage'> {
4
- presenter?: FieldPresenter<boolean>;
5
- id: string;
6
- }
7
- export declare function SwitchRow({ presenter, id, ...props }: SwitchRowProps): import("react/jsx-runtime").JSX.Element;
8
- //# sourceMappingURL=switch_row.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"switch_row.d.ts","sourceRoot":"","sources":["../../../src/inputs/switch/switch_row.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAChF,OAAO,EAAU,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlD,MAAM,WAAW,cACf,SAAQ,IAAI,CACV,WAAW,EACX,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,GAAG,cAAc,CAClE;IACD,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACpC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAiBpE"}
@@ -1,16 +0,0 @@
1
- import { jsx as t } from "react/jsx-runtime";
2
- import { useState as m } from "react";
3
- import { useSignalValue as c } from "@tcn/state";
4
- import { FieldPresenter as f } from "../../form/field_presenters/field_presenter.js";
5
- import { Switch as u } from "./switch.js";
6
- import { HField as p } from "../../form/field/h_field/h_field.js";
7
- function x({ presenter: e, id: o, ...i }) {
8
- const [r] = m(() => e ?? new f("Label", !1)), { label: n, value: a, description: l, error: s } = c(
9
- r.stateBroadcast
10
- );
11
- return /* @__PURE__ */ t(p, { id: o, label: n, description: l, errorMessage: s, children: /* @__PURE__ */ t(u, { ...i, checked: a, onChange: r.setValue }) });
12
- }
13
- export {
14
- x as SwitchRow
15
- };
16
- //# sourceMappingURL=switch_row.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"switch_row.js","sources":["../../../src/inputs/switch/switch_row.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useSignalValue } from '@tcn/state';\nimport { FieldPresenter } from '../../form/field_presenters/field_presenter.js';\nimport { Switch, SwitchProps } from './switch.js';\nimport { HField } from '../../form/field/h_field/h_field.js';\n\nexport interface SwitchRowProps\n extends Omit<\n SwitchProps,\n 'onChange' | 'checked' | 'label' | 'description' | 'errorMessage'\n > {\n presenter?: FieldPresenter<boolean>;\n id: string;\n}\n\nexport function SwitchRow({ presenter, id, ...props }: SwitchRowProps) {\n const [finalPresenter] = useState(() => {\n if (presenter == null) {\n return new FieldPresenter<boolean>('Label', false);\n }\n return presenter;\n });\n\n const { label, value, description, error } = useSignalValue(\n finalPresenter.stateBroadcast\n );\n\n return (\n <HField id={id} label={label} description={description} errorMessage={error}>\n <Switch {...props} checked={value} onChange={finalPresenter.setValue} />\n </HField>\n );\n}\n"],"names":["SwitchRow","presenter","id","props","finalPresenter","useState","FieldPresenter","label","value","description","error","useSignalValue","HField","jsx","Switch"],"mappings":";;;;;;AAeO,SAASA,EAAU,EAAE,WAAAC,GAAW,IAAAC,GAAI,GAAGC,KAAyB;AACrE,QAAM,CAACC,CAAc,IAAIC,EAAS,MAC5BJ,KACK,IAAIK,EAAwB,SAAS,EAAK,CAGpD,GAEK,EAAE,OAAAC,GAAO,OAAAC,GAAO,aAAAC,GAAa,OAAAC,MAAUC;AAAA,IAC3CP,EAAe;AAAA,EAAA;AAGjB,2BACGQ,GAAA,EAAO,IAAAV,GAAQ,OAAAK,GAAc,aAAAE,GAA0B,cAAcC,GACpE,UAAA,gBAAAG,EAACC,GAAA,EAAQ,GAAGX,GAAO,SAASK,GAAO,UAAUJ,EAAe,UAAU,GACxE;AAEJ;"}
@@ -1,8 +0,0 @@
1
- import { FieldPresenter } from '../../form/field_presenters/field_presenter.js';
2
- import { TextareaProps } from './textarea.js';
3
- export interface TextareaRowProps extends Omit<TextareaProps, 'onChange' | 'value' | 'label' | 'description' | 'errorMessage'> {
4
- presenter: FieldPresenter<string>;
5
- id: string;
6
- }
7
- export declare function TextareaRow({ presenter, id, ...props }: TextareaRowProps): import("react/jsx-runtime").JSX.Element;
8
- //# sourceMappingURL=textarea_row.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"textarea_row.d.ts","sourceRoot":"","sources":["../../../src/inputs/textarea/textarea_row.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAChF,OAAO,EAAY,aAAa,EAAE,MAAM,eAAe,CAAC;AAExD,MAAM,WAAW,gBACf,SAAQ,IAAI,CACV,aAAa,EACb,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,GAAG,cAAc,CAChE;IACD,SAAS,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAClC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQxE"}
@@ -1,12 +0,0 @@
1
- import { jsx as e } from "react/jsx-runtime";
2
- import { useSignalValue as n } from "@tcn/state";
3
- import { HField as s } from "../../form/field/h_field/h_field.js";
4
- import { Textarea as u } from "./textarea.js";
5
- function x({ presenter: r, id: o, ...a }) {
6
- const { label: t, value: i, description: l, error: m } = n(r.stateBroadcast);
7
- return /* @__PURE__ */ e(s, { id: o, label: t, description: l, errorMessage: m, children: /* @__PURE__ */ e(u, { ...a, value: i, onChange: r.setValue }) });
8
- }
9
- export {
10
- x as TextareaRow
11
- };
12
- //# sourceMappingURL=textarea_row.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"textarea_row.js","sources":["../../../src/inputs/textarea/textarea_row.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport React from 'react';\nimport { HField } from '../../form/field/h_field/h_field.js';\nimport { FieldPresenter } from '../../form/field_presenters/field_presenter.js';\nimport { Textarea, TextareaProps } from './textarea.js';\n\nexport interface TextareaRowProps\n extends Omit<\n TextareaProps,\n 'onChange' | 'value' | 'label' | 'description' | 'errorMessage'\n > {\n presenter: FieldPresenter<string>;\n id: string;\n}\n\nexport function TextareaRow({ presenter, id, ...props }: TextareaRowProps) {\n const { label, value, description, error } = useSignalValue(presenter.stateBroadcast);\n\n return (\n <HField id={id} label={label} description={description} errorMessage={error}>\n <Textarea {...props} value={value} onChange={presenter.setValue} />\n </HField>\n );\n}\n"],"names":["TextareaRow","presenter","id","props","label","value","description","error","useSignalValue","jsx","HField","Textarea"],"mappings":";;;;AAeO,SAASA,EAAY,EAAE,WAAAC,GAAW,IAAAC,GAAI,GAAGC,KAA2B;AACzE,QAAM,EAAE,OAAAC,GAAO,OAAAC,GAAO,aAAAC,GAAa,OAAAC,MAAUC,EAAeP,EAAU,cAAc;AAEpF,SACE,gBAAAQ,EAACC,GAAA,EAAO,IAAAR,GAAQ,OAAAE,GAAc,aAAAE,GAA0B,cAAcC,GACpE,UAAA,gBAAAE,EAACE,GAAA,EAAU,GAAGR,GAAO,OAAAE,GAAc,UAAUJ,EAAU,UAAU,GACnE;AAEJ;"}
@@ -1,2 +0,0 @@
1
-
2
- //# sourceMappingURL=types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1 +0,0 @@
1
- body>*{position:relative;z-index:0}.portal{position:absolute;inset:0;overflow:hidden;padding:0;margin:0;pointer-events:none}.portal>*{pointer-events:auto}.portal-platform{position:fixed;inset:0;overflow:hidden;padding:0;margin:0;background-color:#0000;pointer-events:none;transform:none;z-index:1}
@@ -1,2 +0,0 @@
1
-
2
- //# sourceMappingURL=handle_props.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"handle_props.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
-
2
- //# sourceMappingURL=calendar_date.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"calendar_date.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
-
2
- //# sourceMappingURL=types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1,57 +0,0 @@
1
- import React from 'react';
2
- import { useSignalValue } from '@tcn/state';
3
- import { HField } from '../../form/field/h_field/h_field.js';
4
- import { Multiselect, MultiselectProps } from './multiselect.js';
5
- import type { OptionsFieldPresenter } from '../../form/field_presenters/options_field_presenter.js';
6
-
7
- export interface MultiselectRowProps<T>
8
- extends Omit<MultiselectProps, 'onChange' | 'value' | 'children'> {
9
- presenter: OptionsFieldPresenter<T[], T>;
10
- children: (value: T, index: number) => React.ReactElement<'option'>;
11
- id: string;
12
- }
13
-
14
- export const MultiselectRow = React.forwardRef(function MultiselectRow<T = string>(
15
- { presenter, children, id, ...props }: MultiselectRowProps<T>,
16
- ref: React.Ref<HTMLDivElement>
17
- ) {
18
- let stringValues: string[] = [];
19
- const typeToStringMap = new Map<T, string>();
20
- const stringToTypeMap = new Map<string, T>();
21
- const options = useSignalValue(presenter.optionsBroadcast);
22
-
23
- const { value, label, description, error } = useSignalValue(presenter.stateBroadcast);
24
-
25
- const optionElements = options.map((o, index) => {
26
- const optionElement = children(o, index);
27
- typeToStringMap.set(o, (optionElement.props as any).value);
28
- stringToTypeMap.set((optionElement.props as any).value, o);
29
- return optionElement;
30
- });
31
-
32
- function mapSelectedValues(values: string[]) {
33
- const selectedValues = values.map(v => {
34
- const value = stringToTypeMap.get(v);
35
- if (value == null) throw new Error(`Invalid value: ${v}`);
36
- return value;
37
- });
38
-
39
- selectedValues && presenter.setValue(selectedValues);
40
- }
41
-
42
- stringValues = value.map(v => typeToStringMap.get(v) || '') || [];
43
-
44
- return (
45
- <HField
46
- id={id}
47
- ref={ref}
48
- label={label}
49
- description={description}
50
- errorMessage={error}
51
- >
52
- <Multiselect {...props} value={stringValues} onChange={mapSelectedValues}>
53
- {optionElements as any}
54
- </Multiselect>
55
- </HField>
56
- );
57
- });
@@ -1,3 +0,0 @@
1
- * Only one size
2
- * Make 16px height
3
- * Remove option with no check