@nice2dev/ui-3d 1.0.6 → 1.1.0

package/dist/esm/ui/dist/NiceButton-D9l39Rs7.js

@@ -0,0 +1,593 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import ke, { forwardRef, useState, useRef, useMemo, useCallback } from 'react';
+import { f as ei, g as de, h as ll, i as cl, b as ys, k as xi, d as vs, C as Ns, N as Gr, j as Is } from './core-BpghV7Ls.js';
+
+const Re = forwardRef(
+  ({
+    label: y,
+    helperText: v,
+    error: t,
+    required: A,
+    disabled: s,
+    readOnly: a,
+    size: B = "md",
+    name: M,
+    id: x,
+    className: R,
+    style: k,
+    accessMode: p,
+    displayStyle: g,
+    value: h,
+    defaultValue: _,
+    onChange: C,
+    onBlur: o,
+    onKeyDown: m,
+    placeholder: w,
+    type: D = "text",
+    maxLength: F,
+    prefix: I,
+    suffix: j,
+    clearable: c,
+    autoFocus: J,
+    submitOnEnter: S,
+    onSubmit: L,
+    showKeyboardHints: Q,
+    ...q
+  }, le) => {
+    const G = ei(p, x);
+    if (G === "hidden")
+      return null;
+    G === "disabled" && (s = true), G === "readOnly" && (a = true);
+    const { t: E } = de(), d = ys(x), te = ll("input", g), se = cl("input", g), V = useCallback(() => C?.(""), [C]), $ = Is({
+      enabled: S,
+      onSubmit: L
+    }), O = useCallback(
+      (u) => {
+        $(u), m?.(u);
+      },
+      [$, m]
+    ), P = useMemo(() => {
+      const u = [];
+      return S && u.push({ key: "Enter", description: E("shortcuts.submit", "Submit") }), c && u.push({ key: "Escape", description: E("shortcuts.clear", "Clear") }), u;
+    }, [S, c, E]);
+    return /* @__PURE__ */ jsxs("div", { className: `nice-field ${R || ""}`, style: k, children: [
+      y && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: d,
+          className: `nice-field__label ${A ? "nice-field__label--required" : ""}`,
+          children: [
+            y,
+            Q && P.length > 0 && /* @__PURE__ */ jsx(Gr, { shortcuts: P, size: "sm" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `nice-input nice-input--${B} nice-input--ds-${se} ${t ? "nice-input--error" : ""} ${s ? "nice-input--disabled" : ""} ${a ? "nice-input--readonly" : ""}`,
+          style: te,
+          children: [
+            I && /* @__PURE__ */ jsx("span", { className: "nice-input__icon", children: I }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: le,
+                id: d,
+                className: "nice-input__native",
+                type: D,
+                name: M,
+                value: h,
+                defaultValue: _,
+                placeholder: w,
+                disabled: s,
+                readOnly: a,
+                maxLength: F,
+                autoFocus: J,
+                "aria-invalid": !!t,
+                "aria-describedby": t ? `${d}-error` : v ? `${d}-helper` : void 0,
+                onChange: (u) => C?.(u.target.value),
+                onBlur: o,
+                onKeyDown: O,
+                ...q
+              }
+            ),
+            c && h && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "nice-input__clear",
+                onClick: V,
+                "aria-label": E("controls.clear", "Clear"),
+                children: "✕"
+              }
+            ),
+            j && /* @__PURE__ */ jsx("span", { className: "nice-input__icon", children: j })
+          ]
+        }
+      ),
+      t && /* @__PURE__ */ jsx("div", { id: `${d}-error`, className: "nice-field__error", role: "alert", children: t }),
+      !t && v && /* @__PURE__ */ jsx("div", { id: `${d}-helper`, className: "nice-field__helper", children: v })
+    ] });
+  }
+);
+Re.displayName = "NiceTextInput";
+const De = forwardRef(
+  ({
+    label: y,
+    helperText: v,
+    error: t,
+    required: A,
+    disabled: s,
+    size: a = "md",
+    name: B,
+    id: M,
+    className: x,
+    style: R,
+    accessMode: k,
+    displayStyle: p,
+    options: g,
+    value: h,
+    onChange: _,
+    placeholder: C,
+    multiple: o = false,
+    searchable: m = false,
+    clearable: w = false,
+    emptyText: D,
+    maxHeight: F = 240,
+    optionsSource: I,
+    valueField: j,
+    labelField: c,
+    virtualScroll: J,
+    optionHeight: S = 36,
+    onSearch: L,
+    loading: Q,
+    renderOption: q,
+    showKeyboardHints: le
+  }, G) => {
+    const E = ei(k, M);
+    if (E === "hidden")
+      return null;
+    (E === "disabled" || E === "readOnly") && (s = true);
+    const { t: d } = de(), te = ll("input", p), se = cl("input", p), V = ys(M), [$, O] = useState(false), [P, u] = useState(""), [K, H] = useState(-1), [he, Ne] = useState(0), _e = useRef(null), ye = xi(
+      I ?? null,
+      j ?? I?.keyField ?? "id",
+      c ?? "name"
+    ), T = I ? ye.options : g ?? [];
+    vs(_e, () => {
+      O(false), u("");
+    });
+    const f = useMemo(() => h ? Array.isArray(h) ? h : [h] : [], [h]), b = useMemo(() => {
+      if (!P && !L || L)
+        return T;
+      const n = P.toLowerCase();
+      return T.filter(
+        (r) => r.label.toLowerCase().includes(n) || String(r.value).toLowerCase().includes(n)
+      );
+    }, [T, P, L]), me = useMemo(() => {
+      const n = /* @__PURE__ */ new Map();
+      for (const r of b) {
+        const i = r.group || "";
+        n.has(i) || n.set(i, []), n.get(i).push(r);
+      }
+      return n;
+    }, [b]), X = useCallback(
+      (n) => {
+        if (o) {
+          const r = f.includes(n) ? f.filter((i) => i !== n) : [...f, n];
+          _?.(r);
+        } else
+          _?.(n), O(false), u("");
+      },
+      [o, f, _]
+    ), ke$1 = useCallback(
+      (n) => {
+        if (n.key === "Escape") {
+          O(false), u("");
+          return;
+        }
+        if (n.key === "Enter" || n.key === " ") {
+          if (!$) {
+            O(true), n.preventDefault();
+            return;
+          }
+          K >= 0 && b[K] && (X(b[K].value), n.preventDefault());
+          return;
+        }
+        n.key === "ArrowDown" && (n.preventDefault(), H((r) => Math.min(r + 1, b.length - 1))), n.key === "ArrowUp" && (n.preventDefault(), H((r) => Math.max(r - 1, 0)));
+      },
+      [$, K, b, X]
+    ), fe = useMemo(() => f.length === 0 ? null : o ? f.map((n) => T.find((r) => r.value === n)?.label || n).join(", ") : T.find((n) => n.value === f[0])?.label || f[0], [f, T, o]), ge = useCallback(
+      (n) => {
+        n.stopPropagation(), _?.(o ? [] : "");
+      },
+      [_, o]
+    ), $e = useMemo(
+      () => [
+        { key: "Enter", description: d("shortcuts.select", "Select") },
+        { key: "Space", description: d("shortcuts.openDropdown", "Open dropdown") },
+        Ns.moveUp,
+        Ns.moveDown,
+        Ns.cancel
+      ],
+      [d]
+    );
+    return /* @__PURE__ */ jsxs("div", { className: `nice-field ${x || ""}`, style: R, children: [
+      y && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: V,
+          className: `nice-field__label ${A ? "nice-field__label--required" : ""}`,
+          children: [
+            y,
+            le && /* @__PURE__ */ jsx(Gr, { shortcuts: $e, size: "sm" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "nice-select", ref: _e, children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: G,
+            type: "button",
+            id: V,
+            role: "combobox",
+            "aria-expanded": $,
+            "aria-haspopup": "listbox",
+            "aria-invalid": !!t,
+            className: `nice-select__trigger nice-select__trigger--${a} nice-select--ds-${se} ${$ ? "nice-select__trigger--open" : ""} ${t ? "nice-select__trigger--error" : ""} ${s ? "nice-select__trigger--disabled" : ""}`,
+            style: te,
+            disabled: s,
+            onClick: () => O(!$),
+            onKeyDown: ke$1,
+            children: [
+              fe ? /* @__PURE__ */ jsx("span", { children: fe }) : /* @__PURE__ */ jsx("span", { className: "nice-select__placeholder", children: C || d("controls.select", "Select...") }),
+              /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+                w && f.length > 0 && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "nice-input__clear",
+                    onClick: ge,
+                    role: "button",
+                    "aria-label": d("controls.clear", "Clear"),
+                    children: "✕"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: `nice-select__chevron ${$ ? "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"
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        $ && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "nice-select__dropdown",
+            role: "listbox",
+            style: { maxHeight: F },
+            onScroll: J ? (n) => Ne(n.currentTarget.scrollTop) : void 0,
+            children: [
+              (m || L) && /* @__PURE__ */ jsx("div", { className: "nice-select__search", children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  value: P,
+                  onChange: (n) => {
+                    u(n.target.value), H(0), L?.(n.target.value);
+                  },
+                  placeholder: d("controls.search", "Search..."),
+                  autoFocus: true
+                }
+              ) }),
+              Q && /* @__PURE__ */ jsx("div", { className: "nice-select__loading", children: /* @__PURE__ */ jsx("div", { className: "nice-spinner nice-spinner--sm", style: { margin: "8px auto" } }) }),
+              !Q && b.length === 0 ? /* @__PURE__ */ jsx("div", { className: "nice-select__empty", children: D || d("controls.noResults", "No results found") }) : J && !Array.from(me.keys()).some((n) => n !== "") ? (() => {
+                const r = b.length * S, i = Math.max(0, Math.floor(he / S) - 3), U = Math.min(
+                  b.length,
+                  Math.ceil((he + F) / S) + 3
+                ), Y = b.slice(i, U);
+                return /* @__PURE__ */ jsx("div", { style: { height: r, position: "relative" }, children: Y.map((N, xe) => {
+                  const re = i + xe, Z = f.includes(N.value);
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      role: "option",
+                      "aria-selected": Z,
+                      className: `nice-select__option ${Z ? "nice-select__option--selected" : ""} ${re === K ? "nice-select__option--highlighted" : ""} ${N.disabled ? "nice-select__option--disabled" : ""}`,
+                      style: {
+                        position: "absolute",
+                        top: re * S,
+                        left: 0,
+                        right: 0,
+                        height: S,
+                        display: "flex",
+                        alignItems: "center",
+                        padding: "0 12px"
+                      },
+                      onClick: () => !N.disabled && X(String(N.value)),
+                      onMouseEnter: () => H(re),
+                      children: q ? q(N, Z) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                        N.icon && /* @__PURE__ */ jsx("span", { children: N.icon }),
+                        /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                          /* @__PURE__ */ jsx("div", { children: N.label }),
+                          N.description && /* @__PURE__ */ jsx("div", { className: "nice-select__option-desc", children: N.description })
+                        ] }),
+                        Z && /* @__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"
+                              }
+                            )
+                          }
+                        )
+                      ] })
+                    },
+                    N.value
+                  );
+                }) });
+              })() : Array.from(me.entries()).map(([n, r]) => /* @__PURE__ */ jsxs(ke.Fragment, { children: [
+                n && /* @__PURE__ */ jsx("div", { className: "nice-select__group-label", children: n }),
+                r.map((i) => {
+                  const U = f.includes(i.value), Y = b.indexOf(i);
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      role: "option",
+                      "aria-selected": U,
+                      className: `nice-select__option ${U ? "nice-select__option--selected" : ""} ${Y === K ? "nice-select__option--highlighted" : ""} ${i.disabled ? "nice-select__option--disabled" : ""}`,
+                      onClick: () => !i.disabled && X(String(i.value)),
+                      onMouseEnter: () => H(Y),
+                      children: q ? q(i, U) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                        i.icon && /* @__PURE__ */ jsx("span", { children: i.icon }),
+                        /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                          /* @__PURE__ */ jsx("div", { children: i.label }),
+                          i.description && /* @__PURE__ */ jsx("div", { className: "nice-select__option-desc", children: i.description })
+                        ] }),
+                        U && /* @__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"
+                              }
+                            )
+                          }
+                        )
+                      ] })
+                    },
+                    i.value
+                  );
+                })
+              ] }, n))
+            ]
+          }
+        )
+      ] }),
+      t && /* @__PURE__ */ jsx("div", { className: "nice-field__error", role: "alert", children: t }),
+      !t && v && /* @__PURE__ */ jsx("div", { className: "nice-field__helper", children: v })
+    ] });
+  }
+);
+De.displayName = "NiceSelect";
+const Ie = [
+  "#ef4444",
+  "#f97316",
+  "#f59e0b",
+  "#84cc16",
+  "#10b981",
+  "#06b6d4",
+  "#3b82f6",
+  "#6366f1",
+  "#8b5cf6",
+  "#ec4899",
+  "#64748b",
+  "#1e293b"
+];
+function Ee() {
+  return "#" + Math.floor(Math.random() * 16777215).toString(16).padStart(6, "0");
+}
+const Ae = forwardRef(
+  ({
+    label: y,
+    helperText: v,
+    error: t,
+    required: A,
+    disabled: s,
+    id: a,
+    className: B,
+    style: M,
+    accessMode: x,
+    displayStyle: R,
+    value: k = "#3b82f6",
+    onChange: p,
+    presets: g = Ie,
+    showInput: h = true,
+    showRandom: _ = true,
+    showKeyboardHints: C
+  }, o) => {
+    const m = ei(x, a);
+    if (m === "hidden")
+      return null;
+    (m === "disabled" || m === "readOnly") && (s = true);
+    const { t: w } = de(), D = ys(a);
+    cl("input", R);
+    const F = useRef(null), I = useCallback(() => {
+      s || p?.(Ee());
+    }, [s, p]), j = useMemo(
+      () => [
+        { key: "Enter", description: w("shortcuts.openPicker", "Open color picker") },
+        { key: "Arrow keys", description: w("shortcuts.navigatePresets", "Navigate presets") }
+      ],
+      [w]
+    );
+    return /* @__PURE__ */ jsxs("div", { className: `nice-field ${B || ""}`, style: M, children: [
+      y && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: D,
+          className: `nice-field__label ${A ? "nice-field__label--required" : ""}`,
+          children: [
+            y,
+            C && /* @__PURE__ */ jsx(Gr, { shortcuts: j, size: "sm" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "nice-color-picker", children: [
+        /* @__PURE__ */ jsxs("div", { className: "nice-color-picker__preview-row", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "nice-color-picker__swatch",
+              style: { background: k },
+              onClick: () => F.current?.click(),
+              role: "button",
+              tabIndex: 0,
+              "aria-label": "Pick color",
+              children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: (c) => {
+                    F.current = c, typeof o == "function" ? o(c) : o && (o.current = c);
+                  },
+                  type: "color",
+                  className: "nice-color-picker__native",
+                  id: D,
+                  value: k,
+                  disabled: s,
+                  onChange: (c) => p?.(c.target.value)
+                }
+              )
+            }
+          ),
+          h && /* @__PURE__ */ jsx("div", { className: "nice-input nice-input--sm", style: { width: 100 }, children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "nice-input__native",
+              type: "text",
+              value: k,
+              disabled: s,
+              onChange: (c) => p?.(c.target.value),
+              maxLength: 7
+            }
+          ) }),
+          _ && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "nice-btn nice-btn--outline nice-btn--sm nice-color-picker__random",
+              onClick: I,
+              disabled: s,
+              title: "Random color",
+              "aria-label": "Random color",
+              children: "🎲"
+            }
+          )
+        ] }),
+        g.length > 0 && /* @__PURE__ */ jsx("div", { className: "nice-color-picker__presets", children: g.map((c) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `nice-color-picker__preset ${k === c ? "nice-color-picker__preset--active" : ""}`,
+            style: { background: c },
+            onClick: () => p?.(c),
+            role: "button",
+            tabIndex: 0,
+            "aria-label": c
+          },
+          c
+        )) })
+      ] }),
+      t && /* @__PURE__ */ jsx("div", { className: "nice-field__error", role: "alert", children: t }),
+      !t && v && /* @__PURE__ */ jsx("div", { className: "nice-field__helper", children: v })
+    ] });
+  }
+);
+Ae.displayName = "NiceColorPicker";
+const Fe = forwardRef(
+  ({
+    children: y,
+    variant: v = "primary",
+    size: t = "md",
+    type: A = "button",
+    disabled: s,
+    loading: a,
+    fullWidth: B,
+    onClick: M,
+    leftIcon: x,
+    rightIcon: R,
+    className: k,
+    style: p,
+    id: g,
+    accessMode: h,
+    displayStyle: _,
+    ...C
+  }, o) => {
+    const m = ei(h, g);
+    if (m === "hidden")
+      return null;
+    (m === "disabled" || m === "readOnly") && (s = true);
+    const w = ll("button", _), D = cl("button", _);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: o,
+        type: A,
+        id: g,
+        className: `nice-btn nice-btn--${v} nice-btn--${t} nice-btn--ds-${D} ${B ? "nice-btn--full-width" : ""} ${a ? "nice-btn--loading" : ""} ${k || ""}`,
+        style: { ...w, ...p },
+        disabled: s || a,
+        "aria-busy": a || void 0,
+        "aria-disabled": s || a || void 0,
+        onClick: M,
+        ...C,
+        children: [
+          a && /* @__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" })
+            }
+          ),
+          !a && x && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: x }),
+          /* @__PURE__ */ jsx("span", { children: y }),
+          !a && R && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: R })
+        ]
+      }
+    );
+  }
+);
+Fe.displayName = "NiceButton";
+
+export { Ae as N, De as a, Re as b, Fe as c };
+//# sourceMappingURL=NiceButton-D9l39Rs7.js.map