@mediquo/medicore 0.1.0

package/dist/components/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sources":["../../../src/components/input/input.tsx"],"sourcesContent":["import { Input as BaseInput } from \"@base-ui/react/input\";\nimport { type ReactNode, type Ref, useCallback, useRef, useState } from \"react\";\n\nimport { EyeIcon, EyeOffIcon, XCloseIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport {\n  type ControlSize,\n  controlAction,\n  controlBox,\n  controlHeight,\n  controlIcon,\n  controlPlaceholder,\n  controlRow,\n  wrappedControlStates,\n} from \"./control-styles\";\n\nexport interface InputProps\n  extends Omit<BaseInput.Props, \"className\" | \"size\" | \"ref\"> {\n  ref?: Ref<HTMLInputElement>;\n  /** `default` 40px (control-md), `small` 36px (control-sm): the same heights as Button. */\n  size?: ControlSize;\n  /**\n   * Red 2px border and `aria-invalid`. Never on its own: the message that says what\n   * is wrong goes under the field (use `Field` with `error`, which sets this for you).\n   */\n  invalid?: boolean;\n  /** Decorative 16px icon before the text: `SearchMdIcon`, `CalendarIcon`, `User01Icon`. */\n  leadingIcon?: ReactNode;\n  /** Decorative 16px icon after the text: `CalendarIcon`, `AlertCircleIcon`. */\n  trailingIcon?: ReactNode;\n  /** Shows an × button (\"Borrar\") while there is text. It fires `onChange` with \"\". */\n  clearable?: boolean;\n  /** Applied to the box, not to the `<input>`: use it for the width. */\n  className?: string;\n}\n\n/**\n * One-line text field. Only the box: the label, the help text and the error go\n * OUTSIDE, in `Field`, so the message can grow to two lines.\n *\n * - It fills its container (Figma draws it at 280 as a reference). Constrain it with\n *   `className=\"max-w-xs\"` or with the layout.\n * - Placeholder in text-secondary, value in text-primary. The placeholder is an\n *   example, never the label.\n * - `type=\"password\"` adds the reveal button (eye / eye-off) with its accessible name.\n * - Ask the browser for help: `type=\"email\"`, `inputMode=\"numeric\"`,\n *   `autoComplete=\"given-name\"`… The keyboard and autofill depend on it.\n * - Inside `Field` the label, description and `aria-invalid` wire themselves.\n */\nexport function Input({\n  size = \"default\",\n  invalid = false,\n  leadingIcon,\n  trailingIcon,\n  clearable = false,\n  className,\n  type = \"text\",\n  disabled,\n  readOnly,\n  value,\n  defaultValue,\n  onChange,\n  ref,\n  ...props\n}: InputProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const [revealed, setRevealed] = useState(false);\n  const [uncontrolledFilled, setUncontrolledFilled] = useState(\n    () => defaultValue != null && String(defaultValue) !== \"\",\n  );\n  const filled =\n    value === undefined\n      ? uncontrolledFilled\n      : value !== null && String(value) !== \"\";\n  const isPassword = type === \"password\";\n\n  const setRefs = useCallback(\n    (node: HTMLElement | null) => {\n      const input = node as HTMLInputElement | null;\n      inputRef.current = input;\n      if (typeof ref === \"function\") {\n        ref(input);\n      } else if (ref) {\n        ref.current = input;\n      }\n    },\n    [ref],\n  );\n\n  function clear(): void {\n    const input = inputRef.current;\n    if (!input) {\n      return;\n    }\n    // Through the native setter and a real input event, so onChange / onValueChange\n    // fire exactly as if the person had deleted the text (controlled or not).\n    Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      \"value\",\n    )?.set?.call(input, \"\");\n    input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n    input.focus();\n  }\n\n  return (\n    <div\n      data-slot=\"input\"\n      className={cn(\n        \"group/control\",\n        controlBox,\n        controlRow,\n        controlHeight[size],\n        wrappedControlStates,\n        className,\n      )}\n    >\n      {leadingIcon && <span className={controlIcon}>{leadingIcon}</span>}\n      <BaseInput\n        ref={setRefs}\n        data-slot=\"input-control\"\n        type={isPassword && revealed ? \"text\" : type}\n        disabled={disabled}\n        readOnly={readOnly}\n        value={value}\n        defaultValue={defaultValue}\n        aria-invalid={invalid && !disabled ? true : undefined}\n        onChange={(event) => {\n          setUncontrolledFilled(event.currentTarget.value !== \"\");\n          onChange?.(event);\n        }}\n        className={cn(\n          \"h-full min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed\",\n          controlPlaceholder,\n        )}\n        {...props}\n      />\n      {clearable && filled && !disabled && !readOnly && (\n        <button\n          type=\"button\"\n          aria-label={labels.clear}\n          className={controlAction}\n          onClick={clear}\n        >\n          <XCloseIcon size=\"sm\" />\n        </button>\n      )}\n      {trailingIcon && <span className={controlIcon}>{trailingIcon}</span>}\n      {isPassword && (\n        <button\n          type=\"button\"\n          aria-label={revealed ? labels.hidePassword : labels.showPassword}\n          disabled={disabled}\n          className={controlAction}\n          onClick={() => setRevealed((current) => !current)}\n        >\n          {revealed ? <EyeOffIcon size=\"sm\" /> : <EyeIcon size=\"sm\" />}\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["BaseInput"],"mappings":";;;;;;;;;AAkDO,SAAS,MAAM;AAAA,EACpB,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkC;AAChC,QAAM,SAAS,kBAAA;AACf,QAAM,WAAW,OAAgC,IAAI;AACrD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,oBAAoB,qBAAqB,IAAI;AAAA,IAClD,MAAM,gBAAgB,QAAQ,OAAO,YAAY,MAAM;AAAA,EAAA;AAEzD,QAAM,SACJ,UAAU,SACN,qBACA,UAAU,QAAQ,OAAO,KAAK,MAAM;AAC1C,QAAM,aAAa,SAAS;AAE5B,QAAM,UAAU;AAAA,IACd,CAAC,SAA6B;AAC5B,YAAM,QAAQ;AACd,eAAS,UAAU;AACnB,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,KAAK;AAAA,MACX,WAAW,KAAK;AACd,YAAI,UAAU;AAAA,MAChB;AAAA,IACF;AAAA,IACA,CAAC,GAAG;AAAA,EAAA;AAGN,WAAS,QAAc;AACrB,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AAGA,WAAO;AAAA,MACL,iBAAiB;AAAA,MACjB;AAAA,IAAA,GACC,KAAK,KAAK,OAAO,EAAE;AACtB,UAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAA,CAAM,CAAC;AACzD,UAAM,MAAA;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,IAAI;AAAA,QAClB;AAAA,QACA;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,eAAe,oBAAC,QAAA,EAAK,WAAW,aAAc,UAAA,aAAY;AAAA,QAC3D;AAAA,UAACA;AAAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,aAAU;AAAA,YACV,MAAM,cAAc,WAAW,SAAS;AAAA,YACxC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,gBAAc,WAAW,CAAC,WAAW,OAAO;AAAA,YAC5C,UAAU,CAAC,UAAU;AACnB,oCAAsB,MAAM,cAAc,UAAU,EAAE;AACtD,yBAAW,KAAK;AAAA,YAClB;AAAA,YACA,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,QAEL,aAAa,UAAU,CAAC,YAAY,CAAC,YACpC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY,OAAO;AAAA,YACnB,WAAW;AAAA,YACX,SAAS;AAAA,YAET,UAAA,oBAAC,YAAA,EAAW,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAGzB,gBAAgB,oBAAC,QAAA,EAAK,WAAW,aAAc,UAAA,cAAa;AAAA,QAC5D,cACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY,WAAW,OAAO,eAAe,OAAO;AAAA,YACpD;AAAA,YACA,WAAW;AAAA,YACX,SAAS,MAAM,YAAY,CAAC,YAAY,CAAC,OAAO;AAAA,YAE/C,UAAA,+BAAY,YAAA,EAAW,MAAK,MAAK,IAAK,oBAAC,SAAA,EAAQ,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAC5D;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

