@mediquo/medicore 0.1.0

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

@@ -0,0 +1,15 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface StatTileProps extends Omit<ComponentProps<"dl">, "children"> {
+    /** "+5M", "4,6/5", "+300", "94 %". */
+    value: ReactNode;
+    /** "consultas resueltas", "valoración media". */
+    label: ReactNode;
+}
+/**
+ * A trust figure. Only the canonical figures verified on mediquo.com: +5M consultas
+ * resueltas · 4,6/5 valoración · +300 profesionales · 94 % satisfacción. Never a
+ * figure without a source or a time frame ops doesn't guarantee.
+ *
+ * A `<dl>`: the label is the term and the figure its value (shown first).
+ */
+export declare function StatTile({ value, label, className, ...props }: StatTileProps): React.JSX.Element;

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

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function StatTile({
+  value,
+  label,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "dl",
+    {
+      "data-slot": "stat-tile",
+      className: cn(
+        "flex min-w-0 flex-col-reverse gap-1 rounded-xl bg-background p-4 shadow-s",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-body-small text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx("dd", { className: "text-heading-h2 text-text-brand", children: value })
+      ]
+    }
+  );
+}
+export {
+  StatTile
+};
+//# sourceMappingURL=stat-tile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stat-tile.js","sources":["../../../src/components/stat-tile/stat-tile.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nexport interface StatTileProps extends Omit<ComponentProps<\"dl\">, \"children\"> {\n  /** \"+5M\", \"4,6/5\", \"+300\", \"94 %\". */\n  value: ReactNode;\n  /** \"consultas resueltas\", \"valoración media\". */\n  label: ReactNode;\n}\n\n/**\n * A trust figure. Only the canonical figures verified on mediquo.com: +5M consultas\n * resueltas · 4,6/5 valoración · +300 profesionales · 94 % satisfacción. Never a\n * figure without a source or a time frame ops doesn't guarantee.\n *\n * A `<dl>`: the label is the term and the figure its value (shown first).\n */\nexport function StatTile({\n  value,\n  label,\n  className,\n  ...props\n}: StatTileProps): React.JSX.Element {\n  return (\n    <dl\n      data-slot=\"stat-tile\"\n      className={cn(\n        \"flex min-w-0 flex-col-reverse gap-1 rounded-xl bg-background p-4 shadow-s\",\n        className,\n      )}\n      {...props}\n    >\n      <dt className=\"text-body-small text-text-secondary\">{label}</dt>\n      <dd className=\"text-heading-h2 text-text-brand\">{value}</dd>\n    </dl>\n  );\n}\n"],"names":[],"mappings":";;AAkBO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqC;AACnC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,WAAU,uCAAuC,UAAA,OAAM;AAAA,QAC3D,oBAAC,MAAA,EAAG,WAAU,mCAAmC,UAAA,MAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D;"}

package/dist/components/step-indicator/index.d.ts

@@ -0,0 +1 @@
+export { StepIndicator, type StepIndicatorProps } from "./step-indicator";

package/dist/components/step-indicator/step-indicator.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+export interface StepIndicatorProps extends Omit<ComponentProps<"div">, "children"> {
+    /** Only flows of 2 or 3 steps. With more, the problem is the flow. Default 2. */
+    steps?: 2 | 3;
+    /** The step the person is on, 1-based (never above `steps`). */
+    current: 1 | 2 | 3;
+}
+/**
+ * Progress through a multi-step form: "Paso 1 de 2" plus one bar per step.
+ *
+ * - The text is the signal (it comes from the `step` label, so the app translates it
+ *   once); the bars — `text-brand` done, `text-disabled` pending — only back it up
+ *   and are hidden from screen readers.
+ * - It is not navigation: tapping a bar doesn't jump to that step. If the steps are
+ *   links, that's a different component with `aria-current="step"`.
+ */
+export declare function StepIndicator({ steps, current: currentProp, className, ...props }: StepIndicatorProps): React.JSX.Element;

