@axzydev/axzy_ui_system 1.4.8 → 1.5.1

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,
@@ -95,6 +96,7 @@ export default function ITTable<T extends Record<string, unknown>>({
   footerClassName,
   footerStyle,
 }: ITTableProps<T>) {
+  const { t, locale } = useITTranslation();
   const [viewMode, setViewMode] = useState<"table" | "cards">(defaultView);
   const { ref: rootRef, width: containerWidth } = useElementSize<HTMLDivElement>();
 
@@ -282,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
@@ -315,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,
@@ -351,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];
@@ -378,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={() => { }}
@@ -396,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"
         />
       );
@@ -415,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"
         />
       );
@@ -425,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={() => { }}
@@ -442,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":
@@ -531,7 +533,7 @@ export default function ITTable<T extends Record<string, unknown>>({
         }`}
       >
         <FaTable size={11} />
-        Table
+        {t("table.viewTable")}
       </button>
       <button
         onClick={() => setViewMode("cards")}
@@ -542,7 +544,7 @@ export default function ITTable<T extends Record<string, unknown>>({
         }`}
       >
         <FaThLarge size={11} />
-        Cards
+        {t("table.viewCards")}
       </button>
     </div>
   );
@@ -591,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>
@@ -674,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>
@@ -772,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>

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;

package/src/components/organisms/confirm-dialog/confirm-dialog.tsx

@@ -3,6 +3,7 @@ import { ITConfirmDialogProps } from "./confirm-dialog.props";
 import ITButton from "@/components/atoms/button/button";
 import { FaExclamationTriangle } from "react-icons/fa";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Confirmation modal dialog for destructive or critical actions.
