@jfrader/ui 0.1.1 → 0.2.0

package/dist/breadcrumbs.js

@@ -1 +1,2 @@
-export { t as Breadcrumbs } from "./breadcrumbs-5MCZ_Jr3.js";
+'use client';
+export { t as Breadcrumbs } from "./breadcrumbs-694hF_hm.js";

package/dist/button-CoaIcykB.js

@@ -0,0 +1,190 @@
+'use client';
+import { t as e } from "./css-Cgj6sCHn.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { n } from "./media-D_eA_I-e.js";
+import { t as r } from "./icon-wrapper-CFWzew5m.js";
+import { n as i, t as a } from "./loading-ring-BpdB0aFi.js";
+import "react";
+import { vars as o } from "@jfrader/tokens/vars";
+import { Fragment as s, jsx as c, jsxs as l } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as u } from "@floating-ui/react";
+//#region src/components/button/button.tsx
+var d = "&:hover:not(:disabled):not([aria-disabled=\"true\"])", f = e({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: o.space[2],
+	border: "1px solid transparent",
+	borderRadius: o.radius.md,
+	fontFamily: o.font.sans,
+	fontWeight: o.fontWeight.medium,
+	lineHeight: o.lineHeight.tight,
+	letterSpacing: "-0.011em",
+	whiteSpace: "nowrap",
+	cursor: "pointer",
+	transitionProperty: "background-color, border-color, color",
+	transitionDuration: o.motion.duration.fast,
+	transitionTimingFunction: o.motion.easeStandard,
+	"&:focus-visible": { ...t },
+	"&:disabled, &[aria-disabled=\"true\"]": {
+		cursor: "not-allowed",
+		opacity: .55
+	},
+	[n]: { transitionDuration: "0s" }
+}), p = {
+	sm: e({
+		blockSize: "32px",
+		paddingInline: o.space[3],
+		fontSize: o.textSize.sm
+	}),
+	md: e({
+		blockSize: "40px",
+		paddingInline: o.space[4],
+		fontSize: o.textSize.sm
+	}),
+	lg: e({
+		blockSize: "48px",
+		paddingInline: o.space[5],
+		fontSize: o.textSize.md
+	})
+}, m = {
+	solid: {
+		accent: e({
+			backgroundColor: o.color.accent,
+			color: o.color.accentContrast,
+			[d]: { backgroundColor: o.color.accentHover }
+		}),
+		danger: e({
+			backgroundColor: o.color.danger,
+			color: o.color.dangerContrast,
+			[d]: { backgroundColor: o.color.dangerHover }
+		}),
+		neutral: e({
+			backgroundColor: o.color.surfaceRaised,
+			color: o.color.text,
+			borderColor: o.color.border,
+			[d]: { backgroundColor: o.color.surfaceHover }
+		})
+	},
+	soft: {
+		accent: e({
+			backgroundColor: o.color.accentSoft,
+			color: o.color.accentText,
+			[d]: { backgroundColor: o.color.accentSoftHover }
+		}),
+		danger: e({
+			backgroundColor: o.color.dangerSoft,
+			color: o.color.dangerText,
+			[d]: { backgroundColor: o.color.dangerSoftHover }
+		}),
+		neutral: e({
+			backgroundColor: o.color.surfaceHover,
+			color: o.color.text,
+			[d]: { backgroundColor: o.color.surfaceRaised }
+		})
+	},
+	outline: {
+		accent: e({
+			backgroundColor: "transparent",
+			borderColor: o.color.accentBorder,
+			color: o.color.accentText,
+			[d]: { backgroundColor: o.color.accentSoft }
+		}),
+		danger: e({
+			backgroundColor: "transparent",
+			borderColor: o.color.dangerBorder,
+			color: o.color.dangerText,
+			[d]: { backgroundColor: o.color.dangerSoft }
+		}),
+		neutral: e({
+			backgroundColor: "transparent",
+			borderColor: o.color.borderStrong,
+			color: o.color.text,
+			[d]: { backgroundColor: o.color.surfaceHover }
+		})
+	},
+	ghost: {
+		accent: e({
+			backgroundColor: "transparent",
+			color: o.color.accentText,
+			[d]: { backgroundColor: o.color.accentSoft }
+		}),
+		danger: e({
+			backgroundColor: "transparent",
+			color: o.color.dangerText,
+			[d]: { backgroundColor: o.color.dangerSoft }
+		}),
+		neutral: e({
+			backgroundColor: "transparent",
+			color: o.color.textMuted,
+			[d]: {
+				backgroundColor: o.color.surfaceHover,
+				color: o.color.text
+			}
+		})
+	}
+}, h = e({
+	boxSizing: "border-box",
+	textDecoration: "none"
+}), g = e({
+	...a,
+	inlineSize: "1em",
+	blockSize: "1em",
+	[n]: { animation: `${i} 1.2s ease-in-out infinite alternate` }
+});
+function _({ ref: e, variant: t = "solid", tone: n = "neutral", size: i = "md", loading: a = !1, startIcon: o, endIcon: d, type: _, children: v, onClick: y, css: b, render: x, ...S }) {
+	let { "data-ui": C, ...w } = S, T = x && C !== void 0 ? `${C} button` : "button", E = u([e]), D = w["aria-disabled"], O = a || D === !0 || D === "true" || x !== void 0 && w.disabled === !0, k = y, A = (e) => {
+		O ? e.preventDefault() : k?.(e);
+	}, j = a ? /* @__PURE__ */ c("span", { css: g }) : o, M = /* @__PURE__ */ l(s, { children: [
+		j != null && /* @__PURE__ */ c("span", {
+			css: r,
+			"aria-hidden": !0,
+			children: j
+		}),
+		v,
+		d != null && /* @__PURE__ */ c("span", {
+			css: r,
+			"aria-hidden": !0,
+			children: d
+		})
+	] });
+	if (x) {
+		let { disabled: e, ...r } = w;
+		return x({
+			...r,
+			ref: E,
+			type: _,
+			"data-ui": T,
+			"aria-busy": a ? !0 : w["aria-busy"],
+			"aria-disabled": O ? !0 : D,
+			onClick: A,
+			css: [
+				f,
+				h,
+				p[i],
+				m[t][n],
+				b
+			],
+			children: M
+		});
+	}
+	return /* @__PURE__ */ c("button", {
+		...w,
+		ref: e,
+		type: _ ?? "button",
+		"data-ui": T,
+		"aria-busy": a ? !0 : w["aria-busy"],
+		"aria-disabled": O ? !0 : D,
+		onClick: A,
+		css: [
+			f,
+			p[i],
+			m[t][n],
+			b
+		],
+		children: M
+	});
+}
+_.displayName = "Button";
+//#endregion
+export { _ as t };

package/dist/button.js

@@ -1 +1,2 @@
-export { t as Button } from "./button-qy-50NPd.js";
+'use client';
+export { t as Button } from "./button-CoaIcykB.js";

package/dist/calendar-Doj7PTdG.js

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

package/dist/calendar.js

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