@zyncat/ui 0.11.0 → 0.12.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 +1809 -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/dist/types/tokens/theme.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { type ThemeSet, type ThemeTokens } from './theme-tokens.generated';
2
+ export type * from './theme-tokens.generated';
3
+ export interface ZyncatThemeProps {
4
+ /**
5
+ * The app's themes. `base` lands on `:root`; every other key becomes a
6
+ * `[data-theme='<key>']` block, activated by setting that attribute on `<html>`
7
+ * or any subtree root.
8
+ */
9
+ theme?: ThemeSet;
10
+ }
11
+ export declare function defineTheme(tokens: ThemeTokens): ThemeTokens;
12
+ export declare function ZyncatTheme({ theme }: ZyncatThemeProps): import("react").JSX.Element;
package/dist/typing-lines.css ADDED
@@ -0,0 +1,92 @@
1
+ @layer zyncat.tokens, zyncat.components;
2
+
3
+ @layer zyncat.components {
4
+ .typing-lines {
5
+ --typing-lines-ink: var(--text-strong);
6
+ --typing-lines-caret-ink: var(--accent);
7
+ --typing-lines-size: var(--size-title);
8
+ --typing-lines-weight: var(--weight-regular);
9
+ --typing-lines-leading: 1.4;
10
+ --typing-lines-blink: 1080ms;
11
+ --typing-lines-caret-gap: 0.12em;
12
+
13
+ position: relative;
14
+ display: block;
15
+ min-height: calc(var(--typing-lines-size) * var(--typing-lines-leading));
16
+ font-family: var(--font-sans);
17
+ font-size: var(--typing-lines-size);
18
+ font-weight: var(--typing-lines-weight);
19
+ line-height: var(--typing-lines-leading);
20
+ color: var(--typing-lines-ink);
21
+ text-wrap: pretty;
22
+ }
23
+
24
+ .typing-lines__label {
25
+ position: absolute;
26
+ width: 1px;
27
+ height: 1px;
28
+ overflow: hidden;
29
+ clip-path: inset(50%);
30
+ white-space: nowrap;
31
+ }
32
+
33
+ .typing-lines__caret {
34
+ display: inline-block;
35
+ margin-left: var(--typing-lines-caret-gap);
36
+ background: var(--typing-lines-caret-ink);
37
+ vertical-align: -0.16em;
38
+ }
39
+
40
+ .typing-lines__caret--line {
41
+ width: 2px;
42
+ height: 1.1em;
43
+ }
44
+
45
+ .typing-lines__caret--block {
46
+ width: 0.52em;
47
+ height: 1.05em;
48
+ border-radius: 1px;
49
+ vertical-align: -0.14em;
50
+ }
51
+
52
+ .typing-lines__caret--underscore {
53
+ width: 0.55em;
54
+ height: 2px;
55
+ vertical-align: -0.08em;
56
+ }
57
+
58
+ .typing-lines__caret--blinking {
59
+ animation: typing-lines-blink var(--typing-lines-blink) step-end infinite;
60
+ }
61
+
62
+ .typing-lines__word {
63
+ display: inline-block;
64
+ animation: typing-lines-word var(--duration-base) var(--ease-entrance) both;
65
+ }
66
+
67
+ @keyframes typing-lines-blink {
68
+ 0% {
69
+ opacity: 1;
70
+ }
71
+ 50% {
72
+ opacity: 0;
73
+ }
74
+ }
75
+
76
+ @keyframes typing-lines-word {
77
+ from {
78
+ opacity: 0;
79
+ translate: 0 0.2em;
80
+ }
81
+ to {
82
+ opacity: 1;
83
+ translate: 0 0;
84
+ }
85
+ }
86
+
87
+ @media (prefers-reduced-motion: reduce) {
88
+ .typing-lines__caret--blinking {
89
+ animation: none;
90
+ }
91
+ }
92
+ }
package/dist/typing-lines.js ADDED
@@ -0,0 +1,139 @@
1
+ 'use client';import { loop } from './chunk-IJS7TPGV.js';
2
+ import './chunk-7IZJERGA.js';
3
+ import { cx } from './chunk-QGNC7LH5.js';
4
+ import './typing-lines.css';
5
+ import { useRef, useEffect } from 'react';
6
+ import { jsxs, jsx } from 'react/jsx-runtime';
7
+
8
+ var CHARACTER_TYPE_MS = 54;
9
+ var CHARACTER_DELETE_MS = 26;
10
+ var WORD_TYPE_MS = 210;
11
+ var WORD_DELETE_MS = 90;
12
+ var HOLD_MS = 2400;
13
+ var WORD_CLASS = "typing-lines__word";
14
+ var BLINKING_CLASS = "typing-lines__caret--blinking";
15
+ var unitsOf = (line, unit) => unit === "word" ? line ? line.split(" ") : [] : [...line];
16
+ function paintWords(el, words, target, progress) {
17
+ while (progress.built > target && el.lastChild) {
18
+ el.removeChild(el.lastChild);
19
+ if (progress.built > 1 && el.lastChild) el.removeChild(el.lastChild);
20
+ progress.built--;
21
+ }
22
+ for (let i = progress.built; i < target; i++) {
23
+ if (i) el.appendChild(document.createTextNode(" "));
24
+ const span = document.createElement("span");
25
+ span.className = WORD_CLASS;
26
+ span.textContent = words[i];
27
+ el.appendChild(span);
28
+ progress.built = i + 1;
29
+ }
30
+ }
31
+ function paint(el, line, unit, count, progress) {
32
+ if (unit === "word") {
33
+ paintWords(el, unitsOf(line, unit), count, progress);
34
+ return;
35
+ }
36
+ el.textContent = [...line].slice(0, count).join("");
37
+ progress.built = 0;
38
+ }
39
+ function advance(progress, dt, lines, unit) {
40
+ const total = unitsOf(lines[progress.index] ?? "", unit).length;
41
+ const typeRate = unit === "word" ? WORD_TYPE_MS : CHARACTER_TYPE_MS;
42
+ const deleteRate = unit === "word" ? WORD_DELETE_MS : CHARACTER_DELETE_MS;
43
+ progress.elapsed += dt;
44
+ if (progress.phase === "typing") {
45
+ if (progress.elapsed > typeRate) {
46
+ progress.elapsed = 0;
47
+ progress.count++;
48
+ if (progress.count >= total) {
49
+ progress.count = total;
50
+ progress.phase = "holding";
51
+ }
52
+ }
53
+ return;
54
+ }
55
+ if (progress.phase === "holding") {
56
+ if (progress.elapsed > HOLD_MS) {
57
+ progress.elapsed = 0;
58
+ progress.phase = "deleting";
59
+ }
60
+ return;
61
+ }
62
+ if (progress.elapsed > deleteRate) {
63
+ progress.elapsed = 0;
64
+ progress.count--;
65
+ if (progress.count <= 0) {
66
+ progress.count = 0;
67
+ progress.phase = "typing";
68
+ progress.elapsed = -420;
69
+ progress.index = lines.length ? (progress.index + 1) % lines.length : 0;
70
+ }
71
+ }
72
+ }
73
+ function TypingLines({
74
+ lines,
75
+ unit = "character",
76
+ caret = "line",
77
+ speed = 1,
78
+ className = "",
79
+ style,
80
+ htmlProps
81
+ }) {
82
+ const rootRef = useRef(null);
83
+ const textRef = useRef(null);
84
+ const caretRef = useRef(null);
85
+ const labelRef = useRef(null);
86
+ const speedRef = useRef(speed);
87
+ const key = lines.join("\0") + "" + unit;
88
+ useEffect(() => {
89
+ speedRef.current = speed;
90
+ }, [speed]);
91
+ useEffect(() => {
92
+ const el = rootRef.current;
93
+ const text = textRef.current;
94
+ if (!el || !text) return;
95
+ const progress = { index: 0, count: 0, phase: "typing", elapsed: 0, built: 0 };
96
+ text.textContent = "";
97
+ const showLabel = () => {
98
+ if (labelRef.current) labelRef.current.textContent = lines[progress.index] ?? "";
99
+ };
100
+ const settle = () => {
101
+ const line = lines[0] ?? "";
102
+ progress.index = 0;
103
+ progress.count = unitsOf(line, unit).length;
104
+ progress.phase = "holding";
105
+ paint(text, line, unit, progress.count, progress);
106
+ caretRef.current?.classList.remove(BLINKING_CLASS);
107
+ showLabel();
108
+ };
109
+ let painted = -1;
110
+ showLabel();
111
+ const playback = loop(
112
+ (_k, dt) => {
113
+ const before = progress.index;
114
+ advance(progress, dt, lines, unit);
115
+ if (progress.index !== before) {
116
+ progress.built = 0;
117
+ text.textContent = "";
118
+ showLabel();
119
+ }
120
+ if (progress.count !== painted) {
121
+ paint(text, lines[progress.index] ?? "", unit, progress.count, progress);
122
+ painted = progress.count;
123
+ }
124
+ caretRef.current?.classList.toggle(BLINKING_CLASS, progress.phase === "holding");
125
+ },
126
+ { el, speed: () => speedRef.current, snap: settle }
127
+ );
128
+ return () => playback.stop();
129
+ }, [key, lines, unit]);
130
+ return /* @__PURE__ */ jsxs("span", { ref: rootRef, className: cx("typing-lines", className), style, ...htmlProps, children: [
131
+ /* @__PURE__ */ jsx("span", { ref: labelRef, className: "typing-lines__label" }),
132
+ /* @__PURE__ */ jsx("span", { ref: textRef, className: "typing-lines__text", "aria-hidden": "true" }),
133
+ caret === "none" ? null : /* @__PURE__ */ jsx("span", { ref: caretRef, className: `typing-lines__caret typing-lines__caret--${caret}`, "aria-hidden": "true" })
134
+ ] });
135
+ }
136
+
137
+ export { TypingLines };
138
+ //# sourceMappingURL=typing-lines.js.map
139
+ //# sourceMappingURL=typing-lines.js.map
package/dist/typing-lines.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/expressive/typing-lines/TypingLines.tsx"],"names":[],"mappings":"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","file":"typing-lines.js","sourcesContent":["'use client';\n\nimport './typing-lines.css';\n\nimport { useEffect, useRef, type HTMLAttributes } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { loop } from '../../../engine';\nimport type { TypingLinesStyle } from '../../../tokens/component-styles.generated';\nimport { cx } from '../../internal/utils/cx';\n\nconst CHARACTER_TYPE_MS = 54;\nconst CHARACTER_DELETE_MS = 26;\nconst WORD_TYPE_MS = 210;\nconst WORD_DELETE_MS = 90;\nconst HOLD_MS = 2400;\nconst RESTART_LEAD_MS = 420;\nconst WORD_CLASS = 'typing-lines__word';\nconst BLINKING_CLASS = 'typing-lines__caret--blinking';\n\nexport type TypingUnit = 'character' | 'word';\nexport type TypingCaret = 'line' | 'block' | 'underscore' | 'none';\n\ntype Phase = 'typing' | 'holding' | 'deleting';\n\ninterface Progress {\n index: number;\n count: number;\n phase: Phase;\n elapsed: number;\n built: number;\n}\n\nconst unitsOf = (line: string, unit: TypingUnit) => (unit === 'word' ? (line ? line.split(' ') : []) : [...line]);\n\nfunction paintWords(el: HTMLElement, words: string[], target: number, progress: Progress) {\n while (progress.built > target && el.lastChild) {\n el.removeChild(el.lastChild);\n if (progress.built > 1 && el.lastChild) el.removeChild(el.lastChild);\n progress.built--;\n }\n for (let i = progress.built; i < target; i++) {\n if (i) el.appendChild(document.createTextNode(' '));\n const span = document.createElement('span');\n span.className = WORD_CLASS;\n span.textContent = words[i];\n el.appendChild(span);\n progress.built = i + 1;\n }\n}\n\nfunction paint(el: HTMLElement, line: string, unit: TypingUnit, count: number, progress: Progress) {\n if (unit === 'word') {\n paintWords(el, unitsOf(line, unit), count, progress);\n return;\n }\n el.textContent = [...line].slice(0, count).join('');\n progress.built = 0;\n}\n\nfunction advance(progress: Progress, dt: number, lines: string[], unit: TypingUnit) {\n const total = unitsOf(lines[progress.index] ?? '', unit).length;\n const typeRate = unit === 'word' ? WORD_TYPE_MS : CHARACTER_TYPE_MS;\n const deleteRate = unit === 'word' ? WORD_DELETE_MS : CHARACTER_DELETE_MS;\n progress.elapsed += dt;\n\n if (progress.phase === 'typing') {\n if (progress.elapsed > typeRate) {\n progress.elapsed = 0;\n progress.count++;\n if (progress.count >= total) {\n progress.count = total;\n progress.phase = 'holding';\n }\n }\n return;\n }\n if (progress.phase === 'holding') {\n if (progress.elapsed > HOLD_MS) {\n progress.elapsed = 0;\n progress.phase = 'deleting';\n }\n return;\n }\n if (progress.elapsed > deleteRate) {\n progress.elapsed = 0;\n progress.count--;\n if (progress.count <= 0) {\n progress.count = 0;\n progress.phase = 'typing';\n progress.elapsed = -RESTART_LEAD_MS;\n progress.index = lines.length ? (progress.index + 1) % lines.length : 0;\n }\n }\n}\n\nexport interface TypingLinesOwnProps {\n /** The lines to type, in order; the sequence restarts once the last one has been deleted. */\n lines: string[];\n /** Whether the line arrives one character or one whole word at a time. @default 'character' */\n unit?: TypingUnit;\n /** Caret shape. It holds solid while characters land and blinks only once the line is idle. @default 'line' */\n caret?: TypingCaret;\n /** Multiplies the typing rate; sampled live on every frame. @default 1 */\n speed?: number;\n /** Extra class(es) merged onto the root. */\n className?: string;\n /** Inline styles merged onto the root. */\n style?: TypingLinesStyle;\n}\n\nexport interface TypingLinesProps extends TypingLinesOwnProps {\n /** Standard <span> attributes (aria-*, data-*, title, ...) forwarded to the root. */\n htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof TypingLinesOwnProps> & DataAttributes;\n}\n\nexport function TypingLines({\n lines,\n unit = 'character',\n caret = 'line',\n speed = 1,\n className = '',\n style,\n htmlProps,\n}: TypingLinesProps) {\n const rootRef = useRef<HTMLSpanElement>(null);\n const textRef = useRef<HTMLSpanElement>(null);\n const caretRef = useRef<HTMLSpanElement>(null);\n const labelRef = useRef<HTMLSpanElement>(null);\n const speedRef = useRef(speed);\n const key = lines.join('\u0000') + '\u0001' + unit;\n\n useEffect(() => {\n speedRef.current = speed;\n }, [speed]);\n\n useEffect(() => {\n const el = rootRef.current;\n const text = textRef.current;\n if (!el || !text) return;\n\n const progress: Progress = { index: 0, count: 0, phase: 'typing', elapsed: 0, built: 0 };\n text.textContent = '';\n\n const showLabel = () => {\n if (labelRef.current) labelRef.current.textContent = lines[progress.index] ?? '';\n };\n const settle = () => {\n const line = lines[0] ?? '';\n progress.index = 0;\n progress.count = unitsOf(line, unit).length;\n progress.phase = 'holding';\n paint(text, line, unit, progress.count, progress);\n caretRef.current?.classList.remove(BLINKING_CLASS);\n showLabel();\n };\n\n let painted = -1;\n showLabel();\n\n const playback = loop(\n (_k, dt) => {\n const before = progress.index;\n advance(progress, dt, lines, unit);\n if (progress.index !== before) {\n progress.built = 0;\n text.textContent = '';\n showLabel();\n }\n if (progress.count !== painted) {\n paint(text, lines[progress.index] ?? '', unit, progress.count, progress);\n painted = progress.count;\n }\n caretRef.current?.classList.toggle(BLINKING_CLASS, progress.phase === 'holding');\n },\n { el, speed: () => speedRef.current, snap: settle },\n );\n\n return () => playback.stop();\n }, [key, lines, unit]);\n\n return (\n <span ref={rootRef} className={cx('typing-lines', className)} style={style} {...htmlProps}>\n <span ref={labelRef} className=\"typing-lines__label\" />\n <span ref={textRef} className=\"typing-lines__text\" aria-hidden=\"true\" />\n {caret === 'none' ? null : (\n <span ref={caretRef} className={`typing-lines__caret typing-lines__caret--${caret}`} aria-hidden=\"true\" />\n )}\n </span>\n );\n}\n"]}
package/dist/weight-field.css ADDED
@@ -0,0 +1,84 @@
1
+ @layer zyncat.tokens, zyncat.components;
2
+
3
+ @layer zyncat.components {
4
+ .weight-field {
5
+ --weight-field-ink: var(--text-strong);
6
+ --weight-field-size: 6rem;
7
+ --weight-field-leading: 1;
8
+ --weight-field-align: center;
9
+ --weight-field-pad: var(--space-6) var(--space-4);
10
+ --weight-field-tracking: -0.05em;
11
+ --weight-field-rest-weight: 300;
12
+ --weight-field-far-weight: 400;
13
+ --weight-field-near-weight: 600;
14
+ --weight-field-peak-weight: 900;
15
+ --weight-field-hover-padding: calc(1em / 12);
16
+ --weight-field-stroke: calc(1em * 125 / 6000);
17
+ --weight-field-stroke-peak: calc(var(--weight-field-stroke) * 2);
18
+ --weight-field-duration: 400ms;
19
+ --weight-field-ease: ease;
20
+ --weight-field-speed: 1;
21
+ --weight-field-ramp: calc(var(--weight-field-duration) / var(--weight-field-speed));
22
+
23
+ position: relative;
24
+ display: flex;
25
+ flex-wrap: wrap;
26
+ justify-content: var(--weight-field-align);
27
+ padding: var(--weight-field-pad);
28
+ font-family: var(--font-sans);
29
+ font-size: var(--weight-field-size);
30
+ font-weight: var(--weight-field-rest-weight);
31
+ font-optical-sizing: auto;
32
+ line-height: var(--weight-field-leading);
33
+ letter-spacing: var(--weight-field-tracking);
34
+ color: var(--weight-field-ink);
35
+ }
36
+
37
+ .weight-field__label {
38
+ position: absolute;
39
+ width: 1px;
40
+ height: 1px;
41
+ overflow: hidden;
42
+ clip-path: inset(50%);
43
+ white-space: nowrap;
44
+ }
45
+
46
+ .weight-field__unit {
47
+ padding-inline: 0;
48
+ font-weight: var(--weight-field-rest-weight);
49
+ -webkit-text-stroke-color: transparent;
50
+ -webkit-text-stroke-width: var(--weight-field-stroke);
51
+ will-change:
52
+ font-weight,
53
+ -webkit-text-stroke-width,
54
+ padding;
55
+ transition:
56
+ font-weight var(--weight-field-ramp) var(--weight-field-ease),
57
+ padding var(--weight-field-ramp) var(--weight-field-ease),
58
+ -webkit-text-stroke-color var(--weight-field-ramp) var(--weight-field-ease);
59
+ }
60
+
61
+ .weight-field__unit:has(+ .weight-field__unit + .weight-field__unit:hover),
62
+ .weight-field__unit:hover + .weight-field__unit + .weight-field__unit {
63
+ font-weight: var(--weight-field-far-weight);
64
+ }
65
+
66
+ .weight-field__unit:has(+ .weight-field__unit:hover),
67
+ .weight-field__unit:hover + .weight-field__unit {
68
+ padding-inline: var(--weight-field-hover-padding);
69
+ font-weight: var(--weight-field-near-weight);
70
+ }
71
+
72
+ .weight-field__unit:hover {
73
+ padding-inline: var(--weight-field-hover-padding);
74
+ font-weight: var(--weight-field-peak-weight);
75
+ -webkit-text-stroke-color: currentcolor;
76
+ -webkit-text-stroke-width: var(--weight-field-stroke-peak);
77
+ }
78
+
79
+ @media (prefers-reduced-motion: reduce) {
80
+ .weight-field {
81
+ --weight-field-duration: 1ms;
82
+ }
83
+ }
84
+ }
package/dist/weight-field.js ADDED
@@ -0,0 +1,17 @@
1
+ import { cx } from './chunk-QGNC7LH5.js';
2
+ import './weight-field.css';
3
+ import { jsxs, jsx } from 'react/jsx-runtime';
4
+
5
+ var SPACE = " ";
6
+ var NO_BREAK_SPACE = "\xA0";
7
+ function WeightField({ text, speed = 1, className = "", style, htmlProps }) {
8
+ const ramp = { ...style, "--weight-field-speed": speed };
9
+ return /* @__PURE__ */ jsxs("span", { className: cx("weight-field", className), style: ramp, ...htmlProps, children: [
10
+ [...text].map((glyph, index) => /* @__PURE__ */ jsx("span", { className: "weight-field__unit", "aria-hidden": "true", children: glyph === SPACE ? NO_BREAK_SPACE : glyph }, index)),
11
+ /* @__PURE__ */ jsx("span", { className: "weight-field__label", children: text })
12
+ ] });
13
+ }
14
+
15
+ export { WeightField };
16
+ //# sourceMappingURL=weight-field.js.map
17
+ //# sourceMappingURL=weight-field.js.map
package/dist/weight-field.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/expressive/weight-field/WeightField.tsx"],"names":[],"mappings":";;;;AAQA,IAAM,KAAA,GAAQ,GAAA;AACd,IAAM,cAAA,GAAiB,MAAA;AAkBhB,SAAS,WAAA,CAAY,EAAE,IAAA,EAAM,KAAA,GAAQ,GAAG,SAAA,GAAY,EAAA,EAAI,KAAA,EAAO,SAAA,EAAU,EAAqB;AACnG,EAAA,MAAM,IAAA,GAAO,EAAE,GAAG,KAAA,EAAO,wBAAwB,KAAA,EAAM;AAEvD,EAAA,uBACE,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,EAAA,CAAG,cAAA,EAAgB,SAAS,CAAA,EAAG,KAAA,EAAO,IAAA,EAAO,GAAG,SAAA,EAC9D,QAAA,EAAA;AAAA,IAAA,CAAC,GAAG,IAAI,CAAA,CAAE,IAAI,CAAC,KAAA,EAAO,0BACrB,GAAA,CAAC,MAAA,EAAA,EAAiB,SAAA,EAAU,oBAAA,EAAqB,eAAY,MAAA,EAC1D,QAAA,EAAA,KAAA,KAAU,QAAQ,cAAA,GAAiB,KAAA,EAAA,EAD3B,KAEX,CACD,CAAA;AAAA,oBACD,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,qBAAA,EAAuB,QAAA,EAAA,IAAA,EAAK;AAAA,GAAA,EAC9C,CAAA;AAEJ","file":"weight-field.js","sourcesContent":["import './weight-field.css';\n\nimport type { CSSProperties, HTMLAttributes } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport type { WeightFieldStyle } from '../../../tokens/component-styles.generated';\nimport { cx } from '../../internal/utils/cx';\n\nconst SPACE = ' ';\nconst NO_BREAK_SPACE = '\\u00A0';\n\nexport interface WeightFieldOwnProps {\n /** The headline the field is built from. Every character becomes its own hover unit, spaces included. */\n text: string;\n /** Multiplies the ramp rate - 2 halves the settle, 0.5 doubles it. @default 1 */\n speed?: number;\n /** Extra class(es) merged onto the root. */\n className?: string;\n /** Inline styles merged onto the root. */\n style?: WeightFieldStyle;\n}\n\nexport interface WeightFieldProps extends WeightFieldOwnProps {\n /** Standard <span> attributes (aria-*, data-*, title, ...) forwarded to the root. */\n htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof WeightFieldOwnProps> & DataAttributes;\n}\n\nexport function WeightField({ text, speed = 1, className = '', style, htmlProps }: WeightFieldProps) {\n const ramp = { ...style, '--weight-field-speed': speed } as CSSProperties;\n\n return (\n <span className={cx('weight-field', className)} style={ramp} {...htmlProps}>\n {[...text].map((glyph, index) => (\n <span key={index} className=\"weight-field__unit\" aria-hidden=\"true\">\n {glyph === SPACE ? NO_BREAK_SPACE : glyph}\n </span>\n ))}\n <span className=\"weight-field__label\">{text}</span>\n </span>\n );\n}\n"]}