@eduardoalvarez/arrecife 0.3.0 → 0.4.0

package/dist/index.d.ts

@@ -1,14 +1,18 @@
-export { BrandToken, ColorMode, ColorToken, ControlToken, FontToken, GradientToken, RadiusToken, SintaxisToken, SizeToken, SpacingToken, Tokens, TypeScaleToken, brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, shadow, sintaxis, size, spacing, tagline, tokens, typeScale } from './tokens/index.js';
+export { BrandToken, ColorMode, ColorToken, ControlToken, FontToken, GradientToken, RadiusToken, SeriesToken, SintaxisToken, SizeToken, SpacingToken, Tokens, TypeScaleToken, brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, sintaxis, size, spacing, tagline, tokens, typeScale } from './tokens/index.js';
+import { Tema } from './tema/index.js';
+export { TEMA_ATRIBUTO, TEMA_CLAVE, TEMA_EVENTO, alternarTema, aplicarTema, escucharTema, scriptTema, temaActual, temaGuardado, temaPreferido } from './tema/index.js';
 import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode, ComponentProps, SVGProps } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, ComponentProps, RefObject, SVGProps } from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { DayPicker } from 'react-day-picker';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import * as LabelPrimitive from '@radix-ui/react-label';
+export { L as Label, a as LabelProps } from './label-DuTvJGxD.js';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -22,6 +26,45 @@ import { C as Cara, P as Pose } from './catalogo-Du5ID-Hi.js';
 export { A as Aleta, F as Fondo, R as RUTA_ASSETS, a as aletas, c as caras, l as listaCaras, b as listaPoses, p as poses, u as usoDeCara } from './catalogo-Du5ID-Hi.js';
 export { CaraDeMascota, CaraDeMascotaProps, Isotipo, IsotipoProps, Logo, LogoProps, Mascota, MascotaProps } from './brand/index.js';
 import { ClassValue } from 'clsx';
