react-ui-suite 0.1.0

package/dist/index.js

@@ -0,0 +1,4055 @@
+// components/Alert/Alert.tsx
+import * as React from "react";
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs } from "react/jsx-runtime";
+var variantStyles = {
+  info: {
+    container: "bg-sky-50 text-sky-900 ring-1 ring-sky-100 dark:bg-sky-500/10 dark:text-sky-100",
+    accent: "bg-sky-400",
+    icon: "\u2139\uFE0F"
+  },
+  success: {
+    container: "bg-emerald-50 text-emerald-900 ring-1 ring-emerald-100 dark:bg-emerald-500/10 dark:text-emerald-100",
+    accent: "bg-emerald-400",
+    icon: "\u2714\uFE0F"
+  },
+  warning: {
+    container: "bg-amber-50 text-amber-900 ring-1 ring-amber-100 dark:bg-amber-400/10 dark:text-amber-100",
+    accent: "bg-amber-400",
+    icon: "\u26A0\uFE0F"
+  },
+  danger: {
+    container: "bg-rose-50 text-rose-900 ring-1 ring-rose-100 dark:bg-rose-500/10 dark:text-rose-100",
+    accent: "bg-rose-400",
+    icon: "\u26D4"
+  }
+};
+var Alert = React.forwardRef(function Alert2({ title, description, variant = "info", onDismiss, className, ...rest }, ref) {
+  const style = variantStyles[variant];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      ref,
+      role: "alert",
+      className: twMerge(
+        "relative flex items-start gap-3 rounded-2xl px-4 py-3 text-sm shadow-sm",
+        style.container,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "mt-[2px] text-base", "aria-hidden": "true", children: style.icon }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-semibold", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "text-sm/relaxed opacity-90", children: description }) : null
+        ] }),
+        onDismiss ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onDismiss,
+            className: "rounded-full p-1 text-xs font-semibold uppercase tracking-wide text-current/70 hover:text-current focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent",
+            "aria-label": "Dismiss alert",
+            children: "\xD7"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: twMerge("absolute inset-y-2 left-1 w-1 rounded-full", style.accent),
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+});
+
+// components/Badge/Badge.tsx
+import * as React2 from "react";
+import { twMerge as twMerge2 } from "tailwind-merge";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var variantClasses = {
+  neutral: "bg-slate-100 text-slate-700 ring-1 ring-slate-200 dark:bg-zinc-900/60 dark:text-zinc-100 dark:ring-zinc-700/60",
+  info: "bg-sky-50 text-sky-700 ring-1 ring-sky-200 dark:bg-sky-500/10 dark:text-sky-300",
+  success: "bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-300",
+  warning: "bg-amber-50 text-amber-700 ring-1 ring-amber-200 dark:bg-amber-500/10 dark:text-amber-200",
+  danger: "bg-rose-50 text-rose-700 ring-1 ring-rose-200 dark:bg-rose-500/10 dark:text-rose-300"
+};
+var Badge = React2.forwardRef(function Badge2({ variant = "neutral", icon, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: twMerge2(
+        "inline-flex items-center gap-1 rounded-full px-3 py-1 text-[0.7rem] font-semibold uppercase tracking-wide",
+        variantClasses[variant],
+        className
+      ),
+      children: [
+        icon ? /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", children: icon }) : null,
+        children
+      ]
+    }
+  );
+});
+
+// components/Button/Button.tsx
+import { twMerge as twMerge3 } from "tailwind-merge";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Button({
+  children,
+  onClick,
+  disabled = false,
+  className = "",
+  type = "button",
+  style,
+  ...rest
+}) {
+  const hasCustomBackground = typeof className === "string" && /bg-/.test(className);
+  const hasCustomText = typeof className === "string" && /text-/.test(className);
+  const backgroundClasses = hasCustomBackground ? "" : "bg-white hover:bg-slate-100 dark:bg-zinc-900/70 dark:hover:bg-zinc-800";
+  const textClasses = hasCustomText ? "" : "text-slate-900 dark:text-zinc-100";
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type,
+      onClick,
+      disabled,
+      style,
+      ...rest,
+      className: twMerge3(
+        "inline-flex items-center justify-center gap-2 rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold shadow-sm transition",
+        backgroundClasses,
+        textClasses,
+        "hover:border-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-500",
+        "disabled:cursor-not-allowed disabled:opacity-60",
+        "dark:border-zinc-700/60 dark:hover:border-zinc-500 dark:shadow-slate-950/20",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// components/Card/Card.tsx
+import * as React3 from "react";
+import { twMerge as twMerge4 } from "tailwind-merge";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var Card = React3.forwardRef(function Card2({ eyebrow, title, actions, children, footer, muted, className, ...rest }, ref) {
+  const hasHeader = eyebrow || actions;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ...rest,
+      ref,
+      className: twMerge4(
+        "flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-5 shadow-lg shadow-slate-200/40 dark:border-zinc-700/60 dark:bg-zinc-900/70 dark:shadow-none",
+        muted && "bg-slate-50/70 dark:bg-zinc-900/40",
+        className
+      ),
+      children: [
+        hasHeader && /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-4", children: [
+          eyebrow ? /* @__PURE__ */ jsx4("p", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-slate-400 dark:text-zinc-400", children: eyebrow }) : /* @__PURE__ */ jsx4("span", {}),
+          actions ? /* @__PURE__ */ jsx4("div", { className: "text-sm text-slate-500 dark:text-zinc-400", children: actions }) : null
+        ] }),
+        title ? /* @__PURE__ */ jsx4(
+          "h3",
+          {
+            className: twMerge4(
+              "text-lg font-semibold text-slate-900 dark:text-zinc-100",
+              hasHeader ? "mt-3" : "mt-0"
+            ),
+            children: title
+          }
+        ) : null,
+        children ? /* @__PURE__ */ jsx4("div", { className: "mt-3 flex-1 text-sm text-slate-600 dark:text-zinc-300", children }) : null,
+        footer ? /* @__PURE__ */ jsx4("div", { className: "mt-4 border-t border-slate-100 pt-3 text-xs text-slate-500 dark:border-zinc-800 dark:text-zinc-400", children: footer }) : null
+      ]
+    }
+  );
+});
+
+// components/Checkbox/Checkbox.tsx
+import * as React4 from "react";
+import { twMerge as twMerge5 } from "tailwind-merge";
+
+// components/Combobox/icons.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function ChevronDown(props) {
+  return /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx5(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.172l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.24 4.5a.75.75 0 0 1-1.08 0l-4.24-4.5a.75.75 0 0 1 .02-1.06z",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+function Check(props) {
+  return /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx5("path", { d: "M16.704 5.29a1 1 0 0 1 0 1.415l-7.2 7.2a1 1 0 0 1-1.415 0l-3.2-3.2a1 1 0 1 1 1.414-1.414l2.493 2.493 6.493-6.493a1 1 0 0 1 1.415 0z" }) });
+}
+function Calendar(props) {
+  return /* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true", ...props, children: [
+    /* @__PURE__ */ jsx5("rect", { x: "3.5", y: "5", width: "17", height: "15", rx: "2", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx5("path", { d: "M8 4v3M16 4v3", strokeWidth: "1.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx5("path", { d: "M3.5 9h17", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx5("rect", { x: "7.75", y: "12.25", width: "4.5", height: "4.5", rx: "1", strokeWidth: "1.5" })
+  ] });
+}
+function Clock(props) {
+  return /* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true", ...props, children: [
+    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "8.5", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx5(
+      "path",
+      {
+        d: "M12 7.5v4.25l3 1.75",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+
+// utils/ref.ts
+function assignRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+
+// components/Checkbox/Checkbox.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var Checkbox = React4.forwardRef(function Checkbox2({
+  label,
+  description,
+  checked,
+  defaultChecked = false,
+  onChange,
+  disabled,
+  className,
+  indeterminate,
+  id,
+  ...rest
+}, forwardedRef) {
+  const internalRef = React4.useRef(null);
+  const mergedRef = React4.useCallback(
+    (node) => {
+      internalRef.current = node;
+      assignRef(forwardedRef, node);
+    },
+    [forwardedRef]
+  );
+  const isControlled = typeof checked === "boolean";
+  const [internalChecked, setInternalChecked] = React4.useState(defaultChecked);
+  const resolvedChecked = isControlled ? !!checked : internalChecked;
+  const generatedId = React4.useId();
+  const checkboxId = id != null ? id : generatedId;
+  React4.useEffect(() => {
+    if (internalRef.current) {
+      internalRef.current.indeterminate = !!indeterminate && !resolvedChecked;
+    }
+  }, [indeterminate, resolvedChecked]);
+  const handleChange = (event) => {
+    const next = event.target.checked;
+    if (!isControlled) {
+      setInternalChecked(next);
+    }
+    onChange == null ? void 0 : onChange(next);
+  };
+  return /* @__PURE__ */ jsxs5(
+    "label",
+    {
+      htmlFor: checkboxId,
+      className: twMerge5(
+        "flex cursor-pointer gap-3 rounded-2xl border border-transparent px-2 py-2 text-left transition hover:bg-slate-50 dark:hover:bg-zinc-900/60",
+        "items-center",
+        disabled && "cursor-not-allowed opacity-60",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs5("span", { className: "flex h-6 w-6 items-center justify-center", children: [
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              ...rest,
+              ref: mergedRef,
+              id: checkboxId,
+              type: "checkbox",
+              className: "peer sr-only",
+              checked: resolvedChecked,
+              onChange: handleChange,
+              disabled
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "span",
+            {
+              className: twMerge5(
+                "grid size-5 place-items-center rounded-lg border border-slate-300 bg-white text-[0.65rem] font-semibold text-slate-600 transition drop-shadow-sm peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-slate-400 dark:border-zinc-600 dark:bg-zinc-950/70 dark:text-zinc-200",
+                resolvedChecked && "border-slate-400 bg-slate-100 text-slate-900 shadow-[0_0_0_1px_rgba(148,163,184,0.45)] dark:border-zinc-500 dark:bg-zinc-500 dark:text-white"
+              ),
+              "aria-hidden": "true",
+              children: resolvedChecked ? /* @__PURE__ */ jsx6(Check, { className: "h-3 w-3" }) : indeterminate ? /* @__PURE__ */ jsx6("span", { className: "h-[2px] w-2 rounded-full bg-current" }) : null
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs5("span", { className: "flex flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx6("span", { className: "text-sm font-semibold text-slate-900 dark:text-zinc-100", children: label }),
+          description ? /* @__PURE__ */ jsx6("span", { className: "text-xs text-slate-500 dark:text-zinc-400", children: description }) : null
+        ] })
+      ]
+    }
+  );
+});
+
+// components/ColorPicker/ColorPicker.tsx
+import * as React5 from "react";
+import { twMerge as twMerge6 } from "tailwind-merge";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var defaultSwatches = ["#0ea5e9", "#22c55e", "#f97316", "#f43f5e", "#6366f1", "#facc15"];
+var formatOrder = ["hex", "rgb", "hsl"];
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function normalizeHex(input) {
+  if (!input) return null;
+  let hex = input.trim().replace(/^#/, "");
+  if (hex.length === 3) {
+    hex = hex.split("").map((char) => char + char).join("");
+  }
+  if (!/^[0-9a-fA-F]{6}$/.test(hex)) return null;
+  return `#${hex.toUpperCase()}`;
+}
+function hexToRgb(hex) {
+  const normalized = normalizeHex(hex);
+  if (!normalized) return null;
+  const value = normalized.replace("#", "");
+  return {
+    r: parseInt(value.slice(0, 2), 16),
+    g: parseInt(value.slice(2, 4), 16),
+    b: parseInt(value.slice(4, 6), 16)
+  };
+}
+function rgbToHex(r, g, b) {
+  const parts = [r, g, b].map((component) => clamp(Math.round(component), 0, 255)).map((component) => component.toString(16).padStart(2, "0"));
+  return `#${parts.join("").toUpperCase()}`;
+}
+function hexToHsl(hex) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return null;
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+}
+function hslToHex(h, s, l) {
+  const hue = (h % 360 + 360) % 360;
+  const sat = clamp(s / 100, 0, 1);
+  const light = clamp(l / 100, 0, 1);
+  if (sat === 0) {
+    const gray = Math.round(light * 255);
+    return rgbToHex(gray, gray, gray);
+  }
+  const q = light < 0.5 ? light * (1 + sat) : light + sat - light * sat;
+  const p = 2 * light - q;
+  function hueToRgb(t) {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  }
+  const r = hueToRgb(hue / 360 + 1 / 3);
+  const g = hueToRgb(hue / 360);
+  const b = hueToRgb(hue / 360 - 1 / 3);
+  return rgbToHex(r * 255, g * 255, b * 255);
+}
+var channelLabels = {
+  hex: ["HEX"],
+  rgb: ["R", "G", "B"],
+  hsl: ["H", "S", "L"]
+};
+function hexToHsv(hex) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return null;
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === r) {
+      h = (g - b) / delta % 6;
+    } else if (max === g) {
+      h = (b - r) / delta + 2;
+    } else {
+      h = (r - g) / delta + 4;
+    }
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  const s = max === 0 ? 0 : delta / max;
+  const v = max;
+  return {
+    h: Math.round(h),
+    s: Math.round(s * 100),
+    v: Math.round(v * 100)
+  };
+}
+function hsvToHex(h, s, v) {
+  const hue = (h % 360 + 360) % 360;
+  const sat = clamp(s / 100, 0, 1);
+  const val = clamp(v / 100, 0, 1);
+  const c = val * sat;
+  const x = c * (1 - Math.abs(hue / 60 % 2 - 1));
+  const m = val - c;
+  let rPrime = 0;
+  let gPrime = 0;
+  let bPrime = 0;
+  if (hue < 60) {
+    rPrime = c;
+    gPrime = x;
+  } else if (hue < 120) {
+    rPrime = x;
+    gPrime = c;
+  } else if (hue < 180) {
+    gPrime = c;
+    bPrime = x;
+  } else if (hue < 240) {
+    gPrime = x;
+    bPrime = c;
+  } else if (hue < 300) {
+    rPrime = x;
+    bPrime = c;
+  } else {
+    rPrime = c;
+    bPrime = x;
+  }
+  const r = Math.round((rPrime + m) * 255);
+  const g = Math.round((gPrime + m) * 255);
+  const b = Math.round((bPrime + m) * 255);
+  return rgbToHex(r, g, b);
+}
+function getChannelValues(hex, format) {
+  var _a;
+  const normalized = (_a = normalizeHex(hex)) != null ? _a : "#000000";
+  switch (format) {
+    case "rgb": {
+      const rgb = hexToRgb(normalized);
+      if (!rgb) return ["0", "0", "0"];
+      return [rgb.r, rgb.g, rgb.b].map((value) => String(value));
+    }
+    case "hsl": {
+      const hsl = hexToHsl(normalized);
+      if (!hsl) return ["0", "0", "0"];
+      return [hsl.h, hsl.s, hsl.l].map((value) => String(value));
+    }
+    default: {
+      const value = normalized.replace("#", "");
+      return [value.toUpperCase()];
+    }
+  }
+}
+function channelsToHex(values, format) {
+  var _a, _b;
+  if (values.some((value) => value.trim() === "")) return null;
+  switch (format) {
+    case "hex": {
+      const hex = (_b = (_a = values[0]) == null ? void 0 : _a.trim().replace(/^#/, "")) != null ? _b : "";
+      if (!/^[0-9a-fA-F]{3}$/.test(hex) && !/^[0-9a-fA-F]{6}$/.test(hex)) return null;
+      return normalizeHex(`#${hex}`);
+    }
+    case "rgb": {
+      const numbers = values.map((value) => Number(value.trim()));
+      if (numbers.some((num) => Number.isNaN(num))) return null;
+      return rgbToHex(numbers[0], numbers[1], numbers[2]);
+    }
+    case "hsl": {
+      const numbers = values.map((value) => Number(value.trim()));
+      if (numbers.some((num) => Number.isNaN(num))) return null;
+      return hslToHex(numbers[0], numbers[1], numbers[2]);
+    }
+    default:
+      return null;
+  }
+}
+var ColorPicker = React5.forwardRef(
+  function ColorPicker2({
+    label,
+    value,
+    defaultValue = "#0ea5e9",
+    onChange,
+    swatches = defaultSwatches,
+    id,
+    className,
+    ...rest
+  }, forwardedRef) {
+    var _a;
+    const normalizedDefault = React5.useMemo(
+      () => {
+        var _a2;
+        return (_a2 = normalizeHex(defaultValue)) != null ? _a2 : "#0EA5E9";
+      },
+      [defaultValue]
+    );
+    const normalizedSwatches = React5.useMemo(
+      () => swatches.map((color) => normalizeHex(color)).filter(Boolean),
+      [swatches]
+    );
+    const isControlled = typeof value === "string";
+    const [internalValue, setInternalValue] = React5.useState(normalizedDefault);
+    const [format, setFormat] = React5.useState("hex");
+    const resolvedValue = React5.useMemo(() => {
+      var _a2, _b;
+      if (isControlled) {
+        return (_a2 = normalizeHex(value)) != null ? _a2 : normalizedDefault;
+      }
+      return (_b = normalizeHex(internalValue)) != null ? _b : normalizedDefault;
+    }, [isControlled, value, internalValue, normalizedDefault]);
+    const [channelValues, setChannelValues] = React5.useState(
+      () => getChannelValues(resolvedValue, format)
+    );
+    const [swatchList, setSwatchList] = React5.useState(normalizedSwatches);
+    const resolvedHsv = React5.useMemo(
+      () => {
+        var _a2;
+        return (_a2 = hexToHsv(resolvedValue)) != null ? _a2 : { h: 199, s: 100, v: 100 };
+      },
+      [resolvedValue]
+    );
+    const [hue, setHue] = React5.useState(resolvedHsv.h);
+    const [saturation, setSaturation] = React5.useState(resolvedHsv.s);
+    const [valueLevel, setValueLevel] = React5.useState(resolvedHsv.v);
+    const generatedId = React5.useId();
+    const inputId = id != null ? id : generatedId;
+    const inputRef = React5.useRef(null);
+    const triggerRef = React5.useRef(null);
+    const panelRef = React5.useRef(null);
+    const gradientRef = React5.useRef(null);
+    const hueRef = React5.useRef(null);
+    const gradientDragCleanupRef = React5.useRef(null);
+    const hueDragCleanupRef = React5.useRef(null);
+    const [isOpen, setIsOpen] = React5.useState(false);
+    const mergedRef = React5.useCallback(
+      (node) => {
+        inputRef.current = node;
+        assignRef(forwardedRef, node);
+      },
+      [forwardedRef]
+    );
+    const shouldLockHue = (s, v) => s <= 1 || v <= 1;
+    React5.useEffect(() => {
+      setHue((prev) => shouldLockHue(resolvedHsv.s, resolvedHsv.v) ? prev : resolvedHsv.h);
+      setSaturation(resolvedHsv.s);
+      setValueLevel(resolvedHsv.v);
+    }, [resolvedHsv.h, resolvedHsv.s, resolvedHsv.v]);
+    React5.useEffect(() => {
+      setSwatchList(normalizedSwatches);
+    }, [normalizedSwatches]);
+    const applyColor = React5.useCallback(
+      (next) => {
+        const normalized = normalizeHex(next);
+        if (!normalized) return;
+        if (!isControlled) {
+          setInternalValue(normalized);
+        }
+        onChange == null ? void 0 : onChange(normalized);
+      },
+      [isControlled, onChange]
+    );
+    const handleSwatchClick = (color) => {
+      const normalized = normalizeHex(color);
+      if (!normalized) return;
+      const hsv = hexToHsv(normalized);
+      if (hsv) {
+        setHue((prev) => shouldLockHue(hsv.s, hsv.v) ? prev : hsv.h);
+        setSaturation(hsv.s);
+        setValueLevel(hsv.v);
+      }
+      applyColor(normalized);
+    };
+    const handleAddSwatch = React5.useCallback(() => {
+      const normalized = normalizeHex(resolvedValue);
+      if (!normalized) return;
+      setSwatchList((prev) => {
+        if (prev.includes(normalized)) return prev;
+        return [...prev, normalized];
+      });
+    }, [resolvedValue]);
+    const handleRemoveSwatch = React5.useCallback((color) => {
+      setSwatchList((prev) => prev.filter((value2) => value2.toLowerCase() !== color.toLowerCase()));
+    }, []);
+    React5.useEffect(() => {
+      setChannelValues(getChannelValues(resolvedValue, format));
+    }, [resolvedValue, format]);
+    const handleChannelChange = React5.useCallback(
+      (index, nextValue) => {
+        setChannelValues((prev) => {
+          const updated = [...prev];
+          if (format === "hex") {
+            updated[index] = nextValue.replace(/[^0-9a-fA-F]/g, "").toUpperCase();
+          } else {
+            updated[index] = nextValue;
+          }
+          const parsed = channelsToHex(updated, format);
+          if (parsed) {
+            applyColor(parsed);
+          }
+          return updated;
+        });
+      },
+      [applyColor, format]
+    );
+    const resetChannels = React5.useCallback(() => {
+      setChannelValues(getChannelValues(resolvedValue, format));
+    }, [resolvedValue, format]);
+    const closePanel = React5.useCallback(() => {
+      setIsOpen(false);
+    }, []);
+    React5.useEffect(() => {
+      if (!isOpen) return;
+      const handlePointer = (event) => {
+        var _a2, _b;
+        const target = event.target;
+        if (((_a2 = panelRef.current) == null ? void 0 : _a2.contains(target)) || ((_b = triggerRef.current) == null ? void 0 : _b.contains(target))) {
+          return;
+        }
+        closePanel();
+      };
+      const handleKeydown = (event) => {
+        var _a2;
+        if (event.key === "Escape") {
+          event.preventDefault();
+          closePanel();
+          (_a2 = triggerRef.current) == null ? void 0 : _a2.focus();
+        }
+      };
+      window.addEventListener("pointerdown", handlePointer);
+      window.addEventListener("keydown", handleKeydown);
+      return () => {
+        window.removeEventListener("pointerdown", handlePointer);
+        window.removeEventListener("keydown", handleKeydown);
+      };
+    }, [closePanel, isOpen]);
+    const updateGradientColor = React5.useCallback(
+      (clientX, clientY) => {
+        var _a2;
+        const rect = (_a2 = gradientRef.current) == null ? void 0 : _a2.getBoundingClientRect();
+        if (!rect) return;
+        const xRatio = clamp((clientX - rect.left) / rect.width, 0, 1);
+        const yRatio = clamp((clientY - rect.top) / rect.height, 0, 1);
+        const nextS = Math.round(xRatio * 100);
+        const nextV = Math.round((1 - yRatio) * 100);
+        setSaturation(nextS);
+        setValueLevel(nextV);
+        applyColor(hsvToHex(hue, nextS, nextV));
+      },
+      [applyColor, hue]
+    );
+    const handleGradientPointerDown = React5.useCallback(
+      (event) => {
+        var _a2;
+        event.preventDefault();
+        (_a2 = gradientDragCleanupRef.current) == null ? void 0 : _a2.call(gradientDragCleanupRef);
+        updateGradientColor(event.clientX, event.clientY);
+        const handleMove = (moveEvent) => {
+          moveEvent.preventDefault();
+          updateGradientColor(moveEvent.clientX, moveEvent.clientY);
+        };
+        const stop = () => {
+          window.removeEventListener("pointermove", handleMove);
+          window.removeEventListener("pointerup", stop);
+          window.removeEventListener("pointercancel", stop);
+          gradientDragCleanupRef.current = null;
+        };
+        window.addEventListener("pointermove", handleMove);
+        window.addEventListener("pointerup", stop);
+        window.addEventListener("pointercancel", stop);
+        gradientDragCleanupRef.current = stop;
+      },
+      [updateGradientColor]
+    );
+    const updateHueFromPointer = React5.useCallback(
+      (clientX) => {
+        var _a2;
+        const rect = (_a2 = hueRef.current) == null ? void 0 : _a2.getBoundingClientRect();
+        if (!rect) return;
+        const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);
+        const nextHue = Math.round(ratio * 360);
+        setHue(nextHue);
+        applyColor(hsvToHex(nextHue, saturation, valueLevel));
+      },
+      [applyColor, saturation, valueLevel]
+    );
+    const handleHuePointerDown = React5.useCallback(
+      (event) => {
+        var _a2;
+        event.preventDefault();
+        (_a2 = hueDragCleanupRef.current) == null ? void 0 : _a2.call(hueDragCleanupRef);
+        updateHueFromPointer(event.clientX);
+        const handleMove = (moveEvent) => {
+          moveEvent.preventDefault();
+          updateHueFromPointer(moveEvent.clientX);
+        };
+        const stop = () => {
+          window.removeEventListener("pointermove", handleMove);
+          window.removeEventListener("pointerup", stop);
+          window.removeEventListener("pointercancel", stop);
+          hueDragCleanupRef.current = null;
+        };
+        window.addEventListener("pointermove", handleMove);
+        window.addEventListener("pointerup", stop);
+        window.addEventListener("pointercancel", stop);
+        hueDragCleanupRef.current = stop;
+      },
+      [updateHueFromPointer]
+    );
+    React5.useEffect(() => {
+      return () => {
+        var _a2, _b;
+        (_a2 = gradientDragCleanupRef.current) == null ? void 0 : _a2.call(gradientDragCleanupRef);
+        (_b = hueDragCleanupRef.current) == null ? void 0 : _b.call(hueDragCleanupRef);
+      };
+    }, []);
+    const activeLabels = channelLabels[format];
+    return /* @__PURE__ */ jsxs6("div", { className: "relative inline-flex flex-col items-center gap-2", children: [
+      label ? /* @__PURE__ */ jsx7("p", { className: "text-[10px] font-semibold uppercase tracking-[0.3em] text-slate-400 dark:text-zinc-500", children: label }) : null,
+      /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          type: "button",
+          ref: triggerRef,
+          onClick: () => setIsOpen((prev) => !prev),
+          "aria-haspopup": "dialog",
+          "aria-expanded": isOpen,
+          "aria-label": label ? `Adjust ${label}` : "Choose color",
+          className: "relative inline-flex h-12 w-12 items-center justify-center rounded-full border border-slate-200 bg-white shadow-sm transition hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 dark:border-zinc-700 dark:bg-zinc-900",
+          children: [
+            /* @__PURE__ */ jsx7(
+              "span",
+              {
+                className: "absolute inset-1 rounded-full border border-white/30 shadow-inner dark:border-zinc-900/60",
+                style: { background: resolvedValue },
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              "span",
+              {
+                className: "relative text-xl drop-shadow-[0_1px_1px_rgba(15,23,42,0.55)]",
+                style: { transform: "translateX(0.5px) translateY(-1.5px)" },
+                "aria-hidden": "true",
+                children: "\u{1F3A8}"
+              }
+            )
+          ]
+        }
+      ),
+      isOpen ? /* @__PURE__ */ jsx7(
+        "div",
+        {
+          ref: panelRef,
+          role: "dialog",
+          "aria-label": label ? `${label} color picker` : "Color picker dialog",
+          className: "absolute left-1/2 top-full z-20 mt-3 w-[340px] max-w-[90vw] -translate-x-1/2 rounded-2xl border border-slate-200/80 bg-white/95 p-4 shadow-2xl backdrop-blur-sm dark:border-zinc-700/60 dark:bg-zinc-900/95",
+          children: /* @__PURE__ */ jsxs6("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs6("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  ref: gradientRef,
+                  onPointerDown: handleGradientPointerDown,
+                  className: "relative h-40 w-full cursor-crosshair overflow-hidden rounded-xl shadow-[inset_0_1px_2px_rgba(15,23,42,.25)] ring-1 ring-black/5 dark:ring-white/10",
+                  style: {
+                    backgroundColor: `hsl(${hue}, 100%, 50%)`,
+                    backgroundImage: "linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(to right, #fff, rgba(255,255,255,0))"
+                  },
+                  "aria-label": "Color area",
+                  children: /* @__PURE__ */ jsx7(
+                    "span",
+                    {
+                      className: "pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_1px_2px_rgba(15,23,42,.4)]",
+                      style: {
+                        left: `${saturation}%`,
+                        top: `${100 - valueLevel}%`,
+                        background: resolvedValue
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  ref: hueRef,
+                  onPointerDown: handleHuePointerDown,
+                  className: "relative h-3 w-full cursor-pointer rounded-full border border-white/40 shadow-inner dark:border-zinc-800/60",
+                  style: {
+                    background: "linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)"
+                  },
+                  "aria-label": "Hue slider",
+                  children: /* @__PURE__ */ jsx7(
+                    "span",
+                    {
+                      className: "pointer-events-none absolute top-1/2 h-5 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full border border-slate-900/40 bg-white shadow",
+                      style: { left: `${hue / 360 * 100}%` }
+                    }
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-2", children: [
+              swatchList.map((color) => /* @__PURE__ */ jsxs6("div", { className: "relative group", children: [
+                /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleSwatchClick(color),
+                    className: twMerge6(
+                      "h-7 w-7 rounded-full border border-white/30 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 dark:border-zinc-900/70",
+                      color.toLowerCase() === resolvedValue.toLowerCase() && "ring-2 ring-offset-2 ring-slate-500 dark:ring-offset-slate-900"
+                    ),
+                    style: { background: color },
+                    "aria-label": `Select ${color}`
+                  }
+                ),
+                /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleRemoveSwatch(color),
+                    className: "absolute -top-1.5 -right-1.5 hidden h-5 w-5 items-center justify-center rounded-full bg-white text-[10px] font-bold text-slate-600 shadow-sm ring-1 ring-slate-200 transition group-hover:flex group-focus-within:flex dark:bg-zinc-900 dark:text-zinc-200 dark:ring-zinc-700",
+                    "aria-label": `Remove ${color} swatch`,
+                    children: "\xD7"
+                  }
+                )
+              ] }, color)),
+              /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleAddSwatch,
+                  className: "inline-flex h-7 items-center gap-1 rounded-full border border-dashed border-slate-300 px-3 text-xs font-semibold uppercase tracking-wide text-slate-500 transition hover:border-slate-400 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 dark:border-zinc-600 dark:text-zinc-300 dark:hover:border-zinc-500",
+                  children: "+ Add swatch"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs6("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx7("p", { className: "text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400 dark:text-zinc-500", children: "Channels" }),
+                /* @__PURE__ */ jsx7("div", { className: "inline-flex overflow-hidden rounded-xl border border-slate-200 bg-white/80 text-[11px] font-semibold uppercase text-slate-500 dark:border-zinc-700 dark:bg-zinc-900/80 dark:text-zinc-300", children: formatOrder.map((option) => /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setFormat(option),
+                    "aria-pressed": format === option,
+                    className: twMerge6(
+                      "px-3 py-1.5 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400/60",
+                      format === option ? "bg-white text-slate-900 shadow-[inset_0_0_0_1px_rgba(15,23,42,0.08)] dark:bg-white/15 dark:text-white" : "text-slate-500 dark:text-zinc-400"
+                    ),
+                    children: option.toUpperCase()
+                  },
+                  option
+                )) })
+              ] }),
+              /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-2", children: format === "hex" ? /* @__PURE__ */ jsxs6("label", { className: "flex min-w-[180px] flex-1 items-center gap-2 rounded-xl border border-slate-200 bg-white/60 px-3 py-1.5 font-mono text-sm text-slate-900 focus-within:border-slate-400 dark:border-zinc-700 dark:bg-zinc-900/70 dark:text-zinc-100", children: [
+                /* @__PURE__ */ jsx7("span", { className: "text-base font-semibold text-slate-400 dark:text-zinc-500", children: "#" }),
+                /* @__PURE__ */ jsx7(
+                  "input",
+                  {
+                    type: "text",
+                    value: (_a = channelValues[0]) != null ? _a : "",
+                    onChange: (event) => handleChannelChange(0, event.target.value),
+                    onBlur: resetChannels,
+                    inputMode: "text",
+                    maxLength: 6,
+                    className: "h-6 min-w-0 flex-1 border-none bg-transparent p-0 text-left text-sm uppercase tracking-[0.2em] text-slate-900 placeholder:text-slate-400 focus:outline-none dark:text-zinc-50"
+                  }
+                )
+              ] }) : channelValues.map((value2, index) => /* @__PURE__ */ jsxs6(
+                "label",
+                {
+                  className: "flex min-w-[90px] flex-1 items-center gap-2 rounded-xl border border-slate-200 bg-white/60 px-3 py-1.5 font-mono text-sm text-slate-900 focus-within:border-slate-400 dark:border-zinc-700 dark:bg-zinc-900/70 dark:text-zinc-100",
+                  children: [
+                    /* @__PURE__ */ jsx7("span", { className: "text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400 dark:text-zinc-500", children: activeLabels[index] }),
+                    /* @__PURE__ */ jsx7(
+                      "input",
+                      {
+                        type: "text",
+                        value: value2,
+                        onChange: (event) => handleChannelChange(index, event.target.value),
+                        onBlur: resetChannels,
+                        inputMode: "numeric",
+                        className: "h-6 min-w-0 flex-1 border-none bg-transparent p-0 text-right text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none dark:text-zinc-50"
+                      }
+                    )
+                  ]
+                },
+                activeLabels[index]
+              )) })
+            ] })
+          ] })
+        }
+      ) : null,
+      /* @__PURE__ */ jsx7(
+        "input",
+        {
+          ...rest,
+          ref: mergedRef,
+          id: inputId,
+          type: "hidden",
+          className,
+          value: resolvedValue,
+          readOnly: true
+        }
+      )
+    ] });
+  }
+);
+
+// components/Combobox/Combobox.tsx
+import * as React9 from "react";
+import { twMerge as twMerge10 } from "tailwind-merge";
+
+// components/Dropdown/Dropdown.tsx
+import * as React6 from "react";
+import { twMerge as twMerge7 } from "tailwind-merge";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var Dropdown = React6.forwardRef(
+  ({
+    isOpen,
+    disabled,
+    placeholder,
+    displayValue,
+    query,
+    className,
+    inputClassName,
+    highlightClass,
+    ariaControls,
+    ariaActiveDescendant,
+    ariaLabel,
+    shellClassName,
+    leadingContent,
+    inlineContent,
+    inputProps,
+    inputRef,
+    chevronRef,
+    showChevron = true,
+    onShellFocusCapture,
+    onShellBlurCapture,
+    onKeyDownCapture,
+    onShellMouseDown,
+    onInputFocus,
+    onInputMouseDown,
+    onInputChange,
+    onChevronClick,
+    children
+  }, ref) => {
+    const focusClasses = !isOpen ? "focus-within:border-slate-400 focus-within:shadow-[0_0_0_1px_rgba(148,163,184,0.45)] dark:focus-within:border-slate-500" : "";
+    const buttonClasses = "inline-flex h-9 w-10 items-center justify-center rounded-xl bg-transparent text-sm text-slate-600 transition focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-zinc-200";
+    const inputClasses = twMerge7(
+      "w-full bg-transparent text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-500",
+      inputClassName,
+      inputProps == null ? void 0 : inputProps.className
+    );
+    const mergedPlaceholder = placeholder != null ? placeholder : inputProps == null ? void 0 : inputProps.placeholder;
+    const mergedAriaLabel = ariaLabel != null ? ariaLabel : inputProps == null ? void 0 : inputProps["aria-label"];
+    return /* @__PURE__ */ jsxs7("div", { ref, className: twMerge7("relative w-full", className), children: [
+      /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          onKeyDownCapture,
+          onMouseDown: onShellMouseDown,
+          onFocusCapture: onShellFocusCapture,
+          onBlurCapture: onShellBlurCapture,
+          className: twMerge7(
+            "flex h-11 items-center gap-1 rounded-2xl border border-slate-300 bg-white pl-3 pr-1 text-slate-900 shadow-sm transition dark:border-zinc-700/60 dark:bg-zinc-900/70 dark:text-zinc-100",
+            focusClasses,
+            isOpen && twMerge7("rounded-b-none border-b-0 dark:border-b-0", highlightClass),
+            disabled && "opacity-60",
+            shellClassName
+          ),
+          children: [
+            leadingContent ? /* @__PURE__ */ jsx8("div", { className: "flex items-center", children: leadingContent }) : null,
+            /* @__PURE__ */ jsx8(
+              "input",
+              {
+                ...inputProps,
+                ref: inputRef,
+                role: "combobox",
+                "aria-expanded": isOpen,
+                "aria-autocomplete": "list",
+                "aria-controls": ariaControls,
+                "aria-activedescendant": ariaActiveDescendant,
+                "aria-label": mergedAriaLabel,
+                disabled: !!disabled || (inputProps == null ? void 0 : inputProps.disabled),
+                readOnly: !isOpen,
+                onMouseDown: onInputMouseDown,
+                value: isOpen ? query : displayValue,
+                onFocus: onInputFocus,
+                onChange: onInputChange,
+                placeholder: mergedPlaceholder,
+                className: inputClasses
+              }
+            ),
+            inlineContent ? /* @__PURE__ */ jsx8("div", { className: "flex items-center gap-2", children: inlineContent }) : null,
+            showChevron ? /* @__PURE__ */ jsx8(
+              "button",
+              {
+                ref: chevronRef,
+                type: "button",
+                "aria-label": isOpen ? "Close" : "Open",
+                onClick: onChevronClick,
+                className: buttonClasses,
+                disabled: !!disabled,
+                children: /* @__PURE__ */ jsx8(
+                  ChevronDown,
+                  {
+                    className: twMerge7("size-4 transition-transform", isOpen && "rotate-180")
+                  }
+                )
+              }
+            ) : null
+          ]
+        }
+      ),
+      children
+    ] });
+  }
+);
+Dropdown.displayName = "Dropdown";
+
+// components/Popover/Popover.tsx
+import * as React7 from "react";
+import { twMerge as twMerge8 } from "tailwind-merge";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var MIN_THUMB_SIZE = 28;
+var TRACK_PADDING = 6;
+function Scrollbar({ scrollRef }) {
+  const [{ visible, size, offset }, setThumbState] = React7.useState({
+    visible: false,
+    size: MIN_THUMB_SIZE,
+    offset: 0
+  });
+  const dragState = React7.useRef(null);
+  React7.useLayoutEffect(() => {
+    const target = scrollRef.current;
+    if (!target) return;
+    let raf = 0;
+    const update = () => {
+      const el = scrollRef.current;
+      if (!el) return;
+      const { scrollTop, scrollHeight, clientHeight } = el;
+      const scrollRange = scrollHeight - clientHeight;
+      const trackHeight = Math.max(0, clientHeight - TRACK_PADDING * 2);
+      if (scrollRange <= 0 || trackHeight <= 0) {
+        setThumbState((prev) => prev.visible ? { ...prev, visible: false } : prev);
+        return;
+      }
+      const ratio = clientHeight / scrollHeight;
+      const thumbSize = Math.max(trackHeight * ratio, MIN_THUMB_SIZE);
+      const maxOffset = Math.max(0, trackHeight - thumbSize);
+      const thumbOffset = maxOffset > 0 ? scrollTop / scrollRange * maxOffset : 0;
+      setThumbState({ visible: true, size: thumbSize, offset: thumbOffset });
+    };
+    const handleScroll = () => {
+      cancelAnimationFrame(raf);
+      raf = window.requestAnimationFrame(update);
+    };
+    target.addEventListener("scroll", handleScroll, { passive: true });
+    update();
+    const resizeObserver = typeof window !== "undefined" && "ResizeObserver" in window ? new ResizeObserver(() => update()) : null;
+    resizeObserver == null ? void 0 : resizeObserver.observe(target);
+    return () => {
+      target.removeEventListener("scroll", handleScroll);
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      cancelAnimationFrame(raf);
+    };
+  }, [scrollRef]);
+  React7.useEffect(() => {
+    const handlePointerMove = (event) => {
+      const drag = dragState.current;
+      if (!drag) return;
+      const el = scrollRef.current;
+      if (!el) return;
+      const trackHeight = Math.max(0, el.clientHeight - TRACK_PADDING * 2);
+      const scrollRange = el.scrollHeight - el.clientHeight;
+      if (scrollRange <= 0 || trackHeight <= drag.thumbSize) return;
+      event.preventDefault();
+      const delta = event.clientY - drag.startY;
+      const ratio = scrollRange / (trackHeight - drag.thumbSize);
+      const nextScroll = drag.startScrollTop + delta * ratio;
+      el.scrollTop = Math.min(scrollRange, Math.max(0, nextScroll));
+    };
+    const handlePointerUp = () => {
+      dragState.current = null;
+    };
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [scrollRef]);
+  if (!visible) return null;
+  const handleThumbPointerDown = (event) => {
+    var _a, _b;
+    const el = scrollRef.current;
+    if (!el) return;
+    event.preventDefault();
+    event.stopPropagation();
+    dragState.current = {
+      startY: event.clientY,
+      startScrollTop: el.scrollTop,
+      thumbSize: size
+    };
+    (_b = (_a = event.currentTarget).setPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+  };
+  const handleTrackPointerDown = (event) => {
+    var _a, _b;
+    const el = scrollRef.current;
+    if (!el) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const trackRect = event.currentTarget.getBoundingClientRect();
+    const clickOffset = event.clientY - trackRect.top - TRACK_PADDING;
+    const trackLength = trackRect.height - TRACK_PADDING * 2;
+    const scrollRange = el.scrollHeight - el.clientHeight;
+    if (scrollRange <= 0 || trackLength <= 0) return;
+    const effective = Math.max(1, trackLength - size);
+    const ratio = Math.max(0, Math.min(effective, clickOffset - size / 2)) / effective;
+    el.scrollTop = ratio * scrollRange;
+    dragState.current = {
+      startY: event.clientY,
+      startScrollTop: el.scrollTop,
+      thumbSize: size
+    };
+    (_b = (_a = event.currentTarget).setPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+  };
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "pointer-events-none absolute inset-y-[6px] right-[2px] flex w-3 justify-center",
+      children: /* @__PURE__ */ jsx9(
+        "div",
+        {
+          className: "pointer-events-auto relative h-full w-1 rounded-full bg-slate-900/5 shadow-inner dark:bg-white/10",
+          onPointerDown: handleTrackPointerDown,
+          children: /* @__PURE__ */ jsx9(
+            "div",
+            {
+              className: "pointer-events-auto absolute left-1/2 w-1.5 -translate-x-1/2 rounded-full bg-slate-400/80 shadow-sm transition-colors dark:bg-zinc-200/70",
+              style: { height: `${size}px`, top: `${offset}px` },
+              onPointerDown: handleThumbPointerDown
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function Popover({ className, children }) {
+  const scrollRef = React7.useRef(null);
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: twMerge8(
+        "absolute left-0 right-0 top-full z-[999] -mt-px rounded-b-2xl rounded-t-none border border-slate-300 bg-white/95 py-1 shadow-xl shadow-slate-200/60 backdrop-blur dark:border-zinc-600 dark:bg-zinc-900/95 dark:shadow-zinc-900/40",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
+        children({ scrollRef }),
+        /* @__PURE__ */ jsx9(Scrollbar, { scrollRef })
+      ] })
+    }
+  );
+}
+
+// components/Combobox/hooks.ts
+import { useCallback as useCallback3, useEffect as useEffect4, useState as useState4 } from "react";
+function useControlledState(controlled, defaultValue) {
+  const [internal, setInternal] = useState4(defaultValue);
+  const isControlled = controlled !== void 0;
+  const value = isControlled ? controlled : internal;
+  const setValue = useCallback3(
+    (next) => {
+      if (!isControlled) {
+        setInternal(next);
+      }
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+}
+function useOutsideClick(refs, handler) {
+  useEffect4(() => {
+    function onDoc(e) {
+      const target = e.target;
+      const inside = refs.some((r) => r.current && r.current.contains(target));
+      if (!inside) handler();
+    }
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [refs, handler]);
+}
+
+// components/Combobox/Listbox.tsx
+import * as React8 from "react";
+import { twMerge as twMerge9 } from "tailwind-merge";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function Listbox({
+  id,
+  options,
+  activeIndex,
+  selectedId,
+  onHoverIndex,
+  onSelectIndex,
+  listRef,
+  emptyState,
+  renderOption
+}) {
+  React8.useEffect(() => {
+    var _a;
+    if (activeIndex < 0) return;
+    const el = (_a = listRef.current) == null ? void 0 : _a.querySelector(`[data-index="${activeIndex}"]`);
+    el == null ? void 0 : el.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, listRef]);
+  return /* @__PURE__ */ jsxs9(
+    "ul",
+    {
+      ref: listRef,
+      id,
+      role: "listbox",
+      className: twMerge9("combobox-scrollbar max-h-64 overflow-auto px-1 pr-4"),
+      children: [
+        options.length === 0 && /* @__PURE__ */ jsx10("li", { "aria-disabled": true, className: "select-none", children: /* @__PURE__ */ jsx10("div", { className: "px-3 py-2 text-sm text-slate-500 dark:text-zinc-500", children: emptyState != null ? emptyState : "No results" }) }),
+        options.map((opt, i) => {
+          const selected = opt.id === selectedId;
+          const active = i === activeIndex;
+          const optionState = { active, selected };
+          return /* @__PURE__ */ jsx10(
+            "li",
+            {
+              id: `${id}-option-${i}`,
+              role: "option",
+              "aria-selected": selected,
+              "aria-disabled": opt.disabled,
+              "data-index": i,
+              className: "list-none",
+              onMouseEnter: () => !opt.disabled && onHoverIndex(i),
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => !opt.disabled && onSelectIndex(i),
+              children: renderOption ? renderOption(opt, optionState) : /* @__PURE__ */ jsxs9(
+                "div",
+                {
+                  className: twMerge9(
+                    "flex cursor-pointer items-center gap-3 rounded-xl px-3 py-2 text-sm",
+                    active ? "bg-slate-100 text-slate-900 dark:bg-zinc-800/70 dark:text-zinc-100" : "text-slate-700 hover:bg-slate-100 dark:text-zinc-200 dark:hover:bg-zinc-800/70",
+                    opt.disabled && "cursor-not-allowed opacity-50"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx10("span", { className: "truncate", children: opt.label }),
+                    selected ? /* @__PURE__ */ jsx10(Check, { className: "ml-auto h-3 w-3 text-slate-600 dark:text-zinc-300" }) : /* @__PURE__ */ jsx10("span", { className: "ml-auto inline-flex h-3 w-3" })
+                  ]
+                }
+              )
+            },
+            opt.id
+          );
+        })
+      ]
+    }
+  );
+}
+
+// components/Combobox/Combobox.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function InnerCombobox({
+  options,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  placeholder = "Select.",
+  disabled,
+  className,
+  listClassName,
+  inputClassName,
+  emptyState,
+  renderOption,
+  filter,
+  openOnFocus = true,
+  ariaLabel
+}, forwardedRef) {
+  var _a, _b;
+  const inputRef = React9.useRef(null);
+  const containerRef = React9.useRef(null);
+  const chevronRef = React9.useRef(null);
+  const outsideClickRefs = React9.useMemo(
+    () => [containerRef],
+    [containerRef]
+  );
+  const mergedInputRef = (node) => {
+    inputRef.current = node;
+    assignRef(forwardedRef, node);
+  };
+  const [open, setOpen] = React9.useState(false);
+  const closeOnOutsideClick = React9.useCallback(() => setOpen(false), []);
+  const [query, setQuery] = React9.useState("");
+  const [activeIndex, setActiveIndex] = React9.useState(-1);
+  const suppressNextOpenRef = React9.useRef(false);
+  const suppressToggleRef = React9.useRef(false);
+  const prevOpenRef = React9.useRef(open);
+  const [selected, setSelected] = useControlledState(
+    valueProp,
+    defaultValue != null ? defaultValue : null
+  );
+  const isEffectivelyOpen = open && !suppressNextOpenRef.current;
+  const id = React9.useId();
+  const listboxId = `${id}-listbox`;
+  const normalizedFilter = React9.useMemo(() => {
+    if (filter) return filter;
+    return (opt, q) => opt.label.toLowerCase().includes(q.trim().toLowerCase());
+  }, [filter]);
+  const visibleOptions = React9.useMemo(() => {
+    const base = options != null ? options : [];
+    return query ? base.filter((o) => normalizedFilter(o, query)) : base;
+  }, [options, query, normalizedFilter]);
+  const selectedOptionIndex = React9.useMemo(() => {
+    if (!selected) return -1;
+    const indexFromOptions = (options != null ? options : []).findIndex((option) => option.id === selected.id);
+    if (indexFromOptions !== -1) return indexFromOptions;
+    return visibleOptions.findIndex((option) => option.id === selected.id);
+  }, [options, visibleOptions, selected]);
+  const firstEnabledOptionIndex = React9.useMemo(() => {
+    if (!options) return -1;
+    return options.findIndex((option) => !option.disabled);
+  }, [options]);
+  const lastEnabledOptionIndex = React9.useMemo(() => {
+    if (!options) return -1;
+    for (let i = options.length - 1; i >= 0; i -= 1) {
+      if (!options[i].disabled) {
+        return i;
+      }
+    }
+    return -1;
+  }, [options]);
+  const cycleEnabledOptionIndex = React9.useCallback(
+    (startIndex, direction) => {
+      if (!options || options.length === 0) return -1;
+      let next = startIndex;
+      for (let i = 0; i < options.length; i += 1) {
+        next = (next + direction + options.length) % options.length;
+        if (!options[next].disabled) return next;
+      }
+      return -1;
+    },
+    [options]
+  );
+  const selectedIndex = React9.useMemo(() => {
+    if (!selected) return -1;
+    return visibleOptions.findIndex((option) => option.id === selected.id);
+  }, [visibleOptions, selected]);
+  const firstEnabledIndex = React9.useMemo(() => {
+    return visibleOptions.findIndex((option) => !option.disabled);
+  }, [visibleOptions]);
+  const lastEnabledIndex = React9.useMemo(() => {
+    for (let i = visibleOptions.length - 1; i >= 0; i -= 1) {
+      if (!visibleOptions[i].disabled) {
+        return i;
+      }
+    }
+    return -1;
+  }, [visibleOptions]);
+  const cycleEnabledIndex = React9.useCallback(
+    (startIndex, direction) => {
+      if (visibleOptions.length === 0) return -1;
+      let next = startIndex;
+      for (let i = 0; i < visibleOptions.length; i += 1) {
+        next = (next + direction + visibleOptions.length) % visibleOptions.length;
+        if (!visibleOptions[next].disabled) return next;
+      }
+      return -1;
+    },
+    [visibleOptions]
+  );
+  React9.useEffect(() => {
+    if (visibleOptions.length === 0) {
+      setActiveIndex(-1);
+      return;
+    }
+    if (activeIndex >= visibleOptions.length) setActiveIndex(visibleOptions.length - 1);
+  }, [visibleOptions, activeIndex]);
+  React9.useEffect(() => {
+    const wasOpen = prevOpenRef.current;
+    prevOpenRef.current = open;
+    if (open && !wasOpen) {
+      const initialIndex = selectedIndex !== -1 ? selectedIndex : firstEnabledIndex;
+      setActiveIndex(initialIndex);
+    }
+    if (!open && wasOpen) {
+      setActiveIndex(-1);
+    }
+  }, [open, selectedIndex, firstEnabledIndex]);
+  React9.useLayoutEffect(() => {
+    if (open && suppressNextOpenRef.current) {
+      suppressNextOpenRef.current = false;
+      setOpen(false);
+    }
+  }, [open]);
+  useOutsideClick(outsideClickRefs, closeOnOutsideClick);
+  function commitSelection(opt, opts = {}) {
+    const { refocus = true } = opts;
+    setSelected(opt);
+    onChange == null ? void 0 : onChange(opt);
+    if (opt) setQuery("");
+    setOpen(false);
+    if (refocus) {
+      requestAnimationFrame(() => {
+        var _a2;
+        return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      });
+    }
+  }
+  function onKeyDown(e) {
+    const isArrowDown = e.key === "ArrowDown" || e.code === "ArrowDown" || e.key === "Down";
+    const isArrowUp = e.key === "ArrowUp" || e.code === "ArrowUp" || e.key === "Up";
+    if (isArrowDown || isArrowUp) {
+      e.preventDefault();
+      const direction = isArrowDown ? 1 : -1;
+      if (!open) {
+        suppressNextOpenRef.current = true;
+        const source = options != null ? options : [];
+        if (source.length === 0) return;
+        if (selectedOptionIndex === -1) {
+          const fallbackIndex = direction === 1 ? firstEnabledOptionIndex : lastEnabledOptionIndex;
+          if (fallbackIndex !== -1) {
+            commitSelection(source[fallbackIndex], { refocus: false });
+          }
+        } else {
+          const nextIndex = cycleEnabledOptionIndex(selectedOptionIndex, direction);
+          if (nextIndex !== -1 && nextIndex !== selectedOptionIndex) {
+            commitSelection(source[nextIndex], { refocus: false });
+          }
+        }
+        return;
+      }
+      const baseIndex = activeIndex === -1 ? direction === 1 ? firstEnabledIndex : lastEnabledIndex : activeIndex;
+      if (baseIndex === -1) return;
+      const next = cycleEnabledIndex(baseIndex, direction);
+      if (next !== -1) {
+        setActiveIndex(next);
+      }
+      return;
+    }
+    if (!open && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      suppressNextOpenRef.current = false;
+      setOpen(true);
+      return;
+    }
+    if (!open) return;
+    switch (e.key) {
+      case "Home": {
+        if (firstEnabledIndex !== -1) {
+          e.preventDefault();
+          setActiveIndex(firstEnabledIndex);
+        }
+        break;
+      }
+      case "End": {
+        if (lastEnabledIndex !== -1) {
+          e.preventDefault();
+          setActiveIndex(lastEnabledIndex);
+        }
+        break;
+      }
+      case "Enter": {
+        e.preventDefault();
+        if (activeIndex >= 0 && !visibleOptions[activeIndex].disabled) {
+          commitSelection(visibleOptions[activeIndex]);
+        }
+        break;
+      }
+      case "Escape": {
+        e.preventDefault();
+        setOpen(false);
+        break;
+      }
+    }
+  }
+  const selectedLabel = (_a = selected == null ? void 0 : selected.label) != null ? _a : "";
+  const selectedId = (_b = selected == null ? void 0 : selected.id) != null ? _b : null;
+  const highlightBorder = "border-slate-400 dark:border-slate-500";
+  const listboxHighlight = isEffectivelyOpen ? highlightBorder : "";
+  function openList() {
+    if (disabled) return;
+    suppressNextOpenRef.current = false;
+    setOpen(true);
+    setQuery("");
+    const initialIndex = selectedIndex !== -1 ? selectedIndex : firstEnabledIndex;
+    setActiveIndex(initialIndex);
+    requestAnimationFrame(() => {
+      var _a2;
+      return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    });
+  }
+  return /* @__PURE__ */ jsx11(
+    Dropdown,
+    {
+      ref: containerRef,
+      isOpen: isEffectivelyOpen,
+      disabled,
+      placeholder,
+      displayValue: selectedLabel,
+      query,
+      className,
+      inputClassName,
+      highlightClass: highlightBorder,
+      ariaControls: listboxId,
+      ariaActiveDescendant: activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0,
+      ariaLabel,
+      inputRef: mergedInputRef,
+      chevronRef,
+      onKeyDownCapture: onKeyDown,
+      onShellMouseDown: (e) => {
+        var _a2;
+        if (disabled) return;
+        if ((_a2 = chevronRef.current) == null ? void 0 : _a2.contains(e.target)) return;
+        if (!isEffectivelyOpen) {
+          e.preventDefault();
+          openList();
+          suppressToggleRef.current = true;
+        }
+      },
+      onInputMouseDown: (e) => {
+        if (!open && !disabled) {
+          e.preventDefault();
+          openList();
+        }
+      },
+      onInputFocus: () => {
+        if (suppressNextOpenRef.current) {
+          suppressNextOpenRef.current = false;
+          return;
+        }
+        if (openOnFocus && !disabled) {
+          setOpen(true);
+          setQuery("");
+          const initialIndex = selectedIndex !== -1 ? selectedIndex : firstEnabledIndex;
+          setActiveIndex(initialIndex);
+        }
+      },
+      onInputChange: (e) => {
+        setQuery(e.target.value);
+        if (!open) {
+          suppressNextOpenRef.current = false;
+          setOpen(true);
+        }
+      },
+      onChevronClick: () => {
+        if (disabled) return;
+        if (suppressToggleRef.current) {
+          suppressToggleRef.current = false;
+          setOpen((o) => !o);
+          return;
+        }
+        suppressNextOpenRef.current = false;
+        setOpen((o) => !o);
+      },
+      children: isEffectivelyOpen && /* @__PURE__ */ jsx11(Popover, { className: twMerge10(listboxHighlight, listClassName), children: ({ scrollRef }) => /* @__PURE__ */ jsx11(
+        Listbox,
+        {
+          id: listboxId,
+          options: visibleOptions,
+          activeIndex,
+          selectedId,
+          onHoverIndex: setActiveIndex,
+          onSelectIndex: (i) => commitSelection(visibleOptions[i]),
+          listRef: scrollRef,
+          emptyState,
+          renderOption
+        }
+      ) })
+    }
+  );
+}
+var Combobox = React9.forwardRef(InnerCombobox);
+
+// components/DatalistInput/DatalistInput.tsx
+import * as React10 from "react";
+import { twMerge as twMerge11 } from "tailwind-merge";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var DatalistInput = React10.forwardRef(
+  function DatalistInput2({ label, description, options, className, id, disabled, ...rest }, ref) {
+    var _a, _b, _c;
+    const generatedId = React10.useId();
+    const inputId = id != null ? id : generatedId;
+    const descriptionId = React10.useId();
+    const dropdownRef = React10.useRef(null);
+    const listboxRef = React10.useRef(null);
+    const inputRef = React10.useRef(null);
+    const mergedRef = React10.useCallback(
+      (node) => {
+        inputRef.current = node;
+        assignRef(ref, node);
+      },
+      [ref]
+    );
+    const [query, setQuery] = React10.useState((_b = (_a = rest.defaultValue) == null ? void 0 : _a.toString()) != null ? _b : "");
+    const [open, setOpen] = React10.useState(false);
+    const [activeIndex, setActiveIndex] = React10.useState(-1);
+    const listboxId = `${inputId}-listbox`;
+    const activeDescendant = activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0;
+    const controlledValue = (_c = rest.value) == null ? void 0 : _c.toString();
+    const displayValue = controlledValue != null ? controlledValue : query;
+    useOutsideClick([dropdownRef], () => setOpen(false));
+    const filtered = React10.useMemo(() => {
+      if (!displayValue.trim()) return options;
+      return options.filter((opt) => opt.toLowerCase().includes(displayValue.toLowerCase()));
+    }, [options, displayValue]);
+    React10.useEffect(() => {
+      if (controlledValue !== void 0) {
+        setQuery(controlledValue);
+      }
+    }, [controlledValue]);
+    const emitChange = (val) => {
+      var _a2;
+      setQuery(val);
+      (_a2 = rest.onChange) == null ? void 0 : _a2.call(rest, {
+        target: { value: val }
+      });
+    };
+    const handleKeyDown = (e) => {
+      if (!open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+        setOpen(true);
+        setActiveIndex(0);
+      }
+      if (!open) return;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setActiveIndex((prev) => Math.min(filtered.length - 1, prev + 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setActiveIndex((prev) => Math.max(0, prev - 1));
+          break;
+        case "Enter":
+          if (activeIndex >= 0 && filtered[activeIndex]) {
+            emitChange(filtered[activeIndex]);
+            setOpen(false);
+          }
+          break;
+        case "Escape":
+          setOpen(false);
+          break;
+      }
+    };
+    const handleSelect = (val) => {
+      var _a2;
+      emitChange(val);
+      setOpen(false);
+      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    };
+    const handleInputChange = (e) => {
+      var _a2;
+      setQuery(e.target.value);
+      setOpen(true);
+      setActiveIndex(0);
+      (_a2 = rest.onChange) == null ? void 0 : _a2.call(rest, e);
+    };
+    const setListRef = (node, scrollRef) => {
+      scrollRef.current = node;
+      listboxRef.current = node;
+    };
+    return /* @__PURE__ */ jsxs10("div", { className: "space-y-1.5", children: [
+      label ? /* @__PURE__ */ jsx12(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-zinc-400",
+          children: label
+        }
+      ) : null,
+      /* @__PURE__ */ jsx12(
+        Dropdown,
+        {
+          ref: dropdownRef,
+          isOpen: open,
+          disabled,
+          placeholder: rest.placeholder,
+          displayValue,
+          query: displayValue,
+          inputRef: mergedRef,
+          showChevron: false,
+          inlineContent: /* @__PURE__ */ jsx12("span", { className: "text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400 dark:text-zinc-500", children: "CMD" }),
+          onKeyDownCapture: handleKeyDown,
+          onShellMouseDown: () => setOpen(true),
+          onInputFocus: () => setOpen(true),
+          onInputMouseDown: () => setOpen(true),
+          onInputChange: handleInputChange,
+          ariaControls: listboxId,
+          ariaActiveDescendant: activeDescendant,
+          ariaLabel: rest["aria-label"],
+          inputClassName: className,
+          inputProps: {
+            ...rest,
+            id: inputId,
+            "aria-describedby": description ? descriptionId : rest["aria-describedby"]
+          },
+          children: open && filtered.length ? /* @__PURE__ */ jsx12(Popover, { children: ({ scrollRef }) => /* @__PURE__ */ jsx12(
+            "ul",
+            {
+              ref: (node) => setListRef(node, scrollRef),
+              id: listboxId,
+              role: "listbox",
+              className: "combobox-scrollbar max-h-56 overflow-auto py-1 text-sm text-slate-800 dark:text-zinc-100",
+              children: filtered.map((opt, index) => /* @__PURE__ */ jsx12(
+                "li",
+                {
+                  id: `${listboxId}-option-${index}`,
+                  role: "option",
+                  "aria-selected": index === activeIndex,
+                  children: /* @__PURE__ */ jsxs10(
+                    "button",
+                    {
+                      type: "button",
+                      onMouseEnter: () => setActiveIndex(index),
+                      onClick: () => handleSelect(opt),
+                      className: twMerge11(
+                        "flex w-full items-center gap-3 px-3 py-2 text-left transition hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400/70 dark:hover:bg-zinc-800/60",
+                        index === activeIndex && "bg-slate-50 dark:bg-zinc-800/60"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx12("span", { className: "text-[10px] uppercase tracking-[0.2em] text-slate-400 dark:text-zinc-500", children: "cmd" }),
+                        /* @__PURE__ */ jsx12("span", { className: "font-semibold", children: opt })
+                      ]
+                    }
+                  )
+                },
+                opt
+              ))
+            }
+          ) }) : null
+        }
+      ),
+      description ? /* @__PURE__ */ jsx12("p", { id: descriptionId, className: "text-xs text-slate-500 dark:text-zinc-400", children: description }) : null
+    ] });
+  }
+);
+
+// components/DatePicker/DatePicker.tsx
+import * as React12 from "react";
+import { twMerge as twMerge13 } from "tailwind-merge";
+
+// components/Select/Select.tsx
+import * as React11 from "react";
+import { twMerge as twMerge12 } from "tailwind-merge";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function Select({
+  label,
+  description,
+  error,
+  options,
+  value,
+  defaultValue,
+  onChange,
+  placeholder = "Select an option",
+  className,
+  disabled,
+  leadingContent,
+  inlineContent
+}) {
+  var _a, _b;
+  const containerRef = React11.useRef(null);
+  const inputRef = React11.useRef(null);
+  const chevronRef = React11.useRef(null);
+  const popoverListRef = React11.useRef(null);
+  const suppressToggleRef = React11.useRef(false);
+  const id = React11.useId();
+  const listboxId = `${id}-listbox`;
+  const [open, setOpen] = React11.useState(false);
+  const [activeIndex, setActiveIndex] = React11.useState(-1);
+  const [selected, setSelected] = useControlledState(value, defaultValue != null ? defaultValue : null);
+  useOutsideClick(
+    [containerRef],
+    () => setOpen(false)
+  );
+  const selectedOption = (_a = options.find((opt) => opt.value === selected)) != null ? _a : null;
+  const selectedIndex = React11.useMemo(
+    () => options.findIndex((opt) => opt.value === selected),
+    [options, selected]
+  );
+  const firstEnabled = React11.useMemo(() => options.findIndex((o) => !o.disabled), [options]);
+  const lastEnabled = React11.useMemo(() => {
+    for (let i = options.length - 1; i >= 0; i -= 1) {
+      if (!options[i].disabled) return i;
+    }
+    return -1;
+  }, [options]);
+  const cycleEnabled = React11.useCallback(
+    (start, dir) => {
+      if (!options.length) return -1;
+      let next = start;
+      for (let i = 0; i < options.length; i += 1) {
+        next = (next + dir + options.length) % options.length;
+        if (!options[next].disabled) return next;
+      }
+      return -1;
+    },
+    [options]
+  );
+  const commitSelection = (index) => {
+    const opt = options[index];
+    if (!opt || opt.disabled) return;
+    setSelected(opt.value);
+    onChange == null ? void 0 : onChange(opt.value);
+    setOpen(false);
+    requestAnimationFrame(() => {
+      var _a2;
+      return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    });
+  };
+  const openList = () => {
+    if (disabled) return;
+    setOpen(true);
+    setActiveIndex(selectedIndex !== -1 ? selectedIndex : firstEnabled);
+    requestAnimationFrame(() => {
+      var _a2;
+      return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    });
+  };
+  const handleKeyDown = (e) => {
+    const isArrowDown = e.key === "ArrowDown" || e.code === "ArrowDown" || e.key === "Down";
+    const isArrowUp = e.key === "ArrowUp" || e.code === "ArrowUp" || e.key === "Up";
+    if (!open && (isArrowDown || isArrowUp)) {
+      e.preventDefault();
+      const direction = isArrowDown ? 1 : -1;
+      const source = options;
+      if (!source.length) return;
+      const startIndex = selectedIndex === -1 ? direction === 1 ? firstEnabled : lastEnabled : selectedIndex;
+      const nextIndex = startIndex === -1 ? -1 : cycleEnabled(startIndex, direction);
+      if (nextIndex !== -1 && nextIndex !== selectedIndex) {
+        commitSelection(nextIndex);
+      }
+      return;
+    }
+    if (!open && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      openList();
+      return;
+    }
+    if (!open) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActiveIndex((prev) => {
+          const start = prev === -1 ? firstEnabled : prev;
+          return cycleEnabled(start, 1);
+        });
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActiveIndex((prev) => {
+          const start = prev === -1 ? lastEnabled : prev;
+          return cycleEnabled(start, -1);
+        });
+        break;
+      case "Home":
+        e.preventDefault();
+        setActiveIndex(firstEnabled);
+        break;
+      case "End":
+        e.preventDefault();
+        setActiveIndex(lastEnabled);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (activeIndex >= 0) commitSelection(activeIndex);
+        break;
+      case "Escape":
+        e.preventDefault();
+        setOpen(false);
+        break;
+    }
+  };
+  React11.useEffect(() => {
+    var _a2;
+    if (!open) return;
+    const refObj = popoverListRef.current;
+    const el = (_a2 = refObj == null ? void 0 : refObj.current) == null ? void 0 : _a2.querySelector(`[data-index="${activeIndex}"]`);
+    el == null ? void 0 : el.scrollIntoView({ block: "nearest" });
+  }, [open, activeIndex]);
+  const displayValue = (_b = selectedOption == null ? void 0 : selectedOption.label) != null ? _b : "";
+  const highlightBorder = "border-slate-400 dark:border-slate-500";
+  const listboxHighlight = open ? highlightBorder : "";
+  return /* @__PURE__ */ jsxs11("div", { className: "space-y-1.5", children: [
+    label ? /* @__PURE__ */ jsx13("p", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-zinc-400", children: label }) : null,
+    /* @__PURE__ */ jsx13(
+      Dropdown,
+      {
+        ref: containerRef,
+        isOpen: open,
+        disabled,
+        placeholder,
+        displayValue,
+        query: displayValue,
+        className: twMerge12(
+          "w-full",
+          error && "border-rose-300 focus-within:border-rose-400 focus-within:shadow-[0_0_0_1px_rgba(248,113,113,0.35)] dark:border-rose-500/60",
+          className
+        ),
+        inputClassName: "font-semibold",
+        highlightClass: highlightBorder,
+        ariaControls: listboxId,
+        ariaLabel: label,
+        inputRef,
+        chevronRef,
+        leadingContent,
+        inlineContent,
+        onKeyDownCapture: handleKeyDown,
+        onShellMouseDown: (e) => {
+          var _a2;
+          if (disabled) return;
+          if ((_a2 = chevronRef.current) == null ? void 0 : _a2.contains(e.target)) return;
+          if (!open) {
+            e.preventDefault();
+            openList();
+            suppressToggleRef.current = true;
+          }
+        },
+        onInputMouseDown: (e) => {
+          if (!open && !disabled) {
+            e.preventDefault();
+            openList();
+          }
+        },
+        onInputFocus: () => {
+          if (suppressToggleRef.current) {
+            suppressToggleRef.current = false;
+          }
+        },
+        onInputChange: () => {
+        },
+        onChevronClick: () => {
+          if (disabled) return;
+          if (suppressToggleRef.current) {
+            suppressToggleRef.current = false;
+            setOpen((o) => !o);
+            return;
+          }
+          setOpen((o) => !o);
+        },
+        children: open && /* @__PURE__ */ jsx13(Popover, { className: listboxHighlight, children: ({ scrollRef }) => {
+          popoverListRef.current = scrollRef;
+          return /* @__PURE__ */ jsx13(
+            "ul",
+            {
+              ref: scrollRef,
+              id: listboxId,
+              role: "listbox",
+              className: "combobox-scrollbar max-h-64 overflow-auto px-1 pr-4",
+              children: options.map((opt, index) => {
+                const isSelected = selected === opt.value;
+                const isActive = activeIndex === index;
+                return /* @__PURE__ */ jsx13("li", { className: "list-none", "data-index": index, children: /* @__PURE__ */ jsxs11(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": isSelected,
+                    disabled: opt.disabled,
+                    onMouseEnter: () => !opt.disabled && setActiveIndex(index),
+                    onClick: () => commitSelection(index),
+                    className: twMerge12(
+                      "flex w-full items-center gap-3 rounded-xl px-3 py-2 text-left text-sm transition",
+                      isActive ? "bg-slate-100 text-slate-900 dark:bg-zinc-800/70 dark:text-zinc-100" : "text-slate-700 hover:bg-slate-100 dark:text-zinc-200 dark:hover:bg-zinc-800/70",
+                      isSelected && "font-semibold",
+                      opt.disabled && "cursor-not-allowed opacity-50"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs11("span", { className: "flex-1 text-left", children: [
+                        /* @__PURE__ */ jsx13("span", { className: "block text-slate-900 dark:text-zinc-100", children: opt.label }),
+                        opt.description ? /* @__PURE__ */ jsx13("span", { className: "block text-xs text-slate-500 dark:text-zinc-400", children: opt.description }) : null
+                      ] }),
+                      isSelected ? /* @__PURE__ */ jsx13(Check, { className: "ml-auto h-3 w-3 text-slate-600 dark:text-zinc-300" }) : /* @__PURE__ */ jsx13("span", { className: "ml-auto inline-flex h-3 w-3" })
+                    ]
+                  }
+                ) }, opt.value);
+              })
+            }
+          );
+        } })
+      }
+    ),
+    description ? /* @__PURE__ */ jsx13("p", { className: "text-xs text-slate-500 dark:text-zinc-400", children: description }) : null,
+    error ? /* @__PURE__ */ jsx13("p", { className: "text-xs font-medium text-rose-500 dark:text-rose-400", children: error }) : null
+  ] });
+}
+
+// components/DatePicker/DatePicker.tsx
+import { Fragment, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function formatLocalDateString(year, month, day) {
+  const y = String(year).padStart(4, "0");
+  const m = String(month + 1).padStart(2, "0");
+  const d = String(day).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function parseLocalDateString(value) {
+  if (!value) return null;
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value.trim());
+  if (!match) return null;
+  const [, y, m, d] = match;
+  const year = Number(y);
+  const month = Number(m) - 1;
+  const day = Number(d);
+  const date = new Date(year, month, day);
+  if (Number.isNaN(date.getTime())) return null;
+  return { date, year, month, day };
+}
+function getMonthDays(year, month) {
+  const first = new Date(year, month, 1);
+  const start = first.getDay();
+  const days = new Date(year, month + 1, 0).getDate();
+  const grid = [];
+  for (let i = 0; i < start; i += 1) grid.push({ day: null });
+  for (let d = 1; d <= days; d += 1) {
+    const date = new Date(year, month, d);
+    grid.push({ day: d, date: date.toISOString().slice(0, 10) });
+  }
+  return grid;
+}
+var DatePicker = React12.forwardRef(function DatePicker2({
+  label,
+  description,
+  error,
+  className,
+  disabled,
+  value,
+  defaultValue,
+  onChange,
+  type = "date",
+  timeIntervalMinutes = 30,
+  use24HourClock = true
+}, ref) {
+  const isDate = type === "date";
+  const clampInterval = Math.max(1, Math.min(60, Math.floor(timeIntervalMinutes)));
+  const normalizeTimeString = (input) => {
+    if (!input) return null;
+    const match = /(\d{1,2}):(\d{2})/.exec(input);
+    if (!match) return null;
+    const h = Math.min(23, Math.max(0, Number(match[1])));
+    const m = Math.min(59, Math.max(0, Number(match[2])));
+    return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+  };
+  const formatTimeLabel = React12.useCallback(
+    (time) => {
+      if (use24HourClock) return time;
+      const [hStr, m] = time.split(":");
+      let hNum = Number(hStr);
+      const suffix = hNum >= 12 ? "PM" : "AM";
+      hNum = hNum % 12 || 12;
+      return `${String(hNum).padStart(2, "0")}:${m} ${suffix}`;
+    },
+    [use24HourClock]
+  );
+  const initial = (() => {
+    var _a, _b, _c;
+    if (!isDate) {
+      return (_b = (_a = normalizeTimeString(value)) != null ? _a : normalizeTimeString(defaultValue)) != null ? _b : (() => {
+        const now = /* @__PURE__ */ new Date();
+        const minutes = now.getMinutes();
+        const rounded = Math.round(minutes / clampInterval) * clampInterval;
+        const h = rounded >= 60 ? now.getHours() + 1 : now.getHours();
+        const m = rounded % 60;
+        const safeH = (h + 24) % 24;
+        return `${String(safeH).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+      })();
+    }
+    const normalized = (_c = parseLocalDateString(value != null ? value : defaultValue)) == null ? void 0 : _c.date;
+    if (normalized)
+      return formatLocalDateString(
+        normalized.getFullYear(),
+        normalized.getMonth(),
+        normalized.getDate()
+      );
+    const today = /* @__PURE__ */ new Date();
+    return formatLocalDateString(today.getFullYear(), today.getMonth(), today.getDate());
+  })();
+  const [open, setOpen] = React12.useState(false);
+  const [current, setCurrent] = React12.useState(initial);
+  const [month, setMonth] = React12.useState(() => {
+    var _a, _b;
+    const base = (_b = (_a = parseLocalDateString(initial)) == null ? void 0 : _a.date) != null ? _b : /* @__PURE__ */ new Date();
+    return { year: base.getFullYear(), month: base.getMonth() };
+  });
+  const [viewMode, setViewMode] = React12.useState("day");
+  const dropdownRef = React12.useRef(null);
+  const toggleRef = React12.useRef(null);
+  const inputInnerRef = React12.useRef(null);
+  const suppressToggleRef = React12.useRef(false);
+  const canvasRef = React12.useRef(null);
+  const [useShortLabel, setUseShortLabel] = React12.useState(false);
+  const id = React12.useId();
+  const popoverId = `${id}-popover`;
+  const setInputRef = React12.useCallback(
+    (node) => {
+      inputInnerRef.current = node;
+      assignRef(ref, node);
+    },
+    [ref]
+  );
+  useOutsideClick(
+    [dropdownRef],
+    () => setOpen(false)
+  );
+  const commit = (next) => {
+    setCurrent(next);
+    onChange == null ? void 0 : onChange(next);
+    setOpen(false);
+    setViewMode("day");
+  };
+  const parsedDate = React12.useMemo(() => {
+    var _a;
+    const parsed = parseLocalDateString(current);
+    return (_a = parsed == null ? void 0 : parsed.date) != null ? _a : null;
+  }, [current]);
+  const longDisplayLabel = React12.useMemo(() => {
+    if (!parsedDate) return current;
+    return parsedDate.toLocaleDateString(void 0, {
+      weekday: "short",
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    });
+  }, [parsedDate, current]);
+  const shortDisplayLabel = React12.useMemo(() => {
+    if (!parsedDate) return current;
+    return parsedDate.toLocaleDateString(void 0, {
+      month: "2-digit",
+      day: "2-digit",
+      year: "2-digit"
+    });
+  }, [parsedDate, current]);
+  const displayLabel = useShortLabel ? shortDisplayLabel : longDisplayLabel;
+  const timeOptions = React12.useMemo(() => {
+    const opts = [];
+    for (let h = 0; h < 24; h += 1) {
+      for (let m = 0; m < 60; m += clampInterval) {
+        const hh = String(h).padStart(2, "0");
+        const mm = String(m).padStart(2, "0");
+        const valueStr = `${hh}:${mm}`;
+        opts.push({ value: valueStr, label: formatTimeLabel(valueStr) });
+      }
+    }
+    return opts;
+  }, [clampInterval, formatTimeLabel]);
+  const highlightBorder = "border-slate-400 shadow-[0_0_0_1px_rgba(148,163,184,0.45)] dark:border-slate-500";
+  const monthNames = React12.useMemo(
+    () => ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    []
+  );
+  const decadeStart = Math.floor(month.year / 10) * 10;
+  const goPrev = () => {
+    if (viewMode === "day") {
+      setMonth((prev) => ({
+        year: prev.month === 0 ? prev.year - 1 : prev.year,
+        month: prev.month === 0 ? 11 : prev.month - 1
+      }));
+    } else if (viewMode === "month") {
+      setMonth((prev) => ({ ...prev, year: prev.year - 1 }));
+    } else {
+      setMonth((prev) => ({ ...prev, year: prev.year - 10 }));
+    }
+  };
+  const goNext = () => {
+    if (viewMode === "day") {
+      setMonth((prev) => ({
+        year: prev.month === 11 ? prev.year + 1 : prev.year,
+        month: prev.month === 11 ? 0 : prev.month + 1
+      }));
+    } else if (viewMode === "month") {
+      setMonth((prev) => ({ ...prev, year: prev.year + 1 }));
+    } else {
+      setMonth((prev) => ({ ...prev, year: prev.year + 10 }));
+    }
+  };
+  const rangeStart = decadeStart - 1;
+  const rangeEnd = decadeStart + 10;
+  const headerLabel = viewMode === "year" ? `${rangeStart} - ${rangeEnd}` : viewMode === "month" ? `${month.year}` : new Date(month.year, month.month).toLocaleString("default", {
+    month: "long",
+    year: "numeric"
+  });
+  function openPicker() {
+    if (disabled) return;
+    const base = parsedDate != null ? parsedDate : /* @__PURE__ */ new Date();
+    setMonth({ year: base.getFullYear(), month: base.getMonth() });
+    setViewMode("day");
+    setOpen(true);
+  }
+  const evaluateLabelFit = React12.useCallback(() => {
+    var _a;
+    if (!parsedDate) {
+      setUseShortLabel(false);
+      return;
+    }
+    const inputEl = inputInnerRef.current;
+    if (!inputEl) return;
+    const inputStyles = getComputedStyle(inputEl);
+    const padding = parseFloat(inputStyles.paddingLeft || "0") + parseFloat(inputStyles.paddingRight || "0");
+    const available = inputEl.clientWidth - padding;
+    if (available <= 0) return;
+    const font = inputStyles.font || `${inputStyles.fontWeight} ${inputStyles.fontSize} ${inputStyles.fontFamily}`;
+    const canvas = (_a = canvasRef.current) != null ? _a : document.createElement("canvas");
+    canvasRef.current = canvas;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.font = font;
+    const fullWidth = ctx.measureText(longDisplayLabel).width;
+    const fitsLong = fullWidth <= available;
+    setUseShortLabel(!fitsLong);
+  }, [parsedDate, longDisplayLabel]);
+  React12.useLayoutEffect(() => {
+    evaluateLabelFit();
+    const ro = new ResizeObserver(() => evaluateLabelFit());
+    if (dropdownRef.current) ro.observe(dropdownRef.current);
+    return () => ro.disconnect();
+  }, [evaluateLabelFit]);
+  React12.useEffect(() => {
+    const id2 = requestAnimationFrame(() => evaluateLabelFit());
+    return () => cancelAnimationFrame(id2);
+  }, [displayLabel, evaluateLabelFit]);
+  if (!isDate) {
+    return /* @__PURE__ */ jsx14(
+      Select,
+      {
+        label,
+        description,
+        error,
+        options: timeOptions,
+        value: current,
+        onChange: (val) => commit(val != null ? val : current),
+        placeholder: "Select time",
+        disabled,
+        className,
+        leadingContent: /* @__PURE__ */ jsx14("span", { className: "pointer-events-none rounded-xl bg-slate-100 px-2 py-1 shadow-inner dark:bg-zinc-800/70", children: /* @__PURE__ */ jsx14(Clock, { className: "h-4 w-4 text-slate-500 dark:text-zinc-300" }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs12("div", { className: "space-y-1.5", children: [
+    label ? /* @__PURE__ */ jsx14("p", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-zinc-400", children: label }) : null,
+    /* @__PURE__ */ jsx14("div", { className: "relative", children: /* @__PURE__ */ jsx14(
+      Dropdown,
+      {
+        ref: dropdownRef,
+        isOpen: open,
+        disabled,
+        placeholder: "",
+        displayValue: displayLabel,
+        query: displayLabel,
+        className: "w-full",
+        inputClassName: twMerge13("min-w-0 font-semibold", className),
+        shellClassName: twMerge13(
+          error && "border-rose-300 focus-within:border-rose-400 focus-within:shadow-[0_0_0_1px_rgba(248,113,113,0.35)] dark:border-rose-500/60"
+        ),
+        leadingContent: /* @__PURE__ */ jsx14("span", { className: "pointer-events-none rounded-xl bg-slate-100 px-2 py-1 shadow-inner dark:bg-zinc-800/70", children: /* @__PURE__ */ jsx14(Calendar, { className: "h-4 w-4 text-slate-500 dark:text-zinc-300" }) }),
+        highlightClass: highlightBorder,
+        ariaControls: popoverId,
+        ariaLabel: label,
+        inputRef: setInputRef,
+        chevronRef: toggleRef,
+        onKeyDownCapture: () => {
+        },
+        onShellMouseDown: (e) => {
+          var _a;
+          if (disabled) return;
+          if ((_a = toggleRef.current) == null ? void 0 : _a.contains(e.target)) return;
+          if (!open) {
+            e.preventDefault();
+            suppressToggleRef.current = true;
+            openPicker();
+            requestAnimationFrame(() => {
+              var _a2;
+              return (_a2 = toggleRef.current) == null ? void 0 : _a2.focus();
+            });
+          }
+        },
+        onInputMouseDown: (e) => {
+          if (!open && !disabled) {
+            e.preventDefault();
+            suppressToggleRef.current = true;
+            openPicker();
+            requestAnimationFrame(() => {
+              var _a;
+              return (_a = toggleRef.current) == null ? void 0 : _a.focus();
+            });
+          }
+        },
+        onInputFocus: () => {
+          if (suppressToggleRef.current) {
+            suppressToggleRef.current = false;
+            return;
+          }
+          openPicker();
+        },
+        onInputChange: () => {
+        },
+        onChevronClick: () => {
+          if (disabled) return;
+          if (suppressToggleRef.current) {
+            suppressToggleRef.current = false;
+            setOpen((o) => !o);
+            return;
+          }
+          setOpen((o) => !o);
+        },
+        children: open && /* @__PURE__ */ jsx14(Popover, { className: twMerge13("p-3", highlightBorder), children: () => /* @__PURE__ */ jsxs12("div", { className: "space-y-3", id: popoverId, children: [
+          /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between text-sm text-slate-600 dark:text-zinc-300", children: [
+            /* @__PURE__ */ jsx14(
+              Button,
+              {
+                type: "button",
+                onClick: goPrev,
+                className: "h-8 w-8 min-w-0 rounded-xl border border-slate-200 bg-white p-0 text-sm font-semibold text-slate-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100",
+                children: /* @__PURE__ */ jsx14("span", { style: { transform: "translateY(-1.5px)" }, children: "<" })
+              }
+            ),
+            viewMode === "year" ? /* @__PURE__ */ jsx14("span", { className: "font-semibold text-slate-900 dark:text-zinc-100", children: headerLabel }) : /* @__PURE__ */ jsx14(
+              "button",
+              {
+                type: "button",
+                onClick: () => setViewMode((prev) => prev === "day" ? "month" : "year"),
+                className: "font-semibold text-slate-900 transition hover:underline dark:text-zinc-100",
+                children: headerLabel
+              }
+            ),
+            /* @__PURE__ */ jsx14(
+              Button,
+              {
+                type: "button",
+                onClick: goNext,
+                className: "h-8 w-8 min-w-0 rounded-xl border border-slate-200 bg-white p-0 text-sm font-semibold text-slate-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100",
+                children: /* @__PURE__ */ jsx14("span", { style: { transform: "translateY(-1.5px)" }, children: ">" })
+              }
+            )
+          ] }),
+          viewMode === "day" ? /* @__PURE__ */ jsxs12(Fragment, { children: [
+            /* @__PURE__ */ jsx14("div", { className: "grid grid-cols-7 gap-1 text-center text-[11px] uppercase tracking-[0.2em] text-slate-400 dark:text-zinc-500", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => /* @__PURE__ */ jsx14("span", { children: d }, d)) }),
+            /* @__PURE__ */ jsx14("div", { className: "grid grid-cols-7 gap-1", children: getMonthDays(month.year, month.month).map((cell, idx) => {
+              var _a, _b;
+              const isSelected = cell.date === current;
+              return /* @__PURE__ */ jsx14(
+                "button",
+                {
+                  type: "button",
+                  disabled: !cell.date,
+                  onClick: () => {
+                    if (!cell.date) return;
+                    commit(cell.date);
+                  },
+                  className: twMerge13(
+                    "h-9 rounded-xl text-sm font-semibold text-slate-700 transition hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400/70 dark:text-zinc-200 dark:hover:bg-zinc-800",
+                    isSelected && "bg-slate-200 text-slate-900 ring-1 ring-slate-400/70 shadow-sm dark:bg-zinc-800 dark:hover:bg-zinc-700/80 dark:text-zinc-100 dark:ring-zinc-500/70",
+                    !cell.date && "opacity-30"
+                  ),
+                  children: (_b = cell.day) != null ? _b : ""
+                },
+                `${(_a = cell.date) != null ? _a : "empty"}-${idx}`
+              );
+            }) })
+          ] }) : viewMode === "month" ? /* @__PURE__ */ jsx14("div", { className: "grid grid-cols-3 gap-2", children: monthNames.map((name, idx) => {
+            const isSelected = (parsedDate == null ? void 0 : parsedDate.getFullYear()) === month.year && (parsedDate == null ? void 0 : parsedDate.getMonth()) === idx;
+            return /* @__PURE__ */ jsx14(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setMonth((prev) => ({ ...prev, month: idx }));
+                  setViewMode("day");
+                },
+                className: twMerge13(
+                  "h-10 rounded-xl border border-slate-200 bg-white text-sm font-semibold text-slate-700 shadow-sm transition hover:-translate-y-[1px] hover:shadow-md dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100",
+                  isSelected && "border-slate-400 bg-slate-100 dark:border-slate-500 dark:bg-zinc-800"
+                ),
+                children: name
+              },
+              name
+            );
+          }) }) : /* @__PURE__ */ jsx14("div", { className: "grid grid-cols-3 gap-2", children: Array.from({ length: 12 }, (_, i) => rangeStart + i).map((yr) => {
+            const isSelected = (parsedDate == null ? void 0 : parsedDate.getFullYear()) === yr;
+            return /* @__PURE__ */ jsx14(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setMonth((prev) => ({ ...prev, year: yr }));
+                  setViewMode("month");
+                },
+                className: twMerge13(
+                  "h-10 rounded-xl border border-slate-200 bg-white text-sm font-semibold text-slate-700 shadow-sm transition hover:-translate-y-[1px] hover:shadow-md dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100",
+                  isSelected && "border-slate-400 bg-slate-100 dark:border-slate-500 dark:bg-zinc-800"
+                ),
+                children: yr
+              },
+              yr
+            );
+          }) })
+        ] }) })
+      }
+    ) }),
+    description ? /* @__PURE__ */ jsx14("p", { className: "text-xs text-slate-500 dark:text-zinc-400", children: description }) : null,
+    error ? /* @__PURE__ */ jsx14("p", { className: "text-xs font-medium text-rose-500 dark:text-rose-400", children: error }) : null
+  ] });
+});
+
+// components/Dialog/Dialog.tsx
+import * as React13 from "react";
+import { createPortal } from "react-dom";
+import { twMerge as twMerge14 } from "tailwind-merge";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function Dialog({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  footer,
+  modal = true,
+  draggable = true
+}) {
+  const overlayRef = React13.useRef(null);
+  const dialogRef = React13.useRef(null);
+  const dragState = React13.useRef(null);
+  const [dragOffset, setDragOffset] = React13.useState({ x: 0, y: 0 });
+  React13.useEffect(() => {
+    if (!open) return;
+    const handleKey = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [open, onClose]);
+  React13.useEffect(() => {
+    var _a;
+    if (!open) return;
+    const previouslyFocused = document.activeElement;
+    (_a = dialogRef.current) == null ? void 0 : _a.focus();
+    return () => previouslyFocused == null ? void 0 : previouslyFocused.focus();
+  }, [open]);
+  React13.useEffect(() => {
+    if (!open || modal) return;
+    const handlePointer = (event) => {
+      const target = event.target;
+      if (dialogRef.current && !dialogRef.current.contains(target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("pointerdown", handlePointer);
+    return () => document.removeEventListener("pointerdown", handlePointer);
+  }, [open, modal, onClose]);
+  React13.useEffect(() => {
+    if (!open) {
+      setDragOffset({ x: 0, y: 0 });
+    }
+  }, [open]);
+  React13.useEffect(() => {
+    return () => {
+      dragState.current = null;
+    };
+  }, []);
+  const clampOffset = React13.useCallback(
+    (x, y, size) => {
+      if (!modal) return { x, y };
+      const maxX = Math.max(0, (window.innerWidth - size.width) / 2);
+      const maxY = Math.max(0, (window.innerHeight - size.height) / 2);
+      return {
+        x: Math.min(maxX, Math.max(-maxX, x)),
+        y: Math.min(maxY, Math.max(-maxY, y))
+      };
+    },
+    [modal]
+  );
+  const isInteractiveTarget = (node) => {
+    if (!node) return false;
+    if (node.closest("[data-dialog-draggable-stop]")) return true;
+    const tag = node.tagName.toLowerCase();
+    const interactive = ["button", "input", "select", "textarea", "option", "a", "label"];
+    if (interactive.includes(tag)) return true;
+    if (node.getAttribute("role") === "button" || node.getAttribute("role") === "link") return true;
+    if (node.isContentEditable) return true;
+    return false;
+  };
+  const onDragPointerDown = (event) => {
+    var _a;
+    if (!draggable) return;
+    if (isInteractiveTarget(event.target)) return;
+    event.preventDefault();
+    const rect = (_a = dialogRef.current) == null ? void 0 : _a.getBoundingClientRect();
+    if (!rect) return;
+    dragState.current = {
+      startX: event.clientX,
+      startY: event.clientY,
+      originX: dragOffset.x,
+      originY: dragOffset.y,
+      width: rect.width,
+      height: rect.height
+    };
+    const handleMove = (e) => {
+      const current = dragState.current;
+      if (!current) return;
+      const deltaX = e.clientX - current.startX;
+      const deltaY = e.clientY - current.startY;
+      const next = {
+        x: current.originX + deltaX,
+        y: current.originY + deltaY
+      };
+      const clamped = clampOffset(next.x, next.y, { width: current.width, height: current.height });
+      setDragOffset(clamped);
+    };
+    const handleUp = () => {
+      dragState.current = null;
+      window.removeEventListener("pointermove", handleMove);
+      window.removeEventListener("pointerup", handleUp);
+      window.removeEventListener("pointercancel", handleUp);
+    };
+    window.addEventListener("pointermove", handleMove);
+    window.addEventListener("pointerup", handleUp);
+    window.addEventListener("pointercancel", handleUp);
+  };
+  if (!open) return null;
+  const dialogCard = /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      ref: dialogRef,
+      role: "dialog",
+      "aria-modal": modal || void 0,
+      tabIndex: -1,
+      "aria-label": title,
+      className: twMerge14(
+        "w-[min(640px,92vw)] rounded-3xl border border-slate-200 bg-white/95 p-6 shadow-2xl ring-1 ring-white/80 dark:border-zinc-700/60 dark:bg-zinc-900/95 dark:ring-zinc-800/80",
+        modal ? "" : "pointer-events-auto",
+        draggable && "cursor-grab active:cursor-grabbing"
+      ),
+      style: { transform: `translate(${dragOffset.x}px, ${dragOffset.y}px)` },
+      onPointerDown: onDragPointerDown,
+      children: [
+        /* @__PURE__ */ jsxs13("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs13("div", { children: [
+            /* @__PURE__ */ jsx15("p", { className: "text-xs font-semibold uppercase tracking-[0.3em] text-slate-500 dark:text-zinc-400", children: "Dialog" }),
+            /* @__PURE__ */ jsx15("h2", { className: "text-xl font-semibold text-slate-900 dark:text-zinc-100", children: title }),
+            description ? /* @__PURE__ */ jsx15("p", { className: "mt-1 text-sm text-slate-600 dark:text-zinc-400", children: description }) : null
+          ] }),
+          /* @__PURE__ */ jsx15(
+            Button,
+            {
+              onClick: onClose,
+              "aria-label": "Close dialog",
+              className: "size-8 !px-0 !py-0 text-sm font-semibold",
+              children: "X"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx15("div", { className: "mt-4 space-y-3 text-sm text-slate-700 dark:text-zinc-300", children }),
+        footer ? /* @__PURE__ */ jsx15("div", { className: "mt-6 flex flex-wrap justify-end gap-2", children: footer }) : null
+      ]
+    }
+  );
+  return createPortal(
+    modal ? /* @__PURE__ */ jsx15(
+      "div",
+      {
+        ref: overlayRef,
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-zinc-950/60 backdrop-blur-sm",
+        onMouseDown: (e) => {
+          if (e.target === overlayRef.current) onClose();
+        },
+        children: dialogCard
+      }
+    ) : /* @__PURE__ */ jsx15("div", { className: "pointer-events-none fixed bottom-6 right-6 z-50 flex justify-end", children: dialogCard }),
+    document.body
+  );
+}
+
+// components/Disclosure/Disclosure.tsx
+import * as React14 from "react";
+import { twMerge as twMerge15 } from "tailwind-merge";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+var Disclosure = React14.forwardRef(function Disclosure2({ title, children, className, subtle, ...rest }, ref) {
+  const summaryId = React14.useId();
+  return /* @__PURE__ */ jsxs14(
+    "details",
+    {
+      ...rest,
+      ref,
+      className: twMerge15(
+        "group rounded-2xl border border-slate-200 bg-white/90 p-3 shadow-sm transition dark:border-zinc-700/60 dark:bg-zinc-900/70",
+        subtle && "border-transparent bg-white/60 shadow-none dark:bg-zinc-900/40",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs14(
+          "summary",
+          {
+            id: summaryId,
+            className: "flex cursor-pointer list-none items-center justify-between gap-3 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400/70",
+            children: [
+              /* @__PURE__ */ jsx16("span", { className: "flex flex-1 items-center gap-2", children: /* @__PURE__ */ jsx16("span", { className: "rounded-lg bg-slate-100 px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500 shadow-inner dark:bg-zinc-800/70 dark:text-zinc-300", children: title }) }),
+              /* @__PURE__ */ jsx16(
+                "span",
+                {
+                  className: "text-slate-400 transition-transform duration-200 group-open:rotate-180 dark:text-zinc-500",
+                  "aria-hidden": "true",
+                  children: "\u25BE"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx16("div", { className: "mt-3 space-y-2 text-sm text-slate-600 dark:text-zinc-300", children })
+      ]
+    }
+  );
+});
+
+// components/InputField/InputField.tsx
+import * as React15 from "react";
+import { twMerge as twMerge16 } from "tailwind-merge";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+var InputField = React15.forwardRef(function InputField2({ label, description, error, leadingIcon, trailingLabel, className, id, disabled, ...rest }, ref) {
+  const generatedId = React15.useId();
+  const inputId = id != null ? id : generatedId;
+  const descriptionId = React15.useId();
+  const errorId = React15.useId();
+  const hintIds = [description ? descriptionId : null, error ? errorId : null].filter(Boolean);
+  const resolvedAriaDescribedBy = hintIds.length ? hintIds.join(" ") : void 0;
+  const containerClasses = twMerge16(
+    "flex items-center gap-3 rounded-2xl border border-slate-300 bg-white/70 px-3 py-2 transition focus-within:border-slate-400 focus-within:shadow-[0_0_0_1px_rgba(148,163,184,0.45)] dark:border-zinc-700 dark:bg-zinc-900/70 dark:focus-within:border-slate-500",
+    disabled && "opacity-60",
+    error && "border-rose-300 focus-within:border-rose-400 focus-within:shadow-[0_0_0_1px_rgba(248,113,113,0.35)] dark:border-rose-500/60"
+  );
+  const inputClasses = twMerge16(
+    "flex-1 border-none bg-transparent text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none disabled:cursor-not-allowed dark:text-zinc-100 dark:placeholder:text-zinc-500",
+    className
+  );
+  const leadingElm = leadingIcon ? /* @__PURE__ */ jsx17("span", { className: "text-slate-400 dark:text-zinc-500", "aria-hidden": "true", children: leadingIcon }) : null;
+  const trailingElm = trailingLabel ? /* @__PURE__ */ jsx17("span", { className: "text-xs font-semibold uppercase tracking-wide text-slate-400 dark:text-zinc-500", children: trailingLabel }) : null;
+  return /* @__PURE__ */ jsxs15("div", { className: "space-y-1.5", children: [
+    label ? /* @__PURE__ */ jsx17(
+      "label",
+      {
+        htmlFor: inputId,
+        className: "text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-zinc-400",
+        children: label
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs15("div", { className: containerClasses, children: [
+      leadingElm,
+      /* @__PURE__ */ jsx17(
+        "input",
+        {
+          ...rest,
+          ref,
+          id: inputId,
+          className: inputClasses,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": resolvedAriaDescribedBy,
+          disabled
+        }
+      ),
+      trailingElm
+    ] }),
+    description ? /* @__PURE__ */ jsx17("p", { id: descriptionId, className: "text-xs text-slate-500 dark:text-zinc-400", children: description }) : null,
+    error ? /* @__PURE__ */ jsx17("p", { id: errorId, className: "text-xs font-medium text-rose-500 dark:text-rose-400", children: error }) : null
+  ] });
+});
+
+// components/NumberInput/NumberInput.tsx
+import * as React16 from "react";
+import { twMerge as twMerge17 } from "tailwind-merge";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+var NumberInput = React16.forwardRef(
+  function NumberInput2({
+    label,
+    description,
+    error,
+    className,
+    disabled,
+    value,
+    defaultValue = 0,
+    onChange,
+    step = 1,
+    suffix,
+    min,
+    max
+  }, ref) {
+    const [internal, setInternal] = React16.useState(defaultValue);
+    const isControlled = typeof value === "number";
+    const resolved = isControlled ? value != null ? value : 0 : internal;
+    const update = (next) => {
+      const clamped = Math.max(min != null ? min : -Infinity, Math.min(max != null ? max : Infinity, next));
+      if (!isControlled) setInternal(clamped);
+      onChange == null ? void 0 : onChange(clamped);
+    };
+    return /* @__PURE__ */ jsxs16("div", { className: "space-y-1.5", children: [
+      label ? /* @__PURE__ */ jsx18("p", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-zinc-400", children: label }) : null,
+      /* @__PURE__ */ jsxs16(
+        "div",
+        {
+          className: twMerge17(
+            "flex items-center gap-3 rounded-2xl border border-slate-300 bg-white/80 px-3 py-2 shadow-sm transition focus-within:border-slate-400 focus-within:shadow-[0_0_0_1px_rgba(148,163,184,0.45)] dark:border-zinc-700 dark:bg-zinc-900/70 dark:focus-within:border-slate-500",
+            disabled && "opacity-60",
+            error && "border-rose-300 focus-within:border-rose-400 focus-within:shadow-[0_0_0_1px_rgba(248,113,113,0.35)] dark:border-rose-500/60"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx18(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Increase",
+                  onClick: () => update(resolved + step),
+                  className: "grid size-7 place-items-center rounded-xl border border-slate-200 bg-white text-xs font-semibold text-slate-700 shadow-sm transition hover:-translate-y-[1px] hover:shadow-md disabled:opacity-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100",
+                  disabled,
+                  children: "+"
+                }
+              ),
+              /* @__PURE__ */ jsx18(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Decrease",
+                  onClick: () => update(resolved - step),
+                  className: "grid size-7 place-items-center rounded-xl border border-slate-200 bg-white text-xs font-semibold text-slate-700 shadow-sm transition hover:-translate-y-[1px] hover:shadow-md disabled:opacity-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100",
+                  disabled,
+                  children: "-"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx18(
+              "input",
+              {
+                ref,
+                type: "number",
+                value: resolved,
+                onChange: (e) => update(Number(e.target.value)),
+                min,
+                max,
+                step,
+                disabled,
+                className: twMerge17(
+                  "flex-1 border-none bg-transparent text-2xl font-semibold tabular-nums text-slate-900 placeholder:text-slate-400 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-500 appearance-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+                  className
+                )
+              }
+            ),
+            suffix ? /* @__PURE__ */ jsx18("span", { className: "text-sm font-semibold uppercase tracking-wide text-slate-500 dark:text-zinc-300", children: suffix }) : null
+          ]
+        }
+      ),
+      description ? /* @__PURE__ */ jsx18("p", { className: "text-xs text-slate-500 dark:text-zinc-400", children: description }) : null,
+      error ? /* @__PURE__ */ jsx18("p", { className: "text-xs font-medium text-rose-500 dark:text-rose-400", children: error }) : null
+    ] });
+  }
+);
+
+// components/OutputChip/OutputChip.tsx
+import * as React17 from "react";
+import { twMerge as twMerge18 } from "tailwind-merge";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+var toneStyles = {
+  neutral: { bg: "bg-slate-900", text: "text-white", ring: "ring-slate-300" },
+  success: { bg: "bg-emerald-500", text: "text-white", ring: "ring-emerald-200" },
+  warning: { bg: "bg-amber-500", text: "text-white", ring: "ring-amber-200" },
+  danger: { bg: "bg-rose-500", text: "text-white", ring: "ring-rose-200" }
+};
+var OutputChip = React17.forwardRef(function OutputChip2({ children, className, tone = "neutral", label, ...rest }, ref) {
+  const styles = toneStyles[tone];
+  return /* @__PURE__ */ jsxs17(
+    "output",
+    {
+      ...rest,
+      ref,
+      className: twMerge18(
+        "inline-flex items-center justify-center gap-2 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.25em] shadow-sm ring-1 text-center",
+        styles.bg,
+        styles.text,
+        styles.ring,
+        className
+      ),
+      children: [
+        label ? /* @__PURE__ */ jsx19("span", { className: "opacity-70", children: label }) : null,
+        /* @__PURE__ */ jsx19("span", { children })
+      ]
+    }
+  );
+});
+
+// components/ProgressMeter/ProgressMeter.tsx
+import { twMerge as twMerge19 } from "tailwind-merge";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+function Progress({
+  label,
+  description,
+  value,
+  max = 100,
+  showValue = true,
+  className
+}) {
+  const clamped = Math.min(max, Math.max(0, value));
+  const percent = max === 0 ? 0 : Math.round(clamped / max * 100);
+  return /* @__PURE__ */ jsxs18("div", { className: twMerge19("space-y-1.5", className), children: [
+    label ? /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx20("p", { className: "text-xs font-semibold uppercase tracking-[0.24em] text-slate-500 dark:text-zinc-400", children: label }),
+      showValue ? /* @__PURE__ */ jsxs18("span", { className: "text-xs font-semibold text-slate-600 dark:text-zinc-300", children: [
+        percent,
+        "%"
+      ] }) : null
+    ] }) : null,
+    description ? /* @__PURE__ */ jsx20("p", { className: "text-[11px] text-slate-500 dark:text-zinc-400", children: description }) : null,
+    /* @__PURE__ */ jsxs18("div", { className: "relative h-3 w-full overflow-hidden rounded-full border border-slate-200 bg-white shadow-inner ring-1 ring-slate-100/80 dark:border-zinc-700 dark:bg-zinc-900/80 dark:ring-zinc-800/70", children: [
+      /* @__PURE__ */ jsx20(
+        "progress",
+        {
+          value: clamped,
+          max,
+          className: "absolute inset-0 h-full w-full appearance-none",
+          "aria-label": label
+        }
+      ),
+      /* @__PURE__ */ jsx20(
+        "div",
+        {
+          className: "absolute inset-y-0 left-0 rounded-full bg-gradient-to-r from-slate-900 via-slate-700 to-slate-900 shadow-[0_0_0_1px_rgba(15,23,42,0.2)] transition-[width]",
+          style: { width: `${percent}%` }
+        }
+      )
+    ] })
+  ] });
+}
+function Meter({
+  label,
+  description,
+  value,
+  min = 0,
+  max = 100,
+  thresholds,
+  className
+}) {
+  var _a, _b;
+  const clamped = Math.min(max, Math.max(min, value));
+  const percent = max === min ? 0 : (clamped - min) / (max - min) * 100;
+  const activeColor = thresholds ? thresholds.reduce(
+    (acc, t) => clamped >= t.value ? t.color : acc,
+    (_b = (_a = thresholds[0]) == null ? void 0 : _a.color) != null ? _b : "linear-gradient(90deg, #22c55e, #0ea5e9)"
+  ) : "linear-gradient(90deg, #22c55e, #0ea5e9)";
+  return /* @__PURE__ */ jsxs18("div", { className: twMerge19("space-y-1.5", className), children: [
+    label ? /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx20("p", { className: "text-xs font-semibold uppercase tracking-[0.24em] text-slate-500 dark:text-zinc-400", children: label }),
+      /* @__PURE__ */ jsx20("span", { className: "text-xs font-semibold text-slate-600 dark:text-zinc-300", children: clamped })
+    ] }) : null,
+    description ? /* @__PURE__ */ jsx20("p", { className: "text-[11px] text-slate-500 dark:text-zinc-400", children: description }) : null,
+    /* @__PURE__ */ jsxs18("div", { className: "relative h-3 w-full overflow-hidden rounded-full border border-slate-200 bg-white shadow-inner ring-1 ring-slate-100/80 dark:border-zinc-700 dark:bg-zinc-900/80 dark:ring-zinc-800/70", children: [
+      /* @__PURE__ */ jsx20(
+        "meter",
+        {
+          value: clamped,
+          min,
+          max,
+          className: "absolute inset-0 h-full w-full appearance-none",
+          "aria-label": label
+        }
+      ),
+      /* @__PURE__ */ jsx20(
+        "div",
+        {
+          className: "absolute inset-y-0 left-0 rounded-full shadow-[0_0_0_1px_rgba(15,23,42,0.2)] transition-[width]",
+          style: { width: `${percent}%`, background: activeColor }
+        }
+      )
+    ] })
+  ] });
+}
+
+// components/Radio/Radio.tsx
+import * as React18 from "react";
+import { twMerge as twMerge20 } from "tailwind-merge";
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+var Radio = React18.forwardRef(function Radio2({
+  label,
+  description,
+  extra,
+  checked,
+  defaultChecked = false,
+  onChange,
+  disabled,
+  className,
+  id,
+  ...rest
+}, forwardedRef) {
+  const generatedId = React18.useId();
+  const radioId = id != null ? id : generatedId;
+  const descriptionId = React18.useId();
+  const isControlled = typeof checked === "boolean";
+  const [internalChecked, setInternalChecked] = React18.useState(defaultChecked);
+  const resolvedChecked = isControlled ? !!checked : internalChecked;
+  const handleChange = (event) => {
+    const next = event.target.checked;
+    if (!isControlled) {
+      setInternalChecked(next);
+    }
+    onChange == null ? void 0 : onChange(next);
+  };
+  return /* @__PURE__ */ jsxs19(
+    "label",
+    {
+      htmlFor: radioId,
+      className: twMerge20(
+        "flex items-center justify-between gap-3 rounded-2xl border border-transparent px-3 py-2 text-left transition hover:bg-slate-50 focus-within:bg-slate-50 dark:hover:bg-zinc-900/60 dark:focus-within:bg-zinc-900/60",
+        disabled && "cursor-not-allowed opacity-60",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs19("span", { className: "flex flex-1 items-center gap-3", children: [
+          /* @__PURE__ */ jsxs19("span", { className: "flex h-6 w-6 items-center justify-center", children: [
+            /* @__PURE__ */ jsx21(
+              "input",
+              {
+                ...rest,
+                ref: forwardedRef,
+                id: radioId,
+                type: "radio",
+                className: "peer sr-only",
+                checked: resolvedChecked,
+                onChange: handleChange,
+                "aria-describedby": description ? descriptionId : rest["aria-describedby"],
+                disabled
+              }
+            ),
+            /* @__PURE__ */ jsx21(
+              "span",
+              {
+                className: twMerge20(
+                  "grid size-5 place-items-center rounded-full border border-slate-300 bg-white text-slate-600 shadow-sm transition duration-150 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-slate-400 dark:border-zinc-600 dark:bg-zinc-950/70 dark:text-zinc-200",
+                  resolvedChecked && "border-slate-400 bg-slate-100 shadow-[0_0_0_1px_rgba(148,163,184,0.45)] dark:border-zinc-500 dark:bg-zinc-700/70"
+                ),
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx21(
+                  "span",
+                  {
+                    className: twMerge20(
+                      "block h-2.5 w-2.5 rounded-full bg-slate-900 opacity-0 transition duration-200 dark:bg-zinc-100",
+                      resolvedChecked && "opacity-100"
+                    )
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs19("span", { className: "flex flex-1 flex-col", children: [
+            /* @__PURE__ */ jsx21("span", { className: "text-sm font-semibold text-slate-900 dark:text-zinc-100", children: label }),
+            description ? /* @__PURE__ */ jsx21("span", { id: descriptionId, className: "text-xs text-slate-500 dark:text-zinc-400", children: description }) : null
+          ] })
+        ] }),
+        extra ? /* @__PURE__ */ jsx21("span", { className: "self-center rounded-xl border border-slate-200 bg-white/80 px-3 py-1 text-xs font-semibold text-slate-600 dark:border-zinc-700 dark:bg-zinc-900/60 dark:text-zinc-200", children: extra }) : null
+      ]
+    }
+  );
+});
+
+// components/Slider/Slider.tsx
+import * as React19 from "react";
+import { twMerge as twMerge21 } from "tailwind-merge";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+function clampValue(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function percentFromValue(value, min, max) {
+  if (max === min) return 0;
+  return clampValue((value - min) / (max - min) * 100, 0, 100);
+}
+function snapToStep(value, min, max, step) {
+  const safeStep = step > 0 ? step : 1;
+  const limited = clampValue(value, min, max);
+  const stepped = Math.round((limited - min) / safeStep) * safeStep + min;
+  return clampValue(Number(stepped.toFixed(6)), min, max);
+}
+var Slider = React19.forwardRef(function Slider2({
+  label,
+  value,
+  defaultValue,
+  onChange,
+  formatValue = (val) => `${val}`,
+  renderTrack,
+  renderThumb,
+  trackClassName,
+  thumbClassName,
+  className,
+  min = 0,
+  max = 100,
+  step = 1,
+  thumbSize = 24,
+  edgeOverlap = 0,
+  fillMode = "stretch",
+  disabled,
+  orientation = "horizontal",
+  reversed = false,
+  id,
+  ...rest
+}, forwardedRef) {
+  const isControlled = typeof value === "number";
+  const initialValue = typeof defaultValue === "number" ? defaultValue : min;
+  const [internalValue, setInternalValue] = React19.useState(
+    () => snapToStep(initialValue, min, max, step)
+  );
+  const [focused, setFocused] = React19.useState(false);
+  const [dragging, setDragging] = React19.useState(false);
+  const [trackMetrics, setTrackMetrics] = React19.useState({
+    length: 0,
+    mainOffset: 0,
+    crossOffset: 0,
+    thickness: 0
+  });
+  const generatedId = React19.useId();
+  const inputId = id != null ? id : generatedId;
+  const inputRef = React19.useRef(null);
+  const interactionRef = React19.useRef(null);
+  const trackContainerRef = React19.useRef(null);
+  const trackRef = React19.useRef(null);
+  const mergedRef = React19.useCallback(
+    (node) => {
+      inputRef.current = node;
+      assignRef(forwardedRef, node);
+    },
+    [forwardedRef]
+  );
+  React19.useEffect(() => {
+    setInternalValue((prev) => snapToStep(prev, min, max, step));
+  }, [min, max, step]);
+  const resolvedValue = snapToStep(
+    isControlled ? typeof value === "number" ? value : min : internalValue,
+    min,
+    max,
+    step
+  );
+  const percentage = percentFromValue(resolvedValue, min, max);
+  const isVertical = orientation === "vertical";
+  const thumbDiameter = Math.max(thumbSize, 2);
+  const thumbRadius = thumbDiameter / 2;
+  React19.useLayoutEffect(() => {
+    const track = trackRef.current;
+    const container = trackContainerRef.current;
+    if (!track || !container) return;
+    const update = () => {
+      const trackRect = track.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const isVert = orientation === "vertical";
+      const length = isVert ? trackRect.height : trackRect.width;
+      const thickness = isVert ? trackRect.width : trackRect.height;
+      const mainOffset = isVert ? trackRect.top - containerRect.top : trackRect.left - containerRect.left;
+      const crossOffset = isVert ? trackRect.left - containerRect.left : trackRect.top - containerRect.top;
+      setTrackMetrics({ length, mainOffset, crossOffset, thickness });
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(track);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [orientation]);
+  const trackLength = trackMetrics.length;
+  const trackOffset = trackMetrics.mainOffset;
+  const trackCrossOffset = trackMetrics.crossOffset;
+  const trackThickness = trackMetrics.thickness;
+  const overlap = Math.max(edgeOverlap, 0);
+  const minCenter = Math.max(thumbRadius - overlap, 0);
+  const maxCenter = Math.max(trackLength - thumbRadius + overlap, minCenter);
+  const usableLength = Math.max(maxCenter - minCenter, 0);
+  const logicalRatio = clampValue((resolvedValue - min) / (max - min || 1), 0, 1);
+  const positionRatio = (() => {
+    if (isVertical) {
+      return reversed ? logicalRatio : 1 - logicalRatio;
+    }
+    return reversed ? 1 - logicalRatio : logicalRatio;
+  })();
+  const positionPx = minCenter + usableLength * positionRatio;
+  const gradientSize = React19.useMemo(() => {
+    if (fillMode === "stretch" || trackLength === 0) return "100% 100%";
+    return isVertical ? `100% ${trackLength}px` : `${trackLength}px 100%`;
+  }, [fillMode, isVertical, trackLength]);
+  const gradientPosition = React19.useMemo(() => {
+    if (fillMode === "stretch") return void 0;
+    if (!isVertical && reversed) return "right center";
+    if (isVertical && !reversed) return "center bottom";
+    return "left top";
+  }, [fillMode, isVertical, reversed]);
+  const progressStyle = React19.useMemo(() => {
+    if (trackLength === 0) return {};
+    const half = thumbRadius;
+    if (!isVertical && !reversed) {
+      const width = Math.min(positionPx + half, trackLength);
+      return { left: 0, width, top: 0, bottom: 0 };
+    }
+    if (!isVertical && reversed) {
+      const start2 = Math.max(positionPx - half, 0);
+      const width = Math.max(trackLength - start2, 0);
+      return { right: 0, width, top: 0, bottom: 0 };
+    }
+    if (isVertical && reversed) {
+      const height2 = Math.min(positionPx + half, trackLength);
+      return { top: 0, height: height2, left: 0, right: 0 };
+    }
+    const start = Math.max(positionPx - half, 0);
+    const height = Math.max(Math.min(trackLength - start, trackLength), 0);
+    return { bottom: 0, height, left: 0, right: 0 };
+  }, [isVertical, reversed, positionPx, trackLength, thumbRadius]);
+  const trackGradient = React19.useMemo(() => {
+    if (!isVertical && !reversed) return "linear-gradient(90deg, #e2e8f0, #fff, #e2e8f0)";
+    if (!isVertical && reversed) return "linear-gradient(270deg, #e2e8f0, #fff, #e2e8f0)";
+    if (isVertical && reversed) return "linear-gradient(180deg, #e2e8f0, #fff, #e2e8f0)";
+    return "linear-gradient(0deg, #e2e8f0, #fff, #e2e8f0)";
+  }, [isVertical, reversed]);
+  const fillGradient = React19.useMemo(() => {
+    if (!isVertical && !reversed) return "linear-gradient(90deg, #38bdf8, #6366f1)";
+    if (!isVertical && reversed) return "linear-gradient(270deg, #38bdf8, #6366f1)";
+    if (isVertical && reversed) return "linear-gradient(180deg, #38bdf8, #6366f1)";
+    return "linear-gradient(0deg, #38bdf8, #6366f1)";
+  }, [isVertical, reversed]);
+  const thumbStyle = React19.useMemo(() => {
+    if (isVertical) {
+      return { top: trackOffset + positionPx, left: trackCrossOffset + trackThickness / 2 };
+    }
+    return { left: trackOffset + positionPx, top: trackCrossOffset + trackThickness / 2 };
+  }, [isVertical, positionPx, trackOffset, trackCrossOffset, trackThickness]);
+  const renderProps = React19.useMemo(
+    () => ({
+      value: resolvedValue,
+      min,
+      max,
+      percentage,
+      disabled,
+      focused,
+      orientation,
+      reversed,
+      position: positionPx,
+      trackLength,
+      thumbSize: thumbDiameter,
+      trackOffset,
+      trackCrossOffset,
+      trackThickness
+    }),
+    [
+      resolvedValue,
+      min,
+      max,
+      percentage,
+      disabled,
+      focused,
+      orientation,
+      reversed,
+      positionPx,
+      trackLength,
+      thumbDiameter,
+      trackOffset,
+      trackCrossOffset,
+      trackThickness
+    ]
+  );
+  const commitValue = React19.useCallback(
+    (next) => {
+      const snapped = snapToStep(next, min, max, step);
+      if (!isControlled) {
+        setInternalValue(snapped);
+      }
+      onChange == null ? void 0 : onChange(snapped);
+    },
+    [isControlled, max, min, onChange, step]
+  );
+  const handleInputChange = (event) => {
+    const next = Number(event.target.value);
+    if (Number.isNaN(next)) return;
+    commitValue(next);
+  };
+  const formattedValue = formatValue(resolvedValue);
+  const setValueFromPointer = React19.useCallback(
+    (clientX, clientY) => {
+      var _a;
+      const rect = (_a = trackRef.current) == null ? void 0 : _a.getBoundingClientRect();
+      if (!rect) return;
+      const overlapComp = Math.max(thumbRadius - overlap, 0);
+      const length = isVertical ? rect.height : rect.width;
+      const usable = Math.max(length - overlapComp * 2, 1);
+      if (length <= 0) return;
+      const clampToTrack = (pos) => clampValue(pos, overlapComp, length - overlapComp);
+      if (isVertical) {
+        const position2 = clampToTrack(clientY - rect.top);
+        const positionRatio3 = (position2 - overlapComp) / usable;
+        const logicalRatio3 = reversed ? positionRatio3 : 1 - positionRatio3;
+        const next2 = min + logicalRatio3 * (max - min);
+        commitValue(next2);
+        return;
+      }
+      const position = clampToTrack(clientX - rect.left);
+      const positionRatio2 = (position - overlapComp) / usable;
+      const logicalRatio2 = reversed ? 1 - positionRatio2 : positionRatio2;
+      const next = min + logicalRatio2 * (max - min);
+      commitValue(next);
+    },
+    [commitValue, isVertical, max, min, overlap, reversed, thumbRadius]
+  );
+  const handlePointerDown = React19.useCallback(
+    (event) => {
+      var _a, _b;
+      event.preventDefault();
+      (_a = interactionRef.current) == null ? void 0 : _a.setPointerCapture(event.pointerId);
+      (_b = inputRef.current) == null ? void 0 : _b.focus({ preventScroll: true });
+      setDragging(true);
+      setValueFromPointer(event.clientX, event.clientY);
+      const move = (moveEvent) => {
+        moveEvent.preventDefault();
+        setValueFromPointer(moveEvent.clientX, moveEvent.clientY);
+      };
+      const stop = (upEvent) => {
+        var _a2;
+        upEvent.preventDefault();
+        (_a2 = interactionRef.current) == null ? void 0 : _a2.releasePointerCapture(event.pointerId);
+        setDragging(false);
+        window.removeEventListener("pointermove", move);
+        window.removeEventListener("pointerup", stop);
+        window.removeEventListener("pointercancel", stop);
+      };
+      window.addEventListener("pointermove", move, { passive: false });
+      window.addEventListener("pointerup", stop, { passive: false });
+      window.addEventListener("pointercancel", stop, { passive: false });
+    },
+    [setValueFromPointer]
+  );
+  const defaultTrack = /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      ref: trackRef,
+      className: twMerge21(
+        "relative overflow-hidden rounded-full shadow-inner ring-1 ring-slate-200/80 dark:ring-white/10",
+        "bg-[length:100%_100%]",
+        isVertical ? "mx-auto h-full w-3" : "h-3 w-full",
+        disabled && "opacity-60",
+        trackClassName
+      ),
+      style: { backgroundImage: trackGradient },
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx22(
+          "div",
+          {
+            className: twMerge21(
+              "absolute rounded-full shadow-[0_0_0_1px_rgba(59,130,246,0.18)]",
+              dragging ? "transition-none" : "transition-[width,height] duration-150 ease-out",
+              isVertical ? "left-0 right-0" : "inset-y-0"
+            ),
+            style: {
+              ...progressStyle,
+              backgroundImage: fillGradient,
+              backgroundSize: gradientSize,
+              backgroundPosition: gradientPosition
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx22("div", { className: "pointer-events-none absolute inset-0 rounded-full ring-1 ring-black/5 dark:ring-white/10" })
+      ]
+    }
+  );
+  const defaultThumb = /* @__PURE__ */ jsx22(
+    "span",
+    {
+      className: twMerge21(
+        "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 rounded-full border border-white bg-white shadow-md shadow-slate-900/20 ring-1 ring-slate-200 transition-transform duration-150 dark:border-zinc-700/60 dark:bg-zinc-800 dark:shadow-black/30 dark:ring-zinc-700",
+        focused && "scale-[1.04] ring-slate-300 dark:ring-slate-500",
+        disabled && "opacity-60 shadow-none dark:shadow-none",
+        thumbClassName
+      ),
+      style: { ...thumbStyle, width: thumbDiameter, height: thumbDiameter },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxs20("span", { className: "relative block h-full w-full", children: [
+        /* @__PURE__ */ jsx22("span", { className: "absolute inset-[5px] rounded-full bg-gradient-to-br from-slate-50 to-slate-200 dark:from-slate-600 dark:to-slate-700" }),
+        /* @__PURE__ */ jsx22("span", { className: "absolute inset-0 rounded-full bg-slate-950/5 backdrop-blur-[1px] dark:bg-white/5" })
+      ] })
+    }
+  );
+  return /* @__PURE__ */ jsxs20("div", { className: twMerge21("w-full space-y-2", isVertical && "max-w-[120px]", className), children: [
+    label ? /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx22(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "text-[11px] font-semibold uppercase tracking-[0.25em] text-slate-500 dark:text-zinc-400",
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx22("span", { className: "rounded-full bg-white/90 px-2 py-0.5 text-xs font-semibold text-slate-700 shadow-sm ring-1 ring-slate-200 dark:bg-zinc-900/80 dark:text-zinc-200 dark:ring-zinc-700", children: formattedValue })
+    ] }) : null,
+    /* @__PURE__ */ jsxs20(
+      "div",
+      {
+        ref: trackContainerRef,
+        className: twMerge21(
+          "relative w-full pt-2 pb-3",
+          isVertical && "flex h-48 items-center justify-center px-4 pb-4 pt-4"
+        ),
+        "data-orientation": orientation,
+        children: [
+          renderTrack ? renderTrack({ ...renderProps, children: defaultTrack }) : defaultTrack,
+          renderThumb ? renderThumb(renderProps) : defaultThumb,
+          /* @__PURE__ */ jsx22(
+            "input",
+            {
+              ...rest,
+              ref: mergedRef,
+              id: inputId,
+              type: "range",
+              min,
+              max,
+              step,
+              value: resolvedValue,
+              onChange: handleInputChange,
+              onInput: handleInputChange,
+              onFocus: () => setFocused(true),
+              onBlur: () => setFocused(false),
+              disabled,
+              "aria-valuetext": formattedValue,
+              "aria-orientation": orientation,
+              "data-orientation": orientation,
+              className: "absolute inset-0 h-10 w-full appearance-none opacity-0 pointer-events-none"
+            }
+          ),
+          /* @__PURE__ */ jsx22(
+            "div",
+            {
+              ref: interactionRef,
+              "aria-hidden": "true",
+              onPointerDown: handlePointerDown,
+              className: twMerge21(
+                "absolute inset-0 cursor-pointer bg-transparent",
+                isVertical ? "left-1/2 w-8 -translate-x-1/2" : "top-1/2 h-8 -translate-y-1/2"
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+
+// components/StackedList/StackedList.tsx
+import { twMerge as twMerge22 } from "tailwind-merge";
+import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
+function StackedList({ items, dense, className, ...rest }) {
+  return /* @__PURE__ */ jsx23(
+    "div",
+    {
+      ...rest,
+      className: twMerge22(
+        "rounded-3xl border border-slate-200 bg-white/80 shadow-xl shadow-slate-200/40 dark:border-zinc-800 dark:bg-zinc-900/80 dark:shadow-none",
+        className
+      ),
+      children: /* @__PURE__ */ jsx23("ul", { role: "list", className: "divide-y divide-slate-100 dark:divide-zinc-800", children: items.map((item) => /* @__PURE__ */ jsxs21(
+        "li",
+        {
+          className: twMerge22("flex items-start gap-4 px-5 py-4", dense && "py-3"),
+          children: [
+            item.icon ? /* @__PURE__ */ jsx23(
+              "div",
+              {
+                className: "mt-0.5 rounded-2xl bg-slate-100 p-2 text-slate-600 dark:bg-zinc-900/50 dark:text-zinc-200",
+                "aria-hidden": "true",
+                children: item.icon
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs21("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsx23("p", { className: "text-sm font-semibold text-slate-900 dark:text-zinc-100", children: item.title }),
+              item.description ? /* @__PURE__ */ jsx23("p", { className: "text-sm text-slate-500 dark:text-zinc-400", children: item.description }) : null
+            ] }),
+            /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-end gap-1 text-right", children: [
+              item.meta ? /* @__PURE__ */ jsx23("span", { className: "text-xs uppercase tracking-wide text-slate-400 dark:text-zinc-500", children: item.meta }) : null,
+              item.action
+            ] })
+          ]
+        },
+        item.id
+      )) })
+    }
+  );
+}
+
+// components/Table/Table.tsx
+import * as React20 from "react";
+import { twMerge as twMerge23 } from "tailwind-merge";
+import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+var MIN_THUMB = 24;
+var TRACK_PADDING2 = 6;
+var TRACK_THICKNESS = 6;
+var TRACK_INSET = 8;
+var V_TRACK_INSET = 10;
+function useScrollbarMetrics(ref, axis, extraSpace) {
+  const [state, setState] = React20.useState({
+    visible: false,
+    size: MIN_THUMB,
+    offset: 0
+  });
+  React20.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    let raf = 0;
+    const update = () => {
+      const target = ref.current;
+      if (!target) return;
+      const scrollRange = axis === "vertical" ? target.scrollHeight - target.clientHeight : target.scrollWidth - target.clientWidth;
+      const trackLength = axis === "vertical" ? Math.max(0, target.clientHeight + extraSpace - TRACK_PADDING2 * 2 - V_TRACK_INSET * 2) : Math.max(0, target.clientWidth + extraSpace - 2 * (TRACK_PADDING2 + TRACK_INSET));
+      if (scrollRange <= 0 || trackLength <= 0) {
+        setState((prev) => prev.visible ? { ...prev, visible: false } : prev);
+        return;
+      }
+      const ratio = axis === "vertical" ? target.clientHeight / target.scrollHeight : target.clientWidth / target.scrollWidth;
+      const thumbSize = Math.max(trackLength * ratio, MIN_THUMB);
+      const maxOffset = Math.max(0, trackLength - thumbSize);
+      const currentOffset = maxOffset > 0 ? (axis === "vertical" ? target.scrollTop : target.scrollLeft) / scrollRange * maxOffset : 0;
+      setState({ visible: true, size: thumbSize, offset: currentOffset });
+    };
+    const handleScroll = () => {
+      cancelAnimationFrame(raf);
+      raf = window.requestAnimationFrame(update);
+    };
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(update) : null;
+    resizeObserver == null ? void 0 : resizeObserver.observe(el);
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    update();
+    return () => {
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      el.removeEventListener("scroll", handleScroll);
+      cancelAnimationFrame(raf);
+    };
+  }, [ref, axis, extraSpace]);
+  return state;
+}
+function useThumbDrag(ref, axis, thumbState, extraSpace) {
+  const startDrag = React20.useCallback(
+    (event, startScrollOverride) => {
+      var _a, _b;
+      const el = ref.current;
+      if (!el) return;
+      event.preventDefault();
+      const startPos = axis === "vertical" ? event.clientY : event.clientX;
+      const startScroll = startScrollOverride != null ? startScrollOverride : axis === "vertical" ? el.scrollTop : el.scrollLeft;
+      const thumbSize = thumbState.size;
+      const handleMove = (moveEvent) => {
+        const delta = (axis === "vertical" ? moveEvent.clientY : moveEvent.clientX) - startPos;
+        const scrollRange = axis === "vertical" ? el.scrollHeight - el.clientHeight : el.scrollWidth - el.clientWidth;
+        const trackLength = axis === "vertical" ? el.clientHeight + extraSpace - TRACK_PADDING2 * 2 - V_TRACK_INSET * 2 : el.clientWidth + extraSpace - 2 * (TRACK_PADDING2 + TRACK_INSET);
+        if (scrollRange <= 0 || trackLength <= thumbSize) return;
+        const ratio = scrollRange / (trackLength - thumbSize);
+        const next = startScroll + delta * ratio;
+        if (axis === "vertical") el.scrollTop = Math.min(scrollRange, Math.max(0, next));
+        else el.scrollLeft = Math.min(scrollRange, Math.max(0, next));
+      };
+      const handleUp = () => {
+        window.removeEventListener("pointermove", handleMove);
+        window.removeEventListener("pointerup", handleUp);
+        window.removeEventListener("pointercancel", handleUp);
+      };
+      (_b = (_a = event.currentTarget).setPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+      window.addEventListener("pointermove", handleMove);
+      window.addEventListener("pointerup", handleUp);
+      window.addEventListener("pointercancel", handleUp);
+    },
+    [axis, ref, thumbState.size, extraSpace]
+  );
+  const onThumbPointerDown = React20.useCallback(
+    (event) => {
+      event.stopPropagation();
+      startDrag(event);
+    },
+    [startDrag]
+  );
+  return { onThumbPointerDown, startDrag };
+}
+function Table({
+  columns,
+  data,
+  caption,
+  className,
+  scrollAreaStyle,
+  style
+}) {
+  const scrollRef = React20.useRef(null);
+  const [padRight, setPadRight] = React20.useState(0);
+  const [padBottom, setPadBottom] = React20.useState(0);
+  const vThumb = useScrollbarMetrics(scrollRef, "vertical", padBottom);
+  const hThumb = useScrollbarMetrics(scrollRef, "horizontal", padRight);
+  React20.useEffect(() => {
+    setPadRight(vThumb.visible ? TRACK_PADDING2 + 10 : 0);
+  }, [vThumb.visible]);
+  React20.useEffect(() => {
+    setPadBottom(hThumb.visible ? TRACK_PADDING2 + 10 : 0);
+  }, [hThumb.visible]);
+  const { onThumbPointerDown: handleVThumbDown, startDrag: startVDrag } = useThumbDrag(
+    scrollRef,
+    "vertical",
+    vThumb,
+    padBottom
+  );
+  const { onThumbPointerDown: handleHThumbDown, startDrag: startHDrag } = useThumbDrag(
+    scrollRef,
+    "horizontal",
+    hThumb,
+    padRight
+  );
+  const handleTrackPointerDown = React20.useCallback(
+    (axis, thumb, startDrag, event) => {
+      const el = scrollRef.current;
+      if (!el) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const rect = event.currentTarget.getBoundingClientRect();
+      const clickOffset = axis === "vertical" ? event.clientY - rect.top : event.clientX - rect.left;
+      const trackLength = axis === "vertical" ? rect.height : rect.width;
+      const scrollRange = axis === "vertical" ? el.scrollHeight - el.clientHeight : el.scrollWidth - el.clientWidth;
+      if (scrollRange <= 0 || trackLength <= 0) return;
+      const effective = Math.max(1, trackLength - thumb.size);
+      const ratio = Math.max(0, Math.min(effective, clickOffset - thumb.size / 2)) / effective;
+      const target = ratio * scrollRange;
+      if (axis === "vertical") el.scrollTop = target;
+      else el.scrollLeft = target;
+      startDrag(event, axis === "vertical" ? el.scrollTop : el.scrollLeft);
+    },
+    []
+  );
+  const vSlot = padRight || TRACK_PADDING2;
+  const hSlot = padBottom || TRACK_PADDING2;
+  const vOffset = Math.max(TRACK_PADDING2, (vSlot - TRACK_THICKNESS) / 2);
+  const hOffset = Math.max(TRACK_PADDING2, (hSlot - TRACK_THICKNESS) / 2);
+  const hBottom = Math.max(TRACK_PADDING2 / 2, (hSlot - TRACK_THICKNESS) / 2);
+  return /* @__PURE__ */ jsx24(
+    "div",
+    {
+      className: twMerge23(
+        "overflow-hidden rounded-3xl border border-slate-200 shadow-sm dark:border-zinc-800",
+        className
+      ),
+      style,
+      children: /* @__PURE__ */ jsxs22(
+        "div",
+        {
+          className: "relative overflow-hidden bg-white/90 dark:bg-zinc-950/80",
+          style: { paddingRight: padRight, paddingBottom: padBottom },
+          children: [
+            /* @__PURE__ */ jsx24(
+              "div",
+              {
+                ref: scrollRef,
+                className: "table-scrollbar overflow-auto",
+                style: { ...scrollAreaStyle },
+                children: /* @__PURE__ */ jsxs22("table", { className: "w-full border-collapse text-sm text-slate-700 dark:text-zinc-200", children: [
+                  caption ? /* @__PURE__ */ jsx24("caption", { className: "bg-slate-50 px-4 py-2 text-left text-xs font-semibold uppercase tracking-[0.25em] text-slate-500 dark:bg-zinc-900/70 dark:text-zinc-400", children: caption }) : null,
+                  /* @__PURE__ */ jsx24("thead", { className: "bg-white/90 text-xs uppercase tracking-[0.16em] text-slate-500 dark:bg-zinc-900/80 dark:text-zinc-400", children: /* @__PURE__ */ jsx24("tr", { children: columns.map((col) => /* @__PURE__ */ jsx24(
+                    "th",
+                    {
+                      scope: "col",
+                      className: twMerge23(
+                        "px-4 py-3 text-left font-semibold",
+                        col.align === "right" && "text-right",
+                        col.align === "center" && "text-center"
+                      ),
+                      children: col.header
+                    },
+                    String(col.key)
+                  )) }) }),
+                  /* @__PURE__ */ jsx24("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx24(
+                    "tr",
+                    {
+                      className: twMerge23(
+                        "border-t border-slate-100 transition dark:border-zinc-800",
+                        rowIndex % 2 === 0 ? "bg-slate-100/70 hover:bg-slate-200 dark:bg-zinc-950/70 dark:hover:bg-zinc-800" : "bg-white/80 hover:bg-slate-200 dark:bg-zinc-900/60 dark:hover:bg-zinc-800"
+                      ),
+                      children: columns.map((col) => /* @__PURE__ */ jsx24(
+                        "td",
+                        {
+                          className: twMerge23(
+                            "px-4 py-3 align-middle",
+                            col.align === "right" && "text-right",
+                            col.align === "center" && "text-center"
+                          ),
+                          children: col.render ? col.render(row[col.key], row) : row[col.key]
+                        },
+                        String(col.key)
+                      ))
+                    },
+                    rowIndex
+                  )) })
+                ] })
+              }
+            ),
+            vThumb.visible ? /* @__PURE__ */ jsx24(
+              "div",
+              {
+                className: "absolute z-20 pointer-events-auto rounded-full bg-white/80 shadow-inner dark:bg-zinc-900/70",
+                style: {
+                  right: vOffset,
+                  top: TRACK_PADDING2 + V_TRACK_INSET,
+                  bottom: TRACK_PADDING2 + V_TRACK_INSET,
+                  width: TRACK_THICKNESS
+                },
+                onPointerDown: (e) => handleTrackPointerDown("vertical", vThumb, startVDrag, e),
+                children: /* @__PURE__ */ jsx24("div", { className: "relative h-full w-full rounded-full bg-slate-900/5 shadow-inner dark:bg-white/10", children: /* @__PURE__ */ jsx24(
+                  "div",
+                  {
+                    className: "absolute left-1/2 w-full -translate-x-1/2 rounded-full bg-slate-400/80 shadow-sm transition-colors dark:bg-zinc-500/70",
+                    style: { height: `${vThumb.size}px`, top: `${vThumb.offset}px` },
+                    onPointerDown: handleVThumbDown
+                  }
+                ) })
+              }
+            ) : null,
+            hThumb.visible ? /* @__PURE__ */ jsx24(
+              "div",
+              {
+                className: "absolute z-20 pointer-events-auto rounded-full bg-white/80 shadow-inner dark:bg-zinc-900/70",
+                style: {
+                  left: hOffset + TRACK_INSET,
+                  right: hOffset + TRACK_INSET,
+                  bottom: hBottom,
+                  height: TRACK_THICKNESS
+                },
+                onPointerDown: (e) => handleTrackPointerDown("horizontal", hThumb, startHDrag, e),
+                children: /* @__PURE__ */ jsx24("div", { className: "relative h-full w-full rounded-full bg-slate-900/5 shadow-inner dark:bg-white/10", children: /* @__PURE__ */ jsx24(
+                  "div",
+                  {
+                    className: "absolute top-1/2 h-full -translate-y-1/2 rounded-full bg-slate-400/80 shadow-sm transition-colors dark:bg-zinc-500/70",
+                    style: { width: `${hThumb.size}px`, left: `${hThumb.offset}px` },
+                    onPointerDown: handleHThumbDown
+                  }
+                ) })
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+}
+
+// components/Textarea/Textarea.tsx
+import * as React21 from "react";
+import { twMerge as twMerge24 } from "tailwind-merge";
+import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
+var MIN_THUMB2 = 24;
+var TRACK_THICKNESS2 = 6;
+var TRACK_TOP = 8;
+var TRACK_BOTTOM = 22;
+var TRACK_REDUCTION = 20;
+var TRACK_REDUCTION_HALF = TRACK_REDUCTION / 2;
+var Textarea = React21.forwardRef(function Textarea2({
+  label,
+  description,
+  error,
+  className,
+  id,
+  disabled,
+  maxLength,
+  showCount = true,
+  resizeDirection = "vertical",
+  ...rest
+}, ref) {
+  var _a, _b;
+  const generatedId = React21.useId();
+  const textareaId = id != null ? id : generatedId;
+  const descriptionId = React21.useId();
+  const errorId = React21.useId();
+  const textareaRef = React21.useRef(null);
+  const shellRef = React21.useRef(null);
+  const resizeListenersRef = React21.useRef({});
+  const [thumb, setThumb] = React21.useState({
+    visible: false,
+    size: MIN_THUMB2,
+    offset: 0
+  });
+  const hintIds = [description ? descriptionId : null, error ? errorId : null].filter(Boolean);
+  const resolvedAriaDescribedBy = hintIds.length ? hintIds.join(" ") : void 0;
+  const [value, setValue] = React21.useState((_b = (_a = rest.defaultValue) == null ? void 0 : _a.toString()) != null ? _b : "");
+  const [height, setHeight] = React21.useState(void 0);
+  const [width, setWidth] = React21.useState(void 0);
+  const setRefs = React21.useCallback(
+    (node) => {
+      textareaRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  React21.useEffect(() => {
+    if (typeof rest.value === "string") {
+      setValue(rest.value);
+    }
+  }, [rest.value]);
+  React21.useLayoutEffect(() => {
+    if (textareaRef.current && height === void 0) {
+      setHeight(textareaRef.current.offsetHeight);
+    }
+  }, [height]);
+  React21.useLayoutEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    let raf = 0;
+    const update = () => {
+      var _a2, _b2;
+      const target = textareaRef.current;
+      if (!target) return;
+      const scrollRange = target.scrollHeight - target.clientHeight;
+      const hostHeight = (_b2 = (_a2 = shellRef.current) == null ? void 0 : _a2.clientHeight) != null ? _b2 : target.clientHeight;
+      const trackLength = Math.max(0, hostHeight - TRACK_TOP - TRACK_BOTTOM - TRACK_REDUCTION);
+      if (scrollRange <= 0 || trackLength <= 0) {
+        setThumb((prev) => prev.visible ? { ...prev, visible: false } : prev);
+        return;
+      }
+      const ratio = target.clientHeight / target.scrollHeight;
+      const size = Math.max(trackLength * ratio, MIN_THUMB2);
+      const maxOffset = Math.max(0, trackLength - size);
+      const offset = maxOffset > 0 ? Math.min(maxOffset, target.scrollTop / scrollRange * maxOffset) : 0;
+      setThumb({ visible: true, size, offset });
+    };
+    const handleScroll = () => {
+      cancelAnimationFrame(raf);
+      raf = window.requestAnimationFrame(update);
+    };
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(update) : null;
+    ro == null ? void 0 : ro.observe(el);
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    update();
+    return () => {
+      ro == null ? void 0 : ro.disconnect();
+      el.removeEventListener("scroll", handleScroll);
+      cancelAnimationFrame(raf);
+    };
+  }, [height]);
+  React21.useLayoutEffect(() => {
+    if (!shellRef.current || width !== void 0) return;
+    setWidth(shellRef.current.offsetWidth);
+  }, [width]);
+  React21.useEffect(() => {
+    return () => {
+      if (resizeListenersRef.current.move) {
+        window.removeEventListener("mousemove", resizeListenersRef.current.move);
+      }
+      if (resizeListenersRef.current.up) {
+        window.removeEventListener("mouseup", resizeListenersRef.current.up);
+      }
+    };
+  }, []);
+  const handleResizeStart = (event) => {
+    var _a2, _b2, _c, _d, _e;
+    event.preventDefault();
+    if (!textareaRef.current) return;
+    const allowY = resizeDirection === "vertical" || resizeDirection === "both";
+    const allowX = resizeDirection === "horizontal" || resizeDirection === "both";
+    const startY = event.clientY;
+    const startX = event.clientX;
+    const startHeight = textareaRef.current.offsetHeight;
+    const startWidth = (_b2 = (_a2 = shellRef.current) == null ? void 0 : _a2.offsetWidth) != null ? _b2 : textareaRef.current.offsetWidth;
+    const minHeight = 120;
+    const minWidth = 240;
+    const parentWidth = (_e = (_d = (_c = shellRef.current) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.clientWidth) != null ? _e : startWidth;
+    const onMove = (moveEvent) => {
+      if (allowY) {
+        const nextHeight = Math.max(minHeight, startHeight + (moveEvent.clientY - startY));
+        setHeight(nextHeight);
+      }
+      if (allowX) {
+        const proposed = startWidth + (moveEvent.clientX - startX);
+        const nextWidth = Math.min(parentWidth, Math.max(minWidth, proposed));
+        setWidth(nextWidth);
+      }
+    };
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+      resizeListenersRef.current = {};
+    };
+    resizeListenersRef.current = { move: onMove, up: onUp };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+  const handleThumbDrag = React21.useCallback(
+    (event, startScrollOverride) => {
+      var _a2, _b2;
+      const el = textareaRef.current;
+      if (!el) return;
+      event.preventDefault();
+      const startY = event.clientY;
+      const startScroll = startScrollOverride != null ? startScrollOverride : el.scrollTop;
+      const handleMove = (moveEvent) => {
+        var _a3, _b3;
+        const delta = moveEvent.clientY - startY;
+        const scrollRange = el.scrollHeight - el.clientHeight;
+        const hostHeight = (_b3 = (_a3 = shellRef.current) == null ? void 0 : _a3.clientHeight) != null ? _b3 : el.clientHeight;
+        const trackLength = Math.max(0, hostHeight - TRACK_TOP - TRACK_BOTTOM - TRACK_REDUCTION);
+        if (scrollRange <= 0 || trackLength <= thumb.size) return;
+        const ratio = scrollRange / (trackLength - thumb.size);
+        const next = startScroll + delta * ratio;
+        el.scrollTop = Math.min(scrollRange, Math.max(0, next));
+      };
+      const handleUp = () => {
+        window.removeEventListener("pointermove", handleMove);
+        window.removeEventListener("pointerup", handleUp);
+        window.removeEventListener("pointercancel", handleUp);
+      };
+      (_b2 = (_a2 = event.currentTarget).setPointerCapture) == null ? void 0 : _b2.call(_a2, event.pointerId);
+      window.addEventListener("pointermove", handleMove);
+      window.addEventListener("pointerup", handleUp);
+      window.addEventListener("pointercancel", handleUp);
+    },
+    [thumb.size]
+  );
+  const shellClasses = twMerge24(
+    "relative rounded-2xl border border-slate-300 bg-white/80 px-3 py-2 shadow-sm transition focus-within:border-slate-400 focus-within:shadow-[0_0_0_1px_rgba(148,163,184,0.45)] dark:border-zinc-700 dark:bg-zinc-900/70 dark:focus-within:border-slate-500",
+    disabled && "opacity-60",
+    error && "border-rose-300 focus-within:border-rose-400 focus-within:shadow-[0_0_0_1px_rgba(248,113,113,0.35)] dark:border-rose-500/60"
+  );
+  const textareaClasses = twMerge24(
+    "textarea-scrollbar min-h-[120px] w-full resize-none border-none bg-transparent pb-4 pr-5 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-500",
+    className
+  );
+  const count = value.length;
+  const limit = maxLength != null ? maxLength : void 0;
+  const { style, ...restProps } = rest;
+  const textareaStyle = {
+    ...style,
+    ...height !== void 0 ? { height } : null,
+    ...width !== void 0 ? { width } : null,
+    maxWidth: "100%"
+  };
+  const shellStyle = width !== void 0 ? { width, maxWidth: "100%" } : { maxWidth: "100%" };
+  return /* @__PURE__ */ jsxs23("div", { className: "space-y-1.5", children: [
+    label ? /* @__PURE__ */ jsx25(
+      "label",
+      {
+        htmlFor: textareaId,
+        className: "text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-zinc-400",
+        children: label
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs23("div", { className: shellClasses, ref: shellRef, style: shellStyle, children: [
+      /* @__PURE__ */ jsx25(
+        "textarea",
+        {
+          ...restProps,
+          ref: setRefs,
+          id: textareaId,
+          className: textareaClasses,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": resolvedAriaDescribedBy,
+          disabled,
+          maxLength,
+          style: textareaStyle,
+          onChange: (e) => {
+            var _a2;
+            setValue(e.target.value);
+            (_a2 = rest.onChange) == null ? void 0 : _a2.call(rest, e);
+          }
+        }
+      ),
+      thumb.visible ? /* @__PURE__ */ jsx25(
+        "div",
+        {
+          className: "pointer-events-auto absolute z-20 rounded-full bg-white/60 shadow-inner backdrop-blur-sm transition-colors dark:bg-zinc-800/70",
+          style: {
+            right: 4,
+            top: TRACK_TOP + TRACK_REDUCTION_HALF,
+            bottom: TRACK_BOTTOM + TRACK_REDUCTION_HALF,
+            width: TRACK_THICKNESS2
+          },
+          onPointerDown: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const el = textareaRef.current;
+            if (!el) return;
+            const rect = event.currentTarget.getBoundingClientRect();
+            const clickOffset = event.clientY - rect.top;
+            const trackLength = rect.height;
+            const scrollRange = el.scrollHeight - el.clientHeight;
+            if (scrollRange <= 0 || trackLength <= 0) return;
+            const effective = Math.max(1, trackLength - thumb.size);
+            const ratio = Math.max(0, Math.min(effective, clickOffset - thumb.size / 2)) / effective;
+            const target = ratio * scrollRange;
+            el.scrollTop = target;
+            handleThumbDrag(event, target);
+          },
+          children: /* @__PURE__ */ jsx25("div", { className: "relative h-full w-full rounded-full bg-slate-900/5 shadow-inner dark:bg-white/10", children: /* @__PURE__ */ jsx25(
+            "div",
+            {
+              className: "absolute left-1/2 w-full -translate-x-1/2 rounded-full bg-slate-400/80 shadow-sm transition-colors dark:bg-zinc-500/70",
+              style: { height: `${thumb.size}px`, top: `${thumb.offset}px` },
+              onPointerDown: (event) => {
+                event.stopPropagation();
+                handleThumbDrag(event);
+              }
+            }
+          ) })
+        }
+      ) : null,
+      resizeDirection !== "none" ? /* @__PURE__ */ jsxs23("div", { className: "pointer-events-none absolute bottom-2 right-2 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400 dark:text-zinc-500", children: [
+        showCount && limit ? /* @__PURE__ */ jsxs23("div", { className: "pointer-events-auto", children: [
+          count,
+          "/",
+          limit
+        ] }) : null,
+        /* @__PURE__ */ jsx25(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Resize textarea",
+            onMouseDown: handleResizeStart,
+            className: "pointer-events-auto inline-flex h-[14px] w-[14px] items-center justify-center rounded-[3px] bg-transparent text-slate-400 outline-none transition hover:text-slate-500 focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-1 focus-visible:ring-offset-white active:cursor-grab dark:bg-transparent dark:text-zinc-400 dark:hover:text-zinc-200 dark:focus-visible:ring-slate-500 dark:focus-visible:ring-offset-zinc-900",
+            style: {
+              border: "none",
+              boxShadow: "none",
+              appearance: "none",
+              background: "transparent"
+            },
+            children: /* @__PURE__ */ jsx25(
+              "svg",
+              {
+                viewBox: "0 0 12 12",
+                "aria-hidden": "true",
+                className: "h-3 w-3 text-slate-400 dark:text-zinc-400",
+                children: /* @__PURE__ */ jsx25(
+                  "path",
+                  {
+                    d: "M2 10.5 10.5 2M4.5 10.5 10.5 4.5M7 10.5 10.5 7",
+                    stroke: "currentColor",
+                    strokeWidth: "1.1"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] }) : null
+    ] }),
+    description ? /* @__PURE__ */ jsx25("p", { id: descriptionId, className: "text-xs text-slate-500 dark:text-zinc-400", children: description }) : null,
+    error ? /* @__PURE__ */ jsx25("p", { id: errorId, className: "text-xs font-medium text-rose-500 dark:text-rose-400", children: error }) : null
+  ] });
+});
+
+// components/Toggle/Toggle.tsx
+import * as React22 from "react";
+import { twMerge as twMerge25 } from "tailwind-merge";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var Toggle = React22.forwardRef(function Toggle2({ checked, defaultChecked = false, onChange, disabled, className, onClick, ...rest }, ref) {
+  const isControlled = typeof checked === "boolean";
+  const [internalChecked, setInternalChecked] = React22.useState(defaultChecked);
+  const resolvedChecked = isControlled ? !!checked : internalChecked;
+  const handleClick = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    const next = !resolvedChecked;
+    if (!isControlled) {
+      setInternalChecked(next);
+    }
+    onChange == null ? void 0 : onChange(next);
+    onClick == null ? void 0 : onClick(event);
+  };
+  const buttonClasses = twMerge25(
+    "relative inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border border-slate-300 bg-slate-200 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-100",
+    "dark:border-zinc-700/70 dark:bg-zinc-900/70 dark:focus-visible:ring-offset-slate-950",
+    resolvedChecked && "border-slate-400 bg-slate-500/40 shadow-[0_0_0_1px_rgba(148,163,184,0.45)] dark:border-zinc-500 dark:bg-zinc-500",
+    disabled && "cursor-not-allowed opacity-60",
+    className
+  );
+  const thumbClasses = twMerge25(
+    "pointer-events-none absolute left-1 top-[3px] size-5 rounded-full bg-white text-zinc-900 shadow-lg shadow-black/30 transition-transform duration-200",
+    resolvedChecked ? "translate-x-[19px]" : "translate-x-0"
+  );
+  return /* @__PURE__ */ jsx26(
+    "button",
+    {
+      ...rest,
+      ref,
+      type: "button",
+      role: "switch",
+      "aria-checked": resolvedChecked,
+      disabled,
+      "data-state": resolvedChecked ? "on" : "off",
+      className: buttonClasses,
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", className: thumbClasses })
+    }
+  );
+});
+var Toggle_default = Toggle;
+export {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  Checkbox,
+  ColorPicker,
+  Combobox,
+  DatalistInput,
+  DatePicker,
+  Dialog,
+  Disclosure,
+  Dropdown,
+  InputField,
+  Meter,
+  NumberInput,
+  OutputChip,
+  Popover,
+  Progress,
+  Radio,
+  Select,
+  Slider,
+  StackedList,
+  Table,
+  Textarea,
+  Toggle_default as Toggle
+};
+//# sourceMappingURL=index.js.map