@eduardoalvarez/arrecife 0.3.0 → 0.5.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,54 @@ 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.
+ *
+ * La altura SÍ se anima, y es la cuarta excepción declarada del sistema.
+ *
+ * Merece explicarse, porque la regla general es la contraria y este componente
+ * nació sin animar citándola. La diferencia es que aquí no APARECE nada: se
+ * abre un hueco, y todo lo que hay debajo del acordeón se desplaza. Sin
+ * transición ese desplazamiento es un salto, y quien acaba de pulsar pierde el
+ * sitio en la página — que es justo el daño que la regla «nada de movimiento»
+ * existe para evitar. Es la misma categoría que el panel lateral, la segunda
+ * excepción, y no la de una animación de entrada.
+ *
+ * Va detrás de `motion-safe`, dura `--duration-standard` y usa
+ * `--ease-standard`, así que no estrena un tiempo ni una curva. Quien pidió
+ * menos movimiento sigue viendo el panel aparecer donde va a quedarse.
+ *
+ * Ver `docs/decisiones.md` § 20.
+ *
+ * El galón, en cambio, gira sin transición: `transition-standard` solo cubre
+ * color y borde, así que `rotate` salta 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 +122,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 +135,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;
@@ -96,6 +192,40 @@ declare function Avatar({ className, size, ...props }: AvatarProps): react.JSX.E
 declare function AvatarImage({ className, ...props }: ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>): react.JSX.Element;
 /** Iniciales mientras la imagen carga, o cuando no hay imagen. */
 declare function AvatarFallback({ className, ...props }: ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>): react.JSX.Element;
