@rinzai/zen 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 (289) hide show
  1. package/README.md +37 -7
  2. package/dist/accordion/index.d.ts +41 -0
  3. package/dist/accordion/index.d.ts.map +1 -0
  4. package/dist/accordion/index.js +81 -0
  5. package/dist/animated-number/index.d.ts +3 -2
  6. package/dist/animated-number/index.d.ts.map +1 -1
  7. package/dist/animated-number/index.js +40 -38
  8. package/dist/avatar/index.d.ts +7 -2
  9. package/dist/avatar/index.d.ts.map +1 -1
  10. package/dist/avatar/index.js +17 -11
  11. package/dist/backdrop/index.d.ts +4 -4
  12. package/dist/backdrop/index.d.ts.map +1 -1
  13. package/dist/backdrop/index.js +41 -39
  14. package/dist/badge/index.d.ts +4 -2
  15. package/dist/badge/index.d.ts.map +1 -1
  16. package/dist/badge/index.js +20 -11
  17. package/dist/base.css +4 -0
  18. package/dist/breadcrumbs/index.d.ts +1 -1
  19. package/dist/breadcrumbs/index.d.ts.map +1 -1
  20. package/dist/breadcrumbs/index.js +25 -24
  21. package/dist/button/index.d.ts +3 -3
  22. package/dist/button/index.d.ts.map +1 -1
  23. package/dist/button/index.js +16 -11
  24. package/dist/button-group/index.d.ts +13 -0
  25. package/dist/button-group/index.d.ts.map +1 -0
  26. package/dist/button-group/index.js +14 -0
  27. package/dist/calendar/index.d.ts +15 -8
  28. package/dist/calendar/index.d.ts.map +1 -1
  29. package/dist/calendar/index.js +97 -91
  30. package/dist/calendar-heatmap/index.d.ts +7 -5
  31. package/dist/calendar-heatmap/index.d.ts.map +1 -1
  32. package/dist/calendar-heatmap/index.js +32 -30
  33. package/dist/canvas/geometry.js +0 -1
  34. package/dist/canvas/index.d.ts +6 -6
  35. package/dist/canvas/index.d.ts.map +1 -1
  36. package/dist/canvas/index.js +135 -133
  37. package/dist/carousel/index.d.ts +27 -0
  38. package/dist/carousel/index.d.ts.map +1 -0
  39. package/dist/carousel/index.js +162 -0
  40. package/dist/chart/index.d.ts +5 -4
  41. package/dist/chart/index.d.ts.map +1 -1
  42. package/dist/chart/index.js +137 -135
  43. package/dist/chart/palette.js +0 -1
  44. package/dist/checkbox/index.d.ts +3 -3
  45. package/dist/checkbox/index.d.ts.map +1 -1
  46. package/dist/checkbox/index.js +33 -30
  47. package/dist/chip/index.js +1 -1
  48. package/dist/code-block/index.d.ts.map +1 -1
  49. package/dist/code-block/index.js +27 -25
  50. package/dist/code-input/index.d.ts.map +1 -1
  51. package/dist/code-input/index.js +30 -24
  52. package/dist/collapse/index.d.ts +4 -3
  53. package/dist/collapse/index.d.ts.map +1 -1
  54. package/dist/collapse/index.js +42 -39
  55. package/dist/color-picker/index.d.ts +14 -7
  56. package/dist/color-picker/index.d.ts.map +1 -1
  57. package/dist/color-picker/index.js +139 -128
  58. package/dist/combobox/index.d.ts +14 -6
  59. package/dist/combobox/index.d.ts.map +1 -1
  60. package/dist/combobox/index.js +158 -146
  61. package/dist/command-palette/index.d.ts +4 -3
  62. package/dist/command-palette/index.d.ts.map +1 -1
  63. package/dist/command-palette/index.js +60 -57
  64. package/dist/confirm-dialog/index.d.ts +6 -7
  65. package/dist/confirm-dialog/index.d.ts.map +1 -1
  66. package/dist/confirm-dialog/index.js +20 -16
  67. package/dist/date-picker/index.d.ts +23 -14
  68. package/dist/date-picker/index.d.ts.map +1 -1
  69. package/dist/date-picker/index.js +109 -93
  70. package/dist/dialog/index.d.ts +3 -4
  71. package/dist/dialog/index.d.ts.map +1 -1
  72. package/dist/dialog/index.js +58 -55
  73. package/dist/disclosure/index.d.ts +8 -0
  74. package/dist/disclosure/index.d.ts.map +1 -1
  75. package/dist/disclosure/index.js +31 -32
  76. package/dist/editable-cell/index.d.ts +4 -5
  77. package/dist/editable-cell/index.d.ts.map +1 -1
  78. package/dist/editable-cell/index.js +23 -22
  79. package/dist/field/index.d.ts +8 -8
  80. package/dist/field/index.d.ts.map +1 -1
  81. package/dist/field/index.js +20 -18
  82. package/dist/filter-bar/index.d.ts +2 -2
  83. package/dist/filter-bar/index.d.ts.map +1 -1
  84. package/dist/filter-bar/index.js +38 -36
  85. package/dist/header/index.d.ts +1 -1
  86. package/dist/header/index.d.ts.map +1 -1
  87. package/dist/header/index.js +13 -11
  88. package/dist/hover-card/index.d.ts +32 -0
  89. package/dist/hover-card/index.d.ts.map +1 -0
  90. package/dist/hover-card/index.js +84 -0
  91. package/dist/icon-picker/index.d.ts +16 -5
  92. package/dist/icon-picker/index.d.ts.map +1 -1
  93. package/dist/icon-picker/index.js +42 -47
  94. package/dist/icons/micro/plus.d.ts +3 -0
  95. package/dist/icons/micro/plus.d.ts.map +1 -0
  96. package/dist/icons/micro/plus.js +17 -0
  97. package/dist/index.d.ts +37 -24
  98. package/dist/index.d.ts.map +1 -1
  99. package/dist/input/index.d.ts +5 -1
  100. package/dist/input/index.d.ts.map +1 -1
  101. package/dist/input/index.js +9 -9
  102. package/dist/input-group/index.d.ts +4 -1
  103. package/dist/input-group/index.d.ts.map +1 -1
  104. package/dist/input-group/index.js +14 -14
  105. package/dist/keypad/index.d.ts +9 -7
  106. package/dist/keypad/index.d.ts.map +1 -1
  107. package/dist/keypad/index.js +22 -19
  108. package/dist/lib.js +112 -97
  109. package/dist/load-more/index.d.ts +4 -2
  110. package/dist/load-more/index.d.ts.map +1 -1
  111. package/dist/load-more/index.js +26 -23
  112. package/dist/locale-provider/index.d.ts +23 -0
  113. package/dist/locale-provider/index.d.ts.map +1 -0
  114. package/dist/locale-provider/index.js +35 -0
  115. package/dist/menu/index.d.ts +62 -9
  116. package/dist/menu/index.d.ts.map +1 -1
  117. package/dist/menu/index.js +371 -128
  118. package/dist/meter/index.d.ts +2 -2
  119. package/dist/meter/index.d.ts.map +1 -1
  120. package/dist/meter/index.js +4 -4
  121. package/dist/money-input/index.d.ts +20 -10
  122. package/dist/money-input/index.d.ts.map +1 -1
  123. package/dist/money-input/index.js +199 -190
  124. package/dist/month-picker/index.d.ts +17 -10
  125. package/dist/month-picker/index.d.ts.map +1 -1
  126. package/dist/month-picker/index.js +97 -86
  127. package/dist/navigation-menu/index.d.ts +42 -0
  128. package/dist/navigation-menu/index.d.ts.map +1 -0
  129. package/dist/navigation-menu/index.js +144 -0
  130. package/dist/number-field/index.d.ts +34 -0
  131. package/dist/number-field/index.d.ts.map +1 -0
  132. package/dist/number-field/index.js +119 -0
  133. package/dist/page-header/index.d.ts +4 -3
  134. package/dist/page-header/index.d.ts.map +1 -1
  135. package/dist/page-header/index.js +2 -1
  136. package/dist/pagination/index.d.ts +1 -1
  137. package/dist/pagination/index.d.ts.map +1 -1
  138. package/dist/pagination/index.js +35 -33
  139. package/dist/progress-ring/index.d.ts +4 -3
  140. package/dist/progress-ring/index.d.ts.map +1 -1
  141. package/dist/progress-ring/index.js +11 -10
  142. package/dist/radio-cards/index.d.ts +9 -5
  143. package/dist/radio-cards/index.d.ts.map +1 -1
  144. package/dist/radio-cards/index.js +26 -24
  145. package/dist/radio-group/index.d.ts +9 -8
  146. package/dist/radio-group/index.d.ts.map +1 -1
  147. package/dist/radio-group/index.js +35 -34
  148. package/dist/range-slider/index.d.ts +10 -4
  149. package/dist/range-slider/index.d.ts.map +1 -1
  150. package/dist/range-slider/index.js +43 -31
  151. package/dist/repeat-picker/index.d.ts +13 -6
  152. package/dist/repeat-picker/index.d.ts.map +1 -1
  153. package/dist/repeat-picker/index.js +73 -61
  154. package/dist/resizable/index.d.ts +29 -0
  155. package/dist/resizable/index.d.ts.map +1 -0
  156. package/dist/resizable/index.js +135 -0
  157. package/dist/segmented/index.d.ts +8 -5
  158. package/dist/segmented/index.d.ts.map +1 -1
  159. package/dist/segmented/index.js +36 -34
  160. package/dist/select/index.d.ts +9 -3
  161. package/dist/select/index.d.ts.map +1 -1
  162. package/dist/select/index.js +99 -96
  163. package/dist/separator/index.d.ts +14 -0
  164. package/dist/separator/index.d.ts.map +1 -0
  165. package/dist/separator/index.js +15 -0
  166. package/dist/side-nav/index.js +1 -1
  167. package/dist/skeleton/index.d.ts +4 -4
  168. package/dist/skeleton/index.d.ts.map +1 -1
  169. package/dist/skeleton/index.js +4 -3
  170. package/dist/slider/index.d.ts +6 -3
  171. package/dist/slider/index.d.ts.map +1 -1
  172. package/dist/slider/index.js +29 -23
  173. package/dist/sortable/index.d.ts +10 -20
  174. package/dist/sortable/index.d.ts.map +1 -1
  175. package/dist/sortable/index.js +72 -134
  176. package/dist/sortable/shared.d.ts +56 -0
  177. package/dist/sortable/shared.d.ts.map +1 -0
  178. package/dist/sortable/shared.js +104 -0
  179. package/dist/sortable/tree-model.d.ts +46 -0
  180. package/dist/sortable/tree-model.d.ts.map +1 -0
  181. package/dist/sortable/tree-model.js +87 -0
  182. package/dist/sortable/tree.d.ts +31 -0
  183. package/dist/sortable/tree.d.ts.map +1 -0
  184. package/dist/sortable/tree.js +150 -0
  185. package/dist/sparkline/index.d.ts +1 -1
  186. package/dist/sparkline/index.d.ts.map +1 -1
  187. package/dist/sparkline/index.js +26 -25
  188. package/dist/spinner/index.d.ts +4 -3
  189. package/dist/spinner/index.d.ts.map +1 -1
  190. package/dist/spinner/index.js +2 -1
  191. package/dist/status-pill/index.d.ts.map +1 -1
  192. package/dist/status-pill/index.js +1 -1
  193. package/dist/stepper/index.d.ts +1 -1
  194. package/dist/stepper/index.d.ts.map +1 -1
  195. package/dist/stepper/index.js +31 -30
  196. package/dist/tab-bar/index.js +1 -1
  197. package/dist/table/index.d.ts +5 -5
  198. package/dist/table/index.d.ts.map +1 -1
  199. package/dist/table/index.js +66 -64
  200. package/dist/table/selection.d.ts +2 -2
  201. package/dist/table/selection.d.ts.map +1 -1
  202. package/dist/table/selection.js +41 -38
  203. package/dist/table/swipe.d.ts +1 -1
  204. package/dist/table/swipe.d.ts.map +1 -1
  205. package/dist/table/swipe.js +1 -1
  206. package/dist/table-of-contents/index.d.ts +4 -2
  207. package/dist/table-of-contents/index.d.ts.map +1 -1
  208. package/dist/table-of-contents/index.js +27 -25
  209. package/dist/tabs/index.d.ts.map +1 -1
  210. package/dist/tabs/index.js +90 -88
  211. package/dist/tag-input/index.d.ts +3 -1
  212. package/dist/tag-input/index.d.ts.map +1 -1
  213. package/dist/tag-input/index.js +61 -52
  214. package/dist/theme-toggle/index.d.ts +9 -8
  215. package/dist/theme-toggle/index.d.ts.map +1 -1
  216. package/dist/theme-toggle/index.js +30 -28
  217. package/dist/theme.css +90 -12
  218. package/dist/time-field/index.d.ts +31 -0
  219. package/dist/time-field/index.d.ts.map +1 -0
  220. package/dist/time-field/index.js +175 -0
  221. package/dist/timeline/index.js +1 -1
  222. package/dist/toast/index.d.ts +1 -1
  223. package/dist/toast/index.d.ts.map +1 -1
  224. package/dist/toast/index.js +127 -125
  225. package/dist/toggle/index.d.ts +2 -2
  226. package/dist/toggle/index.d.ts.map +1 -1
  227. package/dist/toggle/index.js +8 -6
  228. package/dist/toggle-group/index.d.ts +35 -0
  229. package/dist/toggle-group/index.d.ts.map +1 -0
  230. package/dist/toggle-group/index.js +53 -0
  231. package/dist/toolbar/index.d.ts +19 -0
  232. package/dist/toolbar/index.d.ts.map +1 -0
  233. package/dist/toolbar/index.js +36 -0
  234. package/dist/tooltip/index.d.ts.map +1 -1
  235. package/dist/tooltip/index.js +40 -74
  236. package/dist/tree/index.d.ts.map +1 -1
  237. package/dist/tree/index.js +105 -102
  238. package/dist/trend/index.d.ts +2 -2
  239. package/dist/trend/index.d.ts.map +1 -1
  240. package/dist/trend/index.js +20 -19
  241. package/dist/utils/color.js +0 -1
  242. package/dist/utils/cva.js +0 -1
  243. package/dist/utils/cx.js +0 -1
  244. package/dist/utils/date.d.ts +6 -0
  245. package/dist/utils/date.d.ts.map +1 -1
  246. package/dist/utils/date.js +1 -2
  247. package/dist/utils/direction.d.ts +7 -0
  248. package/dist/utils/direction.d.ts.map +1 -0
  249. package/dist/utils/direction.js +6 -0
  250. package/dist/utils/form-value.d.ts +15 -0
  251. package/dist/utils/form-value.d.ts.map +1 -0
  252. package/dist/utils/form-value.js +29 -0
  253. package/dist/utils/fx.js +0 -1
  254. package/dist/utils/merge.js +0 -1
  255. package/dist/utils/messages.d.ts +137 -0
  256. package/dist/utils/messages.d.ts.map +1 -0
  257. package/dist/utils/messages.js +133 -0
  258. package/dist/utils/money.js +0 -1
  259. package/dist/utils/month.js +0 -1
  260. package/dist/utils/motion.js +0 -1
  261. package/dist/utils/refs.d.ts +6 -0
  262. package/dist/utils/refs.d.ts.map +1 -0
  263. package/dist/utils/refs.js +13 -0
  264. package/dist/utils/repeat.d.ts +3 -1
  265. package/dist/utils/repeat.d.ts.map +1 -1
  266. package/dist/utils/repeat.js +28 -25
  267. package/dist/utils/roving.d.ts +17 -0
  268. package/dist/utils/roving.d.ts.map +1 -0
  269. package/dist/utils/roving.js +35 -0
  270. package/dist/utils/section-link.js +0 -1
  271. package/dist/utils/slot.d.ts.map +1 -1
  272. package/dist/utils/slot.js +7 -11
  273. package/dist/utils/status-icons.js +7 -7
  274. package/dist/utils/styles.d.ts +9 -2
  275. package/dist/utils/styles.d.ts.map +1 -1
  276. package/dist/utils/styles.js +6 -3
  277. package/dist/utils/theme-wave.js +0 -1
  278. package/dist/utils/theme.js +0 -1
  279. package/dist/utils/useAnchoredPopup.d.ts +7 -4
  280. package/dist/utils/useAnchoredPopup.d.ts.map +1 -1
  281. package/dist/utils/useAnchoredPopup.js +18 -11
  282. package/dist/utils/useControllable.d.ts +9 -0
  283. package/dist/utils/useControllable.d.ts.map +1 -0
  284. package/dist/utils/useControllable.js +15 -0
  285. package/dist/utils/useHoverPopup.d.ts +39 -0
  286. package/dist/utils/useHoverPopup.d.ts.map +1 -0
  287. package/dist/utils/useHoverPopup.js +64 -0
  288. package/dist/zen.css +1 -1
  289. package/package.json +1 -1
