@axa-fr/design-system-apollo-react 2.0.4-alpha.92 → 3.0.0-RC.1

package/dist/Form/FileUpload/FileUpload/FileUploadApollo.d.ts

@@ -0,0 +1,3 @@
+import { type FileUploadProps } from "./FileUploadCommon";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadApollo.css";
+export declare const FileUpload: import("react").ForwardRefExoticComponent<Omit<FileUploadProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Form/FileUpload/FileUpload/FileUploadApollo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { InputFile } from "../InputFile/InputFileApollo";
+import { FileUploadCommon } from "./FileUploadCommon";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadApollo.css";
+export const FileUpload = forwardRef((props, ref) => (_jsx(FileUploadCommon, { ...props, ref: ref, InputFileComponent: InputFile })));
+FileUpload.displayName = "FileUpload";

package/dist/Form/FileUpload/FileUpload/FileUploadCommon.d.ts

@@ -0,0 +1,18 @@
+import { type ComponentType, type ReactElement, type ReactNode } from "react";
+import type { InputFileProps } from "../InputFile/InputFileCommon";
+import type { ItemFileProps } from "../ItemFile/ItemFileCommon";
+export type FileUploadProps = Omit<InputFileProps, "children"> & {
+    /**
+     * List of ItemFile components representing uploaded files.
+     */
+    children?: ReactElement<ItemFileProps> | ReactElement<ItemFileProps>[];
+    /**
+     * Custom label for the uploaded files list. Defaults to "Vos fichiers importés :".
+     */
+    fileListLabel?: ReactNode;
+};
+type FileUploadCommonProps = FileUploadProps & {
+    InputFileComponent: ComponentType<InputFileProps>;
+};
+export declare const FileUploadCommon: import("react").ForwardRefExoticComponent<Omit<FileUploadCommonProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/Form/FileUpload/FileUpload/FileUploadCommon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, forwardRef, } from "react";
+import { generateId } from "../../../utilities/generateId";
+export const FileUploadCommon = forwardRef(({ InputFileComponent, className, children, fileListLabel = "Vos fichiers importés :", ...props }, ref) => {
+    return (_jsx(InputFileComponent, { ...props, className: ["af-file-upload", className].filter(Boolean).join(" "), ref: ref, children: children ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "af-file-list__title", children: fileListLabel }), _jsx("ul", { className: "af-file-list", children: Children.map(children, (child) => (_jsx("li", { className: "af-file-list__item", children: child }, generateId(child)))) })] })) : null }));
+});
+FileUploadCommon.displayName = "FileUploadCommon";

package/dist/Form/FileUpload/FileUpload/FileUploadLF.d.ts

@@ -0,0 +1,3 @@
+import { type FileUploadProps } from "./FileUploadCommon";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadLF.css";
+export declare const FileUpload: import("react").ForwardRefExoticComponent<Omit<FileUploadProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Form/FileUpload/FileUpload/FileUploadLF.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { InputFile } from "../InputFile/InputFileLF";
+import { FileUploadCommon } from "./FileUploadCommon";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadLF.css";
+export const FileUpload = forwardRef((props, ref) => (_jsx(FileUploadCommon, { ...props, ref: ref, InputFileComponent: InputFile })));
+FileUpload.displayName = "FileUpload";

package/dist/Form/FileUpload/InputFile/InputFileApollo.d.ts

@@ -0,0 +1,4 @@
+import { type InputFileProps } from "./InputFileCommon";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/InputFile/InputFileApollo.css";
+declare const InputFile: import("react").ForwardRefExoticComponent<Omit<InputFileProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { InputFile };

package/dist/Form/FileUpload/InputFile/InputFileApollo.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ItemLabel } from "../../ItemLabel/ItemLabelApollo";
+import { ItemMessage } from "../../ItemMessage/ItemMessageApollo";
+import { InputFileCommon } from "./InputFileCommon";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/InputFile/InputFileApollo.css";
+const InputFile = forwardRef((props, ref) => {
+    return (_jsx(InputFileCommon, { ...props, ref: ref, ItemLabelComponent: ItemLabel, ItemMessageComponent: ItemMessage }));
+});
+InputFile.displayName = "InputFile";
+export { InputFile };

package/dist/Form/FileUpload/InputFile/InputFileCommon.d.ts

