@marcoschwartz/lite-ui 0.7.1 → 0.8.0

package/dist/index.mjs

@@ -198,6 +198,9 @@ var Select = ({
   value: controlledValue,
   defaultValue,
   onChange,
+  label,
+  error,
+  helperText,
   ...props
 }) => {
   const { theme, themeName } = useTheme();
@@ -232,7 +235,8 @@ var Select = ({
   const baseStyles = theme.select.base;
   const sizeStyles2 = theme.select.sizes[size];
   const disabledStyles = disabled ? theme.select.disabled : "";
-  const buttonClasses = `${baseStyles} ${sizeStyles2} ${disabledStyles} ${className}`.trim();
+  const errorStyles = error ? "border-red-500 focus:ring-red-500 dark:border-red-500" : "";
+  const buttonClasses = `${baseStyles} ${sizeStyles2} ${disabledStyles} ${errorStyles}`.trim();
   const iconColor = themeName === "minimalistic" ? disabled ? "text-gray-600" : "text-white" : disabled ? "text-gray-400" : "text-gray-500";
   const dropdownBaseStyles = themeName === "minimalistic" ? "bg-black border-2 border-white" : "bg-white border border-gray-300 shadow-lg dark:bg-gray-800 dark:border-gray-600";
   const optionBaseStyles = themeName === "minimalistic" ? "text-white hover:bg-white hover:text-black transition-colors duration-200" : "text-gray-900 hover:bg-blue-50 transition-colors duration-150 dark:text-gray-100 dark:hover:bg-gray-700";
@@ -242,51 +246,56 @@ var Select = ({
     lg: "px-4 py-3 text-lg",
     xl: "px-5 py-4 text-xl"
   }[size];
-  return /* @__PURE__ */ jsxs2("div", { className: "relative inline-block w-full", ref: dropdownRef, ...props, children: [
-    /* @__PURE__ */ jsx3(
-      "button",
-      {
-        type: "button",
-        className: buttonClasses,
-        onClick: handleToggle,
-        disabled,
-        children: /* @__PURE__ */ jsx3("span", { className: !selectedOption && placeholder ? "opacity-50" : "", children: displayText })
-      }
-    ),
-    /* @__PURE__ */ jsx3("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4", children: /* @__PURE__ */ jsx3(
-      "svg",
-      {
-        className: `h-5 w-5 transition-transform duration-200 ${iconColor} ${isOpen ? "rotate-180" : ""}`,
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 20 20",
-        fill: "currentColor",
-        "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx3(
-          "path",
-          {
-            fillRule: "evenodd",
-            d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
-            clipRule: "evenodd"
-          }
-        )
-      }
-    ) }),
-    isOpen && !disabled && /* @__PURE__ */ jsx3(
-      "div",
-      {
-        className: `absolute z-50 w-full mt-1 ${dropdownBaseStyles} rounded-lg overflow-hidden`,
-        style: { maxHeight: "300px", overflowY: "auto" },
-        children: options.map((option) => /* @__PURE__ */ jsx3(
-          "div",
-          {
-            className: `${optionBaseStyles} ${optionSizeStyles} cursor-pointer ${value === option.value ? themeName === "minimalistic" ? "bg-white text-black" : "bg-blue-50 dark:bg-gray-700" : ""}`,
-            onClick: () => handleSelect(option.value),
-            children: option.label
-          },
-          option.value
-        ))
-      }
-    )
+  return /* @__PURE__ */ jsxs2("div", { className: `w-full ${className}`, children: [
+    label && /* @__PURE__ */ jsx3("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    /* @__PURE__ */ jsxs2("div", { className: "relative inline-block w-full", ref: dropdownRef, ...props, children: [
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: buttonClasses,
+          onClick: handleToggle,
+          disabled,
+          children: /* @__PURE__ */ jsx3("span", { className: !selectedOption && placeholder ? "opacity-50" : "", children: displayText })
+        }
+      ),
+      /* @__PURE__ */ jsx3("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4", children: /* @__PURE__ */ jsx3(
+        "svg",
+        {
+          className: `h-5 w-5 transition-transform duration-200 ${iconColor} ${isOpen ? "rotate-180" : ""}`,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 20 20",
+          fill: "currentColor",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx3(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+              clipRule: "evenodd"
+            }
+          )
+        }
+      ) }),
+      isOpen && !disabled && /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: `absolute z-50 w-full mt-1 ${dropdownBaseStyles} rounded-lg overflow-hidden`,
+          style: { maxHeight: "300px", overflowY: "auto" },
+          children: options.map((option) => /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: `${optionBaseStyles} ${optionSizeStyles} cursor-pointer ${value === option.value ? themeName === "minimalistic" ? "bg-white text-black" : "bg-blue-50 dark:bg-gray-700" : ""}`,
+              onClick: () => handleSelect(option.value),
+              children: option.label
+            },
+            option.value
+          ))
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
   ] });
 };
 
