@mediquo/medicore 0.1.0

package/dist/components/card/card.js

@@ -0,0 +1,157 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import { InfoCircleIcon } from "../../icons/generated/info-circle.js";
+import { cn } from "../../lib/cn.js";
+const cardVariants = cva(
+  "relative flex min-w-0 flex-col gap-4 rounded-xl",
+  {
+    variants: {
+      elevation: {
+        flat: "border border-border-subtle bg-background",
+        raised: "bg-background shadow-s",
+        filled: "bg-surface"
+      },
+      padding: {
+        default: "p-4",
+        large: "p-6"
+      }
+    },
+    defaultVariants: {
+      elevation: "flat",
+      padding: "default"
+    }
+  }
+);
+function Card({
+  elevation,
+  padding,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(cardVariants({ elevation, padding }), className),
+      ...props
+    }
+  );
+}
+function CardHeader({
+  title,
+  headingLevel = 3,
+  action,
+  className,
+  ...props
+}) {
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn("flex min-w-0 items-center gap-2", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Heading, { className: "min-w-0 flex-1 text-heading-h4 text-text-primary", children: title }),
+        action && // Above a stretched CardLink so it stays clickable.
+        /* @__PURE__ */ jsx("div", { className: "relative z-10 -my-2 flex shrink-0", children: action })
+      ]
+    }
+  );
+}
+function CardFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn(
+        "relative z-10 flex items-center gap-2 *:flex-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardLink({
+  render,
+  ref,
+  className,
+  ...props
+}) {
+  return useRender({
+    render,
+    ref,
+    defaultTagName: "a",
+    props: {
+      "data-slot": "card-link",
+      className: cn(
+        "outline-none after:absolute after:inset-0 after:rounded-xl",
+        "focus-visible:after:outline-2 focus-visible:after:outline-border-focus focus-visible:after:outline-offset-2",
+        className
+      ),
+      ...props
+    }
+  });
+}
+function CardList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "card-list",
+      className: cn("flex flex-col", className),
+      ...props
+    }
+  );
+}
+function CardCallout({
+  message,
+  icon = /* @__PURE__ */ jsx(InfoCircleIcon, {}),
+  action,
+  elevation = "raised",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "card-callout",
+      className: cn(
+        cardVariants({ elevation, padding: "default" }),
+        "gap-3",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "flex h-5 shrink-0 items-center text-text-secondary [&_svg]:size-icon-md",
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 text-body-small text-text-secondary", children: message })
+        ] }),
+        action && /* @__PURE__ */ jsx("div", { className: "flex *:flex-1", children: action })
+      ]
+    }
+  );
+}
+export {
+  Card,
+  CardCallout,
+  CardFooter,
+  CardHeader,
+  CardLink,
+  CardList,
+  cardVariants
+};
+//# sourceMappingURL=card.js.map

