@eduardoalvarez/arrecife 0.4.0 → 0.5.0

package/dist/index.js

@@ -1,8 +1,8 @@
 export { tokens } from './chunk-VPT32GPG.js';
 import { alternarTema, temaActual, escucharTema } from './chunk-KPZNNMV5.js';
 export { TEMA_ATRIBUTO, TEMA_CLAVE, TEMA_EVENTO, alternarTema, aplicarTema, escucharTema, scriptTema, temaActual, temaGuardado, temaPreferido } from './chunk-KPZNNMV5.js';
-import { CaraDeMascota, Mascota } from './chunk-TB3IYPOD.js';
-export { CaraDeMascota, Isotipo, Logo, Mascota } from './chunk-TB3IYPOD.js';
+import { CaraDeMascota, Mascota } from './chunk-YZ2SDOVZ.js';
+export { CaraDeMascota, Isotipo, Logo, Mascota } from './chunk-YZ2SDOVZ.js';
 export { RUTA_ASSETS, aletas, caras, listaCaras, listaPoses, poses, usoDeCara } from './chunk-E3OMP2DL.js';
 import { Label } from './chunk-ZEOQKRQ7.js';
 export { Label } from './chunk-ZEOQKRQ7.js';
@@ -19,6 +19,7 @@ import { cva } from 'class-variance-authority';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { Slot } from '@radix-ui/react-slot';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { useId, useState, useEffect, useSyncExternalStore, useRef, useCallback } from 'react';
 import { es } from 'date-fns/locale';
 import { DayPicker } from 'react-day-picker';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -32,8 +33,8 @@ 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 { useSyncExternalStore, useRef, useState, useEffect, useCallback, useId } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { format } from 'date-fns';
 
 function Glyph({ children, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -87,6 +88,10 @@ var Spinner = (props) => /* @__PURE__ */ jsxs(
     ]
   }
 );
+var Camara = (props) => /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M2 5.5h2.6l1-1.5h4.8l1 1.5H14v7.5H2z" }),
+  /* @__PURE__ */ jsx("circle", { cx: "8", cy: "9", r: "2.4" })
+] });
 var Sol = (props) => /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
   /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "3" }),
   /* @__PURE__ */ jsx("path", { d: "M8 1.5v1.2M8 13.3v1.2M14.5 8h-1.2M2.7 8H1.5M12.6 3.4l-.85.85M4.25 11.75l-.85.85M12.6 12.6l-.85-.85M4.25 4.25l-.85-.85" })
