kelt-ui-kit-react 1.9.8 → 2.0.0

package/src/index.css

@@ -1,9 +1,9 @@
 /* variables couleur */
 :root {
-  --primary-color: #004aad;
-  --secondary-color: #ff914d;
-  --tertiary-color: #00ada1;
-  --quaternary-color: #0082ad;
+  --primary-color: #123852;
+  --secondary-color: #EB5E3B;
+  --tertiary-color: #30B8C2;
+  --quaternary-color: #7dc2ef;
   --success-color: #28a745;
   --info-color: #17a2b8;
   --warning-color: #ec942c;
@@ -17,7 +17,10 @@
 html,
 body {
   margin: 0;
-  font-family: "Raleway", sans-serif !important;
+  font-family: "Lexend", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-size: 18px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   height: 100%;
@@ -28,38 +31,48 @@ body {
   width: 100%;
   background-color: #fff;
 }
+
 .app {
   container: app-container/ inline-size;
 }
 
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
-  -webkit-appearance: none; /* Chrome, Safari, Edge */
+  -webkit-appearance: none;
+  /* Chrome, Safari, Edge */
   margin: 0;
 }
+
 /* flex properties */
 
 .d-flex {
   display: flex;
 }
+
 .justify-content-start {
   justify-content: start;
 }
+
 .justify-content-end {
   justify-content: end;
 }
+
 .justify-content-center {
   justify-content: center;
 }
+
 .justify-content-between {
   justify-content: space-between;
 }
+
 .justify-content-around {
   justify-content: space-around;
 }
+
 .justify-content-evenly {
   justify-content: space-evenly;
 }
+
 .align-items-start {
   align-items: start;
 }
@@ -310,63 +323,83 @@ a {
 .mb-3 {
   margin-bottom: 1rem;
 }
+
 .pb-0 {
   padding-bottom: 0;
 }
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
+
 .pb-3 {
   padding-bottom: 1rem;
 }
+
 .pt-0 {
   padding-top: 0;
 }
+
 .pt-1 {
   padding-top: 0.25rem;
 }
+
 .pt-2 {
   padding-top: 0.5rem;
 }
+
 .pt-3 {
   padding-top: 1rem;
 }
+
 .pl-0 {
   padding-left: 0;
 }
+
 .pl-1 {
   padding-left: 0.25rem;
 }
+
 .pl-2 {
   padding-left: 0.5rem;
 }
+
 .pl-3 {
   padding-left: 1rem;
 }
+
 .pr-0 {
   padding-right: 0;
 }
+
 .pr-1 {
   padding-right: 0.25rem;
 }
+
 .pr-2 {
   padding-right: 0.5rem;
 }
+
 .pr-3 {
   padding-right: 1rem;
 }
+
 .p-0 {
   padding: 0;
 }
+
 .p-1 {
   padding: 0.25rem;
 }
+
 .p-2 {
   padding: 0.5rem;
 }
+
 .p-3 {
   padding: 1rem;
 }
@@ -375,25 +408,32 @@ a {
 .border-bottom {
   border-bottom: 1px solid #cfbdbd;
 }
+
 .border-top {
   border-top: 1px solid #cfbdbd;
 }
+
 .border-left {
   border-left: 1px solid #cfbdbd;
 }
+
 .border-right {
   border-right: 1px solid #cfbdbd;
 }
+
 /* fonts */
 .font-weight-bold {
   font-weight: 600;
 }
+
 .font-weight-light {
   font-weight: 300;
 }
+
 .font-weight-normal {
   font-weight: 400;
 }
+
 .font-weight-italic {
   font-style: italic;
 }
@@ -402,32 +442,41 @@ a {
 .visible {
   visibility: visible;
 }
+
 .hidden {
   visibility: hidden;
 }
+
 .position-relative {
   position: relative;
 }
+
 .position-absolute {
   position: absolute;
 }
+
 .cursor-pointer {
   cursor: pointer;
 }
+
 .w-100 {
   width: 100%;
 }
+
 .min-width-auto {
   min-width: auto;
 }
+
 .disabled {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
 }
+
 .overflow-auto {
   overflow: auto;
 }
+
 .toggle-btn {
   display: flex;
   width: 100%;
@@ -492,11 +541,8 @@ a {
   /* Couleurs : gris pour la barre, transparent pour le fond */
 }
 
-@media (min-width: 576px) {
-}
+@media (min-width: 576px) {}
 
-@media (min-width: 768px) {
-}
+@media (min-width: 768px) {}
 
-@media (min-width: 992px) {
-}
+@media (min-width: 992px) {}

package/src/index.ts

@@ -33,6 +33,7 @@ export { Expands } from "./expands/Expands";
 export { FilAriane } from "./filAriane/FilAriane";
 export { DynamicForm } from "./form/Form";
 export { TypeInputEnum } from "./form/form.enum";
+export type { FormMode } from "./form/form.interface";
 export { Input } from "./form/input/Input";
 export { InputNumber } from "./form/inputNumber/InputNumber";
 export { InputPrice } from "./form/inputPrice/InputPrice";

package/src/menus/Menus.tsx

@@ -22,6 +22,7 @@ export const Menus = (props: ExpandProps) => {
           <Menu
             item={item}
             onChange={onChange}
+            className={item.subMenu && item.subMenu.length > 0 ? "has-submenu" : ""}
             active={currentItem?.id === item.id}
           />
           {item.subMenu && item.subMenu.length > 0 && (

package/src/menus/menu/Menu.tsx

@@ -4,12 +4,13 @@ export type MenuProps = {
   active: boolean;
   item: MenuInterface;
   onChange: (item: MenuInterface) => void;
+  className?: string;
 };
 export const Menu = (props: MenuProps): JSX.Element => {
   return (
     <div
       onClick={() => props.onChange(props.item)}
-      className={props.active ? "expand expand--active" : "expand"}
+      className={`expand ${props.active ? "expand--active" : ""} ${props.className || ""}`}
     >
       {props.item.children}
     </div>

package/src/sidebar/Sidebar.tsx

@@ -108,14 +108,18 @@ export const Sidebar = ({
         axisLocked.current = Math.abs(deltaX) > Math.abs(deltaY) ? "x" : "y";
       }
 
-      if (axisLocked.current !== "x") return; // c'est un scroll vertical, on laisse faire
+      if (axisLocked.current !== "x") {
+        return;
+      }
+
+      // Ignore les petits mouvements horizontaux
+      if (deltaX < 20) {
+        return;
+      }
 
-      // On gère le swipe horizontal nous-mêmes : on empêche le scroll natif
-      // et on bloque le bounce/scroll de la page pendant le drag
       event.preventDefault();
 
       setIsDragging(true);
-      // On ne permet que le swipe vers la droite (fermeture), pas de drag négatif
       setDragX(Math.max(0, deltaX));
     },
     [isOpen],
@@ -189,6 +193,7 @@ export const Sidebar = ({
           transition: isDragging ? "none" : undefined,
         }}
         className={`sidebar ${isOpen ? "open" : "closed"} ${className ?? ""}`}
+        onClick={(event) => event.stopPropagation()}
         onTouchStart={handleTouchStart}
         onTouchMove={handleTouchMove}
         onTouchEnd={handleTouchEnd}

package/src/tabs/tabs.css

@@ -1,24 +1,30 @@
 .tabs-root {
   height: 100%;
+
   .tabs-header {
     display: flex;
     border-bottom: 1px solid #b2a1a1;
+
     .tab-button {
       padding: 0.5rem 0.75rem;
       border: 0px;
       outline: none;
       background-color: transparent;
-      color: #1e293b; /* slate-800 */
+      color: #1e293b;
+      /* slate-800 */
       cursor: pointer;
 
       &.tab-button--active {
-        border-bottom: 2px solid var(--primary-color); /* slate-800 */
+        border-bottom: 2px solid var(--primary-color);
+        /* slate-800 */
         border-radius: 0px;
+        font-weight: bold;
       }
+
       &.tab-button--disabled {
         opacity: 0.5;
         cursor: not-allowed;
       }
     }
   }
-}
+}

package/src/toaster/Toaster.tsx

@@ -34,9 +34,14 @@ export const Toaster = () => {
   return ReactDOM.createPortal(
     <div className={`toaster toaster-${severity}`}>
       {close && (
-        <div className="toaster--close" onClick={onClose}>
+        <button
+          type="button"
+          className="toaster--close"
+          onClick={onClose}
+          aria-label="Fermer la notification"
+        >
           <Icon classIcon="bi-x" />
-        </div>
+        </button>
       )}
       <div>
         {severity === "info" && <Icon classIcon="bi-info-circle" />}

package/src/toaster/Toaster.view.tsx

@@ -9,6 +9,7 @@ export const ToasterView = (): JSX.Element => {
       description: "This is a description for the toast message.",
       severity: "warning",
       duration: 10000,
+      close: true,
       children: <div>Additional content can go here.</div>,
     });
   }, [showToast]);

package/src/toaster/store/useToasterStore.tsx

@@ -15,6 +15,7 @@ type ToasterState = {
       severity?: "info" | "success" | "error" | "warning";
       duration?: number;
       children?: React.ReactNode;
+      close?: boolean;
     }
   ) => void;
   hideToast: () => void;
@@ -36,6 +37,7 @@ export const useToasterStore = create<ToasterState>((set) => ({
       duration: options.duration || 2500,
       visible: true,
       children: options.children || null,
+      close: options.close ?? true,
     })),
   hideToast: () => set(() => ({ visible: false })),
 }));

package/src/toaster/toaster.css

@@ -15,7 +15,12 @@
     position: absolute;
     top: 2px;
     right: 2px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
     color: #333;
+    min-width: auto;
     cursor: pointer;
     .bi {
       font-size: 1.2rem;
@@ -55,7 +60,7 @@
   }
   .title {
     font-weight: 500;
-    font-size: 16px;
+    font-size: 18px;
     &.title-info {
       color: var(--primary-color);
     }
@@ -70,7 +75,7 @@
     }
   }
   .subtitle {
-    font-size: 14px;
+    font-size: 16px;
   }
   .bi-info-circle {
     color: var(--primary-color);