@mediquo/medicore 0.1.0

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

@@ -0,0 +1,24 @@
+import { Button as BaseButton } from "@base-ui/react/button";
+import type { ReactNode } from "react";
+export interface ChatLauncherProps extends Omit<BaseButton.Props, "className" | "children"> {
+    /** Visible label: "Chat". */
+    children: ReactNode;
+    /**
+     * New messages. Above 0 the red dot appears and the button's name says it
+     * ("Chat, 1 mensaje nuevo"): the dot alone isn't read.
+     */
+    unreadCount?: number;
+    /** Default `stethoscope-doctor`: it's the chat with the professional. */
+    icon?: ReactNode;
+    className?: string;
+}
+/**
+ * Floating access to the chat with the professional from screens that aren't the
+ * chat: the video call on desktop and the rating afterwards. Place it in the
+ * bottom-right corner, 24px from the edges (`className="fixed right-6 bottom-6"`).
+ *
+ * It is a button, not a navigation link: it opens the chat in a side panel without
+ * leaving the call (pass `aria-expanded` for that panel). Not used on mobile: there
+ * the chat is a `VideoControlButton control="chat"`.
+ */
+export declare function ChatLauncher({ children, unreadCount, icon, className, type, ...props }: ChatLauncherProps): React.JSX.Element;

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

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { StethoscopeDoctorIcon } from "../../icons/generated/stethoscope-doctor.js";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+function ChatLauncher({
+  children,
+  unreadCount = 0,
+  icon = /* @__PURE__ */ jsx(StethoscopeDoctorIcon, {}),
+  className,
+  type = "button",
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const unread = unreadCount > 0;
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "data-slot": "chat-launcher",
+      "data-unread": unread || void 0,
+      type,
+      className: cn(
+        "inline-flex h-12 shrink-0 cursor-pointer items-center gap-3 rounded-full bg-brand-subtle pe-6",
+        "text-label-strong text-text-brand shadow-md transition-shadow focus-ring",
+        "hover:shadow-lg",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "relative flex size-12 shrink-0 items-center justify-center rounded-full bg-brand text-text-inverse [&_svg]:size-icon-lg", children: [
+          icon,
+          unread && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "chat-launcher-unread",
+              className: "absolute top-0.5 right-0.5 size-3 rounded-full bg-error ring-2 ring-background"
+            }
+          )
+        ] }),
+        children,
+        unread && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+          ", ",
+          labels.chatNewMessages(unreadCount)
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ChatLauncher
+};
+//# sourceMappingURL=chat-launcher.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-launcher.js","sources":["../../../src/components/chat/chat-launcher.tsx"],"sourcesContent":["import { Button as BaseButton } from \"@base-ui/react/button\";\nimport type { ReactNode } from \"react\";\n\nimport { StethoscopeDoctorIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\n\nexport interface ChatLauncherProps\n  extends Omit<BaseButton.Props, \"className\" | \"children\"> {\n  /** Visible label: \"Chat\". */\n  children: ReactNode;\n  /**\n   * New messages. Above 0 the red dot appears and the button's name says it\n   * (\"Chat, 1 mensaje nuevo\"): the dot alone isn't read.\n   */\n  unreadCount?: number;\n  /** Default `stethoscope-doctor`: it's the chat with the professional. */\n  icon?: ReactNode;\n  className?: string;\n}\n\n/**\n * Floating access to the chat with the professional from screens that aren't the\n * chat: the video call on desktop and the rating afterwards. Place it in the\n * bottom-right corner, 24px from the edges (`className=\"fixed right-6 bottom-6\"`).\n *\n * It is a button, not a navigation link: it opens the chat in a side panel without\n * leaving the call (pass `aria-expanded` for that panel). Not used on mobile: there\n * the chat is a `VideoControlButton control=\"chat\"`.\n */\nexport function ChatLauncher({\n  children,\n  unreadCount = 0,\n  icon = <StethoscopeDoctorIcon />,\n  className,\n  type = \"button\",\n  ...props\n}: ChatLauncherProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const unread = unreadCount > 0;\n\n  return (\n    <BaseButton\n      data-slot=\"chat-launcher\"\n      data-unread={unread || undefined}\n      type={type}\n      className={cn(\n        \"inline-flex h-12 shrink-0 cursor-pointer items-center gap-3 rounded-full bg-brand-subtle pe-6\",\n        \"text-label-strong text-text-brand shadow-md transition-shadow focus-ring\",\n        \"hover:shadow-lg\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"relative flex size-12 shrink-0 items-center justify-center rounded-full bg-brand text-text-inverse [&_svg]:size-icon-lg\">\n        {icon}\n        {unread && (\n          <span\n            data-slot=\"chat-launcher-unread\"\n            className=\"absolute top-0.5 right-0.5 size-3 rounded-full bg-error ring-2 ring-background\"\n          />\n        )}\n      </span>\n      {children}\n      {unread && (\n        <span className=\"sr-only\">, {labels.chatNewMessages(unreadCount)}</span>\n      )}\n    </BaseButton>\n  );\n}\n"],"names":["BaseButton"],"mappings":";;;;;AA8BO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,cAAc;AAAA,EACd,2BAAQ,uBAAA,EAAsB;AAAA,EAC9B;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAyC;AACvC,QAAM,SAAS,kBAAA;AACf,QAAM,SAAS,cAAc;AAE7B,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAa,UAAU;AAAA,MACvB;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,qBAAC,QAAA,EAAK,WAAU,2HACb,UAAA;AAAA,UAAA;AAAA,UACA,UACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,aAAU;AAAA,cACV,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ,GAEJ;AAAA,QACC;AAAA,QACA,UACC,qBAAC,QAAA,EAAK,WAAU,WAAU,UAAA;AAAA,UAAA;AAAA,UAAG,OAAO,gBAAgB,WAAW;AAAA,QAAA,EAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIzE;"}

