@mediquo/medicore 0.1.0

package/dist/components/chat/chat-bubble.d.ts

@@ -0,0 +1,49 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type ChatDeliveryState } from "./chat-delivery-status";
+/** `incoming`: the professional (left, `surface`) · `outgoing`: the patient (right, `brand-subtle`). */
+export type ChatMessageDirection = "incoming" | "outgoing";
+/** Delivery of an outgoing message. `failed` is the state the old chat didn't have. */
+export type ChatMessageStatus = ChatDeliveryState | "failed";
+/**
+ * The bubble shape shared by messages, attachments and the typing indicator: 12px
+ * radius with the corner on the speaker's side closed to 4 instead of a drawn tail,
+ * and a max width of 272 (a line longer than ~45 characters reads badly).
+ */
+export declare const chatBubbleVariants: (props?: ({
+    direction?: "incoming" | "outgoing" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ChatBubbleProps extends Omit<ComponentProps<"div">, "children"> {
+    /** Default `incoming`. */
+    direction?: ChatMessageDirection;
+    /** The message. 16px: in a medical chat people read dosage instructions. */
+    children: ReactNode;
+    /** Visible time, "21:32". */
+    time: string;
+    /** Machine-readable moment for `<time>` (ISO 8601). */
+    dateTime?: string;
+    /**
+     * Who wrote it, for screen readers ("Dra. Laura Martín"). Always pass it for
+     * incoming messages; outgoing ones default to "Tú".
+     */
+    sender?: string;
+    /**
+     * Outgoing only (an incoming message that fails never arrives). `failed` draws the
+     * red border and "No se ha enviado. Toca para reintentar." instead of the time.
+     */
+    status?: ChatMessageStatus;
+    /** Overrides the screen-reader text of the delivery status ("Leído a las 21:34"). */
+    statusLabel?: string;
+    /** With `status="failed"`: the failure message becomes a button that retries. */
+    onRetry?: () => void;
+}
+/**
+ * A chat message. Incoming on the left in `surface`, outgoing on the right in
+ * `brand-subtle`: the patient is always the purple one.
+ *
+ * - It shrinks with short messages and stops at 272px (`max-width`, not a width).
+ * - The outgoing time is `text-brand`, not grey: grey on `brand-subtle` is 4.45:1.
+ * - Screen readers hear who sent it and when before the text ("Dra. Laura Martín,
+ *   a las 21:32: …"); the visible time is hidden from them so it isn't read twice.
+ * - Put the bubbles inside a `ChatMessageList` (`role="log"`).
+ */
+export declare function ChatBubble({ direction, children, time, dateTime, sender, status, statusLabel, onRetry, className, ...props }: ChatBubbleProps): React.JSX.Element;

package/dist/components/chat/chat-bubble.js

@@ -0,0 +1,102 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { AlertCircleIcon } from "../../icons/generated/alert-circle.js";
+import { cn } from "../../lib/cn.js";
+import { ChatDeliveryStatus } from "./chat-delivery-status.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+const chatBubbleVariants = cva(
+  "flex min-w-0 max-w-68 flex-col gap-1 rounded-xl",
+  {
+    variants: {
+      direction: {
+        incoming: "rounded-bl-sm bg-surface",
+        outgoing: "rounded-br-sm bg-brand-subtle"
+      }
+    },
+    defaultVariants: {
+      direction: "incoming"
+    }
+  }
+);
+function ChatBubble({
+  direction = "incoming",
+  children,
+  time,
+  dateTime,
+  sender,
+  status,
+  statusLabel,
+  onRetry,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const outgoing = direction === "outgoing";
+  const failed = outgoing && status === "failed";
+  const senderName = sender ?? (outgoing ? labels.chatYou : void 0);
+  const failure = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AlertCircleIcon, { size: "sm" }),
+    labels.chatFailed
+  ] });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "chat-bubble",
+      "data-direction": direction,
+      "data-status": outgoing ? status : void 0,
+      className: cn(
+        "flex w-full",
+        outgoing ? "justify-end" : "justify-start",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            chatBubbleVariants({ direction }),
+            "px-3 py-2",
+            failed && "border border-text-error"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "whitespace-pre-line break-words text-body-default text-text-primary", children: [
+              senderName && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                labels.chatMessageFrom(senderName, time),
+                " "
+              ] }),
+              children
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-1", children: failed ? onRetry ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onRetry,
+                className: "touch-target inline-flex cursor-pointer items-center gap-1 rounded-xs text-left text-caption-default text-text-error focus-ring",
+                children: failure
+              }
+            ) : /* @__PURE__ */ jsx("p", { className: "flex items-center gap-1 text-caption-default text-text-error", children: failure }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "time",
+                {
+                  "aria-hidden": true,
+                  dateTime,
+                  className: cn(
+                    "text-caption-default",
+                    outgoing ? "text-text-brand" : "text-text-secondary"
+                  ),
+                  children: time
+                }
+              ),
+              outgoing && status && status !== "failed" && /* @__PURE__ */ jsx(ChatDeliveryStatus, { status, label: statusLabel })
+            ] }) })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  ChatBubble,
+  chatBubbleVariants
+};
+//# sourceMappingURL=chat-bubble.js.map