@@ -1412,37 +1421,227 @@ var Pagination = ({
 };
 
 // src/components/DatePicker.tsx
-import { forwardRef as forwardRef4 } from "react";
+import { useState as useState7, useRef as useRef3, useEffect as useEffect6 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 import { jsx as jsx51, jsxs as jsxs17 } from "react/jsx-runtime";
-var DatePicker = 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__ */ 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__ */ jsx51(
-        "input",
-        {
-          ref,
-          type: "date",
-          disabled,
-          className: `${baseStyles} ${errorStyles} ${disabledStyles}`.trim(),
-          ...props
-        }
-      ),
-      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 })
-    ] });
+var DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var DatePicker = ({
+  label,
+  error,
+  helperText,
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  disabled,
+  className = "",
+  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);
+  useEffect6(() => {
+    setMounted(true);
+  }, []);
+  useEffect6(() => {
+    const handleClickOutside = (event) => {
+      if (calendarRef.current && !calendarRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+  useEffect6(() => {
+    if (isOpen && inputRef.current) {
+      const rect = inputRef.current.getBoundingClientRect();
+      setCalendarPosition({
+        top: rect.bottom + 8,
+        left: rect.left
+      });
+    } else {
+      setCalendarPosition(null);
+    }
+  }, [isOpen]);
+  const year = viewDate.getFullYear();
+  const month = viewDate.getMonth();
+  const firstDayOfMonth = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const daysInPrevMonth = new Date(year, month, 0).getDate();
+  const calendarDays = [];
+  for (let i = firstDayOfMonth - 1; i >= 0; i--) {
+    calendarDays.push(new Date(year, month - 1, daysInPrevMonth - i));
   }
-);
+  for (let i = 1; i <= daysInMonth; i++) {
+    calendarDays.push(new Date(year, month, i));
+  }
+  const remainingDays = 42 - calendarDays.length;
+  for (let i = 1; i <= remainingDays; i++) {
+    calendarDays.push(new Date(year, month + 1, i));
+  }
+  const isSameDay = (date1, date2) => {
+    return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+  };
+  const isToday = (date) => {
+    return isSameDay(date, /* @__PURE__ */ new Date());
+  };
+  const isSelected = (date) => {
+    return value && isSameDay(date, value);
+  };
+  const isCurrentMonth = (date) => {
+    return date.getMonth() === month;
+  };
+  const isDisabled = (date) => {
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    return false;
+  };
+  const handleDateClick = (date) => {
+    if (isDisabled(date)) return;
+    onChange?.(date);
+    setIsOpen(false);
+  };
+  const handlePrevMonth = () => {
+    setViewDate(new Date(year, month - 1, 1));
+  };
+  const handleNextMonth = () => {
+    setViewDate(new Date(year, month + 1, 1));
+  };
+  const handleToday = () => {
+    const today = /* @__PURE__ */ new Date();
+    setViewDate(today);
+    onChange?.(today);
+    setIsOpen(false);
+  };
+  const formatDate = (date) => {
+    if (!date) return "";
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    });
+  };
+  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(
+    "div",
+    {
+      ref: calendarRef,
+      className: "fixed z-[9999] bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-xl p-4",
+      style: {
+        top: `${calendarPosition.top}px`,
+        left: `${calendarPosition.left}px`,
+        minWidth: "320px"
+      },
+      children: [
+        /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsx51(
+            "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" }) })
+            }
+          ),
+          /* @__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: [
+              MONTHS[month],
+              " ",
+              year
+            ] }),
+            /* @__PURE__ */ jsx51(
+              "button",
+              {
+                onClick: handleToday,
+                className: "px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors",
+                children: "Today"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx51(
+            "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" }) })
+            }
+          )
+        ] }),
+        /* @__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) => {
+          const isCurrentMonthDay = isCurrentMonth(date);
+          const isTodayDay = isToday(date);
+          const isSelectedDay = isSelected(date);
+          const isDisabledDay = isDisabled(date);
+          return /* @__PURE__ */ jsx51(
+            "button",
+            {
+              onClick: () => handleDateClick(date),
+              disabled: isDisabledDay,
+              className: `
+                aspect-square p-1 rounded-lg text-sm font-medium transition-all
+                ${!isCurrentMonthDay ? "text-gray-400 dark:text-gray-600" : "text-gray-900 dark:text-gray-100"}
+                ${isTodayDay && !isSelectedDay ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-bold" : ""}
+                ${isSelectedDay ? "bg-blue-600 text-white hover:bg-blue-700" : ""}
+                ${!isSelectedDay && !isDisabledDay ? "hover:bg-gray-100 dark:hover:bg-gray-700" : ""}
+                ${isDisabledDay ? "opacity-30 cursor-not-allowed" : "cursor-pointer"}
+              `,
+              children: date.getDate()
+            },
+            index
+          );
+        }) })
+      ]
+    }
+  ) : 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(
+      "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" }) })
+        ]
+      }
+    ),
+    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 }),
+    mounted && createPortal2(calendar, document.body)
+  ] });
+};
 DatePicker.displayName = "DatePicker";
 
 // src/components/TimePicker.tsx
