@bspk/ui 1.2.0 → 1.3.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 (801) hide show
  1. package/.scripts/index.ts +110 -0
  2. package/README.md +13 -0
  3. package/build.ts +2 -2
  4. package/dist/components/Accordion/Accordion.d.ts +42 -5
  5. package/dist/components/Accordion/Accordion.js +24 -20
  6. package/dist/components/Accordion/Accordion.js.map +1 -1
  7. package/dist/components/Accordion/AccordionExample.d.ts +2 -1
  8. package/dist/components/Accordion/AccordionExample.js +77 -64
  9. package/dist/components/Accordion/AccordionExample.js.map +1 -1
  10. package/dist/components/Accordion/accordion.css +37 -34
  11. package/dist/components/Accordion/accordion.css.js +37 -34
  12. package/dist/components/Avatar/Avatar.d.ts +10 -6
  13. package/dist/components/Avatar/Avatar.js +5 -10
  14. package/dist/components/Avatar/Avatar.js.map +1 -1
  15. package/dist/components/Avatar/AvatarExample.d.ts +2 -1
  16. package/dist/components/Avatar/AvatarExample.js +42 -41
  17. package/dist/components/Avatar/AvatarExample.js.map +1 -1
  18. package/dist/components/AvatarGroup/AvatarGroup.d.ts +1 -1
  19. package/dist/components/AvatarGroup/AvatarGroup.js +1 -1
  20. package/dist/components/AvatarGroup/AvatarGroup.js.map +1 -1
  21. package/dist/components/AvatarGroup/AvatarGroupExample.d.ts +2 -1
  22. package/dist/components/AvatarGroup/AvatarGroupExample.js +33 -27
  23. package/dist/components/AvatarGroup/AvatarGroupExample.js.map +1 -1
  24. package/dist/components/Badge/Badge.d.ts +1 -1
  25. package/dist/components/Badge/Badge.js +1 -1
  26. package/dist/components/Badge/Badge.js.map +1 -1
  27. package/dist/components/BadgeDot/BadgeDot.d.ts +1 -1
  28. package/dist/components/BadgeDot/BadgeDot.js +1 -1
  29. package/dist/components/BadgeDot/BadgeDot.js.map +1 -1
  30. package/dist/components/BannerAlert/BannerAlert.d.ts +1 -1
  31. package/dist/components/BannerAlert/BannerAlert.js +3 -2
  32. package/dist/components/BannerAlert/BannerAlert.js.map +1 -1
  33. package/dist/components/BannerAlert/BannerAlertExample.js +4 -0
  34. package/dist/components/BannerAlert/BannerAlertExample.js.map +1 -1
  35. package/dist/components/BannerAlert/banner-alert.css +0 -26
  36. package/dist/components/BannerAlert/banner-alert.css.js +0 -26
  37. package/dist/components/BottomNavigation/BottomNavigation.d.ts +53 -0
  38. package/dist/components/BottomNavigation/BottomNavigation.js +42 -0
  39. package/dist/components/BottomNavigation/BottomNavigation.js.map +1 -0
  40. package/dist/components/BottomNavigation/BottomNavigationExample.d.ts +4 -0
  41. package/dist/components/BottomNavigation/BottomNavigationExample.js +119 -0
  42. package/dist/components/BottomNavigation/BottomNavigationExample.js.map +1 -0
  43. package/dist/components/BottomNavigation/bottom-navigation.css +68 -0
  44. package/dist/components/BottomNavigation/bottom-navigation.css.js +73 -0
  45. package/dist/components/BottomNavigation/index.d.ts +1 -0
  46. package/dist/components/BottomNavigation/index.js +2 -0
  47. package/dist/components/BottomNavigation/index.js.map +1 -0
  48. package/dist/components/Breadcrumb/Breadcrumb.d.ts +4 -4
  49. package/dist/components/Breadcrumb/Breadcrumb.js +7 -16
  50. package/dist/components/Breadcrumb/Breadcrumb.js.map +1 -1
  51. package/dist/components/Breadcrumb/BreadcrumbExample.d.ts +2 -1
  52. package/dist/components/Breadcrumb/BreadcrumbExample.js +150 -149
  53. package/dist/components/Breadcrumb/BreadcrumbExample.js.map +1 -1
  54. package/dist/components/Button/Button.d.ts +1 -1
  55. package/dist/components/Button/Button.js +6 -3
  56. package/dist/components/Button/Button.js.map +1 -1
  57. package/dist/components/Button/ButtonExample.d.ts +2 -1
  58. package/dist/components/Button/ButtonExample.js +25 -24
  59. package/dist/components/Button/ButtonExample.js.map +1 -1
  60. package/dist/components/ButtonDock/ButtonDock.d.ts +55 -0
  61. package/dist/components/ButtonDock/ButtonDock.js +33 -0
  62. package/dist/components/ButtonDock/ButtonDock.js.map +1 -0
  63. package/dist/components/ButtonDock/ButtonDockExample.d.ts +4 -0
  64. package/dist/components/ButtonDock/ButtonDockExample.js +75 -0
  65. package/dist/components/ButtonDock/ButtonDockExample.js.map +1 -0
  66. package/dist/components/ButtonDock/button-dock.css +42 -0
  67. package/dist/components/ButtonDock/button-dock.css.js +47 -0
  68. package/dist/components/ButtonDock/index.d.ts +1 -0
  69. package/dist/components/ButtonDock/index.js +2 -0
  70. package/dist/components/ButtonDock/index.js.map +1 -0
  71. package/dist/components/CalendarPicker/CalendarPicker.d.ts +32 -0
  72. package/dist/components/CalendarPicker/CalendarPicker.js +203 -0
  73. package/dist/components/CalendarPicker/CalendarPicker.js.map +1 -0
  74. package/dist/components/CalendarPicker/CalendarPickerExample.d.ts +3 -0
  75. package/dist/components/CalendarPicker/CalendarPickerExample.js +17 -0
  76. package/dist/components/CalendarPicker/CalendarPickerExample.js.map +1 -0
  77. package/dist/components/CalendarPicker/calendar-picker.css +70 -0
  78. package/dist/components/CalendarPicker/calendar-picker.css.js +75 -0
  79. package/dist/components/CalendarPicker/index.d.ts +1 -0
  80. package/dist/components/CalendarPicker/index.js +2 -0
  81. package/dist/components/CalendarPicker/index.js.map +1 -0
  82. package/dist/components/Card/Card.d.ts +3 -9
  83. package/dist/components/Card/Card.js +2 -2
  84. package/dist/components/Card/Card.js.map +1 -1
  85. package/dist/components/Card/CardExample.js +1 -0
  86. package/dist/components/Card/CardExample.js.map +1 -1
  87. package/dist/components/Card/card.css +0 -4
  88. package/dist/components/Card/card.css.js +0 -4
  89. package/dist/components/Carousel/Carousel.d.ts +63 -0
  90. package/dist/components/Carousel/Carousel.js +68 -0
  91. package/dist/components/Carousel/Carousel.js.map +1 -0
  92. package/dist/components/Carousel/CarouselExample.d.ts +5 -0
  93. package/dist/components/Carousel/CarouselExample.js +51 -0
  94. package/dist/components/Carousel/CarouselExample.js.map +1 -0
  95. package/dist/components/Carousel/carousel.css +34 -0
  96. package/dist/components/Carousel/carousel.css.js +39 -0
  97. package/dist/components/Carousel/index.d.ts +1 -0
  98. package/dist/components/Carousel/index.js +2 -0
  99. package/dist/components/Carousel/index.js.map +1 -0
  100. package/dist/components/Checkbox/Checkbox.d.ts +1 -1
  101. package/dist/components/Checkbox/Checkbox.js +1 -1
  102. package/dist/components/Checkbox/Checkbox.js.map +1 -1
  103. package/dist/components/Checkbox/checkbox.css +8 -8
  104. package/dist/components/Checkbox/checkbox.css.js +8 -8
  105. package/dist/components/CheckboxGroup/CheckboxGroupExample.d.ts +2 -1
  106. package/dist/components/CheckboxGroup/CheckboxGroupExample.js +49 -42
  107. package/dist/components/CheckboxGroup/CheckboxGroupExample.js.map +1 -1
  108. package/dist/components/ChipAssist/ChipAssistExample.d.ts +2 -1
  109. package/dist/components/ChipAssist/ChipAssistExample.js +24 -23
  110. package/dist/components/ChipAssist/ChipAssistExample.js.map +1 -1
  111. package/dist/components/ChipFilter/ChipFilterExample.js +3 -0
  112. package/dist/components/ChipFilter/ChipFilterExample.js.map +1 -1
  113. package/dist/components/ChipGroup/ChipGroupExample.d.ts +2 -1
  114. package/dist/components/ChipGroup/ChipGroupExample.js +9 -8
  115. package/dist/components/ChipGroup/ChipGroupExample.js.map +1 -1
  116. package/dist/components/ChipInput/ChipInputExample.d.ts +2 -1
  117. package/dist/components/ChipInput/ChipInputExample.js +39 -38
  118. package/dist/components/ChipInput/ChipInputExample.js.map +1 -1
  119. package/dist/components/ChipSuggestion/ChipSuggestionExample.d.ts +2 -1
  120. package/dist/components/ChipSuggestion/ChipSuggestionExample.js +16 -15
  121. package/dist/components/ChipSuggestion/ChipSuggestionExample.js.map +1 -1
  122. package/dist/components/ChipUtility/ChipUtility.d.ts +1 -1
  123. package/dist/components/ChipUtility/ChipUtility.js +1 -1
  124. package/dist/components/ChipUtility/ChipUtility.js.map +1 -1
  125. package/dist/components/ChipUtility/ChipUtilityExample.d.ts +2 -1
  126. package/dist/components/ChipUtility/ChipUtilityExample.js +53 -52
  127. package/dist/components/ChipUtility/ChipUtilityExample.js.map +1 -1
  128. package/dist/components/DateField/DateField.d.ts +32 -0
  129. package/dist/components/DateField/DateField.js +34 -0
  130. package/dist/components/DateField/DateField.js.map +1 -0
  131. package/dist/components/DateField/DateFieldExample.d.ts +4 -0
  132. package/dist/components/DateField/DateFieldExample.js +11 -0
  133. package/dist/components/DateField/DateFieldExample.js.map +1 -0
  134. package/dist/components/DateField/date-field.css +8 -0
  135. package/dist/components/DateField/date-field.css.js +13 -0
  136. package/dist/components/DateField/index.d.ts +1 -0
  137. package/dist/components/DateField/index.js +2 -0
  138. package/dist/components/DateField/index.js.map +1 -0
  139. package/dist/components/DateInput/DateInput.d.ts +39 -0
  140. package/dist/components/DateInput/DateInput.js +102 -0
  141. package/dist/components/DateInput/DateInput.js.map +1 -0
  142. package/dist/components/DateInput/DateInputExample.d.ts +4 -0
  143. package/dist/components/DateInput/DateInputExample.js +14 -0
  144. package/dist/components/DateInput/DateInputExample.js.map +1 -0
  145. package/dist/components/DateInput/date-input.css +12 -0
  146. package/dist/components/DateInput/date-input.css.js +17 -0
  147. package/dist/components/DateInput/index.d.ts +1 -0
  148. package/dist/components/DateInput/index.js +2 -0
  149. package/dist/components/DateInput/index.js.map +1 -0
  150. package/dist/components/Dialog/Dialog.d.ts +15 -2
  151. package/dist/components/Dialog/Dialog.js +11 -9
  152. package/dist/components/Dialog/Dialog.js.map +1 -1
  153. package/dist/components/Dialog/DialogExample.d.ts +2 -1
  154. package/dist/components/Dialog/DialogExample.js +2 -0
  155. package/dist/components/Dialog/DialogExample.js.map +1 -1
  156. package/dist/components/Dialog/dialog.css +19 -67
  157. package/dist/components/Dialog/dialog.css.js +19 -67
  158. package/dist/components/Divider/Divider.d.ts +1 -1
  159. package/dist/components/Divider/Divider.js +1 -1
  160. package/dist/components/Divider/Divider.js.map +1 -1
  161. package/dist/components/Divider/DividerExample.d.ts +4 -2
  162. package/dist/components/Divider/DividerExample.js +2 -0
  163. package/dist/components/Divider/DividerExample.js.map +1 -1
  164. package/dist/components/Divider/divider.css +1 -1
  165. package/dist/components/Divider/divider.css.js +1 -1
  166. package/dist/components/Drawer/Drawer.d.ts +75 -0
  167. package/dist/components/Drawer/Drawer.js +49 -0
  168. package/dist/components/Drawer/Drawer.js.map +1 -0
  169. package/dist/components/Drawer/DrawerExample.d.ts +4 -0
  170. package/dist/components/Drawer/DrawerExample.js +47 -0
  171. package/dist/components/Drawer/DrawerExample.js.map +1 -0
  172. package/dist/components/Drawer/drawer.css +56 -0
  173. package/dist/components/Drawer/drawer.css.js +61 -0
  174. package/dist/components/Drawer/index.d.ts +1 -0
  175. package/dist/components/Drawer/index.js +2 -0
  176. package/dist/components/Drawer/index.js.map +1 -0
  177. package/dist/components/EmptyState/EmptyStateExample.d.ts +2 -1
  178. package/dist/components/EmptyState/EmptyStateExample.js +18 -11
  179. package/dist/components/EmptyState/EmptyStateExample.js.map +1 -1
  180. package/dist/components/Fab/Fab.d.ts +1 -1
  181. package/dist/components/Fab/Fab.js +5 -2
  182. package/dist/components/Fab/Fab.js.map +1 -1
  183. package/dist/components/Fab/FabExample.d.ts +1 -0
  184. package/dist/components/Fab/FabExample.js +4 -2
  185. package/dist/components/Fab/FabExample.js.map +1 -1
  186. package/dist/components/FileUpload/FileUpload.d.ts +1 -1
  187. package/dist/components/FileUpload/FileUpload.js +1 -1
  188. package/dist/components/FileUpload/FileUpload.js.map +1 -1
  189. package/dist/components/FileUpload/FileUploadExample.d.ts +2 -1
  190. package/dist/components/FileUpload/FileUploadExample.js +17 -16
  191. package/dist/components/FileUpload/FileUploadExample.js.map +1 -1
  192. package/dist/components/FileUploadItem/FileUploadItem.d.ts +1 -1
  193. package/dist/components/FileUploadItem/FileUploadItem.js +1 -1
  194. package/dist/components/FileUploadItem/FileUploadItem.js.map +1 -1
  195. package/dist/components/FileUploadItem/FileUploadItemExample.d.ts +2 -1
  196. package/dist/components/FileUploadItem/FileUploadItemExample.js +44 -39
  197. package/dist/components/FileUploadItem/FileUploadItemExample.js.map +1 -1
  198. package/dist/components/FormField/FormField.d.ts +3 -3
  199. package/dist/components/FormField/FormField.js +2 -2
  200. package/dist/components/FormField/FormField.js.map +1 -1
  201. package/dist/components/FormField/form-field.css +3 -3
  202. package/dist/components/FormField/form-field.css.js +3 -3
  203. package/dist/components/InlineAlert/InlineAlert.d.ts +1 -1
  204. package/dist/components/InlineAlert/InlineAlert.js +1 -1
  205. package/dist/components/InlineAlert/InlineAlert.js.map +1 -1
  206. package/dist/components/Layout/LayoutExample.d.ts +2 -1
  207. package/dist/components/Layout/LayoutExample.js +2 -0
  208. package/dist/components/Layout/LayoutExample.js.map +1 -1
  209. package/dist/components/Link/Link.d.ts +1 -1
  210. package/dist/components/Link/Link.js +1 -1
  211. package/dist/components/Link/Link.js.map +1 -1
  212. package/dist/components/Link/LinkExample.d.ts +2 -1
  213. package/dist/components/Link/LinkExample.js +2 -0
  214. package/dist/components/Link/LinkExample.js.map +1 -1
  215. package/dist/components/ListItem/ListItem.d.ts +40 -14
  216. package/dist/components/ListItem/ListItem.js +26 -13
  217. package/dist/components/ListItem/ListItem.js.map +1 -1
  218. package/dist/components/ListItem/ListItemExample.d.ts +2 -1
  219. package/dist/components/ListItem/ListItemExample.js +12 -12
  220. package/dist/components/ListItem/ListItemExample.js.map +1 -1
  221. package/dist/components/ListItem/list-item.css +10 -7
  222. package/dist/components/ListItem/list-item.css.js +10 -7
  223. package/dist/components/ListItemMenu/ListItemMenu.d.ts +146 -0
  224. package/dist/components/ListItemMenu/ListItemMenu.js +159 -0
  225. package/dist/components/ListItemMenu/ListItemMenu.js.map +1 -0
  226. package/dist/components/ListItemMenu/index.d.ts +1 -0
  227. package/dist/components/ListItemMenu/index.js +2 -0
  228. package/dist/components/ListItemMenu/index.js.map +1 -0
  229. package/dist/components/Menu/Menu.d.ts +12 -39
  230. package/dist/components/Menu/Menu.js +6 -26
  231. package/dist/components/Menu/Menu.js.map +1 -1
  232. package/dist/components/Menu/MenuExample.d.ts +3 -3
  233. package/dist/components/Menu/MenuExample.js +1 -24
  234. package/dist/components/Menu/MenuExample.js.map +1 -1
  235. package/dist/components/Menu/menu.css +3 -10
  236. package/dist/components/Menu/menu.css.js +3 -10
  237. package/dist/components/MenuButton/MenuButton.d.ts +1 -1
  238. package/dist/components/MenuButton/MenuButton.js +1 -1
  239. package/dist/components/MenuButton/MenuButton.js.map +1 -1
  240. package/dist/components/Modal/Modal.d.ts +4 -4
  241. package/dist/components/Modal/Modal.js +4 -4
  242. package/dist/components/Modal/Modal.js.map +1 -1
  243. package/dist/components/NumberInput/NumberInput.d.ts +8 -4
  244. package/dist/components/NumberInput/NumberInput.js +5 -14
  245. package/dist/components/NumberInput/NumberInput.js.map +1 -1
  246. package/dist/components/NumberInput/number-input.css +0 -1
  247. package/dist/components/NumberInput/number-input.css.js +0 -1
  248. package/dist/components/OTPInput/OTPInput.d.ts +3 -3
  249. package/dist/components/OTPInput/OTPInput.js +3 -3
  250. package/dist/components/OTPInput/OTPInput.js.map +1 -1
  251. package/dist/components/OTPInput/OTPInputExample.d.ts +2 -1
  252. package/dist/components/OTPInput/OTPInputExample.js +19 -16
  253. package/dist/components/OTPInput/OTPInputExample.js.map +1 -1
  254. package/dist/components/PageControl/PageControl.d.ts +5 -3
  255. package/dist/components/PageControl/PageControl.js +17 -16
  256. package/dist/components/PageControl/PageControl.js.map +1 -1
  257. package/dist/components/PageControl/PageControlExample.d.ts +4 -0
  258. package/dist/components/PageControl/PageControlExample.js +34 -0
  259. package/dist/components/PageControl/PageControlExample.js.map +1 -0
  260. package/dist/components/Pagination/Pagination.d.ts +1 -5
  261. package/dist/components/Pagination/Pagination.js +2 -6
  262. package/dist/components/Pagination/Pagination.js.map +1 -1
  263. package/dist/components/PasswordField/PasswordField.d.ts +2 -2
  264. package/dist/components/PasswordField/PasswordField.js +3 -3
  265. package/dist/components/PasswordField/PasswordField.js.map +1 -1
  266. package/dist/components/PasswordInput/PasswordInput.d.ts +1 -1
  267. package/dist/components/PasswordInput/PasswordInput.js +2 -2
  268. package/dist/components/PasswordInput/PasswordInput.js.map +1 -1
  269. package/dist/components/PhoneNumberInput/PhoneNumberInput.d.ts +3 -3
  270. package/dist/components/PhoneNumberInput/PhoneNumberInput.js +49 -52
  271. package/dist/components/PhoneNumberInput/PhoneNumberInput.js.map +1 -1
  272. package/dist/components/PhoneNumberInput/PhoneNumberInputExample.d.ts +4 -0
  273. package/dist/components/PhoneNumberInput/PhoneNumberInputExample.js +5 -0
  274. package/dist/components/PhoneNumberInput/PhoneNumberInputExample.js.map +1 -0
  275. package/dist/components/PhoneNumberInput/phone-number-input.css +36 -26
  276. package/dist/components/PhoneNumberInput/phone-number-input.css.js +36 -26
  277. package/dist/components/Popover/Popover.d.ts +7 -4
  278. package/dist/components/Popover/Popover.js +22 -19
  279. package/dist/components/Popover/Popover.js.map +1 -1
  280. package/dist/components/Popover/PopoverExample.js +7 -1
  281. package/dist/components/Popover/PopoverExample.js.map +1 -1
  282. package/dist/components/Popover/popover.css +3 -12
  283. package/dist/components/Popover/popover.css.js +3 -12
  284. package/dist/components/ProgressBar/ProgressBar.js +1 -1
  285. package/dist/components/ProgressBar/ProgressBar.js.map +1 -1
  286. package/dist/components/ProgressCircle/ProgressCircle.js +1 -1
  287. package/dist/components/ProgressCircle/ProgressCircle.js.map +1 -1
  288. package/dist/components/ProgressionStepper/ProgressionStepper.d.ts +1 -1
  289. package/dist/components/ProgressionStepper/ProgressionStepper.js +2 -2
  290. package/dist/components/ProgressionStepper/ProgressionStepper.js.map +1 -1
  291. package/dist/components/ProgressionStepper/ProgressionStepperExample.d.ts +2 -1
  292. package/dist/components/ProgressionStepper/ProgressionStepperExample.js +47 -46
  293. package/dist/components/ProgressionStepper/ProgressionStepperExample.js.map +1 -1
  294. package/dist/components/ProgressionStepperBar/ProgressionStepperBar.d.ts +1 -1
  295. package/dist/components/ProgressionStepperBar/ProgressionStepperBar.js +3 -3
  296. package/dist/components/ProgressionStepperBar/ProgressionStepperBar.js.map +1 -1
  297. package/dist/components/Radio/Radio.d.ts +1 -1
  298. package/dist/components/Radio/Radio.js.map +1 -1
  299. package/dist/components/RadioGroup/RadioGroup.d.ts +1 -1
  300. package/dist/components/RadioGroup/RadioGroup.js +2 -2
  301. package/dist/components/RadioGroup/RadioGroup.js.map +1 -1
  302. package/dist/components/RadioGroup/RadioGroupExample.d.ts +1 -0
  303. package/dist/components/RadioGroup/RadioGroupExample.js +2 -1
  304. package/dist/components/RadioGroup/RadioGroupExample.js.map +1 -1
  305. package/dist/components/RadioOption/RadioOption.js +1 -1
  306. package/dist/components/RadioOption/RadioOption.js.map +1 -1
  307. package/dist/components/Rating/Rating.js +2 -2
  308. package/dist/components/Rating/Rating.js.map +1 -1
  309. package/dist/components/Rating/RatingExample.d.ts +2 -1
  310. package/dist/components/Rating/RatingExample.js +9 -8
  311. package/dist/components/Rating/RatingExample.js.map +1 -1
  312. package/dist/components/Scrim/Scrim.d.ts +2 -2
  313. package/dist/components/Scrim/Scrim.js +2 -2
  314. package/dist/components/Scrim/Scrim.js.map +1 -1
  315. package/dist/components/Scrim/scrim.css +0 -3
  316. package/dist/components/Scrim/scrim.css.js +0 -3
  317. package/dist/components/SearchBar/SearchBar.d.ts +11 -8
  318. package/dist/components/SearchBar/SearchBar.js +46 -34
  319. package/dist/components/SearchBar/SearchBar.js.map +1 -1
  320. package/dist/components/SearchBar/SearchBarExample.d.ts +2 -1
  321. package/dist/components/SearchBar/SearchBarExample.js +2 -6
  322. package/dist/components/SearchBar/SearchBarExample.js.map +1 -1
  323. package/dist/components/SegmentedControl/SegmentedControl.d.ts +2 -2
  324. package/dist/components/SegmentedControl/SegmentedControl.js +1 -1
  325. package/dist/components/SegmentedControl/SegmentedControl.js.map +1 -1
  326. package/dist/components/SegmentedControl/SegmentedControlExample.d.ts +2 -1
  327. package/dist/components/SegmentedControl/SegmentedControlExample.js +32 -23
  328. package/dist/components/SegmentedControl/SegmentedControlExample.js.map +1 -1
  329. package/dist/components/SegmentedControl/segmented-control.css +7 -7
  330. package/dist/components/SegmentedControl/segmented-control.css.js +7 -7
  331. package/dist/components/Select/Select.d.ts +53 -35
  332. package/dist/components/Select/Select.js +99 -27
  333. package/dist/components/Select/Select.js.map +1 -1
  334. package/dist/components/Select/SelectExample.d.ts +2 -1
  335. package/dist/components/Select/SelectExample.js +104 -89
  336. package/dist/components/Select/SelectExample.js.map +1 -1
  337. package/dist/components/Select/select.css +12 -18
  338. package/dist/components/Select/select.css.js +12 -18
  339. package/dist/components/SelectField/SelectFieldExample.d.ts +23 -0
  340. package/dist/components/SelectField/SelectFieldExample.js +13 -0
  341. package/dist/components/SelectField/SelectFieldExample.js.map +1 -0
  342. package/dist/components/Skeleton/SkeletonExample.d.ts +2 -1
  343. package/dist/components/Skeleton/SkeletonExample.js +10 -9
  344. package/dist/components/Skeleton/SkeletonExample.js.map +1 -1
  345. package/dist/components/SkeletonText/SkeletonTextExample.d.ts +2 -1
  346. package/dist/components/SkeletonText/SkeletonTextExample.js +12 -11
  347. package/dist/components/SkeletonText/SkeletonTextExample.js.map +1 -1
  348. package/dist/components/Slider/Slider.js +1 -1
  349. package/dist/components/Slider/Slider.js.map +1 -1
  350. package/dist/components/Slider/SliderExample.js +3 -0
  351. package/dist/components/Slider/SliderExample.js.map +1 -1
  352. package/dist/components/Snackbar/Snackbar.d.ts +27 -0
  353. package/dist/components/Snackbar/Snackbar.js +23 -0
  354. package/dist/components/Snackbar/Snackbar.js.map +1 -0
  355. package/dist/components/Snackbar/SnackbarExample.d.ts +3 -0
  356. package/dist/components/Snackbar/SnackbarExample.js +11 -0
  357. package/dist/components/Snackbar/SnackbarExample.js.map +1 -0
  358. package/dist/components/Snackbar/index.d.ts +1 -0
  359. package/dist/components/Snackbar/index.js +2 -0
  360. package/dist/components/Snackbar/index.js.map +1 -0
  361. package/dist/components/Snackbar/snackbar.css +19 -0
  362. package/dist/components/Snackbar/snackbar.css.js +24 -0
  363. package/dist/components/SnackbarProvider/SnackbarProvider.d.ts +90 -0
  364. package/dist/components/SnackbarProvider/SnackbarProvider.js +115 -0
  365. package/dist/components/SnackbarProvider/SnackbarProvider.js.map +1 -0
  366. package/dist/components/SnackbarProvider/SnackbarProviderExample.d.ts +4 -0
  367. package/dist/components/SnackbarProvider/SnackbarProviderExample.js +59 -0
  368. package/dist/components/SnackbarProvider/SnackbarProviderExample.js.map +1 -0
  369. package/dist/components/SnackbarProvider/index.d.ts +1 -0
  370. package/dist/components/SnackbarProvider/index.js +2 -0
  371. package/dist/components/SnackbarProvider/index.js.map +1 -0
  372. package/dist/components/SnackbarProvider/snackbar-provider-example.css +15 -0
  373. package/dist/components/SnackbarProvider/snackbar-provider-example.css.js +20 -0
  374. package/dist/components/SnackbarProvider/snackbar-provider.css +15 -0
  375. package/dist/components/SnackbarProvider/snackbar-provider.css.js +20 -0
  376. package/dist/components/Switch/Switch.d.ts +1 -1
  377. package/dist/components/Switch/Switch.js.map +1 -1
  378. package/dist/components/TabGroup/TabGroup.d.ts +1 -1
  379. package/dist/components/TabGroup/TabGroup.js +1 -1
  380. package/dist/components/TabGroup/TabGroup.js.map +1 -1
  381. package/dist/components/TabGroup/TabGroupExample.d.ts +2 -1
  382. package/dist/components/TabGroup/TabGroupExample.js +50 -45
  383. package/dist/components/TabGroup/TabGroupExample.js.map +1 -1
  384. package/dist/components/TabGroup/tab-group.css +6 -6
  385. package/dist/components/TabGroup/tab-group.css.js +6 -6
  386. package/dist/components/TabList/TabList.d.ts +1 -1
  387. package/dist/components/TabList/TabList.js +32 -22
  388. package/dist/components/TabList/TabList.js.map +1 -1
  389. package/dist/components/TabList/tab-list.css +6 -9
  390. package/dist/components/TabList/tab-list.css.js +6 -9
  391. package/dist/components/Tag/Tag.d.ts +1 -1
  392. package/dist/components/Tag/Tag.js +1 -1
  393. package/dist/components/Tag/Tag.js.map +1 -1
  394. package/dist/components/Tag/TagExample.d.ts +2 -1
  395. package/dist/components/Tag/TagExample.js +12 -11
  396. package/dist/components/Tag/TagExample.js.map +1 -1
  397. package/dist/components/TextField/TextField.js +1 -1
  398. package/dist/components/TextField/TextField.js.map +1 -1
  399. package/dist/components/TextField/TextFieldExample.d.ts +3 -0
  400. package/dist/components/TextField/TextFieldExample.js +6 -0
  401. package/dist/components/TextField/TextFieldExample.js.map +1 -0
  402. package/dist/components/TextInput/TextInput.d.ts +2 -2
  403. package/dist/components/TextInput/TextInput.js +27 -4
  404. package/dist/components/TextInput/TextInput.js.map +1 -1
  405. package/dist/components/TextInput/TextInputExample.js +9 -0
  406. package/dist/components/TextInput/TextInputExample.js.map +1 -1
  407. package/dist/components/TextInput/text-input.css +12 -25
  408. package/dist/components/TextInput/text-input.css.js +12 -25
  409. package/dist/components/Textarea/Textarea.d.ts +3 -3
  410. package/dist/components/Textarea/Textarea.js +2 -10
  411. package/dist/components/Textarea/Textarea.js.map +1 -1
  412. package/dist/components/TextareaField/TextareaField.d.ts +1 -1
  413. package/dist/components/TextareaField/TextareaField.js +2 -2
  414. package/dist/components/TextareaField/TextareaField.js.map +1 -1
  415. package/dist/components/TimeInput/Listbox.d.ts +10 -5
  416. package/dist/components/TimeInput/Listbox.js +14 -55
  417. package/dist/components/TimeInput/Listbox.js.map +1 -1
  418. package/dist/components/TimeInput/Segment.d.ts +3 -4
  419. package/dist/components/TimeInput/Segment.js +17 -13
  420. package/dist/components/TimeInput/Segment.js.map +1 -1
  421. package/dist/components/TimeInput/TimeInput.d.ts +3 -5
  422. package/dist/components/TimeInput/TimeInput.js +70 -23
  423. package/dist/components/TimeInput/TimeInput.js.map +1 -1
  424. package/dist/components/TimeInput/time-input.css +10 -9
  425. package/dist/components/TimeInput/time-input.css.js +10 -9
  426. package/dist/components/ToggleOption/ToggleOption.d.ts +1 -1
  427. package/dist/components/ToggleOption/ToggleOption.js.map +1 -1
  428. package/dist/components/Tooltip/Tooltip.d.ts +4 -3
  429. package/dist/components/Tooltip/Tooltip.js +12 -18
  430. package/dist/components/Tooltip/Tooltip.js.map +1 -1
  431. package/dist/components/Tooltip/TooltipExample.js +1 -1
  432. package/dist/components/Tooltip/TooltipExample.js.map +1 -1
  433. package/dist/components/Tooltip/tooltip.css +0 -2
  434. package/dist/components/Tooltip/tooltip.css.js +0 -2
  435. package/dist/components/Truncated/Truncated.d.ts +1 -0
  436. package/dist/components/Truncated/Truncated.js +2 -8
  437. package/dist/components/Truncated/Truncated.js.map +1 -1
  438. package/dist/components/Truncated/truncated.css +8 -0
  439. package/dist/components/Truncated/truncated.css.js +13 -0
  440. package/dist/components/UIProvider/AriaLiveMessageHandler.d.ts +13 -0
  441. package/dist/components/UIProvider/AriaLiveMessageHandler.js +30 -0
  442. package/dist/components/UIProvider/AriaLiveMessageHandler.js.map +1 -0
  443. package/dist/components/UIProvider/UIProvider.d.ts +12 -1
  444. package/dist/components/UIProvider/UIProvider.js +13 -4
  445. package/dist/components/UIProvider/UIProvider.js.map +1 -1
  446. package/dist/components/UIProvider/UIProviderExample.d.ts +5 -0
  447. package/dist/components/UIProvider/UIProviderExample.js +92 -0
  448. package/dist/components/UIProvider/UIProviderExample.js.map +1 -0
  449. package/dist/constants/phases.js +0 -1
  450. package/dist/constants/phases.js.map +1 -1
  451. package/dist/hooks/useAddEventListener.d.ts +2 -1
  452. package/dist/hooks/useAddEventListener.js.map +1 -1
  453. package/dist/hooks/useArrowNavigation.d.ts +50 -0
  454. package/dist/hooks/useArrowNavigation.js +57 -0
  455. package/dist/hooks/useArrowNavigation.js.map +1 -0
  456. package/dist/hooks/useCheckboxGroupState.d.ts +1 -1
  457. package/dist/hooks/useContainerWidth.d.ts +16 -0
  458. package/dist/hooks/useContainerWidth.js +35 -0
  459. package/dist/hooks/useContainerWidth.js.map +1 -0
  460. package/dist/hooks/useFloating.d.ts +7 -6
  461. package/dist/hooks/useFloating.js +10 -12
  462. package/dist/hooks/useFloating.js.map +1 -1
  463. package/dist/hooks/useSnackbarContext.d.ts +1 -0
  464. package/dist/hooks/useSnackbarContext.js +16 -0
  465. package/dist/hooks/useSnackbarContext.js.map +1 -0
  466. package/dist/hooks/useSwipe.d.ts +6 -0
  467. package/dist/hooks/useSwipe.js +28 -0
  468. package/dist/hooks/useSwipe.js.map +1 -0
  469. package/dist/styles/base.css +87 -15
  470. package/dist/styles/base.css.js +87 -15
  471. package/dist/types/common.d.ts +9 -4
  472. package/dist/types/common.js.map +1 -1
  473. package/dist/types/meta.d.ts +1 -1
  474. package/dist/types/meta.js +0 -7
  475. package/dist/types/meta.js.map +1 -1
  476. package/dist/utils/createExampleChildElement.js +1 -1
  477. package/dist/utils/createExampleChildElement.js.map +1 -1
  478. package/dist/utils/demo.d.ts +31 -6
  479. package/dist/utils/demo.js.map +1 -1
  480. package/dist/utils/dom.d.ts +2 -0
  481. package/dist/utils/dom.js +9 -0
  482. package/dist/utils/dom.js.map +1 -0
  483. package/dist/utils/handleKeyDown.d.ts +4 -3
  484. package/dist/utils/handleKeyDown.js +6 -3
  485. package/dist/utils/handleKeyDown.js.map +1 -1
  486. package/dist/utils/keyboard.d.ts +2 -1
  487. package/dist/utils/keyboard.js.map +1 -1
  488. package/dist/utils/scrollListItemsStyle.d.ts +10 -0
  489. package/dist/utils/scrollListItemsStyle.js +17 -0
  490. package/dist/utils/scrollListItemsStyle.js.map +1 -0
  491. package/dist/utils/snackbarContext.d.ts +38 -0
  492. package/dist/utils/snackbarContext.js +3 -0
  493. package/dist/utils/snackbarContext.js.map +1 -0
  494. package/dist/utils/uiContext.d.ts +6 -0
  495. package/dist/utils/uiContext.js.map +1 -1
  496. package/dist/utils/useIds.d.ts +4 -0
  497. package/dist/utils/useIds.js +11 -0
  498. package/dist/utils/useIds.js.map +1 -0
  499. package/package.json +41 -12
  500. package/src/components/Accordion/Accordion.rtl.test.tsx +17 -0
  501. package/src/components/Accordion/Accordion.tsx +87 -24
  502. package/src/components/Accordion/AccordionExample.tsx +78 -72
  503. package/src/components/Accordion/accordion.scss +37 -36
  504. package/src/components/Avatar/Avatar.rtl.test.tsx +16 -0
  505. package/src/components/Avatar/Avatar.tsx +30 -26
  506. package/src/components/Avatar/AvatarExample.tsx +44 -42
  507. package/src/components/AvatarGroup/AvatarGroup.rtl.test.tsx +16 -0
  508. package/src/components/AvatarGroup/AvatarGroup.tsx +1 -2
  509. package/src/components/AvatarGroup/AvatarGroupExample.tsx +36 -28
  510. package/src/components/Badge/Badge.rtl.test.tsx +19 -0
  511. package/src/components/Badge/Badge.tsx +1 -2
  512. package/src/components/BadgeDot/BadgeDot.rtl.test.tsx +19 -0
  513. package/src/components/BadgeDot/BadgeDot.tsx +1 -2
  514. package/src/components/BannerAlert/BannerAlert.rtl.test.tsx +26 -0
  515. package/src/components/BannerAlert/BannerAlert.tsx +16 -7
  516. package/src/components/BannerAlert/BannerAlertExample.tsx +4 -0
  517. package/src/components/BannerAlert/banner-alert.scss +0 -28
  518. package/src/components/BottomNavigation/BottomNavigation.rtl.test.tsx +21 -0
  519. package/src/components/BottomNavigation/BottomNavigation.tsx +60 -0
  520. package/src/components/BottomNavigation/BottomNavigationExample.tsx +121 -0
  521. package/src/components/BottomNavigation/bottom-navigation.scss +87 -0
  522. package/src/components/BottomNavigation/index.tsx +1 -0
  523. package/src/components/Breadcrumb/Breadcrumb.rtl.test.tsx +16 -0
  524. package/src/components/Breadcrumb/Breadcrumb.tsx +57 -73
  525. package/src/components/Breadcrumb/BreadcrumbExample.tsx +152 -150
  526. package/src/components/Button/Button.rtl.test.tsx +16 -0
  527. package/src/components/Button/Button.tsx +8 -5
  528. package/src/components/Button/ButtonExample.tsx +27 -25
  529. package/src/components/ButtonDock/ButtonDock.rtl.test.tsx +18 -0
  530. package/src/components/ButtonDock/ButtonDock.tsx +68 -0
  531. package/src/components/ButtonDock/ButtonDockExample.tsx +77 -0
  532. package/src/components/ButtonDock/button-dock.scss +49 -0
  533. package/src/components/ButtonDock/index.tsx +1 -0
  534. package/src/components/CalendarPicker/CalendarPicker.rtl.test.tsx +15 -0
  535. package/src/components/CalendarPicker/CalendarPicker.tsx +424 -0
  536. package/src/components/CalendarPicker/CalendarPickerExample.tsx +24 -0
  537. package/src/components/CalendarPicker/calendar-picker.scss +89 -0
  538. package/src/components/CalendarPicker/index.tsx +1 -0
  539. package/src/components/Card/Card.rtl.test.tsx +19 -0
  540. package/src/components/Card/Card.tsx +4 -11
  541. package/src/components/Card/CardExample.tsx +1 -0
  542. package/src/components/Card/card.scss +0 -5
  543. package/src/components/Carousel/Carousel.tsx +177 -0
  544. package/src/components/Carousel/CarouselExample.tsx +82 -0
  545. package/src/components/Carousel/carousel.scss +39 -0
  546. package/src/components/Carousel/index.tsx +1 -0
  547. package/src/components/Checkbox/Checkbox.rtl.test.tsx +27 -0
  548. package/src/components/Checkbox/Checkbox.tsx +1 -3
  549. package/src/components/Checkbox/checkbox.scss +4 -4
  550. package/src/components/CheckboxGroup/CheckboxGroup.rtl.test.tsx +19 -0
  551. package/src/components/CheckboxGroup/CheckboxGroupExample.tsx +51 -43
  552. package/src/components/CheckboxOption/CheckboxOption.rtl.test.tsx +24 -0
  553. package/src/components/ChipAssist/ChipAssist.rtl.test.tsx +16 -0
  554. package/src/components/ChipAssist/ChipAssistExample.tsx +26 -24
  555. package/src/components/ChipFilter/ChipFilter.rtl.test.tsx +15 -0
  556. package/src/components/ChipFilter/ChipFilterExample.tsx +3 -0
  557. package/src/components/ChipGroup/ChipGroup.rtl.test.tsx +32 -0
  558. package/src/components/ChipGroup/ChipGroupExample.tsx +11 -9
  559. package/src/components/ChipInput/ChipInput.rtl.test.tsx +16 -0
  560. package/src/components/ChipInput/ChipInputExample.tsx +41 -39
  561. package/src/components/ChipSuggestion/ChipSuggestion.rtl.test.tsx +19 -0
  562. package/src/components/ChipSuggestion/ChipSuggestionExample.tsx +18 -16
  563. package/src/components/ChipUtility/ChipUtility.rtl.test.tsx +16 -0
  564. package/src/components/ChipUtility/ChipUtility.tsx +1 -3
  565. package/src/components/ChipUtility/ChipUtilityExample.tsx +56 -54
  566. package/src/components/DateField/DateField.rtl.test.tsx +24 -0
  567. package/src/components/DateField/DateField.tsx +58 -0
  568. package/src/components/DateField/DateFieldExample.tsx +13 -0
  569. package/src/components/DateField/date-field.scss +8 -0
  570. package/src/components/DateField/index.tsx +1 -0
  571. package/src/components/DateInput/DateInput.rtl.test.tsx +17 -0
  572. package/src/components/DateInput/DateInput.tsx +197 -0
  573. package/src/components/DateInput/DateInputExample.tsx +17 -0
  574. package/src/components/DateInput/date-input.scss +13 -0
  575. package/src/components/DateInput/index.tsx +1 -0
  576. package/src/components/Dialog/Dialog.rtl.test.tsx +22 -0
  577. package/src/components/Dialog/Dialog.tsx +26 -7
  578. package/src/components/Dialog/DialogExample.tsx +4 -1
  579. package/src/components/Dialog/dialog.scss +25 -79
  580. package/src/components/Divider/Divider.rtl.test.tsx +8 -0
  581. package/src/components/Divider/Divider.tsx +1 -2
  582. package/src/components/Divider/DividerExample.tsx +6 -2
  583. package/src/components/Divider/divider.scss +1 -1
  584. package/src/components/Drawer/Drawer.rtl.test.tsx +27 -0
  585. package/src/components/Drawer/Drawer.tsx +135 -0
  586. package/src/components/Drawer/DrawerExample.tsx +93 -0
  587. package/src/components/Drawer/drawer.scss +67 -0
  588. package/src/components/Drawer/index.tsx +1 -0
  589. package/src/components/EmptyState/EmptyState.rtl.test.tsx +16 -0
  590. package/src/components/EmptyState/EmptyStateExample.tsx +24 -16
  591. package/src/components/Fab/Fab.rtl.test.tsx +15 -0
  592. package/src/components/Fab/Fab.tsx +6 -4
  593. package/src/components/Fab/FabExample.tsx +5 -2
  594. package/src/components/FileUpload/FileUpload.rtl.test.tsx +14 -0
  595. package/src/components/FileUpload/FileUpload.tsx +1 -2
  596. package/src/components/FileUpload/FileUploadExample.tsx +19 -17
  597. package/src/components/FileUploadItem/FileUploadItem.rtl.test.tsx +19 -0
  598. package/src/components/FileUploadItem/FileUploadItem.tsx +1 -3
  599. package/src/components/FileUploadItem/FileUploadItemExample.tsx +47 -40
  600. package/src/components/FormField/FormField.rtl.test.tsx +30 -0
  601. package/src/components/FormField/FormField.tsx +3 -4
  602. package/src/components/FormField/form-field.scss +1 -1
  603. package/src/components/Img/Img.rtl.test.tsx +15 -0
  604. package/src/components/InlineAlert/InlineAlert.rtl.test.tsx +15 -0
  605. package/src/components/InlineAlert/InlineAlert.tsx +1 -2
  606. package/src/components/Layout/Layout.rtl.test.tsx +15 -0
  607. package/src/components/Layout/LayoutExample.tsx +4 -1
  608. package/src/components/Link/Link.rtl.test.tsx +14 -0
  609. package/src/components/Link/Link.tsx +1 -3
  610. package/src/components/Link/LinkExample.tsx +4 -1
  611. package/src/components/ListItem/ListItem.rtl.test.tsx +18 -0
  612. package/src/components/ListItem/ListItem.tsx +132 -73
  613. package/src/components/ListItem/ListItemExample.tsx +14 -13
  614. package/src/components/ListItem/list-item.scss +16 -10
  615. package/src/components/ListItemMenu/ListItemMenu.tsx +358 -0
  616. package/src/components/ListItemMenu/index.tsx +1 -0
  617. package/src/components/Menu/Menu.rtl.test.tsx +15 -0
  618. package/src/components/Menu/Menu.tsx +39 -106
  619. package/src/components/Menu/MenuExample.tsx +2 -32
  620. package/src/components/Menu/menu.scss +4 -16
  621. package/src/components/MenuButton/MenuButton.rtl.test.tsx +15 -0
  622. package/src/components/MenuButton/MenuButton.tsx +1 -3
  623. package/src/components/Modal/Modal.rtl.test.tsx +20 -0
  624. package/src/components/Modal/Modal.tsx +8 -5
  625. package/src/components/NumberField/NumberField.rtl.test.tsx +24 -0
  626. package/src/components/NumberInput/NumberInput.rtl.test.tsx +15 -0
  627. package/src/components/NumberInput/NumberInput.tsx +16 -22
  628. package/src/components/NumberInput/number-input.scss +0 -1
  629. package/src/components/OTPInput/OTPInput.rtl.test.tsx +19 -0
  630. package/src/components/OTPInput/OTPInput.tsx +3 -4
  631. package/src/components/OTPInput/OTPInputExample.tsx +21 -17
  632. package/src/components/PageControl/PageControl.rtl.test.tsx +15 -0
  633. package/src/components/PageControl/PageControl.tsx +23 -23
  634. package/src/components/PageControl/PageControlExample.tsx +36 -0
  635. package/src/components/Pagination/Pagination.rtl.test.tsx +15 -0
  636. package/src/components/Pagination/Pagination.tsx +2 -7
  637. package/src/components/PasswordField/PasswordField.rtl.test.tsx +24 -0
  638. package/src/components/PasswordField/PasswordField.tsx +4 -5
  639. package/src/components/PasswordInput/PasswordInput.rtl.test.tsx +15 -0
  640. package/src/components/PasswordInput/PasswordInput.tsx +2 -2
  641. package/src/components/PhoneNumberField/PhoneNumberField.rtl.test.tsx +24 -0
  642. package/src/components/PhoneNumberInput/PhoneNumberInput.rtl.test.tsx +17 -0
  643. package/src/components/PhoneNumberInput/PhoneNumberInput.tsx +103 -144
  644. package/src/components/PhoneNumberInput/PhoneNumberInputExample.tsx +8 -0
  645. package/src/components/PhoneNumberInput/phone-number-input.scss +40 -31
  646. package/src/components/Popover/Popover.rtl.test.tsx +28 -0
  647. package/src/components/Popover/Popover.tsx +82 -72
  648. package/src/components/Popover/PopoverExample.tsx +7 -1
  649. package/src/components/Popover/popover.scss +3 -13
  650. package/src/components/Portal/Portal.rtl.test.tsx +15 -0
  651. package/src/components/ProgressBar/ProgressBar.rtl.test.tsx +15 -0
  652. package/src/components/ProgressBar/ProgressBar.tsx +1 -2
  653. package/src/components/ProgressCircle/ProgressCircle.rtl.test.tsx +15 -0
  654. package/src/components/ProgressCircle/ProgressCircle.tsx +1 -2
  655. package/src/components/ProgressionStepper/ProgressionStepper.rtl.test.tsx +19 -0
  656. package/src/components/ProgressionStepper/ProgressionStepper.tsx +2 -4
  657. package/src/components/ProgressionStepper/ProgressionStepperExample.tsx +49 -47
  658. package/src/components/ProgressionStepperBar/ProgressionStepperBar.rtl.test.tsx +15 -0
  659. package/src/components/ProgressionStepperBar/ProgressionStepperBar.tsx +9 -4
  660. package/src/components/Radio/Radio.rtl.test.tsx +15 -0
  661. package/src/components/Radio/Radio.tsx +1 -3
  662. package/src/components/RadioGroup/RadioGroup.rtl.test.tsx +32 -0
  663. package/src/components/RadioGroup/RadioGroup.tsx +2 -3
  664. package/src/components/RadioGroup/RadioGroupExample.tsx +3 -1
  665. package/src/components/RadioOption/RadioOption.rtl.test.tsx +15 -0
  666. package/src/components/RadioOption/RadioOption.tsx +1 -1
  667. package/src/components/Rating/Rating.rtl.test.tsx +16 -0
  668. package/src/components/Rating/Rating.tsx +9 -12
  669. package/src/components/Rating/RatingExample.tsx +11 -9
  670. package/src/components/Scrim/Scrim.rtl.test.tsx +15 -0
  671. package/src/components/Scrim/Scrim.tsx +11 -4
  672. package/src/components/Scrim/scrim.scss +0 -4
  673. package/src/components/SearchBar/SearchBar.rtl.test.tsx +41 -0
  674. package/src/components/SearchBar/SearchBar.tsx +95 -89
  675. package/src/components/SearchBar/SearchBarExample.tsx +3 -20
  676. package/src/components/SegmentedControl/SegmentedControl.rtl.test.tsx +26 -0
  677. package/src/components/SegmentedControl/SegmentedControl.tsx +2 -4
  678. package/src/components/SegmentedControl/SegmentedControlExample.tsx +34 -24
  679. package/src/components/SegmentedControl/segmented-control.scss +19 -14
  680. package/src/components/Select/Select.rtl.test.tsx +25 -0
  681. package/src/components/Select/Select.tsx +229 -102
  682. package/src/components/Select/SelectExample.tsx +111 -91
  683. package/src/components/Select/select.scss +13 -23
  684. package/src/components/SelectField/SelectField.rtl.test.tsx +25 -0
  685. package/src/components/SelectField/SelectFieldExample.tsx +16 -0
  686. package/src/components/Skeleton/Skeleton.rtl.test.tsx +16 -0
  687. package/src/components/Skeleton/SkeletonExample.tsx +12 -10
  688. package/src/components/SkeletonText/SkeletonText.rtl.test.tsx +16 -0
  689. package/src/components/SkeletonText/SkeletonTextExample.tsx +14 -13
  690. package/src/components/Slider/Slider.rtl.test.tsx +8 -0
  691. package/src/components/Slider/Slider.tsx +1 -2
  692. package/src/components/Slider/SliderExample.tsx +3 -0
  693. package/src/components/Snackbar/Snackbar.tsx +48 -0
  694. package/src/components/Snackbar/SnackbarExample.tsx +12 -0
  695. package/src/components/Snackbar/index.tsx +1 -0
  696. package/src/components/Snackbar/snackbar.scss +22 -0
  697. package/src/components/SnackbarProvider/SnackbarProvider.tsx +160 -0
  698. package/src/components/SnackbarProvider/SnackbarProviderExample.tsx +127 -0
  699. package/src/components/SnackbarProvider/index.tsx +1 -0
  700. package/src/components/SnackbarProvider/snackbar-provider-example.scss +17 -0
  701. package/src/components/SnackbarProvider/snackbar-provider.scss +15 -0
  702. package/src/components/Switch/Switch.rtl.test.tsx +15 -0
  703. package/src/components/Switch/Switch.tsx +1 -3
  704. package/src/components/SwitchOption/SwitchOption.rtl.test.tsx +15 -0
  705. package/src/components/TabGroup/TabGroup.rtl.test.tsx +19 -0
  706. package/src/components/TabGroup/TabGroup.tsx +1 -2
  707. package/src/components/TabGroup/TabGroupExample.tsx +52 -46
  708. package/src/components/TabGroup/tab-group.scss +7 -5
  709. package/src/components/TabList/TabList.rtl.test.tsx +26 -0
  710. package/src/components/TabList/TabList.tsx +36 -31
  711. package/src/components/TabList/tab-list.scss +6 -9
  712. package/src/components/Table/Table.rtl.test.tsx +28 -0
  713. package/src/components/Tag/Tag.rtl.test.tsx +20 -0
  714. package/src/components/Tag/Tag.tsx +1 -3
  715. package/src/components/Tag/TagExample.tsx +14 -12
  716. package/src/components/TextField/TextField.rtl.test.tsx +24 -0
  717. package/src/components/TextField/TextField.tsx +0 -1
  718. package/src/components/TextField/TextFieldExample.tsx +8 -0
  719. package/src/components/TextInput/TextInput.rtl.test.tsx +17 -0
  720. package/src/components/TextInput/TextInput.tsx +46 -12
  721. package/src/components/TextInput/TextInputExample.tsx +9 -0
  722. package/src/components/TextInput/text-input.scss +9 -31
  723. package/src/components/Textarea/Textarea.rtl.test.tsx +17 -0
  724. package/src/components/Textarea/Textarea.tsx +5 -16
  725. package/src/components/TextareaField/TextareaField.rtl.test.tsx +24 -0
  726. package/src/components/TextareaField/TextareaField.tsx +2 -0
  727. package/src/components/TimeInput/Listbox.tsx +37 -64
  728. package/src/components/TimeInput/Segment.tsx +31 -21
  729. package/src/components/TimeInput/TimeInput.rtl.test.tsx +15 -0
  730. package/src/components/TimeInput/TimeInput.tsx +132 -65
  731. package/src/components/TimeInput/time-input.scss +5 -4
  732. package/src/components/ToggleOption/ToggleOption.rtl.test.tsx +15 -0
  733. package/src/components/ToggleOption/ToggleOption.tsx +1 -2
  734. package/src/components/Tooltip/Tooltip.rtl.test.tsx +24 -0
  735. package/src/components/Tooltip/Tooltip.tsx +14 -31
  736. package/src/components/Tooltip/TooltipExample.tsx +6 -8
  737. package/src/components/Tooltip/tooltip.scss +0 -2
  738. package/src/components/TopNavigation/TopNavigation.rtl.test.tsx +15 -0
  739. package/src/components/Truncated/Truncated.rtl.test.tsx +15 -0
  740. package/src/components/Truncated/Truncated.tsx +2 -9
  741. package/src/components/Truncated/truncated.scss +8 -0
  742. package/src/components/Txt/Txt.rtl.test.tsx +15 -0
  743. package/src/components/UIProvider/AriaLiveMessageHandler.tsx +44 -0
  744. package/src/components/UIProvider/UIProvider.tsx +16 -2
  745. package/src/components/UIProvider/UIProviderExample.tsx +146 -0
  746. package/src/constants/phases.ts +0 -1
  747. package/src/hooks/useAddEventListener.ts +3 -1
  748. package/src/hooks/useArrowNavigation.ts +107 -0
  749. package/src/hooks/useContainerWidth.tsx +37 -0
  750. package/src/hooks/useFloating.ts +20 -19
  751. package/src/hooks/useSnackbarContext.ts +18 -0
  752. package/src/hooks/useSwipe.ts +32 -0
  753. package/src/rtl/hasNoBasicA11yIssues.tsx +27 -0
  754. package/src/rtl/util.tsx +10 -0
  755. package/src/styles/base.scss +131 -70
  756. package/src/types/common.ts +9 -4
  757. package/src/types/meta.ts +1 -9
  758. package/src/utils/createExampleChildElement.tsx +1 -1
  759. package/src/utils/demo.ts +41 -7
  760. package/src/utils/dom.ts +6 -0
  761. package/src/utils/handleKeyDown.ts +11 -6
  762. package/src/utils/keyboard.ts +3 -0
  763. package/src/utils/scrollListItemsStyle.ts +29 -0
  764. package/src/utils/snackbarContext.tsx +43 -0
  765. package/src/utils/uiContext.ts +4 -1
  766. package/src/utils/useIds.ts +16 -0
  767. package/tsconfig.build.json +21 -0
  768. package/tsconfig.json +9 -1
  769. package/dist/components/Accordion/AccordionSection.d.ts +0 -84
  770. package/dist/components/Accordion/AccordionSection.js +0 -27
  771. package/dist/components/Accordion/AccordionSection.js.map +0 -1
  772. package/dist/components/Combobox/Combobox.d.ts +0 -92
  773. package/dist/components/Combobox/Combobox.js +0 -58
  774. package/dist/components/Combobox/Combobox.js.map +0 -1
  775. package/dist/components/Combobox/ListItems.d.ts +0 -26
  776. package/dist/components/Combobox/ListItems.js +0 -22
  777. package/dist/components/Combobox/ListItems.js.map +0 -1
  778. package/dist/components/Combobox/index.d.ts +0 -1
  779. package/dist/components/Combobox/index.js +0 -2
  780. package/dist/components/Combobox/index.js.map +0 -1
  781. package/dist/components/Listbox/Listbox.d.ts +0 -116
  782. package/dist/components/Listbox/Listbox.js +0 -83
  783. package/dist/components/Listbox/Listbox.js.map +0 -1
  784. package/dist/components/Listbox/index.d.ts +0 -1
  785. package/dist/components/Listbox/index.js +0 -2
  786. package/dist/components/Listbox/index.js.map +0 -1
  787. package/dist/hooks/useCombobox.d.ts +0 -56
  788. package/dist/hooks/useCombobox.js +0 -104
  789. package/dist/hooks/useCombobox.js.map +0 -1
  790. package/dist/hooks/useKeyNavigation.d.ts +0 -17
  791. package/dist/hooks/useKeyNavigation.js +0 -46
  792. package/dist/hooks/useKeyNavigation.js.map +0 -1
  793. package/src/components/Accordion/AccordionSection.tsx +0 -128
  794. package/src/components/Combobox/Combobox.tsx +0 -224
  795. package/src/components/Combobox/ListItems.tsx +0 -107
  796. package/src/components/Combobox/index.tsx +0 -1
  797. package/src/components/Listbox/Listbox.tsx +0 -257
  798. package/src/components/Listbox/index.tsx +0 -1
  799. package/src/hooks/useCombobox.ts +0 -173
  800. package/src/hooks/useKeyNavigation.ts +0 -66
  801. package/src/utils/placeholder.test.ts +0 -7
