paris 0.23.1 → 0.24.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 (555) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +17 -17
  3. package/dist/helpers/OpenChangeEffect.d.ts +11 -0
  4. package/dist/helpers/OpenChangeEffect.js +16 -0
  5. package/dist/helpers/OpenChangeEffect.js.map +1 -0
  6. package/dist/helpers/renderEnhancer.d.ts +7 -0
  7. package/dist/helpers/renderEnhancer.js +20 -0
  8. package/dist/helpers/renderEnhancer.js.map +1 -0
  9. package/dist/helpers/useControllableState.d.ts +7 -0
  10. package/dist/helpers/useControllableState.js +49 -0
  11. package/dist/helpers/useControllableState.js.map +1 -0
  12. package/dist/helpers/useIsMounted.d.ts +1 -0
  13. package/dist/helpers/useResizeObserver.d.ts +12 -0
  14. package/dist/stories/accordion/Accordion.d.ts +47 -0
  15. package/dist/stories/accordion/Accordion.js +82 -0
  16. package/dist/stories/accordion/Accordion.js.map +1 -0
  17. package/dist/stories/accordion/Accordion.module.css +130 -0
  18. package/dist/stories/accordion/Accordion.module.scss.js +26 -0
  19. package/dist/stories/accordion/Accordion.module.scss.js.map +1 -0
  20. package/dist/stories/accordion/index.js +2 -0
  21. package/dist/stories/accordion/index.js.map +1 -0
  22. package/dist/stories/accordionselect/AccordionSelect.d.ts +102 -0
  23. package/dist/stories/accordionselect/AccordionSelect.js +137 -0
  24. package/dist/stories/accordionselect/AccordionSelect.js.map +1 -0
  25. package/dist/stories/accordionselect/AccordionSelect.module.css +106 -0
  26. package/dist/stories/accordionselect/AccordionSelect.module.scss.js +27 -0
  27. package/dist/stories/accordionselect/AccordionSelect.module.scss.js.map +1 -0
  28. package/dist/stories/accordionselect/index.js +2 -0
  29. package/dist/stories/accordionselect/index.js.map +1 -0
  30. package/dist/stories/avatar/Avatar.d.ts +22 -0
  31. package/dist/stories/avatar/Avatar.js +37 -0
  32. package/dist/stories/avatar/Avatar.js.map +1 -0
  33. package/dist/stories/avatar/Avatar.module.css +7 -0
  34. package/dist/stories/avatar/Avatar.module.scss.js +7 -0
  35. package/dist/stories/avatar/Avatar.module.scss.js.map +1 -0
  36. package/dist/stories/avatar/index.js +2 -0
  37. package/dist/stories/avatar/index.js.map +1 -0
  38. package/dist/stories/button/Button.d.ts +120 -0
  39. package/dist/stories/button/Button.js +123 -0
  40. package/dist/stories/button/Button.js.map +1 -0
  41. package/dist/stories/button/Button.module.css +137 -0
  42. package/dist/stories/button/Button.module.scss.js +35 -0
  43. package/dist/stories/button/Button.module.scss.js.map +1 -0
  44. package/dist/stories/button/index.js +2 -0
  45. package/dist/stories/button/index.js.map +1 -0
  46. package/dist/stories/callout/Callout.d.ts +22 -0
  47. package/dist/stories/callout/Callout.js +21 -0
  48. package/dist/stories/callout/Callout.js.map +1 -0
  49. package/dist/stories/callout/Callout.module.css +35 -0
  50. package/dist/stories/callout/Callout.module.scss.js +15 -0
  51. package/dist/stories/callout/Callout.module.scss.js.map +1 -0
  52. package/dist/stories/callout/index.js +2 -0
  53. package/dist/stories/callout/index.js.map +1 -0
  54. package/dist/stories/card/Card.d.ts +30 -0
  55. package/dist/stories/card/Card.js +22 -0
  56. package/dist/stories/card/Card.js.map +1 -0
  57. package/dist/stories/card/Card.module.css +39 -0
  58. package/dist/stories/card/Card.module.scss.js +17 -0
  59. package/dist/stories/card/Card.module.scss.js.map +1 -0
  60. package/dist/stories/card/index.js +2 -0
  61. package/dist/stories/card/index.js.map +1 -0
  62. package/dist/stories/cardbutton/CardButton.d.ts +50 -0
  63. package/dist/stories/cardbutton/CardButton.js +53 -0
  64. package/dist/stories/cardbutton/CardButton.js.map +1 -0
  65. package/dist/stories/cardbutton/CardButton.module.css +77 -0
  66. package/dist/stories/cardbutton/CardButton.module.scss.js +19 -0
  67. package/dist/stories/cardbutton/CardButton.module.scss.js.map +1 -0
  68. package/dist/stories/cardbutton/index.js +2 -0
  69. package/dist/stories/cardbutton/index.js.map +1 -0
  70. package/dist/stories/checkbox/Checkbox.d.ts +31 -0
  71. package/dist/stories/checkbox/Checkbox.js +99 -0
  72. package/dist/stories/checkbox/Checkbox.js.map +1 -0
  73. package/dist/stories/checkbox/Checkbox.module.css +155 -0
  74. package/dist/stories/checkbox/Checkbox.module.scss.js +32 -0
  75. package/dist/stories/checkbox/Checkbox.module.scss.js.map +1 -0
  76. package/dist/stories/checkbox/index.js +2 -0
  77. package/dist/stories/checkbox/index.js.map +1 -0
  78. package/dist/stories/codeinput/CodeInput.d.ts +47 -0
  79. package/dist/stories/codeinput/CodeInput.js +105 -0
  80. package/dist/stories/codeinput/CodeInput.js.map +1 -0
  81. package/dist/stories/codeinput/CodeInput.module.css +63 -0
  82. package/dist/stories/codeinput/CodeInput.module.scss.js +13 -0
  83. package/dist/stories/codeinput/CodeInput.module.scss.js.map +1 -0
  84. package/dist/stories/codeinput/index.js +2 -0
  85. package/dist/stories/codeinput/index.js.map +1 -0
  86. package/dist/stories/combobox/Combobox.d.ts +125 -0
  87. package/dist/stories/combobox/Combobox.js +257 -0
  88. package/dist/stories/combobox/Combobox.js.map +1 -0
  89. package/dist/stories/combobox/index.js +2 -0
  90. package/dist/stories/combobox/index.js.map +1 -0
  91. package/dist/stories/dialog/Dialog.d.ts +103 -0
  92. package/dist/stories/dialog/Dialog.js +187 -0
  93. package/dist/stories/dialog/Dialog.js.map +1 -0
  94. package/dist/stories/dialog/Dialog.module.css +185 -0
  95. package/dist/stories/dialog/Dialog.module.scss.js +48 -0
  96. package/dist/stories/dialog/Dialog.module.scss.js.map +1 -0
  97. package/dist/stories/dialog/index.js +2 -0
  98. package/dist/stories/dialog/index.js.map +1 -0
  99. package/dist/stories/drawer/Drawer.d.ts +143 -0
  100. package/dist/stories/drawer/Drawer.js +357 -0
  101. package/dist/stories/drawer/Drawer.js.map +1 -0
  102. package/dist/stories/drawer/Drawer.module.css +406 -0
  103. package/dist/stories/drawer/Drawer.module.scss.js +96 -0
  104. package/dist/stories/drawer/Drawer.module.scss.js.map +1 -0
  105. package/dist/stories/drawer/DrawerActions.d.ts +5 -0
  106. package/dist/stories/drawer/DrawerActions.js +23 -0
  107. package/dist/stories/drawer/DrawerActions.js.map +1 -0
  108. package/dist/stories/drawer/DrawerBottomPanel.d.ts +9 -0
  109. package/dist/stories/drawer/DrawerBottomPanel.js +48 -0
  110. package/dist/stories/drawer/DrawerBottomPanel.js.map +1 -0
  111. package/dist/stories/drawer/DrawerContext.d.ts +11 -0
  112. package/dist/stories/drawer/DrawerContext.js +23 -0
  113. package/dist/stories/drawer/DrawerContext.js.map +1 -0
  114. package/dist/stories/drawer/DrawerPage.d.ts +12 -0
  115. package/dist/stories/drawer/DrawerPage.js +22 -0
  116. package/dist/stories/drawer/DrawerPage.js.map +1 -0
  117. package/dist/stories/drawer/DrawerPageContext.d.ts +12 -0
  118. package/dist/stories/drawer/DrawerPageContext.js +23 -0
  119. package/dist/stories/drawer/DrawerPageContext.js.map +1 -0
  120. package/dist/stories/drawer/DrawerPaginationContext.d.ts +9 -0
  121. package/dist/stories/drawer/DrawerPaginationContext.js +17 -0
  122. package/dist/stories/drawer/DrawerPaginationContext.js.map +1 -0
  123. package/dist/stories/drawer/DrawerProgressBar.d.ts +15 -0
  124. package/dist/stories/drawer/DrawerProgressBar.js +60 -0
  125. package/dist/stories/drawer/DrawerProgressBar.js.map +1 -0
  126. package/dist/stories/drawer/DrawerSlotContext.d.ts +34 -0
  127. package/dist/stories/drawer/DrawerSlotContext.js +120 -0
  128. package/dist/stories/drawer/DrawerSlotContext.js.map +1 -0
  129. package/dist/stories/drawer/DrawerTitle.d.ts +5 -0
  130. package/dist/stories/drawer/DrawerTitle.js +29 -0
  131. package/dist/stories/drawer/DrawerTitle.js.map +1 -0
  132. package/dist/stories/drawer/index.js +10 -0
  133. package/dist/stories/drawer/index.js.map +1 -0
  134. package/dist/stories/field/Field.d.ts +54 -0
  135. package/dist/stories/field/Field.js +91 -0
  136. package/dist/stories/field/Field.js.map +1 -0
  137. package/dist/stories/field/index.js +2 -0
  138. package/dist/stories/field/index.js.map +1 -0
  139. package/dist/stories/icon/ArrowRight.d.ts +2 -0
  140. package/dist/stories/icon/ArrowRight.js +13 -0
  141. package/dist/stories/icon/ArrowRight.js.map +1 -0
  142. package/dist/stories/icon/Check.d.ts +2 -0
  143. package/dist/stories/icon/Check.js +13 -0
  144. package/dist/stories/icon/Check.js.map +1 -0
  145. package/dist/stories/icon/ChevronLeft.d.ts +2 -0
  146. package/dist/stories/icon/ChevronLeft.js +13 -0
  147. package/dist/stories/icon/ChevronLeft.js.map +1 -0
  148. package/dist/stories/icon/ChevronRight.d.ts +2 -0
  149. package/dist/stories/icon/ChevronRight.js +13 -0
  150. package/dist/stories/icon/ChevronRight.js.map +1 -0
  151. package/dist/stories/icon/Close.d.ts +2 -0
  152. package/dist/stories/icon/Close.js +13 -0
  153. package/dist/stories/icon/Close.js.map +1 -0
  154. package/dist/stories/icon/Ellipsis.d.ts +2 -0
  155. package/dist/stories/icon/Ellipsis.js +13 -0
  156. package/dist/stories/icon/Ellipsis.js.map +1 -0
  157. package/{src/stories/icon/Icon.tsx → dist/stories/icon/Icon.d.ts} +2 -8
  158. package/dist/stories/icon/Icon.js +8 -0
  159. package/dist/stories/icon/Icon.js.map +1 -0
  160. package/dist/stories/icon/Info.d.ts +2 -0
  161. package/dist/stories/icon/Info.js +13 -0
  162. package/dist/stories/icon/Info.js.map +1 -0
  163. package/dist/stories/icon/NotificationDot.d.ts +2 -0
  164. package/dist/stories/icon/NotificationDot.js +7 -0
  165. package/dist/stories/icon/NotificationDot.js.map +1 -0
  166. package/dist/stories/icon/Spinner.d.ts +2 -0
  167. package/dist/stories/icon/Spinner.js +24 -0
  168. package/dist/stories/icon/Spinner.js.map +1 -0
  169. package/dist/stories/icon/index.js +11 -0
  170. package/dist/stories/icon/index.js.map +1 -0
  171. package/dist/stories/informationaltooltip/InformationalTooltip.d.ts +68 -0
  172. package/dist/stories/informationaltooltip/InformationalTooltip.js +85 -0
  173. package/dist/stories/informationaltooltip/InformationalTooltip.js.map +1 -0
  174. package/dist/stories/informationaltooltip/InformationalTooltip.module.css +22 -0
  175. package/dist/stories/informationaltooltip/InformationalTooltip.module.scss.js +11 -0
  176. package/dist/stories/informationaltooltip/InformationalTooltip.module.scss.js.map +1 -0
  177. package/dist/stories/informationaltooltip/index.js +2 -0
  178. package/dist/stories/informationaltooltip/index.js.map +1 -0
  179. package/dist/stories/input/Input.d.ts +57 -0
  180. package/dist/stories/input/Input.js +108 -0
  181. package/dist/stories/input/Input.js.map +1 -0
  182. package/dist/stories/input/Input.module.css +165 -0
  183. package/dist/stories/input/Input.module.scss.js +23 -0
  184. package/dist/stories/input/Input.module.scss.js.map +1 -0
  185. package/dist/stories/input/index.js +2 -0
  186. package/dist/stories/input/index.js.map +1 -0
  187. package/dist/stories/markdown/Markdown.d.ts +36 -0
  188. package/dist/stories/markdown/Markdown.js +141 -0
  189. package/dist/stories/markdown/Markdown.js.map +1 -0
  190. package/dist/stories/markdown/Markdown.module.css +301 -0
  191. package/dist/stories/markdown/Markdown.module.scss.js +73 -0
  192. package/dist/stories/markdown/Markdown.module.scss.js.map +1 -0
  193. package/dist/stories/markdown/index.js +2 -0
  194. package/dist/stories/markdown/index.js.map +1 -0
  195. package/dist/stories/markdowneditor/FixedToolbar.d.ts +19 -0
  196. package/dist/stories/markdowneditor/FixedToolbar.js +212 -0
  197. package/dist/stories/markdowneditor/FixedToolbar.js.map +1 -0
  198. package/dist/stories/markdowneditor/FixedToolbar.module.css +24 -0
  199. package/dist/stories/markdowneditor/FixedToolbar.module.scss.js +11 -0
  200. package/dist/stories/markdowneditor/FixedToolbar.module.scss.js.map +1 -0
  201. package/dist/stories/markdowneditor/FloatingToolbar.d.ts +15 -0
  202. package/dist/stories/markdowneditor/FloatingToolbar.js +66 -0
  203. package/dist/stories/markdowneditor/FloatingToolbar.js.map +1 -0
  204. package/dist/stories/markdowneditor/FloatingToolbar.module.css +18 -0
  205. package/dist/stories/markdowneditor/FloatingToolbar.module.scss.js +9 -0
  206. package/dist/stories/markdowneditor/FloatingToolbar.module.scss.js.map +1 -0
  207. package/dist/stories/markdowneditor/LinkPopover.d.ts +11 -0
  208. package/dist/stories/markdowneditor/LinkPopover.js +106 -0
  209. package/dist/stories/markdowneditor/LinkPopover.js.map +1 -0
  210. package/dist/stories/markdowneditor/LinkPopover.module.css +113 -0
  211. package/dist/stories/markdowneditor/LinkPopover.module.scss.js +21 -0
  212. package/dist/stories/markdowneditor/LinkPopover.module.scss.js.map +1 -0
  213. package/{src/stories/markdowneditor/MarkdownEditor.tsx → dist/stories/markdowneditor/MarkdownEditor.d.ts} +5 -68
  214. package/dist/stories/markdowneditor/MarkdownEditor.js +62 -0
  215. package/dist/stories/markdowneditor/MarkdownEditor.js.map +1 -0
  216. package/dist/stories/markdowneditor/MarkdownEditor.module.css +325 -0
  217. package/dist/stories/markdowneditor/MarkdownEditor.module.scss.js +11 -0
  218. package/dist/stories/markdowneditor/MarkdownEditor.module.scss.js.map +1 -0
  219. package/dist/stories/markdowneditor/MarkdownEditorContext.d.ts +10 -0
  220. package/dist/stories/markdowneditor/MarkdownEditorContext.js +11 -0
  221. package/dist/stories/markdowneditor/MarkdownEditorContext.js.map +1 -0
  222. package/dist/stories/markdowneditor/ToolbarButton.d.ts +22 -0
  223. package/dist/stories/markdowneditor/ToolbarButton.js +33 -0
  224. package/dist/stories/markdowneditor/ToolbarButton.js.map +1 -0
  225. package/dist/stories/markdowneditor/ToolbarButton.module.css +30 -0
  226. package/dist/stories/markdowneditor/ToolbarButton.module.scss.js +7 -0
  227. package/dist/stories/markdowneditor/ToolbarButton.module.scss.js.map +1 -0
  228. package/dist/stories/markdowneditor/features.d.ts +10 -0
  229. package/dist/stories/markdowneditor/features.js +79 -0
  230. package/dist/stories/markdowneditor/features.js.map +1 -0
  231. package/dist/stories/markdowneditor/index.js +7 -0
  232. package/dist/stories/markdowneditor/index.js.map +1 -0
  233. package/dist/stories/markdowneditor/useMarkdownEditor.d.ts +19 -0
  234. package/dist/stories/markdowneditor/useMarkdownEditor.js +50 -0
  235. package/dist/stories/markdowneditor/useMarkdownEditor.js.map +1 -0
  236. package/dist/stories/menu/Menu.d.ts +48 -0
  237. package/dist/stories/menu/Menu.js +31 -0
  238. package/dist/stories/menu/Menu.js.map +1 -0
  239. package/dist/stories/menu/Menu.module.css +59 -0
  240. package/dist/stories/menu/Menu.module.scss.js +12 -0
  241. package/dist/stories/menu/Menu.module.scss.js.map +1 -0
  242. package/dist/stories/menu/index.js +2 -0
  243. package/dist/stories/menu/index.js.map +1 -0
  244. package/dist/stories/pagination/index.js +2 -0
  245. package/dist/stories/pagination/index.js.map +1 -0
  246. package/dist/stories/pagination/usePagination.d.ts +47 -0
  247. package/dist/stories/pagination/usePagination.js +52 -0
  248. package/dist/stories/pagination/usePagination.js.map +1 -0
  249. package/dist/stories/popover/Popover.d.ts +29 -0
  250. package/dist/stories/popover/Popover.js +56 -0
  251. package/dist/stories/popover/Popover.js.map +1 -0
  252. package/dist/stories/popover/Popover.module.css +20 -0
  253. package/dist/stories/popover/Popover.module.scss.js +8 -0
  254. package/dist/stories/popover/Popover.module.scss.js.map +1 -0
  255. package/dist/stories/popover/index.js +2 -0
  256. package/dist/stories/popover/index.js.map +1 -0
  257. package/dist/stories/select/Select.d.ts +112 -0
  258. package/dist/stories/select/Select.js +283 -0
  259. package/dist/stories/select/Select.js.map +1 -0
  260. package/dist/stories/select/Select.module.css +236 -0
  261. package/dist/stories/select/Select.module.scss.js +47 -0
  262. package/dist/stories/select/Select.module.scss.js.map +1 -0
  263. package/dist/stories/select/index.js +2 -0
  264. package/dist/stories/select/index.js.map +1 -0
  265. package/dist/stories/styledlink/StyledLink.d.ts +20 -0
  266. package/dist/stories/styledlink/StyledLink.js +15 -0
  267. package/dist/stories/styledlink/StyledLink.js.map +1 -0
  268. package/dist/stories/styledlink/StyledLink.module.css +10 -0
  269. package/dist/stories/styledlink/StyledLink.module.scss.js +7 -0
  270. package/dist/stories/styledlink/StyledLink.module.scss.js.map +1 -0
  271. package/dist/stories/styledlink/index.js +2 -0
  272. package/dist/stories/styledlink/index.js.map +1 -0
  273. package/dist/stories/table/Table.d.ts +76 -0
  274. package/dist/stories/table/Table.js +91 -0
  275. package/dist/stories/table/Table.js.map +1 -0
  276. package/dist/stories/table/Table.module.css +60 -0
  277. package/dist/stories/table/Table.module.scss.js +21 -0
  278. package/dist/stories/table/Table.module.scss.js.map +1 -0
  279. package/dist/stories/table/index.js +2 -0
  280. package/dist/stories/table/index.js.map +1 -0
  281. package/dist/stories/tabs/Tabs.d.ts +74 -0
  282. package/dist/stories/tabs/Tabs.js +128 -0
  283. package/dist/stories/tabs/Tabs.js.map +1 -0
  284. package/dist/stories/tabs/Tabs.module.css +144 -0
  285. package/dist/stories/tabs/Tabs.module.scss.js +37 -0
  286. package/dist/stories/tabs/Tabs.module.scss.js.map +1 -0
  287. package/dist/stories/tabs/index.js +2 -0
  288. package/dist/stories/tabs/index.js.map +1 -0
  289. package/dist/stories/tag/Tag.d.ts +36 -0
  290. package/dist/stories/tag/Tag.js +52 -0
  291. package/dist/stories/tag/Tag.js.map +1 -0
  292. package/dist/stories/tag/Tag.module.css +164 -0
  293. package/dist/stories/tag/Tag.module.scss.js +38 -0
  294. package/dist/stories/tag/Tag.module.scss.js.map +1 -0
  295. package/dist/stories/tag/index.js +2 -0
  296. package/dist/stories/tag/index.js.map +1 -0
  297. package/dist/stories/text/Text.d.ts +52 -0
  298. package/dist/stories/text/Text.js +37 -0
  299. package/dist/stories/text/Text.js.map +1 -0
  300. package/dist/stories/text/Text.module.css +54 -0
  301. package/dist/stories/text/Text.module.scss.js +19 -0
  302. package/dist/stories/text/Text.module.scss.js.map +1 -0
  303. package/{src → dist}/stories/text/Typography.module.css +20 -20
  304. package/dist/stories/text/Typography.module.css.js +45 -0
  305. package/dist/stories/text/Typography.module.css.js.map +1 -0
  306. package/dist/stories/text/index.js +2 -0
  307. package/dist/stories/text/index.js.map +1 -0
  308. package/dist/stories/textarea/TextArea.d.ts +28 -0
  309. package/dist/stories/textarea/TextArea.js +102 -0
  310. package/dist/stories/textarea/TextArea.js.map +1 -0
  311. package/dist/stories/textarea/index.js +2 -0
  312. package/dist/stories/textarea/index.js.map +1 -0
  313. package/{src/stories/theme/tw-preflight.css → dist/stories/theme/global.css} +86 -110
  314. package/dist/stories/theme/index.js +4 -0
  315. package/dist/stories/theme/index.js.map +1 -0
  316. package/dist/stories/theme/themes.d.ts +513 -0
  317. package/dist/stories/theme/themes.js +854 -0
  318. package/dist/stories/theme/themes.js.map +1 -0
  319. package/dist/stories/theme/tokens.d.ts +128 -0
  320. package/dist/stories/theme/tokens.js +130 -0
  321. package/dist/stories/theme/tokens.js.map +1 -0
  322. package/dist/stories/tilt/Tilt.d.ts +70 -0
  323. package/dist/stories/tilt/Tilt.js +256 -0
  324. package/dist/stories/tilt/Tilt.js.map +1 -0
  325. package/dist/stories/tilt/Tilt.module.css +22 -0
  326. package/dist/stories/tilt/Tilt.module.scss.js +11 -0
  327. package/dist/stories/tilt/Tilt.module.scss.js.map +1 -0
  328. package/dist/stories/tilt/index.js +2 -0
  329. package/dist/stories/tilt/index.js.map +1 -0
  330. package/{src/stories/toast/Toast.tsx → dist/stories/toast/Toast.d.ts} +3 -17
  331. package/dist/stories/toast/Toast.js +19 -0
  332. package/dist/stories/toast/Toast.js.map +1 -0
  333. package/dist/stories/toast/Toast.module.css +17 -0
  334. package/dist/stories/toast/Toast.module.scss.js +7 -0
  335. package/dist/stories/toast/Toast.module.scss.js.map +1 -0
  336. package/dist/stories/toast/index.js +3 -0
  337. package/dist/stories/toast/index.js.map +1 -0
  338. package/dist/stories/utility/EasingFunctions.d.ts +1 -0
  339. package/dist/stories/utility/EasingFunctions.js +6 -0
  340. package/dist/stories/utility/EasingFunctions.js.map +1 -0
  341. package/dist/stories/utility/RemoveFromDOM.d.ts +11 -0
  342. package/dist/stories/utility/RemoveFromDOM.js +7 -0
  343. package/dist/stories/utility/RemoveFromDOM.js.map +1 -0
  344. package/dist/stories/utility/TextWhenString.d.ts +6 -0
  345. package/dist/stories/utility/TextWhenString.js +13 -0
  346. package/dist/stories/utility/TextWhenString.js.map +1 -0
  347. package/dist/stories/utility/VisuallyHidden.d.ts +13 -0
  348. package/dist/stories/utility/VisuallyHidden.js +8 -0
  349. package/dist/stories/utility/VisuallyHidden.js.map +1 -0
  350. package/dist/stories/utility/index.js +5 -0
  351. package/dist/stories/utility/index.js.map +1 -0
  352. package/dist/styles.css +3307 -0
  353. package/dist/types/Enhancer.d.ts +4 -0
  354. package/package.json +148 -44
  355. package/src/helpers/OpenChangeEffect.tsx +0 -21
  356. package/src/helpers/renderEnhancer.tsx +0 -20
  357. package/src/helpers/useControllableState.test.ts +0 -88
  358. package/src/helpers/useControllableState.ts +0 -59
  359. package/src/helpers/useIsMounted.ts +0 -17
  360. package/src/helpers/useResizeObserver.ts +0 -94
  361. package/src/pages/_app.tsx +0 -6
  362. package/src/pages/_document.tsx +0 -13
  363. package/src/pages/index.tsx +0 -116
  364. package/src/stories/Pagination.mdx +0 -73
  365. package/src/stories/Tokens.mdx +0 -46
  366. package/src/stories/Welcome.mdx +0 -8
  367. package/src/stories/accordion/Accordion.module.scss +0 -163
  368. package/src/stories/accordion/Accordion.stories.ts +0 -48
  369. package/src/stories/accordion/Accordion.test.tsx +0 -142
  370. package/src/stories/accordion/Accordion.tsx +0 -148
  371. package/src/stories/accordionselect/AccordionSelect.module.scss +0 -119
  372. package/src/stories/accordionselect/AccordionSelect.stories.ts +0 -38
  373. package/src/stories/accordionselect/AccordionSelect.test.tsx +0 -327
  374. package/src/stories/accordionselect/AccordionSelect.tsx +0 -249
  375. package/src/stories/avatar/Avatar.module.scss +0 -7
  376. package/src/stories/avatar/Avatar.stories.ts +0 -22
  377. package/src/stories/avatar/Avatar.test.tsx +0 -77
  378. package/src/stories/avatar/Avatar.tsx +0 -55
  379. package/src/stories/button/Button.module.scss +0 -167
  380. package/src/stories/button/Button.stories.ts +0 -93
  381. package/src/stories/button/Button.test.tsx +0 -266
  382. package/src/stories/button/Button.tsx +0 -226
  383. package/src/stories/callout/Callout.module.scss +0 -43
  384. package/src/stories/callout/Callout.stories.ts +0 -52
  385. package/src/stories/callout/Callout.test.tsx +0 -79
  386. package/src/stories/callout/Callout.tsx +0 -43
  387. package/src/stories/card/Card.module.scss +0 -42
  388. package/src/stories/card/Card.stories.ts +0 -38
  389. package/src/stories/card/Card.test.tsx +0 -81
  390. package/src/stories/card/Card.tsx +0 -54
  391. package/src/stories/cardbutton/CardButton.module.scss +0 -88
  392. package/src/stories/cardbutton/CardButton.stories.tsx +0 -24
  393. package/src/stories/cardbutton/CardButton.test.tsx +0 -174
  394. package/src/stories/cardbutton/CardButton.tsx +0 -100
  395. package/src/stories/checkbox/Checkbox.module.scss +0 -198
  396. package/src/stories/checkbox/Checkbox.stories.ts +0 -87
  397. package/src/stories/checkbox/Checkbox.test.tsx +0 -584
  398. package/src/stories/checkbox/Checkbox.tsx +0 -123
  399. package/src/stories/codeinput/CodeInput.module.scss +0 -77
  400. package/src/stories/codeinput/CodeInput.stories.ts +0 -51
  401. package/src/stories/codeinput/CodeInput.test.tsx +0 -56
  402. package/src/stories/codeinput/CodeInput.tsx +0 -160
  403. package/src/stories/combobox/Combobox.module.scss +0 -5
  404. package/src/stories/combobox/Combobox.stories.ts +0 -270
  405. package/src/stories/combobox/Combobox.test.tsx +0 -275
  406. package/src/stories/combobox/Combobox.tsx +0 -396
  407. package/src/stories/dialog/Dialog.module.scss +0 -211
  408. package/src/stories/dialog/Dialog.stories.tsx +0 -93
  409. package/src/stories/dialog/Dialog.test.tsx +0 -244
  410. package/src/stories/dialog/Dialog.tsx +0 -283
  411. package/src/stories/drawer/Drawer.module.scss +0 -479
  412. package/src/stories/drawer/Drawer.stories.tsx +0 -494
  413. package/src/stories/drawer/Drawer.test.tsx +0 -734
  414. package/src/stories/drawer/Drawer.tsx +0 -548
  415. package/src/stories/drawer/DrawerActions.tsx +0 -28
  416. package/src/stories/drawer/DrawerBottomPanel.tsx +0 -55
  417. package/src/stories/drawer/DrawerContext.tsx +0 -31
  418. package/src/stories/drawer/DrawerPage.tsx +0 -37
  419. package/src/stories/drawer/DrawerPageContext.tsx +0 -35
  420. package/src/stories/drawer/DrawerPaginationContext.tsx +0 -22
  421. package/src/stories/drawer/DrawerProgressBar.tsx +0 -72
  422. package/src/stories/drawer/DrawerSlotContext.tsx +0 -172
  423. package/src/stories/drawer/DrawerTitle.tsx +0 -35
  424. package/src/stories/field/Field.stories.ts +0 -36
  425. package/src/stories/field/Field.test.tsx +0 -146
  426. package/src/stories/field/Field.tsx +0 -145
  427. package/src/stories/icon/ArrowRight.tsx +0 -11
  428. package/src/stories/icon/Check.tsx +0 -11
  429. package/src/stories/icon/ChevronLeft.tsx +0 -11
  430. package/src/stories/icon/ChevronRight.tsx +0 -11
  431. package/src/stories/icon/Close.tsx +0 -11
  432. package/src/stories/icon/Ellipsis.tsx +0 -11
  433. package/src/stories/icon/Icon.module.scss +0 -5
  434. package/src/stories/icon/Icon.stories.ts +0 -33
  435. package/src/stories/icon/Icon.test.tsx +0 -59
  436. package/src/stories/icon/Info.tsx +0 -11
  437. package/src/stories/icon/NotificationDot.tsx +0 -8
  438. package/src/stories/icon/Spinner.tsx +0 -17
  439. package/src/stories/informationaltooltip/InformationalTooltip.module.scss +0 -23
  440. package/src/stories/informationaltooltip/InformationalTooltip.stories.tsx +0 -61
  441. package/src/stories/informationaltooltip/InformationalTooltip.test.tsx +0 -178
  442. package/src/stories/informationaltooltip/InformationalTooltip.tsx +0 -170
  443. package/src/stories/input/Input.module.scss +0 -217
  444. package/src/stories/input/Input.stories.ts +0 -110
  445. package/src/stories/input/Input.test.tsx +0 -174
  446. package/src/stories/input/Input.tsx +0 -181
  447. package/src/stories/markdown/Markdown.module.scss +0 -384
  448. package/src/stories/markdown/Markdown.stories.ts +0 -203
  449. package/src/stories/markdown/Markdown.test.tsx +0 -228
  450. package/src/stories/markdown/Markdown.tsx +0 -293
  451. package/src/stories/markdowneditor/FixedToolbar.module.scss +0 -24
  452. package/src/stories/markdowneditor/FixedToolbar.tsx +0 -274
  453. package/src/stories/markdowneditor/FloatingToolbar.module.scss +0 -21
  454. package/src/stories/markdowneditor/FloatingToolbar.tsx +0 -94
  455. package/src/stories/markdowneditor/LinkPopover.module.scss +0 -124
  456. package/src/stories/markdowneditor/LinkPopover.tsx +0 -135
  457. package/src/stories/markdowneditor/MarkdownEditor.module.scss +0 -405
  458. package/src/stories/markdowneditor/MarkdownEditor.stories.tsx +0 -226
  459. package/src/stories/markdowneditor/MarkdownEditor.test.tsx +0 -115
  460. package/src/stories/markdowneditor/MarkdownEditorContext.tsx +0 -20
  461. package/src/stories/markdowneditor/ToolbarButton.module.scss +0 -35
  462. package/src/stories/markdowneditor/ToolbarButton.tsx +0 -52
  463. package/src/stories/markdowneditor/features.ts +0 -92
  464. package/src/stories/markdowneditor/useMarkdownEditor.ts +0 -75
  465. package/src/stories/menu/Menu.module.scss +0 -71
  466. package/src/stories/menu/Menu.stories.tsx +0 -37
  467. package/src/stories/menu/Menu.test.tsx +0 -254
  468. package/src/stories/menu/Menu.tsx +0 -95
  469. package/src/stories/pagination/usePagination.test.ts +0 -259
  470. package/src/stories/pagination/usePagination.ts +0 -117
  471. package/src/stories/popover/Popover.module.scss +0 -22
  472. package/src/stories/popover/Popover.stories.ts +0 -20
  473. package/src/stories/popover/Popover.test.tsx +0 -152
  474. package/src/stories/popover/Popover.tsx +0 -89
  475. package/src/stories/select/Select.module.scss +0 -311
  476. package/src/stories/select/Select.stories.ts +0 -153
  477. package/src/stories/select/Select.test.tsx +0 -341
  478. package/src/stories/select/Select.tsx +0 -398
  479. package/src/stories/styledlink/StyledLink.module.scss +0 -11
  480. package/src/stories/styledlink/StyledLink.stories.ts +0 -28
  481. package/src/stories/styledlink/StyledLink.test.tsx +0 -59
  482. package/src/stories/styledlink/StyledLink.tsx +0 -33
  483. package/src/stories/table/Table.module.scss +0 -74
  484. package/src/stories/table/Table.stories.ts +0 -62
  485. package/src/stories/table/Table.test.tsx +0 -156
  486. package/src/stories/table/Table.tsx +0 -182
  487. package/src/stories/tabs/Tabs.module.scss +0 -185
  488. package/src/stories/tabs/Tabs.stories.tsx +0 -209
  489. package/src/stories/tabs/Tabs.test.tsx +0 -167
  490. package/src/stories/tabs/Tabs.tsx +0 -191
  491. package/src/stories/tag/Tag.module.scss +0 -189
  492. package/src/stories/tag/Tag.stories.ts +0 -58
  493. package/src/stories/tag/Tag.test.tsx +0 -90
  494. package/src/stories/tag/Tag.tsx +0 -84
  495. package/src/stories/text/Text.module.scss +0 -39
  496. package/src/stories/text/Text.stories.ts +0 -195
  497. package/src/stories/text/Text.test.tsx +0 -81
  498. package/src/stories/text/Text.tsx +0 -108
  499. package/src/stories/textarea/TextArea.stories.ts +0 -39
  500. package/src/stories/textarea/TextArea.test.tsx +0 -147
  501. package/src/stories/textarea/TextArea.tsx +0 -112
  502. package/src/stories/theme/global.scss +0 -6
  503. package/src/stories/theme/themes.ts +0 -1509
  504. package/src/stories/theme/tokens.ts +0 -149
  505. package/src/stories/theme/util.scss +0 -8
  506. package/src/stories/tilt/Tilt.module.scss +0 -22
  507. package/src/stories/tilt/Tilt.stories.tsx +0 -42
  508. package/src/stories/tilt/Tilt.test.tsx +0 -203
  509. package/src/stories/tilt/Tilt.tsx +0 -375
  510. package/src/stories/toast/Toast.module.scss +0 -20
  511. package/src/stories/toast/Toast.stories.tsx +0 -31
  512. package/src/stories/toast/Toast.test.tsx +0 -86
  513. package/src/stories/utility/Dropdown.module.scss +0 -28
  514. package/src/stories/utility/EasingFunctions.ts +0 -3
  515. package/src/stories/utility/RemoveFromDOM.tsx +0 -15
  516. package/src/stories/utility/TextWhenString.tsx +0 -15
  517. package/src/stories/utility/Utility.test.tsx +0 -96
  518. package/src/stories/utility/VisuallyHidden.tsx +0 -18
  519. package/src/styles/Home.module.css +0 -268
  520. package/src/styles/globals.css +0 -3
  521. package/src/test/render.tsx +0 -20
  522. package/src/test/setup.ts +0 -32
  523. package/src/types/Enhancer.ts +0 -3
  524. /package/{src/stories/accordion/index.ts → dist/stories/accordion/index.d.ts} +0 -0
  525. /package/{src/stories/accordionselect/index.ts → dist/stories/accordionselect/index.d.ts} +0 -0
  526. /package/{src/stories/avatar/index.ts → dist/stories/avatar/index.d.ts} +0 -0
  527. /package/{src/stories/button/index.ts → dist/stories/button/index.d.ts} +0 -0
  528. /package/{src/stories/callout/index.ts → dist/stories/callout/index.d.ts} +0 -0
  529. /package/{src/stories/card/index.ts → dist/stories/card/index.d.ts} +0 -0
  530. /package/{src/stories/cardbutton/index.ts → dist/stories/cardbutton/index.d.ts} +0 -0
  531. /package/{src/stories/checkbox/index.ts → dist/stories/checkbox/index.d.ts} +0 -0
  532. /package/{src/stories/codeinput/index.ts → dist/stories/codeinput/index.d.ts} +0 -0
  533. /package/{src/stories/combobox/index.ts → dist/stories/combobox/index.d.ts} +0 -0
  534. /package/{src/stories/dialog/index.ts → dist/stories/dialog/index.d.ts} +0 -0
  535. /package/{src/stories/drawer/index.ts → dist/stories/drawer/index.d.ts} +0 -0
  536. /package/{src/stories/field/index.ts → dist/stories/field/index.d.ts} +0 -0
  537. /package/{src/stories/icon/index.ts → dist/stories/icon/index.d.ts} +0 -0
  538. /package/{src/stories/informationaltooltip/index.ts → dist/stories/informationaltooltip/index.d.ts} +0 -0
  539. /package/{src/stories/input/index.ts → dist/stories/input/index.d.ts} +0 -0
  540. /package/{src/stories/markdown/index.ts → dist/stories/markdown/index.d.ts} +0 -0
  541. /package/{src/stories/markdowneditor/index.ts → dist/stories/markdowneditor/index.d.ts} +0 -0
  542. /package/{src/stories/menu/index.ts → dist/stories/menu/index.d.ts} +0 -0
  543. /package/{src/stories/pagination/index.ts → dist/stories/pagination/index.d.ts} +0 -0
  544. /package/{src/stories/popover/index.ts → dist/stories/popover/index.d.ts} +0 -0
  545. /package/{src/stories/select/index.ts → dist/stories/select/index.d.ts} +0 -0
  546. /package/{src/stories/styledlink/index.ts → dist/stories/styledlink/index.d.ts} +0 -0
  547. /package/{src/stories/table/index.ts → dist/stories/table/index.d.ts} +0 -0
  548. /package/{src/stories/tabs/index.ts → dist/stories/tabs/index.d.ts} +0 -0
  549. /package/{src/stories/tag/index.ts → dist/stories/tag/index.d.ts} +0 -0
  550. /package/{src/stories/text/index.ts → dist/stories/text/index.d.ts} +0 -0
  551. /package/{src/stories/textarea/index.ts → dist/stories/textarea/index.d.ts} +0 -0
  552. /package/{src/stories/theme/index.ts → dist/stories/theme/index.d.ts} +0 -0
  553. /package/{src/stories/tilt/index.ts → dist/stories/tilt/index.d.ts} +0 -0
  554. /package/{src/stories/toast/index.ts → dist/stories/toast/index.d.ts} +0 -0
  555. /package/{src/stories/utility/index.ts → dist/stories/utility/index.d.ts} +0 -0
