@salt-ds/core 1.21.0 → 1.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (421) hide show
  1. package/css/salt-core.css +158 -94
  2. package/dist-cjs/accordion/Accordion.js +14 -9
  3. package/dist-cjs/accordion/Accordion.js.map +1 -1
  4. package/dist-cjs/accordion/AccordionContext.js +14 -9
  5. package/dist-cjs/accordion/AccordionContext.js.map +1 -1
  6. package/dist-cjs/accordion/AccordionGroup.js +14 -9
  7. package/dist-cjs/accordion/AccordionGroup.js.map +1 -1
  8. package/dist-cjs/accordion/AccordionHeader.js +13 -8
  9. package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
  10. package/dist-cjs/accordion/AccordionPanel.js +14 -9
  11. package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
  12. package/dist-cjs/aria-announcer/useAriaAnnouncer.js +14 -9
  13. package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
  14. package/dist-cjs/avatar/Avatar.js +14 -9
  15. package/dist-cjs/avatar/Avatar.js.map +1 -1
  16. package/dist-cjs/avatar/useAvatarImage.js +14 -9
  17. package/dist-cjs/avatar/useAvatarImage.js.map +1 -1
  18. package/dist-cjs/badge/Badge.js +14 -9
  19. package/dist-cjs/badge/Badge.js.map +1 -1
  20. package/dist-cjs/banner/Banner.js +14 -9
  21. package/dist-cjs/banner/Banner.js.map +1 -1
  22. package/dist-cjs/banner/BannerActions.js +14 -9
  23. package/dist-cjs/banner/BannerActions.js.map +1 -1
  24. package/dist-cjs/banner/BannerContent.js +14 -9
  25. package/dist-cjs/banner/BannerContent.js.map +1 -1
  26. package/dist-cjs/border-item/BorderItem.js +14 -9
  27. package/dist-cjs/border-item/BorderItem.js.map +1 -1
  28. package/dist-cjs/border-layout/BorderLayout.js +14 -9
  29. package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
  30. package/dist-cjs/button/Button.js +14 -9
  31. package/dist-cjs/button/Button.js.map +1 -1
  32. package/dist-cjs/card/Card.css.js +1 -1
  33. package/dist-cjs/card/Card.js +14 -9
  34. package/dist-cjs/card/Card.js.map +1 -1
  35. package/dist-cjs/checkbox/Checkbox.js +14 -9
  36. package/dist-cjs/checkbox/Checkbox.js.map +1 -1
  37. package/dist-cjs/checkbox/CheckboxGroup.js +14 -9
  38. package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
  39. package/dist-cjs/checkbox/CheckboxIcon.js +14 -9
  40. package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
  41. package/dist-cjs/checkbox/internal/CheckboxGroupContext.js +14 -9
  42. package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
  43. package/dist-cjs/combo-box/ComboBox.js +14 -9
  44. package/dist-cjs/combo-box/ComboBox.js.map +1 -1
  45. package/dist-cjs/combo-box/useComboBox.js +14 -9
  46. package/dist-cjs/combo-box/useComboBox.js.map +1 -1
  47. package/dist-cjs/dialog/Dialog.js +16 -11
  48. package/dist-cjs/dialog/Dialog.js.map +1 -1
  49. package/dist-cjs/dialog/DialogActions.js +14 -9
  50. package/dist-cjs/dialog/DialogActions.js.map +1 -1
  51. package/dist-cjs/dialog/DialogCloseButton.js +17 -10
  52. package/dist-cjs/dialog/DialogCloseButton.js.map +1 -1
  53. package/dist-cjs/dialog/DialogContent.js +14 -9
  54. package/dist-cjs/dialog/DialogContent.js.map +1 -1
  55. package/dist-cjs/dialog/DialogHeader.css.js +1 -1
  56. package/dist-cjs/dialog/DialogHeader.js +60 -52
  57. package/dist-cjs/dialog/DialogHeader.js.map +1 -1
  58. package/dist-cjs/drawer/Drawer.js +16 -11
  59. package/dist-cjs/drawer/Drawer.js.map +1 -1
  60. package/dist-cjs/drawer/DrawerCloseButton.js +14 -9
  61. package/dist-cjs/drawer/DrawerCloseButton.js.map +1 -1
  62. package/dist-cjs/dropdown/Dropdown.js +14 -9
  63. package/dist-cjs/dropdown/Dropdown.js.map +1 -1
  64. package/dist-cjs/file-drop-zone/FileDropZone.js +14 -9
  65. package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
  66. package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +14 -9
  67. package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
  68. package/dist-cjs/flex-item/FlexItem.js +14 -9
  69. package/dist-cjs/flex-item/FlexItem.js.map +1 -1
  70. package/dist-cjs/flex-layout/FlexLayout.js +14 -9
  71. package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
  72. package/dist-cjs/form-field/FormField.js +14 -9
  73. package/dist-cjs/form-field/FormField.js.map +1 -1
  74. package/dist-cjs/form-field/FormFieldHelperText.js +8 -3
  75. package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
  76. package/dist-cjs/form-field/FormFieldLabel.js +9 -4
  77. package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
  78. package/dist-cjs/form-field-context/FormFieldContext.js +14 -9
  79. package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
  80. package/dist-cjs/grid-item/GridItem.js +14 -9
  81. package/dist-cjs/grid-item/GridItem.js.map +1 -1
  82. package/dist-cjs/grid-layout/GridLayout.js +14 -9
  83. package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
  84. package/dist-cjs/index.js +13 -4
  85. package/dist-cjs/index.js.map +1 -1
  86. package/dist-cjs/input/Input.js +14 -9
  87. package/dist-cjs/input/Input.js.map +1 -1
  88. package/dist-cjs/interactable-card/InteractableCard.css.js +6 -0
  89. package/dist-cjs/interactable-card/InteractableCard.js +197 -0
  90. package/dist-cjs/interactable-card/InteractableCard.js.map +1 -0
  91. package/dist-cjs/interactable-card/InteractableCardGroup.css.js +6 -0
  92. package/dist-cjs/interactable-card/InteractableCardGroup.css.js.map +1 -0
  93. package/dist-cjs/interactable-card/InteractableCardGroup.js +228 -0
  94. package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -0
  95. package/dist-cjs/interactable-card/InteractableCardGroupContext.js +103 -0
  96. package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -0
  97. package/dist-cjs/{card → interactable-card}/useInteractableCard.js +5 -2
  98. package/dist-cjs/interactable-card/useInteractableCard.js.map +1 -0
  99. package/dist-cjs/link/Link.js +14 -9
  100. package/dist-cjs/link/Link.js.map +1 -1
  101. package/dist-cjs/link-card/LinkCard.css.js +1 -1
  102. package/dist-cjs/link-card/LinkCard.js +14 -9
  103. package/dist-cjs/link-card/LinkCard.js.map +1 -1
  104. package/dist-cjs/list-control/ListControlContext.js +14 -9
  105. package/dist-cjs/list-control/ListControlContext.js.map +1 -1
  106. package/dist-cjs/list-control/ListControlState.js +14 -9
  107. package/dist-cjs/list-control/ListControlState.js.map +1 -1
  108. package/dist-cjs/multiline-input/MultilineInput.js +14 -9
  109. package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
  110. package/dist-cjs/navigation-item/NavigationItem.js +14 -9
  111. package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
  112. package/dist-cjs/option/Option.js +14 -9
  113. package/dist-cjs/option/Option.js.map +1 -1
  114. package/dist-cjs/option/OptionGroup.js +14 -9
  115. package/dist-cjs/option/OptionGroup.js.map +1 -1
  116. package/dist-cjs/option/OptionList.js +14 -9
  117. package/dist-cjs/option/OptionList.js.map +1 -1
  118. package/dist-cjs/option/OptionListBase.js +14 -9
  119. package/dist-cjs/option/OptionListBase.js.map +1 -1
  120. package/dist-cjs/pagination/CompactInput.js +14 -9
  121. package/dist-cjs/pagination/CompactInput.js.map +1 -1
  122. package/dist-cjs/pagination/CompactPaginator.js +9 -4
  123. package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
  124. package/dist-cjs/pagination/GoToInput.js +8 -3
  125. package/dist-cjs/pagination/GoToInput.js.map +1 -1
  126. package/dist-cjs/pagination/PageButton.js +14 -9
  127. package/dist-cjs/pagination/PageButton.js.map +1 -1
  128. package/dist-cjs/pagination/PageRanges.js +14 -9
  129. package/dist-cjs/pagination/PageRanges.js.map +1 -1
  130. package/dist-cjs/pagination/Pagination.js +14 -9
  131. package/dist-cjs/pagination/Pagination.js.map +1 -1
  132. package/dist-cjs/pagination/Paginator.js +14 -9
  133. package/dist-cjs/pagination/Paginator.js.map +1 -1
  134. package/dist-cjs/panel/Panel.js +14 -9
  135. package/dist-cjs/panel/Panel.js.map +1 -1
  136. package/dist-cjs/pill/Pill.js +14 -9
  137. package/dist-cjs/pill/Pill.js.map +1 -1
  138. package/dist-cjs/pill-input/PillInput.js +14 -9
  139. package/dist-cjs/pill-input/PillInput.js.map +1 -1
  140. package/dist-cjs/progress/CircularProgress/CircularProgress.js +14 -9
  141. package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
  142. package/dist-cjs/progress/LinearProgress/LinearProgress.js +14 -9
  143. package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
  144. package/dist-cjs/radio-button/RadioButton.js +14 -9
  145. package/dist-cjs/radio-button/RadioButton.js.map +1 -1
  146. package/dist-cjs/radio-button/RadioButtonGroup.js +14 -9
  147. package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
  148. package/dist-cjs/radio-button/RadioButtonIcon.js +14 -9
  149. package/dist-cjs/radio-button/RadioButtonIcon.js.map +1 -1
  150. package/dist-cjs/radio-button/internal/RadioGroupContext.js +14 -9
  151. package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
  152. package/dist-cjs/salt-provider/SaltProvider.js +14 -9
  153. package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
  154. package/dist-cjs/scrim/Scrim.js +14 -9
  155. package/dist-cjs/scrim/Scrim.js.map +1 -1
  156. package/dist-cjs/segmented-button-group/SegmentedButtonGroup.css.js +6 -0
  157. package/dist-cjs/segmented-button-group/SegmentedButtonGroup.css.js.map +1 -0
  158. package/dist-cjs/{card/InteractableCard.js → segmented-button-group/SegmentedButtonGroup.js} +26 -53
  159. package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js.map +1 -0
  160. package/dist-cjs/spinner/Spinner.js +14 -9
  161. package/dist-cjs/spinner/Spinner.js.map +1 -1
  162. package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js +14 -9
  163. package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
  164. package/dist-cjs/split-layout/SplitLayout.js +14 -9
  165. package/dist-cjs/split-layout/SplitLayout.js.map +1 -1
  166. package/dist-cjs/stack-layout/StackLayout.js +14 -9
  167. package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
  168. package/dist-cjs/status-adornment/StatusAdornment.js +14 -9
  169. package/dist-cjs/status-adornment/StatusAdornment.js.map +1 -1
  170. package/dist-cjs/status-indicator/StatusIndicator.js +13 -8
  171. package/dist-cjs/status-indicator/StatusIndicator.js.map +1 -1
  172. package/dist-cjs/switch/Switch.js +15 -9
  173. package/dist-cjs/switch/Switch.js.map +1 -1
  174. package/dist-cjs/text/Code.js +21 -0
  175. package/dist-cjs/text/Code.js.map +1 -0
  176. package/dist-cjs/text/Text.css.js +1 -1
  177. package/dist-cjs/text/Text.js +13 -8
  178. package/dist-cjs/text/Text.js.map +1 -1
  179. package/dist-cjs/toast/Toast.js +13 -8
  180. package/dist-cjs/toast/Toast.js.map +1 -1
  181. package/dist-cjs/toast/ToastContent.js +14 -9
  182. package/dist-cjs/toast/ToastContent.js.map +1 -1
  183. package/dist-cjs/toggle-button/ToggleButton.js +14 -9
  184. package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
  185. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +14 -9
  186. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
  187. package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +14 -9
  188. package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
  189. package/dist-cjs/tooltip/Tooltip.js +13 -8
  190. package/dist-cjs/tooltip/Tooltip.js.map +1 -1
  191. package/dist-cjs/tooltip/TooltipBase.js +13 -8
  192. package/dist-cjs/tooltip/TooltipBase.js.map +1 -1
  193. package/dist-cjs/tooltip/useAriaAnnounce.js +14 -9
  194. package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
  195. package/dist-cjs/tooltip/useTooltip.js +14 -9
  196. package/dist-cjs/tooltip/useTooltip.js.map +1 -1
  197. package/dist-cjs/utils/useValueEffect.js +14 -9
  198. package/dist-cjs/utils/useValueEffect.js.map +1 -1
  199. package/dist-cjs/viewport/ViewportProvider.js +14 -9
  200. package/dist-cjs/viewport/ViewportProvider.js.map +1 -1
  201. package/dist-es/accordion/Accordion.js +14 -9
  202. package/dist-es/accordion/Accordion.js.map +1 -1
  203. package/dist-es/accordion/AccordionContext.js +14 -9
  204. package/dist-es/accordion/AccordionContext.js.map +1 -1
  205. package/dist-es/accordion/AccordionGroup.js +14 -9
  206. package/dist-es/accordion/AccordionGroup.js.map +1 -1
  207. package/dist-es/accordion/AccordionHeader.js +13 -8
  208. package/dist-es/accordion/AccordionHeader.js.map +1 -1
  209. package/dist-es/accordion/AccordionPanel.js +14 -9
  210. package/dist-es/accordion/AccordionPanel.js.map +1 -1
  211. package/dist-es/aria-announcer/useAriaAnnouncer.js +14 -9
  212. package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
  213. package/dist-es/avatar/Avatar.js +14 -9
  214. package/dist-es/avatar/Avatar.js.map +1 -1
  215. package/dist-es/avatar/useAvatarImage.js +14 -9
  216. package/dist-es/avatar/useAvatarImage.js.map +1 -1
  217. package/dist-es/badge/Badge.js +14 -9
  218. package/dist-es/badge/Badge.js.map +1 -1
  219. package/dist-es/banner/Banner.js +14 -9
  220. package/dist-es/banner/Banner.js.map +1 -1
  221. package/dist-es/banner/BannerActions.js +14 -9
  222. package/dist-es/banner/BannerActions.js.map +1 -1
  223. package/dist-es/banner/BannerContent.js +14 -9
  224. package/dist-es/banner/BannerContent.js.map +1 -1
  225. package/dist-es/border-item/BorderItem.js +14 -9
  226. package/dist-es/border-item/BorderItem.js.map +1 -1
  227. package/dist-es/border-layout/BorderLayout.js +14 -9
  228. package/dist-es/border-layout/BorderLayout.js.map +1 -1
  229. package/dist-es/button/Button.js +14 -9
  230. package/dist-es/button/Button.js.map +1 -1
  231. package/dist-es/card/Card.css.js +1 -1
  232. package/dist-es/card/Card.js +14 -9
  233. package/dist-es/card/Card.js.map +1 -1
  234. package/dist-es/checkbox/Checkbox.js +14 -9
  235. package/dist-es/checkbox/Checkbox.js.map +1 -1
  236. package/dist-es/checkbox/CheckboxGroup.js +14 -9
  237. package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
  238. package/dist-es/checkbox/CheckboxIcon.js +14 -9
  239. package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
  240. package/dist-es/checkbox/internal/CheckboxGroupContext.js +14 -9
  241. package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
  242. package/dist-es/combo-box/ComboBox.js +14 -9
  243. package/dist-es/combo-box/ComboBox.js.map +1 -1
  244. package/dist-es/combo-box/useComboBox.js +14 -9
  245. package/dist-es/combo-box/useComboBox.js.map +1 -1
  246. package/dist-es/dialog/Dialog.js +16 -11
  247. package/dist-es/dialog/Dialog.js.map +1 -1
  248. package/dist-es/dialog/DialogActions.js +14 -9
  249. package/dist-es/dialog/DialogActions.js.map +1 -1
  250. package/dist-es/dialog/DialogCloseButton.js +17 -10
  251. package/dist-es/dialog/DialogCloseButton.js.map +1 -1
  252. package/dist-es/dialog/DialogContent.js +14 -9
  253. package/dist-es/dialog/DialogContent.js.map +1 -1
  254. package/dist-es/dialog/DialogHeader.css.js +1 -1
  255. package/dist-es/dialog/DialogHeader.js +60 -52
  256. package/dist-es/dialog/DialogHeader.js.map +1 -1
  257. package/dist-es/drawer/Drawer.js +16 -11
  258. package/dist-es/drawer/Drawer.js.map +1 -1
  259. package/dist-es/drawer/DrawerCloseButton.js +14 -9
  260. package/dist-es/drawer/DrawerCloseButton.js.map +1 -1
  261. package/dist-es/dropdown/Dropdown.js +14 -9
  262. package/dist-es/dropdown/Dropdown.js.map +1 -1
  263. package/dist-es/file-drop-zone/FileDropZone.js +14 -9
  264. package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
  265. package/dist-es/file-drop-zone/FileDropZoneTrigger.js +14 -9
  266. package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
  267. package/dist-es/flex-item/FlexItem.js +14 -9
  268. package/dist-es/flex-item/FlexItem.js.map +1 -1
  269. package/dist-es/flex-layout/FlexLayout.js +14 -9
  270. package/dist-es/flex-layout/FlexLayout.js.map +1 -1
  271. package/dist-es/form-field/FormField.js +14 -9
  272. package/dist-es/form-field/FormField.js.map +1 -1
  273. package/dist-es/form-field/FormFieldHelperText.js +8 -3
  274. package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
  275. package/dist-es/form-field/FormFieldLabel.js +9 -4
  276. package/dist-es/form-field/FormFieldLabel.js.map +1 -1
  277. package/dist-es/form-field-context/FormFieldContext.js +14 -9
  278. package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
  279. package/dist-es/grid-item/GridItem.js +14 -9
  280. package/dist-es/grid-item/GridItem.js.map +1 -1
  281. package/dist-es/grid-layout/GridLayout.js +14 -9
  282. package/dist-es/grid-layout/GridLayout.js.map +1 -1
  283. package/dist-es/index.js +6 -2
  284. package/dist-es/index.js.map +1 -1
  285. package/dist-es/input/Input.js +14 -9
  286. package/dist-es/input/Input.js.map +1 -1
  287. package/dist-es/interactable-card/InteractableCard.css.js +4 -0
  288. package/dist-es/interactable-card/InteractableCard.js +193 -0
  289. package/dist-es/interactable-card/InteractableCard.js.map +1 -0
  290. package/dist-es/interactable-card/InteractableCardGroup.css.js +4 -0
  291. package/dist-es/interactable-card/InteractableCardGroup.css.js.map +1 -0
  292. package/dist-es/interactable-card/InteractableCardGroup.js +224 -0
  293. package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -0
  294. package/dist-es/interactable-card/InteractableCardGroupContext.js +98 -0
  295. package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -0
  296. package/dist-es/{card → interactable-card}/useInteractableCard.js +5 -2
  297. package/dist-es/interactable-card/useInteractableCard.js.map +1 -0
  298. package/dist-es/link/Link.js +14 -9
  299. package/dist-es/link/Link.js.map +1 -1
  300. package/dist-es/link-card/LinkCard.css.js +1 -1
  301. package/dist-es/link-card/LinkCard.js +14 -9
  302. package/dist-es/link-card/LinkCard.js.map +1 -1
  303. package/dist-es/list-control/ListControlContext.js +14 -9
  304. package/dist-es/list-control/ListControlContext.js.map +1 -1
  305. package/dist-es/list-control/ListControlState.js +14 -9
  306. package/dist-es/list-control/ListControlState.js.map +1 -1
  307. package/dist-es/multiline-input/MultilineInput.js +14 -9
  308. package/dist-es/multiline-input/MultilineInput.js.map +1 -1
  309. package/dist-es/navigation-item/NavigationItem.js +14 -9
  310. package/dist-es/navigation-item/NavigationItem.js.map +1 -1
  311. package/dist-es/option/Option.js +14 -9
  312. package/dist-es/option/Option.js.map +1 -1
  313. package/dist-es/option/OptionGroup.js +14 -9
  314. package/dist-es/option/OptionGroup.js.map +1 -1
  315. package/dist-es/option/OptionList.js +14 -9
  316. package/dist-es/option/OptionList.js.map +1 -1
  317. package/dist-es/option/OptionListBase.js +14 -9
  318. package/dist-es/option/OptionListBase.js.map +1 -1
  319. package/dist-es/pagination/CompactInput.js +14 -9
  320. package/dist-es/pagination/CompactInput.js.map +1 -1
  321. package/dist-es/pagination/CompactPaginator.js +9 -4
  322. package/dist-es/pagination/CompactPaginator.js.map +1 -1
  323. package/dist-es/pagination/GoToInput.js +8 -3
  324. package/dist-es/pagination/GoToInput.js.map +1 -1
  325. package/dist-es/pagination/PageButton.js +14 -9
  326. package/dist-es/pagination/PageButton.js.map +1 -1
  327. package/dist-es/pagination/PageRanges.js +14 -9
  328. package/dist-es/pagination/PageRanges.js.map +1 -1
  329. package/dist-es/pagination/Pagination.js +14 -9
  330. package/dist-es/pagination/Pagination.js.map +1 -1
  331. package/dist-es/pagination/Paginator.js +14 -9
  332. package/dist-es/pagination/Paginator.js.map +1 -1
  333. package/dist-es/panel/Panel.js +14 -9
  334. package/dist-es/panel/Panel.js.map +1 -1
  335. package/dist-es/pill/Pill.js +14 -9
  336. package/dist-es/pill/Pill.js.map +1 -1
  337. package/dist-es/pill-input/PillInput.js +14 -9
  338. package/dist-es/pill-input/PillInput.js.map +1 -1
  339. package/dist-es/progress/CircularProgress/CircularProgress.js +14 -9
  340. package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
  341. package/dist-es/progress/LinearProgress/LinearProgress.js +14 -9
  342. package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
  343. package/dist-es/radio-button/RadioButton.js +14 -9
  344. package/dist-es/radio-button/RadioButton.js.map +1 -1
  345. package/dist-es/radio-button/RadioButtonGroup.js +14 -9
  346. package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
  347. package/dist-es/radio-button/RadioButtonIcon.js +14 -9
  348. package/dist-es/radio-button/RadioButtonIcon.js.map +1 -1
  349. package/dist-es/radio-button/internal/RadioGroupContext.js +14 -9
  350. package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
  351. package/dist-es/salt-provider/SaltProvider.js +14 -9
  352. package/dist-es/salt-provider/SaltProvider.js.map +1 -1
  353. package/dist-es/scrim/Scrim.js +14 -9
  354. package/dist-es/scrim/Scrim.js.map +1 -1
  355. package/dist-es/segmented-button-group/SegmentedButtonGroup.css.js +4 -0
  356. package/dist-es/segmented-button-group/SegmentedButtonGroup.css.js.map +1 -0
  357. package/dist-es/{card/InteractableCard.js → segmented-button-group/SegmentedButtonGroup.js} +25 -52
  358. package/dist-es/segmented-button-group/SegmentedButtonGroup.js.map +1 -0
  359. package/dist-es/spinner/Spinner.js +14 -9
  360. package/dist-es/spinner/Spinner.js.map +1 -1
  361. package/dist-es/spinner/svgSpinners/SpinnerSVG.js +14 -9
  362. package/dist-es/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
  363. package/dist-es/split-layout/SplitLayout.js +14 -9
  364. package/dist-es/split-layout/SplitLayout.js.map +1 -1
  365. package/dist-es/stack-layout/StackLayout.js +14 -9
  366. package/dist-es/stack-layout/StackLayout.js.map +1 -1
  367. package/dist-es/status-adornment/StatusAdornment.js +14 -9
  368. package/dist-es/status-adornment/StatusAdornment.js.map +1 -1
  369. package/dist-es/status-indicator/StatusIndicator.js +13 -8
  370. package/dist-es/status-indicator/StatusIndicator.js.map +1 -1
  371. package/dist-es/switch/Switch.js +15 -9
  372. package/dist-es/switch/Switch.js.map +1 -1
  373. package/dist-es/text/Code.js +17 -0
  374. package/dist-es/text/Code.js.map +1 -0
  375. package/dist-es/text/Text.css.js +1 -1
  376. package/dist-es/text/Text.js +13 -8
  377. package/dist-es/text/Text.js.map +1 -1
  378. package/dist-es/toast/Toast.js +13 -8
  379. package/dist-es/toast/Toast.js.map +1 -1
  380. package/dist-es/toast/ToastContent.js +14 -9
  381. package/dist-es/toast/ToastContent.js.map +1 -1
  382. package/dist-es/toggle-button/ToggleButton.js +14 -9
  383. package/dist-es/toggle-button/ToggleButton.js.map +1 -1
  384. package/dist-es/toggle-button-group/ToggleButtonGroup.js +14 -9
  385. package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
  386. package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +14 -9
  387. package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
  388. package/dist-es/tooltip/Tooltip.js +13 -8
  389. package/dist-es/tooltip/Tooltip.js.map +1 -1
  390. package/dist-es/tooltip/TooltipBase.js +13 -8
  391. package/dist-es/tooltip/TooltipBase.js.map +1 -1
  392. package/dist-es/tooltip/useAriaAnnounce.js +14 -9
  393. package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
  394. package/dist-es/tooltip/useTooltip.js +14 -9
  395. package/dist-es/tooltip/useTooltip.js.map +1 -1
  396. package/dist-es/utils/useValueEffect.js +14 -9
  397. package/dist-es/utils/useValueEffect.js.map +1 -1
  398. package/dist-es/viewport/ViewportProvider.js +14 -9
  399. package/dist-es/viewport/ViewportProvider.js.map +1 -1
  400. package/dist-types/card/index.d.ts +0 -1
  401. package/dist-types/dialog/DialogHeader.d.ts +1 -1
  402. package/dist-types/index.d.ts +2 -0
  403. package/dist-types/{card → interactable-card}/InteractableCard.d.ts +15 -1
  404. package/dist-types/interactable-card/InteractableCardGroup.d.ts +27 -0
  405. package/dist-types/interactable-card/InteractableCardGroupContext.d.ts +12 -0
  406. package/dist-types/interactable-card/index.d.ts +3 -0
  407. package/dist-types/segmented-button-group/SegmentedButtonGroup.d.ts +4 -0
  408. package/dist-types/segmented-button-group/index.d.ts +1 -0
  409. package/dist-types/text/Code.d.ts +2 -0
  410. package/dist-types/text/Text.d.ts +1 -1
  411. package/dist-types/text/index.d.ts +2 -1
  412. package/package.json +2 -2
  413. package/dist-cjs/card/InteractableCard.css.js +0 -6
  414. package/dist-cjs/card/InteractableCard.js.map +0 -1
  415. package/dist-cjs/card/useInteractableCard.js.map +0 -1
  416. package/dist-es/card/InteractableCard.css.js +0 -4
  417. package/dist-es/card/InteractableCard.js.map +0 -1
  418. package/dist-es/card/useInteractableCard.js.map +0 -1
  419. /package/dist-cjs/{card → interactable-card}/InteractableCard.css.js.map +0 -0
  420. /package/dist-es/{card → interactable-card}/InteractableCard.css.js.map +0 -0
  421. /package/dist-types/{card → interactable-card}/useInteractableCard.d.ts +0 -0