package/dist/components/chat/chat-bubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-bubble.js","sources":["../../../src/components/chat/chat-bubble.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { AlertCircleIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport {\n  type ChatDeliveryState,\n  ChatDeliveryStatus,\n} from \"./chat-delivery-status\";\n\n/** `incoming`: the professional (left, `surface`) · `outgoing`: the patient (right, `brand-subtle`). */\nexport type ChatMessageDirection = \"incoming\" | \"outgoing\";\n\n/** Delivery of an outgoing message. `failed` is the state the old chat didn't have. */\nexport type ChatMessageStatus = ChatDeliveryState | \"failed\";\n\n/**\n * The bubble shape shared by messages, attachments and the typing indicator: 12px\n * radius with the corner on the speaker's side closed to 4 instead of a drawn tail,\n * and a max width of 272 (a line longer than ~45 characters reads badly).\n */\nexport const chatBubbleVariants = cva(\n  \"flex min-w-0 max-w-68 flex-col gap-1 rounded-xl\",\n  {\n    variants: {\n      direction: {\n        incoming: \"rounded-bl-sm bg-surface\",\n        outgoing: \"rounded-br-sm bg-brand-subtle\",\n      },\n    },\n    defaultVariants: {\n      direction: \"incoming\",\n    },\n  },\n);\n\nexport interface ChatBubbleProps\n  extends Omit<ComponentProps<\"div\">, \"children\"> {\n  /** Default `incoming`. */\n  direction?: ChatMessageDirection;\n  /** The message. 16px: in a medical chat people read dosage instructions. */\n  children: ReactNode;\n  /** Visible time, \"21:32\". */\n  time: string;\n  /** Machine-readable moment for `<time>` (ISO 8601). */\n  dateTime?: string;\n  /**\n   * Who wrote it, for screen readers (\"Dra. Laura Martín\"). Always pass it for\n   * incoming messages; outgoing ones default to \"Tú\".\n   */\n  sender?: string;\n  /**\n   * Outgoing only (an incoming message that fails never arrives). `failed` draws the\n   * red border and \"No se ha enviado. Toca para reintentar.\" instead of the time.\n   */\n  status?: ChatMessageStatus;\n  /** Overrides the screen-reader text of the delivery status (\"Leído a las 21:34\"). */\n  statusLabel?: string;\n  /** With `status=\"failed\"`: the failure message becomes a button that retries. */\n  onRetry?: () => void;\n}\n\n/**\n * A chat message. Incoming on the left in `surface`, outgoing on the right in\n * `brand-subtle`: the patient is always the purple one.\n *\n * - It shrinks with short messages and stops at 272px (`max-width`, not a width).\n * - The outgoing time is `text-brand`, not grey: grey on `brand-subtle` is 4.45:1.\n * - Screen readers hear who sent it and when before the text (\"Dra. Laura Martín,\n *   a las 21:32: …\"); the visible time is hidden from them so it isn't read twice.\n * - Put the bubbles inside a `ChatMessageList` (`role=\"log\"`).\n */\nexport function ChatBubble({\n  direction = \"incoming\",\n  children,\n  time,\n  dateTime,\n  sender,\n  status,\n  statusLabel,\n  onRetry,\n  className,\n  ...props\n}: ChatBubbleProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const outgoing = direction === \"outgoing\";\n  const failed = outgoing && status === \"failed\";\n  const senderName = sender ?? (outgoing ? labels.chatYou : undefined);\n\n  const failure = (\n    <>\n      <AlertCircleIcon size=\"sm\" />\n      {labels.chatFailed}\n    </>\n  );\n\n  return (\n    <div\n      data-slot=\"chat-bubble\"\n      data-direction={direction}\n      data-status={outgoing ? status : undefined}\n      className={cn(\n        \"flex w-full\",\n        outgoing ? \"justify-end\" : \"justify-start\",\n        className,\n      )}\n      {...props}\n    >\n      <div\n        className={cn(\n          chatBubbleVariants({ direction }),\n          \"px-3 py-2\",\n          failed && \"border border-text-error\",\n        )}\n      >\n        <div className=\"whitespace-pre-line break-words text-body-default text-text-primary\">\n          {senderName && (\n            <span className=\"sr-only\">\n              {labels.chatMessageFrom(senderName, time)}{\" \"}\n            </span>\n          )}\n          {children}\n        </div>\n\n        <div className=\"flex items-center justify-end gap-1\">\n          {failed ? (\n            onRetry ? (\n              <button\n                type=\"button\"\n                onClick={onRetry}\n                className=\"touch-target inline-flex cursor-pointer items-center gap-1 rounded-xs text-left text-caption-default text-text-error focus-ring\"\n              >\n                {failure}\n              </button>\n            ) : (\n              <p className=\"flex items-center gap-1 text-caption-default text-text-error\">\n                {failure}\n              </p>\n            )\n          ) : (\n            <>\n              <time\n                aria-hidden\n                dateTime={dateTime}\n                className={cn(\n                  \"text-caption-default\",\n                  outgoing ? \"text-text-brand\" : \"text-text-secondary\",\n                )}\n              >\n                {time}\n              </time>\n              {outgoing && status && status !== \"failed\" && (\n                <ChatDeliveryStatus status={status} label={statusLabel} />\n              )}\n            </>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAsBO,MAAM,qBAAqB;AAAA,EAChC;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,WAAW;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,IAEF,iBAAiB;AAAA,MACf,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;AAsCO,SAAS,WAAW;AAAA,EACzB,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuC;AACrC,QAAM,SAAS,kBAAA;AACf,QAAM,WAAW,cAAc;AAC/B,QAAM,SAAS,YAAY,WAAW;AACtC,QAAM,aAAa,WAAW,WAAW,OAAO,UAAU;AAE1D,QAAM,UACJ,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,iBAAA,EAAgB,MAAK,KAAA,CAAK;AAAA,IAC1B,OAAO;AAAA,EAAA,GACV;AAGF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,kBAAgB;AAAA,MAChB,eAAa,WAAW,SAAS;AAAA,MACjC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT,mBAAmB,EAAE,WAAW;AAAA,YAChC;AAAA,YACA,UAAU;AAAA,UAAA;AAAA,UAGZ,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,uEACZ,UAAA;AAAA,cAAA,cACC,qBAAC,QAAA,EAAK,WAAU,WACb,UAAA;AAAA,gBAAA,OAAO,gBAAgB,YAAY,IAAI;AAAA,gBAAG;AAAA,cAAA,GAC7C;AAAA,cAED;AAAA,YAAA,GACH;AAAA,YAEA,oBAAC,OAAA,EAAI,WAAU,uCACZ,mBACC,UACE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,WAAU;AAAA,gBAET,UAAA;AAAA,cAAA;AAAA,YAAA,IAGH,oBAAC,KAAA,EAAE,WAAU,gEACV,UAAA,QAAA,CACH,IAGF,qBAAA,UAAA,EACE,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAW;AAAA,kBACX;AAAA,kBACA,WAAW;AAAA,oBACT;AAAA,oBACA,WAAW,oBAAoB;AAAA,kBAAA;AAAA,kBAGhC,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEF,YAAY,UAAU,WAAW,gCAC/B,oBAAA,EAAmB,QAAgB,OAAO,YAAA,CAAa;AAAA,YAAA,EAAA,CAE5D,EAAA,CAEJ;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/components/chat/chat-composer.d.ts

@@ -0,0 +1,40 @@
+import { type ComponentProps, type ReactNode } from "react";
+export interface ChatComposerProps extends Omit<ComponentProps<"div">, "children" | "defaultValue"> {
+    /** Controlled text. */
+    value?: string;
+    /** Initial text when uncontrolled. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /**
+     * Called with the trimmed text on the send button or Enter (Shift+Enter adds a
+     * line). The field then empties (`onValueChange("")` when controlled).
+     */
+    onSend: (message: string) => void;
+    /**
+     * Shows the paperclip ("Adjuntar archivo"): open your file picker here — a photo of
+     * the lesion, a report, a previous prescription.
+     */
+    onAttach?: () => void;
+    /** Defaults to "Escribe un mensaje". It is also the field's accessible name. */
+    placeholder?: string;
+    /**
+     * The consultation has ended and nobody would read the message: the field goes
+     * away and the composer says why, with a way out.
+     */
+    closed?: boolean;
+    /** With `closed`. Defaults to "Esta consulta ha finalizado.". */
+    closedMessage?: ReactNode;
+    /** With `closed`: a `Link` ("Pedir otra consulta"). */
+    closedAction?: ReactNode;
+}
+/**
+ * Where the patient writes: attach · field · send.
+ *
+ * - Send is disabled while the field is empty and turns on as soon as there is
+ *   text: an always-on send button that does nothing is a button that lies.
+ * - Attach is a paperclip, not a "+": it says exactly what it does.
+ * - The field grows with the text up to 5 lines and then scrolls; the buttons stay
+ *   at the bottom, not centred.
+ * - Text at 16px: below 16 iOS zooms in when the field is focused.
+ */
+export declare function ChatComposer({ value, defaultValue, onValueChange, onSend, onAttach, placeholder, closed, closedMessage, closedAction, className, ...props }: ChatComposerProps): React.JSX.Element;

package/dist/components/chat/chat-composer.js

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { PaperclipIcon } from "../../icons/generated/paperclip.js";
+import { Send01Icon } from "../../icons/generated/send-01.js";
+import { cn } from "../../lib/cn.js";
+import { selfControlStates, controlPlaceholder } from "../input/control-styles.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { IconButton } from "../icon-button/icon-button.js";
+function ChatComposer({
+  value,
+  defaultValue = "",
+  onValueChange,
+  onSend,
+  onAttach,
+  placeholder,
+  closed = false,
+  closedMessage,
+  closedAction,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const text = value ?? uncontrolledValue;
+  const canSend = text.trim().length > 0;
+  const setText = (next) => {
+    if (value === void 0) {
+      setUncontrolledValue(next);
+    }
+    onValueChange?.(next);
+  };
+  const send = () => {
+    if (!canSend) {
+      return;
+    }
+    onSend(text.trim());
+    setText("");
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+      event.preventDefault();
+      send();
+    }
+  };
+  const fieldLabel = placeholder ?? labels.chatComposerPlaceholder;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "chat-composer",
+      "data-closed": closed || void 0,
+      className: cn(
+        "border-border-subtle border-t bg-background p-3",
+        className
+      ),
+      ...props,
+      children: closed ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 text-center", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-body-small text-text-secondary", children: closedMessage ?? labels.chatClosed }),
+        closedAction
+      ] }) : /* @__PURE__ */ jsxs(
+        "form",
+        {
+          className: "flex items-end gap-2",
+          onSubmit: (event) => {
+            event.preventDefault();
+            send();
+          },
+          children: [
+            onAttach && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: "ghost",
+                icon: /* @__PURE__ */ jsx(PaperclipIcon, {}),
+                "aria-label": labels.chatAttach,
+                onClick: onAttach
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                "data-slot": "chat-composer-field",
+                rows: 1,
+                value: text,
+                placeholder: fieldLabel,
+                "aria-label": fieldLabel,
+                onChange: (event) => setText(event.currentTarget.value),
+                onKeyDown: handleKeyDown,
+                className: cn(
+                  "block max-h-36 min-h-control-md min-w-0 flex-1 resize-none overflow-y-auto field-sizing-content",
+                  "rounded-3xl border border-border-input bg-surface px-4 py-2.5 text-body-default text-text-primary",
+                  "ring-1 ring-transparent ring-inset transition-[border-color,box-shadow]",
+                  controlPlaceholder,
+                  selfControlStates
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                type: "submit",
+                icon: /* @__PURE__ */ jsx(Send01Icon, {}),
+                "aria-label": labels.chatSend,
+                disabled: !canSend
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  ChatComposer
+};
+//# sourceMappingURL=chat-composer.js.map

package/dist/components/chat/chat-composer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-composer.js","sources":["../../../src/components/chat/chat-composer.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type KeyboardEvent,\n  type ReactNode,\n  useState,\n} from \"react\";\n\nimport { PaperclipIcon, Send01Icon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { IconButton } from \"../icon-button\";\nimport { controlPlaceholder, selfControlStates } from \"../input/control-styles\";\n\nexport interface ChatComposerProps\n  extends Omit<ComponentProps<\"div\">, \"children\" | \"defaultValue\"> {\n  /** Controlled text. */\n  value?: string;\n  /** Initial text when uncontrolled. */\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /**\n   * Called with the trimmed text on the send button or Enter (Shift+Enter adds a\n   * line). The field then empties (`onValueChange(\"\")` when controlled).\n   */\n  onSend: (message: string) => void;\n  /**\n   * Shows the paperclip (\"Adjuntar archivo\"): open your file picker here — a photo of\n   * the lesion, a report, a previous prescription.\n   */\n  onAttach?: () => void;\n  /** Defaults to \"Escribe un mensaje\". It is also the field's accessible name. */\n  placeholder?: string;\n  /**\n   * The consultation has ended and nobody would read the message: the field goes\n   * away and the composer says why, with a way out.\n   */\n  closed?: boolean;\n  /** With `closed`. Defaults to \"Esta consulta ha finalizado.\". */\n  closedMessage?: ReactNode;\n  /** With `closed`: a `Link` (\"Pedir otra consulta\"). */\n  closedAction?: ReactNode;\n}\n\n/**\n * Where the patient writes: attach · field · send.\n *\n * - Send is disabled while the field is empty and turns on as soon as there is\n *   text: an always-on send button that does nothing is a button that lies.\n * - Attach is a paperclip, not a \"+\": it says exactly what it does.\n * - The field grows with the text up to 5 lines and then scrolls; the buttons stay\n *   at the bottom, not centred.\n * - Text at 16px: below 16 iOS zooms in when the field is focused.\n */\nexport function ChatComposer({\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  onSend,\n  onAttach,\n  placeholder,\n  closed = false,\n  closedMessage,\n  closedAction,\n  className,\n  ...props\n}: ChatComposerProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const text = value ?? uncontrolledValue;\n  const canSend = text.trim().length > 0;\n\n  const setText = (next: string): void => {\n    if (value === undefined) {\n      setUncontrolledValue(next);\n    }\n    onValueChange?.(next);\n  };\n\n  const send = (): void => {\n    if (!canSend) {\n      return;\n    }\n    onSend(text.trim());\n    setText(\"\");\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>): void => {\n    if (\n      event.key === \"Enter\" &&\n      !event.shiftKey &&\n      !event.nativeEvent.isComposing\n    ) {\n      event.preventDefault();\n      send();\n    }\n  };\n\n  const fieldLabel = placeholder ?? labels.chatComposerPlaceholder;\n\n  return (\n    <div\n      data-slot=\"chat-composer\"\n      data-closed={closed || undefined}\n      className={cn(\n        \"border-border-subtle border-t bg-background p-3\",\n        className,\n      )}\n      {...props}\n    >\n      {closed ? (\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <p className=\"text-body-small text-text-secondary\">\n            {closedMessage ?? labels.chatClosed}\n          </p>\n          {closedAction}\n        </div>\n      ) : (\n        <form\n          className=\"flex items-end gap-2\"\n          onSubmit={(event) => {\n            event.preventDefault();\n            send();\n          }}\n        >\n          {onAttach && (\n            <IconButton\n              variant=\"ghost\"\n              icon={<PaperclipIcon />}\n              aria-label={labels.chatAttach}\n              onClick={onAttach}\n            />\n          )}\n          <textarea\n            data-slot=\"chat-composer-field\"\n            rows={1}\n            value={text}\n            placeholder={fieldLabel}\n            aria-label={fieldLabel}\n            onChange={(event) => setText(event.currentTarget.value)}\n            onKeyDown={handleKeyDown}\n            className={cn(\n              \"block max-h-36 min-h-control-md min-w-0 flex-1 resize-none overflow-y-auto field-sizing-content\",\n              \"rounded-3xl border border-border-input bg-surface px-4 py-2.5 text-body-default text-text-primary\",\n              \"ring-1 ring-transparent ring-inset transition-[border-color,box-shadow]\",\n              controlPlaceholder,\n              selfControlStates,\n            )}\n          />\n          <IconButton\n            type=\"submit\"\n            icon={<Send01Icon />}\n            aria-label={labels.chatSend}\n            disabled={!canSend}\n          />\n        </form>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAqDO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyC;AACvC,QAAM,SAAS,kBAAA;AACf,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,YAAY;AACvE,QAAM,OAAO,SAAS;AACtB,QAAM,UAAU,KAAK,KAAA,EAAO,SAAS;AAErC,QAAM,UAAU,CAAC,SAAuB;AACtC,QAAI,UAAU,QAAW;AACvB,2BAAqB,IAAI;AAAA,IAC3B;AACA,oBAAgB,IAAI;AAAA,EACtB;AAEA,QAAM,OAAO,MAAY;AACvB,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AACA,WAAO,KAAK,MAAM;AAClB,YAAQ,EAAE;AAAA,EACZ;AAEA,QAAM,gBAAgB,CAAC,UAAoD;AACzE,QACE,MAAM,QAAQ,WACd,CAAC,MAAM,YACP,CAAC,MAAM,YAAY,aACnB;AACA,YAAM,eAAA;AACN,WAAA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,aAAa,eAAe,OAAO;AAEzC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAa,UAAU;AAAA,MACvB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA,SACC,qBAAC,OAAA,EAAI,WAAU,gDACb,UAAA;AAAA,QAAA,oBAAC,KAAA,EAAE,WAAU,uCACV,UAAA,iBAAiB,OAAO,YAC3B;AAAA,QACC;AAAA,MAAA,EAAA,CACH,IAEA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,UAAU,CAAC,UAAU;AACnB,kBAAM,eAAA;AACN,iBAAA;AAAA,UACF;AAAA,UAEC,UAAA;AAAA,YAAA,YACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,0BAAO,eAAA,EAAc;AAAA,gBACrB,cAAY,OAAO;AAAA,gBACnB,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,YAGb;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,aAAU;AAAA,gBACV,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP,aAAa;AAAA,gBACb,cAAY;AAAA,gBACZ,UAAU,CAAC,UAAU,QAAQ,MAAM,cAAc,KAAK;AAAA,gBACtD,WAAW;AAAA,gBACX,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,YAEF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,0BAAO,YAAA,EAAW;AAAA,gBAClB,cAAY,OAAO;AAAA,gBACnB,UAAU,CAAC;AAAA,cAAA;AAAA,YAAA;AAAA,UACb;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIR;"}

package/dist/components/chat/chat-conversation-row.d.ts

@@ -0,0 +1,42 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ComponentProps, MouseEventHandler, ReactNode } from "react";
+export type ChatConversationState = "read" | "unread" | "selected";
+export interface ChatConversationRowProps extends Omit<ComponentProps<"li">, "onClick"> {
+    /** The other person: "Dra. Laura Martín". It names the link. */
+    name: ReactNode;
+    /**
+     * The last message, always: without it people have to open every chat to know if
+     * something is pending. One line.
+     */
+    preview: ReactNode;
+    /** Time of the last message, "10:04" (or "Ayer", "lunes"). */
+    time: string;
+    /** Machine-readable moment for `<time>` (ISO 8601). */
+    dateTime?: string;
+    /** `<Avatar size={40} src alt="" />`: the name is already next to it. */
+    avatar?: ReactNode;
+    /**
+     * Unread messages. Above 0 the row is unread: the preview goes Medium in
+     * `text-primary`, the counter appears and the link's name says it ("Dra. Laura
+     * Martín, 2 mensajes sin leer").
+     */
+    unreadCount?: number;
+    /**
+     * Desktop, with the conversation open on the right: brand fill plus the 3px rail
+     * (`brand-subtle` on white alone is 1.14:1) and `aria-current="page"`.
+     */
+    selected?: boolean;
+    /** The conversation's URL: the whole row is the link. */
+    href?: string;
+    /** Router links: `render={<Link to="…" />}`. */
+    render?: useRender.RenderProp;
+    onClick?: MouseEventHandler<HTMLElement>;
+}
+/**
+ * A conversation in the chat list: avatar · name + time · last message + unread
+ * counter. It is an `<li>`: put the rows in a `<ul>`.
+ *
+ * Unread shows without colour (weight and the counter); the purple time only
+ * reinforces it. The time is `text-secondary`, never the brand's decorative hint.
+ */
+export declare function ChatConversationRow({ name, preview, time, dateTime, avatar, unreadCount, selected, href, render, onClick, className, ...props }: ChatConversationRowProps): React.JSX.Element;

