@mediquo/medicore 0.1.0

package/dist/components/bottom-bar/bottom-bar.js

@@ -0,0 +1,76 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+function BottomBar({
+  "aria-label": ariaLabel,
+  className,
+  children,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-slot": "bottom-bar",
+      "aria-label": ariaLabel ?? labels.mainNavigation,
+      className: cn(
+        "border-border border-t bg-surface pb-[env(safe-area-inset-bottom)]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("ul", { className: "flex h-19.25", children })
+    }
+  );
+}
+const bottomBarItemVariants = cva([
+  "group/tab relative flex min-w-0 flex-1 cursor-pointer select-none flex-col items-center justify-center gap-1 rounded-md",
+  "text-label-small text-text-secondary no-underline transition-colors",
+  "[&_svg]:size-5.5 [&_svg]:shrink-0",
+  "not-aria-[current=page]:hover:text-text-primary",
+  "aria-[current=page]:text-text-brand",
+  // Inside the tab: the tabs touch each other, there is no room outside.
+  "focus-ring focus-visible:-outline-offset-2"
+]);
+function BottomBarItem({
+  icon,
+  children,
+  active = false,
+  featured = false,
+  className,
+  render,
+  ...props
+}) {
+  const ownProps = {
+    "data-slot": "bottom-bar-link",
+    className: cn(bottomBarItemVariants(), className),
+    "aria-current": active ? "page" : void 0,
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          "data-slot": "bottom-bar-indicator",
+          className: "absolute inset-x-0 top-0 hidden h-0.75 rounded-b-xs bg-text-brand group-aria-[current=page]/tab:block"
+        }
+      ),
+      featured ? /* @__PURE__ */ jsx("span", { className: "flex size-9.5 items-center justify-center rounded-full bg-brand-subtle", children: icon }) : icon,
+      /* @__PURE__ */ jsx("span", { className: "max-w-full truncate", children })
+    ] })
+  };
+  const element = useRender({
+    defaultTagName: "a",
+    render,
+    state: { active, featured },
+    props: mergeProps(ownProps, props)
+  });
+  return /* @__PURE__ */ jsx("li", { "data-slot": "bottom-bar-item", className: "flex min-w-0 flex-1", children: element });
+}
+export {
+  BottomBar,
+  BottomBarItem,
+  bottomBarItemVariants
+};
+//# sourceMappingURL=bottom-bar.js.map

