@jfrader/ui 0.4.0 → 0.5.1

package/dist/{breadcrumbs-DVAOxfvL.js → breadcrumbs-BDK_LiwH.js}

@@ -1,7 +1,7 @@
 'use client';
 import { r as e, t } from "./sx-Dx9JUKp5.js";
 import { n } from "./focus-ring-BK5W5_NY.js";
-import { n as r } from "./media-D_eA_I-e.js";
+import { r } from "./media-8yrN85VT.js";
 import { createContext as i, useCallback as a, useContext as o, useId as s, useImperativeHandle as c, useLayoutEffect as l, useMemo as u, useRef as d, useState as f } from "react";
 import { vars as p } from "@jfrader/tokens/vars";
 import { jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
@@ -25,15 +25,22 @@ var v = ([, e], [, t]) => e.node.compareDocumentPosition(t.node) & Node.DOCUMENT
 	lineHeight: p.lineHeight.tight
 }), b = e({
 	display: "inline-flex",
+	minInlineSize: 0,
+	maxInlineSize: "100%",
 	alignItems: "center",
 	gap: p.space[2],
 	color: p.color.textMuted,
 	"&:first-of-type > [data-ui=\"breadcrumbs-separator\"]": { display: "none" }
-}), x = e({ display: "inline-flex" }), S = e({
+}), x = e({
+	display: "inline-flex",
+	flexShrink: 0
+}), S = e({
 	display: "inline-flex",
 	alignItems: "center",
 	gap: p.space[1],
-	minBlockSize: "24px",
+	minBlockSize: p.space[8],
+	minInlineSize: 0,
+	overflowWrap: "anywhere",
 	borderRadius: p.radius.sm,
 	color: "inherit",
 	"& svg": {
@@ -86,7 +93,7 @@ function w({ ref: e, label: n = "Breadcrumb", separator: r = "/", children: i, c
 			children: (t) => /* @__PURE__ */ m("nav", {
 				...c,
 				ref: e,
-				"aria-label": n,
+				"aria-label": c["aria-label"] ?? n,
 				"data-ui": "breadcrumbs",
 				className: t,
 				children: /* @__PURE__ */ m("ol", {

package/dist/breadcrumbs.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Breadcrumbs } from "./breadcrumbs-DVAOxfvL.js";
+export { t as Breadcrumbs } from "./breadcrumbs-BDK_LiwH.js";

package/dist/{button-P2e7_44z.js → button-NLY0h6EJ.js}

@@ -1,7 +1,7 @@
 'use client';
 import { r as e, t } from "./sx-Dx9JUKp5.js";
 import { n } from "./focus-ring-BK5W5_NY.js";
-import { n as r } from "./media-D_eA_I-e.js";
+import { r } from "./media-8yrN85VT.js";
 import { t as i } from "./icon-wrapper-stN8sD7R.js";
 import { n as a, t as o } from "./loading-ring-B8-30Dl1.js";
 import "react";
@@ -33,17 +33,17 @@ var f = "&:hover:not(:disabled):not([aria-disabled=\"true\"])", p = e({
 	[r]: { transitionDuration: "0s" }
 }), m = {
 	sm: e({
-		blockSize: "32px",
+		blockSize: s.space[8],
 		paddingInline: s.space[3],
 		fontSize: s.textSize.sm
 	}),
 	md: e({
-		blockSize: "40px",
+		blockSize: s.space[10],
 		paddingInline: s.space[4],
 		fontSize: s.textSize.sm
 	}),
 	lg: e({
-		blockSize: "48px",
+		blockSize: s.space[12],
 		paddingInline: s.space[5],
 		fontSize: s.textSize.md
 	})
@@ -62,7 +62,7 @@ var f = "&:hover:not(:disabled):not([aria-disabled=\"true\"])", p = e({
 		neutral: e({
 			backgroundColor: s.color.surfaceRaised,
 			color: s.color.text,
-			borderColor: s.color.border,
+			borderColor: s.color.borderControl,
 			[f]: { backgroundColor: s.color.surfaceHover }
 		})
 	},
@@ -86,19 +86,19 @@ var f = "&:hover:not(:disabled):not([aria-disabled=\"true\"])", p = e({
 	outline: {
 		accent: e({
 			backgroundColor: "transparent",
-			borderColor: s.color.accentBorder,
+			borderColor: s.color.borderControl,
 			color: s.color.accentText,
 			[f]: { backgroundColor: s.color.accentSoft }
 		}),
 		danger: e({
 			backgroundColor: "transparent",
-			borderColor: s.color.dangerBorder,
+			borderColor: s.color.borderControl,
 			color: s.color.dangerText,
 			[f]: { backgroundColor: s.color.dangerSoft }
 		}),
 		neutral: e({
 			backgroundColor: "transparent",
-			borderColor: s.color.borderStrong,
+			borderColor: s.color.borderControl,
 			color: s.color.text,
 			[f]: { backgroundColor: s.color.surfaceHover }
 		})

package/dist/button.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Button } from "./button-P2e7_44z.js";
+export { t as Button } from "./button-NLY0h6EJ.js";

package/dist/calendar-BzJdv_SZ.js

@@ -0,0 +1,449 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as a } from "./use-latest-callback-cj1OOQL6.js";
+import { t as o } from "./use-controlled-state-DpeVQZNR.js";
+import { createContext as s, useContext as c, useEffect as l, useId as u, useImperativeHandle as d, useLayoutEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { vars as g } from "@jfrader/tokens/vars";
+import { Fragment as _, jsx as v, jsxs as y } from "@emotion/react/jsx-runtime";
+//#region src/components/calendar/calendar.styles.ts
+var b = e({
+	display: "inline-flex",
+	flexDirection: "column",
+	gap: g.space[2],
+	fontFamily: g.font.sans,
+	color: g.color.text
+}), x = e({
+	display: "flex",
+	alignItems: "center",
+	gap: g.space[2]
+}), S = e({
+	flex: 1,
+	textAlign: "center",
+	fontSize: g.textSize.sm,
+	fontWeight: g.fontWeight.semibold
+}), C = {
+	transitionDuration: g.motion.duration.fast,
+	transitionTimingFunction: g.motion.easeStandard,
+	[i]: { transitionDuration: "0s" }
+}, w = e({
+	appearance: "none",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	inlineSize: "32px",
+	blockSize: "32px",
+	padding: 0,
+	border: `1px solid ${g.color.borderControl}`,
+	borderRadius: g.radius.sm,
+	backgroundColor: "transparent",
+	font: "inherit",
+	fontSize: g.textSize.lg,
+	lineHeight: 1,
+	color: g.color.text,
+	cursor: "pointer",
+	transitionProperty: "background-color",
+	...C,
+	"&:hover:not([aria-disabled=\"true\"])": { backgroundColor: g.color.surfaceHover },
+	"&[aria-disabled=\"true\"]": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	"&:focus-visible": { ...n }
+}), T = e({
+	display: "inline-block",
+	"&:dir(rtl)": { transform: "scaleX(-1)" }
+}), ee = e({
+	borderCollapse: "separate",
+	borderSpacing: g.space[1],
+	marginInline: `calc(-1 * ${g.space[1]})`
+}), E = e({
+	paddingBlock: g.space[1],
+	fontSize: g.textSize.xs,
+	fontWeight: g.fontWeight.medium,
+	color: g.color.textMuted,
+	textAlign: "center"
+}), te = e({ padding: 0 }), ne = e({
+	appearance: "none",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	inlineSize: "36px",
+	blockSize: "36px",
+	padding: 0,
+	border: "1px solid transparent",
+	borderRadius: g.radius.sm,
+	backgroundColor: "transparent",
+	font: "inherit",
+	fontSize: g.textSize.sm,
+	fontVariantNumeric: "tabular-nums",
+	color: g.color.text,
+	cursor: "pointer",
+	transitionProperty: "background-color, border-color, color",
+	...C,
+	"&:hover:not(:disabled):not([data-selected]):not([data-in-range])": { backgroundColor: g.color.surfaceHover },
+	"&[data-today]": {
+		borderColor: g.color.borderControl,
+		fontWeight: g.fontWeight.semibold,
+		textDecoration: "underline"
+	},
+	"&[data-selected]": {
+		backgroundColor: g.color.accent,
+		borderColor: g.color.accent,
+		color: g.color.accentContrast,
+		fontWeight: g.fontWeight.semibold
+	},
+	"&[data-selected]:hover": { backgroundColor: g.color.accentHover },
+	"&[data-in-range]": {
+		backgroundColor: g.color.accentSoft,
+		borderColor: g.color.accentBorder
+	},
+	"&[data-preview]:not([data-in-range])": {
+		borderStyle: "dashed",
+		borderColor: g.color.accentText
+	},
+	"&[data-range-start], &[data-range-end]": {
+		backgroundColor: g.color.accent,
+		borderColor: g.color.accent,
+		color: g.color.accentContrast,
+		fontWeight: g.fontWeight.semibold
+	},
+	"&[data-range-start]:hover, &[data-range-end]:hover": { backgroundColor: g.color.accentHover },
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed",
+		textDecoration: "line-through"
+	},
+	"&[data-today]:disabled": { textDecoration: "underline line-through" },
+	"&:focus-visible": { ...n },
+	[r]: {
+		"&[data-in-range], &[data-preview]": { borderColor: "CanvasText" },
+		"&[data-selected], &[data-range-start], &[data-range-end]": {
+			forcedColorAdjust: "none",
+			backgroundColor: "Highlight",
+			borderColor: "Highlight",
+			color: "HighlightText"
+		}
+	}
+}), D = /^\d{4}-\d{2}-\d{2}$/, O = /^\d{4}-\d{2}$/, k = 12, A = 0, re = "2026-01-04", j = (e, t) => String(e).padStart(t, "0");
+function M(e, t, n) {
+	let r = new Date(Date.UTC(0, 0, 1));
+	return r.setUTCFullYear(e, t, n), r;
+}
+function N(e) {
+	let [t = NaN, n = NaN, r = 1] = e.split("-").map(Number);
+	return M(t, n - 1, r);
+}
+var P = (e) => `${j(e.getUTCFullYear(), 4)}-${j(e.getUTCMonth() + 1, 2)}-${j(e.getUTCDate(), 2)}`, F = (e) => e !== void 0 && D.test(e) && P(N(e)) === e, ie = (e) => e !== void 0 && O.test(e) && F(`${e}-01`), I = (e) => e.slice(0, 7), L = (e) => `${e}-01`;
+function R(e, t) {
+	let n = N(e);
+	return P(M(n.getUTCFullYear(), n.getUTCMonth(), n.getUTCDate() + t));
+}
+function z(e, t) {
+	let n = N(e), r = M(n.getUTCFullYear(), n.getUTCMonth() + t, 1), i = M(r.getUTCFullYear(), r.getUTCMonth() + 1, 0).getUTCDate();
+	return P(M(r.getUTCFullYear(), r.getUTCMonth(), Math.min(n.getUTCDate(), i)));
+}
+var B = (e, t) => I(z(L(e), t)), V = (e) => R(L(B(e, 1)), -1), H = (e, t, n) => (t === void 0 || e >= t) && (n === void 0 || e <= n);
+function U(e, t, n) {
+	return t !== void 0 && e < t ? t : n !== void 0 && e > n ? n : e;
+}
+var W = (e, t) => (N(e).getUTCDay() - t + 7) % 7;
+function ae(e) {
+	let t = new Intl.Locale(e), n = t.getWeekInfo?.() ?? t.weekInfo;
+	return n ? n.firstDay % 7 : A;
+}
+var G = {
+	calendar: "gregory",
+	timeZone: "UTC"
+};
+function oe(e) {
+	return {
+		month: new Intl.DateTimeFormat(e, {
+			...G,
+			month: "long",
+			year: "numeric"
+		}),
+		day: new Intl.DateTimeFormat(e, {
+			...G,
+			day: "numeric"
+		}),
+		date: new Intl.DateTimeFormat(e, {
+			...G,
+			dateStyle: "long"
+		}),
+		weekdayShort: new Intl.DateTimeFormat(e, {
+			...G,
+			weekday: "short"
+		}),
+		weekdayLong: new Intl.DateTimeFormat(e, {
+			...G,
+			weekday: "long"
+		})
+	};
+}
+var K = () => typeof navigator > "u" ? void 0 : navigator.language, q = (e) => (t) => R(t, e), J = (e) => (t, { shiftKey: n }) => z(t, n ? e * k : e), Y = {
+	ArrowDown: q(7),
+	ArrowUp: q(-7),
+	Home: (e, { firstDayOfWeek: t }) => R(e, -W(e, t)),
+	End: (e, { firstDayOfWeek: t }) => R(e, 6 - W(e, t)),
+	PageUp: J(-1),
+	PageDown: J(1)
+}, X = {
+	ltr: {
+		...Y,
+		ArrowRight: q(1),
+		ArrowLeft: q(-1)
+	},
+	rtl: {
+		...Y,
+		ArrowRight: q(-1),
+		ArrowLeft: q(1)
+	}
+}, se = s(null);
+function Z(e) {
+	let t = c(se);
+	if (!t) throw Error(`Calendar.${e} must be rendered inside <Calendar>.`);
+	return t;
+}
+var Q = (e, t) => t != null && e >= t.start && e <= t.end, ce = "‹", le = "›";
+function ue({ ref: e, value: n, defaultValue: r, onValueChange: i, visibleMonth: s, defaultVisibleMonth: c, onVisibleMonthChange: l, min: d, max: f, locale: m, firstDayOfWeek: g, today: x, selectionRange: S, previewRange: C, tabStopDate: w, onDayActivate: T, onFocusedDateChange: ee, rangeLabels: E, className: te, sx: ne, children: D, ...O }) {
+	let k = u(), A = `${k}-label`, re = E !== void 0, j = p(() => re ? {
+		start: `${k}-range-start`,
+		end: `${k}-range-end`
+	} : void 0, [k, re]), N = a(T), L = a(ee), R = /* @__PURE__ */ new Date(), z = F(x) ? x : P(M(R.getFullYear(), R.getMonth(), R.getDate())), B = p(() => new Intl.DateTimeFormat(m ?? K(), G).resolvedOptions().locale, [m]), V = p(() => oe(B), [B]), H = p(() => ae(B), [B]), U = g ?? H, [W, q] = o(n, r, i), J = n ?? r, [Y, X] = o(s, c ?? I(F(J) ? J : z), l), Z = ie(Y) ? Y : I(z), Q = F(d) ? d : void 0, ce = F(f) ? f : void 0, [le, ue] = h(null), [$, de] = h(!1), fe = p(() => ({
+		value: W,
+		selectionRange: S,
+		previewRange: C,
+		tabStopDate: w,
+		onDayActivate: N,
+		onFocusedDateChange: L,
+		rangeLabelIds: j,
+		visibleMonth: Z,
+		today: z,
+		min: Q,
+		max: ce,
+		firstDayOfWeek: U,
+		formatters: V,
+		focus: le,
+		setFocus: ue,
+		requestValue: q,
+		requestVisibleMonth: X,
+		labelId: A,
+		hasHeader: $,
+		setHasHeader: de
+	}), [
+		W,
+		S,
+		C,
+		w,
+		N,
+		L,
+		j,
+		Z,
+		z,
+		Q,
+		ce,
+		U,
+		V,
+		le,
+		q,
+		X,
+		A,
+		$
+	]);
+	return /* @__PURE__ */ v(se.Provider, {
+		value: fe,
+		children: /* @__PURE__ */ v(t, {
+			className: te,
+			styles: b,
+			sx: ne,
+			children: (t) => /* @__PURE__ */ y("div", {
+				...O,
+				ref: e,
+				"data-ui": "calendar",
+				className: t,
+				children: [D, E && j && /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("span", {
+					id: j.start,
+					hidden: !0,
+					children: E.start
+				}), /* @__PURE__ */ v("span", {
+					id: j.end,
+					hidden: !0,
+					children: E.end
+				})] })]
+			})
+		})
+	});
+}
+ue.displayName = "Calendar";
+function $({ ref: e, className: n, sx: r, ...i }) {
+	let { visibleMonth: a, min: o, max: s, formatters: c, requestVisibleMonth: l, labelId: u, setHasHeader: d } = Z("Header");
+	f(() => (d(!0), () => d(!1)), [d]);
+	let p = B(a, -1), m = B(a, 1), h = o !== void 0 && V(p) < o, g = s !== void 0 && L(m) > s, _ = (e) => c.month.format(N(L(e)));
+	return /* @__PURE__ */ v(t, {
+		className: n,
+		styles: x,
+		sx: r,
+		children: (t) => /* @__PURE__ */ y("div", {
+			...i,
+			ref: e,
+			"data-ui": "calendar-header",
+			className: t,
+			children: [
+				/* @__PURE__ */ v("button", {
+					type: "button",
+					"data-ui": "calendar-previous",
+					"aria-label": _(p),
+					"aria-disabled": h || void 0,
+					onClick: () => {
+						h || l(p);
+					},
+					css: w,
+					children: /* @__PURE__ */ v("span", {
+						"aria-hidden": "true",
+						css: T,
+						children: ce
+					})
+				}),
+				/* @__PURE__ */ v("span", {
+					id: u,
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					"data-ui": "calendar-label",
+					css: S,
+					children: _(a)
+				}),
+				/* @__PURE__ */ v("button", {
+					type: "button",
+					"data-ui": "calendar-next",
+					"aria-label": _(m),
+					"aria-disabled": g || void 0,
+					onClick: () => {
+						g || l(m);
+					},
+					css: w,
+					children: /* @__PURE__ */ v("span", {
+						"aria-hidden": "true",
+						css: T,
+						children: le
+					})
+				})
+			]
+		})
+	});
+}
+$.displayName = "Calendar.Header";
+function de({ date: e, isTabStop: t }) {
+	let { value: n, selectionRange: r, previewRange: i, rangeLabelIds: a, today: o, min: s, max: c, formatters: l, setFocus: u, requestValue: d, onDayActivate: f, onFocusedDateChange: p } = Z("Grid"), m = r !== void 0, h = H(e, s, c), g = m ? Q(e, r) : n === e, _ = r?.start === e, y = r?.end === e, b = o === e, x = N(e), S = [_ ? a?.start : void 0, y ? a?.end : void 0].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ v("td", {
+		role: "gridcell",
+		"aria-selected": g ? !0 : m && h ? !1 : void 0,
+		css: te,
+		children: /* @__PURE__ */ v("button", {
+			type: "button",
+			"data-ui": "calendar-day",
+			"data-date": e,
+			"data-today": b || void 0,
+			"data-selected": !m && g || void 0,
+			"data-in-range": m && g || void 0,
+			"data-range-start": _ || void 0,
+			"data-range-end": y || void 0,
+			"data-preview": Q(e, i) || void 0,
+			"data-preview-start": i?.start === e || void 0,
+			"data-preview-end": i?.end === e || void 0,
+			"aria-current": b ? "date" : void 0,
+			"aria-label": l.date.format(x),
+			"aria-describedby": S,
+			tabIndex: t ? 0 : -1,
+			disabled: !h,
+			onFocus: () => {
+				u({
+					date: e,
+					fallback: e
+				}), p(e);
+			},
+			onClick: () => {
+				u({
+					date: e,
+					fallback: e
+				}), m || d(e), f(e);
+			},
+			css: ne,
+			children: l.day.format(x)
+		})
+	});
+}
+function fe({ ref: e, onKeyDown: n, "aria-labelledby": r, "aria-label": i, className: a, sx: o, ...s }) {
+	let { value: c, selectionRange: u, tabStopDate: f, visibleMonth: p, today: h, min: g, max: _, firstDayOfWeek: b, formatters: x, focus: S, setFocus: C, requestVisibleMonth: w, onFocusedDateChange: T, labelId: ne, hasHeader: D } = Z("Grid"), O = m(null);
+	d(e, () => O.current, []);
+	let k = m(!1), A = L(p), j = N(V(p)).getUTCDate(), M = Array.from({ length: j }, (e, t) => R(A, t)), P = (e) => e != null && M.includes(e) && H(e, g, _), F = f !== void 0, ie = F ? P(f) ? f : void 0 : [
+		S?.date,
+		S?.fallback,
+		u === void 0 ? c : u?.start,
+		h
+	].find(P) ?? M.find((e) => H(e, g, _)), z = [...Array(W(A, b)).fill(null), ...M], B = Array.from({ length: Math.ceil(z.length / 7) }, (e, t) => Array.from({ length: 7 }, (e, n) => z[t * 7 + n] ?? null)), ae = Array.from({ length: 7 }, (e, t) => N(R(re, (b + t) % 7)));
+	l(() => {
+		k.current && (k.current = !1, O.current?.querySelector(`[data-date="${ie}"]`)?.focus());
+	});
+	let G = (e) => {
+		n?.(e);
+		let t = O.current;
+		if (e.defaultPrevented || !t) return;
+		let r = e.target.dataset.date;
+		if (!P(r)) return;
+		let i = X[getComputedStyle(t).direction === "rtl" ? "rtl" : "ltr"][e.key];
+		if (!i) return;
+		e.preventDefault();
+		let a = U(i(r, {
+			firstDayOfWeek: b,
+			shiftKey: e.shiftKey
+		}), g, _);
+		F ? T(a) : a !== r && (C({
+			date: a,
+			fallback: r
+		}), k.current = !0, I(a) !== p && w(I(a)));
+	}, oe = [r, D ? ne : void 0].filter(Boolean).join(" ") || void 0, K = x.month.format(N(A));
+	return /* @__PURE__ */ v(t, {
+		className: a,
+		styles: ee,
+		sx: o,
+		children: (e) => /* @__PURE__ */ y("table", {
+			...s,
+			ref: O,
+			role: "grid",
+			"aria-multiselectable": u !== void 0 || void 0,
+			"aria-labelledby": oe,
+			"aria-label": oe === void 0 ? i ?? K : i,
+			"data-ui": "calendar-grid",
+			onKeyDown: G,
+			className: e,
+			children: [/* @__PURE__ */ v("thead", { children: /* @__PURE__ */ v("tr", {
+				role: "row",
+				children: ae.map((e) => /* @__PURE__ */ v("th", {
+					role: "columnheader",
+					scope: "col",
+					abbr: x.weekdayLong.format(e),
+					css: E,
+					children: x.weekdayShort.format(e)
+				}, e.getUTCDay()))
+			}) }), /* @__PURE__ */ v("tbody", { children: B.map((e, t) => /* @__PURE__ */ v("tr", {
+				role: "row",
+				children: e.map((e, t) => e === null ? /* @__PURE__ */ v("td", {
+					role: "gridcell",
+					css: te
+				}, `empty-${t}`) : /* @__PURE__ */ v(de, {
+					date: e,
+					isTabStop: e === ie
+				}, e))
+			}, t)) })]
+		})
+	});
+}
+fe.displayName = "Calendar.Grid";
+var pe = Object.assign(ue, {
+	Header: $,
+	Grid: fe
+});
+//#endregion
+export { M as a, F as c, I as d, B as f, N as i, H as l, G as n, K as o, U as r, L as s, pe as t, P as u };

package/dist/calendar.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Calendar } from "./calendar-C9Yad_-w.js";
+export { t as Calendar } from "./calendar-BzJdv_SZ.js";