@zyncat/ui 0.11.0 → 0.13.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 (597) hide show
  1. package/README.md +135 -40
  2. package/dist/alert.css +126 -121
  3. package/dist/alert.js +12 -14
  4. package/dist/alert.js.map +1 -1
  5. package/dist/avatar-group.js.map +1 -1
  6. package/dist/avatar.css +179 -174
  7. package/dist/avatar.js.map +1 -1
  8. package/dist/badge.css +166 -160
  9. package/dist/badge.js +1 -1
  10. package/dist/button.css +272 -246
  11. package/dist/button.js +1 -1
  12. package/dist/checkbox.css +158 -153
  13. package/dist/checkbox.js +2 -2
  14. package/dist/{chunk-AMFGY56I.js → chunk-227ZW4V7.js} +40 -32
  15. package/dist/chunk-227ZW4V7.js.map +1 -0
  16. package/dist/{chunk-2ERBBFZS.js → chunk-3MPF7FZV.js} +2 -2
  17. package/dist/chunk-3MPF7FZV.js.map +1 -0
  18. package/dist/{chunk-AIQXS2XY.js → chunk-43M6GQ4Q.js} +86 -79
  19. package/dist/chunk-43M6GQ4Q.js.map +1 -0
  20. package/dist/{chunk-7SZCJ7WI.js → chunk-45R4Z5XN.js} +3 -3
  21. package/dist/chunk-45R4Z5XN.js.map +1 -0
  22. package/dist/{chunk-I4XQ4PV2.js → chunk-4BSHB7R3.js} +9 -7
  23. package/dist/chunk-4BSHB7R3.js.map +1 -0
  24. package/dist/{chunk-YGGCQNNU.js → chunk-4C5RZXBT.js} +33 -34
  25. package/dist/chunk-4C5RZXBT.js.map +1 -0
  26. package/dist/{chunk-2QWJ6FAX.js → chunk-5PZ43DCG.js} +31 -15
  27. package/dist/chunk-5PZ43DCG.js.map +1 -0
  28. package/dist/{chunk-S5ZTZANS.js → chunk-7IZJERGA.js} +35 -12
  29. package/dist/chunk-7IZJERGA.js.map +1 -0
  30. package/dist/{chunk-DKVUPFQR.js → chunk-A5WTZACK.js} +22 -12
  31. package/dist/chunk-A5WTZACK.js.map +1 -0
  32. package/dist/{chunk-64UU4LGU.js → chunk-AADAJL7D.js} +3 -3
  33. package/dist/{chunk-64UU4LGU.js.map → chunk-AADAJL7D.js.map} +1 -1
  34. package/dist/{chunk-XJQQQJAO.js → chunk-CF4QHO4N.js} +21 -11
  35. package/dist/chunk-CF4QHO4N.js.map +1 -0
  36. package/dist/{chunk-WM5J5TDI.js → chunk-CNWTIMIP.js} +13 -17
  37. package/dist/chunk-CNWTIMIP.js.map +1 -0
  38. package/dist/{chunk-NGTA34V2.js → chunk-DDRSMHN4.js} +16 -10
  39. package/dist/chunk-DDRSMHN4.js.map +1 -0
  40. package/dist/{chunk-VTJTGVZZ.js → chunk-DMX2F6B4.js} +2 -2
  41. package/dist/chunk-DMX2F6B4.js.map +1 -0
  42. package/dist/{chunk-3SBCBYB7.js → chunk-EAI4POPB.js} +2 -2
  43. package/dist/{chunk-3SBCBYB7.js.map → chunk-EAI4POPB.js.map} +1 -1
  44. package/dist/{chunk-Y7AJQVWJ.js → chunk-EF6RPXU7.js} +17 -15
  45. package/dist/chunk-EF6RPXU7.js.map +1 -0
  46. package/dist/{chunk-WFHRAKN3.js → chunk-FONOS5RN.js} +14 -15
  47. package/dist/chunk-FONOS5RN.js.map +1 -0
  48. package/dist/{chunk-PMECHR3A.js → chunk-FQEHSKEI.js} +2 -2
  49. package/dist/chunk-FQEHSKEI.js.map +1 -0
  50. package/dist/chunk-HDSFWZ7L.js +12 -0
  51. package/dist/chunk-HDSFWZ7L.js.map +1 -0
  52. package/dist/{chunk-2F5PITAO.js → chunk-HY5MPISE.js} +2 -2
  53. package/dist/chunk-HY5MPISE.js.map +1 -0
  54. package/dist/{chunk-QDK66S4G.js → chunk-I45AU6KH.js} +3 -3
  55. package/dist/chunk-I45AU6KH.js.map +1 -0
  56. package/dist/{chunk-YGCVWGUG.js → chunk-IJS7TPGV.js} +153 -46
  57. package/dist/chunk-IJS7TPGV.js.map +1 -0
  58. package/dist/{chunk-62P3KD57.js → chunk-IUQAUBVM.js} +18 -11
  59. package/dist/chunk-IUQAUBVM.js.map +1 -0
  60. package/dist/chunk-JY6A2ZJZ.js +44 -0
  61. package/dist/chunk-JY6A2ZJZ.js.map +1 -0
  62. package/dist/{chunk-XWUWYSCT.js → chunk-M43IOM5C.js} +20 -10
  63. package/dist/chunk-M43IOM5C.js.map +1 -0
  64. package/dist/{chunk-S7B34VGN.js → chunk-OWNMRMPN.js} +3 -3
  65. package/dist/{chunk-S7B34VGN.js.map → chunk-OWNMRMPN.js.map} +1 -1
  66. package/dist/chunk-RFRE4WKX.js +22 -0
  67. package/dist/chunk-RFRE4WKX.js.map +1 -0
  68. package/dist/{chunk-NNXJCLTV.js → chunk-RJFGWJ4W.js} +2 -2
  69. package/dist/chunk-RJFGWJ4W.js.map +1 -0
  70. package/dist/{chunk-NEF5XAHG.js → chunk-TUTXXC3W.js} +4 -4
  71. package/dist/chunk-TUTXXC3W.js.map +1 -0
  72. package/dist/chunk-TVYH4AN7.js +70 -0
  73. package/dist/chunk-TVYH4AN7.js.map +1 -0
  74. package/dist/{chunk-U4MHX3KH.js → chunk-VAXCXZ53.js} +33 -12
  75. package/dist/chunk-VAXCXZ53.js.map +1 -0
  76. package/dist/chunk-XNIYSAMJ.js +52 -0
  77. package/dist/chunk-XNIYSAMJ.js.map +1 -0
  78. package/dist/{chunk-CONSWNIV.js → chunk-Y2YA7QRF.js} +6 -6
  79. package/dist/chunk-Y2YA7QRF.js.map +1 -0
  80. package/dist/cli.js +1828 -0
  81. package/dist/collapse.css +70 -61
  82. package/dist/collapse.js +2 -2
  83. package/dist/confetti.css +45 -0
  84. package/dist/confetti.js +540 -0
  85. package/dist/confetti.js.map +1 -0
  86. package/dist/count-badge.js +3 -3
  87. package/dist/count-badge.js.map +1 -1
  88. package/dist/date-field.js +24 -19
  89. package/dist/date-field.js.map +1 -1
  90. package/dist/date-picker.css +563 -559
  91. package/dist/date-range-field.js +58 -41
  92. package/dist/date-range-field.js.map +1 -1
  93. package/dist/datetime-field.js +24 -19
  94. package/dist/datetime-field.js.map +1 -1
  95. package/dist/dialog.css +176 -172
  96. package/dist/dialog.js +30 -19
  97. package/dist/dialog.js.map +1 -1
  98. package/dist/digit-strip.css +65 -0
  99. package/dist/dropdown.css +65 -0
  100. package/dist/dropdown.js +350 -0
  101. package/dist/dropdown.js.map +1 -0
  102. package/dist/emoji-picker.js +713 -0
  103. package/dist/emoji-picker.js.map +1 -0
  104. package/dist/facebook-feed.css +880 -0
  105. package/dist/facebook-feed.js +697 -0
  106. package/dist/facebook-feed.js.map +1 -0
  107. package/dist/flow-field.css +49 -0
  108. package/dist/flow-field.js +269 -0
  109. package/dist/flow-field.js.map +1 -0
  110. package/dist/glide.js +3 -3
  111. package/dist/icon.css +34 -30
  112. package/dist/input.css +296 -318
  113. package/dist/instagram-feed.css +378 -0
  114. package/dist/instagram-feed.js +272 -0
  115. package/dist/instagram-feed.js.map +1 -0
  116. package/dist/lens.css +119 -0
  117. package/dist/lens.js +307 -0
  118. package/dist/lens.js.map +1 -0
  119. package/dist/mcp.js +379 -181
  120. package/dist/menu-surface.css +127 -0
  121. package/dist/modal.css +11 -7
  122. package/dist/modal.js +24 -17
  123. package/dist/modal.js.map +1 -1
  124. package/dist/morphing-text.css +84 -0
  125. package/dist/morphing-text.js +256 -0
  126. package/dist/morphing-text.js.map +1 -0
  127. package/dist/motion-devtools.css +237 -233
  128. package/dist/motion-devtools.js +7 -6
  129. package/dist/motion-devtools.js.map +1 -1
  130. package/dist/motion-tokens.js +1 -1
  131. package/dist/multi-select.js +20 -17
  132. package/dist/multi-select.js.map +1 -1
  133. package/dist/number-field.js +11 -7
  134. package/dist/number-field.js.map +1 -1
  135. package/dist/odometer.css +58 -59
  136. package/dist/odometer.js +109 -0
  137. package/dist/odometer.js.map +1 -0
  138. package/dist/otp-field.js.map +1 -1
  139. package/dist/overlay.css +24 -20
  140. package/dist/pagination.css +42 -38
  141. package/dist/pagination.js +6 -12
  142. package/dist/pagination.js.map +1 -1
  143. package/dist/popover.css +69 -65
  144. package/dist/popover.js +12 -10
  145. package/dist/radio-group.css +275 -276
  146. package/dist/radio-group.js +70 -95
  147. package/dist/radio-group.js.map +1 -1
  148. package/dist/select.css +291 -386
  149. package/dist/select.js +18 -15
  150. package/dist/select.js.map +1 -1
  151. package/dist/sheet.css +47 -23
  152. package/dist/sheet.js +11 -10
  153. package/dist/status-badge.js +3 -3
  154. package/dist/status-badge.js.map +1 -1
  155. package/dist/styles.css +221 -0
  156. package/dist/support-rail.css +421 -0
  157. package/dist/support-rail.js +243 -0
  158. package/dist/support-rail.js.map +1 -0
  159. package/dist/table.css +333 -323
  160. package/dist/table.js +32 -21
  161. package/dist/table.js.map +1 -1
  162. package/dist/tabs.css +163 -156
  163. package/dist/tabs.js +26 -20
  164. package/dist/tabs.js.map +1 -1
  165. package/dist/tag.css +209 -231
  166. package/dist/tag.js +11 -10
  167. package/dist/tag.js.map +1 -1
  168. package/dist/text-field.js +7 -67
  169. package/dist/text-field.js.map +1 -1
  170. package/dist/textarea.css +205 -211
  171. package/dist/textarea.js +12 -12
  172. package/dist/textarea.js.map +1 -1
  173. package/dist/theme.js +69 -0
  174. package/dist/theme.js.map +1 -0
  175. package/dist/tiktok.css +662 -0
  176. package/dist/tiktok.js +494 -0
  177. package/dist/tiktok.js.map +1 -0
  178. package/dist/time-field.js +6 -6
  179. package/dist/time-field.js.map +1 -1
  180. package/dist/toast.css +237 -233
  181. package/dist/toast.js +43 -47
  182. package/dist/toast.js.map +1 -1
  183. package/dist/toggle-tag.js +1 -1
  184. package/dist/toggle-tag.js.map +1 -1
  185. package/dist/toggle.css +139 -135
  186. package/dist/toggle.js.map +1 -1
  187. package/dist/tooltip.css +79 -78
  188. package/dist/tooltip.js +50 -60
  189. package/dist/tooltip.js.map +1 -1
  190. package/dist/trigger.css +13 -0
  191. package/dist/{alert.d.ts → types/components/composites/alert/Alert.d.ts} +13 -15
  192. package/dist/{date-field.d.ts → types/components/composites/date-picker/DateField.d.ts} +4 -10
  193. package/dist/types/components/composites/date-picker/DateRangeField.d.ts +21 -0
  194. package/dist/{datetime-field.d.ts → types/components/composites/date-picker/DateTimeField.d.ts} +4 -10
  195. package/dist/{time-field.d.ts → types/components/composites/date-picker/TimeField.d.ts} +5 -11
  196. package/dist/types/components/composites/date-picker/calendar-panel.d.ts +16 -0
  197. package/dist/types/components/composites/date-picker/date-utils.d.ts +12 -0
  198. package/dist/types/components/composites/date-picker/field-shell.d.ts +46 -0
  199. package/dist/types/components/composites/date-picker/range-panel.d.ts +24 -0
  200. package/dist/types/components/composites/date-picker/time-core.d.ts +14 -0
  201. package/dist/types/components/composites/date-picker/use-day-focus.d.ts +2 -0
  202. package/dist/{dialog.d.ts → types/components/composites/dialog/Dialog.d.ts} +10 -11
  203. package/dist/types/components/composites/dropdown/Dropdown.d.ts +37 -0
  204. package/dist/types/components/composites/dropdown/menu-panel.d.ts +7 -0
  205. package/dist/types/components/composites/dropdown/types.d.ts +71 -0
  206. package/dist/types/components/composites/emoji-picker/EmojiPickerPanel.d.ts +45 -0
  207. package/dist/types/components/composites/emoji-picker/category-icons.d.ts +9 -0
  208. package/dist/types/components/composites/emoji-picker/data.d.ts +33 -0
  209. package/dist/types/components/composites/emoji-picker/dom.d.ts +19 -0
  210. package/dist/types/components/composites/emoji-picker/getEmojiUrl.d.ts +2 -0
  211. package/dist/types/components/composites/emoji-picker/navigation.d.ts +7 -0
  212. package/dist/types/components/composites/emoji-picker/picker.d.ts +20 -0
  213. package/dist/types/components/composites/emoji-picker/react/category-bar.d.ts +6 -0
  214. package/dist/types/components/composites/emoji-picker/react/useEmojiPicker.d.ts +50 -0
  215. package/dist/types/components/composites/emoji-picker/scaffold.d.ts +8 -0
  216. package/dist/types/components/composites/emoji-picker/search.d.ts +1 -0
  217. package/dist/types/components/composites/emoji-picker/types.d.ts +13 -0
  218. package/dist/{modal.d.ts → types/components/composites/modal/Modal.d.ts} +10 -11
  219. package/dist/{pagination.d.ts → types/components/composites/pagination/Pagination.d.ts} +5 -8
  220. package/dist/{popover.d.ts → types/components/composites/popover/Popover.d.ts} +11 -14
  221. package/dist/{multi-select.d.ts → types/components/composites/select/MultiSelect.d.ts} +12 -11
  222. package/dist/{select.d.ts → types/components/composites/select/Select.d.ts} +16 -14
  223. package/dist/types/components/composites/select/core/index.d.ts +4 -0
  224. package/dist/types/components/composites/select/core/menu.d.ts +13 -0
  225. package/dist/types/components/composites/select/core/panel.d.ts +18 -0
  226. package/dist/types/components/composites/select/core/trigger.d.ts +16 -0
  227. package/dist/{types-SGMShK7R.d.ts → types/components/composites/select/core/types.d.ts} +13 -6
  228. package/dist/types/components/composites/select/core/use-listbox.d.ts +42 -0
  229. package/dist/{sheet.d.ts → types/components/composites/sheet/Sheet.d.ts} +10 -11
  230. package/dist/types/components/composites/sheet/use-sheet-drag.d.ts +13 -0
  231. package/dist/{table.d.ts → types/components/composites/table/Table.d.ts} +12 -12
  232. package/dist/{tabs.d.ts → types/components/composites/tabs/Tabs.d.ts} +13 -13
  233. package/dist/types/components/composites/toast/Toast.d.ts +10 -0
  234. package/dist/{toast-store.d.ts → types/components/composites/toast/toast-store.d.ts} +12 -14
  235. package/dist/{tooltip.d.ts → types/components/composites/tooltip/Tooltip.d.ts} +6 -10
  236. package/dist/types/components/composites/tooltip/tooltip-host.d.ts +1 -0
  237. package/dist/types/components/composites/tooltip/tooltip-store.d.ts +29 -0
  238. package/dist/types/components/compound/support-rail/SupportRail.d.ts +41 -0
  239. package/dist/types/components/dev/MotionDevtools.d.ts +24 -0
  240. package/dist/types/components/dev/slowmo-engine.d.ts +27 -0
  241. package/dist/types/components/expressive/confetti/Confetti.d.ts +43 -0
  242. package/dist/types/components/expressive/facebook-feed/FacebookFeed.d.ts +73 -0
  243. package/dist/types/components/expressive/facebook-feed/chrome.d.ts +30 -0
  244. package/dist/types/components/expressive/facebook-feed/icons.d.ts +21 -0
  245. package/dist/types/components/expressive/facebook-feed/post.d.ts +25 -0
  246. package/dist/types/components/expressive/facebook-feed/reel.d.ts +26 -0
  247. package/dist/types/components/expressive/facebook-feed/story.d.ts +20 -0
  248. package/dist/types/components/expressive/flow-field/FlowField.d.ts +23 -0
  249. package/dist/types/components/expressive/instagram-feed/InstagramFeed.d.ts +59 -0
  250. package/dist/types/components/expressive/lens/Lens.d.ts +23 -0
  251. package/dist/types/components/expressive/morphing-text/MorphingText.d.ts +21 -0
  252. package/dist/types/components/expressive/odometer/Odometer.d.ts +21 -0
  253. package/dist/types/components/expressive/tiktok/TikTok.d.ts +85 -0
  254. package/dist/types/components/expressive/tiktok/glyphs.d.ts +40 -0
  255. package/dist/types/components/expressive/typing-lines/TypingLines.d.ts +25 -0
  256. package/dist/types/components/expressive/weight-field/WeightField.d.ts +19 -0
  257. package/dist/types/components/expressive/youtube/YouTube.d.ts +73 -0
  258. package/dist/types/components/expressive/youtube/format.d.ts +2 -0
  259. package/dist/types/components/expressive/youtube/glyphs.d.ts +16 -0
  260. package/dist/types/components/expressive/youtube/media.d.ts +8 -0
  261. package/dist/types/components/expressive/youtube/post.d.ts +19 -0
  262. package/dist/types/components/expressive/youtube/short.d.ts +18 -0
  263. package/dist/types/components/expressive/youtube/video.d.ts +14 -0
  264. package/dist/types/components/internal/collection/collection.d.ts +19 -0
  265. package/dist/types/components/internal/glass/glint.d.ts +1 -0
  266. package/dist/types/components/internal/hooks/use-controllable.d.ts +1 -0
  267. package/dist/types/components/internal/hooks/use-media-query.d.ts +1 -0
  268. package/dist/types/components/internal/hooks/use-scroll-edges.d.ts +10 -0
  269. package/dist/types/components/internal/hooks/use-typeahead.d.ts +5 -0
  270. package/dist/types/components/internal/icon/Icon.d.ts +33 -0
  271. package/dist/types/components/internal/icon/IconSlot.d.ts +7 -0
  272. package/dist/types/components/internal/menu/menu-row.d.ts +11 -0
  273. package/dist/types/components/internal/overlay/focus.d.ts +8 -0
  274. package/dist/types/components/internal/overlay/layer.d.ts +38 -0
  275. package/dist/types/components/internal/overlay/modal.d.ts +18 -0
  276. package/dist/types/components/internal/overlay/position.d.ts +14 -0
  277. package/dist/types/components/internal/support/types.d.ts +15 -0
  278. package/dist/types/components/internal/utils/activation.d.ts +23 -0
  279. package/dist/types/components/internal/utils/cx.d.ts +1 -0
  280. package/dist/types/components/internal/utils/token-px.d.ts +1 -0
  281. package/dist/{avatar.d.ts → types/components/primitives/avatar/Avatar.d.ts} +10 -12
  282. package/dist/{avatar-group.d.ts → types/components/primitives/avatar/AvatarGroup.d.ts} +7 -9
  283. package/dist/{badge.d.ts → types/components/primitives/badge/Badge.d.ts} +8 -10
  284. package/dist/types/components/primitives/badge/CountBadge.d.ts +8 -0
  285. package/dist/types/components/primitives/badge/StatusBadge.d.ts +15 -0
  286. package/dist/types/components/primitives/badge/digit-strip.d.ts +5 -0
  287. package/dist/{button.d.ts → types/components/primitives/button/Button.d.ts} +6 -8
  288. package/dist/{checkbox.d.ts → types/components/primitives/checkbox/Checkbox.d.ts} +6 -8
  289. package/dist/types/components/primitives/checkbox/check-glyph.d.ts +6 -0
  290. package/dist/{collapse.d.ts → types/components/primitives/collapse/Collapse.d.ts} +12 -13
  291. package/dist/types/components/primitives/collapse/collapse.typecheck.d.ts +2 -0
  292. package/dist/{number-field.d.ts → types/components/primitives/input/NumberField.d.ts} +7 -9
  293. package/dist/{otp-field.d.ts → types/components/primitives/input/OtpField.d.ts} +6 -8
  294. package/dist/{text-field.d.ts → types/components/primitives/input/TextField.d.ts} +7 -9
  295. package/dist/types/components/primitives/input/field-chrome.d.ts +45 -0
  296. package/dist/{radio-group.d.ts → types/components/primitives/radio-group/RadioGroup.d.ts} +8 -10
  297. package/dist/{tag.d.ts → types/components/primitives/tag/Tag.d.ts} +9 -12
  298. package/dist/{toggle-tag.d.ts → types/components/primitives/tag/ToggleTag.d.ts} +7 -8
  299. package/dist/{textarea.d.ts → types/components/primitives/textarea/Textarea.d.ts} +7 -9
  300. package/dist/{toggle.d.ts → types/components/primitives/toggle/Toggle.d.ts} +6 -8
  301. package/dist/{dom-props-C0jrllBw.d.ts → types/dom-props.d.ts} +1 -3
  302. package/dist/types/engine/animate.d.ts +30 -0
  303. package/dist/types/engine/drag.d.ts +17 -0
  304. package/dist/types/engine/ease.d.ts +15 -0
  305. package/dist/types/engine/flip.d.ts +18 -0
  306. package/dist/types/engine/index.d.ts +4 -0
  307. package/dist/types/engine/loop.d.ts +9 -0
  308. package/dist/types/motion/element.d.ts +17 -0
  309. package/dist/types/motion/flip.d.ts +4 -0
  310. package/dist/types/motion/glide.d.ts +11 -0
  311. package/dist/types/motion/motion-timing.d.ts +16 -0
  312. package/dist/types/motion/presence-context.d.ts +11 -0
  313. package/dist/types/motion/presence.d.ts +12 -0
  314. package/dist/types/motion/presets.d.ts +6 -0
  315. package/dist/{timing-7JA_zQHP.d.ts → types/motion/timing.d.ts} +9 -9
  316. package/dist/types/motion/use-motion.d.ts +17 -0
  317. package/dist/types/tokens/component-styles.generated.d.ts +262 -0
  318. package/dist/{motion-scale-Canq4stZ.d.ts → types/tokens/motion-scale.d.ts} +4 -4
  319. package/dist/{motion-tokens.d.ts → types/tokens/motion-tokens.d.ts} +9 -9
  320. package/dist/types/tokens/theme-tokens.generated.d.ts +1249 -0
  321. package/dist/types/tokens/theme.d.ts +12 -0
  322. package/dist/typing-lines.css +92 -0
  323. package/dist/typing-lines.js +139 -0
  324. package/dist/typing-lines.js.map +1 -0
  325. package/dist/weight-field.css +84 -0
  326. package/dist/weight-field.js +17 -0
  327. package/dist/weight-field.js.map +1 -0
  328. package/dist/youtube.css +611 -0
  329. package/dist/youtube.js +814 -0
  330. package/dist/youtube.js.map +1 -0
  331. package/package.json +155 -49
  332. package/skills/zyncat-ui/SKILL.md +95 -0
  333. package/skills/zyncat-ui/references/components.md +85 -0
  334. package/skills/zyncat-ui/references/recipes.md +171 -0
  335. package/skills/zyncat-ui/references/theming.md +83 -0
  336. package/src/components/composites/alert/Alert.tsx +13 -11
  337. package/src/components/composites/alert/Alert.usage.md +15 -0
  338. package/src/components/composites/alert/alert.css +126 -121
  339. package/src/components/composites/date-picker/DateField.tsx +7 -2
  340. package/src/components/composites/date-picker/DateField.usage.md +10 -0
  341. package/src/components/composites/date-picker/DateRangeField.tsx +18 -16
  342. package/src/components/composites/date-picker/DateRangeField.usage.md +10 -0
  343. package/src/components/composites/date-picker/DateTimeField.tsx +10 -5
  344. package/src/components/composites/date-picker/DateTimeField.usage.md +12 -0
  345. package/src/components/composites/date-picker/TimeField.tsx +3 -1
  346. package/src/components/composites/date-picker/TimeField.usage.md +12 -0
  347. package/src/components/composites/date-picker/calendar-panel.tsx +15 -10
  348. package/src/components/composites/date-picker/date-picker.css +563 -559
  349. package/src/components/composites/date-picker/field-shell.tsx +9 -3
  350. package/src/components/composites/date-picker/range-panel.tsx +23 -8
  351. package/src/components/composites/date-picker/time-core.tsx +2 -0
  352. package/src/components/composites/dialog/Dialog.tsx +30 -15
  353. package/src/components/composites/dialog/Dialog.usage.md +17 -0
  354. package/src/components/composites/dialog/dialog.css +176 -172
  355. package/src/components/composites/dropdown/Dropdown.tsx +184 -0
  356. package/src/components/composites/dropdown/Dropdown.usage.md +19 -0
  357. package/src/components/composites/dropdown/dropdown.css +65 -0
  358. package/src/components/composites/dropdown/menu-panel.tsx +255 -0
  359. package/src/components/composites/dropdown/types.ts +95 -0
  360. package/src/components/composites/emoji-picker/EmojiPickerPanel.tsx +153 -0
  361. package/src/components/composites/emoji-picker/EmojiPickerPanel.usage.md +26 -0
  362. package/src/components/composites/emoji-picker/category-icons.ts +29 -0
  363. package/src/components/composites/emoji-picker/data.ts +83 -0
  364. package/src/components/composites/emoji-picker/dom.ts +79 -0
  365. package/src/components/composites/emoji-picker/getEmojiUrl.ts +17 -0
  366. package/src/components/composites/emoji-picker/navigation.ts +86 -0
  367. package/src/components/composites/emoji-picker/picker.ts +169 -0
  368. package/src/components/composites/emoji-picker/react/category-bar.tsx +77 -0
  369. package/src/components/composites/emoji-picker/react/useEmojiPicker.ts +139 -0
  370. package/src/components/composites/emoji-picker/scaffold.ts +74 -0
  371. package/src/components/composites/emoji-picker/search.ts +79 -0
  372. package/src/components/composites/emoji-picker/styles.css +221 -0
  373. package/src/components/composites/emoji-picker/types.ts +14 -0
  374. package/src/components/composites/modal/Modal.tsx +24 -13
  375. package/src/components/composites/modal/Modal.usage.md +24 -0
  376. package/src/components/composites/modal/modal.css +11 -7
  377. package/src/components/composites/pagination/Pagination.tsx +6 -11
  378. package/src/components/composites/pagination/Pagination.usage.md +12 -0
  379. package/src/components/composites/pagination/pagination.css +42 -38
  380. package/src/components/composites/popover/Popover.tsx +22 -7
  381. package/src/components/composites/popover/Popover.usage.md +15 -0
  382. package/src/components/composites/popover/popover.css +69 -65
  383. package/src/components/composites/select/MultiSelect.tsx +13 -5
  384. package/src/components/composites/select/MultiSelect.usage.md +12 -0
  385. package/src/components/composites/select/Select.tsx +23 -7
  386. package/src/components/composites/select/Select.usage.md +20 -0
  387. package/src/components/composites/select/core/index.ts +1 -1
  388. package/src/components/composites/select/core/menu.tsx +8 -6
  389. package/src/components/composites/select/core/panel.tsx +25 -26
  390. package/src/components/composites/select/core/trigger.tsx +36 -24
  391. package/src/components/composites/select/core/types.ts +17 -15
  392. package/src/components/composites/select/core/use-listbox.ts +22 -21
  393. package/src/components/composites/select/select.css +291 -386
  394. package/src/components/composites/sheet/Sheet.tsx +28 -18
  395. package/src/components/composites/sheet/Sheet.usage.md +15 -0
  396. package/src/components/composites/sheet/sheet.css +47 -23
  397. package/src/components/composites/sheet/use-sheet-drag.ts +19 -15
  398. package/src/components/composites/table/Table.tsx +17 -6
  399. package/src/components/composites/table/Table.usage.md +19 -0
  400. package/src/components/composites/table/table.css +333 -323
  401. package/src/components/composites/tabs/Tabs.tsx +31 -23
  402. package/src/components/composites/tabs/Tabs.usage.md +13 -0
  403. package/src/components/composites/tabs/tabs.css +163 -156
  404. package/src/components/composites/toast/Toast.tsx +48 -51
  405. package/src/components/composites/toast/Toast.usage.md +23 -0
  406. package/src/components/composites/toast/toast-store.usage.md +16 -0
  407. package/src/components/composites/toast/toast.css +237 -233
  408. package/src/components/composites/tooltip/Tooltip.tsx +13 -8
  409. package/src/components/composites/tooltip/Tooltip.usage.md +14 -0
  410. package/src/components/composites/tooltip/tooltip-host.tsx +29 -61
  411. package/src/components/composites/tooltip/tooltip-store.ts +10 -0
  412. package/src/components/composites/tooltip/tooltip.css +79 -78
  413. package/src/components/compound/support-rail/SupportRail.tsx +343 -0
  414. package/src/components/compound/support-rail/SupportRail.usage.md +18 -0
  415. package/src/components/compound/support-rail/support-rail.css +421 -0
  416. package/src/components/dev/MotionDevtools.tsx +3 -1
  417. package/src/components/dev/MotionDevtools.usage.md +16 -0
  418. package/src/components/dev/motion-devtools.css +237 -233
  419. package/src/components/expressive/confetti/Confetti.tsx +727 -0
  420. package/src/components/expressive/confetti/Confetti.usage.md +18 -0
  421. package/src/components/expressive/confetti/confetti.css +45 -0
  422. package/src/components/expressive/facebook-feed/FacebookFeed.tsx +200 -0
  423. package/src/components/expressive/facebook-feed/FacebookFeed.usage.md +18 -0
  424. package/src/components/expressive/facebook-feed/chrome.tsx +120 -0
  425. package/src/components/expressive/facebook-feed/facebook-feed.css +880 -0
  426. package/src/components/expressive/facebook-feed/icons.tsx +145 -0
  427. package/src/components/expressive/facebook-feed/post.tsx +213 -0
  428. package/src/components/expressive/facebook-feed/reel.tsx +199 -0
  429. package/src/components/expressive/facebook-feed/story.tsx +132 -0
  430. package/src/components/expressive/flow-field/FlowField.tsx +348 -0
  431. package/src/components/expressive/flow-field/FlowField.usage.md +19 -0
  432. package/src/components/expressive/flow-field/flow-field.css +49 -0
  433. package/src/components/expressive/instagram-feed/InstagramFeed.tsx +374 -0
  434. package/src/components/expressive/instagram-feed/InstagramFeed.usage.md +18 -0
  435. package/src/components/expressive/instagram-feed/instagram-feed.css +378 -0
  436. package/src/components/expressive/lens/Lens.tsx +415 -0
  437. package/src/components/expressive/lens/Lens.usage.md +20 -0
  438. package/src/components/expressive/lens/lens.css +119 -0
  439. package/src/components/expressive/morphing-text/MorphingText.tsx +328 -0
  440. package/src/components/expressive/morphing-text/MorphingText.usage.md +19 -0
  441. package/src/components/expressive/morphing-text/morphing-text.css +84 -0
  442. package/src/components/expressive/odometer/Odometer.tsx +158 -0
  443. package/src/components/expressive/odometer/Odometer.usage.md +17 -0
  444. package/src/components/expressive/odometer/odometer.css +61 -0
  445. package/src/components/expressive/tiktok/TikTok.tsx +542 -0
  446. package/src/components/expressive/tiktok/TikTok.usage.md +17 -0
  447. package/src/components/expressive/tiktok/glyphs.tsx +163 -0
  448. package/src/components/expressive/tiktok/tiktok.css +662 -0
  449. package/src/components/expressive/typing-lines/TypingLines.tsx +0 -0
  450. package/src/components/expressive/typing-lines/TypingLines.usage.md +17 -0
  451. package/src/components/expressive/typing-lines/typing-lines.css +92 -0
  452. package/src/components/expressive/weight-field/WeightField.tsx +41 -0
  453. package/src/components/expressive/weight-field/WeightField.usage.md +20 -0
  454. package/src/components/expressive/weight-field/weight-field.css +84 -0
  455. package/src/components/expressive/youtube/YouTube.tsx +192 -0
  456. package/src/components/expressive/youtube/YouTube.usage.md +18 -0
  457. package/src/components/expressive/youtube/format.ts +22 -0
  458. package/src/components/expressive/youtube/glyphs.tsx +235 -0
  459. package/src/components/expressive/youtube/media.tsx +18 -0
  460. package/src/components/expressive/youtube/post.tsx +282 -0
  461. package/src/components/expressive/youtube/short.tsx +212 -0
  462. package/src/components/expressive/youtube/video.tsx +75 -0
  463. package/src/components/expressive/youtube/youtube.css +611 -0
  464. package/src/components/internal/collection/collection.ts +44 -0
  465. package/src/components/internal/glass/glass.css +88 -84
  466. package/src/components/internal/hooks/use-media-query.ts +20 -0
  467. package/src/components/internal/hooks/use-typeahead.ts +28 -0
  468. package/src/components/internal/icon/Icon.tsx +2 -0
  469. package/src/components/internal/icon/IconSlot.tsx +2 -0
  470. package/src/components/internal/icon/icon.css +34 -30
  471. package/src/components/internal/menu/menu-row.tsx +34 -0
  472. package/src/components/internal/menu/menu-surface.css +127 -0
  473. package/src/components/internal/overlay/focus.ts +26 -10
  474. package/src/components/internal/overlay/layer.tsx +50 -9
  475. package/src/components/internal/overlay/modal.tsx +14 -12
  476. package/src/components/internal/overlay/overlay.css +24 -20
  477. package/src/components/internal/overlay/position.ts +19 -9
  478. package/src/components/internal/overlay/trigger.css +13 -0
  479. package/src/components/internal/support/types.ts +16 -0
  480. package/src/components/internal/utils/activation.ts +78 -0
  481. package/src/components/primitives/avatar/Avatar.tsx +2 -0
  482. package/src/components/primitives/avatar/Avatar.usage.md +12 -0
  483. package/src/components/primitives/avatar/AvatarGroup.tsx +3 -1
  484. package/src/components/primitives/avatar/AvatarGroup.usage.md +15 -0
  485. package/src/components/primitives/avatar/avatar.css +179 -174
  486. package/src/components/primitives/badge/Badge.tsx +3 -1
  487. package/src/components/primitives/badge/Badge.usage.md +14 -0
  488. package/src/components/primitives/badge/CountBadge.tsx +2 -2
  489. package/src/components/primitives/badge/CountBadge.usage.md +13 -0
  490. package/src/components/primitives/badge/StatusBadge.tsx +3 -1
  491. package/src/components/primitives/badge/StatusBadge.usage.md +14 -0
  492. package/src/components/primitives/badge/badge.css +166 -160
  493. package/src/components/primitives/badge/digit-strip.css +65 -0
  494. package/src/components/primitives/badge/{odometer.tsx → digit-strip.tsx} +3 -3
  495. package/src/components/primitives/button/Button.tsx +2 -0
  496. package/src/components/primitives/button/Button.usage.md +14 -0
  497. package/src/components/primitives/button/button.css +272 -246
  498. package/src/components/primitives/checkbox/Checkbox.tsx +3 -1
  499. package/src/components/primitives/checkbox/Checkbox.usage.md +12 -0
  500. package/src/components/primitives/checkbox/check-glyph.tsx +1 -0
  501. package/src/components/primitives/checkbox/checkbox.css +158 -153
  502. package/src/components/primitives/collapse/Collapse.tsx +3 -1
  503. package/src/components/primitives/collapse/Collapse.usage.md +17 -0
  504. package/src/components/primitives/collapse/collapse.css +70 -61
  505. package/src/components/primitives/collapse/collapse.typecheck.tsx +2 -0
  506. package/src/components/primitives/input/NumberField.tsx +18 -5
  507. package/src/components/primitives/input/NumberField.usage.md +12 -0
  508. package/src/components/primitives/input/OtpField.tsx +2 -0
  509. package/src/components/primitives/input/OtpField.usage.md +12 -0
  510. package/src/components/primitives/input/TextField.tsx +16 -4
  511. package/src/components/primitives/input/TextField.usage.md +13 -0
  512. package/src/components/primitives/input/field-chrome.tsx +11 -2
  513. package/src/components/primitives/input/input.css +296 -318
  514. package/src/components/primitives/radio-group/RadioGroup.tsx +20 -44
  515. package/src/components/primitives/radio-group/RadioGroup.usage.md +13 -0
  516. package/src/components/primitives/radio-group/radio-group.css +275 -276
  517. package/src/components/primitives/tag/Tag.tsx +10 -6
  518. package/src/components/primitives/tag/Tag.usage.md +14 -0
  519. package/src/components/primitives/tag/ToggleTag.tsx +4 -2
  520. package/src/components/primitives/tag/ToggleTag.usage.md +14 -0
  521. package/src/components/primitives/tag/tag.css +209 -231
  522. package/src/components/primitives/textarea/Textarea.tsx +17 -7
  523. package/src/components/primitives/textarea/Textarea.usage.md +12 -0
  524. package/src/components/primitives/textarea/textarea.css +205 -211
  525. package/src/components/primitives/toggle/Toggle.tsx +3 -1
  526. package/src/components/primitives/toggle/Toggle.usage.md +12 -0
  527. package/src/components/primitives/toggle/toggle.css +139 -135
  528. package/src/engine/animate.ts +40 -13
  529. package/src/engine/ease.ts +1 -0
  530. package/src/engine/flip.ts +32 -15
  531. package/src/engine/index.ts +2 -1
  532. package/src/engine/loop.ts +97 -0
  533. package/src/mcp/server.ts +315 -218
  534. package/src/motion/element.tsx +1 -0
  535. package/src/motion/flip.ts +29 -10
  536. package/src/motion/glide.tsx +11 -14
  537. package/src/motion/glide.usage.md +15 -0
  538. package/src/motion/motion-timing.ts +3 -3
  539. package/src/motion/presence.tsx +12 -5
  540. package/src/motion/presets.ts +13 -0
  541. package/src/motion/timing.ts +1 -0
  542. package/src/motion/use-motion.ts +16 -3
  543. package/src/styles.css +5 -0
  544. package/src/tokens/avatar.css +20 -16
  545. package/src/tokens/color.css +67 -56
  546. package/src/tokens/component-styles.generated.ts +270 -0
  547. package/src/tokens/elevation.css +28 -17
  548. package/src/tokens/fonts.css +1 -1
  549. package/src/tokens/glass.css +19 -15
  550. package/src/tokens/icons.css +8 -4
  551. package/src/tokens/layers.css +9 -4
  552. package/src/tokens/motion-scale.ts +4 -0
  553. package/src/tokens/motion-tokens.ts +42 -12
  554. package/src/tokens/motion-tokens.usage.md +16 -0
  555. package/src/tokens/motion.css +63 -45
  556. package/src/tokens/radius.css +12 -8
  557. package/src/tokens/semantic.css +62 -54
  558. package/src/tokens/spacing.css +25 -21
  559. package/src/tokens/theme-tokens.generated.ts +1278 -0
  560. package/src/tokens/theme.tsx +83 -0
  561. package/src/tokens/theme.usage.md +36 -0
  562. package/src/tokens/typography.css +53 -49
  563. package/dist/chunk-2ERBBFZS.js.map +0 -1
  564. package/dist/chunk-2F5PITAO.js.map +0 -1
  565. package/dist/chunk-2QWJ6FAX.js.map +0 -1
  566. package/dist/chunk-62P3KD57.js.map +0 -1
  567. package/dist/chunk-7SZCJ7WI.js.map +0 -1
  568. package/dist/chunk-AIQXS2XY.js.map +0 -1
  569. package/dist/chunk-AMFGY56I.js.map +0 -1
  570. package/dist/chunk-CONSWNIV.js.map +0 -1
  571. package/dist/chunk-DKVUPFQR.js.map +0 -1
  572. package/dist/chunk-I4XQ4PV2.js.map +0 -1
  573. package/dist/chunk-NEF5XAHG.js.map +0 -1
  574. package/dist/chunk-NGTA34V2.js.map +0 -1
  575. package/dist/chunk-NNXJCLTV.js.map +0 -1
  576. package/dist/chunk-PMECHR3A.js.map +0 -1
  577. package/dist/chunk-QDK66S4G.js.map +0 -1
  578. package/dist/chunk-S5ZTZANS.js.map +0 -1
  579. package/dist/chunk-U4MHX3KH.js.map +0 -1
  580. package/dist/chunk-VTJTGVZZ.js.map +0 -1
  581. package/dist/chunk-WFHRAKN3.js.map +0 -1
  582. package/dist/chunk-WM5J5TDI.js.map +0 -1
  583. package/dist/chunk-XJQQQJAO.js.map +0 -1
  584. package/dist/chunk-XWUWYSCT.js.map +0 -1
  585. package/dist/chunk-Y7AJQVWJ.js.map +0 -1
  586. package/dist/chunk-YGCVWGUG.js.map +0 -1
  587. package/dist/chunk-YGGCQNNU.js.map +0 -1
  588. package/dist/count-badge.d.ts +0 -13
  589. package/dist/date-range-field.d.ts +0 -33
  590. package/dist/field-chrome-CMPOQSLs.d.ts +0 -28
  591. package/dist/field-shell-Cuda-feL.d.ts +0 -24
  592. package/dist/glide.d.ts +0 -15
  593. package/dist/motion-devtools.d.ts +0 -51
  594. package/dist/status-badge.d.ts +0 -19
  595. package/dist/toast.d.ts +0 -12
  596. package/llms.txt +0 -220
  597. package/src/components/primitives/badge/odometer.css +0 -62
