@lidofinance/lido-app-ui 1.9.0 → 1.10.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 (278) hide show
  1. package/README.md +30 -1
  2. package/dist/README.md +30 -1
  3. package/dist/cjs/breadcrumbs/Breadcrumbs.cjs +92 -0
  4. package/dist/cjs/breadcrumbs/Breadcrumbs.cjs.map +1 -0
  5. package/dist/cjs/breadcrumbs/Breadcrumbs.module.css.cjs +6 -0
  6. package/dist/cjs/breadcrumbs/Breadcrumbs.module.css.cjs.map +1 -0
  7. package/dist/cjs/divider/Divider.cjs +26 -0
  8. package/dist/cjs/divider/Divider.cjs.map +1 -0
  9. package/dist/cjs/divider/Divider.module.css.cjs +6 -0
  10. package/dist/cjs/divider/Divider.module.css.cjs.map +1 -0
  11. package/dist/cjs/grid/Grid.cjs +47 -0
  12. package/dist/cjs/grid/Grid.cjs.map +1 -0
  13. package/dist/cjs/grid/Grid.module.css.cjs +6 -0
  14. package/dist/cjs/grid/Grid.module.css.cjs.map +1 -0
  15. package/dist/cjs/grid/GridItem.cjs +39 -0
  16. package/dist/cjs/grid/GridItem.cjs.map +1 -0
  17. package/dist/cjs/grid/GridItem.module.css.cjs +6 -0
  18. package/dist/cjs/grid/GridItem.module.css.cjs.map +1 -0
  19. package/dist/cjs/header/Header.cjs +31 -0
  20. package/dist/cjs/header/Header.cjs.map +1 -0
  21. package/dist/cjs/header/Header.module.css.cjs +6 -0
  22. package/dist/cjs/header/Header.module.css.cjs.map +1 -0
  23. package/dist/cjs/header/HeaderNav.cjs +69 -0
  24. package/dist/cjs/header/HeaderNav.cjs.map +1 -0
  25. package/dist/cjs/header/HeaderNav.module.css.cjs +6 -0
  26. package/dist/cjs/header/HeaderNav.module.css.cjs.map +1 -0
  27. package/dist/cjs/hidden/Hidden.cjs +25 -0
  28. package/dist/cjs/hidden/Hidden.cjs.map +1 -0
  29. package/dist/cjs/hidden/Hidden.module.css.cjs +6 -0
  30. package/dist/cjs/hidden/Hidden.module.css.cjs.map +1 -0
  31. package/dist/cjs/hooks/Portal.cjs +57 -0
  32. package/dist/cjs/hooks/Portal.cjs.map +1 -0
  33. package/dist/cjs/hooks/overlayStack.cjs +26 -0
  34. package/dist/cjs/hooks/overlayStack.cjs.map +1 -0
  35. package/dist/cjs/hooks/useBodyScrollLock.cjs +50 -0
  36. package/dist/cjs/hooks/useBodyScrollLock.cjs.map +1 -0
  37. package/dist/cjs/hooks/useEscape.cjs +25 -0
  38. package/dist/cjs/hooks/useEscape.cjs.map +1 -0
  39. package/dist/cjs/hooks/useFocusTrap.cjs +66 -0
  40. package/dist/cjs/hooks/useFocusTrap.cjs.map +1 -0
  41. package/dist/cjs/hooks/useIsomorphicLayoutEffect.cjs +10 -0
  42. package/dist/cjs/hooks/useIsomorphicLayoutEffect.cjs.map +1 -0
  43. package/dist/cjs/hooks/useOutsideClick.cjs +15 -13
  44. package/dist/cjs/hooks/useOutsideClick.cjs.map +1 -1
  45. package/dist/cjs/icon-button/IconButton.cjs +5 -2
  46. package/dist/cjs/icon-button/IconButton.cjs.map +1 -1
  47. package/dist/cjs/icon-button/IconButton.module.css.cjs +1 -1
  48. package/dist/cjs/index.cjs +26 -0
  49. package/dist/cjs/index.cjs.map +1 -1
  50. package/dist/cjs/index.css +3 -3
  51. package/dist/cjs/link-provider/Anchor.cjs +48 -0
  52. package/dist/cjs/link-provider/Anchor.cjs.map +1 -0
  53. package/dist/cjs/link-provider/LinkProvider.cjs +29 -0
  54. package/dist/cjs/link-provider/LinkProvider.cjs.map +1 -0
  55. package/dist/cjs/logo/Logo.cjs +84 -0
  56. package/dist/cjs/logo/Logo.cjs.map +1 -0
  57. package/dist/cjs/logo/Logo.module.css.cjs +6 -0
  58. package/dist/cjs/logo/Logo.module.css.cjs.map +1 -0
  59. package/dist/cjs/modal/Modal.cjs +36 -29
  60. package/dist/cjs/modal/Modal.cjs.map +1 -1
  61. package/dist/cjs/nav-link/NavLink.cjs +44 -0
  62. package/dist/cjs/nav-link/NavLink.cjs.map +1 -0
  63. package/dist/cjs/nav-link/NavLink.module.css.cjs +6 -0
  64. package/dist/cjs/nav-link/NavLink.module.css.cjs.map +1 -0
  65. package/dist/cjs/notification/Notification.cjs +20 -4
  66. package/dist/cjs/notification/Notification.cjs.map +1 -1
  67. package/dist/cjs/notification/Notification.module.css.cjs +1 -1
  68. package/dist/cjs/popover/Popover.cjs +136 -0
  69. package/dist/cjs/popover/Popover.cjs.map +1 -0
  70. package/dist/cjs/popover/Popover.module.css.cjs +6 -0
  71. package/dist/cjs/popover/Popover.module.css.cjs.map +1 -0
  72. package/dist/cjs/segmented-control/SegmentedControl.cjs +2 -1
  73. package/dist/cjs/segmented-control/SegmentedControl.cjs.map +1 -1
  74. package/dist/cjs/segmented-control/SegmentedControlCard.cjs +2 -1
  75. package/dist/cjs/segmented-control/SegmentedControlCard.cjs.map +1 -1
  76. package/dist/cjs/small-card/SmallCard.cjs +2 -1
  77. package/dist/cjs/small-card/SmallCard.cjs.map +1 -1
  78. package/dist/cjs/stack/Stack.cjs +41 -0
  79. package/dist/cjs/stack/Stack.cjs.map +1 -0
  80. package/dist/cjs/stack/Stack.module.css.cjs +6 -0
  81. package/dist/cjs/stack/Stack.module.css.cjs.map +1 -0
  82. package/dist/cjs/tabs/Tabs.cjs +2 -1
  83. package/dist/cjs/tabs/Tabs.cjs.map +1 -1
  84. package/dist/cjs/text-link/TextLink.cjs +2 -1
  85. package/dist/cjs/text-link/TextLink.cjs.map +1 -1
  86. package/dist/cjs/theme-switcher/ThemeSwitcher.cjs +39 -0
  87. package/dist/cjs/theme-switcher/ThemeSwitcher.cjs.map +1 -0
  88. package/dist/cjs/token-selector/TokenSelector.cjs +3 -3
  89. package/dist/cjs/token-selector/TokenSelector.cjs.map +1 -1
  90. package/dist/cjs/tooltip/Tooltip.cjs +2 -1
  91. package/dist/cjs/tooltip/Tooltip.cjs.map +1 -1
  92. package/dist/cjs/utils/ActionElement.cjs +41 -0
  93. package/dist/cjs/utils/ActionElement.cjs.map +1 -0
  94. package/dist/cjs/utils/responsive.cjs +67 -0
  95. package/dist/cjs/utils/responsive.cjs.map +1 -0
  96. package/dist/esm/breadcrumbs/Breadcrumbs.mjs +88 -0
  97. package/dist/esm/breadcrumbs/Breadcrumbs.mjs.map +1 -0
  98. package/dist/esm/breadcrumbs/Breadcrumbs.module.css.mjs +4 -0
  99. package/dist/esm/breadcrumbs/Breadcrumbs.module.css.mjs.map +1 -0
  100. package/dist/esm/divider/Divider.mjs +22 -0
  101. package/dist/esm/divider/Divider.mjs.map +1 -0
  102. package/dist/esm/divider/Divider.module.css.mjs +4 -0
  103. package/dist/esm/divider/Divider.module.css.mjs.map +1 -0
  104. package/dist/esm/grid/Grid.mjs +43 -0
  105. package/dist/esm/grid/Grid.mjs.map +1 -0
  106. package/dist/esm/grid/Grid.module.css.mjs +4 -0
  107. package/dist/esm/grid/Grid.module.css.mjs.map +1 -0
  108. package/dist/esm/grid/GridItem.mjs +35 -0
  109. package/dist/esm/grid/GridItem.mjs.map +1 -0
  110. package/dist/esm/grid/GridItem.module.css.mjs +4 -0
  111. package/dist/esm/grid/GridItem.module.css.mjs.map +1 -0
  112. package/dist/esm/header/Header.mjs +27 -0
  113. package/dist/esm/header/Header.mjs.map +1 -0
  114. package/dist/esm/header/Header.module.css.mjs +4 -0
  115. package/dist/esm/header/Header.module.css.mjs.map +1 -0
  116. package/dist/esm/header/HeaderNav.mjs +65 -0
  117. package/dist/esm/header/HeaderNav.mjs.map +1 -0
  118. package/dist/esm/header/HeaderNav.module.css.mjs +4 -0
  119. package/dist/esm/header/HeaderNav.module.css.mjs.map +1 -0
  120. package/dist/esm/hidden/Hidden.mjs +21 -0
  121. package/dist/esm/hidden/Hidden.mjs.map +1 -0
  122. package/dist/esm/hidden/Hidden.module.css.mjs +4 -0
  123. package/dist/esm/hidden/Hidden.module.css.mjs.map +1 -0
  124. package/dist/esm/hooks/Portal.mjs +53 -0
  125. package/dist/esm/hooks/Portal.mjs.map +1 -0
  126. package/dist/esm/hooks/overlayStack.mjs +22 -0
  127. package/dist/esm/hooks/overlayStack.mjs.map +1 -0
  128. package/dist/esm/hooks/useBodyScrollLock.mjs +46 -0
  129. package/dist/esm/hooks/useBodyScrollLock.mjs.map +1 -0
  130. package/dist/esm/hooks/useEscape.mjs +21 -0
  131. package/dist/esm/hooks/useEscape.mjs.map +1 -0
  132. package/dist/esm/hooks/useFocusTrap.mjs +62 -0
  133. package/dist/esm/hooks/useFocusTrap.mjs.map +1 -0
  134. package/dist/esm/hooks/useIsomorphicLayoutEffect.mjs +6 -0
  135. package/dist/esm/hooks/useIsomorphicLayoutEffect.mjs.map +1 -0
  136. package/dist/esm/hooks/useOutsideClick.mjs +16 -14
  137. package/dist/esm/hooks/useOutsideClick.mjs.map +1 -1
  138. package/dist/esm/icon-button/IconButton.mjs +5 -2
  139. package/dist/esm/icon-button/IconButton.mjs.map +1 -1
  140. package/dist/esm/icon-button/IconButton.module.css.mjs +1 -1
  141. package/dist/esm/index.css +3 -3
  142. package/dist/esm/index.mjs +13 -0
  143. package/dist/esm/index.mjs.map +1 -1
  144. package/dist/esm/link-provider/Anchor.mjs +44 -0
  145. package/dist/esm/link-provider/Anchor.mjs.map +1 -0
  146. package/dist/esm/link-provider/LinkProvider.mjs +24 -0
  147. package/dist/esm/link-provider/LinkProvider.mjs.map +1 -0
  148. package/dist/esm/logo/Logo.mjs +80 -0
  149. package/dist/esm/logo/Logo.mjs.map +1 -0
  150. package/dist/esm/logo/Logo.module.css.mjs +4 -0
  151. package/dist/esm/logo/Logo.module.css.mjs.map +1 -0
  152. package/dist/esm/modal/Modal.mjs +38 -31
  153. package/dist/esm/modal/Modal.mjs.map +1 -1
  154. package/dist/esm/nav-link/NavLink.mjs +40 -0
  155. package/dist/esm/nav-link/NavLink.mjs.map +1 -0
  156. package/dist/esm/nav-link/NavLink.module.css.mjs +4 -0
  157. package/dist/esm/nav-link/NavLink.module.css.mjs.map +1 -0
  158. package/dist/esm/notification/Notification.mjs +20 -4
  159. package/dist/esm/notification/Notification.mjs.map +1 -1
  160. package/dist/esm/notification/Notification.module.css.mjs +1 -1
  161. package/dist/esm/popover/Popover.mjs +132 -0
  162. package/dist/esm/popover/Popover.mjs.map +1 -0
  163. package/dist/esm/popover/Popover.module.css.mjs +4 -0
  164. package/dist/esm/popover/Popover.module.css.mjs.map +1 -0
  165. package/dist/esm/segmented-control/SegmentedControl.mjs +3 -2
  166. package/dist/esm/segmented-control/SegmentedControl.mjs.map +1 -1
  167. package/dist/esm/segmented-control/SegmentedControlCard.mjs +3 -2
  168. package/dist/esm/segmented-control/SegmentedControlCard.mjs.map +1 -1
  169. package/dist/esm/small-card/SmallCard.mjs +2 -1
  170. package/dist/esm/small-card/SmallCard.mjs.map +1 -1
  171. package/dist/esm/stack/Stack.mjs +37 -0
  172. package/dist/esm/stack/Stack.mjs.map +1 -0
  173. package/dist/esm/stack/Stack.module.css.mjs +4 -0
  174. package/dist/esm/stack/Stack.module.css.mjs.map +1 -0
  175. package/dist/esm/tabs/Tabs.mjs +3 -2
  176. package/dist/esm/tabs/Tabs.mjs.map +1 -1
  177. package/dist/esm/text-link/TextLink.mjs +2 -1
  178. package/dist/esm/text-link/TextLink.mjs.map +1 -1
  179. package/dist/esm/theme-switcher/ThemeSwitcher.mjs +35 -0
  180. package/dist/esm/theme-switcher/ThemeSwitcher.mjs.map +1 -0
  181. package/dist/esm/token-selector/TokenSelector.mjs +3 -3
  182. package/dist/esm/token-selector/TokenSelector.mjs.map +1 -1
  183. package/dist/esm/tooltip/Tooltip.mjs +3 -2
  184. package/dist/esm/tooltip/Tooltip.mjs.map +1 -1
  185. package/dist/esm/utils/ActionElement.mjs +37 -0
  186. package/dist/esm/utils/ActionElement.mjs.map +1 -0
  187. package/dist/esm/utils/responsive.mjs +58 -0
  188. package/dist/esm/utils/responsive.mjs.map +1 -0
  189. package/dist/index.css +3 -3
  190. package/dist/styles/breakpoints.css +6 -0
  191. package/dist/types/breadcrumbs/Breadcrumbs.d.ts +11 -0
  192. package/dist/types/breadcrumbs/Breadcrumbs.d.ts.map +1 -0
  193. package/dist/types/breadcrumbs/index.d.ts +3 -0
  194. package/dist/types/breadcrumbs/index.d.ts.map +1 -0
  195. package/dist/types/colors/colorTokens.d.ts.map +1 -1
  196. package/dist/types/divider/Divider.d.ts +10 -0
  197. package/dist/types/divider/Divider.d.ts.map +1 -0
  198. package/dist/types/divider/index.d.ts +3 -0
  199. package/dist/types/divider/index.d.ts.map +1 -0
  200. package/dist/types/grid/Grid.d.ts +31 -0
  201. package/dist/types/grid/Grid.d.ts.map +1 -0
  202. package/dist/types/grid/GridItem.d.ts +16 -0
  203. package/dist/types/grid/GridItem.d.ts.map +1 -0
  204. package/dist/types/grid/index.d.ts +5 -0
  205. package/dist/types/grid/index.d.ts.map +1 -0
  206. package/dist/types/header/Header.d.ts +9 -0
  207. package/dist/types/header/Header.d.ts.map +1 -0
  208. package/dist/types/header/HeaderNav.d.ts +4 -0
  209. package/dist/types/header/HeaderNav.d.ts.map +1 -0
  210. package/dist/types/header/index.d.ts +5 -0
  211. package/dist/types/header/index.d.ts.map +1 -0
  212. package/dist/types/hidden/Hidden.d.ts +11 -0
  213. package/dist/types/hidden/Hidden.d.ts.map +1 -0
  214. package/dist/types/hidden/index.d.ts +3 -0
  215. package/dist/types/hidden/index.d.ts.map +1 -0
  216. package/dist/types/hooks/Portal.d.ts +12 -0
  217. package/dist/types/hooks/Portal.d.ts.map +1 -0
  218. package/dist/types/hooks/index.d.ts +9 -0
  219. package/dist/types/hooks/index.d.ts.map +1 -0
  220. package/dist/types/hooks/overlayStack.d.ts +7 -0
  221. package/dist/types/hooks/overlayStack.d.ts.map +1 -0
  222. package/dist/types/hooks/useBodyScrollLock.d.ts +3 -0
  223. package/dist/types/hooks/useBodyScrollLock.d.ts.map +1 -0
  224. package/dist/types/hooks/useEscape.d.ts +3 -0
  225. package/dist/types/hooks/useEscape.d.ts.map +1 -0
  226. package/dist/types/hooks/useFocusTrap.d.ts +10 -0
  227. package/dist/types/hooks/useFocusTrap.d.ts.map +1 -0
  228. package/dist/types/hooks/useIsomorphicLayoutEffect.d.ts +3 -0
  229. package/dist/types/hooks/useIsomorphicLayoutEffect.d.ts.map +1 -0
  230. package/dist/types/hooks/useOutsideClick.d.ts +2 -2
  231. package/dist/types/hooks/useOutsideClick.d.ts.map +1 -1
  232. package/dist/types/icon-button/IconButton.d.ts +11 -3
  233. package/dist/types/icon-button/IconButton.d.ts.map +1 -1
  234. package/dist/types/index.d.ts +12 -0
  235. package/dist/types/index.d.ts.map +1 -1
  236. package/dist/types/link-provider/Anchor.d.ts +4 -0
  237. package/dist/types/link-provider/Anchor.d.ts.map +1 -0
  238. package/dist/types/link-provider/LinkProvider.d.ts +17 -0
  239. package/dist/types/link-provider/LinkProvider.d.ts.map +1 -0
  240. package/dist/types/link-provider/index.d.ts +3 -0
  241. package/dist/types/link-provider/index.d.ts.map +1 -0
  242. package/dist/types/logo/Logo.d.ts +13 -0
  243. package/dist/types/logo/Logo.d.ts.map +1 -0
  244. package/dist/types/logo/index.d.ts +3 -0
  245. package/dist/types/logo/index.d.ts.map +1 -0
  246. package/dist/types/modal/Modal.d.ts +23 -1
  247. package/dist/types/modal/Modal.d.ts.map +1 -1
  248. package/dist/types/nav-link/NavLink.d.ts +12 -0
  249. package/dist/types/nav-link/NavLink.d.ts.map +1 -0
  250. package/dist/types/nav-link/index.d.ts +3 -0
  251. package/dist/types/nav-link/index.d.ts.map +1 -0
  252. package/dist/types/notification/Notification.d.ts +15 -2
  253. package/dist/types/notification/Notification.d.ts.map +1 -1
  254. package/dist/types/popover/Popover.d.ts +21 -0
  255. package/dist/types/popover/Popover.d.ts.map +1 -0
  256. package/dist/types/popover/index.d.ts +3 -0
  257. package/dist/types/popover/index.d.ts.map +1 -0
  258. package/dist/types/segmented-control/SegmentedControl.d.ts.map +1 -1
  259. package/dist/types/segmented-control/SegmentedControlCard.d.ts.map +1 -1
  260. package/dist/types/small-card/SmallCard.d.ts.map +1 -1
  261. package/dist/types/stack/Stack.d.ts +25 -0
  262. package/dist/types/stack/Stack.d.ts.map +1 -0
  263. package/dist/types/stack/index.d.ts +3 -0
  264. package/dist/types/stack/index.d.ts.map +1 -0
  265. package/dist/types/tabs/Tabs.d.ts.map +1 -1
  266. package/dist/types/text-link/TextLink.d.ts.map +1 -1
  267. package/dist/types/theme-switcher/ThemeSwitcher.d.ts +5 -0
  268. package/dist/types/theme-switcher/ThemeSwitcher.d.ts.map +1 -0
  269. package/dist/types/theme-switcher/index.d.ts +3 -0
  270. package/dist/types/theme-switcher/index.d.ts.map +1 -0
  271. package/dist/types/tooltip/Tooltip.d.ts.map +1 -1
  272. package/dist/types/utils/ActionElement.d.ts +10 -0
  273. package/dist/types/utils/ActionElement.d.ts.map +1 -0
  274. package/dist/types/utils/index.d.ts +5 -0
  275. package/dist/types/utils/index.d.ts.map +1 -0
  276. package/dist/types/utils/responsive.d.ts +27 -0
  277. package/dist/types/utils/responsive.d.ts.map +1 -0
  278. package/package.json +2 -2
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Popover.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -7,6 +7,7 @@ const cn = require('classnames');
7
7
  const Segment = require('./Segment.cjs');