package/dist/components/bottom-bar/bottom-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottom-bar.js","sources":["../../../src/components/bottom-bar/bottom-bar.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva } from \"class-variance-authority\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\n\nexport interface BottomBarProps extends ComponentProps<\"nav\"> {}\n\n/**\n * Mobile tab bar: a `<nav>` named \"Navegación principal\" with a list of links, the\n * current one with `aria-current=\"page\"`. Tabs share the width equally (five at 75px\n * on a 375 phone) and it adds the iPhone's `safe-area-inset-bottom` under its 77px.\n *\n * - Up to five tabs, the main sections. Everything else must stay reachable from the\n *   menu in `MobileHeader` (see `AppShell`).\n * - A tab may use the short form of the section's name (\"Documentos\" for \"Mis\n *   documentos\"), never a different name. If a label doesn't fit, shorten the word;\n *   don't lower the 12px.\n * - `AppShell` keeps it at the bottom of the screen below the desktop breakpoint.\n */\nexport function BottomBar({\n  \"aria-label\": ariaLabel,\n  className,\n  children,\n  ...props\n}: BottomBarProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n\n  return (\n    <nav\n      data-slot=\"bottom-bar\"\n      aria-label={ariaLabel ?? labels.mainNavigation}\n      className={cn(\n        \"border-border border-t bg-surface pb-[env(safe-area-inset-bottom)]\",\n        className,\n      )}\n      {...props}\n    >\n      <ul className=\"flex h-19.25\">{children}</ul>\n    </nav>\n  );\n}\n\nexport const bottomBarItemVariants = cva([\n  \"group/tab relative flex min-w-0 flex-1 cursor-pointer select-none flex-col items-center justify-center gap-1 rounded-md\",\n  \"text-label-small text-text-secondary no-underline transition-colors\",\n  \"[&_svg]:size-5.5 [&_svg]:shrink-0\",\n  \"not-aria-[current=page]:hover:text-text-primary\",\n  \"aria-[current=page]:text-text-brand\",\n  // Inside the tab: the tabs touch each other, there is no room outside.\n  \"focus-ring focus-visible:-outline-offset-2\",\n]);\n\nexport interface BottomBarItemProps\n  extends Omit<useRender.ComponentProps<\"a\">, \"className\" | \"children\"> {\n  /** A MediCore icon, drawn at 22px. */\n  icon: ReactNode;\n  /** 12px label (Label/Small). Always visible: an icon-only tab bar is a guessing game. */\n  children: ReactNode;\n  /**\n   * The tab of the current screen: `aria-current=\"page\"`, brand colour and a 3px bar\n   * on top (the non-colour cue). Leave it out if the router link sets\n   * `aria-current=\"page\"` itself.\n   */\n  active?: boolean;\n  /**\n   * The central action of the product (\"Pedir cita\"): the icon sits in a\n   * `brand-subtle` circle. At most one per bar.\n   */\n  featured?: boolean;\n  className?: string;\n}\n\n/**\n * One tab (Figma `Nav/TabItem`). Renders an `<a>` inside an `<li>`; pass the router's\n * link with `render={<Link to=\"/agenda\" />}`.\n */\nexport function BottomBarItem({\n  icon,\n  children,\n  active = false,\n  featured = false,\n  className,\n  render,\n  ...props\n}: BottomBarItemProps): React.JSX.Element {\n  const ownProps: useRender.ElementProps<\"a\"> & { \"data-slot\": string } = {\n    \"data-slot\": \"bottom-bar-link\",\n    className: cn(bottomBarItemVariants(), className),\n    \"aria-current\": active ? \"page\" : undefined,\n    children: (\n      <>\n        <span\n          aria-hidden\n          data-slot=\"bottom-bar-indicator\"\n          className=\"absolute inset-x-0 top-0 hidden h-0.75 rounded-b-xs bg-text-brand group-aria-[current=page]/tab:block\"\n        />\n        {featured ? (\n          <span className=\"flex size-9.5 items-center justify-center rounded-full bg-brand-subtle\">\n            {icon}\n          </span>\n        ) : (\n          icon\n        )}\n        <span className=\"max-w-full truncate\">{children}</span>\n      </>\n    ),\n  };\n\n  const element = useRender({\n    defaultTagName: \"a\",\n    render,\n    state: { active, featured },\n    props: mergeProps<\"a\">(ownProps, props),\n  });\n\n  return (\n    <li data-slot=\"bottom-bar-item\" className=\"flex min-w-0 flex-1\">\n      {element}\n    </li>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAsBO,SAAS,UAAU;AAAA,EACxB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,QAAM,SAAS,kBAAA;AAEf,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,aAAa,OAAO;AAAA,MAChC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA,oBAAC,MAAA,EAAG,WAAU,gBAAgB,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAG7C;AAEO,MAAM,wBAAwB,IAAI;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AACF,CAAC;AA0BM,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0C;AACxC,QAAM,WAAkE;AAAA,IACtE,aAAa;AAAA,IACb,WAAW,GAAG,sBAAA,GAAyB,SAAS;AAAA,IAChD,gBAAgB,SAAS,SAAS;AAAA,IAClC,UACE,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAW;AAAA,UACX,aAAU;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAEX,WACC,oBAAC,QAAA,EAAK,WAAU,0EACb,gBACH,IAEA;AAAA,MAEF,oBAAC,QAAA,EAAK,WAAU,uBAAuB,SAAA,CAAS;AAAA,IAAA,EAAA,CAClD;AAAA,EAAA;AAIJ,QAAM,UAAU,UAAU;AAAA,IACxB,gBAAgB;AAAA,IAChB;AAAA,IACA,OAAO,EAAE,QAAQ,SAAA;AAAA,IACjB,OAAO,WAAgB,UAAU,KAAK;AAAA,EAAA,CACvC;AAED,6BACG,MAAA,EAAG,aAAU,mBAAkB,WAAU,uBACvC,UAAA,SACH;AAEJ;"}

package/dist/components/bottom-bar/index.d.ts

@@ -0,0 +1 @@
+export { BottomBar, BottomBarItem, type BottomBarItemProps, type BottomBarProps, bottomBarItemVariants, } from "./bottom-bar";

package/dist/components/brand-mark/brand-mark.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentProps } from "react";
+export type BrandMarkBrand = "google" | "apple";
+export interface BrandMarkProps extends Omit<ComponentProps<"svg">, "children"> {
+    brand: BrandMarkBrand;
+    /**
+     * Accessible name. Leave it out (the default) when the brand is already written
+     * next to it, as in `SocialButton`: the mark is then decorative.
+     */
+    title?: string;
+}
+/**
+ * A third-party logo, drawn from the Figma export (the only hand-drawn SVGs in
+ * MediCore). Only for `SocialButton`.
+ *
+ * - Google keeps its official colours: its brand rules don't allow recolouring it
+ *   (the only raw colours in MediCore, on purpose).
+ * - Apple takes the text colour (`text-primary`): black in light mode, white in dark,
+ *   as Apple's rules ask.
+ *
+ * 24×24 grid; size it with `size-icon-*` (20 inside `SocialButton`).
+ */
+export declare function BrandMark({ brand, title, className, ...props }: BrandMarkProps): React.JSX.Element;

package/dist/components/brand-mark/brand-mark.js