package/src/components/composites/tooltip/tooltip-host.tsx CHANGED
@@ -2,14 +2,16 @@
2
2
 
3
3
  import { Fragment, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
4
4
  import { createPortal } from 'react-dom';
5
- import { animate } from '../../../engine';
5
+
6
+ import { Motion } from '../../../motion/element';
6
7
  import { Presence } from '../../../motion/presence';
7
- import { useMotion, type MotionSpecs } from '../../../motion/use-motion';
8
+ import { popIn, popOut } from '../../../motion/presets';
8
9
  import { UIMotion } from '../../../tokens/motion-tokens';
9
10
  import { tokenPx } from '../../internal/utils/token-px';
10
11
  import { store, TOOLTIP_DOM_ID, type ActivePayload, type Placement } from './tooltip-store';
11
12
 
12
13
  const SM = UIMotion;
14
+ const TIP_LAYOUT = { size: 'morph' as const, timing: UIMotion.t.layout };
13
15
 
14
16
  interface Size {
15
17
  w: number;
@@ -58,8 +60,8 @@ function targetBox(size: Size, t: DOMRect, want: Placement): TargetBox {
58
60
  }
59
61
 
60
62
  const fromEdge = (p: Placement) => ({
61
- x: p === 'left' ? 4 : p === 'right' ? -4 : 0,
62
- y: p === 'top' ? 4 : p === 'bottom' ? -4 : 0,
63
+ x: p === 'left' ? SM.dist.sm : p === 'right' ? -SM.dist.sm : 0,
64
+ y: p === 'top' ? SM.dist.sm : p === 'bottom' ? -SM.dist.sm : 0,
63
65
  });
64
66
 
65
67
  function Body({ a, width }: { a: ActivePayload; width?: number }) {
@@ -77,32 +79,30 @@ function Body({ a, width }: { a: ActivePayload; width?: number }) {
77
79
  );
78
80
  }
79
81
 
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
-
82
+ function TipSurface({ a, box }: { a: ActivePayload; box: RenderedBox }) {
83
+ const edge = fromEdge(box.placement);
100
84
  return (
101
- <div ref={ref} className="tooltip" id={TOOLTIP_DOM_ID} role="tooltip" data-placement={box.placement}>
102
- <span ref={bodyRef}>
85
+ <Motion
86
+ layout
87
+ layoutTransition={TIP_LAYOUT}
88
+ className="tooltip"
89
+ id={TOOLTIP_DOM_ID}
90
+ role="tooltip"
91
+ data-placement={box.placement}
92
+ style={{ translate: `${box.x}px ${box.y}px`, width: box.w, height: box.h }}
93
+ animate={[
94
+ { x: [edge.x, 0], y: [edge.y, 0], timing: { ...SM.t.layout, fill: 'none' }, composite: 'add' },
95
+ popIn(SM.scale.floating, SM.t.enter),
96
+ ]}
97
+ exit={[
98
+ { x: [0, edge.x], y: [0, edge.y], timing: SM.t.exit, composite: 'add' },
99
+ popOut(SM.scale.floating, SM.t.exit),
100
+ ]}
101
+ >
102
+ <Motion as="span" key={a.id} animate={{ opacity: [0, 1], timing: SM.t.enter }}>
103
103
  <Body a={a} width={box.bodyW} />
104
- </span>
105
- </div>
104
+ </Motion>
105
+ </Motion>
106
106
  );
107
107
  }
108
108
 
@@ -138,9 +138,6 @@ export function TooltipHost() {
138
138
  };
139
139
  }, [active]);
