@e-burgos/tucu-ui 2.7.0 → 2.7.2

package/CHANGELOG.md

@@ -5,6 +5,16 @@ 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.2] - 2026-07-15
+
+### Fixed
+
+- lazy-load prismjs in CodeBlock to fix dev-mode crash for consumers
+## [2.7.1] - 2026-07-15
+
+### Fixed
+
+- work around esbuild CJS-interop bug breaking react-use hooks
 ## [2.7.0] - 2026-07-15
 
 ### Added

package/components/common/collapse.mjs

@@ -1,16 +1,16 @@
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import { useState as f, useEffect as h } from "react";
-import { useTheme as p } from "../../themes/hooks/use-theme.mjs";
+import { useMeasure as p } from "../../hooks/use-measure.mjs";
+import { useTheme as b } from "../../themes/hooks/use-theme.mjs";
 import { LAYOUT_OPTIONS as a } from "../../themes/config/index.mjs";
-import { Plus as b } from "../icons/plus.mjs";
-import O from "react-use/lib/useMeasure";
+import { Plus as O } from "../icons/plus.mjs";
 function M({
   label: n,
   children: d,
   initialOpen: s = !1,
   className: l
 }) {
-  const [e, o] = f(!1), [c, { height: m }] = O(), { layout: t } = p(), u = t === a.MACOS || t === a.MACOS_TAHOE || t === a.MACOS_TAHOE_DOCK ? 24 : 0;
+  const [e, o] = f(!1), [c, { height: m }] = p(), { layout: t } = b(), u = t === a.MACOS || t === a.MACOS_TAHOE || t === a.MACOS_TAHOE_DOCK ? 24 : 0;
   return h(() => {
     s && o(!0);
   }, [s]), /* @__PURE__ */ i(
@@ -33,7 +33,7 @@ function M({
                 "span",
                 {
                   className: `shrink-0 transition-transform duration-200 ltr:ml-4 rtl:mr-4 ${e ? "rotate-45" : ""}`,
-                  children: /* @__PURE__ */ r(b, { className: "" })
+                  children: /* @__PURE__ */ r(O, { className: "" })
                 }
               )
             ]

package/components/layouts/menus/collapsible-menu.mjs

@@ -5,7 +5,7 @@ import { motion as g } from "framer-motion";
 import { ActiveLink as w } from "../../links/active-link.mjs";
 import { ChevronDown as k } from "../../icons/chevron-down.mjs";
 import { useLocation as E, useNavigate as L } from "react-router-dom";
-import M from "react-use/lib/useMeasure";
+import { useMeasure as M } from "../../../hooks/use-measure.mjs";
 function G({
   name: h,
   icon: m,

package/components/layouts/menus/expandable-sidebar.mjs

@@ -9,7 +9,7 @@ import { Close as C } from "../../icons/close.mjs";
 import { TagIcon as f } from "../../icons/tag-icon.mjs";
 import { MenuItem as u } from "./menu-item.mjs";
 import { useIsMobile as M } from "../../../hooks/use-is-mobile.mjs";
-import j from "react-use/lib/useClickAway";
+import { useClickAway as j } from "../../../hooks/use-click-away.mjs";
 const s = (p) => p.map((l) => ({
   name: l.name,
   icon: l.icon,

package/components/layouts/menus/menu-item.mjs

@@ -6,7 +6,7 @@ import { ActiveLink as u } from "../../links/active-link.mjs";
 import { ChevronDown as U } from "../../icons/chevron-down.mjs";
 import { useLocation as D, useNavigate as O } from "react-router-dom";
 import { useIsMobile as H } from "../../../hooks/use-is-mobile.mjs";
-import I from "react-use/lib/useMeasure";
+import { useMeasure as I } from "../../../hooks/use-measure.mjs";
 function W({
   name: c,
   icon: w,

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 { default: 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/internal/cjs-esm-interop.mjs

@@ -0,0 +1,9 @@
+function e(n) {
+  const f = n;
+  if (typeof n == "function") return n;
+  const t = f.default;
+  return typeof t?.default == "function" ? t.default : typeof t == "function" ? t : n;
+}
+export {
+  e as unwrapCjsDefault
+};

package/hooks/use-breakpoint.mjs

@@ -1,5 +1,6 @@
-import o from "react-use/lib/factory/createBreakpoint";
-const t = {
+import * as o from "react-use/lib/factory/createBreakpoint";
+import { unwrapCjsDefault as t } from "./internal/cjs-esm-interop.mjs";
+const e = t(o), r = {
   xs: 480,
   sm: 640,
   md: 768,
@@ -8,7 +9,7 @@ const t = {
   "2xl": 1440,
   "3xl": 1780,
   "4xl": 2160
-}, r = o(t);
+}, s = e(r);
 export {
-  r as useBreakpoint
+  s as useBreakpoint
 };

package/hooks/use-click-away.mjs

@@ -0,0 +1,8 @@
+import * as o from "react-use/lib/useClickAway";
+import { unwrapCjsDefault as r } from "./internal/cjs-esm-interop.mjs";
+const e = r(
+  o
+);
+export {
+  e as useClickAway
+};

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

@@ -0,0 +1,8 @@
+import * as o from "react-use/lib/useCopyToClipboard";
+import { unwrapCjsDefault as p } from "./internal/cjs-esm-interop.mjs";
+const a = p(
+  o
+);
+export {
+  a as useCopyToClipboard
+};

package/hooks/use-measure.mjs

@@ -0,0 +1,6 @@
+import * as e from "react-use/lib/useMeasure";
+import { unwrapCjsDefault as r } from "./internal/cjs-esm-interop.mjs";
+const s = r(e);
+export {
+  s as useMeasure
+};

package/index.d.ts

@@ -47,13 +47,12 @@ import * as TanstackTable from '@tanstack/react-table';
 import { TooltipContentProps } from 'recharts';
 import { Updater } from '@tanstack/react-table';
 import { UseBoundStore } from 'zustand';
-import { default as useClickAway } from 'react-use/lib/useClickAway';
-import { default as useCopyToClipboard } from 'react-use/lib/useCopyToClipboard';
+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 { default as useMeasure } from 'react-use/lib/useMeasure';
+import * as useMeasureModule from 'react-use/lib/useMeasure';
 import { VisibilityState } from '@tanstack/react-table';
 
 export declare const acceptedFileType: {
@@ -5272,7 +5271,7 @@ export declare const useBreakpoint: () => string;
 
 export declare function useChartTheme(): ChartTheme;
 
-export { useClickAway }
+export declare const useClickAway: <E extends Event = Event>(ref: RefObject<HTMLElement | null>, onClickAway: (event: E) => void, events?: string[]) => void;
 
 /**
  * useComponentEventListener
@@ -5295,7 +5294,7 @@ export declare const useComponentEventListener: (id: string) => {
     };
 };
 
-export { useCopyToClipboard }
+export declare const useCopyToClipboard: () => [useCopyToClipboardModule.CopyToClipboardState, (value: string) => void];
 
 /**
  * Hook for the data table context.
@@ -5419,7 +5418,7 @@ export declare const useIsomorphicLayoutEffect: typeof useEffect;
 
 export declare function useLockBodyScroll(freezeBodyScroll: boolean): void;
 
-export { useMeasure }
+export declare const useMeasure: <E extends Element = Element>() => useMeasureModule.UseMeasureResult<E>;
 
 export declare const usePublicErrorRoutesConfig: () => {
     key: AppErrorPage;