@mediquo/medicore 0.1.0

package/dist/components/app-shell/app-shell.js

@@ -0,0 +1,208 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react/drawer";
+import { useId, useRef, useState, useMemo, useContext, createContext, useEffect } from "react";
+import { Menu01Icon } from "../../icons/generated/menu-01.js";
+import { cn } from "../../lib/cn.js";
+import { SidebarDrawerContext } from "../sidebar/sidebar.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { MobileHeaderAction } from "../mobile-header/mobile-header.js";
+const DESKTOP_MEDIA_QUERY = "(min-width: 64rem)";
+const AppShellContext = createContext(null);
+function AppShell({
+  sidebar,
+  mobileHeader,
+  bottomBar,
+  footer,
+  skipLinkLabel,
+  className,
+  children,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const mainId = useId();
+  const mainRef = useRef(null);
+  const [navigation] = useState(() => Drawer.createHandle());
+  const context = useMemo(() => ({ navigation }), [navigation]);
+  const extendedLabels = labels;
+  const skipLabel = skipLinkLabel ?? extendedLabels.skipToContent ?? "Saltar al contenido";
+  const skipToContent = (event) => {
+    event.preventDefault();
+    mainRef.current?.focus();
+    mainRef.current?.scrollIntoView();
+  };
+  return /* @__PURE__ */ jsx(AppShellContext, { value: context, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "app-shell",
+      className: cn(
+        "min-h-dvh bg-surface text-text-primary lg:flex",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: `#${mainId}`,
+            onClick: skipToContent,
+            "data-slot": "app-shell-skip-link",
+            className: cn(
+              "fixed top-3 left-3 z-80 rounded-md bg-background px-4 py-2.5 text-label-strong text-text-brand shadow-md",
+              "-translate-y-20 focus:translate-y-0 focus-ring",
+              "transition-transform motion-reduce:transition-none"
+            ),
+            children: skipLabel
+          }
+        ),
+        sidebar && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "app-shell-sidebar",
+            className: "hidden lg:sticky lg:top-0 lg:flex lg:h-dvh lg:shrink-0 lg:self-start",
+            children: sidebar
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-dvh min-w-0 flex-1 flex-col", children: [
+          mobileHeader && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "app-shell-mobile-header",
+              className: "sticky top-0 z-40 lg:hidden",
+              children: mobileHeader
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "main",
+            {
+              ref: mainRef,
+              id: mainId,
+              tabIndex: -1,
+              "data-slot": "app-shell-main",
+              className: "flex flex-1 flex-col outline-none",
+              children
+            }
+          ),
+          footer,
+          bottomBar ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "app-shell-bottom-bar",
+              className: "sticky bottom-0 z-40 lg:hidden",
+              children: bottomBar
+            }
+          ) : (
+            // Without a bottom bar, keep the end of the page clear of the iPhone's home indicator.
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": true,
+                className: "h-[env(safe-area-inset-bottom)] lg:hidden"
+              }
+            )
+          )
+        ] }),
+        sidebar && /* @__PURE__ */ jsx(NavigationDrawer, { handle: navigation, children: sidebar })
+      ]
+    }
+  ) });
+}
+function NavigationDrawer({
+  handle,
+  children
+}) {
+  const labels = useMediCoreLabels();
+  const close = useMemo(() => () => handle.close(), [handle]);
+  useEffect(() => {
+    const query = window.matchMedia(DESKTOP_MEDIA_QUERY);
+    const onChange = () => {
+      if (query.matches) {
+        handle.close();
+      }
+    };
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, [handle]);
+  const closeOnNavigation = (event) => {
+    const link = event.target instanceof Element ? event.target.closest("a[href]") : null;
+    const blocked = link?.matches("[aria-disabled=true], [aria-busy=true]");
+    if (link && !blocked) {
+      handle.close();
+    }
+  };
+  return /* @__PURE__ */ jsx(Drawer.Root, { handle, swipeDirection: "left", children: /* @__PURE__ */ jsxs(Drawer.Portal, { children: [
+    /* @__PURE__ */ jsx(
+      Drawer.Backdrop,
+      {
+        "data-slot": "app-shell-drawer-backdrop",
+        className: cn(
+          "fixed inset-0 z-50 min-h-dvh bg-scrim-image transition-opacity duration-200",
+          "opacity-[calc(1-var(--drawer-swipe-progress,0))] data-swiping:duration-0",
+          "data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Drawer.Viewport, { className: "fixed inset-0 z-50 flex justify-start", children: /* @__PURE__ */ jsx(
+      Drawer.Popup,
+      {
+        "data-slot": "app-shell-drawer",
+        "aria-label": labels.menu,
+        onClick: closeOnNavigation,
+        className: cn(
+          "h-full w-80 max-w-[calc(100vw_-_--spacing(12))] pt-[env(safe-area-inset-top)] shadow-xl outline-hidden",
+          "bg-surface [transform:translateX(var(--drawer-swipe-movement-x,0px))]",
+          "transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
+          "data-ending-style:[transform:translateX(-100%)] data-starting-style:[transform:translateX(-100%)]",
+          "data-swiping:select-none motion-reduce:transition-none"
+        ),
+        children: /* @__PURE__ */ jsx(SidebarDrawerContext, { value: close, children })
+      }
+    ) })
+  ] }) });
+}
+function AppShellMenuButton({
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const context = useContext(AppShellContext);
+  if (!context) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Drawer.Trigger,
+    {
+      handle: context.navigation,
+      render: /* @__PURE__ */ jsx(
+        MobileHeaderAction,
+        {
+          "data-slot": "app-shell-menu-button",
+          icon: /* @__PURE__ */ jsx(Menu01Icon, {}),
+          "aria-label": ariaLabel ?? labels.menu,
+          ...props
+        }
+      )
+    }
+  );
+}
+function AppShellContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "app-shell-content",
+      className: cn(
+        "flex flex-1 flex-col gap-8 px-4 pt-6 pb-8 lg:gap-10 lg:px-6 lg:py-8 xl:px-15",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  AppShell,
+  AppShellContent,
+  AppShellMenuButton
+};
+//# sourceMappingURL=app-shell.js.map

package/dist/components/app-shell/app-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.js","sources":["../../../src/components/app-shell/app-shell.tsx"],"sourcesContent":["import { Drawer } from \"@base-ui/react/drawer\";\nimport {\n  type ComponentProps,\n  createContext,\n  type MouseEvent,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Menu01Icon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { type MediCoreLabels, useMediCoreLabels } from \"../../provider\";\nimport {\n  MobileHeaderAction,\n  type MobileHeaderActionProps,\n} from \"../mobile-header\";\nimport { SidebarDrawerContext } from \"../sidebar/sidebar\";\n\n/** Tailwind's `lg`: from here up the sidebar shows; below, the mobile header and bottom bar. */\nconst DESKTOP_MEDIA_QUERY = \"(min-width: 64rem)\";\n\ninterface AppShellContextValue {\n  navigation: Drawer.Handle<unknown>;\n}\n\nconst AppShellContext = createContext<AppShellContextValue | null>(null);\n\nexport interface AppShellProps extends ComponentProps<\"div\"> {\n  /**\n   * The `Sidebar`, shown from the `lg` breakpoint (1024px), stuck to the left at full\n   * height. Below `lg` the same sidebar opens as the menu drawer (`AppShellMenuButton`).\n   */\n  sidebar?: ReactNode;\n  /** The `MobileHeader`, stuck to the top below `lg`. */\n  mobileHeader?: ReactNode;\n  /** The `BottomBar`, stuck to the bottom below `lg`. Leave it out on second-level screens. */\n  bottomBar?: ReactNode;\n  /** The `Footer`, at the end of the content column. */\n  footer?: ReactNode;\n  /**\n   * Text of the skip link, the first thing a keyboard reaches. Defaults to the\n   * `skipToContent` label when the provider has it, else \"Saltar al contenido\".\n   */\n  skipLinkLabel?: string;\n  /** The page: usually `PageHeader` + `AppShellContent`. It goes inside `<main>`. */\n  children: ReactNode;\n}\n\n/**\n * The responsive frame of every screen, in both the patient app and the clinic admin.\n * It lays out the pieces; the sections and the copy are the app's.\n *\n * ```tsx\n * <AppShell\n *   sidebar={<Sidebar>…</Sidebar>}\n *   mobileHeader={<MobileHeader title=\"Agenda\" leading={<AppShellMenuButton />} />}\n *   bottomBar={<BottomBar>…</BottomBar>}\n *   footer={<Footer holder=\"mediQuo\">…</Footer>}\n * >\n *   <PageHeader title=\"Agenda\" />\n *   <AppShellContent>…</AppShellContent>\n * </AppShell>\n * ```\n *\n * - From `lg` (1024px): sidebar on the left + content column (PageHeader, content,\n *   footer). Below: mobile header on top, content, footer, bottom bar at the bottom.\n * - The document scrolls (not an inner box), so the router's scroll restoration and\n *   the mobile browser bars work as usual; the side and top/bottom bars are sticky.\n * - A skip link (\"Saltar al contenido\") comes first and moves focus to `<main>`.\n *\n * **No dead ends.** Every screen must offer a way to another one:\n * - Root sections: the sidebar on desktop; on mobile, the bottom bar (up to five) AND\n *   the menu (`<AppShellMenuButton />` in the header's `leading`), which opens the\n *   full sidebar — the sections that don't fit in the bar must be reachable there.\n * - Second-level screens (a programme, an appointment, a document): on mobile,\n *   `leading={<MobileHeaderBack render={<Link to=\"parent\" />} />}` and usually no\n *   bottom bar; on desktop, the sidebar plus a `Breadcrumb` in `PageHeader`.\n * - Flows (booking, onboarding): a back or close button on every step.\n */\nexport function AppShell({\n  sidebar,\n  mobileHeader,\n  bottomBar,\n  footer,\n  skipLinkLabel,\n  className,\n  children,\n  ...props\n}: AppShellProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const mainId = useId();\n  const mainRef = useRef<HTMLElement>(null);\n  const [navigation] = useState(() => Drawer.createHandle<unknown>());\n  const context = useMemo(() => ({ navigation }), [navigation]);\n\n  // `skipToContent` isn't a MediCore label yet: read it if the provider has it.\n  const extendedLabels: MediCoreLabels & { skipToContent?: string } = labels;\n  const skipLabel =\n    skipLinkLabel ?? extendedLabels.skipToContent ?? \"Saltar al contenido\";\n\n  // Moves focus by hand instead of following the `#hash`: a hash router would read it\n  // as a route.\n  const skipToContent = (event: MouseEvent<HTMLAnchorElement>): void => {\n    event.preventDefault();\n    mainRef.current?.focus();\n    mainRef.current?.scrollIntoView();\n  };\n\n  return (\n    <AppShellContext value={context}>\n      <div\n        data-slot=\"app-shell\"\n        className={cn(\n          \"min-h-dvh bg-surface text-text-primary lg:flex\",\n          className,\n        )}\n        {...props}\n      >\n        <a\n          href={`#${mainId}`}\n          onClick={skipToContent}\n          data-slot=\"app-shell-skip-link\"\n          className={cn(\n            \"fixed top-3 left-3 z-80 rounded-md bg-background px-4 py-2.5 text-label-strong text-text-brand shadow-md\",\n            \"-translate-y-20 focus:translate-y-0 focus-ring\",\n            \"transition-transform motion-reduce:transition-none\",\n          )}\n        >\n          {skipLabel}\n        </a>\n        {sidebar && (\n          <div\n            data-slot=\"app-shell-sidebar\"\n            className=\"hidden lg:sticky lg:top-0 lg:flex lg:h-dvh lg:shrink-0 lg:self-start\"\n          >\n            {sidebar}\n          </div>\n        )}\n        <div className=\"flex min-h-dvh min-w-0 flex-1 flex-col\">\n          {mobileHeader && (\n            <div\n              data-slot=\"app-shell-mobile-header\"\n              className=\"sticky top-0 z-40 lg:hidden\"\n            >\n              {mobileHeader}\n            </div>\n          )}\n          <main\n            ref={mainRef}\n            id={mainId}\n            tabIndex={-1}\n            data-slot=\"app-shell-main\"\n            className=\"flex flex-1 flex-col outline-none\"\n          >\n            {children}\n          </main>\n          {footer}\n          {bottomBar ? (\n            <div\n              data-slot=\"app-shell-bottom-bar\"\n              className=\"sticky bottom-0 z-40 lg:hidden\"\n            >\n              {bottomBar}\n            </div>\n          ) : (\n            // Without a bottom bar, keep the end of the page clear of the iPhone's home indicator.\n            <div\n              aria-hidden\n              className=\"h-[env(safe-area-inset-bottom)] lg:hidden\"\n            />\n          )}\n        </div>\n        {sidebar && (\n          <NavigationDrawer handle={navigation}>{sidebar}</NavigationDrawer>\n        )}\n      </div>\n    </AppShellContext>\n  );\n}\n\nfunction NavigationDrawer({\n  handle,\n  children,\n}: {\n  handle: Drawer.Handle<unknown>;\n  children: ReactNode;\n}): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const close = useMemo(() => () => handle.close(), [handle]);\n\n  // Growing past `lg` shows the real sidebar: the drawer has no reason to stay open.\n  useEffect(() => {\n    const query = window.matchMedia(DESKTOP_MEDIA_QUERY);\n    const onChange = (): void => {\n      if (query.matches) {\n        handle.close();\n      }\n    };\n    query.addEventListener(\"change\", onChange);\n    return () => query.removeEventListener(\"change\", onChange);\n  }, [handle]);\n\n  // Picking a section navigates: the menu closes by itself. (Not `defaultPrevented`:\n  // router links prevent the browser's navigation on every click.)\n  const closeOnNavigation = (event: MouseEvent<HTMLDivElement>): void => {\n    const link =\n      event.target instanceof Element ? event.target.closest(\"a[href]\") : null;\n    const blocked = link?.matches(\"[aria-disabled=true], [aria-busy=true]\");\n    if (link && !blocked) {\n      handle.close();\n    }\n  };\n\n  return (\n    <Drawer.Root handle={handle} swipeDirection=\"left\">\n      <Drawer.Portal>\n        <Drawer.Backdrop\n          data-slot=\"app-shell-drawer-backdrop\"\n          className={cn(\n            \"fixed inset-0 z-50 min-h-dvh bg-scrim-image transition-opacity duration-200\",\n            \"opacity-[calc(1-var(--drawer-swipe-progress,0))] data-swiping:duration-0\",\n            \"data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none\",\n          )}\n        />\n        <Drawer.Viewport className=\"fixed inset-0 z-50 flex justify-start\">\n          <Drawer.Popup\n            data-slot=\"app-shell-drawer\"\n            aria-label={labels.menu}\n            onClick={closeOnNavigation}\n            className={cn(\n              \"h-full w-80 max-w-[calc(100vw_-_--spacing(12))] pt-[env(safe-area-inset-top)] shadow-xl outline-hidden\",\n              \"bg-surface [transform:translateX(var(--drawer-swipe-movement-x,0px))]\",\n              \"transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]\",\n              \"data-ending-style:[transform:translateX(-100%)] data-starting-style:[transform:translateX(-100%)]\",\n              \"data-swiping:select-none motion-reduce:transition-none\",\n            )}\n          >\n            <SidebarDrawerContext value={close}>\n              {children}\n            </SidebarDrawerContext>\n          </Drawer.Popup>\n        </Drawer.Viewport>\n      </Drawer.Portal>\n    </Drawer.Root>\n  );\n}\n\nexport interface AppShellMenuButtonProps\n  extends Omit<MobileHeaderActionProps, \"icon\" | \"aria-label\" | \"render\"> {\n  /** Defaults to the `menu` label (\"Menú\"). */\n  \"aria-label\"?: string;\n}\n\n/**\n * The `menu-01` button for `MobileHeader`'s `leading` slot on root screens: opens the\n * AppShell's sidebar as a drawer from the left, with every section (the bottom bar\n * only fits five). Focus is trapped inside while open and returns here on close.\n * Renders nothing outside an `AppShell` with a `sidebar`.\n */\nexport function AppShellMenuButton({\n  \"aria-label\": ariaLabel,\n  ...props\n}: AppShellMenuButtonProps): React.JSX.Element | null {\n  const labels = useMediCoreLabels();\n  const context = useContext(AppShellContext);\n\n  if (!context) {\n    return null;\n  }\n\n  return (\n    <Drawer.Trigger\n      handle={context.navigation}\n      render={\n        <MobileHeaderAction\n          data-slot=\"app-shell-menu-button\"\n          icon={<Menu01Icon />}\n          aria-label={ariaLabel ?? labels.menu}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\nexport interface AppShellContentProps extends ComponentProps<\"div\"> {}\n\n/**\n * The page's padded content area: the page gutter (16px on mobile, 24 on desktop, 60\n * on wide screens as in the Figma patterns, the same as `PageHeader`), 24/32 on top,\n * 32 at the bottom on mobile and 32/40 between blocks. Full-bleed pieces (a hero)\n * go outside it, directly in `AppShell`.\n */\nexport function AppShellContent({\n  className,\n  ...props\n}: AppShellContentProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"app-shell-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-8 px-4 pt-6 pb-8 lg:gap-10 lg:px-6 lg:py-8 xl:px-15\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+export { AppShell, AppShellContent, type AppShellContentProps, AppShellMenuButton, type AppShellMenuButtonProps, type AppShellProps, } from "./app-shell";

package/dist/components/appointment-row/appointment-row.d.ts

@@ -0,0 +1,59 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ComponentProps, ReactNode } from "react";
+import type { CardHeadingLevel } from "../card";
+export type AppointmentRowState = "joinable" | "scheduled" | "empty";
+export interface AppointmentRowAppointmentProps extends Omit<ComponentProps<"article">, "title"> {
+    /**
+     * `joinable`: the room is open, "Unirse" is the only primary action and the chat
+     * the secondary one · `scheduled` (default): only the "⋯".
+     */
+    state?: "joinable" | "scheduled";
+    /** Start of the appointment: the DateBadge and the full date read by screen readers. */
+    date: Date;
+    /** Default `"es"`. */
+    locale?: string;
+    /** The patient's time zone: the date is shown in it. */
+    timeZone?: string;
+    /** "Dr. Jordi Puig". The row's heading. */
+    professional: ReactNode;
+    /**
+     * "Cardiología · 10:30". The time in the patient's zone; add the zone only when it
+     * is a different one ("10:30 (hora de Canarias)"), never "GMT+2".
+     */
+    meta?: ReactNode;
+    /** "Videoconsulta", "Llamada de voz", "Chat": a brand Badge. */
+    channel?: ReactNode;
+    /**
+     * The "⋯": a `Menu` (reagendar, cancelar, añadir al calendario) whose trigger is a
+     * ghost `IconButton` with `DotsVerticalIcon`.
+     */
+    menu?: ReactNode;
+    /** Joinable: the primary `Button` "Unirse". */
+    join?: ReactNode;
+    /** Joinable: the chat with the professional (outline icon on Wide, "Ir al chat" on Narrow). */
+    chatHref?: string;
+    /** Router link for the chat: `chatRender={<Link to="/chat/…" />}`. */
+    chatRender?: useRender.RenderProp;
+    /** Level of the professional's heading. Default 3. */
+    headingLevel?: CardHeadingLevel;
+}
+export interface AppointmentRowEmptyProps extends ComponentProps<"div"> {
+    /** Empty: no appointments. */
+    state: "empty";
+    /** The primary `Button` "Pedir cita" (a link to booking). */
+    action: ReactNode;
+}
+export type AppointmentRowProps = AppointmentRowAppointmentProps | AppointmentRowEmptyProps;
+/**
+ * An appointment in compact form, for the home and lists (the full version is
+ * `CardAppointment`).
+ *
+ * - `joinable`: the room is open. "Unirse" (`join`) is the only primary action, the
+ *   chat (`chatHref`) the secondary one, the rest in the "⋯" (`menu`).
+ * - `scheduled`: only the "⋯": reschedule, cancel, add to calendar.
+ * - `empty`: "No tienes citas programadas" and the way to book (`action`).
+ *
+ * It is an `<article>` headed by the professional; the `DateBadge` is decorative and
+ * the full date ("3 de julio, 10:30") is in a `<time>` for screen readers.
+ */
+export declare function AppointmentRow(props: AppointmentRowProps): React.JSX.Element;

