@marcoschwartz/lite-ui 0.8.0 → 0.10.0

package/dist/index.mjs

@@ -715,6 +715,7 @@ var AppShell = ({
   const [isMobileNavbarOpen, setIsMobileNavbarOpen] = useState4(defaultNavbarOpen);
   const navbarWidth = navbar?.width || "md";
   const navbarBreakpoint = navbar?.breakpoint || "md";
+  const navbarPosition = navbar?.position || "side";
   const widthClass = widthClasses2[navbarWidth];
   const breakpoint = breakpointClasses[navbarBreakpoint];
   if (!responsive && navbar) {
@@ -732,6 +733,51 @@ var AppShell = ({
       /* @__PURE__ */ jsx38("main", { className: "flex-1 overflow-y-auto", children })
     ] });
   }
+  if (navbar && navbarPosition === "top") {
+    const mobileMenuClass = navbarBreakpoint === "sm" ? "sm:hidden" : navbarBreakpoint === "md" ? "md:hidden" : navbarBreakpoint === "lg" ? "lg:hidden" : "xl:hidden";
+    const desktopNavClass = navbarBreakpoint === "sm" ? "sm:flex" : navbarBreakpoint === "md" ? "md:flex" : navbarBreakpoint === "lg" ? "lg:flex" : "xl:flex";
+    return /* @__PURE__ */ jsxs7("div", { className: `min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 ${className}`, children: [
+      /* @__PURE__ */ jsx38("nav", { className: "sticky top-0 z-30 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx38("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs7("div", { className: "flex justify-between items-center h-16", children: [
+        /* @__PURE__ */ jsx38("div", { className: "flex items-center", children: navbarLogo ? /* @__PURE__ */ jsx38("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ jsx38("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null }),
+        /* @__PURE__ */ jsx38("div", { className: `hidden ${desktopNavClass} items-center gap-6`, children: navbar.content }),
+        /* @__PURE__ */ jsx38(
+          "button",
+          {
+            className: `${mobileMenuClass} p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors`,
+            onClick: () => setIsMobileNavbarOpen(!isMobileNavbarOpen),
+            "aria-label": "Toggle menu",
+            children: /* @__PURE__ */ jsx38(MenuIcon, { size: "md" })
+          }
+        )
+      ] }) }) }),
+      header && /* @__PURE__ */ jsx38("div", { className: "w-full", children: header }),
+      isMobileNavbarOpen && /* @__PURE__ */ jsxs7(Fragment4, { children: [
+        /* @__PURE__ */ jsx38(
+          "div",
+          {
+            className: `${mobileMenuClass} fixed inset-0 z-40 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200`,
+            onClick: () => setIsMobileNavbarOpen(false)
+          }
+        ),
+        /* @__PURE__ */ jsxs7("div", { className: `${mobileMenuClass} fixed left-0 top-0 bottom-0 z-50 w-64 bg-white dark:bg-gray-800 shadow-2xl animate-in slide-in-from-left duration-300`, children: [
+          /* @__PURE__ */ jsxs7("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between", children: [
+            navbarLogo ? /* @__PURE__ */ jsx38("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ jsx38("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null,
+            /* @__PURE__ */ jsx38(
+              "button",
+              {
+                className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
+                onClick: () => setIsMobileNavbarOpen(false),
+                "aria-label": "Close menu",
+                children: /* @__PURE__ */ jsx38("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx38("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx38("div", { className: "p-4 flex flex-col gap-4", children: navbar.content })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx38("main", { className: "flex-1 overflow-y-auto", children })
+    ] });
+  }
   if (navbar) {
     const mobileHeaderClass = navbarBreakpoint === "sm" ? "sm:hidden" : navbarBreakpoint === "md" ? "md:hidden" : navbarBreakpoint === "lg" ? "lg:hidden" : "xl:hidden";
     const desktopNavbarClass = navbarBreakpoint === "sm" ? "sm:block" : navbarBreakpoint === "md" ? "md:block" : navbarBreakpoint === "lg" ? "lg:block" : "xl:block";
@@ -934,21 +980,150 @@ var TextInput = forwardRef(
 );
 TextInput.displayName = "TextInput";
 
+// src/components/NumberInput.tsx
+import { useState as useState5, useRef as useRef2 } from "react";
+import { jsx as jsx41, jsxs as jsxs10 } from "react/jsx-runtime";
+var sizeClasses5 = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2.5 text-base",
+  lg: "px-4 py-3 text-lg"
+};
+var NumberInput = ({
+  label,
+  error,
+  helperText,
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  precision,
+  disabled = false,
+  hideControls = false,
+  size = "md",
+  fullWidth = false,
+  placeholder,
+  className = ""
+}) => {
+  const { theme } = useTheme();
+  const inputRef = useRef2(null);
+  const [isFocused, setIsFocused] = useState5(false);
+  const clampValue = (val) => {
+    let clamped = val;
+    if (min !== void 0 && clamped < min) clamped = min;
+    if (max !== void 0 && clamped > max) clamped = max;
+    if (precision !== void 0) {
+      clamped = parseFloat(clamped.toFixed(precision));
+    }
+    return clamped;
+  };
+  const handleIncrement = () => {
+    if (disabled) return;
+    const currentValue = value ?? 0;
+    const newValue = clampValue(currentValue + step);
+    onChange?.(newValue);
+  };
+  const handleDecrement = () => {
+    if (disabled) return;
+    const currentValue = value ?? 0;
+    const newValue = clampValue(currentValue - step);
+    onChange?.(newValue);
+  };
+  const handleInputChange = (e) => {
+    const inputValue = e.target.value;
+    if (inputValue === "" || inputValue === "-") {
+      onChange?.(void 0);
+      return;
+    }
+    const numValue = parseFloat(inputValue);
+    if (!isNaN(numValue)) {
+      const clamped = clampValue(numValue);
+      onChange?.(clamped);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      handleIncrement();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      handleDecrement();
+    }
+  };
+  const baseStyles = "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500";
+  const sizeStyle = sizeClasses5[size];
+  const errorStyles = error ? "border-red-500 focus:ring-red-500 dark:border-red-500" : "";
+  const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900" : "";
+  const widthStyle = fullWidth ? "w-full" : "";
+  const paddingWithControls = !hideControls ? "pr-8" : "";
+  const displayValue = value !== void 0 ? value.toString() : "";
+  return /* @__PURE__ */ jsxs10("div", { className: `${widthStyle} ${className}`, children: [
+    label && /* @__PURE__ */ jsx41("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx41(
+        "input",
+        {
+          ref: inputRef,
+          type: "number",
+          value: displayValue,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
+          disabled,
+          placeholder,
+          min,
+          max,
+          step,
+          className: `${baseStyles} ${sizeStyle} ${errorStyles} ${disabledStyles} ${paddingWithControls} [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`.trim()
+        }
+      ),
+      !hideControls && /* @__PURE__ */ jsxs10("div", { className: "absolute right-1 top-1/2 -translate-y-1/2 flex flex-col", children: [
+        /* @__PURE__ */ jsx41(
+          "button",
+          {
+            type: "button",
+            onClick: handleIncrement,
+            disabled: disabled || max !== void 0 && value !== void 0 && value >= max,
+            className: "px-2 py-0.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx41("svg", { className: "w-3 h-3 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx41("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 15l7-7 7 7" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx41(
+          "button",
+          {
+            type: "button",
+            onClick: handleDecrement,
+            disabled: disabled || min !== void 0 && value !== void 0 && value <= min,
+            className: "px-2 py-0.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx41("svg", { className: "w-3 h-3 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx41("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M19 9l-7 7-7-7" }) })
+          }
+        )
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx41("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx41("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+  ] });
+};
+NumberInput.displayName = "NumberInput";
+
 // src/components/ActionMenu.tsx
-import { useState as useState5, useRef as useRef2, useEffect as useEffect5 } from "react";
+import { useState as useState6, useRef as useRef3, useEffect as useEffect5 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment6, jsx as jsx41, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx42, jsxs as jsxs11 } from "react/jsx-runtime";
 var ActionMenu = ({
   items,
   trigger,
   position = "right"
 }) => {
   const { themeName } = useTheme();
-  const [isOpen, setIsOpen] = useState5(false);
-  const [menuPosition, setMenuPosition] = useState5(null);
-  const [mounted, setMounted] = useState5(false);
-  const menuRef = useRef2(null);
-  const triggerRef = useRef2(null);
+  const [isOpen, setIsOpen] = useState6(false);
+  const [menuPosition, setMenuPosition] = useState6(null);
+  const [mounted, setMounted] = useState6(false);
+  const menuRef = useRef3(null);
+  const triggerRef = useRef3(null);
   useEffect5(() => {
     setMounted(true);
   }, []);
@@ -982,17 +1157,17 @@ var ActionMenu = ({
       setIsOpen(false);
     }
   };
-  const defaultTrigger = /* @__PURE__ */ jsx41(
+  const defaultTrigger = /* @__PURE__ */ jsx42(
     "button",
     {
       className: "p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
       "aria-label": "Open menu",
-      children: /* @__PURE__ */ jsx41("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx41("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" }) })
+      children: /* @__PURE__ */ jsx42("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx42("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" }) })
     }
   );
   const menuBaseStyles = themeName === "minimalistic" ? "bg-black border-2 border-white" : "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg";
   const itemBaseStyles = themeName === "minimalistic" ? "text-white hover:bg-white hover:text-black transition-colors duration-200" : "text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors";
-  const menu = isOpen && mounted && menuPosition ? /* @__PURE__ */ jsx41(
+  const menu = isOpen && mounted && menuPosition ? /* @__PURE__ */ jsx42(
     "div",
     {
       ref: menuRef,
@@ -1004,7 +1179,7 @@ var ActionMenu = ({
       },
       children: items.map((item, index) => {
         if (item.type === "divider") {
-          return /* @__PURE__ */ jsx41(
+          return /* @__PURE__ */ jsx42(
             "div",
             {
               className: "my-1 border-t border-gray-200 dark:border-gray-700"
@@ -1012,15 +1187,15 @@ var ActionMenu = ({
             index
           );
         }
-        return /* @__PURE__ */ jsxs10(
+        return /* @__PURE__ */ jsxs11(
           "button",
           {
             onClick: () => handleItemClick(item),
             disabled: item.disabled,
             className: `w-full text-left px-4 py-3 flex items-center gap-3 ${itemBaseStyles} ${item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${item.variant === "danger" ? "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20" : ""}`,
             children: [
-              item.icon && /* @__PURE__ */ jsx41("span", { className: "flex-shrink-0", children: item.icon }),
-              /* @__PURE__ */ jsx41("span", { className: "flex-1", children: item.label })
+              item.icon && /* @__PURE__ */ jsx42("span", { className: "flex-shrink-0", children: item.icon }),
+              /* @__PURE__ */ jsx42("span", { className: "flex-1", children: item.label })
             ]
           },
           index
@@ -1028,14 +1203,14 @@ var ActionMenu = ({
       })
     }
   ) : null;
-  return /* @__PURE__ */ jsxs10(Fragment6, { children: [
-    /* @__PURE__ */ jsx41("div", { className: "relative inline-block", ref: triggerRef, children: /* @__PURE__ */ jsx41("div", { onClick: () => setIsOpen(!isOpen), children: trigger || defaultTrigger }) }),
+  return /* @__PURE__ */ jsxs11(Fragment6, { children: [
+    /* @__PURE__ */ jsx42("div", { className: "relative inline-block", ref: triggerRef, children: /* @__PURE__ */ jsx42("div", { onClick: () => setIsOpen(!isOpen), children: trigger || defaultTrigger }) }),
     mounted && createPortal(menu, document.body)
   ] });
 };
 
 // src/components/Card.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var paddingClasses = {
   none: "",
   sm: "p-4",
@@ -1050,8 +1225,8 @@ var Card = ({
 }) => {
   const { theme } = useTheme();
   const paddingClass = paddingClasses[padding];
-  const hoverClass = hover ? "hover:shadow-lg transition-shadow duration-200" : "";
-  return /* @__PURE__ */ jsx42(
+  const hoverClass = hover ? "hover:shadow-xl hover:scale-[1.02] hover:border-blue-400 dark:hover:border-blue-500 cursor-pointer transition-all duration-200 ease-in-out" : "";
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       className: `bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 ${paddingClass} ${hoverClass} ${className}`,
@@ -1061,7 +1236,7 @@ var Card = ({
 };
 
 // src/components/Alert.tsx
-import { jsx as jsx43, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs12 } from "react/jsx-runtime";
 var variantStyles = {
   info: "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-900 dark:text-blue-100",
   success: "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-900 dark:text-green-100",
@@ -1084,24 +1259,24 @@ var Alert = ({
   const { theme } = useTheme();
   const variantClass = variantStyles[variant];
   const iconClass = iconStyles[variant];
-  return /* @__PURE__ */ jsx43("div", { className: `rounded-lg border p-4 ${variantClass} ${className}`, role: "alert", children: /* @__PURE__ */ jsxs11("div", { className: "flex items-start gap-3", children: [
-    /* @__PURE__ */ jsxs11("div", { className: `flex-shrink-0 ${iconClass}`, children: [
-      variant === "info" && /* @__PURE__ */ jsx43("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx43("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
-      variant === "success" && /* @__PURE__ */ jsx43("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx43("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }),
-      variant === "warning" && /* @__PURE__ */ jsx43("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx43("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
-      variant === "error" && /* @__PURE__ */ jsx43("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx43("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) })
+  return /* @__PURE__ */ jsx44("div", { className: `rounded-lg border p-4 ${variantClass} ${className}`, role: "alert", children: /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsxs12("div", { className: `flex-shrink-0 ${iconClass}`, children: [
+      variant === "info" && /* @__PURE__ */ jsx44("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx44("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
+      variant === "success" && /* @__PURE__ */ jsx44("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx44("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }),
+      variant === "warning" && /* @__PURE__ */ jsx44("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx44("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
+      variant === "error" && /* @__PURE__ */ jsx44("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx44("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) })
     ] }),
-    /* @__PURE__ */ jsxs11("div", { className: "flex-1", children: [
-      title && /* @__PURE__ */ jsx43("h3", { className: "font-semibold mb-1", children: title }),
-      /* @__PURE__ */ jsx43("div", { className: "text-sm", children })
+    /* @__PURE__ */ jsxs12("div", { className: "flex-1", children: [
+      title && /* @__PURE__ */ jsx44("h3", { className: "font-semibold mb-1", children: title }),
+      /* @__PURE__ */ jsx44("div", { className: "text-sm", children })
     ] }),
-    onClose && /* @__PURE__ */ jsx43(
+    onClose && /* @__PURE__ */ jsx44(
       "button",
       {
         onClick: onClose,
         className: `flex-shrink-0 ${iconClass} hover:opacity-70 transition-opacity`,
         "aria-label": "Close alert",
-        children: /* @__PURE__ */ jsx43("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx43("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+        children: /* @__PURE__ */ jsx44("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx44("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
       }
     )
   ] }) });
@@ -1109,13 +1284,13 @@ var Alert = ({
 
 // src/components/Checkbox.tsx
 import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx44, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs13 } from "react/jsx-runtime";
 var Checkbox = forwardRef2(
   ({ label, error, className = "", disabled, ...props }, ref) => {
     const { theme } = useTheme();
-    return /* @__PURE__ */ jsxs12("div", { className, children: [
-      /* @__PURE__ */ jsxs12("label", { className: "flex items-center gap-2 cursor-pointer group", children: [
-        /* @__PURE__ */ jsx44(
+    return /* @__PURE__ */ jsxs13("div", { className, children: [
+      /* @__PURE__ */ jsxs13("label", { className: "flex items-center gap-2 cursor-pointer group", children: [
+        /* @__PURE__ */ jsx45(
           "input",
           {
             ref,
@@ -1125,9 +1300,9 @@ var Checkbox = forwardRef2(
             ...props
           }
         ),
-        label && /* @__PURE__ */ jsx44("span", { className: `text-sm text-gray-700 dark:text-gray-300 ${disabled ? "opacity-50 cursor-not-allowed" : "group-hover:text-gray-900 dark:group-hover:text-gray-100"}`, children: label })
+        label && /* @__PURE__ */ jsx45("span", { className: `text-sm text-gray-700 dark:text-gray-300 ${disabled ? "opacity-50 cursor-not-allowed" : "group-hover:text-gray-900 dark:group-hover:text-gray-100"}`, children: label })
       ] }),
-      error && /* @__PURE__ */ jsx44("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error })
+      error && /* @__PURE__ */ jsx45("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error })
     ] });
   }
 );
@@ -1135,7 +1310,7 @@ Checkbox.displayName = "Checkbox";
 
 // src/components/Toggle.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx45, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs14 } from "react/jsx-runtime";
 var Toggle = forwardRef3(
   ({ label, size = "md", className = "", disabled, checked, ...props }, ref) => {
     const { theme } = useTheme();
@@ -1154,9 +1329,9 @@ var Toggle = forwardRef3(
       }
     };
     const currentSize = toggleClasses[size];
-    return /* @__PURE__ */ jsxs13("label", { className: `inline-flex items-center gap-3 cursor-pointer ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`, children: [
-      /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsxs14("label", { className: `inline-flex items-center gap-3 cursor-pointer ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`, children: [
+      /* @__PURE__ */ jsxs14("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx46(
           "input",
           {
             ref,
@@ -1167,27 +1342,27 @@ var Toggle = forwardRef3(
             ...props
           }
         ),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           "div",
           {
             className: `${currentSize.switch} bg-gray-300 dark:bg-gray-700 peer-focus:ring-2 peer-focus:ring-blue-500 rounded-full peer peer-checked:bg-blue-600 dark:peer-checked:bg-blue-500 transition-colors`
           }
         ),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           "div",
           {
             className: `${currentSize.thumb} bg-white rounded-full shadow-md absolute top-0.5 left-0.5 transition-transform`
           }
         )
       ] }),
-      label && /* @__PURE__ */ jsx45("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label })
+      label && /* @__PURE__ */ jsx46("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label })
     ] });
   }
 );
 Toggle.displayName = "Toggle";
 
 // src/components/Badge.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var variantStyles2 = {
   default: "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200",
   primary: "bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200",
@@ -1210,12 +1385,12 @@ var Badge = ({
   const { theme } = useTheme();
   const variantClass = variantStyles2[variant];
   const sizeClass = sizeStyles[size];
-  return /* @__PURE__ */ jsx46("span", { className: `inline-flex items-center font-medium rounded-full ${variantClass} ${sizeClass} ${className}`, children });
+  return /* @__PURE__ */ jsx47("span", { className: `inline-flex items-center font-medium rounded-full ${variantClass} ${sizeClass} ${className}`, children });
 };
 
 // src/components/Spinner.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
-var sizeClasses5 = {
+import { jsx as jsx48 } from "react/jsx-runtime";
+var sizeClasses6 = {
   sm: "w-4 h-4 border-2",
   md: "w-8 h-8 border-2",
   lg: "w-12 h-12 border-3",
@@ -1232,22 +1407,22 @@ var Spinner = ({
   className = ""
 }) => {
   const { theme } = useTheme();
-  const sizeClass = sizeClasses5[size];
+  const sizeClass = sizeClasses6[size];
   const colorClass = colorClasses[color];
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       className: `inline-block rounded-full animate-spin ${sizeClass} ${colorClass} ${className}`,
       role: "status",
       "aria-label": "Loading",
-      children: /* @__PURE__ */ jsx47("span", { className: "sr-only", children: "Loading..." })
+      children: /* @__PURE__ */ jsx48("span", { className: "sr-only", children: "Loading..." })
     }
   );
 };
 
 // src/components/Tabs.tsx
-import { useState as useState6 } from "react";
-import { jsx as jsx48, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState7 } from "react";
+import { jsx as jsx49, jsxs as jsxs15 } from "react/jsx-runtime";
 var Tabs = ({
   tabs,
   defaultIndex = 0,
@@ -1255,14 +1430,14 @@ var Tabs = ({
   className = ""
 }) => {
   const { theme } = useTheme();
-  const [activeIndex, setActiveIndex] = useState6(defaultIndex);
+  const [activeIndex, setActiveIndex] = useState7(defaultIndex);
   const handleTabClick = (index) => {
     if (tabs[index].disabled) return;
     setActiveIndex(index);
     onChange?.(index);
   };
-  return /* @__PURE__ */ jsxs14("div", { className, children: [
-    /* @__PURE__ */ jsx48("div", { className: "border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx48("nav", { className: "flex gap-8 px-6", "aria-label": "Tabs", children: tabs.map((tab, index) => /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs15("div", { className, children: [
+    /* @__PURE__ */ jsx49("div", { className: "border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx49("nav", { className: "flex gap-8 px-6", "aria-label": "Tabs", children: tabs.map((tab, index) => /* @__PURE__ */ jsx49(
       "button",
       {
         onClick: () => handleTabClick(index),
@@ -1273,12 +1448,12 @@ var Tabs = ({
       },
       index
     )) }) }),
-    /* @__PURE__ */ jsx48("div", { children: tabs[activeIndex]?.content })
+    /* @__PURE__ */ jsx49("div", { children: tabs[activeIndex]?.content })
   ] });
 };
 
 // src/components/Table.tsx
-import { jsx as jsx49, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs16 } from "react/jsx-runtime";
 function Table({
   columns,
   data,
@@ -1288,11 +1463,11 @@ function Table({
   className = ""
 }) {
   const { theme } = useTheme();
-  return /* @__PURE__ */ jsxs15("div", { className: `overflow-x-auto ${className}`, children: [
-    /* @__PURE__ */ jsxs15("table", { className: "w-full text-left", children: [
-      /* @__PURE__ */ jsx49("thead", { className: "bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx49("tr", { children: columns.map((column, colIndex) => {
+  return /* @__PURE__ */ jsxs16("div", { className: `overflow-x-auto ${className}`, children: [
+    /* @__PURE__ */ jsxs16("table", { className: "w-full text-left", children: [
+      /* @__PURE__ */ jsx50("thead", { className: "bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx50("tr", { children: columns.map((column, colIndex) => {
         const isLast = colIndex === columns.length - 1;
-        return /* @__PURE__ */ jsx49(
+        return /* @__PURE__ */ jsx50(
           "th",
           {
             className: isLast ? "px-6 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider relative" : "px-6 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider",
@@ -1302,18 +1477,18 @@ function Table({
           column.key
         );
       }) }) }),
-      /* @__PURE__ */ jsx49("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: data.map((row, rowIndex) => {
+      /* @__PURE__ */ jsx50("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: data.map((row, rowIndex) => {
         const rowClasses = [
           striped && rowIndex % 2 === 1 ? "bg-gray-50 dark:bg-gray-800/50" : "",
           hoverable ? "hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" : ""
         ].filter(Boolean).join(" ");
-        return /* @__PURE__ */ jsx49(
+        return /* @__PURE__ */ jsx50(
           "tr",
           {
             className: rowClasses,
             children: columns.map((column, colIndex) => {
               const isLast = colIndex === columns.length - 1;
-              return /* @__PURE__ */ jsx49(
+              return /* @__PURE__ */ jsx50(
                 "td",
                 {
                   className: isLast ? "px-6 py-4 text-sm text-gray-900 dark:text-gray-100 overflow-visible" : "px-6 py-4 text-sm text-gray-900 dark:text-gray-100",
@@ -1327,12 +1502,12 @@ function Table({
         );
       }) })
     ] }),
-    data.length === 0 && /* @__PURE__ */ jsx49("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: "No data available" })
+    data.length === 0 && /* @__PURE__ */ jsx50("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: "No data available" })
   ] });
 }
 
 // src/components/Pagination.tsx
-import { jsx as jsx50, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs17 } from "react/jsx-runtime";
 var Pagination = ({
   currentPage,
   totalPages,
@@ -1373,8 +1548,8 @@ var Pagination = ({
     return range(1, totalPages);
   };
   const pages = paginationRange();
-  return /* @__PURE__ */ jsxs16("nav", { className: `flex items-center gap-1 ${className}`, "aria-label": "Pagination", children: [
-    /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsxs17("nav", { className: `flex items-center gap-1 ${className}`, "aria-label": "Pagination", children: [
+    /* @__PURE__ */ jsx51(
       "button",
       {
         onClick: () => onPageChange(currentPage - 1),
@@ -1386,7 +1561,7 @@ var Pagination = ({
     ),
     pages.map((page, index) => {
       if (page === "...") {
-        return /* @__PURE__ */ jsx50(
+        return /* @__PURE__ */ jsx51(
           "span",
           {
             className: "px-3 py-2 text-gray-700 dark:text-gray-300",
@@ -1395,7 +1570,7 @@ var Pagination = ({
           `dots-${index}`
         );
       }
-      return /* @__PURE__ */ jsx50(
+      return /* @__PURE__ */ jsx51(
         "button",
         {
           onClick: () => onPageChange(page),
@@ -1407,7 +1582,7 @@ var Pagination = ({
         page
       );
     }),
-    /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx51(
       "button",
       {
         onClick: () => onPageChange(currentPage + 1),
@@ -1421,9 +1596,9 @@ var Pagination = ({
 };
 
 // src/components/DatePicker.tsx
-import { useState as useState7, useRef as useRef3, useEffect as useEffect6 } from "react";
+import { useState as useState8, useRef as useRef4, useEffect as useEffect6 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx51, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs18 } from "react/jsx-runtime";
 var DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 var MONTHS = [
   "January",
@@ -1452,12 +1627,12 @@ var DatePicker = ({
   placeholder = "Select date..."
 }) => {
   const { theme } = useTheme();
-  const [isOpen, setIsOpen] = useState7(false);
-  const [viewDate, setViewDate] = useState7(value || /* @__PURE__ */ new Date());
-  const [mounted, setMounted] = useState7(false);
-  const [calendarPosition, setCalendarPosition] = useState7(null);
-  const inputRef = useRef3(null);
-  const calendarRef = useRef3(null);
+  const [isOpen, setIsOpen] = useState8(false);
+  const [viewDate, setViewDate] = useState8(value || /* @__PURE__ */ new Date());
+  const [mounted, setMounted] = useState8(false);
+  const [calendarPosition, setCalendarPosition] = useState8(null);
+  const inputRef = useRef4(null);
+  const calendarRef = useRef4(null);
   useEffect6(() => {
     setMounted(true);
   }, []);
@@ -1544,7 +1719,7 @@ var DatePicker = ({
   const baseStyles = "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 text-base transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500 cursor-pointer";
   const errorStyles = error ? "border-red-500 focus:ring-red-500 dark:border-red-500" : "";
   const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900" : "";
-  const calendar = isOpen && mounted && calendarPosition ? /* @__PURE__ */ jsxs17(
+  const calendar = isOpen && mounted && calendarPosition ? /* @__PURE__ */ jsxs18(
     "div",
     {
       ref: calendarRef,
@@ -1555,23 +1730,23 @@ var DatePicker = ({
         minWidth: "320px"
       },
       children: [
-        /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between mb-4", children: [
-          /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsx52(
             "button",
             {
               onClick: handlePrevMonth,
               className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
               "aria-label": "Previous month",
-              children: /* @__PURE__ */ jsx51("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx51("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+              children: /* @__PURE__ */ jsx52("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx52("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
             }
           ),
-          /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxs17("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: [
+          /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs18("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: [
               MONTHS[month],
               " ",
               year
             ] }),
-            /* @__PURE__ */ jsx51(
+            /* @__PURE__ */ jsx52(
               "button",
               {
                 onClick: handleToday,
@@ -1580,23 +1755,23 @@ var DatePicker = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsx52(
             "button",
             {
               onClick: handleNextMonth,
               className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
               "aria-label": "Next month",
-              children: /* @__PURE__ */ jsx51("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx51("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+              children: /* @__PURE__ */ jsx52("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx52("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx51("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS.map((day) => /* @__PURE__ */ jsx51("div", { className: "text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-1", children: day }, day)) }),
-        /* @__PURE__ */ jsx51("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
+        /* @__PURE__ */ jsx52("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS.map((day) => /* @__PURE__ */ jsx52("div", { className: "text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-1", children: day }, day)) }),
+        /* @__PURE__ */ jsx52("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
           const isCurrentMonthDay = isCurrentMonth(date);
           const isTodayDay = isToday(date);
           const isSelectedDay = isSelected(date);
           const isDisabledDay = isDisabled(date);
-          return /* @__PURE__ */ jsx51(
+          return /* @__PURE__ */ jsx52(
             "button",
             {
               onClick: () => handleDateClick(date),
@@ -1617,22 +1792,22 @@ var DatePicker = ({
       ]
     }
   ) : null;
-  return /* @__PURE__ */ jsxs17("div", { className, children: [
-    label && /* @__PURE__ */ jsx51("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
-    /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18("div", { className, children: [
+    label && /* @__PURE__ */ jsx52("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    /* @__PURE__ */ jsxs18(
       "div",
       {
         ref: inputRef,
         onClick: () => !disabled && setIsOpen(!isOpen),
         className: `${baseStyles} ${errorStyles} ${disabledStyles} flex items-center justify-between`.trim(),
         children: [
-          /* @__PURE__ */ jsx51("span", { className: !value ? "text-gray-500 dark:text-gray-400" : "", children: value ? formatDate(value) : placeholder }),
-          /* @__PURE__ */ jsx51("svg", { className: "w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx51("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
+          /* @__PURE__ */ jsx52("span", { className: !value ? "text-gray-500 dark:text-gray-400" : "", children: value ? formatDate(value) : placeholder }),
+          /* @__PURE__ */ jsx52("svg", { className: "w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx52("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
         ]
       }
     ),
-    error && /* @__PURE__ */ jsx51("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
-    helperText && !error && /* @__PURE__ */ jsx51("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    error && /* @__PURE__ */ jsx52("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx52("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
     mounted && createPortal2(calendar, document.body)
   ] });
 };
@@ -1640,16 +1815,16 @@ DatePicker.displayName = "DatePicker";
 
 // src/components/TimePicker.tsx
 import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx52, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs19 } from "react/jsx-runtime";
 var TimePicker = forwardRef4(
   ({ label, error, helperText, className = "", disabled, ...props }, ref) => {
     const { theme } = useTheme();
     const baseStyles = "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 text-base transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500";
     const errorStyles = error ? "border-red-500 focus:ring-red-500 dark:border-red-500" : "";
     const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900" : "";
-    return /* @__PURE__ */ jsxs18("div", { className, children: [
-      label && /* @__PURE__ */ jsx52("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
-      /* @__PURE__ */ jsx52(
+    return /* @__PURE__ */ jsxs19("div", { className, children: [
+      label && /* @__PURE__ */ jsx53("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+      /* @__PURE__ */ jsx53(
         "input",
         {
           ref,
@@ -1659,17 +1834,17 @@ var TimePicker = forwardRef4(
           ...props
         }
       ),
-      error && /* @__PURE__ */ jsx52("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
-      helperText && !error && /* @__PURE__ */ jsx52("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+      error && /* @__PURE__ */ jsx53("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx53("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
     ] });
   }
 );
 TimePicker.displayName = "TimePicker";
 
 // src/components/DateTimePicker.tsx
-import { useState as useState8, useRef as useRef4, useEffect as useEffect7 } from "react";
+import { useState as useState9, useRef as useRef5, useEffect as useEffect7 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx53, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs20 } from "react/jsx-runtime";
 var DAYS2 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 var MONTHS2 = [
   "January",
@@ -1698,15 +1873,15 @@ var DateTimePicker = ({
   placeholder = "Select date and time..."
 }) => {
   const { theme } = useTheme();
-  const [isOpen, setIsOpen] = useState8(false);
-  const [viewDate, setViewDate] = useState8(value || /* @__PURE__ */ new Date());
-  const [selectedTime, setSelectedTime] = useState8(
+  const [isOpen, setIsOpen] = useState9(false);
+  const [viewDate, setViewDate] = useState9(value || /* @__PURE__ */ new Date());
+  const [selectedTime, setSelectedTime] = useState9(
     value ? { hours: value.getHours(), minutes: value.getMinutes() } : { hours: 12, minutes: 0 }
   );
-  const [mounted, setMounted] = useState8(false);
-  const [pickerPosition, setPickerPosition] = useState8(null);
-  const inputRef = useRef4(null);
-  const pickerRef = useRef4(null);
+  const [mounted, setMounted] = useState9(false);
+  const [pickerPosition, setPickerPosition] = useState9(null);
+  const inputRef = useRef5(null);
+  const pickerRef = useRef5(null);
   useEffect7(() => {
     setMounted(true);
   }, []);
@@ -1826,7 +2001,7 @@ var DateTimePicker = ({
   const baseStyles = "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 text-base transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500 cursor-pointer";
   const errorStyles = error ? "border-red-500 focus:ring-red-500 dark:border-red-500" : "";
   const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900" : "";
-  const picker = isOpen && mounted && pickerPosition ? /* @__PURE__ */ jsxs19(
+  const picker = isOpen && mounted && pickerPosition ? /* @__PURE__ */ jsxs20(
     "div",
     {
       ref: pickerRef,
@@ -1837,23 +2012,23 @@ var DateTimePicker = ({
         minWidth: "360px"
       },
       children: [
-        /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between mb-4", children: [
-          /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsx54(
             "button",
             {
               onClick: handlePrevMonth,
               className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
               "aria-label": "Previous month",
-              children: /* @__PURE__ */ jsx53("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx53("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+              children: /* @__PURE__ */ jsx54("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx54("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
             }
           ),
-          /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxs19("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs20("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: [
               MONTHS2[month],
               " ",
               year
             ] }),
-            /* @__PURE__ */ jsx53(
+            /* @__PURE__ */ jsx54(
               "button",
               {
                 onClick: handleToday,
@@ -1862,23 +2037,23 @@ var DateTimePicker = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx54(
             "button",
             {
               onClick: handleNextMonth,
               className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
               "aria-label": "Next month",
-              children: /* @__PURE__ */ jsx53("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx53("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+              children: /* @__PURE__ */ jsx54("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx54("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx53("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS2.map((day) => /* @__PURE__ */ jsx53("div", { className: "text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-1", children: day }, day)) }),
-        /* @__PURE__ */ jsx53("div", { className: "grid grid-cols-7 gap-1 mb-4", children: calendarDays.map((date, index) => {
+        /* @__PURE__ */ jsx54("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS2.map((day) => /* @__PURE__ */ jsx54("div", { className: "text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-1", children: day }, day)) }),
+        /* @__PURE__ */ jsx54("div", { className: "grid grid-cols-7 gap-1 mb-4", children: calendarDays.map((date, index) => {
           const isCurrentMonthDay = isCurrentMonth(date);
           const isTodayDay = isToday(date);
           const isSelectedDay = isSelected(date);
           const isDisabledDay = isDisabled(date);
-          return /* @__PURE__ */ jsx53(
+          return /* @__PURE__ */ jsx54(
             "button",
             {
               onClick: () => handleDateClick(date),
@@ -1896,21 +2071,21 @@ var DateTimePicker = ({
             index
           );
         }) }),
-        /* @__PURE__ */ jsxs19("div", { className: "border-t border-gray-200 dark:border-gray-700 pt-4", children: [
-          /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-center gap-4 mb-4", children: [
-            /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center", children: [
-              /* @__PURE__ */ jsx53("label", { className: "text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2", children: "Hour" }),
-              /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center gap-1", children: [
-                /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsxs20("div", { className: "border-t border-gray-200 dark:border-gray-700 pt-4", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-center gap-4 mb-4", children: [
+            /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center", children: [
+              /* @__PURE__ */ jsx54("label", { className: "text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2", children: "Hour" }),
+              /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-1", children: [
+                /* @__PURE__ */ jsx54(
                   "button",
                   {
                     type: "button",
                     onClick: () => handleTimeChange((selectedTime.hours + 1) % 24, selectedTime.minutes),
                     className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors",
-                    children: /* @__PURE__ */ jsx53("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx53("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
+                    children: /* @__PURE__ */ jsx54("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx54("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
                   }
                 ),
-                /* @__PURE__ */ jsx53(
+                /* @__PURE__ */ jsx54(
                   "input",
                   {
                     type: "number",
@@ -1926,31 +2101,31 @@ var DateTimePicker = ({
                     className: "w-16 px-2 py-2 text-center border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 text-lg font-semibold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                   }
                 ),
-                /* @__PURE__ */ jsx53(
+                /* @__PURE__ */ jsx54(
                   "button",
                   {
                     type: "button",
                     onClick: () => handleTimeChange((selectedTime.hours - 1 + 24) % 24, selectedTime.minutes),
                     className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors",
-                    children: /* @__PURE__ */ jsx53("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx53("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+                    children: /* @__PURE__ */ jsx54("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx54("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
                   }
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsx53("span", { className: "text-2xl font-bold text-gray-600 dark:text-gray-400 mt-8", children: ":" }),
-            /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center", children: [
-              /* @__PURE__ */ jsx53("label", { className: "text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2", children: "Minute" }),
-              /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center gap-1", children: [
-                /* @__PURE__ */ jsx53(
+            /* @__PURE__ */ jsx54("span", { className: "text-2xl font-bold text-gray-600 dark:text-gray-400 mt-8", children: ":" }),
+            /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center", children: [
+              /* @__PURE__ */ jsx54("label", { className: "text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2", children: "Minute" }),
+              /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-1", children: [
+                /* @__PURE__ */ jsx54(
                   "button",
                   {
                     type: "button",
                     onClick: () => handleTimeChange(selectedTime.hours, (selectedTime.minutes + 1) % 60),
                     className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors",
-                    children: /* @__PURE__ */ jsx53("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx53("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
+                    children: /* @__PURE__ */ jsx54("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx54("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
                   }
                 ),
-                /* @__PURE__ */ jsx53(
+                /* @__PURE__ */ jsx54(
                   "input",
                   {
                     type: "number",
@@ -1966,20 +2141,20 @@ var DateTimePicker = ({
                     className: "w-16 px-2 py-2 text-center border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 text-lg font-semibold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                   }
                 ),
-                /* @__PURE__ */ jsx53(
+                /* @__PURE__ */ jsx54(
                   "button",
                   {
                     type: "button",
                     onClick: () => handleTimeChange(selectedTime.hours, (selectedTime.minutes - 1 + 60) % 60),
                     className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors",
-                    children: /* @__PURE__ */ jsx53("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx53("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+                    children: /* @__PURE__ */ jsx54("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx54("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
                   }
                 )
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx53("div", { className: "text-center text-sm text-gray-600 dark:text-gray-400 mb-4", children: formatTime(selectedTime.hours, selectedTime.minutes) }),
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx54("div", { className: "text-center text-sm text-gray-600 dark:text-gray-400 mb-4", children: formatTime(selectedTime.hours, selectedTime.minutes) }),
+          /* @__PURE__ */ jsx54(
             "button",
             {
               onClick: handleDone,
@@ -1991,30 +2166,30 @@ var DateTimePicker = ({
       ]
     }
   ) : null;
-  return /* @__PURE__ */ jsxs19("div", { className, children: [
-    label && /* @__PURE__ */ jsx53("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
-    /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20("div", { className, children: [
+    label && /* @__PURE__ */ jsx54("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    /* @__PURE__ */ jsxs20(
       "div",
       {
         ref: inputRef,
         onClick: () => !disabled && setIsOpen(!isOpen),
         className: `${baseStyles} ${errorStyles} ${disabledStyles} flex items-center justify-between`.trim(),
         children: [
-          /* @__PURE__ */ jsx53("span", { className: !value ? "text-gray-500 dark:text-gray-400" : "", children: value ? formatDateTime(value) : placeholder }),
-          /* @__PURE__ */ jsx53("svg", { className: "w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx53("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
+          /* @__PURE__ */ jsx54("span", { className: !value ? "text-gray-500 dark:text-gray-400" : "", children: value ? formatDateTime(value) : placeholder }),
+          /* @__PURE__ */ jsx54("svg", { className: "w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx54("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
         ]
       }
     ),
-    error && /* @__PURE__ */ jsx53("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
-    helperText && !error && /* @__PURE__ */ jsx53("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    error && /* @__PURE__ */ jsx54("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx54("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
     mounted && createPortal3(picker, document.body)
   ] });
 };
 DateTimePicker.displayName = "DateTimePicker";
 
 // src/components/Calendar.tsx
-import { useState as useState9 } from "react";
-import { jsx as jsx54, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useState as useState10 } from "react";
+import { jsx as jsx55, jsxs as jsxs21 } from "react/jsx-runtime";
 var DAYS3 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 var MONTHS3 = [
   "January",
@@ -2038,8 +2213,8 @@ var Calendar = ({
   className = ""
 }) => {
   const { theme } = useTheme();
-  const [currentDate, setCurrentDate] = useState9(value || /* @__PURE__ */ new Date());
-  const [viewDate, setViewDate] = useState9(value || /* @__PURE__ */ new Date());
+  const [currentDate, setCurrentDate] = useState10(value || /* @__PURE__ */ new Date());
+  const [viewDate, setViewDate] = useState10(value || /* @__PURE__ */ new Date());
   const year = viewDate.getFullYear();
   const month = viewDate.getMonth();
   const firstDayOfMonth = new Date(year, month, 1).getDay();
@@ -2090,24 +2265,24 @@ var Calendar = ({
     setCurrentDate(today);
     onChange?.(today);
   };
-  return /* @__PURE__ */ jsxs20("div", { className: `bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 ${className}`, children: [
-    /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsxs21("div", { className: `bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 ${className}`, children: [
+    /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsx55(
         "button",
         {
           onClick: handlePrevMonth,
           className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
           "aria-label": "Previous month",
-          children: /* @__PURE__ */ jsx54("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx54("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+          children: /* @__PURE__ */ jsx55("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx55("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
         }
       ),
-      /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs20("h2", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: [
+      /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs21("h2", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: [
           MONTHS3[month],
           " ",
           year
         ] }),
-        /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx55(
           "button",
           {
             onClick: handleToday,
@@ -2116,17 +2291,17 @@ var Calendar = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx54(
+      /* @__PURE__ */ jsx55(
         "button",
         {
           onClick: handleNextMonth,
           className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
           "aria-label": "Next month",
-          children: /* @__PURE__ */ jsx54("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx54("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+          children: /* @__PURE__ */ jsx55("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx55("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx54("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS3.map((day) => /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx55("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS3.map((day) => /* @__PURE__ */ jsx55(
       "div",
       {
         className: "text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-2",
@@ -2134,13 +2309,13 @@ var Calendar = ({
       },
       day
     )) }),
-    /* @__PURE__ */ jsx54("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
-      if (!date) return /* @__PURE__ */ jsx54("div", {}, index);
+    /* @__PURE__ */ jsx55("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
+      if (!date) return /* @__PURE__ */ jsx55("div", {}, index);
       const isCurrentMonthDay = isCurrentMonth(date);
       const isTodayDay = isToday(date);
       const isSelectedDay = isSelected(date);
       const isDisabledDay = isDisabled(date);
-      return /* @__PURE__ */ jsx54(
+      return /* @__PURE__ */ jsx55(
         "button",
         {
           onClick: () => handleDateClick(date),
@@ -2162,8 +2337,8 @@ var Calendar = ({
 };
 
 // src/components/Radio.tsx
-import React16 from "react";
-import { jsx as jsx55, jsxs as jsxs21 } from "react/jsx-runtime";
+import React17 from "react";
+import { jsx as jsx56, jsxs as jsxs22 } from "react/jsx-runtime";
 var Radio = ({
   name,
   options,
@@ -2174,7 +2349,7 @@ var Radio = ({
   orientation = "vertical",
   className = ""
 }) => {
-  const [internalValue, setInternalValue] = React16.useState(defaultValue || "");
+  const [internalValue, setInternalValue] = React17.useState(defaultValue || "");
   const value = controlledValue !== void 0 ? controlledValue : internalValue;
   const handleChange = (optionValue) => {
     if (disabled) return;
@@ -2182,17 +2357,17 @@ var Radio = ({
     onChange?.(optionValue);
   };
   const containerClass = orientation === "horizontal" ? "flex flex-wrap gap-4" : "flex flex-col gap-2";
-  return /* @__PURE__ */ jsx55("div", { className: `${containerClass} ${className}`, role: "radiogroup", children: options.map((option) => {
+  return /* @__PURE__ */ jsx56("div", { className: `${containerClass} ${className}`, role: "radiogroup", children: options.map((option) => {
     const isDisabled = disabled || option.disabled;
     const isChecked = value === option.value;
     const id = `${name}-${option.value}`;
-    return /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs22(
       "label",
       {
         htmlFor: id,
         className: `flex items-center gap-2 cursor-pointer ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`,
         children: [
-          /* @__PURE__ */ jsx55(
+          /* @__PURE__ */ jsx56(
             "input",
             {
               type: "radio",
@@ -2205,7 +2380,7 @@ var Radio = ({
               className: "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer disabled:cursor-not-allowed"
             }
           ),
-          /* @__PURE__ */ jsx55("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-300", children: option.label })
+          /* @__PURE__ */ jsx56("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-300", children: option.label })
         ]
       },
       option.value
@@ -2214,7 +2389,7 @@ var Radio = ({
 };
 
 // src/components/ProgressBar.tsx
-import { jsx as jsx56, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs23 } from "react/jsx-runtime";
 var ProgressBar = ({
   value,
   max = 100,
@@ -2225,7 +2400,7 @@ var ProgressBar = ({
   className = ""
 }) => {
   const percentage = Math.min(Math.max(value / max * 100, 0), 100);
-  const sizeClasses6 = {
+  const sizeClasses7 = {
     sm: "h-1",
     md: "h-2",
     lg: "h-3"
@@ -2236,26 +2411,26 @@ var ProgressBar = ({
     warning: "bg-yellow-500 dark:bg-yellow-400",
     danger: "bg-red-600 dark:bg-red-500"
   };
-  return /* @__PURE__ */ jsxs22("div", { className: `w-full ${className}`, children: [
-    (showLabel || label) && /* @__PURE__ */ jsxs22("div", { className: "flex justify-between items-center mb-1", children: [
-      label && /* @__PURE__ */ jsx56("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
-      showLabel && /* @__PURE__ */ jsxs22("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+  return /* @__PURE__ */ jsxs23("div", { className: `w-full ${className}`, children: [
+    (showLabel || label) && /* @__PURE__ */ jsxs23("div", { className: "flex justify-between items-center mb-1", children: [
+      label && /* @__PURE__ */ jsx57("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
+      showLabel && /* @__PURE__ */ jsxs23("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
         Math.round(percentage),
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ jsx56(
+    /* @__PURE__ */ jsx57(
       "div",
       {
-        className: `w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden ${sizeClasses6[size]}`,
+        className: `w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden ${sizeClasses7[size]}`,
         role: "progressbar",
         "aria-valuenow": value,
         "aria-valuemin": 0,
         "aria-valuemax": max,
-        children: /* @__PURE__ */ jsx56(
+        children: /* @__PURE__ */ jsx57(
           "div",
           {
-            className: `${sizeClasses6[size]} ${variantClasses[variant]} rounded-full transition-all duration-300 ease-out`,
+            className: `${sizeClasses7[size]} ${variantClasses[variant]} rounded-full transition-all duration-300 ease-out`,
             style: { width: `${percentage}%` }
           }
         )
@@ -2265,8 +2440,8 @@ var ProgressBar = ({
 };
 
 // src/components/Slider.tsx
-import React17 from "react";
-import { jsx as jsx57, jsxs as jsxs23 } from "react/jsx-runtime";
+import React18 from "react";
+import { jsx as jsx58, jsxs as jsxs24 } from "react/jsx-runtime";
 var Slider = ({
   value: controlledValue,
   defaultValue = 50,
@@ -2279,7 +2454,7 @@ var Slider = ({
   label,
   className = ""
 }) => {
-  const [internalValue, setInternalValue] = React17.useState(defaultValue);
+  const [internalValue, setInternalValue] = React18.useState(defaultValue);
   const value = controlledValue !== void 0 ? controlledValue : internalValue;
   const handleChange = (e) => {
     const newValue = Number(e.target.value);
@@ -2287,21 +2462,21 @@ var Slider = ({
     onChange?.(newValue);
   };
   const percentage = (value - min) / (max - min) * 100;
-  return /* @__PURE__ */ jsxs23("div", { className: `w-full ${className}`, children: [
-    (label || showValue) && /* @__PURE__ */ jsxs23("div", { className: "flex justify-between items-center mb-2", children: [
-      label && /* @__PURE__ */ jsx57("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
-      showValue && /* @__PURE__ */ jsx57("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: value })
+  return /* @__PURE__ */ jsxs24("div", { className: `w-full ${className}`, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs24("div", { className: "flex justify-between items-center mb-2", children: [
+      label && /* @__PURE__ */ jsx58("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
+      showValue && /* @__PURE__ */ jsx58("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: value })
     ] }),
-    /* @__PURE__ */ jsxs23("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx57("div", { className: "absolute inset-0 h-2 bg-gray-200 dark:bg-gray-700 rounded-full top-1/2 -translate-y-1/2" }),
-      /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsxs24("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx58("div", { className: "absolute inset-0 h-2 bg-gray-200 dark:bg-gray-700 rounded-full top-1/2 -translate-y-1/2" }),
+      /* @__PURE__ */ jsx58(
         "div",
         {
           className: "absolute h-2 bg-blue-600 dark:bg-blue-500 rounded-full top-1/2 -translate-y-1/2 pointer-events-none",
           style: { width: `${percentage}%` }
         }
       ),
-      /* @__PURE__ */ jsx57(
+      /* @__PURE__ */ jsx58(
         "input",
         {
           type: "range",
@@ -2323,8 +2498,8 @@ var Slider = ({
 };
 
 // src/components/Avatar.tsx
-import React18 from "react";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import React19 from "react";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var Avatar = ({
   src,
   alt,
@@ -2334,8 +2509,8 @@ var Avatar = ({
   className = "",
   fallbackColor = "bg-blue-600"
 }) => {
-  const [imageError, setImageError] = React18.useState(false);
-  const sizeClasses6 = {
+  const [imageError, setImageError] = React19.useState(false);
+  const sizeClasses7 = {
     xs: "w-6 h-6 text-xs",
     sm: "w-8 h-8 text-sm",
     md: "w-10 h-10 text-base",
@@ -2352,11 +2527,11 @@ var Avatar = ({
   };
   const showImage = src && !imageError;
   const showInitials = !showImage && name;
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     "div",
     {
-      className: `${sizeClasses6[size]} ${shapeClass} flex items-center justify-center overflow-hidden ${showImage ? "bg-gray-200 dark:bg-gray-700" : `${fallbackColor} text-white`} ${className}`,
-      children: showImage ? /* @__PURE__ */ jsx58(
+      className: `${sizeClasses7[size]} ${shapeClass} flex items-center justify-center overflow-hidden ${showImage ? "bg-gray-200 dark:bg-gray-700" : `${fallbackColor} text-white`} ${className}`,
+      children: showImage ? /* @__PURE__ */ jsx59(
         "img",
         {
           src,
@@ -2364,13 +2539,13 @@ var Avatar = ({
           className: "w-full h-full object-cover",
           onError: () => setImageError(true)
         }
-      ) : showInitials ? /* @__PURE__ */ jsx58("span", { className: "font-semibold select-none", children: getInitials(name) }) : /* @__PURE__ */ jsx58(
+      ) : showInitials ? /* @__PURE__ */ jsx59("span", { className: "font-semibold select-none", children: getInitials(name) }) : /* @__PURE__ */ jsx59(
         "svg",
         {
           className: "w-full h-full text-gray-400 dark:text-gray-600",
           fill: "currentColor",
           viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx58("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
+          children: /* @__PURE__ */ jsx59("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
         }
       )
     }
@@ -2378,7 +2553,7 @@ var Avatar = ({
 };
 
 // src/components/Textarea.tsx
-import { jsx as jsx59, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs25 } from "react/jsx-runtime";
 var Textarea = ({
   label,
   error,
@@ -2389,7 +2564,7 @@ var Textarea = ({
   disabled,
   ...props
 }) => {
-  const sizeClasses6 = {
+  const sizeClasses7 = {
     sm: "px-3 py-1.5 text-sm min-h-[80px]",
     md: "px-4 py-2 text-base min-h-[100px]",
     lg: "px-4 py-3 text-lg min-h-[120px]"
@@ -2405,24 +2580,24 @@ var Textarea = ({
     bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100
     placeholder:text-gray-500 dark:placeholder:text-gray-400
     disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 dark:disabled:bg-gray-900`;
-  return /* @__PURE__ */ jsxs24("div", { className: `w-full ${className}`, children: [
-    label && /* @__PURE__ */ jsx59("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
-    /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsxs25("div", { className: `w-full ${className}`, children: [
+    label && /* @__PURE__ */ jsx60("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    /* @__PURE__ */ jsx60(
       "textarea",
       {
-        className: `${baseClasses} ${sizeClasses6[size]} ${resizeClasses[resize]}`,
+        className: `${baseClasses} ${sizeClasses7[size]} ${resizeClasses[resize]}`,
         disabled,
         ...props
       }
     ),
-    error && /* @__PURE__ */ jsx59("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
-    helperText && !error && /* @__PURE__ */ jsx59("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+    error && /* @__PURE__ */ jsx60("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx60("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
   ] });
 };
 
 // src/components/Toast.tsx
-import { createContext as createContext3, useContext as useContext3, useState as useState10, useCallback } from "react";
-import { jsx as jsx60, jsxs as jsxs25 } from "react/jsx-runtime";
+import { createContext as createContext3, useContext as useContext3, useState as useState11, useCallback } from "react";
+import { jsx as jsx61, jsxs as jsxs26 } from "react/jsx-runtime";
 var ToastContext = createContext3(void 0);
 var useToast = () => {
   const context = useContext3(ToastContext);
@@ -2432,7 +2607,7 @@ var useToast = () => {
   return context;
 };
 var ToastProvider = ({ children, position = "top-right" }) => {
-  const [toasts, setToasts] = useState10([]);
+  const [toasts, setToasts] = useState11([]);
   const addToast = useCallback((toast2) => {
     const id = Math.random().toString(36).substring(7);
     const newToast = { ...toast2, id };
@@ -2453,9 +2628,9 @@ var ToastProvider = ({ children, position = "top-right" }) => {
     "top-center": "top-4 left-1/2 -translate-x-1/2",
     "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
   };
-  return /* @__PURE__ */ jsxs25(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
+  return /* @__PURE__ */ jsxs26(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
     children,
-    /* @__PURE__ */ jsx60("div", { className: `fixed ${positionClasses2[position]} z-50 flex flex-col gap-2 max-w-md`, children: toasts.map((toast2) => /* @__PURE__ */ jsx60(ToastItem, { toast: toast2, onClose: () => removeToast(toast2.id) }, toast2.id)) })
+    /* @__PURE__ */ jsx61("div", { className: `fixed ${positionClasses2[position]} z-50 flex flex-col gap-2 max-w-md`, children: toasts.map((toast2) => /* @__PURE__ */ jsx61(ToastItem, { toast: toast2, onClose: () => removeToast(toast2.id) }, toast2.id)) })
   ] });
 };
 var ToastItem = ({ toast: toast2, onClose }) => {
@@ -2466,27 +2641,27 @@ var ToastItem = ({ toast: toast2, onClose }) => {
     info: "bg-blue-50 dark:bg-blue-900/30 border-blue-500 text-blue-800 dark:text-blue-200"
   };
   const typeIcons = {
-    success: /* @__PURE__ */ jsx60(CheckIcon, { size: "sm", className: "text-green-600 dark:text-green-400" }),
-    error: /* @__PURE__ */ jsx60(CloseIcon, { size: "sm", className: "text-red-600 dark:text-red-400" }),
-    warning: /* @__PURE__ */ jsx60("svg", { className: "w-4 h-4 text-yellow-600 dark:text-yellow-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx60("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
-    info: /* @__PURE__ */ jsx60("svg", { className: "w-4 h-4 text-blue-600 dark:text-blue-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx60("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) })
+    success: /* @__PURE__ */ jsx61(CheckIcon, { size: "sm", className: "text-green-600 dark:text-green-400" }),
+    error: /* @__PURE__ */ jsx61(CloseIcon, { size: "sm", className: "text-red-600 dark:text-red-400" }),
+    warning: /* @__PURE__ */ jsx61("svg", { className: "w-4 h-4 text-yellow-600 dark:text-yellow-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx61("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
+    info: /* @__PURE__ */ jsx61("svg", { className: "w-4 h-4 text-blue-600 dark:text-blue-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx61("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) })
   };
   const type = toast2.type || "info";
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       className: `flex items-start gap-3 p-4 rounded-lg border-l-4 shadow-lg backdrop-blur-sm ${typeStyles[type]} animate-slide-in`,
       role: "alert",
       children: [
-        /* @__PURE__ */ jsx60("div", { className: "flex-shrink-0 mt-0.5", children: typeIcons[type] }),
-        /* @__PURE__ */ jsx60("p", { className: "flex-1 text-sm font-medium", children: toast2.message }),
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx61("div", { className: "flex-shrink-0 mt-0.5", children: typeIcons[type] }),
+        /* @__PURE__ */ jsx61("p", { className: "flex-1 text-sm font-medium", children: toast2.message }),
+        /* @__PURE__ */ jsx61(
           "button",
           {
             onClick: onClose,
             className: "flex-shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors",
             "aria-label": "Close",
-            children: /* @__PURE__ */ jsx60(CloseIcon, { size: "sm" })
+            children: /* @__PURE__ */ jsx61(CloseIcon, { size: "sm" })
           }
         )
       ]
@@ -2517,8 +2692,8 @@ var toast = {
 };
 
 // src/components/Stepper.tsx
-import React20 from "react";
-import { jsx as jsx61, jsxs as jsxs26 } from "react/jsx-runtime";
+import React21 from "react";
+import { jsx as jsx62, jsxs as jsxs27 } from "react/jsx-runtime";
 var Stepper = ({
   steps,
   currentStep,
@@ -2526,18 +2701,18 @@ var Stepper = ({
   className = ""
 }) => {
   const isHorizontal = orientation === "horizontal";
-  return /* @__PURE__ */ jsx61("div", { className: `${isHorizontal ? "flex items-center" : "flex flex-col"} ${className}`, children: steps.map((step, index) => {
+  return /* @__PURE__ */ jsx62("div", { className: `${isHorizontal ? "flex items-center" : "flex flex-col"} ${className}`, children: steps.map((step, index) => {
     const stepNumber = index + 1;
     const isActive = stepNumber === currentStep;
     const isCompleted = stepNumber < currentStep;
     const isLast = index === steps.length - 1;
-    return /* @__PURE__ */ jsxs26(React20.Fragment, { children: [
-      /* @__PURE__ */ jsxs26("div", { className: `flex ${isHorizontal ? "flex-col items-center" : "flex-row items-start"} ${isHorizontal ? "" : "flex-1"}`, children: [
-        /* @__PURE__ */ jsx61("div", { className: "flex items-center", children: /* @__PURE__ */ jsx61(
+    return /* @__PURE__ */ jsxs27(React21.Fragment, { children: [
+      /* @__PURE__ */ jsxs27("div", { className: `flex ${isHorizontal ? "flex-col items-center" : "flex-row items-start"} ${isHorizontal ? "" : "flex-1"}`, children: [
+        /* @__PURE__ */ jsx62("div", { className: "flex items-center", children: /* @__PURE__ */ jsx62(
           "div",
           {
             className: `flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all ${isCompleted ? "bg-blue-600 border-blue-600 dark:bg-blue-500 dark:border-blue-500" : isActive ? "border-blue-600 bg-white dark:border-blue-500 dark:bg-gray-800" : "border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800"}`,
-            children: isCompleted ? /* @__PURE__ */ jsx61(CheckIcon, { size: "sm", className: "text-white" }) : /* @__PURE__ */ jsx61(
+            children: isCompleted ? /* @__PURE__ */ jsx62(CheckIcon, { size: "sm", className: "text-white" }) : /* @__PURE__ */ jsx62(
               "span",
               {
                 className: `text-sm font-semibold ${isActive ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"}`,
@@ -2546,18 +2721,18 @@ var Stepper = ({
             )
           }
         ) }),
-        /* @__PURE__ */ jsxs26("div", { className: `${isHorizontal ? "mt-2 text-center" : "ml-4 pb-8"} ${isLast && !isHorizontal ? "pb-0" : ""}`, children: [
-          /* @__PURE__ */ jsx61(
+        /* @__PURE__ */ jsxs27("div", { className: `${isHorizontal ? "mt-2 text-center" : "ml-4 pb-8"} ${isLast && !isHorizontal ? "pb-0" : ""}`, children: [
+          /* @__PURE__ */ jsx62(
             "p",
             {
               className: `text-sm font-medium ${isActive || isCompleted ? "text-gray-900 dark:text-gray-100" : "text-gray-500 dark:text-gray-400"}`,
               children: step.label
             }
           ),
-          step.description && /* @__PURE__ */ jsx61("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: step.description })
+          step.description && /* @__PURE__ */ jsx62("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: step.description })
         ] })
       ] }),
-      !isLast && /* @__PURE__ */ jsx61(
+      !isLast && /* @__PURE__ */ jsx62(
         "div",
         {
           className: `${isHorizontal ? "flex-1 h-0.5 mx-4" : "w-0.5 h-full ml-5 -mt-8"} ${isCompleted || isActive && stepNumber < currentStep ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-300 dark:bg-gray-600"}`
@@ -2568,7 +2743,7 @@ var Stepper = ({
 };
 
 // src/components/Divider.tsx
-import { jsx as jsx62, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs28 } from "react/jsx-runtime";
 var Divider = ({
   orientation = "horizontal",
   variant = "solid",
@@ -2587,14 +2762,14 @@ var Divider = ({
       center: "justify-center",
       right: "justify-end"
     };
-    return /* @__PURE__ */ jsxs27("div", { className: `flex items-center ${alignmentClasses[labelPosition]} ${className}`, role: "separator", children: [
-      labelPosition !== "left" && /* @__PURE__ */ jsx62("div", { className: `flex-1 border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600` }),
-      /* @__PURE__ */ jsx62("span", { className: "px-4 text-sm text-gray-500 dark:text-gray-400", children: label }),
-      labelPosition !== "right" && /* @__PURE__ */ jsx62("div", { className: `flex-1 border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600` })
+    return /* @__PURE__ */ jsxs28("div", { className: `flex items-center ${alignmentClasses[labelPosition]} ${className}`, role: "separator", children: [
+      labelPosition !== "left" && /* @__PURE__ */ jsx63("div", { className: `flex-1 border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600` }),
+      /* @__PURE__ */ jsx63("span", { className: "px-4 text-sm text-gray-500 dark:text-gray-400", children: label }),
+      labelPosition !== "right" && /* @__PURE__ */ jsx63("div", { className: `flex-1 border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600` })
     ] });
   }
   if (orientation === "vertical") {
-    return /* @__PURE__ */ jsx62(
+    return /* @__PURE__ */ jsx63(
       "div",
       {
         className: `inline-block h-full border-l ${variantClasses[variant]} border-gray-300 dark:border-gray-600 ${className}`,
@@ -2603,7 +2778,7 @@ var Divider = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     "hr",
     {
       className: `border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600 ${className}`,
@@ -2613,8 +2788,8 @@ var Divider = ({
 };
 
 // src/components/FileUpload.tsx
-import { useRef as useRef5, useState as useState11 } from "react";
-import { jsx as jsx63, jsxs as jsxs28 } from "react/jsx-runtime";
+import { useRef as useRef6, useState as useState12 } from "react";
+import { jsx as jsx64, jsxs as jsxs29 } from "react/jsx-runtime";
 var FileUpload = ({
   accept,
   multiple = false,
@@ -2627,9 +2802,9 @@ var FileUpload = ({
   label,
   helperText
 }) => {
-  const [files, setFiles] = useState11([]);
-  const [isDragging, setIsDragging] = useState11(false);
-  const fileInputRef = useRef5(null);
+  const [files, setFiles] = useState12([]);
+  const [isDragging, setIsDragging] = useState12(false);
+  const fileInputRef = useRef6(null);
   const formatFileSize = (bytes) => {
     if (bytes === 0) return "0 Bytes";
     const k = 1024;
@@ -2687,9 +2862,9 @@ var FileUpload = ({
     setFiles(newFiles);
     onChange?.(newFiles);
   };
-  return /* @__PURE__ */ jsxs28("div", { className: `w-full ${className}`, children: [
-    label && /* @__PURE__ */ jsx63("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: label }),
-    /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29("div", { className: `w-full ${className}`, children: [
+    label && /* @__PURE__ */ jsx64("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: label }),
+    /* @__PURE__ */ jsxs29(
       "div",
       {
         onDrop: handleDrop,
@@ -2698,7 +2873,7 @@ var FileUpload = ({
         onClick: handleClick,
         className: `relative border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-all ${isDragging ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20" : "border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500"} ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
         children: [
-          /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx64(
             "input",
             {
               ref: fileInputRef,
@@ -2710,14 +2885,14 @@ var FileUpload = ({
               className: "hidden"
             }
           ),
-          /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center gap-2", children: [
-            /* @__PURE__ */ jsx63("div", { className: "w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsx63(UploadIcon, { size: "lg", className: "text-gray-400 dark:text-gray-500" }) }),
-            /* @__PURE__ */ jsxs28("div", { children: [
-              /* @__PURE__ */ jsxs28("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
-                /* @__PURE__ */ jsx63("span", { className: "text-blue-600 dark:text-blue-400", children: "Click to upload" }),
+          /* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ jsx64("div", { className: "w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsx64(UploadIcon, { size: "lg", className: "text-gray-400 dark:text-gray-500" }) }),
+            /* @__PURE__ */ jsxs29("div", { children: [
+              /* @__PURE__ */ jsxs29("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+                /* @__PURE__ */ jsx64("span", { className: "text-blue-600 dark:text-blue-400", children: "Click to upload" }),
                 " or drag and drop"
               ] }),
-              /* @__PURE__ */ jsxs28("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: [
+              /* @__PURE__ */ jsxs29("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: [
                 accept ? `Accepted: ${accept}` : "Any file type",
                 maxSize && ` \u2022 Max size: ${formatFileSize(maxSize)}`
               ] })
@@ -2726,17 +2901,17 @@ var FileUpload = ({
         ]
       }
     ),
-    helperText && /* @__PURE__ */ jsx63("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
-    files.length > 0 && /* @__PURE__ */ jsx63("div", { className: "mt-4 space-y-2", children: files.map((file, index) => /* @__PURE__ */ jsxs28(
+    helperText && /* @__PURE__ */ jsx64("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    files.length > 0 && /* @__PURE__ */ jsx64("div", { className: "mt-4 space-y-2", children: files.map((file, index) => /* @__PURE__ */ jsxs29(
       "div",
       {
         className: "flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700",
         children: [
-          /* @__PURE__ */ jsxs28("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx63("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 truncate", children: file.name }),
-            /* @__PURE__ */ jsx63("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: formatFileSize(file.size) })
+          /* @__PURE__ */ jsxs29("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx64("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 truncate", children: file.name }),
+            /* @__PURE__ */ jsx64("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: formatFileSize(file.size) })
           ] }),
-          /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx64(
             "button",
             {
               onClick: (e) => {
@@ -2745,7 +2920,7 @@ var FileUpload = ({
               },
               className: "ml-4 text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors",
               "aria-label": "Remove file",
-              children: /* @__PURE__ */ jsx63(CloseIcon, { size: "sm" })
+              children: /* @__PURE__ */ jsx64(CloseIcon, { size: "sm" })
             }
           )
         ]
@@ -2823,6 +2998,7 @@ export {
   MenuIcon,
   Modal,
   Navbar,
+  NumberInput,
   Pagination,
   PlusIcon,
   ProgressBar,