reshaped 3.9.0-canary.0 → 3.9.0-canary.10

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 (344) hide show
  1. package/dist/bundle.css +1 -1
  2. package/dist/bundle.js +2 -31
  3. package/dist/cli/theming/index.js +4 -4
  4. package/dist/cli/theming/reshaped.config.js +1 -1
  5. package/dist/components/Accordion/Accordion.types.d.ts +1 -1
  6. package/dist/components/Accordion/AccordionControlled.js +2 -2
  7. package/dist/components/Accordion/AccordionTrigger.js +2 -2
  8. package/dist/components/Accordion/index.d.ts +1 -1
  9. package/dist/components/Accordion/index.js +1 -1
  10. package/dist/components/ActionBar/ActionBar.js +1 -1
  11. package/dist/components/ActionBar/ActionBar.types.d.ts +1 -1
  12. package/dist/components/Actionable/Actionable.js +1 -1
  13. package/dist/components/Alert/Alert.js +1 -1
  14. package/dist/components/Alert/Alert.types.d.ts +1 -1
  15. package/dist/components/Autocomplete/Autocomplete.js +6 -6
  16. package/dist/components/Autocomplete/Autocomplete.types.d.ts +3 -3
  17. package/dist/components/Avatar/Avatar.js +9 -26
  18. package/dist/components/Avatar/Avatar.module.css +1 -1
  19. package/dist/components/Badge/Badge.js +4 -4
  20. package/dist/components/Badge/Badge.module.css +1 -1
  21. package/dist/components/Badge/Badge.types.d.ts +1 -1
  22. package/dist/components/Breadcrumbs/Breadcrumbs.js +3 -3
  23. package/dist/components/Breadcrumbs/Breadcrumbs.types.d.ts +1 -1
  24. package/dist/components/Breadcrumbs/BreadcrumbsItem.js +1 -1
  25. package/dist/components/Button/Button.js +2 -2
  26. package/dist/components/Button/Button.module.css +1 -1
  27. package/dist/components/Button/Button.types.d.ts +3 -3
  28. package/dist/components/Calendar/Calendar.types.d.ts +25 -6
  29. package/dist/components/Calendar/CalendarControlled.js +45 -10
  30. package/dist/components/Calendar/CalendarControls.js +11 -11
  31. package/dist/components/Calendar/CalendarDate.js +13 -11
  32. package/dist/components/Calendar/CalendarMonth.js +3 -3
  33. package/dist/components/Calendar/CalendarYear.js +1 -1
  34. package/dist/components/Calendar/useCalendarKeyboardNavigation.js +1 -1
  35. package/dist/components/Card/Card.js +2 -2
  36. package/dist/components/Card/Card.module.css +1 -1
  37. package/dist/components/Card/Card.types.d.ts +1 -1
  38. package/dist/components/Carousel/Carousel.js +4 -4
  39. package/dist/components/Carousel/Carousel.types.d.ts +1 -1
  40. package/dist/components/Carousel/CarouselControl.d.ts +1 -1
  41. package/dist/components/Carousel/CarouselControl.js +3 -3
  42. package/dist/components/Checkbox/Checkbox.js +5 -15
  43. package/dist/components/CheckboxGroup/CheckboxGroup.types.d.ts +1 -1
  44. package/dist/components/Container/Container.js +1 -1
  45. package/dist/components/Container/Container.types.d.ts +1 -1
  46. package/dist/components/ContextMenu/ContextMenu.js +1 -1
  47. package/dist/components/Dismissible/Dismissible.js +1 -1
  48. package/dist/components/Divider/Divider.d.ts +1 -1
  49. package/dist/components/Divider/Divider.js +1 -1
  50. package/dist/components/DropdownMenu/DropdownMenu.js +6 -6
  51. package/dist/components/DropdownMenu/DropdownMenu.types.d.ts +4 -4
  52. package/dist/components/FileUpload/FileUpload.js +9 -7
  53. package/dist/components/FileUpload/FileUpload.module.css +1 -1
  54. package/dist/components/FileUpload/FileUpload.types.d.ts +3 -1
  55. package/dist/components/Flyout/Flyout.constants.d.ts +3 -6
  56. package/dist/components/Flyout/Flyout.constants.js +1 -3
  57. package/dist/components/Flyout/Flyout.js +1 -1
  58. package/dist/components/Flyout/Flyout.module.css +1 -1
  59. package/dist/components/Flyout/Flyout.types.d.ts +6 -7
  60. package/dist/components/Flyout/FlyoutContent.js +7 -7
  61. package/dist/components/Flyout/FlyoutControlled.js +17 -14
  62. package/dist/components/Flyout/index.d.ts +1 -1
  63. package/dist/components/Flyout/index.js +1 -1
  64. package/dist/components/Flyout/useFlyout.d.ts +2 -2
  65. package/dist/components/Flyout/useFlyout.js +5 -18
  66. package/dist/components/Flyout/utilities/calculatePosition.d.ts +6 -6
  67. package/dist/components/Flyout/utilities/calculatePosition.js +6 -6
  68. package/dist/components/Flyout/utilities/cooldown.js +1 -2
  69. package/dist/components/Flyout/utilities/flyout.d.ts +1 -1
  70. package/dist/components/Flyout/utilities/flyout.js +5 -2
  71. package/dist/components/FormControl/FormControlCaption.js +1 -1
  72. package/dist/components/FormControl/FormControlLabel.js +1 -1
  73. package/dist/components/FormControl/index.d.ts +2 -2
  74. package/dist/components/FormControl/index.js +2 -2
  75. package/dist/components/Grid/Grid.js +1 -1
  76. package/dist/components/Grid/Grid.types.d.ts +2 -2
  77. package/dist/components/HiddenInput/HiddenInput.js +34 -0
  78. package/dist/components/HiddenInput/HiddenInput.types.d.ts +26 -0
  79. package/dist/components/Icon/Icon.js +1 -1
  80. package/dist/components/Icon/Icon.module.css +1 -1
  81. package/dist/components/Image/Image.js +14 -9
  82. package/dist/components/Image/Image.module.css +1 -1
  83. package/dist/components/Image/Image.types.d.ts +4 -2
  84. package/dist/components/Link/Link.js +1 -1
  85. package/dist/components/MenuItem/MenuItem.js +1 -1
  86. package/dist/components/MenuItem/MenuItem.types.d.ts +2 -2
  87. package/dist/components/Modal/Modal.js +8 -8
  88. package/dist/components/Modal/Modal.module.css +1 -1
  89. package/dist/components/Modal/Modal.types.d.ts +1 -1
  90. package/dist/components/NumberField/NumberFieldControlled.js +7 -7
  91. package/dist/components/Overlay/Overlay.js +8 -8
  92. package/dist/components/PinField/PinFieldControlled.js +4 -4
  93. package/dist/components/Popover/Popover.js +3 -3
  94. package/dist/components/Popover/Popover.module.css +1 -1
  95. package/dist/components/Popover/Popover.types.d.ts +2 -2
  96. package/dist/components/Progress/Progress.module.css +1 -1
  97. package/dist/components/Radio/Radio.js +5 -15
  98. package/dist/components/RadioGroup/RadioGroup.types.d.ts +1 -1
  99. package/dist/components/Reshaped/Reshaped.css +1 -1
  100. package/dist/components/Reshaped/Reshaped.js +4 -4
  101. package/dist/components/Reshaped/Reshaped.types.d.ts +1 -1
  102. package/dist/components/Resizable/Resizable.js +2 -2
  103. package/dist/components/Resizable/Resizable.types.d.ts +1 -1
  104. package/dist/components/Resizable/ResizableHandle.js +1 -1
  105. package/dist/components/Scrim/Scrim.js +4 -3
  106. package/dist/components/Scrim/Scrim.module.css +1 -1
  107. package/dist/components/Scrim/Scrim.types.d.ts +2 -1
  108. package/dist/components/ScrollArea/ScrollArea.js +5 -5
  109. package/dist/components/Select/Select.types.d.ts +3 -3
  110. package/dist/components/Select/SelectCustomControlled.js +6 -3
  111. package/dist/components/Select/SelectEndContent.js +1 -1
  112. package/dist/components/Select/SelectGroup.js +1 -1
  113. package/dist/components/Select/SelectNative.js +2 -2
  114. package/dist/components/Select/SelectRoot.js +1 -1
  115. package/dist/components/Select/SelectTrigger.js +1 -1
  116. package/dist/components/Select/index.d.ts +1 -1
  117. package/dist/components/Select/index.js +1 -1
  118. package/dist/components/Skeleton/Skeleton.js +1 -1
  119. package/dist/components/Slider/SliderControlled.js +7 -7
  120. package/dist/components/Slider/SliderThumb.js +3 -3
  121. package/dist/components/Stepper/Stepper.js +4 -4
  122. package/dist/components/Switch/Switch.js +1 -1
  123. package/dist/components/Table/Table.js +2 -2
  124. package/dist/components/Tabs/Tabs.module.css +1 -1
  125. package/dist/components/Tabs/Tabs.types.d.ts +4 -2
  126. package/dist/components/Tabs/TabsContext.d.ts +1 -0
  127. package/dist/components/Tabs/TabsControlled.js +2 -1
  128. package/dist/components/Tabs/TabsItem.js +4 -4
  129. package/dist/components/Tabs/TabsList.js +17 -13
  130. package/dist/components/Tabs/TabsPanel.js +3 -3
  131. package/dist/components/Text/Text.js +3 -3
  132. package/dist/components/Text/Text.module.css +1 -1
  133. package/dist/components/Text/Text.types.d.ts +2 -0
  134. package/dist/components/TextArea/TextArea.js +1 -1
  135. package/dist/components/TextArea/TextArea.types.d.ts +1 -1
  136. package/dist/components/TextField/TextField.js +2 -2
  137. package/dist/components/TextField/TextField.types.d.ts +2 -2
  138. package/dist/components/Theme/GlobalColorMode.js +1 -1
  139. package/dist/components/Theme/Theme.js +2 -2
  140. package/dist/components/Theme/Theme.module.css +1 -1
  141. package/dist/components/Timeline/Timeline.js +1 -1
  142. package/dist/components/Toast/Toast.js +2 -2
  143. package/dist/components/Toast/Toast.types.d.ts +1 -1
  144. package/dist/components/Toast/ToastContainer.js +3 -3
  145. package/dist/components/Toast/ToastProvider.js +1 -1
  146. package/dist/components/Toast/ToastRegion.js +2 -2
  147. package/dist/components/ToggleButtonGroup/ToggleButtonGroup.types.d.ts +1 -1
  148. package/dist/components/ToggleButtonGroup/ToggleButtonGroupControlled.js +1 -1
  149. package/dist/components/Tooltip/Tooltip.js +5 -3
  150. package/dist/components/View/View.js +2 -2
  151. package/dist/components/View/View.types.d.ts +1 -1
  152. package/dist/components/_private/Expandable/Expandable.js +2 -2
  153. package/dist/components/_private/Portal/Portal.js +1 -1
  154. package/dist/config/tailwind.js +2 -2
  155. package/dist/hooks/_private/useDrag.js +4 -4
  156. package/dist/hooks/_private/useFadeSide.js +1 -1
  157. package/dist/hooks/useOnClickOutside.js +2 -4
  158. package/dist/hooks/useResponsiveClientValue.js +1 -1
  159. package/dist/styles/mixin.js +1 -1
  160. package/dist/tests/ThemesPlayground.js +16 -16
  161. package/dist/themes/_generator/definitions/slate.js +1 -1
  162. package/dist/themes/_generator/tokens/color/utilities/generateColors.d.ts +1 -1
  163. package/dist/themes/_generator/tokens/color/utilities/generateMetaColors.d.ts +1 -1
  164. package/dist/themes/_generator/tokens/color/utilities/generateMetaColors.js +1 -1
  165. package/dist/themes/_generator/tokens/css.js +2 -2
  166. package/dist/themes/_generator/tokens/font/font.types.d.ts +2 -2
  167. package/dist/themes/_generator/tokens/transforms.js +1 -1
  168. package/dist/themes/_generator/tokens/types.d.ts +3 -3
  169. package/dist/themes/_generator/transform.d.ts +1 -1
  170. package/dist/themes/_generator/transform.js +3 -3
  171. package/dist/themes/figma/theme.css +1 -1
  172. package/dist/themes/fragments/twitter/theme.css +1 -1
  173. package/dist/themes/index.d.ts +1 -1
  174. package/dist/themes/reshaped/theme.css +1 -1
  175. package/dist/themes/slate/theme.css +1 -1
  176. package/dist/types/config.d.ts +1 -1
  177. package/dist/utilities/a11y/TrapFocus.js +4 -4
  178. package/dist/utilities/scroll/lock.js +1 -1
  179. package/dist/utilities/scroll/lockStandard.js +1 -1
  180. package/dist/utilities/storybook/Example.js +1 -1
  181. package/package.json +42 -35
  182. package/dist/components/Accordion/tests/Accordion.stories.d.ts +0 -44
  183. package/dist/components/Accordion/tests/Accordion.stories.js +0 -204
  184. package/dist/components/ActionBar/tests/ActionBar.stories.d.ts +0 -40
  185. package/dist/components/ActionBar/tests/ActionBar.stories.js +0 -223
  186. package/dist/components/Actionable/tests/Actionable.stories.d.ts +0 -41
  187. package/dist/components/Actionable/tests/Actionable.stories.js +0 -220
  188. package/dist/components/Alert/tests/Alert.stories.d.ts +0 -24
  189. package/dist/components/Alert/tests/Alert.stories.js +0 -78
  190. package/dist/components/Autocomplete/tests/Autocomplete.stories.d.ts +0 -32
  191. package/dist/components/Autocomplete/tests/Autocomplete.stories.js +0 -246
  192. package/dist/components/Avatar/tests/Avatar.stories.d.ts +0 -31
  193. package/dist/components/Avatar/tests/Avatar.stories.js +0 -176
  194. package/dist/components/Badge/tests/Badge.stories.d.ts +0 -55
  195. package/dist/components/Badge/tests/Badge.stories.js +0 -328
  196. package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.d.ts +0 -40
  197. package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.js +0 -187
  198. package/dist/components/Button/tests/Button.stories.d.ts +0 -79
  199. package/dist/components/Button/tests/Button.stories.js +0 -789
  200. package/dist/components/Calendar/tests/Calendar.stories.d.ts +0 -29
  201. package/dist/components/Calendar/tests/Calendar.stories.js +0 -255
  202. package/dist/components/Card/tests/Card.stories.d.ts +0 -52
  203. package/dist/components/Card/tests/Card.stories.js +0 -125
  204. package/dist/components/Carousel/tests/Carousel.stories.d.ts +0 -34
  205. package/dist/components/Carousel/tests/Carousel.stories.js +0 -224
  206. package/dist/components/Checkbox/tests/Checkbox.stories.d.ts +0 -30
  207. package/dist/components/Checkbox/tests/Checkbox.stories.js +0 -171
  208. package/dist/components/CheckboxGroup/tests/CheckboxGroup.stories.d.ts +0 -19
  209. package/dist/components/CheckboxGroup/tests/CheckboxGroup.stories.js +0 -83
  210. package/dist/components/Container/tests/Container.stories.d.ts +0 -24
  211. package/dist/components/Container/tests/Container.stories.js +0 -75
  212. package/dist/components/ContextMenu/tests/ContextMenu.stories.d.ts +0 -26
  213. package/dist/components/ContextMenu/tests/ContextMenu.stories.js +0 -70
  214. package/dist/components/Dismissible/tests/Dismissible.stories.d.ts +0 -25
  215. package/dist/components/Dismissible/tests/Dismissible.stories.js +0 -97
  216. package/dist/components/Divider/tests/Divider.stories.d.ts +0 -20
  217. package/dist/components/Divider/tests/Divider.stories.js +0 -120
  218. package/dist/components/DropdownMenu/tests/DropdownMenu.stories.d.ts +0 -53
  219. package/dist/components/DropdownMenu/tests/DropdownMenu.stories.js +0 -278
  220. package/dist/components/FileUpload/tests/FileUpload.stories.d.ts +0 -31
  221. package/dist/components/FileUpload/tests/FileUpload.stories.js +0 -140
  222. package/dist/components/Flyout/tests/Flyout.stories.d.ts +0 -103
  223. package/dist/components/Flyout/tests/Flyout.stories.js +0 -738
  224. package/dist/components/FormControl/tests/FormControl.stories.d.ts +0 -31
  225. package/dist/components/FormControl/tests/FormControl.stories.js +0 -143
  226. package/dist/components/Grid/tests/Grid.stories.d.ts +0 -38
  227. package/dist/components/Grid/tests/Grid.stories.js +0 -245
  228. package/dist/components/Hidden/tests/Hidden.stories.d.ts +0 -16
  229. package/dist/components/Hidden/tests/Hidden.stories.js +0 -48
  230. package/dist/components/HiddenVisually/tests/HiddenVisually.stories.d.ts +0 -16
  231. package/dist/components/HiddenVisually/tests/HiddenVisually.stories.js +0 -28
  232. package/dist/components/Hotkey/tests/Hotkey.stories.d.ts +0 -13
  233. package/dist/components/Hotkey/tests/Hotkey.stories.js +0 -53
  234. package/dist/components/Icon/tests/Icon.stories.d.ts +0 -25
  235. package/dist/components/Icon/tests/Icon.stories.js +0 -113
  236. package/dist/components/Image/tests/Image.stories.d.ts +0 -41
  237. package/dist/components/Image/tests/Image.stories.js +0 -196
  238. package/dist/components/Link/tests/Link.stories.d.ts +0 -42
  239. package/dist/components/Link/tests/Link.stories.js +0 -155
  240. package/dist/components/Loader/tests/Loader.stories.d.ts +0 -21
  241. package/dist/components/Loader/tests/Loader.stories.js +0 -68
  242. package/dist/components/MenuItem/tests/MenuItem.stories.d.ts +0 -59
  243. package/dist/components/MenuItem/tests/MenuItem.stories.js +0 -236
  244. package/dist/components/Modal/tests/Modal.stories.d.ts +0 -64
  245. package/dist/components/Modal/tests/Modal.stories.js +0 -410
  246. package/dist/components/NumberField/tests/NumberField.stories.d.ts +0 -28
  247. package/dist/components/NumberField/tests/NumberField.stories.js +0 -258
  248. package/dist/components/Overlay/tests/Overlay.stories.d.ts +0 -28
  249. package/dist/components/Overlay/tests/Overlay.stories.js +0 -202
  250. package/dist/components/Pagination/tests/Pagination.stories.d.ts +0 -24
  251. package/dist/components/Pagination/tests/Pagination.stories.js +0 -105
  252. package/dist/components/PinField/tests/PinField.stories.d.ts +0 -34
  253. package/dist/components/PinField/tests/PinField.stories.js +0 -209
  254. package/dist/components/Popover/tests/Popover.stories.d.ts +0 -69
  255. package/dist/components/Popover/tests/Popover.stories.js +0 -340
  256. package/dist/components/Progress/tests/Progress.stories.d.ts +0 -30
  257. package/dist/components/Progress/tests/Progress.stories.js +0 -102
  258. package/dist/components/ProgressIndicator/tests/ProgressIndicator.stories.d.ts +0 -19
  259. package/dist/components/ProgressIndicator/tests/ProgressIndicator.stories.js +0 -92
  260. package/dist/components/Radio/tests/Radio.stories.d.ts +0 -35
  261. package/dist/components/Radio/tests/Radio.stories.js +0 -162
  262. package/dist/components/RadioGroup/tests/RadioGroup.stories.d.ts +0 -19
  263. package/dist/components/RadioGroup/tests/RadioGroup.stories.js +0 -77
  264. package/dist/components/Reshaped/tests/Reshaped.stories.d.ts +0 -34
  265. package/dist/components/Reshaped/tests/Reshaped.stories.js +0 -108
  266. package/dist/components/Resizable/tests/Resizable.stories.d.ts +0 -38
  267. package/dist/components/Resizable/tests/Resizable.stories.js +0 -185
  268. package/dist/components/Scrim/tests/Scrim.stories.d.ts +0 -20
  269. package/dist/components/Scrim/tests/Scrim.stories.js +0 -67
  270. package/dist/components/ScrollArea/tests/ScrollArea.stories.d.ts +0 -37
  271. package/dist/components/ScrollArea/tests/ScrollArea.stories.js +0 -244
  272. package/dist/components/Select/tests/Select.stories.d.ts +0 -53
  273. package/dist/components/Select/tests/Select.stories.js +0 -616
  274. package/dist/components/Skeleton/tests/Skeleton.stories.d.ts +0 -20
  275. package/dist/components/Skeleton/tests/Skeleton.stories.js +0 -63
  276. package/dist/components/Slider/tests/Slider.stories.d.ts +0 -47
  277. package/dist/components/Slider/tests/Slider.stories.js +0 -279
  278. package/dist/components/Stepper/tests/Stepper.stories.d.ts +0 -31
  279. package/dist/components/Stepper/tests/Stepper.stories.js +0 -135
  280. package/dist/components/Switch/tests/Switch.stories.d.ts +0 -22
  281. package/dist/components/Switch/tests/Switch.stories.js +0 -137
  282. package/dist/components/Switch/tests/Switch.test.stories.d.ts +0 -13
  283. package/dist/components/Switch/tests/Switch.test.stories.js +0 -11
  284. package/dist/components/Table/tests/Table.stories.d.ts +0 -42
  285. package/dist/components/Table/tests/Table.stories.js +0 -348
  286. package/dist/components/Tabs/tests/Tabs.stories.d.ts +0 -62
  287. package/dist/components/Tabs/tests/Tabs.stories.js +0 -539
  288. package/dist/components/Text/tests/Text.stories.d.ts +0 -48
  289. package/dist/components/Text/tests/Text.stories.js +0 -201
  290. package/dist/components/TextArea/tests/TextArea.stories.d.ts +0 -53
  291. package/dist/components/TextArea/tests/TextArea.stories.js +0 -204
  292. package/dist/components/TextField/tests/TextField.stories.d.ts +0 -54
  293. package/dist/components/TextField/tests/TextField.stories.js +0 -252
  294. package/dist/components/Theme/tests/Theme.stories.d.ts +0 -25
  295. package/dist/components/Theme/tests/Theme.stories.js +0 -171
  296. package/dist/components/Timeline/tests/Timeline.stories.d.ts +0 -22
  297. package/dist/components/Timeline/tests/Timeline.stories.js +0 -86
  298. package/dist/components/Toast/tests/Toast.stories.d.ts +0 -41
  299. package/dist/components/Toast/tests/Toast.stories.js +0 -432
  300. package/dist/components/ToggleButton/tests/ToggleButton.stories.d.ts +0 -27
  301. package/dist/components/ToggleButton/tests/ToggleButton.stories.js +0 -97
  302. package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.d.ts +0 -27
  303. package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.js +0 -169
  304. package/dist/components/Tooltip/tests/Tooltip.stories.d.ts +0 -28
  305. package/dist/components/Tooltip/tests/Tooltip.stories.js +0 -182
  306. package/dist/components/View/tests/View.stories.d.ts +0 -141
  307. package/dist/components/View/tests/View.stories.js +0 -1329
  308. package/dist/components/_private/HiddenInput/HiddenInput.js +0 -10
  309. package/dist/components/_private/HiddenInput/HiddenInput.types.d.ts +0 -15
  310. package/dist/components/_private/Portal/tests/Portal.stories.d.ts +0 -6
  311. package/dist/components/_private/Portal/tests/Portal.stories.js +0 -17
  312. package/dist/hooks/tests/useDrag.stories.d.ts +0 -31
  313. package/dist/hooks/tests/useDrag.stories.js +0 -147
  314. package/dist/hooks/tests/useElementId.stories.d.ts +0 -11
  315. package/dist/hooks/tests/useElementId.stories.js +0 -23
  316. package/dist/hooks/tests/useHandlerRef.stories.d.ts +0 -14
  317. package/dist/hooks/tests/useHandlerRef.stories.js +0 -44
  318. package/dist/hooks/tests/useHotkeys.stories.d.ts +0 -43
  319. package/dist/hooks/tests/useHotkeys.stories.js +0 -158
  320. package/dist/hooks/tests/useKeyboardArrowNavigation.stories.d.ts +0 -15
  321. package/dist/hooks/tests/useKeyboardArrowNavigation.stories.js +0 -128
  322. package/dist/hooks/tests/useKeyboardMode.stories.d.ts +0 -11
  323. package/dist/hooks/tests/useKeyboardMode.stories.js +0 -42
  324. package/dist/hooks/tests/useOnClickOutside.stories.d.ts +0 -23
  325. package/dist/hooks/tests/useOnClickOutside.stories.js +0 -111
  326. package/dist/hooks/tests/useRTL.stories.d.ts +0 -11
  327. package/dist/hooks/tests/useRTL.stories.js +0 -23
  328. package/dist/hooks/tests/useResponsiveClientValue.stories.d.ts +0 -18
  329. package/dist/hooks/tests/useResponsiveClientValue.stories.js +0 -30
  330. package/dist/hooks/tests/useScrollLock.stories.d.ts +0 -14
  331. package/dist/hooks/tests/useScrollLock.stories.js +0 -97
  332. package/dist/hooks/tests/useToggle.stories.d.ts +0 -13
  333. package/dist/hooks/tests/useToggle.stories.js +0 -59
  334. package/dist/tests/ShadowDOM.stories.d.ts +0 -6
  335. package/dist/tests/ShadowDOM.stories.js +0 -110
  336. package/dist/tests/themes.stories.d.ts +0 -16
  337. package/dist/tests/themes.stories.js +0 -327
  338. package/dist/utilities/a11y/tests/TrapFocus.stories.d.ts +0 -14
  339. package/dist/utilities/a11y/tests/TrapFocus.stories.js +0 -615
  340. /package/dist/components/{_private/HiddenInput → HiddenInput}/HiddenInput.d.ts +0 -0
  341. /package/dist/components/{_private/HiddenInput → HiddenInput}/HiddenInput.module.css +0 -0
  342. /package/dist/components/{_private/HiddenInput → HiddenInput}/HiddenInput.types.js +0 -0
  343. /package/dist/components/{_private/HiddenInput → HiddenInput}/index.d.ts +0 -0
  344. /package/dist/components/{_private/HiddenInput → HiddenInput}/index.js +0 -0
