@jfrader/ui 0.2.0 → 0.4.0

package/dist/skeleton-OoFlOEXO.js

@@ -0,0 +1,54 @@
+'use client';
+import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
+import { n as r } from "./media-D_eA_I-e.js";
+import { vars as i } from "@jfrader/tokens/vars";
+import { jsx as a } from "@emotion/react/jsx-runtime";
+//#region src/components/skeleton/skeleton.tsx
+var o = e({
+	from: { backgroundPosition: "200% 0" },
+	to: { backgroundPosition: "-100% 0" }
+}), s = t({
+	display: "block",
+	inlineSize: "100%",
+	blockSize: "1em",
+	flexShrink: 0,
+	borderRadius: i.radius.sm,
+	backgroundColor: i.color.surfaceHover,
+	backgroundImage: `linear-gradient(90deg, transparent, ${i.color.border}, transparent)`,
+	backgroundSize: "200% 100%",
+	backgroundRepeat: "no-repeat",
+	animation: `${o} 1.6s ease-in-out infinite`,
+	"&:dir(rtl)": { animationDirection: "reverse" },
+	[r]: {
+		animation: "none",
+		backgroundImage: "none"
+	}
+}), c = t({
+	inlineSize: i.space[10],
+	blockSize: "auto",
+	aspectRatio: "1",
+	borderRadius: i.radius.full
+});
+function l({ ref: e, width: t, height: r, circle: i = !1, radius: o, style: l, className: u, sx: d, ...f }) {
+	return /* @__PURE__ */ a(n, {
+		className: u,
+		styles: [s, i && c],
+		sx: d,
+		children: (n) => /* @__PURE__ */ a("div", {
+			...f,
+			ref: e,
+			"aria-hidden": "true",
+			"data-ui": "skeleton",
+			style: {
+				inlineSize: t,
+				blockSize: r,
+				borderRadius: i ? void 0 : o,
+				...l
+			},
+			className: n
+		})
+	});
+}
+l.displayName = "Skeleton";
+//#endregion
+export { l as t };

package/dist/skeleton.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Skeleton } from "./skeleton-DitdP-yz.js";
+export { t as Skeleton } from "./skeleton-OoFlOEXO.js";

package/dist/spinner-C2YDoiMn.js

@@ -0,0 +1,56 @@
+'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 "./visually-hidden-BJdvqqvn.js";
+import { n as i, t as a } from "./loading-ring-B8-30Dl1.js";
+import { vars as o } from "@jfrader/tokens/vars";
+import { jsx as s, jsxs as c } from "@emotion/react/jsx-runtime";
+//#region src/components/spinner/spinner.tsx
+var l = e({
+	position: "relative",
+	display: "inline-flex",
+	verticalAlign: "middle"
+}), u = e({
+	...a,
+	flexShrink: 0,
+	boxSizing: "border-box",
+	[n]: { animation: `${i} 1.6s ease-in-out infinite alternate` }
+}), d = {
+	sm: e({
+		inlineSize: o.space[4],
+		blockSize: o.space[4]
+	}),
+	md: e({
+		inlineSize: o.space[5],
+		blockSize: o.space[5]
+	}),
+	lg: e({
+		inlineSize: o.space[6],
+		blockSize: o.space[6]
+	})
+};
+function f({ ref: e, size: n = "md", label: i = "Loading", className: a, sx: o, ...f }) {
+	return /* @__PURE__ */ s(t, {
+		className: a,
+		styles: l,
+		sx: o,
+		children: (t) => /* @__PURE__ */ c("span", {
+			...f,
+			ref: e,
+			role: "status",
+			"data-ui": "spinner",
+			className: t,
+			children: [/* @__PURE__ */ s("span", {
+				"aria-hidden": "true",
+				"data-ui": "spinner-indicator",
+				css: [u, d[n]]
+			}), /* @__PURE__ */ s("span", {
+				css: r,
+				children: i
+			})]
+		})
+	});
+}
+f.displayName = "Spinner";
+//#endregion
+export { f as t };

package/dist/spinner.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Spinner } from "./spinner-CFq5HPoo.js";
+export { t as Spinner } from "./spinner-C2YDoiMn.js";

