neogestify-ui-components 2.2.1 → 2.3.0

package/dist/components/ElementLibraryBuilder/index.mjs

@@ -1,4 +1,4 @@
-import { forwardRef, useState, useEffect, useImperativeHandle, useMemo } from 'react';
+import { forwardRef, useState, useRef, useEffect, useImperativeHandle, useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/ElementLibraryBuilder/builder.tsx
@@ -36,56 +36,92 @@ function CloseIcon({ className }) {
     }
   ) });
 }
+function ChevronDownIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", className, fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M4.516 7.548c.436-.446 1.043-.481 1.576 0L8 9.747l1.908-2.199c.533-.481 1.14-.446 1.576 0 .436.445.408 1.197 0 1.615-.408.418-2.695 2.977-2.695 2.977-.27.282-.64.423-1.01.423s-.74-.14-1.01-.423c0 0-2.287-2.559-2.695-2.977-.408-.418-.436-1.17 0-1.615z" }) });
+}
+var BASE = "transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer inline-flex items-center gap-2";
+var SIZE_PAD = {
+  sm: "px-2.5 py-1.5 text-xs",
+  md: "px-3 py-2 text-sm",
+  lg: "px-4 py-2.5 text-base"
+};
+var SIZE_ICON_PAD = {
+  sm: "p-1.5",
+  md: "p-2",
+  lg: "p-2.5"
+};
+var SHAPE_CLASS = {
+  rounded: "rounded-md",
+  pill: "rounded-full",
+  square: "rounded-none"
+};
+var VARIANT_STYLE = {
+  primary: "border border-indigo-600/20 dark:border-indigo-500/20 font-medium 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: "font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-800 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: "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-800 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: "border border-red-600/20 dark:border-red-500/20 font-medium 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: "border border-green-600/20 dark:border-green-500/20 font-medium 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: "border border-gray-300 dark:border-gray-600 font-medium 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 px-4 py-2 text-sm font-medium 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 dark:hover:text-indigo-300 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 rounded-lg px-2",
+  warning: "border border-yellow-600/20 dark:border-yellow-500/20 font-medium 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: "font-medium 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",
+  ghost: "font-medium text-indigo-600 dark:text-indigo-400 bg-transparent border border-indigo-200 dark:border-indigo-800 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 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"
+};
 var Button = ({
   variant = "primary",
   children,
   isLoading = false,
   loadingText,
   isActive = false,
+  size = "md",
+  leftIcon,
+  rightIcon,
+  fullWidth = false,
+  shape,
   className = "",
   disabled,
   ...props
 }) => {
-  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 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 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 rounded-lg px-2",
-    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) {
-    classes += " bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600 text-white shadow-lg scale-105";
-  }
-  if (variant === "nav" && !isActive) {
-    classes += " hover:bg-white dark:hover:bg-gray-700 hover:shadow-lg";
+  const sizeCls = variant === "icon" ? SIZE_ICON_PAD[size] : variant === "nav" || variant === "link" || variant === "custom" ? "" : SIZE_PAD[size];
+  const defaultShape = variant === "icon" ? "pill" : "rounded";
+  const shapeCls = variant === "link" || variant === "custom" ? "" : SHAPE_CLASS[shape ?? defaultShape];
+  let stateCls = "";
+  if (variant === "nav") {
+    stateCls = isActive ? "bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600 text-white shadow-lg scale-105" : "hover:bg-white dark:hover:bg-gray-700";
   }
   if (variant === "toggle") {
-    if (isActive) {
-      classes += " bg-indigo-600 text-white border-indigo-600/30 dark:border-indigo-500/30 hover:bg-indigo-700";
-    } else {
-      classes += " bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 hover:border-gray-400 dark:hover:border-gray-500";
-    }
+    stateCls = isActive ? "bg-indigo-600 text-white border-indigo-600/30 dark:border-indigo-500/30 hover:bg-indigo-700" : "bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600";
   }
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      className: classes,
-      disabled: disabled || isLoading,
-      ...props,
-      children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(AnimateSpin, { className: "h-5 w-5 mr-2 inline-block text-current" }),
-        loadingText || "Cargando..."
-      ] }) : children
-    }
-  );
+  const classes = [
+    BASE,
+    VARIANT_STYLE[variant],
+    sizeCls,
+    shapeCls,
+    stateCls,
+    fullWidth ? "w-full justify-center" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("button", { className: classes, disabled: disabled || isLoading, ...props, children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AnimateSpin, { className: "h-4 w-4 shrink-0 text-current" }),
+    loadingText ?? "Cargando..."
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    leftIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: leftIcon }),
+    children,
+    rightIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: rightIcon })
+  ] }) });
+};
+var SIZE_CLASSES = {
+  sm: "px-2.5 py-1.5 text-xs",
+  md: "px-3 py-2 text-sm",
+  lg: "px-4 py-2.5 text-base"
+};
+var VARIANT_CLASSES = {
+  default: "border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800",
+  outline: "border-2 border-indigo-300 dark:border-indigo-600 bg-transparent",
+  filled: "border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700",
+  minimal: "border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent rounded-none focus:ring-0"
 };
 var Input = ({
   label,
@@ -93,34 +129,63 @@ var Input = ({
   helperText,
   icon,
   iconSide = "left",
+  variant = "default",
+  size = "md",
+  prefix,
+  suffix,
+  clearable = false,
+  onClear,
   className = "",
   id,
   type,
   ...props
 }) => {
   const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;
-  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 iconPaddingLeft = icon && iconSide === "left" ? "pl-9" : "";
-  const iconPaddingRight = icon && iconSide === "right" ? "pr-9" : "";
-  const classes = `${baseClasses} ${errorClasses} ${iconPaddingLeft} ${iconPaddingRight} ${className}`.trim();
-  const toggleShape = type === "radio" ? "rounded-full" : "rounded";
-  const toggleBaseClasses = `h-4 w-4 ${toggleShape} 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 toggleErrorClasses = error ? "border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400" : "";
-  const toggleClasses = `${toggleBaseClasses} ${toggleErrorClasses}`.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 errorCls = error ? "border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500" : "";
+  const showClear = clearable && !props.disabled && props.value !== void 0 && props.value !== "";
+  const hasRightSlot = icon && iconSide === "right" || showClear;
+  const baseCls = "appearance-none relative block w-full placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200";
+  const inputCls = [
+    baseCls,
+    SIZE_CLASSES[size],
+    VARIANT_CLASSES[variant],
+    errorCls,
+    icon && iconSide === "left" ? "pl-9" : "",
+    hasRightSlot ? "pr-9" : "",
+    prefix ? "rounded-l-none" : "",
+    suffix ? "rounded-r-none" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const toggleCls = [
+    `h-4 w-4 ${type === "radio" ? "rounded-full" : "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",
+    error ? "border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400" : ""
+  ].filter(Boolean).join(" ");
+  const fileCls = [
+    "block w-full 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",
+    SIZE_CLASSES[size],
+    error ? "border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-600",
+    className
+  ].filter(Boolean).join(" ");
   const hasHidden = Boolean(className && /\bhidden\b/.test(className));
-  const wrapperBase = "space-y-1 w-full";
-  const wrapperClasses = hasHidden ? `${wrapperBase} hidden` : wrapperBase;
-  const labelNode = label && (typeof label === "string" ? /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: label }) : label);
+  const wrapperCls = `space-y-1 w-full${hasHidden ? " hidden" : ""}`;
+  const labelNode = label && (typeof label === "string" ? /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+    label,
+    props.required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-red-500", "aria-hidden": "true", children: "*" })
+  ] }) : label);
   const errorNode = error && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600 dark:text-red-400", role: "alert", children: error });
   const helperNode = helperText && !error && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: helperText });
   if (type === "checkbox" || type === "radio") {
-    return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+    return /* @__PURE__ */ jsxs("div", { className: wrapperCls, children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsx("input", { id: inputId, type, className: toggleClasses, ...props }),
+        /* @__PURE__ */ jsx("input", { id: inputId, type, className: toggleCls, ...props }),
         labelNode
       ] }),
       errorNode,