+type AvatarUploadProps = Omit<ComponentPropsWithoutRef<'div'>, 'onSelect' | 'children'> & VariantProps<typeof avatar> & {
+    /** La imagen actual, ya subida. La previsualización local la gana mientras dure. */
+    src?: string | undefined;
+    /** Iniciales mientras no hay imagen. */
+    fallback?: ReactNode;
+    /** Se dispara con el archivo elegido. La subida la hace el proyecto. */
+    onSelectFile?: ((archivo: File) => void) | undefined;
+    /** Qué acepta el diálogo del sistema. */
+    accept?: string;
+    /** Nombre accesible del control. Es lo único que lo nombra: no hay texto visible. */
+    label?: string;
+    disabled?: boolean | undefined;
+};
+/**
+ * El avatar que se puede cambiar. `Avatar` muestra; este además deja elegir.
+ *
+ * Es presentacional, como `NewsletterForm`: emite `onSelectFile` con el `File` y
+ * ahí se acaba su trabajo. La subida no entra —cada proyecto tiene su
+ * almacenamiento y su endpoint— y un componente que hiciera el `POST` sería
+ * infraestructura, que es el tercer criterio de entrada y el que más se salta.
+ *
+ * La previsualización es LOCAL y no espera a que la subida termine. Es la
+ * diferencia entre un control que responde y uno que parece roto: entre elegir
+ * el archivo y que el servidor devuelva la URL pueden pasar segundos, y sin
+ * previa el avatar se queda con la foto vieja como si no hubiera pasado nada.
+ * El `objectURL` se revoca al cambiar y al desmontar; no revocarlo es una fuga
+ * de memoria que no da la cara hasta la décima foto.
+ *
+ * El control es un `<label>` con un `<input type="file">` oculto dentro, no un
+ * `<button>` que dispara un click sintético. El input real trae el diálogo del
+ * sistema, el arrastrar-y-soltar del navegador y el foco por teclado; el botón
+ * falso hay que reconstruirlo entero y siempre falta algo.
+ */
+declare function AvatarUpload({ src, fallback, onSelectFile, accept, label, size, disabled, className, ...props }: AvatarUploadProps): react.JSX.Element;
 
 /**
  * TRES familias de etiqueta, no una.
@@ -130,7 +260,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 +459,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;
@@ -482,17 +603,73 @@ type TextareaProps = ComponentPropsWithoutRef<'textarea'> & {
 };
 declare function Textarea({ className, invalid, ...props }: TextareaProps): react.JSX.Element;
 
-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>;
-/** 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;
+type ToastProps = ComponentPropsWithoutRef<typeof ToastPrimitive.Root> & VariantProps<typeof toast$1>;
+
+/**
+ * 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>;
@@ -500,8 +677,8 @@ declare const TooltipTrigger: react.ForwardRefExoticComponent<TooltipPrimitive.T
 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 +714,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 +733,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
@@ -720,6 +907,53 @@ type EmptyStateProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
 };
 declare function EmptyState({ expresion, title, description, action, basePath, className, ...props }: EmptyStateProps): react.JSX.Element;
 
+/**
+ * El calendario con eventos: verlos, crearlos, editarlos y borrarlos.
+ *
+ * `Calendar` es la primitiva y sigue siendo una rejilla de fechas: sirve para
+ * ELEGIR un día y no sabe nada de contenido. Esto es la agenda, y por eso vive
+ * en `components/` y no al lado de aquella — tiene estado, tiene formulario y
+ * codifica cómo se ve un día con cosas dentro.
+ *
+ * Es presentacional, como el resto de la librería: recibe `events` y emite
+ * `onCreateEvent`, `onUpdateEvent` y `onDeleteEvent`. No guarda nada, no llama a
+ * ninguna API y no genera ids — el id lo pone quien persiste, porque es quien
+ * sabe si viene de una base de datos o de un fichero.
+ *
+ * DOS COLUMNAS y no un popover sobre el día. El popover es lo que hace todo el
+ * mundo y esconde el contenido detrás de un clic: con la lista al lado, un mes
+ * con quince eventos se lee de un vistazo y el día seleccionado no tapa la
+ * rejilla. En pantalla estrecha se apilan.
+ *
+ * El borrado pasa por `AlertDialog` y no por un botón directo. Es exactamente el
+ * caso para el que existe: una acción destructiva sin deshacer.
+ */
+type EventoCalendario = {
+    /** Lo pone el proyecto. La librería nunca lo inventa. */
+    id: string;
+    /** Cuándo empieza, con hora. */
+    start: Date;
+    title: string;
+    /** `warm` cuando el evento es el problema, igual que en `Stat`. */
+    tone?: 'accent' | 'warm' | undefined;
+};
+type EventCalendarProps = Omit<ComponentPropsWithoutRef<'div'>, 'onSelect' | 'children'> & {
+    events: readonly EventoCalendario[];
+    /** Sin él, la agenda es de solo lectura y no se pinta el formulario. */
+    onCreateEvent?: ((evento: Omit<EventoCalendario, 'id'>) => void) | undefined;
+    onUpdateEvent?: ((evento: EventoCalendario) => void) | undefined;
+    onDeleteEvent?: ((id: string) => void) | undefined;
+    /** Día seleccionado, si el proyecto lo controla. Sin él, empieza en hoy. */
+    selected?: Date | undefined;
+    onSelectDay?: ((dia: Date) => void) | undefined;
+    /** Encabezado del panel. Por defecto, `es` de date-fns, como `Calendar`. */
+    formatDay?: ((dia: Date) => string) | undefined;
+    formatTime?: ((fecha: Date) => string) | undefined;
+    /** Texto del panel cuando el día elegido no tiene nada. */
+    emptyMessage?: ReactNode;
+};
+declare function EventCalendar({ events, onCreateEvent, onUpdateEvent, onDeleteEvent, selected, onSelectDay, formatDay, formatTime, emptyMessage, className, ...props }: EventCalendarProps): react.JSX.Element;
+
 /**
  * El pie, y la firma CLI del sitio: `$ cd ~/eduardoalvarez.dev/2026`.
  *
@@ -747,8 +981,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 +1001,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 +1030,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;
@@ -809,11 +1065,17 @@ declare function LinkRow({ name, description, icon, external, className, ...prop
  * Renderiza `<header>` colgando directamente del `body`, así que ES el landmark
  * `banner` del sitio. Por eso `PageHeader` va dentro de `<main>` y no es
  * landmark: dos banners en una página son un fallo de accesibilidad.
+ *
+ * Los items van a la DERECHA, pegados a las acciones, no a continuación de la
+ * marca. Con la marca a la izquierda y los items justo detrás, el bloque de
+ * navegación queda flotando en medio de la barra y el ojo tiene que cruzar el
+ * hueco dos veces: una para leer la marca y otra para volver a buscar la
+ * sección. Agrupados a la derecha, marca y navegación son dos anclas y no tres.
  */
 type NavProps = ComponentPropsWithoutRef<'header'> & {
     /** El logo, a la izquierda. */
     brand?: ReactNode;
-    /** Los items de sección, en el centro. */
+    /** Los items de sección. Van a la derecha, pegados a `actions`. */
     children?: ReactNode;
     /** Acciones a la derecha: conversión, cambio de tema, buscar. */
     actions?: ReactNode;
@@ -832,6 +1094,13 @@ type NavItemProps = ComponentPropsWithoutRef<'a'> & {
  * no una convención que haya que recordar en cinco proyectos. Va `aria-hidden`,
  * así que un lector de pantalla anuncia «artículos» y no «punto barra
  * artículos».
+ *
+ * La sección actual va entre CORCHETES además de en bioluz y subrayada. No es
+ * decoración: el subrayado y el color son la misma señal —«esto destaca»— y en
+ * una barra de seis items en mono, a 13px, esa señal se lee peor de lo que
+ * parece en una maqueta. Los corchetes son la forma en que una terminal marca la
+ * ruta activa, así que dicen «estás aquí» sin depender de que se distinga el
+ * color. Van `aria-hidden`, porque quien escucha ya tiene `aria-current`.
  */
 declare function NavItem({ active, asChild, className, children, ...props }: NavItemProps): react.JSX.Element;
 
@@ -851,14 +1120,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 +1153,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 +1202,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.
  *
@@ -942,6 +1273,11 @@ declare function SidebarNav({ title, version, branch, children, className, ...pr
  * es un dato; un 0 de design systems es el problema del que trata la charla.
  * Por eso `tone` no es una paleta abierta — son dos valores y significan cosas
  * distintas.
+ *
+ * El orden de lectura es icono + título, el número grande, y la bajada debajo.
+ * El número va en MEDIO y no al final a propósito: es lo que se viene a leer, y
+ * una bajada de dos líneas entre el título y la cifra la entierra. Arriba queda
+ * de qué va, en medio cuánto, y abajo el matiz que solo lee quien se para.
  */
 type StatProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
     /** El número, ya formateado. La librería no impone locale. */
@@ -952,8 +1288,18 @@ type StatProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
     tone?: 'neutral' | 'alerta';
     /** Con `progress`, la métrica se lee como avance y añade la barra. */
     progress?: number | undefined;
+    /**
+     * Glifo al lado del título, a 1em. Hereda `currentColor`, así que sigue al
+     * tono del título y no hay que teñirlo aparte.
+     */
+    icon?: ReactNode;
+    /**
+     * La bajada: el matiz que el número solo no da. «12 aplicaciones» no dice si
+     * son muchas, y aquí es donde se dice.
+     */
+    description?: ReactNode;
 };
-declare function Stat({ value, label, tone, progress, className, ...props }: StatProps): react.JSX.Element;
+declare function Stat({ value, label, tone, progress, icon, description, className, ...props }: StatProps): react.JSX.Element;
 
 type TalkCardProps = Omit<TarjetaProps, 'children' | 'title'> & {
     title: ReactNode;
@@ -964,8 +1310,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, 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 TalkCard({ title, event, date, dateTime, location, status, className, ...props }: TalkCardProps): react.JSX.Element;
+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 +1377,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 +1436,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, AvatarUpload, type AvatarUploadProps, 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, EventCalendar, type EventCalendarProps, type EventoCalendario, 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, ToastAction, type ToastOptions, type ToastVariant, 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 };