package/dist/stack-DC3IbtWk.js

@@ -0,0 +1,27 @@
+'use client';
+import { t as e } from "./sx-Dx9JUKp5.js";
+import { t } from "./layout-style-Cbd1Vilw.js";
+import { jsx as n } from "@emotion/react/jsx-runtime";
+//#region src/components/stack/stack.tsx
+function r({ ref: r, gap: i = "md", align: a, justify: o, wrap: s, className: c, sx: l, ...u }) {
+	return /* @__PURE__ */ n(e, {
+		className: c,
+		styles: t({
+			direction: "column",
+			gap: i,
+			align: a,
+			justify: o,
+			wrap: s
+		}),
+		sx: l,
+		children: (e) => /* @__PURE__ */ n("div", {
+			...u,
+			ref: r,
+			"data-ui": "stack",
+			className: e
+		})
+	});
+}
+r.displayName = "Stack";
+//#endregion
+export { r as t };

package/dist/stack.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Stack } from "./stack-D_g6NJzo.js";
+export { t as Stack } from "./stack-DC3IbtWk.js";

package/dist/switch-Dr-qjmT4.js

@@ -0,0 +1,142 @@
+'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 { useId as c } from "react";
+import { vars as l } from "@jfrader/tokens/vars";
+import { jsx as u, jsxs as d } from "@emotion/react/jsx-runtime";
+//#region src/components/switch/switch.tsx
+var f = {
+	sm: "36px",
+	md: "44px"
+}, p = e({
+	position: "relative",
+	display: "inline-block",
+	flexShrink: 0,
+	boxSizing: "border-box",
+	border: `1px solid ${l.color.borderControl}`,
+	borderRadius: l.radius.full,
+	backgroundColor: l.color.surfaceHover,
+	transitionProperty: "background-color, border-color",
+	transitionDuration: l.motion.duration.fast,
+	transitionTimingFunction: l.motion.easeStandard,
+	"&::after": {
+		content: "\"\"",
+		position: "absolute",
+		insetBlockStart: "2px",
+		insetInlineStart: "2px",
+		borderRadius: l.radius.full,
+		backgroundColor: l.color.text,
+		transitionProperty: "transform, background-color",
+		transitionDuration: l.motion.duration.fast,
+		transitionTimingFunction: l.motion.easeStandard
+	},
+	[n]: {
+		transitionDuration: "0s",
+		"&::after": { transitionDuration: "0s" }
+	}
+}), m = {
+	sm: e({
+		inlineSize: f.sm,
+		blockSize: "20px",
+		"&::after": {
+			inlineSize: "14px",
+			blockSize: "14px"
+		}
+	}),
+	md: e({
+		inlineSize: f.md,
+		blockSize: "24px",
+		"&::after": {
+			inlineSize: "18px",
+			blockSize: "18px"
+		}
+	})
+}, h = {
+	sm: e({
+		"input:checked + span::after": {
+			transform: "translateX(16px)",
+			backgroundColor: l.color.accentContrast
+		},
+		"&:dir(rtl) input:checked + span::after": { transform: "translateX(-16px)" }
+	}),
+	md: e({
+		"input:checked + span::after": {
+			transform: "translateX(20px)",
+			backgroundColor: l.color.accentContrast
+		},
+		"&:dir(rtl) input:checked + span::after": { transform: "translateX(-20px)" }
+	})
+}, g = {
+	sm: e({ fontSize: l.textSize.sm }),
+	md: e({ fontSize: l.textSize.md })
+}, _ = e({
+	fontSize: l.textSize.sm,
+	color: l.color.textMuted
+}), v = {
+	sm: e({ marginInlineStart: `calc(${f.sm} + ${l.space[2]})` }),
+	md: e({ marginInlineStart: `calc(${f.md} + ${l.space[2]})` })
+};
+function y({ ref: e, label: n, description: l, size: f = "md", onChange: y, onCheckedChange: b, slotProps: x, className: S, sx: C, dir: w, "aria-labelledby": T, "aria-describedby": E, ...D }) {
+	let O = c(), k = `${O}-label`, A = `${O}-description`, j = r(n), M = r(l), N = [T, j && k].filter(Boolean).join(" ") || void 0, P = [E, M && A].filter(Boolean).join(" ") || void 0, F = [S, x?.root?.className].filter(Boolean).join(" ") || void 0, I = (e) => {
+		y?.(e), b?.(e.currentTarget.checked);
+	};
+	return /* @__PURE__ */ u(t, {
+		className: F,
+		styles: [
+			o,
+			a,
+			h[f],
+			x?.root?.css
+		],
+		sx: C,
+		children: (t) => /* @__PURE__ */ d("label", {
+			"data-ui": "switch",
+			dir: w,
+			className: t,
+			children: [/* @__PURE__ */ d("span", {
+				css: i,
+				children: [
+					/* @__PURE__ */ u("input", {
+						...D,
+						ref: e,
+						type: "checkbox",
+						role: "switch",
+						"aria-labelledby": N,
+						"aria-describedby": P,
+						onChange: I,
+						css: s
+					}),
+					/* @__PURE__ */ u("span", {
+						"aria-hidden": "true",
+						className: x?.control?.className,
+						css: [
+							p,
+							m[f],
+							x?.control?.css
+						]
+					}),
+					j && /* @__PURE__ */ u("span", {
+						id: k,
+						className: x?.label?.className,
+						css: [g[f], x?.label?.css],
+						children: n
+					})
+				]
+			}), M && /* @__PURE__ */ u("span", {
+				id: A,
+				className: x?.description?.className,
+				css: [
+					_,
+					v[f],
+					x?.description?.css
+				],
+				children: l
+			})]
+		})
+	});
+}
+y.displayName = "Switch";
+//#endregion
+export { y as t };