package/dist/components/chat/chat-conversation-row.js

@@ -0,0 +1,104 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { Badge } from "../badge/badge.js";
+function ChatConversationRow({
+  name,
+  preview,
+  time,
+  dateTime,
+  avatar,
+  unreadCount = 0,
+  selected = false,
+  href,
+  render,
+  onClick,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const unread = unreadCount > 0;
+  const state = selected ? "selected" : unread ? "unread" : "read";
+  const isLink = Boolean(href || render);
+  const target = useRender({
+    render,
+    defaultTagName: isLink ? "a" : "button",
+    props: {
+      "data-slot": "chat-conversation-row-target",
+      href,
+      onClick,
+      type: isLink ? void 0 : "button",
+      "aria-current": selected ? "page" : void 0,
+      className: cn(
+        "block w-full cursor-pointer truncate text-left outline-none",
+        "after:absolute after:inset-0",
+        "focus-visible:after:outline-2 focus-visible:after:outline-border-focus focus-visible:after:-outline-offset-2"
+      ),
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        name,
+        unread && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+          ", ",
+          labels.chatUnreadMessages(unreadCount)
+        ] })
+      ] })
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "data-slot": "chat-conversation-row",
+      "data-state": state,
+      className: cn(
+        "relative flex min-h-18 items-center gap-3 bg-background px-4 py-3 transition-colors",
+        selected ? "bg-brand-subtle" : "hover:bg-surface",
+        className
+      ),
+      ...props,
+      children: [
+        selected && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "absolute inset-y-0 left-0 w-0.75 bg-text-brand"
+          }
+        ),
+        avatar,
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 text-label-strong text-text-primary", children: target }),
+            /* @__PURE__ */ jsx(
+              "time",
+              {
+                dateTime,
+                className: cn(
+                  "shrink-0 text-caption-default",
+                  selected ? "text-text-primary" : unread ? "text-text-brand" : "text-text-secondary"
+                ),
+                children: time
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "min-w-0 flex-1 truncate",
+                  unread ? "text-label-strong" : "text-body-small",
+                  unread || selected ? "text-text-primary" : "text-text-secondary"
+                ),
+                children: preview
+              }
+            ),
+            unread && /* @__PURE__ */ jsx(Badge, { variant: "brand", "aria-hidden": true, children: unreadCount })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ChatConversationRow
+};
+//# sourceMappingURL=chat-conversation-row.js.map