package/dist/components/appointment-row/appointment-row.js

@@ -0,0 +1,160 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { CalendarPlus01Icon } from "../../icons/generated/calendar-plus-01.js";
+import { MessageIcon } from "../../icons/generated/message.js";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { IconContainer } from "../icon-container/icon-container.js";
+import { DateBadge } from "../date-badge/date-badge.js";
+import { Badge } from "../badge/badge.js";
+import { Tooltip } from "../tooltip/tooltip.js";
+import { buttonVariants } from "../button/button.js";
+import { iconButtonVariants } from "../icon-button/icon-button.js";
+const cardClasses = "@container rounded-xl bg-background p-4 shadow-s";
+function ChatLink({
+  compact,
+  label,
+  render,
+  ref,
+  href,
+  className,
+  ...props
+}) {
+  return useRender({
+    render,
+    ref,
+    defaultTagName: "a",
+    props: {
+      // Only when there is one: an explicit `href: undefined` would override the
+      // href a router link computes.
+      ...href !== void 0 ? { href } : {},
+      "data-slot": "appointment-row-chat",
+      className: cn(
+        compact ? [
+          buttonVariants({ variant: "outline", size: null }),
+          iconButtonVariants({ size: "default" })
+        ] : buttonVariants({ variant: "secondary" }),
+        className
+      ),
+      "aria-label": compact ? label : void 0,
+      children: compact ? /* @__PURE__ */ jsx(MessageIcon, {}) : label,
+      ...props
+    }
+  });
+}
+function AppointmentRow(props) {
+  const labels = useMediCoreLabels();
+  if (props.state === "empty") {
+    const { state: _state, action, className: className2, ...rest2 } = props;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "appointment-row",
+        "data-state": "empty",
+        className: cn(cardClasses, className2),
+        ...rest2,
+        children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_minmax(0,1fr)] items-center gap-4 @min-[480px]:grid-cols-[auto_minmax(0,1fr)_auto]", children: [
+          /* @__PURE__ */ jsx(IconContainer, { size: 40, tone: "brand", icon: /* @__PURE__ */ jsx(CalendarPlus01Icon, {}) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-body-default-strong text-text-primary", children: labels.appointmentEmptyTitle }),
+            /* @__PURE__ */ jsx("p", { className: "text-body-small text-text-secondary", children: labels.appointmentEmptyDescription })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "col-span-2 grid @min-[480px]:col-span-1 @min-[480px]:flex", children: action })
+        ] })
+      }
+    );
+  }
+  const {
+    state = "scheduled",
+    date,
+    locale = "es",
+    timeZone,
+    professional,
+    meta,
+    channel,
+    menu,
+    join,
+    chatHref,
+    chatRender,
+    headingLevel = 3,
+    className,
+    ...rest
+  } = props;
+  const Heading = `h${headingLevel}`;
+  const joinable = state === "joinable";
+  const hasChat = joinable && Boolean(chatHref || chatRender);
+  const fullDate = new Intl.DateTimeFormat(locale, {
+    day: "numeric",
+    month: "long",
+    hour: "2-digit",
+    minute: "2-digit",
+    hourCycle: "h23",
+    timeZone
+  }).format(date);
+  return /* @__PURE__ */ jsx(
+    "article",
+    {
+      "data-slot": "appointment-row",
+      "data-state": state,
+      className: cn(cardClasses, className),
+      ...rest,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-4",
+            joinable && "@min-[480px]:grid-cols-[auto_minmax(0,1fr)_auto_auto]"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(DateBadge, { date, locale, timeZone }),
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col items-start gap-1", children: [
+              /* @__PURE__ */ jsx(Heading, { className: "text-body-default-strong text-text-primary", children: professional }),
+              /* @__PURE__ */ jsx("p", { className: "sr-only", children: /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), children: fullDate }) }),
+              meta && /* @__PURE__ */ jsx("p", { className: "text-body-small text-text-secondary", children: meta }),
+              channel && /* @__PURE__ */ jsx(Badge, { variant: "brand", children: channel })
+            ] }),
+            joinable && /* @__PURE__ */ jsxs("div", { className: "col-span-3 row-start-2 grid auto-cols-fr grid-flow-col gap-2 @min-[480px]:col-span-1 @min-[480px]:col-start-3 @min-[480px]:row-start-1 @min-[480px]:flex @min-[480px]:items-center", children: [
+              hasChat && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Tooltip, { label: labels.appointmentGoToChat, children: /* @__PURE__ */ jsx(
+                  ChatLink,
+                  {
+                    compact: true,
+                    label: labels.appointmentGoToChat,
+                    href: chatHref,
+                    render: chatRender,
+                    className: "hidden @min-[480px]:inline-flex"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  ChatLink,
+                  {
+                    compact: false,
+                    label: labels.appointmentGoToChat,
+                    href: chatHref,
+                    render: chatRender,
+                    className: "@min-[480px]:hidden"
+                  }
+                )
+              ] }),
+              join
+            ] }),
+            menu && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "col-start-3 row-start-1 flex",
+                  joinable && "@min-[480px]:col-start-4 @min-[480px]:-ml-2"
+                ),
+                children: menu
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  AppointmentRow
+};
+//# sourceMappingURL=appointment-row.js.map