@@ -0,0 +1,102 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import './date-input.css.js';
3
+ import { SvgEvent } from '@bspk/icons/Event';
4
+ import { format, isValid, parse } from 'date-fns';
5
+ import { useEffect, useRef, useState } from 'react';
6
+ import { Button } from '../Button';
7
+ import { CalendarPicker } from '../CalendarPicker';
8
+ import { Portal } from '../Portal';
9
+ import { TextInput } from '../TextInput';
10
+ import { useFloating } from '../../hooks/useFloating';
11
+ import { useOutsideClick } from '../../hooks/useOutsideClick';
12
+ const parsableDate = (dateString) => /^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString);
13
+ /**
14
+ * An input that allows a customer to manually type in a specific date or triggers a date picker combobox to select a
15
+ * date.
16
+ *
17
+ * @example
18
+ * import { DateInput } from '@bspk/ui/DateInput';
19
+ * import { useState } from 'react';
20
+ *
21
+ * function Example() {
22
+ * const [date, setDate] = useState<Date | undefined>(new Date());
23
+ *
24
+ * return <DateInput name="calendar input" aria-label="calendar input" value={date} onChange={setDate} />;
25
+ * }
26
+ *
27
+ * @name DateInput
28
+ * @phase Utility
29
+ */
30
+ export function DateInput({ value, onChange, disabled, readOnly, closeCalendarOnChange = true, 'aria-label': ariaLabel, name, placeholder, invalid, required, size, 'aria-errormessage': ariaErrorMessage, }) {
31
+ const [textValue, setTextValue] = useState(value ? format(value, 'MM/dd/yyyy') : '');
32
+ const [calendarVisible, setCalendarVisible] = useState(false);
33
+ const containerRef = useRef(null);
34
+ useEffect(() => {
35
+ const formattedValue = value ? format(value, 'MM/dd/yyyy') : '';
36
+ setTextValue(formattedValue);
37
+ }, [value]);
38
+ const { elements, floatingStyles } = useFloating({
39
+ placement: 'bottom',
40
+ strategy: 'absolute',
41
+ offsetOptions: 4,
42
+ refWidth: true,
43
+ });
44
+ useOutsideClick({
45
+ elements: [elements.floating, containerRef.current],
46
+ callback: () => setCalendarVisible(false),
47
+ });
48
+ const isValidDate = (next) => {
49
+ const parsedDate = parse(next, 'MM/dd/yyyy', new Date());
50
+ return isValid(parsedDate) ? parsedDate : undefined;
51
+ };
52
+ const validate = () => {
53
+ let nextDate;
54
+ let nextTextValue = '';
55
+ if (parsableDate(textValue)) {
56
+ nextDate = isValidDate(textValue);
57
+ if (nextDate)
58
+ nextTextValue = format(nextDate, 'MM/dd/yyyy');
59
+ }
60
+ setTextValue(nextTextValue);
61
+ onChange(nextDate);
62
+ };
63
+ const handleTextChange = (nextValue) => {
64
+ // Add slashes as the user types
65
+ if (/^\d{2}$/.test(nextValue) || /^\d{1,2}\/\d{2}$/.test(nextValue))
66
+ nextValue = `${nextValue}/`;
67
+ // Remove extra slashes
68
+ if (nextValue.endsWith('//'))
69
+ nextValue = nextValue.slice(0, -1);
70
+ setTextValue(nextValue);
71
+ if (parsableDate(nextValue)) {
72
+ const next = isValidDate(nextValue);
73
+ if (next)
74
+ onChange(next);
75
+ }
76
+ };
77
+ return (_jsxs("span", { "data-bspk": "date-input", ref: containerRef, children: [_jsx("div", { ref: (node) => {
78
+ elements.setReference(node);
79
+ }, children: _jsx(TextInput, { "aria-errormessage": ariaErrorMessage || undefined, "aria-label": ariaLabel, disabled: disabled, invalid: invalid || undefined, name: name, onBlur: () => validate(), onChange: handleTextChange, onKeyDown: (event) => {
80
+ // allow select all and other keyboard shortcuts
81
+ if (event.ctrlKey || event.metaKey) {
82
+ return;
83
+ }
84
+ // handle backspace and delete to remove the slash and the number before it
85
+ if (event.key === 'Backspace' || (event.key === 'Delete' && textValue.endsWith('/'))) {
86
+ event.preventDefault();
87
+ setTextValue((prev) => prev.slice(0, -2));
88
+ }
89
+ // if a single key and not a number or forward slash ignore
90
+ if (event.key.length === 1 && !/[0-9/]/.test(event.key)) {
91
+ event.preventDefault();
92
+ }
93
+ }, placeholder: placeholder || 'mm/dd/yyyy', readOnly: readOnly, required: required, showClearButton: false, size: size, trailing: !disabled &&
94
+ !readOnly && (_jsx(Button, { icon: _jsx(SvgEvent, {}), iconOnly: true, label: "Toggle calendar", onClick: () => setCalendarVisible((prev) => !prev), variant: "tertiary" })), value: textValue }) }), calendarVisible && (_jsx(Portal, { children: _jsx("div", { "data-placement": "bottom", ref: (node) => {
95
+ elements.setFloating(node);
96
+ }, style: { ...floatingStyles, zIndex: 'var( --z-index-dropdown)' }, children: _jsx(CalendarPicker, { onChange: (next) => {
97
+ if (closeCalendarOnChange)
98
+ setCalendarVisible(false);
99
+ onChange(next);
100
+ }, value: value, variant: "elevated" }) }) }))] }));
101
+ }
102
+ //# sourceMappingURL=DateInput.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,YAAY,GAAG,CAAC,UAAkB,EAAE,EAAE,CAAC,2BAA2B,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AAwB1F;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,SAAS,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,qBAAqB,GAAG,IAAI,EAC5B,YAAY,EAAE,SAAS,EACvB,IAAI,EACJ,WAAW,EACX,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,mBAAmB,EAAE,gBAAgB,GACxB;IACb,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACrF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,YAAY,GAAG,MAAM,CAAyB,IAAI,CAAC,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,cAAc,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAChE,YAAY,CAAC,cAAc,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,WAAW,CAAC;QAC7C,SAAS,EAAE,QAAQ;QACnB,QAAQ,EAAE,UAAU;QACpB,aAAa,EAAE,CAAC;QAChB,QAAQ,EAAE,IAAI;KACjB,CAAC,CAAC;IAEH,eAAe,CAAC;QACZ,QAAQ,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC,OAAO,CAAC;QACnD,QAAQ,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC;KAC5C,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,EAAE;QACjC,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,EAAE,YAAY,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC;QACzD,OAAO,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IACxD,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,IAAI,QAA0B,CAAC;QAC/B,IAAI,aAAa,GAAG,EAAE,CAAC;QAEvB,IAAI,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;YAC1B,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;YAClC,IAAI,QAAQ;gBAAE,aAAa,GAAG,MAAM,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACjE,CAAC;QAED,YAAY,CAAC,aAAa,CAAC,CAAC;QAC5B,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,CAAC,SAAiB,EAAE,EAAE;QAC3C,gCAAgC;QAChC,IAAI,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC;YAAE,SAAS,GAAG,GAAG,SAAS,GAAG,CAAC;QAEjG,uBAAuB;QACvB,IAAI,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC;YAAE,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QAEjE,YAAY,CAAC,SAAS,CAAC,CAAC;QAExB,IAAI,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;YAC1B,MAAM,IAAI,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;YACpC,IAAI,IAAI;gBAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,6BAAgB,YAAY,EAAC,GAAG,EAAE,YAAY,aAC1C,cACI,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACV,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;gBAChC,CAAC,YAED,KAAC,SAAS,yBACa,gBAAgB,IAAI,SAAS,gBACpC,SAAS,EACrB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,IAAI,SAAS,EAC7B,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,EACxB,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;wBACjB,gDAAgD;wBAChD,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;4BACjC,OAAO;wBACX,CAAC;wBAED,2EAA2E;wBAC3E,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;4BACnF,KAAK,CAAC,cAAc,EAAE,CAAC;4BACvB,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;wBAC9C,CAAC;wBAED,2DAA2D;wBAC3D,IAAI,KAAK,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;4BACtD,KAAK,CAAC,cAAc,EAAE,CAAC;wBAC3B,CAAC;oBACL,CAAC,EACD,WAAW,EAAE,WAAW,IAAI,YAAY,EACxC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,KAAK,EACtB,IAAI,EAAE,IAAI,EACV,QAAQ,EACJ,CAAC,QAAQ;wBACT,CAAC,QAAQ,IAAI,CACT,KAAC,MAAM,IACH,IAAI,EAAE,KAAC,QAAQ,KAAG,EAClB,QAAQ,QACR,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAClD,OAAO,EAAC,UAAU,GACpB,CACL,EAEL,KAAK,EAAE,SAAS,GAClB,GACA,EACL,eAAe,IAAI,CAChB,KAAC,MAAM,cACH,gCACmB,QAAQ,EACvB,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;wBACV,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;oBAC/B,CAAC,EACD,KAAK,EAAE,EAAE,GAAG,cAAc,EAAE,MAAM,EAAE,0BAA0B,EAAE,YAEhE,KAAC,cAAc,IACX,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE;4BACf,IAAI,qBAAqB;gCAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;4BACrD,QAAQ,CAAC,IAAI,CAAC,CAAC;wBACnB,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,UAAU,GACpB,GACA,GACD,CACZ,IACE,CACV,CAAC;AACN,CAAC"}
@@ -0,0 +1,4 @@
1
+ import { DateInputProps } from '.';
2
+ import { ComponentExample, Preset } from '-/utils/demo';
3
+ export declare const presets: Preset<DateInputProps>[];
4
+ export declare const DateInputExample: ComponentExample<DateInputProps>;
@@ -0,0 +1,14 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ export const presets = [];
3
+ export const DateInputExample = {
4
+ defaultState: {},
5
+ disableProps: [],
6
+ presets,
7
+ render: ({ props, Component }) => {
8
+ const { value, ...restProps } = props;
9
+ return _jsx(Component, { ...restProps, value: value?.getDate ? value : undefined });
10
+ },
11
+ sections: [],
12
+ variants: false,
13
+ };
14
+ //# sourceMappingURL=DateInputExample.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DateInputExample.js","sourceRoot":"","sources":["../../../src/components/DateInput/DateInputExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,OAAO,GAA6B,EAAE,CAAC;AAEpD,MAAM,CAAC,MAAM,gBAAgB,GAAqC;IAC9D,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,OAAO;IACP,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;QAEtC,OAAO,KAAC,SAAS,OAAK,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAAI,CAAC;IACnF,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,KAAK;CAClB,CAAC"}
@@ -0,0 +1,12 @@
1
+ [data-bspk=date-input] {
2
+ display: flex;
3
+ flex-direction: column;
4
+ justify-content: center;
5
+ min-width: 360px;
6
+ width: 100%;
7
+ }
8
+ [data-bspk=date-input] [data-bspk=text-input] {
9
+ padding-right: 0;
10
+ }
11
+
12
+ /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
@@ -0,0 +1,17 @@
1
+ /** * This file is generated by the build script.
2
+ * Do not edit this file directly. */
3
+ const style = document.createElement('style');
4
+ style.appendChild(document.createTextNode(`[data-bspk=date-input] {
5
+ display: flex;
6
+ flex-direction: column;
7
+ justify-content: center;
8
+ min-width: 360px;
9
+ width: 100%;
10
+ }
11
+ [data-bspk=date-input] [data-bspk=text-input] {
12
+ padding-right: 0;
13
+ }
14
+
15
+ /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
16
+ `));
17
+ document.head.appendChild(style);
@@ -0,0 +1 @@
1
+ export * from './DateInput';
@@ -0,0 +1,2 @@
1
+ export * from './DateInput';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DateInput/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}
@@ -1,7 +1,7 @@
1
+ import './dialog.scss';
1
2
  import { ReactNode } from 'react';
