@reopt-ai/opt-ui 1.10.0 → 1.11.0

package/dist/{key-pad-menu-D5mQcS5v.cjs → key-pad-menu-Cg6rZBie.cjs}

@@ -1,5 +1,5 @@
 "use client";
-const require_text_truncate = require("./text-truncate-CxdzAnhS.cjs");
+const require_text_truncate = require("./text-truncate-BZdL1k5Z.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 react = require_text_truncate.__toESM(react, 1);
@@ -9,7 +9,7 @@ let react_resizable_panels = require("react-resizable-panels");
 let ogl = require("ogl");
 let _reopt_ai_opt_palette = require("@reopt-ai/opt-palette");
 //#region src/core/text.tsx
-const _excluded$17 = [
+const _excluded$15 = [
 	"as",
 	"variant",
 	"tone",
@@ -25,7 +25,7 @@ const toneStyles$1 = {
 };
 /** Semantic body text whose visual role is controlled by foundation tokens. */
 function Text(_ref) {
-	let { as, variant = "body", tone = "primary", truncate = false, className, children } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$17);
+	let { as, variant = "body", tone = "primary", truncate = false, className, children } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$15);
 	const Component = as !== null && as !== void 0 ? as : "span";
 	const elementProps = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, props), {}, {
 		className: require_text_truncate.cn(`opt-type-${variant}`, toneStyles$1[tone], truncate && "truncate", className),
@@ -40,7 +40,7 @@ function Text(_ref) {
 }
 //#endregion
 //#region src/core/heading.tsx
-const _excluded$16 = [
+const _excluded$14 = [
 	"level",
 	"variant",
 	"className",
@@ -48,7 +48,7 @@ const _excluded$16 = [
 ];
 /** Semantic heading with independently selectable visual hierarchy. */
 function Heading(_ref) {
-	let { level = 2, variant = `heading-${level}`, className, children } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$16);
+	let { level = 2, variant = `heading-${level}`, className, children } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$14);
 	const Component = {
 		1: "h1",
 		2: "h2",
@@ -267,25 +267,25 @@ function OtpField({ length = 6, value: controlledValue, defaultValue = "", onCha
 OtpField.displayName = "OtpField";
 //#endregion
 //#region src/core/toggle.tsx
-const _excluded$15 = [
+const _excluded$13 = [
 	"size",
 	"className",
 	"children"
 ];
-const _excluded2$8 = [
+const _excluded2$7 = [
 	"className",
 	"children",
 	"orientation"
 ];
-const sizeStyles$8 = {
+const sizeStyles$7 = {
 	sm: "h-8 min-w-8 px-2 text-xs gap-1.5",
 	md: "h-10 min-w-10 px-3 text-sm gap-2"
 };
 const toggleBase = require_text_truncate.cn("inline-flex cursor-pointer items-center justify-center rounded-md border border-border bg-surface font-medium text-text-secondary", "hover:bg-bg-subtle hover:text-text-primary", "data-[pressed]:border-accent data-[pressed]:bg-accent-subtle data-[pressed]:text-accent", "disabled:pointer-events-none disabled:opacity-40", require_text_truncate.OPT_FOCUS_VISIBLE);
 /** A two-state (pressed) button. Use standalone or inside `ToggleGroup`. */
 function Toggle(_ref) {
-	let { size = "md", className, children } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$15);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Toggle, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(toggleBase, sizeStyles$8[size], className) }, props), {}, {
+	let { size = "md", className, children } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$13);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Toggle, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(toggleBase, sizeStyles$7[size], className) }, props), {}, {
 		"data-opt-id": "GFCMY",
 		"data-opt-slug": "toggle.Toggle",
 		children
@@ -294,7 +294,7 @@ function Toggle(_ref) {
 Toggle.displayName = "Toggle";
 /** A set of related toggles with shared selection and keyboard navigation. */
 function ToggleGroup(_ref2) {
-	let { className, children, orientation = "horizontal" } = _ref2, props = require_text_truncate._objectWithoutProperties(_ref2, _excluded2$8);
+	let { className, children, orientation = "horizontal" } = _ref2, props = require_text_truncate._objectWithoutProperties(_ref2, _excluded2$7);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.ToggleGroup, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
 		orientation,
 		"aria-orientation": orientation,
@@ -308,15 +308,15 @@ function ToggleGroup(_ref2) {
 ToggleGroup.displayName = "ToggleGroup";
 //#endregion
 //#region src/core/accordion.tsx
-const _excluded$14 = ["className"];
-const _excluded2$7 = ["className"];
-const _excluded3$4 = ["className", "children"];
-const _excluded4$3 = ["className", "children"];
+const _excluded$12 = ["className"];
+const _excluded2$6 = ["className"];
+const _excluded3$3 = ["className", "children"];
+const _excluded4$2 = ["className", "children"];
 const triggerClass = `group/acc-trigger flex w-full cursor-pointer items-center justify-between gap-2 py-4 text-left text-sm font-medium text-text-primary transition-colors hover:text-text-secondary ${require_text_truncate.OPT_FOCUS} disabled:cursor-not-allowed disabled:opacity-50`;
 const contentClass = `overflow-hidden text-sm text-text-secondary ${require_text_truncate.OPT_ANIMATE_ENTER_EXIT}`;
 /** A vertically stacked set of expandable panels (single or multiple open). */
 function AccordionRoot(_ref) {
-	let { className } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$14);
+	let { className } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$12);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: require_text_truncate.cn("border-border border-y", className),
 		"data-opt-id": "CSBA9",
@@ -327,7 +327,7 @@ function AccordionRoot(_ref) {
 AccordionRoot.displayName = "AccordionRoot";
 /** A single accordion entry, identified by its `value`. */
 function AccordionItem(_ref2) {
-	let { className } = _ref2, props = require_text_truncate._objectWithoutProperties(_ref2, _excluded2$7);
+	let { className } = _ref2, props = require_text_truncate._objectWithoutProperties(_ref2, _excluded2$6);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.AccordionItem, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn("border-border border-b last:border-b-0", className) }, props), {}, {
 		"data-opt-id": "JTY9M",
 		"data-opt-slug": "accordion.AccordionItem"
@@ -336,7 +336,7 @@ function AccordionItem(_ref2) {
 AccordionItem.displayName = "AccordionItem";
 /** The clickable header that expands/collapses its panel. */
 function AccordionTrigger(_ref3) {
-	let { className, children } = _ref3, props = require_text_truncate._objectWithoutProperties(_ref3, _excluded3$4);
+	let { className, children } = _ref3, props = require_text_truncate._objectWithoutProperties(_ref3, _excluded3$3);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.AccordionTrigger, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(triggerClass, className) }, props), {}, {
 		"data-opt-id": "CWJZZ",
 		"data-opt-slug": "accordion.AccordionTrigger",
@@ -352,7 +352,7 @@ function AccordionTrigger(_ref3) {
 AccordionTrigger.displayName = "AccordionTrigger";
 /** The collapsible panel body associated with a trigger. */
 function AccordionContent(_ref4) {
-	let { className, children } = _ref4, props = require_text_truncate._objectWithoutProperties(_ref4, _excluded4$3);
+	let { className, children } = _ref4, props = require_text_truncate._objectWithoutProperties(_ref4, _excluded4$2);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.AccordionContent, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(contentClass, className) }, props), {}, {
 		"data-opt-id": "J98AG",
 		"data-opt-slug": "accordion.AccordionContent",
@@ -410,427 +410,111 @@ function Breadcrumb({ items, separator = "/", className, onNavigate, "aria-label
 	});
 }
 //#endregion
-//#region src/core/card.tsx
-const _excluded$13 = [
-	"variant",
-	"padding",
-	"shadow",
-	"selectable",
-	"selected",
-	"onSelectedChange",
-	"className",
-	"children",
-	"onClick",
-	"onKeyDown",
-	"role",
-	"tabIndex"
-];
-const _excluded2$6 = [
-	"gap",
-	"className",
-	"children"
-];
-const _excluded3$3 = [
-	"as",
-	"className",
-	"children"
-];
-const _excluded4$2 = ["className", "children"];
-const _excluded5 = [
-	"spacing",
-	"className",
-	"children"
-];
-const _excluded6 = [
-	"divider",
-	"className",
-	"children"
-];
-/** Renders the card component. */
-function Card(_ref) {
-	let { variant = "default", padding = "md", shadow = true, selectable = false, selected = false, onSelectedChange, className, children, onClick, onKeyDown, role, tabIndex } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$13);
-	const isInteractive = selectable || !!onClick;
-	const handleClick = selectable ? (e) => {
-		onSelectedChange === null || onSelectedChange === void 0 || onSelectedChange(!selected);
-		onClick === null || onClick === void 0 || onClick(e);
-	} : onClick;
-	const handleKeyDown = selectable ? (e) => {
-		if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			onSelectedChange === null || onSelectedChange === void 0 || onSelectedChange(!selected);
-		}
-		onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
-	} : isInteractive ? (e) => {
-		if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			e.currentTarget.click();
-		}
-		onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
-	} : onKeyDown;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, props), {}, { className: require_text_truncate.cn("rounded-xl", variant === "default" && require_text_truncate.cn(`border border-border bg-surface`, shadow && "shadow-sm"), variant === "outline" && "border-border border-2 bg-transparent", variant === "ghost" && "bg-bg-subtle", padding === "none" && "p-0", padding === "sm" && "p-3", padding === "md" && "p-5", padding === "lg" && "p-8", selectable && "cursor-pointer transition-colors", selectable && selected && "ring-accent border-accent ring-2 ring-offset-1", selectable && !selected && "hover:border-accent/50", className) }, isInteractive ? {
-		role: selectable ? "option" : "button",
-		tabIndex: 0,
-		"aria-selected": selectable ? selected : void 0,
-		onClick: handleClick,
-		onKeyDown: handleKeyDown
-	} : {
-		role,
-		tabIndex,
-		"aria-selected": selectable ? selected : void 0,
-		onKeyDown
-	}), {}, {
-		"data-opt-id": "0A18R",
-		"data-opt-slug": "card.Card",
-		children
-	}));
-}
-const headerGapClasses = {
-	sm: "gap-1",
-	md: "gap-1.5",
-	lg: "gap-2"
+//#region src/core/description-list.tsx
+const defaultLabels$3 = {
+	copy: (term) => `Copy ${term}`,
+	copied: "Copied",
+	empty: "—"
 };
-/** Renders the card header component. */
-function CardHeader(_ref2) {
-	let { gap = "sm", className, children } = _ref2, props = require_text_truncate._objectWithoutProperties(_ref2, _excluded2$6);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn("flex flex-col", headerGapClasses[gap], className) }, props), {}, {
-		"data-opt-id": "JST3J",
-		"data-opt-slug": "card.CardHeader",
-		children
-	}));
-}
-/** Renders the card title component. */
-function CardTitle(_ref3) {
-	let { as: Tag = "h3", className, children } = _ref3, props = require_text_truncate._objectWithoutProperties(_ref3, _excluded3$3);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(`text-lg font-semibold ${require_text_truncate.OPT_TEXT_PRIMARY}`, className) }, props), {}, {
-		"data-opt-id": "V15TX",
-		"data-opt-slug": "card.CardTitle",
-		children
-	}));
-}
-/** Renders the card description component. */
-function CardDescription(_ref4) {
-	let { className, children } = _ref4, props = require_text_truncate._objectWithoutProperties(_ref4, _excluded4$2);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(`text-sm ${require_text_truncate.OPT_TEXT_SECONDARY}`, className) }, props), {}, {
-		"data-opt-id": "YB1RN",
-		"data-opt-slug": "card.CardDescription",
-		children
-	}));
-}
-const contentSpacingClasses = {
-	none: "",
-	sm: "mt-2",
-	md: "mt-4",
-	lg: "mt-6"
+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"
 };
