allaw-ui 4.0.9 → 4.1.0

package/dist/components/molecules/DataStepper/Stepper.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+export type StepField = {
+    name: string;
+    label: string;
+    type: "text" | "select" | "combobox" | "date" | "checkbox" | "radio" | "custom";
+    options?: string[] | (() => Promise<string[]> | string[]);
+    showIf?: (values: Record<string, any>) => boolean;
+    customComponent?: React.ComponentType<any>;
+    customProps?: Record<string, any>;
+};
+export type StepConfig = {
+    title: string;
+    description?: string;
+    fields: StepField[];
+};
+export type StepperProps = {
+    config: StepConfig[];
+    onSubmit: (values: Record<string, any>) => void;
+    isOpen?: boolean;
+    onClose?: () => void;
+};
+export declare const Stepper: React.FC<StepperProps>;

package/dist/components/molecules/DataStepper/Stepper.js

@@ -0,0 +1,162 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useState, useMemo } from "react";
+import Input from "../../atoms/inputs/Input";
+import Select from "../../atoms/selects/Select";
+import ComboBox from "../../atoms/selects/ComboBox";
+import Paragraph from "../../atoms/typography/Paragraph";
+// FieldRenderer: rend le bon input selon le type
+var FieldRenderer = function (_a) {
+    var field = _a.field, value = _a.value, onChange = _a.onChange;
+    // Gestion des options dynamiques
+    var _b = React.useState([]), options = _b[0], setOptions = _b[1];
+    var _c = React.useState(false), _ = _c[0], setLoading = _c[1];
+    React.useEffect(function () {
+        if (field.type === "select" || field.type === "combobox" || field.type === "radio") {
+            if (typeof field.options === "function") {
+                setLoading(true);
+                Promise.resolve(field.options()).then(function (opts) {
+                    setOptions(opts);
+                    setLoading(false);
+                });
+            }
+            else if (Array.isArray(field.options)) {
+                setOptions(field.options);
+            }
+        }
+    }, [field]);
+    // Helper pour transformer string[] en {label, value}[]
+    var toSelectItems = function (opts) {
+        if (opts === void 0) { opts = []; }
+        return opts.map(function (o) { return ({ label: o, value: o }); });
+    };
+    // Gestion des composants custom
+    if (field.type === "custom" && field.customComponent) {
+        var CustomComp = field.customComponent;
+        return React.createElement(CustomComp, __assign({ value: value, onChange: onChange }, (field.customProps || {})));
+    }
+    // Inputs standards
+    switch (field.type) {
+        case "text":
+            return (React.createElement(Input, { placeholder: field.label, title: field.label, value: value || "", onChange: onChange, name: field.name }));
+        case "date":
+            return (React.createElement("input", { id: field.name, type: "date", className: "stepper-input", value: value || "", onChange: function (e) { return onChange(e.target.value); } }));
+        case "checkbox":
+            return (React.createElement("label", { style: { display: "flex", alignItems: "center", gap: 8 } },
+                React.createElement("input", { id: field.name, type: "checkbox", className: "stepper-input", style: { width: 18, height: 18 }, checked: !!value, onChange: function (e) { return onChange(e.target.checked); } }),
+                field.label));
+        case "select": {
+            var items = Array.isArray(field.options)
+                ? toSelectItems(field.options)
+                : toSelectItems(options);
+            return (React.createElement(Select, { items: items, selectedItem: value || "", onChange: onChange, placeholder: field.label }));
+        }
+        case "combobox": {
+            var items = Array.isArray(field.options)
+                ? toSelectItems(field.options)
+                : toSelectItems(options);
+            return (React.createElement(ComboBox, { items: items, selectedItem: value || "", onSelect: onChange, onChange: onChange, placeholder: field.label, title: field.label, openOnMount: false }));
+        }
+        case "radio":
+            return (React.createElement("div", { style: { display: "flex", gap: 16 } }, options.map(function (opt) { return (React.createElement("label", { key: opt, style: { display: "flex", alignItems: "center", gap: 4 } },
+                React.createElement("input", { id: field.name + opt, type: "radio", className: "stepper-input", name: field.name, value: opt, checked: value === opt, onChange: function () { return onChange(opt); } }),
+                opt)); })));
+        default:
+            return null;
+    }
+};
+// Ajout/ajustement du style CSS-in-JS pour le layout 2 colonnes et plus de spacing
+var stepperStyle = "\n.stepper-allaw {\n  background: var(--pure-white, #fff);\n  border: 1px solid var(--grey-venom, #e6edf5);\n  border-radius: 16px;\n  box-shadow: 0 2px 8px rgba(37, 190, 235, 0.06);\n  padding: 32px;\n  max-width: 600px;\n  min-width: 100%;\n  width: 700px;\n  margin: 0 auto;\n  font-family: 'Inter', 'Open Sans', Arial, sans-serif;\n}\n.stepper-progress-bar {\n  width: 100%;\n  height: 6px;\n  background: var(--grey-light, #f6fcfe);\n  border-radius: 8px;\n  margin-bottom: 24px;\n  overflow: hidden;\n}\n.stepper-progress-inner {\n  height: 100%;\n  background: var(--bleu-allaw, #25beeb);\n  border-radius: 8px;\n  transition: width 0.3s;\n}\n.stepper-title {\n  color: var(--noir, #171e25);\n  font-family: 'Poppins', Arial, sans-serif;\n  font-size: 1.5rem;\n  font-weight: 600;\n  margin-bottom: 8px;\n}\n.stepper-desc {\n  color: var(--mid-grey, #728ea7);\n  font-family: 'Open Sans', Arial, sans-serif;\n  font-size: 1rem;\n  margin-bottom: 42px;\n}\n.stepper-fields-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 24px 24px;\n  margin-bottom: 42px;\n}\n@media (min-width: 600px) {\n  .stepper-fields-grid {\n    grid-template-columns: 1fr 1fr;\n  }\n}\n.stepper-field {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 8px;\n  margin-bottom: 0;\n}\n.stepper-label {\n  color: var(--dark-grey, #456073);\n  font-size: 1rem;\n  font-weight: 500;\n  margin-bottom: 2px;\n  min-width: 0;\n  flex-shrink: 1;\n}\n.stepper-input, .stepper-select, .stepper-datalist {\n  border: 1px solid var(--grey-venom, #e6edf5);\n  border-radius: 8px;\n  padding: 10px 12px;\n  font-size: 1rem;\n  font-family: inherit;\n  background: var(--pure-white, #fff);\n  color: var(--noir, #171e25);\n  outline: none;\n  transition: border-color 0.2s;\n  flex: 1 1 0%;\n}\n.stepper-input:focus, .stepper-select:focus, .stepper-datalist:focus {\n  border-color: var(--bleu-allaw, #25beeb);\n}\n.stepper-btn-row {\n  display: flex;\n  gap: 12px;\n  margin-top: 24px;\n}\n@media (max-width: 599px) {\n  .stepper-btn-row {\n    flex-direction: column;\n    gap: 12px;\n  }\n}\n.stepper-btn {\n  background: var(--bleu-allaw, #25beeb);\n  color: var(--pure-white, #fff);\n  border: none;\n  border-radius: 8px;\n  padding: 8px 16px;\n  font-size: 1rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background 0.2s;\n  flex: 1 1 0%;\n  width: 100%;\n  min-width: 0;\n}\n.stepper-btn:disabled {\n  background: var(--grey-venom, #e6edf5);\n  color: var(--mid-grey, #728ea7);\n  cursor: not-allowed;\n}\n.stepper-btn:not(:disabled):hover {\n  background: #1ca6d4;\n}\n.stepper-btn-secondary {\n  background: var(--grey-light, #f6fcfe);\n  color: var(--bleu-allaw, #25beeb);\n  border: 1px solid var(--bleu-allaw, #25beeb);\n  margin-right: 8px;\n}\n.stepper-modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.6);\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: all;\n}\n.stepper-modal-center {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1001;\n  max-height: 90vh;\n  overflow-y: auto;\n  box-shadow: 0 8px 32px rgba(23, 30, 37, 0.18);\n  pointer-events: all;\n}\n.stepper-modal-close {\n  position: absolute;\n  top: 18px;\n  right: 18px;\n  background: none;\n  border: none;\n  color: var(--mid-grey, #728ea7);\n  font-size: 2rem;\n  cursor: pointer;\n  z-index: 1002;\n  transition: color 0.2s;\n}\n.stepper-modal-close:hover {\n  color: var(--noir, #171e25);\n}\n";
+if (typeof window !== 'undefined' && !document.getElementById('stepper-allaw-style')) {
+    var style = document.createElement('style');
+    style.id = 'stepper-allaw-style';
+    style.innerHTML = stepperStyle;
+    document.head.appendChild(style);
+}
+// Ajouter le composant CloseButton custom
+var CloseButton = function (_a) {
+    var onClick = _a.onClick;
+    return (React.createElement("button", { type: "button", "aria-label": "Fermer", onClick: onClick, style: {
+            width: 36,
+            height: 36,
+            borderRadius: "50%",
+            border: "none",
+            background: "#fff",
+            boxShadow: "0 1px 4px rgba(0,0,0,0.04)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: "pointer",
+            transition: "background 0.2s",
+            marginLeft: 16,
+            padding: 0,
+        }, onMouseOver: function (e) { return (e.currentTarget.style.background = '#f2f8fc'); }, onMouseOut: function (e) { return (e.currentTarget.style.background = '#fff'); } },
+        React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M5 5L13 13M13 5L5 13", stroke: "#171e25", strokeWidth: "2", strokeLinecap: "round" }))));
+};
+export var Stepper = function (_a) {
+    var config = _a.config, onSubmit = _a.onSubmit, _b = _a.isOpen, isOpen = _b === void 0 ? true : _b, onClose = _a.onClose;
+    var _c = useState(0), step = _c[0], setStep = _c[1];
+    var _d = useState({}), values = _d[0], setValues = _d[1];
+    var currentStep = config[step];
+    // Filtrer les champs à afficher selon showIf
+    var visibleFields = useMemo(function () {
+        return currentStep.fields.filter(function (field) { return !field.showIf || field.showIf(values); });
+    }, [currentStep, values]);
+    var handleFieldChange = function (name, value) {
+        setValues(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[name] = value, _a)));
+        });
+    };
+    var handleNext = function () {
+        if (step < config.length - 1) {
+            setStep(step + 1);
+        }
+        else {
+            onSubmit(values);
+        }
+    };
+    var handlePrev = function () {
+        if (step > 0)
+            setStep(step - 1);
+    };
+    // Barre de progression simple
+    var progress = ((step + 1) / config.length) * 100;
+    if (!isOpen)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "stepper-modal-backdrop" },
+            React.createElement("div", { className: "stepper-modal-center" },
+                React.createElement("div", { style: { position: "relative" } },
+                    React.createElement("div", { className: "stepper-allaw" },
+                        React.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 12 } },
+                            React.createElement("div", { className: "stepper-progress-bar", style: { flex: 1, height: 8, minWidth: 0 } },
+                                React.createElement("div", { className: "stepper-progress-inner", style: { width: progress + "%", height: 8 } })),
+                            React.createElement(CloseButton, { onClick: function () { return onClose && onClose(); } })),
+                        React.createElement("div", { className: "stepper-title" }, currentStep.title),
+                        currentStep.description && React.createElement("div", { className: "stepper-desc" }, currentStep.description),
+                        React.createElement("form", { onSubmit: function (e) {
+                                e.preventDefault();
+                                handleNext();
+                            } },
+                            React.createElement("div", { className: "stepper-fields-grid" }, visibleFields.map(function (field) {
+                                // On affiche le label au-dessus uniquement pour certains types
+                                var showLabelAbove = ["select", "date", "checkbox", "radio", "custom"].includes(field.type);
+                                return (React.createElement("div", { key: field.name, className: "stepper-field" },
+                                    showLabelAbove && (React.createElement(Paragraph, { variant: "medium", color: "noir", text: field.label, className: "stepper-label" })),
+                                    React.createElement(FieldRenderer, { field: field, value: values[field.name], onChange: function (val) { return handleFieldChange(field.name, val); }, values: values })));
+                            })),
+                            React.createElement("div", { className: "stepper-btn-row" },
+                                React.createElement("button", { type: "button", className: "stepper-btn stepper-btn-secondary", onClick: handlePrev, disabled: step === 0 }, "Pr\u00E9c\u00E9dent"),
+                                React.createElement("button", { type: "submit", className: "stepper-btn" }, step === config.length - 1 ? "Valider" : "Suivant")))))))));
+};