package/dist/components/appointment-row/appointment-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appointment-row.js","sources":["../../../src/components/appointment-row/appointment-row.tsx"],"sourcesContent":["import { useRender } from \"@base-ui/react/use-render\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { CalendarPlus01Icon, MessageIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { Badge } from \"../badge\";\nimport { buttonVariants } from \"../button\";\nimport type { CardHeadingLevel } from \"../card\";\nimport { DateBadge } from \"../date-badge\";\nimport { iconButtonVariants } from \"../icon-button\";\nimport { IconContainer } from \"../icon-container\";\nimport { Tooltip } from \"../tooltip\";\n\n/*\n * Figma `Layout` is not a prop: the row is a container, Wide from 480px (columns\n * ≥ 480) and Narrow below (phone, narrow columns: actions under the info, full\n * width). Mobile-first classes, `@min-[480px]:` for Wide.\n */\n\nconst cardClasses = \"@container rounded-xl bg-background p-4 shadow-s\";\n\nexport type AppointmentRowState = \"joinable\" | \"scheduled\" | \"empty\";\n\nexport interface AppointmentRowAppointmentProps\n  extends Omit<ComponentProps<\"article\">, \"title\"> {\n  /**\n   * `joinable`: the room is open, \"Unirse\" is the only primary action and the chat\n   * the secondary one · `scheduled` (default): only the \"⋯\".\n   */\n  state?: \"joinable\" | \"scheduled\";\n  /** Start of the appointment: the DateBadge and the full date read by screen readers. */\n  date: Date;\n  /** Default `\"es\"`. */\n  locale?: string;\n  /** The patient's time zone: the date is shown in it. */\n  timeZone?: string;\n  /** \"Dr. Jordi Puig\". The row's heading. */\n  professional: ReactNode;\n  /**\n   * \"Cardiología · 10:30\". The time in the patient's zone; add the zone only when it\n   * is a different one (\"10:30 (hora de Canarias)\"), never \"GMT+2\".\n   */\n  meta?: ReactNode;\n  /** \"Videoconsulta\", \"Llamada de voz\", \"Chat\": a brand Badge. */\n  channel?: ReactNode;\n  /**\n   * The \"⋯\": a `Menu` (reagendar, cancelar, añadir al calendario) whose trigger is a\n   * ghost `IconButton` with `DotsVerticalIcon`.\n   */\n  menu?: ReactNode;\n  /** Joinable: the primary `Button` \"Unirse\". */\n  join?: ReactNode;\n  /** Joinable: the chat with the professional (outline icon on Wide, \"Ir al chat\" on Narrow). */\n  chatHref?: string;\n  /** Router link for the chat: `chatRender={<Link to=\"/chat/…\" />}`. */\n  chatRender?: useRender.RenderProp;\n  /** Level of the professional's heading. Default 3. */\n  headingLevel?: CardHeadingLevel;\n}\n\nexport interface AppointmentRowEmptyProps extends ComponentProps<\"div\"> {\n  /** Empty: no appointments. */\n  state: \"empty\";\n  /** The primary `Button` \"Pedir cita\" (a link to booking). */\n  action: ReactNode;\n}\n\nexport type AppointmentRowProps =\n  | AppointmentRowAppointmentProps\n  | AppointmentRowEmptyProps;\n\ninterface ChatLinkProps extends useRender.ComponentProps<\"a\"> {\n  compact: boolean;\n  label: string;\n}\n\nfunction ChatLink({\n  compact,\n  label,\n  render,\n  ref,\n  href,\n  className,\n  ...props\n}: ChatLinkProps): React.JSX.Element {\n  return useRender({\n    render,\n    ref,\n    defaultTagName: \"a\",\n    props: {\n      // Only when there is one: an explicit `href: undefined` would override the\n      // href a router link computes.\n      ...(href !== undefined ? { href } : {}),\n      \"data-slot\": \"appointment-row-chat\",\n      className: cn(\n        compact\n          ? [\n              buttonVariants({ variant: \"outline\", size: null }),\n              iconButtonVariants({ size: \"default\" }),\n            ]\n          : buttonVariants({ variant: \"secondary\" }),\n        className,\n      ),\n      \"aria-label\": compact ? label : undefined,\n      children: compact ? <MessageIcon /> : label,\n      ...props,\n    },\n  });\n}\n\n/**\n * An appointment in compact form, for the home and lists (the full version is\n * `CardAppointment`).\n *\n * - `joinable`: the room is open. \"Unirse\" (`join`) is the only primary action, the\n *   chat (`chatHref`) the secondary one, the rest in the \"⋯\" (`menu`).\n * - `scheduled`: only the \"⋯\": reschedule, cancel, add to calendar.\n * - `empty`: \"No tienes citas programadas\" and the way to book (`action`).\n *\n * It is an `<article>` headed by the professional; the `DateBadge` is decorative and\n * the full date (\"3 de julio, 10:30\") is in a `<time>` for screen readers.\n */\nexport function AppointmentRow(props: AppointmentRowProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n\n  if (props.state === \"empty\") {\n    const { state: _state, action, className, ...rest } = props;\n\n    return (\n      <div\n        data-slot=\"appointment-row\"\n        data-state=\"empty\"\n        className={cn(cardClasses, className)}\n        {...rest}\n      >\n        <div className=\"grid grid-cols-[auto_minmax(0,1fr)] items-center gap-4 @min-[480px]:grid-cols-[auto_minmax(0,1fr)_auto]\">\n          <IconContainer size={40} tone=\"brand\" icon={<CalendarPlus01Icon />} />\n          <div className=\"flex min-w-0 flex-col gap-1\">\n            <p className=\"text-body-default-strong text-text-primary\">\n              {labels.appointmentEmptyTitle}\n            </p>\n            <p className=\"text-body-small text-text-secondary\">\n              {labels.appointmentEmptyDescription}\n            </p>\n          </div>\n          <div className=\"col-span-2 grid @min-[480px]:col-span-1 @min-[480px]:flex\">\n            {action}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  const {\n    state = \"scheduled\",\n    date,\n    locale = \"es\",\n    timeZone,\n    professional,\n    meta,\n    channel,\n    menu,\n    join,\n    chatHref,\n    chatRender,\n    headingLevel = 3,\n    className,\n    ...rest\n  } = props;\n  const Heading = `h${headingLevel}` as const;\n  const joinable = state === \"joinable\";\n  const hasChat = joinable && Boolean(chatHref || chatRender);\n  const fullDate = new Intl.DateTimeFormat(locale, {\n    day: \"numeric\",\n    month: \"long\",\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n    hourCycle: \"h23\",\n    timeZone,\n  }).format(date);\n\n  return (\n    <article\n      data-slot=\"appointment-row\"\n      data-state={state}\n      className={cn(cardClasses, className)}\n      {...rest}\n    >\n      <div\n        className={cn(\n          \"grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-4\",\n          joinable && \"@min-[480px]:grid-cols-[auto_minmax(0,1fr)_auto_auto]\",\n        )}\n      >\n        <DateBadge date={date} locale={locale} timeZone={timeZone} />\n        <div className=\"flex min-w-0 flex-col items-start gap-1\">\n          <Heading className=\"text-body-default-strong text-text-primary\">\n            {professional}\n          </Heading>\n          <p className=\"sr-only\">\n            <time dateTime={date.toISOString()}>{fullDate}</time>\n          </p>\n          {meta && (\n            <p className=\"text-body-small text-text-secondary\">{meta}</p>\n          )}\n          {channel && <Badge variant=\"brand\">{channel}</Badge>}\n        </div>\n\n        {joinable && (\n          <div className=\"col-span-3 row-start-2 grid auto-cols-fr grid-flow-col gap-2 @min-[480px]:col-span-1 @min-[480px]:col-start-3 @min-[480px]:row-start-1 @min-[480px]:flex @min-[480px]:items-center\">\n            {hasChat && (\n              <>\n                <Tooltip label={labels.appointmentGoToChat}>\n                  <ChatLink\n                    compact\n                    label={labels.appointmentGoToChat}\n                    href={chatHref}\n                    render={chatRender}\n                    className=\"hidden @min-[480px]:inline-flex\"\n                  />\n                </Tooltip>\n                <ChatLink\n                  compact={false}\n                  label={labels.appointmentGoToChat}\n                  href={chatHref}\n                  render={chatRender}\n                  className=\"@min-[480px]:hidden\"\n                />\n              </>\n            )}\n            {join}\n          </div>\n        )}\n\n        {menu && (\n          <div\n            className={cn(\n              \"col-start-3 row-start-1 flex\",\n              joinable && \"@min-[480px]:col-start-4 @min-[480px]:-ml-2\",\n            )}\n          >\n            {menu}\n          </div>\n        )}\n      </div>\n    </article>\n  );\n}\n"],"names":["className","rest"],"mappings":"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"}

