@reopt-ai/opt-ui 1.12.4 → 1.13.0

package/dist/{text-truncate-DsG5UAOY.cjs → text-truncate-BeYW6XZu.cjs}

@@ -28,6 +28,7 @@ let react = require("react");
 react = __toESM(react, 1);
 let _reopt_ai_opt_ui_primitives = require("@reopt-ai/opt-ui-primitives");
 let lucide_react = require("lucide-react");
+let react_resizable_panels = require("react-resizable-panels");
 //#region src/lib/cn.ts
 /** Handles cn. */
 function cn(...inputs) {
@@ -242,7 +243,7 @@ function useControlledState(defaultValue, controlledValue, onChange) {
 }
 //#endregion
 //#region src/core/skeleton.tsx
-const _excluded$17 = [
+const _excluded$21 = [
 	"variant",
 	"width",
 	"height",
@@ -251,9 +252,9 @@ const _excluded$17 = [
 	"className",
 	"style"
 ];
-const _excluded2$9 = ["lines", "className"];
-const _excluded3$8 = ["size", "className"];
-const _excluded4$6 = ["className"];
+const _excluded2$11 = ["lines", "className"];
+const _excluded3$10 = ["size", "className"];
+const _excluded4$7 = ["className"];
 const variantStyles$4 = {
 	text: "rounded h-4",
 	circular: "rounded-full",
@@ -261,7 +262,7 @@ const variantStyles$4 = {
 };
 /** Renders the skeleton component. */
 function Skeleton(_ref) {
-	let { variant = "text", width, height, lines = 1, animated = true, className, style } = _ref, props = _objectWithoutProperties(_ref, _excluded$17);
+	let { variant = "text", width, height, lines = 1, animated = true, className, style } = _ref, props = _objectWithoutProperties(_ref, _excluded$21);
 	const baseClass = cn("bg-bg-subtle", animated && "animate-pulse", variantStyles$4[variant], className);
 	const computedStyle = _objectSpread2({
 		width: typeof width === "number" ? `${width}px` : width,
@@ -297,7 +298,7 @@ function Skeleton(_ref) {
 }
 /** Renders the skeleton text component. */
 function SkeletonText(_ref2) {
-	let { lines = 3, className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$9);
+	let { lines = 3, className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$11);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, _objectSpread2(_objectSpread2({
 		variant: "text",
 		lines,
@@ -309,7 +310,7 @@ function SkeletonText(_ref2) {
 }
 /** Renders the skeleton avatar component. */
 function SkeletonAvatar(_ref3) {
-	let { size = 40, className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$8);
+	let { size = 40, className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$10);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, _objectSpread2(_objectSpread2({
 		variant: "circular",
 		width: size,
@@ -322,7 +323,7 @@ function SkeletonAvatar(_ref3) {
 }
 /** Renders the skeleton card component. */
 function SkeletonCard(_ref4) {
-	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$6);
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$7);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", _objectSpread2(_objectSpread2({ className: cn("gap-group flex flex-col", className) }, props), {}, {
 		"data-opt-id": "34V5D",
 		"data-opt-slug": "skeleton.SkeletonCard",
@@ -516,7 +517,7 @@ const koBreadcrumbLabels = {
 navAriaLabel: "{label}(으)로 이동" };
 //#endregion
 //#region src/core/button.tsx
-const _excluded$16 = [
+const _excluded$20 = [
 	"variant",
 	"size",
 	"loading",
@@ -533,18 +534,18 @@ const variantStyles$3 = {
 	ghost: "text-text-secondary hover:bg-bg-subtle active:bg-bg-muted focus-visible:ring-offset-1",
 	danger: "bg-danger text-danger-fg hover:bg-danger active:bg-danger focus-visible:ring-offset-2"
 };
-const sizeStyles$5 = {
+const sizeStyles$6 = {
 	sm: "h-[var(--opt-control-sm)] px-[var(--opt-control-padding-sm)] text-xs gap-[var(--opt-space-1-5)]",
 	md: "h-[var(--opt-control-md)] px-[var(--opt-control-padding-md)] text-sm gap-[var(--opt-space-2)]",
 	lg: "h-[var(--opt-control-lg)] px-[var(--opt-control-padding-lg)] text-base gap-[var(--opt-space-2)]"
 };
 /** Renders the button component. */
 function Button(_ref) {
-	let { variant = "primary", size = "md", loading = false, leftIcon, rightIcon, className, disabled, children, "aria-busy": ariaBusy } = _ref, props = _objectWithoutProperties(_ref, _excluded$16);
+	let { variant = "primary", size = "md", loading = false, leftIcon, rightIcon, className, disabled, children, "aria-busy": ariaBusy } = _ref, props = _objectWithoutProperties(_ref, _excluded$20);
 	const isDisabled = disabled || loading;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", _objectSpread2(_objectSpread2({
 		type: "button",
-		className: cn("inline-flex cursor-pointer items-center justify-center rounded-lg font-medium transition-colors", OPT_FOCUS_VISIBLE, variantStyles$3[variant], sizeStyles$5[size], isDisabled && "pointer-events-none cursor-not-allowed opacity-50", className),
+		className: cn("inline-flex cursor-pointer items-center justify-center rounded-lg font-medium transition-colors", OPT_FOCUS_VISIBLE, variantStyles$3[variant], sizeStyles$6[size], isDisabled && "pointer-events-none cursor-not-allowed opacity-50", className),
 		disabled: isDisabled
 	}, props), {}, {
 		"aria-busy": loading ? true : ariaBusy,
@@ -646,8 +647,111 @@ function EmptyState({ icon, title, description, body, footer, actions, className
 	});
 }
 //#endregion
+//#region src/core/description-list.tsx
+const defaultLabels = {
+	copy: (term) => `Copy ${term}`,
+	copied: "Copied",
+	empty: "—"
+};
+const columnsClass = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 sm:grid-cols-2",
+	3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+	4: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"
+};
+function CopyButton({ value, label, copiedLabel }) {
+	const [copied, setCopied] = (0, react.useState)(false);
+	const handleCopy = (0, react.useCallback)(() => {
+		var _navigator$clipboard;
+		(_navigator$clipboard = navigator.clipboard) === null || _navigator$clipboard === void 0 || _navigator$clipboard.writeText(value).then(() => {
+			setCopied(true);
+			window.setTimeout(() => setCopied(false), 1500);
+		});
+	}, [value]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick: handleCopy,
+		"aria-label": copied ? copiedLabel : label,
+		className: cn(OPT_FOCUS_VISIBLE, OPT_TEXT_TERTIARY, "hover:text-text-primary shrink-0 rounded p-0.5 transition-colors"),
+		children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
+			className: "size-3.5",
+			"aria-hidden": "true"
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, {
+			className: "size-3.5",
+			"aria-hidden": "true"
+		})
+	});
+}
+/**
+* DescriptionList — the labelled facts about one thing.
+*
+* Detail views collect a dozen short fields that each mean nothing without
+* their label, and hand-rolling them as a `<div>` grid loses the term/value
+* association that assistive tech needs. This keeps the pairs in a real `<dl>`
+* while still laying them out as boxed cells.
+*
+* @example
+* ```tsx
+* <DescriptionList
+*   layout="grid"
+*   columns={2}
+*   items={[
+*     { id: "id", term: "Session ID", description: session.id, copyValue: session.id },
+*     { id: "entry", term: "Entry path", description: session.entryPath },
+*   ]}
+* />
+* ```
+*/
+function DescriptionList({ items, layout = "grid", columns = 2, compressed = false, labels: customLabels, className }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels), customLabels);
+	if (layout === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+		className: cn("flex flex-wrap items-baseline gap-x-6 gap-y-2", className),
+		"data-opt-id": "1NPD2",
+		"data-opt-slug": "description-list.DescriptionList",
+		children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-baseline gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+				className: cn(OPT_TEXT_TERTIARY, "text-xs"),
+				title: item.hint,
+				children: item.term
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+				className: cn(OPT_TEXT_PRIMARY, "text-sm font-medium"),
+				children: item.description || labels.empty
+			})]
+		}, item.id))
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+		className: cn("grid", compressed ? "gap-element" : "gap-group", columnsClass[columns], className),
+		"data-opt-id": "1NPD2",
+		"data-opt-slug": "description-list.DescriptionList",
+		children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cn("flex min-w-0 flex-col gap-1", layout === "grid" && [
+				"border border-border",
+				"bg-bg-subtle rounded-lg",
+				compressed ? "px-2.5 py-1.5" : "px-3 py-2"
+			]),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+				className: cn(OPT_TEXT_TERTIARY, "text-xs"),
+				title: item.hint,
+				children: item.term
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dd", {
+				className: cn(OPT_TEXT_PRIMARY, "flex min-w-0 items-center gap-1.5 text-sm"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: cn("min-w-0", item.wrap ? "break-all" : "truncate", !item.description && "text-text-secondary"),
+					children: item.description || labels.empty
+				}), item.copyValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, {
+					value: item.copyValue,
+					label: labels.copy(typeof item.term === "string" ? item.term : item.id),
+					copiedLabel: labels.copied
+				})]
+			})]
+		}, item.id))
+	});
+}
+DescriptionList.displayName = "DescriptionList";
+//#endregion
 //#region src/core/badge.tsx
