reactigoded 1.0.0-beta.26

package/dist/components/Accordion/AccordionContext.d.ts

@@ -0,0 +1,59 @@
+export interface AccordionContextValue {
+    /** Devuelve si el item con ese `value` está abierto. */
+    isOpen: (value: string) => boolean;
+    /** Alterna el item con ese `value` respetando el modo (single/multiple). */
+    toggle: (value: string) => void;
+    /** Prefijo único para generar `id` de header/content por item. */
+    baseId: string;
+}
+export declare const AccordionContext: import('react').Context<AccordionContextValue | null>;
+/**
+ * Hook que expone el contexto de un `<Accordion>` (isOpen, toggle, baseId).
+ * Lo usan internamente `AccordionItem`, `AccordionHeader` y
+ * `AccordionContent`. También útil para consumers que quieran inspeccionar
+ * el estado del accordion (por ejemplo, mostrar "X de Y items abiertos").
+ *
+ * @example
+ * function OpenCounter({ values }: { values: string[] }) {
+ *   const { isOpen } = useAccordion();
+ *   const openCount = values.filter(isOpen).length;
+ *   return <span>{openCount}/{values.length} abiertos</span>;
+ * }
+ *
+ * @throws Error si se usa fuera de `<Accordion>`.
+ */
+export declare function useAccordion(): AccordionContextValue;
+export interface AccordionItemContextValue {
+    /** Identificador único del item (para `aria-controls`/`aria-labelledby`). */
+    value: string;
+    /** Si el item está abierto. */
+    open: boolean;
+    /** Alterna el item. */
+    toggle: () => void;
+    /** ID del header. */
+    headerId: string;
+    /** ID del panel de contenido. */
+    contentId: string;
+}
+export declare const AccordionItemContext: import('react').Context<AccordionItemContextValue | null>;
+/**
+ * Hook que expone el contexto de un `<AccordionItem>` (value, open, toggle,
+ * headerId, contentId). Lo usan internamente `AccordionHeader` y
+ * `AccordionContent`. También útil si construyes tu propio Header custom
+ * que necesita el estado open + el toggle.
+ *
+ * @example
+ * function CustomHeader({ children }: { children: ReactNode }) {
+ *   const { open, toggle, headerId, contentId } = useAccordionItem();
+ *   return (
+ *     <h3>
+ *       <button id={headerId} aria-expanded={open} aria-controls={contentId} onClick={toggle}>
+ *         {children} {open ? "▾" : "▸"}
+ *       </button>
+ *     </h3>
+ *   );
+ * }
+ *
+ * @throws Error si se usa fuera de `<AccordionItem>`.
+ */
+export declare function useAccordionItem(): AccordionItemContextValue;

package/dist/components/Accordion/AccordionHeader.d.ts

@@ -0,0 +1,22 @@
+import { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
+export interface AccordionHeaderProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
+    /** Texto/contenido del header. */
+    children: ReactNode;
+    /** Si `true`, oculta el icono indicador. */
+    hideIcon?: boolean | undefined;
+    /** Reemplaza el icono por defecto (▼). */
+    icon?: ReactNode | undefined;
+    /** Callback al togglear (además del toggle interno). */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    ref?: Ref<HTMLButtonElement> | undefined;
+}
+/**
+ * AccordionHeader — botón clicable que abre/cierra el item.
+ *
+ * Acepta keyboard navigation entre headers del mismo Accordion: ↑/↓ ciclan,
+ * Home/End van a extremos. Los items con `disabled` se saltan.
+ *
+ * Renderiza un `<button>` con `aria-expanded` y `aria-controls` apuntando al
+ * panel asociado.
+ */
+export declare function AccordionHeader({ className, children, hideIcon, icon, disabled, onOpenChange, onKeyDown, ref, ...rest }: AccordionHeaderProps): import("react").JSX.Element;

