@mediquo/medicore 0.1.0

package/README.md

@@ -0,0 +1,89 @@
+# MediCore Design System
+
+Design system de las plataformas web de mediQuo — React 19 + TypeScript + Tailwind CSS v4 + [Base UI](https://base-ui.com), portado desde la librería de Figma **MediCore** (`https://www.figma.com/design/HQxFV7lE8QkJgpJZpuPEOy/MediCore`).
+
+Se publica en npm como **`@mediquo/medicore`** (paquete público, igual que `@mediquo/elements`; el repo es privado). Lo consumen `mediquo-web-clinics` y el admin de clínicas.
+
+## Usarlo en una app
+
+```sh
+pnpm add @mediquo/medicore
+```
+
+La app tiene que usar **Tailwind CSS v4**. MediCore no trae CSS precompilado: publica sus tokens como `@theme` y le dice al Tailwind de la app que escanee sus componentes, así todo sale en una sola pasada y sin duplicados.
+
+```css
+/* src/styles/index.css de la app */
+@import "tailwindcss";
+@import "@mediquo/medicore/theme.css";
+```
+
+```tsx
+import { Button, MediCoreProvider } from "@mediquo/medicore";
+import { CalendarIcon } from "@mediquo/medicore/icons";
+
+<MediCoreProvider labels={{ close: t`Cerrar`, loading: t`Cargando` }}>
+  <Button leadingIcon={<CalendarIcon />}>Pedir cita</Button>
+</MediCoreProvider>;
+```
+
+- **Textos**: los componentes no llevan copy fijo. Los textos propios (nombres accesibles, "Paso 1 de 2"…) salen de `MediCoreProvider`, que la app traduce una vez (con Lingui en clinics). Sin provider, van en español.
+- **Fuente**: los tokens piden `Scoop`, pero el paquete **no incluye la fuente** (tiene licencia). Cada app sirve sus `@font-face` (clinics ya lo hace desde `/fonts/scoop/`).
+- **Modo oscuro**: sigue `prefers-color-scheme`. Para forzarlo, `data-theme="light"` o `data-theme="dark"` en `<html>`.
+- **Marca por clínica**: los componentes usan solo tokens semánticos, así que el color de cada organización se aplica sobrescribiendo `--color-brand`, `--color-brand-strong`, `--color-brand-subtle`, `--color-text-brand` y `--color-border-focus` en `:root`.
+
+## Tokens
+
+Todo está confirmado 1:1 contra las variables y estilos de Figma:
+
+| Archivo | Qué hay |
+|---|---|
+| `src/styles/primitives.css` | Paleta primitiva (`--palette-*`). No se usa en componentes |
+| `src/styles/tokens.css` | Tokens semánticos (`@theme`): color con modo oscuro, radios, sombras (Elevation), tamaños de icono/avatar/control, tipografía |
+| `src/styles/typography.css` | Los 14 estilos de texto como utilidades (`text-heading-h2`, `text-body-small`…) |
+| `src/styles/utilities.css` | `focus-ring`, `focus-ring-within` y `touch-target` (área pulsable de 44px) |
+
+El **espaciado** usa la escala por defecto de Tailwind (1 = 4px), que ya cubre todos los `space-*` de Figma: `space-16` → `p-4`. Ver la tabla en [CONTRIBUTING.md](CONTRIBUTING.md).
+
+## Componentes
+
+| Grupo | Componentes |
+|---|---|
+| Forms | Button, IconButton, Link, Input, Textarea, Select / NativeSelect, Field, Checkbox / CheckboxField / CheckboxGroup, Radio / RadioGroup / RadioField, Switch / SwitchField, SelectionCard, PhoneInput, OTPInput, Rating, SeverityScale |
+| Overlays | Modal (centrado en escritorio, hoja inferior en móvil) / ConfirmModal, Toast (`ToastProvider` + `useToast`), Banner, Tooltip, Menu, AnnouncementDialog / AnnouncementIllustration |
+| Navigation | AppShell, Sidebar, NavItem, BottomBar, MobileHeader, PageHeader, Breadcrumb, Tabs, SegmentedControl, StepIndicator |
+| Content | Card / CardCallout / CardList, ListRow, Table (ordenable, responsive) |
+| Agenda y citas | TimeSlot / TimeSlotGroup, DayCell / DayCellGroup, AvailabilityRow, AvailabilityColumn, CardAppointment, CardProfessional |
+| Chat | ChatMessageList, ChatBubble, ChatDeliveryStatus, ChatAttachment, ChatDateSeparator, ChatTypingIndicator, ChatComposer, ChatRoomHeader, ChatConversationRow, ChatLauncher |
+| Videollamada | VideoStage, VideoTile, VideoLabel, VideoControlButton |
+| Historial | HealthRecordSection, HealthRecordHeader, HealthRecordRow, SeverityIndicator |
+| Acceso | SocialButton, BrandMark (Google, Apple), AuthPanel |
+| Home y programas | HeroGreeting, DateBadge, AppointmentRow, CardProgram, CardArticle, CardServiceOption, CardProfessionalMini, CardTestimonial, IncludedItem, AdvisorContact, StatTile, StoreBadge, PromoApp |
+| Layout | Divider, Spinner, Badge, Chip / ChipGroup, IconContainer, SectionHeader, Footer |
+| Media | Avatar (+ estado), Logo |
+| States | Skeleton, EmptyState |
+| Iconos | 178 iconos en `@mediquo/medicore/icons` (`pnpm icons` los regenera desde `scripts/icons/figma-icons.json`) |
+
+Cubre todas las páginas `Components / *` del Figma. Las páginas `Patterns / *` (Chat, Pedir cita, Historial médico, Videollamada, Acceso, Inicio, Programas) están en Storybook como stories de pantallas completas (`src/patterns/`), montadas con estos componentes.
+
+`StoreBadge` no incluye el arte oficial de App Store / Google Play (en Figma es un marcador): la app le pasa la imagen oficial por `src`.
+
+## Desarrollo
+
+```sh
+pnpm install
+pnpm dev                 # Storybook en http://localhost:6006
+pnpm tc                  # tipos
+pnpm format-and-lint     # biome (mismas reglas que clinics)
+pnpm test                # cada story se renderiza en Chromium y pasa axe (a11y)
+pnpm build               # librería en dist/
+```
+
+Cómo se construye un componente: [CONTRIBUTING.md](CONTRIBUTING.md).
+
+## Publicar una versión
+
+1. Sube la versión en `package.json` en un PR y mérgealo en `main`.
+2. Lanza a mano el workflow **Publish** desde GitHub Actions (necesita el secret `NPM_TOKEN` con permiso de publicación en la org `mediquo` de npm).
+
+Es manual a propósito: publicar en npm es público y no se puede deshacer.

package/dist/components/advisor-contact/advisor-contact.d.ts

@@ -0,0 +1,39 @@
+import type { useRender } from "@base-ui/react/use-render";
+import type { ComponentProps, ReactNode } from "react";
+export type AdvisorContactVariant = "hero" | "bar" | "callout";
+export interface AdvisorContactProps extends Omit<ComponentProps<"div">, "title"> {
+    /**
+     * `hero` (default): on the home greeting (dark background) · `bar`: in the header of
+     * the programme pages, the whole bar opens the chat (`href`) · `callout`: inside a
+     * programme page, after the options. The callout stacks by itself (Figma
+     * `Stacked`) when its column is narrower than 560px.
+     */
+    variant?: AdvisorContactVariant;
+    /** Hero/Bar: "Víctor Martínez · Tu asesor de salud". Callout: "¿No sabes cuál elegir?". */
+    title: ReactNode;
+    /** "Hola, Marta. Cuéntame en qué te ayudo." / "¿Te ayudo a elegir?". */
+    message: ReactNode;
+    /** The advisor's photo. */
+    avatarSrc?: string;
+    /**
+     * Available right now: the green dot, named "Disponible ahora"
+     * (`advisorAvailable` label). If not, leave it out and say in `message` when they
+     * answer.
+     */
+    available?: boolean;
+    /**
+     * Hero: an `inverse-ghost` small `Button` "Escribir" with `MessageIcon`. Callout: a
+     * secondary `Button` "Escribir a Víctor". It opens the chat with the advisor.
+     */
+    action?: ReactNode;
+    /** Bar: the chat with the advisor. The whole bar is this link. */
+    href?: string;
+    /** Bar: router link, `render={<Link to="…" />}`. */
+    render?: useRender.RenderProp;
+}
+/**
+ * Access to the patient's health advisor: a real person from the team, not a
+ * doctor. Presented as "tu asesor de salud", never "asesor comercial": they help to
+ * choose, they don't sell, and they never give medical advice.
+ */
+export declare function AdvisorContact({ variant, title, message, avatarSrc, available, action, href, render, className, ...props }: AdvisorContactProps): React.JSX.Element;

package/dist/components/advisor-contact/advisor-contact.js

@@ -0,0 +1,94 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { Avatar } from "../avatar/avatar.js";
+import { CardLink } from "../card/card.js";
+const avatarSizes = {
+  hero: 40,
+  bar: 32,
+  callout: 48
+};
+function AdvisorContact({
+  variant = "hero",
+  title,
+  message,
+  avatarSrc,
+  available = false,
+  action,
+  href,
+  render,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const avatar = available ? /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      size: avatarSizes[variant],
+      src: avatarSrc,
+      status: "online",
+      statusLabel: labels.advisorAvailable
+    }
+  ) : /* @__PURE__ */ jsx(Avatar, { size: avatarSizes[variant], src: avatarSrc });
+  if (variant === "callout") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "advisor-contact",
+        "data-variant": "callout",
+        className: cn("@container rounded-xl bg-brand-subtle", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 px-6 py-4 @min-[560px]:flex-row @min-[560px]:items-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3 @min-[560px]:gap-4", children: [
+            avatar,
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-label-strong text-text-primary", children: title }),
+              /* @__PURE__ */ jsx("p", { className: "text-body-small text-text-primary", children: message })
+            ] })
+          ] }),
+          action && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 *:flex-1 @min-[560px]:*:flex-none", children: action })
+        ] })
+      }
+    );
+  }
+  const hero = variant === "hero";
+  const isLink = !hero && Boolean(href || render);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "advisor-contact",
+      "data-variant": variant,
+      className: cn(
+        "relative flex min-w-0 items-center rounded-lg border px-3 py-2",
+        hero ? "gap-4 border-border-inverse" : "gap-3 border-border-subtle bg-background",
+        isLink && "transition-colors hover:bg-surface",
+        className
+      ),
+      ...props,
+      children: [
+        avatar,
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: hero ? "text-label-small text-text-inverse-secondary" : "text-label-strong text-text-primary",
+              children: isLink ? /* @__PURE__ */ jsx(CardLink, { href, render, className: "after:rounded-lg", children: title }) : title
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: hero ? "text-label-strong text-text-inverse" : "text-body-small text-text-secondary",
+              children: message
+            }
+          )
+        ] }),
+        action && /* @__PURE__ */ jsx("div", { className: "relative z-10 flex shrink-0", children: action })
+      ]
+    }
+  );
+}
+export {
+  AdvisorContact
+};
+//# sourceMappingURL=advisor-contact.js.map