package/dist/theme.css CHANGED
@@ -118,6 +118,14 @@
118
118
  var(--glass-shadow);
119
119
  }
120
120
 
121
+ /*
122
+ * The keyboard focus ring every control shows: 2px in the ring colour, at half. Inline
123
+ * text links use an outline instead, which follows the text as it wraps.
124
+ */
125
+ @utility focus-ring {
126
+ @apply focus-visible:ring-ring/50 outline-hidden focus-visible:ring-2;
127
+ }
128
+
121
129
  /*
122
130
  * Border that lights up near the pointer. <Backdrop> writes the pointer
123
131
  * position into each element's --gx/--gy, so neighbouring cards light up
@@ -214,6 +222,62 @@
214
222
  }
215
223
  }
216
224
 
225
+ /*
226
+ * Ambient glow, for pages that never get a pointer (an OBS browser source, a
227
+ * kiosk): data-zen-glow="ambient" on an element or any ancestor (<html> for the
228
+ * whole page) sends the edge light slowly round each border by itself. The
229
+ * position is registered so it can animate; it's animated per element, so only
230
+ * lit elements restyle. Still (at the top-left corner) with reduced motion or
231
+ * lite graphics.
232
+ */
233
+ @property --zen-glow-x {
234
+ syntax: '<length-percentage>';
235
+ inherits: false;
236
+ initial-value: 0%;
237
+ }
238
+ @property --zen-glow-y {
239
+ syntax: '<length-percentage>';
240
+ inherits: false;
241
+ initial-value: 0%;
242
+ }
243
+ @keyframes zen-glow-orbit {
244
+ 0%,
245
+ 100% {
246
+ --zen-glow-x: 0%;
247
+ --zen-glow-y: 0%;
248
+ }
249
+ 25% {
250
+ --zen-glow-x: 100%;
251
+ --zen-glow-y: 0%;
252
+ }
253
+ 50% {
254
+ --zen-glow-x: 100%;
255
+ --zen-glow-y: 100%;
256
+ }
257
+ 75% {
258
+ --zen-glow-x: 0%;
259
+ --zen-glow-y: 100%;
260
+ }
261
+ }
262
+ :is([data-zen-glow='ambient'], [data-zen-glow='ambient'] *).glow-edge::before,
263
+ :is([data-zen-glow='ambient'], [data-zen-glow='ambient'] *).glow-border {
264
+ --gx: var(--zen-glow-x);
265
+ --gy: var(--zen-glow-y);
266
+ animation: zen-glow-orbit 12s linear infinite;
267
+ }
268
+ @media (prefers-reduced-motion: reduce) {
269
+ :is([data-zen-glow='ambient'], [data-zen-glow='ambient'] *).glow-edge::before,
270
+ :is([data-zen-glow='ambient'], [data-zen-glow='ambient'] *).glow-border {
271
+ animation: none;
272
+ }
273
+ }
274
+ :is(html.reduce-motion, html[data-zen-graphics='lite'])
275
+ :is([data-zen-glow='ambient'], [data-zen-glow='ambient'] *).glow-edge::before,
276
+ :is(html.reduce-motion, html[data-zen-graphics='lite'])
277
+ :is([data-zen-glow='ambient'], [data-zen-glow='ambient'] *).glow-border {
278
+ animation: none;
279
+ }
280
+
217
281
  /*
218
282
  * Built from Tailwind's backdrop utilities, which emit the standard and -webkit-
219
283
  * properties correctly. Where there's no live blur, the surface is solid: a
@@ -333,7 +397,7 @@ html[data-zen-graphics='lite'] :is(.zen-topo--lit, .zen-dots--lit) {
333
397
  * No transition: animating every sticky cell's frost costs frames mid-scroll.
334
398
  */
