@axzydev/axzy_ui_system 1.2.7 → 1.2.9

package/src/showcases/FormShowcases.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { FaSync, FaSave, FaTrash, FaEdit } from "react-icons/fa";
+import { FaSync, FaSave, FaTrash, FaEdit, FaCode } from "react-icons/fa";
 import {
   ITButton,
   ITInput,
@@ -13,7 +13,36 @@ import {
   ITFormBuilder,
   UploadStatus
 } from "../index";
-import { ShowcaseLayout } from "./ShowcaseLayout";
+import { ShowcaseLayout, CodeViewer } from "./ShowcaseLayout";
+import ITFlex from "../components/flex/flex";
+
+const CodeExampleBlock = ({ title, desc, code, children }: { title: string; desc: string; code: string; children: React.ReactNode }) => {
+  const [showCode, setShowCode] = useState(false);
+  return (
+    <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">
+        <ITFlex justify="between" align="center">
+          <div>
+            <h3 className="text-sm font-bold text-slate-800 dark:text-white">{title}</h3>
+            <p className="text-xs text-slate-500 mt-1">{desc}</p>
+          </div>
+          <ITButton variant="outlined" color="gray" size="small" onClick={() => setShowCode(!showCode)}>
+            <ITFlex align="center" gap={1}>
+              <FaCode size={9} />
+              {showCode ? "Ocultar código" : "Ver código"}
+            </ITFlex>
+          </ITButton>
+        </ITFlex>
+      </div>
+      <div className="p-6">{children}</div>
+      {showCode && (
+        <div className="px-6 pb-6 border-t border-slate-200 dark:border-slate-700 pt-4">
+          <CodeViewer code={code} compact />
+        </div>
+      )}
+    </div>
+  );
+};
 
 // 1. ITButton Showcase
 export const ButtonShowcase = () => {
@@ -1099,6 +1128,7 @@ export const FormBuilderShowcase = () => {
     country: "MX",
     accept: false
   });
+  const [submitted, setSubmitted] = useState<any>(null);
 
   const handleChange = (e: any) => {
     const { name, value, type, checked } = e.target;
@@ -1109,51 +1139,391 @@ export const FormBuilderShowcase = () => {
   };
 
   const config: any = [
-    { name: "name", label: "Nombre Completo", type: "text", required: true },
-    { name: "email", label: "Correo de Contacto", type: "email", required: true },
+    { name: "name", label: "Nombre Completo", type: "text", required: true, column: 6 },
+    { name: "email", label: "Correo de Contacto", type: "email", required: true, column: 6 },
     {
       name: "country",
       label: "País Operación",
       type: "select",
+      column: 6,
       options: [
         { label: "México", value: "MX" },
         { label: "Chile", value: "CL" },
         { label: "Perú", value: "PE" }
       ]
     },
-    { name: "accept", label: "Acepto términos y condiciones", type: "checkbox" }
+    { name: "accept", label: "Acepto términos y condiciones", type: "checkbox", column: 12 }
   ];
 
   const code = `<ITFormBuilder\n  config={[\n    { name: 'name', label: 'Nombre', type: 'text', required: true },\n    { name: 'email', label: 'Email', type: 'email' },\n    ...\n  ]}\n  values={formValues}\n  handleChange={handleFormChange}\n/>`;
 
   return (
-    <ShowcaseLayout
-      title="ITFormBuilder"
-      description="Generador dinámico de formularios basado en un esquema estructurado JSON."
-      code={code}
-      demo={
-        <div className="w-full max-w-md bg-white dark:bg-slate-900 p-6 rounded-2xl border shadow-sm space-y-6">
-          <ITFormBuilder
-            config={config}
-            values={values}
-            handleChange={handleChange}
-            handleBlur={() => { }}
-            touched={{}}
-            errors={{}}
-          />
-          <div className="pt-4 border-t border-slate-100 dark:border-slate-800">
-            <h5 className="text-xs font-bold uppercase text-slate-400 mb-2">Valores del Formulario (JSON):</h5>
-            <pre className="p-3 bg-slate-950 text-emerald-400 text-xs rounded-lg overflow-x-auto font-mono">
-              {JSON.stringify(values, null, 2)}
-            </pre>
+    <div className="space-y-8">
+      <ShowcaseLayout
+        title="ITFormBuilder"
+        description="Generador dinámico de formularios basado en un esquema estructurado JSON."
+        code={code}
+        demo={
+          <div className="w-full max-w-md space-y-6">
+            <form
+              onSubmit={(e) => { e.preventDefault(); setSubmitted(values); }}
+              className="bg-white dark:bg-slate-900 p-6 rounded-2xl border shadow-sm space-y-4"
+            >
+              <ITFormBuilder
+                config={config}
+                values={values}
+                handleChange={handleChange}
+                handleBlur={() => {}}
+                touched={{}}
+                errors={{}}
+                setFieldValue={(field, val) => { setValues(prev => ({ ...prev, [field]: val })); return Promise.resolve(); }}
+              />
+              <div className="pt-4 flex justify-end gap-3">
+                <ITButton variant="outlined" color="gray" size="small" onClick={() => { setValues({ name: "", email: "", country: "MX", accept: false }); setSubmitted(null); }}>
+                  Limpiar
+                </ITButton>
+                <ITButton variant="filled" color="primary" size="small" type="submit">
+                  Enviar
+                </ITButton>
+              </div>
+            </form>
+            {submitted && (
+              <div className="p-4 bg-slate-950 text-emerald-400 text-xs rounded-xl border border-slate-800 font-mono">
+                <p className="font-bold text-emerald-300 mb-2">✓ Payload Enviado:</p>
+                <pre>{JSON.stringify(submitted, null, 2)}</pre>
+              </div>
+            )}
+          </div>
+        }
+        controls={
+          <div className="p-2 bg-slate-50 dark:bg-slate-900 rounded-lg text-xs">
+            <p className="text-slate-500">El formulario se genera dinámicamente inyectando un array de campos configurados.</p>
           </div>
+        }
+      />
+
+      <CodeExampleBlock
+        title="Formulario llenado desde API"
+        desc="Carga datos asíncronamente al montar el formulario"
+        code={`const FormFillFromApi = () => {
+  const [loading, setLoading] = useState(true);
+  const [values, setValues] = useState({ name: "", email: "", role: "" });
+
+  useEffect(() => {
+    setTimeout(() => {
+      // Simula fetch de API
+      setValues({ name: "Juan Pérez", email: "juan@ejemplo.com", role: "admin" });
+      setLoading(false);
+    }, 1500);
+  }, []);
+
+  if (loading) return <Spinner />;
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <ITFormBuilder
+        config={[
+          { name: "name", label: "Nombre", type: "text", required: true, column: 6 },
+          { name: "email", label: "Correo", type: "email", required: true, column: 6 },
+          { name: "role", label: "Rol", type: "select", column: 12,
+            options: [
+              { label: "Admin", value: "admin" },
+              { label: "Editor", value: "editor" },
+              { label: "Usuario", value: "user" }
+            ]
+          }
+        ]}
+        values={values}
+        handleChange={...}
+        setFieldValue={...}
+      />
+    </form>
+  );
+};`}
+      >
+        <FormFillFromApi />
+      </CodeExampleBlock>
+
+      <CodeExampleBlock
+        title="Select conectado a API con Cascade"
+        desc="Select asíncrono que al seleccionar actualiza otro campo"
+        code={`const config = [
+  {
+    name: "country", label: "País", type: "select",
+    options: [
+      { label: "México", value: "MX" },
+      { label: "España", value: "ES" },
+      { label: "Colombia", value: "CO" }
+    ],
+    onChangeAction: (val, { setFieldValue }) => {
+      setFieldValue("city", ""); // limpia ciudad al cambiar país
+    }
+  },
+  {
+    name: "city", label: "Ciudad", type: "select",
+    options: async () => {
+      const cities = {
+        MX: [
+          { value: "CDMX", label: "Ciudad de México" },
+          { value: "GDL", label: "Guadalajara" },
+          { value: "MTY", label: "Monterrey" }
+        ],
+        ES: [
+          { value: "MAD", label: "Madrid" },
+          { value: "BCN", label: "Barcelona" },
+          { value: "SEV", label: "Sevilla" }
+        ],
+        CO: [
+          { value: "BOG", label: "Bogotá" },
+          { value: "MED", label: "Medellín" },
+          { value: "CAL", label: "Cali" }
+        ]
+      };
+      await new Promise(r => setTimeout(r, 800));
+      return cities[country] || [];
+    }
+  }
+];`}
+      >
+        <CascadingSelectsExample />
+      </CodeExampleBlock>
+
+      <CodeExampleBlock
+        title="Conversor de Moneda"
+        desc="Select de divisa que actualiza precios en MXN y USD"
+        code={`const CurrencyConverterExample = () => {
+  const [values, setValues] = useState({ currency: "MXN", amount: 1000 });
+  const TC = 20.50;
+
+  const config = [
+    {
+      name: "currency", label: "Moneda", type: "select", column: 6,
+      options: [
+        { label: "MXN - Peso Mexicano", value: "MXN" },
+        { label: "USD - Dólar Americano", value: "USD" }
+      ]
+    },
+    {
+      name: "amount", label: "Cantidad", type: "number", column: 6,
+      currencyFormat: true
+    }
+  ];
+
+  const converted = values.currency === "MXN"
+    ? { mxn: values.amount, usd: values.amount / TC }
+    : { mxn: values.amount * TC, usd: values.amount };
+
+  return (
+    <>
+      <ITFormBuilder config={config} values={values} setFieldValue={...} />
+      <div className="grid grid-cols-2 gap-4">
+        <div>MXN: {converted.mxn}</div>
+        <div>USD: {converted.usd}</div>
+      </div>
+    </>
+  );
+};`}
+      >
+        <CurrencyConverterExample />
+      </CodeExampleBlock>
+    </div>
+  );
+};
+
+// ── Fill from API example ──
+const FormFillFromApi = () => {
+  const [loading, setLoading] = useState(true);
+  const [values, setValues] = useState({ name: "", email: "", role: "" });
+  const [submitted, setSubmitted] = useState<any>(null);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setValues({ name: "Juan Pérez", email: "juan@ejemplo.com", role: "admin" });
+      setLoading(false);
+    }, 1500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleChange = (e: any) => {
+    const { name, value } = e.target;
+    setValues(prev => ({ ...prev, [name]: value }));
+  };
+
+  const config: any = [
+    { name: "name", label: "Nombre", type: "text", required: true, column: 6 },
+    { name: "email", label: "Correo", type: "email", required: true, column: 6 },
+    {
+      name: "role", label: "Rol", type: "select", column: 12,
+      options: [
+        { label: "Admin", value: "admin" },
+        { label: "Editor", value: "editor" },
+        { label: "Usuario", value: "user" }
+      ]
+    }
+  ];
+
+  if (loading) {
+    return (
+      <div className="flex items-center gap-3 py-8 justify-center">
+        <FaSync className="animate-spin text-primary-500" />
+        <span className="text-sm text-slate-500">Cargando datos del usuario...</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full max-w-md space-y-4">
+      <form onSubmit={(e) => { e.preventDefault(); setSubmitted(values); }} className="space-y-4">
+        <ITFormBuilder
+          config={config}
+          values={values}
+          handleChange={handleChange}
+          handleBlur={() => {}}
+          touched={{}}
+          errors={{}}
+          setFieldValue={(field, val) => { setValues(prev => ({ ...prev, [field]: val })); return Promise.resolve(); }}
+        />
+        <div className="flex justify-end">
+          <ITButton variant="filled" color="primary" size="small" type="submit">Guardar Cambios</ITButton>
         </div>
-      }
-      controls={
-        <div className="p-2 bg-slate-50 dark:bg-slate-900 rounded-lg text-xs">
-          <p className="text-slate-500">El formulario se genera dinámicamente inyectando un array de campos configurados.</p>
+      </form>
+      {submitted && (
+        <div className="p-3 bg-slate-950 text-emerald-400 text-xs rounded-lg font-mono border border-slate-800">
+          <p className="font-bold mb-1">✓ Editado:</p>
+          <pre>{JSON.stringify(submitted, null, 2)}</pre>
         </div>
+      )}
+    </div>
+  );
+};
+
+// ── Cascading Selects Example ──
+const CascadingSelectsExample = () => {
+  const [values, setValues] = useState({ country: "", city: "" });
+  const [submitted, setSubmitted] = useState<any>(null);
+
+  const handleChange = (e: any) => {
+    const { name, value } = e.target;
+    setValues(prev => ({ ...prev, [name]: value }));
+  };
+
+  const config: any = [
+    {
+      name: "country", label: "País", type: "select", required: true, column: 6,
+      options: [
+        { label: "México", value: "MX" },
+        { label: "España", value: "ES" },
+        { label: "Colombia", value: "CO" }
+      ],
+      onChangeAction: (val: any, { setFieldValue }: any) => {
+        setFieldValue("city", "");
       }
-    />
+    },
+    {
+      name: "city", label: "Ciudad", type: "select", required: true, column: 6,
+      options: async () => {
+        const cities: Record<string, { value: string; label: string }[]> = {
+          MX: [
+            { value: "CDMX", label: "Ciudad de México" },
+            { value: "GDL", label: "Guadalajara" },
+            { value: "MTY", label: "Monterrey" }
+          ],
+          ES: [
+            { value: "MAD", label: "Madrid" },
+            { value: "BCN", label: "Barcelona" },
+            { value: "SEV", label: "Sevilla" }
+          ],
+          CO: [
+            { value: "BOG", label: "Bogotá" },
+            { value: "MED", label: "Medellín" },
+            { value: "CAL", label: "Cali" }
+          ]
+        };
+        await new Promise(r => setTimeout(r, 800));
+        return cities[values.country] || [];
+      }
+    }
+  ];
+
+  return (
+    <div className="w-full max-w-md space-y-4">
+      <form onSubmit={(e) => { e.preventDefault(); setSubmitted(values); }} className="space-y-4">
+        <ITFormBuilder
+          config={config}
+          values={values}
+          handleChange={handleChange}
+          handleBlur={() => {}}
+          touched={{}}
+          errors={{}}
+          setFieldValue={(field, val) => { setValues(prev => ({ ...prev, [field]: val })); return Promise.resolve(); }}
+        />
+        <div className="flex justify-end">
+          <ITButton variant="filled" color="primary" size="small" type="submit">Enviar</ITButton>
+        </div>
+      </form>
+      {submitted && (
+        <div className="p-3 bg-slate-950 text-emerald-400 text-xs rounded-lg font-mono border border-slate-800">
+          <p className="font-bold mb-1">✓ Datos:</p>
+          <pre>{JSON.stringify(submitted, null, 2)}</pre>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ── Currency Converter Example ──
+const CurrencyConverterExample = () => {
+  const [values, setValues] = useState({ currency: "MXN", amount: 1000 });
+  const TC = 20.50;
+
+  const config: any = [
+    {
+      name: "currency", label: "Moneda", type: "select", required: true, column: 6,
+      options: [
+        { label: "MXN - Peso Mexicano", value: "MXN" },
+        { label: "USD - Dólar Americano", value: "USD" }
+      ]
+    },
+    {
+      name: "amount", label: "Cantidad", type: "number", required: true, column: 6,
+      currencyFormat: true
+    }
+  ];
+
+  const converted = values.currency === "MXN"
+    ? { mxn: values.amount, usd: values.amount / TC }
+    : { mxn: values.amount * TC, usd: values.amount };
+
+  return (
+    <div className="w-full max-w-md space-y-4">
+      <ITFormBuilder
+        config={config}
+        values={values}
+        handleChange={() => {}}
+        handleBlur={() => {}}
+        touched={{}}
+        errors={{}}
+        setFieldValue={(field, val) => { setValues(prev => ({ ...prev, [field]: val })); return Promise.resolve(); }}
+      />
+      <div className="grid grid-cols-2 gap-4 pt-2">
+        <div className="p-4 rounded-xl bg-emerald-50 dark:bg-emerald-950/30 border border-emerald-200 dark:border-emerald-800/50">
+          <p className="text-[10px] font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400">MXN</p>
+          <p className="text-xl font-bold text-emerald-900 dark:text-emerald-200 font-mono">
+            {converted.mxn.toLocaleString("es-MX", { style: "currency", currency: "MXN" })}
+          </p>
+        </div>
+        <div className="p-4 rounded-xl bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800/50">
+          <p className="text-[10px] font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400">USD</p>
+          <p className="text-xl font-bold text-blue-900 dark:text-blue-200 font-mono">
+            {converted.usd.toLocaleString("en-US", { style: "currency", currency: "USD" })}
+          </p>
+        </div>
+      </div>
+      {values.amount > 0 && (
+        <p className="text-[11px] text-slate-400 text-center">
+          TC: 1 USD = {TC.toFixed(2)} MXN
+        </p>
+      )}
+    </div>
   );
 };

package/src/showcases/GettingStartedShowcase.tsx

@@ -0,0 +1,207 @@
+import { FaNpm, FaReact, FaCheck } from "react-icons/fa";
+import { SiTailwindcss, SiTypescript, SiVite } from "react-icons/si";
+import { useState } from "react";
+import ITBadget from "../components/badget/badget";
+import ITButton from "../components/button/button";
+import ITCard from "../components/card/card";
+import ITDivider from "../components/divider/divider";
+import ITFlex from "../components/flex/flex";
+import ITGrid from "../components/grid/grid";
+import ITStack from "../components/stack/stack";
+import ITText from "../components/text/text";
+
+const CopyButton = ({ text }: { text: string }) => {
+  const [copied, setCopied] = useState(false);
+  return (
+    <ITButton
+      variant="text"
+      color="gray"
+      size="small"
+      onClick={() => { navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 2000); }}
+    >
+      <ITFlex align="center" gap={1.5}>
+        {copied ? <FaCheck size={10} className="text-emerald-400" /> : <FaNpm size={10} />}
+        {copied ? "Copiado" : "Copiar"}
+      </ITFlex>
+    </ITButton>
+  );
+};
+
+const CodeBlock = ({ code, filename, color }: { code: string; filename?: string; color?: string }) => (
+  <div className="overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900">
+    {filename && (
+      <div className={`px-4 py-2 border-b border-slate-200 dark:border-slate-700 ${color || "bg-slate-50 dark:bg-slate-800/80"}`}>
+        <ITText as="span" className="!text-xs !font-mono !text-slate-400">{filename}</ITText>
+      </div>
+    )}
+    <div className="relative bg-slate-950">
+      <pre className="p-4 text-xs font-mono overflow-x-auto leading-relaxed text-slate-200">
+        <code>{code}</code>
+      </pre>
+    </div>
+  </div>
+);
+
+const codeFileColors = [
+  "bg-emerald-50 dark:bg-emerald-950/30",
+  "bg-blue-50 dark:bg-blue-950/30",
+  "bg-cyan-50 dark:bg-cyan-950/30",
+  "bg-violet-50 dark:bg-violet-950/30",
+  "bg-amber-50 dark:bg-amber-950/30",
+  "bg-rose-50 dark:bg-rose-950/30",
+];
+
+const stepStyles = [
+  { iconBg: "bg-emerald-100 dark:bg-emerald-950/40 text-emerald-600 dark:text-emerald-400" },
+  { iconBg: "bg-blue-100 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400" },
+  { iconBg: "bg-cyan-100 dark:bg-cyan-950/40 text-cyan-600 dark:text-cyan-400" },
+  { iconBg: "bg-violet-100 dark:bg-violet-950/40 text-violet-600 dark:text-violet-400" },
+  { iconBg: "bg-amber-100 dark:bg-amber-950/40 text-amber-600 dark:text-amber-400" },
+  { iconBg: "bg-rose-100 dark:bg-rose-950/40 text-rose-600 dark:text-rose-400" },
+];
+
+const steps = [
+  {
+    icon: <FaNpm size={14} />,
+    title: "Instalar dependencias",
+    desc: "Tailwind v4 y su plugin para Vite.",
+    filename: "terminal",
+    code: "npm install @axzydev/axzy_ui_system\nnpm install -D tailwindcss @tailwindcss/vite @vitejs/plugin-react-swc",
+  },
+  {
+    icon: <SiVite size={14} />,
+    title: "Configurar Vite",
+    desc: "Agrega Tailwind como plugin de Vite.",
+    filename: "vite.config.ts",
+    code: `import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react-swc"
+import tailwindcss from "@tailwindcss/vite"
+
+export default defineConfig({
+  plugins: [tailwindcss(), react()],
+})`,
+  },
+  {
+    icon: <SiTailwindcss size={14} />,
+    title: "Agregar Tailwind",
+    desc: "Importa Tailwind en tu archivo CSS.",
+    filename: "src/index.css",
+    code: `@import "tailwindcss";
+@variant dark (&:is(.dark &));`,
+  },
+  {
+    icon: <FaReact size={14} />,
+    title: "Importar estilos",
+    desc: "Envuelve tu app con el provider.",
+    filename: "src/main.tsx",
+    code: `import { ITThemeProvider } from "@axzydev/axzy_ui_system"
+import "@axzydev/axzy_ui_system/dist/index.css"
+
+<ITThemeProvider>
+  <App />
+</ITThemeProvider>`,
+  },
+  {
+    icon: <SiTypescript size={14} />,
+    title: "Declaración de tipos",
+    desc: "Para que TS acepte imports CSS.",
+    filename: "src/vite-env.d.ts",
+    code: `/// <reference types="vite/client" />
+
+declare module "*.css" {
+  const content: string
+  export default content
+}`,
+  },
+  {
+    icon: <FaReact size={14} />,
+    title: "Primer componente",
+    desc: "Ya puedes usar cualquier componente.",
+    filename: "src/App.tsx",
+    code: `import { ITButton } from "@axzydev/axzy_ui_system"
+
+export default function App() {
+  return <ITButton variant="rounded">Empezar</ITButton>
+}`,
+  },
+];
+
+export const GettingStartedShowcase = () => {
+  return (
+    <ITStack spacing={10}>
+      {/* ─── HERO ─── */}
+      <ITCard className="overflow-hidden border-0 bg-gradient-to-br from-primary-50 via-white to-purple-50 dark:from-primary-950/20 dark:via-slate-900 dark:to-purple-950/20 shadow-sm">
+        <div className="relative">
+          <div className="absolute -top-40 -right-40 w-[500px] h-[500px] bg-primary-500/10 rounded-full blur-[120px] pointer-events-none" />
+          <div className="absolute -bottom-40 -left-40 w-[500px] h-[500px] bg-purple-500/10 rounded-full blur-[120px] pointer-events-none" />
+
+          <ITStack spacing={5} className="relative z-10">
+            <ITStack spacing={2}>
+              <ITBadget label="v1.0.0" color="primary" variant="outlined" className="w-fit" />
+              <ITText as="h1" className="!text-4xl !font-bold !tracking-tight">
+                AXZY UI System
+              </ITText>
+              <ITText as="p" muted className="!text-base !leading-relaxed max-w-xl">
+                Librería de componentes React con Tailwind CSS v4. Diseñada para apps enterprise con experiencia de desarrollo fluida.
+              </ITText>
+            </ITStack>
+
+            <ITFlex gap={3} wrap="wrap" align="center">
+              <div className="px-4 py-2 rounded-xl bg-gradient-to-r from-primary-50 to-purple-50 dark:from-primary-950/30 dark:to-purple-950/30 border border-primary-200 dark:border-primary-800/50 shadow-sm">
+                <ITFlex align="center" gap={2}>
+                  <FaNpm size={16} className="text-primary-500" />
+                  <code className="text-sm font-mono text-slate-800 dark:text-slate-200">npm install @axzydev/axzy_ui_system</code>
+                  <CopyButton text="npm install @axzydev/axzy_ui_system" />
+                </ITFlex>
+              </div>
+            </ITFlex>
+          </ITStack>
+        </div>
+      </ITCard>
+
+      {/* ─── SETUP STEPS ─── */}
+      <ITGrid container spacing={6}>
+        {steps.map((step, i) => (
+          <ITGrid item xs={12} md={6} key={i}>
+            <ITCard className="border-slate-200/60 dark:border-slate-800/60 shadow-sm h-full">
+              <ITStack spacing={4}>
+                <ITFlex align="center" gap={2.5}>
+                  <div className={`w-8 h-8 rounded-lg ${stepStyles[i].iconBg} flex items-center justify-center`}>
+                    {step.icon}
+                  </div>
+                  <div>
+                    <ITText as="p" className="!text-sm !font-semibold">{step.title}</ITText>
+                    <ITText as="p" className="!text-xs !text-slate-400">{step.desc}</ITText>
+                  </div>
+                </ITFlex>
+                <CodeBlock code={step.code} filename={step.filename} color={codeFileColors[i]} />
+              </ITStack>
+            </ITCard>
+          </ITGrid>
+        ))}
+      </ITGrid>
+
+      {/* ─── THEMING ─── */}
+      <ITCard title="Theming" className="border-purple-200/60 dark:border-purple-800/60 shadow-sm">
+        <ITStack spacing={4}>
+          <ITText as="p" className="!text-sm" muted>
+            Personaliza colores en runtime. Solo necesitas los que quieras cambiar.
+          </ITText>
+          <div className="bg-gradient-to-r from-purple-50 via-fuchsia-50 to-pink-50 dark:from-purple-950/20 dark:via-fuchsia-950/20 dark:to-pink-950/20 rounded-xl p-5 border border-purple-200 dark:border-purple-800/30">
+            <CodeBlock
+              code={`const myTheme = {
+  colors: {
+    primary: { 50: "#fef2f2", 500: "#ef4444" },
+  },
+}
+
+<ITThemeProvider theme={myTheme}>
+  <App />
+</ITThemeProvider>`}
+            />
+          </div>
+        </ITStack>
+      </ITCard>
+    </ITStack>
+  );
+};