@unicom-cloud/ui 0.8.115 → 0.8.116

package/color-picker/InputHex.js

@@ -1,26 +1,28 @@
+/* 2025-10-30 15:47:58 */
 import { jsxs as C, jsx as p } from "react/jsx-runtime";
-import c from "@unicom-cloud/utils/tinycolor";
+import m from "@unicom-cloud/utils/tinycolor";
 import { useContext as v, useState as I, useEffect as j } from "react";
-import { a as D } from "../chunk/DstheLSK.js";
-import m from "../input/Input.js";
-import { InputAlpha as H } from "./InputAlpha.js";
-const E = ({
-  color: n,
+import "../config-provider/ConfigProvider.js";
+import c from "../input/Input.js";
+import { InputAlpha as D } from "./InputAlpha.js";
+import H from "../config-provider/context.js";
+const N = ({
+  color: o,
   alpha: f,
   onHsvChange: u,
   onAlphaChange: x,
   disabledAlpha: h
 }) => {
-  const { getPrefixCls: l } = v(D), s = l?.("color-picker"), [o, r] = I(n.hex);
+  const { getPrefixCls: l } = v(H), s = l?.("color-picker"), [n, r] = I(o.hex);
   j(() => {
-    n.hex !== o && r(n.hex);
-  }, [n]);
-  const a = (e) => {
+    o.hex !== n && r(o.hex);
+  }, [o]);
+  const i = (e) => {
     const t = e.match(/[a-fA-F0-9]*/g)?.join("") ?? "";
-    t !== o && r(t.toUpperCase());
-  }, i = () => {
-    let e = new c(o);
-    e.ok || (e = new c({
+    t !== n && r(t.toUpperCase());
+  }, a = () => {
+    let e = new m(n);
+    e.ok || (e = new m({
       r: 255,
       g: 0,
       b: 0
@@ -29,26 +31,26 @@ const E = ({
     u(t);
   }, g = (e) => {
     let t = e.clipboardData.getData("Text");
-    t.startsWith("#") && (t = t.slice(1)), a(t), e.preventDefault();
+    t.startsWith("#") && (t = t.slice(1)), i(t), e.preventDefault();
   };
-  return /* @__PURE__ */ C(m.Group, { className: `${s}-input-group`, compact: !0, children: [
+  return /* @__PURE__ */ C(c.Group, { className: `${s}-input-group`, compact: !0, children: [
     /* @__PURE__ */ p(
-      m,
+      c,
       {
         className: `${s}-input-hex`,
         prefix: "#",
         size: "mini",
         maxLength: 6,
-        value: o,
-        onChange: a,
-        onBlur: i,
-        onPressEnter: i,
+        value: n,
+        onChange: i,
+        onBlur: a,
+        onPressEnter: a,
         onPaste: g
       }
     ),
-    !h && /* @__PURE__ */ p(H, { value: f, onChange: x })
+    !h && /* @__PURE__ */ p(D, { value: f, onChange: x })
   ] });
 };
 export {
-  E as InputHex
+  N as InputHex
 };

package/color-picker/InputRgb.js

@@ -1,25 +1,28 @@
+/* 2025-10-30 15:47:58 */
 import { jsxs as h, jsx as n } from "react/jsx-runtime";
-import x from "@unicom-cloud/utils/tinycolor";
-import { useContext as f } from "react";
-import { a as b } from "../chunk/DstheLSK.js";
-import I, { InputNumber as m } from "../input/Input.js";
-import { InputAlpha as d } from "./InputAlpha.js";
-const A = ({
-  color: s,
-  alpha: p,
+import f from "@unicom-cloud/utils/tinycolor";
+import { useContext as x } from "react";
+import "../config-provider/ConfigProvider.js";
+import b from "../input/Input.js";
+import m from "../input-number/index.js";
+import { InputAlpha as I } from "./InputAlpha.js";
+import d from "../config-provider/context.js";
+const H = ({
+  color: p,
+  alpha: s,
   onHsvChange: u,
-  onAlphaChange: a,
-  disabledAlpha: c
+  onAlphaChange: c,
+  disabledAlpha: C
 }) => {
-  const { getPrefixCls: C } = f(b), g = C?.("color-picker"), r = (o) => {
-    const l = new x({
+  const { getPrefixCls: a } = x(d), g = a?.("color-picker"), r = (o) => {
+    const l = new f({
       r: o.r,
       g: o.g,
       b: o.b
     }).toHsv_();
     u(l);
-  }, { r: t, g: e, b: i } = s.rgb;
-  return /* @__PURE__ */ h(I.Group, { className: `${g}-input-group`, compact: !0, children: [
+  }, { r: t, g: e, b: i } = p.rgb;
+  return /* @__PURE__ */ h(b.Group, { className: `${g}-input-group`, compact: !0, children: [
     /* @__PURE__ */ n(
       m,
       {
@@ -53,9 +56,9 @@ const A = ({
         onChange: (o) => r({ r: t, g: e, b: o })
       }
     ),
-    !c && /* @__PURE__ */ n(d, { value: p, onChange: a })
+    !C && /* @__PURE__ */ n(I, { value: s, onChange: c })
   ] });
 };
 export {
-  A as InputRgb
+  H as InputRgb
 };

package/color-picker/Mode.js

@@ -1,11 +1,13 @@
-import i from "lodash/isArray";
+/* 2025-10-30 15:47:58 */
+import "../dist/ui-common/utils/is.js";
 import { ColorPickerMode as t } from "./interface.js";
-const e = (r) => i(r) && r.length === 1 ? r[0] : r, f = (r) => e(r) === t.Single, d = (r) => e(r) === t.Gradient, s = (r) => i(e(r)), g = (r) => s(r) ? t.Gradient : r, p = (r, n, o) => r && i(r) ? t.Gradient : r && typeof r == "string" ? t.Single : n && i(n) ? t.Gradient : n && typeof n == "string" ? t.Single : g(o);
+import { isArray as i, isString as o } from "@unicom-cloud/utils/is";
+const e = (r) => i(r) && r.length === 1 ? r[0] : r, u = (r) => e(r) === t.Single, G = (r) => e(r) === t.Gradient, g = (r) => i(e(r)), c = (r) => g(r) ? t.Gradient : r, S = (r, n, s) => r && i(r) ? t.Gradient : r && o(r) ? t.Single : n && i(n) ? t.Gradient : n && o(n) ? t.Single : c(s);
 export {
-  g as getInitialActiveMode,
+  c as getInitialActiveMode,
   e as getMode,
-  p as getModeByValue,
-  d as isGradientMode,
-  s as isMultiMode,
-  f as isSingleMode
+  S as getModeByValue,
+  G as isGradientMode,
+  g as isMultiMode,
+  u as isSingleMode
 };

package/color-picker/Palette.js

@@ -1,13 +1,15 @@
+/* 2025-10-30 15:47:58 */
 import { jsx as s } from "react/jsx-runtime";
-import C from "@unicom-cloud/utils/tinycolor";
+import u from "@unicom-cloud/utils/tinycolor";
 import { useContext as d, useMemo as h } from "react";
-import { a as g } from "../chunk/DstheLSK.js";
-import { u as x } from "../chunk/CQPG8hFg.js";
-const R = ({ color: l, onChange: c }) => {
-  const { getPrefixCls: a } = d(g), e = a?.("color-picker"), { h: r, s: t, v: n } = l.hsv, { blockRef: i, handlerRef: f, onMouseDown: m } = x({
+import "../config-provider/ConfigProvider.js";
+import { useControlBlock as g } from "./hooks/useControlBlock.js";
+import x from "../config-provider/context.js";
+const w = ({ color: l, onChange: c }) => {
+  const { getPrefixCls: i } = d(x), e = i?.("color-picker"), { h: r, s: t, v: n } = l.hsv, { blockRef: m, handlerRef: f, onMouseDown: a } = g({
     value: [t, 1 - n],
     onChange: (o) => c(o[0], 1 - o[1])
-  }), p = h(() => new C({ h: r * 360, s: 100, v: 100 }).toRgbString(), [r]), u = () => /* @__PURE__ */ s(
+  }), p = h(() => new u({ h: r * 360, s: 100, v: 100 }).toRgbString(), [r]), C = () => /* @__PURE__ */ s(
     "div",
     {
       ref: f,
@@ -21,14 +23,14 @@ const R = ({ color: l, onChange: c }) => {
   return /* @__PURE__ */ s(
     "div",
     {
-      ref: i,
+      ref: m,
       className: `${e}-palette`,
       style: { backgroundColor: p },
-      onMouseDown: m,
-      children: u()
+      onMouseDown: a,
+      children: C()
     }
   );
 };
 export {
-  R as Palette
+  w as Palette
 };

package/color-picker/Panel.js

@@ -1,20 +1,25 @@
+/* 2025-10-30 15:47:58 */
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import d from "@unicom-cloud/utils/tinycolor";
-import { useContext as ir, useState as ar, useMemo as sr } from "react";
-import { a as dr } from "../chunk/DstheLSK.js";
-import { R as C } from "../chunk/CxbF1opI.js";
-import mr from "../select/Select.js";
+import { useContext as cr, useState as ar, useMemo as sr } from "react";
+import "../config-provider/ConfigProvider.js";
+import C from "../radio/Radio.js";
+import "../radio/Group.js";
+import dr from "../select/Select.js";
 import E from "../tooltip/index.js";
-import ur from "@unicom-cloud/utils/class-name";
+import mr from "@unicom-cloud/utils/class-name";
+import "../dist/ui-common/utils/is.js";
 import { ControlBar as k } from "./ControlBar.js";
-import { InputHex as pr } from "./InputHex.js";
-import { InputRgb as gr } from "./InputRgb.js";
-import { ColorPickerMode as H } from "./interface.js";
-import { isMultiMode as X, isGradientMode as _ } from "./Mode.js";
-import { Palette as br } from "./Palette.js";
-import { renderBackground as fr, sortGradientColors as D, getColorByGradients as vr } from "./utils.js";
-const Tr = ({
-  value: F,
+import { InputHex as ur } from "./InputHex.js";
+import { InputRgb as pr } from "./InputRgb.js";
+import { ColorPickerMode as F } from "./interface.js";
+import { isMultiMode as H, isGradientMode as X } from "./Mode.js";
+import { Palette as gr } from "./Palette.js";
+import { renderBackground as br, sortGradientColors as _, getColorByGradients as vr } from "./utils.js";
+import fr from "../config-provider/context.js";
+import { isFunction as hr } from "@unicom-cloud/utils/is";
+const Fr = ({
+  value: D,
   mode: y,
   activeMode: h,
   gradientColors: m,
@@ -23,10 +28,10 @@ const Tr = ({
   color: a,
   alpha: u,
   disabledAlpha: $,
-  historyColors: w,
+  historyColors: x,
   presetColors: L,
-  showHistory: x,
-  showPreset: S,
+  showHistory: S,
+  showPreset: w,
   renderPreset: P,
   renderHistory: R,
   renderPickSection: B,
@@ -37,17 +42,17 @@ const Tr = ({
   onGradientColorsChange: M,
   onActiveColorIdChange: I
 }) => {
-  const { getPrefixCls: Q, locale: g } = ir(dr), r = Q?.("color-picker"), [T, U] = ar("hex"), j = sr(() => {
-    const n = new Set(w ?? []);
+  const { getPrefixCls: Q, locale: g } = cr(fr), r = Q?.("color-picker"), [T, U] = ar("hex"), j = sr(() => {
+    const n = new Set(x ?? []);
     return Array.from(n);
-  }, [w]), { h: z, s: V, v: W } = a.hsv, { r: b, g: f, b: v } = a.rgb, Y = (n) => {
-    let c = new d(n);
-    c.ok || (c = new d({
+  }, [x]), { h: z, s: V, v: W } = a.hsv, { r: b, g: v, b: f } = a.rgb, Y = (n) => {
+    let i = new d(n);
+    i.ok || (i = new d({
       r: 255,
       g: 0,
       b: 0
     }));
-    const t = c.toHsv_();
+    const t = i.toHsv_();
     s(t);
   }, Z = () => /* @__PURE__ */ l(
     C.Group,
@@ -58,24 +63,24 @@ const Tr = ({
       value: h,
       onChange: O,
       children: [
-        /* @__PURE__ */ e(C, { value: H.Single, children: g?.ColorPicker.singleColor }),
-        /* @__PURE__ */ e(C, { value: H.Gradient, children: g?.ColorPicker.gradientColor })
+        /* @__PURE__ */ e(C, { value: F.Single, children: g?.ColorPicker.singleColor }),
+        /* @__PURE__ */ e(C, { value: F.Gradient, children: g?.ColorPicker.gradientColor })
       ]
     }
   ), A = (n) => {
-    const c = Math.round(n * 100);
-    M((t) => D(
+    const i = Math.round(n * 100);
+    M((t) => _(
       t.map((o) => o.id === K.current ? {
         ...o,
-        percent: c
+        percent: i
       } : o)
     ));
   }, rr = () => {
     const n = (t) => {
-      const o = Math.round(t * 100), i = vr(m, o), N = D(m.concat(i));
-      M(N), I(i.id), s(i.color.hsv), p(i.alpha);
-    }, c = (t) => {
-      const o = m.find((i) => i.id === t);
+      const o = Math.round(t * 100), c = vr(m, o), N = _(m.concat(c));
+      M(N), I(c.id), s(c.color.hsv), p(c.alpha);
+    }, i = (t) => {
+      const o = m.find((c) => c.id === t);
       I(t), s(o.color.hsv), p(o.alpha);
     };
     return /* @__PURE__ */ e("div", { className: `${r}-control-bar-gradient`, children: /* @__PURE__ */ e(
@@ -88,9 +93,9 @@ const Tr = ({
         })),
         onAdd: n,
         onChange: A,
-        onActive: c,
+        onActive: i,
         style: {
-          background: fr(F)
+          background: br(D)
         },
         renderHandlerStyle: (t) => J === t ? {
           outline: "1px solid rgb(var(--pqb-primary-6))"
@@ -98,18 +103,18 @@ const Tr = ({
         renderHandlerCenterStyle: (t) => {
           const {
             color: {
-              rgb: { r: o, g: i, b: N }
+              rgb: { r: o, g: c, b: N }
             },
             alpha: lr
-          } = m.find((cr) => cr.id === t);
+          } = m.find((ir) => ir.id === t);
           return {
-            background: new d({ r: o, g: i, b: N, a: lr }).toRgbaString()
+            background: new d({ r: o, g: c, b: N, a: lr }).toRgbaString()
           };
         }
       }
     ) });
   }, er = () => T === "rgb" ? /* @__PURE__ */ e(
-    gr,
+    pr,
     {
       color: a,
       alpha: u,
@@ -118,7 +123,7 @@ const Tr = ({
       disabledAlpha: $
     }
   ) : /* @__PURE__ */ e(
-    pr,
+    ur,
     {
       color: a,
       alpha: u,
@@ -142,13 +147,13 @@ const Tr = ({
       )
     },
     n
-  ) }, n), nr = () => R ? R() : x ? /* @__PURE__ */ l("div", { className: `${r}-colors-section`, children: [
+  ) }, n), nr = () => R ? R() : S ? /* @__PURE__ */ l("div", { className: `${r}-colors-section`, children: [
     /* @__PURE__ */ e("div", { className: `${r}-colors-text`, children: g?.ColorPicker.history }),
     /* @__PURE__ */ e("div", { className: `${r}-colors-wrapper`, children: j?.length ? /* @__PURE__ */ e("div", { className: `${r}-colors-list`, children: j.map(q) }) : /* @__PURE__ */ e("span", { className: `${r}-colors-empty`, children: g?.ColorPicker.empty }) })
-  ] }) : null, tr = () => P ? P() : S ? /* @__PURE__ */ l("div", { className: `${r}-colors-section`, children: [
+  ] }) : null, tr = () => P ? P() : w ? /* @__PURE__ */ l("div", { className: `${r}-colors-section`, children: [
     /* @__PURE__ */ e("div", { className: `${r}-colors-text`, children: g?.ColorPicker.preset }),
     /* @__PURE__ */ e("div", { className: `${r}-colors-wrapper`, children: /* @__PURE__ */ e("div", { className: `${r}-colors-list`, children: L?.map?.(q) }) })
-  ] }) : null, or = () => B ? B() : x || S ? /* @__PURE__ */ l("div", { className: `${r}-panel-colors`, children: [
+  ] }) : null, or = () => B ? B() : S || w ? /* @__PURE__ */ l("div", { className: `${r}-panel-colors`, children: [
     nr(),
     tr()
   ] }) : null;
@@ -156,18 +161,18 @@ const Tr = ({
     /* @__PURE__ */ l(
       "div",
       {
-        className: ur(
-          (X(y) || _(h)) && `${r}-panel-control-gradient`
+        className: mr(
+          (H(y) || X(h)) && `${r}-panel-control-gradient`
         ),
         children: [
-          X(y) && Z(),
-          _(h) && rr(),
+          H(y) && Z(),
+          X(h) && rr(),
           /* @__PURE__ */ e(
-            br,
+            gr,
             {
               color: a,
-              onChange: (n, c) => {
-                s({ h: z, s: n, v: c });
+              onChange: (n, i) => {
+                s({ h: z, s: n, v: i });
               }
             }
           )
@@ -184,7 +189,7 @@ const Tr = ({
               value: z,
               onChange: (n) => s({ h: n, s: V, v: W }),
               renderHandlerCenterStyle: () => ({
-                background: new d({ r: b, g: f, b: v }).toRgbString()
+                background: new d({ r: b, g: v, b: f }).toRgbString()
               })
             }
           ),
@@ -193,15 +198,15 @@ const Tr = ({
             {
               className: `${r}-control-bar-alpha`,
               style: {
-                background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${b}, ${f}, ${v}))`
+                background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${b}, ${v}, ${f}))`
               },
               value: u,
               onChange: p,
               renderHandlerCenterStyle: () => ({
                 background: new d({
                   r: b,
-                  g: f,
-                  b: v,
+                  g: v,
+                  b: f,
                   a: u
                 }).toRgbaString()
               })
@@ -215,8 +220,8 @@ const Tr = ({
             style: {
               backgroundColor: new d({
                 r: b,
-                g: f,
-                b: v,
+                g: v,
+                b: f,
                 a: u
               }).toRgbaString()
             }
@@ -225,7 +230,7 @@ const Tr = ({
       ] }),
       /* @__PURE__ */ l("div", { className: `${r}-input-wrapper`, children: [
         /* @__PURE__ */ e(
-          mr,
+          dr,
           {
             className: `${r}-select-type`,
             size: "mini",
@@ -247,7 +252,7 @@ const Tr = ({
             triggerProps: {
               className: `${r}-type-dropdown`,
               getPopupContainer() {
-                return window.document.body;
+                return document.body;
               }
             },
             onChange: U
@@ -257,9 +262,9 @@ const Tr = ({
       ] })
     ] }),
     or(),
-    typeof G == "function" ? G() : null
+    hr(G) ? G() : null
   ] });
 };
 export {
-  Tr as Panel
+  Fr as Panel
 };

package/color-picker/colors.js

@@ -1,3 +1,4 @@
+/* 2025-10-30 15:47:58 */
 import t from "@unicom-cloud/utils/tinycolor";
 import * as e from "@unicom-cloud/utils/ui-color";
 new t("#eee");

package/color-picker/hooks/useColorPicker.js

@@ -0,0 +1,127 @@
+/* 2025-10-30 15:47:58 */
+import k from "@unicom-cloud/utils/tinycolor";
+import { useState as g, useRef as y, useMemo as G, useCallback as F, useEffect as H } from "react";
+import $ from "../../dist/ui-common/hooks/use-is-first-render/index.js";
+import q from "../../dist/ui-common/hooks/use-merge-value/index.js";
+import "../../dist/ui-common/utils/is.js";
+import { ColorPickerMode as M } from "../interface.js";
+import { getModeByValue as w, isGradientMode as R, isSingleMode as oo } from "../Mode.js";
+import { mapValueToGradientColor as eo, getColorFromHsv as E, formatRgba as to, formatHex as ro, isEqualsColors as no, equalsHsv as io, getRandomId as T } from "../utils.js";
+import { isArray as B, isFunction as so } from "@unicom-cloud/utils/is";
+const po = (i) => {
+  const {
+    mode: j = M.Single,
+    defaultValue: z,
+    format: _,
+    onChange: D,
+    disabledAlpha: h
+  } = i, J = $(), [p, K] = q(!1, {
+    defaultValue: i.defaultPopupVisible,
+    value: i.popupVisible
+  }), [s, L] = g(
+    w(
+      i.value,
+      z,
+      j
+    )
+  ), [r, N] = q(
+    s === M.Gradient ? void 0 : "",
+    i
+  ), [x, O] = g(
+    R(s) && B(r) ? eo(r, h) : []
+  ), [Q, U] = g(x[0]?.id), m = y(x), b = y(Q), e = m.current, V = b.current, v = (o) => {
+    O(o), m.current = so(o) ? o(m.current) : o;
+  }, S = (o) => {
+    U(o), b.current = o;
+  }, c = G(() => {
+    const o = e.findIndex(
+      (t) => t.id === V
+    );
+    return o !== -1 ? o : 0;
+  }, [e, V]), u = B(r) ? new k(r[c].color).toHsv_() : new k(r).toHsv_(), [d, P] = g({
+    h: u.h,
+    s: u.s,
+    v: u.v
+  }), [n, A] = g(u.a), f = G(() => E(d), [d]), I = F(
+    (o, t, a, l) => _ === "rgb" ? to(o, t, a, l) : ro(o, t, a, l),
+    [_]
+  ), C = G(() => {
+    if (oo(s)) {
+      const { r: o, g: t, b: a } = f.rgb;
+      return I(o, t, a, n);
+    }
+    return e.map((o) => {
+      const { r: t, g: a, b: l } = o.color.rgb;
+      return {
+        color: I(t, a, l, o.alpha),
+        percent: o.percent
+      };
+    });
+  }, [s, e, f.rgb, I, n]);
+  H(() => {
+    N(C), !J && !no(r, C) && D?.(C);
+  }, [C]);
+  const W = F(
+    (o) => {
+      if (o && r !== C) {
+        const { h: t, s: a, v: l, a: Z } = u;
+        P({ h: t, s: a, v: l }), A(Z);
+      }
+      o !== p && (i.onVisibleChange?.(o), "popupVisible" in i || K(o));
+    },
+    [i.onVisibleChange, p, r]
+  ), X = (o) => {
+    P(o), h && n !== 100 && A(100);
+  }, Y = (o) => {
+    A(o);
+  };
+  return H(() => {
+    if (!R(s) || !e.length || io(e[c].color.hsv, d)) return;
+    const o = [...e];
+    o[c] = {
+      ...o[c],
+      color: E(d)
+    }, v(o);
+  }, [d]), H(() => {
+    if (!R(s) || !e.length || e[c].alpha === n) return;
+    const o = [...e];
+    o[c] = {
+      ...o[c],
+      alpha: h ? 100 : n
+    }, v(o);
+  }, [n]), {
+    value: r,
+    activeMode: s,
+    gradientColors: e,
+    gradientColorsRef: m,
+    activeColorId: V,
+    activeColorIdRef: b,
+    popupVisible: p,
+    color: f,
+    alpha: n,
+    onHsvChange: X,
+    onAlphaChange: Y,
+    onVisibleChange: W,
+    onActiveModeChange: (o) => {
+      o !== s && (o === M.Single ? S(e[0]?.id) : v([
+        {
+          id: T(),
+          color: f,
+          alpha: n,
+          percent: 0
+        },
+        {
+          id: T(),
+          color: f,
+          alpha: n,
+          percent: 100
+        }
+      ]), L(o));
+    },
+    onActiveColorIdChange: S,
+    onGradientColorsChange: v
+  };
+};
+export {
+  po as useColorPicker
+};

package/color-picker/hooks/useControlBlock.js

@@ -0,0 +1,59 @@
+/* 2025-10-30 15:47:58 */
+import { useState as h, useRef as w, useEffect as y } from "react";
+import "../../dist/ui-common/utils/is.js";
+import { isUndefined as R } from "@unicom-cloud/utils/is";
+function D({
+  value: s,
+  multiple: r = !1,
+  onActive: m,
+  onAdd: v,
+  onChange: g
+}) {
+  const [l, u] = h(!1), i = w(void 0), E = w(void 0);
+  function c(e, t) {
+    return e < 0 ? 0 : e > t ? 1 : e / t;
+  }
+  function f(e) {
+    const { clientX: t, clientY: k } = e, o = i.current?.getBoundingClientRect?.();
+    return o ? [
+      c(t - o.x, o.width),
+      c(k - o.y, o.height)
+    ] : [0, 0];
+  }
+  function d(e) {
+    const t = f(e);
+    (r || !r && (t[0] !== s[0] || t[1] !== s[1])) && g?.(t);
+  }
+  function n() {
+    u(!1), window.removeEventListener("mousemove", a), window.removeEventListener("mouseup", n), window.removeEventListener("contextmenu", n);
+  }
+  function L() {
+    window.addEventListener("mousemove", a), window.addEventListener("mouseup", n), window.addEventListener("contextmenu", n);
+  }
+  function p(e) {
+    if (e.preventDefault(), u(!0), r) {
+      if (e.target === i.current)
+        v(f(e));
+      else if (!R(e.target?.dataset?.key)) {
+        const t = e.target.dataset.key;
+        m(t);
+      }
+      return;
+    }
+    d(e), L();
+  }
+  function a(e) {
+    e.preventDefault(), e.buttons > 0 ? d(e) : n();
+  }
+  return y(() => () => {
+    n();
+  }, []), {
+    active: l,
+    blockRef: i,
+    handlerRef: E,
+    onMouseDown: p
+  };
+}
+export {
+  D as useControlBlock
+};