@povio/ui 2.3.2 → 3.0.0-rc.1

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 (352) hide show
  1. package/dist/assets/icons/AlignCenter.js +26 -11
  2. package/dist/assets/icons/AlignLeft.js +26 -11
  3. package/dist/assets/icons/AlignLeftRight.js +26 -11
  4. package/dist/assets/icons/AlignRight.js +26 -11
  5. package/dist/assets/icons/ArrowDropDown.js +26 -11
  6. package/dist/assets/icons/ArrowDropUp.js +26 -11
  7. package/dist/assets/icons/ArrowLeft.js +26 -11
  8. package/dist/assets/icons/ArrowRight.js +26 -11
  9. package/dist/assets/icons/Bold.js +26 -11
  10. package/dist/assets/icons/BulletedList.js +26 -11
  11. package/dist/assets/icons/Calendar.js +28 -13
  12. package/dist/assets/icons/Check.js +28 -13
  13. package/dist/assets/icons/CheckCircle.js +26 -11
  14. package/dist/assets/icons/CheckboxCheckmark.js +29 -14
  15. package/dist/assets/icons/CheckboxIndeterminate.js +29 -14
  16. package/dist/assets/icons/ChevronDown.js +28 -13
  17. package/dist/assets/icons/ChevronLeft.js +28 -13
  18. package/dist/assets/icons/ChevronRight.js +28 -13
  19. package/dist/assets/icons/ChevronUp.js +28 -13
  20. package/dist/assets/icons/ChevronsLeft.js +28 -13
  21. package/dist/assets/icons/ChevronsRight.js +28 -13
  22. package/dist/assets/icons/Clock.js +26 -11
  23. package/dist/assets/icons/Close.js +26 -11
  24. package/dist/assets/icons/DateTime.js +35 -14
  25. package/dist/assets/icons/DragIndicator.js +26 -11
  26. package/dist/assets/icons/File.js +28 -13
  27. package/dist/assets/icons/Highlight.js +26 -11
  28. package/dist/assets/icons/HighlightOn.js +49 -15
  29. package/dist/assets/icons/Home.js +26 -11
  30. package/dist/assets/icons/Info.js +37 -16
  31. package/dist/assets/icons/Italic.js +26 -11
  32. package/dist/assets/icons/Link.js +26 -11
  33. package/dist/assets/icons/Menu.js +26 -11
  34. package/dist/assets/icons/NumberedList.js +26 -11
  35. package/dist/assets/icons/PointerHorizontal.js +26 -11
  36. package/dist/assets/icons/PointerVertical.js +26 -11
  37. package/dist/assets/icons/Search.js +26 -11
  38. package/dist/assets/icons/Send.js +28 -13
  39. package/dist/assets/icons/Strikethrough.js +26 -11
  40. package/dist/assets/icons/TextColor.js +48 -14
  41. package/dist/assets/icons/Today.js +26 -11
  42. package/dist/assets/icons/Underlined.js +28 -13
  43. package/dist/assets/icons/Upload.js +35 -14
  44. package/dist/assets/icons/Visibility.js +26 -11
  45. package/dist/assets/icons/VisibilityOff.js +26 -11
  46. package/dist/assets/icons/WarningFilled.js +28 -13
  47. package/dist/assets/locales/sl/translation.json.js +2 -2
  48. package/dist/components/Breadcrumbs/Breadcrumbs.js +215 -64
  49. package/dist/components/Breadcrumbs/breadcrumbs.cva.d.ts +40 -14
  50. package/dist/components/Breadcrumbs/breadcrumbs.cva.js +21 -18
  51. package/dist/components/Menu/Menu.js +18 -2
  52. package/dist/components/Menu/MenuDesktop.js +41 -7
  53. package/dist/components/Menu/MenuItem.js +35 -12
  54. package/dist/components/Menu/MenuMobile.js +103 -44
  55. package/dist/components/Menu/MenuPopover.js +110 -34
  56. package/dist/components/Menu/menu.cva.d.ts +35 -13
  57. package/dist/components/Menu/menu.cva.js +30 -24
  58. package/dist/components/buttons/Button/Button.js +7 -7
  59. package/dist/components/buttons/Button/button.cva.d.ts +95 -26
  60. package/dist/components/buttons/Button/button.cva.js +601 -589
  61. package/dist/components/buttons/IconButton/IconButton.js +40 -8
  62. package/dist/components/buttons/InlineIconButton/InlineIconButton.d.ts +2 -1
  63. package/dist/components/buttons/InlineIconButton/InlineIconButton.js +34 -9
  64. package/dist/components/buttons/PillButton/PillButton.js +59 -21
  65. package/dist/components/buttons/PillButton/pillButton.cva.d.ts +33 -9
  66. package/dist/components/buttons/PillButton/pillButton.cva.js +247 -239
  67. package/dist/components/buttons/SplitButton/SplitButton.js +103 -18
  68. package/dist/components/buttons/TextButton/TextButton.js +30 -8
  69. package/dist/components/buttons/ToggleButton/ToggleButton.js +28 -8
  70. package/dist/components/buttons/shared/ButtonContent.js +83 -25
  71. package/dist/components/buttons/shared/buttonContent.cva.d.ts +3 -5
  72. package/dist/components/buttons/shared/buttonContent.cva.js +1 -8
  73. package/dist/components/inputs/Checkbox/Checkbox.d.ts +1 -0
  74. package/dist/components/inputs/Checkbox/Checkbox.js +203 -37
  75. package/dist/components/inputs/Checkbox/CheckboxCheckmark.js +28 -14
  76. package/dist/components/inputs/Checkbox/checkbox.cva.d.ts +26 -10
  77. package/dist/components/inputs/Checkbox/checkbox.cva.js +47 -40
  78. package/dist/components/inputs/DateTime/DatePicker/DatePicker.d.ts +12 -5
  79. package/dist/components/inputs/DateTime/DatePicker/DatePicker.js +371 -75
  80. package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts +12 -5
  81. package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +596 -218
  82. package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts +13 -5
  83. package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +267 -47
  84. package/dist/components/inputs/DateTime/TimePicker/TimePicker.d.ts +7 -3
  85. package/dist/components/inputs/DateTime/TimePicker/TimePicker.js +611 -121
  86. package/dist/components/inputs/DateTime/shared/Calendar.d.ts +5 -2
  87. package/dist/components/inputs/DateTime/shared/Calendar.js +338 -119
  88. package/dist/components/inputs/DateTime/shared/CalendarCell.d.ts +4 -2
  89. package/dist/components/inputs/DateTime/shared/CalendarCell.js +310 -103
  90. package/dist/components/inputs/DateTime/shared/CalendarGrid.d.ts +4 -2
  91. package/dist/components/inputs/DateTime/shared/CalendarGrid.js +150 -33
  92. package/dist/components/inputs/DateTime/shared/CalendarHeader.js +249 -93
  93. package/dist/components/inputs/DateTime/shared/CalendarSelectHeader.js +318 -137
  94. package/dist/components/inputs/DateTime/shared/DateField.js +286 -112
  95. package/dist/components/inputs/DateTime/shared/DatePickerInput.d.ts +13 -3
  96. package/dist/components/inputs/DateTime/shared/DatePickerInput.js +387 -143
  97. package/dist/components/inputs/DateTime/shared/DateSegmentItem.d.ts +15 -0
  98. package/dist/components/inputs/DateTime/shared/DateSegmentItem.js +96 -11
  99. package/dist/components/inputs/DateTime/shared/DateTimeDialog.js +84 -30
  100. package/dist/components/inputs/DateTime/shared/DateTimeDialogFooter.js +59 -10
  101. package/dist/components/inputs/DateTime/shared/MonthPicker.js +103 -58
  102. package/dist/components/inputs/DateTime/shared/RangeCalendar.js +193 -82
  103. package/dist/components/inputs/DateTime/shared/TimeField.js +27 -8
  104. package/dist/components/inputs/DateTime/shared/TimePickerForm.js +279 -110
  105. package/dist/components/inputs/DateTime/shared/TimePickerInput.d.ts +4 -1
  106. package/dist/components/inputs/DateTime/shared/TimePickerInput.js +214 -69
  107. package/dist/components/inputs/DateTime/shared/YearPicker.js +119 -68
  108. package/dist/components/inputs/DateTime/shared/datePicker.types.d.ts +5 -0
  109. package/dist/components/inputs/DateTime/shared/datePickerInput.cva.d.ts +27 -0
  110. package/dist/components/inputs/DateTime/shared/datePickerInput.cva.js +15 -0
  111. package/dist/components/inputs/DateTime/shared/datePickerTodayIcon.d.ts +15 -0
  112. package/dist/components/inputs/DateTime/shared/datePickerTodayIcon.js +32 -0
  113. package/dist/components/inputs/DateTime/shared/dateSegment.utils.d.ts +2 -0
  114. package/dist/components/inputs/DateTime/shared/dateSegment.utils.spec.d.ts +1 -0
  115. package/dist/components/inputs/DateTime/shared/staticDateTimeSegments.d.ts +40 -0
  116. package/dist/components/inputs/DateTime/shared/staticDateTimeSegments.js +85 -0
  117. package/dist/components/inputs/DateTime/shared/staticDateTimeSegments.spec.d.ts +1 -0
  118. package/dist/components/inputs/File/FileUpload.js +87 -44
  119. package/dist/components/inputs/File/FileUploadContainer.js +15 -7
  120. package/dist/components/inputs/File/InputUpload.js +317 -79
  121. package/dist/components/inputs/File/shared/FileCard.js +104 -41
  122. package/dist/components/inputs/File/shared/FileCardList.js +47 -12
  123. package/dist/components/inputs/File/shared/FileUploadContent.js +175 -44
  124. package/dist/components/inputs/File/shared/FileUploadContentEmpty.js +149 -46
  125. package/dist/components/inputs/File/shared/FileUploadContentError.js +234 -93
  126. package/dist/components/inputs/File/shared/FileUploadContentFilled.js +230 -97
  127. package/dist/components/inputs/File/shared/FileUploadContentLoading.js +199 -55
  128. package/dist/components/inputs/File/shared/InputUploadContent.js +151 -37
  129. package/dist/components/inputs/File/shared/InputUploadFilled.js +51 -10
  130. package/dist/components/inputs/File/shared/ProgressBar.js +48 -9
  131. package/dist/components/inputs/File/shared/fileUpload.cva.d.ts +26 -9
  132. package/dist/components/inputs/File/shared/fileUpload.cva.js +48 -40
  133. package/dist/components/inputs/File/shared/inputUploadButton.cva.d.ts +23 -6
  134. package/dist/components/inputs/File/shared/inputUploadButton.cva.js +29 -20
  135. package/dist/components/inputs/FormField/FormField.d.ts +3 -3
  136. package/dist/components/inputs/FormField/FormField.js +119 -37
  137. package/dist/components/inputs/FormField/FormFieldError.js +27 -7
  138. package/dist/components/inputs/FormField/FormFieldHeader.d.ts +2 -2
  139. package/dist/components/inputs/FormField/FormFieldHeader.js +81 -22
  140. package/dist/components/inputs/FormField/FormFieldHeaderClose.js +31 -7
  141. package/dist/components/inputs/FormField/FormFieldHelper.js +28 -8
  142. package/dist/components/inputs/FormField/FormFieldLabel.d.ts +2 -2
  143. package/dist/components/inputs/FormField/FormFieldLabel.js +46 -15
  144. package/dist/components/inputs/FormField/formFieldError.cva.d.ts +12 -5
  145. package/dist/components/inputs/FormField/formFieldError.cva.js +11 -8
  146. package/dist/components/inputs/FormField/formFieldHeader.cva.d.ts +22 -0
  147. package/dist/components/inputs/FormField/formFieldHeader.cva.js +13 -0
  148. package/dist/components/inputs/FormField/formFieldHelper.cva.d.ts +12 -5
  149. package/dist/components/inputs/FormField/formFieldHelper.cva.js +11 -8
  150. package/dist/components/inputs/Input/NumberInput/NumberInput.d.ts +5 -2
  151. package/dist/components/inputs/Input/NumberInput/NumberInput.js +450 -100
  152. package/dist/components/inputs/Input/NumberRangeInput/NumberRangeField.d.ts +45 -0
  153. package/dist/components/inputs/Input/NumberRangeInput/NumberRangeField.js +571 -0
  154. package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.d.ts +35 -0
  155. package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js +575 -0
  156. package/dist/components/inputs/Input/PasswordInput/PasswordInput.js +48 -9
  157. package/dist/components/inputs/Input/TextArea/TextArea.cva.d.ts +12 -0
  158. package/dist/components/inputs/Input/TextArea/TextArea.cva.js +4 -0
  159. package/dist/components/inputs/Input/TextArea/TextArea.js +309 -94
  160. package/dist/components/inputs/Input/TextInput/TextInput.d.ts +3 -1
  161. package/dist/components/inputs/Input/TextInput/TextInput.js +422 -93
  162. package/dist/components/inputs/Input/shared/InputContent.js +196 -63
  163. package/dist/components/inputs/Input/shared/numberStatic.utils.d.ts +1 -0
  164. package/dist/components/inputs/Input/shared/numberStatic.utils.js +7 -0
  165. package/dist/components/inputs/Inputs/Form.js +40 -11
  166. package/dist/components/inputs/Inputs/InputItem.d.ts +15 -21
  167. package/dist/components/inputs/Inputs/InputItem.js +69 -14
  168. package/dist/components/inputs/Inputs/Inputs.js +37 -11
  169. package/dist/components/inputs/RadioGroup/RadioGroup.d.ts +3 -1
  170. package/dist/components/inputs/RadioGroup/RadioGroup.js +356 -64
  171. package/dist/components/inputs/RadioGroup/radio.cva.d.ts +101 -6
  172. package/dist/components/inputs/RadioGroup/radio.cva.js +74 -24
  173. package/dist/components/inputs/Selection/Autocomplete/Autocomplete.d.ts +6 -2
  174. package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js +214 -22
  175. package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.d.ts +3 -18
  176. package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js +104 -8
  177. package/dist/components/inputs/Selection/Autocomplete/queryAutocomplete.types.d.ts +36 -0
  178. package/dist/components/inputs/Selection/Select/QuerySelect.d.ts +14 -0
  179. package/dist/components/inputs/Selection/Select/QuerySelect.js +173 -0
  180. package/dist/components/inputs/Selection/Select/Select.d.ts +7 -3
  181. package/dist/components/inputs/Selection/Select/Select.js +225 -18
  182. package/dist/components/inputs/Selection/shared/SelectBase.d.ts +8 -1
  183. package/dist/components/inputs/Selection/shared/SelectBase.js +69 -18
  184. package/dist/components/inputs/Selection/shared/SelectDesktop.d.ts +1 -1
  185. package/dist/components/inputs/Selection/shared/SelectDesktop.js +396 -141
  186. package/dist/components/inputs/Selection/shared/SelectInput.d.ts +2 -2
  187. package/dist/components/inputs/Selection/shared/SelectInput.js +398 -119
  188. package/dist/components/inputs/Selection/shared/SelectInputTags.js +99 -25
  189. package/dist/components/inputs/Selection/shared/SelectListBox.d.ts +2 -2
  190. package/dist/components/inputs/Selection/shared/SelectListBox.js +164 -52
  191. package/dist/components/inputs/Selection/shared/SelectListBoxItem.js +88 -38
  192. package/dist/components/inputs/Selection/shared/SelectListBoxItemSelectAll.js +72 -19
  193. package/dist/components/inputs/Selection/shared/SelectListBoxLoadingItem.js +73 -24
  194. package/dist/components/inputs/Selection/shared/SelectListBoxSelectionBar.js +58 -9
  195. package/dist/components/inputs/Selection/shared/SelectMobile.d.ts +1 -1
  196. package/dist/components/inputs/Selection/shared/SelectMobile.js +9 -3
  197. package/dist/components/inputs/Selection/shared/StaticSelectTrailingContent.d.ts +9 -0
  198. package/dist/components/inputs/Selection/shared/StaticSelectTrailingContent.js +47 -0
  199. package/dist/components/inputs/Selection/shared/querySelect.utils.d.ts +12 -0
  200. package/dist/components/inputs/Selection/shared/querySelect.utils.js +36 -0
  201. package/dist/components/inputs/Selection/shared/select.context.d.ts +3 -2
  202. package/dist/components/inputs/Selection/shared/select.context.js +67 -36
  203. package/dist/components/inputs/Selection/shared/select.types.d.ts +3 -2
  204. package/dist/components/inputs/Selection/shared/selectDesktop.cva.d.ts +10 -0
  205. package/dist/components/inputs/Selection/shared/selectDesktop.cva.js +4 -0
  206. package/dist/components/inputs/Selection/shared/selectInput.cva.d.ts +5 -0
  207. package/dist/components/inputs/Selection/shared/selectInput.cva.js +5 -0
  208. package/dist/components/inputs/Selection/shared/selectItem.cva.d.ts +16 -6
  209. package/dist/components/inputs/Selection/shared/selectItem.cva.js +21 -18
  210. package/dist/components/inputs/Selection/shared/staticSelect.utils.d.ts +23 -0
  211. package/dist/components/inputs/Selection/shared/staticSelect.utils.js +37 -0
  212. package/dist/components/inputs/Selection/shared/staticSelect.utils.spec.d.ts +1 -0
  213. package/dist/components/inputs/Selection/shared/useSelectItems.js +109 -49
  214. package/dist/components/inputs/Skeleton/InputFrame.d.ts +82 -0
  215. package/dist/components/inputs/Skeleton/InputFrame.js +548 -0
  216. package/dist/components/inputs/Slider/Slider.d.ts +2 -1
  217. package/dist/components/inputs/Slider/Slider.js +265 -76
  218. package/dist/components/inputs/TextEditor/TextEditor.d.ts +1 -0
  219. package/dist/components/inputs/TextEditor/TextEditor.js +450 -101
  220. package/dist/components/inputs/TextEditor/Toolbar/ColorPicker.js +37 -11
  221. package/dist/components/inputs/TextEditor/Toolbar/ColorPickerDropdown.js +105 -33
  222. package/dist/components/inputs/TextEditor/Toolbar/HyperlinkAction.js +194 -45
  223. package/dist/components/inputs/TextEditor/Toolbar/TextAlignSelect.js +88 -28
  224. package/dist/components/inputs/TextEditor/Toolbar/TextColorSelect.js +48 -14
  225. package/dist/components/inputs/TextEditor/Toolbar/TextEditorToolbar.js +66 -19
  226. package/dist/components/inputs/TextEditor/Toolbar/TextHighlightSelect.js +49 -15
  227. package/dist/components/inputs/TextEditor/Toolbar/TextListActions.js +92 -32
  228. package/dist/components/inputs/TextEditor/Toolbar/TextMarksActions.js +126 -54
  229. package/dist/components/inputs/TextEditor/Toolbar/TextStyleSelect.js +141 -38
  230. package/dist/components/inputs/Toggle/Toggle.d.ts +1 -0
  231. package/dist/components/inputs/Toggle/Toggle.js +217 -40
  232. package/dist/components/inputs/Toggle/toggle.cva.d.ts +15 -6
  233. package/dist/components/inputs/Toggle/toggle.cva.js +25 -21
  234. package/dist/components/inputs/shared/CheckContent.d.ts +2 -1
  235. package/dist/components/inputs/shared/CheckContent.js +23 -13
  236. package/dist/components/inputs/shared/InputClear.d.ts +2 -1
  237. package/dist/components/inputs/shared/InputClear.js +88 -12
  238. package/dist/components/inputs/shared/TooltipWrapper.js +50 -11
  239. package/dist/components/inputs/shared/input.cva.d.ts +137 -16
  240. package/dist/components/inputs/shared/input.cva.js +317 -273
  241. package/dist/components/inputs/shared/label.cva.d.ts +15 -6
  242. package/dist/components/inputs/shared/label.cva.js +28 -25
  243. package/dist/components/inputs/shared/tooltipWrapper.cva.d.ts +12 -0
  244. package/dist/components/inputs/shared/tooltipWrapper.cva.js +4 -0
  245. package/dist/components/inputs/shared/useStaticInputHandoff.d.ts +14 -0
  246. package/dist/components/inputs/shared/useStaticInputHandoff.js +100 -0
  247. package/dist/components/navigation/Accordion/Accordion.js +71 -24
  248. package/dist/components/navigation/Accordion/AccordionItem.js +97 -52
  249. package/dist/components/navigation/Accordion/accordion.cva.d.ts +109 -44
  250. package/dist/components/navigation/Accordion/accordion.cva.js +114 -84
  251. package/dist/components/navigation/Stepper/Stepper.js +69 -24
  252. package/dist/components/navigation/Stepper/StepperItem.js +112 -39
  253. package/dist/components/navigation/Stepper/StepperSeparator.js +25 -7
  254. package/dist/components/navigation/Stepper/stepper.cva.d.ts +86 -30
  255. package/dist/components/navigation/Stepper/stepper.cva.js +104 -83
  256. package/dist/components/overlays/ActionModal/ActionModal.js +169 -35
  257. package/dist/components/overlays/BottomSheet/BottomSheet.js +96 -23
  258. package/dist/components/overlays/BottomSheet/BottomSheetHeader.js +48 -8
  259. package/dist/components/overlays/Drawer/Drawer.js +62 -20
  260. package/dist/components/overlays/Modal/Modal.js +5 -5
  261. package/dist/components/overlays/Modal/modal.cva.d.ts +34 -9
  262. package/dist/components/overlays/Modal/modal.cva.js +38 -27
  263. package/dist/components/overlays/ResponsivePopover/ResponsivePopover.js +86 -30
  264. package/dist/components/overlays/Tooltip/Tooltip.js +143 -34
  265. package/dist/components/overlays/Tooltip/TooltipEllipsis.js +37 -12
  266. package/dist/components/overlays/Tooltip/tooltip.cva.d.ts +45 -17
  267. package/dist/components/overlays/Tooltip/tooltip.cva.js +38 -26
  268. package/dist/components/segment/Segment.js +221 -60
  269. package/dist/components/segment/SegmentItem.js +70 -13
  270. package/dist/components/segment/segment.cva.d.ts +18 -7
  271. package/dist/components/segment/segment.cva.js +24 -21
  272. package/dist/components/shared/pagination/Pagination.js +108 -22
  273. package/dist/components/shared/pagination/PaginationList.js +167 -64
  274. package/dist/components/shared/popover.cva.d.ts +7 -3
  275. package/dist/components/shared/popover.cva.js +3 -3
  276. package/dist/components/status/Alert/Alert.js +103 -36
  277. package/dist/components/status/Alert/alert.cva.d.ts +18 -6
  278. package/dist/components/status/Alert/alert.cva.js +60 -57
  279. package/dist/components/status/Loader/Loader.js +77 -22
  280. package/dist/components/status/Loader/loader.cva.d.ts +23 -4
  281. package/dist/components/status/Loader/loader.cva.js +22 -13
  282. package/dist/components/status/Toast/Toast.js +27 -20
  283. package/dist/components/status/Toast/toast.cva.d.ts +61 -10
  284. package/dist/components/status/Toast/toast.cva.js +129 -64
  285. package/dist/components/status/Toast/useToast.js +62 -57
  286. package/dist/components/status/shared/status.cva.d.ts +30 -8
  287. package/dist/components/status/shared/status.cva.js +56 -50
  288. package/dist/components/table/CellText.js +3 -3
  289. package/dist/components/table/ColumnConfig.js +158 -54
  290. package/dist/components/table/HeaderText.js +3 -3
  291. package/dist/components/table/InfiniteTable.js +67 -16
  292. package/dist/components/table/PaginatedTable.js +84 -18
  293. package/dist/components/table/Table.js +34 -33
  294. package/dist/components/table/table.cva.d.ts +52 -19
  295. package/dist/components/table/table.cva.js +44 -35
  296. package/dist/components/text/Link/Link.js +22 -10
  297. package/dist/components/text/Link/link.cva.d.ts +11 -5
  298. package/dist/components/text/Link/link.cva.js +8 -5
  299. package/dist/components/text/Tag/Tag.js +3 -3
  300. package/dist/components/text/Tag/tag.cva.d.ts +15 -5
  301. package/dist/components/text/Tag/tag.cva.js +51 -48
  302. package/dist/components/text/Typography/Typography.js +25 -10
  303. package/dist/components/text/Typography/typography.cva.d.ts +93 -7
  304. package/dist/components/text/Typography/typography.cva.js +126 -122
  305. package/dist/config/confirmation.context.js +1 -1
  306. package/dist/config/link.context.js +23 -9
  307. package/dist/config/router.context.js +42 -16
  308. package/dist/config/theme.context.js +98 -45
  309. package/dist/config/uiConfig.context.d.ts +20 -6
  310. package/dist/config/uiConfig.context.js +68 -14
  311. package/dist/config/uiOverrides.context.d.ts +192 -0
  312. package/dist/config/uiOverrides.context.js +113 -0
  313. package/dist/helpers/dynamicInputs.d.ts +5 -5
  314. package/dist/helpers/dynamicInputs.js +3 -0
  315. package/dist/hooks/useAutosave.d.ts +2 -1
  316. package/dist/hooks/useAutosave.js +12 -4
  317. package/dist/hooks/useAutosave.spec.d.ts +1 -0
  318. package/dist/hooks/useBreakpoint.js +16 -3
  319. package/dist/hooks/useDebounceCallback.js +51 -17
  320. package/dist/hooks/useFilters.js +125 -64
  321. package/dist/hooks/useForm.js +42 -8
  322. package/dist/hooks/useFormAutosave.d.ts +3 -1
  323. package/dist/hooks/useFormAutosave.js +122 -30
  324. package/dist/hooks/useFormAutosave.spec.d.ts +1 -0
  325. package/dist/hooks/useIntersectionObserver.d.ts +1 -1
  326. package/dist/hooks/useIntersectionObserver.js +91 -24
  327. package/dist/hooks/useKeyInteractions.d.ts +20 -0
  328. package/dist/hooks/useKeyInteractions.js +54 -0
  329. package/dist/hooks/useKeyInteractions.spec.d.ts +1 -0
  330. package/dist/hooks/useLocalStorage.js +43 -10
  331. package/dist/hooks/useLongPressRepeat.js +55 -20
  332. package/dist/hooks/usePagination.js +49 -19
  333. package/dist/hooks/useQueryAutocomplete.d.ts +14 -0
  334. package/dist/hooks/useQueryAutocomplete.js +57 -0
  335. package/dist/hooks/useScrollableListBox.js +37 -16
  336. package/dist/hooks/useSorting.js +69 -28
  337. package/dist/hooks/useStateAndRef.js +21 -7
  338. package/dist/hooks/useTableColumnConfig.js +124 -31
  339. package/dist/hooks/useTranslationMemo.js +25 -5
  340. package/dist/index.d.ts +37 -1
  341. package/dist/index.js +34 -3
  342. package/dist/tw-ui-plugin.js +6 -0
  343. package/dist/utils/date-time.utils.d.ts +38 -10
  344. package/dist/utils/date-time.utils.js +136 -22
  345. package/dist/utils/query.utils.d.ts +4 -0
  346. package/dist/utils/query.utils.js +8 -0
  347. package/dist/utils/style-merge.util.d.ts +43 -0
  348. package/dist/utils/style-merge.util.js +233 -0
  349. package/dist/utils/style-merge.util.spec.d.ts +1 -0
  350. package/package.json +1 -1
  351. package/dist/config/uiStyle.context.d.ts +0 -162
  352. package/dist/config/uiStyle.context.js +0 -30
