@mediquo/medicore 0.1.1 → 0.3.0

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

@@ -1,10 +1,12 @@
 import type { ComponentProps } from "react";
 export declare const badgeVariants: (props?: ({
-    variant?: "error" | "brand" | "neutral" | "success" | "warning" | "info" | null | undefined;
+    variant?: "outline" | "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 type BadgeVariant = "neutral" | "outline" | "brand" | "success" | "warning" | "error" | "info";
 export interface BadgeProps extends ComponentProps<"span"> {
     variant?: BadgeVariant;
+    /** A coloured dot in front: for statuses ("Abierta", "Pagada"), not for categories. */
+    dot?: boolean;
 }
 /**
  * Category or status tag (documents: Receta, Informe, Orden médica; program cards).
@@ -12,9 +14,11 @@ export interface BadgeProps extends ComponentProps<"span"> {
  * it isn't a badge, it's text.
  *
  * - It is NOT a button: no click, no focus, no close icon. Removable → `Chip`.
+ * - `outline` is the quiet one for plain metadata (a clinic's name next to a
+ *   professional); the tinted variants tell a state.
  * - 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;
+export declare function Badge({ variant, dot, className, children, ...props }: BadgeProps): React.JSX.Element;

package/dist/components/badge/badge.js

@@ -1,12 +1,13 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, 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",
+  "inline-flex h-6 w-fit shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 text-label-small font-medium [&_svg]:size-icon-xs",
   {
     variants: {
       variant: {
         neutral: "bg-surface-raised text-text-primary",
+        outline: "bg-background text-text-secondary ring-1 ring-border ring-inset",
         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
@@ -21,17 +22,39 @@ const badgeVariants = cva(
     }
   }
 );
+const badgeDotVariants = cva("size-1.5 shrink-0 rounded-full", {
+  variants: {
+    variant: {
+      neutral: "bg-text-secondary",
+      outline: "bg-text-secondary",
+      brand: "bg-brand",
+      success: "bg-success",
+      warning: "bg-warning",
+      error: "bg-error",
+      info: "bg-info"
+    }
+  },
+  defaultVariants: {
+    variant: "neutral"
+  }
+});
 function Badge({
   variant,
+  dot = false,
   className,
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "span",
     {
       "data-slot": "badge",
       className: cn(badgeVariants({ variant }), className),
-      ...props
+      ...props,
+      children: [
+        dot && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: badgeDotVariants({ variant }) }),
+        children
+      ]
     }
   );
 }

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

@@ -1 +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;"}
+{"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 h-6 w-fit shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 text-label-small font-medium [&_svg]:size-icon-xs\",\n  {\n    variants: {\n      variant: {\n        neutral: \"bg-surface-raised text-text-primary\",\n        outline:\n          \"bg-background text-text-secondary ring-1 ring-border ring-inset\",\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\nconst badgeDotVariants = cva(\"size-1.5 shrink-0 rounded-full\", {\n  variants: {\n    variant: {\n      neutral: \"bg-text-secondary\",\n      outline: \"bg-text-secondary\",\n      brand: \"bg-brand\",\n      success: \"bg-success\",\n      warning: \"bg-warning\",\n      error: \"bg-error\",\n      info: \"bg-info\",\n    },\n  },\n  defaultVariants: {\n    variant: \"neutral\",\n  },\n});\n\nexport type BadgeVariant =\n  | \"neutral\"\n  | \"outline\"\n  | \"brand\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\n\nexport interface BadgeProps extends ComponentProps<\"span\"> {\n  variant?: BadgeVariant;\n  /** A coloured dot in front: for statuses (\"Abierta\", \"Pagada\"), not for categories. */\n  dot?: boolean;\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 * - `outline` is the quiet one for plain metadata (a clinic's name next to a\n *   professional); the tinted variants tell a state.\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  dot = false,\n  className,\n  children,\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      {dot && (\n        <span aria-hidden=\"true\" className={badgeDotVariants({ variant })} />\n      )}\n      {children}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;AAKO,MAAM,gBAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SACE;AAAA,QACF,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;AAEA,MAAM,mBAAmB,IAAI,kCAAkC;AAAA,EAC7D,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC;AA8BM,SAAS,MAAM;AAAA,EACpB;AAAA,EACA,MAAM;AAAA,EACN;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,MAEH,UAAA;AAAA,QAAA,OACC,oBAAC,UAAK,eAAY,QAAO,WAAW,iBAAiB,EAAE,QAAA,CAAS,GAAG;AAAA,QAEpE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -1,5 +1,5 @@
+import { useRender } from "@base-ui/react/use-render";
 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;
@@ -17,19 +17,26 @@ export interface BreadcrumbProps extends ComponentProps<"nav"> {
  * </Breadcrumb>
  * ```
  *
+ * The levels above are quiet (Label/Default in text-secondary, brand on hover), with
+ * a chevron in border-strong between them, so the trail never competes with the
+ * page title under it. The links are not underlined: inside the breadcrumb landmark
+ * and its list, their position already tells they are links (WCAG 1.4.1 applies to
+ * links in running text).
+ *
  * 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"> {
+export interface BreadcrumbItemProps extends useRender.ComponentProps<"a"> {
     /** 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.
+ * A level above the current page: a link (`href`, or 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 declare function BreadcrumbItem({ render, ref, 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. */

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 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,
@@ -33,18 +33,34 @@ function Breadcrumb({
   );
 }
 function BreadcrumbItem({
+  render,
+  ref,
   className,
   children,
   ...props
 }) {
+  const link = useRender({
+    render,
+    ref,
+    defaultTagName: "a",
+    props: {
+      "data-slot": "breadcrumb-link",
+      className: cn(
+        "focus-ring touch-target inline-flex items-center gap-1 rounded-xs text-label-default text-text-secondary transition-colors hover:text-text-brand",
+        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 }),
+    link,
     /* @__PURE__ */ jsx(
       ChevronRightIcon,
       {
         size: "sm",
-        className: "text-text-secondary max-lg:hidden"
+        className: "text-border-strong max-lg:hidden"
       }
     )
   ] });
@@ -57,7 +73,7 @@ function BreadcrumbPage({
     "span",
     {
       "aria-current": "page",
-      className: cn("text-label-small text-text-primary", className),
+      className: cn("text-label-strong text-text-primary", className),
       ...props
     }
   ) });

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

@@ -1 +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;"}
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { useRender } from \"@base-ui/react/use-render\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\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 * The levels above are quiet (Label/Default in text-secondary, brand on hover), with\n * a chevron in border-strong between them, so the trail never competes with the\n * page title under it. The links are not underlined: inside the breadcrumb landmark\n * and its list, their position already tells they are links (WCAG 1.4.1 applies to\n * links in running text).\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 useRender.ComponentProps<\"a\"> {\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 (`href`, or the router's with `render`)\n * followed by a chevron. On mobile, the parent level gets a back arrow in front\n * instead.\n */\nexport function BreadcrumbItem({\n  render,\n  ref,\n  className,\n  children,\n  ...props\n}: BreadcrumbItemProps): React.JSX.Element {\n  const link = useRender({\n    render,\n    ref,\n    defaultTagName: \"a\",\n    props: {\n      \"data-slot\": \"breadcrumb-link\",\n      className: cn(\n        \"focus-ring touch-target inline-flex items-center gap-1 rounded-xs text-label-default text-text-secondary transition-colors hover:text-text-brand\",\n        className,\n      ),\n      children,\n      ...props,\n    },\n  });\n\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}\n      <ChevronRightIcon\n        size=\"sm\"\n        className=\"text-border-strong 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-strong text-text-primary\", className)}\n        {...props}\n      />\n    </li>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAkCO,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;AAYO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2C;AACzC,QAAM,OAAO,UAAU;AAAA,IACrB;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACL,aAAa;AAAA,MACb,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF;AAAA,MACA,GAAG;AAAA,IAAA;AAAA,EACL,CACD;AAED,SACE,qBAAC,MAAA,EAAG,aAAU,mBAAkB,WAAU,2BACxC,UAAA;AAAA,IAAA,oBAAC,iBAAA,EAAgB,MAAK,MAAK,WAAU,iCAAgC;AAAA,IACpE;AAAA,IACD;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,uCAAuC,SAAS;AAAA,MAC7D,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;"}

package/dist/components/button/button.js

@@ -6,20 +6,20 @@ 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",
+    "rounded-md border border-transparent text-label-strong transition-[color,background-color,border-color,box-shadow]",
     "focus-ring touch-target",
     "[&_svg]:shrink-0 [&_svg]:size-icon-sm",
-    "data-disabled:cursor-not-allowed aria-busy:cursor-progress"
+    "data-disabled:cursor-not-allowed data-disabled:shadow-none 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",
+        primary: "bg-brand text-text-inverse shadow-xs not-data-disabled:hover:bg-brand-strong",
+        secondary: "border-text-brand bg-brand-subtle text-text-brand not-data-disabled:hover:bg-background",
+        outline: "border-border bg-background text-text-primary shadow-xs not-data-disabled:hover:border-border-strong 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",
+        destructive: "bg-error-strong text-text-inverse shadow-xs",
+        inverse: "bg-background text-text-brand shadow-xs not-data-disabled:hover:bg-surface",
         "inverse-ghost": "bg-transparent text-text-inverse not-data-disabled:hover:bg-overlay-light"
       },
       size: {
@@ -37,12 +37,12 @@ const buttonVariants = cva(
       {
         variant: ["primary", "destructive"],
         disabled: true,
-        className: "bg-surface text-text-disabled"
+        className: "bg-surface-raised text-text-disabled"
       },
       {
         variant: ["secondary", "outline"],
         disabled: true,
-        className: "border-border bg-surface text-text-disabled"
+        className: "border-border-subtle bg-surface text-text-disabled"
       },
       {
         variant: "ghost",

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

@@ -1 +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;"}
+{"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-[color,background-color,border-color,box-shadow]\",\n    \"focus-ring touch-target\",\n    \"[&_svg]:shrink-0 [&_svg]:size-icon-sm\",\n    \"data-disabled:cursor-not-allowed data-disabled:shadow-none aria-busy:cursor-progress\",\n  ],\n  {\n    variants: {\n      variant: {\n        primary:\n          \"bg-brand text-text-inverse shadow-xs not-data-disabled:hover:bg-brand-strong\",\n        secondary:\n          \"border-text-brand bg-brand-subtle text-text-brand not-data-disabled:hover:bg-background\",\n        outline:\n          \"border-border bg-background text-text-primary shadow-xs not-data-disabled:hover:border-border-strong 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 shadow-xs\",\n        inverse:\n          \"bg-background text-text-brand shadow-xs 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-raised text-text-disabled\",\n      },\n      {\n        variant: [\"secondary\", \"outline\"],\n        disabled: true,\n        className: \"border-border-subtle 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/chip/chip.d.ts

@@ -14,6 +14,8 @@ interface ChipOwnProps {
     size?: ChipSize;
     /** A MediCore icon before the label. While selected the check takes its place. */
     leadingIcon?: ReactNode;
+    /** Counter after the label ("Abiertas 5"): how many items the filter would show. */
+    count?: ReactNode;
     className?: string;
 }
 export interface ChipToggleProps extends Omit<Toggle.Props<string>, "className">, ChipOwnProps {
@@ -40,6 +42,7 @@ export type ChipProps = ChipToggleProps | ChipRemovableProps;
  * - It is a `<button aria-pressed>` (Base UI Toggle): `pressed` / `defaultPressed` /
  *   `onPressedChange`, or `value` inside a `ChipGroup`.
  * - With `onRemove` it is a remove button for an applied filter instead.
+ * - `count` adds a counter pill at the end, brand-coloured while selected.
  */
 export declare function Chip(props: ChipProps): React.JSX.Element;
 export interface ChipGroupProps<Value extends string = string> extends Omit<ToggleGroup.Props<Value>, "className"> {

package/dist/components/chip/chip.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
@@ -10,15 +10,14 @@ import { useMediCoreLabels } from "../../provider/medicore-provider.js";
 const chipVariants = cva(
   [
     "group/chip inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap",
-    // border-input, not border: a chip is a control and its edge needs 3:1 (1.4.11).
-    "rounded-full border border-border-input bg-surface text-text-primary transition-colors",
+    "rounded-full border border-border bg-background text-text-primary shadow-xs transition-[color,background-color,border-color,box-shadow]",
     // 32 (24 small) drawn, 44 hit area.
     "focus-ring touch-target",
     "[&_svg]:shrink-0",
-    "not-data-disabled:not-data-pressed:hover:bg-surface-raised",
-    // Selected is not just a colour: check in front, 1.5px border, Medium label.
-    "not-data-disabled:data-pressed:border-[1.5px] not-data-disabled:data-pressed:border-text-brand not-data-disabled:data-pressed:bg-brand-subtle not-data-disabled:data-pressed:text-text-brand",
-    "data-disabled:cursor-not-allowed data-disabled:border-border-subtle data-disabled:text-text-disabled"
+    "not-data-disabled:not-data-pressed:hover:border-border-strong not-data-disabled:not-data-pressed:hover:bg-surface",
+    // Selected is not just a colour: check in front, brand border, Medium label.
+    "not-data-disabled:data-pressed:border-brand not-data-disabled:data-pressed:bg-brand-subtle not-data-disabled:data-pressed:text-text-brand not-data-disabled:data-pressed:shadow-none",
+    "data-disabled:cursor-not-allowed data-disabled:border-border-subtle data-disabled:bg-surface data-disabled:text-text-disabled data-disabled:shadow-none"
   ],
   {
     variants: {
@@ -32,10 +31,40 @@ const chipVariants = cva(
     }
   }
 );
+const chipCountVariants = cva(
+  [
+    "inline-flex shrink-0 items-center justify-center rounded-full bg-surface-raised text-caption-default text-text-secondary tabular-nums transition-colors",
+    "group-data-pressed/chip:bg-brand group-data-pressed/chip:text-text-inverse",
+    "group-data-disabled/chip:bg-transparent group-data-disabled/chip:text-text-disabled"
+  ],
+  {
+    variants: {
+      size: {
+        default: "-me-1 h-5 min-w-5 px-1.5",
+        small: "-me-0.5 h-4 min-w-4 px-1"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+function ChipCount({
+  size,
+  count
+}) {
+  if (count === void 0 || count === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    " ",
+    /* @__PURE__ */ jsx("span", { "data-slot": "chip-count", className: chipCountVariants({ size }), children: count })
+  ] });
+}
 function Chip(props) {
   const labels = useMediCoreLabels();
   if (props.onRemove) {
-    const { size: size2, leadingIcon: leadingIcon2, className: className2, children: children2, onRemove: onRemove2, ...rest2 } = props;
+    const { size: size2, leadingIcon: leadingIcon2, count: count2, className: className2, children: children2, onRemove: onRemove2, ...rest2 } = props;
     return /* @__PURE__ */ jsxs(
       Button,
       {
@@ -50,12 +79,13 @@ function Chip(props) {
             " "
           ] }),
           children2,
+          /* @__PURE__ */ jsx(ChipCount, { size: size2, count: count2 }),
           /* @__PURE__ */ jsx(XCloseIcon, {})
         ]
       }
     );
   }
-  const { size, leadingIcon, className, children, onRemove, ...rest } = props;
+  const { size, leadingIcon, count, className, children, onRemove, ...rest } = props;
   return /* @__PURE__ */ jsxs(
     Toggle,
     {
@@ -65,7 +95,8 @@ function Chip(props) {
       children: [
         /* @__PURE__ */ jsx(CheckIcon, { className: "hidden group-data-pressed/chip:block" }),
         leadingIcon && /* @__PURE__ */ jsx("span", { className: "contents group-data-pressed/chip:hidden", children: leadingIcon }),
-        children
+        children,
+        /* @__PURE__ */ jsx(ChipCount, { size, count })
       ]
     }
   );

package/dist/components/chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../../src/components/chip/chip.tsx"],"sourcesContent":["import { Button as BaseButton } from \"@base-ui/react/button\";\nimport { Toggle } from \"@base-ui/react/toggle\";\nimport { ToggleGroup } from \"@base-ui/react/toggle-group\";\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\n\nimport { CheckIcon, XCloseIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\n\nexport const chipVariants = cva(\n  [\n    \"group/chip inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap\",\n    // border-input, not border: a chip is a control and its edge needs 3:1 (1.4.11).\n    \"rounded-full border border-border-input bg-surface text-text-primary transition-colors\",\n    // 32 (24 small) drawn, 44 hit area.\n    \"focus-ring touch-target\",\n    \"[&_svg]:shrink-0\",\n    \"not-data-disabled:not-data-pressed:hover:bg-surface-raised\",\n    // Selected is not just a colour: check in front, 1.5px border, Medium label.\n    \"not-data-disabled:data-pressed:border-[1.5px] not-data-disabled:data-pressed:border-text-brand not-data-disabled:data-pressed:bg-brand-subtle not-data-disabled:data-pressed:text-text-brand\",\n    \"data-disabled:cursor-not-allowed data-disabled:border-border-subtle data-disabled:text-text-disabled\",\n  ],\n  {\n    variants: {\n      size: {\n        default:\n          \"h-8 gap-1.5 px-3 text-label-default data-pressed:text-label-strong [&_svg]:size-icon-sm\",\n        small: \"h-6 gap-1 px-2 text-label-small [&_svg]:size-icon-xs\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  },\n);\n\nexport type ChipSize = \"default\" | \"small\";\n\ninterface ChipOwnProps {\n  /**\n   * `small` only for dense metadata, never as the main filter: at 24px it relies on\n   * the invisible hit area to reach 44.\n   */\n  size?: ChipSize;\n  /** A MediCore icon before the label. While selected the check takes its place. */\n  leadingIcon?: ReactNode;\n  className?: string;\n}\n\nexport interface ChipToggleProps\n  extends Omit<Toggle.Props<string>, \"className\">,\n    ChipOwnProps {\n  onRemove?: undefined;\n}\n\nexport interface ChipRemovableProps\n  extends Omit<BaseButton.Props, \"className\" | \"onClick\">,\n    ChipOwnProps {\n  /**\n   * Turns the chip into a remove button for an applied filter: pressing anywhere on\n   * it calls this. Its accessible name becomes \"Quitar <label>\" (`remove` label).\n   * A removable chip is not a toggle.\n   */\n  onRemove: () => void;\n  pressed?: undefined;\n  defaultPressed?: undefined;\n  onPressedChange?: undefined;\n}\n\nexport type ChipProps = ChipToggleProps | ChipRemovableProps;\n\n/**\n * Pressable filter (\"Dermatología\"). The filter row of lists and the admin.\n *\n * - **A Chip is not a Badge.** A Badge tells a state and can't be pressed\n *   (\"Receta\", \"Cancelada\"); a Chip filters and is pressed. If it doesn't respond to\n *   a tap, it's a Badge.\n * - It is a `<button aria-pressed>` (Base UI Toggle): `pressed` / `defaultPressed` /\n *   `onPressedChange`, or `value` inside a `ChipGroup`.\n * - With `onRemove` it is a remove button for an applied filter instead.\n */\nexport function Chip(props: ChipProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n\n  if (props.onRemove) {\n    const { size, leadingIcon, className, children, onRemove, ...rest } = props;\n\n    return (\n      <BaseButton\n        data-slot=\"chip\"\n        className={cn(chipVariants({ size }), className)}\n        onClick={onRemove}\n        {...rest}\n      >\n        {leadingIcon}\n        <span className=\"sr-only\">{labels.remove} </span>\n        {children}\n        <XCloseIcon />\n      </BaseButton>\n    );\n  }\n\n  const { size, leadingIcon, className, children, onRemove, ...rest } = props;\n\n  return (\n    <Toggle\n      data-slot=\"chip\"\n      className={cn(chipVariants({ size }), className)}\n      {...rest}\n    >\n      <CheckIcon className=\"hidden group-data-pressed/chip:block\" />\n      {leadingIcon && (\n        <span className=\"contents group-data-pressed/chip:hidden\">\n          {leadingIcon}\n        </span>\n      )}\n      {children}\n    </Toggle>\n  );\n}\n\nexport interface ChipGroupProps<Value extends string = string>\n  extends Omit<ToggleGroup.Props<Value>, \"className\"> {\n  /**\n   * `wrap` (default) breaks into lines; `scroll` keeps one line that scrolls\n   * sideways — the usual filter row on mobile.\n   */\n  overflow?: \"wrap\" | \"scroll\";\n  className?: string;\n}\n\n/**\n * A row of filter chips with shared state: `value` is the array of pressed chips.\n * Multi-select by default (`multiple={false}` for one at a time — but an exclusive\n * choice between 2–3 options is a `SegmentedControl`). One tab stop; ←/→ move\n * between chips. Name it with `aria-label` (\"Filtrar por especialidad\").\n */\nexport function ChipGroup<Value extends string>({\n  overflow = \"wrap\",\n  multiple = true,\n  className,\n  ...props\n}: ChipGroupProps<Value>): React.JSX.Element {\n  return (\n    <ToggleGroup\n      data-slot=\"chip-group\"\n      multiple={multiple}\n      className={cn(\n        \"flex gap-2\",\n        overflow === \"wrap\"\n          ? \"flex-wrap\"\n          : // Room for the hit area and the focus ring inside the scroll box.\n            \"-m-1.5 overflow-x-auto p-1.5 [scrollbar-width:none]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"names":["size","leadingIcon","className","children","onRemove","rest","BaseButton"],"mappings":";;;;;;;;;AAUO,MAAM,eAAe;AAAA,EAC1B;AAAA,IACE;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,SACE;AAAA,QACF,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AA+CO,SAAS,KAAK,OAAqC;AACxD,QAAM,SAAS,kBAAA;AAEf,MAAI,MAAM,UAAU;AAClB,UAAM,EAAE,MAAAA,OAAM,aAAAC,cAAa,WAAAC,YAAW,UAAAC,WAAU,UAAAC,WAAU,GAAGC,UAAS;AAEtE,WACE;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAW,GAAG,aAAa,EAAE,MAAAN,MAAAA,CAAM,GAAGE,UAAS;AAAA,QAC/C,SAASE;AAAAA,QACR,GAAGC;AAAAA,QAEH,UAAA;AAAA,UAAAJ;AAAAA,UACD,qBAAC,QAAA,EAAK,WAAU,WAAW,UAAA;AAAA,YAAA,OAAO;AAAA,YAAO;AAAA,UAAA,GAAC;AAAA,UACzCE;AAAAA,8BACA,YAAA,CAAA,CAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGlB;AAEA,QAAM,EAAE,MAAM,aAAa,WAAW,UAAU,UAAU,GAAG,SAAS;AAEtE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,aAAa,EAAE,KAAA,CAAM,GAAG,SAAS;AAAA,MAC9C,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,WAAA,EAAU,WAAU,uCAAA,CAAuC;AAAA,QAC3D,eACC,oBAAC,QAAA,EAAK,WAAU,2CACb,UAAA,aACH;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAkBO,SAAS,UAAgC;AAAA,EAC9C,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAA6C;AAC3C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,aAAa,SACT;AAAA;AAAA,UAEA;AAAA;AAAA,QACJ;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"chip.js","sources":["../../../src/components/chip/chip.tsx"],"sourcesContent":["import { Button as BaseButton } from \"@base-ui/react/button\";\nimport { Toggle } from \"@base-ui/react/toggle\";\nimport { ToggleGroup } from \"@base-ui/react/toggle-group\";\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\n\nimport { CheckIcon, XCloseIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\n\nexport const chipVariants = cva(\n  [\n    \"group/chip inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap\",\n    \"rounded-full border border-border bg-background text-text-primary shadow-xs transition-[color,background-color,border-color,box-shadow]\",\n    // 32 (24 small) drawn, 44 hit area.\n    \"focus-ring touch-target\",\n    \"[&_svg]:shrink-0\",\n    \"not-data-disabled:not-data-pressed:hover:border-border-strong not-data-disabled:not-data-pressed:hover:bg-surface\",\n    // Selected is not just a colour: check in front, brand border, Medium label.\n    \"not-data-disabled:data-pressed:border-brand not-data-disabled:data-pressed:bg-brand-subtle not-data-disabled:data-pressed:text-text-brand not-data-disabled:data-pressed:shadow-none\",\n    \"data-disabled:cursor-not-allowed data-disabled:border-border-subtle data-disabled:bg-surface data-disabled:text-text-disabled data-disabled:shadow-none\",\n  ],\n  {\n    variants: {\n      size: {\n        default:\n          \"h-8 gap-1.5 px-3 text-label-default data-pressed:text-label-strong [&_svg]:size-icon-sm\",\n        small: \"h-6 gap-1 px-2 text-label-small [&_svg]:size-icon-xs\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  },\n);\n\nconst chipCountVariants = cva(\n  [\n    \"inline-flex shrink-0 items-center justify-center rounded-full bg-surface-raised text-caption-default text-text-secondary tabular-nums transition-colors\",\n    \"group-data-pressed/chip:bg-brand group-data-pressed/chip:text-text-inverse\",\n    \"group-data-disabled/chip:bg-transparent group-data-disabled/chip:text-text-disabled\",\n  ],\n  {\n    variants: {\n      size: {\n        default: \"-me-1 h-5 min-w-5 px-1.5\",\n        small: \"-me-0.5 h-4 min-w-4 px-1\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  },\n);\n\nexport type ChipSize = \"default\" | \"small\";\n\ninterface ChipOwnProps {\n  /**\n   * `small` only for dense metadata, never as the main filter: at 24px it relies on\n   * the invisible hit area to reach 44.\n   */\n  size?: ChipSize;\n  /** A MediCore icon before the label. While selected the check takes its place. */\n  leadingIcon?: ReactNode;\n  /** Counter after the label (\"Abiertas 5\"): how many items the filter would show. */\n  count?: ReactNode;\n  className?: string;\n}\n\nexport interface ChipToggleProps\n  extends Omit<Toggle.Props<string>, \"className\">,\n    ChipOwnProps {\n  onRemove?: undefined;\n}\n\nexport interface ChipRemovableProps\n  extends Omit<BaseButton.Props, \"className\" | \"onClick\">,\n    ChipOwnProps {\n  /**\n   * Turns the chip into a remove button for an applied filter: pressing anywhere on\n   * it calls this. Its accessible name becomes \"Quitar <label>\" (`remove` label).\n   * A removable chip is not a toggle.\n   */\n  onRemove: () => void;\n  pressed?: undefined;\n  defaultPressed?: undefined;\n  onPressedChange?: undefined;\n}\n\nexport type ChipProps = ChipToggleProps | ChipRemovableProps;\n\nfunction ChipCount({\n  size,\n  count,\n}: {\n  size: ChipSize | undefined;\n  count: ReactNode;\n}): React.JSX.Element | null {\n  if (count === undefined || count === null) {\n    return null;\n  }\n  return (\n    <>\n      {\" \"}\n      <span data-slot=\"chip-count\" className={chipCountVariants({ size })}>\n        {count}\n      </span>\n    </>\n  );\n}\n\n/**\n * Pressable filter (\"Dermatología\"). The filter row of lists and the admin.\n *\n * - **A Chip is not a Badge.** A Badge tells a state and can't be pressed\n *   (\"Receta\", \"Cancelada\"); a Chip filters and is pressed. If it doesn't respond to\n *   a tap, it's a Badge.\n * - It is a `<button aria-pressed>` (Base UI Toggle): `pressed` / `defaultPressed` /\n *   `onPressedChange`, or `value` inside a `ChipGroup`.\n * - With `onRemove` it is a remove button for an applied filter instead.\n * - `count` adds a counter pill at the end, brand-coloured while selected.\n */\nexport function Chip(props: ChipProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n\n  if (props.onRemove) {\n    const { size, leadingIcon, count, className, children, onRemove, ...rest } =\n      props;\n\n    return (\n      <BaseButton\n        data-slot=\"chip\"\n        className={cn(chipVariants({ size }), className)}\n        onClick={onRemove}\n        {...rest}\n      >\n        {leadingIcon}\n        <span className=\"sr-only\">{labels.remove} </span>\n        {children}\n        <ChipCount size={size} count={count} />\n        <XCloseIcon />\n      </BaseButton>\n    );\n  }\n\n  const { size, leadingIcon, count, className, children, onRemove, ...rest } =\n    props;\n\n  return (\n    <Toggle\n      data-slot=\"chip\"\n      className={cn(chipVariants({ size }), className)}\n      {...rest}\n    >\n      <CheckIcon className=\"hidden group-data-pressed/chip:block\" />\n      {leadingIcon && (\n        <span className=\"contents group-data-pressed/chip:hidden\">\n          {leadingIcon}\n        </span>\n      )}\n      {children}\n      <ChipCount size={size} count={count} />\n    </Toggle>\n  );\n}\n\nexport interface ChipGroupProps<Value extends string = string>\n  extends Omit<ToggleGroup.Props<Value>, \"className\"> {\n  /**\n   * `wrap` (default) breaks into lines; `scroll` keeps one line that scrolls\n   * sideways — the usual filter row on mobile.\n   */\n  overflow?: \"wrap\" | \"scroll\";\n  className?: string;\n}\n\n/**\n * A row of filter chips with shared state: `value` is the array of pressed chips.\n * Multi-select by default (`multiple={false}` for one at a time — but an exclusive\n * choice between 2–3 options is a `SegmentedControl`). One tab stop; ←/→ move\n * between chips. Name it with `aria-label` (\"Filtrar por especialidad\").\n */\nexport function ChipGroup<Value extends string>({\n  overflow = \"wrap\",\n  multiple = true,\n  className,\n  ...props\n}: ChipGroupProps<Value>): React.JSX.Element {\n  return (\n    <ToggleGroup\n      data-slot=\"chip-group\"\n      multiple={multiple}\n      className={cn(\n        \"flex gap-2\",\n        overflow === \"wrap\"\n          ? \"flex-wrap\"\n          : // Room for the hit area and the focus ring inside the scroll box.\n            \"-m-1.5 overflow-x-auto p-1.5 [scrollbar-width:none]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"names":["size","leadingIcon","count","className","children","onRemove","rest","BaseButton"],"mappings":";;;;;;;;;AAUO,MAAM,eAAe;AAAA,EAC1B;AAAA,IACE;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,SACE;AAAA,QACF,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAEA,MAAM,oBAAoB;AAAA,EACxB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAuCA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AACF,GAG6B;AAC3B,MAAI,UAAU,UAAa,UAAU,MAAM;AACzC,WAAO;AAAA,EACT;AACA,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA;AAAA,IACD,oBAAC,QAAA,EAAK,aAAU,cAAa,WAAW,kBAAkB,EAAE,KAAA,CAAM,GAC/D,UAAA,MAAA,CACH;AAAA,EAAA,GACF;AAEJ;AAaO,SAAS,KAAK,OAAqC;AACxD,QAAM,SAAS,kBAAA;AAEf,MAAI,MAAM,UAAU;AAClB,UAAM,EAAE,MAAAA,OAAM,aAAAC,cAAa,OAAAC,QAAO,WAAAC,YAAW,UAAAC,WAAU,UAAAC,WAAU,GAAGC,UAClE;AAEF,WACE;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAW,GAAG,aAAa,EAAE,MAAAP,MAAAA,CAAM,GAAGG,UAAS;AAAA,QAC/C,SAASE;AAAAA,QACR,GAAGC;AAAAA,QAEH,UAAA;AAAA,UAAAL;AAAAA,UACD,qBAAC,QAAA,EAAK,WAAU,WAAW,UAAA;AAAA,YAAA,OAAO;AAAA,YAAO;AAAA,UAAA,GAAC;AAAA,UACzCG;AAAAA,UACD,oBAAC,WAAA,EAAU,MAAMJ,OAAM,OAAOE,QAAO;AAAA,8BACpC,YAAA,CAAA,CAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGlB;AAEA,QAAM,EAAE,MAAM,aAAa,OAAO,WAAW,UAAU,UAAU,GAAG,KAAA,IAClE;AAEF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,aAAa,EAAE,KAAA,CAAM,GAAG,SAAS;AAAA,MAC9C,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,WAAA,EAAU,WAAU,uCAAA,CAAuC;AAAA,QAC3D,eACC,oBAAC,QAAA,EAAK,WAAU,2CACb,UAAA,aACH;AAAA,QAED;AAAA,QACD,oBAAC,WAAA,EAAU,MAAY,MAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3C;AAkBO,SAAS,UAAgC;AAAA,EAC9C,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAA6C;AAC3C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,aAAa,SACT;AAAA;AAAA,UAEA;AAAA;AAAA,QACJ;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/detail-header/detail-header.d.ts

@@ -0,0 +1,49 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ComponentProps, ReactNode } from "react";
+export type DetailHeaderHeadingLevel = 1 | 2;
+export interface DetailHeaderProps extends Omit<ComponentProps<"header">, "title"> {
+    /** The record's name: "Laura Gómez", "Clínica Dental Sonrisas". */
+    title: ReactNode;
+    /** The scope of what is shown, next to the title in text-secondary: "Septiembre 2026". */
+    subtitle?: ReactNode;
+    /** Its state, a `Badge` right after the title. */
+    badge?: ReactNode;
+    /** The way back to the list: a `DetailHeaderBack`. */
+    back?: ReactNode;
+    /** An `Avatar` or `IconContainer` before the title. */
+    leading?: ReactNode;
+    /** One line of small print under the title: "Cerrada el 2 de octubre por Víctor". */
+    meta?: ReactNode;
+    /** The record's `Button`s, primary last. They wrap under the title on narrow screens. */
+    actions?: ReactNode;
+    /**
+     * Level of the title. Default 1: the detail page's `<h1>`. Use 2 when the page
+     * already has its `<h1>` (a `MobileHeader` with the section's name, for example).
+     */
+    headingLevel?: DetailHeaderHeadingLevel;
+    /** The figures row: `StatCard`s and `FactCard`s, laid out by the screen. */
+    children?: ReactNode;
+}
+/**
+ * The header of a record's page (a professional's settlement, a patient, a clinic):
+ * the way back, who or what it is, its state, its actions and its key figures, in one
+ * raised card so the rest of the page reads as the record's content.
+ *
+ * - The title looks like Heading/h2 in text-brand, like `PageHeader`: it is the
+ *   identity of the screen. It IS the page heading (`headingLevel` 1) unless the
+ *   page already has one.
+ * - `actions` sit to the right of the title from `lg` up and wrap under it below.
+ *   Primary last, `outline` for the rest.
+ * - The figures go in `children`: `StatCard`s for amounts and counts, a `FactCard`
+ *   for the facts that decide what can be done (invoicing data, missing consent).
+ *   The screen owns their grid.
+ */
+export declare function DetailHeader({ title, subtitle, badge, back, leading, meta, actions, headingLevel, className, children, ...props }: DetailHeaderProps): React.JSX.Element;
+export interface DetailHeaderBackProps extends useRender.ComponentProps<"a"> {
+}
+/**
+ * The link back to the list: "Liquidaciones". A real link (`href`, or
+ * `render={<Link to="…" />}` for the router) drawn as a ghost small `Button` with
+ * an arrow, aligned with the title's left edge.
+ */
+export declare function DetailHeaderBack({ render, ref, className, children, ...props }: DetailHeaderBackProps): React.JSX.Element;

package/dist/components/detail-header/detail-header.js

@@ -0,0 +1,92 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { ArrowNarrowLeftIcon } from "../../icons/generated/arrow-narrow-left.js";
+import { cn } from "../../lib/cn.js";
+import { buttonVariants } from "../button/button.js";
+function DetailHeader({
+  title,
+  subtitle,
+  badge,
+  back,
+  leading,
+  meta,
+  actions,
+  headingLevel = 1,
+  className,
+  children,
+  ...props
+}) {
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      "data-slot": "detail-header",
+      className: cn(
+        "flex flex-col gap-5 rounded-2xl bg-background p-5 shadow-s lg:p-6",
+        className
+      ),
+      ...props,
+      children: [
+        back,
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between lg:gap-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-4", children: [
+            leading,
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [
+                /* @__PURE__ */ jsxs(Heading, { className: "min-w-0 text-heading-h2 text-text-brand", children: [
+                  title,
+                  subtitle && /* @__PURE__ */ jsxs("span", { className: "text-text-secondary", children: [
+                    " · ",
+                    subtitle
+                  ] })
+                ] }),
+                badge
+              ] }),
+              meta && /* @__PURE__ */ jsx("p", { className: "text-body-small text-text-secondary", children: meta })
+            ] })
+          ] }),
+          actions && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "detail-header-actions",
+              className: "flex flex-wrap items-center gap-3 lg:shrink-0 lg:justify-end",
+              children: actions
+            }
+          )
+        ] }),
+        children && /* @__PURE__ */ jsx("div", { "data-slot": "detail-header-figures", className: "flex flex-col gap-3", children })
+      ]
+    }
+  );
+}
+function DetailHeaderBack({
+  render,
+  ref,
+  className,
+  children,
+  ...props
+}) {
+  return useRender({
+    render,
+    ref,
+    defaultTagName: "a",
+    props: {
+      "data-slot": "detail-header-back",
+      className: cn(
+        buttonVariants({ variant: "ghost", size: "small" }),
+        "-ml-3 self-start",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ArrowNarrowLeftIcon, {}),
+        children
+      ] }),
+      ...props
+    }
+  });
+}
+export {
+  DetailHeader,
+  DetailHeaderBack
+};
+//# sourceMappingURL=detail-header.js.map

package/dist/components/detail-header/detail-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-header.js","sources":["../../../src/components/detail-header/detail-header.tsx"],"sourcesContent":["import { useRender } from \"@base-ui/react/use-render\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { ArrowNarrowLeftIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { buttonVariants } from \"../button\";\n\nexport type DetailHeaderHeadingLevel = 1 | 2;\n\nexport interface DetailHeaderProps\n  extends Omit<ComponentProps<\"header\">, \"title\"> {\n  /** The record's name: \"Laura Gómez\", \"Clínica Dental Sonrisas\". */\n  title: ReactNode;\n  /** The scope of what is shown, next to the title in text-secondary: \"Septiembre 2026\". */\n  subtitle?: ReactNode;\n  /** Its state, a `Badge` right after the title. */\n  badge?: ReactNode;\n  /** The way back to the list: a `DetailHeaderBack`. */\n  back?: ReactNode;\n  /** An `Avatar` or `IconContainer` before the title. */\n  leading?: ReactNode;\n  /** One line of small print under the title: \"Cerrada el 2 de octubre por Víctor\". */\n  meta?: ReactNode;\n  /** The record's `Button`s, primary last. They wrap under the title on narrow screens. */\n  actions?: ReactNode;\n  /**\n   * Level of the title. Default 1: the detail page's `<h1>`. Use 2 when the page\n   * already has its `<h1>` (a `MobileHeader` with the section's name, for example).\n   */\n  headingLevel?: DetailHeaderHeadingLevel;\n  /** The figures row: `StatCard`s and `FactCard`s, laid out by the screen. */\n  children?: ReactNode;\n}\n\n/**\n * The header of a record's page (a professional's settlement, a patient, a clinic):\n * the way back, who or what it is, its state, its actions and its key figures, in one\n * raised card so the rest of the page reads as the record's content.\n *\n * - The title looks like Heading/h2 in text-brand, like `PageHeader`: it is the\n *   identity of the screen. It IS the page heading (`headingLevel` 1) unless the\n *   page already has one.\n * - `actions` sit to the right of the title from `lg` up and wrap under it below.\n *   Primary last, `outline` for the rest.\n * - The figures go in `children`: `StatCard`s for amounts and counts, a `FactCard`\n *   for the facts that decide what can be done (invoicing data, missing consent).\n *   The screen owns their grid.\n */\nexport function DetailHeader({\n  title,\n  subtitle,\n  badge,\n  back,\n  leading,\n  meta,\n  actions,\n  headingLevel = 1,\n  className,\n  children,\n  ...props\n}: DetailHeaderProps): React.JSX.Element {\n  const Heading = `h${headingLevel}` as const;\n\n  return (\n    <header\n      data-slot=\"detail-header\"\n      className={cn(\n        \"flex flex-col gap-5 rounded-2xl bg-background p-5 shadow-s lg:p-6\",\n        className,\n      )}\n      {...props}\n    >\n      {back}\n      <div className=\"flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between lg:gap-6\">\n        <div className=\"flex min-w-0 items-center gap-4\">\n          {leading}\n          <div className=\"flex min-w-0 flex-col gap-1\">\n            <div className=\"flex flex-wrap items-center gap-x-3 gap-y-1\">\n              <Heading className=\"min-w-0 text-heading-h2 text-text-brand\">\n                {title}\n                {subtitle && (\n                  <span className=\"text-text-secondary\"> · {subtitle}</span>\n                )}\n              </Heading>\n              {badge}\n            </div>\n            {meta && (\n              <p className=\"text-body-small text-text-secondary\">{meta}</p>\n            )}\n          </div>\n        </div>\n        {actions && (\n          <div\n            data-slot=\"detail-header-actions\"\n            className=\"flex flex-wrap items-center gap-3 lg:shrink-0 lg:justify-end\"\n          >\n            {actions}\n          </div>\n        )}\n      </div>\n      {children && (\n        <div data-slot=\"detail-header-figures\" className=\"flex flex-col gap-3\">\n          {children}\n        </div>\n      )}\n    </header>\n  );\n}\n\nexport interface DetailHeaderBackProps extends useRender.ComponentProps<\"a\"> {}\n\n/**\n * The link back to the list: \"Liquidaciones\". A real link (`href`, or\n * `render={<Link to=\"…\" />}` for the router) drawn as a ghost small `Button` with\n * an arrow, aligned with the title's left edge.\n */\nexport function DetailHeaderBack({\n  render,\n  ref,\n  className,\n  children,\n  ...props\n}: DetailHeaderBackProps): React.JSX.Element {\n  return useRender({\n    render,\n    ref,\n    defaultTagName: \"a\",\n    props: {\n      \"data-slot\": \"detail-header-back\",\n      className: cn(\n        buttonVariants({ variant: \"ghost\", size: \"small\" }),\n        \"-ml-3 self-start\",\n        className,\n      ),\n      children: (\n        <>\n          <ArrowNarrowLeftIcon />\n          {children}\n        </>\n      ),\n      ...props,\n    },\n  });\n}\n"],"names":[],"mappings":";;;;;AAgDO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyC;AACvC,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,MAEH,UAAA;AAAA,QAAA;AAAA,QACD,qBAAC,OAAA,EAAI,WAAU,8EACb,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,mCACZ,UAAA;AAAA,YAAA;AAAA,YACD,qBAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,cAAA,qBAAC,OAAA,EAAI,WAAU,+CACb,UAAA;AAAA,gBAAA,qBAAC,SAAA,EAAQ,WAAU,2CAChB,UAAA;AAAA,kBAAA;AAAA,kBACA,YACC,qBAAC,QAAA,EAAK,WAAU,uBAAsB,UAAA;AAAA,oBAAA;AAAA,oBAAI;AAAA,kBAAA,EAAA,CAAS;AAAA,gBAAA,GAEvD;AAAA,gBACC;AAAA,cAAA,GACH;AAAA,cACC,QACC,oBAAC,KAAA,EAAE,WAAU,uCAAuC,UAAA,KAAA,CAAK;AAAA,YAAA,EAAA,CAE7D;AAAA,UAAA,GACF;AAAA,UACC,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,aAAU;AAAA,cACV,WAAU;AAAA,cAET,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,GAEJ;AAAA,QACC,YACC,oBAAC,OAAA,EAAI,aAAU,yBAAwB,WAAU,uBAC9C,SAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AASO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA6C;AAC3C,SAAO,UAAU;AAAA,IACf;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACL,aAAa;AAAA,MACb,WAAW;AAAA,QACT,eAAe,EAAE,SAAS,SAAS,MAAM,SAAS;AAAA,QAClD;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,UACE,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,oBAAC,qBAAA,EAAoB;AAAA,QACpB;AAAA,MAAA,GACH;AAAA,MAEF,GAAG;AAAA,IAAA;AAAA,EACL,CACD;AACH;"}

package/dist/components/detail-header/index.d.ts

@@ -0,0 +1 @@
+export { DetailHeader, DetailHeaderBack, type DetailHeaderBackProps, type DetailHeaderHeadingLevel, type DetailHeaderProps, } from "./detail-header";

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

@@ -0,0 +1,34 @@
+import { type VariantProps } from "class-variance-authority";
+import type { ComponentProps, ReactNode } from "react";
+export declare const factCardVariants: (props?: ({
+    tone?: "error" | "neutral" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type FactCardTone = "neutral" | "success" | "warning" | "error";
+export interface FactCardProps extends Omit<ComponentProps<"div">, "title">, VariantProps<typeof factCardVariants> {
+    /**
+     * The fact, in a few words: "Datos de facturación completos", "Falta el NIF".
+     * On `error`, say what it blocks: "Falta el NIF: no se puede cerrar el mes".
+     */
+    title: ReactNode;
+    /** The detail: "Laura Gómez Ruiz · NIF 12345678Z · IBAN ···· 1332". */
+    description?: ReactNode;
+    /** One way to act on it, a `Link` or a small `Button`. */
+    action?: ReactNode;
+    /** Replaces the tone's icon. */
+    icon?: ReactNode;
+    /**
+     * `success` when the fact is settled, `warning` when it limits something,
+     * `error` when it blocks the main action, `neutral` for plain information.
+     */
+    tone?: FactCardTone;
+}
+/**
+ * A fact about the record that decides what can be done with it, next to its figures
+ * in a `DetailHeader`: the invoicing data before a close, a missing consent, a pending
+ * document. It stays as long as the fact does.
+ *
+ * Unlike `Banner`, it is a card among cards, not a notice across the page, and it is
+ * never dismissible. Text in text-primary on every tone; the icon carries the tone,
+ * so the meaning is in the words. `error` is announced with `role="status"`.
+ */
+export declare function FactCard({ title, description, action, icon, tone, className, ...props }: FactCardProps): React.JSX.Element;

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

@@ -0,0 +1,86 @@
+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 { cn } from "../../lib/cn.js";
+const factCardVariants = cva(
+  "flex min-w-0 items-start gap-3 rounded-xl border p-4",
+  {
+    variants: {
+      tone: {
+        neutral: "border-border-subtle bg-background",
+        success: "border-success bg-success-subtle",
+        warning: "border-warning bg-warning-subtle",
+        error: "border-error bg-error-subtle"
+      }
+    },
+    defaultVariants: {
+      tone: "neutral"
+    }
+  }
+);
+const iconClassName = {
+  neutral: "text-text-secondary",
+  success: "text-text-success",
+  warning: "text-text-warning",
+  error: "text-text-error"
+};
+const defaultIcon = {
+  neutral: /* @__PURE__ */ jsx(InfoCircleIcon, {}),
+  success: /* @__PURE__ */ jsx(CheckCircleIcon, {}),
+  warning: /* @__PURE__ */ jsx(AlertTriangleIcon, {}),
+  error: /* @__PURE__ */ jsx(AlertCircleIcon, {})
+};
+function FactCard({
+  title,
+  description,
+  action,
+  icon,
+  tone = "neutral",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "fact-card",
+      role: tone === "error" ? "status" : void 0,
+      className: cn(factCardVariants({ tone }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "mt-0.5 flex shrink-0 [&_svg]:size-icon-md",
+              iconClassName[tone]
+            ),
+            children: icon ?? defaultIcon[tone]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-label-strong text-text-primary", children: title }),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-body-small",
+                tone === "neutral" ? "text-text-secondary" : "text-text-primary"
+              ),
+              children: description
+            }
+          ),
+          action && /* @__PURE__ */ jsx("div", { className: "pt-1", children: action })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  FactCard,
+  factCardVariants
+};
+//# sourceMappingURL=fact-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fact-card.js","sources":["../../../src/components/fact-card/fact-card.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} from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\n\nexport const factCardVariants = cva(\n  \"flex min-w-0 items-start gap-3 rounded-xl border p-4\",\n  {\n    variants: {\n      tone: {\n        neutral: \"border-border-subtle bg-background\",\n        success: \"border-success bg-success-subtle\",\n        warning: \"border-warning bg-warning-subtle\",\n        error: \"border-error bg-error-subtle\",\n      },\n    },\n    defaultVariants: {\n      tone: \"neutral\",\n    },\n  },\n);\n\nconst iconClassName: Record<FactCardTone, string> = {\n  neutral: \"text-text-secondary\",\n  success: \"text-text-success\",\n  warning: \"text-text-warning\",\n  error: \"text-text-error\",\n};\n\nconst defaultIcon: Record<FactCardTone, ReactNode> = {\n  neutral: <InfoCircleIcon />,\n  success: <CheckCircleIcon />,\n  warning: <AlertTriangleIcon />,\n  error: <AlertCircleIcon />,\n};\n\nexport type FactCardTone = \"neutral\" | \"success\" | \"warning\" | \"error\";\n\nexport interface FactCardProps\n  extends Omit<ComponentProps<\"div\">, \"title\">,\n    VariantProps<typeof factCardVariants> {\n  /**\n   * The fact, in a few words: \"Datos de facturación completos\", \"Falta el NIF\".\n   * On `error`, say what it blocks: \"Falta el NIF: no se puede cerrar el mes\".\n   */\n  title: ReactNode;\n  /** The detail: \"Laura Gómez Ruiz · NIF 12345678Z · IBAN ···· 1332\". */\n  description?: ReactNode;\n  /** One way to act on it, a `Link` or a small `Button`. */\n  action?: ReactNode;\n  /** Replaces the tone's icon. */\n  icon?: ReactNode;\n  /**\n   * `success` when the fact is settled, `warning` when it limits something,\n   * `error` when it blocks the main action, `neutral` for plain information.\n   */\n  tone?: FactCardTone;\n}\n\n/**\n * A fact about the record that decides what can be done with it, next to its figures\n * in a `DetailHeader`: the invoicing data before a close, a missing consent, a pending\n * document. It stays as long as the fact does.\n *\n * Unlike `Banner`, it is a card among cards, not a notice across the page, and it is\n * never dismissible. Text in text-primary on every tone; the icon carries the tone,\n * so the meaning is in the words. `error` is announced with `role=\"status\"`.\n */\nexport function FactCard({\n  title,\n  description,\n  action,\n  icon,\n  tone = \"neutral\",\n  className,\n  ...props\n}: FactCardProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"fact-card\"\n      role={tone === \"error\" ? \"status\" : undefined}\n      className={cn(factCardVariants({ tone }), className)}\n      {...props}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          \"mt-0.5 flex shrink-0 [&_svg]:size-icon-md\",\n          iconClassName[tone],\n        )}\n      >\n        {icon ?? defaultIcon[tone]}\n      </span>\n      <div className=\"flex min-w-0 flex-col gap-1\">\n        <p className=\"text-label-strong text-text-primary\">{title}</p>\n        {description && (\n          <p\n            className={cn(\n              \"text-body-small\",\n              tone === \"neutral\" ? \"text-text-secondary\" : \"text-text-primary\",\n            )}\n          >\n            {description}\n          </p>\n        )}\n        {action && <div className=\"pt-1\">{action}</div>}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAWO,MAAM,mBAAmB;AAAA,EAC9B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAEA,MAAM,gBAA8C;AAAA,EAClD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,cAA+C;AAAA,EACnD,6BAAU,gBAAA,EAAe;AAAA,EACzB,6BAAU,iBAAA,EAAgB;AAAA,EAC1B,6BAAU,mBAAA,EAAkB;AAAA,EAC5B,2BAAQ,iBAAA,CAAA,CAAgB;AAC1B;AAkCO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAqC;AACnC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAM,SAAS,UAAU,WAAW;AAAA,MACpC,WAAW,GAAG,iBAAiB,EAAE,KAAA,CAAM,GAAG,SAAS;AAAA,MAClD,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA,cAAc,IAAI;AAAA,YAAA;AAAA,YAGnB,UAAA,QAAQ,YAAY,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAE3B,qBAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,UAAA,oBAAC,KAAA,EAAE,WAAU,uCAAuC,UAAA,OAAM;AAAA,UACzD,eACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,SAAS,YAAY,wBAAwB;AAAA,cAAA;AAAA,cAG9C,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,UAAU,oBAAC,OAAA,EAAI,WAAU,QAAQ,UAAA,OAAA,CAAO;AAAA,QAAA,EAAA,CAC3C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1 @@
+export { FactCard, type FactCardProps, type FactCardTone, factCardVariants, } from "./fact-card";

package/dist/components/input/control-styles.d.ts

@@ -1,5 +1,5 @@
 /** Border, radius, fill and text colour of the box. */
-export declare const controlBox = "w-full min-w-0 rounded-md border border-border-input bg-background text-text-primary ring-1 ring-transparent ring-inset transition-[border-color,box-shadow]";
+export declare const controlBox = "w-full min-w-0 rounded-md border border-border bg-background text-text-primary shadow-xs ring-1 ring-transparent ring-inset transition-[border-color,box-shadow]";
 /** One-line content: 12px side padding, 8px between icon and text, Label/Default (14). */
 export declare const controlRow = "flex items-center gap-2 px-3 text-label-default";
 /** control-md (40) and control-sm (36): the same tokens as Button, so they line up. */

package/dist/components/input/control-styles.js

@@ -1,4 +1,4 @@
-const controlBox = "w-full min-w-0 rounded-md border border-border-input bg-background text-text-primary ring-1 ring-transparent ring-inset transition-[border-color,box-shadow]";
+const controlBox = "w-full min-w-0 rounded-md border border-border bg-background text-text-primary shadow-xs ring-1 ring-transparent ring-inset transition-[border-color,box-shadow]";
 const controlRow = "flex items-center gap-2 px-3 text-label-default";
 const controlHeight = {
   default: "h-control-md",
@@ -7,17 +7,17 @@ const controlHeight = {
 const wrappedControlStates = [
   "has-[[aria-invalid=true]]:border-error has-[[aria-invalid=true]]:ring-error",
   "has-[:focus:not(button)]:border-border-focus has-[:focus:not(button)]:ring-border-focus",
-  "has-[:is(input,select):disabled]:cursor-not-allowed has-[:is(input,select):disabled]:border-border has-[:is(input,select):disabled]:bg-surface has-[:is(input,select):disabled]:text-text-disabled"
+  "has-[:is(input,select):disabled]:cursor-not-allowed has-[:is(input,select):disabled]:border-border-subtle has-[:is(input,select):disabled]:bg-surface has-[:is(input,select):disabled]:text-text-disabled has-[:is(input,select):disabled]:shadow-none"
 ].join(" ");
 const selfControlStates = [
   "outline-none focus:border-border-focus focus:ring-border-focus",
   "aria-invalid:not-focus:border-error aria-invalid:not-focus:ring-error",
-  "disabled:cursor-not-allowed disabled:border-border disabled:bg-surface disabled:text-text-disabled"
+  "disabled:cursor-not-allowed disabled:border-border-subtle disabled:bg-surface disabled:text-text-disabled disabled:shadow-none"
 ].join(" ");
 const triggerControlStates = [
   "outline-none focus:border-border-focus focus:ring-border-focus data-popup-open:border-border-focus data-popup-open:ring-border-focus",
   "aria-invalid:not-focus:not-data-popup-open:border-error aria-invalid:not-focus:not-data-popup-open:ring-error",
-  "data-disabled:cursor-not-allowed data-disabled:border-border data-disabled:bg-surface data-disabled:text-text-disabled"
+  "data-disabled:cursor-not-allowed data-disabled:border-border-subtle data-disabled:bg-surface data-disabled:text-text-disabled data-disabled:shadow-none"
 ].join(" ");
 const controlPlaceholder = "placeholder:text-text-secondary disabled:placeholder:text-text-disabled";
 const controlIcon = "flex shrink-0 text-text-secondary [&_svg]:size-icon-sm group-has-[:is(input,select):disabled]/control:text-text-disabled group-data-disabled/control:text-text-disabled";

package/dist/components/input/control-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-styles.js","sources":["../../../src/components/input/control-styles.ts"],"sourcesContent":["/*\n * The box shared by Input, Textarea, Select, NativeSelect and PhoneInput. Figma draws\n * them as the same object on purpose: same radius, padding, border and states, so a\n * field and a dropdown in the same row only differ by the chevron.\n *\n * Focus and Error are a 2px border (border-thick), not just a colour change. The\n * second pixel is an inset ring, so the content never moves when the state changes.\n * Focus wins over Error: the message under the field keeps saying what is wrong.\n */\n\n/** Border, radius, fill and text colour of the box. */\nexport const controlBox =\n  \"w-full min-w-0 rounded-md border border-border-input bg-background text-text-primary ring-1 ring-transparent ring-inset transition-[border-color,box-shadow]\";\n\n/** One-line content: 12px side padding, 8px between icon and text, Label/Default (14). */\nexport const controlRow = \"flex items-center gap-2 px-3 text-label-default\";\n\n/** control-md (40) and control-sm (36): the same tokens as Button, so they line up. */\nexport const controlHeight = {\n  default: \"h-control-md\",\n  small: \"h-control-sm\",\n} as const;\n\nexport type ControlSize = keyof typeof controlHeight;\n\n/**\n * States for a box that WRAPS the real control (Input, NativeSelect, the phone\n * prefix). Read from the control inside: `aria-invalid` (set by `invalid` or by\n * Field), `:focus` and `:disabled` (of the input/select only: a native select's\n * placeholder `<option disabled>` must not grey the box out). Buttons inside the box\n * (reveal password, clear) keep their own focus ring and don't light the box up.\n */\nexport const wrappedControlStates = [\n  \"has-[[aria-invalid=true]]:border-error has-[[aria-invalid=true]]:ring-error\",\n  \"has-[:focus:not(button)]:border-border-focus has-[:focus:not(button)]:ring-border-focus\",\n  \"has-[:is(input,select):disabled]:cursor-not-allowed has-[:is(input,select):disabled]:border-border has-[:is(input,select):disabled]:bg-surface has-[:is(input,select):disabled]:text-text-disabled\",\n].join(\" \");\n\n/** States for a box that IS the control (Textarea). */\nexport const selfControlStates = [\n  \"outline-none focus:border-border-focus focus:ring-border-focus\",\n  \"aria-invalid:not-focus:border-error aria-invalid:not-focus:ring-error\",\n  \"disabled:cursor-not-allowed disabled:border-border disabled:bg-surface disabled:text-text-disabled\",\n].join(\" \");\n\n/**\n * States for a button box (Select trigger). It keeps the focus border while its popup\n * is open, because focus is inside the list then.\n */\nexport const triggerControlStates = [\n  \"outline-none focus:border-border-focus focus:ring-border-focus data-popup-open:border-border-focus data-popup-open:ring-border-focus\",\n  \"aria-invalid:not-focus:not-data-popup-open:border-error aria-invalid:not-focus:not-data-popup-open:ring-error\",\n  \"data-disabled:cursor-not-allowed data-disabled:border-border data-disabled:bg-surface data-disabled:text-text-disabled\",\n].join(\" \");\n\n/** Placeholder: the same Value node in text-secondary, never a variant. */\nexport const controlPlaceholder =\n  \"placeholder:text-text-secondary disabled:placeholder:text-text-disabled\";\n\n/**\n * Leading / trailing icon slot: 16px in text-secondary (5.07:1), disabled with the\n * box. The box carries `group/control`.\n */\nexport const controlIcon =\n  \"flex shrink-0 text-text-secondary [&_svg]:size-icon-sm group-has-[:is(input,select):disabled]/control:text-text-disabled group-data-disabled/control:text-text-disabled\";\n\n/** Small icon button inside the box (reveal password, clear). 44px hit area. */\nexport const controlAction =\n  \"focus-ring touch-target -me-1 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm text-text-secondary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:text-text-disabled [&_svg]:size-icon-sm\";\n"],"names":[],"mappings":"AAWO,MAAM,aACX;AAGK,MAAM,aAAa;AAGnB,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AACT;AAWO,MAAM,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAGH,MAAM,oBAAoB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAMH,MAAM,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAGH,MAAM,qBACX;AAMK,MAAM,cACX;AAGK,MAAM,gBACX;"}
+{"version":3,"file":"control-styles.js","sources":["../../../src/components/input/control-styles.ts"],"sourcesContent":["/*\n * The box shared by Input, Textarea, Select, NativeSelect and PhoneInput. Figma draws\n * them as the same object on purpose: same radius, padding, border and states, so a\n * field and a dropdown in the same row only differ by the chevron.\n *\n * Focus and Error are a 2px border (border-thick), not just a colour change. The\n * second pixel is an inset ring, so the content never moves when the state changes.\n * Focus wins over Error: the message under the field keeps saying what is wrong.\n */\n\n/** Border, radius, fill and text colour of the box. */\nexport const controlBox =\n  \"w-full min-w-0 rounded-md border border-border bg-background text-text-primary shadow-xs ring-1 ring-transparent ring-inset transition-[border-color,box-shadow]\";\n\n/** One-line content: 12px side padding, 8px between icon and text, Label/Default (14). */\nexport const controlRow = \"flex items-center gap-2 px-3 text-label-default\";\n\n/** control-md (40) and control-sm (36): the same tokens as Button, so they line up. */\nexport const controlHeight = {\n  default: \"h-control-md\",\n  small: \"h-control-sm\",\n} as const;\n\nexport type ControlSize = keyof typeof controlHeight;\n\n/**\n * States for a box that WRAPS the real control (Input, NativeSelect, the phone\n * prefix). Read from the control inside: `aria-invalid` (set by `invalid` or by\n * Field), `:focus` and `:disabled` (of the input/select only: a native select's\n * placeholder `<option disabled>` must not grey the box out). Buttons inside the box\n * (reveal password, clear) keep their own focus ring and don't light the box up.\n */\nexport const wrappedControlStates = [\n  \"has-[[aria-invalid=true]]:border-error has-[[aria-invalid=true]]:ring-error\",\n  \"has-[:focus:not(button)]:border-border-focus has-[:focus:not(button)]:ring-border-focus\",\n  \"has-[:is(input,select):disabled]:cursor-not-allowed has-[:is(input,select):disabled]:border-border-subtle has-[:is(input,select):disabled]:bg-surface has-[:is(input,select):disabled]:text-text-disabled has-[:is(input,select):disabled]:shadow-none\",\n].join(\" \");\n\n/** States for a box that IS the control (Textarea). */\nexport const selfControlStates = [\n  \"outline-none focus:border-border-focus focus:ring-border-focus\",\n  \"aria-invalid:not-focus:border-error aria-invalid:not-focus:ring-error\",\n  \"disabled:cursor-not-allowed disabled:border-border-subtle disabled:bg-surface disabled:text-text-disabled disabled:shadow-none\",\n].join(\" \");\n\n/**\n * States for a button box (Select trigger). It keeps the focus border while its popup\n * is open, because focus is inside the list then.\n */\nexport const triggerControlStates = [\n  \"outline-none focus:border-border-focus focus:ring-border-focus data-popup-open:border-border-focus data-popup-open:ring-border-focus\",\n  \"aria-invalid:not-focus:not-data-popup-open:border-error aria-invalid:not-focus:not-data-popup-open:ring-error\",\n  \"data-disabled:cursor-not-allowed data-disabled:border-border-subtle data-disabled:bg-surface data-disabled:text-text-disabled data-disabled:shadow-none\",\n].join(\" \");\n\n/** Placeholder: the same Value node in text-secondary, never a variant. */\nexport const controlPlaceholder =\n  \"placeholder:text-text-secondary disabled:placeholder:text-text-disabled\";\n\n/**\n * Leading / trailing icon slot: 16px in text-secondary (5.07:1), disabled with the\n * box. The box carries `group/control`.\n */\nexport const controlIcon =\n  \"flex shrink-0 text-text-secondary [&_svg]:size-icon-sm group-has-[:is(input,select):disabled]/control:text-text-disabled group-data-disabled/control:text-text-disabled\";\n\n/** Small icon button inside the box (reveal password, clear). 44px hit area. */\nexport const controlAction =\n  \"focus-ring touch-target -me-1 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm text-text-secondary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:text-text-disabled [&_svg]:size-icon-sm\";\n"],"names":[],"mappings":"AAWO,MAAM,aACX;AAGK,MAAM,aAAa;AAGnB,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AACT;AAWO,MAAM,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAGH,MAAM,oBAAoB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAMH,MAAM,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAGH,MAAM,qBACX;AAMK,MAAM,cACX;AAGK,MAAM,gBACX;"}

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

@@ -0,0 +1 @@
+export { StatCard, type StatCardProps, statCardVariants } from "./stat-card";

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

@@ -0,0 +1,31 @@
+import { type VariantProps } from "class-variance-authority";
+import type { ComponentProps, ReactNode } from "react";
+import { type IconContainerTone } from "../icon-container";
+export declare const statCardVariants: (props?: ({
+    highlighted?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface StatCardProps extends Omit<ComponentProps<"div">, "children">, VariantProps<typeof statCardVariants> {
+    /** What the figure is: "A pagar este mes", "Operaciones". */
+    label: ReactNode;
+    /** The figure, already formatted by the app: "4.215,00 €", "58". */
+    value: ReactNode;
+    /** Small print under the figure: "58 operaciones", "Tienen operaciones sin tarifa". */
+    detail?: ReactNode;
+    /** A MediCore icon, drawn in an `IconContainer`. */
+    icon: ReactNode;
+    /** Tone of the icon container. Semantic: `error` only when the figure is a problem. */
+    tone?: IconContainerTone;
+    /** The one figure the screen is about ("Total a pagar"): brand fill and brand border. */
+    highlighted?: boolean;
+}
+/**
+ * A key figure of an admin screen: icon, label and value, with optional small print.
+ * Four in a row sum up a list; three in a `DetailHeader` sum up a record.
+ *
+ * - The text is a `<dl>`: the label is the term and the figure its value.
+ * - The app formats the value (es-ES, symbol after: "4.215,00 €"); the card doesn't.
+ * - Text stays in text-primary on the highlighted fill (text-secondary is 4.44:1 there).
+ * - Only one card per row is `highlighted`, the one that answers the screen's question.
+ * - Not for marketing figures: those are `StatTile`.
+ */
+export declare function StatCard({ label, value, detail, icon, tone, highlighted, className, ...props }: StatCardProps): React.JSX.Element;

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

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/cn.js";
+import { IconContainer } from "../icon-container/icon-container.js";
+const statCardVariants = cva(
+  "flex min-w-0 items-start gap-3 rounded-xl p-4",
+  {
+    variants: {
+      highlighted: {
+        true: "border border-brand bg-brand-subtle",
+        false: "bg-background shadow-s"
+      }
+    },
+    defaultVariants: {
+      highlighted: false
+    }
+  }
+);
+function StatCard({
+  label,
+  value,
+  detail,
+  icon,
+  tone = "neutral",
+  highlighted = false,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "stat-card",
+      className: cn(statCardVariants({ highlighted }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          IconContainer,
+          {
+            icon,
+            tone: highlighted ? "brand" : tone,
+            size: 40,
+            className: "shrink-0"
+          }
+        ),
+        /* @__PURE__ */ jsxs("dl", { className: "flex min-w-0 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx(
+            "dt",
+            {
+              className: cn(
+                "text-body-small",
+                highlighted ? "text-text-primary" : "text-text-secondary"
+              ),
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "dd",
+            {
+              className: cn(
+                "text-heading-h3 tabular-nums",
+                highlighted ? "text-text-brand" : "text-text-primary"
+              ),
+              children: value
+            }
+          ),
+          detail && /* @__PURE__ */ jsx(
+            "dd",
+            {
+              className: cn(
+                "text-body-small",
+                highlighted ? "text-text-primary" : "text-text-secondary"
+              ),
+              children: detail
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  StatCard,
+  statCardVariants
+};
+//# sourceMappingURL=stat-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stat-card.js","sources":["../../../src/components/stat-card/stat-card.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { IconContainer, type IconContainerTone } from \"../icon-container\";\n\nexport const statCardVariants = cva(\n  \"flex min-w-0 items-start gap-3 rounded-xl p-4\",\n  {\n    variants: {\n      highlighted: {\n        true: \"border border-brand bg-brand-subtle\",\n        false: \"bg-background shadow-s\",\n      },\n    },\n    defaultVariants: {\n      highlighted: false,\n    },\n  },\n);\n\nexport interface StatCardProps\n  extends Omit<ComponentProps<\"div\">, \"children\">,\n    VariantProps<typeof statCardVariants> {\n  /** What the figure is: \"A pagar este mes\", \"Operaciones\". */\n  label: ReactNode;\n  /** The figure, already formatted by the app: \"4.215,00 €\", \"58\". */\n  value: ReactNode;\n  /** Small print under the figure: \"58 operaciones\", \"Tienen operaciones sin tarifa\". */\n  detail?: ReactNode;\n  /** A MediCore icon, drawn in an `IconContainer`. */\n  icon: ReactNode;\n  /** Tone of the icon container. Semantic: `error` only when the figure is a problem. */\n  tone?: IconContainerTone;\n  /** The one figure the screen is about (\"Total a pagar\"): brand fill and brand border. */\n  highlighted?: boolean;\n}\n\n/**\n * A key figure of an admin screen: icon, label and value, with optional small print.\n * Four in a row sum up a list; three in a `DetailHeader` sum up a record.\n *\n * - The text is a `<dl>`: the label is the term and the figure its value.\n * - The app formats the value (es-ES, symbol after: \"4.215,00 €\"); the card doesn't.\n * - Text stays in text-primary on the highlighted fill (text-secondary is 4.44:1 there).\n * - Only one card per row is `highlighted`, the one that answers the screen's question.\n * - Not for marketing figures: those are `StatTile`.\n */\nexport function StatCard({\n  label,\n  value,\n  detail,\n  icon,\n  tone = \"neutral\",\n  highlighted = false,\n  className,\n  ...props\n}: StatCardProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"stat-card\"\n      className={cn(statCardVariants({ highlighted }), className)}\n      {...props}\n    >\n      <IconContainer\n        icon={icon}\n        tone={highlighted ? \"brand\" : tone}\n        size={40}\n        className=\"shrink-0\"\n      />\n      <dl className=\"flex min-w-0 flex-col gap-0.5\">\n        <dt\n          className={cn(\n            \"text-body-small\",\n            highlighted ? \"text-text-primary\" : \"text-text-secondary\",\n          )}\n        >\n          {label}\n        </dt>\n        <dd\n          className={cn(\n            \"text-heading-h3 tabular-nums\",\n            highlighted ? \"text-text-brand\" : \"text-text-primary\",\n          )}\n        >\n          {value}\n        </dd>\n        {detail && (\n          <dd\n            className={cn(\n              \"text-body-small\",\n              highlighted ? \"text-text-primary\" : \"text-text-secondary\",\n            )}\n          >\n            {detail}\n          </dd>\n        )}\n      </dl>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAMO,MAAM,mBAAmB;AAAA,EAC9B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ;AA6BO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,GAAqC;AACnC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iBAAiB,EAAE,YAAA,CAAa,GAAG,SAAS;AAAA,MACzD,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,MAAM,cAAc,UAAU;AAAA,YAC9B,MAAM;AAAA,YACN,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ,qBAAC,MAAA,EAAG,WAAU,iCACZ,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,cAAc,sBAAsB;AAAA,cAAA;AAAA,cAGrC,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,cAAc,oBAAoB;AAAA,cAAA;AAAA,cAGnC,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEF,UACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,cAAc,sBAAsB;AAAA,cAAA;AAAA,cAGrC,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/table/table.d.ts

@@ -47,7 +47,7 @@ export interface TableRowProps extends ComponentProps<"tr"> {
  * A row. Figma has no Table/Row: a row is just cells as wide as their headers. If a
  * row opens a detail, put a link in its first cell — don't make the `<tr>` clickable.
  */
-export declare function TableRow(props: TableRowProps): React.JSX.Element;
+export declare function TableRow({ className, ...props }: TableRowProps): React.JSX.Element;
 export declare const tableHeadVariants: (props?: ({
     type?: "text" | "numeric" | "action" | "badge" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/table/table.js

@@ -43,7 +43,7 @@ function Table({
       "data-slot": "table-container",
       ...scrollRegion,
       className: cn(
-        "relative w-full overflow-x-auto focus-ring",
+        "relative w-full overflow-x-auto rounded-xl border border-border-subtle bg-background focus-ring",
         containerClassName
       ),
       children: /* @__PURE__ */ jsx(
@@ -68,8 +68,21 @@ function TableHeader(props) {
 function TableBody(props) {
   return /* @__PURE__ */ jsx("tbody", { "data-slot": "table-body", ...props });
 }
-function TableRow(props) {
-  return /* @__PURE__ */ jsx("tr", { "data-slot": "table-row", ...props });
+function TableRow({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn(
+        "transition-colors [tbody_&:last-child>td]:border-b-0 [tbody_&:hover>td]:bg-surface",
+        className
+      ),
+      ...props
+    }
+  );
 }
 const alignment = {
   text: "text-left",
@@ -79,7 +92,7 @@ const alignment = {
   action: "w-0 whitespace-nowrap text-center"
 };
 const tableHeadVariants = cva(
-  "h-12 border-b border-border-subtle bg-surface px-4 align-middle text-label-strong text-text-secondary data-sorted:text-text-primary",
+  "h-11 border-b border-border-subtle bg-surface px-4 align-middle text-label-small text-text-secondary first:rounded-tl-xl last:rounded-tr-xl data-sorted:text-label-strong data-sorted:text-text-primary",
   { variants: { type: alignment }, defaultVariants: { type: "text" } }
 );
 function TableHead({
@@ -135,7 +148,7 @@ function TableHead({
   );
 }
 const tableCellVariants = cva(
-  "h-16 border-b border-border-subtle bg-background px-4 align-middle text-body-small text-text-primary",
+  "h-14 border-b border-border-subtle bg-background px-4 align-middle text-body-small text-text-primary transition-colors",
   {
     variants: {
       type: {

package/dist/components/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../../src/components/table/table.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport {\n  type ComponentProps,\n  type MouseEventHandler,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { ChevronDownIcon, ChevronUpIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\n\n/** The type decides the alignment: text and badge left, numbers right, action centred. */\nexport type TableCellType = \"text\" | \"numeric\" | \"badge\" | \"action\";\n\nexport type TableSort = \"none\" | \"ascending\" | \"descending\";\n\n/**\n * Maps a headless library's sort state to `TableSort`, e.g. TanStack's\n * `column.getIsSorted()` (`false | \"asc\" | \"desc\"`).\n */\nexport function tableSortFrom(value: false | \"asc\" | \"desc\"): TableSort {\n  if (value === \"asc\") return \"ascending\";\n  if (value === \"desc\") return \"descending\";\n  return \"none\";\n}\n\nexport interface TableProps extends ComponentProps<\"table\"> {\n  /**\n   * Keeps the first column (usually the name or the date) in place while the rest\n   * scrolls sideways. For dense admin tables that still have to work on a tablet.\n   */\n  stickyFirstColumn?: boolean;\n  /** Classes for the scroll container around the `<table>` (border, radius, max height…). */\n  containerClassName?: string;\n}\n\n/**\n * Semantic, composable table: `Table` › `TableHeader` / `TableBody` › `TableRow` ›\n * `TableHead` / `TableCell`. Plain elements with styles, so a headless library\n * (`@tanstack/react-table`) can drive it: map `headerGroups` to `TableRow` +\n * `TableHead` (`sort={tableSortFrom(column.getIsSorted())}`,\n * `onSort={column.getToggleSortingHandler()}`)\n * and `rows` to `TableRow` + `TableCell`.\n *\n * - Name it: `aria-label` (\"Facturas\") or `aria-labelledby` the section title.\n * - Desktop pattern (1024+). On mobile a six-column table doesn't fit: render each\n *   row as a `ListRow` (title = concept, subtitle = date · specialty, trailing =\n *   amount and action) or a stacked row with the actions in a menu, and switch\n *   with `hidden lg:block` / `lg:hidden`. Horizontal scroll (automatic, with\n *   `stickyFirstColumn` if needed) is the fallback for in-between widths, not the\n *   mobile design.\n * - When it overflows, the scroll container becomes focusable so it can be scrolled\n *   with the keyboard.\n */\nexport function Table({\n  stickyFirstColumn = false,\n  containerClassName,\n  className,\n  ...props\n}: TableProps): React.JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [scrollable, setScrollable] = useState(false);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const update = (): void =>\n      setScrollable(container.scrollWidth > container.clientWidth);\n    update();\n\n    const observer = new ResizeObserver(update);\n    observer.observe(container);\n    if (container.firstElementChild) {\n      observer.observe(container.firstElementChild);\n    }\n    return () => observer.disconnect();\n  }, []);\n\n  // Only while it overflows: then it's a named region reachable with Tab, so it\n  // can be scrolled with the arrow keys (WCAG 2.1.1). Otherwise it's a plain box.\n  const scrollRegion = scrollable\n    ? {\n        role: \"region\",\n        tabIndex: 0,\n        \"aria-label\": props[\"aria-label\"],\n        \"aria-labelledby\": props[\"aria-labelledby\"],\n      }\n    : {};\n\n  return (\n    <div\n      ref={containerRef}\n      data-slot=\"table-container\"\n      {...scrollRegion}\n      className={cn(\n        \"relative w-full overflow-x-auto focus-ring\",\n        containerClassName,\n      )}\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\n          // Separate borders so they travel with sticky cells.\n          \"w-full border-separate border-spacing-0 text-left\",\n          stickyFirstColumn &&\n            \"[&_tr>:first-child]:sticky [&_tr>:first-child]:left-0 [&_tr>:first-child]:z-10 [&_tr>:first-child]:shadow-[inset_-1px_0_0_0_var(--color-border-subtle)]\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport interface TableHeaderProps extends ComponentProps<\"thead\"> {}\n\nexport function TableHeader(props: TableHeaderProps): React.JSX.Element {\n  return <thead data-slot=\"table-header\" {...props} />;\n}\n\nexport interface TableBodyProps extends ComponentProps<\"tbody\"> {}\n\nexport function TableBody(props: TableBodyProps): React.JSX.Element {\n  return <tbody data-slot=\"table-body\" {...props} />;\n}\n\nexport interface TableRowProps extends ComponentProps<\"tr\"> {}\n\n/**\n * A row. Figma has no Table/Row: a row is just cells as wide as their headers. If a\n * row opens a detail, put a link in its first cell — don't make the `<tr>` clickable.\n */\nexport function TableRow(props: TableRowProps): React.JSX.Element {\n  return <tr data-slot=\"table-row\" {...props} />;\n}\n\nconst alignment = {\n  text: \"text-left\",\n  numeric: \"text-right\",\n  badge: \"text-left\",\n  // Shrinks to its buttons.\n  action: \"w-0 whitespace-nowrap text-center\",\n} satisfies Record<TableCellType, string>;\n\nexport const tableHeadVariants = cva(\n  \"h-12 border-b border-border-subtle bg-surface px-4 align-middle text-label-strong text-text-secondary data-sorted:text-text-primary\",\n  { variants: { type: alignment }, defaultVariants: { type: \"text\" } },\n);\n\nexport interface TableHeadProps extends ComponentProps<\"th\"> {\n  /** Same as the column's cells, so the header lines up with them. */\n  type?: TableCellType;\n  /**\n   * Current order of the column. The sorted column is recognised by its chevron,\n   * not only by the darker label.\n   */\n  sort?: TableSort;\n  /**\n   * Makes the column sortable: the label becomes a `<button>` inside the `<th>`,\n   * which carries `aria-sort`. Cycling the order is up to the app.\n   */\n  onSort?: MouseEventHandler<HTMLButtonElement>;\n}\n\n/** Column header (`<th scope=\"col\">`). Sortable when it gets `onSort`. */\nexport function TableHead({\n  type = \"text\",\n  sort = \"none\",\n  onSort,\n  className,\n  children,\n  ...props\n}: TableHeadProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const descriptionId = useId();\n  const sorted = sort !== \"none\";\n  const sortLabel = {\n    none: labels.notSorted,\n    ascending: labels.sortAscending,\n    descending: labels.sortDescending,\n  }[sort];\n\n  return (\n    <th\n      data-slot=\"table-head\"\n      scope=\"col\"\n      aria-sort={sorted ? sort : undefined}\n      data-sorted={sorted || undefined}\n      className={cn(tableHeadVariants({ type }), onSort && \"p-0\", className)}\n      {...props}\n    >\n      {onSort ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          // The state is announced when the button gets focus, where aria-sort on\n          // the <th> isn't always read.\n          aria-describedby={descriptionId}\n          className={cn(\n            \"flex h-12 w-full cursor-pointer items-center gap-1 whitespace-nowrap px-4\",\n            \"transition-colors hover:text-text-primary\",\n            \"focus-ring focus-visible:-outline-offset-2\",\n            // Numbers: the chevron goes on the inside so the label stays aligned\n            // with the column.\n            type === \"numeric\"\n              ? \"flex-row-reverse\"\n              : type === \"action\"\n                ? \"justify-center\"\n                : \"justify-start\",\n          )}\n        >\n          <span>{children}</span>\n          {sort === \"ascending\" && <ChevronUpIcon size=\"sm\" />}\n          {sort === \"descending\" && <ChevronDownIcon size=\"sm\" />}\n        </button>\n      ) : (\n        children\n      )}\n      {onSort && (\n        <span id={descriptionId} hidden>\n          {sortLabel}\n        </span>\n      )}\n    </th>\n  );\n}\n\nexport const tableCellVariants = cva(\n  \"h-16 border-b border-border-subtle bg-background px-4 align-middle text-body-small text-text-primary\",\n  {\n    variants: {\n      type: {\n        ...alignment,\n        // Tabular figures so decimals line up and amounts can be compared.\n        numeric: \"whitespace-nowrap text-right text-label-strong tabular-nums\",\n      },\n    },\n    defaultVariants: { type: \"text\" },\n  },\n);\n\nexport interface TableCellProps extends ComponentProps<\"td\"> {\n  /**\n   * - `text`: left.\n   * - `numeric`: right, tabular figures. The value comes formatted by the app in\n   *   es-ES (\"29,00 €\", symbol after), the cell doesn't format.\n   * - `badge`: left, a `Badge`.\n   * - `action`: centred, a ghost small icon button whose `aria-label` carries the\n   *   row's context (\"Descargar factura del 5 de enero\") — twenty \"Descargar\"\n   *   buttons are indistinguishable for a screen reader.\n   */\n  type?: TableCellType;\n}\n\nexport function TableCell({\n  type,\n  className,\n  ...props\n}: TableCellProps): React.JSX.Element {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(tableCellVariants({ type }), className)}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"table.js","sources":["../../../src/components/table/table.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport {\n  type ComponentProps,\n  type MouseEventHandler,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { ChevronDownIcon, ChevronUpIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\n\n/** The type decides the alignment: text and badge left, numbers right, action centred. */\nexport type TableCellType = \"text\" | \"numeric\" | \"badge\" | \"action\";\n\nexport type TableSort = \"none\" | \"ascending\" | \"descending\";\n\n/**\n * Maps a headless library's sort state to `TableSort`, e.g. TanStack's\n * `column.getIsSorted()` (`false | \"asc\" | \"desc\"`).\n */\nexport function tableSortFrom(value: false | \"asc\" | \"desc\"): TableSort {\n  if (value === \"asc\") return \"ascending\";\n  if (value === \"desc\") return \"descending\";\n  return \"none\";\n}\n\nexport interface TableProps extends ComponentProps<\"table\"> {\n  /**\n   * Keeps the first column (usually the name or the date) in place while the rest\n   * scrolls sideways. For dense admin tables that still have to work on a tablet.\n   */\n  stickyFirstColumn?: boolean;\n  /** Classes for the scroll container around the `<table>` (border, radius, max height…). */\n  containerClassName?: string;\n}\n\n/**\n * Semantic, composable table: `Table` › `TableHeader` / `TableBody` › `TableRow` ›\n * `TableHead` / `TableCell`. Plain elements with styles, so a headless library\n * (`@tanstack/react-table`) can drive it: map `headerGroups` to `TableRow` +\n * `TableHead` (`sort={tableSortFrom(column.getIsSorted())}`,\n * `onSort={column.getToggleSortingHandler()}`)\n * and `rows` to `TableRow` + `TableCell`.\n *\n * - Name it: `aria-label` (\"Facturas\") or `aria-labelledby` the section title.\n * - Desktop pattern (1024+). On mobile a six-column table doesn't fit: render each\n *   row as a `ListRow` (title = concept, subtitle = date · specialty, trailing =\n *   amount and action) or a stacked row with the actions in a menu, and switch\n *   with `hidden lg:block` / `lg:hidden`. Horizontal scroll (automatic, with\n *   `stickyFirstColumn` if needed) is the fallback for in-between widths, not the\n *   mobile design.\n * - When it overflows, the scroll container becomes focusable so it can be scrolled\n *   with the keyboard.\n */\nexport function Table({\n  stickyFirstColumn = false,\n  containerClassName,\n  className,\n  ...props\n}: TableProps): React.JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [scrollable, setScrollable] = useState(false);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const update = (): void =>\n      setScrollable(container.scrollWidth > container.clientWidth);\n    update();\n\n    const observer = new ResizeObserver(update);\n    observer.observe(container);\n    if (container.firstElementChild) {\n      observer.observe(container.firstElementChild);\n    }\n    return () => observer.disconnect();\n  }, []);\n\n  // Only while it overflows: then it's a named region reachable with Tab, so it\n  // can be scrolled with the arrow keys (WCAG 2.1.1). Otherwise it's a plain box.\n  const scrollRegion = scrollable\n    ? {\n        role: \"region\",\n        tabIndex: 0,\n        \"aria-label\": props[\"aria-label\"],\n        \"aria-labelledby\": props[\"aria-labelledby\"],\n      }\n    : {};\n\n  return (\n    <div\n      ref={containerRef}\n      data-slot=\"table-container\"\n      {...scrollRegion}\n      className={cn(\n        \"relative w-full overflow-x-auto rounded-xl border border-border-subtle bg-background focus-ring\",\n        containerClassName,\n      )}\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\n          // Separate borders so they travel with sticky cells.\n          \"w-full border-separate border-spacing-0 text-left\",\n          stickyFirstColumn &&\n            \"[&_tr>:first-child]:sticky [&_tr>:first-child]:left-0 [&_tr>:first-child]:z-10 [&_tr>:first-child]:shadow-[inset_-1px_0_0_0_var(--color-border-subtle)]\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport interface TableHeaderProps extends ComponentProps<\"thead\"> {}\n\nexport function TableHeader(props: TableHeaderProps): React.JSX.Element {\n  return <thead data-slot=\"table-header\" {...props} />;\n}\n\nexport interface TableBodyProps extends ComponentProps<\"tbody\"> {}\n\nexport function TableBody(props: TableBodyProps): React.JSX.Element {\n  return <tbody data-slot=\"table-body\" {...props} />;\n}\n\nexport interface TableRowProps extends ComponentProps<\"tr\"> {}\n\n/**\n * A row. Figma has no Table/Row: a row is just cells as wide as their headers. If a\n * row opens a detail, put a link in its first cell — don't make the `<tr>` clickable.\n */\nexport function TableRow({\n  className,\n  ...props\n}: TableRowProps): React.JSX.Element {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"transition-colors [tbody_&:last-child>td]:border-b-0 [tbody_&:hover>td]:bg-surface\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst alignment = {\n  text: \"text-left\",\n  numeric: \"text-right\",\n  badge: \"text-left\",\n  // Shrinks to its buttons.\n  action: \"w-0 whitespace-nowrap text-center\",\n} satisfies Record<TableCellType, string>;\n\nexport const tableHeadVariants = cva(\n  \"h-11 border-b border-border-subtle bg-surface px-4 align-middle text-label-small text-text-secondary first:rounded-tl-xl last:rounded-tr-xl data-sorted:text-label-strong data-sorted:text-text-primary\",\n  { variants: { type: alignment }, defaultVariants: { type: \"text\" } },\n);\n\nexport interface TableHeadProps extends ComponentProps<\"th\"> {\n  /** Same as the column's cells, so the header lines up with them. */\n  type?: TableCellType;\n  /**\n   * Current order of the column. The sorted column is recognised by its chevron,\n   * not only by the darker label.\n   */\n  sort?: TableSort;\n  /**\n   * Makes the column sortable: the label becomes a `<button>` inside the `<th>`,\n   * which carries `aria-sort`. Cycling the order is up to the app.\n   */\n  onSort?: MouseEventHandler<HTMLButtonElement>;\n}\n\n/** Column header (`<th scope=\"col\">`). Sortable when it gets `onSort`. */\nexport function TableHead({\n  type = \"text\",\n  sort = \"none\",\n  onSort,\n  className,\n  children,\n  ...props\n}: TableHeadProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const descriptionId = useId();\n  const sorted = sort !== \"none\";\n  const sortLabel = {\n    none: labels.notSorted,\n    ascending: labels.sortAscending,\n    descending: labels.sortDescending,\n  }[sort];\n\n  return (\n    <th\n      data-slot=\"table-head\"\n      scope=\"col\"\n      aria-sort={sorted ? sort : undefined}\n      data-sorted={sorted || undefined}\n      className={cn(tableHeadVariants({ type }), onSort && \"p-0\", className)}\n      {...props}\n    >\n      {onSort ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          // The state is announced when the button gets focus, where aria-sort on\n          // the <th> isn't always read.\n          aria-describedby={descriptionId}\n          className={cn(\n            \"flex h-12 w-full cursor-pointer items-center gap-1 whitespace-nowrap px-4\",\n            \"transition-colors hover:text-text-primary\",\n            \"focus-ring focus-visible:-outline-offset-2\",\n            // Numbers: the chevron goes on the inside so the label stays aligned\n            // with the column.\n            type === \"numeric\"\n              ? \"flex-row-reverse\"\n              : type === \"action\"\n                ? \"justify-center\"\n                : \"justify-start\",\n          )}\n        >\n          <span>{children}</span>\n          {sort === \"ascending\" && <ChevronUpIcon size=\"sm\" />}\n          {sort === \"descending\" && <ChevronDownIcon size=\"sm\" />}\n        </button>\n      ) : (\n        children\n      )}\n      {onSort && (\n        <span id={descriptionId} hidden>\n          {sortLabel}\n        </span>\n      )}\n    </th>\n  );\n}\n\nexport const tableCellVariants = cva(\n  \"h-14 border-b border-border-subtle bg-background px-4 align-middle text-body-small text-text-primary transition-colors\",\n  {\n    variants: {\n      type: {\n        ...alignment,\n        // Tabular figures so decimals line up and amounts can be compared.\n        numeric: \"whitespace-nowrap text-right text-label-strong tabular-nums\",\n      },\n    },\n    defaultVariants: { type: \"text\" },\n  },\n);\n\nexport interface TableCellProps extends ComponentProps<\"td\"> {\n  /**\n   * - `text`: left.\n   * - `numeric`: right, tabular figures. The value comes formatted by the app in\n   *   es-ES (\"29,00 €\", symbol after), the cell doesn't format.\n   * - `badge`: left, a `Badge`.\n   * - `action`: centred, a ghost small icon button whose `aria-label` carries the\n   *   row's context (\"Descargar factura del 5 de enero\") — twenty \"Descargar\"\n   *   buttons are indistinguishable for a screen reader.\n   */\n  type?: TableCellType;\n}\n\nexport function TableCell({\n  type,\n  className,\n  ...props\n}: TableCellProps): React.JSX.Element {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(tableCellVariants({ type }), className)}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -25,8 +25,10 @@ export * from "./components/checkbox";
 export * from "./components/chip";
 export * from "./components/date-badge";
 export * from "./components/day-cell";
+export * from "./components/detail-header";
 export * from "./components/divider";
 export * from "./components/empty-state";
+export * from "./components/fact-card";
 export * from "./components/field";
 export * from "./components/footer";
 export * from "./components/health-record";
@@ -58,6 +60,7 @@ export * from "./components/sidebar";
 export * from "./components/skeleton";
 export * from "./components/social-button";
 export * from "./components/spinner";
+export * from "./components/stat-card";
 export * from "./components/stat-tile";
 export * from "./components/step-indicator";
 export * from "./components/store-badge";

package/dist/index.js

@@ -38,8 +38,10 @@ import { Chip, ChipGroup, chipVariants } from "./components/chip/chip.js";
 import { ConfirmModal } from "./components/modal/confirm-modal.js";
 import { DateBadge } from "./components/date-badge/date-badge.js";
 import { DayCell, DayCellGroup } from "./components/day-cell/day-cell.js";
+import { DetailHeader, DetailHeaderBack } from "./components/detail-header/detail-header.js";
 import { Divider, dividerVariants } from "./components/divider/divider.js";
 import { EmptyState, emptyStateVariants } from "./components/empty-state/empty-state.js";
+import { FactCard, factCardVariants } from "./components/fact-card/fact-card.js";
 import { Field } from "./components/field/field.js";
 import { Footer, FooterLink } from "./components/footer/footer.js";
 import { HealthRecordHeader, HealthRecordRow, HealthRecordSection } from "./components/health-record/health-record.js";
@@ -73,6 +75,7 @@ import { Sidebar, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, Sidebar
 import { Skeleton, skeletonVariants } from "./components/skeleton/skeleton.js";
 import { SocialButton } from "./components/social-button/social-button.js";
 import { Spinner } from "./components/spinner/spinner.js";
+import { StatCard, statCardVariants } from "./components/stat-card/stat-card.js";
 import { StatTile } from "./components/stat-tile/stat-tile.js";
 import { StepIndicator } from "./components/step-indicator/step-indicator.js";
 import { StoreBadge } from "./components/store-badge/store-badge.js";
@@ -141,8 +144,11 @@ export {
   DateBadge,
   DayCell,
   DayCellGroup,
+  DetailHeader,
+  DetailHeaderBack,
   Divider,
   EmptyState,
+  FactCard,
   Field,
   Footer,
   FooterLink,
@@ -203,6 +209,7 @@ export {
   Skeleton,
   SocialButton,
   Spinner,
+  StatCard,
   StatTile,
   StepIndicator,
   StoreBadge,
@@ -243,6 +250,7 @@ export {
   defaultLabels,
   dividerVariants,
   emptyStateVariants,
+  factCardVariants,
   getDefaultPhonePrefixes,
   iconButtonVariants,
   iconContainerVariants,
@@ -251,6 +259,7 @@ export {
   radioVariants,
   severityIndicatorVariants,
   skeletonVariants,
+  statCardVariants,
   tableCellVariants,
   tableHeadVariants,
   tableSortFrom,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mediquo/medicore",
   "description": "MediCore — design system de las plataformas web de mediQuo",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "type": "module",
   "license": "UNLICENSED",
   "sideEffects": [