@reopt-ai/opt-ui 1.9.0 → 1.11.0

package/dist/{highlight-C2sfnJN8.js → text-truncate-C17HHCR-.js}

@@ -3,8 +3,8 @@ import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
-import { AlertDialogPanel, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxPopover, ComboboxRoot, Composite, CompositeItem, CompositeProvider, CompositeRow, DialogDescription, DialogDisclosure, DialogDismiss, DialogHeading, DialogPanel, DialogRoot, DisclosureContent, DisclosureRoot, DisclosureTrigger, FormCheckbox, FormControl, FormDescription, FormError, FormField, FormGroup, FormGroupLabel, FormInput, FormLabel, FormProvider, FormPush, FormRadio, FormRadioGroup, FormRemove, FormReset, FormRoot, FormSubmit, FormSwitch, MenuButtonArrow, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuRoot, MenuSeparator, MenuTrigger, MenubarContainer, MenubarRoot, PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger, SelectItem, SelectLabel, SelectPopover, SelectRoot, SelectTrigger, Tab, TabList, TabPanel, TabsRoot, ToolbarButton, ToolbarContainer, ToolbarRoot, ToolbarSeparator, Tooltip, TooltipAnchor, TooltipProvider, useFieldValue, useFormContext, useFormStore } from "@reopt-ai/opt-ui-primitives";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { AlertDialogPanel, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxPopover, ComboboxRoot, Composite, CompositeItem, CompositeProvider, CompositeRow, DialogDescription, DialogDisclosure, DialogDismiss, DialogHeading, DialogPanel, DialogRoot, DisclosureContent, DisclosureRoot, DisclosureTrigger, FormCheckbox, FormControl, FormDescription, FormError, FormField, FormGroup, FormGroupLabel, FormInput, FormLabel, FormProvider, FormPush, FormRadio, FormRadioGroup, FormRemove, FormReset, FormRoot, FormSubmit, FormSwitch, MenuButtonArrow, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuRoot, MenuSeparator, MenuTrigger, MenubarContainer, MenubarRoot, Meter, PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger, SelectItem, SelectLabel, SelectPopover, SelectRoot, SelectTrigger, Tab, TabList, TabPanel, TabsRoot, ToolbarButton, ToolbarContainer, ToolbarRoot, ToolbarSeparator, Tooltip, TooltipAnchor, TooltipProvider, useFieldValue, useFormContext, useFormStore } from "@reopt-ai/opt-ui-primitives";
 import { AtSign, Bell, Binary, Braces, Brackets, Calendar, CalendarClock, CalendarDays, ChartColumn, Check, ChevronLeft, ChevronRight, CircleAlert, CircleCheck, CircleDollarSign, CircleHelp, CreditCard, Download, Eye, FileText, Fingerprint, Flag, Folder, Globe, Hash, Heart, Info, Layers, Link2, List, LogIn, Mail, MapPin, MessageCircle, MousePointerClick, Network, Percent, Search, Settings, Share2, ShoppingCart, Sigma, Star, Timer, ToggleLeft, TrendingUp, TriangleAlert, Type, Upload, User, UserPlus, XCircle, Zap } from "lucide-react";
 //#region src/lib/cn.ts
 /** Handles cn. */
@@ -120,6 +120,7 @@ const OPT_HOVER_ITEM = "[@media(any-hover:hover)]:hover:bg-accent-subtle active:
 const OPT_BORDER = "border border-border";
 const OPT_DIVIDER = "divide-border-subtle";
 const OPT_SURFACE = "rounded-lg bg-surface shadow-sm";
+const OPT_SURFACE_RAISED = "rounded-xl bg-surface-raised shadow-md";
 const OPT_SURFACE_POPOVER = "z-50 rounded-lg border border-border bg-surface-overlay p-2 shadow-lg";
 const OPT_TEXT_PRIMARY = "text-text-primary";
 const OPT_TEXT_SECONDARY = "text-text-secondary";
@@ -218,44 +219,230 @@ function useControlledState(defaultValue, controlledValue, onChange) {
 	}, [isControlled, onChange])];
 }
 //#endregion
