@axa-fr/design-system-look-and-feel-react 0.1.1

package/dist/Accordion/Accordion.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { AccordionCore } from "../AccordionCore/AccordionCore";
+import { AccordionTagDateContainer } from "./AccordionTagDateContainer";
+type AccordionProps = {
+    title: string;
+    subtitle?: string;
+    icon?: ReactNode;
+    value?: string;
+    isTitleFirst?: boolean;
+} & ComponentProps<typeof AccordionTagDateContainer> & Partial<ComponentProps<typeof AccordionCore>>;
+export declare const Accordion: ({ title, children, icon, subtitle, tagLabel, tagProps, dateLabel, dateProps, value, isTitleFirst, ...accordionCoreProps }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Accordion/Accordion.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { AccordionCore } from "../AccordionCore/AccordionCore";
+import { BREAKPOINT, getComponentClassName, useIsSmallScreen, } from "../utilities";
+import { AccordionTagDateContainer } from "./AccordionTagDateContainer";
+export const Accordion = ({ title, children, icon, subtitle, tagLabel, tagProps, dateLabel, dateProps, value, isTitleFirst = true, ...accordionCoreProps }) => {
+    const isMobile = useIsSmallScreen(BREAKPOINT.SM);
+    const isShowingIcon = Boolean(icon && isTitleFirst);
+    const summaryClassName = useMemo(() => getComponentClassName("af-accordion__summary", isTitleFirst ? "title-first" : ""), [isTitleFirst]);
+    return (_jsx(AccordionCore, { summary: _jsxs(_Fragment, { children: [isShowingIcon && isMobile && (_jsx("div", { className: "af-accordion__icon", children: icon })), !isTitleFirst && (_jsx(AccordionTagDateContainer, { tagLabel: tagLabel, dateLabel: dateLabel, tagProps: tagProps, dateProps: dateProps })), _jsxs("div", { className: "af-accordion__title-container", children: [isShowingIcon && !isMobile && (_jsx("div", { className: "af-accordion__icon", children: icon })), _jsx("p", { className: "af-accordion__title", children: title }), subtitle && _jsx("p", { className: "af-accordion__subtitle", children: subtitle })] }), isTitleFirst && (_jsx(AccordionTagDateContainer, { tagLabel: tagLabel, dateLabel: dateLabel, tagProps: tagProps, dateProps: dateProps })), value && _jsx("p", { className: "af-accordion__value", children: value })] }), summaryProps: { className: summaryClassName }, ...accordionCoreProps, children: children }));
+};

package/dist/Accordion/AccordionTagDateContainer.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentProps } from "react";
+import { Tag } from "../Tag";
+type AccordionTagDateContainerProps = {
+    tagLabel?: string;
+    tagProps?: ComponentProps<typeof Tag>;
+    dateLabel?: string;
+    dateProps?: ComponentProps<"time">;
+};
+export declare const AccordionTagDateContainer: ({ tagLabel, tagProps, dateLabel, dateProps, }: AccordionTagDateContainerProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/Accordion/AccordionTagDateContainer.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Tag } from "../Tag";
+export const AccordionTagDateContainer = ({ tagLabel, tagProps, dateLabel, dateProps, }) => {
+    const isShowing = useMemo(() => Boolean(tagLabel) || Boolean(dateLabel), [tagLabel, dateLabel]);
+    if (!isShowing) {
+        return null;
+    }
+    return (_jsxs("div", { className: "af-accordion__tag-date-container", children: [tagLabel && (_jsx("div", { className: "af-accordion__tag-container", children: _jsx(Tag, { classModifier: "warning", ...tagProps, children: tagLabel }) })), dateLabel && (_jsx("time", { className: "af-accordion__date", ...dateProps, children: dateLabel }))] }));
+};

package/dist/Accordion/index.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/AccordionCore/AccordionCore.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/Accordion/Accordion.scss";
+export { Accordion } from "./Accordion";

package/dist/Accordion/index.js

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/AccordionCore/AccordionCore.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/Accordion/Accordion.scss";
+export { Accordion } from "./Accordion";