package/dist/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes, Ref } from 'react';
+export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Identificador único del item dentro del Accordion. */
+    value: string;
+    ref?: Ref<HTMLDivElement> | undefined;
+}
+/**
+ * AccordionItem — sección colapsable. Provee context con `value`/`open` y
+ * los IDs de header/content a los componentes anidados.
+ */
+export declare function AccordionItem({ value, className, children, ref, ...rest }: AccordionItemProps): import("react").JSX.Element;

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,8 @@
+export { Accordion } from './Accordion.js';
+export type { AccordionProps } from './Accordion.js';
+export { AccordionItem } from './AccordionItem.js';
+export type { AccordionItemProps } from './AccordionItem.js';
+export { AccordionHeader } from './AccordionHeader.js';
+export type { AccordionHeaderProps } from './AccordionHeader.js';
+export { AccordionContent } from './AccordionContent.js';
+export type { AccordionContentProps } from './AccordionContent.js';

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,39 @@
+import { HTMLAttributes, ReactNode, Ref } from 'react';
+export type AlertVariant = "success" | "warning" | "danger" | "info" | "brand" | "secondary" | "neutral";
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Color/semántica del alert. */
+    variant?: AlertVariant | undefined;
+    /** Icono opcional al inicio (suele ser un SVG o emoji). */
+    icon?: ReactNode | undefined;
+    /** Título destacado. */
+    title?: ReactNode | undefined;
+    /** Permite cerrar el alert (muestra botón ×). */
+    dismissible?: boolean | undefined;
+    /** Callback al pulsar el botón ×. Disparado tanto en modo controlado como uncontrolled. */
+    onClose?: (() => void) | undefined;
+    /** Texto a11y para el botón de cerrar. */
+    closeLabel?: string | undefined;
+    /** Si está abierto (modo controlado). */
+    open?: boolean | undefined;
+    /** Estado inicial (modo no controlado). Por defecto `true`. */
+    defaultOpen?: boolean | undefined;
+    /** Callback con el siguiente estado. Modo controlado o uncontrolled. */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    ref?: Ref<HTMLDivElement> | undefined;
+}
+/**
+ * Alert — mensaje de feedback con variants semánticos.
+ *
+ * Variants `danger`/`warning` usan `role="alert"` (anuncio assertivo);
+ * el resto `role="status"` con `aria-live="polite"`. Soporta `dismissible`
+ * controlado o no, icono y título.
+ *
+ * @example
+ * <Alert variant="success" title="Guardado">
+ *   Cambios persistidos correctamente.
+ * </Alert>
+ * <Alert variant="warning" dismissible onOpenChange={setOpen}>
+ *   Tu plan vence en 3 días.
+ * </Alert>
+ */
+export declare function Alert({ variant, icon, title, dismissible, onClose, closeLabel, open, defaultOpen, onOpenChange, className, children, ref, ...rest }: AlertProps): import("react").JSX.Element | null;

package/dist/components/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export { Alert } from './Alert.js';
+export type { AlertProps, AlertVariant } from './Alert.js';

package/dist/components/AlertDialog/AlertDialogClose.d.ts

