@axzydev/axzy_ui_system 1.2.13 → 1.2.15

package/src/showcases/LayoutPrimitivesShowcases.tsx

@@ -1,34 +1,19 @@
-import React, { useState, ReactNode } from "react";
-import { FaCode, FaTimes } from "react-icons/fa";
-import ITStack from "../components/stack/stack";
-import ITFlex from "../components/flex/flex";
-import ITGrid from "../components/grid/grid";
-import ITCard from "../components/card/card";
-import ITButton from "../components/button/button";
-import ITStatCard from "../components/stat-card/stat-card";
-import ITAvatar from "../components/avatar/avatar";
-import ITSlider from "../components/slider/slider";
-import ITSegmentedControl from "../components/segmented-control/segmented-control";
-import ITSlideToggle from "../components/slide/slide";
-import ITSelect from "../components/select/select";
-import ITInput from "../components/input/input";
-import ITText from "../components/text/text";
+import React, { useState } from "react";
+import { FaCode } from "react-icons/fa";
+import ITStack from "../components/atoms/stack/stack";
+import ITFlex from "../components/atoms/flex/flex";
+import ITGrid from "../components/atoms/grid/grid";
+import ITCard from "../components/molecules/card/card";
+import ITButton from "../components/atoms/button/button";
+import ITStatCard from "../components/molecules/stat-card/stat-card";
+import ITAvatar from "../components/atoms/avatar/avatar";
+import ITSlider from "../components/atoms/slider/slider";
+import ITSegmentedControl from "../components/atoms/segmented-control/segmented-control";
+import ITSlideToggle from "../components/atoms/slide/slide";
+import ITSelect from "../components/molecules/select/select";
+import ITInput from "../components/atoms/input/input";
 import { ShowcaseLayout, CodeViewer } from "./ShowcaseLayout";
 
-const DemoBox = ({ children, className = "" }: { children: ReactNode; className?: string }) => (
-  <div className={`bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-lg p-3 text-center text-sm font-medium ${className}`}>
-    {children}
-  </div>
-);
-
-const DemoCard = ({ children, className = "" }: { children: ReactNode; className?: string }) => (
-  <div className={`bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4 shadow-sm ${className}`}>
-    <div className="h-8 w-8 rounded-lg bg-primary-100 dark:bg-primary-900/50 mb-3" />
-    <p className="text-sm font-semibold text-slate-700 dark:text-slate-200">{children}</p>
-    <p className="text-xs text-slate-400 mt-1">Descripción del item</p>
-  </div>
-);
-
 // ─────────────────────────────────────────
 // 1. ITStack Showcase
 // ─────────────────────────────────────────