package/dist/AccordionCore/AccordionCore.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentProps, type MouseEvent, type ReactNode } from "react";
+type AccordionProps = {
+    summary: ReactNode;
+    children: ReactNode;
+    isOpen?: boolean;
+    className?: string;
+    classModifier?: string;
+    summaryProps?: ComponentProps<"summary">;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+} & Partial<ComponentProps<"details">>;
+export declare const AccordionCore: ({ summary, children, className, classModifier, summaryProps, isOpen, onClick, ...detailsProps }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AccordionCore/AccordionCore.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, } from "react";
+import { getComponentClassName } from "../utilities";
+export const AccordionCore = ({ summary, children, className, classModifier, summaryProps, isOpen, onClick, ...detailsProps }) => {
+    const componentClassName = useMemo(() => getComponentClassName(className, classModifier, "af-accordion"), [classModifier, className]);
+    const handleToggle = useCallback((event) => {
+        if (onClick) {
+            event.preventDefault();
+            onClick(event);
+        }
+    }, [onClick]);
+    return (_jsxs("details", { className: componentClassName, open: isOpen, ...detailsProps, children: [_jsx("summary", { className: "af-accordion__summary", onClick: handleToggle, role: "button", tabIndex: 0, ...summaryProps, children: summary }), _jsx("hr", { className: "af-accordion__separator" }), _jsx("div", { className: "af-accordion__content", children: children })] }));
+};

package/dist/AccordionCore/index.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/AccordionCore/AccordionCore.scss";
+export { AccordionCore } from "./AccordionCore";

package/dist/AccordionCore/index.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/AccordionCore/AccordionCore.scss";
+export { AccordionCore } from "./AccordionCore";

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithoutRef, PropsWithChildren, ReactElement } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Alert/Alert.scss";
+import { Link } from "../Link/Link";
+import { ButtonClient } from "../Button/Button";
+type Headings = "h2" | "h3" | "h4" | "h5" | "h6";
+export declare const alertTypes: {
+    readonly validation: "validation";
+    readonly error: "error";
+    readonly warning: "warning";
+    readonly information: "information";
+    readonly neutral: "neutral";
+};
+export type AlertType = keyof typeof alertTypes;
+type AlertProps = {
+    type: AlertType;
+    title?: string;
+    action?: ReactElement<typeof Link | typeof ButtonClient>;
+    iconSize?: number;
+    heading?: Headings;
+} & ComponentPropsWithoutRef<"div">;
+export declare const Alert: ({ type, title, children, action, iconSize, heading: Heading, }: PropsWithChildren<AlertProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Alert/Alert.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, } from "react";
+import wbIncandescentOutlined from "@material-symbols/svg-400/outlined/wb_incandescent.svg";
+import infoIcon from "@material-symbols/svg-400/outlined/info.svg";
+import errorIcon from "@material-symbols/svg-400/outlined/emergency_home.svg";
+import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
+import checkCircleOutline from "@material-symbols/svg-400/outlined/check_circle.svg";
+import "@axa-fr/design-system-look-and-feel-css/dist/Alert/Alert.scss";
+import { Svg } from "../Svg";
+export const alertTypes = {
+    validation: "validation",
+    error: "error",
+    warning: "warning",
+    information: "information",
+    neutral: "neutral",
+};
+const getIconFromType = (type) => ({
+    [alertTypes.validation]: checkCircleOutline,
+    [alertTypes.error]: errorIcon,
+    [alertTypes.neutral]: infoIcon,
+    [alertTypes.warning]: errorOutline,
+    [alertTypes.information]: wbIncandescentOutlined,
+})[type] || wbIncandescentOutlined;
+export const Alert = ({ type = alertTypes.information, title, children, action, iconSize = 24, heading: Heading = "h4", }) => {
+    const icon = useMemo(() => getIconFromType(type), [type]);
+    return (_jsxs("div", { className: `af-alert af-alert--${type}`, role: "alert", children: [_jsx(Svg, { src: icon, width: iconSize, height: iconSize, className: "af-alert__icon", "aria-hidden": true }), _jsxs("div", { className: "af-alert-client__content", children: [title && _jsx(Heading, { className: "af-alert__title", children: title }), children, action && _jsx("p", { className: "af-alert__action", children: action })] })] }));
+};

