@jfrader/ui 0.3.0 → 0.5.0

package/dist/time-picker-Db8D49cP.js

@@ -0,0 +1,305 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./media-8yrN85VT.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 { 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";
+import { jsx as d, jsxs as f } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as p } from "@floating-ui/react";
+//#region src/components/time-picker/time-picker.tsx
+var m = 60, ie = 1440, ae = 6e4, h = "250px", oe = "09:00", se = 8, ce = 8, g = /^([01]\d|2[0-3]):([0-5]\d)$/, le = () => typeof navigator > "u" ? void 0 : navigator.language;
+function _(e) {
+	if (e !== void 0 && g.test(e)) return Number(e.slice(0, 2)) * m + Number(e.slice(3));
+}
+function ue(e) {
+	return `${String(Math.floor(e / m)).padStart(2, "0")}:${String(e % m).padStart(2, "0")}`;
+}
+function v(e, t) {
+	e.offsetTop < t.scrollTop ? t.scrollTop = e.offsetTop : e.offsetTop + e.offsetHeight > t.scrollTop + t.clientHeight && (t.scrollTop = e.offsetTop + e.offsetHeight - t.clientHeight);
+}
+var de = e({
+	display: "grid",
+	gap: u.space[1],
+	inlineSize: "100%"
+}), fe = e({
+	fontSize: u.textSize.sm,
+	fontWeight: u.fontWeight.medium,
+	color: u.color.text
+}), pe = e({
+	fontSize: u.textSize.sm,
+	color: u.color.textMuted
+}), y = e({
+	fontSize: u.textSize.sm,
+	color: u.color.dangerText
+}), me = e({
+	minInlineSize: u.space[12],
+	inlineSize: "100%",
+	gap: u.space[2],
+	"&[aria-invalid=\"true\"]": { borderColor: u.color.dangerText },
+	[n]: {
+		backgroundColor: "Canvas",
+		color: "CanvasText",
+		borderColor: "CanvasText",
+		"&:focus-visible": { outlineColor: "Highlight" }
+	}
+}), he = {
+	sm: e({
+		minBlockSize: u.space[8],
+		paddingInline: u.space[3],
+		fontSize: u.textSize.sm
+	}),
+	md: e({
+		minBlockSize: u.space[10],
+		paddingInline: u.space[4],
+		fontSize: u.textSize.sm
+	}),
+	lg: e({
+		minBlockSize: u.space[12],
+		paddingInline: u.space[4],
+		fontSize: u.textSize.md
+	})
+}, ge = e({
+	flex: 1,
+	minInlineSize: 0,
+	textAlign: "start",
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap",
+	"&[data-placeholder]": { color: u.color.textMuted }
+}), _e = e({
+	inlineSize: "var(--time-picker-inline-size)",
+	minInlineSize: 0,
+	maxInlineSize: "calc(100vw - 16px)",
+	maxBlockSize: `min(${h}, var(--time-picker-available-height, ${h}))`,
+	overscrollBehavior: "contain",
+	[n]: {
+		backgroundColor: "Canvas",
+		color: "CanvasText",
+		borderColor: "CanvasText"
+	}
+}), ve = e({
+	minBlockSize: u.space[8],
+	[n]: {
+		"&[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([
+		V,
+		e,
+		j?.control?.ref
+	]), Pe = p([
+		H,
+		Me,
+		j?.content?.ref
+	]), G = `${ee()}-label`, K = te(() => new Intl.DateTimeFormat(ye ?? 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) => ({
+		time: e,
+		value: ue(e),
+		label: K.format(/* @__PURE__ */ new Date(e * ae))
+	})), [
+		x,
+		q,
+		J,
+		Y,
+		K
+	]), Z = _(F), Fe = Y || F !== "" && Z === void 0, Q = j?.control, $ = o({
+		id: Ee ?? Q?.id,
+		description: E,
+		error: D,
+		"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));
+	return c(() => {
+		let e = V.current?.form;
+		if (!e) return;
+		let t = (e) => {
+			queueMicrotask(() => {
+				e.defaultPrevented || (n === void 0 ? L() : I(P));
+			});
+		};
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, [
+		n,
+		I,
+		L,
+		P,
+		N.form,
+		Q?.form
+	]), c(() => {
+		if (!B) return;
+		let e = V.current, t = U, n = e?.ownerDocument.defaultView;
+		if (!e || !t || !n) return;
+		let r = () => {
+			let r = e.getBoundingClientRect(), i = Math.max(r.top - ce - se, n.innerHeight - r.bottom - ce - se);
+			t.dir = n.getComputedStyle(e).direction, t.style.setProperty("--time-picker-inline-size", `${r.width}px`), t.style.setProperty("--time-picker-available-height", `${Math.max(0, Math.min(i, n.innerHeight - 16))}px`);
+		};
+		r();
+		let i = new ResizeObserver(r);
+		i.observe(e), n.addEventListener("resize", r);
+		let a = !1, o = () => {
+			let e = t.querySelector("[data-active]");
+			if (!e) return;
+			let n = e.offsetTop;
+			a ? v(e, t) : (t.scrollTop = n - (t.clientHeight - e.offsetHeight) / 2, a = !0);
+		}, s = new MutationObserver(o);
+		s.observe(t, {
+			attributes: !0,
+			subtree: !0,
+			attributeFilter: ["data-active"]
+		});
+		let c = n.requestAnimationFrame(() => {
+			if (!W.current && Z !== void 0 && !X.some((e) => e.value === F)) {
+				let e = X.find((e) => e.time >= Z) ?? X.at(-1);
+				(e && t.querySelector(`[data-time="${e.value}"]`))?.dispatchEvent(new n.MouseEvent("mousemove", { bubbles: !0 }));
+			}
+			o();
+		});
+		return () => {
+			i.disconnect(), s.disconnect(), n.removeEventListener("resize", r), n.cancelAnimationFrame(c);
+		};
+	}, [
+		B,
+		U,
+		Z,
+		X,
+		F,
+		M,
+		Q?.dir,
+		j?.root?.dir
+	]), /* @__PURE__ */ d(t, {
+		className: [we, j?.root?.className].filter(Boolean).join(" "),
+		styles: [de, j?.root?.css],
+		sx: Te,
+		children: (e) => /* @__PURE__ */ f("div", {
+			...j?.root,
+			css: void 0,
+			className: e,
+			dir: M ?? j?.root?.dir,
+			"data-ui": "time-picker",
+			children: [
+				i(T) && /* @__PURE__ */ f("label", {
+					...j?.label,
+					id: G,
+					htmlFor: $.id,
+					css: [fe, j?.label?.css],
+					children: [T, k && /* @__PURE__ */ f("span", {
+						"aria-hidden": !0,
+						css: y,
+						children: [" ", "*"]
+					})]
+				}),
+				/* @__PURE__ */ f(s, {
+					value: F,
+					onValueChange: I,
+					open: B,
+					onOpenChange: (e) => {
+						!z && (X.length > 0 || !e) && je(e);
+					},
+					name: Ce,
+					disabled: R,
+					children: [/* @__PURE__ */ f(s.Trigger, {
+						...Q,
+						...N,
+						ref: Ne,
+						id: $.id,
+						disabled: R,
+						dir: M ?? Q?.dir,
+						"aria-label": N["aria-label"] ?? Q?.["aria-label"],
+						"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"],
+						css: [
+							me,
+							he[xe],
+							Q?.css
+						],
+						onClick: void 0,
+						onKeyDown: void 0,
+						onClickCapture: (e) => {
+							Q?.onClickCapture?.(e), N.onClickCapture?.(e), Q?.onClick?.(e), De?.(e), B || (W.current = !1), (z || X.length === 0) && e.preventDefault(), e.defaultPrevented && e.stopPropagation();
+						},
+						onKeyDownCapture: (e) => {
+							Q?.onKeyDownCapture?.(e), N.onKeyDownCapture?.(e), Q?.onKeyDown?.(e), Oe?.(e), B || (W.current = e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.altKey && !e.metaKey), (z || X.length === 0) && e.key !== "Tab" && e.preventDefault(), e.defaultPrevented && e.stopPropagation();
+						},
+						onBlur: (e) => {
+							Q?.onBlur?.(e), ke?.(e);
+						},
+						children: [
+							i(A) && /* @__PURE__ */ d("span", {
+								...j?.icon,
+								"aria-hidden": !0,
+								css: [a, j?.icon?.css],
+								children: A
+							}),
+							/* @__PURE__ */ d("span", {
+								css: ge,
+								"data-placeholder": Z === void 0 || void 0,
+								children: Le
+							}),
+							/* @__PURE__ */ d("span", {
+								"aria-hidden": !0,
+								children: "▾"
+							})
+						]
+					}), /* @__PURE__ */ d(s.Content, {
+						...j?.content,
+						ref: Pe,
+						dir: M,
+						css: [_e, j?.content?.css],
+						children: X.map((e) => /* @__PURE__ */ re(s.Item, {
+							...j?.option,
+							key: e.value,
+							value: e.value,
+							"data-time": e.value,
+							css: [ve, j?.option?.css],
+							ref: (e) => {
+								let t = j?.option?.ref, n = typeof t == "function" ? t(e) : void 0;
+								if (t && typeof t != "function" && (t.current = e), !e) return n;
+								let r = e.scrollIntoView;
+								return e.scrollIntoView = () => {
+									let t = H.current;
+									t && v(e, t);
+								}, () => {
+									e.scrollIntoView = r, typeof n == "function" ? n() : typeof t == "function" ? t(null) : t && (t.current = null);
+								};
+							}
+						}, e.label))
+					})]
+				}),
+				i(E) && /* @__PURE__ */ d("span", {
+					...j?.description,
+					id: $.descriptionId,
+					css: [pe, j?.description?.css],
+					children: E
+				}),
+				i(D) && /* @__PURE__ */ d("span", {
+					...j?.error,
+					id: $.errorId,
+					role: "alert",
+					css: [y, j?.error?.css],
+					children: D
+				})
+			]
+		})
+	});
+}
+b.displayName = "TimePicker";
+//#endregion
+export { b as t };

package/dist/time-picker.js

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