@e-burgos/tucu-ui 2.7.3 → 2.8.0

package/CHANGELOG.md

@@ -5,6 +5,19 @@ 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

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,