@alfadocs/ui-kit 1.52.0 → 1.54.0

package/dist/patterns/login-form/login-dev-card.d.ts

@@ -0,0 +1,27 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface LoginDevOption {
+    /** The link's text, e.g. "Sign in as admin". The host supplies it, so
+     *  the kit ships no text for a card that users never see. */
+    label: string;
+    /** The development-only route that signs the test account in. A path
+     *  on the same site, or an address written in full. */
+    href: string;
+    /** A Lucide icon for the link, passed bare: `<ShieldUser />`. */
+    icon?: ReactNode;
+}
+export interface LoginDevCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** The card's heading, e.g. "Developer quick login". */
+    title: string;
+    /** One link per test account. An option with an unsafe address is
+     *  left out. */
+    options: readonly LoginDevOption[];
+    /** The heading's level. Default 2, under the login's own heading. */
+    headingLevel?: 2 | 3;
+}
+/**
+ * The development quick sign-in card. Render it only when the server
+ * says this is a development environment: it never checks the
+ * environment itself. Pass it to `LoginForm` as `devCard`.
+ */
+export declare const LoginDevCard: import("react").ForwardRefExoticComponent<LoginDevCardProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=login-dev-card.d.ts.map

package/dist/patterns/login-form/login-form.d.ts

@@ -0,0 +1,120 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { BrandMarkMotion } from '../_shared/brand-mark';
+/** The fields of the form, in the order they appear. */
+export declare const LOGIN_FORM_FIELDS: readonly ["email", "password"];
+export type LoginFormField = (typeof LOGIN_FORM_FIELDS)[number];
+/** What `onSubmit` receives once both checks have passed. */
+export interface LoginFormValues {
+    email: string;
+    password: string;
+}
+/** Values to show when the form opens. There is no password here, on
+ *  purpose: a password is never sent back to the browser. */
+export type LoginFormInitialValues = Partial<Pick<LoginFormValues, 'email'>>;
+/** Messages from the server, already translated: one per field, plus
+ *  `form` for a message about the whole form, such as "the email or
+ *  password is incorrect". */
+export type LoginFormErrors = Partial<Record<LoginFormField | 'form', string>>;
+/** The host's own form field names, for a native form post. Both are
+ *  needed: a field without a name is not posted. */
+export type LoginFormFieldNames = Record<LoginFormField, string>;
+export interface LoginFormProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onSubmit'> {
+    /** Replaces the heading "Sign in to Alfadocs". Pass it translated. */
+    title?: string;
+    /** A line under the heading. Pass it translated. */
+    description?: string;
+    /**
+     * The heading's level. Default 1: a sign-in page usually has no other
+     * heading. Pass 2 on a page that has its own `h1`.
+     */
+    headingLevel?: 1 | 2 | 3;
+    /**
+     * Shows the Alfadocs mark above the heading, with the heading and its
+     * line centred under it. Default true. With `false` the heading sits
+     * at the start edge, for a host that shows its own logo.
+     */
+    showLogo?: boolean;
+    /**
+     * How the mark arrives when the card opens: its pieces come together
+     * (`assemble`, the default), it turns once (`spin`), it beats
+     * (`pulse`), or it is still (`none`). It plays once and rests, and
+     * holds still under reduced motion and in the accessible themes.
+     */
+    logoMotion?: BrandMarkMotion;
+    /**
+     * Host content between the heading and the fields, such as a notice
+     * ("You have been signed out"). It sits outside the form, so nothing in
+     * it is posted. Keep any heading inside it below the card's own level.
+     */
+    children?: ReactNode;
+    /** The email to show when the form opens, such as the one last used.
+     *  Read once. There is never an initial password. */
+    initialValues?: LoginFormInitialValues;
+    /**
+     * Messages from the server, already translated. A field's message
+     * shows on that field until the user changes it; `form` shows above
+     * the fields.
+     *
+     * When messages arrive, the password is emptied and focus moves: to
+     * the first field with a message, or, when only `form` says something,
+     * to the password, which is then described by that message. The same
+     * happens for messages present when the form opens (a page the server
+     * rendered after a failed post).
+     *
+     * Never say which of the two values was wrong: one message for both.
+     * Set `submitting` while you send, so the form also notices an answer
+     * that says the same as the last one.
+     */
+    errors?: LoginFormErrors;
+    /**
+     * Adds "Forgot password?" under the button. A path on the same site,
+     * or an address written in full (`https://…`). Anything else shows no
+     * link.
+     */
+    forgotPasswordHref?: string;
+    /** Replaces the button's "Sign in". Pass it translated. */
+    submitLabel?: string;
+    /**
+     * True while the host sends the values: the button shows a spinner and
+     * a second submit is ignored. Set it inside `onSubmit`, before anything
+     * is awaited: until it is true, a second press sends a second sign-in.
+     */
+    submitting?: boolean;
+    /** For React hosts: called with the values once both checks have
+     *  passed. Not called when `fieldNames` is set. */
+    onSubmit?: (values: LoginFormValues) => void;
+    /**
+     * For a native form post: the host's own field names, both of them,
+     * e.g. `{ email: 'email', password: 'password' }`. When set, the inputs
+     * carry these names and the browser posts the form.
+     */
+    fieldNames?: LoginFormFieldNames;
+    /**
+     * Where a native form post goes. Default: the current address. Only a
+     * path, or an address on the page's own origin, is accepted: another
+     * origin is never sent what the user typed, and the post then goes to
+     * the current address. Does nothing without `fieldNames`.
+     */
+    action?: string;
+    /**
+     * Extra hidden inputs posted with a native form, by name: a CSRF token,
+     * a return address. Not used with `onSubmit`. A name that is also one
+     * of `fieldNames` is left out: the form's own field wins. The server
+     * must check a return address itself: anyone can change a hidden input.
+     */
+    hiddenFields?: Readonly<Record<string, string>>;
+    /**
+     * A second card beside the sign-in, the same height: the development
+     * quick sign-in (`LoginDevCard`). Pass it only when the server says
+     * this is a development environment: the kit never decides that
+     * itself. The two sit side by side where there is room and stack on a
+     * phone.
+     */
+    devCard?: ReactNode;
+}
+/**
+ * The sign-in card. Mount it on the login page, inside `SignedOutFrame`
+ * or the host's own chrome.
+ */
+export declare const LoginForm: import("react").ForwardRefExoticComponent<LoginFormProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=login-form.d.ts.map

