@zyncat/ui 0.8.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 (334) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +133 -0
  3. package/dist/alert.css +132 -0
  4. package/dist/alert.d.ts +46 -0
  5. package/dist/alert.js +80 -0
  6. package/dist/alert.js.map +1 -0
  7. package/dist/avatar-group.d.ts +24 -0
  8. package/dist/avatar-group.js +23 -0
  9. package/dist/avatar-group.js.map +1 -0
  10. package/dist/avatar.css +200 -0
  11. package/dist/avatar.d.ts +35 -0
  12. package/dist/avatar.js +67 -0
  13. package/dist/avatar.js.map +1 -0
  14. package/dist/badge.css +182 -0
  15. package/dist/badge.d.ts +34 -0
  16. package/dist/badge.js +4 -0
  17. package/dist/badge.js.map +1 -0
  18. package/dist/button.css +269 -0
  19. package/dist/button.d.ts +44 -0
  20. package/dist/button.js +4 -0
  21. package/dist/button.js.map +1 -0
  22. package/dist/checkbox.css +177 -0
  23. package/dist/checkbox.d.ts +35 -0
  24. package/dist/checkbox.js +5 -0
  25. package/dist/checkbox.js.map +1 -0
  26. package/dist/chunk-2ERBBFZS.js +12 -0
  27. package/dist/chunk-2ERBBFZS.js.map +1 -0
  28. package/dist/chunk-2HORSLXJ.js +191 -0
  29. package/dist/chunk-2HORSLXJ.js.map +1 -0
  30. package/dist/chunk-36WVAQKL.js +40 -0
  31. package/dist/chunk-36WVAQKL.js.map +1 -0
  32. package/dist/chunk-3SBCBYB7.js +575 -0
  33. package/dist/chunk-3SBCBYB7.js.map +1 -0
  34. package/dist/chunk-4R2GQO43.js +125 -0
  35. package/dist/chunk-4R2GQO43.js.map +1 -0
  36. package/dist/chunk-64UU4LGU.js +258 -0
  37. package/dist/chunk-64UU4LGU.js.map +1 -0
  38. package/dist/chunk-7SZCJ7WI.js +35 -0
  39. package/dist/chunk-7SZCJ7WI.js.map +1 -0
  40. package/dist/chunk-BIDVNLJO.js +38 -0
  41. package/dist/chunk-BIDVNLJO.js.map +1 -0
  42. package/dist/chunk-CONSWNIV.js +17 -0
  43. package/dist/chunk-CONSWNIV.js.map +1 -0
  44. package/dist/chunk-EQ32F2QJ.js +75 -0
  45. package/dist/chunk-EQ32F2QJ.js.map +1 -0
  46. package/dist/chunk-GY7JOPUQ.js +111 -0
  47. package/dist/chunk-GY7JOPUQ.js.map +1 -0
  48. package/dist/chunk-I4XQ4PV2.js +30 -0
  49. package/dist/chunk-I4XQ4PV2.js.map +1 -0
  50. package/dist/chunk-JSKXZMLH.js +67 -0
  51. package/dist/chunk-JSKXZMLH.js.map +1 -0
  52. package/dist/chunk-L3Q3VDIW.js +295 -0
  53. package/dist/chunk-L3Q3VDIW.js.map +1 -0
  54. package/dist/chunk-LDC3RIYA.js +62 -0
  55. package/dist/chunk-LDC3RIYA.js.map +1 -0
  56. package/dist/chunk-MKIQFK7S.js +43 -0
  57. package/dist/chunk-MKIQFK7S.js.map +1 -0
  58. package/dist/chunk-MMRIQNEN.js +20 -0
  59. package/dist/chunk-MMRIQNEN.js.map +1 -0
  60. package/dist/chunk-MXOPCFWR.js +59 -0
  61. package/dist/chunk-MXOPCFWR.js.map +1 -0
  62. package/dist/chunk-NEF5XAHG.js +17 -0
  63. package/dist/chunk-NEF5XAHG.js.map +1 -0
  64. package/dist/chunk-NNXJCLTV.js +22 -0
  65. package/dist/chunk-NNXJCLTV.js.map +1 -0
  66. package/dist/chunk-O4N2OBTR.js +94 -0
  67. package/dist/chunk-O4N2OBTR.js.map +1 -0
  68. package/dist/chunk-PMECHR3A.js +38 -0
  69. package/dist/chunk-PMECHR3A.js.map +1 -0
  70. package/dist/chunk-QDK66S4G.js +44 -0
  71. package/dist/chunk-QDK66S4G.js.map +1 -0
  72. package/dist/chunk-QGNC7LH5.js +8 -0
  73. package/dist/chunk-QGNC7LH5.js.map +1 -0
  74. package/dist/chunk-QMSJZCK3.js +398 -0
  75. package/dist/chunk-QMSJZCK3.js.map +1 -0
  76. package/dist/chunk-S5ZTZANS.js +57 -0
  77. package/dist/chunk-S5ZTZANS.js.map +1 -0
  78. package/dist/chunk-S7B34VGN.js +14 -0
  79. package/dist/chunk-S7B34VGN.js.map +1 -0
  80. package/dist/chunk-TCUCYFT7.js +25 -0
  81. package/dist/chunk-TCUCYFT7.js.map +1 -0
  82. package/dist/chunk-TYHR4VNM.js +193 -0
  83. package/dist/chunk-TYHR4VNM.js.map +1 -0
  84. package/dist/chunk-U5QQZC3U.js +56 -0
  85. package/dist/chunk-U5QQZC3U.js.map +1 -0
  86. package/dist/chunk-UE63OOVG.js +13 -0
  87. package/dist/chunk-UE63OOVG.js.map +1 -0
  88. package/dist/chunk-VTJTGVZZ.js +22 -0
  89. package/dist/chunk-VTJTGVZZ.js.map +1 -0
  90. package/dist/chunk-W3SHPKSB.js +49 -0
  91. package/dist/chunk-W3SHPKSB.js.map +1 -0
  92. package/dist/chunk-XZAEIQDR.js +188 -0
  93. package/dist/chunk-XZAEIQDR.js.map +1 -0
  94. package/dist/chunk-YGGCQNNU.js +92 -0
  95. package/dist/chunk-YGGCQNNU.js.map +1 -0
  96. package/dist/collapse.css +88 -0
  97. package/dist/collapse.d.ts +46 -0
  98. package/dist/collapse.js +5 -0
  99. package/dist/collapse.js.map +1 -0
  100. package/dist/count-badge.d.ts +13 -0
  101. package/dist/count-badge.js +13 -0
  102. package/dist/count-badge.js.map +1 -0
  103. package/dist/date-field.d.ts +25 -0
  104. package/dist/date-field.js +87 -0
  105. package/dist/date-field.js.map +1 -0
  106. package/dist/date-picker.css +595 -0
  107. package/dist/date-range-field.d.ts +33 -0
  108. package/dist/date-range-field.js +404 -0
  109. package/dist/date-range-field.js.map +1 -0
  110. package/dist/datetime-field.d.ts +29 -0
  111. package/dist/datetime-field.js +155 -0
  112. package/dist/datetime-field.js.map +1 -0
  113. package/dist/dialog.css +180 -0
  114. package/dist/dialog.d.ts +42 -0
  115. package/dist/dialog.js +128 -0
  116. package/dist/dialog.js.map +1 -0
  117. package/dist/dom-props-C0jrllBw.d.ts +5 -0
  118. package/dist/field-chrome-CMPOQSLs.d.ts +28 -0
  119. package/dist/field-shell-Cuda-feL.d.ts +24 -0
  120. package/dist/glide.d.ts +15 -0
  121. package/dist/glide.js +5 -0
  122. package/dist/glide.js.map +1 -0
  123. package/dist/icon.css +33 -0
  124. package/dist/input.css +333 -0
  125. package/dist/mcp.js +359 -0
  126. package/dist/motion-devtools.css +265 -0
  127. package/dist/motion-devtools.d.ts +51 -0
  128. package/dist/motion-devtools.js +354 -0
  129. package/dist/motion-devtools.js.map +1 -0
  130. package/dist/motion-scale-Canq4stZ.d.ts +18 -0
  131. package/dist/motion-tokens.d.ts +28 -0
  132. package/dist/motion-tokens.js +3 -0
  133. package/dist/motion-tokens.js.map +1 -0
  134. package/dist/multi-select.d.ts +44 -0
  135. package/dist/multi-select.js +109 -0
  136. package/dist/multi-select.js.map +1 -0
  137. package/dist/number-field.d.ts +36 -0
  138. package/dist/number-field.js +112 -0
  139. package/dist/number-field.js.map +1 -0
  140. package/dist/odometer.css +62 -0
  141. package/dist/otp-field.d.ts +31 -0
  142. package/dist/otp-field.js +98 -0
  143. package/dist/otp-field.js.map +1 -0
  144. package/dist/overlay.css +23 -0
  145. package/dist/pagination.css +43 -0
  146. package/dist/pagination.d.ts +29 -0
  147. package/dist/pagination.js +107 -0
  148. package/dist/pagination.js.map +1 -0
  149. package/dist/popover.css +69 -0
  150. package/dist/popover.d.ts +35 -0
  151. package/dist/popover.js +15 -0
  152. package/dist/popover.js.map +1 -0
  153. package/dist/radio-group.css +300 -0
  154. package/dist/radio-group.d.ts +52 -0
  155. package/dist/radio-group.js +115 -0
  156. package/dist/radio-group.js.map +1 -0
  157. package/dist/select.css +416 -0
  158. package/dist/select.d.ts +49 -0
  159. package/dist/select.js +99 -0
  160. package/dist/select.js.map +1 -0
  161. package/dist/sheet.css +26 -0
  162. package/dist/sheet.d.ts +31 -0
  163. package/dist/sheet.js +14 -0
  164. package/dist/sheet.js.map +1 -0
  165. package/dist/status-badge.d.ts +19 -0
  166. package/dist/status-badge.js +72 -0
  167. package/dist/status-badge.js.map +1 -0
  168. package/dist/table.css +348 -0
  169. package/dist/table.d.ts +75 -0
  170. package/dist/table.js +262 -0
  171. package/dist/table.js.map +1 -0
  172. package/dist/tabs.css +208 -0
  173. package/dist/tabs.d.ts +71 -0
  174. package/dist/tabs.js +181 -0
  175. package/dist/tabs.js.map +1 -0
  176. package/dist/tag.css +248 -0
  177. package/dist/tag.d.ts +52 -0
  178. package/dist/tag.js +72 -0
  179. package/dist/tag.js.map +1 -0
  180. package/dist/text-field.d.ts +28 -0
  181. package/dist/text-field.js +69 -0
  182. package/dist/text-field.js.map +1 -0
  183. package/dist/textarea.css +219 -0
  184. package/dist/textarea.d.ts +38 -0
  185. package/dist/textarea.js +144 -0
  186. package/dist/textarea.js.map +1 -0
  187. package/dist/time-field.d.ts +28 -0
  188. package/dist/time-field.js +66 -0
  189. package/dist/time-field.js.map +1 -0
  190. package/dist/timing-7JA_zQHP.d.ts +27 -0
  191. package/dist/toast-store.d.ts +86 -0
  192. package/dist/toast-store.js +3 -0
  193. package/dist/toast-store.js.map +1 -0
  194. package/dist/toast.css +257 -0
  195. package/dist/toast.d.ts +12 -0
  196. package/dist/toast.js +310 -0
  197. package/dist/toast.js.map +1 -0
  198. package/dist/toggle-tag.d.ts +34 -0
  199. package/dist/toggle-tag.js +57 -0
  200. package/dist/toggle-tag.js.map +1 -0
  201. package/dist/toggle.css +152 -0
  202. package/dist/toggle.d.ts +31 -0
  203. package/dist/toggle.js +75 -0
  204. package/dist/toggle.js.map +1 -0
  205. package/dist/tooltip.css +86 -0
  206. package/dist/tooltip.d.ts +30 -0
  207. package/dist/tooltip.js +268 -0
  208. package/dist/tooltip.js.map +1 -0
  209. package/dist/types-SGMShK7R.d.ts +22 -0
  210. package/llms.txt +196 -0
  211. package/next.d.mts +7 -0
  212. package/next.mjs +59 -0
  213. package/package.json +257 -0
  214. package/src/components/composites/alert/Alert.tsx +141 -0
  215. package/src/components/composites/alert/alert.css +132 -0
  216. package/src/components/composites/date-picker/DateField.tsx +80 -0
  217. package/src/components/composites/date-picker/DateRangeField.tsx +110 -0
  218. package/src/components/composites/date-picker/DateTimeField.tsx +162 -0
  219. package/src/components/composites/date-picker/TimeField.tsx +78 -0
  220. package/src/components/composites/date-picker/calendar-panel.tsx +216 -0
  221. package/src/components/composites/date-picker/date-picker.css +595 -0
  222. package/src/components/composites/date-picker/date-utils.ts +56 -0
  223. package/src/components/composites/date-picker/field-shell.tsx +85 -0
  224. package/src/components/composites/date-picker/range-panel.tsx +363 -0
  225. package/src/components/composites/date-picker/time-core.tsx +290 -0
  226. package/src/components/composites/date-picker/use-day-focus.ts +35 -0
  227. package/src/components/composites/dialog/Dialog.tsx +198 -0
  228. package/src/components/composites/dialog/dialog.css +180 -0
  229. package/src/components/composites/pagination/Pagination.tsx +131 -0
  230. package/src/components/composites/pagination/pagination.css +43 -0
  231. package/src/components/composites/popover/Popover.tsx +141 -0
  232. package/src/components/composites/popover/popover.css +69 -0
  233. package/src/components/composites/select/MultiSelect.tsx +133 -0
  234. package/src/components/composites/select/Select.tsx +122 -0
  235. package/src/components/composites/select/core/index.ts +4 -0
  236. package/src/components/composites/select/core/menu.tsx +100 -0
  237. package/src/components/composites/select/core/panel.tsx +154 -0
  238. package/src/components/composites/select/core/trigger.tsx +74 -0
  239. package/src/components/composites/select/core/types.ts +39 -0
  240. package/src/components/composites/select/core/use-listbox.ts +182 -0
  241. package/src/components/composites/select/select.css +416 -0
  242. package/src/components/composites/sheet/Sheet.tsx +135 -0
  243. package/src/components/composites/sheet/sheet.css +26 -0
  244. package/src/components/composites/sheet/use-sheet-drag.ts +126 -0
  245. package/src/components/composites/table/Table.tsx +377 -0
  246. package/src/components/composites/table/table.css +348 -0
  247. package/src/components/composites/tabs/Tabs.tsx +278 -0
  248. package/src/components/composites/tabs/tabs.css +208 -0
  249. package/src/components/composites/toast/Toast.tsx +380 -0
  250. package/src/components/composites/toast/toast-store.ts +295 -0
  251. package/src/components/composites/toast/toast.css +257 -0
  252. package/src/components/composites/tooltip/Tooltip.tsx +110 -0
  253. package/src/components/composites/tooltip/tooltip-host.tsx +184 -0
  254. package/src/components/composites/tooltip/tooltip-store.ts +81 -0
  255. package/src/components/composites/tooltip/tooltip.css +86 -0
  256. package/src/components/dev/MotionDevtools.tsx +200 -0
  257. package/src/components/dev/motion-devtools.css +265 -0
  258. package/src/components/dev/slowmo-engine.ts +230 -0
  259. package/src/components/internal/glass/glass.css +100 -0
  260. package/src/components/internal/glass/glint.ts +9 -0
  261. package/src/components/internal/hooks/use-controllable.ts +21 -0
  262. package/src/components/internal/hooks/use-scroll-edges.ts +46 -0
  263. package/src/components/internal/icon/Icon.tsx +66 -0
  264. package/src/components/internal/icon/IconSlot.tsx +10 -0
  265. package/src/components/internal/icon/icon.css +33 -0
  266. package/src/components/internal/overlay/focus.ts +68 -0
  267. package/src/components/internal/overlay/layer.tsx +149 -0
  268. package/src/components/internal/overlay/modal.tsx +141 -0
  269. package/src/components/internal/overlay/overlay.css +23 -0
  270. package/src/components/internal/overlay/position.ts +103 -0
  271. package/src/components/internal/utils/cx.ts +3 -0
  272. package/src/components/internal/utils/token-px.ts +8 -0
  273. package/src/components/primitives/avatar/Avatar.tsx +120 -0
  274. package/src/components/primitives/avatar/AvatarGroup.tsx +56 -0
  275. package/src/components/primitives/avatar/avatar.css +200 -0
  276. package/src/components/primitives/badge/Badge.tsx +75 -0
  277. package/src/components/primitives/badge/CountBadge.tsx +20 -0
  278. package/src/components/primitives/badge/StatusBadge.tsx +111 -0
  279. package/src/components/primitives/badge/badge.css +182 -0
  280. package/src/components/primitives/badge/odometer.css +62 -0
  281. package/src/components/primitives/badge/odometer.tsx +36 -0
  282. package/src/components/primitives/button/Button.tsx +102 -0
  283. package/src/components/primitives/button/button.css +269 -0
  284. package/src/components/primitives/checkbox/Checkbox.tsx +76 -0
  285. package/src/components/primitives/checkbox/check-glyph.tsx +28 -0
  286. package/src/components/primitives/checkbox/checkbox.css +177 -0
  287. package/src/components/primitives/collapse/Collapse.tsx +86 -0
  288. package/src/components/primitives/collapse/collapse.css +88 -0
  289. package/src/components/primitives/collapse/collapse.typecheck.tsx +29 -0
  290. package/src/components/primitives/input/NumberField.tsx +139 -0
  291. package/src/components/primitives/input/OtpField.tsx +134 -0
  292. package/src/components/primitives/input/TextField.tsx +110 -0
  293. package/src/components/primitives/input/field-chrome.tsx +83 -0
  294. package/src/components/primitives/input/input.css +333 -0
  295. package/src/components/primitives/radio-group/RadioGroup.tsx +183 -0
  296. package/src/components/primitives/radio-group/radio-group.css +300 -0
  297. package/src/components/primitives/tag/Tag.tsx +143 -0
  298. package/src/components/primitives/tag/ToggleTag.tsx +97 -0
  299. package/src/components/primitives/tag/tag.css +248 -0
  300. package/src/components/primitives/textarea/Textarea.tsx +190 -0
  301. package/src/components/primitives/textarea/textarea.css +219 -0
  302. package/src/components/primitives/toggle/Toggle.tsx +105 -0
  303. package/src/components/primitives/toggle/toggle.css +152 -0
  304. package/src/css.d.ts +1 -0
  305. package/src/dom-props.ts +1 -0
  306. package/src/engine/animate.ts +141 -0
  307. package/src/engine/drag.ts +53 -0
  308. package/src/engine/ease.ts +155 -0
  309. package/src/engine/flip.ts +59 -0
  310. package/src/engine/index.ts +13 -0
  311. package/src/mcp/server.ts +420 -0
  312. package/src/motion/element.tsx +53 -0
  313. package/src/motion/flip.tsx +87 -0
  314. package/src/motion/glide.tsx +47 -0
  315. package/src/motion/motion-timing.ts +33 -0
  316. package/src/motion/presence-context.ts +18 -0
  317. package/src/motion/presence.tsx +91 -0
  318. package/src/motion/timing.ts +49 -0
  319. package/src/motion/use-motion.ts +64 -0
  320. package/src/styles.css +26 -0
  321. package/src/tokens/avatar.css +20 -0
  322. package/src/tokens/color.css +58 -0
  323. package/src/tokens/elevation.css +22 -0
  324. package/src/tokens/fonts.css +3 -0
  325. package/src/tokens/glass.css +20 -0
  326. package/src/tokens/icons.css +7 -0
  327. package/src/tokens/layers.css +6 -0
  328. package/src/tokens/motion-scale.ts +17 -0
  329. package/src/tokens/motion-tokens.ts +92 -0
  330. package/src/tokens/motion.css +49 -0
  331. package/src/tokens/radius.css +11 -0
  332. package/src/tokens/semantic.css +65 -0
  333. package/src/tokens/spacing.css +26 -0
  334. package/src/tokens/typography.css +52 -0