140
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
141
  return createPortal(
145
142
  <Fragment>
146
143
  {active && (
@@ -148,36 +145,7 @@ export function TooltipHost() {
148
145
  <Body a={active} />
149
146
  </div>
150
147
  )}
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>
148
+ <Presence>{active && box && <TipSurface key="tip" a={active} box={box} />}</Presence>
181
149
  </Fragment>,
182
150
  document.body,
183
151
  );
package/src/components/composites/tooltip/tooltip-store.ts CHANGED
@@ -9,6 +9,7 @@ export interface ActivePayload {
9
9
  content: ReactNode;
10
10
  shortcut?: string | null;
11
11
  placement: Placement;
12
+ anchor: () => HTMLElement | null;
12
13
  rect: () => DOMRect;
13
14
  }
14
15
 
@@ -19,6 +20,7 @@ const WARM_WINDOW = 300;
19
20
 
20
21
  export const store = {
21
22
  active: null as ActivePayload | null,
23
+ described: null as HTMLElement | null,
22
24
  closeTimer: 0 as ReturnType<typeof setTimeout> | 0,
23
25
  warmUntil: 0,
24
26
  listeners: new Set<() => void>(),
@@ -31,9 +33,16 @@ export const store = {
31
33
  store.listeners.forEach((l) => l());
32
34
  },
33
35
  isWarm: () => store.active !== null || performance.now() < store.warmUntil,
36
+ describe(el: HTMLElement | null) {
37
+ if (store.described === el) return;
38
+ store.described?.removeAttribute('aria-describedby');
39
+ store.described = el;
40
+ el?.setAttribute('aria-describedby', TOOLTIP_DOM_ID);
41
+ },
34
42
  open(payload: ActivePayload) {
35
43
  clearTimeout(store.closeTimer);
36
44
  store.active = payload;
45
+ store.describe(payload.anchor());
37
46
  store.emit();
38
47
  },
39
48
  close(id: string, grace = CLOSE_GRACE) {
@@ -44,6 +53,7 @@ export const store = {
44
53
  },
45
54
  closeNow() {
46
55
  clearTimeout(store.closeTimer);
56
+ store.describe(null);
47
57
  if (!store.active) return;
48
58
  store.warmUntil = performance.now() + WARM_WINDOW;
49
59
  store.active = null;
package/src/components/composites/tooltip/tooltip.css CHANGED
@@ -1,86 +1,87 @@
1
- /* tooltip.css - the floating tooltip surface (one shared bubble). */
1
+ @layer zyncat.tokens, zyncat.components;
2
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
- }
3
+ @layer zyncat.components {
4
+ /* tooltip.css - the floating tooltip surface (one shared bubble). */
21
5
 
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
- }
6
+ .tooltip {
7
+ position: fixed;
8
+ left: 0;
9
+ top: 0;
10
+ box-sizing: border-box;
11
+ overflow: hidden; /* clips content while the box morphs */
12
+ z-index: var(--layer-tooltip);
13
+ pointer-events: none;
14
+ width: max-content; /* the live bubble gets an animated width; this also sizes the measuring clone */
15
+ padding: var(--space-2) var(--space-3);
16
+ background: var(--bg-surface-raised);
17
+ color: var(--text-body);
18
+ border: var(--border-hairline) solid var(--border-default);
19
+ border-radius: var(--radius-md);
20
+ box-shadow: var(--shadow-lg);
21
+ font: var(--type-caption);
22
+ letter-spacing: var(--tracking-normal);
23
+ }
28
24
 
29
- /* default trigger wrapper - display:contents, so it adds no layout; carries the listeners + rect */
30
- .tooltip-anchor {
31
- display: contents;
32
- }
25
+ /* the hidden twin the host measures the NEXT box from (same styles, no motion) */
26
+ .tooltip--measure {
27
+ visibility: hidden;
28
+ left: -9999px;
29
+ top: 0;
30
+ }
33
31
 
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
- }
32
+ /* default trigger wrapper - display:contents, so it adds no layout; carries the listeners + rect */
33
+ .tooltip-anchor {
34
+ display: contents;
35
+ }
41
36
 
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
- }
37
+ /* wraps at the measure cap; the live body also gets its measured width inline (locked wrapping during the morph) */
38
+ .tooltip__body {
39
+ display: block;
40
+ width: max-content;
41
+ max-inline-size: var(--measure-floating);
42
+ text-wrap: pretty;
43
+ }
55
44
 
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
- }
45
+ /* grow from the trigger's edge (per placement) */
46
+ .tooltip[data-placement='top'] {
47
+ transform-origin: center bottom;
48
+ }
49
+ .tooltip[data-placement='bottom'] {
50
+ transform-origin: center top;
51
+ }
52
+ .tooltip[data-placement='left'] {
53
+ transform-origin: right center;
54
+ }
55
+ .tooltip[data-placement='right'] {
56
+ transform-origin: left center;
57
+ }
72
58
 
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);
59
+ .tooltip__row {
60
+ display: flex;
61
+ align-items: baseline;
62
+ gap: var(--space-3);
63
+ }
64
+ .tooltip__shortcut {
65
+ flex: 0 0 auto;
66
+ font-family: var(--font-mono);
67
+ font-size: var(--size-micro);
68
+ font-variant-numeric: tabular-nums;
69
+ color: var(--text-subtle);
70
+ background: var(--bg-muted);
71
+ padding: 0 var(--space-1);
72
+ border-radius: var(--radius-sm);
73
+ white-space: nowrap;
74
+ }
75
+
76
+ /* Multi-line content - rich nodes style themselves with these; keep hierarchy minimal. */
77
+ .tooltip strong {
78
+ font-weight: var(--weight-medium);
79
+ color: var(--text-strong);
80
+ }
81
+ .tooltip p {
82
+ margin: 0;
83
+ }
84
+ .tooltip p + p {
85
+ margin-top: var(--space-1);
86
+ }
86
87
  }