package/dist/components/chat/chat-message-list.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+export interface ChatMessageListProps extends ComponentProps<"div"> {
+}
+/**
+ * The conversation: `ChatDateSeparator`s, `ChatBubble`s and `ChatAttachment`s in
+ * order, 8px apart. It is a `role="log"` named "Mensajes", so screen readers
+ * announce new messages as they arrive without moving focus.
+ *
+ * It doesn't scroll by itself: put it in the scrolling area of the screen, with the
+ * `ChatTypingIndicator` right after it (outside the log, so typing isn't announced
+ * twice).
+ */
+export declare function ChatMessageList({ className, ...props }: ChatMessageListProps): React.JSX.Element;

package/dist/components/chat/chat-message-list.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+function ChatMessageList({
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "chat-message-list",
+      role: "log",
+      "aria-label": labels.chatMessages,
+      className: cn("flex flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+export {
+  ChatMessageList
+};
+//# sourceMappingURL=chat-message-list.js.map

package/dist/components/chat/chat-message-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-message-list.js","sources":["../../../src/components/chat/chat-message-list.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\n\nexport interface ChatMessageListProps extends ComponentProps<\"div\"> {}\n\n/**\n * The conversation: `ChatDateSeparator`s, `ChatBubble`s and `ChatAttachment`s in\n * order, 8px apart. It is a `role=\"log\"` named \"Mensajes\", so screen readers\n * announce new messages as they arrive without moving focus.\n *\n * It doesn't scroll by itself: put it in the scrolling area of the screen, with the\n * `ChatTypingIndicator` right after it (outside the log, so typing isn't announced\n * twice).\n */\nexport function ChatMessageList({\n  className,\n  ...props\n}: ChatMessageListProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n\n  return (\n    <div\n      data-slot=\"chat-message-list\"\n      role=\"log\"\n      aria-label={labels.chatMessages}\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;AAgBO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,GAAG;AACL,GAA4C;AAC1C,QAAM,SAAS,kBAAA;AAEf,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAY,OAAO;AAAA,MACnB,WAAW,GAAG,uBAAuB,SAAS;AAAA,MAC7C,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/chat/chat-room-header.d.ts

@@ -0,0 +1,33 @@
+import type { ComponentProps, MouseEventHandler, ReactNode } from "react";
+export interface ChatRoomHeaderProps extends Omit<ComponentProps<"div">, "title"> {
+    /** The professional: "Dra. Laura Martín". One line. */
+    name: ReactNode;
+    /**
+     * The most useful line on the screen: whether they are there and what they are.
+     * "En línea · Medicina general", "En consulta · te responderá en cuanto termine",
+     * "Respondió hace 2 h". It repeats the avatar's status dot in words.
+     */
+    subtitle?: ReactNode;
+    /** `<Avatar size={40} src alt status statusLabel />` with its availability dot. */
+    avatar?: ReactNode;
+    /**
+     * Mobile only: `<MobileHeaderBack render={<Link to="/chats" />} />`. Leave it out on
+     * desktop, where the conversation list is on the left.
+     */
+    back?: ReactNode;
+    /**
+     * Shows the video call button ("Iniciar videollamada"). Only when the consultation
+     * allows it: a button that is always there and sometimes doesn't work teaches
+     * people not to press it.
+     */
+    onVideoCall?: MouseEventHandler<HTMLButtonElement>;
+    /** The "⋮" menu: a `Menu` whose trigger is a ghost small `IconButton`. */
+    action?: ReactNode;
+    /** Heading level of the name. Default `h2`; `h1` when it heads the screen (mobile). */
+    titleAs?: "h1" | "h2" | "h3" | "p";
+}
+/**
+ * Header of a conversation: back · avatar · name + subtitle · video call · menu.
+ * 64px high, white with a bottom border.
+ */
+export declare function ChatRoomHeader({ name, subtitle, avatar, back, onVideoCall, action, titleAs: Title, className, ...props }: ChatRoomHeaderProps): React.JSX.Element;

package/dist/components/chat/chat-room-header.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { VideoRecorderIcon } from "../../icons/generated/video-recorder.js";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { IconButton } from "../icon-button/icon-button.js";
+function ChatRoomHeader({
+  name,
+  subtitle,
+  avatar,
+  back,
+  onVideoCall,
+  action,
+  titleAs: Title = "h2",
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chat-room-header",
+      className: cn(
+        "flex h-16 shrink-0 items-center gap-2 border-border-subtle border-b bg-background px-2",
+        !back && "ps-4",
+        className
+      ),
+      ...props,
+      children: [
+        back,
+        avatar,
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx(Title, { className: "truncate text-label-strong text-text-primary", children: name }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-caption-default text-text-secondary", children: subtitle })
+        ] }),
+        onVideoCall && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            variant: "ghost",
+            size: "small",
+            icon: /* @__PURE__ */ jsx(VideoRecorderIcon, {}),
+            "aria-label": labels.chatVideoCall,
+            onClick: onVideoCall
+          }
+        ),
+        action
+      ]
+    }
+  );
+}
+export {
+  ChatRoomHeader
+};
+//# sourceMappingURL=chat-room-header.js.map