@@ -0,0 +1,72 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function BrandMark({
+  brand,
+  title,
+  className,
+  ...props
+}) {
+  const labelled = Boolean(title);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "data-slot": "brand-mark",
+      "data-brand": brand,
+      role: labelled ? "img" : void 0,
+      "aria-label": labelled ? title : void 0,
+      "aria-hidden": labelled ? void 0 : true,
+      focusable: "false",
+      className: cn(
+        "size-icon-lg shrink-0",
+        brand === "apple" && "text-text-primary",
+        className
+      ),
+      ...props,
+      children: [
+        labelled && /* @__PURE__ */ jsx("title", { children: title }),
+        brand === "google" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M21.8055 10.0415H21V10H12V14H17.6515C16.827 16.3285 14.6115 18 12 18C8.6865 18 6 15.3135 6 12C6 8.6865 8.6865 6 12 6C13.5295 6 14.921 6.577 15.9805 7.5195L18.809 4.691C17.023 3.0265 14.634 2 12 2C6.4775 2 2 6.4775 2 12C2 17.5225 6.4775 22 12 22C17.5225 22 22 17.5225 22 12C22 11.3295 21.931 10.675 21.8055 10.0415Z",
+              fill: "#FFC107"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M3.153 7.3455L6.4385 9.755C7.3275 7.554 9.4805 6 12 6C13.5295 6 14.921 6.577 15.9805 7.5195L18.809 4.691C17.023 3.0265 14.634 2 12 2C8.159 2 4.828 4.1685 3.153 7.3455Z",
+              fill: "#FF3D00"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M12 22C14.583 22 16.93 21.0115 18.7045 19.404L15.6095 16.785C14.5718 17.5742 13.3037 18.001 12 18C9.399 18 7.1905 16.3415 6.3585 14.027L3.0975 16.5395C4.7525 19.778 8.1135 22 12 22Z",
+              fill: "#4CAF50"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M21.8055 10.0415H21V10H12V14H17.6515C17.2571 15.1082 16.5467 16.0766 15.608 16.7855L15.6095 16.7845L18.7045 19.4035C18.4855 19.6025 22 17 22 12C22 11.3295 21.931 10.675 21.8055 10.0415Z",
+              fill: "#1976D2"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M17.05 20.28C16.07 21.23 15 21.08 13.97 20.63C12.88 20.17 11.88 20.15 10.73 20.63C9.29 21.25 8.53 21.07 7.67 20.28C2.79 15.25 3.51 7.59 9.05 7.31C10.4 7.38 11.34 8.05 12.13 8.11C13.31 7.87 14.44 7.18 15.7 7.27C17.21 7.39 18.35 7.99 19.1 9.07C15.98 10.94 16.72 15.05 19.58 16.2C19.01 17.7 18.27 19.19 17.04 20.29L17.05 20.28ZM12.03 7.25C11.88 5.02 13.69 3.18 15.77 3C16.06 5.58 13.43 7.5 12.03 7.25Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  BrandMark
+};
+//# sourceMappingURL=brand-mark.js.map

package/dist/components/brand-mark/brand-mark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand-mark.js","sources":["../../../src/components/brand-mark/brand-mark.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nexport type BrandMarkBrand = \"google\" | \"apple\";\n\nexport interface BrandMarkProps\n  extends Omit<ComponentProps<\"svg\">, \"children\"> {\n  brand: BrandMarkBrand;\n  /**\n   * Accessible name. Leave it out (the default) when the brand is already written\n   * next to it, as in `SocialButton`: the mark is then decorative.\n   */\n  title?: string;\n}\n\n/**\n * A third-party logo, drawn from the Figma export (the only hand-drawn SVGs in\n * MediCore). Only for `SocialButton`.\n *\n * - Google keeps its official colours: its brand rules don't allow recolouring it\n *   (the only raw colours in MediCore, on purpose).\n * - Apple takes the text colour (`text-primary`): black in light mode, white in dark,\n *   as Apple's rules ask.\n *\n * 24×24 grid; size it with `size-icon-*` (20 inside `SocialButton`).\n */\nexport function BrandMark({\n  brand,\n  title,\n  className,\n  ...props\n}: BrandMarkProps): React.JSX.Element {\n  const labelled = Boolean(title);\n\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      data-slot=\"brand-mark\"\n      data-brand={brand}\n      role={labelled ? \"img\" : undefined}\n      aria-label={labelled ? title : undefined}\n      aria-hidden={labelled ? undefined : true}\n      focusable=\"false\"\n      className={cn(\n        \"size-icon-lg shrink-0\",\n        brand === \"apple\" && \"text-text-primary\",\n        className,\n      )}\n      {...props}\n    >\n      {labelled && <title>{title}</title>}\n      {brand === \"google\" ? (\n        <>\n          <path\n            d=\"M21.8055 10.0415H21V10H12V14H17.6515C16.827 16.3285 14.6115 18 12 18C8.6865 18 6 15.3135 6 12C6 8.6865 8.6865 6 12 6C13.5295 6 14.921 6.577 15.9805 7.5195L18.809 4.691C17.023 3.0265 14.634 2 12 2C6.4775 2 2 6.4775 2 12C2 17.5225 6.4775 22 12 22C17.5225 22 22 17.5225 22 12C22 11.3295 21.931 10.675 21.8055 10.0415Z\"\n            fill=\"#FFC107\"\n          />\n          <path\n            d=\"M3.153 7.3455L6.4385 9.755C7.3275 7.554 9.4805 6 12 6C13.5295 6 14.921 6.577 15.9805 7.5195L18.809 4.691C17.023 3.0265 14.634 2 12 2C8.159 2 4.828 4.1685 3.153 7.3455Z\"\n            fill=\"#FF3D00\"\n          />\n          <path\n            d=\"M12 22C14.583 22 16.93 21.0115 18.7045 19.404L15.6095 16.785C14.5718 17.5742 13.3037 18.001 12 18C9.399 18 7.1905 16.3415 6.3585 14.027L3.0975 16.5395C4.7525 19.778 8.1135 22 12 22Z\"\n            fill=\"#4CAF50\"\n          />\n          <path\n            d=\"M21.8055 10.0415H21V10H12V14H17.6515C17.2571 15.1082 16.5467 16.0766 15.608 16.7855L15.6095 16.7845L18.7045 19.4035C18.4855 19.6025 22 17 22 12C22 11.3295 21.931 10.675 21.8055 10.0415Z\"\n            fill=\"#1976D2\"\n          />\n        </>\n      ) : (\n        <path\n          d=\"M17.05 20.28C16.07 21.23 15 21.08 13.97 20.63C12.88 20.17 11.88 20.15 10.73 20.63C9.29 21.25 8.53 21.07 7.67 20.28C2.79 15.25 3.51 7.59 9.05 7.31C10.4 7.38 11.34 8.05 12.13 8.11C13.31 7.87 14.44 7.18 15.7 7.27C17.21 7.39 18.35 7.99 19.1 9.07C15.98 10.94 16.72 15.05 19.58 16.2C19.01 17.7 18.27 19.19 17.04 20.29L17.05 20.28ZM12.03 7.25C11.88 5.02 13.69 3.18 15.77 3C16.06 5.58 13.43 7.5 12.03 7.25Z\"\n          fill=\"currentColor\"\n        />\n      )}\n    </svg>\n  );\n}\n"],"names":[],"mappings":";;AA2BO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,QAAM,WAAW,QAAQ,KAAK;AAE9B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,MAAM,WAAW,QAAQ;AAAA,MACzB,cAAY,WAAW,QAAQ;AAAA,MAC/B,eAAa,WAAW,SAAY;AAAA,MACpC,WAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,UAAU,WAAW;AAAA,QACrB;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,YAAY,oBAAC,WAAO,UAAA,MAAA,CAAM;AAAA,QAC1B,UAAU,WACT,qBAAA,UAAA,EACE,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAEP;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAEP;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAEP;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QACP,EAAA,CACF,IAEA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/brand-mark/index.d.ts