package/dist/patterns/marketplace-app-shell/index.js

@@ -1,4 +1,4 @@
-import { C as l, M as o } from "../../_chunks/marketplace-app-shell-rd1bSSm4.js";
+import { C as l, M as o } from "../../_chunks/marketplace-app-shell-DbEfoNxe.js";
 export {
   l as ConnectWithAlfadocs,
   o as MarketplaceAppShell

package/dist/patterns/registration-form/index.d.ts

@@ -0,0 +1,3 @@
+export { RegistrationForm, REGISTRATION_FORM_FIELDS, } from './registration-form';
+export type { RegistrationFormProps, RegistrationFormField, RegistrationFormFieldNames, RegistrationFormValues, RegistrationFormInitialValues, RegistrationFormErrors, RegistrationFormDevBypass, RegistrationFormDevValues, } from './registration-form';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/registration-form/index.js

@@ -0,0 +1,6 @@
+import { R as o, a as r } from "../../_chunks/registration-form-CBDeXzlk.js";
+export {
+  o as REGISTRATION_FORM_FIELDS,
+  r as RegistrationForm
+};
+//# sourceMappingURL=index.js.map

package/dist/patterns/registration-form/registration-form.d.ts

@@ -0,0 +1,217 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type UsePasswordRequirementsOptions } from '../../components/password-input';
+import { type SelectOption } from '../../components/select';
+import { type BrandMarkMotion } from '../_shared/brand-mark';
+/** The fields of the form, in the order they appear. */
+export declare const REGISTRATION_FORM_FIELDS: readonly ["firstName", "lastName", "email", "emailConfirm", "password", "passwordConfirm", "phone", "branch", "terms"];
+export type RegistrationFormField = (typeof REGISTRATION_FORM_FIELDS)[number];
+/** What `onSubmit` receives once every check has passed. A field the
+ *  form does not show is empty (`''`, or `false` for the terms). */
+export interface RegistrationFormValues {
+    firstName: string;
+    lastName: string;
+    email: string;
+    /** As typed. It matches `email` apart from case and outer spaces. */
+    emailConfirm: string;
+    password: string;
+    /** Equal to `password` when the confirm field is shown. */
+    passwordConfirm: string;
+    /** In E.164 form, e.g. `+393331234567`. */
+    phone: string;
+    /** The chosen `branches` value. */
+    branch: string;
+    /** True when the terms are shown: the form does not submit without. */
+    terms: boolean;
+    /** The reCAPTCHA token, when the host passes `recaptchaSiteKey`. */
+    captchaToken?: string;
+}
+/** Values to show when the form opens. There is no password here, on
+ *  purpose: a password is never sent back to the browser. */
+export type RegistrationFormInitialValues = Partial<Pick<RegistrationFormValues, 'firstName' | 'lastName' | 'email' | 'emailConfirm' | 'phone' | 'branch' | 'terms'>>;
+/**
+ * What the development shortcut puts in the fields. Unlike
+ * `initialValues` it may carry a password: the host passes it only in
+ * development, from its own server, and the kit holds no test data of
+ * its own.
+ */
+export type RegistrationFormDevValues = Partial<Pick<RegistrationFormValues, 'firstName' | 'lastName' | 'email' | 'password' | 'phone' | 'branch' | 'terms'>>;
+/** The development-only shortcut at the top right of the card. */
+export interface RegistrationFormDevBypass {
+    /** What the shortcut does: the button's name and tooltip. */
+    label: string;
+    /**
+     * The values to put in the fields when the button is pressed, as if
+     * typed: the checks, the password checklist and the posted values all
+     * see them. The confirm fields are filled from the same values, so
+     * they match. A field the form does not show is ignored, and a
+     * read-only email is kept.
+     */
+    values?: RegistrationFormDevValues;
+    /**
+     * True to submit the form right after filling it, through the normal
+     * path: the checks still run, reCAPTCHA still runs, a native form
+     * still posts. Default false: fill only.
+     */
+    submit?: boolean;
+    /** Called after filling, for a host with a route of its own. */
+    onClick?: () => void;
+}
+/** Messages from the server, already translated by the host: one per
+ *  field, plus `form` for a message about the whole form. */
+export type RegistrationFormErrors = Partial<Record<RegistrationFormField | 'form', string>>;
+/** The host's own form field names, for a native form post. `captcha`
+ *  names the hidden field that carries the reCAPTCHA token. */
+export type RegistrationFormFieldNames = Partial<Record<RegistrationFormField | 'captcha', string>>;
+export interface RegistrationFormProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onSubmit'> {
+    /** Replaces the heading "Create your account". Pass it translated. */
+    title?: string;
+    /** A line under the heading, e.g. "No installation needed". Pass it
+     *  translated. */
+    description?: string;
+    /** The heading's level. Default 2, for a page that has its own `h1`. */
+    headingLevel?: 1 | 2 | 3;
+    /**
+     * Shows the Alfadocs mark above the heading, with the heading and its
+     * line centred under it. Default true. With `false` the heading sits
+     * at the start edge, for a host that shows its own logo beside the
+     * card.
+     */
+    showLogo?: boolean;
+    /**
+     * How the mark arrives when the card opens: its pieces come together
+     * (`assemble`, the default), it turns once (`spin`), it beats
+     * (`pulse`), or it is still (`none`). It plays once and rests, and
+     * holds still under reduced motion and in the accessible themes.
+     */
+    logoMotion?: BrandMarkMotion;
+    /**
+     * Host content between the heading and the fields, such as a notice
+     * or a list of benefits. It sits outside the form, so nothing in it is
+     * posted. Keep any heading inside it below the card's own level.
+     */
+    children?: ReactNode;
+    /**
+     * The fields to show. Default: all of them, which is the doctor form.
+     * A patient form is `['email', 'password', 'passwordConfirm', 'terms']`.
+     * Leave out `emailConfirm` or `passwordConfirm` to drop that confirm
+     * field. The list picks fields, it does not order them; email and
+     * password always show; `branch` also needs `branches`.
+     */
+    fields?: readonly RegistrationFormField[];
+    /** Values to show when the form opens, such as the email from an
+     *  invite link. Read once. Never a password. */
+    initialValues?: RegistrationFormInitialValues;
+    /**
+     * Messages from the server, already translated. Each shows on its
+     * field until the user changes that field; `form` shows above the
+     * fields, as does a message for a field the form does not show.
+     *
+     * Messages present when the form opens (a page the server rendered
+     * after a failed post) take focus: the first field with a message, or
+     * the message above the fields.
+     *
+     * On a React host, when the messages change, both password fields
+     * are emptied and focus moves as above. Set `submitting` while you
+     * send: the form then also notices an answer that says the same as
+     * the last one (another address, also taken), which the messages
+     * alone cannot show. Any object works, kept in state or rebuilt on
+     * each render (`errors={{ email: emailError }}`).
+     */
+    errors?: RegistrationFormErrors;
+    /**
+     * Shows the email from `initialValues` read-only, for a person invited
+     * with an address they cannot change here. Off by default: choose it
+     * only when the server will refuse any other address. The value is
+     * still posted and still read out, there is no confirm email field,
+     * and the browser does not check it. Ignored when there is no initial
+     * email, so the field is never both empty and locked.
+     */
+    emailReadOnly?: boolean;
+    /** A line under the email field, e.g. "You can change it later in the
+     *  settings". Pass it translated. */
+    emailDescription?: string;
+    /** The specialities to choose from. The field shows, and is required,
+     *  only when this has entries. */
+    branches?: SelectOption[];
+    /**
+     * The password rules, shown as a live checklist. Keep them equal to
+     * the server's. Default: 12 characters with an uppercase letter, a
+     * lowercase letter and a number, counting only `A-Z`, `a-z` and `0-9`
+     * (`charset: 'ascii'`), which is the platform's rule.
+     */
+    passwordPolicy?: UsePasswordRequirementsOptions;
+    /**
+     * Where "terms of use" leads. A path on the same site, or an address
+     * written in full (`https://…`). Anything else, such as an address
+     * that would lead off the site without saying so, shows the words
+     * without a link.
+     */
+    termsHref?: string;
+    /** Where "privacy policy" leads. Same rule as `termsHref`. */
+    privacyHref?: string;
+    /**
+     * Replaces the sentence beside the terms box ("I accept the terms of
+     * use and the privacy policy") with the host's own wording and links,
+     * already translated. The legal wording is the host's to choose. When
+     * set, `termsHref` and `privacyHref` are not used. The box stays
+     * required.
+     */
+    termsLabel?: ReactNode;
+    /** A line shown with the terms box and read out with it, e.g. "We
+     *  will not send you any advertising". Pass it translated. */
+    termsDescription?: ReactNode;
+    /** Adds "Already have an account? Sign in". Same rule as `termsHref`. */
+    loginHref?: string;
+    /** A Google reCAPTCHA v2 site key of the invisible type. The check
+     *  runs when the user submits. Leave it out where the server does not
+     *  verify a token. */
+    recaptchaSiteKey?: string;
+    /** Replaces the button's "Create account". Pass it translated. */
+    submitLabel?: string;
+    /** True while the host sends the values: the button shows a spinner
+     *  and a second submit is ignored. */
+    submitting?: boolean;
+    /**
+     * Shows the development-only shortcut button at the top right of the
+     * card: it fills the form with the host's `values`, and submits it
+     * when asked to. Pass it only when the server says this is a
+     * development environment: the kit never decides that itself, holds
+     * no test data, and what the shortcut submits goes through the normal
+     * path, so the server's own rules still decide. With neither `values`
+     * nor `onClick` there is nothing to do and no button.
+     */
+    devBypass?: RegistrationFormDevBypass;
+    /** For React hosts: called with the values once every check has
+     *  passed. Not called when `fieldNames` is set. */
+    onSubmit?: (values: RegistrationFormValues) => void;
+    /**
+     * For a native form post: the host's own field names, e.g.
+     * `{ email: 'registration[email]' }`. When set, the inputs carry
+     * these names and the browser posts the form. A field without a name
+     * here is not posted: name a confirm field only if the server's form
+     * has one, or it may refuse the post as carrying extra fields.
+     */
+    fieldNames?: RegistrationFormFieldNames;
+    /**
+     * Where a native form post goes. Default: the current address, query
+     * string included, which is what a page reached through an invite link
+     * needs. Only an address on this site is accepted: another site is
+     * never sent what the user typed, and the post then goes to the
+     * current address instead.
+     */
+    action?: string;
+    /**
+     * Extra hidden inputs posted with a native form, by name: a CSRF token
+     * or similar. Not used with `onSubmit`. A name that is also one of
+     * `fieldNames` is left out: the form's own field wins.
+     */
+    hiddenFields?: Readonly<Record<string, string>>;
+}
+/**
+ * The registration form card, for doctors and for patients. The host
+ * picks the fields, supplies the page around the card and owns every
+ * server rule; see the props for the two ways to submit. The card's
+ * text follows the kit's language, like every kit component.
+ */
+export declare const RegistrationForm: import("react").ForwardRefExoticComponent<RegistrationFormProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=registration-form.d.ts.map