package/dist/components/chat/chat-room-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-room-header.js","sources":["../../../src/components/chat/chat-room-header.tsx"],"sourcesContent":["import type { ComponentProps, MouseEventHandler, ReactNode } from \"react\";\n\nimport { VideoRecorderIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { IconButton } from \"../icon-button\";\n\nexport interface ChatRoomHeaderProps\n  extends Omit<ComponentProps<\"div\">, \"title\"> {\n  /** The professional: \"Dra. Laura Martín\". One line. */\n  name: ReactNode;\n  /**\n   * The most useful line on the screen: whether they are there and what they are.\n   * \"En línea · Medicina general\", \"En consulta · te responderá en cuanto termine\",\n   * \"Respondió hace 2 h\". It repeats the avatar's status dot in words.\n   */\n  subtitle?: ReactNode;\n  /** `<Avatar size={40} src alt status statusLabel />` with its availability dot. */\n  avatar?: ReactNode;\n  /**\n   * Mobile only: `<MobileHeaderBack render={<Link to=\"/chats\" />} />`. Leave it out on\n   * desktop, where the conversation list is on the left.\n   */\n  back?: ReactNode;\n  /**\n   * Shows the video call button (\"Iniciar videollamada\"). Only when the consultation\n   * allows it: a button that is always there and sometimes doesn't work teaches\n   * people not to press it.\n   */\n  onVideoCall?: MouseEventHandler<HTMLButtonElement>;\n  /** The \"⋮\" menu: a `Menu` whose trigger is a ghost small `IconButton`. */\n  action?: ReactNode;\n  /** Heading level of the name. Default `h2`; `h1` when it heads the screen (mobile). */\n  titleAs?: \"h1\" | \"h2\" | \"h3\" | \"p\";\n}\n\n/**\n * Header of a conversation: back · avatar · name + subtitle · video call · menu.\n * 64px high, white with a bottom border.\n */\nexport function ChatRoomHeader({\n  name,\n  subtitle,\n  avatar,\n  back,\n  onVideoCall,\n  action,\n  titleAs: Title = \"h2\",\n  className,\n  ...props\n}: ChatRoomHeaderProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n\n  return (\n    <div\n      data-slot=\"chat-room-header\"\n      className={cn(\n        \"flex h-16 shrink-0 items-center gap-2 border-border-subtle border-b bg-background px-2\",\n        !back && \"ps-4\",\n        className,\n      )}\n      {...props}\n    >\n      {back}\n      {avatar}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        <Title className=\"truncate text-label-strong text-text-primary\">\n          {name}\n        </Title>\n        {subtitle && (\n          <p className=\"truncate text-caption-default text-text-secondary\">\n            {subtitle}\n          </p>\n        )}\n      </div>\n      {onVideoCall && (\n        <IconButton\n          variant=\"ghost\"\n          size=\"small\"\n          icon={<VideoRecorderIcon />}\n          aria-label={labels.chatVideoCall}\n          onClick={onVideoCall}\n        />\n      )}\n      {action}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAwCO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,QAAQ;AAAA,EACjB;AAAA,EACA,GAAG;AACL,GAA2C;AACzC,QAAM,SAAS,kBAAA;AAEf,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,CAAC,QAAQ;AAAA,QACT;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACA;AAAA,QACD,qBAAC,OAAA,EAAI,WAAU,gCACb,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAM,WAAU,gDACd,UAAA,MACH;AAAA,UACC,YACC,oBAAC,KAAA,EAAE,WAAU,qDACV,UAAA,SAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QACC,eACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,0BAAO,mBAAA,EAAkB;AAAA,YACzB,cAAY,OAAO;AAAA,YACnB,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAGZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/chat/chat-typing-indicator.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface ChatTypingIndicatorProps extends Omit<ComponentProps<"div">, "children"> {
+    /**
+     * Whether the professional is typing. Keep the component mounted and toggle this:
+     * the live region has to exist before its text changes to be announced.
+     */
+    active?: boolean;
+    /** The sentence with the name: "La Dra. Martín está escribiendo…". Default "Escribiendo…". */
+    children?: ReactNode;
+}
+/**
+ * Tells the patient the professional is typing. Without it, someone who wrote and
+ * sees no answer for a minute closes the chat and calls.
+ *
+ * Three dots AND the sentence: the dots alone are an icon not everyone reads. The
+ * dots pulse (1.2 s loop) unless the person prefers reduced motion. The sentence is
+ * in an `aria-live="polite"` region and is announced once, when typing starts —
+ * not on every keystroke. Place it right after the `ChatMessageList`.
+ */
+export declare function ChatTypingIndicator({ active, children, className, ...props }: ChatTypingIndicatorProps): React.JSX.Element;

