neogestify-ui-components 2.2.2 → 2.3.1

package/dist/components/html/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
+import { forwardRef, useState, useRef, useEffect, useImperativeHandle } from 'react';
 
 // src/components/icons/icons.tsx
 function AnimateSpin({ className }) {
@@ -36,56 +36,101 @@ 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" }) });
+}
+function SortAscIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", className, fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M6 2.5l4 5H2l4-5z" }) });
+}
+function SortDescIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", className, fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M6 9.5L2 4.5h8L6 9.5z" }) });
+}
+function SortBothIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", className, fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M6 1.5l3 3.5H3L6 1.5zm0 9l-3-3.5h6L6 10.5z" }) });
+}
+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 +138,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 +202,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,80 +311,125 @@ var TextArea = ({
     helperText && !error && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: helperText })
   ] });
 };
-var Form = ({ onSubmit, children, variant = "default", className = "", ...props }) => {
+var Form = ({
+  onSubmit,
+  children,
+  variant = "default",
+  columns,
+  className = "",
+  style,
+  ...props
+}) => {
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (onSubmit) {
-      onSubmit(e);
-    }
+    onSubmit?.(e);
   };
+  const hasGrid = columns !== void 0 && columns > 1;
   const getVariantClasses = () => {
     switch (variant) {
       case "modal":
         return "flex-1 px-6 py-4 overflow-y-auto";
       case "card":
-        return "p-6 space-y-6";
+        return `bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm p-6${hasGrid ? "" : " space-y-6"}`;
       case "inline":
-        return "flex flex-wrap gap-4 items-end";
+        return hasGrid ? "" : "flex flex-wrap gap-4 items-end";
       case "compact":
-        return "space-y-3";
+        return hasGrid ? "" : "space-y-3";
       case "default":
       default:
-        return "space-y-4";
+        return hasGrid ? "" : "space-y-4";
     }
   };
-  const combinedClassName = `${getVariantClasses()} ${className}`.trim();
-  return /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: combinedClassName, ...props, children });
+  const gridStyle = hasGrid ? { display: "grid", gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, gap: "1rem" } : {};
+  const combinedClassName = [getVariantClasses(), className].filter(Boolean).join(" ");
+  const combinedStyle = { ...gridStyle, ...style };
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: combinedClassName,
+      style: Object.keys(combinedStyle).length > 0 ? combinedStyle : void 0,
+      ...props,
+      children
+    }
+  );
+};
+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 })
   ] });
 };