@@ -0,0 +1,64 @@
+import { ButtonHTMLAttributes, Ref } from 'react';
+export interface AlertDialogCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: Ref<HTMLButtonElement> | undefined;
+    /**
+     * Slot pattern (D14): si `true`, clona el child del consumer y le aplica
+     * close semantics sin renderizar un `<button>` propio ni aplicar
+     * `ig-dialog-close`. Patrón canónico para CTAs del footer del
+     * AlertDialog (Cancelar, Confirmar, etc.):
+     * `<AlertDialogClose asChild><Button variant="danger">Borrar</Button></AlertDialogClose>`.
+     *
+     * Sin `asChild`, `AlertDialogClose` renderiza un icon-button "×" idéntico
+     * a `DialogClose` (cierre asimetría léxica heredada — D14 Bloque B
+     * BREAKING vs beta.26 donde AlertDialogClose era unstyled).
+     */
+    asChild?: boolean | undefined;
+}
+/**
+ * AlertDialogClose — botón que cierra el AlertDialog via contexto. Dos modos:
+ *
+ * - **Default** (`asChild=false`): renderiza el icon-button "×" tradicional
+ *   con clase `ig-dialog-close` (forzado 2rem × 2rem). Coherente con
+ *   `DialogClose` (D14 Bloque B cerró la asimetría léxica heredada).
+ *   **BREAKING vs beta.26**: antes era unstyled `<button>` para usar como
+ *   CTA con `className="ig-btn ig-btn-*"`. Migración: usa `asChild` para
+ *   ese caso.
+ *
+ * - **Slot pattern** (`asChild=true`, D14): clona el child del consumer y
+ *   le aplica el close handler + aria-label. No aplica `ig-dialog-close`.
+ *   Reemplaza el viejo uso unstyled. Permite CTAs ricos:
+ *   `<AlertDialogClose asChild><Button variant="danger">Sí, borrar</Button></AlertDialogClose>`.
+ *
+ * Si necesitas el X del header dentro de un AlertDialog, usar
+ * `<AlertDialogClose>` sin children (o `<DialogClose>` directamente — es
+ * el mismo Provider, mismo contexto, sigue funcionando).
+ *
+ * Tolerante a uso fuera de `<AlertDialog>` / `<Dialog>`: si no hay
+ * contexto, el componente sigue siendo un botón pero el click NO cierra
+ * nada (responsabilidad del consumer via `onClick`).
+ *
+ * @example
+ * // Header X icon (default tras D14):
+ * <AlertDialogContent>
+ *   <DialogHeader>
+ *     <h2>Confirmar borrado</h2>
+ *     <AlertDialogClose />
+ *   </DialogHeader>
+ *   ...
+ * </AlertDialogContent>
+ *
+ * @example
+ * // Footer CTAs (Slot pattern, reemplaza el viejo uso unstyled):
+ * <AlertDialogFooter>
+ *   <AlertDialogClose asChild>
+ *     <Button variant="secondary">Cancelar</Button>
+ *   </AlertDialogClose>
+ *   <AlertDialogClose asChild>
+ *     <Button variant="danger">Sí, borrar</Button>
+ *   </AlertDialogClose>
+ * </AlertDialogFooter>
+ *
+ * Es client-component (`"use client"`) porque consume el `DialogContext`
+ * via hook — NO marcado server-safe.
+ */
+export declare function AlertDialogClose({ asChild, className, children, type, "aria-label": consumerAriaLabel, onClick: consumerOnClick, ref, ...rest }: AlertDialogCloseProps): import("react").JSX.Element;

package/dist/components/AlertDialog/AlertDialogContent.d.ts