package/dist/components/appointment-row/index.d.ts

@@ -0,0 +1 @@
+export { AppointmentRow, type AppointmentRowAppointmentProps, type AppointmentRowEmptyProps, type AppointmentRowProps, type AppointmentRowState, } from "./appointment-row";

package/dist/components/auth-panel/auth-panel.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface AuthPanelProps extends Omit<ComponentProps<"div">, "children"> {
+    /**
+     * The photo, full-bleed. It is decorative: it renders with `alt=""`. The brand veil
+     * (`scrim-brand`) always goes on top so the white headline reads over any image.
+     */
+    imageSrc?: string;
+    /**
+     * Optional context for the step: "Escribe tus datos exactamente como figuran en tu
+     * documento oficial." Don't repeat the form's title here. It is a `<p>`, not a
+     * heading.
+     */
+    headline?: ReactNode;
+}
+/**
+ * Left panel of the access screens on desktop (≥1024px), 560px wide and full height.
+ * It doesn't exist on mobile: the form takes the whole screen, so hide it below
+ * `lg` in the layout (`className="hidden lg:flex"`).
+ */
+export declare function AuthPanel({ imageSrc, headline, className, ...props }: AuthPanelProps): React.JSX.Element;

package/dist/components/auth-panel/auth-panel.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function AuthPanel({
+  imageSrc,
+  headline,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "auth-panel",
+      className: cn(
+        "relative flex w-140 shrink-0 flex-col justify-center overflow-hidden bg-brand-dark px-16",
+        className
+      ),
+      ...props,
+      children: [
+        imageSrc && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: imageSrc,
+            alt: "",
+            className: "absolute inset-0 size-full object-cover"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute inset-0 bg-scrim-brand" }),
+        headline && /* @__PURE__ */ jsx("p", { className: "relative text-heading-h2 text-text-inverse", children: headline })
+      ]
+    }
+  );
+}
+export {
+  AuthPanel
+};
+//# sourceMappingURL=auth-panel.js.map