package/dist/components/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sources":["../../../src/components/card/card.tsx"],"sourcesContent":["import { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { InfoCircleIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\n\nexport const cardVariants = cva(\n  \"relative flex min-w-0 flex-col gap-4 rounded-xl\",\n  {\n    variants: {\n      elevation: {\n        flat: \"border border-border-subtle bg-background\",\n        raised: \"bg-background shadow-s\",\n        filled: \"bg-surface\",\n      },\n      padding: {\n        default: \"p-4\",\n        large: \"p-6\",\n      },\n    },\n    defaultVariants: {\n      elevation: \"flat\",\n      padding: \"default\",\n    },\n  },\n);\n\ntype CardVariantProps = VariantProps<typeof cardVariants>;\n\nexport type CardElevation = NonNullable<CardVariantProps[\"elevation\"]>;\n\nexport type CardPadding = NonNullable<CardVariantProps[\"padding\"]>;\n\nexport type CardHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\nexport interface CardProps extends ComponentProps<\"div\">, CardVariantProps {}\n\n/**\n * The container the Card family is built on (radius-xl, padding 16 or 24, one of\n * three elevations). Header, content and footer are parts, not props:\n * `<Card><CardHeader /> …children… <CardFooter /></Card>`.\n *\n * **Pick the elevation by what it sits on — pick wrong and the card disappears:**\n * - `flat` (default): white with a 1px border, on a light `surface`. Without the\n *   border, white on surface is 1.07:1.\n * - `filled`: `surface` fill, no border, on a white background.\n * - `raised`: white with `shadow-s`, only for what really floats (a dropdown, a\n *   draggable card). Eight shadowed cards in a list rank nothing, they're just noise.\n *\n * A Card is not interactive. If the whole card navigates, put a `CardLink` in the\n * title (a real link stretched over the card), never an `onClick` on the `<div>`.\n *\n * Not for full-bleed images: the padding lives in the container. Don't zero it.\n */\nexport function Card({\n  elevation,\n  padding,\n  className,\n  ...props\n}: CardProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(cardVariants({ elevation, padding }), className)}\n      {...props}\n    />\n  );\n}\n\nexport interface CardHeaderProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n  /** Heading/h4 look. Put a `CardLink` inside when the whole card navigates. */\n  title: ReactNode;\n  /**\n   * Heading level for the outline (h2–h6). The look doesn't change; the level comes\n   * from where the card sits in the page. Default 3.\n   */\n  headingLevel?: CardHeadingLevel;\n  /**\n   * The \"⋯\" overflow menu (a `Menu` with a ghost small icon trigger). One primary\n   * action per block: the primary goes in `CardFooter`, everything else here.\n   */\n  action?: ReactNode;\n}\n\nexport function CardHeader({\n  title,\n  headingLevel = 3,\n  action,\n  className,\n  ...props\n}: CardHeaderProps): React.JSX.Element {\n  const Heading = `h${headingLevel}` as const;\n\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\"flex min-w-0 items-center gap-2\", className)}\n      {...props}\n    >\n      <Heading className=\"min-w-0 flex-1 text-heading-h4 text-text-primary\">\n        {title}\n      </Heading>\n      {action && (\n        // Above a stretched CardLink so it stays clickable.\n        <div className=\"relative z-10 -my-2 flex shrink-0\">{action}</div>\n      )}\n    </div>\n  );\n}\n\nexport interface CardFooterProps extends ComponentProps<\"div\"> {}\n\n/** Where the card's single primary action goes. Its children share the width. */\nexport function CardFooter({\n  className,\n  ...props\n}: CardFooterProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"relative z-10 flex items-center gap-2 *:flex-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface CardLinkProps extends useRender.ComponentProps<\"a\"> {}\n\n/**\n * The link that makes a whole card navigable. It goes inside `CardHeader`'s title\n * and stretches over the card with a pseudo-element, so it can still be copied,\n * opened in a new tab and read as one link. Router links: `render={<Link to=\"…\" />}`.\n * Other controls in the card (the \"⋯\" menu, the footer) stay on top of it.\n */\nexport function CardLink({\n  render,\n  ref,\n  className,\n  ...props\n}: CardLinkProps): React.JSX.Element {\n  return useRender({\n    render,\n    ref,\n    defaultTagName: \"a\",\n    props: {\n      \"data-slot\": \"card-link\",\n      className: cn(\n        \"outline-none after:absolute after:inset-0 after:rounded-xl\",\n        \"focus-visible:after:outline-2 focus-visible:after:outline-border-focus focus-visible:after:outline-offset-2\",\n        className,\n      ),\n      ...props,\n    },\n  });\n}\n\nexport interface CardListProps extends ComponentProps<\"ul\"> {}\n\n/**\n * Card content for a short list: 1 to 4 `ListRow`s (a consultation's documents, the\n * next appointments). With more than four, it isn't a card: use a list or a page.\n */\nexport function CardList({\n  className,\n  ...props\n}: CardListProps): React.JSX.Element {\n  return (\n    <ul\n      data-slot=\"card-list\"\n      className={cn(\"flex flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface CardCalloutProps\n  extends Omit<ComponentProps<\"div\">, \"children\">,\n    Pick<CardVariantProps, \"elevation\"> {\n  /** One short sentence (\"Usa el chat para enviar el motivo de consulta…\"). */\n  message: ReactNode;\n  /** Decorative, in `text-secondary`: the text carries the message. Default `info-circle`. */\n  icon?: ReactNode;\n  /** One `Button`, full width (\"Chatear con la profesional\"). */\n  action?: ReactNode;\n}\n\n/**\n * A card with a short hint and ONE action, full width: waiting room, end of the\n * video call (\"Puedes chatear con tu profesional hasta 48 horas después de la cita\").\n *\n * It is not a Banner: a Banner reports a state (error, warning); this invites you to\n * do something. Raised by default, as in Figma; follow the Card elevation rule if it\n * sits on white.\n */\nexport function CardCallout({\n  message,\n  icon = <InfoCircleIcon />,\n  action,\n  elevation = \"raised\",\n  className,\n  ...props\n}: CardCalloutProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"card-callout\"\n      className={cn(\n        cardVariants({ elevation, padding: \"default\" }),\n        \"gap-3\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex items-start gap-2\">\n        <span\n          aria-hidden\n          className=\"flex h-5 shrink-0 items-center text-text-secondary [&_svg]:size-icon-md\"\n        >\n          {icon}\n        </span>\n        <p className=\"min-w-0 flex-1 text-body-small text-text-secondary\">\n          {message}\n        </p>\n      </div>\n      {action && <div className=\"flex *:flex-1\">{action}</div>}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+export { Card, CardCallout, type CardCalloutProps, type CardElevation, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardHeadingLevel, CardLink, type CardLinkProps, CardList, type CardListProps, type CardPadding, type CardProps, cardVariants, } from "./card";

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

@@ -0,0 +1,58 @@
+import type { ComponentProps, ReactNode } from "react";
+import type { CardHeadingLevel } from "../card";
+export type CardAppointmentStatus = "scheduled" | "ready" | "completed" | "cancelled";
+export interface CardAppointmentProps extends Omit<ComponentProps<"article">, "title"> {
+    /** "Dra. María Rodríguez Pastor". The card's heading; up to two lines. */
+    professional: ReactNode;
+    /** "Ginecología". */
+    specialty?: ReactNode;
+    /** The professional's photo. Professionals always have a real one. */
+    avatarSrc?: string;
+    /** Start of the appointment. Rendered as "jueves, 1 de octubre" and "15:30". */
+    date: Date;
+    /** Default `"es"`. */
+    locale?: string;
+    /** The patient's time zone: the date and the time are shown in it. */
+    timeZone?: string;
+    /** "Videoconsulta", "Llamada", "Chat", "Presencial". A property, not a variant. */
+    channel: ReactNode;
+    /** The channel's icon. Default `video-recorder`. */
+    channelIcon?: ReactNode;
+    /**
+     * The appointment's life cycle, as the backend says (never computed from the
+     * patient's clock: Ready means the professional has opened the room).
+     * Default `scheduled`.
+     */
+    status?: CardAppointmentStatus;
+    /** One line in `text-secondary`: "Podrás entrar a la sala 10 minutos antes." */
+    note?: ReactNode;
+    /**
+     * The ONE visible action, full width: Scheduled → "Reagendar" (secondary) · Ready
+     * → "Entrar a la consulta" (primary, the only primary) · Completed → "Ver informe"
+     * (secondary) · Cancelled → "Pedir otra cita" (secondary).
+     */
+    action?: ReactNode;
+    /**
+     * The "⋯" with everything else (reagendar, cancelar, añadir al calendario): a
+     * `Menu` whose trigger is an outline `IconButton`. Cancelling an appointment
+     * takes two gestures, never one. Leave it out when cancelled.
+     */
+    menu?: ReactNode;
+    /** Level of the professional's heading. Default 3. */
+    headingLevel?: CardHeadingLevel;
+}
+/**
+ * An appointment card: professional, date, time, channel and ONE action. The most
+ * repeated pattern of the patient portal (home, booking, video call).
+ *
+ * - Four states, the real life cycle: `scheduled` (days to go: rescheduling is the
+ *   action, the note says when the room opens) · `ready` (the room is open: the
+ *   only place for the brand primary "Entrar a la consulta") · `completed` (the
+ *   report) · `cancelled` (dimmed, with a Badge and a way out: book another).
+ * - One visible action and the rest in the "⋯". Never four buttons in a row with
+ *   "Cancelar" next to "Reagendar".
+ * - The weekday is lowercase and the year only shows when it isn't this year.
+ *
+ * It is an `<article>` headed by the professional's name.
+ */
+export declare function CardAppointment({ professional, specialty, avatarSrc, date, locale, timeZone, channel, channelIcon, status, note, action, menu, headingLevel, className, ...props }: CardAppointmentProps): React.JSX.Element;

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

@@ -0,0 +1,136 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarIcon } from "../../icons/generated/calendar.js";
+import { ClockIcon } from "../../icons/generated/clock.js";
+import { VideoRecorderIcon } from "../../icons/generated/video-recorder.js";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { Avatar } from "../avatar/avatar.js";
+import { Badge } from "../badge/badge.js";
+const statusBadges = {
+  ready: "success",
+  completed: "neutral",
+  cancelled: "error"
+};
+function formatAppointment(date, locale, timeZone) {
+  const yearOf = (value) => new Intl.DateTimeFormat(locale, { year: "numeric", timeZone }).format(
+    value
+  );
+  const withYear = yearOf(date) !== yearOf(/* @__PURE__ */ new Date());
+  return {
+    day: new Intl.DateTimeFormat(locale, {
+      weekday: "long",
+      day: "numeric",
+      month: "long",
+      year: withYear ? "numeric" : void 0,
+      timeZone
+    }).format(date),
+    // "15:30": no "h", no leading space.
+    time: new Intl.DateTimeFormat(locale, {
+      hour: "2-digit",
+      minute: "2-digit",
+      hourCycle: "h23",
+      timeZone
+    }).format(date)
+  };
+}
+function CardAppointment({
+  professional,
+  specialty,
+  avatarSrc,
+  date,
+  locale = "es",
+  timeZone,
+  channel,
+  channelIcon = /* @__PURE__ */ jsx(VideoRecorderIcon, {}),
+  status = "scheduled",
+  note,
+  action,
+  menu,
+  headingLevel = 3,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const Heading = `h${headingLevel}`;
+  const cancelled = status === "cancelled";
+  const { day, time } = formatAppointment(date, locale, timeZone);
+  const badgeLabels = {
+    ready: labels.appointmentReady,
+    completed: labels.appointmentCompleted,
+    cancelled: labels.appointmentCancelled
+  };
+  const details = [
+    {
+      key: "date",
+      icon: /* @__PURE__ */ jsx(CalendarIcon, {}),
+      text: /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), children: day })
+    },
+    {
+      key: "time",
+      icon: /* @__PURE__ */ jsx(ClockIcon, {}),
+      text: /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), children: time })
+    },
+    { key: "channel", icon: channelIcon, text: channel }
+  ];
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      "data-slot": "card-appointment",
+      "data-status": status,
+      className: cn(
+        "flex min-w-0 flex-col gap-5 rounded-xl border border-border-subtle bg-background p-6",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-4", children: [
+          /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              size: 56,
+              src: avatarSrc,
+              className: cn(cancelled && "opacity-60")
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsx(
+              Heading,
+              {
+                className: cn(
+                  "line-clamp-2 text-body-default-strong",
+                  cancelled ? "text-text-secondary" : "text-text-primary"
+                ),
+                children: professional
+              }
+            ),
+            specialty && /* @__PURE__ */ jsx("p", { className: "text-body-small text-text-secondary", children: specialty })
+          ] }),
+          status !== "scheduled" && /* @__PURE__ */ jsx(Badge, { variant: statusBadges[status], children: badgeLabels[status] })
+        ] }),
+        /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: details.map((detail) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: cn(
+              "flex items-center gap-2 text-label-strong [&_svg]:size-icon-md [&_svg]:shrink-0",
+              cancelled ? "text-text-secondary" : "text-text-primary"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex", children: detail.icon }),
+              detail.text
+            ]
+          },
+          detail.key
+        )) }),
+        note && /* @__PURE__ */ jsx("p", { className: "text-body-small text-text-secondary", children: note }),
+        (action || menu) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          action && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 *:flex-1", children: action }),
+          menu
+        ] })
+      ]
+    }
+  );
+}
+export {
+  CardAppointment
+};
+//# sourceMappingURL=card-appointment.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-appointment.js","sources":["../../../src/components/card-appointment/card-appointment.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nimport { CalendarIcon, ClockIcon, VideoRecorderIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { Avatar } from \"../avatar\";\nimport { Badge, type BadgeVariant } from \"../badge\";\nimport type { CardHeadingLevel } from \"../card\";\n\nexport type CardAppointmentStatus =\n  | \"scheduled\"\n  | \"ready\"\n  | \"completed\"\n  | \"cancelled\";\n\nexport interface CardAppointmentProps\n  extends Omit<ComponentProps<\"article\">, \"title\"> {\n  /** \"Dra. María Rodríguez Pastor\". The card's heading; up to two lines. */\n  professional: ReactNode;\n  /** \"Ginecología\". */\n  specialty?: ReactNode;\n  /** The professional's photo. Professionals always have a real one. */\n  avatarSrc?: string;\n  /** Start of the appointment. Rendered as \"jueves, 1 de octubre\" and \"15:30\". */\n  date: Date;\n  /** Default `\"es\"`. */\n  locale?: string;\n  /** The patient's time zone: the date and the time are shown in it. */\n  timeZone?: string;\n  /** \"Videoconsulta\", \"Llamada\", \"Chat\", \"Presencial\". A property, not a variant. */\n  channel: ReactNode;\n  /** The channel's icon. Default `video-recorder`. */\n  channelIcon?: ReactNode;\n  /**\n   * The appointment's life cycle, as the backend says (never computed from the\n   * patient's clock: Ready means the professional has opened the room).\n   * Default `scheduled`.\n   */\n  status?: CardAppointmentStatus;\n  /** One line in `text-secondary`: \"Podrás entrar a la sala 10 minutos antes.\" */\n  note?: ReactNode;\n  /**\n   * The ONE visible action, full width: Scheduled → \"Reagendar\" (secondary) · Ready\n   * → \"Entrar a la consulta\" (primary, the only primary) · Completed → \"Ver informe\"\n   * (secondary) · Cancelled → \"Pedir otra cita\" (secondary).\n   */\n  action?: ReactNode;\n  /**\n   * The \"⋯\" with everything else (reagendar, cancelar, añadir al calendario): a\n   * `Menu` whose trigger is an outline `IconButton`. Cancelling an appointment\n   * takes two gestures, never one. Leave it out when cancelled.\n   */\n  menu?: ReactNode;\n  /** Level of the professional's heading. Default 3. */\n  headingLevel?: CardHeadingLevel;\n}\n\nconst statusBadges: Record<\n  Exclude<CardAppointmentStatus, \"scheduled\">,\n  BadgeVariant\n> = {\n  ready: \"success\",\n  completed: \"neutral\",\n  cancelled: \"error\",\n};\n\nfunction formatAppointment(\n  date: Date,\n  locale: string,\n  timeZone?: string,\n): { day: string; time: string } {\n  const yearOf = (value: Date) =>\n    new Intl.DateTimeFormat(locale, { year: \"numeric\", timeZone }).format(\n      value,\n    );\n  // No year when it is this year: \"jueves, 1 de octubre\".\n  const withYear = yearOf(date) !== yearOf(new Date());\n\n  return {\n    day: new Intl.DateTimeFormat(locale, {\n      weekday: \"long\",\n      day: \"numeric\",\n      month: \"long\",\n      year: withYear ? \"numeric\" : undefined,\n      timeZone,\n    }).format(date),\n    // \"15:30\": no \"h\", no leading space.\n    time: new Intl.DateTimeFormat(locale, {\n      hour: \"2-digit\",\n      minute: \"2-digit\",\n      hourCycle: \"h23\",\n      timeZone,\n    }).format(date),\n  };\n}\n\n/**\n * An appointment card: professional, date, time, channel and ONE action. The most\n * repeated pattern of the patient portal (home, booking, video call).\n *\n * - Four states, the real life cycle: `scheduled` (days to go: rescheduling is the\n *   action, the note says when the room opens) · `ready` (the room is open: the\n *   only place for the brand primary \"Entrar a la consulta\") · `completed` (the\n *   report) · `cancelled` (dimmed, with a Badge and a way out: book another).\n * - One visible action and the rest in the \"⋯\". Never four buttons in a row with\n *   \"Cancelar\" next to \"Reagendar\".\n * - The weekday is lowercase and the year only shows when it isn't this year.\n *\n * It is an `<article>` headed by the professional's name.\n */\nexport function CardAppointment({\n  professional,\n  specialty,\n  avatarSrc,\n  date,\n  locale = \"es\",\n  timeZone,\n  channel,\n  channelIcon = <VideoRecorderIcon />,\n  status = \"scheduled\",\n  note,\n  action,\n  menu,\n  headingLevel = 3,\n  className,\n  ...props\n}: CardAppointmentProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const Heading = `h${headingLevel}` as const;\n  const cancelled = status === \"cancelled\";\n  const { day, time } = formatAppointment(date, locale, timeZone);\n  const badgeLabels: Record<\n    Exclude<CardAppointmentStatus, \"scheduled\">,\n    string\n  > = {\n    ready: labels.appointmentReady,\n    completed: labels.appointmentCompleted,\n    cancelled: labels.appointmentCancelled,\n  };\n\n  const details = [\n    {\n      key: \"date\",\n      icon: <CalendarIcon />,\n      text: <time dateTime={date.toISOString()}>{day}</time>,\n    },\n    {\n      key: \"time\",\n      icon: <ClockIcon />,\n      text: <time dateTime={date.toISOString()}>{time}</time>,\n    },\n    { key: \"channel\", icon: channelIcon, text: channel },\n  ];\n\n  return (\n    <article\n      data-slot=\"card-appointment\"\n      data-status={status}\n      className={cn(\n        \"flex min-w-0 flex-col gap-5 rounded-xl border border-border-subtle bg-background p-6\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex min-w-0 items-center gap-4\">\n        <Avatar\n          size={56}\n          src={avatarSrc}\n          className={cn(cancelled && \"opacity-60\")}\n        />\n        <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n          <Heading\n            className={cn(\n              \"line-clamp-2 text-body-default-strong\",\n              cancelled ? \"text-text-secondary\" : \"text-text-primary\",\n            )}\n          >\n            {professional}\n          </Heading>\n          {specialty && (\n            <p className=\"text-body-small text-text-secondary\">{specialty}</p>\n          )}\n        </div>\n        {status !== \"scheduled\" && (\n          <Badge variant={statusBadges[status]}>{badgeLabels[status]}</Badge>\n        )}\n      </div>\n\n      <ul className=\"flex flex-col gap-2\">\n        {details.map((detail) => (\n          <li\n            key={detail.key}\n            className={cn(\n              \"flex items-center gap-2 text-label-strong [&_svg]:size-icon-md [&_svg]:shrink-0\",\n              cancelled ? \"text-text-secondary\" : \"text-text-primary\",\n            )}\n          >\n            <span aria-hidden className=\"flex\">\n              {detail.icon}\n            </span>\n            {detail.text}\n          </li>\n        ))}\n      </ul>\n\n      {note && <p className=\"text-body-small text-text-secondary\">{note}</p>}\n\n      {(action || menu) && (\n        <div className=\"flex items-center gap-2\">\n          {action && (\n            <div className=\"flex min-w-0 flex-1 *:flex-1\">{action}</div>\n          )}\n          {menu}\n        </div>\n      )}\n    </article>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+export { CardAppointment, type CardAppointmentProps, type CardAppointmentStatus, } from "./card-appointment";

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