@@ -0,0 +1,58 @@
+import { Ref } from 'react';
+import { DialogContentProps } from '../Dialog/index.js';
+export interface AlertDialogContentProps extends DialogContentProps {
+    ref?: Ref<HTMLDialogElement> | undefined;
+}
+/**
+ * AlertDialogContent — el `<dialog>` HTML nativo con `role="alertdialog"`.
+ *
+ * Diferencias DS-wide respecto a `<DialogContent>`:
+ *
+ * 1. **`role="alertdialog"`** (vs `role="dialog"` automático del `<dialog>`).
+ *    WAI-ARIA APG: `alertdialog` indica que el modal demanda atención
+ *    del usuario y NO debe cerrarse sin decisión consciente. Browsers
+ *    aplican `role="dialog"` por defecto al `<dialog>`; lo
+ *    sobreescribimos explícitamente.
+ *
+ * 2. **`closeOnBackdrop={false}` por defecto** (vs `true` en
+ *    `DialogContent`). Un AlertDialog típico ("¿Borrar permanentemente?")
+ *    requiere un click consciente en Cancel/Confirm. Permitir cerrar por
+ *    click outside ablanda la intención del role. El consumer puede
+ *    sobreescribir pasando `closeOnBackdrop={true}` si su caso es más
+ *    suave (ej. notice no destructivo).
+ *
+ * `closeOnEsc` sigue `true` por defecto — ESC es ergonómico universal
+ * y los SR lo anuncian como cancel implícito; no contraviene el
+ * carácter consciente del role.
+ *
+ * Composición: igual que DialogContent — `<AlertDialogHeader>`,
+ * `<AlertDialogBody>`, `<AlertDialogFooter>` (todos aliases de los
+ * componentes equivalentes de Dialog) más `<AlertDialogClose>`.
+ *
+ * Debe usarse dentro de `<AlertDialog>` (que es alias del Provider
+ * `<Dialog>`).
+ *
+ * @example
+ * <AlertDialog defaultOpen={false}>
+ *   <AlertDialogTrigger className="ig-btn ig-btn-danger">
+ *     Borrar permanentemente
+ *   </AlertDialogTrigger>
+ *   <AlertDialogContent>
+ *     <AlertDialogHeader>
+ *       <h2>Confirmar borrado</h2>
+ *     </AlertDialogHeader>
+ *     <AlertDialogBody>
+ *       Esta acción es irreversible. ¿Continuar?
+ *     </AlertDialogBody>
+ *     <AlertDialogFooter>
+ *       <AlertDialogClose className="ig-btn ig-btn-secondary">
+ *         Cancelar
+ *       </AlertDialogClose>
+ *       <AlertDialogClose className="ig-btn ig-btn-danger">
+ *         Sí, borrar
+ *       </AlertDialogClose>
+ *     </AlertDialogFooter>
+ *   </AlertDialogContent>
+ * </AlertDialog>
+ */
+export declare function AlertDialogContent({ closeOnBackdrop, role, ref, ...rest }: AlertDialogContentProps): import("react").JSX.Element;

package/dist/components/AlertDialog/index.d.ts

@@ -0,0 +1,14 @@
+export { Dialog as AlertDialog } from '../Dialog/index.js';
+export type { DialogProps as AlertDialogProps } from '../Dialog/index.js';
+export { AlertDialogContent } from './AlertDialogContent.js';
+export type { AlertDialogContentProps } from './AlertDialogContent.js';
+export { DialogTrigger as AlertDialogTrigger } from '../Dialog/index.js';
+export type { DialogTriggerProps as AlertDialogTriggerProps } from '../Dialog/index.js';
+export { DialogHeader as AlertDialogHeader } from '../Dialog/index.js';
+export type { DialogHeaderProps as AlertDialogHeaderProps } from '../Dialog/index.js';
+export { DialogBody as AlertDialogBody } from '../Dialog/index.js';
+export type { DialogBodyProps as AlertDialogBodyProps } from '../Dialog/index.js';
+export { DialogFooter as AlertDialogFooter } from '../Dialog/index.js';
+export type { DialogFooterProps as AlertDialogFooterProps } from '../Dialog/index.js';
+export { AlertDialogClose } from './AlertDialogClose.js';
+export type { AlertDialogCloseProps } from './AlertDialogClose.js';

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,62 @@
+import { HTMLAttributes, Ref } from 'react';
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type AvatarStatus = "online" | "offline" | "busy" | "away";
+interface AvatarBase extends HTMLAttributes<HTMLDivElement> {
+    size?: AvatarSize | undefined;
+    /** Cuadrado (default) → con bordes ligeramente redondeados; `rounded` lo hace círculo. */
+    rounded?: boolean | undefined;
+    /** Punto de estado en la esquina inferior derecha. */
+    status?: AvatarStatus | undefined;
+    /**
+     * Override del `aria-label` del punto de estado, para i18n. Si no se
+     * pasa, se usa "Estado: {label en español}". Pasa la traducción
+     * completa, no solo la palabra de estado.
+     */
+    statusLabel?: string | undefined;
+    ref?: Ref<HTMLDivElement> | undefined;
+}
+interface AvatarImage extends AvatarBase {
+    src: string;
+    alt: string;
+    /**
+     * Fallback opcional de iniciales si la imagen falla al cargar
+     * (M-10 gate review). Si la `<img>` dispara `error`, se renderizan
+     * estas iniciales en su lugar y se preserva la a11y. Sin `initials`
+     * el avatar queda vacío al fallar — el consumer es responsable de
+     * dar fallback explícito.
+     */
+    initials?: string | undefined;
+    /**
+     * Estrategia de carga del `<img>`. Por defecto `"lazy"` para no
+     * bloquear el LCP cuando el avatar está fuera del viewport (M-10).
+     * Pasa `"eager"` si el avatar es above-the-fold y crítico para LCP.
+     */
+    loading?: "lazy" | "eager" | undefined;
+}
+interface AvatarInitials extends AvatarBase {
+    src?: never;
+    alt?: never;
+    initials: string;
+    loading?: never;
+}
+export type AvatarProps = AvatarImage | AvatarInitials;
+/**
+ * Avatar — imagen de usuario o iniciales.
+ *
+ * Pasa `src` + `alt` para imagen, o `initials` para fallback de texto.
+ * `status` añade un punto de estado (`online`, `offline`, `busy`, `away`).
+ *
+ * **M-10 (gate review)**: si pasas `src` Y `initials`, las iniciales
+ * actúan como fallback automático cuando la imagen falla a cargar
+ * (`onError` del `<img>`). Por defecto las imágenes cargan con
+ * `loading="lazy"`; pasa `loading="eager"` para avatares
+ * above-the-fold críticos para LCP.
+ *
+ * @example // imagen con fallback automático a iniciales
+ * <Avatar src="/avatar.jpg" alt="Iván" initials="IV" />
+ *
+ * @example // solo iniciales
+ * <Avatar initials="IV" />
+ */
+export declare function Avatar(props: AvatarProps): import("react").JSX.Element;
+export {};