@@ -0,0 +1 @@
+export { BrandMark, type BrandMarkBrand, type BrandMarkProps, } from "./brand-mark";

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,36 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type LinkProps } from "../link";
+export interface BreadcrumbProps extends ComponentProps<"nav"> {
+    /** `BreadcrumbItem`s for the levels above, then one `BreadcrumbPage` for the current one. */
+    children: ReactNode;
+}
+/**
+ * Breadcrumb for pages two or three levels deep (a programme inside "Programas
+ * especializados"). A `<nav>` named "Migas de pan" (`breadcrumb` label) with an
+ * `<ol>`: the levels above are links, the last one is plain text with
+ * `aria-current="page"`.
+ *
+ * ```tsx
+ * <Breadcrumb>
+ *   <BreadcrumbItem render={<Link to="/programas" />}>Programas especializados</BreadcrumbItem>
+ *   <BreadcrumbPage>Pérdida de peso</BreadcrumbPage>
+ * </Breadcrumb>
+ * ```
+ *
+ * Below the `lg` breakpoint only the level right above shows, as a way back with an
+ * arrow ("‹ Programas especializados").
+ */
+export declare function Breadcrumb({ "aria-label": ariaLabel, className, children, ...props }: BreadcrumbProps): React.JSX.Element;
+export interface BreadcrumbItemProps extends Omit<LinkProps, "size"> {
+    /** The level's name, the same as the section or page it links to. */
+    children: ReactNode;
+}
+/**
+ * A level above the current page: a `Link` (pass the router's with `render`) followed
+ * by a chevron. On mobile, the parent level gets a back arrow in front instead.
+ */
+export declare function BreadcrumbItem({ className, children, ...props }: BreadcrumbItemProps): React.JSX.Element;
+export interface BreadcrumbPageProps extends ComponentProps<"span"> {
+}
+/** The current level: text, not a link, with `aria-current="page"`. Hidden on mobile. */
+export declare function BreadcrumbPage({ className, ...props }: BreadcrumbPageProps): React.JSX.Element;

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon } from "../../icons/generated/chevron-left.js";
+import { ChevronRightIcon } from "../../icons/generated/chevron-right.js";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { Link } from "../link/link.js";
+function Breadcrumb({
+  "aria-label": ariaLabel,
+  className,
+  children,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-slot": "breadcrumb",
+      "aria-label": ariaLabel ?? labels.breadcrumb,
+      className,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "ol",
+        {
+          className: cn(
+            "flex flex-wrap items-center gap-2",
+            // Mobile: only the parent level (the second-to-last item) stays.
+            "max-lg:[&>li:not(:nth-last-child(2))]:hidden"
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+function BreadcrumbItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("li", { "data-slot": "breadcrumb-item", className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(ChevronLeftIcon, { size: "sm", className: "text-text-secondary lg:hidden" }),
+    /* @__PURE__ */ jsx(Link, { standalone: true, className, ...props, children }),
+    /* @__PURE__ */ jsx(
+      ChevronRightIcon,
+      {
+        size: "sm",
+        className: "text-text-secondary max-lg:hidden"
+      }
+    )
+  ] });
+}
+function BreadcrumbPage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("li", { "data-slot": "breadcrumb-page", className: "flex items-center", children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-current": "page",
+      className: cn("text-label-small text-text-primary", className),
+      ...props
+    }
+  ) });
+}
+export {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbPage
+};
+//# sourceMappingURL=breadcrumb.js.map