@@ -128,63 +193,108 @@ var Input = ({
     ] });
   }
   if (type === "file") {
-    return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+    return /* @__PURE__ */ jsxs("div", { className: wrapperCls, children: [
       labelNode,
-      /* @__PURE__ */ jsx("input", { id: inputId, type: "file", className: fileClasses, ...props }),
+      /* @__PURE__ */ jsx("input", { id: inputId, type: "file", className: fileCls, ...props }),
       errorNode,
       helperNode
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+  const prefixBorderCls = error ? "border-red-300 dark:border-red-600" : "border-gray-300 dark:border-gray-600";
+  return /* @__PURE__ */ jsxs("div", { className: wrapperCls, children: [
     labelNode,
-    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      icon && iconSide === "left" && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center pl-3 text-gray-400 dark:text-gray-500", children: icon }),
-      /* @__PURE__ */ jsx("input", { id: inputId, className: classes, type, ...props }),
-      icon && iconSide === "right" && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 z-10 flex items-center pr-3 text-gray-400 dark:text-gray-500", children: icon })
+    /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+      prefix && /* @__PURE__ */ jsx("span", { className: `inline-flex shrink-0 items-center px-3 border border-r-0 ${prefixBorderCls} bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400 rounded-l-md text-sm`, children: prefix }),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+        icon && iconSide === "left" && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center pl-3 text-gray-400 dark:text-gray-500", children: icon }),
+        /* @__PURE__ */ jsx("input", { id: inputId, className: inputCls, type, ...props }),
+        icon && iconSide === "right" && !showClear && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 z-10 flex items-center pr-3 text-gray-400 dark:text-gray-500", children: icon }),
+        showClear && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClear,
+            tabIndex: -1,
+            "aria-label": "Limpiar",
+            className: "absolute inset-y-0 right-0 z-10 flex items-center pr-3 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300",
+            children: /* @__PURE__ */ jsx(CloseIcon, { className: "w-4 h-4" })
+          }
+        )
+      ] }),
+      suffix && /* @__PURE__ */ jsx("span", { className: `inline-flex shrink-0 items-center px-3 border border-l-0 ${prefixBorderCls} bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400 rounded-r-md text-sm`, children: suffix })
     ] }),
     errorNode,
     helperNode
   ] });
 };
