@nice2dev/ui-3d 1.1.0 → 1.1.1

package/dist/esm/ui/dist/NiceTabs-DzLHzwuA.js

@@ -0,0 +1,1630 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import _e, { forwardRef, useCallback, useMemo, useState, useRef, useLayoutEffect, useEffect } from 'react';
+import { h as rl, c as xs, d as ks, W as me, b as Is, i as Ms, j as vl, k as zr, D as As, l as _d, f as Bs, C as yl } from './core-Da43q-pO.js';
+import ze from 'react-dom';
+
+const Je = forwardRef(
+  ({
+    label: l,
+    helperText: h,
+    error: t,
+    required: d,
+    disabled: i,
+    readOnly: n,
+    size: a = "md",
+    name: y,
+    id: u,
+    className: o,
+    style: f,
+    accessMode: D,
+    displayStyle: z,
+    variant: m,
+    value: w,
+    defaultValue: R,
+    onChange: p,
+    onBlur: J,
+    onKeyDown: E,
+    placeholder: $,
+    type: L = "text",
+    maxLength: b,
+    prefix: F,
+    suffix: T,
+    clearable: x,
+    autoFocus: M,
+    submitOnEnter: U,
+    onSubmit: V,
+    showKeyboardHints: I,
+    labelPlacement: j,
+    errorPlacement: ae,
+    loading: ue,
+    labelWidth: ne,
+    controlWidth: X,
+    displayMode: P,
+    ...k
+  }, _) => {
+    const q = rl(D, u);
+    if (q === "hidden")
+      return null;
+    q === "disabled" && (i = true), q === "readOnly" && (n = true);
+    const { t: S } = me(), A = Is(u), G = xs("input", z), se = ks("input", z), ve = m === "filled" ? "filled" : m === "underlined" ? "underlined" : "", O = useCallback(() => p?.(""), [p]), Y = Ms({ enabled: P, readOnly: n, disabled: i }), re = vl({
+      enabled: U,
+      onSubmit: V
+    }), ie = useCallback(
+      (g) => {
+        re(g), E?.(g);
+      },
+      [re, E]
+    ), r = useMemo(() => {
+      const g = [];
+      return U && g.push({ key: "Enter", description: S("shortcuts.submit", "Submit") }), x && g.push({ key: "Escape", description: S("shortcuts.clear", "Clear") }), g;
+    }, [U, x, S]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `nice-field nice-field--${a} ${j === "left" ? "nice-field--label-left" : ""} ${j === "inside" ? "nice-field--label-inside" : ""} ${ue ? "nice-field--loading" : ""} ${o || ""}`,
+        style: {
+          ...f,
+          ...ne != null && {
+            "--nice-field-label-width": typeof ne == "number" ? `${ne}px` : ne
+          },
+          ...X != null && {
+            "--nice-field-control-width": typeof X == "number" ? `${X}px` : X
+          }
+        },
+        "aria-busy": ue || void 0,
+        "data-floating": j === "inside" && w ? "true" : void 0,
+        children: [
+          l && j !== "inside" && /* @__PURE__ */ jsxs(
+            "label",
+            {
+              htmlFor: A,
+              className: `nice-field__label ${d ? "nice-field__label--required" : ""}`,
+              children: [
+                l,
+                I && r.length > 0 && /* @__PURE__ */ jsx(zr, { shortcuts: r, size: "sm" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "nice-field__control", children: [
+            Y.isDisplay ? /* @__PURE__ */ jsx(
+              As,
+              {
+                value: w ?? R ?? "",
+                placeholder: $,
+                disabled: i,
+                readOnly: n,
+                onActivate: Y.enterEdit,
+                ariaLabel: l
+              }
+            ) : /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `nice-input nice-input--${a} nice-input--ds-${ve || se} ${t ? "nice-input--error" : ""} ${i ? "nice-input--disabled" : ""} ${n ? "nice-input--readonly" : ""}`,
+                style: m ? void 0 : G,
+                children: [
+                  F && /* @__PURE__ */ jsx("span", { className: "nice-input__icon", children: F }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: (g) => {
+                        typeof _ == "function" ? _(g) : _ && (_.current = g), Y.autoFocusRef(g);
+                      },
+                      id: A,
+                      className: "nice-input__native",
+                      type: L,
+                      name: y,
+                      value: w,
+                      defaultValue: R,
+                      placeholder: $,
+                      disabled: i || ue,
+                      readOnly: n,
+                      maxLength: b,
+                      autoFocus: M,
+                      "aria-invalid": !!t,
+                      "aria-describedby": t ? `${A}-error` : h ? `${A}-helper` : void 0,
+                      onChange: (g) => p?.(g.target.value),
+                      onBlur: (g) => {
+                        P && Y.exitEdit(), J?.(g);
+                      },
+                      onKeyDown: ie,
+                      ...k
+                    }
+                  ),
+                  x && w && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "nice-input__clear",
+                      onClick: O,
+                      "aria-label": S("controls.clear", "Clear"),
+                      children: "✕"
+                    }
+                  ),
+                  T && /* @__PURE__ */ jsx("span", { className: "nice-input__icon", children: T }),
+                  l && j === "inside" && /* @__PURE__ */ jsx(
+                    "label",
+                    {
+                      htmlFor: A,
+                      className: `nice-input__floating-label ${d ? "nice-input__floating-label--required" : ""}`,
+                      children: l
+                    }
+                  )
+                ]
+              }
+            ),
+            ue && /* @__PURE__ */ jsx("span", { className: "nice-field__spinner", children: /* @__PURE__ */ jsx("span", { className: "nice-spinner nice-spinner--sm" }) }),
+            ae === "right" && t && /* @__PURE__ */ jsx("div", { id: `${A}-error`, className: "nice-field__error", role: "alert", children: t }),
+            ae === "right" && !t && h && /* @__PURE__ */ jsx("div", { id: `${A}-helper`, className: "nice-field__helper", children: h })
+          ] }),
+          ae !== "right" && t && /* @__PURE__ */ jsx("div", { id: `${A}-error`, className: "nice-field__error", role: "alert", children: t }),
+          ae !== "right" && !t && h && /* @__PURE__ */ jsx("div", { id: `${A}-helper`, className: "nice-field__helper", children: h })
+        ]
+      }
+    );
+  }
+);
+Je.displayName = "NiceTextInput";
+const Qe = forwardRef(
+  ({
+    label: l,
+    helperText: h,
+    error: t,
+    required: d,
+    disabled: i,
+    readOnly: n,
+    size: a = "md",
+    name: y,
+    id: u,
+    className: o,
+    style: f,
+    accessMode: D,
+    displayStyle: z,
+    value: m,
+    onChange: w,
+    onBlur: R,
+    onKeyDown: p,
+    placeholder: J,
+    min: E,
+    max: $,
+    step: L = 1,
+    precision: b,
+    prefix: F,
+    prefixType: T = "label",
+    prefixOptions: x,
+    prefixValue: M,
+    onPrefixChange: U,
+    suffix: V,
+    showStepper: I = true,
+    submitOnEnter: j,
+    onSubmit: ae,
+    showKeyboardHints: ue,
+    labelPlacement: ne,
+    errorPlacement: X,
+    loading: P,
+    labelWidth: k,
+    controlWidth: _,
+    formatPreset: q,
+    format: S,
+    suffixType: A = "label",
+    suffixOptions: G,
+    suffixValue: se,
+    onSuffixChange: ve,
+    displayMode: O
+  }, Y) => {
+    const re = rl(D, u);
+    if (re === "hidden")
+      return null;
+    re === "disabled" && (i = true), re === "readOnly" && (n = true);
+    const { t: ie } = me(), r = Is(u), g = xs("input", z), K = ks("input", z), [C, Q] = useState(false), [Z, ge] = useState(null), be = Ms({ enabled: O, readOnly: n, disabled: i }), pe = useMemo(() => {
+      let c = 3;
+      return $ != null && (c = String(Math.abs(Math.floor($))).length), E != null && E < 0 && (c += 1), b && (c += b + 1), Math.max(3, c) + 1;
+    }, [$, E, b]), Me = useCallback(
+      (c) => {
+        if (S)
+          return S(c);
+        if (!q)
+          return b != null ? c.toFixed(b) : String(c);
+        switch (q) {
+          case "integer":
+            return Math.round(c).toLocaleString();
+          case "decimal":
+            return c.toLocaleString(void 0, {
+              minimumFractionDigits: b ?? 2,
+              maximumFractionDigits: b ?? 2
+            });
+          case "money":
+            return c.toLocaleString(void 0, {
+              minimumFractionDigits: b ?? 2,
+              maximumFractionDigits: b ?? 2,
+              useGrouping: true
+            });
+          case "percent":
+            return (c * 100).toLocaleString(void 0, {
+              minimumFractionDigits: b ?? 0,
+              maximumFractionDigits: b ?? 2
+            }) + "%";
+          default:
+            return String(c);
+        }
+      },
+      [S, q, b]
+    ), Ce = useMemo(() => C && Z !== null ? Z : m == null ? "" : C ? b != null ? m.toFixed(b) : String(m) : Me(m), [m, C, Z, Me, b]), he = m != null && m < 0, te = !!(F || T === "select" && x && x.length > 0), W = he && te && !C, He = W ? Ce.replace(/^[-−]/, "") : Ce, fe = useCallback(
+      (c) => {
+        let N = c;
+        return E !== void 0 && (N = Math.max(E, N)), $ !== void 0 && (N = Math.min($, N)), b !== void 0 && (N = parseFloat(N.toFixed(b))), N;
+      },
+      [E, $, b]
+    ), Te = useCallback(
+      (c) => {
+        const N = c.target.value;
+        if (ge(N), N === "" || N === "-" || N === "." || N === "-.") {
+          N === "" && w?.(null);
+          return;
+        }
+        const le = parseFloat(N);
+        if (!isNaN(le)) {
+          let _e = le;
+          E !== void 0 && (_e = Math.max(E, _e)), $ !== void 0 && (_e = Math.min($, _e)), w?.(_e);
+        }
+      },
+      [w, E, $]
+    ), Ne = useCallback(() => {
+      const c = $e.current, N = fe((c ?? 0) + L);
+      $e.current = N, w?.(N);
+    }, [L, w, fe]), De = useCallback(() => {
+      const c = $e.current, N = fe((c ?? 0) - L);
+      $e.current = N, w?.(N);
+    }, [L, w, fe]), $e = useRef(m);
+    $e.current = m;
+    const s = useRef(null), H = useCallback(() => {
+      s.current && (clearTimeout(s.current), s.current = null);
+    }, []), B = useCallback(
+      (c) => {
+        H();
+        let N = 300;
+        const le = () => {
+          c(), N = Math.max(30, N * 0.82), s.current = setTimeout(le, N);
+        };
+        s.current = setTimeout(le, 400);
+      },
+      [H]
+    ), me$1 = vl({
+      enabled: j,
+      onSubmit: ae
+    }), Se = useCallback(
+      (c) => {
+        me$1(c), c.key === "ArrowUp" ? (c.preventDefault(), Ne()) : c.key === "ArrowDown" && (c.preventDefault(), De()), p?.(c);
+      },
+      [me$1, p, Ne, De]
+    ), ce = useMemo(() => {
+      const c = [];
+      return j && c.push(yl.submit), I && (c.push({ key: "ArrowUp", description: ie("shortcuts.increment", "Increase value") }), c.push({ key: "ArrowDown", description: ie("shortcuts.decrement", "Decrease value") })), c;
+    }, [j, I, ie]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `nice-field nice-field--${a} ${ne === "left" ? "nice-field--label-left" : ""} ${P ? "nice-field--loading" : ""} ${o || ""}`,
+        style: {
+          ...f,
+          ...k != null && {
+            "--nice-field-label-width": typeof k == "number" ? `${k}px` : k
+          },
+          ..._ != null && {
+            "--nice-field-control-width": typeof _ == "number" ? `${_}px` : _
+          }
+        },
+        "aria-busy": P || void 0,
+        children: [
+          l && /* @__PURE__ */ jsxs(
+            "label",
+            {
+              htmlFor: r,
+              className: `nice-field__label ${d ? "nice-field__label--required" : ""}`,
+              children: [
+                l,
+                ue && ce.length > 0 && /* @__PURE__ */ jsx(zr, { shortcuts: ce, size: "sm" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "nice-field__control", children: [
+            be.isDisplay ? /* @__PURE__ */ jsx(
+              As,
+              {
+                value: m == null ? "" : F ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  F,
+                  Ce
+                ] }) : Ce,
+                placeholder: J,
+                disabled: i,
+                readOnly: n,
+                onActivate: be.enterEdit,
+                ariaLabel: l
+              }
+            ) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `nice-input nice-input--number nice-input--${a} nice-input--ds-${K} ${t ? "nice-input--error" : ""} ${i ? "nice-input--disabled" : ""} ${n ? "nice-input--readonly" : ""}`,
+                style: g,
+                children: [
+                  I && !n && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "nice-input__clear nice-input__minus",
+                      onClick: De,
+                      onMouseDown: () => B(De),
+                      onMouseUp: H,
+                      onMouseLeave: H,
+                      disabled: i,
+                      "aria-label": ie("controls.decrement", "Decrement"),
+                      children: "−"
+                    }
+                  ),
+                  T === "select" && x && x.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    W && /* @__PURE__ */ jsx("span", { className: "nice-input__sign", children: "−" }),
+                    /* @__PURE__ */ jsx(
+                      "select",
+                      {
+                        className: "nice-input__suffix-select nice-input__icon--prefix",
+                        value: M ?? x[0]?.value,
+                        disabled: i,
+                        onChange: (c) => {
+                          const N = c.target.value, le = x.find(
+                            (ke) => ke.value === (M ?? x[0]?.value)
+                          ), _e = x.find((ke) => ke.value === N);
+                          U?.(N, le?.weight, _e?.weight);
+                        },
+                        children: x.map((c) => /* @__PURE__ */ jsx("option", { value: c.value, children: c.label }, c.value))
+                      }
+                    )
+                  ] }) : F ? /* @__PURE__ */ jsxs("span", { className: "nice-input__icon nice-input__icon--prefix", children: [
+                    W && /* @__PURE__ */ jsx("span", { className: "nice-input__sign", children: "−" }),
+                    F
+                  ] }) : null,
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: (c) => {
+                        typeof Y == "function" ? Y(c) : Y && (Y.current = c), be.autoFocusRef(c);
+                      },
+                      id: r,
+                      className: "nice-input__native",
+                      type: !C && (S || q) ? "text" : "number",
+                      name: y,
+                      value: He,
+                      placeholder: J,
+                      min: E,
+                      max: $,
+                      step: L,
+                      disabled: i || P,
+                      readOnly: n,
+                      "aria-invalid": !!t,
+                      onChange: Te,
+                      onFocus: (c) => {
+                        Q(true), ge(null), c.target.select();
+                      },
+                      onBlur: (c) => {
+                        if (Q(false), ge(null), m != null && b !== void 0) {
+                          const N = parseFloat(m.toFixed(b));
+                          N !== m && w?.(N);
+                        }
+                        O && be.exitEdit(), R?.(c);
+                      },
+                      onKeyDown: Se,
+                      style: { width: `${pe}ch` }
+                    }
+                  ),
+                  A === "select" && G && G.length > 0 ? /* @__PURE__ */ jsx(
+                    "select",
+                    {
+                      className: "nice-input__suffix-select nice-input__icon--suffix",
+                      value: se ?? G[0]?.value,
+                      disabled: i,
+                      onChange: (c) => {
+                        const N = c.target.value, le = G.find(
+                          (ke) => ke.value === (se ?? G[0]?.value)
+                        ), _e = G.find((ke) => ke.value === N);
+                        ve?.(N, le?.weight, _e?.weight);
+                      },
+                      children: G.map((c) => /* @__PURE__ */ jsx("option", { value: c.value, children: c.label }, c.value))
+                    }
+                  ) : V ? /* @__PURE__ */ jsx("span", { className: "nice-input__icon nice-input__icon--suffix", children: V }) : null,
+                  I && !n && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "nice-input__clear nice-input__plus",
+                      onClick: Ne,
+                      onMouseDown: () => B(Ne),
+                      onMouseUp: H,
+                      onMouseLeave: H,
+                      disabled: i,
+                      "aria-label": ie("controls.increment", "Increment"),
+                      children: "+"
+                    }
+                  )
+                ]
+              }
+            ) }),
+            P && /* @__PURE__ */ jsx("span", { className: "nice-field__spinner", children: /* @__PURE__ */ jsx("span", { className: "nice-spinner nice-spinner--sm" }) }),
+            X === "right" && t && /* @__PURE__ */ jsx("div", { className: "nice-field__error", role: "alert", children: t }),
+            X === "right" && !t && h && /* @__PURE__ */ jsx("div", { className: "nice-field__helper", children: h })
+          ] }),
+          X !== "right" && t && /* @__PURE__ */ jsx("div", { className: "nice-field__error", role: "alert", children: t }),
+          X !== "right" && !t && h && /* @__PURE__ */ jsx("div", { className: "nice-field__helper", children: h })
+        ]
+      }
+    );
+  }
+);
+Qe.displayName = "NiceNumberInput";
+const Ze = forwardRef(
+  ({
+    label: l,
+    helperText: h,
+    error: t,
+    required: d,
+    disabled: i,
+    size: n = "md",
+    name: a,
+    id: y,
+    className: u,
+    style: o,
+    accessMode: f,
+    displayStyle: D,
+    options: z,
+    value: m,
+    onChange: w,
+    placeholder: R,
+    multiple: p = false,
+    searchable: J = false,
+    clearable: E = false,
+    emptyText: $,
+    maxHeight: L = 240,
+    optionsSource: b,
+    valueField: F,
+    labelField: T,
+    virtualScroll: x,
+    optionHeight: M = 36,
+    onSearch: U,
+    loading: V,
+    renderOption: I,
+    multipleAutosize: j = false,
+    showKeyboardHints: ae,
+    labelPlacement: ue,
+    errorPlacement: ne,
+    labelWidth: X,
+    controlWidth: P,
+    displayMode: k
+  }, _) => {
+    const q = rl(f, y);
+    if (q === "hidden")
+      return null;
+    (q === "disabled" || q === "readOnly") && (i = true);
+    const { t: S } = me(), A = xs("input", D), G = ks("input", D), se = Is(y), ve = Ms({ enabled: k, disabled: i }), [O, Y] = useState(false), [re, ie] = useState(""), [r, g] = useState(-1), [K, C] = useState(0), Q = useRef(null), Z = useRef(null), [ge, be] = useState(null);
+    useLayoutEffect(() => {
+      !V && Z.current && be(Z.current.offsetWidth);
+    }, [V, m, D]);
+    const [pe, Me] = useState(null);
+    useLayoutEffect(() => {
+      p && !j && Z.current && pe == null && Me(Z.current.offsetWidth);
+    }, [p, j, pe]);
+    const Ce = _d(
+      b ?? null,
+      F ?? b?.keyField ?? "id",
+      T ?? "name"
+    ), he = b ? Ce.options : (z ?? []).map(
+      (s) => typeof s == "string" ? { value: s, label: s } : s
+    );
+    Bs(Q, () => {
+      Y(false), ie("");
+    });
+    const te = useMemo(() => m ? Array.isArray(m) ? m : [m] : [], [m]), W = useMemo(() => {
+      if (!re && !U || U)
+        return he;
+      const s = re.toLowerCase();
+      return he.filter(
+        (H) => H.label.toLowerCase().includes(s) || String(H.value).toLowerCase().includes(s)
+      );
+    }, [he, re, U]), He = useMemo(() => {
+      const s = /* @__PURE__ */ new Map();
+      for (const H of W) {
+        const B = H.group || "";
+        s.has(B) || s.set(B, []), s.get(B).push(H);
+      }
+      return s;
+    }, [W]), fe = useCallback(
+      (s) => {
+        if (p) {
+          const H = te.includes(s) ? te.filter((B) => B !== s) : [...te, s];
+          w?.(H);
+        } else
+          w?.(s), Y(false), ie("");
+      },
+      [p, te, w]
+    ), Te = useCallback(
+      (s) => {
+        if (s.key === "Escape") {
+          Y(false), ie("");
+          return;
+        }
+        if (s.key === "Enter" || s.key === " ") {
+          if (!O) {
+            Y(true), s.preventDefault();
+            return;
+          }
+          r >= 0 && W[r] && (fe(W[r].value), s.preventDefault());
+          return;
+        }
+        s.key === "ArrowDown" && (s.preventDefault(), g((H) => Math.min(H + 1, W.length - 1))), s.key === "ArrowUp" && (s.preventDefault(), g((H) => Math.max(H - 1, 0)));
+      },
+      [O, r, W, fe]
+    ), Ne = useMemo(() => te.length === 0 ? null : p ? te.map((s) => he.find((H) => H.value === s)?.label || s).join(", ") : he.find((s) => s.value === te[0])?.label || te[0], [te, he, p]), De = useCallback(
+      (s) => {
+        s.stopPropagation(), w?.(p ? [] : "");
+      },
+      [w, p]
+    ), $e = useMemo(
+      () => [
+        { key: "Enter", description: S("shortcuts.select", "Select") },
+        { key: "Space", description: S("shortcuts.openDropdown", "Open dropdown") },
+        yl.moveUp,
+        yl.moveDown,
+        yl.cancel
+      ],
+      [S]
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `nice-field ${P == null ? "nice-field--select-auto" : ""} nice-field--${n} ${ue === "left" ? "nice-field--label-left" : ""} ${V ? "nice-field--loading" : ""} ${u || ""}`,
+        style: {
+          ...o,
+          ...X != null && {
+            "--nice-field-label-width": typeof X == "number" ? `${X}px` : X
+          },
+          ...P != null && {
+            "--nice-field-control-width": typeof P == "number" ? `${P}px` : P
+          },
+          ...V && ge != null && { "--nice-select-locked-width": `${ge}px` }
+        },
+        "aria-busy": V || void 0,
+        children: [
+          l && /* @__PURE__ */ jsxs(
+            "label",
+            {
+              htmlFor: se,
+              className: `nice-field__label ${d ? "nice-field__label--required" : ""}`,
+              children: [
+                l,
+                ae && /* @__PURE__ */ jsx(zr, { shortcuts: $e, size: "sm" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "nice-field__control", children: [
+            ve.isDisplay ? /* @__PURE__ */ jsx(
+              As,
+              {
+                value: Ne,
+                placeholder: R || S("controls.select", "Select..."),
+                disabled: i,
+                onActivate: () => {
+                  ve.enterEdit(), Y(true);
+                },
+                ariaLabel: l
+              }
+            ) : /* @__PURE__ */ jsxs("div", { className: "nice-select", ref: Q, children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  ref: (s) => {
+                    Z.current = s, typeof _ == "function" ? _(s) : _ && (_.current = s);
+                  },
+                  type: "button",
+                  id: se,
+                  role: "combobox",
+                  "aria-expanded": O,
+                  "aria-haspopup": "listbox",
+                  "aria-invalid": !!t,
+                  className: `nice-select__trigger nice-select__trigger--${n} nice-select--ds-${G} ${O ? "nice-select__trigger--open" : ""} ${t ? "nice-select__trigger--error" : ""} ${i ? "nice-select__trigger--disabled" : ""}`,
+                  style: {
+                    ...A,
+                    ...p && !j && pe != null ? {
+                      width: pe,
+                      maxWidth: pe,
+                      overflow: "hidden"
+                    } : {}
+                  },
+                  disabled: i,
+                  onClick: () => Y(!O),
+                  onKeyDown: Te,
+                  children: [
+                    Ne ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: p && !j ? {
+                          flex: 1,
+                          minWidth: 0,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        } : void 0,
+                        children: Ne
+                      }
+                    ) : /* @__PURE__ */ jsx("span", { className: "nice-select__placeholder", children: R || S("controls.select", "Select...") }),
+                    /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+                      E && te.length > 0 && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "nice-input__clear",
+                          onClick: De,
+                          role: "button",
+                          "aria-label": S("controls.clear", "Clear"),
+                          children: "✕"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          className: `nice-select__chevron ${O ? "nice-select__chevron--open" : ""}`,
+                          viewBox: "0 0 20 20",
+                          fill: "currentColor",
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+                              clipRule: "evenodd"
+                            }
+                          )
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              O && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "nice-select__dropdown",
+                  role: "listbox",
+                  style: { maxHeight: L },
+                  onScroll: x ? (s) => C(s.currentTarget.scrollTop) : void 0,
+                  children: [
+                    (J || U) && /* @__PURE__ */ jsx("div", { className: "nice-select__search", children: /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "text",
+                        value: re,
+                        onChange: (s) => {
+                          ie(s.target.value), g(0), U?.(s.target.value);
+                        },
+                        placeholder: S("controls.search", "Search..."),
+                        autoFocus: true
+                      }
+                    ) }),
+                    V && /* @__PURE__ */ jsx("div", { className: "nice-select__loading", children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "nice-spinner nice-spinner--sm",
+                        style: { margin: "8px auto" }
+                      }
+                    ) }),
+                    !V && W.length === 0 ? /* @__PURE__ */ jsx("div", { className: "nice-select__empty", children: $ || S("controls.noResults", "No results found") }) : x && !Array.from(He.keys()).some((s) => s !== "") ? (() => {
+                      const H = W.length * M, B = Math.max(
+                        0,
+                        Math.floor(K / M) - 3
+                      ), me = Math.min(
+                        W.length,
+                        Math.ceil((K + L) / M) + 3
+                      ), Se = W.slice(B, me);
+                      return /* @__PURE__ */ jsx("div", { style: { height: H, position: "relative" }, children: Se.map((ce, c) => {
+                        const N = B + c, le = te.includes(ce.value);
+                        return /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            role: "option",
+                            "aria-selected": le,
+                            className: `nice-select__option ${le ? "nice-select__option--selected" : ""} ${N === r ? "nice-select__option--highlighted" : ""} ${ce.disabled ? "nice-select__option--disabled" : ""}`,
+                            style: {
+                              position: "absolute",
+                              top: N * M,
+                              left: 0,
+                              right: 0,
+                              height: M,
+                              display: "flex",
+                              alignItems: "center",
+                              padding: "0 12px"
+                            },
+                            onClick: () => !ce.disabled && fe(String(ce.value)),
+                            onMouseEnter: () => g(N),
+                            children: I ? I(ce, le) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                              ce.icon && /* @__PURE__ */ jsx("span", { children: ce.icon }),
+                              /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                                /* @__PURE__ */ jsx("div", { children: ce.label }),
+                                ce.description && /* @__PURE__ */ jsx("div", { className: "nice-select__option-desc", children: ce.description })
+                              ] }),
+                              le && /* @__PURE__ */ jsx(
+                                "svg",
+                                {
+                                  className: "nice-select__option-check",
+                                  viewBox: "0 0 20 20",
+                                  fill: "currentColor",
+                                  children: /* @__PURE__ */ jsx(
+                                    "path",
+                                    {
+                                      fillRule: "evenodd",
+                                      d: "M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z",
+                                      clipRule: "evenodd"
+                                    }
+                                  )
+                                }
+                              )
+                            ] })
+                          },
+                          ce.value
+                        );
+                      }) });
+                    })() : Array.from(He.entries()).map(([s, H]) => /* @__PURE__ */ jsxs(_e.Fragment, { children: [
+                      s && /* @__PURE__ */ jsx("div", { className: "nice-select__group-label", children: s }),
+                      H.map((B) => {
+                        const me = te.includes(B.value), Se = W.indexOf(B);
+                        return /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            role: "option",
+                            "aria-selected": me,
+                            className: `nice-select__option ${me ? "nice-select__option--selected" : ""} ${Se === r ? "nice-select__option--highlighted" : ""} ${B.disabled ? "nice-select__option--disabled" : ""}`,
+                            onClick: () => !B.disabled && fe(String(B.value)),
+                            onMouseEnter: () => g(Se),
+                            children: I ? I(B, me) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                              B.icon && /* @__PURE__ */ jsx("span", { children: B.icon }),
+                              /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                                /* @__PURE__ */ jsx("div", { children: B.label }),
+                                B.description && /* @__PURE__ */ jsx("div", { className: "nice-select__option-desc", children: B.description })
+                              ] }),
+                              me && /* @__PURE__ */ jsx(
+                                "svg",
+                                {
+                                  className: "nice-select__option-check",
+                                  viewBox: "0 0 20 20",
+                                  fill: "currentColor",
+                                  children: /* @__PURE__ */ jsx(
+                                    "path",
+                                    {
+                                      fillRule: "evenodd",
+                                      d: "M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z",
+                                      clipRule: "evenodd"
+                                    }
+                                  )
+                                }
+                              )
+                            ] })
+                          },
+                          B.value
+                        );
+                      })
+                    ] }, s))
+                  ]
+                }
+              )
+            ] }),
+            V && /* @__PURE__ */ jsx("span", { className: "nice-field__spinner", children: /* @__PURE__ */ jsx("span", { className: "nice-spinner nice-spinner--sm" }) }),
+            ne === "right" && t && /* @__PURE__ */ jsx("div", { id: `${se}-error`, className: "nice-field__error", role: "alert", children: t }),
+            ne === "right" && !t && h && /* @__PURE__ */ jsx("div", { id: `${se}-helper`, className: "nice-field__helper", children: h })
+          ] }),
+          ne !== "right" && t && /* @__PURE__ */ jsx("div", { id: `${se}-error`, className: "nice-field__error", role: "alert", children: t }),
+          ne !== "right" && !t && h && /* @__PURE__ */ jsx("div", { id: `${se}-helper`, className: "nice-field__helper", children: h })
+        ]
+      }
+    );
+  }
+);
+Ze.displayName = "NiceSelect";
+const Pe = forwardRef(
+  ({
+    label: l,
+    checked: h = false,
+    indeterminate: t = false,
+    onChange: d,
+    disabled: i,
+    readOnly: n,
+    loading: a,
+    required: y,
+    size: u = "md",
+    name: o,
+    id: f,
+    className: D,
+    style: z,
+    error: m,
+    helperText: w,
+    accessMode: R,
+    displayStyle: p,
+    showKeyboardHints: J,
+    labelPlacement: E,
+    errorPlacement: $,
+    labelWidth: L,
+    controlWidth: b
+  }, F) => {
+    const T = rl(R, f);
+    if (T === "hidden")
+      return null;
+    (T === "disabled" || T === "readOnly") && (i = true);
+    const { t: x } = me(), M = Is(f);
+    ks("toggle", p);
+    const U = useMemo(
+      () => [{ key: "Space", description: x("shortcuts.toggle", "Toggle") }],
+      [x]
+    ), V = _e.useCallback(
+      (I) => {
+        I && (I.indeterminate = t), typeof F == "function" ? F(I) : F && (F.current = I);
+      },
+      [t, F]
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `nice-field nice-field--inline nice-field--${u} ${E === "left" ? "nice-field--label-left" : ""} ${$ === "right" ? "nice-field--error-right" : ""} ${a ? "nice-field--loading" : ""} ${D || ""}`,
+        style: {
+          ...z,
+          ...L != null && {
+            "--nice-field-label-width": typeof L == "number" ? `${L}px` : L
+          },
+          ...b != null && {
+            "--nice-field-control-width": typeof b == "number" ? `${b}px` : b
+          }
+        },
+        "aria-busy": a || void 0,
+        children: [
+          E === "left" && l && /* @__PURE__ */ jsx("span", { className: `nice-field__label ${y ? "nice-field__label--required" : ""}`, children: l }),
+          /* @__PURE__ */ jsxs("div", { className: "nice-field__control", children: [
+            /* @__PURE__ */ jsxs(
+              "label",
+              {
+                className: `nice-checkbox ${u !== "md" ? `nice-checkbox--${u}` : ""} ${i || a ? "nice-checkbox--disabled" : ""}`,
+                htmlFor: M,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: V,
+                      id: M,
+                      type: "checkbox",
+                      className: "nice-checkbox__input",
+                      name: o,
+                      checked: h,
+                      disabled: i || a,
+                      readOnly: n,
+                      "aria-invalid": !!m,
+                      onChange: (I) => {
+                        n || a || d?.(I.target.checked);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "nice-checkbox__box", children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      viewBox: "0 0 12 12",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: t ? /* @__PURE__ */ jsx("line", { x1: "2", y1: "6", x2: "10", y2: "6" }) : /* @__PURE__ */ jsx("polyline", { points: "2 6 5 9 10 3" })
+                    }
+                  ) }),
+                  E !== "left" && l && /* @__PURE__ */ jsx("span", { children: l }),
+                  J && /* @__PURE__ */ jsx(zr, { shortcuts: U, size: "sm" })
+                ]
+              }
+            ),
+            a && /* @__PURE__ */ jsx("span", { className: "nice-field__spinner", children: /* @__PURE__ */ jsx("span", { className: "nice-spinner nice-spinner--sm" }) }),
+            $ === "right" && m && /* @__PURE__ */ jsx("div", { id: `${M}-error`, className: "nice-field__error", role: "alert", children: m }),
+            $ === "right" && !m && w && /* @__PURE__ */ jsx("div", { id: `${M}-helper`, className: "nice-field__helper", children: w })
+          ] }),
+          $ !== "right" && m && /* @__PURE__ */ jsx("div", { id: `${M}-error`, className: "nice-field__error", role: "alert", children: m }),
+          $ !== "right" && !m && w && /* @__PURE__ */ jsx("div", { id: `${M}-helper`, className: "nice-field__helper", children: w })
+        ]
+      }
+    );
+  }
+);
+Pe.displayName = "NiceCheckbox";
+const Oe = forwardRef(
+  ({
+    label: l,
+    checked: h = false,
+    onChange: t,
+    disabled: d,
+    readOnly: i,
+    loading: n,
+    required: a,
+    size: y = "md",
+    name: u,
+    id: o,
+    className: f,
+    style: D,
+    accessMode: z,
+    displayStyle: m,
+    showKeyboardHints: w,
+    error: R,
+    helperText: p,
+    labelPlacement: J,
+    errorPlacement: E,
+    labelWidth: $,
+    controlWidth: L
+  }, b) => {
+    const F = rl(z, o);
+    if (F === "hidden")
+      return null;
+    (F === "disabled" || F === "readOnly") && (d = true);
+    const { t: T } = me(), x = Is(o);
+    xs("toggle", m);
+    const M = ks("toggle", m), U = useMemo(
+      () => [{ key: "Space", description: T("shortcuts.toggle", "Toggle on/off") }],
+      [T]
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `nice-field nice-field--inline nice-field--${y} ${J === "left" ? "nice-field--label-left" : ""} ${n ? "nice-field--loading" : ""} ${f || ""}`,
+        style: {
+          ...D,
+          ...$ != null && {
+            "--nice-field-label-width": typeof $ == "number" ? `${$}px` : $
+          },
+          ...L != null && {
+            "--nice-field-control-width": typeof L == "number" ? `${L}px` : L
+          }
+        },
+        "aria-busy": n || void 0,
+        children: [
+          J === "left" && l && /* @__PURE__ */ jsx("span", { className: `nice-field__label ${a ? "nice-field__label--required" : ""}`, children: l }),
+          /* @__PURE__ */ jsxs("div", { className: "nice-field__control", children: [
+            /* @__PURE__ */ jsxs(
+              "label",
+              {
+                className: `nice-toggle nice-toggle--ds-${M} ${y !== "md" ? `nice-toggle--${y}` : ""} ${d || n ? "nice-toggle--disabled" : ""}`,
+                htmlFor: x,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: b,
+                      id: x,
+                      type: "checkbox",
+                      className: "nice-toggle__input",
+                      name: u,
+                      checked: h,
+                      disabled: d || n,
+                      readOnly: i,
+                      role: "switch",
+                      "aria-checked": h,
+                      "aria-invalid": !!R,
+                      onChange: (V) => {
+                        i || n || t?.(V.target.checked);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "nice-toggle__track", children: /* @__PURE__ */ jsx("span", { className: "nice-toggle__thumb" }) }),
+                  J !== "left" && l && /* @__PURE__ */ jsx("span", { children: l }),
+                  w && /* @__PURE__ */ jsx(zr, { shortcuts: U, size: "sm" })
+                ]
+              }
+            ),
+            n && /* @__PURE__ */ jsx("span", { className: "nice-field__spinner", children: /* @__PURE__ */ jsx("span", { className: "nice-spinner nice-spinner--sm" }) }),
+            E === "right" && R && /* @__PURE__ */ jsx("div", { id: `${x}-error`, className: "nice-field__error", role: "alert", children: R }),
+            E === "right" && !R && p && /* @__PURE__ */ jsx("div", { id: `${x}-helper`, className: "nice-field__helper", children: p })
+          ] }),
+          E !== "right" && R && /* @__PURE__ */ jsx("div", { id: `${x}-error`, className: "nice-field__error", role: "alert", children: R }),
+          E !== "right" && !R && p && /* @__PURE__ */ jsx("div", { id: `${x}-helper`, className: "nice-field__helper", children: p })
+        ]
+      }
+    );
+  }
+);
+Oe.displayName = "NiceToggle";
+const We = [
+  "#ef4444",
+  "#f97316",
+  "#f59e0b",
+  "#84cc16",
+  "#10b981",
+  "#06b6d4",
+  "#3b82f6",
+  "#6366f1",
+  "#8b5cf6",
+  "#ec4899",
+  "#64748b",
+  "#1e293b"
+];
+function en() {
+  return "#" + Math.floor(Math.random() * 16777215).toString(16).padStart(6, "0");
+}
+function nn(l, h, t) {
+  const d = l / 255, i = h / 255, n = t / 255, a = Math.max(d, i, n), y = Math.min(d, i, n), u = (a + y) / 2;
+  let o = 0, f = 0;
+  if (a !== y) {
+    const D = a - y;
+    switch (f = u > 0.5 ? D / (2 - a - y) : D / (a + y), a) {
+      case d:
+        o = (i - n) / D + (i < n ? 6 : 0);
+        break;
+      case i:
+        o = (n - d) / D + 2;
+        break;
+      case n:
+        o = (d - i) / D + 4;
+        break;
+    }
+    o *= 60;
+  }
+  return { h: Math.round(o), s: Math.round(f * 100), l: Math.round(u * 100) };
+}
+function tn(l, h, t) {
+  const d = h / 100, i = t / 100, n = (1 - Math.abs(2 * i - 1)) * d, a = n * (1 - Math.abs(l / 60 % 2 - 1)), y = i - n / 2;
+  let u = 0, o = 0, f = 0;
+  return l < 60 ? [u, o, f] = [n, a, 0] : l < 120 ? [u, o, f] = [a, n, 0] : l < 180 ? [u, o, f] = [0, n, a] : l < 240 ? [u, o, f] = [0, a, n] : l < 300 ? [u, o, f] = [a, 0, n] : [u, o, f] = [n, 0, a], {
+    r: Math.round((u + y) * 255),
+    g: Math.round((o + y) * 255),
+    b: Math.round((f + y) * 255)
+  };
+}
+function cn(l, h, t) {
+  const d = l / 255, i = h / 255, n = t / 255, a = Math.max(d, i, n), y = Math.min(d, i, n), u = a - y;
+  let o = 0;
+  u !== 0 && (a === d ? o = (i - n) / u % 6 : a === i ? o = (n - d) / u + 2 : o = (d - i) / u + 4, o *= 60, o < 0 && (o += 360));
+  const f = a === 0 ? 0 : u / a;
+  return { h: Math.round(o), s: Math.round(f * 100), v: Math.round(a * 100) };
+}
+function ln(l, h, t) {
+  const d = h / 100, i = t / 100, n = i * d, a = n * (1 - Math.abs(l / 60 % 2 - 1)), y = i - n;
+  let u = 0, o = 0, f = 0;
+  return l < 60 ? [u, o, f] = [n, a, 0] : l < 120 ? [u, o, f] = [a, n, 0] : l < 180 ? [u, o, f] = [0, n, a] : l < 240 ? [u, o, f] = [0, a, n] : l < 300 ? [u, o, f] = [a, 0, n] : [u, o, f] = [n, 0, a], {
+    r: Math.round((u + y) * 255),
+    g: Math.round((o + y) * 255),
+    b: Math.round((f + y) * 255)
+  };
+}
+function sn(l) {
+  const h = /^#?([0-9a-f]{6})$/i.exec(l.trim()), t = /^#?([0-9a-f]{8})$/i.exec(l.trim());
+  if (t) {
+    const d = t[1];
+    return {
+      r: parseInt(d.slice(0, 2), 16),
+      g: parseInt(d.slice(2, 4), 16),
+      b: parseInt(d.slice(4, 6), 16),
+      a: parseInt(d.slice(6, 8), 16) / 255
+    };
+  }
+  if (h) {
+    const d = parseInt(h[1], 16);
+    return { r: d >> 16 & 255, g: d >> 8 & 255, b: d & 255, a: 1 };
+  }
+  return { r: 0, g: 0, b: 0, a: 1 };
+}
+function rn(l, h, t, d, i) {
+  const n = (y) => Math.max(0, Math.min(255, Math.round(y))).toString(16).padStart(2, "0"), a = `#${n(l)}${n(h)}${n(t)}`;
+  return i ? `${a}${n(d * 255)}` : a;
+}
+const an = forwardRef(
+  ({
+    label: l,
+    helperText: h,
+    error: t,
+    required: d,
+    disabled: i,
+    id: n,
+    className: a,
+    style: y,
+    accessMode: u,
+    displayStyle: o,
+    value: f = "#3b82f6",
+    onChange: D,
+    presets: z = We,
+    showInput: m = true,
+    showRandom: w = true,
+    withAlpha: R = false,
+    showKeyboardHints: p,
+    size: J = "md",
+    labelPlacement: E,
+    errorPlacement: $,
+    labelWidth: L,
+    controlWidth: b,
+    loading: F
+  }, T) => {
+    const x = rl(u, n);
+    if (x === "hidden")
+      return null;
+    (x === "disabled" || x === "readOnly") && (i = true);
+    const { t: M } = me(), U = Is(n);
+    ks("input", o);
+    const V = useCallback(() => {
+      i || D?.(en());
+    }, [i, D]), [I, j] = useState(false), [ae, ue] = useState(null), ne = useRef(null), X = useRef(null);
+    useLayoutEffect(() => {
+      if (!I || !X.current)
+        return;
+      const k = () => {
+        const _ = X.current?.getBoundingClientRect();
+        if (!_)
+          return;
+        const q = 280, S = 360;
+        let A = _.left, G = _.bottom + 6;
+        A + q > window.innerWidth - 8 && (A = Math.max(8, window.innerWidth - q - 8)), G + S > window.innerHeight - 8 && (G = Math.max(8, _.top - S - 6)), ue({ left: A, top: G });
+      };
+      return k(), window.addEventListener("scroll", k, true), window.addEventListener("resize", k), () => {
+        window.removeEventListener("scroll", k, true), window.removeEventListener("resize", k);
+      };
+    }, [I]), useEffect(() => {
+      if (!I)
+        return;
+      const k = (q) => {
+        const S = q.target;
+        ne.current?.contains(S) || X.current?.contains(S) || j(false);
+      }, _ = (q) => {
+        q.key === "Escape" && j(false);
+      };
+      return document.addEventListener("mousedown", k), document.addEventListener("keydown", _), () => {
+        document.removeEventListener("mousedown", k), document.removeEventListener("keydown", _);
+      };
+    }, [I]);
+    const P = useMemo(
+      () => [
+        { key: "Enter", description: M("shortcuts.openPicker", "Open color picker") },
+        { key: "Arrow keys", description: M("shortcuts.navigatePresets", "Navigate presets") }
+      ],
+      [M]
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `nice-field nice-field--${J} ${E === "left" ? "nice-field--label-left" : ""} ${F ? "nice-field--loading" : ""} ${a || ""}`,
+        style: {
+          ...y,
+          ...L != null && {
+            "--nice-field-label-width": typeof L == "number" ? `${L}px` : L
+          },
+          ...b != null && {
+            "--nice-field-control-width": typeof b == "number" ? `${b}px` : b
+          }
+        },
+        "aria-busy": F || void 0,
+        children: [
+          l && /* @__PURE__ */ jsxs(
+            "label",
+            {
+              htmlFor: U,
+              className: `nice-field__label ${d ? "nice-field__label--required" : ""}`,
+              children: [
+                l,
+                p && /* @__PURE__ */ jsx(zr, { shortcuts: P, size: "sm" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "nice-field__control", children: /* @__PURE__ */ jsxs("div", { className: "nice-color-picker", children: [
+            /* @__PURE__ */ jsxs("div", { className: "nice-color-picker__preview-row", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: X,
+                  className: "nice-color-picker__swatch",
+                  id: U,
+                  style: { background: f },
+                  onClick: (k) => {
+                    k.stopPropagation(), i || j((_) => !_);
+                  },
+                  onKeyDown: (k) => {
+                    !i && (k.key === "Enter" || k.key === " ") && (k.preventDefault(), j((_) => !_));
+                  },
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": M("colorPicker.openPalette", "Open color palette"),
+                  "aria-haspopup": "dialog",
+                  "aria-expanded": I,
+                  children: /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: (k) => {
+                        typeof T == "function" ? T(k) : T && (T.current = k);
+                      },
+                      type: "hidden",
+                      value: f,
+                      disabled: i,
+                      readOnly: true
+                    }
+                  )
+                }
+              ),
+              m && /* @__PURE__ */ jsx("div", { className: "nice-input nice-input--sm", style: { width: 100 }, children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  className: "nice-input__native",
+                  type: "text",
+                  value: f,
+                  disabled: i,
+                  onChange: (k) => D?.(k.target.value),
+                  maxLength: 7
+                }
+              ) }),
+              w && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "nice-btn nice-btn--outline nice-btn--sm nice-color-picker__random",
+                  onClick: V,
+                  disabled: i,
+                  title: M("colorPicker.random", "Random"),
+                  "aria-label": M("colorPicker.random", "Random"),
+                  style: {
+                    fontSize: "0.65rem",
+                    textTransform: "uppercase",
+                    letterSpacing: "0.05em"
+                  },
+                  children: M("colorPicker.random", "Random")
+                }
+              ),
+              F && /* @__PURE__ */ jsx("span", { className: "nice-field__spinner", children: /* @__PURE__ */ jsx("span", { className: "nice-spinner nice-spinner--sm" }) }),
+              $ === "right" && t && /* @__PURE__ */ jsx("div", { id: `${U}-error`, className: "nice-field__error", role: "alert", children: t }),
+              $ === "right" && !t && h && /* @__PURE__ */ jsx("div", { id: `${U}-helper`, className: "nice-field__helper", children: h })
+            ] }),
+            I && ae && typeof document < "u" && ze.createPortal(
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: ne,
+                  className: "nice-color-picker__popup nice-color-picker__popup--portal",
+                  role: "dialog",
+                  "aria-label": M("colorPicker.palette", "Color palette"),
+                  style: { position: "fixed", left: ae.left, top: ae.top },
+                  onClick: (k) => k.stopPropagation(),
+                  children: (() => {
+                    const k = sn(f), _ = { r: k.r, g: k.g, b: k.b }, q = R ? k.a : 1, S = nn(_.r, _.g, _.b), A = cn(_.r, _.g, _.b), G = (r, g, K, C = q) => D?.(rn(r, g, K, C, R)), se = (r, g, K) => G(r, g, K), ve = (r, g, K) => {
+                      const C = tn(r, g, K);
+                      G(C.r, C.g, C.b);
+                    }, O = (r, g, K) => {
+                      const C = ln(r, g, K);
+                      G(C.r, C.g, C.b);
+                    }, Y = (r) => G(_.r, _.g, _.b, r), re = (r) => {
+                      if (i)
+                        return;
+                      const g = r.currentTarget, K = (Q) => {
+                        const Z = g.getBoundingClientRect(), ge = Math.max(0, Math.min(Z.width, Q.clientX - Z.left)), be = Math.max(0, Math.min(Z.height, Q.clientY - Z.top)), pe = Math.round(ge / Z.width * 100), Me = 100 - Math.round(be / Z.height * 100);
+                        O(A.h, pe, Me);
+                      };
+                      K(r);
+                      const C = () => {
+                        document.removeEventListener("pointermove", K), document.removeEventListener("pointerup", C);
+                      };
+                      document.addEventListener("pointermove", K), document.addEventListener("pointerup", C);
+                    }, ie = `hsl(${A.h}, 100%, 50%)`;
+                    return /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("div", { className: "nice-color-picker__popup-header", children: /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "text",
+                          className: "nice-input__native nice-color-picker__popup-hex",
+                          value: f,
+                          disabled: i,
+                          onChange: (r) => D?.(r.target.value),
+                          maxLength: R ? 9 : 7,
+                          "aria-label": M("colorPicker.hexValue", "Hex value")
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "range",
+                          min: 0,
+                          max: 360,
+                          value: A.h,
+                          disabled: i,
+                          onChange: (r) => O(Number(r.target.value), A.s, A.v),
+                          className: "nice-color-picker__hue-slider",
+                          "aria-label": M("colorPicker.hue", "Hue")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "nice-color-picker__sv",
+                          style: {
+                            background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${ie})`
+                          },
+                          onPointerDown: re,
+                          role: "application",
+                          "aria-label": M("colorPicker.svPalette", "Saturation/value palette"),
+                          children: /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "nice-color-picker__sv-marker",
+                              style: { left: `${A.s}%`, top: `${100 - A.v}%` }
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "nice-color-picker__sliders", children: [
+                        /* @__PURE__ */ jsx("div", { className: "nice-color-picker__slider-col", children: ["h", "s", "l"].map((r) => {
+                          const g = r === "h" ? 360 : 100, K = S[r], C = (Q) => ve(
+                            r === "h" ? Q : S.h,
+                            r === "s" ? Q : S.s,
+                            r === "l" ? Q : S.l
+                          );
+                          return /* @__PURE__ */ jsxs("div", { className: "nice-color-picker__slider-row", children: [
+                            /* @__PURE__ */ jsx("label", { className: "nice-color-picker__slider-label", children: r.toUpperCase() }),
+                            /* @__PURE__ */ jsx(
+                              "input",
+                              {
+                                type: "range",
+                                min: 0,
+                                max: g,
+                                value: K,
+                                disabled: i,
+                                onChange: (Q) => C(Number(Q.target.value))
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "input",
+                              {
+                                type: "number",
+                                min: 0,
+                                max: g,
+                                value: K,
+                                disabled: i,
+                                onChange: (Q) => C(Number(Q.target.value) || 0),
+                                className: "nice-input__native nice-color-picker__slider-num"
+                              }
+                            )
+                          ] }, r);
+                        }) }),
+                        /* @__PURE__ */ jsx("div", { className: "nice-color-picker__slider-col", children: ["r", "g", "b"].map((r) => {
+                          const g = _[r], K = (C) => se(
+                            r === "r" ? C : _.r,
+                            r === "g" ? C : _.g,
+                            r === "b" ? C : _.b
+                          );
+                          return /* @__PURE__ */ jsxs("div", { className: "nice-color-picker__slider-row", children: [
+                            /* @__PURE__ */ jsx("label", { className: "nice-color-picker__slider-label", children: r.toUpperCase() }),
+                            /* @__PURE__ */ jsx(
+                              "input",
+                              {
+                                type: "range",
+                                min: 0,
+                                max: 255,
+                                value: g,
+                                disabled: i,
+                                onChange: (C) => K(Number(C.target.value))
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "input",
+                              {
+                                type: "number",
+                                min: 0,
+                                max: 255,
+                                value: g,
+                                disabled: i,
+                                onChange: (C) => K(Number(C.target.value) || 0),
+                                className: "nice-input__native nice-color-picker__slider-num"
+                              }
+                            )
+                          ] }, r);
+                        }) })
+                      ] }),
+                      R && /* @__PURE__ */ jsxs("div", { className: "nice-color-picker__alpha-row", children: [
+                        /* @__PURE__ */ jsx("label", { className: "nice-color-picker__slider-label", children: "A" }),
+                        /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            type: "range",
+                            min: 0,
+                            max: 100,
+                            value: Math.round(q * 100),
+                            disabled: i,
+                            onChange: (r) => Y(Number(r.target.value) / 100),
+                            className: "nice-color-picker__alpha-slider",
+                            style: {
+                              background: `linear-gradient(to right, transparent, rgb(${_.r},${_.g},${_.b}))`
+                            },
+                            "aria-label": M("colorPicker.alpha", "Alpha")
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            type: "number",
+                            min: 0,
+                            max: 100,
+                            value: Math.round(q * 100),
+                            disabled: i,
+                            onChange: (r) => Y((Number(r.target.value) || 0) / 100),
+                            className: "nice-input__native nice-color-picker__slider-num"
+                          }
+                        )
+                      ] }),
+                      z.length > 0 && /* @__PURE__ */ jsx("div", { className: "nice-color-picker__popup-presets", children: z.map((r) => /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: `nice-color-picker__preset ${f === r ? "nice-color-picker__preset--active" : ""}`,
+                          style: { background: r },
+                          onClick: () => {
+                            D?.(r), j(false);
+                          },
+                          role: "button",
+                          tabIndex: 0,
+                          "aria-label": r,
+                          onKeyDown: (g) => {
+                            (g.key === "Enter" || g.key === " ") && (g.preventDefault(), D?.(r), j(false));
+                          }
+                        },
+                        r
+                      )) })
+                    ] });
+                  })()
+                }
+              ),
+              document.body
+            )
+          ] }) }),
+          $ !== "right" && t && /* @__PURE__ */ jsx("div", { id: `${U}-error`, className: "nice-field__error", role: "alert", children: t }),
+          $ !== "right" && !t && h && /* @__PURE__ */ jsx("div", { id: `${U}-helper`, className: "nice-field__helper", children: h })
+        ]
+      }
+    );
+  }
+);
+an.displayName = "NiceColorPicker";
+const on = forwardRef(
+  ({
+    children: l,
+    variant: h = "primary",
+    size: t = "md",
+    type: d = "button",
+    disabled: i,
+    loading: n,
+    fullWidth: a,
+    onClick: y,
+    leftIcon: u,
+    rightIcon: o,
+    error: f,
+    errorPlacement: D = "bottom",
+    className: z,
+    style: m,
+    id: w,
+    accessMode: R,
+    displayStyle: p,
+    ...J
+  }, E) => {
+    const $ = rl(R, w);
+    if ($ === "hidden")
+      return null;
+    ($ === "disabled" || $ === "readOnly") && (i = true);
+    const L = xs("button", p), b = ks("button", p), F = h !== "primary" ? (({ background: M, color: U, ...V }) => V)(
+      L
+    ) : L, T = /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: E,
+        type: d,
+        id: w,
+        className: `nice-btn nice-btn--${h} nice-btn--${t} nice-btn--ds-${b} ${a ? "nice-btn--full-width" : ""} ${n ? "nice-btn--loading" : ""} ${f && !D ? "nice-btn--has-error" : ""} ${z || ""}`,
+        style: { ...F, ...m },
+        disabled: i || n,
+        "aria-busy": n || void 0,
+        "aria-disabled": i || n || void 0,
+        onClick: y,
+        ...J,
+        children: [
+          n && /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "nice-btn__spinner",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "3",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "31.4 31.4", strokeLinecap: "round" })
+            }
+          ),
+          !n && u && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: u }),
+          !n && /* @__PURE__ */ jsx("span", { children: l }),
+          n && /* @__PURE__ */ jsx("span", { style: { visibility: "hidden" }, "aria-hidden": "true", children: l }),
+          !n && o && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: o })
+        ]
+      }
+    );
+    if (!f)
+      return T;
+    const x = /* @__PURE__ */ jsx("div", { className: "nice-field__error", role: "alert", children: f });
+    return D === "right" ? /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: `nice-btn-field nice-btn-field--right nice-field--${t}`,
+        style: {
+          display: "inline-flex",
+          flexDirection: "row",
+          alignItems: "center",
+          gap: "8px",
+          width: "fit-content"
+        },
+        children: [
+          T,
+          x
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: `nice-btn-field nice-btn-field--bottom nice-field--${t}`,
+        style: {
+          display: "inline-flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          gap: "4px",
+          width: "fit-content"
+        },
+        children: [
+          T,
+          x
+        ]
+      }
+    );
+  }
+);
+on.displayName = "NiceButton";
+const fn = ({
+  tabs: l,
+  activeTab: h,
+  onChange: t,
+  variant: d = "default",
+  vertical: i,
+  size: n = "md",
+  className: a,
+  style: y,
+  displayStyle: u
+}) => {
+  const o = xs("tab", u), f = ks("tab", u), [D, z] = useState(h || l[0]?.id), m = h ?? D, w = useCallback(
+    (p) => {
+      z(p), t?.(p);
+    },
+    [t]
+  ), R = l.find((p) => p.id === m)?.content;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `nice-tabs nice-tabs--${n} nice-tabs--ds-${f} ${a || ""}`,
+      style: { ...o, ...y, ...i ? { display: "flex", gap: 16 } : {} },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `nice-tabs__list ${d !== "default" ? `nice-tabs__list--${d}` : ""} ${i ? "nice-tabs__list--vertical" : ""}`,
+            role: "tablist",
+            children: l.map((p) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                "aria-selected": m === p.id,
+                className: `nice-tabs__tab ${m === p.id ? "nice-tabs__tab--active" : ""} ${p.disabled ? "nice-tabs__tab--disabled" : ""}`,
+                disabled: p.disabled,
+                onClick: () => w(p.id),
+                children: [
+                  p.icon,
+                  /* @__PURE__ */ jsx("span", { children: p.label }),
+                  p.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "nice-tabs__badge", children: p.badge })
+                ]
+              },
+              p.id
+            ))
+          }
+        ),
+        R && /* @__PURE__ */ jsx("div", { className: "nice-tabs__panel", role: "tabpanel", children: R })
+      ]
+    }
+  );
+};
+
+export { Pe as N, an as a, Qe as b, Ze as c, Je as d, Oe as e, fn as f, on as g };
+//# sourceMappingURL=NiceTabs-DzLHzwuA.js.map