package/dist/components/breadcrumb/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { Link, type LinkProps } from \"../link\";\n\nexport interface BreadcrumbProps extends ComponentProps<\"nav\"> {\n  /** `BreadcrumbItem`s for the levels above, then one `BreadcrumbPage` for the current one. */\n  children: ReactNode;\n}\n\n/**\n * Breadcrumb for pages two or three levels deep (a programme inside \"Programas\n * especializados\"). A `<nav>` named \"Migas de pan\" (`breadcrumb` label) with an\n * `<ol>`: the levels above are links, the last one is plain text with\n * `aria-current=\"page\"`.\n *\n * ```tsx\n * <Breadcrumb>\n *   <BreadcrumbItem render={<Link to=\"/programas\" />}>Programas especializados</BreadcrumbItem>\n *   <BreadcrumbPage>Pérdida de peso</BreadcrumbPage>\n * </Breadcrumb>\n * ```\n *\n * Below the `lg` breakpoint only the level right above shows, as a way back with an\n * arrow (\"‹ Programas especializados\").\n */\nexport function Breadcrumb({\n  \"aria-label\": ariaLabel,\n  className,\n  children,\n  ...props\n}: BreadcrumbProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n\n  return (\n    <nav\n      data-slot=\"breadcrumb\"\n      aria-label={ariaLabel ?? labels.breadcrumb}\n      className={className}\n      {...props}\n    >\n      <ol\n        className={cn(\n          \"flex flex-wrap items-center gap-2\",\n          // Mobile: only the parent level (the second-to-last item) stays.\n          \"max-lg:[&>li:not(:nth-last-child(2))]:hidden\",\n        )}\n      >\n        {children}\n      </ol>\n    </nav>\n  );\n}\n\nexport interface BreadcrumbItemProps extends Omit<LinkProps, \"size\"> {\n  /** The level's name, the same as the section or page it links to. */\n  children: ReactNode;\n}\n\n/**\n * A level above the current page: a `Link` (pass the router's with `render`) followed\n * by a chevron. On mobile, the parent level gets a back arrow in front instead.\n */\nexport function BreadcrumbItem({\n  className,\n  children,\n  ...props\n}: BreadcrumbItemProps): React.JSX.Element {\n  return (\n    <li data-slot=\"breadcrumb-item\" className=\"flex items-center gap-2\">\n      <ChevronLeftIcon size=\"sm\" className=\"text-text-secondary lg:hidden\" />\n      <Link standalone className={className} {...props}>\n        {children}\n      </Link>\n      <ChevronRightIcon\n        size=\"sm\"\n        className=\"text-text-secondary max-lg:hidden\"\n      />\n    </li>\n  );\n}\n\nexport interface BreadcrumbPageProps extends ComponentProps<\"span\"> {}\n\n/** The current level: text, not a link, with `aria-current=\"page\"`. Hidden on mobile. */\nexport function BreadcrumbPage({\n  className,\n  ...props\n}: BreadcrumbPageProps): React.JSX.Element {\n  return (\n    <li data-slot=\"breadcrumb-page\" className=\"flex items-center\">\n      <span\n        aria-current=\"page\"\n        className={cn(\"text-label-small text-text-primary\", className)}\n        {...props}\n      />\n    </li>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA4BO,SAAS,WAAW;AAAA,EACzB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuC;AACrC,QAAM,SAAS,kBAAA;AAEf,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,aAAa,OAAO;AAAA,MAChC;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA;AAAA,YAEA;AAAA,UAAA;AAAA,UAGD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAWO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2C;AACzC,SACE,qBAAC,MAAA,EAAG,aAAU,mBAAkB,WAAU,2BACxC,UAAA;AAAA,IAAA,oBAAC,iBAAA,EAAgB,MAAK,MAAK,WAAU,iCAAgC;AAAA,wBACpE,MAAA,EAAK,YAAU,MAAC,WAAuB,GAAG,OACxC,UACH;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ;AAKO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,GAAG;AACL,GAA2C;AACzC,SACE,oBAAC,MAAA,EAAG,aAAU,mBAAkB,WAAU,qBACxC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,gBAAa;AAAA,MACb,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAC5D,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;"}

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