335
399
  .zen__table-container[data-under-top] .zen__sticky-top,
336
- .zen__table-container[data-under-left] .zen__sticky-left,
400
+ .zen__table-container[data-under-start] .zen__sticky-start,
337
401
  .zen__table-container[data-under-bottom] .zen__sticky-bottom {
338
402
  --zen-sticky-fill: oklch(var(--card) / 0.6);
339
403
  background-color: var(--zen-sticky-fill);
@@ -341,7 +405,7 @@ html[data-zen-graphics='lite'] :is(.zen-topo--lit, .zen-dots--lit) {
341
405
  backdrop-filter: blur(18px) saturate(1.4);
342
406
  }
343
407
  html[data-zen-graphics='lite'] .zen__table-container[data-under-top] .zen__sticky-top,
344
- html[data-zen-graphics='lite'] .zen__table-container[data-under-left] .zen__sticky-left,
408
+ html[data-zen-graphics='lite'] .zen__table-container[data-under-start] .zen__sticky-start,
345
409
  html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__sticky-bottom {
346
410
  --zen-sticky-fill: oklch(var(--card));
347
411
  -webkit-backdrop-filter: none;
@@ -349,7 +413,7 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
349
413
  }
350
414
  @media (hover: none), (pointer: coarse), (prefers-reduced-transparency: reduce) {
351
415
  .zen__table-container[data-under-top] .zen__sticky-top,
352
- .zen__table-container[data-under-left] .zen__sticky-left,
416
+ .zen__table-container[data-under-start] .zen__sticky-start,
353
417
  .zen__table-container[data-under-bottom] .zen__sticky-bottom {
354
418
  --zen-sticky-fill: oklch(var(--card));
355
419
  -webkit-backdrop-filter: none;
@@ -969,12 +1033,20 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
969
1033
  transition:
970
1034
  opacity 150ms,
971
1035
  margin-block 180ms var(--ease-out-soft),
1036
+ margin-inline 180ms var(--ease-out-soft),
972
1037
  overlay 180ms allow-discrete,
973
1038
  display 180ms allow-discrete;
974
1039
  }
975
1040
  .zen__popover:not(:popover-open) {
976
1041
  margin-block: calc((var(--zen-anchor-offset, 4) - 6) * 1px);
977
1042
  }
1043
+ /* One beside its trigger (a submenu) slides out sideways. */
1044
+ .zen__popover[data-zen-beside] {
1045
+ margin-inline: calc(var(--zen-anchor-offset, 4) * 1px);
1046
+ }
1047
+ .zen__popover[data-zen-beside]:not(:popover-open) {
1048
+ margin-inline: calc((var(--zen-anchor-offset, 4) - 6) * 1px);
1049
+ }
978
1050
  .zen__dialog {
979
1051
  /*
980
1052
  * Fixed to the viewport, as the browser places modal dialogs. glow-edge sets
@@ -995,10 +1067,13 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
995
1067
  overlay 150ms allow-discrete,
996
1068
  display 150ms allow-discrete;
997
1069
  }
1070
+ /* Hidden when shut even if a className lays it out (flex, grid): those would beat the browser's own display: none. */
998
1071
  .zen__popover:not(:popover-open) {
1072
+ display: none;
999
1073
  opacity: 0;
1000
1074
  }
1001
1075
  .zen__dialog:not([open]) {
1076
+ display: none;
1002
1077
  opacity: 0;
1003
1078
  scale: 0.95;
1004
1079
  }
@@ -1015,7 +1090,7 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
1015
1090
  /* Sheets slide from their edge instead of scaling up. */
1016
1091
  .zen__dialog[data-side] {
1017
1092
  transition:
1018
- translate 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
1093
+ translate 320ms var(--ease-out-soft),
1019
1094
  opacity 200ms,
1020
1095
  overlay 320ms allow-discrete,
1021
1096
  display 320ms allow-discrete;
@@ -1052,6 +1127,9 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
1052
1127
  opacity: 0;
1053
1128
  margin-block: calc((var(--zen-anchor-offset, 4) - 6) * 1px);
1054
1129
  }
1130
+ .zen__popover[data-zen-beside]:popover-open {
1131
+ margin-inline: calc((var(--zen-anchor-offset, 4) - 6) * 1px);
1132
+ }
1055
1133
  .zen__dialog[open] {
1056
1134
  opacity: 0;
1057
1135
  scale: 0.95;
@@ -1126,7 +1204,7 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
1126
1204
  overflow: hidden;
1127
1205
  }
1128
1206
  .zen__tree-row-enter .zen__tree-cell {
1129
- animation: zen-row-open 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
1207
+ animation: zen-row-open 260ms var(--ease-out-soft) both;
1130
1208
  }
1131
1209
  .zen__tree-row-exit .zen__tree-cell {
1132
1210
  animation: zen-row-close 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
@@ -1247,7 +1325,7 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
1247
1325
  */
1248
1326
  ::view-transition-group(*.zen-morph) {
1249
1327
  animation-duration: 0.42s;
1250
- animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
1328
+ animation-timing-function: var(--ease-out-soft);
1251
1329
  }
1252
1330
  ::view-transition-image-pair(*.zen-morph) {
1253
1331
  overflow: clip;
@@ -1267,13 +1345,13 @@ html:active-view-transition .zen__page-transition {
1267
1345
  }
1268
1346
  ::view-transition-group(zen-page) {
1269
1347
  animation-duration: 0.34s;
1270
- animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
1348
+ animation-timing-function: var(--ease-out-soft);
1271
1349
  }
1272
1350
  ::view-transition-old(zen-page) {
1273
1351
  animation: zen-page-out 0.16s ease-in both;
1274
1352
  }
1275
1353
  ::view-transition-new(zen-page) {
1276
- animation: zen-page-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) 0.06s both;
1354
+ animation: zen-page-in 0.34s var(--ease-out-soft) 0.06s both;
1277
1355
  }
1278
1356
  @keyframes zen-page-out {
1279
1357
  to {
@@ -1313,7 +1391,7 @@ html.reduce-motion::view-transition-new(zen-page) {
1313
1391
 
1314
1392
  /* Content arriving where its placeholder was. */
1315
1393
  .zen__reveal {
1316
- animation: zen-reveal 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
1394
+ animation: zen-reveal 0.45s var(--ease-out-soft) both;
1317
1395
  }
1318
1396
  @keyframes zen-reveal {
1319
1397
  from {
@@ -1324,7 +1402,7 @@ html.reduce-motion::view-transition-new(zen-page) {
1324
1402
 
1325
1403
  /* A progress ring reaching its goal: a ring of glow goes out from the arc as it closes. */
1326
1404
  .zen__ring-burst {
1327
- animation: zen-ring-burst 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both;
1405
+ animation: zen-ring-burst 0.9s var(--ease-out-soft) 0.5s both;
1328
1406
  box-shadow: 0 0 18px oklch(var(--glow) / calc(0.6 * var(--glow-k)));
1329
1407
  }
1330
1408
  @keyframes zen-ring-burst {
@@ -1340,7 +1418,7 @@ html.reduce-motion::view-transition-new(zen-page) {
1340
1418
 
1341
1419
  /* A value just changed by an edit. */
1342
1420
  .zen__editable-cell[data-changed] {
1343
- animation: zen-cell-changed 1s cubic-bezier(0.2, 0.8, 0.2, 1);
1421
+ animation: zen-cell-changed 1s var(--ease-out-soft);
1344
1422
  }
1345
1423
  @keyframes zen-cell-changed {
1346
1424
  from {
@@ -1443,7 +1521,7 @@ html.reduce-motion::view-transition-new(zen-page) {
1443
1521
  .zen__chart-grow {
1444
1522
  transform-box: fill-box;
1445
1523
  transform-origin: bottom;
1446
- animation: zen-chart-grow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
1524
+ animation: zen-chart-grow 0.6s var(--ease-out-soft) both;
1447
1525
  }
1448
1526
  .zen__chart-grow[data-negative] {
1449
1527
  transform-origin: top;
@@ -0,0 +1,31 @@
1
+ import { FieldSize } from '../utils/styles';
2
+ import { ComponentProps } from 'react';
3
+ /** A time of day as "HH:MM", 24-hour: no date and no time zone, like DateString. */
4
+ export type TimeString = string;
5
+ /**
6
+ * A time of day, typed or stepped a part at a time: hour, minute and, where
7
+ * the locale uses a 12-hour clock, AM/PM, in the locale's order and digits.
8
+ * Type digits (it moves on when a part is full), ↑↓ to step (minutes by
9
+ * `step`), ←→ between parts, Backspace to clear one. The value is "HH:MM"
10
+ * (24-hour) once every part is set, and null until then.
11
+ */
12
+ export default function TimeField({ value: valueProp, defaultValue, onValueChange, step, locale: localeProp, name, size, invalid, disabled, className, onMouseDown, ...rest }: TimeFieldProps): import('react').JSX.Element;
13
+ export interface TimeFieldProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange'> {
14
+ /** "HH:MM" (24-hour), or null, when you keep it. */
15
+ value?: TimeString | null;
16
+ /** The first time, when the field keeps its own. */
17
+ defaultValue?: TimeString | null;
18
+ onValueChange?: (value: TimeString | null) => void;
19
+ /** Minutes ↑↓ move by, e.g. 5 or 15. Default 1. */
20
+ step?: number;
21
+ /** Defaults to the LocaleProvider's. */
22
+ locale?: string;
23
+ /** Form field name: the time is submitted under it as "HH:MM". */
24
+ name?: string;
25
+ /** Height, matching Button's. */
26
+ size?: FieldSize;
27
+ disabled?: boolean;
28
+ /** Show the field in its error state. */
29
+ invalid?: boolean;
30
+ }
31
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/time-field/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAA4B,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE7E,OAAO,EAAE,cAAc,EAA4C,MAAM,OAAO,CAAC;AAEjF,oFAAoF;AACpF,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC;AAUhC;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,KAAK,EAAE,SAAS,EAChB,YAAmB,EACnB,aAAa,EACb,IAAQ,EACR,MAAM,EAAE,UAAU,EAClB,IAAI,EACJ,IAAgB,EAChB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,WAAW,EACX,GAAG,IAAI,EACV,EAAE,cAAc,+BAqHhB;AAiFD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IAC5F,oDAAoD;IACpD,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC1B,oDAAoD;IACpD,YAAY,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}
@@ -0,0 +1,175 @@
1
+ "use client";
2
+ import { cx as e } from "../utils/cx.js";
3
+ import { readingKey as t } from "../utils/direction.js";
4
+ import { useControllable as n } from "../utils/useControllable.js";
5
+ import { useLocale as r, useMessages as i } from "../locale-provider/index.js";
6
+ import { useField as a } from "../field/index.js";
7
+ import { FIELD_SIZE as o, FIELD_WITHIN as s } from "../utils/styles.js";
8
+ import { FormValue as c } from "../utils/form-value.js";
9
+ import { plainSpaces as l } from "../utils/date.js";
10
+ import { useMemo as u, useRef as d, useState as f } from "react";
11
+ import { jsx as p, jsxs as m } from "react/jsx-runtime";
12
+ //#region packages/time-field/index.tsx
13
+ function h({ value: l, defaultValue: h = null, onValueChange: _, step: v = 1, locale: y, name: b, size: x = "default", invalid: S, disabled: C, className: w, onMouseDown: T, ...E }) {
14
+ let D = i(), O = a(), k = r(y), A = u(() => new g(k), [k]), [j, M, N] = n(l, h, _), [P, F] = f(null), I = P ?? A.split(j), L = d(""), R = (e) => {
15
+ let t = A.join(e);
16
+ F(t === null ? e : null), t !== j && M(t);
17
+ }, z = (e, n) => {
18
+ let r = t(e.key, e.currentTarget), i = (t) => {
19
+ let n = [...e.currentTarget.parentElement.querySelectorAll("[role=spinbutton]")];
20
+ n[n.indexOf(e.currentTarget) + t]?.focus();
21
+ };
22
+ if (r === "ArrowLeft" || r === "ArrowRight") return e.preventDefault(), i(r === "ArrowLeft" ? -1 : 1);
23
+ if (r === "ArrowUp" || r === "ArrowDown") return e.preventDefault(), L.current = "", R(A.step(I, n, r === "ArrowUp" ? 1 : -1, v));
24
+ if (r === "Backspace" || r === "Delete") return e.preventDefault(), L.current = "", R({
25
+ ...I,
26
+ [n === "dayPeriod" ? "period" : n]: null
27
+ });
28
+ if (n === "dayPeriod") {
29
+ let t = A.periodFor(e.key);
30
+ return t === null ? void 0 : (e.preventDefault(), R({
31
+ ...I,
32
+ period: t
33
+ }));
34
+ }
35
+ let a = A.digit(e.key);
36
+ if (a === null) return;
37
+ e.preventDefault();
38
+ let { n: o, done: s } = A.type(n, L.current + a);
39
+ L.current = s ? "" : L.current + a, R({
40
+ ...I,
41
+ [n]: o
42
+ }), s && i(1);
43
+ }, B = A.order.map((t, n) => {
44
+ if (t.type === "literal") return /* @__PURE__ */ p("span", {
45
+ "aria-hidden": !0,
46
+ className: "text-muted-foreground whitespace-pre",
47
+ children: t.value
48
+ }, n);
49
+ let r = t.type, i = r === "dayPeriod" ? I.period : I[r], a = {
50
+ hour: D.hour,
51
+ minute: D.minute,
52
+ dayPeriod: D.dayPeriod
53
+ }[r], o = i === null ? null : A.show(r, i);
54
+ return /* @__PURE__ */ p("span", {
55
+ role: "spinbutton",
56
+ tabIndex: C ? void 0 : 0,
57
+ "aria-label": a,
58
+ "aria-valuenow": i ?? void 0,
59
+ "aria-valuetext": o ?? void 0,
60
+ "aria-valuemin": r === "dayPeriod" ? 0 : A.min(r),
61
+ "aria-valuemax": r === "dayPeriod" ? 1 : A.max(r),
62
+ "aria-disabled": C || void 0,
63
+ onKeyDown: C ? void 0 : (e) => z(e, r),
64
+ onFocus: () => L.current = "",
65
+ className: e("zen__time-segment rounded-sm px-0.5 tabular-nums outline-hidden caret-transparent select-none", "focus:bg-primary/20 focus:text-foreground", o === null && "text-muted-foreground"),
66
+ children: o ?? "––"
67
+ }, r);
68
+ });
69
+ return /* @__PURE__ */ m("div", {
70
+ role: "group",
71
+ "aria-labelledby": E["aria-label"] ? void 0 : O?.labelId,
72
+ "aria-disabled": C || void 0,
73
+ "data-invalid": S || void 0,
74
+ ...E,
75
+ onMouseDown: (e) => {
76
+ T?.(e), !(e.defaultPrevented || e.target.closest("[role=spinbutton]")) && (e.preventDefault(), e.currentTarget.querySelector("[role=spinbutton]")?.focus());
77
+ },
78
+ className: e("zen__time-field", s, o[x], "w-fit cursor-text gap-0", C && "bg-muted text-muted-foreground cursor-not-allowed opacity-50", "data-invalid:border-destructive", w),
79
+ children: [B, /* @__PURE__ */ p(c, {
80
+ name: b,
81
+ value: j ?? "",
82
+ onReset: N
83
+ })]
84
+ });
85
+ }
86
+ var g = class {
87
+ order;
88
+ h12;
89
+ periods;
90
+ two;
91
+ one;
92
+ digits;
93
+ constructor(e) {
94
+ let t = new Intl.DateTimeFormat(e, {
95
+ hour: "numeric",
96
+ minute: "2-digit",
97
+ timeZone: "UTC"
98
+ });
99
+ this.h12 = t.resolvedOptions().hourCycle?.startsWith("h1") ?? !1;
100
+ let n = (e) => t.formatToParts(Date.UTC(2020, 0, 1, e, 5));
101
+ this.order = n(15).map((e) => ({
102
+ type: e.type,
103
+ value: l(e.value)
104
+ }));
105
+ let r = (e) => l(n(e).find((e) => e.type === "dayPeriod")?.value ?? "");
106
+ this.periods = [r(9), r(15)], this.two = new Intl.NumberFormat(e, {
107
+ minimumIntegerDigits: 2,
108
+ useGrouping: !1
109
+ }), this.one = new Intl.NumberFormat(e, { useGrouping: !1 });
110
+ let i = this.one.format(9876543210);
111
+ this.digits = new Map([...i].map((e, t) => [e, String(9 - t)]));
112
+ }
113
+ min = (e) => e === "hour" && this.h12 ? 1 : 0;
114
+ max = (e) => e === "minute" ? 59 : this.h12 ? 12 : 23;
115
+ show(e, t) {
116
+ return e === "dayPeriod" ? this.periods[t] : e === "hour" && this.h12 ? this.one.format(t) : this.two.format(t);
117
+ }
118
+ split(e) {
119
+ if (!e) return {
120
+ hour: null,
121
+ minute: null,
122
+ period: this.h12 ? null : 0
123
+ };
124
+ let t = Number(e.slice(0, 2)), n = Number(e.slice(3, 5));
125
+ return this.h12 ? {
126
+ hour: t % 12 || 12,
127
+ minute: n,
128
+ period: +(t >= 12)
129
+ } : {
130
+ hour: t,
131
+ minute: n,
132
+ period: 0
133
+ };
134
+ }
135
+ join({ hour: e, minute: t, period: n }) {
136
+ if (e === null || t === null || this.h12 && n === null) return null;
137
+ let r = this.h12 ? e % 12 + (n ? 12 : 0) : e;
138
+ return `${String(r).padStart(2, "0")}:${String(t).padStart(2, "0")}`;
139
+ }
140
+ step(e, t, n, r) {
141
+ if (t === "dayPeriod") return {
142
+ ...e,
143
+ period: e.period === 1 ? 0 : 1
144
+ };
145
+ let [i, a] = [this.min(t), this.max(t)], o = a - i + 1, s = e[t], c = t === "minute" ? r : 1;
146
+ if (s === null) return {
147
+ ...e,
148
+ [t]: n > 0 ? i : i + Math.floor((a - i) / c) * c
149
+ };
150
+ let l = (s - i) / c, u = (n > 0 ? Math.floor(l) + 1 : Math.ceil(l) - 1) * c;
151
+ return {
152
+ ...e,
153
+ [t]: i + (u % o + o) % o
154
+ };
155
+ }
156
+ digit(e) {
157
+ return /^\d$/.test(e) ? e : this.digits.get(e) ?? null;
158
+ }
159
+ type(e, t) {
160
+ let n = this.max(e), r = Number(t);
161
+ return t.length === 2 ? r <= n && r >= this.min(e) ? {
162
+ n: r,
163
+ done: !0
164
+ } : this.type(e, t[1]) : {
165
+ n: r,
166
+ done: r * 10 > n
167
+ };
168
+ }
169
+ periodFor(e) {
170
+ let t = e.toLowerCase();
171
+ return t === "a" || this.periods[0].toLowerCase().startsWith(t) ? 0 : t === "p" || this.periods[1].toLowerCase().startsWith(t) ? 1 : null;
172
+ }
173
+ };
174
+ //#endregion
175
+ export { h as default };
@@ -15,7 +15,7 @@ function i({ title: r, time: i, icon: a, active: o, className: s, children: c, .
15
15
  children: [
16
16
  /* @__PURE__ */ t("span", {
17
17
  "aria-hidden": !0,
18
- className: "bg-tint/10 absolute top-7 bottom-1 left-[11px] w-px group-last/timeline:hidden"
18
+ className: "bg-tint/10 absolute start-[11px] top-7 bottom-1 w-px group-last/timeline:hidden"
19
19
  }),
20
20
  /* @__PURE__ */ t("span", {
21
21
  "aria-hidden": !0,
@@ -1,5 +1,5 @@
1
1
  import { ReactNode, RefObject } from 'react';
2
- export type ToastTone = 'info' | 'success' | 'error';
2
+ export type ToastTone = 'default' | 'positive' | 'negative';
3
3
  export interface ToastOptions {
4
4
  description?: string;
5
5
  tone?: ToastTone;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toast/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIH,SAAS,EACT,SAAS,EAMZ,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,YAAY;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,iBAAiB,EAAE,EAAE,kBAAkB,+BA8JhG;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,QAO/E;AAYD,+EAA+E;AAC/E,wBAAgB,QAAQ,YA/MoB,MAAM,YAAY,YAAY,KAAK,MAAM,CAmNpF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toast/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIH,SAAS,EACT,SAAS,EAMZ,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE5D,MAAM,WAAW,YAAY;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,iBAAiB,EAAE,EAAE,kBAAkB,+BA+JhG;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,QAO/E;AAYD,+EAA+E;AAC/E,wBAAgB,QAAQ,YAhNoB,MAAM,YAAY,YAAY,KAAK,MAAM,CAoNpF"}