@axzydev/axzy_ui_system 1.4.8 → 1.5.1

package/src/components/templates/page/page.props.ts

@@ -21,17 +21,17 @@ export interface ITPageProps {
   loading?: boolean;
   /** Error message to display. Shows an error state with retry button when provided. */
   error?: string | null;
-  /** Custom title for the error state. Default: "Error". */
+  /** Custom title for the error state. Default: i18n `common.error` ("Error"). */
   errorTitle?: string;
-  /** Label for the retry button in the error state. Default: "Reintentar". */
+  /** Label for the retry button in the error state. Default: i18n `common.retry` ("Reintentar"). */
   errorActionLabel?: string;
   /** Callback fired when the retry button is clicked in the error state. */
   onRetry?: () => void;
   /** Whether the page is in an empty state. Shows a placeholder when true. */
   empty?: boolean;
-  /** Custom title for the empty state. Default: "Sin datos". */
+  /** Custom title for the empty state. Default: i18n `common.noData` ("Sin datos"). */
   emptyTitle?: string;
-  /** Custom description for the empty state. */
+  /** Custom description for the empty state. Default: i18n `common.empty` ("No hay información para mostrar"). */
   emptyDescription?: string;
   /** Custom action element for the empty state. */
   emptyAction?: ReactNode;

package/src/components/templates/page/page.tsx

@@ -5,6 +5,7 @@ import ITSkeleton from "@/components/atoms/skeleton/skeleton";
 import ITEmptyState from "@/components/molecules/empty-state/empty-state";
 import ITButton from "@/components/atoms/button/button";
 import ITStack from "@/components/atoms/stack/stack";
+import { useITTranslation } from "@/i18n";
 
 const hasHeader = (props: ITPageProps) =>
   !!(props.title || props.description || props.breadcrumbs || props.actions || props.backAction || props.icon);
@@ -51,6 +52,7 @@ const renderHeader = (props: ITPageProps) => {
  * ```
  */
 export default function ITPage(props: ITPageProps) {
+  const { t } = useITTranslation();
   const {
     loading = false,
     error = null,
@@ -95,12 +97,12 @@ export default function ITPage(props: ITPageProps) {
       <div className={wrapperClass}>
         {renderHeader(props)}
         <ITEmptyState
-          title={errorTitle || "Error"}
+          title={errorTitle || t("common.error")}
           description={error}
           action={
             onRetry ? (
               <ITButton
-                label={errorActionLabel || "Reintentar"}
+                label={errorActionLabel || t("common.retry")}
                 onClick={onRetry}
                 size="sm"
               />
@@ -116,8 +118,8 @@ export default function ITPage(props: ITPageProps) {
       <div className={wrapperClass}>
         {renderHeader(props)}
         <ITEmptyState
-          title={emptyTitle || "Sin datos"}
-          description={emptyDescription || "No hay información para mostrar"}
+          title={emptyTitle || t("common.noData")}
+          description={emptyDescription || t("common.empty")}
           action={emptyAction}
         />
       </div>

package/src/components/theme-provider/themeProvider.tsx

@@ -9,6 +9,7 @@ import ITInput from "@/components/atoms/input/input";
 import ITSegmentedControl from "@/components/atoms/segmented-control/segmented-control";
 import ITDivider from "@/components/atoms/divider/divider";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 // ============================================================================
 // DEFAULT PALETTE & PRESETS CONFIG
@@ -66,6 +67,15 @@ const shadowLevel = (level: number | undefined): Record<string, string> | null =
 
 import { DEFAULT_PALETTE, PRESETS } from "./themePresets";
 
+/** Mapea el nombre de un preset integrado a su key de i18n (`themeProvider.presets.*`). */
+const PRESET_I18N_KEY: Record<string, string> = {
+  "Midnight Indigo 🌌": "themeProvider.presets.midnightIndigo",
+  "Coral Reef 🪸": "themeProvider.presets.coralReef",
+  "Oceanic Teal 🌊": "themeProvider.presets.oceanicTeal",
+  "Golden Hour ☀️": "themeProvider.presets.goldenHour",
+  "Deep Forest 🌲": "themeProvider.presets.deepForest",
+};
+
 // ============================================================================
 // CONTEXT & PROVIDER
 // ============================================================================
@@ -145,6 +155,7 @@ export default function ITThemeProvider({
   shadow,
   appearance = "soft",
 }: ITThemeProviderProps) {
+  const { t } = useITTranslation();
   const [palette, setPaletteState] = useState<ITThemePalette>(() => {
     const basePalette = {
       ...DEFAULT_PALETTE,
@@ -1587,13 +1598,13 @@ export default function ITThemeProvider({
               handleDeletePreset(preset.name, e);
             }}
             className="absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 p-0.5 rounded-md hover:bg-danger-500/10 hover:text-danger-500 text-slate-400 dark:text-slate-500 cursor-pointer transition-all z-10"
-            title="Eliminar"
+            title={t("themeProvider.designer.deletePreset")}
           >
             <MdClose size={12} />
           </span>
         )}
         <ITText as="span" className="text-xs font-semibold truncate w-full mb-1.5 pr-4 text-slate-700 dark:text-slate-300">
-          {preset.name}
+          {PRESET_I18N_KEY[preset.name] ? t(PRESET_I18N_KEY[preset.name]) : preset.name}
         </ITText>
         <div className="flex gap-1">
           {(["primary", "secondary", "ternary", "success"] as const).map((c) => (
@@ -1630,7 +1641,7 @@ export default function ITThemeProvider({
           onClick={() => setIsOpen((prev) => !prev)}
           className="it-theme-fab it-theme-bounce"
           style={{ backgroundColor: "var(--color-primary)" }}
-          aria-label="Configurar Paleta de Colores"
+          aria-label={t("themeProvider.fab.ariaLabel")}
         >
           <MdPalette size={28} />
         </button>
@@ -1640,7 +1651,7 @@ export default function ITThemeProvider({
         <ITDialog
           isOpen={isOpen}
           onClose={() => setIsOpen(false)}
-          title="Diseñador de Temas"
+          title={t("themeProvider.designer.title")}
           useFormHeader
         >
           <div className="flex gap-6 h-[580px]">
@@ -1648,7 +1659,7 @@ export default function ITThemeProvider({
             <div className="w-64 flex-shrink-0 flex flex-col gap-5 overflow-y-auto pr-1">
               <div>
                 <ITText as="span" className="text-[11px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2.5 block">
-                  Apariencia
+                  {t("themeProvider.designer.appearance")}
                 </ITText>
                 <ITSegmentedControl
                   options={[
@@ -1665,7 +1676,7 @@ export default function ITThemeProvider({
               <div>
                 <div className="flex items-center justify-between mb-2.5">
                   <ITText as="span" className="text-[11px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500">
-                    Presets
+                    {t("themeProvider.designer.presets")}
                   </ITText>
                 </div>
                 <div className="grid grid-cols-2 gap-2">
@@ -1678,7 +1689,7 @@ export default function ITThemeProvider({
               {customPresets.length > 0 && (
                 <div>
                   <ITText as="span" className="text-[11px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2.5 block">
-                    Mis Temas
+                    {t("themeProvider.designer.myThemes")}
                   </ITText>
                   <div className="flex flex-col gap-1.5">
                     {customPresets.map((preset) => (
@@ -1693,7 +1704,7 @@ export default function ITThemeProvider({
                 <div className="flex flex-col gap-2 p-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900/50">
                   <ITInput
                     name="presetName"
-                    placeholder="Nombre del tema..."
+                    placeholder={t("themeProvider.designer.presetNamePlaceholder")}
                     value={newPresetName}
                     onChange={(e: any) => setNewPresetName(e.target.value)}
                     containerClassName="mb-0"
@@ -1708,7 +1719,7 @@ export default function ITThemeProvider({
                   />
                   <div className="flex gap-2">
                     <ITButton
-                      label="Guardar"
+                      label={t("themeProvider.designer.save")}
                       color="primary"
                       onClick={handleSavePreset}
                       disabled={!newPresetName.trim()}
@@ -1716,7 +1727,7 @@ export default function ITThemeProvider({
                       className="flex-1"
                     />
                     <ITButton
-                      label="X"
+                      label={t("themeProvider.designer.cancelSave")}
                       variant="ghost"
                       onClick={() => {
                         setIsSavingPreset(false);
@@ -1732,7 +1743,7 @@ export default function ITThemeProvider({
                 <ITButton
                   variant="outlined"
                   icon={<MdPalette size={14} />}
-                  label="Guardar actual"
+                  label={t("themeProvider.designer.saveCurrent")}
                   onClick={() => setIsSavingPreset(true)}
                   size="sm"
                 />
@@ -1742,7 +1753,7 @@ export default function ITThemeProvider({
                 variant="outlined"
                 color="danger"
                 icon={<MdRefresh size={14} />}
-                label="Restaurar default"
+                label={t("themeProvider.designer.reset")}
                 onClick={resetTheme}
                 size="sm"
               />
@@ -1757,7 +1768,7 @@ export default function ITThemeProvider({
                 items={[
                   {
                     id: "brand",
-                    label: "Marca",
+                    label: t("themeProvider.tabs.brand"),
                     content: (
                       <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[480px] overflow-y-auto pr-2 mt-3">
                         {[
@@ -1777,7 +1788,7 @@ export default function ITThemeProvider({
                   },
                   {
                     id: "layout",
-                    label: "Nav & Sidebar",
+                    label: t("themeProvider.tabs.layout"),
                     content: (
                       <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[480px] overflow-y-auto pr-2 mt-3">
                         {[
@@ -1793,7 +1804,7 @@ export default function ITThemeProvider({
                   },
                   {
                     id: "tables",
-                    label: "Tablas",
+                    label: t("themeProvider.tabs.tables"),
                     content: (
                       <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[480px] overflow-y-auto pr-2 mt-3">
                         {[
@@ -1813,10 +1824,10 @@ export default function ITThemeProvider({
 
               <div className="flex items-center justify-end gap-3 mt-auto pt-4 border-t border-slate-100 dark:border-slate-800">
                 <ITText as="p" className="text-[11px] text-slate-400 mr-auto">
-                  Los cambios se guardan automáticamente
+                  {t("themeProvider.designer.autosave")}
                 </ITText>
                 <ITButton
-                  label="Cerrar"
+                  label={t("themeProvider.designer.close")}
                   color="primary"
                   onClick={() => setIsOpen(false)}
                   size="sm"

package/src/dev.css

@@ -1,12 +1,70 @@
-@import "tailwindcss";
+/* `index.css` ya importa Tailwind: importarlo otra vez aquí generaba una
+   segunda copia del tema por defecto (~154 KB) que, al emitirse después,
+   pisaba `--font-sans/--font-mono` y dejaba la hoja en las fuentes del sistema. */
 @import "./index.css";
 
+/* ──────────────────────────────────────────────
+   DESIGN TOKENS — SANDBOX & PORTFOLIO (dev.css)
+   See DESIGN.md. Dev-only: never reach dist/index.css.
+   ────────────────────────────────────────────── */
+
+/* La tipografía se declara DOS veces a propósito:
+   1) en `@theme`, para que Tailwind genere las utilidades `font-sans/mono/display`;
+   2) en un `:root` SIN CAPA, porque el tema por defecto de Tailwind vive en
+      `@layer theme` y, al emitirse después, pisaba estos valores (la hoja
+      acababa con las fuentes del sistema). El CSS sin capa gana a cualquier capa. */
+@theme {
+  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", sans-serif;
+  --font-display: "Bricolage Grotesque", "IBM Plex Sans", ui-sans-serif,
+    system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+:root {
+  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", sans-serif;
+  --font-display: "Bricolage Grotesque", "IBM Plex Sans", ui-sans-serif,
+    system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  /* La prosa del sandbox sigue a `--font-sans` (preflight usa esta variable). */
+  --default-font-family: var(--font-sans);
+}
+
 /* ──────────────────────────────────────────────
    SANDBOX-ONLY ANIMATIONS (dev.css)
    Never shipped: only src/main.tsx imports this file and `pnpm bundle`
    builds from src/index.ts, so these never reach dist/index.css.
    ────────────────────────────────────────────── */
 
+/* Smooth in-page navigation for the portfolio anchors. */
+html {
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+/* Staggered entrance: fade + translateY. `--it-delay` offsets each item. */
+@keyframes it-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.it-reveal {
+  animation: it-reveal 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+  animation-delay: var(--it-delay, 0ms);
+}
+
 @keyframes it-landing-rise {
   from {
     opacity: 0;
@@ -53,7 +111,8 @@
 
 @media (prefers-reduced-motion: reduce) {
   .it-landing-rise,
-  .it-landing-float {
+  .it-landing-float,
+  .it-reveal {
     animation: none;
   }
 }

package/src/global.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Constantes inyectadas por Vite en las superficies dev (`define` en
+ * `vite.config.ts` y `vite.app.config.ts`).
+ */
+
+/**
+ * Versión de `package.json`, para no hardcodear el sello del sandbox (el badge
+ * decía `v1.3.0` cuando el paquete iba en 1.4.8).
+ */
+declare const __APP_VERSION__: string;

package/src/i18n/context.ts

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+import { createI18n } from "./translator";
+import type { ITI18nValue } from "./types";
+
+/**
+ * Contexto de i18n. Su valor por defecto es un traductor en español (locale base),
+ * de modo que `useITTranslation()` funciona aunque no haya `ITI18nProvider`.
+ */
+export const ITI18nContext = createContext<ITI18nValue>(createI18n());

package/src/i18n/index.ts

@@ -0,0 +1,22 @@
+export { default as ITI18nProvider } from "./provider";
+export { useITTranslation } from "./useITTranslation";
+export { ITI18nContext } from "./context";
+export {
+  createI18n,
+  interpolate,
+  resolveMessages,
+  toDateLocale,
+  toIntlLocale,
+  baseCatalog,
+  DEFAULT_LOCALE,
+} from "./translator";
+export { default as esMessages } from "./locales/es";
+export { default as enMessages } from "./locales/en";
+export type {
+  ITLocale,
+  ITMessages,
+  ITMessagesByLocale,
+  ITI18nOptions,
+  ITI18nValue,
+  ITI18nProviderProps,
+} from "./types";

package/src/i18n/locales/en.ts

@@ -0,0 +1,163 @@
+import type { ITMessages } from "../types";
+
+/**
+ * Catálogo base en inglés. Mantiene exactamente las mismas keys que `es.ts`
+ * (ver `docs/i18n/conventions.md`); si falta una key, se usa el texto en español.
+ */
+const en: ITMessages = {
+  // ---------------------------------------------------------------- common
+  "common.loading": "Loading...",
+  "common.loadingOptions": "Loading options...",
+  "common.loadError": "Couldn't load",
+  "common.search": "Search...",
+  "common.clear": "Clear",
+  "common.clearSelection": "Clear selection",
+  "common.all": "All",
+  "common.true": "True",
+  "common.false": "False",
+  "common.back": "Back",
+  "common.next": "Next",
+  "common.finish": "Finish",
+  "common.accept": "OK",
+  "common.confirm": "Confirm",
+  "common.cancel": "Cancel",
+  "common.close": "Close",
+  "common.dismiss": "Dismiss",
+  "common.closeNotification": "Close notification",
+  "common.menu": "Menu",
+  "common.userAvatar": "Current user",
+  "common.retry": "Retry",
+  "common.error": "Error",
+  "common.noData": "No data",
+  "common.empty": "Nothing to show",
+  "common.noResults": "No results found",
+  "common.delete": "Delete",
+  "common.copy": "Copy",
+
+  // ------------------------------------------------------------- validation
+  "field.required": "This field is required",
+
+  // ------------------------------------------------------------------ atoms
+  "image.fallbackAlt": "Fallback",
+  "chip.remove": "Remove {label}",
+  "input.invalidFormat": "Invalid format",
+  "input.showPassword": "Show password",
+  "input.hidePassword": "Hide password",
+
+  // -------------------------------------------------------------- molecules
+  "card.imageAlt": "Card image",
+  "select.placeholder": "Select an option",
+  "select.noResults": "No results found",
+  "multiSelect.placeholder": "Select options",
+  "chipInput.placeholder": "Type and press Enter",
+  "chipInput.maxTags": "Maximum {count} tags",
+  "chipInput.duplicate": "Duplicate tag",
+  "dropdownMenu.open": "Open menu",
+  "lineBarChart.lineLabel": "Series A",
+  "lineBarChart.barLabel": "Series B",
+  "datePicker.invalid": "Invalid date",
+  "datePicker.placeholder": "dd/mm/yyyy",
+  "datePicker.rangePlaceholder": "dd/mm/yyyy - dd/mm/yyyy",
+  "calendar.today": "Today",
+  "timePicker.accept": "OK",
+  "timePicker.placeholder": "HH:MM",
+  "timePicker.invalid": "Invalid time",
+  "timePicker.hours": "Hours",
+  "timePicker.minutes": "Minutes",
+  "table.showAll": "Show all",
+  "table.filterTrue": "Filter true only",
+  "table.filterFalse": "Filter false only",
+  "table.sortBy": "Sort by {label}",
+  "table.filterToggle": "{action} for {label}",
+  "table.viewTable": "Table",
+  "table.viewCards": "Cards",
+  "table.noResults": "No results found",
+  "table.adjustFilters": "Try adjusting the filters",
+  "table.loading": "Loading data...",
+  "table.selectAll": "Select all",
+  "wysiwyg.bold": "Bold",
+  "wysiwyg.italic": "Italic",
+  "wysiwyg.underline": "Underline",
+  "wysiwyg.highlight": "Highlight",
+  "wysiwyg.bulletList": "Bulleted list",
+  "wysiwyg.numberedList": "Numbered list",
+  "wysiwyg.clearFormat": "Clear formatting",
+  "pagination.itemsPerPage": "Show",
+  "pagination.of": "of",
+  "breadcrumbs.aria": "Breadcrumb",
+  "pageHeader.back": "Back",
+  "pagination.showing": "Showing {from}-{to} of {total}",
+  "pagination.page": "Page {page}",
+  "pagination.aria": "Pagination",
+  "pagination.previous": "Previous page",
+  "pagination.next": "Next page",
+  "stepper.stepOf": "Step {current} of {total}",
+  "stepper.stepAria": "Step {n} {label}",
+
+  // -------------------------------------------------------------- organisms
+  "confirmDialog.title": "Confirm action",
+  "confirmDialog.message": "Are you sure you want to continue?",
+  "dropfile.upload": "Upload file",
+  "dropfile.status.pending": "Pending",
+  "dropfile.status.uploading": "Uploading...",
+  "dropfile.status.uploaded": "Uploaded",
+  "dropfile.status.error": "Error",
+  "dropfile.dropHere": "Drop here!",
+  "dropfile.clickOrDrag": "Click or drag",
+  "dropfile.imageLoaded": "Image loaded",
+  "dropfile.noPreview": "No preview",
+  "dropfile.previewAlt": "Preview",
+  "dropfile.fileTypeNotAllowed": "File type not allowed.",
+  "dropfile.fileLoaded": "File uploaded",
+  "sidebar.notifications": "Notifications",
+  "sidebar.navAria": "Library components",
+  "sidebar.noSubmenu": "No submenu",
+  // ---------------------------------------------------------------- sandbox
+  "searchTable.searchPlaceholder": "Search all fields...",
+  "searchTable.showing": "Showing {from}-{to} of {total} results",
+  "searchTable.emptySearch": "No results for your search",
+  "searchTable.empty": "No results found",
+  "searchTable.showLabel": "Show:",
+  "searchTable.pageOf": "Page {current} of {total}",
+  "searchTable.prev": "Previous page",
+  "searchTable.next": "Next page",
+  "searchTable.sort": "Sort",
+  "searchTable.sortAsc": "Asc ↑",
+  "searchTable.sortDesc": "Desc ↓",
+  "searchTable.clearSearch": "Clear search",
+  "searchTable.showingCount": "Showing {from} of {total} results",
+  "searchTable.sortTable": "Sort table",
+  "searchTable.sortAria": "Sort table {direction}",
+  "searchTable.sortAscending": "ascending",
+  "searchTable.sortDescending": "descending",
+  "formBuilder.arrayField": "Array field: {label}",
+  "formBuilder.loadingOptions": "Loading options...",
+
+  // -------------------------------------------------------- theme provider
+  "themeProvider.fab.ariaLabel": "Configure Color Palette",
+  "themeProvider.designer.title": "Theme Designer",
+  "themeProvider.designer.appearance": "Appearance",
+  "themeProvider.designer.presets": "Presets",
+  "themeProvider.designer.myThemes": "My Themes",
+  "themeProvider.designer.presetNamePlaceholder": "Theme name...",
+  "themeProvider.designer.save": "Save",
+  "themeProvider.designer.cancelSave": "X",
+  "themeProvider.designer.saveCurrent": "Save current",
+  "themeProvider.designer.reset": "Reset to default",
+  "themeProvider.designer.autosave": "Changes are saved automatically",
+  "themeProvider.designer.close": "Close",
+  "themeProvider.designer.deletePreset": "Delete",
+  "themeProvider.tabs.brand": "Brand",
+  "themeProvider.tabs.layout": "Nav & Sidebar",
+  "themeProvider.tabs.tables": "Tables",
+  "themeProvider.mode.light": "Light",
+  "themeProvider.mode.dark": "Dark",
+  "themeProvider.mode.system": "System",
+  "themeProvider.presets.midnightIndigo": "Midnight Indigo 🌌",
+  "themeProvider.presets.coralReef": "Coral Reef 🪸",
+  "themeProvider.presets.oceanicTeal": "Oceanic Teal 🌊",
+  "themeProvider.presets.goldenHour": "Golden Hour ☀️",
+  "themeProvider.presets.deepForest": "Deep Forest 🌲",
+};
+
+export default en;