@jfrader/ui 0.2.0 → 0.4.0

package/dist/calendar-C9Yad_-w.js

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

package/dist/calendar.js

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

package/dist/card-D-aI2QHx.js

@@ -0,0 +1,158 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { createContext as n, useContext as r } from "react";
+import { vars as i } from "@jfrader/tokens/vars";
+import { jsx as a } from "@emotion/react/jsx-runtime";
+//#region src/components/card/card.tsx
+var o = n(void 0);
+function s(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+var c = e({
+	boxSizing: "border-box",
+	minInlineSize: 0,
+	backgroundColor: i.color.surfaceRaised,
+	border: `1px solid ${i.color.border}`,
+	borderRadius: i.radius.lg,
+	paddingBlock: i.space[4],
+	paddingInline: i.space[5],
+	fontFamily: i.font.sans,
+	lineHeight: i.lineHeight.base,
+	color: i.color.text
+}), l = {
+	flat: e({ boxShadow: "none" }),
+	raised: e({ boxShadow: i.shadow.raised })
+}, u = e({
+	display: "grid",
+	gap: i.space[1],
+	marginBlockEnd: i.space[4]
+}), d = e({
+	margin: 0,
+	fontSize: i.textSize.md,
+	fontWeight: i.fontWeight.semibold,
+	lineHeight: i.lineHeight.tight,
+	color: i.color.text
+}), f = e({
+	margin: 0,
+	fontSize: i.textSize.sm,
+	color: i.color.textMuted
+}), p = e({
+	fontSize: i.textSize.sm,
+	color: i.color.text
+}), m = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: i.space[2],
+	marginBlockStart: i.space[4],
+	paddingBlockStart: i.space[4],
+	borderBlockStart: `1px solid ${i.color.borderSubtle}`,
+	"& > :only-child": { marginInlineStart: "auto" }
+});
+function h({ ref: e, variant: n = "raised", slotProps: r, className: i, sx: u, ...d }) {
+	return /* @__PURE__ */ a(o.Provider, {
+		value: r,
+		children: /* @__PURE__ */ a(t, {
+			className: s(r?.root?.className, i),
+			styles: [
+				c,
+				l[n],
+				r?.root?.css
+			],
+			sx: u,
+			children: (t) => /* @__PURE__ */ a("div", {
+				...d,
+				ref: e,
+				"data-ui": "card",
+				"data-variant": n,
+				className: t
+			})
+		})
+	});
+}
+h.displayName = "Card";
+function g({ ref: e, className: n, sx: i, ...c }) {
+	let l = r(o)?.header;
+	return /* @__PURE__ */ a(t, {
+		className: s(l?.className, n),
+		styles: [u, l?.css],
+		sx: i,
+		children: (t) => /* @__PURE__ */ a("div", {
+			...c,
+			ref: e,
+			"data-ui": "card-header",
+			className: t
+		})
+	});
+}
+g.displayName = "Card.Header";
+function _({ ref: e, level: n = 3, className: i, sx: c, ...l }) {
+	let u = r(o)?.title, f = `h${n}`;
+	return /* @__PURE__ */ a(t, {
+		className: s(u?.className, i),
+		styles: [d, u?.css],
+		sx: c,
+		children: (t) => /* @__PURE__ */ a(f, {
+			...l,
+			ref: e,
+			"data-ui": "card-title",
+			className: t
+		})
+	});
+}
+_.displayName = "Card.Title";
+function v({ ref: e, className: n, sx: i, ...c }) {
+	let l = r(o)?.description;
+	return /* @__PURE__ */ a(t, {
+		className: s(l?.className, n),
+		styles: [f, l?.css],
+		sx: i,
+		children: (t) => /* @__PURE__ */ a("p", {
+			...c,
+			ref: e,
+			"data-ui": "card-description",
+			className: t
+		})
+	});
+}
+v.displayName = "Card.Description";
+function y({ ref: e, className: n, sx: i, ...c }) {
+	let l = r(o)?.content;
+	return /* @__PURE__ */ a(t, {
+		className: s(l?.className, n),
+		styles: [p, l?.css],
+		sx: i,
+		children: (t) => /* @__PURE__ */ a("div", {
+			...c,
+			ref: e,
+			"data-ui": "card-content",
+			className: t
+		})
+	});
+}
+y.displayName = "Card.Content";
+function b({ ref: e, className: n, sx: i, ...c }) {
+	let l = r(o)?.footer;
+	return /* @__PURE__ */ a(t, {
+		className: s(l?.className, n),
+		styles: [m, l?.css],
+		sx: i,
+		children: (t) => /* @__PURE__ */ a("div", {
+			...c,
+			ref: e,
+			"data-ui": "card-footer",
+			className: t
+		})
+	});
+}
+b.displayName = "Card.Footer";
+var x = Object.assign(h, {
+	Header: g,
+	Title: _,
+	Description: v,
+	Content: y,
+	Footer: b
+});
+//#endregion
+export { x as t };

package/dist/card.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Card } from "./card-2IM71XZj.js";
+export { t as Card } from "./card-D-aI2QHx.js";