package/src/pages/index.tsx DELETED
@@ -1,116 +0,0 @@
1
- import { Inter } from 'next/font/google';
2
- import Head from 'next/head';
3
- import Image from 'next/image';
4
- import styles from 'src/styles/Home.module.css';
5
-
6
- const inter = Inter({ subsets: ['latin'] });
7
-
8
- export default function Home() {
9
- return (
10
- <>
11
- <Head>
12
- <title>Create Next App</title>
13
- <meta name="description" content="Generated by create next app" />
14
- <meta name="viewport" content="width=device-width, initial-scale=1" />
15
- <link rel="icon" href="/favicon.ico" />
16
- </Head>
17
- <main className={styles.main}>
18
- <div className={styles.description}>
19
- <p>
20
- Get started by editing&nbsp;
21
- <code className={styles.code}>src/pages/index.tsx</code>
22
- </p>
23
- <div>
24
- <a
25
- href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
26
- target="_blank"
27
- rel="noopener noreferrer"
28
- >
29
- By{' '}
30
- <Image
31
- src="/vercel.svg"
32
- alt="Vercel Logo"
33
- className={styles.vercelLogo}
34
- width={100}
35
- height={24}
36
- priority
37
- />
38
- </a>
39
- </div>
40
- </div>
41
-
42
- <div className={styles.center}>
43
- <Image
44
- className={styles.logo}
45
- src="/next.svg"
46
- alt="Next.js Logo"
47
- width={180}
48
- height={37}
49
- priority
50
- />
51
- <div className={styles.thirteen}>
52
- <Image src="/thirteen.svg" alt="13" width={40} height={31} priority />
53
- </div>
54
- </div>
55
-
56
- <div className={styles.grid}>
57
- <a
58
- href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
59
- className={styles.card}
60
- target="_blank"
61
- rel="noopener noreferrer"
62
- >
63
- <h2 className={inter.className}>
64
- Docs <span>-&gt;</span>
65
- </h2>
66
- <p className={inter.className}>
67
- Find in-depth information about Next.js features and&nbsp;API.
68
- </p>
69
- </a>
70
-
71
- <a
72
- href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
73
- className={styles.card}
74
- target="_blank"
75
- rel="noopener noreferrer"
76
- >
77
- <h2 className={inter.className}>
78
- Learn <span>-&gt;</span>
79
- </h2>
80
- <p className={inter.className}>
81
- Learn about Next.js in an interactive course with&nbsp;quizzes!
82
- </p>
83
- </a>
84
-
85
- <a
86
- href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
87
- className={styles.card}
88
- target="_blank"
89
- rel="noopener noreferrer"
90
- >
91
- <h2 className={inter.className}>
92
- Templates <span>-&gt;</span>
93
- </h2>
94
- <p className={inter.className}>
95
- Discover and deploy boilerplate example Next.js&nbsp;projects.
96
- </p>
97
- </a>
98
-
99
- <a
100
- href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
101
- className={styles.card}
102
- target="_blank"
103
- rel="noopener noreferrer"
104
- >
105
- <h2 className={inter.className}>
106
- Deploy <span>-&gt;</span>
107
- </h2>
108
- <p className={inter.className}>
109
- Instantly deploy your Next.js site to a shareable URL with&nbsp;Vercel.
110
- </p>
111
- </a>
112
- </div>
113
- </main>
114
- </>
115
- );
116
- }
package/src/stories/Pagination.mdx DELETED
@@ -1,73 +0,0 @@
1
- import { Meta } from '@storybook/addon-docs/blocks';
2
-
3
- <Meta title="Surfaces/Pagination" />
4
-
5
- # Paginating Drawers
6
-
7
- Paris contains a mechanism for creating pagination within a single surface. This is useful for complex or multi-step processes that would otherwise require a lot of scrolling or complicate the UI.
8
-
9
- > This API currently supports `Drawer`, and will soon be expanded to support pagination of any surface.
10
-
11
- ## Usage
12
-
13
- Paris provides a hook for pagination called `usePagination`. This hook functions as a router that allows you to control pagination state and navigate between pages.
14
-
15
- To enable pagination:
16
-
17
- 1. Instantiate a pagination router using `usePagination`.
18
- 2. Pass the pagination object to the Drawer using the `pagination` prop.
19
- 3. Pass your pages as children to the Drawer. Each must have a key that is unique across all pages, which can then be passed to `pagination.open` to navigate to that page.
20
-
21
- The pagination object returned by `usePagination` has the following properties:
22
-
23
- - `open`: A function that takes a page key and navigates to that page.
24
- - `currentPage`: The key of the current page.
25
- - `history`: An array of page keys that are currently in the navigable history stack.
26
- - `back`: A function that navigates to the previous page.
27
- - `forward`: A function that navigates to the next page.
28
- - `canGoBack`: A boolean indicating whether the user can go back.
29
- - `canGoForward`: A boolean indicating whether the user can go forward.
30
-
31
- The hook creates a shared state object between your parent component and the drawer. This means that you can use the `pagination` object's methods to control the drawer from your parent component, or from pages passed to the drawer.
32
-
33
- ## Example
34
-
35
- ```tsx
36
- import { Drawer } from 'paris/drawer';
37
- import { Button } from 'paris/button';
38
- import { usePagination } from 'paris/pagination';
39
-
40
- const MyComponent = () => {
41
- const pages = ['page1', 'page2', 'page3'] as const;
42
-
43
- const pagination = usePagination<typeof pages>('step1');
44
-
45
- return (
46
- <Drawer
47
- title="User creation flow"
48
- open={true}
49
- onClose={() => {}}
50
- // Pass the entire pagination object to the Drawer to enable pagination
51
- pagination={pagination}
52
- >
53
- <div key={pages[0]}>
54
- Page 1
55
- <Button
56
- onClick={() => {
57
- // Navigate to the next page using `open`
58
- pagination.open('page2');
59
- }}
60
- >
61
- Next Page
62
- </Button>
63
- </div>
64
- <div key={pages[1]}>
65
- Page 2
66
- </div>
67
- <div key={pages[2]}>
68
- Page 3
69
- </div>
70
- </Drawer>
71
- );
72
- };
73
- ```
package/src/stories/Tokens.mdx DELETED
@@ -1,46 +0,0 @@
1
- import { Meta } from '@storybook/addon-docs/blocks';
2
- import { LightTheme, pget, pvar } from './theme';
3
-
4
- <Meta title="Tokens" />
5
-
6
- # Tokens
7
-
8
- Tokens are the smallest pieces of design language that can be used to build components. They are the building blocks of our design system—you can think of them as the basic variables of our design language.
9
-
10
- <br />
11
-
12
- ## Colors
13
-
14
- <div
15
- style={{
16
- width: '100%',
17
- display: 'grid',
18
- gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
19
- gridTemplateRows: 'auto',
20
- alignItems: 'center',
21
- gap: '1rem',
22
- }}
23
- >
24
- {Object.entries(LightTheme.colors).map(([key, value]) => (
25
- <div key={key} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
26
- <div
27
- style={{
28
- width: '2rem',
29
- height: '2rem',
30
- backgroundColor: pvar(`colors.${key}`),
31
- borderColor: pvar(`colors.borderSelected`),
32
- borderWidth: '1px',
33
- borderStyle: 'solid',
34
- marginRight: '1rem',
35
- borderRadius: '100%',
36
- }}
37
- />
38
- <div style={{ color: pvar('colors.contentPrimary') }}>
39
- <span style={{ fontWeight: pvar('typography.fontWeights.medium') }}>{key}</span>
40
- <br />
41
- <pre style={{ fontSize: '14px' }}>{pget(`colors.${key}`)}</pre>
42
- </div>
43
- </div>
44
- ))}
45
- </div>
46
-
package/src/stories/Welcome.mdx DELETED
@@ -1,8 +0,0 @@
1
- import { Markdown, Meta } from '@storybook/addon-docs/blocks';
2
- import Readme from '../../README.md?raw';
3
-
4
- <Meta title="Welcome" />
5
-
6
- <Markdown>
7
- {Readme}
8
- </Markdown>
package/src/stories/accordion/Accordion.module.scss DELETED
@@ -1,163 +0,0 @@
1
- // Shared toggle icon (used when a custom `icon` is passed): flips a
2
- // down-pointing icon (e.g. a chevron) up when open, the standard accordion cue.
3
- .toggleIcon {
4
- display: inline-flex;
5
- align-items: center;
6
- padding: 2px;
7
- transition: transform var(--pte-animations-duration-gradual) var(--pte-animations-timing-easeInOutExpo);
8
- transform: rotate(0);
9
-
10
- &.open {
11
- transform: rotate(-180deg);
12
- }
13
- }
14
-
15
- .default {
16
- color: var(--pte-new-colors-contentPrimary);
17
- border-bottom: 1px solid var(--pte-new-colors-borderMedium);
18
- cursor: pointer;
19
- transition: all var(--pte-animations-duration-relaxed) var(--pte-animations-timing-easeInOutExpo);
20
-
21
- //&:hover {
22
- // background-color: var(--pte-colors-backgroundSecondary);
23
- //}
24
-
25
- .title {
26
- padding: 16px 0;
27
- display: flex;
28
- justify-content: space-between;
29
- align-items: center;
30
- font-size: 16px;
31
- font-weight: var(--pte-typography-fontWeights-medium);
32
-
33
- border-bottom: 1px solid transparent;
34
- transition: border-bottom-color var(--pte-animations-duration-gradual) var(--pte-animations-timing-easeInOutExpo);
35
- &.open {
36
- border-bottom-color: var(--pte-new-colors-borderMedium);
37
- }
38
- }
39
-
40
- .plusIcon {
41
- margin-left: 4px;
42
-
43
- svg {
44
- transition: transform var(--pte-animations-duration-gradual) var(--pte-animations-timing-easeInOutExpo);
45
- transform: rotate(0);
46
- width: 16px;
47
- height: 16px;
48
- }
49
-
50
- svg.open {
51
- transform: rotate(135deg) !important;
52
- }
53
- }
54
-
55
- .dropdown {
56
- display: grid;
57
- grid-template-rows: 0fr;
58
- opacity: 0;
59
- cursor: auto;
60
- transition:
61
- grid-template-rows 800ms cubic-bezier(0.87, 0, 0.13, 1),
62
- opacity 800ms cubic-bezier(0.87, 0, 0.13, 1);
63
-
64
- &.open {
65
- grid-template-rows: 1fr;
66
- opacity: 1;
67
- }
68
- }
69
-
70
- .dropdownClip {
71
- min-height: 0;
72
- overflow: hidden;
73
- }
74
-
75
- .dropdownContent {
76
- padding: 12px;
77
- display: flex;
78
- flex-direction: column;
79
- gap: 12px;
80
- background-color: var(--pte-new-colors-overlaySubtle);
81
- }
82
- }
83
-
84
- .card {
85
- color: var(--pte-new-colors-contentPrimary);
86
- border: 1px solid var(--pte-new-colors-borderStrong);
87
- border-radius: var(--pte-new-borders-radius-roundedMedium);
88
- background: var(--pte-new-colors-surfacePrimary);
89
- cursor: pointer;
90
- transition: var(--pte-animations-interaction);
91
-
92
- &.open {
93
- border-color: var(--pte-new-colors-borderUltrastrong);
94
- }
95
-
96
- .title {
97
- padding: 10px 12px;
98
- display: flex;
99
- justify-content: space-between;
100
- align-items: center;
101
- gap: 10px;
102
- background-color: var(--pte-new-colors-overlayWhiteSubtle);
103
-
104
- border-bottom: 1px solid transparent;
105
- transition: var(--pte-animations-interaction);
106
-
107
- &.large {
108
- padding: 14px 16px;
109
- }
110
-
111
- &.open {
112
- background-color: var(--pte-new-colors-overlayMedium);
113
- border-bottom-color: var(--pte-new-colors-borderStrong);
114
- }
115
-
116
- &:hover {
117
- background-color: var(--pte-new-colors-overlayStrong);
118
- }
119
- }
120
-
121
- .chevron {
122
- padding: 2px;
123
- transition: transform var(--pte-animations-duration-gradual) var(--pte-animations-timing-easeInOutExpo);
124
- transform: rotate(90deg);
125
-
126
- &.open {
127
- transform: rotate(-90deg);
128
- }
129
- }
130
-
131
- .dropdown {
132
- display: grid;
133
- grid-template-rows: 0fr;
134
- opacity: 0;
135
- cursor: auto;
136
- transition:
137
- grid-template-rows 800ms cubic-bezier(0.87, 0, 0.13, 1),
138
- opacity 800ms cubic-bezier(0.87, 0, 0.13, 1);
139
-
140
- &.open {
141
- grid-template-rows: 1fr;
142
- opacity: 1;
143
- }
144
- }
145
-
146
- .dropdownClip {
147
- min-height: 0;
148
- overflow: hidden;
149
- }
150
-
151
- .dropdownContent {
152
- padding: 12px;
153
- display: flex;
154
- flex-direction: column;
155
- gap: 12px;
156
- background-color: var(--pte-new-colors-overlayWhiteSubtle);
157
-
158
- &.large {
159
- padding: 16px;
160
- gap: 16px;
161
- }
162
- }
163
- }
package/src/stories/accordion/Accordion.stories.ts DELETED
@@ -1,48 +0,0 @@
1
- import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
2
- import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3
- import type { Meta, StoryObj } from '@storybook/nextjs-vite';
4
- import { createElement } from 'react';
5
- import { Accordion } from './Accordion';
6
-
7
- const meta: Meta<typeof Accordion> = {
8
- title: 'Content/Accordion',
9
- component: Accordion,
10
- tags: ['autodocs'],
11
- };
12
-
13
- export default meta;
14
- type Story = StoryObj<typeof Accordion>;
15
-
16
- export const Default: Story = {
17
- args: {
18
- title: 'Where were we?',
19
- children: 'In an alleyway, drinking champagne.',
20
- },
21
- };
22
-
23
- export const Card: Story = {
24
- args: {
25
- title: 'Where were we?',
26
- children: 'In an alleyway, drinking champagne.',
27
- kind: 'card',
28
- },
29
- };
30
-
31
- export const CardLarge: Story = {
32
- args: {
33
- title: 'Where were we?',
34
- children: 'In an alleyway, drinking champagne.',
35
- kind: 'card',
36
- size: 'large',
37
- },
38
- };
39
-
40
- export const CustomIcon: Story = {
41
- args: {
42
- title: 'Where were we?',
43
- children: 'In an alleyway, drinking champagne.',
44
- kind: 'card',
45
- icon: ({ size }) =>
46
- createElement(FontAwesomeIcon, { icon: faChevronDown, style: { width: size, height: size } }),
47
- },
48
- };
package/src/stories/accordion/Accordion.test.tsx DELETED
@@ -1,142 +0,0 @@
1
- import { render, screen, waitFor } from '../../test/render';
2
- import { Accordion } from './Accordion';
3
-
4
- describe('Accordion', () => {
5
- it('renders with a title', () => {
6
- render(<Accordion title="My Accordion" />);
7
- expect(screen.getByText('My Accordion')).toBeInTheDocument();
8
- });
9
-
10
- it('does not show children when collapsed', () => {
11
- render(<Accordion title="Title">Hidden content</Accordion>);
12
- // Content is in the DOM but hidden via aria-hidden on the collapsed dropdown
13
- const content = screen.getByText('Hidden content');
14
- expect(content.closest('[aria-hidden]')).toHaveAttribute('aria-hidden', 'true');
15
- });
16
-
17
- it('expands on click to reveal children', async () => {
18
- const { user } = render(<Accordion title="Title">Revealed content</Accordion>);
19
- await user.click(screen.getByRole('button'));
20
- expect(screen.getByText('Revealed content')).toBeInTheDocument();
21
- });
22
-
23
- it('collapses on second click', async () => {
24
- const { user } = render(<Accordion title="Title">Toggle content</Accordion>);
25
- const button = screen.getByRole('button');
26
-
27
- await user.click(button);
28
- expect(screen.getByText('Toggle content')).toBeInTheDocument();
29
-
30
- await user.click(button);
31
- await waitFor(() => {
32
- const content = screen.getByText('Toggle content');
33
- expect(content.closest('[aria-hidden]')).toHaveAttribute('aria-hidden', 'true');
34
- });
35
- });
36
-
37
- it('expands on Enter key', async () => {
38
- const { user } = render(<Accordion title="Title">Keyboard content</Accordion>);
39
- screen.getByRole('button').focus();
40
- await user.keyboard('{Enter}');
41
- expect(screen.getByText('Keyboard content')).toBeInTheDocument();
42
- });
43
-
44
- it('expands on Space key', async () => {
45
- const { user } = render(<Accordion title="Title">Space content</Accordion>);
46
- screen.getByRole('button').focus();
47
- await user.keyboard(' ');
48
- expect(screen.getByText('Space content')).toBeInTheDocument();
49
- });
50
-
51
- it('calls onOpenChange when toggled (uncontrolled)', async () => {
52
- const onChange = vi.fn();
53
- const { user } = render(
54
- <Accordion title="Title" onOpenChange={onChange}>
55
- Content
56
- </Accordion>,
57
- );
58
- await user.click(screen.getByRole('button'));
59
- expect(onChange).toHaveBeenCalledWith(true);
60
-
61
- await user.click(screen.getByRole('button'));
62
- expect(onChange).toHaveBeenCalledWith(false);
63
- expect(onChange).toHaveBeenCalledTimes(2);
64
- });
65
-
66
- it('works as a controlled component', async () => {
67
- const onChange = vi.fn();
68
- const { rerender, user } = render(
69
- <Accordion title="Title" isOpen={false} onOpenChange={onChange}>
70
- Controlled content
71
- </Accordion>,
72
- );
73
-
74
- expect(screen.getByText('Controlled content').closest('[aria-hidden]')).toHaveAttribute('aria-hidden', 'true');
75
-
76
- // Open externally
77
- rerender(
78
- <Accordion title="Title" isOpen={true} onOpenChange={onChange}>
79
- Controlled content
80
- </Accordion>,
81
- );
82
- expect(screen.getByText('Controlled content').closest('[aria-hidden]')).toHaveAttribute('aria-hidden', 'false');
83
-
84
- // Click should call onOpenChange but not change state (controlled)
85
- await user.click(screen.getByRole('button'));
86
- expect(onChange).toHaveBeenCalledWith(false);
87
- });
88
-
89
- it('renders with kind="card"', () => {
90
- render(
91
- <Accordion title="Card Accordion" kind="card">
92
- Card content
93
- </Accordion>,
94
- );
95
- expect(screen.getByText('Card Accordion')).toBeInTheDocument();
96
- });
97
-
98
- it('renders with kind="default" by default', () => {
99
- const { container } = render(<Accordion title="Default" />);
100
- expect(container.firstElementChild).toHaveClass('default');
101
- });
102
-
103
- it('applies custom className via overrides', () => {
104
- const { container } = render(
105
- <Accordion title="Styled" overrides={{ container: { className: 'custom-class' } }}>
106
- Styled content
107
- </Accordion>,
108
- );
109
- expect(container.firstElementChild).toHaveClass('custom-class');
110
- });
111
-
112
- it('sets data-state attribute on the title container', () => {
113
- render(<Accordion title="Title">Content</Accordion>);
114
- const button = screen.getByRole('button');
115
- expect(button).toHaveAttribute('data-state', 'closed');
116
- });
117
-
118
- it('updates data-state to open when expanded', async () => {
119
- const { user } = render(<Accordion title="Title">Content</Accordion>);
120
- const button = screen.getByRole('button');
121
- await user.click(button);
122
- expect(button).toHaveAttribute('data-state', 'open');
123
- });
124
-
125
- it('renders with size="large" for card kind', () => {
126
- render(
127
- <Accordion title="Large Card" kind="card" size="large">
128
- Large content
129
- </Accordion>,
130
- );
131
- expect(screen.getByRole('button')).toHaveClass('large');
132
- });
133
-
134
- it('starts open when isOpen is true initially', () => {
135
- render(
136
- <Accordion title="Pre-opened" isOpen={true}>
137
- Visible from start
138
- </Accordion>,
139
- );
140
- expect(screen.getByText('Visible from start')).toBeInTheDocument();
141
- });
142
- });