8
8
  const SegmentedControl_module = require('./SegmentedControl.module.css.cjs');
9
9
  const jsxRuntime = require('react/jsx-runtime');
10
+ const useIsomorphicLayoutEffect = require('../hooks/useIsomorphicLayoutEffect.cjs');
10
11
 
11
12
  const SegmentedControl = _ref => {
12
13
  let {
@@ -22,7 +23,7 @@ const SegmentedControl = _ref => {
22
23
  const selectionRef = react.useRef(null);
23
24
  // Skip the transition on the first measurement so the pill doesn't fly in from 0,0.
24
25
  const [animated, setAnimated] = react.useState(false);
25
- react.useLayoutEffect(() => {
26
+ useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
26
27
  const updateSelection = () => {
27
28
  const button = activeButtonRef.current;
28
29
  const container = containerRef.current;
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControl.cjs","sources":["../../../src/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import {\n useLayoutEffect,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport { Segment, type SegmentDataTestId } from './Segment'\nimport styles from './SegmentedControl.module.css'\n\nexport type SegmentedControlDataTestId = {\n root?: string\n}\n\nexport type SegmentItem = {\n value: string\n label: ReactNode\n disabled?: boolean\n dataTestId?: SegmentDataTestId\n}\n\nexport type SegmentedControlProps = Omit<\n ComponentPropsWithoutRef<'div'>,\n 'onChange'\n> & {\n items: SegmentItem[]\n value: string\n onChange: (value: string) => void\n dataTestId?: SegmentedControlDataTestId\n}\n\nexport const SegmentedControl = ({\n items,\n value,\n onChange,\n className,\n dataTestId,\n ...rest\n}: SegmentedControlProps) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const activeButtonRef = useRef<HTMLButtonElement>(null)\n const selectionRef = useRef<HTMLDivElement>(null)\n // Skip the transition on the first measurement so the pill doesn't fly in from 0,0.\n const [animated, setAnimated] = useState(false)\n\n useLayoutEffect(() => {\n const updateSelection = () => {\n const button = activeButtonRef.current\n const container = containerRef.current\n const selection = selectionRef.current\n if (!button || !container || !selection) return\n\n const buttonRect = button.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n // The pill is absolutely positioned, so top/left 0 is the container's\n // padding box (inside the border). getBoundingClientRect measures from\n // the border box, so subtract the border to keep the pill from drifting\n // down-right by the border width.\n const style = getComputedStyle(container)\n const borderLeft = parseFloat(style.borderLeftWidth) || 0\n const borderTop = parseFloat(style.borderTopWidth) || 0\n const x = buttonRect.left - containerRect.left - borderLeft\n const y = buttonRect.top - containerRect.top - borderTop\n\n selection.style.width = `${buttonRect.width}px`\n selection.style.height = `${buttonRect.height}px`\n selection.style.transform = `translate(${x}px, ${y}px)`\n }\n\n updateSelection()\n setAnimated(true)\n\n window.addEventListener('resize', updateSelection)\n return () => {\n window.removeEventListener('resize', updateSelection)\n }\n }, [value, items])\n\n return (\n <div\n ref={containerRef}\n role='tablist'\n className={cn(styles.segmentedControl, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <div\n ref={selectionRef}\n aria-hidden='true'\n className={cn(styles.selection, animated && styles.animated)}\n />\n {items.map((item) => {\n const active = item.value === value\n return (\n <Segment\n key={item.value}\n ref={active ? activeButtonRef : undefined}\n active={active}\n disabled={item.disabled}\n dataTestId={item.dataTestId}\n onClick={() => {\n if (item.value !== value) onChange(item.value)\n }}\n >\n {item.label}\n </Segment>\n )\n })}\n </div>\n )\n}\n"],"names":["SegmentedControl","_ref","items","value","onChange","className","dataTestId","rest","containerRef","useRef","activeButtonRef","selectionRef","animated","setAnimated","useState","useLayoutEffect","updateSelection","button","current","container","selection","buttonRect","getBoundingClientRect","containerRect","style","getComputedStyle","borderLeft","parseFloat","borderLeftWidth","borderTop","borderTopWidth","x","left","y","top","width","height","transform","window","addEventListener","removeEventListener","_jsxs","ref","role","cn","styles","segmentedControl","root","children","_jsx","map","item","active","Segment","undefined","disabled","onClick","label"],"mappings":"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"}
1
+ {"version":3,"file":"SegmentedControl.cjs","sources":["../../../src/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import {\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport { Segment, type SegmentDataTestId } from './Segment'\nimport { useIsomorphicLayoutEffect } from '../hooks'\nimport styles from './SegmentedControl.module.css'\n\nexport type SegmentedControlDataTestId = {\n root?: string\n}\n\nexport type SegmentItem = {\n value: string\n label: ReactNode\n disabled?: boolean\n dataTestId?: SegmentDataTestId\n}\n\nexport type SegmentedControlProps = Omit<\n ComponentPropsWithoutRef<'div'>,\n 'onChange'\n> & {\n items: SegmentItem[]\n value: string\n onChange: (value: string) => void\n dataTestId?: SegmentedControlDataTestId\n}\n\nexport const SegmentedControl = ({\n items,\n value,\n onChange,\n className,\n dataTestId,\n ...rest\n}: SegmentedControlProps) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const activeButtonRef = useRef<HTMLButtonElement>(null)\n const selectionRef = useRef<HTMLDivElement>(null)\n // Skip the transition on the first measurement so the pill doesn't fly in from 0,0.\n const [animated, setAnimated] = useState(false)\n\n useIsomorphicLayoutEffect(() => {\n const updateSelection = () => {\n const button = activeButtonRef.current\n const container = containerRef.current\n const selection = selectionRef.current\n if (!button || !container || !selection) return\n\n const buttonRect = button.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n // The pill is absolutely positioned, so top/left 0 is the container's\n // padding box (inside the border). getBoundingClientRect measures from\n // the border box, so subtract the border to keep the pill from drifting\n // down-right by the border width.\n const style = getComputedStyle(container)\n const borderLeft = parseFloat(style.borderLeftWidth) || 0\n const borderTop = parseFloat(style.borderTopWidth) || 0\n const x = buttonRect.left - containerRect.left - borderLeft\n const y = buttonRect.top - containerRect.top - borderTop\n\n selection.style.width = `${buttonRect.width}px`\n selection.style.height = `${buttonRect.height}px`\n selection.style.transform = `translate(${x}px, ${y}px)`\n }\n\n updateSelection()\n setAnimated(true)\n\n window.addEventListener('resize', updateSelection)\n return () => {\n window.removeEventListener('resize', updateSelection)\n }\n }, [value, items])\n\n return (\n <div\n ref={containerRef}\n role='tablist'\n className={cn(styles.segmentedControl, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <div\n ref={selectionRef}\n aria-hidden='true'\n className={cn(styles.selection, animated && styles.animated)}\n />\n {items.map((item) => {\n const active = item.value === value\n return (\n <Segment\n key={item.value}\n ref={active ? activeButtonRef : undefined}\n active={active}\n disabled={item.disabled}\n dataTestId={item.dataTestId}\n onClick={() => {\n if (item.value !== value) onChange(item.value)\n }}\n >\n {item.label}\n </Segment>\n )\n })}\n </div>\n )\n}\n"],"names":["SegmentedControl","_ref","items","value","onChange","className","dataTestId","rest","containerRef","useRef","activeButtonRef","selectionRef","animated","setAnimated","useState","useIsomorphicLayoutEffect","updateSelection","button","current","container","selection","buttonRect","getBoundingClientRect","containerRect","style","getComputedStyle","borderLeft","parseFloat","borderLeftWidth","borderTop","borderTopWidth","x","left","y","top","width","height","transform","window","addEventListener","removeEventListener","_jsxs","ref","role","cn","styles","segmentedControl","root","children","_jsx","map","item","active","Segment","undefined","disabled","onClick","label"],"mappings":"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"}
@@ -7,6 +7,7 @@ const cn = require('classnames');
7
7
  const SegmentCard = require('./SegmentCard.cjs');
8
8
  const SegmentedControlCard_module = require('./SegmentedControlCard.module.css.cjs');
9
9
  const jsxRuntime = require('react/jsx-runtime');
10
+ const useIsomorphicLayoutEffect = require('../hooks/useIsomorphicLayoutEffect.cjs');
10
11
 
11
12
  const SegmentedControlCard = _ref => {
12
13
  let {
@@ -22,7 +23,7 @@ const SegmentedControlCard = _ref => {
22
23
  const selectionRef = react.useRef(null);
23
24
  // Skip the transition on the first measurement so the highlight doesn't fly in from 0,0.
24
25
  const [animated, setAnimated] = react.useState(false);
25
- react.useLayoutEffect(() => {
26
+ useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
26
27
  const updateSelection = () => {
27
28
  const button = activeButtonRef.current;
28
29
  const container = containerRef.current;
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControlCard.cjs","sources":["../../../src/segmented-control/SegmentedControlCard.tsx"],"sourcesContent":["import {\n useLayoutEffect,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport { SegmentCard, type SegmentCardDataTestId } from './SegmentCard'\nimport styles from './SegmentedControlCard.module.css'\n\nexport type SegmentedControlCardDataTestId = {\n root?: string\n}\n\nexport type SegmentCardItem = {\n value: string\n title: ReactNode\n description?: ReactNode\n icon?: ReactNode\n tag?: ReactNode\n disabled?: boolean\n dataTestId?: SegmentCardDataTestId\n}\n\nexport type SegmentedControlCardProps = Omit<\n ComponentPropsWithoutRef<'div'>,\n 'onChange'\n> & {\n items: SegmentCardItem[]\n value: string\n onChange: (value: string) => void\n dataTestId?: SegmentedControlCardDataTestId\n}\n\nexport const SegmentedControlCard = ({\n items,\n value,\n onChange,\n className,\n dataTestId,\n ...rest\n}: SegmentedControlCardProps) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const activeButtonRef = useRef<HTMLButtonElement>(null)\n const selectionRef = useRef<HTMLDivElement>(null)\n // Skip the transition on the first measurement so the highlight doesn't fly in from 0,0.\n const [animated, setAnimated] = useState(false)\n\n useLayoutEffect(() => {\n const updateSelection = () => {\n const button = activeButtonRef.current\n const container = containerRef.current\n const selection = selectionRef.current\n if (!button || !container || !selection) return\n\n const buttonRect = button.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n const style = getComputedStyle(container)\n const borderLeft = parseFloat(style.borderLeftWidth) || 0\n const borderTop = parseFloat(style.borderTopWidth) || 0\n const x = buttonRect.left - containerRect.left - borderLeft\n const y = buttonRect.top - containerRect.top - borderTop\n\n selection.style.width = `${buttonRect.width}px`\n selection.style.height = `${buttonRect.height}px`\n selection.style.transform = `translate(${x}px, ${y}px)`\n }\n\n updateSelection()\n setAnimated(true)\n\n window.addEventListener('resize', updateSelection)\n return () => {\n window.removeEventListener('resize', updateSelection)\n }\n }, [value, items])\n\n return (\n <div\n ref={containerRef}\n role='tablist'\n className={cn(styles.segmentedControlCard, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <div\n ref={selectionRef}\n aria-hidden='true'\n className={cn(styles.selection, animated && styles.animated)}\n />\n {items.map((item) => {\n const active = item.value === value\n return (\n <SegmentCard\n key={item.value}\n ref={active ? activeButtonRef : undefined}\n active={active}\n disabled={item.disabled}\n icon={item.icon}\n title={item.title}\n tag={item.tag}\n description={item.description}\n dataTestId={item.dataTestId}\n onClick={() => {\n if (item.value !== value) onChange(item.value)\n }}\n />\n )\n })}\n </div>\n )\n}\n"],"names":["SegmentedControlCard","_ref","items","value","onChange","className","dataTestId","rest","containerRef","useRef","activeButtonRef","selectionRef","animated","setAnimated","useState","useLayoutEffect","updateSelection","button","current","container","selection","buttonRect","getBoundingClientRect","containerRect","style","getComputedStyle","borderLeft","parseFloat","borderLeftWidth","borderTop","borderTopWidth","x","left","y","top","width","height","transform","window","addEventListener","removeEventListener","_jsxs","ref","role","cn","styles","segmentedControlCard","root","children","_jsx","map","item","active","SegmentCard","undefined","disabled","icon","title","tag","description","onClick"],"mappings":"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"}
1
+ {"version":3,"file":"SegmentedControlCard.cjs","sources":["../../../src/segmented-control/SegmentedControlCard.tsx"],"sourcesContent":["import {\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport { SegmentCard, type SegmentCardDataTestId } from './SegmentCard'\nimport { useIsomorphicLayoutEffect } from '../hooks'\nimport styles from './SegmentedControlCard.module.css'\n\nexport type SegmentedControlCardDataTestId = {\n root?: string\n}\n\nexport type SegmentCardItem = {\n value: string\n title: ReactNode\n description?: ReactNode\n icon?: ReactNode\n tag?: ReactNode\n disabled?: boolean\n dataTestId?: SegmentCardDataTestId\n}\n\nexport type SegmentedControlCardProps = Omit<\n ComponentPropsWithoutRef<'div'>,\n 'onChange'\n> & {\n items: SegmentCardItem[]\n value: string\n onChange: (value: string) => void\n dataTestId?: SegmentedControlCardDataTestId\n}\n\nexport const SegmentedControlCard = ({\n items,\n value,\n onChange,\n className,\n dataTestId,\n ...rest\n}: SegmentedControlCardProps) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const activeButtonRef = useRef<HTMLButtonElement>(null)\n const selectionRef = useRef<HTMLDivElement>(null)\n // Skip the transition on the first measurement so the highlight doesn't fly in from 0,0.\n const [animated, setAnimated] = useState(false)\n\n useIsomorphicLayoutEffect(() => {\n const updateSelection = () => {\n const button = activeButtonRef.current\n const container = containerRef.current\n const selection = selectionRef.current\n if (!button || !container || !selection) return\n\n const buttonRect = button.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n const style = getComputedStyle(container)\n const borderLeft = parseFloat(style.borderLeftWidth) || 0\n const borderTop = parseFloat(style.borderTopWidth) || 0\n const x = buttonRect.left - containerRect.left - borderLeft\n const y = buttonRect.top - containerRect.top - borderTop\n\n selection.style.width = `${buttonRect.width}px`\n selection.style.height = `${buttonRect.height}px`\n selection.style.transform = `translate(${x}px, ${y}px)`\n }\n\n updateSelection()\n setAnimated(true)\n\n window.addEventListener('resize', updateSelection)\n return () => {\n window.removeEventListener('resize', updateSelection)\n }\n }, [value, items])\n\n return (\n <div\n ref={containerRef}\n role='tablist'\n className={cn(styles.segmentedControlCard, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <div\n ref={selectionRef}\n aria-hidden='true'\n className={cn(styles.selection, animated && styles.animated)}\n />\n {items.map((item) => {\n const active = item.value === value\n return (\n <SegmentCard\n key={item.value}\n ref={active ? activeButtonRef : undefined}\n active={active}\n disabled={item.disabled}\n icon={item.icon}\n title={item.title}\n tag={item.tag}\n description={item.description}\n dataTestId={item.dataTestId}\n onClick={() => {\n if (item.value !== value) onChange(item.value)\n }}\n />\n )\n })}\n </div>\n )\n}\n"],"names":["SegmentedControlCard","_ref","items","value","onChange","className","dataTestId","rest","containerRef","useRef","activeButtonRef","selectionRef","animated","setAnimated","useState","useIsomorphicLayoutEffect","updateSelection","button","current","container","selection","buttonRect","getBoundingClientRect","containerRect","style","getComputedStyle","borderLeft","parseFloat","borderLeftWidth","borderTop","borderTopWidth","x","left","y","top","width","height","transform","window","addEventListener","removeEventListener","_jsxs","ref","role","cn","styles","segmentedControlCard","root","children","_jsx","map","item","active","SegmentCard","undefined","disabled","icon","title","tag","description","onClick"],"mappings":"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"}
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
5
  const cn = require('classnames');
6
+ const Anchor = require('../link-provider/Anchor.cjs');
6
7
  const SmallCard_module = require('./SmallCard.module.css.cjs');
7
8
  const jsxRuntime = require('react/jsx-runtime');
8
9
 
@@ -18,7 +19,7 @@ const SmallCard = _ref => {
18
19
  dataTestId,
19
20
  ...rest
20
21
  } = _ref;
21
- return /*#__PURE__*/jsxRuntime.jsxs("a", {
22
+ return /*#__PURE__*/jsxRuntime.jsxs(Anchor.Anchor, {
22
23
  className: cn(SmallCard_module.card, className),
23
24
  "data-testid": dataTestId?.root,
24
25
  ...rest,
@@ -1 +1 @@
1
- {"version":3,"file":"SmallCard.cjs","sources":["../../../src/small-card/SmallCard.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './SmallCard.module.css'\n\nexport type SmallCardDataTestId = {\n root?: string\n image?: string\n logo?: string\n icon?: string\n title?: string\n description?: string\n footer?: string\n}\n\nexport type SmallCardProps = Omit<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n 'title'\n> & {\n /** Fixed-height (120px) media slot above the header — an image or illustration. */\n image?: ReactNode\n logo?: ReactNode\n /** Trailing glyph next to the title — an external-link arrow, a badge, etc. */\n icon?: ReactNode\n title: ReactNode\n description?: ReactNode\n /** Arbitrary content below the description — wraps in a row, e.g. a list of `Tag`s. */\n footer?: ReactNode\n dataTestId?: SmallCardDataTestId\n}\n\nexport const SmallCard = ({\n image,\n logo,\n icon,\n title,\n description,\n footer,\n className,\n dataTestId,\n ...rest\n}: SmallCardProps) => (\n <a\n className={cn(styles.card, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <div className={styles.content}>\n {image != null ? (\n <div className={styles.image} data-testid={dataTestId?.image}>\n {image}\n </div>\n ) : null}\n <div className={styles.header}>\n {logo != null ? (\n <span className={styles.logo} data-testid={dataTestId?.logo}>\n {logo}\n </span>\n ) : null}\n <span className={styles.title} data-testid={dataTestId?.title}>\n {title}\n </span>\n {icon != null ? (\n <span\n className={styles.icon}\n aria-hidden='true'\n data-testid={dataTestId?.icon}\n >\n {icon}\n </span>\n ) : null}\n </div>\n {description != null ? (\n <p className={styles.description} data-testid={dataTestId?.description}>\n {description}\n </p>\n ) : null}\n </div>\n {footer != null ? (\n <div className={styles.footer} data-testid={dataTestId?.footer}>\n {footer}\n </div>\n ) : null}\n </a>\n)\n"],"names":["SmallCard","_ref","image","logo","icon","title","description","footer","className","dataTestId","rest","_jsxs","cn","styles","card","root","children","content","_jsx","header"],"mappings":";;;;;;;;AAgCO,MAAMA,SAAS,GAAGC,IAAA,IAAA;EAAA,IAAC;IACxBC,KAAK;IACLC,IAAI;IACJC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,MAAM;IACNC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACW,GAAC,GAAAT,IAAA,CAAA;AAAA,EAAA,oBACfU,eAAA,CAAA,GAAA,EAAA;IACEH,SAAS,EAAEI,EAAE,CAACC,gBAAM,CAACC,IAAI,EAAEN,SAAS,CAAE;IACtC,aAAaC,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAM,IAAAA,QAAA,gBAERL,eAAA,CAAA,KAAA,EAAA;MAAKH,SAAS,EAAEK,gBAAM,CAACI,OAAQ;AAAAD,MAAAA,QAAA,EAC5Bd,CAAAA,KAAK,IAAI,IAAI,gBACZgB,cAAA,CAAA,KAAA,EAAA;QAAKV,SAAS,EAAEK,gBAAM,CAACX,KAAM;QAAC,aAAaO,EAAAA,UAAU,EAAEP,KAAM;AAAAc,QAAAA,QAAA,EAC1Dd,KAAAA;AAAK,OACH,CAAC,GACJ,IAAI,eACRS,eAAA,CAAA,KAAA,EAAA;QAAKH,SAAS,EAAEK,gBAAM,CAACM,MAAO;AAAAH,QAAAA,QAAA,EAC3Bb,CAAAA,IAAI,IAAI,IAAI,gBACXe,cAAA,CAAA,MAAA,EAAA;UAAMV,SAAS,EAAEK,gBAAM,CAACV,IAAK;UAAC,aAAaM,EAAAA,UAAU,EAAEN,IAAK;AAAAa,UAAAA,QAAA,EACzDb,IAAAA;AAAI,SACD,CAAC,GACL,IAAI,eACRe,cAAA,CAAA,MAAA,EAAA;UAAMV,SAAS,EAAEK,gBAAM,CAACR,KAAM;UAAC,aAAaI,EAAAA,UAAU,EAAEJ,KAAM;AAAAW,UAAAA,QAAA,EAC3DX,KAAAA;AAAK,SACF,CAAC,EACND,IAAI,IAAI,IAAI,gBACXc,cAAA,CAAA,MAAA,EAAA;UACEV,SAAS,EAAEK,gBAAM,CAACT,IAAK;AACvB,UAAA,aAAA,EAAY,MAAM;UAClB,aAAaK,EAAAA,UAAU,EAAEL,IAAK;AAAAY,UAAAA,QAAA,EAE7BZ,IAAAA;SACG,CAAC,GACL,IAAI,CAAA;AAAA,OACL,CAAC,EACLE,WAAW,IAAI,IAAI,gBAClBY,cAAA,CAAA,GAAA,EAAA;QAAGV,SAAS,EAAEK,gBAAM,CAACP,WAAY;QAAC,aAAaG,EAAAA,UAAU,EAAEH,WAAY;AAAAU,QAAAA,QAAA,EACpEV,WAAAA;OACA,CAAC,GACF,IAAI,CAAA;AAAA,KACL,CAAC,EACLC,MAAM,IAAI,IAAI,gBACbW,cAAA,CAAA,KAAA,EAAA;MAAKV,SAAS,EAAEK,gBAAM,CAACN,MAAO;MAAC,aAAaE,EAAAA,UAAU,EAAEF,MAAO;AAAAS,MAAAA,QAAA,EAC5DT,MAAAA;KACE,CAAC,GACJ,IAAI,CAAA;AAAA,GACP,CAAC,CAAA;AAAA;;;;"}
1
+ {"version":3,"file":"SmallCard.cjs","sources":["../../../src/small-card/SmallCard.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { Anchor } from '../link-provider/Anchor'\nimport styles from './SmallCard.module.css'\n\nexport type SmallCardDataTestId = {\n root?: string\n image?: string\n logo?: string\n icon?: string\n title?: string\n description?: string\n footer?: string\n}\n\nexport type SmallCardProps = Omit<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n 'title'\n> & {\n /** Fixed-height (120px) media slot above the header — an image or illustration. */\n image?: ReactNode\n logo?: ReactNode\n /** Trailing glyph next to the title — an external-link arrow, a badge, etc. */\n icon?: ReactNode\n title: ReactNode\n description?: ReactNode\n /** Arbitrary content below the description — wraps in a row, e.g. a list of `Tag`s. */\n footer?: ReactNode\n dataTestId?: SmallCardDataTestId\n}\n\nexport const SmallCard = ({\n image,\n logo,\n icon,\n title,\n description,\n footer,\n className,\n dataTestId,\n ...rest\n}: SmallCardProps) => (\n <Anchor\n className={cn(styles.card, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <div className={styles.content}>\n {image != null ? (\n <div className={styles.image} data-testid={dataTestId?.image}>\n {image}\n </div>\n ) : null}\n <div className={styles.header}>\n {logo != null ? (\n <span className={styles.logo} data-testid={dataTestId?.logo}>\n {logo}\n </span>\n ) : null}\n <span className={styles.title} data-testid={dataTestId?.title}>\n {title}\n </span>\n {icon != null ? (\n <span\n className={styles.icon}\n aria-hidden='true'\n data-testid={dataTestId?.icon}\n >\n {icon}\n </span>\n ) : null}\n </div>\n {description != null ? (\n <p className={styles.description} data-testid={dataTestId?.description}>\n {description}\n </p>\n ) : null}\n </div>\n {footer != null ? (\n <div className={styles.footer} data-testid={dataTestId?.footer}>\n {footer}\n </div>\n ) : null}\n </Anchor>\n)\n"],"names":["SmallCard","_ref","image","logo","icon","title","description","footer","className","dataTestId","rest","_jsxs","Anchor","cn","styles","card","root","children","content","_jsx","header"],"mappings":";;;;;;;;;AAiCO,MAAMA,SAAS,GAAGC,IAAA,IAAA;EAAA,IAAC;IACxBC,KAAK;IACLC,IAAI;IACJC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,MAAM;IACNC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACW,GAAC,GAAAT,IAAA,CAAA;EAAA,oBACfU,eAAA,CAACC,aAAM,EAAA;IACLJ,SAAS,EAAEK,EAAE,CAACC,gBAAM,CAACC,IAAI,EAAEP,SAAS,CAAE;IACtC,aAAaC,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;AAAAO,IAAAA,QAAA,gBAERN,eAAA,CAAA,KAAA,EAAA;MAAKH,SAAS,EAAEM,gBAAM,CAACI,OAAQ;AAAAD,MAAAA,QAAA,EAC5Bf,CAAAA,KAAK,IAAI,IAAI,gBACZiB,cAAA,CAAA,KAAA,EAAA;QAAKX,SAAS,EAAEM,gBAAM,CAACZ,KAAM;QAAC,aAAaO,EAAAA,UAAU,EAAEP,KAAM;AAAAe,QAAAA,QAAA,EAC1Df,KAAAA;AAAK,OACH,CAAC,GACJ,IAAI,eACRS,eAAA,CAAA,KAAA,EAAA;QAAKH,SAAS,EAAEM,gBAAM,CAACM,MAAO;AAAAH,QAAAA,QAAA,EAC3Bd,CAAAA,IAAI,IAAI,IAAI,gBACXgB,cAAA,CAAA,MAAA,EAAA;UAAMX,SAAS,EAAEM,gBAAM,CAACX,IAAK;UAAC,aAAaM,EAAAA,UAAU,EAAEN,IAAK;AAAAc,UAAAA,QAAA,EACzDd,IAAAA;AAAI,SACD,CAAC,GACL,IAAI,eACRgB,cAAA,CAAA,MAAA,EAAA;UAAMX,SAAS,EAAEM,gBAAM,CAACT,KAAM;UAAC,aAAaI,EAAAA,UAAU,EAAEJ,KAAM;AAAAY,UAAAA,QAAA,EAC3DZ,KAAAA;AAAK,SACF,CAAC,EACND,IAAI,IAAI,IAAI,gBACXe,cAAA,CAAA,MAAA,EAAA;UACEX,SAAS,EAAEM,gBAAM,CAACV,IAAK;AACvB,UAAA,aAAA,EAAY,MAAM;UAClB,aAAaK,EAAAA,UAAU,EAAEL,IAAK;AAAAa,UAAAA,QAAA,EAE7Bb,IAAAA;SACG,CAAC,GACL,IAAI,CAAA;AAAA,OACL,CAAC,EACLE,WAAW,IAAI,IAAI,gBAClBa,cAAA,CAAA,GAAA,EAAA;QAAGX,SAAS,EAAEM,gBAAM,CAACR,WAAY;QAAC,aAAaG,EAAAA,UAAU,EAAEH,WAAY;AAAAW,QAAAA,QAAA,EACpEX,WAAAA;OACA,CAAC,GACF,IAAI,CAAA;AAAA,KACL,CAAC,EACLC,MAAM,IAAI,IAAI,gBACbY,cAAA,CAAA,KAAA,EAAA;MAAKX,SAAS,EAAEM,gBAAM,CAACP,MAAO;MAAC,aAAaE,EAAAA,UAAU,EAAEF,MAAO;AAAAU,MAAAA,QAAA,EAC5DV,MAAAA;KACE,CAAC,GACJ,IAAI,CAAA;AAAA,GACF,CAAC,CAAA;AAAA;;;;"}
@@ -0,0 +1,41 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const react = require('react');
6
+ const cn = require('classnames');
7
+ const Stack_module = require('./Stack.module.css.cjs');
8
+ const jsxRuntime = require('react/jsx-runtime');
9
+ const responsive = require('../utils/responsive.cjs');
10
+
11
+ /** Flexbox container with a spacing scale and breakpoint-aware direction and gap. */
12
+ const Stack = /*#__PURE__*/react.forwardRef((_ref, ref) => {
13
+ let {
14
+ as: Component = 'div',
15
+ direction,
16
+ gap,
17
+ align,
18
+ justify,
19
+ wrap = false,
20
+ inline = false,
21
+ className,
22
+ style,
23
+ ...rest
24
+ } = _ref;
25
+ const directionProps = responsive.getResponsiveProps('direction', direction, String, Stack_module);
26
+ const gapProps = responsive.getResponsiveProps('gap', gap, responsive.spaceToCss, Stack_module);
27
+ return /*#__PURE__*/jsxRuntime.jsx(Component, {
28
+ ref: ref,
29
+ className: cn(Stack_module.root, inline && Stack_module.inline, wrap && Stack_module.wrap, align && Stack_module[`align${responsive.capitalize(align)}`], justify && Stack_module[`justify${responsive.capitalize(justify)}`], directionProps.className, gapProps.className, className),
30
+ style: {
31
+ ...directionProps.style,
32
+ ...gapProps.style,
33
+ ...style
34
+ },
35
+ ...rest
36
+ });
37
+ });
38
+ Stack.displayName = 'Stack';
39
+
40
+ exports.Stack = Stack;
41
+ //# sourceMappingURL=Stack.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Stack.cjs","sources":["../../../src/stack/Stack.tsx"],"sourcesContent":["import { forwardRef, type ElementType, type HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport {\n capitalize,\n getResponsiveProps,\n spaceToCss,\n type Responsive,\n type Space,\n} from '../utils'\nimport styles from './Stack.module.css'\n\nexport type StackDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse'\nexport type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline'\nexport type StackJustify =\n | 'start'\n | 'center'\n | 'end'\n | 'between'\n | 'around'\n | 'evenly'\n\nexport type StackProps = HTMLAttributes<HTMLElement> & {\n as?: ElementType\n direction?: Responsive<StackDirection>\n gap?: Responsive<Space>\n align?: StackAlign\n justify?: StackJustify\n wrap?: boolean\n inline?: boolean\n}\n\n/** Flexbox container with a spacing scale and breakpoint-aware direction and gap. */\nexport const Stack = forwardRef<HTMLElement, StackProps>(\n (\n {\n as: Component = 'div',\n direction,\n gap,\n align,\n justify,\n wrap = false,\n inline = false,\n className,\n style,\n ...rest\n },\n ref,\n ) => {\n const directionProps = getResponsiveProps(\n 'direction',\n direction,\n String,\n styles,\n )\n const gapProps = getResponsiveProps('gap', gap, spaceToCss, styles)\n\n return (\n <Component\n ref={ref}\n className={cn(\n styles.root,\n inline && styles.inline,\n wrap && styles.wrap,\n align && styles[`align${capitalize(align)}`],\n justify && styles[`justify${capitalize(justify)}`],\n directionProps.className,\n gapProps.className,\n className,\n )}\n style={{ ...directionProps.style, ...gapProps.style, ...style }}\n {...rest}\n />\n )\n },\n)\n\nStack.displayName = 'Stack'\n"],"names":["Stack","forwardRef","_ref","ref","as","Component","direction","gap","align","justify","wrap","inline","className","style","rest","directionProps","getResponsiveProps","String","styles","gapProps","spaceToCss","_jsx","cn","root","capitalize","displayName"],"mappings":";;;;;;;;;;AAiCA;AACO,MAAMA,KAAK,gBAAGC,gBAAU,CAC7B,CAAAC,IAAA,EAaEC,GAAG,KACA;EAAA,IAbH;IACEC,EAAE,EAAEC,SAAS,GAAG,KAAK;IACrBC,SAAS;IACTC,GAAG;IACHC,KAAK;IACLC,OAAO;AACPC,IAAAA,IAAI,GAAG,KAAK;AACZC,IAAAA,MAAM,GAAG,KAAK;IACdC,SAAS;IACTC,KAAK;IACL,GAAGC,IAAAA;AACL,GAAC,GAAAZ,IAAA,CAAA;EAGD,MAAMa,cAAc,GAAGC,6BAAkB,CACvC,WAAW,EACXV,SAAS,EACTW,MAAM,EACNC,YACF,CAAC,CAAA;EACD,MAAMC,QAAQ,GAAGH,6BAAkB,CAAC,KAAK,EAAET,GAAG,EAAEa,qBAAU,EAAEF,YAAM,CAAC,CAAA;EAEnE,oBACEG,cAAA,CAAChB,SAAS,EAAA;AACRF,IAAAA,GAAG,EAAEA,GAAI;IACTS,SAAS,EAAEU,EAAE,CACXJ,YAAM,CAACK,IAAI,EACXZ,MAAM,IAAIO,YAAM,CAACP,MAAM,EACvBD,IAAI,IAAIQ,YAAM,CAACR,IAAI,EACnBF,KAAK,IAAIU,YAAM,CAAC,CAAA,KAAA,EAAQM,qBAAU,CAAChB,KAAK,CAAC,CAAA,CAAE,CAAC,EAC5CC,OAAO,IAAIS,YAAM,CAAC,CAAA,OAAA,EAAUM,qBAAU,CAACf,OAAO,CAAC,EAAE,CAAC,EAClDM,cAAc,CAACH,SAAS,EACxBO,QAAQ,CAACP,SAAS,EAClBA,SACF,CAAE;AACFC,IAAAA,KAAK,EAAE;MAAE,GAAGE,cAAc,CAACF,KAAK;MAAE,GAAGM,QAAQ,CAACN,KAAK;MAAE,GAAGA,KAAAA;KAAQ;IAAA,GAC5DC,IAAAA;AAAI,GACT,CAAC,CAAA;AAEN,CACF,EAAC;AAEDd,KAAK,CAACyB,WAAW,GAAG,OAAO;;;;"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ const styles = {"root":"Stack-module_root__IW2n-","inline":"Stack-module_inline__W6hTC","wrap":"Stack-module_wrap__gP7Q4","alignStart":"Stack-module_alignStart__m4mv7","alignCenter":"Stack-module_alignCenter__woQPP","alignEnd":"Stack-module_alignEnd__TYK2P","alignStretch":"Stack-module_alignStretch__Nttru","alignBaseline":"Stack-module_alignBaseline__IxLhw","justifyStart":"Stack-module_justifyStart__p9z-M","justifyCenter":"Stack-module_justifyCenter__GBghI","justifyEnd":"Stack-module_justifyEnd__XSBTk","justifyBetween":"Stack-module_justifyBetween__nortt","justifyAround":"Stack-module_justifyAround__affvp","justifyEvenly":"Stack-module_justifyEvenly__-4xqo","directionLg":"Stack-module_directionLg__ywZ6r","gapLg":"Stack-module_gapLg__CAplW","directionMl":"Stack-module_directionMl__ZPaml","gapMl":"Stack-module_gapMl__m1H2M","directionMd":"Stack-module_directionMd__Hausz","gapMd":"Stack-module_gapMd__A8SK5","directionSm":"Stack-module_directionSm__R1EaS","gapSm":"Stack-module_gapSm__7La1u","directionXs":"Stack-module_directionXs__Wx2co","gapXs":"Stack-module_gapXs__V9-1w","directionXxs":"Stack-module_directionXxs__nO8Yb","gapXxs":"Stack-module_gapXxs__zwY5k"};
4
+
5
+ module.exports = styles;
6
+ //# sourceMappingURL=Stack.module.css.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Stack.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -7,6 +7,7 @@ const cn = require('classnames');
7
7
  const Tab = require('./Tab.cjs');
8
8
  const Tabs_module = require('./Tabs.module.css.cjs');
9
9
  const jsxRuntime = require('react/jsx-runtime');
10
+ const useIsomorphicLayoutEffect = require('../hooks/useIsomorphicLayoutEffect.cjs');
10
11
 
11
12
  const Tabs = _ref => {
12
13
  let {
@@ -22,7 +23,7 @@ const Tabs = _ref => {
22
23
  const selectionRef = react.useRef(null);
23
24
  // Skip the transition on the first measurement so the bar doesn't fly in from 0,0.
24
25
  const [animated, setAnimated] = react.useState(false);
25
- react.useLayoutEffect(() => {
26
+ useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
26
27
  const updateSelection = () => {
27
28
  const button = activeButtonRef.current;
28
29
  const container = containerRef.current;
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.cjs","sources":["../../../src/tabs/Tabs.tsx"],"sourcesContent":["import {\n useLayoutEffect,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport { Tab, type TabDataTestId } from './Tab'\nimport styles from './Tabs.module.css'\n\nexport type TabsDataTestId = {\n root?: string\n}\n\nexport type TabItem = {\n value: string\n label: ReactNode\n disabled?: boolean\n dataTestId?: TabDataTestId\n}\n\nexport type TabsProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> & {\n items: TabItem[]\n value: string\n onChange: (value: string) => void\n dataTestId?: TabsDataTestId\n}\n\nexport const Tabs = ({\n items,\n value,\n onChange,\n className,\n dataTestId,\n ...rest\n}: TabsProps) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const activeButtonRef = useRef<HTMLButtonElement>(null)\n const selectionRef = useRef<HTMLDivElement>(null)\n // Skip the transition on the first measurement so the bar doesn't fly in from 0,0.\n const [animated, setAnimated] = useState(false)\n\n useLayoutEffect(() => {\n const updateSelection = () => {\n const button = activeButtonRef.current\n const container = containerRef.current\n const selection = selectionRef.current\n if (!button || !container || !selection) return\n\n const buttonRect = button.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n const x = buttonRect.left - containerRect.left\n\n selection.style.width = `${buttonRect.width}px`\n selection.style.transform = `translateX(${x}px)`\n }\n\n updateSelection()\n setAnimated(true)\n\n window.addEventListener('resize', updateSelection)\n return () => {\n window.removeEventListener('resize', updateSelection)\n }\n }, [value, items])\n\n return (\n <div\n ref={containerRef}\n role='tablist'\n className={cn(styles.tabs, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <div\n ref={selectionRef}\n aria-hidden='true'\n className={cn(styles.selection, animated && styles.animated)}\n />\n {items.map((item) => {\n const active = item.value === value\n return (\n <Tab\n key={item.value}\n ref={active ? activeButtonRef : undefined}\n active={active}\n disabled={item.disabled}\n dataTestId={item.dataTestId}\n onClick={() => {\n if (item.value !== value) onChange(item.value)\n }}\n >\n {item.label}\n </Tab>\n )\n })}\n </div>\n )\n}\n"],"names":["Tabs","_ref","items","value","onChange","className","dataTestId","rest","containerRef","useRef","activeButtonRef","selectionRef","animated","setAnimated","useState","useLayoutEffect","updateSelection","button","current","container","selection","buttonRect","getBoundingClientRect","containerRect","x","left","style","width","transform","window","addEventListener","removeEventListener","_jsxs","ref","role","cn","styles","tabs","root","children","_jsx","map","item","active","Tab","undefined","disabled","onClick","label"],"mappings":"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"}
1
+ {"version":3,"file":"Tabs.cjs","sources":["../../../src/tabs/Tabs.tsx"],"sourcesContent":["import {\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport { Tab, type TabDataTestId } from './Tab'\nimport { useIsomorphicLayoutEffect } from '../hooks'\nimport styles from './Tabs.module.css'\n\nexport type TabsDataTestId = {\n root?: string\n}\n\nexport type TabItem = {\n value: string\n label: ReactNode\n disabled?: boolean\n dataTestId?: TabDataTestId\n}\n\nexport type TabsProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> & {\n items: TabItem[]\n value: string\n onChange: (value: string) => void\n dataTestId?: TabsDataTestId\n}\n\nexport const Tabs = ({\n items,\n value,\n onChange,\n className,\n dataTestId,\n ...rest\n}: TabsProps) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const activeButtonRef = useRef<HTMLButtonElement>(null)\n const selectionRef = useRef<HTMLDivElement>(null)\n // Skip the transition on the first measurement so the bar doesn't fly in from 0,0.\n const [animated, setAnimated] = useState(false)\n\n useIsomorphicLayoutEffect(() => {\n const updateSelection = () => {\n const button = activeButtonRef.current\n const container = containerRef.current\n const selection = selectionRef.current\n if (!button || !container || !selection) return\n\n const buttonRect = button.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n const x = buttonRect.left - containerRect.left\n\n selection.style.width = `${buttonRect.width}px`\n selection.style.transform = `translateX(${x}px)`\n }\n\n updateSelection()\n setAnimated(true)\n\n window.addEventListener('resize', updateSelection)\n return () => {\n window.removeEventListener('resize', updateSelection)\n }\n }, [value, items])\n\n return (\n <div\n ref={containerRef}\n role='tablist'\n className={cn(styles.tabs, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <div\n ref={selectionRef}\n aria-hidden='true'\n className={cn(styles.selection, animated && styles.animated)}\n />\n {items.map((item) => {\n const active = item.value === value\n return (\n <Tab\n key={item.value}\n ref={active ? activeButtonRef : undefined}\n active={active}\n disabled={item.disabled}\n dataTestId={item.dataTestId}\n onClick={() => {\n if (item.value !== value) onChange(item.value)\n }}\n >\n {item.label}\n </Tab>\n )\n })}\n </div>\n )\n}\n"],"names":["Tabs","_ref","items","value","onChange","className","dataTestId","rest","containerRef","useRef","activeButtonRef","selectionRef","animated","setAnimated","useState","useIsomorphicLayoutEffect","updateSelection","button","current","container","selection","buttonRect","getBoundingClientRect","containerRect","x","left","style","width","transform","window","addEventListener","removeEventListener","_jsxs","ref","role","cn","styles","tabs","root","children","_jsx","map","item","active","Tab","undefined","disabled","onClick","label"],"mappings":"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"}
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
5
  const cn = require('classnames');
6
+ const Anchor = require('../link-provider/Anchor.cjs');
6
7
  const TextLink_module = require('./TextLink.module.css.cjs');
7
8
  const jsxRuntime = require('react/jsx-runtime');
8
9
 
@@ -21,7 +22,7 @@ const TextLink = _ref => {
21
22
  dataTestId,
22
23
  ...rest
23
24
  } = _ref;
24
- return /*#__PURE__*/jsxRuntime.jsxs("a", {
25
+ return /*#__PURE__*/jsxRuntime.jsxs(Anchor.Anchor, {
25
26
  className: cn(TextLink_module.link, TextLink_module[variant], className),
26
27
  target: target ?? (external ? '_blank' : undefined),
27
28
  rel: rel ?? (external ? 'noopener noreferrer' : undefined),
@@ -1 +1 @@
1
- {"version":3,"file":"TextLink.cjs","sources":["../../../src/text-link/TextLink.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './TextLink.module.css'\n\nexport type TextLinkVariant = 'primary' | 'secondary'\n\nexport type TextLinkDataTestId = {\n root?: string\n icon?: string\n}\n\nexport type TextLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {\n variant?: TextLinkVariant\n icon?: ReactNode\n external?: boolean\n disabled?: boolean\n dataTestId?: TextLinkDataTestId\n}\n\nexport const TextLink = ({\n variant = 'primary',\n icon,\n external = false,\n disabled = false,\n className,\n children,\n target,\n rel,\n href,\n onClick,\n dataTestId,\n ...rest\n}: TextLinkProps) => (\n <a\n className={cn(styles.link, styles[variant], className)}\n target={target ?? (external ? '_blank' : undefined)}\n rel={rel ?? (external ? 'noopener noreferrer' : undefined)}\n href={disabled ? undefined : href}\n aria-disabled={disabled || undefined}\n tabIndex={disabled ? -1 : undefined}\n onClick={disabled ? undefined : onClick}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {children}\n {icon != null ? (\n <span\n className={styles.icon}\n aria-hidden='true'\n data-testid={dataTestId?.icon}\n >\n {icon}\n </span>\n ) : null}\n </a>\n)\n"],"names":["TextLink","_ref","variant","icon","external","disabled","className","children","target","rel","href","onClick","dataTestId","rest","_jsxs","cn","styles","link","undefined","tabIndex","root","_jsx"],"mappings":";;;;;;;;AAqBO,MAAMA,QAAQ,GAAGC,IAAA,IAAA;EAAA,IAAC;AACvBC,IAAAA,OAAO,GAAG,SAAS;IACnBC,IAAI;AACJC,IAAAA,QAAQ,GAAG,KAAK;AAChBC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,SAAS;IACTC,QAAQ;IACRC,MAAM;IACNC,GAAG;IACHC,IAAI;IACJC,OAAO;IACPC,UAAU;IACV,GAAGC,IAAAA;AACU,GAAC,GAAAZ,IAAA,CAAA;AAAA,EAAA,oBACda,eAAA,CAAA,GAAA,EAAA;AACER,IAAAA,SAAS,EAAES,EAAE,CAACC,eAAM,CAACC,IAAI,EAAED,eAAM,CAACd,OAAO,CAAC,EAAEI,SAAS,CAAE;IACvDE,MAAM,EAAEA,MAAM,KAAKJ,QAAQ,GAAG,QAAQ,GAAGc,SAAS,CAAE;IACpDT,GAAG,EAAEA,GAAG,KAAKL,QAAQ,GAAG,qBAAqB,GAAGc,SAAS,CAAE;AAC3DR,IAAAA,IAAI,EAAEL,QAAQ,GAAGa,SAAS,GAAGR,IAAK;IAClC,eAAeL,EAAAA,QAAQ,IAAIa,SAAU;AACrCC,IAAAA,QAAQ,EAAEd,QAAQ,GAAG,CAAC,CAAC,GAAGa,SAAU;AACpCP,IAAAA,OAAO,EAAEN,QAAQ,GAAGa,SAAS,GAAGP,OAAQ;IACxC,aAAaC,EAAAA,UAAU,EAAEQ,IAAK;AAAA,IAAA,GAC1BP,IAAI;AAAAN,IAAAA,QAAA,GAEPA,QAAQ,EACRJ,IAAI,IAAI,IAAI,gBACXkB,cAAA,CAAA,MAAA,EAAA;MACEf,SAAS,EAAEU,eAAM,CAACb,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaS,EAAAA,UAAU,EAAET,IAAK;AAAAI,MAAAA,QAAA,EAE7BJ,IAAAA;KACG,CAAC,GACL,IAAI,CAAA;AAAA,GACP,CAAC,CAAA;AAAA;;;;"}
1
+ {"version":3,"file":"TextLink.cjs","sources":["../../../src/text-link/TextLink.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { Anchor } from '../link-provider/Anchor'\nimport styles from './TextLink.module.css'\n\nexport type TextLinkVariant = 'primary' | 'secondary'\n\nexport type TextLinkDataTestId = {\n root?: string\n icon?: string\n}\n\nexport type TextLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {\n variant?: TextLinkVariant\n icon?: ReactNode\n external?: boolean\n disabled?: boolean\n dataTestId?: TextLinkDataTestId\n}\n\nexport const TextLink = ({\n variant = 'primary',\n icon,\n external = false,\n disabled = false,\n className,\n children,\n target,\n rel,\n href,\n onClick,\n dataTestId,\n ...rest\n}: TextLinkProps) => (\n <Anchor\n className={cn(styles.link, styles[variant], className)}\n target={target ?? (external ? '_blank' : undefined)}\n rel={rel ?? (external ? 'noopener noreferrer' : undefined)}\n href={disabled ? undefined : href}\n aria-disabled={disabled || undefined}\n tabIndex={disabled ? -1 : undefined}\n onClick={disabled ? undefined : onClick}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {children}\n {icon != null ? (\n <span\n className={styles.icon}\n aria-hidden='true'\n data-testid={dataTestId?.icon}\n >\n {icon}\n </span>\n ) : null}\n </Anchor>\n)\n"],"names":["TextLink","_ref","variant","icon","external","disabled","className","children","target","rel","href","onClick","dataTestId","rest","_jsxs","Anchor","cn","styles","link","undefined","tabIndex","root","_jsx"],"mappings":";;;;;;;;;AAsBO,MAAMA,QAAQ,GAAGC,IAAA,IAAA;EAAA,IAAC;AACvBC,IAAAA,OAAO,GAAG,SAAS;IACnBC,IAAI;AACJC,IAAAA,QAAQ,GAAG,KAAK;AAChBC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,SAAS;IACTC,QAAQ;IACRC,MAAM;IACNC,GAAG;IACHC,IAAI;IACJC,OAAO;IACPC,UAAU;IACV,GAAGC,IAAAA;AACU,GAAC,GAAAZ,IAAA,CAAA;EAAA,oBACda,eAAA,CAACC,aAAM,EAAA;AACLT,IAAAA,SAAS,EAAEU,EAAE,CAACC,eAAM,CAACC,IAAI,EAAED,eAAM,CAACf,OAAO,CAAC,EAAEI,SAAS,CAAE;IACvDE,MAAM,EAAEA,MAAM,KAAKJ,QAAQ,GAAG,QAAQ,GAAGe,SAAS,CAAE;IACpDV,GAAG,EAAEA,GAAG,KAAKL,QAAQ,GAAG,qBAAqB,GAAGe,SAAS,CAAE;AAC3DT,IAAAA,IAAI,EAAEL,QAAQ,GAAGc,SAAS,GAAGT,IAAK;IAClC,eAAeL,EAAAA,QAAQ,IAAIc,SAAU;AACrCC,IAAAA,QAAQ,EAAEf,QAAQ,GAAG,CAAC,CAAC,GAAGc,SAAU;AACpCR,IAAAA,OAAO,EAAEN,QAAQ,GAAGc,SAAS,GAAGR,OAAQ;IACxC,aAAaC,EAAAA,UAAU,EAAES,IAAK;AAAA,IAAA,GAC1BR,IAAI;AAAAN,IAAAA,QAAA,GAEPA,QAAQ,EACRJ,IAAI,IAAI,IAAI,gBACXmB,cAAA,CAAA,MAAA,EAAA;MACEhB,SAAS,EAAEW,eAAM,CAACd,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaS,EAAAA,UAAU,EAAET,IAAK;AAAAI,MAAAA,QAAA,EAE7BJ,IAAAA;KACG,CAAC,GACL,IAAI,CAAA;AAAA,GACF,CAAC,CAAA;AAAA;;;;"}
@@ -0,0 +1,39 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const react = require('react');
6
+ const lidoSharedUi = require('@lidofinance/lido-shared-ui');
7
+ const jsxRuntime = require('react/jsx-runtime');
8
+ const IconButton = require('../icon-button/IconButton.cjs');
9
+ const IconNight = require('../icons/components/base/IconNight.cjs');
10
+ const IconDay = require('../icons/components/base/IconDay.cjs');
11
+
12
+ /** Round icon button that toggles the light/dark theme from the theme context. */
13
+ const ThemeSwitcher = /*#__PURE__*/react.forwardRef((_ref, ref) => {
14
+ let {
15
+ onClick,
16
+ ...rest
17
+ } = _ref;
18
+ const {
19
+ themeName,
20
+ toggleTheme
21
+ } = lidoSharedUi.useThemeToggle();
22
+ const isLight = themeName === lidoSharedUi.ThemeName.light;
23
+ const handleClick = event => {
24
+ toggleTheme();
25
+ onClick?.(event);
26
+ };
27
+ return /*#__PURE__*/jsxRuntime.jsx(IconButton.IconButton, {
28
+ ...rest,
29
+ ref: ref,
30
+ variant: "surface",
31
+ "aria-label": isLight ? 'Switch to dark theme' : 'Switch to light theme',
32
+ icon: isLight ? /*#__PURE__*/jsxRuntime.jsx(IconNight.IconNight, {}) : /*#__PURE__*/jsxRuntime.jsx(IconDay.IconDay, {}),
33
+ onClick: handleClick
34
+ });
35
+ });
36
+ ThemeSwitcher.displayName = 'ThemeSwitcher';
37
+
38
+ exports.ThemeSwitcher = ThemeSwitcher;
39
+ //# sourceMappingURL=ThemeSwitcher.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ThemeSwitcher.cjs","sources":["../../../src/theme-switcher/ThemeSwitcher.tsx"],"sourcesContent":["import { forwardRef, type MouseEvent } from 'react'\n\nimport { ThemeName, useThemeToggle } from '@lidofinance/lido-shared-ui'\n\nimport { IconButton, type IconButtonProps } from '../icon-button'\nimport { IconDay, IconNight } from '../icons'\n\nexport type ThemeSwitcherProps = Omit<\n IconButtonProps,\n 'icon' | 'variant' | 'aria-label'\n>\n\n/** Round icon button that toggles the light/dark theme from the theme context. */\nexport const ThemeSwitcher = forwardRef<HTMLButtonElement, ThemeSwitcherProps>(\n ({ onClick, ...rest }, ref) => {\n const { themeName, toggleTheme } = useThemeToggle()\n const isLight = themeName === ThemeName.light\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n toggleTheme()\n onClick?.(event)\n }\n\n return (\n <IconButton\n {...rest}\n ref={ref}\n variant='surface'\n aria-label={isLight ? 'Switch to dark theme' : 'Switch to light theme'}\n icon={isLight ? <IconNight /> : <IconDay />}\n onClick={handleClick}\n />\n )\n },\n)\n\nThemeSwitcher.displayName = 'ThemeSwitcher'\n"],"names":["ThemeSwitcher","forwardRef","_ref","ref","onClick","rest","themeName","toggleTheme","useThemeToggle","isLight","ThemeName","light","handleClick","event","_jsx","IconButton","variant","icon","IconNight","IconDay","displayName"],"mappings":";;;;;;;;;;;AAYA;AACO,MAAMA,aAAa,gBAAGC,gBAAU,CACrC,CAAAC,IAAA,EAAuBC,GAAG,KAAK;EAAA,IAA9B;IAAEC,OAAO;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAH,IAAA,CAAA;EACnB,MAAM;IAAEI,SAAS;AAAEC,IAAAA,WAAAA;GAAa,GAAGC,2BAAc,EAAE,CAAA;AACnD,EAAA,MAAMC,OAAO,GAAGH,SAAS,KAAKI,sBAAS,CAACC,KAAK,CAAA;EAE7C,MAAMC,WAAW,GAAIC,KAAoC,IAAK;AAC5DN,IAAAA,WAAW,EAAE,CAAA;IACbH,OAAO,GAAGS,KAAK,CAAC,CAAA;GACjB,CAAA;EAED,oBACEC,cAAA,CAACC,qBAAU,EAAA;AAAA,IAAA,GACLV,IAAI;AACRF,IAAAA,GAAG,EAAEA,GAAI;AACTa,IAAAA,OAAO,EAAC,SAAS;AACjB,IAAA,YAAA,EAAYP,OAAO,GAAG,sBAAsB,GAAG,uBAAwB;AACvEQ,IAAAA,IAAI,EAAER,OAAO,gBAAGK,cAAA,CAACI,mBAAS,EAAE,EAAA,CAAC,gBAAGJ,cAAA,CAACK,eAAO,IAAE,CAAE;AAC5Cf,IAAAA,OAAO,EAAEQ,WAAAA;AAAY,GACtB,CAAC,CAAA;AAEN,CACF,EAAC;AAEDZ,aAAa,CAACoB,WAAW,GAAG,eAAe;;;;"}
@@ -24,10 +24,10 @@ const TokenSelector = _ref => {
24
24
  ...rest
25
25
  } = _ref;
26
26
  const [open, setOpen] = react.useState(false);
27
- const rootRef = react.useRef(null);
27
+ const [root, setRoot] = react.useState(null);
28
28
  const triggerRef = react.useRef(null);
29
29
  const handleClose = react.useCallback(() => setOpen(false), []);
30
- useOutsideClick.useOutsideClick(rootRef, handleClose, open);
30
+ useOutsideClick.useOutsideClick(root, handleClose, open);
31
31
  react.useEffect(() => {
32
32
  if (!open) return;
33
33
  const handleDocumentKeyDown = event => {
@@ -67,7 +67,7 @@ const TokenSelector = _ref => {
67
67
  triggerRef.current?.focus();
68
68
  };
69
69
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
70
- ref: rootRef,
70
+ ref: setRoot,
71
71
  className: cn(TokenSelector_module.root, className),
72
72
  "data-testid": dataTestId?.root,
73
73
  ...rest,
@@ -1 +1 @@
1
- {"version":3,"file":"TokenSelector.cjs","sources":["../../../src/token-selector/TokenSelector.tsx"],"sourcesContent":["import {\n useCallback,\n useEffect,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react'\nimport { useOutsideClick } from '../hooks/useOutsideClick'\nimport { IconCheck, IconChevronDown, IconChevronUp } from '../icons'\nimport cn from 'classnames'\nimport styles from './TokenSelector.module.css'\n\nexport type TokenSelectorOptionDataTestId = {\n root?: string\n icon?: string\n label?: string\n secondaryLabel?: string\n description?: string\n}\n\nexport type TokenSelectorOption = {\n value: string\n label: ReactNode\n /** Shown next to `label`, in a muted weight — default size only. */\n secondaryLabel?: ReactNode\n /** Caption line below the label row — default size only. */\n description?: ReactNode\n icon?: ReactNode\n disabled?: boolean\n dataTestId?: TokenSelectorOptionDataTestId\n}\n\nexport type TokenSelectorSize = 'default' | 'small'\n\nexport type TokenSelectorDataTestId = {\n root?: string\n trigger?: string\n panel?: string\n}\n\nexport type TokenSelectorProps = Omit<\n ComponentPropsWithoutRef<'div'>,\n 'onChange'\n> & {\n options: TokenSelectorOption[]\n value?: string\n onChange?: (value: string) => void\n single?: boolean\n size?: TokenSelectorSize\n placeholder?: ReactNode\n dataTestId?: TokenSelectorDataTestId\n}\n\nexport const TokenSelector = ({\n options,\n value,\n onChange,\n single = false,\n size = 'default',\n placeholder = 'Select',\n className,\n dataTestId,\n ...rest\n}: TokenSelectorProps) => {\n const [open, setOpen] = useState(false)\n const rootRef = useRef<HTMLDivElement>(null)\n const triggerRef = useRef<HTMLButtonElement>(null)\n\n const handleClose = useCallback(() => setOpen(false), [])\n useOutsideClick(rootRef, handleClose, open)\n\n useEffect(() => {\n if (!open) return\n\n const handleDocumentKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return\n setOpen(false)\n triggerRef.current?.focus()\n }\n\n document.addEventListener('keydown', handleDocumentKeyDown)\n return () => document.removeEventListener('keydown', handleDocumentKeyDown)\n }, [open])\n\n const selectedOption = options.find((option) => option.value === value)\n\n if (single) {\n return (\n <span\n className={cn(styles.single, styles[size], className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {selectedOption?.icon ? (\n <span\n className={styles.icon}\n data-testid={selectedOption.dataTestId?.icon}\n >\n {selectedOption.icon}\n </span>\n ) : null}\n <span\n className={styles.label}\n data-testid={selectedOption?.dataTestId?.label}\n >\n {selectedOption?.label}\n </span>\n {size === 'default' && selectedOption?.secondaryLabel != null ? (\n <span\n className={styles.secondaryLabel}\n data-testid={selectedOption.dataTestId?.secondaryLabel}\n >\n {selectedOption.secondaryLabel}\n </span>\n ) : null}\n </span>\n )\n }\n\n const handleTriggerClick = () => setOpen((prev) => !prev)\n\n const handleOptionClick = (option: TokenSelectorOption) => {\n if (option.disabled) return\n onChange?.(option.value)\n setOpen(false)\n triggerRef.current?.focus()\n }\n\n return (\n <div\n ref={rootRef}\n className={cn(styles.root, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <button\n ref={triggerRef}\n type='button'\n aria-haspopup='listbox'\n aria-expanded={open}\n className={cn(styles.trigger, styles[size], open && styles.open)}\n onClick={handleTriggerClick}\n data-testid={dataTestId?.trigger}\n >\n <span className={styles.content}>\n {selectedOption ? (\n <>\n {selectedOption.icon ? (\n <span\n className={styles.icon}\n data-testid={selectedOption.dataTestId?.icon}\n >\n {selectedOption.icon}\n </span>\n ) : null}\n <span\n className={styles.label}\n data-testid={selectedOption.dataTestId?.label}\n >\n {selectedOption.label}\n </span>\n {size === 'default' && selectedOption.secondaryLabel != null ? (\n <span\n className={styles.secondaryLabel}\n data-testid={selectedOption.dataTestId?.secondaryLabel}\n >\n {selectedOption.secondaryLabel}\n </span>\n ) : null}\n </>\n ) : (\n <span className={styles.placeholder}>{placeholder}</span>\n )}\n </span>\n <span className={styles.chevron} aria-hidden='true'>\n {open ? <IconChevronUp /> : <IconChevronDown />}\n </span>\n </button>\n {open ? (\n <div\n role='listbox'\n className={styles.panel}\n data-testid={dataTestId?.panel}\n >\n <div className={styles.list}>\n {options.map((option) => {\n const selected = option.value === value\n return (\n <button\n key={option.value}\n type='button'\n role='option'\n aria-selected={selected}\n disabled={option.disabled}\n className={cn(\n styles.option,\n styles[size],\n selected && styles.selected,\n )}\n onClick={() => handleOptionClick(option)}\n data-testid={option.dataTestId?.root}\n >\n <span className={styles.optionContent}>\n <span className={styles.optionRow}>\n {option.icon ? (\n <span\n className={styles.icon}\n data-testid={option.dataTestId?.icon}\n >\n {option.icon}\n </span>\n ) : null}\n <span\n className={styles.label}\n data-testid={option.dataTestId?.label}\n >\n {option.label}\n </span>\n {size === 'default' && option.secondaryLabel != null ? (\n <span\n className={styles.secondaryLabel}\n data-testid={option.dataTestId?.secondaryLabel}\n >\n {option.secondaryLabel}\n </span>\n ) : null}\n </span>\n {size === 'default' && option.description != null ? (\n <span\n className={styles.description}\n data-testid={option.dataTestId?.description}\n >\n {option.description}\n </span>\n ) : null}\n </span>\n {size === 'default' && selected ? (\n <span className={styles.indicator} aria-hidden='true'>\n <IconCheck className={styles.checkmark} />\n </span>\n ) : null}\n </button>\n )\n })}\n </div>\n </div>\n ) : null}\n </div>\n )\n}\n"],"names":["TokenSelector","_ref","options","value","onChange","single","size","placeholder","className","dataTestId","rest","open","setOpen","useState","rootRef","useRef","triggerRef","handleClose","useCallback","useOutsideClick","useEffect","handleDocumentKeyDown","event","key","current","focus","document","addEventListener","removeEventListener","selectedOption","find","option","_jsxs","cn","styles","root","children","icon","_jsx","label","secondaryLabel","handleTriggerClick","prev","handleOptionClick","disabled","ref","type","trigger","onClick","content","_Fragment","chevron","IconChevronUp","IconChevronDown","role","panel","list","map","selected","optionContent","optionRow","description","indicator","IconCheck","checkmark"],"mappings":";;;;;;;;;;;;;AAsDaA,MAAAA,aAAa,GAAGC,IAAA,IAUH;EAAA,IAVI;IAC5BC,OAAO;IACPC,KAAK;IACLC,QAAQ;AACRC,IAAAA,MAAM,GAAG,KAAK;AACdC,IAAAA,IAAI,GAAG,SAAS;AAChBC,IAAAA,WAAW,GAAG,QAAQ;IACtBC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACe,GAAC,GAAAT,IAAA,CAAA;EACnB,MAAM,CAACU,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;AACvC,EAAA,MAAMC,OAAO,GAAGC,YAAM,CAAiB,IAAI,CAAC,CAAA;AAC5C,EAAA,MAAMC,UAAU,GAAGD,YAAM,CAAoB,IAAI,CAAC,CAAA;EAElD,MAAME,WAAW,GAAGC,iBAAW,CAAC,MAAMN,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAA;AACzDO,EAAAA,+BAAe,CAACL,OAAO,EAAEG,WAAW,EAAEN,IAAI,CAAC,CAAA;AAE3CS,EAAAA,eAAS,CAAC,MAAM;IACd,IAAI,CAACT,IAAI,EAAE,OAAA;IAEX,MAAMU,qBAAqB,GAAIC,KAAoB,IAAK;AACtD,MAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE,OAAA;MAC5BX,OAAO,CAAC,KAAK,CAAC,CAAA;AACdI,MAAAA,UAAU,CAACQ,OAAO,EAAEC,KAAK,EAAE,CAAA;KAC5B,CAAA;AAEDC,IAAAA,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEN,qBAAqB,CAAC,CAAA;IAC3D,OAAO,MAAMK,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEP,qBAAqB,CAAC,CAAA;AAC7E,GAAC,EAAE,CAACV,IAAI,CAAC,CAAC,CAAA;AAEV,EAAA,MAAMkB,cAAc,GAAG3B,OAAO,CAAC4B,IAAI,CAAEC,MAAM,IAAKA,MAAM,CAAC5B,KAAK,KAAKA,KAAK,CAAC,CAAA;AAEvE,EAAA,IAAIE,MAAM,EAAE;AACV,IAAA,oBACE2B,eAAA,CAAA,MAAA,EAAA;AACExB,MAAAA,SAAS,EAAEyB,EAAE,CAACC,oBAAM,CAAC7B,MAAM,EAAE6B,oBAAM,CAAC5B,IAAI,CAAC,EAAEE,SAAS,CAAE;MACtD,aAAaC,EAAAA,UAAU,EAAE0B,IAAK;AAAA,MAAA,GAC1BzB,IAAI;AAAA0B,MAAAA,QAAA,EAEPP,CAAAA,cAAc,EAAEQ,IAAI,gBACnBC,cAAA,CAAA,MAAA,EAAA;QACE9B,SAAS,EAAE0B,oBAAM,CAACG,IAAK;AACvB,QAAA,aAAA,EAAaR,cAAc,CAACpB,UAAU,EAAE4B,IAAK;QAAAD,QAAA,EAE5CP,cAAc,CAACQ,IAAAA;AAAI,OAChB,CAAC,GACL,IAAI,eACRC,cAAA,CAAA,MAAA,EAAA;QACE9B,SAAS,EAAE0B,oBAAM,CAACK,KAAM;AACxB,QAAA,aAAA,EAAaV,cAAc,EAAEpB,UAAU,EAAE8B,KAAM;QAAAH,QAAA,EAE9CP,cAAc,EAAEU,KAAAA;AAAK,OAClB,CAAC,EACNjC,IAAI,KAAK,SAAS,IAAIuB,cAAc,EAAEW,cAAc,IAAI,IAAI,gBAC3DF,cAAA,CAAA,MAAA,EAAA;QACE9B,SAAS,EAAE0B,oBAAM,CAACM,cAAe;AACjC,QAAA,aAAA,EAAaX,cAAc,CAACpB,UAAU,EAAE+B,cAAe;QAAAJ,QAAA,EAEtDP,cAAc,CAACW,cAAAA;OACZ,CAAC,GACL,IAAI,CAAA;AAAA,KACJ,CAAC,CAAA;AAEX,GAAA;EAEA,MAAMC,kBAAkB,GAAGA,MAAM7B,OAAO,CAAE8B,IAAI,IAAK,CAACA,IAAI,CAAC,CAAA;EAEzD,MAAMC,iBAAiB,GAAIZ,MAA2B,IAAK;IACzD,IAAIA,MAAM,CAACa,QAAQ,EAAE,OAAA;AACrBxC,IAAAA,QAAQ,GAAG2B,MAAM,CAAC5B,KAAK,CAAC,CAAA;IACxBS,OAAO,CAAC,KAAK,CAAC,CAAA;AACdI,IAAAA,UAAU,CAACQ,OAAO,EAAEC,KAAK,EAAE,CAAA;GAC5B,CAAA;AAED,EAAA,oBACEO,eAAA,CAAA,KAAA,EAAA;AACEa,IAAAA,GAAG,EAAE/B,OAAQ;IACbN,SAAS,EAAEyB,EAAE,CAACC,oBAAM,CAACC,IAAI,EAAE3B,SAAS,CAAE;IACtC,aAAaC,EAAAA,UAAU,EAAE0B,IAAK;AAAA,IAAA,GAC1BzB,IAAI;AAAA0B,IAAAA,QAAA,gBAERJ,eAAA,CAAA,QAAA,EAAA;AACEa,MAAAA,GAAG,EAAE7B,UAAW;AAChB8B,MAAAA,IAAI,EAAC,QAAQ;AACb,MAAA,eAAA,EAAc,SAAS;AACvB,MAAA,eAAA,EAAenC,IAAK;AACpBH,MAAAA,SAAS,EAAEyB,EAAE,CAACC,oBAAM,CAACa,OAAO,EAAEb,oBAAM,CAAC5B,IAAI,CAAC,EAAEK,IAAI,IAAIuB,oBAAM,CAACvB,IAAI,CAAE;AACjEqC,MAAAA,OAAO,EAAEP,kBAAmB;MAC5B,aAAahC,EAAAA,UAAU,EAAEsC,OAAQ;AAAAX,MAAAA,QAAA,gBAEjCE,cAAA,CAAA,MAAA,EAAA;QAAM9B,SAAS,EAAE0B,oBAAM,CAACe,OAAQ;AAAAb,QAAAA,QAAA,EAC7BP,cAAc,gBACbG,eAAA,CAAAkB,mBAAA,EAAA;AAAAd,UAAAA,QAAA,EACGP,CAAAA,cAAc,CAACQ,IAAI,gBAClBC,cAAA,CAAA,MAAA,EAAA;YACE9B,SAAS,EAAE0B,oBAAM,CAACG,IAAK;AACvB,YAAA,aAAA,EAAaR,cAAc,CAACpB,UAAU,EAAE4B,IAAK;YAAAD,QAAA,EAE5CP,cAAc,CAACQ,IAAAA;AAAI,WAChB,CAAC,GACL,IAAI,eACRC,cAAA,CAAA,MAAA,EAAA;YACE9B,SAAS,EAAE0B,oBAAM,CAACK,KAAM;AACxB,YAAA,aAAA,EAAaV,cAAc,CAACpB,UAAU,EAAE8B,KAAM;YAAAH,QAAA,EAE7CP,cAAc,CAACU,KAAAA;AAAK,WACjB,CAAC,EACNjC,IAAI,KAAK,SAAS,IAAIuB,cAAc,CAACW,cAAc,IAAI,IAAI,gBAC1DF,cAAA,CAAA,MAAA,EAAA;YACE9B,SAAS,EAAE0B,oBAAM,CAACM,cAAe;AACjC,YAAA,aAAA,EAAaX,cAAc,CAACpB,UAAU,EAAE+B,cAAe;YAAAJ,QAAA,EAEtDP,cAAc,CAACW,cAAAA;WACZ,CAAC,GACL,IAAI,CAAA;SACR,CAAC,gBAEHF,cAAA,CAAA,MAAA,EAAA;UAAM9B,SAAS,EAAE0B,oBAAM,CAAC3B,WAAY;AAAA6B,UAAAA,QAAA,EAAE7B,WAAAA;SAAkB,CAAA;OAEtD,CAAC,eACP+B,cAAA,CAAA,MAAA,EAAA;QAAM9B,SAAS,EAAE0B,oBAAM,CAACiB,OAAQ;AAAC,QAAA,aAAA,EAAY,MAAM;AAAAf,QAAAA,QAAA,EAChDzB,IAAI,gBAAG2B,cAAA,CAACc,2BAAa,EAAE,EAAA,CAAC,gBAAGd,cAAA,CAACe,+BAAe,EAAE,EAAA,CAAA;AAAC,OAC3C,CAAC,CAAA;AAAA,KACD,CAAC,EACR1C,IAAI,gBACH2B,cAAA,CAAA,KAAA,EAAA;AACEgB,MAAAA,IAAI,EAAC,SAAS;MACd9C,SAAS,EAAE0B,oBAAM,CAACqB,KAAM;MACxB,aAAa9C,EAAAA,UAAU,EAAE8C,KAAM;AAAAnB,MAAAA,QAAA,eAE/BE,cAAA,CAAA,KAAA,EAAA;QAAK9B,SAAS,EAAE0B,oBAAM,CAACsB,IAAK;AAAApB,QAAAA,QAAA,EACzBlC,OAAO,CAACuD,GAAG,CAAE1B,MAAM,IAAK;AACvB,UAAA,MAAM2B,QAAQ,GAAG3B,MAAM,CAAC5B,KAAK,KAAKA,KAAK,CAAA;AACvC,UAAA,oBACE6B,eAAA,CAAA,QAAA,EAAA;AAEEc,YAAAA,IAAI,EAAC,QAAQ;AACbQ,YAAAA,IAAI,EAAC,QAAQ;AACb,YAAA,eAAA,EAAeI,QAAS;YACxBd,QAAQ,EAAEb,MAAM,CAACa,QAAS;AAC1BpC,YAAAA,SAAS,EAAEyB,EAAE,CACXC,oBAAM,CAACH,MAAM,EACbG,oBAAM,CAAC5B,IAAI,CAAC,EACZoD,QAAQ,IAAIxB,oBAAM,CAACwB,QACrB,CAAE;AACFV,YAAAA,OAAO,EAAEA,MAAML,iBAAiB,CAACZ,MAAM,CAAE;AACzC,YAAA,aAAA,EAAaA,MAAM,CAACtB,UAAU,EAAE0B,IAAK;AAAAC,YAAAA,QAAA,gBAErCJ,eAAA,CAAA,MAAA,EAAA;cAAMxB,SAAS,EAAE0B,oBAAM,CAACyB,aAAc;AAAAvB,cAAAA,QAAA,gBACpCJ,eAAA,CAAA,MAAA,EAAA;gBAAMxB,SAAS,EAAE0B,oBAAM,CAAC0B,SAAU;AAAAxB,gBAAAA,QAAA,EAC/BL,CAAAA,MAAM,CAACM,IAAI,gBACVC,cAAA,CAAA,MAAA,EAAA;kBACE9B,SAAS,EAAE0B,oBAAM,CAACG,IAAK;AACvB,kBAAA,aAAA,EAAaN,MAAM,CAACtB,UAAU,EAAE4B,IAAK;kBAAAD,QAAA,EAEpCL,MAAM,CAACM,IAAAA;AAAI,iBACR,CAAC,GACL,IAAI,eACRC,cAAA,CAAA,MAAA,EAAA;kBACE9B,SAAS,EAAE0B,oBAAM,CAACK,KAAM;AACxB,kBAAA,aAAA,EAAaR,MAAM,CAACtB,UAAU,EAAE8B,KAAM;kBAAAH,QAAA,EAErCL,MAAM,CAACQ,KAAAA;AAAK,iBACT,CAAC,EACNjC,IAAI,KAAK,SAAS,IAAIyB,MAAM,CAACS,cAAc,IAAI,IAAI,gBAClDF,cAAA,CAAA,MAAA,EAAA;kBACE9B,SAAS,EAAE0B,oBAAM,CAACM,cAAe;AACjC,kBAAA,aAAA,EAAaT,MAAM,CAACtB,UAAU,EAAE+B,cAAe;kBAAAJ,QAAA,EAE9CL,MAAM,CAACS,cAAAA;iBACJ,CAAC,GACL,IAAI,CAAA;AAAA,eACJ,CAAC,EACNlC,IAAI,KAAK,SAAS,IAAIyB,MAAM,CAAC8B,WAAW,IAAI,IAAI,gBAC/CvB,cAAA,CAAA,MAAA,EAAA;gBACE9B,SAAS,EAAE0B,oBAAM,CAAC2B,WAAY;AAC9B,gBAAA,aAAA,EAAa9B,MAAM,CAACtB,UAAU,EAAEoD,WAAY;gBAAAzB,QAAA,EAE3CL,MAAM,CAAC8B,WAAAA;eACJ,CAAC,GACL,IAAI,CAAA;aACJ,CAAC,EACNvD,IAAI,KAAK,SAAS,IAAIoD,QAAQ,gBAC7BpB,cAAA,CAAA,MAAA,EAAA;cAAM9B,SAAS,EAAE0B,oBAAM,CAAC4B,SAAU;AAAC,cAAA,aAAA,EAAY,MAAM;cAAA1B,QAAA,eACnDE,cAAA,CAACyB,mBAAS,EAAA;gBAACvD,SAAS,EAAE0B,oBAAM,CAAC8B,SAAAA;eAAY,CAAA;aACrC,CAAC,GACL,IAAI,CAAA;WAnDHjC,EAAAA,MAAM,CAAC5B,KAoDN,CAAC,CAAA;SAEZ,CAAA;OACE,CAAA;KACF,CAAC,GACJ,IAAI,CAAA;AAAA,GACL,CAAC,CAAA;AAEV;;;;"}
1
+ {"version":3,"file":"TokenSelector.cjs","sources":["../../../src/token-selector/TokenSelector.tsx"],"sourcesContent":["import {\n useCallback,\n useEffect,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react'\nimport { useOutsideClick } from '../hooks/useOutsideClick'\nimport { IconCheck, IconChevronDown, IconChevronUp } from '../icons'\nimport cn from 'classnames'\nimport styles from './TokenSelector.module.css'\n\nexport type TokenSelectorOptionDataTestId = {\n root?: string\n icon?: string\n label?: string\n secondaryLabel?: string\n description?: string\n}\n\nexport type TokenSelectorOption = {\n value: string\n label: ReactNode\n /** Shown next to `label`, in a muted weight — default size only. */\n secondaryLabel?: ReactNode\n /** Caption line below the label row — default size only. */\n description?: ReactNode\n icon?: ReactNode\n disabled?: boolean\n dataTestId?: TokenSelectorOptionDataTestId\n}\n\nexport type TokenSelectorSize = 'default' | 'small'\n\nexport type TokenSelectorDataTestId = {\n root?: string\n trigger?: string\n panel?: string\n}\n\nexport type TokenSelectorProps = Omit<\n ComponentPropsWithoutRef<'div'>,\n 'onChange'\n> & {\n options: TokenSelectorOption[]\n value?: string\n onChange?: (value: string) => void\n single?: boolean\n size?: TokenSelectorSize\n placeholder?: ReactNode\n dataTestId?: TokenSelectorDataTestId\n}\n\nexport const TokenSelector = ({\n options,\n value,\n onChange,\n single = false,\n size = 'default',\n placeholder = 'Select',\n className,\n dataTestId,\n ...rest\n}: TokenSelectorProps) => {\n const [open, setOpen] = useState(false)\n const [root, setRoot] = useState<HTMLDivElement | null>(null)\n const triggerRef = useRef<HTMLButtonElement>(null)\n\n const handleClose = useCallback(() => setOpen(false), [])\n useOutsideClick(root, handleClose, open)\n\n useEffect(() => {\n if (!open) return\n\n const handleDocumentKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return\n setOpen(false)\n triggerRef.current?.focus()\n }\n\n document.addEventListener('keydown', handleDocumentKeyDown)\n return () => document.removeEventListener('keydown', handleDocumentKeyDown)\n }, [open])\n\n const selectedOption = options.find((option) => option.value === value)\n\n if (single) {\n return (\n <span\n className={cn(styles.single, styles[size], className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {selectedOption?.icon ? (\n <span\n className={styles.icon}\n data-testid={selectedOption.dataTestId?.icon}\n >\n {selectedOption.icon}\n </span>\n ) : null}\n <span\n className={styles.label}\n data-testid={selectedOption?.dataTestId?.label}\n >\n {selectedOption?.label}\n </span>\n {size === 'default' && selectedOption?.secondaryLabel != null ? (\n <span\n className={styles.secondaryLabel}\n data-testid={selectedOption.dataTestId?.secondaryLabel}\n >\n {selectedOption.secondaryLabel}\n </span>\n ) : null}\n </span>\n )\n }\n\n const handleTriggerClick = () => setOpen((prev) => !prev)\n\n const handleOptionClick = (option: TokenSelectorOption) => {\n if (option.disabled) return\n onChange?.(option.value)\n setOpen(false)\n triggerRef.current?.focus()\n }\n\n return (\n <div\n ref={setRoot}\n className={cn(styles.root, className)}\n data-testid={dataTestId?.root}\n {...rest}\n >\n <button\n ref={triggerRef}\n type='button'\n aria-haspopup='listbox'\n aria-expanded={open}\n className={cn(styles.trigger, styles[size], open && styles.open)}\n onClick={handleTriggerClick}\n data-testid={dataTestId?.trigger}\n >\n <span className={styles.content}>\n {selectedOption ? (\n <>\n {selectedOption.icon ? (\n <span\n className={styles.icon}\n data-testid={selectedOption.dataTestId?.icon}\n >\n {selectedOption.icon}\n </span>\n ) : null}\n <span\n className={styles.label}\n data-testid={selectedOption.dataTestId?.label}\n >\n {selectedOption.label}\n </span>\n {size === 'default' && selectedOption.secondaryLabel != null ? (\n <span\n className={styles.secondaryLabel}\n data-testid={selectedOption.dataTestId?.secondaryLabel}\n >\n {selectedOption.secondaryLabel}\n </span>\n ) : null}\n </>\n ) : (\n <span className={styles.placeholder}>{placeholder}</span>\n )}\n </span>\n <span className={styles.chevron} aria-hidden='true'>\n {open ? <IconChevronUp /> : <IconChevronDown />}\n </span>\n </button>\n {open ? (\n <div\n role='listbox'\n className={styles.panel}\n data-testid={dataTestId?.panel}\n >\n <div className={styles.list}>\n {options.map((option) => {\n const selected = option.value === value\n return (\n <button\n key={option.value}\n type='button'\n role='option'\n aria-selected={selected}\n disabled={option.disabled}\n className={cn(\n styles.option,\n styles[size],\n selected && styles.selected,\n )}\n onClick={() => handleOptionClick(option)}\n data-testid={option.dataTestId?.root}\n >\n <span className={styles.optionContent}>\n <span className={styles.optionRow}>\n {option.icon ? (\n <span\n className={styles.icon}\n data-testid={option.dataTestId?.icon}\n >\n {option.icon}\n </span>\n ) : null}\n <span\n className={styles.label}\n data-testid={option.dataTestId?.label}\n >\n {option.label}\n </span>\n {size === 'default' && option.secondaryLabel != null ? (\n <span\n className={styles.secondaryLabel}\n data-testid={option.dataTestId?.secondaryLabel}\n >\n {option.secondaryLabel}\n </span>\n ) : null}\n </span>\n {size === 'default' && option.description != null ? (\n <span\n className={styles.description}\n data-testid={option.dataTestId?.description}\n >\n {option.description}\n </span>\n ) : null}\n </span>\n {size === 'default' && selected ? (\n <span className={styles.indicator} aria-hidden='true'>\n <IconCheck className={styles.checkmark} />\n </span>\n ) : null}\n </button>\n )\n })}\n </div>\n </div>\n ) : null}\n </div>\n )\n}\n"],"names":["TokenSelector","_ref","options","value","onChange","single","size","placeholder","className","dataTestId","rest","open","setOpen","useState","root","setRoot","triggerRef","useRef","handleClose","useCallback","useOutsideClick","useEffect","handleDocumentKeyDown","event","key","current","focus","document","addEventListener","removeEventListener","selectedOption","find","option","_jsxs","cn","styles","children","icon","_jsx","label","secondaryLabel","handleTriggerClick","prev","handleOptionClick","disabled","ref","type","trigger","onClick","content","_Fragment","chevron","IconChevronUp","IconChevronDown","role","panel","list","map","selected","optionContent","optionRow","description","indicator","IconCheck","checkmark"],"mappings":"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"}
@@ -7,6 +7,7 @@ const reactDom = require('react-dom');
7
7
  const cn = require('classnames');
8
8
  const Tooltip_module = require('./Tooltip.module.css.cjs');
9
9
  const jsxRuntime = require('react/jsx-runtime');
10
+ const useIsomorphicLayoutEffect = require('../hooks/useIsomorphicLayoutEffect.cjs');
10
11
 
11
12
  // Minimal distance between the tooltip and the viewport edge.
12
13
  const VIEWPORT_MARGIN = 16;
@@ -118,7 +119,7 @@ const Tooltip = _ref => {
118
119
  contentEl.dataset.position = resolved;
119
120
  contentEl.dataset.placed = 'true';
120
121
  }, [position]);
121
- react.useLayoutEffect(() => {
122
+ useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
122
123
  if (!open) return;
123
124
  updatePosition();
124
125
  window.addEventListener('scroll', updatePosition, true);
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.cjs","sources":["../../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n useCallback,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type FocusEvent,\n type MouseEvent,\n type ReactNode,\n} from 'react'\nimport { createPortal } from 'react-dom'\n\nimport cn from 'classnames'\n\nimport styles from './Tooltip.module.css'\n\nexport type TooltipPosition =\n | 'top'\n | 'right'\n | 'bottom'\n | 'left'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n\nexport type TooltipDataTestId = {\n root?: string\n content?: string\n}\n\nexport type TooltipProps = Omit<ComponentPropsWithoutRef<'span'>, 'content'> & {\n content: ReactNode\n position?: TooltipPosition\n width?: number\n dataTestId?: TooltipDataTestId\n}\n\n// Minimal distance between the tooltip and the viewport edge.\nconst VIEWPORT_MARGIN = 16\n// Visual gap between the anchor and the content.\nconst MAIN_GAP = 8\nconst CORNER_GAP = 2\n// Extra buffer used only to decide whether a position still \"fits\" — bigger\n// than the visual gap so a flip triggers before the bubble visually crowds the edge.\nconst FIT_BUFFER = 15\n\ntype Adjustment = {\n position: TooltipPosition\n left: number\n top: number\n}\n\nconst clampValue = (value: number, min: number, max: number) =>\n Math.min(Math.max(value, min), Math.max(max, min))\n\nconst getMaxWidth = (width: number) =>\n `min(${width}px, calc(100vw - ${VIEWPORT_MARGIN * 2}px))`\n\n// Measures the anchor and the content, then picks a position that keeps the\n// bubble inside the viewport — flipping sides when there isn't room, sliding\n// along the cross axis otherwise — and resolves it to fixed-position coordinates.\nconst getAdjustment = (\n position: TooltipPosition,\n anchor: DOMRect,\n contentWidth: number,\n contentHeight: number,\n): Adjustment => {\n const viewportWidth = document.documentElement.clientWidth\n const viewportHeight = document.documentElement.clientHeight\n\n const spaceTop = anchor.top - VIEWPORT_MARGIN\n const spaceBottom = viewportHeight - anchor.bottom - VIEWPORT_MARGIN\n const spaceLeft = anchor.left - VIEWPORT_MARGIN\n const spaceRight = viewportWidth - anchor.right - VIEWPORT_MARGIN\n\n let [main, corner] = position.split('-') as [string, string | undefined]\n const fitGap = corner ? 0 : FIT_BUFFER\n\n // Side positions: flip to the other side, or fall back to a vertical\n // position when the content doesn't fit horizontally on either side.\n if (main === 'left' || main === 'right') {\n const needed = contentWidth + fitGap\n if (needed > spaceLeft && needed > spaceRight) {\n main = spaceBottom >= spaceTop ? 'bottom' : 'top'\n } else if (main === 'right' && needed > spaceRight) {\n main = 'left'\n } else if (main === 'left' && needed > spaceLeft) {\n main = 'right'\n }\n }\n\n // Vertical positions: flip when the content doesn't fit and there is more room on the other side.\n if (main === 'top' || main === 'bottom') {\n const space = main === 'top' ? spaceTop : spaceBottom\n const opposite = main === 'top' ? spaceBottom : spaceTop\n if (contentHeight + fitGap > space && opposite > space) {\n main = main === 'top' ? 'bottom' : 'top'\n }\n }\n\n // A corner's cut-off edge has to meet the anchor, and sliding breaks that\n // join — so mirror to the other side first and only slide as a last resort.\n if (corner) {\n const space = corner === 'left' ? spaceLeft : spaceRight\n const opposite = corner === 'left' ? spaceRight : spaceLeft\n if (contentWidth > space && opposite > space) {\n corner = corner === 'left' ? 'right' : 'left'\n }\n }\n\n const resolvedPosition = (\n corner ? `${main}-${corner}` : main\n ) as TooltipPosition\n\n let left: number\n let top: number\n\n if (main === 'left' || main === 'right') {\n const idealTop = anchor.top + anchor.height / 2 - contentHeight / 2\n top = clampValue(\n idealTop,\n VIEWPORT_MARGIN,\n viewportHeight - VIEWPORT_MARGIN - contentHeight,\n )\n left =\n main === 'right'\n ? anchor.right + MAIN_GAP\n : anchor.left - MAIN_GAP - contentWidth\n } else {\n const idealLeft = !corner\n ? anchor.left + anchor.width / 2 - contentWidth / 2\n : corner === 'left'\n ? anchor.left - contentWidth - CORNER_GAP\n : anchor.right + CORNER_GAP\n left = clampValue(\n idealLeft,\n VIEWPORT_MARGIN,\n viewportWidth - VIEWPORT_MARGIN - contentWidth,\n )\n const gap = corner ? CORNER_GAP : MAIN_GAP\n top =\n main === 'top' ? anchor.top - gap - contentHeight : anchor.bottom + gap\n }\n\n return { position: resolvedPosition, left, top }\n}\n\n// Rendered into document.body so a clipping ancestor (overflow: clip/hidden, or a\n// transform/filter/backdrop-filter that would otherwise capture position: fixed)\n// can't cut the bubble off — it sits outside that ancestor's DOM subtree entirely.\nexport const Tooltip = ({\n content,\n position = 'top',\n width = 320,\n className,\n children,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n dataTestId,\n ...rest\n}: TooltipProps) => {\n const anchorRef = useRef<HTMLSpanElement>(null)\n const contentRef = useRef<HTMLSpanElement>(null)\n const [open, setOpen] = useState(false)\n const tooltipId = useId()\n\n const updatePosition = useCallback(() => {\n const anchor = anchorRef.current\n const contentEl = contentRef.current\n if (!anchor || !contentEl) return\n const {\n left,\n top,\n position: resolved,\n } = getAdjustment(\n position,\n anchor.getBoundingClientRect(),\n contentEl.offsetWidth,\n contentEl.offsetHeight,\n )\n contentEl.style.left = `${left}px`\n contentEl.style.top = `${top}px`\n contentEl.dataset.position = resolved\n contentEl.dataset.placed = 'true'\n }, [position])\n\n useLayoutEffect(() => {\n if (!open) return\n updatePosition()\n window.addEventListener('scroll', updatePosition, true)\n window.addEventListener('resize', updatePosition)\n return () => {\n window.removeEventListener('scroll', updatePosition, true)\n window.removeEventListener('resize', updatePosition)\n }\n }, [open, updatePosition])\n\n // A hover-opened tooltip has no focus to catch the key, so Escape is heard document-wide.\n useEffect(() => {\n if (!open) return\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') setOpen(false)\n }\n document.addEventListener('keydown', handleKeyDown)\n return () => document.removeEventListener('keydown', handleKeyDown)\n }, [open])\n\n const handleMouseEnter = (event: MouseEvent<HTMLSpanElement>) => {\n onMouseEnter?.(event)\n setOpen(true)\n }\n\n const handleMouseLeave = (event: MouseEvent<HTMLSpanElement>) => {\n onMouseLeave?.(event)\n setOpen(false)\n }\n\n const handleFocus = (event: FocusEvent<HTMLSpanElement>) => {\n onFocus?.(event)\n setOpen(true)\n }\n\n const handleBlur = (event: FocusEvent<HTMLSpanElement>) => {\n onBlur?.(event)\n setOpen(false)\n }\n\n return (\n <span\n ref={anchorRef}\n className={cn(styles.wrapper, className)}\n aria-describedby={open ? tooltipId : undefined}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocus={handleFocus}\n onBlur={handleBlur}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {children}\n {open\n ? createPortal(\n <span\n ref={contentRef}\n id={tooltipId}\n role='tooltip'\n className={styles.content}\n style={\n { '--local-tooltip-width': getMaxWidth(width) } as CSSProperties\n }\n data-testid={dataTestId?.content}\n >\n {content}\n </span>,\n document.body,\n )\n : null}\n </span>\n )\n}\n\nTooltip.displayName = 'Tooltip'\n"],"names":["VIEWPORT_MARGIN","MAIN_GAP","CORNER_GAP","FIT_BUFFER","clampValue","value","min","max","Math","getMaxWidth","width","getAdjustment","position","anchor","contentWidth","contentHeight","viewportWidth","document","documentElement","clientWidth","viewportHeight","clientHeight","spaceTop","top","spaceBottom","bottom","spaceLeft","left","spaceRight","right","main","corner","split","fitGap","needed","space","opposite","resolvedPosition","idealTop","height","idealLeft","gap","Tooltip","_ref","content","className","children","onMouseEnter","onMouseLeave","onFocus","onBlur","dataTestId","rest","anchorRef","useRef","contentRef","open","setOpen","useState","tooltipId","useId","updatePosition","useCallback","current","contentEl","resolved","getBoundingClientRect","offsetWidth","offsetHeight","style","dataset","placed","useLayoutEffect","window","addEventListener","removeEventListener","useEffect","handleKeyDown","event","key","handleMouseEnter","handleMouseLeave","handleFocus","handleBlur","_jsxs","ref","cn","styles","wrapper","undefined","root","createPortal","_jsx","id","role","body","displayName"],"mappings":"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"}
1
+ {"version":3,"file":"Tooltip.cjs","sources":["../../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type FocusEvent,\n type MouseEvent,\n type ReactNode,\n} from 'react'\nimport { createPortal } from 'react-dom'\n\nimport cn from 'classnames'\n\nimport { useIsomorphicLayoutEffect } from '../hooks'\nimport styles from './Tooltip.module.css'\n\nexport type TooltipPosition =\n | 'top'\n | 'right'\n | 'bottom'\n | 'left'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n\nexport type TooltipDataTestId = {\n root?: string\n content?: string\n}\n\nexport type TooltipProps = Omit<ComponentPropsWithoutRef<'span'>, 'content'> & {\n content: ReactNode\n position?: TooltipPosition\n width?: number\n dataTestId?: TooltipDataTestId\n}\n\n// Minimal distance between the tooltip and the viewport edge.\nconst VIEWPORT_MARGIN = 16\n// Visual gap between the anchor and the content.\nconst MAIN_GAP = 8\nconst CORNER_GAP = 2\n// Extra buffer used only to decide whether a position still \"fits\" — bigger\n// than the visual gap so a flip triggers before the bubble visually crowds the edge.\nconst FIT_BUFFER = 15\n\ntype Adjustment = {\n position: TooltipPosition\n left: number\n top: number\n}\n\nconst clampValue = (value: number, min: number, max: number) =>\n Math.min(Math.max(value, min), Math.max(max, min))\n\nconst getMaxWidth = (width: number) =>\n `min(${width}px, calc(100vw - ${VIEWPORT_MARGIN * 2}px))`\n\n// Measures the anchor and the content, then picks a position that keeps the\n// bubble inside the viewport — flipping sides when there isn't room, sliding\n// along the cross axis otherwise — and resolves it to fixed-position coordinates.\nconst getAdjustment = (\n position: TooltipPosition,\n anchor: DOMRect,\n contentWidth: number,\n contentHeight: number,\n): Adjustment => {\n const viewportWidth = document.documentElement.clientWidth\n const viewportHeight = document.documentElement.clientHeight\n\n const spaceTop = anchor.top - VIEWPORT_MARGIN\n const spaceBottom = viewportHeight - anchor.bottom - VIEWPORT_MARGIN\n const spaceLeft = anchor.left - VIEWPORT_MARGIN\n const spaceRight = viewportWidth - anchor.right - VIEWPORT_MARGIN\n\n let [main, corner] = position.split('-') as [string, string | undefined]\n const fitGap = corner ? 0 : FIT_BUFFER\n\n // Side positions: flip to the other side, or fall back to a vertical\n // position when the content doesn't fit horizontally on either side.\n if (main === 'left' || main === 'right') {\n const needed = contentWidth + fitGap\n if (needed > spaceLeft && needed > spaceRight) {\n main = spaceBottom >= spaceTop ? 'bottom' : 'top'\n } else if (main === 'right' && needed > spaceRight) {\n main = 'left'\n } else if (main === 'left' && needed > spaceLeft) {\n main = 'right'\n }\n }\n\n // Vertical positions: flip when the content doesn't fit and there is more room on the other side.\n if (main === 'top' || main === 'bottom') {\n const space = main === 'top' ? spaceTop : spaceBottom\n const opposite = main === 'top' ? spaceBottom : spaceTop\n if (contentHeight + fitGap > space && opposite > space) {\n main = main === 'top' ? 'bottom' : 'top'\n }\n }\n\n // A corner's cut-off edge has to meet the anchor, and sliding breaks that\n // join — so mirror to the other side first and only slide as a last resort.\n if (corner) {\n const space = corner === 'left' ? spaceLeft : spaceRight\n const opposite = corner === 'left' ? spaceRight : spaceLeft\n if (contentWidth > space && opposite > space) {\n corner = corner === 'left' ? 'right' : 'left'\n }\n }\n\n const resolvedPosition = (\n corner ? `${main}-${corner}` : main\n ) as TooltipPosition\n\n let left: number\n let top: number\n\n if (main === 'left' || main === 'right') {\n const idealTop = anchor.top + anchor.height / 2 - contentHeight / 2\n top = clampValue(\n idealTop,\n VIEWPORT_MARGIN,\n viewportHeight - VIEWPORT_MARGIN - contentHeight,\n )\n left =\n main === 'right'\n ? anchor.right + MAIN_GAP\n : anchor.left - MAIN_GAP - contentWidth\n } else {\n const idealLeft = !corner\n ? anchor.left + anchor.width / 2 - contentWidth / 2\n : corner === 'left'\n ? anchor.left - contentWidth - CORNER_GAP\n : anchor.right + CORNER_GAP\n left = clampValue(\n idealLeft,\n VIEWPORT_MARGIN,\n viewportWidth - VIEWPORT_MARGIN - contentWidth,\n )\n const gap = corner ? CORNER_GAP : MAIN_GAP\n top =\n main === 'top' ? anchor.top - gap - contentHeight : anchor.bottom + gap\n }\n\n return { position: resolvedPosition, left, top }\n}\n\n// Rendered into document.body so a clipping ancestor (overflow: clip/hidden, or a\n// transform/filter/backdrop-filter that would otherwise capture position: fixed)\n// can't cut the bubble off — it sits outside that ancestor's DOM subtree entirely.\nexport const Tooltip = ({\n content,\n position = 'top',\n width = 320,\n className,\n children,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n dataTestId,\n ...rest\n}: TooltipProps) => {\n const anchorRef = useRef<HTMLSpanElement>(null)\n const contentRef = useRef<HTMLSpanElement>(null)\n const [open, setOpen] = useState(false)\n const tooltipId = useId()\n\n const updatePosition = useCallback(() => {\n const anchor = anchorRef.current\n const contentEl = contentRef.current\n if (!anchor || !contentEl) return\n const {\n left,\n top,\n position: resolved,\n } = getAdjustment(\n position,\n anchor.getBoundingClientRect(),\n contentEl.offsetWidth,\n contentEl.offsetHeight,\n )\n contentEl.style.left = `${left}px`\n contentEl.style.top = `${top}px`\n contentEl.dataset.position = resolved\n contentEl.dataset.placed = 'true'\n }, [position])\n\n useIsomorphicLayoutEffect(() => {\n if (!open) return\n updatePosition()\n window.addEventListener('scroll', updatePosition, true)\n window.addEventListener('resize', updatePosition)\n return () => {\n window.removeEventListener('scroll', updatePosition, true)\n window.removeEventListener('resize', updatePosition)\n }\n }, [open, updatePosition])\n\n // A hover-opened tooltip has no focus to catch the key, so Escape is heard document-wide.\n useEffect(() => {\n if (!open) return\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') setOpen(false)\n }\n document.addEventListener('keydown', handleKeyDown)\n return () => document.removeEventListener('keydown', handleKeyDown)\n }, [open])\n\n const handleMouseEnter = (event: MouseEvent<HTMLSpanElement>) => {\n onMouseEnter?.(event)\n setOpen(true)\n }\n\n const handleMouseLeave = (event: MouseEvent<HTMLSpanElement>) => {\n onMouseLeave?.(event)\n setOpen(false)\n }\n\n const handleFocus = (event: FocusEvent<HTMLSpanElement>) => {\n onFocus?.(event)\n setOpen(true)\n }\n\n const handleBlur = (event: FocusEvent<HTMLSpanElement>) => {\n onBlur?.(event)\n setOpen(false)\n }\n\n return (\n <span\n ref={anchorRef}\n className={cn(styles.wrapper, className)}\n aria-describedby={open ? tooltipId : undefined}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocus={handleFocus}\n onBlur={handleBlur}\n data-testid={dataTestId?.root}\n {...rest}\n >\n {children}\n {open\n ? createPortal(\n <span\n ref={contentRef}\n id={tooltipId}\n role='tooltip'\n className={styles.content}\n style={\n { '--local-tooltip-width': getMaxWidth(width) } as CSSProperties\n }\n data-testid={dataTestId?.content}\n >\n {content}\n </span>,\n document.body,\n )\n : null}\n </span>\n )\n}\n\nTooltip.displayName = 'Tooltip'\n"],"names":["VIEWPORT_MARGIN","MAIN_GAP","CORNER_GAP","FIT_BUFFER","clampValue","value","min","max","Math","getMaxWidth","width","getAdjustment","position","anchor","contentWidth","contentHeight","viewportWidth","document","documentElement","clientWidth","viewportHeight","clientHeight","spaceTop","top","spaceBottom","bottom","spaceLeft","left","spaceRight","right","main","corner","split","fitGap","needed","space","opposite","resolvedPosition","idealTop","height","idealLeft","gap","Tooltip","_ref","content","className","children","onMouseEnter","onMouseLeave","onFocus","onBlur","dataTestId","rest","anchorRef","useRef","contentRef","open","setOpen","useState","tooltipId","useId","updatePosition","useCallback","current","contentEl","resolved","getBoundingClientRect","offsetWidth","offsetHeight","style","dataset","placed","useIsomorphicLayoutEffect","window","addEventListener","removeEventListener","useEffect","handleKeyDown","event","key","handleMouseEnter","handleMouseLeave","handleFocus","handleBlur","_jsxs","ref","cn","styles","wrapper","undefined","root","createPortal","_jsx","id","role","body","displayName"],"mappings":"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"}
@@ -0,0 +1,41 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const react = require('react');
6
+ const Anchor = require('../link-provider/Anchor.cjs');
7
+ const jsxRuntime = require('react/jsx-runtime');
8
+
9
+ /** Renders `<a>` when `href` is set, otherwise `<button type='button'>`. */
10
+ const ActionElement = /*#__PURE__*/react.forwardRef((props, ref) => {
11
+ if (props.href !== undefined) {
12
+ const {
13
+ href,
14
+ disabled,
15
+ onClick,
16
+ tabIndex,
17
+ ...rest
18
+ } = props;
19
+ return /*#__PURE__*/jsxRuntime.jsx(Anchor.Anchor, {
20
+ ref: ref,
21
+ ...rest,
22
+ href: disabled ? undefined : href,
23
+ "aria-disabled": disabled ? 'true' : rest['aria-disabled'],
24
+ tabIndex: disabled ? -1 : tabIndex,
25
+ onClick: disabled ? undefined : onClick
26
+ });
27
+ }
28
+ const {
29
+ type = 'button',
30
+ ...rest
31
+ } = props;
32
+ return /*#__PURE__*/jsxRuntime.jsx("button", {
33
+ ref: ref,
34
+ type: type,
35
+ ...rest
36
+ });
37
+ });
38
+ ActionElement.displayName = 'ActionElement';
39
+
40
+ exports.ActionElement = ActionElement;
41
+ //# sourceMappingURL=ActionElement.cjs.map