Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →

@focus4/toolbox

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@focus4/toolbox - npm Package Compare versions

Comparing version

12.9.0

12.10.0

+1

lib/focus4.toolbox.d.ts.map

+8

-9

package.json

		{
		"name": "@focus4/toolbox",
		"version": "12.9.0",
		"version": "12.10.0",
		"description": "Focus v4, toolbox module",
		@@ -15,6 +15,6 @@ "main": "lib/focus4.toolbox.js",
		"scripts": {
		"build": "rollup -cm --bundleConfigAsCjs"
		"build": "tsdown"
		},
		"dependencies": {
		"@focus4/styling": "12.9.0",
		"@focus4/styling": "12.10.0",
		"@types/luxon": "^3.7.1",
		@@ -24,14 +24,13 @@ "classnames": "^2.5.1",
		"luxon": "^3.7.2",
		"motion": "^12.35.2",
		"motion": "^12.38.0",
		"tslib": "^2.8.1"
		},
		"peerDependencies": {
		"react": ">= 19.0 < 20",
		"react-dom": ">= 19.0 < 20",
		"react": ">= 19 < 20",
		"react-dom": ">= 19 < 20",
		"react-i18next": ">= 16 < 17"
		},
		"devDependencies": {
		"@focus4/tooling": "12.9.0"
		},
		"gitHead": "fa2a850433c95d8f541379723dbaf54284e5eed7"
		"@focus4/tooling": "12.10.0"
		}
		}

-88

lib/components/autocomplete.d.ts

		import { ReactElement, ReactNode } from "react";
		import { CSSProp } from "@focus4/styling";
		import { SupportingTextCss } from "./supporting-text";
		import { TextFieldCss, TextFieldProps } from "./text-field";
		import autocompleteCss, { AutocompleteCss } from "./__style__/autocomplete.css";
		export { autocompleteCss };
		export type { AutocompleteCss };
		export interface AutocompleteProps<TSource = {
		key: string;
		label: string;
		}> extends Omit<TextFieldProps, "autoComplete" \| "disabled" \| "maxLength" \| "onChange" \| "readonly" \| "theme" \| "type"> {
		/** Suggestions supplémentaires à afficher en plus des suggestions issues de `values`, pour effectuer des actions différentes. */
		additionalSuggestions?: {
		key: string;
		content: ReactNode;
		onClick: () => void;
		}[];
		/** Autorise la sélection d'une valeur qui n'existe pas dans `values` (le contenu de la `query` sera retourné en tant que valeur). */
		allowUnmatched?: boolean;
		/** Vide la query à la sélection d'une valeur. */
		clearQueryOnChange?: boolean;
		/** Précise dans quel sens les suggestions doivent s'afficher. Par défaut : "auto". */
		direction?: "auto" \| "down" \| "up";
		/** Désactive l'Autocomplete (si true), ou une liste d'options de l'Autocomplete (si liste de string). */
		disabled?: boolean \| string[];
		/**
		* Détermine la propriété de l'objet a utiliser comme clé.
		* Par défaut : `item => item.key`
		*/
		getKey?: (item: TSource) => string;
		/**
		* Détermine la propriété de l'objet à utiliser comme libellé.
		* Le libellé de l'objet est le texte utilisé pour chercher la correspondance avec le texte saisi dans le champ.
		* Par défaut : `item => item.label`
		*/
		getLabel?: (item: TSource) => string;
		/** Composant personnalisé pour afficher les suggestions. */
		LineComponent?: (props: {
		item: TSource;
		}) => ReactElement;
		/**
		* Nombre maximal de suggestions affichées. Passer `0` ou `undefined` permet de désactiver cette limitation (à vos risques et périls).
		*
		* Par défaut : 50.
		*/
		maxDisplayed?: number;
		/** Ne ferme pas le menu de l'Autocomplete lors de la sélection d'un item. */
		noCloseOnChange?: boolean;
		/**
		* Appelé avec la clé correspondante lors de la sélection d'une valeur.
		*
		* Sera appelé avec `undefined` (si `allowUnmatched = false`) si aucune suggestion n'est disponible lors de la confirmation de la saisie
		* (au blur du champ ou en appuyant sur Entrée).
		*/
		onChange?: (key?: string, value?: TSource) => void;
		/** Handler appelé lorsque la query (= contenu du champ texte) change. A utiliser avec `query`. */
		onQueryChange?: (query: string) => void;
		/** N'affiche pas les suggestions si le champ est vide. */
		noSuggestionsOnEmptyQuery?: boolean;
		/** Permet de surcharger la query (= contenu du champ texte). A utiliser avec `onQueryChange`. */
		query?: string;
		/**
		* Contrôle la mise en forme des suggestions :
		* - `fit-to-field-single-line` force la largeur du menu à celle du champ (par défaut).
		* - `no-fit-single-line` laisse la largeur du menu se calculer en fonction de la taille de ses éléments.
		*/
		sizing?: "fit-to-field-single-line" \| "no-fit-single-line";
		/** Précise le mode de correspondance utilisé entre la query et le libellé. Par défaut : "start". */
		suggestionMatch?: "anywhere" \| "disabled" \| "start" \| "word";
		/** CSS. */
		theme?: CSSProp<AutocompleteCss & TextFieldCss & SupportingTextCss>;
		/** Valeurs disponibles pour la sélection. */
		values: TSource[];
		}
		/**
		* Un Autocomplete combine un champ texte ([`TextField`](/docs/composants-focus4∕toolbox-textfield--docs)) en autocomplétion avec un menu déroulant ([`Menu`](/docs/composants-focus4∕toolbox-menu--docs)), pour effectuer une sélection à partir d'une liste de valeurs pré-chargée.
		*
		* - Le filtrage des valeurs s'effecue dans le composant selon plusieurs modes de correspondance.
		* - Toutes les options du champ texte sont disponibles.
		* - Peut être utilisé comme un champ de recherche rapide.
		* - Peut afficher des suggestions complémentaires.
		*
		* L'`Autocomplete` peut également être utilisé dans un mode alternatif pour fournir des suggestions sur un champ de saisie libre. Pour cet usage, il faut utiliser `allowUnmatched`, avec `query` et `onQueryChange` à la place de `value` et de `onChange` (`onChange` peut néanmoints toujours être utilisé lorsqu'on sélectionne une valeur existante).
		*/
		export declare function Autocomplete<TSource = {
		key: string;
		label: string;
		}>({ additionalSuggestions, allowUnmatched, className, clearQueryOnChange, direction, disabled, error, getKey, getLabel, hint, icon, id, label, LineComponent, loading, maxDisplayed, multiline, name, noCloseOnChange, onBlur, onChange, onContextMenu, onFocus, onKeyDown, onKeyUp, onPaste, onPointerDown, onPointerEnter, onPointerLeave, onPointerUp, onQueryChange, noSuggestionsOnEmptyQuery, prefix, required, ref, query: pQuery, rows, showSupportingText, sizing, supportingText, suffix, suggestionMatch, tabIndex, trailing, theme: pTheme, value, values }: AutocompleteProps<TSource>): import("react/jsx-runtime").JSX.Element;

-52