@@ -27,15 +28,22 @@ export default function ITConfirmDialog({
   isOpen,
   onClose,
   onConfirm,
-  title = "Confirmar acción",
-  message = "¿Estás seguro de que deseas continuar?",
-  confirmLabel = "Confirmar",
-  cancelLabel = "Cancelar",
+  title,
+  message,
+  confirmLabel,
+  cancelLabel,
   variant = "primary",
   loading = false,
 }: ITConfirmDialogProps) {
+  const { t } = useITTranslation();
+
   if (!isOpen) return null;
 
+  const resolvedTitle = title ?? t("confirmDialog.title");
+  const resolvedMessage = message ?? t("confirmDialog.message");
+  const resolvedConfirmLabel = confirmLabel ?? t("common.confirm");
+  const resolvedCancelLabel = cancelLabel ?? t("common.cancel");
+
   return (
     <div className="fixed inset-0 z-[60] flex items-center justify-center p-4">
       <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />
@@ -50,13 +58,13 @@ export default function ITConfirmDialog({
             <FaExclamationTriangle className="text-amber-600" size={18} />
           </div>
           <div className="flex-1">
-            <ITText as="h3" className="text-lg font-bold text-slate-800 dark:text-white">{title}</ITText>
-            <ITText as="p" className="text-sm text-slate-500 dark:text-slate-400 mt-1">{message}</ITText>
+            <ITText as="h3" className="text-lg font-bold text-slate-800 dark:text-white">{resolvedTitle}</ITText>
+            <ITText as="p" className="text-sm text-slate-500 dark:text-slate-400 mt-1">{resolvedMessage}</ITText>
           </div>
         </div>
         <div className="flex justify-end gap-3 mt-6">
-          <ITButton label={cancelLabel} variant="outlined" size="sm" onClick={onClose} disabled={loading} />
-          <ITButton label={confirmLabel} color={variant} size="sm" onClick={onConfirm} disabled={loading} />
+          <ITButton label={resolvedCancelLabel} variant="outlined" size="sm" onClick={onClose} disabled={loading} />
+          <ITButton label={resolvedConfirmLabel} color={variant} size="sm" onClick={onConfirm} disabled={loading} />
         </div>
       </div>
     </div>

package/src/components/organisms/data-table/dataTable.tsx

@@ -13,6 +13,7 @@ import ITSearchSelect from "@/components/molecules/search-select/search-select";
 import ITDatePicker from "@/components/molecules/date-picker/datePicker";
 import { Column } from "@/components/molecules/table/table.props";
 import { formatCurrencyMX, getPinnedColumnMeta, isInteractiveTarget } from "@/utils/table.utils";
+import { useITTranslation, toIntlLocale } from "@/i18n";
 import { ITDataTableProps } from "./dataTable.props";
 import ITText from "@/components/atoms/text/text";
 import {
@@ -106,6 +107,7 @@ export default function ITDataTable<T extends Record<string, unknown>>({
   footerClassName,
   footerStyle,
 }: ITDataTableProps<T>) {
+  const { t, locale } = useITTranslation();
   const [viewMode, setViewMode] = useState<"table" | "cards">(defaultView || "table");
   const { ref: rootRef, width: containerWidth } = useElementSize<HTMLDivElement>();
   const [data, setData] = useState<T[]>([]);
@@ -239,17 +241,21 @@ export default function ITDataTable<T extends Record<string, unknown>>({
         currentValue === undefined ? true : currentValue === true ? false : 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");
       };
+      const toggleLabel = t("table.filterToggle", {
+        action: getToggleLabel(),
+        label: col.label,
+      });
 
       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={toggleLabel}
+          title={toggleLabel}
           disabled={isLoading}
         >
           <div className="relative w-10 h-5 bg-secondary-300 rounded-full">
@@ -270,16 +276,16 @@ export default function ITDataTable<T extends Record<string, unknown>>({
 
     if (col.filter === "catalog" && col.catalogOptions) {
       if (col.catalogOptions.loading) {
-        return <FaSpinner className="animate-spin" aria-label="Cargando opciones" title="Cargando opciones" />;
+        return <FaSpinner className="animate-spin" 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,
@@ -299,10 +305,10 @@ export default function ITDataTable<T extends Record<string, unknown>>({
 
     if (col.filter === "search" && col.catalogOptions) {
       if (col.catalogOptions.loading) {
-        return <FaSpinner className="animate-spin" aria-label="Cargando opciones" title="Cargando opciones" />;
+        return <FaSpinner className="animate-spin" 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];
       return (
@@ -321,7 +327,7 @@ export default function ITDataTable<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={() => {}}
@@ -340,7 +346,7 @@ export default function ITDataTable<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"
           disabled={isLoading}
         />
@@ -360,7 +366,7 @@ export default function ITDataTable<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"
           disabled={isLoading}
         />
@@ -371,7 +377,7 @@ export default function ITDataTable<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={() => {}}
@@ -386,12 +392,12 @@ export default function ITDataTable<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" />
+          <FaCheck className="text-success-500" aria-label={t("common.true")} title={t("common.true")} />
         ) : (
-          <FaTimes className="text-danger-500" aria-label="Falso" title="Falso" />
+          <FaTimes className="text-danger-500" aria-label={t("common.false")} title={t("common.false")} />
         );
       case "actions":
         return col.actions ? col.actions(row) : null;
@@ -464,11 +470,11 @@ export default function ITDataTable<T extends Record<string, unknown>>({
     <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={segCtrlClass("table")}>
         <FaTable size={11} />
-        Table
+        {t("table.viewTable")}
       </button>
       <button onClick={() => setViewMode("cards")} className={segCtrlClass("cards")}>
         <FaThLarge size={11} />
-        Cards
+        {t("table.viewCards")}
       </button>
     </div>
   );
@@ -550,7 +556,7 @@ export default function ITDataTable<T extends Record<string, unknown>>({
                           ? "bg-secondary-200 text-secondary-900"
                           : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"
                       } disabled:opacity-50`}
-                      title={`Ordenar por ${col.label}`}
+                      title={t("table.sortBy", { label: col.label })}
                     >
                       <MdOutlineSwapVert className="w-4 h-4" aria-hidden="true" />
                     </button>
@@ -648,8 +654,8 @@ export default function ITDataTable<T extends Record<string, unknown>>({
             <td colSpan={columns.length} className="px-6 py-12 text-center">
               {!isLoading && (
                 <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>
@@ -699,7 +705,7 @@ export default function ITDataTable<T extends Record<string, unknown>>({
                   {loadingIndicator || (
                     <>
                       <FaSpinner className="animate-spin text-primary-500 text-4xl" />
-                      <ITText as="span" className="text-sm font-semibold text-secondary-600 animate-pulse">Cargando datos...</ITText>
+                      <ITText as="span" className="text-sm font-semibold text-secondary-600 animate-pulse">{t("table.loading")}</ITText>
                     </>
                   )}
                </div>
@@ -724,8 +730,8 @@ export default function ITDataTable<T extends Record<string, unknown>>({
               ) : (
                 !isLoading && (
                   <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>
                 )
               )}

package/src/components/organisms/dialog/dialog.tsx

@@ -6,6 +6,7 @@ import { ITDialogProps } from "./dialog.props";
 import useClickOutside from "@/hooks/useClickOutside";
 import ITFormHeader from "@/components/molecules/form-header/form-header";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Modal dialog rendered via React portal with overlay backdrop.
@@ -42,6 +43,7 @@ export default function ITDialog({
   useFormHeader = false,
   fullScreen = false,
 }: ITDialogProps) {
+  const { t } = useITTranslation();
   const modalRef = useRef<HTMLDivElement>(null);
 
   useClickOutside(modalRef, onClose);
@@ -100,6 +102,7 @@ export default function ITDialog({
             <button
               className="absolute top-2 right-2 text-secondary-600 hover:text-secondary-900"
               onClick={onClose}
+              aria-label={t("common.close")}
             >
               <FaRegTimesCircle />
             </button>

package/src/components/organisms/drawer/drawer.tsx

@@ -4,6 +4,7 @@ import { FaTimes } from "react-icons/fa";
 import useClickOutside from "@/hooks/useClickOutside";
 import { useRef } from "react";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Sliding panel drawer from the left or right screen edge.
@@ -35,6 +36,7 @@ export default function ITDrawer({
   className,
   style,
 }: ITDrawerProps) {
+  const { t } = useITTranslation();
   const panelRef = useRef<HTMLDivElement>(null);
   useClickOutside(panelRef, onClose);
 
@@ -58,6 +60,7 @@ export default function ITDrawer({
                 <ITText as="h2" className="text-lg font-bold text-slate-800 dark:text-white">{title}</ITText>
                 <button
                   onClick={onClose}
+                  aria-label={t("common.close")}
                   className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-400 hover:text-slate-600 transition-colors"
                 >
                   <FaTimes size={14} />