@berenjena/react-dev-panel 2.0.0 → 2.1.0

package/dist/components/ControlRenderer/controls/TextControl/index.d.ts

@@ -1 +1,40 @@
-export * from './TextControl';
+import { TextControlProps } from './types';
+/**
+ * Component that renders a text input control with configurable event handling
+ *
+ * @param props - The component props
+ * @param props.control - The text control configuration object
+ * @param props.control.type - The control type, must be 'text'
+ * @param props.control.value - The current string value of the text input
+ * @param props.control.placeholder - Optional placeholder text displayed when input is empty
+ * @param props.control.event - When to trigger onChange: "onChange" (real-time) or "onBlur" (on focus loss). Defaults to "onChange"
+ * @param props.control.onChange - Callback function triggered when text value changes
+ * @param props.control.disabled - Optional flag to disable the control
+ * @returns JSX element representing the text input control
+ *
+ * @example
+ * ```typescript
+ * // Real-time updates (default behavior)
+ * <TextControl control={{
+ *   type: 'text',
+ *   value: 'John Doe',
+ *   placeholder: 'Enter your full name',
+ *   event: 'onChange',
+ *   onChange: (value) => setUserName(value),
+ *   disabled: false
+ * }} />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Updates only when losing focus
+ * <TextControl control={{
+ *   type: 'text',
+ *   value: 'search query',
+ *   placeholder: 'Type to search...',
+ *   event: 'onBlur',
+ *   onChange: (value) => console.log('Search term:', value)
+ * }} />
+ * ```
+ */
+export declare function TextControl({ control }: TextControlProps): React.ReactNode;

package/dist/components/ControlRenderer/controls/TextControl/index.js

@@ -1,4 +1,30 @@
-import { TextControl as t } from "./TextControl.js";
+import { jsx as f } from "react/jsx-runtime";
+import { useState as h, useEffect as i } from "react";
+import { Input as s } from "../../../Input/index.js";
+function v({ control: e }) {
+  const n = e.event || "onChange", [l, u] = h(e.value);
+  function o(t) {
+    const a = t.target.value;
+    u(a), n === "onChange" && e.onChange(a);
+  }
+  function r(t) {
+    const a = t.target.value;
+    n === "onBlur" && e.onChange(a);
+  }
+  return i(() => {
+    u(e.value);
+  }, [e.value]), /* @__PURE__ */ f(
+    s,
+    {
+      type: "text",
+      value: l,
+      placeholder: e.placeholder,
+      disabled: e.disabled,
+      onChange: o,
+      ...n === "onBlur" && { onBlur: r }
+    }
+  );
+}
 export {
-  t as TextControl
+  v as TextControl
 };

package/dist/components/ControlRenderer/index.d.ts

@@ -1 +1,6 @@
-export * from './ControlRenderer';
+import { ControlsNames } from './controls/types';
+import { ControlRendererProps } from './types';
+/**
+ * Component that renders different types of controls based on the control type
+ */
+export declare function ControlRenderer<Name extends ControlsNames>({ name, control }: ControlRendererProps<Name>): React.ReactNode;

package/dist/components/ControlRenderer/index.js

