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

package/dist/ToolIconButton-BeXfpEJ7.js

@@ -1,642 +0,0 @@
-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