@jfrader/ui 0.4.0 → 0.5.1

package/dist/expandable-card-rUATve0o.js

@@ -0,0 +1,347 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.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 "./use-controlled-state-DpeVQZNR.js";
+import { t as s } from "./renderable-DzcIj1Lo.js";
+import { n as c } from "./surface-DZ4d-2aL.js";
+import { createContext as l, useContext as u, useEffect as d, useId as f, useLayoutEffect as p, useMemo as m, useRef as h, useState as g } from "react";
+import { vars as _ } from "@jfrader/tokens/vars";
+import { jsx as v, jsxs as y } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as b } from "@floating-ui/react";
+import { MotionConfig as x, animate as S, useMotionValue as C, useReducedMotion as w } from "motion/react";
+import { base as T } from "@jfrader/tokens";
+//#region src/components/expandable-card/expandable-card.tsx
+var E = l(null);
+function D(e) {
+	let t = u(E);
+	if (!t) throw Error(`ExpandableCard.${e} must be rendered inside <ExpandableCard>.`);
+	return t;
+}
+var O = {
+	type: "spring",
+	stiffness: 400,
+	damping: 40,
+	mass: 1
+}, k = {
+	duration: Number.parseFloat(T.motion.duration.fast) / 1e3,
+	ease: [
+		.2,
+		.6,
+		.2,
+		1
+	]
+}, A = e({
+	...c,
+	borderColor: _.color.borderControl,
+	borderRadius: _.radius.lg,
+	boxShadow: _.shadow.raised,
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	marginInline: "auto",
+	overflow: "clip"
+}), j = e({
+	inlineSize: "100%",
+	minInlineSize: 0
+}), M = e({
+	margin: 0,
+	font: "inherit"
+}), N = e({
+	appearance: "none",
+	display: "grid",
+	gridTemplateColumns: "minmax(0, 1fr) auto",
+	alignItems: "center",
+	gap: _.space[2],
+	inlineSize: "100%",
+	boxSizing: "border-box",
+	minBlockSize: `calc(${_.space[12]} + ${_.space[4]})`,
+	padding: _.space[4],
+	border: 0,
+	background: "transparent",
+	color: "inherit",
+	font: "inherit",
+	textAlign: "start",
+	cursor: "pointer",
+	"& > span": {
+		gridColumn: 1,
+		overflowWrap: "anywhere"
+	},
+	"&::after": {
+		...n,
+		gridColumn: 2,
+		gridRow: "1 / span 2"
+	},
+	"&[aria-expanded=\"true\"]::after": { transform: "rotate(90deg)" },
+	"&[aria-expanded=\"true\"]:dir(rtl)::after": { transform: "rotate(-90deg)" },
+	"&:focus-visible": r,
+	"&:hover:not(:disabled)": { backgroundColor: _.color.surfaceHover },
+	"&:disabled": {
+		cursor: "not-allowed",
+		opacity: .55
+	},
+	"[data-size=\"sm\"] &": {
+		minBlockSize: _.space[12],
+		padding: _.space[3]
+	},
+	[a]: { "&::after": { transitionDuration: "0s" } },
+	[i]: {
+		"&:focus-visible": { outlineColor: "Highlight" },
+		"&::after": {
+			forcedColorAdjust: "none",
+			borderInlineStartColor: "ButtonText"
+		},
+		"&:disabled::after": { borderInlineStartColor: "GrayText" }
+	}
+}), P = e({
+	fontSize: _.textSize.md,
+	fontWeight: _.fontWeight.medium
+}), F = e({
+	fontSize: _.textSize.sm,
+	color: _.color.textMuted
+}), I = e({
+	overflow: "clip",
+	minInlineSize: 0,
+	"&[hidden]": { display: "none" }
+}), L = e({
+	boxSizing: "border-box",
+	maxInlineSize: "none",
+	padding: _.space[4],
+	borderBlockStart: `1px solid ${_.color.border}`,
+	fontSize: _.textSize.sm,
+	overflowWrap: "anywhere",
+	"& :where(input, select, textarea, img, video, canvas, svg, iframe)": {
+		maxInlineSize: "100%",
+		boxSizing: "border-box"
+	},
+	"[data-size=\"sm\"] &": { padding: _.space[3] }
+});
+function R(e) {
+	return e !== void 0 && Number.isFinite(e) && e > 0 ? e : void 0;
+}
+function z(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+function B({ ref: e, open: n, defaultOpen: r = !1, onOpenChange: i, collapsedInlineSize: a, expandedInlineSize: s, size: c = "md", disabled: l = !1, headingLevel: u = 3, className: d, sx: _, onKeyDown: y, children: T, ...D }) {
+	let [k, M] = o(n, r, i), N = !!k, P = f(), F = h(null), I = h(null), L = h(null), z = b([I, e]), [B, V] = g(!1), [H, U] = g(!1), [W, G] = g(), [K, ee] = g(0), q = w(), J = C(0), Y = h(!1), X = R(a), Z = R(s) ?? X, Q = W === void 0 ? void 0 : Math.min(W, (N ? Z : X) ?? W), $ = W === void 0 ? void 0 : Math.max(0, Math.min(W, Z ?? W) - K);
+	p(() => {
+		let e = L.current;
+		if (!e) return;
+		let t = () => {
+			G(e.getBoundingClientRect().width);
+			let t = I.current;
+			if (!t) return;
+			let n = getComputedStyle(t);
+			ee(Number.parseFloat(n.borderInlineStartWidth) + Number.parseFloat(n.borderInlineEndWidth) + Number.parseFloat(n.paddingInlineStart) + Number.parseFloat(n.paddingInlineEnd));
+		};
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, []), p(() => {
+		let e = I.current;
+		if (!e || Q === void 0) return;
+		let t = (t) => {
+			e.style.inlineSize = `${t}px`;
+		}, n = J.on("change", t);
+		return !Y.current || q ? (J.jump(Q), t(Q), Y.current = !0) : S(J, Q, O), () => {
+			n(), J.stop();
+		};
+	}, [
+		Q,
+		q,
+		J
+	]);
+	let te = m(() => ({
+		open: N,
+		request: M,
+		disabled: l,
+		headingLevel: u,
+		triggerId: `${P}-trigger`,
+		panelId: `${P}-panel`,
+		titleId: `${P}-title`,
+		descriptionId: `${P}-description`,
+		hasTitle: B,
+		hasDescription: H,
+		setHasTitle: V,
+		setHasDescription: U,
+		triggerRef: F,
+		expandedWidth: $
+	}), [
+		N,
+		M,
+		l,
+		u,
+		P,
+		B,
+		H,
+		$
+	]);
+	return /* @__PURE__ */ v(x, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ v(E.Provider, {
+			value: te,
+			children: /* @__PURE__ */ v("div", {
+				ref: L,
+				css: j,
+				children: /* @__PURE__ */ v(t, {
+					className: d,
+					styles: A,
+					sx: _,
+					children: (e) => /* @__PURE__ */ v("article", {
+						...D,
+						ref: z,
+						"data-ui": "expandable-card",
+						"data-size": c,
+						"data-state": N ? "open" : "closed",
+						className: e,
+						onKeyDown: (e) => {
+							if (y?.(e), e.defaultPrevented || e.key !== "Escape" || !N) return;
+							let t = e.target, n = t.closest("dialog, [role=\"dialog\"], [role=\"menu\"], [role=\"listbox\"]");
+							t.closest("[data-ui=\"expandable-card\"]") !== e.currentTarget || n && e.currentTarget.contains(n) || (e.preventDefault(), M(!1));
+						},
+						children: T
+					})
+				})
+			})
+		})
+	});
+}
+B.displayName = "ExpandableCard";
+function V({ ref: e, className: n, sx: r, onClick: i, disabled: a, "aria-labelledby": o, "aria-describedby": s, ...c }) {
+	let l = D("Trigger"), u = b([l.triggerRef, e]), d = `h${l.headingLevel}`;
+	return /* @__PURE__ */ v(d, {
+		css: M,
+		"aria-labelledby": l.triggerId,
+		children: /* @__PURE__ */ v(t, {
+			className: n,
+			styles: N,
+			sx: r,
+			children: (e) => /* @__PURE__ */ v("button", {
+				...c,
+				ref: u,
+				type: "button",
+				id: l.triggerId,
+				"data-ui": "expandable-card-trigger",
+				className: e,
+				disabled: l.disabled || a,
+				"aria-expanded": l.open,
+				"aria-controls": l.panelId,
+				"aria-labelledby": z(o, l.hasTitle && l.titleId, l.hasDescription && l.descriptionId),
+				"aria-describedby": z(s),
+				onClick: (e) => {
+					i?.(e), e.defaultPrevented || l.request(!l.open);
+				}
+			})
+		})
+	});
+}
+V.displayName = "ExpandableCard.Trigger";
+function H({ ref: e, className: n, sx: r, children: i, ...a }) {
+	let { titleId: o, setHasTitle: c } = D("Title"), l = s(i);
+	return d(() => (c(l), () => c(!1)), [l, c]), l ? /* @__PURE__ */ v(t, {
+		className: n,
+		styles: P,
+		sx: r,
+		children: (t) => /* @__PURE__ */ v("span", {
+			...a,
+			ref: e,
+			id: o,
+			className: t,
+			"data-ui": "expandable-card-title",
+			children: i
+		})
+	}) : null;
+}
+H.displayName = "ExpandableCard.Title";
+function U({ ref: e, className: n, sx: r, children: i, ...a }) {
+	let { descriptionId: o, setHasDescription: c } = D("Description"), l = s(i);
+	return d(() => (c(l), () => c(!1)), [l, c]), l ? /* @__PURE__ */ v(t, {
+		className: n,
+		styles: F,
+		sx: r,
+		children: (t) => /* @__PURE__ */ y("span", {
+			...a,
+			ref: e,
+			id: o,
+			className: t,
+			"data-ui": "expandable-card-description",
+			children: [" ", i]
+		})
+	}) : null;
+}
+U.displayName = "ExpandableCard.Description";
+function W({ ref: e, className: n, sx: r, children: i, "aria-labelledby": a, "aria-describedby": o, ...s }) {
+	let c = D("Content"), l = h(null), u = h(null), d = b([l, e]), f = C(0), m = C(+!!c.open), g = w(), _ = h(!1);
+	return p(() => {
+		let e = l.current, t = u.current;
+		if (!e || !t) return;
+		let n = 0, r = !1;
+		if (!c.open && e.contains(e.ownerDocument.activeElement) && c.triggerRef.current?.focus(), e.inert = !c.open, e.hidden = !c.open && !_.current, c.expandedWidth === void 0) return;
+		let i = (t) => {
+			e.style.blockSize = `${t}px`, c.open && t > 0 && m.get() === 0 && !m.isAnimating() && S(m, 1, k);
+		}, a = f.on("change", i), o = m.on("change", (t) => {
+			e.style.opacity = String(t);
+		}), s = () => {
+			let a = ++n, o = c.open ? t.getBoundingClientRect().height : 0;
+			f.stop();
+			let s = () => {
+				!r && a === n && !c.open && (e.hidden = !0);
+			};
+			!_.current || g ? (m.jump(+!!c.open), e.style.opacity = String(m.get()), f.jump(o), i(o), s(), _.current = !0) : c.open ? (f.get() > 0 && S(m, 1, k), S(f, o, {
+				...O,
+				onComplete: s
+			})) : S(m, 0, {
+				...k,
+				onComplete: () => {
+					!r && a === n && S(f, o, {
+						...O,
+						onComplete: s
+					});
+				}
+			});
+		};
+		s();
+		let d = new ResizeObserver(s);
+		return d.observe(t), () => {
+			r = !0, n++, d.disconnect(), a(), o(), f.stop(), m.stop();
+		};
+	}, [
+		c.open,
+		c.expandedWidth,
+		c.triggerRef,
+		f,
+		m,
+		g
+	]), /* @__PURE__ */ v(t, {
+		className: n,
+		styles: I,
+		sx: r,
+		children: (e) => /* @__PURE__ */ v("div", {
+			...s,
+			ref: d,
+			id: c.panelId,
+			role: "region",
+			className: e,
+			"data-ui": "expandable-card-content",
+			hidden: !c.open,
+			"aria-hidden": !c.open || void 0,
+			"aria-labelledby": z(a, c.hasTitle ? c.titleId : c.triggerId),
+			"aria-describedby": z(o, c.hasDescription && c.descriptionId),
+			children: /* @__PURE__ */ v("div", {
+				ref: u,
+				css: L,
+				style: { inlineSize: c.expandedWidth },
+				children: i
+			})
+		})
+	});
+}
+W.displayName = "ExpandableCard.Content";
+var G = Object.assign(B, {
+	Trigger: V,
+	Title: H,
+	Description: U,
+	Content: W
+});
+//#endregion
+export { G as t };

package/dist/expandable-card.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as ExpandableCard } from "./expandable-card-rUATve0o.js";