-const _excluded$15 = [
+const _excluded$19 = [
 	"variant",
 	"size",
 	"dot",
@@ -677,19 +781,19 @@ const progressStroke = {
 	error: "stroke-danger",
 	info: "stroke-info"
 };
-const sizeStyles$4 = {
+const sizeStyles$5 = {
 	sm: "px-1.5 py-0.5 text-[10px]",
 	md: "px-2 py-0.5 text-[11px]"
 };
 /** Renders the badge component. */
 function Badge(_ref) {
-	let { variant = "default", size = "md", dot = false, progress, progressSize = 16, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$15);
+	let { variant = "default", size = "md", dot = false, progress, progressSize = 16, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$19);
 	const hasProgress = progress != null;
 	const clampedProgress = hasProgress ? Math.min(100, Math.max(0, progress)) : 0;
 	const radius = (progressSize - 3) / 2;
 	const circumference = 2 * Math.PI * radius;
 	const offset = circumference - clampedProgress / 100 * circumference;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", _objectSpread2(_objectSpread2({ className: cn(OPT_BADGE, variantStyles$2[variant], sizeStyles$4[size], className) }, props), {}, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", _objectSpread2(_objectSpread2({ className: cn(OPT_BADGE, variantStyles$2[variant], sizeStyles$5[size], className) }, props), {}, {
 		"data-opt-id": "9GBGZ",
 		"data-opt-slug": "badge.Badge",
 		children: [
@@ -729,24 +833,24 @@ function Badge(_ref) {
 }
 //#endregion
 //#region src/core/spinner.tsx
-const _excluded$14 = [
+const _excluded$18 = [
 	"size",
 	"className",
 	"role",
 	"aria-hidden",
 	"aria-label"
 ];
-const sizeStyles$3 = {
+const sizeStyles$4 = {
 	sm: "h-4 w-4",
 	md: "h-6 w-6",
 	lg: "h-8 w-8"
 };
 /** Renders the spinner component. */
 function Spinner(_ref) {
-	let { size = "md", className, role, "aria-hidden": ariaHidden, "aria-label": ariaLabel } = _ref, props = _objectWithoutProperties(_ref, _excluded$14);
+	let { size = "md", className, role, "aria-hidden": ariaHidden, "aria-label": ariaLabel } = _ref, props = _objectWithoutProperties(_ref, _excluded$18);
 	const isDecorative = ariaHidden === true || ariaHidden === "true";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", _objectSpread2(_objectSpread2({
-		className: cn("animate-spin text-current", sizeStyles$3[size], className),
+		className: cn("animate-spin text-current", sizeStyles$4[size], className),
 		viewBox: "0 0 24 24",
 		fill: "none",
 		role: isDecorative ? void 0 : role !== null && role !== void 0 ? role : "status",
@@ -771,7 +875,7 @@ function Spinner(_ref) {
 }
 //#endregion
 //#region src/core/alert.tsx
-const _excluded$13 = [
+const _excluded$17 = [
 	"variant",
 	"title",
 	"icon",
@@ -840,7 +944,7 @@ const defaultIcons = {
 };
 /** Renders the alert component. */
 function Alert(_ref) {
-	let { variant = "info", title, icon, dismissible = false, onDismiss, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$13);
+	let { variant = "info", title, icon, dismissible = false, onDismiss, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$17);
 	const displayIcon = icon !== null && icon !== void 0 ? icon : defaultIcons[variant];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", _objectSpread2(_objectSpread2({
 		role: "alert",
@@ -887,10 +991,10 @@ function Alert(_ref) {
 }
 //#endregion
 //#region src/core/toolbar.tsx
-const _excluded$12 = ["className"];
-const _excluded2$8 = ["className"];
-const _excluded3$7 = ["className"];
-const _excluded4$5 = ["className"];
+const _excluded$16 = ["className"];
+const _excluded2$10 = ["className"];
+const _excluded3$9 = ["className"];
+const _excluded4$6 = ["className"];
 const _excluded5$3 = ["className"];
 const toolbarClass = `${OPT_SURFACE} ${OPT_BORDER} inline-flex w-fit items-center gap-0.5 px-1.5 py-1`;
 const buttonClass = `cursor-pointer rounded-md px-2.5 py-1.5 text-text-primary transition-colors data-[disabled]:cursor-not-allowed ${OPT_ACTIVE_ITEM} ${OPT_FOCUS}`;
@@ -905,7 +1009,7 @@ function ToolbarRoot(props) {
 }
 /** Renders the toolbar container component. */
 function ToolbarContainer(_ref) {
-	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$12);
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$16);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.ToolbarContainer, _objectSpread2(_objectSpread2({ className: cn(toolbarClass, className) }, props), {}, {
 		"data-opt-id": "2AVXB",
 		"data-opt-slug": "toolbar.ToolbarContainer"
@@ -913,7 +1017,7 @@ function ToolbarContainer(_ref) {
 }
 /** Renders the toolbar button component. */
 function ToolbarButton(_ref2) {
-	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$8);
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$10);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.ToolbarButton, _objectSpread2(_objectSpread2({ className: cn(buttonClass, className) }, props), {}, {
 		"data-opt-id": "C212C",
 		"data-opt-slug": "toolbar.ToolbarButton"
@@ -921,7 +1025,7 @@ function ToolbarButton(_ref2) {
 }
 /** Renders the toolbar separator component. */
 function ToolbarSeparator(_ref3) {
-	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$7);
+	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$9);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.ToolbarSeparator, _objectSpread2(_objectSpread2({ className: cn(separatorClass, className) }, props), {}, {
 		"data-opt-id": "9J72S",
 		"data-opt-slug": "toolbar.ToolbarSeparator"
@@ -929,14 +1033,14 @@ function ToolbarSeparator(_ref3) {
 }
 /** Renders the tooltip provider component. */
 function TooltipProvider(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.TooltipProvider, _objectSpread2(_objectSpread2({}, props), {}, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.TooltipRoot, _objectSpread2(_objectSpread2({}, props), {}, {
 		"data-opt-id": "6NKHT",
 		"data-opt-slug": "toolbar.TooltipProvider"
 	}));
 }
 /** Renders the tooltip anchor component. */
 function TooltipAnchor(_ref4) {
-	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$5);
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$6);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.TooltipAnchor, _objectSpread2(_objectSpread2({ className }, props), {}, {
 		"data-opt-id": "SAW1B",
 		"data-opt-slug": "toolbar.TooltipAnchor"
@@ -961,7 +1065,7 @@ function useInputId(id, label, prefix) {
 }
 //#endregion
 //#region src/core/input.tsx
-const _excluded$11 = [
+const _excluded$15 = [
 	"label",
 	"error",
 	"hint",
@@ -976,7 +1080,7 @@ const _excluded$11 = [
 const inputSizeStyles = OPT_INPUT_SIZE;
 const Input = (0, react.forwardRef)((_ref, ref) => {
 	var _useInputId;
-	let { label, error, hint, leftIcon, rightIcon, fullWidth = false, size = "md", required, className, id } = _ref, props = _objectWithoutProperties(_ref, _excluded$11);
+	let { label, error, hint, leftIcon, rightIcon, fullWidth = false, size = "md", required, className, id } = _ref, props = _objectWithoutProperties(_ref, _excluded$15);
 	const fallbackId = (0, react.useId)().replace(/:/g, "");
 	const inputId = (_useInputId = useInputId(id, label, "input")) !== null && _useInputId !== void 0 ? _useInputId : `input-${fallbackId}`;
 	const hasError = Boolean(error);
@@ -1022,6 +1126,106 @@ const Input = (0, react.forwardRef)((_ref, ref) => {
 });
 Input.displayName = "Input";
 //#endregion
+//#region src/core/switch.tsx
+const _excluded$14 = [
+	"label",
+	"required",
+	"error",
+	"hint",
+	"description",
+	"checked",
+	"defaultChecked",
+	"onChange",
+	"size",
+	"disabled",
+	"className",
+	"id",
+	"onClick",
+	"aria-label",
+	"aria-labelledby"
+];
+const sizeStyles$3 = {
+	sm: {
+		track: "h-5 w-9",
+		thumb: "h-4 w-4",
+		translate: "translate-x-4"
+	},
+	md: {
+		track: "h-6 w-11",
+		thumb: "h-5 w-5",
+		translate: "translate-x-5"
+	},
+	lg: {
+		track: "h-7 w-14",
+		thumb: "h-6 w-6",
+		translate: "translate-x-7"
+	}
+};
+const Switch = (0, react.forwardRef)((_ref, ref) => {
+	var _useInputId;
+	let { label, required, error, hint, description, checked: controlledChecked, defaultChecked = false, onChange, size = "md", disabled, className, id, onClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = _ref, props = _objectWithoutProperties(_ref, _excluded$14);
+	const fallbackId = (0, react.useId)();
+	const switchId = (_useInputId = useInputId(id, label, "switch")) !== null && _useInputId !== void 0 ? _useInputId : `switch-${fallbackId}`;
+	const hintText = hint !== null && hint !== void 0 ? hint : description;
+	const hasError = Boolean(error);
+	const styles = sizeStyles$3[size];
+	const labelId = label ? `${switchId}-label` : void 0;
+	const switchLabelledBy = ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : ariaLabel ? void 0 : labelId;
+	const switchAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : switchLabelledBy ? void 0 : "Switch";
+	const isControlled = controlledChecked !== void 0;
+	const [internalChecked, setInternalChecked] = (0, react.useState)(defaultChecked);
+	const checked = isControlled ? controlledChecked : internalChecked;
+	const handleClick = (0, react.useCallback)((e) => {
+		const next = !checked;
+		if (!isControlled) setInternalChecked(next);
+		onChange === null || onChange === void 0 || onChange(next);
+		onClick === null || onClick === void 0 || onClick(e);
+	}, [
+		checked,
+		isControlled,
+		onChange,
+		onClick
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("flex flex-col gap-1.5", className),
+		"data-opt-id": "51Z9R",
+		"data-opt-slug": "switch.Switch",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", _objectSpread2(_objectSpread2({
+				ref,
+				type: "button",
+				role: "switch",
+				id: switchId,
+				"aria-checked": checked,
+				"aria-label": switchAriaLabel,
+				"aria-labelledby": switchLabelledBy,
+				disabled,
+				className: cn("group relative inline-flex shrink-0 cursor-pointer rounded-full p-0.5 transition-colors", styles.track, "bg-bg-muted", "aria-[checked=true]:bg-accent", "disabled:cursor-not-allowed disabled:opacity-50", OPT_FOCUS_VISIBLE),
+				"aria-invalid": hasError,
+				"aria-required": required,
+				"aria-describedby": getDescribedBy(switchId, error, hintText),
+				onClick: handleClick
+			}, props), {}, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cn("pointer-events-none inline-block transform rounded-full bg-white shadow-sm ring-0 transition-transform", styles.thumb, "translate-x-0", size === "sm" && "group-aria-[checked=true]:translate-x-4", size === "md" && "group-aria-[checked=true]:translate-x-5", size === "lg" && "group-aria-[checked=true]:translate-x-7") }) })), (label || hintText) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col",
+				children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					id: labelId,
+					className: cn("text-text-primary text-sm font-medium", disabled && "opacity-50"),
+					children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequiredMark, {})]
+				}), hintText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					id: `${switchId}-hint`,
+					className: cn("text-text-tertiary text-sm", disabled && "opacity-50"),
+					children: hintText
+				})]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldMessages, {
+			id: switchId,
+			error
+		})]
+	});
+});
+Switch.displayName = "Switch";
+//#endregion
 //#region src/core/star-rating.tsx
 function interpolate(template, values) {
 	return template.replace(/\{(\w+)\}/g, (_, key) => key in values ? String(values[key]) : `{${key}}`);
@@ -1126,8 +1330,62 @@ function StarRating({ value = 0, onChange, max = 5, readOnly = false, size = "md
 	});
 }
 //#endregion
+//#region src/core/textarea.tsx
+const _excluded$13 = [
+	"label",
+	"error",
+	"hint",
+	"fullWidth",
+	"required",
+	"resize",
+	"size",
+	"className",
+	"id",
+	"rows"
+];
+const textareaSizeStyles = OPT_TEXTAREA_SIZE;
+const resizeStyles$1 = {
+	none: "resize-none",
+	vertical: "resize-y",
+	horizontal: "resize-x",
+	both: "resize"
+};
+const Textarea = (0, react.forwardRef)((_ref, ref) => {
+	var _useInputId;
+	let { label, error, hint, fullWidth = false, required, resize = "vertical", size = "md", className, id, rows = 4 } = _ref, props = _objectWithoutProperties(_ref, _excluded$13);
+	const fallbackId = (0, react.useId)().replace(/:/g, "");
+	const textareaId = (_useInputId = useInputId(id, label, "textarea")) !== null && _useInputId !== void 0 ? _useInputId : `textarea-${fallbackId}`;
+	const hasError = Boolean(error);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("flex flex-col gap-1.5", fullWidth && "w-full"),
+		"data-opt-id": "6T58H",
+		"data-opt-slug": "textarea.Textarea",
+		children: [
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				htmlFor: textareaId,
+				className: "text-text-primary text-sm font-medium",
+				children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequiredMark, {})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", _objectSpread2({
+				ref,
+				id: textareaId,
+				rows,
+				className: cn("border-border bg-surface text-text-primary placeholder:text-text-tertiary w-full rounded-lg border px-4 py-3 text-sm outline-transparent", OPT_FOCUS_VISIBLE, textareaSizeStyles[size], resizeStyles$1[resize], hasError && "border-danger focus-visible:outline-danger", !fullWidth && "w-auto", className),
+				"aria-invalid": hasError,
+				"aria-describedby": getDescribedBy(textareaId, error, hint)
+			}, props)),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldMessages, {
+				id: textareaId,
+				error,
+				hint
+			})
+		]
+	});
+});
+Textarea.displayName = "Textarea";
+//#endregion
 //#region src/core/meter.tsx
