@portnet/ui 3.1.1 → 3.1.2

package/dist/components/buttons/PuiButton.js

@@ -30,7 +30,28 @@ const BaseMuiButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props,
 }, props))))(() => {
   return {
     "&.MuiButton-root": {
+      borderRadius: "8px",
+      textTransform: "none",
+      fontWeight: 500,
+      fontSize: "14px",
+      lineHeight: 1.5,
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+      transition: "all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)",
       boxShadow: _apperance.palette.shadow.light,
+      minHeight: "40px",
+      padding: "8px 16px",
+      "&.MuiButton-sizeLarge": {
+        minHeight: "48px",
+        padding: "12px 24px",
+        fontSize: "16px",
+        borderRadius: "10px"
+      },
+      "&.MuiButton-sizeSmall": {
+        minHeight: "32px",
+        padding: "6px 12px",
+        fontSize: "12px",
+        borderRadius: "6px"
+      },
       "&:hover": {
         boxShadow: _apperance.palette.shadow.medium,
         transform: "translateY(-1px)"
@@ -38,25 +59,43 @@ const BaseMuiButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props,
       "&:active": {
         boxShadow: _apperance.palette.shadow.light,
         transform: "translateY(0)"
+      },
+      "&:focus": {
+        outline: "2px solid ".concat(_apperance.palette.primary, "40"),
+        outlineOffset: "2px"
+      },
+      "&:disabled": {
+        transform: "none",
+        boxShadow: "none",
+        opacity: 0.6
       }
     }
   };
 });
 const PrimaryButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseMuiButton, _objectSpread({
   ref: ref,
-  variant: "outlined"
+  variant: "contained"
 }, props))))(() => {
   return {
     "&.MuiButton-root": {
-      backgroundColor: _apperance.palette.primary,
-      border: "1px solid ".concat(_apperance.palette.primary),
+      background: "linear-gradient(135deg, ".concat(_apperance.palette.primary, " 0%, ").concat(_apperance.palette.blue.dark, " 100%)"),
+      border: "none",
       color: _apperance.palette.white,
+      boxShadow: "0 2px 8px ".concat(_apperance.palette.primary, "40"),
       "&:hover": {
-        backgroundColor: _apperance.palette.blue.dark,
-        borderColor: _apperance.palette.blue.dark
+        background: "linear-gradient(135deg, ".concat(_apperance.palette.blue.dark, " 0%, ").concat(_apperance.palette.blue.darker, " 100%)"),
+        boxShadow: "0 4px 12px ".concat(_apperance.palette.primary, "50")
+      },
+      "&:active": {
+        background: "linear-gradient(135deg, ".concat(_apperance.palette.blue.darker, " 0%, ").concat(_apperance.palette.blue.darker, " 100%)")
       },
       "&:focus": {
-        boxShadow: "0 0 0 3px ".concat(_apperance.palette.blue.light)
+        boxShadow: "0 0 0 3px ".concat(_apperance.palette.primary, "30, 0 2px 8px ").concat(_apperance.palette.primary, "40")
+      },
+      "&:disabled": {
+        background: _apperance.palette.gray[300],
+        color: _apperance.palette.gray[500],
+        boxShadow: "none"
       }
     }
   };
@@ -67,33 +106,57 @@ const SecondaryButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props
 }, props))))(() => {
   return {
     "&.MuiButton-root": {
-      backgroundColor: _apperance.palette.gray[50],
-      border: "1px solid ".concat(_apperance.palette.gray[300]),
+      backgroundColor: _apperance.palette.white,
+      border: "2px solid ".concat(_apperance.palette.border.main),
       color: _apperance.palette.gray[700],
+      boxShadow: "none",
       "&:hover": {
+        backgroundColor: _apperance.palette.gray[50],
+        borderColor: _apperance.palette.primary,
+        color: _apperance.palette.primary,
+        boxShadow: "0 2px 8px ".concat(_apperance.palette.primary, "20")
+      },
+      "&:active": {
         backgroundColor: _apperance.palette.gray[100],
-        borderColor: _apperance.palette.gray[400]
+        borderColor: _apperance.palette.blue.dark
       },
       "&:focus": {
-        boxShadow: "0 0 0 3px ".concat(_apperance.palette.gray[200])
+        boxShadow: "0 0 0 3px ".concat(_apperance.palette.primary, "20"),
+        borderColor: _apperance.palette.primary
+      },
+      "&:disabled": {
+        backgroundColor: _apperance.palette.gray[50],
+        borderColor: _apperance.palette.gray[200],
+        color: _apperance.palette.gray[400]
       }
     }
   };
 });
 const TertiaryButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseMuiButton, _objectSpread({
   ref: ref,
-  variant: "outlined"
+  variant: "text"
 }, props))))(() => {
   return {
     "&.MuiButton-root": {
       backgroundColor: "transparent",
-      border: "1px solid ".concat(_apperance.palette.primary),
+      border: "none",
       color: _apperance.palette.primary,
+      boxShadow: "none",
       "&:hover": {
-        backgroundColor: _apperance.palette.blue.light
+        backgroundColor: "".concat(_apperance.palette.primary, "10"),
+        color: _apperance.palette.blue.dark,
+        boxShadow: "none"
+      },
+      "&:active": {
+        backgroundColor: "".concat(_apperance.palette.primary, "15")
       },
       "&:focus": {
-        boxShadow: "0 0 0 3px ".concat(_apperance.palette.blue.light)
+        boxShadow: "0 0 0 3px ".concat(_apperance.palette.primary, "20"),
+        backgroundColor: "".concat(_apperance.palette.primary, "08")
+      },
+      "&:disabled": {
+        backgroundColor: "transparent",
+        color: _apperance.palette.gray[400]
       }
     }
   };
@@ -131,7 +194,7 @@ const PuiButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     id,
     className,
     sx,
-    size: "small",
+    size: "medium",
     disabled,
     loading,
     loadingPosition,

package/dist/components/common/StyledMuiTextField.js

@@ -82,38 +82,57 @@ const StyledMuiTextField = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((_r
       },
       "& .MuiInputBase-root": {
         backgroundColor: _apperance.palette.white,
-        border: "1px solid ".concat(_apperance.palette.border.main),
-        borderRadius: "6px",
-        transition: "all 0.2s ease-in-out",
+        border: "2px solid ".concat(_apperance.palette.border.light),
+        borderRadius: "8px",
+        minHeight: "40px",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        transition: "all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)",
         "&:hover": {
-          borderColor: _apperance.palette.gray[400]
+          borderColor: _apperance.palette.gray[400],
+          boxShadow: "0 0 0 2px ".concat(_apperance.palette.primary, "10")
         },
         "&.MuiInputBase-multiline": {
-          padding: "8px 0"
+          padding: "8px 0",
+          minHeight: "auto"
         },
         "&.Mui-focused": {
-          border: "1px solid ".concat(_apperance.palette.primary),
-          boxShadow: "0 0 0 3px ".concat(_apperance.palette.blue.light)
+          border: "2px solid ".concat(_apperance.palette.primary),
+          boxShadow: "0 0 0 3px ".concat(_apperance.palette.primary, "20"),
+          outline: "none"
         },
         "&.Mui-error": {
-          border: "1px solid ".concat(_apperance.palette.error),
-          backgroundColor: _apperance.palette.background.error
+          border: "2px solid ".concat(_apperance.palette.error),
+          backgroundColor: _apperance.palette.background.error,
+          boxShadow: "0 0 0 2px ".concat(_apperance.palette.error, "20")
         },
         "&.Mui-disabled": {
           "& input": {
-            color: _apperance.palette.gray[600],
-            WebkitTextFillColor: _apperance.palette.gray[600]
+            color: _apperance.palette.gray[400],
+            WebkitTextFillColor: _apperance.palette.gray[400]
           },
           backgroundColor: _apperance.palette.gray[50],
-          borderColor: _apperance.palette.gray[200]
+          borderColor: _apperance.palette.gray[200],
+          cursor: "not-allowed"
         },
         "& .MuiInputBase-input": {
           lineHeight: "1.5",
-          padding: "8px 12px",
-          fontSize: "0.875rem",
+          padding: "10px 14px",
+          fontSize: "14px",
+          fontWeight: 400,
           "&::placeholder": {
             color: _apperance.palette.gray[400],
-            opacity: 1
+            opacity: 1,
+            fontStyle: "italic"
+          }
+        },
+        "& .MuiInputBase-inputSizeSmall": {
+          padding: "8px 12px",
+          fontSize: "12px"
+        },
+        "& .MuiInputAdornment-root": {
+          color: _apperance.palette.gray[500],
+          "& .MuiSvgIcon-root": {
+            fontSize: "1.2rem"
           }
         }
       },

package/dist/components/inputs/PuiSelect.js

@@ -69,31 +69,43 @@ const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((
       },
       "& .MuiInputBase-root": {
         backgroundColor: _apperance.palette.white,
-        border: "1px solid ".concat(_apperance.palette.border.main),
-        borderRadius: "6px",
-        transition: "all 0.2s ease-in-out",
+        border: "2px solid ".concat(_apperance.palette.border.light),
+        borderRadius: "8px",
+        minHeight: "40px",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        transition: "all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)",
         "&:hover": {
-          borderColor: _apperance.palette.gray[400]
+          borderColor: _apperance.palette.gray[400],
+          boxShadow: "0 0 0 2px ".concat(_apperance.palette.primary, "10")
         },
         "&.Mui-focused": {
-          border: "1px solid ".concat(_apperance.palette.primary),
-          boxShadow: "0 0 0 3px ".concat(_apperance.palette.blue.light)
+          border: "2px solid ".concat(_apperance.palette.primary),
+          boxShadow: "0 0 0 3px ".concat(_apperance.palette.primary, "20"),
+          outline: "none"
         },
         "&.Mui-error": {
-          border: "1px solid ".concat(_apperance.palette.error),
-          backgroundColor: _apperance.palette.background.error
+          border: "2px solid ".concat(_apperance.palette.error),
+          backgroundColor: _apperance.palette.background.error,
+          boxShadow: "0 0 0 2px ".concat(_apperance.palette.error, "20")
         },
         "&.Mui-disabled": {
           backgroundColor: _apperance.palette.gray[50],
-          borderColor: _apperance.palette.gray[200]
+          borderColor: _apperance.palette.gray[200],
+          cursor: "not-allowed"
         },
         "& .MuiInputBase-input": {
-          padding: "8px 12px",
-          fontSize: "0.875rem"
+          padding: "10px 14px",
+          fontSize: "14px",
+          fontWeight: 400
         },
         "& .MuiSvgIcon-root": {
-          marginRight: "8px",
-          color: _apperance.palette.gray[500]
+          marginRight: "12px",
+          color: _apperance.palette.gray[500],
+          fontSize: "1.2rem",
+          transition: "transform 0.2s ease"
+        },
+        "&.Mui-focused .MuiSvgIcon-root": {
+          transform: "rotate(180deg)"
         }
       },
       "& .MuiFormHelperText-root": {
@@ -176,29 +188,33 @@ const PuiStandardSelect = _ref => {
       MenuProps: {
         sx: {
           "& .MuiPaper-root": {
-            marginTop: "4px",
-            borderRadius: "6px",
+            marginTop: "8px",
+            borderRadius: "8px",
             boxShadow: _apperance.palette.shadow.medium,
-            border: "1px solid ".concat(_apperance.palette.border.light)
+            border: "1px solid ".concat(_apperance.palette.border.light),
+            overflow: "hidden"
           },
           "& .MuiMenu-list": {
-            padding: "4px 0",
-            "& .MuiMenuItem-root:not(:last-child)": {
-              borderBottom: "1px solid ".concat(_apperance.palette.gray[100])
-            },
+            padding: "6px",
             "& .MuiMenuItem-root": {
-              fontSize: "0.875rem",
-              padding: "8px 16px",
+              fontSize: "14px",
+              fontWeight: 400,
+              padding: "10px 14px",
+              margin: "2px 0",
+              borderRadius: "6px",
               height: "fit-content",
               minHeight: "auto",
-              transition: "background-color 0.15s ease-in-out",
+              transition: "all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)",
               "&:hover": {
-                backgroundColor: _apperance.palette.gray[50]
+                backgroundColor: "".concat(_apperance.palette.primary, "08"),
+                color: _apperance.palette.primary
               },
               "&.Mui-selected": {
-                backgroundColor: _apperance.palette.blue.light,
+                backgroundColor: "".concat(_apperance.palette.primary, "15"),
+                color: _apperance.palette.primary,
+                fontWeight: 500,
                 "&:hover": {
-                  backgroundColor: _apperance.palette.blue.light
+                  backgroundColor: "".concat(_apperance.palette.primary, "20")
                 }
               }
             }

package/dist/components/providers/PuiAntdProvider.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Import conditionnel d'Ant Design
+let ConfigProvider, frFR, antdTheme;
+try {
+  const antd = require('antd');
+  ConfigProvider = antd.ConfigProvider;
+  frFR = require('antd/locale/fr_FR').default || require('antd/locale/fr_FR');
+  antdTheme = require('../../config/antdTheme').antdTheme;
+} catch (error) {
+  console.warn('Ant Design not installed, PuiAntdProvider will render children without styling');
+}
+
+/**
+ * Provider Ant Design configuré avec le thème personnalisé basé sur les maquettes
+ */
+const PuiAntdProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  // Si Ant Design n'est pas disponible, retourner les enfants sans wrapper
+  if (!ConfigProvider) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: children
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfigProvider, {
+    theme: antdTheme,
+    locale: frFR,
+    autoInsertSpaceInButton: false,
+    input: {
+      autoComplete: 'off'
+    },
+    form: {
+      requiredMark: 'optional',
+      validateMessages: {
+        required: 'Ce champ est obligatoire',
+        types: {
+          email: 'Format email invalide',
+          number: 'Format numérique invalide'
+        },
+        number: {
+          range: 'La valeur doit être entre ${min} et ${max}'
+        }
+      }
+    },
+    pagination: {
+      showSizeChanger: true,
+      showQuickJumper: true,
+      showTotal: (total, range) => "".concat(range[0], "-").concat(range[1], " sur ").concat(total, " \xE9l\xE9ments")
+    },
+    table: {
+      size: 'middle'
+    },
+    button: {
+      style: {
+        fontWeight: 500
+      }
+    },
+    children: children
+  });
+};
+var _default = exports.default = PuiAntdProvider;

package/dist/components/providers/PuiThemeProvider.js

@@ -0,0 +1,230 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("@mui/material/styles");
+var _material = require("@mui/material");
+var _PuiAntdProvider = _interopRequireDefault(require("./PuiAntdProvider"));
+var _PuiAlertProvider = _interopRequireDefault(require("./PuiAlertProvider"));
+var _apperance = require("../../config/apperance");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Thème MUI personnalisé moderne
+const modernMuiTheme = (0, _styles.createTheme)({
+  palette: {
+    primary: {
+      main: _apperance.palette.primary,
+      light: _apperance.palette.blue.light,
+      dark: _apperance.palette.blue.dark,
+      contrastText: _apperance.palette.white
+    },
+    secondary: {
+      main: _apperance.palette.gray[600],
+      light: _apperance.palette.gray[400],
+      dark: _apperance.palette.gray[800],
+      contrastText: _apperance.palette.white
+    },
+    error: {
+      main: _apperance.palette.error
+    },
+    warning: {
+      main: _apperance.palette.warning
+    },
+    info: {
+      main: _apperance.palette.info
+    },
+    success: {
+      main: _apperance.palette.success
+    },
+    background: {
+      default: _apperance.palette.background.default,
+      paper: _apperance.palette.background.paper
+    },
+    text: {
+      primary: _apperance.palette.dark,
+      secondary: _apperance.palette.gray[600]
+    },
+    divider: _apperance.palette.border.light
+  },
+  typography: {
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    fontSize: 14,
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 600,
+    h1: {
+      fontSize: '2rem',
+      fontWeight: 600,
+      lineHeight: 1.2
+    },
+    h2: {
+      fontSize: '1.5rem',
+      fontWeight: 600,
+      lineHeight: 1.3
+    },
+    h3: {
+      fontSize: '1.25rem',
+      fontWeight: 500,
+      lineHeight: 1.4
+    },
+    h4: {
+      fontSize: '1rem',
+      fontWeight: 500,
+      lineHeight: 1.5
+    },
+    h5: {
+      fontSize: '0.875rem',
+      fontWeight: 500,
+      lineHeight: 1.5
+    },
+    h6: {
+      fontSize: '0.75rem',
+      fontWeight: 500,
+      lineHeight: 1.5
+    },
+    body1: {
+      fontSize: '0.875rem',
+      lineHeight: 1.5
+    },
+    body2: {
+      fontSize: '0.75rem',
+      lineHeight: 1.5
+    },
+    button: {
+      textTransform: 'none',
+      fontWeight: 500
+    }
+  },
+  shape: {
+    borderRadius: 8
+  },
+  spacing: 8,
+  shadows: ['none', _apperance.palette.shadow.light, _apperance.palette.shadow.card, _apperance.palette.shadow.medium, _apperance.palette.shadow.strong, ...Array(20).fill(_apperance.palette.shadow.strong)],
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+          fontSize: '14px',
+          lineHeight: 1.5,
+          color: _apperance.palette.dark,
+          backgroundColor: _apperance.palette.background.default
+        },
+        '*': {
+          boxSizing: 'border-box'
+        },
+        '*:before, *:after': {
+          boxSizing: 'border-box'
+        },
+        // Scrollbar moderne
+        '*::-webkit-scrollbar': {
+          width: '8px',
+          height: '8px'
+        },
+        '*::-webkit-scrollbar-track': {
+          backgroundColor: _apperance.palette.gray[100],
+          borderRadius: '4px'
+        },
+        '*::-webkit-scrollbar-thumb': {
+          backgroundColor: _apperance.palette.gray[300],
+          borderRadius: '4px',
+          '&:hover': {
+            backgroundColor: _apperance.palette.gray[400]
+          }
+        }
+      }
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: '8px',
+          textTransform: 'none',
+          fontWeight: 500,
+          fontSize: '14px',
+          minHeight: '40px',
+          padding: '8px 16px',
+          transition: 'all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)',
+          '&:focus': {
+            outline: "2px solid ".concat(_apperance.palette.primary, "40"),
+            outlineOffset: '2px'
+          }
+        },
+        sizeLarge: {
+          minHeight: '48px',
+          padding: '12px 24px',
+          fontSize: '16px',
+          borderRadius: '10px'
+        },
+        sizeSmall: {
+          minHeight: '32px',
+          padding: '6px 12px',
+          fontSize: '12px',
+          borderRadius: '6px'
+        }
+      }
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: '12px',
+          boxShadow: _apperance.palette.shadow.card,
+          border: "1px solid ".concat(_apperance.palette.border.light),
+          transition: 'all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
+          '&:hover': {
+            transform: 'translateY(-2px)',
+            boxShadow: _apperance.palette.shadow.medium
+          }
+        }
+      }
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          backgroundImage: 'none'
+        },
+        rounded: {
+          borderRadius: '8px'
+        }
+      }
+    },
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          borderRadius: '12px',
+          boxShadow: _apperance.palette.shadow.strong
+        }
+      }
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: '6px',
+          fontWeight: 500
+        }
+      }
+    }
+  }
+});
+
+/**
+ * Provider de thème combiné MUI + Ant Design avec style moderne
+ */
+const PuiThemeProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ThemeProvider, {
+    theme: modernMuiTheme,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CssBaseline, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiAntdProvider.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiAlertProvider.default, {
+        children: children
+      })
+    })]
+  });
+};
+var _default = exports.default = PuiThemeProvider;