tccd-ui 0.0.75 → 0.0.76

package/dist/index.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -188,8 +178,8 @@ function Checkbox({
 }
 
 // src/components/DatePicker.tsx
-var import_react_datepicker = __toESM(require("react-datepicker"));
-var import_react_datepicker2 = require("react-datepicker/dist/react-datepicker.css");
+var import_react = require("react");
+var import_react_dom = require("react-dom");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function DatePicker({
   label,
@@ -201,23 +191,13 @@ function DatePicker({
   minDate,
   maxDate
 }) {
-  var _a, _b;
-  const parseDate = (dateStr) => {
-    if (!dateStr) return null;
-    return new Date(dateStr);
-  };
-  const formatDate = (date) => {
-    if (!date) return "";
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, "0");
-    const day = String(date.getDate()).padStart(2, "0");
-    return `${year}-${month}-${day}`;
-  };
-  const handleDateChange = (date) => {
-    onChange(formatDate(date));
-  };
-  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-  const years = Array.from({ length: 111 }, (_, i) => currentYear - 100 + i);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [currentMonth, setCurrentMonth] = (0, import_react.useState)((/* @__PURE__ */ new Date()).getMonth());
+  const [currentYear, setCurrentYear] = (0, import_react.useState)((/* @__PURE__ */ new Date()).getFullYear());
+  const [dropdownPosition, setDropdownPosition] = (0, import_react.useState)({ top: 0, left: 0, width: 0 });
+  const wrapperRef = (0, import_react.useRef)(null);
+  const buttonRef = (0, import_react.useRef)(null);
+  const dropdownRef = (0, import_react.useRef)(null);
   const months = [
     "January",
     "February",
@@ -232,118 +212,210 @@ function DatePicker({
     "November",
     "December"
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col w-full datepicker-wrapper", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "text-label dark:text-gray-200 text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_react_datepicker.default,
-        {
-          id,
-          selected: parseDate(value),
-          onChange: handleDateChange,
-          disabled,
-          minDate: minDate ? (_a = parseDate(minDate)) != null ? _a : void 0 : void 0,
-          maxDate: maxDate ? (_b = parseDate(maxDate)) != null ? _b : void 0 : void 0,
-          dateFormat: "yyyy-MM-dd",
-          placeholderText: "Select a date",
-          showYearDropdown: true,
-          showMonthDropdown: true,
-          dropdownMode: "select",
-          yearDropdownItemNumber: 111,
-          scrollableYearDropdown: true,
-          renderCustomHeader: ({
-            date,
-            changeYear,
-            changeMonth,
-            decreaseMonth,
-            increaseMonth,
-            prevMonthButtonDisabled,
-            nextMonthButtonDisabled
-          }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "datepicker-header", children: [
+  const years = Array.from({ length: 111 }, (_, i) => (/* @__PURE__ */ new Date()).getFullYear() - 100 + i);
+  const updateDropdownPosition = (0, import_react.useCallback)(() => {
+    if (buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const dropdownHeight = 380;
+      const top = spaceBelow < dropdownHeight && rect.top > dropdownHeight ? rect.top - dropdownHeight + window.scrollY : rect.bottom + window.scrollY + 8;
+      setDropdownPosition({
+        top,
+        left: rect.left + window.scrollX,
+        width: Math.max(rect.width, 300)
+      });
+    }
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (isOpen) {
+      if (value) {
+        const date = new Date(value);
+        setCurrentMonth(date.getMonth());
+        setCurrentYear(date.getFullYear());
+      }
+      updateDropdownPosition();
+    }
+  }, [isOpen, value, updateDropdownPosition]);
+  (0, import_react.useEffect)(() => {
+    if (!isOpen) return;
+    const handlePositionUpdate = () => updateDropdownPosition();
+    window.addEventListener("scroll", handlePositionUpdate, true);
+    window.addEventListener("resize", handlePositionUpdate);
+    return () => {
+      window.removeEventListener("scroll", handlePositionUpdate, true);
+      window.removeEventListener("resize", handlePositionUpdate);
+    };
+  }, [isOpen, updateDropdownPosition]);
+  (0, import_react.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target) && dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const parseDate = (dateStr) => {
+    if (!dateStr) return null;
+    return new Date(dateStr);
+  };
+  const formatDate = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  };
+  const getDisplayValue = () => {
+    if (!value) return "Select a date";
+    return value;
+  };
+  const handleDateSelect = (day) => {
+    const selectedDate = new Date(currentYear, currentMonth, day);
+    if (minDate && selectedDate < new Date(minDate)) return;
+    if (maxDate && selectedDate > new Date(maxDate)) return;
+    onChange(formatDate(selectedDate));
+    setIsOpen(false);
+  };
+  const getDaysInMonth = (month, year) => {
+    return new Date(year, month + 1, 0).getDate();
+  };
+  const getFirstDayOfMonth = (month, year) => {
+    return new Date(year, month, 1).getDay();
+  };
+  const isDateDisabled = (day) => {
+    const date = new Date(currentYear, currentMonth, day);
+    if (minDate && date < new Date(minDate)) return true;
+    if (maxDate && date > new Date(maxDate)) return true;
+    return false;
+  };
+  const isDateSelected = (day) => {
+    if (!value) return false;
+    const selectedDate = parseDate(value);
+    if (!selectedDate) return false;
+    return selectedDate.getDate() === day && selectedDate.getMonth() === currentMonth && selectedDate.getFullYear() === currentYear;
+  };
+  const isToday = (day) => {
+    const today = /* @__PURE__ */ new Date();
+    return today.getDate() === day && today.getMonth() === currentMonth && today.getFullYear() === currentYear;
+  };
+  const prevMonth = () => {
+    if (currentMonth === 0) {
+      setCurrentMonth(11);
+      setCurrentYear(currentYear - 1);
+    } else {
+      setCurrentMonth(currentMonth - 1);
+    }
+  };
+  const nextMonth = () => {
+    if (currentMonth === 11) {
+      setCurrentMonth(0);
+      setCurrentYear(currentYear + 1);
+    } else {
+      setCurrentMonth(currentMonth + 1);
+    }
+  };
+  const renderCalendarDays = () => {
+    const daysInMonth = getDaysInMonth(currentMonth, currentYear);
+    const firstDay = getFirstDayOfMonth(currentMonth, currentYear);
+    const days = [];
+    for (let i = 0; i < firstDay; i++) {
+      days.push(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "calendar-day empty" }, `empty-${i}`));
+    }
+    for (let day = 1; day <= daysInMonth; day++) {
+      const isDisabled = isDateDisabled(day);
+      const isSelected = isDateSelected(day);
+      const isTodayDate = isToday(day);
+      days.push(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => !isDisabled && handleDateSelect(day),
+            disabled: isDisabled,
+            className: `calendar-day ${isSelected ? "selected" : ""} ${isTodayDate ? "today" : ""} ${isDisabled ? "disabled" : ""}`,
+            children: day
+          },
+          day
+        )
+      );
+    }
+    return days;
+  };
+  const dropdownContent = isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      ref: dropdownRef,
+      className: "datepicker-dropdown-portal",
+      style: {
+        position: "absolute",
+        top: dropdownPosition.top,
+        left: dropdownPosition.left,
+        width: dropdownPosition.width,
+        zIndex: 99999
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "datepicker-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: prevMonth, className: "nav-button", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4 sm:w-5 sm:h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 19l-7-7 7-7" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "selects-container", children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "button",
+              "select",
               {
-                type: "button",
-                onClick: decreaseMonth,
-                disabled: prevMonthButtonDisabled,
-                className: "nav-button",
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "svg",
-                  {
-                    className: "w-5 h-5",
-                    fill: "none",
-                    stroke: "currentColor",
-                    viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: "2",
-                        d: "M15 19l-7-7 7-7"
-                      }
-                    )
-                  }
-                )
+                value: currentMonth,
+                onChange: (e) => setCurrentMonth(Number(e.target.value)),
+                className: "month-select",
+                children: months.map((month, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: index, children: month }, month))
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "selects-container", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "select",
-                {
-                  value: months[date.getMonth()],
-                  onChange: ({ target: { value: value2 } }) => changeMonth(months.indexOf(value2)),
-                  className: "month-select",
-                  children: months.map((month) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: month, children: month }, month))
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "select",
-                {
-                  value: date.getFullYear(),
-                  onChange: ({ target: { value: value2 } }) => changeYear(Number(value2)),
-                  className: "year-select",
-                  children: years.map((year) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: year, children: year }, year))
-                }
-              )
-            ] }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "button",
+              "select",
               {
-                type: "button",
-                onClick: increaseMonth,
-                disabled: nextMonthButtonDisabled,
-                className: "nav-button",
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "svg",
-                  {
-                    className: "w-5 h-5",
-                    fill: "none",
-                    stroke: "currentColor",
-                    viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: "2",
-                        d: "M9 5l7 7-7 7"
-                      }
-                    )
-                  }
-                )
+                value: currentYear,
+                onChange: (e) => setCurrentYear(Number(e.target.value)),
+                className: "year-select",
+                children: years.map((year) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: year, children: year }, year))
               }
             )
           ] }),