+var SIZE_CLASSES2 = {
+  small: "px-2 py-1 text-xs",
+  medium: "px-3 py-2 text-sm",
+  large: "px-4 py-3 text-base"
+};
+var VARIANT_CLASSES2 = {
+  default: "border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800",
+  outline: "border-2 border-indigo-300 dark:border-indigo-600 bg-transparent",
+  filled: "border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700",
+  minimal: "border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent rounded-none focus:ring-0"
+};
+var RESIZE_CLASSES = {
+  vertical: "resize-y",
+  horizontal: "resize-x",
+  both: "resize",
+  none: "resize-none"
+};
 var TextArea = ({
   label,
   error,
   helperText,
   variant = "default",
   size = "medium",
+  autoResize = false,
+  showCount = false,
+  resize = "vertical",
   className = "",
   id,
+  onInput: propsOnInput,
   ...props
 }) => {
   const textAreaId = id || `textarea-${Math.random().toString(36).substring(2, 9)}`;
-  const sizeClasses = {
-    small: "px-2 py-1 text-xs",
-    medium: "px-3 py-2 text-sm",
-    large: "px-4 py-3 text-base"
+  const textareaRef = useRef(null);
+  const adjustHeight = () => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
   };
-  const variantClasses = {
-    default: "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800",
-    outline: "border-2 border-indigo-300 dark:border-indigo-600 bg-transparent",
-    filled: "border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700",
-    minimal: "border-0 bg-transparent focus:ring-0 focus:border-0"
+  useEffect(() => {
+    if (autoResize) adjustHeight();
+  }, [autoResize, props.value]);
+  const handleInput = (e) => {
+    if (autoResize) adjustHeight();
+    propsOnInput?.(e);
   };
-  const baseClasses = "appearance-none relative block w-full placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-md border focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 resize-y";
-  const errorClasses = error ? "border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500" : "";
-  const classes = `${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${errorClasses} ${className}`;
+  const baseCls = "appearance-none relative block w-full placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-md border focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200";
+  const errorCls = error ? "border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500" : "";
+  const resizeCls = autoResize ? "resize-none overflow-hidden" : RESIZE_CLASSES[resize];
+  const classes = [baseCls, SIZE_CLASSES2[size], VARIANT_CLASSES2[variant], errorCls, resizeCls, className].filter(Boolean).join(" ");
+  const maxLength = typeof props.maxLength === "number" ? props.maxLength : void 0;
+  const currentLength = typeof props.value === "string" ? props.value.length : typeof props.value === "number" ? String(props.value).length : 0;
+  const overLimit = maxLength !== void 0 && currentLength > maxLength;
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1 w-full", children: [
-    label && typeof label === "string" ? /* @__PURE__ */ jsx(
-      "label",
-      {
-        htmlFor: textAreaId,
-        className: "block text-sm font-medium text-gray-700 dark:text-gray-300",
-        children: label
-      }
-    ) : label,
+    (label || showCount) && /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: label && (typeof label === "string" ? /* @__PURE__ */ jsxs("label", { htmlFor: textAreaId, className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+        label,
+        props.required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-red-500", "aria-hidden": "true", children: "*" })
+      ] }) : label) }),
+      showCount && /* @__PURE__ */ jsx("span", { className: `text-xs shrink-0 tabular-nums ${overLimit ? "text-red-500" : "text-gray-400 dark:text-gray-500"}`, children: maxLength ? `${currentLength} / ${maxLength}` : currentLength })
+    ] }),
     /* @__PURE__ */ jsx(
       "textarea",
       {
+        ref: textareaRef,
         id: textAreaId,
         className: classes,
+        onInput: handleInput,
         ...props
       }
     ),