package/dist/components/chat/chat-typing-indicator.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { chatBubbleVariants } from "./chat-bubble.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+const dots = [
+  { id: "first", className: "" },
+  {
+    id: "second",
+    className: "[animation-delay:200ms] motion-reduce:opacity-60"
+  },
+  {
+    id: "third",
+    className: "[animation-delay:400ms] motion-reduce:opacity-30"
+  }
+];
+function ChatTypingIndicator({
+  active = true,
+  children,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "chat-typing-indicator",
+      "data-active": active || void 0,
+      "aria-live": "polite",
+      className: cn(active && "flex items-center gap-2", className),
+      ...props,
+      children: active && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              chatBubbleVariants({ direction: "incoming" }),
+              "flex-row items-center gap-1 p-3"
+            ),
+            children: dots.map((dot) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "size-2 rounded-full bg-text-secondary",
+                  "motion-safe:animate-pulse motion-safe:[animation-duration:1.2s]",
+                  dot.className
+                )
+              },
+              dot.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "min-w-0 truncate text-caption-default text-text-secondary", children: children ?? labels.chatTyping })
+      ] })
+    }
+  );
+}
+export {
+  ChatTypingIndicator
+};
+//# sourceMappingURL=chat-typing-indicator.js.map

package/dist/components/chat/chat-typing-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-typing-indicator.js","sources":["../../../src/components/chat/chat-typing-indicator.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { chatBubbleVariants } from \"./chat-bubble\";\n\nexport interface ChatTypingIndicatorProps\n  extends Omit<ComponentProps<\"div\">, \"children\"> {\n  /**\n   * Whether the professional is typing. Keep the component mounted and toggle this:\n   * the live region has to exist before its text changes to be announced.\n   */\n  active?: boolean;\n  /** The sentence with the name: \"La Dra. Martín está escribiendo…\". Default \"Escribiendo…\". */\n  children?: ReactNode;\n}\n\n// Staggered pulse; with reduced motion they stay still, fading 1 → 0.6 → 0.3 as in Figma.\nconst dots = [\n  { id: \"first\", className: \"\" },\n  {\n    id: \"second\",\n    className: \"[animation-delay:200ms] motion-reduce:opacity-60\",\n  },\n  {\n    id: \"third\",\n    className: \"[animation-delay:400ms] motion-reduce:opacity-30\",\n  },\n];\n\n/**\n * Tells the patient the professional is typing. Without it, someone who wrote and\n * sees no answer for a minute closes the chat and calls.\n *\n * Three dots AND the sentence: the dots alone are an icon not everyone reads. The\n * dots pulse (1.2 s loop) unless the person prefers reduced motion. The sentence is\n * in an `aria-live=\"polite\"` region and is announced once, when typing starts —\n * not on every keystroke. Place it right after the `ChatMessageList`.\n */\nexport function ChatTypingIndicator({\n  active = true,\n  children,\n  className,\n  ...props\n}: ChatTypingIndicatorProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n\n  return (\n    <div\n      data-slot=\"chat-typing-indicator\"\n      data-active={active || undefined}\n      aria-live=\"polite\"\n      className={cn(active && \"flex items-center gap-2\", className)}\n      {...props}\n    >\n      {active && (\n        <>\n          <span\n            aria-hidden\n            className={cn(\n              chatBubbleVariants({ direction: \"incoming\" }),\n              \"flex-row items-center gap-1 p-3\",\n            )}\n          >\n            {dots.map((dot) => (\n              <span\n                key={dot.id}\n                className={cn(\n                  \"size-2 rounded-full bg-text-secondary\",\n                  \"motion-safe:animate-pulse motion-safe:[animation-duration:1.2s]\",\n                  dot.className,\n                )}\n              />\n            ))}\n          </span>\n          <p className=\"min-w-0 truncate text-caption-default text-text-secondary\">\n            {children ?? labels.chatTyping}\n          </p>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAkBA,MAAM,OAAO;AAAA,EACX,EAAE,IAAI,SAAS,WAAW,GAAA;AAAA,EAC1B;AAAA,IACE,IAAI;AAAA,IACJ,WAAW;AAAA,EAAA;AAAA,EAEb;AAAA,IACE,IAAI;AAAA,IACJ,WAAW;AAAA,EAAA;AAEf;AAWO,SAAS,oBAAoB;AAAA,EAClC,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgD;AAC9C,QAAM,SAAS,kBAAA;AAEf,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAa,UAAU;AAAA,MACvB,aAAU;AAAA,MACV,WAAW,GAAG,UAAU,2BAA2B,SAAS;AAAA,MAC3D,GAAG;AAAA,MAEH,oBACC,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAW;AAAA,YACX,WAAW;AAAA,cACT,mBAAmB,EAAE,WAAW,YAAY;AAAA,cAC5C;AAAA,YAAA;AAAA,YAGD,UAAA,KAAK,IAAI,CAAC,QACT;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA,IAAI;AAAA,gBAAA;AAAA,cACN;AAAA,cALK,IAAI;AAAA,YAAA,CAOZ;AAAA,UAAA;AAAA,QAAA;AAAA,4BAEF,KAAA,EAAE,WAAU,6DACV,UAAA,YAAY,OAAO,WAAA,CACtB;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