package/dist/expanding-search-BxOwtdwt.js

@@ -0,0 +1,238 @@
+'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 "./button-NLY0h6EJ.js";
+import { t as o } from "./search-field-DMvho0KQ.js";
+import { useId as ee, useLayoutEffect as s, useRef as c, useState as te } from "react";
+import { vars as l } from "@jfrader/tokens/vars";
+import { jsx as u, jsxs as d } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as f } from "@floating-ui/react";
+import { animate as p, useMotionValue as m } from "motion/react";
+import { base as h } from "@jfrader/tokens";
+//#region src/components/expanding-search/expanding-search.tsx
+var g = {
+	type: "spring",
+	visualDuration: Number.parseFloat(h.motion.duration.slow) / 1e3,
+	bounce: 0
+}, ne = "(prefers-reduced-motion: reduce)", re = e({
+	position: "relative",
+	inlineSize: "100%",
+	minInlineSize: 0,
+	minBlockSize: "var(--expanding-search-size)",
+	pointerEvents: "none"
+}), ie = {
+	sm: e({ "--expanding-search-size": l.space[8] }),
+	md: e({ "--expanding-search-size": l.space[10] }),
+	lg: e({ "--expanding-search-size": l.space[12] })
+}, _ = e({
+	position: "relative",
+	marginInlineStart: "auto",
+	inlineSize: "var(--expanding-search-size)",
+	"--expanding-search-radius": l.radius.full,
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	pointerEvents: "auto",
+	overflow: "clip",
+	overflowClipMargin: l.space[1],
+	"&[data-state=\"open\"]": {
+		inlineSize: "var(--expanding-search-width)",
+		"--expanding-search-radius": l.radius.sm
+	},
+	"&[data-anchor=\"start\"]": {
+		marginInlineStart: 0,
+		marginInlineEnd: "auto"
+	}
+}), v = e({
+	position: "absolute",
+	insetBlockStart: 0,
+	insetInline: 0
+}), ae = e({
+	position: "absolute",
+	inlineSize: "var(--expanding-search-width)",
+	maxInlineSize: "100%",
+	blockSize: "var(--expanding-search-size)",
+	borderStartStartRadius: l.radius.sm,
+	visibility: "hidden",
+	pointerEvents: "none"
+}), oe = e({
+	inlineSize: "100%",
+	paddingInline: 0,
+	borderRadius: "var(--expanding-search-radius)",
+	borderColor: l.color.borderControl,
+	backgroundColor: l.color.surfaceRaised,
+	[n]: {
+		borderColor: "ButtonText",
+		color: "ButtonText"
+	}
+}), se = e({
+	borderRadius: "var(--expanding-search-radius)",
+	overflow: "clip"
+}), ce = e({
+	display: "flex",
+	inlineSize: l.space[4],
+	blockSize: l.space[4],
+	"& > svg": {
+		inlineSize: "100%",
+		blockSize: "100%"
+	}
+}), y = /* @__PURE__ */ d("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	children: [/* @__PURE__ */ u("circle", {
+		cx: "10.5",
+		cy: "10.5",
+		r: "6.5"
+	}), /* @__PURE__ */ u("path", { d: "m16 16 5 5" })]
+}), le = (e, t) => e?.expanded === t.expanded && e.size === t.size && e.radius === t.radius;
+function b({ ref: e, inputRef: n, triggerLabel: h, open: b, defaultOpen: ue = !1, onOpenChange: x, anchor: S = "end", expandedWidth: C = `calc(${l.space[12]} * 8)`, size: w = "md", disabled: T, value: de, defaultValue: fe, onValueChange: pe, label: E, description: D, error: O, clearable: k, messages: A, searchIcon: j = y, clearIcon: M, slotProps: N, inputProps: P, className: F, sx: I, dir: L, style: R, onKeyDown: z, onBlur: B, ...me }) {
+	let [V = !1, H] = r(b, ue, x), U = c(null), W = c(null), G = c(null), K = c(null), q = c(null), he = f([U, e]), ge = f([G, n]), J = ee(), Y = c(null), [X, _e] = te(), Z = m(0), Q = m(0), $ = c(void 0);
+	s(() => {
+		let e = U.current, t = q.current;
+		if (!e || !t) return;
+		let n = () => {
+			let e = t.getBoundingClientRect(), n = {
+				expanded: e.width,
+				size: e.height,
+				radius: Number.parseFloat(getComputedStyle(t).borderStartStartRadius)
+			};
+			_e((e) => le(e, n) ? e : n);
+		};
+		n();
+		let r = e.ownerDocument.defaultView?.ResizeObserver;
+		if (!r) return;
+		let i = new r(n);
+		return i.observe(e), i.observe(t), () => i.disconnect();
+	}, [C]), s(() => {
+		let e = W.current;
+		if (!e || !X) return;
+		let t = V ? {
+			width: X.expanded,
+			radius: X.radius
+		} : {
+			width: X.size,
+			radius: X.size / 2
+		}, n = () => {
+			e.style.inlineSize = `${Z.get()}px`, e.style.setProperty("--expanding-search-radius", `${Q.get()}px`);
+		}, r = () => {
+			Z.jump(t.width), Q.jump(t.radius), n();
+		}, i = [Z.on("change", n), Q.on("change", n)], a = e.ownerDocument.defaultView?.matchMedia(ne);
+		$.current === void 0 || $.current === V || a?.matches ? r() : (p(Z, t.width, g), p(Q, t.radius, g)), $.current = V;
+		let o = () => {
+			a?.matches && r();
+		};
+		return a?.addEventListener("change", o), () => {
+			i.forEach((e) => e()), a?.removeEventListener("change", o), Z.stop(), Q.stop();
+		};
+	}, [
+		V,
+		X,
+		Z,
+		Q
+	]), s(() => {
+		let e = U.current;
+		if (!e) return;
+		let t = e.ownerDocument.activeElement;
+		V && Y.current === "input" ? (Y.current = null, (e.contains(t) || t === e.ownerDocument.body) && G.current?.focus()) : !V && Y.current === "trigger" && (Y.current = null, (e.contains(t) || t === e.ownerDocument.body) && K.current?.focus());
+	}, [V]);
+	let ve = P?.["aria-label"] ?? (!i(E) || E === "" ? h : void 0);
+	return /* @__PURE__ */ u(t, {
+		className: F,
+		styles: [re, ie[w]],
+		sx: I,
+		children: (e) => /* @__PURE__ */ d("div", {
+			...me,
+			ref: he,
+			className: e,
+			dir: L,
+			"data-ui": "expanding-search",
+			"data-state": V ? "open" : "closed",
+			style: {
+				"--expanding-search-width": C,
+				...R
+			},
+			onKeyDown: (e) => {
+				z?.(e), !(e.defaultPrevented || !V || T || e.key !== "Escape" || e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) && (e.preventDefault(), Y.current = "trigger", H(!1));
+			},
+			onBlur: (e) => {
+				if (B?.(e), e.defaultPrevented || !V) return;
+				let t = e.currentTarget, n = e.relatedTarget;
+				n && !t.contains(n) ? (Y.current = null, H(!1)) : n || queueMicrotask(() => {
+					t.isConnected && t.ownerDocument.hasFocus() && !t.contains(t.ownerDocument.activeElement) && (Y.current = null, H(!1));
+				});
+			},
+			children: [/* @__PURE__ */ u("span", {
+				ref: q,
+				"aria-hidden": !0,
+				css: ae
+			}), /* @__PURE__ */ d("div", {
+				ref: W,
+				css: _,
+				"data-anchor": S,
+				"data-state": V ? "open" : "closed",
+				children: [/* @__PURE__ */ u("div", {
+					hidden: V,
+					inert: V,
+					css: v,
+					children: /* @__PURE__ */ u(a, {
+						ref: K,
+						size: w,
+						variant: "outline",
+						disabled: T,
+						"aria-label": h,
+						"aria-expanded": V,
+						"aria-controls": J,
+						css: oe,
+						onClick: () => {
+							Y.current = "input", H(!0);
+						},
+						children: /* @__PURE__ */ u("span", {
+							"aria-hidden": !0,
+							css: ce,
+							children: j
+						})
+					})
+				}), /* @__PURE__ */ u("div", {
+					id: J,
+					"aria-hidden": !V || void 0,
+					inert: !V,
+					style: { visibility: V ? "visible" : "hidden" },
+					children: /* @__PURE__ */ u(o, {
+						...P,
+						ref: ge,
+						size: w,
+						dir: L,
+						disabled: T,
+						value: de,
+						defaultValue: fe,
+						onValueChange: pe,
+						label: E,
+						description: D,
+						error: O,
+						clearable: k,
+						messages: A,
+						searchIcon: j,
+						clearIcon: M,
+						"aria-label": ve,
+						slotProps: {
+							...N,
+							shell: {
+								...N?.shell,
+								css: [se, N?.shell?.css]
+							}
+						},
+						onKeyDown: (e) => {
+							P?.onKeyDown?.(e), !(e.defaultPrevented || T || e.key !== "Escape" || e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) && (e.preventDefault(), Y.current = "trigger", H(!1));
+						}
+					})
+				})]
+			})]
+		})
+	});
+}
+b.displayName = "ExpandingSearch";
+//#endregion
+export { b as t };