@@ -0,0 +1 @@
+export { Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, } from "./breadcrumb";

package/dist/components/button/button.d.ts

@@ -0,0 +1,29 @@
+import { Button as BaseButton } from "@base-ui/react/button";
+import { type VariantProps } from "class-variance-authority";
+import type { ReactNode } from "react";
+export declare const buttonVariants: (props?: ({
+    variant?: "inverse" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | "inverse-ghost" | null | undefined;
+    size?: "small" | "default" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonVariantProps = Omit<VariantProps<typeof buttonVariants>, "disabled">;
+export interface ButtonProps extends Omit<BaseButton.Props, "className">, ButtonVariantProps {
+    /** Keeps the variant colour, shows a spinner and ignores clicks without losing focus. */
+    loading?: boolean;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+    className?: string;
+}
+/**
+ * Action button. A button ACTS; to navigate use `Link` (or `render={<a href />}` when
+ * it has to look like a button).
+ *
+ * Hierarchy, from most to least weight: primary → secondary → outline → ghost.
+ * `destructive` is a warning, not a level. `inverse` and `inverse-ghost` are only
+ * for dark surfaces (`bg-brand-dark`). One primary action per block.
+ *
+ * The drawing is 40px (36 small) but the hit area is always 44px. Full width: pass
+ * `className="w-full"`.
+ */
+export declare function Button({ variant, size, disabled, loading, leadingIcon, trailingIcon, className, children, type, ...props }: ButtonProps): React.JSX.Element;
+export {};

package/dist/components/button/button.js

@@ -0,0 +1,104 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Button as Button$1 } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/cn.js";
+import { Spinner } from "../spinner/spinner.js";
+const buttonVariants = cva(
+  [
+    "inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap",
+    "rounded-md border border-transparent text-label-strong transition-colors",
+    "focus-ring touch-target",
+    "[&_svg]:shrink-0 [&_svg]:size-icon-sm",
+    "data-disabled:cursor-not-allowed aria-busy:cursor-progress"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-brand text-text-inverse not-data-disabled:hover:bg-brand-strong",
+        secondary: "border-text-brand bg-brand-subtle text-text-brand not-data-disabled:hover:bg-surface",
+        outline: "border-border-input bg-background text-text-primary not-data-disabled:hover:bg-surface",
+        ghost: "bg-transparent text-text-primary not-data-disabled:hover:bg-surface",
+        destructive: "bg-error-strong text-text-inverse",
+        inverse: "bg-background text-text-brand not-data-disabled:hover:bg-surface",
+        "inverse-ghost": "bg-transparent text-text-inverse not-data-disabled:hover:bg-overlay-light"
+      },
+      size: {
+        default: "h-control-md px-4",
+        small: "h-control-sm px-3"
+      },
+      disabled: {
+        true: "",
+        false: ""
+      }
+    },
+    // Disabled uses explicit colours, not opacity: an opacity can't be a token and it
+    // also dims the border.
+    compoundVariants: [
+      {
+        variant: ["primary", "destructive"],
+        disabled: true,
+        className: "bg-surface text-text-disabled"
+      },
+      {
+        variant: ["secondary", "outline"],
+        disabled: true,
+        className: "border-border bg-surface text-text-disabled"
+      },
+      {
+        variant: "ghost",
+        disabled: true,
+        className: "text-text-disabled"
+      },
+      {
+        variant: "inverse",
+        disabled: true,
+        className: "bg-border-inverse text-text-inverse-secondary"
+      },
+      {
+        variant: "inverse-ghost",
+        disabled: true,
+        className: "text-text-inverse-secondary"
+      }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "default",
+      disabled: false
+    }
+  }
+);
+function Button({
+  variant,
+  size,
+  disabled = false,
+  loading = false,
+  leadingIcon,
+  trailingIcon,
+  className,
+  children,
+  type = "button",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button$1,
+    {
+      "data-slot": "button",
+      type,
+      disabled: disabled || loading,
+      focusableWhenDisabled: loading,
+      "aria-busy": loading || void 0,
+      className: cn(buttonVariants({ variant, size, disabled }), className),
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: 16, label: null, className: "text-current" }) : leadingIcon,
+        children,
+        !loading && trailingIcon
+      ]
+    }
+  );
+}
+export {
+  Button,
+  buttonVariants
+};
+//# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import { Button as BaseButton } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { Spinner } from \"../spinner\";\n\nexport const buttonVariants = cva(\n  [\n    \"inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap\",\n    \"rounded-md border border-transparent text-label-strong transition-colors\",\n    \"focus-ring touch-target\",\n    \"[&_svg]:shrink-0 [&_svg]:size-icon-sm\",\n    \"data-disabled:cursor-not-allowed aria-busy:cursor-progress\",\n  ],\n  {\n    variants: {\n      variant: {\n        primary:\n          \"bg-brand text-text-inverse not-data-disabled:hover:bg-brand-strong\",\n        secondary:\n          \"border-text-brand bg-brand-subtle text-text-brand not-data-disabled:hover:bg-surface\",\n        outline:\n          \"border-border-input bg-background text-text-primary not-data-disabled:hover:bg-surface\",\n        ghost:\n          \"bg-transparent text-text-primary not-data-disabled:hover:bg-surface\",\n        destructive: \"bg-error-strong text-text-inverse\",\n        inverse:\n          \"bg-background text-text-brand not-data-disabled:hover:bg-surface\",\n        \"inverse-ghost\":\n          \"bg-transparent text-text-inverse not-data-disabled:hover:bg-overlay-light\",\n      },\n      size: {\n        default: \"h-control-md px-4\",\n        small: \"h-control-sm px-3\",\n      },\n      disabled: {\n        true: \"\",\n        false: \"\",\n      },\n    },\n    // Disabled uses explicit colours, not opacity: an opacity can't be a token and it\n    // also dims the border.\n    compoundVariants: [\n      {\n        variant: [\"primary\", \"destructive\"],\n        disabled: true,\n        className: \"bg-surface text-text-disabled\",\n      },\n      {\n        variant: [\"secondary\", \"outline\"],\n        disabled: true,\n        className: \"border-border bg-surface text-text-disabled\",\n      },\n      {\n        variant: \"ghost\",\n        disabled: true,\n        className: \"text-text-disabled\",\n      },\n      {\n        variant: \"inverse\",\n        disabled: true,\n        className: \"bg-border-inverse text-text-inverse-secondary\",\n      },\n      {\n        variant: \"inverse-ghost\",\n        disabled: true,\n        className: \"text-text-inverse-secondary\",\n      },\n    ],\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"default\",\n      disabled: false,\n    },\n  },\n);\n\ntype ButtonVariantProps = Omit<VariantProps<typeof buttonVariants>, \"disabled\">;\n\nexport interface ButtonProps\n  extends Omit<BaseButton.Props, \"className\">,\n    ButtonVariantProps {\n  /** Keeps the variant colour, shows a spinner and ignores clicks without losing focus. */\n  loading?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  className?: string;\n}\n\n/**\n * Action button. A button ACTS; to navigate use `Link` (or `render={<a href />}` when\n * it has to look like a button).\n *\n * Hierarchy, from most to least weight: primary → secondary → outline → ghost.\n * `destructive` is a warning, not a level. `inverse` and `inverse-ghost` are only\n * for dark surfaces (`bg-brand-dark`). One primary action per block.\n *\n * The drawing is 40px (36 small) but the hit area is always 44px. Full width: pass\n * `className=\"w-full\"`.\n */\nexport function Button({\n  variant,\n  size,\n  disabled = false,\n  loading = false,\n  leadingIcon,\n  trailingIcon,\n  className,\n  children,\n  type = \"button\",\n  ...props\n}: ButtonProps): React.JSX.Element {\n  return (\n    <BaseButton\n      data-slot=\"button\"\n      type={type}\n      disabled={disabled || loading}\n      focusableWhenDisabled={loading}\n      aria-busy={loading || undefined}\n      className={cn(buttonVariants({ variant, size, disabled }), className)}\n      {...props}\n    >\n      {loading ? (\n        <Spinner size={16} label={null} className=\"text-current\" />\n      ) : (\n        leadingIcon\n      )}\n      {children}\n      {!loading && trailingIcon}\n    </BaseButton>\n  );\n}\n"],"names":["BaseButton"],"mappings":";;;;;AAOO,MAAM,iBAAiB;AAAA,EAC5B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,QACF,SACE;AAAA,QACF,OACE;AAAA,QACF,aAAa;AAAA,QACb,SACE;AAAA,QACF,iBACE;AAAA,MAAA;AAAA,MAEJ,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,MAET,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA;AAAA;AAAA,IAIF,kBAAkB;AAAA,MAChB;AAAA,QACE,SAAS,CAAC,WAAW,aAAa;AAAA,QAClC,UAAU;AAAA,QACV,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA,QACE,SAAS,CAAC,aAAa,SAAS;AAAA,QAChC,UAAU;AAAA,QACV,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA,QACE,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA,QACE,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA,QACE,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ;AAyBO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAmC;AACjC,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,uBAAuB;AAAA,MACvB,aAAW,WAAW;AAAA,MACtB,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,SAAA,CAAU,GAAG,SAAS;AAAA,MACnE,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,UACC,oBAAC,WAAQ,MAAM,IAAI,OAAO,MAAM,WAAU,gBAAe,IAEzD;AAAA,QAED;AAAA,QACA,CAAC,WAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnB;"}

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