package/dist/components/advisor-contact/advisor-contact.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"advisor-contact.js","sources":["../../../src/components/advisor-contact/advisor-contact.tsx"],"sourcesContent":["import type { useRender } from \"@base-ui/react/use-render\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { Avatar, type AvatarSize } from \"../avatar\";\nimport { CardLink } from \"../card\";\n\nexport type AdvisorContactVariant = \"hero\" | \"bar\" | \"callout\";\n\nexport interface AdvisorContactProps\n  extends Omit<ComponentProps<\"div\">, \"title\"> {\n  /**\n   * `hero` (default): on the home greeting (dark background) · `bar`: in the header of\n   * the programme pages, the whole bar opens the chat (`href`) · `callout`: inside a\n   * programme page, after the options. The callout stacks by itself (Figma\n   * `Stacked`) when its column is narrower than 560px.\n   */\n  variant?: AdvisorContactVariant;\n  /** Hero/Bar: \"Víctor Martínez · Tu asesor de salud\". Callout: \"¿No sabes cuál elegir?\". */\n  title: ReactNode;\n  /** \"Hola, Marta. Cuéntame en qué te ayudo.\" / \"¿Te ayudo a elegir?\". */\n  message: ReactNode;\n  /** The advisor's photo. */\n  avatarSrc?: string;\n  /**\n   * Available right now: the green dot, named \"Disponible ahora\"\n   * (`advisorAvailable` label). If not, leave it out and say in `message` when they\n   * answer.\n   */\n  available?: boolean;\n  /**\n   * Hero: an `inverse-ghost` small `Button` \"Escribir\" with `MessageIcon`. Callout: a\n   * secondary `Button` \"Escribir a Víctor\". It opens the chat with the advisor.\n   */\n  action?: ReactNode;\n  /** Bar: the chat with the advisor. The whole bar is this link. */\n  href?: string;\n  /** Bar: router link, `render={<Link to=\"…\" />}`. */\n  render?: useRender.RenderProp;\n}\n\nconst avatarSizes: Record<AdvisorContactVariant, AvatarSize> = {\n  hero: 40,\n  bar: 32,\n  callout: 48,\n};\n\n/**\n * Access to the patient's health advisor: a real person from the team, not a\n * doctor. Presented as \"tu asesor de salud\", never \"asesor comercial\": they help to\n * choose, they don't sell, and they never give medical advice.\n */\nexport function AdvisorContact({\n  variant = \"hero\",\n  title,\n  message,\n  avatarSrc,\n  available = false,\n  action,\n  href,\n  render,\n  className,\n  ...props\n}: AdvisorContactProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const avatar = available ? (\n    <Avatar\n      size={avatarSizes[variant]}\n      src={avatarSrc}\n      status=\"online\"\n      statusLabel={labels.advisorAvailable}\n    />\n  ) : (\n    <Avatar size={avatarSizes[variant]} src={avatarSrc} />\n  );\n\n  if (variant === \"callout\") {\n    return (\n      <div\n        data-slot=\"advisor-contact\"\n        data-variant=\"callout\"\n        className={cn(\"@container rounded-xl bg-brand-subtle\", className)}\n        {...props}\n      >\n        <div className=\"flex flex-col gap-4 px-6 py-4 @min-[560px]:flex-row @min-[560px]:items-center\">\n          <div className=\"flex min-w-0 flex-1 items-center gap-3 @min-[560px]:gap-4\">\n            {avatar}\n            <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n              <p className=\"text-label-strong text-text-primary\">{title}</p>\n              <p className=\"text-body-small text-text-primary\">{message}</p>\n            </div>\n          </div>\n          {action && (\n            <div className=\"flex shrink-0 *:flex-1 @min-[560px]:*:flex-none\">\n              {action}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  const hero = variant === \"hero\";\n  const isLink = !hero && Boolean(href || render);\n\n  return (\n    <div\n      data-slot=\"advisor-contact\"\n      data-variant={variant}\n      className={cn(\n        \"relative flex min-w-0 items-center rounded-lg border px-3 py-2\",\n        hero\n          ? \"gap-4 border-border-inverse\"\n          : \"gap-3 border-border-subtle bg-background\",\n        isLink && \"transition-colors hover:bg-surface\",\n        className,\n      )}\n      {...props}\n    >\n      {avatar}\n      <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <p\n          className={\n            hero\n              ? \"text-label-small text-text-inverse-secondary\"\n              : \"text-label-strong text-text-primary\"\n          }\n        >\n          {isLink ? (\n            <CardLink href={href} render={render} className=\"after:rounded-lg\">\n              {title}\n            </CardLink>\n          ) : (\n            title\n          )}\n        </p>\n        <p\n          className={\n            hero\n              ? \"text-label-strong text-text-inverse\"\n              : \"text-body-small text-text-secondary\"\n          }\n        >\n          {message}\n        </p>\n      </div>\n      {action && <div className=\"relative z-10 flex shrink-0\">{action}</div>}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AA0CA,MAAM,cAAyD;AAAA,EAC7D,MAAM;AAAA,EACN,KAAK;AAAA,EACL,SAAS;AACX;AAOO,SAAS,eAAe;AAAA,EAC7B,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2C;AACzC,QAAM,SAAS,kBAAA;AACf,QAAM,SAAS,YACb;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,YAAY,OAAO;AAAA,MACzB,KAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAa,OAAO;AAAA,IAAA;AAAA,EAAA,wBAGrB,QAAA,EAAO,MAAM,YAAY,OAAO,GAAG,KAAK,WAAW;AAGtD,MAAI,YAAY,WAAW;AACzB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,gBAAa;AAAA,QACb,WAAW,GAAG,yCAAyC,SAAS;AAAA,QAC/D,GAAG;AAAA,QAEJ,UAAA,qBAAC,OAAA,EAAI,WAAU,iFACb,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,6DACZ,UAAA;AAAA,YAAA;AAAA,YACD,qBAAC,OAAA,EAAI,WAAU,wCACb,UAAA;AAAA,cAAA,oBAAC,KAAA,EAAE,WAAU,uCAAuC,UAAA,OAAM;AAAA,cAC1D,oBAAC,KAAA,EAAE,WAAU,qCAAqC,UAAA,QAAA,CAAQ;AAAA,YAAA,EAAA,CAC5D;AAAA,UAAA,GACF;AAAA,UACC,UACC,oBAAC,OAAA,EAAI,WAAU,mDACZ,UAAA,OAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,QAAM,OAAO,YAAY;AACzB,QAAM,SAAS,CAAC,QAAQ,QAAQ,QAAQ,MAAM;AAE9C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA,OACI,gCACA;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACD,qBAAC,OAAA,EAAI,WAAU,wCACb,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WACE,OACI,iDACA;AAAA,cAGL,UAAA,6BACE,UAAA,EAAS,MAAY,QAAgB,WAAU,oBAC7C,iBACH,IAEA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WACE,OACI,wCACA;AAAA,cAGL,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,GACF;AAAA,QACC,UAAU,oBAAC,OAAA,EAAI,WAAU,+BAA+B,UAAA,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtE;"}