lib/components/button.d.ts

		import { AriaAttributes, CSSProperties, FocusEventHandler, MouseEventHandler } from "react";
		import { CSSProp } from "@focus4/styling";
		import { PointerEvents } from "../utils/pointer-events";
		import { Icon } from "./font-icon";
		import buttonCss, { ButtonCss } from "./__style__/button.css";
		export { buttonCss };
		export type { ButtonCss };
		export interface ButtonProps extends PointerEvents<HTMLButtonElement \| HTMLLinkElement>, AriaAttributes {
		/** Classe CSS a ajouter au composant racine. */
		className?: string;
		/** Couleur du bouton. */
		color?: "accent" \| "light" \| "primary";
		/** Désactive le bouton. */
		disabled?: boolean;
		/** Si renseigné, pose une balise `<a>` à la place du `<button>`. */
		href?: string;
		/** Icône a afficher dans le bouton. */
		icon?: Icon;
		/** Position de l'icône dans le bouton. Par défaut : "left". */
		iconPosition?: "left" \| "right";
		/** Libellé du bouton. */
		label?: string;
		/** Affiche un indicateur de progression circulaire à la place de l'icône. */
		loading?: boolean;
		/** Au blur du bouton. */
		onBlur?: FocusEventHandler<HTMLButtonElement \| HTMLLinkElement>;
		/** Au clic sur le bouton. */
		onClick?: MouseEventHandler<HTMLButtonElement \| HTMLLinkElement>;
		/** Au focus du bouton. */
		onFocus?: FocusEventHandler<HTMLButtonElement \| HTMLLinkElement>;
		/** CSS inline pour l'élément racine. */
		style?: CSSProperties;
		/** "target" pour le `<a>`, si `href` est rensigné. */
		target?: string;
		/** "tabindex" pour l'élément HTML. */
		tabIndex?: number;
		/** CSS. */
		theme?: CSSProp<ButtonCss>;
		/** Type de bouton HTML (ignoré si `href` est renseigné). */
		type?: string;
		/** Variante du bouton .*/
		variant?: "elevated-filled" \| "elevated" \| "filled" \| "outlined";
		}
		/**
		* Le bouton standard permet de déclencher la plupart des actions dans une interface.
		*
		* - Peut contenir une icône (ou un spinner), à l'avant ou l'arrière.
		* - 5 types de boutons : simple, entouré, plein, surélevé et plein + surélevé.
		* - 3 couleurs au choix : primaire, accentuée, ou primaire claire.
		* - Peut être utilisé comme un bouton ou un lien.
		*/
		export declare function Button({ className, color, disabled, href, icon, iconPosition, label, loading, onBlur, onClick, onFocus, onPointerDown, onPointerEnter, onPointerLeave, onPointerUp, style, tabIndex, target, theme: pTheme, type, variant, ...other }: ButtonProps): import("react/jsx-runtime").JSX.Element;

-49

lib/components/calendar.d.ts

		import { Ref } from "react";
		import { CSSProp } from "@focus4/styling";
		import calendarCss, { CalendarCss } from "./__style__/calendar.css";
		export { calendarCss };
		export type { CalendarCss };
		export interface CalendarProps {
		/** Classe CSS pour le composant racine. */
		className?: string;
		/**
		* Format de la date à choisir. "yyyy-MM" limite la sélection à un mois uniquement, tandis que "yyyy" la limite à une année.
		* Par défaut : "yyyy-MM-dd"
		*/
		format?: "yyyy-MM-dd" \| "yyyy-MM" \| "yyyy";
		/** N'affiche pas la valeur de référence sur la calendrier. */
		hideReferenceValue?: boolean;
		/** Date maximale autorisée pour la saisie. */
		max?: string;
		/** Date minimale autorisée pour la saisie. */
		min?: string;
		/** Handler appelé à la sélection d'une date. */
		onChange?: (value: string, fromKeyDown: boolean) => void;
		/** Ref vers le calendrier pour le focus. */
		ref?: Ref<{
		focus(): void;
		}>;
		/**
		* Date de référence pour le calendrier.
		*
		* Elle sera affichée en color primary avec outline, et son mois sera celui par défaut à l'affichage si aucune date n'est sélectionnée.
		*
		* Par défaut : la date du jour.
		*/
		referenceValue?: string;
		/** TabIndex pour le Calendar. Par défaut : 0. */
		tabIndex?: number;
		/** CSS. */
		theme?: CSSProp<CalendarCss>;
		/** Date. */
		value?: string;
		}
		/**
		* Un calendrier permet à un utilisateur de choisir une date.
		*
		* - Intégré avec un champ de saisie texte via le composant [`InputDate`](/docs/composants-focus4∕form-toolbox-inputdate--docs).
		* - Peut être configuré pour limiter la saisie à un mois ou une année.
		*
		* La locale du calendrier est synchronisée avec celle configurée dans i18next.
		*/
		export declare function Calendar({ className, format, hideReferenceValue, max, min, onChange, ref, referenceValue, tabIndex, theme: pTheme, value }: CalendarProps): import("react/jsx-runtime").JSX.Element;

-40

