@axzydev/axzy_ui_system 1.4.7 → 1.5.0

package/src/showcases/DataShowcases.tsx

@@ -14,6 +14,7 @@ import {
   ITDataTableResponse
 } from "../index";
 import { ShowcaseLayout } from "./ShowcaseLayout";
+import { useITTranslation } from "@/i18n";
 
 const TABLE_DATA: Record<string, unknown>[] = [
   { id: 1, name: "Sofía Castillo", email: "sofia@axzy.dev", role: "Admin", status: "active", lastLogin: "2026-07-18T09:30:00", sales: 28400 },
@@ -148,6 +149,7 @@ const roleColor = (r: string) =>
 
 // 1. ITTable Showcase
 export const TableShowcase = () => {
+  const { t } = useITTranslation();
   const [variant, setVariant] = useState<any>("default");
   const [size, setSize] = useState<any>("sm");
   const [useCustomCard, setUseCustomCard] = useState(true);
@@ -231,10 +233,10 @@ export const TableShowcase = () => {
       type: "actions",
       actions: () => (
         <div className="flex gap-1">
-          <button className="p-1.5 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-400 hover:text-primary-600 transition-colors" title="View">
+          <button className="p-1.5 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-400 hover:text-primary-600 transition-colors" title={t("showcase.common.view")}>
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
           </button>
-          <button className="p-1.5 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-400 hover:text-blue-600 transition-colors" title="Edit">
+          <button className="p-1.5 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-400 hover:text-blue-600 transition-colors" title={t("showcase.common.edit")}>
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
           </button>
         </div>
@@ -289,20 +291,20 @@ export const TableShowcase = () => {
   return (
     <ShowcaseLayout
       title="ITTable"
-      description="Tabla con vista responsive Table / Cards, paginación, filtros y template de card personalizable."
+      description={t("showcase.data.tableDesc")}
       code={code}
       demo={
         <div className="w-full space-y-2">
           <div className="text-xs font-medium text-slate-500 dark:text-slate-400 px-1">
             {selectedRow
-              ? `Selected: ${selectedRow.name as string}`
-              : "Click a row/card or press Enter/Space to select"}
+              ? t("showcase.data.selectedName", { name: selectedRow.name as string })
+              : t("showcase.data.clickToSelect")}
           </div>
           <div className="w-full bg-white dark:bg-slate-900 rounded-xl overflow-hidden shadow-sm">
             <ITTable
               columns={columns}
               data={TABLE_DATA}
-              title="Team members"
+              title={t("showcase.data.teamMembers")}
               variant={variant}
               size={size}
               defaultItemsPerPage={5}
@@ -316,7 +318,7 @@ export const TableShowcase = () => {
         <>
           <ITSelect
             name="var_ctrl"
-            label="Table variant"
+            label={t("showcase.data.tableVariant")}
             value={variant}
             onChange={(e: any) => setVariant(e.target.value)}
             options={[
@@ -327,7 +329,7 @@ export const TableShowcase = () => {
           />
           <ITSelect
             name="sz_ctrl"
-            label="Row size"
+            label={t("showcase.data.rowSize")}
             value={size}
             onChange={(e: any) => setSize(e.target.value)}
             options={[
@@ -337,12 +339,14 @@ export const TableShowcase = () => {
             ]}
           />
           <div className="flex items-center justify-between pt-2">
-            <span className="text-sm font-semibold text-gray-700 dark:text-slate-300">Custom card template</span>
-            <ITSlideToggle isOn={useCustomCard} onToggle={setUseCustomCard} size="sm" />
+            <span className="text-sm font-semibold text-gray-700 dark:text-slate-300">{t("showcase.data.customCardTemplate")}</span>
+            <ITSlideToggle isOn={useCustomCard} onToggle={setUseCustomCard} size="sm"
+              ariaLabel={t("showcase.data.customCardTemplate")}
+            />
           </div>
           {!useCustomCard && (
             <div className="p-2 bg-slate-100 dark:bg-slate-800 rounded text-xs text-slate-500">
-              Default card active — shows all columns as label-value pairs
+              {t("showcase.data.defaultCardActive")}
             </div>
           )}
         </>
@@ -358,6 +362,9 @@ export const TableShowcase = () => {
           '// ITSearchSelect typeahead (server-side search opcional vía catalogOptions.onSearch)\n{ key: "role", label: "Role", type: "string", filter: "search", catalogOptions: { data: roles } }',
           '// ITDatePicker fecha única\n{ key: "lastLogin", label: "Last login", type: "date", filter: "date", dateFilterOptions: { maxDate: new Date() } }',
           '// ITDatePicker rango\n{ key: "hiredAt", label: "Hired", type: "date", filter: "date-range", dateFilterOptions: { maxDate: new Date() } }',
+          '// Diseño por instancia: colors pisa el tema; design estiliza cada región\n<ITTable columns={cols} data={rows} showViewToggle={false}\n  colors={{ headerBg: "#0f172a", headerText: "#e2e8f0", rowHover: "#e0f2fe" }}\n  design={{ card: { className: "rounded-2xl border-2 border-primary-200" }, headerCell: { className: "py-4" }, cell: { className: "font-semibold" } }} />',
+          '// Atajos planos equivalentes (ganan sobre design)*\n<ITTable columns={cols} data={rows} cardClassName="rounded-2xl" headerCellStyle={{ letterSpacing: "0.1em" }} rowClassName="border-b border-slate-100" cellClassName="font-semibold" />',
+          '// Diseño por columna\n{ key: "sales", label: "Sales", type: "number", headerClassName: "text-right", cellClassName: "text-right", cellStyle: { fontVariantNumeric: "tabular-nums" } }',
         ],
         props: [
           { name: "columns", type: "Column<T>[]", description: "Definiciones de columna: key, label, type, sortable, filter, render, actions." },
@@ -382,11 +389,24 @@ export const TableShowcase = () => {
           { name: "rowHeight", type: "number", default: "getRowHeight(size, density)", description: "Alto de fila asumido (px). Size-aware: baseline size=\"md\" = 33/45/53 según densidad; size lo desplaza por el line box (sm 16 / md 20 / lg 28 px)." },
           { name: "overscan", type: "number", default: "5", description: "Filas extra renderizadas arriba/abajo del viewport." },
           { name: "stickyHeader", type: "boolean", default: "false", description: "Header sticky mientras scrollea el cuerpo virtualizado." },
+          { name: "showViewToggle", type: "boolean", default: "true", description: "Muestra/oculta el switch Table|Cards. Ocultarlo no desactiva defaultView ni autoCardBreakpoint." },
+          { name: "colors", type: "TableColors", description: "Colores por instancia (headerBg, headerText, rowBg, rowText, rowHover); pisan el tema global solo en esta tabla." },
+          { name: "design", type: "TableDesign", description: "Estilo por región: container, card, toolbar, header, headerCell, row, cell, cards, footer. Cada uno con className y style." },
+          { name: "cardClassName / cardStyle", type: "string / CSSProperties", description: "Superficie tipo card (borde, radio, sombra, fondo)." },
+          { name: "toolbarClassName / toolbarStyle", type: "string / CSSProperties", description: "Barra con el título y el switch Table/Cards." },
+          { name: "headerClassName / headerStyle", type: "string / CSSProperties", description: "Fila de títulos (<thead> <tr>)." },
+          { name: "headerCellClassName / headerCellStyle", type: "string / CSSProperties", description: "Cada celda de encabezado (<th>)." },
+          { name: "rowClassName / rowStyle", type: "string / CSSProperties", description: "Cada fila del cuerpo (<tr>)." },
+          { name: "cellClassName / cellStyle", type: "string / CSSProperties", description: "Cada celda del cuerpo (<td>)." },
+          { name: "cardsClassName / cardsStyle", type: "string / CSSProperties", description: "Contenedor de la vista de cards." },
+          { name: "footerClassName / footerStyle", type: "string / CSSProperties", description: "Franja de paginación." },
+          { name: "containerStyle", type: "CSSProperties", description: "Estilos inline del contenedor externo." },
         ],
         notes: [
           "onRowClick funciona en ambas vistas (tabla y cards).",
           "Cuando se omite no se agrega cursor-pointer, foco, tabIndex ni role.",
-          "Column acepta width (number=px | string CSS), minWidth (px), align (left/center/right) y truncate (ellipsis + title nativo).",
+          "Column acepta width (number=px | string CSS), minWidth (px), align (left/center/right) y truncate (ellipsis + title nativo). Diseño por columna: headerClassName, headerStyle, cellClassName y cellStyle (className aplica a th y td).",
+          "Diseño por instancia: design (o los atajos planos <slot>ClassName/<slot>Style) estiliza container, card, toolbar, header, headerCell, row, cell, cards y footer; el atajo plano gana sobre design. colors instala --color-table-* locales y pisa el tema global. showViewToggle controla el switch Table|Cards y autoCardBreakpoint (px) fuerza la vista cards bajo ese ancho.",
           "Columna fija: Column acepta pinned: \"left\" | \"right\" (opt-in; omitir = sin cambios). Los offsets sticky acumulan el width en px de cada columna pinneada previa del mismo lado; una columna sin width en px aporta 0px, así que declara width en px en todas las columnas pinneadas de un lado. La celda pinneada pinta fondo opaco (rowBg + rowHover) y un separador de 1px en el borde congelado. Una columna pinneada por lado es el contrato probado. Limitación: con variant=\"striped\" el fondo opaco tapa el tinte de la franja de esa columna.",
           "Anti scroll horizontal: layout=\"fixed\" + width por columna + truncate + density.",
           "Virtualización: solo vista tabla; rinde con page size grande; filas de alto uniforme; el scroll no se reinicia al cambiar filtros.",
@@ -398,7 +418,7 @@ export const TableShowcase = () => {
       gallery={
         <div className="space-y-6">
           <div>
-            <h4 className="text-sm font-bold text-slate-700 dark:text-slate-200 mb-3">Custom cards with hover</h4>
+            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryCustomCardsHover")}</h3>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               {TABLE_DATA.slice(0, 4).map((row, i) => {
                 const initials = (row.name as string).split(" ").map((w: string) => w[0]).join("");
@@ -435,8 +455,8 @@ export const TableShowcase = () => {
           </div>
 
           <div>
-            <h4 className="text-sm font-bold text-slate-700 dark:text-slate-200 mb-3">ITTable with default cards</h4>
-            <div className="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
+            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryDefaultCards")}</h3>
+            <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <ITTable
                 columns={columns}
                 data={TABLE_DATA.slice(0, 6)}
@@ -449,13 +469,13 @@ export const TableShowcase = () => {
           </div>
 
           <div>
-            <h4 className="text-sm font-bold text-slate-700 dark:text-slate-200 mb-3">ITTable with custom cards + pagination</h4>
-            <div className="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
+            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryCustomCardsPagination")}</h3>
+            <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <ITTable
                 columns={columns}
                 data={TABLE_DATA}
                 size="sm"
-                title="All members"
+                title={t("showcase.data.galleryAllMembers")}
                 defaultItemsPerPage={4}
                 renderCard={(row: any) => {
                   const initials = (row.name as string).split(" ").map((w: string) => w[0]).join("");
@@ -481,12 +501,12 @@ export const TableShowcase = () => {
           </div>
 
           <div>
-            <h4 className="text-sm font-bold text-slate-700 dark:text-slate-200 mb-3">Compact fixed layout — no horizontal scroll</h4>
-            <div className="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden" style={{ maxWidth: 560 }}>
+            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryCompactFixed")}</h3>
+            <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800" style={{ maxWidth: 560 }}>
               <ITTable
                 columns={fixedColumns}
                 data={TABLE_DATA}
-                title="Fixed layout"
+                title={t("showcase.data.galleryFixedLayout")}
                 layout="fixed"
                 density="compact"
                 defaultItemsPerPage={5}
@@ -495,12 +515,12 @@ export const TableShowcase = () => {
           </div>
 
           <div>
-            <h4 className="text-sm font-bold text-slate-700 dark:text-slate-200 mb-3">Pinned columns — left (Name) &amp; right (Actions)</h4>
-            <div className="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden" style={{ maxWidth: 520 }}>
+            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryPinnedNameActions")}</h3>
+            <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800" style={{ maxWidth: 520 }}>
               <ITTable
                 columns={pinnedColumns}
                 data={TABLE_DATA}
-                title="Pinned columns"
+                title={t("showcase.data.galleryPinnedColumns")}
                 layout="fixed"
                 density="compact"
                 defaultItemsPerPage={5}
@@ -512,12 +532,12 @@ export const TableShowcase = () => {
           </div>
 
           <div>
-            <h4 className="text-sm font-bold text-slate-700 dark:text-slate-200 mb-3">Auto cards fallback (&lt; 640px container)</h4>
-            <div className="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden" style={{ maxWidth: 420 }}>
+            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryAutoCards")}</h3>
+            <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800" style={{ maxWidth: 420 }}>
               <ITTable
                 columns={columns}
                 data={TABLE_DATA.slice(0, 6)}
-                title="Narrow container"
+                title={t("showcase.data.galleryNarrowContainer")}
                 autoCardBreakpoint={640}
                 defaultItemsPerPage={6}
               />
@@ -525,12 +545,12 @@ export const TableShowcase = () => {
           </div>
 
           <div>
-            <h4 className="text-sm font-bold text-slate-700 dark:text-slate-200 mb-3">Virtualized table — 300 rows (only visible window mounted)</h4>
-            <div className="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
+            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryVirtualized")}</h3>
+            <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <ITTable
                 columns={virtualColumns}
                 data={virtualData}
-                title="Virtualized · 300 rows"
+                title={t("showcase.data.galleryVirtualizedTitle")}
                 virtualized
                 stickyHeader
                 layout="fixed"
@@ -543,12 +563,12 @@ export const TableShowcase = () => {
           </div>
 
           <div>
-            <h4 className="text-sm font-bold text-slate-700 dark:text-slate-200 mb-3">Column filters: ITSearchSelect + ITDatePicker (single &amp; range)</h4>
-            <div className="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
+            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryColumnFilters")}</h3>
+            <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <ITTable
                 columns={filterDemoColumns}
                 data={filterDemoData}
-                title="Filter demo"
+                title={t("showcase.data.galleryFilterDemo")}
                 size="sm"
                 defaultItemsPerPage={8}
               />
@@ -557,6 +577,58 @@ export const TableShowcase = () => {
               Role uses <code>filter: "search"</code> (ITSearchSelect). Last login uses <code>filter: "date"</code> and Hired uses <code>filter: "date-range"</code> (ITDatePicker), with <code>dateFilterOptions</code> bounds.
             </p>
           </div>
+
+          <div>
+            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryDesignOverrides")}</h3>
+            <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
+              <ITTable
+                columns={columns}
+                data={TABLE_DATA.slice(0, 5)}
+                title={t("showcase.data.galleryCustomDesign")}
+                defaultItemsPerPage={5}
+                showViewToggle={false}
+                colors={{
+                  headerBg: "#0f172a",
+                  headerText: "#e2e8f0",
+                  rowBg: "#ffffff",
+                  rowText: "#0f172a",
+                  rowHover: "#e0f2fe",
+                }}
+                design={{
+                  card: { className: "rounded-2xl border-2 border-primary-200 shadow-lg" },
+                  header: { className: "tracking-widest" },
+                  headerCell: { className: "py-4" },
+                  row: { className: "border-b border-slate-100" },
+                  cell: { className: "font-semibold" },
+                }}
+              />
+            </div>
+            <p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
+              <code>colors</code> pisa el tema global solo para esta instancia; <code>design</code> (o los atajos <code>cardClassName</code>, <code>headerCellStyle</code>, <code>rowClassName</code>, <code>cellStyle</code>…) estiliza cada región. <code>showViewToggle=&#123;false&#125;</code> oculta el switch Table/Cards.
+            </p>
+          </div>
+
+          <div>
+            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryPerColumnDesign")}</h3>
+            <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
+              <ITTable
+                columns={columns.map((col: any) =>
+                  col.key === "sales"
+                    ? { ...col, headerClassName: "text-right", cellClassName: "text-right", cellStyle: { fontVariantNumeric: "tabular-nums" } }
+                    : col.key === "name"
+                      ? { ...col, headerStyle: { letterSpacing: "0.1em" } }
+                      : col
+                )}
+                data={TABLE_DATA.slice(0, 5)}
+                title={t("showcase.data.galleryPerColumnTitle")}
+                defaultItemsPerPage={5}
+                showViewToggle={false}
+              />
+            </div>
+            <p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
+              Cada <code>Column</code> acepta <code>headerClassName</code>, <code>headerStyle</code>, <code>cellClassName</code> y <code>cellStyle</code>, aplicados solo a esa columna.
+            </p>
+          </div>
         </div>
       }
     />
@@ -565,6 +637,7 @@ export const TableShowcase = () => {
 
 // 2. ITDataTable Showcase
 export const DataTableShowcase = () => {
+  const { t } = useITTranslation();
   const [useCustomCard, setUseCustomCard] = useState(true);
   const [apiState, setApiState] = useState<"normal" | "loading" | "empty" | "error">("normal");
   const [reloadKey, setReloadKey] = useState(0);
@@ -747,21 +820,21 @@ export const DataTableShowcase = () => {
   return (
     <ShowcaseLayout
       title="ITDataTable"
-      description="Tabla auto-suficiente con carga dinámica, filtros, paginación y vista responsive Cards/Table."
+      description={t("showcase.data.dataTableDesc")}
       code={code}
       demo={
         <div className="w-full space-y-2">
           <div className="text-xs font-medium text-slate-500 dark:text-slate-400 px-1">
             {selectedRow
-              ? `Selected: ${selectedRow.name as string} (id ${selectedRow.id as number})`
-              : "Click a row/card or press Enter/Space to select"}
+              ? t("showcase.data.selectedNameId", { name: selectedRow.name as string, id: selectedRow.id as number })
+              : t("showcase.data.clickToSelect")}
           </div>
           <div className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl overflow-hidden shadow-md">
             <ITDataTable
               key={reloadKey}
               columns={userColumns}
               fetchData={fetchData}
-              title={apiState === "error" ? "Connection error" : apiState === "empty" ? "No data" : "Users"}
+              title={apiState === "error" ? t("showcase.data.titleConnectionError") : apiState === "empty" ? t("showcase.data.titleNoData") : t("showcase.data.titleUsers")}
               defaultItemsPerPage={4}
               size={dtSize}
               layout={dtLayout}
@@ -781,7 +854,7 @@ export const DataTableShowcase = () => {
                     </div>
                     <span className={`px-2 py-0.5 text-[9px] font-bold uppercase tracking-wider rounded-md ${
                       row.active ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300" : "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400"
-                    }`}>{row.active ? "Active" : "Inactive"}</span>
+                    }`}>{row.active ? t("showcase.common.active") : t("showcase.data.inactive")}</span>
                   </div>
                   <div className="flex items-center justify-between">
                     <span className={`px-1.5 py-0.5 text-[10px] font-bold rounded ${
@@ -801,7 +874,7 @@ export const DataTableShowcase = () => {
       controls={
         <div className="space-y-3">
           <div>
-            <p className="text-xs font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2">API state</p>
+            <p className="text-xs font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2">{t("showcase.data.apiState")}</p>
             <div className="flex flex-wrap gap-2">
               {(["normal", "loading", "empty", "error"] as const).map((s) => (
                 <button
@@ -813,22 +886,24 @@ export const DataTableShowcase = () => {
                       : "bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700"
                   }`}
                 >
-                  {s === "normal" ? "✅ Normal" : s === "loading" ? "⏳ Loading" : s === "empty" ? "📭 Empty" : "💥 Error"}
+                  {s === "normal" ? `✅ ${t("showcase.data.stateNormal")}` : s === "loading" ? `⏳ ${t("showcase.data.stateLoading")}` : s === "empty" ? `📭 ${t("showcase.data.stateEmpty")}` : `💥 ${t("showcase.data.stateError")}`}
                 </button>
               ))}
             </div>
           </div>
           <div className="flex items-center justify-between pt-1">
-            <span className="text-sm font-semibold text-gray-700 dark:text-slate-300">Custom card template</span>
-            <ITSlideToggle isOn={useCustomCard} onToggle={setUseCustomCard} size="sm" />
+            <span className="text-sm font-semibold text-gray-700 dark:text-slate-300">{t("showcase.data.customCardTemplate")}</span>
+            <ITSlideToggle isOn={useCustomCard} onToggle={setUseCustomCard} size="sm"
+              ariaLabel={t("showcase.data.customCardTemplate")}
+            />
           </div>
           {!useCustomCard && (
             <div className="p-2 bg-slate-100 dark:bg-slate-800 rounded text-xs text-slate-500">
-              Default card active — shows all columns as label-value pairs
+              {t("showcase.data.defaultCardActive")}
             </div>
           )}
           <div>
-            <p className="text-xs font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2">Borders</p>
+            <p className="text-xs font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2">{t("showcase.data.borders")}</p>
             <div className="flex flex-wrap gap-2">
               {(["default", "blue", "rose", "none"] as const).map((s) => (
                 <button
@@ -843,16 +918,16 @@ export const DataTableShowcase = () => {
                       : "bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700"
                   }`}
                 >
-                  {s === "default" ? "Gray" : s === "blue" ? "Blue" : s === "rose" ? "Rose" : "None"}
+                  {s === "default" ? t("showcase.data.borderGray") : s === "blue" ? t("showcase.data.borderBlue") : s === "rose" ? t("showcase.data.borderRose") : t("showcase.data.borderNone")}
                 </button>
               ))}
             </div>
           </div>
           <div className="space-y-3">
-            <p className="text-xs font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2">Table capabilities</p>
+            <p className="text-xs font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2">{t("showcase.data.tableCapabilities")}</p>
             <ITSelect
               name="dt_size"
-              label="Size"
+              label={t("showcase.common.size")}
               value={dtSize}
               onChange={(e: any) => setDtSize(e.target.value as "sm" | "md" | "lg")}
               options={[
@@ -863,7 +938,7 @@ export const DataTableShowcase = () => {
             />
             <ITSelect
               name="dt_density"
-              label="Density"
+              label={t("showcase.data.density")}
               value={dtDensity}
               onChange={(e: any) => setDtDensity(e.target.value as "compact" | "normal" | "comfortable")}
               options={[
@@ -874,7 +949,7 @@ export const DataTableShowcase = () => {
             />
             <ITSelect
               name="dt_layout"
-              label="Layout"
+              label={t("showcase.data.layout")}
               value={dtLayout}
               onChange={(e: any) => setDtLayout(e.target.value as "auto" | "fixed")}
               options={[
@@ -884,7 +959,7 @@ export const DataTableShowcase = () => {
             />
             <ITSelect
               name="dt_autocards"
-              label="Auto cards below (px)"
+              label={t("showcase.data.autoCardsBelow")}
               value={String(dtAutoCardBreakpoint)}
               onChange={(e: any) => setDtAutoCardBreakpoint(Number(e.target.value))}
               options={[
@@ -895,16 +970,20 @@ export const DataTableShowcase = () => {
               ]}
             />
             <div className="flex items-center justify-between pt-2">
-              <span className="text-sm font-semibold text-gray-700 dark:text-slate-300">Virtualized (gallery)</span>
-              <ITSlideToggle isOn={dtVirtualized} onToggle={setDtVirtualized} size="sm" />
+              <span className="text-sm font-semibold text-gray-700 dark:text-slate-300">{t("showcase.data.virtualizedGallery")}</span>
+              <ITSlideToggle isOn={dtVirtualized} onToggle={setDtVirtualized} size="sm"
+              ariaLabel={t("showcase.data.virtualizedGallery")}
+            />
             </div>
             <div className="flex items-center justify-between">
-              <span className="text-sm font-semibold text-gray-700 dark:text-slate-300">Sticky header</span>
-              <ITSlideToggle isOn={dtStickyHeader} onToggle={setDtStickyHeader} size="sm" disabled={!dtVirtualized} />
+              <span className="text-sm font-semibold text-gray-700 dark:text-slate-300">{t("showcase.data.stickyHeader")}</span>
+              <ITSlideToggle isOn={dtStickyHeader} onToggle={setDtStickyHeader} size="sm" disabled={!dtVirtualized}
+              ariaLabel={t("showcase.data.stickyHeader")}
+            />
             </div>
             {dtVirtualized && (
               <div className="p-2 bg-slate-100 dark:bg-slate-800 rounded text-xs text-slate-500">
-                size, density, layout y auto-cards aplican al demo principal; virtualized y sticky header solo al bloque "Server-side virtualization" de la galería. Ese bloque no recibe autoCardBreakpoint: las cards nunca se virtualizan y el fallback de auto-cards desactivaría la virtualización en silencio.
+                {t("showcase.data.capabilitiesHint")}
               </div>
             )}
           </div>
@@ -950,11 +1029,24 @@ export const DataTableShowcase = () => {
           { name: "rowHeight", type: "number", default: "getRowHeight(size, density)", description: "Alto de fila asumido (px). Size-aware: baseline size=\"md\" = 33/45/53 según densidad; size lo desplaza por el line box (sm 16 / md 20 / lg 28 px)." },
           { name: "overscan", type: "number", default: "5", description: "Filas extra renderizadas arriba/abajo del viewport." },
           { name: "stickyHeader", type: "boolean", default: "false", description: "Header sticky mientras scrollea el cuerpo virtualizado." },
+          { name: "showViewToggle", type: "boolean", default: "true", description: "Muestra/oculta el switch Table|Cards. Ocultarlo no desactiva defaultView ni autoCardBreakpoint." },
+          { name: "colors", type: "TableColors", description: "Colores por instancia (headerBg, headerText, rowBg, rowText, rowHover); pisan el tema global solo en esta tabla." },
+          { name: "design", type: "TableDesign", description: "Estilo por región: container, card, toolbar, header, headerCell, row, cell, cards, footer. Cada uno con className y style." },
+          { name: "cardClassName / cardStyle", type: "string / CSSProperties", description: "Superficie tipo card (borde, radio, sombra, fondo)." },
+          { name: "toolbarClassName / toolbarStyle", type: "string / CSSProperties", description: "Barra con el título y el switch Table/Cards." },
+          { name: "headerClassName / headerStyle", type: "string / CSSProperties", description: "Fila de títulos (<thead> <tr>)." },
+          { name: "headerCellClassName / headerCellStyle", type: "string / CSSProperties", description: "Cada celda de encabezado (<th>)." },
+          { name: "rowClassName / rowStyle", type: "string / CSSProperties", description: "Cada fila del cuerpo (<tr>)." },
+          { name: "cellClassName / cellStyle", type: "string / CSSProperties", description: "Cada celda del cuerpo (<td>)." },
+          { name: "cardsClassName / cardsStyle", type: "string / CSSProperties", description: "Contenedor de la vista de cards." },
+          { name: "footerClassName / footerStyle", type: "string / CSSProperties", description: "Franja de paginación." },
+          { name: "containerStyle", type: "CSSProperties", description: "Estilos inline del contenedor externo." },
         ],
         notes: [
           "onRowClick funciona en ambas vistas (tabla y cards).",
           "Interacciones que inician en botones, links o inputs no disparan onRowClick.",
-          "Column acepta width (number=px | string CSS), minWidth (px), align (left/center/right) y truncate (ellipsis + title nativo).",
+          "Column acepta width (number=px | string CSS), minWidth (px), align (left/center/right) y truncate (ellipsis + title nativo). Diseño por columna: headerClassName, headerStyle, cellClassName y cellStyle (className aplica a th y td).",
+          "Diseño por instancia: design (o los atajos planos <slot>ClassName/<slot>Style) estiliza container, card, toolbar, header, headerCell, row, cell, cards y footer; el atajo plano gana sobre design. colors instala --color-table-* locales y pisa el tema global. showViewToggle controla el switch Table|Cards y autoCardBreakpoint (px) fuerza la vista cards bajo ese ancho.",
           "Columna fija: Column acepta pinned: \"left\" | \"right\" (opt-in; omitir = sin cambios). Los offsets sticky acumulan el width en px de cada columna pinneada previa del mismo lado; una columna sin width en px aporta 0px, así que declara width en px en todas las columnas pinneadas de un lado. La celda pinneada pinta fondo opaco (rowBg + rowHover) y un separador de 1px en el borde congelado. Una columna pinneada por lado es el contrato probado. Limitación: con variant=\"striped\" el fondo opaco tapa el tinte de la franja de esa columna.",
           "Anti scroll horizontal: layout=\"fixed\" + width por columna + truncate + density.",
           "Virtualización: solo vista tabla; rinde con page size grande; filas de alto uniforme; el scroll no se reinicia al cambiar filtros.",
@@ -970,10 +1062,10 @@ export const DataTableShowcase = () => {
       gallery={
         <div className="space-y-6">
           <div>
-            <h4 className="text-sm font-bold text-slate-700 dark:text-slate-200 mb-3">Custom cards with hover</h4>
-            <div className="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
+            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryCustomCardsHover")}</h3>
+            <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <GalleryDataTable
-                title="Team members"
+                title={t("showcase.data.teamMembers")}
                 defaultItemsPerPage={4}
                 renderCard={(row: any) => {
                   const initials = (row.name as string).split(" ").map((w: string) => w[0]).join("");
@@ -989,7 +1081,7 @@ export const DataTableShowcase = () => {
                         </div>
                         <span className={`px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider rounded-md ${
                           row.active ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300" : "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400"
-                        }`}>{row.active ? "Active" : "Inactive"}</span>
+                        }`}>{row.active ? t("showcase.common.active") : t("showcase.data.inactive")}</span>
                       </div>
                       <div className="flex items-center gap-2 text-xs text-slate-500 mb-3">
                         <span className={`px-2 py-0.5 rounded-md font-semibold ${
@@ -1013,8 +1105,8 @@ export const DataTableShowcase = () => {
           </div>
 
           <div>
-            <h4 className="text-sm font-bold text-slate-700 dark:text-slate-200 mb-3">Default cards with pagination</h4>
-            <div className="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
+            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryDefaultCardsPagination")}</h3>
+            <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <GalleryDataTable
                 size="sm"
                 defaultItemsPerPage={3}
@@ -1024,12 +1116,36 @@ export const DataTableShowcase = () => {
           </div>
 
           <div>
-            <h4 className="text-sm font-bold text-slate-700 dark:text-slate-200 mb-3">Pinned columns — left (ID) &amp; right (Active)</h4>
-            <div className="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden" style={{ maxWidth: 520 }}>
+            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryDesignOverrides")}</h3>
+            <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
+              <ITDataTable
+                columns={userColumns}
+                fetchData={fetchData}
+                title={t("showcase.data.galleryCustomDesign")}
+                defaultItemsPerPage={4}
+                debounceMs={0}
+                showViewToggle={false}
+                colors={{ headerBg: "#0f172a", headerText: "#e2e8f0", rowHover: "#e0f2fe" }}
+                design={{
+                  card: { className: "rounded-2xl border-2 border-primary-200 shadow-lg" },
+                  headerCell: { className: "py-4" },
+                  row: { className: "border-b border-slate-100" },
+                  cell: { className: "font-semibold" },
+                }}
+              />
+            </div>
+            <p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
+              <code>colors</code> pisa el tema global solo para esta instancia; <code>design</code> (o <code>cardClassName</code>, <code>headerCellStyle</code>, <code>rowClassName</code>, <code>cellStyle</code>…) estiliza cada región. <code>showViewToggle=&#123;false&#125;</code> oculta el switch.
+            </p>
+          </div>
+
+          <div>
+            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryPinnedIdActive")}</h3>
+            <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800" style={{ maxWidth: 520 }}>
               <ITDataTable
                 columns={pinnedColumns}
                 fetchData={fetchData}
-                title="Pinned columns"
+                title={t("showcase.data.galleryPinnedColumns")}
                 layout="fixed"
                 density="compact"
                 defaultItemsPerPage={4}
@@ -1042,13 +1158,13 @@ export const DataTableShowcase = () => {
           </div>
 
           <div>
-            <h4 className="text-sm font-bold text-slate-700 dark:text-slate-200 mb-3">Server-side virtualization — 240 rows {dtVirtualized ? "(page 200)" : "(page 10)"}</h4>
-            <div className="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
+            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryServerVirtualization", { page: dtVirtualized ? 200 : 10 })}</h3>
+            <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <ITDataTable
                 key={dtVirtualized ? "dt-virt-on" : "dt-virt-off"}
                 columns={virtualUserColumns}
                 fetchData={virtualFetchData}
-                title="Virtualized users"
+                title={t("showcase.data.galleryVirtualizedUsers")}
                 defaultItemsPerPage={dtVirtualized ? 200 : 10}
                 itemsPerPageOptions={dtVirtualized ? [50, 100, 200] : [5, 10, 20]}
                 size={dtSize}
@@ -1128,6 +1244,7 @@ function GalleryDataTable({ title, size, defaultItemsPerPage, defaultView, rende
 
 // 3. ITBadget Showcase
 export const BadgetShowcase = () => {
+  const { t } = useITTranslation();
   const [color, setColor] = useState<any>("success");
   const [size, setSize] = useState<any>("medium");
   const [labelText, setLabelText] = useState("Activo");
@@ -1137,7 +1254,7 @@ export const BadgetShowcase = () => {
   return (
     <ShowcaseLayout
       title="ITBadget"
-      description="Badges (etiquetas) estilizados para representar estados o categorías de items."
+      description={t("showcase.data.badgetDesc")}
       code={code}
       demo={
         <ITBadget label={labelText} color={color} size={size} />
@@ -1146,14 +1263,14 @@ export const BadgetShowcase = () => {
         <>
           <ITInput
             name="label"
-            label="Texto"
+            label={t("showcase.data.textLabel")}
             value={labelText}
             onChange={(e: any) => setLabelText(e.target.value)}
             onBlur={() => { }}
           />
           <ITSelect
             name="color"
-            label="Color"
+            label={t("showcase.common.color")}
             value={color}
             onChange={(e: any) => setColor(e.target.value)}
             options={[
@@ -1167,7 +1284,7 @@ export const BadgetShowcase = () => {
           />
           <ITSelect
             name="size"
-            label="Tamaño"
+            label={t("showcase.common.size")}
             value={size}
             onChange={(e: any) => setSize(e.target.value)}
             options={[
@@ -1198,6 +1315,7 @@ export const BadgetShowcase = () => {
 
 // 4. ITImage Showcase
 export const ImageShowcase = () => {
+  const { t } = useITTranslation();
   const [broken, setBroken] = useState(false);
   const src = broken ? "https://nonexistent.image.site/broken.jpg" : "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&q=80";
 
@@ -1206,26 +1324,28 @@ export const ImageShowcase = () => {
   return (
     <ShowcaseLayout
       title="ITImage"
-      description="Componente de renderizado de imágenes inteligente con cargador interno y fallback automático ante fallas de red."
+      description={t("showcase.data.imageDesc")}
       code={code}
       demo={
         <div className="w-full max-w-sm flex flex-col items-center gap-3">
           <ITImage
             src={src}
-            alt="Demo abstracta"
+            alt={t("showcase.data.imageAlt")}
             fallback="https://placehold.co/400x200?text=Error+Carga+Imagen"
             className="rounded-xl object-cover h-40 w-full shadow-md"
           />
           <span className="text-xs text-slate-500 font-mono">
-            {broken ? "Cargando URL Rota (Fallback Activo)" : "Cargando URL Correcta"}
+            {broken ? t("showcase.data.imageBroken") : t("showcase.data.imageOk")}
           </span>
         </div>
       }
       controls={
         <>
           <div className="flex items-center justify-between pt-2">
-            <span className="text-sm font-semibold text-gray-700">Forzar Error de Carga (URL rota)</span>
-            <ITSlideToggle isOn={broken} onToggle={setBroken} activeColor="danger" size="sm" />
+            <span className="font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.forceError")}</span>
+            <ITSlideToggle isOn={broken} onToggle={setBroken} activeColor="danger" size="sm"
+              ariaLabel={t("showcase.data.forceError")}
+            />
           </div>
         </>
       }
@@ -1235,6 +1355,7 @@ export const ImageShowcase = () => {
 
 // ITChip Showcase
 export const ChipShowcase = () => {
+  const { t } = useITTranslation();
   const [active, setActive] = useState<string[]>(["mx"]);
 
   const toggle = (id: string) =>
@@ -1251,7 +1372,7 @@ export const ChipShowcase = () => {
   return (
     <ShowcaseLayout
       title="ITChip"
-      description="Etiqueta compacta (tag / pill) para labels, filtros activos y selecciones múltiples. Variantes soft, filled y outlined, icono, botón de quitar (X) y estado seleccionado."
+      description={t("showcase.data.chipDesc")}
       code={code}
       demo={
         <div className="w-full max-w-lg space-y-5">
@@ -1273,13 +1394,13 @@ export const ChipShowcase = () => {
           </div>
           <div className="flex flex-wrap items-center gap-2">
             <ITChip label="México" color="danger" variant="outlined" removable onRemove={() => {}} />
-            <ITChip label="Deshabilitado" color="secondary" disabled />
+            <ITChip label={t("showcase.data.chipDisabled")} color="secondary" disabled />
           </div>
         </div>
       }
       controls={
         <p className="text-xs text-slate-500">
-          Los chips con onClick son toggles de filtro (role=button, Enter/Space). Los chips removibles muestran una X.
+          {t("showcase.data.chipHint")}
         </p>
       }
       doc={{