package/src/components/compound/support-rail/SupportRail.tsx ADDED
@@ -0,0 +1,343 @@
1
+ 'use client';
2
+
3
+ import './support-rail.css';
4
+
5
+ import {
6
+ useId,
7
+ useLayoutEffect,
8
+ useRef,
9
+ type CSSProperties,
10
+ type HTMLAttributes,
11
+ type ReactNode,
12
+ type PointerEvent as ReactPointerEvent,
13
+ type RefObject,
14
+ } from 'react';
15
+
16
+ import type { DataAttributes } from '../../../dom-props';
17
+ import { startDrag, type Layer, type PanInfo } from '../../../engine';
18
+ import { Motion } from '../../../motion/element';
19
+ import { Presence } from '../../../motion/presence';
20
+ import { usePresence } from '../../../motion/presence-context';
21
+ import type { SupportRailStyle } from '../../../tokens/component-styles.generated';
22
+ import { UIMotion } from '../../../tokens/motion-tokens';
23
+ import { useControllable } from '../../internal/hooks/use-controllable';
24
+ import { useReturnFocus } from '../../internal/overlay/focus';
25
+ import { useOutsidePress, useOverlayEntry } from '../../internal/overlay/layer';
26
+ import type { SupportAction } from '../../internal/support/types';
27
+ import { cx } from '../../internal/utils/cx';
28
+
29
+ export type { SupportAction };
30
+
31
+ const RUBBER_BAND_DIVISOR = 6;
32
+ const DISMISS_DISTANCE_PX = 88;
33
+ const DISMISS_VELOCITY_PX_PER_S = 500;
34
+ const FLICK_DISTANCE_PX = 24;
35
+ const CONTENT_FADE_IN_DELAY_RATIO = 0.55;
36
+ const NEUTRAL_RATIO = 1;
37
+ const STAGGER_STEPS_MAX = 8;
38
+
39
+ const DRAG_PROPERTY = '--support-rail-drag';
40
+ const COLLAPSE_X_PROPERTY = '--support-rail-collapse-x';
41
+ const COLLAPSE_Y_PROPERTY = '--support-rail-collapse-y';
42
+ const INDEX_PROPERTY = '--support-rail-index';
43
+ const DRAGGING_ATTRIBUTE = 'data-dragging';
44
+ const NO_DRAG = '0px';
45
+
46
+ const CONTENT_FADE_IN: Layer = {
47
+ opacity: [0, 1],
48
+ timing: { duration: UIMotion.dur.slow, ease: 'linear', delay: UIMotion.dur.base * CONTENT_FADE_IN_DELAY_RATIO },
49
+ };
50
+ const CONTENT_FADE_OUT: Layer = { opacity: [0], timing: { duration: UIMotion.dur.fast, ease: 'linear' } };
51
+
52
+ type GrabHandler = (event: ReactPointerEvent<HTMLElement>) => void;
53
+
54
+ function collapseRatio(needleSpan: number, panelSpan: number): number {
55
+ return panelSpan > 0 ? needleSpan / panelSpan : NEUTRAL_RATIO;
56
+ }
57
+
58
+ function railTravel(offsetX: number, dismissSign: number): number {
59
+ const along = offsetX * dismissSign;
60
+ return along < 0 ? along / RUBBER_BAND_DIVISOR : along;
61
+ }
62
+
63
+ function railDismisses(travel: number, velocityAlong: number): boolean {
64
+ if (travel >= DISMISS_DISTANCE_PX) return true;
65
+ return travel >= FLICK_DISTANCE_PX && velocityAlong >= DISMISS_VELOCITY_PX_PER_S;
66
+ }
67
+
68
+ function indexStyle(index: number): CSSProperties {
69
+ return { [INDEX_PROPERTY]: Math.min(index, STAGGER_STEPS_MAX) } as CSSProperties;
70
+ }
71
+
72
+ function SupportRailBody({
73
+ actions,
74
+ title,
75
+ status,
76
+ footer,
77
+ children,
78
+ panelId,
79
+ titleId,
80
+ panelRef,
81
+ needleRef,
82
+ onGrab,
83
+ requestClose,
84
+ onSelect,
85
+ }: {
86
+ actions: SupportAction[];
87
+ title: string;
88
+ status?: string;
89
+ footer?: ReactNode;
90
+ children?: ReactNode;
91
+ panelId: string;
92
+ titleId: string;
93
+ panelRef: RefObject<HTMLElement>;
94
+ needleRef: RefObject<HTMLElement>;
95
+ onGrab: GrabHandler;
96
+ requestClose: () => void;
97
+ onSelect?: (id: string, action: SupportAction) => void;
98
+ }) {
99
+ const bodyRef = useRef<HTMLElement>(null);
100
+ const { isPresent } = usePresence();
101
+ const entry = useOverlayEntry({ nodeRef: panelRef, dismissible: isPresent, requestClose });
102
+
103
+ useOutsidePress({ entry, refs: [panelRef, needleRef], enabled: isPresent, onPress: requestClose });
104
+ useReturnFocus(panelRef);
105
+
106
+ useLayoutEffect(() => {
107
+ bodyRef.current?.focus({ preventScroll: true });
108
+ }, []);
109
+
110
+ const commit = (action: SupportAction) => {
111
+ action.onSelect?.();
112
+ onSelect?.(action.id, action);
113
+ };
114
+
115
+ return (
116
+ <Motion
117
+ as="div"
118
+ ref={bodyRef}
119
+ animate={CONTENT_FADE_IN}
120
+ exit={CONTENT_FADE_OUT}
121
+ className="support-rail__body"
122
+ id={panelId}
123
+ role="dialog"
124
+ aria-modal="false"
125
+ aria-labelledby={titleId}
126
+ tabIndex={-1}
127
+ >
128
+ <span className="support-rail__grabber" aria-hidden="true" onPointerDown={onGrab}>
129
+ <span className="support-rail__grabber-pill" />
130
+ </span>
131
+
132
+ <div className="support-rail__stack">
133
+ <div className="support-rail__header">
134
+ <div className="support-rail__heading">
135
+ <div className="support-rail__title" id={titleId}>
136
+ {title}
137
+ </div>
138
+ {status && <div className="support-rail__status">{status}</div>}
139
+ </div>
140
+ <button type="button" className="support-rail__close" aria-label="Close" onClick={requestClose}>
141
+ <svg width="9" height="9" viewBox="0 0 9 9" fill="none" stroke="currentColor" strokeWidth="1.3">
142
+ <path d="M1 1l7 7M8 1l-7 7" />
143
+ </svg>
144
+ </button>
145
+ </div>
146
+
147
+ <ul className="support-rail__list">
148
+ {actions.map((action, index) => (
149
+ <li key={action.id}>
150
+ <button
151
+ type="button"
152
+ className="support-rail__row"
153
+ style={indexStyle(index)}
154
+ onClick={() => commit(action)}
155
+ >
156
+ <span className="support-rail__row-icon" aria-hidden="true">
157
+ {action.icon}
158
+ </span>
159
+ <span className="support-rail__row-text">
160
+ <span className="support-rail__row-label">{action.label}</span>
161
+ {action.description && <span className="support-rail__row-note">{action.description}</span>}
162
+ </span>
163
+ {action.meta && <span className="support-rail__row-meta">{action.meta}</span>}
164
+ </button>
165
+ </li>
166
+ ))}
167
+ </ul>
168
+
169
+ <div className="support-rail__extra" style={indexStyle(actions.length)}>
170
+ {children}
171
+ </div>
172
+
173
+ {footer && (
174
+ <div className="support-rail__footer" style={indexStyle(actions.length + 1)}>
175
+ {footer}
176
+ </div>
177
+ )}
178
+ </div>
179
+ </Motion>
180
+ );
181
+ }
182
+
183
+ export interface SupportRailOwnProps {
184
+ /** The rows, in order. Each renders a button carrying its label, optional description and optional meta. @default [] */
185
+ actions: SupportAction[];
186
+ /** Panel heading, and the panel's accessible name. @default 'Talk to us' */
187
+ title?: string;
188
+ /** Small uppercase mono line under the heading - opening hours, queue depth, a shift note. */
189
+ status?: string;
190
+ /** Container edge the rail pins to. Flips the needle, the collapse origin, the drag axis and the vertical label. @default 'right' */
191
+ side?: 'right' | 'left';
192
+ /** Controlled open state. Omit to stay uncontrolled. */
193
+ open?: boolean;
194
+ /** Initial state when uncontrolled. @default false */
195
+ defaultOpen?: boolean;
196
+ /** Fires whenever the open state changes. Pair with `open` for controlled use. */
197
+ onOpenChange?: (open: boolean) => void;
198
+ /** Fires when a row commits - gets its `id` and the full action. The rail stays open; render what happens next in `children`. */
199
+ onSelect?: (id: string, action: SupportAction) => void;
200
+ /** The vertical mono word on the needle. Doubles as the needle's accessible name. @default 'Support' */
201
+ needleLabel?: string;
202
+ /** Availability dot on the needle, with an ambient halo. @default false */
203
+ live?: boolean;
204
+ /** Arbitrary content below the rows; it takes the leftover height and scrolls. */
205
+ children?: ReactNode;
206
+ /** Pinned bottom strip - on-shift avatars, an SLA line, a link out. */
207
+ footer?: ReactNode;
208
+ /** Extra class(es) merged onto the rail root. */
209
+ className?: string;
210
+ /** Inline styles merged onto the rail root - the place to retune the `--support-rail-*` properties. */
211
+ style?: SupportRailStyle;
212
+ }
213
+
214
+ export interface SupportRailProps extends SupportRailOwnProps {
215
+ /** Standard <div> attributes (aria-*, data-*, id, ...) forwarded to the rail root. */
216
+ htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof SupportRailOwnProps> & DataAttributes;
217
+ }
218
+
219
+ export function SupportRail({
220
+ actions = [],
221
+ title = 'Talk to us',
222
+ status,
223
+ side = 'right',
224
+ open: controlledOpen,
225
+ defaultOpen = false,
226
+ onOpenChange,
227
+ onSelect,
228
+ needleLabel = 'Support',
229
+ live = false,
230
+ children,
231
+ footer,
232
+ className = '',
233
+ style,
234
+ htmlProps,
235
+ }: SupportRailProps) {
236
+ const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);
237
+ const rootRef = useRef<HTMLDivElement>(null);
238
+ const needleRef = useRef<HTMLElement>(null);
239
+ const panelRef = useRef<HTMLElement>(null);
240
+ const detach = useRef<(() => void) | null>(null);
241
+ const autoId = useId();
242
+ const panelId = 'support-rail-' + autoId;
243
+ const titleId = panelId + '-title';
244
+ const dismissSign = side === 'right' ? 1 : -1;
245
+ const requestClose = () => setOpen(false);
246
+
247
+ const onGrab: GrabHandler = (event) => {
248
+ const root = rootRef.current;
249
+ if (!root || !open || event.button !== 0 || !event.isPrimary) return;
250
+ detach.current?.();
251
+ root.setAttribute(DRAGGING_ATTRIBUTE, '');
252
+ detach.current = startDrag(event, {
253
+ onMove: (info: PanInfo) =>
254
+ root.style.setProperty(DRAG_PROPERTY, railTravel(info.offset.x, dismissSign) * dismissSign + 'px'),
255
+ onEnd: (info: PanInfo) => {
256
+ detach.current = null;
257
+ root.removeAttribute(DRAGGING_ATTRIBUTE);
258
+ const travel = railTravel(info.offset.x, dismissSign);
259
+ if (railDismisses(travel, info.velocity.x * dismissSign)) requestClose();
260
+ else root.style.setProperty(DRAG_PROPERTY, NO_DRAG);
261
+ },
262
+ });
263
+ };
264
+
265
+ useLayoutEffect(() => {
266
+ const root = rootRef.current;
267
+ const needle = needleRef.current;
268
+ const panel = panelRef.current;
269
+ if (!root || !needle || !panel) return undefined;
270
+ const remeasure = () => {
271
+ root.style.setProperty(COLLAPSE_X_PROPERTY, String(collapseRatio(needle.offsetWidth, panel.offsetWidth)));
272
+ root.style.setProperty(COLLAPSE_Y_PROPERTY, String(collapseRatio(needle.offsetHeight, panel.offsetHeight)));
273
+ };
274
+ remeasure();
275
+ const sizes = new ResizeObserver(remeasure);
276
+ sizes.observe(panel);
277
+ sizes.observe(needle);
278
+ return () => sizes.disconnect();
279
+ }, [side]);
280
+
281
+ useLayoutEffect(() => {
282
+ const root = rootRef.current;
283
+ if (!root || !open) return;
284
+ root.style.setProperty(DRAG_PROPERTY, NO_DRAG);
285
+ root.removeAttribute(DRAGGING_ATTRIBUTE);
286
+ }, [open]);
287
+
288
+ useLayoutEffect(
289
+ () => () => {
290
+ detach.current?.();
291
+ detach.current = null;
292
+ },
293
+ [],
294
+ );
295
+
296
+ return (
297
+ <div
298
+ ref={rootRef}
299
+ className={cx('support-rail', className)}
300
+ style={style}
301
+ data-side={side}
302
+ data-open={open}
303
+ {...htmlProps}
304
+ >
305
+ <button
306
+ type="button"
307
+ ref={needleRef as RefObject<HTMLButtonElement>}
308
+ className="support-rail__needle"
309
+ aria-expanded={open}
310
+ aria-haspopup="dialog"
311
+ aria-controls={open ? panelId : undefined}
312
+ onClick={() => setOpen(!open)}
313
+ >
314
+ {live && <span className="support-rail__live" aria-hidden="true" />}
315
+ <span className="support-rail__needle-label">{needleLabel}</span>
316
+ <span className="support-rail__needle-rule" aria-hidden="true" />
317
+ </button>
318
+
319
+ <div ref={panelRef as RefObject<HTMLDivElement>} className="support-rail__panel">
320
+ <Presence>
321
+ {open && (
322
+ <SupportRailBody
323
+ key="body"
324
+ actions={actions}
325
+ title={title}
326
+ status={status}
327
+ footer={footer}
328
+ panelId={panelId}
329
+ titleId={titleId}
330
+ panelRef={panelRef}
331
+ needleRef={needleRef}
332
+ onGrab={onGrab}
333
+ requestClose={requestClose}
334
+ onSelect={onSelect}
335
+ >
336
+ {children}
337
+ </SupportRailBody>
338
+ )}
339
+ </Presence>
340
+ </div>
341
+ </div>
342
+ );
343
+ }