@abyss-project/commons-front-core 9.1.1 → 9.3.0

package/dist/{AbyssCookieConsentProvider-B7-F6osY.js → AbyssCookieConsentProvider-CeDdkoPq.js}

@@ -1709,7 +1709,25 @@ const fm = {
         reveal: "Afficher la valeur",
         hide: "Masquer la valeur",
         copied: "Copié dans le presse-papiers",
-        "copy-failed": "La copie a échoué. Réessayez ou copiez la valeur à la main."
+        "copy-failed": "La copie a échoué. Réessayez ou copiez la valeur à la main.",
+        "load-failed": "La valeur n’a pas pu être chargée. Réessayez."
+      },
+      "entity-image-field": {
+        uploading: "Envoi de l’image…"
+      },
+      "user-picker": {
+        loading: "Recherche…",
+        clear: "Effacer",
+        open: "Ouvrir la liste",
+        close: "Fermer la liste"
+      },
+      "company-search-field": {
+        label: "Nom de l’entreprise",
+        placeholder: "Rechercher une entreprise",
+        loading: "Recherche…",
+        error: "La recherche d’entreprise est momentanément indisponible. Réessayez dans un instant.",
+        created: "Créée le {date}",
+        clear: "Effacer"
       },
       "context-selector": {
         personal: "Mon espace",
@@ -1825,6 +1843,22 @@ const fm = {
       }
     },
     data: {
+      pagination: {
+        previous: "Précédent",
+        next: "Suivant",
+        page: "Page {page, number}",
+        position: "Page {page, number} sur {count, number}"
+      },
+      "line-chart": {
+        x: "Abscisse",
+        "no-value": "Aucune valeur",
+        empty: "Aucune donnée à afficher"
+      },
+      "bar-chart": {
+        category: "Catégorie",
+        "no-value": "Aucune valeur",
+        empty: "Aucune donnée à afficher"
+      },
       "data-table": {
         "select-all": "Sélectionner toutes les lignes",
         "select-row": "Sélectionner la ligne",
@@ -3475,7 +3509,25 @@ const fm = {
         reveal: "Show the value",
         hide: "Hide the value",
         copied: "Copied to the clipboard",
-        "copy-failed": "Copy failed. Try again or copy the value by hand."
+        "copy-failed": "Copy failed. Try again or copy the value by hand.",
+        "load-failed": "The value could not be loaded. Try again."
+      },
+      "entity-image-field": {
+        uploading: "Uploading the image…"
+      },
+      "user-picker": {
+        loading: "Searching…",
+        clear: "Clear",
+        open: "Open the list",
+        close: "Close the list"
+      },
+      "company-search-field": {
+        label: "Company name",
+        placeholder: "Search for a company",
+        loading: "Searching…",
+        error: "Company search is temporarily unavailable. Try again in a moment.",
+        created: "Founded on {date}",
+        clear: "Clear"
       },
       "context-selector": {
         personal: "My space",
@@ -3591,6 +3643,22 @@ const fm = {
       }
     },
     data: {
+      pagination: {
+        previous: "Previous",
+        next: "Next",
+        page: "Page {page, number}",
+        position: "Page {page, number} of {count, number}"
+      },
+      "line-chart": {
+        x: "X value",
+        "no-value": "No value",
+        empty: "No data to show"
+      },
+      "bar-chart": {
+        category: "Category",
+        "no-value": "No value",
+        empty: "No data to show"
+      },
       "data-table": {
         "select-all": "Select all rows",
         "select-row": "Select row",
@@ -8311,36 +8379,36 @@ const Ym = tl * 24 * 60 * 60 * 1e3, Hm = (p) => ({
   ] });
 };
 export {
-  Rm as $,
+  Ki as $,
   fv as A,
-  Dt as B,
+  uv as B,
   Km as C,
   Fm as D,
-  xm as E,
-  Pm as F,
-  uv as G,
-  cv as H,
-  av as I,
-  Fe as J,
-  Sm as K,
-  Tr as L,
-  Xi as M,
-  Em as N,
-  bm as O,
-  Tm as P,
-  Cm as Q,
+  cv as E,
+  av as F,
+  Fe as G,
+  Sm as H,
+  Tr as I,
+  Xi as J,
+  Em as K,
+  bm as L,
+  Tm as M,
+  Cm as N,
+  Im as O,
+  Zs as P,
+  sv as Q,
   Zi as R,
-  Im as S,
-  Zs as T,
-  sv as U,
+  Qs as S,
+  el as T,
+  lv as U,
   tl as V,
-  Qs as W,
-  el as X,
-  lv as Y,
-  Om as Z,
-  Nm as _,
+  Om as W,
+  Nm as X,
+  Rm as Y,
+  wm as Z,
+  Er as _,
   pv as a,
-  wm as a0,
+  iv as a0,
   Wm as b,
   Cr as c,
   Um as d,
@@ -8352,18 +8420,18 @@ export {
   mm as j,
   gm as k,
   zm as l,
-  rv as m,
-  Er as n,
-  Ki as o,
-  iv as p,
-  Mt as q,
+  Mt as m,
+  he as n,
+  oe as o,
+  Ze as p,
+  Nn as q,
   Mm as r,
-  he as s,
+  rv as s,
   $s as t,
   dv as u,
-  oe as v,
+  Lt as v,
   Fs as w,
-  Ze as x,
-  Nn as y,
-  Lt as z
+  Dt as x,
+  xm as y,
+  Pm as z
 };

package/dist/{CookieConsentSettings.component-DxQL4ULz.js → CookieConsentSettings.component-tJE0g-SS.js}

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
 import { useState as m, useEffect as C } from "react";
 import { Card as v, CardContent as b, Stack as u, Typography as o, FormControlLabel as l, Box as r, Checkbox as d, Button as M } from "@mui/material";
-import { g as R, u as x } from "./AbyssCookieConsentProvider-B7-F6osY.js";
+import { g as R, u as x } from "./AbyssCookieConsentProvider-CeDdkoPq.js";
 const B = () => {
   const t = R(), { consent: i, save: y } = x(), [h, g] = m((i == null ? void 0 : i.analytics) ?? !1), [k, f] = m((i == null ? void 0 : i.marketing) ?? !1), c = i == null ? void 0 : i.analytics, n = i == null ? void 0 : i.marketing;
   return C(() => {

package/dist/components/data/BarChart/BarChart.d.ts

@@ -0,0 +1,47 @@
+import { ChartSeriesTone } from '../chart-series-tone';
+export declare enum BarChartLayout {
+    /** Bars rise from the category axis at the bottom. */
+    Vertical = "vertical",
+    /** Bars run from the category axis on the left: long category names, many categories. */
+    Horizontal = "horizontal"
+}
+export interface BarChartSeries {
+    id: string;
+    /** Name of the series, in the legend, the tooltip and the table of values. */
+    label: string;
+    /**
+     * The meaning of the series when its color states one (failures, successes): it is then drawn in
+     * the `status.*` color of the tone. Without tone, the series takes the next data series color.
+     */
+    tone?: ChartSeriesTone;
+}
+export interface BarChartCategory {
+    id: string;
+    /** Text of the category axis, the tooltip and the table of values. */
+    label: string;
+    /** Value of each series for this category, keyed by series id; a missing key is no bar. */
+    values: Record<string, number>;
+}
+export interface BarChartProps {
+    series: BarChartSeries[];
+    categories: BarChartCategory[];
+    /** Height of the plot, in px; the width follows the container. */
+    height: number;
+    /** `Vertical` by default. */
+    layout?: BarChartLayout;
+    /** Stacks the series of a category; grouped side by side otherwise. */
+    stacked?: boolean;
+    /** Text of a value: axis ticks, tooltip, table of values. */
+    formatValue(value: number): string;
+    /** Accessible name of the figure and caption of its table. */
+    label: string;
+}
+/**
+ * A bar chart drawn by nivo under `abyssNivoTheme`: one bar per series and category, grouped side by
+ * side or stacked, vertical or horizontal. Each series is colored by its tone (`status.*`) or else
+ * in the order of the data series palette among the series without tone, never by the host. Beyond
+ * one series, a legend names the colors. For screen readers the figure is named by `label` and its
+ * drawing is replaced by a table of every value; a chart without any value says so instead of
+ * drawing empty axes.
+ */
+export declare function BarChart({ series, categories, height, layout, stacked, formatValue, label, }: BarChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data/BarChart/BarChart.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/data/DataTable/DataTableDesktop.d.ts

@@ -3,4 +3,4 @@ import { DataTableProps } from './data-table.types';
  * The table form of `DataTable`, from 768 px up. From 768 to 1199 px (next to the icon rail) the
  * `Optional` columns are hidden.
  */
-export declare function DataTableDesktop<T>({ columns: allColumns, rows, getRowId, density, selection, sort, onRowClick, loading, empty, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableDesktop<T>({ columns: allColumns, rows, getRowId, density, selection, sort, onRowClick, loading, empty, label, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data/DataTable/DataTableMobile.d.ts

@@ -3,4 +3,4 @@ import { DataTableProps } from './data-table.types';
  * The two-level list form of `DataTable` below 768 px (`.mli`): the selection stays, and the bulk
  * actions move into an `ActionBar` at the bottom of the screen.
  */
-export declare function DataTableMobile<T>({ rows, getRowId, selection, onRowClick, loading, empty, mobileRow, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableMobile<T>({ rows, getRowId, selection, onRowClick, loading, empty, mobileRow, label, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data/DataTable/data-table.types.d.ts

@@ -74,4 +74,10 @@ export interface DataTableProps<T> {
     empty: ReactNode;
     /** The two-level item that replaces a row below 768 px. */
     mobileRow: DataTableMobileRow<T>;
+    /**
+     * Accessible name of the table, and of the list that replaces it below 768 px: what the rows are
+     * (« Transferts Beam »). Without it, the table has no name and the list keeps the generic
+     * « Lignes ».
+     */
+    label?: string;
 }

package/dist/components/data/LineChart/LineChart.d.ts

@@ -0,0 +1,44 @@
+import { ChartSeriesTone } from '../chart-series-tone';
+export type LineChartX = Date | number;
+export interface LineChartPoint {
+    x: LineChartX;
+    y: number;
+}
+export interface LineChartSeries {
+    id: string;
+    /** Name of the series, in the legend, the tooltip and the table of values. */
+    label: string;
+    points: LineChartPoint[];
+    /**
+     * The meaning of the series when its color states one (failures, successes): it is then drawn in
+     * the `status.*` color of the tone. Without tone, the series takes the next data series color.
+     */
+    tone?: ChartSeriesTone;
+}
+export interface LineChartProps {
+    series: LineChartSeries[];
+    /** Height of the plot, in px. */
+    height: number;
+    /** Fills the area under each line at the `.soft` opacity, from a zero baseline. */
+    area?: boolean;
+    /**
+     * Stacks the series as areas from a zero baseline (`area` implied): an x a series has no point at
+     * counts as zero there. The tooltip and the table of values keep each series' own values.
+     */
+    stacked?: boolean;
+    /** Text of an x value: axis ticks, tooltip, table of values. */
+    formatX(x: LineChartX): string;
+    /** Text of a y value: axis ticks, tooltip, table of values. */
+    formatY(y: number): string;
+    /** Accessible name of the figure and caption of its table: what the chart shows. */
+    label: string;
+}
+/**
+ * A line chart drawn by nivo under `abyssNivoTheme`: one line per series, colored by its tone
+ * (`status.*`) or else in the order of the data series palette among the series without tone
+ * (`data.series.1`, `2`…, the seventh starting over), never by the host. Dates give a time scale,
+ * numbers a linear one; `stacked` piles the series up as areas. Beyond one series, a legend names
+ * the colors. For screen readers the figure is named by `label` and its drawing is replaced by a
+ * table of every value; a chart without any point says so instead of drawing empty axes.
+ */
+export declare function LineChart({ series, height, area, stacked, formatX, formatY, label, }: LineChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data/LineChart/LineChart.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/data/LineChart/line-chart-ticks.d.ts

@@ -0,0 +1,31 @@
+/** Width in px of a tick label of the x axis: mono, at the `caption` size of `abyssNivoTheme`. */
+export declare const tickLabelWidth: (text: string) => number;
+/**
+ * Least empty space between two tick labels of the x axis, in px: wide enough that the axis reads
+ * as a few landmarks, not as a ruler.
+ */
+export declare const TICK_LABEL_GAP: 40;
+export declare enum XScaleKind {
+    /** Values are timestamps in ms, ticked on the local clock. */
+    Time = "time",
+    /** Values are plain numbers, ticked on 1, 2 and 5 times a power of ten. */
+    Linear = "linear"
+}
+export interface XTickLayout {
+    /** Width of the plot between its margins, in px. */
+    plotWidth: number;
+    /** Room a label may take beyond each end of the plot (the chart margins), in px. */
+    overflow: {
+        left: number;
+        right: number;
+    };
+}
+/**
+ * The tick values of the x axis of a chart whose x values are `values` (distinct, ascending, at
+ * least one) and whose plot is `layout.plotWidth` px wide: the finest nice step (on the local clock
+ * for time), never finer than the closest two values, whose labels (`labelOf`), as wide as
+ * `tickLabelWidth` says, keep `TICK_LABEL_GAP` between neighbors. A label that would spill past the
+ * margins is dropped. Without room for two labels, a single one is kept; a plot without width gets
+ * none.
+ */
+export declare function xTickValues(values: number[], kind: XScaleKind, labelOf: (value: number) => string, layout: XTickLayout): number[];

package/dist/components/data/LineChart/line-chart-ticks.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/data/Pagination/Pagination.d.ts

@@ -0,0 +1,16 @@
+export interface PaginationProps {
+    /** The current page, from 1. A value outside `1…pageCount` shows the nearest bound. */
+    page: number;
+    /** Number of pages; nothing is rendered below 2. */
+    pageCount: number;
+    /** Called with the page the user asks for; never with the current page. */
+    onChange(page: number): void;
+    /** Accessible name of the navigation: what is paged ("Pages des permissions"). */
+    label: string;
+}
+/**
+ * Page navigation for a paged list: previous, the numbered pages with gaps, next. Below 768 px it
+ * shrinks to previous, "Page x of y" and next, every control a 44 px target. Previous and next are
+ * disabled at the bounds. A single page needs no navigation: nothing is rendered.
+ */
+export declare function Pagination({ page, pageCount, onChange, label, }: PaginationProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/data/Pagination/Pagination.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/data/chart-series-tone.d.ts

@@ -0,0 +1,21 @@
+import { SemanticToken } from '../../theme/tokens/semantic';
+/**
+ * The meaning of a chart series whose color states something (ADR-0174, amendment « ton sémantique
+ * des séries »): a series of failures, of successes. A series without a meaning takes no tone and
+ * keeps the data series palette.
+ */
+export declare enum ChartSeriesTone {
+    Success = "success",
+    Warning = "warning",
+    Danger = "danger",
+    Info = "info",
+    Neutral = "neutral"
+}
+/**
+ * Colour token of each series: its tone, else the next data.series token among the series without
+ * tone. The palette counts only the series without tone (the first of them takes `data.series.1`,
+ * whatever toned series stand before it) and starts over after its sixth color.
+ */
+export declare function seriesColorTokens(series: {
+    tone?: ChartSeriesTone;
+}[]): SemanticToken[];

package/dist/components/data/chart-series-tone.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -4,3 +4,7 @@ export * from './StatTile/StatTile';
 export * from './Sparkline/Sparkline';
 export * from './chart-theme';
 export * from './UsageMeter/UsageMeter';
+export * from './Pagination/Pagination';
+export * from './LineChart/LineChart';
+export * from './BarChart/BarChart';
+export * from './chart-series-tone';

package/dist/components/inputs/ColorField/ColorField.d.ts

@@ -2,14 +2,17 @@ export interface ColorFieldProps {
     label: string;
     value: string;
     onChange(hex: string): void;
-    /** Colors offered as one-click choices. They belong to the caller's domain, not to the core. */
-    swatches: string[];
+    /**
+     * Colors offered as one-click choices. `CHOICE_SWATCHES` by default, the user choice palette of the
+     * design system; a caller whose domain has its own colors passes them.
+     */
+    swatches?: readonly string[];
 }
 /** `#rrggbb` or `rrggbb` as lowercase `#rrggbb`; `null` when it is not a 6-digit hexadecimal. */
 export declare const normalizeHex: (input: string) => string | null;
 /**
- * A color input: a hexadecimal text field with a preview, plus the caller's swatches. Typing
- * emits `onChange` once the text is a valid `#rrggbb` (the `#` is optional, the case is normalized); any
- * other text shows a message and emits nothing. The swatches are toggle buttons in a labelled group.
+ * A color input: a hexadecimal text field with a preview, plus swatches (the caller's, or the
+ * choice palette `CHOICE_SWATCHES`). Typing emits `onChange` once the text is a valid `#rrggbb`
+ * (the `#` is optional, the case is normalized); any other text shows a message and emits nothing. The swatches are toggle buttons in a labelled group.
  */
 export declare function ColorField({ label, value, onChange, swatches, }: ColorFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/CompanySearchField/CompanySearchField.d.ts

@@ -0,0 +1,24 @@
+import { PappersCompany } from './pappers-company';
+export type { PappersCompany };
+/** Quiet time after the last keystroke before the request leaves, in ms. */
+export declare const COMPANY_SEARCH_DEBOUNCE_MS = 300;
+export interface CompanySearchFieldProps {
+    /** Text of the field, owned by the host. */
+    value: string;
+    /** Called at each keystroke, before the debounce. */
+    onInputChange(value: string): void;
+    /** Called when the user picks a suggestion; typing alone never calls it. */
+    onSelect(company: PappersCompany): void;
+    disabled?: boolean;
+    /** Label above the field; « Nom de l’entreprise » without it. */
+    label?: string;
+    /** « Rechercher une entreprise » without it. */
+    placeholder?: string;
+}
+/**
+ * A company name field that suggests French companies from Pappers as the user types: name,
+ * legal form, SIREN, creation date, head office and activity. The host owns the text; picking a
+ * suggestion hands the whole company to `onSelect`. A failed request (network, non-2xx answer)
+ * puts the field in error, apart from an answer without result.
+ */
+export declare function CompanySearchField({ value, onInputChange, onSelect, disabled, label, placeholder, }: CompanySearchFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/CompanySearchField/CompanySearchField.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/CompanySearchField/pappers-company.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A company as the Pappers suggestions API returns it. The field names mirror the response verbatim
+ * (French, snake_case): hosts read them as they come, no mapping layer in between.
+ */
+export type PappersCompany = {
+    siren: string;
+    nom_entreprise: string;
+    date_creation: string;
+    forme_juridique?: string;
+    domaine_activite?: string;
+    siege?: {
+        adresse?: string;
+        code_postal?: string;
+        ville?: string;
+        departement?: string;
+        pays?: string;
+    };
+};

package/dist/components/inputs/CopyField/CopyField.d.ts

@@ -1,5 +1,4 @@
-export interface CopyFieldProps {
-    value: string;
+interface CopyFieldBaseProps {
     /** Hides the value behind dots until the user reveals it; the copy button still copies it. */
     masked?: boolean;
     /** Called each time the user reveals a masked value. */
@@ -7,13 +6,30 @@ export interface CopyFieldProps {
     /** Label of the copy button, named after what it copies ("Copier la clé"). */
     copyLabel: string;
 }
+/** The value is known up front. */
+interface CopyFieldValueProps extends CopyFieldBaseProps {
+    value: string;
+    loadValue?: never;
+}
+/**
+ * The value is asked for on the first « Afficher » or « Copier » only, then kept until the field
+ * unmounts: no request is made without a gesture.
+ */
+interface CopyFieldLoadedProps extends CopyFieldBaseProps {
+    value?: never;
+    loadValue(): Promise<string>;
+}
+export type CopyFieldProps = CopyFieldValueProps | CopyFieldLoadedProps;
 /** How long the copy button shows its check mark after a copy, in ms. */
 export declare const COPY_FEEDBACK_MS = 2000;
 /**
  * A value to copy (API key, connection identifier): shown in mono in a read-only box, with a
  * button that copies it to the clipboard. Masked, the value is replaced by dots and a toggle
- * reveals it (calling `onReveal`). The outcome of a copy is announced in a polite live region; a
- * success turns the copy icon into a check mark for a moment, a failure is also written under the
- * field.
+ * reveals it (calling `onReveal`). With `loadValue` instead of `value`, the value stays masked and
+ * is asked for on the first reveal or copy, the button of that gesture showing the loading; a
+ * failed load is announced and the next gesture asks again. The outcome of a copy is announced in
+ * a polite live region; a success turns the copy icon into a check mark for a moment, a failure is
+ * also written under the field.
  */
-export declare function CopyField({ value, masked, onReveal, copyLabel, }: CopyFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function CopyField({ value: givenValue, loadValue, masked, onReveal, copyLabel, }: CopyFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/EntityImageField/EntityImageField.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { CloudImportWiring } from '../../../hooks/cloud-picker.types';
+export declare enum EntityImageVariant {
+    /** A logo, a profile picture or a project image: the picture itself is the button. */
+    Avatar = "avatar",
+    /** A banner: the picture spans the width, a button lies over it. */
+    Banner = "banner"
+}
+export declare enum EntityImageShape {
+    /** A person: a disc. */
+    Round = "round",
+    /** An organization or a project: a rounded square. */
+    Square = "square"
+}
+interface EntityImageFieldBaseProps {
+    /** The avatar or the image shown now, rendered by the host at its size. */
+    picture: ReactNode;
+    /** What the gesture does (« Changer le logo »): the name of the button. */
+    label: string;
+    /** Accepted types, as the HTML `accept` attribute lists them. */
+    accept?: string[];
+    /** Receives the file chosen on the device. The host uploads it and reports the outcome. */
+    onFile(file: File): void;
+    /** An upload is running: the button shows it and opens nothing. */
+    uploading: boolean;
+    /** AbyssCloud picker plus the import action: with it, the button opens a menu of sources. */
+    cloudImport?: CloudImportWiring;
+}
+export interface EntityImageAvatarProps extends EntityImageFieldBaseProps {
+    variant: EntityImageVariant.Avatar;
+    /** Defaults to `EntityImageShape.Round`. */
+    shape?: EntityImageShape;
+}
+interface EntityImageBannerProps extends EntityImageFieldBaseProps {
+    variant: EntityImageVariant.Banner;
+    shape?: never;
+}
+export type EntityImageFieldProps = EntityImageAvatarProps | EntityImageBannerProps;
+/**
+ * An entity's image that the user changes in place: an avatar that is itself the button (with a
+ * camera badge), or a banner spanning the width with a button over it. The button opens the
+ * device's file chooser, or, with `cloudImport`, the menu of `ImportButton` (device, AbyssCloud).
+ * While `uploading`, the button shows a progress indicator, opens nothing, and the upload is
+ * announced in a polite live region.
+ */
+export declare function EntityImageField(props: EntityImageFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/EntityImageField/EntityImageField.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/UserPicker/UserPicker.d.ts

@@ -0,0 +1,50 @@
+/** A user the picker offers. */
+export interface UserPickerOption {
+    id: string;
+    /** Display name: the option's title, the chip's label and the avatar's initial. */
+    name: string;
+    /** Shown under the name and searched; `null` when the host does not know it. */
+    email: string | null;
+    /** URL of the user's picture; `null` draws the initial of the name. */
+    pictureUrl: string | null;
+}
+interface UserPickerBaseProps {
+    options: UserPickerOption[];
+    /**
+     * Remote search: called with the typed text at each keystroke (the host debounces and fetches),
+     * and the options are shown as given. Without it, the options are filtered on the name and the
+     * email.
+     */
+    onSearch?(query: string): void;
+    /** A remote search is in flight: the list says so instead of « no option ». */
+    loading?: boolean;
+    /** Label above the field, its accessible name. */
+    label: string;
+    placeholder?: string;
+    /** Users listed but not selectable (already members, the current owner…). */
+    disabledIds?: string[];
+    /** What the list says when nothing matches. */
+    noOptionsText: string;
+    disabled?: boolean;
+}
+export interface UserPickerSingleProps extends UserPickerBaseProps {
+    multiple?: false;
+    /** Id of the selected user, `null` when none. */
+    value: string | null;
+    onChange(value: string | null): void;
+}
+export interface UserPickerMultipleProps extends UserPickerBaseProps {
+    multiple: true;
+    /** Ids of the selected users, in the order they were picked. */
+    value: string[];
+    onChange(value: string[]): void;
+}
+export type UserPickerProps = UserPickerSingleProps | UserPickerMultipleProps;
+/**
+ * A field to pick one user or several among a list: each option shows the avatar, the name and
+ * the email. Typing filters the list on the name and the email, or hands the text to `onSearch`
+ * for a server-side search. In multiple mode, the selected users are chips in the field; the left
+ * arrow walks them from the text and Backspace or Delete removes the focused one.
+ */
+export declare function UserPicker(props: UserPickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/UserPicker/UserPicker.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -10,3 +10,6 @@ export * from './CopyField/CopyField';
 export * from './ContextSelector/ContextSelector';
 export * from './DropZone/DropZone';
 export * from './ImportButton/ImportButton';
+export * from './UserPicker/UserPicker';
+export * from './CompanySearchField/CompanySearchField';
+export * from './EntityImageField/EntityImageField';