@axzydev/axzy_ui_system 1.4.7 → 1.5.0

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.props.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { Column } from "@/components/molecules/table/table.props";
-import { ColumnFilters, TableDensity } from "@/types/table.types";
+import { ColumnFilters, TableDensity, TableDesignProps } from "@/types/table.types";
 
 /** Parameters passed to `fetchData` every time pagination, filters, or sorting change. */
 export interface ITDataTableFetchParams {
@@ -31,7 +31,8 @@ export interface ITDataTableResponse<T> {
   total: number;
 }
 
-export interface ITDataTableProps<T extends Record<string, unknown>> {
+export interface ITDataTableProps<T extends Record<string, unknown>>
+  extends TableDesignProps {
   /**
    * The column configuration array matching ITTable but adapted for Server-Side processing
    */

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 {
@@ -85,13 +86,55 @@ export default function ITDataTable<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,
 }: 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[]>([]);
   const [totalItems, setTotalItems] = useState(0);
   const [isLoading, setIsLoading] = useState(fetchOnMount);
 
+  // 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;
@@ -198,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">
@@ -229,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,
@@ -258,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 (
@@ -280,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={() => {}}
@@ -299,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}
         />
@@ -319,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}
         />
@@ -330,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={() => {}}
@@ -345,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;
@@ -409,6 +456,29 @@ export default function ITDataTable<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={segCtrlClass("table")}>
+        <FaTable size={11} />
+        {t("table.viewTable")}
+      </button>
+      <button onClick={() => setViewMode("cards")} className={segCtrlClass("cards")}>
+        <FaThLarge size={11} />
+        {t("table.viewCards")}
+      </button>
+    </div>
+  );
+
   const tableEl = (
     <table
       className={clsx(
@@ -439,7 +509,8 @@ export default function ITDataTable<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) => {
@@ -455,23 +526,23 @@ export default function ITDataTable<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">
@@ -485,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>
@@ -516,8 +587,10 @@ export default function ITDataTable<T extends Record<string, unknown>>({
                   className={clsx(
                     tableRow,
                     variant === "striped" && absoluteIndex % 2 === 0 && "bg-secondary-50/40 dark:bg-slate-800/20",
-                    onRowClick && !isLoading && tableRowClickable
+                    onRowClick && !isLoading && tableRowClickable,
+                    rowSlot.className
                   )}
+                  style={rowSlot.style}
                   tabIndex={onRowClick && !isLoading ? 0 : undefined}
                   onClick={onRowClick && !isLoading ? handleRowClick(row) : undefined}
                   onKeyDown={onRowClick && !isLoading ? handleRowKeyDown(row) : undefined}
@@ -539,20 +612,20 @@ export default function ITDataTable<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" ? (
@@ -581,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>
@@ -593,10 +666,20 @@ export default function ITDataTable<T extends Record<string, unknown>>({
   );
 
   return (
-    <div ref={rootRef} className={clsx("space-y-4 w-full relative", containerClassName)}>
-      <div className={tableContainer} style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+    <div
+      ref={rootRef}
+      className={clsx("space-y-4 w-full relative", containerSlot.className)}
+      style={{ ...colorVars, ...containerSlot.style }}
+    >
+      <div
+        className={clsx(tableContainer, cardSlot.className)}
+        style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)', ...cardSlot.style }}
+      >
         {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 gap-3">
               {isLoading && (
@@ -604,32 +687,14 @@ export default function ITDataTable<T extends Record<string, unknown>>({
                   {loadingIndicator || <FaSpinner className="animate-spin text-primary-500 text-xl" />}
                 </div>
               )}
-              <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
-                </button>
-                <button onClick={() => setViewMode("cards")} className={segCtrlClass("cards")}>
-                  <FaThLarge size={11} />
-                  Cards
-                </button>
-              </div>
+              {showViewToggle && viewToggle}
             </div>
           </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={segCtrlClass("table")}>
-                <FaTable size={11} />
-                Table
-              </button>
-              <button onClick={() => setViewMode("cards")} className={segCtrlClass("cards")}>
-                <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>
         )}
 
@@ -640,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>
@@ -648,7 +713,7 @@ export default function ITDataTable<T extends Record<string, unknown>>({
           )}
 
           {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}>
               {data.length > 0 ? (
                 data.map((row, i) => (
                   <div
@@ -665,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>
                 )
               )}
@@ -685,7 +750,10 @@ export default function ITDataTable<T extends Record<string, unknown>>({
         </div>
       </div>
 
-      <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/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} />