package/dist/components/auth-panel/auth-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-panel.js","sources":["../../../src/components/auth-panel/auth-panel.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nexport interface AuthPanelProps\n  extends Omit<ComponentProps<\"div\">, \"children\"> {\n  /**\n   * The photo, full-bleed. It is decorative: it renders with `alt=\"\"`. The brand veil\n   * (`scrim-brand`) always goes on top so the white headline reads over any image.\n   */\n  imageSrc?: string;\n  /**\n   * Optional context for the step: \"Escribe tus datos exactamente como figuran en tu\n   * documento oficial.\" Don't repeat the form's title here. It is a `<p>`, not a\n   * heading.\n   */\n  headline?: ReactNode;\n}\n\n/**\n * Left panel of the access screens on desktop (≥1024px), 560px wide and full height.\n * It doesn't exist on mobile: the form takes the whole screen, so hide it below\n * `lg` in the layout (`className=\"hidden lg:flex\"`).\n */\nexport function AuthPanel({\n  imageSrc,\n  headline,\n  className,\n  ...props\n}: AuthPanelProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"auth-panel\"\n      className={cn(\n        \"relative flex w-140 shrink-0 flex-col justify-center overflow-hidden bg-brand-dark px-16\",\n        className,\n      )}\n      {...props}\n    >\n      {imageSrc && (\n        <img\n          src={imageSrc}\n          alt=\"\"\n          className=\"absolute inset-0 size-full object-cover\"\n        />\n      )}\n      <div aria-hidden className=\"absolute inset-0 bg-scrim-brand\" />\n      {headline && (\n        <p className=\"relative text-heading-h2 text-text-inverse\">{headline}</p>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAwBO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,YACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAI;AAAA,YACJ,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGd,oBAAC,OAAA,EAAI,eAAW,MAAC,WAAU,mCAAkC;AAAA,QAC5D,YACC,oBAAC,KAAA,EAAE,WAAU,8CAA8C,UAAA,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI5E;"}

