@axzydev/axzy_ui_system 1.4.8 → 1.5.0

package/src/sandbox/NotFoundShowcase.tsx

@@ -3,6 +3,7 @@ import ITButton from "@/components/atoms/button/button";
 import ITFlex from "@/components/atoms/flex/flex";
 import ITStack from "@/components/atoms/stack/stack";
 import ITText from "@/components/atoms/text/text";
+import { useITTranslation } from "@/i18n";
 
 /** Props for the sandbox 404 page. */
 export interface NotFoundShowcaseProps {
@@ -18,53 +19,67 @@ export interface NotFoundShowcaseProps {
  * Sandbox 404 page rendered when a hash route does not resolve to a page.
  *
  * Shows the attempted path, a friendly message, and buttons to recover.
+ * Follows the blueprint spec: flat surface, 1px border, mono metadata.
  */
 export default function NotFoundShowcase({
   attempted,
   onGoLanding,
   onGoPortfolio,
 }: NotFoundShowcaseProps) {
+  const { t } = useITTranslation();
   return (
     <div className="animate-fadeIn flex min-h-[60vh] items-center justify-center px-4">
-      <ITStack spacing={5} className="w-full max-w-xl text-center items-center">
-        <ITText
-          as="div"
-          className="!text-7xl !font-extrabold !tracking-tight bg-gradient-to-br from-primary-500 via-primary-600 to-purple-600 bg-clip-text text-transparent"
-        >
-          404
-        </ITText>
-
-        <ITStack spacing={2} className="items-center">
-          <ITText as="h1" className="!text-2xl !font-bold text-slate-900 dark:text-white">
-            Ruta no encontrada
-          </ITText>
-          <ITText as="p" className="!text-sm text-slate-500 dark:text-slate-400">
-            No existe una página para este hash. Revisa el enlace o vuelve al inicio.
+      <div className="it-reveal w-full max-w-xl rounded-2xl border border-slate-200 bg-white p-8 text-center dark:border-slate-800 dark:bg-slate-900 sm:p-10">
+        <ITStack spacing={5} className="items-center">
+          <ITText
+            as="p"
+            className="font-mono !text-[11px] !font-medium uppercase !tracking-[0.18em] text-primary-600 dark:text-primary-400"
+          >
+            {t("showcase.notFound.eyebrow")}
           </ITText>
-          <code className="mt-1 max-w-full truncate rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 font-mono text-xs text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">
-            {attempted || "#"}
-          </code>
-        </ITStack>
 
-        <ITFlex gap={3} wrap="wrap" justify="center" align="center">
-          <ITButton
-            variant="filled"
-            color="primary"
-            icon={<FaHome size={13} />}
-            onClick={onGoLanding}
-          >
-            Volver al inicio
-          </ITButton>
-          <ITButton
-            variant="outlined"
-            color="secondary"
-            icon={<FaLayerGroup size={13} />}
-            onClick={onGoPortfolio}
+          <ITText
+            as="div"
+            className="font-display !text-6xl !font-bold -tracking-[0.02em] tabular-nums text-slate-900 dark:text-white"
           >
-            Ver portafolio
-          </ITButton>
-        </ITFlex>
-      </ITStack>
+            404
+          </ITText>
+
+          <ITStack spacing={2} className="items-center">
+            <ITText
+              as="h1"
+              className="font-display !text-2xl !font-bold -tracking-[0.02em] text-slate-900 dark:text-white"
+            >
+              {t("showcase.notFound.title")}
+            </ITText>
+            <ITText as="p" className="!text-sm !leading-relaxed text-slate-500 dark:text-slate-400">
+              {t("showcase.notFound.description")}
+            </ITText>
+            <code className="mt-1 max-w-full truncate rounded-[10px] border border-slate-200 bg-slate-50 px-3 py-1.5 font-mono text-xs text-slate-600 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-300">
+              {attempted || "#"}
+            </code>
+          </ITStack>
+
+          <ITFlex gap={3} wrap="wrap" justify="center" align="center">
+            <ITButton
+              variant="filled"
+              color="primary"
+              icon={<FaHome size={13} />}
+              onClick={onGoLanding}
+            >
+              {t("showcase.notFound.backHome")}
+            </ITButton>
+            <ITButton
+              variant="outlined"
+              color="secondary"
+              icon={<FaLayerGroup size={13} />}
+              onClick={onGoPortfolio}
+            >
+              {t("showcase.landing.viewPortfolio")}
+            </ITButton>
+          </ITFlex>
+        </ITStack>
+      </div>
     </div>
   );
 }

package/src/sandbox/TopbarSearch.tsx

@@ -2,6 +2,7 @@ import type { ChangeEvent } from "react";
 import { FaSearch, FaTimes } from "react-icons/fa";
 import ITButton from "@/components/atoms/button/button";
 import ITInput from "@/components/atoms/input/input";
+import { useITTranslation } from "@/i18n";
 
 /** Props for the sandbox topbar search filter. */
 export interface TopbarSearchProps {
@@ -37,6 +38,7 @@ export default function TopbarSearch({
   pending = false,
   className = "w-full",
 }: TopbarSearchProps) {
+  const { t } = useITTranslation();
   const isActive = value.trim().length > 0;
   const showCount = isActive && !pending;
 
@@ -50,9 +52,9 @@ export default function TopbarSearch({
         <div className="flex-1 min-w-0">
           <ITInput
             name="sandbox-topbar-search"
-            label="Buscar componentes"
+            label={t("sandbox.search.label")}
             labelClassName="sr-only"
-            placeholder="Buscar componente…"
+            placeholder={t("sandbox.search.placeholder")}
             value={value}
             onChange={(event: ChangeEvent<HTMLInputElement>) =>
               onChange(event.target.value)
@@ -68,7 +70,7 @@ export default function TopbarSearch({
             variant="text"
             color="danger"
             size="sm"
-            ariaLabel="Limpiar búsqueda"
+            ariaLabel={t("sandbox.search.clear")}
             onClick={onClear}
             className="flex-shrink-0"
           >
@@ -78,7 +80,7 @@ export default function TopbarSearch({
       </div>
 
       <span role="status" aria-live="polite" className="sr-only">
-        {showCount ? `${resultCount} resultados` : ""}
+        {showCount ? t("sandbox.search.results", { count: resultCount }) : ""}
       </span>
     </form>
   );

package/src/sandbox/controls.tsx

@@ -0,0 +1,180 @@
+/**
+ * Controles de chrome del sandbox: idioma y modo de color.
+ *
+ * Viven aquí (y no en `showcases/`) porque los usan las dos superficies: la
+ * barra del sandbox (`ITTopBar`, en `App.tsx`) y la cabecera del portafolio
+ * (`HomeShowcase` / `ProductoDetalle`).
+ *
+ * No se usa `ITSegmentedControl` de la librería: su opción inactiva queda en
+ * 4.34:1 sobre `slate-100` y falla AA con la paleta por defecto. Estas opciones
+ * van en `slate-600`/`slate-300` (≥ 7:1) y el activo en `primary-700` con texto
+ * blanco (5:1).
+ */
+
+import type { ReactNode } from "react";
+import { FaDesktop, FaMoon, FaSun } from "react-icons/fa";
+import { useITTranslation } from "@/i18n";
+import { useITThemeSafe } from "@/theme/theme-context";
+import { useSandboxLocale } from "./locale";
+
+/** Una opción del control segmentado. */
+export interface OpcionSegmento {
+  /** Valor que emite al pulsarla. */
+  value: string;
+  /** Texto visible. También es el nombre accesible cuando la opción es solo ícono. */
+  label: string;
+  /** Ícono opcional; cuando existe, la opción se pinta cuadrada y solo con ícono. */
+  icono?: ReactNode;
+}
+
+/** Props de `ControlSegmentado`. */
+export interface ControlSegmentadoProps {
+  /** Opciones mutuamente excluyentes. */
+  opciones: OpcionSegmento[];
+  /** Valor activo. */
+  valor: string;
+  /** Se dispara con el valor elegido. */
+  onChange: (value: string) => void;
+  /** Nombre accesible del grupo. */
+  etiqueta: string;
+  /** Clases extra del contenedor. */
+  className?: string;
+  /**
+   * Pinta el texto junto al ícono (en vez de solo el ícono) y reparte el ancho
+   * entre las opciones. Para barras de pestañas; en controles compactos
+   * (cabecera, tema) se deja en `false`.
+   * @default false
+   */
+  conEtiqueta?: boolean;
+}
+
+/**
+ * Grupo de opciones excluyentes en la lengua visual del proyecto: borde de 1px,
+ * mono en mayúsculas y activo relleno del acento.
+ *
+ * @example
+ * ```tsx
+ * <ControlSegmentado
+ *   etiqueta={t("sandbox.language")}
+ *   valor={locale}
+ *   onChange={setLocale}
+ *   opciones={[{ value: "es", label: "ES" }, { value: "en", label: "EN" }]}
+ * />
+ * ```
+ */
+export const ControlSegmentado = ({
+  opciones,
+  valor,
+  onChange,
+  etiqueta,
+  className = "",
+  conEtiqueta = false,
+}: ControlSegmentadoProps) => (
+  <div
+    role="group"
+    aria-label={etiqueta}
+    className={`inline-flex shrink-0 items-center gap-0.5 rounded-[10px] border border-slate-200 bg-white p-0.5 dark:border-slate-800 dark:bg-slate-900 ${className}`}
+  >
+    {opciones.map((opcion) => {
+      const activo = opcion.value === valor;
+      return (
+        <button
+          key={opcion.value}
+          type="button"
+          onClick={() => onChange(opcion.value)}
+          aria-pressed={activo}
+          title={opcion.label}
+          className={`inline-flex h-7 items-center justify-center gap-1.5 rounded-[7px] font-mono text-[10px] font-medium uppercase tracking-[0.1em] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/60 ${
+            conEtiqueta ? "flex-1 px-3" : opcion.icono ? "w-7 px-0" : "px-2.5"
+          } ${
+            activo
+              ? "bg-primary-700 text-white dark:bg-primary-500 dark:text-slate-950"
+              : "text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white"
+          }`}
+        >
+          {opcion.icono}
+          {conEtiqueta || !opcion.icono ? (
+            <span>{opcion.label}</span>
+          ) : (
+            <span className="sr-only">{opcion.label}</span>
+          )}
+        </button>
+      );
+    })}
+  </div>
+);
+
+/**
+ * Selector de idioma (ES/EN). Comparte estado con cualquier otro selector de la
+ * página a través de `useSandboxLocale`.
+ *
+ * @example
+ * ```tsx
+ * <SelectorIdioma />
+ * ```
+ */
+export const SelectorIdioma = ({ className = "" }: { className?: string }) => {
+  const { t } = useITTranslation();
+  const { locale, setLocale } = useSandboxLocale();
+
+  return (
+    <ControlSegmentado
+      className={className}
+      etiqueta={t("sandbox.language")}
+      valor={locale}
+      onChange={(value) => setLocale(value === "en" ? "en" : "es")}
+      opciones={[
+        { value: "es", label: "ES" },
+        { value: "en", label: "EN" },
+      ]}
+    />
+  );
+};
+
+/**
+ * Selector de modo de color: claro, oscuro o el del sistema. Si no hay
+ * `ITThemeProvider` encima no se pinta (no rompe el render aislado).
+ *
+ * @example
+ * ```tsx
+ * <SelectorTema />
+ * ```
+ */
+export const SelectorTema = ({ className = "" }: { className?: string }) => {
+  const { t } = useITTranslation();
+  const theme = useITThemeSafe();
+
+  if (!theme) return null;
+
+  return (
+    <ControlSegmentado
+      className={className}
+      etiqueta={t("sandbox.theme")}
+      valor={theme.darkModeMode}
+      onChange={(value) =>
+        theme.setDarkModeMode(value === "dark" ? "dark" : value === "light" ? "light" : "system")
+      }
+      opciones={[
+        { value: "light", label: t("sandbox.themeLight"), icono: <FaSun size={11} /> },
+        { value: "dark", label: t("sandbox.themeDark"), icono: <FaMoon size={11} /> },
+        { value: "system", label: t("sandbox.themeSystem"), icono: <FaDesktop size={11} /> },
+      ]}
+    />
+  );
+};
+
+/**
+ * Par de controles (idioma + tema) tal como se pintan en la cabecera del
+ * portafolio.
+ *
+ * @example
+ * ```tsx
+ * <header><nav>…<ControlesPortafolio /></nav></header>
+ * ```
+ */
+export const ControlesPortafolio = ({ className = "" }: { className?: string }) => (
+  <div className={`flex shrink-0 items-center gap-2 ${className}`}>
+    <SelectorIdioma />
+    <SelectorTema />
+  </div>
+);