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

package/dist/ToolIconButton--CJQ-oPC.js

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