package/dist/components/step-indicator/step-indicator.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+function StepIndicator({
+  steps = 2,
+  current: currentProp,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const current = Math.min(currentProp, steps);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "step-indicator",
+      className: cn("flex w-full flex-col gap-2", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-label-small text-text-secondary", children: labels.step(current, steps) }),
+        /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "flex gap-1", children: Array.from({ length: steps }, (_, index) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-complete": index < current || void 0,
+            className: "h-1 flex-1 rounded-xs bg-text-disabled data-complete:bg-text-brand"
+          },
+          index
+        )) })
+      ]
+    }
+  );
+}
+export {
+  StepIndicator
+};
+//# sourceMappingURL=step-indicator.js.map

package/dist/components/step-indicator/step-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.js","sources":["../../../src/components/step-indicator/step-indicator.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\n\nexport interface StepIndicatorProps\n  extends Omit<ComponentProps<\"div\">, \"children\"> {\n  /** Only flows of 2 or 3 steps. With more, the problem is the flow. Default 2. */\n  steps?: 2 | 3;\n  /** The step the person is on, 1-based (never above `steps`). */\n  current: 1 | 2 | 3;\n}\n\n/**\n * Progress through a multi-step form: \"Paso 1 de 2\" plus one bar per step.\n *\n * - The text is the signal (it comes from the `step` label, so the app translates it\n *   once); the bars — `text-brand` done, `text-disabled` pending — only back it up\n *   and are hidden from screen readers.\n * - It is not navigation: tapping a bar doesn't jump to that step. If the steps are\n *   links, that's a different component with `aria-current=\"step\"`.\n */\nexport function StepIndicator({\n  steps = 2,\n  current: currentProp,\n  className,\n  ...props\n}: StepIndicatorProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const current = Math.min(currentProp, steps);\n\n  return (\n    <div\n      data-slot=\"step-indicator\"\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n      {...props}\n    >\n      <p className=\"text-label-small text-text-secondary\">\n        {labels.step(current, steps)}\n      </p>\n      <div aria-hidden className=\"flex gap-1\">\n        {Array.from({ length: steps }, (_, index) => (\n          <span\n            // biome-ignore lint/suspicious/noArrayIndexKey: the bars are positional and never reorder.\n            key={index}\n            data-complete={index < current || undefined}\n            className=\"h-1 flex-1 rounded-xs bg-text-disabled data-complete:bg-text-brand\"\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAsBO,SAAS,cAAc;AAAA,EAC5B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,GAA0C;AACxC,QAAM,SAAS,kBAAA;AACf,QAAM,UAAU,KAAK,IAAI,aAAa,KAAK;AAE3C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,8BAA8B,SAAS;AAAA,MACpD,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,OAAE,WAAU,wCACV,iBAAO,KAAK,SAAS,KAAK,GAC7B;AAAA,QACA,oBAAC,OAAA,EAAI,eAAW,MAAC,WAAU,cACxB,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAA,GAAS,CAAC,GAAG,UACjC;AAAA,UAAC;AAAA,UAAA;AAAA,YAGC,iBAAe,QAAQ,WAAW;AAAA,YAClC,WAAU;AAAA,UAAA;AAAA,UAFL;AAAA,QAAA,CAIR,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1 @@
+export { StoreBadge, type StoreBadgeProps, type StoreBadgeStore, } from "./store-badge";

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

@@ -0,0 +1,22 @@
+import type { ComponentProps } from "react";
+export type StoreBadgeStore = "app-store" | "google-play";
+export interface StoreBadgeProps extends Omit<ComponentProps<"a">, "children"> {
+    store: StoreBadgeStore;
+    /** The app's page in that store. */
+    href: string;
+    /**
+     * The OFFICIAL badge, downloaded from Apple's and Google's marketing sites (the
+     * Spanish "Descárgalo en el App Store" / "Disponible en Google Play"), hosted by
+     * the app. It is not redrawn or recoloured. Without it the badge renders the
+     * placeholder that only reserves the place and the size (44 high).
+     */
+    src?: string;
+}
+/**
+ * A link to the app's page in the App Store or Google Play, 44px high. In
+ * production it shows the stores' official badge (`src`); the drawn one is only a
+ * placeholder, like in Figma. Its name is "Descárgalo en el App Store" /
+ * "Disponible en Google Play" (`storeBadgeAppStore` / `storeBadgeGooglePlay`
+ * labels + the store).
+ */
+export declare function StoreBadge({ store, href, src, className, ...props }: StoreBadgeProps): React.JSX.Element;