lib/components/checkbox.d.ts

		import { FocusEventHandler, MouseEvent } from "react";
		import { CSSProp } from "@focus4/styling";
		import { PointerEvents } from "../utils/pointer-events";
		import checkboxCss, { CheckboxCss } from "./__style__/checkbox.css";
		export { checkboxCss };
		export type { CheckboxCss };
		/** Props du Checkbox. */
		export interface CheckboxProps extends PointerEvents<HTMLLabelElement> {
		/** Classe CSS a ajouter au composant racine. */
		className?: string;
		/** Désactive la Checkbox. */
		disabled?: boolean;
		/** Si renseigné, la Checkbox sera affichée en rouge. */
		error?: boolean;
		/** Affiche une icône "indéterminée" à la place du "check" */
		indeterminate?: boolean;
		/** Id pour l'input[type=checkbox] posé par la Checkbox. */
		id?: string;
		/** Libellé à poser à côté de la Checkbox. */
		label?: string;
		/** Name pour l'input[type=checkbox] posé par la Checkbox. */
		name?: string;
		/** Au blur de la Checkbox. */
		onBlur?: FocusEventHandler<HTMLInputElement>;
		/** Handler appelé au clic sur la Checkbox. */
		onChange?: (value: boolean, event?: MouseEvent<HTMLInputElement>) => void;
		/** Au focus de la Checkbox. */
		onFocus?: FocusEventHandler<HTMLInputElement>;
		/** CSS. */
		theme?: CSSProp<CheckboxCss>;
		/** Valeur (correspond à 'checked' sur l'input). */
		value: boolean;
		}
		/**
		* Une checkbox permet à un utilisateur de choisir un ou plusieurs objets dans une liste, ou d'activer/désactiver un objet.
		*
		* - Peut avoir un libellé.
		* - Peut afficher un statut indéterminé.
		*/
		export declare function Checkbox({ className, disabled, error, id, indeterminate, label, name, onBlur, onChange, onFocus, onPointerDown, onPointerEnter, onPointerLeave, onPointerUp, theme: pTheme, value }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

-43

lib/components/chip.d.ts

		import { FocusEventHandler, MouseEventHandler } from "react";
		import { CSSProp } from "@focus4/styling";
		import { PointerEvents } from "../utils/pointer-events";
		import { Icon } from "./font-icon";
		import chipCss, { ChipCss } from "./__style__/chip.css";
		export { chipCss };
		export type { ChipCss };
		export interface ChipProps extends PointerEvents<HTMLButtonElement \| HTMLLinkElement \| HTMLSpanElement> {
		/** Classe CSS a ajouter au composant racine. */
		className?: string;
		/** Couleur du Chip. */
		color?: "accent" \| "light" \| "primary";
		/** Désactive le Chip. */
		disabled?: boolean;
		/** Si renseigné, le Chip est affiché avec une élévation. */
		elevated?: boolean;
		/** Si renseigné, pose une balise `<a>` à la place du `<button>` ou `<span>`. */
		href?: string;
		/** Icône a afficher dans le Chip (à gauche). */
		icon?: Icon;
		/** Libellé du chip. */
		label: string;
		/** Au blur du Chip (si actionnable). */
		onBlur?: FocusEventHandler<HTMLButtonElement \| HTMLLinkElement>;
		/** Au click sur le Chip. Pose un <button> au lieu d'un <span> si rensgeiné. */
		onClick?: MouseEventHandler<HTMLButtonElement>;
		/** Si renseigné, le Chip a une action de suppression via un bouton icône (à droite). */
		onDeleteClick?: MouseEventHandler<HTMLSpanElement>;
		/** Au focus du Chip (si actionnable). */
		onFocus?: FocusEventHandler<HTMLButtonElement \| HTMLLinkElement>;
		/** "target" pour le `<a>`, si `href` est rensigné. */
		target?: string;
		/** CSS. */
		theme?: CSSProp<ChipCss>;
		}
		/**
		* Un chip permet aux utilisateurs de renseigner de l'information, faire des sélections, filtrer du contenu ou déclencher des actions.
		*
		* - Peut contenir une icône à l'avant, et une action de suppression à l'arrière.
		* - 3 couleurs au choix : primaire, accentuée, ou primaire claire.
		* - Peut être utilisé comme un bouton ou un lien.
		*/
		export declare function Chip({ className, color, disabled, elevated, href, icon, label, onBlur, onClick, onDeleteClick, onFocus, onPointerDown, onPointerEnter, onPointerLeave, onPointerUp, target, theme: pTheme }: ChipProps): import("react/jsx-runtime").JSX.Element;

-63

lib/components/dropdown.d.ts

		import { ReactElement } from "react";
		import { CSSProp } from "@focus4/styling";
		import { SupportingTextCss } from "./supporting-text";
		import { TextFieldCss, TextFieldProps } from "./text-field";
		import dropdownCss, { DropdownCss } from "./__style__/dropdown.css";
		export { dropdownCss };
		export type { DropdownCss };
		export interface DropdownProps<TSource = {
		key: string;
		label: string;
		}> extends Omit<TextFieldProps, "autoComplete" \| "disabled" \| "hint" \| "maxLength" \| "onChange" \| "readonly" \| "theme" \| "type"> {
		/** Précise dans quel sens les valeurs doivent s'afficher. Par défaut : "auto". */
		direction?: "auto" \| "down" \| "up";
		/** Désactive la Dropdown (si true), ou une liste d'options du Dropdown (si liste de string). */
		disabled?: boolean \| string[];
		/** Désactive la sélection de valeurs au clavier lorsque la Dropdown est fermée. */
		disableArrowSelectionWhenClosed?: boolean;
		/**
		* Détermine la propriété de l'objet a utiliser comme clé.
		* Par défaut : `item => item.key`
		*/
		getKey?: (item: TSource) => string;
		/**
		* Détermine la propriété de l'objet à utiliser comme libellé.
		* Par défaut : `item => item.label`
		*/
		getLabel?: (item: TSource) => string;
		/** Ajoute `undefined` dans la liste des options sélectionnables. Par défaut : "true". */
		hasUndefined?: boolean;
		/** Composant personnalisé pour afficher les valeurs. */
		LineComponent?: (props: {
		item: TSource;
		}) => ReactElement;
		/** Ne ferme pas le menu de la Dropdown lors de la sélection d'un item. */
		noCloseOnChange?: boolean;
		/** Appelé avec la clé correspondante lors de la sélection d'une valeur. */
		onChange?: (value?: string) => void;
		/**
		* Contrôle la mise en forme du Dropdown :
		* - `fit-to-field-and-wrap` va forcer la largeur du menu sur la largeur du champ, et faire des retours à la ligne si nécessaire. (par défaut).
		* - `fit-to-field-single-line` force également la largeur du menu sur la largeur du champ, mais le texte sera coupé avec une ellipse au lieu de revenir à la ligne.
		* - `no-fit-single-line` laisse le champ et le menu avec leurs largeurs respectives, sans retour à la ligne.
		* - `fit-to-values` force la largeur du champ sur la largeur des valeurs, sans retour à la ligne.
		*/
		sizing?: "fit-to-field-and-wrap" \| "fit-to-field-single-line" \| "fit-to-values" \| "no-fit-single-line";
		/** CSS. */
		theme?: CSSProp<DropdownCss & TextFieldCss & SupportingTextCss>;
		/** Libellé de l'option `undefined`. Sera affichée comme un `hint` si elle est désactivée par `hasUndefined: false`. */
		undefinedLabel?: string;
		/** Valeurs disponibles pour la sélection. */
		values: TSource[];
		}
		/**
		* Un Dropdown combine un champ texte ([`TextField`](/docs/composants-focus4∕toolbox-textfield--docs)) avec un menu déroulant ([`Menu`](/docs/composants-focus4∕toolbox-menu--docs)), pour effectuer une sélection parmi une liste de valeurs disponibles.
		*
		* - Toutes les options du champ texte sont disponibles.
		* - Le rendu de chaque ligne est paramétrable.
		* - La mise en page du champ et du menu déroulant contenant les valeurs est paramétrable.
		*/
		export declare function Dropdown<TSource = {
		key: string;
		label: string;
		}>({ className, direction, disableArrowSelectionWhenClosed, disabled, error, getKey, getLabel, hasUndefined, icon, id, label, LineComponent, loading, multiline, name, noCloseOnChange, onBlur, onChange, onContextMenu, onFocus, onKeyDown, onKeyUp, onPaste, onPointerDown, onPointerEnter, onPointerLeave, onPointerUp, prefix, ref, required, rows, sizing, showSupportingText, supportingText, suffix, tabIndex, trailing, theme: pTheme, undefinedLabel, value, values }: DropdownProps<TSource>): import("react/jsx-runtime").JSX.Element;

-52

lib/components/floating-action-button.d.ts

		import { AriaAttributes, CSSProperties, FocusEventHandler, MouseEventHandler } from "react";
		import { CSSProp } from "@focus4/styling";
		import { PointerEvents } from "../utils/pointer-events";
		import { Icon } from "./font-icon";
		import floatingActionButtonCss, { FloatingActionButtonCss } from "./__style__/floating-action-button.css";
		export { floatingActionButtonCss };
		export type { FloatingActionButtonCss };
		export interface FloatingActionButtonProps extends PointerEvents<HTMLButtonElement \| HTMLLinkElement>, AriaAttributes {
		/** Classe CSS a ajouter au composant racine. */
		className?: string;
		/** Couleur du bouton. */
		color?: "accent" \| "light" \| "primary";
		/** Désactive le bouton. */
		disabled?: boolean;
		/** Affiche le libellé du bouton dans le bouton. */
		extended?: boolean;
		/** Si renseigné, pose une balise `<a>` à la place du `<button>`. */
		href?: string;
		/** Icône a afficher dans le bouton. */
		icon?: Icon;
		/** Libellé du bouton. */
		label?: string;
		/** Variation du bouton avec moins d'élévation (ombre moins marquée). */
		lowered?: boolean;
		/** Au blur du bouton. */
		onBlur?: FocusEventHandler<HTMLButtonElement \| HTMLLinkElement>;
		/** Au clic sur le bouton. */
		onClick?: MouseEventHandler<HTMLButtonElement \| HTMLLinkElement>;
		/** Au focus du bouton. */
		onFocus?: FocusEventHandler<HTMLButtonElement \| HTMLLinkElement>;
		/** Taille du bouton. */
		size?: "large" \| "small";
		/** CSS inline pour l'élément racine. */
		style?: CSSProperties;
		/** "tabindex" pour l'élément HTML. */
		tabIndex?: number;
		/** "target" pour le `<a>`, si `href` est rensigné. */
		target?: string;
		/** CSS. */
		theme?: CSSProp<FloatingActionButtonCss>;
		/** Type de bouton HTML (ignoré si `href` est renseigné). */
		type?: string;
		}
		/**
		* Le bouton d'action flottant permet aux utilisateurs de réaliser des actions principales.
		*
		* - Doit contenir une icône, et peut être étendu avec un libellé.
		* - 3 tailles de boutons : petite, normale ou grande.
		* - 3 couleurs au choix : primaire, accentuée, ou primaire claire.
		* - Peut être utilisé comme un bouton ou un lien.
		*/
		export declare function FloatingActionButton({ className, color, disabled, extended, href, icon, label, lowered, onBlur, onClick, onFocus, onPointerDown, onPointerEnter, onPointerLeave, onPointerUp, size, style, tabIndex, target, theme: pTheme, type, ...other }: FloatingActionButtonProps): import("react/jsx-runtime").JSX.Element;

-61

lib/components/font-icon.d.ts

		import { CSSProperties } from "react";
		import { PointerEvents } from "../utils/pointer-events";
		/**
		* Définition d'une icône. Peut être :
		*
		* - Le nom d'une icône, utilisera la classe CSS définie dans `uiConfig.defaultIconClassName` (par défaut : `"material-symbols-outlined"`).
		* - Un objet `{name, className?}`, décrivant le nom le icône et sa classe CSS associée (la classe par défaut sera sélectionnée si `className` n'est pas renseigné).
		* - Une clé i18n pointant vers un objet `{name, className?}`.
		*
		* La classe CSS sera interprétée comme un template du nom si elle contient `{name}` dans sa définition.
		* Dans ce cas, le `name` ne sera pas posé en enfant du `<span>` qui définira l'icône.
		*/
		export type Icon = string \| {
		className: string;
		name: string;
		} \| {
		i18nKey: string;
		};
		export interface FontIconProps extends PointerEvents<HTMLSpanElement> {
		/** Texte alternatif pour l'icône. */
		alt?: string;
		/** Classe CSS à poser sur le composant racine. */
		className?: string;
		/**
		* Nom de l'icône à afficher. Ne sera pas posé en enfant du <span> si la classe CSS de l'icône est un template de `{name}`.
		*
		* Ignoré si `iconI18nKey` est renseigné.
		*/
		children?: string;
		/**
		* Définition d'icône mixte, peut être utilisé à la place de `children` / `iconClassName` / `iconI18nKey`.
		*
		* N'a pas la priorité sur ces définitions-là.
		*/
		icon?: Icon;
		/**
		* Classe CSS de l'icône, pour retrouver la police associée. Peut être utilisée comme template du nom de l'icône (en y remplaçant `{name}`).
		*
		* Ignoré si `iconI18nKey` est renseigné.
		*/
		iconClassName?: string;
		/**
		* Clé i18n pour retrouver l'icône. Doit correspondre à un objet `{name, className?}`.
		*
		* Remplace `children` et `iconClassName`.
		*/
		iconI18nKey?: string;
		/** Styles inline. */
		style?: CSSProperties;
		}
		/**
		* Affiche une icône. Une icône est définie par son nom et sa classe CSS, qui servira à retrouver la police d'icône associée.
		*
		* Une icône définie avec seulement un nom utilisera la classe CSS définie dans `uiConfig.defaultIconClassName` (par défaut : `"material-symbols-outlined"`).
		*
		* La classe CSS sera interprétée comme un template du nom si elle contient `{name}` dans sa définition.
		* Dans ce cas, le `name` ne sera pas posé en enfant du `<span>` qui définira l'icône.
		*
		* Une icône peut également être définie via une [clé i18n](/docs/les-bases-libellés-et-icônes--docs), qui devra pointer vers un objet `{name, className?}` représentant l'icône.
		*/
		export declare function FontIcon({ icon, alt, className, children, iconClassName, iconI18nKey, onPointerDown, onPointerEnter, onPointerLeave, onPointerUp, style }: FontIconProps): import("react/jsx-runtime").JSX.Element;

-50

lib/components/icon-button.d.ts

		import { AriaAttributes, CSSProperties, FocusEventHandler, MouseEventHandler } from "react";
		import { CSSProp } from "@focus4/styling";
		import { PointerEvents } from "../utils/pointer-events";
		import { Icon } from "./font-icon";
		import iconButtonCss, { IconButtonCss } from "./__style__/icon-button.css";
		export { iconButtonCss };
		export type { IconButtonCss };
		export interface IconButtonProps extends PointerEvents<HTMLButtonElement \| HTMLLinkElement>, AriaAttributes {
		/** Classe CSS a ajouter au composant racine. */
		className?: string;
		/** Couleur du bouton. */
		color?: "accent" \| "light" \| "primary";
		/** Désactive le bouton. */
		disabled?: boolean;
		/** Si renseigné, pose une balise `<a>` à la place du `<button>`. */
		href?: string;
		/** Icône a afficher dans le bouton. */
		icon: Icon;
		/** Libellé du bouton. */
		label?: string;
		/** Affiche un indicateur de progression circulaire à la place de l'icône. */
		loading?: boolean;
		/** Au blur du bouton. */
		onBlur?: FocusEventHandler<HTMLButtonElement \| HTMLLinkElement>;
		/** Au clic sur le bouton. */
		onClick?: MouseEventHandler<HTMLButtonElement \| HTMLLinkElement>;
		/** Au focus du bouton. */
		onFocus?: FocusEventHandler<HTMLButtonElement \| HTMLLinkElement>;
		/** CSS inline pour l'élément racine. */
		style?: CSSProperties;
		/** "tabindex" pour l'élément HTML. */
		tabIndex?: number;
		/** "target" pour le `<a>`, si `href` est rensigné. */
		target?: string;
		/** CSS. */
		theme?: CSSProp<IconButtonCss>;
		/** Type de bouton HTML (ignoré si `href` est renseigné). */
		type?: string;
		/** Variante du bouton .*/
		variant?: "filled" \| "outlined";
		}
		/**
		* Le bouton icône permet aux utilisateurs de réaliser une action secondaire en un seul clic.
		*
		* - Ne peut contenir qu'une icône (ou un spinner).
		* - 3 types de boutons : simple, entouré ou plein.
		* - 3 couleurs au choix : primaire, accentuée, ou primaire claire.
		* - Peut être utilisé comme un bouton ou un lien.
		*/
		export declare function IconButton({ className, color, disabled, href, icon, label, loading, onBlur, onClick, onFocus, onPointerDown, onPointerEnter, onPointerLeave, onPointerUp, style, tabIndex, target, theme: pTheme, type, variant, ...other }: IconButtonProps): import("react/jsx-runtime").JSX.Element;

-130

lib/components/menu.d.ts

		import { AriaRole, MouseEventHandler, ReactNode, RefObject } from "react";
		import { CSSProp } from "@focus4/styling";
		import { PointerEvents } from "../utils/pointer-events";
		import { Icon } from "./font-icon";
		import menuCss, { MenuCss } from "./__style__/menu.css";
		export { menuCss };
		export type { MenuCss };
		export interface MenuControls<T extends HTMLElement = HTMLDivElement> {
		/** Element HTML parent du menu sur lequel le menu s'attachera (au dessus ou en dessous, selon la position). */
		anchor: RefObject<T \| null>;
		/** Affiche le menu. */
		active: boolean;
		/** Ferme le menu. */
		close: () => void;
		/** Ouvre le menu. */
		open: () => void;
		/** Ouvre ou ferme le menu, selon son état. */
		toggle: () => void;
		}
		export interface MenuProps extends MenuControls {
		/** Classe CSS pour le composant racine du Menu. */
		className?: string;
		/**
		* Eléments enfants à afficher dans le menu.
		* Ces éléments seront sélectionnables au clavier par le Menu, qui appelera leur `onClick` (si défini) lorsqu'on appuie sur Entrée.
		*/
		children?: ReactNode;
		/**
		* Si renseigné, les items de Menu ne sont jamais retirés du DOM quand le Menu est fermé.
		*
		* Les animations au retrait d'éléments du Menu lorsqu'il est ouvert ne pourront pas fonctionner avec cette option.
		*/
		keepItemsInDOMWhenClosed?: boolean;
		/**
		* Ne vide pas l'élément du Menu sélectionné lorsque la souris sort du Menu
		* (pour pouvoir toujours cliquer sur cet élément en appuyant sur Entrée par exemple).
		*/
		keepSelectionOnPointerLeave?: boolean;
		/**
		* Ne vide pas l'élément du Menu sélectionné lorsque le menu s'ouvre ou se ferme.
		* (pour pouvoir contrôler l'élément sélectionné depuis un composant parent).
		*/
		keepSelectionOnToggle?: boolean;
		/** Valeur de `id` pour le `ul` HTML. */
		id?: string;
		/** Si renseigné, la navigation clavier dans le Menu n'appelera pas le `blur` de l'élément courant actif (pour un input par exemple). */
		noBlurOnArrowPress?: boolean;
		/** Ne ferme pas le menu au clic sur un item. */
		noCloseOnClick?: boolean;
		/** Si renseigné, utilise des <div> à la place d'un <ul> et des <li> pour les éléments du Menu. */
		noList?: boolean;
		/** N'affiche pas le focus ring lors de la navigation clavier dans le Menu. */
		noRing?: boolean;
		/** Désactive complètement la sélection d'items dans le Menu (en particulier au clavier). */
		noSelection?: boolean;
		/** Handler optionel appelé au clic (y compris au clavier) d'un élément du Menu. La `key` de l'enfant sera passée en paramètre. */
		onItemClick?: (key: string, from: "click" \| "keyboard") => void;
		/** Handler appelé lorsque l'élément sélectionné par le Menu change (au hover ou au clavier). */
		onSelectedChange?: (key?: string) => void;
		/**
		* Détermine la position du Menu par rapport à son élément ancre.
		*
		* Le Menu peut être placé au dessus (`top`) ou en dessous (`bottom`) en prenant toute la largeur de l'ancre,
		* ou bien en gardant la taille de son contenu l'alignant à gauche (`top-left` et `bottom-left`) ou à droite (`top-right` et `bottom-right`).
		*
		* La position peut être déterminée automatiquement selon la position de l'ancre sur la page au moment de son ouverture.
		* Il est possible de choisir entre
		* - `auto-fill` (`bottom` ou `top`)
		* - `auto-fit` (`bottom-left`, `bottom-right`, `top-left`, `top-right`)
		* - `auto-left` (`bottom-left` ou `top-left`)
		* - `auto-right` (`bottom-right` ou `top-right`)
		* - `bottom-auto` (`bottom-left` ou `bottom-right`)
		* - `top-auto` (`top-left` ou `top-right`)
		*
		* Par défaut : `auto-fit`.
		*/
		position?: "auto-fill" \| "auto-fit" \| "auto-left" \| "auto-right" \| "bottom-auto" \| "bottom-left" \| "bottom-right" \| "bottom" \| "top-auto" \| "top-left" \| "top-right" \| "top";
		/** Valeur de `role` pour le `ul` HTML. */
		role?: AriaRole;
		/** Permet de surcharger l'élement sélectionné du Menu, au lieu de le laisser utiliser son état interne. A utiliser avec `onSelectedChange`. */
		selected?: string;
		/** CSS. */
		theme?: CSSProp<MenuCss>;
		}
		export interface MenuItemProps extends PointerEvents<HTMLLIElement> {
		/** Le libellé de l'item de Menu. */
		caption: string;
		/** Classe CSS pour le composant racine. */
		className?: string;
		/** Désactive l'élément de Menu, qui ne pourra plus être sélectionné. */
		disabled?: boolean;
		/** Icône à poser devant l'item de Menu. */
		iconLeft?: Icon;
		/** Icône à poser derrière l'item de Menu. */
		iconRight?: Icon;
		/** Handler de clic sur l'item de Menu. */
		onClick?: MouseEventHandler<HTMLLIElement>;
		/** CSS. */
		theme?: CSSProp<MenuCss>;
		}
		/**
		* Composant générique à inclure dans un `Menu`, comprenant un libellé et d'éventuelles icônes à l'avant et l'arrière.
		*/
		export declare function MenuItem({ caption, className, disabled, iconLeft, iconRight, onPointerDown, onPointerEnter, onPointerLeave, onPointerUp, theme: pTheme }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
		/** Hook pour attacher un menu à un élément et des fonctions pour l'ouvrir et le fermer. */
		export declare function useMenu<T extends HTMLElement = HTMLDivElement>(): MenuControls<T>;
		/**
		* Un menu permet d'afficher une zone temporaire pour afficher une liste de valeurs qu'un utilisateur peut sélectionner.
		* Il doit s'attacher à un élément parent comme un [`Button`](/docs/composants-focus4∕toolbox-button--docs) ou un [`TextField`](/docs/composants-focus4∕toolbox-textfield--docs).
		*
		* Le hook `useMenu()` permet de créer les éléments nécessaires pour l'attacher et contrôler son affichage.
		*
		* L'élément générique d'un menu est le `MenuItem`, mais il est possible d'y mettre toute sorte de composant à l'intérieur.
		* L'[`Autocomplete`](/docs/composants-focus4∕toolbox-autocomplete--docs), le [`Dropdown`](/docs/composants-focus4∕toolbox-dropdown--docs) ou encore l'[`InputDate`](/docs/composants-focus4∕form-toolbox-inputdate--docs) utilisent un `Menu` pour afficher leurs listes de sélection/le calendrier.
		*/
		export declare function Menu({ active, anchor, children, className, close, keepItemsInDOMWhenClosed, keepSelectionOnPointerLeave, keepSelectionOnToggle, id, noBlurOnArrowPress, noCloseOnClick, noList, noRing, noSelection, onItemClick, onSelectedChange, position: pPosition, role, selected: pSelected, theme: pTheme }: MenuProps): import("react").DetailedReactHTMLElement<{
		ref: RefObject<HTMLDivElement \| HTMLUListElement \| null>;
		className: string;
		id: string \| undefined;
		onPointerLeave: () => void;
		role: AriaRole \| undefined;
		style: {
		top: number \| undefined;
		bottom: number \| undefined;
		left: number \| undefined;
		right: number \| undefined;
		maxHeight: number;
		};
		tabIndex: number;
		}, HTMLDivElement \| HTMLUListElement>;

-31

lib/components/progress-indicator.d.ts

		import { CSSProp } from "@focus4/styling";
		import { PointerEvents } from "../utils/pointer-events";
		import progressIndicatorCss, { ProgressIndicatorCss } from "./__style__/progress-indicator.css";
		export { progressIndicatorCss };
		export type { ProgressIndicatorCss };
		export interface ProgressIndicatorProps extends PointerEvents<HTMLDivElement> {
		/** Classe CSS pour l'élément racine. */
		className?: string;
		/** Progression indéterminée */
		indeterminate?: boolean;
		/** Valeur maximum. Par défaut: 100. */
		max?: number;
		/** Valeur minimum. Par défaut: 0. */
		min?: number;
		/** CSS. */
		theme?: CSSProp<ProgressIndicatorCss>;
		/** Valeur courante (entre `min` et `max`). Par défaut : 0. */
		value?: number;
		}
		/**
		* Un indicateur de chargement permet d'afficher le status d'un processus en cours, ici sous forme circulaire.
		*
		* Il peut indiquer une progression déterminée comme indéterminée.
		*/
		export declare function CircularProgressIndicator({ className, indeterminate, max, min, onPointerDown, onPointerEnter, onPointerLeave, onPointerUp, theme: pTheme, value }: ProgressIndicatorProps): import("react/jsx-runtime").JSX.Element;
		/**
		* Un indicateur de chargement permet d'afficher le status d'un processus en cours, ici sous forme linéaire.
		*
		* Il peut indiquer une progression déterminée comme indéterminée.
		*/
		export declare function LinearProgressIndicator({ className, indeterminate, max, min, onPointerDown, onPointerEnter, onPointerLeave, onPointerUp, theme: pTheme, value }: ProgressIndicatorProps): import("react/jsx-runtime").JSX.Element;

-54

lib/components/radio.d.ts

		import { FocusEventHandler, ReactNode } from "react";
		import { CSSProp } from "@focus4/styling";
		import { PointerEvents } from "../utils/pointer-events";
		import radioCss, { RadioCss } from "./__style__/radio.css";
		export { radioCss };
		export type { RadioCss };
		/** Props du Radio. */
		export interface RadioButtonProps extends PointerEvents<HTMLLabelElement> {
		/** Classe CSS a ajouter au composant racine. */
		className?: string;
		/** Désactive le RadioButton. */
		disabled?: boolean;
		/** Id pour l'input[type=radio] posé par le RadioButton. */
		id?: string;
		/** Libellé à poser à côté de la Checkbox. */
		label?: string;
		/** Name pour l'input[type=radio] posé par le RadioButton. */
		name?: string;
		/** Au blur du Radio. */
		onBlur?: FocusEventHandler<HTMLInputElement>;
		/** Au focus du Radio. */
		onFocus?: FocusEventHandler<HTMLInputElement>;
		/** CSS. */
		theme?: CSSProp<RadioCss>;
		/** Valeur du RadioGroup quand ce RadioButton est sélectionné. */
		value: string;
		}
		/**
		* Un bouton radio permet aux utilisateurs de choisir une option parmi un ensemble de valeurs.
		*
		* Un ensemble de `RadioButton` doit être contenu dans un `RadioGroup`.
		*/
		export declare function RadioButton({ className, disabled, label, id, onBlur, onFocus, onPointerDown, onPointerEnter, onPointerLeave, onPointerUp, name, theme: pTheme, value }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
		export interface RadioGroupProps {
		/** Autorise la sélection de `undefined` en cliquant sur le radio sélectionné pour le déselectionner. */
		allowUndefined?: boolean;
		/** Classe CSS a ajouter au composant racine. */
		className?: string;
		/** Les RadioButtons passés en enfant de ce composant seront ajoutés au groupe. */
		children?: ReactNode;
		/** Désactive le RadioGroup. */
		disabled?: boolean;
		/** Handler appelé au clic sur un RadioButton. */
		onChange?: (value?: string) => void;
		/** Valeur séléctionnée parmis les RadioButtons. */
		value?: string;
		}
		/**
		* Conteneur pour un ensemble de `RadioButton`, permettant de former un champ de saisie unique.
		*
		* Les composants `BooleanRadio` et `SelectRadio` sont des implémentations de plus haut niveau qui couvrent la plupart des cas d'utilisation
		* et sont à privilégier par rapport à l'usage direct d'un `RadioGroup` et de `RadioButton`.
		*/
		export declare function RadioGroup({ allowUndefined, className, children, disabled, onChange, value }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;

-28

lib/components/ripple.d.ts

		import { PointerEvent, ReactElement } from "react";
		import { PointerEvents } from "../utils/pointer-events";
		import rippleCss, { RippleCss } from "./__style__/ripple.css";
		export { rippleCss };
		export type { RippleCss };
		export interface RippleProps<T extends HTMLElement = HTMLElement> extends PointerEvents<T> {
		/** Centre le ripple sur la cible au lieu de l'endroit cliqué. */
		centered?: boolean;
		/** Classe CSS à passer au Ripple */
		className?: string;
		/** Composant enfant dans lequel poser le ripple. */
		children: ReactElement;
		/** Force la désactivation du ripple. */
		disabled?: boolean;
		/** Classe CSS de l'élément HTML dans lequel poser le ripple, si ce n'est pas l'élément racine. */
		rippleTarget?: string;
		}
		/**
		* Le `Ripple` est un composant à poser autour d'un autre élément pour y ajouter un effet "ripple" lors du clic.
		*
		* Tous les composants qui attendent un clic d'un utilisateur dans leur action principale en sont munis.
		*/
		export declare function Ripple<T extends HTMLElement = HTMLElement>({ centered, className, children, disabled, rippleTarget, ...props }: RippleProps<T>): import("react").DetailedReactHTMLElement<{
		onPointerDown: (e: PointerEvent<T>) => void;
		onPointerEnter: (e: PointerEvent<T>) => void;
		onPointerLeave: (e: PointerEvent<T>) => void;
		onPointerUp: (e: PointerEvent<T>) => void;
		}, HTMLElement>;

-35

lib/components/slider.d.ts

		import { CSSProp } from "@focus4/styling";
		import { PointerEvents } from "../utils/pointer-events";
		import sliderCss, { SliderCss } from "./__style__/slider.css";
		export { sliderCss };
		export type { SliderCss };
		export interface SliderProps extends PointerEvents<HTMLDivElement> {
		/** Classe CSS pour le composant racine. */
		className?: string;
		/** Désactive le Slider. */
		disabled?: boolean;
		/** Affiche un libellé au dessus de la poignée au survol avec la valeur exacte du Slider. */
		labeled?: boolean;
		/** Valeur (entière) maximale du Slider. Par défaut : 100. */
		max?: number;
		/** Valeur (entière) minimale du Slider. Par défaut : 0. */
		min?: number;
		/** Handler appelé au changement de la valeur du Slider. */
		onChange?: (value?: number) => void;
		/** Valeur minimale par incrément du Slider. Par défaut : 1. */
		step?: number;
		/** Affiche des indicateurs pour chaque valeur de `step` sur le Slider. */
		ticks?: boolean;
		/** CSS. */
		theme?: CSSProp<SliderCss>;
		/** Valeur du Slider. */
		value: number;
		}
		/**
		* Un slider permet à un utilisateur de choisir une valeur numérique dans un intervalle donné.
		*
		* - Le pas du slider peut être configuré.
		* - Peut indiquer la valeur précise lors l'interaction.
		* - Peut afficher un indicateur à chaque pas sur le slider.
		*/
		export declare function Slider({ className, disabled, labeled, max, min, onChange, onPointerDown, onPointerEnter, onPointerLeave, onPointerUp, step, ticks, theme: pTheme, value }: SliderProps): import("react/jsx-runtime").JSX.Element;

-34

lib/components/snackbar.d.ts

		import { CSSProp } from "@focus4/styling";
		import snackbarCss, { SnackbarCss } from "./__style__/snackbar.css";
		export { snackbarCss };
		export type { SnackbarCss };
		export interface SnackbarProps {
		/** Action de la Snackbar. */
		action?: {
		label: string;
		onClick: () => void;
		};
		/** Affiche la Snackbar. */
		active: boolean;
		/** Classe CSS pour l'élément racine. */
		className?: string;
		/** Si renseigné, affiche un bouton pour fermer la Snackbar avec ce handler. */
		close?: () => void;
		/** Niveau du message de la Snackbar. */
		level?: "error" \| "success" \| "warning";
		/** Message à afficher dans la Snackbar. */
		message: string;
		/** Handler appelé à la fermeture de la Snackbar. */
		onClose?: () => void;
		/** CSS. */
		theme?: CSSProp<SnackbarCss>;
		}
		/**
		* Une snackbar affiche un message court à un utilisateur en bas de l'écran pour le notifier du status d'une action dans l'application.
		*
		* Elle est posée par défaut par le `MessageCenter` du [`Layout`](/docs/mise-en-page-layout--docs).
		*
		* - 4 types de messages : succès, erreur, avertissement ou information
		* - Peut inclure une action.
		*/
		export declare function Snackbar({ active, action, className, close, level, message, onClose, theme: pTheme }: SnackbarProps): import("react").ReactPortal;

-29

lib/components/supporting-text.d.ts

		import { CSSProp } from "@focus4/styling";
		import supportingTextCss, { SupportingTextCss } from "./__style__/supporting-text.css";
		export { supportingTextCss };
		export type { SupportingTextCss };
		/**
		* Props de SupportingText.
		*/
		export interface SupportingTextProps {
		/** Si le champ associé est désactivé. */
		disabled?: boolean;
		/** Si le champ associé est en erreur. */
		error?: boolean;
		/** `id` pour l'input HTML. */
		id?: string;
		/** Taille du champ. */
		length?: number;
		/** Taille maximum du champ. Sera affiché en dessous du champ à côté de `supportingText`. */
		maxLength?: number;
		/** Contrôle l'affichage du texte en dessous du champ, quelque soit la valeur de `supportingText` ou `maxLength`. Par défaut : "auto". */
		showSupportingText?: "always" \| "auto" \| "never";
		/** Texte à afficher en dessous du champ. Sera affiché en rouge si `error`. */
		supportingText?: string;
		/** CSS. */
		theme?: CSSProp<SupportingTextCss>;
		}
		/**
		* Texte à afficher en dessous d'un champ (`TextField` par exemple) pour afficher un message (d'erreur) ou la taille du champ.
		*/
		export declare function SupportingText({ disabled, error, id, length, maxLength, showSupportingText, supportingText, theme: pTheme }: SupportingTextProps): import("react/jsx-runtime").JSX.Element \| null;

-42

lib/components/switch.d.ts

		import { FocusEventHandler, MouseEvent } from "react";
		import { CSSProp } from "@focus4/styling";
		import { PointerEvents } from "../utils/pointer-events";
		import { Icon } from "./font-icon";
		import switchCss, { SwitchCss } from "./__style__/switch.css";
		export { switchCss };
		export type { SwitchCss };
		export interface SwitchProps extends PointerEvents<HTMLLabelElement> {
		/** Classe CSS a ajouter au composant racine. */
		className?: string;
		/** Désactive le Switch. */
		disabled?: boolean;
		/** Si renseigné, le Switch sera affiché en rouge. */
		error?: boolean;
		/** Icône a afficher dans le Switch quand il est "off". */
		iconOff?: Icon;
		/** Icône a afficher dans le Switch quand il est "on". */
		iconOn?: Icon;
		/** Id pour l'input[type=checkbox] posé par le Switch. */
		id?: string;
		/** Libellé à poser à côté du Switch. */
		label?: string;
		/** Name pour l'input[type=checkbox] posé par le Switch. */
		name?: string;
		/** Au blur du Switch. */
		onBlur?: FocusEventHandler<HTMLInputElement>;
		/** Handler appelé au clic sur le Switch. */
		onChange?: (value: boolean, event?: MouseEvent<HTMLInputElement>) => void;
		/** Au focus du Switch. */
		onFocus?: FocusEventHandler<HTMLInputElement>;
		/** CSS. */
		theme?: CSSProp<SwitchCss>;
		/** Valeur (correspond à 'checked' sur l'input). */
		value: boolean;
		}
		/**
		* Un switch permet à un utilisateur de changer le statut d'un objet à actif/inactif.
		*
		* - Peut avoir un libellé.
		* - Peut afficher des icônes à l'intérieur, qui changent selon l'état du switch.
		*/
		export declare function Switch({ className, disabled, error, id, label, name, onBlur, onChange, onFocus, onPointerDown, onPointerEnter, onPointerLeave, onPointerUp, iconOn, iconOff, theme: pTheme, value }: SwitchProps): import("react/jsx-runtime").JSX.Element;

-50

lib/components/tabs.d.ts

		import { ReactNode } from "react";
		import { CSSProp } from "@focus4/styling";
		import { PointerEvents } from "../utils/pointer-events";
		import { Icon } from "./font-icon";
		import tabsCss, { TabsCss } from "./__style__/tabs.css";
		export { tabsCss };
		export type { TabsCss };
		export interface TabProps extends PointerEvents<HTMLDivElement> {
		/** Contenu du Tab. */
		children?: ReactNode;
		/** Classe CSS pour l'élément racine. */
		className?: string;
		/** Désactive le Tab. */
		disabled?: boolean;
		/** Icône du Tab. */
		icon?: Icon;
		/** Libellé du Tab. */
		label?: string;
		/** Handler appelé lorsque le Tab devient actif. */
		onActive?: () => void;
		/** CSS. */
		theme?: CSSProp<TabsCss>;
		}
		export interface TabsProps {
		/** Seuls des <Tab> sont supportés en tant qu'enfant de Tabs. */
		children?: ReactNode;
		/** Classe CSS pour l'élément racine. */
		className?: string;
		/** Index du Tab actif. */
		index?: number;
		/** Handler appelé au changement de Tab. */
		onChange?: (index: number) => void;
		/** Affiche les Tabs comme des Tabs "secondaires". */
		secondary?: boolean;
		/** CSS. */
		theme?: CSSProp<TabsCss>;
		}
		/**
		* Définit un tab à inclure dans une instance de `Tabs`.
		*
		* Peut inclure le contenu du tab en enfant ou peut être simplement utilisé pour le titre.
		*/
		export declare function Tab({ active, className, disabled, icon, index, label, onActive, onClick, onPointerDown, onPointerEnter, onPointerLeave, onPointerUp, theme: pTheme }: TabProps): import("react/jsx-runtime").JSX.Element;
		/**
		* Les tabs permettent d'organiser du contenu à travers différents écrans ou vues.
		*
		* - 2 types : primaires et secondaires
		* - Les tabs peuvent inclure le contenu ou simplement servir de barre de titres. Le changement de tab animera le contenu s'il est inclus.
		*/
		export declare function Tabs({ children, className, index, onChange, secondary, theme: pTheme }: TabsProps): import("react/jsx-runtime").JSX.Element;

-111

lib/components/text-field.d.ts

		import { AriaAttributes, AriaRole, ClipboardEventHandler, FocusEventHandler, FormEvent, KeyboardEventHandler, MouseEventHandler, ReactNode, Ref } from "react";
		import { CSSProp } from "@focus4/styling";
		import { PointerEvents } from "../utils/pointer-events";
		import { Icon } from "./font-icon";
		import { SupportingTextCss } from "./__style__/supporting-text.css";
		import textFieldCss, { TextFieldCss } from "./__style__/text-field.css";
		export { textFieldCss };
		export type { TextFieldCss };
		/** Définition des icônes de fin de champ texte. */
		export interface TrailingIcon {
		/** Affiche l'icône en erreur. */
		error?: boolean;
		/** Icône. */
		icon: Icon;
		/** Handler de clic sur l'icône (pose un bouton icône si renseigné au lieu d'une icône simple.) */
		onClick?: () => void;
		/** Ne focus pas le champ au clic sur l'icône. */
		noFocusOnClick?: boolean;
		/** Tooltip pour l'icône. */
		tooltip?: ReactNode;
		}
		/** Props du champ texte. */
		export interface TextFieldProps extends PointerEvents<HTMLInputElement \| HTMLTextAreaElement>, AriaAttributes {
		/** Valeur de `accept` sur l'input HTML. */
		accept?: string;
		/** Valeur de `autocomplete` sur l'input HTML. */
		autoComplete?: string;
		/** Classe CSS pour le composant racine. */
		className?: string;
		/** Désactive le champ texte. */
		disabled?: boolean;
		/** Affiche le champ texte en erreur. */
		error?: boolean;
		/** Ref vers le champ (pour ancrer un Menu dessus par exemple). */
		fieldRef?: Ref<HTMLDivElement>;
		/** Placeholder pour le champ texte. */
		hint?: string;
		/** Icône à poser devant le texte. */
		icon?: Icon;
		/** `id` pour l'input HTML. */
		id?: string;
		/** Libellé du champ, sera affiché à la place du `hint` et se déplacera sur le dessus lorsque le champ est utilisé. */
		label?: string;
		/** Affiche un indicateur de chargement dans le champ texte. */
		loading?: boolean;
		/** Taille maximum du champ. Sera affiché en dessous du champ à côté de `supportingText`. */
		maxLength?: number;
		/** Si renseigné, affiche un `<textarea>` à la place de l'`<input>`. */
		multiline?: boolean;
		/** `name` pour l'input HTML. */
		name?: string;
		/** Au blur du champ texte. */
		onBlur?: FocusEventHandler<HTMLInputElement \| HTMLSpanElement \| HTMLTextAreaElement>;
		/** Handler appelé à chaque modification du texte dans le champ. */
		onChange?: (value: string, event: FormEvent<HTMLInputElement \| HTMLTextAreaElement>) => void;
		/** Au clic sur le champ texte. */
		onClick?: MouseEventHandler<HTMLDivElement>;
		/** Au clic-droit dans le champ texte. */
		onContextMenu?: MouseEventHandler<HTMLInputElement \| HTMLTextAreaElement>;
		/** Au focus du champ texte. */
		onFocus?: FocusEventHandler<HTMLInputElement \| HTMLSpanElement \| HTMLTextAreaElement>;
		/** Au `keydown` du champ. */
		onKeyDown?: KeyboardEventHandler<HTMLInputElement \| HTMLTextAreaElement>;
		/** Au `keyup` du champ. */
		onKeyUp?: KeyboardEventHandler<HTMLInputElement \| HTMLTextAreaElement>;
		/** Au collage de texte dans le champ. */
		onPaste?: ClipboardEventHandler<HTMLInputElement \| HTMLTextAreaElement>;
		/** Préfixe à poser devant le texte. */
		prefix?: string;
		/** Si renseigné, crée un champ texte en lecture seule sans `<input>` HTML. */
		readonly?: boolean;
		/** Ref vers le input HTML. */
		ref?: Ref<HTMLInputElement \| HTMLTextAreaElement \| HTMLSpanElement>;
		/** Valeur de `required` sur l'input HTML. */
		required?: boolean;
		/** Valeur de `role` sur l'input HTML. */
		role?: AriaRole;
		/** Nombre de lignes pour le `<textarea>` (si `multiline`). */
		rows?: number;
		/** Contrôle l'affichage du texte en dessous du champ, quelque soit la valeur de `supportingText` ou `maxLength`. Par défaut : "auto". */
		showSupportingText?: "always" \| "auto" \| "never";
		/** Préfixe à poser après le texte. */
		suffix?: string;
		/** Texte à afficher en dessous du champ. Sera affiché en rouge si `error`. */
		supportingText?: string;
		/** `tabindex` pour l'input HTML. */
		tabIndex?: number;
		/** Définition des icônes à poser après le texte dans le champ. */
		trailing?: TrailingIcon \| TrailingIcon[];
		/** CSS. */
		theme?: CSSProp<TextFieldCss & SupportingTextCss>;
		/** `type` pour l'input HTML. */
		type?: string;
		/** Valeur du champ. */
		value?: string;
		}
		/**
		* Un champ texte permet au utilisateurs de renseigner du texte dans une interface.
		*
		* - Permet de faire de la saisie sur une ou plusieurs lignes.
		* - Peut limiter le nombre de caractères saisissables.
		* - Le texte saisi peut être entouré d'un préfixe ou d'un suffixe.
		* - Peut afficher une icône à l'avant, et un nombre arbitraire d'icônes à l'arrière ainsi qu'un indicateur de chargement.
		* - Les icônes arrières peuvent être munies d'une action et d'une tooltip.
		* - Peut afficher une erreur.
		*
		* Le `TextField` ne respecte pas les dimensions de la spécification Material Design 3 : il est volontairement plus compact pour s'inclure plus
		* naturellement dans le type de formulaires que l'on réalise avec Focus. Les dimensions originales sont indiquées en commentaire des variables CSS
		* du composant pour information et comparaison.
		*/
		export declare function TextField({ accept, autoComplete, className, disabled, error, fieldRef, hint, icon, id, label, loading, maxLength, multiline, name, onBlur, onChange, onClick, onContextMenu, onFocus, onKeyDown, onKeyUp, onPaste, onPointerDown, onPointerEnter, onPointerLeave, onPointerUp, prefix, readonly, ref, required, role, rows, showSupportingText, supportingText, suffix, tabIndex, theme: pTheme, trailing, type, value, ...props }: TextFieldProps): import("react/jsx-runtime").JSX.Element;

-22

lib/components/tooltip.d.ts

		import { ReactElement, ReactNode } from "react";
		import { CSSProp } from "@focus4/styling";
		import { PointerEvents } from "../utils/pointer-events";
		import tooltipCss, { TooltipCss } from "./__style__/tooltip.css";
		export { tooltipCss };
		export type { TooltipCss };
		export interface TooltipProps<T extends HTMLElement = HTMLElement> extends PointerEvents<T> {
		/** Composant enfant autour duquel poser la tooltip. */
		children: ReactElement;
		/** Comportement de la tooltip au clic. Par défaut : "hide". */
		clickBehavior?: "hide" \| "none" \| "show";
		/** Position de la tooltip ("vertical" = "top" ou "bottom", "horizontal" = "left" ou "right"). Par défaut : "vertical" */
		position?: "bottom" \| "horizontal" \| "left" \| "right" \| "top" \| "vertical";
		/** Contenu de la tooltip. */
		tooltip: ReactNode;
		/** CSS. */
		theme?: CSSProp<TooltipCss>;
		}
		/**
		* Une tooltip permet d'afficher un bref libellé ou message à un utilisateur au survol.
		*/
		export declare function Tooltip({ children, clickBehavior, onPointerDown, onPointerEnter, onPointerLeave, onPointerUp, position: pPosition, tooltip, theme: pTheme }: TooltipProps): import("react/jsx-runtime").JSX.Element;

-11

lib/utils/pointer-events.d.ts

		import { PointerEvent } from "react";
		export interface PointerEvents<T extends HTMLElement> {
		/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerdown_event) */
		onPointerDown?: (e: PointerEvent<T>) => void;
		/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerenter_event) */
		onPointerEnter?: (e: PointerEvent<T>) => void;
		/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerleave_event) */
		onPointerLeave?: (e: PointerEvent<T>) => void;
		/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerup_event) */
		onPointerUp?: (e: PointerEvent<T>) => void;
		}

-13

lib/utils/use-input-ref.d.ts

		import { MouseEvent, PointerEvent } from "react";
		import { PointerEvents } from "./pointer-events";
		export declare function useInputRef<TElement extends HTMLElement, TEvent extends HTMLElement>({ disabled, onChange, onPointerLeave, onPointerUp, value }: PointerEvents<TEvent> & {
		disabled?: boolean;
		onChange?: (value: any, e: MouseEvent<TElement>) => void;
		value?: any;
		}): {
		handleOnClick: (event: MouseEvent<TElement>) => void;
		handlePointerLeave: (event: PointerEvent<TEvent>) => void;
		handlePointerUp: (event: PointerEvent<TEvent>) => void;
		loaded: boolean;
		ref: import("react").RefObject<TElement \| null>;
		};

lib/focus4.toolbox.css

Sorry, the diff of this file is too big to display

lib/focus4.toolbox.d.ts

Sorry, the diff of this file is too big to display

lib/focus4.toolbox.js

Sorry, the diff of this file is too big to display

lib/focus4.toolbox.js.map

Sorry, the diff of this file is too big to display

@focus4/toolbox - npm Package Compare versions

Improved metrics

Worsened metrics

Dependency changes