package/dist/components/chat/chat-conversation-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-conversation-row.js","sources":["../../../src/components/chat/chat-conversation-row.tsx"],"sourcesContent":["import { useRender } from \"@base-ui/react/use-render\";\nimport type { ComponentProps, MouseEventHandler, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { Badge } from \"../badge\";\n\nexport type ChatConversationState = \"read\" | \"unread\" | \"selected\";\n\nexport interface ChatConversationRowProps\n  extends Omit<ComponentProps<\"li\">, \"onClick\"> {\n  /** The other person: \"Dra. Laura Martín\". It names the link. */\n  name: ReactNode;\n  /**\n   * The last message, always: without it people have to open every chat to know if\n   * something is pending. One line.\n   */\n  preview: ReactNode;\n  /** Time of the last message, \"10:04\" (or \"Ayer\", \"lunes\"). */\n  time: string;\n  /** Machine-readable moment for `<time>` (ISO 8601). */\n  dateTime?: string;\n  /** `<Avatar size={40} src alt=\"\" />`: the name is already next to it. */\n  avatar?: ReactNode;\n  /**\n   * Unread messages. Above 0 the row is unread: the preview goes Medium in\n   * `text-primary`, the counter appears and the link's name says it (\"Dra. Laura\n   * Martín, 2 mensajes sin leer\").\n   */\n  unreadCount?: number;\n  /**\n   * Desktop, with the conversation open on the right: brand fill plus the 3px rail\n   * (`brand-subtle` on white alone is 1.14:1) and `aria-current=\"page\"`.\n   */\n  selected?: boolean;\n  /** The conversation's URL: the whole row is the link. */\n  href?: string;\n  /** Router links: `render={<Link to=\"…\" />}`. */\n  render?: useRender.RenderProp;\n  onClick?: MouseEventHandler<HTMLElement>;\n}\n\n/**\n * A conversation in the chat list: avatar · name + time · last message + unread\n * counter. It is an `<li>`: put the rows in a `<ul>`.\n *\n * Unread shows without colour (weight and the counter); the purple time only\n * reinforces it. The time is `text-secondary`, never the brand's decorative hint.\n */\nexport function ChatConversationRow({\n  name,\n  preview,\n  time,\n  dateTime,\n  avatar,\n  unreadCount = 0,\n  selected = false,\n  href,\n  render,\n  onClick,\n  className,\n  ...props\n}: ChatConversationRowProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const unread = unreadCount > 0;\n  const state: ChatConversationState = selected\n    ? \"selected\"\n    : unread\n      ? \"unread\"\n      : \"read\";\n  const isLink = Boolean(href || render);\n\n  const target = useRender({\n    render,\n    defaultTagName: isLink ? \"a\" : \"button\",\n    props: {\n      \"data-slot\": \"chat-conversation-row-target\",\n      href,\n      onClick,\n      type: isLink ? undefined : \"button\",\n      \"aria-current\": selected ? \"page\" : undefined,\n      className: cn(\n        \"block w-full cursor-pointer truncate text-left outline-none\",\n        \"after:absolute after:inset-0\",\n        \"focus-visible:after:outline-2 focus-visible:after:outline-border-focus focus-visible:after:-outline-offset-2\",\n      ),\n      children: (\n        <>\n          {name}\n          {unread && (\n            <span className=\"sr-only\">\n              , {labels.chatUnreadMessages(unreadCount)}\n            </span>\n          )}\n        </>\n      ),\n    },\n  });\n\n  return (\n    <li\n      data-slot=\"chat-conversation-row\"\n      data-state={state}\n      className={cn(\n        \"relative flex min-h-18 items-center gap-3 bg-background px-4 py-3 transition-colors\",\n        selected ? \"bg-brand-subtle\" : \"hover:bg-surface\",\n        className,\n      )}\n      {...props}\n    >\n      {selected && (\n        <span\n          aria-hidden\n          className=\"absolute inset-y-0 left-0 w-0.75 bg-text-brand\"\n        />\n      )}\n      {avatar}\n      <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <div className=\"flex items-center gap-2\">\n          <div className=\"min-w-0 flex-1 text-label-strong text-text-primary\">\n            {target}\n          </div>\n          <time\n            dateTime={dateTime}\n            className={cn(\n              \"shrink-0 text-caption-default\",\n              selected\n                ? \"text-text-primary\"\n                : unread\n                  ? \"text-text-brand\"\n                  : \"text-text-secondary\",\n            )}\n          >\n            {time}\n          </time>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <p\n            className={cn(\n              \"min-w-0 flex-1 truncate\",\n              unread ? \"text-label-strong\" : \"text-body-small\",\n              unread || selected ? \"text-text-primary\" : \"text-text-secondary\",\n            )}\n          >\n            {preview}\n          </p>\n          {unread && (\n            <Badge variant=\"brand\" aria-hidden>\n              {unreadCount}\n            </Badge>\n          )}\n        </div>\n      </div>\n    </li>\n  );\n}\n"],"names":[],"mappings":";;;;;AAiDO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgD;AAC9C,QAAM,SAAS,kBAAA;AACf,QAAM,SAAS,cAAc;AAC7B,QAAM,QAA+B,WACjC,aACA,SACE,WACA;AACN,QAAM,SAAS,QAAQ,QAAQ,MAAM;AAErC,QAAM,SAAS,UAAU;AAAA,IACvB;AAAA,IACA,gBAAgB,SAAS,MAAM;AAAA,IAC/B,OAAO;AAAA,MACL,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,MAAM,SAAS,SAAY;AAAA,MAC3B,gBAAgB,WAAW,SAAS;AAAA,MACpC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,UACE,qBAAA,UAAA,EACG,UAAA;AAAA,QAAA;AAAA,QACA,UACC,qBAAC,QAAA,EAAK,WAAU,WAAU,UAAA;AAAA,UAAA;AAAA,UACrB,OAAO,mBAAmB,WAAW;AAAA,QAAA,EAAA,CAC1C;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAEJ,CACD;AAED,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA,WAAW,oBAAoB;AAAA,QAC/B;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,YACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAW;AAAA,YACX,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGb;AAAA,QACD,qBAAC,OAAA,EAAI,WAAU,wCACb,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAA,oBAAC,OAAA,EAAI,WAAU,sDACZ,UAAA,QACH;AAAA,YACA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC;AAAA,gBACA,WAAW;AAAA,kBACT;AAAA,kBACA,WACI,sBACA,SACE,oBACA;AAAA,gBAAA;AAAA,gBAGP,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,GACF;AAAA,UACA,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,SAAS,sBAAsB;AAAA,kBAC/B,UAAU,WAAW,sBAAsB;AAAA,gBAAA;AAAA,gBAG5C,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,UACC,oBAAC,OAAA,EAAM,SAAQ,SAAQ,eAAW,MAC/B,UAAA,YAAA,CACH;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/chat/chat-date-separator.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface ChatDateSeparatorProps extends Omit<ComponentProps<"div">, "children"> {
+    /**
+     * "Hoy", "Ayer", or the full day from the day before yesterday on ("lunes, 28 de
+     * septiembre"). Never only the numeric date: "28/09" makes people count.
+     */
+    children: ReactNode;
+    /** Machine-readable day for `<time>` (`2026-09-28`). */
+    dateTime?: string;
+}
+/**
+ * Date pill between messages: `text-secondary` on `surface-raised` (4.60:1).
+ * It goes inside the `ChatMessageList`, before the first message of each day.
+ */
+export declare function ChatDateSeparator({ children, dateTime, className, ...props }: ChatDateSeparatorProps): React.JSX.Element;