-/** Renders the card content component. */
-function CardContent(_ref5) {
-	let { spacing = "md", className, children } = _ref5, props = require_text_truncate._objectWithoutProperties(_ref5, _excluded5);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(contentSpacingClasses[spacing], className) }, props), {}, {
-		"data-opt-id": "9Y68R",
-		"data-opt-slug": "card.CardContent",
-		children
-	}));
-}
-/** Renders the card footer component. */
-function CardFooter(_ref6) {
-	let { divider = true, className, children } = _ref6, props = require_text_truncate._objectWithoutProperties(_ref6, _excluded6);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn("mt-4 flex items-center justify-end gap-2 pt-4", divider && `border-t border border-border`, className) }, props), {}, {
-		"data-opt-id": "GRNTR",
-		"data-opt-slug": "card.CardFooter",
-		children
-	}));
+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: require_text_truncate.cn(require_text_truncate.OPT_FOCUS_VISIBLE, require_text_truncate.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"
+		})
+	});
 }
-//#endregion
-//#region src/core/switch.tsx
-const _excluded$12 = [
-	"label",
-	"required",
-	"error",
-	"hint",
-	"description",
-	"checked",
-	"defaultChecked",
-	"onChange",
-	"size",
-	"disabled",
-	"className",
-	"id",
-	"onClick",
-	"aria-label",
-	"aria-labelledby"
-];
-const sizeStyles$7 = {
-	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 = require_text_truncate._objectWithoutProperties(_ref, _excluded$12);
-	const fallbackId = (0, react.useId)();
-	const switchId = (_useInputId = require_text_truncate.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$7[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: require_text_truncate.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", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
-				ref,
-				type: "button",
-				role: "switch",
-				id: switchId,
-				"aria-checked": checked,
-				"aria-label": switchAriaLabel,
-				"aria-labelledby": switchLabelledBy,
-				disabled,
-				className: require_text_truncate.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", require_text_truncate.OPT_FOCUS_VISIBLE),
-				"aria-invalid": hasError,
-				"aria-required": required,
-				"aria-describedby": require_text_truncate.getDescribedBy(switchId, error, hintText),
-				onClick: handleClick
-			}, props), {}, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_text_truncate.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: require_text_truncate.cn("text-text-primary text-sm font-medium", disabled && "opacity-50"),
-					children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.RequiredMark, {})]
-				}), hintText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					id: `${switchId}-hint`,
-					className: require_text_truncate.cn("text-text-tertiary text-sm", disabled && "opacity-50"),
-					children: hintText
-				})]
+/**
+* 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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$3), customLabels);
+	if (layout === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+		className: require_text_truncate.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: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "text-xs"),
+				title: item.hint,
+				children: item.term
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+				className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_PRIMARY, "text-sm font-medium"),
+				children: item.description || labels.empty
 			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FieldMessages, {
-			id: switchId,
-			error
-		})]
+		}, item.id))
 	});
-});
-Switch.displayName = "Switch";
-//#endregion
-//#region src/core/skeleton.tsx
-const _excluded$11 = [
-	"variant",
-	"width",
-	"height",
-	"lines",
-	"animated",
-	"className",
-	"style"
-];
-const _excluded2$5 = ["lines", "className"];
-const _excluded3$2 = ["size", "className"];
-const _excluded4$1 = ["className"];
-const variantStyles$2 = {
-	text: "rounded h-4",
-	circular: "rounded-full",
-	rectangular: "rounded-lg"
-};
-/** Renders the skeleton component. */
-function Skeleton(_ref) {
-	let { variant = "text", width, height, lines = 1, animated = true, className, style } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$11);
-	const baseClass = require_text_truncate.cn("bg-bg-subtle", animated && "animate-pulse", variantStyles$2[variant], className);
-	const computedStyle = require_text_truncate._objectSpread2({
-		width: typeof width === "number" ? `${width}px` : width,
-		height: typeof height === "number" ? `${height}px` : height
-	}, style);
-	if (variant === "text" && lines > 1) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "gap-element flex flex-col",
-		role: "status",
-		"aria-label": "Loading",
-		"data-opt-id": "EJT87",
-		"data-opt-slug": "skeleton.Skeleton",
-		children: [Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_text_truncate._objectSpread2({
-			className: require_text_truncate.cn(baseClass, i === lines - 1 && "w-4/5"),
-			style: i === lines - 1 ? void 0 : computedStyle
-		}, props), i)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "sr-only",
-			children: "Loading..."
-		})]
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
-		className: baseClass,
-		style: computedStyle,
-		role: "status",
-		"aria-label": "Loading"
-	}, props), {}, {
-		"data-opt-id": "EJT87",
-		"data-opt-slug": "skeleton.Skeleton",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "sr-only",
-			children: "Loading..."
-		})
-	}));
-}
-/** Renders the skeleton text component. */
-function SkeletonText(_ref2) {
-	let { lines = 3, className } = _ref2, props = require_text_truncate._objectWithoutProperties(_ref2, _excluded2$5);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
-		variant: "text",
-		lines,
-		className
-	}, props), {}, {
-		"data-opt-id": "MX3D5",
-		"data-opt-slug": "skeleton.SkeletonText"
-	}));
-}
-/** Renders the skeleton avatar component. */
-function SkeletonAvatar(_ref3) {
-	let { size = 40, className } = _ref3, props = require_text_truncate._objectWithoutProperties(_ref3, _excluded3$2);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
-		variant: "circular",
-		width: size,
-		height: size,
-		className
-	}, props), {}, {
-		"data-opt-id": "MP0HZ",
-		"data-opt-slug": "skeleton.SkeletonAvatar"
-	}));
-}
-/** Renders the skeleton card component. */
-function SkeletonCard(_ref4) {
-	let { className } = _ref4, props = require_text_truncate._objectWithoutProperties(_ref4, _excluded4$1);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn("gap-group flex flex-col", className) }, props), {}, {
-		"data-opt-id": "34V5D",
-		"data-opt-slug": "skeleton.SkeletonCard",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
-				variant: "rectangular",
-				height: 120
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
-				variant: "text",
-				width: "60%"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
-				variant: "text",
-				lines: 2
-			})
-		]
-	}));
-}
-/** Renders the skeleton table component. */
-function SkeletonTable({ rows = 5, columns = 4, className }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_text_truncate.cn("gap-element flex flex-col", className),
-		role: "status",
-		"aria-label": "Loading table",
-		"data-opt-id": "3KEDN",
-		"data-opt-slug": "skeleton.SkeletonTable",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "border-border-subtle gap-group flex border-b pb-2",
-				children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
-					variant: "text",
-					className: "flex-1",
-					height: 16
-				}, i))
-			}),
-			Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "gap-group flex py-2",
-				children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
-					variant: "text",
-					className: "flex-1",
-					height: 14
-				}, colIndex))
-			}, rowIndex)),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "sr-only",
-				children: "Loading..."
-			})
-		]
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+		className: require_text_truncate.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: require_text_truncate.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: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "text-xs"),
+				title: item.hint,
+				children: item.term
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dd", {
+				className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_PRIMARY, "flex min-w-0 items-center gap-1.5 text-sm"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_text_truncate.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))
 	});
 }