@@ -21,22 +21,16 @@ import '../border-item/BorderItem.js';
21
21
  import '../border-layout/BorderLayout.js';
22
22
  import '../button/Button.js';
23
23
  import '../card/Card.js';
24
- import '../card/InteractableCard.js';
25
24
  import '../checkbox/Checkbox.js';
26
25
  import '../checkbox/CheckboxGroup.js';
27
26
  import { useComponentCssInjection } from '@salt-ds/styles';
28
27
  import { useWindow } from '@salt-ds/window';
29
28
  import '../combo-box/ComboBox.js';
30
29
  import '../dialog/Dialog.js';
31
- import '../text/Text.js';
32
- import '../text/Display.js';
33
- import '../text/Headings.js';
34
- import '../text/Label.js';
35
- import '../text/TextNotation.js';
36
- import '../text/TextAction.js';
37
- import '../dialog/DialogContext.js';
30
+ import '../dialog/DialogHeader.js';
38
31
  import '../dialog/DialogActions.js';
39
32
  import '../dialog/DialogContent.js';
33
+ import '../dialog/DialogContext.js';
40
34
  import '../dialog/DialogCloseButton.js';
41
35
  import '../drawer/Drawer.js';
42
36
  import '../drawer/DrawerCloseButton.js';
@@ -48,10 +42,20 @@ import '../flex-item/FlexItem.js';
48
42
  import '../flex-layout/FlexLayout.js';