package/dist/components/chat/chat-date-separator.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function ChatDateSeparator({
+  children,
+  dateTime,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "chat-date-separator",
+      className: cn("flex justify-center py-2", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "time",
+        {
+          dateTime,
+          className: "rounded-full bg-surface-raised px-3 py-1 text-caption-default text-text-secondary",
+          children
+        }
+      )
+    }
+  );
+}
+export {
+  ChatDateSeparator
+};
+//# sourceMappingURL=chat-date-separator.js.map

package/dist/components/chat/chat-date-separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-date-separator.js","sources":["../../../src/components/chat/chat-date-separator.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nexport interface ChatDateSeparatorProps\n  extends Omit<ComponentProps<\"div\">, \"children\"> {\n  /**\n   * \"Hoy\", \"Ayer\", or the full day from the day before yesterday on (\"lunes, 28 de\n   * septiembre\"). Never only the numeric date: \"28/09\" makes people count.\n   */\n  children: ReactNode;\n  /** Machine-readable day for `<time>` (`2026-09-28`). */\n  dateTime?: string;\n}\n\n/**\n * Date pill between messages: `text-secondary` on `surface-raised` (4.60:1).\n * It goes inside the `ChatMessageList`, before the first message of each day.\n */\nexport function ChatDateSeparator({\n  children,\n  dateTime,\n  className,\n  ...props\n}: ChatDateSeparatorProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"chat-date-separator\"\n      className={cn(\"flex justify-center py-2\", className)}\n      {...props}\n    >\n      <time\n        dateTime={dateTime}\n        className=\"rounded-full bg-surface-raised px-3 py-1 text-caption-default text-text-secondary\"\n      >\n        {children}\n      </time>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAmBO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA8C;AAC5C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,4BAA4B,SAAS;AAAA,MAClD,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAU;AAAA,UAET;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}