-//#endregion
-//#region src/core/textarea.tsx
-const _excluded$10 = [
-	"label",
-	"error",
-	"hint",
-	"fullWidth",
-	"required",
-	"resize",
-	"size",
-	"className",
-	"id",
-	"rows"
-];
-const textareaSizeStyles = require_text_truncate.OPT_TEXTAREA_SIZE;
-const resizeStyles = {
-	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 = require_text_truncate._objectWithoutProperties(_ref, _excluded$10);
-	const fallbackId = (0, react.useId)().replace(/:/g, "");
-	const textareaId = (_useInputId = require_text_truncate.useInputId(id, label, "textarea")) !== null && _useInputId !== void 0 ? _useInputId : `textarea-${fallbackId}`;
-	const hasError = Boolean(error);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_text_truncate.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)(require_text_truncate.RequiredMark, {})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", require_text_truncate._objectSpread2({
-				ref,
-				id: textareaId,
-				rows,
-				className: require_text_truncate.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", require_text_truncate.OPT_FOCUS_VISIBLE, textareaSizeStyles[size], resizeStyles[resize], hasError && "border-danger focus-visible:outline-danger", !fullWidth && "w-auto", className),
-				"aria-invalid": hasError,
-				"aria-describedby": require_text_truncate.getDescribedBy(textareaId, error, hint)
-			}, props)),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FieldMessages, {
-				id: textareaId,
-				error,
-				hint
-			})
-		]
-	});
-});
-Textarea.displayName = "Textarea";
+DescriptionList.displayName = "DescriptionList";
 //#endregion
 //#region src/core/avatar.tsx