@@ -1,4 +1,52 @@
-import { ControlRenderer as o } from "./ControlRenderer.js";
+import { jsxs as t, jsx as n } from "react/jsx-runtime";
+import { Suspense as c } from "react";
+import { className as s } from "../../utils/className/className.js";
+import { controls as d } from "./controls/index.js";
+import '../../assets/index5.css';const p = "_controlRendererContainer_1s60v_1", _ = "_controlContainer_1s60v_4", u = "_hoverable_1s60v_13", v = "_fullWidth_1s60v_16", f = "_label_1s60v_19", h = "_controlWrapper_1s60v_22", b = "_justifyStart_1s60v_26", C = "_description_1s60v_42", m = "_loading_1s60v_51", y = "_error_1s60v_70", r = {
+  controlRendererContainer: p,
+  controlContainer: _,
+  hoverable: u,
+  fullWidth: v,
+  label: f,
+  controlWrapper: h,
+  justifyStart: b,
+  description: C,
+  loading: m,
+  error: y
+}, W = ["button", "buttonGroup", "separator"], j = ["separator"], N = ["button", "separator"];
+function L({ name: l, control: e }) {
+  const i = e?.label || l;
+  function a() {
+    if (!e || !e.type)
+      return /* @__PURE__ */ n("div", { className: r.error, children: "Control type is not defined" });
+    const o = d[e.type];
+    return o ? /* @__PURE__ */ n(c, { fallback: /* @__PURE__ */ n("div", { className: r.loading, children: "Loading control..." }), children: /* @__PURE__ */ n(o, { control: e }) }) : /* @__PURE__ */ n("div", { children: "Unknown control type" });
+  }
+  return /* @__PURE__ */ t("div", { className: r.controlRendererContainer, children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        ...s(r.controlContainer, {
+          [r.fullWidth]: W.includes(e.type),
+          [r.hoverable]: !j.includes(e.type)
+        }),
+        children: [
+          !N.includes(e.type) && /* @__PURE__ */ n("label", { className: r.label, children: i }),
+          /* @__PURE__ */ n(
+            "div",
+            {
+              ...s(r.controlWrapper, {
+                [r.justifyStart]: e.type === "separator"
+              }),
+              children: a()
+            }
+          )
+        ]
+      }
+    ),
+    e?.description && /* @__PURE__ */ n("span", { className: r.description, children: e.description })
+  ] });
+}
 export {
-  o as ControlRenderer
+  L as ControlRenderer
 };

package/dist/components/DevPanel/index.d.ts

@@ -1 +1,11 @@
-export * from './DevPanel';
+import { DevPanelProps } from './types';
+/**
+ * Development panel component
+ * @returns The development panel component, if the environment is not development, it will return null
+ *
+ * @example
+ * ```typescript
+ * <DevPanel />
+ * ```
+ */
+export declare function DevPanel({ panelTitle, ...props }: DevPanelProps): React.ReactNode;

package/dist/components/DevPanel/index.js

@@ -1,4 +1,71 @@
-import { DevPanel as r } from "./DevPanel.js";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useCallback as D, useEffect as y } from "react";
+import { useDragAndDrop as b } from "../../hooks/useDragAndDrop/index.js";
+import { useHotkey as w } from "../../hooks/useHotKey/index.js";
+import { useDevPanelSections as K } from "../../store/SectionsStore.js";
+import { useDevPanelUI as N, useDevPanelThemeActions as k } from "../../store/UIStore.js";
+import { className as x } from "../../utils/className/className.js";
+import { EmptyContent as E } from "../EmptyContent/index.js";
+import { Icon as f } from "../Icon/index.js";
+import { Section as j } from "../Section/index.js";
+import '../../assets/index2.css';const A = "_devPanelContainer_1089m_217", S = "_header_1089m_256", H = "_title_1089m_271", I = "_button_1089m_282", T = "_collapsed_1089m_318", V = "_content_1089m_325", t = {
+  devPanelContainer: A,
+  header: S,
+  title: H,
+  button: I,
+  collapsed: T,
+  content: V
+}, O = {
+  ctrlKey: !0,
+  shiftKey: !0,
+  key: "a",
+  altKey: !1,
+  metaKey: !1
+};
+function M({ panelTitle: h = "Dev panel", ...o }) {
+  const { isVisible: i, isCollapsed: n, position: l, setVisible: a, setCollapsed: u, setPosition: r } = N(), { setTheme: c } = k(), p = K(), _ = D(
+    (s) => {
+      r(s);
+    },
+    [r]
+  ), { isDragging: v, elementRef: C, handlePointerDown: g } = b({
+    onPositionChange: _
+  });
+  if (w({
+    description: "Show Dev Panel",
+    preventDefault: !0,
+    action: () => a(!i),
+    ...O,
+    ...o.hotKeyConfig,
+    target: window
+  }), y(() => {
+    o.theme && c(o.theme);
+  }, [o.theme, c]), !i)
+    return null;
+  const m = Object.entries(p);
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: C,
+      ...x(t.devPanelContainer, {
+        [t.dragging]: v
+      }),
+      style: {
+        left: l.x,
+        top: l.y,
+        height: n ? "auto" : void 0
+      },
+      children: [
+        /* @__PURE__ */ d("div", { className: t.header, onPointerDown: g, children: [
+          /* @__PURE__ */ e("button", { className: t.button, onClick: () => u(!n), title: n ? "Expand" : "Collapse", children: /* @__PURE__ */ e(f, { name: "ArrowDown", className: n ? t.collapsed : void 0 }) }),
+          /* @__PURE__ */ e("div", { className: t.title, children: h }),
+          /* @__PURE__ */ e("button", { className: t.button, onClick: () => a(!1), title: "Close", children: /* @__PURE__ */ e(f, { name: "Close" }) })
+        ] }),
+        !n && /* @__PURE__ */ e("div", { className: t.content, children: m.length ? m.map(([s, P]) => /* @__PURE__ */ e(j, { sectionName: s, section: P }, `section-${s}`)) : /* @__PURE__ */ e(E, {}) })
+      ]
+    }
+  );
+}
 export {
-  r as DevPanel
+  M as DevPanel
 };