+import '@radix-ui/react-label';
+
+/**
+ * El plegable. Lo pedían dos proyectos: el FAQ del portafolio y el temario de
+ * cursos, que es literalmente una lista de secciones que se abren.
+ *
+ * NO se anima la altura, que es lo primero que hace todo el mundo con este
+ * componente. Radix publica `--radix-accordion-content-height` justo para eso y
+ * aquí no se usa: el sistema no anima posición ni tamaño, y un panel que crece
+ * a 200ms es exactamente el desplazamiento que las tarjetas, los menús y los
+ * modales ya evitan. El panel aparece donde va a quedarse.
+ *
+ * Lo único que se mueve es el galón, y se mueve porque `rotate` bajo
+ * `transition-standard` NO transiciona: la utilidad solo cubre color y borde,
+ * así que el giro es instantáneo aunque la clase esté puesta. Es el mismo trato
+ * que recibe el ancho de `Progress`.
+ *
+ * La división entre items es `hairline`, no `border`: es una separación de
+ * lectura, no el borde de un control.
+ */
+type AccordionProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;
+declare function Accordion({ className, ...props }: AccordionProps): react.JSX.Element;
+declare function AccordionItem({ className, ...props }: ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>): react.JSX.Element;
+/**
+ * El disparador es el encabezado, así que va DENTRO de un `<h3>`: Radix envuelve
+ * el botón en `AccordionPrimitive.Header`, que renderiza el elemento que se le
+ * pida. Sin eso, un lector de pantalla ve una lista de botones sueltos y pierde
+ * la estructura de la página, que es justo lo que un FAQ necesita conservar.
+ *
+ * `headingLevel` existe porque el nivel correcto depende de dónde se monte: en
+ * una página de FAQ el bloque cuelga de un `<h2>` de sección, y en un temario
+ * puede colgar de un `<h3>`. Fijarlo aquí sería adivinar.
+ */
+type AccordionTriggerProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+    /** Nivel del encabezado que envuelve al disparador. */
+    headingLevel?: 2 | 3 | 4;
+};
+declare function AccordionTrigger({ className, children, headingLevel, ...props }: AccordionTriggerProps): react.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>): react.JSX.Element;
 
 /**
  * El aviso lleva el color en el fondo, no solo en el borde.
@@ -70,7 +113,7 @@ import { ClassValue } from 'clsx';
  * `docs/decisiones.md`.
  */
 declare const alert: (props?: ({
-    variant?: "accent" | "success" | "warning" | "error" | null | undefined;
+    variant?: "error" | "accent" | "success" | "warning" | null | undefined;
     enfasis?: "sutil" | "fuerte" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type AlertProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & VariantProps<typeof alert> & {
@@ -83,6 +126,50 @@ type AlertProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & VariantProps<
 };
 declare function Alert({ className, variant, enfasis, title, icon, children, ...props }: AlertProps): react.JSX.Element;
 
+/**
+ * La confirmación destructiva. NO es un `Dialog` con otro texto, y por eso está
+ * en su propio archivo y sobre su propia primitiva de Radix.
+ *
+ * Tres diferencias, y las tres importan en el momento en que alguien va a
+ * borrar un artículo:
+ *
+ *   1. El rol es `alertdialog`, no `dialog`. Un lector de pantalla lo anuncia
+ *      con la descripción incluida, sin esperar a que se navegue hasta ella.
+ *   2. El foco inicial va al CANCELAR, no al primer elemento. Quien pulsa Enter
+ *      por inercia no borra nada. Radix lo hace solo si el cancelar existe, y
+ *      por eso `AlertDialogCancel` no es opcional en la práctica.
+ *   3. NO se cierra al pulsar fuera ni tiene aspa. Salir de una confirmación es
+ *      una decisión, no un descuido: hay que decir que no.
+ *
+ * El botón de confirmar NO es rojo. El sistema no tiene variante de peligro
+ * —`Button` lo dice explícito— y el error vive en los avisos y en la validación
+ * de campo, no en un botón. Lo que comunica la gravedad es el texto: «Borrar el
+ * artículo», no «Aceptar».
+ */
+declare const AlertDialog: react.FC<AlertDialogPrimitive.AlertDialogProps>;
+declare const AlertDialogTrigger: react.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare function AlertDialogOverlay({ className, ...props }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>): react.JSX.Element;
+/** Sin entrada animada, igual que `Dialog`: aparece donde va a quedarse. */
+declare function AlertDialogContent({ className, children, ...props }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>): react.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
+/**
+ * Cancelar a la IZQUIERDA de confirmar en escritorio y ABAJO en móvil, que es lo
+ * que da `flex-col-reverse`: el orden del DOM pone cancelar primero —es donde va
+ * el foco— y en columna el dedo lo encuentra donde toca sin cambiar la
+ * tabulación.
+ */
+declare function AlertDialogFooter({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>): react.JSX.Element;
+/**
+ * Lo que se pierde, dicho entero. Es lo que el rol `alertdialog` hace que se
+ * anuncie de entrada, así que aquí no va «esta acción no se puede deshacer»
+ * suelto: va qué se borra y qué se lleva por delante.
+ */
+declare function AlertDialogDescription({ className, ...props }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>): react.JSX.Element;
+/** El que se lleva el foco al abrir. */
+declare function AlertDialogCancel({ className, ...props }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>): react.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>): react.JSX.Element;
+
 declare const avatar: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -130,7 +217,7 @@ declare function AvatarFallback({ className, ...props }: ComponentPropsWithoutRe
  * «Publicado» o «Borrador» con todas sus letras.
  */
 declare const badge: (props?: ({
-    variant?: "accent" | "success" | "warning" | "error" | "neutral" | "warm" | null | undefined;
+    variant?: "error" | "accent" | "success" | "warning" | "neutral" | "warm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type BadgeProps = ComponentPropsWithoutRef<'span'> & VariantProps<typeof badge>;
 declare function Badge({ className, variant, ...props }: BadgeProps): react.JSX.Element;
@@ -329,15 +416,6 @@ type InputProps = ComponentPropsWithoutRef<'input'> & {
 };
 declare function Input({ className, invalid, ...props }: InputProps): react.JSX.Element;
 
-type LabelProps = ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
-/**
- * La escala `label`: 13px, que es el mínimo absoluto en pantalla del sistema.
- *
- * Se atenúa junto al control cuando este está deshabilitado, para que la
- * pareja etiqueta-control se lea siempre como una sola unidad.
- */
-declare function Label({ className, ...props }: LabelProps): react.JSX.Element;
-
 declare function Pagination({ className, ...props }: ComponentPropsWithoutRef<'nav'>): react.JSX.Element;
 declare function PaginationContent({ className, ...props }: ComponentPropsWithoutRef<'ul'>): react.JSX.Element;
 declare function PaginationItem(props: ComponentPropsWithoutRef<'li'>): react.JSX.Element;
@@ -485,23 +563,85 @@ declare function Textarea({ className, invalid, ...props }: TextareaProps): reac
 declare const ToastProvider: react.FC<ToastPrimitive.ToastProviderProps>;
 declare const ToastAction: react.ForwardRefExoticComponent<ToastPrimitive.ToastActionProps & react.RefAttributes<HTMLButtonElement>>;
 declare function ToastViewport({ className, ...props }: ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport>): react.JSX.Element;
-declare const toast: (props?: ({
-    variant?: "success" | "error" | "neutral" | null | undefined;
+declare const toast$1: (props?: ({
+    variant?: "error" | "success" | "neutral" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type ToastProps = ComponentPropsWithoutRef<typeof ToastPrimitive.Root> & VariantProps<typeof toast>;
+type ToastProps = ComponentPropsWithoutRef<typeof ToastPrimitive.Root> & VariantProps<typeof toast$1>;
 /** Sin deslizamiento de entrada: el aviso aparece donde va a quedarse. */
 declare function Toast({ className, variant, children, ...props }: ToastProps): react.JSX.Element;
 declare function ToastTitle({ className, ...props }: ComponentPropsWithoutRef<typeof ToastPrimitive.Title>): react.JSX.Element;
 declare function ToastDescription({ className, ...props }: ComponentPropsWithoutRef<typeof ToastPrimitive.Description>): react.JSX.Element;
 
+/**
+ * La cara imperativa del `Toast` de Radix: `toast('Guardado')` desde cualquier
+ * sitio, sin pasar el aviso por props hasta el componente que lo dispara.
+ *
+ * Existe porque dos proyectos traían `sonner` para esto. `Toast` cubre el mismo
+ * rol y tiene otra forma: Radix es declarativo con proveedor, y para mostrar un
+ * aviso desde el `catch` de un `fetch` hay que subir estado hasta donde vive el
+ * proveedor. Eso es exactamente lo que `sonner` evita, y es una necesidad real,
+ * no una preferencia de API.
+ *
+ * La alternativa era que los dos proyectos se adaptaran. Se descartó: el aviso
+ * lo dispara la capa de datos, que no tiene —ni debería tener— un componente
+ * cerca al que subirle un `useState`.
+ *
+ * Lo que NO se copió de `sonner` es el catálogo entero. No hay `toast.promise`,
+ * ni `toast.custom`, ni posiciones configurables, ni apilado con perspectiva:
+ * son cuatro variantes de lo mismo y cada una es superficie pública que hay que
+ * mantener. Están las tres formas que los proyectos usan de verdad —neutral,
+ * éxito, error—, `dismiss` y nada más.
+ *
+ * El estado vive en un módulo, no en un contexto, porque el punto es que se
+ * pueda llamar desde fuera del árbol. `Toaster` se suscribe con
+ * `useSyncExternalStore`, que es la forma que React 19 tiene de leer un estado
+ * externo sin efectos ni renders en cascada.
+ */
+type ToastVariant = NonNullable<ToastProps['variant']>;
+type ToastOptions = {
+    /** La primera línea, en negrita. Sin ella el aviso es una sola frase. */
+    title?: ReactNode;
+    description?: ReactNode;
+    variant?: ToastVariant;
+    /** Milisegundos en pantalla. `Infinity` lo deja hasta que se cierre a mano. */
+    duration?: number;
+    /** Un `ToastAction`, si el aviso ofrece deshacer. */
+    action?: ReactNode;
+};
+type Lanzador = {
+    (mensaje: ReactNode, opciones?: ToastOptions): string;
+    success: (mensaje: ReactNode, opciones?: ToastOptions) => string;
+    error: (mensaje: ReactNode, opciones?: ToastOptions) => string;
+    dismiss: (id?: string) => void;
+};
+/**
+ * Lanza un aviso. Devuelve su id, que es lo que hay que guardar para cerrarlo a
+ * mano —el caso de «guardando…» que se reemplaza cuando termina la petición.
+ */
+declare const toast: Lanzador;
+type ToasterProps = {
+    /** Cuánto dura un aviso que no dice lo contrario. */
+    duration?: number;
+    /**
+     * Nombre del landmark que Radix crea para la región de avisos. Se traduce
+     * porque lo lee un lector de pantalla, y el default de Radix está en inglés.
+     */
+    label?: string;
+};
+/**
+ * Va UNA vez, lo más arriba posible del árbol. Dos `Toaster` montados pintan
+ * cada aviso dos veces: la lista es del módulo, no de la instancia.
+ */
+declare function Toaster({ duration, label }: ToasterProps): react.JSX.Element;
+
 declare const TooltipProvider: react.FC<TooltipPrimitive.TooltipProviderProps>;
 declare const Tooltip: react.FC<TooltipPrimitive.TooltipProps>;
 declare const TooltipTrigger: react.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare function TooltipContent({ className, sideOffset, ...props }: ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>): react.JSX.Element;
 
 declare const texto: (props?: ({
-    variant?: "display" | "body" | "h1" | "h2" | "h3" | "label" | "meta" | "stat" | "lead" | "ui" | "tag" | "chip" | "eyebrow" | null | undefined;
-    tone?: "accent" | "success" | "warning" | "error" | "warm" | "primary" | "secondary" | "muted" | null | undefined;
+    variant?: "display" | "h2" | "h3" | "label" | "body" | "h1" | "meta" | "stat" | "lead" | "ui" | "tag" | "chip" | "eyebrow" | null | undefined;
+    tone?: "error" | "accent" | "success" | "warning" | "primary" | "secondary" | "warm" | "muted" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /** Etiquetas admitidas. La lista es corta a propósito: no es un `div` con estilo. */
 type Etiqueta = 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span' | 'strong' | 'em' | 'figcaption' | 'caption' | 'legend' | 'dt' | 'dd' | 'li';
@@ -537,6 +677,16 @@ type ArticleCardProps = Omit<TarjetaProps, 'children' | 'title'> & {
     dateTime?: string | undefined;
     readingMinutes?: number | undefined;
     tags?: readonly string[] | undefined;
+    /**
+     * Nivel del titular. `h3` por defecto: una tarjeta suelta en una rejilla no
+     * gana el nivel que su posición no le da.
+     *
+     * Acotado a dos valores a propósito. La página de listado —donde las tarjetas
+     * SÍ son el encabezado principal de la sección— necesita `h2`, y esa
+     * intención se perdía con la constante; abrirlo hasta `h4` o `h5`, en cambio,
+     * es invitar a saltarse niveles, que es el fallo que la constante evitaba.
+     */
+    headingLevel?: 2 | 3;
 };
 /**
  * La línea de metadatos va en `meta` y no en `eyebrow`: `18 ago 2026 · 8 min de
@@ -546,7 +696,7 @@ type ArticleCardProps = Omit<TarjetaProps, 'children' | 'title'> & {
  * Los tags son la familia CATEGORÍA — píldora de arena en minúscula —, no la de
  * estado. Un slug es lo que se lee `engineering-culture`.
  */
-declare function ArticleCard({ title, excerpt, date, dateTime, readingMinutes, tags, className, ...props }: ArticleCardProps): react.JSX.Element;
+declare function ArticleCard({ title, excerpt, date, dateTime, readingMinutes, tags, headingLevel, className, ...props }: ArticleCardProps): react.JSX.Element;
 
 /**
  * La firma al pie del artículo: avatar 52px, nombre 15/500 y el rol en mono
@@ -747,8 +897,16 @@ type FooterProps = ComponentPropsWithoutRef<'footer'> & {
     year?: number;
     /** Enlaces de texto: aviso legal, RSS, mapa del sitio. */
     children?: ReactNode;
+    /**
+     * La fila de marca: la aleta y el wordmark, arriba del todo.
+     *
+     * Existe porque sin ella acababa metida en `children` con un `w-full` para
+     * que se llevara su propia línea. Funcionaba y era un apaño: la marca no es
+     * un enlace de texto más, y una ranura propia lo dice en el tipo.
+     */
+    brand?: ReactNode;
 };
-declare function Footer({ social, year, children, className, ...props }: FooterProps): react.JSX.Element;
+declare function Footer({ social, year, children, brand, className, ...props }: FooterProps): react.JSX.Element;
 type FooterLinkProps = ComponentPropsWithoutRef<'a'> & {
     asChild?: boolean | undefined;
 };
@@ -759,13 +917,22 @@ declare function FooterLink({ asChild, className, ...props }: FooterLinkProps):
  * conversión, y por la misma razón: si hay dos, no hay ninguno.
  *
  * Degradado, radio de panel, texto al 62 % del ancho y la pose sangrando por el
- * borde inferior derecho. NUNCA centrada: una mascota centrada bajo un titular
- * es una ilustración de portada, y esto es una cabecera.
+ * borde inferior derecho. Eso es la variante `cabecera`, que es el defecto.
  *
  * En móvil no hay borde por el que sangrar, así que la pose baja al flujo, bajo
  * los botones. No es un `hidden` en pantalla pequeña: la pose es el 40 % de la
  * personalidad del hero.
  *
+ * La otra variante es `centrado`, y existe porque la regla de arriba tiene un
+ * caso donde no aplica. «Nunca centrada» se escribió contra el hero de una
+ * página con más contenido debajo: ahí una mascota centrada bajo el titular es
+ * una ilustración de portada, no una cabecera. Pero una página de enlaces es
+ * centrada de extremo a extremo y la mascota es el protagonista, no el remate.
+ * Ese proyecto se saltaba `Hero` entero por esto, que es peor: una regla
+ * declarada y con nombre se discute; una copia del degradado en otro repo se
+ * desincroniza. La pose va ARRIBA del titular, no debajo, para que siga sin
+ * leerse como la ilustración que cierra un bloque de texto.
+ *
  * El degradado viene de `--gradient-hero`, así que sigue el modo. No hay ángulo
  * escrito a mano en ningún proyecto.
  */
@@ -779,8 +946,13 @@ type HeroProps = Omit<ComponentPropsWithoutRef<'section'>, 'title'> & {
     /** La pose de Tiburoncín. Sin ella el hero es un panel con texto. */
     pose?: Pose | undefined;
     basePath?: string | undefined;
+    /**
+     * `cabecera` sangra la pose por la esquina; `centrado` la pone arriba y
+     * centra el texto, para una página que es solo esto.
+     */
+    variant?: 'cabecera' | 'centrado';
 };
-declare function Hero({ title, eyebrow, description, action, pose, basePath, className, ...props }: HeroProps): react.JSX.Element;
+declare function Hero({ title, eyebrow, description, action, pose, basePath, variant, className, ...props }: HeroProps): react.JSX.Element;
 
 type LinkRowProps = Omit<TarjetaProps, 'children'> & {
     name: ReactNode;
@@ -851,14 +1023,30 @@ declare function NavItem({ active, asChild, className, children, ...props }: Nav
  * receta sutil, las dos líneas se leen como una sola caja.
  *
  * Es uno de los sitios donde la mascota puede aparecer: el «sin spam».
+ *
+ * El campo de nombre es OPCIONAL y está apagado por defecto. No es una prop de
+ * estilo: el endpoint de uno de los proyectos valida nombre y correo y responde
+ * 400 si falta el primero, así que un formulario de un solo campo ahí no es un
+ * formulario más pobre — es uno que envía algo que el servidor rechaza. El
+ * nombre viaja como SEGUNDO argumento de `onSubmitEmail`, para que las llamadas
+ * que ya existen —las que solo declaran `(email)`— sigan compilando.
+ *
+ * Lo que la librería NO hace es validar el nombre. El proyecto que lo pide lo
+ * acota entre 2 y 50 caracteres y solo letras y acentos; esa regla es suya y del
+ * servidor que la comprueba de verdad, y copiarla aquí sería tener dos fuentes
+ * que se desincronizan en silencio. `nameInputProps` está para que el proyecto
+ * ponga la suya.
  */
 type NewsletterState = 'reposo' | 'enviando' | 'exito' | 'error';
 type NewsletterFormProps = Omit<ComponentPropsWithoutRef<'section'>, 'title' | 'onSubmit'> & {
     title: ReactNode;
     description?: ReactNode;
     state?: NewsletterState;
-    /** Se dispara con el correo ya leído del campo. */
-    onSubmitEmail?: ((email: string) => void) | undefined;
+    /**
+     * Se dispara con el correo ya leído del campo, y con el nombre si el campo
+     * está puesto.
+     */
+    onSubmitEmail?: ((email: string, name?: string) => void) | undefined;
     successMessage?: ReactNode;
     errorMessage?: ReactNode;
     /** La letra pequeña. Es el «sin spam», y por eso admite cara. */
@@ -868,8 +1056,17 @@ type NewsletterFormProps = Omit<ComponentPropsWithoutRef<'section'>, 'title' | '
     submitLabel?: string;
     placeholder?: string;
     fieldLabel?: string;
+    /** Añade el campo de nombre delante del correo. */
+    nameField?: boolean;
+    nameLabel?: string;
+    namePlaceholder?: string;
+    /**
+     * Lo que el proyecto necesite colgar del campo de nombre: `minLength`,
+     * `maxLength`, `pattern`. La librería no impone ninguna de las tres.
+     */
+    nameInputProps?: Omit<InputProps, 'id' | 'name' | 'disabled'> | undefined;
 };
-declare function NewsletterForm({ title, description, state, onSubmitEmail, successMessage, errorMessage, disclaimer, expresion, basePath, submitLabel, placeholder, fieldLabel, className, ...props }: NewsletterFormProps): react.JSX.Element;
+declare function NewsletterForm({ title, description, state, onSubmitEmail, successMessage, errorMessage, disclaimer, expresion, basePath, submitLabel, placeholder, fieldLabel, nameField, nameLabel, namePlaceholder, nameInputProps, className, ...props }: NewsletterFormProps): react.JSX.Element;
 
 /**
  * Una sola cabecera en dos escalas, no dos componentes.
@@ -908,6 +1105,43 @@ type PageHeaderProps = Omit<ComponentPropsWithoutRef<'header'>, 'title'> & Varia
 };
 declare function PageHeader({ title, eyebrow, description, action, size, as, className, ...props }: PageHeaderProps): react.JSX.Element;
 
+/**
+ * Cuánto llevas leído. NO es `Progress` con otro nombre.
+ *
+ * `Progress` mide una tarea: hay un total conocido, alguien la empezó y va a
+ * terminar. Esto mide una POSICIÓN en un documento, que se puede recorrer en
+ * los dos sentidos y de la que no hay nada que completar. Por eso no lleva
+ * `role="progressbar"` ni valor accesible: va `aria-hidden`.
+ *
+ * Eso último es deliberado y es la decisión que hay que defender. Un lector de
+ * pantalla ya sabe dónde está en el documento y anunciarle «37 %» cada vez que
+ * se mueve es ruido, no información. La barra es orientación visual, y lo que
+ * es solo visual se declara como tal.
+ *
+ * El ancho se escribe directamente, sin transición: `transition-standard` solo
+ * cubre color y borde, así que la barra sigue al scroll en vez de perseguirlo.
+ *
+ * La medición va dentro de `requestAnimationFrame`. Leer `scrollTop` en el
+ * manejador de scroll fuerza un reflujo síncrono en cada evento, y en un
+ * artículo largo eso se nota en el propio scroll — el efecto contrario al que
+ * busca la pieza.
+ */
+type ScrollingProgressBarProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
+    /**
+     * El elemento que se mide. Sin él, el documento entero.
+     *
+     * Se pasa cuando la barra debe seguir SOLO al artículo: si la página tiene
+     * una cabecera alta y un pie con enlaces, medir el documento marca el 100 %
+     * cuando todavía quedan dos párrafos.
+     */
+    target?: RefObject<HTMLElement | null> | undefined;
+    /** Arena en vez de bioluz, para igualar el progreso de curso. */
+    tone?: 'accent' | 'warm';
+    /** Pega la barra al borde superior de la ventana. */
+    sticky?: boolean;
+};
+declare function ScrollingProgressBar({ target, tone, sticky, className, ...props }: ScrollingProgressBarProps): react.JSX.Element;
+
 /**
  * La barra lateral del admin del blog.
  *
@@ -964,8 +1198,63 @@ type TalkCardProps = Omit<TarjetaProps, 'children' | 'title'> & {
     location?: ReactNode;
     /** Etiqueta corta de estado: «con vídeo», «próxima», «solo audio». */
     status?: ReactNode;
+    /**
+     * De qué iba la charla. Se corta a dos líneas, igual que el `excerpt` de
+     * `ArticleCard`, para que la rejilla no se desalinee.
+     */
+    description?: ReactNode;
 };
-declare function TalkCard({ title, event, date, dateTime, location, status, className, ...props }: TalkCardProps): react.JSX.Element;
+declare function TalkCard({ title, event, date, dateTime, location, status, description, className, ...props }: TalkCardProps): react.JSX.Element;
+
+/**
+ * El control que faltaba. La librería definía todo el sistema de temas y no
+ * exponía lo que lo cambia, así que dos proyectos lo reimplementaban.
+ *
+ * Lo difícil no es el botón: es que la primera pintura no parpadee y que la
+ * elección sobreviva a la navegación. Eso vive en `@eduardoalvarez/arrecife/tema`,
+ * que no importa React —lo consume un Astro que no monta ninguno— y de ahí sale
+ * `scriptTema`, que va inline en el `<head>`. Sin ese script, este botón
+ * funciona y aun así se ve el fogonazo en cada carga.
+ *
+ * Los DOS iconos se renderizan siempre y el que sobra lo esconde el CSS con la
+ * variante `light:`. No es una optimización: es lo que evita que el servidor y
+ * el cliente discrepen. El servidor no sabe qué tema eligió quien va a leer, así
+ * que cualquier icono que elija en el HTML tiene la mitad de probabilidades de
+ * ser el equivocado, y corregirlo al hidratar es el parpadeo otra vez.
+ *
+ * El nombre accesible NO dice a qué modo se va. Sería más informativo y sería
+ * una mentira la mitad del tiempo por lo mismo de arriba: el HTML del servidor
+ * lo fija antes de saber el tema. «Cambiar de tema» es cierto siempre.
+ */
+type ThemeToggleProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick'> & {
+    /** Nombre accesible. El botón no tiene texto visible, así que es lo único que lo nombra. */
+    label?: string;
+    /** Se dispara con el tema que quedó puesto, por si el proyecto quiere anotarlo. */
+    onThemeChange?: ((tema: Tema) => void) | undefined;
+    variant?: ButtonProps['variant'];
+    size?: ButtonProps['size'];
+};
+declare function ThemeToggle({ label, onThemeChange, variant, size, className, ...props }: ThemeToggleProps): react.JSX.Element;
+/**
+ * El tema puesto ahora mismo, para un proyecto que necesite ramificar en React
+ * —un logo distinto por modo, una imagen que no tiene versión clara—.
+ *
+ * Es `useSyncExternalStore` y no un `useState` con un efecto detrás porque el
+ * tema es exactamente eso: un estado que vive fuera de React, en un atributo del
+ * `<html>` que puede cambiar sin que React se entere. Escribirlo con un efecto
+ * que llama a `setState` en el montaje es el patrón que dispara un render en
+ * cascada y que la regla `set-state-in-effect` señala con razón.
+ *
+ * `getServerSnapshot` devuelve `'dark'` porque en el servidor no hay `document`.
+ * El primer render del cliente coincide con el del servidor y el valor real
+ * entra después, que es la misma discrepancia de hidratación que `ThemeToggle`
+ * evita renderizando los dos iconos.
+ *
+ * De ahí la regla de uso: si lo que ramifica es SOLO estilo, esto no hace falta
+ * y la variante `light:` es mejor — no re-renderiza nada. Esto es para cuando
+ * cambia el contenido.
+ */
+declare function useTema(): Tema;
 
 /**
  * «En esta página». El índice del artículo largo.
@@ -976,6 +1265,20 @@ declare function TalkCard({ title, event, date, dateTime, location, status, clas
  *
  * El activo se marca con `aria-current`, no solo con color — la sección en la
  * que estás no puede comunicarse únicamente con bioluz.
+ *
+ * Y ese atributo es además EL GANCHO: las clases del activo se aplican con la
+ * variante `aria-[current]:`, no con un ternario en el render. La diferencia es
+ * la que hay entre servir solo controlado y servir también sin controlar.
+ *
+ * Un sitio Astro resuelve el scroll-spy con quince líneas de script que ponen
+ * `aria-current` en el enlace visible y quitan el del anterior. Con el estado
+ * calculado en el render, ese script no podía hacer nada: había que hidratar el
+ * índice como isla de React en cada artículo para algo que cuesta cero
+ * JavaScript de framework. Ahora el CSS reacciona al atributo y las dos formas
+ * de usarlo dan el mismo resultado.
+ *
+ * El gancho es la PRESENCIA del atributo, así que se quita para desmarcar; no
+ * se pone `aria-current="false"`.
  */
 type Entrada = {
     /** El ancla, con `#`. */
@@ -1021,4 +1324,4 @@ declare namespace social {
   export { social_Correo as Correo, social_Discord as Discord, social_GitHub as GitHub, social_Instagram as Instagram, social_LinkedIn as LinkedIn, social_Rss as Rss, social_X as X, social_YouTube as YouTube };
 }
 
-export { Alert, type AlertProps, ArticleCard, type ArticleCardProps, AudioPlayer, type AudioPlayerMode, type AudioPlayerProps, AuthorCard, type AuthorCardProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarProps, Cara, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBadge, type CategoryBadgeProps, Checkbox, type CheckboxProps, Code, CodeBlock, type CodeBlockProps, type CodeProps, CourseCard, type CourseCardProps, DateField, type DateFieldProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type Entrada, Footer, FooterLink, type FooterLinkProps, type FooterProps, HOVER_TARJETA, Hero, type HeroProps, Input, type InputProps, Label, type LabelProps, LinkRow, type LinkRowProps, MetricBadge, type MetricBadgeProps, type Migaja, Nav, NavItem, type NavItemProps, type NavProps, NewsletterForm, type NewsletterFormProps, type NewsletterState, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Pose, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type Red, SUPERFICIE_TARJETA, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarNavProps, Skeleton, type SkeletonProps, Stat, type StatProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TalkCard, type TalkCardProps, Text, type TextProps, Textarea, type TextareaProps, Toast, ToastAction, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, categoria as categoryBadgeVariants, cn, social, texto as textVariants };
+export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, type AlertProps, ArticleCard, type ArticleCardProps, AudioPlayer, type AudioPlayerMode, type AudioPlayerProps, AuthorCard, type AuthorCardProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarProps, Cara, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBadge, type CategoryBadgeProps, Checkbox, type CheckboxProps, Code, CodeBlock, type CodeBlockProps, type CodeProps, CourseCard, type CourseCardProps, DateField, type DateFieldProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type Entrada, Footer, FooterLink, type FooterLinkProps, type FooterProps, HOVER_TARJETA, Hero, type HeroProps, Input, type InputProps, LinkRow, type LinkRowProps, MetricBadge, type MetricBadgeProps, type Migaja, Nav, NavItem, type NavItemProps, type NavProps, NewsletterForm, type NewsletterFormProps, type NewsletterState, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Pose, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type Red, SUPERFICIE_TARJETA, ScrollingProgressBar, type ScrollingProgressBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarNavProps, Skeleton, type SkeletonProps, Stat, type StatProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TalkCard, type TalkCardProps, Tema, Text, type TextProps, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, Toast, ToastAction, ToastDescription, type ToastOptions, type ToastProps, ToastProvider, ToastTitle, type ToastVariant, ToastViewport, Toaster, type ToasterProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, categoria as categoryBadgeVariants, cn, social, texto as textVariants, toast, useTema };