-import { forwardRef as forwardRef5 } from "react";
+import { forwardRef as forwardRef4 } from "react";
 import { jsx as jsx52, jsxs as jsxs18 } from "react/jsx-runtime";
-var TimePicker = forwardRef5(
+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";
@@ -1468,36 +1667,503 @@ var TimePicker = forwardRef5(
 TimePicker.displayName = "TimePicker";
 
 // src/components/DateTimePicker.tsx
-import { forwardRef as forwardRef6 } from "react";
+import { useState as useState8, useRef as useRef4, useEffect as useEffect7 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx53, jsxs as jsxs19 } from "react/jsx-runtime";
-var DateTimePicker = forwardRef6(
-  ({ 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__ */ 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",
+var DAYS2 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var MONTHS2 = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var DateTimePicker = ({
+  label,
+  error,
+  helperText,
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  disabled,
+  className = "",
+  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(
+    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);
+  useEffect7(() => {
+    setMounted(true);
+  }, []);
+  useEffect7(() => {
+    const handleClickOutside = (event) => {
+      if (pickerRef.current && !pickerRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+  useEffect7(() => {
+    if (isOpen && inputRef.current) {
+      const rect = inputRef.current.getBoundingClientRect();
+      setPickerPosition({
+        top: rect.bottom + 8,
+        left: rect.left
+      });
+    } else {
+      setPickerPosition(null);
+    }
+  }, [isOpen]);
+  const year = viewDate.getFullYear();
+  const month = viewDate.getMonth();
+  const firstDayOfMonth = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const daysInPrevMonth = new Date(year, month, 0).getDate();
+  const calendarDays = [];
+  for (let i = firstDayOfMonth - 1; i >= 0; i--) {
+    calendarDays.push(new Date(year, month - 1, daysInPrevMonth - i));
+  }
+  for (let i = 1; i <= daysInMonth; i++) {
+    calendarDays.push(new Date(year, month, i));
+  }
+  const remainingDays = 42 - calendarDays.length;
+  for (let i = 1; i <= remainingDays; i++) {
+    calendarDays.push(new Date(year, month + 1, i));
+  }
+  const isSameDay = (date1, date2) => {
+    return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+  };
+  const isToday = (date) => {
+    return isSameDay(date, /* @__PURE__ */ new Date());
+  };
+  const isSelected = (date) => {
+    return value && isSameDay(date, value);
+  };
+  const isCurrentMonth = (date) => {
+    return date.getMonth() === month;
+  };
+  const isDisabled = (date) => {
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    return false;
+  };
+  const handleDateClick = (date) => {
+    if (isDisabled(date)) return;
+    const newDateTime = new Date(
+      date.getFullYear(),
+      date.getMonth(),
+      date.getDate(),
+      selectedTime.hours,
+      selectedTime.minutes
+    );
+    onChange?.(newDateTime);
+  };
+  const handleTimeChange = (hours, minutes) => {
+    setSelectedTime({ hours, minutes });
+    if (value) {
+      const newDateTime = new Date(
+        value.getFullYear(),
+        value.getMonth(),
+        value.getDate(),
+        hours,
+        minutes
+      );
+      onChange?.(newDateTime);
+    }
+  };
+  const handleDone = () => {
+    if (value) {
+      setIsOpen(false);
+    }
+  };
+  const handlePrevMonth = () => {
+    setViewDate(new Date(year, month - 1, 1));
+  };
+  const handleNextMonth = () => {
+    setViewDate(new Date(year, month + 1, 1));
+  };
+  const handleToday = () => {
+    const now = /* @__PURE__ */ new Date();
+    setViewDate(now);
+    setSelectedTime({ hours: now.getHours(), minutes: now.getMinutes() });
+    onChange?.(now);
+  };
+  const formatDateTime = (date) => {
+    if (!date) return "";
+    return date.toLocaleString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: true
+    });
+  };
+  const formatTime = (hours, minutes) => {
+    const period = hours >= 12 ? "PM" : "AM";
+    const displayHours = hours % 12 || 12;
+    const displayMinutes = minutes.toString().padStart(2, "0");
+    return `${displayHours}:${displayMinutes} ${period}`;
+  };
+  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(
+    "div",
+    {
+      ref: pickerRef,
+      className: "fixed z-[9999] bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-xl p-4",
+      style: {
+        top: `${pickerPosition.top}px`,
+        left: `${pickerPosition.left}px`,
+        minWidth: "360px"
+      },
+      children: [
+        /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsx53(
+            "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" }) })
+            }
+          ),
+          /* @__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: [
+              MONTHS2[month],
+              " ",
+              year
+            ] }),
+            /* @__PURE__ */ jsx53(
+              "button",
+              {
+                onClick: handleToday,
+                className: "px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors",
+                children: "Now"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx53(
+            "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" }) })
+            }
+          )
+        ] }),
+        /* @__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) => {
+          const isCurrentMonthDay = isCurrentMonth(date);
+          const isTodayDay = isToday(date);
+          const isSelectedDay = isSelected(date);
+          const isDisabledDay = isDisabled(date);
+          return /* @__PURE__ */ jsx53(
+            "button",
+            {
+              onClick: () => handleDateClick(date),
+              disabled: isDisabledDay,
+              className: `
+                aspect-square p-1 rounded-lg text-sm font-medium transition-all
+                ${!isCurrentMonthDay ? "text-gray-400 dark:text-gray-600" : "text-gray-900 dark:text-gray-100"}
+                ${isTodayDay && !isSelectedDay ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-bold" : ""}
+                ${isSelectedDay ? "bg-blue-600 text-white hover:bg-blue-700" : ""}
+                ${!isSelectedDay && !isDisabledDay ? "hover:bg-gray-100 dark:hover:bg-gray-700" : ""}
+                ${isDisabledDay ? "opacity-30 cursor-not-allowed" : "cursor-pointer"}
+              `,
+              children: date.getDate()
+            },
+            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(
+                  "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" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx53(
+                  "input",
+                  {
+                    type: "number",
+                    min: "0",
+                    max: "23",
+                    value: selectedTime.hours,
+                    onChange: (e) => {
+                      const val = parseInt(e.target.value);
+                      if (!isNaN(val) && val >= 0 && val <= 23) {
+                        handleTimeChange(val, selectedTime.minutes);
+                      }
+                    },
+                    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(
+                  "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" }) })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__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(
+                  "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" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx53(
+                  "input",
+                  {
+                    type: "number",
+                    min: "0",
+                    max: "59",
+                    value: selectedTime.minutes,
+                    onChange: (e) => {
+                      const val = parseInt(e.target.value);
+                      if (!isNaN(val) && val >= 0 && val <= 59) {
+                        handleTimeChange(selectedTime.hours, val);
+                      }
+                    },
+                    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(
+                  "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" }) })
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__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(
+            "button",
+            {
+              onClick: handleDone,
+              className: "w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium",
+              children: "Done"
+            }
+          )
+        ] })
+      ]
+    }
+  ) : 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(
+      "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" }) })
+        ]
+      }
+    ),
+    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 }),
+    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";
+var DAYS3 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var MONTHS3 = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var Calendar = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  className = ""
+}) => {
+  const { theme } = useTheme();
+  const [currentDate, setCurrentDate] = useState9(value || /* @__PURE__ */ new Date());
+  const [viewDate, setViewDate] = useState9(value || /* @__PURE__ */ new Date());
+  const year = viewDate.getFullYear();
+  const month = viewDate.getMonth();
+  const firstDayOfMonth = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const daysInPrevMonth = new Date(year, month, 0).getDate();
+  const calendarDays = [];
+  for (let i = firstDayOfMonth - 1; i >= 0; i--) {
+    calendarDays.push(new Date(year, month - 1, daysInPrevMonth - i));
+  }
+  for (let i = 1; i <= daysInMonth; i++) {
+    calendarDays.push(new Date(year, month, i));
+  }
+  const remainingDays = 42 - calendarDays.length;
+  for (let i = 1; i <= remainingDays; i++) {
+    calendarDays.push(new Date(year, month + 1, i));
+  }
+  const isSameDay = (date1, date2) => {
+    return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+  };
+  const isToday = (date) => {
+    return isSameDay(date, /* @__PURE__ */ new Date());
+  };
+  const isSelected = (date) => {
+    return value && isSameDay(date, value);
+  };
+  const isCurrentMonth = (date) => {
+    return date.getMonth() === month;
+  };
+  const isDisabled = (date) => {
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    return false;
+  };
+  const handleDateClick = (date) => {
+    if (isDisabled(date)) return;
+    setCurrentDate(date);
+    onChange?.(date);
+  };
+  const handlePrevMonth = () => {
+    setViewDate(new Date(year, month - 1, 1));
+  };
+  const handleNextMonth = () => {
+    setViewDate(new Date(year, month + 1, 1));
+  };
+  const handleToday = () => {
+    const today = /* @__PURE__ */ new Date();
+    setViewDate(today);
+    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(
+        "button",
         {
-          ref,
-          type: "datetime-local",
-          disabled,
-          className: `${baseStyles} ${errorStyles} ${disabledStyles}`.trim(),
-          ...props
+          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" }) })
         }
       ),
-      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 })
-    ] });
-  }
-);
-DateTimePicker.displayName = "DateTimePicker";
+      /* @__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: [
+          MONTHS3[month],
+          " ",
+          year
+        ] }),
+        /* @__PURE__ */ jsx54(
+          "button",
+          {
+            onClick: handleToday,
+            className: "px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors",
+            children: "Today"
+          }
+        )
+      ] }),
+      /* @__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__ */ 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__ */ jsx54("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS3.map((day) => /* @__PURE__ */ jsx54(
+      "div",
+      {
+        className: "text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-2",
+        children: day
+      },
+      day
+    )) }),
+    /* @__PURE__ */ jsx54("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
+      if (!date) return /* @__PURE__ */ jsx54("div", {}, index);
+      const isCurrentMonthDay = isCurrentMonth(date);
+      const isTodayDay = isToday(date);
+      const isSelectedDay = isSelected(date);
+      const isDisabledDay = isDisabled(date);
+      return /* @__PURE__ */ jsx54(
+        "button",
+        {
+          onClick: () => handleDateClick(date),
+          disabled: isDisabledDay,
+          className: `
+                aspect-square p-2 rounded-lg text-sm font-medium transition-all
+                ${!isCurrentMonthDay ? "text-gray-400 dark:text-gray-600" : "text-gray-900 dark:text-gray-100"}
+                ${isTodayDay && !isSelectedDay ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-bold" : ""}
+                ${isSelectedDay ? "bg-blue-600 text-white hover:bg-blue-700" : ""}
+                ${!isSelectedDay && !isDisabledDay ? "hover:bg-gray-100 dark:hover:bg-gray-700" : ""}
+                ${isDisabledDay ? "opacity-30 cursor-not-allowed" : "cursor-pointer"}
+              `,
+          children: date.getDate()
+        },
+        index
+      );
+    }) })
+  ] });
+};
 
 // src/components/Radio.tsx
