@e-burgos/tucu-ui 2.7.3 → 2.8.1

package/CHANGELOG.md

@@ -5,6 +5,33 @@ 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.1] - 2026-07-16
+
+### Changed
+
+- release @e-burgos/tucu-ui-mcp@0.6.1
+- fix stale MCP tool count and schemas on the MCP Server page
+- document the ./theme export and fix the Home page's CSS setup guide
+- bump @e-burgos/tucu-ui to ^2.8.0
+
+### Fixed
+
+- stop uncontrolled-to-controlled warning on date picker
+- sync catalog/quickstart/changelog resources with tucu-ui 2.8.0
+- scan ui/tucu-docs for Tailwind classes too
+## [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/README.md

@@ -44,6 +44,23 @@ In your main CSS file:
 
 > Includes full Tailwind CSS v4 — no additional Tailwind setup required.
 
+### Already using Tailwind CSS v4 in your project?
+
+Don't import `./styles` alongside your own `@import 'tailwindcss'` — that
+runs two separate Tailwind builds in the same page, and their layers can
+override each other unpredictably. Use `./theme` instead: tokens and
+component styles only, no bundled Tailwind, so your own build generates
+every utility class (yours and Tucu UI's) from one instance.
+
+```css
+@import 'tailwindcss';
+@import '@e-burgos/tucu-ui/theme';
+@source '../node_modules/@e-burgos/tucu-ui';
+```
+
+Import order between these three lines doesn't matter — your own utility
+classes always win over Tucu UI's defaults either way.
+
 ---
 
 ## Quick Start

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/input.mjs

@@ -1,4 +1,4 @@
-import { jsxs as f, jsx as n, Fragment as Ne } from "react/jsx-runtime";
+import { jsxs as f, jsx as a, Fragment as Ne } from "react/jsx-runtime";
 import { forwardRef as Me, useState as y, useRef as de, useId as Ce, useCallback as q, useEffect as C } from "react";
 import { createPortal as Se } from "react-dom";
 import h from "classnames";
@@ -64,13 +64,13 @@ const Re = {
     locale: G = "en-US",
     ...p
   }, $) => {
-    const [T, pe] = y(!1), [c, te] = y(!1), [he, J] = y(!1), [E, L] = y(null), [b, N] = y(/* @__PURE__ */ new Date()), [w, j] = y(!1), K = de(null), M = de(null), [me, xe] = y({}), be = Ce(), H = ge || be, re = `${H}-error`, ae = `${H}-helper`, fe = [d ? re : null, U ? ae : null].filter(Boolean).join(" ") || void 0, ne = () => {
+    const [T, pe] = y(!1), [c, te] = y(!1), [he, J] = y(!1), [E, L] = y(null), [b, N] = y(/* @__PURE__ */ new Date()), [w, j] = y(!1), K = de(null), M = de(null), [me, xe] = y({}), be = Ce(), H = ge || be, re = `${H}-error`, ne = `${H}-helper`, fe = [d ? re : null, U ? ne : null].filter(Boolean).join(" ") || void 0, ae = () => {
       pe(!T);
     }, ye = r === "password" && T ? "text" : r, P = q(
       (e, t = x) => {
         if (!e || e.trim() === "")
           return null;
-        const a = /^(\d{4})-(\d{2})-(\d{2})$/, o = e.match(a);
+        const n = /^(\d{4})-(\d{2})-(\d{2})$/, o = e.match(n);
         if (o) {
           const Q = parseInt(o[1], 10), X = parseInt(o[2], 10), Z = parseInt(o[3], 10);
           if (!isNaN(Z) && !isNaN(X) && !isNaN(Q)) {
@@ -106,26 +106,26 @@ const Re = {
       },
       [x]
     ), we = (e, t = x) => {
-      const a = e.getDate().toString().padStart(2, "0"), o = (e.getMonth() + 1).toString().padStart(2, "0"), s = e.getFullYear();
+      const n = e.getDate().toString().padStart(2, "0"), o = (e.getMonth() + 1).toString().padStart(2, "0"), s = e.getFullYear();
       switch (t) {
         case "DD-MM-YYYY":
-          return `${a}-${o}-${s}`;
+          return `${n}-${o}-${s}`;
         case "MM-DD-YYYY":
-          return `${o}-${a}-${s}`;
+          return `${o}-${n}-${s}`;
         case "YYYY-MM-DD":
-          return `${s}-${o}-${a}`;
+          return `${s}-${o}-${n}`;
         case "DD/MM/YYYY":
-          return `${a}/${o}/${s}`;
+          return `${n}/${o}/${s}`;
         case "MM/DD/YYYY":
-          return `${o}/${a}/${s}`;
+          return `${o}/${n}/${s}`;
         case "YYYY/MM/DD":
-          return `${s}/${o}/${a}`;
+          return `${s}/${o}/${n}`;
         default:
-          return `${a}-${o}-${s}`;
+          return `${n}-${o}-${s}`;
       }
     }, De = (e) => {
-      const t = e.getDate().toString().padStart(2, "0"), a = (e.getMonth() + 1).toString().padStart(2, "0");
-      return `${e.getFullYear()}-${a}-${t}`;
+      const t = e.getDate().toString().padStart(2, "0"), n = (e.getMonth() + 1).toString().padStart(2, "0");
+      return `${e.getFullYear()}-${n}-${t}`;
     };
     C(() => {
       if (r === "date" && l && typeof l == "string") {
@@ -141,7 +141,7 @@ const Re = {
     }, [l, r, x, P]);
     const D = q(() => {
       if (!M.current) return;
-      const e = M.current.getBoundingClientRect(), t = w ? 320 : 380, a = window.innerHeight - e.bottom, o = e.top, s = a < t && o > a;
+      const e = M.current.getBoundingClientRect(), t = w ? 320 : 380, n = window.innerHeight - e.bottom, o = e.top, s = n < t && o > n;
       xe({
         position: "fixed",
         ...s ? { bottom: window.innerHeight - e.top + 4 } : { top: e.bottom + 4 },
@@ -196,16 +196,16 @@ const Re = {
       };
       ee?.(t);
     }, ke = () => {
-      const e = b.getFullYear(), t = b.getMonth(), a = new Date(e, t, 1), o = new Date(a);
-      o.setDate(o.getDate() - a.getDay());
+      const e = b.getFullYear(), t = b.getMonth(), n = new Date(e, t, 1), o = new Date(n);
+      o.setDate(o.getDate() - n.getDay());
       const s = [], i = new Date(o);
       for (let u = 0; u < 42; u++)
         s.push(new Date(i)), i.setDate(i.getDate() + 1);
       return s;
     }, R = (e) => {
       N((t) => {
-        const a = new Date(t);
-        return e === "prev" ? a.setMonth(t.getMonth() - 1) : a.setMonth(t.getMonth() + 1), a;
+        const n = new Date(t);
+        return e === "prev" ? n.setMonth(t.getMonth() - 1) : n.setMonth(t.getMonth() + 1), n;
       });
     }, B = () => {
       c ? Y() : Ye();
@@ -242,12 +242,12 @@ const Re = {
                 ),
                 children: [
                   g,
-                  p.required && /* @__PURE__ */ n("sup", { className: "inline-block text-[13px] text-red-500 ltr:ml-[4px] rtl:mr-[4px]", children: "*" })
+                  p.required && /* @__PURE__ */ a("sup", { className: "inline-block text-[13px] text-red-500 ltr:ml-[4px] rtl:mr-[4px]", children: "*" })
                 ]
               }
             ),
             /* @__PURE__ */ f("div", { ref: M, className: "relative", children: [
-              /* @__PURE__ */ n(
+              /* @__PURE__ */ a(
                 "input",
                 {
                   "data-tucu": "input-control",
@@ -258,7 +258,7 @@ const Re = {
                   "aria-invalid": d ? "true" : "false",
                   "aria-required": p.required ? "true" : void 0,
                   readOnly: r === "date",
-                  value: r === "date" && E ? we(E) : l,
+                  value: r === "date" ? E ? we(E) : l ?? "" : l,
                   onChange: r !== "date" ? ee : void 0,
                   onClick: r === "date" ? B : void 0,
                   onTouchStart: r === "date" ? B : ie,
@@ -280,7 +280,7 @@ const Re = {
                   )
                 }
               ),
-              (W || I) && /* @__PURE__ */ n(
+              (W || I) && /* @__PURE__ */ a(
                 "span",
                 {
                   className: h(
@@ -291,18 +291,18 @@ const Re = {
                   children: W || I
                 }
               ),
-              r === "password" && /* @__PURE__ */ n(
+              r === "password" && /* @__PURE__ */ a(
                 "button",
                 {
                   type: "button",
-                  onClick: ne,
-                  onTouchStart: ne,
+                  onClick: ae,
+                  onTouchStart: ae,
                   className: "absolute top-1/2 right-[12px] -translate-y-1/2 flex items-center justify-center w-[20px] h-[20px] text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none cursor-pointer",
                   "aria-label": T ? "Hide password" : "Show password",
-                  children: T ? /* @__PURE__ */ n(Le, { className: "w-[16px] h-[16px]" }) : /* @__PURE__ */ n(je, { className: "w-[16px] h-[16px]" })
+                  children: T ? /* @__PURE__ */ a(Le, { className: "w-[16px] h-[16px]" }) : /* @__PURE__ */ a(je, { className: "w-[16px] h-[16px]" })
                 }
               ),
-              r === "date" && /* @__PURE__ */ n(
+              r === "date" && /* @__PURE__ */ a(
                 "button",
                 {
                   type: "button",
@@ -310,7 +310,7 @@ const Re = {
                   onTouchStart: B,
                   className: "absolute top-1/2 right-[12px] -translate-y-1/2 flex items-center justify-center w-[20px] h-[20px] text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none cursor-pointer",
                   "aria-label": "Open date picker",
-                  children: /* @__PURE__ */ n(He, { className: "w-[16px] h-[16px]" })
+                  children: /* @__PURE__ */ a(He, { className: "w-[16px] h-[16px]" })
                 }
               )
             ] }),
@@ -328,17 +328,17 @@ const Re = {
                   ),
                   children: [
                     /* @__PURE__ */ f("div", { className: "flex items-center justify-between mb-[16px]", children: [
-                      /* @__PURE__ */ n(
+                      /* @__PURE__ */ a(
                         "button",
                         {
                           type: "button",
                           onClick: () => R("prev"),
                           onTouchStart: () => R("prev"),
                           className: "p-[4px] hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors",
-                          children: /* @__PURE__ */ n(Pe, { className: "w-[16px] h-[16px] text-gray-600 dark:text-gray-400" })
+                          children: /* @__PURE__ */ a(Pe, { className: "w-[16px] h-[16px] text-gray-600 dark:text-gray-400" })
                         }
                       ),
-                      /* @__PURE__ */ n(
+                      /* @__PURE__ */ a(
                         "button",
                         {
                           type: "button",
@@ -351,18 +351,18 @@ const Re = {
                           })
                         }
                       ),
-                      /* @__PURE__ */ n(
+                      /* @__PURE__ */ a(
                         "button",
                         {
                           type: "button",
                           onClick: () => R("next"),
                           onTouchStart: () => R("next"),
                           className: "p-[4px] hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors",
-                          children: /* @__PURE__ */ n(Fe, { className: "w-[16px] h-[16px] text-gray-600 dark:text-gray-400" })
+                          children: /* @__PURE__ */ a(Fe, { className: "w-[16px] h-[16px] text-gray-600 dark:text-gray-400" })
                         }
                       )
                     ] }),
-                    w && /* @__PURE__ */ n("div", { className: "mb-[16px]", children: /* @__PURE__ */ n("div", { className: "grid grid-cols-4 gap-[8px] max-h-[160px] overflow-y-auto", children: ve().map((e) => /* @__PURE__ */ n(
+                    w && /* @__PURE__ */ a("div", { className: "mb-[16px]", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-4 gap-[8px] max-h-[160px] overflow-y-auto", children: ve().map((e) => /* @__PURE__ */ a(
                       "button",
                       {
                         type: "button",
@@ -380,7 +380,7 @@ const Re = {
                       e
                     )) }) }),
                     !w && /* @__PURE__ */ f(Ne, { children: [
-                      /* @__PURE__ */ n("div", { className: "grid grid-cols-7 gap-[4px] mb-[8px]", children: Be(G).map((e) => /* @__PURE__ */ n(
+                      /* @__PURE__ */ a("div", { className: "grid grid-cols-7 gap-[4px] mb-[8px]", children: Be(G).map((e) => /* @__PURE__ */ a(
                         "div",
                         {
                           className: "text-xs font-medium text-gray-500 dark:text-gray-400 text-center py-[4px]",
@@ -388,9 +388,9 @@ const Re = {
                         },
                         e
                       )) }),
-                      /* @__PURE__ */ n("div", { className: "grid grid-cols-7 gap-[4px]", children: ke().map((e, t) => {
-                        const a = e.getMonth() === b.getMonth(), o = E && e.toDateString() === E.toDateString(), s = e.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
-                        return /* @__PURE__ */ n(
+                      /* @__PURE__ */ a("div", { className: "grid grid-cols-7 gap-[4px]", children: ke().map((e, t) => {
+                        const n = e.getMonth() === b.getMonth(), o = E && e.toDateString() === E.toDateString(), s = e.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
+                        return /* @__PURE__ */ a(
                           "button",
                           {
                             type: "button",
@@ -399,8 +399,8 @@ const Re = {
                             className: h(
                               "text-xs p-[8px] rounded-md transition-colors hover:bg-gray-100 dark:hover:bg-gray-700",
                               {
-                                "text-gray-400 dark:text-gray-500": !a,
-                                "text-gray-900 dark:text-gray-100": a && !o,
+                                "text-gray-400 dark:text-gray-500": !n,
+                                "text-gray-900 dark:text-gray-100": n && !o,
                                 "bg-blue-500 text-white hover:bg-blue-600": o,
                                 "ring-2 ring-blue-500 ring-offset-1": s && !o
                               }
@@ -410,7 +410,7 @@ const Re = {
                           t
                         );
                       }) }),
-                      /* @__PURE__ */ n("div", { className: "mt-[16px] pt-[12px] border-t border-border", children: /* @__PURE__ */ n(
+                      /* @__PURE__ */ a("div", { className: "mt-[16px] pt-[12px] border-t border-border", children: /* @__PURE__ */ a(
                         "button",
                         {
                           type: "button",
@@ -427,8 +427,8 @@ const Re = {
               document.body
             )
           ] }),
-          d && /* @__PURE__ */ n(Ie, { id: re, error: d, size: "md" }),
-          !d && U && /* @__PURE__ */ n($e, { id: ae, size: "md", children: U })
+          d && /* @__PURE__ */ a(Ie, { id: re, error: d, size: "md" }),
+          !d && U && /* @__PURE__ */ a($e, { id: ne, size: "md", children: U })
         ]
       }
     );

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