package/dist/components/advisor-contact/index.d.ts

@@ -0,0 +1 @@
+export { AdvisorContact, type AdvisorContactProps, type AdvisorContactVariant, } from "./advisor-contact";

package/dist/components/announcement/announcement-dialog.d.ts

@@ -0,0 +1,39 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type ModalChangeEventDetails, type ModalLayout } from "../modal";
+export interface AnnouncementStep {
+    /** "Novedades en mediQuo". */
+    title: ReactNode;
+    /**
+     * What the patient can do now, not what the team did: "Ahora puedes guardar tus
+     * alergias…", never "Estamos emocionados de anunciar…".
+     */
+    description: ReactNode;
+    /** Replaces the megaphone (`AnnouncementIllustration`) for this step. Decorative. */
+    illustration?: ReactNode;
+}
+export interface AnnouncementDialogProps {
+    /** One to three steps. */
+    steps: AnnouncementStep[];
+    /** The element that opens it. Usually omitted: it opens on arrival (`defaultOpen`). */
+    trigger?: ReactElement;
+    /** Runs on the last step's button ("Empezar"), before the dialog closes. */
+    onFinish?: () => void;
+    /** Overrides "Empezar". */
+    finishLabel?: ReactNode;
+    /** Unset: bottom sheet below `md`, centered dialog from `md` up (as `Modal`). */
+    layout?: ModalLayout;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, eventDetails: ModalChangeEventDetails) => void;
+    onOpenChangeComplete?: (open: boolean) => void;
+}
+/**
+ * What's new, on arrival, in up to 3 steps. It appears once per novelty and never
+ * blocks: "Omitir", the X and Escape close it. The last step swaps "Siguiente" for
+ * "Empezar" and drops "Omitir".
+ *
+ * Built on `Modal`: it is a dialog named by its title, focus goes to the primary
+ * button and returns where it was on close. "1 de 3" is text, not only dots, and
+ * each new step is announced.
+ */
+export declare function AnnouncementDialog({ steps, trigger, onFinish, finishLabel, onOpenChangeComplete, ...modalProps }: AnnouncementDialogProps): React.JSX.Element;