package/dist/switch.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Switch } from "./switch-B5TTU-oJ.js";
+export { t as Switch } from "./switch-Dr-qjmT4.js";

package/dist/sx-Dx9JUKp5.js

@@ -0,0 +1,23 @@
+'use client';
+import { ClassNames as e, ThemeProvider as t, css as n, keyframes as r, useTheme as i } from "@emotion/react";
+import { jsx as a } from "@emotion/react/jsx-runtime";
+//#region src/styling/sx.tsx
+var o = (e) => Array.isArray(e);
+function s(e, t) {
+	return typeof e == "function" ? s(e(t), t) : o(e) ? e.map((e) => s(e, t)) : e;
+}
+function c({ className: t, styles: n, children: r }) {
+	return /* @__PURE__ */ a(e, { children: ({ css: e, cx: i, theme: a }) => r(n === void 0 ? t : i(e(s(n, a)), t)) });
+}
+function l({ className: e, styles: t, sx: n, children: r }) {
+	return /* @__PURE__ */ a(c, {
+		styles: n,
+		children: (i) => /* @__PURE__ */ a(c, {
+			className: n === void 0 ? e : [e, i].filter(Boolean).join(" "),
+			styles: t,
+			children: r
+		})
+	});
+}
+//#endregion
+export { i as a, r as i, t as n, n as r, l as t };

package/dist/tabs-CK_g1RKa.js