-const _excluded$9 = [
+const _excluded$11 = [
 	"src",
 	"srcSet",
 	"sizes",
@@ -844,7 +528,7 @@ const _excluded$9 = [
 	"className",
 	"onLoadingStatusChange"
 ];
-const _excluded2$4 = [
+const _excluded2$5 = [
 	"max",
 	"size",
 	"children",
@@ -932,7 +616,7 @@ function getColorFromName(name) {
 /** Renders the avatar component. */
 function Avatar(_ref) {
 	var _ref2, _ref3;
-	let { src, srcSet, sizes, crossOrigin, referrerPolicy, alt, name, size = "md", fallback, status, className, onLoadingStatusChange } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$9);
+	let { src, srcSet, sizes, crossOrigin, referrerPolicy, alt, name, size = "md", fallback, status, className, onLoadingStatusChange } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$11);
 	const loadingStatus = useImageLoadingStatus(src, {
 		srcSet,
 		sizes,
@@ -985,7 +669,7 @@ function Avatar(_ref) {
 }
 /** Renders the avatar group component. */
 function AvatarGroup(_ref5) {
-	let { max = 4, size = "md", children, className } = _ref5, props = require_text_truncate._objectWithoutProperties(_ref5, _excluded2$4);
+	let { max = 4, size = "md", children, className } = _ref5, props = require_text_truncate._objectWithoutProperties(_ref5, _excluded2$5);
 	const avatars = Array.isArray(children) ? children : [children];
 	const visibleAvatars = avatars.slice(0, max);
 	const remainingCount = avatars.length - max;
@@ -1002,8 +686,361 @@ function AvatarGroup(_ref5) {
 	}));
 }
 //#endregion
-//#region src/core/progress.tsx
+//#region src/core/identity.tsx
+const defaultLabels$2 = {
+	identified: "Identified",
+	anonymous: "Anonymous"
+};
+/** Picks the display name, degrading through the identifiers we do have. */
+function resolveDisplay(name, secondary, id) {
+	const trimmedName = name === null || name === void 0 ? void 0 : name.trim();
+	const trimmedSecondary = secondary === null || secondary === void 0 ? void 0 : secondary.trim();
+	if (trimmedName) return {
+		primary: trimmedName,
+		sub: trimmedSecondary || null
+	};
+	if (trimmedSecondary) return {
+		primary: trimmedSecondary,
+		sub: null
+	};
+	return {
+		primary: id !== null && id !== void 0 ? id : "—",
+		sub: null
+	};
+}
+/**
+* Identity — one person (or one anonymous device) as a table cell.
+*
+* Every analytics surface renders the same fallback chain — name, then email,
+* then an opaque id — and every hand-rolled copy of it drifts. Centralising it
+* also centralises the anonymity marker, which is the part readers most often
+* lose track of when a table mixes profiles and devices.
+*/
+function Identity({ name, secondary, id, avatarSrc, state, badge, size = "md", hideAvatar = false, labels: customLabels, className }) {
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$2), customLabels);
+	const { primary, sub } = resolveDisplay(name, secondary, id);
+	const anonymous = state === "anonymous";
+	const badgeContent = badge !== null && badge !== void 0 ? badge : state ? anonymous ? labels.anonymous : labels.identified : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: require_text_truncate.cn("flex min-w-0 items-center gap-2", className),
+		title: id,
+		"data-opt-id": "BRGG2",
+		"data-opt-slug": "identity.Identity",
+		children: [!hideAvatar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar, {
+			src: avatarSrc !== null && avatarSrc !== void 0 ? avatarSrc : void 0,
+			name: anonymous ? void 0 : primary,
+			size: size === "sm" ? "xs" : "sm",
+			alt: "",
+			className: "shrink-0"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "flex min-w-0 flex-col",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "flex min-w-0 items-center gap-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_text_truncate.cn("truncate text-sm font-medium", anonymous && !name ? require_text_truncate.OPT_TEXT_SECONDARY : require_text_truncate.OPT_TEXT_PRIMARY),
+					children: primary
+				}), badgeContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Badge, {
+					size: "sm",
+					variant: anonymous ? "default" : "info",
+					className: "shrink-0",
+					children: badgeContent
+				})]
+			}), sub && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: require_text_truncate.cn("text-text-tertiary", "truncate text-xs"),
+				children: sub
+			})]
+		})]
+	});
+}
+Identity.displayName = "Identity";
+//#endregion
+//#region src/core/card.tsx
+const _excluded$10 = [
+	"variant",
+	"padding",
+	"shadow",
+	"selectable",
+	"selected",
+	"onSelectedChange",
+	"className",
+	"children",
+	"onClick",
+	"onKeyDown",
+	"role",
+	"tabIndex"
+];
+const _excluded2$4 = [
+	"gap",
+	"className",
+	"children"
+];
+const _excluded3$2 = [
+	"as",
+	"className",
+	"children"
+];
+const _excluded4$1 = ["className", "children"];
+const _excluded5 = [
+	"spacing",
+	"className",
+	"children"
+];
+const _excluded6 = [
+	"divider",
+	"className",
+	"children"
+];
+/** Renders the card component. */
+function Card(_ref) {
+	let { variant = "default", padding = "md", shadow = true, selectable = false, selected = false, onSelectedChange, className, children, onClick, onKeyDown, role, tabIndex } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$10);
+	const isInteractive = selectable || !!onClick;
+	const handleClick = selectable ? (e) => {
+		onSelectedChange === null || onSelectedChange === void 0 || onSelectedChange(!selected);
+		onClick === null || onClick === void 0 || onClick(e);
+	} : onClick;
+	const handleKeyDown = selectable ? (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			onSelectedChange === null || onSelectedChange === void 0 || onSelectedChange(!selected);
+		}
+		onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+	} : isInteractive ? (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			e.currentTarget.click();
+		}
+		onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+	} : onKeyDown;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, props), {}, { className: require_text_truncate.cn("rounded-xl", variant === "default" && require_text_truncate.cn(`border border-border bg-surface`, shadow && "shadow-sm"), variant === "outline" && "border-border border-2 bg-transparent", variant === "ghost" && "bg-bg-subtle", padding === "none" && "p-0", padding === "sm" && "p-3", padding === "md" && "p-5", padding === "lg" && "p-8", selectable && "cursor-pointer transition-colors", selectable && selected && "ring-accent border-accent ring-2 ring-offset-1", selectable && !selected && "hover:border-accent/50", className) }, isInteractive ? {
+		role: selectable ? "option" : "button",
+		tabIndex: 0,
+		"aria-selected": selectable ? selected : void 0,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown
+	} : {
+		role,
+		tabIndex,
+		"aria-selected": selectable ? selected : void 0,
+		onKeyDown
+	}), {}, {
+		"data-opt-id": "0A18R",
+		"data-opt-slug": "card.Card",
+		children
+	}));
+}
+const headerGapClasses = {
+	sm: "gap-1",
+	md: "gap-1.5",
+	lg: "gap-2"
+};
+/** Renders the card header component. */
+function CardHeader(_ref2) {
+	let { gap = "sm", className, children } = _ref2, props = require_text_truncate._objectWithoutProperties(_ref2, _excluded2$4);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn("flex flex-col", headerGapClasses[gap], className) }, props), {}, {
+		"data-opt-id": "JST3J",
+		"data-opt-slug": "card.CardHeader",
+		children
+	}));
+}
+/** Renders the card title component. */
+function CardTitle(_ref3) {
+	let { as: Tag = "h3", className, children } = _ref3, props = require_text_truncate._objectWithoutProperties(_ref3, _excluded3$2);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(`text-lg font-semibold ${require_text_truncate.OPT_TEXT_PRIMARY}`, className) }, props), {}, {
+		"data-opt-id": "V15TX",
+		"data-opt-slug": "card.CardTitle",
+		children
+	}));
+}
+/** Renders the card description component. */
+function CardDescription(_ref4) {
+	let { className, children } = _ref4, props = require_text_truncate._objectWithoutProperties(_ref4, _excluded4$1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(`text-sm ${require_text_truncate.OPT_TEXT_SECONDARY}`, className) }, props), {}, {
+		"data-opt-id": "YB1RN",
+		"data-opt-slug": "card.CardDescription",
+		children
+	}));
+}
+const contentSpacingClasses = {
+	none: "",
+	sm: "mt-2",
+	md: "mt-4",
+	lg: "mt-6"
+};
+/** Renders the card content component. */
+function CardContent(_ref5) {
+	let { spacing = "md", className, children } = _ref5, props = require_text_truncate._objectWithoutProperties(_ref5, _excluded5);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(contentSpacingClasses[spacing], className) }, props), {}, {
+		"data-opt-id": "9Y68R",
+		"data-opt-slug": "card.CardContent",
+		children
+	}));
+}
+/** Renders the card footer component. */
+function CardFooter(_ref6) {
+	let { divider = true, className, children } = _ref6, props = require_text_truncate._objectWithoutProperties(_ref6, _excluded6);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn("mt-4 flex items-center justify-end gap-2 pt-4", divider && `border-t border border-border`, className) }, props), {}, {
+		"data-opt-id": "GRNTR",
+		"data-opt-slug": "card.CardFooter",
+		children
+	}));
+}
+//#endregion
+//#region src/core/switch.tsx
+const _excluded$9 = [
+	"label",
+	"required",
+	"error",
+	"hint",
+	"description",
+	"checked",
+	"defaultChecked",
+	"onChange",
+	"size",
+	"disabled",
+	"className",
+	"id",
+	"onClick",
+	"aria-label",
+	"aria-labelledby"
+];
+const sizeStyles$5 = {
+	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 = require_text_truncate._objectWithoutProperties(_ref, _excluded$9);
+	const fallbackId = (0, react.useId)();
+	const switchId = (_useInputId = require_text_truncate.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$5[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: require_text_truncate.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", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
+				ref,
+				type: "button",
+				role: "switch",
+				id: switchId,
+				"aria-checked": checked,
+				"aria-label": switchAriaLabel,
+				"aria-labelledby": switchLabelledBy,
+				disabled,
+				className: require_text_truncate.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", require_text_truncate.OPT_FOCUS_VISIBLE),
+				"aria-invalid": hasError,
+				"aria-required": required,
+				"aria-describedby": require_text_truncate.getDescribedBy(switchId, error, hintText),
+				onClick: handleClick
+			}, props), {}, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_text_truncate.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: require_text_truncate.cn("text-text-primary text-sm font-medium", disabled && "opacity-50"),
+					children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.RequiredMark, {})]
+				}), hintText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					id: `${switchId}-hint`,
+					className: require_text_truncate.cn("text-text-tertiary text-sm", disabled && "opacity-50"),
+					children: hintText
+				})]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FieldMessages, {
+			id: switchId,
+			error
+		})]
+	});
+});
+Switch.displayName = "Switch";
+//#endregion
+//#region src/core/textarea.tsx
 const _excluded$8 = [
+	"label",
+	"error",
+	"hint",
+	"fullWidth",
+	"required",
+	"resize",
+	"size",
+	"className",
+	"id",
+	"rows"
+];
+const textareaSizeStyles = require_text_truncate.OPT_TEXTAREA_SIZE;
+const resizeStyles = {
+	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 = require_text_truncate._objectWithoutProperties(_ref, _excluded$8);
+	const fallbackId = (0, react.useId)().replace(/:/g, "");
+	const textareaId = (_useInputId = require_text_truncate.useInputId(id, label, "textarea")) !== null && _useInputId !== void 0 ? _useInputId : `textarea-${fallbackId}`;
+	const hasError = Boolean(error);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_text_truncate.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)(require_text_truncate.RequiredMark, {})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", require_text_truncate._objectSpread2({
+				ref,
+				id: textareaId,
+				rows,
+				className: require_text_truncate.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", require_text_truncate.OPT_FOCUS_VISIBLE, textareaSizeStyles[size], resizeStyles[resize], hasError && "border-danger focus-visible:outline-danger", !fullWidth && "w-auto", className),
+				"aria-invalid": hasError,
+				"aria-describedby": require_text_truncate.getDescribedBy(textareaId, error, hint)
+			}, props)),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FieldMessages, {
+				id: textareaId,
+				error,
+				hint
+			})
+		]
+	});
+});
+Textarea.displayName = "Textarea";
+//#endregion
+//#region src/core/progress.tsx
+const _excluded$7 = [
 	"value",
 	"max",
 	"size",
@@ -1025,12 +1062,12 @@ const _excluded2$3 = [
 	"indeterminate",
 	"className"
 ];
-const sizeStyles$5 = {
+const sizeStyles$4 = {
 	sm: "h-1",
 	md: "h-2",
 	lg: "h-3"
 };
-const variantStyles$1 = {
+const variantStyles = {
 	default: "bg-accent",
 	success: "bg-success",
 	warning: "bg-warning",
@@ -1049,7 +1086,7 @@ function getProgressValue(value, max) {
 }
 /** Renders the progress component. */
 function Progress(_ref) {
-	let { value, max = 100, size = "md", variant = "default", showLabel = false, label, animated = true, indeterminate = false, className } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$8);
+	let { value, max = 100, size = "md", variant = "default", showLabel = false, label, animated = true, indeterminate = false, className } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$7);
 	const progress = indeterminate || value === void 0 ? null : getProgressValue(value, max);
 	const shouldRenderHeader = Boolean(label) || showLabel && progress;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn("w-full", className) }, props), {}, {
@@ -1065,7 +1102,7 @@ function Progress(_ref) {
 				children: progress.valueText
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: require_text_truncate.cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$5[size]),
+			className: require_text_truncate.cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$4[size]),
 			role: "progressbar",
 			"aria-valuenow": progress === null || progress === void 0 ? void 0 : progress.clampedValue,
 			"aria-valuemin": progress ? 0 : void 0,
@@ -1073,7 +1110,7 @@ function Progress(_ref) {
 			"aria-valuetext": progress === null || progress === void 0 ? void 0 : progress.valueText,
 			"aria-label": label !== null && label !== void 0 ? label : progress ? `${progress.valueText} complete` : "Loading",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_text_truncate.cn("h-full rounded-full", variantStyles$1[variant], !progress && "w-1/3 animate-pulse", animated && (progress ? "transition-all duration-300 ease-out" : "transition-opacity duration-700 ease-in-out")),
+				className: require_text_truncate.cn("h-full rounded-full", variantStyles[variant], !progress && "w-1/3 animate-pulse", animated && (progress ? "transition-all duration-300 ease-out" : "transition-opacity duration-700 ease-in-out")),
 				style: progress ? { width: `${progress.percentage}%` } : void 0
 			})
 		})]