49
43
  import '../flow-layout/FlowLayout.js';
50
44
  import '../form-field/FormField.js';
45
+ import '../text/Text.js';
46
+ import '../text/Code.js';
47
+ import '../text/Display.js';
48
+ import '../text/Headings.js';
49
+ import '../text/Label.js';
50
+ import '../text/TextAction.js';
51
+ import '../text/TextNotation.js';
51
52
  import '../form-field-context/FormFieldContext.js';
52
53
  import '../grid-item/GridItem.js';
53
54
  import '../grid-layout/GridLayout.js';
54
55
  import '../input/Input.js';
56
+ import '../interactable-card/InteractableCard.js';
57
+ import '../interactable-card/InteractableCardGroup.js';
58
+ import '../interactable-card/InteractableCardGroupContext.js';
55
59
  import '../link/Link.js';
56
60
  import '../link-card/LinkCard.js';
57
61
  import '../list-control/ListControlContext.js';
@@ -71,6 +75,7 @@ import '../progress/LinearProgress/LinearProgress.js';
71
75
  import '../radio-button/RadioButton.js';
72
76
  import '../radio-button/RadioButtonGroup.js';
73
77
  import '../scrim/Scrim.js';
78
+ import '../segmented-button-group/SegmentedButtonGroup.js';
74
79
  import '../spinner/Spinner.js';