-const _excluded$10 = [
+const _excluded$12 = [
 	"value",
 	"min",
 	"max",
@@ -1155,7 +1413,7 @@ const variantStyles = {
 * opt-ui-primitives Meter primitive, which owns the role/aria/valuetext.
 */
 function Meter(_ref) {
-	let { value, min = 0, max = 100, size = "md", variant = "default", showValue = false, label, getValueLabel, className } = _ref, props = _objectWithoutProperties(_ref, _excluded$10);
+	let { value, min = 0, max = 100, size = "md", variant = "default", showValue = false, label, getValueLabel, className } = _ref, props = _objectWithoutProperties(_ref, _excluded$12);
 	const clamped = Math.min(Math.max(value, min), max);
 	const percentage = max === min ? 0 : (clamped - min) / (max - min) * 100;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", _objectSpread2(_objectSpread2({ className: cn("w-full", className) }, props), {}, {
@@ -1203,8 +1461,8 @@ function CompositeZone({ children, label, focusLoop = true, focusWrap = true, cl
 }
 //#endregion
 //#region src/core/disclosure.tsx
-const _excluded$9 = ["className"];
-const _excluded2$7 = ["className"];
+const _excluded$11 = ["className"];
+const _excluded2$9 = ["className"];
 const triggerClass$1 = `flex w-full cursor-pointer items-center justify-between px-4 py-4 text-left text-sm font-medium text-text-primary transition-colors hover:bg-bg-subtle ${OPT_FOCUS} data-[active-item]:bg-bg-subtle data-[disabled]:cursor-not-allowed`;
 const contentClass = `overflow-hidden ${OPT_ANIMATE_ENTER_EXIT}`;
 /** Renders the disclosure root component. */
@@ -1216,7 +1474,7 @@ function DisclosureRoot(props) {
 }
 /** Renders the disclosure trigger component. */
 function DisclosureTrigger(_ref) {
-	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$9);
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$11);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DisclosureTrigger, _objectSpread2(_objectSpread2({ className: cn(triggerClass$1, className) }, props), {}, {
 		"data-opt-id": "14EZW",
 		"data-opt-slug": "disclosure.DisclosureTrigger"
@@ -1224,7 +1482,7 @@ function DisclosureTrigger(_ref) {
 }
 /** Renders the disclosure content component. */
 function DisclosureContent(_ref2) {
-	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$7);
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$9);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DisclosureContent, _objectSpread2(_objectSpread2({ className: cn(contentClass, className) }, props), {}, {
 		"data-opt-id": "78HYF",
 		"data-opt-slug": "disclosure.DisclosureContent"
@@ -1232,16 +1490,16 @@ function DisclosureContent(_ref2) {
 }
 //#endregion
 //#region src/core/tabs.tsx
-const _excluded$8 = ["variant"];
-const _excluded2$6 = ["className", "actions"];
-const _excluded3$6 = [
+const _excluded$10 = ["variant"];
+const _excluded2$8 = ["className", "actions"];
+const _excluded3$8 = [
 	"className",
 	"icon",
 	"status",
 	"statusLabel",
 	"children"
 ];
-const _excluded4$4 = ["className"];
+const _excluded4$5 = ["className"];
 const TabsVariantContext = react.createContext("underline");
 const tabClass = `cursor-pointer border-b-2 border-transparent px-4 py-2.5 text-sm text-text-tertiary transition-colors hover:text-text-primary data-[active-item]:text-text-primary data-[active-item]:border-text-primary data-[disabled]:cursor-not-allowed ${OPT_FOCUS}`;
 const tabListClass = "flex border-b border-border-subtle";
@@ -1254,7 +1512,7 @@ const actionsClass = "flex flex-none items-center gap-element";
 const tabPanelClass = `pt-4 ${OPT_FOCUS} data-[focus-visible]:rounded-lg`;
 /** Renders the tabs root component. */
 function TabsRoot(_ref) {
-	let { variant = "underline" } = _ref, props = _objectWithoutProperties(_ref, _excluded$8);
+	let { variant = "underline" } = _ref, props = _objectWithoutProperties(_ref, _excluded$10);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabsVariantContext.Provider, {
 		value: variant,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.TabsRoot, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -1265,7 +1523,7 @@ function TabsRoot(_ref) {
 }
 /** Renders the tab list component. */
 function TabList(_ref2) {
-	let { className, actions } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$6);
+	let { className, actions } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$8);
 	const variant = react.useContext(TabsVariantContext);
 	const list = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.TabList, _objectSpread2(_objectSpread2({ className: cn(variant === "workspace" ? workspaceTabListClass : tabListClass, className) }, props), {}, {
 		"data-opt-id": "68K7E",
@@ -1282,7 +1540,7 @@ function TabList(_ref2) {
 }
 /** Renders the tab component. */
 function Tab(_ref3) {
-	let { className, icon, status, statusLabel, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$6);
+	let { className, icon, status, statusLabel, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$8);
 	const variant = react.useContext(TabsVariantContext);
 	const decorated = icon != null || status != null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Tab, _objectSpread2(_objectSpread2({ className: cn(variant === "workspace" ? workspaceTabClass : tabClass, className) }, props), {}, {
@@ -1308,7 +1566,7 @@ function Tab(_ref3) {
 }
 /** Renders the tab panel component. */
 function TabPanel(_ref4) {
-	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$4);
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$5);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.TabPanel, _objectSpread2(_objectSpread2({ className: cn(tabPanelClass, className) }, props), {}, {
 		"data-opt-id": "C0MBP",
 		"data-opt-slug": "tabs.TabPanel"
@@ -1316,13 +1574,13 @@ function TabPanel(_ref4) {
 }
 //#endregion
 //#region src/core/select.tsx
-const _excluded$7 = [
+const _excluded$9 = [
 	"className",
 	"minWidth",
 	"style"
 ];
-const _excluded2$5 = ["className"];
-const _excluded3$5 = ["className"];
+const _excluded2$7 = ["className"];
+const _excluded3$7 = ["className"];
 const triggerClass = `${OPT_INPUT} cursor-pointer items-center justify-between data-[disabled]:cursor-not-allowed ${OPT_FOCUS}`;
 const popoverClass$1 = `${OPT_SURFACE_POPOVER} ${OPT_ANIMATE_ENTER_EXIT} z-[120]`;
 const itemClass$1 = `flex cursor-pointer items-center gap-2 data-[disabled]:cursor-not-allowed ${OPT_ITEM_BASE} ${OPT_ACTIVE_ITEM}`;
@@ -1342,7 +1600,7 @@ function SelectLabel(props) {
 }
 /** Renders the select trigger component. */
 function SelectTrigger(_ref) {
-	let { className, minWidth = 140, style } = _ref, props = _objectWithoutProperties(_ref, _excluded$7);
+	let { className, minWidth = 140, style } = _ref, props = _objectWithoutProperties(_ref, _excluded$9);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.SelectTrigger, _objectSpread2(_objectSpread2({
 		className: cn(triggerClass, className),
 		style: _objectSpread2({ minWidth: typeof minWidth === "number" ? `${minWidth}px` : minWidth }, style)
@@ -1353,7 +1611,7 @@ function SelectTrigger(_ref) {
 }
 /** Renders the select popover component. */
 function SelectPopover(_ref2) {
-	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$5);
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$7);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.SelectPopover, _objectSpread2(_objectSpread2({ className: cn(popoverClass$1, className) }, props), {}, {
 		"data-opt-id": "P152F",
 		"data-opt-slug": "select.SelectPopover"
@@ -1361,7 +1619,7 @@ function SelectPopover(_ref2) {
 }
 /** Renders the select item component. */
 function SelectItem(_ref3) {
-	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$5);
+	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$7);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.SelectItem, _objectSpread2(_objectSpread2({ className: cn(itemClass$1, className) }, props), {}, {
 		"data-opt-id": "KKBAF",
 		"data-opt-slug": "select.SelectItem"
@@ -1369,10 +1627,10 @@ function SelectItem(_ref3) {
 }
 //#endregion
 //#region src/core/dialog.tsx
-const _excluded$6 = ["className"];
-const _excluded2$4 = ["className", "size"];
-const _excluded3$4 = ["className", "size"];
-const _excluded4$3 = ["className"];
+const _excluded$8 = ["className"];
+const _excluded2$6 = ["className", "size"];
+const _excluded3$6 = ["className", "size"];
+const _excluded4$4 = ["className"];
 const _excluded5$2 = ["className"];
 const _excluded6$2 = ["className"];
 const sizeClasses = {
@@ -1393,7 +1651,7 @@ function DialogRoot(props) {
 }
 /** Renders the dialog disclosure component. */
 function DialogDisclosure(_ref) {
-	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$6);
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$8);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DialogDisclosure, _objectSpread2(_objectSpread2({ className: cn("inline-flex cursor-pointer items-center justify-center rounded-lg font-medium transition-colors", OPT_BUTTON_PRIMARY, OPT_FOCUS_VISIBLE, className) }, props), {}, {
 		"data-opt-id": "32QJK",
 		"data-opt-slug": "dialog.DialogDisclosure"
@@ -1401,7 +1659,7 @@ function DialogDisclosure(_ref) {
 }
 /** Renders the dialog panel component. */
 function DialogPanel(_ref2) {
-	let { className, size = "md" } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$4);
+	let { className, size = "md" } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$6);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DialogPanel, _objectSpread2(_objectSpread2({ className: cn(panelBase, sizeClasses[size], className) }, props), {}, {
 		"data-opt-id": "BTMTG",
 		"data-opt-slug": "dialog.DialogPanel"
@@ -1413,7 +1671,7 @@ function DialogPanel(_ref2) {
 * the other Dialog parts (DialogRoot/Heading/Description/Dismiss/…).
 */
 function AlertDialogPanel(_ref3) {
-	let { className, size = "sm" } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$4);
+	let { className, size = "sm" } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$6);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.AlertDialogPanel, _objectSpread2(_objectSpread2({ className: cn(panelBase, sizeClasses[size], className) }, props), {}, {
 		"data-opt-id": "80HGS",
 		"data-opt-slug": "dialog.AlertDialogPanel"
@@ -1421,7 +1679,7 @@ function AlertDialogPanel(_ref3) {
 }
 /** Renders the dialog heading component. */
 function DialogHeading(_ref4) {
-	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$3);
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$4);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DialogHeading, _objectSpread2(_objectSpread2({ className: cn(`text-lg font-semibold ${OPT_TEXT_PRIMARY}`, className) }, props), {}, {
 		"data-opt-id": "4NW4H",
 		"data-opt-slug": "dialog.DialogHeading"
@@ -1475,10 +1733,10 @@ function DialogFooter({ children, className }) {
 }
 //#endregion
 //#region src/core/combobox.tsx
-const _excluded$5 = ["className"];
-const _excluded2$3 = ["className"];
-const _excluded3$3 = ["className"];
-const _excluded4$2 = ["className"];
+const _excluded$7 = ["className"];
+const _excluded2$5 = ["className"];
+const _excluded3$5 = ["className"];
+const _excluded4$3 = ["className"];
 const inputClass$1 = `${OPT_INPUT} ${OPT_FOCUS}`;
 const popoverClass = `${OPT_SURFACE_POPOVER} max-h-60 overflow-y-auto ${OPT_ANIMATE_ENTER_EXIT}`;
 const itemClass = `${OPT_ITEM_BASE} ${OPT_ACTIVE_ITEM}`;
@@ -1493,7 +1751,7 @@ function ComboboxRoot(props) {
 }
 /** Renders the combobox input component. */
 function ComboboxInput(_ref) {
-	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$5);
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$7);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.ComboboxInput, _objectSpread2(_objectSpread2({ className: cn(inputClass$1, className) }, props), {}, {
 		"data-opt-id": "92FZS",
 		"data-opt-slug": "combobox.ComboboxInput"
@@ -1501,7 +1759,7 @@ function ComboboxInput(_ref) {
 }
 /** Renders the combobox popover component. */
 function ComboboxPopover(_ref2) {
-	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$3);
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$5);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.ComboboxPopover, _objectSpread2(_objectSpread2({ className: cn(popoverClass, className) }, props), {}, {
 		"data-opt-id": "WS4PD",
 		"data-opt-slug": "combobox.ComboboxPopover"
@@ -1509,7 +1767,7 @@ function ComboboxPopover(_ref2) {
 }
 /** Renders the combobox item component. */
 function ComboboxItem(_ref3) {
-	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$3);
+	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$5);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.ComboboxItem, _objectSpread2(_objectSpread2({ className: cn(itemClass, className) }, props), {}, {
 		"data-opt-id": "MAZJN",
 		"data-opt-slug": "combobox.ComboboxItem"
@@ -1524,7 +1782,7 @@ function ComboboxGroup(props) {
 }
 /** Renders the combobox group label component. */
 function ComboboxGroupLabel(_ref4) {
-	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$2);
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$3);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.ComboboxGroupLabel, _objectSpread2(_objectSpread2({ className: cn(groupLabelClass, className) }, props), {}, {
 		"data-opt-id": "512YF",
 		"data-opt-slug": "combobox.ComboboxGroupLabel"
@@ -1541,10 +1799,10 @@ function ComboboxEmpty({ className, children = koComboboxLabels.empty }) {
 }
 //#endregion
 //#region src/core/menu.tsx
-const _excluded$4 = ["className"];
-const _excluded2$2 = ["className"];
-const _excluded3$2 = ["className"];
-const _excluded4$1 = ["className"];
+const _excluded$6 = ["className"];
+const _excluded2$4 = ["className"];
+const _excluded3$4 = ["className"];
+const _excluded4$2 = ["className"];
 const _excluded5$1 = ["className"];
 const _excluded6$1 = ["className"];
 const _excluded7$1 = ["className"];
@@ -1562,7 +1820,7 @@ function MenubarRoot(props) {
 }
 /** Renders the menubar container component. */
 function MenubarContainer(_ref) {
-	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$4);
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$6);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.MenubarContainer, _objectSpread2(_objectSpread2({ className: cn(menubarClass, className) }, props), {}, {
 		"data-opt-id": "4MVQT",
 		"data-opt-slug": "menu.MenubarContainer"
@@ -1577,7 +1835,7 @@ function MenuRoot(props) {
 }
 /** Renders the menu trigger component. */
 function MenuTrigger(_ref2) {
-	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$2);
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$4);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.MenuTrigger, _objectSpread2(_objectSpread2({ className: cn(menuButtonClass, className) }, props), {}, {
 		"data-opt-id": "46BJG",
 		"data-opt-slug": "menu.MenuTrigger"
@@ -1592,7 +1850,7 @@ function MenuButtonArrow(props) {
 }
 /** Renders the menu popover component. */
 function MenuPopover(_ref3) {
-	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$2);
+	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$4);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.MenuPopover, _objectSpread2(_objectSpread2({ className: cn(menuPopoverClass, className) }, props), {}, {
 		"data-opt-id": "Q1MFY",
 		"data-opt-slug": "menu.MenuPopover"
@@ -1600,7 +1858,7 @@ function MenuPopover(_ref3) {
 }
 /** Renders the menu item component. */
 function MenuItem(_ref4) {
-	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$1);
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$2);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.MenuItem, _objectSpread2(_objectSpread2({ className: cn(menuItemClass, className) }, props), {}, {
 		"data-opt-id": "71JVB",
 		"data-opt-slug": "menu.MenuItem"
@@ -2063,9 +2321,9 @@ function Slider({ value: controlledValue, defaultValue = 0, onChange, min = 0, m
 Slider.displayName = "Slider";
 //#endregion
 //#region src/core/popover.tsx
-const _excluded$3 = ["className"];
-const _excluded2$1 = ["className"];
-const _excluded3$1 = ["className"];
+const _excluded$5 = ["className"];
+const _excluded2$3 = ["className"];
+const _excluded3$3 = ["className"];
 /** Renders the popover root component. */
 function PopoverRoot(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.PopoverRoot, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -2074,7 +2332,7 @@ function PopoverRoot(props) {
 	}));
 }
 const PopoverTrigger = (0, react.forwardRef)((_ref, ref) => {
-	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$3);
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$5);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.PopoverTrigger, _objectSpread2(_objectSpread2({
 		ref,
 		className: cn("inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm", "cursor-pointer data-[disabled]:cursor-not-allowed", OPT_FOCUS_VISIBLE, className)
@@ -2086,7 +2344,7 @@ const PopoverTrigger = (0, react.forwardRef)((_ref, ref) => {
 PopoverTrigger.displayName = "PopoverTrigger";
 /** Renders the popover content component. */
 function PopoverContent(_ref2) {
-	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$1);
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$3);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.PopoverContent, _objectSpread2(_objectSpread2({ className: cn("bg-surface-overlay z-50 rounded-lg p-4 shadow-lg", OPT_BORDER, OPT_ANIMATE_ENTER_EXIT, className) }, props), {}, {
 		"data-opt-id": "E03EY",
 		"data-opt-slug": "popover.PopoverContent"
@@ -2094,7 +2352,7 @@ function PopoverContent(_ref2) {
 }
 /** Renders the popover close component. */
 function PopoverClose(_ref3) {
-	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$1);
+	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$3);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.PopoverClose, _objectSpread2(_objectSpread2({ className: cn("text-text-tertiary hover:bg-bg-subtle inline-flex items-center justify-center rounded-md p-1 text-sm", "cursor-pointer data-[disabled]:cursor-not-allowed", OPT_FOCUS_VISIBLE, className) }, props), {}, {
 		"data-opt-id": "FP4KF",
 		"data-opt-slug": "popover.PopoverClose"
@@ -3388,15 +3646,15 @@ function DateRangePicker({ value, onChange, presets = DEFAULT_PRESETS, placehold
 DateRangePicker.displayName = "DateRangePicker";
 //#endregion
 //#region src/core/form.tsx
-const _excluded$2 = ["className", "store"];
-const _excluded2 = ["className"];
-const _excluded3 = [
+const _excluded$4 = ["className", "store"];
+const _excluded2$2 = ["className"];
+const _excluded3$2 = [
 	"className",
 	"resize",
 	"rows",
 	"name"
 ];
-const _excluded4 = ["className"];
+const _excluded4$1 = ["className"];
 const _excluded5 = ["className"];
 const _excluded6 = [
 	"className",
@@ -3442,7 +3700,7 @@ function useRequiredFormContext(componentName) {
 }
 /** Renders the form root component. */
 function FormRoot(_ref) {
-	let { className, store } = _ref, props = _objectWithoutProperties(_ref, _excluded$2);
+	let { className, store } = _ref, props = _objectWithoutProperties(_ref, _excluded$4);
 	const form = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.FormRoot, _objectSpread2({ className: cn("gap-section flex flex-col", className) }, props));
 	if (store) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.FormProvider, {
 		store,
@@ -3454,7 +3712,7 @@ function FormRoot(_ref) {
 }
 /** Renders the form input component. */
 function FormInput(_ref2) {
-	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2);
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$2);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.FormInput, _objectSpread2(_objectSpread2({ className: cn(inputClass, className) }, props), {}, {
 		"data-opt-id": "D7Z8F",
 		"data-opt-slug": "form.FormInput"
@@ -3469,7 +3727,7 @@ const resizeStyles = {
 /** Renders the form textarea component. */
 function FormTextarea(_ref3) {
 	var _ref4;
-	let { className, resize = "vertical", rows = 4, name } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3);
+	let { className, resize = "vertical", rows = 4, name } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$2);
 	const form = useRequiredFormContext("FormTextarea");
 	const value = (_ref4 = (0, _reopt_ai_opt_ui_primitives.useFieldValue)(form, name)) !== null && _ref4 !== void 0 ? _ref4 : "";
 	const error = form === null || form === void 0 ? void 0 : form.getError(name);
@@ -3515,7 +3773,7 @@ function FormSelect({ name, children, className, placeholder, minWidth = 140, "a
 }
 /** Renders the form select popover component. */
 function FormSelectPopover(_ref6) {
-	let { className } = _ref6, props = _objectWithoutProperties(_ref6, _excluded4);
+	let { className } = _ref6, props = _objectWithoutProperties(_ref6, _excluded4$1);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectPopover, _objectSpread2(_objectSpread2({ className: cn(OPT_SURFACE_POPOVER, OPT_ANIMATE_ENTER_EXIT, "z-[120]", className) }, props), {}, {
 		"data-opt-id": "CQSPJ",
 		"data-opt-slug": "form.FormSelectPopover"
@@ -3851,8 +4109,47 @@ function formatOptNumber(value) {
 	return new Intl.NumberFormat(OPT_UI_DEFAULT_LOCALE).format(value);
 }
 //#endregion
+//#region src/core/dropdown-menu.tsx
+const _excluded$3 = ["className"];
+const _excluded2$1 = ["className"];
+const _excluded3$1 = ["className", "variant"];
+const _excluded4 = ["className"];
+const DropdownMenu = MenuRoot;
+/** Renders the dropdown trigger component. */
+function DropdownTrigger(_ref) {
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$3);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuTrigger, _objectSpread2(_objectSpread2({ className: cn("cursor-pointer gap-2", className) }, props), {}, {
+		"data-opt-id": "C4BSS",
+		"data-opt-slug": "dropdown-menu.DropdownTrigger"
+	}));
+}
+/** Renders the dropdown content component. */
+function DropdownContent(_ref2) {
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuPopover, _objectSpread2(_objectSpread2({ className: cn(className) }, props), {}, {
+		"data-opt-id": "J6NF7",
+		"data-opt-slug": "dropdown-menu.DropdownContent"
+	}));
+}
+/** Renders the dropdown item component. */
+function DropdownItem(_ref3) {
+	let { className, variant = "default" } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuItem, _objectSpread2(_objectSpread2({ className: cn("cursor-pointer data-[disabled]:cursor-not-allowed", variant === "destructive" && "text-danger-fg data-[active-item]:bg-danger-subtle data-[active-item]:text-danger-fg", className) }, props), {}, {
+		"data-opt-id": "5M6GA",
+		"data-opt-slug": "dropdown-menu.DropdownItem"
+	}));
+}
+/** Renders the dropdown separator component. */
+function DropdownSeparator(_ref4) {
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuSeparator, _objectSpread2(_objectSpread2({ className: cn(className) }, props), {}, {
+		"data-opt-id": "K9Y54",
+		"data-opt-slug": "dropdown-menu.DropdownSeparator"
+	}));
+}
+//#endregion
 //#region src/core/checkbox.tsx
-const _excluded$1 = [
+const _excluded$2 = [
 	"label",
 	"required",
 	"error",
@@ -3917,7 +4214,7 @@ function IndeterminateIcon({ className }) {
 }
 const Checkbox = (0, react.forwardRef)((_ref, ref) => {
 	var _groupContext$size, _groupContext$disable, _useInputId;
-	let { label, required, error, hint, description, checked: checkedProp, defaultChecked, onChange, size: sizeProp = "md", disabled: disabledProp, className, id, value, indeterminate } = _ref, props = _objectWithoutProperties(_ref, _excluded$1);
+	let { label, required, error, hint, description, checked: checkedProp, defaultChecked, onChange, size: sizeProp = "md", disabled: disabledProp, className, id, value, indeterminate } = _ref, props = _objectWithoutProperties(_ref, _excluded$2);
 	const groupContext = (0, react.useContext)(CheckboxGroupContext);
 	const size = (_groupContext$size = groupContext === null || groupContext === void 0 ? void 0 : groupContext.size) !== null && _groupContext$size !== void 0 ? _groupContext$size : sizeProp;
 	const disabled = (_groupContext$disable = groupContext === null || groupContext === void 0 ? void 0 : groupContext.disabled) !== null && _groupContext$disable !== void 0 ? _groupContext$disable : disabledProp;
@@ -3963,9 +4260,9 @@ const Checkbox = (0, react.forwardRef)((_ref, ref) => {
 					"aria-invalid": hasError,
 					"aria-required": required,
 					"aria-describedby": getDescribedBy(checkboxId, error, hintText),
-					className: "peer sr-only"
+					className: "peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
 				}, props)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: cn("inline-flex items-center justify-center rounded", styles.box, "border-border border-2", "bg-surface", "peer-checked:border-accent peer-checked:bg-accent", isIndeterminate && "border-accent bg-accent", "peer-disabled:cursor-not-allowed peer-disabled:opacity-50", "peer-focus-visible:ring-ring peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1", "transition-colors"),
+					className: cn("pointer-events-none inline-flex items-center justify-center rounded", styles.box, "border-border border-2", "bg-surface", "peer-checked:border-accent peer-checked:bg-accent", isIndeterminate && "border-accent bg-accent", "peer-disabled:cursor-not-allowed peer-disabled:opacity-50", "peer-focus-visible:ring-ring peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1", "transition-colors"),
 					children: isIndeterminate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IndeterminateIcon, { className: cn(styles.icon, "text-accent-fg opacity-0 transition-opacity", "opacity-100") }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, { className: cn(styles.icon, "text-accent-fg opacity-0 transition-opacity", checked && "opacity-100") })
 				})]
 			}), (label || hintText) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4029,6 +4326,73 @@ function CheckboxGroup({ children, value: valueProp, defaultValue = EMPTY_STRING
 	});
 }
 //#endregion
+//#region src/core/resizable.tsx
+const _excluded$1 = [
+	"direction",
+	"children",
+	"className",
+	"id",
+	"autoSaveId"
+];
+const _excluded2 = [
+	"collapsedSize",
+	"defaultSize",
+	"minSize",
+	"maxSize",
+	"children",
+	"className"
+];
+const _excluded3 = ["className", "withHandle"];
+function toPanelSize(size) {
+	return typeof size === "number" ? `${size}%` : size;
+}
+/** Renders the resizable panel group component. */
+function ResizablePanelGroup(_ref) {
+	let { direction, children, className, id, autoSaveId } = _ref, props = _objectWithoutProperties(_ref, _excluded$1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Group, _objectSpread2(_objectSpread2({
+		orientation: direction,
+		id: id !== null && id !== void 0 ? id : autoSaveId,
+		className: cn("flex h-full w-full", className)
+	}, props), {}, {
+		"data-opt-id": "BM5RR",
+		"data-opt-slug": "resizable.ResizablePanelGroup",
+		children
+	}));
+}
+ResizablePanelGroup.displayName = "ResizablePanelGroup";
+/** Renders the resizable panel component. */
+function ResizablePanel(_ref2) {
+	let { collapsedSize, defaultSize, minSize, maxSize, children, className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Panel, _objectSpread2(_objectSpread2({
+		collapsedSize: toPanelSize(collapsedSize),
+		defaultSize: toPanelSize(defaultSize),
+		minSize: toPanelSize(minSize),
+		maxSize: toPanelSize(maxSize),
+		className: cn("overflow-auto", className)
+	}, props), {}, {
+		"data-opt-id": "88X4V",
+		"data-opt-slug": "resizable.ResizablePanel",
+		children
+	}));
+}
+ResizablePanel.displayName = "ResizablePanel";
+/** Renders the resizable handle component. */
+function ResizableHandle(_ref3) {
+	let { className, withHandle = false } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Separator, _objectSpread2(_objectSpread2({ className: cn("bg-border relative flex items-center justify-center", "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2", "data-[resize-handle-active]:bg-accent", "[&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full", "[&[data-orientation=horizontal]]:h-full [&[data-orientation=horizontal]]:w-px", className) }, props), {}, {
+		"data-opt-id": "6Z22W",
+		"data-opt-slug": "resizable.ResizableHandle",
+		children: withHandle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "border-border bg-surface z-10 flex h-4 w-3 items-center justify-center rounded-sm border",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.GripVertical, {
+				"aria-hidden": "true",
+				className: "text-text-tertiary h-3 w-3"
+			})
+		})
+	}));
+}
+ResizableHandle.displayName = "ResizableHandle";
+//#endregion
 //#region src/core/pagination.tsx
 const _excluded = [
 	"totalItems",
@@ -4703,6 +5067,12 @@ Object.defineProperty(exports, "DateRangePicker", {
 		return DateRangePicker;
 	}
 });
+Object.defineProperty(exports, "DescriptionList", {
+	enumerable: true,
+	get: function() {
+		return DescriptionList;
+	}
+});
 Object.defineProperty(exports, "DialogBody", {
 	enumerable: true,
 	get: function() {
@@ -4775,6 +5145,36 @@ Object.defineProperty(exports, "DisclosureTrigger", {
 		return DisclosureTrigger;
 	}
 });
+Object.defineProperty(exports, "DropdownContent", {
+	enumerable: true,
+	get: function() {
+		return DropdownContent;
+	}
+});
+Object.defineProperty(exports, "DropdownItem", {
+	enumerable: true,
+	get: function() {
+		return DropdownItem;
+	}
+});
+Object.defineProperty(exports, "DropdownMenu", {
+	enumerable: true,
+	get: function() {
+		return DropdownMenu;
+	}
+});
+Object.defineProperty(exports, "DropdownSeparator", {
+	enumerable: true,
+	get: function() {
+		return DropdownSeparator;
+	}
+});
+Object.defineProperty(exports, "DropdownTrigger", {
+	enumerable: true,
+	get: function() {
+		return DropdownTrigger;
+	}
+});
 Object.defineProperty(exports, "EmptyState", {
 	enumerable: true,
 	get: function() {
@@ -5243,12 +5643,6 @@ Object.defineProperty(exports, "OPT_TD_MUTED", {
 		return OPT_TD_MUTED;
 	}
 });
-Object.defineProperty(exports, "OPT_TEXTAREA_SIZE", {
-	enumerable: true,
-	get: function() {
-		return OPT_TEXTAREA_SIZE;
-	}
-});
 Object.defineProperty(exports, "OPT_TEXT_LABEL", {
 	enumerable: true,
 	get: function() {
@@ -5321,6 +5715,24 @@ Object.defineProperty(exports, "RequiredMark", {
 		return RequiredMark;
 	}
 });
+Object.defineProperty(exports, "ResizableHandle", {
+	enumerable: true,
+	get: function() {
+		return ResizableHandle;
+	}
+});
+Object.defineProperty(exports, "ResizablePanel", {
+	enumerable: true,
+	get: function() {
+		return ResizablePanel;
+	}
+});
+Object.defineProperty(exports, "ResizablePanelGroup", {
+	enumerable: true,
+	get: function() {
+		return ResizablePanelGroup;
+	}
+});
 Object.defineProperty(exports, "SelectItem", {
 	enumerable: true,
 	get: function() {
@@ -5405,6 +5817,12 @@ Object.defineProperty(exports, "StatCard", {
 		return StatCard;
 	}
 });
+Object.defineProperty(exports, "Switch", {
+	enumerable: true,
+	get: function() {
+		return Switch;
+	}
+});
 Object.defineProperty(exports, "Tab", {
 	enumerable: true,
 	get: function() {
@@ -5441,6 +5859,12 @@ Object.defineProperty(exports, "TextTruncate", {
 		return TextTruncate;
 	}
 });
+Object.defineProperty(exports, "Textarea", {
+	enumerable: true,
+	get: function() {
+		return Textarea;
+	}
+});
 Object.defineProperty(exports, "ToolbarButton", {
 	enumerable: true,
 	get: function() {