package/dist/components/announcement/announcement-dialog.js

@@ -0,0 +1,107 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { XCloseIcon } from "../../icons/generated/x-close.js";
+import { cn } from "../../lib/cn.js";
+import { AnnouncementIllustration } from "./announcement-illustration.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { Modal, ModalTrigger, ModalContent, ModalClose, ModalTitle, ModalBody } from "../modal/modal.js";
+import { IconButton } from "../icon-button/icon-button.js";
+import { Button } from "../button/button.js";
+function AnnouncementDialog({
+  steps,
+  trigger,
+  onFinish,
+  finishLabel,
+  onOpenChangeComplete,
+  ...modalProps
+}) {
+  const labels = useMediCoreLabels();
+  const actionsRef = useRef(null);
+  const primaryRef = useRef(null);
+  const [index, setIndex] = useState(0);
+  const total = steps.length;
+  const current = Math.min(index, total - 1);
+  const step = steps[current];
+  const last = current >= total - 1;
+  const handlePrimary = () => {
+    if (!last) {
+      setIndex(current + 1);
+      return;
+    }
+    onFinish?.();
+    actionsRef.current?.close();
+  };
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      actionsRef,
+      onOpenChangeComplete: (open) => {
+        if (!open) {
+          setIndex(0);
+        }
+        onOpenChangeComplete?.(open);
+      },
+      ...modalProps,
+      children: [
+        trigger && /* @__PURE__ */ jsx(ModalTrigger, { render: trigger }),
+        /* @__PURE__ */ jsx(
+          ModalContent,
+          {
+            initialFocus: primaryRef,
+            className: "gap-0 overflow-x-hidden p-0 data-[layout=sheet]:pt-3",
+            children: /* @__PURE__ */ jsxs("div", { "data-slot": "announcement-dialog", className: "relative flex flex-col", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex h-50 shrink-0 items-center justify-center bg-brand-subtle", children: step?.illustration ?? /* @__PURE__ */ jsx(AnnouncementIllustration, {}) }),
+              /* @__PURE__ */ jsx("div", { className: "absolute top-3 right-3 in-data-[layout=sheet]:hidden", children: /* @__PURE__ */ jsx(
+                ModalClose,
+                {
+                  render: /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      variant: "ghost",
+                      size: "small",
+                      icon: /* @__PURE__ */ jsx(XCloseIcon, {}),
+                      "aria-label": labels.close
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "aria-live": "polite",
+                  className: "flex flex-col gap-2 px-6 pt-6 pb-2",
+                  children: [
+                    /* @__PURE__ */ jsx(ModalTitle, { children: step?.title }),
+                    /* @__PURE__ */ jsx(ModalBody, { children: step?.description })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-3 p-6", children: [
+                total > 1 && /* @__PURE__ */ jsxs("div", { className: "me-auto flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex gap-2", children: steps.map((_, position) => /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "data-current": position === current || void 0,
+                      className: cn(
+                        "size-2 rounded-full",
+                        position === current ? "bg-text-brand" : "bg-text-disabled"
+                      )
+                    },
+                    position
+                  )) }),
+                  /* @__PURE__ */ jsx("p", { className: "text-label-small text-text-secondary", children: labels.announcementStep(current + 1, total) })
+                ] }),
+                !last && /* @__PURE__ */ jsx(ModalClose, { render: /* @__PURE__ */ jsx(Button, { variant: "ghost" }), children: labels.announcementSkip }),
+                /* @__PURE__ */ jsx(Button, { ref: primaryRef, onClick: handlePrimary, children: last ? finishLabel ?? labels.announcementStart : labels.next })
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AnnouncementDialog
+};
+//# sourceMappingURL=announcement-dialog.js.map

package/dist/components/announcement/announcement-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"announcement-dialog.js","sources":["../../../src/components/announcement/announcement-dialog.tsx"],"sourcesContent":["import { type ReactElement, type ReactNode, useRef, useState } from \"react\";\n\nimport { XCloseIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { Button } from \"../button\";\nimport { IconButton } from \"../icon-button\";\nimport {\n  Modal,\n  type ModalActions,\n  ModalBody,\n  type ModalChangeEventDetails,\n  ModalClose,\n  ModalContent,\n  type ModalLayout,\n  ModalTitle,\n  ModalTrigger,\n} from \"../modal\";\nimport { AnnouncementIllustration } from \"./announcement-illustration\";\n\nexport interface AnnouncementStep {\n  /** \"Novedades en mediQuo\". */\n  title: ReactNode;\n  /**\n   * What the patient can do now, not what the team did: \"Ahora puedes guardar tus\n   * alergias…\", never \"Estamos emocionados de anunciar…\".\n   */\n  description: ReactNode;\n  /** Replaces the megaphone (`AnnouncementIllustration`) for this step. Decorative. */\n  illustration?: ReactNode;\n}\n\nexport interface AnnouncementDialogProps {\n  /** One to three steps. */\n  steps: AnnouncementStep[];\n  /** The element that opens it. Usually omitted: it opens on arrival (`defaultOpen`). */\n  trigger?: ReactElement;\n  /** Runs on the last step's button (\"Empezar\"), before the dialog closes. */\n  onFinish?: () => void;\n  /** Overrides \"Empezar\". */\n  finishLabel?: ReactNode;\n  /** Unset: bottom sheet below `md`, centered dialog from `md` up (as `Modal`). */\n  layout?: ModalLayout;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean, eventDetails: ModalChangeEventDetails) => void;\n  onOpenChangeComplete?: (open: boolean) => void;\n}\n\n/**\n * What's new, on arrival, in up to 3 steps. It appears once per novelty and never\n * blocks: \"Omitir\", the X and Escape close it. The last step swaps \"Siguiente\" for\n * \"Empezar\" and drops \"Omitir\".\n *\n * Built on `Modal`: it is a dialog named by its title, focus goes to the primary\n * button and returns where it was on close. \"1 de 3\" is text, not only dots, and\n * each new step is announced.\n */\nexport function AnnouncementDialog({\n  steps,\n  trigger,\n  onFinish,\n  finishLabel,\n  onOpenChangeComplete,\n  ...modalProps\n}: AnnouncementDialogProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const actionsRef = useRef<ModalActions | null>(null);\n  const primaryRef = useRef<HTMLButtonElement | null>(null);\n  const [index, setIndex] = useState(0);\n\n  const total = steps.length;\n  const current = Math.min(index, total - 1);\n  const step = steps[current];\n  const last = current >= total - 1;\n\n  const handlePrimary = (): void => {\n    if (!last) {\n      setIndex(current + 1);\n      return;\n    }\n    onFinish?.();\n    actionsRef.current?.close();\n  };\n\n  return (\n    <Modal\n      actionsRef={actionsRef}\n      onOpenChangeComplete={(open) => {\n        // Next time it opens, it starts from the first step.\n        if (!open) {\n          setIndex(0);\n        }\n        onOpenChangeComplete?.(open);\n      }}\n      {...modalProps}\n    >\n      {trigger && <ModalTrigger render={trigger} />}\n      <ModalContent\n        initialFocus={primaryRef}\n        className=\"gap-0 overflow-x-hidden p-0 data-[layout=sheet]:pt-3\"\n      >\n        <div data-slot=\"announcement-dialog\" className=\"relative flex flex-col\">\n          <div className=\"flex h-50 shrink-0 items-center justify-center bg-brand-subtle\">\n            {step?.illustration ?? <AnnouncementIllustration />}\n          </div>\n          {/* As in ModalHeader, the sheet has no X (it closes by swiping). The wrapper\n              places it: the button's touch-target makes the button itself relative. */}\n          <div className=\"absolute top-3 right-3 in-data-[layout=sheet]:hidden\">\n            <ModalClose\n              render={\n                <IconButton\n                  variant=\"ghost\"\n                  size=\"small\"\n                  icon={<XCloseIcon />}\n                  aria-label={labels.close}\n                />\n              }\n            />\n          </div>\n\n          <div\n            aria-live=\"polite\"\n            className=\"flex flex-col gap-2 px-6 pt-6 pb-2\"\n          >\n            <ModalTitle>{step?.title}</ModalTitle>\n            <ModalBody>{step?.description}</ModalBody>\n          </div>\n\n          <div className=\"flex flex-wrap items-center justify-end gap-3 p-6\">\n            {total > 1 && (\n              <div className=\"me-auto flex items-center gap-2\">\n                <span aria-hidden className=\"flex gap-2\">\n                  {steps.map((_, position) => (\n                    <span\n                      // biome-ignore lint/suspicious/noArrayIndexKey: the dots are positional and never reorder.\n                      key={position}\n                      data-current={position === current || undefined}\n                      className={cn(\n                        \"size-2 rounded-full\",\n                        position === current\n                          ? \"bg-text-brand\"\n                          : \"bg-text-disabled\",\n                      )}\n                    />\n                  ))}\n                </span>\n                <p className=\"text-label-small text-text-secondary\">\n                  {labels.announcementStep(current + 1, total)}\n                </p>\n              </div>\n            )}\n            {!last && (\n              <ModalClose render={<Button variant=\"ghost\" />}>\n                {labels.announcementSkip}\n              </ModalClose>\n            )}\n            <Button ref={primaryRef} onClick={handlePrimary}>\n              {last ? (finishLabel ?? labels.announcementStart) : labels.next}\n            </Button>\n          </div>\n        </div>\n      </ModalContent>\n    </Modal>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/announcement/announcement-illustration.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+export interface AnnouncementIllustrationProps extends Omit<ComponentProps<"svg">, "children"> {
+}
+/**
+ * The "what's new" megaphone, from the Figma export. Decorative (hidden from screen
+ * readers) and coloured with tokens, so it follows the theme: body `brand`, white
+ * parts `background`, sound lines `text-brand`. 211×162; it sits on `brand-subtle`.
+ */
+export declare function AnnouncementIllustration({ className, ...props }: AnnouncementIllustrationProps): React.JSX.Element;

package/dist/components/announcement/announcement-illustration.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function AnnouncementIllustration({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 211 162",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      "data-slot": "announcement-illustration",
+      className: cn("h-40.5 w-52.75 shrink-0", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M30.7842 107.723L74.7136 11.2674L136.282 117.907L30.7842 107.723Z",
+            className: "fill-background"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M124.365 53.6945C107.244 24.0393 85.7438 4.39852 76.3439 9.82555C66.9441 15.2526 73.2036 43.6923 90.325 73.3475C107.446 103.003 128.946 122.643 138.346 117.216C147.746 111.789 141.486 83.3496 124.365 53.6945Z",
+            className: "fill-brand"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M108.115 54.985C103.051 53.628 97.8453 56.6333 96.4883 61.6976C95.1314 66.7619 98.1367 71.9673 103.201 73.3243C108.265 74.6812 113.471 71.6759 114.828 66.6116C116.185 61.5473 113.179 56.3419 108.115 54.985Z",
+            className: "fill-background"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M29.4766 125.676C22.8326 129.512 8.71701 104.709 15.208 100.962L44.102 84.2797L58.3706 108.994L29.4766 125.676Z",
+            className: "fill-background"
+          }
+        ),
+        /* @__PURE__ */ jsxs("g", { strokeWidth: "2", strokeLinecap: "round", className: "stroke-text-brand", children: [
+          /* @__PURE__ */ jsx("path", { d: "M210 75.6393L166.616 71.9717" }),
+          /* @__PURE__ */ jsx("path", { d: "M202.783 44.5194L162.058 59.9172" }),
+          /* @__PURE__ */ jsx("path", { d: "M187.877 14.4086L156.231 44.3109" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  AnnouncementIllustration
+};
+//# sourceMappingURL=announcement-illustration.js.map

package/dist/components/announcement/announcement-illustration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"announcement-illustration.js","sources":["../../../src/components/announcement/announcement-illustration.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nexport interface AnnouncementIllustrationProps\n  extends Omit<ComponentProps<\"svg\">, \"children\"> {}\n\n/**\n * The \"what's new\" megaphone, from the Figma export. Decorative (hidden from screen\n * readers) and coloured with tokens, so it follows the theme: body `brand`, white\n * parts `background`, sound lines `text-brand`. 211×162; it sits on `brand-subtle`.\n */\nexport function AnnouncementIllustration({\n  className,\n  ...props\n}: AnnouncementIllustrationProps): React.JSX.Element {\n  return (\n    <svg\n      viewBox=\"0 0 211 162\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      data-slot=\"announcement-illustration\"\n      className={cn(\"h-40.5 w-52.75 shrink-0\", className)}\n      {...props}\n    >\n      <path\n        d=\"M30.7842 107.723L74.7136 11.2674L136.282 117.907L30.7842 107.723Z\"\n        className=\"fill-background\"\n      />\n      <path\n        d=\"M124.365 53.6945C107.244 24.0393 85.7438 4.39852 76.3439 9.82555C66.9441 15.2526 73.2036 43.6923 90.325 73.3475C107.446 103.003 128.946 122.643 138.346 117.216C147.746 111.789 141.486 83.3496 124.365 53.6945Z\"\n        className=\"fill-brand\"\n      />\n      <path\n        d=\"M108.115 54.985C103.051 53.628 97.8453 56.6333 96.4883 61.6976C95.1314 66.7619 98.1367 71.9673 103.201 73.3243C108.265 74.6812 113.471 71.6759 114.828 66.6116C116.185 61.5473 113.179 56.3419 108.115 54.985Z\"\n        className=\"fill-background\"\n      />\n      <path\n        d=\"M29.4766 125.676C22.8326 129.512 8.71701 104.709 15.208 100.962L44.102 84.2797L58.3706 108.994L29.4766 125.676Z\"\n        className=\"fill-background\"\n      />\n      <g strokeWidth=\"2\" strokeLinecap=\"round\" className=\"stroke-text-brand\">\n        <path d=\"M210 75.6393L166.616 71.9717\" />\n        <path d=\"M202.783 44.5194L162.058 59.9172\" />\n        <path d=\"M187.877 14.4086L156.231 44.3109\" />\n      </g>\n    </svg>\n  );\n}\n"],"names":[],"mappings":";;AAYO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA,GAAG;AACL,GAAqD;AACnD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,aAAU;AAAA,MACV,WAAW,GAAG,2BAA2B,SAAS;AAAA,MACjD,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,6BAEX,KAAA,EAAE,aAAY,KAAI,eAAc,SAAQ,WAAU,qBACjD,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,GAAE,+BAAA,CAA+B;AAAA,UACvC,oBAAC,QAAA,EAAK,GAAE,mCAAA,CAAmC;AAAA,UAC3C,oBAAC,QAAA,EAAK,GAAE,mCAAA,CAAmC;AAAA,QAAA,EAAA,CAC7C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,2 @@
+export { AnnouncementDialog, type AnnouncementDialogProps, type AnnouncementStep, } from "./announcement-dialog";
+export { AnnouncementIllustration, type AnnouncementIllustrationProps, } from "./announcement-illustration";

package/dist/components/app-shell/app-shell.d.ts

@@ -0,0 +1,74 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type MobileHeaderActionProps } from "../mobile-header";
+export interface AppShellProps extends ComponentProps<"div"> {
+    /**
+     * The `Sidebar`, shown from the `lg` breakpoint (1024px), stuck to the left at full
+     * height. Below `lg` the same sidebar opens as the menu drawer (`AppShellMenuButton`).
+     */
+    sidebar?: ReactNode;
+    /** The `MobileHeader`, stuck to the top below `lg`. */
+    mobileHeader?: ReactNode;
+    /** The `BottomBar`, stuck to the bottom below `lg`. Leave it out on second-level screens. */
+    bottomBar?: ReactNode;
+    /** The `Footer`, at the end of the content column. */
+    footer?: ReactNode;
+    /**
+     * Text of the skip link, the first thing a keyboard reaches. Defaults to the
+     * `skipToContent` label when the provider has it, else "Saltar al contenido".
+     */
+    skipLinkLabel?: string;
+    /** The page: usually `PageHeader` + `AppShellContent`. It goes inside `<main>`. */
+    children: ReactNode;
+}
+/**
+ * The responsive frame of every screen, in both the patient app and the clinic admin.
+ * It lays out the pieces; the sections and the copy are the app's.
+ *
+ * ```tsx
+ * <AppShell
+ *   sidebar={<Sidebar>…</Sidebar>}
+ *   mobileHeader={<MobileHeader title="Agenda" leading={<AppShellMenuButton />} />}
+ *   bottomBar={<BottomBar>…</BottomBar>}
+ *   footer={<Footer holder="mediQuo">…</Footer>}
+ * >
+ *   <PageHeader title="Agenda" />
+ *   <AppShellContent>…</AppShellContent>
+ * </AppShell>
+ * ```
+ *
+ * - From `lg` (1024px): sidebar on the left + content column (PageHeader, content,
+ *   footer). Below: mobile header on top, content, footer, bottom bar at the bottom.
+ * - The document scrolls (not an inner box), so the router's scroll restoration and
+ *   the mobile browser bars work as usual; the side and top/bottom bars are sticky.
+ * - A skip link ("Saltar al contenido") comes first and moves focus to `<main>`.
+ *
+ * **No dead ends.** Every screen must offer a way to another one:
+ * - Root sections: the sidebar on desktop; on mobile, the bottom bar (up to five) AND
+ *   the menu (`<AppShellMenuButton />` in the header's `leading`), which opens the
+ *   full sidebar — the sections that don't fit in the bar must be reachable there.
+ * - Second-level screens (a programme, an appointment, a document): on mobile,
+ *   `leading={<MobileHeaderBack render={<Link to="parent" />} />}` and usually no
+ *   bottom bar; on desktop, the sidebar plus a `Breadcrumb` in `PageHeader`.
+ * - Flows (booking, onboarding): a back or close button on every step.
+ */
+export declare function AppShell({ sidebar, mobileHeader, bottomBar, footer, skipLinkLabel, className, children, ...props }: AppShellProps): React.JSX.Element;
+export interface AppShellMenuButtonProps extends Omit<MobileHeaderActionProps, "icon" | "aria-label" | "render"> {
+    /** Defaults to the `menu` label ("Menú"). */
+    "aria-label"?: string;
+}
+/**
+ * The `menu-01` button for `MobileHeader`'s `leading` slot on root screens: opens the
+ * AppShell's sidebar as a drawer from the left, with every section (the bottom bar
+ * only fits five). Focus is trapped inside while open and returns here on close.
+ * Renders nothing outside an `AppShell` with a `sidebar`.
+ */
+export declare function AppShellMenuButton({ "aria-label": ariaLabel, ...props }: AppShellMenuButtonProps): React.JSX.Element | null;
+export interface AppShellContentProps extends ComponentProps<"div"> {
+}
+/**
+ * The page's padded content area: the page gutter (16px on mobile, 24 on desktop, 60
+ * on wide screens as in the Figma patterns, the same as `PageHeader`), 24/32 on top,
+ * 32 at the bottom on mobile and 32/40 between blocks. Full-bleed pieces (a hero)
+ * go outside it, directly in `AppShell`.
+ */
+export declare function AppShellContent({ className, ...props }: AppShellContentProps): React.JSX.Element;