@rinzai/zen 0.14.0 → 0.16.0

package/dist/resizable/index.js

@@ -1,8 +1,8 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { readingKey as t } from "../utils/direction.js";
-import { useMergedRefs as n } from "../utils/refs.js";
-import { useMessages as r } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
+import { readingKey as n } from "../utils/direction.js";
+import { useMergedRefs as r } from "../utils/refs.js";
 import { createContext as i, useContext as a, useEffect as o, useId as s, useLayoutEffect as c, useRef as l, useState as u } from "react";
 import { jsx as d } from "react/jsx-runtime";
 //#region packages/resizable/index.tsx
@@ -13,8 +13,8 @@ function m(e) {
 	return t;
 }
 var h = "[data-zen-panel]", g = (e, t, n) => Math.min(n, Math.max(t, e));
-function _({ orientation: t = "horizontal", onLayout: r, ref: i, className: a, ...o }) {
-	let s = l(null), c = n(s, i), [m, _] = u({}), [v, y] = u({}), b = l(v), x = (e) => {
+function _({ orientation: e = "horizontal", onLayout: n, ref: i, className: a, ...o }) {
+	let s = l(null), c = r(s, i), [m, _] = u({}), [v, y] = u({}), b = l(v), x = (e) => {
 		b.current = e, y(e);
 	}, [S, C] = u(!1), w = () => Array.from(s.current?.querySelectorAll(`:scope > ${h}`) ?? [], (e) => e.dataset.zenPanel);
 	f(() => {
@@ -25,7 +25,7 @@ function _({ orientation: t = "horizontal", onLayout: r, ref: i, className: a, .
 		x(a);
 	}, [m]);
 	let T = {
-		orientation: t,
+		orientation: e,
 		sizes: v,
 		specs: m,
 		register: (e, t) => (_((n) => ({
@@ -35,17 +35,17 @@ function _({ orientation: t = "horizontal", onLayout: r, ref: i, className: a, .
 			let { [e]: n, ...r } = t;
 			return r;
 		})),
-		resize: (e, t, n) => {
+		resize: (e, t, r) => {
 			let i = m[e], a = m[t];
 			if (!i || !a) return;
-			let o = b.current, s = o[e] + o[t], c = g(n, Math.max(i.minSize, s - a.maxSize), Math.min(i.maxSize, s - a.minSize));
+			let o = b.current, s = o[e] + o[t], c = g(r, Math.max(i.minSize, s - a.maxSize), Math.min(i.maxSize, s - a.minSize));
 			if (c === o[e]) return;
 			let l = {
 				...o,
 				[e]: c,
 				[t]: s - c
 			};
-			x(l), r?.(w().map((e) => l[e]));
+			x(l), n?.(w().map((e) => l[e]));
 		},
 		setDragging: C
 	};
@@ -54,25 +54,25 @@ function _({ orientation: t = "horizontal", onLayout: r, ref: i, className: a, .
 		children: /* @__PURE__ */ d("div", {
 			...o,
 			ref: c,
-			"data-orientation": t,
+			"data-orientation": e,
 			"data-dragging": S || void 0,
-			className: e("zen__resizable flex size-full", t === "vertical" && "flex-col", S && "select-none", a)
+			className: t("zen__resizable flex size-full", e === "vertical" && "flex-col", S && "select-none", a)
 		})
 	});
 }
-function v({ defaultSize: t, minSize: n = 0, maxSize: r = 100, id: i, className: a, style: o, ...c }) {
+function v({ defaultSize: e, minSize: n = 0, maxSize: r = 100, id: i, className: a, style: o, ...c }) {
 	let l = m("ResizablePanel"), u = s(), p = i ?? u, { register: h } = l;
 	f(() => h(p, {
-		defaultSize: t,
+		defaultSize: e,
 		minSize: n,
 		maxSize: r
 	}), [
 		p,
-		t,
+		e,
 		n,
 		r
 	]);
-	let g = l.sizes[p] ?? t ?? 1;
+	let g = l.sizes[p] ?? e ?? 1;
 	return /* @__PURE__ */ d("div", {
 		...c,
 		id: p,
@@ -81,12 +81,12 @@ function v({ defaultSize: t, minSize: n = 0, maxSize: r = 100, id: i, className:
 			flex: `${g} 1 0px`,
 			...o
 		},
-		className: e("min-h-0 min-w-0 overflow-hidden", a)
+		className: t("min-h-0 min-w-0 overflow-hidden", a)
 	});
 }
 var y = 5;
 function b({ ref: i, className: a, onPointerDown: o, onKeyDown: s, ...c }) {
-	let p = r(), g = m("ResizableHandle"), _ = l(null), v = n(_, i), [b, x] = u(null), [S, C] = u(!1), w = g.orientation === "horizontal";
+	let p = e(), g = m("ResizableHandle"), _ = l(null), v = r(_, i), [b, x] = u(null), [S, C] = u(!1), w = g.orientation === "horizontal";
 	f(() => {
 		let e = _.current, t = e?.previousElementSibling?.closest(h)?.dataset.zenPanel, n = e?.nextElementSibling?.closest(h)?.dataset.zenPanel;
 		x((e) => !t || !n ? null : e?.[0] === t && e[1] === n ? e : [t, n]);
@@ -102,12 +102,12 @@ function b({ ref: i, className: a, onPointerDown: o, onKeyDown: s, ...c }) {
 		t.addEventListener("pointermove", c), t.addEventListener("pointerup", l), t.addEventListener("pointercancel", l);
 	}, A = (e) => {
 		if (s?.(e), e.defaultPrevented || !T || !E || D === void 0 || !O) return;
-		let n = w ? t(e.key, e.currentTarget) : e.key, r = {
+		let t = w ? n(e.key, e.currentTarget) : e.key, r = {
 			[w ? "ArrowLeft" : "ArrowUp"]: D - y,
 			[w ? "ArrowRight" : "ArrowDown"]: D + y,
 			Home: O.minSize,
 			End: O.maxSize
-		}[n];
+		}[t];
 		r !== void 0 && (e.preventDefault(), g.resize(T, E, r));
 	};
 	return /* @__PURE__ */ d("div", {
@@ -124,10 +124,10 @@ function b({ ref: i, className: a, onPointerDown: o, onKeyDown: s, ...c }) {
 		"data-active": S || void 0,
 		onPointerDown: k,
 		onKeyDown: A,
-		className: e("group/handle relative z-10 flex shrink-0 touch-none items-center justify-center outline-hidden", w ? "w-px cursor-col-resize before:absolute before:inset-y-0 before:-inset-x-2" : "h-px cursor-row-resize before:absolute before:inset-x-0 before:-inset-y-2", a),
+		className: t("group/handle relative z-10 flex shrink-0 touch-none items-center justify-center outline-hidden", w ? "w-px cursor-col-resize before:absolute before:inset-y-0 before:-inset-x-2" : "h-px cursor-row-resize before:absolute before:inset-x-0 before:-inset-y-2", a),
 		children: /* @__PURE__ */ d("span", {
 			"aria-hidden": !0,
-			className: e("bg-tint/[0.09] pointer-events-none absolute transition-[background-color,box-shadow,width,height] duration-200", w ? "inset-y-0 w-px" : "inset-x-0 h-px", "group-hover/handle:bg-primary/60 group-focus-visible/handle:bg-primary group-data-active/handle:bg-primary", "group-focus-visible/handle:shadow-[0_0_12px_oklch(var(--glow)/calc(0.8*var(--glow-k)))] group-data-active/handle:shadow-[0_0_12px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]", w ? "group-focus-visible/handle:w-0.5 group-data-active/handle:w-0.5" : "group-focus-visible/handle:h-0.5 group-data-active/handle:h-0.5")
+			className: t("bg-tint/[0.09] pointer-events-none absolute transition-[background-color,box-shadow,width,height] duration-200", w ? "inset-y-0 w-px" : "inset-x-0 h-px", "group-hover/handle:bg-primary/60 group-focus-visible/handle:bg-primary group-data-active/handle:bg-primary", "group-focus-visible/handle:shadow-[0_0_12px_oklch(var(--glow)/calc(0.8*var(--glow-k)))] group-data-active/handle:shadow-[0_0_12px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]", w ? "group-focus-visible/handle:w-0.5 group-data-active/handle:w-0.5" : "group-focus-visible/handle:h-0.5 group-data-active/handle:h-0.5")
 		})
 	});
 }

package/dist/seek-bar/index.d.ts

@@ -0,0 +1,26 @@
+import { SliderProps } from '../slider';
+/**
+ * Where playback is in a track, and the way to move it: filled up to the
+ * current time, shaded on to what's loaded, between the time played and the
+ * length. While playing it glides, run by the browser's compositor between
+ * the player's time updates. While dragging, the time follows the thumb and
+ * the track keeps playing; letting go seeks. The arrow keys seek 5 seconds.
+ */
+export default function SeekBar({ currentTime, duration, buffered, playing, playbackRate, onSeek, times, onKeyDown, disabled, className, ...rest }: SeekBarProps): import('react').JSX.Element;
+export interface SeekBarProps extends Omit<SliderProps, 'value' | 'defaultValue' | 'min' | 'max' | 'step' | 'onValueChange' | 'onValueCommit' | 'trackBackground'> {
+    /** Seconds played. */
+    currentTime: number;
+    /** Seconds long; 0 while unknown (the bar is disabled). */
+    duration: number;
+    /** Seconds loaded, shaded on the track past the time played. */
+    buffered?: number;
+    /** While the time is running (playing, not waiting for data): the bar glides on between time updates. */
+    playing?: boolean;
+    /** How fast it moves on while playing (default 1). */
+    playbackRate?: number;
+    /** When the user lets go, or steps with the keys: the time to play from. */
+    onSeek: (time: number) => void;
+    /** Where the time played and the length go: either side of the bar (default), or under its ends, as on a phone's Now Playing screen. */
+    times?: 'beside' | 'below';
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/seek-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/seek-bar/index.tsx"],"names":[],"mappings":"AACA,OAAe,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAQlD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC5B,WAAW,EACX,QAAQ,EACR,QAAY,EACZ,OAAe,EACf,YAAgB,EAChB,MAAM,EACN,KAAgB,EAChB,SAAS,EACT,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EAAE,YAAY,+BA8Hd;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACtC,WAAW,EACX,OAAO,GAAG,cAAc,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,eAAe,GAAG,eAAe,GAAG,iBAAiB,CAC5G;IACG,sBAAsB;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAC;IACjB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yGAAyG;IACzG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,wIAAwI;IACxI,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC9B"}

package/dist/seek-bar/index.js

@@ -0,0 +1,121 @@
+"use client";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
+import n from "../slider/index.js";
+import { formatDuration as r } from "../utils/duration.js";
+import { useLayoutEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region packages/seek-bar/index.tsx
+var l = 5;
+function u({ currentTime: u, duration: d, buffered: f = 0, playing: p = !1, playbackRate: m = 1, onSeek: h, times: g = "beside", onKeyDown: _, disabled: v, className: y, ...b }) {
+	let x = e(), [S, C] = o(null), [w, T] = o(null), E = w && w.from === u ? w.at : null, D = Math.max(0, Math.min(S ?? E ?? u, d)), O = a(null), k = a(null), A = p && S === null && E === null && d > 0 && D < d, j = a(null);
+	i(() => {
+		let e = [O.current, k.current].filter((e) => e !== null);
+		if (!e.length) return;
+		let t = j.current;
+		if (A && t && t.rate === m && t.duration === d) {
+			let e = Number(t.animations[0].currentTime ?? 0) / 1e3;
+			if (Math.abs(t.from + e * m - D) < .15) return;
+		}
+		t?.animations.forEach((e) => e.cancel()), j.current = null;
+		let n = getComputedStyle(e[0]).direction === "rtl" ? -1 : 1, r = (e) => `${d > 0 ? n * e * 100 / d : 0}cqw`;
+		for (let t of e) t.style.translate = r(D);
+		if (!A) return;
+		let i = e.map((e) => e.animate([{ translate: r(D) }, { translate: r(d) }], {
+			duration: (d - D) / m * 1e3,
+			easing: "linear",
+			fill: "forwards"
+		}));
+		j.current = {
+			animations: i,
+			from: D,
+			rate: m,
+			duration: d
+		};
+	}, [
+		D,
+		d,
+		A,
+		m
+	]), i(() => () => j.current?.animations.forEach((e) => e.cancel()), []);
+	let M = (e) => {
+		if (_?.(e), e.defaultPrevented) return;
+		let t = getComputedStyle(e.currentTarget).direction === "rtl", n = {
+			ArrowUp: 1,
+			ArrowDown: -1,
+			ArrowRight: t ? -1 : 1,
+			ArrowLeft: t ? 1 : -1
+		}[e.key];
+		if (!n) return;
+		e.preventDefault();
+		let r = Math.max(0, Math.min(D + n * l, d));
+		T({
+			at: r,
+			from: u
+		}), h(r);
+	}, N = v || d <= 0, P = d > 0 ? Math.min(f, d) / d * 100 : 0, F = g === "below", I = F ? void 0 : { width: `${r(d).length}ch` };
+	return /* @__PURE__ */ c("div", {
+		"data-times": g,
+		className: t("zen__seek-bar flex items-center", F ? "flex-wrap justify-between gap-y-1" : "gap-3", y),
+		children: [
+			/* @__PURE__ */ s("span", {
+				className: t("text-muted-foreground shrink-0 text-xs tabular-nums", !F && "text-end"),
+				style: I,
+				children: r(D)
+			}),
+			/* @__PURE__ */ c("div", {
+				className: t("group relative h-5 min-w-0 flex-1", F && "order-first basis-full", N && "opacity-50"),
+				children: [
+					/* @__PURE__ */ s(n, {
+						"aria-label": x.seek,
+						min: 0,
+						max: d || 1,
+						step: "any",
+						value: D,
+						disabled: N,
+						valueText: () => x.timeOf(r(D), r(d)),
+						className: "absolute inset-0 z-10 h-full opacity-0",
+						onKeyDown: M,
+						onValueChange: C,
+						onValueCommit: (e) => {
+							C(null), T({
+								at: e,
+								from: u
+							}), h(e);
+						},
+						...b
+					}),
+					/* @__PURE__ */ c("div", {
+						"aria-hidden": !0,
+						className: "absolute inset-x-0 top-1/2 h-2.5 -translate-y-1/2 overflow-hidden rounded-full bg-[oklch(var(--muted))]",
+						children: [/* @__PURE__ */ s("div", {
+							className: "absolute inset-y-0 start-0 bg-[oklch(var(--tint)/0.22)] transition-[width] duration-300",
+							style: { width: `${P}%` }
+						}), /* @__PURE__ */ s("div", {
+							className: "[container-type:inline-size] absolute inset-x-2.5 inset-y-0",
+							children: /* @__PURE__ */ s("div", {
+								ref: O,
+								className: "bg-primary absolute inset-y-0 end-full w-[calc(100%+0.625rem)]"
+							})
+						})]
+					}),
+					/* @__PURE__ */ s("div", {
+						"aria-hidden": !0,
+						className: "[container-type:inline-size] pointer-events-none absolute inset-x-2.5 inset-y-0",
+						children: /* @__PURE__ */ s("div", {
+							ref: k,
+							className: "bg-primary group-has-[input:focus-visible]:ring-ring/40 absolute start-0 top-1/2 -ms-2.5 -mt-2.5 size-5 rounded-full border-2 border-white shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/calc(0.8*var(--glow-k)))] group-has-[input:focus-visible]:ring-4"
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ s("span", {
+				className: "text-muted-foreground shrink-0 text-xs tabular-nums",
+				style: I,
+				children: r(d)
+			})
+		]
+	});
+}
+//#endregion
+export { u as default };

package/dist/segmented/index.d.ts

@@ -5,11 +5,12 @@ import { ComponentProps, ReactNode } from 'react';
  * selection slides between options, like Pills. Fill it with
  * SegmentedItem (any content: text, icons, a disabled option).
  */
-export default function Segmented<V extends string>({ label, value: valueProp, defaultValue, onValueChange, name, className, children, ...rest }: SegmentedProps<V>): import('react').JSX.Element;
+export default function Segmented<V extends string>({ label, value: valueProp, defaultValue, onValueChange, name, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, children, ...rest }: SegmentedProps<V>): import('react').JSX.Element;
 /** One option of a Segmented: a native radio covering whatever you put inside. */
 export declare function SegmentedItem({ value, disabled, className, children }: SegmentedItemProps): import('react').JSX.Element;
 export interface SegmentedProps<V extends string> extends Omit<ComponentProps<'div'>, 'defaultValue' | 'children'> {
-    label: string;
+    /** Shown above the options, naming the group. Without it, give the group an aria-label or aria-labelledby. */
+    label?: ReactNode;
     /** The chosen option, when you keep it. */
     value?: V;
     /** The first chosen option, when the control keeps its own. */

package/dist/segmented/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/segmented/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAA6B,MAAM,OAAO,CAAC;AAY5F;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,EAChD,KAAK,EACL,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,cAAc,CAAC,CAAC,CAAC,+BAwCnB;AAED,kFAAkF;AAClF,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BA4BzF;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IAC9G,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,QAAQ,EAAE,SAAS,CAAC;CACvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/segmented/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAA6B,MAAM,OAAO,CAAC;AAY5F;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,EAChD,KAAK,EACL,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,cAAc,CAAC,CAAC,CAAC,+BA2CnB;AAED,kFAAkF;AAClF,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BA4BzF;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IAC9G,8GAA8G;IAC9G,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,QAAQ,EAAE,SAAS,CAAC;CACvB"}

package/dist/segmented/index.js

@@ -6,36 +6,37 @@ import { createContext as r, useContext as i, useId as a, useRef as o } from "re
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region packages/segmented/index.tsx
 var l = r(null);
-function u({ label: r, value: i, defaultValue: u, onValueChange: d, name: f, className: p, children: m, ...h }) {
-	let [g, _] = t(i, u, d), v = a(), y = o(null), b = n(y, "label:has(input:checked)", [g, m]);
+function u({ label: r, value: i, defaultValue: u, onValueChange: d, name: f, "aria-label": p, "aria-labelledby": m, className: h, children: g, ..._ }) {
+	let [v, y] = t(i, u, d), b = a(), x = o(null), S = n(x, "label:has(input:checked)", [v, g]);
 	return /* @__PURE__ */ c("div", {
-		className: e("zen__segmented flex flex-col gap-2", p),
-		...h,
-		children: [/* @__PURE__ */ s("span", {
-			id: v,
+		className: e("zen__segmented flex flex-col gap-2", h),
+		..._,
+		children: [r && /* @__PURE__ */ s("span", {
+			id: b,
 			className: "text-sm font-medium",
 			children: r
 		}), /* @__PURE__ */ c("div", {
-			ref: y,
+			ref: x,
 			role: "radiogroup",
-			"aria-labelledby": v,
+			"aria-label": p,
+			"aria-labelledby": r ? b : m,
 			className: "glow-edge border-tint/10 bg-tint/[0.03] relative inline-flex w-fit flex-wrap gap-1 rounded-xl border p-1",
-			children: [b && /* @__PURE__ */ s("span", {
+			children: [S && /* @__PURE__ */ s("span", {
 				"aria-hidden": !0,
 				className: "zen__segmented-indicator bg-primary/15 ease-out-soft absolute top-0 left-0 rounded-lg shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.4)] transition-[translate,width,height] duration-500",
 				style: {
-					translate: `${b.x}px ${b.y}px`,
-					width: b.w,
-					height: b.h
+					translate: `${S.x}px ${S.y}px`,
+					width: S.w,
+					height: S.h
 				}
 			}), /* @__PURE__ */ s(l.Provider, {
 				value: {
-					name: f ?? v,
-					value: g,
-					select: _,
-					measured: b !== null
+					name: f ?? b,
+					value: v,
+					select: y,
+					measured: S !== null
 				},
-				children: m
+				children: g
 			})]
 		})]
 	});
@@ -44,7 +45,7 @@ function d({ value: t, disabled: n, className: r, children: a }) {
 	let o = i(l);
 	if (!o) throw Error("SegmentedItem must be inside a Segmented");
 	return /* @__PURE__ */ c("label", {
-		className: e("text-muted-foreground relative cursor-pointer rounded-lg px-3 py-1.5 text-sm transition-colors duration-300", "hover:text-foreground has-checked:text-foreground has- has-focus-ring", "has-disabled:hover:text-muted-foreground has-disabled:cursor-not-allowed has-disabled:opacity-50", !o.measured && "has-checked:bg-primary/15 has-checked:shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.4)]", r),
+		className: e("text-muted-foreground relative inline-flex cursor-pointer items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm transition-colors duration-300", "hover:text-foreground has-checked:text-foreground has-focus-ring", "has-disabled:hover:text-muted-foreground has-disabled:cursor-not-allowed has-disabled:opacity-50", !o.measured && "has-checked:bg-primary/15 has-checked:shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.4)]", r),
 		children: [/* @__PURE__ */ s("input", {
 			type: "radio",
 			className: "absolute inset-0 z-10 m-0 size-full cursor-pointer appearance-none rounded-[inherit] opacity-0 disabled:cursor-not-allowed",

package/dist/select/index.js

@@ -1,9 +1,9 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useTypeahead as t } from "../utils/typeahead.js";
-import { useControllable as n } from "../utils/useControllable.js";
-import { useAnchoredPopup as r } from "../utils/useAnchoredPopup.js";
-import { useMessages as i } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
+import { useTypeahead as n } from "../utils/typeahead.js";
+import { useControllable as r } from "../utils/useControllable.js";
+import { useAnchoredPopup as i } from "../utils/useAnchoredPopup.js";
 import { CheckIcon as a } from "../utils/status-icons.js";
 import { useFieldProps as o } from "../field/index.js";
 import { FIELD_SIZE as s, POPUP as c, TRIGGER as l } from "../utils/styles.js";
@@ -14,14 +14,14 @@ import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
 //#region packages/select/index.tsx
 var w = m(null);
 function T({ value: a, defaultValue: f = null, onValueChange: p, placeholder: m, disabled: h = !1, size: g = "default", name: v, id: T, className: D, listClassName: O, children: k, style: A, onKeyDown: j, ...M }) {
-	let N = i(), P = m ?? N.selectPlaceholder, [F, I, L] = n(a, f, p), R = y(null), z = te(), B = T ?? z, ne = o({
+	let N = e(), P = m ?? N.selectPlaceholder, [F, I, L] = r(a, f, p), R = y(null), z = te(), B = T ?? z, ne = o({
 		...M,
 		id: T
-	}), [V, H] = b(null), U = t(), [W, G] = b(/* @__PURE__ */ new Map()), K = () => Array.from(R.current?.querySelectorAll("[role=\"option\"]") ?? []).map((e) => ({
+	}), [V, H] = b(null), U = n(), [W, G] = b(/* @__PURE__ */ new Map()), K = () => Array.from(R.current?.querySelectorAll("[role=\"option\"]") ?? []).map((e) => ({
 		value: e.dataset.value,
 		label: e.dataset.label ?? "",
 		disabled: e.getAttribute("aria-disabled") === "true"
-	})), q = r({
+	})), q = i({
 		matchWidth: !0,
 		onOpenChange: (e) => {
 			if (!e) return;
@@ -82,9 +82,9 @@ function T({ value: a, defaultValue: f = null, onValueChange: p, placeholder: m,
 			onKeyDown: (e) => {
 				j?.(e), ["ArrowDown", "ArrowUp"].includes(e.key) && !q.open && (e.preventDefault(), q.setOpen(!0));
 			},
-			className: e("zen__select group", l, s[g], "w-full", q.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", D),
+			className: t("zen__select group", l, s[g], "w-full", q.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", D),
 			children: [/* @__PURE__ */ S("span", {
-				className: e("truncate", Z === void 0 && "text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]"),
+				className: t("truncate", Z === void 0 && "text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]"),
 				children: Z ?? P
 			}), /* @__PURE__ */ S(d, { open: q.open })]
 		}),
@@ -95,7 +95,7 @@ function T({ value: a, defaultValue: f = null, onValueChange: p, placeholder: m,
 		}),
 		/* @__PURE__ */ S("div", {
 			...q.popupProps,
-			className: e("zen__popover", c, "overflow-visible py-1", O),
+			className: t("zen__popover", c, "overflow-visible py-1", O),
 			children: /* @__PURE__ */ S("div", {
 				ref: R,
 				role: "listbox",
@@ -131,28 +131,28 @@ function E(e, t) {
 	});
 }
 var D = (e) => typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(D).join("") : "";
-function O({ value: t, label: n, disabled: r, className: i, children: o }) {
+function O({ value: e, label: n, disabled: r, className: i, children: o }) {
 	let s = g(w);
 	if (!s) throw Error("SelectItem must be inside a Select");
 	let c = y(null), l = n ?? D(o), u = s.register;
-	v(() => u(t, l || c.current?.textContent?.trim() || ""), [
+	v(() => u(e, l || c.current?.textContent?.trim() || ""), [
 		u,
-		t,
+		e,
 		l
 	]);
-	let d = s.value === t;
+	let d = s.value === e;
 	return /* @__PURE__ */ C("div", {
 		ref: c,
-		id: s.optionId(t),
+		id: s.optionId(e),
 		role: "option",
-		"data-value": t,
+		"data-value": e,
 		"data-label": l || void 0,
 		"aria-selected": d,
 		"aria-disabled": r || void 0,
-		"data-highlighted": s.active === t || void 0,
-		onMouseMove: () => !r && s.setActive(t),
-		onClick: () => s.choose(t),
-		className: e("grid cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 px-3 py-2 text-sm outline-hidden select-none", "data-highlighted:bg-muted aria-disabled:cursor-not-allowed aria-disabled:opacity-50", i),
+		"data-highlighted": s.active === e || void 0,
+		onMouseMove: () => !r && s.setActive(e),
+		onClick: () => s.choose(e),
+		className: t("grid cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 px-3 py-2 text-sm outline-hidden select-none", "data-highlighted:bg-muted aria-disabled:cursor-not-allowed aria-disabled:opacity-50", i),
 		children: [/* @__PURE__ */ S("span", {
 			className: "text-primary col-start-1",
 			"aria-hidden": !0,

package/dist/slider/index.d.ts

@@ -15,7 +15,8 @@ export interface SliderProps extends Omit<ComponentProps<'input'>, 'type' | 'val
     defaultValue?: number;
     min?: number;
     max?: number;
-    step?: number;
+    /** `'any'` for no snapping; the arrow keys then move by the browser's own amount. */
+    step?: number | 'any';
     /** While dragging (every step). */
     onValueChange?: (value: number) => void;
     /** Once the user lets go: the moment to save. */

package/dist/slider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/slider/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAoC,MAAM,OAAO,CAAC;AAEzE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,GAAO,EACP,GAAS,EACT,IAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,UAAU,EACV,SAAS,EACT,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,WAAW,+BAmDb;AAED,0EAA0E;AAC1E,eAAO,MAAM,KAAK,QAI+E,CAAC;AAElG,MAAM,WAAW,WAAY,SAAQ,IAAI,CACrC,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,cAAc,CAC7D;IACG,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iDAAiD;IACjD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/slider/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAoC,MAAM,OAAO,CAAC;AAEzE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,GAAO,EACP,GAAS,EACT,IAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,UAAU,EACV,SAAS,EACT,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,WAAW,+BAmDb;AAED,0EAA0E;AAC1E,eAAO,MAAM,KAAK,QAI+E,CAAC;AAElG,MAAM,WAAW,WAAY,SAAQ,IAAI,CACrC,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,cAAc,CAC7D;IACG,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACtB,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iDAAiD;IACjD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC"}

package/dist/sortable/index.d.ts

@@ -12,11 +12,23 @@ export { flattenTree, type SortableNode, type SortableRow } from './tree-model';
  * With `asChild` (and `asChild` on the items), your own elements instead: a
  * TableBody of TableRows, say, one per group, each sorted on its own.
  */
-export declare function SortableList({ value, onValueChange, asChild, className, children, ref, ...rest }: SortableListProps): import('react').JSX.Element;
+export declare function SortableList({ value, onValueChange, itemHeight, onLiftedChange, asChild, className, children, ref, ...rest }: SortableListProps): import('react').JSX.Element;
 export interface SortableListProps extends ComponentProps<'ul'> {
     /** The items' ids, in order. */
     value: readonly string[];
     onValueChange: (value: string[]) => void;
+    /**
+     * For a virtualized list (useVirtualList), its rows' height, gap included:
+     * render just the items in view, each placed at its place in `value` times
+     * this, and the drag works from `value` instead of the rows on screen.
+     */
+    itemHeight?: number;
+    /**
+     * When an item is picked up (by its handle, or from the keyboard), and when it's
+     * put down (null). A virtualized list keeps that row rendered meanwhile
+     * (useVirtualList's `keep`), so it stays under the pointer as the list scrolls.
+     */
+    onLiftedChange?: (id: string | null) => void;
     /** Put the list's props on your own element (the single child, e.g. a TableBody) instead of a ul. */
     asChild?: boolean;
 }

package/dist/sortable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/sortable/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAA6E,MAAM,OAAO,CAAC;AAIlH,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC1G,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAUhF;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,+BAkInH;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC3D,gCAAgC;IAChC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACzC,qGAAqG;IACrG,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/sortable/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAA6E,MAAM,OAAO,CAAC;AAIlH,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC1G,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAUhF;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,aAAa,EACb,UAAU,EACV,cAAc,EACd,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,IAAI,EACV,EAAE,iBAAiB,+BAmKnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC3D,gCAAgC;IAChC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACzC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,qGAAqG;IACrG,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}