@@ -0,0 +1,60 @@
+import { type ComponentPropsWithRef, type ComponentType, type MouseEventHandler, type ReactNode } from "react";
+import { type ItemLabelProps } from "../../ItemLabel/ItemLabelCommon";
+import { type ItemMessageProps } from "../../ItemMessage/ItemMessageCommon";
+type LabelProps = Partial<Omit<ItemLabelProps, "children" | "label" | "description" | "sideButtonLabel" | "onSideButtonClick" | "moreButtonLabel" | "onMoreButtonClick">>;
+export type InputFileProps = Omit<ComponentPropsWithRef<"input">, "type"> & {
+    /**
+     * Label text content
+     */
+    label?: ReactNode;
+    /**
+     * Additional description text that enriches the label.
+     * @example "Phone bill, EDF receipt, etc."
+     */
+    description?: ReactNode;
+    /**
+     * Label content for the side action button.
+     * When provided, renders a secondary button next to the main label.
+     */
+    sideButtonLabel?: ReactNode;
+    /**
+     * Click handler for the side button
+     */
+    onSideButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Label content for the more button
+     * When provided, renders an more button with an info icon.
+     */
+    moreButtonLabel?: ReactNode;
+    /**
+     * Click handler for the more button
+     */
+    onMoreButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Props forwarded to the label component to customize its appearance and behavior.
+     * Accepts a subset of ItemLabelProps (see LabelProps type). Use this to override
+     * visual or behavioral options for the label (e.g., size, tone, visibility of helpers).
+     */
+    labelProps?: LabelProps;
+    /**
+     * Help text displayed below the control. This text is associated with the input via
+     * `aria-describedby` when provided. Keep the content concise and actionable; avoid
+     * using color alone to convey meaning.
+     */
+    helper?: ReactNode;
+    /**
+     * Labels for the dropzone UI. Each field is optional and will fall back to defaults.
+     * Example: { dropzone: 'Glisser...', or: 'ou', button: 'Importer fichier' }
+     */
+    dropzoneLabels?: {
+        dropzone?: ReactNode;
+        or?: ReactNode;
+        button?: ReactNode;
+    };
+} & Omit<ItemMessageProps, "id">;
+type InputFileCommonProps = InputFileProps & {
+    ItemLabelComponent: ComponentType<ItemLabelProps>;
+    ItemMessageComponent: ComponentType<ItemMessageProps>;
+};
+export declare const InputFileCommon: import("react").ForwardRefExoticComponent<Omit<InputFileCommonProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/Form/FileUpload/InputFile/InputFileCommon.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, } from "react";
+import addCircleIcon from "@material-symbols/svg-400/rounded/add_circle-fill.svg";
+import { Svg } from "../../../Svg/Svg";
+const DEFAULT_DROPZONE_LABELS = {
+    dropzone: "Glisser et déposer un fichier",
+    or: "ou",
+    button: "Importer fichier",
+};
+export const InputFileCommon = forwardRef(({ ItemLabelComponent, ItemMessageComponent, id, label, description, sideButtonLabel, onSideButtonClick, moreButtonLabel, onMoreButtonClick, labelProps, helper, required, message, messageType = "error", className, style, dropzoneLabels = {}, children, ...props }, ref) => {
+    const generatedId = useId();
+    const inputId = id || generatedId;
+    const messageId = `${inputId}-message`;
+    const helpId = `${inputId}-help`;
+    const ariaDescribedby = [
+        helper && helpId,
+        message && messageType === "success" && messageId,
+    ].filter(Boolean);
+    const hasError = Boolean(message && messageType === "error");
+    const resolvedDropzoneLabels = {
+        dropzone: dropzoneLabels.dropzone || DEFAULT_DROPZONE_LABELS.dropzone,
+        or: dropzoneLabels.or || DEFAULT_DROPZONE_LABELS.or,
+        button: dropzoneLabels.button || DEFAULT_DROPZONE_LABELS.button,
+    };
+    return (_jsxs("div", { className: ["af-input-file", className].filter(Boolean).join(" "), style: style, children: [_jsx(ItemLabelComponent, { htmlFor: inputId, description: description, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, moreButtonLabel: moreButtonLabel, onMoreButtonClick: onMoreButtonClick, required: required, ...labelProps, children: label }), _jsxs("div", { className: "af-input-file__container", children: [_jsxs("span", { className: [
+                            "af-input-file__dropzone",
+                            hasError && "af-input-file__dropzone--error",
+                        ]
+                            .filter(Boolean)
+                            .join(" "), children: [_jsx("input", { ref: ref, type: "file", id: inputId, required: required, "aria-invalid": hasError || undefined, "aria-errormessage": hasError ? messageId : undefined, "aria-describedby": ariaDescribedby.length > 0
+                                    ? ariaDescribedby.join(" ")
+                                    : undefined, ...props }), _jsx("span", { children: resolvedDropzoneLabels.dropzone }), _jsx("span", { children: resolvedDropzoneLabels.or }), _jsxs("span", { className: "af-btn-client af-btn-client--tertiary", children: [_jsx(Svg, { src: addCircleIcon, role: "presentation" }), resolvedDropzoneLabels.button] })] }), helper ? (_jsx("span", { id: helpId, className: "af-input-file__help", children: helper })) : null, _jsx(ItemMessageComponent, { id: messageId, message: message, messageType: messageType })] }), children] }));
+});
+InputFileCommon.displayName = "InputFileCommon";

package/dist/Form/FileUpload/InputFile/InputFileLF.d.ts

@@ -0,0 +1,4 @@
+import { type InputFileProps } from "./InputFileCommon";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/InputFile/InputFileLF.css";
+declare const InputFile: import("react").ForwardRefExoticComponent<Omit<InputFileProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { InputFile };

package/dist/Form/FileUpload/InputFile/InputFileLF.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ItemLabel } from "../../ItemLabel/ItemLabelLF";
+import { ItemMessage } from "../../ItemMessage/ItemMessageLF";
+import { InputFileCommon } from "./InputFileCommon";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/InputFile/InputFileLF.css";
+const InputFile = forwardRef((props, ref) => (_jsx(InputFileCommon, { ...props, ref: ref, ItemLabelComponent: ItemLabel, ItemMessageComponent: ItemMessage })));
+InputFile.displayName = "InputFile";
+export { InputFile };