package/dist/components/Avatar/AvatarGroup.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, Ref } from 'react';
+export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement> | undefined;
+}
+/**
+ * AvatarGroup — agrupa varios `Avatar` solapados (típico para listar miembros).
+ *
+ * Coloca avatares directamente como children; el CSS los solapa via offset
+ * negativo.
+  *
+ * @server-safe
+ */
+export declare function AvatarGroup({ className, children, ref, ...rest }: AvatarGroupProps): import("react").JSX.Element;

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,4 @@
+export { Avatar } from './Avatar.js';
+export type { AvatarProps, AvatarSize, AvatarStatus } from './Avatar.js';
+export { AvatarGroup } from './AvatarGroup.js';
+export type { AvatarGroupProps } from './AvatarGroup.js';

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,33 @@
+import { HTMLAttributes, Ref } from 'react';
+export type BadgeVariant = "brand" | "secondary" | "success" | "warning" | "danger" | "info";
+export type BadgeSize = "sm" | "md" | "lg";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Variante de color. Por defecto `"brand"`. */
+    variant?: BadgeVariant | undefined;
+    /** Tamaño. `"md"` (default) no añade clase modificadora. */
+    size?: BadgeSize | undefined;
+    /** Pill/píldora con esquinas totalmente redondeadas. */
+    pill?: boolean | undefined;
+    /** Outline en vez de relleno sólido. */
+    outline?: boolean | undefined;
+    /**
+     * Modo "punto": un círculo sin texto. Cuando `dot=true`, los `children`
+     * se ignoran visualmente y se mueven a `aria-label` para SR. Útil como
+     * indicador de estado (online, notificación, etc.).
+     */
+    dot?: boolean | undefined;
+    ref?: Ref<HTMLSpanElement> | undefined;
+}
+/**
+ * Badge — etiqueta breve de estado o categoría. Inline, no clickeable
+ * (si necesitas algo clickeable usa Chip o Button).
+ *
+ * @example
+ * <Badge>Nuevo</Badge>
+ * <Badge variant="success" pill>Activo</Badge>
+ * <Badge variant="danger" outline>Bloqueado</Badge>
+ * <Badge variant="success" dot>Conectado</Badge>
+ *
+ * @server-safe
+ */
+export declare function Badge({ variant, size, pill, outline, dot, className, children, ref, role: roleProp, "aria-label": ariaLabelProp, ...rest }: BadgeProps): import("react").JSX.Element;

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge.js';
+export type { BadgeProps, BadgeVariant, BadgeSize } from './Badge.js';

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes, ReactNode, Ref } from 'react';
+export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    /** Separador entre items. Por defecto `"/"`. Puede ser nodo (icono). */
+    separator?: ReactNode | undefined;
+    ref?: Ref<HTMLElement> | undefined;
+}
+/**
+ * Breadcrumb — `<nav>` con jerarquía de navegación. Pasa `BreadcrumbItem`s
+ * como children; el componente intercala el `separator` automáticamente.
+ *
+ * El último item debería tener `current=true` (renderiza `<span aria-current="page">`
+ * en vez de `<a>`).
+ */
+export declare function Breadcrumb({ separator, className, children, ref, ...rest }: BreadcrumbProps): import("react").JSX.Element;