@@ -191,7 +196,17 @@ function AccordionContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(AccordionPrimitive.Content, { className: "overflow-hidden", ...props, children: /* @__PURE__ */ jsx("div", { className: cn("pb-step-md font-sans text-ui text-text-secondary max-w-measure", className), children }) });
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Content,
+    {
+      className: cn(
+        "overflow-hidden",
+        "motion-safe:data-[state=open]:desplegar motion-safe:data-[state=closed]:replegar"
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: cn("pb-step-md font-sans text-ui text-text-secondary max-w-measure", className), children })
+    }
+  );
 }
 var alert = cva("w-full rounded-card border p-step-md font-sans text-ui", {
   variants: {
@@ -471,6 +486,68 @@ function AvatarFallback({
     }
   );
 }
+function AvatarUpload({
+  src,
+  fallback,
+  onSelectFile,
+  accept = "image/*",
+  label = "Cambiar la foto",
+  size: size2,
+  disabled = false,
+  className,
+  ...props
+}) {
+  const id = useId();
+  const [previa, setPrevia] = useState(null);
+  useEffect(() => {
+    if (!previa) return;
+    return () => URL.revokeObjectURL(previa);
+  }, [previa]);
+  function elegir(evento) {
+    const archivo = evento.target.files?.[0];
+    if (!archivo) return;
+    setPrevia(URL.createObjectURL(archivo));
+    onSelectFile?.(archivo);
+    evento.target.value = "";
+  }
+  const imagen = previa ?? src;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex", className), ...props, children: [
+    /* @__PURE__ */ jsxs(Avatar, { size: size2, children: [
+      imagen ? /* @__PURE__ */ jsx(AvatarImage, { src: imagen, alt: "" }) : null,
+      /* @__PURE__ */ jsx(AvatarFallback, { children: fallback })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: id,
+        className: cn(
+          "rounded-pill absolute -right-1 -bottom-1 flex size-6 cursor-pointer items-center justify-center",
+          "border-hairline bg-surface-raised text-text-secondary border",
+          "transition-standard hover:text-accent hover:border-accent",
+          // El foco vive en el input, que está oculto: sin esto, tabular hasta
+          // el control no se ve por ninguna parte.
+          "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-accent",
+          disabled && "pointer-events-none opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Camara, { "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id,
+              type: "file",
+              accept,
+              disabled,
+              onChange: elegir,
+              className: "sr-only"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
 var badge = cva(
   ["inline-flex items-center gap-step-xs", "rounded-chip px-step-xs py-0.5", "font-sans text-tag", "transition-standard"],
   {
@@ -2312,6 +2389,193 @@ function EmptyState({
     }
   );
 }
+var mismoDia = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+function aValorDeCampo(fecha) {
+  const dos = (n) => String(n).padStart(2, "0");
+  return `${fecha.getFullYear()}-${dos(fecha.getMonth() + 1)}-${dos(fecha.getDate())}T${dos(
+    fecha.getHours()
+  )}:${dos(fecha.getMinutes())}`;
+}
+function EventCalendar({
+  events,
+  onCreateEvent,
+  onUpdateEvent,
+  onDeleteEvent,
+  selected,
+  onSelectDay,
+  formatDay = (dia) => format(dia, "EEEE d 'de' MMMM", { locale: es }),
+  formatTime: formatTime2 = (fecha) => format(fecha, "HH:mm", { locale: es }),
+  emptyMessage = "Nada en este d\xEDa.",
+  className,
+  ...props
+}) {
+  const id = useId();
+  const [diaInterno, setDiaInterno] = useState(() => selected ?? /* @__PURE__ */ new Date());
+  const dia = selected ?? diaInterno;
+  const [mes, setMes] = useState(() => dia);
+  const [editando, setEditando] = useState(null);
+  const [titulo, setTitulo] = useState("");
+  const [cuando, setCuando] = useState("");
+  const editable = Boolean(onCreateEvent ?? onUpdateEvent);
+  const delDia = events.filter((e) => mismoDia(e.start, dia)).sort((a, b) => a.start.getTime() - b.start.getTime());
+  function elegirDia(nuevo) {
+    if (!nuevo) return;
+    setDiaInterno(nuevo);
+    setMes(nuevo);
+    onSelectDay?.(nuevo);
+    cancelar();
+  }
+  function cancelar() {
+    setEditando(null);
+    setTitulo("");
+    setCuando("");
+  }
+  function editar(evento) {
+    setEditando(evento.id);
+    setTitulo(evento.title);
+    setCuando(aValorDeCampo(evento.start));
+  }
+  function enviar(e) {
+    e.preventDefault();
+    if (!titulo.trim() || !cuando) return;
+    const start = new Date(cuando);
+    if (Number.isNaN(start.getTime())) return;
+    if (editando) {
+      const previo = events.find((ev) => ev.id === editando);
+      if (previo) onUpdateEvent?.({ ...previo, title: titulo.trim(), start });
+    } else {
+      onCreateEvent?.({ title: titulo.trim(), start });
+    }
+    cancelar();
+  }
+  const conEvento = events.map((e) => e.start);
+  return /* @__PURE__ */ jsxs("div", { className: cn("gap-step-lg flex flex-col md:flex-row md:items-start", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        mode: "single",
+        selected: dia,
+        onSelect: elegirDia,
+        month: mes,
+        onMonthChange: setMes,
+        modifiers: { conEvento },
+        modifiersClassNames: {
+          // El punto va bajo el número, no encima del fondo del día: sobre el
+          // seleccionado —que es bioluz sólido— un punto de acento desaparece.
+          // `after:` en Tailwind v4 ya trae `content: ""`, así que no hace falta
+          // declararlo con un valor arbitrario.
+          conEvento: cn(
+            "after:bg-accent after:absolute after:bottom-1 after:left-1/2",
+            "after:size-1 after:-translate-x-1/2 after:rounded-pill",
+            "[&[data-selected=true]]:after:bg-accent-on"
+          )
+        },
+        className: "shrink-0"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-labelledby": `${id}-dia`,
+        className: "border-hairline rounded-card p-step-md gap-step-md flex min-w-0 flex-1 flex-col border",
+        children: [
+          /* @__PURE__ */ jsx(Text, { as: "h3", variant: "h3", id: `${id}-dia`, className: "first-letter:uppercase", children: formatDay(dia) }),
+          delDia.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "gap-step-xs flex flex-col", children: delDia.map((evento) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "border-hairline gap-step-sm py-step-xs flex items-center border-b last:border-b-0",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "span",
+                    variant: "meta",
+                    tone: evento.tone === "warm" ? "warm" : "accent",
+                    className: "shrink-0 tabular-nums",
+                    children: /* @__PURE__ */ jsx("time", { dateTime: evento.start.toISOString(), children: formatTime2(evento.start) })
+                  }
+                ),
+                /* @__PURE__ */ jsx(Text, { as: "span", variant: "ui", className: "min-w-0 flex-1 truncate", children: evento.title }),
+                onUpdateEvent ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "tertiary",
+                    size: "sm",
+                    onClick: () => editar(evento),
+                    "aria-label": `Editar \xAB${evento.title}\xBB`,
+                    children: "./editar"
+                  }
+                ) : null,
+                onDeleteEvent ? /* @__PURE__ */ jsxs(AlertDialog, { children: [
+                  /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", "aria-label": `Borrar \xAB${evento.title}\xBB`, children: "./borrar" }) }),
+                  /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+                    /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+                      /* @__PURE__ */ jsxs(AlertDialogTitle, { children: [
+                        "Borrar \xAB",
+                        evento.title,
+                        "\xBB"
+                      ] }),
+                      /* @__PURE__ */ jsxs(AlertDialogDescription, { children: [
+                        "Se borra del ",
+                        formatDay(evento.start),
+                        " a las ",
+                        formatTime2(evento.start),
+                        ". No se puede deshacer."
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+                      /* @__PURE__ */ jsx(AlertDialogCancel, { children: "Mejor no" }),
+                      /* @__PURE__ */ jsx(AlertDialogAction, { onClick: () => onDeleteEvent(evento.id), children: "Borrar el evento" })
+                    ] })
+                  ] })
+                ] }) : null
+              ]
+            },
+            evento.id
+          )) }) : (
+            // `EmptyState` no: lleva una cara de la mascota, y la mascota tiene
+            // siete sitios contados donde puede aparecer. Un día vacío de una
+            // agenda no es uno de ellos — y en un mes de treinta días, la mitad lo
+            // serían.
+            /* @__PURE__ */ jsx(Text, { as: "p", variant: "ui", tone: "muted", children: emptyMessage })
+          ),
+          editable ? /* @__PURE__ */ jsxs("form", { onSubmit: enviar, className: "gap-step-sm border-hairline pt-step-md flex flex-col border-t", children: [
+            /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex flex-col", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-titulo`, children: "T\xEDtulo" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: `${id}-titulo`,
+                  value: titulo,
+                  onChange: (e) => setTitulo(e.target.value),
+                  placeholder: "Publicar el art\xEDculo",
+                  required: true
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex flex-col", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-cuando`, children: "Cu\xE1ndo" }),
+              /* @__PURE__ */ jsx(
+                DateField,
+                {
+                  id: `${id}-cuando`,
+                  withTime: true,
+                  value: cuando,
+                  onChange: (e) => setCuando(e.target.value),
+                  required: true
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex flex-wrap items-center", children: [
+              /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", children: editando ? "Guardar" : "A\xF1adir" }),
+              editando ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "tertiary", size: "sm", onClick: cancelar, children: "./cancelar" }) : null
+            ] })
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
 function Footer({
   social,
   year = (/* @__PURE__ */ new Date()).getFullYear(),
@@ -2323,31 +2587,33 @@ function Footer({
   return /* @__PURE__ */ jsx("footer", { className: cn("border-hairline w-full border-t", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "max-w-wide px-step-md py-step-xl gap-step-lg mx-auto flex flex-col", children: [
     brand2 ? /* @__PURE__ */ jsx("div", { className: "flex items-center", children: brand2 }) : null,
     children ? /* @__PURE__ */ jsx("div", { className: "gap-step-md flex flex-wrap items-center", children }) : null,
-    social && social.length > 0 ? (
-      // 18px de separación, del documento. No es un escalón de `spacing`:
-      // es el ritmo de una fila de iconos, no el de una página.
-      /* @__PURE__ */ jsx("ul", { className: "flex items-center gap-[18px]", children: social.map((red) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: red.href,
-          "aria-label": red.label,
-          className: cn(
-            "text-text-muted hover:text-accent transition-standard block cursor-pointer text-[19px]",
-            "rounded-chip focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
-          ),
-          children: red.icon
-        }
-      ) }, red.href)) })
-    ) : null,
-    /* @__PURE__ */ jsxs(Text, { variant: "meta", tone: "muted", as: "p", children: [
-      /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "text-accent", children: [
-        "$",
-        " "
-      ] }),
-      "cd ~/",
-      naming.domain,
-      "/",
-      year
+    /* @__PURE__ */ jsxs("div", { className: "gap-step-md flex flex-wrap items-center", children: [
+      social && social.length > 0 ? (
+        // 18px de separación, del documento. No es un escalón de `spacing`:
+        // es el ritmo de una fila de iconos, no el de una página.
+        /* @__PURE__ */ jsx("ul", { className: "flex items-center gap-[18px]", children: social.map((red) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: red.href,
+            "aria-label": red.label,
+            className: cn(
+              "text-text-muted hover:text-accent transition-standard block cursor-pointer text-[19px]",
+              "rounded-chip focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+            ),
+            children: red.icon
+          }
+        ) }, red.href)) })
+      ) : null,
+      /* @__PURE__ */ jsxs(Text, { variant: "meta", tone: "muted", as: "p", className: "ml-auto", children: [
+        /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "text-accent", children: [
+          "$",
+          " "
+        ] }),
+        "cd ~/",
+        naming.domain,
+        "/",
+        year
+      ] })
     ] })
   ] }) });
 }
