dhx-react-suite 1.0.0

package/dist/dhx-react-suite.js

@@ -0,0 +1,1171 @@
+import { jsxs as f, jsx as t, Fragment as Z } from "react/jsx-runtime";
+import { useEffect as T, useState as z, useMemo as F, useRef as B, useCallback as H, createContext as ee, useContext as te } from "react";
+import { Tooltip as re, Legend as ne, CartesianGrid as oe, XAxis as _, YAxis as X, BarChart as ie, Bar as ae, LineChart as le, Line as se, AreaChart as de, Area as ce, PieChart as pe, Pie as ue, Cell as he, RadarChart as xe, PolarGrid as ge, PolarAngleAxis as fe, Radar as ye, ScatterChart as be, Scatter as me, ResponsiveContainer as ve } from "recharts";
+const e = {
+  primary: "#0288d1",
+  primaryDk: "#01579b",
+  primaryLt: "#e1f5fe",
+  success: "#43a047",
+  danger: "#e53935",
+  warning: "#fb8c00",
+  bg: "#f5f7fa",
+  surface: "#ffffff",
+  border: "#dde3ea",
+  borderDk: "#b0bec5",
+  text: "#3d4a5c",
+  textSec: "#6b7a8d",
+  textMut: "#9aa5b1",
+  shadow: "0 2px 8px rgba(0,0,0,.10)",
+  shadowLg: "0 8px 28px rgba(0,0,0,.14)",
+  r: "4px",
+  rMd: "8px",
+  font: "'Segoe UI', system-ui, -apple-system, sans-serif"
+}, V = "dhx-react-styles";
+function W() {
+  if (typeof document > "u" || document.getElementById(V)) return;
+  const r = document.createElement("style");
+  r.id = V, r.textContent = `
+    *,*::before,*::after{box-sizing:border-box}
+    .dhx{font-family:${e.font};font-size:14px;color:${e.text}}
+    .dhx *{box-sizing:border-box}
+    .dhx-scroll::-webkit-scrollbar{width:6px;height:6px}
+    .dhx-scroll::-webkit-scrollbar-track{background:${e.bg}}
+    .dhx-scroll::-webkit-scrollbar-thumb{background:${e.borderDk};border-radius:3px}
+    .dhx-scroll::-webkit-scrollbar-thumb:hover{background:${e.textMut}}
+    @keyframes dhx-fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
+    @keyframes dhx-spin{to{transform:rotate(360deg)}}
+    @keyframes dhx-toast{from{opacity:0;transform:translateX(110%)}to{opacity:1;transform:translateX(0)}}
+    @keyframes dhx-pulse{0%,100%{opacity:1}50%{opacity:.5}}
+    .dhx-anim-fade{animation:dhx-fade .15s ease}
+    .dhx-btn{display:inline-flex;align-items:center;gap:5px;padding:0 12px;height:32px;border-radius:${e.r};border:1px solid transparent;cursor:pointer;font-size:13px;font-family:inherit;font-weight:500;transition:all .15s ease;outline:none;white-space:nowrap;user-select:none}
+    .dhx-btn:focus-visible{box-shadow:0 0 0 3px ${e.primary}33}
+    .dhx-btn-primary{background:${e.primary};color:#fff;border-color:${e.primary}}
+    .dhx-btn-primary:hover{background:${e.primaryDk};border-color:${e.primaryDk}}
+    .dhx-btn-secondary{background:${e.surface};color:${e.text};border-color:${e.border}}
+    .dhx-btn-secondary:hover{background:${e.bg};border-color:${e.borderDk}}
+    .dhx-btn-ghost{background:transparent;color:${e.textSec};border-color:transparent}
+    .dhx-btn-ghost:hover{background:${e.bg};color:${e.text}}
+    .dhx-btn-danger{background:${e.danger};color:#fff;border-color:${e.danger}}
+    .dhx-btn-danger:hover{background:#c62828;border-color:#c62828}
+    .dhx-btn:disabled{opacity:.45;cursor:not-allowed}
+    .dhx-input{width:100%;height:32px;padding:0 10px;border:1px solid ${e.border};border-radius:${e.r};font-size:13px;font-family:inherit;color:${e.text};background:${e.surface};outline:none;transition:border-color .15s}
+    .dhx-input:focus{border-color:${e.primary};box-shadow:0 0 0 3px ${e.primary}22}
+    .dhx-input:disabled{background:${e.bg};color:${e.textMut};cursor:not-allowed}
+    .dhx-input-wrap{position:relative;width:100%}
+    .dhx-input-wrap .dhx-input-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:${e.textMut};pointer-events:none}
+    .dhx-input-wrap .dhx-input--with-icon{padding-left:30px}
+    .dhx-label{display:block;font-size:12px;font-weight:600;color:${e.textSec};margin-bottom:5px;letter-spacing:.02em}
+    .dhx-form-group{margin-bottom:14px}
+    .dhx-card{background:${e.surface};border:1px solid ${e.border};border-radius:${e.rMd};box-shadow:${e.shadow}}
+    .dhx-card-padded{padding:16px}
+    .dhx-divider{border:none;border-top:1px solid ${e.border};margin:0}
+    .dhx-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600}
+    .dhx-tag-primary{background:${e.primaryLt};color:${e.primaryDk}}
+    .dhx-tag-success{background:#e8f5e9;color:#1b5e20}
+    .dhx-tag-danger{background:#ffebee;color:#b71c1c}
+    .dhx-tag-warning{background:#fff3e0;color:#e65100}
+  `, document.head.appendChild(r);
+}
+const ke = {
+  sm: { height: 24, padding: "0 8px", fontSize: 12 },
+  md: {},
+  lg: { height: 38, padding: "0 18px", fontSize: 14 }
+};
+function We({
+  children: r,
+  variant: a = "primary",
+  size: g = "md",
+  icon: o,
+  disabled: s,
+  onClick: l,
+  style: c,
+  className: n = ""
+}) {
+  return T(W, []), /* @__PURE__ */ f(
+    "button",
+    {
+      className: `dhx dhx-btn dhx-btn-${a} ${n}`,
+      style: { ...ke[g], ...c },
+      disabled: s,
+      onClick: l,
+      children: [
+        o && /* @__PURE__ */ t("span", { style: { fontSize: 16 }, children: o }),
+        r
+      ]
+    }
+  );
+}
+function Ee({ items: r = [], style: a }) {
+  T(W, []);
+  const g = (o, s) => {
+    var c;
+    if (o.type === "separator")
+      return /* @__PURE__ */ t("div", { style: { width: 1, background: e.border, margin: "6px 4px", alignSelf: "stretch" } }, s);
+    if (o.type === "spacer")
+      return /* @__PURE__ */ t("div", { style: { flex: 1 } }, s);
+    if (o.type === "input")
+      return /* @__PURE__ */ f("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+        o.label && /* @__PURE__ */ t("span", { style: { fontSize: 12, color: e.textSec, fontWeight: 500 }, children: o.label }),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            className: "dhx dhx-input",
+            style: { width: o.width || 140, height: 28 },
+            placeholder: o.placeholder,
+            defaultValue: o.value,
+            onChange: (n) => {
+              var p;
+              return (p = o.onChange) == null ? void 0 : p.call(o, n.target.value);
+            }
+          }
+        )
+      ] }, s);
+    if (o.type === "select")
+      return /* @__PURE__ */ t(
+        "select",
+        {
+          className: "dhx dhx-input",
+          style: { width: o.width || 100, height: 28, cursor: "pointer" },
+          defaultValue: o.value,
+          onChange: (n) => {
+            var p;
+            return (p = o.onChange) == null ? void 0 : p.call(o, n.target.value);
+          },
+          children: (c = o.options) == null ? void 0 : c.map((n) => /* @__PURE__ */ t("option", { value: n.value, children: n.label }, n.value))
+        },
+        s
+      );
+    const l = o.active;
+    return /* @__PURE__ */ f(
+      "button",
+      {
+        className: `dhx dhx-btn ${l ? "dhx-btn-primary" : "dhx-btn-ghost"}`,
+        style: { height: 32, gap: 4, ...o.twoState && l ? { background: e.primaryLt, color: e.primary, borderColor: `${e.primary}66` } : {} },
+        disabled: o.disabled,
+        onClick: () => {
+          var n;
+          return (n = o.onClick) == null ? void 0 : n.call(o, o);
+        },
+        children: [
+          o.icon && /* @__PURE__ */ t("span", { style: { fontSize: 16 }, children: o.icon }),
+          o.text && /* @__PURE__ */ t("span", { children: o.text })
+        ]
+      },
+      s
+    );
+  };
+  return /* @__PURE__ */ t("div", { className: "dhx", style: { display: "flex", alignItems: "center", gap: 2, padding: "4px 8px", background: e.surface, borderBottom: `1px solid ${e.border}`, minHeight: 44, flexWrap: "wrap", ...a }, children: r.map(g) });
+}
+function Ae({ items: r = [], width: a = 240, collapsed: g, onSelect: o, header: s, footer: l, style: c }) {
+  const [n, p] = z(g ?? !1), [m, d] = z(null), [h, i] = z({});
+  T(W, []);
+  const y = n ? 56 : a, $ = (v) => {
+    d(v.id), o == null || o(v);
+  }, S = (v, N = 0) => {
+    var M;
+    if (v.type === "separator") return /* @__PURE__ */ t("div", { style: { height: 1, background: e.border, margin: "6px 8px" } }, v.id);
+    if (v.type === "customHTML") return /* @__PURE__ */ t("div", { style: { padding: "8px 12px" }, dangerouslySetInnerHTML: { __html: v.html || "" } }, v.id);
+    const k = (((M = v.items) == null ? void 0 : M.length) ?? 0) > 0, u = h[v.id], x = m === v.id;
+    return /* @__PURE__ */ f("div", { children: [
+      /* @__PURE__ */ f(
+        "div",
+        {
+          onClick: () => {
+            k && i((D) => ({ ...D, [v.id]: !D[v.id] })), $(v);
+          },
+          style: { display: "flex", alignItems: "center", gap: 10, padding: `8px ${n ? "0px" : `${12 + N * 16}px`}`, cursor: "pointer", borderRadius: e.r, margin: "1px 6px", justifyContent: n ? "center" : "flex-start", transition: "all .15s", background: x ? e.primaryLt : "transparent", color: x ? e.primary : e.text, userSelect: "none" },
+          onMouseEnter: (D) => !x && (D.currentTarget.style.background = e.bg),
+          onMouseLeave: (D) => !x && (D.currentTarget.style.background = "transparent"),
+          children: [
+            v.icon && /* @__PURE__ */ t("span", { style: { fontSize: 18, minWidth: 22, textAlign: "center" }, children: v.icon }),
+            !n && /* @__PURE__ */ t("span", { style: { flex: 1, fontSize: 13, fontWeight: x ? 600 : 400 }, children: v.value }),
+            !n && v.count !== void 0 && /* @__PURE__ */ t("span", { style: { background: e.primary, color: "#fff", borderRadius: 10, padding: "1px 6px", fontSize: 11, fontWeight: 700 }, children: v.count }),
+            !n && k && /* @__PURE__ */ t("span", { style: { fontSize: 12, color: e.textMut, transition: "transform .15s", transform: u ? "rotate(90deg)" : "rotate(0deg)" }, children: "▶" })
+          ]
+        }
+      ),
+      k && u && !n && v.items.map((D) => S(D, N + 1))
+    ] }, v.id);
+  };
+  return /* @__PURE__ */ f("div", { className: "dhx", style: { width: y, minWidth: y, background: e.surface, borderRight: `1px solid ${e.border}`, display: "flex", flexDirection: "column", transition: "width .2s ease", overflow: "hidden", ...c }, children: [
+    s && !n && /* @__PURE__ */ t("div", { style: { padding: "12px 14px", borderBottom: `1px solid ${e.border}`, fontWeight: 700, fontSize: 15 }, children: s }),
+    /* @__PURE__ */ t("button", { onClick: () => p((v) => !v), style: { margin: "8px 6px", background: "transparent", border: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: n ? "center" : "flex-end", padding: "4px 6px", borderRadius: e.r, color: e.textSec }, children: /* @__PURE__ */ t("span", { style: { fontSize: 18 }, children: n ? "☰" : "✕" }) }),
+    /* @__PURE__ */ t("div", { className: "dhx-scroll", style: { flex: 1, overflowY: "auto", overflowX: "hidden" }, children: r.map((v) => S(v)) }),
+    l && !n && /* @__PURE__ */ t("div", { style: { padding: "10px 14px", borderTop: `1px solid ${e.border}` }, children: l })
+  ] });
+}
+function we({ config: r }) {
+  const [a, g] = z(!1), o = {
+    position: "relative",
+    background: e.surface,
+    border: `1px solid ${e.border}`,
+    borderRadius: e.r,
+    overflow: "hidden",
+    ...r.width ? { width: r.width, minWidth: r.width } : { flex: 1 },
+    ...r.height ? { height: r.height, minHeight: r.height } : { minHeight: 40 },
+    ...a ? { flex: "0 0 auto" } : {}
+  };
+  return /* @__PURE__ */ f("div", { style: o, children: [
+    r.header && /* @__PURE__ */ f("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "6px 12px", background: e.bg, borderBottom: `1px solid ${e.border}`, fontSize: 12, fontWeight: 600, color: e.textSec, userSelect: "none" }, children: [
+      /* @__PURE__ */ t("span", { children: r.header }),
+      r.collapsable && /* @__PURE__ */ t("button", { onClick: () => g((s) => !s), style: { background: "none", border: "none", cursor: "pointer", color: e.textMut, fontSize: 16, lineHeight: 1 }, children: a ? "▼" : "▲" })
+    ] }),
+    !a && /* @__PURE__ */ f("div", { style: { padding: r.padding || 0, height: r.header ? "calc(100% - 33px)" : "100%", overflow: "auto" }, children: [
+      r.html ? /* @__PURE__ */ t("div", { dangerouslySetInnerHTML: { __html: r.html } }) : r.content,
+      (r.rows || r.cols) && /* @__PURE__ */ t(Se, { rows: r.rows, cols: r.cols, style: { height: "100%" } })
+    ] })
+  ] });
+}
+function Se({ rows: r, cols: a, type: g = "line", style: o, children: s }) {
+  T(W, []);
+  const l = g === "space" ? 12 : g === "wide" ? 8 : 1, c = r || a, n = !!r;
+  return c ? /* @__PURE__ */ t("div", { className: "dhx", style: { display: "flex", flexDirection: n ? "column" : "row", gap: l, width: "100%", height: "100%", ...o }, children: c.map((p, m) => /* @__PURE__ */ t(we, { config: p }, p.id || m)) }) : /* @__PURE__ */ t("div", { className: "dhx", style: { width: "100%", height: "100%", ...o }, children: s });
+}
+function He({ views: r = [], mode: a = "top", tabAlign: g = "left", closable: o = [], disabled: s = [], defaultActive: l, onBeforeChange: c, onChange: n, style: p }) {
+  var x;
+  const [m, d] = z(l || ((x = r[0]) == null ? void 0 : x.id)), [h, i] = z(r.map((M) => M.id));
+  T(W, []);
+  const y = (M, D) => {
+    M.stopPropagation(), i((b) => b.filter((C) => C !== D)), m === D && d(h.find((b) => b !== D) ?? "");
+  }, $ = (M) => {
+    s.includes(M) || c && c(M) === !1 || (d(M), n == null || n(M));
+  }, S = a === "left" || a === "right", v = r.filter((M) => h.includes(M.id)), N = /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: S ? "column" : "row", justifyContent: g === "center" ? "center" : g === "right" ? "flex-end" : "flex-start", background: e.surface, borderBottom: !S && a !== "bottom" ? `2px solid ${e.border}` : "none", borderTop: a === "bottom" ? `2px solid ${e.border}` : "none", borderRight: a === "left" ? `2px solid ${e.border}` : "none", borderLeft: a === "right" ? `2px solid ${e.border}` : "none", overflowX: "auto", flexShrink: 0 }, children: v.map((M) => {
+    const D = m === M.id, b = s.includes(M.id), C = a === "bottom" ? { borderTop: `2px solid ${e.primary}`, color: e.primary, fontWeight: 600 } : S ? { color: e.primary, fontWeight: 600, background: e.primaryLt, [a === "left" ? "borderRight" : "borderLeft"]: `2px solid ${e.primary}` } : { borderBottom: `2px solid ${e.primary}`, color: e.primary, fontWeight: 600 };
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        onClick: () => $(M.id),
+        style: { display: "flex", alignItems: "center", gap: 6, padding: "10px 16px", cursor: b ? "not-allowed" : "pointer", whiteSpace: "nowrap", fontSize: 13, transition: "color .15s", userSelect: "none", minWidth: S ? 120 : "auto", ...D ? C : { color: b ? e.textMut : e.textSec } },
+        children: [
+          M.icon && /* @__PURE__ */ t("span", { style: { fontSize: 16 }, children: M.icon }),
+          /* @__PURE__ */ t("span", { children: M.tab }),
+          o.includes(M.id) && /* @__PURE__ */ t("span", { onClick: (w) => y(w, M.id), style: { marginLeft: 4, opacity: 0.6, fontSize: 12, cursor: "pointer" }, children: "✕" })
+        ]
+      },
+      M.id
+    );
+  }) }), k = v.find((M) => M.id === m), u = /* @__PURE__ */ f("div", { className: "dhx-scroll", style: { flex: 1, overflow: "auto" }, children: [
+    k == null ? void 0 : k.content,
+    (k == null ? void 0 : k.html) && /* @__PURE__ */ t("div", { dangerouslySetInnerHTML: { __html: k.html }, style: { padding: 16 } })
+  ] });
+  return /* @__PURE__ */ f("div", { className: "dhx", style: { display: "flex", flexDirection: a === "top" ? "column" : a === "bottom" ? "column-reverse" : a === "left" ? "row" : "row-reverse", width: "100%", height: "100%", background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.r, overflow: "hidden", ...p }, children: [
+    N,
+    u
+  ] });
+}
+function Be({ columns: r, data: a = [], height: g = 400, rowHeight: o = 40, sortable: s = !0, resizable: l = !0, selection: c, multiselect: n, onSelect: p, style: m }) {
+  const [d, h] = z(null), [i, y] = z("asc"), [$, S] = z({}), [v, N] = z(/* @__PURE__ */ new Set()), [k, u] = z(r.map((w) => w.width || w.minWidth || 140));
+  T(W, []);
+  const x = F(() => {
+    let w = a.filter(
+      (L) => Object.entries($).every(([E, I]) => !I || String(L[E] ?? "").toLowerCase().includes(I.toLowerCase()))
+    );
+    return d && (w = [...w].sort((L, E) => {
+      const I = L[d], R = E[d];
+      return I == null ? 1 : R == null ? -1 : i === "asc" ? I < R ? -1 : I > R ? 1 : 0 : I > R ? -1 : I < R ? 1 : 0;
+    })), w;
+  }, [a, d, i, $]), M = (w) => {
+    !s || w.sortable === !1 || (y((L) => d === w.id && L === "asc" ? "desc" : "asc"), h(w.id));
+  }, D = (w, L) => {
+    if (!c) return;
+    const E = w.id ?? L;
+    N((I) => {
+      const R = n ? new Set(I) : /* @__PURE__ */ new Set();
+      return R.has(E) ? R.delete(E) : R.add(E), R;
+    }), p == null || p(w);
+  }, b = (w, L) => {
+    const E = w.clientX, I = k[L], R = (U) => u((Q) => {
+      const K = [...Q];
+      return K[L] = Math.max(60, I + U.clientX - E), K;
+    }), j = () => {
+      document.removeEventListener("mousemove", R), document.removeEventListener("mouseup", j);
+    };
+    document.addEventListener("mousemove", R), document.addEventListener("mouseup", j), w.preventDefault();
+  }, C = r.some((w) => w.filterable !== !1);
+  return /* @__PURE__ */ t("div", { className: "dhx", style: { width: "100%", height: g, display: "flex", flexDirection: "column", border: `1px solid ${e.border}`, borderRadius: e.r, overflow: "hidden", ...m }, children: /* @__PURE__ */ t("div", { style: { overflowX: "auto", flex: 1, display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ f("div", { style: { minWidth: k.reduce((w, L) => w + L, 0) + "px", display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ t("div", { style: { display: "flex", background: e.bg, borderBottom: `1px solid ${e.border}`, position: "sticky", top: 0, zIndex: 2 }, children: r.map((w, L) => {
+      var E;
+      return /* @__PURE__ */ f(
+        "div",
+        {
+          style: { width: k[L], minWidth: k[L], position: "relative", padding: "0 10px", height: 40, display: "flex", alignItems: "center", fontSize: 12, fontWeight: 600, color: e.textSec, cursor: s && w.sortable !== !1 ? "pointer" : "default", userSelect: "none", gap: 4 },
+          onClick: () => M(w),
+          children: [
+            /* @__PURE__ */ t("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: Array.isArray(w.header) ? (E = w.header[0]) == null ? void 0 : E.text : w.header || w.id }),
+            s && w.sortable !== !1 && /* @__PURE__ */ t("span", { style: { opacity: d === w.id ? 1 : 0.25, fontSize: 10 }, children: d === w.id ? i === "asc" ? "▲" : "▼" : "⇅" }),
+            l && L < r.length - 1 && /* @__PURE__ */ t(
+              "div",
+              {
+                onMouseDown: (I) => b(I, L),
+                style: { position: "absolute", right: 0, top: 4, bottom: 4, width: 4, cursor: "col-resize", background: "transparent" },
+                onMouseEnter: (I) => I.currentTarget.style.background = e.border,
+                onMouseLeave: (I) => I.currentTarget.style.background = "transparent"
+              }
+            )
+          ]
+        },
+        w.id
+      );
+    }) }),
+    C && /* @__PURE__ */ t("div", { style: { display: "flex", borderBottom: `1px solid ${e.border}`, background: e.surface }, children: r.map((w, L) => /* @__PURE__ */ t("div", { style: { width: k[L], minWidth: k[L], padding: "4px 6px" }, children: w.filterable !== !1 && /* @__PURE__ */ t("input", { className: "dhx dhx-input", style: { height: 24, fontSize: 12 }, placeholder: "🔍", value: $[w.id] || "", onChange: (E) => S((I) => ({ ...I, [w.id]: E.target.value })) }) }, w.id)) }),
+    /* @__PURE__ */ f("div", { className: "dhx-scroll", style: { flex: 1, overflowY: "auto" }, children: [
+      x.map((w, L) => {
+        const E = w.id ?? L, I = v.has(E);
+        return /* @__PURE__ */ t(
+          "div",
+          {
+            onClick: () => D(w, L),
+            style: { display: "flex", height: o, alignItems: "center", borderBottom: `1px solid ${e.border}`, cursor: c ? "pointer" : "default", background: I ? e.primaryLt : L % 2 === 0 ? e.surface : e.bg, transition: "background .1s" },
+            onMouseEnter: (R) => !I && (R.currentTarget.style.background = "#f0f8ff"),
+            onMouseLeave: (R) => !I && (R.currentTarget.style.background = L % 2 === 0 ? e.surface : e.bg),
+            children: r.map((R, j) => /* @__PURE__ */ t("div", { style: { width: k[j], minWidth: k[j], padding: "0 10px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontSize: 13, textAlign: R.align || "left" }, children: R.template ? R.template(w[R.id], w) : String(w[R.id] ?? "") }, R.id))
+          },
+          String(E)
+        );
+      }),
+      x.length === 0 && /* @__PURE__ */ t("div", { style: { textAlign: "center", padding: 40, color: e.textMut }, children: "No data" })
+    ] })
+  ] }) }) });
+}
+const A = ["#0288d1", "#43a047", "#f57c00", "#e53935", "#8e24aa", "#00838f", "#ef6c00", "#2e7d32"];
+function je({ type: r = "bar", data: a = [], series: g = [], scales: o = {}, legend: s, height: l = 280, style: c }) {
+  var S, v, N, k, u;
+  T(W, []);
+  const n = ((S = o.bottom) == null ? void 0 : S.text) || a[0] && Object.keys(a[0])[0] || "x", p = /* @__PURE__ */ t(re, { contentStyle: { fontSize: 12, borderRadius: e.r, border: `1px solid ${e.border}` } }), m = s ? /* @__PURE__ */ t(ne, { iconSize: 10, wrapperStyle: { fontSize: 12 }, verticalAlign: s.valign, align: s.halign }) : null, d = /* @__PURE__ */ t(oe, { strokeDasharray: "3 3", stroke: e.border }), h = /* @__PURE__ */ t(_, { dataKey: n, tick: { fontSize: 11, fill: e.textSec }, axisLine: { stroke: e.border }, tickLine: !1 }), i = /* @__PURE__ */ t(X, { tick: { fontSize: 11, fill: e.textSec }, axisLine: !1, tickLine: !1, domain: [((v = o.left) == null ? void 0 : v.min) ?? "auto", ((N = o.left) == null ? void 0 : N.max) ?? "auto"] }), y = { data: a, margin: { top: 10, right: 20, left: 0, bottom: 0 } };
+  let $;
+  if (r === "bar")
+    $ = /* @__PURE__ */ f(ie, { ...y, children: [
+      d,
+      h,
+      i,
+      p,
+      m,
+      g.map((x, M) => /* @__PURE__ */ t(ae, { dataKey: x.value || x.id, name: x.label || x.id, fill: x.fill || A[M % A.length], radius: [3, 3, 0, 0] }, x.id))
+    ] });
+  else if (r === "line")
+    $ = /* @__PURE__ */ f(le, { ...y, children: [
+      d,
+      h,
+      i,
+      p,
+      m,
+      g.map((x, M) => /* @__PURE__ */ t(se, { type: "monotone", dataKey: x.value || x.id, name: x.label || x.id, stroke: x.color || A[M % A.length], strokeWidth: 2, dot: { r: 3, fill: x.color || A[M % A.length] } }, x.id))
+    ] });
+  else if (r === "area")
+    $ = /* @__PURE__ */ f(de, { ...y, children: [
+      d,
+      h,
+      i,
+      p,
+      m,
+      g.map((x, M) => /* @__PURE__ */ t(ce, { type: "monotone", dataKey: x.value || x.id, name: x.label || x.id, stroke: x.color || A[M % A.length], fill: (x.fill || A[M % A.length]) + "33", strokeWidth: 2 }, x.id))
+    ] });
+  else if (r === "pie" || r === "donut") {
+    const x = a[0] || {}, M = Object.keys(x).find((b) => typeof x[b] == "number") || "value", D = Object.keys(x).find((b) => typeof x[b] == "string") || "x";
+    $ = /* @__PURE__ */ f(pe, { children: [
+      /* @__PURE__ */ t(
+        ue,
+        {
+          data: a,
+          cx: "50%",
+          cy: "50%",
+          outerRadius: r === "donut" ? "70%" : "80%",
+          innerRadius: r === "donut" ? "40%" : 0,
+          dataKey: M,
+          nameKey: D,
+          label: ({ name: b, percent: C }) => `${b ?? ""} ${((C ?? 0) * 100).toFixed(0)}%`,
+          labelLine: !0,
+          paddingAngle: 2,
+          children: a.map((b, C) => /* @__PURE__ */ t(he, { fill: A[C % A.length] }, C))
+        }
+      ),
+      p,
+      m
+    ] });
+  } else r === "radar" ? $ = /* @__PURE__ */ f(xe, { ...y, cx: "50%", cy: "50%", children: [
+    /* @__PURE__ */ t(ge, {}),
+    /* @__PURE__ */ t(fe, { dataKey: n, tick: { fontSize: 11 } }),
+    g.map((x, M) => /* @__PURE__ */ t(ye, { dataKey: x.value || x.id, name: x.label || x.id, stroke: x.color || A[M], fill: (x.fill || A[M]) + "44" }, x.id)),
+    p,
+    m
+  ] }) : r === "scatter" && ($ = /* @__PURE__ */ f(be, { ...y, children: [
+    d,
+    /* @__PURE__ */ t(_, { dataKey: ((k = g[0]) == null ? void 0 : k.xValue) || "x", type: "number", tick: { fontSize: 11, fill: e.textSec } }),
+    /* @__PURE__ */ t(X, { dataKey: ((u = g[0]) == null ? void 0 : u.yValue) || "y", tick: { fontSize: 11, fill: e.textSec } }),
+    p,
+    g.map((x, M) => /* @__PURE__ */ t(me, { data: x.data || a, name: x.label || x.id, fill: x.color || A[M] }, x.id))
+  ] }));
+  return /* @__PURE__ */ t("div", { className: "dhx", style: { width: "100%", height: l, padding: 12, background: e.surface, borderRadius: e.rMd, ...c }, children: /* @__PURE__ */ t(ve, { width: "100%", height: "100%", children: $ }) });
+}
+const Me = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], $e = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function Ye({ value: r, range: a = !1, timepicker: g = !1, onChange: o, style: s }) {
+  const l = /* @__PURE__ */ new Date(), c = r ? new Date(Array.isArray(r) ? r[0] : r) : l, [n, p] = z(c), [m, d] = z(r ?? (a ? [null, null] : null)), [h, i] = z(null), [y, $] = z({ h: 0, m: 0 });
+  T(W, []);
+  const S = n.getFullYear(), v = n.getMonth(), N = new Date(S, v, 1).getDay(), k = new Date(S, v + 1, 0).getDate(), u = [];
+  for (let b = 0; b < N; b++) u.push(null);
+  for (let b = 1; b <= k; b++) u.push(new Date(S, v, b));
+  const x = (b) => b.toDateString() === l.toDateString(), M = (b) => {
+    if (!m) return !1;
+    if (a && Array.isArray(m)) {
+      const [C, w] = m;
+      if (!C) return !1;
+      const L = b.getTime();
+      return w ? L >= C.getTime() && L <= w.getTime() : b.toDateString() === C.toDateString();
+    }
+    return b.toDateString() === m.toDateString();
+  }, D = (b) => {
+    if (a) {
+      const [C, w] = Array.isArray(m) ? m : [null, null];
+      if (!C || w)
+        d([b, null]);
+      else {
+        const L = b < C ? [b, C] : [C, b];
+        d(L), o == null || o(L);
+      }
+    } else
+      d(b), o == null || o(b);
+  };
+  return /* @__PURE__ */ f("div", { className: "dhx", style: { background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.rMd, padding: 16, display: "inline-block", boxShadow: e.shadow, ...s }, children: [
+    /* @__PURE__ */ f("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }, children: [
+      /* @__PURE__ */ t("button", { onClick: () => p((b) => new Date(b.getFullYear(), b.getMonth() - 1, 1)), className: "dhx dhx-btn dhx-btn-ghost", style: { height: 28, padding: "0 8px", fontSize: 16 }, children: "‹" }),
+      /* @__PURE__ */ f("div", { style: { fontWeight: 700, fontSize: 14 }, children: [
+        Me[v],
+        " ",
+        S
+      ] }),
+      /* @__PURE__ */ t("button", { onClick: () => p((b) => new Date(b.getFullYear(), b.getMonth() + 1, 1)), className: "dhx dhx-btn dhx-btn-ghost", style: { height: 28, padding: "0 8px", fontSize: 16 }, children: "›" })
+    ] }),
+    /* @__PURE__ */ f("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 32px)", gap: 2 }, children: [
+      $e.map((b) => /* @__PURE__ */ t("div", { style: { textAlign: "center", fontSize: 11, fontWeight: 600, color: e.textMut, paddingBottom: 4 }, children: b }, b)),
+      u.map((b, C) => {
+        const w = b ? M(b) : !1, L = b && h && b.toDateString() === h.toDateString();
+        return /* @__PURE__ */ t(
+          "div",
+          {
+            onClick: () => b && D(b),
+            onMouseEnter: () => b && i(b),
+            onMouseLeave: () => i(null),
+            style: { width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: e.r, cursor: b ? "pointer" : "default", fontSize: 12, fontWeight: b && x(b) ? 700 : 400, background: w ? e.primary : L ? e.bg : "transparent", color: w ? "#fff" : b && x(b) ? e.primary : b ? e.text : "transparent", border: b && x(b) && !w ? `1px solid ${e.primary}` : "1px solid transparent", transition: "all .1s" },
+            children: b == null ? void 0 : b.getDate()
+          },
+          C
+        );
+      })
+    ] }),
+    g && /* @__PURE__ */ f("div", { style: { borderTop: `1px solid ${e.border}`, marginTop: 12, paddingTop: 12, display: "flex", alignItems: "center", justifyContent: "center", gap: 8 }, children: [
+      /* @__PURE__ */ t("input", { type: "number", min: 0, max: 23, value: y.h, onChange: (b) => $((C) => ({ ...C, h: +b.target.value })), className: "dhx dhx-input", style: { width: 50, textAlign: "center" } }),
+      /* @__PURE__ */ t("span", { style: { fontWeight: 700, color: e.textSec }, children: ":" }),
+      /* @__PURE__ */ t("input", { type: "number", min: 0, max: 59, value: y.m, onChange: (b) => $((C) => ({ ...C, m: +b.target.value })), className: "dhx dhx-input", style: { width: 50, textAlign: "center" } })
+    ] })
+  ] });
+}
+function Oe({ value: r, onChange: a, style: g }) {
+  const [o, s] = z((r == null ? void 0 : r.h) ?? 12), [l, c] = z((r == null ? void 0 : r.m) ?? 0), [n, p] = z((r == null ? void 0 : r.ampm) ?? "AM");
+  T(W, []);
+  const m = Array.from({ length: 12 }, (h, i) => i + 1), d = Array.from({ length: 12 }, (h, i) => i * 5);
+  return /* @__PURE__ */ f("div", { className: "dhx", style: { background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.rMd, padding: 16, display: "inline-block", boxShadow: e.shadow, ...g }, children: [
+    /* @__PURE__ */ f("div", { style: { display: "flex", gap: 8, alignItems: "stretch" }, children: [
+      [{ label: "Hours", values: m, val: o, setFn: s }, { label: "Minutes", values: d, val: l, setFn: c }].map(({ label: h, values: i, val: y, setFn: $ }) => /* @__PURE__ */ f("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }, children: [
+        /* @__PURE__ */ t("span", { style: { fontSize: 11, fontWeight: 600, color: e.textMut }, children: h }),
+        /* @__PURE__ */ t("div", { className: "dhx-scroll", style: { height: 160, overflowY: "auto", width: 48, border: `1px solid ${e.border}`, borderRadius: e.r }, children: i.map((S) => /* @__PURE__ */ t(
+          "div",
+          {
+            onClick: () => {
+              $(S), a == null || a({ h: h === "Hours" ? S : o, m: h === "Minutes" ? S : l, ampm: n });
+            },
+            style: { height: 32, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", fontSize: 13, fontWeight: y === S ? 700 : 400, background: y === S ? e.primaryLt : "transparent", color: y === S ? e.primary : e.text },
+            onMouseEnter: (v) => y !== S && (v.currentTarget.style.background = e.bg),
+            onMouseLeave: (v) => y !== S && (v.currentTarget.style.background = "transparent"),
+            children: String(S).padStart(2, "0")
+          },
+          S
+        )) })
+      ] }, h)),
+      /* @__PURE__ */ f("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+        /* @__PURE__ */ t("span", { style: { fontSize: 11, fontWeight: 600, color: e.textMut }, children: "AM/PM" }),
+        /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", border: `1px solid ${e.border}`, borderRadius: e.r, overflow: "hidden" }, children: ["AM", "PM"].map((h) => /* @__PURE__ */ t(
+          "div",
+          {
+            onClick: () => {
+              p(h), a == null || a({ h: o, m: l, ampm: h });
+            },
+            style: { height: 40, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", padding: "0 12px", fontSize: 13, fontWeight: n === h ? 700 : 400, background: n === h ? e.primary : e.surface, color: n === h ? "#fff" : e.text },
+            children: h
+          },
+          h
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ f("div", { style: { textAlign: "center", marginTop: 12, fontSize: 22, fontWeight: 700, color: e.primary, letterSpacing: 2 }, children: [
+      String(o).padStart(2, "0"),
+      ":",
+      String(l).padStart(2, "0"),
+      " ",
+      n
+    ] })
+  ] });
+}
+function Y(r, a) {
+  T(() => {
+    const g = (o) => {
+      r.current && !r.current.contains(o.target) && a(o);
+    };
+    return document.addEventListener("mousedown", g), () => document.removeEventListener("mousedown", g);
+  }, [r, a]);
+}
+function ze(r) {
+  const a = B(!1), g = B({ x: 0, y: 0, ox: 0, oy: 0 });
+  return H(
+    (o, s = 0, l = 0) => {
+      a.current = !0, g.current = { x: o.clientX, y: o.clientY, ox: s, oy: l };
+      const c = (p) => {
+        if (!a.current) return;
+        const { x: m, y: d, ox: h, oy: i } = g.current;
+        r(h + p.clientX - m, i + p.clientY - d);
+      }, n = () => {
+        a.current = !1, document.removeEventListener("mousemove", c), document.removeEventListener("mouseup", n);
+      };
+      document.addEventListener("mousemove", c), document.addEventListener("mouseup", n), o.preventDefault();
+    },
+    [r]
+  );
+}
+function Ne({ data: r = [], value: a, placeholder: g = "Select or type...", multiselection: o = !1, label: s, onChange: l, style: c }) {
+  var k;
+  const [n, p] = z(!1), [m, d] = z(""), [h, i] = z(o ? a ? [].concat(a) : [] : a || null), y = B(null);
+  T(W, []), Y(y, H(() => p(!1), []));
+  const $ = F(() => r.filter((u) => !m || u.value.toLowerCase().includes(m.toLowerCase())), [r, m]), S = (u) => o ? (h || []).includes(u) : h === u, v = (u) => {
+    const x = u.id || u.value;
+    if (o) {
+      const M = S(x) ? h.filter((D) => D !== x) : [...h || [], x];
+      i(M), l == null || l(M);
+    } else
+      i(x), d(""), p(!1), l == null || l(x);
+  }, N = o ? h != null && h.length ? `${h.length} selected` : "" : ((k = r.find((u) => (u.id || u.value) === h)) == null ? void 0 : k.value) || "";
+  return /* @__PURE__ */ f("div", { ref: y, className: "dhx", style: { position: "relative", ...c }, children: [
+    s && /* @__PURE__ */ t("label", { className: "dhx dhx-label", children: s }),
+    /* @__PURE__ */ f("div", { onClick: () => p((u) => !u), style: { display: "flex", alignItems: "center", border: `1px solid ${n ? e.primary : e.border}`, borderRadius: e.r, height: 32, padding: "0 10px", cursor: "pointer", background: e.surface, gap: 6, transition: "border-color .15s", boxShadow: n ? `0 0 0 3px ${e.primary}22` : "none" }, children: [
+      o && (h == null ? void 0 : h.length) > 0 && /* @__PURE__ */ f("div", { style: { display: "flex", gap: 3, flex: 1, flexWrap: "wrap", overflow: "hidden" }, children: [
+        h.slice(0, 3).map((u) => {
+          var x;
+          return /* @__PURE__ */ f("span", { className: "dhx dhx-tag dhx-tag-primary", style: { fontSize: 10, padding: "0 5px" }, children: [
+            ((x = r.find((M) => (M.id || M.value) === u)) == null ? void 0 : x.value) || u,
+            /* @__PURE__ */ t("span", { onClick: (M) => {
+              M.stopPropagation(), v({ value: u });
+            }, style: { cursor: "pointer", marginLeft: 3 }, children: "×" })
+          ] }, u);
+        }),
+        h.length > 3 && /* @__PURE__ */ f("span", { className: "dhx dhx-tag dhx-tag-primary", style: { fontSize: 10, padding: "0 5px" }, children: [
+          "+",
+          h.length - 3
+        ] })
+      ] }),
+      !o && /* @__PURE__ */ t("input", { value: n ? m : N, onChange: (u) => {
+        d(u.target.value), p(!0);
+      }, onFocus: () => p(!0), onClick: (u) => u.stopPropagation(), placeholder: g, style: { flex: 1, border: "none", outline: "none", fontSize: 13, background: "transparent", color: e.text } }),
+      o && !(h != null && h.length) && /* @__PURE__ */ t("span", { style: { flex: 1, color: e.textMut, fontSize: 13 }, children: g }),
+      /* @__PURE__ */ t("span", { style: { color: e.textMut, fontSize: 12, marginLeft: "auto" }, children: n ? "▲" : "▼" })
+    ] }),
+    n && /* @__PURE__ */ f("div", { className: "dhx dhx-anim-fade", style: { position: "absolute", top: "calc(100% + 4px)", left: 0, right: 0, background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.r, boxShadow: e.shadowLg, zIndex: 100, maxHeight: 220 }, children: [
+      o && /* @__PURE__ */ t("div", { style: { padding: "6px 10px", borderBottom: `1px solid ${e.border}` }, children: /* @__PURE__ */ t("input", { autoFocus: !0, className: "dhx dhx-input", style: { height: 26, fontSize: 12 }, placeholder: "Search...", value: m, onChange: (u) => d(u.target.value) }) }),
+      /* @__PURE__ */ f("div", { className: "dhx-scroll", style: { maxHeight: 180, overflowY: "auto" }, children: [
+        $.map((u) => /* @__PURE__ */ f(
+          "div",
+          {
+            onClick: () => v(u),
+            style: { padding: "8px 12px", cursor: "pointer", display: "flex", alignItems: "center", gap: 8, fontSize: 13, background: S(u.id || u.value) ? e.primaryLt : "transparent", color: S(u.id || u.value) ? e.primary : e.text },
+            onMouseEnter: (x) => !S(u.id || u.value) && (x.currentTarget.style.background = e.bg),
+            onMouseLeave: (x) => !S(u.id || u.value) && (x.currentTarget.style.background = "transparent"),
+            children: [
+              o && /* @__PURE__ */ t("span", { style: { width: 14, height: 14, border: `2px solid ${S(u.id || u.value) ? e.primary : e.borderDk}`, borderRadius: 2, display: "flex", alignItems: "center", justifyContent: "center", background: S(u.id || u.value) ? e.primary : "transparent" }, children: S(u.id || u.value) && /* @__PURE__ */ t("span", { style: { color: "#fff", fontSize: 9 }, children: "✓" }) }),
+              u.value,
+              u.count !== void 0 && /* @__PURE__ */ f("span", { style: { marginLeft: "auto", fontSize: 11, color: e.textMut }, children: [
+                "(",
+                u.count,
+                ")"
+              ] })
+            ]
+          },
+          u.id || u.value
+        )),
+        $.length === 0 && /* @__PURE__ */ t("div", { style: { padding: 16, textAlign: "center", color: e.textMut, fontSize: 13 }, children: "No matches" })
+      ] })
+    ] })
+  ] });
+}
+function Ce({ min: r = 0, max: a = 100, step: g = 1, value: o, range: s = !1, label: l, tick: c, onChange: n, style: p }) {
+  const [m, d] = z(o ?? (s ? [r, a] : r));
+  T(W, []);
+  const h = (S, v) => {
+    if (s) {
+      const N = [...m];
+      N[S] = v, d(N), n == null || n(N);
+    } else
+      d(v), n == null || n(v);
+  }, i = (S) => (S - r) / (a - r) * 100, y = s ? m : [m], $ = s ? { left: `${i(y[0])}%`, width: `${i(y[1]) - i(y[0])}%` } : { left: 0, width: `${i(y[0])}%` };
+  return /* @__PURE__ */ f("div", { className: "dhx", style: { width: "100%", ...p }, children: [
+    l && /* @__PURE__ */ t("label", { className: "dhx dhx-label", children: l }),
+    /* @__PURE__ */ t("div", { style: { position: "relative", height: 36, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ f("div", { style: { position: "relative", flex: 1, height: 4, background: e.border, borderRadius: 2 }, children: [
+      /* @__PURE__ */ t("div", { style: { position: "absolute", ...$, height: "100%", background: e.primary, borderRadius: 2 } }),
+      y.map((S, v) => /* @__PURE__ */ t(
+        "input",
+        {
+          type: "range",
+          min: r,
+          max: a,
+          step: g,
+          value: S,
+          onChange: (N) => {
+            const k = +N.target.value;
+            s && v === 0 && k >= m[1] || s && v === 1 && k <= m[0] || h(v, k);
+          },
+          style: { position: "absolute", width: "100%", height: "100%", opacity: 0, cursor: "pointer", top: 0, left: 0, margin: 0 }
+        },
+        v
+      )),
+      y.map((S, v) => /* @__PURE__ */ t("div", { style: { position: "absolute", left: `${i(S)}%`, top: "50%", transform: "translate(-50%, -50%)", width: 16, height: 16, borderRadius: "50%", background: e.surface, border: `2px solid ${e.primary}`, boxShadow: "0 1px 4px rgba(0,0,0,.2)", pointerEvents: "none" }, children: /* @__PURE__ */ t("div", { style: { position: "absolute", bottom: "calc(100% + 6px)", left: "50%", transform: "translateX(-50%)", background: e.primaryDk, color: "#fff", padding: "2px 6px", borderRadius: e.r, fontSize: 11, fontWeight: 700, whiteSpace: "nowrap" }, children: S }) }, v))
+    ] }) }),
+    c && /* @__PURE__ */ t("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 2 }, children: [r, Math.round((a + r) / 2), a].map((S) => /* @__PURE__ */ t("span", { style: { fontSize: 10, color: e.textMut }, children: S }, S)) })
+  ] });
+}
+const Le = ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#607d8b", "#9e9e9e", "#000000", "#ffffff", "#0288d1", "#01579b", "#43a047", "#e53935", "#f57c00"];
+function P(r) {
+  const a = parseInt(r.slice(1, 3), 16) / 255, g = parseInt(r.slice(3, 5), 16) / 255, o = parseInt(r.slice(5, 7), 16) / 255, s = Math.max(a, g, o), l = Math.min(a, g, o);
+  let c = 0, n = 0;
+  const p = (s + l) / 2;
+  if (s !== l) {
+    const m = s - l;
+    n = p > 0.5 ? m / (2 - s - l) : m / (s + l), c = s === a ? ((g - o) / m + (g < o ? 6 : 0)) / 6 : s === g ? ((o - a) / m + 2) / 6 : ((a - g) / m + 4) / 6;
+  }
+  return [Math.round(c * 360), Math.round(n * 100), Math.round(p * 100)];
+}
+function q(r, a, g) {
+  a /= 100, g /= 100;
+  const o = a * Math.min(g, 1 - g), s = (l) => {
+    const c = (l + r / 30) % 12, n = g - o * Math.max(Math.min(c - 3, 9 - c, 1), -1);
+    return Math.round(255 * n).toString(16).padStart(2, "0");
+  };
+  return "#" + s(0) + s(8) + s(4);
+}
+function Pe({ value: r = "#0288d1", onChange: a, style: g }) {
+  const [o, s] = z(() => P(r)), l = q(...o);
+  T(W, []);
+  const c = (n) => {
+    s(n), a == null || a(q(...n));
+  };
+  return /* @__PURE__ */ f("div", { className: "dhx", style: { background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.rMd, padding: 16, display: "inline-block", boxShadow: e.shadow, ...g }, children: [
+    /* @__PURE__ */ t("div", { style: { width: 200, height: 120, borderRadius: e.r, marginBottom: 12, background: `linear-gradient(to bottom, transparent, black), linear-gradient(to right, white, hsl(${o[0]},100%,50%))`, cursor: "crosshair" } }),
+    [["Hue", 0, 360, o[0]], ["Saturation", 0, 100, o[1]], ["Lightness", 0, 100, o[2]]].map(([n, p, m, d], h) => /* @__PURE__ */ f("div", { style: { marginBottom: h < 2 ? 8 : 12 }, children: [
+      /* @__PURE__ */ f("div", { className: "dhx dhx-label", children: [
+        n,
+        h > 0 ? ` (${d}%)` : ""
+      ] }),
+      /* @__PURE__ */ t("input", { type: "range", min: p, max: m, value: d, onChange: (i) => {
+        const y = [...o];
+        y[h] = +i.target.value, c(y);
+      }, style: { width: "100%", accentColor: e.primary } })
+    ] }, n)),
+    /* @__PURE__ */ f("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }, children: [
+      /* @__PURE__ */ t("div", { style: { width: 36, height: 36, borderRadius: e.r, background: l, border: `1px solid ${e.border}`, flexShrink: 0 } }),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          className: "dhx dhx-input",
+          style: { flex: 1, fontFamily: "monospace", fontSize: 12 },
+          value: l,
+          onChange: (n) => {
+            try {
+              c(P(n.target.value)), a == null || a(n.target.value);
+            } catch {
+            }
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("div", { style: { display: "grid", gridTemplateColumns: "repeat(13, 1fr)", gap: 3 }, children: Le.map((n) => /* @__PURE__ */ t(
+      "div",
+      {
+        onClick: () => {
+          s(P(n)), a == null || a(n);
+        },
+        style: { width: 14, height: 14, borderRadius: 2, background: n, cursor: "pointer", border: l === n ? `2px solid ${e.text}` : "1px solid rgba(0,0,0,.15)", transition: "transform .1s" },
+        onMouseEnter: (p) => p.currentTarget.style.transform = "scale(1.3)",
+        onMouseLeave: (p) => p.currentTarget.style.transform = "scale(1)"
+      },
+      n
+    )) })
+  ] });
+}
+function O({ items: r, onSelect: a, style: g }) {
+  const [o, s] = z(null);
+  return /* @__PURE__ */ t("div", { className: "dhx dhx-anim-fade", style: { position: "absolute", top: "calc(100% + 4px)", left: 0, minWidth: 180, background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.r, boxShadow: e.shadowLg, zIndex: 200, padding: "4px 0", ...g }, children: r.map((l, c) => {
+    var p, m;
+    if (l.type === "separator") return /* @__PURE__ */ t("div", { style: { height: 1, background: e.border, margin: "4px 0" } }, c);
+    const n = o === c;
+    return /* @__PURE__ */ f("div", { style: { position: "relative" }, onMouseEnter: () => s(c), onMouseLeave: () => s(null), children: [
+      /* @__PURE__ */ f(
+        "div",
+        {
+          onClick: () => {
+            var d;
+            return !l.disabled && !((d = l.items) != null && d.length) && a(l);
+          },
+          style: { display: "flex", alignItems: "center", gap: 8, padding: "8px 14px", cursor: l.disabled ? "not-allowed" : "pointer", fontSize: 13, color: l.disabled ? e.textMut : e.text, background: n && !l.disabled ? e.bg : "transparent", opacity: l.disabled ? 0.5 : 1 },
+          children: [
+            l.icon && /* @__PURE__ */ t("span", { style: { fontSize: 15, width: 18, textAlign: "center" }, children: l.icon }),
+            /* @__PURE__ */ t("span", { style: { flex: 1 }, children: l.value || l.id }),
+            l.hotkey && /* @__PURE__ */ t("span", { style: { fontSize: 11, color: e.textMut }, children: l.hotkey }),
+            (p = l.items) != null && p.length ? /* @__PURE__ */ t("span", { style: { fontSize: 10, color: e.textMut }, children: "▶" }) : null
+          ]
+        }
+      ),
+      n && ((m = l.items) != null && m.length) ? /* @__PURE__ */ t(O, { items: l.items, onSelect: a, style: { position: "absolute", left: "100%", top: -4 } }) : null
+    ] }, l.id || c);
+  }) });
+}
+function Fe({ items: r = [], label: a = "Menu", onSelect: g, style: o }) {
+  const [s, l] = z(!1), c = B(null);
+  return T(W, []), Y(c, H(() => l(!1), [])), /* @__PURE__ */ f("div", { ref: c, className: "dhx", style: { position: "relative", display: "inline-block", ...o }, children: [
+    /* @__PURE__ */ f("button", { className: "dhx dhx-btn dhx-btn-secondary", onClick: () => l((n) => !n), children: [
+      a,
+      " ",
+      /* @__PURE__ */ t("span", { style: { fontSize: 10 }, children: s ? "▲" : "▼" })
+    ] }),
+    s && /* @__PURE__ */ t(O, { items: r, onSelect: (n) => {
+      g == null || g(n), l(!1);
+    } })
+  ] });
+}
+function Ke({ items: r = [], onSelect: a, children: g }) {
+  const [o, s] = z(null), l = B(null);
+  return T(W, []), Y(l, H(() => s(null), [])), /* @__PURE__ */ f("div", { ref: l, onContextMenu: (n) => {
+    n.preventDefault(), s({ x: n.clientX, y: n.clientY });
+  }, style: { position: "relative", display: "contents" }, children: [
+    g,
+    o && /* @__PURE__ */ t("div", { style: { position: "fixed", left: o.x, top: o.y, zIndex: 9999 }, children: /* @__PURE__ */ t(O, { items: r, onSelect: (n) => {
+      a == null || a(n), s(null);
+    } }) })
+  ] });
+}
+function _e({ trigger: r, children: a, placement: g = "bottom-start", style: o }) {
+  const [s, l] = z(!1), [c, n] = z({ top: "100%", left: 0 }), p = B(null), m = B(null);
+  return T(W, []), Y(p, H(() => l(!1), [])), /* @__PURE__ */ f("div", { ref: p, className: "dhx", style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ t("div", { ref: m, onClick: () => {
+      l((h) => {
+        if (!h && m.current) {
+          const i = m.current.getBoundingClientRect(), y = {
+            "bottom-start": { top: i.height + 4, left: 0 },
+            "bottom-end": { top: i.height + 4, right: 0, left: "auto" },
+            "top-start": { bottom: i.height + 4, top: "auto", left: 0 }
+          };
+          n(y[g] || y["bottom-start"]);
+        }
+        return !h;
+      });
+    }, children: r }),
+    s && /* @__PURE__ */ t("div", { className: "dhx dhx-anim-fade", style: { position: "absolute", ...c, zIndex: 200, background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.rMd, boxShadow: e.shadowLg, ...o }, children: a })
+  ] });
+}
+function Xe({ title: r, children: a, width: g = 480, height: o, closable: s = !0, movable: l = !0, modal: c = !1, defaultOpen: n = !0, footer: p, onClose: m, style: d }) {
+  const [h, i] = z(n), [y, $] = z({ x: 0, y: 0 });
+  T(W, []);
+  const S = ze(H((N, k) => l && $({ x: N, y: k }), [l])), v = () => {
+    i(!1), m == null || m();
+  };
+  return h ? /* @__PURE__ */ f(Z, { children: [
+    c && /* @__PURE__ */ t("div", { style: { position: "fixed", inset: 0, background: "rgba(0,0,0,.45)", zIndex: 900 }, onClick: s ? v : void 0 }),
+    /* @__PURE__ */ f("div", { className: "dhx", style: { position: c ? "fixed" : "absolute", left: c ? "50%" : `calc(50% + ${y.x}px)`, top: c ? "50%" : `calc(50% + ${y.y}px)`, transform: `translate(calc(-50% + ${y.x}px), calc(-50% + ${y.y}px))`, width: g, ...o ? { height: o } : {}, background: e.surface, borderRadius: e.rMd, boxShadow: e.shadowLg, zIndex: 901, display: "flex", flexDirection: "column", overflow: "hidden", ...d }, children: [
+      /* @__PURE__ */ f("div", { onMouseDown: (N) => S(N, y.x, y.y), style: { display: "flex", alignItems: "center", padding: "12px 16px", borderBottom: `1px solid ${e.border}`, cursor: l ? "grab" : "default", background: e.bg, gap: 8, userSelect: "none" }, children: [
+        /* @__PURE__ */ t("span", { style: { flex: 1, fontWeight: 700, fontSize: 15 }, children: r }),
+        s && /* @__PURE__ */ t(
+          "button",
+          {
+            onClick: v,
+            style: { background: "none", border: "none", cursor: "pointer", width: 28, height: 28, borderRadius: e.r, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18, color: e.textSec },
+            onMouseEnter: (N) => N.currentTarget.style.background = e.border,
+            onMouseLeave: (N) => N.currentTarget.style.background = "none",
+            children: "×"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "dhx-scroll", style: { flex: 1, padding: 20, overflowY: "auto" }, children: a }),
+      p && /* @__PURE__ */ t("div", { style: { padding: "12px 16px", borderTop: `1px solid ${e.border}`, display: "flex", justifyContent: "flex-end", gap: 8, background: e.bg }, children: p })
+    ] })
+  ] }) : null;
+}
+const J = ee(null), De = { success: "✓", error: "✕", warning: "⚠", info: "ℹ" }, G = { success: e.success, error: e.danger, warning: e.warning, info: e.primary };
+function Ve({ children: r }) {
+  const [a, g] = z([]);
+  T(W, []);
+  const o = H((c) => g((n) => n.filter((p) => p.id !== c)), []), s = H((c) => {
+    const n = Date.now();
+    return g((p) => [...p, { id: n, ...c }]), c.duration !== 0 && setTimeout(() => o(n), c.duration || 4e3), n;
+  }, [o]), l = {
+    message: s,
+    alert: (c, n) => s({ type: "info", title: c, ...n }),
+    confirm: (c, n, p) => s({ type: "warning", title: c, confirm: n, ...p })
+  };
+  return /* @__PURE__ */ f(J.Provider, { value: l, children: [
+    r,
+    /* @__PURE__ */ t("div", { style: { position: "fixed", top: 20, right: 20, zIndex: 9999, display: "flex", flexDirection: "column", gap: 8, pointerEvents: "none" }, children: a.map((c) => {
+      const n = c.type || "info";
+      return /* @__PURE__ */ f("div", { style: { background: e.surface, border: `1px solid ${e.border}`, borderLeft: `4px solid ${G[n]}`, borderRadius: e.r, boxShadow: e.shadowLg, padding: "12px 16px", minWidth: 280, maxWidth: 380, pointerEvents: "all", display: "flex", gap: 10, alignItems: "flex-start", animation: "dhx-toast .3s ease" }, children: [
+        /* @__PURE__ */ t("span", { style: { fontSize: 18, color: G[n], lineHeight: 1 }, children: De[n] }),
+        /* @__PURE__ */ f("div", { style: { flex: 1 }, children: [
+          c.title && /* @__PURE__ */ t("div", { style: { fontWeight: 600, fontSize: 13, marginBottom: c.text ? 3 : 0 }, children: c.title }),
+          c.text && /* @__PURE__ */ t("div", { style: { fontSize: 12, color: e.textSec, lineHeight: 1.5 }, children: c.text }),
+          c.confirm && /* @__PURE__ */ f("div", { style: { display: "flex", gap: 6, marginTop: 8 }, children: [
+            /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-primary", style: { height: 26, fontSize: 12 }, onClick: () => {
+              c.confirm(!0), o(c.id);
+            }, children: "Confirm" }),
+            /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-secondary", style: { height: 26, fontSize: 12 }, onClick: () => {
+              c.confirm(!1), o(c.id);
+            }, children: "Cancel" })
+          ] })
+        ] }),
+        /* @__PURE__ */ t("button", { onClick: () => o(c.id), style: { background: "none", border: "none", cursor: "pointer", color: e.textMut, fontSize: 14, lineHeight: 1, padding: 0 }, children: "×" })
+      ] }, c.id);
+    }) })
+  ] });
+}
+function qe() {
+  const r = te(J);
+  if (!r) throw new Error("useMessage must be used inside <MessageProvider>");
+  return r;
+}
+function Ge({ data: r = [], template: a, keyNavigation: g = !0, multiselection: o = !1, editable: s = !1, height: l = 400, onSelect: c, onEdit: n, style: p }) {
+  const [m, d] = z(/* @__PURE__ */ new Set()), [h, i] = z(null), [y, $] = z(""), [S, v] = z(null);
+  T(W, []);
+  const N = (u, x) => {
+    const M = u.id ?? x;
+    d((D) => {
+      const b = o ? new Set(D) : /* @__PURE__ */ new Set();
+      return b.has(M) ? b.delete(M) : b.add(M), b;
+    }), v(x), c == null || c(u);
+  }, k = (u, x) => {
+    n == null || n({ ...u, value: y }, x), i(null);
+  };
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: "dhx dhx-scroll",
+      style: { height: l, overflowY: "auto", border: `1px solid ${e.border}`, borderRadius: e.r, background: e.surface, ...p },
+      tabIndex: 0,
+      onKeyDown: (u) => {
+        g && (u.key === "ArrowDown" && v((x) => Math.min((x ?? -1) + 1, r.length - 1)), u.key === "ArrowUp" && v((x) => Math.max((x ?? 1) - 1, 0)));
+      },
+      children: [
+        r.map((u, x) => {
+          const M = u.id ?? x, D = m.has(M), b = S === x;
+          return /* @__PURE__ */ t(
+            "div",
+            {
+              onClick: () => N(u, x),
+              onDoubleClick: () => s && (i(x), $(String(u.value || ""))),
+              style: { display: "flex", alignItems: "center", padding: "0 12px", height: 40, cursor: "pointer", fontSize: 13, borderBottom: `1px solid ${e.border}`, background: D ? e.primaryLt : b ? e.bg : e.surface, color: D ? e.primary : e.text, outline: b ? `2px solid ${e.primary}44` : "none", transition: "background .1s" },
+              children: h === x ? /* @__PURE__ */ t(
+                "input",
+                {
+                  autoFocus: !0,
+                  className: "dhx dhx-input",
+                  style: { height: 28, flex: 1 },
+                  value: y,
+                  onChange: (C) => $(C.target.value),
+                  onBlur: () => k(u, x),
+                  onKeyDown: (C) => {
+                    C.key === "Enter" && k(u, x), C.key === "Escape" && i(null);
+                  },
+                  onClick: (C) => C.stopPropagation()
+                }
+              ) : a ? /* @__PURE__ */ t("div", { dangerouslySetInnerHTML: { __html: a(u) }, style: { flex: 1 } }) : /* @__PURE__ */ t("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: String(u.value ?? "") })
+            },
+            String(M)
+          );
+        }),
+        r.length === 0 && /* @__PURE__ */ t("div", { style: { padding: 24, textAlign: "center", color: e.textMut }, children: "No items" })
+      ]
+    }
+  );
+}
+function Je({ data: r = [], template: a, itemsInRow: g = 3, gap: o = 12, multiselection: s = !1, onSelect: l, style: c }) {
+  const [n, p] = z(/* @__PURE__ */ new Set());
+  T(W, []);
+  const m = (d) => {
+    const h = d.id ?? String(d.title);
+    p((i) => {
+      const y = s ? new Set(i) : /* @__PURE__ */ new Set();
+      return y.has(h) ? y.delete(h) : y.add(h), y;
+    }), l == null || l(d);
+  };
+  return /* @__PURE__ */ t("div", { className: "dhx", style: { display: "grid", gridTemplateColumns: `repeat(${g}, 1fr)`, gap: o, padding: o, ...c }, children: r.map((d, h) => {
+    const i = d.id ?? h, y = n.has(i);
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        onClick: () => m(d),
+        style: { background: e.surface, border: `2px solid ${y ? e.primary : e.border}`, borderRadius: e.rMd, overflow: "hidden", cursor: "pointer", transition: "all .15s", boxShadow: y ? `0 0 0 3px ${e.primary}33` : e.shadow, transform: y ? "translateY(-2px)" : "none" },
+        onMouseEnter: ($) => {
+          $.currentTarget.style.boxShadow = e.shadowLg, $.currentTarget.style.transform = "translateY(-2px)";
+        },
+        onMouseLeave: ($) => {
+          $.currentTarget.style.boxShadow = y ? `0 0 0 3px ${e.primary}33` : e.shadow, $.currentTarget.style.transform = y ? "translateY(-2px)" : "none";
+        },
+        children: a ? /* @__PURE__ */ t("div", { dangerouslySetInnerHTML: { __html: a(d) } }) : /* @__PURE__ */ f("div", { style: { padding: 16 }, children: [
+          d.img && /* @__PURE__ */ t("img", { src: d.img, alt: d.title || "", style: { width: "100%", borderRadius: e.r, marginBottom: 8, display: "block" } }),
+          /* @__PURE__ */ t("div", { style: { fontWeight: 600, fontSize: 14, marginBottom: 4 }, children: d.title || d.value }),
+          d.subtitle && /* @__PURE__ */ t("div", { style: { fontSize: 12, color: e.textSec }, children: d.subtitle })
+        ] })
+      },
+      String(i)
+    );
+  }) });
+}
+function Ue({ data: r = [], checkbox: a = !1, editable: g = !1, onSelect: o, onCheck: s, style: l }) {
+  const [c, n] = z({}), [p, m] = z(null), [d, h] = z({}), [i, y] = z(null), [$, S] = z("");
+  T(W, []);
+  const v = (u) => n((x) => ({ ...x, [u]: !x[u] })), N = (u, x) => {
+    h((M) => ({ ...M, [u]: x })), s == null || s(u, x);
+  }, k = (u, x = 0) => {
+    var C;
+    const M = (((C = u.items) == null ? void 0 : C.length) ?? 0) > 0, D = c[u.id], b = p === u.id;
+    return /* @__PURE__ */ f("div", { children: [
+      /* @__PURE__ */ f(
+        "div",
+        {
+          onClick: () => {
+            m(u.id), o == null || o(u), M && v(u.id);
+          },
+          onDoubleClick: () => {
+            g && (y(u.id), S(u.value || ""));
+          },
+          style: { display: "flex", alignItems: "center", gap: 4, padding: `5px 8px 5px ${12 + x * 18}px`, cursor: "pointer", borderRadius: e.r, margin: "1px 4px", background: b ? e.primaryLt : "transparent", color: b ? e.primary : e.text, userSelect: "none", fontSize: 13 },
+          onMouseEnter: (w) => !b && (w.currentTarget.style.background = e.bg),
+          onMouseLeave: (w) => !b && (w.currentTarget.style.background = "transparent"),
+          children: [
+            /* @__PURE__ */ t("span", { style: { width: 16, textAlign: "center", fontSize: 11, color: e.textMut, flexShrink: 0 }, children: M ? D ? "▾" : "▸" : "" }),
+            /* @__PURE__ */ t("span", { style: { fontSize: 15, flexShrink: 0 }, children: M ? D ? "📂" : "📁" : "📄" }),
+            a && /* @__PURE__ */ t("input", { type: "checkbox", checked: !!d[u.id], onChange: (w) => {
+              w.stopPropagation(), N(u.id, w.target.checked);
+            }, style: { cursor: "pointer", accentColor: e.primary }, onClick: (w) => w.stopPropagation() }),
+            i === u.id ? /* @__PURE__ */ t("input", { autoFocus: !0, className: "dhx dhx-input", style: { height: 24, fontSize: 12, flex: 1 }, value: $, onChange: (w) => S(w.target.value), onBlur: () => y(null), onKeyDown: (w) => w.key === "Enter" && y(null), onClick: (w) => w.stopPropagation() }) : /* @__PURE__ */ t("span", { style: { flex: 1 }, children: u.value }),
+            u.count !== void 0 && /* @__PURE__ */ f("span", { style: { fontSize: 11, color: e.textMut }, children: [
+              "(",
+              u.count,
+              ")"
+            ] })
+          ]
+        }
+      ),
+      M && D && /* @__PURE__ */ t("div", { children: u.items.map((w) => k(w, x + 1)) })
+    ] }, u.id);
+  };
+  return /* @__PURE__ */ t("div", { className: "dhx dhx-scroll", style: { overflowY: "auto", ...l }, children: r.map((u) => k(u)) });
+}
+function Qe({ total: r, pageSize: a = 10, page: g, onChange: o, style: s }) {
+  const [l, c] = z(g || 1), n = Math.ceil(r / a);
+  T(W, []);
+  const p = (d) => {
+    const h = Math.min(Math.max(1, d), n);
+    c(h), o == null || o(h);
+  }, m = F(() => {
+    const d = [];
+    for (let i = Math.max(1, l - 2); i <= Math.min(n, l + 2); i++) d.push(i);
+    return d[0] > 1 && (d[0] > 2 && d.unshift("..."), d.unshift(1)), d[d.length - 1] < n && (d[d.length - 1] < n - 1 && d.push("..."), d.push(n)), d;
+  }, [l, n]);
+  return /* @__PURE__ */ f("div", { className: "dhx", style: { display: "flex", alignItems: "center", gap: 4, padding: "8px 12px", ...s }, children: [
+    /* @__PURE__ */ f("span", { style: { fontSize: 12, color: e.textSec, marginRight: 8 }, children: [
+      (l - 1) * a + 1,
+      "–",
+      Math.min(l * a, r),
+      " of ",
+      r
+    ] }),
+    [["«", 1], ["‹", l - 1]].map(([d, h]) => /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-ghost", style: { height: 30, padding: "0 8px", fontSize: 14 }, disabled: l === 1, onClick: () => p(h), children: d }, d)),
+    m.map((d, h) => /* @__PURE__ */ t("button", { onClick: () => typeof d == "number" && p(d), className: `dhx dhx-btn ${d === l ? "dhx-btn-primary" : "dhx-btn-ghost"}`, style: { height: 30, minWidth: 30, padding: "0 8px", fontSize: 13 }, disabled: d === "...", children: d }, h)),
+    [["›", l + 1], ["»", n]].map(([d, h]) => /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-ghost", style: { height: 30, padding: "0 8px", fontSize: 14 }, disabled: l === n, onClick: () => p(h), children: d }, d))
+  ] });
+}
+function Ze({ config: r = {}, defaultValues: a = {}, onSubmit: g, style: o }) {
+  const [s, l] = z(a), [c, n] = z({});
+  T(W, []);
+  const p = (i, y) => {
+    l(($) => ({ ...$, [i]: y })), n(($) => ({ ...$, [i]: null }));
+  }, m = () => {
+    const i = {};
+    return (r.rows || []).flat().forEach((y) => {
+      y && typeof y == "object" && "name" in y && y.required && !s[y.name] && (i[y.name] = `${y.label || y.name} is required`);
+    }), n(i), Object.keys(i).length === 0;
+  }, d = (i) => {
+    const y = s[i.name] ?? i.value ?? "", $ = c[i.name];
+    if (i.type === "fieldset") return /* @__PURE__ */ f("fieldset", { style: { border: `1px solid ${e.border}`, borderRadius: e.r, padding: "12px 16px", marginBottom: 14 }, children: [
+      /* @__PURE__ */ t("legend", { style: { fontSize: 12, fontWeight: 700, color: e.textSec, padding: "0 6px" }, children: i.label }),
+      (i.rows || []).map((k) => d(k))
+    ] }, i.name);
+    const S = { key: i.name, className: "dhx-form-group" }, v = i.label && /* @__PURE__ */ f("label", { className: "dhx dhx-label", style: { display: "flex", gap: 4 }, children: [
+      i.label,
+      i.required && /* @__PURE__ */ t("span", { style: { color: e.danger }, children: "*" })
+    ] }), N = $ && /* @__PURE__ */ t("div", { style: { fontSize: 11, color: e.danger, marginTop: 3 }, children: $ });
+    return !i.type || i.type === "input" ? /* @__PURE__ */ f("div", { ...S, children: [
+      v,
+      /* @__PURE__ */ f("div", { className: "dhx-input-wrap", children: [
+        i.icon && /* @__PURE__ */ t("span", { className: "dhx-input-icon", children: i.icon }),
+        /* @__PURE__ */ t("input", { className: `dhx dhx-input${i.icon ? " dhx-input--with-icon" : ""}`, style: { borderColor: $ ? e.danger : void 0 }, type: i.inputType || "text", placeholder: i.placeholder, value: y, onChange: (k) => p(i.name, k.target.value), disabled: i.disabled })
+      ] }),
+      i.helpMessage && /* @__PURE__ */ f("div", { style: { fontSize: 11, color: e.textMut, marginTop: 3 }, children: [
+        "ⓘ ",
+        i.helpMessage
+      ] }),
+      N
+    ] }) : i.type === "textarea" ? /* @__PURE__ */ f("div", { ...S, children: [
+      v,
+      /* @__PURE__ */ t("textarea", { className: "dhx dhx-input", style: { height: 80, resize: "vertical", padding: "8px 10px" }, placeholder: i.placeholder, value: y, onChange: (k) => p(i.name, k.target.value) }),
+      N
+    ] }) : i.type === "select" ? /* @__PURE__ */ f("div", { ...S, children: [
+      v,
+      /* @__PURE__ */ f("select", { className: "dhx dhx-input", value: y, onChange: (k) => p(i.name, k.target.value), style: { cursor: "pointer" }, children: [
+        /* @__PURE__ */ t("option", { value: "", children: "— Select —" }),
+        (i.options || []).map((k) => /* @__PURE__ */ t("option", { value: k.value, children: k.label || k.value }, k.value))
+      ] }),
+      N
+    ] }) : i.type === "checkbox" ? /* @__PURE__ */ t("div", { ...S, children: /* @__PURE__ */ f("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }, children: [
+      /* @__PURE__ */ t("input", { type: "checkbox", checked: !!y, onChange: (k) => p(i.name, k.target.checked), style: { width: 16, height: 16, accentColor: e.primary, cursor: "pointer" } }),
+      /* @__PURE__ */ t("span", { style: { fontSize: 13 }, children: i.label })
+    ] }) }) : i.type === "radio" ? /* @__PURE__ */ f("div", { ...S, children: [
+      v,
+      /* @__PURE__ */ t("div", { style: { display: "flex", gap: 16, flexWrap: "wrap" }, children: (i.options || []).map((k) => /* @__PURE__ */ f("label", { style: { display: "flex", alignItems: "center", gap: 6, cursor: "pointer", fontSize: 13 }, children: [
+        /* @__PURE__ */ t("input", { type: "radio", name: i.name, value: k.value, checked: y === k.value, onChange: () => p(i.name, k.value), style: { accentColor: e.primary, cursor: "pointer" } }),
+        k.label || k.value
+      ] }, k.value)) })
+    ] }) : i.type === "slider" ? /* @__PURE__ */ t("div", { ...S, children: /* @__PURE__ */ t(Ce, { label: i.label, min: i.min, max: i.max, step: i.step, value: y || i.min, range: i.range, onChange: (k) => p(i.name, k) }) }) : i.type === "combo" ? /* @__PURE__ */ f("div", { ...S, children: [
+      /* @__PURE__ */ t(Ne, { label: i.label, data: i.data || [], multiselection: i.multiselection, placeholder: i.placeholder || "Select...", value: y || (i.multiselection ? [] : null), onChange: (k) => p(i.name, k) }),
+      N
+    ] }) : i.type === "datepicker" ? /* @__PURE__ */ f("div", { ...S, children: [
+      v,
+      /* @__PURE__ */ t("input", { type: "date", className: "dhx dhx-input", value: y, onChange: (k) => p(i.name, k.target.value) }),
+      N
+    ] }) : i.type === "timepicker" ? /* @__PURE__ */ f("div", { ...S, children: [
+      v,
+      /* @__PURE__ */ t("input", { type: "time", className: "dhx dhx-input", value: y, onChange: (k) => p(i.name, k.target.value) })
+    ] }) : i.type === "spacer" ? /* @__PURE__ */ t("div", { style: { height: i.height || 16 } }, i.name) : null;
+  }, h = (i) => i.map(
+    (y, $) => Array.isArray(y) ? /* @__PURE__ */ t("div", { style: { display: "flex", gap: 12, alignItems: "flex-start" }, children: y.map(d) }, $) : d(y)
+  );
+  return /* @__PURE__ */ f("div", { className: "dhx", style: { padding: r.padding || 0, width: r.width || "100%", ...o }, children: [
+    h(r.rows || []),
+    (r.buttons || g) && /* @__PURE__ */ f("div", { style: { display: "flex", gap: 8, justifyContent: r.buttonAlign || "flex-start", marginTop: 8 }, children: [
+      /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-primary", onClick: () => m() && (g == null ? void 0 : g(s)), children: r.submitText || "Submit" }),
+      r.resetButton !== !1 && /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-secondary", onClick: () => {
+        l(a), n({});
+      }, children: r.resetText || "Reset" })
+    ] })
+  ] });
+}
+function et({ items: r = [], onAction: a, style: g }) {
+  T(W, []);
+  const o = (s, l) => {
+    var p, m;
+    if ("type" in s && (s.type === "separator" || s.type === "sep"))
+      return /* @__PURE__ */ t("div", { style: { width: 1, background: e.border, margin: "8px 4px", alignSelf: "stretch" } }, l);
+    if ("type" in s && s.type === "input")
+      return /* @__PURE__ */ f("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "4px 6px", gap: 4 }, children: [
+        s.label && /* @__PURE__ */ t("span", { style: { fontSize: 10, color: e.textMut }, children: s.label }),
+        /* @__PURE__ */ t("input", { className: "dhx dhx-input", style: { width: s.width || 110, height: 26, fontSize: 12 }, placeholder: s.placeholder, defaultValue: s.value, onChange: (d) => {
+          var h;
+          return (h = s.onChange) == null ? void 0 : h.call(s, d.target.value);
+        } })
+      ] }, l);
+    if ("type" in s && s.type === "block") {
+      const d = s;
+      return /* @__PURE__ */ f("div", { style: { display: "flex", flexDirection: d.direction === "col" ? "column" : "row", alignItems: "center", gap: 4, padding: "4px 8px", borderRight: `1px solid ${e.border}`, minHeight: 64 }, children: [
+        /* @__PURE__ */ t("div", { style: { display: "flex", gap: 2 }, children: (p = d.items) == null ? void 0 : p.map((h, i) => o(h, i)) }),
+        d.label && /* @__PURE__ */ t("span", { style: { fontSize: 10, color: e.textMut, marginTop: 2 }, children: d.label })
+      ] }, l);
+    }
+    if ("type" in s && s.type === "selectButton") {
+      const d = s;
+      return /* @__PURE__ */ t("select", { className: "dhx dhx-input", style: { height: 28, fontSize: 12, cursor: "pointer", margin: 2 }, defaultValue: d.value, onChange: (h) => {
+        var i;
+        return (i = d.onChange) == null ? void 0 : i.call(d, h.target.value);
+      }, children: (m = d.items) == null ? void 0 : m.map((h) => /* @__PURE__ */ t("option", { value: h.value, children: h.value }, h.value)) }, l);
+    }
+    const c = s, n = c.active;
+    return /* @__PURE__ */ f(
+      "button",
+      {
+        title: c.tooltip,
+        className: `dhx dhx-btn ${n ? "dhx-btn-primary" : "dhx-btn-ghost"}`,
+        style: { flexDirection: "column", minHeight: 48, padding: "4px 8px", gap: 4, fontSize: 12 },
+        disabled: c.disabled,
+        onClick: () => {
+          var d;
+          (d = c.onClick) == null || d.call(c, c), c.id && (a == null || a(c.id, c));
+        },
+        children: [
+          c.icon && /* @__PURE__ */ t("span", { style: { fontSize: c.size === "large" ? 24 : 18 }, children: c.icon }),
+          c.text && /* @__PURE__ */ t("span", { style: { fontSize: 10, maxWidth: 60, textAlign: "center", lineHeight: 1.2, whiteSpace: "normal" }, children: c.text })
+        ]
+      },
+      l
+    );
+  };
+  return /* @__PURE__ */ t("div", { className: "dhx", style: { display: "flex", alignItems: "stretch", background: e.bg, borderBottom: `1px solid ${e.border}`, padding: "4px 0", overflowX: "auto", gap: 0, ...g }, children: r.map(o) });
+}
+function tt({ logo: r, items: a = [], vertical: g = !1, style: o }) {
+  const [s, l] = z(null), c = B(null);
+  T(W, []), Y(c, H(() => l(null), []));
+  const n = (p, m) => {
+    var d;
+    return p.type === "separator" ? /* @__PURE__ */ t("div", { style: { [g ? "height" : "width"]: 1, background: "rgba(255,255,255,.25)", margin: g ? "4px 8px" : "0 6px", alignSelf: "stretch" } }, m) : p.type === "spacer" ? /* @__PURE__ */ t("div", { style: { flex: 1 } }, m) : p.type === "input" ? /* @__PURE__ */ t("input", { className: "dhx dhx-input", style: { width: p.width || 200, height: 28, margin: "0 4px" }, placeholder: p.placeholder }, m) : p.type === "menuItem" && ((d = p.items) != null && d.length) ? /* @__PURE__ */ f("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ f("button", { className: "dhx dhx-btn dhx-btn-ghost", style: { height: 36, color: "#fff" }, onClick: () => l(s === m ? null : m), children: [
+        p.icon && /* @__PURE__ */ t("span", { children: p.icon }),
+        p.value,
+        " ",
+        /* @__PURE__ */ t("span", { style: { fontSize: 9 }, children: "▼" })
+      ] }),
+      s === m && /* @__PURE__ */ t(O, { items: p.items, onSelect: () => l(null), style: { top: "100%" } })
+    ] }, m) : /* @__PURE__ */ f("button", { className: "dhx dhx-btn dhx-btn-ghost", style: { height: 36, gap: 6, color: "#fff" }, onClick: () => {
+      var h;
+      return (h = p.onClick) == null ? void 0 : h.call(p);
+    }, children: [
+      p.icon && /* @__PURE__ */ t("span", { style: { fontSize: 16 }, children: p.icon }),
+      p.value && /* @__PURE__ */ t("span", { style: { fontSize: 13 }, children: p.value })
+    ] }, m);
+  };
+  return /* @__PURE__ */ f("nav", { ref: c, className: "dhx", style: { display: "flex", flexDirection: g ? "column" : "row", alignItems: g ? "stretch" : "center", background: e.primary, padding: g ? "12px 0" : "0 12px", minHeight: g ? void 0 : 48, gap: 2, ...o }, children: [
+    r && /* @__PURE__ */ t("div", { style: { color: "#fff", fontWeight: 800, fontSize: 16, padding: g ? "8px 16px" : "0 12px 0 4px", borderRight: g ? "none" : "1px solid rgba(255,255,255,.25)", marginRight: g ? 0 : 8 }, children: r }),
+    a.map(n)
+  ] });
+}
+export {
+  We as Button,
+  Ye as Calendar,
+  je as Chart,
+  Pe as Colorpicker,
+  Ne as Combobox,
+  Ke as ContextMenu,
+  Je as DataView,
+  Ze as Form,
+  Be as Grid,
+  Se as Layout,
+  Ge as List,
+  Fe as Menu,
+  O as MenuDropdown,
+  J as MessageContext,
+  Ve as MessageProvider,
+  tt as Navbar,
+  Qe as Pagination,
+  _e as Popup,
+  et as Ribbon,
+  Ae as Sidebar,
+  Ce as Slider,
+  He as Tabbar,
+  Oe as Timepicker,
+  Ee as Toolbar,
+  Ue as Tree,
+  Xe as Window,
+  e as tokens,
+  Y as useClickOutside,
+  ze as useDrag,
+  qe as useMessage
+};
+//# sourceMappingURL=dhx-react-suite.js.map