@reopt-ai/opt-ui 1.5.0 → 1.7.0

package/dist/pagination-DWbvACuN.js

@@ -0,0 +1,3850 @@
+"use client";
+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 { Bell, CalendarDays, ChartColumn, Check, ChevronLeft, ChevronRight, CircleAlert, CircleCheck, CreditCard, Download, Eye, FileText, Flag, Folder, Globe, Heart, Info, Link2, LogIn, Mail, MessageCircle, MousePointerClick, Search, Settings, Share2, ShoppingCart, Star, TrendingUp, TriangleAlert, Upload, User, UserPlus, XCircle, Zap } from "lucide-react";
+//#region src/lib/cn.ts
+/** Handles cn. */
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+//#region src/core/kbd.tsx
+/** Renders the kbd component. */
+function Kbd({ children, hint = false, className }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		className: cn("border-border bg-bg-subtle text-text-tertiary inline-flex h-5 items-center gap-0.5 rounded border px-1.5 text-[11px] font-medium", hint && "opt-shortcut-hint", className),
+		"data-opt-id": "NPHB8",
+		"data-opt-slug": "kbd.Kbd",
+		children
+	});
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.146.0/helpers/esm/objectWithoutPropertiesLoose.js
+function _objectWithoutPropertiesLoose(r, e) {
+	if (null == r) return {};
+	var t = {};
+	for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+		if (e.includes(n)) continue;
+		t[n] = r[n];
+	}
+	return t;
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.146.0/helpers/esm/objectWithoutProperties.js
+function _objectWithoutProperties(e, t) {
+	if (null == e) return {};
+	var o, r, i = _objectWithoutPropertiesLoose(e, t);
+	if (Object.getOwnPropertySymbols) {
+		var s = Object.getOwnPropertySymbols(e);
+		for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+	}
+	return i;
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.146.0/helpers/esm/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.146.0/helpers/esm/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.146.0/helpers/esm/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.146.0/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.146.0/helpers/esm/objectSpread2.js
+function ownKeys(e, r) {
+	var t = Object.keys(e);
+	if (Object.getOwnPropertySymbols) {
+		var o = Object.getOwnPropertySymbols(e);
+		r && (o = o.filter(function(r) {
+			return Object.getOwnPropertyDescriptor(e, r).enumerable;
+		})), t.push.apply(t, o);
+	}
+	return t;
+}
+function _objectSpread2(e) {
+	for (var r = 1; r < arguments.length; r++) {
+		var t = null != arguments[r] ? arguments[r] : {};
+		r % 2 ? ownKeys(Object(t), !0).forEach(function(r) {
+			_defineProperty(e, r, t[r]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
+			Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+		});
+	}
+	return e;
+}
+//#endregion
+//#region src/lib/styles.ts
+/**
+* 공유 스타일 토큰 — Primitive 전체에서 중복되는 Tailwind 패턴을 상수화합니다.
+* 각 primitive는 이 토큰을 조합하고, 컴포넌트별 특수 스타일만 로컬에 정의합니다.
+*
+* CSS 변수 기반 — dark: prefix 불필요. 테마 프리셋이 모드별 값을 자동 해석합니다.
+*/
+const OPT_FOCUS = "outline-none data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-1";
+const OPT_FOCUS_VISIBLE = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset";
+const OPT_ACTIVE_ITEM = "data-[active-item]:bg-accent data-[active-item]:text-accent-fg";
+const OPT_HOVER_ITEM = "[@media(any-hover:hover)]:hover:bg-accent-subtle active:bg-accent-subtle";
+const OPT_BORDER = "border border-border";
+const OPT_DIVIDER = "divide-border-subtle";
+const OPT_SURFACE = "rounded-lg bg-surface shadow-sm";
+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";
+const OPT_TEXT_TERTIARY = "text-text-tertiary";
+const OPT_TEXT_LABEL = "text-sm font-medium text-text-primary";
+const OPT_ITEM_BASE = "cursor-default rounded px-2 py-2 text-sm outline-none text-text-primary";
+const OPT_INPUT = "flex h-10 w-full rounded-lg border border-border bg-surface px-4 text-sm text-text-primary outline-none placeholder:text-text-tertiary focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset";
+const OPT_INPUT_SIZE = {
+	sm: "h-8 px-3 text-xs",
+	md: "",
+	lg: "h-12 px-5 text-base"
+};
+const OPT_TEXTAREA_SIZE = {
+	sm: "px-3 py-2 text-xs",
+	md: "",
+	lg: "px-5 py-4 text-base"
+};
+const OPT_INPUT_ERROR = "border-danger focus-visible:outline-danger";
+const OPT_BADGE = "inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium";
+const OPT_BADGE_BLUE = `${OPT_BADGE} bg-info-subtle text-info-fg`;
+const OPT_BADGE_GREEN = `${OPT_BADGE} bg-success-subtle text-success-fg`;
+const OPT_BADGE_YELLOW = `${OPT_BADGE} bg-warning-subtle text-warning-fg`;
+const OPT_BADGE_RED = `${OPT_BADGE} bg-danger-subtle text-danger-fg`;
+const OPT_BADGE_NEUTRAL = `${OPT_BADGE} bg-bg-subtle text-text-secondary`;
+const OPT_BUTTON_PRIMARY = "inline-flex h-10 items-center justify-center rounded-lg bg-accent px-4 text-sm font-medium text-accent-fg outline-none hover:bg-accent-hover active:bg-accent-active focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
+const OPT_BUTTON_SECONDARY = "inline-flex h-10 items-center justify-center rounded-lg border border-border bg-surface px-4 text-sm font-medium text-text-primary outline-none hover:bg-bg-subtle active:bg-bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1";
+const OPT_TH = "px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wider text-text-tertiary";
+const OPT_TD = "px-3 py-2.5 text-sm text-text-primary whitespace-nowrap";
+const OPT_TD_MUTED = "px-3 py-2.5 text-sm text-text-tertiary whitespace-nowrap";
+const OPT_TABLE_ROW_ACTIVE = "outline-none data-[active-item]:bg-accent-subtle data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-1";
+const OPT_DISCLOSURE_TRIGGER = "flex w-full items-center justify-between px-4 py-3.5 text-left text-sm font-medium text-text-primary outline-none hover:underline decoration-border underline-offset-2 data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-2";
+const OPT_DISCLOSURE_CONTENT = "overflow-hidden data-[enter]:animate-in data-[enter]:fade-in data-[leave]:animate-out data-[leave]:fade-out";
+const OPT_ANIMATE_ENTER_EXIT = "data-[enter]:animate-in data-[enter]:fade-in data-[enter]:slide-in-from-top-1 data-[leave]:animate-out data-[leave]:fade-out";
+const OPT_ANIMATE_DIALOG = "data-[enter]:animate-in data-[enter]:fade-in data-[enter]:slide-in-from-top-2 data-[leave]:animate-out data-[leave]:fade-out data-[leave]:slide-out-to-top-2";
+/**
+* Drawer slide-in/out animations per side. ariakit `data-[enter]/data-[leave]`
+* 패턴으로 `animate-in/animate-out` + `slide-in-from-{side}` 조합을 노출한다.
+*
+* Drawer 컴포넌트가 직접 인라인으로 정의하지 않고 이 토큰을 참조하도록 일관화.
+*/
+const OPT_ANIMATE_DRAWER = {
+	right: "data-[enter]:animate-in data-[enter]:slide-in-from-right data-[leave]:animate-out data-[leave]:slide-out-to-right",
+	left: "data-[enter]:animate-in data-[enter]:slide-in-from-left data-[leave]:animate-out data-[leave]:slide-out-to-left",
+	bottom: "data-[enter]:animate-in data-[enter]:slide-in-from-bottom data-[leave]:animate-out data-[leave]:slide-out-to-bottom"
+};
+const OPT_DOT_GREEN = "h-2 w-2 rounded-full bg-success";
+const OPT_DOT_YELLOW = "h-2 w-2 rounded-full bg-warning";
+const OPT_DOT_RED = "h-2 w-2 rounded-full bg-danger";
+const OPT_DOT_GRAY = "h-2 w-2 rounded-full bg-bg-muted";
+//#endregion
+//#region src/lib/field-messages.tsx
+/**
+* Internal utilities for field label/error/hint rendering.
+* Not exported from the package — used only by Core components.
+*/
+/** Renders a red asterisk for required fields. */
+function RequiredMark() {
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-danger-fg ml-0.5",
+		"aria-hidden": "true",
+		children: "*"
+	});
+}
+/** Computes the aria-describedby value from error/hint state. */
+function getDescribedBy(id, error, hint) {
+	if (!id) return void 0;
+	if (error) return `${id}-error`;
+	if (hint) return `${id}-hint`;
+}
+/** Renders error or hint message below a field. Error takes priority. */
+function FieldMessages({ id, error, hint }) {
+	if (!error && !hint) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [error && /* @__PURE__ */ jsx("p", {
+		id: id ? `${id}-error` : void 0,
+		className: "text-danger-fg text-sm",
+		role: "alert",
+		children: error
+	}), hint && !error && /* @__PURE__ */ jsx("p", {
+		id: id ? `${id}-hint` : void 0,
+		className: "text-text-tertiary text-sm",
+		children: hint
+	})] });
+}
+//#endregion
+//#region src/lib/use-controlled-state.ts
+/**
+* Manages controlled/uncontrolled state for input components.
+* When `controlledValue` is provided, acts as controlled; otherwise uses internal state.
+*/
+function useControlledState(defaultValue, controlledValue, onChange) {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const isControlled = controlledValue !== void 0;
+	return [isControlled ? controlledValue : uncontrolledValue, useCallback((newValue) => {
+		if (!isControlled) setUncontrolledValue(newValue);
+		onChange === null || onChange === void 0 || onChange(newValue);
+	}, [isControlled, onChange])];
+}
+//#endregion
+//#region src/core/stat-card.tsx
+/** 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 MiniSparkline({ data, color }) {
+	const width = 80;
+	const height = 32;
+	const padding = 2;
+	const min = Math.min(...data);
+	const range = Math.max(...data) - min || 1;
+	const points = data.map((v, i) => {
+		return `${padding + i / (data.length - 1) * 76},${padding + (1 - (v - min) / range) * 28}`;
+	}).join(" ");
+	return /* @__PURE__ */ jsx("svg", {
+		width,
+		height,
+		viewBox: `0 0 ${width} ${height}`,
+		className: "flex-shrink-0 self-center",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("polyline", {
+			points,
+			fill: "none",
+			stroke: color,
+			strokeWidth: 1.5,
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+StatCard.displayName = "StatCard";
+//#endregion
+//#region src/i18n/ko.ts
+/**
+* opt-ui Korean default labels.
+*
+* Components consume these as defaults so consumers don't have to pass labels
+* for the most common case. Korean is the package default — other locales
+* should be imported explicitly (e.g. `enLabels`) and passed via component
+* props or wrapped with a labels provider.
+*/
+const koComboboxLabels = { empty: "결과가 없습니다." };
+const koStarRatingLabels = {
+	/** {value}/{max}점 — readonly fallback aria-label */
+	readonlyAriaLabel: "{value}/{max}점",
+	/** rating group aria-label */
+	groupAriaLabel: "별점",
+	/** {star}점 — individual star aria-label */
+	starAriaLabel: "{star}점"
+};
+const koBreadcrumbLabels = { 
+/** {label}(으)로 이동 */
+navAriaLabel: "{label}(으)로 이동" };
+//#endregion
+//#region src/core/button.tsx
+const _excluded$15 = [
+	"variant",
+	"size",
+	"loading",
+	"leftIcon",
+	"rightIcon",
+	"className",
+	"disabled",
+	"children",
+	"aria-busy"
+];
+const variantStyles$2 = {
+	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$3 = {
+	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);
+	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$3[size], isDisabled && "pointer-events-none cursor-not-allowed opacity-50", className),
+		disabled: isDisabled
+	}, props), {}, {
+		"aria-busy": loading ? true : ariaBusy,
+		"data-opt-id": "RGX84",
+		"data-opt-slug": "button.Button",
+		"data-opt-component": "button",
+		"data-opt-part": "root",
+		"data-variant": variant,
+		"data-size": size,
+		"data-state": loading ? "loading" : isDisabled ? "disabled" : "idle",
+		children: [
+			loading ? /* @__PURE__ */ jsxs("svg", {
+				className: "h-4 w-4 animate-spin",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ jsx("circle", {
+					className: "opacity-25",
+					cx: "12",
+					cy: "12",
+					r: "10",
+					stroke: "currentColor",
+					strokeWidth: "4"
+				}), /* @__PURE__ */ jsx("path", {
+					className: "opacity-75",
+					fill: "currentColor",
+					d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+				})]
+			}) : leftIcon,
+			children,
+			!loading && rightIcon
+		]
+	}));
+}
+//#endregion
+//#region src/core/empty-state.tsx
+const iconSizeClasses = {
+	sm: "text-3xl",
+	md: "text-4xl",
+	lg: "text-5xl"
+};
+/** Renders the empty state component. */
+function EmptyState({ icon, title, description, actions, className, iconSize = "md", headingLevel = "h3" }) {
+	const HeadingTag = headingLevel;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"aria-label": title,
+		className: cn("flex flex-col items-center justify-center px-4 py-12 text-center", className),
+		"data-opt-id": "5ZK92",
+		"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))
+			})
+		]
+	});
+}
+//#endregion
+//#region src/core/badge.tsx
+const _excluded$14 = [
+	"variant",
+	"size",
+	"dot",
+	"progress",
+	"progressSize",
+	"className",
+	"children"
+];
+const variantStyles$1 = {
+	default: "bg-bg-subtle text-text-secondary",
+	success: "bg-success-subtle text-success-fg",
+	warning: "bg-warning-subtle text-warning-fg",
+	error: "bg-danger-subtle text-danger-fg",
+	info: "bg-info-subtle text-info-fg"
+};
+const dotStyles = {
+	default: "bg-text-tertiary",
+	success: "bg-success",
+	warning: "bg-warning",
+	error: "bg-danger",
+	info: "bg-info"
+};
+const progressStroke = {
+	default: "stroke-text-tertiary",
+	success: "stroke-success",
+	warning: "stroke-warning",
+	error: "stroke-danger",
+	info: "stroke-info"
+};
+const sizeStyles$2 = {
+	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);
+	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$2[size], className) }, props), {}, {
+		"data-opt-id": "9GBGZ",
+		"data-opt-slug": "badge.Badge",
+		children: [
+			hasProgress && /* @__PURE__ */ jsxs("svg", {
+				width: progressSize,
+				height: progressSize,
+				viewBox: `0 0 ${progressSize} ${progressSize}`,
+				className: "mr-1 -ml-0.5 shrink-0",
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: progressSize / 2,
+					cy: progressSize / 2,
+					r: radius,
+					fill: "none",
+					strokeWidth: 2,
+					className: "stroke-current opacity-20"
+				}), /* @__PURE__ */ jsx("circle", {
+					cx: progressSize / 2,
+					cy: progressSize / 2,
+					r: radius,
+					fill: "none",
+					strokeWidth: 2,
+					strokeLinecap: "round",
+					strokeDasharray: circumference,
+					strokeDashoffset: offset,
+					className: cn(progressStroke[variant], "transition-all"),
+					transform: `rotate(-90 ${progressSize / 2} ${progressSize / 2})`
+				})]
+			}),
+			dot && !hasProgress && /* @__PURE__ */ jsx("span", {
+				className: cn("mr-1.5 h-1.5 w-1.5 rounded-full", dotStyles[variant]),
+				"aria-hidden": "true"
+			}),
+			children
+		]
+	}));
+}
+//#endregion
+//#region src/core/spinner.tsx
+const _excluded$13 = [
+	"size",
+	"className",
+	"role",
+	"aria-hidden",
+	"aria-label"
+];
+const sizeStyles$1 = {
+	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);
+	const isDecorative = ariaHidden === true || ariaHidden === "true";
+	return /* @__PURE__ */ jsxs("svg", _objectSpread2(_objectSpread2({
+		className: cn("animate-spin text-current", sizeStyles$1[size], className),
+		viewBox: "0 0 24 24",
+		fill: "none",
+		role: isDecorative ? void 0 : role !== null && role !== void 0 ? role : "status",
+		"aria-hidden": ariaHidden,
+		"aria-label": isDecorative ? void 0 : ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Loading"
+	}, props), {}, {
+		"data-opt-id": "DJS29",
+		"data-opt-slug": "spinner.Spinner",
+		children: [/* @__PURE__ */ jsx("circle", {
+			className: "opacity-25",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "4"
+		}), /* @__PURE__ */ jsx("path", {
+			className: "opacity-75",
+			fill: "currentColor",
+			d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+		})]
+	}));
+}
+//#endregion
+//#region src/core/alert.tsx
+const _excluded$12 = [
+	"variant",
+	"title",
+	"icon",
+	"dismissible",
+	"onDismiss",
+	"className",
+	"children"
+];
+const variantStyles = {
+	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",
+	error: "border-danger bg-danger-subtle text-danger-fg"
+};
+const iconColors = {
+	info: "text-info-fg",
+	success: "text-success-fg",
+	warning: "text-warning-fg",
+	error: "text-danger-fg"
+};
+const defaultIcons = {
+	info: /* @__PURE__ */ jsx("svg", {
+		className: "h-5 w-5",
+		viewBox: "0 0 20 20",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			fillRule: "evenodd",
+			d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
+			clipRule: "evenodd"
+		})
+	}),
+	success: /* @__PURE__ */ jsx("svg", {
+		className: "h-5 w-5",
+		viewBox: "0 0 20 20",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			fillRule: "evenodd",
+			d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",
+			clipRule: "evenodd"
+		})
+	}),
+	warning: /* @__PURE__ */ jsx("svg", {
+		className: "h-5 w-5",
+		viewBox: "0 0 20 20",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			fillRule: "evenodd",
+			d: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z",
+			clipRule: "evenodd"
+		})
+	}),
+	error: /* @__PURE__ */ jsx("svg", {
+		className: "h-5 w-5",
+		viewBox: "0 0 20 20",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			fillRule: "evenodd",
+			d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z",
+			clipRule: "evenodd"
+		})
+	})
+};
+/** Renders the alert component. */
+function Alert(_ref) {
+	let { variant = "info", title, icon, dismissible = false, onDismiss, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$12);
+	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)
+	}, props), {}, {
+		"data-opt-id": "4SPK6",
+		"data-opt-slug": "alert.Alert",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex",
+			children: [
+				displayIcon && /* @__PURE__ */ jsx("div", {
+					className: cn("flex-shrink-0", iconColors[variant]),
+					children: displayIcon
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: cn("flex-1", displayIcon && "ml-3"),
+					children: [title && /* @__PURE__ */ jsx("h3", {
+						className: "text-sm font-medium",
+						children: title
+					}), children && /* @__PURE__ */ jsx("div", {
+						className: cn("text-sm", title && "mt-1", "opacity-90"),
+						children
+					})]
+				}),
+				dismissible && /* @__PURE__ */ jsx("div", {
+					className: "ml-auto pl-3",
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onDismiss,
+						className: cn("hover:bg-bg-subtle inline-flex rounded-md p-1.5 transition-colors", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+						"aria-label": "Dismiss",
+						children: /* @__PURE__ */ jsx("svg", {
+							className: "h-4 w-4",
+							viewBox: "0 0 20 20",
+							fill: "currentColor",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
+						})
+					})
+				})
+			]
+		})
+	}));
+}
+//#endregion
+//#region src/lib/use-input-id.ts
+/**
+* Generates a stable component ID from label text.
+* Eliminates the duplicated `id ?? label?.replace(...)` pattern across input components.
+*/
+function useInputId(id, label, prefix) {
+	return id !== null && id !== void 0 ? id : label ? `${prefix}-${label.replace(/\s+/g, "-").toLowerCase()}` : void 0;
+}
+//#endregion
+//#region src/core/input.tsx
+const _excluded$11 = [
+	"label",
+	"error",
+	"hint",
+	"leftIcon",
+	"rightIcon",
+	"fullWidth",
+	"size",
+	"required",
+	"className",
+	"id"
+];
+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);
+	const fallbackId = useId().replace(/:/g, "");
+	const inputId = (_useInputId = useInputId(id, label, "input")) !== null && _useInputId !== void 0 ? _useInputId : `input-${fallbackId}`;
+	const hasError = Boolean(error);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", fullWidth && "w-full"),
+		"data-opt-id": "7BY1Q",
+		"data-opt-slug": "input.Input",
+		children: [
+			label && /* @__PURE__ */ jsxs("label", {
+				htmlFor: inputId,
+				className: "text-text-primary text-sm font-medium",
+				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				children: [
+					leftIcon && /* @__PURE__ */ jsx("div", {
+						className: "text-text-tertiary pointer-events-none absolute top-1/2 left-3 -translate-y-1/2",
+						children: leftIcon
+					}),
+					/* @__PURE__ */ jsx("input", _objectSpread2({
+						ref,
+						id: inputId,
+						className: cn(OPT_INPUT, inputSizeStyles[size], leftIcon && (size === "sm" ? "pl-8" : "pl-10"), rightIcon && (size === "sm" ? "pr-8" : "pr-10"), hasError && "border-danger focus-visible:outline-danger", !fullWidth && "w-auto", className),
+						"aria-invalid": hasError,
+						"aria-required": required,
+						"aria-describedby": getDescribedBy(inputId, error, hint),
+						required
+					}, props)),
+					rightIcon && /* @__PURE__ */ jsx("div", {
+						className: "text-text-tertiary pointer-events-none absolute top-1/2 right-3 -translate-y-1/2",
+						children: rightIcon
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(FieldMessages, {
+				id: inputId,
+				error,
+				hint
+			})
+		]
+	});
+});
+Input.displayName = "Input";
+//#endregion
+//#region src/core/star-rating.tsx
+function interpolate(template, values) {
+	return template.replace(/\{(\w+)\}/g, (_, key) => key in values ? String(values[key]) : `{${key}}`);
+}
+const sizeMap = {
+	sm: "h-4 w-4",
+	md: "h-5 w-5",
+	lg: "h-6 w-6"
+};
+const gapMap = {
+	sm: "gap-0.5",
+	md: "gap-1",
+	lg: "gap-1"
+};
+function StarIcon({ filled, className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		className: cn(filled ? "fill-amber-400 text-amber-400" : "text-text-tertiary fill-none", className),
+		stroke: "currentColor",
+		strokeWidth: 1.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })
+	});
+}
+/** Renders the star rating component. */
+function StarRating({ value = 0, onChange, max = 5, readOnly = false, size = "md", className, ariaLabel }) {
+	const id = useId();
+	const [hovered, setHovered] = useState(null);
+	const displayValue = hovered !== null && hovered !== void 0 ? hovered : value;
+	const iconSize = sizeMap[size];
+	const gap = gapMap[size];
+	const handleClick = useCallback((star) => {
+		if (!readOnly && onChange) onChange(star);
+	}, [readOnly, onChange]);
+	const handleKeyDown = useCallback((e) => {
+		if (readOnly || !onChange) return;
+		if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+			e.preventDefault();
+			onChange(Math.min(value + 1, max));
+		} else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+			e.preventDefault();
+			onChange(Math.max(value - 1, 1));
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			onChange(1);
+		} else if (e.key === "End") {
+			e.preventDefault();
+			onChange(max);
+		}
+	}, [
+		readOnly,
+		onChange,
+		value,
+		max
+	]);
+	if (readOnly) return /* @__PURE__ */ jsx("div", {
+		className: cn("inline-flex items-center", gap, className),
+		role: "img",
+		"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : interpolate(koStarRatingLabels.readonlyAriaLabel, {
+			value,
+			max
+		}),
+		"data-opt-id": "B6ZY4",
+		"data-opt-slug": "star-rating.StarRating",
+		children: Array.from({ length: max }, (_, i) => /* @__PURE__ */ jsx(StarIcon, {
+			filled: i < value,
+			className: iconSize
+		}, i))
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("inline-flex items-center", gap, className),
+		role: "radiogroup",
+		"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : koStarRatingLabels.groupAriaLabel,
+		onKeyDown: handleKeyDown,
+		onMouseLeave: () => setHovered(null),
+		"data-opt-id": "B6ZY4",
+		"data-opt-slug": "star-rating.StarRating",
+		children: [Array.from({ length: max }, (_, i) => {
+			const star = i + 1;
+			const checked = star === value;
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "radio",
+				"aria-checked": checked,
+				"aria-label": interpolate(koStarRatingLabels.starAriaLabel, { star }),
+				tabIndex: checked || value === 0 && i === 0 ? 0 : -1,
+				className: cn("cursor-pointer rounded-sm transition-transform", "focus-visible:outline-accent hover:scale-110 focus-visible:outline-2 focus-visible:outline-offset-2"),
+				onClick: () => handleClick(star),
+				onMouseEnter: () => setHovered(star),
+				children: /* @__PURE__ */ jsx(StarIcon, {
+					filled: i < displayValue,
+					className: iconSize
+				})
+			}, i);
+		}), /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name: `${id}-rating`,
+			value
+		})]
+	});
+}
+//#endregion
+//#region src/core/composite-zone.tsx
+/** Renders the composite zone component. */
+function CompositeZone({ children, label, focusLoop = true, focusWrap = true, className }) {
+	return /* @__PURE__ */ jsx(CompositeProvider, {
+		focusLoop,
+		focusWrap,
+		"data-opt-id": "1JZXE",
+		"data-opt-slug": "composite-zone.CompositeZone",
+		children: /* @__PURE__ */ jsx(Composite, {
+			role: "grid",
+			"aria-label": label,
+			className,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/core/disclosure.tsx
+const _excluded$10 = ["className"];
+const _excluded2$8 = ["className"];
+const triggerClass$1 = `flex w-full cursor-pointer items-center justify-between px-4 py-4 text-left text-sm font-medium text-text-primary transition-colors hover:bg-bg-subtle ${OPT_FOCUS} data-[active-item]:bg-bg-subtle data-[disabled]:cursor-not-allowed`;
+const contentClass = `overflow-hidden ${OPT_ANIMATE_ENTER_EXIT}`;
+/** Renders the disclosure root component. */
+function DisclosureRoot$1(props) {
+	return /* @__PURE__ */ jsx(DisclosureRoot, _objectSpread2(_objectSpread2({ animated: true }, props), {}, {
+		"data-opt-id": "AS61F",
+		"data-opt-slug": "disclosure.DisclosureRoot"
+	}));
+}
+/** Renders the disclosure trigger component. */
+function DisclosureTrigger$1(_ref) {
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$10);
+	return /* @__PURE__ */ jsx(DisclosureTrigger, _objectSpread2(_objectSpread2({ className: cn(triggerClass$1, className) }, props), {}, {
+		"data-opt-id": "14EZW",
+		"data-opt-slug": "disclosure.DisclosureTrigger"
+	}));
+}
+/** Renders the disclosure content component. */
+function DisclosureContent$1(_ref2) {
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$8);
+	return /* @__PURE__ */ jsx(DisclosureContent, _objectSpread2(_objectSpread2({ className: cn(contentClass, className) }, props), {}, {
+		"data-opt-id": "78HYF",
+		"data-opt-slug": "disclosure.DisclosureContent"
+	}));
+}
+//#endregion
+//#region src/core/tabs.tsx
+const _excluded$9 = ["variant"];
+const _excluded2$7 = ["className", "actions"];
+const _excluded3$7 = [
+	"className",
+	"icon",
+	"status",
+	"statusLabel",
+	"children"
+];
+const _excluded4$5 = ["className"];
+const TabsVariantContext = React.createContext("underline");
+const tabClass = `cursor-pointer border-b-2 border-transparent px-4 py-2.5 text-sm text-text-tertiary transition-colors hover:text-text-primary data-[active-item]:text-text-primary data-[active-item]:border-text-primary data-[disabled]:cursor-not-allowed ${OPT_FOCUS}`;
+const tabListClass = "flex border-b border-border-subtle";
+const workspaceTabClass = `group relative inline-flex min-h-9 min-w-33 max-w-54 flex-none cursor-pointer items-center gap-element rounded-t-md border border-b-0 border-transparent px-group py-element font-mono text-xs text-text-tertiary transition-colors data-[disabled]:cursor-not-allowed [&:not([data-active-item]):hover]:bg-raised [&:not([data-active-item]):hover]:text-secondary data-[active-item]:z-10 data-[active-item]:-mb-px data-[active-item]:border-border data-[active-item]:bg-surface data-[active-item]:text-primary before:absolute before:inset-x-group before:top-0 before:h-0.5 before:rounded-b-sm before:bg-accent before:opacity-0 before:transition-opacity before:content-[''] data-[active-item]:before:opacity-100 ${OPT_FOCUS}`;
+const workspaceTabListClass = "flex min-w-0 flex-1 items-end gap-element overflow-x-auto px-element [scrollbar-width:thin]";
+const workspaceBarClass = "flex min-h-11 items-end border-b border-border bg-subtle pt-element";
+const workspaceActionsClass = "flex flex-none items-center gap-element self-stretch border-l border-border-subtle bg-subtle px-element";
+const barClass = "flex items-center justify-between gap-group";
+const actionsClass = "flex flex-none items-center gap-element";
+const tabPanelClass = `pt-4 ${OPT_FOCUS} data-[focus-visible]:rounded-lg`;
+/** Renders the tabs root component. */
+function TabsRoot$1(_ref) {
+	let { variant = "underline" } = _ref, props = _objectWithoutProperties(_ref, _excluded$9);
+	return /* @__PURE__ */ jsx(TabsVariantContext.Provider, {
+		value: variant,
+		children: /* @__PURE__ */ jsx(TabsRoot, _objectSpread2(_objectSpread2({}, props), {}, {
+			"data-opt-id": "DJ8K8",
+			"data-opt-slug": "tabs.TabsRoot"
+		}))
+	});
+}
+/** Renders the tab list component. */
+function TabList$1(_ref2) {
+	let { className, actions } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$7);
+	const variant = React.useContext(TabsVariantContext);
+	const list = /* @__PURE__ */ jsx(TabList, _objectSpread2(_objectSpread2({ className: cn(variant === "workspace" ? workspaceTabListClass : tabListClass, className) }, props), {}, {
+		"data-opt-id": "68K7E",
+		"data-opt-slug": "tabs.TabList"
+	}));
+	if (!actions) return list;
+	return /* @__PURE__ */ jsxs("div", {
+		className: variant === "workspace" ? workspaceBarClass : barClass,
+		children: [list, /* @__PURE__ */ jsx("div", {
+			className: variant === "workspace" ? workspaceActionsClass : actionsClass,
+			children: actions
+		})]
+	});
+}
+/** Renders the tab component. */
+function Tab$1(_ref3) {
+	let { className, icon, status, statusLabel, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$7);
+	const variant = React.useContext(TabsVariantContext);
+	const decorated = icon != null || status != null;
+	return /* @__PURE__ */ jsx(Tab, _objectSpread2(_objectSpread2({ className: cn(variant === "workspace" ? workspaceTabClass : tabClass, className) }, props), {}, {
+		"data-opt-id": "HZTNP",
+		"data-opt-slug": "tabs.Tab",
+		children: decorated ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			icon != null && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "text-text-tertiary group-data-[active-item]:text-accent flex flex-none items-center transition-colors",
+				children: icon
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate text-left",
+				children
+			}),
+			status != null && /* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-label": statusLabel,
+				className: cn("size-element flex-none rounded-full", status === "running" ? "bg-accent ring-accent-subtle ring-2" : "bg-text-tertiary")
+			})
+		] }) : children
+	}));
+}
+/** Renders the tab panel component. */
+function TabPanel$1(_ref4) {
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$5);
+	return /* @__PURE__ */ jsx(TabPanel, _objectSpread2(_objectSpread2({ className: cn(tabPanelClass, className) }, props), {}, {
+		"data-opt-id": "C0MBP",
+		"data-opt-slug": "tabs.TabPanel"
+	}));
+}
+//#endregion
+//#region src/core/select.tsx
+const _excluded$8 = [
+	"className",
+	"minWidth",
+	"style"
+];
+const _excluded2$6 = ["className"];
+const _excluded3$6 = ["className"];
+const triggerClass = `${OPT_INPUT} cursor-pointer items-center justify-between data-[disabled]:cursor-not-allowed ${OPT_FOCUS}`;
+const popoverClass$1 = `${OPT_SURFACE_POPOVER} ${OPT_ANIMATE_ENTER_EXIT} z-[120]`;
+const itemClass$1 = `flex cursor-pointer items-center gap-2 data-[disabled]:cursor-not-allowed ${OPT_ITEM_BASE} ${OPT_ACTIVE_ITEM}`;
+/** Renders the select root component. */
+function SelectRoot$1(props) {
+	return /* @__PURE__ */ jsx(SelectRoot, _objectSpread2(_objectSpread2({}, props), {}, {
+		"data-opt-id": "A5TYW",
+		"data-opt-slug": "select.SelectRoot"
+	}));
+}
+/** Renders the select label component. */
+function SelectLabel$1(props) {
+	return /* @__PURE__ */ jsx(SelectLabel, _objectSpread2(_objectSpread2({}, props), {}, {
+		"data-opt-id": "SKM59",
+		"data-opt-slug": "select.SelectLabel"
+	}));
+}
+/** Renders the select trigger component. */
+function SelectTrigger$1(_ref) {
+	let { className, minWidth = 140, style } = _ref, props = _objectWithoutProperties(_ref, _excluded$8);
+	return /* @__PURE__ */ jsx(SelectTrigger, _objectSpread2(_objectSpread2({
+		className: cn(triggerClass, className),
+		style: _objectSpread2({ minWidth: typeof minWidth === "number" ? `${minWidth}px` : minWidth }, style)
+	}, props), {}, {
+		"data-opt-id": "V6F86",
+		"data-opt-slug": "select.SelectTrigger"
+	}));
+}
+/** Renders the select popover component. */
+function SelectPopover$1(_ref2) {
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$6);
+	return /* @__PURE__ */ jsx(SelectPopover, _objectSpread2(_objectSpread2({ className: cn(popoverClass$1, className) }, props), {}, {
+		"data-opt-id": "P152F",
+		"data-opt-slug": "select.SelectPopover"
+	}));
+}
+/** Renders the select item component. */
+function SelectItem$1(_ref3) {
+	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$6);
+	return /* @__PURE__ */ jsx(SelectItem, _objectSpread2(_objectSpread2({ className: cn(itemClass$1, className) }, props), {}, {
+		"data-opt-id": "KKBAF",
+		"data-opt-slug": "select.SelectItem"
+	}));
+}
+//#endregion
+//#region src/core/dialog.tsx
+const _excluded$7 = ["className"];
+const _excluded2$5 = ["className", "size"];
+const _excluded3$5 = ["className", "size"];
+const _excluded4$4 = ["className"];
+const _excluded5$3 = ["className"];
+const _excluded6$2 = ["className"];
+const sizeClasses = {
+	xs: "max-w-xs",
+	sm: "max-w-sm",
+	md: "max-w-lg",
+	lg: "max-w-2xl",
+	xl: "max-w-4xl",
+	full: "max-w-[calc(100vw-2rem)]"
+};
+const panelBase = `fixed inset-auto left-1/2 top-[20%] z-50 m-0 w-full -translate-x-1/2 rounded-xl border border-border bg-surface p-0 shadow-2xl ${OPT_ANIMATE_DIALOG}`;
+/** Renders the dialog root component. */
+function DialogRoot$1(props) {
+	return /* @__PURE__ */ jsx(DialogRoot, _objectSpread2(_objectSpread2({ animated: true }, props), {}, {
+		"data-opt-id": "MDC91",
+		"data-opt-slug": "dialog.DialogRoot"
+	}));
+}
+/** Renders the dialog disclosure component. */
+function DialogDisclosure$1(_ref) {
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$7);
+	return /* @__PURE__ */ jsx(DialogDisclosure, _objectSpread2(_objectSpread2({ className: cn("inline-flex cursor-pointer items-center justify-center rounded-lg font-medium transition-colors", OPT_BUTTON_PRIMARY, OPT_FOCUS_VISIBLE, className) }, props), {}, {
+		"data-opt-id": "32QJK",
+		"data-opt-slug": "dialog.DialogDisclosure"
+	}));
+}
+/** Renders the dialog panel component. */
+function DialogPanel$1(_ref2) {
+	let { className, size = "md" } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$5);
+	return /* @__PURE__ */ jsx(DialogPanel, _objectSpread2(_objectSpread2({ className: cn(panelBase, sizeClasses[size], className) }, props), {}, {
+		"data-opt-id": "BTMTG",
+		"data-opt-slug": "dialog.DialogPanel"
+	}));
+}
+/**
+* A dialog that demands an explicit choice: `role="alertdialog"` with no
+* backdrop/Escape dismissal. Use for destructive confirmations. Compose with
+* the other Dialog parts (DialogRoot/Heading/Description/Dismiss/…).
+*/
+function AlertDialogPanel$1(_ref3) {
+	let { className, size = "sm" } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$5);
+	return /* @__PURE__ */ jsx(AlertDialogPanel, _objectSpread2(_objectSpread2({ className: cn(panelBase, sizeClasses[size], className) }, props), {}, {
+		"data-opt-id": "80HGS",
+		"data-opt-slug": "dialog.AlertDialogPanel"
+	}));
+}
+/** Renders the dialog heading component. */
+function DialogHeading$1(_ref4) {
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$4);
+	return /* @__PURE__ */ jsx(DialogHeading, _objectSpread2(_objectSpread2({ className: cn(`text-lg font-semibold ${OPT_TEXT_PRIMARY}`, className) }, props), {}, {
+		"data-opt-id": "4NW4H",
+		"data-opt-slug": "dialog.DialogHeading"
+	}));
+}
+/** Renders the dialog description component. */
+function DialogDescription$1(_ref5) {
+	let { className } = _ref5, props = _objectWithoutProperties(_ref5, _excluded5$3);
+	return /* @__PURE__ */ jsx(DialogDescription, _objectSpread2(_objectSpread2({ className: cn(`text-sm ${OPT_TEXT_SECONDARY}`, className) }, props), {}, {
+		"data-opt-id": "2BN3X",
+		"data-opt-slug": "dialog.DialogDescription"
+	}));
+}
+/** Renders the dialog dismiss component. */
+function DialogDismiss$1(_ref6) {
+	let { className } = _ref6, props = _objectWithoutProperties(_ref6, _excluded6$2);
+	return /* @__PURE__ */ jsx(DialogDismiss, _objectSpread2(_objectSpread2({ className: cn("hover:bg-bg-subtle rounded-md p-1.5 transition-colors", "cursor-pointer data-[disabled]:cursor-not-allowed", OPT_FOCUS, className) }, props), {}, {
+		"data-opt-id": "JXT0Y",
+		"data-opt-slug": "dialog.DialogDismiss"
+	}));
+}
+/** Renders the dialog header component. */
+function DialogHeader({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("border-border flex items-start justify-between gap-4 border-b px-6 py-4", className),
+		"data-opt-id": "K8NYY",
+		"data-opt-slug": "dialog.DialogHeader",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "gap-element flex min-w-0 flex-1 flex-col",
+			children
+		})
+	});
+}
+/** Renders the dialog body component. */
+function DialogBody({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex-1 overflow-y-auto px-6 py-4", className),
+		"data-opt-id": "EE32H",
+		"data-opt-slug": "dialog.DialogBody",
+		children
+	});
+}
+/** Renders the dialog footer component. */
+function DialogFooter({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("border-border gap-element flex items-center justify-end border-t px-6 py-4", className),
+		"data-opt-id": "AYQSR",
+		"data-opt-slug": "dialog.DialogFooter",
+		children
+	});
+}
+//#endregion
+//#region src/core/combobox.tsx
+const _excluded$6 = ["className"];
+const _excluded2$4 = ["className"];
+const _excluded3$4 = ["className"];
+const _excluded4$3 = ["className"];
+const inputClass$1 = `${OPT_INPUT} ${OPT_FOCUS}`;
+const popoverClass = `${OPT_SURFACE_POPOVER} max-h-60 overflow-y-auto ${OPT_ANIMATE_ENTER_EXIT}`;
+const itemClass = `${OPT_ITEM_BASE} ${OPT_ACTIVE_ITEM}`;
+const groupLabelClass = "px-2 py-1.5 text-xs font-medium text-text-tertiary";
+const emptyClass = "py-4 text-center text-sm text-text-tertiary";
+/** Renders the combobox root component. */
+function ComboboxRoot$1(props) {
+	return /* @__PURE__ */ jsx(ComboboxRoot, _objectSpread2(_objectSpread2({}, props), {}, {
+		"data-opt-id": "VACXX",
+		"data-opt-slug": "combobox.ComboboxRoot"
+	}));
+}
+/** Renders the combobox input component. */
+function ComboboxInput$1(_ref) {
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$6);
+	return /* @__PURE__ */ jsx(ComboboxInput, _objectSpread2(_objectSpread2({ className: cn(inputClass$1, className) }, props), {}, {
+		"data-opt-id": "92FZS",
+		"data-opt-slug": "combobox.ComboboxInput"
+	}));
+}
+/** Renders the combobox popover component. */
+function ComboboxPopover$1(_ref2) {
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$4);
+	return /* @__PURE__ */ jsx(ComboboxPopover, _objectSpread2(_objectSpread2({ className: cn(popoverClass, className) }, props), {}, {
+		"data-opt-id": "WS4PD",
+		"data-opt-slug": "combobox.ComboboxPopover"
+	}));
+}
+/** Renders the combobox item component. */
+function ComboboxItem$1(_ref3) {
+	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$4);
+	return /* @__PURE__ */ jsx(ComboboxItem, _objectSpread2(_objectSpread2({ className: cn(itemClass, className) }, props), {}, {
+		"data-opt-id": "MAZJN",
+		"data-opt-slug": "combobox.ComboboxItem"
+	}));
+}
+/** Renders the combobox group component. */
+function ComboboxGroup$1(props) {
+	return /* @__PURE__ */ jsx(ComboboxGroup, _objectSpread2(_objectSpread2({}, props), {}, {
+		"data-opt-id": "SPJQC",
+		"data-opt-slug": "combobox.ComboboxGroup"
+	}));
+}
+/** Renders the combobox group label component. */
+function ComboboxGroupLabel$1(_ref4) {
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$3);
+	return /* @__PURE__ */ jsx(ComboboxGroupLabel, _objectSpread2(_objectSpread2({ className: cn(groupLabelClass, className) }, props), {}, {
+		"data-opt-id": "512YF",
+		"data-opt-slug": "combobox.ComboboxGroupLabel"
+	}));
+}
+/** Renders the combobox empty component. */
+function ComboboxEmpty({ className, children = koComboboxLabels.empty }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn(emptyClass, className),
+		"data-opt-id": "RZ06M",
+		"data-opt-slug": "combobox.ComboboxEmpty",
+		children
+	});
+}
+//#endregion
+//#region src/core/menu.tsx
+const _excluded$5 = ["className"];
+const _excluded2$3 = ["className"];
+const _excluded3$3 = ["className"];
+const _excluded4$2 = ["className"];
+const _excluded5$2 = ["className"];
+const _excluded6$1 = ["className"];
+const _excluded7$1 = ["className"];
+const menuButtonClass = `inline-flex cursor-pointer items-center gap-1 rounded px-3 py-1.5 text-sm text-text-primary hover:bg-bg-subtle data-[active]:bg-bg-subtle data-[disabled]:cursor-not-allowed ${OPT_FOCUS}`;
+const menuPopoverClass = `${OPT_SURFACE_POPOVER} min-w-[180px] ${OPT_ANIMATE_ENTER_EXIT}`;
+const menuItemClass = `flex cursor-pointer items-center justify-between rounded-md px-2 py-1.5 text-sm text-text-primary outline-none data-[disabled]:cursor-not-allowed ${OPT_ACTIVE_ITEM}`;
+const menuSeparatorClass = "my-1 border-t border-border-subtle";
+const menubarClass = `${OPT_SURFACE} ${OPT_BORDER} flex items-center gap-1 px-1 py-1`;
+/** Renders the menubar root component. */
+function MenubarRoot$1(props) {
+	return /* @__PURE__ */ jsx(MenubarRoot, _objectSpread2(_objectSpread2({}, props), {}, {
+		"data-opt-id": "2ERC6",
+		"data-opt-slug": "menu.MenubarRoot"
+	}));
+}
+/** Renders the menubar container component. */
+function MenubarContainer$1(_ref) {
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$5);
+	return /* @__PURE__ */ jsx(MenubarContainer, _objectSpread2(_objectSpread2({ className: cn(menubarClass, className) }, props), {}, {
+		"data-opt-id": "4MVQT",
+		"data-opt-slug": "menu.MenubarContainer"
+	}));
+}
+/** Renders the menu root component. */
+function MenuRoot$1(props) {
+	return /* @__PURE__ */ jsx(MenuRoot, _objectSpread2(_objectSpread2({}, props), {}, {
+		"data-opt-id": "H2WRF",
+		"data-opt-slug": "menu.MenuRoot"
+	}));
+}
+/** Renders the menu trigger component. */
+function MenuTrigger$1(_ref2) {
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$3);
+	return /* @__PURE__ */ jsx(MenuTrigger, _objectSpread2(_objectSpread2({ className: cn(menuButtonClass, className) }, props), {}, {
+		"data-opt-id": "46BJG",
+		"data-opt-slug": "menu.MenuTrigger"
+	}));
+}
+/** Renders the menu button arrow component. */
+function MenuButtonArrow$1(props) {
+	return /* @__PURE__ */ jsx(MenuButtonArrow, _objectSpread2(_objectSpread2({}, props), {}, {
+		"data-opt-id": "J1AQH",
+		"data-opt-slug": "menu.MenuButtonArrow"
+	}));
+}
+/** Renders the menu popover component. */
+function MenuPopover$1(_ref3) {
+	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$3);
+	return /* @__PURE__ */ jsx(MenuPopover, _objectSpread2(_objectSpread2({ className: cn(menuPopoverClass, className) }, props), {}, {
+		"data-opt-id": "Q1MFY",
+		"data-opt-slug": "menu.MenuPopover"
+	}));
+}
+/** Renders the menu item component. */
+function MenuItem$1(_ref4) {
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$2);
+	return /* @__PURE__ */ jsx(MenuItem, _objectSpread2(_objectSpread2({ className: cn(menuItemClass, className) }, props), {}, {
+		"data-opt-id": "71JVB",
+		"data-opt-slug": "menu.MenuItem"
+	}));
+}
+/** Renders the menu item checkbox component. */
+function MenuItemCheckbox$1(_ref5) {
+	let { className } = _ref5, props = _objectWithoutProperties(_ref5, _excluded5$2);
+	return /* @__PURE__ */ jsx(MenuItemCheckbox, _objectSpread2(_objectSpread2({ className: cn(menuItemClass, className) }, props), {}, {
+		"data-opt-id": "DG8B3",
+		"data-opt-slug": "menu.MenuItemCheckbox"
+	}));
+}
+/** Renders the menu item radio component. */
+function MenuItemRadio$1(_ref6) {
+	let { className } = _ref6, props = _objectWithoutProperties(_ref6, _excluded6$1);
+	return /* @__PURE__ */ jsx(MenuItemRadio, _objectSpread2(_objectSpread2({ className: cn(menuItemClass, className) }, props), {}, {
+		"data-opt-id": "ZT759",
+		"data-opt-slug": "menu.MenuItemRadio"
+	}));
+}
+/** Renders the menu separator component. */
+function MenuSeparator$1(_ref7) {
+	let { className } = _ref7, props = _objectWithoutProperties(_ref7, _excluded7$1);
+	return /* @__PURE__ */ jsx(MenuSeparator, _objectSpread2(_objectSpread2({ className: cn(menuSeparatorClass, className) }, props), {}, {
+		"data-opt-id": "AJV8K",
+		"data-opt-slug": "menu.MenuSeparator"
+	}));
+}
+//#endregion
+//#region src/core/toolbar.tsx
+const _excluded$4 = ["className"];
+const _excluded2$2 = ["className"];
+const _excluded3$2 = ["className"];
+const _excluded4$1 = ["className"];
+const _excluded5$1 = ["className"];
+const toolbarClass = `${OPT_SURFACE} ${OPT_BORDER} inline-flex w-fit items-center gap-0.5 px-1.5 py-1`;
+const buttonClass = `cursor-pointer rounded-md px-2.5 py-1.5 text-text-primary transition-colors data-[disabled]:cursor-not-allowed ${OPT_ACTIVE_ITEM} ${OPT_FOCUS}`;
+const separatorClass = "mx-1 h-6 w-px bg-border-subtle";
+const tooltipClass = "z-50 rounded-md bg-foreground px-2 py-1 text-xs text-background shadow-lg";
+/** Renders the toolbar root component. */
+function ToolbarRoot$1(props) {
+	return /* @__PURE__ */ jsx(ToolbarRoot, _objectSpread2(_objectSpread2({}, props), {}, {
+		"data-opt-id": "V33Y0",
+		"data-opt-slug": "toolbar.ToolbarRoot"
+	}));
+}
+/** Renders the toolbar container component. */
+function ToolbarContainer$1(_ref) {
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$4);
+	return /* @__PURE__ */ jsx(ToolbarContainer, _objectSpread2(_objectSpread2({ className: cn(toolbarClass, className) }, props), {}, {
+		"data-opt-id": "2AVXB",
+		"data-opt-slug": "toolbar.ToolbarContainer"
+	}));
+}
+/** Renders the toolbar button component. */
+function ToolbarButton$1(_ref2) {
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$2);
+	return /* @__PURE__ */ jsx(ToolbarButton, _objectSpread2(_objectSpread2({ className: cn(buttonClass, className) }, props), {}, {
+		"data-opt-id": "C212C",
+		"data-opt-slug": "toolbar.ToolbarButton"
+	}));
+}
+/** Renders the toolbar separator component. */
+function ToolbarSeparator$1(_ref3) {
+	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$2);
+	return /* @__PURE__ */ jsx(ToolbarSeparator, _objectSpread2(_objectSpread2({ className: cn(separatorClass, className) }, props), {}, {
+		"data-opt-id": "9J72S",
+		"data-opt-slug": "toolbar.ToolbarSeparator"
+	}));
+}
+/** Renders the tooltip provider component. */
+function TooltipProvider$1(props) {
+	return /* @__PURE__ */ jsx(TooltipProvider, _objectSpread2(_objectSpread2({}, props), {}, {
+		"data-opt-id": "6NKHT",
+		"data-opt-slug": "toolbar.TooltipProvider"
+	}));
+}
+/** Renders the tooltip anchor component. */
+function TooltipAnchor$1(_ref4) {
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$1);
+	return /* @__PURE__ */ jsx(TooltipAnchor, _objectSpread2(_objectSpread2({ className }, props), {}, {
+		"data-opt-id": "SAW1B",
+		"data-opt-slug": "toolbar.TooltipAnchor"
+	}));
+}
+/** Renders the tooltip component. */
+function Tooltip$1(_ref5) {
+	let { className } = _ref5, props = _objectWithoutProperties(_ref5, _excluded5$1);
+	return /* @__PURE__ */ jsx(Tooltip, _objectSpread2(_objectSpread2({ className: cn(tooltipClass, className) }, props), {}, {
+		"data-opt-id": "XSAT4",
+		"data-opt-slug": "toolbar.Tooltip"
+	}));
+}
+//#endregion
+//#region src/core/number-input.tsx
+/** Number of decimal places a finite number is written with (handles exponents). */
+function decimalPlaces(n) {
+	if (!Number.isFinite(n)) return 0;
+	const s = String(n);
+	const exp = s.indexOf("e");
+	if (exp >= 0) {
+		const mantissa = s.slice(0, exp);
+		const dot = mantissa.indexOf(".");
+		const mantissaDecimals = dot >= 0 ? mantissa.length - dot - 1 : 0;
+		return Math.max(0, mantissaDecimals - Number(s.slice(exp + 1)));
+	}
+	const dot = s.indexOf(".");
+	return dot >= 0 ? s.length - dot - 1 : 0;
+}
+/**
+* Adds `delta` to `value` without binary floating-point drift (e.g. 0.1 + 0.2).
+* Rounds to the largest precision present among the operands and `step`.
+*/
+function addPrecise(value, delta, step) {
+	const decimals = Math.max(decimalPlaces(value), decimalPlaces(delta), decimalPlaces(step));
+	if (decimals === 0) return value + delta;
+	const factor = 10 ** Math.min(decimals, 15);
+	return Math.round((value + delta) * factor) / factor;
+}
+const NUMBER_PATTERN = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i;
+const PARTIAL_NUMBER_PATTERN = /^[+-]?$|^[+-]?\.$|^[+-]?(?:\d+\.?\d*|\.\d+)[eE][+-]?$/;
+function parseDraftValue(raw) {
+	const value = raw.trim();
+	if (value === "") return { kind: "empty" };
+	if (PARTIAL_NUMBER_PATTERN.test(value)) return { kind: "partial" };
+	if (!NUMBER_PATTERN.test(value)) return { kind: "invalid" };
+	const parsed = Number(value);
+	if (!Number.isFinite(parsed)) return { kind: "invalid" };
+	return {
+		kind: "valid",
+		value: parsed
+	};
+}
+const DEFAULT_LABELS$1 = {
+	input: "Number",
+	decrease: "Decrease",
+	increase: "Increase",
+	clear: "Clear value",
+	invalid: "Enter a valid number"
+};
+/** Renders the number input component. */
+function NumberInput({ value: controlledValue, defaultValue, onChange, nullable, clearable = false, min, max, step = 1, largeStep, scrub = false, label, unit, required, error, hint, disabled = false, disabledReason, labels, className, id, "aria-label": ariaLabel }) {
+	var _useInputId, _ref, _ref2;
+	const generatedId = React.useId();
+	const inputId = (_useInputId = useInputId(id, label, "number-input")) !== null && _useInputId !== void 0 ? _useInputId : `${generatedId}-number-input`;
+	const resolvedLabels = _objectSpread2(_objectSpread2({}, DEFAULT_LABELS$1), labels);
+	const isNullable = nullable === true;
+	const nativeDisabled = disabled && !disabledReason;
+	const interactionDisabled = disabled;
+	const [invalidDraft, setInvalidDraft] = React.useState(false);
+	const effectiveError = error !== null && error !== void 0 ? error : invalidDraft ? resolvedLabels.invalid : "";
+	const hasError = Boolean(effectiveError);
+	const clamp = React.useCallback((v) => {
+		let clamped = v;
+		if (min !== void 0) clamped = Math.max(min, clamped);
+		if (max !== void 0) clamped = Math.min(max, clamped);
+		return clamped;
+	}, [min, max]);
+	const [rawValue, setRawValue] = useControlledState((_ref = defaultValue) !== null && _ref !== void 0 ? _ref : isNullable ? null : 0, controlledValue, React.useCallback((next) => {
+		if (isNullable) {
+			onChange === null || onChange === void 0 || onChange(next);
+			return;
+		}
+		if (next !== null) onChange === null || onChange === void 0 || onChange(next);
+	}, [isNullable, onChange]));
+	const value = rawValue;
+	const numericValue = value !== null && value !== void 0 ? value : 0;
+	const setValue = React.useCallback((next) => {
+		setRawValue(next === null ? null : clamp(next));
+	}, [clamp, setRawValue]);
+	const format = React.useCallback((v) => {
+		const decimals = Math.max(decimalPlaces(step), decimalPlaces(v));
+		return v.toFixed(Math.min(decimals, 20));
+	}, [step]);
+	const [inputText, setInputText] = React.useState(null);
+	const focusedRef = React.useRef(false);
+	const displayValue = inputText !== null && inputText !== void 0 ? inputText : value === null ? "" : format(value);
+	const stateRef = React.useRef({
+		step,
+		clamp,
+		format
+	});
+	stateRef.current = {
+		step,
+		clamp,
+		format
+	};
+	const valueRef = React.useRef(value);
+	valueRef.current = value;
+	const getSpinBase = React.useCallback(() => {
+		if (valueRef.current !== null) return valueRef.current;
+		return clamp(min !== null && min !== void 0 ? min : 0);
+	}, [clamp, min]);
+	const spin = React.useCallback((delta) => {
+		if (interactionDisabled) return;
+		const s = stateRef.current;
+		const next = s.clamp(addPrecise(getSpinBase(), delta, s.step));
+		valueRef.current = next;
+		setInvalidDraft(false);
+		setValue(next);
+		if (focusedRef.current) setInputText(s.format(next));
+	}, [
+		getSpinBase,
+		interactionDisabled,
+		setValue
+	]);
+	const setTo = React.useCallback((next) => {
+		if (interactionDisabled) return;
+		const s = stateRef.current;
+		const clamped = s.clamp(next);
+		valueRef.current = clamped;
+		setInvalidDraft(false);
+		setValue(clamped);
+		if (focusedRef.current) setInputText(s.format(clamped));
+	}, [interactionDisabled, setValue]);
+	const handleChange = React.useCallback((e) => {
+		const raw = e.target.value;
+		setInputText(raw);
+		const parsed = parseDraftValue(raw);
+		if (parsed.kind === "empty") {
+			setInvalidDraft(false);
+			if (isNullable) {
+				valueRef.current = null;
+				setValue(null);
+			}
+			return;
+		}
+		if (parsed.kind === "partial") {
+			setInvalidDraft(false);
+			return;
+		}
+		if (parsed.kind === "invalid") {
+			setInvalidDraft(true);
+			return;
+		}
+		setInvalidDraft(false);
+		setValue(parsed.value);
+	}, [isNullable, setValue]);
+	const handleFocus = React.useCallback(() => {
+		focusedRef.current = true;
+	}, []);
+	const handleBlur = React.useCallback(() => {
+		focusedRef.current = false;
+		setInputText(null);
+		setInvalidDraft(false);
+		setValue(valueRef.current);
+	}, [setValue]);
+	const handleClear = React.useCallback(() => {
+		if (!isNullable || interactionDisabled) return;
+		valueRef.current = null;
+		setInvalidDraft(false);
+		setInputText(focusedRef.current ? "" : null);
+		setValue(null);
+	}, [
+		interactionDisabled,
+		isNullable,
+		setValue
+	]);
+	const repeatedRef = React.useRef(false);
+	const timersRef = React.useRef({});
+	const stopRepeat = React.useCallback(() => {
+		const t = timersRef.current;
+		if (t.timeout !== void 0) window.clearTimeout(t.timeout);
+		if (t.interval !== void 0) window.clearInterval(t.interval);
+		timersRef.current = {};
+	}, []);
+	React.useEffect(() => stopRepeat, [stopRepeat]);
+	const handleStepPointerDown = React.useCallback((dir) => (e) => {
+		if (e.button !== 0 || interactionDisabled) return;
+		repeatedRef.current = false;
+		stopRepeat();
+		const delta = () => dir * stateRef.current.step;
+		timersRef.current.timeout = window.setTimeout(() => {
+			timersRef.current.interval = window.setInterval(() => {
+				repeatedRef.current = true;
+				spin(delta());
+			}, 60);
+		}, 300);
+	}, [
+		interactionDisabled,
+		spin,
+		stopRepeat
+	]);
+	const handleStepClick = React.useCallback((dir) => () => {
+		if (interactionDisabled) return;
+		if (repeatedRef.current) {
+			repeatedRef.current = false;
+			return;
+		}
+		spin(dir * stateRef.current.step);
+	}, [interactionDisabled, spin]);
+	const handleKeyDown = React.useCallback((e) => {
+		if (interactionDisabled) return;
+		const s = stateRef.current;
+		const big = largeStep !== null && largeStep !== void 0 ? largeStep : s.step * 10;
+		switch (e.key) {
+			case "ArrowUp":
+				e.preventDefault();
+				spin(s.step);
+				break;
+			case "ArrowDown":
+				e.preventDefault();
+				spin(-s.step);
+				break;
+			case "PageUp":
+				e.preventDefault();
+				spin(big);
+				break;
+			case "PageDown":
+				e.preventDefault();
+				spin(-big);
+				break;
+			case "Home":
+				if (min !== void 0) {
+					e.preventDefault();
+					setTo(min);
+				}
+				break;
+			case "End": if (max !== void 0) {
+				e.preventDefault();
+				setTo(max);
+			}
+		}
+	}, [
+		interactionDisabled,
+		spin,
+		setTo,
+		largeStep,
+		min,
+		max
+	]);
+	const scrubStartRef = React.useRef(null);
+	const handleScrubPointerDown = React.useCallback((e) => {
+		if (e.button !== 0 || interactionDisabled) return;
+		e.preventDefault();
+		scrubStartRef.current = {
+			x: e.clientX,
+			value: getSpinBase()
+		};
+		try {
+			e.currentTarget.setPointerCapture(e.pointerId);
+		} catch (_unused) {}
+	}, [getSpinBase, interactionDisabled]);
+	const handleScrubPointerMove = React.useCallback((e) => {
+		const start = scrubStartRef.current;
+		if (!start) return;
+		const s = stateRef.current;
+		const steps = Math.round((e.clientX - start.x) / 6);
+		setInvalidDraft(false);
+		setValue(s.clamp(addPrecise(start.value, steps * s.step, s.step)));
+	}, [setValue]);
+	const handleScrubPointerUp = React.useCallback((e) => {
+		scrubStartRef.current = null;
+		try {
+			e.currentTarget.releasePointerCapture(e.pointerId);
+		} catch (_unused2) {}
+	}, []);
+	const canDecrement = value === null || min === void 0 || numericValue > min;
+	const canIncrement = value === null || max === void 0 || numericValue < max;
+	const decrementUnavailable = interactionDisabled || !canDecrement;
+	const incrementUnavailable = interactionDisabled || !canIncrement;
+	const showClear = isNullable && clearable && value !== null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", className),
+		"data-opt-id": "GKPSV",
+		"data-opt-slug": "number-input.NumberInput",
+		children: [
+			label && /* @__PURE__ */ jsxs("span", {
+				className: cn("text-sm font-medium text-text-primary", scrub && !interactionDisabled && "w-fit cursor-ew-resize touch-none select-none"),
+				onPointerDown: scrub ? handleScrubPointerDown : void 0,
+				onPointerMove: scrub ? handleScrubPointerMove : void 0,
+				onPointerUp: scrub ? handleScrubPointerUp : void 0,
+				onPointerCancel: scrub ? handleScrubPointerUp : void 0,
+				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: handleStepClick(-1),
+						onPointerDown: handleStepPointerDown(-1),
+						onPointerUp: stopRepeat,
+						onPointerLeave: stopRepeat,
+						onPointerCancel: stopRepeat,
+						disabled: nativeDisabled || !canDecrement,
+						"aria-disabled": decrementUnavailable || void 0,
+						"aria-label": resolvedLabels.decrease,
+						title: disabledReason,
+						className: cn("border-border bg-surface text-text-secondary flex h-10 w-10 items-center justify-center rounded-l-lg border border-r-0 text-sm font-medium", decrementUnavailable ? "cursor-not-allowed opacity-40" : "hover:bg-bg-subtle cursor-pointer", nativeDisabled && "pointer-events-none", OPT_FOCUS_VISIBLE),
+						children: "−"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "relative min-w-0 flex-1",
+						children: [
+							/* @__PURE__ */ jsx("input", {
+								type: "text",
+								inputMode: "decimal",
+								id: inputId,
+								value: displayValue,
+								onChange: handleChange,
+								onFocus: handleFocus,
+								onBlur: handleBlur,
+								onKeyDown: handleKeyDown,
+								disabled: nativeDisabled,
+								readOnly: interactionDisabled,
+								"aria-disabled": interactionDisabled || void 0,
+								"aria-label": (_ref2 = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref2 !== void 0 ? _ref2 : resolvedLabels.input,
+								"aria-invalid": hasError,
+								"aria-required": required,
+								"aria-describedby": getDescribedBy(inputId, effectiveError, hint),
+								min,
+								max,
+								step,
+								title: disabledReason,
+								className: cn(OPT_INPUT, "[appearance:textfield] rounded-none border-x-0 text-center [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", (unit || showClear) && "pr-10", unit && showClear && "pr-16", interactionDisabled && "cursor-not-allowed opacity-60", hasError && "border-danger focus-visible:outline-danger")
+							}),
+							unit && /* @__PURE__ */ jsx("span", {
+								className: cn("text-text-tertiary pointer-events-none absolute top-1/2 -translate-y-1/2 text-sm", showClear ? "right-10" : "right-3"),
+								"aria-hidden": "true",
+								children: unit
+							}),
+							showClear && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: handleClear,
+								disabled: nativeDisabled,
+								"aria-disabled": interactionDisabled || void 0,
+								"aria-label": resolvedLabels.clear,
+								title: disabledReason,
+								className: cn("text-text-tertiary absolute top-1/2 right-2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded text-sm", interactionDisabled ? "cursor-not-allowed opacity-40" : "hover:bg-bg-subtle hover:text-text-primary cursor-pointer", nativeDisabled && "pointer-events-none", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+								children: "×"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: handleStepClick(1),
+						onPointerDown: handleStepPointerDown(1),
+						onPointerUp: stopRepeat,
+						onPointerLeave: stopRepeat,
+						onPointerCancel: stopRepeat,
+						disabled: nativeDisabled || !canIncrement,
+						"aria-disabled": incrementUnavailable || void 0,
+						"aria-label": resolvedLabels.increase,
+						title: disabledReason,
+						className: cn("border-border bg-surface text-text-secondary flex h-10 w-10 items-center justify-center rounded-r-lg border border-l-0 text-sm font-medium", incrementUnavailable ? "cursor-not-allowed opacity-40" : "hover:bg-bg-subtle cursor-pointer", nativeDisabled && "pointer-events-none", OPT_FOCUS_VISIBLE),
+						children: "+"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(FieldMessages, {
+				id: inputId,
+				error: effectiveError,
+				hint
+			})
+		]
+	});
+}
+NumberInput.displayName = "NumberInput";
+//#endregion
+//#region src/core/slider.tsx
+function getSliderState(value, min, max, step) {
+	const safeMin = Number.isFinite(min) ? min : 0;
+	const rawMax = Number.isFinite(max) ? max : 100;
+	const safeMax = rawMax >= safeMin ? rawMax : safeMin;
+	const safeStep = Number.isFinite(step) && step > 0 ? step : 1;
+	const clampedValue = Math.min(Math.max(Number.isFinite(value) ? value : safeMin, safeMin), safeMax);
+	return {
+		value: clampedValue,
+		min: safeMin,
+		max: safeMax,
+		step: safeStep,
+		percentage: safeMax === safeMin ? 0 : (clampedValue - safeMin) / (safeMax - safeMin) * 100
+	};
+}
+/** Renders the slider component. */
+function Slider({ value: controlledValue, defaultValue = 0, onChange, min = 0, max = 100, step = 1, label, showValue = false, formatValue, disabled = false, className, "aria-label": ariaLabel }) {
+	var _ref;
+	const [localValue, setLocalValue] = useState(defaultValue);
+	const sliderState = getSliderState(controlledValue !== null && controlledValue !== void 0 ? controlledValue : localValue, min, max, step);
+	const handleChange = useCallback((e) => {
+		const next = getSliderState(parseFloat(e.target.value), min, max, step).value;
+		if (controlledValue === void 0) setLocalValue(next);
+		onChange === null || onChange === void 0 || onChange(next);
+	}, [
+		controlledValue,
+		min,
+		max,
+		step,
+		onChange
+	]);
+	const displayValue = formatValue ? formatValue(sliderState.value) : String(sliderState.value);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", className),
+		"data-opt-id": "VJCDH",
+		"data-opt-slug": "slider.Slider",
+		children: [(label || showValue) && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [label && /* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium text-text-primary",
+				children: label
+			}), showValue && /* @__PURE__ */ jsx("span", {
+				className: "text-text-tertiary text-sm",
+				children: displayValue
+			})]
+		}), /* @__PURE__ */ jsx("input", {
+			type: "range",
+			min: sliderState.min,
+			max: sliderState.max,
+			step: sliderState.step,
+			value: sliderState.value,
+			onChange: handleChange,
+			disabled,
+			"aria-label": (_ref = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref !== void 0 ? _ref : "Slider",
+			"aria-valuemin": sliderState.min,
+			"aria-valuemax": sliderState.max,
+			"aria-valuenow": sliderState.value,
+			"aria-valuetext": displayValue,
+			className: cn("h-2 w-full cursor-pointer appearance-none rounded-full", "bg-bg-subtle", "[&::-webkit-slider-thumb]:bg-accent [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:shadow-sm", "[&::-moz-range-thumb]:bg-accent [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:shadow-sm", "disabled:cursor-not-allowed disabled:opacity-40", OPT_FOCUS_VISIBLE),
+			style: { background: disabled ? void 0 : `linear-gradient(to right, var(--color-accent) ${sliderState.percentage}%, var(--color-bg-subtle) ${sliderState.percentage}%)` }
+		})]
+	});
+}
+Slider.displayName = "Slider";
+//#endregion
+//#region src/core/popover.tsx
+const _excluded$3 = ["className"];
+const _excluded2$1 = ["className"];
+const _excluded3$1 = ["className"];
+/** Renders the popover root component. */
+function PopoverRoot$1(props) {
+	return /* @__PURE__ */ jsx(PopoverRoot, _objectSpread2(_objectSpread2({}, props), {}, {
+		"data-opt-id": "DWJD5",
+		"data-opt-slug": "popover.PopoverRoot"
+	}));
+}
+const PopoverTrigger$1 = forwardRef((_ref, ref) => {
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$3);
+	return /* @__PURE__ */ jsx(PopoverTrigger, _objectSpread2(_objectSpread2({
+		ref,
+		className: cn("inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm", "cursor-pointer data-[disabled]:cursor-not-allowed", OPT_FOCUS_VISIBLE, className)
+	}, props), {}, {
+		"data-opt-id": "2W9BZ",
+		"data-opt-slug": "popover.PopoverTrigger"
+	}));
+});
+PopoverTrigger$1.displayName = "PopoverTrigger";
+/** Renders the popover content component. */
+function PopoverContent$1(_ref2) {
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$1);
+	return /* @__PURE__ */ jsx(PopoverContent, _objectSpread2(_objectSpread2({ className: cn("bg-surface-overlay z-50 rounded-lg p-4 shadow-lg", OPT_BORDER, OPT_ANIMATE_ENTER_EXIT, className) }, props), {}, {
+		"data-opt-id": "E03EY",
+		"data-opt-slug": "popover.PopoverContent"
+	}));
+}
+/** Renders the popover close component. */
+function PopoverClose$1(_ref3) {
+	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$1);
+	return /* @__PURE__ */ jsx(PopoverClose, _objectSpread2(_objectSpread2({ className: cn("text-text-tertiary hover:bg-bg-subtle inline-flex items-center justify-center rounded-md p-1 text-sm", "cursor-pointer data-[disabled]:cursor-not-allowed", OPT_FOCUS_VISIBLE, className) }, props), {}, {
+		"data-opt-id": "FP4KF",
+		"data-opt-slug": "popover.PopoverClose"
+	}));
+}
+//#endregion
+//#region src/core/color-picker.tsx
+const DEFAULT_PRESETS$1 = [
+	"#3b82f6",
+	"#10b981",
+	"#f59e0b",
+	"#8b5cf6",
+	"#ef4444",
+	"#06b6d4",
+	"#f97316",
+	"#ec4899",
+	"#84cc16",
+	"#6366f1",
+	"#14b8a6",
+	"#a855f7",
+	"#78716c",
+	"#000000",
+	"#6b7280",
+	"#ffffff"
+];
+const ColorPicker = forwardRef(({ value, onChange, presets = DEFAULT_PRESETS$1, label, required, error, hint, placeholder = "#000000", disabled = false, className, id, "aria-label": ariaLabel }, ref) => {
+	var _useInputId, _ref;
+	const [color, setColor] = useControlledState("#3b82f6", value, onChange);
+	const fallbackId = useId().replace(/:/g, "");
+	const pickerId = (_useInputId = useInputId(id, label, "color-picker")) !== null && _useInputId !== void 0 ? _useInputId : `color-picker-${fallbackId}`;
+	const hasError = Boolean(error);
+	const [inputValue, setInputValue] = useState(color);
+	const inputRef = useRef(null);
+	const handlePresetClick = useCallback((preset) => {
+		setColor(preset);
+		setInputValue(preset);
+	}, [setColor]);
+	const handleInputChange = useCallback((e) => {
+		const val = e.target.value;
+		setInputValue(val);
+		if (/^#[0-9a-fA-F]{6}$/.test(val)) setColor(val);
+	}, [setColor]);
+	const handleInputBlur = useCallback(() => {
+		if (!/^#[0-9a-fA-F]{6}$/.test(inputValue)) setInputValue(color);
+	}, [inputValue, color]);
+	const lastValueRef = useRef(value);
+	if (value !== void 0 && value !== lastValueRef.current) {
+		lastValueRef.current = value;
+		if (value !== inputValue) setInputValue(value);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", className),
+		"data-opt-id": "V2CSG",
+		"data-opt-slug": "color-picker.ColorPicker",
+		children: [
+			label && /* @__PURE__ */ jsxs("span", {
+				className: "text-sm font-medium text-text-primary",
+				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			}),
+			/* @__PURE__ */ jsxs(PopoverRoot$1, { children: [/* @__PURE__ */ jsxs(PopoverTrigger$1, {
+				id: pickerId,
+				className: cn(OPT_INPUT, "cursor-pointer items-center gap-2", hasError && "border-danger focus-visible:outline-danger", disabled && "pointer-events-none opacity-50"),
+				disabled,
+				"aria-label": (_ref = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref !== void 0 ? _ref : "Color picker",
+				"aria-required": required,
+				"aria-invalid": hasError,
+				"aria-describedby": getDescribedBy(pickerId, error, hint),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "border-border inline-block h-5 w-5 rounded border",
+					style: { backgroundColor: color },
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ jsx("span", {
+					className: OPT_TEXT_PRIMARY,
+					children: color
+				})]
+			}), /* @__PURE__ */ jsxs(PopoverContent$1, {
+				className: cn("bg-surface-overlay z-50 rounded-lg p-3 shadow-lg", OPT_BORDER),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "mb-3 grid grid-cols-8 gap-1.5",
+					role: "listbox",
+					"aria-label": "Color presets",
+					children: presets.map((preset) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => handlePresetClick(preset),
+						className: cn("h-7 w-7 rounded-md border transition-transform hover:scale-110", OPT_FOCUS_VISIBLE, preset === color ? "border-accent ring-ring ring-offset-ring-offset ring-2 ring-offset-1" : "border-border", preset === "#ffffff" && "border-black/20"),
+						style: { backgroundColor: preset },
+						role: "option",
+						"aria-selected": preset === color,
+						"aria-label": preset
+					}, preset))
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "border-border h-8 w-8 rounded-md border",
+						style: { backgroundColor: color },
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("input", {
+						ref: ref !== null && ref !== void 0 ? ref : inputRef,
+						type: "text",
+						value: inputValue,
+						onChange: handleInputChange,
+						onBlur: handleInputBlur,
+						placeholder,
+						maxLength: 7,
+						className: cn("border-border bg-surface flex-1 rounded-md border px-2 py-1.5 font-mono text-sm", OPT_TEXT_PRIMARY, OPT_FOCUS_VISIBLE),
+						"aria-label": "Hex color value"
+					})]
+				})]
+			})] }),
+			/* @__PURE__ */ jsx(FieldMessages, {
+				id: pickerId,
+				error,
+				hint
+			})
+		]
+	});
+});
+ColorPicker.displayName = "ColorPicker";
+//#endregion
+//#region src/lib/icon-registry.tsx
+const defaultIconEntries = [
+	{
+		id: "click",
+		label: "Click",
+		Icon: MousePointerClick,
+		group: "Actions"
+	},
+	{
+		id: "view",
+		label: "View",
+		Icon: Eye,
+		group: "Actions"
+	},
+	{
+		id: "cart",
+		label: "Cart",
+		Icon: ShoppingCart,
+		group: "Actions"
+	},
+	{
+		id: "purchase",
+		label: "Purchase",
+		Icon: CreditCard,
+		group: "Actions"
+	},
+	{
+		id: "signup",
+		label: "Sign Up",
+		Icon: UserPlus,
+		group: "Actions"
+	},
+	{
+		id: "login",
+		label: "Login",
+		Icon: LogIn,
+		group: "Actions"
+	},
+	{
+		id: "search",
+		label: "Search",
+		Icon: Search,
+		group: "Actions"
+	},
+	{
+		id: "download",
+		label: "Download",
+		Icon: Download,
+		group: "Actions"
+	},
+	{
+		id: "share",
+		label: "Share",
+		Icon: Share2,
+		group: "Social"
+	},
+	{
+		id: "like",
+		label: "Like",
+		Icon: Heart,
+		group: "Social"
+	},
+	{
+		id: "comment",
+		label: "Comment",
+		Icon: MessageCircle,
+		group: "Social"
+	},
+	{
+		id: "follow",
+		label: "Follow",
+		Icon: UserPlus,
+		group: "Social"
+	},
+	{
+		id: "star",
+		label: "Star",
+		Icon: Star,
+		group: "Status"
+	},
+	{
+		id: "flag",
+		label: "Flag",
+		Icon: Flag,
+		group: "Status"
+	},
+	{
+		id: "check",
+		label: "Check",
+		Icon: Check,
+		group: "Status"
+	},
+	{
+		id: "error",
+		label: "Error",
+		Icon: CircleAlert,
+		group: "Status"
+	},
+	{
+		id: "warning",
+		label: "Warning",
+		Icon: TriangleAlert,
+		group: "Status"
+	},
+	{
+		id: "info",
+		label: "Info",
+		Icon: Info,
+		group: "Status"
+	},
+	{
+		id: "bell",
+		label: "Bell",
+		Icon: Bell,
+		group: "Objects"
+	},
+	{
+		id: "mail",
+		label: "Mail",
+		Icon: Mail,
+		group: "Objects"
+	},
+	{
+		id: "file",
+		label: "File",
+		Icon: FileText,
+		group: "Objects"
+	},
+	{
+		id: "folder",
+		label: "Folder",
+		Icon: Folder,
+		group: "Objects"
+	},
+	{
+		id: "settings",
+		label: "Settings",
+		Icon: Settings,
+		group: "Objects"
+	},
+	{
+		id: "link",
+		label: "Link",
+		Icon: Link2,
+		group: "Objects"
+	}
+];
+const extraIconEntries = [
+	{
+		id: "eye",
+		label: "Eye",
+		Icon: Eye
+	},
+	{
+		id: "user",
+		label: "User",
+		Icon: User
+	},
+	{
+		id: "shopping-cart",
+		label: "Shopping Cart",
+		Icon: ShoppingCart
+	},
+	{
+		id: "credit-card",
+		label: "Credit Card",
+		Icon: CreditCard
+	},
+	{
+		id: "heart",
+		label: "Heart",
+		Icon: Heart
+	},
+	{
+		id: "upload",
+		label: "Upload",
+		Icon: Upload
+	},
+	{
+		id: "globe",
+		label: "Globe",
+		Icon: Globe
+	},
+	{
+		id: "zap",
+		label: "Zap",
+		Icon: Zap
+	},
+	{
+		id: "trending-up",
+		label: "Trending Up",
+		Icon: TrendingUp
+	},
+	{
+		id: "bar-chart",
+		label: "Bar Chart",
+		Icon: ChartColumn
+	},
+	{
+		id: "check-circle",
+		label: "Check Circle",
+		Icon: CircleCheck
+	},
+	{
+		id: "x-circle",
+		label: "X Circle",
+		Icon: XCircle
+	}
+];
+const iconRegistry = new Map([...defaultIconEntries, ...extraIconEntries].map((entry) => [entry.id, entry]));
+const defaultIconRegistry = defaultIconEntries;
+/** Returns icon registry entry. */
+function getIconRegistryEntry(id) {
+	return iconRegistry.get(id);
+}
+//#endregion
+//#region src/core/icon-picker.tsx
+const DEFAULT_ICONS = [...defaultIconRegistry.map(({ id, label, Icon, group }) => ({
+	id,
+	label,
+	group,
+	icon: /* @__PURE__ */ jsx(Icon, {})
+}))];
+function renderIconPreview(icon, options) {
+	if (typeof icon === "string" || typeof icon === "number") return /* @__PURE__ */ jsx("span", {
+		className: cn(options.textClassName, "leading-none"),
+		"aria-hidden": true,
+		children: icon
+	});
+	if (React.isValidElement(icon)) return React.cloneElement(icon, {
+		"aria-hidden": true,
+		className: cn(options.elementClassName, icon.props.className)
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex items-center justify-center", options.elementClassName),
+		"aria-hidden": true,
+		children: icon
+	});
+}
+/** Renders the icon picker component. */
+function IconPicker({ value, onChange, icons = DEFAULT_ICONS, label, required, error, hint, placeholder = "Select icon", disabled = false, className, id, "aria-label": ariaLabel }) {
+	var _useInputId, _ref;
+	const [selected, setSelected] = useControlledState("", value, onChange);
+	const fallbackId = React.useId().replace(/:/g, "");
+	const pickerId = (_useInputId = useInputId(id, label, "icon-picker")) !== null && _useInputId !== void 0 ? _useInputId : `icon-picker-${fallbackId}`;
+	const hasError = Boolean(error);
+	const [search, setSearch] = React.useState("");
+	const selectedIcon = React.useMemo(() => icons.find((i) => i.id === selected), [icons, selected]);
+	const filteredIcons = React.useMemo(() => {
+		if (!search) return icons;
+		const q = search.toLowerCase();
+		return icons.filter((i) => {
+			var _i$group;
+			return i.label.toLowerCase().includes(q) || i.id.toLowerCase().includes(q) || ((_i$group = i.group) === null || _i$group === void 0 ? void 0 : _i$group.toLowerCase().includes(q));
+		});
+	}, [icons, search]);
+	const groups = React.useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const icon of filteredIcons) {
+			var _icon$group;
+			const group = (_icon$group = icon.group) !== null && _icon$group !== void 0 ? _icon$group : "Other";
+			if (!map.has(group)) map.set(group, []);
+			map.get(group).push(icon);
+		}
+		return map;
+	}, [filteredIcons]);
+	const handleSelect = React.useCallback((iconId) => {
+		setSelected(iconId);
+	}, [setSelected]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", className),
+		"data-opt-id": "0DRGP",
+		"data-opt-slug": "icon-picker.IconPicker",
+		children: [
+			label && /* @__PURE__ */ jsxs("span", {
+				className: "text-sm font-medium text-text-primary",
+				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			}),
+			/* @__PURE__ */ jsxs(PopoverRoot$1, { children: [/* @__PURE__ */ jsx(PopoverTrigger$1, {
+				id: pickerId,
+				className: cn(OPT_INPUT, "cursor-pointer items-center gap-2", !selectedIcon && "text-text-tertiary", hasError && "border-danger focus-visible:outline-danger", disabled && "pointer-events-none opacity-50"),
+				disabled,
+				"aria-label": (_ref = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref !== void 0 ? _ref : "Icon picker",
+				"aria-required": required,
+				"aria-invalid": hasError,
+				"aria-describedby": getDescribedBy(pickerId, error, hint),
+				children: selectedIcon ? /* @__PURE__ */ jsxs(Fragment, { children: [renderIconPreview(selectedIcon.icon, {
+					elementClassName: "size-5 shrink-0",
+					textClassName: "text-lg"
+				}), /* @__PURE__ */ jsx("span", {
+					className: OPT_TEXT_PRIMARY,
+					children: selectedIcon.label
+				})] }) : /* @__PURE__ */ jsx("span", { children: placeholder })
+			}), /* @__PURE__ */ jsxs(PopoverContent$1, {
+				className: cn("bg-surface-overlay z-50 w-72 rounded-lg p-3 shadow-lg", OPT_BORDER),
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "text",
+					value: search,
+					onChange: (e) => setSearch(e.target.value),
+					placeholder: "Search icons...",
+					className: cn("border-border bg-surface mb-2 w-full rounded-md border px-3 py-1.5 text-sm outline-transparent", OPT_TEXT_PRIMARY, "placeholder:text-text-tertiary", OPT_FOCUS_VISIBLE),
+					"aria-label": "Search icons"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "max-h-56 overflow-y-auto",
+					children: filteredIcons.length === 0 ? /* @__PURE__ */ jsx("div", {
+						className: cn(OPT_TEXT_SECONDARY, "py-4 text-center text-sm"),
+						children: "No icons found"
+					}) : Array.from(groups.entries()).map(([groupName, groupIcons]) => /* @__PURE__ */ jsxs("div", {
+						className: "mb-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn(OPT_TEXT_TERTIARY, "mb-1 block text-[10px] font-semibold tracking-wider uppercase"),
+							children: groupName
+						}), /* @__PURE__ */ jsx("div", {
+							className: "grid grid-cols-6 gap-1",
+							children: groupIcons.map((icon) => /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => handleSelect(icon.id),
+								className: cn("flex h-9 w-9 items-center justify-center rounded-md text-lg transition-colors", OPT_FOCUS_VISIBLE, icon.id === selected ? "bg-accent-subtle ring-ring ring-2" : "hover:bg-bg-subtle"),
+								title: icon.label,
+								"aria-label": icon.label,
+								"aria-selected": icon.id === selected || void 0,
+								children: renderIconPreview(icon.icon, {
+									elementClassName: "size-4",
+									textClassName: "text-lg"
+								})
+							}, icon.id))
+						})]
+					}, groupName))
+				})]
+			})] }),
+			/* @__PURE__ */ jsx(FieldMessages, {
+				id: pickerId,
+				error,
+				hint
+			})
+		]
+	});
+}
+IconPicker.displayName = "IconPicker";
+//#endregion
+//#region src/core/tag-input.tsx
+const DEFAULT_DELIMITERS = [
+	",",
+	";",
+	"\n"
+];
+function splitByDelimiters(text, delimiters) {
+	const pattern = delimiters.map((d) => d instanceof RegExp ? d.source : d.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
+	return text.split(new RegExp(pattern)).map((s) => s.trim()).filter(Boolean);
+}
+const TagInput = forwardRef(({ value, onChange, placeholder = "Add tag...", label, required, error, hint, maxTags, disabled = false, className, id, "aria-label": ariaLabel, suggestions, delimiters = DEFAULT_DELIMITERS, allowDuplicates = false }, ref) => {
+	var _useInputId, _ref, _ref2, _ref3, _ref4;
+	const [tags, setTags] = useControlledState([], value, onChange);
+	const fallbackId = useId().replace(/:/g, "");
+	const tagInputId = (_useInputId = useInputId(id, label, "tag-input")) !== null && _useInputId !== void 0 ? _useInputId : `tag-input-${fallbackId}`;
+	const hasError = Boolean(error);
+	const describedBy = getDescribedBy(tagInputId, error, hint);
+	const [inputValue, setInputValue] = useState("");
+	const [highlightIndex, setHighlightIndex] = useState(-1);
+	const [showSuggestions, setShowSuggestions] = useState(false);
+	const innerRef = useRef(null);
+	const inputRef = (_ref = ref) !== null && _ref !== void 0 ? _ref : innerRef;
+	const listboxRef = useRef(null);
+	const listboxId = useId();
+	const undoStack = useRef([]);
+	const redoStack = useRef([]);
+	const tagRefs = useRef(/* @__PURE__ */ new Map());
+	function pushUndo(prev) {
+		undoStack.current.push(prev);
+		redoStack.current = [];
+	}
+	const undo = useCallback(() => {
+		if (undoStack.current.length === 0) return;
+		const prev = undoStack.current.pop();
+		redoStack.current.push([...tags]);
+		setTags(prev);
+	}, [tags, setTags]);
+	const redo = useCallback(() => {
+		if (redoStack.current.length === 0) return;
+		const next = redoStack.current.pop();
+		undoStack.current.push([...tags]);
+		setTags(next);
+	}, [tags, setTags]);
+	const filtered = suggestions && inputValue.trim() ? suggestions.filter((s) => s.toLowerCase().includes(inputValue.trim().toLowerCase()) && (allowDuplicates || !tags.includes(s))) : [];
+	const isOpen = showSuggestions && filtered.length > 0;
+	useEffect(() => {
+		setHighlightIndex(-1);
+	}, [inputValue]);
+	const addTag = useCallback((tag) => {
+		const trimmed = tag.trim();
+		if (!trimmed) return;
+		if (!allowDuplicates && tags.includes(trimmed)) return;
+		if (maxTags && tags.length >= maxTags) return;
+		pushUndo([...tags]);
+		setTags([...tags, trimmed]);
+		setInputValue("");
+		setShowSuggestions(false);
+	}, [
+		tags,
+		setTags,
+		maxTags,
+		allowDuplicates
+	]);
+	const removeTag = useCallback((index) => {
+		pushUndo([...tags]);
+		setTags(tags.filter((_, i) => i !== index));
+	}, [tags, setTags]);
+	const handleTagKeyDown = useCallback((e, index) => {
+		if (e.key === "Backspace" || e.key === "Delete") {
+			e.preventDefault();
+			const nextTags = tags.filter((_, i) => i !== index);
+			pushUndo([...tags]);
+			setTags(nextTags);
+			requestAnimationFrame(() => {
+				if (nextTags.length === 0) {
+					var _inputRef$current;
+					(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+				} else if (index < nextTags.length) {
+					var _tagRefs$current$get;
+					(_tagRefs$current$get = tagRefs.current.get(index)) === null || _tagRefs$current$get === void 0 || _tagRefs$current$get.focus();
+				} else {
+					var _tagRefs$current$get2;
+					(_tagRefs$current$get2 = tagRefs.current.get(nextTags.length - 1)) === null || _tagRefs$current$get2 === void 0 || _tagRefs$current$get2.focus();
+				}
+			});
+			return;
+		}
+		if ((e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey) {
+			e.preventDefault();
+			undo();
+			requestAnimationFrame(() => {
+				var _inputRef$current2;
+				return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+			});
+			return;
+		}
+		if ((e.ctrlKey || e.metaKey) && (e.key === "Z" || e.key === "z" && e.shiftKey || e.key === "y")) {
+			e.preventDefault();
+			redo();
+			requestAnimationFrame(() => {
+				var _inputRef$current3;
+				return (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
+			});
+			return;
+		}
+		if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+			var _inputRef$current4;
+			(_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 || _inputRef$current4.focus();
+		}
+	}, [
+		tags,
+		setTags,
+		undo,
+		redo,
+		inputRef
+	]);
+	const handleInputKeyDown = useCallback((e) => {
+		var _inputRef$current5;
+		if ((e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey) {
+			e.preventDefault();
+			undo();
+			return;
+		}
+		if ((e.ctrlKey || e.metaKey) && (e.key === "Z" || e.key === "z" && e.shiftKey || e.key === "y")) {
+			e.preventDefault();
+			redo();
+			return;
+		}
+		if (isOpen) {
+			if (e.key === "ArrowDown") {
+				e.preventDefault();
+				setHighlightIndex((prev) => prev < filtered.length - 1 ? prev + 1 : 0);
+				return;
+			}
+			if (e.key === "ArrowUp") {
+				e.preventDefault();
+				setHighlightIndex((prev) => prev > 0 ? prev - 1 : filtered.length - 1);
+				return;
+			}
+			if (e.key === "Enter" && highlightIndex >= 0) {
+				e.preventDefault();
+				addTag(filtered[highlightIndex]);
+				return;
+			}
+			if (e.key === "Escape") {
+				e.preventDefault();
+				setShowSuggestions(false);
+				return;
+			}
+		}
+		if (e.key === "Enter") {
+			e.preventDefault();
+			addTag(inputValue);
+		} else if (e.key === "Backspace" && inputValue === "" && tags.length > 0) removeTag(tags.length - 1);
+		else if (e.key === "ArrowLeft" && ((_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.selectionStart) === 0 && tags.length > 0) {
+			var _tagRefs$current$get3;
+			e.preventDefault();
+			(_tagRefs$current$get3 = tagRefs.current.get(tags.length - 1)) === null || _tagRefs$current$get3 === void 0 || _tagRefs$current$get3.focus();
+		}
+	}, [
+		inputValue,
+		tags,
+		addTag,
+		removeTag,
+		isOpen,
+		highlightIndex,
+		filtered,
+		undo,
+		redo,
+		inputRef
+	]);
+	const handlePaste = useCallback((e) => {
+		const parts = splitByDelimiters(e.clipboardData.getData("text/plain"), delimiters);
+		if (parts.length < 2) return;
+		e.preventDefault();
+		const prev = [...tags];
+		let next = [...tags];
+		const remaining = maxTags ? maxTags - next.length : Infinity;
+		for (const part of parts.slice(0, remaining)) {
+			if (!allowDuplicates && next.includes(part)) continue;
+			next = [...next, part];
+		}
+		if (next.length !== prev.length) {
+			pushUndo(prev);
+			setTags(next);
+			setInputValue("");
+		}
+	}, [
+		tags,
+		setTags,
+		maxTags,
+		delimiters,
+		allowDuplicates
+	]);
+	useEffect(() => {
+		if (highlightIndex >= 0 && listboxRef.current) {
+			var _el$scrollIntoView;
+			const el = listboxRef.current.children[highlightIndex];
+			el === null || el === void 0 || (_el$scrollIntoView = el.scrollIntoView) === null || _el$scrollIntoView === void 0 || _el$scrollIntoView.call(el, { block: "nearest" });
+		}
+	}, [highlightIndex]);
+	const atLimit = Boolean(maxTags && tags.length >= maxTags);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex flex-col gap-1.5", className),
+		"data-opt-id": "3TDWF",
+		"data-opt-slug": "tag-input.TagInput",
+		children: [
+			label && /* @__PURE__ */ jsxs("span", {
+				className: "text-sm font-medium text-text-primary",
+				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("border-border bg-surface flex min-h-10 flex-wrap items-center gap-1.5 rounded-lg border px-3 py-1.5", "focus-within:ring-ring focus-within:ring-offset-ring-offset focus-within:ring-2 focus-within:ring-offset-1", hasError && "border-danger", disabled && "pointer-events-none opacity-50"),
+				onMouseDown: () => {
+					var _inputRef$current6;
+					return (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : _inputRef$current6.focus();
+				},
+				role: "group",
+				"aria-label": (_ref2 = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref2 !== void 0 ? _ref2 : "Tag input",
+				"aria-required": required,
+				"aria-invalid": hasError,
+				"aria-describedby": describedBy,
+				children: [tags.length > 0 && /* @__PURE__ */ jsx(CompositeProvider, {
+					focusLoop: true,
+					children: /* @__PURE__ */ jsx(Composite, {
+						"aria-label": "Selected tags",
+						className: "contents",
+						children: tags.map((tag, i) => /* @__PURE__ */ jsxs(CompositeItem, {
+							render: /* @__PURE__ */ jsx("span", { ref: (el) => {
+								if (el) tagRefs.current.set(i, el);
+								else tagRefs.current.delete(i);
+							} }),
+							className: cn(OPT_BADGE_BLUE, "flex items-center gap-1 py-1", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset", "rounded-md"),
+							onKeyDown: (e) => handleTagKeyDown(e, i),
+							children: [tag, !disabled && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								tabIndex: -1,
+								onClick: (e) => {
+									var _inputRef$current7;
+									e.stopPropagation();
+									removeTag(i);
+									(_inputRef$current7 = inputRef.current) === null || _inputRef$current7 === void 0 || _inputRef$current7.focus();
+								},
+								className: "hover:bg-accent-subtle ml-0.5 rounded-full p-0.5",
+								"aria-label": `Remove ${tag}`,
+								children: /* @__PURE__ */ jsx("svg", {
+									width: "10",
+									height: "10",
+									viewBox: "0 0 10 10",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: "1.5",
+									strokeLinecap: "round",
+									children: /* @__PURE__ */ jsx("path", { d: "M2.5 2.5L7.5 7.5M7.5 2.5L2.5 7.5" })
+								})
+							})]
+						}, `${tag}-${i}`))
+					})
+				}), /* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					type: "text",
+					value: inputValue,
+					onChange: (e) => {
+						setInputValue(e.target.value);
+						setShowSuggestions(true);
+					},
+					onKeyDown: handleInputKeyDown,
+					onPaste: handlePaste,
+					onFocus: () => setShowSuggestions(true),
+					onBlur: () => {
+						setTimeout(() => setShowSuggestions(false), 150);
+					},
+					placeholder: tags.length === 0 ? placeholder : atLimit ? "" : "",
+					disabled: disabled || atLimit,
+					className: cn("min-w-[60px] flex-1 border-none bg-transparent text-sm outline-transparent", OPT_TEXT_PRIMARY, OPT_FOCUS_VISIBLE, "placeholder:text-text-tertiary"),
+					"aria-label": (_ref3 = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref3 !== void 0 ? _ref3 : "Tag input",
+					role: suggestions ? "combobox" : void 0,
+					"aria-describedby": describedBy,
+					"aria-expanded": suggestions ? isOpen : void 0,
+					"aria-controls": suggestions ? listboxId : void 0,
+					"aria-activedescendant": isOpen && highlightIndex >= 0 ? `${listboxId}-${highlightIndex}` : void 0,
+					"aria-autocomplete": suggestions ? "list" : void 0
+				})]
+			}),
+			isOpen && /* @__PURE__ */ jsx("ul", {
+				ref: listboxRef,
+				id: listboxId,
+				role: "listbox",
+				"aria-label": (_ref4 = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref4 !== void 0 ? _ref4 : "Tag suggestions",
+				className: "border-border bg-surface absolute top-full z-50 mt-1 max-h-48 w-full overflow-auto rounded-lg border shadow-md",
+				children: filtered.map((suggestion, i) => /* @__PURE__ */ jsx("li", {
+					id: `${listboxId}-${i}`,
+					role: "option",
+					"aria-selected": i === highlightIndex,
+					className: cn("cursor-pointer px-3 py-1.5 text-sm", "text-text-primary", i === highlightIndex && "bg-accent-subtle"),
+					onMouseDown: (e) => {
+						e.preventDefault();
+						addTag(suggestion);
+					},
+					onMouseEnter: () => setHighlightIndex(i),
+					children: suggestion
+				}, suggestion))
+			}),
+			maxTags && /* @__PURE__ */ jsxs("span", {
+				className: "text-text-tertiary text-xs",
+				children: [
+					tags.length,
+					"/",
+					maxTags
+				]
+			}),
+			/* @__PURE__ */ jsx(FieldMessages, {
+				id: tagInputId,
+				error,
+				hint
+			})
+		]
+	});
+});
+TagInput.displayName = "TagInput";
+//#endregion
+//#region src/core/date-range-picker.tsx
+const DAYS = [
+	"Su",
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa"
+];
+function defaultFormat(date) {
+	return date.toLocaleDateString("en-US", {
+		year: "numeric",
+		month: "short",
+		day: "numeric"
+	});
+}
+function isSameDay(a, b) {
+	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isInRange(date, start, end) {
+	if (!start || !end) return false;
+	const t = date.getTime();
+	return t >= start.getTime() && t <= end.getTime();
+}
+function getDaysInMonth(year, month) {
+	return new Date(year, month + 1, 0).getDate();
+}
+function getFirstDayOfMonth(year, month) {
+	return new Date(year, month, 1).getDay();
+}
+function startOfDay(date) {
+	const normalized = new Date(date);
+	normalized.setHours(0, 0, 0, 0);
+	return normalized;
+}
+function getDateKey(date) {
+	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+function createDateInMonth(year, month, day) {
+	return startOfDay(new Date(year, month, Math.min(day, getDaysInMonth(year, month))));
+}
+const DEFAULT_PRESETS = [
+	{
+		label: "Today",
+		range: () => {
+			const now = /* @__PURE__ */ new Date();
+			now.setHours(0, 0, 0, 0);
+			return {
+				start: now,
+				end: new Date(now)
+			};
+		}
+	},
+	{
+		label: "Last 7 days",
+		range: () => {
+			const end = /* @__PURE__ */ new Date();
+			end.setHours(0, 0, 0, 0);
+			const start = new Date(end);
+			start.setDate(start.getDate() - 6);
+			return {
+				start,
+				end
+			};
+		}
+	},
+	{
+		label: "Last 30 days",
+		range: () => {
+			const end = /* @__PURE__ */ new Date();
+			end.setHours(0, 0, 0, 0);
+			const start = new Date(end);
+			start.setDate(start.getDate() - 29);
+			return {
+				start,
+				end
+			};
+		}
+	},
+	{
+		label: "Last 90 days",
+		range: () => {
+			const end = /* @__PURE__ */ new Date();
+			end.setHours(0, 0, 0, 0);
+			const start = new Date(end);
+			start.setDate(start.getDate() - 89);
+			return {
+				start,
+				end
+			};
+		}
+	},
+	{
+		label: "This month",
+		range: () => {
+			const now = /* @__PURE__ */ new Date();
+			now.setHours(0, 0, 0, 0);
+			return {
+				start: new Date(now.getFullYear(), now.getMonth(), 1),
+				end: now
+			};
+		}
+	},
+	{
+		label: "Last month",
+		range: () => {
+			const now = /* @__PURE__ */ new Date();
+			return {
+				start: new Date(now.getFullYear(), now.getMonth() - 1, 1),
+				end: new Date(now.getFullYear(), now.getMonth(), 0)
+			};
+		}
+	}
+];
+const GRANULARITY_OPTIONS = [
+	{
+		value: "hour",
+		label: "Hour"
+	},
+	{
+		value: "day",
+		label: "Day"
+	},
+	{
+		value: "week",
+		label: "Week"
+	},
+	{
+		value: "month",
+		label: "Month"
+	}
+];
+const COMPARISON_OPTIONS = [{
+	value: "previous",
+	label: "vs Previous period"
+}, {
+	value: "year-over-year",
+	label: "vs Same period last year"
+}];
+/** Renders the date range picker component. */
+function DateRangePicker({ value, onChange, presets = DEFAULT_PRESETS, placeholder = "Select date range", label, required, error, hint, className, id, triggerClassName, "aria-label": ariaLabel, disabled = false, format = defaultFormat, comparison = false, comparisonMode, onComparisonChange, showGranularity = false, granularity, onGranularityChange }) {
+	var _useInputId, _ref3;
+	const fallbackId = useId().replace(/:/g, "");
+	const pickerId = (_useInputId = useInputId(id, label, "date-range-picker")) !== null && _useInputId !== void 0 ? _useInputId : `date-range-picker-${fallbackId}`;
+	const hasError = Boolean(error);
+	const [range, setRange] = useControlledState({
+		start: null,
+		end: null
+	}, value, onChange);
+	const [selecting, setSelecting] = useState("start");
+	const [viewDate, setViewDate] = useState(() => {
+		var _range$start;
+		const d = (_range$start = range.start) !== null && _range$start !== void 0 ? _range$start : /* @__PURE__ */ new Date();
+		return {
+			year: d.getFullYear(),
+			month: d.getMonth()
+		};
+	});
+	const [focusedDate, setFocusedDate] = useState(() => {
+		var _ref, _range$start2;
+		return startOfDay((_ref = (_range$start2 = range.start) !== null && _range$start2 !== void 0 ? _range$start2 : range.end) !== null && _ref !== void 0 ? _ref : /* @__PURE__ */ new Date());
+	});
+	const dayButtonRefs = useRef({});
+	const granularityButtonRefs = useRef({
+		hour: null,
+		day: null,
+		week: null,
+		month: null
+	});
+	const pendingFocusDateRef = useRef(null);
+	const displayText = useMemo(() => {
+		if (range.start && range.end) return `${format(range.start)} — ${format(range.end)}`;
+		if (range.start) return `${format(range.start)} — ...`;
+		return placeholder;
+	}, [
+		range,
+		format,
+		placeholder
+	]);
+	const handleDayClick = useCallback((day) => {
+		setFocusedDate(day);
+		if (selecting === "start") {
+			setRange({
+				start: day,
+				end: null
+			});
+			setSelecting("end");
+		} else {
+			if (range.start && day.getTime() < range.start.getTime()) setRange({
+				start: day,
+				end: range.start
+			});
+			else setRange({
+				start: range.start,
+				end: day
+			});
+			setSelecting("start");
+		}
+	}, [
+		selecting,
+		range.start,
+		setRange
+	]);
+	const handlePresetClick = useCallback((preset) => {
+		var _ref2, _newRange$start;
+		const newRange = preset.range();
+		const nextFocusDate = startOfDay((_ref2 = (_newRange$start = newRange.start) !== null && _newRange$start !== void 0 ? _newRange$start : newRange.end) !== null && _ref2 !== void 0 ? _ref2 : /* @__PURE__ */ new Date());
+		setRange(newRange);
+		setViewDate({
+			year: nextFocusDate.getFullYear(),
+			month: nextFocusDate.getMonth()
+		});
+		setFocusedDate(nextFocusDate);
+		setSelecting("start");
+	}, [setRange]);
+	const moveFocusToDate = useCallback((date) => {
+		const nextDate = startOfDay(date);
+		pendingFocusDateRef.current = nextDate;
+		setViewDate({
+			year: nextDate.getFullYear(),
+			month: nextDate.getMonth()
+		});
+		setFocusedDate(nextDate);
+	}, []);
+	const prevMonth = useCallback(() => {
+		setViewDate((v) => {
+			const m = v.month - 1;
+			const nextViewDate = m < 0 ? {
+				year: v.year - 1,
+				month: 11
+			} : {
+				year: v.year,
+				month: m
+			};
+			setFocusedDate((currentFocusedDate) => createDateInMonth(nextViewDate.year, nextViewDate.month, currentFocusedDate.getDate()));
+			return nextViewDate;
+		});
+	}, []);
+	const nextMonth = useCallback(() => {
+		setViewDate((v) => {
+			const m = v.month + 1;
+			const nextViewDate = m > 11 ? {
+				year: v.year + 1,
+				month: 0
+			} : {
+				year: v.year,
+				month: m
+			};
+			setFocusedDate((currentFocusedDate) => createDateInMonth(nextViewDate.year, nextViewDate.month, currentFocusedDate.getDate()));
+			return nextViewDate;
+		});
+	}, []);
+	const { daysInMonth, firstDay, monthLabel } = useMemo(() => {
+		return {
+			daysInMonth: getDaysInMonth(viewDate.year, viewDate.month),
+			firstDay: getFirstDayOfMonth(viewDate.year, viewDate.month),
+			monthLabel: new Date(viewDate.year, viewDate.month).toLocaleDateString("en-US", {
+				month: "long",
+				year: "numeric"
+			})
+		};
+	}, [viewDate.year, viewDate.month]);
+	const today = useMemo(() => {
+		const d = /* @__PURE__ */ new Date();
+		d.setHours(0, 0, 0, 0);
+		return d;
+	}, []);
+	const calendarWeeks = useMemo(() => {
+		const leadingDays = Array.from({ length: firstDay }, () => null);
+		const monthDays = Array.from({ length: daysInMonth }, (_, index) => startOfDay(new Date(viewDate.year, viewDate.month, index + 1)));
+		const trailingDays = Array.from({ length: (7 - ((leadingDays.length + monthDays.length) % 7 || 7)) % 7 }, () => null);
+		const cells = [
+			...leadingDays,
+			...monthDays,
+			...trailingDays
+		];
+		return Array.from({ length: cells.length / 7 }, (_, rowIndex) => cells.slice(rowIndex * 7, rowIndex * 7 + 7));
+	}, [
+		daysInMonth,
+		firstDay,
+		viewDate.month,
+		viewDate.year
+	]);
+	const handleDayKeyDown = useCallback((event, day) => {
+		const nextDateFactory = {
+			ArrowLeft: () => startOfDay(new Date(day.getFullYear(), day.getMonth(), day.getDate() - 1)),
+			ArrowRight: () => startOfDay(new Date(day.getFullYear(), day.getMonth(), day.getDate() + 1)),
+			ArrowUp: () => startOfDay(new Date(day.getFullYear(), day.getMonth(), day.getDate() - 7)),
+			ArrowDown: () => startOfDay(new Date(day.getFullYear(), day.getMonth(), day.getDate() + 7)),
+			Home: () => startOfDay(new Date(day.getFullYear(), day.getMonth(), day.getDate() - day.getDay())),
+			End: () => startOfDay(new Date(day.getFullYear(), day.getMonth(), day.getDate() + (6 - day.getDay()))),
+			PageUp: () => createDateInMonth(day.getFullYear(), day.getMonth() - 1, day.getDate()),
+			PageDown: () => createDateInMonth(day.getFullYear(), day.getMonth() + 1, day.getDate())
+		}[event.key];
+		if (!nextDateFactory) return;
+		event.preventDefault();
+		moveFocusToDate(nextDateFactory());
+	}, [moveFocusToDate]);
+	const handleGranularityKeyDown = useCallback((event, currentValue) => {
+		const currentIndex = GRANULARITY_OPTIONS.findIndex((opt) => opt.value === currentValue);
+		if (currentIndex < 0) return;
+		let nextIndex = -1;
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowDown":
+				nextIndex = (currentIndex + 1) % GRANULARITY_OPTIONS.length;
+				break;
+			case "ArrowLeft":
+			case "ArrowUp":
+				nextIndex = (currentIndex - 1 + GRANULARITY_OPTIONS.length) % GRANULARITY_OPTIONS.length;
+				break;
+			case "Home":
+				nextIndex = 0;
+				break;
+			case "End":
+				nextIndex = GRANULARITY_OPTIONS.length - 1;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		const nextValue = GRANULARITY_OPTIONS[nextIndex].value;
+		onGranularityChange === null || onGranularityChange === void 0 || onGranularityChange(nextValue);
+		requestAnimationFrame(() => {
+			var _granularityButtonRef;
+			(_granularityButtonRef = granularityButtonRefs.current[nextValue]) === null || _granularityButtonRef === void 0 || _granularityButtonRef.focus();
+		});
+	}, [onGranularityChange]);
+	useEffect(() => {
+		var _dayButtonRefs$curren;
+		if (!pendingFocusDateRef.current) return;
+		const button = (_dayButtonRefs$curren = dayButtonRefs.current[getDateKey(pendingFocusDateRef.current)]) !== null && _dayButtonRefs$curren !== void 0 ? _dayButtonRefs$curren : null;
+		if (!button) return;
+		button.focus();
+		pendingFocusDateRef.current = null;
+	}, [
+		calendarWeeks,
+		focusedDate,
+		monthLabel
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", className),
+		"data-opt-id": "0KKZ0",
+		"data-opt-slug": "date-range-picker.DateRangePicker",
+		children: [
+			label && /* @__PURE__ */ jsxs("span", {
+				className: "text-text-primary text-sm font-medium",
+				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			}),
+			/* @__PURE__ */ jsxs(PopoverRoot$1, { children: [/* @__PURE__ */ jsxs(PopoverTrigger$1, {
+				id: pickerId,
+				className: cn(triggerClassName !== null && triggerClassName !== void 0 ? triggerClassName : OPT_INPUT, "cursor-pointer justify-between gap-2 text-left", !range.start && "text-text-tertiary", hasError && "border-danger focus-visible:outline-danger", disabled && "pointer-events-none opacity-50"),
+				disabled,
+				"aria-label": (_ref3 = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref3 !== void 0 ? _ref3 : "Date range picker",
+				"aria-required": required,
+				"aria-invalid": hasError,
+				"aria-describedby": getDescribedBy(pickerId, error, hint),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: displayText
+				}), /* @__PURE__ */ jsx(CalendarDays, {
+					"aria-hidden": "true",
+					className: "text-text-tertiary size-4 shrink-0"
+				})]
+			}), /* @__PURE__ */ jsxs(PopoverContent$1, {
+				className: cn("bg-surface-overlay z-50 rounded-lg p-4 shadow-lg", OPT_BORDER),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex gap-4",
+					children: [presets.length > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "border-border-subtle flex flex-col gap-1 border-r pr-4",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn("text-text-secondary", "mb-1 text-xs font-semibold tracking-wider uppercase"),
+							children: "Presets"
+						}), presets.map((preset) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => handlePresetClick(preset),
+							className: cn("rounded-md px-3 py-1.5 text-left text-sm", "text-text-primary", "hover:bg-accent-subtle", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+							children: preset.label
+						}, preset.label))]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-2",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between",
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: prevMonth,
+									className: cn("rounded-md p-1", OPT_TEXT_SECONDARY, "hover:bg-bg-subtle", OPT_FOCUS_VISIBLE),
+									"aria-label": "Previous month",
+									children: /* @__PURE__ */ jsx(ChevronLeft, {
+										"aria-hidden": "true",
+										className: "size-4 rtl:-scale-x-100"
+									})
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: cn(OPT_TEXT_PRIMARY, "text-sm font-medium"),
+									children: monthLabel
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: nextMonth,
+									className: cn("rounded-md p-1", OPT_TEXT_SECONDARY, "hover:bg-bg-subtle", OPT_FOCUS_VISIBLE),
+									"aria-label": "Next month",
+									children: /* @__PURE__ */ jsx(ChevronRight, {
+										"aria-hidden": "true",
+										className: "size-4 rtl:-scale-x-100"
+									})
+								})
+							]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-0",
+							role: "grid",
+							"aria-label": monthLabel,
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "grid grid-cols-7 gap-0",
+								role: "row",
+								children: DAYS.map((d) => /* @__PURE__ */ jsx("div", {
+									className: cn(OPT_TEXT_TERTIARY, "flex h-8 w-8 items-center justify-center text-xs font-medium"),
+									role: "columnheader",
+									children: d
+								}, d))
+							}), calendarWeeks.map((week, weekIndex) => /* @__PURE__ */ jsx("div", {
+								className: "grid grid-cols-7 gap-0",
+								role: "row",
+								children: week.map((day, dayIndex) => {
+									if (!day) return /* @__PURE__ */ jsx("div", {
+										className: "h-8 w-8",
+										role: "gridcell",
+										"aria-hidden": "true"
+									}, `${monthLabel}-empty-${weekIndex + 1}-${dayIndex + 1}`);
+									const isToday = isSameDay(day, today);
+									const isSelected = range.start && isSameDay(day, range.start) || range.end && isSameDay(day, range.end);
+									const inRange = isInRange(day, range.start, range.end);
+									const isFocused = isSameDay(day, focusedDate);
+									const dayLabel = day.toLocaleDateString("en-US", {
+										weekday: "long",
+										year: "numeric",
+										month: "long",
+										day: "numeric"
+									});
+									const dateKey = getDateKey(day);
+									return /* @__PURE__ */ jsx("div", {
+										role: "gridcell",
+										"aria-selected": isSelected || void 0,
+										className: "flex h-8 w-8 items-center justify-center",
+										children: /* @__PURE__ */ jsx("button", {
+											ref: (node) => {
+												dayButtonRefs.current[dateKey] = node;
+											},
+											type: "button",
+											onClick: () => handleDayClick(day),
+											onFocus: () => setFocusedDate(day),
+											onKeyDown: (event) => handleDayKeyDown(event, day),
+											tabIndex: isFocused ? 0 : -1,
+											className: cn("flex h-8 w-8 items-center justify-center rounded-md text-sm", OPT_FOCUS_VISIBLE, isSelected && "bg-accent text-accent-fg font-medium", !isSelected && inRange && "bg-accent-subtle text-accent-fg", !isSelected && !inRange && "text-text-primary hover:bg-bg-subtle", isToday && !isSelected && "decoration-accent font-semibold underline underline-offset-2"),
+											"aria-label": dayLabel,
+											"aria-current": isToday ? "date" : void 0,
+											children: day.getDate()
+										})
+									}, dateKey);
+								})
+							}, `${monthLabel}-week-${weekIndex + 1}`))]
+						})]
+					})]
+				}), (showGranularity || comparison) && /* @__PURE__ */ jsxs("div", {
+					className: "border-border-subtle mt-3 flex flex-wrap items-center gap-3 border-t pt-3",
+					children: [showGranularity && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1.5",
+						role: "radiogroup",
+						"aria-label": "Time granularity",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn("text-text-secondary", "text-xs font-medium"),
+							children: "Granularity"
+						}), GRANULARITY_OPTIONS.map((opt) => /* @__PURE__ */ jsx("button", {
+							ref: (node) => {
+								granularityButtonRefs.current[opt.value] = node;
+							},
+							type: "button",
+							role: "radio",
+							"aria-checked": granularity === opt.value,
+							onKeyDown: (event) => handleGranularityKeyDown(event, opt.value),
+							onClick: () => onGranularityChange === null || onGranularityChange === void 0 ? void 0 : onGranularityChange(opt.value),
+							className: cn("rounded-md px-2 py-1 text-xs", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset", granularity === opt.value ? "bg-accent text-accent-fg font-medium" : cn("text-text-primary", "hover:bg-bg-subtle")),
+							children: opt.label
+						}, opt.value))]
+					}), comparison && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1.5",
+						role: "group",
+						"aria-label": "Comparison mode",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn("text-text-secondary", "text-xs font-medium"),
+							children: "Compare"
+						}), COMPARISON_OPTIONS.map((opt) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-pressed": comparisonMode === opt.value,
+							onClick: () => onComparisonChange === null || onComparisonChange === void 0 ? void 0 : onComparisonChange(comparisonMode === opt.value ? null : opt.value),
+							className: cn("rounded-md px-2 py-1 text-xs", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset", comparisonMode === opt.value ? "bg-accent text-accent-fg font-medium" : cn("text-text-primary", "hover:bg-bg-subtle")),
+							children: opt.label
+						}, opt.value))]
+					})]
+				})]
+			})] }),
+			/* @__PURE__ */ jsx(FieldMessages, {
+				id: pickerId,
+				error,
+				hint
+			})
+		]
+	});
+}
+DateRangePicker.displayName = "DateRangePicker";
+//#endregion
+//#region src/core/form.tsx
+const _excluded$2 = ["className", "store"];
+const _excluded2 = ["className"];
+const _excluded3 = [
+	"className",
+	"resize",
+	"rows",
+	"name"
+];
+const _excluded4 = ["className"];
+const _excluded5 = ["className"];
+const _excluded6 = [
+	"className",
+	"size",
+	"name"
+];
+const _excluded7 = ["className"];
+const _excluded8 = ["className"];
+const _excluded9 = [
+	"className",
+	"disabled",
+	"children"
+];
+const _excluded10 = ["className"];
+const _excluded11 = ["className"];
+const _excluded12 = ["className"];
+const _excluded13 = ["className"];
+const _excluded14 = ["className"];
+const _excluded15 = ["className"];
+const _excluded16 = ["className"];
+const _excluded17 = ["className"];
+const _excluded18 = ["className"];
+const _excluded19 = ["className"];
+const _excluded20 = ["className"];
+const _excluded21 = ["name"];
+const _excluded22 = ["name"];
+const _excluded23 = ["name"];
+const _excluded24 = ["name"];
+const _excluded25 = ["name"];
+const _excluded26 = ["name"];
+const _excluded27 = ["name"];
+const inputClass = `${OPT_INPUT} aria-[invalid=true]:border-danger`;
+const labelClass = OPT_TEXT_LABEL;
+const descriptionClass = "text-xs text-text-tertiary";
+const errorClass = "text-xs text-danger-fg";
+const submitClass = OPT_BUTTON_PRIMARY;
+const checkboxClass = `h-4 w-4 rounded accent-accent ${OPT_FOCUS_VISIBLE}`;
+const radioClass = `h-4 w-4 accent-accent ${OPT_FOCUS_VISIBLE}`;
+function useRequiredFormContext(componentName) {
+	const form = useFormContext();
+	if (!form) throw new Error(`${componentName} must be used within FormRoot or FormProvider with a store.`);
+	return form;
+}
+/** Renders the form root component. */
+function FormRoot$1(_ref) {
+	let { className, store } = _ref, props = _objectWithoutProperties(_ref, _excluded$2);
+	const form = /* @__PURE__ */ jsx(FormRoot, _objectSpread2({ className: cn("gap-section flex flex-col", className) }, props));
+	if (store) return /* @__PURE__ */ jsx(FormProvider, {
+		store,
+		"data-opt-id": "YBT1H",
+		"data-opt-slug": "form.FormRoot",
+		children: form
+	});
+	return form;
+}
+/** Renders the form input component. */
+function FormInput$1(_ref2) {
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2);
+	return /* @__PURE__ */ jsx(FormInput, _objectSpread2(_objectSpread2({ className: cn(inputClass, className) }, props), {}, {
+		"data-opt-id": "D7Z8F",
+		"data-opt-slug": "form.FormInput"
+	}));
+}
+const resizeStyles = {
+	none: "resize-none",
+	vertical: "resize-y",
+	horizontal: "resize-x",
+	both: "resize"
+};
+/** Renders the form textarea component. */
+function FormTextarea(_ref3) {
+	var _ref4;
+	let { className, resize = "vertical", rows = 4, name } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3);
+	const form = useRequiredFormContext("FormTextarea");
+	const value = (_ref4 = useFieldValue(form, name)) !== null && _ref4 !== void 0 ? _ref4 : "";
+	const error = form === null || form === void 0 ? void 0 : form.getError(name);
+	const touched = form === null || form === void 0 ? void 0 : form.getFieldTouched(name);
+	const hasError = Boolean(error && touched);
+	return /* @__PURE__ */ jsx("textarea", _objectSpread2(_objectSpread2({
+		name,
+		value,
+		onChange: (e) => form === null || form === void 0 ? void 0 : form.setValue(name, e.target.value),
+		className: cn("border-border bg-surface flex w-full rounded-lg border px-4 py-3", "text-text-primary placeholder:text-text-tertiary focus-visible:ring-ring focus-visible:ring-offset-ring-offset text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", OPT_FOCUS_VISIBLE, resizeStyles[resize], hasError && "border-danger", className),
+		rows,
+		"aria-invalid": hasError || void 0
+	}, props), {}, {
+		"data-opt-id": "Q8G2A",
+		"data-opt-slug": "form.FormTextarea"
+	}));
+}
+/** Renders the form select component. */
+function FormSelect({ name, children, className, placeholder, minWidth = 140, "aria-label": ariaLabel }) {
+	var _ref5;
+	const form = useRequiredFormContext("FormSelect");
+	const value = (_ref5 = useFieldValue(form, name)) !== null && _ref5 !== void 0 ? _ref5 : "";
+	const error = form === null || form === void 0 ? void 0 : form.getError(name);
+	const touched = form === null || form === void 0 ? void 0 : form.getFieldTouched(name);
+	const hasError = Boolean(error && touched);
+	const handleSetValue = useCallback((v) => {
+		var _v$;
+		return form.setValue(name, Array.isArray(v) ? (_v$ = v[0]) !== null && _v$ !== void 0 ? _v$ : "" : v);
+	}, [form, name]);
+	return /* @__PURE__ */ jsxs(SelectRoot$1, {
+		value,
+		onValueChange: handleSetValue,
+		"data-opt-id": "A2XF7",
+		"data-opt-slug": "form.FormSelect",
+		children: [/* @__PURE__ */ jsx(SelectTrigger$1, {
+			"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name,
+			"aria-invalid": hasError || void 0,
+			className: cn("inline-flex cursor-pointer items-center justify-between data-[disabled]:cursor-not-allowed", hasError && "border-danger", className),
+			style: { minWidth: typeof minWidth === "number" ? `${minWidth}px` : minWidth },
+			children: value || placeholder || "Select…"
+		}), children]
+	});
+}
+/** Renders the form select popover component. */
+function FormSelectPopover(_ref6) {
+	let { className } = _ref6, props = _objectWithoutProperties(_ref6, _excluded4);
+	return /* @__PURE__ */ jsx(SelectPopover$1, _objectSpread2(_objectSpread2({ className: cn(OPT_SURFACE_POPOVER, OPT_ANIMATE_ENTER_EXIT, "z-[120]", className) }, props), {}, {
+		"data-opt-id": "CQSPJ",
+		"data-opt-slug": "form.FormSelectPopover"
+	}));
+}
+/** Renders the form select item component. */
+function FormSelectItem(_ref7) {
+	let { className } = _ref7, props = _objectWithoutProperties(_ref7, _excluded5);
+	return /* @__PURE__ */ jsx(SelectItem$1, _objectSpread2(_objectSpread2({ className: cn("flex cursor-pointer items-center gap-2 data-[disabled]:cursor-not-allowed", OPT_ITEM_BASE, OPT_ACTIVE_ITEM, className) }, props), {}, {
+		"data-opt-id": "J3970",
+		"data-opt-slug": "form.FormSelectItem"
+	}));
+}
+const switchSizeStyles = {
+	sm: {
+		track: "h-5 w-9",
+		thumb: "h-4 w-4"
+	},
+	md: {
+		track: "h-6 w-11",
+		thumb: "h-5 w-5"
+	},
+	lg: {
+		track: "h-7 w-14",
+		thumb: "h-6 w-6"
+	}
+};
+/** Renders the form switch component. */
+function FormSwitch$1(_ref8) {
+	let { className, size = "md", name } = _ref8, props = _objectWithoutProperties(_ref8, _excluded6);
+	const styles = switchSizeStyles[size];
+	const form = useRequiredFormContext("FormSwitch");
+	const checked = Boolean(useFieldValue(form, name));
+	return /* @__PURE__ */ jsx(FormSwitch, _objectSpread2(_objectSpread2({
+		name,
+		className: cn("group relative inline-flex shrink-0 cursor-pointer rounded-full p-0.5 transition-colors", styles.track, "bg-bg-muted", "aria-[checked=true]:bg-accent", "disabled:cursor-not-allowed disabled:opacity-50", OPT_FOCUS_VISIBLE, className),
+		"aria-checked": checked
+	}, props), {}, {
+		"data-opt-id": "48T40",
+		"data-opt-slug": "form.FormSwitch",
+		children: /* @__PURE__ */ jsx("span", { className: cn("pointer-events-none inline-block transform rounded-full bg-white shadow-sm ring-0 transition-transform", styles.thumb, "translate-x-0", size === "sm" && "group-aria-[checked=true]:translate-x-4", size === "md" && "group-aria-[checked=true]:translate-x-5", size === "lg" && "group-aria-[checked=true]:translate-x-7") })
+	}));
+}
+/** Renders the form label component. */
+function FormLabel$1(_ref9) {
+	let { className } = _ref9, props = _objectWithoutProperties(_ref9, _excluded7);
+	return /* @__PURE__ */ jsx(FormLabel, _objectSpread2(_objectSpread2({ className: cn(labelClass, className) }, props), {}, {
+		"data-opt-id": "JHRKM",
+		"data-opt-slug": "form.FormLabel"
+	}));
+}
+/** Renders the form error component. */
+function FormError$1(_ref10) {
+	let { className } = _ref10, props = _objectWithoutProperties(_ref10, _excluded8);
+	return /* @__PURE__ */ jsx(FormError, _objectSpread2(_objectSpread2({ className: cn(errorClass, className) }, props), {}, {
+		"data-opt-id": "E9NM4",
+		"data-opt-slug": "form.FormError"
+	}));
+}
+/** Renders the form submit component. */
+function FormSubmit$1(_ref11) {
+	var _form$isSubmitting;
+	let { className, disabled, children } = _ref11, props = _objectWithoutProperties(_ref11, _excluded9);
+	const form = useFormContext();
+	const isSubmitting = (_form$isSubmitting = form === null || form === void 0 ? void 0 : form.isSubmitting()) !== null && _form$isSubmitting !== void 0 ? _form$isSubmitting : false;
+	return /* @__PURE__ */ jsx(FormSubmit, _objectSpread2(_objectSpread2({
+		className: cn(submitClass, className),
+		disabled: disabled !== null && disabled !== void 0 ? disabled : isSubmitting
+	}, props), {}, {
+		"data-opt-id": "K580M",
+		"data-opt-slug": "form.FormSubmit",
+		children
+	}));
+}
+/** Renders the form provider component. */
+function FormProvider$1(props) {
+	return /* @__PURE__ */ jsx(FormProvider, _objectSpread2(_objectSpread2({}, props), {}, {
+		"data-opt-id": "G0DQ4",
+		"data-opt-slug": "form.FormProvider"
+	}));
+}
+/** Renders the form group component. */
+function FormGroup$1(_ref12) {
+	let { className } = _ref12, props = _objectWithoutProperties(_ref12, _excluded10);
+	return /* @__PURE__ */ jsx(FormGroup, _objectSpread2(_objectSpread2({ className: cn("gap-group flex flex-col", className) }, props), {}, {
+		"data-opt-id": "89E8Q",
+		"data-opt-slug": "form.FormGroup"
+	}));
+}
+/** Renders the form group label component. */
+function FormGroupLabel$1(_ref13) {
+	let { className } = _ref13, props = _objectWithoutProperties(_ref13, _excluded11);
+	return /* @__PURE__ */ jsx(FormGroupLabel, _objectSpread2(_objectSpread2({ className: cn(labelClass, "font-semibold", className) }, props), {}, {
+		"data-opt-id": "W95BH",
+		"data-opt-slug": "form.FormGroupLabel"
+	}));
+}
+/** Renders the form description component. */
+function FormDescription$1(_ref14) {
+	let { className } = _ref14, props = _objectWithoutProperties(_ref14, _excluded12);
+	return /* @__PURE__ */ jsx(FormDescription, _objectSpread2(_objectSpread2({ className: cn(descriptionClass, className) }, props), {}, {
+		"data-opt-id": "RFB40",
+		"data-opt-slug": "form.FormDescription"
+	}));
+}
+/** Renders the form field component. */
+function FormField$1(_ref15) {
+	let { className } = _ref15, props = _objectWithoutProperties(_ref15, _excluded13);
+	return /* @__PURE__ */ jsx(FormField, _objectSpread2(_objectSpread2({ className: cn("gap-element flex flex-col", className) }, props), {}, {
+		"data-opt-id": "C68GP",
+		"data-opt-slug": "form.FormField"
+	}));
+}
+/** Renders the form control component. */
+function FormControl$1(_ref16) {
+	let { className } = _ref16, props = _objectWithoutProperties(_ref16, _excluded14);
+	return /* @__PURE__ */ jsx(FormControl, _objectSpread2(_objectSpread2({ className: cn(inputClass, className) }, props), {}, {
+		"data-opt-id": "XNF0F",
+		"data-opt-slug": "form.FormControl"
+	}));
+}
+/** Renders the form push component. */
+function FormPush$1(_ref17) {
+	let { className } = _ref17, props = _objectWithoutProperties(_ref17, _excluded15);
+	return /* @__PURE__ */ jsx(FormPush, _objectSpread2(_objectSpread2({ className: cn(OPT_BUTTON_SECONDARY, className) }, props), {}, {
+		"data-opt-id": "5SV8S",
+		"data-opt-slug": "form.FormPush"
+	}));
+}
+/** Renders the form remove component. */
+function FormRemove$1(_ref18) {
+	let { className } = _ref18, props = _objectWithoutProperties(_ref18, _excluded16);
+	return /* @__PURE__ */ jsx(FormRemove, _objectSpread2(_objectSpread2({ className: cn("text-danger-fg hover:text-danger focus-visible:ring-ring focus-visible:ring-offset-ring-offset inline-flex items-center text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", OPT_FOCUS_VISIBLE, className) }, props), {}, {
+		"data-opt-id": "FEW6V",
+		"data-opt-slug": "form.FormRemove"
+	}));
+}
+/** Renders the form reset component. */
+function FormReset$1(_ref19) {
+	let { className } = _ref19, props = _objectWithoutProperties(_ref19, _excluded17);
+	return /* @__PURE__ */ jsx(FormReset, _objectSpread2(_objectSpread2({ className: cn(OPT_BUTTON_SECONDARY, className) }, props), {}, {
+		"data-opt-id": "M3FVB",
+		"data-opt-slug": "form.FormReset"
+	}));
+}
+/** Renders the form checkbox component. */
+function FormCheckbox$1(_ref20) {
+	let { className } = _ref20, props = _objectWithoutProperties(_ref20, _excluded18);
+	return /* @__PURE__ */ jsx(FormCheckbox, _objectSpread2(_objectSpread2({ className: cn(checkboxClass, className) }, props), {}, {
+		"data-opt-id": "3BZS1",
+		"data-opt-slug": "form.FormCheckbox"
+	}));
+}
+/** Renders the form radio group component. */
+function FormRadioGroup$1(_ref21) {
+	let { className } = _ref21, props = _objectWithoutProperties(_ref21, _excluded19);
+	return /* @__PURE__ */ jsx(FormRadioGroup, _objectSpread2(_objectSpread2({ className: cn("gap-group flex flex-col", className) }, props), {}, {
+		"data-opt-id": "J8XRP",
+		"data-opt-slug": "form.FormRadioGroup"
+	}));
+}
+/** Renders the form radio component. */
+function FormRadio$1(_ref22) {
+	let { className } = _ref22, props = _objectWithoutProperties(_ref22, _excluded20);
+	return /* @__PURE__ */ jsx(FormRadio, _objectSpread2(_objectSpread2({ className: cn(radioClass, className) }, props), {}, {
+		"data-opt-id": "YTN4Q",
+		"data-opt-slug": "form.FormRadio"
+	}));
+}
+/** Renders the form number input component. */
+function FormNumberInput(_ref23) {
+	var _ref24;
+	let { name } = _ref23, props = _objectWithoutProperties(_ref23, _excluded21);
+	const form = useRequiredFormContext("FormNumberInput");
+	const value = (_ref24 = useFieldValue(form, name)) !== null && _ref24 !== void 0 ? _ref24 : 0;
+	const error = form === null || form === void 0 ? void 0 : form.getError(name);
+	const touched = form === null || form === void 0 ? void 0 : form.getFieldTouched(name);
+	return /* @__PURE__ */ jsx(NumberInput, _objectSpread2(_objectSpread2({
+		value,
+		onChange: (v) => form.setValue(name, v),
+		error: error && touched ? error : void 0
+	}, props), {}, {
+		"data-opt-id": "FJ2A2",
+		"data-opt-slug": "form.FormNumberInput"
+	}));
+}
+/** Renders the form slider component. */
+function FormSlider(_ref25) {
+	var _ref26;
+	let { name } = _ref25, props = _objectWithoutProperties(_ref25, _excluded22);
+	const form = useRequiredFormContext("FormSlider");
+	const value = (_ref26 = useFieldValue(form, name)) !== null && _ref26 !== void 0 ? _ref26 : 0;
+	return /* @__PURE__ */ jsx(Slider, _objectSpread2(_objectSpread2({
+		value,
+		onChange: (v) => form.setValue(name, v)
+	}, props), {}, {
+		"data-opt-id": "3XQ3A",
+		"data-opt-slug": "form.FormSlider"
+	}));
+}
+/** Renders the form star rating component. */
+function FormStarRating(_ref27) {
+	var _ref28;
+	let { name } = _ref27, props = _objectWithoutProperties(_ref27, _excluded23);
+	const form = useRequiredFormContext("FormStarRating");
+	const value = (_ref28 = useFieldValue(form, name)) !== null && _ref28 !== void 0 ? _ref28 : 0;
+	return /* @__PURE__ */ jsx(StarRating, _objectSpread2(_objectSpread2({
+		value,
+		onChange: (v) => form.setValue(name, v)
+	}, props), {}, {
+		"data-opt-id": "EKNJJ",
+		"data-opt-slug": "form.FormStarRating"
+	}));
+}
+/** Renders the form color picker component. */
+function FormColorPicker(_ref29) {
+	var _ref30;
+	let { name } = _ref29, props = _objectWithoutProperties(_ref29, _excluded24);
+	const form = useRequiredFormContext("FormColorPicker");
+	const value = (_ref30 = useFieldValue(form, name)) !== null && _ref30 !== void 0 ? _ref30 : "#000000";
+	const error = form === null || form === void 0 ? void 0 : form.getError(name);
+	const touched = form === null || form === void 0 ? void 0 : form.getFieldTouched(name);
+	return /* @__PURE__ */ jsx(ColorPicker, _objectSpread2(_objectSpread2({
+		value,
+		onChange: (v) => form.setValue(name, v),
+		error: error && touched ? error : void 0
+	}, props), {}, {
+		"data-opt-id": "4ATTC",
+		"data-opt-slug": "form.FormColorPicker"
+	}));
+}
+/** Renders the form icon picker component. */
+function FormIconPicker(_ref31) {
+	var _ref32;
+	let { name } = _ref31, props = _objectWithoutProperties(_ref31, _excluded25);
+	const form = useRequiredFormContext("FormIconPicker");
+	const value = (_ref32 = useFieldValue(form, name)) !== null && _ref32 !== void 0 ? _ref32 : "";
+	const error = form === null || form === void 0 ? void 0 : form.getError(name);
+	const touched = form === null || form === void 0 ? void 0 : form.getFieldTouched(name);
+	return /* @__PURE__ */ jsx(IconPicker, _objectSpread2(_objectSpread2({
+		value,
+		onChange: (v) => form.setValue(name, v),
+		error: error && touched ? error : void 0
+	}, props), {}, {
+		"data-opt-id": "7Q41M",
+		"data-opt-slug": "form.FormIconPicker"
+	}));
+}
+/** Renders the form tag input component. */
+function FormTagInput(_ref33) {
+	var _ref34;
+	let { name } = _ref33, props = _objectWithoutProperties(_ref33, _excluded26);
+	const form = useRequiredFormContext("FormTagInput");
+	const value = (_ref34 = useFieldValue(form, name)) !== null && _ref34 !== void 0 ? _ref34 : [];
+	const error = form === null || form === void 0 ? void 0 : form.getError(name);
+	const touched = form === null || form === void 0 ? void 0 : form.getFieldTouched(name);
+	return /* @__PURE__ */ jsx(TagInput, _objectSpread2(_objectSpread2({
+		value,
+		onChange: (v) => form.setValue(name, v),
+		error: error && touched ? error : void 0
+	}, props), {}, {
+		"data-opt-id": "W05M1",
+		"data-opt-slug": "form.FormTagInput"
+	}));
+}
+/** Renders the form date range picker component. */
+function FormDateRangePicker(_ref35) {
+	var _ref36;
+	let { name } = _ref35, props = _objectWithoutProperties(_ref35, _excluded27);
+	const form = useRequiredFormContext("FormDateRangePicker");
+	const value = (_ref36 = useFieldValue(form, name)) !== null && _ref36 !== void 0 ? _ref36 : {
+		start: null,
+		end: null
+	};
+	const error = form === null || form === void 0 ? void 0 : form.getError(name);
+	const touched = form === null || form === void 0 ? void 0 : form.getFieldTouched(name);
+	return /* @__PURE__ */ jsx(DateRangePicker, _objectSpread2(_objectSpread2({
+		value,
+		onChange: (v) => form.setValue(name, v),
+		error: error && touched ? error : void 0
+	}, props), {}, {
+		"data-opt-id": "4NE9A",
+		"data-opt-slug": "form.FormDateRangePicker"
+	}));
+}
+//#endregion
+//#region src/core/checkbox.tsx
+const _excluded$1 = [
+	"label",
+	"required",
+	"error",
+	"hint",
+	"description",
+	"checked",
+	"defaultChecked",
+	"onChange",
+	"size",
+	"disabled",
+	"className",
+	"id",
+	"value",
+	"indeterminate"
+];
+const CheckboxGroupContext = createContext(null);
+function setForwardedRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+const sizeStyles = {
+	sm: {
+		box: "h-4 w-4",
+		icon: "h-3 w-3",
+		text: "text-sm"
+	},
+	md: {
+		box: "h-5 w-5",
+		icon: "h-3.5 w-3.5",
+		text: "text-sm"
+	},
+	lg: {
+		box: "h-6 w-6",
+		icon: "h-4 w-4",
+		text: "text-base"
+	}
+};
+function CheckIcon({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		className,
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ jsx("path", { d: "M3.5 8.5L6.5 11.5L12.5 4.5" })
+	});
+}
+function IndeterminateIcon({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		className,
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.5,
+		strokeLinecap: "round",
+		children: /* @__PURE__ */ jsx("path", { d: "M4 8H12" })
+	});
+}
+const Checkbox = forwardRef((_ref, ref) => {
+	var _groupContext$size, _groupContext$disable, _useInputId;
+	let { label, required, error, hint, description, checked: checkedProp, defaultChecked, onChange, size: sizeProp = "md", disabled: disabledProp, className, id, value, indeterminate } = _ref, props = _objectWithoutProperties(_ref, _excluded$1);
+	const groupContext = useContext(CheckboxGroupContext);
+	const size = (_groupContext$size = groupContext === null || groupContext === void 0 ? void 0 : groupContext.size) !== null && _groupContext$size !== void 0 ? _groupContext$size : sizeProp;
+	const disabled = (_groupContext$disable = groupContext === null || groupContext === void 0 ? void 0 : groupContext.disabled) !== null && _groupContext$disable !== void 0 ? _groupContext$disable : disabledProp;
+	const isInGroup = groupContext !== null && value !== void 0;
+	const [internalChecked, setInternalChecked] = useState(defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false);
+	const checked = isInGroup ? groupContext.value.includes(value) : checkedProp !== null && checkedProp !== void 0 ? checkedProp : internalChecked;
+	const handleChange = (event) => {
+		const newChecked = event.target.checked;
+		if (isInGroup && value) {
+			const newValue = newChecked ? [...groupContext.value, value] : groupContext.value.filter((v) => v !== value);
+			groupContext.onChange(newValue);
+		} else if (checkedProp !== void 0) onChange === null || onChange === void 0 || onChange(newChecked);
+		else {
+			setInternalChecked(newChecked);
+			onChange === null || onChange === void 0 || onChange(newChecked);
+		}
+	};
+	const fallbackId = useId().replace(/:/g, "");
+	const checkboxId = (_useInputId = useInputId(id, label, "checkbox")) !== null && _useInputId !== void 0 ? _useInputId : `checkbox-${fallbackId}`;
+	const hintText = hint !== null && hint !== void 0 ? hint : description;
+	const hasError = Boolean(error);
+	const styles = sizeStyles[size];
+	const isIndeterminate = Boolean(indeterminate);
+	const inputRef = useCallback((node) => {
+		if (node) node.indeterminate = isIndeterminate;
+		setForwardedRef(ref, node);
+	}, [isIndeterminate, ref]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", className),
+		"data-opt-id": "3P3MA",
+		"data-opt-slug": "checkbox.Checkbox",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ jsxs("label", {
+				className: cn("relative inline-flex shrink-0 cursor-pointer items-center justify-center", disabled && "cursor-not-allowed"),
+				children: [/* @__PURE__ */ jsx("input", _objectSpread2({
+					ref: inputRef,
+					type: "checkbox",
+					id: checkboxId,
+					checked,
+					onChange: handleChange,
+					disabled,
+					"aria-invalid": hasError,
+					"aria-required": required,
+					"aria-describedby": getDescribedBy(checkboxId, error, hintText),
+					className: "peer sr-only"
+				}, props)), /* @__PURE__ */ jsx("span", {
+					className: cn("inline-flex items-center justify-center rounded", styles.box, "border-border border-2", "bg-surface", "peer-checked:border-accent peer-checked:bg-accent", isIndeterminate && "border-accent bg-accent", "peer-disabled:cursor-not-allowed peer-disabled:opacity-50", "peer-focus-visible:ring-ring peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1", "transition-colors"),
+					children: isIndeterminate ? /* @__PURE__ */ jsx(IndeterminateIcon, { className: cn(styles.icon, "text-accent-fg opacity-0 transition-opacity", "opacity-100") }) : /* @__PURE__ */ jsx(CheckIcon, { className: cn(styles.icon, "text-accent-fg opacity-0 transition-opacity", checked && "opacity-100") })
+				})]
+			}), (label || hintText) && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [label && /* @__PURE__ */ jsxs("label", {
+					htmlFor: checkboxId,
+					className: cn("text-text-primary cursor-pointer font-medium", styles.text, disabled && "cursor-not-allowed opacity-50"),
+					children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+				}), hintText && /* @__PURE__ */ jsx("p", {
+					id: `${checkboxId}-hint`,
+					className: cn("text-text-tertiary text-sm", disabled && "opacity-50"),
+					children: hintText
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(FieldMessages, {
+			id: checkboxId,
+			error
+		})]
+	});
+});
+Checkbox.displayName = "Checkbox";
+const EMPTY_STRING_ARRAY = [];
+/** Renders the checkbox group component. */
+function CheckboxGroup({ children, value: valueProp, defaultValue = EMPTY_STRING_ARRAY, onChange, disabled, size = "md", error, required, className, orientation = "vertical", label }) {
+	const [value, setValue] = useControlledState(defaultValue, valueProp, onChange);
+	const hasError = Boolean(error);
+	const groupId = label ? `checkbox-group-${label.replace(/\s+/g, "-").toLowerCase()}` : void 0;
+	const ctxValue = useMemo(() => ({
+		value,
+		onChange: setValue,
+		disabled,
+		size
+	}), [
+		value,
+		setValue,
+		disabled,
+		size
+	]);
+	return /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, {
+		value: ctxValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("flex flex-col gap-1.5", className),
+			"data-opt-id": "V6NSW",
+			"data-opt-slug": "checkbox.CheckboxGroup",
+			children: [/* @__PURE__ */ jsxs("div", {
+				role: "group",
+				"aria-label": label,
+				"aria-required": required,
+				"aria-invalid": hasError,
+				"aria-describedby": hasError && groupId ? `${groupId}-error` : void 0,
+				className: cn("flex", orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-6"),
+				children: [label && /* @__PURE__ */ jsxs("div", {
+					className: "text-text-secondary mb-1 text-sm font-medium",
+					children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+				}), children]
+			}), /* @__PURE__ */ jsx(FieldMessages, {
+				id: groupId,
+				error
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/core/pagination.tsx
+const _excluded = [
+	"totalItems",
+	"totalPages",
+	"hasMore",
+	"pageSize",
+	"currentPage",
+	"onPageChange",
+	"showPageNumbers",
+	"siblingCount",
+	"variant",
+	"isDisabled",
+	"label",
+	"labels",
+	"className"
+];
+const DEFAULT_LABELS = {
+	previous: "Previous page",
+	next: "Next page",
+	page: (page) => `Go to page ${page}`,
+	currentPage: (page) => `Page ${page}, current page`,
+	compact: (page, totalPages) => totalPages === void 0 ? `Page ${page}` : `Page ${page} of ${totalPages}`,
+	count: (start, end, totalItems) => `${start}-${end} of ${totalItems}`
+};
+function buildPageRange(current, total, siblings) {
+	if (total <= 1) return [1];
+	const range = [];
+	const left = Math.max(2, current - siblings);
+	const right = Math.min(total - 1, current + siblings);
+	range.push(1);
+	if (left > 2) range.push("ellipsis");
+	for (let i = left; i <= right; i++) range.push(i);
+	if (right < total - 1) range.push("ellipsis");
+	if (total > 1) range.push(total);
+	return range;
+}
+function positiveInteger(value) {
+	if (!Number.isFinite(value) || value === void 0 || value <= 0) return;
+	return Math.max(1, Math.floor(value));
+}
+function resolveTotalPages({ totalItems, totalPages, pageSize, currentPage, hasMore }) {
+	const explicitTotalPages = positiveInteger(totalPages);
+	if (explicitTotalPages !== void 0) return explicitTotalPages;
+	const safePageSize = positiveInteger(pageSize);
+	if (safePageSize !== void 0 && Number.isFinite(totalItems) && totalItems !== void 0) return Math.max(1, Math.ceil(Math.max(0, totalItems) / safePageSize));
+	if (hasMore) return Math.max(1, Math.floor(currentPage) + 1);
+	return Math.max(1, Math.floor(currentPage));
+}
+function clampPage(page, totalPages) {
+	if (!Number.isFinite(page)) return 1;
+	return Math.min(Math.max(1, Math.floor(page)), totalPages);
+}
+const btnBase = `inline-flex h-8 min-w-8 items-center justify-center rounded-md px-2 text-sm transition-colors ${OPT_FOCUS_VISIBLE}`;
+const btnEnabled = "text-text-primary hover:bg-bg-subtle active:bg-bg-muted cursor-pointer";
+const btnDisabled = "text-text-tertiary cursor-not-allowed opacity-50";
+const btnActive = "bg-accent text-accent-fg hover:bg-accent-hover cursor-default";
+/** Renders the pagination component. */
+function Pagination(_ref) {
+	let { totalItems, totalPages: totalPagesProp, hasMore, pageSize, currentPage, onPageChange, showPageNumbers = true, siblingCount = 1, variant, isDisabled = false, label = "Pagination", labels, className } = _ref, props = _objectWithoutProperties(_ref, _excluded);
+	const resolvedLabels = _objectSpread2(_objectSpread2({}, DEFAULT_LABELS), labels);
+	const totalPages = resolveTotalPages({
+		totalItems,
+		totalPages: totalPagesProp,
+		pageSize,
+		currentPage,
+		hasMore
+	});
+	const safeCurrentPage = clampPage(currentPage, totalPages);
+	const resolvedVariant = variant !== null && variant !== void 0 ? variant : showPageNumbers ? "pages" : "none";
+	const itemRange = Number.isFinite(totalItems) && totalItems !== void 0 && positiveInteger(pageSize) !== void 0 ? {
+		start: totalItems === 0 ? 0 : (safeCurrentPage - 1) * pageSize + 1,
+		end: Math.min(safeCurrentPage * pageSize, totalItems)
+	} : null;
+	const pages = useMemo(() => buildPageRange(safeCurrentPage, totalPages, siblingCount), [
+		safeCurrentPage,
+		totalPages,
+		siblingCount
+	]);
+	const hasPrev = safeCurrentPage > 1;
+	const hasNext = hasMore === true || safeCurrentPage < totalPages;
+	const prevDisabled = isDisabled || !hasPrev;
+	const nextDisabled = isDisabled || !hasNext;
+	const handlePageChange = (page) => {
+		if (isDisabled) return;
+		const next = hasMore ? Math.max(1, Math.floor(page)) : clampPage(page, totalPages);
+		if (next !== safeCurrentPage) onPageChange(next);
+	};
+	return /* @__PURE__ */ jsxs("nav", _objectSpread2(_objectSpread2({
+		"aria-label": label,
+		className: cn("gap-element flex items-center", className)
+	}, props), {}, {
+		"data-opt-id": "QBEE2",
+		"data-opt-slug": "pagination.Pagination",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn(btnBase, prevDisabled ? btnDisabled : btnEnabled),
+				disabled: prevDisabled,
+				onClick: () => handlePageChange(safeCurrentPage - 1),
+				"aria-label": resolvedLabels.previous,
+				children: /* @__PURE__ */ jsx("svg", {
+					width: "16",
+					height: "16",
+					viewBox: "0 0 16 16",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					children: /* @__PURE__ */ jsx("path", { d: "M10 12 6 8l4-4" })
+				})
+			}),
+			resolvedVariant === "pages" && pages.map((p, i) => p === "ellipsis" ? /* @__PURE__ */ jsx("span", {
+				className: "text-text-tertiary px-1",
+				"aria-hidden": "true",
+				children: "…"
+			}, `e${i}`) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn(btnBase, p === safeCurrentPage ? btnActive : btnEnabled),
+				"aria-current": p === safeCurrentPage ? "page" : void 0,
+				"aria-label": p === safeCurrentPage ? resolvedLabels.currentPage(p) : resolvedLabels.page(p),
+				disabled: isDisabled,
+				onClick: () => handlePageChange(p),
+				children: p
+			}, p)),
+			resolvedVariant === "count" && itemRange && totalItems !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: "text-text-secondary px-2 text-sm",
+				"aria-live": "polite",
+				children: resolvedLabels.count(itemRange.start, itemRange.end, totalItems)
+			}),
+			resolvedVariant === "compact" && /* @__PURE__ */ jsx("span", {
+				className: "text-text-secondary px-2 text-sm",
+				"aria-live": "polite",
+				children: resolvedLabels.compact(safeCurrentPage, hasMore && totalPages === safeCurrentPage + 1 ? void 0 : totalPages)
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn(btnBase, nextDisabled ? btnDisabled : btnEnabled),
+				disabled: nextDisabled,
+				onClick: () => handlePageChange(safeCurrentPage + 1),
+				"aria-label": resolvedLabels.next,
+				children: /* @__PURE__ */ jsx("svg", {
+					width: "16",
+					height: "16",
+					viewBox: "0 0 16 16",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" })
+				})
+			})
+		]
+	}));
+}
+//#endregion
+export { TooltipAnchor$1 as $, koBreadcrumbLabels as $t, FormSwitch$1 as A, OPT_SURFACE_POPOVER as An, SelectPopover$1 as At, getIconRegistryEntry as B, _objectSpread2 as Bn, Composite as Bt, FormRoot$1 as C, OPT_FOCUS as Cn, DialogFooter as Ct, FormSlider as D, OPT_INPUT_ERROR as Dn, DialogRoot$1 as Dt, FormSelectPopover as E, OPT_INPUT as En, DialogPanel$1 as Et, useFormStore as F, OPT_TEXT_LABEL as Fn, TabPanel$1 as Ft, PopoverTrigger$1 as G, StarRating as Gt, PopoverClose$1 as H, Kbd as Hn, CompositeProvider as Ht, DEFAULT_PRESETS as I, OPT_TEXT_PRIMARY as In, TabsRoot$1 as It, ToolbarButton$1 as J, Alert as Jt, Slider as K, Input as Kt, DateRangePicker as L, OPT_TEXT_SECONDARY as Ln, DisclosureContent$1 as Lt, FormTextarea as M, OPT_TD as Mn, SelectTrigger$1 as Mt, useFieldValue as N, OPT_TD_MUTED as Nn, Tab$1 as Nt, FormStarRating as O, OPT_ITEM_BASE as On, SelectItem$1 as Ot, useFormContext as P, OPT_TEXTAREA_SIZE as Pn, TabList$1 as Pt, Tooltip$1 as Q, Button as Qt, TagInput as R, OPT_TEXT_TERTIARY as Rn, DisclosureRoot$1 as Rt, FormReset$1 as S, OPT_DOT_YELLOW as Sn, DialogDismiss$1 as St, FormSelectItem as T, OPT_HOVER_ITEM as Tn, DialogHeading$1 as Tt, PopoverContent$1 as U, cn as Un, CompositeRow as Ut, ColorPicker as V, _objectWithoutProperties as Vn, CompositeItem as Vt, PopoverRoot$1 as W, CompositeZone as Wt, ToolbarRoot$1 as X, Badge as Xt, ToolbarContainer$1 as Y, Spinner as Yt, ToolbarSeparator$1 as Z, EmptyState as Zt, FormProvider$1 as _, OPT_DISCLOSURE_TRIGGER as _n, ComboboxRoot$1 as _t, FormColorPicker as a, RequiredMark as an, MenuPopover$1 as at, FormRadioGroup$1 as b, OPT_DOT_GREEN as bn, DialogDescription$1 as bt, FormDescription$1 as c, OPT_ANIMATE_DRAWER as cn, MenuTrigger$1 as ct, FormGroup$1 as d, OPT_BADGE_GREEN as dn, ComboboxEmpty as dt, koComboboxLabels as en, TooltipProvider$1 as et, FormGroupLabel$1 as f, OPT_BADGE_NEUTRAL as fn, ComboboxGroup$1 as ft, FormNumberInput as g, OPT_DISCLOSURE_CONTENT as gn, ComboboxPopover$1 as gt, FormLabel$1 as h, OPT_BORDER as hn, ComboboxItem$1 as ht, FormCheckbox$1 as i, FieldMessages as in, MenuItemRadio$1 as it, FormTagInput as j, OPT_TABLE_ROW_ACTIVE as jn, SelectRoot$1 as jt, FormSubmit$1 as k, OPT_SURFACE as kn, SelectLabel$1 as kt, FormError$1 as l, OPT_ANIMATE_ENTER_EXIT as ln, MenubarContainer$1 as lt, FormInput$1 as m, OPT_BADGE_YELLOW as mn, ComboboxInput$1 as mt, Checkbox as n, StatCard as nn, MenuItem$1 as nt, FormControl$1 as o, getDescribedBy as on, MenuRoot$1 as ot, FormIconPicker as p, OPT_BADGE_RED as pn, ComboboxGroupLabel$1 as pt, NumberInput as q, useInputId as qt, CheckboxGroup as r, useControlledState as rn, MenuItemCheckbox$1 as rt, FormDateRangePicker as s, OPT_ACTIVE_ITEM as sn, MenuSeparator$1 as st, Pagination as t, koStarRatingLabels as tn, MenuButtonArrow$1 as tt, FormField$1 as u, OPT_BADGE_BLUE as un, MenubarRoot$1 as ut, FormPush$1 as v, OPT_DIVIDER as vn, AlertDialogPanel$1 as vt, FormSelect as w, OPT_FOCUS_VISIBLE as wn, DialogHeader as wt, FormRemove$1 as x, OPT_DOT_RED as xn, DialogDisclosure$1 as xt, FormRadio$1 as y, OPT_DOT_GRAY as yn, DialogBody as yt, IconPicker as z, OPT_TH as zn, DisclosureTrigger$1 as zt };
+
+//# sourceMappingURL=pagination-DWbvACuN.js.map