@@ -0,0 +1,203 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n, t as r } from "./focus-ring-BK5W5_NY.js";
+import { n as i } from "./media-D_eA_I-e.js";
+import { n as a, r as o, t as s } from "./roving-focus-CYlo_Kf8.js";
+import { t as c } from "./use-controlled-state-CVXDa-qM.js";
+import { t as l } from "./part-id-D0zksy32.js";
+import { createContext as u, useContext as d, useEffect as f, useId as p, useImperativeHandle as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { vars as v } from "@jfrader/tokens/vars";
+import { jsx as y } from "@emotion/react/jsx-runtime";
+//#region src/components/tabs/tabs.tsx
+var b = u(null);
+function x(e) {
+	let t = d(b);
+	if (!t) throw Error(`Tabs.${e} must be rendered inside <Tabs>.`);
+	return t;
+}
+var S = {
+	itemSelector: "[role=\"tab\"]:not([disabled])",
+	ownerSelector: "[role=\"tablist\"]"
+}, C = e({ "&[data-orientation=\"vertical\"]": {
+	display: "flex",
+	alignItems: "flex-start",
+	gap: v.space[4]
+} }), w = {
+	horizontal: e({
+		display: "inline-flex",
+		gap: v.space[1],
+		borderBlockEnd: `1px solid ${v.color.border}`
+	}),
+	vertical: e({
+		display: "inline-flex",
+		flexDirection: "column",
+		alignItems: "stretch",
+		borderInlineEnd: `1px solid ${v.color.border}`
+	})
+}, T = e({
+	appearance: "none",
+	border: 0,
+	background: "transparent",
+	cursor: "pointer",
+	paddingBlock: v.space[2],
+	paddingInline: v.space[3],
+	font: "inherit",
+	fontSize: v.textSize.sm,
+	fontWeight: v.fontWeight.medium,
+	color: v.color.textMuted,
+	transitionProperty: "color, border-color",
+	transitionDuration: v.motion.duration.fast,
+	transitionTimingFunction: v.motion.easeStandard,
+	"&:hover:not(:disabled):not([aria-selected=\"true\"])": { color: v.color.text },
+	"&[aria-selected=\"true\"]": {
+		color: v.color.text,
+		borderColor: v.color.accent
+	},
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	"&:focus-visible": { ...r },
+	[i]: { transitionDuration: "0s" }
+}), E = {
+	horizontal: e({
+		borderBlockEnd: "2px solid transparent",
+		marginBlockEnd: "-1px"
+	}),
+	vertical: e({
+		borderInlineEnd: "2px solid transparent",
+		marginInlineEnd: "-1px",
+		textAlign: "start"
+	})
+}, D = e({
+	color: v.color.text,
+	outline: "none",
+	"&:focus-visible": { ...n },
+	"&[hidden]": { display: "none" }
+}), O = e({ paddingBlockStart: v.space[3] });
+function k({ ref: e, value: n, defaultValue: r, onValueChange: i, orientation: a = "horizontal", activation: o = "auto", className: s, sx: l, ...u }) {
+	let d = p(), [f, m] = c(n, r, i), [g, v] = _(null), x = h(() => ({
+		value: f,
+		setValue: m,
+		focused: g,
+		setFocused: v,
+		orientation: a,
+		activation: o,
+		baseId: d
+	}), [
+		f,
+		m,
+		g,
+		a,
+		o,
+		d
+	]);
+	return /* @__PURE__ */ y(b.Provider, {
+		value: x,
+		children: /* @__PURE__ */ y(t, {
+			className: s,
+			styles: C,
+			sx: l,
+			children: (t) => /* @__PURE__ */ y("div", {
+				...u,
+				ref: e,
+				"data-ui": "tabs-root",
+				"data-orientation": a,
+				className: t
+			})
+		})
+	});
+}
+k.displayName = "Tabs";
+function A({ ref: e, onKeyDown: n, className: r, sx: i, ...c }) {
+	let { orientation: l, value: u, focused: d, setFocused: p } = x("List"), h = g(null);
+	m(e, () => h.current, []), f(() => {
+		let e = h.current;
+		if (!e) return;
+		let t = o(e, S);
+		t.length !== 0 && (t.some((e) => e.tabIndex === 0) || p((s(t, u) ?? s(t, d) ?? t[0])?.dataset.value ?? null));
+	});
+	let _ = (e) => {
+		n?.(e);
+		let t = h.current;
+		!e.defaultPrevented && t && a(e, t, l, S);
+	};
+	return /* @__PURE__ */ y(t, {
+		className: r,
+		styles: w[l],
+		sx: i,
+		children: (e) => /* @__PURE__ */ y("div", {
+			...c,
+			ref: h,
+			role: "tablist",
+			"aria-orientation": l,
+			"data-ui": "tabs-list",
+			"data-orientation": l,
+			"data-roving": d ?? "",
+			"data-selected": u ?? "",
+			onKeyDown: _,
+			className: e
+		})
+	});
+}
+A.displayName = "Tabs.List";
+function j({ ref: e, value: n, disabled: r, onClick: i, onFocus: a, className: o, sx: s, ...c }) {
+	let { value: u, setValue: d, focused: f, setFocused: p, activation: m, baseId: h, orientation: _ } = x("Tab"), v = u === n, b = !r && (f === null ? v : f === n), S = g(!1), C = (e) => {
+		if (i?.(e), e.defaultPrevented) return;
+		let t = S.current;
+		S.current = !1, !(m === "auto" && t) && d(n);
+	}, w = (e) => {
+		a?.(e), !e.defaultPrevented && (S.current = !0, p(n), m === "auto" && d(n));
+	};
+	return /* @__PURE__ */ y(t, {
+		className: o,
+		styles: [T, E[_]],
+		sx: s,
+		children: (t) => /* @__PURE__ */ y("button", {
+			...c,
+			ref: e,
+			type: "button",
+			role: "tab",
+			id: l(h, "tab", n),
+			"data-ui": "tabs-tab",
+			"data-value": n,
+			"data-state": v ? "active" : "inactive",
+			"aria-selected": v,
+			"aria-controls": l(h, "panel", n),
+			tabIndex: b ? 0 : -1,
+			disabled: r,
+			onClick: C,
+			onFocus: w,
+			className: t
+		})
+	});
+}
+j.displayName = "Tabs.Tab";
+function M({ ref: e, value: n, tabIndex: r = 0, "aria-labelledby": i, className: a, sx: o, ...s }) {
+	let { value: c, baseId: u, orientation: d } = x("Panel"), f = c === n, p = [i, l(u, "tab", n)].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ y(t, {
+		className: a,
+		styles: [D, d === "horizontal" && O],
+		sx: o,
+		children: (t) => /* @__PURE__ */ y("div", {
+			...s,
+			ref: e,
+			role: "tabpanel",
+			id: l(u, "panel", n),
+			"aria-labelledby": p,
+			tabIndex: r,
+			hidden: !f,
+			"data-ui": "tabs-panel",
+			"data-state": f ? "active" : "inactive",
+			className: t
+		})
+	});
+}
+M.displayName = "Tabs.Panel";
+var N = Object.assign(k, {
+	List: A,
+	Tab: j,
+	Panel: M
+});
+//#endregion
+export { N as t };

package/dist/tabs.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Tabs } from "./tabs-C26PWl2c.js";
+export { t as Tabs } from "./tabs-CK_g1RKa.js";