@@ -0,0 +1,28 @@
+import type { useRender } from "@base-ui/react/use-render";
+import type { ComponentProps, ReactNode } from "react";
+import { type CardHeadingLevel } from "../card";
+export interface CardArticleProps extends Omit<ComponentProps<"article">, "title"> {
+    /** Informative, with no promise of results. Heading/h4 look; the link's name. */
+    title: ReactNode;
+    /** Two or three lines. */
+    excerpt?: ReactNode;
+    /** The article's category as a brand Badge on the image ("Pérdida de peso"). */
+    category?: ReactNode;
+    /** `<img src="…" alt="" />`, cropped to fill 200px. */
+    image?: ReactNode;
+    /** The article. The whole card is this link. */
+    href?: string;
+    /** Router link: `render={<Link to="…" />}`. */
+    render?: useRender.RenderProp;
+    /** Level of the title's heading. Default 3. */
+    headingLevel?: CardHeadingLevel;
+}
+/**
+ * The featured article of "Te puede interesar". The other articles go as
+ * `ListRow`s with a thumbnail and the category as overline.
+ *
+ * The whole card links (a `CardLink` in the title). "Leer artículo"
+ * (`articleRead` label) is only the visual cue: it looks like a link but it isn't a
+ * second one.
+ */
+export declare function CardArticle({ title, excerpt, category, image, href, render, headingLevel, className, ...props }: CardArticleProps): React.JSX.Element;

