@rinzai/zen 0.13.0 → 0.15.0

package/dist/number-field/index.js

@@ -7,77 +7,91 @@ import a, { InputGroupAddon as o, InputGroupInput as s } from "../input-group/in
 import c from "../icons/micro/minus.js";
 import { plainSpaces as l } from "../utils/date.js";
 import u from "../icons/micro/plus.js";
-import { useMemo as d, useState as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useMemo as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region packages/number-field/index.tsx
-function h({ value: l, defaultValue: h = null, onValueChange: y, min: b, max: x, step: S = 1, largeStep: C = S * 10, formatOptions: w, locale: T, name: E, size: D = "default", invalid: O, disabled: k, className: A, onFocus: j, onBlur: M, onKeyDown: N, ...P }) {
-	let F = r(), I = n(T), [L, R, z] = t(l, h, y), B = d(() => new v(I, w), [I, w]), [V, H] = f(null), U = (e) => Math.min(x ?? Infinity, Math.max(b ?? -Infinity, e)), W = (e) => {
-		let t = L ?? (e > 0 ? (b ?? 0) - e : (x ?? 0) - e), n = b ?? 0, r = U(n + Math.round((t + e - n) / S) * S), i = Math.max(_(S), _(n));
-		R(Number(r.toFixed(i))), H(null);
-	}, G = V ?? (L === null ? "" : B.format(L));
-	return /* @__PURE__ */ m(a, {
-		size: D,
-		invalid: O,
-		className: e("zen__number-field px-1", A),
+function g({ value: l, defaultValue: g = null, onValueChange: b, onValueCommit: x, min: S, max: C, step: w = 1, largeStep: T = w * 10, formatOptions: E, locale: D, name: O, size: k = "default", invalid: A, disabled: j, className: M, onFocus: N, onBlur: P, onKeyDown: F, ...I }) {
+	let L = r(), R = n(D), [z, B, V] = t(l, g, void 0), H = d(() => new y(R, E), [R, E]), [U, W] = p(null), G = f(!1), K = (e) => Math.min(C ?? Infinity, Math.max(S ?? -Infinity, e)), q = (e, t) => {
+		B(e), b?.(e, t);
+	}, J = (e, t) => {
+		q(e, t), x?.(e, t), G.current = !1, W(null);
+	}, Y = () => {
+		if (!G.current) return;
+		let e = U === null ? void 0 : H.parse(U), t = e === void 0 ? z : e, n = t === null ? null : K(t);
+		n !== z && q(n, { reason: "input" }), x?.(n, { reason: "input" }), G.current = !1;
+	}, X = (e) => {
+		let t = z ?? (e > 0 ? (S ?? 0) - e : (C ?? 0) - e), n = S ?? 0, r = K(n + Math.round((t + e - n) / w) * w), i = Math.max(v(w), v(n));
+		J(Number(r.toFixed(i)), {
+			reason: "step",
+			delta: e
+		});
+	}, Z = U ?? (z === null ? "" : H.format(z));
+	return /* @__PURE__ */ h(a, {
+		size: k,
+		invalid: A,
+		className: e("zen__number-field px-1", M),
 		children: [
-			/* @__PURE__ */ p(o, { children: /* @__PURE__ */ p(g, {
-				label: F.decrease,
-				disabled: k || L !== null && b !== void 0 && L <= b,
-				onStep: () => W(-S),
-				children: /* @__PURE__ */ p(c, {})
+			/* @__PURE__ */ m(o, { children: /* @__PURE__ */ m(_, {
+				label: L.decrease,
+				disabled: j || z !== null && S !== void 0 && z <= S,
+				onStep: () => X(-w),
+				children: /* @__PURE__ */ m(c, {})
 			}) }),
-			/* @__PURE__ */ p(s, {
+			/* @__PURE__ */ m(s, {
 				role: "spinbutton",
-				inputMode: (w?.maximumFractionDigits ?? 1) > 0 || (b ?? -1) < 0 ? "decimal" : "numeric",
+				inputMode: (E?.maximumFractionDigits ?? 1) > 0 || (S ?? -1) < 0 ? "decimal" : "numeric",
 				autoComplete: "off",
-				"aria-valuenow": L ?? void 0,
-				"aria-valuemin": b,
-				"aria-valuemax": x,
-				"aria-valuetext": L === null ? void 0 : B.format(L),
-				disabled: k,
-				...P,
-				value: G,
+				"aria-valuenow": z ?? void 0,
+				"aria-valuemin": S,
+				"aria-valuemax": C,
+				"aria-valuetext": z === null ? void 0 : H.format(z),
+				disabled: j,
+				...I,
+				value: Z,
 				onFocus: (e) => {
-					j?.(e), H(G);
+					N?.(e), W(Z);
 				},
 				onChange: (e) => {
-					H(e.target.value);
-					let t = B.parse(e.target.value);
-					t !== void 0 && R(t);
+					W(e.target.value), G.current = !0;
+					let t = H.parse(e.target.value);
+					t !== void 0 && q(t, { reason: "input" });
 				},
 				onBlur: (e) => {
-					M?.(e), H(null), L !== null && U(L) !== L && R(U(L));
+					P?.(e), W(null), Y();
 				},
 				onKeyDown: (e) => {
-					N?.(e);
+					if (F?.(e), e.key === "Enter" && !e.defaultPrevented) {
+						Y(), W(null);
+						return;
+					}
 					let t = {
-						ArrowUp: () => W(S),
-						ArrowDown: () => W(-S),
-						PageUp: () => W(C),
-						PageDown: () => W(-C),
-						Home: b === void 0 ? void 0 : () => R(b),
-						End: x === void 0 ? void 0 : () => R(x)
+						ArrowUp: () => X(w),
+						ArrowDown: () => X(-w),
+						PageUp: () => X(T),
+						PageDown: () => X(-T),
+						Home: S === void 0 ? void 0 : () => J(S, { reason: "limit" }),
+						End: C === void 0 ? void 0 : () => J(C, { reason: "limit" })
 					}[e.key];
-					t && !e.defaultPrevented && (e.preventDefault(), t(), H(null));
+					t && !e.defaultPrevented && (e.preventDefault(), t());
 				},
 				className: "text-center tabular-nums"
 			}),
-			/* @__PURE__ */ p(o, { children: /* @__PURE__ */ p(g, {
-				label: F.increase,
-				disabled: k || L !== null && x !== void 0 && L >= x,
-				onStep: () => W(S),
-				children: /* @__PURE__ */ p(u, {})
+			/* @__PURE__ */ m(o, { children: /* @__PURE__ */ m(_, {
+				label: L.increase,
+				disabled: j || z !== null && C !== void 0 && z >= C,
+				onStep: () => X(w),
+				children: /* @__PURE__ */ m(u, {})
 			}) }),
-			/* @__PURE__ */ p(i, {
-				name: E,
-				value: L === null ? "" : String(L),
-				onReset: z
+			/* @__PURE__ */ m(i, {
+				name: O,
+				value: z === null ? "" : String(z),
+				onReset: V
 			})
 		]
 	});
 }
-function g({ label: e, disabled: t, onStep: n, children: r }) {
-	return /* @__PURE__ */ p("button", {
+function _({ label: e, disabled: t, onStep: n, children: r }) {
+	return /* @__PURE__ */ m("button", {
 		type: "button",
 		tabIndex: -1,
 		"aria-label": e,
@@ -88,7 +102,7 @@ function g({ label: e, disabled: t, onStep: n, children: r }) {
 		children: r
 	});
 }
-var _ = (e) => (String(e).split(".")[1] ?? "").length, v = class {
+var v = (e) => (String(e).split(".")[1] ?? "").length, y = class {
 	formatter;
 	decimal;
 	digits;
@@ -116,4 +130,4 @@ var _ = (e) => (String(e).split(".")[1] ?? "").length, v = class {
 	}
 };
 //#endregion
-export { h as default };
+export { g as default };

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

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+/**
+ * What's playing, along the bottom of the screen: a glass bar for the cover,
+ * the title, the controls and a SeekBar, laid out as you like. It sits on a
+ * TabBar beside it (in the same parent), and clears the home indicator where
+ * there's none. Its height is kept in `--zen-player-bar-height` on that
+ * parent, for the page to pad its end by. Name it with an aria-label ("Now playing"). Drive it with useMediaPlayer.
+ */
+export default function PlayerBar({ className, ref, ...rest }: PlayerBarProps): import('react').JSX.Element;
+export type PlayerBarProps = ComponentProps<'section'>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/player-bar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAU,MAAM,OAAO,CAAC;AAE/C;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,+BAe5E;AAED,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC"}

package/dist/player-bar/index.js

@@ -0,0 +1,17 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useMergedRefs as t } from "../utils/refs.js";
+import { useHeightVar as n } from "../utils/useHeightVar.js";
+import { useRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region packages/player-bar/index.tsx
+function a({ className: a, ref: o, ...s }) {
+	let c = r(null);
+	return n(c, "--zen-player-bar-height"), /* @__PURE__ */ i("section", {
+		ref: t(c, o),
+		className: e("zen__player-bar glass glass-blur glow-edge fixed inset-x-0 bottom-[var(--zen-tab-bar-height,0px)] z-40 flex items-center gap-4 rounded-none border-x-0! border-b-0! px-4 pt-3", "pb-[calc(0.75rem_+_max(0px,_env(safe-area-inset-bottom)_-_var(--zen-tab-bar-height,_0px)))]", a),
+		...s
+	});
+}
+//#endregion
+export { a as default };

package/dist/radio-cards/index.d.ts

@@ -14,7 +14,8 @@ export default function RadioCards<V extends string>({ label, value: valueProp,
 export declare function RadioCard({ value, disabled, className, style, children }: RadioCardProps): import('react').JSX.Element;
 /** Other props (aria-*, data-*, an id) go on the cards' container, the radiogroup. */
 export interface RadioCardsProps<V extends string> extends Omit<ComponentProps<'div'>, 'defaultValue' | 'children'> {
-    label: string;
+    /** Shown above the cards, naming the group. Without it, give the group an aria-label or aria-labelledby. */
+    label?: string;
     /** The chosen card, when you keep it. */
     value?: V;
     /** The first chosen card, when the group keeps its own. */

package/dist/radio-cards/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/radio-cards/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAiB,aAAa,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAUnG;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EACjD,KAAK,EACL,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,eAAe,CAAC,CAAC,CAAC,+BAiBpB;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,cAAc,+BAyBxF;AAED,sFAAsF;AACtF,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IAC/G,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,2DAA2D;IAC3D,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,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/radio-cards/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAiB,aAAa,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAUnG;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EACjD,KAAK,EACL,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,eAAe,CAAC,CAAC,CAAC,+BAmBpB;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,cAAc,+BAyBxF;AAED,sFAAsF;AACtF,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IAC/G,4GAA4G;IAC5G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,2DAA2D;IAC3D,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,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACvB"}

package/dist/radio-cards/index.js

@@ -9,13 +9,13 @@ function c({ label: e, value: n, defaultValue: r, onValueChange: c, name: l, cla
 	let [p, m] = t(n, r, c), h = i();
 	return /* @__PURE__ */ o("div", {
 		className: "zen__radio-cards flex flex-col gap-2",
-		children: [/* @__PURE__ */ a("span", {
+		children: [e && /* @__PURE__ */ a("span", {
 			id: h,
 			className: "text-sm font-medium",
 			children: e
 		}), /* @__PURE__ */ a("div", {
 			role: "radiogroup",
-			"aria-labelledby": h,
+			"aria-labelledby": e ? h : void 0,
 			className: u,
 			...f,
 			children: /* @__PURE__ */ a(s.Provider, {
@@ -34,7 +34,7 @@ function l({ value: t, disabled: n, className: i, style: c, children: l }) {
 	if (!u) throw Error("<RadioCard> must be inside <RadioCards>");
 	return /* @__PURE__ */ o("label", {
 		style: c,
-		className: e("zen__radio-card border-tint/10 relative flex items-center gap-3 rounded-xl border p-2.5 text-start text-sm transition-[border-color,box-shadow] duration-200", "hover:has-enabled:border-tint/20 has-checked:border-primary/60 has-checked:shadow-[0_0_0_3px_oklch(var(--primary)/0.15)]", "has- has-focus-ring has-disabled:opacity-60", i),
+		className: e("zen__radio-card border-tint/10 relative flex items-center gap-3 rounded-xl border p-2.5 text-start text-sm transition-[border-color,box-shadow] duration-200", "hover:has-enabled:border-tint/20 has-checked:border-primary/60 has-checked:shadow-[0_0_0_3px_oklch(var(--primary)/0.15)]", "has-focus-ring has-disabled:opacity-60", i),
 		children: [/* @__PURE__ */ a("input", {
 			type: "radio",
 			name: u.name,

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

@@ -0,0 +1,24 @@
+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, 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;
+}
+//# 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,SAAS,EACT,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EAAE,YAAY,+BA6Gd;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;CAClC"}

package/dist/seek-bar/index.js

@@ -0,0 +1,120 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useMessages as t } from "../locale-provider/index.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, onKeyDown: g, disabled: _, className: v, ...y }) {
+	let b = t(), [x, S] = o(null), [C, w] = o(null), T = C && C.from === u ? C.at : null, E = Math.max(0, Math.min(x ?? T ?? u, d)), D = a(null), O = a(null), k = p && x === null && T === null && d > 0 && E < d, A = a(null);
+	i(() => {
+		let e = [D.current, O.current].filter((e) => e !== null);
+		if (!e.length) return;
+		let t = A.current;
+		if (k && t && t.rate === m && t.duration === d) {
+			let e = Number(t.animations[0].currentTime ?? 0) / 1e3;
+			if (Math.abs(t.from + e * m - E) < .15) return;
+		}
+		t?.animations.forEach((e) => e.cancel()), A.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(E);
+		if (!k) return;
+		let i = e.map((e) => e.animate([{ translate: r(E) }, { translate: r(d) }], {
+			duration: (d - E) / m * 1e3,
+			easing: "linear",
+			fill: "forwards"
+		}));
+		A.current = {
+			animations: i,
+			from: E,
+			rate: m,
+			duration: d
+		};
+	}, [
+		E,
+		d,
+		k,
+		m
+	]), i(() => () => A.current?.animations.forEach((e) => e.cancel()), []);
+	let j = (e) => {
+		if (g?.(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(E + n * l, d));
+		w({
+			at: r,
+			from: u
+		}), h(r);
+	}, M = _ || d <= 0, N = d > 0 ? Math.min(f, d) / d * 100 : 0, P = { width: `${r(d).length}ch` };
+	return /* @__PURE__ */ c("div", {
+		className: e("zen__seek-bar flex items-center gap-3", v),
+		children: [
+			/* @__PURE__ */ s("span", {
+				className: "text-muted-foreground shrink-0 text-end text-xs tabular-nums",
+				style: P,
+				children: r(E)
+			}),
+			/* @__PURE__ */ c("div", {
+				className: e("group relative h-5 min-w-0 flex-1", M && "opacity-50"),
+				children: [
+					/* @__PURE__ */ s(n, {
+						"aria-label": b.seek,
+						min: 0,
+						max: d || 1,
+						step: "any",
+						value: E,
+						disabled: M,
+						valueText: () => b.timeOf(r(E), r(d)),
+						className: "absolute inset-0 z-10 h-full opacity-0",
+						onKeyDown: j,
+						onValueChange: S,
+						onValueCommit: (e) => {
+							S(null), w({
+								at: e,
+								from: u
+							}), h(e);
+						},
+						...y
+					}),
+					/* @__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: `${N}%` }
+						}), /* @__PURE__ */ s("div", {
+							className: "[container-type:inline-size] absolute inset-x-2.5 inset-y-0",
+							children: /* @__PURE__ */ s("div", {
+								ref: D,
+								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: O,
+							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: P,
+				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/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/tab-bar/index.d.ts

@@ -2,11 +2,13 @@ import { ComponentProps, ReactNode } from 'react';
 /**
  * Phone navigation: a glass bar fixed to the bottom, clear of the home
  * indicator, hidden from `hideFrom` up (default md). Fill it with TabBarItems.
+ * Its height is kept in `--zen-tab-bar-height` on its parent (0px while
+ * hidden): a PlayerBar beside it sits on it, and the page can pad its end by it.
  * Inside a rounded frame, round the bar to match (className, e.g.
  * rounded-b-[15px]): with GPU compositing, Chrome doesn't clip a blurred
  * backdrop to an ancestor's rounded corners, only to the element's own.
  */
-export default function TabBar({ hideFrom, className, children, ...rest }: TabBarProps): import('react').JSX.Element;
+export default function TabBar({ hideFrom, className, children, ref, ...rest }: TabBarProps): import('react').JSX.Element;
 /**
  * One destination: an icon over a label. `active` marks the current page; with
  * `asChild`, the styles go onto your own link (e.g. a router's NavLink, which
@@ -20,7 +22,7 @@ export interface TabBarProps extends ComponentProps<'nav'> {
 export interface TabBarItemProps extends ComponentProps<'a'> {
     icon?: ReactNode;
     active?: boolean;
-    /** Style the single child element (a router link holding the icon and label) instead of rendering an <a>. */
+    /** Style the single child element (a router link holding the label) instead of rendering an <a>; `icon` goes inside it. */
     asChild?: boolean;
 }
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tab-bar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,QAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAiB5F;AAOD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,+BAYlG;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,KAAK,CAAC;IACtD,iEAAiE;IACjE,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;CACzC;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,GAAG,CAAC;IACxD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6GAA6G;IAC7G,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tab-bar/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,cAAc,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAEpE;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,QAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAoBjG;AAOD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,+BAgBlG;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,KAAK,CAAC;IACtD,iEAAiE;IACjE,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;CACzC;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,GAAG,CAAC;IACxD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2HAA2H;IAC3H,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/tab-bar/index.js

@@ -1,34 +1,39 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { Slot as t } from "../utils/slot.js";
-import { Children as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useMergedRefs as t } from "../utils/refs.js";
+import { Slot as n } from "../utils/slot.js";
+import { useHeightVar as r } from "../utils/useHeightVar.js";
+import { Children as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region packages/tab-bar/index.tsx
-function a({ hideFrom: t = "md", className: i, children: a, ...o }) {
-	return /* @__PURE__ */ r("nav", {
-		className: e("zen__tab-bar glass glass-blur glow-edge fixed inset-x-0 bottom-0 z-40 rounded-none border-x-0! border-b-0! pb-[env(safe-area-inset-bottom)]", t === "sm" && "sm:hidden", t === "md" && "md:hidden", t === "lg" && "lg:hidden", i),
-		...o,
-		children: /* @__PURE__ */ r("div", {
+function c({ hideFrom: n = "md", className: s, children: c, ref: l, ...u }) {
+	let d = a(null);
+	return r(d, "--zen-tab-bar-height"), /* @__PURE__ */ o("nav", {
+		ref: t(d, l),
+		className: e("zen__tab-bar glass glass-blur glow-edge fixed inset-x-0 bottom-0 z-40 rounded-none border-x-0! border-b-0! pb-[env(safe-area-inset-bottom)]", n === "sm" && "sm:hidden", n === "md" && "md:hidden", n === "lg" && "lg:hidden", s),
+		...u,
+		children: /* @__PURE__ */ o("div", {
 			className: "grid",
-			style: { gridTemplateColumns: `repeat(${n.count(a)}, 1fr)` },
-			children: a
+			style: { gridTemplateColumns: `repeat(${i.count(c)}, 1fr)` },
+			children: c
 		})
 	});
 }
-var o = e("flex flex-col items-center gap-1 py-2.5 text-2xs outline-hidden transition-colors duration-200 focus-ring focus-visible:ring-inset", "text-muted-foreground aria-[current=page]:text-primary [&_svg]:size-5 aria-[current=page]:[&_svg]:drop-shadow-[0_0_8px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]");
-function s({ icon: n, active: a, asChild: s, className: c, children: l, ...u }) {
+var l = e("flex flex-col items-center gap-1 py-2.5 text-2xs outline-hidden transition-colors duration-200 focus-ring focus-visible:ring-inset", "text-muted-foreground aria-[current=page]:text-primary [&_svg]:size-5 aria-[current=page]:[&_svg]:drop-shadow-[0_0_8px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]");
+function u({ icon: t, active: r, asChild: i, className: a, children: c, ...u }) {
 	let d = {
 		...u,
-		"aria-current": a ? "page" : void 0,
-		className: e(o, c)
+		"aria-current": r ? "page" : void 0,
+		className: e(l, a)
 	};
-	return s ? (a || delete d["aria-current"], /* @__PURE__ */ r(t, {
+	return i ? (r || delete d["aria-current"], /* @__PURE__ */ o(n, {
 		...d,
-		children: l
-	})) : /* @__PURE__ */ i("a", {
+		before: t,
+		children: c
+	})) : /* @__PURE__ */ s("a", {
 		...d,
-		children: [n, l]
+		children: [t, c]
 	});
 }
 //#endregion
-export { s as TabBarItem, a as default };
+export { u as TabBarItem, c as default };

package/dist/textarea/index.d.ts

@@ -1,4 +1,8 @@
 import { ComponentProps } from 'react';
-export default function Textarea(props: TextAreaProps): import('react').JSX.Element;
-export type TextAreaProps = ComponentProps<'textarea'>;
+export default function Textarea(props: TextareaProps): import('react').JSX.Element;
+export type TextareaProps = ComponentProps<'textarea'>;
+/** @deprecated Renamed Textarea, like the element. */
+export declare const TextArea: typeof Textarea;
+/** @deprecated Renamed TextareaProps. */
+export type TextAreaProps = TextareaProps;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/textarea/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAiBpD;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/textarea/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAiBpD;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;AAEvD,sDAAsD;AACtD,eAAO,MAAM,QAAQ,iBAAW,CAAC;AACjC,yCAAyC;AACzC,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC"}

package/dist/textarea/index.js

@@ -12,5 +12,6 @@ function i(i) {
 		...s
 	});
 }
+var a = i;
 //#endregion
-export { i as default };
+export { a as TextArea, i as default };