-function isColumnDef(col) {
-  return typeof col === "object" && col !== null && "header" in col;
-}
-function resolveColumn(col) {
-  if (isColumnDef(col)) return col;
-  return { header: col };
-}
 var ALIGN_CLASS = {
   left: "text-left",
   center: "text-center",
@@ -286,6 +450,10 @@ var VARIANT_TABLE = {
   striped: "w-full min-w-full table-auto",
   bordered: "w-full min-w-full table-auto border border-gray-300 dark:border-gray-600",
   minimal: "w-full min-w-full table-auto",
+  ghost: "w-full min-w-full table-auto",
+  card: "w-full min-w-full table-auto",
+  accent: "w-full min-w-full table-auto",
+  dark: "w-full min-w-full table-auto",
   custom: "w-full min-w-full table-auto"
 };
 var VARIANT_THEAD = {
@@ -293,6 +461,10 @@ var VARIANT_THEAD = {
   striped: "bg-gray-100 dark:bg-gray-700",
   bordered: "bg-gray-100 dark:bg-gray-700",
   minimal: "",
+  ghost: "",
+  card: "bg-gray-50 dark:bg-gray-800/80",
+  accent: "bg-blue-600 dark:bg-blue-700",
+  dark: "bg-gray-800 dark:bg-gray-900",
   custom: ""
 };
 var VARIANT_TH = {
@@ -300,13 +472,43 @@ var VARIANT_TH = {
   striped: "font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-300",
   bordered: "font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600",
   minimal: "font-semibold text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700",
+  ghost: "font-semibold text-gray-600 dark:text-gray-400 border-b-2 border-gray-300 dark:border-gray-600",
+  card: "font-semibold text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700",
+  accent: "font-semibold uppercase tracking-wider text-white",
+  dark: "font-semibold uppercase tracking-wider text-gray-100",
+  custom: ""
+};
+var VARIANT_TR_BASE = {
+  default: "bg-white dark:bg-gray-800",
+  striped: "",
+  bordered: "bg-white dark:bg-gray-800",
+  minimal: "",
+  ghost: "",
+  card: "bg-white dark:bg-gray-900",
+  accent: "bg-white dark:bg-gray-800",
+  dark: "bg-white dark:bg-gray-800",
+  custom: ""
+};
+var VARIANT_TR_HOVER = {
+  default: "hover:bg-gray-50 dark:hover:bg-gray-700/60",
+  striped: "hover:bg-blue-50 dark:hover:bg-blue-900/20",
+  bordered: "hover:bg-gray-50 dark:hover:bg-gray-700/60",
+  minimal: "hover:bg-gray-50 dark:hover:bg-gray-800/60",
+  ghost: "hover:bg-gray-50/70 dark:hover:bg-white/5",
+  card: "hover:bg-gray-50 dark:hover:bg-gray-800/50",
+  accent: "hover:bg-blue-50 dark:hover:bg-blue-900/20",
+  dark: "hover:bg-gray-50 dark:hover:bg-gray-700/60",
   custom: ""
 };
-var VARIANT_TR = {
-  default: () => "bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/60 transition-colors",
-  striped: (i) => `${i % 2 === 0 ? "bg-white dark:bg-gray-800" : "bg-gray-50 dark:bg-gray-700/40"} hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors`,
-  bordered: () => "bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/60 transition-colors",
-  minimal: () => "hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors",
+var VARIANT_TR_STRIPE = {
+  default: () => "",
+  striped: (i) => i % 2 === 0 ? "bg-white dark:bg-gray-800" : "bg-gray-50 dark:bg-gray-700/40",
+  bordered: () => "",
+  minimal: () => "",
+  ghost: () => "",
+  card: () => "",
+  accent: () => "",
+  dark: () => "",
   custom: () => ""
 };
 var VARIANT_TD = {
@@ -314,6 +516,10 @@ var VARIANT_TD = {
   striped: "text-gray-700 dark:text-gray-300",
   bordered: "text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700",
   minimal: "text-gray-700 dark:text-gray-300 border-b border-gray-100 dark:border-gray-800",
+  ghost: "text-gray-700 dark:text-gray-300",
+  card: "text-gray-700 dark:text-gray-300",
+  accent: "text-gray-700 dark:text-gray-300",
+  dark: "text-gray-700 dark:text-gray-300",
   custom: ""
 };
 var VARIANT_TBODY_DIVIDER = {
@@ -321,8 +527,33 @@ var VARIANT_TBODY_DIVIDER = {
   striped: "",
   bordered: "",
   minimal: "",
+  ghost: "divide-y divide-gray-200 dark:divide-gray-700",
+  card: "divide-y divide-gray-100 dark:divide-gray-800",
+  accent: "divide-y divide-gray-200 dark:divide-gray-700",
+  dark: "divide-y divide-gray-200 dark:divide-gray-700",
   custom: ""
 };
+function SortIcon({ direction }) {
+  if (direction === "asc") return /* @__PURE__ */ jsx(SortAscIcon, { className: "inline-block ml-1 w-3 h-3 shrink-0" });
+  if (direction === "desc") return /* @__PURE__ */ jsx(SortDescIcon, { className: "inline-block ml-1 w-3 h-3 shrink-0" });
+  return /* @__PURE__ */ jsx(SortBothIcon, { className: "inline-block ml-1 w-3 h-3 shrink-0 opacity-40" });
+}
+function SkeletonRow({ colCount, size }) {
+  return /* @__PURE__ */ jsx("tr", { children: Array.from({ length: colCount }).map((_, i) => /* @__PURE__ */ jsx("td", { className: SIZE_TD[size], children: /* @__PURE__ */ jsx("div", { className: "h-4 rounded bg-gray-200 dark:bg-gray-700 animate-pulse" }) }, i)) });
+}
+function isColumnDef(col) {
+  return typeof col === "object" && col !== null && "header" in col;
+}
+function resolveColumn(col) {
+  if (isColumnDef(col)) return col;
+  return { header: col };
+}
+function colSizeStyle(col) {
+  const s = {};
+  if (col.width !== void 0) s.width = col.width;
+  if (col.minWidth !== void 0) s.minWidth = col.minWidth;
+  return s;
+}
 function Table({
   columns,
   rows,
@@ -336,46 +567,84 @@ function Table({
   emptyState,
   onRowClick,
   hideHeader = false,
-  style
+  style,
+  stickyHeader = false,
+  caption,
+  footerRows,
+  loading = false,
+  loadingRows = 4,
+  getRowStyle,
+  rounded = false,
+  shadow = false,
+  hoverable = true,
+  sortState,
+  onSort
 }) {
   const cols = columns.map(resolveColumn);
   const resolvedTrClass = (i) => {
-    const variantCls = VARIANT_TR[variant](i);
+    const stripeCls = VARIANT_TR_STRIPE[variant](i);
+    const baseCls = stripeCls || VARIANT_TR_BASE[variant];
+    const hoverCls = hoverable ? `${VARIANT_TR_HOVER[variant]} transition-colors` : "";
     const clickCls = onRowClick ? "cursor-pointer" : "";
     const customCls = typeof trClassName === "function" ? trClassName(i) : trClassName ?? "";
-    return `${variantCls} ${clickCls} ${customCls}`.trim();
+    return [baseCls, hoverCls, clickCls, customCls].filter(Boolean).join(" ");
   };
-  return /* @__PURE__ */ jsx("div", { className: `overflow-x-auto w-full ${className}`.trim(), children: /* @__PURE__ */ jsxs(
+  const wrapperCls = [
+    "overflow-x-auto w-full",
+    rounded ? "rounded-lg overflow-hidden" : "",
+    shadow ? "shadow-md" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const theadCls = [
+    VARIANT_THEAD[variant],
+    stickyHeader ? "sticky top-0 z-20" : ""
+  ].filter(Boolean).join(" ");
+  const stickyColCls = "sticky left-0 z-10 bg-inherit";
+  return /* @__PURE__ */ jsx("div", { className: wrapperCls, children: /* @__PURE__ */ jsxs(
     "table",
     {
       className: `${VARIANT_TABLE[variant]} ${tableClassName}`.trim(),
       style,
       children: [
-        !hideHeader && /* @__PURE__ */ jsx("thead", { className: VARIANT_THEAD[variant], children: /* @__PURE__ */ jsx("tr", { children: cols.map((col, i) => /* @__PURE__ */ jsx(
-          "th",
-          {
-            className: [
-              SIZE_TH[size],
-              VARIANT_TH[variant],
-              ALIGN_CLASS[col.align ?? "left"],
-              col.className ?? "",
-              thClassName
-            ].filter(Boolean).join(" "),
-            children: col.header
-          },
-          i
-        )) }) }),
-        /* @__PURE__ */ jsx("tbody", { className: VARIANT_TBODY_DIVIDER[variant], children: rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        caption && /* @__PURE__ */ jsx("caption", { className: "mb-2 text-left text-sm text-gray-500 dark:text-gray-400", children: caption }),
+        !hideHeader && /* @__PURE__ */ jsx("thead", { className: theadCls, children: /* @__PURE__ */ jsx("tr", { children: cols.map((col, i) => {
+          const isSortable = col.sortable && col.key;
+          const activeSort = sortState && col.key && sortState.key === col.key ? sortState.direction : null;
+          return /* @__PURE__ */ jsxs(
+            "th",
+            {
+              scope: "col",
+              className: [
+                SIZE_TH[size],
+                VARIANT_TH[variant],
+                ALIGN_CLASS[col.align ?? "left"],
+                col.className ?? "",
+                thClassName,
+                col.sticky ? stickyColCls : "",
+                isSortable ? "cursor-pointer select-none" : ""
+              ].filter(Boolean).join(" "),
+              style: { ...colSizeStyle(col), ...col.thStyle ?? {} },
+              onClick: isSortable ? () => onSort?.(col.key) : void 0,
+              children: [
+                col.header,
+                isSortable && /* @__PURE__ */ jsx(SortIcon, { direction: activeSort })
+              ]
+            },
+            i
+          );
+        }) }) }),
+        /* @__PURE__ */ jsx("tbody", { className: VARIANT_TBODY_DIVIDER[variant], children: loading ? Array.from({ length: loadingRows }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, { colCount: cols.length, size }, i)) : rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
           "td",
           {
             colSpan: cols.length,
-            className: `${SIZE_TD[size]} text-center text-gray-400 dark:text-gray-500 py-8`,
+            className: `${SIZE_TD[size]} py-8 text-center text-gray-400 dark:text-gray-500`,
             children: emptyState ?? "Sin datos"
           }
         ) }) : rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
           "tr",
           {
             className: resolvedTrClass(rowIndex),
+            style: getRowStyle?.(rowIndex),
             onClick: onRowClick ? () => onRowClick(rowIndex) : void 0,
             children: row.map((cell, cellIndex) => {
               const col = cols[cellIndex];
@@ -387,8 +656,13 @@ function Table({
                     VARIANT_TD[variant],
                     ALIGN_CLASS[col?.align ?? "left"],
                     col?.className ?? "",
-                    tdClassName
+                    tdClassName,
+                    col?.sticky ? stickyColCls : ""
                   ].filter(Boolean).join(" "),
+                  style: {
+                    ...col ? colSizeStyle(col) : {},
+                    ...col?.tdStyle ?? {}
+                  },
                   children: cell
                 },
                 cellIndex
@@ -396,47 +670,100 @@ function Table({
             })
           },
           rowIndex
-        )) })
+        )) }),
+        footerRows && footerRows.length > 0 && /* @__PURE__ */ jsx("tfoot", { className: "border-t border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800/50", children: footerRows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, cellIndex) => {
+          const col = cols[cellIndex];
+          return /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: [
+                SIZE_TD[size],
+                "font-medium text-gray-700 dark:text-gray-300",
+                ALIGN_CLASS[col?.align ?? "left"],
+                col?.className ?? "",
+                tdClassName
+              ].filter(Boolean).join(" "),
+              style: col?.tdStyle,
+              children: cell
+            },
+            cellIndex
+          );
+        }) }, rowIndex)) })
       ]
     }
   ) });
 }