package/dist/patterns/registration-form/use-registration-submit.d.ts

@@ -0,0 +1,59 @@
+import { type RefObject } from 'react';
+import type { RecaptchaWidgetHandle } from '../../components/recaptcha-widget';
+type Messages = Readonly<Record<string, string | undefined>>;
+/**
+ * How long the button stays busy waiting for a reCAPTCHA token. Google
+ * sends no event when the user closes a challenge, so the wait cannot be
+ * open-ended: after this the button comes back and the user can try
+ * again. A token that arrives later is still used.
+ */
+export declare const CAPTCHA_PATIENCE = 8000;
+export interface UseRegistrationSubmitOptions<Field extends string> {
+    /** The host's `errors` prop. */
+    errors: Messages | undefined;
+    /** The host's `submitting` prop. */
+    submitting: boolean;
+    /** True when the browser posts the form itself. */
+    native: boolean;
+    /** True when a reCAPTCHA check guards the submit. */
+    captcha: boolean;
+    /**
+     * The first field that stops a submit, or `undefined` when every field
+     * is valid. Called when the answer is needed, so it must read the
+     * latest values.
+     */
+    firstProblem: () => Field | undefined;
+    /** A submit was refused because of this field. */
+    onRefused: (field: Field) => void;
+    /**
+     * Hand the values over. For a React host, call its `onSubmit`. For a
+     * native post this is only called when a reCAPTCHA token arrives (put
+     * the token in its field and call `form.submit()`); without reCAPTCHA
+     * the browser posts on its own and this is not called.
+     */
+    deliver: (captchaToken?: string) => void;
+    /** The server has answered with these messages. */
+    onAnswer: (errors: Messages) => void;
+    /** The browser restored the page from its back-forward cache. */
+    onRestore?: () => void;
+}
+export interface UseRegistrationSubmitReturn {
+    /** True while a submit is on its way: the host is sending, the browser
+     *  is posting, or a reCAPTCHA token is awaited. */
+    busy: boolean;
+    /** True when the last reCAPTCHA check failed or expired. */
+    captchaFailed: boolean;
+    /** The form's `onSubmit`. */
+    handleSubmit: (event: {
+        preventDefault: () => void;
+    }) => void;
+    /** Props for the `RecaptchaWidget`. */
+    captcha: {
+        ref: RefObject<RecaptchaWidgetHandle | null>;
+        onChange: (token: string | null) => void;
+        onError: () => void;
+    };
+}
+export declare function useRegistrationSubmit<Field extends string>(options: UseRegistrationSubmitOptions<Field>): UseRegistrationSubmitReturn;
+export {};
+//# sourceMappingURL=use-registration-submit.d.ts.map