package/dist/{text-field-8PQAqRpM.js → text-field-D60ok14S.js}

@@ -1,6 +1,6 @@
 'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { a as t, i as n, n as r, o as i, r as a, t as o } from "./field-anatomy-BzGw1Ch9.js";
+import { r as e } from "./sx-Dx9JUKp5.js";
+import { a as t, i as n, n as r, o as i, r as a, t as o } from "./field-anatomy-D2ToMeRa.js";
 import { vars as s } from "@jfrader/tokens/vars";
 import { jsx as c, jsxs as l } from "@emotion/react/jsx-runtime";
 //#region src/components/text-field/text-field.tsx
@@ -21,35 +21,36 @@ var u = {
 		fontSize: s.textSize.md
 	})
 };
-function d({ ref: e, label: s, description: d, error: f, size: p = "md", onChange: m, onValueChange: h, slotProps: g, className: _, required: v, id: y, "aria-describedby": b, "aria-invalid": x, ...S }) {
-	let C = t({
-		id: y,
+function d({ ref: e, label: s, description: d, error: f, size: p = "md", onChange: m, onValueChange: h, slotProps: g, className: _, sx: v, required: y, id: b, "aria-describedby": x, "aria-invalid": S, ...C }) {
+	let w = t({
+		id: b,
 		description: d,
 		error: f,
-		"aria-describedby": b,
-		"aria-invalid": x
-	}), w = (e) => {
+		"aria-describedby": x,
+		"aria-invalid": S
+	}), T = (e) => {
 		m?.(e), h?.(e.currentTarget.value);
 	};
 	return /* @__PURE__ */ l(n, {
 		"data-ui": "text-field",
 		className: _,
+		sx: v,
 		part: g?.root,
 		children: [
 			/* @__PURE__ */ c(a, {
-				htmlFor: C.id,
-				required: v,
+				htmlFor: w.id,
+				required: y,
 				part: g?.label,
 				children: s
 			}),
 			/* @__PURE__ */ c("input", {
-				...S,
+				...C,
 				ref: e,
-				id: C.id,
-				required: v,
-				"aria-describedby": C.describedBy,
-				"aria-invalid": C.ariaInvalid,
-				onChange: w,
+				id: w.id,
+				required: y,
+				"aria-describedby": w.describedBy,
+				"aria-invalid": w.ariaInvalid,
+				onChange: T,
 				className: g?.control?.className,
 				css: [
 					i,
@@ -58,12 +59,12 @@ function d({ ref: e, label: s, description: d, error: f, size: p = "md", onChang
 				]
 			}),
 			/* @__PURE__ */ c(o, {
-				id: C.descriptionId,
+				id: w.descriptionId,
 				part: g?.description,
 				children: d
 			}),
 			/* @__PURE__ */ c(r, {
-				id: C.errorId,
+				id: w.errorId,
 				part: g?.error,
 				children: f
 			})

package/dist/text-field.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as TextField } from "./text-field-8PQAqRpM.js";
+export { t as TextField } from "./text-field-D60ok14S.js";

package/dist/{textarea-CcGWuntL.js → textarea-DyfjtP0A.js}

@@ -1,6 +1,6 @@
 'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { a as t, i as n, n as r, o as i, r as a, t as o } from "./field-anatomy-BzGw1Ch9.js";
+import { r as e } from "./sx-Dx9JUKp5.js";
+import { a as t, i as n, n as r, o as i, r as a, t as o } from "./field-anatomy-D2ToMeRa.js";
 import { vars as s } from "@jfrader/tokens/vars";
 import { jsx as c, jsxs as l } from "@emotion/react/jsx-runtime";
 //#region src/components/textarea/textarea.tsx
@@ -27,36 +27,37 @@ var u = e({
 	none: e({ resize: "none" }),
 	vertical: e({ resize: "vertical" })
 }, p = e({ fieldSizing: "content" });
-function m({ ref: e, label: s, description: m, error: h, size: g = "md", resize: _ = "vertical", autoResize: v = !1, rows: y = 3, onChange: b, onValueChange: x, slotProps: S, className: C, required: w, id: T, "aria-describedby": E, "aria-invalid": D, ...O }) {
-	let k = t({
-		id: T,
+function m({ ref: e, label: s, description: m, error: h, size: g = "md", resize: _ = "vertical", autoResize: v = !1, rows: y = 3, onChange: b, onValueChange: x, slotProps: S, className: C, sx: w, required: T, id: E, "aria-describedby": D, "aria-invalid": O, ...k }) {
+	let A = t({
+		id: E,
 		description: m,
 		error: h,
-		"aria-describedby": E,
-		"aria-invalid": D
-	}), A = (e) => {
+		"aria-describedby": D,
+		"aria-invalid": O
+	}), j = (e) => {
 		b?.(e), x?.(e.currentTarget.value);
 	};
 	return /* @__PURE__ */ l(n, {
 		"data-ui": "textarea",
 		className: C,
+		sx: w,
 		part: S?.root,
 		children: [
 			/* @__PURE__ */ c(a, {
-				htmlFor: k.id,
-				required: w,
+				htmlFor: A.id,
+				required: T,
 				part: S?.label,
 				children: s
 			}),
 			/* @__PURE__ */ c("textarea", {
-				...O,
+				...k,
 				ref: e,
-				id: k.id,
+				id: A.id,
 				rows: y,
-				required: w,
-				"aria-describedby": k.describedBy,
-				"aria-invalid": k.ariaInvalid,
-				onChange: A,
+				required: T,
+				"aria-describedby": A.describedBy,
+				"aria-invalid": A.ariaInvalid,
+				onChange: j,
 				className: S?.control?.className,
 				css: [
 					i,
@@ -68,12 +69,12 @@ function m({ ref: e, label: s, description: m, error: h, size: g = "md", resize:
 				]
 			}),
 			/* @__PURE__ */ c(o, {
-				id: k.descriptionId,
+				id: A.descriptionId,
 				part: S?.description,
 				children: m
 			}),
 			/* @__PURE__ */ c(r, {
-				id: k.errorId,
+				id: A.errorId,
 				part: S?.error,
 				children: h
 			})