@@ -421,10 +406,10 @@ export const StackShowcase = () => {
                       <p className="text-xs text-slate-500 dark:text-slate-400">128 active records</p>
                     </div>
                     <ITStack direction="row" spacing={2}>
-                      <ITButton variant="outlined" color="gray" size="small">
+                      <ITButton variant="outlined" color="gray" size="sm">
                         Export
                       </ITButton>
-                      <ITButton variant="filled" color="primary" size="small">
+                      <ITButton variant="filled" color="primary" size="sm">
                         + New Record
                       </ITButton>
                     </ITStack>
@@ -494,7 +479,7 @@ export const StackShowcase = () => {
                       <p className="text-sm font-semibold text-emerald-900 dark:text-emerald-200">Deployment successful</p>
                       <p className="text-xs text-emerald-700 dark:text-emerald-400 mt-0.5">Your changes are live in production.</p>
                     </div>
-                    <ITButton variant="icon-only" color="gray" size="small">
+                    <ITButton variant="icon-only" color="gray" size="sm">
                       <span className="text-lg leading-none">×</span>
                     </ITButton>
                   </ITStack>
@@ -556,7 +541,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"}
@@ -590,8 +575,8 @@ const FLEX_PATTERN_CODES = {
     <p>Last edited 2 min ago</p>
   </ITFlex>
   <ITFlex direction="row" gap={2}>
-    <ITButton label="Cancel" variant="outlined" color="gray" size="small" />
-    <ITButton label="Save" variant="filled" color="primary" size="small" />
+    <ITButton label="Cancel" variant="outlined" color="gray" size="sm" />
+    <ITButton label="Save" variant="filled" color="primary" size="sm" />
   </ITFlex>
 </ITFlex>`,
   growItems: `<ITFlex direction="row" gap={3}>
@@ -615,7 +600,7 @@ const FLEX_PATTERN_CODES = {
     <p className="text-lg font-bold ...">All set!</p>
     <p className="text-xs ...">Your workspace is ready to use.</p>
   </div>
-  <ITButton label="Get started" variant="filled" color="primary" size="small" />
+  <ITButton label="Get started" variant="filled" color="primary" size="sm" />
 </ITFlex>`,
   formRowWrap: `<ITFlex
   direction="row"
@@ -784,8 +769,8 @@ export const FlexShowcase = () => {
                       <p className="text-[11px] text-slate-500 dark:text-slate-400">Last edited 2 min ago</p>
                     </ITFlex>
                     <ITFlex direction="row" gap={2}>
-                      <ITButton label="Cancel" variant="outlined" color="gray" size="small" />
-                      <ITButton label="Save" variant="filled" color="primary" size="small" />
+                      <ITButton label="Cancel" variant="outlined" color="gray" size="sm" />
+                      <ITButton label="Save" variant="filled" color="primary" size="sm" />
                     </ITFlex>
                   </ITFlex>
                 </div>
@@ -827,7 +812,7 @@ export const FlexShowcase = () => {
                       <p className="text-lg font-bold text-slate-800 dark:text-slate-100">All set!</p>
                       <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">Your workspace is ready to use.</p>
                     </div>
-                    <ITButton label="Get started" variant="filled" color="primary" size="small" />
+                    <ITButton label="Get started" variant="filled" color="primary" size="sm" />
                   </ITFlex>
                 </div>
               </PatternCard>
@@ -1038,7 +1023,7 @@ export const GridShowcase = () => {
                             <p className="text-base font-bold text-slate-800 dark:text-slate-100">Overview</p>
                             <p className="text-[11px] text-slate-500 dark:text-slate-400">Last 30 days</p>
                           </div>
-                          <ITButton label="+ New project" variant="filled" color="primary" size="small" />
+                          <ITButton label="+ New project" variant="filled" color="primary" size="sm" />
                         </ITFlex>
                         <ITGrid container spacing={2}>
                           {[
@@ -1084,7 +1069,7 @@ export const GridShowcase = () => {
                           <span className="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-primary-600 text-white">Design</span>
                           <span className="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300">Figma</span>
                         </div>
-                        <ITButton label="Follow" variant="outlined" color="primary" size="small" className="mt-4 w-full" />
+                        <ITButton label="Follow" variant="outlined" color="primary" size="sm" className="mt-4 w-full" />
                       </div>
                     </ITGrid>
                     <ITGrid item xs={12} md={8}>
@@ -1168,8 +1153,8 @@ export const GridShowcase = () => {
                           </ITGrid>
                         </ITGrid>
                         <div className="flex justify-end gap-2 pt-2 border-t border-slate-100 dark:border-slate-800">
-                          <ITButton label="Cancel" variant="outlined" color="gray" size="small" />
-                          <ITButton label="Save changes" variant="filled" color="primary" size="small" />
+                          <ITButton label="Cancel" variant="outlined" color="gray" size="sm" />
+                          <ITButton label="Save changes" variant="filled" color="primary" size="sm" />
                         </div>
                       </div>
                     </ITGrid>
@@ -1224,7 +1209,7 @@ export const GridShowcase = () => {
                             ))}
                           </div>
                         </div>
-                        <ITButton label="Share article" variant="outlined" color="primary" size="small" className="w-full" />
+                        <ITButton label="Share article" variant="outlined" color="primary" size="sm" className="w-full" />
                       </div>
                     </ITGrid>
                   </ITGrid>
@@ -1294,7 +1279,7 @@ export const GridShowcase = () => {
                             label={plan.cta}
                             variant={plan.featured ? "filled" : "outlined"}
                             color={plan.featured ? "primary" : "gray"}
-                            size="small"
+                            size="sm"
                             className="w-full mt-4"
                           />
                         </div>
@@ -1313,16 +1298,9 @@ export const GridShowcase = () => {
 
 // ─────────────────────────────────────────
 // 4. Composite Screen Examples
-// ─────────────────────────────────────────
-const SectionTitle = ({ children }: { children: string }) => (
-  <h3 className="text-lg font-bold text-slate-800 dark:text-white mb-1">{children}</h3>
-);
+ // ─────────────────────────────────────────
 
-const SectionDesc = ({ children }: { children: string }) => (
-  <p className="text-sm text-slate-500 dark:text-slate-400 mb-4">{children}</p>
-);
-
-export const ScreenDashboardShowcase = () => {
+ export const ScreenDashboardShowcase = () => {
   const code = `// Dashboard completo en 30 líneas
 <ITStack spacing={6}>
   {/* Header row */}
@@ -1377,7 +1355,7 @@ export const ScreenDashboardShowcase = () => {
               <h2 className="text-xl font-bold text-slate-800 dark:text-white">Dashboard</h2>
               <p className="text-xs text-slate-400">Resumen de actividad del sistema</p>
             </div>
-            <ITButton label="Exportar" variant="outlined" size="small" />
+            <ITButton label="Exportar" variant="outlined" size="sm" />
           </ITFlex>
 
           <ITGrid container spacing={3}>
@@ -1486,6 +1464,7 @@ export const ScreenFormShowcase = () => {
               label="Nombre"
               placeholder="Ej: Juan"
               onChange={() => {}}
+              size="sm"
             />
           </ITGrid>
           <ITGrid item xs={12} md={6}>
@@ -1530,8 +1509,8 @@ export const ScreenFormShowcase = () => {
           </ITGrid>
           <ITGrid item xs={12}>
             <ITFlex justify="end" gap={3}>
-              <ITButton label="Cancelar" variant="outlined" size="small" />
-              <ITButton label="Guardar" size="small" />
+              <ITButton label="Cancelar" variant="outlined" size="sm" />
+              <ITButton label="Guardar" size="sm" />
             </ITFlex>
           </ITGrid>
         </ITGrid>

package/src/showcases/PageShowcases.tsx

@@ -10,37 +10,25 @@ import {
   FaEye,
   FaPlus,
   FaDownload,
-  FaFilter,
   FaSearch,
-  FaCheckCircle,
-  FaTimesCircle,
-  FaClock,
-  FaEnvelope,
-  FaPhone,
-  FaMapMarkerAlt,
   FaBell,
   FaSave,
-  FaSignOutAlt,
   FaShieldAlt,
   FaPalette,
-  FaLanguage,
   FaDollarSign,
-  FaArrowUp,
-  FaArrowDown,
 } from "react-icons/fa";
-import ITPage from "../components/page/page";
-import ITPageHeader from "../components/page-header/page-header";
-import ITButton from "../components/button/button";
-import ITCard from "../components/card/card";
-import ITStack from "../components/stack/stack";
-import ITGrid from "../components/grid/grid";
-import ITStatCard from "../components/stat-card/stat-card";
-import ITFlex from "../components/flex/flex";
-import ITAvatar from "../components/avatar/avatar";
-import ITSlideToggle from "../components/slide/slide";
-import ITText from "@/components/text/text";
-import ITTable from "@/components/table/table";
-import type { Column } from "@/components/table/table.props";
+import ITPage from "../components/templates/page/page";
+import ITPageHeader from "../components/organisms/page-header/page-header";
+import ITButton from "../components/atoms/button/button";
+import ITCard from "../components/molecules/card/card";
+import ITStack from "../components/atoms/stack/stack";
+import ITGrid from "../components/atoms/grid/grid";
+import ITFlex from "../components/atoms/flex/flex";
+import ITAvatar from "../components/atoms/avatar/avatar";
+import ITSlideToggle from "../components/atoms/slide/slide";
+import ITText from "@/components/atoms/text/text";
+import ITTable from "@/components/molecules/table/table";
+import type { Column } from "@/components/molecules/table/table.props";
 import { ShowcaseLayout } from "./ShowcaseLayout";
 
 export const PageHeaderShowcase = () => {
@@ -61,8 +49,8 @@ export const PageHeaderShowcase = () => {
     if (showBack) lines.push(`  backAction={() => history.back()}`);
     if (actionsVariant !== "none") {
       const acts = [];
-      acts.push(`<ITButton label="Add member" variant="filled" color="primary" size="small" />`);
-      if (actionsVariant === "double" || actionsVariant === "full") acts.push(`<ITButton label="Export" variant="outlined" color="gray" size="small" />`);
+      acts.push(`<ITButton label="Add member" variant="filled" color="primary" size="sm" />`);
+      if (actionsVariant === "double" || actionsVariant === "full") acts.push(`<ITButton label="Export" variant="outlined" color="gray" size="sm" />`);
       lines.push(`  actions={<>${acts.join("")}</>}`);
     }
     lines.push(`/>`);
@@ -72,9 +60,9 @@ export const PageHeaderShowcase = () => {
   const actionEl =
     actionsVariant === "none" ? undefined : (
       <ITFlex gap={2}>
-        <ITButton label="Add member" variant="filled" color="primary" size="small" />
+        <ITButton label="Add member" variant="filled" color="primary" size="sm" />
         {(actionsVariant === "double" || actionsVariant === "full") && (
-          <ITButton label="Export" variant="outlined" color="gray" size="small" />
+          <ITButton label="Export" variant="outlined" color="gray" size="sm" />
         )}
       </ITFlex>
     );
@@ -134,7 +122,7 @@ export const PageHeaderShowcase = () => {
                     <option value="pending">Pending</option>
                     <option value="inactive">Inactive</option>
                   </select>
-                  <ITButton label="Clear" variant="text" color="gray" size="small" />
+                  <ITButton label="Clear" variant="text" color="gray" size="sm" />
                 </ITFlex>
               </div>
             )}
@@ -199,7 +187,7 @@ export const PageHeaderShowcase = () => {
                   label={v.charAt(0).toUpperCase() + v.slice(1)}
                   variant={actionsVariant === v ? "filled" : "outlined"}
                   color="primary"
-                  size="small"
+                  size="sm"
                   onClick={() => setActionsVariant(v)}
                 />
               ))}
@@ -231,8 +219,8 @@ export const PageHeaderShowcase = () => {
                   backAction={() => {}}
                   actions={
                     <ITFlex gap={2}>
-                      <ITButton label="Export" variant="outlined" color="gray" size="small" />
-                      <ITButton label="Add member" variant="filled" color="primary" size="small" />
+                      <ITButton label="Export" variant="outlined" color="gray" size="sm" />
+                      <ITButton label="Add member" variant="filled" color="primary" size="sm" />
                     </ITFlex>
                   }
                 />
@@ -294,8 +282,8 @@ export const PageHeaderShowcase = () => {
                   backAction={() => {}}
                   actions={
                     <ITFlex gap={2}>
-                      <ITButton label="Cancel" variant="outlined" color="gray" size="small" />
-                      <ITButton label="Save changes" variant="filled" color="primary" size="small" />
+                      <ITButton label="Cancel" variant="outlined" color="gray" size="sm" />
+                      <ITButton label="Save changes" variant="filled" color="primary" size="sm" />
                     </ITFlex>
                   }
                 />
@@ -335,7 +323,7 @@ export const PageHeaderShowcase = () => {
                         <option>This quarter</option>
                         <option>Custom range</option>
                       </select>
-                      <ITButton label="Refresh" variant="outlined" color="gray" size="small" />
+                      <ITButton label="Refresh" variant="outlined" color="gray" size="sm" />
                     </ITFlex>
                   }
                 />
@@ -353,8 +341,8 @@ export const PageHeaderShowcase = () => {
                   description="Configure your workspace preferences, notifications and security options."
                   actions={
                     <ITFlex gap={2}>
-                      <ITButton label="Reset" variant="outlined" color="gray" size="small" />
-                      <ITButton label="Save" variant="filled" color="primary" size="small" />
+                      <ITButton label="Reset" variant="outlined" color="gray" size="sm" />
+                      <ITButton label="Save" variant="filled" color="primary" size="sm" />
                     </ITFlex>
                   }
                 />
@@ -380,7 +368,7 @@ export const PageHeaderShowcase = () => {
                         <FaSearch size={11} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
                         <input type="text" placeholder="Search..." className="w-[180px] pl-9 pr-3 py-2 text-xs border border-slate-200 dark:border-slate-700 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-800 dark:text-white outline-none focus:ring-2 focus:ring-primary-500" />
                       </div>
-                      <ITButton label="Invite" variant="filled" color="primary" size="small" />
+                      <ITButton label="Invite" variant="filled" color="primary" size="sm" />
                     </ITFlex>
                   }
                 />
@@ -458,7 +446,7 @@ export const PageShowcase = () => {
   error={error}
   empty={isEmpty}
   onRetry={refetch}
-  actions={<ITButton label="Invite" size="small" />}
+  actions={<ITButton label="Invite" size="sm" />}
 >
   <ITTable columns={[...]} data={users} />
 </ITPage>`;
@@ -616,8 +604,8 @@ export const PageShowcase = () => {
               empty={state === "empty"}
               emptyTitle="No team members yet"
               emptyDescription="Invite your first team member to get started."
-              emptyAction={<ITButton label="Invite members" size="small" icon={<FaPlus />} />}
-              actions={<ITButton label="Invite" size="small" icon={<FaPlus />} />}
+              emptyAction={<ITButton label="Invite members" size="sm" icon={<FaPlus />} />}
+              actions={<ITButton label="Invite" size="sm" icon={<FaPlus />} />}
             >
               <ITTable
                 columns={columns}
@@ -640,7 +628,7 @@ export const PageShowcase = () => {
                   key={s}
                   label={s.charAt(0).toUpperCase() + s.slice(1)}
                   variant={state === s ? "filled" : "outlined"}
-                  size="small"
+                  size="sm"
                   onClick={() => setState(s)}
                 />
               ))}
@@ -659,13 +647,13 @@ export const PageShowcase = () => {
                 <ITButton
                   label="List"
                   variant={screen === "list" ? "filled" : "outlined"}
-                  size="small"
+                  size="sm"
                   onClick={() => handleBackToList()}
                 />
                 <ITButton
                   label="Detail (last viewed)"
                   variant={screen === "detail" ? "filled" : "outlined"}
-                  size="small"
+                  size="sm"
                   disabled={!selectedUser}
                   onClick={() => screen === "list" && selectedUser ? setScreen("detail") : handleBackToList()}
                 />
@@ -693,8 +681,8 @@ export const PageShowcase = () => {
                 breadcrumbs={[{ label: "Admin", href: "#" }, { label: "Users" }]}
                 actions={
                   <ITFlex gap={2}>
-                    <ITButton label="Export" variant="outlined" size="small" icon={<FaDownload />} />
-                    <ITButton label="Add user" size="small" icon={<FaPlus />} />
+                    <ITButton label="Export" variant="outlined" size="sm" icon={<FaDownload />} />
+                    <ITButton label="Add user" size="sm" icon={<FaPlus />} />
                   </ITFlex>
                 }
               >
@@ -721,8 +709,8 @@ export const PageShowcase = () => {
                 backAction={() => {}}
                 actions={
                   <ITFlex gap={2}>
-                    <ITButton label="Delete" variant="outlined" color="gray" size="small" icon={<FaTrash />} />
-                    <ITButton label="Edit" size="small" icon={<FaEdit />} />
+                    <ITButton label="Delete" variant="outlined" color="gray" size="sm" icon={<FaTrash />} />
+                    <ITButton label="Edit" size="sm" icon={<FaEdit />} />
                   </ITFlex>
                 }
               >
@@ -768,8 +756,8 @@ export const PageShowcase = () => {
                 backAction={() => {}}
                 actions={
                   <ITFlex gap={2}>
-                    <ITButton label="Cancel" variant="outlined" color="gray" size="small" />
-                    <ITButton label="Save changes" size="small" icon={<FaSave />} />
+                    <ITButton label="Cancel" variant="outlined" color="gray" size="sm" />
+                    <ITButton label="Save changes" size="sm" icon={<FaSave />} />
                   </ITFlex>
                 }
               >
@@ -778,7 +766,7 @@ export const PageShowcase = () => {
                     <ITCard title="Profile photo">
                       <div className="flex flex-col items-center gap-4">
                         <ITAvatar initials="AL" size="xl" />
-                        <ITButton label="Upload image" variant="outlined" size="small" />
+                        <ITButton label="Upload image" variant="outlined" size="sm" />
                       </div>
                     </ITCard>
                   </ITGrid>
@@ -817,8 +805,8 @@ export const PageShowcase = () => {
                 breadcrumbs={[{ label: "Dashboard", href: "#" }, { label: "Orders" }]}
                 actions={
                   <ITFlex gap={2}>
-                    <ITButton label="Export" variant="outlined" color="gray" size="small" icon={<FaDownload />} />
-                    <ITButton label="New order" size="small" icon={<FaPlus />} />
+                    <ITButton label="Export" variant="outlined" color="gray" size="sm" icon={<FaDownload />} />
+                    <ITButton label="New order" size="sm" icon={<FaPlus />} />
                   </ITFlex>
                 }
               >

package/src/showcases/ShowcaseLayout.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { FaCheck, FaCopy, FaBookOpen, FaCog, FaCode, FaEye } from "react-icons/fa";
-import ITCard from "../components/card/card";
-import ITGrid from "../components/grid/grid";
+import ITGrid from "../components/atoms/grid/grid";
 import { useITTheme } from "../components/theme-provider/themeProvider";
 
 export const CodeViewer: React.FC<{ code: string; compact?: boolean }> = ({ code, compact }) => {

package/src/showcases/SizesShowcase.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import { FaCode } from "react-icons/fa";
+import {
+  ITButton,
+  ITInput,
+  ITSelect,
+  ITBadget,
+} from "../index";
+import { CodeViewer } from "./ShowcaseLayout";
+
+type SizeKey = "sm" | "md" | "lg";
+
+const sizes: SizeKey[] = ["sm", "md", "lg"];
+
+const sizeDemoCode = (s: SizeKey) => `// Medida estándar "${s}" — misma escala en todos los componentes
+<ITInput size="${s}" label="Nombre" />
+<ITSelect size="${s}" label="Rol" />
+<ITButton size="${s}">Guardar</ITButton>
+<ITBadget size="${s}">Activo</ITBadget>`;
+
+const SizeRow = ({ size, isOpen, onToggleShow }: { size: SizeKey; isOpen: boolean; onToggleShow: () => void }) => (
+  <div className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
+    <div className="px-6 py-4 border-b border-slate-200 dark:border-slate-700 flex items-center justify-between">
+      <div>
+        <h3 className="text-sm font-bold text-slate-800 dark:text-white uppercase">{size}</h3>
+        <p className="text-xs text-slate-500 mt-1">Medida estándar del sistema</p>
+      </div>
+      <ITButton variant="outlined" color="gray" size="sm" onClick={onToggleShow}>
+        <span className="inline-flex items-center gap-1.5"><FaCode size={12} /> Código</span>
+      </ITButton>
+    </div>
+    <div className="px-6 py-5 space-y-4">
+      <div>
+        <p className="text-xs text-slate-400 mb-1.5">ITInput</p>
+        <ITInput name={`names_${size}`} label="Nombre" placeholder="Ej: Juan" onChange={() => {}} onBlur={() => {}} size={size} />
+      </div>
+      <div>
+        <p className="text-xs text-slate-400 mb-1.5">ITSelect</p>
+        <ITSelect
+          name={`roles_${size}`}
+          label="Rol"
+          placeholder="Selecciona una opción"
+          size={size}
+          onChange={() => {}}
+          onBlur={() => {}}
+          options={[
+            { label: "Administrador", value: "admin" },
+            { label: "Colaborador", value: "staff" },
+          ]}
+        />
+      </div>
+      <div className="flex flex-wrap items-center gap-3 pt-1">
+        <p className="text-xs text-slate-400 mr-1">ITButton / ITBadget</p>
+        <ITButton size={size}>Guardar</ITButton>
+        <ITButton variant="outlined" color="gray" size={size}>Cancelar</ITButton>
+        <ITBadget size={size}>Activo</ITBadget>
+        <ITBadget size={size} variant="outlined">Borrador</ITBadget>
+      </div>
+    </div>
+    {isOpen && (
+      <div className="border-t border-slate-200 dark:border-slate-700">
+        <CodeViewer code={sizeDemoCode(size)} />
+      </div>
+    )}
+  </div>
+);
+
+export const SizesShowcase = () => {
+  const [openSize, setOpenSize] = useState<SizeKey | null>(null);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-bold text-slate-900 dark:text-white">Medidas estándar · sm / md / lg</h2>
+        <p className="text-sm text-slate-500 mt-1">
+          Una sola escala para todos los componentes. El tamaño del formulario, select, botón y badge
+          se controla con la misma prop <code className="px-1 py-0.5 bg-slate-100 dark:bg-slate-800 rounded text-slate-700 dark:text-slate-300">size</code>.
+        </p>
+      </div>
+      {sizes.map((s) => (
+        <SizeRow key={s} size={s} isOpen={openSize === s} onToggleShow={() => setOpenSize(openSize === s ? null : s)} />
+      ))}
+    </div>
+  );
+};