2
3
  import { PortalProps } from '-/components/Portal';
3
4
  import { CommonProps, ElementProps, SetRef } from '-/types/common';
4
- import './dialog.scss';
5
5
  export type DialogProps = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'container'> & {
6
6
  /** The content of the dialog. */
7
7
  children?: ReactNode;
@@ -32,6 +32,19 @@ export type DialogProps = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'conta
32
32
  * @default true
33
33
  */
34
34
  showScrim?: boolean;
35
+ /**
36
+ * If the dialog should take the full width of the screen.
37
+ *
38
+ * @default false
39
+ */
40
+ widthFull?: boolean;
41
+ /**
42
+ * If focus trapping should be disabled. Generally this should not be disabled as dialogs should always trap
43
+ * focus.
44
+ *
45
+ * @default false
46
+ */
47
+ disableFocusTrap?: boolean;
35
48
  };
36
49
  /**
37
50
  * Dialogs display important information that users need to acknowledge. They appear over the interface and block
@@ -59,5 +72,5 @@ export type DialogProps = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'conta
59
72
  * @name Dialog
60
73
  * @phase Utility
61
74
  */
62
- export declare function Dialog({ children, innerRef, onClose, open, placement, showScrim, id: idProp, owner, container, ...containerProps }: ElementProps<DialogProps, 'div'>): false | import("react/jsx-runtime").JSX.Element;
75
+ export declare function Dialog({ children, innerRef, onClose, open, placement, showScrim, widthFull, id: idProp, owner, container, disableFocusTrap, ...containerProps }: ElementProps<DialogProps, 'div'>): false | import("react/jsx-runtime").JSX.Element;
63
76
  /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
