@yourbestsoft/studio-screen-ui-kit 0.0.12 → 0.0.13

package/dist/ToolIconButton-BeXfpEJ7.js

@@ -0,0 +1,642 @@
+import { jsx as r, jsxs as y, Fragment as z } from "react/jsx-runtime";
+import u from "classnames";
+import U, { forwardRef as k, useEffect as v, useState as O, useCallback as W, useLayoutEffect as Z, createContext as F, useRef as H, useContext as S } from "react";
+import { Eye as tt, EyeOff as et, X as ot, Search as nt } from "lucide-react";
+const st = "_text_4m304_1", rt = "_tertiary_4m304_1", ct = "_secondary_4m304_1", it = "_primary_4m304_1", at = "_fullWidth_4m304_50", lt = "_buttonWithIcon_4m304_54", dt = "_content_4m304_61", ut = "_shortcut_4m304_70", ht = "_disabled_4m304_82", N = {
+  text: st,
+  tertiary: rt,
+  secondary: ct,
+  primary: it,
+  fullWidth: at,
+  buttonWithIcon: lt,
+  content: dt,
+  shortcut: ut,
+  disabled: ht
+}, _t = ({
+  children: t,
+  className: e,
+  component: o = "button",
+  disabled: n,
+  fullWidth: s,
+  icon: i,
+  shortcut: c,
+  variant: l = "primary",
+  ..._
+}, m) => {
+  const a = /* @__PURE__ */ y("div", { className: N.buttonWithIcon, children: [
+    /* @__PURE__ */ y("div", { className: N.content, children: [
+      i,
+      t
+    ] }),
+    /* @__PURE__ */ r("div", { className: N.shortcut, children: c })
+  ] });
+  return /* @__PURE__ */ r(
+    o,
+    {
+      className: u(
+        N[l],
+        s && N.fullWidth,
+        n && N.disabled,
+        i && N.icon,
+        e
+      ),
+      children: i ? a : t,
+      disabled: n,
+      ref: m,
+      ..._
+    }
+  );
+}, Ue = k(_t), mt = "_content_23x5h_1", bt = "_header_23x5h_1", gt = "_root_23x5h_7", pt = "_contentAfterHeader_23x5h_22", R = {
+  content: mt,
+  header: bt,
+  root: gt,
+  contentAfterHeader: pt
+}, M = k(
+  ({ className: t, ...e }, o) => /* @__PURE__ */ r("div", { className: u(R.root, t), ref: o, ...e })
+), ft = k(
+  ({ className: t, ignoreHeader: e, ...o }, n) => /* @__PURE__ */ r(
+    "div",
+    {
+      className: u(
+        R.content,
+        !e && R.contentAfterHeader,
+        t
+      ),
+      ref: n,
+      ...o
+    }
+  )
+), wt = k(
+  ({ className: t, ...e }, o) => /* @__PURE__ */ r("div", { className: u(R.header, t), ref: o, ...e })
+), Ze = Object.assign(M, {
+  Content: ft,
+  Header: wt,
+  Root: M
+}), Ct = (t, e = {}) => {
+  const {
+    enabled: o = !0,
+    preventDefault: n = !1,
+    stopPropagation: s = !1
+  } = e;
+  v(() => {
+    if (!o) return;
+    const i = (c) => {
+      n && c.preventDefault(), s && c.stopPropagation(), t.forEach((l) => l(c));
+    };
+    return window.addEventListener("keydown", i), () => {
+      window.removeEventListener("keydown", i);
+    };
+  }, [t, o, n, s]);
+}, vt = (t, e, o = {}) => (n) => {
+  const {
+    ctrlKey: s = !1,
+    shiftKey: i = !1,
+    altKey: c = !1,
+    metaKey: l = !1
+  } = o;
+  n.key === t && n.ctrlKey === s && n.shiftKey === i && n.altKey === c && n.metaKey === l && e(n);
+}, yt = (t) => vt("Escape", t), kt = (t, e = !0) => (o) => {
+  if (!e || o.key !== "Tab" || !t.current) return;
+  const n = t.current.querySelectorAll(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  ), s = n[0], i = n[n.length - 1];
+  o.shiftKey ? document.activeElement === s && (o.preventDefault(), i?.focus()) : document.activeElement === i && (o.preventDefault(), s?.focus());
+}, xt = (t, e, o) => {
+  v(() => {
+    if (!o) return;
+    const n = (s) => {
+      t.current && !t.current.contains(s.target) && e();
+    };
+    return document.addEventListener("mousedown", n), () => {
+      document.removeEventListener("mousedown", n);
+    };
+  }, [t, e, o]);
+}, Nt = (t, e, o) => {
+  v(() => {
+    if (!e) return;
+    const n = (s) => {
+      s.key === "Escape" && o() && t();
+    };
+    return document.addEventListener("keydown", n), () => {
+      document.removeEventListener("keydown", n);
+    };
+  }, [t, e, o]);
+}, Tt = (t, e, o) => {
+  v(() => {
+    if (o)
+      return window.addEventListener("resize", t), window.addEventListener("scroll", e, !0), () => {
+        window.removeEventListener("resize", t), window.removeEventListener("scroll", e, !0);
+      };
+  }, [t, e, o]);
+}, Et = "_root_ibcdq_1", Ot = "_dropdownContent_ibcdq_6", St = "_left_ibcdq_30", Dt = "_center_ibcdq_34", $t = "_right_ibcdq_39", Wt = "_top_ibcdq_43", qt = "_bottom_ibcdq_47", Pt = "_fixedPosition_ibcdq_51", X = {
+  root: Et,
+  dropdownContent: Ot,
+  left: St,
+  center: Dt,
+  right: $t,
+  top: Wt,
+  bottom: qt,
+  fixedPosition: Pt
+}, Lt = (t, e, o, n, s) => {
+  const [i, c] = O({
+    horizontal: o,
+    left: 0,
+    top: 0,
+    vertical: n
+  }), l = W(() => {
+    const _ = t.current, m = _?.parentElement;
+    if (!_ || !m) return;
+    const a = m.getBoundingClientRect(), d = _.getBoundingClientRect(), p = window.innerWidth, q = window.innerHeight, h = 16;
+    let w = n, C = o, f = 0, g = 0;
+    const P = q - a.bottom, L = a.top;
+    n === "bottom" ? P >= d.height + s + h ? (w = "bottom", f = a.bottom + s - h / 2) : L >= d.height + s + h ? (w = "top", f = a.top - d.height - s) : (w = P > L ? "bottom" : "top", f = w === "bottom" ? a.bottom + s : a.top - d.height - s) : L >= d.height + s + h ? (w = "top", f = a.top - d.height - s - h / 2) : P >= d.height + s + h ? (w = "bottom", f = a.bottom + s - h / 2) : (w = L > P ? "top" : "bottom", f = w === "top" ? a.top - d.height - s : a.bottom + s - h / 2), o === "left" ? (g = a.left, g + d.width > p - h && (g = p - d.width - h, C = "right"), g < h && (g = h, C = "left")) : o === "right" ? (g = a.right - d.width, g < h && (g = h, C = "left"), g + d.width > p - h && (g = p - d.width - h, C = "right")) : (g = a.left + (a.width - d.width) / 2, g < h ? (g = h, C = "left") : g + d.width > p - h && (g = p - d.width - h, C = "right")), f = Math.max(
+      h,
+      Math.min(f, q - d.height - h)
+    ), c({
+      horizontal: C,
+      left: g,
+      top: f,
+      vertical: w
+    });
+  }, [t, n, o, s]);
+  return Z(() => {
+    e && l();
+  }, [e, l]), { calculatePosition: l, position: i };
+}, D = [], Rt = (t, e) => (v(() => {
+  if (e && t.current)
+    return D.push(t.current), () => {
+      const n = D.indexOf(t.current);
+      n !== -1 && D.splice(n, 1);
+    };
+}, [e, t]), { isTopOfStack: W(() => t.current ? D[D.length - 1] === t.current : !1, [t]) }), Y = F(
+  void 0
+), A = () => {
+  const t = S(Y);
+  if (!t)
+    throw new Error("useDropDownContext must be used within a DropDown.Root");
+  return t;
+}, Ht = ({
+  children: t,
+  closeOnEsc: e = !0,
+  closeOnOutsideClick: o = !0,
+  defaultVisible: n = !1
+}) => {
+  const [s, i] = O(n), c = H(null), l = W(() => {
+    i(!1);
+  }, []), _ = W(() => {
+    i((a) => !a);
+  }, []), { isTopOfStack: m } = Rt(c, s);
+  return xt(c, l, o && s), Nt(l, e && s, m), /* @__PURE__ */ r(Y.Provider, { value: { close: l, toggle: _, visible: s }, children: /* @__PURE__ */ r("div", { ref: c, className: X.root, children: t }) });
+}, It = ({ children: t }) => {
+  const { toggle: e } = A();
+  return /* @__PURE__ */ r("div", { onClick: e, children: t });
+}, Kt = ({
+  children: t,
+  className: e,
+  horizontal: o = "left",
+  offset: n = 8,
+  vertical: s = "bottom"
+}) => {
+  const { close: i, visible: c } = A(), l = H(null), { calculatePosition: _, position: m } = Lt(
+    l,
+    c,
+    o,
+    s,
+    n
+  );
+  return v(() => {
+    const a = l.current;
+    if (!a) return;
+    const d = new ResizeObserver(() => _());
+    return d.observe(a), () => d.disconnect();
+  }, [_]), Tt(_, i, c), c ? /* @__PURE__ */ r(
+    "div",
+    {
+      ref: l,
+      className: u(X.dropdownContent, e),
+      style: {
+        left: `${m.left}px`,
+        maxWidth: "calc(100vw - 32px)",
+        minWidth: "150px",
+        // при необходимости:
+        overflowY: "auto",
+        top: `${m.top}px`
+      },
+      children: t
+    }
+  ) : null;
+}, Ft = ({ children: t, onClick: e }) => {
+  const { close: o } = A(), n = W(
+    (s) => {
+      e && e(s), o();
+    },
+    [e, o]
+  );
+  return /* @__PURE__ */ r("div", { onClick: n, children: t });
+}, to = { Close: Ft, Content: Kt, Root: Ht, Trigger: It }, At = "_dialogOverlay_1h2c4_1", Bt = "_dialogTrigger_1h2c4_13", Mt = "_dialogContent_1h2c4_21", Vt = "_dialogClose_1h2c4_34", jt = "_dialogTitle_1h2c4_42", zt = "_dialogSeparator_1h2c4_47", E = {
+  dialogOverlay: At,
+  dialogTrigger: Bt,
+  dialogContent: Mt,
+  dialogClose: Vt,
+  dialogTitle: jt,
+  dialogSeparator: zt
+}, I = U.createContext(null), Xt = ({
+  children: t,
+  isOpen: e,
+  onStateChange: o
+}) => {
+  const n = H(null), [s, i] = O(!1), c = e !== void 0 ? e : s, l = (m) => {
+    e === void 0 && i(m), o && o(m);
+  }, _ = [
+    yt(() => l(!1)),
+    kt(n, c)
+  ];
+  return Ct(_, { enabled: c }), v(() => (c ? document.body.style.overflow = "hidden" : document.body.style.overflow = "unset", () => {
+    document.body.style.overflow = "unset";
+  }), [c]), v(() => {
+    if (c && n.current) {
+      const a = n.current.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )[0];
+      a && a.focus();
+    }
+  }, [c]), /* @__PURE__ */ r(I.Provider, { value: { dialogRef: n, isOpen: c, setIsOpen: l }, children: /* @__PURE__ */ r("div", { children: t }) });
+}, Yt = ({
+  as: t,
+  children: e,
+  ...o
+}) => {
+  const n = S(I);
+  if (!n) throw new Error("Trigger must be used within a Dialog.Root");
+  const { setIsOpen: s } = n;
+  return /* @__PURE__ */ r(
+    t || "button",
+    {
+      onClick: () => {
+        s(!0);
+      },
+      ...o,
+      className: E.dialogTrigger,
+      role: t && t !== "button" ? "button" : void 0,
+      children: e
+    }
+  );
+}, Gt = k(
+  ({ children: t, classNameOverlay: e, className: o, closeOnBackdropClick: n = !0 }, s) => {
+    const i = S(I);
+    if (!i) throw new Error("Content must be used within a Dialog.Root");
+    const { dialogRef: c, isOpen: l, setIsOpen: _ } = i, m = (a) => {
+      n && a.target === a.currentTarget && _(!1);
+    };
+    return l ? /* @__PURE__ */ r(
+      "div",
+      {
+        ref: c,
+        className: u(E.dialogOverlay, e),
+        onClick: m,
+        role: "dialog",
+        "aria-modal": "true",
+        children: /* @__PURE__ */ r(
+          "div",
+          {
+            className: u(E.dialogContent, o),
+            onClick: (a) => a.stopPropagation(),
+            children: t
+          }
+        )
+      }
+    ) : null;
+  }
+), Jt = ({
+  as: t,
+  children: e,
+  ...o
+}) => {
+  const n = S(I);
+  if (!n) throw new Error("Close must be used within a Dialog.Root");
+  const { setIsOpen: s } = n;
+  return /* @__PURE__ */ r(
+    t || "button",
+    {
+      onClick: () => {
+        s(!1);
+      },
+      ...o,
+      className: u(E.dialogClose, o.className),
+      role: t && t !== "button" ? "button" : void 0,
+      children: e
+    }
+  );
+}, Qt = ({ children: t, className: e }) => /* @__PURE__ */ r("h2", { className: u(E.dialogTitle, e), children: t }), Ut = ({}) => /* @__PURE__ */ r("div", { className: E.dialogSeparator }), eo = {
+  Close: Jt,
+  Content: Gt,
+  Root: Xt,
+  Separator: Ut,
+  Title: Qt,
+  Trigger: Yt
+}, Zt = "_sidebar_dg2au_12", te = "_trigger_dg2au_16", ee = "_content_dg2au_21", oe = "_left_dg2au_34", ne = "_open_dg2au_38", se = "_right_dg2au_42", re = "_bottom_dg2au_50", ce = "_top_dg2au_63", T = {
+  sidebar: Zt,
+  trigger: te,
+  content: ee,
+  left: oe,
+  open: ne,
+  right: se,
+  bottom: re,
+  top: ce
+}, G = F(
+  void 0
+), B = () => {
+  const t = S(G);
+  if (!t)
+    throw new Error("useSidebarContext must be used within a SidebarProvider");
+  return t;
+}, ie = ({ children: t, isOpen: e, setIsOpen: o }) => /* @__PURE__ */ r(
+  G.Provider,
+  {
+    value: {
+      isOpen: e,
+      setIsOpen: () => o(!e)
+    },
+    children: t
+  }
+), ae = ({ children: t }) => {
+  const { setIsOpen: e } = B(), o = (n) => {
+    n.preventDefault(), e(!0);
+  };
+  return /* @__PURE__ */ r("div", { className: T.trigger, onClick: o, children: t });
+}, le = ({
+  children: t,
+  className: e,
+  closeOnOutsideClick: o = !0,
+  position: n = "right"
+}) => {
+  const { isOpen: s, setIsOpen: i } = B(), c = H(null);
+  return v(() => {
+    if (!o) return;
+    const l = (_) => {
+      c.current && !c.current.contains(_.target) && i(!1);
+    };
+    return s && document.addEventListener("mousedown", l), () => {
+      document.removeEventListener("mousedown", l);
+    };
+  }, [s, i, o]), /* @__PURE__ */ r(
+    "div",
+    {
+      ref: c,
+      className: u(
+        T[n],
+        T.content,
+        {
+          [T.close]: !s,
+          [T.open]: s
+        },
+        e
+      ),
+      children: t
+    }
+  );
+}, de = ({ children: t }) => {
+  const { setIsOpen: e } = B(), o = (n) => {
+    n.preventDefault(), e(!1);
+  };
+  return /* @__PURE__ */ r("button", { className: T.close, onClick: o, children: t });
+}, oo = {
+  Close: de,
+  Content: le,
+  Root: ie,
+  Trigger: ae
+}, ue = "_switcher_k6tdq_1", he = "_buttons_k6tdq_6", _e = "_separator_k6tdq_10", K = {
+  switcher: ue,
+  buttons: he,
+  separator: _e
+}, no = k(
+  ({
+    className: t,
+    component: e,
+    componentValues: o,
+    containerProps: n,
+    onChange: s,
+    selectedValue: i,
+    slot: c
+  }, l) => {
+    const [_, m] = O(
+      i || o[0].value
+    ), a = (d) => {
+      m(d), s && s(d);
+    };
+    return /* @__PURE__ */ y("div", { ref: l, className: K.switcher, ...n, children: [
+      /* @__PURE__ */ r("div", { className: u(K.buttons, t), children: o.map((d, p) => /* @__PURE__ */ r(
+        e,
+        {
+          ...d,
+          selected: _ === d.value,
+          onClick: () => a(d.value)
+        },
+        p
+      )) }),
+      c && /* @__PURE__ */ y(z, { children: [
+        /* @__PURE__ */ r("div", { className: K.separator }),
+        c
+      ] })
+    ] });
+  }
+), me = "_root_1b0i5_13", be = "_header_1b0i5_19", ge = "_footer_1b0i5_23", pe = "_row_1b0i5_28", fe = "_body_1b0i5_41", we = "_head_1b0i5_19", Ce = "_cell_1b0i5_48", ve = "_caption_1b0i5_65", ye = "_storiesFooterCellOne_1b0i5_70", ke = "_storiesFooterCellTwo_1b0i5_73", x = {
+  root: me,
+  header: be,
+  footer: ge,
+  row: pe,
+  body: fe,
+  head: we,
+  cell: Ce,
+  caption: ve,
+  storiesFooterCellOne: ye,
+  storiesFooterCellTwo: ke
+}, V = ({ children: t, className: e }) => /* @__PURE__ */ r("table", { className: u(x.root, e), children: t }), xe = ({ children: t, className: e }) => /* @__PURE__ */ r("caption", { className: u(x.caption, e), children: t }), Ne = ({ children: t, className: e }) => /* @__PURE__ */ r("thead", { className: u(x.header, e), children: t }), Te = ({
+  children: t,
+  className: e,
+  onBlur: o,
+  onClick: n,
+  onDoubleClick: s
+}) => /* @__PURE__ */ r(
+  "tr",
+  {
+    className: u(x.row, e),
+    onClick: n,
+    onDoubleClick: s,
+    onBlur: o,
+    children: t
+  }
+), Ee = ({ children: t, className: e }) => /* @__PURE__ */ r("th", { className: u(x.head, e), children: t }), Oe = ({ children: t, className: e }) => /* @__PURE__ */ r("tbody", { className: u(x.body, e), children: t }), Se = ({ children: t, className: e }) => /* @__PURE__ */ r("td", { className: u(x.cell, e), children: t }), De = ({ children: t, className: e }) => /* @__PURE__ */ r("tfoot", { className: u(x.footer, e), children: t }), so = Object.assign(V, {
+  Body: Oe,
+  Caption: xe,
+  Cell: Se,
+  Footer: De,
+  Head: Ee,
+  Header: Ne,
+  Root: V,
+  Row: Te
+}), $e = "_inputContainer_iqbs3_1", We = "_input_iqbs3_1", qe = "_inputSearch_iqbs3_40", Pe = "_error_iqbs3_43", Le = "_button_iqbs3_58", Re = "_buttonWithLabel_iqbs3_68", He = "_resetSearchValue_iqbs3_73", Ie = "_searchOutline_iqbs3_80", Ke = "_errorMessage_iqbs3_87", b = {
+  inputContainer: $e,
+  input: We,
+  inputSearch: qe,
+  error: Pe,
+  button: Le,
+  buttonWithLabel: Re,
+  resetSearchValue: He,
+  searchOutline: Ie,
+  errorMessage: Ke
+}, ro = k(({ className: t, error: e, label: o, onChange: n, required: s, ...i }, c) => {
+  const [l, _] = O(!1), m = (p) => n(p.currentTarget.value), a = u(b.input, e && b.error, t);
+  let d;
+  if (!i.as || i.as === "input") {
+    const { inputType: p, ...q } = i, h = p === "search", w = p === "password", C = l ? "text" : "password";
+    d = /* @__PURE__ */ y(z, { children: [
+      /* @__PURE__ */ r(
+        "input",
+        {
+          className: u(a, h && b.inputSearch),
+          onChange: m,
+          ref: c,
+          type: w ? C : p,
+          ...q
+        }
+      ),
+      w && (l ? /* @__PURE__ */ r(
+        tt,
+        {
+          strokeWidth: 2.5,
+          width: 20,
+          className: u(b.button, o && b.buttonWithLabel),
+          onClick: () => _((f) => !f)
+        }
+      ) : /* @__PURE__ */ r(
+        et,
+        {
+          strokeWidth: 2.5,
+          width: 20,
+          className: u(b.button, o && b.buttonWithLabel),
+          onClick: () => _((f) => !f)
+        }
+      )),
+      h && i.value && /* @__PURE__ */ r(
+        ot,
+        {
+          onClick: () => n(""),
+          className: u(
+            b.button,
+            o && b.buttonWithLabel,
+            b.resetSearchValue
+          ),
+          strokeWidth: 2.5,
+          size: 24
+        }
+      ),
+      h && /* @__PURE__ */ r(
+        nt,
+        {
+          className: u(
+            b.searchOutline,
+            o && b.searchOutlineWithLabel
+          ),
+          size: 20
+        }
+      )
+    ] });
+  }
+  return i.as === "textarea" && (d = /* @__PURE__ */ r(
+    "textarea",
+    {
+      className: a,
+      onChange: m,
+      ref: c,
+      ...i
+    }
+  )), /* @__PURE__ */ y("div", { className: b.root, children: [
+    /* @__PURE__ */ y("span", { className: b.title, children: [
+      o,
+      s && /* @__PURE__ */ r("span", { className: b.titleError, children: "*" })
+    ] }),
+    /* @__PURE__ */ r("div", { className: b.inputContainer, children: d }),
+    /* @__PURE__ */ r("div", { className: b.errorMessage, children: e })
+  ] });
+}), J = F(void 0), co = ({ children: t }) => {
+  const e = Q() || "system", [o, n] = O(e);
+  return /* @__PURE__ */ r(J.Provider, { value: { setTheme: n, theme: o }, children: t });
+}, io = () => {
+  const t = S(J);
+  if (!t)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return Fe(t.theme), t;
+}, Fe = (t) => {
+  const e = Q();
+  Ae(t || e);
+}, Ae = (t) => {
+  const e = window.matchMedia("(prefers-color-scheme: dark)");
+  if (t === "system") {
+    const o = e.matches ? "dark" : "light";
+    localStorage.setItem("theme", t), j(o);
+  } else
+    localStorage.setItem("theme", t), j(t);
+}, j = (t) => {
+  document.documentElement.setAttribute("data-theme", t);
+}, Q = () => {
+  const t = localStorage.getItem("theme");
+  if (t) return t;
+}, Be = "_root_17w6h_1", Me = "_icon_17w6h_11", Ve = "_active_17w6h_27", je = "_disabled_17w6h_31", ze = "_keybinding_17w6h_44", $ = {
+  root: Be,
+  icon: Me,
+  active: Ve,
+  disabled: je,
+  keybinding: ze
+}, ao = k(
+  (t, e) => {
+    const { classes: o, disabled: n, icon: s, isActive: i, keybinding: c, onClick: l, title: _ } = t, m = Xe(o, i, n);
+    return /* @__PURE__ */ y("label", { className: $.root, title: _, children: [
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: m.icon,
+          ref: e,
+          tabIndex: n ? -1 : 0,
+          role: "button",
+          "aria-pressed": i,
+          "aria-disabled": n,
+          onClick: n ? void 0 : l,
+          children: s
+        }
+      ),
+      c && /* @__PURE__ */ r("span", { className: m.keybinding, children: c })
+    ] });
+  }
+), Xe = (t, e, o) => ({
+  icon: u(
+    $.icon,
+    {
+      [$.active]: e,
+      [$.disabled]: o
+    },
+    t?.icon
+  ),
+  keybinding: u($.keybinding, t?.keybinding)
+});
+export {
+  Ue as B,
+  M as C,
+  to as D,
+  G as S,
+  so as T,
+  io as a,
+  _t as b,
+  ft as c,
+  wt as d,
+  Ze as e,
+  eo as f,
+  B as g,
+  oo as h,
+  no as i,
+  ro as j,
+  ao as k,
+  co as l,
+  Ct as u
+};
+//# sourceMappingURL=ToolIconButton-BeXfpEJ7.js.map