@@ -0,0 +1 @@
+export { Button, type ButtonProps, buttonVariants } from "./button";

package/dist/components/card/card.d.ts

@@ -0,0 +1,84 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type VariantProps } from "class-variance-authority";
+import type { ComponentProps, ReactNode } from "react";
+export declare const cardVariants: (props?: ({
+    elevation?: "flat" | "raised" | "filled" | null | undefined;
+    padding?: "default" | "large" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CardVariantProps = VariantProps<typeof cardVariants>;
+export type CardElevation = NonNullable<CardVariantProps["elevation"]>;
+export type CardPadding = NonNullable<CardVariantProps["padding"]>;
+export type CardHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export interface CardProps extends ComponentProps<"div">, CardVariantProps {
+}
+/**
+ * The container the Card family is built on (radius-xl, padding 16 or 24, one of
+ * three elevations). Header, content and footer are parts, not props:
+ * `<Card><CardHeader /> …children… <CardFooter /></Card>`.
+ *
+ * **Pick the elevation by what it sits on — pick wrong and the card disappears:**
+ * - `flat` (default): white with a 1px border, on a light `surface`. Without the
+ *   border, white on surface is 1.07:1.
+ * - `filled`: `surface` fill, no border, on a white background.
+ * - `raised`: white with `shadow-s`, only for what really floats (a dropdown, a
+ *   draggable card). Eight shadowed cards in a list rank nothing, they're just noise.
+ *
+ * A Card is not interactive. If the whole card navigates, put a `CardLink` in the
+ * title (a real link stretched over the card), never an `onClick` on the `<div>`.
+ *
+ * Not for full-bleed images: the padding lives in the container. Don't zero it.
+ */
+export declare function Card({ elevation, padding, className, ...props }: CardProps): React.JSX.Element;
+export interface CardHeaderProps extends Omit<ComponentProps<"div">, "title"> {
+    /** Heading/h4 look. Put a `CardLink` inside when the whole card navigates. */
+    title: ReactNode;
+    /**
+     * Heading level for the outline (h2–h6). The look doesn't change; the level comes
+     * from where the card sits in the page. Default 3.
+     */
+    headingLevel?: CardHeadingLevel;
+    /**
+     * The "⋯" overflow menu (a `Menu` with a ghost small icon trigger). One primary
+     * action per block: the primary goes in `CardFooter`, everything else here.
+     */
+    action?: ReactNode;
+}
+export declare function CardHeader({ title, headingLevel, action, className, ...props }: CardHeaderProps): React.JSX.Element;
+export interface CardFooterProps extends ComponentProps<"div"> {
+}
+/** Where the card's single primary action goes. Its children share the width. */
+export declare function CardFooter({ className, ...props }: CardFooterProps): React.JSX.Element;
+export interface CardLinkProps extends useRender.ComponentProps<"a"> {
+}
+/**
+ * The link that makes a whole card navigable. It goes inside `CardHeader`'s title
+ * and stretches over the card with a pseudo-element, so it can still be copied,
+ * opened in a new tab and read as one link. Router links: `render={<Link to="…" />}`.
+ * Other controls in the card (the "⋯" menu, the footer) stay on top of it.
+ */
+export declare function CardLink({ render, ref, className, ...props }: CardLinkProps): React.JSX.Element;
+export interface CardListProps extends ComponentProps<"ul"> {
+}
+/**
+ * Card content for a short list: 1 to 4 `ListRow`s (a consultation's documents, the
+ * next appointments). With more than four, it isn't a card: use a list or a page.
+ */
+export declare function CardList({ className, ...props }: CardListProps): React.JSX.Element;
+export interface CardCalloutProps extends Omit<ComponentProps<"div">, "children">, Pick<CardVariantProps, "elevation"> {
+    /** One short sentence ("Usa el chat para enviar el motivo de consulta…"). */
+    message: ReactNode;
+    /** Decorative, in `text-secondary`: the text carries the message. Default `info-circle`. */
+    icon?: ReactNode;
+    /** One `Button`, full width ("Chatear con la profesional"). */
+    action?: ReactNode;
+}
+/**
+ * A card with a short hint and ONE action, full width: waiting room, end of the
+ * video call ("Puedes chatear con tu profesional hasta 48 horas después de la cita").
+ *
+ * It is not a Banner: a Banner reports a state (error, warning); this invites you to
+ * do something. Raised by default, as in Figma; follow the Card elevation rule if it
+ * sits on white.
+ */
+export declare function CardCallout({ message, icon, action, elevation, className, ...props }: CardCalloutProps): React.JSX.Element;
+export {};