package/dist/components/store-badge/store-badge.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+const storeNames = {
+  "app-store": "App Store",
+  "google-play": "Google Play"
+};
+function StoreBadge({
+  store,
+  href,
+  src,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const prefix = store === "app-store" ? labels.storeBadgeAppStore : labels.storeBadgeGooglePlay;
+  const name = storeNames[store];
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      "data-slot": "store-badge",
+      "data-store": store,
+      href,
+      className: cn(
+        "inline-flex h-11 w-fit shrink-0 rounded-lg focus-ring",
+        className
+      ),
+      ...props,
+      children: src ? /* @__PURE__ */ jsx("img", { src, alt: `${prefix} ${name}`, className: "h-11 w-auto" }) : /* @__PURE__ */ jsxs("span", { className: "flex h-11 w-37.5 flex-col justify-center rounded-lg border border-border-inverse bg-surface-inverse pl-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-label-small text-text-inverse-secondary", children: prefix }),
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "text-label-strong text-text-inverse", children: name })
+      ] })
+    }
+  );
+}
+export {
+  StoreBadge
+};
+//# sourceMappingURL=store-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"store-badge.js","sources":["../../../src/components/store-badge/store-badge.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\n\nexport type StoreBadgeStore = \"app-store\" | \"google-play\";\n\n// Brand names: not translated.\nconst storeNames: Record<StoreBadgeStore, string> = {\n  \"app-store\": \"App Store\",\n  \"google-play\": \"Google Play\",\n};\n\nexport interface StoreBadgeProps extends Omit<ComponentProps<\"a\">, \"children\"> {\n  store: StoreBadgeStore;\n  /** The app's page in that store. */\n  href: string;\n  /**\n   * The OFFICIAL badge, downloaded from Apple's and Google's marketing sites (the\n   * Spanish \"Descárgalo en el App Store\" / \"Disponible en Google Play\"), hosted by\n   * the app. It is not redrawn or recoloured. Without it the badge renders the\n   * placeholder that only reserves the place and the size (44 high).\n   */\n  src?: string;\n}\n\n/**\n * A link to the app's page in the App Store or Google Play, 44px high. In\n * production it shows the stores' official badge (`src`); the drawn one is only a\n * placeholder, like in Figma. Its name is \"Descárgalo en el App Store\" /\n * \"Disponible en Google Play\" (`storeBadgeAppStore` / `storeBadgeGooglePlay`\n * labels + the store).\n */\nexport function StoreBadge({\n  store,\n  href,\n  src,\n  className,\n  ...props\n}: StoreBadgeProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const prefix =\n    store === \"app-store\"\n      ? labels.storeBadgeAppStore\n      : labels.storeBadgeGooglePlay;\n  const name = storeNames[store];\n\n  return (\n    <a\n      data-slot=\"store-badge\"\n      data-store={store}\n      href={href}\n      className={cn(\n        \"inline-flex h-11 w-fit shrink-0 rounded-lg focus-ring\",\n        className,\n      )}\n      {...props}\n    >\n      {src ? (\n        <img src={src} alt={`${prefix} ${name}`} className=\"h-11 w-auto\" />\n      ) : (\n        <span className=\"flex h-11 w-37.5 flex-col justify-center rounded-lg border border-border-inverse bg-surface-inverse pl-3\">\n          <span className=\"text-label-small text-text-inverse-secondary\">\n            {prefix}\n          </span>{\" \"}\n          <span className=\"text-label-strong text-text-inverse\">{name}</span>\n        </span>\n      )}\n    </a>\n  );\n}\n"],"names":[],"mappings":";;;AAQA,MAAM,aAA8C;AAAA,EAClD,aAAa;AAAA,EACb,eAAe;AACjB;AAsBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuC;AACrC,QAAM,SAAS,kBAAA;AACf,QAAM,SACJ,UAAU,cACN,OAAO,qBACP,OAAO;AACb,QAAM,OAAO,WAAW,KAAK;AAE7B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY;AAAA,MACZ;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,gBACC,oBAAC,OAAA,EAAI,KAAU,KAAK,GAAG,MAAM,IAAI,IAAI,IAAI,WAAU,cAAA,CAAc,IAEjE,qBAAC,QAAA,EAAK,WAAU,4GACd,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,gDACb,UAAA,QACH;AAAA,QAAQ;AAAA,QACR,oBAAC,QAAA,EAAK,WAAU,uCAAuC,UAAA,KAAA,CAAK;AAAA,MAAA,EAAA,CAC9D;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

