neogestify-ui-components 1.2.16 → 1.2.18

package/dist/index.mjs

@@ -366,17 +366,17 @@ var Button = ({
 }) => {
   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}`;
   if (variant === "nav" && isActive) {
@@ -418,15 +418,24 @@ var 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}`;
+  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();
+  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 /* @__PURE__ */ jsxs("div", { className: "space-y-1 w-full", children: [
+    return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
             id: inputId,
             type: "checkbox",
-            className: "h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded",
+            className: checkboxClasses,
             ...props
           }
         ),
@@ -444,7 +453,7 @@ var Input = ({
     ] });
   }
   if (type === "file") {
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-1 w-full", children: [
+    return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
       label && typeof label === "string" ? /* @__PURE__ */ jsx(
         "label",
         {
@@ -458,7 +467,7 @@ var 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
         }
       ),
@@ -466,7 +475,7 @@ var Input = ({
       helperText && !error && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: helperText })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-1 w-full", children: [
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
     label && typeof label === "string" ? /* @__PURE__ */ jsx(
       "label",
       {