@mediquo/medicore 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"availability-column.js","sources":["../../../src/components/availability-column/availability-column.tsx"],"sourcesContent":["import { Children, type ComponentProps, type ReactNode, useId } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { DayCell } from \"../day-cell\";\nimport { TimeSlot } from \"../time-slot\";\n\nconst LOADING_SLOTS = [1, 2, 3, 4] as const;\n\nexport interface AvailabilityColumnProps\n  extends Omit<ComponentProps<\"fieldset\">, \"children\"> {\n  /** The day of the column. Its header (`DayCell`) is formatted from it. */\n  date: Date;\n  /** Default `\"es\"`. */\n  locale?: string;\n  /** The patient's time zone, to read `date` in. */\n  timeZone?: string;\n  today?: boolean;\n  /**\n   * The day's `TimeSlot`s, five at most: more than five per day in a result card is\n   * noise, the rest go to the full agenda. None → the Empty state.\n   */\n  children?: ReactNode;\n  /** The availability is loading: the day shows, the slots are grey placeholders. */\n  loading?: boolean;\n}\n\n/**\n * One day of the agenda as a column: `DayCell` on top, its hours below, 64px wide\n * like both of them (if they didn't match, the grid would break). Goes inside\n * `TimeSlotGroup`; six of these side by side make `CardProfessional`'s agenda.\n *\n * It is a `<fieldset>` named by the full date, so a screen reader hears \"jueves, 1 de\n * octubre\" when entering the column. Empty (no slots) keeps its column with the day\n * dimmed and a dash: if it disappeared, the other days would shift and Tuesday would\n * be read as Monday.\n */\nexport function AvailabilityColumn({\n  date,\n  locale,\n  timeZone,\n  today,\n  loading = false,\n  className,\n  children,\n  ...props\n}: AvailabilityColumnProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const dayId = useId();\n  const empty = !loading && Children.toArray(children).length === 0;\n\n  return (\n    <fieldset\n      data-slot=\"availability-column\"\n      aria-labelledby={dayId}\n      aria-busy={loading || undefined}\n      className={cn(\n        \"flex w-16 min-w-0 shrink-0 flex-col items-center gap-2\",\n        className,\n      )}\n      {...props}\n    >\n      <DayCell\n        id={dayId}\n        date={date}\n        locale={locale}\n        timeZone={timeZone}\n        today={today}\n        disabled={empty}\n      />\n      {loading && LOADING_SLOTS.map((slot) => <TimeSlot key={slot} loading />)}\n      {empty && (\n        <p className=\"text-body-default text-text-secondary\">\n          <span aria-hidden>—</span>\n          <span className=\"sr-only\">{labels.availabilityNoSlots}</span>\n        </p>\n      )}\n      {!loading && children}\n    </fieldset>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,gBAAgB,CAAC,GAAG,GAAG,GAAG,CAAC;AA8B1B,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA+C;AAC7C,QAAM,SAAS,kBAAA;AACf,QAAM,QAAQ,MAAA;AACd,QAAM,QAAQ,CAAC,WAAW,SAAS,QAAQ,QAAQ,EAAE,WAAW;AAEhE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,mBAAiB;AAAA,MACjB,aAAW,WAAW;AAAA,MACtB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEX,WAAW,cAAc,IAAI,CAAC,6BAAU,UAAA,EAAoB,SAAO,KAAA,GAAb,IAAc,CAAE;AAAA,QACtE,SACC,qBAAC,KAAA,EAAE,WAAU,yCACX,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,eAAW,MAAC,UAAA,KAAC;AAAA,UACnB,oBAAC,QAAA,EAAK,WAAU,WAAW,iBAAO,oBAAA,CAAoB;AAAA,QAAA,GACxD;AAAA,QAED,CAAC,WAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnB;"}

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

@@ -0,0 +1 @@
+export { AvailabilityColumn, type AvailabilityColumnProps, } from "./availability-column";

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

@@ -0,0 +1,36 @@
+import { type ComponentProps, type ReactNode } from "react";
+export interface AvailabilityRowProps extends Omit<ComponentProps<"fieldset">, "children"> {
+    /** The day of the row. Its header (`DayCell`) is formatted from it. */
+    date: Date;
+    /** Default `"es"`. */
+    locale?: string;
+    /** The patient's time zone, to read `date` in. */
+    timeZone?: string;
+    today?: boolean;
+    /**
+     * The day's `TimeSlot`s, six at most (the portal shows four to seven; the rest go
+     * to the full agenda through `more`). None → the Empty state.
+     */
+    children?: ReactNode;
+    /**
+     * "+3 más": a `Link` to the professional's full agenda. It navigates, it doesn't
+     * load more slots here.
+     */
+    more?: ReactNode;
+    /**
+     * Empty state: the way out to the next day with availability, a `Link` ("Ver el
+     * jueves 25"). "No slots" without a way out is a dead end.
+     */
+    nextAvailable?: ReactNode;
+    /** The availability is loading: the day shows, the slots are grey placeholders. */
+    loading?: boolean;
+}
+/**
+ * One row of the agenda: the day and its hours, for compact single-day lists (the
+ * multi-day grid is `AvailabilityColumn`). Goes inside
+ * `<TimeSlotGroup layout="rows">`.
+ *
+ * It is a `<fieldset>` named by the full date. Empty (no slots) says "Sin huecos este día"
+ * (`availabilityNoSlotsThisDay` label) and offers the next day with slots.
+ */
+export declare function AvailabilityRow({ date, locale, timeZone, today, more, nextAvailable, loading, className, children, ...props }: AvailabilityRowProps): React.JSX.Element;

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