-import React15 from "react";
-import { jsx as jsx54, jsxs as jsxs20 } from "react/jsx-runtime";
+import React16 from "react";
+import { jsx as jsx55, jsxs as jsxs21 } from "react/jsx-runtime";
 var Radio = ({
   name,
   options,
@@ -1508,7 +2174,7 @@ var Radio = ({
   orientation = "vertical",
   className = ""
 }) => {
-  const [internalValue, setInternalValue] = React15.useState(defaultValue || "");
+  const [internalValue, setInternalValue] = React16.useState(defaultValue || "");
   const value = controlledValue !== void 0 ? controlledValue : internalValue;
   const handleChange = (optionValue) => {
     if (disabled) return;
@@ -1516,17 +2182,17 @@ var Radio = ({
     onChange?.(optionValue);
   };
   const containerClass = orientation === "horizontal" ? "flex flex-wrap gap-4" : "flex flex-col gap-2";
-  return /* @__PURE__ */ jsx54("div", { className: `${containerClass} ${className}`, role: "radiogroup", children: options.map((option) => {
+  return /* @__PURE__ */ jsx55("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__ */ jsxs20(
+    return /* @__PURE__ */ jsxs21(
       "label",
       {
         htmlFor: id,
         className: `flex items-center gap-2 cursor-pointer ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`,
         children: [
-          /* @__PURE__ */ jsx54(
+          /* @__PURE__ */ jsx55(
             "input",
             {
               type: "radio",
@@ -1539,7 +2205,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__ */ jsx54("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-300", children: option.label })
+          /* @__PURE__ */ jsx55("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-300", children: option.label })
         ]
       },
       option.value
@@ -1548,7 +2214,7 @@ var Radio = ({
 };
 
 // src/components/ProgressBar.tsx
-import { jsx as jsx55, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs22 } from "react/jsx-runtime";
 var ProgressBar = ({
   value,
   max = 100,
@@ -1570,15 +2236,15 @@ var ProgressBar = ({
     warning: "bg-yellow-500 dark:bg-yellow-400",
     danger: "bg-red-600 dark:bg-red-500"
   };
-  return /* @__PURE__ */ jsxs21("div", { className: `w-full ${className}`, children: [
-    (showLabel || label) && /* @__PURE__ */ jsxs21("div", { className: "flex justify-between items-center mb-1", children: [
-      label && /* @__PURE__ */ jsx55("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
-      showLabel && /* @__PURE__ */ jsxs21("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+  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: [
         Math.round(percentage),
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx56(
       "div",
       {
         className: `w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden ${sizeClasses6[size]}`,
@@ -1586,7 +2252,7 @@ var ProgressBar = ({
         "aria-valuenow": value,
         "aria-valuemin": 0,
         "aria-valuemax": max,
-        children: /* @__PURE__ */ jsx55(
+        children: /* @__PURE__ */ jsx56(
           "div",
           {
             className: `${sizeClasses6[size]} ${variantClasses[variant]} rounded-full transition-all duration-300 ease-out`,
@@ -1599,8 +2265,8 @@ var ProgressBar = ({
 };
 
 // src/components/Slider.tsx
-import React16 from "react";
-import { jsx as jsx56, jsxs as jsxs22 } from "react/jsx-runtime";
+import React17 from "react";
+import { jsx as jsx57, jsxs as jsxs23 } from "react/jsx-runtime";
 var Slider = ({
   value: controlledValue,
   defaultValue = 50,
@@ -1613,7 +2279,7 @@ var Slider = ({
   label,
   className = ""
 }) => {
-  const [internalValue, setInternalValue] = React16.useState(defaultValue);
+  const [internalValue, setInternalValue] = React17.useState(defaultValue);
   const value = controlledValue !== void 0 ? controlledValue : internalValue;
   const handleChange = (e) => {
     const newValue = Number(e.target.value);
@@ -1621,21 +2287,21 @@ var Slider = ({
     onChange?.(newValue);
   };
   const percentage = (value - min) / (max - min) * 100;
-  return /* @__PURE__ */ jsxs22("div", { className: `w-full ${className}`, children: [
-    (label || showValue) && /* @__PURE__ */ jsxs22("div", { className: "flex justify-between items-center mb-2", children: [
-      label && /* @__PURE__ */ jsx56("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
-      showValue && /* @__PURE__ */ jsx56("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: value })
+  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 })
     ] }),
-    /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx56("div", { className: "absolute inset-0 h-2 bg-gray-200 dark:bg-gray-700 rounded-full top-1/2 -translate-y-1/2" }),
-      /* @__PURE__ */ jsx56(
+    /* @__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(
         "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__ */ jsx56(
+      /* @__PURE__ */ jsx57(
         "input",
         {
           type: "range",
@@ -1657,8 +2323,8 @@ var Slider = ({
 };
 
 // src/components/Avatar.tsx
-import React17 from "react";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import React18 from "react";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var Avatar = ({
   src,
   alt,
@@ -1668,7 +2334,7 @@ var Avatar = ({
   className = "",
   fallbackColor = "bg-blue-600"
 }) => {
-  const [imageError, setImageError] = React17.useState(false);
+  const [imageError, setImageError] = React18.useState(false);
   const sizeClasses6 = {
     xs: "w-6 h-6 text-xs",
     sm: "w-8 h-8 text-sm",
@@ -1686,11 +2352,11 @@ var Avatar = ({
   };
   const showImage = src && !imageError;
   const showInitials = !showImage && name;
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     "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__ */ jsx57(
+      children: showImage ? /* @__PURE__ */ jsx58(
         "img",
         {
           src,
@@ -1698,13 +2364,13 @@ var Avatar = ({
           className: "w-full h-full object-cover",
           onError: () => setImageError(true)
         }
-      ) : showInitials ? /* @__PURE__ */ jsx57("span", { className: "font-semibold select-none", children: getInitials(name) }) : /* @__PURE__ */ jsx57(
+      ) : showInitials ? /* @__PURE__ */ jsx58("span", { className: "font-semibold select-none", children: getInitials(name) }) : /* @__PURE__ */ jsx58(
         "svg",
         {
           className: "w-full h-full text-gray-400 dark:text-gray-600",
           fill: "currentColor",
           viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx57("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__ */ 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" })
         }
       )
     }
@@ -1712,7 +2378,7 @@ var Avatar = ({
 };
 
 // src/components/Textarea.tsx
-import { jsx as jsx58, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs24 } from "react/jsx-runtime";
 var Textarea = ({
   label,
   error,
@@ -1739,9 +2405,9 @@ 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__ */ jsxs23("div", { className: `w-full ${className}`, children: [
-    label && /* @__PURE__ */ jsx58("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
-    /* @__PURE__ */ jsx58(
+  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(
       "textarea",
       {
         className: `${baseClasses} ${sizeClasses6[size]} ${resizeClasses[resize]}`,
@@ -1749,14 +2415,14 @@ var Textarea = ({
         ...props
       }
     ),
-    error && /* @__PURE__ */ jsx58("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
-    helperText && !error && /* @__PURE__ */ jsx58("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+    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 })
   ] });
 };
 
 // src/components/Toast.tsx
-import { createContext as createContext3, useContext as useContext3, useState as useState7, useCallback } from "react";
-import { jsx as jsx59, jsxs as jsxs24 } from "react/jsx-runtime";
+import { createContext as createContext3, useContext as useContext3, useState as useState10, useCallback } from "react";
+import { jsx as jsx60, jsxs as jsxs25 } from "react/jsx-runtime";
 var ToastContext = createContext3(void 0);
 var useToast = () => {
   const context = useContext3(ToastContext);
@@ -1766,7 +2432,7 @@ var useToast = () => {
   return context;
 };
 var ToastProvider = ({ children, position = "top-right" }) => {
-  const [toasts, setToasts] = useState7([]);
+  const [toasts, setToasts] = useState10([]);
   const addToast = useCallback((toast2) => {
     const id = Math.random().toString(36).substring(7);
     const newToast = { ...toast2, id };
@@ -1787,9 +2453,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__ */ jsxs24(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
+  return /* @__PURE__ */ jsxs25(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
     children,
-    /* @__PURE__ */ jsx59("div", { className: `fixed ${positionClasses2[position]} z-50 flex flex-col gap-2 max-w-md`, children: toasts.map((toast2) => /* @__PURE__ */ jsx59(ToastItem, { toast: toast2, onClose: () => removeToast(toast2.id) }, toast2.id)) })
+    /* @__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)) })
   ] });
 };
 var ToastItem = ({ toast: toast2, onClose }) => {
@@ -1800,27 +2466,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__ */ jsx59(CheckIcon, { size: "sm", className: "text-green-600 dark:text-green-400" }),
-    error: /* @__PURE__ */ jsx59(CloseIcon, { size: "sm", className: "text-red-600 dark:text-red-400" }),
-    warning: /* @__PURE__ */ jsx59("svg", { className: "w-4 h-4 text-yellow-600 dark:text-yellow-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx59("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__ */ jsx59("svg", { className: "w-4 h-4 text-blue-600 dark:text-blue-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx59("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__ */ 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" }) })
   };
   const type = toast2.type || "info";
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "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__ */ jsx59("div", { className: "flex-shrink-0 mt-0.5", children: typeIcons[type] }),
-        /* @__PURE__ */ jsx59("p", { className: "flex-1 text-sm font-medium", children: toast2.message }),
-        /* @__PURE__ */ jsx59(
+        /* @__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(
           "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__ */ jsx59(CloseIcon, { size: "sm" })
+            children: /* @__PURE__ */ jsx60(CloseIcon, { size: "sm" })
           }
         )
       ]
@@ -1851,8 +2517,8 @@ var toast = {
 };
 
 // src/components/Stepper.tsx
-import React19 from "react";
-import { jsx as jsx60, jsxs as jsxs25 } from "react/jsx-runtime";
+import React20 from "react";
+import { jsx as jsx61, jsxs as jsxs26 } from "react/jsx-runtime";
 var Stepper = ({
   steps,
   currentStep,
@@ -1860,18 +2526,18 @@ var Stepper = ({
   className = ""
 }) => {
   const isHorizontal = orientation === "horizontal";
-  return /* @__PURE__ */ jsx60("div", { className: `${isHorizontal ? "flex items-center" : "flex flex-col"} ${className}`, children: steps.map((step, index) => {
+  return /* @__PURE__ */ jsx61("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__ */ jsxs25(React19.Fragment, { children: [
-      /* @__PURE__ */ jsxs25("div", { className: `flex ${isHorizontal ? "flex-col items-center" : "flex-row items-start"} ${isHorizontal ? "" : "flex-1"}`, children: [
-        /* @__PURE__ */ jsx60("div", { className: "flex items-center", children: /* @__PURE__ */ jsx60(
+    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(
           "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__ */ jsx60(CheckIcon, { size: "sm", className: "text-white" }) : /* @__PURE__ */ jsx60(
+            children: isCompleted ? /* @__PURE__ */ jsx61(CheckIcon, { size: "sm", className: "text-white" }) : /* @__PURE__ */ jsx61(
               "span",
               {
                 className: `text-sm font-semibold ${isActive ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"}`,
@@ -1880,18 +2546,18 @@ var Stepper = ({
             )
           }
         ) }),
-        /* @__PURE__ */ jsxs25("div", { className: `${isHorizontal ? "mt-2 text-center" : "ml-4 pb-8"} ${isLast && !isHorizontal ? "pb-0" : ""}`, children: [
-          /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsxs26("div", { className: `${isHorizontal ? "mt-2 text-center" : "ml-4 pb-8"} ${isLast && !isHorizontal ? "pb-0" : ""}`, children: [
+          /* @__PURE__ */ jsx61(
             "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__ */ jsx60("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: step.description })
+          step.description && /* @__PURE__ */ jsx61("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: step.description })
         ] })
       ] }),
-      !isLast && /* @__PURE__ */ jsx60(
+      !isLast && /* @__PURE__ */ jsx61(
         "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"}`
@@ -1902,7 +2568,7 @@ var Stepper = ({
 };
 
 // src/components/Divider.tsx
-import { jsx as jsx61, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs27 } from "react/jsx-runtime";
 var Divider = ({
   orientation = "horizontal",
   variant = "solid",
@@ -1921,14 +2587,14 @@ var Divider = ({
       center: "justify-center",
       right: "justify-end"
     };
-    return /* @__PURE__ */ jsxs26("div", { className: `flex items-center ${alignmentClasses[labelPosition]} ${className}`, role: "separator", children: [
-      labelPosition !== "left" && /* @__PURE__ */ jsx61("div", { className: `flex-1 border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600` }),
-      /* @__PURE__ */ jsx61("span", { className: "px-4 text-sm text-gray-500 dark:text-gray-400", children: label }),
-      labelPosition !== "right" && /* @__PURE__ */ jsx61("div", { className: `flex-1 border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600` })
+    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` })
     ] });
   }
   if (orientation === "vertical") {
-    return /* @__PURE__ */ jsx61(
+    return /* @__PURE__ */ jsx62(
       "div",
       {
         className: `inline-block h-full border-l ${variantClasses[variant]} border-gray-300 dark:border-gray-600 ${className}`,
@@ -1937,7 +2603,7 @@ var Divider = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx62(
     "hr",
     {
       className: `border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600 ${className}`,
@@ -1947,8 +2613,8 @@ var Divider = ({
 };
 
 // src/components/FileUpload.tsx
-import { useRef as useRef3, useState as useState8 } from "react";
-import { jsx as jsx62, jsxs as jsxs27 } from "react/jsx-runtime";
+import { useRef as useRef5, useState as useState11 } from "react";
+import { jsx as jsx63, jsxs as jsxs28 } from "react/jsx-runtime";
 var FileUpload = ({
   accept,
   multiple = false,
@@ -1961,9 +2627,9 @@ var FileUpload = ({
   label,
   helperText
 }) => {
-  const [files, setFiles] = useState8([]);
-  const [isDragging, setIsDragging] = useState8(false);
-  const fileInputRef = useRef3(null);
+  const [files, setFiles] = useState11([]);
+  const [isDragging, setIsDragging] = useState11(false);
+  const fileInputRef = useRef5(null);
   const formatFileSize = (bytes) => {
     if (bytes === 0) return "0 Bytes";
     const k = 1024;
@@ -2021,9 +2687,9 @@ var FileUpload = ({
     setFiles(newFiles);
     onChange?.(newFiles);
   };
-  return /* @__PURE__ */ jsxs27("div", { className: `w-full ${className}`, children: [
-    label && /* @__PURE__ */ jsx62("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: label }),
-    /* @__PURE__ */ jsxs27(
+  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(
       "div",
       {
         onDrop: handleDrop,
@@ -2032,7 +2698,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__ */ jsx62(
+          /* @__PURE__ */ jsx63(
             "input",
             {
               ref: fileInputRef,
@@ -2044,14 +2710,14 @@ var FileUpload = ({
               className: "hidden"
             }
           ),
-          /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center gap-2", children: [
-            /* @__PURE__ */ jsx62("div", { className: "w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsx62(UploadIcon, { size: "lg", className: "text-gray-400 dark:text-gray-500" }) }),
-            /* @__PURE__ */ jsxs27("div", { children: [
-              /* @__PURE__ */ jsxs27("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
-                /* @__PURE__ */ jsx62("span", { className: "text-blue-600 dark:text-blue-400", children: "Click to upload" }),
+          /* @__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" }),
                 " or drag and drop"
               ] }),
-              /* @__PURE__ */ jsxs27("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: [
+              /* @__PURE__ */ jsxs28("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)}`
               ] })
@@ -2060,17 +2726,17 @@ var FileUpload = ({
         ]
       }
     ),
-    helperText && /* @__PURE__ */ jsx62("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
-    files.length > 0 && /* @__PURE__ */ jsx62("div", { className: "mt-4 space-y-2", children: files.map((file, index) => /* @__PURE__ */ jsxs27(
+    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(
       "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__ */ jsxs27("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx62("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 truncate", children: file.name }),
-            /* @__PURE__ */ jsx62("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: formatFileSize(file.size) })
+          /* @__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__ */ jsx62(
+          /* @__PURE__ */ jsx63(
             "button",
             {
               onClick: (e) => {
@@ -2079,7 +2745,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__ */ jsx62(CloseIcon, { size: "sm" })
+              children: /* @__PURE__ */ jsx63(CloseIcon, { size: "sm" })
             }
           )
         ]
@@ -2130,6 +2796,7 @@ export {
   Badge,
   BellIcon,
   Button,
+  Calendar,
   CalendarIcon,
   CameraIcon,
   Card,