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

package/dist/ToolIconButton-BezvcpMB.js

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