@@ -0,0 +1 @@
+export { Switch, SwitchField, type SwitchFieldProps, type SwitchProps, } from "./switch";

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,23 @@
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import type { ReactNode } from "react";
+export interface SwitchProps extends Omit<BaseSwitch.Root.Props, "className" | "children"> {
+    className?: string;
+}
+/**
+ * Immediate-apply switch: when released, the change is already made. If the change
+ * needs a save button, it isn't a Switch, it is a Checkbox.
+ *
+ * The label goes outside and to the left, with the switch aligned to the right of
+ * the row: use `SwitchField`, or pass `aria-label`. Track 44×24 and thumb 20×20 are
+ * fixed on purpose (any other pair stops being a circle); the hit area is 44 high.
+ */
+export declare function Switch({ className, ...props }: SwitchProps): React.JSX.Element;
+export interface SwitchFieldProps extends SwitchProps {
+    /** What the switch turns on or off: "Recordatorios por SMS". */
+    label: ReactNode;
+}
+/**
+ * A settings row: label on the left, switch on the right, at least 44px high and
+ * pressable as a whole.
+ */
+export declare function SwitchField({ label, className, ...props }: SwitchFieldProps): React.JSX.Element;

package/dist/components/switch/switch.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+import { cn } from "../../lib/cn.js";
+function Switch({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Switch$1.Root,
+    {
+      "data-slot": "switch",
+      className: cn(
+        "inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full p-0.5 transition-colors",
+        // Off is not a solid grey: surface with an inner border-input edge (5.41:1)
+        // reads as "off"; a grey fill that passes 3:1 already reads as "on".
+        "bg-surface inset-ring inset-ring-border-input",
+        "data-checked:bg-brand data-checked:inset-ring-brand",
+        "data-disabled:cursor-not-allowed data-disabled:inset-ring-border",
+        "data-disabled:data-checked:bg-border-strong data-disabled:data-checked:inset-ring-border-strong",
+        "focus-ring touch-target",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Switch$1.Thumb,
+        {
+          className: cn(
+            "size-5 rounded-full border border-border-input bg-text-inverse",
+            "transition-transform motion-reduce:transition-none",
+            // Only Off has an edge: on brand the thumb is already 10.32:1.
+            "data-checked:translate-x-5 data-checked:border-transparent",
+            "data-disabled:border-border data-disabled:data-checked:border-transparent"
+          )
+        }
+      )
+    }
+  );
+}
+function SwitchField({
+  label,
+  className,
+  ...props
+}) {
+  return (
+    // biome-ignore lint/a11y/noLabelWithoutControl: the Base UI switch inside renders its own <input>, so the wrapping label is associated.
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        "data-slot": "switch-field",
+        className: cn(
+          "flex min-h-11 cursor-pointer items-center justify-between gap-4 text-label-default text-text-primary",
+          "has-data-disabled:cursor-not-allowed has-data-disabled:text-text-disabled",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { children: label }),
+          /* @__PURE__ */ jsx(Switch, { ...props })
+        ]
+      }
+    )
+  );
+}
+export {
+  Switch,
+  SwitchField
+};
+//# sourceMappingURL=switch.js.map