package/dist/Button/Button.d.ts

@@ -0,0 +1,17 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Button/Button.scss";
+import { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from "react";
+export declare enum Variants {
+    primary = "primary",
+    business = "primary-business",
+    secondary = "secondary",
+    secondaryError = "secondary-error",
+    tertiary = "tertiary",
+    ghost = "ghost"
+}
+type ButtonProps = {
+    variant?: Variants;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+} & ComponentPropsWithoutRef<"button">;
+export declare const ButtonClient: ({ children, className, disabled, variant, iconLeft, iconRight, ...args }: PropsWithChildren<ButtonProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Button/Button.js

@@ -0,0 +1,15 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Button/Button.scss";
+import classNames from "classnames";
+export var Variants;
+(function (Variants) {
+    Variants["primary"] = "primary";
+    Variants["business"] = "primary-business";
+    Variants["secondary"] = "secondary";
+    Variants["secondaryError"] = "secondary-error";
+    Variants["tertiary"] = "tertiary";
+    Variants["ghost"] = "ghost";
+})(Variants || (Variants = {}));
+export const ButtonClient = ({ children, className, disabled, variant, iconLeft, iconRight, ...args }) => {
+    return (_jsxs("button", { className: classNames("af-btn-client", variant && `af-btn-client--${variant.toString()}`, className), disabled: disabled, type: "button", ...args, children: [iconLeft, children, iconRight] }));
+};

package/dist/Card/Card.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentProps } from "react";
+type CardProps = ComponentProps<"section"> & ComponentProps<"button"> & {
+    classModifier?: string;
+};
+export declare const Card: ({ children, className, classModifier, onClick, ...otherProps }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Card/Card.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { getComponentClassName } from "../utilities";
+export const Card = ({ children, className, classModifier, onClick, ...otherProps }) => {
+    const componentClassName = useMemo(() => getComponentClassName(className, classModifier, "af-card"), [className, classModifier]);
+    const Component = useMemo(() => (onClick ? "button" : "section"), [onClick]);
+    const componentProps = useMemo(() => (onClick ? { type: "button", onClick } : { tabIndex: 0 }), [onClick]);
+    return (_jsx(Component, { className: componentClassName, ...componentProps, ...otherProps, children: children }));
+};

package/dist/Card/index.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Card/Card.scss";
+export { Card } from "./Card";

package/dist/Card/index.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Card/Card.scss";
+export { Card } from "./Card";

package/dist/Form/Checkbox/Checkbox.d.ts

@@ -0,0 +1,7 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
+import React, { ReactNode } from "react";
+declare const Checkbox: React.ForwardRefExoticComponent<{
+    label: string | ReactNode;
+    errorMessage?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "label"> & React.RefAttributes<HTMLInputElement>>;
+export { Checkbox };

package/dist/Form/Checkbox/Checkbox.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
+import checkBoxIcon from "@material-symbols/svg-400/outlined/check_box-fill.svg";
+import checkBoxOutlineBlankIcon from "@material-symbols/svg-400/outlined/check_box_outline_blank.svg";
+import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
+import { forwardRef, useId } from "react";
+import classNames from "classnames";
+import { Svg } from "../../Svg";
+const Checkbox = forwardRef(({ label, errorMessage, className, ...inputProps }, ref) => {
+    let inputId = useId();
+    inputId = inputProps.id || inputId;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: classNames("af-checkbox", className), children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "checkbox", id: inputId, "aria-invalid": !!errorMessage }), _jsxs("div", { className: "af-checkbox__icons", children: [_jsx(Svg, { src: checkBoxOutlineBlankIcon, className: "af-checkbox__unchecked" }), _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked" })] }), label] }, inputProps.name) }), errorMessage && (_jsxs("div", { className: "af-checkbox__error", "aria-live": "assertive", children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
+});
+Checkbox.displayName = "Checkbox";
+export { Checkbox };

package/dist/Form/Checkbox/CheckboxSelect.d.ts

@@ -0,0 +1,15 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
+import React, { ReactNode } from "react";
+type CheckboxProps = {
+    type: "vertical" | "horizontal";
+    options: ({
+        label: ReactNode;
+        subtitle?: ReactNode;
+        description?: ReactNode;
+        icon?: ReactNode;
+    } & React.InputHTMLAttributes<HTMLInputElement>)[];
+    errorMessage?: string;
+    onChange?: React.ChangeEventHandler;
+};
+export declare const CheckboxSelect: ({ options, errorMessage, onChange, type, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/Checkbox/CheckboxSelect.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
+import checkBoxIcon from "@material-symbols/svg-400/outlined/check_box-fill.svg";
+import checkBoxOutlineBlankIcon from "@material-symbols/svg-400/outlined/check_box_outline_blank.svg";
+import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
+import { Svg } from "../../Svg";
+export const CheckboxSelect = ({ options, errorMessage, onChange, type = "vertical", }) => (_jsxs(_Fragment, { children: [_jsx("div", { role: "group", className: `af-checkbox af-checkbox-select af-checkbox-select--${type}`, children: options.map(({ label, description, subtitle, icon, ...inputProps }) => (_jsxs("label", { htmlFor: `id-${inputProps.name}`, children: [_jsx("input", { type: "checkbox", ...inputProps, id: `id-${inputProps.name}`, onChange: onChange, "aria-invalid": Boolean(errorMessage) && !inputProps.disabled }), _jsxs("div", { className: "af-checkbox__icons", children: [_jsx(Svg, { src: checkBoxOutlineBlankIcon, className: "af-checkbox__unchecked" }), _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked" })] }), _jsxs("div", { className: "af-checkbox__content", children: [icon, _jsxs("div", { className: "af-checkbox__content-description", children: [_jsx("span", { children: label }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputProps.name))) }), errorMessage && (_jsxs("div", { className: "af-checkbox__error", "aria-live": "assertive", children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));

package/dist/Form/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox";
+export { CheckboxSelect } from "./CheckboxSelect";

package/dist/Form/Checkbox/index.js

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox";
+export { CheckboxSelect } from "./CheckboxSelect";

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

@@ -0,0 +1,32 @@
+import { ComponentPropsWithRef } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/FileUpload/FileUpload.scss";
+type Props = Omit<ComponentPropsWithRef<"input">, "required"> & {
+    id: string;
+    label?: string;
+    buttonLabel?: string;
+    dropzoneDescription?: string;
+    instructions?: string;
+    required?: boolean;
+    globalError: string;
+    errors: Array<{
+        id?: string | undefined;
+        message: string;
+    }>;
+    files: Array<{
+        id: string;
+        name: string;
+        size: number;
+        isLoading: boolean;
+    }>;
+    accept: string;
+    isMobile?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
+    onView?: (id: string) => void;
+    onDelete?: (id: string) => void;
+};
+declare const FileUpload: {
+    ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, onView, onDelete, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { FileUpload };

package/dist/Form/FileUpload/FileUpload.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/FileUpload/FileUpload.scss";
+import visibility from "@material-symbols/svg-400/outlined/visibility-fill.svg";
+import close from "@material-symbols/svg-400/outlined/close-fill.svg";
+import check from "@material-symbols/svg-400/outlined/check_circle-fill.svg";
+import error from "@material-symbols/svg-400/outlined/error-fill.svg";
+import errorO from "@material-symbols/svg-400/outlined/error.svg";
+import plus from "@material-symbols/svg-400/outlined/add_circle-fill.svg";
+import classNames from "classnames";
+import { Svg } from "../../Svg";
+import { Loader } from "../../Loader";
+import { Button } from "../..";
+import { Variants } from "../../Button/Button";
+import { InputError } from "../InputError";
+function getReadableFileSizeString(fileSizeInBytes) {
+    let i = -1;
+    let fileSizeInBytesCopy = fileSizeInBytes;
+    const byteUnits = [" Ko", " Mo", " Go"];
+    do {
+        fileSizeInBytesCopy /= 1024;
+        i += 1;
+    } while (fileSizeInBytesCopy > 1024);
+    return Math.max(fileSizeInBytesCopy, 0.1).toFixed(1) + byteUnits[i];
+}
+const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, onView, onDelete, ...otherProps }) => {
+    const getIcon = (isInError, isLoading) => {
+        if (isInError) {
+            return (_jsx(Svg, { src: error, className: "af-form__file-title-container-icon-error" }));
+        }
+        if (isLoading) {
+            return _jsx(Loader, { size: 18, border: 2 });
+        }
+        return (_jsx(Svg, { src: check, className: "af-form__file-title-container-icon-success" }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("label", { className: "af-form__group--label", htmlFor: id, children: [label, " ", required ? "*" : ""] }), _jsxs("div", { className: classNames("af-form__file-input", globalError && "af-form__file-input--error", (isMobile || !dropzoneDescription) && "is-mobile"), children: [_jsx("input", { type: "file", name: "file-input", id: id, ...otherProps }), dropzoneDescription && (_jsxs("div", { className: "af-form__file-input-dropdown-text", children: [_jsx("p", { children: dropzoneDescription }), _jsx("p", { children: "ou" })] })), _jsx(Button, { variant: Variants.tertiary, onClick: () => document.getElementById(id)?.click(), iconLeft: _jsx(Svg, { src: plus, className: "af-form__file-input-icon" }), children: buttonLabel })] }), globalError && _jsx(InputError, { message: globalError }), _jsx("small", { className: "af-form__file-input-help", children: instructions }), _jsx("div", { className: "custom-table-file af-file-table", children: _jsx("ul", { className: "af-form__file-list", children: files.map(({ id: fileId, name, size, isLoading }) => {
+                        const effectiveSize = getReadableFileSizeString(size);
+                        const isInError = errors.some((fileError) => fileError.id === fileId);
+                        const errorMessage = errors.find((fileError) => fileError.id === fileId)?.message;
+                        return (_jsxs("li", { className: "af-form__file-line", children: [_jsxs("div", { className: `af-form__file-line-container ${isInError ? "af-form__file-line-container--error" : ""}`, children: [_jsxs("div", { className: "af-form__file-title", children: [getIcon(isInError, isLoading), _jsxs("div", { children: [_jsx("span", { className: "af-form__file-name", children: name }), _jsx("span", { className: "af-form__file-size", children: effectiveSize })] })] }), _jsxs("div", { className: "af-form__file-actions", children: [onView && (_jsx(Svg, { tabIndex: 0, role: "button", "aria-label": "Visualiser", onClick: () => onView(fileId), onKeyDown: (e) => {
+                                                        if (e.key === "Enter") {
+                                                            onView(fileId);
+                                                        }
+                                                    }, className: "af-form__file-actions-icon", src: visibility })), onDelete && (_jsx(Svg, { tabIndex: 0, role: "button", "aria-label": "Supprimer", onClick: () => onDelete(fileId), onKeyDown: (e) => {
+                                                        if (e.key === "Enter") {
+                                                            onDelete(fileId);
+                                                        }
+                                                    }, className: "af-form__file-actions-icon", src: close }))] })] }), isInError && (_jsxs("small", { className: "af-form__file-error", children: [_jsx(Svg, { src: errorO, className: "af-form__file-error-icon", width: 18 }), errorMessage] }))] }, fileId));
+                    }) }) })] }));
+};
+FileUpload.displayName = "FileUpload";
+export { FileUpload };

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

@@ -0,0 +1 @@
+export { FileUpload } from "./FileUpload";

package/dist/Form/FileUpload/index.js

@@ -0,0 +1 @@
+export { FileUpload } from "./FileUpload";

package/dist/Form/InputError/InputError.d.ts

@@ -0,0 +1,7 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/InputError/InputError.scss";
+type InputErrorProps = {
+    message: string;
+    id?: string;
+};
+export declare const InputError: ({ message, id }: InputErrorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/InputError/InputError.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import errorIcon from "@material-symbols/svg-400/outlined/error.svg";
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/InputError/InputError.scss";
+import { Svg } from "../../Svg";
+export const InputError = ({ message, id }) => (_jsxs("div", { className: "af-input-error", children: [_jsx(Svg, { src: errorIcon, className: "af-input-error__icon" }), _jsx("span", { id: id, "aria-live": "assertive", className: "af-input-error__message", children: message })] }));

package/dist/Form/InputError/index.d.ts

@@ -0,0 +1 @@
+export { InputError } from "./InputError";

package/dist/Form/InputError/index.js

@@ -0,0 +1 @@
+export { InputError } from "./InputError";

package/dist/Form/Radio/Radio.d.ts

@@ -0,0 +1,7 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
+import React, { ReactNode } from "react";
+declare const Radio: React.ForwardRefExoticComponent<{
+    label: string | ReactNode;
+    errorMessage?: string;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+export { Radio };

package/dist/Form/Radio/Radio.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
+import radioIcon from "@material-symbols/svg-400/outlined/radio_button_checked.svg";
+import radioOutlineBlankIcon from "@material-symbols/svg-400/outlined/radio_button_unchecked.svg";
+import { forwardRef, useId } from "react";
+import { Svg } from "../../Svg";
+import { InputError } from "../InputError";
+const Radio = forwardRef(({ label, errorMessage, ...inputProps }, ref) => {
+    let inputId = useId();
+    inputId = inputProps.id || inputId;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "af-radio", role: "radiogroup", "aria-invalid": Boolean(errorMessage), children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "radio", id: inputId }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), label] }, inputProps.name) }), errorMessage && _jsx(InputError, { message: errorMessage })] }));
+});
+Radio.displayName = "Radio";
+export { Radio };

package/dist/Form/Radio/RadioSelect.d.ts

@@ -0,0 +1,20 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
+import React, { ComponentPropsWithRef, ReactNode } from "react";
+type RadioSelectProps = {
+    type: "vertical" | "horizontal";
+    label?: string;
+    isRequired?: boolean;
+    options: ({
+        label: ReactNode;
+        subtitle?: ReactNode;
+        description?: ReactNode;
+        icon?: ReactNode;
+    } & React.InputHTMLAttributes<HTMLInputElement>)[];
+    name: string;
+    errorMessage?: string;
+    onChange?: React.ChangeEventHandler;
+    value?: string;
+    isDisabled?: boolean;
+} & Omit<ComponentPropsWithRef<"div">, "className" | "aria-invalid">;
+export declare const RadioSelect: React.ForwardRefExoticComponent<Omit<RadioSelectProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/Form/Radio/RadioSelect.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
+import radioIcon from "@material-symbols/svg-400/outlined/radio_button_checked.svg";
+import radioOutlineBlankIcon from "@material-symbols/svg-400/outlined/radio_button_unchecked.svg";
+import { forwardRef, useId, } from "react";
+import { Svg } from "../../Svg";
+import { InputError } from "../InputError";
+export const RadioSelect = forwardRef(({ id, label, options, errorMessage, onChange, type = "vertical", name, value, isDisabled, isRequired, ...rest }, ref) => {
+    const generatedId = useId();
+    const optionId = id || generatedId;
+    return (_jsxs("div", { className: "af-radio__container", children: [label && (_jsxs("span", { className: "af-radio__label", id: optionId, children: [label, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), _jsx("div", { ref: ref, ...rest, role: "radiogroup", className: `af-radio af-radio-select af-radio-select--${type}`, "aria-invalid": Boolean(errorMessage), "aria-labelledby": optionId, "aria-describedby": errorMessage ? `${optionId}-error` : undefined, children: options.map(({ label: inputLabel, description, subtitle, icon, disabled: inputDisabled, ...inputProps }) => (_jsxs("label", { htmlFor: `${optionId}-${inputLabel}`, children: [_jsx("input", { type: "radio", ...(isDisabled || inputDisabled ? { disabled: true } : null), ...inputProps, name: name, id: `${optionId}-${inputLabel}`, onChange: onChange, ...(value && {
+                                "aria-checked": value === inputProps.value,
+                                checked: value === inputProps.value,
+                            }) }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), _jsxs("div", { className: "af-radio__content", children: [icon, _jsxs("div", { className: "af-radio__content-description", children: [_jsx("span", { children: inputLabel }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputLabel))) }), errorMessage && (_jsx(InputError, { id: `${optionId}-error`, message: errorMessage }))] }));
+});
+RadioSelect.displayName = "RadioSelect";

package/dist/Form/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export { Radio } from "./Radio";
+export { RadioSelect } from "./RadioSelect";

package/dist/Form/Radio/index.js

@@ -0,0 +1,2 @@
+export { Radio } from "./Radio";
+export { RadioSelect } from "./RadioSelect";

package/dist/Form/Select/CustomOption.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { OptionProps } from "react-select";
+declare const CustomOption: React.FC<OptionProps>;
+export { CustomOption };

package/dist/Form/Select/CustomOption.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { components } from "react-select";
+const CustomOption = ({ getValue, ...otherProps }) => {
+    const value = useMemo(() => getValue(), [getValue]);
+    return (_jsx(components.Option, { ...otherProps, getValue: getValue, "data-value": value }));
+};
+export { CustomOption };

package/dist/Form/Select/DropdownIndicator.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DropdownIndicatorProps } from "react-select";
+declare const DropdownIndicator: React.FC<DropdownIndicatorProps>;
+export { DropdownIndicator };

package/dist/Form/Select/DropdownIndicator.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import arrowDropDown from "@material-symbols/svg-400/outlined/arrow_drop_down.svg";
+import arrowDropUp from "@material-symbols/svg-400/outlined/arrow_drop_up.svg";
+import { components } from "react-select";
+import classNames from "classnames";
+import { Svg } from "../../Svg";
+const DropdownIndicator = (props) => {
+    const { selectProps: { menuIsOpen, isDisabled }, } = props;
+    return (_jsx(components.DropdownIndicator, { ...props, children: _jsx(Svg, { src: menuIsOpen ? arrowDropUp : arrowDropDown, className: classNames(isDisabled && "af-form__input-select-container-icon-disabled") }) }));
+};
+export { DropdownIndicator };

package/dist/Form/Select/Select.d.ts

@@ -0,0 +1,27 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Select/Select.scss";
+import ReactSelect, { ActionMeta, SingleValue } from "react-select";
+import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+type Option = {
+    label: string;
+    value: string | number;
+};
+type Props = Omit<ComponentPropsWithoutRef<ReactSelect>, "placeholder" | "noOptionsMessage"> & {
+    id: string;
+    label: string;
+    options: {
+        label: string;
+        value?: string | number | readonly string[];
+    }[];
+    value: Option | null;
+    errorLabel?: string;
+    placeholder?: string;
+    noOptionsMessage?: string;
+    onChange: (newValue: SingleValue<Option>, actionMeta: ActionMeta<string>) => void;
+    disabled?: boolean;
+    required?: boolean;
+};
+declare const Select: {
+    ({ id, required, disabled, label, errorLabel, noOptionsMessage, ...otherProps }: PropsWithChildren<Props>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Select };

package/dist/Form/Select/Select.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Select/Select.scss";
+import ErrorOutline from "@material-symbols/svg-400/outlined/error.svg";
+import ReactSelect from "react-select";
+import classNames from "classnames";
+import { DropdownIndicator } from "./DropdownIndicator";
+import { Svg } from "../../Svg";
+import { CustomOption } from "./CustomOption";
+const Select = ({ id, required, disabled, label, errorLabel, noOptionsMessage, ...otherProps }) => {
+    return (_jsxs(_Fragment, { children: [label && (_jsxs("label", { id: `${id}__label`, htmlFor: `${id}__input`, className: "af-form__select-label", children: [label, required && _jsx("span", { children: " *" })] })), _jsx(ReactSelect, { inputId: `${id}__input`, "aria-labelledby": `${id}__label`, unstyled: true, isDisabled: disabled, noOptionsMessage: () => noOptionsMessage || "Aucun résultat", components: {
+                    DropdownIndicator,
+                    Option: CustomOption,
+                }, classNames: {
+                    control: () => "af-form__input-select",
+                    menu: () => "af-form__input-select-menu",
+                    menuList: () => "af-form__select-menu-list",
+                    container: ({ isFocused, isDisabled, selectProps: { menuIsOpen }, }) => classNames("af-form__input-select-container", isFocused && "af-form__input-select-container-focused", isDisabled && "af-form__input-select-container-disabled", errorLabel &&
+                        !isFocused &&
+                        !menuIsOpen &&
+                        "af-form__input-select-container-error"),
+                    option: ({ isSelected, isFocused, }) => classNames("af-form__input-select-menu-options", isSelected && "af-form__input-select-menu-options-selected", isFocused && "af-form__input-select-menu-options-focused"),
+                    singleValue: ({ isDisabled, }) => classNames("af-form__select-single-value", isDisabled && "af-form__select-single-value-disabled"),
+                    dropdownIndicator: () => "af-form__select-dropdown-indicator",
+                }, className: "af-form__input-select", ...otherProps }), errorLabel && (_jsxs("div", { className: "af-form__select-error", children: [_jsx(Svg, { src: ErrorOutline, width: 16, className: "af-form__select-error-icon" }), errorLabel] }))] }));
+};
+Select.displayName = "Select";
+export { Select };

package/dist/Form/Select/index.d.ts

@@ -0,0 +1 @@
+export { Select } from "./Select";

package/dist/Form/Select/index.js

@@ -0,0 +1 @@
+export { Select } from "./Select";

package/dist/Form/Text/Text.d.ts

@@ -0,0 +1,13 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Text/Text.scss";
+import { ComponentPropsWithRef, MouseEventHandler } from "react";
+type Props = ComponentPropsWithRef<"input"> & {
+    classModifier?: string;
+    helper?: string;
+    error?: string;
+    description?: string;
+    label?: string;
+    buttonLabel?: string;
+    onButtonClick?: MouseEventHandler<HTMLButtonElement>;
+};
+declare const Text: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { Text };

package/dist/Form/Text/Text.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Text/Text.scss";
+import { forwardRef } from "react";
+import infoIcon from "@material-symbols/svg-400/outlined/info.svg";
+import { Button } from "../..";
+import { Variants } from "../../Button/Button";
+import { Svg } from "../../Svg";
+import { getComponentClassName } from "../../utilities";
+import { InputError } from "../InputError";
+const Text = forwardRef(({ className, classModifier = "", label, description, helper, error, buttonLabel, onButtonClick, ...otherProps }, inputRef) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-form__input-text");
+    const { id, required } = otherProps;
+    return (_jsxs("div", { className: "af-form__input-container", children: [_jsxs("label", { htmlFor: id, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { children: " *" })] }), description && (_jsx("span", { className: "af-form__input-description", children: description })), buttonLabel && (_jsx(Button, { className: "af-form__input-more", variant: Variants.ghost, iconLeft: _jsx(Svg, { src: infoIcon }), onClick: onButtonClick, children: buttonLabel })), _jsx("input", { className: componentClassName, type: "text", ref: inputRef, "aria-invalid": Boolean(error), "aria-describedby": error ? `${id}-error` : undefined, ...otherProps }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), error && _jsx(InputError, { id: `${id}-error`, message: error })] }));
+});
+Text.displayName = "Text";
+export { Text };

package/dist/Form/Text/index.d.ts

@@ -0,0 +1 @@
+export { Text } from "./Text";

package/dist/Form/Text/index.js

@@ -0,0 +1 @@
+export { Text } from "./Text";