neogestify-ui-components 1.2.16 → 1.2.18

package/src/components/html/Button.tsx

@@ -22,17 +22,17 @@ export const Button: FC<ButtonProps> = ({
   const baseClasses = 'transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer';
 
   const variantClasses = {
-    primary: 'py-2 px-2 border border-indigo-600/20 dark:border-indigo-500/20 text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 hover:dark:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:dark:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 focus:dark:ring-offset-gray-900',
-    secondary: 'p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 hover:dark:text-white hover:bg-gray-200 hover:dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:dark:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 focus:dark:ring-offset-gray-900',
-    icon: 'p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 hover:dark:text-white hover:bg-gray-200 hover:dark:bg-gray-800 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:dark:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 focus:dark:ring-offset-gray-900',
-    danger: 'py-2 px-2 border border-red-600/20 dark:border-red-500/20 text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 dark:bg-red-500 hover:dark:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:dark:ring-red-400 focus:ring-offset-2 focus:ring-offset-gray-50 focus:dark:ring-offset-gray-900',
-    success: 'py-2 px-2 border border-green-600/20 dark:border-green-500/20 text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 dark:bg-green-500 hover:dark:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:dark:ring-green-400 focus:ring-offset-2 focus:ring-offset-gray-50 focus:dark:ring-offset-gray-900',
-    outline: 'py-2 px-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-transparent hover:bg-gray-100 hover:dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:dark:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 focus:dark:ring-offset-gray-900',
-    nav: 'w-full flex items-center px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 hover:scale-105 text-gray-700 dark:text-gray-300 hover:dark:text-white hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:dark:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 focus:dark:ring-offset-gray-900',
+    primary: 'py-2 px-2 border border-indigo-600/20 dark:border-indigo-500/20 text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    secondary: 'p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    icon: 'p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    danger: 'py-2 px-2 border border-red-600/20 dark:border-red-500/20 text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    success: 'py-2 px-2 border border-green-600/20 dark:border-green-500/20 text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    outline: 'py-2 px-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    nav: 'w-full flex items-center px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 hover:scale-105 text-gray-700 dark:text-gray-300 dark:hover:text-white hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
     custom: "",
-    link: 'text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 hover:dark:text-indigo-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:dark:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 focus:dark:ring-offset-gray-900',
-    warning: 'py-2 px-2 border border-yellow-600/20 dark:border-yellow-500/20 text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 dark:bg-yellow-500 hover:dark:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:dark:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-gray-50 focus:dark:ring-offset-gray-900',
-    toggle: 'px-2 py-2 rounded-lg font-medium transition-all duration-200 disabled:cursor-not-allowed border-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 focus:dark:ring-offset-gray-900'
+    link: 'text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    warning: 'py-2 px-2 border border-yellow-600/20 dark:border-yellow-500/20 text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 dark:bg-yellow-500 dark:hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    toggle: 'px-2 py-2 rounded-lg font-medium transition-all duration-200 disabled:cursor-not-allowed border-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900'
   };
 
   let classes = `${baseClasses} ${variantClasses[variant]} ${className}`;

package/src/components/html/Input.tsx

@@ -17,20 +17,33 @@ export const Input: FC<InputProps> = ({
 }) => {
   const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;
 
+  // ── Default text input ────────────────────────────────────────────────────
   const baseClasses = 'appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-800 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 focus:z-10 sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200';
-
   const errorClasses = error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500' : 'border-gray-300 dark:border-gray-600';
-
   const classes = `${baseClasses} ${errorClasses} ${className}`;
 
+  // ── Checkbox ──────────────────────────────────────────────────────────────
+  const checkboxBaseClasses = 'h-4 w-4 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-indigo-600 dark:text-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 cursor-pointer';
+  const checkboxErrorClasses = error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400' : '';
+  const checkboxClasses = `${checkboxBaseClasses} ${checkboxErrorClasses}`.trim();
+
+  // ── File input ────────────────────────────────────────────────────────────
+  const fileBaseClasses = 'block w-full sm:text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 dark:file:bg-indigo-900/50 dark:file:text-indigo-300 hover:file:bg-indigo-100 dark:hover:file:bg-indigo-800/50 file:transition-colors file:duration-200 file:cursor-pointer';
+  const fileErrorClasses = error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400' : 'border-gray-300 dark:border-gray-600';
+  const fileClasses = `${fileBaseClasses} ${fileErrorClasses} ${className}`.trim();
+
+  const hasHidden = Boolean(className && /\bhidden\b/.test(className));
+  const wrapperBase = 'space-y-1 w-full';
+  const wrapperClasses = hasHidden ? `${wrapperBase} hidden` : wrapperBase;
+
   if (type === 'checkbox') {
     return (
-      <div className="space-y-1 w-full">
+      <div className={wrapperClasses}>
         <div className="flex items-center space-x-2">
           <input
             id={inputId}
             type="checkbox"
-            className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
+            className={checkboxClasses}
             {...props}
           />
           {label && typeof label === 'string' ? (
@@ -60,7 +73,7 @@ export const Input: FC<InputProps> = ({
 
   if (type === 'file') {
     return (
-      <div className="space-y-1 w-full">
+      <div className={wrapperClasses}>
         {label && typeof label === 'string' ? (
           <label
             htmlFor={inputId}
@@ -74,7 +87,7 @@ export const Input: FC<InputProps> = ({
         <input
           id={inputId}
           type="file"
-          className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 dark:file:bg-indigo-900 dark:file:text-indigo-300 dark:hover:file:bg-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
+          className={fileClasses}
           {...props}
         />
         {error && (
@@ -92,7 +105,7 @@ export const Input: FC<InputProps> = ({
   }
 
   return (
-    <div className="space-y-1 w-full">
+    <div className={wrapperClasses}>
       {label && typeof label === 'string' ? (
         <label
           htmlFor={inputId}