package/dist/components/DevPanel/types.d.ts

@@ -24,22 +24,28 @@ export type BuiltInTheme =
 	| "volcano";
 
 export interface DevPanelProps {
+	/**
+	 * Title of the DevPanel, displayed at the top.
+	 */
 	panelTitle?: string;
 	/**
 	 * Hotkey configuration for toggling the DevPanel visibility.
 	 * If not provided, defaults to
 	 * ```json
 	 * {
-	 *   key: "f",
-	 *   shiftKey: true,
-	 *   altKey: true,
-	 *   ctrlKey: false,
-	 *   metaKey: false,
+	 *   "key": "f",
+	 *   "shiftKey": true,
+	 *   "altKey": true,
+	 *   "ctrlKey": false,
+	 *   "metaKey": false,
 	 * }
 	 * ```
 	 */
 	hotKeyConfig?: DevPanelHotkeyConfig;
-
+	/**
+	 * Theme for the DevPanel.
+	 * If not provided, defaults to "auto"
+	 */
 	theme?: BuiltInTheme;
 }
 
@@ -54,6 +60,7 @@ export interface DevPanelState {
 	isCollapsed: boolean;
 	sections: Record<string, DevPanelSection>;
 	position: Position;
+	currentTheme: string;
 }
 
 export type DevPanelUIState = Omit<DevPanelState, "sections">;

package/dist/components/DevPanelPortal/index.d.ts

@@ -1 +1,9 @@
-export { DevPanelPortal } from './DevPanelPortal';
+/**
+ * Portal component that renders DevPanel using React's createPortal.
+ * Automatically subscribes to DevPanelManager prop changes and renders
+ * the DevPanel with merged props into document.body.
+ * Dismounts the portal when no sections are active.
+ *
+ * @returns DevPanel rendered as a portal in document.body or null if no sections
+ */
+export declare function DevPanelPortal(): React.ReactNode;

package/dist/components/DevPanelPortal/index.js

@@ -1,4 +1,17 @@
-import { DevPanelPortal as r } from "./DevPanelPortal.js";
+import { jsx as i } from "react/jsx-runtime";
+import { useState as n, useEffect as d } from "react";
+import { createPortal as c } from "react-dom";
+import { DevPanelManager as m } from "../../managers/DevPanelManager.js";
+import { DevPanel as p } from "../DevPanel/index.js";
+function v() {
+  const [t, r] = n({}), [s, o] = n(!1);
+  return d(() => {
+    const e = m.getInstance(), l = e.getAllProps(), u = e.shouldRender();
+    return r(l), o(u), e.onPropsChange((a) => {
+      r(a), o(e.shouldRender());
+    });
+  }, []), s ? c(/* @__PURE__ */ i(p, { ...t }), document.body) : null;
+}
 export {
-  r as DevPanelPortal
+  v as DevPanelPortal
 };

package/dist/components/EmptyContent/index.d.ts

@@ -1 +1 @@
-export * from './EmptyContent';
+export declare function EmptyContent(): React.ReactNode;

package/dist/components/EmptyContent/index.js