@@ -0,0 +1,60 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useId, Children } from "react";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { DayCell } from "../day-cell/day-cell.js";
+import { TimeSlot } from "../time-slot/time-slot.js";
+const LOADING_SLOTS = [1, 2, 3, 4];
+function AvailabilityRow({
+  date,
+  locale,
+  timeZone,
+  today,
+  more,
+  nextAvailable,
+  loading = false,
+  className,
+  children,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const dayId = useId();
+  const empty = !loading && Children.toArray(children).length === 0;
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      "data-slot": "availability-row",
+      "aria-labelledby": dayId,
+      "aria-busy": loading || void 0,
+      className: cn("flex min-w-0 items-center gap-2", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          DayCell,
+          {
+            id: dayId,
+            date,
+            locale,
+            timeZone,
+            today,
+            disabled: empty
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2", children: [
+          loading && LOADING_SLOTS.map((slot) => /* @__PURE__ */ jsx(TimeSlot, { loading: true }, slot)),
+          empty ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-body-small text-text-secondary", children: labels.availabilityNoSlotsThisDay }),
+            nextAvailable
+          ] }) : !loading && /* @__PURE__ */ jsxs(Fragment, { children: [
+            children,
+            more
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  AvailabilityRow
+};
+//# sourceMappingURL=availability-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"availability-row.js","sources":["../../../src/components/availability-row/availability-row.tsx"],"sourcesContent":["import { Children, type ComponentProps, type ReactNode, useId } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { DayCell } from \"../day-cell\";\nimport { TimeSlot } from \"../time-slot\";\n\nconst LOADING_SLOTS = [1, 2, 3, 4] as const;\n\nexport interface AvailabilityRowProps\n  extends Omit<ComponentProps<\"fieldset\">, \"children\"> {\n  /** The day of the row. Its header (`DayCell`) is formatted from it. */\n  date: Date;\n  /** Default `\"es\"`. */\n  locale?: string;\n  /** The patient's time zone, to read `date` in. */\n  timeZone?: string;\n  today?: boolean;\n  /**\n   * The day's `TimeSlot`s, six at most (the portal shows four to seven; the rest go\n   * to the full agenda through `more`). None → the Empty state.\n   */\n  children?: ReactNode;\n  /**\n   * \"+3 más\": a `Link` to the professional's full agenda. It navigates, it doesn't\n   * load more slots here.\n   */\n  more?: ReactNode;\n  /**\n   * Empty state: the way out to the next day with availability, a `Link` (\"Ver el\n   * jueves 25\"). \"No slots\" without a way out is a dead end.\n   */\n  nextAvailable?: ReactNode;\n  /** The availability is loading: the day shows, the slots are grey placeholders. */\n  loading?: boolean;\n}\n\n/**\n * One row of the agenda: the day and its hours, for compact single-day lists (the\n * multi-day grid is `AvailabilityColumn`). Goes inside\n * `<TimeSlotGroup layout=\"rows\">`.\n *\n * It is a `<fieldset>` named by the full date. Empty (no slots) says \"Sin huecos este día\"\n * (`availabilityNoSlotsThisDay` label) and offers the next day with slots.\n */\nexport function AvailabilityRow({\n  date,\n  locale,\n  timeZone,\n  today,\n  more,\n  nextAvailable,\n  loading = false,\n  className,\n  children,\n  ...props\n}: AvailabilityRowProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const dayId = useId();\n  const empty = !loading && Children.toArray(children).length === 0;\n\n  return (\n    <fieldset\n      data-slot=\"availability-row\"\n      aria-labelledby={dayId}\n      aria-busy={loading || undefined}\n      className={cn(\"flex min-w-0 items-center gap-2\", className)}\n      {...props}\n    >\n      <DayCell\n        id={dayId}\n        date={date}\n        locale={locale}\n        timeZone={timeZone}\n        today={today}\n        disabled={empty}\n      />\n      <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\">\n        {loading &&\n          LOADING_SLOTS.map((slot) => <TimeSlot key={slot} loading />)}\n        {empty ? (\n          <>\n            <p className=\"text-body-small text-text-secondary\">\n              {labels.availabilityNoSlotsThisDay}\n            </p>\n            {nextAvailable}\n          </>\n        ) : (\n          !loading && (\n            <>\n              {children}\n              {more}\n            </>\n          )\n        )}\n      </div>\n    </fieldset>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,gBAAgB,CAAC,GAAG,GAAG,GAAG,CAAC;AAsC1B,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4C;AAC1C,QAAM,SAAS,kBAAA;AACf,QAAM,QAAQ,MAAA;AACd,QAAM,QAAQ,CAAC,WAAW,SAAS,QAAQ,QAAQ,EAAE,WAAW;AAEhE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,mBAAiB;AAAA,MACjB,aAAW,WAAW;AAAA,MACtB,WAAW,GAAG,mCAAmC,SAAS;AAAA,MACzD,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ,qBAAC,OAAA,EAAI,WAAU,oDACZ,UAAA;AAAA,UAAA,WACC,cAAc,IAAI,CAAC,6BAAU,UAAA,EAAoB,SAAO,KAAA,GAAb,IAAc,CAAE;AAAA,UAC5D,QACC,qBAAA,UAAA,EACE,UAAA;AAAA,YAAA,oBAAC,KAAA,EAAE,WAAU,uCACV,UAAA,OAAO,4BACV;AAAA,YACC;AAAA,UAAA,EAAA,CACH,IAEA,CAAC,WACC,qBAAA,UAAA,EACG,UAAA;AAAA,YAAA;AAAA,YACA;AAAA,UAAA,EAAA,CACH;AAAA,QAAA,EAAA,CAGN;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1 @@
+export { AvailabilityRow, type AvailabilityRowProps } from "./availability-row";

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,57 @@
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
+export declare const avatarVariants: (props?: ({
+    size?: 24 | 32 | 40 | 48 | 56 | null | undefined;
+    shape?: "circle" | "square" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const avatarStatusVariants: (props?: ({
+    size?: 24 | 32 | 40 | 48 | 56 | null | undefined;
+    shape?: "circle" | "square" | null | undefined;
+    status?: "online" | "busy" | "away" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type AvatarSize = 24 | 32 | 40 | 48 | 56;
+export type AvatarShape = "circle" | "square";
+/** `online`: can attend now · `busy`: in a consultation, will be back · `away`: absent. */
+export type AvatarStatus = "online" | "busy" | "away";
+interface AvatarBaseProps extends Omit<BaseAvatar.Root.Props, "className" | "children"> {
+    /** 56 is the professional's: profile, chat header and appointment card. */
+    size?: AvatarSize;
+    /** `circle` for people. `square` only for entities: a medical centre, an insurer. */
+    shape?: AvatarShape;
+    /** Photo URL. Healthcare professionals ALWAYS have a real photo. */
+    src?: string;
+    /**
+     * Who it is ("Dra. Laura Díaz"). It names the whole avatar (photo or initials).
+     * Leave it out when the name is already visible next to it: the avatar is then
+     * hidden from screen readers (unless it has a status).
+     */
+    alt?: string;
+    /** Shown while there is no photo, or if it fails. For patients only, never for professionals. */
+    initials?: string;
+    className?: string;
+}
+interface AvatarWithStatusProps {
+    /** Availability dot, bottom-right. */
+    status: AvatarStatus;
+    /**
+     * The status in words ("en consulta"). Required: a coloured dot is not read by a
+     * screen reader. It is appended to `alt`: "Dra. Martín, en consulta".
+     */
+    statusLabel: string;
+}
+interface AvatarWithoutStatusProps {
+    status?: undefined;
+    statusLabel?: undefined;
+}
+export type AvatarProps = AvatarBaseProps & (AvatarWithStatusProps | AvatarWithoutStatusProps);
+/**
+ * Person avatar: photo, or initials when there is none.
+ *
+ * - Healthcare professionals ALWAYS go with a real photo, name and licence number:
+ *   it is the product's #1 trust element, never replaced by initials or an icon.
+ *   Initials are for patients without a profile picture.
+ * - `circle` for people, `square` for entities (medical centre, insurer).
+ * - `status` adds the availability dot, which scales with the avatar
+ *   (8 · 10 · 12 · 14 · 16). It always needs `statusLabel`.
+ */
+export declare function Avatar({ size, shape, src, alt, initials, status, statusLabel, className, ...props }: AvatarProps): React.JSX.Element;
+export {};

package/dist/components/avatar/avatar.js

@@ -0,0 +1,115 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/cn.js";
+const avatarVariants = cva(
+  [
+    "relative inline-flex shrink-0 select-none items-center justify-center",
+    "bg-brand-subtle text-text-brand",
+    // Figma's 1px inside stroke. A pseudo-element so it is drawn over the photo too.
+    "before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-border-subtle"
+  ],
+  {
+    variants: {
+      // Initials scale with the avatar.
+      size: {
+        24: "size-avatar-sm text-label-small",
+        32: "size-avatar-md text-label-strong",
+        40: "size-avatar-lg text-body-default-strong",
+        48: "size-avatar-xl text-heading-h4",
+        56: "size-avatar-2xl text-heading-h3"
+      },
+      shape: {
+        circle: "rounded-full",
+        square: "rounded-lg"
+      }
+    },
+    defaultVariants: {
+      size: 24,
+      shape: "circle"
+    }
+  }
+);
+const avatarStatusVariants = cva(
+  // 2px ring in the page background so the dot detaches from the photo.
+  "absolute right-0 bottom-0 rounded-full ring-2 ring-background",
+  {
+    variants: {
+      size: {
+        24: "size-2",
+        32: "size-2.5",
+        40: "size-3",
+        48: "size-3.5",
+        56: "size-4"
+      },
+      // On a circle the corner is empty, so the dot sits flush; on a square it
+      // hangs a quarter of its size outside the corner.
+      shape: {
+        circle: "",
+        square: "translate-x-1/4 translate-y-1/4"
+      },
+      // The dark text-* shades, not the success/error/warning fills: the dot is often
+      // the ONLY sign of availability, so it needs 3:1 against the ring (#34C759 is
+      // 2.22:1; success-strong 5.39:1).
+      status: {
+        online: "bg-text-success",
+        busy: "bg-text-error",
+        away: "bg-text-warning"
+      }
+    },
+    defaultVariants: {
+      size: 24,
+      shape: "circle",
+      status: "online"
+    }
+  }
+);
+function Avatar({
+  size,
+  shape,
+  src,
+  alt,
+  initials,
+  status,
+  statusLabel,
+  className,
+  ...props
+}) {
+  const label = [alt, status ? statusLabel : void 0].filter(Boolean).join(", ") || void 0;
+  return /* @__PURE__ */ jsxs(
+    Avatar$1.Root,
+    {
+      "data-slot": "avatar",
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className: cn(avatarVariants({ size, shape }), className),
+      ...props,
+      children: [
+        src && /* @__PURE__ */ jsx(
+          Avatar$1.Image,
+          {
+            src,
+            alt: "",
+            className: "size-full rounded-[inherit] object-cover"
+          }
+        ),
+        initials && /* @__PURE__ */ jsx(Avatar$1.Fallback, { children: initials }),
+        status && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "avatar-status",
+            "data-status": status,
+            className: avatarStatusVariants({ size, shape, status })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Avatar,
+  avatarStatusVariants,
+  avatarVariants
+};
+//# sourceMappingURL=avatar.js.map

package/dist/components/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sources":["../../../src/components/avatar/avatar.tsx"],"sourcesContent":["import { Avatar as BaseAvatar } from \"@base-ui/react/avatar\";\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/cn\";\n\nexport const avatarVariants = cva(\n  [\n    \"relative inline-flex shrink-0 select-none items-center justify-center\",\n    \"bg-brand-subtle text-text-brand\",\n    // Figma's 1px inside stroke. A pseudo-element so it is drawn over the photo too.\n    \"before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-border-subtle\",\n  ],\n  {\n    variants: {\n      // Initials scale with the avatar.\n      size: {\n        24: \"size-avatar-sm text-label-small\",\n        32: \"size-avatar-md text-label-strong\",\n        40: \"size-avatar-lg text-body-default-strong\",\n        48: \"size-avatar-xl text-heading-h4\",\n        56: \"size-avatar-2xl text-heading-h3\",\n      },\n      shape: {\n        circle: \"rounded-full\",\n        square: \"rounded-lg\",\n      },\n    },\n    defaultVariants: {\n      size: 24,\n      shape: \"circle\",\n    },\n  },\n);\n\nexport const avatarStatusVariants = cva(\n  // 2px ring in the page background so the dot detaches from the photo.\n  \"absolute right-0 bottom-0 rounded-full ring-2 ring-background\",\n  {\n    variants: {\n      size: {\n        24: \"size-2\",\n        32: \"size-2.5\",\n        40: \"size-3\",\n        48: \"size-3.5\",\n        56: \"size-4\",\n      },\n      // On a circle the corner is empty, so the dot sits flush; on a square it\n      // hangs a quarter of its size outside the corner.\n      shape: {\n        circle: \"\",\n        square: \"translate-x-1/4 translate-y-1/4\",\n      },\n      // The dark text-* shades, not the success/error/warning fills: the dot is often\n      // the ONLY sign of availability, so it needs 3:1 against the ring (#34C759 is\n      // 2.22:1; success-strong 5.39:1).\n      status: {\n        online: \"bg-text-success\",\n        busy: \"bg-text-error\",\n        away: \"bg-text-warning\",\n      },\n    },\n    defaultVariants: {\n      size: 24,\n      shape: \"circle\",\n      status: \"online\",\n    },\n  },\n);\n\nexport type AvatarSize = 24 | 32 | 40 | 48 | 56;\n\nexport type AvatarShape = \"circle\" | \"square\";\n\n/** `online`: can attend now · `busy`: in a consultation, will be back · `away`: absent. */\nexport type AvatarStatus = \"online\" | \"busy\" | \"away\";\n\ninterface AvatarBaseProps\n  extends Omit<BaseAvatar.Root.Props, \"className\" | \"children\"> {\n  /** 56 is the professional's: profile, chat header and appointment card. */\n  size?: AvatarSize;\n  /** `circle` for people. `square` only for entities: a medical centre, an insurer. */\n  shape?: AvatarShape;\n  /** Photo URL. Healthcare professionals ALWAYS have a real photo. */\n  src?: string;\n  /**\n   * Who it is (\"Dra. Laura Díaz\"). It names the whole avatar (photo or initials).\n   * Leave it out when the name is already visible next to it: the avatar is then\n   * hidden from screen readers (unless it has a status).\n   */\n  alt?: string;\n  /** Shown while there is no photo, or if it fails. For patients only, never for professionals. */\n  initials?: string;\n  className?: string;\n}\n\ninterface AvatarWithStatusProps {\n  /** Availability dot, bottom-right. */\n  status: AvatarStatus;\n  /**\n   * The status in words (\"en consulta\"). Required: a coloured dot is not read by a\n   * screen reader. It is appended to `alt`: \"Dra. Martín, en consulta\".\n   */\n  statusLabel: string;\n}\n\ninterface AvatarWithoutStatusProps {\n  status?: undefined;\n  statusLabel?: undefined;\n}\n\nexport type AvatarProps = AvatarBaseProps &\n  (AvatarWithStatusProps | AvatarWithoutStatusProps);\n\n/**\n * Person avatar: photo, or initials when there is none.\n *\n * - Healthcare professionals ALWAYS go with a real photo, name and licence number:\n *   it is the product's #1 trust element, never replaced by initials or an icon.\n *   Initials are for patients without a profile picture.\n * - `circle` for people, `square` for entities (medical centre, insurer).\n * - `status` adds the availability dot, which scales with the avatar\n *   (8 · 10 · 12 · 14 · 16). It always needs `statusLabel`.\n */\nexport function Avatar({\n  size,\n  shape,\n  src,\n  alt,\n  initials,\n  status,\n  statusLabel,\n  className,\n  ...props\n}: AvatarProps): React.JSX.Element {\n  const label =\n    [alt, status ? statusLabel : undefined].filter(Boolean).join(\", \") ||\n    undefined;\n\n  return (\n    <BaseAvatar.Root\n      data-slot=\"avatar\"\n      role={label ? \"img\" : undefined}\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      className={cn(avatarVariants({ size, shape }), className)}\n      {...props}\n    >\n      {src && (\n        <BaseAvatar.Image\n          src={src}\n          alt=\"\"\n          className=\"size-full rounded-[inherit] object-cover\"\n        />\n      )}\n      {initials && <BaseAvatar.Fallback>{initials}</BaseAvatar.Fallback>}\n      {status && (\n        <span\n          data-slot=\"avatar-status\"\n          data-status={status}\n          className={avatarStatusVariants({ size, shape, status })}\n        />\n      )}\n    </BaseAvatar.Root>\n  );\n}\n"],"names":["BaseAvatar"],"mappings":";;;;AAKO,MAAM,iBAAiB;AAAA,EAC5B;AAAA,IACE;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA;AAAA,MAER,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEO,MAAM,uBAAuB;AAAA;AAAA,EAElC;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA;AAAA;AAAA,MAIN,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ;AAAA,MAAA;AAAA;AAAA;AAAA;AAAA,MAKV,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ;AAwDO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmC;AACjC,QAAM,QACJ,CAAC,KAAK,SAAS,cAAc,MAAS,EAAE,OAAO,OAAO,EAAE,KAAK,IAAI,KACjE;AAEF,SACE;AAAA,IAACA,SAAW;AAAA,IAAX;AAAA,MACC,aAAU;AAAA,MACV,MAAM,QAAQ,QAAQ;AAAA,MACtB,cAAY;AAAA,MACZ,eAAa,QAAQ,SAAY;AAAA,MACjC,WAAW,GAAG,eAAe,EAAE,MAAM,MAAA,CAAO,GAAG,SAAS;AAAA,MACvD,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,OACC;AAAA,UAACA,SAAW;AAAA,UAAX;AAAA,YACC;AAAA,YACA,KAAI;AAAA,YACJ,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGb,YAAY,oBAACA,SAAW,UAAX,EAAqB,UAAA,UAAS;AAAA,QAC3C,UACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACV,eAAa;AAAA,YACb,WAAW,qBAAqB,EAAE,MAAM,OAAO,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACzD;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

@@ -0,0 +1 @@
+export { Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, avatarStatusVariants, avatarVariants, } from "./avatar";

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps } from "react";
+export declare const badgeVariants: (props?: ({
+    variant?: "error" | "brand" | "neutral" | "success" | "warning" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type BadgeVariant = "neutral" | "brand" | "success" | "warning" | "error" | "info";
+export interface BadgeProps extends ComponentProps<"span"> {
+    variant?: BadgeVariant;
+}
+/**
+ * Category or status tag (documents: Receta, Informe, Orden médica; program cards).
+ * 12px (Label/Small) because it is metadata: if people need to read it to decide,
+ * it isn't a badge, it's text.
+ *
+ * - It is NOT a button: no click, no focus, no close icon. Removable → `Chip`.
+ * - On a photo use `neutral` (solid). Never a translucent pill: its contrast depends
+ *   on the photo.
+ * - `warning` keeps its text in text-primary: the orange-on-orange pair doesn't reach
+ *   4.5:1 with the current tokens.
+ */
+export declare function Badge({ variant, className, ...props }: BadgeProps): React.JSX.Element;

package/dist/components/badge/badge.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/cn.js";
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center whitespace-nowrap rounded-sm px-2 py-1 text-label-small",
+  {
+    variants: {
+      variant: {
+        neutral: "bg-surface-raised text-text-primary",
+        brand: "bg-brand-subtle text-text-brand",
+        success: "bg-success-subtle text-text-success",
+        // Token gap, not an aesthetic choice: warning-strong on warning-subtle is
+        // 3.93:1, so the text stays in text-primary and the orange lives in the fill.
+        warning: "bg-warning-subtle text-text-primary",
+        error: "bg-error-subtle text-text-error",
+        info: "bg-info-subtle text-text-info"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral"
+    }
+  }
+);
+function Badge({
+  variant,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+export {
+  Badge,
+  badgeVariants
+};
+//# sourceMappingURL=badge.js.map

package/dist/components/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sources":["../../../src/components/badge/badge.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nexport const badgeVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center whitespace-nowrap rounded-sm px-2 py-1 text-label-small\",\n  {\n    variants: {\n      variant: {\n        neutral: \"bg-surface-raised text-text-primary\",\n        brand: \"bg-brand-subtle text-text-brand\",\n        success: \"bg-success-subtle text-text-success\",\n        // Token gap, not an aesthetic choice: warning-strong on warning-subtle is\n        // 3.93:1, so the text stays in text-primary and the orange lives in the fill.\n        warning: \"bg-warning-subtle text-text-primary\",\n        error: \"bg-error-subtle text-text-error\",\n        info: \"bg-info-subtle text-text-info\",\n      },\n    },\n    defaultVariants: {\n      variant: \"neutral\",\n    },\n  },\n);\n\nexport type BadgeVariant =\n  | \"neutral\"\n  | \"brand\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\n\nexport interface BadgeProps extends ComponentProps<\"span\"> {\n  variant?: BadgeVariant;\n}\n\n/**\n * Category or status tag (documents: Receta, Informe, Orden médica; program cards).\n * 12px (Label/Small) because it is metadata: if people need to read it to decide,\n * it isn't a badge, it's text.\n *\n * - It is NOT a button: no click, no focus, no close icon. Removable → `Chip`.\n * - On a photo use `neutral` (solid). Never a translucent pill: its contrast depends\n *   on the photo.\n * - `warning` keeps its text in text-primary: the orange-on-orange pair doesn't reach\n *   4.5:1 with the current tokens.\n */\nexport function Badge({\n  variant,\n  className,\n  ...props\n}: BadgeProps): React.JSX.Element {\n  return (\n    <span\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;AAKO,MAAM,gBAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA;AAAA;AAAA,QAGT,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAyBO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkC;AAChC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,cAAc,EAAE,QAAA,CAAS,GAAG,SAAS;AAAA,MAClD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

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

@@ -0,0 +1 @@
+export { Badge, type BadgeProps, type BadgeVariant, badgeVariants, } from "./badge";

package/dist/components/banner/banner.d.ts

@@ -0,0 +1,32 @@
+import { type VariantProps } from "class-variance-authority";
+import type { ComponentProps, ReactNode } from "react";
+declare const bannerVariants: (props?: ({
+    tone?: "error" | "brand" | "success" | "warning" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BannerProps extends Omit<ComponentProps<"div">, "title">, VariantProps<typeof bannerVariants> {
+    /** What is going on, in a few words: "No puedes modificar estos datos". */
+    title: ReactNode;
+    /** What it means or what to do about it. */
+    description?: ReactNode;
+    /**
+     * One way to resolve it, below the text: usually a `Link` ("Escribir a soporte") or
+     * a `Button size="small"`. Links take text-primary here (still underlined): the link
+     * blue is 4.45:1 on `error-subtle`.
+     */
+    action?: ReactNode;
+    /**
+     * Shows the close X. Leave it out for anything the person has to resolve: a failed
+     * payment notice that can be closed unread is a notice nobody reads.
+     */
+    onClose?: () => void;
+}
+/**
+ * Persistent notice inside the page. Unlike a Toast, it stays until the situation
+ * changes or the person closes it — that is why Banner has `warning` and Toast doesn't.
+ *
+ * All text in text-primary on every tone (the lightest pair is 14.66:1); the icon
+ * carries the tone. `error` is announced with `role="alert"`; the rest use
+ * `role="status"`, which doesn't interrupt the screen reader.
+ */
+export declare function Banner({ tone, title, description, action, onClose, className, ...props }: BannerProps): React.JSX.Element;
+export {};

package/dist/components/banner/banner.js

@@ -0,0 +1,93 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { AlertCircleIcon } from "../../icons/generated/alert-circle.js";
+import { AlertTriangleIcon } from "../../icons/generated/alert-triangle.js";
+import { CheckCircleIcon } from "../../icons/generated/check-circle.js";
+import { InfoCircleIcon } from "../../icons/generated/info-circle.js";
+import { XCloseIcon } from "../../icons/generated/x-close.js";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { IconButton } from "../icon-button/icon-button.js";
+const bannerVariants = cva(
+  "flex items-center gap-3 rounded-lg p-4 text-text-primary",
+  {
+    variants: {
+      tone: {
+        info: "bg-info-subtle",
+        success: "bg-success-subtle",
+        warning: "bg-warning-subtle",
+        error: "bg-error-subtle",
+        brand: "bg-brand-subtle"
+      }
+    },
+    defaultVariants: {
+      tone: "info"
+    }
+  }
+);
+const iconVariants = cva("shrink-0", {
+  variants: {
+    tone: {
+      info: "text-text-info",
+      success: "text-text-success",
+      warning: "text-text-warning",
+      error: "text-text-error",
+      brand: "text-text-brand"
+    }
+  },
+  defaultVariants: {
+    tone: "info"
+  }
+});
+const toneIcons = {
+  info: InfoCircleIcon,
+  success: CheckCircleIcon,
+  warning: AlertTriangleIcon,
+  error: AlertCircleIcon,
+  brand: InfoCircleIcon
+};
+function Banner({
+  tone = "info",
+  title,
+  description,
+  action,
+  onClose,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const resolvedTone = tone ?? "info";
+  const Icon = toneIcons[resolvedTone];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "banner",
+      "data-tone": resolvedTone,
+      role: resolvedTone === "error" ? "alert" : "status",
+      className: cn(bannerVariants({ tone: resolvedTone }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { size: "md", className: iconVariants({ tone: resolvedTone }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-start gap-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-label-strong", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-body-small", children: description }),
+          action && /* @__PURE__ */ jsx("div", { className: "[&_[data-slot=link]]:text-text-primary", children: action })
+        ] }),
+        onClose && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            variant: "ghost",
+            size: "small",
+            icon: /* @__PURE__ */ jsx(XCloseIcon, {}),
+            "aria-label": labels.close,
+            onClick: onClose
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Banner
+};
+//# sourceMappingURL=banner.js.map

package/dist/components/banner/banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner.js","sources":["../../../src/components/banner/banner.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport {\n  AlertCircleIcon,\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  InfoCircleIcon,\n  XCloseIcon,\n} from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { IconButton } from \"../icon-button\";\n\nconst bannerVariants = cva(\n  \"flex items-center gap-3 rounded-lg p-4 text-text-primary\",\n  {\n    variants: {\n      tone: {\n        info: \"bg-info-subtle\",\n        success: \"bg-success-subtle\",\n        warning: \"bg-warning-subtle\",\n        error: \"bg-error-subtle\",\n        brand: \"bg-brand-subtle\",\n      },\n    },\n    defaultVariants: {\n      tone: \"info\",\n    },\n  },\n);\n\n// The icon goes in the strong tone (3:1 on every background); the text never does.\nconst iconVariants = cva(\"shrink-0\", {\n  variants: {\n    tone: {\n      info: \"text-text-info\",\n      success: \"text-text-success\",\n      warning: \"text-text-warning\",\n      error: \"text-text-error\",\n      brand: \"text-text-brand\",\n    },\n  },\n  defaultVariants: {\n    tone: \"info\",\n  },\n});\n\nconst toneIcons = {\n  info: InfoCircleIcon,\n  success: CheckCircleIcon,\n  warning: AlertTriangleIcon,\n  error: AlertCircleIcon,\n  brand: InfoCircleIcon,\n} as const;\n\ntype BannerTone = NonNullable<VariantProps<typeof bannerVariants>[\"tone\"]>;\n\nexport interface BannerProps\n  extends Omit<ComponentProps<\"div\">, \"title\">,\n    VariantProps<typeof bannerVariants> {\n  /** What is going on, in a few words: \"No puedes modificar estos datos\". */\n  title: ReactNode;\n  /** What it means or what to do about it. */\n  description?: ReactNode;\n  /**\n   * One way to resolve it, below the text: usually a `Link` (\"Escribir a soporte\") or\n   * a `Button size=\"small\"`. Links take text-primary here (still underlined): the link\n   * blue is 4.45:1 on `error-subtle`.\n   */\n  action?: ReactNode;\n  /**\n   * Shows the close X. Leave it out for anything the person has to resolve: a failed\n   * payment notice that can be closed unread is a notice nobody reads.\n   */\n  onClose?: () => void;\n}\n\n/**\n * Persistent notice inside the page. Unlike a Toast, it stays until the situation\n * changes or the person closes it — that is why Banner has `warning` and Toast doesn't.\n *\n * All text in text-primary on every tone (the lightest pair is 14.66:1); the icon\n * carries the tone. `error` is announced with `role=\"alert\"`; the rest use\n * `role=\"status\"`, which doesn't interrupt the screen reader.\n */\nexport function Banner({\n  tone = \"info\",\n  title,\n  description,\n  action,\n  onClose,\n  className,\n  ...props\n}: BannerProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const resolvedTone: BannerTone = tone ?? \"info\";\n  const Icon = toneIcons[resolvedTone];\n\n  return (\n    <div\n      data-slot=\"banner\"\n      data-tone={resolvedTone}\n      role={resolvedTone === \"error\" ? \"alert\" : \"status\"}\n      className={cn(bannerVariants({ tone: resolvedTone }), className)}\n      {...props}\n    >\n      <Icon size=\"md\" className={iconVariants({ tone: resolvedTone })} />\n      <div className=\"flex min-w-0 flex-1 flex-col items-start gap-1\">\n        <p className=\"text-label-strong\">{title}</p>\n        {description && <p className=\"text-body-small\">{description}</p>}\n        {action && (\n          <div className=\"[&_[data-slot=link]]:text-text-primary\">{action}</div>\n        )}\n      </div>\n      {onClose && (\n        <IconButton\n          variant=\"ghost\"\n          size=\"small\"\n          icon={<XCloseIcon />}\n          aria-label={labels.close}\n          onClick={onClose}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAcA,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAGA,MAAM,eAAe,IAAI,YAAY;AAAA,EACnC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC;AAED,MAAM,YAAY;AAAA,EAChB,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AACT;AAgCO,SAAS,OAAO;AAAA,EACrB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmC;AACjC,QAAM,SAAS,kBAAA;AACf,QAAM,eAA2B,QAAQ;AACzC,QAAM,OAAO,UAAU,YAAY;AAEnC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,aAAW;AAAA,MACX,MAAM,iBAAiB,UAAU,UAAU;AAAA,MAC3C,WAAW,GAAG,eAAe,EAAE,MAAM,aAAA,CAAc,GAAG,SAAS;AAAA,MAC9D,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAK,MAAK,MAAK,WAAW,aAAa,EAAE,MAAM,aAAA,CAAc,GAAG;AAAA,QACjE,qBAAC,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,UAAA,oBAAC,KAAA,EAAE,WAAU,qBAAqB,UAAA,OAAM;AAAA,UACvC,eAAe,oBAAC,KAAA,EAAE,WAAU,mBAAmB,UAAA,aAAY;AAAA,UAC3D,UACC,oBAAC,OAAA,EAAI,WAAU,0CAA0C,UAAA,OAAA,CAAO;AAAA,QAAA,GAEpE;AAAA,QACC,WACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,0BAAO,YAAA,EAAW;AAAA,YAClB,cAAY,OAAO;AAAA,YACnB,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACX;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

@@ -0,0 +1 @@
+export { Banner, type BannerProps } from "./banner";

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

@@ -0,0 +1,41 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ComponentProps, ReactNode } from "react";
+export interface BottomBarProps extends ComponentProps<"nav"> {
+}
+/**
+ * Mobile tab bar: a `<nav>` named "Navegación principal" with a list of links, the
+ * current one with `aria-current="page"`. Tabs share the width equally (five at 75px
+ * on a 375 phone) and it adds the iPhone's `safe-area-inset-bottom` under its 77px.
+ *
+ * - Up to five tabs, the main sections. Everything else must stay reachable from the
+ *   menu in `MobileHeader` (see `AppShell`).
+ * - A tab may use the short form of the section's name ("Documentos" for "Mis
+ *   documentos"), never a different name. If a label doesn't fit, shorten the word;
+ *   don't lower the 12px.
+ * - `AppShell` keeps it at the bottom of the screen below the desktop breakpoint.
+ */
+export declare function BottomBar({ "aria-label": ariaLabel, className, children, ...props }: BottomBarProps): React.JSX.Element;
+export declare const bottomBarItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export interface BottomBarItemProps extends Omit<useRender.ComponentProps<"a">, "className" | "children"> {
+    /** A MediCore icon, drawn at 22px. */
+    icon: ReactNode;
+    /** 12px label (Label/Small). Always visible: an icon-only tab bar is a guessing game. */
+    children: ReactNode;
+    /**
+     * The tab of the current screen: `aria-current="page"`, brand colour and a 3px bar
+     * on top (the non-colour cue). Leave it out if the router link sets
+     * `aria-current="page"` itself.
+     */
+    active?: boolean;
+    /**
+     * The central action of the product ("Pedir cita"): the icon sits in a
+     * `brand-subtle` circle. At most one per bar.
+     */
+    featured?: boolean;
+    className?: string;
+}
+/**
+ * One tab (Figma `Nav/TabItem`). Renders an `<a>` inside an `<li>`; pass the router's
+ * link with `render={<Link to="/agenda" />}`.
+ */
+export declare function BottomBarItem({ icon, children, active, featured, className, render, ...props }: BottomBarItemProps): React.JSX.Element;