@axzydev/axzy_ui_system 1.4.8 → 1.5.1

package/src/components/molecules/chip-input/chip-input.tsx

@@ -5,6 +5,7 @@ import { theme } from "@/theme/theme";
 import { inputFieldStyle } from "@/utils/styles";
 import ITChip from "@/components/atoms/chip/chip";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Free-text input that turns entered values into removable tags (chips).
@@ -24,7 +25,7 @@ import ITText from "@/components/atoms/text/text";
 export default function ITChipInput({
   name,
   label,
-  placeholder = "Escribe y presiona Enter",
+  placeholder,
   value,
   onChange,
   onBlur,
@@ -41,6 +42,7 @@ export default function ITChipInput({
   helpText,
   className,
 }: ITChipInputProps) {
+  const { t } = useITTranslation();
   const [inputValue, setInputValue] = useState("");
   const [localTouched, setLocalTouched] = useState(false);
   const [localError, setLocalError] = useState<string | undefined>(undefined);
@@ -53,10 +55,10 @@ export default function ITChipInput({
   const externalError =
     error !== undefined && error !== false
       ? error === true
-        ? "Este campo es requerido"
+        ? t("field.required")
         : error
       : required && value.length === 0
-      ? "Este campo es requerido"
+      ? t("field.required")
       : undefined;
   const effectiveError = localError || externalError;
   const hasError = isTouched && !!effectiveError;
@@ -88,11 +90,11 @@ export default function ITChipInput({
     const tag = raw.trim();
     if (!tag) return;
     if (maxTags !== undefined && value.length >= maxTags) {
-      setLocalError(`Máximo ${maxTags} etiquetas`);
+      setLocalError(t("chipInput.maxTags", { count: maxTags }));
       return;
     }
     if (!allowDuplicates && value.includes(tag)) {
-      setLocalError("Etiqueta duplicada");
+      setLocalError(t("chipInput.duplicate"));
       return;
     }
     const validationError = validate?.(tag);
@@ -107,7 +109,7 @@ export default function ITChipInput({
 
   const removeTag = (tag: string) => {
     if (disabled) return;
-    onChange?.(value.filter((t) => t !== tag));
+    onChange?.(value.filter((item) => item !== tag));
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -188,7 +190,7 @@ export default function ITChipInput({
           onFocus={() => setIsFocused(true)}
           onBlur={handleBlur}
           disabled={disabled}
-          placeholder={value.length === 0 ? placeholder : ""}
+          placeholder={value.length === 0 ? (placeholder ?? t("chipInput.placeholder")) : ""}
           autoComplete="off"
           className="flex-1 min-w-[100px] bg-transparent outline-none border-none text-sm text-secondary-900 dark:text-slate-100"
           style={{ padding: 0, fontSize: inputFieldStyle(inputTheme, size).fontSize }}

package/src/components/molecules/date-picker/datePicker.tsx

@@ -8,6 +8,7 @@ import ITInput from "@/components/atoms/input/input";
 import { ITDatePickerProps } from "./date-picker.props";
 import { useFloatingPanel } from "@/hooks/useFloatingPanel";
 import { theme } from "@/theme/theme";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Date picker component with single-date and date-range modes.
@@ -58,6 +59,7 @@ export default function ITDatePicker({
   maxDate,
   range = false,
 }: ITDatePickerProps) {
+  const { t, formatDate: formatDateLocale } = useITTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState("");
   const [isValidDate, setIsValidDate] = useState(true);
@@ -171,13 +173,11 @@ export default function ITDatePicker({
   };
 
   const formatDate = (date: Date) =>
-    date
-      .toLocaleDateString("es-ES", {
-        day: "2-digit",
-        month: "2-digit",
-        year: "numeric",
-      })
-      .replace(/\//g, "/");
+    formatDateLocale(date, {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
 
   const validateDate = (dateString: string) => {
     const regex = /^(\d{2})\/(\d{2})\/(\d{4})$/;
@@ -266,7 +266,7 @@ export default function ITDatePicker({
         name={name}
         type="text"
         label={label}
-        placeholder={placeholder}
+        placeholder={placeholder ?? (range ? t("datePicker.rangePlaceholder") : t("datePicker.placeholder"))}
         value={inputValue}
         onChange={handleInputChange}
         onBlur={handleInputBlur}
@@ -284,7 +284,7 @@ export default function ITDatePicker({
         disabled={disabled}
         required={required}
         touched={touched}
-        error={!isValidDate ? "Fecha inválida" : error}
+        error={!isValidDate ? t("datePicker.invalid") : error}
         onClick={handleIconClick}
       />
 

package/src/components/molecules/dropdown-menu/dropdown-menu.props.ts

@@ -26,7 +26,7 @@ export interface ITDropdownMenuProps {
   items: ITDropdownMenuItem[];
   /** Custom trigger content. Defaults to a vertical ellipsis icon. */
   trigger?: ReactNode;
-  /** Accessible label for the trigger button. @default "Abrir menú" */
+  /** Accessible label for the trigger button. @default i18n `dropdownMenu.open` ("Abrir menú") */
   triggerLabel?: string;
   /** Placement of the menu relative to the trigger. Valid values: `"bottom-start"`, `"bottom-end"`, `"top-start"`, `"top-end"`. @default "bottom-end" */
   placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";

package/src/components/molecules/dropdown-menu/dropdown-menu.tsx

@@ -5,6 +5,7 @@ import { FaEllipsisV } from "react-icons/fa";
 import { ITDropdownMenuProps } from "./dropdown-menu.props";
 import { useFloatingPanel } from "@/hooks/useFloatingPanel";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Action menu with keyboard navigation and ARIA menu semantics.
@@ -24,13 +25,15 @@ import ITText from "@/components/atoms/text/text";
 export default function ITDropdownMenu({
   items,
   trigger,
-  triggerLabel = "Abrir menú",
+  triggerLabel,
   placement = "bottom-end",
   onSelect,
   disabled = false,
   className,
   menuClassName,
 }: ITDropdownMenuProps) {
+  const { t } = useITTranslation();
+  const resolvedTriggerLabel = triggerLabel ?? t("dropdownMenu.open");
   const [isOpen, setIsOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
 
@@ -153,7 +156,7 @@ export default function ITDropdownMenu({
         type="button"
         aria-haspopup="menu"
         aria-expanded={isOpen}
-        aria-label={triggerLabel}
+        aria-label={resolvedTriggerLabel}
         disabled={disabled}
         onClick={() => (isOpen ? close() : open())}
         onKeyDown={handleTriggerKeyDown}
@@ -174,7 +177,7 @@ export default function ITDropdownMenu({
             ref={panelRef}
             data-it-floating="true"
             role="menu"
-            aria-label={triggerLabel}
+            aria-label={resolvedTriggerLabel}
             style={panelStyle}
             onKeyDown={handleMenuKeyDown}
             className={clsx(

package/src/components/molecules/field/field.tsx

@@ -2,6 +2,7 @@ import clsx from "clsx";
 import { ITFieldProps } from "./field.props";
 import { inputError, inputLabel } from "@/utils/styles";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Form-field wrapper that standardizes label, required marker, helper text,
@@ -26,8 +27,9 @@ export default function ITField({
   labelClassName,
   contentClassName,
 }: ITFieldProps) {
+  const { t } = useITTranslation();
   const hasError = Boolean(error);
-  const message = typeof error === "string" ? error : hasError ? "Este campo es requerido" : undefined;
+  const message = typeof error === "string" ? error : hasError ? t("field.required") : undefined;
 
   return (
     <div className={clsx("flex flex-col gap-1.5", className)}>

package/src/components/molecules/form-header/form-header.tsx

@@ -3,6 +3,7 @@ import { ITFormHeaderProps } from "./form-header.props";
 import { useITThemeSafe } from "@/theme/theme-context";
 import { getContrastTextColor } from "@/utils/color.utils";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Colored header bar for modals and forms with an optional close button.
@@ -21,6 +22,7 @@ export default function ITFormHeader({
   className = "",
 }: ITFormHeaderProps) {
   const themeContext = useITThemeSafe();
+  const { t } = useITTranslation();
 
   const isDarkMode = themeContext?.resolvedTheme === "dark";
   const palette = themeContext?.palette;
@@ -38,7 +40,7 @@ export default function ITFormHeader({
           onClick={onClose}
           className={`absolute right-4 ${textColorClass} hover:opacity-80 transition-colors duration-200 p-1 rounded-full`}
           style={{ color: "inherit" }}
-          aria-label="Cerrar"
+          aria-label={t("common.close")}
         >
           <FaTimes className="w-4 h-4" />
         </button>

package/src/components/molecules/line-bar-chart/line-bar-chart.props.ts

@@ -11,9 +11,9 @@ export interface ITLineBarChartProps {
   data: ITLineBarDatum[];
   /** Etiqueta accesible del gráfico. */
   ariaLabel: string;
-  /** Nombre de la serie de la línea (leyenda y tooltip). */
+  /** Nombre de la serie de la línea (leyenda y tooltip). @default i18n `lineBarChart.lineLabel` ("Serie A") */
   lineLabel?: string;
-  /** Nombre de la serie de barras (leyenda y tooltip). */
+  /** Nombre de la serie de barras (leyenda y tooltip). @default i18n `lineBarChart.barLabel` ("Serie B") */
   barLabel?: string;
   /** Color de la línea (por defecto el verde de la casa). */
   lineColor?: string;

package/src/components/molecules/line-bar-chart/line-bar-chart.tsx

@@ -1,11 +1,6 @@
 import { useId, useMemo, useState } from "react";
 import type { ITLineBarChartProps } from "./line-bar-chart.props";
-
-/** Número compacto para los ejes (`104 k`). */
-const compact = (value: number): string =>
-  new Intl.NumberFormat("es-MX", { notation: "compact", maximumFractionDigits: 1 }).format(value);
-
-const plain = (value: number): string => new Intl.NumberFormat("es-MX").format(value);
+import { useITTranslation } from "@/i18n";
 
 /**
  * Barras + línea en SVG puro (sin librería de gráficas). Pensado para comparar
@@ -17,15 +12,25 @@ const plain = (value: number): string => new Intl.NumberFormat("es-MX").format(v
 export function ITLineBarChart({
   data,
   ariaLabel,
-  lineLabel = "Serie A",
-  barLabel = "Serie B",
+  lineLabel,
+  barLabel,
   lineColor = "#10b981",
   barColor = "#3b82f6",
   height = 240,
-  formatValue = plain,
-  formatAxis = compact,
+  formatValue,
+  formatAxis,
   className = "",
 }: ITLineBarChartProps) {
+  const { t, formatNumber } = useITTranslation();
+  const resolvedLineLabel = lineLabel ?? t("lineBarChart.lineLabel");
+  const resolvedBarLabel = barLabel ?? t("lineBarChart.barLabel");
+  /** Número compacto para los ejes (`104 k`). */
+  const resolvedFormatAxis =
+    formatAxis ??
+    ((value: number) =>
+      formatNumber(value, { notation: "compact", maximumFractionDigits: 1 }));
+  const resolvedFormatValue = formatValue ?? ((value: number) => formatNumber(value));
+
   const gradientId = useId().replace(/[:]/g, "");
   const [hover, setHover] = useState<number | null>(null);
 
@@ -93,7 +98,7 @@ export function ITLineBarChart({
               strokeDasharray={i === 0 ? undefined : "3 4"}
             />
             <text x={padding.left - 8} y={y(value) + 3} textAnchor="end" fontSize={10} fill="#94a3b8">
-              {formatAxis(Math.round(value))}
+              {resolvedFormatAxis(Math.round(value))}
             </text>
           </g>
         ))}
@@ -153,10 +158,10 @@ export function ITLineBarChart({
         >
           <p className="text-[10px] font-semibold" style={{ color: "#e2e8f0" }}>{active.label}</p>
           <p className="text-[11px] tabular-nums" style={{ color: lineColor }}>
-            {lineLabel}: {formatValue(active.line)}
+            {resolvedLineLabel}: {resolvedFormatValue(active.line)}
           </p>
           <p className="text-[11px] tabular-nums" style={{ color: "#93c5fd" }}>
-            {barLabel}: {formatValue(active.bar)}
+            {resolvedBarLabel}: {resolvedFormatValue(active.bar)}
           </p>
         </div>
       )}
@@ -164,11 +169,11 @@ export function ITLineBarChart({
       <ul className="flex flex-wrap items-center gap-4 text-[11px]" style={{ color: "#475569" }}>
         <li>
           <span className="h-2.5 w-2.5 rounded-sm" style={{ background: lineColor }} aria-hidden />
-          {lineLabel}
+          {resolvedLineLabel}
         </li>
         <li>
           <span className="h-2.5 w-2.5 rounded-sm" style={{ background: barColor }} aria-hidden />
-          {barLabel}
+          {resolvedBarLabel}
         </li>
       </ul>
     </div>

package/src/components/molecules/masked-input/masked-input.tsx

@@ -2,6 +2,7 @@ import React, { useRef, useState, useMemo } from "react";
 import clsx from "clsx";
 import ITInput from "@/components/atoms/input/input";
 import { ITMaskedInputProps } from "./masked-input.props";
+import { useITTranslation } from "@/i18n";
 
 type Token = "9" | "A" | "a" | "x" | "*";
 
@@ -157,6 +158,7 @@ export default function ITMaskedInput({
   iconRight,
   autoFocus = false,
 }: ITMaskedInputProps) {
+  const { t } = useITTranslation();
   const containerRef = useRef<HTMLDivElement>(null);
   const rawRef = useRef<string>(value ?? "");
   const isControlled = value !== undefined;
@@ -215,7 +217,7 @@ export default function ITMaskedInput({
   const resolvedError = invalidPattern
     ? typeof error === "string"
       ? error
-      : "Formato inválido"
+      : t("input.invalidFormat")
     : error;
 
   return (

package/src/components/molecules/multi-select/multi-select.tsx

@@ -8,6 +8,7 @@ import { useFloatingPanel } from "@/hooks/useFloatingPanel";
 import { inputFieldStyle } from "@/utils/styles";
 import ITChip from "@/components/atoms/chip/chip";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Multi-value select with searchable dropdown, removable chips, and keyboard navigation.
@@ -39,7 +40,7 @@ import ITText from "@/components/atoms/text/text";
 export default function ITMultiSelect({
   name,
   label,
-  placeholder = "Selecciona opciones",
+  placeholder,
   options,
   value,
   onChange,
@@ -57,10 +58,11 @@ export default function ITMultiSelect({
   searchable = true,
   onSearch,
   isLoading = false,
-  noResultsMessage = "No se encontraron resultados",
+  noResultsMessage,
   renderOption,
   className,
 }: ITMultiSelectProps) {
+  const { t } = useITTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [isFocused, setIsFocused] = useState(false);
@@ -110,13 +112,13 @@ export default function ITMultiSelect({
   const effectiveError =
     error !== undefined && error !== false
       ? error === true
-        ? "Este campo es requerido"
+        ? t("field.required")
         : error
       : required && isEmpty
-      ? "Este campo es requerido"
+      ? t("field.required")
       : undefined;
   const hasError = isTouched && !!effectiveError;
-  const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
+  const errorMessage = typeof effectiveError === "string" ? effectiveError : t("field.required");
 
   const getControlStyle = (): React.CSSProperties => {
     const style = inputFieldStyle(inputTheme, size, { width: "100%", cursor: "text" });
@@ -284,7 +286,7 @@ export default function ITMultiSelect({
             onBlur={handleBlur}
             disabled={disabled}
             readOnly={readOnly || !searchable}
-            placeholder={selectedOptions.length === 0 ? placeholder : ""}
+            placeholder={selectedOptions.length === 0 ? (placeholder ?? t("multiSelect.placeholder")) : ""}
             autoComplete="off"
             aria-autocomplete="list"
             aria-activedescendant={activeIndex >= 0 ? `it-multiselect-opt-${activeIndex}` : undefined}
@@ -298,8 +300,8 @@ export default function ITMultiSelect({
             ) : showClear ? (
               <button
                 type="button"
-                aria-label="Limpiar selección"
-                title="Limpiar selección"
+                aria-label={t("common.clearSelection")}
+                title={t("common.clearSelection")}
                 onMouseDown={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
@@ -370,7 +372,7 @@ export default function ITMultiSelect({
                   })
                 ) : (
                   <ITText as="div" className="px-4 py-6 text-sm text-center text-secondary-500 italic">
-                    {isLoading ? "Cargando..." : noResultsMessage}
+                    {isLoading ? t("common.loading") : (noResultsMessage ?? t("select.noResults"))}
                   </ITText>
                 )}
               </div>
@@ -385,3 +387,4 @@ export default function ITMultiSelect({
     </div>
   );
 }
+

package/src/components/molecules/pagination/pagination.tsx

@@ -5,6 +5,7 @@ import { ITPaginationProps } from "./pagination.props";
 import { theme } from "@/theme/theme";
 import ITSelect from "@/components/molecules/select/select";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 const DOTS = "...";
 
@@ -103,6 +104,7 @@ export default function ITPagination({
   onItemsPerPageChange,
   totalItems,
 }: ITPaginationProps) {
+  const { t } = useITTranslation();
   const paginationRange = usePagination({
     currentPage,
     totalPages,
@@ -151,6 +153,8 @@ export default function ITPagination({
         )}
         onClick={handlePrevious}
         aria-disabled={currentPage === 1}
+        aria-label={t("pagination.previous")}
+        role="button"
       >
         <FaChevronLeft size={12} />
       </div>
@@ -184,7 +188,7 @@ export default function ITPagination({
               ...(isActive ? {} : { "--hover-bg": resolvedHoverBgColor } as React.CSSProperties),
             }}
             onClick={() => onPageChange(pageNumber as number)}
-            title={`Page ${pageNumber}`}
+            title={t("pagination.page", { page: pageNumber })}
           >
             <ITText as="span">{pageNumber}</ITText>
           </ITText>
@@ -201,6 +205,8 @@ export default function ITPagination({
         )}
         onClick={handleNext}
         aria-disabled={currentPage === totalPages}
+        aria-label={t("pagination.next")}
+        role="button"
       >
         <FaChevronRight size={12} />
       </div>
@@ -216,7 +222,7 @@ export default function ITPagination({
       <div className={clsx("flex flex-col sm:flex-row justify-between items-center gap-4 w-full", className)}>
         <div className="flex items-center gap-4 text-sm text-secondary-500">
           <div className="flex items-center gap-2 bg-secondary-50 px-3 py-1 rounded-lg border border-secondary-200">
-            <ITText as="span" className="text-xs font-medium">Mostrar</ITText>
+            <ITText as="span" className="text-xs font-medium">{t("pagination.itemsPerPage")}</ITText>
             <ITSelect
               name="itemsPerPage"
               options={itemsPerPageOptions.map((option) => ({
@@ -236,13 +242,13 @@ export default function ITPagination({
             <>
               <ITText as="span" className="text-secondary-300">|</ITText>
               <ITText as="span" className="text-xs">
-                <ITText as="span" className="font-semibold text-secondary-700">{startItem}</ITText><ITText as="span"> - </ITText><ITText as="span" className="font-semibold text-secondary-700">{endItem}</ITText><ITText as="span"> de </ITText><ITText as="span" className="font-semibold text-secondary-900">{totalItems}</ITText>
+                <ITText as="span" className="font-semibold text-secondary-700">{startItem}</ITText><ITText as="span"> - </ITText><ITText as="span" className="font-semibold text-secondary-700">{endItem}</ITText><ITText as="span"> {t("pagination.of")} </ITText><ITText as="span" className="font-semibold text-secondary-900">{totalItems}</ITText>
               </ITText>
             </>
           )}
         </div>
         
-        <nav aria-label="Pagination">
+        <nav aria-label={t("pagination.aria")}>
           {renderPaginationControls()}
         </nav>
       </div>
@@ -251,7 +257,7 @@ export default function ITPagination({
 
   // Otherwise, render just the standard pagination component
   return (
-    <nav aria-label="Pagination" className={clsx("inline-flex", className)}>
+    <nav aria-label={t("pagination.aria")} className={clsx("inline-flex", className)}>
       {renderPaginationControls()}
     </nav>
   );

package/src/components/molecules/search-select/search-select.tsx

@@ -6,6 +6,7 @@ import { ITSearchSelectProps, ITSearchSelectOption } from "./search-select.props
 import { theme, inputSizeTokens } from "@/theme/theme";
 import { useFloatingPanel } from "@/hooks/useFloatingPanel";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 /**
  * Searchable dropdown select with local client-side filtering and server-side search via API.
@@ -52,7 +53,7 @@ export default function ITSearchSelect({
   name,
   options = [],
   label,
-  placeholder = "Selecciona una opción",
+  placeholder,
   valueField = "value",
   labelField = "label",
   value,
@@ -66,12 +67,13 @@ export default function ITSearchSelect({
   readOnly = false,
   onSearch,
   isLoading = false,
-  noResultsMessage = "No se encontraron resultados",
+  noResultsMessage,
   size = "md",
   renderOption,
   clearable = true,
   onClear,
 }: ITSearchSelectProps) {
+  const { t } = useITTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [isFocused, setIsFocused] = useState(false);
@@ -180,11 +182,11 @@ export default function ITSearchSelect({
   const isEmpty = value === undefined || value === null || String(value).trim() === "";
 
   const effectiveError = error !== undefined && error !== false
-    ? (error === true ? "Este campo es requerido" : error)
-    : (required && isEmpty ? "Este campo es requerido" : undefined);
+    ? (error === true ? t("field.required") : error)
+    : (required && isEmpty ? t("field.required") : undefined);
 
   const hasError = isTouched && !!effectiveError;
-  const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
+  const errorMessage = typeof effectiveError === "string" ? effectiveError : t("field.required");
 
   const showClearButton =
     clearable && !disabled && !readOnly && (searchTerm.length > 0 || !isEmpty);
@@ -249,7 +251,7 @@ export default function ITSearchSelect({
             onBlur={handleInputBlur}
             disabled={disabled}
             readOnly={readOnly}
-            placeholder={placeholder}
+            placeholder={placeholder ?? t("select.placeholder")}
             className="outline-none pr-10"
             style={getInputStyle()}
             autoComplete="off"
@@ -261,8 +263,8 @@ export default function ITSearchSelect({
              {!isLoading && showClearButton && (
                <button
                  type="button"
-                 aria-label="Limpiar"
-                 title="Limpiar"
+                 aria-label={t("common.clear")}
+                 title={t("common.clear")}
                  onMouseDown={(e) => {
                    e.preventDefault();
                    handleClear();
@@ -313,7 +315,7 @@ export default function ITSearchSelect({
                 })
               ) : (
                 <ITText as="div" className="px-4 py-6 text-sm text-center text-secondary-500 italic">
-                  {isLoading ? "Cargando..." : noResultsMessage}
+                  {isLoading ? t("common.loading") : (noResultsMessage ?? t("select.noResults"))}
                 </ITText>
               )}
             </div>

package/src/components/molecules/select/select.tsx

@@ -5,6 +5,7 @@ import { FaAngleDown } from "react-icons/fa";
 import { ITSelectProps } from "./select.props";
 import ITText from "@/components/atoms/text/text";
 import { inputError, inputLabel, inputFieldStyle } from "@/utils/styles";
+import { useITTranslation } from "@/i18n";
 
 export default function ITSelect({
   name,
@@ -24,6 +25,7 @@ export default function ITSelect({
   readOnly = false,
   size = "md",
 }: ITSelectProps) {
+  const { t } = useITTranslation();
   const [isFocused, setIsFocused] = useState(false);
   const [localTouched, setLocalTouched] = useState(false);
 
@@ -34,11 +36,11 @@ export default function ITSelect({
   const isEmpty = value === undefined || value === null || String(value).trim() === "";
 
   const effectiveError = error !== undefined && error !== false
-    ? (error === true ? "Este campo es requerido" : error)
-    : (required && isEmpty ? "Este campo es requerido" : undefined);
+    ? (error === true ? t("field.required") : error)
+    : (required && isEmpty ? t("field.required") : undefined);
 
   const hasError = isTouched && !!effectiveError;
-  const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
+  const errorMessage = typeof effectiveError === "string" ? effectiveError : t("field.required");
 
   const getStyle = () => {
     const style = inputFieldStyle(inputTheme, size, {
@@ -100,7 +102,7 @@ export default function ITSelect({
               )}
               style={getStyle()}
             >
-              <option value="">{placeholder || "Selecciona una opción"}</option>
+              <option value="">{placeholder || t("select.placeholder")}</option>
               {
                 readOnly ? (
                   <option value={value} disabled>

package/src/components/molecules/stepper/stepper.tsx

@@ -5,6 +5,7 @@ import { theme } from "@/theme/theme";
 import ITButton from "@/components/atoms/button/button";
 import { FaChevronLeft, FaChevronRight, FaCheck } from "react-icons/fa";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 /**
  * A step-by-step wizard / progress indicator with animated content transitions,
@@ -35,6 +36,7 @@ export default function ITStepper({
   maxContentHeight = "400px",
   color = "primary",
 }: ITStepperProps) {
+  const { t } = useITTranslation();
   const [direction, setDirection] = useState<"next" | "prev">("next");
   const contentRef = useRef<HTMLDivElement | null>(null);
   const progressRef = useRef<HTMLDivElement | null>(null);
@@ -149,7 +151,7 @@ export default function ITStepper({
                 onClick={() => jumpTo(idx)}
                 disabled={!allowClickToJump && idx !== currentStep}
                 aria-current={isActive ? "step" : undefined}
-                aria-label={`Paso ${idx + 1} ${step.label}`}
+                aria-label={t("stepper.stepAria", { n: idx + 1, label: step.label })}
                 className="flex-1 group"
                 title={step.label}
               >
@@ -214,13 +216,13 @@ export default function ITStepper({
         >
           <div className="flex items-center gap-2">
             <FaChevronLeft />
-            <ITText as="span">Atrás</ITText>
+            <ITText as="span">{t("common.back")}</ITText>
           </div>
         </ITButton>
 
         <div className="flex items-center gap-3">
           <ITText as="div" className="text-sm text-secondary-500 mr-2 hidden sm:block">
-            Paso {currentStep + 1} de {steps.length}
+            {t("stepper.stepOf", { current: currentStep + 1, total: steps.length })}
           </ITText>
           
           <ITButton
@@ -230,7 +232,7 @@ export default function ITStepper({
             onClick={nextStep}
           >
             <div className="flex items-center gap-2">
-              <ITText as="span">{currentStep === steps.length - 1 ? "Finalizar" : "Siguiente"}</ITText>
+              <ITText as="span">{currentStep === steps.length - 1 ? t("common.finish") : t("common.next")}</ITText>
               {currentStep === steps.length - 1 ? <FaCheck /> : <FaChevronRight />}
             </div>
           </ITButton>