@e-burgos/tucu-ui 2.7.2 → 2.8.0

package/CHANGELOG.md

@@ -5,6 +5,29 @@ 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.8.0] - 2026-07-15
+
+### Added
+
+- add a tokens-only ./theme export for Tailwind consumers (WS2)
+
+### Changed
+
+- bump @e-burgos/tucu-ui to ^2.7.3
+
+### Fixed
+
+- stop scanning third-party node_modules for Tailwind classes
+## [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

package/base.css

@@ -0,0 +1,225 @@
+/* ===================================================================
+   TUCU-UI — BASE STYLES
+   ===================================================================
+
+   Structural mode styles (html:root, html.dark) live in Tailwind's own
+   `base` layer. Tailwind v4 fixes the layer order — theme < base <
+   components < utilities — the moment `@import 'tailwindcss'` runs
+   ANYWHERE in a build, regardless of where relative to that import this
+   file's `@layer base { ... }` block appears. That means any utility
+   class (the consumer's own, or one of ours) reliably wins over these
+   rules, while they still win over Tailwind's own preflight/theme reset
+   — without needing to be unlayered.
+
+   Imported by globals.css and theme.css.
+   =================================================================== */
+
+@layer base {
+  /* =================================================================
+     LIGHT MODE (default)
+     ================================================================= */
+  html:root {
+    @apply antialiased;
+    @apply bg-light;
+    -webkit-tap-highlight-color: transparent;
+    border-color: var(--color-border);
+    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
+      'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+      'Helvetica Neue', sans-serif;
+    color: var(--font-primary-color);
+
+    /* Semantic colors — Foreground */
+    --color-semantic-fg: var(--color-tucu-ui-gray-100);
+    --color-semantic-fg-muted: var(--color-tucu-ui-gray-60);
+    --color-semantic-fg-inverse: var(--color-tucu-ui-gray-0);
+    --color-semantic-fg-primary: var(--color-tucu-ui-blue-60);
+    --color-semantic-fg-warning: var(--color-tucu-ui-orange-60);
+    --color-semantic-fg-positive: var(--color-tucu-ui-green-60);
+    --color-semantic-fg-negative: var(--color-tucu-ui-red-60);
+
+    /* Semantic colors — Background */
+    --color-semantic-bg: var(--color-tucu-ui-gray-0);
+    --color-semantic-bg-alternate: var(--color-tucu-ui-gray-10);
+    --color-semantic-bg-inverse: var(--color-tucu-ui-gray-100);
+    --color-semantic-bg-primary: var(--color-tucu-ui-blue-60);
+    --color-semantic-bg-primary-wash: var(--color-tucu-ui-blue-0);
+    --color-semantic-bg-secondary: var(--color-tucu-ui-gray-10);
+    --color-semantic-bg-tertiary: var(--color-tucu-ui-gray-20);
+    --color-semantic-bg-secondary-wash: var(--color-tucu-ui-gray-5);
+    --color-semantic-bg-negative: var(--color-tucu-ui-red-60);
+    --color-semantic-bg-negative-wash: var(--color-tucu-ui-red-0);
+    --color-semantic-bg-positive: var(--color-tucu-ui-green-60);
+    --color-semantic-bg-positive-wash: var(--color-tucu-ui-green-0);
+    --color-semantic-bg-warning: var(--color-tucu-ui-orange-40);
+    --color-semantic-bg-warning-wash: var(--color-tucu-ui-orange-0);
+    --color-semantic-bg-info: var(--color-tucu-ui-blue-60);
+
+    /* Semantic colors — Line */
+    --color-semantic-line-primary: var(--color-tucu-ui-gray-20);
+    --color-semantic-line-primary-subtle: color-mix(
+      in oklab,
+      var(--color-black) 10%,
+      transparent
+    );
+    --color-semantic-line-inverse: var(--color-tucu-ui-gray-0);
+
+    /* Semantic colors — Elevation */
+    --color-semantic-elevation-1: var(--color-tucu-ui-gray-0);
+    --color-semantic-elevation-2: var(--color-tucu-ui-gray-0);
+
+    /* Semantic colors — Accent */
+    --color-semantic-accent-subtle-green: var(--color-tucu-ui-green-0);
+    --color-semantic-accent-bold-green: var(--color-tucu-ui-green-60);
+    --color-semantic-accent-subtle-blue: var(--color-tucu-ui-blue-0);
+    --color-semantic-accent-bold-blue: var(--color-tucu-ui-blue-60);
+    --color-semantic-accent-subtle-purple: var(--color-tucu-ui-purple-0);
+    --color-semantic-accent-bold-purple: var(--color-tucu-ui-purple-80);
+    --color-semantic-accent-subtle-yellow: var(--color-tucu-ui-yellow-0);
+    --color-semantic-accent-bold-yellow: var(--color-tucu-ui-yellow-30);
+    --color-semantic-accent-subtle-red: var(--color-tucu-ui-red-0);
+    --color-semantic-accent-bold-red: var(--color-tucu-ui-red-60);
+    --color-semantic-accent-subtle-gray: var(--color-tucu-ui-gray-10);
+    --color-semantic-accent-bold-gray: var(--color-tucu-ui-gray-80);
+  }
+
+  /* =================================================================
+     DARK MODE
+     ================================================================= */
+  html.dark {
+    @apply bg-dark;
+    color: var(--font-primary-dark-color);
+
+    --color-brand: var(--color-semantic-dark-bg-primary);
+    --color-primary: var(--color-semantic-dark-bg-primary);
+    --color-secondary: var(--color-semantic-dark-bg-secondary);
+    --color-accent: var(--color-semantic-dark-accent-bold-yellow);
+    --color-muted: var(--color-semantic-dark-fg-muted);
+    --color-border: var(
+      --color-semantic-dark-line-primary-subtle,
+      color-mix(in oklab, var(--color-white) 8%, transparent)
+    ) !important;
+
+    /* Status Colors */
+    --color-success: var(--color-semantic-dark-bg-positive);
+    --color-warning: var(--color-semantic-dark-bg-warning);
+    --color-error: var(--color-semantic-dark-bg-negative);
+    --color-info: var(--color-semantic-dark-bg-info);
+
+    /* Dark/Light Theme Colors */
+    --color-body: var(--color-semantic-dark-bg);
+    --color-light-dark: var(--color-semantic-dark-bg-secondary-wash);
+    --color-foreground: var(--font-primary-dark-color);
+    --hero-grid-color: var(--color-gray-800);
+
+    /* Semantic colors — Foreground */
+    --color-semantic-fg: var(--color-semantic-dark-fg);
+    --color-semantic-fg-muted: var(--color-semantic-dark-fg-muted);
+    --color-semantic-fg-inverse: var(--color-semantic-dark-fg-inverse);
+    --color-semantic-fg-primary: var(--color-semantic-dark-fg-primary);
+    --color-semantic-fg-warning: var(--color-semantic-dark-fg-warning);
+    --color-semantic-fg-positive: var(--color-semantic-dark-fg-positive);
+    --color-semantic-fg-negative: var(--color-semantic-dark-fg-negative);
+
+    /* Semantic colors — Background */
+    --color-semantic-bg: var(--color-semantic-dark-bg);
+    --color-semantic-bg-alternate: var(--color-semantic-dark-bg-alternate);
+    --color-semantic-bg-inverse: var(--color-semantic-dark-bg-inverse);
+    --color-semantic-bg-primary: var(--color-semantic-dark-bg-primary);
+    --color-semantic-bg-primary-wash: var(
+      --color-semantic-dark-bg-primary-wash
+    );
+    --color-semantic-bg-secondary: var(--color-semantic-dark-bg-secondary);
+    --color-semantic-bg-tertiary: var(--color-semantic-dark-bg-tertiary);
+    --color-semantic-bg-secondary-wash: var(
+      --color-semantic-dark-bg-secondary-wash
+    );
+    --color-semantic-bg-negative: var(--color-semantic-dark-bg-negative);
+    --color-semantic-bg-negative-wash: var(
+      --color-semantic-dark-bg-negative-wash
+    );
+    --color-semantic-bg-positive: var(--color-semantic-dark-bg-positive);
+    --color-semantic-bg-positive-wash: var(
+      --color-semantic-dark-bg-positive-wash
+    );
+    --color-semantic-bg-warning: var(--color-semantic-dark-bg-warning);
+    --color-semantic-bg-warning-wash: var(
+      --color-semantic-dark-bg-warning-wash
+    );
+    --color-semantic-bg-info: var(--color-semantic-dark-bg-info);
+
+    /* Semantic colors — Line */
+    --color-semantic-line-primary: var(--color-semantic-dark-line-primary);
+    --color-semantic-line-primary-subtle: var(
+      --color-semantic-dark-line-primary-subtle
+    );
+    --color-semantic-line-inverse: var(--color-semantic-dark-line-inverse);
+
+    /* Semantic colors — Elevation */
+    --color-semantic-elevation-1: var(--color-semantic-dark-elevation-1);
+    --color-semantic-elevation-2: var(--color-semantic-dark-elevation-2);
+
+    /* Semantic colors — Accent */
+    --color-semantic-accent-subtle-green: var(
+      --color-semantic-dark-accent-subtle-green
+    );
+    --color-semantic-accent-bold-green: var(
+      --color-semantic-dark-accent-bold-green
+    );
+    --color-semantic-accent-subtle-blue: var(
+      --color-semantic-dark-accent-subtle-blue
+    );
+    --color-semantic-accent-bold-blue: var(
+      --color-semantic-dark-accent-bold-blue
+    );
+    --color-semantic-accent-subtle-purple: var(
+      --color-semantic-dark-accent-subtle-purple
+    );
+    --color-semantic-accent-bold-purple: var(
+      --color-semantic-dark-accent-bold-purple
+    );
+    --color-semantic-accent-subtle-yellow: var(
+      --color-semantic-dark-accent-subtle-yellow
+    );
+    --color-semantic-accent-bold-yellow: var(
+      --color-semantic-dark-accent-bold-yellow
+    );
+    --color-semantic-accent-subtle-red: var(
+      --color-semantic-dark-accent-subtle-red
+    );
+    --color-semantic-accent-bold-red: var(
+      --color-semantic-dark-accent-bold-red
+    );
+    --color-semantic-accent-subtle-gray: var(
+      --color-semantic-dark-accent-subtle-gray
+    );
+    --color-semantic-accent-bold-gray: var(
+      --color-semantic-dark-accent-bold-gray
+    );
+  }
+
+  /* ===================================================================
+     NO FOCUS RINGS ON INPUTS (all themes)
+     Uses html:root to match specificity of theme-scoped rules
+     (html.macos-tahoe / html.macos) and wins by cascade order.
+     =================================================================== */
+  html:root [data-tucu='input-control']:focus,
+  html:root [data-tucu='input']:focus-within,
+  html:root [data-tucu='textarea']:focus,
+  html:root [data-tucu='select']:focus-within,
+  html:root [data-tucu='select-trigger']:focus,
+  html:root [data-tucu='select-search']:focus,
+  html:root [data-tucu='input-searcher']:focus-within,
+  html:root [data-tucu='input-calendar']:focus,
+  html:root [data-tucu='checkbox']:focus,
+  html:root [data-tucu='checkbox']:focus-visible,
+  html:root [data-tucu='radio']:focus,
+  html:root [data-tucu='radio']:focus-visible,
+  html:root [data-tucu='switch-control']:focus-visible,
+  html:root [data-tucu='pin-code-input']:focus,
+  html:root [data-tucu='file-input-dropzone']:focus,
+  html:root [data-tucu='file-input-dropzone']:focus-within {
+    outline: none !important;
+    box-shadow: none !important;
+    --tw-ring-shadow: 0 0 #0000 !important;
+  }
+}

