kelt-ui-kit-react 2.0.1 → 2.0.3

package/src/form/inputNumber/InputNumber.tsx

@@ -8,10 +8,8 @@ export type InputNumberProps = {
   value?: string; // ⚠️ string pour gérer la saisie manuelle
   placeholder?: string;
   className?: string;
-  pattern?: string; // regex pour validation (ex: "^-?\\d*[.,]?\\d*$" pour nombre décimal)
   disabled?: boolean;
   required?: boolean;
-  inputMode?: "numeric" | "decimal";
   autoFocus?: boolean;
   maxLength?: number;
   autoComplete?: string;
@@ -19,7 +17,7 @@ export type InputNumberProps = {
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   onChange?: (
     e: React.ChangeEvent<HTMLInputElement>,
-    valueFormat?: string,
+    valueFormat?: string
   ) => void;
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
   onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
@@ -40,15 +38,13 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
       maxLength = 10,
       autoComplete = "off",
       tabIndex = 0,
-      inputMode = "numeric",
-      pattern,
       onChange,
       onBlur,
       onClick,
       onKeyDown,
       onFocus,
     },
-    ref,
+    ref
   ) => {
     const handleChange = useCallback(
       (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -66,7 +62,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
 
         onChange?.(e, newValue);
       },
-      [onChange, maxLength],
+      [onChange, maxLength]
     );
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -76,7 +72,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
       // ✅ Autoriser chiffres, contrôle, ., , et -
       const allowed =
         /[0-9]|Backspace|Delete|ArrowLeft|ArrowRight|Tab|Enter|Home|End/.test(
-          e.key,
+          e.key
         ) ||
         e.key === "." ||
         e.key === "," ||
@@ -109,9 +105,8 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
           required={required}
           autoFocus={autoFocus}
           autoComplete={autoComplete}
-          pattern={pattern}
           tabIndex={tabIndex}
-          inputMode={inputMode} // mobile keyboard adaptatif
+          inputMode="numeric" // mobile keyboard adaptatif
           spellCheck="false"
           className={`input-field ${className ?? ""}`}
           onChange={handleChange}
@@ -126,7 +121,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
         />
       </div>
     );
-  },
+  }
 );
 
 InputNumber.displayName = "InputNumber";

package/src/form/inputPrice/InputPrice.tsx

@@ -18,7 +18,7 @@ export const InputPrice = forwardRef<HTMLInputElement, InputPriceProps>(
       onChange,
       ...props
     },
