@mediquo/medicore 0.1.0

package/dist/components/otp-input/otp-input.js

@@ -0,0 +1,152 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Input } from "@base-ui/react/input";
+import { useId, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { Spinner } from "../spinner/spinner.js";
+function onlyDigits(text, length) {
+  return text.replace(/\D/g, "").slice(0, length);
+}
+function OTPInput({
+  length = 6,
+  value,
+  defaultValue,
+  onValueChange,
+  onComplete,
+  validating = false,
+  validatingLabel,
+  error,
+  disabled = false,
+  readOnly,
+  className,
+  onFocus,
+  onBlur,
+  onChange,
+  onPaste,
+  onSelect,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const messageId = useId();
+  const [uncontrolled, setUncontrolled] = useState(
+    () => onlyDigits(defaultValue ?? "", length)
+  );
+  const [focused, setFocused] = useState(false);
+  const code = value === void 0 ? uncontrolled : onlyDigits(value, length);
+  const hasError = error !== void 0 && error !== null && error !== false;
+  const cells = Array.from({ length }, (_, position) => position);
+  const activeCell = Math.min(code.length, length - 1);
+  function commit(next) {
+    if (next === code) {
+      return;
+    }
+    if (value === void 0) {
+      setUncontrolled(next);
+    }
+    onValueChange?.(next);
+    if (next.length === length) {
+      onComplete?.(next);
+    }
+  }
+  function keepCaretAtEnd(input) {
+    const end = input.value.length;
+    const selectsAll = input.selectionStart === 0 && input.selectionEnd === end;
+    if (!selectsAll && input.selectionStart !== end) {
+      input.setSelectionRange(end, end);
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "otp-input",
+      className: cn("inline-flex max-w-full flex-col", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex gap-2", children: [
+          cells.map((position) => {
+            const digit = code.charAt(position);
+            const active = focused && !validating && !disabled && position === activeCell;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": true,
+                "data-slot": "otp-input-cell",
+                className: cn(
+                  "flex h-14 w-12 shrink-0 items-center justify-center rounded-md border border-border-input bg-background text-heading-h3 text-text-primary",
+                  "ring-1 ring-transparent ring-inset transition-[border-color,box-shadow]",
+                  hasError && "border-error ring-error",
+                  active && "border-border-focus ring-border-focus",
+                  disabled && "border-border bg-surface text-text-disabled"
+                ),
+                children: digit || active && /* @__PURE__ */ jsx("span", { className: "h-6 w-0.5 bg-text-primary motion-safe:animate-pulse" })
+              },
+              position
+            );
+          }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              "data-slot": "otp-input-control",
+              type: "text",
+              inputMode: "numeric",
+              autoComplete: "one-time-code",
+              pattern: "[0-9]*",
+              maxLength: length,
+              spellCheck: false,
+              value: code,
+              disabled,
+              readOnly: readOnly || validating,
+              "aria-label": ariaLabel ?? labels.verificationCode,
+              "aria-describedby": [messageId, ariaDescribedBy].filter(Boolean).join(" "),
+              "aria-invalid": hasError && !disabled ? true : void 0,
+              onChange: (event) => {
+                commit(onlyDigits(event.currentTarget.value, length));
+                onChange?.(event);
+              },
+              onPaste: (event) => {
+                onPaste?.(event);
+                if (event.defaultPrevented) {
+                  return;
+                }
+                event.preventDefault();
+                commit(onlyDigits(event.clipboardData.getData("text"), length));
+              },
+              onFocus: (event) => {
+                setFocused(true);
+                keepCaretAtEnd(event.currentTarget);
+                onFocus?.(event);
+              },
+              onBlur: (event) => {
+                setFocused(false);
+                onBlur?.(event);
+              },
+              onSelect: (event) => {
+                keepCaretAtEnd(event.currentTarget);
+                onSelect?.(event);
+              },
+              className: "absolute inset-0 size-full cursor-text bg-transparent text-heading-h3 text-transparent caret-transparent outline-none selection:bg-transparent disabled:cursor-not-allowed",
+              ...props
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: messageId,
+            "aria-live": "polite",
+            className: "w-0 min-w-full text-body-small",
+            children: validating ? /* @__PURE__ */ jsxs("p", { className: "mt-3 flex items-center gap-2 text-text-secondary", children: [
+              /* @__PURE__ */ jsx(Spinner, { size: 16, label: null }),
+              validatingLabel ?? labels.loading
+            ] }) : hasError ? /* @__PURE__ */ jsx("p", { className: "mt-3 text-text-error", children: error }) : null
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  OTPInput
+};
+//# sourceMappingURL=otp-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.js","sources":["../../../src/components/otp-input/otp-input.tsx"],"sourcesContent":["import { Input as BaseInput } from \"@base-ui/react/input\";\nimport { type ReactNode, useId, useState } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { Spinner } from \"../spinner\";\n\nexport interface OTPInputProps\n  extends Omit<\n    BaseInput.Props,\n    | \"className\"\n    | \"value\"\n    | \"defaultValue\"\n    | \"onValueChange\"\n    | \"type\"\n    | \"size\"\n    | \"maxLength\"\n    | \"pattern\"\n  > {\n  /** Number of digits. The Figma spec is 6 (WhatsApp / SMS code). */\n  length?: number;\n  /** The code typed so far (digits only). Use when controlled. */\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /**\n   * Called when the last digit is typed or a full code is pasted. Check the code here\n   * and set `validating`: there is no submit button.\n   */\n  onComplete?: (value: string) => void;\n  /** State=Validating: spinner + message, and the code can't be edited meanwhile. */\n  validating?: boolean;\n  /** Text next to the spinner: \"Comprobando el código…\". Defaults to \"Cargando\". */\n  validatingLabel?: ReactNode;\n  /**\n   * State=Error: every cell in red and this message under them. Say what to do: \"El\n   * código no es correcto. Revisa el mensaje o pide uno nuevo.\"\n   */\n  error?: ReactNode;\n  className?: string;\n}\n\nfunction onlyDigits(text: string, length: number): string {\n  return text.replace(/\\D/g, \"\").slice(0, length);\n}\n\n/**\n * Verification code sent by WhatsApp or SMS. Drawn as six cells but it is ONE input\n * (`inputmode=\"numeric\" autocomplete=\"one-time-code\"`), laid transparently over the\n * cells: the phone offers the code from the message in one tap, paste works, and a\n * screen reader announces a single field (\"Código de verificación\"), not six.\n *\n * Base UI's OTPField renders one input per cell, which is exactly what the spec rules\n * out, so this is a plain input driving the cells.\n *\n * - The code is checked on its own when complete (`onComplete` → `validating`).\n * - The message under the cells (validating / error) is `aria-live=\"polite\"`.\n * - The accessible name defaults to \"Código de verificación\"; the heading above the\n *   cells (\"Escribe el código\") is not a label.\n */\nexport function OTPInput({\n  length = 6,\n  value,\n  defaultValue,\n  onValueChange,\n  onComplete,\n  validating = false,\n  validatingLabel,\n  error,\n  disabled = false,\n  readOnly,\n  className,\n  onFocus,\n  onBlur,\n  onChange,\n  onPaste,\n  onSelect,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": ariaDescribedBy,\n  ...props\n}: OTPInputProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const messageId = useId();\n  const [uncontrolled, setUncontrolled] = useState(() =>\n    onlyDigits(defaultValue ?? \"\", length),\n  );\n  const [focused, setFocused] = useState(false);\n  const code = value === undefined ? uncontrolled : onlyDigits(value, length);\n  const hasError = error !== undefined && error !== null && error !== false;\n  const cells = Array.from({ length }, (_, position) => position);\n  const activeCell = Math.min(code.length, length - 1);\n\n  function commit(next: string): void {\n    if (next === code) {\n      return;\n    }\n    if (value === undefined) {\n      setUncontrolled(next);\n    }\n    onValueChange?.(next);\n    if (next.length === length) {\n      onComplete?.(next);\n    }\n  }\n\n  // One input, so the caret always sits after the last digit: typing appends and\n  // backspace removes the last one. Selecting everything (to retype) is allowed.\n  function keepCaretAtEnd(input: HTMLInputElement): void {\n    const end = input.value.length;\n    const selectsAll = input.selectionStart === 0 && input.selectionEnd === end;\n    if (!selectsAll && input.selectionStart !== end) {\n      input.setSelectionRange(end, end);\n    }\n  }\n\n  return (\n    <div\n      data-slot=\"otp-input\"\n      className={cn(\"inline-flex max-w-full flex-col\", className)}\n    >\n      <div className=\"relative flex gap-2\">\n        {cells.map((position) => {\n          const digit = code.charAt(position);\n          const active =\n            focused && !validating && !disabled && position === activeCell;\n          return (\n            <div\n              key={position}\n              aria-hidden\n              data-slot=\"otp-input-cell\"\n              className={cn(\n                \"flex h-14 w-12 shrink-0 items-center justify-center rounded-md border border-border-input bg-background text-heading-h3 text-text-primary\",\n                \"ring-1 ring-transparent ring-inset transition-[border-color,box-shadow]\",\n                hasError && \"border-error ring-error\",\n                active && \"border-border-focus ring-border-focus\",\n                disabled && \"border-border bg-surface text-text-disabled\",\n              )}\n            >\n              {digit ||\n                (active && (\n                  <span className=\"h-6 w-0.5 bg-text-primary motion-safe:animate-pulse\" />\n                ))}\n            </div>\n          );\n        })}\n        <BaseInput\n          data-slot=\"otp-input-control\"\n          type=\"text\"\n          inputMode=\"numeric\"\n          autoComplete=\"one-time-code\"\n          pattern=\"[0-9]*\"\n          maxLength={length}\n          spellCheck={false}\n          value={code}\n          disabled={disabled}\n          readOnly={readOnly || validating}\n          aria-label={ariaLabel ?? labels.verificationCode}\n          aria-describedby={[messageId, ariaDescribedBy]\n            .filter(Boolean)\n            .join(\" \")}\n          aria-invalid={hasError && !disabled ? true : undefined}\n          onChange={(event) => {\n            commit(onlyDigits(event.currentTarget.value, length));\n            onChange?.(event);\n          }}\n          onPaste={(event) => {\n            onPaste?.(event);\n            if (event.defaultPrevented) {\n              return;\n            }\n            // Codes are often pasted as \"482 916\" or \"482-916\": keep the digits.\n            event.preventDefault();\n            commit(onlyDigits(event.clipboardData.getData(\"text\"), length));\n          }}\n          onFocus={(event) => {\n            setFocused(true);\n            keepCaretAtEnd(event.currentTarget);\n            onFocus?.(event);\n          }}\n          onBlur={(event) => {\n            setFocused(false);\n            onBlur?.(event);\n          }}\n          onSelect={(event) => {\n            keepCaretAtEnd(event.currentTarget);\n            onSelect?.(event);\n          }}\n          className=\"absolute inset-0 size-full cursor-text bg-transparent text-heading-h3 text-transparent caret-transparent outline-none selection:bg-transparent disabled:cursor-not-allowed\"\n          {...props}\n        />\n      </div>\n      {/* Always in the DOM so the live region exists before its text arrives. */}\n      <div\n        id={messageId}\n        aria-live=\"polite\"\n        className=\"w-0 min-w-full text-body-small\"\n      >\n        {validating ? (\n          <p className=\"mt-3 flex items-center gap-2 text-text-secondary\">\n            <Spinner size={16} label={null} />\n            {validatingLabel ?? labels.loading}\n          </p>\n        ) : hasError ? (\n          <p className=\"mt-3 text-text-error\">{error}</p>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n"],"names":["BaseInput"],"mappings":"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"}

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

@@ -0,0 +1 @@
+export { PageHeader, type PageHeaderProps } from "./page-header";

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

@@ -0,0 +1,24 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface PageHeaderProps extends Omit<ComponentProps<"div">, "title"> {
+    /** The screen's name. Rendered as the page's `<h1>`. */
+    title: ReactNode;
+    /** Above the title, for second- and third-level pages: a `Breadcrumb`. */
+    breadcrumb?: ReactNode;
+    /** One line under the title, in `text-secondary`. */
+    description?: ReactNode;
+    /** Right-aligned: the page's `Button`s, primary last. */
+    actions?: ReactNode;
+}
+/**
+ * Desktop page header (it used to be called "Topnav", but it never navigated: the
+ * navigation lives in the Sidebar). At least 88px tall, like `SidebarHeader`, so both
+ * top lines match.
+ *
+ * - The title LOOKS like Heading/h2 (24px, text-brand: identity of the screen) but it
+ *   IS the page's `<h1>`, and there must be no other.
+ * - Desktop only: below the `lg` breakpoint it is hidden and the title goes to
+ *   `MobileHeader`, which is the `<h1>` there. Put its actions in the MobileHeader's
+ *   trailing slot (or in the content) for mobile.
+ * - Its side padding follows the page gutter, the same as `AppShellContent`.
+ */
+export declare function PageHeader({ title, breadcrumb, description, actions, className, ...props }: PageHeaderProps): React.JSX.Element;

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

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function PageHeader({
+  title,
+  breadcrumb,
+  description,
+  actions,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "page-header",
+      className: cn(
+        "hidden min-h-22 items-center gap-6 px-6 py-4 lg:flex xl:px-15",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+          breadcrumb,
+          /* @__PURE__ */ jsx("h1", { className: "text-heading-h2 text-text-brand", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-body-default text-text-secondary", children: description })
+        ] }),
+        actions && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "page-header-actions",
+            className: "flex shrink-0 items-center gap-3",
+            children: actions
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PageHeader
+};
+//# sourceMappingURL=page-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.js","sources":["../../../src/components/page-header/page-header.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nexport interface PageHeaderProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n  /** The screen's name. Rendered as the page's `<h1>`. */\n  title: ReactNode;\n  /** Above the title, for second- and third-level pages: a `Breadcrumb`. */\n  breadcrumb?: ReactNode;\n  /** One line under the title, in `text-secondary`. */\n  description?: ReactNode;\n  /** Right-aligned: the page's `Button`s, primary last. */\n  actions?: ReactNode;\n}\n\n/**\n * Desktop page header (it used to be called \"Topnav\", but it never navigated: the\n * navigation lives in the Sidebar). At least 88px tall, like `SidebarHeader`, so both\n * top lines match.\n *\n * - The title LOOKS like Heading/h2 (24px, text-brand: identity of the screen) but it\n *   IS the page's `<h1>`, and there must be no other.\n * - Desktop only: below the `lg` breakpoint it is hidden and the title goes to\n *   `MobileHeader`, which is the `<h1>` there. Put its actions in the MobileHeader's\n *   trailing slot (or in the content) for mobile.\n * - Its side padding follows the page gutter, the same as `AppShellContent`.\n */\nexport function PageHeader({\n  title,\n  breadcrumb,\n  description,\n  actions,\n  className,\n  ...props\n}: PageHeaderProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"page-header\"\n      className={cn(\n        \"hidden min-h-22 items-center gap-6 px-6 py-4 lg:flex xl:px-15\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n        {breadcrumb}\n        <h1 className=\"text-heading-h2 text-text-brand\">{title}</h1>\n        {description && (\n          <p className=\"text-body-default text-text-secondary\">{description}</p>\n        )}\n      </div>\n      {actions && (\n        <div\n          data-slot=\"page-header-actions\"\n          className=\"flex shrink-0 items-center gap-3\"\n        >\n          {actions}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AA2BO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuC;AACrC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,sCACZ,UAAA;AAAA,UAAA;AAAA,UACD,oBAAC,MAAA,EAAG,WAAU,mCAAmC,UAAA,OAAM;AAAA,UACtD,eACC,oBAAC,KAAA,EAAE,WAAU,yCAAyC,UAAA,YAAA,CAAY;AAAA,QAAA,GAEtE;AAAA,QACC,WACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YAET,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/phone-input/index.d.ts

@@ -0,0 +1 @@
+export { getDefaultPhonePrefixes, PhoneInput, type PhoneInputProps, type PhonePrefix, } from "./phone-input";

package/dist/components/phone-input/phone-input.d.ts

@@ -0,0 +1,46 @@
+import { type InputProps } from "../input/input";
+export interface PhonePrefix {
+    /** Dial code, with the plus: "+34". It is what the box shows and what is submitted. */
+    value: string;
+    /** Country name for the list: "España". The option reads "España (+34)". */
+    label: string;
+}
+/**
+ * A short default list (Spain, neighbours and the main Latin American markets). The
+ * country names come from `Intl.DisplayNames` in the page language (`<html lang>`),
+ * so nothing is hardcoded. The real list comes from the app.
+ */
+export declare function getDefaultPhonePrefixes(): PhonePrefix[];
+export interface PhoneInputProps extends Omit<InputProps, "type" | "value" | "defaultValue" | "onValueChange" | "size" | "leadingIcon" | "trailingIcon" | "clearable" | "name"> {
+    /** Number without spaces (digits only). Use when controlled. */
+    value?: string;
+    /** Number without spaces. Use when uncontrolled. */
+    defaultValue?: string;
+    /** Called with the digits only, never with the grouping spaces. */
+    onValueChange?: (value: string) => void;
+    /** Countries in the prefix list. Defaults to `getDefaultPhonePrefixes()`. */
+    prefixes?: readonly PhonePrefix[];
+    /** Chosen dial code ("+34"). Use when controlled. */
+    prefix?: string;
+    /** Initial dial code, the country chosen when entering. Default "+34". */
+    defaultPrefix?: string;
+    onPrefixChange?: (prefix: string) => void;
+    /** Form name of the number. It is submitted without spaces. */
+    name?: string;
+    /** Form name of the dial code. */
+    prefixName?: string;
+}
+/**
+ * Mobile number with country prefix: two controls in a row, a native prefix select
+ * (+34 by default, `autocomplete="tel-country-code"`) and the number
+ * (`type="tel" inputmode="tel" autocomplete="tel-national"`).
+ *
+ * The number is shown in groups of three (612 345 678) but `onValueChange` and the
+ * form get it without spaces. Put it inside `Field` for the label and the message,
+ * and make the error say what happens ("Este número no parece un móvil español: tiene
+ * que empezar por 6 o 7 y tener 9 cifras"), not just "Número no válido".
+ *
+ * The prefix list opens the operating system's picker (a real `<select>` under the
+ * "+34"), so it is searchable and accessible on every device.
+ */
+export declare function PhoneInput({ value, defaultValue, onValueChange, prefixes: prefixesProp, prefix: prefixProp, defaultPrefix, onPrefixChange, name, prefixName, disabled: disabledProp, invalid, className, onChange, ref, "aria-label": ariaLabel, ...props }: PhoneInputProps): React.JSX.Element;

package/dist/components/phone-input/phone-input.js

@@ -0,0 +1,219 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo, useState, useRef, useCallback, useLayoutEffect } from "react";
+import { ChevronDownIcon } from "../../icons/generated/chevron-down.js";
+import { cn } from "../../lib/cn.js";
+import { useFieldContext } from "../field/field-context.js";
+import { wrappedControlStates, controlHeight, controlRow, controlBox } from "../input/control-styles.js";
+import { Input } from "../input/input.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+const MAX_DIGITS = 15;
+const defaultRegions = [
+  ["ES", "+34"],
+  ["PT", "+351"],
+  ["FR", "+33"],
+  ["IT", "+39"],
+  ["DE", "+49"],
+  ["GB", "+44"],
+  ["MX", "+52"],
+  ["CO", "+57"],
+  ["AR", "+54"],
+  ["CL", "+56"]
+];
+function getDefaultPhonePrefixes() {
+  const lang = typeof document === "undefined" ? void 0 : document.documentElement.lang || void 0;
+  let names;
+  try {
+    names = new Intl.DisplayNames(lang ? [lang] : void 0, {
+      type: "region"
+    });
+  } catch {
+    names = void 0;
+  }
+  return defaultRegions.map(([region, value]) => ({
+    value,
+    label: names?.of(region) ?? region
+  }));
+}
+function formatDigits(digits) {
+  return digits.replace(/(\d{3})(?=\d)/g, "$1 ");
+}
+function caretAfterDigits(formatted, digits) {
+  if (digits <= 0) {
+    return 0;
+  }
+  let seen = 0;
+  for (let index = 0; index < formatted.length; index++) {
+    if (/\d/.test(formatted.charAt(index))) {
+      seen++;
+      if (seen === digits) {
+        return index + 1;
+      }
+    }
+  }
+  return formatted.length;
+}
+function PhoneInput({
+  value,
+  defaultValue,
+  onValueChange,
+  prefixes: prefixesProp,
+  prefix: prefixProp,
+  defaultPrefix = "+34",
+  onPrefixChange,
+  name,
+  prefixName,
+  disabled: disabledProp,
+  invalid,
+  className,
+  onChange,
+  ref,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const field = useFieldContext();
+  const disabled = Boolean(disabledProp || field?.disabled);
+  const prefixes = useMemo(
+    () => prefixesProp ?? getDefaultPhonePrefixes(),
+    [prefixesProp]
+  );
+  const [uncontrolledPrefix, setUncontrolledPrefix] = useState(defaultPrefix);
+  const prefix = prefixProp ?? uncontrolledPrefix;
+  const [uncontrolledDigits, setUncontrolledDigits] = useState(
+    () => (defaultValue ?? "").replace(/\D/g, "").slice(0, MAX_DIGITS)
+  );
+  const digits = value === void 0 ? uncontrolledDigits : value.replace(/\D/g, "").slice(0, MAX_DIGITS);
+  const formatted = formatDigits(digits);
+  const inputRef = useRef(null);
+  const pendingCaret = useRef(null);
+  const setRefs = useCallback(
+    (node) => {
+      inputRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+    const digitsBefore = pendingCaret.current;
+    pendingCaret.current = null;
+    if (digitsBefore === null || !input || document.activeElement !== input) {
+      return;
+    }
+    const position = caretAfterDigits(input.value, digitsBefore);
+    input.setSelectionRange(position, position);
+  }, [formatted]);
+  function handleChange(event) {
+    const input = event.currentTarget;
+    const raw = input.value;
+    const caret = input.selectionStart ?? raw.length;
+    let next = raw.replace(/\D/g, "");
+    let digitsBefore = raw.slice(0, caret).replace(/\D/g, "").length;
+    const compact = raw.replace(/[^\d+]/g, "");
+    if (compact.startsWith("+")) {
+      next = compact.startsWith(prefix) ? compact.slice(prefix.length) : compact.slice(1);
+      digitsBefore = next.length;
+    } else if (event.nativeEvent.inputType === "deleteContentBackward" && next === digits && digitsBefore > 0) {
+      next = next.slice(0, digitsBefore - 1) + next.slice(digitsBefore);
+      digitsBefore -= 1;
+    }
+    next = next.slice(0, MAX_DIGITS);
+    pendingCaret.current = Math.min(digitsBefore, next.length);
+    if (value === void 0) {
+      setUncontrolledDigits(next);
+    }
+    if (next !== digits) {
+      onValueChange?.(next);
+    }
+    onChange?.(event);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "phone-input",
+      className: cn("group/phone flex w-full min-w-0 gap-2", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            "data-slot": "phone-input-prefix",
+            className: cn(
+              "group/control relative w-24 shrink-0",
+              controlBox,
+              controlRow,
+              controlHeight.default,
+              wrappedControlStates,
+              // The number carries aria-invalid (it is the Field control): the prefix follows it.
+              "group-has-[[aria-invalid=true]]/phone:border-error group-has-[[aria-invalid=true]]/phone:ring-error"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "min-w-0 flex-1 truncate", children: prefix }),
+              /* @__PURE__ */ jsx(
+                ChevronDownIcon,
+                {
+                  size: "sm",
+                  className: "text-text-primary group-has-[select:disabled]/control:text-text-disabled"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  "aria-label": labels.phonePrefix,
+                  autoComplete: "tel-country-code",
+                  name: prefixName,
+                  value: prefix,
+                  disabled,
+                  onChange: (event) => {
+                    const next = event.currentTarget.value;
+                    if (prefixProp === void 0) {
+                      setUncontrolledPrefix(next);
+                    }
+                    onPrefixChange?.(next);
+                  },
+                  className: "absolute inset-0 size-full cursor-pointer appearance-none opacity-0 disabled:cursor-not-allowed",
+                  children: [
+                    prefixes.some((option) => option.value === prefix) ? null : /* @__PURE__ */ jsx("option", { value: prefix, children: prefix }),
+                    prefixes.map((option) => /* @__PURE__ */ jsx(
+                      "option",
+                      {
+                        value: option.value,
+                        children: `${option.label} (${option.value})`
+                      },
+                      `${option.value}-${option.label}`
+                    ))
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: setRefs,
+            type: "tel",
+            inputMode: "tel",
+            autoComplete: "tel-national",
+            "aria-label": ariaLabel ?? labels.phoneNumber,
+            value: formatted,
+            disabled,
+            invalid,
+            onChange: handleChange,
+            className: "flex-1",
+            ...props
+          }
+        ),
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: digits, disabled })
+      ]
+    }
+  );
+}
+export {
+  PhoneInput,
+  getDefaultPhonePrefixes
+};
+//# sourceMappingURL=phone-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"phone-input.js","sources":["../../../src/components/phone-input/phone-input.tsx"],"sourcesContent":["import { useCallback, useLayoutEffect, useMemo, useRef, useState } from \"react\";\n\nimport { ChevronDownIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { useFieldContext } from \"../field/field-context\";\nimport {\n  controlBox,\n  controlHeight,\n  controlRow,\n  wrappedControlStates,\n} from \"../input/control-styles\";\nimport { Input, type InputProps } from \"../input/input\";\n\nexport interface PhonePrefix {\n  /** Dial code, with the plus: \"+34\". It is what the box shows and what is submitted. */\n  value: string;\n  /** Country name for the list: \"España\". The option reads \"España (+34)\". */\n  label: string;\n}\n\ntype InputChangeEvent = Parameters<NonNullable<InputProps[\"onChange\"]>>[0];\n\n/** E.164 allows at most 15 digits. */\nconst MAX_DIGITS = 15;\n\nconst defaultRegions: ReadonlyArray<readonly [region: string, dial: string]> = [\n  [\"ES\", \"+34\"],\n  [\"PT\", \"+351\"],\n  [\"FR\", \"+33\"],\n  [\"IT\", \"+39\"],\n  [\"DE\", \"+49\"],\n  [\"GB\", \"+44\"],\n  [\"MX\", \"+52\"],\n  [\"CO\", \"+57\"],\n  [\"AR\", \"+54\"],\n  [\"CL\", \"+56\"],\n];\n\n/**\n * A short default list (Spain, neighbours and the main Latin American markets). The\n * country names come from `Intl.DisplayNames` in the page language (`<html lang>`),\n * so nothing is hardcoded. The real list comes from the app.\n */\nexport function getDefaultPhonePrefixes(): PhonePrefix[] {\n  const lang =\n    typeof document === \"undefined\"\n      ? undefined\n      : document.documentElement.lang || undefined;\n  let names: Intl.DisplayNames | undefined;\n  try {\n    names = new Intl.DisplayNames(lang ? [lang] : undefined, {\n      type: \"region\",\n    });\n  } catch {\n    names = undefined;\n  }\n  return defaultRegions.map(([region, value]) => ({\n    value,\n    label: names?.of(region) ?? region,\n  }));\n}\n\n/** 612345678 → \"612 345 678\": groups of three, as the person reads it aloud. */\nfunction formatDigits(digits: string): string {\n  return digits.replace(/(\\d{3})(?=\\d)/g, \"$1 \");\n}\n\n/** Where the caret goes in `formatted` so that `digits` digits are before it. */\nfunction caretAfterDigits(formatted: string, digits: number): number {\n  if (digits <= 0) {\n    return 0;\n  }\n  let seen = 0;\n  for (let index = 0; index < formatted.length; index++) {\n    if (/\\d/.test(formatted.charAt(index))) {\n      seen++;\n      if (seen === digits) {\n        return index + 1;\n      }\n    }\n  }\n  return formatted.length;\n}\n\nexport interface PhoneInputProps\n  extends Omit<\n    InputProps,\n    | \"type\"\n    | \"value\"\n    | \"defaultValue\"\n    | \"onValueChange\"\n    | \"size\"\n    | \"leadingIcon\"\n    | \"trailingIcon\"\n    | \"clearable\"\n    | \"name\"\n  > {\n  /** Number without spaces (digits only). Use when controlled. */\n  value?: string;\n  /** Number without spaces. Use when uncontrolled. */\n  defaultValue?: string;\n  /** Called with the digits only, never with the grouping spaces. */\n  onValueChange?: (value: string) => void;\n  /** Countries in the prefix list. Defaults to `getDefaultPhonePrefixes()`. */\n  prefixes?: readonly PhonePrefix[];\n  /** Chosen dial code (\"+34\"). Use when controlled. */\n  prefix?: string;\n  /** Initial dial code, the country chosen when entering. Default \"+34\". */\n  defaultPrefix?: string;\n  onPrefixChange?: (prefix: string) => void;\n  /** Form name of the number. It is submitted without spaces. */\n  name?: string;\n  /** Form name of the dial code. */\n  prefixName?: string;\n}\n\n/**\n * Mobile number with country prefix: two controls in a row, a native prefix select\n * (+34 by default, `autocomplete=\"tel-country-code\"`) and the number\n * (`type=\"tel\" inputmode=\"tel\" autocomplete=\"tel-national\"`).\n *\n * The number is shown in groups of three (612 345 678) but `onValueChange` and the\n * form get it without spaces. Put it inside `Field` for the label and the message,\n * and make the error say what happens (\"Este número no parece un móvil español: tiene\n * que empezar por 6 o 7 y tener 9 cifras\"), not just \"Número no válido\".\n *\n * The prefix list opens the operating system's picker (a real `<select>` under the\n * \"+34\"), so it is searchable and accessible on every device.\n */\nexport function PhoneInput({\n  value,\n  defaultValue,\n  onValueChange,\n  prefixes: prefixesProp,\n  prefix: prefixProp,\n  defaultPrefix = \"+34\",\n  onPrefixChange,\n  name,\n  prefixName,\n  disabled: disabledProp,\n  invalid,\n  className,\n  onChange,\n  ref,\n  \"aria-label\": ariaLabel,\n  ...props\n}: PhoneInputProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const field = useFieldContext();\n  const disabled = Boolean(disabledProp || field?.disabled);\n\n  const prefixes = useMemo(\n    () => prefixesProp ?? getDefaultPhonePrefixes(),\n    [prefixesProp],\n  );\n  const [uncontrolledPrefix, setUncontrolledPrefix] = useState(defaultPrefix);\n  const prefix = prefixProp ?? uncontrolledPrefix;\n\n  const [uncontrolledDigits, setUncontrolledDigits] = useState(() =>\n    (defaultValue ?? \"\").replace(/\\D/g, \"\").slice(0, MAX_DIGITS),\n  );\n  const digits =\n    value === undefined\n      ? uncontrolledDigits\n      : value.replace(/\\D/g, \"\").slice(0, MAX_DIGITS);\n  const formatted = formatDigits(digits);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const pendingCaret = useRef<number | null>(null);\n\n  const setRefs = useCallback(\n    (node: HTMLInputElement | null) => {\n      inputRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    },\n    [ref],\n  );\n\n  // Reformatting moves the caret to the end; put it back after the same digit.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: runs when the formatted text changes.\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    const digitsBefore = pendingCaret.current;\n    pendingCaret.current = null;\n    if (digitsBefore === null || !input || document.activeElement !== input) {\n      return;\n    }\n    const position = caretAfterDigits(input.value, digitsBefore);\n    input.setSelectionRange(position, position);\n  }, [formatted]);\n\n  function handleChange(event: InputChangeEvent): void {\n    const input = event.currentTarget;\n    const raw = input.value;\n    const caret = input.selectionStart ?? raw.length;\n    let next = raw.replace(/\\D/g, \"\");\n    let digitsBefore = raw.slice(0, caret).replace(/\\D/g, \"\").length;\n\n    const compact = raw.replace(/[^\\d+]/g, \"\");\n    if (compact.startsWith(\"+\")) {\n      // A full number pasted or autofilled with its prefix: keep the national part.\n      next = compact.startsWith(prefix)\n        ? compact.slice(prefix.length)\n        : compact.slice(1);\n      digitsBefore = next.length;\n    } else if (\n      (event.nativeEvent as InputEvent).inputType === \"deleteContentBackward\" &&\n      next === digits &&\n      digitsBefore > 0\n    ) {\n      // Backspace on a grouping space: delete the digit before it instead.\n      next = next.slice(0, digitsBefore - 1) + next.slice(digitsBefore);\n      digitsBefore -= 1;\n    }\n\n    next = next.slice(0, MAX_DIGITS);\n    pendingCaret.current = Math.min(digitsBefore, next.length);\n    if (value === undefined) {\n      setUncontrolledDigits(next);\n    }\n    if (next !== digits) {\n      onValueChange?.(next);\n    }\n    onChange?.(event);\n  }\n\n  return (\n    <div\n      data-slot=\"phone-input\"\n      className={cn(\"group/phone flex w-full min-w-0 gap-2\", className)}\n    >\n      {/* A <label> around the select: its \"+34\" is then the select's own text, which\n          also keeps it out of contrast checks when the control is disabled. */}\n      <label\n        data-slot=\"phone-input-prefix\"\n        className={cn(\n          \"group/control relative w-24 shrink-0\",\n          controlBox,\n          controlRow,\n          controlHeight.default,\n          wrappedControlStates,\n          // The number carries aria-invalid (it is the Field control): the prefix follows it.\n          \"group-has-[[aria-invalid=true]]/phone:border-error group-has-[[aria-invalid=true]]/phone:ring-error\",\n        )}\n      >\n        <span aria-hidden className=\"min-w-0 flex-1 truncate\">\n          {prefix}\n        </span>\n        <ChevronDownIcon\n          size=\"sm\"\n          className=\"text-text-primary group-has-[select:disabled]/control:text-text-disabled\"\n        />\n        <select\n          aria-label={labels.phonePrefix}\n          autoComplete=\"tel-country-code\"\n          name={prefixName}\n          value={prefix}\n          disabled={disabled}\n          onChange={(event) => {\n            const next = event.currentTarget.value;\n            if (prefixProp === undefined) {\n              setUncontrolledPrefix(next);\n            }\n            onPrefixChange?.(next);\n          }}\n          className=\"absolute inset-0 size-full cursor-pointer appearance-none opacity-0 disabled:cursor-not-allowed\"\n        >\n          {prefixes.some((option) => option.value === prefix) ? null : (\n            <option value={prefix}>{prefix}</option>\n          )}\n          {prefixes.map((option) => (\n            <option\n              key={`${option.value}-${option.label}`}\n              value={option.value}\n            >\n              {`${option.label} (${option.value})`}\n            </option>\n          ))}\n        </select>\n      </label>\n      <Input\n        ref={setRefs}\n        type=\"tel\"\n        inputMode=\"tel\"\n        autoComplete=\"tel-national\"\n        aria-label={ariaLabel ?? labels.phoneNumber}\n        value={formatted}\n        disabled={disabled}\n        invalid={invalid}\n        onChange={handleChange}\n        className=\"flex-1\"\n        {...props}\n      />\n      {name && (\n        <input type=\"hidden\" name={name} value={digits} disabled={disabled} />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/promo-app/index.d.ts

@@ -0,0 +1 @@
+export { PromoApp, type PromoAppHeadingLevel, type PromoAppProps, } from "./promo-app";

package/dist/components/promo-app/promo-app.d.ts

@@ -0,0 +1,29 @@
+import { type ComponentProps, type ReactNode } from "react";
+export type PromoAppHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export interface PromoAppProps extends Omit<ComponentProps<"section">, "title"> {
+    /** "APP DE MEDIQUO". */
+    eyebrow?: ReactNode;
+    /** "Tu seguimiento en la app". Heading/h2 look. */
+    title: ReactNode;
+    /** "La misma cuenta en el navegador y en el móvil: mismas citas, documentos e historial." */
+    description?: ReactNode;
+    /**
+     * Only benefits the app has TODAY ("Pide cita y entra a la videoconsulta."):
+     * nothing about uploading documents.
+     */
+    benefits?: string[];
+    /** The two `StoreBadge`s. */
+    stores?: ReactNode;
+    /** A screenshot of the app (`<img alt="…" />`). Desktop only. */
+    image?: ReactNode;
+    /** Default 2. */
+    headingLevel?: PromoAppHeadingLevel;
+}
+/**
+ * The block that takes the patient to the app, at the end of the home. `brand-dark`
+ * background and white text in both modes. Not shown inside the native app.
+ *
+ * Figma `Layout` is not a prop: from 800px wide the screenshot sits on the right
+ * (Desktop); below it the block stacks and the screenshot is left out (Mobile).
+ */
+export declare function PromoApp({ eyebrow, title, description, benefits, stores, image, headingLevel, className, ...props }: PromoAppProps): React.JSX.Element;

package/dist/components/promo-app/promo-app.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { CheckIcon } from "../../icons/generated/check.js";
+import { cn } from "../../lib/cn.js";
+function PromoApp({
+  eyebrow,
+  title,
+  description,
+  benefits,
+  stores,
+  image,
+  headingLevel = 2,
+  className,
+  ...props
+}) {
+  const titleId = useId();
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "data-slot": "promo-app",
+      "aria-labelledby": titleId,
+      className: cn("@container rounded-2xl bg-brand-dark", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10 p-6 @min-[800px]:flex-row @min-[800px]:items-center @min-[800px]:p-12", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: [
+          eyebrow && /* @__PURE__ */ jsx("p", { className: "text-label-small text-text-inverse-secondary", children: eyebrow }),
+          /* @__PURE__ */ jsx(Heading, { id: titleId, className: "text-heading-h2 text-text-inverse", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-body-default text-text-inverse-secondary", children: description }),
+          benefits && benefits.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: benefits.map((benefit) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "flex items-start gap-3 text-body-small text-text-inverse",
+              children: [
+                /* @__PURE__ */ jsx(CheckIcon, { size: "md" }),
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: benefit })
+              ]
+            },
+            benefit
+          )) }),
+          stores && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: stores })
+        ] }),
+        image && /* @__PURE__ */ jsx("div", { className: "hidden h-75 w-90 shrink-0 overflow-hidden rounded-xl bg-overlay-light-subtle @min-[800px]:block [&>img]:size-full [&>img]:object-cover", children: image })
+      ] })
+    }
+  );
+}
+export {
+  PromoApp
+};
+//# sourceMappingURL=promo-app.js.map