@axzydev/axzy_ui_system 1.4.7 → 1.5.0

package/src/components/molecules/table/table.props.ts

@@ -1,4 +1,4 @@
-import { TableDensity, TableSize, TableVariants } from "@/types/table.types";
+import { TableDensity, TableDesignProps, TableSize, TableVariants } from "@/types/table.types";
 
 /** Data type of a table column, controls default rendering, filter UI, and sort comparison. */
 export type ColumnType = "string" | "date" | "number" | "boolean" | "actions" | "catalog";
@@ -31,6 +31,14 @@ export interface Column<T = any> {
   label: string;
   /** Additional CSS classes applied to both the header (`<th>`) and body (`<td>`) cells of this column. */
   className?: string;
+  /** Extra CSS classes applied only to this column's header (`<th>`), merged after `className`. */
+  headerClassName?: string;
+  /** Inline styles applied only to this column's header (`<th>`), merged after the table-level header-cell style. */
+  headerStyle?: React.CSSProperties;
+  /** Extra CSS classes applied only to this column's body cells (`<td>`), merged after `className`. */
+  cellClassName?: string;
+  /** Inline styles applied only to this column's body cells (`<td>`), merged after the table-level cell style. */
+  cellStyle?: React.CSSProperties;
   /** Formats numeric values as Mexican pesos (MXN) via `Intl`-based currency formatting. Only applies when `type` is `"number"`. @default false */
   currencyMX?: boolean;
   /** Custom action buttons/content rendered for a `"actions"`-type column. Receives the full row object. */
@@ -109,7 +117,7 @@ export interface Column<T = any> {
   pinned?: "left" | "right";
 }
 
-export interface ITTableProps<T> {
+export interface ITTableProps<T> extends TableDesignProps {
   /** Column definitions: key, label, type, sortable behavior, filters, and custom rendering. */
   columns: Column<T>[];
   /** Additional CSS classes for the outermost container. */

package/src/components/molecules/table/table.tsx

@@ -35,6 +35,7 @@ import {
   tableRowClickable,
 } from "@/utils/styles";
 import { formatCurrencyMX, getNestedValue, getPinnedColumnMeta, isInteractiveTarget } from "@/utils/table.utils";
+import { useITTranslation, toIntlLocale } from "@/i18n";
 
 /**
  * A feature-rich data table with per-column filtering, sortable columns,
@@ -74,10 +75,52 @@ export default function ITTable<T extends Record<string, unknown>>({
   rowHeight,
   overscan = 5,
   stickyHeader = false,
+  showViewToggle = true,
+  design,
+  colors,
+  containerStyle,
+  cardClassName,
+  cardStyle,
+  toolbarClassName,
+  toolbarStyle,
+  headerClassName,
+  headerStyle,
+  headerCellClassName,
+  headerCellStyle,
+  rowClassName,
+  rowStyle,
+  cellClassName,
+  cellStyle,
+  cardsClassName,
+  cardsStyle,
+  footerClassName,
+  footerStyle,
 }: ITTableProps<T>) {
+  const { t, locale } = useITTranslation();
   const [viewMode, setViewMode] = useState<"table" | "cards">(defaultView);
   const { ref: rootRef, width: containerWidth } = useElementSize<HTMLDivElement>();
 
+  // Per-instance color overrides written as local `--color-table-*` variables.
+  // Declared on the wrapper (an ancestor), they beat the global theme's
+  // `:root` values for this subtree only.
+  const colorVars = {
+    ...(colors?.headerBg ? { "--color-table-headerBg": colors.headerBg } : {}),
+    ...(colors?.headerText ? { "--color-table-headerText": colors.headerText } : {}),
+    ...(colors?.rowBg ? { "--color-table-rowBg": colors.rowBg } : {}),
+    ...(colors?.rowText ? { "--color-table-rowText": colors.rowText } : {}),
+    ...(colors?.rowHover ? { "--color-table-rowHover": colors.rowHover } : {}),
+  } as React.CSSProperties;
+
+  /** Merge a `design` slot with its flat shortcut (flat wins) into className/style. */
+  const mergeSlot = (
+    slot: { className?: string; style?: React.CSSProperties } | undefined,
+    flatClassName?: string,
+    flatStyle?: React.CSSProperties
+  ) => ({
+    className: clsx(slot?.className, flatClassName),
+    style: { ...slot?.style, ...flatStyle } as React.CSSProperties,
+  });
+
   const isFixed = layout === "fixed";
   const forcedCards =
     autoCardBreakpoint > 0 && containerWidth > 0 && containerWidth < autoCardBreakpoint;
@@ -241,17 +284,17 @@ export default function ITTable<T extends Record<string, unknown>>({
             : undefined;
 
       const getToggleLabel = () => {
-        if (currentValue === undefined) return "Mostrar todos";
-        if (currentValue === true) return "Filtrar solo verdaderos";
-        return "Filtrar solo falsos";
+        if (currentValue === undefined) return t("table.showAll");
+        if (currentValue === true) return t("table.filterTrue");
+        return t("table.filterFalse");
       };
 
       return (
         <button
           className="flex items-center justify-center cursor-pointer focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 rounded-full p-1 transition-all duration-200"
           onClick={() => handleFilterChange(col.key, nextValue)}
-          aria-label={`${getToggleLabel()} para ${col.label}`}
-          title={`${getToggleLabel()} para ${col.label}`}
+          aria-label={t("table.filterToggle", { action: getToggleLabel(), label: col.label })}
+          title={t("table.filterToggle", { action: getToggleLabel(), label: col.label })}
         >
           <div className="relative w-10 h-5 bg-secondary-300 rounded-full">
             <div
@@ -274,21 +317,21 @@ export default function ITTable<T extends Record<string, unknown>>({
         return (
           <FaSpinner
             className="animate-spin"
-            aria-label="Cargando opciones"
-            title="Cargando opciones"
+            aria-label={t("common.loadingOptions")}
+            title={t("common.loadingOptions")}
           />
         );
       }
 
       if (col.catalogOptions.error) {
-        return <ITText as="span" className="text-danger-500 text-xs">Error cargando</ITText>;
+        return <ITText as="span" className="text-danger-500 text-xs">{t("common.loadError")}</ITText>;
       }
 
       return (
         <ITSelect
           name={`filter-${col.key}`}
           options={[
-            { value: "", label: "Todos" },
+            { value: "", label: t("common.all") },
             ...col.catalogOptions.data.map((item) => ({
               value: String(item.id),
               label: item.name,
@@ -310,14 +353,14 @@ export default function ITTable<T extends Record<string, unknown>>({
         return (
           <FaSpinner
             className="animate-spin"
-            aria-label="Cargando opciones"
-            title="Cargando opciones"
+            aria-label={t("common.loadingOptions")}
+            title={t("common.loadingOptions")}
           />
         );
       }
 
       if (col.catalogOptions.error) {
-        return <ITText as="span" className="text-danger-500 text-xs">Error cargando</ITText>;
+        return <ITText as="span" className="text-danger-500 text-xs">{t("common.loadError")}</ITText>;
       }
 
       const searchValue = filters[col.key];
@@ -337,7 +380,7 @@ export default function ITTable<T extends Record<string, unknown>>({
           onSearch={col.catalogOptions.onSearch}
           isLoading={col.catalogOptions.loading}
           size="sm"
-          placeholder="Buscar..."
+          placeholder={t("common.search")}
           clearable
           className="w-full"
           onBlur={() => { }}
@@ -355,7 +398,7 @@ export default function ITTable<T extends Record<string, unknown>>({
           minDate={col.dateFilterOptions?.minDate}
           maxDate={col.dateFilterOptions?.maxDate}
           size="sm"
-          placeholder="dd/mm/aaaa"
+          placeholder={t("datePicker.placeholder")}
           className="w-full"
         />
       );
@@ -374,7 +417,7 @@ export default function ITTable<T extends Record<string, unknown>>({
           minDate={col.dateFilterOptions?.minDate}
           maxDate={col.dateFilterOptions?.maxDate}
           size="sm"
-          placeholder="dd/mm/aaaa - dd/mm/aaaa"
+          placeholder={t("datePicker.rangePlaceholder")}
           className="w-full"
         />
       );
@@ -384,7 +427,7 @@ export default function ITTable<T extends Record<string, unknown>>({
       <ITInput
         name={`filter-${col.key}`}
         className="w-full text-xs"
-        placeholder="Buscar..."
+        placeholder={t("common.search")}
         value={String(filters[col.key] || "")}
         onChange={(e) => handleFilterChange(col.key, e.target.value)}
         onBlur={() => { }}
@@ -401,19 +444,19 @@ export default function ITTable<T extends Record<string, unknown>>({
 
     switch (col.type) {
       case "number":
-        return (typeof value === "number") && col.currencyMX ? formatCurrencyMX(value) : value;
+        return (typeof value === "number") && col.currencyMX ? formatCurrencyMX(value, toIntlLocale(locale)) : value;
       case "boolean":
         return value ? (
           <FaCheck
             className="text-success-500"
-            aria-label="Verdadero"
-            title="Verdadero"
+            aria-label={t("common.true")}
+            title={t("common.true")}
           />
         ) : (
           <FaTimes
             className="text-danger-500"
-            aria-label="Falso"
-            title="Falso"
+            aria-label={t("common.false")}
+            title={t("common.false")}
           />
         );
       case "actions":
@@ -468,73 +511,73 @@ export default function ITTable<T extends Record<string, unknown>>({
     onRowClick(row, event);
   };
 
+  const containerSlot = mergeSlot(design?.container, containerClassName, containerStyle);
+  const cardSlot = mergeSlot(design?.card, cardClassName, cardStyle);
+  const toolbarSlot = mergeSlot(design?.toolbar, toolbarClassName, toolbarStyle);
+  const headerSlot = mergeSlot(design?.header, headerClassName, headerStyle);
+  const headerCellSlot = mergeSlot(design?.headerCell, headerCellClassName, headerCellStyle);
+  const rowSlot = mergeSlot(design?.row, rowClassName, rowStyle);
+  const cellSlot = mergeSlot(design?.cell, cellClassName, cellStyle);
+  const cardsSlot = mergeSlot(design?.cards, cardsClassName, cardsStyle);
+  const footerSlot = mergeSlot(design?.footer, footerClassName, footerStyle);
+
+  const viewToggle = (
+    <div className="flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50">
+      <button
+        onClick={() => setViewMode("table")}
+        disabled={forcedCards}
+        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
+          effectiveView === "table"
+            ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700"
+            : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
+        }`}
+      >
+        <FaTable size={11} />
+        {t("table.viewTable")}
+      </button>
+      <button
+        onClick={() => setViewMode("cards")}
+        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
+          effectiveView === "cards"
+            ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700"
+            : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
+        }`}
+      >
+        <FaThLarge size={11} />
+        {t("table.viewCards")}
+      </button>
+    </div>
+  );
+
   return (
-    <div ref={rootRef} className={clsx("space-y-4 w-full", containerClassName)}>
-      <div className={tableContainer} style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+    <div
+      ref={rootRef}
+      className={clsx("space-y-4 w-full", containerSlot.className)}
+      style={{ ...colorVars, ...containerSlot.style }}
+    >
+      <div
+        className={clsx(tableContainer, cardSlot.className)}
+        style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)', ...cardSlot.style }}
+      >
         {/* Header outside overflow */}
         {title && (
-          <div className="px-6 py-5 flex items-center justify-between" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+          <div
+            className={clsx("px-6 py-5 flex items-center justify-between", toolbarSlot.className)}
+            style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)', ...toolbarSlot.style }}
+          >
             <ITText as="h2" className="text-xl font-bold text-secondary-900 leading-tight">{title}</ITText>
-            <div className="flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50">
-              <button
-                onClick={() => setViewMode("table")}
-                disabled={forcedCards}
-                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
-                  effectiveView === "table"
-                    ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700"
-                    : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
-                }`}
-              >
-                <FaTable size={11} />
-                Table
-              </button>
-              <button
-                onClick={() => setViewMode("cards")}
-                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
-                  effectiveView === "cards"
-                    ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700"
-                    : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
-                }`}
-              >
-                <FaThLarge size={11} />
-                Cards
-              </button>
-            </div>
+            {showViewToggle && viewToggle}
           </div>
         )}
 
-        {!title && (
-          <div className="flex justify-end px-4 pt-3">
-            <div className="flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50">
-              <button
-                onClick={() => setViewMode("table")}
-                disabled={forcedCards}
-                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
-                  effectiveView === "table"
-                    ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700"
-                    : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
-                }`}
-              >
-                <FaTable size={11} />
-                Table
-              </button>
-              <button
-                onClick={() => setViewMode("cards")}
-                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
-                  effectiveView === "cards"
-                    ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700"
-                    : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
-                }`}
-              >
-                <FaThLarge size={11} />
-                Cards
-              </button>
-            </div>
+        {!title && showViewToggle && (
+          <div className={clsx("flex justify-end px-4 pt-3", toolbarSlot.className)} style={toolbarSlot.style}>
+            {viewToggle}
           </div>
         )}
 
         {effectiveView === "cards" ? (
-          <div className="p-4 space-y-3 max-h-[400px] overflow-y-auto">
+          <div className={clsx("p-4 space-y-3 max-h-[400px] overflow-y-auto", cardsSlot.className)} style={cardsSlot.style}>
             {currentData.length > 0 ? (
               currentData.map((row, i) => (
                 <div
@@ -550,8 +593,8 @@ export default function ITTable<T extends Record<string, unknown>>({
               ))
             ) : (
               <div className={clsx(tableEmptyContent, "py-12")}>
-                <ITText as="span" className="text-lg">No se encontraron resultados</ITText>
-                <ITText as="span" className="text-sm mt-1">Intenta ajustar los filtros</ITText>
+                <ITText as="span" className="text-lg">{t("table.noResults")}</ITText>
+                <ITText as="span" className="text-sm mt-1">{t("table.adjustFilters")}</ITText>
               </div>
             )}
           </div>
@@ -588,7 +631,8 @@ export default function ITTable<T extends Record<string, unknown>>({
               )}
               <thead>
                 <tr
-                  className={clsx(tableHeaderRow, "dark:text-slate-200")}
+                  className={clsx(tableHeaderRow, "dark:text-slate-200", headerSlot.className)}
+                  style={headerSlot.style}
                   aria-rowindex={isTableVirtual ? 1 : undefined}
                 >
                   {columns.map((col) => {
@@ -604,23 +648,23 @@ export default function ITTable<T extends Record<string, unknown>>({
                         isPinned && "sticky",
                         isStickyHeader && "sticky top-0 bg-secondary-50",
                         isPinned ? "z-[15]" : isStickyHeader && "z-10",
-                        isPinned && (col.pinned === "left" ? "it-table-pinned-left" : "it-table-pinned-right")
+                        isPinned && (col.pinned === "left" ? "it-table-pinned-left" : "it-table-pinned-right"),
+                        headerCellSlot.className,
+                        col.headerClassName
                       )}
-                      style={
-                        col.minWidth != null || isStickyHeader || isPinned
-                          ? {
-                              ...(col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {}),
-                              ...(isStickyHeader || isPinned
-                                ? { backgroundColor: "var(--color-table-headerBg, #f8fafc)" }
-                                : {}),
-                              ...(isPinned
-                                ? pin.side === "left"
-                                  ? { left: pin.offset }
-                                  : { right: pin.offset }
-                                : {}),
-                            }
-                          : undefined
-                      }
+                      style={{
+                        ...(col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {}),
+                        ...(isStickyHeader || isPinned
+                          ? { backgroundColor: "var(--color-table-headerBg, #f8fafc)" }
+                          : {}),
+                        ...(isPinned
+                          ? pin.side === "left"
+                            ? { left: pin.offset }
+                            : { right: pin.offset }
+                          : {}),
+                        ...headerCellSlot.style,
+                        ...col.headerStyle,
+                      }}
                     >
                       <div className={isFixed ? "flex flex-col gap-3" : "flex flex-col gap-3 min-w-[150px]"}>
                         <div className="flex items-center justify-between gap-2">
@@ -632,7 +676,7 @@ export default function ITTable<T extends Record<string, unknown>>({
                                   ? "bg-secondary-200 text-secondary-900"
                                   : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"
                                 }`}
-                              title={`Ordenar por ${col.label}`}
+                              title={t("table.sortBy", { label: col.label })}
                             >
                               <MdOutlineSwapVert className="w-4 h-4" aria-hidden="true" />
                             </button>
@@ -664,8 +708,10 @@ export default function ITTable<T extends Record<string, unknown>>({
                           className={clsx(
                             tableRow,
                             variant === "striped" && absoluteIndex % 2 === 0 && "bg-secondary-50/40 dark:bg-slate-800/20",
-                            onRowClick && tableRowClickable
+                            onRowClick && tableRowClickable,
+                            rowSlot.className
                           )}
+                          style={rowSlot.style}
                           tabIndex={onRowClick ? 0 : undefined}
                           onClick={onRowClick ? handleRowClick(row) : undefined}
                           onKeyDown={onRowClick ? handleRowKeyDown(row) : undefined}
@@ -687,20 +733,20 @@ export default function ITTable<T extends Record<string, unknown>>({
                                   col.align && tableAlignClasses[col.align],
                                   isPinned && "sticky bg-[var(--color-table-rowBg,white)] group-hover:bg-[var(--color-table-rowHover,var(--color-secondary-50))]",
                                   isPinned && (col.pinned === "left" ? "it-table-pinned-left" : "it-table-pinned-right"),
-                                  isPinned && "z-[1]"
+                                  isPinned && "z-[1]",
+                                  cellSlot.className,
+                                  col.cellClassName
                                 )}
-                                style={
-                                  col.minWidth != null || isPinned
-                                    ? {
-                                        ...(col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {}),
-                                        ...(isPinned
-                                          ? pin.side === "left"
-                                            ? { left: pin.offset }
-                                            : { right: pin.offset }
-                                          : {}),
-                                      }
-                                    : undefined
-                                }
+                                style={{
+                                  ...(col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {}),
+                                  ...(isPinned
+                                    ? pin.side === "left"
+                                      ? { left: pin.offset }
+                                      : { right: pin.offset }
+                                    : {}),
+                                  ...cellSlot.style,
+                                  ...col.cellStyle,
+                                }}
                                 title={truncateTitle}
                               >
                                 {col.type === "actions" ? (
@@ -728,8 +774,8 @@ export default function ITTable<T extends Record<string, unknown>>({
                   <tr>
                     <td colSpan={columns.length} className="px-6 py-12 text-center">
                       <div className={tableEmptyContent}>
-                        <ITText as="span" className="text-lg">No se encontraron resultados</ITText>
-                        <ITText as="span" className="text-sm mt-1">Intenta ajustar los filtros</ITText>
+                        <ITText as="span" className="text-lg">{t("table.noResults")}</ITText>
+                        <ITText as="span" className="text-sm mt-1">{t("table.adjustFilters")}</ITText>
                       </div>
                     </td>
                   </tr>
@@ -740,7 +786,10 @@ export default function ITTable<T extends Record<string, unknown>>({
         )}
 
         {/* Pagination */}
-        <div className="rounded-b-xl px-6 py-4" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+        <div
+          className={clsx("rounded-b-xl px-6 py-4", footerSlot.className)}
+          style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)', ...footerSlot.style }}
+        >
           <ITPagination
             currentPage={currentPage}
             totalPages={computedTotalPages}

package/src/components/molecules/time-picker/timePicker.tsx

@@ -9,6 +9,7 @@ import { useFloatingPanel } from "@/hooks/useFloatingPanel";
 import { theme } from "@/theme/theme";
 import { ITTimePickerProps } from "./timePicker.props";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Time selection input with a dual-column dropdown (hours / minutes).
@@ -35,7 +36,7 @@ export default function ITTimePicker({
   name,
   value,
   label,
-  placeholder = "HH:MM",
+  placeholder,
   onChange,
   onBlur,
   required,
@@ -47,6 +48,7 @@ export default function ITTimePicker({
   variant = "primary",
   color = "primary",
 }: ITTimePickerProps) {
+  const { t } = useITTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState(value || "");
   const [isValidTime, setIsValidTime] = useState(true);
@@ -185,7 +187,7 @@ export default function ITTimePicker({
       <ITInput
         name={name}
         label={label}
-        placeholder={placeholder}
+        placeholder={placeholder ?? t("timePicker.placeholder")}
         type="text"
         value={inputValue}
         onChange={handleInputChange}
@@ -196,7 +198,7 @@ export default function ITTimePicker({
         variant={variant}
         size={size}
         touched={touched}
-        error={!isValidTime ? "Hora inválida" : typeof error === 'string' ? error : undefined}
+        error={!isValidTime ? t("timePicker.invalid") : typeof error === 'string' ? error : undefined}
         iconRight={
           <FaClock
             onClick={() => {
@@ -223,9 +225,9 @@ export default function ITTimePicker({
         >
           <div className="flex bg-secondary-50 border-b border-secondary-100 text-xs font-semibold text-secondary-500 uppercase tracking-wider">
             <ITText as="div" className="flex-1 text-center py-2 border-r border-secondary-100">
-              Horas
+              {t("timePicker.hours")}
             </ITText>
-            <ITText as="div" className="flex-1 text-center py-2">Minutos</ITText>
+            <ITText as="div" className="flex-1 text-center py-2">{t("timePicker.minutes")}</ITText>
           </div>
 
           <div className="flex h-56 relative bg-white">
@@ -316,7 +318,7 @@ export default function ITTimePicker({
               size="sm"
               onClick={handleConfirm}
             >
-              <ITText as="span">Aceptar</ITText>
+              <ITText as="span">{t("timePicker.accept")}</ITText>
             </ITButton>
           </div>
         </div>,

package/src/components/molecules/wysiwyg/wysiwyg.tsx

@@ -20,20 +20,30 @@ import ITTooltip from "@/components/atoms/tooltip/tooltip";
 import ITText from "@/components/atoms/text/text";
 import { inputError, inputLabel, inputWrapper } from "@/utils/styles";
 import { inputSizeTokens } from "@/theme/theme";
+import { useITTranslation } from "@/i18n";
 
 const INLINE_TAGS = new Set(["STRONG", "B", "EM", "I", "U", "MARK"]);
 
-const ACTION_META: Record<
-  ToolbarAction,
-  { label: string; icon: ReactNode }
-> = {
-  bold: { label: "Negrita", icon: <FaBold /> },
-  italic: { label: "Itálica", icon: <FaItalic /> },
-  underline: { label: "Subrayado", icon: <FaUnderline /> },
-  highlight: { label: "Marcador", icon: <FaHighlighter /> },
-  ul: { label: "Lista con viñetas", icon: <FaListUl /> },
-  ol: { label: "Lista numerada", icon: <FaListOl /> },
-  clear: { label: "Limpiar formato", icon: <FaEraser /> },
+/** Catálogo de key por acción de la barra de herramientas. */
+const ACTION_LABEL_KEYS: Record<ToolbarAction, string> = {
+  bold: "wysiwyg.bold",
+  italic: "wysiwyg.italic",
+  underline: "wysiwyg.underline",
+  highlight: "wysiwyg.highlight",
+  ul: "wysiwyg.bulletList",
+  ol: "wysiwyg.numberedList",
+  clear: "wysiwyg.clearFormat",
+};
+
+/** Icono por acción de la barra de herramientas. */
+const ACTION_ICONS: Record<ToolbarAction, ReactNode> = {
+  bold: <FaBold />,
+  italic: <FaItalic />,
+  underline: <FaUnderline />,
+  highlight: <FaHighlighter />,
+  ul: <FaListUl />,
+  ol: <FaListOl />,
+  clear: <FaEraser />,
 };
 
 type ActiveState = Partial<Record<ToolbarAction, boolean>>;
@@ -73,6 +83,7 @@ export default function ITWysiwyg({
   toolbar = toolbarActions,
   className,
 }: ITWysiwygProps) {
+  const { t } = useITTranslation();
   const editorRef = useRef<HTMLDivElement>(null);
   const focusedRef = useRef(false);
   const [active, setActive] = useState<ActiveState>({});
@@ -516,7 +527,7 @@ export default function ITWysiwyg({
   }: {
     action: ToolbarAction;
   }) => {
-    const meta = ACTION_META[action];
+    const meta = { label: t(ACTION_LABEL_KEYS[action]), icon: ACTION_ICONS[action] };
     const isActive = !!active[action];
     return (
       <ITTooltip content={meta.label}>

package/src/components/organisms/confirm-dialog/confirm-dialog.props.ts

@@ -8,13 +8,13 @@ export interface ITConfirmDialogProps {
   onClose: () => void;
   /** Callback fired when the user confirms the destructive action. */
   onConfirm: () => void;
-  /** Heading text displayed at the top of the dialog. @default "Confirmar acción" */
+  /** Heading text displayed at the top of the dialog. @default i18n `confirmDialog.title` ("Confirmar acción") */
   title?: string;
-  /** Body content — accepts plain strings or React nodes. @default "¿Estás seguro de que deseas continuar?" */
+  /** Body content — accepts plain strings or React nodes. @default i18n `confirmDialog.message` ("¿Estás seguro de que deseas continuar?") */
   message?: ReactNode;
-  /** Label for the confirm button. @default "Confirmar" */
+  /** Label for the confirm button. @default i18n `common.confirm` ("Confirmar") */
   confirmLabel?: string;
-  /** Label for the cancel button. @default "Cancelar" */
+  /** Label for the cancel button. @default i18n `common.cancel` ("Cancelar") */
   cancelLabel?: string;
   /** Color variant applied to the confirm button. Accepts any ColorsTypes value (e.g. "primary", "danger", "warning", "info"). @default "primary" */
   variant?: ColorsTypes;