@@ -0,0 +1,10 @@
+export { ChatAttachment, type ChatAttachmentProps, } from "./chat-attachment";
+export { ChatBubble, type ChatBubbleProps, type ChatMessageDirection, type ChatMessageStatus, chatBubbleVariants, } from "./chat-bubble";
+export { ChatComposer, type ChatComposerProps, } from "./chat-composer";
+export { ChatConversationRow, type ChatConversationRowProps, type ChatConversationState, } from "./chat-conversation-row";
+export { ChatDateSeparator, type ChatDateSeparatorProps, } from "./chat-date-separator";
+export { type ChatDeliveryState, ChatDeliveryStatus, type ChatDeliveryStatusProps, } from "./chat-delivery-status";
+export { ChatLauncher, type ChatLauncherProps, } from "./chat-launcher";
+export { ChatMessageList, type ChatMessageListProps, } from "./chat-message-list";
+export { ChatRoomHeader, type ChatRoomHeaderProps, } from "./chat-room-header";
+export { ChatTypingIndicator, type ChatTypingIndicatorProps, } from "./chat-typing-indicator";

package/dist/components/checkbox/checkbox-field.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+import { type CheckboxProps } from "./checkbox";
+export interface CheckboxFieldProps extends CheckboxProps {
+    /** The text next to the box: "Acepto la". */
+    label: ReactNode;
+    /**
+     * A `Link` after the label: "Política de privacidad". Make it `external` — it opens
+     * the document in a new tab and clicking it doesn't tick the box.
+     */
+    link?: ReactNode;
+    /**
+     * Error message under the row (Body/Small, text-error); it also paints the box red.
+     * In a group, put the message under the group and use `invalid` on each box.
+     */
+    error?: ReactNode;
+    /** Applies to the root, which holds the row and the message. */
+    className?: string;
+}
+/**
+ * Checkbox with its label. The row is at least 44px high and all of it is pressable
+ * (the `<label>` wraps box and text), which is what makes a 20×20 box compliant.
+ *
+ * Never pre-tick a consent.
+ */
+export declare function CheckboxField({ label, link, error, invalid, className, onCheckedChange, ...props }: CheckboxFieldProps): React.JSX.Element;

package/dist/components/checkbox/checkbox-field.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useId, useRef } from "react";
+import { cn } from "../../lib/cn.js";
+import { FieldItemLabel } from "../radio/field-item-label.js";
+import { Checkbox } from "./checkbox.js";
+function CheckboxField({
+  label,
+  link,
+  error,
+  invalid = false,
+  className,
+  onCheckedChange,
+  ...props
+}) {
+  const errorId = useId();
+  const hasError = error !== void 0 && error !== null && error !== false;
+  const linkClicked = useRef(false);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "checkbox-field", className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsxs(FieldItemLabel, { className: "flex min-h-11 cursor-pointer items-start gap-3 py-3 has-data-disabled:cursor-not-allowed", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          className: "peer",
+          invalid: invalid || hasError,
+          "aria-describedby": hasError ? errorId : void 0,
+          onCheckedChange: (checked, eventDetails) => {
+            if (linkClicked.current) {
+              linkClicked.current = false;
+              eventDetails.cancel();
+              return;
+            }
+            onCheckedChange?.(checked, eventDetails);
+          },
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-label-default text-text-primary peer-data-disabled:text-text-disabled", children: [
+        label,
+        link && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              onClickCapture: () => {
+                linkClicked.current = true;
+                requestAnimationFrame(() => {
+                  linkClicked.current = false;
+                });
+              },
+              children: link
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    hasError && /* @__PURE__ */ jsx("p", { id: errorId, className: "text-body-small text-text-error", children: error })
+  ] });
+}
+export {
+  CheckboxField
+};
+//# sourceMappingURL=checkbox-field.js.map