@@ -0,0 +1 @@
+export { Link, type LinkProps, type LinkSize, type LinkState, linkVariants, } from "./link";

package/dist/components/link/link.d.ts

@@ -0,0 +1,52 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ReactNode } from "react";
+export type LinkSize = "default" | "large";
+export declare const linkVariants: (props?: ({
+    size?: "default" | "large" | null | undefined;
+    disabled?: boolean | null | undefined;
+    withIcon?: boolean | null | undefined;
+    standalone?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface LinkState extends Record<string, unknown> {
+    disabled: boolean;
+}
+export interface LinkProps extends Omit<useRender.ComponentProps<"a", LinkState>, "className"> {
+    size?: LinkSize;
+    /**
+     * Not focusable and not clickable. An `<a>` can't be disabled natively, so the
+     * `href` is dropped and it is exposed as `aria-disabled`. With `render`, pass the
+     * router's own disabled prop too.
+     */
+    disabled?: boolean;
+    /** Icon after the label, e.g. `<ArrowRightIcon />`. `external` puts `link-external-01` here. */
+    trailingIcon?: ReactNode;
+    /**
+     * Opens in a new tab (`target="_blank"`, `rel="noopener noreferrer"`) and shows the
+     * external icon. For documents: privacy policy, terms, a PDF.
+     */
+    external?: boolean;
+    /**
+     * Screen-reader text appended when `external`, e.g. "(se abre en una pestaña nueva)":
+     * the icon alone isn't announced.
+     */
+    newTabLabel?: string;
+    /**
+     * On its own row, not inside running text: extends the hit area to 44px. Inside a
+     * paragraph it must stay off (it would overlap the lines around it).
+     */
+    standalone?: boolean;
+    className?: string;
+}
+/**
+ * Text link. A link NAVIGATES; a button ACTS (`Button`). Renders an `<a>`; pass
+ * `render` to use the router's link, e.g. `render={<RouterLink to="/citas" />}`.
+ *
+ * - Always underlined. Only on a row of its own, never inside a paragraph, can a
+ *   screen drop the underline (`className="no-underline"`): there the position already
+ *   says it is a link.
+ * - `default` (14) and `large` (16) follow the body text; if the paragraph uses
+ *   another size, it isn't this component but text styled as a link.
+ * - A standalone link that is the main action of a block is a `Button` with
+ *   `variant="ghost"`, not a Link.
+ */
+export declare function Link({ size, disabled, trailingIcon, external, newTabLabel, standalone, className, render, href, children, ...props }: LinkProps): React.JSX.Element;

package/dist/components/link/link.js

@@ -0,0 +1,94 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import { LinkExternal01Icon } from "../../icons/generated/link-external-01.js";
+import { cn } from "../../lib/cn.js";
+const linkVariants = cva(
+  [
+    // Always underlined: colour can't be the only cue that it is a link (WCAG 1.4.1).
+    "rounded-xs underline underline-offset-2 focus-ring",
+    "[&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      // Follows the body ramp: an inline link measures the same as the text around it.
+      size: {
+        default: "text-body-small [&_svg]:size-icon-sm",
+        large: "text-body-default [&_svg]:size-icon-md"
+      },
+      disabled: {
+        true: "cursor-not-allowed text-text-disabled",
+        false: "cursor-pointer text-text-link hover:decoration-2"
+      },
+      withIcon: {
+        true: "inline-flex items-center gap-1",
+        false: ""
+      },
+      standalone: {
+        true: "touch-target",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      disabled: false,
+      withIcon: false,
+      standalone: false
+    }
+  }
+);
+const preventNavigation = (event) => {
+  event.preventDefault();
+};
+function Link({
+  size,
+  disabled = false,
+  trailingIcon,
+  external = false,
+  newTabLabel,
+  standalone = false,
+  className,
+  render,
+  href,
+  children,
+  ...props
+}) {
+  const icon = trailingIcon ?? (external ? /* @__PURE__ */ jsx(LinkExternal01Icon, {}) : void 0);
+  const defaultProps = {
+    "data-slot": "link",
+    className: cn(
+      linkVariants({
+        size,
+        disabled,
+        withIcon: icon !== void 0,
+        standalone
+      }),
+      className
+    ),
+    // Only when there is one: an explicit `href: undefined` would reach (and could
+    // override) the href a router link computes.
+    ...href !== void 0 && !disabled ? { href } : {},
+    ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      children,
+      external && newTabLabel && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+        " ",
+        newTabLabel
+      ] }),
+      icon
+    ] })
+  };
+  const disabledProps = disabled ? { role: "link", "aria-disabled": true, onClick: preventNavigation } : {};
+  return useRender({
+    defaultTagName: "a",
+    render,
+    state: { disabled },
+    props: mergeProps(defaultProps, props, disabledProps)
+  });
+}
+export {
+  Link,
+  linkVariants
+};
+//# sourceMappingURL=link.js.map