-          className: `w-full border-contrast rounded-full px-4 md:px-5 py-2 border outline-none ${error ? "border-red-300 focus:border-red-500 focus:ring-red-500/30 dark:border-red-700 dark:focus:border-red-600" : "focus:border-primary dark:focus:border-primary"} ${disabled ? "bg-gray-100 dark:bg-gray-700 cursor-not-allowed opacity-60" : "bg-white dark:bg-gray-900"} transition-all duration-300 ease-in-out text-sm pr-10 dark:text-white dark:border-gray-700`,
-          wrapperClassName: "w-full",
-          popperClassName: "datepicker-popper"
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: nextMonth, className: "nav-button", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4 sm:w-5 sm:h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 5l7 7-7 7" }) }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "day-names", children: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "day-name", children: day }, day)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "calendar-grid", children: renderCalendarDays() }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              const today = /* @__PURE__ */ new Date();
+              setCurrentMonth(today.getMonth());
+              setCurrentYear(today.getFullYear());
+              handleDateSelect(today.getDate());
+            },
+            className: "today-button",
+            children: "Today"
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col w-full datepicker-wrapper", ref: wrapperRef, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "text-label dark:text-gray-200 text-[12px] sm:text-[13px] md:text-[14px] lg:text-[15px] xl:text-[16px] mb-1 sm:mb-2 font-semibold", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          ref: buttonRef,
+          id,
+          type: "button",
+          onClick: () => !disabled && setIsOpen(!isOpen),
+          disabled,
+          className: `w-full border-contrast rounded-full px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 border outline-none text-left text-xs sm:text-sm ${error ? "border-red-300 focus:border-red-500 focus:ring-red-500/30 dark:border-red-700 dark:focus:border-red-600" : "focus:border-primary dark:focus:border-primary"} ${disabled ? "bg-gray-100 dark:bg-gray-700 cursor-not-allowed opacity-60" : "bg-white dark:bg-gray-900 cursor-pointer"} transition-all duration-300 ease-in-out pr-8 sm:pr-10 dark:text-white dark:border-gray-700`,
+          children: getDisplayValue()
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute right-2 sm:right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "svg",
         {
-          className: `w-5 h-5 ${disabled ? "text-gray-400 dark:text-gray-600" : "text-secondary dark:text-blue-400"}`,
+          className: `w-4 h-4 sm:w-5 sm:h-5 ${disabled ? "text-gray-400 dark:text-gray-600" : "text-secondary dark:text-blue-400"}`,
           "aria-hidden": "true",
           xmlns: "http://www.w3.org/2000/svg",
           fill: "none",
@@ -359,286 +431,278 @@ function DatePicker({
             }
           )
         }