+//#region src/core/skeleton.tsx
+const _excluded$17 = [
+	"variant",
+	"width",
+	"height",
+	"lines",
+	"animated",
+	"className",
+	"style"
+];
+const _excluded2$9 = ["lines", "className"];
+const _excluded3$8 = ["size", "className"];
+const _excluded4$6 = ["className"];
+const variantStyles$4 = {
+	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 = _objectWithoutProperties(_ref, _excluded$17);
+	const baseClass = cn("bg-bg-subtle", animated && "animate-pulse", variantStyles$4[variant], className);
+	const computedStyle = _objectSpread2({
+		width: typeof width === "number" ? `${width}px` : width,
+		height: typeof height === "number" ? `${height}px` : height
+	}, style);
+	if (variant === "text" && lines > 1) return /* @__PURE__ */ 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__ */ jsx("div", _objectSpread2({
+			className: cn(baseClass, i === lines - 1 && "w-4/5"),
+			style: i === lines - 1 ? void 0 : computedStyle
+		}, props), i)), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Loading..."
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({
+		className: baseClass,
+		style: computedStyle,
+		role: "status",
+		"aria-label": "Loading"
+	}, props), {}, {
+		"data-opt-id": "EJT87",
+		"data-opt-slug": "skeleton.Skeleton",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Loading..."
+		})
+	}));
+}
+/** Renders the skeleton text component. */
+function SkeletonText(_ref2) {
+	let { lines = 3, className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$9);
+	return /* @__PURE__ */ jsx(Skeleton, _objectSpread2(_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 = _objectWithoutProperties(_ref3, _excluded3$8);
+	return /* @__PURE__ */ jsx(Skeleton, _objectSpread2(_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 = _objectWithoutProperties(_ref4, _excluded4$6);
+	return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({ className: cn("gap-group flex flex-col", className) }, props), {}, {
+		"data-opt-id": "34V5D",
+		"data-opt-slug": "skeleton.SkeletonCard",
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, {
+				variant: "rectangular",
+				height: 120
+			}),
+			/* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				width: "60%"
+			}),
+			/* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				lines: 2
+			})
+		]
+	}));
+}
+/** Renders the skeleton table component. */
+function SkeletonTable({ rows = 5, columns = 4, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("gap-element flex flex-col", className),
+		role: "status",
+		"aria-label": "Loading table",
+		"data-opt-id": "3KEDN",
+		"data-opt-slug": "skeleton.SkeletonTable",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "border-border-subtle gap-group flex border-b pb-2",
+				children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, {
+					variant: "text",
+					className: "flex-1",
+					height: 16
+				}, i))
+			}),
+			Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx("div", {
+				className: "gap-group flex py-2",
+				children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ jsx(Skeleton, {
+					variant: "text",
+					className: "flex-1",
+					height: 14
+				}, colIndex))
+			}, rowIndex)),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Loading..."
+			})
+		]
+	});
+}
+//#endregion
 //#region src/core/stat-card.tsx
+const TREND_GLYPH = {
+	up: "↑",
+	down: "↓",
+	neutral: "→"
+};
+/**
+* Colour follows meaning, not direction. A rising bounce rate is a fall in
+* quality, so a card declaring `polarity: "negative"` inverts the palette
+* rather than congratulating the reader on a worse number.
+*/
+function deltaToneClass(trend, polarity) {
+	if (trend === "neutral") return OPT_TEXT_TERTIARY;
+	return (polarity === "positive" ? trend === "up" : trend === "down") ? "text-success-fg" : "text-danger-fg";
+}
+function sparkStroke(trend, polarity) {
+	if (!trend || trend === "neutral") return "var(--opt-chart-1)";
+	return (polarity === "positive" ? trend === "up" : trend === "down") ? "var(--opt-chart-diverging-positive)" : "var(--opt-chart-diverging-negative)";
+}
 /** Renders the stat card component. */
-function StatCard({ title, value, change, trend, sparklineData, className }) {
-	const trendColor = trend === "up" ? "text-success-fg" : trend === "down" ? "text-danger-fg" : "text-text-tertiary";
-	const trendIcon = trend === "up" ? "↑" : trend === "down" ? "↓" : "→";
-	const sparkColor = trend === "up" ? "var(--opt-chart-diverging-positive)" : trend === "down" ? "var(--opt-chart-diverging-negative)" : "var(--opt-chart-1)";
-	return /* @__PURE__ */ jsx("div", {
-		className: cn(OPT_SURFACE, OPT_BORDER, "flex flex-col gap-1 p-5", className),
-		"data-opt-id": "GAX47",
-		"data-opt-slug": "stat-card.StatCard",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex items-start justify-between gap-4",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 flex-col gap-1",
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: cn(OPT_TEXT_SECONDARY, "truncate text-sm"),
-						children: title
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: cn(OPT_TEXT_PRIMARY, "text-2xl font-bold"),
-						children: value
-					}),
-					/* @__PURE__ */ jsxs("span", {
-						className: cn("text-sm font-medium", trendColor),
-						children: [
-							trendIcon,
-							" ",
-							change
-						]
-					})
-				]
-			}), sparklineData && sparklineData.length > 1 && /* @__PURE__ */ jsx(MiniSparkline, {
-				data: sparklineData,
-				color: sparkColor
-			})]
-		})
+function StatCard({ title, value, change, trend, polarity = "positive", description, hint, sparklineData, size = "md", loading = false, href, onSelect, selected = false, className }) {
+	const titleId = React.useId();
+	const hintId = React.useId();
+	const hasDelta = Boolean(change) && trend !== void 0;
+	const interactive = Boolean(href || onSelect);
+	const body = loading ? /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-32" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-20" })
+		]
+	}) : /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start justify-between gap-4",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-1",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					id: titleId,
+					className: cn(OPT_TEXT_SECONDARY, "truncate text-sm"),
+					children: title
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cn(OPT_TEXT_PRIMARY, "font-bold tabular-nums", size === "sm" ? "text-xl" : "text-2xl"),
+					children: value
+				}),
+				hasDelta && /* @__PURE__ */ jsxs("span", {
+					className: cn("text-sm font-medium tabular-nums", deltaToneClass(trend, polarity)),
+					children: [
+						TREND_GLYPH[trend],
+						" ",
+						change
+					]
+				}),
+				description && /* @__PURE__ */ jsx("span", {
+					className: cn("text-text-tertiary", "text-xs"),
+					children: description
+				}),
+				hint && /* @__PURE__ */ jsx("span", {
+					id: hintId,
+					className: "sr-only",
+					children: hint
+				})
+			]
+		}), sparklineData && sparklineData.length > 1 && /* @__PURE__ */ jsx(MiniSparkline, {
+			data: sparklineData,
+			color: sparkStroke(trend, polarity)
+		})]
 	});