@@ -1,10 +1,10 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import './dialog.css.js';
2
3
  import { FocusTrap } from 'focus-trap-react';
3
4
  import { useCallback, useEffect, useRef } from 'react';
4
5
  import { Portal } from '../Portal';
5
6
  import { Scrim } from '../Scrim';
6
7
  import { useId } from '../../hooks/useId';
7
- import './dialog.css.js';
8
8
  /**
9
9
  * Dialogs display important information that users need to acknowledge. They appear over the interface and block
10
10
  * further interactions until an action is selected.
@@ -31,20 +31,22 @@ import './dialog.css.js';
31
31
  * @name Dialog
32
32
  * @phase Utility
33
33
  */
34
- export function Dialog({ children, innerRef, onClose, open = false, placement = 'center', showScrim = true, id: idProp, owner, container, ...containerProps }) {
34
+ export function Dialog({ children, innerRef, onClose, open = false, placement = 'center', showScrim = true, widthFull = false, id: idProp, owner, container, disableFocusTrap, ...containerProps }) {
35
35
  const id = useId(idProp);
36
36
  const boxRef = useRef(null);
37
- const handleKeyDown = useCallback((e) => e.key === 'Escape' && onClose(), [onClose]);
37
+ const handleKeyDown = useCallback((e) => open && e.key === 'Escape' && onClose(), [onClose, open]);
38
38
  useEffect(() => {
39
39
  document.documentElement.style.overflow = open ? 'hidden' : '';
40
- if (open)
41
- document.addEventListener('keydown', handleKeyDown);
42
- return () => document.removeEventListener('keydown', handleKeyDown);
40
+ document.addEventListener('keydown', handleKeyDown);
41
+ return () => {
42
+ document.documentElement.style.overflow = '';
43
+ document.removeEventListener('keydown', handleKeyDown);
44
+ };
43
45
  }, [handleKeyDown, open]);
44
- return (open && (_jsxs(Portal, { container: container, children: [_jsx("div", { ...containerProps, "data-bspk": "dialog", "data-bspk-owner": owner || undefined, "data-placement": placement, id: id, ref: innerRef, role: "presentation", children: _jsx(FocusTrap, { focusTrapOptions: {
45
- fallbackFocus: () => boxRef.current,
46
+ return (open && (_jsxs(Portal, { container: container, children: [_jsx("div", { ...containerProps, "data-bspk": "dialog", "data-bspk-owner": owner || undefined, "data-placement": placement, id: id, ref: innerRef, role: "presentation", children: _jsx(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: {
46
47
  clickOutsideDeactivates: true,
47
- }, children: _jsx("div", { "data-dialog-box": true, ref: (node) => {
48
+ fallbackFocus: () => boxRef.current,
49
+ }, children: _jsx("div", { "data-dialog-box": true, "data-width-full": widthFull, ref: (node) => {
48
50
  boxRef.current = node;
49
51
  }, tabIndex: -1, children: children }) }) }), _jsx(Scrim, { onClick: () => {
50
52
  onClose();
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtC,OAAO,eAAe,CAAC;AAmCvB;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,SAAS,GAAG,QAAQ,EACpB,SAAS,GAAG,IAAI,EAChB,EAAE,EAAE,MAAM,EACV,KAAK,EACL,SAAS,EACT,GAAG,cAAc,EACc;IAC/B,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEnD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAgB,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEpG,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/D,IAAI,IAAI;YAAE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAC9D,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACxE,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAE1B,OAAO,CACH,IAAI,IAAI,CACJ,MAAC,MAAM,IAAC,SAAS,EAAE,SAAS,aACxB,iBACQ,cAAc,eACR,QAAQ,qBACD,KAAK,IAAI,SAAS,oBACnB,SAAS,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,cAAc,YAEnB,KAAC,SAAS,IACN,gBAAgB,EAAE;wBACd,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ;wBACpC,uBAAuB,EAAE,IAAI;qBAChC,YAED,uCAEI,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;4BACV,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;wBAC1B,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,YAEX,QAAQ,GACP,GACE,GACV,EACN,KAAC,KAAK,IACF,OAAO,EAAE,GAAG,EAAE;oBACV,OAAO,EAAE,CAAC;gBACd,CAAC,EACD,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,SAAS,KAAK,KAAK,GAC9B,IACG,CACZ,CACJ,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAkDtC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,SAAS,GAAG,QAAQ,EACpB,SAAS,GAAG,IAAI,EAChB,SAAS,GAAG,KAAK,EACjB,EAAE,EAAE,MAAM,EACV,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,GAAG,cAAc,EACc;IAC/B,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEnD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,OAAO,EAAE,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAElH,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;YAC7C,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAC3D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAE1B,OAAO,CACH,IAAI,IAAI,CACJ,MAAC,MAAM,IAAC,SAAS,EAAE,SAAS,aACxB,iBACQ,cAAc,eACR,QAAQ,qBACD,KAAK,IAAI,SAAS,oBACnB,SAAS,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,cAAc,YAEnB,KAAC,SAAS,IACN,MAAM,EAAE,CAAC,gBAAgB,EACzB,gBAAgB,EAAE;wBACd,uBAAuB,EAAE,IAAI;wBAC7B,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ;qBACvC,YAED,0DAEqB,SAAS,EAC1B,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;4BACV,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;wBAC1B,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,YAEX,QAAQ,GACP,GACE,GACV,EACN,KAAC,KAAK,IACF,OAAO,EAAE,GAAG,EAAE;oBACV,OAAO,EAAE,CAAC;gBACd,CAAC,EACD,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,SAAS,KAAK,KAAK,GAC9B,IACG,CACZ,CACJ,CAAC;AACN,CAAC"}
@@ -1,3 +1,4 @@
1
1
  import { DialogProps } from '.';
2
- import { ComponentExample } from '-/utils/demo';
2
+ import { ComponentExample, Preset } from '-/utils/demo';
3
+ export declare const presets: Preset<DialogProps>[];
3
4
  export declare const DialogExample: ComponentExample<DialogProps>;
@@ -1,10 +1,12 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { Button } from '../Button';
3
+ export const presets = [];
3
4
  export const DialogExample = {
4
5
  render: ({ props, setState, Component }) => {
5
6
  const label = 'Open Dialog';
6
7
  return (_jsxs(_Fragment, { children: [_jsx(Button, { label: label, onClick: () => setState({ open: true }) }), _jsx(Component, { "data-example-component": true, ...props, id: "exampleId", onClose: () => setState({ open: false }), children: _jsxs("div", { style: { padding: 'var(--spacing-sizing-04)' }, children: ["Hello, I am a (", props.placement, ") dialog!"] }) })] }));
7
8
  },
8
9
  variants: false,
10
+ presets,
9
11
  };
10
12
  //# sourceMappingURL=DialogExample.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DialogExample.js","sourceRoot":"","sources":["../../../src/components/Dialog/DialogExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;QACvC,MAAM,KAAK,GAAG,aAAa,CAAC;QAC5B,OAAO,CACH,8BACI,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,EACjE,KAAC,SAAS,uCAA4B,KAAK,EAAE,EAAE,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,YAChG,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,0BAA0B,EAAE,gCAAkB,KAAK,CAAC,SAAS,iBAAgB,GAC5F,IACb,CACN,CAAC;IACN,CAAC;IACD,QAAQ,EAAE,KAAK;CAClB,CAAC"}
1
+ {"version":3,"file":"DialogExample.js","sourceRoot":"","sources":["../../../src/components/Dialog/DialogExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,OAAO,GAA0B,EAAE,CAAC;AAEjD,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;QACvC,MAAM,KAAK,GAAG,aAAa,CAAC;QAC5B,OAAO,CACH,8BACI,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,EACjE,KAAC,SAAS,uCAA4B,KAAK,EAAE,EAAE,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,YAChG,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,0BAA0B,EAAE,gCAAkB,KAAK,CAAC,SAAS,iBAAgB,GAC5F,IACb,CACN,CAAC;IACN,CAAC;IACD,QAAQ,EAAE,KAAK;IACf,OAAO;CACV,CAAC"}
@@ -1,57 +1,14 @@
1
1
  [data-bspk=dialog] {
2
- --width: 600px;
3
2
  position: fixed;
4
3
  inset: 0;
5
4
  z-index: var(--z-index-dialog);
5
+ display: flex;
6
6
  pointer-events: none;
7
7
  }
8
- @keyframes fade-in {
9
- 0% {
10
- opacity: 0;
11
- transform: translate(var(--spacing-sizing-01), var(--spacing-sizing-01));
12
- }
13
- 100% {
14
- opacity: 1;
15
- transform: translate(0, 0);
16
- }
17
- }
18
- @keyframes placement-left {
19
- 0% {
20
- transform: translateX(-100vw);
21
- }
22
- 100% {
23
- transform: translateX(0);
24
- }
25
- }
26
- @keyframes placement-right {
27
- 0% {
28
- transform: translateX(100vw);
29
- }
30
- 100% {
31
- transform: translateX(0);
32
- }
33
- }
34
- @keyframes placement-top {
35
- 0% {
36
- transform: translateY(-100vh);
37
- }
38
- 100% {
39
- transform: translateY(0);
40
- }
41
- }
42
- @keyframes placement-bottom {
43
- 0% {
44
- transform: translateY(100vh);
45
- }
46
- 100% {
47
- transform: translateY(0);
48
- }
49
- }
50
8
  [data-bspk=dialog] [data-dialog-box] {
51
9
  pointer-events: all;
52
10
  text-align: start;
53
11
  position: relative;
54
- border-radius: var(--radius-lg);
55
12
  box-shadow: var(--drop-shadow-float);
56
13
  background: var(--surface-neutral-t1-base);
57
14
  color: var(--foreground-neutral-on-surface);
@@ -91,59 +48,54 @@
91
48
  }
92
49
  [data-bspk=dialog][data-placement=center] {
93
50
  --box-animation-name: fade-in;
94
- display: flex;
95
51
  justify-content: center;
96
52
  align-items: center;
97
53
  }
98
54
  [data-bspk=dialog][data-placement=center] [data-dialog-box] {
99
- position: absolute;
55
+ border-radius: var(--radius-lg);
100
56
  }
101
57
  [data-bspk=dialog][data-placement=bottom] {
102
58
  --box-animation-name: placement-bottom;
59
+ justify-content: center;
60
+ align-items: end;
103
61
  }
104
62
  [data-bspk=dialog][data-placement=bottom] [data-dialog-box] {
105
- position: absolute;
106
- border-bottom-left-radius: 0;
107
- border-bottom-right-radius: 0;
108
- width: var(--width);
109
- left: calc(50% - var(--width) / 2);
110
- transform: translateX(-50%);
111
- bottom: 0;
63
+ border-top-left-radius: var(--radius-lg);
64
+ border-top-right-radius: var(--radius-lg);
112
65
  }
113
66
  [data-bspk=dialog][data-placement=top] {
114
67
  --box-animation-name: placement-top;
68
+ justify-content: center;
69
+ align-items: start;
115
70
  }
116
71
  [data-bspk=dialog][data-placement=top] [data-dialog-box] {
117
- position: absolute;
118
- border-top-left-radius: 0;
119
- border-top-right-radius: 0;
120
- width: var(--width);
121
- left: calc(50% - var(--width) / 2);
122
- top: 0;
72
+ border-bottom-left-radius: var(--radius-lg);
73
+ border-bottom-right-radius: var(--radius-lg);
123
74
  }
124
75
  [data-bspk=dialog][data-placement=left] {
125
76
  --box-animation-name: placement-left;
77
+ justify-content: flex-start;
126
78
  }
127
79
  [data-bspk=dialog][data-placement=left] [data-dialog-box] {
128
- position: absolute;
129
80
  max-height: unset;
130
81
  width: 280px;
131
82
  height: 100vh;
132
- border-bottom-left-radius: 0;
133
- border-top-left-radius: 0;
134
- left: 0;
83
+ border-bottom-right-radius: var(--radius-lg);
84
+ border-top-right-radius: var(--radius-lg);
135
85
  }
136
86
  [data-bspk=dialog][data-placement=right] {
137
87
  --box-animation-name: placement-right;
88
+ justify-content: flex-end;
138
89
  }
139
90
  [data-bspk=dialog][data-placement=right] [data-dialog-box] {
140
- position: absolute;
141
91
  max-height: unset;
142
92
  width: 280px;
143
93
  height: 100vh;
144
- border-bottom-right-radius: 0;
145
- border-top-right-radius: 0;
146
- right: 0;
94
+ border-bottom-left-radius: var(--radius-lg);
95
+ border-top-left-radius: var(--radius-lg);
96
+ }
97
+ [data-bspk=dialog] [data-width-full=true] {
98
+ width: 100%;
147
99
  }
148
100
 
149
101
  /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
@@ -2,59 +2,16 @@
2
2
  * Do not edit this file directly. */
3
3
  const style = document.createElement('style');
4
4
  style.appendChild(document.createTextNode(`[data-bspk=dialog] {
5
- --width: 600px;
6
5
  position: fixed;
7
6
  inset: 0;
8
7
  z-index: var(--z-index-dialog);
8
+ display: flex;
9
9
  pointer-events: none;
10
10
  }
11
- @keyframes fade-in {
12
- 0% {
13
- opacity: 0;
14
- transform: translate(var(--spacing-sizing-01), var(--spacing-sizing-01));
15
- }
16
- 100% {
17
- opacity: 1;
18
- transform: translate(0, 0);
19
- }
20
- }
21
- @keyframes placement-left {
22
- 0% {
23
- transform: translateX(-100vw);
24
- }
25
- 100% {
26
- transform: translateX(0);
27
- }
28
- }
29
- @keyframes placement-right {
30
- 0% {
31
- transform: translateX(100vw);
32
- }
33
- 100% {
34
- transform: translateX(0);
35
- }
36
- }
37
- @keyframes placement-top {
38
- 0% {
39
- transform: translateY(-100vh);
40
- }
41
- 100% {
42
- transform: translateY(0);
43
- }
44
- }
45
- @keyframes placement-bottom {
46
- 0% {
47
- transform: translateY(100vh);
48
- }
49
- 100% {
50
- transform: translateY(0);
51
- }
52
- }
53
11
  [data-bspk=dialog] [data-dialog-box] {
54
12
  pointer-events: all;
55
13
  text-align: start;
56
14
  position: relative;
57
- border-radius: var(--radius-lg);
58
15
  box-shadow: var(--drop-shadow-float);
59
16
  background: var(--surface-neutral-t1-base);
60
17
  color: var(--foreground-neutral-on-surface);
@@ -94,59 +51,54 @@ style.appendChild(document.createTextNode(`[data-bspk=dialog] {
94
51
  }
95
52
  [data-bspk=dialog][data-placement=center] {
96
53
  --box-animation-name: fade-in;
97
- display: flex;
98
54
  justify-content: center;
99
55
  align-items: center;
100
56
  }
101
57
  [data-bspk=dialog][data-placement=center] [data-dialog-box] {
102
- position: absolute;
58
+ border-radius: var(--radius-lg);
103
59
  }
104
60
  [data-bspk=dialog][data-placement=bottom] {
105
61
  --box-animation-name: placement-bottom;
62
+ justify-content: center;
63
+ align-items: end;
106
64
  }
107
65
  [data-bspk=dialog][data-placement=bottom] [data-dialog-box] {
108
- position: absolute;
109
- border-bottom-left-radius: 0;
110
- border-bottom-right-radius: 0;
111
- width: var(--width);
112
- left: calc(50% - var(--width) / 2);
113
- transform: translateX(-50%);
114
- bottom: 0;
66
+ border-top-left-radius: var(--radius-lg);
67
+ border-top-right-radius: var(--radius-lg);
115
68
  }
116
69
  [data-bspk=dialog][data-placement=top] {
117
70
  --box-animation-name: placement-top;
71
+ justify-content: center;
72
+ align-items: start;
118
73
  }
119
74
  [data-bspk=dialog][data-placement=top] [data-dialog-box] {
120
- position: absolute;
121
- border-top-left-radius: 0;
122
- border-top-right-radius: 0;
123
- width: var(--width);
124
- left: calc(50% - var(--width) / 2);
125
- top: 0;
75
+ border-bottom-left-radius: var(--radius-lg);
76
+ border-bottom-right-radius: var(--radius-lg);
126
77
  }
127
78
  [data-bspk=dialog][data-placement=left] {
128
79
  --box-animation-name: placement-left;
80
+ justify-content: flex-start;
129
81
  }
130
82
  [data-bspk=dialog][data-placement=left] [data-dialog-box] {
131
- position: absolute;
132
83
  max-height: unset;
133
84
  width: 280px;
134
85
  height: 100vh;
135
- border-bottom-left-radius: 0;
136
- border-top-left-radius: 0;
137
- left: 0;
86
+ border-bottom-right-radius: var(--radius-lg);
87
+ border-top-right-radius: var(--radius-lg);
138
88
  }
139
89
  [data-bspk=dialog][data-placement=right] {
140
90
  --box-animation-name: placement-right;
91
+ justify-content: flex-end;
141
92
  }
142
93
  [data-bspk=dialog][data-placement=right] [data-dialog-box] {
143
- position: absolute;
144
94
  max-height: unset;
145
95
  width: 280px;
146
96
  height: 100vh;
147
- border-bottom-right-radius: 0;
148
- border-top-right-radius: 0;
149
- right: 0;
97
+ border-bottom-left-radius: var(--radius-lg);
98
+ border-top-left-radius: var(--radius-lg);
99
+ }
100
+ [data-bspk=dialog] [data-width-full=true] {
101
+ width: 100%;
150
102
  }
151
103
 
152
104
  /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
@@ -1,5 +1,5 @@
1
- import { ElementProps } from '-/types/common';
2
1
  import './divider.scss';
2
+ import { ElementProps } from '-/types/common';
3
3
  export type DividerProps = {
4
4
  /**
5
5
  * The orientation of the divider.
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { cssWithVars } from '../../utils/cwv';
3
2
  import './divider.css.js';
3
+ import { cssWithVars } from '../../utils/cwv';
4
4
  const insetToVariable = (insetProp) => {
5
5
  const inset = Number(insetProp);
6
6
  if (inset === undefined || inset === null || inset < 1 || inset > 12)
@@ -1 +1 @@
1
- {"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,gBAAgB,CAAC;AA+BxB,MAAM,eAAe,GAAG,CAAC,SAA0B,EAAE,EAAE;IACnD,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE;QAAE,OAAO,KAAK,CAAC;IACnF,OAAO,wBAAwB,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC;AACxE,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,OAAO,CAAC,EACpB,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACH,iBACQ,KAAK,2CAES,WAAW,eACnB,SAAS,uBACA,CAAC,OAAO,IAAI,SAAS,sBACtB,WAAW,oBACb,SAAS,EACzB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,WAAW,CAAC;YACf,GAAG,KAAK,CAAC,KAAK;YACd,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;SACpC,CAAC,GACJ,CACL,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":";AAAA,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA+B1C,MAAM,eAAe,GAAG,CAAC,SAA0B,EAAE,EAAE;IACnD,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE;QAAE,OAAO,KAAK,CAAC;IACnF,OAAO,wBAAwB,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC;AACxE,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,OAAO,CAAC,EACpB,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACH,iBACQ,KAAK,2CAES,WAAW,eACnB,SAAS,uBACA,CAAC,OAAO,IAAI,SAAS,sBACtB,WAAW,oBACb,SAAS,EACzB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,WAAW,CAAC;YACf,GAAG,KAAK,CAAC,KAAK;YACd,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;SACpC,CAAC,GACJ,CACL,CAAC;AACN,CAAC"}
@@ -1,2 +1,4 @@
1
- import { ComponentExample } from '-/utils/demo';
2
- export declare const DividerExample: ComponentExample;
1
+ import { DividerProps } from './Divider';
2
+ import { ComponentExample, Preset } from '-/utils/demo';
3
+ export declare const presets: Preset<DividerProps>[];
4
+ export declare const DividerExample: ComponentExample<DividerProps>;
@@ -1,5 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { ExamplePlaceholder } from '../ExamplePlaceholder';
3
+ export const presets = [];
3
4
  export const DividerExample = {
4
5
  render: ({ props, Component }) => {
5
6
  const style = props.orientation === 'vertical' ? { height: 300, width: 100 } : { height: 100, width: '300px' };
@@ -11,5 +12,6 @@ export const DividerExample = {
11
12
  maxWidth: props.orientation !== 'vertical' ? '300px' : 'auto',
12
13
  }, children: [_jsx(ExamplePlaceholder, { direction: props.orientation !== 'vertical' ? 'row' : 'column', style: style }), _jsx(Component, { ...props }), _jsx(ExamplePlaceholder, { direction: props.orientation !== 'vertical' ? 'row' : 'column', style: style })] }));
13
14
  },
15
+ presets,
14
16
  };
15
17
  //# sourceMappingURL=DividerExample.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DividerExample.js","sourceRoot":"","sources":["../../../src/components/Divider/DividerExample.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,cAAc,GAAqB;IAC5C,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,KAAK,GACP,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;QACrG,OAAO,CACH,eACI,KAAK,EAAE;gBACH,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;gBAClE,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACnE,cAAc,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACvE,QAAQ,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;aAChE,aAED,KAAC,kBAAkB,IAAC,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,EACpG,KAAC,SAAS,OAAK,KAAK,GAAI,EACxB,KAAC,kBAAkB,IAAC,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,IAClG,CACT,CAAC;IACN,CAAC;CACJ,CAAC"}
1
+ {"version":3,"file":"DividerExample.js","sourceRoot":"","sources":["../../../src/components/Divider/DividerExample.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,OAAO,GAA2B,EAAE,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAmC;IAC1D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,KAAK,GACP,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;QACrG,OAAO,CACH,eACI,KAAK,EAAE;gBACH,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;gBAClE,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACnE,cAAc,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACvE,QAAQ,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;aAChE,aAED,KAAC,kBAAkB,IAAC,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,EACpG,KAAC,SAAS,OAAK,KAAK,GAAI,EACxB,KAAC,kBAAkB,IAAC,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,IAClG,CACT,CAAC;IACN,CAAC;IACD,OAAO;CACV,CAAC"}
@@ -6,7 +6,7 @@
6
6
  place-content: stretch stretch;
7
7
  margin: 0;
8
8
  padding: 0;
9
- content: "hello";
9
+ content: "";
10
10
  --length: calc(100% - var(--inset) * 2);
11
11
  }
12
12
  [data-bspk=divider], [data-bspk=divider][data-thickness=light] {