package/dist/components/chat/chat-delivery-status.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+/** `sending`: clock · `sent`: one check · `read`: two checks. */
+export type ChatDeliveryState = "sending" | "sent" | "read";
+export interface ChatDeliveryStatusProps extends Omit<ComponentProps<"span">, "children"> {
+    status: ChatDeliveryState;
+    /**
+     * What a screen reader hears. Defaults to "Enviando" / "Enviado" / "Leído"; pass
+     * the full sentence when you know when it was read ("Leído a las 21:34").
+     */
+    label?: string;
+}
+/**
+ * Delivery status of a message the patient sent. Sent and read differ by SHAPE
+ * (one or two checks), not by colour: both are `text-brand`, 8.49:1 on the
+ * outgoing bubble.
+ *
+ * In health "read" matters more than in a messaging app: it tells the person the
+ * professional has seen what they wrote. The state is also in text for screen
+ * readers, never only in the icon.
+ */
+export declare function ChatDeliveryStatus({ status, label, className, ...props }: ChatDeliveryStatusProps): React.JSX.Element;

package/dist/components/chat/chat-delivery-status.js

@@ -0,0 +1,43 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { CheckIcon } from "../../icons/generated/check.js";
+import { ClockIcon } from "../../icons/generated/clock.js";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+function ChatDeliveryStatus({
+  status,
+  label,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const text = label ?? {
+    sending: labels.chatSending,
+    sent: labels.chatSent,
+    read: labels.chatRead
+  }[status];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "chat-delivery-status",
+      "data-status": status,
+      className: cn(
+        "relative inline-flex h-4 w-5 shrink-0 items-center justify-center text-text-brand",
+        className
+      ),
+      ...props,
+      children: [
+        status === "sending" && /* @__PURE__ */ jsx(ClockIcon, { size: "sm" }),
+        status === "sent" && /* @__PURE__ */ jsx(CheckIcon, { size: "sm" }),
+        status === "read" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(CheckIcon, { size: "sm", className: "absolute top-0 -left-px" }),
+          /* @__PURE__ */ jsx(CheckIcon, { size: "sm", className: "absolute top-0 left-1.25" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: text })
+      ]
+    }
+  );
+}
+export {
+  ChatDeliveryStatus
+};
+//# sourceMappingURL=chat-delivery-status.js.map