package/dist/Form/FileUpload/ItemFile/ItemFileApollo.d.ts

@@ -0,0 +1,3 @@
+import { type ItemFileProps } from "./ItemFileCommon";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/ItemFile/ItemFileApollo.css";
+export declare const ItemFile: (props: ItemFileProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/FileUpload/ItemFile/ItemFileApollo.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import deleteIcon from "@material-symbols/svg-400/outlined/delete.svg";
+import visibilityIcon from "@material-symbols/svg-400/outlined/visibility-fill.svg";
+import { ClickIcon } from "../../../ClickIcon/ClickIconApollo";
+import { Icon } from "../../../Icon/IconApollo";
+import { Spinner } from "../../../Spinner/SpinnerApollo";
+import { ItemMessage } from "../../ItemMessage/ItemMessageApollo";
+import { ItemFileCommon } from "./ItemFileCommon";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/ItemFile/ItemFileApollo.css";
+export const ItemFile = (props) => (_jsx(ItemFileCommon, { ItemMessageComponent: ItemMessage, ItemIconComponent: Icon, ItemSpinnerComponent: Spinner, ClickIconComponent: ClickIcon, removeIcon: deleteIcon, previewIcon: visibilityIcon, ...props }));

package/dist/Form/FileUpload/ItemFile/ItemFileCommon.d.ts

@@ -0,0 +1,54 @@
+import { type ComponentPropsWithoutRef, type ComponentType, type MouseEvent } from "react";
+import type { ClickIconProps } from "../../../ClickIcon/ClickIconCommon";
+import type { IconProps } from "../../../Icon/IconCommon";
+import type { SpinnerProps } from "../../../Spinner/SpinnerCommon";
+import type { ItemMessageProps } from "../../ItemMessage/ItemMessageCommon";
+export type ItemFileProps = {
+    /**
+     * The JavaScript File object representing the uploaded file.
+     * (required)
+     */
+    file: File;
+    /**
+     * When true, a spinner is shown instead of the validation icon and actions
+     * may be disabled.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * An optional error message shown below the file. If present, the item is
+     * rendered in an error state.
+     */
+    errorMessage?: string;
+    /**
+     * Callback invoked when the remove action is triggered. Receives the file
+     * and the click event.
+     */
+    onRemove?: (file: File, event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Callback invoked when the preview action is triggered. Receives the file
+     * and the click event.
+     */
+    onPreview?: (file: File, event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional props forwarded to the preview icon button (except `src` and
+     * `onClick`).
+     * @default {}
+     */
+    previewProps?: Partial<Omit<ClickIconProps, "src" | "onClick">>;
+    /**
+     * Optional props forwarded to the remove icon button (except `src` and
+     * `onClick`).
+     * @default {}
+     */
+    removeProps?: Partial<Omit<ClickIconProps, "src" | "onClick">>;
+} & Omit<ComponentPropsWithoutRef<"section">, "children">;
+export type ItemFileCommonProps = ItemFileProps & {
+    ItemMessageComponent: ComponentType<ItemMessageProps>;
+    ItemIconComponent: ComponentType<IconProps>;
+    ItemSpinnerComponent: ComponentType<SpinnerProps>;
+    ClickIconComponent: ComponentType<ClickIconProps>;
+    removeIcon: string;
+    previewIcon: string;
+};
+export declare const ItemFileCommon: ({ file, isLoading, errorMessage, className, onRemove, onPreview, previewProps, removeProps, removeIcon, previewIcon, ItemSpinnerComponent, ItemIconComponent, ItemMessageComponent, ClickIconComponent, ...props }: ItemFileCommonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/FileUpload/ItemFile/ItemFileCommon.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import validationIcon from "@material-symbols/svg-400/outlined/check_circle-fill.svg";
+import errorIcon from "@material-symbols/svg-400/outlined/error-fill.svg";
+const BASE_UNIT = 1000;
+const BYTE_UNITS = ["Ko", "Mo", "Go"];
+const getReadableFileSizeString = (fileSizeInBytes) => {
+    let i = -1;
+    let fileSizeInBytesCopy = fileSizeInBytes;
+    do {
+        fileSizeInBytesCopy /= BASE_UNIT;
+        i += 1;
+    } while (fileSizeInBytesCopy > BASE_UNIT);
+    return `${Math.max(fileSizeInBytesCopy, 0.1).toFixed(1)} ${BYTE_UNITS[i]}`;
+};
+export const ItemFileCommon = ({ file, isLoading, errorMessage, className, onRemove = () => { }, onPreview = () => { }, previewProps = {}, removeProps = {}, removeIcon, previewIcon, ItemSpinnerComponent, ItemIconComponent, ItemMessageComponent, ClickIconComponent, ...props }) => {
+    const hasError = Boolean(errorMessage);
+    const handleClick = (callback) => (e) => {
+        callback(file, e);
+    };
+    return (_jsxs("section", { className: ["af-item-file", hasError && "af-item-file--error", className]
+            .filter(Boolean)
+            .join(" "), "aria-busy": isLoading ? true : undefined, "aria-live": "polite", ...props, children: [_jsxs("div", { className: "af-item-file__body", children: [isLoading && !hasError ? (_jsx(ItemSpinnerComponent, { size: 24 })) : (_jsx(ItemIconComponent, { size: "S", src: hasError ? errorIcon : validationIcon })), _jsx("p", { className: "af-item-file__file-name", children: file.name }), _jsx("p", { className: "af-item-file__file-size", children: getReadableFileSizeString(file.size) }), _jsxs("div", { className: "af-item-file__actions", children: [!isLoading && !hasError && (_jsx(ClickIconComponent, { src: previewIcon, onClick: handleClick(onPreview), "aria-label": `Previsualiser le fichier ${file.name}`, ...previewProps })), _jsx(ClickIconComponent, { src: removeIcon, onClick: handleClick(onRemove), "aria-label": `Suppression du fichier ${file.name}`, ...removeProps })] })] }), _jsx(ItemMessageComponent, { message: errorMessage })] }));
+};

package/dist/Form/FileUpload/ItemFile/ItemFileLF.d.ts

@@ -0,0 +1,3 @@
+import { type ItemFileProps } from "./ItemFileCommon";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/ItemFile/ItemFileLF.css";
+export declare const ItemFile: (props: ItemFileProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/FileUpload/ItemFile/ItemFileLF.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import deleteIconFilled from "@material-symbols/svg-400/outlined/delete-fill.svg";
+import visibilityIcon from "@material-symbols/svg-400/outlined/visibility-fill.svg";
+import { ClickIcon } from "../../../ClickIcon/ClickIconLF";
+import { Icon } from "../../../Icon/IconLF";
+import { Spinner } from "../../../Spinner/SpinnerLF";
+import { ItemMessage } from "../../ItemMessage/ItemMessageLF";
+import { ItemFileCommon } from "./ItemFileCommon";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/ItemFile/ItemFileLF.css";
+export const ItemFile = (props) => (_jsx(ItemFileCommon, { ItemMessageComponent: ItemMessage, ItemIconComponent: Icon, ItemSpinnerComponent: Spinner, ClickIconComponent: ClickIcon, removeIcon: deleteIconFilled, previewIcon: visibilityIcon, ...props }));

package/dist/Form/ItemLabel/ItemLabelCommon.d.ts

@@ -1,16 +1,103 @@
-import { type ComponentType, type MouseEventHandler, type ReactNode } from "react";
+import { type ComponentType, type MouseEventHandler, type ReactNode, type ComponentProps } from "react";
 import type { ButtonProps } from "../../Button/ButtonCommon";
-export type ItemLabelProps = {
+export type ItemLabelProps = ComponentProps<"label"> & {
+    /**
+     * Label text content
+     * @deprecated use `children` instead.
+     */
     label?: ReactNode;
+    /**
+     * Additional description text that enriches the label.
+     * @example "Phone bill, EDF receipt, etc."
+     */
     description?: ReactNode;
+    /**
+     * Shows a visual asterisk (*) indicator next to the label.
+     */
     required?: boolean;
-    inputId: string;
-    sideButtonLabel?: string;
+    /**
+     * ID of the associated input element
+     * @deprecated use `htmlFor` instead.
+     */
+    inputId?: string;
+    /**
+     * Label content for the side action button.
+     * When provided, renders a secondary button next to the main label.
+     */
+    sideButtonLabel?: ReactNode;
+    /**
+     * Click handler for the side button
+     */
     onSideButtonClick?: MouseEventHandler<HTMLButtonElement>;
-    buttonLabel?: string;
+    /**
+     * Additional props to pass to the side button component.
+     */
+    sideButtonProps?: Omit<Partial<ButtonProps>, "children" | "onClick" | "variant" | "className">;
+    /**
+     * Label content for the more button
+     * @deprecated use `moreButtonLabel` instead.
+     */
+    buttonLabel?: ReactNode;
+    /**
+     * Click handler for the info button
+     * @deprecated use `onInfoButtonClick` instead.
+     */
     onButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Label content for the more button
+     * When provided, renders an more button with an info icon.
+     */
+    moreButtonLabel?: ReactNode;
+    /**
+     * Click handler for the more button
+     */
+    onMoreButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Additional props to pass to the more button component.
+     */
+    moreButtonProps?: Omit<Partial<ButtonProps>, "children" | "onClick" | "variant" | "className">;
 };
 export type ItemLabelCommonProps = ItemLabelProps & {
     ButtonComponent: ComponentType<ButtonProps>;
 };
-export declare const ItemLabelCommon: ({ label, description, required, inputId, sideButtonLabel, onSideButtonClick, buttonLabel, onButtonClick, ButtonComponent, }: ItemLabelCommonProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * A comprehensive label component for form items with support for descriptions and action buttons.
+ *
+ * This component provides an accessible label that can be enhanced with:
+ * - Visual required field indicator (asterisk)
+ * - Optional description text
+ * - Optional side action button
+ * - Optional more button with icon
+ *
+ * The component ensures proper accessibility by:
+ * - Associating the label with form controls via htmlFor
+ * - Providing appropriate ARIA attributes for screen readers
+ * - Supporting keyboard navigation for interactive elements
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ItemLabelCommon
+ *   htmlFor="email-input"
+ *   required
+ *   ButtonComponent={Button}
+ * >
+ *   Email Address
+ * </ItemLabelCommon>
+ * ```
+ *
+ * @example With description and action buttons
+ * ```tsx
+ * <ItemLabelCommon
+ *   htmlFor="document-upload"
+ *   description="Accepted: PDF, JPG, PNG (max 5MB)"
+ *   sideButtonLabel="Browse"
+ *   onSideButtonClick={handleBrowse}
+ *   moreButton="Help"
+ *   onMoreButtonClick={handleShowHelp}
+ *   ButtonComponent={Button}
+ * >
+ *   Proof of residence
+ * </ItemLabelCommon>
+ * ```
+ */
+export declare const ItemLabelCommon: ({ label, children, description, required, inputId, htmlFor, className, style, "aria-describedby": ariaDescribedby, sideButtonLabel, onSideButtonClick, sideButtonProps, buttonLabel, onButtonClick, moreButtonLabel, onMoreButtonClick, ButtonComponent, moreButtonProps, ...props }: ItemLabelCommonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Form/ItemLabel/ItemLabelCommon.js

@@ -2,10 +2,54 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, } from "react";
 import infoIcon from "@material-symbols/svg-400/outlined/info.svg";
 import { Svg } from "../../Svg/Svg";
-export const ItemLabelCommon = ({ label, description, required, inputId, sideButtonLabel, onSideButtonClick, buttonLabel, onButtonClick, ButtonComponent, }) => {
+/**
+ * A comprehensive label component for form items with support for descriptions and action buttons.
+ *
+ * This component provides an accessible label that can be enhanced with:
+ * - Visual required field indicator (asterisk)
+ * - Optional description text
+ * - Optional side action button
+ * - Optional more button with icon
+ *
+ * The component ensures proper accessibility by:
+ * - Associating the label with form controls via htmlFor
+ * - Providing appropriate ARIA attributes for screen readers
+ * - Supporting keyboard navigation for interactive elements
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ItemLabelCommon
+ *   htmlFor="email-input"
+ *   required
+ *   ButtonComponent={Button}
+ * >
+ *   Email Address
+ * </ItemLabelCommon>
+ * ```
+ *
+ * @example With description and action buttons
+ * ```tsx
+ * <ItemLabelCommon
+ *   htmlFor="document-upload"
+ *   description="Accepted: PDF, JPG, PNG (max 5MB)"
+ *   sideButtonLabel="Browse"
+ *   onSideButtonClick={handleBrowse}
+ *   moreButton="Help"
+ *   onMoreButtonClick={handleShowHelp}
+ *   ButtonComponent={Button}
+ * >
+ *   Proof of residence
+ * </ItemLabelCommon>
+ * ```
+ */
+export const ItemLabelCommon = ({ label, children, description, required, inputId, htmlFor, className, style, "aria-describedby": ariaDescribedby, sideButtonLabel, onSideButtonClick, sideButtonProps, buttonLabel, onButtonClick, moreButtonLabel, onMoreButtonClick, ButtonComponent, moreButtonProps, ...props }) => {
     const idDescription = useId();
-    if (!label && !description && !buttonLabel && !sideButtonLabel) {
+    const contentLabel = children ?? label;
+    const describedByIds = [description ? idDescription : null, ariaDescribedby]
+        .filter(Boolean)
+        .join(" ");
+    if (!contentLabel) {
         return null;
     }
-    return (_jsxs("div", { className: "af-item-label", children: [label ? (_jsxs("label", { htmlFor: inputId, "aria-describedby": description ? idDescription : undefined, className: "af-item-label__label", children: [label, " ", required ? _jsx("span", { "aria-hidden": true, children: " *" }) : null] })) : null, sideButtonLabel ? (_jsx(ButtonComponent, { variant: "ghost", onClick: onSideButtonClick, className: "af-item-label__sidebutton", children: sideButtonLabel })) : null, description ? (_jsx("span", { id: idDescription, className: "af-item-label__description", children: description })) : null, buttonLabel ? (_jsx(ButtonComponent, { className: "af-item-label__more", variant: "ghost", iconLeft: _jsx(Svg, { src: infoIcon, "aria-hidden": "true" }), onClick: onButtonClick, children: buttonLabel })) : null] }));
+    return (_jsxs("div", { className: ["af-item-label", className].filter(Boolean).join(" "), style: style, children: [_jsxs("label", { htmlFor: htmlFor || inputId, className: "af-item-label__label", "aria-describedby": describedByIds || undefined, ...props, children: [contentLabel, required ? _jsx("span", { "aria-hidden": true, children: "*" }) : null] }), sideButtonLabel ? (_jsx(ButtonComponent, { ...sideButtonProps, variant: "ghost", onClick: onSideButtonClick, className: "af-item-label__sidebutton", children: sideButtonLabel })) : null, description ? (_jsx("span", { id: idDescription, className: "af-item-label__description", children: description })) : null, moreButtonLabel || buttonLabel ? (_jsx(ButtonComponent, { iconLeft: _jsx(Svg, { src: infoIcon, role: "presentation" }), ...moreButtonProps, variant: "ghost", className: "af-item-label__more", onClick: onMoreButtonClick || onButtonClick, children: moreButtonLabel || buttonLabel })) : null] }));
 };

package/dist/Spinner/SpinnerCommon.d.ts

@@ -5,7 +5,7 @@ export declare const spinnerVariants: {
     readonly white: "white";
 };
 export type SpinnerVariants = keyof typeof spinnerVariants;
-type SpinnerProps = {
+export type SpinnerProps = {
     size?: 24 | 32 | 40;
     variant?: SpinnerVariants;
     text?: string;

package/dist/index.d.ts

@@ -23,7 +23,6 @@ export { type OptionType } from "./Form/InputPhone/InputPhone.types";
 export { InputPhone } from "./Form/InputPhone/InputPhoneApollo";
 export { InputText } from "./Form/InputText/InputTextApollo";
 export { InputTextAtom } from "./Form/InputTextAtom/InputTextAtomApollo";
-export { ItemFile, itemFileVariants } from "./Form/ItemFile/ItemFileApollo";
 export { ItemLabel } from "./Form/ItemLabel/ItemLabelApollo";
 export { ItemMessage, itemMessageVariants, type ItemMessageVariants, } from "./Form/ItemMessage/ItemMessageApollo";
 export { CardRadio } from "./Form/Radio/CardRadio/CardRadioApollo";
@@ -50,3 +49,6 @@ export { Svg } from "./Svg/Svg";
 export { Tag, tagVariants, type TagVariants } from "./Tag/TagApollo";
 export { TimelineVertical } from "./TimelineVertical/TimelineVerticalApollo";
 export { Toggle } from "./Toggle/ToggleApollo";
+export { InputFile } from "./Form/FileUpload/InputFile/InputFileApollo";
+export { ItemFile } from "./Form/FileUpload/ItemFile/ItemFileApollo";
+export { FileUpload } from "./Form/FileUpload/FileUpload/FileUploadApollo";

package/dist/index.js

@@ -22,7 +22,6 @@ export { InputDate } from "./Form/InputDate/InputDateApollo";
 export { InputPhone } from "./Form/InputPhone/InputPhoneApollo";
 export { InputText } from "./Form/InputText/InputTextApollo";
 export { InputTextAtom } from "./Form/InputTextAtom/InputTextAtomApollo";
-export { ItemFile, itemFileVariants } from "./Form/ItemFile/ItemFileApollo";
 export { ItemLabel } from "./Form/ItemLabel/ItemLabelApollo";
 export { ItemMessage, itemMessageVariants, } from "./Form/ItemMessage/ItemMessageApollo";
 export { CardRadio } from "./Form/Radio/CardRadio/CardRadioApollo";
@@ -49,3 +48,6 @@ export { Svg } from "./Svg/Svg";
 export { Tag, tagVariants } from "./Tag/TagApollo";
 export { TimelineVertical } from "./TimelineVertical/TimelineVerticalApollo";
 export { Toggle } from "./Toggle/ToggleApollo";
+export { InputFile } from "./Form/FileUpload/InputFile/InputFileApollo";
+export { ItemFile } from "./Form/FileUpload/ItemFile/ItemFileApollo";
+export { FileUpload } from "./Form/FileUpload/FileUpload/FileUploadApollo";

package/dist/indexLF.d.ts

@@ -27,7 +27,6 @@ export { InputText,
 /** @deprecated Use `InputText` instead. */
 InputText as TextInput, } from "./Form/InputText/InputTextLF";
 export { InputTextAtom } from "./Form/InputTextAtom/InputTextAtomLF";
-export { ItemFile, itemFileVariants } from "./Form/ItemFile/ItemFileLF";
 export { ItemLabel } from "./Form/ItemLabel/ItemLabelLF";
 export { ItemMessage, itemMessageVariants, type ItemMessageVariants, } from "./Form/ItemMessage/ItemMessageLF";
 export { CardRadio } from "./Form/Radio/CardRadio/CardRadioLF";
@@ -54,3 +53,6 @@ export { Svg } from "./Svg/Svg";
 export { Tag, tagVariants, type TagVariants } from "./Tag/TagLF";
 export { TimelineVertical } from "./TimelineVertical/TimelineVerticalLF";
 export { Toggle } from "./Toggle/ToggleLF";
+export { InputFile } from "./Form/FileUpload/InputFile/InputFileLF";
+export { ItemFile } from "./Form/FileUpload/ItemFile/ItemFileLF";
+export { FileUpload } from "./Form/FileUpload/FileUpload/FileUploadLF";

package/dist/indexLF.js

@@ -26,7 +26,6 @@ export { InputText,
 /** @deprecated Use `InputText` instead. */
 InputText as TextInput, } from "./Form/InputText/InputTextLF";
 export { InputTextAtom } from "./Form/InputTextAtom/InputTextAtomLF";
-export { ItemFile, itemFileVariants } from "./Form/ItemFile/ItemFileLF";
 export { ItemLabel } from "./Form/ItemLabel/ItemLabelLF";
 export { ItemMessage, itemMessageVariants, } from "./Form/ItemMessage/ItemMessageLF";
 export { CardRadio } from "./Form/Radio/CardRadio/CardRadioLF";
@@ -53,3 +52,6 @@ export { Svg } from "./Svg/Svg";
 export { Tag, tagVariants } from "./Tag/TagLF";
 export { TimelineVertical } from "./TimelineVertical/TimelineVerticalLF";
 export { Toggle } from "./Toggle/ToggleLF";
+export { InputFile } from "./Form/FileUpload/InputFile/InputFileLF";
+export { ItemFile } from "./Form/FileUpload/ItemFile/ItemFileLF";
+export { FileUpload } from "./Form/FileUpload/FileUpload/FileUploadLF";

package/dist/utilities/generateId.d.ts

@@ -0,0 +1 @@
+export declare const generateId: (item: object) => string;

package/dist/utilities/generateId.js

@@ -0,0 +1,10 @@
+let counter = 1;
+const map = new WeakMap();
+export const generateId = (item) => {
+    if (!map.has(item)) {
+        map.set(item, counter);
+        counter += 1;
+        return generateId(item);
+    }
+    return `id-${map.get(item)}`;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-apollo-react",
-  "version": "2.0.4-alpha.92",
+  "version": "3.0.0-RC.1",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,10 +46,10 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-apollo-css": "2.0.4-alpha.92",
+    "@axa-fr/design-system-apollo-css": "3.0.0-RC.1",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18",
-    "@axa-fr/design-system-look-and-feel-css": "2.0.4-alpha.92"
+    "@axa-fr/design-system-look-and-feel-css": "3.0.0-RC.1"
   },
   "peerDependenciesMeta": {
     "@material-symbols/svg-400": {

package/dist/Form/ItemFile/ItemFileApollo.d.ts

@@ -1,4 +0,0 @@
-import "@axa-fr/design-system-apollo-css/dist/Form/ItemFile/ItemFileApollo.css";
-import type { ItemFileProps } from "./types";
-export { itemFileVariants } from "./ItemFileCommon";
-export declare const ItemFile: ({ onDeleteClick, onVisibilityClick, ariaLabelVisibility, ariaLabelDelete, filename, ...props }: ItemFileProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/ItemFile/ItemFileApollo.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/Form/ItemFile/ItemFileApollo.css";
-import deleteIcon from "@material-symbols/svg-400/outlined/delete.svg";
-import visibilityIcon from "@material-symbols/svg-400/outlined/visibility-fill.svg";
-import { ClickIcon } from "../../ClickIcon/ClickIconApollo";
-import { Icon } from "../../Icon/IconApollo";
-import { Spinner } from "../../Spinner/SpinnerApollo";
-import { ItemMessage } from "../ItemMessage/ItemMessageApollo";
-import { ItemFileCommon } from "./ItemFileCommon";
-export { itemFileVariants } from "./ItemFileCommon";
-export const ItemFile = ({ onDeleteClick, onVisibilityClick, ariaLabelVisibility, ariaLabelDelete, filename, ...props }) => (_jsx(ItemFileCommon, { ItemMessageComponent: ItemMessage, ItemIconComponent: Icon, ItemSpinnerComponent: Spinner, deleteIcon: _jsx(ClickIcon, { src: deleteIcon, onClick: onDeleteClick, "aria-label": ariaLabelDelete || `Suppression du fichier ${filename}` }), visibilityIcon: _jsx(ClickIcon, { src: visibilityIcon, onClick: onVisibilityClick, "aria-label": ariaLabelVisibility || `Observer le fichier ${filename}` }), ...props }));

package/dist/Form/ItemFile/ItemFileCommon.d.ts

@@ -1,34 +0,0 @@
-import { ReactNode, type ComponentProps, type ComponentPropsWithoutRef, type ComponentType } from "react";
-import type { IconProps } from "../../Icon/IconCommon";
-import { Spinner } from "../../Spinner/SpinnerCommon";
-import { ItemMessage, type ItemMessageProps } from "../ItemMessage/ItemMessageCommon";
-export declare const itemFileVariants: {
-    readonly success: "success";
-    readonly error: "error";
-    readonly loading: "loading";
-};
-export type ItemFileState = keyof typeof itemFileVariants;
-export type ItemFileProps = {
-    state: ItemFileState;
-    ariaLabelVisibility?: string;
-    ariaLabelDelete?: string;
-    filename?: string;
-    title: string;
-    subTitle: string;
-    deleteIcon: ReactNode;
-    visibilityIcon?: ReactNode;
-    /**
-     * @deprecated Use `message` and messageType instead.
-     */
-    errorMessage?: string;
-    /**
-     * @deprecated Use `message` and messageType instead.
-     */
-    success?: string;
-} & Omit<ComponentPropsWithoutRef<"section">, "children"> & Partial<ItemMessageProps>;
-export type ItemFileCommonProps = ItemFileProps & {
-    ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
-    ItemIconComponent: ComponentType<IconProps>;
-    ItemSpinnerComponent: ComponentType<ComponentProps<typeof Spinner>>;
-};
-export declare const ItemFileCommon: ({ className, state, title, subTitle, errorMessage, deleteIcon, visibilityIcon, success, message, messageType, ItemSpinnerComponent, ItemIconComponent, ItemMessageComponent, ...props }: ItemFileCommonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/ItemFile/ItemFileCommon.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from "classnames";
-import { ItemStateIcon } from "./ItemStateIcon";
-export const itemFileVariants = {
-    success: "success",
-    error: "error",
-    loading: "loading",
-};
-export const ItemFileCommon = ({ className, state, title, subTitle, errorMessage, deleteIcon, visibilityIcon, success, message, messageType, ItemSpinnerComponent, ItemIconComponent, ItemMessageComponent, ...props }) => {
-    const hasError = (Boolean(message) && messageType === "error") || Boolean(errorMessage);
-    const classname = classNames("af-item-file", hasError && "af-item-file--error", className);
-    return (_jsxs("section", { className: classname, ...props, children: [_jsxs("div", { className: "af-item-file__body", children: [_jsx(ItemStateIcon, { state: state, ItemIconComponent: ItemIconComponent, ItemSpinnerComponent: ItemSpinnerComponent }), _jsx("p", { className: "af-item-file__title", children: title }), _jsx("p", { className: "af-item-file__subtitle", children: subTitle }), _jsxs("div", { className: "af-item-file__actions", children: [state === "success" && visibilityIcon, deleteIcon] })] }), _jsx(ItemMessageComponent, { message: message || errorMessage || success, messageType: messageType || (errorMessage ? "error" : "success") })] }));
-};

package/dist/Form/ItemFile/ItemFileLF.d.ts

@@ -1,4 +0,0 @@
-import "@axa-fr/design-system-apollo-css/dist/Form/ItemFile/ItemFileLF.css";
-import type { ItemFileProps } from "./types";
-export { itemFileVariants } from "./ItemFileCommon";
-export declare const ItemFile: ({ onDeleteClick, onVisibilityClick, ariaLabelVisibility, ariaLabelDelete, filename, ...props }: ItemFileProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/ItemFile/ItemFileLF.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/Form/ItemFile/ItemFileLF.css";
-import deleteIconFilled from "@material-symbols/svg-400/outlined/delete-fill.svg";
-import visibilityIcon from "@material-symbols/svg-400/outlined/visibility-fill.svg";
-import { ClickIcon } from "../../ClickIcon/ClickIconLF";
-import { Icon } from "../../Icon/IconLF";
-import { Spinner } from "../../Spinner/SpinnerLF";
-import { ItemMessage } from "../ItemMessage/ItemMessageLF";
-import { ItemFileCommon } from "./ItemFileCommon";
-export { itemFileVariants } from "./ItemFileCommon";
-export const ItemFile = ({ onDeleteClick, onVisibilityClick, ariaLabelVisibility, ariaLabelDelete, filename, ...props }) => (_jsx(ItemFileCommon, { ItemMessageComponent: ItemMessage, ItemIconComponent: Icon, ItemSpinnerComponent: Spinner, deleteIcon: _jsx(ClickIcon, { src: deleteIconFilled, onClick: onDeleteClick, "aria-label": ariaLabelDelete || `Suppression du fichier ${filename}` }), visibilityIcon: _jsx(ClickIcon, { src: visibilityIcon, onClick: onVisibilityClick, "aria-label": ariaLabelVisibility || `Observer le fichier ${filename}` }), ...props }));

package/dist/Form/ItemFile/ItemStateIcon.d.ts

@@ -1,11 +0,0 @@
-import type { ComponentType, ComponentProps } from "react";
-import type { IconProps } from "../../Icon/IconCommon";
-import { Spinner } from "../../Spinner/SpinnerCommon";
-import type { ItemFileState } from "./ItemFileCommon";
-interface ItemStateIconProps {
-    state: ItemFileState;
-    ItemIconComponent: ComponentType<IconProps>;
-    ItemSpinnerComponent: ComponentType<ComponentProps<typeof Spinner>>;
-}
-declare const ItemStateIcon: ({ state, ItemIconComponent, ItemSpinnerComponent, }: ItemStateIconProps) => import("react/jsx-runtime").JSX.Element;
-export { ItemStateIcon };

package/dist/Form/ItemFile/ItemStateIcon.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import validationIcon from "@material-symbols/svg-400/outlined/check_circle-fill.svg";
-import errorIcon from "@material-symbols/svg-400/outlined/error-fill.svg";
-import { getComponentClassName } from "../../utilities/getComponentClassName";
-const ItemStateIcon = ({ state, ItemIconComponent, ItemSpinnerComponent, }) => {
-    const componentClassName = getComponentClassName("af-icon", `af-icon__${state}`);
-    return state === "loading" ? (_jsx(ItemSpinnerComponent, { size: 24, className: "af-item-file__spinner" })) : (_jsx(ItemIconComponent, { className: componentClassName, size: "S", src: state === "success" ? validationIcon : errorIcon }));
-};
-export { ItemStateIcon };

package/dist/Form/ItemFile/types.d.ts

@@ -1,6 +0,0 @@
-import { type MouseEvent } from "react";
-import type { ItemFileCommonProps } from "./ItemFileCommon";
-export type ItemFileProps = Omit<ItemFileCommonProps, "ItemMessageComponent" | "ItemIconComponent" | "ItemClickIconComponent" | "ItemSpinnerComponent" | "deleteIcon" | "visibilityIcon"> & {
-    onDeleteClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    onVisibilityClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-};

package/dist/Form/ItemFile/types.js

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