@jfrader/ui 0.5.0 → 0.6.0

package/dist/{time-picker-Db8D49cP.js → time-picker-Tnd-JBLC.js}

@@ -1,11 +1,12 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./media-8yrN85VT.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./media-8yrN85VT.js";
+import { t as n } from "./sx-BJXJ2xJK.js";
 import { t as r } from "./use-controlled-state-DpeVQZNR.js";
 import { t as i } from "./renderable-DzcIj1Lo.js";
-import { t as a } from "./icon-wrapper-stN8sD7R.js";
-import { a as o } from "./field-anatomy-COVdNpf5.js";
-import { t as s } from "./select-n_H52W1Z.js";
+import { t as a } from "./icon-wrapper-C-zMD0uL.js";
+import { a as o } from "./field-anatomy-BDIP42MI.js";
+import { t as s } from "./select-SrcQqZjo.js";
 import { useEffect as c, useId as ee, useMemo as te, useRef as l, useState as ne } from "react";
 import { vars as u } from "@jfrader/tokens/vars";
 import { createElement as re } from "@emotion/react";
@@ -41,7 +42,7 @@ var de = e({
 	inlineSize: "100%",
 	gap: u.space[2],
 	"&[aria-invalid=\"true\"]": { borderColor: u.color.dangerText },
-	[n]: {
+	[t]: {
 		backgroundColor: "Canvas",
 		color: "CanvasText",
 		borderColor: "CanvasText",
@@ -77,20 +78,20 @@ var de = e({
 	maxInlineSize: "calc(100vw - 16px)",
 	maxBlockSize: `min(${h}, var(--time-picker-available-height, ${h}))`,
 	overscrollBehavior: "contain",
-	[n]: {
+	[t]: {
 		backgroundColor: "Canvas",
 		color: "CanvasText",
 		borderColor: "CanvasText"
 	}
 }), ve = e({
 	minBlockSize: u.space[8],
-	[n]: {
+	[t]: {
 		"&[data-active]": { outlineColor: "Highlight" },
 		"&[aria-selected=\"true\"]": { border: "1px solid Highlight" }
 	}
 });
-function b({ ref: e, value: n, defaultValue: u = oe, onValueChange: m, open: h, defaultOpen: g = !1, onOpenChange: b, minuteStep: x = 15, min: S, max: C, locale: ye, hourCycle: w, label: T, description: E, error: D, placeholder: be, size: xe = "md", disabled: Se = !1, readOnly: O = !1, required: k = !1, name: Ce, icon: A, slotProps: j, className: we, sx: Te, dir: M, id: Ee, onClick: De, onKeyDown: Oe, onBlur: ke, ...N }) {
-	let P = l(u).current, [F = "", I, L] = r(n, P, m), [Ae = !1, je] = r(h, g, b), R = Se || j?.control?.disabled === !0, z = R || O, B = Ae && !z, V = l(null), H = l(null), [U, Me] = ne(null), W = l(!1), Ne = p([
+function b({ ref: e, value: t, defaultValue: u = oe, onValueChange: m, open: h, defaultOpen: g = !1, onOpenChange: b, minuteStep: x = 15, min: ye, max: be, locale: S, hourCycle: C, label: w, description: T, error: E, placeholder: xe, size: Se = "md", disabled: Ce = !1, readOnly: D = !1, required: O = !1, name: k, icon: A, slotProps: j, className: we, sx: Te, dir: M, id: Ee, onClick: De, onKeyDown: Oe, onBlur: ke, ...N }) {
+	let P = l(u).current, [F = "", I, L] = r(t, P, m), [Ae = !1, je] = r(h, g, b), R = Ce || j?.control?.disabled === !0, z = R || D, B = Ae && !z, V = l(null), H = l(null), [U, Me] = ne(null), W = l(!1), Ne = p([
 		V,
 		e,
 		j?.control?.ref
@@ -98,12 +99,12 @@ function b({ ref: e, value: n, defaultValue: u = oe, onValueChange: m, open: h,
 		H,
 		Me,
 		j?.content?.ref
-	]), G = `${ee()}-label`, K = te(() => new Intl.DateTimeFormat(ye ?? le(), {
+	]), G = `${ee()}-label`, K = te(() => new Intl.DateTimeFormat(S ?? le(), {
 		hour: "numeric",
 		minute: "2-digit",
 		timeZone: "UTC",
-		...w === void 0 ? {} : { hourCycle: w }
-	}), [ye, w]), q = _(S), J = _(C), Y = S !== void 0 && q === void 0 || C !== void 0 && J === void 0 || q !== void 0 && J !== void 0 && q > J, X = te(() => Y ? [] : Array.from({ length: ie / x }, (e, t) => t * x).filter((e) => e >= (q ?? 0) && e <= (J ?? 1439)).map((e) => ({
+		...C === void 0 ? {} : { hourCycle: C }
+	}), [S, C]), q = _(ye), J = _(be), Y = ye !== void 0 && q === void 0 || be !== void 0 && J === void 0 || q !== void 0 && J !== void 0 && q > J, X = te(() => Y ? [] : Array.from({ length: ie / x }, (e, t) => t * x).filter((e) => e >= (q ?? 0) && e <= (J ?? 1439)).map((e) => ({
 		time: e,
 		value: ue(e),
 		label: K.format(/* @__PURE__ */ new Date(e * ae))
@@ -115,26 +116,26 @@ function b({ ref: e, value: n, defaultValue: u = oe, onValueChange: m, open: h,
 		K
 	]), Z = _(F), Fe = Y || F !== "" && Z === void 0, Q = j?.control, $ = o({
 		id: Ee ?? Q?.id,
-		description: E,
-		error: D,
+		description: T,
+		error: E,
 		"aria-describedby": [N["aria-describedby"], Q?.["aria-describedby"]].filter(Boolean).join(" ") || void 0,
 		"aria-invalid": Fe ? !0 : N["aria-invalid"] ?? Q?.["aria-invalid"]
 	}), Ie = [
 		N["aria-labelledby"],
 		Q?.["aria-labelledby"],
-		i(T) && G
-	].filter(Boolean).join(" ") || void 0, Le = Z === void 0 ? be : K.format(/* @__PURE__ */ new Date(Z * ae));
+		i(w) && G
+	].filter(Boolean).join(" ") || void 0, Le = Z === void 0 ? xe : K.format(/* @__PURE__ */ new Date(Z * ae));
 	return c(() => {
 		let e = V.current?.form;
 		if (!e) return;
-		let t = (e) => {
+		let n = (e) => {
 			queueMicrotask(() => {
-				e.defaultPrevented || (n === void 0 ? L() : I(P));
+				e.defaultPrevented || (t === void 0 ? L() : I(P));
 			});
 		};
-		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+		return e.addEventListener("reset", n), () => e.removeEventListener("reset", n);
 	}, [
-		n,
+		t,
 		I,
 		L,
 		P,
@@ -181,7 +182,7 @@ function b({ ref: e, value: n, defaultValue: u = oe, onValueChange: m, open: h,
 		M,
 		Q?.dir,
 		j?.root?.dir
-	]), /* @__PURE__ */ d(t, {
+	]), /* @__PURE__ */ d(n, {
 		className: [we, j?.root?.className].filter(Boolean).join(" "),
 		styles: [de, j?.root?.css],
 		sx: Te,
@@ -192,12 +193,12 @@ function b({ ref: e, value: n, defaultValue: u = oe, onValueChange: m, open: h,
 			dir: M ?? j?.root?.dir,
 			"data-ui": "time-picker",
 			children: [
-				i(T) && /* @__PURE__ */ f("label", {
+				i(w) && /* @__PURE__ */ f("label", {
 					...j?.label,
 					id: G,
 					htmlFor: $.id,
 					css: [fe, j?.label?.css],
-					children: [T, k && /* @__PURE__ */ f("span", {
+					children: [w, O && /* @__PURE__ */ f("span", {
 						"aria-hidden": !0,
 						css: y,
 						children: [" ", "*"]
@@ -210,7 +211,6 @@ function b({ ref: e, value: n, defaultValue: u = oe, onValueChange: m, open: h,
 					onOpenChange: (e) => {
 						!z && (X.length > 0 || !e) && je(e);
 					},
-					name: Ce,
 					disabled: R,
 					children: [/* @__PURE__ */ f(s.Trigger, {
 						...Q,
@@ -223,11 +223,11 @@ function b({ ref: e, value: n, defaultValue: u = oe, onValueChange: m, open: h,
 						"aria-labelledby": Ie,
 						"aria-describedby": $.describedBy,
 						"aria-invalid": $.ariaInvalid,
-						"aria-readonly": O || N["aria-readonly"] || Q?.["aria-readonly"],
-						"aria-required": k || N["aria-required"] || Q?.["aria-required"],
+						"aria-readonly": D || N["aria-readonly"] || Q?.["aria-readonly"],
+						"aria-required": O || N["aria-required"] || Q?.["aria-required"],
 						css: [
 							me,
-							he[xe],
+							he[Se],
 							Q?.css
 						],
 						onClick: void 0,
@@ -283,18 +283,25 @@ function b({ ref: e, value: n, defaultValue: u = oe, onValueChange: m, open: h,
 						}, e.label))
 					})]
 				}),
-				i(E) && /* @__PURE__ */ d("span", {
+				k !== void 0 && /* @__PURE__ */ d("input", {
+					type: "hidden",
+					name: k,
+					value: F,
+					disabled: R,
+					form: N.form ?? Q?.form
+				}),
+				i(T) && /* @__PURE__ */ d("span", {
 					...j?.description,
 					id: $.descriptionId,
 					css: [pe, j?.description?.css],
-					children: E
+					children: T
 				}),
-				i(D) && /* @__PURE__ */ d("span", {
+				i(E) && /* @__PURE__ */ d("span", {
 					...j?.error,
 					id: $.errorId,
 					role: "alert",
 					css: [y, j?.error?.css],
-					children: D
+					children: E
 				})
 			]
 		})

package/dist/time-picker.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as TimePicker } from "./time-picker-Db8D49cP.js";
+export { t as TimePicker } from "./time-picker-Tnd-JBLC.js";

package/dist/{timeline-k3nURuCP.js → timeline-DaldDMX7.js}

@@ -1,14 +1,15 @@
 'use client';
-import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
-import { t as r } from "./disclosure-caret-C5T3fcl6.js";
-import { t as i } from "./focus-ring-BK5W5_NY.js";
-import { n as a, r as o } from "./media-8yrN85VT.js";
+import { a as e, i as t } from "./css-BYJhdGh-.js";
+import { t as n } from "./disclosure-caret-C5T3fcl6.js";
+import { t as r } from "./focus-ring-BK5W5_NY.js";
+import { n as i, r as a } from "./media-8yrN85VT.js";
+import { t as o } from "./sx-BJXJ2xJK.js";
 import { r as s } from "./roving-focus-CYlo_Kf8.js";
 import { t as c } from "./use-controlled-state-DpeVQZNR.js";
-import { t as l } from "./visually-hidden-BJdvqqvn.js";
+import { t as l } from "./visually-hidden-DgVO3NaB.js";
 import { t as u } from "./renderable-DzcIj1Lo.js";
-import { t as d } from "./icon-wrapper-stN8sD7R.js";
-import { t as f } from "./avatar-BahDVO9t.js";
+import { t as d } from "./icon-wrapper-C-zMD0uL.js";
+import { t as f } from "./avatar-B6idYC59.js";
 import { t as p } from "./part-id-D0zksy32.js";
 import { useEffect as ee, useId as te, useLayoutEffect as ne, useMemo as m, useRef as h, useState as re } from "react";
 import { vars as g } from "@jfrader/tokens/vars";
@@ -171,7 +172,7 @@ var M = "(prefers-reduced-motion: reduce)", _e = (e) => e.ownerDocument.defaultV
 		overflowAnchor: "none",
 		scrollPaddingBlockStart: g.space[10]
 	},
-	"&:focus-visible": { ...i }
+	"&:focus-visible": { ...r }
 }), xe = t({ "& + &": { marginBlockStart: "var(--timeline-row-gap)" } }), Se = t({
 	position: "sticky",
 	insetBlockStart: 0,
@@ -215,8 +216,8 @@ var M = "(prefers-reduced-motion: reduce)", _e = (e) => e.ownerDocument.defaultV
 		animationDuration: g.motion.duration.base,
 		animationTimingFunction: g.motion.easeStandard
 	},
-	[o]: { "&[data-new]": { animation: "none" } },
-	[a]: { "&::before": { borderInlineStartColor: "GrayText" } }
+	[a]: { "&[data-new]": { animation: "none" } },
+	[i]: { "&::before": { borderInlineStartColor: "GrayText" } }
 }), P = t({
 	boxSizing: "border-box",
 	display: "flex",
@@ -231,7 +232,7 @@ var M = "(prefers-reduced-motion: reduce)", _e = (e) => e.ownerDocument.defaultV
 	overflow: "hidden",
 	fontSize: g.textSize.xs,
 	"&[data-kind=\"avatar\"]": { border: 0 },
-	[a]: {
+	[i]: {
 		borderColor: "CanvasText",
 		color: "CanvasText"
 	}
@@ -250,7 +251,7 @@ var M = "(prefers-reduced-motion: reduce)", _e = (e) => e.ownerDocument.defaultV
 	blockSize: g.space[2],
 	borderRadius: g.radius.full,
 	backgroundColor: "currentColor",
-	[a]: {
+	[i]: {
 		backgroundColor: "CanvasText",
 		forcedColorAdjust: "none"
 	}
@@ -298,18 +299,24 @@ var M = "(prefers-reduced-motion: reduce)", _e = (e) => e.ownerDocument.defaultV
 	transitionDuration: g.motion.duration.fast,
 	transitionTimingFunction: g.motion.easeStandard,
 	"&::after": {
-		...r,
+		...n,
 		transitionDuration: g.motion.duration.fast
 	},
 	"&[aria-expanded=\"true\"]::after": { transform: "rotate(90deg)" },
 	"&[aria-expanded=\"true\"]:dir(rtl)::after": { transform: "rotate(-90deg)" },
 	"&:hover": { backgroundColor: g.color.surfaceHover },
-	"&:focus-visible": { ...i },
-	[o]: {
+	"&:focus-visible": { ...r },
+	[a]: {
 		transitionDuration: "0s",
 		"&::after": { transitionDuration: "0s" }
 	},
-	[a]: { "&:focus-visible": { outlineColor: "Highlight" } }
+	[i]: {
+		"&:focus-visible": { outlineColor: "Highlight" },
+		"&::after": {
+			forcedColorAdjust: "none",
+			color: "ButtonText"
+		}
+	}
 }), Me = t({
 	fontSize: g.textSize.xs,
 	color: g.color.textMuted
@@ -363,15 +370,15 @@ function Ie({ event: e, part: t }) {
 		children: i
 	});
 }
-function L({ ref: e, events: t, now: r, value: i, defaultValue: a, onValueChange: o, locale: u, timeZone: d = y, headingLevel: f = 3, maxHeight: g, scrollToNew: b = !1, size: x = "md", labels: oe, slotProps: S, className: se, sx: ce, onKeyDown: C, onFocus: O, onBlur: k, "aria-label": A, "aria-labelledby": j, "aria-describedby": M, ...N }) {
-	let P = te(), F = h(null), I = h(null), L = ie([e, F]), R = g !== void 0, z = D(r) ? r : null, { formatters: B, problems: Le } = m(() => ue(u, d), [u, d]), V = {
+function L({ ref: e, events: t, now: n, value: r, defaultValue: i, onValueChange: a, locale: u, timeZone: d = y, headingLevel: f = 3, maxHeight: g, scrollToNew: b = !1, size: x = "md", labels: oe, slotProps: S, className: se, sx: ce, onKeyDown: C, onFocus: O, onBlur: k, "aria-label": A, "aria-labelledby": j, "aria-describedby": M, ...N }) {
+	let P = te(), F = h(null), I = h(null), L = ie([e, F]), R = g !== void 0, z = D(n) ? n : null, { formatters: B, problems: Le } = m(() => ue(u, d), [u, d]), V = {
 		...ge(B),
 		...oe
 	}, H = m(() => de(t, B.dayParts, z), [
 		t,
 		B,
 		z
-	]), U = m(() => H.flatMap((e) => e.rows.map((e) => e.event.id)), [H]), W = H[0]?.epoch ?? null, [G = ae, Re] = c(i, a ?? ae, (e) => o?.([...e])), ze = new Set(G), Be = pe(G), K = h(null);
+	]), U = m(() => H.flatMap((e) => e.rows.map((e) => e.event.id)), [H]), W = H[0]?.epoch ?? null, [G = ae, Re] = c(r, i ?? ae, (e) => a?.([...e])), ze = new Set(G), Be = pe(G), K = h(null);
 	ne(() => {
 		K.current = null;
 	}, [Be]);
@@ -442,7 +449,7 @@ function L({ ref: e, events: t, now: r, value: i, defaultValue: a, onValueChange
 	}, [U, R]);
 	let Ge = fe(U), Q = [
 		...Le,
-		...z === null ? [`Timeline: now ${String(r)} is not a finite epoch-ms value; showing absolute times.`] : [],
+		...z === null ? [`Timeline: now ${String(n)} is not a finite epoch-ms value; showing absolute times.`] : [],
 		...Ge.length > 0 ? [`Timeline: duplicate event ids ${JSON.stringify(Ge)}.`] : []
 	].join("\n");
 	ee(() => {
@@ -471,7 +478,7 @@ function L({ ref: e, events: t, now: r, value: i, defaultValue: a, onValueChange
 		"aria-label": A ?? (j ? void 0 : V.region),
 		"aria-labelledby": j
 	}, Qe = [M, Ye ? Xe : void 0].filter(Boolean).join(" ") || void 0;
-	return /* @__PURE__ */ _(n, {
+	return /* @__PURE__ */ _(o, {
 		className: se,
 		styles: [ve, ye[x]],
 		sx: ce,

package/dist/timeline.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Timeline } from "./timeline-k3nURuCP.js";
+export { t as Timeline } from "./timeline-DaldDMX7.js";