-    ref,
+    ref
   ) => {
     const handleBlur = useCallback(() => {
       if (onChange) {
@@ -31,12 +31,10 @@ export const InputPrice = forwardRef<HTMLInputElement, InputPriceProps>(
       <InputNumber
         {...props}
         ref={ref}
-        pattern="[0-9]*[.,]?[0-9]*"
-        inputMode="decimal" // mobile keyboard adaptatif
         value={value ?? ""}
         onChange={(e) => onChange?.(e.target.value)}
         onBlur={handleBlur} // Force le formatage à 2 décimales en sortie
       />
     );
-  },
+  }
 );

package/src/grid/col/Col.tsx

@@ -1,12 +1,14 @@
 import { ColStyled } from "./colStyled/ColStyled";
-import { GridBreakpoints } from "../grid.interface";
-
-type ColProps = GridBreakpoints & {
+type ColProps = {
+  xs?: number;
+  sm?: number;
+  md?: number;
+  lg?: number;
   children: React.ReactNode;
 };
-export const Col: React.FC<ColProps> = ({ xs, sm, md, lg, xl, children }) => {
+export const Col: React.FC<ColProps> = ({ xs, sm, md, lg, children }) => {
   return (
-    <ColStyled $xs={xs} $sm={sm} $md={md} $lg={lg} $xl={xl}>
+    <ColStyled $xs={xs} $sm={sm} $md={md} $lg={lg}>
       {children}
     </ColStyled>
   );

package/src/grid/col/colStyled/ColStyled.tsx

@@ -1,17 +1,12 @@
 import styled, { css } from "styled-components";
-import { GridColumnSpan } from "../../grid.interface";
-
 const getColWidth = (size = 12) => `${(size / 12) * 100}%`;
 type ColStyledProps = {
-  $xs?: GridColumnSpan;
-  $sm?: GridColumnSpan;
-  $md?: GridColumnSpan;
-  $lg?: GridColumnSpan;
-  $xl?: GridColumnSpan;
+  $xs?: number;
+  $sm?: number;
+  $md?: number;
+  $lg?: number;
 };
 export const ColStyled = styled.div<ColStyledProps>`
-  box-sizing: border-box;
-  min-width: 0;
   padding: 0 15px;
   flex: 0 0 ${({ $xs }) => getColWidth($xs)};
   max-width: ${({ $xs }) => getColWidth($xs)};
@@ -20,7 +15,7 @@ export const ColStyled = styled.div<ColStyledProps>`
   ${({ $sm }) =>
     $sm &&
     css`
-      @media (min-width: 576px) {
+      @container (min-width: 576px) {
         flex: 0 0 ${getColWidth($sm)};
         max-width: ${getColWidth($sm)};
       }
@@ -29,7 +24,7 @@ export const ColStyled = styled.div<ColStyledProps>`
   ${({ $md }) =>
     $md &&
     css`
-      @media (min-width: 768px) {
+      @container (min-width: 768px) {
         flex: 0 0 ${getColWidth($md)};
         max-width: ${getColWidth($md)};
       }
@@ -38,18 +33,9 @@ export const ColStyled = styled.div<ColStyledProps>`
   ${({ $lg }) =>
     $lg &&
     css`
-      @media (min-width: 992px) {
+      @container (min-width: 992px) {
         flex: 0 0 ${getColWidth($lg)};
         max-width: ${getColWidth($lg)};
       }
     `}
-
-  ${({ $xl }) =>
-    $xl &&
-    css`
-      @media (min-width: 1200px) {
-        flex: 0 0 ${getColWidth($xl)};
-        max-width: ${getColWidth($xl)};
-      }
-    `}
 `;

package/src/grid/grid.interface.tsx

@@ -1,13 +1,7 @@
-export type GridColumnSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
-export interface GridBreakpoints {
-  xs?: GridColumnSpan;
-  sm?: GridColumnSpan;
-  md?: GridColumnSpan;
-  lg?: GridColumnSpan;
-  xl?: GridColumnSpan;
-}
-
-export interface GridInterface extends GridBreakpoints {
+export interface GridInterface {
+  sm?: number;
+  xs?: number;
+  md?: number;
+  lg?: number;
   children: React.ReactNode;
 }

package/src/header/Header.tsx

@@ -11,7 +11,6 @@ export const Header = ({
   onClickMenu,
   userChildren,
   positionFixed,
-  overlayClassName,
   onClickLogo,
   showBackNavigation,
   onClickBackNavigation,
@@ -24,7 +23,7 @@ export const Header = ({
   return (
     <div className={`header ${positionFixed ? "header--fixed" : ""}`}>
       <div className="flex-1 d-flex align-items-center">
-        <span className="header-menu-btn" onClick={onClickMenu}>
+        <span onClick={onClickMenu}>
           <Icon size={IconSizeEnum.MEDIUM} classIcon="bi-list"></Icon>
         </span>
         {showBackNavigation && (
@@ -40,7 +39,7 @@ export const Header = ({
           className={`header-logo ${onClickLogo && "cursor-pointer"} `}
           onClick={onClickLogo}
         >
-          {logo && logo}
+          {logo && <img src={logo} alt="logo" />}
         </span>
       </div>
       <div className="d-flex align-items-center">
@@ -50,7 +49,6 @@ export const Header = ({
         </div>
         {openOverlay && refButton.current && (
           <OverlayPanel
-            className={overlayClassName}
             position="bottomRight"
             show={openOverlay}
             closeOverlay={setOpenOverlay}

package/src/header/header.css

@@ -23,21 +23,4 @@
   .bi {
     cursor: pointer;
   }
-
-  .header-menu-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    cursor: pointer;
-
-    &::before {
-      content: "";
-      position: absolute;
-      top: -15px;
-      bottom: -15px;
-      left: -15px;
-      right: -15px;
-    }
-  }
 }

package/src/header/header.interface.tsx

@@ -1,11 +1,10 @@
 export interface HeaderInterface {
-  logo?: React.ReactNode;
+  logo?: string;
   children?: React.ReactNode;
   positionFixed?: boolean;
   onClickMenu?: () => void;
   userChildren?: React.ReactNode;
   onClickLogo?: () => void;
-  overlayClassName?: string;
   showBackNavigation?: boolean;
   onClickBackNavigation?: () => void;
 }

package/src/icon/Icon.tsx

@@ -1,6 +1,10 @@
 import "./icon.css";
 import { IconInterface } from "./icon.interface";
 
-export const Icon = ({ classIcon, size }: IconInterface): JSX.Element => {
-  return <i className={`bi ${classIcon} ${size ?? "sm"}`} />;
+export const Icon = ({
+  classIcon,
+  size,
+  onClick,
+}: IconInterface): JSX.Element => {
+  return <i className={`bi ${classIcon} ${size ?? "sm"}`} onClick={onClick} />;
 };

package/src/icon/icon.interface.tsx

@@ -3,4 +3,5 @@ import { IconSizeEnum } from "./iconSize.enum";
 export interface IconInterface {
   classIcon: string;
   size?: IconSizeEnum;
+  onClick?: (e: React.MouseEvent) => void;
 }

package/src/index.css

@@ -1,9 +1,9 @@
 /* variables couleur */
 :root {
-  --primary-color: #123852;
-  --secondary-color: #EB5E3B;
-  --tertiary-color: #30B8C2;
-  --quaternary-color: #7dc2ef;
+  --primary-color: #004aad;
+  --secondary-color: #ff914d;
+  --tertiary-color: #00ada1;
+  --quaternary-color: #0082ad;
   --success-color: #28a745;
   --info-color: #17a2b8;
   --warning-color: #ec942c;
@@ -17,10 +17,7 @@
 html,
 body {
   margin: 0;
-  font-family: "Lexend", sans-serif;
-  font-optical-sizing: auto;
-  font-style: normal;
-  font-size: 18px;
+  font-family: "Raleway", sans-serif !important;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   height: 100%;
@@ -31,48 +28,38 @@ 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;
 }
@@ -323,83 +310,63 @@ 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;
 }
@@ -408,32 +375,25 @@ 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;
 }
@@ -442,41 +402,32 @@ 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%;
@@ -541,8 +492,11 @@ 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

@@ -19,11 +19,13 @@ export { useIsMobile } from "./_core/hooks/useIsMobile";
 export { useToken } from "./_core/hooks/useToken";
 export { useValidate } from "./_core/hooks/useValidate";
 export { WidgetSupport } from "./_core/hooks/widgetSupport";
+
 export { ButtonAction } from "./action/ButtonAction";
 export { Badge } from "./badge/Badge";
 export { Button } from "./button/Button";
 export { ButtonActions } from "./button/buttonActions/ButtonActions";
 export { ButtonFile } from "./button/buttonFile/ButtonFile";
+export { ButtonFilters } from "./button/buttonFilters/ButtonFilters";
 export { Card } from "./card/Card";
 export { Carousel } from "./carousel/Carousel";
 export { Damier } from "./damier/Damier";
@@ -33,7 +35,6 @@ 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,7 +22,6 @@ 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,13 +4,12 @@ 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={`expand ${props.active ? "expand--active" : ""} ${props.className || ""}`}
+      className={props.active ? "expand expand--active" : "expand"}
     >
       {props.item.children}
     </div>