package/dist/components/molecules/DataStepper/Stepper.stories.d.ts

@@ -0,0 +1,8 @@
+declare namespace _default {
+    export let title: string;
+    export { Stepper as component };
+}
+export default _default;
+export function GrandExemple(): React.JSX.Element;
+import { Stepper } from "./Stepper";
+import React from "react";

package/dist/components/molecules/DataStepper/Stepper.stories.js

@@ -0,0 +1,209 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React from "react";
+import { Stepper } from "./Stepper";
+// Exemple de composant custom
+var CustomInput = function (_a) {
+    var value = _a.value, onChange = _a.onChange, foo = _a.foo;
+    return (React.createElement("div", null,
+        React.createElement("label", null,
+            "Custom (",
+            foo,
+            ")"),
+        React.createElement("input", { value: value || "", onChange: function (e) { return onChange(e.target.value); } })));
+};
+var fetchCities = function (country) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        if (country === "France")
+            return [2 /*return*/, ["Paris", "Lyon", "Marseille"]];
+        if (country === "Belgique")
+            return [2 /*return*/, ["Bruxelles", "Liège", "Anvers"]];
+        if (country === "Suisse")
+            return [2 /*return*/, ["Genève", "Zurich", "Lausanne"]];
+        return [2 /*return*/, []];
+    });
+}); };
+var config = [
+    {
+        title: "Informations personnelles",
+        description: "Merci de renseigner vos infos.",
+        fields: [
+            { name: "firstName", label: "Prénom", type: "text" },
+            { name: "lastName", label: "Nom", type: "text" },
+            { name: "birthDate", label: "Date de naissance", type: "date" },
+            { name: "gender", label: "Genre", type: "select", options: ["Homme", "Femme", "Autre"] },
+            {
+                name: "newsletter",
+                label: "S'inscrire à la newsletter",
+                type: "checkbox",
+                showIf: function (values) { return values.gender === "Femme"; },
+            },
+        ],
+    },
+    {
+        title: "Adresse",
+        description: "Où habitez-vous ?",
+        fields: [
+            {
+                name: "country",
+                label: "Pays",
+                type: "combobox",
+                options: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                    return [2 /*return*/, ["France", "Belgique", "Suisse"]];
+                }); }); },
+            },
+            {
+                name: "city",
+                label: "Ville",
+                type: "combobox",
+                options: function (values) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                    return [2 /*return*/, fetchCities(values.country)];
+                }); }); },
+                showIf: function (values) { return !!values.country; },
+            },
+            { name: "postalCode", label: "Code postal", type: "text", showIf: function (values) { return !!values.country; } },
+            { name: "address", label: "Adresse complète", type: "text" },
+        ],
+    },
+    {
+        title: "Préférences",
+        description: "Choisissez vos préférences.",
+        fields: [
+            {
+                name: "color",
+                label: "Couleur préférée",
+                type: "radio",
+                options: ["Rouge", "Vert", "Bleu"],
+            },
+            {
+                name: "animal",
+                label: "Animal préféré",
+                type: "select",
+                options: ["Chien", "Chat", "Oiseau", "Poisson"],
+            },
+            {
+                name: "customField",
+                label: "Champ custom",
+                type: "custom",
+                customComponent: CustomInput,
+                customProps: { foo: "bar" },
+            },
+        ],
+    },
+    {
+        title: "Expérience professionnelle",
+        description: "Parlez-nous de votre parcours.",
+        fields: [
+            { name: "job", label: "Métier actuel", type: "text" },
+            { name: "years", label: "Années d'expérience", type: "select", options: ["0-2", "3-5", "6-10", "10+"] },
+            {
+                name: "manager",
+                label: "Êtes-vous manager ?",
+                type: "checkbox",
+            },
+            {
+                name: "teamSize",
+                label: "Taille de l'équipe",
+                type: "select",
+                options: ["1-5", "6-10", "11-20", "20+"],
+                showIf: function (values) { return values.manager; },
+            },
+        ],
+    },
+    {
+        title: "Compétences",
+        description: "Listez vos compétences principales.",
+        fields: [
+            { name: "skills", label: "Compétences (séparées par des virgules)", type: "text" },
+            { name: "certified", label: "Certifié dans un domaine ?", type: "checkbox" },
+            {
+                name: "certificationName",
+                label: "Nom de la certification",
+                type: "text",
+                showIf: function (values) { return values.certified; },
+            },
+        ],
+    },
+    {
+        title: "Formation",
+        description: "Votre parcours scolaire.",
+        fields: [
+            { name: "degree", label: "Diplôme le plus élevé", type: "select", options: ["Aucun", "Bac", "Bac+2", "Bac+5", "Doctorat"] },
+            { name: "school", label: "Établissement", type: "text" },
+            { name: "graduationYear", label: "Année d'obtention", type: "text" },
+        ],
+    },
+    {
+        title: "Langues",
+        description: "Quelles langues parlez-vous ?",
+        fields: [
+            { name: "languages", label: "Langues (séparées par des virgules)", type: "text" },
+            { name: "native", label: "Langue maternelle", type: "text" },
+        ],
+    },
+    {
+        title: "Centres d'intérêt",
+        description: "Parlez-nous de vos hobbies.",
+        fields: [
+            { name: "hobbies", label: "Hobbies", type: "text" },
+            { name: "sport", label: "Pratiquez-vous un sport ?", type: "checkbox" },
+            {
+                name: "sportName",
+                label: "Quel sport ?",
+                type: "text",
+                showIf: function (values) { return values.sport; },
+            },
+        ],
+    },
+    {
+        title: "Confirmation",
+        description: "Merci de vérifier vos informations avant de valider.",
+        fields: [
+            { name: "acceptTerms", label: "J'accepte les conditions d'utilisation", type: "checkbox" },
+        ],
+    },
+];
+export default {
+    title: "Molecules/DataStepper/Stepper",
+    component: Stepper,
+};
+export var GrandExemple = function () { return (React.createElement("div", { style: { maxWidth: 600, margin: "auto" } },
+    React.createElement(Stepper, { config: config, onSubmit: function (values) {
+            // eslint-disable-next-line no-alert
+            alert("Données soumises : " + JSON.stringify(values, null, 2));
+            console.log(values);
+        } }))); };