package/dist/components/buttons/PillButton/pillButton.cva.js CHANGED
@@ -1,256 +1,264 @@
1
+ import { UIOverrides } from "../../../config/uiOverrides.context.js";
1
2
  import { uiOutlineClass } from "../../outline.clsx.js";
2
3
  import { compoundMapper } from "../../../utils/compoundMapper.js";
3
4
  import { clsx } from "clsx";
4
5
  import { cva } from "class-variance-authority";
5
6
  //#region src/components/buttons/PillButton/pillButton.cva.ts
6
- var pillButton = cva([
7
- uiOutlineClass,
8
- "flex items-center justify-center",
9
- "rounded-pill-rounding-default border border-solid px-pill-side-default py-pill-height-s"
10
- ], {
11
- variants: {
12
- color: {
13
- primary: "",
14
- secondary: "",
15
- success: "",
16
- warning: "",
17
- error: ""
18
- },
19
- variant: {
20
- contained: "",
21
- outlined: "",
22
- subtle: ""
23
- }
24
- },
25
- compoundVariants: [
26
- {
27
- variant: "contained",
28
- color: "primary",
29
- className: [
30
- "border-interactive-contained-primary-idle bg-interactive-contained-primary-idle text-interactive-contained-primary-on-idle",
31
- "hover:border-interactive-contained-primary-hover hover:bg-interactive-contained-primary-hover hover:text-interactive-contained-primary-on-hover",
32
- "pressed:border-interactive-contained-primary-pressed pressed:bg-interactive-contained-primary-pressed pressed:text-interactive-contained-primary-on-pressed",
33
- "disabled:border-interactive-contained-primary-disabled disabled:bg-interactive-contained-primary-disabled disabled:text-interactive-contained-primary-on-disabled",
34
- "focus-visible:outline-interactive-contained-primary-focus",
35
- "selected:border-interactive-contained-primary-toggled-idle selected:bg-interactive-contained-primary-toggled-idle selected:text-interactive-contained-primary-on-toggled-idle",
36
- "selected:hover:border-interactive-contained-primary-toggled-hover selected:hover:bg-interactive-contained-primary-toggled-hover selected:hover:text-interactive-contained-primary-on-toggled-hover",
37
- "selected:disabled:border-interactive-contained-primary-toggled-disabled selected:disabled:bg-interactive-contained-primary-toggled-disabled selected:disabled:text-interactive-contained-primary-on-toggled-disabled"
38
- ]
39
- },
40
- {
41
- variant: "outlined",
42
- color: "primary",
43
- className: [
44
- "border-interactive-outlined-primary-outline-idle bg-interactive-outlined-primary-idle text-interactive-outlined-primary-on-idle",
45
- "hover:border-interactive-outlined-primary-outline-hover hover:bg-interactive-outlined-primary-hover hover:text-interactive-outlined-primary-on-hover",
46
- "pressed:border-interactive-outlined-primary-outline-pressed pressed:bg-interactive-outlined-primary-pressed pressed:text-interactive-outlined-primary-on-pressed",
47
- "disabled:border-interactive-outlined-primary-outline-disabled disabled:bg-interactive-outlined-primary-disabled disabled:text-interactive-outlined-primary-on-disabled",
48
- "focus-visible:outline-interactive-outlined-primary-focus",
49
- "selected:border-interactive-outlined-primary-toggled-idle selected:bg-interactive-outlined-primary-toggled-idle selected:text-interactive-outlined-primary-on-toggled-idle",
50
- "selected:hover:border-interactive-outlined-primary-toggled-hover selected:hover:bg-interactive-outlined-primary-toggled-hover selected:hover:text-interactive-outlined-primary-on-toggled-hover",
51
- "selected:disabled:border-interactive-outlined-primary-toggled-disabled selected:disabled:bg-interactive-outlined-primary-toggled-disabled selected:disabled:text-interactive-outlined-primary-on-toggled-disabled"
52
- ]
7
+ var pillButtonDefinition = UIOverrides.defineConfig({
8
+ base: [
9
+ uiOutlineClass,
10
+ "flex items-center justify-center",
11
+ "rounded-pill-rounding-default border border-solid px-pill-side-default py-pill-height-s"
12
+ ],
13
+ config: {
14
+ variants: {
15
+ color: {
16
+ primary: "",
17
+ secondary: "",
18
+ success: "",
19
+ warning: "",
20
+ error: ""
21
+ },
22
+ variant: {
23
+ contained: "",
24
+ outlined: "",
25
+ subtle: ""
26
+ }
53
27
  },
54
- {
55
- variant: "subtle",
28
+ compoundVariants: [
29
+ {
30
+ variant: "contained",
31
+ color: "primary",
32
+ className: [
33
+ "border-interactive-contained-primary-idle bg-interactive-contained-primary-idle text-interactive-contained-primary-on-idle",
34
+ "hover:border-interactive-contained-primary-hover hover:bg-interactive-contained-primary-hover hover:text-interactive-contained-primary-on-hover",
35
+ "pressed:border-interactive-contained-primary-pressed pressed:bg-interactive-contained-primary-pressed pressed:text-interactive-contained-primary-on-pressed",
36
+ "disabled:border-interactive-contained-primary-disabled disabled:bg-interactive-contained-primary-disabled disabled:text-interactive-contained-primary-on-disabled",
37
+ "focus-visible:outline-interactive-contained-primary-focus",
38
+ "selected:border-interactive-contained-primary-toggled-idle selected:bg-interactive-contained-primary-toggled-idle selected:text-interactive-contained-primary-on-toggled-idle",
39
+ "selected:hover:border-interactive-contained-primary-toggled-hover selected:hover:bg-interactive-contained-primary-toggled-hover selected:hover:text-interactive-contained-primary-on-toggled-hover",
40
+ "selected:disabled:border-interactive-contained-primary-toggled-disabled selected:disabled:bg-interactive-contained-primary-toggled-disabled selected:disabled:text-interactive-contained-primary-on-toggled-disabled"
41
+ ]
42
+ },
43
+ {
44
+ variant: "outlined",
45
+ color: "primary",
46
+ className: [
47
+ "border-interactive-outlined-primary-outline-idle bg-interactive-outlined-primary-idle text-interactive-outlined-primary-on-idle",
48
+ "hover:border-interactive-outlined-primary-outline-hover hover:bg-interactive-outlined-primary-hover hover:text-interactive-outlined-primary-on-hover",
49
+ "pressed:border-interactive-outlined-primary-outline-pressed pressed:bg-interactive-outlined-primary-pressed pressed:text-interactive-outlined-primary-on-pressed",
50
+ "disabled:border-interactive-outlined-primary-outline-disabled disabled:bg-interactive-outlined-primary-disabled disabled:text-interactive-outlined-primary-on-disabled",
51
+ "focus-visible:outline-interactive-outlined-primary-focus",
52
+ "selected:border-interactive-outlined-primary-toggled-idle selected:bg-interactive-outlined-primary-toggled-idle selected:text-interactive-outlined-primary-on-toggled-idle",
53
+ "selected:hover:border-interactive-outlined-primary-toggled-hover selected:hover:bg-interactive-outlined-primary-toggled-hover selected:hover:text-interactive-outlined-primary-on-toggled-hover",
54
+ "selected:disabled:border-interactive-outlined-primary-toggled-disabled selected:disabled:bg-interactive-outlined-primary-toggled-disabled selected:disabled:text-interactive-outlined-primary-on-toggled-disabled"
55
+ ]
56
+ },
57
+ {
58
+ variant: "subtle",
59
+ color: "primary",
60
+ className: [
61
+ "border-interactive-subtle-primary-idle bg-interactive-subtle-primary-idle text-interactive-subtle-primary-on-idle",
62
+ "hover:border-interactive-subtle-primary-hover hover:bg-interactive-subtle-primary-hover hover:text-interactive-subtle-primary-on-hover",
63
+ "pressed:border-interactive-subtle-primary-pressed pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
64
+ "disabled:border-interactive-subtle-primary-disabled disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
65
+ "focus-visible:outline-interactive-subtle-primary-focus",
66
+ "selected:border-interactive-contained-primary-toggled-idle selected:bg-interactive-contained-primary-toggled-idle selected:text-interactive-contained-primary-on-toggled-idle",
67
+ "selected:hover:border-interactive-subtle-primary-toggled-hover selected:hover:bg-interactive-subtle-primary-toggled-hover selected:hover:text-interactive-subtle-primary-on-toggled-hover",
68
+ "selected:disabled:border-interactive-subtle-primary-toggled-disabled selected:disabled:bg-interactive-subtle-primary-toggled-disabled selected:disabled:text-interactive-subtle-primary-on-toggled-disabled"
69
+ ]
70
+ },
71
+ {
72
+ variant: "contained",
73
+ color: "secondary",
74
+ className: [
75
+ "border-interactive-contained-secondary-idle bg-interactive-contained-secondary-idle text-interactive-contained-secondary-on-idle",
76
+ "hover:border-interactive-contained-secondary-hover hover:bg-interactive-contained-secondary-hover hover:text-interactive-contained-secondary-on-hover",
77
+ "pressed:border-interactive-contained-secondary-pressed pressed:bg-interactive-contained-secondary-pressed pressed:text-interactive-contained-secondary-on-pressed",
78
+ "disabled:border-interactive-contained-secondary-disabled disabled:bg-interactive-contained-secondary-disabled disabled:text-interactive-contained-secondary-on-disabled",
79
+ "focus-visible:outline-interactive-contained-secondary-focus",
80
+ "selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
81
+ "selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
82
+ "selected:disabled:border-interactive-contained-secondary-toggled-disabled selected:disabled:bg-interactive-contained-secondary-toggled-disabled selected:disabled:text-interactive-contained-secondary-on-toggled-disabled"
83
+ ]
84
+ },
85
+ {
86
+ variant: "outlined",
87
+ color: "secondary",
88
+ className: [
89
+ "border-interactive-outlined-secondary-outline-idle bg-interactive-outlined-secondary-idle text-interactive-outlined-secondary-on-idle",
90
+ "hover:border-interactive-outlined-secondary-outline-hover hover:bg-interactive-outlined-secondary-hover hover:text-interactive-outlined-secondary-on-hover",
91
+ "pressed:border-interactive-outlined-secondary-outline-pressed pressed:bg-interactive-outlined-secondary-pressed pressed:text-interactive-outlined-secondary-on-pressed",
92
+ "disabled:border-interactive-outlined-secondary-outline-disabled disabled:bg-interactive-outlined-secondary-disabled disabled:text-interactive-outlined-secondary-on-disabled",
93
+ "focus-visible:outline-interactive-outlined-secondary-focus",
94
+ "selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
95
+ "selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
96
+ "selected:disabled:border-interactive-contained-secondary-toggled-disabled selected:disabled:bg-interactive-contained-secondary-toggled-disabled selected:disabled:text-interactive-contained-secondary-on-toggled-disabled"
97
+ ]
98
+ },
99
+ {
100
+ variant: "subtle",
101
+ color: "secondary",
102
+ className: [
103
+ "border-interactive-subtle-secondary-idle bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle",
104
+ "hover:border-interactive-subtle-secondary-hover hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
105
+ "pressed:border-interactive-subtle-secondary-pressed pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
106
+ "disabled:border-interactive-subtle-secondary-disabled disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled",
107
+ "focus-visible:outline-interactive-subtle-secondary-focus",
108
+ "selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
109
+ "selected:hover:border-interactive-subtle-secondary-toggled-hover selected:hover:bg-interactive-subtle-secondary-toggled-hover selected:hover:text-interactive-subtle-secondary-on-toggled-hover",
110
+ "selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled"
111
+ ]
112
+ },
113
+ {
114
+ variant: "contained",
115
+ color: "success",
116
+ className: [
117
+ "border-interactive-contained-success-idle bg-interactive-contained-success-idle text-interactive-contained-success-on-idle",
118
+ "hover:border-interactive-contained-success-hover hover:bg-interactive-contained-success-hover hover:text-interactive-contained-success-on-hover",
119
+ "pressed:border-interactive-contained-success-pressed pressed:bg-interactive-contained-success-pressed pressed:text-interactive-contained-success-on-pressed",
120
+ "disabled:border-interactive-contained-success-disabled disabled:bg-interactive-contained-success-disabled disabled:text-interactive-contained-success-on-disabled",
121
+ "focus-visible:outline-interactive-contained-success-focus",
122
+ "selected:border-interactive-contained-success-toggled-idle selected:bg-interactive-contained-success-toggled-idle selected:text-interactive-contained-success-on-toggled-idle",
123
+ "selected:hover:border-interactive-contained-success-toggled-hover selected:hover:bg-interactive-contained-success-toggled-hover selected:hover:text-interactive-contained-success-on-toggled-hover",
124
+ "selected:disabled:border-interactive-contained-success-toggled-disabled selected:disabled:bg-interactive-contained-success-toggled-disabled selected:disabled:text-interactive-contained-success-on-toggled-disabled"
125
+ ]
126
+ },
127
+ {
128
+ variant: "outlined",
129
+ color: "success",
130
+ className: [
131
+ "border-interactive-outlined-success-outline-idle bg-interactive-outlined-success-idle text-interactive-outlined-success-on-idle",
132
+ "hover:border-interactive-outlined-success-outline-hover hover:bg-interactive-outlined-success-hover hover:text-interactive-outlined-success-on-hover",
133
+ "pressed:border-interactive-outlined-success-outline-pressed pressed:bg-interactive-outlined-success-pressed pressed:text-interactive-outlined-success-on-pressed",
134
+ "disabled:border-interactive-outlined-success-outline-disabled disabled:bg-interactive-outlined-success-disabled disabled:text-interactive-outlined-success-on-disabled",
135
+ "focus-visible:outline-interactive-outlined-success-focus",
136
+ "selected:border-interactive-outlined-success-toggled-idle selected:bg-interactive-outlined-success-toggled-idle selected:text-interactive-outlined-success-on-toggled-idle",
137
+ "selected:hover:border-interactive-outlined-success-toggled-hover selected:hover:bg-interactive-outlined-success-toggled-hover selected:hover:text-interactive-outlined-success-on-toggled-hover",
138
+ "selected:disabled:border-interactive-outlined-success-toggled-disabled selected:disabled:bg-interactive-outlined-success-toggled-disabled selected:disabled:text-interactive-outlined-success-on-toggled-disabled"
139
+ ]
140
+ },
141
+ {
142
+ variant: "subtle",
143
+ color: "success",
144
+ className: [
145
+ "border-interactive-subtle-success-idle bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle",
146
+ "hover:border-interactive-subtle-success-hover hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover",
147
+ "pressed:border-interactive-subtle-success-pressed pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed",
148
+ "disabled:border-interactive-subtle-success-disabled disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled",
149
+ "focus-visible:outline-interactive-subtle-success-focus",
150
+ "selected:border-interactive-subtle-success-toggled-idle selected:bg-interactive-subtle-success-toggled-idle selected:text-interactive-subtle-success-on-toggled-idle",
151
+ "selected:hover:border-interactive-subtle-success-toggled-hover selected:hover:bg-interactive-subtle-success-toggled-hover selected:hover:text-interactive-subtle-success-on-toggled-hover",
152
+ "selected:disabled:border-interactive-subtle-success-toggled-disabled selected:disabled:bg-interactive-subtle-success-toggled-disabled selected:disabled:text-interactive-subtle-success-on-toggled-disabled"
153
+ ]
154
+ },
155
+ {
156
+ variant: "contained",
157
+ color: "warning",
158
+ className: [
159
+ "border-interactive-contained-warning-idle bg-interactive-contained-warning-idle text-interactive-contained-warning-on-idle",
160
+ "hover:border-interactive-contained-warning-hover hover:bg-interactive-contained-warning-hover hover:text-interactive-contained-warning-on-hover",
161
+ "pressed:border-interactive-contained-warning-pressed pressed:bg-interactive-contained-warning-pressed pressed:text-interactive-contained-warning-on-pressed",
162
+ "disabled:border-interactive-contained-warning-disabled disabled:bg-interactive-contained-warning-disabled disabled:text-interactive-contained-warning-on-disabled",
163
+ "focus-visible:outline-interactive-contained-warning-focus",
164
+ "selected:border-interactive-contained-warning-toggled-idle selected:bg-interactive-contained-warning-toggled-idle selected:text-interactive-contained-warning-on-toggled-idle",
165
+ "selected:hover:border-interactive-contained-warning-toggled-hover selected:hover:bg-interactive-contained-warning-toggled-hover selected:hover:text-interactive-contained-warning-on-toggled-hover",
166
+ "selected:disabled:border-interactive-contained-warning-toggled-disabled selected:disabled:bg-interactive-contained-warning-toggled-disabled selected:disabled:text-interactive-contained-warning-on-toggled-disabled"
167
+ ]
168
+ },
169
+ {
170
+ variant: "outlined",
171
+ color: "warning",
172
+ className: [
173
+ "border-interactive-outlined-warning-outline-idle bg-interactive-outlined-warning-idle text-interactive-outlined-warning-on-idle",
174
+ "hover:border-interactive-outlined-warning-outline-hover hover:bg-interactive-outlined-warning-hover hover:text-interactive-outlined-warning-on-hover",
175
+ "pressed:border-interactive-outlined-warning-outline-pressed pressed:bg-interactive-outlined-warning-pressed pressed:text-interactive-outlined-warning-on-pressed",
176
+ "disabled:border-interactive-outlined-warning-outline-disabled disabled:bg-interactive-outlined-warning-disabled disabled:text-interactive-outlined-warning-on-disabled",
177
+ "focus-visible:outline-interactive-outlined-warning-focus",
178
+ "selected:border-interactive-outlined-warning-toggled-idle selected:bg-interactive-outlined-warning-toggled-idle selected:text-interactive-outlined-warning-on-toggled-idle",
179
+ "selected:hover:border-interactive-outlined-warning-toggled-hover selected:hover:bg-interactive-outlined-warning-toggled-hover selected:hover:text-interactive-outlined-warning-on-toggled-hover",
180
+ "selected:disabled:border-interactive-outlined-warning-toggled-disabled selected:disabled:bg-interactive-outlined-warning-toggled-disabled selected:disabled:text-interactive-outlined-warning-on-toggled-disabled"
181
+ ]
182
+ },
183
+ {
184
+ variant: "subtle",
185
+ color: "warning",
186
+ className: [
187
+ "border-interactive-subtle-warning-idle bg-interactive-subtle-warning-idle text-interactive-subtle-warning-on-idle",
188
+ "hover:border-interactive-subtle-warning-hover hover:bg-interactive-subtle-warning-hover hover:text-interactive-subtle-warning-on-hover",
189
+ "pressed:border-interactive-subtle-warning-pressed pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed",
190
+ "disabled:border-interactive-subtle-warning-disabled disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled",
191
+ "focus-visible:outline-interactive-subtle-warning-focus",
192
+ "selected:border-interactive-subtle-warning-toggled-idle selected:bg-interactive-subtle-warning-toggled-idle selected:text-interactive-subtle-warning-on-toggled-idle",
193
+ "selected:hover:border-interactive-subtle-warning-toggled-hover selected:hover:bg-interactive-subtle-warning-toggled-hover selected:hover:text-interactive-subtle-warning-on-toggled-hover",
194
+ "selected:disabled:border-interactive-subtle-warning-toggled-disabled selected:disabled:bg-interactive-subtle-warning-toggled-disabled selected:disabled:text-interactive-subtle-warning-on-toggled-disabled"
195
+ ]
196
+ },
197
+ {
198
+ variant: "contained",
199
+ color: "error",
200
+ className: [
201
+ "border-interactive-contained-error-idle bg-interactive-contained-error-idle text-interactive-contained-error-on-idle",
202
+ "hover:border-interactive-contained-error-hover hover:bg-interactive-contained-error-hover hover:text-interactive-contained-error-on-hover",
203
+ "pressed:border-interactive-contained-error-pressed pressed:bg-interactive-contained-error-pressed pressed:text-interactive-contained-error-on-pressed",
204
+ "disabled:border-interactive-contained-error-disabled disabled:bg-interactive-contained-error-disabled disabled:text-interactive-contained-error-on-disabled",
205
+ "focus-visible:outline-interactive-contained-error-focus",
206
+ "selected:border-interactive-contained-error-toggled-idle selected:bg-interactive-contained-error-toggled-idle selected:text-interactive-contained-error-on-toggled-idle",
207
+ "selected:hover:border-interactive-contained-error-toggled-hover selected:hover:bg-interactive-contained-error-toggled-hover selected:hover:text-interactive-contained-error-on-toggled-hover",
208
+ "selected:disabled:border-interactive-contained-error-toggled-disabled selected:disabled:bg-interactive-contained-error-toggled-disabled selected:disabled:text-interactive-contained-error-on-toggled-disabled"
209
+ ]
210
+ },
211
+ {
212
+ variant: "outlined",
213
+ color: "error",
214
+ className: [
215
+ "border-interactive-outlined-error-outline-idle bg-interactive-outlined-error-idle text-interactive-outlined-error-on-idle",
216
+ "hover:border-interactive-outlined-error-outline-hover hover:bg-interactive-outlined-error-hover hover:text-interactive-outlined-error-on-hover",
217
+ "pressed:border-interactive-outlined-error-outline-pressed pressed:bg-interactive-outlined-error-pressed pressed:text-interactive-outlined-error-on-pressed",
218
+ "disabled:border-interactive-outlined-error-outline-disabled disabled:bg-interactive-outlined-error-disabled disabled:text-interactive-outlined-error-on-disabled",
219
+ "focus-visible:outline-interactive-outlined-error-focus",
220
+ "selected:border-interactive-outlined-error-toggled-idle selected:bg-interactive-outlined-error-toggled-idle selected:text-interactive-outlined-error-on-toggled-idle",
221
+ "selected:hover:border-interactive-outlined-error-toggled-hover selected:hover:bg-interactive-outlined-error-toggled-hover selected:hover:text-interactive-outlined-error-on-toggled-hover",
222
+ "selected:disabled:border-interactive-outlined-error-toggled-disabled selected:disabled:bg-interactive-outlined-error-toggled-disabled selected:disabled:text-interactive-outlined-error-on-toggled-disabled"
223
+ ]
224
+ },
225
+ {
226
+ variant: "subtle",
227
+ color: "error",
228
+ className: [
229
+ "border-interactive-subtle-error-idle bg-interactive-subtle-error-idle text-interactive-subtle-error-on-idle",
230
+ "hover:border-interactive-subtle-error-hover hover:bg-interactive-subtle-error-hover hover:text-interactive-subtle-error-on-hover",
231
+ "pressed:border-interactive-subtle-error-pressed pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed",
232
+ "disabled:border-interactive-subtle-error-disabled disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-on-disabled",
233
+ "focus-visible:outline-interactive-subtle-error-focus",
234
+ "selected:border-interactive-subtle-error-toggled-idle selected:bg-interactive-subtle-error-toggled-idle selected:text-interactive-subtle-error-on-toggled-idle",
235
+ "selected:hover:border-interactive-subtle-error-toggled-hover selected:hover:bg-interactive-subtle-error-toggled-hover selected:hover:text-interactive-subtle-error-on-toggled-hover",
236
+ "selected:disabled:border-interactive-subtle-error-toggled-disabled selected:disabled:bg-interactive-subtle-error-toggled-disabled selected:disabled:text-interactive-subtle-error-on-toggled-disabled"
237
+ ]
238
+ }
239
+ ],
240
+ defaultVariants: {
56
241
  color: "primary",
57
- className: [
58
- "border-interactive-subtle-primary-idle bg-interactive-subtle-primary-idle text-interactive-subtle-primary-on-idle",
59
- "hover:border-interactive-subtle-primary-hover hover:bg-interactive-subtle-primary-hover hover:text-interactive-subtle-primary-on-hover",
60
- "pressed:border-interactive-subtle-primary-pressed pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
61
- "disabled:border-interactive-subtle-primary-disabled disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
62
- "focus-visible:outline-interactive-subtle-primary-focus",
63
- "selected:border-interactive-contained-primary-toggled-idle selected:bg-interactive-contained-primary-toggled-idle selected:text-interactive-contained-primary-on-toggled-idle",
64
- "selected:hover:border-interactive-subtle-primary-toggled-hover selected:hover:bg-interactive-subtle-primary-toggled-hover selected:hover:text-interactive-subtle-primary-on-toggled-hover",
65
- "selected:disabled:border-interactive-subtle-primary-toggled-disabled selected:disabled:bg-interactive-subtle-primary-toggled-disabled selected:disabled:text-interactive-subtle-primary-on-toggled-disabled"
66
- ]
67
- },
68
- {
69
- variant: "contained",
70
- color: "secondary",
71
- className: [
72
- "border-interactive-contained-secondary-idle bg-interactive-contained-secondary-idle text-interactive-contained-secondary-on-idle",
73
- "hover:border-interactive-contained-secondary-hover hover:bg-interactive-contained-secondary-hover hover:text-interactive-contained-secondary-on-hover",
74
- "pressed:border-interactive-contained-secondary-pressed pressed:bg-interactive-contained-secondary-pressed pressed:text-interactive-contained-secondary-on-pressed",
75
- "disabled:border-interactive-contained-secondary-disabled disabled:bg-interactive-contained-secondary-disabled disabled:text-interactive-contained-secondary-on-disabled",
76
- "focus-visible:outline-interactive-contained-secondary-focus",
77
- "selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
78
- "selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
79
- "selected:disabled:border-interactive-contained-secondary-toggled-disabled selected:disabled:bg-interactive-contained-secondary-toggled-disabled selected:disabled:text-interactive-contained-secondary-on-toggled-disabled"
80
- ]
81
- },
82
- {
83
- variant: "outlined",
84
- color: "secondary",
85
- className: [
86
- "border-interactive-outlined-secondary-outline-idle bg-interactive-outlined-secondary-idle text-interactive-outlined-secondary-on-idle",
87
- "hover:border-interactive-outlined-secondary-outline-hover hover:bg-interactive-outlined-secondary-hover hover:text-interactive-outlined-secondary-on-hover",
88
- "pressed:border-interactive-outlined-secondary-outline-pressed pressed:bg-interactive-outlined-secondary-pressed pressed:text-interactive-outlined-secondary-on-pressed",
89
- "disabled:border-interactive-outlined-secondary-outline-disabled disabled:bg-interactive-outlined-secondary-disabled disabled:text-interactive-outlined-secondary-on-disabled",
90
- "focus-visible:outline-interactive-outlined-secondary-focus",
91
- "selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
92
- "selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
93
- "selected:disabled:border-interactive-contained-secondary-toggled-disabled selected:disabled:bg-interactive-contained-secondary-toggled-disabled selected:disabled:text-interactive-contained-secondary-on-toggled-disabled"
94
- ]
95
- },
96
- {
97
- variant: "subtle",
98
- color: "secondary",
99
- className: [
100
- "border-interactive-subtle-secondary-idle bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle",
101
- "hover:border-interactive-subtle-secondary-hover hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
102
- "pressed:border-interactive-subtle-secondary-pressed pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
103
- "disabled:border-interactive-subtle-secondary-disabled disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled",
104
- "focus-visible:outline-interactive-subtle-secondary-focus",
105
- "selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
106
- "selected:hover:border-interactive-subtle-secondary-toggled-hover selected:hover:bg-interactive-subtle-secondary-toggled-hover selected:hover:text-interactive-subtle-secondary-on-toggled-hover",
107
- "selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled"
108
- ]
109
- },
110
- {
111
- variant: "contained",
112
- color: "success",
113
- className: [
114
- "border-interactive-contained-success-idle bg-interactive-contained-success-idle text-interactive-contained-success-on-idle",
115
- "hover:border-interactive-contained-success-hover hover:bg-interactive-contained-success-hover hover:text-interactive-contained-success-on-hover",
116
- "pressed:border-interactive-contained-success-pressed pressed:bg-interactive-contained-success-pressed pressed:text-interactive-contained-success-on-pressed",
117
- "disabled:border-interactive-contained-success-disabled disabled:bg-interactive-contained-success-disabled disabled:text-interactive-contained-success-on-disabled",
118
- "focus-visible:outline-interactive-contained-success-focus",
119
- "selected:border-interactive-contained-success-toggled-idle selected:bg-interactive-contained-success-toggled-idle selected:text-interactive-contained-success-on-toggled-idle",
120
- "selected:hover:border-interactive-contained-success-toggled-hover selected:hover:bg-interactive-contained-success-toggled-hover selected:hover:text-interactive-contained-success-on-toggled-hover",
121
- "selected:disabled:border-interactive-contained-success-toggled-disabled selected:disabled:bg-interactive-contained-success-toggled-disabled selected:disabled:text-interactive-contained-success-on-toggled-disabled"
122
- ]
123
- },
124
- {
125
- variant: "outlined",
126
- color: "success",
127
- className: [
128
- "border-interactive-outlined-success-outline-idle bg-interactive-outlined-success-idle text-interactive-outlined-success-on-idle",
129
- "hover:border-interactive-outlined-success-outline-hover hover:bg-interactive-outlined-success-hover hover:text-interactive-outlined-success-on-hover",
130
- "pressed:border-interactive-outlined-success-outline-pressed pressed:bg-interactive-outlined-success-pressed pressed:text-interactive-outlined-success-on-pressed",
131
- "disabled:border-interactive-outlined-success-outline-disabled disabled:bg-interactive-outlined-success-disabled disabled:text-interactive-outlined-success-on-disabled",
132
- "focus-visible:outline-interactive-outlined-success-focus",
133
- "selected:border-interactive-outlined-success-toggled-idle selected:bg-interactive-outlined-success-toggled-idle selected:text-interactive-outlined-success-on-toggled-idle",
134
- "selected:hover:border-interactive-outlined-success-toggled-hover selected:hover:bg-interactive-outlined-success-toggled-hover selected:hover:text-interactive-outlined-success-on-toggled-hover",
135
- "selected:disabled:border-interactive-outlined-success-toggled-disabled selected:disabled:bg-interactive-outlined-success-toggled-disabled selected:disabled:text-interactive-outlined-success-on-toggled-disabled"
136
- ]
137
- },
138
- {
139
- variant: "subtle",
140
- color: "success",
141
- className: [
142
- "border-interactive-subtle-success-idle bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle",
143
- "hover:border-interactive-subtle-success-hover hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover",
144
- "pressed:border-interactive-subtle-success-pressed pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed",
145
- "disabled:border-interactive-subtle-success-disabled disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled",
146
- "focus-visible:outline-interactive-subtle-success-focus",
147
- "selected:border-interactive-subtle-success-toggled-idle selected:bg-interactive-subtle-success-toggled-idle selected:text-interactive-subtle-success-on-toggled-idle",
148
- "selected:hover:border-interactive-subtle-success-toggled-hover selected:hover:bg-interactive-subtle-success-toggled-hover selected:hover:text-interactive-subtle-success-on-toggled-hover",
149
- "selected:disabled:border-interactive-subtle-success-toggled-disabled selected:disabled:bg-interactive-subtle-success-toggled-disabled selected:disabled:text-interactive-subtle-success-on-toggled-disabled"
150
- ]
151
- },
152
- {
153
- variant: "contained",
154
- color: "warning",
155
- className: [
156
- "border-interactive-contained-warning-idle bg-interactive-contained-warning-idle text-interactive-contained-warning-on-idle",
157
- "hover:border-interactive-contained-warning-hover hover:bg-interactive-contained-warning-hover hover:text-interactive-contained-warning-on-hover",
158
- "pressed:border-interactive-contained-warning-pressed pressed:bg-interactive-contained-warning-pressed pressed:text-interactive-contained-warning-on-pressed",
159
- "disabled:border-interactive-contained-warning-disabled disabled:bg-interactive-contained-warning-disabled disabled:text-interactive-contained-warning-on-disabled",
160
- "focus-visible:outline-interactive-contained-warning-focus",
161
- "selected:border-interactive-contained-warning-toggled-idle selected:bg-interactive-contained-warning-toggled-idle selected:text-interactive-contained-warning-on-toggled-idle",
162
- "selected:hover:border-interactive-contained-warning-toggled-hover selected:hover:bg-interactive-contained-warning-toggled-hover selected:hover:text-interactive-contained-warning-on-toggled-hover",
163
- "selected:disabled:border-interactive-contained-warning-toggled-disabled selected:disabled:bg-interactive-contained-warning-toggled-disabled selected:disabled:text-interactive-contained-warning-on-toggled-disabled"
164
- ]
165
- },
166
- {
167
- variant: "outlined",
168
- color: "warning",
169
- className: [
170
- "border-interactive-outlined-warning-outline-idle bg-interactive-outlined-warning-idle text-interactive-outlined-warning-on-idle",
171
- "hover:border-interactive-outlined-warning-outline-hover hover:bg-interactive-outlined-warning-hover hover:text-interactive-outlined-warning-on-hover",
172
- "pressed:border-interactive-outlined-warning-outline-pressed pressed:bg-interactive-outlined-warning-pressed pressed:text-interactive-outlined-warning-on-pressed",
173
- "disabled:border-interactive-outlined-warning-outline-disabled disabled:bg-interactive-outlined-warning-disabled disabled:text-interactive-outlined-warning-on-disabled",
174
- "focus-visible:outline-interactive-outlined-warning-focus",
175
- "selected:border-interactive-outlined-warning-toggled-idle selected:bg-interactive-outlined-warning-toggled-idle selected:text-interactive-outlined-warning-on-toggled-idle",
176
- "selected:hover:border-interactive-outlined-warning-toggled-hover selected:hover:bg-interactive-outlined-warning-toggled-hover selected:hover:text-interactive-outlined-warning-on-toggled-hover",
177
- "selected:disabled:border-interactive-outlined-warning-toggled-disabled selected:disabled:bg-interactive-outlined-warning-toggled-disabled selected:disabled:text-interactive-outlined-warning-on-toggled-disabled"
178
- ]
179
- },
180
- {
181
- variant: "subtle",
182
- color: "warning",
183
- className: [
184
- "border-interactive-subtle-warning-idle bg-interactive-subtle-warning-idle text-interactive-subtle-warning-on-idle",
185
- "hover:border-interactive-subtle-warning-hover hover:bg-interactive-subtle-warning-hover hover:text-interactive-subtle-warning-on-hover",
186
- "pressed:border-interactive-subtle-warning-pressed pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed",
187
- "disabled:border-interactive-subtle-warning-disabled disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled",
188
- "focus-visible:outline-interactive-subtle-warning-focus",
189
- "selected:border-interactive-subtle-warning-toggled-idle selected:bg-interactive-subtle-warning-toggled-idle selected:text-interactive-subtle-warning-on-toggled-idle",
190
- "selected:hover:border-interactive-subtle-warning-toggled-hover selected:hover:bg-interactive-subtle-warning-toggled-hover selected:hover:text-interactive-subtle-warning-on-toggled-hover",
191
- "selected:disabled:border-interactive-subtle-warning-toggled-disabled selected:disabled:bg-interactive-subtle-warning-toggled-disabled selected:disabled:text-interactive-subtle-warning-on-toggled-disabled"
192
- ]
193
- },
194
- {
195
- variant: "contained",
196
- color: "error",
197
- className: [
198
- "border-interactive-contained-error-idle bg-interactive-contained-error-idle text-interactive-contained-error-on-idle",
199
- "hover:border-interactive-contained-error-hover hover:bg-interactive-contained-error-hover hover:text-interactive-contained-error-on-hover",
200
- "pressed:border-interactive-contained-error-pressed pressed:bg-interactive-contained-error-pressed pressed:text-interactive-contained-error-on-pressed",
201
- "disabled:border-interactive-contained-error-disabled disabled:bg-interactive-contained-error-disabled disabled:text-interactive-contained-error-on-disabled",
202
- "focus-visible:outline-interactive-contained-error-focus",
203
- "selected:border-interactive-contained-error-toggled-idle selected:bg-interactive-contained-error-toggled-idle selected:text-interactive-contained-error-on-toggled-idle",
204
- "selected:hover:border-interactive-contained-error-toggled-hover selected:hover:bg-interactive-contained-error-toggled-hover selected:hover:text-interactive-contained-error-on-toggled-hover",
205
- "selected:disabled:border-interactive-contained-error-toggled-disabled selected:disabled:bg-interactive-contained-error-toggled-disabled selected:disabled:text-interactive-contained-error-on-toggled-disabled"
206
- ]
207
- },
208
- {
209
- variant: "outlined",
210
- color: "error",
211
- className: [
212
- "border-interactive-outlined-error-outline-idle bg-interactive-outlined-error-idle text-interactive-outlined-error-on-idle",
213
- "hover:border-interactive-outlined-error-outline-hover hover:bg-interactive-outlined-error-hover hover:text-interactive-outlined-error-on-hover",
214
- "pressed:border-interactive-outlined-error-outline-pressed pressed:bg-interactive-outlined-error-pressed pressed:text-interactive-outlined-error-on-pressed",
215
- "disabled:border-interactive-outlined-error-outline-disabled disabled:bg-interactive-outlined-error-disabled disabled:text-interactive-outlined-error-on-disabled",
216
- "focus-visible:outline-interactive-outlined-error-focus",
217
- "selected:border-interactive-outlined-error-toggled-idle selected:bg-interactive-outlined-error-toggled-idle selected:text-interactive-outlined-error-on-toggled-idle",
218
- "selected:hover:border-interactive-outlined-error-toggled-hover selected:hover:bg-interactive-outlined-error-toggled-hover selected:hover:text-interactive-outlined-error-on-toggled-hover",
219
- "selected:disabled:border-interactive-outlined-error-toggled-disabled selected:disabled:bg-interactive-outlined-error-toggled-disabled selected:disabled:text-interactive-outlined-error-on-toggled-disabled"
220
- ]
221
- },
222
- {
223
- variant: "subtle",
224
- color: "error",
225
- className: [
226
- "border-interactive-subtle-error-idle bg-interactive-subtle-error-idle text-interactive-subtle-error-on-idle",
227
- "hover:border-interactive-subtle-error-hover hover:bg-interactive-subtle-error-hover hover:text-interactive-subtle-error-on-hover",
228
- "pressed:border-interactive-subtle-error-pressed pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed",
229
- "disabled:border-interactive-subtle-error-disabled disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-on-disabled",
230
- "focus-visible:outline-interactive-subtle-error-focus",
231
- "selected:border-interactive-subtle-error-toggled-idle selected:bg-interactive-subtle-error-toggled-idle selected:text-interactive-subtle-error-on-toggled-idle",
232
- "selected:hover:border-interactive-subtle-error-toggled-hover selected:hover:bg-interactive-subtle-error-toggled-hover selected:hover:text-interactive-subtle-error-on-toggled-hover",
233
- "selected:disabled:border-interactive-subtle-error-toggled-disabled selected:disabled:bg-interactive-subtle-error-toggled-disabled selected:disabled:text-interactive-subtle-error-on-toggled-disabled"
234
- ]
242
+ variant: "contained"
235
243
  }
236
- ],
237
- defaultVariants: {
238
- color: "primary",
239
- variant: "contained"
240
244
  }
241
245
  });
242
- var pillButtonContent = cva("", {
243
- variants: { iconPosition: {
244
- left: "gap-button-gap-icon-to-label",
245
- right: "gap-button-gap-icon-to-label",
246
- none: "gap-button-gap-icon-to-label"
247
- } },
248
- defaultVariants: { iconPosition: "left" }
246
+ var pillButtonContentDefinition = UIOverrides.defineConfig({
247
+ base: [""],
248
+ config: {
249
+ variants: { iconPosition: {
250
+ left: "gap-button-gap-icon-to-label",
251
+ right: "gap-button-gap-icon-to-label",
252
+ none: "gap-button-gap-icon-to-label"
253
+ } },
254
+ defaultVariants: { iconPosition: "left" }
255
+ }
249
256
  });
257
+ var pillButtonContent = cva(pillButtonContentDefinition.base, pillButtonContentDefinition.config);
250
258
  var pillButtonIconSize = clsx("h-6 w-6");
251
259
  var pillButtonTypography = compoundMapper({ default: {
252
260
  size: "label-2",
253
261
  variant: "prominent-1"
254
262
  } });
255
263
  //#endregion
256
- export { pillButton, pillButtonContent, pillButtonIconSize, pillButtonTypography };
264
+ export { pillButtonContent, pillButtonContentDefinition, pillButtonDefinition, pillButtonIconSize, pillButtonTypography };