package/dist/components/checkbox/checkbox-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-field.js","sources":["../../../src/components/checkbox/checkbox-field.tsx"],"sourcesContent":["import { type ReactNode, useId, useRef } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { FieldItemLabel } from \"../radio/field-item-label\";\nimport { Checkbox, type CheckboxProps } from \"./checkbox\";\n\nexport interface CheckboxFieldProps extends CheckboxProps {\n  /** The text next to the box: \"Acepto la\". */\n  label: ReactNode;\n  /**\n   * A `Link` after the label: \"Política de privacidad\". Make it `external` — it opens\n   * the document in a new tab and clicking it doesn't tick the box.\n   */\n  link?: ReactNode;\n  /**\n   * Error message under the row (Body/Small, text-error); it also paints the box red.\n   * In a group, put the message under the group and use `invalid` on each box.\n   */\n  error?: ReactNode;\n  /** Applies to the root, which holds the row and the message. */\n  className?: string;\n}\n\n/**\n * Checkbox with its label. The row is at least 44px high and all of it is pressable\n * (the `<label>` wraps box and text), which is what makes a 20×20 box compliant.\n *\n * Never pre-tick a consent.\n */\nexport function CheckboxField({\n  label,\n  link,\n  error,\n  invalid = false,\n  className,\n  onCheckedChange,\n  ...props\n}: CheckboxFieldProps): React.JSX.Element {\n  const errorId = useId();\n  const hasError = error !== undefined && error !== null && error !== false;\n  // The link lives inside the <label>, so the browser activates the box when the\n  // link is clicked. Remember that click and cancel the change it causes.\n  const linkClicked = useRef(false);\n\n  return (\n    <div data-slot=\"checkbox-field\" className={cn(\"flex flex-col\", className)}>\n      <FieldItemLabel className=\"flex min-h-11 cursor-pointer items-start gap-3 py-3 has-data-disabled:cursor-not-allowed\">\n        <Checkbox\n          className=\"peer\"\n          invalid={invalid || hasError}\n          aria-describedby={hasError ? errorId : undefined}\n          onCheckedChange={(checked, eventDetails) => {\n            if (linkClicked.current) {\n              linkClicked.current = false;\n              eventDetails.cancel();\n              return;\n            }\n            onCheckedChange?.(checked, eventDetails);\n          }}\n          {...props}\n        />\n        <span className=\"text-label-default text-text-primary peer-data-disabled:text-text-disabled\">\n          {label}\n          {link && (\n            <>\n              {\" \"}\n              <span\n                onClickCapture={() => {\n                  linkClicked.current = true;\n                  requestAnimationFrame(() => {\n                    linkClicked.current = false;\n                  });\n                }}\n              >\n                {link}\n              </span>\n            </>\n          )}\n        </span>\n      </FieldItemLabel>\n      {hasError && (\n        <p id={errorId} className=\"text-body-small text-text-error\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AA6BO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0C;AACxC,QAAM,UAAU,MAAA;AAChB,QAAM,WAAW,UAAU,UAAa,UAAU,QAAQ,UAAU;AAGpE,QAAM,cAAc,OAAO,KAAK;AAEhC,SACE,qBAAC,SAAI,aAAU,kBAAiB,WAAW,GAAG,iBAAiB,SAAS,GACtE,UAAA;AAAA,IAAA,qBAAC,gBAAA,EAAe,WAAU,4FACxB,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS,WAAW;AAAA,UACpB,oBAAkB,WAAW,UAAU;AAAA,UACvC,iBAAiB,CAAC,SAAS,iBAAiB;AAC1C,gBAAI,YAAY,SAAS;AACvB,0BAAY,UAAU;AACtB,2BAAa,OAAA;AACb;AAAA,YACF;AACA,8BAAkB,SAAS,YAAY;AAAA,UACzC;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,MAEN,qBAAC,QAAA,EAAK,WAAU,8EACb,UAAA;AAAA,QAAA;AAAA,QACA,QACC,qBAAA,UAAA,EACG,UAAA;AAAA,UAAA;AAAA,UACD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,gBAAgB,MAAM;AACpB,4BAAY,UAAU;AACtB,sCAAsB,MAAM;AAC1B,8BAAY,UAAU;AAAA,gBACxB,CAAC;AAAA,cACH;AAAA,cAEC,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,IACC,YACC,oBAAC,KAAA,EAAE,IAAI,SAAS,WAAU,mCACvB,UAAA,MAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,28 @@
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
+export declare const checkboxVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export interface CheckboxProps extends Omit<BaseCheckbox.Root.Props, "className" | "children"> {
+    /** Red border on the empty box. The message goes under the group, not on each box. */
+    invalid?: boolean;
+    className?: string;
+}
+/**
+ * Checkbox, without a label: the text goes outside so it can be Body/Small or
+ * Label/Default depending on the context. With a label, use `CheckboxField` (or wrap
+ * both in a `<label>`); without a visible one, pass `aria-label`.
+ *
+ * - `indeterminate` is for the parent of a partially ticked group, never a third
+ *   option the user picks.
+ * - The drawing is 20×20; the hit area is 44×44, and the whole label when there is one.
+ */
+export declare function Checkbox({ invalid, className, ...props }: CheckboxProps): React.JSX.Element;
+export interface CheckboxGroupProps extends Omit<BaseCheckboxGroup.Props, "className"> {
+    className?: string;
+}
+/**
+ * Shared state for a list of checkboxes (`value` is the array of ticked `value`s).
+ * Name it with `aria-labelledby` or put it inside `Field` (Control=Custom), whose
+ * message goes under the group. On submit with an error, move focus to the first
+ * unticked box.
+ */
+export declare function CheckboxGroup({ className, ...props }: CheckboxGroupProps): React.JSX.Element;

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group";
+import { cva } from "class-variance-authority";
+import { CheckIcon } from "../../icons/generated/check.js";
+import { cn } from "../../lib/cn.js";
+import { useFieldGroupLabel } from "../radio/use-field-group-label.js";
+const checkboxVariants = cva([
+  "inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm border-2",
+  "border-border-input bg-background text-text-inverse transition-colors",
+  // The control is 20px; the hit area is 44 (and the whole label when there is one).
+  "focus-ring touch-target",
+  "data-checked:border-brand data-checked:bg-brand",
+  "data-indeterminate:border-brand data-indeterminate:bg-brand",
+  // Error only paints the empty box: a ticked one already says it is filled in.
+  "aria-invalid:data-unchecked:border-error data-invalid:data-unchecked:border-error",
+  "data-disabled:cursor-not-allowed data-disabled:border-border data-disabled:bg-surface",
+  "data-disabled:data-checked:border-border-strong data-disabled:data-checked:bg-border-strong",
+  "data-disabled:data-indeterminate:border-border-strong data-disabled:data-indeterminate:bg-border-strong"
+]);
+function Checkbox({
+  invalid = false,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Checkbox$1.Root,
+    {
+      "data-slot": "checkbox",
+      "aria-invalid": invalid || void 0,
+      className: cn(checkboxVariants(), className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Checkbox$1.Indicator,
+        {
+          className: "flex items-center justify-center",
+          render: (indicatorProps, state) => /* @__PURE__ */ jsx("span", { ...indicatorProps, children: state.indeterminate ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-2.5 rounded-full bg-current" }) : /* @__PURE__ */ jsx(CheckIcon, { size: "sm" }) })
+        }
+      )
+    }
+  );
+}
+function CheckboxGroup({
+  className,
+  ...props
+}) {
+  useFieldGroupLabel();
+  return /* @__PURE__ */ jsx(
+    CheckboxGroup$1,
+    {
+      "data-slot": "checkbox-group",
+      className: cn("flex flex-col", className),
+      ...props
+    }
+  );
+}
+export {
+  Checkbox,
+  CheckboxGroup,
+  checkboxVariants
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\";\nimport { CheckboxGroup as BaseCheckboxGroup } from \"@base-ui/react/checkbox-group\";\nimport { cva } from \"class-variance-authority\";\n\nimport { CheckIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useFieldGroupLabel } from \"../radio/use-field-group-label\";\n\nexport const checkboxVariants = cva([\n  \"inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm border-2\",\n  \"border-border-input bg-background text-text-inverse transition-colors\",\n  // The control is 20px; the hit area is 44 (and the whole label when there is one).\n  \"focus-ring touch-target\",\n  \"data-checked:border-brand data-checked:bg-brand\",\n  \"data-indeterminate:border-brand data-indeterminate:bg-brand\",\n  // Error only paints the empty box: a ticked one already says it is filled in.\n  \"aria-invalid:data-unchecked:border-error data-invalid:data-unchecked:border-error\",\n  \"data-disabled:cursor-not-allowed data-disabled:border-border data-disabled:bg-surface\",\n  \"data-disabled:data-checked:border-border-strong data-disabled:data-checked:bg-border-strong\",\n  \"data-disabled:data-indeterminate:border-border-strong data-disabled:data-indeterminate:bg-border-strong\",\n]);\n\nexport interface CheckboxProps\n  extends Omit<BaseCheckbox.Root.Props, \"className\" | \"children\"> {\n  /** Red border on the empty box. The message goes under the group, not on each box. */\n  invalid?: boolean;\n  className?: string;\n}\n\n/**\n * Checkbox, without a label: the text goes outside so it can be Body/Small or\n * Label/Default depending on the context. With a label, use `CheckboxField` (or wrap\n * both in a `<label>`); without a visible one, pass `aria-label`.\n *\n * - `indeterminate` is for the parent of a partially ticked group, never a third\n *   option the user picks.\n * - The drawing is 20×20; the hit area is 44×44, and the whole label when there is one.\n */\nexport function Checkbox({\n  invalid = false,\n  className,\n  ...props\n}: CheckboxProps): React.JSX.Element {\n  return (\n    <BaseCheckbox.Root\n      data-slot=\"checkbox\"\n      aria-invalid={invalid || undefined}\n      className={cn(checkboxVariants(), className)}\n      {...props}\n    >\n      <BaseCheckbox.Indicator\n        className=\"flex items-center justify-center\"\n        render={(indicatorProps, state) => (\n          <span {...indicatorProps}>\n            {state.indeterminate ? (\n              <span className=\"h-0.5 w-2.5 rounded-full bg-current\" />\n            ) : (\n              <CheckIcon size=\"sm\" />\n            )}\n          </span>\n        )}\n      />\n    </BaseCheckbox.Root>\n  );\n}\n\nexport interface CheckboxGroupProps\n  extends Omit<BaseCheckboxGroup.Props, \"className\"> {\n  className?: string;\n}\n\n/**\n * Shared state for a list of checkboxes (`value` is the array of ticked `value`s).\n * Name it with `aria-labelledby` or put it inside `Field` (Control=Custom), whose\n * message goes under the group. On submit with an error, move focus to the first\n * unticked box.\n */\nexport function CheckboxGroup({\n  className,\n  ...props\n}: CheckboxGroupProps): React.JSX.Element {\n  useFieldGroupLabel();\n\n  return (\n    <BaseCheckboxGroup\n      data-slot=\"checkbox-group\"\n      className={cn(\"flex flex-col\", className)}\n      {...props}\n    />\n  );\n}\n"],"names":["BaseCheckbox","BaseCheckboxGroup"],"mappings":";;;;;;;AAQO,MAAM,mBAAmB,IAAI;AAAA,EAClC;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAkBM,SAAS,SAAS;AAAA,EACvB,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAqC;AACnC,SACE;AAAA,IAACA,WAAa;AAAA,IAAb;AAAA,MACC,aAAU;AAAA,MACV,gBAAc,WAAW;AAAA,MACzB,WAAW,GAAG,iBAAA,GAAoB,SAAS;AAAA,MAC1C,GAAG;AAAA,MAEJ,UAAA;AAAA,QAACA,WAAa;AAAA,QAAb;AAAA,UACC,WAAU;AAAA,UACV,QAAQ,CAAC,gBAAgB,UACvB,oBAAC,QAAA,EAAM,GAAG,gBACP,UAAA,MAAM,gBACL,oBAAC,QAAA,EAAK,WAAU,uCAAsC,wBAErD,WAAA,EAAU,MAAK,MAAK,EAAA,CAEzB;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;AAaO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,GAAG;AACL,GAA0C;AACxC,qBAAA;AAEA,SACE;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACvC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

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

@@ -0,0 +1,2 @@
+export { Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, checkboxVariants, } from "./checkbox";
+export { CheckboxField, type CheckboxFieldProps } from "./checkbox-field";

package/dist/components/chip/chip.d.ts

@@ -0,0 +1,60 @@
+import { Button as BaseButton } from "@base-ui/react/button";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+import type { ReactNode } from "react";
+export declare const chipVariants: (props?: ({
+    size?: "small" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ChipSize = "default" | "small";
+interface ChipOwnProps {
+    /**
+     * `small` only for dense metadata, never as the main filter: at 24px it relies on
+     * the invisible hit area to reach 44.
+     */
+    size?: ChipSize;
+    /** A MediCore icon before the label. While selected the check takes its place. */
+    leadingIcon?: ReactNode;
+    className?: string;
+}
+export interface ChipToggleProps extends Omit<Toggle.Props<string>, "className">, ChipOwnProps {
+    onRemove?: undefined;
+}
+export interface ChipRemovableProps extends Omit<BaseButton.Props, "className" | "onClick">, ChipOwnProps {
+    /**
+     * Turns the chip into a remove button for an applied filter: pressing anywhere on
+     * it calls this. Its accessible name becomes "Quitar <label>" (`remove` label).
+     * A removable chip is not a toggle.
+     */
+    onRemove: () => void;
+    pressed?: undefined;
+    defaultPressed?: undefined;
+    onPressedChange?: undefined;
+}
+export type ChipProps = ChipToggleProps | ChipRemovableProps;
+/**
+ * Pressable filter ("Dermatología"). The filter row of lists and the admin.
+ *
+ * - **A Chip is not a Badge.** A Badge tells a state and can't be pressed
+ *   ("Receta", "Cancelada"); a Chip filters and is pressed. If it doesn't respond to
+ *   a tap, it's a Badge.
+ * - It is a `<button aria-pressed>` (Base UI Toggle): `pressed` / `defaultPressed` /
+ *   `onPressedChange`, or `value` inside a `ChipGroup`.
+ * - With `onRemove` it is a remove button for an applied filter instead.
+ */
+export declare function Chip(props: ChipProps): React.JSX.Element;
+export interface ChipGroupProps<Value extends string = string> extends Omit<ToggleGroup.Props<Value>, "className"> {
+    /**
+     * `wrap` (default) breaks into lines; `scroll` keeps one line that scrolls
+     * sideways — the usual filter row on mobile.
+     */
+    overflow?: "wrap" | "scroll";
+    className?: string;
+}
+/**
+ * A row of filter chips with shared state: `value` is the array of pressed chips.
+ * Multi-select by default (`multiple={false}` for one at a time — but an exclusive
+ * choice between 2–3 options is a `SegmentedControl`). One tab stop; ←/→ move
+ * between chips. Name it with `aria-label` ("Filtrar por especialidad").
+ */
+export declare function ChipGroup<Value extends string>({ overflow, multiple, className, ...props }: ChipGroupProps<Value>): React.JSX.Element;
+export {};