@@ -192,84 +302,153 @@ var TextArea = ({
     helperText && !error && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: helperText })
   ] });
 };
+var SIZE_CLASSES3 = {
+  sm: "py-1.5 text-xs",
+  md: "py-2 text-sm",
+  lg: "py-2.5 text-base"
+};
+var VARIANT_CLASSES3 = {
+  default: "border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800",
+  outline: "border-2 border-indigo-300 dark:border-indigo-600 bg-transparent",
+  filled: "border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700",
+  minimal: "border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent rounded-none focus:ring-0",
+  custom: ""
+};
 var Select = ({
   options,
   placeholder,
   variant = "default",
+  size = "md",
   error = false,
   helperText,
   label,
+  icon,
   className = "",
   id,
   ...props
 }) => {
   const selectId = id || `select-${Math.random().toString(36).substring(2, 9)}`;
-  const getVariantClasses = () => {
-    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";
-    if (variant === "small") {
-      return `${baseClasses.replace("px-3 py-2", "px-2.5 py-1.5 text-sm")} border-gray-300 dark:border-gray-600`;
-    }
-    return `${baseClasses} border-gray-300 dark:border-gray-600 ${error ? "border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500" : ""}`;
-  };
-  const getOptionClasses = (option) => {
-    return `bg-white dark:bg-gray-800 text-gray-900 dark:text-white py-2 ${option.disabled ? "opacity-50 cursor-not-allowed" : ""}`;
-  };
-  const combinedClassName = `${getVariantClasses()} ${className}`.trim();
+  const effectiveSize = variant === "small" ? "sm" : size;
+  const effectiveVariant = variant === "small" ? "default" : variant;
+  const hasError = Boolean(error);
+  const errorMsg = typeof error === "string" ? error : "";
+  const computedDefaultValue = props.value === void 0 && props.defaultValue === void 0 ? options.find((o) => o.selected)?.value?.toString() : void 0;
+  const baseCls = "appearance-none relative block w-full pl-3 pr-9 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200";
+  const errorCls = hasError ? "border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500" : "";
+  const selectCls = [
+    baseCls,
+    SIZE_CLASSES3[effectiveSize],
+    VARIANT_CLASSES3[effectiveVariant],
+    errorCls,
+    icon ? "pl-9" : "",
+    className
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1 w-full", children: [
-    label && typeof label === "string" ? /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: label }) : label,
-    /* @__PURE__ */ jsxs("select", { id: selectId, className: combinedClassName, ...props, children: [
-      placeholder && placeholder.trim() && /* @__PURE__ */ jsx("option", { value: "", disabled: true, selected: true, className: "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 py-2", children: placeholder }),
-      options.map((option) => /* @__PURE__ */ jsx(
-        "option",
+    label && (typeof label === "string" ? /* @__PURE__ */ jsxs("label", { htmlFor: selectId, className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+      label,
+      props.required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-red-500", "aria-hidden": "true", children: "*" })
+    ] }) : label),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      icon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center pl-3 text-gray-400 dark:text-gray-500", children: icon }),
+      /* @__PURE__ */ jsxs(
+        "select",
         {
-          value: option.value,
-          disabled: option.disabled,
-          selected: option.selected,
-          className: getOptionClasses(option),
-          children: option.label
-        },
-        option.value
-      ))
+          id: selectId,
+          className: selectCls,
+          defaultValue: computedDefaultValue,
+          ...props,
+          children: [
+            placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, className: "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400", children: placeholder }),
+            options.map((option) => /* @__PURE__ */ jsx(
+              "option",
+              {
+                value: option.value,
+                disabled: option.disabled,
+                className: `bg-white dark:bg-gray-800 text-gray-900 dark:text-white${option.disabled ? " opacity-50" : ""}`,
+                children: option.label
+              },
+              option.value
+            ))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2.5 text-gray-400 dark:text-gray-500", children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-4 h-4" }) })
     ] }),
