@eduardoalvarez/arrecife 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,1024 @@
+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';
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode, ComponentProps, SVGProps } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+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';
+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';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as ToastPrimitive from '@radix-ui/react-toast';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+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';
+
+/**
+ * El aviso lleva el color en el fondo, no solo en el borde.
+ *
+ * La receta del sistema es fondo al 8 % del color semántico y borde al 22 %.
+ * Este archivo daba `bg-surface` a las cuatro variantes, así que el tono vivía
+ * entero en un borde de 1px: cuatro avisos que se distinguían entre sí por una
+ * línea.
+ *
+ * Los cuatro tonos empiezan en ACENTO, que es el informativo del sistema (✦).
+ * No hay `neutral`: un aviso sin color es un párrafo.
+ *
+ * MEDIDO en los dos modos, porque el 8 % del documento está calculado sobre
+ * abismo y había que comprobar que sobrevive sobre papel. Contraste del tinte
+ * contra el fondo de página:
+ *
+ *              8 % oscuro   8 % claro
+ *   accent       1.149        1.106
+ *   success      1.116        1.121
+ *   warning      1.126        1.109
+ *   error        1.067        1.120
+ *
+ * El modo claro NO necesita una segunda tabla: aguanta igual o mejor que el
+ * oscuro. El único punto flojo del sistema es `error` sobre abismo, 1.067, que
+ * es el tinte más tenue de los ocho y se apoya entero en el borde al 22 %.
+ *
+ * Hay una SEGUNDA receta, a propósito: el aviso bajo el formulario de
+ * newsletter va al 10 % con el borde sólido para leerse bajo el campo. Es
+ * `enfasis="fuerte"`, y no se unifica con la sutil porque la diferencia está
+ * documentada.
+ *
+ * TERCERA corrección de contraste, en la línea de las tres que ya tenía
+ * `tokens.ts`. El título iba en el color semántico, y en modo claro eso no puede
+ * pasar AA: los semánticos claros están calibrados para pasar JUSTO sobre papel
+ * (4.54–4.88), así que sobre su propio tinte al 8 % caen a 4.11–4.40. No hay
+ * alfa que lo arregle — el problema es poner el color encima de sí mismo.
+ *
+ * El tinte es una SUPERFICIE, así que el texto que lleva encima es un token de
+ * texto: `textPrimary` da 14.6–14.9 sobre los cuatro tintes. El color semántico
+ * se queda donde no es texto — el borde y el glifo —, que es lo único que el
+ * documento pedía de él. El glifo es decorativo y va `aria-hidden`, así que le
+ * aplica el umbral de 3:1 y no el de 4.5: su peor caso claro es 4.11.
+ *
+ * El radio: el documento dice 12, que no es ninguno de los cinco radios del
+ * sistema. Usa el de tarjeta antes que estrenar un sexto — ver
+ * `docs/decisiones.md`.
+ */
+declare const alert: (props?: ({
+    variant?: "accent" | "success" | "warning" | "error" | null | undefined;
+    enfasis?: "sutil" | "fuerte" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type AlertProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & VariantProps<typeof alert> & {
+    title?: ReactNode;
+    /**
+     * Sustituye el glifo mono de la variante. Nunca un emoji: si necesitas otra
+     * cosa, es un SVG de `glyphs`.
+     */
+    icon?: ReactNode;
+};
+declare function Alert({ className, variant, enfasis, title, icon, children, ...props }: AlertProps): react.JSX.Element;
+
+declare const avatar: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type AvatarProps = ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & VariantProps<typeof avatar>;
+/**
+ * Uno solo para todo: la foto del autor y la de cualquier persona del sistema.
+ * No hay un `brand/Avatar` aparte — una foto de perfil con la piel de la marca
+ * es exactamente esto con un `src` distinto.
+ */
+declare function Avatar({ className, size, ...props }: AvatarProps): react.JSX.Element;
+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;
+
+/**
+ * TRES familias de etiqueta, no una.
+ *
+ * El sistema define tres formas distintas y este archivo las servía todas como
+ * píldora mono en versalitas. Cada una tiene su forma porque cada una dice otra
+ * cosa:
+ *
+ *   categoría · píldora r999, mono 11.5, arena   → un slug: `engineering-culture`
+ *   estado    · cuadrada r6, sans 12.5/500, tinte → un semáforo: publicado, borrador
+ *   métrica   · píldora, mono 11.5 muted          → un dato: `8 min de lectura`
+ *
+ * NINGUNA va en versalitas. El `uppercase tracking-[0.12em]` que tenían las tres
+ * venía de `text-eyebrow`, que es la escala del eyebrow y no la de las
+ * etiquetas: convertía `engineering-culture` en `ENGINEERING-CULTURE` y
+ * `pose-laptop-coffee.png` en un nombre de archivo que no existe.
+ */
+/**
+ * Semáforo. Cuadrada r6, sans 12.5/500 y fondo al 8 % del semántico — la receta
+ * del aviso en tamaño de palabra: un estado es un aviso de una sola palabra.
+ *
+ * SIN borde. Lo llevó un tiempo, puesto para reforzar el tono, y pesaba: una
+ * caja con borde al lado de un título se lee como un control y no como un dato.
+ * El tinte solo es lo que pide el documento y es lo que se ve más limpio.
+ *
+ * El texto va en `textPrimary`, no en el color del tono. En modo claro los
+ * semánticos están calibrados para pasar JUSTO sobre papel, así que sobre su
+ * propio tinte caen a 4.10–4.40 y no pasan AA. El tinte es una superficie;
+ * encima va un token de texto. Medido en `alert.tsx`.
+ *
+ * El tono nunca es el único portador del significado: la etiqueta dice
+ * «Publicado» o «Borrador» con todas sus letras.
+ */
+declare const badge: (props?: ({
+    variant?: "accent" | "success" | "warning" | "error" | "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;
+/**
+ * Un slug, en arena. Sin transformar: los slugs ya vienen en minúscula y
+ * forzarla sería el mismo error que forzaba el `uppercase`.
+ *
+ * El borde del documento es `#4A3A25`, que es arena al 28 % sobre abismo: sale
+ * de la paleta, así que no entra como token nuevo. En modo claro la misma regla
+ * da arena oscura al 28 % sobre papel, que es lo que se quiere.
+ *
+ * La variante rellena NO es decorativa: es el único indicador de filtro activo
+ * del listado de artículos. Por eso `active` es una prop y no un `className`.
+ */
+declare const categoria: (props?: ({
+    active?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CategoryBadgeProps = ComponentPropsWithoutRef<'span'> & {
+    /** Filtro seleccionado: arena sólido con tinta encima. */
+    active?: boolean | undefined;
+};
+declare function CategoryBadge({ className, active, ...props }: CategoryBadgeProps): react.JSX.Element;
+type MetricBadgeProps = ComponentPropsWithoutRef<'span'> & {
+    /** Añade el aro de hairline. Por defecto la métrica va sin caja. */
+    boxed?: boolean | undefined;
+};
+declare function MetricBadge({ className, boxed, ...props }: MetricBadgeProps): react.JSX.Element;
+
+/**
+ * Las CUATRO variantes del sistema, y solo esas cuatro.
+ *
+ * Regla de marca 2, como código y no como documentación: en modo claro el botón
+ * primario no puede ser bioluz ni arena, así que pasa a casco sólido. No hay un
+ * hex literal en ningún lado — `brand.hull` es un token, y el hover reusa
+ * `textSecondary` en vez de inventar un `hullHover`.
+ *
+ * Regla de marca 3: `conversion` va UNA sola vez por pantalla. Está documentado
+ * en la story y no se fuerza en runtime: dos botones de conversión en una misma
+ * página son un problema de diseño, no un error que deba tirar el render.
+ *
+ * `secondary` NUNCA se rellena el fondo. Es borde y texto: en reposo, hairline
+ * de hover y espuma; en hover, los dos pasan a bioluz. Un secundario relleno es
+ * un primario mal teñido, y era lo que hacía este archivo.
+ *
+ * `tertiary` es la estética CLI del sistema: mono, formato `./acción →`, sin
+ * caja. Aparece en cada tarjeta, así que no es un `ghost` genérico con otro
+ * nombre — el formato del texto es parte de la variante.
+ *
+ * No hay variante de peligro. El error del sistema vive en los avisos y en la
+ * validación de campo, no en un botón rojo. Si alguna vez hace falta uno de
+ * verdad, entra primero en el documento y luego aquí.
+ */
+declare const button: (props?: ({
+    variant?: "primary" | "conversion" | "secondary" | "tertiary" | null | undefined;
+    size?: "icon" | "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonProps = ComponentPropsWithoutRef<'button'> & VariantProps<typeof button> & {
+    /** Renderiza el hijo en vez de un `<button>`, para envolver un enlace. */
+    asChild?: boolean;
+    /** Deshabilita y anuncia `aria-busy`. Incompatible con `asChild`. */
+    loading?: boolean;
+    /** Glifo SVG antes del texto. Se oculta mientras carga. */
+    icon?: ReactNode;
+};
+declare function Button({ className, variant, size, asChild, loading, icon, children, disabled, ...props }: ButtonProps): react.JSX.Element;
+
+type CalendarProps = ComponentProps<typeof DayPicker> & {
+    /**
+     * Estira el calendario hasta ocupar todo el ancho de su contenedor, con las
+     * celdas repartiéndoselo a partes iguales.
+     *
+     * Apagado, el calendario mide lo que miden sus celdas —36 px cada una— y es lo
+     * que quieres dentro de un `Popover`, donde estirarlo dejaría un globo enorme.
+     * Encendido, es la vista de mes de un planificador, que ocupa la página.
+     *
+     * Con varios meses, cada uno se lleva una fracción igual del ancho.
+     */
+    fullWidth?: boolean | undefined;
+};
+/**
+ * Calendario mensual navegable, sobre `react-day-picker`.
+ *
+ * Es la única dependencia pesada de la librería y entró a sabiendas: el
+ * calendario del planificador de contenido no se puede resolver con el control
+ * nativo. Para elegir una fecha dentro de un formulario existe `DateField`, que
+ * no arrastra nada.
+ *
+ * `animate` se queda apagado —es su valor por defecto— así que el cambio de mes
+ * no se desliza. Los días se marcan con color y borde, como todo lo demás.
+ *
+ * El idioma va en español por defecto porque los cinco proyectos lo están; se
+ * cambia pasando otro `locale` de date-fns.
+ *
+ * No trae el `style.css` de la librería: todas las clases salen de aquí, así que
+ * el consumidor no tiene que importar CSS de terceros ni pelearse con su
+ * especificidad.
+ */
+declare function Calendar({ className, classNames, showOutsideDays, fullWidth, ...props }: CalendarProps): react.JSX.Element;
+
+/**
+ * El contenedor de superficie del sistema, y la única definición de lo que es
+ * una tarjeta: `surface`, borde `hairline`, radio de tarjeta.
+ *
+ * Las tarjetas con dominio — `ArticleCard`, `TalkCard`, `CourseCard`,
+ * `LinkRow` — reutilizan estas mismas clases, así que si el radio o el borde
+ * cambian, cambian en todas a la vez.
+ *
+ * El documento daba a la tarjeta un fondo propio, `#0B1620`, un cuarto nivel de
+ * superficie entre abismo y fosa. No entra: no tiene par en modo claro, y una
+ * superficie sin par es un token que miente en la mitad de los proyectos. La
+ * tarjeta es `surface`, y el documento se corrige — ver `docs/decisiones.md`.
+ *
+ * El padding sí estaba mal: el documento pide 26 (`lg`) y aquí había 16 (`md`).
+ */
+declare const SUPERFICIE_TARJETA = "rounded-card border-hairline bg-surface border";
+/** El hover de la regla 6: solo el borde. Se aplica donde la tarjeta es pulsable. */
+declare const HOVER_TARJETA = "transition-standard hover:border-hairline-hover";
+declare function Card({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
+declare function CardHeader({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
+declare function CardTitle({ className, ...props }: ComponentPropsWithoutRef<'h3'>): react.JSX.Element;
+declare function CardDescription({ className, ...props }: ComponentPropsWithoutRef<'p'>): react.JSX.Element;
+declare function CardContent({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
+declare function CardFooter({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
+
+type CheckboxProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
+declare function Checkbox({ className, ...props }: CheckboxProps): react.JSX.Element;
+
+/**
+ * Código en línea, dentro de prosa.
+ *
+ * Existe porque no existía: cada consumidor escribía `<code className="font-mono">`
+ * a mano, y la story de marca lo hacía cuatro veces en un solo párrafo. Un
+ * `<code>` suelto hereda el tamaño del párrafo, así que dentro de `body` (18px)
+ * se veía un mono de 18px que el documento no tiene en ninguna parte.
+ *
+ * No es `CodeBlock`. El bloque es una isla de tema oscuro sobre casco con barra
+ * y botón de copiar; esto es una palabra dentro de una frase, y por eso se queda
+ * en la superficie de la página en vez de invertir el tema.
+ */
+type CodeProps = ComponentPropsWithoutRef<'code'>;
+declare function Code({ className, ...props }: CodeProps): react.JSX.Element;
+
+type DateFieldProps = Omit<ComponentPropsWithoutRef<'input'>, 'type'> & {
+    invalid?: boolean | undefined;
+    /** Añade la hora al campo. Es el `datetime-local` nativo. */
+    withTime?: boolean | undefined;
+};
+/**
+ * Un campo de fecha sobre el control nativo, no sobre un calendario propio.
+ *
+ * Es una decisión deliberada: `react-day-picker` habría sido la primera
+ * dependencia pesada de la librería, con su propio CSS y su propia animación de
+ * cambio de mes — que el sistema no permite. El control nativo trae gratis el
+ * teclado del sistema operativo, el formato según el idioma del usuario y el
+ * soporte de lector de pantalla, que es más de lo que un calendario a medida da
+ * sin trabajo.
+ *
+ * Cubre elegir una fecha dentro de un formulario. Un calendario mensual
+ * navegable es otra cosa y vive en el proyecto que lo necesita.
+ *
+ * El icono nativo del selector se tiñe con `color-scheme`, que es lo único que
+ * el navegador deja controlar: se ata al modo activo para que no aparezca un
+ * cuadradito blanco sobre fondo abismo.
+ */
+declare function DateField({ className, invalid, withTime, ...props }: DateFieldProps): react.JSX.Element;
+
+declare const Dialog: react.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const DialogClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+declare function DialogOverlay({ className, ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>): react.JSX.Element;
+/** Sin entrada animada: no hay escala ni desplazamiento en el sistema. */
+declare function DialogContent({ className, children, ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Content>): react.JSX.Element;
+declare function DialogHeader({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
+declare function DialogFooter({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
+declare function DialogTitle({ className, ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Title>): react.JSX.Element;
+declare function DialogDescription({ className, ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Description>): react.JSX.Element;
+
+declare const DropdownMenu: react.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSub: react.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+/** Sin animación de entrada: el menú aparece, no se despliega. */
+declare function DropdownMenuContent({ className, sideOffset, ...props }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>): react.JSX.Element;
+declare function DropdownMenuItem({ className, ...props }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>): react.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, ...props }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>): react.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>): react.JSX.Element;
+declare function DropdownMenuLabel({ className, ...props }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>): react.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>): react.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, children, ...props }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>): react.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>): react.JSX.Element;
+
+type InputProps = ComponentPropsWithoutRef<'input'> & {
+    /** Marca el control como inválido y tiñe el borde. */
+    invalid?: boolean;
+};
+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;
+type PaginationLinkProps = ComponentPropsWithoutRef<'a'> & {
+    isActive?: boolean;
+};
+declare function PaginationLink({ className, isActive, ...props }: PaginationLinkProps): react.JSX.Element;
+declare function PaginationPrevious({ className, ...props }: PaginationLinkProps): react.JSX.Element;
+declare function PaginationNext({ className, ...props }: PaginationLinkProps): react.JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: ComponentPropsWithoutRef<'span'>): react.JSX.Element;
+
+declare const Popover: react.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Radix le pone `role="dialog"` al contenido, y un diálogo sin nombre accesible
+ * no le dice nada a quien navega con lector de pantalla. Por eso el tipo exige
+ * uno de los dos: `aria-label` con el texto, o `aria-labelledby` apuntando al
+ * título que ya se ve en pantalla. No se puede olvidar porque no compila.
+ */
+type Etiquetado = {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} | {
+    'aria-labelledby': string;
+    'aria-label'?: never;
+};
+type PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & Etiquetado;
+/** Sin animación de entrada: aparece donde va a quedarse, como el resto. */
+declare function PopoverContent({ className, align, sideOffset, ...props }: PopoverContentProps): react.JSX.Element;
+
+type ProgressProps = ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
+    /**
+     * Nombre accesible de la barra. Es obligatorio a propósito: una barra de
+     * progreso sin nombre no dice de qué es el progreso, y ninguna otra parte del
+     * componente puede deducirlo.
+     */
+    label: string;
+    /** Arena en vez de bioluz, para progreso de curso. */
+    tone?: 'accent' | 'warm';
+};
+/**
+ * El ancho del indicador cambia, no se anima: el sistema no anima escala ni
+ * desplazamiento. `transition-standard` solo cubre color y borde, así que el
+ * salto de ancho es inmediato aunque la clase esté puesta.
+ */
+declare function Progress({ className, value, label, tone, ...props }: ProgressProps): react.JSX.Element;
+
+type RadioGroupProps = ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>;
+type RadioGroupItemProps = ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>;
+declare function RadioGroup({ className, ...props }: RadioGroupProps): react.JSX.Element;
+declare function RadioGroupItem({ className, ...props }: RadioGroupItemProps): react.JSX.Element;
+
+declare const Select: react.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: react.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: react.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & react.RefAttributes<HTMLSpanElement>>;
+declare function SelectTrigger({ className, children, ...props }: ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>): react.JSX.Element;
+/** Sin animación de entrada: el menú aparece, no se despliega. */
+declare function SelectContent({ className, children, position, ...props }: ComponentPropsWithoutRef<typeof SelectPrimitive.Content>): react.JSX.Element;
+declare function SelectLabel({ className, ...props }: ComponentPropsWithoutRef<typeof SelectPrimitive.Label>): react.JSX.Element;
+declare function SelectItem({ className, children, ...props }: ComponentPropsWithoutRef<typeof SelectPrimitive.Item>): react.JSX.Element;
+declare function SelectSeparator({ className, ...props }: ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>): react.JSX.Element;
+
+type SeparatorProps = ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>;
+/**
+ * `hairline`, no `border`: una división entre contenidos es sutil por
+ * definición. Para delimitar un control existe `border`, que es otro token.
+ */
+declare function Separator({ className, orientation, decorative, ...props }: SeparatorProps): react.JSX.Element;
+
+declare const Sheet: react.FC<DialogPrimitive.DialogProps>;
+declare const SheetTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * La segunda y última excepción a «nada de desplazamiento», aprobada a
+ * sabiendas: un panel que entra desde un borde se desliza por definición, y
+ * quieto sería un modal descentrado.
+ *
+ * Dura `--duration-standard` con `--ease-standard`, o sea lo mismo y con la
+ * misma curva que cualquier cambio de color del sistema, así que no introduce
+ * un tiempo nuevo. Va detrás de `motion-safe`: quien pidió menos movimiento lo
+ * ve aparecer sin deslizarse.
+ */
+declare const panel: (props?: ({
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SheetContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & VariantProps<typeof panel>;
+declare function SheetContent({ className, side, children, ...props }: SheetContentProps): react.JSX.Element;
+declare function SheetHeader({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
+declare function SheetBody({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
+declare function SheetFooter({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
+declare function SheetTitle({ className, ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Title>): react.JSX.Element;
+declare function SheetDescription({ className, ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Description>): react.JSX.Element;
+
+/**
+ * Barrido de 1.4s lineal, del documento.
+ *
+ * Es la TERCERA y última excepción a «el sistema no anima», junto al spinner del
+ * botón y el panel lateral. Las tres son realimentación de PROGRESO y no de
+ * estado, que es el criterio: un bloque quieto y un bloque que nunca va a cargar
+ * se ven exactamente igual, y el skeleton existe para decir «esto viene en
+ * camino», no «esto está vacío».
+ *
+ * Va detrás de `motion-safe`, así que se apaga solo para quien pidió menos
+ * movimiento — y ahí queda el bloque en `surfaceRaised`, que sigue comunicando
+ * la forma de lo que va a llegar.
+ *
+ * `still` lo apaga a mano, para las tablas largas: veinte filas barriendo a la
+ * vez es un estroboscopio, no una carga.
+ */
+type SkeletonProps = ComponentPropsWithoutRef<'div'> & {
+    /** Apaga el barrido. Para listas largas, donde muchas a la vez marean. */
+    still?: boolean | undefined;
+};
+declare function Skeleton({ className, still, ...props }: SkeletonProps): react.JSX.Element;
+
+type SwitchProps = ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>;
+/**
+ * La perilla cambia de posición, pero no se anima al hacerlo: la posición es el
+ * estado, no una transición. Lo único que transiciona es el color de la vía.
+ */
+declare function Switch({ className, ...props }: SwitchProps): react.JSX.Element;
+
+/** El contenedor scrollea en horizontal: la página nunca lo hace. */
+declare function Table({ className, ...props }: ComponentPropsWithoutRef<'table'>): react.JSX.Element;
+declare function TableHeader({ className, ...props }: ComponentPropsWithoutRef<'thead'>): react.JSX.Element;
+declare function TableBody({ className, ...props }: ComponentPropsWithoutRef<'tbody'>): react.JSX.Element;
+declare function TableFooter({ className, ...props }: ComponentPropsWithoutRef<'tfoot'>): react.JSX.Element;
+declare function TableRow({ className, ...props }: ComponentPropsWithoutRef<'tr'>): react.JSX.Element;
+declare function TableHead({ className, ...props }: ComponentPropsWithoutRef<'th'>): react.JSX.Element;
+declare function TableCell({ className, ...props }: ComponentPropsWithoutRef<'td'>): react.JSX.Element;
+declare function TableCaption({ className, ...props }: ComponentPropsWithoutRef<'caption'>): react.JSX.Element;
+
+type TabsProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root>;
+declare function Tabs({ className, ...props }: TabsProps): react.JSX.Element;
+declare function TabsList({ className, ...props }: ComponentPropsWithoutRef<typeof TabsPrimitive.List>): react.JSX.Element;
+declare function TabsTrigger({ className, ...props }: ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>): react.JSX.Element;
+declare function TabsContent({ className, ...props }: ComponentPropsWithoutRef<typeof TabsPrimitive.Content>): react.JSX.Element;
+
+type TextareaProps = ComponentPropsWithoutRef<'textarea'> & {
+    invalid?: boolean;
+};
+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;
+} & 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;
+
+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;
+} & 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';
+type TextProps = Omit<ComponentPropsWithoutRef<'p'>, 'color'> & VariantProps<typeof texto> & {
+    /** Etiqueta HTML. Por defecto, la que corresponde a la escala. */
+    as?: Etiqueta;
+    /** Renderiza el hijo en vez de crear un elemento, para envolver un enlace. */
+    asChild?: boolean;
+    /**
+     * Corta la línea a 68ch. Activo por defecto en `body`, que es la única
+     * escala pensada para leerse en párrafos largos.
+     */
+    measure?: boolean;
+};
+declare function Text({ className, variant, tone, as, asChild, measure, children, ...props }: TextProps): react.JSX.Element;
+
+type TarjetaProps = ComponentPropsWithoutRef<'a'> & {
+    /**
+     * Renderiza el hijo en vez de un `<a>`. Es como se enchufa el `Link` de Next
+     * o de Astro sin que la librería dependa de ningún enrutador.
+     */
+    asChild?: boolean | undefined;
+    children: ReactNode;
+};
+
+type ArticleCardProps = Omit<TarjetaProps, 'children' | 'title'> & {
+    title: ReactNode;
+    /** Entradilla. Se corta a dos líneas para que la rejilla no se desalinee. */
+    excerpt?: ReactNode;
+    /** Fecha ya formateada por el proyecto: la librería no impone locale. */
+    date?: ReactNode;
+    /** Valor de `datetime` del `<time>`, en ISO. */
+    dateTime?: string | undefined;
+    readingMinutes?: number | undefined;
+    tags?: readonly string[] | undefined;
+};
+/**
+ * La línea de metadatos va en `meta` y no en `eyebrow`: `18 ago 2026 · 8 min de
+ * lectura` es un dato, no un antetítulo, y en versalitas no era ninguna de las
+ * dos cosas.
+ *
+ * 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;
+
+/**
+ * La firma al pie del artículo: avatar 52px, nombre 15/500 y el rol en mono
+ * muted. Tres datos, ni uno más.
+ *
+ * NO recibe cara de mascota, y no es un descuido: es la misma regla que
+ * `PageHeader`. Una cara aquí sería humor en el sitio donde el lector está
+ * decidiendo si el autor sabe de lo que habla — justo lo que el contrato del
+ * manual excluye.
+ *
+ * El avatar del manual es la cabeza dentro de un círculo azul tiburón sólido,
+ * nunca la cara expresiva suelta.
+ */
+type AuthorCardProps = Omit<ComponentPropsWithoutRef<'div'>, 'role'> & {
+    name: string;
+    /** El rol. Va en mono: es un dato, no una frase. */
+    role?: ReactNode;
+    /** URL del avatar. Sin ella se muestran las iniciales. */
+    src?: string | undefined;
+    /** Una o dos frases. Se corta a 68ch sola. */
+    bio?: ReactNode;
+    /** Enlaces o botón de contacto. */
+    action?: ReactNode;
+};
+declare function AuthorCard({ name, role, src, bio, action, className, ...props }: AuthorCardProps): react.JSX.Element;
+
+/**
+ * Migrado desde `eduardoalvarez.dev/src/components/audio-player/index.tsx`.
+ *
+ * La lógica no se reescribió: los tres modos, el reproductor flotante, los
+ * saltos de ±15s, el ciclo de velocidad 1 → 1.25 → 1.5 → 1.75 → 2 y el volumen
+ * con mute son los mismos. Lo que cambió es la piel y las dos dependencias que
+ * un paquete no puede tener:
+ *
+ * - `Icon` del portafolio → los glifos viven ahora en `src/lib/glyphs.tsx`,
+ *   con los mismos trazados.
+ * - `trackEvent` de analítica → la prop `onFirstPlay`, que el consumidor
+ *   conecta a lo que use. Sigue disparándose una sola vez por carga.
+ *
+ * Y tres cosas que el sistema no permite:
+ *
+ * - La onda ya no anima `scaleY`. Las barras siguen ahí y siguen distinguiendo
+ *   reproducción de pausa por opacidad, pero no escalan.
+ * - El reproductor flotante aparece y desaparece en vez de deslizarse.
+ * - La barra de progreso ya no interpola el ancho.
+ *
+ * El giro del spinner de carga se queda, con la misma justificación que en
+ * `Button`: es realimentación de progreso, no de estado, y va en `motion-safe`.
+ */
+type AudioPlayerMode = 'full' | 'compact' | 'banner';
+type AudioPlayerProps = {
+    src: string;
+    title?: string;
+    /**
+     * `full` para páginas de podcast, `compact` para barras laterales y `banner`
+     * para artículos con narración. `compact` y `banner` traen además el
+     * reproductor flotante cuando el estático sale de vista.
+     */
+    mode?: AudioPlayerMode | undefined;
+    /**
+     * Se llama una sola vez por carga, la primera vez que el audio arranca.
+     * Aquí es donde el proyecto engancha su analítica; la librería no la trae.
+     */
+    onFirstPlay?: ((title?: string) => void) | undefined;
+};
+declare function AudioPlayer({ src, title, mode, onFirstPlay }: AudioPlayerProps): react.JSX.Element;
+
+type BlockquoteProps = Omit<ComponentPropsWithoutRef<'blockquote'>, 'cite'> & {
+    children: ReactNode;
+    /** Quién lo dijo. Se marca como `<cite>`. */
+    author?: ReactNode;
+    /** Dónde lo dijo: charla, artículo, conversación. */
+    source?: ReactNode;
+};
+/**
+ * La barra lateral es `accent`, que es el color interactivo, porque una cita es
+ * la voz de otro entrando en el texto. No lleva comillas decorativas: los
+ * glifos del sistema son SVG y una comilla de adorno no aporta nada que el
+ * borde y la sangría no digan ya.
+ */
+declare function Blockquote({ children, author, source, className, ...props }: BlockquoteProps): react.JSX.Element;
+
+/**
+ * La ruta como una ruta: `~ / artículos / cómo-escalar-un-equipo`.
+ *
+ * El `~` no es decoración ni un icono de casa: es el home del sistema de
+ * archivos, y por eso el breadcrumb es mono y no sans. Los separadores van en
+ * `border` (#22414F), que es el token más tenue que sigue leyéndose como línea.
+ *
+ * El último tramo es la página actual, así que no es un enlace y lleva
+ * `aria-current="page"`. Es la diferencia entre una miga de pan accesible y
+ * cuatro enlaces seguidos, uno de los cuales no va a ninguna parte.
+ */
+type Migaja = {
+    label: ReactNode;
+    /** Sin `href`, el tramo es texto. El último nunca debería llevarlo. */
+    href?: string | undefined;
+};
+type BreadcrumbProps = Omit<ComponentPropsWithoutRef<'nav'>, 'children'> & {
+    items: readonly Migaja[];
+    /** Destino del `~`. Por defecto, la raíz del sitio. */
+    homeHref?: string;
+    /** Etiqueta accesible del `~`, que si no se lee como una tilde suelta. */
+    homeLabel?: string;
+    /**
+     * Renderiza los enlaces con el hijo, para enchufar el `Link` de Next o Astro.
+     * Recibe cada `href` en el `props` del Slot.
+     */
+    linkAsChild?: ((props: {
+        href: string;
+        children: ReactNode;
+    }) => ReactNode) | undefined;
+};
+declare function Breadcrumb({ items, homeHref, homeLabel, linkAsChild, className, ...props }: BreadcrumbProps): react.JSX.Element;
+
+/**
+ * `brand.hull` es «casco · contorno y fondo de bloques de código», así que un
+ * bloque de código es oscuro también en modo claro. Por eso la raíz declara
+ * `data-theme="dark"`: todo lo de dentro — tinta, hairline, acento — pasa a la
+ * paleta oscura sin importar el tema de la página. Es la única isla de tema
+ * invertido del sistema, y es deliberada.
+ */
+type CodeBlockProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
+    /** El código ya resaltado, o texto plano. */
+    children: ReactNode;
+    /** Etiqueta del lenguaje. Se muestra en la barra superior. */
+    language?: string | undefined;
+    /** Texto que se copia al portapapeles. Sin esto, no se muestra el botón. */
+    copyText?: string | undefined;
+};
+declare function CodeBlock({ children, language, copyText, className, ...props }: CodeBlockProps): react.JSX.Element;
+
+type CourseCardProps = Omit<TarjetaProps, 'children' | 'title'> & {
+    title: ReactNode;
+    summary?: ReactNode;
+    /** Nivel, duración, número de lecciones: lo que el proyecto quiera listar. */
+    meta?: readonly ReactNode[] | undefined;
+    /** Etiqueta de estado: «próximamente», «gratis», «nuevo». */
+    status?: ReactNode;
+    /**
+     * Porcentaje cursado. Solo tiene sentido para quien ya está inscrito; cuando
+     * se pasa, la barra va en arena, que es el color del progreso de curso.
+     */
+    progress?: number | undefined;
+};
+declare function CourseCard({ title, summary, meta, status, progress, className, ...props }: CourseCardProps): react.JSX.Element;
+
+/**
+ * La regla más importante de la mascota, por fin como código.
+ *
+ * `catalogo.ts` y `page-header/index.tsx` la citaban los dos —«por eso
+ * `EmptyState` recibe una cara y `PageHeader` no»— y el componente no existía,
+ * así que la regla vivía en un comentario sobre un componente fantasma. Desde
+ * que la story de marca repite la frase, además, era una promesa publicada.
+ *
+ * `expresion` es OBLIGATORIA y no opcional: un estado vacío sin cara es la mitad
+ * del componente. Es el único sitio, junto con el 404, el error de servidor, el
+ * progreso de curso, la celebración, el toast y el «sin spam» del newsletter,
+ * donde una cara puede aparecer.
+ */
+type EmptyStateProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
+    /** La cara. Obligatoria: sin ella esto es un párrafo centrado. */
+    expresion: Cara;
+    title: ReactNode;
+    /** Una línea explicando qué falta o qué hacer. */
+    description?: ReactNode;
+    /** La acción que saca del estado vacío. Normalmente un botón terciario. */
+    action?: ReactNode;
+    /** Dónde se sirven los PNG de la marca. */
+    basePath?: string | undefined;
+};
+declare function EmptyState({ expresion, title, description, action, basePath, className, ...props }: EmptyStateProps): react.JSX.Element;
+
+/**
+ * El pie, y la firma CLI del sitio: `$ cd ~/eduardoalvarez.dev/2026`.
+ *
+ * El dominio sale de `naming.domain` y no de una cadena escrita a mano, por la
+ * misma razón que el wordmark: si cambia, cambia en los cinco proyectos a la
+ * vez.
+ *
+ * Los enlaces de redes son iconos SIN texto visible, así que `aria-label` no es
+ * una mejora: es lo único que los hace legibles. Por eso es obligatorio en el
+ * tipo y no una prop opcional que se olvide.
+ */
+type Red = {
+    /** Lo que reemplaza al texto visible. Obligatorio. */
+    label: string;
+    href: string;
+    /**
+     * El glifo, a 19px. Las marcas van en SÓLIDO (`fill`) y los iconos
+     * funcionales en trazo de 1.6. Nunca un emoji.
+     */
+    icon: ReactNode;
+};
+type FooterProps = ComponentPropsWithoutRef<'footer'> & {
+    social?: readonly Red[];
+    /** Año de la firma. */
+    year?: number;
+    /** Enlaces de texto: aviso legal, RSS, mapa del sitio. */
+    children?: ReactNode;
+};
+declare function Footer({ social, year, children, className, ...props }: FooterProps): react.JSX.Element;
+type FooterLinkProps = ComponentPropsWithoutRef<'a'> & {
+    asChild?: boolean | undefined;
+};
+declare function FooterLink({ asChild, className, ...props }: FooterLinkProps): react.JSX.Element;
+
+/**
+ * UNO por sitio. Es la única pieza del sistema que se gasta como el botón de
+ * 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.
+ *
+ * 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.
+ *
+ * El degradado viene de `--gradient-hero`, así que sigue el modo. No hay ángulo
+ * escrito a mano en ningún proyecto.
+ */
+type HeroProps = Omit<ComponentPropsWithoutRef<'section'>, 'title'> & {
+    title: ReactNode;
+    /** Mono, versalitas, en acento. */
+    eyebrow?: ReactNode;
+    description?: ReactNode;
+    /** Los botones. Aquí va el único `conversion` de la pantalla. */
+    action?: ReactNode;
+    /** La pose de Tiburoncín. Sin ella el hero es un panel con texto. */
+    pose?: Pose | undefined;
+    basePath?: string | undefined;
+};
+declare function Hero({ title, eyebrow, description, action, pose, basePath, className, ...props }: HeroProps): react.JSX.Element;
+
+type LinkRowProps = Omit<TarjetaProps, 'children'> & {
+    name: ReactNode;
+    description?: ReactNode;
+    /** Glifo SVG del destino. Nunca un emoji. */
+    icon?: ReactNode;
+    /** Marca el enlace como externo: añade la flecha y el `rel` seguro. */
+    external?: boolean | undefined;
+};
+/**
+ * Migrado desde `links/src/components/Card.astro`. El original escalaba la
+ * tarjeta al 102 %, subía el título un píxel y giraba y agrandaba el icono en
+ * hover — cuatro movimientos que el sistema no permite. Aquí el hover cambia el
+ * borde y el color del icono, y nada más.
+ */
+declare function LinkRow({ name, description, icon, external, className, ...props }: LinkRowProps): react.JSX.Element;
+
+/**
+ * La barra del sitio: 64px, abismo al 86 % y desenfoque de 14px detrás.
+ *
+ * Es composición de página y no un primitivo, pero vive en la librería por una
+ * razón concreta: la estética CLI de los items —mono, formato `./sección`— es lo
+ * primero que se desincroniza cuando cinco proyectos la reescriben cada uno por
+ * su cuenta.
+ *
+ * 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.
+ */
+type NavProps = ComponentPropsWithoutRef<'header'> & {
+    /** El logo, a la izquierda. */
+    brand?: ReactNode;
+    /** Los items de sección, en el centro. */
+    children?: ReactNode;
+    /** Acciones a la derecha: conversión, cambio de tema, buscar. */
+    actions?: ReactNode;
+};
+declare function Nav({ brand, children, actions, className, ...props }: NavProps): react.JSX.Element;
+type NavItemProps = ComponentPropsWithoutRef<'a'> & {
+    /** Sección actual: bioluz con subrayado de 1px. */
+    active?: boolean | undefined;
+    /** Renderiza el hijo en vez de un `<a>`, para el `Link` del enrutador. */
+    asChild?: boolean | undefined;
+};
+/**
+ * El `./` lo pone el componente, no quien lo usa.
+ *
+ * Es la misma decisión que el botón terciario: el formato es parte de la pieza,
+ * 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».
+ */
+declare function NavItem({ active, asChild, className, children, ...props }: NavItemProps): react.JSX.Element;
+
+/**
+ * Cuatro estados, y el aviso va DEBAJO del formulario.
+ *
+ * Reemplazar el formulario por el mensaje de éxito es lo que hace casi todo el
+ * mundo y es lo que rompe el caso real: alguien se suscribe con el correo
+ * equivocado y ya no tiene dónde volver a escribirlo. El campo se queda.
+ *
+ * El componente es presentacional: recibe `state` y emite `onSubmitEmail`. La
+ * llamada de red la hace el proyecto, porque cada uno tiene su proveedor y la
+ * librería no va a elegirlo por ellos.
+ *
+ * El aviso usa la SEGUNDA receta del sistema —`enfasis="fuerte"`, fondo al 10 %
+ * y borde sólido— porque va pegado bajo un campo que ya tiene borde: con la
+ * 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».
+ */
+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;
+    successMessage?: ReactNode;
+    errorMessage?: ReactNode;
+    /** La letra pequeña. Es el «sin spam», y por eso admite cara. */
+    disclaimer?: ReactNode;
+    expresion?: Cara | undefined;
+    basePath?: string | undefined;
+    submitLabel?: string;
+    placeholder?: string;
+    fieldLabel?: string;
+};
+declare function NewsletterForm({ title, description, state, onSubmitEmail, successMessage, errorMessage, disclaimer, expresion, basePath, submitLabel, placeholder, fieldLabel, className, ...props }: NewsletterFormProps): react.JSX.Element;
+
+/**
+ * Una sola cabecera en dos escalas, no dos componentes.
+ *
+ * El hero del portafolio y el de cursos resultaron ser el mismo esqueleto —
+ * eyebrow en acento, titular, párrafo acotado — con distinto tamaño. Separarlos
+ * en `Hero` y `PageHeader` habría duplicado la misma regla en dos sitios y
+ * habría dejado la puerta abierta a que se separaran con el tiempo.
+ *
+ * `display` para portadas, `page` para cabeceras de sección.
+ *
+ * No recibe cara de la mascota, ni en una escala ni en la otra: las caras van en
+ * estados vacíos, confirmaciones, errores, progreso de curso y celebración.
+ *
+ * Renderiza un `<header>`, y va DENTRO de `<main>`. Un `<header>` que cuelga
+ * directamente del `<body>` se convierte en landmark `banner`, y entonces
+ * compite con la cabecera del sitio: dos banners en una página es un fallo de
+ * accesibilidad. Dentro de `<main>` no es landmark y sí es la cabecera del
+ * contenido, que es lo que este componente es.
+ */
+declare const cabecera: (props?: ({
+    size?: "display" | "page" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type PageHeaderProps = Omit<ComponentPropsWithoutRef<'header'>, 'title'> & VariantProps<typeof cabecera> & {
+    title: ReactNode;
+    /** Mono, versalitas, en acento. Es la sección a la que pertenece la página. */
+    eyebrow?: ReactNode | undefined;
+    description?: ReactNode | undefined;
+    /**
+     * Ranura para las llamadas a la acción. Si aquí va un botón de conversión,
+     * es el único de la pantalla.
+     */
+    action?: ReactNode | undefined;
+    /** Nivel del titular. `h1` salvo que la página ya tenga uno. */
+    as?: 'h1' | 'h2' | undefined;
+};
+declare function PageHeader({ title, eyebrow, description, action, size, as, className, ...props }: PageHeaderProps): react.JSX.Element;
+
+/**
+ * La barra lateral del admin del blog.
+ *
+ * El `▸` lo pone el componente, igual que el `./` de `NavItem` y el `~` del
+ * breadcrumb: es la misma estética CLI y la misma decisión — el formato es parte
+ * de la pieza, no una convención que haya que recordar. Va `aria-hidden`.
+ *
+ * El pie lleva la versión y la rama (`v5.0.1 · main`) en la escala `meta`. No es
+ * decoración: en un admin es lo primero que se pregunta cuando algo se ve raro.
+ */
+type SidebarItemProps = ComponentPropsWithoutRef<'a'> & {
+    active?: boolean | undefined;
+    asChild?: boolean | undefined;
+    /** Contador a la derecha: borradores pendientes, media sin usar. */
+    badge?: ReactNode;
+};
+declare function SidebarItem({ active, asChild, badge, className, children, ...props }: SidebarItemProps): react.JSX.Element;
+type SidebarNavProps = ComponentPropsWithoutRef<'nav'> & {
+    /** Encabezado del panel. */
+    title?: ReactNode;
+    /** Versión y rama, al pie. */
+    version?: ReactNode;
+    branch?: ReactNode;
+};
+declare function SidebarNav({ title, version, branch, children, className, ...props }: SidebarNavProps): react.JSX.Element;
+
+/**
+ * Una métrica grande: el número en la escala `stat` y su nombre debajo.
+ *
+ * La regla del documento no es de estilo, es de semántica: «bioluz para lo
+ * neutro y arena SOLO cuando el número es el problema». Un 12 de aplicaciones
+ * 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.
+ */
+type StatProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
+    /** El número, ya formateado. La librería no impone locale. */
+    value: ReactNode;
+    /** Qué se está contando. Va en mono versalitas. */
+    label: ReactNode;
+    /** `alerta` solo cuando el número ES el problema. */
+    tone?: 'neutral' | 'alerta';
+    /** Con `progress`, la métrica se lee como avance y añade la barra. */
+    progress?: number | undefined;
+};
+declare function Stat({ value, label, tone, progress, className, ...props }: StatProps): react.JSX.Element;
+
+type TalkCardProps = Omit<TarjetaProps, 'children' | 'title'> & {
+    title: ReactNode;
+    /** Dónde se dio: la conferencia, el meetup, el equipo. */
+    event: ReactNode;
+    date?: ReactNode;
+    dateTime?: string | undefined;
+    location?: ReactNode;
+    /** Etiqueta corta de estado: «con vídeo», «próxima», «solo audio». */
+    status?: ReactNode;
+};
+declare function TalkCard({ title, event, date, dateTime, location, status, className, ...props }: TalkCardProps): react.JSX.Element;
+
+/**
+ * «En esta página». El índice del artículo largo.
+ *
+ * Es un `<nav>` con nombre accesible propio, no una lista suelta: en una página
+ * que ya tiene la barra del sitio y las migas, un tercer grupo de enlaces sin
+ * nombre es indistinguible de los otros dos para quien navega por landmarks.
+ *
+ * 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.
+ */
+type Entrada = {
+    /** El ancla, con `#`. */
+    href: string;
+    label: ReactNode;
+    /** Sangra la entrada. Solo dos niveles: h2 y h3. */
+    nested?: boolean | undefined;
+};
+type TableOfContentsProps = Omit<ComponentPropsWithoutRef<'nav'>, 'children'> & {
+    items: readonly Entrada[];
+    /** El título del bloque. */
+    title?: ReactNode;
+    /** Ancla de la sección visible. */
+    activeHref?: string | undefined;
+    linkAsChild?: ((props: {
+        href: string;
+        children: ReactNode;
+    }) => ReactNode) | undefined;
+};
+declare function TableOfContents({ items, title, activeHref, linkAsChild, className, ...props }: TableOfContentsProps): react.JSX.Element;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+type IconProps = SVGProps<SVGSVGElement>;
+declare const GitHub: (props: IconProps) => react.JSX.Element;
+declare const LinkedIn: (props: IconProps) => react.JSX.Element;
+declare const X: (props: IconProps) => react.JSX.Element;
+declare const Instagram: (props: IconProps) => react.JSX.Element;
+declare const Discord: (props: IconProps) => react.JSX.Element;
+declare const YouTube: (props: IconProps) => react.JSX.Element;
+declare const Rss: (props: IconProps) => react.JSX.Element;
+declare const Correo: (props: IconProps) => react.JSX.Element;
+
+declare const social_Correo: typeof Correo;
+declare const social_Discord: typeof Discord;
+declare const social_GitHub: typeof GitHub;
+declare const social_Instagram: typeof Instagram;
+declare const social_LinkedIn: typeof LinkedIn;
+declare const social_Rss: typeof Rss;
+declare const social_X: typeof X;
+declare const social_YouTube: typeof YouTube;
+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 };