@devslab/dds-react 0.21.2 → 0.22.0

package/dist/index.js

@@ -1,167 +1,47 @@
-import { createContext as e, forwardRef as t, useContext as n, useEffect as r, useId as i, useMemo as a, useRef as o, useState as s } from "react";
-import { Field as c, Field as l } from "@ark-ui/react/field";
-import { Checkbox as u, Checkbox as d } from "@ark-ui/react/checkbox";
-import { Switch as f, Switch as p } from "@ark-ui/react/switch";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
-import { Tabs as _, Tabs as v, useTabsContext as y } from "@ark-ui/react/tabs";
-import { RadioGroup as b, RadioGroup as x, useRadioGroupContext as S } from "@ark-ui/react/radio-group";
-import { Dialog as C, Dialog as w } from "@ark-ui/react/dialog";
-import { Tooltip as T, Tooltip as E } from "@ark-ui/react/tooltip";
-import { Portal as D } from "@ark-ui/react/portal";
-import { directionPolicy as O, icons as k } from "@devslab/dds-icons";
-import { Toast as A, Toast as j, Toaster as M, createToaster as N } from "@ark-ui/react/toast";
-import { DatePicker as P, DatePicker as F, parseDate as I } from "@ark-ui/react/date-picker";
-//#region src/controls.tsx
-var L = (...e) => e.filter(Boolean).join(" "), R = t(function({ tone: e = "primary", size: t = "md", loading: n, disabled: r, type: i = "button", className: a, children: o, ...s }, c) {
-	return /* @__PURE__ */ g("button", {
-		...s,
-		ref: c,
-		type: i,
-		disabled: r || n,
-		"aria-busy": n || void 0,
-		className: L("dds-btn", `dds-btn--${e}`, t !== "md" && `dds-btn--${t}`, a),
-		children: [n && /* @__PURE__ */ h("span", {
-			className: "dds-spinner",
-			"aria-hidden": !0
-		}), o]
-	});
-}), z = t(function({ tone: e = "ghost", size: t = "md", loading: n, disabled: r, type: i = "button", className: a, children: o, ...s }, c) {
-	return /* @__PURE__ */ h("button", {
-		...s,
-		ref: c,
-		type: i,
-		disabled: r || n,
-		"aria-busy": n || void 0,
-		className: L("dds-iconbtn", e !== "ghost" && `dds-iconbtn--${e}`, t !== "md" && `dds-iconbtn--${t}`, a),
-		children: n ? /* @__PURE__ */ h("span", {
-			className: "dds-spinner",
-			"aria-hidden": !0
-		}) : o
-	});
-}), B = t(function({ id: e, label: t, helpText: n, error: r, required: a, className: o, children: s, ...c }, u) {
-	let d = i(), f = e ?? `dds-field-${d}`, p = {
-		id: f,
-		"aria-describedby": [n && `${f}-help`, r && `${f}-error`].filter(Boolean).join(" ") || void 0,
-		"aria-invalid": r ? !0 : void 0,
-		"aria-required": a ? !0 : void 0
-	};
-	return /* @__PURE__ */ g(l.Root, {
-		...c,
-		ref: u,
-		invalid: !!r,
-		required: a,
-		id: f,
-		ids: {
-			control: `${f}-root`,
-			helperText: `${f}-help`,
-			errorText: `${f}-error`
-		},
-		className: L("dds-field", !!r && "dds-field--error", o),
-		children: [
-			/* @__PURE__ */ g(l.Label, {
-				htmlFor: f,
-				className: "dds-field__label",
-				children: [t, a && /* @__PURE__ */ h("span", {
-					"aria-hidden": !0,
-					children: " *"
-				})]
-			}),
-			typeof s == "function" ? s(p) : s,
-			n && /* @__PURE__ */ h(l.HelperText, {
-				className: "dds-field__help",
-				children: n
-			}),
-			r && /* @__PURE__ */ h(l.ErrorText, {
-				className: "dds-field__error",
-				role: "alert",
-				children: r
-			})
-		]
-	});
-}), V = t(function({ invalid: e, wrapperClassName: t, className: n, children: r, ...i }, a) {
-	return /* @__PURE__ */ h("span", {
-		className: L("dds-select", t),
-		children: /* @__PURE__ */ h("select", {
-			...i,
-			ref: a,
-			className: L("dds-select__input", n),
-			"aria-invalid": e || i["aria-invalid"],
-			children: r
-		})
-	});
-}), H = t(function({ kind: e, label: t, checked: n, defaultChecked: r, onCheckedChange: i, id: a, name: o, value: s, disabled: c, required: l, readOnly: u, form: f, className: m, inputClassName: _, onChange: v, ...y }, b) {
-	let x = e === "switch" ? p.Root : d.Root, S = e === "switch" ? p.Label : d.Label, C = e === "switch" ? p.Context : d.Context, w = e === "switch" ? "dds-switch" : "dds-check";
-	return /* @__PURE__ */ g(x, {
-		checked: n,
-		defaultChecked: r,
-		onCheckedChange: (e) => i?.(e.checked === !0),
-		ids: a ? { hiddenInput: a } : void 0,
-		name: o,
-		value: String(s ?? "on"),
-		disabled: c,
-		required: l,
-		readOnly: u,
-		form: f,
-		className: L(w, m),
-		children: [/* @__PURE__ */ h(C, { children: (t) => {
-			let { style: n, defaultChecked: r, ...i } = t.getHiddenInputProps();
-			return /* @__PURE__ */ h("input", {
-				...i,
-				...y,
-				ref: b,
-				checked: t.checked,
-				role: e === "switch" ? "switch" : void 0,
-				onChange: v ?? (() => {}),
-				onClick: (e) => {
-					y.onClick?.(e), e.defaultPrevented || i.onClick?.(e);
-				},
-				className: L(`${w}__input`, _)
-			});
-		} }), /* @__PURE__ */ h(S, { children: t })]
-	});
-}), U = t((e, t) => /* @__PURE__ */ h(H, {
-	...e,
-	kind: "checkbox",
-	ref: t
-})), W = t((e, t) => /* @__PURE__ */ h(H, {
-	...e,
-	kind: "switch",
-	ref: t
-})), G = t(function({ label: e, className: t, inputClassName: n, onCheckedChange: r, onChange: i, ...a }, o) {
-	return /* @__PURE__ */ g("label", {
-		className: L("dds-check", t),
-		children: [/* @__PURE__ */ h("input", {
-			...a,
-			ref: o,
-			type: "radio",
-			className: L("dds-check__input", n),
-			onChange: (e) => {
-				i?.(e), e.defaultPrevented || r?.(e.currentTarget.checked);
-			}
-		}), /* @__PURE__ */ h("span", { children: e })]
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./controls-BajigKUv.js";
+import { DatePicker as c } from "./date-picker.js";
+import { Input as l, InputGroup as u } from "./input.js";
+import { Combobox as d } from "./combobox.js";
+import { SelectPicker as f } from "./select-picker.js";
+import { DropdownMenu as p } from "./dropdown-menu.js";
+import { Popover as m } from "./popover.js";
+import { Calendar as h } from "./calendar.js";
+import { createContext as g, forwardRef as _, useContext as v, useEffect as y, useId as b, useMemo as x, useRef as S, useState as C } from "react";
+import { Field as w } from "@ark-ui/react/field";
+import { Checkbox as T } from "@ark-ui/react/checkbox";
+import { Switch as E } from "@ark-ui/react/switch";
+import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
+import { Tabs as A, Tabs as j, useTabsContext as ee } from "@ark-ui/react/tabs";
+import { RadioGroup as te, RadioGroup as M, useRadioGroupContext as N } from "@ark-ui/react/radio-group";
+import { Dialog as P, Dialog as F } from "@ark-ui/react/dialog";
+import { Tooltip as I, Tooltip as L } from "@ark-ui/react/tooltip";
+import { Portal as R } from "@ark-ui/react/portal";
+import { directionPolicy as z, icons as B } from "@devslab/dds-icons";
+import { Toast as V, Toast as H, Toaster as U, createToaster as W } from "@ark-ui/react/toast";
+import { DatePicker as G } from "@ark-ui/react/date-picker";
+//#region src/selection.tsx
+var K = _(function({ onValueChange: e, unstyled: n, className: r, ...i }, a) {
+	return /* @__PURE__ */ O(j.Root, {
+		...i,
+		ref: a,
+		onValueChange: (t) => e?.(t.value),
+		className: t(!n && "dds-tabs-root", r)
 	});
-}), ee = t(function({ onValueChange: e, unstyled: t, className: n, ...r }, i) {
-	return /* @__PURE__ */ h(v.Root, {
+}), q = _(function({ unstyled: e, className: n, ...r }, i) {
+	return /* @__PURE__ */ O(j.List, {
 		...r,
 		ref: i,
-		onValueChange: (t) => e?.(t.value),
-		className: L(!t && "dds-tabs-root", n)
+		className: t(!e && "dds-tabs", n)
 	});
-}), te = t(function({ unstyled: e, className: t, ...n }, r) {
-	return /* @__PURE__ */ h(v.List, {
-		...n,
-		ref: r,
-		className: L(!e && "dds-tabs", t)
-	});
-}), ne = t(function({ unstyled: e, className: t, ...n }, r) {
-	return /* @__PURE__ */ h(v.Trigger, {
-		...n,
-		ref: r,
-		className: L(!e && "dds-tab", t)
+}), J = _(function({ unstyled: e, className: n, ...r }, i) {
+	return /* @__PURE__ */ O(j.Trigger, {
+		...r,
+		ref: i,
+		className: t(!e && "dds-tab", n)
 	});
-}), re = t(function({ value: e, style: t, ...n }, r) {
-	let i = y().value !== e;
-	return /* @__PURE__ */ h(v.Content, {
+}), Y = _(function({ value: e, style: t, ...n }, r) {
+	let i = ee().value !== e;
+	return /* @__PURE__ */ O(j.Content, {
 		...n,
 		value: e,
 		ref: r,
@@ -172,92 +52,92 @@ var L = (...e) => e.filter(Boolean).join(" "), R = t(function({ tone: e = "prima
 		} : t
 	});
 });
-function ie({ option: e }) {
-	let t = S(), { style: n, defaultChecked: r, ...i } = t.getItemHiddenInputProps(e);
-	return /* @__PURE__ */ h("input", {
+function X({ option: e }) {
+	let t = N(), { style: n, defaultChecked: r, ...i } = t.getItemHiddenInputProps(e);
+	return /* @__PURE__ */ O("input", {
 		...i,
 		checked: t.value === e.value,
 		onChange: () => {},
 		className: "dds-check__input"
 	});
 }
-var ae = t(function({ options: e, label: t, onValueChange: n, className: r, children: i, ...a }, o) {
-	return /* @__PURE__ */ g(x.Root, {
-		...a,
-		ref: o,
+var Z = _(function({ options: e, label: n, onValueChange: r, className: i, children: a, ...o }, s) {
+	return /* @__PURE__ */ k(M.Root, {
+		...o,
+		ref: s,
 		onValueChange: (e) => {
-			e.value !== null && n?.(e.value);
+			e.value !== null && r?.(e.value);
 		},
-		className: L("dds-radio-group", r),
+		className: t("dds-radio-group", i),
 		children: [
-			/* @__PURE__ */ h(x.Label, {
+			/* @__PURE__ */ O(M.Label, {
 				className: "dds-field__label",
-				children: t
+				children: n
 			}),
-			e.map((e) => /* @__PURE__ */ g(x.Item, {
+			e.map((e) => /* @__PURE__ */ k(M.Item, {
 				value: e.value,
 				disabled: e.disabled,
 				className: "dds-check",
-				children: [/* @__PURE__ */ h(ie, { option: e }), /* @__PURE__ */ h(x.ItemText, { children: e.label })]
+				children: [/* @__PURE__ */ O(X, { option: e }), /* @__PURE__ */ O(M.ItemText, { children: e.label })]
 			}, e.value)),
-			i
+			a
 		]
 	});
-}), oe = t(function({ title: e, description: t, children: n, actions: r, onOpenChange: i, closeOnOutside: a, portal: o = !0, className: s, overlayClassName: c, contentProps: l, initialFocus: u, finalFocus: d, frame: f, unstyled: p, ..._ }, v) {
-	let y = {
-		title: /* @__PURE__ */ h(w.Title, {
-			className: p ? void 0 : "dds-dialog__title",
+}), ne = _(function({ title: e, description: n, children: r, actions: i, onOpenChange: a, closeOnOutside: o, portal: s = !0, className: c, overlayClassName: l, contentProps: u, initialFocus: d, finalFocus: f, frame: p, unstyled: m, ...h }, g) {
+	let _ = {
+		title: /* @__PURE__ */ O(F.Title, {
+			className: m ? void 0 : "dds-dialog__title",
 			children: e
 		}),
-		description: t && /* @__PURE__ */ h(w.Description, {
-			className: p ? void 0 : "dds-dialog__body",
-			children: t
+		description: n && /* @__PURE__ */ O(F.Description, {
+			className: m ? void 0 : "dds-dialog__body",
+			children: n
 		}),
-		children: n,
-		actions: r && /* @__PURE__ */ h("div", {
-			className: p ? void 0 : "dds-dialog__actions",
-			children: r
+		children: r,
+		actions: i && /* @__PURE__ */ O("div", {
+			className: m ? void 0 : "dds-dialog__actions",
+			children: i
 		})
-	}, b = /* @__PURE__ */ h(w.Positioner, {
-		className: L(!p && "dds-dialog-overlay", c),
-		children: /* @__PURE__ */ h(w.Content, {
-			...l,
-			ref: v,
-			"aria-describedby": t ? l?.["aria-describedby"] : void 0,
-			className: L(!p && "dds-dialog", s, l?.className),
-			children: f ? f(y) : /* @__PURE__ */ g(m, { children: [
-				y.title,
-				y.description,
-				n,
-				y.actions
+	}, v = /* @__PURE__ */ O(F.Positioner, {
+		className: t(!m && "dds-dialog-overlay", l),
+		children: /* @__PURE__ */ O(F.Content, {
+			...u,
+			ref: g,
+			"aria-describedby": n ? u?.["aria-describedby"] : void 0,
+			className: t(!m && "dds-dialog", c, u?.className),
+			children: p ? p(_) : /* @__PURE__ */ k(D, { children: [
+				_.title,
+				_.description,
+				r,
+				_.actions
 			] })
 		})
 	});
-	return /* @__PURE__ */ h(w.Root, {
-		..._,
-		onOpenChange: (e) => i?.(e.open),
-		closeOnInteractOutside: a ?? _.closeOnInteractOutside,
-		initialFocusEl: u ? () => u() ?? null : _.initialFocusEl,
-		finalFocusEl: d ? () => d() ?? null : _.finalFocusEl,
+	return /* @__PURE__ */ O(F.Root, {
+		...h,
+		onOpenChange: (e) => a?.(e.open),
+		closeOnInteractOutside: o ?? h.closeOnInteractOutside,
+		initialFocusEl: d ? () => d() ?? null : h.initialFocusEl,
+		finalFocusEl: f ? () => f() ?? null : h.finalFocusEl,
 		lazyMount: !0,
 		unmountOnExit: !0,
-		children: o ? /* @__PURE__ */ h(D, { children: b }) : b
+		children: s ? /* @__PURE__ */ O(R, { children: v }) : v
 	});
 });
-function se({ content: e, children: t, onOpenChange: n, className: r, contentProps: i, ...a }) {
-	return /* @__PURE__ */ h(E.Root, {
+function re({ content: e, children: n, onOpenChange: r, className: i, contentProps: a, ...o }) {
+	return /* @__PURE__ */ O(L.Root, {
 		openDelay: 0,
 		closeDelay: 0,
-		...a,
-		onOpenChange: (e) => n?.(e.open),
-		children: /* @__PURE__ */ g("span", {
-			className: L("dds-tooltip", r),
-			children: [typeof t == "function" ? /* @__PURE__ */ h(E.Context, { children: (e) => t(e.getTriggerProps()) }) : /* @__PURE__ */ h(E.Trigger, {
+		...o,
+		onOpenChange: (e) => r?.(e.open),
+		children: /* @__PURE__ */ k("span", {
+			className: t("dds-tooltip", i),
+			children: [typeof n == "function" ? /* @__PURE__ */ O(L.Context, { children: (e) => n(e.getTriggerProps()) }) : /* @__PURE__ */ O(L.Trigger, {
 				asChild: !0,
-				children: t
-			}), /* @__PURE__ */ h(D, { children: /* @__PURE__ */ h(E.Positioner, { children: /* @__PURE__ */ h(E.Content, {
-				...i,
-				className: L("dds-tooltip__bubble", i?.className),
+				children: n
+			}), /* @__PURE__ */ O(R, { children: /* @__PURE__ */ O(L.Positioner, { children: /* @__PURE__ */ O(L.Content, {
+				...a,
+				className: t("dds-tooltip__bubble", a?.className),
 				children: e
 			}) }) })]
 		})
@@ -265,71 +145,71 @@ function se({ content: e, children: t, onOpenChange: n, className: r, contentPro
 }
 //#endregion
 //#region src/icon.tsx
-var ce = t(function({ name: e, label: t, size: n = 24, directional: r, className: i, ...a }, o) {
-	let s = k[e];
-	return /* @__PURE__ */ g("svg", {
-		...a,
-		ref: o,
-		viewBox: s.viewBox,
-		width: n,
-		height: n,
+var Q = _(function({ name: e, label: n, size: r = 24, directional: i, className: a, ...o }, s) {
+	let c = B[e];
+	return /* @__PURE__ */ k("svg", {
+		...o,
+		ref: s,
+		viewBox: c.viewBox,
+		width: r,
+		height: r,
 		fill: "none",
 		stroke: "currentColor",
-		strokeWidth: s.strokeWidth,
+		strokeWidth: c.strokeWidth,
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		role: t ? "img" : void 0,
-		"aria-label": t,
-		"aria-hidden": !t || void 0,
-		className: L((r ?? O.mirrorInRtl.includes(e)) && O.cssClass, i),
-		children: [t && /* @__PURE__ */ h("title", { children: t }), /* @__PURE__ */ h("g", { dangerouslySetInnerHTML: { __html: s.body } })]
+		role: n ? "img" : void 0,
+		"aria-label": n,
+		"aria-hidden": !n || void 0,
+		className: t((i ?? z.mirrorInRtl.includes(e)) && z.cssClass, a),
+		children: [n && /* @__PURE__ */ O("title", { children: n }), /* @__PURE__ */ O("g", { dangerouslySetInnerHTML: { __html: c.body } })]
 	});
-}), K = e(null);
-function le({ children: e, defaultDuration: t = 5e3, dismissLabel: n, regionLabel: s, className: c }) {
-	let l = i(), u = o(0), d = a(() => N({
+}), $ = g(null);
+function ie({ children: e, defaultDuration: n = 5e3, dismissLabel: r, regionLabel: i, className: a }) {
+	let o = b(), s = S(0), c = x(() => W({
 		placement: "bottom-end",
 		overlap: !1,
 		gap: 8,
 		offsets: "var(--dds-space-16)",
 		removeDelay: 0,
 		hotkey: ["DDS_NO_HOTKEY"]
-	}), []), f = a(() => ({
+	}), []), l = x(() => ({
 		show(e) {
-			let n = `dds-toast-${l}-${++u.current}`, r = e.duration ?? t;
-			return d.create({
-				id: n,
+			let t = `dds-toast-${o}-${++s.current}`, r = e.duration ?? n;
+			return c.create({
+				id: t,
 				description: e.message,
 				type: e.tone === "danger" ? "error" : e.tone ?? "info",
 				duration: r > 0 ? r : Infinity,
 				meta: { dds: {
 					...e,
-					id: n
+					id: t
 				} }
-			}), n;
+			}), t;
 		},
-		dismiss: (e) => d.remove(e),
-		clear: () => d.remove()
+		dismiss: (e) => c.remove(e),
+		clear: () => c.remove()
 	}), [
-		d,
-		l,
-		t
+		c,
+		o,
+		n
 	]);
-	return r(() => () => d.remove(), [d]), /* @__PURE__ */ g(K.Provider, {
-		value: f,
-		children: [e, /* @__PURE__ */ h(M, {
-			toaster: d,
-			label: s ?? "",
-			"aria-label": s ?? "",
-			role: s ? "region" : "presentation",
-			className: L("dds-toast-region", c),
+	return y(() => () => c.remove(), [c]), /* @__PURE__ */ k($.Provider, {
+		value: l,
+		children: [e, /* @__PURE__ */ O(U, {
+			toaster: c,
+			label: i ?? "",
+			"aria-label": i ?? "",
+			role: i ? "region" : "presentation",
+			className: t("dds-toast-region", a),
 			children: (e) => {
-				let t = e.meta?.dds;
-				return /* @__PURE__ */ g(A.Root, {
-					className: L("dds-toast", `dds-toast--${t.tone ?? "info"}`),
-					role: t.tone === "danger" ? "alert" : "status",
-					children: [/* @__PURE__ */ h(A.Description, { children: e.description }), n && /* @__PURE__ */ h(A.CloseTrigger, {
+				let n = e.meta?.dds;
+				return /* @__PURE__ */ k(V.Root, {
+					className: t("dds-toast", `dds-toast--${n.tone ?? "info"}`),
+					role: n.tone === "danger" ? "alert" : "status",
+					children: [/* @__PURE__ */ O(V.Description, { children: e.description }), r && /* @__PURE__ */ O(V.CloseTrigger, {
 						className: "dds-iconbtn dds-iconbtn--sm",
-						"aria-label": typeof n == "function" ? n(t) : n,
+						"aria-label": typeof r == "function" ? r(n) : r,
 						children: "×"
 					})]
 				});
@@ -337,392 +217,137 @@ function le({ children: e, defaultDuration: t = 5e3, dismissLabel: n, regionLabe
 		})]
 	});
 }
-function ue() {
-	let e = n(K);
+function ae() {
+	let e = v($);
 	if (!e) throw Error("useToast must be called inside <ToastProvider>");
 	return e;
 }
 //#endregion
 //#region src/console-shell.tsx
-function de(e, t) {
+function oe(e, t) {
 	return t.active ?? (t.href.split("/").filter(Boolean).length <= 1 ? e === t.href : e === t.href || e.startsWith(`${t.href}/`));
 }
-var fe = t(function({ surface: e, activePath: t, brand: n, context: a, nav: o, labels: c, header: l, foot: u, children: d, className: f, ...p }, m) {
-	let [_, v] = s(!1), [y, b] = s(!1), x = i(), S = `dds-console-rail-${x}`, C = `dds-console-main-${x}`;
-	return r(() => {
-		b(!0);
+var se = _(function({ surface: e, activePath: n, brand: r, context: i, nav: a, labels: o, header: s, foot: c, children: l, className: u, ...d }, f) {
+	let [p, m] = C(!1), [h, g] = C(!1), _ = b(), v = `dds-console-rail-${_}`, x = `dds-console-main-${_}`;
+	return y(() => {
+		g(!0);
 		let e = (e) => {
-			e.key === "Escape" && v(!1);
+			e.key === "Escape" && m(!1);
 		};
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, []), /* @__PURE__ */ g("div", {
-		...p,
-		ref: m,
-		className: L("dds-console-shell", f),
+	}, []), /* @__PURE__ */ k("div", {
+		...d,
+		ref: f,
+		className: t("dds-console-shell", u),
 		"data-surface": e,
-		"data-hydrated": y ? "true" : void 0,
+		"data-hydrated": h ? "true" : void 0,
 		children: [
-			/* @__PURE__ */ h("a", {
+			/* @__PURE__ */ O("a", {
 				className: "dds-console-skip dds-visually-hidden",
-				href: `#${C}`,
-				children: c.skip
+				href: `#${x}`,
+				children: o.skip
 			}),
-			/* @__PURE__ */ g("button", {
+			/* @__PURE__ */ k("button", {
 				className: "dds-console-rail__toggle",
 				type: "button",
 				"data-action": "toggle-rail",
-				"aria-controls": S,
-				"aria-expanded": _,
-				onClick: () => v(!_),
-				children: [/* @__PURE__ */ h("span", { "aria-hidden": !0 }), /* @__PURE__ */ h("span", {
+				"aria-controls": v,
+				"aria-expanded": p,
+				onClick: () => m(!p),
+				children: [/* @__PURE__ */ O("span", { "aria-hidden": !0 }), /* @__PURE__ */ O("span", {
 					className: "dds-visually-hidden",
-					children: _ ? c.menuClose : c.menuOpen
+					children: p ? o.menuClose : o.menuOpen
 				})]
 			}),
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ O("div", {
 				className: "dds-console-rail__scrim",
-				"data-open": String(_),
-				onClick: () => v(!1)
+				"data-open": String(p),
+				onClick: () => m(!1)
 			}),
-			/* @__PURE__ */ g("aside", {
-				id: S,
+			/* @__PURE__ */ k("aside", {
+				id: v,
 				className: "dds-console-rail",
-				"data-open": String(_),
+				"data-open": String(p),
 				children: [
-					/* @__PURE__ */ g("a", {
+					/* @__PURE__ */ k("a", {
 						className: "dds-console-rail__brand",
-						href: n.href,
-						children: [/* @__PURE__ */ h("img", {
-							src: n.mark,
+						href: r.href,
+						children: [/* @__PURE__ */ O("img", {
+							src: r.mark,
 							alt: "",
 							width: 20,
 							height: 20
-						}), /* @__PURE__ */ h("strong", { children: n.name })]
+						}), /* @__PURE__ */ O("strong", { children: r.name })]
 					}),
-					a && a.length > 0 && /* @__PURE__ */ h("dl", {
+					i && i.length > 0 && /* @__PURE__ */ O("dl", {
 						className: "dds-console-rail__context",
-						children: a.map((e, t) => /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("dt", { children: e.label }), /* @__PURE__ */ h("dd", { children: e.value })] }, t))
+						children: i.map((e, t) => /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("dt", { children: e.label }), /* @__PURE__ */ O("dd", { children: e.value })] }, t))
 					}),
-					/* @__PURE__ */ h("nav", {
+					/* @__PURE__ */ O("nav", {
 						className: "dds-console-rail__nav",
-						"aria-label": c.nav,
-						children: o.map((n, r) => /* @__PURE__ */ g("section", {
+						"aria-label": o.nav,
+						children: a.map((t, r) => /* @__PURE__ */ k("section", {
 							className: "dds-console-rail__group",
-							"aria-labelledby": `${x}-group-${r}`,
-							children: [/* @__PURE__ */ h("h2", {
-								id: `${x}-group-${r}`,
+							"aria-labelledby": `${_}-group-${r}`,
+							children: [/* @__PURE__ */ O("h2", {
+								id: `${_}-group-${r}`,
 								className: "dds-console-rail__group-label",
-								children: n.label
-							}), /* @__PURE__ */ h("ul", { children: n.items.map((n) => /* @__PURE__ */ h("li", { children: /* @__PURE__ */ g("a", {
+								children: t.label
+							}), /* @__PURE__ */ O("ul", { children: t.items.map((t) => /* @__PURE__ */ O("li", { children: /* @__PURE__ */ k("a", {
 								className: "dds-console-rail__item",
-								"data-nav": `${e}.${n.id}`,
-								href: n.href,
-								"aria-current": de(t, n) ? "page" : void 0,
-								onClick: () => v(!1),
-								children: [/* @__PURE__ */ h("span", { children: n.label }), n.badge !== void 0 && n.badge > 0 && /* @__PURE__ */ h("span", {
+								"data-nav": `${e}.${t.id}`,
+								href: t.href,
+								"aria-current": oe(n, t) ? "page" : void 0,
+								onClick: () => m(!1),
+								children: [/* @__PURE__ */ O("span", { children: t.label }), t.badge !== void 0 && t.badge > 0 && /* @__PURE__ */ O("span", {
 									className: "dds-console-rail__badge",
-									"aria-label": c.badge.replace("{count}", () => String(n.badge)),
-									children: n.badge
+									"aria-label": o.badge.replace("{count}", () => String(t.badge)),
+									children: t.badge
 								})]
-							}) }, n.id)) })]
+							}) }, t.id)) })]
 						}, r))
 					}),
-					u && /* @__PURE__ */ h("div", {
+					c && /* @__PURE__ */ O("div", {
 						className: "dds-console-rail__foot",
-						children: u
+						children: c
 					})
 				]
 			}),
-			/* @__PURE__ */ g("main", {
-				id: C,
+			/* @__PURE__ */ k("main", {
+				id: x,
 				className: "dds-console-main",
 				tabIndex: -1,
-				children: [/* @__PURE__ */ g("header", {
+				children: [/* @__PURE__ */ k("header", {
 					className: "dds-console-page-header",
-					children: [/* @__PURE__ */ g("div", {
+					children: [/* @__PURE__ */ k("div", {
 						className: "dds-console-page-header__text",
-						children: [l.eyebrow && /* @__PURE__ */ h("p", {
+						children: [s.eyebrow && /* @__PURE__ */ O("p", {
 							className: "dds-console-page-eyebrow",
-							children: l.eyebrow
-						}), /* @__PURE__ */ h("h1", { children: l.title })]
-					}), l.actions && /* @__PURE__ */ h("div", {
+							children: s.eyebrow
+						}), /* @__PURE__ */ O("h1", { children: s.title })]
+					}), s.actions && /* @__PURE__ */ O("div", {
 						className: "dds-console-page-header__actions",
-						children: l.actions
+						children: s.actions
 					})]
-				}), d]
+				}), l]
 			})
 		]
 	});
 });
 //#endregion
-//#region src/date-picker.tsx
-function pe() {
-	return /* @__PURE__ */ g("svg", {
-		width: "20",
-		height: "20",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "1.5",
-		"aria-hidden": "true",
-		children: [/* @__PURE__ */ h("rect", {
-			x: "3.5",
-			y: "5.5",
-			width: "17",
-			height: "15",
-			rx: "2"
-		}), /* @__PURE__ */ h("path", { d: "M7.5 3v5M16.5 3v5M3.5 10.5h17" })]
-	});
-}
-function q({ next: e = !1 }) {
-	return /* @__PURE__ */ h("svg", {
-		width: "18",
-		height: "18",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "1.5",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ h("path", { d: e ? "m9 5 7 7-7 7" : "m15 5-7 7 7 7" })
-	});
-}
-function J(e) {
-	if (!/^\d{4}-\d{2}-\d{2}$/.test(e)) return !1;
-	let t = Number(e.slice(0, 4)), n = Number(e.slice(5, 7)), r = Number(e.slice(8, 10));
-	return t < 1 || n < 1 || n > 12 || r < 1 ? !1 : r <= [
-		31,
-		t % 4 == 0 && (t % 100 != 0 || t % 400 == 0) ? 29 : 28,
-		31,
-		30,
-		31,
-		30,
-		31,
-		31,
-		30,
-		31,
-		30,
-		31
-	][n - 1];
-}
-function Y(e) {
-	return /^ko(?:-|$)/i.test(e);
-}
-function X(e, t) {
-	return Y(t) && J(e) ? e.replaceAll("-", "/") : e;
-}
-function Z(e, t) {
-	return Y(t) && /^\d{4}\/\d{2}\/\d{2}$/.test(e) ? e.replaceAll("/", "-") : e;
-}
-function Q(e, t, n, r, i = "en-US") {
-	let a = Z(e, i), o = e.length < 10 && (/^\d{0,4}(?:-\d{0,2}(?:-\d{0,2})?)?$/.test(e) || Y(i) && /^\d{0,4}(?:\/\d{0,2}(?:\/\d{0,2})?)?$/.test(e)), s = "valid";
-	return e === "" ? s = t ? "required" : "valid" : J(a) ? n && !J(n) || r && !J(r) || n && r && n > r ? s = "invalid" : n && a < n ? s = "rangeUnderflow" : r && a > r && (s = "rangeOverflow") : s = o ? "incomplete" : "invalid", {
-		inputValue: e,
-		value: s === "valid" ? a : null,
-		valid: s === "valid",
-		reason: s
-	};
-}
-function $(e) {
-	return J(e) ? [I(e)] : [];
-}
-function me({ label: e, value: t, onChange: n, locale: i = "ko-KR", timeZone: a = "Asia/Seoul", disabled: c = !1, readOnly: l = !1, required: u = !1, onValidityChange: d, min: f, max: p }) {
-	let [_, v] = s(() => X(t, i)), [y, b] = s(() => $(t)), [x, S] = s(!1), C = o(null), w = o(!1), T = o(t), E = o(i), O = o([]), k = o(t), A = o(""), j = Z(_, E.current), M = E.current !== i && J(j) ? X(j, i) : _, N = Q(M, u, f, p, i), P = N.valid ? void 0 : i.toLowerCase().startsWith("ko") ? N.reason === "required" ? "날짜를 입력해 주세요." : "YYYY/MM/DD 형식의 유효한 범위 내 날짜를 입력해 주세요." : N.reason === "required" ? "Enter a date." : "Enter a valid date within the allowed range (YYYY-MM-DD).";
-	r(() => {
-		let e = E.current;
-		if (E.current = i, T.current === t) {
-			e !== i && v(M);
-			return;
-		}
-		T.current = t;
-		let n = O.current.indexOf(t);
-		if (n !== -1) {
-			O.current.splice(n, 1);
-			return;
-		}
-		O.current = [], k.current = t, v(X(t, i)), (t === "" || J(t)) && b($(t));
-	}, [t, i]), r(() => {
-		C.current?.setCustomValidity(P ?? "");
-		let e = JSON.stringify(N);
-		d && A.current !== e && (A.current = e, d(N));
-	}, [
-		_,
-		u,
-		f,
-		p,
-		i,
-		P,
-		d
-	]), r(() => {
-		(c || l) && (w.current = !1, S(!1));
-	}, [c, l]), r(() => {
-		if (!w.current || c || l) return;
-		let e = requestAnimationFrame(() => {
-			w.current = !1, C.current?.focus({ preventScroll: !0 });
-		});
-		return () => cancelAnimationFrame(e);
-	}, [
-		x,
-		y,
-		c,
-		l
-	]);
-	function L(e) {
-		let t = Q(e, u, f, p, i);
-		if (e !== "" && !t.valid) return;
-		let r = e === "" ? "" : t.value;
-		b($(r)), r !== k.current && (k.current = r, O.current.push(r), n(r));
-	}
-	function z(e) {
-		v(e);
-		let t = Q(e, u, f, p, i);
-		C.current?.setCustomValidity(t.valid ? "" : P ?? "Enter a valid date (YYYY-MM-DD)."), (e === "" || t.valid) && (v(X(t.value ?? "", i)), L(e));
-	}
-	return /* @__PURE__ */ h(B, {
-		label: e,
-		required: u,
-		error: P,
-		children: (t) => /* @__PURE__ */ g(F.Root, {
-			locale: i,
-			timeZone: a,
-			disabled: c,
-			readOnly: l,
-			required: u,
-			invalid: !N.valid,
-			open: x && !c && !l,
-			onOpenChange: (e) => S(e.open && !c && !l),
-			min: f && J(f) ? I(f) : void 0,
-			max: p && J(p) ? I(p) : void 0,
-			startOfWeek: 0,
-			minView: "day",
-			maxView: "day",
-			fixedWeeks: !0,
-			translations: {
-				dayCell: (e) => `${e.valueText} 선택`,
-				clearTrigger: "선택 날짜 지우기"
-			},
-			value: y,
-			format: (e) => X(e.toString(), i),
-			onValueChange: (e) => {
-				let t = e.value[0]?.toString() || "";
-				t !== "" && !Q(t, u, f, p, i).valid || (w.current = !0, v(X(t, i)), L(t));
-			},
-			positioning: {
-				placement: "bottom-start",
-				gutter: 8
-			},
-			children: [/* @__PURE__ */ g(F.Control, {
-				className: "dds-date-picker-control",
-				children: [/* @__PURE__ */ h("input", {
-					...t,
-					ref: C,
-					type: "text",
-					value: M,
-					onChange: () => {},
-					required: u,
-					readOnly: l,
-					disabled: c,
-					placeholder: Y(i) ? "YYYY/MM/DD" : "YYYY-MM-DD",
-					autoComplete: "off",
-					autoCorrect: "off",
-					spellCheck: !1,
-					onInputCapture: (e) => {
-						c || l || (e.stopPropagation(), z(e.currentTarget.value));
-					},
-					onBlur: () => {
-						!c && !l && L(M);
-					},
-					onKeyDownCapture: (e) => {
-						e.key === "Enter" && !e.nativeEvent.isComposing && (e.preventDefault(), e.stopPropagation(), !c && !l && L(M));
-					}
-				}), /* @__PURE__ */ h(F.Trigger, {
-					asChild: !0,
-					children: /* @__PURE__ */ h(R, {
-						type: "button",
-						tone: "secondary",
-						"aria-label": `${e} 달력 열기`,
-						children: /* @__PURE__ */ h(pe, {})
-					})
-				})]
-			}), /* @__PURE__ */ h(D, { children: /* @__PURE__ */ h(F.Positioner, {
-				className: "dds-date-picker-positioner",
-				children: /* @__PURE__ */ h(F.Content, {
-					className: "dds-date-picker-content",
-					"aria-label": `${e} 날짜 선택`,
-					children: /* @__PURE__ */ h(F.View, {
-						view: "day",
-						children: /* @__PURE__ */ h(F.Context, { children: (e) => /* @__PURE__ */ g(m, { children: [
-							/* @__PURE__ */ g(F.ViewControl, {
-								className: "dds-date-picker-header",
-								children: [
-									/* @__PURE__ */ h(F.PrevTrigger, {
-										asChild: !0,
-										children: /* @__PURE__ */ h(R, {
-											type: "button",
-											tone: "secondary",
-											"aria-label": "이전 달",
-											children: /* @__PURE__ */ h(q, {})
-										})
-									}),
-									/* @__PURE__ */ h(F.RangeText, {}),
-									/* @__PURE__ */ h(F.NextTrigger, {
-										asChild: !0,
-										children: /* @__PURE__ */ h(R, {
-											type: "button",
-											tone: "secondary",
-											"aria-label": "다음 달",
-											children: /* @__PURE__ */ h(q, { next: !0 })
-										})
-									})
-								]
-							}),
-							/* @__PURE__ */ g(F.Table, {
-								className: "dds-date-picker-table",
-								children: [/* @__PURE__ */ h(F.TableHead, { children: /* @__PURE__ */ h(F.TableRow, { children: e.weekDays.map((e, t) => /* @__PURE__ */ h(F.TableHeader, { children: e.short }, t)) }) }), /* @__PURE__ */ h(F.TableBody, { children: e.weeks.map((e, t) => /* @__PURE__ */ h(F.TableRow, { children: e.map((e) => /* @__PURE__ */ h(F.TableCell, {
-									value: e,
-									children: /* @__PURE__ */ h(F.TableCellTrigger, { children: e.day })
-								}, e.toString())) }, t)) })]
-							}),
-							/* @__PURE__ */ g("div", {
-								className: "dds-date-picker-footer",
-								children: [/* @__PURE__ */ h(R, {
-									type: "button",
-									tone: "secondary",
-									onClick: () => e.selectToday(),
-									children: "오늘"
-								}), /* @__PURE__ */ h(F.ClearTrigger, {
-									hidden: !1,
-									asChild: !0,
-									children: /* @__PURE__ */ h(R, {
-										type: "button",
-										tone: "secondary",
-										onClick: () => {
-											!c && !l && (v(""), L(""));
-										},
-										children: "지우기"
-									})
-								})]
-							})
-						] }) })
-					})
-				})
-			}) })]
-		})
-	});
-}
-//#endregion
 //#region src/status-pill.tsx
-function he(e) {
+function ce(e) {
 	let t = new Set(e.openDomains ?? []);
 	return function(n) {
 		let r = e.tones[n.domain]?.[n.value], i = e.label(n.domain, n.value, n.locale);
 		if (!r || !i) {
-			if (t.has(n.domain)) return /* @__PURE__ */ h("code", {
+			if (t.has(n.domain)) return /* @__PURE__ */ O("code", {
 				"data-status": `${n.domain}.${n.value}`,
 				children: n.value
 			});
 			throw Error(r ? `StatusPill: no label for ${n.domain}.${n.value}` : `StatusPill: no tone for ${n.domain}.${n.value}`);
 		}
-		return /* @__PURE__ */ h("span", {
+		return /* @__PURE__ */ O("span", {
 			className: r === "neutral" ? "dds-badge" : `dds-badge dds-badge--${r}`,
 			"data-status": `${n.domain}.${n.value}`,
 			"data-tone": r,
@@ -731,6 +356,6 @@ function he(e) {
 	};
 }
 //#endregion
-export { u as ArkCheckbox, P as ArkDatePicker, C as ArkDialog, c as ArkField, b as ArkRadioGroup, f as ArkSwitch, _ as ArkTabs, j as ArkToast, T as ArkTooltip, R as Button, U as Checkbox, fe as ConsoleShell, me as DatePicker, oe as Dialog, B as Field, ce as Icon, z as IconButton, G as Radio, ae as RadioGroup, V as Select, W as Switch, ne as Tab, te as TabList, re as TabPanel, ee as Tabs, le as ToastProvider, se as Tooltip, L as classes, he as createStatusPill, ue as useToast };
+export { T as ArkCheckbox, G as ArkDatePicker, P as ArkDialog, w as ArkField, te as ArkRadioGroup, E as ArkSwitch, A as ArkTabs, H as ArkToast, I as ArkTooltip, s as Button, h as Calendar, r as Checkbox, d as Combobox, se as ConsoleShell, c as DatePicker, ne as Dialog, p as DropdownMenu, a as Field, Q as Icon, n as IconButton, l as Input, u as InputGroup, m as Popover, e as Radio, Z as RadioGroup, i as Select, f as SelectPicker, o as Switch, J as Tab, q as TabList, Y as TabPanel, K as Tabs, ie as ToastProvider, re as Tooltip, t as classes, ce as createStatusPill, ae as useToast };
 
 //# sourceMappingURL=index.js.map