package/dist/components/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sources":["../../../src/components/switch/switch.tsx"],"sourcesContent":["import { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nexport interface SwitchProps\n  extends Omit<BaseSwitch.Root.Props, \"className\" | \"children\"> {\n  className?: string;\n}\n\n/**\n * Immediate-apply switch: when released, the change is already made. If the change\n * needs a save button, it isn't a Switch, it is a Checkbox.\n *\n * The label goes outside and to the left, with the switch aligned to the right of\n * the row: use `SwitchField`, or pass `aria-label`. Track 44×24 and thumb 20×20 are\n * fixed on purpose (any other pair stops being a circle); the hit area is 44 high.\n */\nexport function Switch({\n  className,\n  ...props\n}: SwitchProps): React.JSX.Element {\n  return (\n    <BaseSwitch.Root\n      data-slot=\"switch\"\n      className={cn(\n        \"inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full p-0.5 transition-colors\",\n        // Off is not a solid grey: surface with an inner border-input edge (5.41:1)\n        // reads as \"off\"; a grey fill that passes 3:1 already reads as \"on\".\n        \"bg-surface inset-ring inset-ring-border-input\",\n        \"data-checked:bg-brand data-checked:inset-ring-brand\",\n        \"data-disabled:cursor-not-allowed data-disabled:inset-ring-border\",\n        \"data-disabled:data-checked:bg-border-strong data-disabled:data-checked:inset-ring-border-strong\",\n        \"focus-ring touch-target\",\n        className,\n      )}\n      {...props}\n    >\n      <BaseSwitch.Thumb\n        className={cn(\n          \"size-5 rounded-full border border-border-input bg-text-inverse\",\n          \"transition-transform motion-reduce:transition-none\",\n          // Only Off has an edge: on brand the thumb is already 10.32:1.\n          \"data-checked:translate-x-5 data-checked:border-transparent\",\n          \"data-disabled:border-border data-disabled:data-checked:border-transparent\",\n        )}\n      />\n    </BaseSwitch.Root>\n  );\n}\n\nexport interface SwitchFieldProps extends SwitchProps {\n  /** What the switch turns on or off: \"Recordatorios por SMS\". */\n  label: ReactNode;\n}\n\n/**\n * A settings row: label on the left, switch on the right, at least 44px high and\n * pressable as a whole.\n */\nexport function SwitchField({\n  label,\n  className,\n  ...props\n}: SwitchFieldProps): React.JSX.Element {\n  return (\n    // biome-ignore lint/a11y/noLabelWithoutControl: the Base UI switch inside renders its own <input>, so the wrapping label is associated.\n    <label\n      data-slot=\"switch-field\"\n      className={cn(\n        \"flex min-h-11 cursor-pointer items-center justify-between gap-4 text-label-default text-text-primary\",\n        \"has-data-disabled:cursor-not-allowed has-data-disabled:text-text-disabled\",\n        className,\n      )}\n    >\n      <span>{label}</span>\n      <Switch {...props} />\n    </label>\n  );\n}\n"],"names":["BaseSwitch"],"mappings":";;;AAkBO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,GAAG;AACL,GAAmC;AACjC,SACE;AAAA,IAACA,SAAW;AAAA,IAAX;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAACA,SAAW;AAAA,QAAX;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA;AAAA,YAEA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAWO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwC;AACtC;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,oBAAC,UAAM,UAAA,MAAA,CAAM;AAAA,UACb,oBAAC,QAAA,EAAQ,GAAG,MAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA;AAGzB;"}

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

@@ -0,0 +1 @@
+export { Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableCellType, TableHead, TableHeader, type TableHeaderProps, type TableHeadProps, type TableProps, TableRow, type TableRowProps, type TableSort, tableCellVariants, tableHeadVariants, tableSortFrom, } from "./table";

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