@@ -1146,65 +1183,6 @@ function CircularProgress(_ref2) {
 	});
 }
 //#endregion
-//#region src/core/meter.tsx
-const _excluded$7 = [
-	"value",
-	"min",
-	"max",
-	"size",
-	"variant",
-	"showValue",
-	"label",
-	"getValueLabel",
-	"className"
-];
-const sizeStyles$4 = {
-	sm: "h-1",
-	md: "h-2",
-	lg: "h-3"
-};
-const variantStyles = {
-	default: "bg-accent",
-	success: "bg-success",
-	warning: "bg-warning",
-	error: "bg-danger"
-};
-/**
-* A scalar measurement within a known range (disk usage, score, capacity) —
-* `role="meter"`, distinct from Progress (task completion). Built on the
-* 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 = require_text_truncate._objectWithoutProperties(_ref, _excluded$7);
-	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", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn("w-full", className) }, props), {}, {
-		"data-opt-id": "G01TE",
-		"data-opt-slug": "meter.Meter",
-		children: [(showValue || label) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "mb-1.5 flex items-center justify-between text-sm",
-			children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-text-primary font-medium",
-				children: label
-			}), showValue && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "text-text-tertiary",
-				children: [Math.round(percentage), "%"]
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Meter, {
-			value: clamped,
-			min,
-			max,
-			getValueLabel,
-			"aria-label": label !== null && label !== void 0 ? label : `${Math.round(percentage)}%`,
-			className: require_text_truncate.cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$4[size]),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_text_truncate.cn("h-full rounded-full transition-all duration-300 ease-out", variantStyles[variant]),
-				style: { width: `${percentage}%` }
-			})
-		})]
-	}));
-}
-//#endregion
 //#region src/core/step-builder.tsx
 /** Renders the step builder component. */
 function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps, className, "aria-label": ariaLabel }) {
@@ -1363,55 +1341,6 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 }
 StepBuilder.displayName = "StepBuilder";
 //#endregion