package/src/components/composites/tooltip/tooltip-host.tsx ADDED
@@ -0,0 +1,184 @@
1
+ 'use client';
2
+
3
+ import { Fragment, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
4
+ import { createPortal } from 'react-dom';
5
+ import { animate } from '../../../engine';
6
+ import { Presence } from '../../../motion/presence';
7
+ import { useMotion, type MotionSpecs } from '../../../motion/use-motion';
8
+ import { UIMotion } from '../../../tokens/motion-tokens';
9
+ import { tokenPx } from '../../internal/utils/token-px';
10
+ import { store, TOOLTIP_DOM_ID, type ActivePayload, type Placement } from './tooltip-store';
11
+
12
+ const SM = UIMotion;
13
+
14
+ interface Size {
15
+ w: number;
16
+ h: number;
17
+ }
18
+ interface TargetBox extends Size {
19
+ x: number;
20
+ y: number;
21
+ placement: Placement;
22
+ }
23
+ interface RenderedBox extends TargetBox {
24
+ bodyW: number;
25
+ }
26
+
27
+ function targetBox(size: Size, t: DOMRect, want: Placement): TargetBox {
28
+ const vw = window.innerWidth,
29
+ vh = window.innerHeight,
30
+ TIP_GAP = tokenPx('--space-2', 8) || 8,
31
+ M = TIP_GAP;
32
+ let p = want;
33
+ if (p === 'top' && t.top - size.h - TIP_GAP < M) p = 'bottom';
34
+ else if (p === 'bottom' && t.bottom + size.h + TIP_GAP > vh - M) p = 'top';
35
+ else if (p === 'left' && t.left - size.w - TIP_GAP < M) p = 'right';
36
+ else if (p === 'right' && t.right + size.w + TIP_GAP > vw - M) p = 'left';
37
+ let x, y;
38
+ if (p === 'top') {
39
+ x = t.left + t.width / 2 - size.w / 2;
40
+ y = t.top - size.h - TIP_GAP;
41
+ } else if (p === 'bottom') {
42
+ x = t.left + t.width / 2 - size.w / 2;
43
+ y = t.bottom + TIP_GAP;
44
+ } else if (p === 'left') {
45
+ x = t.left - size.w - TIP_GAP;
46
+ y = t.top + t.height / 2 - size.h / 2;
47
+ } else {
48
+ x = t.right + TIP_GAP;
49
+ y = t.top + t.height / 2 - size.h / 2;
50
+ }
51
+ return {
52
+ x: Math.round(Math.min(Math.max(x, M), vw - size.w - M)),
53
+ y: Math.round(Math.min(Math.max(y, M), vh - size.h - M)),
54
+ w: size.w,
55
+ h: size.h,
56
+ placement: p,
57
+ };
58
+ }
59
+
60
+ const fromEdge = (p: Placement) => ({
61
+ x: p === 'left' ? 4 : p === 'right' ? -4 : 0,
62
+ y: p === 'top' ? 4 : p === 'bottom' ? -4 : 0,
63
+ });
64
+
65
+ function Body({ a, width }: { a: ActivePayload; width?: number }) {
66
+ return (
67
+ <span className="tooltip__body" style={width ? { width } : undefined}>
68
+ {a.shortcut ? (
69
+ <span className="tooltip__row">
70
+ <span>{a.content}</span>
71
+ <kbd className="tooltip__shortcut">{a.shortcut}</kbd>
72
+ </span>
73
+ ) : (
74
+ a.content
75
+ )}
76
+ </span>
77
+ );
78
+ }
79
+
80
+ function TipSurface({ a, box, animate: animateSpec, exit }: { a: ActivePayload; box: RenderedBox } & MotionSpecs) {
81
+ const ref = useRef<HTMLDivElement>(null);
82
+ const bodyRef = useRef<HTMLSpanElement>(null);
83
+ const settled = useRef(false);
84
+ useMotion(ref, { animate: animateSpec, exit });
85
+
86
+ useLayoutEffect(() => {
87
+ const el = ref.current;
88
+ if (!el) return;
89
+ if (!settled.current) {
90
+ settled.current = true;
91
+ return;
92
+ }
93
+ animate(el, { x: [box.x], y: [box.y], width: [box.w], height: [box.h], timing: SM.t.layout });
94
+ }, [box.x, box.y, box.w, box.h]);
95
+
96
+ useLayoutEffect(() => {
97
+ if (bodyRef.current) animate(bodyRef.current, { opacity: [0, 1], timing: SM.t.enter });
98
+ }, [a.id]);
99
+
100
+ return (
101
+ <div ref={ref} className="tooltip" id={TOOLTIP_DOM_ID} role="tooltip" data-placement={box.placement}>
102
+ <span ref={bodyRef}>
103
+ <Body a={a} width={box.bodyW} />
104
+ </span>
105
+ </div>
106
+ );
107
+ }
108
+
109
+ export function TooltipHost() {
110
+ const active = useSyncExternalStore(store.subscribe, store.get);
111
+ const measureRef = useRef<HTMLDivElement>(null);
112
+ const [box, setBox] = useState<RenderedBox | null>(null);
113
+
114
+ useLayoutEffect(() => {
115
+ if (!active) {
116
+ setBox(null);
117
+ return;
118
+ }
119
+ const r = measureRef.current.getBoundingClientRect();
120
+ const b = (measureRef.current.firstChild as HTMLElement).getBoundingClientRect();
121
+ setBox({
122
+ ...targetBox({ w: Math.ceil(r.width), h: Math.ceil(r.height) }, active.rect(), active.placement),
123
+ bodyW: Math.ceil(b.width),
124
+ });
125
+ }, [active]);
126
+
127
+ useEffect(() => {
128
+ if (!active) return undefined;
129
+ const onKey = (e: KeyboardEvent) => {
130
+ if (e.key === 'Escape') store.closeNow();
131
+ };
132
+ const onScroll = () => store.closeNow();
133
+ document.addEventListener('keydown', onKey);
134
+ window.addEventListener('scroll', onScroll, true);
135
+ return () => {
136
+ document.removeEventListener('keydown', onKey);
137
+ window.removeEventListener('scroll', onScroll, true);
138
+ };
139
+ }, [active]);
140
+
141
+ const shown = useRef<{ box: RenderedBox; off: { x: number; y: number } } | null>(null);
142
+ if (box) shown.current = { box, off: fromEdge(box.placement) };
143
+
144
+ return createPortal(
145
+ <Fragment>
146
+ {active && (
147
+ <div className="tooltip tooltip--measure" ref={measureRef} aria-hidden="true">
148
+ <Body a={active} />
149
+ </div>
150
+ )}
151
+ <Presence>
152
+ {active && box && (
153
+ <TipSurface
154
+ key="tip"
155
+ a={active}
156
+ box={box}
157
+ animate={(el) => {
158
+ const at = shown.current;
159
+ if (!at) return null;
160
+ return animate(
161
+ el,
162
+ { width: [at.box.w], height: [at.box.h], timing: { duration: 0 } },
163
+ { x: [at.box.x + at.off.x, at.box.x], y: [at.box.y + at.off.y, at.box.y], timing: SM.t.layout },
164
+ { opacity: [0, 1], scale: [0.96, 1], timing: SM.t.enter },
165
+ );
166
+ }}
167
+ exit={(el) => {
168
+ const at = shown.current;
169
+ if (!at) return null;
170
+ return animate(el, {
171
+ x: [at.box.x + at.off.x],
172
+ y: [at.box.y + at.off.y],
173
+ opacity: [0],
174
+ scale: [0.96],
175
+ timing: SM.t.exit,
176
+ });
177
+ }}
178
+ />
179
+ )}
180
+ </Presence>
181
+ </Fragment>,
182
+ document.body,
183
+ );
184
+ }
package/src/components/composites/tooltip/tooltip-store.ts ADDED
@@ -0,0 +1,81 @@
1
+ 'use client';
2
+
3
+ import { useEffect, useRef, useSyncExternalStore, type ReactNode } from 'react';
4
+
5
+ export type Placement = 'top' | 'bottom' | 'left' | 'right';
6
+
7
+ export interface ActivePayload {
8
+ id: string;
9
+ content: ReactNode;
10
+ shortcut?: string | null;
11
+ placement: Placement;
12
+ rect: () => DOMRect;
13
+ }
14
+
15
+ export const OPEN_DELAY = 350;
16
+ export const CLOSE_GRACE = 140;
17
+ export const TOOLTIP_DOM_ID = 'pds-tooltip';
18
+ const WARM_WINDOW = 300;
19
+
20
+ export const store = {
21
+ active: null as ActivePayload | null,
22
+ closeTimer: 0 as ReturnType<typeof setTimeout> | 0,
23
+ warmUntil: 0,
24
+ listeners: new Set<() => void>(),
25
+ get: () => store.active,
26
+ subscribe(l: () => void) {
27
+ store.listeners.add(l);
28
+ return () => store.listeners.delete(l);
29
+ },
30
+ emit() {
31
+ store.listeners.forEach((l) => l());
32
+ },
33
+ isWarm: () => store.active !== null || performance.now() < store.warmUntil,
34
+ open(payload: ActivePayload) {
35
+ clearTimeout(store.closeTimer);
36
+ store.active = payload;
37
+ store.emit();
38
+ },
39
+ close(id: string, grace = CLOSE_GRACE) {
40
+ clearTimeout(store.closeTimer);
41
+ store.closeTimer = setTimeout(() => {
42
+ if (store.active && store.active.id === id) store.closeNow();
43
+ }, grace);
44
+ },
45
+ closeNow() {
46
+ clearTimeout(store.closeTimer);
47
+ if (!store.active) return;
48
+ store.warmUntil = performance.now() + WARM_WINDOW;
49
+ store.active = null;
50
+ store.emit();
51
+ },
52
+ };
53
+
54
+ const hostReg = {
55
+ keys: [] as symbol[],
56
+ listeners: new Set<() => void>(),
57
+ subscribe(l: () => void) {
58
+ hostReg.listeners.add(l);
59
+ return () => hostReg.listeners.delete(l);
60
+ },
61
+ register(k: symbol) {
62
+ hostReg.keys.push(k);
63
+ hostReg.listeners.forEach((l) => l());
64
+ return () => {
65
+ const i = hostReg.keys.indexOf(k);
66
+ if (i >= 0) hostReg.keys.splice(i, 1);
67
+ hostReg.listeners.forEach((l) => l());
68
+ };
69
+ },
70
+ };
71
+
72
+ export function useHostElection(): boolean {
73
+ const keyRef = useRef<symbol | null>(null);
74
+ if (!keyRef.current) keyRef.current = Symbol('tip-host');
75
+ useEffect(() => hostReg.register(keyRef.current!), []);
76
+ return useSyncExternalStore(
77
+ hostReg.subscribe,
78
+ () => hostReg.keys[0] === keyRef.current,
79
+ () => false,
80
+ );
81
+ }
package/src/components/composites/tooltip/tooltip.css ADDED
@@ -0,0 +1,86 @@
1
+ /* tooltip.css - the floating tooltip surface (one shared bubble). */
2
+
3
+ .tooltip {
4
+ position: fixed;
5
+ left: 0;
6
+ top: 0;
7
+ box-sizing: border-box;
8
+ overflow: hidden; /* clips content while the box morphs */
9
+ z-index: var(--layer-tooltip);
10
+ pointer-events: none;
11
+ width: max-content; /* the live bubble gets an animated width; this also sizes the measuring clone */
12
+ padding: var(--space-2) var(--space-3);
13
+ background: var(--bg-surface-raised);
14
+ color: var(--text-body);
15
+ border: var(--border-hairline) solid var(--border-default);
16
+ border-radius: var(--radius-md);
17
+ box-shadow: var(--shadow-lg);
18
+ font: var(--type-caption);
19
+ letter-spacing: var(--tracking-normal);
20
+ }
21
+
22
+ /* the hidden twin the host measures the NEXT box from (same styles, no motion) */
23
+ .tooltip--measure {
24
+ visibility: hidden;
25
+ left: -9999px;
26
+ top: 0;
27
+ }
28
+
29
+ /* default trigger wrapper - display:contents, so it adds no layout; carries the listeners + rect */
30
+ .tooltip-anchor {
31
+ display: contents;
32
+ }
33
+
34
+ /* wraps at the measure cap; the live body also gets its measured width inline (locked wrapping during the morph) */
35
+ .tooltip__body {
36
+ display: block;
37
+ width: max-content;
38
+ max-inline-size: var(--measure-floating);
39
+ text-wrap: pretty;
40
+ }
41
+
42
+ /* grow from the trigger's edge (per placement) */
43
+ .tooltip[data-placement='top'] {
44
+ transform-origin: center bottom;
45
+ }
46
+ .tooltip[data-placement='bottom'] {
47
+ transform-origin: center top;
48
+ }
49
+ .tooltip[data-placement='left'] {
50
+ transform-origin: right center;
51
+ }
52
+ .tooltip[data-placement='right'] {
53
+ transform-origin: left center;
54
+ }
55
+
56
+ .tooltip__row {
57
+ display: flex;
58
+ align-items: baseline;
59
+ gap: var(--space-3);
60
+ }
61
+ .tooltip__shortcut {
62
+ flex: 0 0 auto;
63
+ font-family: var(--font-mono);
64
+ font-size: var(--size-micro);
65
+ font-variant-numeric: tabular-nums;
66
+ color: var(--text-subtle);
67
+ background: var(--bg-muted);
68
+ padding: 0 var(--space-1);
69
+ border-radius: var(--radius-sm);
70
+ white-space: nowrap;
71
+ }
72
+
73
+ /* Multi-line content - rich nodes style themselves with these; keep hierarchy minimal. */
74
+ .tooltip strong {
75
+ font-weight: var(--weight-medium);
76
+ color: var(--text-strong);
77
+ }
78
+ .tooltip p {
79
+ margin: 0;
80
+ }
81
+ .tooltip p + p {
82
+ margin-top: var(--space-1);
83
+ }
84
+ .tooltip .tooltip__muted {
85
+ color: var(--text-muted);
86
+ }
package/src/components/dev/MotionDevtools.tsx ADDED
@@ -0,0 +1,200 @@
1
+ 'use client';
2
+
3
+ import './motion-devtools.css';
4
+ import { useEffect, useState, type CSSProperties } from 'react';
5
+ import { createPortal } from 'react-dom';
6
+ import { Button } from '../primitives/button/Button';
7
+ import { Checkbox } from '../primitives/checkbox/Checkbox';
8
+ import { Collapse } from '../primitives/collapse/Collapse';
9
+ import { motionSlowmo, shouldBeActive, type SlowmoState } from './slowmo-engine';
10
+ import { cx } from '../internal/utils/cx';
11
+
12
+ export type MotionDevtoolsPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
13
+
14
+ export interface MotionDevtoolsProps {
15
+ /** Which corner of the viewport to pin to. @default 'bottom-right' */
16
+ placement?: MotionDevtoolsPlacement;
17
+ /** Distance from the viewport edges, in px. @default 16 */
18
+ offset?: number;
19
+ /** Quick-select slow-down factors (1 = real time). @default [1, 2, 4, 8, 16] */
20
+ presets?: number[];
21
+ /** Upper bound of the fine slider. @default 16 */
22
+ maxFactor?: number;
23
+ /** Slow-down factor to start at. @default 1 */
24
+ defaultFactor?: number;
25
+ /** Scale setTimeout/setInterval too, so duration-coupled JS cleanups don't truncate
26
+ * slowed CSS. Exposed as a live toggle in the panel. @default true */
27
+ scaleTimers?: boolean;
28
+ /** Remember the chosen factor across reloads (localStorage). @default true */
29
+ persist?: boolean;
30
+ /** Start with the full panel open rather than collapsed to its header. @default false */
31
+ defaultOpen?: boolean;
32
+ }
33
+
34
+ const STORAGE_KEY = 'zyncat-ui:motion-devtools';
35
+ const fmt = (n: number) => (Number.isInteger(n) ? String(n) : n.toFixed(1));
36
+
37
+ function GaugeGlyph() {
38
+ return (
39
+ <svg className="mdt__glyph" width="15" height="15" viewBox="0 0 24 24" aria-hidden="true">
40
+ <path
41
+ d="M12 4a8 8 0 0 1 8 8 8 8 0 0 1-.6 3"
42
+ fill="none"
43
+ stroke="currentColor"
44
+ strokeWidth="2"
45
+ strokeLinecap="round"
46
+ />
47
+ <path
48
+ d="M12 4a8 8 0 0 0-8 8 8 8 0 0 0 .6 3"
49
+ fill="none"
50
+ stroke="currentColor"
51
+ strokeWidth="2"
52
+ strokeLinecap="round"
53
+ opacity="0.35"
54
+ />
55
+ <path d="M12 12l4-2.5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
56
+ <circle cx="12" cy="12" r="1.6" fill="currentColor" />
57
+ </svg>
58
+ );
59
+ }
60
+
61
+ export function MotionDevtools({
62
+ placement = 'bottom-right',
63
+ offset = 16,
64
+ presets = [1, 2, 4, 8, 16],
65
+ maxFactor = 16,
66
+ defaultFactor = 1,
67
+ scaleTimers = true,
68
+ persist = true,
69
+ defaultOpen = false,
70
+ }: MotionDevtoolsProps) {
71
+ const [mounted, setMounted] = useState(false);
72
+ const [open, setOpen] = useState(defaultOpen);
73
+ const [snap, setSnap] = useState<SlowmoState>(() => motionSlowmo.get());
74
+ const [timers, setTimers] = useState(scaleTimers);
75
+
76
+ useEffect(() => motionSlowmo.subscribe(setSnap), []);
77
+
78
+ useEffect(() => {
79
+ setMounted(true);
80
+ let initial: Partial<SlowmoState> = { factor: defaultFactor, paused: false };
81
+ if (persist) {
82
+ try {
83
+ const raw = localStorage.getItem(STORAGE_KEY);
84
+ if (raw) initial = { ...initial, ...JSON.parse(raw) };
85
+ } catch {}
86
+ }
87
+ motionSlowmo.set(initial);
88
+ if ((initial.factor ?? 1) > 1 || initial.paused) setOpen(true);
89
+ // eslint-disable-next-line react-hooks/exhaustive-deps
90
+ }, []);
91
+
92
+ useEffect(() => {
93
+ motionSlowmo.configure({ scaleTimers: timers });
94
+ }, [timers]);
95
+
96
+ useEffect(() => {
97
+ if (!persist) return;
98
+ try {
99
+ localStorage.setItem(STORAGE_KEY, JSON.stringify({ factor: snap.factor, paused: snap.paused }));
100
+ } catch {}
101
+ }, [snap.factor, snap.paused, persist]);
102
+
103
+ if (!mounted) return null;
104
+
105
+ const active = shouldBeActive(snap.factor, snap.paused);
106
+ const rootClass = cx('mdt', `mdt--${placement}`, active && 'mdt--active', snap.paused && 'mdt--paused');
107
+
108
+ const setFactor = (factor: number) => motionSlowmo.set({ factor, paused: false });
109
+ const fill = `${((Math.min(snap.factor, maxFactor) - 1) / Math.max(1, maxFactor - 1)) * 100}%`;
110
+ const pillBadge = snap.factor === 1 ? '1×' : `${fmt(snap.factor)}×`;
111
+
112
+ return createPortal(
113
+ <div className={rootClass} style={{ '--mdt-offset': `${offset}px` } as CSSProperties}>
114
+ <div className={'mdt__panel' + (open ? ' is-open' : '')} role="group" aria-label="Motion devtools">
115
+ <button
116
+ className="mdt__head"
117
+ onClick={() => setOpen((o) => !o)}
118
+ aria-expanded={open}
119
+ title="Motion devtools"
120
+ aria-label={open ? 'Collapse motion devtools' : 'Expand motion devtools'}
121
+ >
122
+ <GaugeGlyph />
123
+ <span className="mdt__spacer" />
124
+ <span className="mdt__badge">{pillBadge}</span>
125
+ <svg
126
+ className={'mdt__chevron' + (open ? ' mdt__chevron--open' : '')}
127
+ width="12"
128
+ height="12"
129
+ viewBox="0 0 12 12"
130
+ aria-hidden="true"
131
+ >
132
+ <path d="M2.5 4.5 6 8l3.5-3.5" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
133
+ </svg>
134
+ </button>
135
+
136
+ <Collapse open={open} fade>
137
+ <div className="mdt__body">
138
+ <span className="mdt__title">Motion</span>
139
+ <div className="mdt__readout">
140
+ <span className="mdt__value">
141
+ {snap.paused ? 'Paused' : snap.factor === 1 ? 'Normal' : `${fmt(snap.factor)}×`}
142
+ </span>
143
+ <span className="mdt__unit">{snap.paused ? 'frozen' : snap.factor === 1 ? 'real-time' : 'slower'}</span>
144
+ </div>
145
+
146
+ <input
147
+ className="mdt__slider"
148
+ type="range"
149
+ min={1}
150
+ max={maxFactor}
151
+ step={0.5}
152
+ value={Math.min(snap.factor, maxFactor)}
153
+ onChange={(e) => setFactor(Number(e.target.value))}
154
+ style={{ '--mdt-fill': fill } as CSSProperties}
155
+ aria-label="Slow-down factor"
156
+ />
157
+
158
+ <div className="mdt__chips">
159
+ {presets.map((p) => (
160
+ <Button
161
+ key={p}
162
+ size="sm"
163
+ variant={!snap.paused && snap.factor === p ? 'primary' : 'secondary'}
164
+ onClick={() => setFactor(p)}
165
+ >
166
+ {p}×
167
+ </Button>
168
+ ))}
169
+ </div>
170
+
171
+ <div className="mdt__row">
172
+ <Button
173
+ size="sm"
174
+ variant={snap.paused ? 'primary' : 'secondary'}
175
+ onClick={() => motionSlowmo.set({ paused: !snap.paused })}
176
+ >
177
+ {snap.paused ? 'Resume' : 'Freeze'}
178
+ </Button>
179
+ <Button size="sm" variant="ghost" disabled={!active} onClick={() => motionSlowmo.reset()}>
180
+ Reset
181
+ </Button>
182
+ </div>
183
+
184
+ <div className="mdt__opt">
185
+ <Checkbox size="sm" checked={timers} onChange={(e) => setTimers(e.target.checked)} label="Scale timers" />
186
+ <p className="mdt__hint">
187
+ Slows CSS, Motion &amp; WAAPI together. Timer scaling keeps duration-based cleanups from cutting
188
+ animations short.
189
+ </p>
190
+ </div>
191
+ </div>
192
+ </Collapse>
193
+ </div>
194
+ </div>,
195
+ document.body,
196
+ );
197
+ }
198
+
199
+ export { motionSlowmo, type SlowmoState } from './slowmo-engine';
200
+ export default MotionDevtools;