@@ -2486,7 +2752,10 @@ function Nav({ brand: brand2, children, actions, className, ...props }) {
       ...props,
       children: /* @__PURE__ */ jsxs("div", { className: "max-w-wide px-step-md h-nav gap-step-lg mx-auto flex items-center", children: [
         brand2 ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: brand2 }) : null,
-        children ? /* @__PURE__ */ jsx("nav", { "aria-label": "Principal", className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("ul", { className: "gap-step-md flex items-center", children }) }) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+        children ? /* @__PURE__ */ jsx("nav", { "aria-label": "Principal", className: "ml-auto min-w-0", children: /* @__PURE__ */ jsxs("ul", { className: "gap-step-md flex items-center", children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-text-muted font-mono text-meta select-none", children: "~/" }),
+          children
+        ] }) }) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
         actions ? /* @__PURE__ */ jsx("div", { className: "gap-step-sm flex shrink-0 items-center", children: actions }) : null
       ] })
     }
@@ -2506,8 +2775,10 @@ function NavItem({ active = false, asChild = false, className, children, ...prop
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-text-muted", children: "./" }),
-        children
+        active ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-accent", children: "[" }) : null,
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: active ? "text-accent" : "text-text-muted", children: "./" }),
+        children,
+        active ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-accent", children: "]" }) : null
       ]
     }
   ) });