package/dist/components/link/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sources":["../../../src/components/link/link.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva } from \"class-variance-authority\";\nimport type { MouseEvent, ReactNode } from \"react\";\n\nimport { LinkExternal01Icon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\n\nexport type LinkSize = \"default\" | \"large\";\n\nexport const linkVariants = cva(\n  [\n    // Always underlined: colour can't be the only cue that it is a link (WCAG 1.4.1).\n    \"rounded-xs underline underline-offset-2 focus-ring\",\n    \"[&_svg]:shrink-0\",\n  ],\n  {\n    variants: {\n      // Follows the body ramp: an inline link measures the same as the text around it.\n      size: {\n        default: \"text-body-small [&_svg]:size-icon-sm\",\n        large: \"text-body-default [&_svg]:size-icon-md\",\n      },\n      disabled: {\n        true: \"cursor-not-allowed text-text-disabled\",\n        false: \"cursor-pointer text-text-link hover:decoration-2\",\n      },\n      withIcon: {\n        true: \"inline-flex items-center gap-1\",\n        false: \"\",\n      },\n      standalone: {\n        true: \"touch-target\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      disabled: false,\n      withIcon: false,\n      standalone: false,\n    },\n  },\n);\n\nexport interface LinkState extends Record<string, unknown> {\n  disabled: boolean;\n}\n\nexport interface LinkProps\n  extends Omit<useRender.ComponentProps<\"a\", LinkState>, \"className\"> {\n  size?: LinkSize;\n  /**\n   * Not focusable and not clickable. An `<a>` can't be disabled natively, so the\n   * `href` is dropped and it is exposed as `aria-disabled`. With `render`, pass the\n   * router's own disabled prop too.\n   */\n  disabled?: boolean;\n  /** Icon after the label, e.g. `<ArrowRightIcon />`. `external` puts `link-external-01` here. */\n  trailingIcon?: ReactNode;\n  /**\n   * Opens in a new tab (`target=\"_blank\"`, `rel=\"noopener noreferrer\"`) and shows the\n   * external icon. For documents: privacy policy, terms, a PDF.\n   */\n  external?: boolean;\n  /**\n   * Screen-reader text appended when `external`, e.g. \"(se abre en una pestaña nueva)\":\n   * the icon alone isn't announced.\n   */\n  newTabLabel?: string;\n  /**\n   * On its own row, not inside running text: extends the hit area to 44px. Inside a\n   * paragraph it must stay off (it would overlap the lines around it).\n   */\n  standalone?: boolean;\n  className?: string;\n}\n\nconst preventNavigation = (event: MouseEvent<HTMLAnchorElement>): void => {\n  event.preventDefault();\n};\n\n/**\n * Text link. A link NAVIGATES; a button ACTS (`Button`). Renders an `<a>`; pass\n * `render` to use the router's link, e.g. `render={<RouterLink to=\"/citas\" />}`.\n *\n * - Always underlined. Only on a row of its own, never inside a paragraph, can a\n *   screen drop the underline (`className=\"no-underline\"`): there the position already\n *   says it is a link.\n * - `default` (14) and `large` (16) follow the body text; if the paragraph uses\n *   another size, it isn't this component but text styled as a link.\n * - A standalone link that is the main action of a block is a `Button` with\n *   `variant=\"ghost\"`, not a Link.\n */\nexport function Link({\n  size,\n  disabled = false,\n  trailingIcon,\n  external = false,\n  newTabLabel,\n  standalone = false,\n  className,\n  render,\n  href,\n  children,\n  ...props\n}: LinkProps): React.JSX.Element {\n  const icon = trailingIcon ?? (external ? <LinkExternal01Icon /> : undefined);\n\n  const defaultProps: useRender.ElementProps<\"a\"> & { \"data-slot\": string } = {\n    \"data-slot\": \"link\",\n    className: cn(\n      linkVariants({\n        size,\n        disabled,\n        withIcon: icon !== undefined,\n        standalone,\n      }),\n      className,\n    ),\n    // Only when there is one: an explicit `href: undefined` would reach (and could\n    // override) the href a router link computes.\n    ...(href !== undefined && !disabled ? { href } : {}),\n    ...(external ? { target: \"_blank\", rel: \"noopener noreferrer\" } : {}),\n    children: (\n      <>\n        {children}\n        {external && newTabLabel && (\n          <span className=\"sr-only\"> {newTabLabel}</span>\n        )}\n        {icon}\n      </>\n    ),\n  };\n\n  // Last, so they win over whatever came in `props`.\n  const disabledProps: useRender.ElementProps<\"a\"> = disabled\n    ? { role: \"link\", \"aria-disabled\": true, onClick: preventNavigation }\n    : {};\n\n  return useRender({\n    defaultTagName: \"a\",\n    render,\n    state: { disabled },\n    props: mergeProps<\"a\">(defaultProps, props, disabledProps),\n  });\n}\n"],"names":[],"mappings":";;;;;;AAUO,MAAM,eAAe;AAAA,EAC1B;AAAA;AAAA,IAEE;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA;AAAA,MAER,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,MAET,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,MAET,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,MAET,YAAY;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,IAAA;AAAA,EACd;AAEJ;AAmCA,MAAM,oBAAoB,CAAC,UAA+C;AACxE,QAAM,eAAA;AACR;AAcO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiC;AAC/B,QAAM,OAAO,iBAAiB,WAAW,oBAAC,sBAAmB,IAAK;AAElE,QAAM,eAAsE;AAAA,IAC1E,aAAa;AAAA,IACb,WAAW;AAAA,MACT,aAAa;AAAA,QACX;AAAA,QACA;AAAA,QACA,UAAU,SAAS;AAAA,QACnB;AAAA,MAAA,CACD;AAAA,MACD;AAAA,IAAA;AAAA;AAAA;AAAA,IAIF,GAAI,SAAS,UAAa,CAAC,WAAW,EAAE,KAAA,IAAS,CAAA;AAAA,IACjD,GAAI,WAAW,EAAE,QAAQ,UAAU,KAAK,sBAAA,IAA0B,CAAA;AAAA,IAClE,UACE,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA;AAAA,MACA,YAAY,eACX,qBAAC,QAAA,EAAK,WAAU,WAAU,UAAA;AAAA,QAAA;AAAA,QAAE;AAAA,MAAA,GAAY;AAAA,MAEzC;AAAA,IAAA,EAAA,CACH;AAAA,EAAA;AAKJ,QAAM,gBAA6C,WAC/C,EAAE,MAAM,QAAQ,iBAAiB,MAAM,SAAS,kBAAA,IAChD,CAAA;AAEJ,SAAO,UAAU;AAAA,IACf,gBAAgB;AAAA,IAChB;AAAA,IACA,OAAO,EAAE,SAAA;AAAA,IACT,OAAO,WAAgB,cAAc,OAAO,aAAa;AAAA,EAAA,CAC1D;AACH;"}

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

@@ -0,0 +1 @@
+export { ListRow, type ListRowProps } from "./list-row";

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