package/dist/components/auth-panel/index.d.ts

@@ -0,0 +1 @@
+export { AuthPanel, type AuthPanelProps } from "./auth-panel";

package/dist/components/availability-column/availability-column.d.ts

@@ -0,0 +1,28 @@
+import { type ComponentProps, type ReactNode } from "react";
+export interface AvailabilityColumnProps extends Omit<ComponentProps<"fieldset">, "children"> {
+    /** The day of the column. Its header (`DayCell`) is formatted from it. */
+    date: Date;
+    /** Default `"es"`. */
+    locale?: string;
+    /** The patient's time zone, to read `date` in. */
+    timeZone?: string;
+    today?: boolean;
+    /**
+     * The day's `TimeSlot`s, five at most: more than five per day in a result card is
+     * noise, the rest go to the full agenda. None → the Empty state.
+     */
+    children?: ReactNode;
+    /** The availability is loading: the day shows, the slots are grey placeholders. */
+    loading?: boolean;
+}
+/**
+ * One day of the agenda as a column: `DayCell` on top, its hours below, 64px wide
+ * like both of them (if they didn't match, the grid would break). Goes inside
+ * `TimeSlotGroup`; six of these side by side make `CardProfessional`'s agenda.
+ *
+ * It is a `<fieldset>` named by the full date, so a screen reader hears "jueves, 1 de
+ * octubre" when entering the column. Empty (no slots) keeps its column with the day
+ * dimmed and a dash: if it disappeared, the other days would shift and Tuesday would
+ * be read as Monday.
+ */
+export declare function AvailabilityColumn({ date, locale, timeZone, today, loading, className, children, ...props }: AvailabilityColumnProps): React.JSX.Element;

