@nice2dev/ui 1.0.5 → 1.0.8

package/dist/overlays.mjs

@@ -0,0 +1,482 @@
+import { N as ie, a as ae, b as ce, c as le, d as se, e as de, f as ue, g as he, h as me, i as fe, j as ve, k as ge, l as be, u as we, m as ye } from "./NiceWindow-SiCaREbq.js";
+import { jsxs as Y, Fragment as W, jsx as a } from "react/jsx-runtime";
+import { useRef as E, useState as L, useEffect as I, useCallback as g } from "react";
+import { createPortal as C } from "react-dom";
+import { c as K, t as X, d as O, e as z } from "./core-BpghV7Ls.js";
+const F = ({
+  open: e,
+  onClose: o,
+  children: m,
+  title: r,
+  size: f = "md",
+  closeOnBackdropClick: s = !0,
+  closeOnEscape: d = !0,
+  disableFocusTrap: u = !1,
+  disableBodyScroll: k = !0,
+  zIndex: N = 1e3,
+  className: p,
+  style: M
+}) => {
+  const b = E(null);
+  K(b, e && !u), I(() => {
+    if (!k && e) {
+      const n = document.body.style.overflow;
+      return document.body.style.overflow = "hidden", () => {
+        document.body.style.overflow = n;
+      };
+    }
+  }, [e, k]), I(() => {
+    if (!d || !e)
+      return;
+    const n = (l) => {
+      l.key === "Escape" && (l.preventDefault(), o());
+    };
+    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+  }, [d, e, o]);
+  const w = g(
+    (n) => {
+      s && n.target === n.currentTarget && o();
+    },
+    [s, o]
+  );
+  if (!e)
+    return null;
+  const i = {
+    sm: "nice-modal--sm",
+    md: "nice-modal--md",
+    lg: "nice-modal--lg",
+    xl: "nice-modal--xl",
+    full: "nice-modal--full"
+  }[f];
+  return C(
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: "nice-modal__overlay",
+        style: { zIndex: N },
+        onClick: w,
+        role: "presentation",
+        children: /* @__PURE__ */ a(
+          "div",
+          {
+            ref: b,
+            className: `nice-modal ${i} ${p || ""}`,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": r,
+            style: M,
+            tabIndex: -1,
+            children: m
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}, G = ({
+  children: e,
+  showClose: o = !0,
+  onClose: m,
+  className: r
+}) => /* @__PURE__ */ Y("div", { className: `nice-modal__header ${r || ""}`, children: [
+  /* @__PURE__ */ a("div", { className: "nice-modal__title", children: e }),
+  o && m && /* @__PURE__ */ a("button", { type: "button", className: "nice-modal__close", onClick: m, "aria-label": "Close", children: /* @__PURE__ */ a(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: /* @__PURE__ */ a("path", { d: "M4 4l12 12M4 16L16 4" })
+    }
+  ) })
+] }), J = ({ children: e, className: o }) => /* @__PURE__ */ a("div", { className: `nice-modal__body ${o || ""}`, children: e }), Q = ({ children: e, className: o }) => /* @__PURE__ */ a("div", { className: `nice-modal__footer ${o || ""}`, children: e }), Z = ({
+  open: e,
+  onClose: o,
+  children: m,
+  position: r = "right",
+  size: f = 320,
+  title: s,
+  closeOnBackdropClick: d = !0,
+  closeOnEscape: u = !0,
+  swipeToClose: k = !0,
+  zIndex: N = 1e3,
+  className: p,
+  style: M
+}) => {
+  const b = E(null), [w, i] = L(!1), [n, l] = L(0);
+  K(b, e), I(() => {
+    if (!u || !e)
+      return;
+    const t = (_) => {
+      _.key === "Escape" && (_.preventDefault(), o());
+    };
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [u, e, o]);
+  const y = g(
+    (t) => {
+      let _ = 0;
+      switch (r) {
+        case "left":
+          _ = Math.min(0, t.deltaX);
+          break;
+        case "right":
+          _ = Math.max(0, t.deltaX);
+          break;
+        case "top":
+          _ = Math.min(0, t.deltaY);
+          break;
+        case "bottom":
+          _ = Math.max(0, t.deltaY);
+          break;
+      }
+      l(_);
+    },
+    [r]
+  ), T = g(
+    (t) => {
+      let D = !1;
+      switch (r) {
+        case "left":
+          D = t.deltaX < -100;
+          break;
+        case "right":
+          D = t.deltaX > 100;
+          break;
+        case "top":
+          D = t.deltaY < -100;
+          break;
+        case "bottom":
+          D = t.deltaY > 100;
+          break;
+      }
+      D && (X("light"), o()), l(0), i(!1);
+    },
+    [r, o]
+  ), { ref: H } = z({
+    enabled: k && e,
+    onPanStart: () => i(!0),
+    onPan: y,
+    onPanEnd: T
+  }), P = g(
+    (t) => {
+      d && t.target === t.currentTarget && o();
+    },
+    [d, o]
+  );
+  if (!e)
+    return null;
+  const R = r === "left" || r === "right", S = R ? { width: typeof f == "number" ? `${f}px` : f } : { height: typeof f == "number" ? `${f}px` : f }, c = () => {
+    if (w)
+      return R ? `translateX(${n}px)` : `translateY(${n}px)`;
+  };
+  return C(
+    /* @__PURE__ */ Y(W, { children: [
+      /* @__PURE__ */ a(
+        "div",
+        {
+          className: `nice-drawer__overlay ${e ? "nice-drawer__overlay--visible" : ""}`,
+          style: { zIndex: N },
+          onClick: P
+        }
+      ),
+      /* @__PURE__ */ a(
+        "div",
+        {
+          ref: (t) => {
+            b.current = t, H.current = t;
+          },
+          className: `nice-drawer nice-drawer--${r} ${e ? "nice-drawer--open" : ""} ${p || ""}`,
+          style: {
+            ...S,
+            zIndex: N + 1,
+            transform: c(),
+            transition: w ? "none" : void 0,
+            ...M
+          },
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": s,
+          tabIndex: -1,
+          children: m
+        }
+      )
+    ] }),
+    document.body
+  );
+}, ee = ({
+  open: e,
+  onClose: o,
+  children: m,
+  title: r,
+  showHandle: f = !0,
+  snapPoints: s = [0.5, 0.9],
+  initialSnap: d = 0,
+  expandable: u = !0,
+  closeOnBackdropClick: k = !0,
+  closeOnEscape: N = !0,
+  hapticFeedback: p = !0,
+  zIndex: M = 1e3,
+  className: b,
+  style: w
+}) => {
+  const i = E(null), n = E(null), [l, y] = L(d), [T, H] = L(!1), [P, R] = L(0), S = E(0);
+  I(() => {
+    e && (y(d), R(0));
+  }, [e, d]), K(i, e), I(() => {
+    if (!N || !e)
+      return;
+    const h = (v) => {
+      v.key === "Escape" && (v.preventDefault(), o());
+    };
+    return document.addEventListener("keydown", h), () => document.removeEventListener("keydown", h);
+  }, [N, e, o]), I(() => {
+    if (e) {
+      const h = document.body.style.overflow;
+      return document.body.style.overflow = "hidden", () => {
+        document.body.style.overflow = h;
+      };
+    }
+  }, [e]);
+  const c = g((h) => {
+    const v = h.target.closest(".nice-bottom-sheet__handle"), B = n.current, j = !B || B.scrollTop <= 0;
+    !v && !j || (H(!0), S.current = h.touches[0].clientY);
+  }, []), t = g(
+    (h) => {
+      if (!T)
+        return;
+      const v = h.touches[0].clientY - S.current;
+      (v > 0 || l < s.length - 1) && R(v);
+    },
+    [T, l, s.length]
+  ), _ = g(() => {
+    if (!T)
+      return;
+    const h = window.innerHeight;
+    s[l] * h;
+    const v = -P, B = h * 0.15;
+    v > B && u && l < s.length - 1 ? (y(l + 1), p && X("selection")) : v < -B && (l > 0 ? (y(l - 1), p && X("selection")) : (p && X("light"), o())), H(!1), R(0);
+  }, [T, P, l, s, u, p, o]), D = g(() => {
+    k && o();
+  }, [k, o]);
+  if (!e)
+    return null;
+  const x = s[l] * 100, $ = T ? P : 0;
+  return C(
+    /* @__PURE__ */ Y(W, { children: [
+      /* @__PURE__ */ a(
+        "div",
+        {
+          className: `nice-bottom-sheet__overlay ${e ? "nice-bottom-sheet__overlay--visible" : ""}`,
+          style: { zIndex: M },
+          onClick: D
+        }
+      ),
+      /* @__PURE__ */ Y(
+        "div",
+        {
+          ref: i,
+          className: `nice-bottom-sheet ${e ? "nice-bottom-sheet--open" : ""} ${b || ""}`,
+          style: {
+            zIndex: M + 1,
+            height: `${x}vh`,
+            transform: `translateY(${Math.max(0, $)}px)`,
+            transition: T ? "none" : "transform 0.3s ease-out, height 0.3s ease-out",
+            ...w
+          },
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": r,
+          tabIndex: -1,
+          onTouchStart: c,
+          onTouchMove: t,
+          onTouchEnd: _,
+          children: [
+            f && /* @__PURE__ */ a("div", { className: "nice-bottom-sheet__handle", "aria-hidden": "true" }),
+            r && /* @__PURE__ */ a("div", { className: "nice-bottom-sheet__title", children: r }),
+            /* @__PURE__ */ a("div", { ref: n, className: "nice-bottom-sheet__content", children: m })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}, te = ({
+  trigger: e,
+  children: o,
+  placement: m = "bottom",
+  triggerMode: r = "click",
+  open: f,
+  onOpenChange: s,
+  hoverDelay: d = 200,
+  offset: u = 8,
+  className: k,
+  showArrow: N = !0
+}) => {
+  const [p, M] = L(!1), b = E(null), w = E(null), i = E(null), n = f !== void 0, l = n ? f : p, y = g(
+    (c) => {
+      n || M(c), s?.(c);
+    },
+    [n, s]
+  );
+  O(w, () => {
+    r !== "manual" && l && y(!1);
+  });
+  const T = g(() => {
+    r === "click" && y(!l);
+  }, [r, l, y]), H = g(() => {
+    r === "hover" && (i.current && window.clearTimeout(i.current), i.current = window.setTimeout(() => y(!0), d));
+  }, [r, d, y]), P = g(() => {
+    r === "hover" && (i.current && window.clearTimeout(i.current), i.current = window.setTimeout(() => y(!1), d));
+  }, [r, d, y]), [R, S] = L({ top: 0, left: 0 });
+  return I(() => {
+    if (!l || !b.current || !w.current)
+      return;
+    const c = b.current.getBoundingClientRect(), t = w.current.getBoundingClientRect(), _ = window.innerWidth, D = window.innerHeight;
+    let x = 0, $ = 0;
+    const [h, v = "center"] = m.split("-");
+    switch (h) {
+      case "top":
+        x = c.top - t.height - u, $ = c.left + (c.width - t.width) / 2;
+        break;
+      case "bottom":
+        x = c.bottom + u, $ = c.left + (c.width - t.width) / 2;
+        break;
+      case "left":
+        x = c.top + (c.height - t.height) / 2, $ = c.left - t.width - u;
+        break;
+      case "right":
+        x = c.top + (c.height - t.height) / 2, $ = c.right + u;
+        break;
+    }
+    h === "top" || h === "bottom" ? (v === "start" && ($ = c.left), v === "end" && ($ = c.right - t.width)) : (v === "start" && (x = c.top), v === "end" && (x = c.bottom - t.height)), $ = Math.max(8, Math.min(_ - t.width - 8, $)), x = Math.max(8, Math.min(D - t.height - 8, x)), S({ top: x, left: $ });
+  }, [l, m, u]), /* @__PURE__ */ Y(W, { children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        ref: b,
+        className: "nice-popover__trigger",
+        onClick: T,
+        onMouseEnter: H,
+        onMouseLeave: P,
+        style: { display: "inline-block" },
+        children: e
+      }
+    ),
+    l && C(
+      /* @__PURE__ */ Y(
+        "div",
+        {
+          ref: w,
+          className: `nice-popover nice-popover--${m} ${k || ""}`,
+          style: {
+            position: "fixed",
+            top: R.top,
+            left: R.left,
+            zIndex: 1100
+          },
+          onMouseEnter: H,
+          onMouseLeave: P,
+          role: "tooltip",
+          children: [
+            N && /* @__PURE__ */ a("div", { className: "nice-popover__arrow" }),
+            /* @__PURE__ */ a("div", { className: "nice-popover__content", children: o })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+}, ne = ({
+  items: e,
+  children: o,
+  onOpen: m,
+  onClose: r,
+  className: f
+}) => {
+  const [s, d] = L(!1), [u, k] = L({ x: 0, y: 0 }), N = E(null), p = E(null);
+  O(N, () => {
+    s && (d(!1), r?.());
+  });
+  const M = g(
+    (i) => {
+      i.preventDefault(), k({ x: i.clientX, y: i.clientY }), d(!0), m?.();
+    },
+    [m]
+  ), b = g(
+    (i) => {
+      !i.disabled && i.onClick && (i.onClick(), d(!1), r?.());
+    },
+    [r]
+  );
+  I(() => {
+    if (!s)
+      return;
+    const i = (n) => {
+      n.key === "Escape" && (d(!1), r?.());
+    };
+    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+  }, [s, r]);
+  const w = (i) => /* @__PURE__ */ a("ul", { className: "nice-context-menu__list", role: "menu", children: i.map((n) => n.divider ? /* @__PURE__ */ a("li", { className: "nice-context-menu__divider", role: "separator" }, n.key) : /* @__PURE__ */ a("li", { role: "presentation", children: /* @__PURE__ */ Y(
+    "button",
+    {
+      type: "button",
+      className: `nice-context-menu__item ${n.disabled ? "nice-context-menu__item--disabled" : ""} ${n.danger ? "nice-context-menu__item--danger" : ""}`,
+      role: "menuitem",
+      disabled: n.disabled,
+      onClick: () => b(n),
+      children: [
+        n.icon && /* @__PURE__ */ a("span", { className: "nice-context-menu__icon", children: n.icon }),
+        /* @__PURE__ */ a("span", { className: "nice-context-menu__label", children: n.label })
+      ]
+    }
+  ) }, n.key)) });
+  return /* @__PURE__ */ Y(W, { children: [
+    /* @__PURE__ */ a("div", { ref: p, onContextMenu: M, style: { display: "contents" }, children: o }),
+    s && C(
+      /* @__PURE__ */ a(
+        "div",
+        {
+          ref: N,
+          className: `nice-context-menu ${f || ""}`,
+          style: {
+            position: "fixed",
+            left: u.x,
+            top: u.y,
+            zIndex: 1200
+          },
+          role: "menu",
+          children: w(e)
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+export {
+  ie as NiceActionSheet,
+  ae as NiceBlockUI,
+  ee as NiceBottomSheet,
+  ce as NiceBox,
+  le as NiceCommandPaletteProvider,
+  ne as NiceContextMenu,
+  Z as NiceDrawer,
+  se as NiceLoadPanel,
+  F as NiceModal,
+  J as NiceModalBody,
+  Q as NiceModalFooter,
+  G as NiceModalHeader,
+  te as NiceOverlayPopover,
+  de as NicePopover,
+  ue as NiceResizable,
+  he as NiceResponsiveBox,
+  me as NiceScrollView,
+  fe as NiceTutorial,
+  ve as NiceTutorialProvider,
+  ge as NiceWindow,
+  be as NiceWindowManager,
+  we as useCommandPalette,
+  ye as useRegisterCommands
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/ui",
-  "version": "1.0.5",
+  "version": "1.0.8",
   "description": "Nice2Dev UI — Universal, themeable, i18n-ready React component library",
   "type": "module",
   "main": "dist/index.cjs",
@@ -12,6 +12,56 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     },
+    "./charts": {
+      "types": "./dist/charts.d.ts",
+      "import": "./dist/charts.mjs",
+      "require": "./dist/charts.cjs"
+    },
+    "./data": {
+      "types": "./dist/data.d.ts",
+      "import": "./dist/data.mjs",
+      "require": "./dist/data.cjs"
+    },
+    "./editors": {
+      "types": "./dist/editors.d.ts",
+      "import": "./dist/editors.mjs",
+      "require": "./dist/editors.cjs"
+    },
+    "./feedback": {
+      "types": "./dist/feedback.d.ts",
+      "import": "./dist/feedback.mjs",
+      "require": "./dist/feedback.cjs"
+    },
+    "./navigation": {
+      "types": "./dist/navigation.d.ts",
+      "import": "./dist/navigation.mjs",
+      "require": "./dist/navigation.cjs"
+    },
+    "./overlays": {
+      "types": "./dist/overlays.d.ts",
+      "import": "./dist/overlays.mjs",
+      "require": "./dist/overlays.cjs"
+    },
+    "./lazy": {
+      "types": "./dist/lazy.d.ts",
+      "import": "./dist/lazy.mjs",
+      "require": "./dist/lazy.cjs"
+    },
+    "./devops": {
+      "types": "./dist/devops.d.ts",
+      "import": "./dist/devops.mjs",
+      "require": "./dist/devops.cjs"
+    },
+    "./no-code": {
+      "types": "./dist/no-code.d.ts",
+      "import": "./dist/no-code.mjs",
+      "require": "./dist/no-code.cjs"
+    },
+    "./data-branching": {
+      "types": "./dist/data-branching.d.ts",
+      "import": "./dist/data-branching.mjs",
+      "require": "./dist/data-branching.cjs"
+    },
     "./style.css": "./dist/style.css"
   },
   "files": [