-//#region src/lib/formatters.ts
-const OPT_UI_DEFAULT_LOCALE = "ko-KR";
-const KST_OFFSET_MS = 324e5;
-function getKstDateParts(input) {
-	const date = input instanceof Date ? input : new Date(input);
-	if (Number.isNaN(date.getTime())) return null;
-	const kstDate = new Date(date.getTime() + KST_OFFSET_MS);
-	return {
-		year: kstDate.getUTCFullYear(),
-		month: kstDate.getUTCMonth() + 1,
-		day: kstDate.getUTCDate(),
-		hour: kstDate.getUTCHours(),
-		minute: kstDate.getUTCMinutes(),
-		second: kstDate.getUTCSeconds()
-	};
-}
-function pad2(value) {
-	return String(value).padStart(2, "0");
-}
-function meridiem(hour) {
-	return hour < 12 ? "오전" : "오후";
-}
-function hour12(hour) {
-	const normalized = hour % 12;
-	return normalized === 0 ? 12 : normalized;
-}
-/** Formats a date as Korean short date text in the opt-ui default timezone. */
-function formatOptShortDate(input) {
-	const parts = getKstDateParts(input);
-	if (!parts) return "-";
-	return `${parts.month}월 ${parts.day}일`;
-}
-/** Formats a date as Korean clock time in the opt-ui default timezone. */
-function formatOptTime(input) {
-	const parts = getKstDateParts(input);
-	if (!parts) return "-";
-	return `${meridiem(parts.hour)} ${pad2(hour12(parts.hour))}:${pad2(parts.minute)}`;
-}
-/** Formats a date as Korean date-time text in the opt-ui default timezone. */
-function formatOptDateTime(input) {
-	const parts = getKstDateParts(input);
-	if (!parts) return "-";
-	return `${parts.year}. ${parts.month}. ${parts.day}. ${meridiem(parts.hour)} ${hour12(parts.hour)}:${pad2(parts.minute)}:${pad2(parts.second)}`;
-}
-/** Formats numbers without depending on the runtime default locale. */
-function formatOptNumber(value) {
-	return new Intl.NumberFormat(OPT_UI_DEFAULT_LOCALE).format(value);
-}
-//#endregion
 //#region src/core/condition-builder.tsx
 const OPERATOR_LABELS = {
 	equals: "equals",
@@ -1734,7 +1663,7 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 						children: ["+ ", addGroupLabel]
 					}), previewCount != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						className: require_text_truncate.cn("text-text-secondary", "text-sm"),