+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,
                 {
@@ -461,7 +788,9 @@ var Loading = ({
   size = "medium",
   color = "primary",
   label,
-  className = ""
+  className = "",
+  overlay = false,
+  fullPage = false
 }) => {
   const sizeClasses = {
     small: "h-4 w-4",
@@ -480,13 +809,14 @@ var Loading = ({
   const renderIcon = () => {
     const commonClass = `${sizeClasses[size]} ${colorClasses[color]}`;
     switch (variant) {
-      case "dots":
+      case "dots": {
         const dotSize = size === "small" ? "h-1 w-1" : size === "medium" ? "h-2 w-2" : size === "large" ? "h-3 w-3" : "h-4 w-4";
         return /* @__PURE__ */ jsxs("div", { className: `flex space-x-1 ${colorClasses[color]}`, children: [
           /* @__PURE__ */ jsx("div", { className: `rounded-full bg-current animate-bounce ${dotSize}`, style: { animationDelay: "0s" } }),
           /* @__PURE__ */ jsx("div", { className: `rounded-full bg-current animate-bounce ${dotSize}`, style: { animationDelay: "0.15s" } }),
           /* @__PURE__ */ jsx("div", { className: `rounded-full bg-current animate-bounce ${dotSize}`, style: { animationDelay: "0.3s" } })
         ] });
+      }
       case "bars":
         return /* @__PURE__ */ jsxs("div", { className: `flex items-end space-x-1 ${sizeClasses[size]} ${colorClasses[color]}`, children: [
           /* @__PURE__ */ jsx("div", { className: "w-1/4 bg-current animate-[pulse_1s_ease-in-out_infinite]", style: { height: "60%", animationDelay: "0s" } }),
@@ -518,6 +848,16 @@ var Loading = ({
         ] });
     }
   };
+  const inner = /* @__PURE__ */ jsxs("div", { className: `flex flex-col items-center justify-center ${className}`, role: "status", children: [
+    renderIcon(),
+    label && /* @__PURE__ */ jsx("span", { className: `mt-3 text-sm font-medium ${colorClasses[color]}`, children: label })
+  ] });
+  if (fullPage) {
+    return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 backdrop-blur-sm", children: inner });
+  }
+  if (overlay) {
+    return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-gray-900/40 backdrop-blur-sm rounded-[inherit]", children: inner });
+  }
   return /* @__PURE__ */ jsxs("div", { className: `flex flex-col items-center justify-center w-full h-full min-h-[inherit] ${className}`, role: "status", children: [
     renderIcon(),
     label && /* @__PURE__ */ jsx("span", { className: `mt-3 text-sm font-medium ${colorClasses[color]}`, children: label })