@@ -1,4 +1,19 @@
-import { EmptyContent as e } from "./EmptyContent.js";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import '../../assets/index3.css';const n = "_empty_1bkns_1", s = {
+  empty: n
+};
+function o() {
+  return /* @__PURE__ */ t("div", { className: s.empty, children: [
+    /* @__PURE__ */ e("span", { children: "No controls registered yet." }),
+    /* @__PURE__ */ e("br", {}),
+    /* @__PURE__ */ e("br", {}),
+    /* @__PURE__ */ t("span", { children: [
+      "Use ",
+      /* @__PURE__ */ e("code", { children: "useDevPanel()" }),
+      " to add controls."
+    ] })
+  ] });
+}
 export {
-  e as EmptyContent
+  o as EmptyContent
 };

package/dist/components/Icon/index.d.ts

@@ -1,7 +1,7 @@
 declare const availableIcons: {
-    ArrowDown: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
-    Close: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
-    Check: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    ArrowDown: (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;
+    Close: (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;
+    Check: (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;
 };
 interface IconProps extends React.SVGProps<SVGSVGElement> {
     /** The name of the icon to render */

package/dist/components/Input/index.d.ts

@@ -1 +1 @@
-export * from './Input';
+export declare function Input(props: React.InputHTMLAttributes<HTMLInputElement>): React.ReactNode;

package/dist/components/Input/index.js

@@ -1,4 +1,10 @@
-import { Input as r } from "./Input.js";
+import { jsx as n } from "react/jsx-runtime";
+import '../../assets/index7.css';const u = "_input_icuc6_217", i = {
+  input: u
+};
+function s(t) {
+  return /* @__PURE__ */ n("input", { ...t, className: i.input });
+}
 export {
-  r as Input
+  s as Input
 };

package/dist/components/Section/index.d.ts

@@ -1 +1,7 @@
-export * from './Section';
+import { DevPanelSection } from '../DevPanel/types';
+type SectionProps = {
+    sectionName: string;
+    section: DevPanelSection;
+};
+export declare function Section({ sectionName, section }: SectionProps): React.ReactNode;
+export {};

package/dist/components/Section/index.js

@@ -1,4 +1,25 @@
-import { Section as r } from "./Section.js";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { ControlRenderer as i } from "../ControlRenderer/index.js";
+import { useDevPanelSectionActions as r } from "../../store/SectionsStore.js";
+import { Icon as p } from "../Icon/index.js";
+import '../../assets/index4.css';const d = "_section_plx7y_1", _ = "_header_plx7y_9", m = "_title_plx7y_28", g = "_toggle_plx7y_35", h = "_collapsed_plx7y_45", x = "_content_plx7y_54", e = {
+  section: d,
+  header: _,
+  title: m,
+  toggle: g,
+  collapsed: h,
+  content: x
+};
+function N({ sectionName: s, section: t }) {
+  const { toggleSectionCollapse: c } = r();
+  return /* @__PURE__ */ n("div", { className: e.section, children: [
+    /* @__PURE__ */ n("div", { className: e.header, onClick: () => c(s), children: [
+      /* @__PURE__ */ o("span", { className: e.title, children: t.name }),
+      /* @__PURE__ */ o("span", { className: e.toggle, children: /* @__PURE__ */ o(p, { name: "ArrowDown", className: t.isCollapsed ? e.collapsed : void 0 }) })
+    ] }),
+    !t.isCollapsed && /* @__PURE__ */ o("div", { className: e.content, children: Object.entries(t.controls).map(([l, a]) => /* @__PURE__ */ o(i, { name: l, control: a }, l)) })
+  ] });
+}
 export {
-  r as Section
+  N as Section
 };

package/dist/components/Select/index.d.ts

@@ -1 +1,15 @@
-export * from './Select';
+export interface SelectProps {
+    value?: string | string[];
+    options: string[] | {
+        label: string;
+        value: string;
+    }[];
+    disabled?: boolean;
+    multiple?: boolean;
+    placeholder?: string;
+    onChange: (value: string | string[]) => void;
+}
+/**
+ * Unified Select component that can handle both single and multiple selection
+ */
+export declare function Select({ value, options, onChange, disabled, multiple, placeholder }: SelectProps): React.ReactNode;

package/dist/components/Select/index.js

@@ -1,4 +1,178 @@
-import { Select as r } from "./Select.js";
+import { jsxs as y, Fragment as M, jsx as a } from "react/jsx-runtime";
+import { useRef as x, useState as H, useCallback as q, useEffect as P } from "react";
+import { createPortal as T } from "react-dom";
+import { Icon as j } from "../Icon/index.js";
+import { useDevPanelPosition as B } from "../../store/UIStore.js";
+import { className as F } from "../../utils/className/className.js";
+import '../../assets/index6.css';const W = "_select_1hbiz_217", U = "_trigger_1hbiz_222", G = "_open_1hbiz_271", J = "_value_1hbiz_275", K = "_placeholder_1hbiz_284", Q = "_arrow_1hbiz_288", X = "_dropdownPortal_1hbiz_303", Y = "_dropdown_1hbiz_303", Z = "_option_1hbiz_342", ee = "_selected_1hbiz_360", te = "_checkbox_1hbiz_369", ne = "_label_1hbiz_390", r = {
+  select: W,
+  trigger: U,
+  open: G,
+  value: J,
+  placeholder: K,
+  arrow: Q,
+  dropdownPortal: X,
+  dropdown: Y,
+  option: Z,
+  selected: ee,
+  checkbox: te,
+  label: ne
+};
+function ae({ value: p, options: _, onChange: z, disabled: f = !1, multiple: u = !1, placeholder: L = "Select..." }) {
+  const w = B(), g = x(null), h = x(null), k = x(null), [c, m] = H(!1), [b, E] = H({
+    top: 0,
+    left: 0,
+    width: 0,
+    maxHeight: 200
+  }), d = u ? Array.isArray(p) ? p : [] : typeof p == "string" ? p : "", C = S(), D = u ? d.length === 0 : !d, s = q(() => {
+    c && E(N());
+  }, [c]);
+  function N() {
+    if (!h.current)
+      return {
+        top: 0,
+        left: 0,
+        width: 0,
+        maxHeight: 200
+      };
+    const e = h.current.getBoundingClientRect(), t = window.innerHeight, n = window.innerWidth, o = 200, l = 4, i = t - e.bottom - l, v = e.top - l, R = i < o && v > i, V = R ? e.top - Math.min(o, v) : e.bottom + l, $ = Math.max(8, Math.min(e.left, n - e.width - 8)), I = R ? Math.min(o, v) : Math.min(o, i);
+    return {
+      top: V,
+      left: $,
+      width: e.width,
+      maxHeight: I
+    };
+  }
+  function O(e) {
+    if (u) {
+      const t = d, n = t.includes(e) ? t.filter((o) => o !== e) : [...t, e];
+      z(n);
+    } else
+      z(e), m(!1);
+  }
+  function S() {
+    if (u) {
+      const e = d;
+      if (e.length === 0)
+        return L;
+      if (e.length === 1) {
+        const t = _.find((o) => (typeof o == "string" ? o : o.value) === e[0]);
+        return (typeof t == "string" ? t : t?.label) || e[0];
+      }
+      return `${e.length} selected`;
+    } else {
+      const e = d;
+      if (!e)
+        return L;
+      const t = _.find((o) => (typeof o == "string" ? o : o.value) === e);
+      return (typeof t == "string" ? t : t?.label) || e;
+    }
+  }
+  function A() {
+    f || (c ? m(!1) : (E(N()), m(!0)));
+  }
+  return P(() => {
+    if (!c) return;
+    s(), window.addEventListener("resize", s), window.addEventListener("scroll", s, !0);
+    const e = g.current?.closest("[data-dev-panel]") || document.querySelector("[data-dev-panel]");
+    e && e.addEventListener("scroll", s, !0);
+    let t = null;
+    if (h.current && "IntersectionObserver" in window) {
+      const n = {
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+      };
+      t = new IntersectionObserver(
+        (o) => {
+          const l = o[0];
+          if (l && l.target === h.current) {
+            const i = l.boundingClientRect;
+            (i.top !== n.top || i.left !== n.left || i.width !== n.width || i.height !== n.height) && (n.top = i.top, n.left = i.left, n.width = i.width, n.height = i.height, s());
+          }
+        },
+        {
+          threshold: [0, 0.1, 0.5, 1]
+        }
+      ), t.observe(h.current);
+    }
+    return () => {
+      window.removeEventListener("resize", s), window.removeEventListener("scroll", s, !0), e && e.removeEventListener("scroll", s, !0), t && t.disconnect();
+    };
+  }, [c, s]), P(() => {
+    const e = k.current;
+    (!e || e.x !== w.x || e.y !== w.y) && (k.current = w, c && requestAnimationFrame(s));
+  }, [c, w, s]), P(() => {
+    function e(t) {
+      if (g.current && !g.current.contains(t.target)) {
+        const n = document.querySelector(`.${r.dropdownPortal}`);
+        if (n && n.contains(t.target))
+          return;
+        m(!1);
+      }
+    }
+    return document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, []), /* @__PURE__ */ y(M, { children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        ref: g,
+        ...F(r.select, {
+          [r.disabled]: f,
+          [r.open]: c
+        }),
+        children: /* @__PURE__ */ y("button", { ref: h, type: "button", className: r.trigger, onClick: A, disabled: f, children: [
+          /* @__PURE__ */ a("span", { className: `${r.value} ${D ? r.placeholder : ""}`, children: C }),
+          /* @__PURE__ */ a(j, { name: "ArrowDown", className: r.arrow })
+        ] })
+      }
+    ),
+    typeof window < "u" && T(
+      c && !f && /* @__PURE__ */ a(
+        "div",
+        {
+          className: r.dropdownPortal,
+          style: {
+            position: "fixed",
+            top: b.top,
+            left: b.left,
+            width: b.width,
+            maxHeight: b.maxHeight,
+            zIndex: 9999
+          },
+          children: /* @__PURE__ */ a("div", { className: r.dropdown, children: _.map((e) => {
+            const t = typeof e == "string" ? e : e.value, n = typeof e == "string" ? e : e.label, o = u ? d.includes(t) : d === t;
+            return u ? /* @__PURE__ */ y("label", { className: r.option, children: [
+              /* @__PURE__ */ a(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: o,
+                  onChange: () => O(t),
+                  className: r.checkbox
+                }
+              ),
+              /* @__PURE__ */ a("span", { className: r.label, children: n })
+            ] }, t) : /* @__PURE__ */ a(
+              "button",
+              {
+                type: "button",
+                className: `${r.option} ${o ? r.selected : ""}`,
+                onClick: () => O(t),
+                children: n
+              },
+              t
+            );
+          }) })
+        }
+      ),
+      document.body
+    )
+  ] });
+}
 export {
-  r as Select
+  ae as Select
 };

package/dist/components/index.js

@@ -1,6 +1,6 @@
-import { DevPanel as e } from "./DevPanel/DevPanel.js";
-import { DevPanelPortal as l } from "./DevPanelPortal/DevPanelPortal.js";
-import { ControlRenderer as f } from "./ControlRenderer/ControlRenderer.js";
+import { DevPanel as e } from "./DevPanel/index.js";
+import { DevPanelPortal as l } from "./DevPanelPortal/index.js";
+import { ControlRenderer as f } from "./ControlRenderer/index.js";
 import { controls as p } from "./ControlRenderer/controls/index.js";
 export {
   f as ControlRenderer,

package/dist/hooks/useDebounceCallback/index.d.ts

@@ -1 +1,8 @@
-export * from './useDebounceCallback';
+/**
+ * Creates a debounced version of a callback.
+ *
+ * @param callback - Function to debounce
+ * @param delay - Delay in ms before calling the callback
+ * @returns A debounced version of the callback
+ */
+export declare function useDebouncedCallback<T extends (...args: Parameters<T>) => void>(callback: T, delay: number): (...args: Parameters<T>) => void;

package/dist/hooks/useDebounceCallback/index.js

@@ -1,4 +1,17 @@
-import { useDebouncedCallback as a } from "./useDebounceCallback.js";
+import { useRef as n, useEffect as c, useCallback as o } from "react";
+function f(r, t) {
+  const e = n(null);
+  return c(() => () => {
+    e.current && clearTimeout(e.current);
+  }, []), o(
+    (...u) => {
+      e.current && clearTimeout(e.current), e.current = window.setTimeout(() => {
+        r(...u);
+      }, t);
+    },
+    [r, t]
+  );
+}
 export {
-  a as useDebouncedCallback
+  f as useDebouncedCallback
 };