added neumorphism button card sidebar and created styles folder

src/components/ui/Input.tsx

@@ -1,17 +1,13 @@
 import React, { forwardRef, useId } from 'react';
 import { cn } from '@/utils/utils';
+import { NEUMORPHISM } from '@/styles/Neumorphism';
 
-const sizeStyles = {
-  sm: "px-3 py-1.5 text-xs",
-  md: "px-4 py-2.5 text-sm",
-};
-
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
   label?: string;
   error?: string;
-  sizeVariant?: keyof typeof sizeStyles; // Gestion de la taille
-  leftIcon?: React.ReactNode;          // Icône optionnelle intégrée à gauche
-  rightIcon?: React.ReactNode;         // Icône optionnelle intégrée à droite
+  size?: keyof typeof NEUMORPHISM.sizeStyles;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
@@ -20,39 +16,63 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     label, 
     error, 
     id, 
-    sizeVariant = 'md', 
+    size = 'md', 
     leftIcon, 
     rightIcon, 
+    required,
+    disabled,
     ...props 
   }, ref) => {
     const autoId = useId();
     const inputId = id || autoId;
 
     return (
-      <div className="w-full">
+      <div className="w-full flex flex-col gap-1.5">
+        {/* Label */}
         {label && (
-          <label htmlFor={inputId} className="block text-sm font-medium text-slate-700 mb-1.5">
-            {label} {props.required && <span className="text-blue-900 font-bold">*</span>}
+          <label 
+            htmlFor={inputId} 
+            className="block text-sm font-bold text-slate-700 dark:text-slate-300"
+          >
+            {label} {required && <span className="text-rose-500 font-bold">*</span>}
           </label>
         )}
         
         <div className="relative flex items-center w-full">
           {/* Icône à gauche */}
           {leftIcon && (
-            <span className="absolute left-3 text-slate-400 pointer-events-none flex items-center">
+            <span className="absolute left-4 text-slate-400 dark:text-slate-500 pointer-events-none flex items-center justify-center">
               {leftIcon}
             </span>
           )}
 
+          {/* Champ HTML avec les ombres creusées centralisées */}
           <input
             id={inputId}
             ref={ref}
+            disabled={disabled}
             className={cn(
-              "flex w-full rounded-lg border border-slate-300 bg-white text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-900 focus:border-blue-900 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500 shadow-sm transition-colors",
-              sizeStyles[sizeVariant],
-              leftIcon && "pl-9",  // Décale le texte à droite si icône gauche
-              rightIcon && "pr-9", // Décale le texte à gauche si icône droite
-              error && "border-red-500 focus:ring-red-500 focus:border-red-500",
+              // Base & Couleurs de fond
+              "w-full transition-all duration-300 ease-in-out outline-none border border-transparent",
+              "bg-[#e8e8e8] dark:bg-[#1e293b]",
+              "text-slate-800 dark:text-slate-100 font-medium placeholder:text-slate-400 dark:placeholder:text-slate-500",
+              
+              // 🎯 Utilisation directe de tes constantes Neumorphic creusées
+              NEUMORPHISM.insetLight,
+              NEUMORPHISM.insetDark,
+
+              // Focus & État désactivé
+              "focus:border-blue-500/40 dark:focus:border-blue-400/40",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+
+              // Tailles & Marges d'icônes
+              NEUMORPHISM.sizeStyles[size],
+              leftIcon && "pl-11",
+              rightIcon && "pr-11",
+
+              // Style en cas d'erreur
+              error && "border-rose-500 focus:border-rose-500 text-rose-600 dark:text-rose-400",
+              
               className
             )}
             {...props}
@@ -60,13 +80,16 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
 
           {/* Icône à droite */}
           {rightIcon && (
-            <span className="absolute right-3 text-slate-400 pointer-events-none flex items-center">
+            <span className="absolute right-4 text-slate-400 dark:text-slate-500 pointer-events-none flex items-center justify-center">
               {rightIcon}
             </span>
           )}
         </div>
 
-        {error && <p className="mt-1.5 text-xs font-medium text-red-500">{error}</p>}
+        {/* Message d'erreur */}
+        {error && (
+          <p className="text-xs font-semibold text-rose-500 dark:text-rose-400">{error}</p>
+        )}
       </div>
     );
   }