package/dist/components/card-article/card-article.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { Badge } from "../badge/badge.js";
+import { CardLink } from "../card/card.js";
+import { linkVariants } from "../link/link.js";
+function CardArticle({
+  title,
+  excerpt,
+  category,
+  image,
+  href,
+  render,
+  headingLevel = 3,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      "data-slot": "card-article",
+      className: cn(
+        "relative flex min-w-0 flex-col rounded-xl bg-background shadow-s",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative h-50 shrink-0 overflow-hidden rounded-t-xl bg-brand-subtle [&>img]:size-full [&>img]:object-cover", children: [
+          image,
+          category && /* @__PURE__ */ jsx(Badge, { variant: "brand", className: "absolute top-3 left-3", children: category })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-2 p-4", children: [
+          /* @__PURE__ */ jsx(Heading, { className: "text-heading-h4 text-text-primary", children: href || render ? /* @__PURE__ */ jsx(CardLink, { href, render, children: title }) : title }),
+          excerpt && /* @__PURE__ */ jsx("p", { className: "text-body-small text-text-secondary", children: excerpt }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: linkVariants(), children: labels.articleRead })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  CardArticle
+};
+//# sourceMappingURL=card-article.js.map

package/dist/components/card-article/card-article.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-article.js","sources":["../../../src/components/card-article/card-article.tsx"],"sourcesContent":["import type { useRender } from \"@base-ui/react/use-render\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { Badge } from \"../badge\";\nimport { type CardHeadingLevel, CardLink } from \"../card\";\nimport { linkVariants } from \"../link\";\n\nexport interface CardArticleProps\n  extends Omit<ComponentProps<\"article\">, \"title\"> {\n  /** Informative, with no promise of results. Heading/h4 look; the link's name. */\n  title: ReactNode;\n  /** Two or three lines. */\n  excerpt?: ReactNode;\n  /** The article's category as a brand Badge on the image (\"Pérdida de peso\"). */\n  category?: ReactNode;\n  /** `<img src=\"…\" alt=\"\" />`, cropped to fill 200px. */\n  image?: ReactNode;\n  /** The article. The whole card is this link. */\n  href?: string;\n  /** Router link: `render={<Link to=\"…\" />}`. */\n  render?: useRender.RenderProp;\n  /** Level of the title's heading. Default 3. */\n  headingLevel?: CardHeadingLevel;\n}\n\n/**\n * The featured article of \"Te puede interesar\". The other articles go as\n * `ListRow`s with a thumbnail and the category as overline.\n *\n * The whole card links (a `CardLink` in the title). \"Leer artículo\"\n * (`articleRead` label) is only the visual cue: it looks like a link but it isn't a\n * second one.\n */\nexport function CardArticle({\n  title,\n  excerpt,\n  category,\n  image,\n  href,\n  render,\n  headingLevel = 3,\n  className,\n  ...props\n}: CardArticleProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const Heading = `h${headingLevel}` as const;\n\n  return (\n    <article\n      data-slot=\"card-article\"\n      className={cn(\n        \"relative flex min-w-0 flex-col rounded-xl bg-background shadow-s\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"relative h-50 shrink-0 overflow-hidden rounded-t-xl bg-brand-subtle [&>img]:size-full [&>img]:object-cover\">\n        {image}\n        {category && (\n          <Badge variant=\"brand\" className=\"absolute top-3 left-3\">\n            {category}\n          </Badge>\n        )}\n      </div>\n      <div className=\"flex flex-col items-start gap-2 p-4\">\n        <Heading className=\"text-heading-h4 text-text-primary\">\n          {href || render ? (\n            <CardLink href={href} render={render}>\n              {title}\n            </CardLink>\n          ) : (\n            title\n          )}\n        </Heading>\n        {excerpt && (\n          <p className=\"text-body-small text-text-secondary\">{excerpt}</p>\n        )}\n        <span aria-hidden className={linkVariants()}>\n          {labels.articleRead}\n        </span>\n      </div>\n    </article>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAmCO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAwC;AACtC,QAAM,SAAS,kBAAA;AACf,QAAM,UAAU,IAAI,YAAY;AAEhC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,8GACZ,UAAA;AAAA,UAAA;AAAA,UACA,YACC,oBAAC,OAAA,EAAM,SAAQ,SAAQ,WAAU,yBAC9B,UAAA,SAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QACA,qBAAC,OAAA,EAAI,WAAU,uCACb,UAAA;AAAA,UAAA,oBAAC,SAAA,EAAQ,WAAU,qCAChB,UAAA,QAAQ,SACP,oBAAC,UAAA,EAAS,MAAY,QACnB,UAAA,MAAA,CACH,IAEA,OAEJ;AAAA,UACC,WACC,oBAAC,KAAA,EAAE,WAAU,uCAAuC,UAAA,SAAQ;AAAA,UAE9D,oBAAC,UAAK,eAAW,MAAC,WAAW,gBAC1B,iBAAO,YAAA,CACV;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/card-article/index.d.ts

@@ -0,0 +1 @@
+export { CardArticle, type CardArticleProps } from "./card-article";

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

@@ -0,0 +1,56 @@
+import type { ComponentProps, ReactNode } from "react";
+import type { CardHeadingLevel } from "../card";
+export interface CardProfessionalProps extends Omit<ComponentProps<"article">, "title"> {
+    /** "Dra. Vanesa Díaz de la Torre". The card's heading; up to two lines. */
+    name: ReactNode;
+    /** "Medicina general". */
+    specialty: ReactNode;
+    /**
+     * "Nº col. 28/28123456". Required, no switch: real photo + name + licence number
+     * are the product's first trust signal.
+     */
+    license: ReactNode;
+    /** The professional's photo. Professionals always have a real one. */
+    avatarSrc?: string;
+    /**
+     * Shows the `check-verified-02` seal next to the name, named "Profesional
+     * verificado" (`professionalVerified` label): an icon alone is read by nobody.
+     */
+    verified?: boolean;
+    /** "Español", "Inglés"… As Badges: they inform, they don't filter. */
+    languages?: string[];
+    /** Up to three lines, then "…". */
+    bio?: ReactNode;
+    /** "29 € · Videoconsulta". Visible before choosing a time, never first at checkout. */
+    price: ReactNode;
+    /**
+     * The agenda: a `TimeSlotGroup` of `AvailabilityColumn`s. Days that don't fit the
+     * card's width are hidden (five on desktop, four on a phone), never squeezed.
+     * Loading: pass the columns with `loading` — the identity comes with the search,
+     * the availability doesn't. Leave it out when there are no slots this week
+     * (NoAvailability).
+     */
+    availability?: ReactNode;
+    /**
+     * NoAvailability: when the first free slot is ("El primero libre es el martes 13
+     * a las 09:00."). Shown under "No le quedan huecos esta semana".
+     */
+    nextAvailable?: ReactNode;
+    /** "Ver agenda completa": a `Link` with a trailing `ChevronRightIcon`. */
+    calendarLink?: ReactNode;
+    /** Level of the name's heading. Default 3. */
+    headingLevel?: CardHeadingLevel;
+}
+/**
+ * A professional in the "Pedir cita" results: identity, languages, bio, price and
+ * the week's agenda.
+ *
+ * - Figma `Layout` is not a prop: from 400px wide the card uses padding 24 (Desktop),
+ *   below it 16 (Mobile); the agenda shows the days that fit.
+ * - States: Default (`availability`), Loading (columns with `loading`),
+ *   NoAvailability (no `availability`: "No le quedan huecos esta semana" +
+ *   `nextAvailable`).
+ *
+ * It is an `<article>` headed by the name.
+ */
+export declare function CardProfessional({ name, specialty, license, avatarSrc, verified, languages, bio, price, availability, nextAvailable, calendarLink, headingLevel, className, ...props }: CardProfessionalProps): React.JSX.Element;

package/dist/components/card-professional/card-professional.js

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckVerified02Icon } from "../../icons/generated/check-verified-02.js";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { Avatar } from "../avatar/avatar.js";
+import { Badge } from "../badge/badge.js";
+import { Divider } from "../divider/divider.js";
+function CardProfessional({
+  name,
+  specialty,
+  license,
+  avatarSrc,
+  verified = false,
+  languages,
+  bio,
+  price,
+  availability,
+  nextAvailable,
+  calendarLink,
+  headingLevel = 3,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsx(
+    "article",
+    {
+      "data-slot": "card-professional",
+      className: cn(
+        "@container min-w-0 rounded-xl border border-border-subtle bg-background",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4 @min-[400px]:p-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-4", children: [
+          /* @__PURE__ */ jsx(Avatar, { size: 56, src: avatarSrc }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [
+              /* @__PURE__ */ jsx(Heading, { className: "line-clamp-2 min-w-0 text-body-default-strong text-text-primary", children: name }),
+              verified && /* @__PURE__ */ jsx(
+                CheckVerified02Icon,
+                {
+                  size: "sm",
+                  title: labels.professionalVerified,
+                  className: "text-text-brand"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-body-small text-text-secondary", children: specialty }),
+            /* @__PURE__ */ jsx("p", { className: "text-caption-default text-text-secondary", children: license })
+          ] })
+        ] }),
+        languages && languages.length > 0 && /* @__PURE__ */ jsx(
+          "ul",
+          {
+            "aria-label": labels.professionalLanguages,
+            className: "flex flex-wrap gap-2",
+            children: languages.map((language) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx(Badge, { children: language }) }, language))
+          }
+        ),
+        bio && /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-body-small text-text-secondary", children: bio }),
+        /* @__PURE__ */ jsx("p", { className: "text-label-strong text-text-primary", children: price }),
+        /* @__PURE__ */ jsx(Divider, {}),
+        availability ?? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 rounded-lg bg-surface p-4", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-label-strong text-text-primary", children: labels.availabilityNoSlotsThisWeek }),
+          nextAvailable && /* @__PURE__ */ jsx("p", { className: "text-body-small text-text-secondary", children: nextAvailable })
+        ] }),
+        calendarLink && /* @__PURE__ */ jsx("div", { className: "flex", children: calendarLink })
+      ] })
+    }
+  );
+}
+export {
+  CardProfessional
+};
+//# sourceMappingURL=card-professional.js.map