package/dist/patterns/signature-request/index.js

@@ -1,4 +1,4 @@
-import { S as o } from "../../_chunks/signature-request-DqZkn-iB.js";
+import { S as o } from "../../_chunks/signature-request-BdolmJk4.js";
 export {
   o as SignatureRequestModal
 };

package/dist/patterns/signed-out-frame/index.d.ts

@@ -0,0 +1,5 @@
+export { SignedOutFrame } from './signed-out-frame';
+export type { SignedOutFrameProps } from './signed-out-frame';
+export { SignedOutHeader } from './signed-out-header';
+export type { SignedOutHeaderProps } from './signed-out-header';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/signed-out-frame/index.js

@@ -0,0 +1,6 @@
+import { S as r, a as d } from "../../_chunks/signed-out-frame-dz1rLJ65.js";
+export {
+  r as SignedOutFrame,
+  d as SignedOutHeader
+};
+//# sourceMappingURL=index.js.map

package/dist/patterns/signed-out-frame/signed-out-frame.d.ts

@@ -0,0 +1,27 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type LegalUrlOverrides } from '../../components/public-footer';
+import { type SignedOutHeaderProps } from './signed-out-header';
+export interface SignedOutFrameProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, SignedOutHeaderProps {
+    /** The page: a card such as `LoginForm`, centred in `<main>`. */
+    children: ReactNode;
+    /** Shows the footer with the privacy policy and the terms. Default
+     *  true. */
+    showFooter?: boolean;
+    /**
+     * Adds the footer's copyright line: the year, the company's registered
+     * name and its VAT number. Default false.
+     */
+    showCopyright?: boolean;
+    /** The site the footer's legal links lead to. Default: the footer's
+     *  own, `https://www.alfadocs.com`. */
+    marketingBaseUrl?: string;
+    /** The footer's legal links, per language, where they differ from its
+     *  defaults. */
+    legalUrlOverrides?: LegalUrlOverrides;
+}
+/**
+ * The signed-out app frame. It is one viewport tall: the header and the
+ * footer stay put and the content scrolls between them.
+ */
+export declare const SignedOutFrame: import("react").ForwardRefExoticComponent<SignedOutFrameProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=signed-out-frame.d.ts.map

package/dist/patterns/signed-out-frame/signed-out-header.d.ts

@@ -0,0 +1,23 @@
+export interface SignedOutHeaderProps {
+    /** Where the brand leads. Default `/`. */
+    homeHref?: string;
+    /** The id of the `<main>` the skip link lands on. Default
+     *  `main-content`, `AppFrame`'s own default. */
+    mainId?: string;
+    /**
+     * Adds "Sign in". For a registration page. A path on the same site, or
+     * an address written in full (`https://…`); anything else shows no
+     * link. The same rule holds for the two addresses below.
+     */
+    loginHref?: string;
+    /** Adds "Register as a doctor". For the login page. */
+    registerDoctorHref?: string;
+    /** Adds "Register as a patient". For the login page. */
+    registerPatientHref?: string;
+}
+/**
+ * The signed-out header. `SignedOutFrame` renders it; use it on its own
+ * only with a frame of your own.
+ */
+export declare const SignedOutHeader: import("react").ForwardRefExoticComponent<SignedOutHeaderProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=signed-out-header.d.ts.map