@@ -1,29 +0,0 @@
1
- import { StoryObj } from "@storybook/react-vite";
2
- import { type Mock } from "storybook/test";
3
- declare const _default: {
4
- title: string;
5
- component: import("react").FC<import("./..").CalendarProps>;
6
- parameters: {
7
- iframe: {
8
- url: string;
9
- };
10
- };
11
- };
12
- export default _default;
13
- export declare const defaultMonth: StoryObj;
14
- export declare const uncontrolled: StoryObj<{
15
- handleChange: Mock;
16
- }>;
17
- export declare const controlled: StoryObj<{
18
- handleChange: Mock;
19
- }>;
20
- export declare const selectedDates: StoryObj;
21
- export declare const minMax: StoryObj;
22
- export declare const firstWeekDay: StoryObj;
23
- export declare const translation: {
24
- name: string;
25
- render: () => import("react").JSX.Element;
26
- };
27
- export declare const ariaLabels: StoryObj;
28
- export declare const monthSelection: StoryObj;
29
- export declare const keyboardNavigation: StoryObj;
@@ -1,255 +0,0 @@
1
- import { fn, expect, userEvent, within, waitFor } from "storybook/test";
2
- import { Example } from "../../../utilities/storybook/index.js";
3
- import Calendar from "../index.js";
4
- export default {
5
- title: "Components/Calendar",
6
- component: Calendar,
7
- parameters: {
8
- iframe: {
9
- url: "https://reshaped.so/docs/components/calendar",
10
- },
11
- },
12
- };
13
- export const defaultMonth = {
14
- name: "defaultMonth",
15
- render: () => (<Example>
16
- <Example.Item title="defaultMonth: 2020 January">
17
- <Calendar defaultMonth={new Date(2020, 0)} range/>
18
- </Example.Item>
19
- </Example>),
20
- play: ({ canvas }) => {
21
- const grid = canvas.getByRole("grid");
22
- const gridCells = canvas.getAllByRole("gridcell");
23
- const dates = canvas.getAllByRole("checkbox");
24
- const [prevButton, monthButton, nextButton] = canvas.getAllByRole("button");
25
- expect(grid).toBeInTheDocument();
26
- expect(gridCells).toHaveLength(31);
27
- expect(dates).toHaveLength(31);
28
- const focusableDates = dates.filter((el) => {
29
- return el.getAttribute("tabIndex") === "0";
30
- });
31
- // Defaults keyboard focus to the first day of the month
32
- expect(focusableDates).toHaveLength(1);
33
- expect(focusableDates[0]).toBe(dates[0]);
34
- // Default Labels
35
- expect(dates[0]).toHaveAccessibleName("Wednesday, January 1");
36
- expect(prevButton).toHaveAccessibleName("Previous month");
37
- expect(monthButton).toHaveAccessibleName("January 2020 Select a month");
38
- expect(nextButton).toHaveAccessibleName("Next month");
39
- },
40
- };
41
- export const uncontrolled = {
42
- name: "defaultValue, range",
43
- args: {
44
- handleChange: fn(),
45
- },
46
- render: (args) => (<Example>
47
- <Example.Item title="defaultValue">
48
- <Calendar defaultMonth={new Date(2020, 0)} defaultValue={new Date(2020, 0, 10)} onChange={args.handleChange}/>
49
- </Example.Item>
50
- <Example.Item title="defaultValue, range">
51
- <Calendar range defaultMonth={new Date(2020, 0)} defaultValue={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }} onChange={args.handleChange}/>
52
- </Example.Item>
53
- </Example>),
54
- play: async ({ canvas, args }) => {
55
- const [singleCalendar, rangeCalendar] = canvas.getAllByRole("grid");
56
- const singleCalendarDates = within(singleCalendar).getAllByRole("checkbox");
57
- const rangeCalendarDates = within(rangeCalendar).getAllByRole("checkbox");
58
- await userEvent.click(singleCalendarDates[7]);
59
- expect(singleCalendarDates[7]).toBeChecked();
60
- expect(args.handleChange).toHaveBeenCalledTimes(1);
61
- expect(args.handleChange).toHaveBeenLastCalledWith({ value: new Date(2020, 0, 8) });
62
- await userEvent.click(rangeCalendarDates[7]);
63
- expect(rangeCalendarDates[7]).toBeChecked();
64
- expect(args.handleChange).toHaveBeenCalledTimes(2);
65
- expect(args.handleChange).toHaveBeenLastCalledWith({
66
- value: { start: new Date(2020, 0, 8), end: null },
67
- });
68
- // While selecting end value, clicking on a date < start value should change the start value
69
- await userEvent.click(rangeCalendarDates[6]);
70
- expect(rangeCalendarDates[6]).toBeChecked();
71
- expect(rangeCalendarDates[7]).not.toBeChecked();
72
- expect(args.handleChange).toHaveBeenCalledTimes(3);
73
- expect(args.handleChange).toHaveBeenLastCalledWith({
74
- value: { start: new Date(2020, 0, 7), end: null },
75
- });
76
- await userEvent.click(rangeCalendarDates[10]);
77
- expect(args.handleChange).toHaveBeenCalledTimes(4);
78
- expect(args.handleChange).toHaveBeenLastCalledWith({
79
- value: { start: new Date(2020, 0, 7), end: new Date(2020, 0, 11) },
80
- });
81
- for (let i = 6; i < 10; i++) {
82
- expect(rangeCalendarDates[i]).toBeChecked();
83
- }
84
- },
85
- };
86
- export const controlled = {
87
- name: "value, range",
88
- args: {
89
- handleChange: fn(),
90
- },
91
- render: (args) => (<Example>
92
- <Example.Item title="value">
93
- <Calendar defaultMonth={new Date(2020, 0)} value={new Date(2020, 0, 10)} onChange={args.handleChange}/>
94
- </Example.Item>
95
- <Example.Item title="defaultValue, range">
96
- <Calendar range defaultMonth={new Date(2020, 0)} value={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }} onChange={args.handleChange}/>
97
- </Example.Item>
98
- </Example>),
99
- play: async ({ canvas, args }) => {
100
- const [singleCalendar, rangeCalendar] = canvas.getAllByRole("grid");
101
- const singleCalendarDates = within(singleCalendar).getAllByRole("checkbox");
102
- const rangeCalendarDates = within(rangeCalendar).getAllByRole("checkbox");
103
- await userEvent.click(singleCalendarDates[7]);
104
- expect(singleCalendarDates[7]).not.toBeChecked();
105
- expect(singleCalendarDates[9]).toBeChecked();
106
- expect(args.handleChange).toHaveBeenCalledTimes(1);
107
- expect(args.handleChange).toHaveBeenLastCalledWith({ value: new Date(2020, 0, 8) });
108
- await userEvent.click(rangeCalendarDates[7]);
109
- expect(rangeCalendarDates[7]).not.toBeChecked();
110
- expect(rangeCalendarDates[9]).toBeChecked();
111
- expect(args.handleChange).toHaveBeenCalledTimes(2);
112
- expect(args.handleChange).toHaveBeenLastCalledWith({
113
- value: { start: new Date(2020, 0, 8), end: null },
114
- });
115
- // While selecting end value, clicking on a date < start value should change the start value
116
- await userEvent.click(rangeCalendarDates[6]);
117
- expect(rangeCalendarDates[6]).not.toBeChecked();
118
- expect(rangeCalendarDates[9]).toBeChecked();
119
- expect(args.handleChange).toHaveBeenCalledTimes(3);
120
- expect(args.handleChange).toHaveBeenLastCalledWith({
121
- value: { start: new Date(2020, 0, 7), end: null },
122
- });
123
- // In controlled mode, clicking on a date > startValue still changes startValue since we're not updating the state
124
- await userEvent.click(rangeCalendarDates[10]);
125
- expect(args.handleChange).toHaveBeenCalledTimes(4);
126
- expect(args.handleChange).toHaveBeenLastCalledWith({
127
- value: { start: new Date(2020, 0, 11), end: null },
128
- });
129
- expect(rangeCalendarDates[6]).not.toBeChecked();
130
- expect(rangeCalendarDates[9]).toBeChecked();
131
- },
132
- };
133
- export const selectedDates = {
134
- name: "selectedDates",
135
- render: () => (<Example>
136
- <Example.Item title="selectedDates: [4,8]">
137
- <Calendar defaultMonth={new Date(2020, 0)} value={null} selectedDates={[new Date(2020, 0, 4), new Date(2020, 0, 8)]}/>
138
- </Example.Item>
139
- </Example>),
140
- play: ({ canvas }) => {
141
- const dates = canvas.getAllByRole("checkbox");
142
- expect(dates[3]).toBeChecked();
143
- expect(dates[7]).toBeChecked();
144
- },
145
- };
146
- export const minMax = {
147
- name: "min, max",
148
- render: () => (<Example>
149
- <Example.Item title="min: 4, max: 20">
150
- <Calendar defaultMonth={new Date(2020, 0)} min={new Date(2020, 0, 4)} max={new Date(2020, 0, 20)}/>
151
- </Example.Item>
152
- </Example>),
153
- play: ({ canvas }) => {
154
- const dates = canvas.getAllByRole("checkbox");
155
- expect(dates).toHaveLength(17);
156
- },
157
- };
158
- export const firstWeekDay = {
159
- name: "firstWeekDay",
160
- render: () => (<Example>
161
- <Example.Item title="firstWeekDay: 3 (Wed)">
162
- <Calendar defaultMonth={new Date(2020, 0)} firstWeekDay={3}/>
163
- </Example.Item>
164
- </Example>),
165
- };
166
- export const translation = {
167
- name: "render functions",
168
- render: () => (<Example>
169
- <Example.Item title="translated to NL">
170
- <Calendar defaultMonth={new Date(2020, 0)} renderMonthLabel={({ date }) => date.toLocaleDateString("nl", { month: "short" })} renderSelectedMonthLabel={({ date }) => date.toLocaleDateString("nl", { month: "long", year: "numeric" })} renderWeekDay={({ date }) => date.toLocaleDateString("nl", { weekday: "short" })}/>
171
- </Example.Item>
172
- </Example>),
173
- };
174
- export const ariaLabels = {
175
- name: "aria labels",
176
- render: () => (<Example>
177
- <Example.Item title="aria labels">
178
- <Calendar defaultMonth={new Date(2020, 0)} nextYearAriaLabel="Test next year" nextMonthAriaLabel="Test next month" renderDateAriaLabel={() => "Test date"} renderMonthAriaLabel={() => "Test month"} previousYearAriaLabel="Test previous year" previousMonthAriaLabel="Test previous month" monthSelectionAriaLabel="Test month selection"/>
179
- </Example.Item>
180
- </Example>),
181
- play: async ({ canvas }) => {
182
- const buttonEls = canvas.getAllByRole("button");
183
- const dateEls = canvas.getAllByRole("checkbox");
184
- expect(buttonEls[0]).toHaveAttribute("aria-label", "Test previous month");
185
- expect(buttonEls[1]).toHaveTextContent("Test month selection");
186
- expect(buttonEls[2]).toHaveAttribute("aria-label", "Test next month");
187
- expect(dateEls[0]).toHaveAttribute("aria-label", "Test date");
188
- await userEvent.click(buttonEls[1], { delay: null });
189
- const yearButtonEls = canvas.getAllByRole("button");
190
- expect(yearButtonEls[0]).toHaveAttribute("aria-label", "Test previous year");
191
- expect(yearButtonEls[1]).toHaveAttribute("aria-label", "Test next year");
192
- expect(yearButtonEls[2]).toHaveAttribute("aria-label", "Test month");
193
- },
194
- };
195
- export const monthSelection = {
196
- name: "test: month selection",
197
- render: () => (<Example>
198
- <Example.Item title="month selection">
199
- <Calendar defaultMonth={new Date(2020, 1)}/>
200
- </Example.Item>
201
- </Example>),
202
- play: async ({ canvas }) => {
203
- let buttons = canvas.getAllByRole("button");
204
- let monthButton = buttons[1];
205
- expect(monthButton).toHaveAccessibleName("February 2020 Select a month");
206
- await userEvent.click(monthButton);
207
- let months = canvas.getAllByRole("button").filter((el) => el.hasAttribute("data-rs-date"));
208
- expect(months).toHaveLength(12);
209
- await userEvent.click(months[0]);
210
- buttons = canvas.getAllByRole("button");
211
- months = buttons.filter((el) => el.hasAttribute("data-rs-date"));
212
- monthButton = buttons[1];
213
- expect(months).toHaveLength(0);
214
- expect(monthButton).toHaveAccessibleName("January 2020 Select a month");
215
- },
216
- };
217
- export const keyboardNavigation = {
218
- name: "test: keyboard navigation",
219
- render: () => (<Example>
220
- <Example.Item title="keyboard navigation">
221
- <Calendar defaultMonth={new Date(2020, 0)}/>
222
- </Example.Item>
223
- </Example>),
224
- play: async ({ canvas }) => {
225
- const buttons = canvas.getAllByRole("button");
226
- buttons[2].focus();
227
- await userEvent.keyboard("{Tab/}");
228
- expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
229
- await userEvent.keyboard("{ArrowRight/}");
230
- waitFor(() => {
231
- expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-02");
232
- });
233
- await userEvent.keyboard("{Shift>}{Tab/}{/Shift}");
234
- await userEvent.keyboard("{Tab/}");
235
- waitFor(() => {
236
- expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-02");
237
- });
238
- await userEvent.keyboard("{ArrowLeft/}");
239
- waitFor(() => {
240
- expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
241
- });
242
- await userEvent.keyboard("{ArrowDown/}");
243
- waitFor(() => {
244
- expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-08");
245
- });
246
- await userEvent.keyboard("{ArrowUp/}");
247
- waitFor(() => {
248
- expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
249
- });
250
- await userEvent.keyboard("{ArrowUp/}");
251
- waitFor(() => {
252
- expect(document.activeElement).toHaveAttribute("data-rs-date", "2019-12-25");
253
- });
254
- },
255
- };
@@ -1,52 +0,0 @@
1
- import React from "react";
2
- import { StoryObj } from "@storybook/react-vite";
3
- import { fn } from "storybook/test";
4
- declare const _default: {
5
- title: string;
6
- component: React.ForwardRefExoticComponent<{
7
- padding?: import("../../../types/global").Responsive<number>;
8
- bleed?: import("../../../types/global").Responsive<number>;
9
- selected?: boolean;
10
- elevated?: boolean;
11
- children?: React.ReactNode;
12
- onClick?: import("../../Actionable").ActionableProps["onClick"];
13
- href?: string;
14
- as?: keyof React.JSX.IntrinsicElements | undefined;
15
- className?: import("../../../types/global").ClassName;
16
- attributes?: (import("../../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "key" | "value" | "hidden" | "color" | "content" | "className" | "aria-orientation" | "role" | "translate" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dir" | "name" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "onToggle" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
17
- ref?: import("../../Actionable/Actionable.types").AttributesRef;
18
- }) | undefined)) | undefined;
19
- } & Pick<import("../../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;
20
- parameters: {
21
- iframe: {
22
- url: string;
23
- };
24
- };
25
- };
26
- export default _default;
27
- export declare const padding: {
28
- name: string;
29
- render: () => React.JSX.Element;
30
- };
31
- export declare const selected: {
32
- name: string;
33
- render: () => React.JSX.Element;
34
- };
35
- export declare const elevated: {
36
- name: string;
37
- render: () => React.JSX.Element;
38
- };
39
- export declare const bleed: {
40
- name: string;
41
- render: () => React.JSX.Element;
42
- };
43
- export declare const height: {
44
- name: string;
45
- render: () => React.JSX.Element;
46
- };
47
- export declare const onClick: StoryObj<{
48
- handleClick: ReturnType<typeof fn>;
49
- }>;
50
- export declare const href: StoryObj;
51
- export declare const as: StoryObj;
52
- export declare const className: StoryObj;
@@ -1,125 +0,0 @@
1
- import React from "react";
2
- import { Example, Placeholder } from "../../../utilities/storybook/index.js";
3
- import Card from "../index.js";
4
- import { expect, fn, userEvent } from "storybook/test";
5
- export default {
6
- title: "Components/Card",
7
- component: Card,
8
- parameters: {
9
- iframe: {
10
- url: "https://reshaped.so/docs/components/card",
11
- },
12
- },
13
- };
14
- export const padding = {
15
- name: "padding",
16
- render: () => (<Example>
17
- <Example.Item title="padding: default">
18
- <Card>
19
- <Placeholder />
20
- </Card>
21
- </Example.Item>
22
-
23
- <Example.Item title="padding: 2">
24
- <Card padding={2}>
25
- <Placeholder />
26
- </Card>
27
- </Example.Item>
28
-
29
- <Example.Item title="padding: 0">
30
- <Card padding={0}>
31
- <Placeholder />
32
- </Card>
33
- </Example.Item>
34
-
35
- <Example.Item title={["responsive padding", "[s] 4", "[m+] 8"]}>
36
- <Card padding={{ s: 4, m: 8 }}>
37
- <Placeholder />
38
- </Card>
39
- </Example.Item>
40
- </Example>),
41
- };
42
- export const selected = {
43
- name: "selected",
44
- render: () => (<Example>
45
- <Example.Item title="selected">
46
- <Card selected>
47
- <Placeholder />
48
- </Card>
49
- </Example.Item>
50
- </Example>),
51
- };
52
- export const elevated = {
53
- name: "elevated",
54
- render: () => (<Example>
55
- <Example.Item title="elevated">
56
- <Card elevated>
57
- <Placeholder />
58
- </Card>
59
- </Example.Item>
60
- </Example>),
61
- };
62
- export const bleed = {
63
- name: "bleed",
64
- render: () => (<Example>
65
- <Example.Item title="bleed: 4">
66
- <Card bleed={4}>
67
- <Placeholder />
68
- </Card>
69
- </Example.Item>
70
- <Example.Item title={["responsive bleed", "[s] 4", "[m+] 0"]}>
71
- <Card bleed={{ s: 4, m: 0 }}>
72
- <Placeholder />
73
- </Card>
74
- </Example.Item>
75
- </Example>),
76
- };
77
- export const height = {
78
- name: "height",
79
- render: () => (<Example>
80
- <Example.Item title="height: 200px">
81
- <Card height="200px"/>
82
- </Example.Item>
83
- </Example>),
84
- };
85
- export const onClick = {
86
- name: "onClick",
87
- args: {
88
- handleClick: fn(),
89
- },
90
- render: (args) => <Card onClick={args.handleClick}>Trigger</Card>,
91
- play: async ({ canvas, args }) => {
92
- const { handleClick } = args;
93
- const el = canvas.getAllByRole("button")[0];
94
- await userEvent.click(el);
95
- expect(handleClick).toHaveBeenCalledTimes(1);
96
- expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
97
- },
98
- };
99
- export const href = {
100
- name: "href",
101
- render: () => <Card href="https://reshaped.so">Trigger</Card>,
102
- play: async ({ canvas }) => {
103
- const el = canvas.getByRole("link");
104
- expect(el).toHaveAttribute("href", "https://reshaped.so");
105
- },
106
- };
107
- export const as = {
108
- name: "as",
109
- render: () => <Card as="span" attributes={{ "data-testid": "root" }}/>,
110
- play: ({ canvas }) => {
111
- const root = canvas.getByTestId("root");
112
- expect(root.tagName).toBe("SPAN");
113
- },
114
- };
115
- export const className = {
116
- name: "className, attributes",
117
- render: () => (<div data-testid="root">
118
- <Card className="test-classname" attributes={{ id: "test-id" }}/>
119
- </div>),
120
- play: async ({ canvas }) => {
121
- const root = canvas.getByTestId("root").firstChild;
122
- expect(root).toHaveClass("test-classname");
123
- expect(root).toHaveAttribute("id", "test-id");
124
- },
125
- };
@@ -1,34 +0,0 @@
1
- import React from "react";
2
- import { StoryObj } from "@storybook/react-vite";
3
- import { fn } from "storybook/test";
4
- declare const _default: {
5
- title: string;
6
- component: React.FC<import("./..").CarouselProps>;
7
- parameters: {
8
- a11y: {
9
- disable: boolean;
10
- };
11
- iframe: {
12
- url: string;
13
- };
14
- };
15
- };
16
- export default _default;
17
- export declare const base: StoryObj;
18
- export declare const visibleItems: {
19
- name: string;
20
- render: () => React.JSX.Element;
21
- };
22
- export declare const gap: {
23
- name: string;
24
- render: () => React.JSX.Element;
25
- };
26
- export declare const bleed: {
27
- name: string;
28
- render: () => React.JSX.Element;
29
- };
30
- export declare const navigationDisplay: StoryObj;
31
- export declare const instanceRef: StoryObj<{
32
- handleChange: ReturnType<typeof fn>;
33
- }>;
34
- export declare const className: StoryObj;