package/dist/expanding-search.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as ExpandingSearch } from "./expanding-search-BxOwtdwt.js";

package/dist/field-anatomy-COVdNpf5.js

@@ -0,0 +1,84 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./renderable-DzcIj1Lo.js";
+import { useId as r } from "react";
+import { vars as i } from "@jfrader/tokens/vars";
+import { jsx as a, jsxs as o } from "@emotion/react/jsx-runtime";
+//#region src/components/field/field-anatomy.tsx
+var s = e({
+	display: "grid",
+	gap: i.space[1],
+	inlineSize: "100%"
+}), c = e({
+	display: "inline-flex",
+	gap: i.space[1],
+	fontSize: i.textSize.sm,
+	fontWeight: i.fontWeight.medium,
+	color: i.color.text
+}), l = e({ color: i.color.dangerText }), u = e({
+	fontSize: i.textSize.sm,
+	color: i.color.textMuted
+}), d = e({
+	fontSize: i.textSize.sm,
+	color: i.color.dangerText
+});
+function f({ id: e, description: t, error: i, "aria-describedby": a, "aria-invalid": o }) {
+	let s = r(), c = e ?? s, l = `${c}-description`, u = `${c}-error`, d = n(t), f = n(i);
+	return {
+		id: c,
+		descriptionId: l,
+		errorId: u,
+		describedBy: [
+			a,
+			d && l,
+			f && u
+		].filter(Boolean).join(" ") || void 0,
+		ariaInvalid: f ? !0 : o
+	};
+}
+function p({ "data-ui": e, className: n, dir: r, sx: i, part: o, children: c }) {
+	let l = [n, o?.className].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ a(t, {
+		className: l,
+		styles: [s, o?.css],
+		sx: i,
+		children: (t) => /* @__PURE__ */ a("div", {
+			"data-ui": e,
+			dir: r,
+			className: t,
+			children: c
+		})
+	});
+}
+function m({ id: e, htmlFor: t, required: r, part: i, children: s }) {
+	return n(s) ? /* @__PURE__ */ o("label", {
+		id: e,
+		htmlFor: t,
+		className: i?.className,
+		css: [c, i?.css],
+		children: [s, r && /* @__PURE__ */ a("span", {
+			"aria-hidden": !0,
+			css: l,
+			children: " *"
+		})]
+	}) : null;
+}
+function h({ id: e, part: t, children: r }) {
+	return n(r) ? /* @__PURE__ */ a("span", {
+		id: e,
+		className: t?.className,
+		css: [u, t?.css],
+		children: r
+	}) : null;
+}
+function g({ id: e, part: t, children: r }) {
+	return n(r) ? /* @__PURE__ */ a("span", {
+		id: e,
+		role: "alert",
+		className: t?.className,
+		css: [d, t?.css],
+		children: r
+	}) : null;
+}
+//#endregion
+export { f as a, p as i, g as n, m as r, h as t };