package/dist/checkbox-COYG6L7d.js

@@ -0,0 +1,140 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./media-D_eA_I-e.js";
+import { t as r } from "./renderable-DzcIj1Lo.js";
+import { i, n as a, r as o, t as s } from "./choice-control-5kJkLXgv.js";
+import { useEffect as c, useId as l, useImperativeHandle as u, useRef as d } from "react";
+import { vars as f } from "@jfrader/tokens/vars";
+import { jsx as p, jsxs as m } from "@emotion/react/jsx-runtime";
+//#region src/components/checkbox/checkbox.tsx
+var h = {
+	sm: "16px",
+	md: "20px"
+}, g = e({
+	"input:checked + span svg": { opacity: 1 },
+	"&[data-indeterminate] input + span": {
+		backgroundColor: f.color.accent,
+		borderColor: f.color.accent
+	},
+	"&[data-indeterminate] input + span svg": { opacity: 1 }
+}), _ = e({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	boxSizing: "border-box",
+	border: `1px solid ${f.color.borderControl}`,
+	borderRadius: f.radius.sm,
+	backgroundColor: f.color.surfaceRaised,
+	color: f.color.accentContrast,
+	transitionProperty: "background-color, border-color",
+	transitionDuration: f.motion.duration.fast,
+	transitionTimingFunction: f.motion.easeStandard,
+	"& svg": {
+		inlineSize: "75%",
+		blockSize: "75%",
+		opacity: 0
+	},
+	[n]: { transitionDuration: "0s" }
+}), v = {
+	sm: e({
+		inlineSize: h.sm,
+		blockSize: h.sm
+	}),
+	md: e({
+		inlineSize: h.md,
+		blockSize: h.md
+	})
+}, y = {
+	sm: e({ fontSize: f.textSize.sm }),
+	md: e({ fontSize: f.textSize.md })
+}, b = e({
+	fontSize: f.textSize.sm,
+	color: f.color.textMuted
+}), x = {
+	sm: e({ marginInlineStart: `calc(${h.sm} + ${f.space[2]})` }),
+	md: e({ marginInlineStart: `calc(${h.md} + ${f.space[2]})` })
+};
+function S({ indeterminate: e }) {
+	return /* @__PURE__ */ p("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: e ? /* @__PURE__ */ p("line", {
+			x1: "4",
+			y1: "8",
+			x2: "12",
+			y2: "8"
+		}) : /* @__PURE__ */ p("polyline", { points: "3.5 8.5 6.5 11.5 12.5 4.5" })
+	});
+}
+function C({ ref: e, label: n, description: f, indeterminate: h = !1, size: C = "md", onChange: w, onCheckedChange: T, slotProps: E, className: D, sx: O, "aria-labelledby": k, "aria-describedby": A, ...j }) {
+	let M = d(null);
+	u(e, () => M.current, []), c(() => {
+		M.current && (M.current.indeterminate = h);
+	}, [h]);
+	let N = l(), P = `${N}-label`, F = `${N}-description`, I = r(n), L = r(f), R = [k, I && P].filter(Boolean).join(" ") || void 0, z = [A, L && F].filter(Boolean).join(" ") || void 0, B = [D, E?.root?.className].filter(Boolean).join(" ") || void 0, V = (e) => {
+		h && (e.currentTarget.indeterminate = !0), w?.(e), T?.(e.currentTarget.checked);
+	};
+	return /* @__PURE__ */ p(t, {
+		className: B,
+		styles: [
+			o,
+			g,
+			a,
+			E?.root?.css
+		],
+		sx: O,
+		children: (e) => /* @__PURE__ */ m("label", {
+			"data-ui": "checkbox",
+			"data-indeterminate": h || void 0,
+			className: e,
+			children: [/* @__PURE__ */ m("span", {
+				css: i,
+				children: [
+					/* @__PURE__ */ p("input", {
+						...j,
+						ref: M,
+						type: "checkbox",
+						"aria-labelledby": R,
+						"aria-describedby": z,
+						"aria-checked": h ? "mixed" : void 0,
+						onChange: V,
+						css: s
+					}),
+					/* @__PURE__ */ p("span", {
+						"aria-hidden": "true",
+						className: E?.control?.className,
+						css: [
+							_,
+							v[C],
+							E?.control?.css
+						],
+						children: /* @__PURE__ */ p(S, { indeterminate: h })
+					}),
+					I && /* @__PURE__ */ p("span", {
+						id: P,
+						className: E?.label?.className,
+						css: [y[C], E?.label?.css],
+						children: n
+					})
+				]
+			}), L && /* @__PURE__ */ p("span", {
+				id: F,
+				className: E?.description?.className,
+				css: [
+					b,
+					x[C],
+					E?.description?.css
+				],
+				children: f
+			})]
+		})
+	});
+}
+C.displayName = "Checkbox";
+//#endregion
+export { C as t };

package/dist/checkbox.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Checkbox } from "./checkbox-B7xGNFzp.js";
+export { t as Checkbox } from "./checkbox-COYG6L7d.js";