-      ) })
+      ) }),
+      isOpen && (0, import_react_dom.createPortal)(dropdownContent, document.body)
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-red-500 dark:text-red-400 text-sm font-medium mt-1", children: error }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-red-500 dark:text-red-400 text-xs sm:text-sm font-medium mt-1", children: error }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
-        /* Modern Professional DatePicker - Blue Theme (#295e7e) */
-        .datepicker-wrapper .react-datepicker-wrapper {
-          width: 100%;
-        }
-        
-        .datepicker-wrapper .react-datepicker-popper {
-          z-index: 50;
+        /* Modern Professional DatePicker - Blue Theme */
+        .datepicker-wrapper {
+          position: relative;
         }
         
-        .datepicker-wrapper .react-datepicker {
-          font-family: inherit;
-          border: none;
-          border-radius: 1.25rem;
+        .datepicker-dropdown-portal {
+          min-width: 280px;
+          max-width: 340px;
+          background: white;
+          border-radius: 1rem;
+          border: 1px solid #e5e7eb;
           box-shadow: 
-            0 25px 50px -12px rgba(0, 0, 0, 0.25),
-            0 0 0 1px rgba(0, 0, 0, 0.05);
+            0 25px 50px -12px rgba(0, 0, 0, 0.15),
+            0 10px 20px -5px rgba(0, 0, 0, 0.1);
           overflow: hidden;
-          background: white;
-        }
-        
-        .datepicker-wrapper .react-datepicker__month-container {
-          background: white;
+          animation: slideDown 0.2s ease-out;
         }
         
-        /* Custom Header */
-        .datepicker-wrapper .react-datepicker__header {
-          background: transparent;
-          border: none;
-          padding: 0;
+        @media (min-width: 640px) {
+          .datepicker-dropdown-portal {
+            min-width: 320px;
+            max-width: 380px;
+            border-radius: 1.25rem;
+          }
         }
         
-        .datepicker-wrapper .react-datepicker__header--custom {
-          padding: 0;
+        @keyframes slideDown {
+          from {
+            opacity: 0;
+            transform: translateY(-10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
         }
         
-        .datepicker-wrapper .datepicker-header {
+        .datepicker-dropdown-portal .datepicker-header {
           display: flex;
           align-items: center;
           justify-content: space-between;
-          padding: 1rem 0.75rem;
+          padding: 0.5rem;
           background: linear-gradient(135deg, #295e7e 0%, #1e4a63 100%);
-          gap: 0.5rem;
+          gap: 0.25rem;
         }
         
-        .datepicker-wrapper .nav-button {
+        @media (min-width: 640px) {
+          .datepicker-dropdown-portal .datepicker-header {
+            padding: 0.75rem;
+            gap: 0.5rem;
+          }
+        }
+        
+        .datepicker-dropdown-portal .nav-button {
           display: flex;
           align-items: center;
           justify-content: center;
-          width: 2.25rem;
-          height: 2.25rem;
-          border-radius: 0.75rem;
+          width: 1.75rem;
+          height: 1.75rem;
+          border-radius: 0.5rem;
           background: rgba(255, 255, 255, 0.15);
-          backdrop-filter: blur(4px);
           border: 1px solid rgba(255, 255, 255, 0.2);
           color: white;
           cursor: pointer;
           transition: all 0.2s ease;
         }
         
-        .datepicker-wrapper .nav-button:hover:not(:disabled) {
-          background: rgba(255, 255, 255, 0.25);
-          transform: scale(1.05);
+        @media (min-width: 640px) {
+          .datepicker-dropdown-portal .nav-button {
+            width: 2rem;
+            height: 2rem;
+          }
         }
         
-        .datepicker-wrapper .nav-button:disabled {
-          opacity: 0.4;
-          cursor: not-allowed;
+        .datepicker-dropdown-portal .nav-button:hover {
+          background: rgba(255, 255, 255, 0.25);
         }
         
-        .datepicker-wrapper .selects-container {
+        .datepicker-dropdown-portal .selects-container {
           display: flex;
-          gap: 0.5rem;
+          gap: 0.25rem;
           flex: 1;
           justify-content: center;
         }
         
-        .datepicker-wrapper .month-select,
-        .datepicker-wrapper .year-select {
-          padding: 0.5rem 0.75rem;
-          border-radius: 0.625rem;
+        @media (min-width: 640px) {
+          .datepicker-dropdown-portal .selects-container {
+            gap: 0.5rem;
+          }
+        }
+        
+        .datepicker-dropdown-portal .month-select,
+        .datepicker-dropdown-portal .year-select {
+          padding: 0.25rem 0.375rem;
+          border-radius: 0.375rem;
           background: rgba(255, 255, 255, 0.95);
           border: none;
-          font-size: 0.875rem;
+          font-size: 0.7rem;
           font-weight: 600;
           color: #295e7e;
           cursor: pointer;
           outline: none;
-          transition: all 0.2s ease;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
         
-        .datepicker-wrapper .month-select:hover,
-        .datepicker-wrapper .year-select:hover {
-          background: white;
-          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        @media (min-width: 640px) {
+          .datepicker-dropdown-portal .month-select,
+          .datepicker-dropdown-portal .year-select {
+            padding: 0.375rem 0.5rem;
+            border-radius: 0.5rem;
+            font-size: 0.8rem;
+          }
         }
         
-        .datepicker-wrapper .month-select:focus,
-        .datepicker-wrapper .year-select:focus {
-          box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
+        .datepicker-dropdown-portal .day-names {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          background: linear-gradient(135deg, #3a7ca5 0%, #295e7e 100%);
+          padding: 0.375rem;
         }
         
-        /* Day Names Row */
-        .datepicker-wrapper .react-datepicker__day-names {
-          background: linear-gradient(135deg, #3a7ca5 0%, #295e7e 100%);
-          margin: 0;
-          padding: 0.75rem 0.5rem;
-          display: flex;
-          justify-content: space-around;
+        @media (min-width: 640px) {
+          .datepicker-dropdown-portal .day-names {
+            padding: 0.5rem;
+          }
         }
         
-        .datepicker-wrapper .react-datepicker__day-name {
-          color: rgba(255, 255, 255, 0.9);
+        .datepicker-dropdown-portal .day-name {
+          text-align: center;
+          font-size: 0.6rem;
           font-weight: 600;
-          font-size: 0.75rem;
+          color: rgba(255, 255, 255, 0.9);
           text-transform: uppercase;
           letter-spacing: 0.05em;
-          width: 2.75rem;
-          margin: 0;
         }
         
-        /* Month Area */
-        .datepicker-wrapper .react-datepicker__month {
-          margin: 0;
-          padding: 0.75rem;
+        @media (min-width: 640px) {
+          .datepicker-dropdown-portal .day-name {
+            font-size: 0.7rem;
+          }
         }
         
-        .datepicker-wrapper .react-datepicker__week {
-          display: flex;
-          justify-content: space-around;
+        .datepicker-dropdown-portal .calendar-grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          padding: 0.375rem;
+          gap: 0.125rem;
         }
         
-        /* Day Cells */
-        .datepicker-wrapper .react-datepicker__day {
-          color: #374151;
+        @media (min-width: 640px) {
+          .datepicker-dropdown-portal .calendar-grid {
+            padding: 0.5rem;
+          }
+        }
+        
+        .datepicker-dropdown-portal .calendar-day {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          aspect-ratio: 1;
+          font-size: 0.85rem;
           font-weight: 500;
-          font-size: 0.875rem;
-          width: 2.75rem;
-          height: 2.75rem;
-          line-height: 2.75rem;
-          margin: 0.125rem;
-          border-radius: 0.75rem;
-          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+          color: #374151;
+          background: transparent;
+          border: none;
+          border-radius: 0.5rem;
+          cursor: pointer;
+          transition: all 0.15s ease;
+        }
+        
+        .datepicker-dropdown-portal .calendar-day.empty {
+          cursor: default;
         }
         
-        .datepicker-wrapper .react-datepicker__day:hover {
+        .datepicker-dropdown-portal .calendar-day:not(.empty):not(.disabled):hover {
           background: #b8d4e8;
           color: #1e4a63;
-          transform: scale(1.1);
-          font-weight: 600;
         }
         
-        .datepicker-wrapper .react-datepicker__day--selected,
-        .datepicker-wrapper .react-datepicker__day--keyboard-selected {
+        .datepicker-dropdown-portal .calendar-day.selected {
           background: linear-gradient(135deg, #295e7e 0%, #1e4a63 100%) !important;
           color: white !important;
           font-weight: 700;
-          box-shadow: 0 4px 14px rgba(41, 94, 126, 0.4);
-          transform: scale(1.05);
-        }
-        
-        .datepicker-wrapper .react-datepicker__day--selected:hover,
-        .datepicker-wrapper .react-datepicker__day--keyboard-selected:hover {
-          background: linear-gradient(135deg, #1e4a63 0%, #163a4f 100%) !important;
-          transform: scale(1.15);
+          box-shadow: 0 2px 8px rgba(41, 94, 126, 0.3);
         }
         
-        .datepicker-wrapper .react-datepicker__day--today {
-          font-weight: 700;
+        .datepicker-dropdown-portal .calendar-day.today:not(.selected) {
           background: linear-gradient(135deg, #3a7ca5 0%, #4a8cb5 100%);
           color: white;
+          font-weight: 600;
         }
         
-        .datepicker-wrapper .react-datepicker__day--today:hover {
-          background: linear-gradient(135deg, #295e7e 0%, #3a7ca5 100%);
-          color: white;
-        }
-        
-        .datepicker-wrapper .react-datepicker__day--disabled {
+        .datepicker-dropdown-portal .calendar-day.disabled {
           color: #d1d5db;
           cursor: not-allowed;
-          opacity: 0.5;
         }
         
-        .datepicker-wrapper .react-datepicker__day--disabled:hover {
-          background: transparent;
-          transform: none;
-        }
-        
-        .datepicker-wrapper .react-datepicker__day--outside-month {
-          color: #d1d5db;
-        }
-        
-        .datepicker-wrapper .react-datepicker__day--outside-month:hover {
-          color: #9ca3af;
-        }
-        
-        .datepicker-wrapper .react-datepicker__triangle {
-          display: none;
+        .datepicker-dropdown-portal .today-button {
+          display: block;
+          width: calc(100% - 1rem);
+          margin: 0 0.5rem 0.5rem;
+          padding: 0.5rem;
+          background: linear-gradient(135deg, #295e7e 0%, #1e4a63 100%);
+          color: white;
+          font-weight: 600;
+          font-size: 0.85rem;
+          border: none;
+          border-radius: 0.5rem;
+          cursor: pointer;
+          transition: all 0.2s ease;
         }
         
-        .datepicker-wrapper .react-datepicker__navigation {
-          display: none;
+        .datepicker-dropdown-portal .today-button:hover {
+          transform: translateY(-1px);
+          box-shadow: 0 4px 12px rgba(41, 94, 126, 0.4);
         }
         
         /* ==================== DARK MODE ==================== */
-        .dark .datepicker-wrapper .react-datepicker {
+        .dark .datepicker-dropdown-portal {
           background: #1f2937;
+          border-color: #374151;
           box-shadow: 
             0 25px 50px -12px rgba(0, 0, 0, 0.5),
-            0 0 0 1px rgba(255, 255, 255, 0.1);
-        }
-        
-        .dark .datepicker-wrapper .react-datepicker__month-container {
-          background: #1f2937;
+            0 10px 20px -5px rgba(0, 0, 0, 0.3);
         }
         
-        .dark .datepicker-wrapper .datepicker-header {
+        .dark .datepicker-dropdown-portal .datepicker-header {
           background: linear-gradient(135deg, #295e7e 0%, #1e4a63 100%);
         }
         
-        .dark .datepicker-wrapper .nav-button {
+        .dark .datepicker-dropdown-portal .nav-button {
           background: rgba(0, 0, 0, 0.2);
           border-color: rgba(255, 255, 255, 0.1);
         }
         
-        .dark .datepicker-wrapper .nav-button:hover:not(:disabled) {
+        .dark .datepicker-dropdown-portal .nav-button:hover {
           background: rgba(0, 0, 0, 0.3);
         }
         
-        .dark .datepicker-wrapper .month-select,
-        .dark .datepicker-wrapper .year-select {
+        .dark .datepicker-dropdown-portal .month-select,
+        .dark .datepicker-dropdown-portal .year-select {
           background: #374151;
           color: #f9fafb;
         }
         
-        .dark .datepicker-wrapper .month-select:hover,
-        .dark .datepicker-wrapper .year-select:hover {
-          background: #4b5563;
-        }
-        
-        .dark .datepicker-wrapper .react-datepicker__day-names {
+        .dark .datepicker-dropdown-portal .day-names {
           background: linear-gradient(135deg, #3a7ca5 0%, #295e7e 100%);
         }
         
-        .dark .datepicker-wrapper .react-datepicker__day {
+        .dark .datepicker-dropdown-portal .calendar-day {
           color: #e5e7eb;
         }
         
-        .dark .datepicker-wrapper .react-datepicker__day:hover {
+        .dark .datepicker-dropdown-portal .calendar-day:not(.empty):not(.disabled):hover {
           background: #374151;
           color: white;
         }
         
-        .dark .datepicker-wrapper .react-datepicker__day--today {
-          background: linear-gradient(135deg, #3a7ca5 0%, #4a8cb5 100%);
-          color: white;
-        }
-        
-        .dark .datepicker-wrapper .react-datepicker__day--disabled {
+        .dark .datepicker-dropdown-portal .calendar-day.disabled {
           color: #6b7280;
         }
-        
-        .dark .datepicker-wrapper .react-datepicker__day--outside-month {
-          color: #6b7280;
-        }
-        
-        .dark .datepicker-wrapper .react-datepicker__day--outside-month:hover {
-          color: #9ca3af;
-        }
       ` })
   ] });
 }
 
 // src/components/DropdownMenu.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_io5 = require("react-icons/io5");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function DropdownMenu({
@@ -652,10 +716,10 @@ function DropdownMenu({
   className = "",
   id
 }) {
-  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
-  const dropdownRef = (0, import_react.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const dropdownRef = (0, import_react2.useRef)(null);
   const selectedOption = options.find((option) => option.value === value);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -720,7 +784,7 @@ function DropdownMenu({
 }
 
 // src/components/DropdownPopup.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var DropdownPopup = ({
   isOpen,
@@ -731,9 +795,9 @@ var DropdownPopup = ({
   triggerRef,
   alignToTrigger = false
 }) => {
-  const menuRef = (0, import_react2.useRef)(null);
-  const [menuOffset, setMenuOffset] = (0, import_react2.useState)({});
-  (0, import_react2.useEffect)(() => {
+  const menuRef = (0, import_react3.useRef)(null);
+  const [menuOffset, setMenuOffset] = (0, import_react3.useState)({});
+  (0, import_react3.useEffect)(() => {
     if (!isOpen) return;
     const handleClickOutside = (event) => {
       if (menuRef.current && !menuRef.current.contains(event.target)) {
@@ -751,7 +815,7 @@ var DropdownPopup = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isOpen, onClose, triggerRef]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     var _a;
     if (!isOpen || !alignToTrigger || !(triggerRef == null ? void 0 : triggerRef.current) || !menuRef.current) {
       setMenuOffset({});
@@ -876,17 +940,17 @@ function ErrorScreen({
 }
 
 // src/components/FullScreenDisplayer.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_fa6 = require("react-icons/fa6");
 var import_fi = require("react-icons/fi");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function FullScreenViewer({ isOpen, items, index, setIndex, onClose }) {
-  const startX = (0, import_react3.useRef)(null);
-  const videoRef = (0, import_react3.useRef)(null);
-  const containerRef = (0, import_react3.useRef)(null);
-  const contentRef = (0, import_react3.useRef)(null);
-  const [zoom, setZoom] = (0, import_react3.useState)(1);
-  (0, import_react3.useEffect)(() => {
+  const startX = (0, import_react4.useRef)(null);
+  const videoRef = (0, import_react4.useRef)(null);
+  const containerRef = (0, import_react4.useRef)(null);
+  const contentRef = (0, import_react4.useRef)(null);
+  const [zoom, setZoom] = (0, import_react4.useState)(1);
+  (0, import_react4.useEffect)(() => {
     function onKey(e) {
       if (!open) return;
       e.preventDefault();
@@ -1069,7 +1133,7 @@ function InfoScreen({
 }
 
 // src/components/LazyImageLoader.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_hi = require("react-icons/hi");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var LazyImageLoader = ({
@@ -1079,8 +1143,8 @@ var LazyImageLoader = ({
   width = "100%",
   height = "200px"
 }) => {
-  const [imageLoaded, setImageLoaded] = (0, import_react4.useState)(false);
-  const [imageError, setImageError] = (0, import_react4.useState)(false);
+  const [imageLoaded, setImageLoaded] = (0, import_react5.useState)(false);
+  const [imageError, setImageError] = (0, import_react5.useState)(false);
   const isVideo = (src == null ? void 0 : src.endsWith(".mp4")) || (src == null ? void 0 : src.endsWith(".webm")) || (src == null ? void 0 : src.endsWith(".mov")) || (src == null ? void 0 : src.endsWith(".avi")) || false;
   const handleImageLoad = () => {
     setImageLoaded(true);
@@ -1317,7 +1381,7 @@ var LoadingPage = () => {
 var LoadingPage_default = LoadingPage;
 
 // src/components/Modal.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_lu = require("react-icons/lu");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var Modal = ({
@@ -1327,9 +1391,9 @@ var Modal = ({
   children,
   className
 }) => {
-  const modalRef = (0, import_react5.useRef)(null);
-  const previousFocusRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const modalRef = (0, import_react6.useRef)(null);
+  const previousFocusRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     var _a, _b;
     if (isOpen) {
       previousFocusRef.current = document.activeElement;
@@ -1343,7 +1407,7 @@ var Modal = ({
       document.body.style.overflow = "unset";
     };
   }, [isOpen]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen) {
         onClose();
@@ -1398,7 +1462,7 @@ var Modal = ({
 var Modal_default = Modal;
 
 // src/components/NumberField.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function NumberField({
   label,
@@ -1409,7 +1473,7 @@ function NumberField({
   maxLength,
   id
 }) {
-  const [lengthError, setLengthError] = (0, import_react6.useState)(null);
+  const [lengthError, setLengthError] = (0, import_react7.useState)(null);
   function handleChange(e) {
     const inputValue = e.target.value;
     if (maxLength && inputValue.length > maxLength) {
@@ -1436,7 +1500,7 @@ function NumberField({
 }
 
 // src/components/PasswordField.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_lu2 = require("react-icons/lu");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function PasswordField({
@@ -1446,7 +1510,7 @@ function PasswordField({
   onChange,
   error
 }) {
-  const [show, setShow] = (0, import_react7.useState)(false);
+  const [show, setShow] = (0, import_react8.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { className: "text-label dark:text-gray-200 text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative", children: [
@@ -1547,7 +1611,7 @@ function SuccessScreen({
 }
 
 // src/components/TextAreaField.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function TextAreaField({
   label,
@@ -1558,8 +1622,8 @@ function TextAreaField({
   maxLength,
   id
 }) {
-  const [lengthError, setLengthError] = (0, import_react8.useState)(null);
-  const textareaRef = (0, import_react8.useRef)(null);
+  const [lengthError, setLengthError] = (0, import_react9.useState)(null);
+  const textareaRef = (0, import_react9.useRef)(null);
   function handleChange(e) {
     const inputValue = e.target.value;
     if (maxLength && inputValue.length > maxLength) {
@@ -1613,7 +1677,8 @@ function TextDisplayEdit({ label, value, onChange, disabled = false, icon, place
 }
 
 // src/components/TimePicker.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
+var import_react_dom2 = require("react-dom");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function TimePicker({
   label,
@@ -1624,12 +1689,32 @@ function TimePicker({
   disabled = false,
   use24Hour = false
 }) {
-  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
-  const [tempHours, setTempHours] = (0, import_react9.useState)(12);
-  const [tempMinutes, setTempMinutes] = (0, import_react9.useState)(0);
-  const [tempPeriod, setTempPeriod] = (0, import_react9.useState)("AM");
-  const wrapperRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
+  const [tempHours, setTempHours] = (0, import_react10.useState)(12);
+  const [tempMinutes, setTempMinutes] = (0, import_react10.useState)(0);
+  const [tempPeriod, setTempPeriod] = (0, import_react10.useState)("AM");
+  const [dropdownPosition, setDropdownPosition] = (0, import_react10.useState)({
+    top: 0,
+    left: 0,
+    width: 0
+  });
+  const wrapperRef = (0, import_react10.useRef)(null);
+  const buttonRef = (0, import_react10.useRef)(null);
+  const dropdownRef = (0, import_react10.useRef)(null);
+  const updateDropdownPosition = (0, import_react10.useCallback)(() => {
+    if (buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const dropdownHeight = 400;
+      const top = spaceBelow < dropdownHeight && rect.top > dropdownHeight ? rect.top - dropdownHeight + window.scrollY : rect.bottom + window.scrollY + 8;
+      setDropdownPosition({
+        top,
+        left: rect.left + window.scrollX,
+        width: Math.max(rect.width, 280)
+      });
+    }
+  }, []);
+  (0, import_react10.useEffect)(() => {
     if (isOpen && value) {
       const [h, m] = value.split(":").map(Number);
       if (use24Hour) {
@@ -1641,7 +1726,20 @@ function TimePicker({
         setTempMinutes(m);
       }
     }
-  }, [isOpen, value, use24Hour]);
+    if (isOpen) {
+      updateDropdownPosition();
+    }
+  }, [isOpen, value, use24Hour, updateDropdownPosition]);
+  (0, import_react10.useEffect)(() => {
+    if (!isOpen) return;
+    const handlePositionUpdate = () => updateDropdownPosition();
+    window.addEventListener("scroll", handlePositionUpdate, true);
+    window.addEventListener("resize", handlePositionUpdate);
+    return () => {
+      window.removeEventListener("scroll", handlePositionUpdate, true);
+      window.removeEventListener("resize", handlePositionUpdate);
+    };
+  }, [isOpen, updateDropdownPosition]);
   const formatTime = (h, m, p) => {
     let hour24 = h;
     if (!use24Hour) {
@@ -1657,9 +1755,9 @@ function TimePicker({
     onChange(formatTime(tempHours, tempMinutes, tempPeriod));
     setIsOpen(false);
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const handleClickOutside = (event) => {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target) && dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
       }
     };
@@ -1676,46 +1774,24 @@ function TimePicker({
   };
   const hourOptions = use24Hour ? Array.from({ length: 24 }, (_, i) => i) : Array.from({ length: 12 }, (_, i) => i + 1);
   const minuteOptions = Array.from({ length: 60 }, (_, i) => i);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col w-full timepicker-wrapper", ref: wrapperRef, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "text-label dark:text-gray-200 text-[14px] md:text-[15px] lg:text-[16px] mb-2 font-semibold", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        "button",
-        {
-          id,
-          type: "button",
-          onClick: () => !disabled && setIsOpen(!isOpen),
-          disabled,
-          className: `w-full border-contrast rounded-full px-4 md:px-5 py-2 border outline-none text-left ${error ? "border-red-300 focus:border-red-500 focus:ring-red-500/30 dark:border-red-700 dark:focus:border-red-600" : "focus:border-primary dark:focus:border-primary"} ${disabled ? "bg-gray-100 dark:bg-gray-700 cursor-not-allowed opacity-60" : "bg-white dark:bg-gray-900 cursor-pointer"} transition-all duration-300 ease-in-out text-sm pr-10 dark:text-white dark:border-gray-700`,
-          children: getDisplayTime()
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        "svg",
-        {
-          className: `w-5 h-5 ${disabled ? "text-gray-400 dark:text-gray-600" : "text-secondary dark:text-blue-400"}`,
-          "aria-hidden": "true",
-          xmlns: "http://www.w3.org/2000/svg",
-          fill: "none",
-          viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            "path",
-            {
-              stroke: "currentColor",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              strokeWidth: "2",
-              d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-            }
-          )
-        }
-      ) }),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "timepicker-dropdown", children: [
+  const dropdownContent = isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "div",
+    {
+      ref: dropdownRef,
+      className: "timepicker-dropdown-portal",
+      style: {
+        position: "absolute",
+        top: dropdownPosition.top,
+        left: dropdownPosition.left,
+        width: dropdownPosition.width,
+        zIndex: 99999
+      },
+      children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "timepicker-header", children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "svg",
             {
-              className: "w-5 h-5",
+              className: "w-4 h-4 sm:w-5 sm:h-5",
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
@@ -1730,7 +1806,7 @@ function TimePicker({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Select Time" })
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-sm sm:text-base", children: "Select Time" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "timepicker-display", children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "time-value", children: String(tempHours).padStart(2, "0") }),
@@ -1790,20 +1866,55 @@ function TimePicker({
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", onClick: handleDone, className: "done-button", children: "Done" })
-      ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col w-full timepicker-wrapper", ref: wrapperRef, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "text-label dark:text-gray-200 text-[12px] sm:text-[13px] md:text-[14px] lg:text-[15px] xl:text-[16px] mb-1 sm:mb-2 font-semibold", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "button",
+        {
+          ref: buttonRef,
+          id,
+          type: "button",
+          onClick: () => !disabled && setIsOpen(!isOpen),
+          disabled,
+          className: `w-full border-contrast rounded-full px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 border outline-none text-left text-xs sm:text-sm ${error ? "border-red-300 focus:border-red-500 focus:ring-red-500/30 dark:border-red-700 dark:focus:border-red-600" : "focus:border-primary dark:focus:border-primary"} ${disabled ? "bg-gray-100 dark:bg-gray-700 cursor-not-allowed opacity-60" : "bg-white dark:bg-gray-900 cursor-pointer"} transition-all duration-300 ease-in-out pr-8 sm:pr-10 dark:text-white dark:border-gray-700`,
+          children: getDisplayTime()
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute right-2 sm:right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "svg",
+        {
+          className: `w-4 h-4 sm:w-5 sm:h-5 ${disabled ? "text-gray-400 dark:text-gray-600" : "text-secondary dark:text-blue-400"}`,
+          "aria-hidden": "true",
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "path",
+            {
+              stroke: "currentColor",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "2",
+              d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+            }
+          )
+        }
+      ) }),
+      isOpen && (0, import_react_dom2.createPortal)(dropdownContent, document.body)
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-red-500 dark:text-red-400 text-sm font-medium mt-1", children: error }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-red-500 dark:text-red-400 text-xs sm:text-sm font-medium mt-1", children: error }),
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("style", { children: `
         /* Modern Professional TimePicker - Blue Theme */
         .timepicker-wrapper {
           position: relative;
         }
         
-        .timepicker-dropdown {
-          position: absolute;
-          top: calc(100% + 8px);
-          left: 0;
-          right: 0;
+        .timepicker-dropdown,
+        .timepicker-dropdown-portal {
           min-width: 280px;
           background: white;
           border-radius: 1.25rem;
@@ -1812,10 +1923,17 @@ function TimePicker({
             0 25px 50px -12px rgba(0, 0, 0, 0.15),
             0 10px 20px -5px rgba(0, 0, 0, 0.1);
           overflow: hidden;
-          z-index: 50;
           animation: slideDown 0.2s ease-out;
         }
         
+        .timepicker-dropdown {
+          position: absolute;
+          top: calc(100% + 8px);
+          left: 0;
+          right: 0;
+          z-index: 50;
+        }
+        
         @keyframes slideDown {
           from {
             opacity: 0;
@@ -1827,7 +1945,8 @@ function TimePicker({
           }
         }
         
-        .timepicker-header {
+        .timepicker-dropdown .timepicker-header,
+        .timepicker-dropdown-portal .timepicker-header {
           display: flex;
           align-items: center;
           justify-content: center;
@@ -1987,7 +2106,8 @@ function TimePicker({
         }
         
         /* ==================== DARK MODE ==================== */
-        .dark .timepicker-dropdown {
+        .dark .timepicker-dropdown,
+        .dark .timepicker-dropdown-portal {
           background: #1f2937;
           border-color: #374151;
           box-shadow: 
@@ -1995,38 +2115,46 @@ function TimePicker({
             0 10px 20px -5px rgba(0, 0, 0, 0.3);
         }
         
-        .dark .timepicker-header {
+        .dark .timepicker-dropdown .timepicker-header,
+        .dark .timepicker-dropdown-portal .timepicker-header {
           background: #111827;
           border-bottom-color: #374151;
           color: #60a5fa;
         }
         
-        .dark .timepicker-display {
+        .dark .timepicker-dropdown .timepicker-display,
+        .dark .timepicker-dropdown-portal .timepicker-display {
           background: linear-gradient(135deg, #3a7ca5 0%, #295e7e 100%);
         }
         
-        .dark .column-label {
+        .dark .timepicker-dropdown .column-label,
+        .dark .timepicker-dropdown-portal .column-label {
           color: #9ca3af;
         }
         
-        .dark .column-scroll {
+        .dark .timepicker-dropdown .column-scroll,
+        .dark .timepicker-dropdown-portal .column-scroll {
           background: #374151;
         }
         
-        .dark .column-scroll::-webkit-scrollbar-thumb {
+        .dark .timepicker-dropdown .column-scroll::-webkit-scrollbar-thumb,
+        .dark .timepicker-dropdown-portal .column-scroll::-webkit-scrollbar-thumb {
           background: #6b7280;
         }
         
-        .dark .time-option {
+        .dark .timepicker-dropdown .time-option,
+        .dark .timepicker-dropdown-portal .time-option {
           color: #e5e7eb;
         }
         
-        .dark .time-option:hover {
+        .dark .timepicker-dropdown .time-option:hover,
+        .dark .timepicker-dropdown-portal .time-option:hover {
           background: #4b5563;
           color: white;
         }
         
-        .dark .time-option.selected {
+        .dark .timepicker-dropdown .time-option.selected,
+        .dark .timepicker-dropdown-portal .time-option.selected {
           background: linear-gradient(135deg, #3a7ca5 0%, #295e7e 100%);
         }
       ` })