@@ -0,0 +1,85 @@
+import { type ComponentProps, type MouseEventHandler } from "react";
+/** The type decides the alignment: text and badge left, numbers right, action centred. */
+export type TableCellType = "text" | "numeric" | "badge" | "action";
+export type TableSort = "none" | "ascending" | "descending";
+/**
+ * Maps a headless library's sort state to `TableSort`, e.g. TanStack's
+ * `column.getIsSorted()` (`false | "asc" | "desc"`).
+ */
+export declare function tableSortFrom(value: false | "asc" | "desc"): TableSort;
+export interface TableProps extends ComponentProps<"table"> {
+    /**
+     * Keeps the first column (usually the name or the date) in place while the rest
+     * scrolls sideways. For dense admin tables that still have to work on a tablet.
+     */
+    stickyFirstColumn?: boolean;
+    /** Classes for the scroll container around the `<table>` (border, radius, max height…). */
+    containerClassName?: string;
+}
+/**
+ * Semantic, composable table: `Table` › `TableHeader` / `TableBody` › `TableRow` ›
+ * `TableHead` / `TableCell`. Plain elements with styles, so a headless library
+ * (`@tanstack/react-table`) can drive it: map `headerGroups` to `TableRow` +
+ * `TableHead` (`sort={tableSortFrom(column.getIsSorted())}`,
+ * `onSort={column.getToggleSortingHandler()}`)
+ * and `rows` to `TableRow` + `TableCell`.
+ *
+ * - Name it: `aria-label` ("Facturas") or `aria-labelledby` the section title.
+ * - Desktop pattern (1024+). On mobile a six-column table doesn't fit: render each
+ *   row as a `ListRow` (title = concept, subtitle = date · specialty, trailing =
+ *   amount and action) or a stacked row with the actions in a menu, and switch
+ *   with `hidden lg:block` / `lg:hidden`. Horizontal scroll (automatic, with
+ *   `stickyFirstColumn` if needed) is the fallback for in-between widths, not the
+ *   mobile design.
+ * - When it overflows, the scroll container becomes focusable so it can be scrolled
+ *   with the keyboard.
+ */
+export declare function Table({ stickyFirstColumn, containerClassName, className, ...props }: TableProps): React.JSX.Element;
+export interface TableHeaderProps extends ComponentProps<"thead"> {
+}
+export declare function TableHeader(props: TableHeaderProps): React.JSX.Element;
+export interface TableBodyProps extends ComponentProps<"tbody"> {
+}
+export declare function TableBody(props: TableBodyProps): React.JSX.Element;
+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 const tableHeadVariants: (props?: ({
+    type?: "text" | "numeric" | "action" | "badge" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface TableHeadProps extends ComponentProps<"th"> {
+    /** Same as the column's cells, so the header lines up with them. */
+    type?: TableCellType;
+    /**
+     * Current order of the column. The sorted column is recognised by its chevron,
+     * not only by the darker label.
+     */
+    sort?: TableSort;
+    /**
+     * Makes the column sortable: the label becomes a `<button>` inside the `<th>`,
+     * which carries `aria-sort`. Cycling the order is up to the app.
+     */
+    onSort?: MouseEventHandler<HTMLButtonElement>;
+}
+/** Column header (`<th scope="col">`). Sortable when it gets `onSort`. */
+export declare function TableHead({ type, sort, onSort, className, children, ...props }: TableHeadProps): React.JSX.Element;
+export declare const tableCellVariants: (props?: ({
+    type?: "text" | "numeric" | "action" | "badge" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface TableCellProps extends ComponentProps<"td"> {
+    /**
+     * - `text`: left.
+     * - `numeric`: right, tabular figures. The value comes formatted by the app in
+     *   es-ES ("29,00 €", symbol after), the cell doesn't format.
+     * - `badge`: left, a `Badge`.
+     * - `action`: centred, a ghost small icon button whose `aria-label` carries the
+     *   row's context ("Descargar factura del 5 de enero") — twenty "Descargar"
+     *   buttons are indistinguishable for a screen reader.
+     */
+    type?: TableCellType;
+}
+export declare function TableCell({ type, className, ...props }: TableCellProps): React.JSX.Element;

package/dist/components/table/table.js

@@ -0,0 +1,175 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useRef, useState, useEffect, useId } from "react";
+import { ChevronDownIcon } from "../../icons/generated/chevron-down.js";
+import { ChevronUpIcon } from "../../icons/generated/chevron-up.js";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+function tableSortFrom(value) {
+  if (value === "asc") return "ascending";
+  if (value === "desc") return "descending";
+  return "none";
+}
+function Table({
+  stickyFirstColumn = false,
+  containerClassName,
+  className,
+  ...props
+}) {
+  const containerRef = useRef(null);
+  const [scrollable, setScrollable] = useState(false);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const update = () => setScrollable(container.scrollWidth > container.clientWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(container);
+    if (container.firstElementChild) {
+      observer.observe(container.firstElementChild);
+    }
+    return () => observer.disconnect();
+  }, []);
+  const scrollRegion = scrollable ? {
+    role: "region",
+    tabIndex: 0,
+    "aria-label": props["aria-label"],
+    "aria-labelledby": props["aria-labelledby"]
+  } : {};
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      "data-slot": "table-container",
+      ...scrollRegion,
+      className: cn(
+        "relative w-full overflow-x-auto focus-ring",
+        containerClassName
+      ),
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          "data-slot": "table",
+          className: cn(
+            // Separate borders so they travel with sticky cells.
+            "w-full border-separate border-spacing-0 text-left",
+            stickyFirstColumn && "[&_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)]",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader(props) {
+  return /* @__PURE__ */ jsx("thead", { "data-slot": "table-header", ...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 });
+}
+const alignment = {
+  text: "text-left",
+  numeric: "text-right",
+  badge: "text-left",
+  // Shrinks to its buttons.
+  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",
+  { variants: { type: alignment }, defaultVariants: { type: "text" } }
+);
+function TableHead({
+  type = "text",
+  sort = "none",
+  onSort,
+  className,
+  children,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const descriptionId = useId();
+  const sorted = sort !== "none";
+  const sortLabel = {
+    none: labels.notSorted,
+    ascending: labels.sortAscending,
+    descending: labels.sortDescending
+  }[sort];
+  return /* @__PURE__ */ jsxs(
+    "th",
+    {
+      "data-slot": "table-head",
+      scope: "col",
+      "aria-sort": sorted ? sort : void 0,
+      "data-sorted": sorted || void 0,
+      className: cn(tableHeadVariants({ type }), onSort && "p-0", className),
+      ...props,
+      children: [
+        onSort ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onSort,
+            "aria-describedby": descriptionId,
+            className: cn(
+              "flex h-12 w-full cursor-pointer items-center gap-1 whitespace-nowrap px-4",
+              "transition-colors hover:text-text-primary",
+              "focus-ring focus-visible:-outline-offset-2",
+              // Numbers: the chevron goes on the inside so the label stays aligned
+              // with the column.
+              type === "numeric" ? "flex-row-reverse" : type === "action" ? "justify-center" : "justify-start"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { children }),
+              sort === "ascending" && /* @__PURE__ */ jsx(ChevronUpIcon, { size: "sm" }),
+              sort === "descending" && /* @__PURE__ */ jsx(ChevronDownIcon, { size: "sm" })
+            ]
+          }
+        ) : children,
+        onSort && /* @__PURE__ */ jsx("span", { id: descriptionId, hidden: true, children: sortLabel })
+      ]
+    }
+  );
+}
+const tableCellVariants = cva(
+  "h-16 border-b border-border-subtle bg-background px-4 align-middle text-body-small text-text-primary",
+  {
+    variants: {
+      type: {
+        ...alignment,
+        // Tabular figures so decimals line up and amounts can be compared.
+        numeric: "whitespace-nowrap text-right text-label-strong tabular-nums"
+      }
+    },
+    defaultVariants: { type: "text" }
+  }
+);
+function TableCell({
+  type,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(tableCellVariants({ type }), className),
+      ...props
+    }
+  );
+}
+export {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  tableCellVariants,
+  tableHeadVariants,
+  tableSortFrom
+};
+//# sourceMappingURL=table.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1 @@
+export { Tabs, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsProps, TabsTab, type TabsTabProps, } from "./tabs";