75
80
  import '../stack-layout/StackLayout.js';
76
81
  import '../status-adornment/StatusAdornment.js';
@@ -1 +1 @@
1
- {"version":3,"file":"StatusIndicator.js","sources":["../src/status-indicator/StatusIndicator.tsx"],"sourcesContent":["import {\n DEFAULT_ICON_SIZE,\n ErrorSolidIcon,\n IconProps,\n InfoSolidIcon,\n SuccessTickIcon,\n WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { ValidationStatus } from \"./ValidationStatus\";\n\nimport statusIndicatorCss from \"./StatusIndicator.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst icons = {\n error: ErrorSolidIcon,\n success: SuccessTickIcon,\n warning: WarningSolidIcon,\n info: InfoSolidIcon,\n};\n\nexport interface StatusIndicatorProps extends IconProps {\n /**\n * Status indicator to be displayed.\n */\n status: ValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<ValidationStatus, string> = {\n error: \"error\",\n success: \"success\",\n warning: \"warning\",\n info: \"info\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusIndicator\");\n\nexport const StatusIndicator = forwardRef<SVGSVGElement, StatusIndicatorProps>(\n function StatusIndicator(\n { className, status, size = DEFAULT_ICON_SIZE, ...restProps },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-status-indicator\",\n css: statusIndicatorCss,\n window: targetWindow,\n });\n\n const IconComponent = icons[status];\n const ariaLabel = statusToAriaLabelMap[status];\n\n return (\n <IconComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n size={size}\n aria-label={ariaLabel}\n {...restProps}\n ref={ref}\n />\n );\n }\n);\n"],"names":["StatusIndicator","statusIndicatorCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,KAAQ,GAAA;AAAA,EACZ,KAAO,EAAA,cAAA;AAAA,EACP,OAAS,EAAA,eAAA;AAAA,EACT,OAAS,EAAA,gBAAA;AAAA,EACT,IAAM,EAAA,aAAA;AACR,CAAA,CAAA;AASA,MAAM,oBAAyD,GAAA;AAAA,EAC7D,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA,MAAA;AACR,CAAA,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,eAAkB,GAAA,UAAA;AAAA,EAC7B,SAASA,iBACP,EAAE,SAAA,EAAW,QAAQ,IAAO,GAAA,iBAAA,EAAA,GAAsB,SAAU,EAAA,EAC5D,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,uBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,gBAAgB,KAAM,CAAA,MAAA,CAAA,CAAA;AAC5B,IAAA,MAAM,YAAY,oBAAqB,CAAA,MAAA,CAAA,CAAA;AAEvC,IAAA,uBACG,GAAA,CAAA,aAAA,EAAA;AAAA,MACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,IAAA;AAAA,MACA,YAAY,EAAA,SAAA;AAAA,MACX,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"StatusIndicator.js","sources":["../src/status-indicator/StatusIndicator.tsx"],"sourcesContent":["import {\n DEFAULT_ICON_SIZE,\n ErrorSolidIcon,\n IconProps,\n InfoSolidIcon,\n SuccessTickIcon,\n WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { ValidationStatus } from \"./ValidationStatus\";\n\nimport statusIndicatorCss from \"./StatusIndicator.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst icons = {\n error: ErrorSolidIcon,\n success: SuccessTickIcon,\n warning: WarningSolidIcon,\n info: InfoSolidIcon,\n};\n\nexport interface StatusIndicatorProps extends IconProps {\n /**\n * Status indicator to be displayed.\n */\n status: ValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<ValidationStatus, string> = {\n error: \"error\",\n success: \"success\",\n warning: \"warning\",\n info: \"info\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusIndicator\");\n\nexport const StatusIndicator = forwardRef<SVGSVGElement, StatusIndicatorProps>(\n function StatusIndicator(\n { className, status, size = DEFAULT_ICON_SIZE, ...restProps },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-status-indicator\",\n css: statusIndicatorCss,\n window: targetWindow,\n });\n\n const IconComponent = icons[status];\n const ariaLabel = statusToAriaLabelMap[status];\n\n return (\n <IconComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n size={size}\n aria-label={ariaLabel}\n {...restProps}\n ref={ref}\n />\n );\n }\n);\n"],"names":["StatusIndicator","statusIndicatorCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,KAAQ,GAAA;AAAA,EACZ,KAAO,EAAA,cAAA;AAAA,EACP,OAAS,EAAA,eAAA;AAAA,EACT,OAAS,EAAA,gBAAA;AAAA,EACT,IAAM,EAAA,aAAA;AACR,CAAA,CAAA;AASA,MAAM,oBAAyD,GAAA;AAAA,EAC7D,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA,MAAA;AACR,CAAA,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,eAAkB,GAAA,UAAA;AAAA,EAC7B,SAASA,iBACP,EAAE,SAAA,EAAW,QAAQ,IAAO,GAAA,iBAAA,EAAA,GAAsB,SAAU,EAAA,EAC5D,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,uBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,gBAAgB,KAAM,CAAA,MAAA,CAAA,CAAA;AAC5B,IAAA,MAAM,YAAY,oBAAqB,CAAA,MAAA,CAAA,CAAA;AAEvC,IAAA,uBACG,GAAA,CAAA,aAAA,EAAA;AAAA,MACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,IAAA;AAAA,MACA,YAAY,EAAA,SAAA;AAAA,MACX,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -23,7 +23,6 @@ import '../border-item/BorderItem.js';
23
23
  import '../border-layout/BorderLayout.js';
24
24
  import '../button/Button.js';
25
25
  import '../card/Card.js';
26
- import '../card/InteractableCard.js';
27
26
  import '../checkbox/Checkbox.js';
28
27
  import '../checkbox/CheckboxGroup.js';
29
28
  import { useComponentCssInjection } from '@salt-ds/styles';
@@ -31,16 +30,10 @@ import { useWindow } from '@salt-ds/window';
31
30
  import { SuccessSmallSolidIcon, SuccessSolidIcon } from '@salt-ds/icons';
32
31
  import '../combo-box/ComboBox.js';
33
32
  import '../dialog/Dialog.js';
34
- import '../status-indicator/StatusIndicator.js';
35
- import '../text/Text.js';
36
- import '../text/Display.js';
37
- import '../text/Headings.js';
38
- import '../text/Label.js';
39
- import '../text/TextNotation.js';
40
- import '../text/TextAction.js';
41
- import '../dialog/DialogContext.js';
33
+ import '../dialog/DialogHeader.js';
42
34
  import '../dialog/DialogActions.js';
43
35
  import '../dialog/DialogContent.js';
36
+ import '../dialog/DialogContext.js';
44
37
  import '../dialog/DialogCloseButton.js';
45
38
  import '../drawer/Drawer.js';
46
39
  import '../drawer/DrawerCloseButton.js';
@@ -52,9 +45,20 @@ import '../flex-item/FlexItem.js';
52
45
  import '../flex-layout/FlexLayout.js';
53
46
  import '../flow-layout/FlowLayout.js';
54
47
  import '../form-field/FormField.js';
48
+ import '../status-indicator/StatusIndicator.js';
49
+ import '../text/Text.js';
50
+ import '../text/Code.js';
51
+ import '../text/Display.js';
52
+ import '../text/Headings.js';
53
+ import '../text/Label.js';
54
+ import '../text/TextAction.js';
55
+ import '../text/TextNotation.js';
55
56
  import '../grid-item/GridItem.js';
56
57
  import '../grid-layout/GridLayout.js';
57
58
  import '../input/Input.js';
59
+ import '../interactable-card/InteractableCard.js';
60
+ import '../interactable-card/InteractableCardGroup.js';
61
+ import '../interactable-card/InteractableCardGroupContext.js';
58
62
  import '../link/Link.js';
59
63
  import '../link-card/LinkCard.js';
60
64
  import '../list-control/ListControlContext.js';
@@ -74,6 +78,7 @@ import '../progress/LinearProgress/LinearProgress.js';
74
78
  import '../radio-button/RadioButton.js';
75
79
  import '../radio-button/RadioButtonGroup.js';
76
80
  import '../scrim/Scrim.js';
81
+ import '../segmented-button-group/SegmentedButtonGroup.js';
77
82
  import '../spinner/Spinner.js';
78
83
  import '../stack-layout/StackLayout.js';
79
84
  import '../status-adornment/StatusAdornment.js';
@@ -172,6 +177,7 @@ const Switch = forwardRef(function Switch2(props, ref) {
172
177
  onChange: handleChange,
173
178
  onFocus,
174
179
  type: "checkbox",
180
+ role: "switch",
175
181
  ...restInputProps
176
182
  }),
177
183
  /* @__PURE__ */ jsx("span", {
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n FocusEventHandler,\n forwardRef,\n ReactNode,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useDensity } from \"../salt-provider\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport switchCss from \"./Switch.css\";\nimport {\n IconProps,\n SuccessSmallSolidIcon,\n SuccessSolidIcon,\n} from \"@salt-ds/icons\";\n\nexport interface SwitchProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"children\" | \"onFocus\" | \"onBlur\" | \"onChange\"\n > {\n /**\n * If `true`, the checkbox will be checked.\n */\n checked?: boolean;\n /**\n * Whether the checkbox component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the checkbox will be disabled.\n */\n disabled?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<ComponentPropsWithoutRef<\"input\">>;\n /**\n * The label to be shown next to the checkbox.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when checkbox loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when checkbox gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the checkbox.\n */\n value?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nfunction CheckedIcon(props: IconProps) {\n const density = useDensity();\n return density === \"high\" ? (\n <SuccessSmallSolidIcon {...props} />\n ) : (\n <SuccessSolidIcon {...props} />\n );\n}\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(function Switch(\n props,\n ref\n) {\n const {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n inputProps = {},\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-switch\",\n css: switchCss,\n window: targetWindow,\n });\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const [checked, setChecked] = useControlled({\n controlled: checkedProp,\n default: Boolean(defaultChecked),\n name: \"Switch\",\n state: \"checked\",\n });\n\n const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } =\n useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"checked\")]: checked,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={clsx(\n formFieldA11yProps?.[\"aria-describedby\"],\n inputDescribedBy\n )}\n aria-labelledby={clsx(\n formFieldA11yProps?.[\"aria-labelledby\"],\n inputLabelledBy\n )}\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n defaultChecked={defaultChecked}\n disabled={disabled}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n {...restInputProps}\n />\n <span className={withBaseName(\"track\")}>\n <span className={withBaseName(\"thumb\")}>\n {checked && (\n <CheckedIcon aria-hidden className={withBaseName(\"icon\")} />\n )}\n </span>\n </span>\n <span className={withBaseName(\"label\")}>{label}</span>\n </label>\n );\n});\n"],"names":["Switch","switchCss","value"],"mappings":"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"}
1
+ {"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n FocusEventHandler,\n forwardRef,\n ReactNode,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useDensity } from \"../salt-provider\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport switchCss from \"./Switch.css\";\nimport {\n IconProps,\n SuccessSmallSolidIcon,\n SuccessSolidIcon,\n} from \"@salt-ds/icons\";\n\nexport interface SwitchProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"children\" | \"onFocus\" | \"onBlur\" | \"onChange\"\n > {\n /**\n * If `true`, the checkbox will be checked.\n */\n checked?: boolean;\n /**\n * Whether the checkbox component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the checkbox will be disabled.\n */\n disabled?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<ComponentPropsWithoutRef<\"input\">>;\n /**\n * The label to be shown next to the checkbox.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when checkbox loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when checkbox gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the checkbox.\n */\n value?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nfunction CheckedIcon(props: IconProps) {\n const density = useDensity();\n return density === \"high\" ? (\n <SuccessSmallSolidIcon {...props} />\n ) : (\n <SuccessSolidIcon {...props} />\n );\n}\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(function Switch(\n props,\n ref\n) {\n const {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n inputProps = {},\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-switch\",\n css: switchCss,\n window: targetWindow,\n });\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const [checked, setChecked] = useControlled({\n controlled: checkedProp,\n default: Boolean(defaultChecked),\n name: \"Switch\",\n state: \"checked\",\n });\n\n const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } =\n useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"checked\")]: checked,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={clsx(\n formFieldA11yProps?.[\"aria-describedby\"],\n inputDescribedBy\n )}\n aria-labelledby={clsx(\n formFieldA11yProps?.[\"aria-labelledby\"],\n inputLabelledBy\n )}\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n defaultChecked={defaultChecked}\n disabled={disabled}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n role=\"switch\"\n {...restInputProps}\n />\n <span className={withBaseName(\"track\")}>\n <span className={withBaseName(\"thumb\")}>\n {checked && (\n <CheckedIcon aria-hidden className={withBaseName(\"icon\")} />\n )}\n </span>\n </span>\n <span className={withBaseName(\"label\")}>{label}</span>\n </label>\n );\n});\n"],"names":["Switch","switchCss","value"],"mappings":"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"}
@@ -0,0 +1,17 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { forwardRef } from 'react';
3
+ import { Text } from './Text.js';
4
+
5
+ const Code = forwardRef(
6
+ function TextAction({ children, className, ...rest }, ref) {
7
+ return /* @__PURE__ */ jsx(Text, {
8
+ as: "code",
9
+ ref,
10
+ ...rest,
11
+ children
12
+ });
13
+ }
14
+ );
15
+
16
+ export { Code };
17
+ //# sourceMappingURL=Code.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Code.js","sources":["../src/text/Code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, TextProps } from \"./Text\";\n\nexport const Code = forwardRef<HTMLSpanElement, Omit<TextProps<\"code\">, \"as\">>(\n function TextAction({ children, className, ...rest }, ref) {\n return (\n <Text as=\"code\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n }\n);\n"],"names":[],"mappings":";;;;AAGO,MAAM,IAAO,GAAA,UAAA;AAAA,EAClB,SAAS,UAAW,CAAA,EAAE,UAAU,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACzD,IAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,MAAK,EAAG,EAAA,MAAA;AAAA,MAAO,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAC3B,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,4 +1,4 @@
1
- var css_248z = "/* Main css class. Style for body text */\n.saltText {\n color: var(--saltText-color, var(--text-color));\n font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n font-size: var(--saltText-fontSize, var(--salt-text-fontSize));\n line-height: var(--saltText-lineHeight, var(--salt-text-lineHeight));\n font-weight: var(--saltText-fontWeight, var(--salt-text-fontWeight));\n}\n\n.saltText::selection {\n background: var(--saltText-highlight, var(--salt-content-foreground-highlight));\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--text-max-rows, 0);\n overflow: hidden;\n word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n --text-color: var(--salt-content-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n --text-color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n --text-color: var(--salt-content-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n --text-color: var(--salt-content-secondary-foreground-disabled);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Body emphasis small */\n.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Notation */\n.saltText-notation.saltText {\n font-family: var(--salt-text-notation-fontFamily);\n font-size: var(--salt-text-notation-fontSize);\n line-height: var(--salt-text-notation-lineHeight);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Notation emphasis strong */\n.saltText-notation.saltText strong {\n font-weight: var(--salt-text-notation-fontWeight-strong);\n}\n\n/* Notation emphasis small */\n.saltText-notation.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-notation-fontWeight-small);\n}\n\n/* Action */\n.saltText-action.saltText {\n letter-spacing: var(--salt-text-action-letterSpacing);\n text-transform: var(--salt-text-action-textTransform);\n text-align: var(--salt-text-action-textAlign);\n font-weight: var(--salt-text-action-fontWeight);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n font-family: var(--salt-text-display1-fontFamily);\n font-size: var(--salt-text-display1-fontSize);\n font-weight: var(--salt-text-display1-fontWeight);\n line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n font-family: var(--salt-text-display2-fontFamily);\n font-size: var(--salt-text-display2-fontSize);\n font-weight: var(--salt-text-display2-fontWeight);\n line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n font-family: var(--salt-text-display3-fontFamily);\n font-size: var(--salt-text-display3-fontSize);\n font-weight: var(--salt-text-display3-fontWeight);\n line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n font-family: var(--salt-text-h1-fontFamily);\n font-size: var(--salt-text-h1-fontSize);\n font-weight: var(--salt-text-h1-fontWeight);\n line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n font-family: var(--salt-text-h2-fontFamily);\n font-size: var(--salt-text-h2-fontSize);\n font-weight: var(--salt-text-h2-fontWeight);\n line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n font-family: var(--salt-text-h3-fontFamily);\n font-size: var(--salt-text-h3-fontSize);\n font-weight: var(--salt-text-h3-fontWeight);\n line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n font-family: var(--salt-text-h4-fontFamily);\n font-size: var(--salt-text-h4-fontSize);\n font-weight: var(--salt-text-h4-fontWeight);\n line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n font-family: var(--salt-text-label-fontFamily);\n font-size: var(--salt-text-label-fontSize);\n line-height: var(--salt-text-label-lineHeight);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n font-weight: var(--salt-text-label-fontWeight-strong);\n}\n\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n";
1
+ var css_248z = "/* Main css class. Style for body text */\n.saltText {\n color: var(--saltText-color, var(--text-color));\n font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n font-size: var(--saltText-fontSize, var(--salt-text-fontSize));\n line-height: var(--saltText-lineHeight, var(--salt-text-lineHeight));\n font-weight: var(--saltText-fontWeight, var(--salt-text-fontWeight));\n}\n\n.saltText::selection {\n background: var(--saltText-highlight, var(--salt-content-foreground-highlight));\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--text-max-rows, 0);\n overflow: hidden;\n word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n --text-color: var(--salt-content-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n --text-color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n --text-color: var(--salt-content-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n --text-color: var(--salt-content-secondary-foreground-disabled);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Body emphasis small */\n.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Notation */\n.saltText-notation.saltText {\n font-family: var(--salt-text-notation-fontFamily);\n font-size: var(--salt-text-notation-fontSize);\n line-height: var(--salt-text-notation-lineHeight);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Notation emphasis strong */\n.saltText-notation.saltText strong {\n font-weight: var(--salt-text-notation-fontWeight-strong);\n}\n\n/* Notation emphasis small */\n.saltText-notation.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-notation-fontWeight-small);\n}\n\n/* Action */\n.saltText-action.saltText {\n letter-spacing: var(--salt-text-action-letterSpacing);\n text-transform: var(--salt-text-action-textTransform);\n text-align: var(--salt-text-action-textAlign);\n font-weight: var(--salt-text-action-fontWeight);\n}\n\n/* Code */\ncode.saltText,\n.saltText-code.saltText {\n font-family: var(--salt-text-code-fontFamily);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n font-family: var(--salt-text-display1-fontFamily);\n font-size: var(--salt-text-display1-fontSize);\n font-weight: var(--salt-text-display1-fontWeight);\n line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n font-family: var(--salt-text-display2-fontFamily);\n font-size: var(--salt-text-display2-fontSize);\n font-weight: var(--salt-text-display2-fontWeight);\n line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n font-family: var(--salt-text-display3-fontFamily);\n font-size: var(--salt-text-display3-fontSize);\n font-weight: var(--salt-text-display3-fontWeight);\n line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n font-family: var(--salt-text-h1-fontFamily);\n font-size: var(--salt-text-h1-fontSize);\n font-weight: var(--salt-text-h1-fontWeight);\n line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n font-family: var(--salt-text-h2-fontFamily);\n font-size: var(--salt-text-h2-fontSize);\n font-weight: var(--salt-text-h2-fontWeight);\n line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n font-family: var(--salt-text-h3-fontFamily);\n font-size: var(--salt-text-h3-fontSize);\n font-weight: var(--salt-text-h3-fontWeight);\n line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n font-family: var(--salt-text-h4-fontFamily);\n font-size: var(--salt-text-h4-fontSize);\n font-weight: var(--salt-text-h4-fontWeight);\n line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n font-family: var(--salt-text-label-fontFamily);\n font-size: var(--salt-text-label-fontSize);\n line-height: var(--salt-text-label-lineHeight);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n font-weight: var(--salt-text-label-fontWeight-strong);\n}\n\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=Text.css.js.map
@@ -20,7 +20,6 @@ import '../border-item/BorderItem.js';
20
20
  import '../border-layout/BorderLayout.js';
21
21
  import '../button/Button.js';
22
22
  import '../card/Card.js';
23
- import '../card/InteractableCard.js';
24
23
  import '../checkbox/Checkbox.js';
25
24
  import '../checkbox/CheckboxGroup.js';
26
25
  import { useComponentCssInjection } from '@salt-ds/styles';
@@ -28,15 +27,10 @@ import { useWindow } from '@salt-ds/window';
28
27
  import '@salt-ds/icons';
29
28
  import '../combo-box/ComboBox.js';
30
29
  import '../dialog/Dialog.js';
31
- import '../status-indicator/StatusIndicator.js';
32
- import './Display.js';
33
- import './Headings.js';
34
- import './Label.js';
35
- import './TextNotation.js';
36
- import './TextAction.js';
37
- import '../dialog/DialogContext.js';
30
+ import '../dialog/DialogHeader.js';
38
31
  import '../dialog/DialogActions.js';
39
32
  import '../dialog/DialogContent.js';
33
+ import '../dialog/DialogContext.js';
40
34
  import '../dialog/DialogCloseButton.js';
41
35
  import '../drawer/Drawer.js';
42
36
  import '../drawer/DrawerCloseButton.js';
@@ -48,10 +42,20 @@ import '../flex-item/FlexItem.js';
48
42
  import '../flex-layout/FlexLayout.js';
49
43
  import '../flow-layout/FlowLayout.js';
50
44
  import '../form-field/FormField.js';
45
+ import '../status-indicator/StatusIndicator.js';
46
+ import './Code.js';
47
+ import './Display.js';
48
+ import './Headings.js';
49
+ import './Label.js';
50
+ import './TextAction.js';
51
+ import './TextNotation.js';
51
52
  import '../form-field-context/FormFieldContext.js';
52
53
  import '../grid-item/GridItem.js';
53
54
  import '../grid-layout/GridLayout.js';
54
55
  import '../input/Input.js';
56
+ import '../interactable-card/InteractableCard.js';
57
+ import '../interactable-card/InteractableCardGroup.js';
58
+ import '../interactable-card/InteractableCardGroupContext.js';
55
59
  import '../link/Link.js';
56
60
  import '../link-card/LinkCard.js';
57
61
  import '../list-control/ListControlContext.js';
@@ -71,6 +75,7 @@ import '../progress/LinearProgress/LinearProgress.js';
71
75
  import '../radio-button/RadioButton.js';
72
76
  import '../radio-button/RadioButtonGroup.js';
73
77
  import '../scrim/Scrim.js';
78
+ import '../segmented-button-group/SegmentedButtonGroup.js';
74
79
  import '../spinner/Spinner.js';
75
80
  import '../stack-layout/StackLayout.js';
76
81
  import '../status-adornment/StatusAdornment.js';
@@ -1 +1 @@
1
- {"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, ReactElement } from \"react\";\n\nimport textCss from \"./Text.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Applies disabled styling when true\n */\n disabled?: boolean;\n /**\n * Apply text truncation by mentioning number of rows to be displayed\n */\n maxRows?: number;\n /**\n * Match styling to another text component's style\n */\n styleAs?:\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"label\"\n | \"display1\"\n | \"display2\"\n | \"display3\"\n | \"notation\"\n | \"action\";\n /**\n * Change text color palette\n */\n variant?: \"primary\" | \"secondary\";\n }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n props: TextProps<T>\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n children,\n className,\n disabled = false,\n maxRows,\n style,\n styleAs,\n variant = \"primary\",\n ...restProps\n }: TextProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-text\",\n css: textCss,\n window: targetWindow,\n });\n\n const Component = as || \"div\";\n\n const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n return (\n <Component\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"lineClamp\")]: maxRows,\n [withBaseName(styleAs || \"\")]: styleAs,\n [withBaseName(variant)]: variant,\n },\n className\n )}\n {...restProps}\n ref={ref}\n style={textStyles}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["textCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAsB,GAAA,UAAA;AAAA,EACjC,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,WAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,EAAE,iBAAmB,EAAA,OAAA,EAAS,GAAG,KAAM,EAAA,CAAA;AAE1D,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,OAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,OAAW,IAAA,EAAE,CAAI,GAAA,OAAA;AAAA,UAC/B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,SAC3B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MAEN,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, ReactElement } from \"react\";\n\nimport textCss from \"./Text.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Applies disabled styling when true\n */\n disabled?: boolean;\n /**\n * Apply text truncation by mentioning number of rows to be displayed\n */\n maxRows?: number;\n /**\n * Match styling to another text component's style\n */\n styleAs?:\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"label\"\n | \"display1\"\n | \"display2\"\n | \"display3\"\n | \"notation\"\n | \"action\"\n | \"code\";\n /**\n * Change text color palette\n */\n variant?: \"primary\" | \"secondary\";\n }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n props: TextProps<T>\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n children,\n className,\n disabled = false,\n maxRows,\n style,\n styleAs,\n variant = \"primary\",\n ...restProps\n }: TextProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-text\",\n css: textCss,\n window: targetWindow,\n });\n\n const Component = as || \"div\";\n\n const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n return (\n <Component\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"lineClamp\")]: maxRows,\n [withBaseName(styleAs || \"\")]: styleAs,\n [withBaseName(variant)]: variant,\n },\n className\n )}\n {...restProps}\n ref={ref}\n style={textStyles}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["textCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAsB,GAAA,UAAA;AAAA,EACjC,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,WAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,EAAE,iBAAmB,EAAA,OAAA,EAAS,GAAG,KAAM,EAAA,CAAA;AAE1D,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,OAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,OAAW,IAAA,EAAE,CAAI,GAAA,OAAA;AAAA,UAC/B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,SAC3B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MAEN,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -23,21 +23,15 @@ import '../border-item/BorderItem.js';
23
23
  import '../border-layout/BorderLayout.js';
24
24
  import '../button/Button.js';
25
25
  import '../card/Card.js';
26
- import '../card/InteractableCard.js';
27
26
  import '../checkbox/Checkbox.js';
28
27
  import '../checkbox/CheckboxGroup.js';
29
28
  import '@salt-ds/icons';
30
29
  import '../combo-box/ComboBox.js';
31
30
  import '../dialog/Dialog.js';
32
- import '../text/Text.js';
33
- import '../text/Display.js';
34
- import '../text/Headings.js';
35
- import '../text/Label.js';
36
- import '../text/TextNotation.js';
37
- import '../text/TextAction.js';
38
- import '../dialog/DialogContext.js';
31
+ import '../dialog/DialogHeader.js';
39
32
  import '../dialog/DialogActions.js';
40
33
  import '../dialog/DialogContent.js';
34
+ import '../dialog/DialogContext.js';
41
35
  import '../dialog/DialogCloseButton.js';
42
36
  import '../drawer/Drawer.js';
43
37
  import '../drawer/DrawerCloseButton.js';
@@ -49,10 +43,20 @@ import '../flex-item/FlexItem.js';
49
43
  import '../flex-layout/FlexLayout.js';
50
44
  import '../flow-layout/FlowLayout.js';
51
45
  import '../form-field/FormField.js';
46
+ import '../text/Text.js';
47
+ import '../text/Code.js';
48
+ import '../text/Display.js';
49
+ import '../text/Headings.js';
50
+ import '../text/Label.js';
51
+ import '../text/TextAction.js';
52
+ import '../text/TextNotation.js';
52
53
  import '../form-field-context/FormFieldContext.js';
53
54
  import '../grid-item/GridItem.js';
54
55
  import '../grid-layout/GridLayout.js';
55
56
  import '../input/Input.js';
57
+ import '../interactable-card/InteractableCard.js';
58
+ import '../interactable-card/InteractableCardGroup.js';
59
+ import '../interactable-card/InteractableCardGroupContext.js';
56
60
  import '../link/Link.js';
57
61
  import '../link-card/LinkCard.js';
58
62
  import '../list-control/ListControlContext.js';
@@ -72,6 +76,7 @@ import '../progress/LinearProgress/LinearProgress.js';
72
76
  import '../radio-button/RadioButton.js';
73
77
  import '../radio-button/RadioButtonGroup.js';
74
78
  import '../scrim/Scrim.js';
79
+ import '../segmented-button-group/SegmentedButtonGroup.js';
75
80
  import '../spinner/Spinner.js';
76
81
  import '../stack-layout/StackLayout.js';
77
82
  import '../status-adornment/StatusAdornment.js';
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.js","sources":["../src/toast/Toast.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastCss from \"./Toast.css\";\n\nconst withBaseName = makePrefixer(\"saltToast\");\n\nexport interface ToastProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * A string to determine the current state of the Toast.\n */\n status?: ValidationStatus;\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n props,\n ref\n) {\n const { children, className, status = \"info\", ...rest } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast\",\n css: toastCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(withBaseName(), withBaseName(status), className)}\n role=\"alert\"\n {...rest}\n ref={ref}\n >\n <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n {children}\n </div>\n );\n});\n"],"names":["Toast","toastCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AAStC,MAAM,KAAQ,GAAA,UAAA,CAAuC,SAASA,MAAAA,CACnE,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,MAAS,GAAA,MAAA,EAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AAC1D,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,IAC/D,IAAK,EAAA,OAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,eAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,QAAgB,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,MACjE,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"Toast.js","sources":["../src/toast/Toast.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastCss from \"./Toast.css\";\n\nconst withBaseName = makePrefixer(\"saltToast\");\n\nexport interface ToastProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * A string to determine the current state of the Toast.\n */\n status?: ValidationStatus;\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n props,\n ref\n) {\n const { children, className, status = \"info\", ...rest } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast\",\n css: toastCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(withBaseName(), withBaseName(status), className)}\n role=\"alert\"\n {...rest}\n ref={ref}\n >\n <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n {children}\n </div>\n );\n});\n"],"names":["Toast","toastCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AAStC,MAAM,KAAQ,GAAA,UAAA,CAAuC,SAASA,MAAAA,CACnE,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,MAAS,GAAA,MAAA,EAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AAC1D,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,IAC/D,IAAK,EAAA,OAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,eAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,QAAgB,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,MACjE,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -22,22 +22,15 @@ import '../border-item/BorderItem.js';
22
22
  import '../border-layout/BorderLayout.js';
23
23
  import '../button/Button.js';
24
24
  import '../card/Card.js';
25
- import '../card/InteractableCard.js';
26
25
  import '../checkbox/Checkbox.js';
27
26
  import '../checkbox/CheckboxGroup.js';
28
27
  import '@salt-ds/icons';
29
28
  import '../combo-box/ComboBox.js';
30
29
  import '../dialog/Dialog.js';
31
- import '../status-indicator/StatusIndicator.js';
32
- import '../text/Text.js';
33
- import '../text/Display.js';
34
- import '../text/Headings.js';
35
- import '../text/Label.js';
36
- import '../text/TextNotation.js';
37
- import '../text/TextAction.js';
38
- import '../dialog/DialogContext.js';
30
+ import '../dialog/DialogHeader.js';
39
31
  import '../dialog/DialogActions.js';
40
32
  import '../dialog/DialogContent.js';
33
+ import '../dialog/DialogContext.js';
41
34
  import '../dialog/DialogCloseButton.js';
42
35
  import '../drawer/Drawer.js';
43
36
  import '../drawer/DrawerCloseButton.js';
@@ -49,10 +42,21 @@ import '../flex-item/FlexItem.js';
49
42
  import '../flex-layout/FlexLayout.js';
50
43
  import '../flow-layout/FlowLayout.js';
51
44
  import '../form-field/FormField.js';
45
+ import '../status-indicator/StatusIndicator.js';
46
+ import '../text/Text.js';
47
+ import '../text/Code.js';
48
+ import '../text/Display.js';
49
+ import '../text/Headings.js';
50
+ import '../text/Label.js';
51
+ import '../text/TextAction.js';
52
+ import '../text/TextNotation.js';
52
53
  import '../form-field-context/FormFieldContext.js';
53
54
  import '../grid-item/GridItem.js';
54
55
  import '../grid-layout/GridLayout.js';
55
56
  import '../input/Input.js';
57
+ import '../interactable-card/InteractableCard.js';
58
+ import '../interactable-card/InteractableCardGroup.js';
59
+ import '../interactable-card/InteractableCardGroupContext.js';
56
60
  import '../link/Link.js';
57
61
  import '../link-card/LinkCard.js';
58
62
  import '../list-control/ListControlContext.js';
@@ -72,6 +76,7 @@ import '../progress/LinearProgress/LinearProgress.js';
72
76
  import '../radio-button/RadioButton.js';
73
77
  import '../radio-button/RadioButtonGroup.js';
74
78
  import '../scrim/Scrim.js';
79
+ import '../segmented-button-group/SegmentedButtonGroup.js';
75
80
  import '../spinner/Spinner.js';
76
81
  import '../stack-layout/StackLayout.js';
77
82
  import '../status-adornment/StatusAdornment.js';
@@ -1 +1 @@
1
- {"version":3,"file":"ToastContent.js","sources":["../src/toast/ToastContent.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ComponentPropsWithoutRef,\n ForwardedRef,\n forwardRef,\n ReactNode,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastContentCss from \"./ToastContent.css\";\n\nconst withBaseName = makePrefixer(\"saltToastContent\");\n\nexport interface ToastContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of Toast Content\n */\n children?: ReactNode;\n}\n\nexport const ToastContent = forwardRef(function ToastContent(\n { children, className, ...restProps }: ToastContentProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast-content\",\n css: toastContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n {children}\n </div>\n );\n});\n"],"names":["ToastContent","toastContentCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AASvC,MAAA,YAAA,GAAe,WAAW,SAASA,aAAAA,CAC9C,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EACpC,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,GAAA;AAAA,IAC7D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"ToastContent.js","sources":["../src/toast/ToastContent.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ComponentPropsWithoutRef,\n ForwardedRef,\n forwardRef,\n ReactNode,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastContentCss from \"./ToastContent.css\";\n\nconst withBaseName = makePrefixer(\"saltToastContent\");\n\nexport interface ToastContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of Toast Content\n */\n children?: ReactNode;\n}\n\nexport const ToastContent = forwardRef(function ToastContent(\n { children, className, ...restProps }: ToastContentProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast-content\",\n css: toastContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n {children}\n </div>\n );\n});\n"],"names":["ToastContent","toastContentCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AASvC,MAAA,YAAA,GAAe,WAAW,SAASA,aAAAA,CAC9C,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EACpC,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,GAAA;AAAA,IAC7D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -26,22 +26,15 @@ import '../border-item/BorderItem.js';
26
26
  import '../border-layout/BorderLayout.js';
27
27
  import '../button/Button.js';
28
28
  import '../card/Card.js';
29
- import '../card/InteractableCard.js';
30
29
  import '../checkbox/Checkbox.js';
31
30
  import '../checkbox/CheckboxGroup.js';
32
31
  import '@salt-ds/icons';
33
32
  import '../combo-box/ComboBox.js';
34
33
  import '../dialog/Dialog.js';
35
- import '../status-indicator/StatusIndicator.js';
36
- import '../text/Text.js';
37
- import '../text/Display.js';
38
- import '../text/Headings.js';
39
- import '../text/Label.js';
40
- import '../text/TextNotation.js';
41
- import '../text/TextAction.js';
42
- import '../dialog/DialogContext.js';
34
+ import '../dialog/DialogHeader.js';
43
35
  import '../dialog/DialogActions.js';
44
36
  import '../dialog/DialogContent.js';
37
+ import '../dialog/DialogContext.js';
45
38
  import '../dialog/DialogCloseButton.js';
46
39
  import '../drawer/Drawer.js';
47
40
  import '../drawer/DrawerCloseButton.js';
@@ -53,10 +46,21 @@ import '../flex-item/FlexItem.js';
53
46
  import '../flex-layout/FlexLayout.js';
54
47
  import '../flow-layout/FlowLayout.js';
55
48
  import '../form-field/FormField.js';
49
+ import '../status-indicator/StatusIndicator.js';
50
+ import '../text/Text.js';
51
+ import '../text/Code.js';
52
+ import '../text/Display.js';
53
+ import '../text/Headings.js';
54
+ import '../text/Label.js';
55
+ import '../text/TextAction.js';
56
+ import '../text/TextNotation.js';
56
57
  import '../form-field-context/FormFieldContext.js';
57
58
  import '../grid-item/GridItem.js';
58
59
  import '../grid-layout/GridLayout.js';
59
60
  import '../input/Input.js';
61
+ import '../interactable-card/InteractableCard.js';
62
+ import '../interactable-card/InteractableCardGroup.js';
63
+ import '../interactable-card/InteractableCardGroupContext.js';
60
64
  import '../link/Link.js';
61
65
  import '../link-card/LinkCard.js';
62
66
  import '../list-control/ListControlContext.js';
@@ -76,6 +80,7 @@ import '../progress/LinearProgress/LinearProgress.js';
76
80
  import '../radio-button/RadioButton.js';
77
81
  import '../radio-button/RadioButtonGroup.js';
78
82
  import '../scrim/Scrim.js';
83
+ import '../segmented-button-group/SegmentedButtonGroup.js';
79
84
  import '../spinner/Spinner.js';
80
85
  import '../stack-layout/StackLayout.js';
81
86
  import '../status-adornment/StatusAdornment.js';
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import {\n forwardRef,\n useRef,\n MouseEvent,\n FocusEvent,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n selected?: boolean;\n onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n function ToggleButton(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp,\n value,\n onClick,\n onFocus,\n onChange,\n selected: selectedProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button\",\n css: toggleButtonCss,\n window: targetWindow,\n });\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleRef = useForkRef(ref, buttonRef);\n\n const toggleButtonGroup = useToggleButtonGroup();\n\n const toggleButtonGroupSelected = toggleButtonGroup\n ? toggleButtonGroup.isSelected(value)\n : selectedProp;\n const focusable = toggleButtonGroup\n ? toggleButtonGroup?.isFocused(value)\n : true;\n const disabled = toggleButtonGroup?.disabled || disabledProp;\n\n const [selected, setSelected] = useControlled({\n controlled: toggleButtonGroupSelected,\n default: Boolean(selectedProp),\n name: \"ToggleButton\",\n state: \"selected\",\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.select(event);\n setSelected(!selected);\n onChange?.(event);\n onClick?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.focus(value);\n onFocus?.(event);\n };\n\n const ariaChecked = selected && !disabled;\n\n return (\n <button\n aria-pressed={!toggleButtonGroup ? ariaChecked : undefined}\n aria-checked={toggleButtonGroup ? ariaChecked : undefined}\n role={toggleButtonGroup ? \"radio\" : undefined}\n className={clsx(withBaseName(), className)}\n disabled={disabled}\n ref={handleRef}\n onClick={handleClick}\n onFocus={handleFocus}\n tabIndex={focusable && !disabled ? 0 : -1}\n value={value}\n {...rest}\n >\n {children}\n </button>\n );\n }\n);\n"],"names":["ToggleButton","toggleButtonCss"],"mappings":"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"}
1
+ {"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import {\n forwardRef,\n useRef,\n MouseEvent,\n FocusEvent,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n selected?: boolean;\n onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n function ToggleButton(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp,\n value,\n onClick,\n onFocus,\n onChange,\n selected: selectedProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button\",\n css: toggleButtonCss,\n window: targetWindow,\n });\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleRef = useForkRef(ref, buttonRef);\n\n const toggleButtonGroup = useToggleButtonGroup();\n\n const toggleButtonGroupSelected = toggleButtonGroup\n ? toggleButtonGroup.isSelected(value)\n : selectedProp;\n const focusable = toggleButtonGroup\n ? toggleButtonGroup?.isFocused(value)\n : true;\n const disabled = toggleButtonGroup?.disabled || disabledProp;\n\n const [selected, setSelected] = useControlled({\n controlled: toggleButtonGroupSelected,\n default: Boolean(selectedProp),\n name: \"ToggleButton\",\n state: \"selected\",\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.select(event);\n setSelected(!selected);\n onChange?.(event);\n onClick?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.focus(value);\n onFocus?.(event);\n };\n\n const ariaChecked = selected && !disabled;\n\n return (\n <button\n aria-pressed={!toggleButtonGroup ? ariaChecked : undefined}\n aria-checked={toggleButtonGroup ? ariaChecked : undefined}\n role={toggleButtonGroup ? \"radio\" : undefined}\n className={clsx(withBaseName(), className)}\n disabled={disabled}\n ref={handleRef}\n onClick={handleClick}\n onFocus={handleFocus}\n tabIndex={focusable && !disabled ? 0 : -1}\n value={value}\n {...rest}\n >\n {children}\n </button>\n );\n }\n);\n"],"names":["ToggleButton","toggleButtonCss"],"mappings":"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"}
@@ -24,22 +24,15 @@ import '../border-item/BorderItem.js';
24
24
  import '../border-layout/BorderLayout.js';
25
25
  import '../button/Button.js';
26
26
  import '../card/Card.js';
27
- import '../card/InteractableCard.js';
28
27
  import '../checkbox/Checkbox.js';
29
28
  import '../checkbox/CheckboxGroup.js';
30
29
  import '@salt-ds/icons';
31
30
  import '../combo-box/ComboBox.js';
32
31
  import '../dialog/Dialog.js';
33
- import '../status-indicator/StatusIndicator.js';
34
- import '../text/Text.js';
35
- import '../text/Display.js';
36
- import '../text/Headings.js';
37
- import '../text/Label.js';
38
- import '../text/TextNotation.js';
39
- import '../text/TextAction.js';
40
- import '../dialog/DialogContext.js';
32
+ import '../dialog/DialogHeader.js';
41
33
  import '../dialog/DialogActions.js';
42
34
  import '../dialog/DialogContent.js';
35
+ import '../dialog/DialogContext.js';
43
36
  import '../dialog/DialogCloseButton.js';
44
37
  import '../drawer/Drawer.js';
45
38
  import '../drawer/DrawerCloseButton.js';
@@ -51,10 +44,21 @@ import '../flex-item/FlexItem.js';
51
44
  import '../flex-layout/FlexLayout.js';
52
45
  import '../flow-layout/FlowLayout.js';
53
46
  import '../form-field/FormField.js';
47
+ import '../status-indicator/StatusIndicator.js';
48
+ import '../text/Text.js';
49
+ import '../text/Code.js';
50
+ import '../text/Display.js';
51
+ import '../text/Headings.js';
52
+ import '../text/Label.js';
53
+ import '../text/TextAction.js';
54
+ import '../text/TextNotation.js';
54
55
  import '../form-field-context/FormFieldContext.js';
55
56
  import '../grid-item/GridItem.js';
56
57
  import '../grid-layout/GridLayout.js';
57
58
  import '../input/Input.js';
59
+ import '../interactable-card/InteractableCard.js';
60
+ import '../interactable-card/InteractableCardGroup.js';
61
+ import '../interactable-card/InteractableCardGroupContext.js';
58
62
  import '../link/Link.js';
59
63
  import '../link-card/LinkCard.js';
60
64
  import '../list-control/ListControlContext.js';
@@ -74,6 +78,7 @@ import '../progress/LinearProgress/LinearProgress.js';
74
78
  import '../radio-button/RadioButton.js';
75
79
  import '../radio-button/RadioButtonGroup.js';
76
80
  import '../scrim/Scrim.js';
81
+ import '../segmented-button-group/SegmentedButtonGroup.js';
77
82
  import '../spinner/Spinner.js';
78
83
  import '../stack-layout/StackLayout.js';
79
84
  import '../status-adornment/StatusAdornment.js';
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n KeyboardEvent,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport { ToggleButtonGroupContext, Value } from \"./ToggleButtonGroupContext\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\n\nexport interface ToggleButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: Value;\n /**\n * If `true`, the Toggle Button Group will be disabled.\n */\n disabled?: boolean;\n /**\n * The value. Use when the component is controlled.\n */\n value?: Value;\n /**\n * Callback fired when the selection changes.\n * @param event\n */\n onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * The orientation of the toggle buttons.\n */\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n const {\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n orientation = \"horizontal\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n\n const groupRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, groupRef);\n\n const [value, setValue] = useControlled({\n default: defaultValue,\n controlled: valueProp,\n name: \"ToggleButtonGroup\",\n state: \"value\",\n });\n const [focused, setFocused] = useState<Value>(value);\n\n const select = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event);\n }\n },\n [onChange, value, setValue]\n );\n\n const isSelected = useCallback(\n (id: Value) => {\n return value === id;\n },\n [value]\n );\n\n const focus = (id: Value) => {\n setFocused(id);\n };\n\n const isFocused = useCallback(\n (id: Value) => {\n return focused === id || !focused;\n },\n [focused]\n );\n\n const contextValue = useMemo(\n () => ({\n select,\n isSelected,\n focus,\n isFocused,\n disabled,\n orientation,\n }),\n [select, isSelected, isFocused, disabled, orientation]\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const elements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? []\n );\n const currentIndex = elements.findIndex(\n (element) => element === document.activeElement\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[(currentIndex + 1) % elements.length]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[\n (currentIndex - 1 + elements.length) % elements.length\n ]?.focus();\n break;\n }\n\n onKeyDown?.(event);\n };\n\n return (\n <ToggleButtonGroupContext.Provider value={contextValue}>\n <div\n className={clsx(withBaseName(), withBaseName(orientation), className)}\n role=\"radiogroup\"\n ref={handleRef}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {children}\n </div>\n </ToggleButtonGroupContext.Provider>\n );\n});\n"],"names":["ToggleButtonGroup","toggleButtonGroupCss"],"mappings":"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"}
1
+ {"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n KeyboardEvent,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport { ToggleButtonGroupContext, Value } from \"./ToggleButtonGroupContext\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\n\nexport interface ToggleButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: Value;\n /**\n * If `true`, the Toggle Button Group will be disabled.\n */\n disabled?: boolean;\n /**\n * The value. Use when the component is controlled.\n */\n value?: Value;\n /**\n * Callback fired when the selection changes.\n * @param event\n */\n onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * The orientation of the toggle buttons.\n */\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n const {\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n orientation = \"horizontal\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n\n const groupRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, groupRef);\n\n const [value, setValue] = useControlled({\n default: defaultValue,\n controlled: valueProp,\n name: \"ToggleButtonGroup\",\n state: \"value\",\n });\n const [focused, setFocused] = useState<Value>(value);\n\n const select = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event);\n }\n },\n [onChange, value, setValue]\n );\n\n const isSelected = useCallback(\n (id: Value) => {\n return value === id;\n },\n [value]\n );\n\n const focus = (id: Value) => {\n setFocused(id);\n };\n\n const isFocused = useCallback(\n (id: Value) => {\n return focused === id || !focused;\n },\n [focused]\n );\n\n const contextValue = useMemo(\n () => ({\n select,\n isSelected,\n focus,\n isFocused,\n disabled,\n orientation,\n }),\n [select, isSelected, isFocused, disabled, orientation]\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const elements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? []\n );\n const currentIndex = elements.findIndex(\n (element) => element === document.activeElement\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[(currentIndex + 1) % elements.length]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[\n (currentIndex - 1 + elements.length) % elements.length\n ]?.focus();\n break;\n }\n\n onKeyDown?.(event);\n };\n\n return (\n <ToggleButtonGroupContext.Provider value={contextValue}>\n <div\n className={clsx(withBaseName(), withBaseName(orientation), className)}\n role=\"radiogroup\"\n ref={handleRef}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {children}\n </div>\n </ToggleButtonGroupContext.Provider>\n );\n});\n"],"names":["ToggleButtonGroup","toggleButtonGroupCss"],"mappings":"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"}