package/dist/components/availability-column/availability-column.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, Children } from "react";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { DayCell } from "../day-cell/day-cell.js";
+import { TimeSlot } from "../time-slot/time-slot.js";
+const LOADING_SLOTS = [1, 2, 3, 4];
+function AvailabilityColumn({
+  date,
+  locale,
+  timeZone,
+  today,
+  loading = false,
+  className,
+  children,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const dayId = useId();
+  const empty = !loading && Children.toArray(children).length === 0;
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      "data-slot": "availability-column",
+      "aria-labelledby": dayId,
+      "aria-busy": loading || void 0,
+      className: cn(
+        "flex w-16 min-w-0 shrink-0 flex-col items-center gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          DayCell,
+          {
+            id: dayId,
+            date,
+            locale,
+            timeZone,
+            today,
+            disabled: empty
+          }
+        ),
+        loading && LOADING_SLOTS.map((slot) => /* @__PURE__ */ jsx(TimeSlot, { loading: true }, slot)),
+        empty && /* @__PURE__ */ jsxs("p", { className: "text-body-default text-text-secondary", children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "—" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.availabilityNoSlots })
+        ] }),
+        !loading && children
+      ]
+    }
+  );
+}
+export {
+  AvailabilityColumn
+};
+//# sourceMappingURL=availability-column.js.map