@@ -0,0 +1,47 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ComponentProps, MouseEventHandler, ReactNode } from "react";
+import { type IconContainerTone } from "../icon-container";
+export interface ListRowProps extends Omit<ComponentProps<"li">, "title" | "onClick"> {
+    /** Up to two lines, then "…". A three-line title means the data is wrong, not that room is missing. */
+    title: ReactNode;
+    /** Content (14px), one line. */
+    subtitle?: ReactNode;
+    /** Metadata above the title (12px), one line: "Pérdida de peso". */
+    overline?: ReactNode;
+    /** Leading=Icon: a MediCore icon, drawn inside a 40px `IconContainer`. */
+    icon?: ReactNode;
+    /** Tone of the icon's container. Default `brand` (an entry to a service). */
+    iconTone?: IconContainerTone;
+    /** Leading=Avatar: an `<Avatar size={40} />`. */
+    avatar?: ReactNode;
+    /** Leading=Thumbnail: an `<img alt="" />`, cropped to 80×60. */
+    thumbnail?: ReactNode;
+    /**
+     * Trailing=Action: something that acts right here without leaving (download a
+     * document, a "⋮" menu) — a ghost icon button with its OWN `aria-label`
+     * ("Descargar informe del 5 de enero"). It is a second interactive element next
+     * to the row's link, never nested inside it.
+     */
+    action?: ReactNode;
+    /** The row navigates: it becomes a link and shows the chevron. */
+    href?: string;
+    /** Router links: `render={<Link to="…" />}`. Same as `href`: link + chevron. */
+    render?: useRender.RenderProp;
+    /** The row acts without navigating (opens a sheet, picks an option): it becomes a `<button>`. */
+    onClick?: MouseEventHandler<HTMLElement>;
+}
+/**
+ * The portal's list row: leading · overline + title + subtitle · trailing.
+ *
+ * - It is an `<li>`: put it in a `<ul>` (`CardList` inside a card).
+ * - Pressable rows (`href`, `render` or `onClick`) are pressable from edge to edge:
+ *   the title is the link/button and it stretches over the whole row. Its
+ *   accessible name is the title.
+ * - Trailing follows from what the row does: a chevron when it navigates (link),
+ *   `action` when something happens right here, nothing when it's static. If the
+ *   whole row navigates, don't add a button inside as well.
+ * - Minimum height 64 so even a one-word row has a big enough target.
+ * - No fill of its own: it lives inside a Card or a surface. Separate rows with
+ *   `Divider`, never a border on each row.
+ */
+export declare function ListRow({ title, subtitle, overline, icon, iconTone, avatar, thumbnail, action, href, render, onClick, className, ...props }: ListRowProps): React.JSX.Element;

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

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { ChevronRightIcon } from "../../icons/generated/chevron-right.js";
+import { cn } from "../../lib/cn.js";
+import { IconContainer } from "../icon-container/icon-container.js";
+function ListRow({
+  title,
+  subtitle,
+  overline,
+  icon,
+  iconTone = "brand",
+  avatar,
+  thumbnail,
+  action,
+  href,
+  render,
+  onClick,
+  className,
+  ...props
+}) {
+  const isLink = Boolean(href || render);
+  const isInteractive = isLink || Boolean(onClick);
+  const target = useRender({
+    enabled: isInteractive,
+    render,
+    defaultTagName: isLink ? "a" : "button",
+    props: {
+      "data-slot": "list-row-target",
+      href,
+      onClick,
+      type: isLink ? void 0 : "button",
+      className: cn(
+        "block w-full cursor-pointer text-left outline-none",
+        "after:absolute after:inset-0 after:rounded-lg",
+        "focus-visible:after:outline-2 focus-visible:after:outline-border-focus focus-visible:after:outline-offset-2"
+      ),
+      children: /* @__PURE__ */ jsx("span", { className: "line-clamp-2", children: title })
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "data-slot": "list-row",
+      "data-interactive": isInteractive || void 0,
+      className: cn(
+        "relative flex min-h-16 items-center gap-3 rounded-lg px-4 py-3",
+        "data-interactive:transition-colors data-interactive:hover:bg-surface",
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx(IconContainer, { icon, size: 40, tone: iconTone }),
+        avatar,
+        thumbnail && /* @__PURE__ */ jsx("span", { className: "flex h-15 w-20 shrink-0 overflow-hidden rounded-lg bg-surface-raised *:size-full *:object-cover", children: thumbnail }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          overline && /* @__PURE__ */ jsx("p", { className: "truncate text-caption-default text-text-secondary", children: overline }),
+          /* @__PURE__ */ jsx("div", { className: "text-body-default text-text-primary", children: target ?? /* @__PURE__ */ jsx("p", { className: "line-clamp-2", children: title }) }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-body-small text-text-secondary", children: subtitle })
+        ] }),
+        action ? (
+          // Above the stretched link so it gets its own clicks.
+          /* @__PURE__ */ jsx("div", { className: "relative z-10 flex shrink-0 items-center gap-2", children: action })
+        ) : isLink && /* @__PURE__ */ jsx(ChevronRightIcon, { size: "md", className: "text-text-secondary" })
+      ]
+    }
+  );
+}
+export {
+  ListRow
+};
+//# sourceMappingURL=list-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-row.js","sources":["../../../src/components/list-row/list-row.tsx"],"sourcesContent":["import { useRender } from \"@base-ui/react/use-render\";\nimport type { ComponentProps, MouseEventHandler, ReactNode } from \"react\";\n\nimport { ChevronRightIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { IconContainer, type IconContainerTone } from \"../icon-container\";\n\nexport interface ListRowProps\n  extends Omit<ComponentProps<\"li\">, \"title\" | \"onClick\"> {\n  /** Up to two lines, then \"…\". A three-line title means the data is wrong, not that room is missing. */\n  title: ReactNode;\n  /** Content (14px), one line. */\n  subtitle?: ReactNode;\n  /** Metadata above the title (12px), one line: \"Pérdida de peso\". */\n  overline?: ReactNode;\n  /** Leading=Icon: a MediCore icon, drawn inside a 40px `IconContainer`. */\n  icon?: ReactNode;\n  /** Tone of the icon's container. Default `brand` (an entry to a service). */\n  iconTone?: IconContainerTone;\n  /** Leading=Avatar: an `<Avatar size={40} />`. */\n  avatar?: ReactNode;\n  /** Leading=Thumbnail: an `<img alt=\"\" />`, cropped to 80×60. */\n  thumbnail?: ReactNode;\n  /**\n   * Trailing=Action: something that acts right here without leaving (download a\n   * document, a \"⋮\" menu) — a ghost icon button with its OWN `aria-label`\n   * (\"Descargar informe del 5 de enero\"). It is a second interactive element next\n   * to the row's link, never nested inside it.\n   */\n  action?: ReactNode;\n  /** The row navigates: it becomes a link and shows the chevron. */\n  href?: string;\n  /** Router links: `render={<Link to=\"…\" />}`. Same as `href`: link + chevron. */\n  render?: useRender.RenderProp;\n  /** The row acts without navigating (opens a sheet, picks an option): it becomes a `<button>`. */\n  onClick?: MouseEventHandler<HTMLElement>;\n}\n\n/**\n * The portal's list row: leading · overline + title + subtitle · trailing.\n *\n * - It is an `<li>`: put it in a `<ul>` (`CardList` inside a card).\n * - Pressable rows (`href`, `render` or `onClick`) are pressable from edge to edge:\n *   the title is the link/button and it stretches over the whole row. Its\n *   accessible name is the title.\n * - Trailing follows from what the row does: a chevron when it navigates (link),\n *   `action` when something happens right here, nothing when it's static. If the\n *   whole row navigates, don't add a button inside as well.\n * - Minimum height 64 so even a one-word row has a big enough target.\n * - No fill of its own: it lives inside a Card or a surface. Separate rows with\n *   `Divider`, never a border on each row.\n */\nexport function ListRow({\n  title,\n  subtitle,\n  overline,\n  icon,\n  iconTone = \"brand\",\n  avatar,\n  thumbnail,\n  action,\n  href,\n  render,\n  onClick,\n  className,\n  ...props\n}: ListRowProps): React.JSX.Element {\n  const isLink = Boolean(href || render);\n  const isInteractive = isLink || Boolean(onClick);\n\n  const target = useRender({\n    enabled: isInteractive,\n    render,\n    defaultTagName: isLink ? \"a\" : \"button\",\n    props: {\n      \"data-slot\": \"list-row-target\",\n      href,\n      onClick,\n      type: isLink ? undefined : \"button\",\n      className: cn(\n        \"block w-full cursor-pointer text-left outline-none\",\n        \"after:absolute after:inset-0 after:rounded-lg\",\n        \"focus-visible:after:outline-2 focus-visible:after:outline-border-focus focus-visible:after:outline-offset-2\",\n      ),\n      children: <span className=\"line-clamp-2\">{title}</span>,\n    },\n  });\n\n  return (\n    <li\n      data-slot=\"list-row\"\n      data-interactive={isInteractive || undefined}\n      className={cn(\n        \"relative flex min-h-16 items-center gap-3 rounded-lg px-4 py-3\",\n        \"data-interactive:transition-colors data-interactive:hover:bg-surface\",\n        className,\n      )}\n      {...props}\n    >\n      {icon && <IconContainer icon={icon} size={40} tone={iconTone} />}\n      {avatar}\n      {thumbnail && (\n        <span className=\"flex h-15 w-20 shrink-0 overflow-hidden rounded-lg bg-surface-raised *:size-full *:object-cover\">\n          {thumbnail}\n        </span>\n      )}\n\n      <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        {overline && (\n          <p className=\"truncate text-caption-default text-text-secondary\">\n            {overline}\n          </p>\n        )}\n        <div className=\"text-body-default text-text-primary\">\n          {target ?? <p className=\"line-clamp-2\">{title}</p>}\n        </div>\n        {subtitle && (\n          <p className=\"truncate text-body-small text-text-secondary\">\n            {subtitle}\n          </p>\n        )}\n      </div>\n\n      {action ? (\n        // Above the stretched link so it gets its own clicks.\n        <div className=\"relative z-10 flex shrink-0 items-center gap-2\">\n          {action}\n        </div>\n      ) : (\n        isLink && <ChevronRightIcon size=\"md\" className=\"text-text-secondary\" />\n      )}\n    </li>\n  );\n}\n"],"names":[],"mappings":";;;;;AAoDO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoC;AAClC,QAAM,SAAS,QAAQ,QAAQ,MAAM;AACrC,QAAM,gBAAgB,UAAU,QAAQ,OAAO;AAE/C,QAAM,SAAS,UAAU;AAAA,IACvB,SAAS;AAAA,IACT;AAAA,IACA,gBAAgB,SAAS,MAAM;AAAA,IAC/B,OAAO;AAAA,MACL,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,MAAM,SAAS,SAAY;AAAA,MAC3B,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,UAAU,oBAAC,QAAA,EAAK,WAAU,gBAAgB,UAAA,MAAA,CAAM;AAAA,IAAA;AAAA,EAClD,CACD;AAED,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,oBAAkB,iBAAiB;AAAA,MACnC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,4BAAS,eAAA,EAAc,MAAY,MAAM,IAAI,MAAM,UAAU;AAAA,QAC7D;AAAA,QACA,aACC,oBAAC,QAAA,EAAK,WAAU,mGACb,UAAA,WACH;AAAA,QAGF,qBAAC,OAAA,EAAI,WAAU,wCACZ,UAAA;AAAA,UAAA,YACC,oBAAC,KAAA,EAAE,WAAU,qDACV,UAAA,UACH;AAAA,UAEF,oBAAC,OAAA,EAAI,WAAU,uCACZ,UAAA,8BAAW,KAAA,EAAE,WAAU,gBAAgB,UAAA,MAAA,CAAM,EAAA,CAChD;AAAA,UACC,YACC,oBAAC,KAAA,EAAE,WAAU,gDACV,UAAA,SAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QAEC;AAAA;AAAA,UAEC,oBAAC,OAAA,EAAI,WAAU,kDACZ,UAAA,OAAA,CACH;AAAA,YAEA,UAAU,oBAAC,kBAAA,EAAiB,MAAK,MAAK,WAAU,sBAAA,CAAsB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI9E;"}

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