@@ -2759,10 +3030,28 @@ function SidebarNav({
     }
   );
 }
-function Stat({ value, label, tone = "neutral", progress, className, ...props }) {
+function Stat({
+  value,
+  label,
+  tone = "neutral",
+  progress,
+  icon,
+  description,
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-step-lg gap-step-xs flex flex-col", className), ...props, children: [
+    /* @__PURE__ */ jsxs(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "gap-step-xs flex items-center", children: [
+      icon ? (
+        // `aria-hidden` no hace falta: los glifos del sistema ya lo traen
+        // puesto. Lo que sí hace falta es que no encoja al lado de un título
+        // largo, porque un icono aplastado se lee como otro icono.
+        /* @__PURE__ */ jsx("span", { className: "shrink-0", children: icon })
+      ) : null,
+      label
+    ] }),
     /* @__PURE__ */ jsx(Text, { variant: "stat", as: "p", tone: tone === "alerta" ? "warm" : "accent", children: value }),
-    /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", children: label }),
+    description ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", as: "p", children: description }) : null,
     typeof progress === "number" ? /* @__PURE__ */ jsx(
       Progress,
       {
@@ -2922,4 +3211,4 @@ var Correo = (props) => /* @__PURE__ */ jsxs(Funcional, { ...props, children: [
   /* @__PURE__ */ jsx("path", { d: "m3.5 7.5 7.4 5.2a2 2 0 0 0 2.2 0l7.4-5.2" })
 ] });
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, ArticleCard, AudioPlayer, AuthorCard, Avatar, AvatarFallback, AvatarImage, Badge, Blockquote, Breadcrumb, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBadge, Checkbox, Code, CodeBlock, CourseCard, DateField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Footer, FooterLink, HOVER_TARJETA, Hero, Input, LinkRow, MetricBadge, Nav, NavItem, NewsletterForm, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup2 as RadioGroup, RadioGroupItem, SUPERFICIE_TARJETA, ScrollingProgressBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarItem, SidebarNav, Skeleton, Stat, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TalkCard, Textarea, ThemeToggle, Toast, ToastAction, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, categoria as categoryBadgeVariants, social_exports as social, toast2 as toast, useTema };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, ArticleCard, AudioPlayer, AuthorCard, Avatar, AvatarFallback, AvatarImage, AvatarUpload, Badge, Blockquote, Breadcrumb, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBadge, Checkbox, Code, CodeBlock, CourseCard, DateField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EventCalendar, Footer, FooterLink, HOVER_TARJETA, Hero, Input, LinkRow, MetricBadge, Nav, NavItem, NewsletterForm, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup2 as RadioGroup, RadioGroupItem, SUPERFICIE_TARJETA, ScrollingProgressBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarItem, SidebarNav, Skeleton, Stat, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TalkCard, Textarea, ThemeToggle, ToastAction, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, categoria as categoryBadgeVariants, social_exports as social, toast2 as toast, useTema };

package/dist/tokens/theme.css

@@ -232,6 +232,33 @@
   animation: arrecife-shimmer 1.4s linear infinite;
 }
 
+/* --- la excepción del plegable ----------------------------------------------
+   La cuarta y, como las otras tres, no es «queda mejor»: un plegable que revela
+   contenido sin transición hace SALTAR todo lo que tiene debajo, y quien acaba
+   de pulsar pierde el sitio en la página. Es la misma categoría que el panel
+   lateral —un panel que entra desde un borde se desliza por definición— y no la
+   de una animación de entrada, que es lo que el sistema no admite: aquí no
+   aparece nada nuevo en pantalla, se abre un hueco.
+
+   La altura la publica Radix en --radix-accordion-content-height. Dura lo que
+   dura todo lo demás y usa la misma curva, así que no estrena un tiempo. En el
+   componente va detrás de motion-safe. */
+@keyframes arrecife-despliega {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+@keyframes arrecife-repliega {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+
+@utility desplegar {
+  animation: arrecife-despliega var(--duration-standard) var(--ease-standard);
+}
+@utility replegar {
+  animation: arrecife-repliega var(--duration-standard) var(--ease-standard);
+}
+
 /* --- la excepción del panel lateral -----------------------------------------
    Un panel que entra desde un borde se desliza por definición: quieto sería un
    modal descentrado. Es la segunda y última excepción a "nada de

package/llms.txt

@@ -157,6 +157,25 @@ Tiene que ir INLINE. Un `<script src>`, aunque sea síncrono, se descarga, y el
 parpadeo vuelve. El script reengancha en `astro:after-swap` porque las
 transiciones de vista reemplazan el `<html>` entero.
 
+### Los iconos de redes van agrupados
+
+```tsx
+// ❌ no existe
+import { GitHub } from '@eduardoalvarez/arrecife';
+
+// ✅
+import { social } from '@eduardoalvarez/arrecife';
+<social.GitHub />
+```
+
+Los ocho: `GitHub`, `LinkedIn`, `X`, `Instagram`, `Discord`, `YouTube`, `Rss`,
+`Correo`. Van bajo namespace porque uno se llama `X` y sueltos colisiona.
+
+Los glifos internos —`Close`, `ChevronDown`, `Sol`— **no se exportan** y no van a
+exportarse: son el juego mínimo de los primitivos. Un componente que necesita un
+icono lo recibe por prop (`Stat` tiene `icon`, cada `Red` de `Footer` tiene el
+suyo). No pidas que se publiquen: pasa el tuyo.
+
 ## Tokens
 
 La fuente es un objeto de TypeScript y la salida CSS se genera de él, así que el
@@ -292,7 +311,7 @@ primitiva de Radix se resumen en la línea `Extiende`, y son los de siempre.
 
 ## Primitivos
 
-Se importan de `@eduardoalvarez/arrecife`. 115 exportaciones.
+Se importan de `@eduardoalvarez/arrecife`. 110 exportaciones.
 
 ### Accordion, AccordionItem, AccordionTrigger, AccordionContent
 
@@ -378,7 +397,7 @@ El aviso lleva el color en el fondo, no solo en el borde.
 | `title` | `ReactNode` |  |  |  |
 | `variant` | `"accent" \| "success" \| "warning" \| "error"` |  | `accent` |  |
 
-### Avatar, AvatarImage, AvatarFallback
+### Avatar, AvatarImage, AvatarFallback, AvatarUpload
 
 Fuente: `src/primitives/avatar.tsx`
 
@@ -399,6 +418,21 @@ Iniciales mientras la imagen carga, o cuando no hay imagen.
 
 - Sin props propios: pasa los del elemento o la primitiva que envuelve.
 
+**AvatarUpload**
+El avatar que se puede cambiar. `Avatar` muestra; este además deja elegir.
+
+- Extiende: `Omit<ComponentPropsWithoutRef<'div'>, 'onSelect' \| 'children'> & VariantProps<typeof avatar>`
+
+| prop | tipo | req. | defecto | qué hace |
+| --- | --- | --- | --- | --- |
+| `accept` | `string` |  | `image/*` | Qué acepta el diálogo del sistema. |
+| `disabled` | `boolean \| undefined` |  | `false` |  |
+| `fallback` | `ReactNode` |  |  | Iniciales mientras no hay imagen. |
+| `label` | `string` |  | `Cambiar la foto` | Nombre accesible del control. Es lo único que lo nombra: no hay texto visible. |
+| `onSelectFile` | `(archivo: File) => void` |  |  | Se dispara con el archivo elegido. La subida la hace el proyecto. |
+| `size` | `"sm" \| "md" \| "lg" \| "xl"` |  |  |  |
+| `src` | `string` |  |  | La imagen actual, ya subida. La previsualización local la gana mientras dure. |
+
 ### Badge, CategoryBadge, MetricBadge
 
 Fuente: `src/primitives/badge.tsx`
@@ -837,34 +871,6 @@ Fuente: `src/primitives/textarea.tsx`
 | --- | --- | --- | --- | --- |
 | `invalid` | `boolean` |  | `false` |  |
 
-### ToastViewport, Toast, ToastTitle, ToastDescription, ToastProvider, ToastAction
-
-Fuente: `src/primitives/toast.tsx`
-
-**ToastViewport**
-- Sin props propios: pasa los del elemento o la primitiva que envuelve.
-
-**Toast**
-Sin deslizamiento de entrada: el aviso aparece donde va a quedarse.
-
-- Extiende: `ComponentPropsWithoutRef<typeof ToastPrimitive.Root> & VariantProps<typeof toast>`
-
-| prop | tipo | req. | defecto | qué hace |
-| --- | --- | --- | --- | --- |
-| `variant` | `"success" \| "error" \| "neutral"` |  | `neutral` |  |
-
-**ToastTitle**
-- Sin props propios: pasa los del elemento o la primitiva que envuelve.
-
-**ToastDescription**
-- Sin props propios: pasa los del elemento o la primitiva que envuelve.
-
-**ToastProvider**
-- Sin props propios: pasa los del elemento o la primitiva que envuelve.
-
-**ToastAction**
-- Sin props propios: pasa los del elemento o la primitiva que envuelve.
-
 ### Toaster
 
 Fuente: `src/primitives/toaster.tsx`
@@ -910,7 +916,7 @@ Fuente: `src/primitives/typography.tsx`
 
 ## Componentes
 
-Se importan de `@eduardoalvarez/arrecife`. 23 exportaciones.
+Se importan de `@eduardoalvarez/arrecife`. 24 exportaciones.
 
 ### ArticleCard
 
@@ -1031,6 +1037,24 @@ La regla más importante de la mascota, por fin como código.
 | `expresion` | `"annoyed" \| "confused" \| "hearts" \| "laughing" \| "shades" \| "waiting" \| "wink"` | sí |  | La cara. Obligatoria: sin ella esto es un párrafo centrado. |
 | `title` | `ReactNode` | sí |  |  |
 
+### EventCalendar
+
+Fuente: `src/components/event-calendar/index.tsx`
+
+- Extiende: `Omit<ComponentPropsWithoutRef<'div'>, 'onSelect' \| 'children'>`
+
+| prop | tipo | req. | defecto | qué hace |
+| --- | --- | --- | --- | --- |
+| `emptyMessage` | `ReactNode` |  | `Nada en este día.` | Texto del panel cuando el día elegido no tiene nada. |
+| `events` | `readonly EventoCalendario[]` | sí |  |  |
+| `formatDay` | `(dia: Date) => string` |  | `(dia) => format(dia, "EEEE d de MMMM", { locale: es })` | Encabezado del panel. Por defecto, `es` de date-fns, como `Calendar`. |
+| `formatTime` | `(fecha: Date) => string` |  | `(fecha) => format(fecha, HH:mm, { locale: es })` |  |
+| `onCreateEvent` | `(evento: Omit<EventoCalendario, "id">) => void` |  |  | Sin él, la agenda es de solo lectura y no se pinta el formulario. |
+| `onDeleteEvent` | `(id: string) => void` |  |  |  |
+| `onSelectDay` | `(dia: Date) => void` |  |  |  |
+| `onUpdateEvent` | `(evento: EventoCalendario) => void` |  |  |  |
+| `selected` | `Date` |  |  | Día seleccionado, si el proyecto lo controla. Sin él, empieza en hoy. |
+
 ### Footer, FooterLink
 
 Fuente: `src/components/footer/index.tsx`
@@ -1198,6 +1222,8 @@ Una métrica grande: el número en la escala `stat` y su nombre debajo.
 
 | prop | tipo | req. | defecto | qué hace |
 | --- | --- | --- | --- | --- |
+| `description` | `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. |
+| `icon` | `ReactNode` |  |  | 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. |
 | `label` | `ReactNode` | sí |  | Qué se está contando. Va en mono versalitas. |
 | `progress` | `number` |  |  | Con `progress`, la métrica se lee como avance y añade la barra. |
 | `tone` | `"neutral" \| "alerta"` |  | `neutral` | `alerta` solo cuando el número ES el problema. |
@@ -1274,6 +1300,7 @@ El wordmark sale de `naming.wordmark`, no de una cadena escrita a mano, y siempr
 | prop | tipo | req. | defecto | qué hace |
 | --- | --- | --- | --- | --- |
 | `basePath` | `string` |  | `RUTA_ASSETS` |  |
+| `conLema` | `boolean \| undefined` |  | `false` | Añade el lema bajo el wordmark, separado de la aleta por una divisoria. |
 | `sobre` | `"oscuro" \| "claro"` |  | `oscuro` |  |
 | `soloIsotipo` | `boolean \| undefined` |  | `false` | Oculta el wordmark y deja solo la aleta, para barras muy estrechas. |
 
@@ -1513,7 +1540,7 @@ Tipos (6): `DatosArticulo`, `DatosBase`, `DatosCharla`, `DatosCurso`, `DatosDefe
 | `toast` | `(mensaje: ReactNode, opciones?: ToastOptions \| undefined): string` | 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. |
 | `useTema` | `(): Tema` | 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—. |
 
-Tipos (58): `AccordionProps`, `AccordionTriggerProps`, `AlertProps`, `ArticleCardProps`, `AudioPlayerMode`, `AudioPlayerProps`, `AuthorCardProps`, `AvatarProps`, `BadgeProps`, `BlockquoteProps`, `BreadcrumbProps`, `ButtonProps`, `CalendarProps`, `CategoryBadgeProps`, `CheckboxProps`, `CodeBlockProps`, `CodeProps`, `CourseCardProps`, `DateFieldProps`, `EmptyStateProps`, `Entrada`, `FooterLinkProps`, `FooterProps`, `HeroProps`, `InputProps`, `LabelProps`, `LinkRowProps`, `MetricBadgeProps`, `Migaja`, `NavItemProps`, `NavProps`, `NewsletterFormProps`, `NewsletterState`, `PageHeaderProps`, `PaginationLinkProps`, `PopoverContentProps`, `ProgressProps`, `RadioGroupItemProps`, `RadioGroupProps`, `Red`, `ScrollingProgressBarProps`, `SeparatorProps`, `SheetContentProps`, `SidebarItemProps`, `SidebarNavProps`, `SkeletonProps`, `StatProps`, `SwitchProps`, `TableOfContentsProps`, `TabsProps`, `TalkCardProps`, `TextProps`, `TextareaProps`, `ThemeToggleProps`, `ToastOptions`, `ToastProps`, `ToastVariant`, `ToasterProps`.
+Tipos (60): `AccordionProps`, `AccordionTriggerProps`, `AlertProps`, `ArticleCardProps`, `AudioPlayerMode`, `AudioPlayerProps`, `AuthorCardProps`, `AvatarProps`, `AvatarUploadProps`, `BadgeProps`, `BlockquoteProps`, `BreadcrumbProps`, `ButtonProps`, `CalendarProps`, `CategoryBadgeProps`, `CheckboxProps`, `CodeBlockProps`, `CodeProps`, `CourseCardProps`, `DateFieldProps`, `EmptyStateProps`, `Entrada`, `EventCalendarProps`, `EventoCalendario`, `FooterLinkProps`, `FooterProps`, `HeroProps`, `InputProps`, `LabelProps`, `LinkRowProps`, `MetricBadgeProps`, `Migaja`, `NavItemProps`, `NavProps`, `NewsletterFormProps`, `NewsletterState`, `PageHeaderProps`, `PaginationLinkProps`, `PopoverContentProps`, `ProgressProps`, `RadioGroupItemProps`, `RadioGroupProps`, `Red`, `ScrollingProgressBarProps`, `SeparatorProps`, `SheetContentProps`, `SidebarItemProps`, `SidebarNavProps`, `SkeletonProps`, `StatProps`, `SwitchProps`, `TableOfContentsProps`, `TabsProps`, `TalkCardProps`, `TextProps`, `TextareaProps`, `ThemeToggleProps`, `ToastOptions`, `ToastVariant`, `ToasterProps`.
 
 # Dónde mirar si esto no basta
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eduardoalvarez/arrecife",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Librería de componentes de la identidad visual de Eduardo Álvarez",
   "license": "MIT",
   "author": "Eduardo Esteban Álvarez Castañeda <soy@eduardoalvarez.dev>",