@e-burgos/tucu-ui 2.7.1 → 2.7.3

package/CHANGELOG.md

@@ -5,6 +5,21 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.7.3] - 2026-07-15
+
+### Changed
+
+- replace react-use with native React implementations
+- bump @e-burgos/tucu-ui to ^2.7.2
+
+### Fixed
+
+- resolve typecheck errors in CodeBlock's lazy prismjs loading
+## [2.7.2] - 2026-07-15
+
+### Fixed
+
+- lazy-load prismjs in CodeBlock to fix dev-mode crash for consumers
 ## [2.7.1] - 2026-07-15
 
 ### Fixed

package/components/utils/code-block.mjs

@@ -1,99 +1,133 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { useState as l, useEffect as x } from "react";
-import { Scrollbar as k } from "../common/scrollbar.mjs";
-import { Check as v, Copy as C, ChevronUp as w, ChevronDown as N } from "lucide-react";
-import d from "prismjs";
-import e from "classnames";
-import "prismjs/components/prism-javascript";
-import "prismjs/components/prism-typescript";
-import "prismjs/components/prism-jsx";
-import "prismjs/components/prism-tsx";
-import "prismjs/components/prism-css";
-import "prismjs/components/prism-bash";
-import "prismjs/components/prism-json";
-import "prismjs/components/prism-python";
-import "prismjs/components/prism-java";
-import "prismjs/components/prism-sql";
-import { useIsMobile as j } from "../../hooks/use-is-mobile.mjs";
-const G = ({
-  code: t,
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useState as c, useEffect as C } from "react";
+import { Scrollbar as N } from "../common/scrollbar.mjs";
+import { Check as j, Copy as M, ChevronUp as P, ChevronDown as E } from "lucide-react";
+import a from "classnames";
+import { useIsMobile as I } from "../../hooks/use-is-mobile.mjs";
+const b = {
+  markup: { load: () => import("prismjs/components/prism-markup") },
+  clike: { load: () => import("prismjs/components/prism-clike") },
+  javascript: {
+    deps: ["clike"],
+    load: () => import("prismjs/components/prism-javascript")
+  },
+  typescript: {
+    deps: ["javascript"],
+    load: () => import("prismjs/components/prism-typescript")
+  },
+  jsx: {
+    deps: ["markup", "javascript"],
+    load: () => import("prismjs/components/prism-jsx")
+  },
+  tsx: {
+    deps: ["jsx", "typescript"],
+    load: () => import("prismjs/components/prism-tsx")
+  },
+  css: { load: () => import("prismjs/components/prism-css") },
+  bash: { load: () => import("prismjs/components/prism-bash") },
+  json: { load: () => import("prismjs/components/prism-json") },
+  python: { load: () => import("prismjs/components/prism-python") },
+  java: {
+    deps: ["clike"],
+    load: () => import("prismjs/components/prism-java")
+  },
+  sql: { load: () => import("prismjs/components/prism-sql") }
+};
+let p = null;
+const m = /* @__PURE__ */ new Map();
+function y(r) {
+  const o = b[r];
+  if (!o) return Promise.resolve();
+  let t = m.get(r);
+  return t || (t = Promise.all((o.deps ?? []).map(y)).then(
+    () => o.load()
+  ), m.set(r, t)), t;
+}
+async function L(r) {
+  p || (p = import("prismjs"));
+  const o = await p;
+  return r && b[r] && await y(r).catch(() => {
+    m.delete(r);
+  }), o;
+}
+const z = ({
+  code: r,
   language: o,
-  expanded: f = !0,
-  noExpand: c = !1,
-  className: m
+  expanded: t = !0,
+  noExpand: f = !1,
+  className: x
 }) => {
-  const { isMobile: a } = j(), [i, g] = l(!1), [s, h] = l(
-    !!(!c && f)
-  ), [b, p] = l("");
-  x(() => {
-    if (o && d.languages[o]) {
-      const y = d.highlight(
-        t,
-        d.languages[o],
-        o
-      );
-      p(y);
-    } else
-      p(t);
-  }, [t, o]);
-  const u = () => {
-    navigator.clipboard.writeText(t).then(() => {
+  const { isMobile: s } = I(), [i, g] = c(!1), [l, k] = c(
+    !!(!f && t)
+  ), [v, h] = c("");
+  C(() => {
+    let u = !1;
+    return L(o).then((n) => {
+      u || (o && n.languages[o] ? h(
+        n.highlight(r, n.languages[o], o)
+      ) : h(r));
+    }), () => {
+      u = !0;
+    };
+  }, [r, o]);
+  const w = () => {
+    navigator.clipboard.writeText(r).then(() => {
       g(!0), setTimeout(() => g(!1), 2e3);
     });
   };
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ d(
     "div",
     {
       "data-tucu": "code-block",
-      className: e(
+      className: a(
         "overflow-x-auto min-h-[150px] relative rounded-xl border mt-4",
         "bg-gray-100 dark:bg-gray-800 border-border hover:border-gray-400 dark:hover:border-gray-600",
-        s ? "h-fit max-h-[300px] transition-all duration-300" : "h-full transition-all duration-300",
-        m
+        l ? "h-fit max-h-[300px] transition-all duration-300" : "h-full transition-all duration-300",
+        x
       ),
       children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ d(
           "div",
           {
-            className: e(
+            className: a(
               "absolute z-10 top-1 right-1 p-2 flex justify-end items-center w-full gap-1",
-              a && "flex-col items-end"
+              s && "flex-col items-end"
             ),
             children: [
-              /* @__PURE__ */ n(
+              /* @__PURE__ */ d(
                 "button",
                 {
-                  onClick: u,
+                  onClick: w,
                   "aria-label": i ? "Copied to clipboard" : "Copy to clipboard",
-                  className: e(
+                  className: a(
                     "code-block-btn p-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2 dark:focus:ring-offset-gray-800",
-                    a && "p-1 w-8 h-8"
+                    s && "p-1 w-8 h-8"
                   ),
                   title: "Copy to clipboard",
                   children: [
-                    i ? /* @__PURE__ */ r(v, { className: "w-4 h-4 text-green-500" }) : /* @__PURE__ */ r(C, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" }),
-                    /* @__PURE__ */ r("span", { className: "sr-only", children: i ? "Copied!" : "Copy code" })
+                    i ? /* @__PURE__ */ e(j, { className: "w-4 h-4 text-green-500" }) : /* @__PURE__ */ e(M, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" }),
+                    /* @__PURE__ */ e("span", { className: "sr-only", children: i ? "Copied!" : "Copy code" })
                   ]
                 }
               ),
-              !c && /* @__PURE__ */ r(
+              !f && /* @__PURE__ */ e(
                 "button",
                 {
-                  onClick: () => h(!s),
-                  className: e(
+                  onClick: () => k(!l),
+                  className: a(
                     "code-block-btn p-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2 dark:focus:ring-offset-gray-800",
-                    a && "p-1 w-8 h-8"
+                    s && "p-1 w-8 h-8"
                   ),
                   title: "Expand/Collapse",
-                  children: s ? /* @__PURE__ */ r(N, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ r(w, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" })
+                  children: l ? /* @__PURE__ */ e(E, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ e(P, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" })
                 }
               ),
-              o && /* @__PURE__ */ r(
+              o && /* @__PURE__ */ e(
                 "div",
                 {
-                  className: e(
+                  className: a(
                     "code-block-btn p-2 text-sm font-mono bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 hover:pointer dark:hover:bg-gray-600 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2 dark:focus:ring-offset-gray-800",
-                    a && "w-max max-w-11 h-8"
+                    s && "w-max max-w-11 h-8"
                   ),
                   children: o
                 }
@@ -101,15 +135,15 @@ const G = ({
             ]
           }
         ),
-        /* @__PURE__ */ r(
-          k,
+        /* @__PURE__ */ e(
+          N,
           {
             className: "overflow-x-auto h-full p-4 pr-16 pt-4 lg:pr-4 lg:pt-16 transition-all duration-300",
-            children: /* @__PURE__ */ r("pre", { className: "text-xs whitespace-pre-wrap font-mono block", children: /* @__PURE__ */ r(
+            children: /* @__PURE__ */ e("pre", { className: "text-xs whitespace-pre-wrap font-mono block", children: /* @__PURE__ */ e(
               "code",
               {
                 className: `language-${o || "text"}`,
-                dangerouslySetInnerHTML: { __html: b }
+                dangerouslySetInnerHTML: { __html: v }
               }
             ) })
           }
@@ -119,6 +153,6 @@ const G = ({
   );
 };
 export {
-  G as CodeBlock,
-  G as default
+  z as CodeBlock,
+  z as default
 };

package/hooks/use-breakpoint.mjs

@@ -1,6 +1,5 @@
-import * as o from "react-use/lib/factory/createBreakpoint";
-import { unwrapCjsDefault as t } from "./internal/cjs-esm-interop.mjs";
-const e = t(o), r = {
+import { useState as s, useEffect as d } from "react";
+const a = {
   xs: 480,
   sm: 640,
   md: 768,
@@ -9,7 +8,24 @@ const e = t(o), r = {
   "2xl": 1440,
   "3xl": 1780,
   "4xl": 2160
-}, s = e(r);
+}, i = Object.entries(a).sort(
+  (n, e) => n[1] - e[1]
+);
+function r(n) {
+  let e = i[0][0];
+  for (const [t, o] of i)
+    n >= o && (e = t);
+  return e;
+}
+function f() {
+  const [n, e] = s(
+    () => r(typeof window < "u" ? window.innerWidth : 0)
+  );
+  return d(() => {
+    const t = () => e(r(window.innerWidth));
+    return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+  }, []), n;
+}
 export {
-  s as useBreakpoint
+  f as useBreakpoint
 };

package/hooks/use-click-away.mjs

@@ -1,8 +1,19 @@
-import * as o from "react-use/lib/useClickAway";
-import { unwrapCjsDefault as r } from "./internal/cjs-esm-interop.mjs";
-const e = r(
-  o
-);
+import { useRef as s, useEffect as a } from "react";
+const d = ["mousedown", "touchstart"];
+function i(r, n, e = d) {
+  const c = s(n);
+  c.current = n, a(() => {
+    const o = (t) => {
+      const u = r.current;
+      u && !u.contains(t.target) && c.current(t);
+    };
+    return e.forEach((t) => document.addEventListener(t, o)), () => {
+      e.forEach(
+        (t) => document.removeEventListener(t, o)
+      );
+    };
+  }, [r, e]);
+}
 export {
-  e as useClickAway
+  i as useClickAway
 };

package/hooks/use-copy-to-clipboard.mjs

@@ -1,8 +1,47 @@
-import * as o from "react-use/lib/useCopyToClipboard";
-import { unwrapCjsDefault as p } from "./internal/cjs-esm-interop.mjs";
-const a = p(
-  o
-);
+import { useState as c, useCallback as i } from "react";
+function s(t) {
+  const e = document.createElement("textarea");
+  e.value = t, e.style.position = "fixed", e.style.opacity = "0", document.body.appendChild(e), e.focus(), e.select();
+  let r = !1;
+  try {
+    r = document.execCommand("copy");
+  } catch {
+    r = !1;
+  }
+  return document.body.removeChild(e), r;
+}
+function d() {
+  const [t, e] = c({
+    value: void 0,
+    error: void 0,
+    noUserInteraction: !0
+  }), r = i((o) => {
+    if (typeof o != "string") {
+      e({
+        value: o,
+        error: new Error(
+          `Cannot copy typeof ${typeof o} to clipboard, must be a string`
+        ),
+        noUserInteraction: !0
+      });
+      return;
+    }
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard.writeText(o).then(
+        () => e({ value: o, error: void 0, noUserInteraction: !1 }),
+        (a) => e({ value: o, error: a, noUserInteraction: !1 })
+      );
+      return;
+    }
+    const n = s(o);
+    e({
+      value: o,
+      error: n ? void 0 : new Error("Copy failed"),
+      noUserInteraction: !1
+    });
+  }, []);
+  return [t, r];
+}
 export {
-  a as useCopyToClipboard
+  d as useCopyToClipboard
 };

package/hooks/use-measure.mjs

@@ -1,6 +1,26 @@
-import * as e from "react-use/lib/useMeasure";
-import { unwrapCjsDefault as r } from "./internal/cjs-esm-interop.mjs";
-const s = r(e);
+import { useState as n, useEffect as m } from "react";
+const p = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+};
+function a() {
+  const [e, o] = n(null), [s, i] = n(p);
+  return m(() => {
+    if (!e || typeof ResizeObserver > "u") return;
+    const t = new ResizeObserver(([r]) => {
+      if (!r) return;
+      const { x: c, y: u, width: f, height: h, top: l, right: d, bottom: g, left: b } = r.target.getBoundingClientRect();
+      i({ x: c, y: u, width: f, height: h, top: l, right: d, bottom: g, left: b });
+    });
+    return t.observe(e), () => t.disconnect();
+  }, [e]), [o, s];
+}
 export {
-  s as useMeasure
+  a as useMeasure
 };

package/index.d.ts

@@ -47,12 +47,10 @@ import * as TanstackTable from '@tanstack/react-table';
 import { TooltipContentProps } from 'recharts';
 import { Updater } from '@tanstack/react-table';
 import { UseBoundStore } from 'zustand';
-import * as useCopyToClipboardModule from 'react-use/lib/useCopyToClipboard';
 import { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { UseFormProps } from 'react-hook-form';
 import { UseFormReturn } from 'react-hook-form';
-import * as useMeasureModule from 'react-use/lib/useMeasure';
 import { VisibilityState } from '@tanstack/react-table';
 
 export declare const acceptedFileType: {
@@ -911,6 +909,8 @@ export declare function CleanLayout({ children, className, }: {
     className?: string;
 }): JSX.Element;
 
+declare type ClickAwayEvent = MouseEvent | TouchEvent;
+
 export declare function Close(props: React.SVGAttributes<SVGElement>): JSX.Element;
 
 export declare const CodeBlock: ({ code, language, expanded, noExpand, className, }: {
@@ -1119,6 +1119,12 @@ export declare function convertColumns<TData extends RowData, TValue = unknown>(
 
 export declare const Copy: React.FC<React.SVGAttributes<SVGElement>>;
 
+export declare type CopyToClipboardState = {
+    value?: string;
+    error?: Error;
+    noUserInteraction: boolean;
+};
+
 export declare function CurrencySwapIcons({ from, to }: CurrencySwapIconsProps): JSX.Element;
 
 export declare interface CurrencySwapIconsProps {
@@ -3604,6 +3610,17 @@ export declare interface ManualPaginationState {
     pagination?: PaginationState;
 }
 
+export declare type MeasureRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+
 export declare function MediaPlayIcon(props: React.SVGAttributes<SVGElement>): JSX.Element;
 
 export declare function MenuItem({ name, icon, path, href, dropdownItems, isActive: isActiveProps, hide, onClick, }: MenuItemProps): JSX.Element;
@@ -5267,11 +5284,11 @@ export declare function Usdc(props: React.SVGAttributes<SVGElement>): JSX.Elemen
 
 export declare const useAnchorScroll: () => null;
 
-export declare const useBreakpoint: () => string;
+export declare function useBreakpoint(): string;
 
 export declare function useChartTheme(): ChartTheme;
 
-export declare const useClickAway: <E extends Event = Event>(ref: RefObject<HTMLElement | null>, onClickAway: (event: E) => void, events?: string[]) => void;
+export declare function useClickAway<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, onClickAway: (event: ClickAwayEvent) => void, events?: string[]): void;
 
 /**
  * useComponentEventListener
@@ -5294,7 +5311,10 @@ export declare const useComponentEventListener: (id: string) => {
     };
 };
 
-export declare const useCopyToClipboard: () => [useCopyToClipboardModule.CopyToClipboardState, (value: string) => void];
+export declare function useCopyToClipboard(): [
+CopyToClipboardState,
+(text: string) => void
+];
 
 /**
  * Hook for the data table context.
@@ -5418,7 +5438,10 @@ export declare const useIsomorphicLayoutEffect: typeof useEffect;
 
 export declare function useLockBodyScroll(freezeBodyScroll: boolean): void;
 
-export declare const useMeasure: <E extends Element = Element>() => useMeasureModule.UseMeasureResult<E>;
+export declare function useMeasure<T extends HTMLElement = HTMLElement>(): [
+(node: T | null) => void,
+MeasureRect
+];
 
 export declare const usePublicErrorRoutesConfig: () => {
     key: AppErrorPage;