package/dist/components/molecules/DataStepper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Stepper';
+export type { StepField, StepConfig, StepperProps } from './Stepper';

package/dist/components/molecules/DataStepper/index.js

@@ -0,0 +1 @@
+export * from './Stepper';

package/dist/index.d.ts

@@ -62,6 +62,8 @@ export { default as LoadingBox } from "./components/molecules/loadingBox/Loading
 export { default as DocumentCard } from "./components/molecules/documentCard/DocumentCard";
 export type { DocumentCardProps } from "./components/molecules/documentCard/DocumentCard";
 export { default as EmployeeCard } from "./components/molecules/employeeCard/EmployeeCard";
+export { Stepper as DataStepper } from "./components/molecules/DataStepper";
+export type { StepField as DataStepField, StepConfig as DataStepConfig, StepperProps as DataStepperProps } from "./components/molecules/DataStepper";
 export { default as Stepper } from "./components/molecules/stepper/Stepper";
 export type { StepperProps } from "./components/molecules/stepper/Stepper";
 export { default as RangeSlider } from "./components/molecules/rangeSlider/RangeSlider";

package/dist/index.js

@@ -71,6 +71,8 @@ export { default as DocumentCard } from "./components/molecules/documentCard/Doc
 // Employee Card
 export { default as EmployeeCard } from "./components/molecules/employeeCard/EmployeeCard";
 // Stepper
+export { Stepper as DataStepper } from "./components/molecules/DataStepper";
+// Ancien Stepper (legacy)
 export { default as Stepper } from "./components/molecules/stepper/Stepper";
 // Range Slider
 export { default as RangeSlider } from "./components/molecules/rangeSlider/RangeSlider";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "4.0.9",
+  "version": "4.1.0",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",