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

package/dist/ToolIconButton-BezvcpMB.js

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