@@ -0,0 +1 @@
+export { Logo, type LogoProps } from "./logo";

package/dist/components/logo/logo.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+export interface LogoProps extends Omit<ComponentProps<"svg">, "color" | "children"> {
+    /** `brand` on light backgrounds, `inverse` on dark ones (`bg-brand-dark`, photos). */
+    color?: "brand" | "inverse";
+}
+/**
+ * The mediQuo wordmark (92×18, a single even-odd path). The fill follows the colour
+ * tokens, so it adapts to dark mode. Scale it with a height class (`h-6`…) — the
+ * width follows — and never render it narrower than 92px: below that the "q" loses
+ * its tail. It is an image with the accessible name "mediQuo"; inside a link that
+ * already says where it goes, pass `aria-hidden` instead.
+ */
+export declare function Logo({ color, className, ...props }: LogoProps): React.JSX.Element;

package/dist/components/logo/logo.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/cn.js";
+const logoVariants = cva("h-[18px] w-auto shrink-0", {
+  variants: {
+    color: {
+      // Figma binds Color=Brand to Brand/brand-strong, not to text-brand: it is the
+      // token closest to the portal's real logo purple (#2E087D).
+      brand: "text-brand-strong",
+      inverse: "text-text-inverse"
+    }
+  },
+  defaultVariants: {
+    color: "brand"
+  }
+});
+function Logo({
+  color = "brand",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "92",
+      height: "18",
+      viewBox: "0 0 92 18",
+      fill: "currentColor",
+      role: "img",
+      "aria-label": "mediQuo",
+      "data-slot": "logo",
+      className: cn(logoVariants({ color }), className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M58.847 10.0996V11.8873C58.847 12.4936 58.3502 12.9912 57.7448 12.9912C57.1396 12.9912 56.6428 12.4936 56.6428 11.8873V10.0996H54.8108C54.2212 10.0996 53.7396 9.61755 53.7396 9.02681C53.7396 8.4363 54.2212 7.95434 54.8108 7.95434H56.6428V6.16644C56.6428 5.56024 57.1396 5.06272 57.7448 5.06272C58.3502 5.06272 58.847 5.56024 58.847 6.16644V7.95434H60.6792C61.2687 7.95434 61.7498 8.4363 61.7498 9.02681C61.7498 9.61755 61.2687 10.0996 60.6792 10.0996H58.847ZM63.79 6.1503C62.8909 4.22104 61.1721 2.86912 59.0742 2.44101C58.7086 2.3716 58.2673 2.3267 57.8112 2.31388C54.6757 2.36255 52.0799 4.42355 51.3478 7.44851C50.9332 9.15418 51.2556 11.0042 52.2324 12.5258C53.2094 14.0476 54.7572 15.1098 56.4786 15.4399C58.0237 15.7368 59.4858 15.5301 60.8448 14.8238L60.9054 14.7944C61.2069 14.6594 61.5171 14.6224 61.8735 14.6879L61.9589 14.7069C62.636 14.8851 63.3126 15.0626 63.99 15.24C63.8151 14.6007 63.6405 13.969 63.4639 13.3424L63.4477 13.279C63.3535 12.8541 63.4085 12.4692 63.6159 12.1026C64.6185 10.2489 64.6859 8.07242 63.79 6.1503ZM66.5206 17.5327C66.2951 17.8297 65.9495 18 65.572 18C65.3954 18 65.2551 17.9628 65.1424 17.933L64.0571 17.6487C63.2488 17.4371 62.4425 17.226 61.6355 17.0137C60.4276 17.5927 59.1498 17.8861 57.8326 17.8861C57.2467 17.8861 56.6448 17.8274 56.0439 17.7119C53.7043 17.2634 51.6068 15.829 50.2892 13.7769C48.9719 11.7251 48.5395 9.21943 49.1029 6.90247C50.0891 2.82739 53.586 0.0531708 57.8042 0.000293491L57.8263 0L57.8484 0.000440237C58.4439 0.0158485 59.0063 0.0733238 59.5204 0.171105C62.3578 0.750114 64.672 2.57172 65.8837 5.17195C67.0539 7.68316 67.0065 10.5142 65.7625 12.9826C66.0741 14.0934 66.3794 15.2177 66.6904 16.3655C66.7414 16.5494 66.8823 17.0562 66.5206 17.5327ZM89.4842 9.87602C89.4842 7.93967 88.0913 6.33652 86.1161 6.33652C84.0994 6.33652 82.8103 7.91873 82.8103 9.8343V9.87602C82.8103 11.7916 84.2034 13.3947 86.1576 13.3947C88.1953 13.3947 89.4842 11.8124 89.4842 9.9177V9.87602ZM86.1161 15.6014C82.7688 15.6014 80.2946 13.0404 80.2946 9.9177V9.87602C80.2946 6.73205 82.7896 4.12952 86.1576 4.12952C89.5259 4.12952 92 6.69057 92 9.8343V9.87602C92 12.9989 89.5052 15.6014 86.1161 15.6014ZM77.1828 15.456C76.4964 15.456 75.9143 14.9142 75.9143 14.2066V13.6446C75.2076 14.6856 74.1887 15.5807 72.4838 15.5807C70.0097 15.5807 68.5751 13.9152 68.5751 11.354V5.50359C68.5751 4.79599 69.1365 4.23371 69.8225 4.23371C70.5296 4.23371 71.091 4.79599 71.091 5.50359V10.6047C71.091 12.312 71.9432 13.2695 73.4401 13.2695C74.8955 13.2695 75.9143 12.2705 75.9143 10.5628V5.50359C75.9143 4.79599 76.4757 4.23371 77.1828 4.23371C77.8688 4.23371 78.4509 4.79599 78.4509 5.50359V14.2066C78.4509 14.8934 77.8895 15.456 77.1828 15.456ZM45.344 4.23371C46.0509 4.23371 46.6123 4.79599 46.6123 5.50359V14.2066C46.6123 14.9142 46.0509 15.456 45.344 15.456C44.6579 15.456 44.0966 14.9142 44.0966 14.2066V5.50359C44.0966 4.79599 44.6371 4.23371 45.344 4.23371ZM45.344 2.77628C44.5331 2.77628 43.9095 2.27656 43.9095 1.52698V1.4022C43.9095 0.652675 44.5331 0.173747 45.344 0.173747C46.1547 0.173747 46.7786 0.652675 46.7786 1.4022V1.52698C46.7786 2.27656 46.1547 2.77628 45.344 2.77628ZM39.0094 9.8343C39.0094 7.71055 37.5124 6.31563 35.8282 6.31563C34.1029 6.31563 32.6682 7.64798 32.6682 9.8343V9.87602C32.6682 11.9998 34.1236 13.3947 35.8282 13.3947C37.5124 13.3947 39.0094 11.9785 39.0094 9.87602V9.8343ZM40.2362 15.456C39.5291 15.456 38.9678 14.9142 38.9678 14.2066V13.5194C38.157 14.6648 37.0135 15.5807 35.2254 15.5807C32.6474 15.5807 30.1317 13.5194 30.1317 9.87602V9.8343C30.1317 6.19085 32.6057 4.12952 35.2254 4.12952C37.0343 4.12952 38.1777 5.02481 38.9678 6.06587V1.29806C38.9678 0.59021 39.5291 0.0489152 40.2151 0.0489152C40.9223 0.0489152 41.4836 0.59021 41.4836 1.29806V14.2066C41.4836 14.9142 40.9223 15.456 40.2362 15.456ZM23.5683 6.19085C22.0299 6.19085 20.9488 7.37734 20.72 9.08492H26.3543C26.1881 7.46103 25.2318 6.19085 23.5683 6.19085ZM27.6227 10.7504H20.7409C21.011 12.5412 22.2795 13.5401 23.9011 13.5401C24.9614 13.5401 25.7931 13.1657 26.5 12.5827C26.6871 12.4367 26.8534 12.3536 27.1445 12.3536C27.706 12.3536 28.1426 12.791 28.1426 13.3738C28.1426 13.6861 27.997 13.9567 27.8098 14.1443C26.8118 15.0394 25.5646 15.6014 23.8597 15.6014C20.6785 15.6014 18.225 13.2903 18.225 9.89676V9.85523C18.225 6.71126 20.4498 4.12952 23.5893 4.12952C27.0821 4.12952 28.8078 7.00284 28.8078 9.54276C28.8078 10.2507 28.2673 10.7504 27.6227 10.7504ZM15.4478 15.456C14.741 15.456 14.1795 14.9142 14.1795 14.2066V9.10571C14.1795 7.35655 13.3686 6.41987 11.955 6.41987C10.5826 6.41987 9.6055 7.37734 9.6055 9.14719V14.2066C9.6055 14.9142 9.04414 15.456 8.35807 15.456C7.65105 15.456 7.08983 14.9142 7.08983 14.2066V9.08492C7.08983 7.37734 6.2582 6.41987 4.86506 6.41987C3.47221 6.41987 2.51581 7.46103 2.51581 9.14719V14.2066C2.51581 14.9142 1.9545 15.456 1.24738 15.456C0.561358 15.456 0 14.9142 0 14.2066V5.50359C0 4.79599 0.540605 4.23371 1.24738 4.23371C1.9545 4.23371 2.51581 4.79599 2.51581 5.50359V6.0241C3.22263 5.04575 4.17898 4.12952 5.86316 4.12952C7.44337 4.12952 8.56589 4.89988 9.14815 6.06587C10.0212 4.89988 11.1857 4.12952 12.8488 4.12952C15.2398 4.12952 16.6951 5.64956 16.6951 8.33534V14.2066C16.6951 14.9142 16.1547 15.456 15.4478 15.456Z"
+        }
+      )
+    }
+  );
+}
+export {
+  Logo
+};
+//# sourceMappingURL=logo.js.map