package/dist/components/card-professional/card-professional.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-professional.js","sources":["../../../src/components/card-professional/card-professional.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nimport { CheckVerified02Icon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { Avatar } from \"../avatar\";\nimport { Badge } from \"../badge\";\nimport type { CardHeadingLevel } from \"../card\";\nimport { Divider } from \"../divider\";\n\nexport interface CardProfessionalProps\n  extends Omit<ComponentProps<\"article\">, \"title\"> {\n  /** \"Dra. Vanesa Díaz de la Torre\". The card's heading; up to two lines. */\n  name: ReactNode;\n  /** \"Medicina general\". */\n  specialty: ReactNode;\n  /**\n   * \"Nº col. 28/28123456\". Required, no switch: real photo + name + licence number\n   * are the product's first trust signal.\n   */\n  license: ReactNode;\n  /** The professional's photo. Professionals always have a real one. */\n  avatarSrc?: string;\n  /**\n   * Shows the `check-verified-02` seal next to the name, named \"Profesional\n   * verificado\" (`professionalVerified` label): an icon alone is read by nobody.\n   */\n  verified?: boolean;\n  /** \"Español\", \"Inglés\"… As Badges: they inform, they don't filter. */\n  languages?: string[];\n  /** Up to three lines, then \"…\". */\n  bio?: ReactNode;\n  /** \"29 € · Videoconsulta\". Visible before choosing a time, never first at checkout. */\n  price: ReactNode;\n  /**\n   * The agenda: a `TimeSlotGroup` of `AvailabilityColumn`s. Days that don't fit the\n   * card's width are hidden (five on desktop, four on a phone), never squeezed.\n   * Loading: pass the columns with `loading` — the identity comes with the search,\n   * the availability doesn't. Leave it out when there are no slots this week\n   * (NoAvailability).\n   */\n  availability?: ReactNode;\n  /**\n   * NoAvailability: when the first free slot is (\"El primero libre es el martes 13\n   * a las 09:00.\"). Shown under \"No le quedan huecos esta semana\".\n   */\n  nextAvailable?: ReactNode;\n  /** \"Ver agenda completa\": a `Link` with a trailing `ChevronRightIcon`. */\n  calendarLink?: ReactNode;\n  /** Level of the name's heading. Default 3. */\n  headingLevel?: CardHeadingLevel;\n}\n\n/**\n * A professional in the \"Pedir cita\" results: identity, languages, bio, price and\n * the week's agenda.\n *\n * - Figma `Layout` is not a prop: from 400px wide the card uses padding 24 (Desktop),\n *   below it 16 (Mobile); the agenda shows the days that fit.\n * - States: Default (`availability`), Loading (columns with `loading`),\n *   NoAvailability (no `availability`: \"No le quedan huecos esta semana\" +\n *   `nextAvailable`).\n *\n * It is an `<article>` headed by the name.\n */\nexport function CardProfessional({\n  name,\n  specialty,\n  license,\n  avatarSrc,\n  verified = false,\n  languages,\n  bio,\n  price,\n  availability,\n  nextAvailable,\n  calendarLink,\n  headingLevel = 3,\n  className,\n  ...props\n}: CardProfessionalProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const Heading = `h${headingLevel}` as const;\n\n  return (\n    <article\n      data-slot=\"card-professional\"\n      className={cn(\n        \"@container min-w-0 rounded-xl border border-border-subtle bg-background\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex flex-col gap-4 p-4 @min-[400px]:p-6\">\n        <div className=\"flex min-w-0 items-center gap-4\">\n          <Avatar size={56} src={avatarSrc} />\n          <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n            <div className=\"flex min-w-0 items-center gap-1\">\n              <Heading className=\"line-clamp-2 min-w-0 text-body-default-strong text-text-primary\">\n                {name}\n              </Heading>\n              {verified && (\n                <CheckVerified02Icon\n                  size=\"sm\"\n                  title={labels.professionalVerified}\n                  className=\"text-text-brand\"\n                />\n              )}\n            </div>\n            <p className=\"text-body-small text-text-secondary\">{specialty}</p>\n            <p className=\"text-caption-default text-text-secondary\">\n              {license}\n            </p>\n          </div>\n        </div>\n\n        {languages && languages.length > 0 && (\n          <ul\n            aria-label={labels.professionalLanguages}\n            className=\"flex flex-wrap gap-2\"\n          >\n            {languages.map((language) => (\n              <li key={language} className=\"flex\">\n                <Badge>{language}</Badge>\n              </li>\n            ))}\n          </ul>\n        )}\n\n        {bio && (\n          <p className=\"line-clamp-3 text-body-small text-text-secondary\">\n            {bio}\n          </p>\n        )}\n\n        <p className=\"text-label-strong text-text-primary\">{price}</p>\n\n        <Divider />\n\n        {availability ?? (\n          <div className=\"flex flex-col gap-1 rounded-lg bg-surface p-4\">\n            <p className=\"text-label-strong text-text-primary\">\n              {labels.availabilityNoSlotsThisWeek}\n            </p>\n            {nextAvailable && (\n              <p className=\"text-body-small text-text-secondary\">\n                {nextAvailable}\n              </p>\n            )}\n          </div>\n        )}\n\n        {calendarLink && <div className=\"flex\">{calendarLink}</div>}\n      </div>\n    </article>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAiEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAA6C;AAC3C,QAAM,SAAS,kBAAA;AACf,QAAM,UAAU,IAAI,YAAY;AAEhC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA,qBAAC,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAO,MAAM,IAAI,KAAK,WAAW;AAAA,UAClC,qBAAC,OAAA,EAAI,WAAU,wCACb,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,cAAA,oBAAC,SAAA,EAAQ,WAAU,mEAChB,UAAA,MACH;AAAA,cACC,YACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,OAAO,OAAO;AAAA,kBACd,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACZ,GAEJ;AAAA,YACA,oBAAC,KAAA,EAAE,WAAU,uCAAuC,UAAA,WAAU;AAAA,YAC9D,oBAAC,KAAA,EAAE,WAAU,4CACV,UAAA,QAAA,CACH;AAAA,UAAA,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAEC,aAAa,UAAU,SAAS,KAC/B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,cAAY,OAAO;AAAA,YACnB,WAAU;AAAA,YAET,UAAA,UAAU,IAAI,CAAC,aACd,oBAAC,MAAA,EAAkB,WAAU,QAC3B,UAAA,oBAAC,OAAA,EAAO,UAAA,SAAA,CAAS,EAAA,GADV,QAET,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJ,OACC,oBAAC,KAAA,EAAE,WAAU,oDACV,UAAA,KACH;AAAA,QAGF,oBAAC,KAAA,EAAE,WAAU,uCAAuC,UAAA,OAAM;AAAA,4BAEzD,SAAA,EAAQ;AAAA,QAER,gBACC,qBAAC,OAAA,EAAI,WAAU,iDACb,UAAA;AAAA,UAAA,oBAAC,KAAA,EAAE,WAAU,uCACV,UAAA,OAAO,6BACV;AAAA,UACC,iBACC,oBAAC,KAAA,EAAE,WAAU,uCACV,UAAA,cAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QAGD,gBAAgB,oBAAC,OAAA,EAAI,WAAU,QAAQ,UAAA,aAAA,CAAa;AAAA,MAAA,EAAA,CACvD;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/card-professional/index.d.ts

@@ -0,0 +1 @@
+export { CardProfessional, type CardProfessionalProps, } from "./card-professional";