package/dist/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -0,0 +1,21 @@
+import { AnchorHTMLAttributes, HTMLAttributes, Ref } from 'react';
+type BreadcrumbItemAsCurrent = HTMLAttributes<HTMLSpanElement> & {
+    /** Marca este item como la página actual (renderiza `<span aria-current="page">`). */
+    current: true;
+    href?: never;
+    ref?: Ref<HTMLSpanElement> | undefined;
+};
+type BreadcrumbItemAsLink = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    current?: false | undefined;
+    ref?: Ref<HTMLAnchorElement> | undefined;
+};
+export type BreadcrumbItemProps = BreadcrumbItemAsCurrent | BreadcrumbItemAsLink;
+/**
+ * BreadcrumbItem — un item de un `Breadcrumb`. Si `current=true`, se
+ * renderiza como `<span>` con `aria-current="page"` (no clickable). En caso
+ * contrario es un `<a>` con todos los atributos de anchor.
+  *
+ * @server-safe
+ */
+export declare function BreadcrumbItem(props: BreadcrumbItemProps): import("react").JSX.Element;
+export {};

package/dist/components/Breadcrumb/index.d.ts

@@ -0,0 +1,4 @@
+export { Breadcrumb } from './Breadcrumb.js';
+export type { BreadcrumbProps } from './Breadcrumb.js';
+export { BreadcrumbItem } from './BreadcrumbItem.js';
+export type { BreadcrumbItemProps } from './BreadcrumbItem.js';

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,61 @@
+import { ButtonHTMLAttributes, Ref } from 'react';
+/**
+ * Variantes semánticas de color (las 6 cardinales del DS). Cada una
+ * corresponde a una clase `.ig-btn-<variant>` (solid) y a su par
+ * `.ig-btn-outline-<variant>` / `.ig-btn-ghost-<variant>` para apariencias.
+ *
+ * `outline`, `ghost` y `link` ya NO viven aquí — pasaron a `appearance`
+ * (1.0.0-beta.1) para separar el eje "color/semántica" del eje
+ * "estilo visual". Antes se podía hacer `variant="outline"` Y
+ * `appearance="outline"`: redundante y confuso.
+ */
+export type ButtonVariant = "brand" | "secondary" | "success" | "warning" | "danger" | "info";
+/**
+ * Tamaños del botón. `md` es el por defecto (sin clase de tamaño aplicada).
+ * Los demás corresponden a `.ig-btn-<size>`.
+ */
+export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * Apariencia visual del botón. Combina con `variant` para producir la clase
+ * CSS final.
+ *
+ * - `"solid"` (default): fondo sólido del color de la variant → `ig-btn-<variant>`.
+ * - `"outline"`: borde del color, fondo transparente → `ig-btn-outline-<variant>`.
+ * - `"ghost"`: sin borde, hover sutil → `ig-btn-ghost-<variant>`.
+ * - `"link"`: aspecto de link de texto → `ig-btn-link` (variant ignorado).
+ */
+export type ButtonAppearance = "solid" | "outline" | "ghost" | "link";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Variante semántica de color. Por defecto `"brand"`. */
+    variant?: ButtonVariant | undefined;
+    /** Apariencia visual. Por defecto `"solid"`. */
+    appearance?: ButtonAppearance | undefined;
+    /** Tamaño. `"md"` (default) no añade clase modificadora. */
+    size?: ButtonSize | undefined;
+    /** Muestra spinner y bloquea clicks. */
+    loading?: boolean | undefined;
+    /** Ocupa el ancho completo del contenedor. */
+    block?: boolean | undefined;
+    /** Botón solo-icono (cuadrado, padding equilibrado). */
+    icon?: boolean | undefined;
+    /** Ref al `<button>` subyacente. En React 19 es prop normal. */
+    ref?: Ref<HTMLButtonElement> | undefined;
+}
+/**
+ * Botón base del design system.
+ *
+ * API en dos ejes ortogonales: `variant` (color/semántica) × `appearance`
+ * (estilo visual). Junto con `size`/`loading`/`block`/`icon` cubre todos los
+ * casos sin combinaciones redundantes.
+ *
+ * @example
+ * <Button onClick={save}>Guardar</Button>
+ * <Button variant="danger" loading>Eliminando…</Button>
+ * <Button variant="success" appearance="outline">OK</Button>
+ * <Button appearance="link">Saber más</Button>
+ * <Button icon aria-label="Favorito">★</Button>
+ *
+ * @server-safe Renderiza determinísticamente en server (sin DOM access
+ * en render path). Compatible con React Server Components y SSR puro.
+ */
+export declare function Button({ variant, appearance, size, loading, block, icon, disabled, className, children, ref, ...rest }: ButtonProps): import("react").JSX.Element;