+	const shared = {
+		className: cn(OPT_SURFACE, OPT_BORDER, "flex flex-col gap-1", size === "sm" ? "p-4" : "p-5", interactive && [
+			"hover:border-border-hover",
+			"outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset",
+			"cursor-pointer text-left transition-colors"
+		], selected && "border-accent", className),
+		title: hint,
+		"aria-describedby": hint ? hintId : void 0,
+		"data-opt-id": "GAX47",
+		"data-opt-slug": "stat-card.StatCard"
+	};
+	if (href) return /* @__PURE__ */ jsx("a", _objectSpread2(_objectSpread2({
+		href,
+		"aria-current": selected ? "true" : void 0
+	}, shared), {}, { children: body }));
+	if (onSelect) return /* @__PURE__ */ jsx("button", _objectSpread2(_objectSpread2({
+		type: "button",
+		onClick: onSelect,
+		"aria-pressed": selected
+	}, shared), {}, { children: body }));
+	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({}, shared), {}, { children: body }));
 }
 function MiniSparkline({ data, color }) {
 	const width = 80;
@@ -307,7 +494,7 @@ const koBreadcrumbLabels = {
 navAriaLabel: "{label}(으)로 이동" };
 //#endregion
 //#region src/core/button.tsx
-const _excluded$15 = [
+const _excluded$16 = [
 	"variant",
 	"size",
 	"loading",
@@ -318,24 +505,24 @@ const _excluded$15 = [
 	"children",
 	"aria-busy"
 ];
-const variantStyles$2 = {
+const variantStyles$3 = {
 	primary: "bg-accent text-accent-fg hover:bg-accent-hover active:bg-accent-active focus-visible:ring-offset-2",
 	secondary: "border border-border bg-surface text-text-primary hover:bg-bg-subtle active:bg-bg-muted focus-visible:ring-offset-1",
 	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$4 = {
+const sizeStyles$5 = {
 	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$15);
+	let { variant = "primary", size = "md", loading = false, leftIcon, rightIcon, className, disabled, children, "aria-busy": ariaBusy } = _ref, props = _objectWithoutProperties(_ref, _excluded$16);
 	const isDisabled = disabled || loading;
 	return /* @__PURE__ */ 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$2[variant], sizeStyles$4[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$5[size], isDisabled && "pointer-events-none cursor-not-allowed opacity-50", className),
 		disabled: isDisabled
 	}, props), {}, {
 		"aria-busy": loading ? true : ariaBusy,
@@ -377,44 +564,68 @@ const iconSizeClasses = {
 	md: "text-4xl",
 	lg: "text-5xl"
 };
+const titleSizeClasses = {
+	sm: "text-base font-semibold",
+	md: "text-lg font-semibold",
+	lg: "text-xl font-semibold"
+};
+const iconToneClasses = {
+	default: OPT_TEXT_TERTIARY,
+	subdued: OPT_TEXT_TERTIARY,
+	error: "text-danger-fg"
+};
+function isActionList(actions) {
+	return Array.isArray(actions) && actions.every((entry) => typeof entry === "object" && entry !== null && "onClick" in entry);
+}
 /** Renders the empty state component. */
-function EmptyState({ icon, title, description, actions, className, iconSize = "md", headingLevel = "h3" }) {
+function EmptyState({ icon, title, description, body, footer, actions, className, iconSize = "md", headingLevel = "h3", titleSize = "md", layout = "vertical", hasBorder = false, tone = "default" }) {
 	const HeadingTag = headingLevel;
+	const horizontal = layout === "horizontal";
+	const hasActions = isActionList(actions) ? actions.length > 0 : Boolean(actions);
 	return /* @__PURE__ */ jsxs("div", {
-		role: "status",
+		role: tone === "error" ? "alert" : "status",
 		"aria-label": title,
-		className: cn("flex flex-col items-center justify-center px-4 py-12 text-center", className),
-		"data-opt-id": "5ZK92",
+		className: cn("flex px-4 py-12", horizontal ? "flex-row items-center justify-center gap-8 text-left" : "flex-col items-center justify-center text-center", hasBorder && ["border border-border", "rounded-xl"], tone === "subdued" && "bg-bg-subtle", className),
+		"data-opt-id": "MZV19",
 		"data-opt-slug": "empty-state.EmptyState",
-		children: [
-			icon && /* @__PURE__ */ jsx("div", {
-				className: cn(`mb-4 text-text-tertiary`, iconSizeClasses[iconSize]),
-				"aria-hidden": "true",
-				children: icon
-			}),
-			/* @__PURE__ */ jsx(HeadingTag, {
-				className: `text-lg font-semibold ${OPT_TEXT_PRIMARY}`,
-				children: title
-			}),
-			description && /* @__PURE__ */ jsx("p", {
-				className: `mt-2 max-w-sm text-sm text-text-secondary`,
-				children: description
-			}),
-			actions && actions.length > 0 && /* @__PURE__ */ jsx("div", {
-				className: "mt-6 flex items-center gap-3",
-				children: actions.map((action) => /* @__PURE__ */ jsx(Button, {
-					onClick: action.onClick,
-					disabled: action.disabled,
-					variant: action.variant === "secondary" ? "secondary" : "primary",
-					children: action.label
-				}, action.id))
-			})
-		]
+		children: [icon && /* @__PURE__ */ jsx("div", {
+			className: cn(iconToneClasses[tone], iconSizeClasses[iconSize], horizontal ? "shrink-0" : "mb-4"),
+			"aria-hidden": "true",
+			children: icon
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn("flex flex-col", horizontal ? "items-start" : "items-center"),
+			children: [
+				/* @__PURE__ */ jsx(HeadingTag, {
+					className: cn(titleSizeClasses[titleSize], OPT_TEXT_PRIMARY),
+					children: title
+				}),
+				body ? /* @__PURE__ */ jsx("div", {
+					className: cn("mt-2 max-w-md text-sm", OPT_TEXT_SECONDARY),
+					children: body
+				}) : description && /* @__PURE__ */ jsx("p", {
+					className: cn("mt-2 max-w-sm text-sm", "text-text-secondary"),
+					children: description
+				}),
+				hasActions && /* @__PURE__ */ jsx("div", {
+					className: cn("mt-6 flex flex-wrap items-center gap-3", !horizontal && "justify-center"),
+					children: isActionList(actions) ? actions.map((action) => /* @__PURE__ */ jsx(Button, {
+						onClick: action.onClick,
+						disabled: action.disabled,
+						variant: action.variant === "secondary" ? "secondary" : "primary",
+						children: action.label
+					}, action.id)) : actions
+				}),
+				footer && /* @__PURE__ */ jsx("div", {
+					className: cn("border-border-subtle mt-6 w-full border-t pt-4 text-sm", "text-text-tertiary"),
+					children: footer
+				})
+			]
+		})]
 	});
 }
 //#endregion
 //#region src/core/badge.tsx
-const _excluded$14 = [
+const _excluded$15 = [
 	"variant",
 	"size",
 	"dot",
@@ -423,7 +634,7 @@ const _excluded$14 = [
 	"className",
 	"children"
 ];
-const variantStyles$1 = {
+const variantStyles$2 = {
 	default: "bg-bg-subtle text-text-secondary",
 	success: "bg-success-subtle text-success-fg",
 	warning: "bg-warning-subtle text-warning-fg",
@@ -444,19 +655,19 @@ const progressStroke = {
 	error: "stroke-danger",
 	info: "stroke-info"
 };
-const sizeStyles$3 = {
+const sizeStyles$4 = {
 	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$14);
+	let { variant = "default", size = "md", dot = false, progress, progressSize = 16, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$15);
 	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__ */ jsxs("span", _objectSpread2(_objectSpread2({ className: cn(OPT_BADGE, variantStyles$1[variant], sizeStyles$3[size], className) }, props), {}, {
+	return /* @__PURE__ */ jsxs("span", _objectSpread2(_objectSpread2({ className: cn(OPT_BADGE, variantStyles$2[variant], sizeStyles$4[size], className) }, props), {}, {
 		"data-opt-id": "9GBGZ",
 		"data-opt-slug": "badge.Badge",
 		children: [
@@ -496,24 +707,24 @@ function Badge(_ref) {
 }
 //#endregion
 //#region src/core/spinner.tsx
-const _excluded$13 = [
+const _excluded$14 = [
 	"size",
 	"className",
 	"role",
 	"aria-hidden",
 	"aria-label"
 ];
-const sizeStyles$2 = {
+const sizeStyles$3 = {
 	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$13);
+	let { size = "md", className, role, "aria-hidden": ariaHidden, "aria-label": ariaLabel } = _ref, props = _objectWithoutProperties(_ref, _excluded$14);
 	const isDecorative = ariaHidden === true || ariaHidden === "true";
 	return /* @__PURE__ */ jsxs("svg", _objectSpread2(_objectSpread2({
-		className: cn("animate-spin text-current", sizeStyles$2[size], className),
+		className: cn("animate-spin text-current", sizeStyles$3[size], className),
 		viewBox: "0 0 24 24",
 		fill: "none",
 		role: isDecorative ? void 0 : role !== null && role !== void 0 ? role : "status",
@@ -538,7 +749,7 @@ function Spinner(_ref) {
 }
 //#endregion
 //#region src/core/alert.tsx
-const _excluded$12 = [
+const _excluded$13 = [
 	"variant",
 	"title",
 	"icon",
@@ -547,7 +758,7 @@ const _excluded$12 = [
 	"className",
 	"children"
 ];
-const variantStyles = {
+const variantStyles$1 = {
 	info: "border-info bg-info-subtle text-info-fg",
 	success: "border-success bg-success-subtle text-success-fg",
 	warning: "border-warning bg-warning-subtle text-warning-fg",
@@ -607,11 +818,11 @@ const defaultIcons = {
 };
 /** Renders the alert component. */
 function Alert(_ref) {
-	let { variant = "info", title, icon, dismissible = false, onDismiss, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$12);
+	let { variant = "info", title, icon, dismissible = false, onDismiss, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$13);
 	const displayIcon = icon !== null && icon !== void 0 ? icon : defaultIcons[variant];
 	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({
 		role: "alert",
-		className: cn("relative rounded-lg border p-4", variantStyles[variant], className)
+		className: cn("relative rounded-lg border p-4", variantStyles$1[variant], className)
 	}, props), {}, {
 		"data-opt-id": "4SPK6",
 		"data-opt-slug": "alert.Alert",
@@ -663,7 +874,7 @@ function useInputId(id, label, prefix) {
 }
 //#endregion
 //#region src/core/input.tsx
-const _excluded$11 = [
+const _excluded$12 = [
 	"label",
 	"error",
 	"hint",
@@ -678,7 +889,7 @@ const _excluded$11 = [
 const inputSizeStyles = OPT_INPUT_SIZE;
 const Input = 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$12);
 	const fallbackId = useId().replace(/:/g, "");
 	const inputId = (_useInputId = useInputId(id, label, "input")) !== null && _useInputId !== void 0 ? _useInputId : `input-${fallbackId}`;
 	const hasError = Boolean(error);
@@ -828,6 +1039,65 @@ function StarRating({ value = 0, onChange, max = 5, readOnly = false, size = "md
 	});
 }
 //#endregion
+//#region src/core/meter.tsx
+const _excluded$11 = [
+	"value",
+	"min",
+	"max",
+	"size",
+	"variant",
+	"showValue",
+	"label",
+	"getValueLabel",
+	"className"
+];
+const sizeStyles$2 = {
+	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$1(_ref) {
+	let { value, min = 0, max = 100, size = "md", variant = "default", showValue = false, label, getValueLabel, className } = _ref, props = _objectWithoutProperties(_ref, _excluded$11);
+	const clamped = Math.min(Math.max(value, min), max);
+	const percentage = max === min ? 0 : (clamped - min) / (max - min) * 100;
+	return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({ className: cn("w-full", className) }, props), {}, {
+		"data-opt-id": "G01TE",
+		"data-opt-slug": "meter.Meter",
+		children: [(showValue || label) && /* @__PURE__ */ jsxs("div", {
+			className: "mb-1.5 flex items-center justify-between text-sm",
+			children: [label && /* @__PURE__ */ jsx("span", {
+				className: "text-text-primary font-medium",
+				children: label
+			}), showValue && /* @__PURE__ */ jsxs("span", {
+				className: "text-text-tertiary",
+				children: [Math.round(percentage), "%"]
+			})]
+		}), /* @__PURE__ */ jsx(Meter, {
+			value: clamped,
+			min,
+			max,
+			getValueLabel,
+			"aria-label": label !== null && label !== void 0 ? label : `${Math.round(percentage)}%`,
+			className: cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$2[size]),
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("h-full rounded-full transition-all duration-300 ease-out", variantStyles[variant]),
+				style: { width: `${percentage}%` }
+			})
+		})]
+	}));
+}
+//#endregion
 //#region src/core/composite-zone.tsx
 /** Renders the composite zone component. */
 function CompositeZone({ children, label, focusLoop = true, focusWrap = true, className }) {
@@ -3510,6 +3780,55 @@ function FormDateRangePicker(_ref35) {
 	}));
 }
 //#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/checkbox.tsx
 const _excluded$1 = [
 	"label",
@@ -4097,6 +4416,134 @@ function Highlight({ text, search, caseSensitive = false, firstOnly = false, cla
 	});
 }
 //#endregion
-export { ToolbarContainer$1 as $, Spinner as $t, FormSelectPopover as A, OPT_INPUT as An, DialogPanel$1 as At, DEFAULT_PRESETS as B, OPT_TEXT_PRIMARY as Bn, TabsRoot$1 as Bt, FormRadio$1 as C, OPT_DOT_GRAY as Cn, DialogBody as Ct, FormRoot$1 as D, OPT_FOCUS as Dn, DialogFooter as Dt, FormReset$1 as E, OPT_DOT_YELLOW as En, DialogDismiss$1 as Et, FormTagInput as F, OPT_TABLE_ROW_ACTIVE as Fn, SelectRoot$1 as Ft, ColorPicker as G, _objectWithoutProperties as Gn, CompositeItem as Gt, TagInput as H, OPT_TEXT_TERTIARY as Hn, DisclosureRoot$1 as Ht, FormTextarea as I, OPT_TD as In, SelectTrigger$1 as It, PopoverRoot$1 as J, CompositeZone as Jt, PopoverClose$1 as K, Kbd as Kn, CompositeProvider as Kt, useFieldValue as L, OPT_TD_MUTED as Ln, Tab$1 as Lt, FormStarRating as M, OPT_ITEM_BASE as Mn, SelectItem$1 as Mt, FormSubmit$1 as N, OPT_SURFACE as Nn, SelectLabel$1 as Nt, FormSelect as O, OPT_FOCUS_VISIBLE as On, DialogHeader as Ot, FormSwitch$1 as P, OPT_SURFACE_POPOVER as Pn, SelectPopover$1 as Pt, ToolbarButton$1 as Q, Alert as Qt, useFormContext as R, OPT_TEXTAREA_SIZE as Rn, TabList$1 as Rt, FormPush$1 as S, OPT_DIVIDER as Sn, AlertDialogPanel$1 as St, FormRemove$1 as T, OPT_DOT_RED as Tn, DialogDisclosure$1 as Tt, IconPicker as U, OPT_TH as Un, DisclosureTrigger$1 as Ut, DateRangePicker as V, OPT_TEXT_SECONDARY as Vn, DisclosureContent$1 as Vt, getIconRegistryEntry as W, _objectSpread2 as Wn, Composite as Wt, Slider as X, Input as Xt, PopoverTrigger$1 as Y, StarRating as Yt, NumberInput as Z, useInputId as Zt, FormIconPicker as _, OPT_BADGE_RED as _n, ComboboxGroupLabel$1 as _t, Pagination as a, koStarRatingLabels as an, MenuButtonArrow$1 as at, FormNumberInput as b, OPT_DISCLOSURE_CONTENT as bn, ComboboxPopover$1 as bt, FormCheckbox$1 as c, FieldMessages as cn, MenuItemRadio$1 as ct, FormDateRangePicker as d, OPT_ACTIVE_ITEM as dn, MenuSeparator$1 as dt, Badge as en, ToolbarRoot$1 as et, FormDescription$1 as f, OPT_ANIMATE_DRAWER as fn, MenuTrigger$1 as ft, FormGroupLabel$1 as g, OPT_BADGE_NEUTRAL as gn, ComboboxGroup$1 as gt, FormGroup$1 as h, OPT_BADGE_GREEN as hn, ComboboxEmpty as ht, resolveFieldType as i, koComboboxLabels as in, TooltipProvider$1 as it, FormSlider as j, OPT_INPUT_ERROR as jn, DialogRoot$1 as jt, FormSelectItem as k, OPT_HOVER_ITEM as kn, DialogHeading$1 as kt, FormColorPicker as l, RequiredMark as ln, MenuPopover$1 as lt, FormField$1 as m, OPT_BADGE_BLUE as mn, MenubarRoot$1 as mt, FIELD_TYPE_TOKENS as n, Button as nn, Tooltip$1 as nt, Checkbox as o, StatCard as on, MenuItem$1 as ot, FormError$1 as p, OPT_ANIMATE_ENTER_EXIT as pn, MenubarContainer$1 as pt, PopoverContent$1 as q, cn as qn, CompositeRow as qt, FieldToken as r, koBreadcrumbLabels as rn, TooltipAnchor$1 as rt, CheckboxGroup as s, useControlledState as sn, MenuItemCheckbox$1 as st, Highlight as t, EmptyState as tn, ToolbarSeparator$1 as tt, FormControl$1 as u, getDescribedBy as un, MenuRoot$1 as ut, FormInput$1 as v, OPT_BADGE_YELLOW as vn, ComboboxInput$1 as vt, FormRadioGroup$1 as w, OPT_DOT_GREEN as wn, DialogDescription$1 as wt, FormProvider$1 as x, OPT_DISCLOSURE_TRIGGER as xn, ComboboxRoot$1 as xt, FormLabel$1 as y, OPT_BORDER as yn, ComboboxItem$1 as yt, useFormStore as z, OPT_TEXT_LABEL as zn, TabPanel$1 as zt };
+//#region src/core/text-truncate.tsx
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** Measures text in the element's own resolved font, not an assumed one. */
+function createMeasurer(element) {
+	const context = document.createElement("canvas").getContext("2d");
+	if (!context) return null;
+	const computed = window.getComputedStyle(element);
+	context.font = [
+		computed.fontStyle,
+		computed.fontVariant,
+		computed.fontWeight,
+		`${computed.fontSize}/${computed.lineHeight}`,
+		computed.fontFamily
+	].join(" ");
+	const spacing = Number.parseFloat(computed.letterSpacing) || 0;
+	return (value) => context.measureText(value).width + spacing * value.length;
+}
+/** Largest `n` in `[0, max]` for which `fits(n)` holds. */
+function largestFitting(max, fits) {
+	let low = 0;
+	let high = max;
+	while (low < high) {
+		const mid = Math.ceil((low + high) / 2);
+		if (fits(mid)) low = mid;
+		else high = mid - 1;
+	}
+	return low;
+}
+function truncateToWidth(text, side, ellipsis, available, measure) {
+	if (measure(text) <= available) return text;
+	const chars = Array.from(text);
+	if (side === "end") {
+		const keep = largestFitting(chars.length, (n) => measure(chars.slice(0, n).join("") + ellipsis) <= available);
+		return chars.slice(0, keep).join("") + ellipsis;
+	}
+	if (side === "start") {
+		const keep = largestFitting(chars.length, (n) => measure(ellipsis + chars.slice(chars.length - n).join("")) <= available);
+		return ellipsis + chars.slice(chars.length - keep).join("");
+	}
+	if (side === "startEnd") {
+		const keep = largestFitting(Math.floor(chars.length / 2), (n) => {
+			const head = chars.slice(0, n).join("");
+			const tail = chars.slice(chars.length - n).join("");
+			return measure(head + ellipsis + tail) <= available;
+		});
+		if (keep === 0) return ellipsis;
+		return chars.slice(0, keep).join("") + ellipsis + chars.slice(chars.length - keep).join("");
+	}
+	const span = largestFitting(chars.length, (n) => {
+		const start = Math.floor((chars.length - n) / 2);
+		return measure(ellipsis + chars.slice(start, start + n).join("") + ellipsis) <= available;
+	});
+	if (span === 0) return ellipsis;
+	const start = Math.floor((chars.length - span) / 2);
+	return ellipsis + chars.slice(start, start + span).join("") + ellipsis;
+}
+/**
+* TextTruncate — drops characters from the part of a string that identifies it
+* least.
+*
+* CSS can only cut the end. That is the wrong end for the strings analytics
+* shows most: two URLs that differ in their query string, two ids that share a
+* prefix, a stack frame whose filename is at the tail. This measures the real
+* text in the real font against the real available width and cuts where the
+* caller says.
+*
+* The full string stays in the accessibility tree and in `title`, so
+* truncation never costs the reader information — only space.
+*
+* @example
+* ```tsx
+* <TextTruncate text={event.url} truncation="startEnd" />
+* ```
+*/
+function TextTruncate({ text, truncation = "startEnd", ellipsis = "…", width, children, className }) {
+	const ref = useRef(null);
+	const [available, setAvailable] = useState(width !== null && width !== void 0 ? width : null);
+	useIsomorphicLayoutEffect(() => {
+		if (width !== void 0) {
+			setAvailable(width);
+			return;
+		}
+		const element = ref.current;
+		if (!element || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry) setAvailable(entry.contentRect.width);
+		});
+		observer.observe(element);
+		setAvailable(element.getBoundingClientRect().width);
+		return () => observer.disconnect();
+	}, [width]);
+	const [rendered, setRendered] = useState(text);
+	useIsomorphicLayoutEffect(() => {
+		const element = ref.current;
+		if (!element || available === null || available <= 0) {
+			setRendered(text);
+			return;
+		}
+		const measure = createMeasurer(element);
+		if (!measure) {
+			setRendered(text);
+			return;
+		}
+		setRendered(truncateToWidth(text, truncation, ellipsis, available, measure));
+	}, [
+		text,
+		truncation,
+		ellipsis,
+		available
+	]);
+	const truncated = rendered !== text;
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		className: cn("block w-full overflow-hidden whitespace-nowrap", className),
+		title: truncated ? text : void 0,
+		"data-opt-id": "Y6BGX",
+		"data-opt-slug": "text-truncate.TextTruncate",
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": truncated ? "true" : void 0,
+			children: children ? children(rendered) : rendered
+		}), truncated && /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: text
+		})]
+	});
+}
+//#endregion
+export { PopoverContent$1 as $, OPT_TEXT_PRIMARY as $n, CompositeRow as $t, FormRadioGroup$1 as A, OPT_BADGE_YELLOW as An, DialogDescription$1 as At, FormSwitch$1 as B, OPT_FOCUS_VISIBLE as Bn, SelectPopover$1 as Bt, FormIconPicker as C, OPT_ACTIVE_ITEM as Cn, ComboboxGroupLabel$1 as Ct, FormProvider$1 as D, OPT_BADGE_GREEN as Dn, ComboboxRoot$1 as Dt, FormNumberInput as E, OPT_BADGE_BLUE as En, ComboboxPopover$1 as Et, FormSelectItem as F, OPT_DOT_GRAY as Fn, DialogHeading$1 as Ft, useFormStore as G, OPT_SURFACE as Gn, TabPanel$1 as Gt, FormTextarea as H, OPT_INPUT as Hn, SelectTrigger$1 as Ht, FormSelectPopover as I, OPT_DOT_GREEN as In, DialogPanel$1 as It, TagInput as J, OPT_TABLE_ROW_ACTIVE as Jn, DisclosureRoot$1 as Jt, DEFAULT_PRESETS as K, OPT_SURFACE_POPOVER as Kn, TabsRoot$1 as Kt, FormSlider as L, OPT_DOT_RED as Ln, DialogRoot$1 as Lt, FormReset$1 as M, OPT_DISCLOSURE_CONTENT as Mn, DialogDismiss$1 as Mt, FormRoot$1 as N, OPT_DISCLOSURE_TRIGGER as Nn, DialogFooter as Nt, FormPush$1 as O, OPT_BADGE_NEUTRAL as On, AlertDialogPanel$1 as Ot, FormSelect as P, OPT_DIVIDER as Pn, DialogHeader as Pt, PopoverClose$1 as Q, OPT_TEXT_LABEL as Qn, CompositeProvider as Qt, FormStarRating as R, OPT_DOT_YELLOW as Rn, SelectItem$1 as Rt, FormGroupLabel$1 as S, getDescribedBy as Sn, ComboboxGroup$1 as St, FormLabel$1 as T, OPT_ANIMATE_ENTER_EXIT as Tn, ComboboxItem$1 as Tt, useFieldValue as U, OPT_INPUT_ERROR as Un, Tab$1 as Ut, FormTagInput as V, OPT_HOVER_ITEM as Vn, SelectRoot$1 as Vt, useFormContext as W, OPT_ITEM_BASE as Wn, TabList$1 as Wt, getIconRegistryEntry as X, OPT_TD_MUTED as Xn, Composite as Xt, IconPicker as Y, OPT_TD as Yn, DisclosureTrigger$1 as Yt, ColorPicker as Z, OPT_TEXTAREA_SIZE as Zn, CompositeItem as Zt, FormDateRangePicker as _, SkeletonTable as _n, MenuSeparator$1 as _t, resolveFieldType as a, Alert as an, Kbd as ar, ToolbarContainer$1 as at, FormField$1 as b, FieldMessages as bn, MenubarRoot$1 as bt, CheckboxGroup as c, EmptyState as cn, Tooltip$1 as ct, formatOptNumber as d, koComboboxLabels as dn, MenuButtonArrow$1 as dt, CompositeZone as en, OPT_TEXT_SECONDARY as er, PopoverRoot$1 as et, formatOptShortDate as f, koStarRatingLabels as fn, MenuItem$1 as ft, FormControl$1 as g, SkeletonCard as gn, MenuRoot$1 as gt, FormColorPicker as h, SkeletonAvatar as hn, MenuPopover$1 as ht, FieldToken as i, useInputId as in, _objectWithoutProperties as ir, ToolbarButton$1 as it, FormRemove$1 as j, OPT_BORDER as jn, DialogDisclosure$1 as jt, FormRadio$1 as k, OPT_BADGE_RED as kn, DialogBody as kt, OPT_UI_DEFAULT_LOCALE as l, Button as ln, TooltipAnchor$1 as lt, FormCheckbox$1 as m, Skeleton as mn, MenuItemRadio$1 as mt, Highlight as n, StarRating as nn, OPT_TH as nr, Slider as nt, Pagination as o, Spinner as on, cn as or, ToolbarRoot$1 as ot, formatOptTime as p, StatCard as pn, MenuItemCheckbox$1 as pt, DateRangePicker as q, OPT_SURFACE_RAISED as qn, DisclosureContent$1 as qt, FIELD_TYPE_TOKENS as r, Input as rn, _objectSpread2 as rr, NumberInput as rt, Checkbox as s, Badge as sn, ToolbarSeparator$1 as st, TextTruncate as t, Meter$1 as tn, OPT_TEXT_TERTIARY as tr, PopoverTrigger$1 as tt, formatOptDateTime as u, koBreadcrumbLabels as un, TooltipProvider$1 as ut, FormDescription$1 as v, SkeletonText as vn, MenuTrigger$1 as vt, FormInput$1 as w, OPT_ANIMATE_DRAWER as wn, ComboboxInput$1 as wt, FormGroup$1 as x, RequiredMark as xn, ComboboxEmpty as xt, FormError$1 as y, useControlledState as yn, MenubarContainer$1 as yt, FormSubmit$1 as z, OPT_FOCUS as zn, SelectLabel$1 as zt };
 
-//# sourceMappingURL=highlight-C2sfnJN8.js.map
+//# sourceMappingURL=text-truncate-C17HHCR-.js.map