@axzydev/axzy_ui_system 1.2.13 → 1.2.14

package/src/showcases/StructureShowcases.tsx

@@ -11,8 +11,6 @@ import {
   FaCode,
   FaCheck,
   FaPlayCircle,
-  FaPlus,
-  FaSearch,
 } from "react-icons/fa";
 import {
   ITCard,
@@ -45,7 +43,7 @@ const CARD_PATTERN_CODES = {
   image="/courses/typescript.jpg"
   onClick={() => resume(course.id)}
   actions={
-    <ITButton label="Continue lesson 8" variant="filled" color="primary" size="small" />
+    <ITButton label="Continue lesson 8" variant="filled" color="primary" size="sm" />
   }
 >
   <ITFlex align="center" gap={3} className="mb-3">
@@ -53,7 +51,7 @@ const CARD_PATTERN_CODES = {
     <ITDivider orientation="vertical" className="h-3" />
     <ITText muted className="text-xs font-mono">4h 32m</ITText>
     <ITDivider orientation="vertical" className="h-3" />
-    <ITBadget label="★ 4.9" color="warning" size="small" variant="outlined" />
+    <ITBadget label="★ 4.9" color="warning" size="sm" variant="outlined" />
   </ITFlex>
   <ITProgress value={66} color="primary" size="md" />
   <ITFlex justify="between" align="center" className="mt-2">
@@ -65,7 +63,7 @@ const CARD_PATTERN_CODES = {
   <ITBadget
     label="Most popular"
     color="primary"
-    size="small"
+    size="sm"
     className="absolute -top-2 left-4 z-10 shadow-md"
   />
   <ITCard
@@ -73,7 +71,7 @@ const CARD_PATTERN_CODES = {
     className="ring-2 ring-primary-500/30"
     actions={
       <ITButton label="Start 14-day free trial"
-        variant="filled" color="primary" size="medium" className="w-full" />
+        variant="filled" color="primary" size="md" className="w-full" />
     }
   >
     <ITFlex align="baseline" gap={1}>
@@ -95,8 +93,8 @@ const CARD_PATTERN_CODES = {
   activity: `<ITCard
   actions={
     <ITFlex gap={2}>
-      <ITButton label="Reply" variant="text" color="primary" size="small" />
-      <ITButton label="Mute" variant="text" color="gray" size="small" />
+      <ITButton label="Reply" variant="text" color="primary" size="sm" />
+      <ITButton label="Mute" variant="text" color="gray" size="sm" />
     </ITFlex>
   }
 >
@@ -106,7 +104,7 @@ const CARD_PATTERN_CODES = {
       <ITText className="text-sm leading-relaxed">
         <ITText as="span" className="font-semibold">Daniela Klein</ITText>
         {' '}deployed{' '}
-        <ITBadget label="v2.4.1" color="primary" size="small" variant="outlined" />
+        <ITBadget label="v2.4.1" color="primary" size="sm" variant="outlined" />
         {' '}to <ITText as="span" className="font-semibold">production</ITText>.
       </ITText>
       <ITText muted className="text-xs mt-1.5 block">3 minutes ago · api-service</ITText>
@@ -131,8 +129,8 @@ const CARD_PATTERN_CODES = {
   onClick={() => openProfile(user.id)}
   actions={
     <ITFlex gap={2}>
-      <ITButton label="Message" variant="filled" color="primary" size="small" />
-      <ITButton label="View profile" variant="outlined" color="gray" size="small" />
+      <ITButton label="Message" variant="filled" color="primary" size="sm" />
+      <ITButton label="View profile" variant="outlined" color="gray" size="sm" />
     </ITFlex>
   }
 >
@@ -148,7 +146,7 @@ const CARD_PATTERN_CODES = {
   </ITText>
   <ITFlex gap={1} wrap="wrap" className="mt-3">
     {['TypeScript', 'Distributed systems', 'Open source'].map(t => (
-      <ITBadget key={t} label={t} color="primary" size="small" variant="outlined" />
+      <ITBadget key={t} label={t} color="primary" size="sm" variant="outlined" />
     ))}
   </ITFlex>
 </ITCard>`,
@@ -158,7 +156,7 @@ const CARD_PATTERN_CODES = {
   imageClassName="h-40"
   onClick={() => play(album.id)}
   actions={
-    <ITButton label="Play album" variant="filled" color="primary" size="small" />
+    <ITButton label="Play album" variant="filled" color="primary" size="sm" />
   }
 >
   <ITFlex justify="between" gap={3}>
@@ -183,7 +181,7 @@ const CARD_PATTERN_CODES = {
 
 const TEXT_PATTERN_CODES = {
   articleHeader: `<ITFlex align="center" gap={2} className="mb-3">
-  <ITBadget label="ENGINEERING" color="primary" size="small" variant="outlined" />
+  <ITBadget label="ENGINEERING" color="primary" size="sm" variant="outlined" />
   <ITText muted as="span" className="text-[11px] uppercase tracking-wider font-semibold">
     Featured
   </ITText>
@@ -204,7 +202,7 @@ const TEXT_PATTERN_CODES = {
 </ITFlex>`,
   sectionHeading: `<ITFlex justify="between" align="start" gap={4} className="mb-2">
   <ITText as="h2" className="text-xl font-bold">Recent activity</ITText>
-  <ITButton label="View all →" variant="text" color="primary" size="small" />
+  <ITButton label="View all →" variant="text" color="primary" size="sm" />
 </ITFlex>
 <ITText as="p" muted className="text-sm leading-relaxed">
   Latest commits, deployments and reviews from your team this week.
@@ -260,7 +258,7 @@ const PatternCard = ({ title, desc, code, children }: { title: string; desc?: st
           {desc && <p className="text-[11px] text-slate-500 dark:text-slate-400 mt-0.5">{desc}</p>}
         </div>
         {code && (
-          <ITButton variant="outlined" color="gray" size="small" onClick={() => setShowCode(!showCode)}>
+          <ITButton variant="outlined" color="gray" size="sm" onClick={() => setShowCode(!showCode)}>
             <ITFlex align="center" gap={1}>
               <FaCode size={9} />
               {showCode ? "Hide code" : "Code"}
@@ -289,7 +287,7 @@ export const CardShowcase = () => {
     if (title) lines.push(`  title="${title}"`);
     if (showImage) lines.push(`  image="https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=400&h=200&fit=crop"`);
     if (clickable) lines.push(`  onClick={() => openDetails()}`);
-    if (showActions) lines.push(`  actions={<ITButton label="View" variant="filled" color="primary" size="small" />}`);
+    if (showActions) lines.push(`  actions={<ITButton label="View" variant="filled" color="primary" size="sm" />}`);
     lines.push(`>`);
     lines.push(`  <p className="text-3xl font-bold">$48,230</p>`);
     lines.push(`  <p className="text-xs text-emerald-600">↑ 12.4% vs last month</p>`);
@@ -309,7 +307,7 @@ export const CardShowcase = () => {
               title={title || undefined}
               image={showImage ? "https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=400&h=200&fit=crop" : undefined}
               actions={showActions ? (
-                <ITButton label="View details" variant="filled" color="primary" size="small" />
+                <ITButton label="View details" variant="filled" color="primary" size="sm" />
               ) : undefined}
               onClick={clickable ? () => {} : undefined}
               className="max-w-sm mx-auto"
@@ -378,7 +376,7 @@ export const CardShowcase = () => {
                     image="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=600&h=200&fit=crop"
                     onClick={() => {}}
                     actions={
-                      <ITButton label="Continue lesson 8" variant="filled" color="primary" size="small" />
+                      <ITButton label="Continue lesson 8" variant="filled" color="primary" size="sm" />
                     }
                   >
                     <ITFlex align="center" gap={3} className="mb-3">
@@ -386,7 +384,7 @@ export const CardShowcase = () => {
                       <ITDivider orientation="vertical" className="h-3" />
                       <ITText muted className="text-xs font-mono">4h 32m</ITText>
                       <ITDivider orientation="vertical" className="h-3" />
-                      <ITBadget label="★ 4.9" color="warning" size="small" variant="outlined" />
+                      <ITBadget label="★ 4.9" color="warning" size="sm" variant="outlined" />
                     </ITFlex>
                     <ITProgress value={66} color="primary" size="md" />
                     <ITFlex justify="between" align="center" className="mt-2">
@@ -411,14 +409,14 @@ export const CardShowcase = () => {
                     <ITBadget
                       label="Most popular"
                       color="primary"
-                      size="small"
+                      size="sm"
                       className="absolute -top-2 left-4 z-10 shadow-md"
                     />
                     <ITCard
                       title="Scale"
                       className="ring-2 ring-primary-500/30"
                       actions={
-                        <ITButton label="Start 14-day free trial" variant="filled" color="primary" size="medium" className="w-full" />
+                        <ITButton label="Start 14-day free trial" variant="filled" color="primary" size="md" className="w-full" />
                       }
                     >
                       <ITFlex align="baseline" gap={1}>
@@ -450,8 +448,8 @@ export const CardShowcase = () => {
                   <ITCard
                     actions={
                       <ITFlex gap={2}>
-                        <ITButton label="Reply" variant="text" color="primary" size="small" />
-                        <ITButton label="Mute" variant="text" color="gray" size="small" />
+                        <ITButton label="Reply" variant="text" color="primary" size="sm" />
+                        <ITButton label="Mute" variant="text" color="gray" size="sm" />
                       </ITFlex>
                     }
                   >
@@ -461,7 +459,7 @@ export const CardShowcase = () => {
                         <ITText className="text-sm leading-relaxed text-slate-700">
                           <ITText as="span" className="font-semibold">Daniela Klein</ITText>
                           {' '}deployed{' '}
-                          <ITBadget label="v2.4.1" color="primary" size="small" variant="outlined" />
+                          <ITBadget label="v2.4.1" color="primary" size="sm" variant="outlined" />
                           {' '}to <ITText as="span" className="font-semibold">production</ITText>.
                         </ITText>
                         <ITText muted className="text-xs mt-1.5 block">3 minutes ago · api-service</ITText>
@@ -496,8 +494,8 @@ export const CardShowcase = () => {
                     onClick={() => {}}
                     actions={
                       <ITFlex gap={2}>
-                        <ITButton label="Message" variant="filled" color="primary" size="small" />
-                        <ITButton label="View profile" variant="outlined" color="gray" size="small" />
+                        <ITButton label="Message" variant="filled" color="primary" size="sm" />
+                        <ITButton label="View profile" variant="outlined" color="gray" size="sm" />
                       </ITFlex>
                     }
                   >
@@ -513,7 +511,7 @@ export const CardShowcase = () => {
                     </ITText>
                     <ITFlex gap={1} wrap="wrap" className="mt-3">
                       {['TypeScript', 'Distributed systems', 'Open source'].map((t) => (
-                        <ITBadget key={t} label={t} color="primary" size="small" variant="outlined" />
+                        <ITBadget key={t} label={t} color="primary" size="sm" variant="outlined" />
                       ))}
                     </ITFlex>
                   </ITCard>
@@ -683,7 +681,7 @@ export const TextShowcase = () => {
             <ITText muted as="span" className="text-[10px]">
               Trunca con "…" al superar (0 = desactivado).
             </ITText>
-            <ITButton variant="text" color="primary" size="small" onClick={() => setMaxLength("0")}>
+            <ITButton variant="text" color="primary" size="sm" onClick={() => setMaxLength("0")}>
               Reset
             </ITButton>
           </ITFlex>
@@ -699,7 +697,7 @@ export const TextShowcase = () => {
             <ITText muted as="span" className="text-[10px]">
               Inserta un &lt;br /&gt; al superar el límite.
             </ITText>
-            <ITButton variant="text" color="primary" size="small" onClick={() => setBreakLength("0")}>
+            <ITButton variant="text" color="primary" size="sm" onClick={() => setBreakLength("0")}>
               Reset
             </ITButton>
           </ITFlex>
@@ -756,7 +754,7 @@ export const TextShowcase = () => {
               >
                 <div className="max-w-md">
                   <ITFlex align="center" gap={2} className="mb-3">
-                    <ITBadget label="ENGINEERING" color="primary" size="small" variant="outlined" />
+                    <ITBadget label="ENGINEERING" color="primary" size="sm" variant="outlined" />
                     <ITText muted as="span" className="text-[11px] uppercase tracking-wider font-semibold">Featured</ITText>
                   </ITFlex>
                   <ITText as="h2" className="text-2xl font-bold text-slate-800 dark:text-slate-100 leading-tight mb-2 block">
@@ -787,7 +785,7 @@ export const TextShowcase = () => {
                     <ITText as="h2" className="text-xl font-bold text-slate-800 dark:text-slate-100">
                       Recent activity
                     </ITText>
-                    <ITButton label="View all →" variant="text" color="primary" size="small" />
+                    <ITButton label="View all →" variant="text" color="primary" size="sm" />
                   </ITFlex>
                   <ITText as="p" muted className="text-sm leading-relaxed">
                     Latest commits, deployments and reviews from your team this week. Updates every 30 seconds.
@@ -846,7 +844,7 @@ export const TextShowcase = () => {
                     <ITDivider orientation="vertical" className="h-3" />
                     <ITText muted as="span" className="text-[11px] font-mono">api-service</ITText>
                     <ITDivider orientation="vertical" className="h-3" />
-                    <ITBadget label="+124 -38" color="success" size="small" variant="outlined" />
+                    <ITBadget label="+124 -38" color="success" size="sm" variant="outlined" />
                   </ITFlex>
                 </div>
               </PatternCard>

package/src/theme/theme-context.ts

@@ -0,0 +1,37 @@
+import { createContext, useContext } from "react";
+import type { ITThemePalette } from "./theme.types";
+
+/**
+ * Contexto de theming compartido por ITThemeProvider y componentes que lo
+ * consumen (p.ej. ITFormHeader). Vive en @/theme para que ninguna capa
+ * atómica dependa de otra a través del provider.
+ */
+export interface ITThemeContextType {
+  palette: ITThemePalette;
+  colors: ITThemePalette;
+  setPalette: (newPalette: ITThemePalette) => void;
+  updateColor: (key: string, value: string) => void;
+  resetTheme: () => void;
+  applyPreset: (colors: ITThemePalette) => void;
+  resolvedTheme: "light" | "dark";
+  darkModeMode: "light" | "dark" | "system";
+  setDarkModeMode: (mode: "light" | "dark" | "system") => void;
+}
+
+export const ITThemeContext = createContext<ITThemeContextType | undefined>(undefined);
+
+export const useITTheme = () => {
+  const context = useContext(ITThemeContext);
+  if (!context) {
+    throw new Error("useITTheme must be used within an ITThemeProvider");
+  }
+  return context;
+};
+
+/**
+ * Versión segura de useITTheme que retorna undefined
+ * si se usa fuera de ITThemeProvider (no lanza error).
+ */
+export const useITThemeSafe = (): ITThemeContextType | undefined => {
+  return useContext(ITThemeContext);
+};

package/src/theme/theme.ts

@@ -1,3 +1,12 @@
+import type { SizesTypes } from "@/types/sizes.types";
+
+/** Escala única de medidas del sistema. `theme.input` usa `md` como default. */
+export const inputSizeTokens: Record<SizesTypes, { padding: string; fontSize: string }> = {
+  sm: { padding: "0.25rem 0.625rem", fontSize: "0.75rem" },
+  md: { padding: "0.375rem 0.75rem", fontSize: "0.8125rem" },
+  lg: { padding: "0.5rem 0.8125rem", fontSize: "0.875rem" },
+};
+
 /**
  * 1. Paleta base (Raw HEX values - Default Theme Fallback)
  */
@@ -104,52 +113,52 @@ export const semanticColors = {
  */
 export const components = {
   layout: {
-    backgroundColor: `var(--layout-bg, ${semanticColors.gray[50]})`,
-    contentPadding: 'var(--layout-padding, 1.5rem)',
+    backgroundColor: `var(--it-layout-bg, ${semanticColors.gray[50]})`,
+    contentPadding: 'var(--it-layout-padding, 1.5rem)',
   },
   topbar: {
-    backgroundColor: 'var(--topbar-bg, rgba(255, 255, 255, 0.90))', 
-    borderColor: `var(--topbar-border, ${semanticColors.gray[200]})`,
-    iconColor: `var(--topbar-icon, ${semanticColors.gray[500]})`,
-    iconHoverColor: `var(--topbar-icon-hover, ${semanticColors.gray[700]})`,
-    shadow: 'var(--topbar-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.025))',
-    textColor: `var(--topbar-text, ${semanticColors.gray[700]})`,
-    textHoverColor: `var(--topbar-text-hover, ${semanticColors.gray[900]})`,
+    backgroundColor: 'var(--it-topbar-bg, rgba(255, 255, 255, 0.90))', 
+    borderColor: `var(--it-topbar-border, ${semanticColors.gray[200]})`,
+    iconColor: `var(--it-topbar-icon, ${semanticColors.gray[500]})`,
+    iconHoverColor: `var(--it-topbar-icon-hover, ${semanticColors.gray[700]})`,
+    shadow: 'var(--it-topbar-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.025))',
+    textColor: `var(--it-topbar-text, ${semanticColors.gray[700]})`,
+    textHoverColor: `var(--it-topbar-text-hover, ${semanticColors.gray[900]})`,
     userMenu: {
-      backgroundColor: `var(--topbar-user-bg, ${semanticColors.gray[50]})`,
-      hoverBackground: `var(--topbar-user-hover, ${semanticColors.gray[100]})`,
-      textColor: `var(--topbar-user-text, ${semanticColors.gray[900]})`,
-      subtitleColor: `var(--topbar-user-subtitle, ${semanticColors.gray[500]})`,
+      backgroundColor: `var(--it-topbar-user-bg, ${semanticColors.gray[50]})`,
+      hoverBackground: `var(--it-topbar-user-hover, ${semanticColors.gray[100]})`,
+      textColor: `var(--it-topbar-user-text, ${semanticColors.gray[900]})`,
+      subtitleColor: `var(--it-topbar-user-subtitle, ${semanticColors.gray[500]})`,
       dropdown: {
-        backgroundColor: 'var(--topbar-user-dropdown-bg, #ffffff)',
-        borderColor: `var(--topbar-user-dropdown-border, ${semanticColors.gray[200]})`,
-        itemHoverBackground: `var(--topbar-user-item-hover, ${semanticColors.gray[50]})`,
+        backgroundColor: 'var(--it-topbar-user-dropdown-bg, #ffffff)',
+        borderColor: `var(--it-topbar-user-dropdown-border, ${semanticColors.gray[200]})`,
+        itemHoverBackground: `var(--it-topbar-user-item-hover, ${semanticColors.gray[50]})`,
       }
     }
   },
   sidebar: {
-    backgroundColor: 'var(--sidebar-bg, rgba(255, 255, 255, 0.90))',
-    borderColor: `var(--sidebar-border, ${semanticColors.gray[200]})`,
+    backgroundColor: 'var(--it-sidebar-bg, rgba(255, 255, 255, 0.90))',
+    borderColor: `var(--it-sidebar-border, ${semanticColors.gray[200]})`,
     label: {
-      color: `var(--sidebar-label-color, ${semanticColors.gray[700]})`,
-      size: 'var(--sidebar-label-size, 0.9rem)',
-      weight: 'var(--sidebar-label-weight, 500)',
+      color: `var(--it-sidebar-label-color, ${semanticColors.gray[700]})`,
+      size: 'var(--it-sidebar-label-size, 0.9rem)',
+      weight: 'var(--it-sidebar-label-weight, 500)',
     },
     icon: {
-      color: `var(--sidebar-icon-color, ${semanticColors.gray[500]})`,
-      size: 'var(--sidebar-icon-size, 1.25rem)',
+      color: `var(--it-sidebar-icon-color, ${semanticColors.gray[500]})`,
+      size: 'var(--it-sidebar-icon-size, 1.25rem)',
     },
     hover: {
-      backgroundColor: `var(--sidebar-hover-bg, ${semanticColors.gray[100]})`,
+      backgroundColor: `var(--it-sidebar-hover-bg, ${semanticColors.gray[100]})`,
     },
     active: {
-      backgroundColor: `var(--sidebar-active-bg, ${semanticColors.gray[50]})`,
-      color: `var(--sidebar-active-color, ${semanticColors.gray[900]})`,
-      iconColor: `var(--sidebar-active-icon, ${semanticColors.primary[500]})`, 
+      backgroundColor: `var(--it-sidebar-active-bg, ${semanticColors.gray[50]})`,
+      color: `var(--it-sidebar-active-color, ${semanticColors.gray[900]})`,
+      iconColor: `var(--it-sidebar-active-icon, ${semanticColors.primary[500]})`, 
     },
     badge: {
-      backgroundColor: `var(--sidebar-badge-bg, ${semanticColors.primary[500]})`, 
-      color: 'var(--sidebar-badge-color, #ffffff)',
+      backgroundColor: `var(--it-sidebar-badge-bg, ${semanticColors.primary[500]})`, 
+      color: 'var(--it-sidebar-badge-color, #ffffff)',
     },
   },
 
@@ -290,17 +299,17 @@ export const components = {
   },
 
   card: {
-    backgroundColor: 'var(--card-bg, #ffffff)',
+    backgroundColor: 'var(--it-card-bg, #ffffff)',
     borderRadius: 'var(--radius-2xl)',
-    borderColor: `var(--card-border, ${semanticColors.gray[200]})`,
+    borderColor: `var(--it-card-border, ${semanticColors.gray[200]})`,
     borderWidth: '1px',
-    shadow: 'var(--card-shadow, var(--shadow-md))',
+    shadow: 'var(--it-card-shadow, var(--shadow-md))',
     hover: {
-      shadow: 'var(--card-shadow-hover, var(--shadow-lg))',
+      shadow: 'var(--it-card-shadow-hover, var(--shadow-lg))',
     },
     header: {
-      backgroundColor: `var(--card-header-bg, ${semanticColors.gray[50]})`,
-      borderBottom: `1px solid var(--card-header-border, var(--color-secondary-200))`,
+      backgroundColor: `var(--it-card-header-bg, ${semanticColors.gray[50]})`,
+      borderBottom: `1px solid var(--it-card-header-border, var(--color-secondary-200))`,
       padding: '1rem 1.5rem',
       borderTopLeftRadius: 'var(--radius-2xl)',
       borderTopRightRadius: 'var(--radius-2xl)',
@@ -311,23 +320,21 @@ export const components = {
   },
 
   input: {
-    backgroundColor: 'var(--input-bg, #ffffff)',
-    borderColor: `var(--input-border, ${semanticColors.gray[300]})`,
+    backgroundColor: 'var(--it-input-bg, #ffffff)',
+    borderColor: `var(--it-input-border, ${semanticColors.gray[300]})`,
     borderRadius: 'var(--radius-md)',
-    padding: '0.5rem 0.75rem',
-    fontSize: '0.875rem',
     focus: {
-      borderColor: `var(--input-focus-border, ${semanticColors.primary[500]})`,
-      ring: `var(--input-focus-ring, 0 0 0 3px ${semanticColors.primary[100]})`,
+      borderColor: `var(--it-input-focus-border, ${semanticColors.primary[500]})`,
+      ring: `var(--it-input-focus-ring, 0 0 0 3px ${semanticColors.primary[100]})`,
     },
-    placeholder: `var(--input-placeholder, ${semanticColors.gray[400]})`,
+    placeholder: `var(--it-input-placeholder, ${semanticColors.gray[400]})`,
     disabled: {
-      backgroundColor: `var(--input-disabled-bg, ${semanticColors.gray[100]})`,
-      borderColor: `var(--input-disabled-border, ${semanticColors.gray[200]})`,
+      backgroundColor: `var(--it-input-disabled-bg, ${semanticColors.gray[100]})`,
+      borderColor: `var(--it-input-disabled-border, ${semanticColors.gray[200]})`,
     },
     error: {
-      borderColor: `var(--input-error-border, ${semanticColors.danger[500]})`,
-      ring: `var(--input-error-ring, 0 0 0 3px ${semanticColors.danger[100]})`,
+      borderColor: `var(--it-input-error-border, ${semanticColors.danger[500]})`,
+      ring: `var(--it-input-error-ring, 0 0 0 3px ${semanticColors.danger[100]})`,
     },
   },
 
@@ -378,45 +385,45 @@ export const components = {
 
   modal: {
     overlay: {
-      backgroundColor: 'var(--modal-overlay, rgba(15, 23, 42, 0.75))',
+      backgroundColor: 'var(--it-modal-overlay, rgba(15, 23, 42, 0.75))',
     },
     content: {
-      backgroundColor: 'var(--modal-bg, #ffffff)',
+      backgroundColor: 'var(--it-modal-bg, #ffffff)',
       borderRadius: 'var(--radius-2xl)',
-      shadow: 'var(--modal-shadow, var(--shadow-xl))',
+      shadow: 'var(--it-modal-shadow, var(--shadow-xl))',
     },
     header: {
       padding: '1.5rem 1.5rem 0.5rem 1.5rem',
-      borderBottom: `1px solid var(--modal-header-border, var(--color-secondary-200))`,
+      borderBottom: `1px solid var(--it-modal-header-border, var(--color-secondary-200))`,
     },
     body: {
       padding: '1.5rem',
     },
     footer: {
       padding: '1rem 1.5rem',
-      borderTop: `1px solid var(--modal-footer-border, var(--color-secondary-200))`,
-      backgroundColor: `var(--modal-footer-bg, ${semanticColors.gray[50]})`,
+      borderTop: `1px solid var(--it-modal-footer-border, var(--color-secondary-200))`,
+      backgroundColor: `var(--it-modal-footer-bg, ${semanticColors.gray[50]})`,
     },
   },
 
   calendar: {
-    backgroundColor: 'var(--calendar-bg, #ffffff)',
-    borderColor: `var(--calendar-border, ${semanticColors.gray[200]})`,
+    backgroundColor: 'var(--it-calendar-bg, #ffffff)',
+    borderColor: `var(--it-calendar-border, ${semanticColors.gray[200]})`,
     header: {
-      textColor: `var(--calendar-header-text, ${semanticColors.gray[800]})`,
-      hoverBackground: `var(--calendar-header-hover, ${semanticColors.gray[100]})`,
+      textColor: `var(--it-calendar-header-text, ${semanticColors.gray[800]})`,
+      hoverBackground: `var(--it-calendar-header-hover, ${semanticColors.gray[100]})`,
     },
     days: {
-      textColor: `var(--calendar-days-text, ${semanticColors.gray[700]})`,
-      weekendColor: `var(--calendar-days-weekend, ${semanticColors.gray[500]})`,
-      outsideMonthColor: `var(--calendar-days-outside, ${semanticColors.gray[300]})`,
+      textColor: `var(--it-calendar-days-text, ${semanticColors.gray[700]})`,
+      weekendColor: `var(--it-calendar-days-weekend, ${semanticColors.gray[500]})`,
+      outsideMonthColor: `var(--it-calendar-days-outside, ${semanticColors.gray[300]})`,
     },
     selection: {
-      selectedColor: 'var(--calendar-selected-text, #ffffff)',
-      selectedBackground: `var(--calendar-selected-bg, ${semanticColors.primary[600]})`,
-      rangeBackground: `var(--calendar-range-bg, ${semanticColors.primary[50]})`,
-      todayBackground: `var(--calendar-today-bg, ${semanticColors.primary[50]})`,
-      todayColor: `var(--calendar-today-text, ${semanticColors.primary[600]})`,
+      selectedColor: 'var(--it-calendar-selected-text, #ffffff)',
+      selectedBackground: `var(--it-calendar-selected-bg, ${semanticColors.primary[600]})`,
+      rangeBackground: `var(--it-calendar-range-bg, ${semanticColors.primary[50]})`,
+      todayBackground: `var(--it-calendar-today-bg, ${semanticColors.primary[50]})`,
+      todayColor: `var(--it-calendar-today-text, ${semanticColors.primary[600]})`,
     },
   },
 };

package/src/theme/theme.types.ts

@@ -12,6 +12,47 @@ export type ColorScale = {
   950?: string;
 };
 
+export interface ITThemePalette {
+  /** Main brand accent color (hex). Drives primary buttons, active nav items, focus rings, links, and the `--color-primary` CSS variable. @default "#06b6d4" */
+  primary: string;
+  /** Secondary/neutral accent color (hex). Used for less prominent actions and secondary badges/buttons. @default "#6b7280" */
+  secondary: string;
+  /** Tertiary accent color (hex), used for a third level of emphasis (e.g. alternate badges, chart accents). @default "#8b5cf6" */
+  ternary: string;
+  /** Semantic color for destructive/error states (hex): delete buttons, error badges, invalid form fields. @default "#ef4444" */
+  danger: string;
+  /** Semantic color for success/confirmation states (hex): success badges, completed steps, positive stats. @default "#22c55e" */
+  success: string;
+  /** Semantic color for informational states (hex): info banners/badges, neutral notices. @default "#3b82f6" */
+  info: string;
+  /** Semantic color for alert/caution states (hex), distinct from `warning`. Used by components that need a stronger visual cue than warning. @default "#f97316" */
+  alert: string;
+  /** Semantic color for warning states (hex): warning badges/banners, pending states. @default "#eab308" */
+  warning: string;
+  /** Colors for the app shell's sidebar and top navbar (ITSidebar, ITNavbar, ITTopbar, ITLayout). */
+  layout: {
+    /** Background color of the sidebar (hex). @default "#ffffff" */
+    sidebarBg: string;
+    /** Text/icon color used on the sidebar. @default "#334155" */
+    sidebarText: string;
+    /** Background color of the top navigation bar (hex). @default "#ffffff" */
+    navbarBg: string;
+    /** Text/icon color used on the top navigation bar. @default "#1e293b" */
+    navbarText: string;
+  };
+  /** Colors for ITTable/ITDataTable/ITSearchTable header and rows. */
+  table: {
+    /** Background color of the table header row (hex). @default "#f8fafc" */
+    headerBg: string;
+    /** Text color of the table header row. @default "#334155" */
+    headerText: string;
+    /** Background color of table body rows (hex). @default "#ffffff" */
+    rowBg: string;
+    /** Text color of table body rows. @default "#1e293b" */
+    rowText: string;
+  };
+}
+
 export type SemanticThemeColors = {
   primary?: ColorScale;
   secondary?: ColorScale;

package/src/types/badget.types.ts

@@ -24,9 +24,9 @@ export const outlinedBadgeColors = {
 } as const;
 
 export const badgeSizes = {
-  small: "text-xs px-2 py-1",
-  medium: "text-sm px-3 py-1.5",
-  large: "text-base px-4 py-2",
+  sm: "text-[10px] px-1.5 py-[3px]",
+  md: "text-[11px] px-2 py-[3px]",
+  lg: "text-xs px-2.5 py-1",
 } as const;
 
 export const getBadgeColorClasses = (color: ColorsTypes, variant: keyof typeof badgeVariants) => {

package/src/types/button.types.ts

@@ -10,7 +10,7 @@ export const buttonVariants: Record<string, string> = {
 };
 
 export const buttonSizes: Record<string, string> = {
-  small: "text-xs px-3 py-1.5",
-  medium: "text-sm px-5 py-2.5",
-  large: "text-lg px-6 py-3",
+  sm: "text-xs px-2.5 py-1",
+  md: "text-[13px] px-3.5 py-1.5",
+  lg: "text-sm px-4 py-2",
 };

package/src/types/sizes.types.ts

@@ -1 +1,2 @@
-export type SizesTypes = "small" | "medium" | "large";
+/** Escala única de tamaños del sistema: "sm" | "md" | "lg". */
+export type SizesTypes = "sm" | "md" | "lg";

package/src/utils/styles.ts

@@ -1,4 +1,41 @@
 import clsx from "clsx";
+import type { CSSProperties } from "react";
+import { inputSizeTokens } from "@/theme/theme";
+
+/** Theme shape expected from `theme.input` (used by input-like components). */
+export type InputThemeLike = {
+  backgroundColor?: string;
+  borderColor?: string;
+  borderRadius?: string;
+  disabled?: { backgroundColor?: string; borderColor?: string };
+  error?: { borderColor?: string; ring?: string };
+  focus?: { ring?: string };
+};
+
+/**
+ * Estilo base compartido por componentes de tipo campo (ITInput, ITSelect,
+ * ITSearchSelect…). Aplica los tokens del theme + la medida estándar de `size`.
+ * `extra` permite sobreescribir propiedades específicas del componente.
+ */
+export function inputFieldStyle(
+  inputTheme: InputThemeLike,
+  size: "sm" | "md" | "lg" = "md",
+  extra?: CSSProperties
+): CSSProperties {
+  const sizeConfig = inputSizeTokens[size] ?? inputSizeTokens.md;
+  return {
+    backgroundColor: inputTheme.backgroundColor,
+    borderColor: inputTheme.borderColor,
+    borderRadius: inputTheme.borderRadius,
+    padding: sizeConfig.padding,
+    fontSize: sizeConfig.fontSize,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    transition: "all 0.2s",
+    color: "var(--it-input-text-color, var(--color-secondary-900))",
+    ...extra,
+  };
+}
 
 // ──────────────────────────────────────────────
 //   INPUT-LIKE COMPONENTS

package/src/components/calendar/index.ts

@@ -1,3 +0,0 @@
-export { default } from './calendar';
-export * from './calendar';
-