package/dist/components/Button/IconButton.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode, Ref } from 'react';
+import { ButtonProps } from './Button.js';
+/**
+ * Props del IconButton: hereda todo de `Button` excepto `icon`
+ * (forzado a `true` por el componente) y exige `aria-label` como
+ * required vía TS.
+ */
+export interface IconButtonProps extends Omit<ButtonProps, "icon" | "aria-label"> {
+    /**
+     * Etiqueta accesible obligatoria. Como el botón solo contiene un
+     * icono, los lectores de pantalla necesitan este texto para
+     * anunciar la acción.
+     *
+     * El typing es intencionalmente required: TS impide montar un
+     * `<IconButton>` sin `aria-label` en compile-time, sin necesidad
+     * de un dev warn runtime.
+     */
+    "aria-label": string;
+    /** Icono visual (svg, span con emoji, glyph, etc.). */
+    children: ReactNode;
+    ref?: Ref<HTMLButtonElement> | undefined;
+}
+/**
+ * IconButton — botón solo-icono accesible. Sub-componente de Button
+ * con `icon=true` enforced y `aria-label` como prop required vía TS.
+ *
+ * Cuando un Button contiene solo un icono (sin texto visible para
+ * lectores de pantalla), el `aria-label` es obligatorio por
+ * accesibilidad. Olvidarlo es un error frecuente que axe captura solo
+ * en runtime; este sub-componente lo eleva a error de compilación.
+ *
+ * Hereda todo el resto de `ButtonProps` (variant, appearance, size,
+ * loading, block, disabled). El consumer no puede pasar `icon={false}`
+ * por la firma `Omit<ButtonProps, "icon">`.
+ *
+ * @example
+ * <IconButton aria-label="Favorito" variant="brand">★</IconButton>
+ * <IconButton aria-label="Cerrar" appearance="ghost" size="sm">×</IconButton>
+ * <IconButton aria-label="Editar" variant="info" loading>
+ *   <PencilIcon />
+ * </IconButton>
+ *
+ * @example // ✗ TS error: aria-label is required
+ * <IconButton variant="brand">★</IconButton>
+  *
+ * @server-safe
+ */
+export declare function IconButton({ children, ref, ...rest }: IconButtonProps): import("react").JSX.Element;

package/dist/components/Button/index.d.ts