package/dist/components/chat/chat-delivery-status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-delivery-status.js","sources":["../../../src/components/chat/chat-delivery-status.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { CheckIcon, ClockIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\n\n/** `sending`: clock · `sent`: one check · `read`: two checks. */\nexport type ChatDeliveryState = \"sending\" | \"sent\" | \"read\";\n\nexport interface ChatDeliveryStatusProps\n  extends Omit<ComponentProps<\"span\">, \"children\"> {\n  status: ChatDeliveryState;\n  /**\n   * What a screen reader hears. Defaults to \"Enviando\" / \"Enviado\" / \"Leído\"; pass\n   * the full sentence when you know when it was read (\"Leído a las 21:34\").\n   */\n  label?: string;\n}\n\n/**\n * Delivery status of a message the patient sent. Sent and read differ by SHAPE\n * (one or two checks), not by colour: both are `text-brand`, 8.49:1 on the\n * outgoing bubble.\n *\n * In health \"read\" matters more than in a messaging app: it tells the person the\n * professional has seen what they wrote. The state is also in text for screen\n * readers, never only in the icon.\n */\nexport function ChatDeliveryStatus({\n  status,\n  label,\n  className,\n  ...props\n}: ChatDeliveryStatusProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const text =\n    label ??\n    {\n      sending: labels.chatSending,\n      sent: labels.chatSent,\n      read: labels.chatRead,\n    }[status];\n\n  return (\n    <span\n      data-slot=\"chat-delivery-status\"\n      data-status={status}\n      className={cn(\n        \"relative inline-flex h-4 w-5 shrink-0 items-center justify-center text-text-brand\",\n        className,\n      )}\n      {...props}\n    >\n      {status === \"sending\" && <ClockIcon size=\"sm\" />}\n      {status === \"sent\" && <CheckIcon size=\"sm\" />}\n      {status === \"read\" && (\n        <>\n          <CheckIcon size=\"sm\" className=\"absolute top-0 -left-px\" />\n          <CheckIcon size=\"sm\" className=\"absolute top-0 left-1.25\" />\n        </>\n      )}\n      <span className=\"sr-only\">{text}</span>\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;;;AA4BO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA+C;AAC7C,QAAM,SAAS,kBAAA;AACf,QAAM,OACJ,SACA;AAAA,IACE,SAAS,OAAO;AAAA,IAChB,MAAM,OAAO;AAAA,IACb,MAAM,OAAO;AAAA,EAAA,EACb,MAAM;AAEV,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAa;AAAA,MACb,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,WAAW,aAAa,oBAAC,WAAA,EAAU,MAAK,MAAK;AAAA,QAC7C,WAAW,UAAU,oBAAC,WAAA,EAAU,MAAK,MAAK;AAAA,QAC1C,WAAW,UACV,qBAAA,UAAA,EACE,UAAA;AAAA,UAAA,oBAAC,WAAA,EAAU,MAAK,MAAK,WAAU,2BAA0B;AAAA,UACzD,oBAAC,WAAA,EAAU,MAAK,MAAK,WAAU,2BAAA,CAA2B;AAAA,QAAA,GAC5D;AAAA,QAEF,oBAAC,QAAA,EAAK,WAAU,WAAW,UAAA,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtC;"}