package/components/inputs/select.mjs

@@ -276,7 +276,7 @@ function ze({
             onClick: se,
             onKeyDown: ie,
             className: f(
-              "text-case-inherit letter-space-inherit flex w-full items-center justify-between font-medium outline-hidden duration-200",
+              "tucu-text-case-inherit tucu-letter-space-inherit flex w-full items-center justify-between font-medium outline-hidden duration-200",
               be.select[q],
               ve[A],
               b && we[A][b],

package/components/loaders/loader.mjs

@@ -1,6 +1,6 @@
 import { jsxs as p, jsx as o } from "react/jsx-runtime";
 import m from "classnames";
-const i = {
+const c = {
   blink: "animate-blink",
   scaleUp: "animate-scale-up",
   moveUp: "animate-move-up"
@@ -8,7 +8,7 @@ const i = {
   small: "w-1.5 h-1.5",
   medium: "w-2.5 h-2.5",
   large: "w-3 h-3"
-}, r = {
+}, t = {
   primary: "bg-brand",
   gray: "bg-gray-500",
   success: "bg-green-500",
@@ -16,19 +16,19 @@ const i = {
   info: "bg-blue-500",
   warning: "bg-orange-500"
 };
-function c(e) {
+function i(e) {
   return e === "small" ? "relative top-1.5" : "relative top-3";
 }
-function t(e, n) {
-  return e === "moveUp" && n === "small" ? "animate-move-up-small" : i[e];
+function u(e, n) {
+  return e === "moveUp" && n === "small" ? "animate-move-up-small" : c[e];
 }
 function y({
   tag: e = "div",
   color: n = "primary",
   size: a = "medium",
   variant: l = "moveUp",
-  showOnlyThreeDots: d,
-  className: u
+  showOnlyThreeDots: r,
+  className: d
 }) {
   return /* @__PURE__ */ p(
     e,
@@ -36,8 +36,8 @@ function y({
       "data-tucu": "loader",
       className: m(
         "flex items-center gap-2",
-        l === "moveUp" && c(a),
-        u
+        l === "moveUp" && i(a),
+        d
       ),
       children: [
         /* @__PURE__ */ o(
@@ -45,9 +45,9 @@ function y({
           {
             className: m(
               "rounded-full",
-              t(l, a),
+              u(l, a),
               s[a],
-              r[n]
+              t[n]
             )
           }
         ),
@@ -55,10 +55,10 @@ function y({
           "span",
           {
             className: m(
-              "animation-delay-200 rounded-full",
-              t(l, a),
+              "tucu-animation-delay-200 rounded-full",
+              u(l, a),
               s[a],
-              r[n]
+              t[n]
             )
           }
         ),
@@ -66,21 +66,21 @@ function y({
           "span",
           {
             className: m(
-              "animation-delay-500 rounded-full",
-              t(l, a),
+              "tucu-animation-delay-500 rounded-full",
+              u(l, a),
               s[a],
-              r[n]
+              t[n]
             )
           }
         ),
-        l === "moveUp" && !d ? /* @__PURE__ */ o(
+        l === "moveUp" && !r ? /* @__PURE__ */ o(
           "span",
           {
             className: m(
-              "animation-delay-700 rounded-full",
-              t(l, a),
+              "tucu-animation-delay-700 rounded-full",
+              u(l, a),
               s[a],
-              r[n]
+              t[n]
             )
           }
         ) : null

package/components/typography/index.mjs

@@ -1,13 +1,13 @@
-import { jsx as d } from "react/jsx-runtime";
-import u from "classnames";
+import { jsx as l } from "react/jsx-runtime";
+import m from "classnames";
 import { Tooltip as h } from "../common/tooltip.mjs";
 const g = {
-  h1: "text-h1",
-  h2: "text-h2",
-  h3: "text-h3",
-  h4: "text-h4",
-  h5: "text-h5",
-  h6: "text-h6",
+  h1: "tucu-text-h1",
+  h2: "tucu-text-h2",
+  h3: "tucu-text-h3",
+  h4: "tucu-text-h4",
+  h5: "tucu-text-h5",
+  h6: "tucu-text-h6",
   p: "",
   i: "",
   b: "",
@@ -25,12 +25,12 @@ const g = {
   blockquote: "border-l-4 border-border text-quote py-3 px-4",
   sub: "p-3 text-sx text-bottom",
   sup: "p-3 text-sx text-top",
-  headline: "text-headline",
-  body: "text-body",
-  "label-1": "text-label-1",
-  "label-2": "text-label-2",
-  caption: "text-caption",
-  legal: "text-legal"
+  headline: "tucu-text-headline",
+  body: "tucu-text-body",
+  "label-1": "tucu-text-label-1",
+  "label-2": "tucu-text-label-2",
+  caption: "tucu-text-caption",
+  legal: "tucu-text-legal"
 }, y = {
   default: "text-primary-color",
   primary: "text-primary",
@@ -72,40 +72,40 @@ const g = {
 function v({
   tag: t = "p",
   title: e,
-  children: p,
-  className: x,
+  children: d,
+  className: c,
   color: r,
   fontFamily: o,
   tooltip: a,
-  tooltipPlacement: b = "top",
-  tooltipColor: i,
-  tooltipArrow: c = !0
+  tooltipPlacement: p = "top",
+  tooltipColor: x,
+  tooltipArrow: b = !0
 }) {
-  const m = !k.includes(
+  const i = !k.includes(
     t
   ) ? "div" : t;
   let s = "", n = "";
   t === "abbr" && e === void 0 && console.warn("title attribute is missing for abbr tag."), r && (s = y[r]), o && (n = f[o]);
-  const l = /* @__PURE__ */ d(
-    m,
+  const u = /* @__PURE__ */ l(
+    i,
     {
       "data-tucu": "typography",
       "data-typography-tag": t,
       ...e && { title: e },
-      className: u(g[t], n, s, x),
-      children: p
+      className: m(g[t], n, s, c),
+      children: d
     }
   );
-  return a ? /* @__PURE__ */ d(
+  return a ? /* @__PURE__ */ l(
     h,
     {
       content: a,
-      placement: b,
-      color: i,
-      arrow: c,
-      children: l
+      placement: p,
+      color: x,
+      arrow: b,
+      children: u
     }
-  ) : l;
+  ) : u;
 }
 export {
   v as Typography,

package/components/utils/code-block.mjs

@@ -45,7 +45,7 @@ function y(r) {
 }
 async function L(r) {
   p || (p = import("prismjs"));
-  const { default: o } = await p;
+  const o = await p;
   return r && b[r] && await y(r).catch(() => {
     m.delete(r);
   }), o;

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
 };