-    helperText && /* @__PURE__ */ jsx("p", { className: `text-sm ${error ? "text-red-600 dark:text-red-400" : "text-gray-500 dark:text-gray-400"}`, children: helperText })
+    errorMsg && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600 dark:text-red-400", role: "alert", children: errorMsg }),
+    helperText && !errorMsg && /* @__PURE__ */ jsx("p", { className: `text-sm ${hasError ? "text-red-600 dark:text-red-400" : "text-gray-500 dark:text-gray-400"}`, children: helperText })
   ] });
 };
+var SIZE_CLASS = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  full: "max-w-[95vw] w-[95vw]"
+};
+var VARIANT_HEADER = {
+  default: "bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700",
+  danger: "bg-red-50 dark:bg-red-900/30 border-b border-red-200 dark:border-red-800",
+  success: "bg-green-50 dark:bg-green-900/30 border-b border-green-200 dark:border-green-800",
+  warning: "bg-yellow-50 dark:bg-yellow-900/30 border-b border-yellow-200 dark:border-yellow-800"
+};
+var VARIANT_TITLE = {
+  default: "text-gray-900 dark:text-white",
+  danger: "text-red-700 dark:text-red-300",
+  success: "text-green-700 dark:text-green-300",
+  warning: "text-yellow-700 dark:text-yellow-300"
+};
 var Modal = forwardRef(({
   onClose,
   title,
   children,
   footer,
-  maxWidth = "max-w-2xl",
+  maxWidth,
+  size,
   showCloseButton = true,
-  zIndex = 50
+  zIndex = 50,
+  closeOnBackdrop = false,
+  closeOnEsc = false,
+  variant = "default"
 }, ref) => {
   const [show, setShow] = useState(false);
+  const handleCloseRef = useRef(() => {
+  });
+  const handleClose = () => {
+    setShow(false);
+    setTimeout(() => onClose(), 300);
+  };
+  handleCloseRef.current = handleClose;
   useEffect(() => {
     setShow(true);
   }, []);
-  const handleClose = () => {
-    setShow(false);
-    setTimeout(() => {
-      onClose();
-    }, 300);
+  useEffect(() => {
+    if (!closeOnEsc) return;
+    const handler = (e) => {
+      if (e.key === "Escape") handleCloseRef.current();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [closeOnEsc]);
+  useImperativeHandle(ref, () => ({ handleClose }));
+  const widthCls = size ? SIZE_CLASS[size] : maxWidth ?? "max-w-2xl";
+  const handleBackdropClick = (e) => {
+    if (closeOnBackdrop && e.target === e.currentTarget) handleClose();
   };
-  useImperativeHandle(ref, () => ({
-    handleClose
-  }));
   return /* @__PURE__ */ jsx(
     "dialog",
     {
       open: show,
-      className: `fixed inset-0 w-full h-full flex items-center justify-center p-4 ${show && "opacity-100"} transition-opacity opacity-0 duration-300 bg-gray-900/60 backdrop-blur-sm`,
+      className: `fixed inset-0 w-full h-full flex items-center justify-center p-4 transition-opacity duration-300 bg-gray-900/60 backdrop-blur-sm ${show ? "opacity-100" : "opacity-0"}`,
       style: { zIndex: zIndex - 10 },
+      onClick: handleBackdropClick,
       children: /* @__PURE__ */ jsxs(
         "article",
         {
-          className: `relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-2xl w-full ${maxWidth} max-h-[90vh] flex flex-col overflow-hidden`,
+          className: `relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-2xl w-full ${widthCls} max-h-[90vh] flex flex-col overflow-hidden`,
           style: { zIndex },
           children: [
-            /* @__PURE__ */ jsxs("header", { className: "shrink-0 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4 flex items-center justify-between", children: [
-              /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: title }),
+            /* @__PURE__ */ jsxs("header", { className: `shrink-0 px-6 py-4 flex items-center justify-between ${VARIANT_HEADER[variant]}`, children: [
+              /* @__PURE__ */ jsx("h2", { className: `text-2xl font-bold ${VARIANT_TITLE[variant]}`, children: title }),
               showCloseButton && /* @__PURE__ */ jsx(
                 Button,
                 {