allaw-ui 2.6.0 → 2.6.2

package/dist/components/atoms/inputs/VerificationCodeInput.js

@@ -14,6 +14,7 @@ var VerificationCodeInput = function (_a) {
     var numInputs = _a.numInputs, _b = _a.allowedChars, allowedChars = _b === void 0 ? "numeric" : _b, _c = _a.size, size = _c === void 0 ? "large" : _c, onChange = _a.onChange, onError = _a.onError, onComplete = _a.onComplete, _d = _a.testError, testError = _d === void 0 ? false : _d, _e = _a.autoFocus, autoFocus = _e === void 0 ? false : _e, _f = _a.isDisabled, isDisabled = _f === void 0 ? false : _f;
     var _g = useState(Array(numInputs).fill("")), values = _g[0], setValues = _g[1];
     var _h = useState(""), error = _h[0], setError = _h[1];
+    var _j = useState(false), isSmallScreen = _j[0], setIsSmallScreen = _j[1];
     var inputRefs = useRef(Array(numInputs).fill(null));
     useEffect(function () {
         setValues(Array(numInputs).fill(""));
@@ -29,6 +30,17 @@ var VerificationCodeInput = function (_a) {
             onError === null || onError === void 0 ? void 0 : onError(null);
         }
     }, [testError, onError]);
+    useEffect(function () {
+        var checkScreenSize = function () {
+            setIsSmallScreen(window.innerWidth < 400);
+        };
+        // Vérifier la taille initiale
+        checkScreenSize();
+        // Ajouter un écouteur d'événement pour les changements de taille
+        window.addEventListener("resize", checkScreenSize);
+        // Nettoyer l'écouteur d'événement
+        return function () { return window.removeEventListener("resize", checkScreenSize); };
+    }, []);
     var handleInputChange = function (index, value) {
         // console.log(`[VerificationCodeInput] Input ${index} changed to:`, value);
         var _a;
@@ -128,7 +140,7 @@ var VerificationCodeInput = function (_a) {
         return regex.test(value);
     };
     var renderInputs = function () {
-        return values.map(function (value, index) { return (React.createElement("input", { key: index, className: "".concat(styles.input, " ").concat(styles[size], " ").concat(value ? styles.filledInput : ""), value: value, onChange: function (e) { return handleInputChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e); }, onPaste: index === 0 ? handlePaste : undefined, onBlur: handleBlur, maxLength: 1, inputMode: allowedChars === "numeric" ? "numeric" : "text", pattern: allowedChars === "numeric"
+        return values.map(function (value, index) { return (React.createElement("input", { key: index, className: "".concat(styles.input, " ").concat(styles[size], " ").concat(value ? styles.filledInput : "", " ").concat(isSmallScreen ? styles.responsive : ""), value: value, onChange: function (e) { return handleInputChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e); }, onPaste: index === 0 ? handlePaste : undefined, onBlur: handleBlur, maxLength: 1, inputMode: allowedChars === "numeric" ? "numeric" : "text", pattern: allowedChars === "numeric"
                 ? "[0-9]*"
                 : allowedChars === "alphabetic"
                     ? "[a-zA-Z]*"
@@ -136,8 +148,8 @@ var VerificationCodeInput = function (_a) {
             , "data-form-type": "other" // Indique que ce n'est pas un champ de mot de passe
             , disabled: isDisabled })); });
     };
-    return (React.createElement("div", { className: styles.container },
-        React.createElement("div", { className: styles.inputsContainer }, renderInputs()),
+    return (React.createElement("div", { className: "".concat(styles.container, " ").concat(isSmallScreen ? styles.responsiveContainer : "") },
+        React.createElement("div", { className: "".concat(styles.inputsContainer, " ").concat(isSmallScreen ? styles.responsiveInputsContainer : "") }, renderInputs()),
         error && (React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error }))));
 };
 export default VerificationCodeInput;

package/dist/components/atoms/inputs/VerificationCodeInput.module.css

@@ -82,3 +82,38 @@
   height: 56px;
   font-size: 20px;
 }
+
+/* Styles responsifs pour les petits écrans (moins de 400px) */
+.responsiveContainer {
+  gap: 6px;
+}
+
+.responsiveInputsContainer {
+  gap: 6px;
+}
+
+.responsive.small {
+  width: 32px;
+  height: 32px;
+  font-size: 14px;
+}
+
+.responsive.medium {
+  width: 38px;
+  height: 38px;
+  font-size: 16px;
+}
+
+.responsive.large {
+  width: 44px;
+  height: 44px;
+  font-size: 18px;
+}
+
+/* Media query pour les petits écrans */
+@media (max-width: 400px) {
+  .input {
+    border-width: 1.5px;
+    border-radius: 6px;
+  }
+}

package/dist/components/atoms/inputs/VerificationCodeInput.stories.d.ts

@@ -56,4 +56,26 @@ declare namespace _default {
 export default _default;
 export const Default: any;
 export const WithError: any;
+export function Responsive(args: any): React.JSX.Element;
+export namespace Responsive {
+    export namespace args {
+        let numInputs_1: number;
+        export { numInputs_1 as numInputs };
+        let size_1: string;
+        export { size_1 as size };
+    }
+    export namespace parameters_1 {
+        namespace docs {
+            export namespace description_4 {
+                let story: string;
+            }
+            export { description_4 as description };
+        }
+        namespace viewport {
+            let defaultViewport: string;
+        }
+    }
+    export { parameters_1 as parameters };
+}
 import VerificationCodeInput from "./VerificationCodeInput";
+import React from "react";

package/dist/components/atoms/inputs/VerificationCodeInput.stories.js

@@ -70,3 +70,20 @@ WithError.parameters = {
         },
     },
 };
+export var Responsive = function (args) { return (React.createElement("div", null,
+    React.createElement("p", { style: { marginBottom: "10px" } }, "Redimensionnez la fen\u00EAtre \u00E0 moins de 400px pour voir le design responsive"),
+    React.createElement(VerificationCodeInput, __assign({}, args)))); };
+Responsive.args = {
+    numInputs: 6,
+    size: "large",
+};
+Responsive.parameters = {
+    docs: {
+        description: {
+            story: "Montre le comportement responsive du composant lorsque la largeur de l'écran est inférieure à 400px",
+        },
+    },
+    viewport: {
+        defaultViewport: "mobile1",
+    },
+};

package/dist/components/molecules/stepper/Stepper.css

@@ -112,7 +112,7 @@
 
 @media (max-width: 800px) {
   .stepper-container {
-    height: 99dvh;
+    height: 83dvh;
     position: fixed;
     bottom: 0;
     justify-content: flex-start;

package/package.json

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