-						children: [formatOptNumber(previewCount), " matches"]
+						children: [require_text_truncate.formatOptNumber(previewCount), " matches"]
 					})]
 				})
 			]
@@ -4471,6 +4400,12 @@ Object.defineProperty(exports, "Container", {
 		return Container;
 	}
 });
+Object.defineProperty(exports, "DescriptionList", {
+	enumerable: true,
+	get: function() {
+		return DescriptionList;
+	}
+});
 Object.defineProperty(exports, "DrawerClose", {
 	enumerable: true,
 	get: function() {
@@ -4549,6 +4484,12 @@ Object.defineProperty(exports, "Heading", {
 		return Heading;
 	}
 });
+Object.defineProperty(exports, "Identity", {
+	enumerable: true,
+	get: function() {
+		return Identity;
+	}
+});
 Object.defineProperty(exports, "InlineEdit", {
 	enumerable: true,
 	get: function() {
@@ -4579,12 +4520,6 @@ Object.defineProperty(exports, "Logo", {
 		return Logo;
 	}
 });
-Object.defineProperty(exports, "Meter", {
-	enumerable: true,
-	get: function() {
-		return Meter;
-	}
-});
 Object.defineProperty(exports, "OtpField", {
 	enumerable: true,
 	get: function() {
@@ -4687,36 +4622,6 @@ Object.defineProperty(exports, "ShaderSurface", {
 		return ShaderSurface;
 	}
 });
-Object.defineProperty(exports, "Skeleton", {
-	enumerable: true,
-	get: function() {
-		return Skeleton;
-	}
-});
-Object.defineProperty(exports, "SkeletonAvatar", {
-	enumerable: true,
-	get: function() {
-		return SkeletonAvatar;
-	}
-});
-Object.defineProperty(exports, "SkeletonCard", {
-	enumerable: true,
-	get: function() {
-		return SkeletonCard;
-	}
-});
-Object.defineProperty(exports, "SkeletonTable", {
-	enumerable: true,
-	get: function() {
-		return SkeletonTable;
-	}
-});
-Object.defineProperty(exports, "SkeletonText", {
-	enumerable: true,
-	get: function() {
-		return SkeletonText;
-	}
-});
 Object.defineProperty(exports, "StepBuilder", {
 	enumerable: true,
 	get: function() {
@@ -4771,30 +4676,6 @@ Object.defineProperty(exports, "createBlock", {
 		return createBlock;
 	}
 });
-Object.defineProperty(exports, "formatOptDateTime", {
-	enumerable: true,
-	get: function() {
-		return formatOptDateTime;
-	}
-});
-Object.defineProperty(exports, "formatOptNumber", {
-	enumerable: true,
-	get: function() {
-		return formatOptNumber;
-	}
-});
-Object.defineProperty(exports, "formatOptShortDate", {
-	enumerable: true,
-	get: function() {
-		return formatOptShortDate;
-	}
-});
-Object.defineProperty(exports, "formatOptTime", {
-	enumerable: true,
-	get: function() {
-		return formatOptTime;
-	}
-});
 Object.defineProperty(exports, "getShaderFragment", {
 	enumerable: true,
 	get: function() {