@@ -0,0 +1,4 @@
+export { Button } from './Button.js';
+export type { ButtonProps, ButtonVariant, ButtonSize, ButtonAppearance, } from './Button.js';
+export { IconButton } from './IconButton.js';
+export type { IconButtonProps } from './IconButton.js';

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,79 @@
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, ReactElement } from 'react';
+export type CardVariant = "brand" | "secondary" | "success" | "warning" | "danger" | "info";
+/**
+ * Apariencia visual cuando hay `variant`:
+ * - `"outline"` (default): borde del color, fondo neutro → `ig-card-<variant>`.
+ * - `"filled"`: fondo sólido del color → `ig-card-<variant>-filled`.
+ *
+ * Sin `variant` la apariencia se ignora (la card es plana).
+ */
+export type CardAppearance = "outline" | "filled";
+/**
+ * Props propios del Card (sin contar los HTML estándar del elemento subyacente).
+ */
+interface CardOwnProps<C extends ElementType = "div"> {
+    /**
+     * Elemento HTML o componente que renderea la card. Por defecto `"div"`.
+     * Acepta strings (`"article"`, `"section"`, `"a"`, …) y componentes
+     * (`as={Link}`, `as={NextLink}`).
+     *
+     * Cuando pasas un componente, las props específicas del componente
+     * (`href` para `<a>`, `to` para react-router, etc.) se tipan
+     * automáticamente.
+     */
+    as?: C | undefined;
+    /** Color semántico de la card. */
+    variant?: CardVariant | undefined;
+    /** Apariencia visual. Por defecto `"outline"`. Solo aplica si hay `variant`. */
+    appearance?: CardAppearance | undefined;
+    /** Borde más marcado. */
+    bordered?: boolean | undefined;
+    /** Sombra elevada. */
+    elevated?: boolean | undefined;
+    /** Efecto glass (backdrop-filter). */
+    glass?: boolean | undefined;
+    /** Hover lift + cursor pointer (úsalo cuando la card es clickable). */
+    interactive?: boolean | undefined;
+    /**
+     * Ref polimórfica al elemento subyacente. El tipo se infiere de `as`.
+     */
+    ref?: ComponentPropsWithRef<C>["ref"] | undefined;
+}
+export type CardProps<C extends ElementType = "div"> = CardOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof CardOwnProps<C>>;
+/**
+ * Card — contenedor de contenido con variantes de color y modificadores
+ * visuales (bordered, elevated, glass, interactive).
+ *
+ * **Polimórfica**: por defecto renderea `<div>`, pero acepta cualquier
+ * elemento HTML o componente vía la prop `as`.
+ *
+ * @example
+ * // Como elemento semántico
+ * <Card as="article" elevated>...</Card>
+ *
+ * // Como link nativo
+ * <Card as="a" href="/posts/1" interactive>...</Card>
+ *
+ * // Como componente (react-router, next, etc.)
+ * <Card as={Link} to="/posts/1" interactive>...</Card>
+ *
+ * **Card como botón**: pasa `interactive` + `role="button"` + `onClick`.
+ * Cuando se cumplen las 3 condiciones, la card activa Enter/Space
+ * automáticamente como un `<button>` nativo (la keyboard activation es
+ * obligatoria por WAI-ARIA APG si añades `role="button"` a un elemento no
+ * interactivo) y aplica `tabIndex={0}` por defecto para que sea
+ * focuseable. Si pasas un `tabIndex` explícito (incluido `-1`) tu valor
+ * se respeta. Si pasas tu propio `onKeyDown`, el handler interno se
+ * encadena después — tu lógica corre primero y puedes llamar
+ * `event.preventDefault()` para evitar la activación por defecto.
+ *
+ * Combina con `CardHeader`, `CardBody`, `CardFooter`, `CardImage`,
+ * `CardDivider` para layouts compuestos.
+ *
+ * @example
+ * <Card interactive role="button" onClick={() => navigate("/x")}>
+ *   <CardBody>Click o Enter/Space para navegar</CardBody>
+ * </Card>
+ */
+export declare function Card<C extends ElementType = "div">({ as, variant, appearance, bordered, elevated, glass, interactive, className, children, ref, role, onClick, onKeyDown, ...rest }: CardProps<C>): ReactElement;
+export {};