package/dist/components/logo/logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.js","sources":["../../../src/components/logo/logo.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nconst logoVariants = cva(\"h-[18px] w-auto shrink-0\", {\n  variants: {\n    color: {\n      // Figma binds Color=Brand to Brand/brand-strong, not to text-brand: it is the\n      // token closest to the portal's real logo purple (#2E087D).\n      brand: \"text-brand-strong\",\n      inverse: \"text-text-inverse\",\n    },\n  },\n  defaultVariants: {\n    color: \"brand\",\n  },\n});\n\nexport interface LogoProps\n  extends Omit<ComponentProps<\"svg\">, \"color\" | \"children\"> {\n  /** `brand` on light backgrounds, `inverse` on dark ones (`bg-brand-dark`, photos). */\n  color?: \"brand\" | \"inverse\";\n}\n\n/**\n * The mediQuo wordmark (92×18, a single even-odd path). The fill follows the colour\n * tokens, so it adapts to dark mode. Scale it with a height class (`h-6`…) — the\n * width follows — and never render it narrower than 92px: below that the \"q\" loses\n * its tail. It is an image with the accessible name \"mediQuo\"; inside a link that\n * already says where it goes, pass `aria-hidden` instead.\n */\nexport function Logo({\n  color = \"brand\",\n  className,\n  ...props\n}: LogoProps): React.JSX.Element {\n  return (\n    <svg\n      width=\"92\"\n      height=\"18\"\n      viewBox=\"0 0 92 18\"\n      fill=\"currentColor\"\n      role=\"img\"\n      aria-label=\"mediQuo\"\n      data-slot=\"logo\"\n      className={cn(logoVariants({ color }), className)}\n      {...props}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M58.847 10.0996V11.8873C58.847 12.4936 58.3502 12.9912 57.7448 12.9912C57.1396 12.9912 56.6428 12.4936 56.6428 11.8873V10.0996H54.8108C54.2212 10.0996 53.7396 9.61755 53.7396 9.02681C53.7396 8.4363 54.2212 7.95434 54.8108 7.95434H56.6428V6.16644C56.6428 5.56024 57.1396 5.06272 57.7448 5.06272C58.3502 5.06272 58.847 5.56024 58.847 6.16644V7.95434H60.6792C61.2687 7.95434 61.7498 8.4363 61.7498 9.02681C61.7498 9.61755 61.2687 10.0996 60.6792 10.0996H58.847ZM63.79 6.1503C62.8909 4.22104 61.1721 2.86912 59.0742 2.44101C58.7086 2.3716 58.2673 2.3267 57.8112 2.31388C54.6757 2.36255 52.0799 4.42355 51.3478 7.44851C50.9332 9.15418 51.2556 11.0042 52.2324 12.5258C53.2094 14.0476 54.7572 15.1098 56.4786 15.4399C58.0237 15.7368 59.4858 15.5301 60.8448 14.8238L60.9054 14.7944C61.2069 14.6594 61.5171 14.6224 61.8735 14.6879L61.9589 14.7069C62.636 14.8851 63.3126 15.0626 63.99 15.24C63.8151 14.6007 63.6405 13.969 63.4639 13.3424L63.4477 13.279C63.3535 12.8541 63.4085 12.4692 63.6159 12.1026C64.6185 10.2489 64.6859 8.07242 63.79 6.1503ZM66.5206 17.5327C66.2951 17.8297 65.9495 18 65.572 18C65.3954 18 65.2551 17.9628 65.1424 17.933L64.0571 17.6487C63.2488 17.4371 62.4425 17.226 61.6355 17.0137C60.4276 17.5927 59.1498 17.8861 57.8326 17.8861C57.2467 17.8861 56.6448 17.8274 56.0439 17.7119C53.7043 17.2634 51.6068 15.829 50.2892 13.7769C48.9719 11.7251 48.5395 9.21943 49.1029 6.90247C50.0891 2.82739 53.586 0.0531708 57.8042 0.000293491L57.8263 0L57.8484 0.000440237C58.4439 0.0158485 59.0063 0.0733238 59.5204 0.171105C62.3578 0.750114 64.672 2.57172 65.8837 5.17195C67.0539 7.68316 67.0065 10.5142 65.7625 12.9826C66.0741 14.0934 66.3794 15.2177 66.6904 16.3655C66.7414 16.5494 66.8823 17.0562 66.5206 17.5327ZM89.4842 9.87602C89.4842 7.93967 88.0913 6.33652 86.1161 6.33652C84.0994 6.33652 82.8103 7.91873 82.8103 9.8343V9.87602C82.8103 11.7916 84.2034 13.3947 86.1576 13.3947C88.1953 13.3947 89.4842 11.8124 89.4842 9.9177V9.87602ZM86.1161 15.6014C82.7688 15.6014 80.2946 13.0404 80.2946 9.9177V9.87602C80.2946 6.73205 82.7896 4.12952 86.1576 4.12952C89.5259 4.12952 92 6.69057 92 9.8343V9.87602C92 12.9989 89.5052 15.6014 86.1161 15.6014ZM77.1828 15.456C76.4964 15.456 75.9143 14.9142 75.9143 14.2066V13.6446C75.2076 14.6856 74.1887 15.5807 72.4838 15.5807C70.0097 15.5807 68.5751 13.9152 68.5751 11.354V5.50359C68.5751 4.79599 69.1365 4.23371 69.8225 4.23371C70.5296 4.23371 71.091 4.79599 71.091 5.50359V10.6047C71.091 12.312 71.9432 13.2695 73.4401 13.2695C74.8955 13.2695 75.9143 12.2705 75.9143 10.5628V5.50359C75.9143 4.79599 76.4757 4.23371 77.1828 4.23371C77.8688 4.23371 78.4509 4.79599 78.4509 5.50359V14.2066C78.4509 14.8934 77.8895 15.456 77.1828 15.456ZM45.344 4.23371C46.0509 4.23371 46.6123 4.79599 46.6123 5.50359V14.2066C46.6123 14.9142 46.0509 15.456 45.344 15.456C44.6579 15.456 44.0966 14.9142 44.0966 14.2066V5.50359C44.0966 4.79599 44.6371 4.23371 45.344 4.23371ZM45.344 2.77628C44.5331 2.77628 43.9095 2.27656 43.9095 1.52698V1.4022C43.9095 0.652675 44.5331 0.173747 45.344 0.173747C46.1547 0.173747 46.7786 0.652675 46.7786 1.4022V1.52698C46.7786 2.27656 46.1547 2.77628 45.344 2.77628ZM39.0094 9.8343C39.0094 7.71055 37.5124 6.31563 35.8282 6.31563C34.1029 6.31563 32.6682 7.64798 32.6682 9.8343V9.87602C32.6682 11.9998 34.1236 13.3947 35.8282 13.3947C37.5124 13.3947 39.0094 11.9785 39.0094 9.87602V9.8343ZM40.2362 15.456C39.5291 15.456 38.9678 14.9142 38.9678 14.2066V13.5194C38.157 14.6648 37.0135 15.5807 35.2254 15.5807C32.6474 15.5807 30.1317 13.5194 30.1317 9.87602V9.8343C30.1317 6.19085 32.6057 4.12952 35.2254 4.12952C37.0343 4.12952 38.1777 5.02481 38.9678 6.06587V1.29806C38.9678 0.59021 39.5291 0.0489152 40.2151 0.0489152C40.9223 0.0489152 41.4836 0.59021 41.4836 1.29806V14.2066C41.4836 14.9142 40.9223 15.456 40.2362 15.456ZM23.5683 6.19085C22.0299 6.19085 20.9488 7.37734 20.72 9.08492H26.3543C26.1881 7.46103 25.2318 6.19085 23.5683 6.19085ZM27.6227 10.7504H20.7409C21.011 12.5412 22.2795 13.5401 23.9011 13.5401C24.9614 13.5401 25.7931 13.1657 26.5 12.5827C26.6871 12.4367 26.8534 12.3536 27.1445 12.3536C27.706 12.3536 28.1426 12.791 28.1426 13.3738C28.1426 13.6861 27.997 13.9567 27.8098 14.1443C26.8118 15.0394 25.5646 15.6014 23.8597 15.6014C20.6785 15.6014 18.225 13.2903 18.225 9.89676V9.85523C18.225 6.71126 20.4498 4.12952 23.5893 4.12952C27.0821 4.12952 28.8078 7.00284 28.8078 9.54276C28.8078 10.2507 28.2673 10.7504 27.6227 10.7504ZM15.4478 15.456C14.741 15.456 14.1795 14.9142 14.1795 14.2066V9.10571C14.1795 7.35655 13.3686 6.41987 11.955 6.41987C10.5826 6.41987 9.6055 7.37734 9.6055 9.14719V14.2066C9.6055 14.9142 9.04414 15.456 8.35807 15.456C7.65105 15.456 7.08983 14.9142 7.08983 14.2066V9.08492C7.08983 7.37734 6.2582 6.41987 4.86506 6.41987C3.47221 6.41987 2.51581 7.46103 2.51581 9.14719V14.2066C2.51581 14.9142 1.9545 15.456 1.24738 15.456C0.561358 15.456 0 14.9142 0 14.2066V5.50359C0 4.79599 0.540605 4.23371 1.24738 4.23371C1.9545 4.23371 2.51581 4.79599 2.51581 5.50359V6.0241C3.22263 5.04575 4.17898 4.12952 5.86316 4.12952C7.44337 4.12952 8.56589 4.89988 9.14815 6.06587C10.0212 4.89988 11.1857 4.12952 12.8488 4.12952C15.2398 4.12952 16.6951 5.64956 16.6951 8.33534V14.2066C16.6951 14.9142 16.1547 15.456 15.4478 15.456Z\"\n      />\n    </svg>\n  );\n}\n"],"names":[],"mappings":";;;AAKA,MAAM,eAAe,IAAI,4BAA4B;AAAA,EACnD,UAAU;AAAA,IACR,OAAO;AAAA;AAAA;AAAA,MAGL,OAAO;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,iBAAiB;AAAA,IACf,OAAO;AAAA,EAAA;AAEX,CAAC;AAeM,SAAS,KAAK;AAAA,EACnB,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAiC;AAC/B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,MAAK;AAAA,MACL,cAAW;AAAA,MACX,aAAU;AAAA,MACV,WAAW,GAAG,aAAa,EAAE,MAAA,CAAO,GAAG,SAAS;AAAA,MAC/C,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,UAAS;AAAA,UACT,GAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1 @@
+export { Menu, type MenuChangeEventDetails, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, type MenuLayout, type MenuProps, MenuSeparator, type MenuSeparatorProps, MenuTrigger, type MenuTriggerProps, } from "./menu";

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,79 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { type CSSProperties, type MouseEvent, type ReactElement, type ReactNode } from "react";
+import { type ModalChangeEventDetails } from "../modal/modal";
+/**
+ * `popover`: the floating 240px menu next to the trigger. `sheet`: a bottom sheet
+ * (`Modal layout="sheet"`) with the same options in 48px rows.
+ */
+export type MenuLayout = "popover" | "sheet";
+export type MenuChangeEventDetails = BaseMenu.Root.ChangeEventDetails | ModalChangeEventDetails;
+export interface MenuProps {
+    /**
+     * Leave it unset and it follows the screen: a sheet below `md` (a 240px menu next
+     * to the thumb covers what the person is looking at) and a popover from `md` up.
+     */
+    layout?: MenuLayout;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, eventDetails: MenuChangeEventDetails) => void;
+    /** Disables the whole menu (popover only). */
+    disabled?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Contextual menu: what the "⋯" of a Card, an appointment or the chat header opens.
+ * It is where everything that isn't the block's single primary action lives.
+ *
+ * Up to four options and, if there is one, the destructive option LAST, after a
+ * `MenuSeparator` — never in the middle, where a thumb going down the list would
+ * cross "Cancelar cita" on its way to "Compartir". If you need more than five, those
+ * things deserve their own screen.
+ *
+ * Keyboard: arrow keys move between options, Enter picks, Escape closes and focus
+ * returns to the trigger.
+ */
+export declare function Menu({ layout, open, defaultOpen, onOpenChange, disabled, children, }: MenuProps): React.JSX.Element;
+export interface MenuTriggerProps extends Omit<BaseMenu.Trigger.Props, "className" | "style" | "render" | "handle" | "payload" | "openOnHover" | "delay" | "closeDelay"> {
+    className?: string;
+    style?: CSSProperties;
+    /** Your own trigger element. Without `render` and `children` you get the "⋯" button. */
+    render?: ReactElement;
+}
+/**
+ * Opens the menu. With no `children` or `render` it is the "⋯" ghost icon button,
+ * named with the MediCore `moreOptions` label — pass `aria-label` to be more
+ * specific ("Opciones de la cita").
+ */
+export declare function MenuTrigger({ render, children, "aria-label": ariaLabel, ...props }: MenuTriggerProps): React.JSX.Element;
+export interface MenuContentProps {
+    children?: ReactNode;
+    className?: string;
+    /** Popover only: which side of the trigger it opens on. Flips when there is no room. */
+    side?: "top" | "bottom";
+    /** Popover only. `end` by default: the "⋯" usually sits at the right edge. */
+    align?: "start" | "center" | "end";
+    /** Sheet only: accessible name of the sheet. Defaults to the `moreOptions` label. */
+    label?: string;
+}
+/** The list of options. 240px popover with `shadow-md` and a border, or a bottom sheet. */
+export declare function MenuContent({ children, className, side, align, label, }: MenuContentProps): React.JSX.Element;
+export interface MenuItemProps {
+    /** The option's label. */
+    children: ReactNode;
+    /** 20px icon before the label. */
+    icon?: ReactNode;
+    /** `destructive` goes in text-error and always last, after a `MenuSeparator`. */
+    type?: "default" | "destructive";
+    disabled?: boolean;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /** Closes the menu after the click (default). */
+    closeOnClick?: boolean;
+    className?: string;
+}
+/** One option. 40px tall in the popover (48 in the sheet) so neighbours aren't tapped by mistake. */
+export declare function MenuItem({ children, icon, type, disabled, onClick, closeOnClick, className, }: MenuItemProps): React.JSX.Element;
+export interface MenuSeparatorProps {
+    className?: string;
+}
+/** The line before the destructive option. */
+export declare function MenuSeparator({ className, }: MenuSeparatorProps): React.JSX.Element;