@algorithm-shift/design-system 1.2.968 → 1.2.970

package/dist/index.js

@@ -39,7 +39,7 @@ __export(src_exports, {
   ButtonGroup: () => SplitButton,
   Checkbox: () => Checkbox_default,
   Container: () => Container_default,
-  DatePicker: () => DatePicker,
+  DatePicker: () => DateTimePicker,
   DateRange: () => DateRange_default,
   Dropdown: () => Dropdown_default,
   Email: () => EmailInput_default,
@@ -28011,6 +28011,32 @@ function useLazyDropdown(config) {
       if (debounceTimer.current) clearTimeout(debounceTimer.current);
     };
   }, []);
+  const createNewOption = async (label) => {
+    if (!configRef.current.apiUrl) return null;
+    const axiosClient = configRef.current.axiosInstance ?? import_axios.default;
+    const apiUrl = configRef.current.apiUrl;
+    const urlObj = new URL(
+      apiUrl,
+      typeof window !== "undefined" ? window.location.origin : "http://localhost"
+    );
+    const queryParams = {};
+    urlObj.searchParams.forEach((value, key) => {
+      queryParams[key] = value;
+    });
+    const body = {
+      ...queryParams,
+      [configRef.current.dataLabel]: label
+    };
+    const res = await axiosClient.post(urlObj.origin + urlObj.pathname, body, {
+      withCredentials: true
+    });
+    if (res.data?.success && Array.isArray(res.data.data) && res.data.data.length > 0) {
+      const fetched = transformToOptions(res.data.data);
+      setOptions((prev) => uniqueOptions([...fetched, ...prev]));
+      return fetched[0];
+    }
+    return null;
+  };
   return {
     options,
     loading,
@@ -28018,7 +28044,8 @@ function useLazyDropdown(config) {
     loadMore,
     search,
     reset,
-    loadPage
+    loadPage,
+    createNewOption
   };
 }
 
@@ -28039,7 +28066,8 @@ function LazySelectDropdown({
   dataKey = "id",
   dataLabel = "name",
   errorMessage,
-  axiosInstance
+  axiosInstance,
+  enableAddNewOption = false
 }) {
   const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
   const [searchTerm, setSearchTerm] = (0, import_react20.useState)("");
@@ -28052,7 +28080,8 @@ function LazySelectDropdown({
     loadMore,
     search,
     reset,
-    loadPage
+    loadPage,
+    createNewOption
   } = useLazyDropdown({
     enabled: true,
     dataSource: source || "",
@@ -28110,6 +28139,15 @@ function LazySelectDropdown({
     reset();
     search("");
   };
+  const handleAddNewOption = async (newOption) => {
+    const option = await createNewOption(newOption);
+    if (option) {
+      onChange?.(option.value, id || "");
+      setIsOpen(false);
+      setSearchTerm("");
+      reset();
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ref: dropdownRef, className: "relative w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "input",
@@ -28179,7 +28217,19 @@ function LazySelectDropdown({
               ] }) : "Scroll for more..."
             }
           )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "px-3 py-4 text-sm text-center text-gray-500", children: searchTerm ? `No results for "${searchTerm}"` : "No options available" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "px-3 py-4 text-sm text-center text-gray-500", children: [
+          searchTerm ? `No results for "${searchTerm}"` : "No options available",
+          enableAddNewOption && searchTerm && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            "div",
+            {
+              onClick: () => {
+                handleAddNewOption(searchTerm);
+              },
+              className: "mt-2 px-3 py-2 bg-green-50 hover:bg-green-100 cursor-pointer text-green-700 rounded text-sm",
+              children: `Add "${searchTerm}"`
+            }
+          )
+        ] })
       }
     ) })
   ] });
@@ -28458,82 +28508,13 @@ var FileInput2 = ({ className, style, ...props }) => {
 var FileInput_default = FileInput2;
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
-var import_react26 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-function DatePicker({ className, style, ...props }) {
-  const placeholder = props.placeholder ?? "Placeholder text";
-  const minimumDate = props.minimumDate ?? "none";
-  const customMinimumDate = props.customMinimumDate ?? "";
-  const maximumDate = props.maximumDate ?? "none";
-  const customMaximumDate = props.customMaximumDate ?? "";
-  const isEditable = props.isEditable ?? true;
-  const isDisabled = props.isDisabled ?? false;
-  const isReadonly = props.isReadonly ?? false;
-  const isAutocomplete = props.isAutocomplete ?? false;
-  const resolveDate = (option, customOption) => {
-    if (!option) return void 0;
-    switch (option) {
-      case "today":
-        return (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
-      case "custom":
-        return customOption ?? void 0;
-      case "none":
-      default:
-        return void 0;
-    }
-  };
-  const minDate = resolveDate(minimumDate, customMinimumDate);
-  const maxDate = resolveDate(maximumDate, customMaximumDate);
-  (0, import_react26.useEffect)(() => {
-    if (props.value !== void 0) {
-      handleChange(props.value);
-    }
-  }, []);
-  const handleChange = (e) => {
-    props.onChange?.(e, props?.name || "");
-  };
-  const toDateInputValue = (value) => {
-    if (!value) return "";
-    return new Date(value).toISOString().split("T")[0];
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex justify-start items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      Input,
-      {
-        type: "date",
-        id: "date",
-        autoComplete: isAutocomplete ? "on" : "off",
-        onChange: handleChange,
-        disabled: isDisabled || !isEditable,
-        name: props.name,
-        value: toDateInputValue(props.value),
-        className: cn(
-          className,
-          props.errorMessage ? "border-red-500" : "",
-          "appearance-auto"
-        ),
-        style: {
-          ...style,
-          borderColor: props.errorMessage ? "#f87171" : style?.borderColor
-        },
-        readOnly: isReadonly,
-        placeholder,
-        min: minDate,
-        max: maxDate
-      }
-    ) }),
-    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
-  ] });
-}
-
-// src/components/Inputs/DateRange/DateRange.tsx
-var import_react27 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_date_fns = require("date-fns");
 
 // src/components/ui/calendar.tsx
-var React6 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_react_day_picker = require("react-day-picker");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function Calendar2({
   className,
   classNames,
@@ -28545,7 +28526,7 @@ function Calendar2({
   ...props
 }) {
   const defaultClassNames = (0, import_react_day_picker.getDefaultClassNames)();
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     import_react_day_picker.DayPicker,
     {
       showOutsideDays,
@@ -28644,7 +28625,7 @@ function Calendar2({
       },
       components: {
         Root: ({ className: className2, rootRef, ...props2 }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             "div",
             {
               "data-slot": "calendar",
@@ -28656,10 +28637,10 @@ function Calendar2({
         },
         Chevron: ({ className: className2, orientation, ...props2 }) => {
           if (orientation === "left") {
-            return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChevronLeft, { className: cn("size-4", className2), ...props2 });
+            return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChevronLeft, { className: cn("size-4", className2), ...props2 });
           }
           if (orientation === "right") {
-            return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               ChevronRight,
               {
                 className: cn("size-4", className2),
@@ -28667,11 +28648,11 @@ function Calendar2({
               }
             );
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChevronDown, { className: cn("size-4", className2), ...props2 });
+          return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChevronDown, { className: cn("size-4", className2), ...props2 });
         },
         DayButton: CalendarDayButton,
         WeekNumber: ({ children, ...props2 }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { ...props2, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
+          return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("td", { ...props2, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
         },
         ...components
       },
@@ -28686,11 +28667,11 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = (0, import_react_day_picker.getDefaultClassNames)();
-  const ref = React6.useRef(null);
-  React6.useEffect(() => {
+  const ref = React5.useRef(null);
+  React5.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     Button,
     {
       ref,
@@ -28713,16 +28694,16 @@ function CalendarDayButton({
 
 // src/components/ui/popover.tsx
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({
   className,
@@ -28730,7 +28711,7 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     PopoverPrimitive.Content,
     {
       "data-slot": "popover-content",
@@ -28745,17 +28726,337 @@ function PopoverContent({
   ) });
 }
 
+// src/components/Inputs/DatePicker/DatePicker.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function resolveDate(option, customOption) {
+  if (!option) return void 0;
+  switch (option) {
+    case "today":
+      return /* @__PURE__ */ new Date();
+    case "custom":
+      return customOption ? new Date(customOption) : void 0;
+    case "none":
+    default:
+      return void 0;
+  }
+}
+function DateTimePicker({
+  className,
+  style,
+  mode = "date",
+  ...props
+}) {
+  const placeholderMap = {
+    date: "Select date",
+    datetime: "Select date & time",
+    time: "Select time"
+  };
+  const placeholder = props.placeholder ?? placeholderMap[mode];
+  const minimumDate = props.minimumDate ?? "none";
+  const customMinimumDate = props.customMinimumDate ?? "";
+  const maximumDate = props.maximumDate ?? "none";
+  const customMaximumDate = props.customMaximumDate ?? "";
+  const isEditable = props.isEditable ?? true;
+  const isDisabled = props.isDisabled ?? false;
+  const isReadonly = props.isReadonly ?? false;
+  const isAutocomplete = props.isAutocomplete ?? false;
+  const minDate = resolveDate(minimumDate, customMinimumDate);
+  const maxDate = resolveDate(maximumDate, customMaximumDate);
+  const [date, setDate] = React6.useState(() => {
+    if (!props.value) return void 0;
+    const d = new Date(props.value);
+    return isNaN(d.getTime()) ? void 0 : d;
+  });
+  const initialHours = date ? date.getHours() : 0;
+  const initialMinutes = date ? date.getMinutes() : 0;
+  const [hours, setHours] = React6.useState(initialHours);
+  const [minutes, setMinutes] = React6.useState(initialMinutes);
+  const [amPm, setAmPm] = React6.useState("AM");
+  const displayHours = React6.useMemo(() => {
+    if (hours === 0) return 12;
+    if (hours > 12) return hours - 12;
+    return hours;
+  }, [hours]);
+  React6.useEffect(() => {
+    setAmPm(hours >= 12 ? "PM" : "AM");
+  }, [hours]);
+  React6.useEffect(() => {
+    if (!props.value) {
+      setDate(void 0);
+      return;
+    }
+    const d = new Date(props.value);
+    if (!isNaN(d.getTime())) {
+      setDate(d);
+      setHours(d.getHours());
+      setMinutes(d.getMinutes());
+    }
+  }, [props.value]);
+  const [year, setYear] = React6.useState(date ? date.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear());
+  React6.useEffect(() => {
+    if (!date) return;
+    const newDate = new Date(date);
+    newDate.setFullYear(year);
+    setDate(newDate);
+    emitChange(newDate);
+  }, [year]);
+  const emitChange = (nextDate) => {
+    if (!props.onChange) return;
+    let valueString = "";
+    if (!nextDate) {
+      valueString = "";
+    } else if (mode === "date") {
+      valueString = (0, import_date_fns.format)(nextDate, "yyyy-MM-dd");
+    } else if (mode === "time") {
+      valueString = (0, import_date_fns.format)(nextDate, "HH:mm:ss");
+    } else {
+      valueString = nextDate.toISOString();
+    }
+    const target = {
+      name: props.name || "",
+      value: valueString
+    };
+    const event = {
+      target
+    };
+    props.onChange(event, props.name || "");
+  };
+  const updateDateTime = (nextBaseDate, h = hours, m = minutes) => {
+    if (!nextBaseDate) {
+      setDate(void 0);
+      emitChange(void 0);
+      return;
+    }
+    const d = new Date(nextBaseDate);
+    if (mode !== "date") {
+      d.setHours(h);
+      d.setMinutes(m);
+      d.setSeconds(0);
+      d.setMilliseconds(0);
+    } else {
+      d.setHours(0, 0, 0, 0);
+    }
+    if (minDate && d < minDate) return;
+    if (maxDate && d > maxDate) return;
+    setDate(d);
+    setYear(d.getFullYear());
+    emitChange(d);
+  };
+  const handleDaySelect = (next) => {
+    if (!next) {
+      setDate(void 0);
+      emitChange(void 0);
+      return;
+    }
+    const clickedDate = new Date(next);
+    const selectedYearDate = new Date(year, clickedDate.getMonth(), clickedDate.getDate());
+    updateDateTime(selectedYearDate);
+  };
+  const updateTimeInDate = (h, m) => {
+    if (!date) {
+      const fallbackDate = /* @__PURE__ */ new Date();
+      fallbackDate.setHours(h);
+      fallbackDate.setMinutes(m);
+      fallbackDate.setSeconds(0);
+      fallbackDate.setMilliseconds(0);
+      setDate(fallbackDate);
+      emitChange(fallbackDate);
+    } else {
+      const newDate = new Date(date);
+      newDate.setHours(h);
+      newDate.setMinutes(m);
+      newDate.setSeconds(0);
+      newDate.setMilliseconds(0);
+      setDate(newDate);
+      emitChange(newDate);
+    }
+  };
+  const handleHoursChange = (e) => {
+    let h = Number(e.target.value);
+    if (amPm === "PM" && h < 12) h += 12;
+    if (amPm === "AM" && h === 12) h = 0;
+    setHours(h);
+    updateTimeInDate(h, minutes);
+  };
+  const handleMinutesChange = (e) => {
+    const m = Number(e.target.value);
+    setMinutes(m);
+    updateTimeInDate(hours, m);
+  };
+  const handleAmPmChange = (e) => {
+    const val = e.target.value;
+    setAmPm(val);
+    let h = displayHours;
+    if (val === "PM" && h < 12) h += 12;
+    if (val === "AM" && h === 12) h = 0;
+    setHours(h);
+    updateTimeInDate(h, minutes);
+  };
+  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+  const yearOptions = [];
+  for (let y = currentYear - 50; y <= currentYear + 10; y++) {
+    yearOptions.push(y);
+  }
+  const displayValue = React6.useMemo(() => {
+    if (!date) return "";
+    try {
+      if (mode === "date") return (0, import_date_fns.format)(date, "yyyy-MM-dd");
+      if (mode === "time") return (0, import_date_fns.format)(date, "hh:mm aa");
+      return (0, import_date_fns.format)(date, "yyyy-MM-dd hh:mm aa");
+    } catch {
+      return "";
+    }
+  }, [date, mode]);
+  const isInputDisabled = isDisabled || !isEditable;
+  const [calendarMonthState, setCalendarMonthState] = React6.useState(() => {
+    const currentMonth = (/* @__PURE__ */ new Date()).getMonth();
+    return date ? new Date(date.getFullYear(), date.getMonth()) : new Date(year, currentMonth);
+  });
+  React6.useEffect(() => {
+    setCalendarMonthState(new Date(year, calendarMonthState.getMonth()));
+  }, [year]);
+  const handleToday = () => {
+    const today = /* @__PURE__ */ new Date();
+    const selectedYearDate = new Date(year, today.getMonth(), today.getDate());
+    updateDateTime(selectedYearDate);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Popover, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          className: cn(
+            "w-full justify-start text-left font-normal",
+            !date && "text-muted-foreground",
+            props.errorMessage && "border-red-500",
+            className
+          ),
+          style: {
+            ...style,
+            borderColor: props.errorMessage ? "#f87171" : style?.borderColor
+          },
+          disabled: isInputDisabled,
+          children: [
+            displayValue || placeholder,
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Calendar1, { className: "absolute right-2 top-2" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverContent, { className: "w-auto text-sm p-2", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        (mode === "date" || mode === "datetime") && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center justify-between gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              "label",
+              {
+                className: "text-xs text-blue-600 font-bold cursor-pointer",
+                role: "presentation",
+                onClick: handleToday,
+                children: "Today"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              "select",
+              {
+                className: "h-8 rounded border bg-background px-2 text-xs",
+                value: year,
+                onChange: (e) => setYear(Number(e.target.value)),
+                disabled: isInputDisabled || isReadonly,
+                children: yearOptions.map((y) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("option", { value: y, children: y }, y))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "calendar-container", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            Calendar2,
+            {
+              mode: "single",
+              selected: date,
+              onSelect: handleDaySelect,
+              month: calendarMonthState,
+              onMonthChange: (newMonth) => setCalendarMonthState(newMonth),
+              disabled: (d) => {
+                if (minDate && d < minDate) return true;
+                if (maxDate && d > maxDate) return true;
+                return false;
+              },
+              className: "p-[10px]",
+              autoFocus: true
+            }
+          ) })
+        ] }),
+        (mode === "time" || mode === "datetime") && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center gap-2 mt-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("label", { className: "text-xs text-muted-foreground", children: "Time" }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            "select",
+            {
+              className: "h-8 rounded border bg-background px-2 text-xs",
+              value: displayHours,
+              onChange: handleHoursChange,
+              disabled: isInputDisabled || isReadonly,
+              children: Array.from({ length: 12 }, (_, i) => i + 1).map((hour) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("option", { value: hour, children: hour.toString().padStart(2, "0") }, hour))
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-sm", children: ":" }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            "select",
+            {
+              className: "h-8 rounded border bg-background px-2 text-xs",
+              value: minutes,
+              onChange: handleMinutesChange,
+              disabled: isInputDisabled || isReadonly,
+              children: Array.from({ length: 12 }).map((_, i) => {
+                const val = i * 5;
+                return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("option", { value: val, children: val.toString().padStart(2, "0") }, val);
+              })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+            "select",
+            {
+              className: "h-8 rounded border bg-background px-2 text-xs",
+              value: amPm,
+              onChange: handleAmPmChange,
+              disabled: isInputDisabled || isReadonly,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("option", { value: "AM", children: "AM" }),
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("option", { value: "PM", children: "PM" })
+              ]
+            }
+          )
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      Input,
+      {
+        type: "hidden",
+        id: props.name,
+        name: props.name,
+        autoComplete: isAutocomplete ? "on" : "off",
+        readOnly: isReadonly,
+        value: !date ? "" : mode === "date" ? (0, import_date_fns.format)(date, "yyyy-MM-dd") : mode === "time" ? (0, import_date_fns.format)(date, "HH:mm:ss") : date.toISOString(),
+        onChange: () => {
+        }
+      }
+    ),
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+  ] });
+}
+
 // src/components/Inputs/DateRange/DateRange.tsx
+var import_react26 = __toESM(require("react"));
+var import_date_fns2 = require("date-fns");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var DateRange = ({ className, style, ...props }) => {
   const isDateRange = (val) => !!val && val.from instanceof Date;
-  const [date, setDate] = import_react27.default.useState(
+  const [date, setDate] = import_react26.default.useState(
     isDateRange(props.value) ? props.value : {
       from: /* @__PURE__ */ new Date(),
-      to: (0, import_date_fns.addDays)(/* @__PURE__ */ new Date(), 7)
+      to: (0, import_date_fns2.addDays)(/* @__PURE__ */ new Date(), 7)
     }
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (props.value && isDateRange(props.value)) {
       handleChange?.(props.value);
     }
@@ -28778,11 +29079,11 @@ var DateRange = ({ className, style, ...props }) => {
             !date && "text-muted-foreground"
           ),
           children: date?.from ? date.to ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-            (0, import_date_fns.format)(date.from, "LLL dd, y"),
+            (0, import_date_fns2.format)(date.from, "LLL dd, y"),
             " -",
             " ",
-            (0, import_date_fns.format)(date.to, "LLL dd, y")
-          ] }) : (0, import_date_fns.format)(date.from, "LLL dd, y") : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: "Pick a date range" })
+            (0, import_date_fns2.format)(date.to, "LLL dd, y")
+          ] }) : (0, import_date_fns2.format)(date.from, "LLL dd, y") : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: "Pick a date range" })
         }
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
@@ -28802,7 +29103,7 @@ var DateRange = ({ className, style, ...props }) => {
 var DateRange_default = DateRange;
 
 // src/components/Inputs/TextInputGroup/TextInputGroup.tsx
-var import_react28 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -28810,7 +29111,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -28863,7 +29164,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
 var TextInputGroup_default = TextInputGroup;
 
 // src/components/Inputs/Multiselect/MultiSelect.tsx
-var import_react29 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function LazyMultiSelectDropdown({
   options = [],
@@ -28883,10 +29184,10 @@ function LazyMultiSelectDropdown({
   axiosInstance,
   outputFormat = "array"
 }) {
-  const [isOpen, setIsOpen] = (0, import_react29.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react29.useState)("");
-  const dropdownRef = (0, import_react29.useRef)(null);
-  const observerTarget = (0, import_react29.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react28.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react28.useState)("");
+  const dropdownRef = (0, import_react28.useRef)(null);
+  const observerTarget = (0, import_react28.useRef)(null);
   const ensureUnique = (arr) => {
     return Array.from(new Set(arr));
   };
@@ -28934,10 +29235,10 @@ function LazyMultiSelectDropdown({
         return unique;
     }
   };
-  const selectedOptions = (0, import_react29.useMemo)(() => {
+  const selectedOptions = (0, import_react28.useMemo)(() => {
     return lazyOptions.filter((opt) => normalizedValue.includes(opt.value));
   }, [lazyOptions, normalizedValue]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const handleClick = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -28946,7 +29247,7 @@ function LazyMultiSelectDropdown({
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!isOpen || !hasMore || loading) return;
     const obs = new IntersectionObserver(
       (entries) => {
@@ -29168,7 +29469,7 @@ function TableCell({ className, ...props }) {
 var import_react_table = require("@tanstack/react-table");
 
 // src/lib/table/cellRendererFactory.tsx
-var import_react30 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 var import_image3 = __toESM(require("next/image"));
 
 // src/lib/dayjs-setup.ts
@@ -29178,14 +29479,14 @@ import_dayjs.default.extend(import_utc.default);
 var dayjs_setup_default = import_dayjs.default;
 
 // src/lib/table/valueFormatter.ts
-var valueFormatter = (value, format2, customFormatters = {}) => {
-  if (!format2) return value;
+var valueFormatter = (value, format3, customFormatters = {}) => {
+  if (!format3) return value;
   if (value == null || value === "" || value === void 0) return "-";
-  if (format2.startsWith("custom:")) {
-    const key = format2.replace("custom:", "");
+  if (format3.startsWith("custom:")) {
+    const key = format3.replace("custom:", "");
     return customFormatters[key] ? customFormatters[key](value) : value;
   }
-  const [type, arg] = format2.split(":");
+  const [type, arg] = format3.split(":");
   switch (type) {
     case "date":
       return dayjs_setup_default(value).format(arg || "YYYY-MM-DD");
@@ -29254,9 +29555,9 @@ var getContrastColor = (bg) => {
 };
 var sanitizeValue = (val) => {
   if (val == null) return null;
-  if (import_react30.default.isValidElement(val)) return val;
+  if (import_react29.default.isValidElement(val)) return val;
   if (typeof val === "string" || typeof val === "number") return val;
-  if (Array.isArray(val)) return val.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react30.default.Fragment, { children: sanitizeValue(v) }, i));
+  if (Array.isArray(val)) return val.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react29.default.Fragment, { children: sanitizeValue(v) }, i));
   if (typeof val === "object") {
     if ("name" in val && typeof val.name === "string") return val.name;
     if ("label" in val && typeof val.label === "string") return val.label;
@@ -29268,8 +29569,8 @@ var sanitizeValue = (val) => {
   }
   return String(val);
 };
-var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers = {}, format2, customFormatters = {}) => {
-  const formattedValue = valueFormatter(value, format2, customFormatters);
+var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers = {}, format3, customFormatters = {}) => {
+  const formattedValue = valueFormatter(value, format3, customFormatters);
   const rowValue = row?.[rendererProps?.rowField];
   switch (renderer) {
     /* -------------------- BASIC -------------------- */
@@ -29278,7 +29579,7 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
     case "number":
       return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "tabular-nums text-right", children: valueFormatter(rowValue || value, "number:2") });
     case "date":
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: valueFormatter(rowValue || value, format2) });
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: valueFormatter(rowValue || value, format3) });
     case "link":
       return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         "a",
@@ -30091,7 +30392,7 @@ var CustomPagination = ({
 var Pagination_default = CustomPagination;
 
 // src/components/Navigation/Tabs/Tabs.tsx
-var import_react31 = require("react");
+var import_react30 = require("react");
 var import_link5 = __toESM(require("next/link"));
 var import_navigation3 = require("next/navigation");
 
@@ -30249,7 +30550,7 @@ function showSonnerToast({
 // src/components/Navigation/Tabs/Tabs.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder = false, source, parentKey, menuNameKey, menuUrlKey, loading, bgActiveColor, textActiveColor }) => {
-  const [openIndex, setOpenIndex] = (0, import_react31.useState)(null);
+  const [openIndex, setOpenIndex] = (0, import_react30.useState)(null);
   const currentPathname = (0, import_navigation3.usePathname)();
   function groupMenus(menus = []) {
     const menuMap = /* @__PURE__ */ new Map();
@@ -30283,7 +30584,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     });
     return sortMenus(rootMenus);
   }
-  const rawTabs = (0, import_react31.useMemo)(() => {
+  const rawTabs = (0, import_react30.useMemo)(() => {
     if (!Array.isArray(tabs)) return [];
     if (source === "manual") return Array.isArray(tabs) ? tabs : [];
     return groupMenus(tabs);
@@ -30313,9 +30614,9 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     return tab.children.some((child) => isActive(child.url));
   };
   const router = (0, import_navigation3.useRouter)();
-  const [showExitDialog, setShowExitDialog] = (0, import_react31.useState)(false);
-  const [pendingUrl, setPendingUrl] = (0, import_react31.useState)(null);
-  const handleBuilderExit = (0, import_react31.useCallback)(
+  const [showExitDialog, setShowExitDialog] = (0, import_react30.useState)(false);
+  const [pendingUrl, setPendingUrl] = (0, import_react30.useState)(null);
+  const handleBuilderExit = (0, import_react30.useCallback)(
     (e, url) => {
       if (isBuilder) {
         e.preventDefault();
@@ -30482,11 +30783,11 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-var import_react32 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey = "key", dataLabel = "header", loading, saving, triggerOnClick = false }) => {
-  const [activeStage, setActiveStage] = (0, import_react32.useState)(currentStage || (stages && stages.length > 0 ? stages[0].key : null));
-  const [isCompleted, setIsCompleted] = (0, import_react32.useState)(false);
+  const [activeStage, setActiveStage] = (0, import_react31.useState)(currentStage || (stages && stages.length > 0 ? stages[0].key : null));
+  const [isCompleted, setIsCompleted] = (0, import_react31.useState)(false);
   const updateStage = (stageKey) => {
     setActiveStage(stageKey);
     onStageChange?.(stageKey);
@@ -30531,7 +30832,7 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
       const currentIndex = stages.findIndex((s) => s[dataKey] === activeStage);
       const isCompleted2 = isAllStagesCompleted || index < currentIndex;
       const isActive = !isAllStagesCompleted && index === currentIndex;
-      return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react32.default.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react31.default.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "button",
           {
@@ -30622,7 +30923,7 @@ var import_link6 = __toESM(require("next/link"));
 var import_image4 = __toESM(require("next/image"));
 var import_navigation4 = require("next/navigation");
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
-var import_react33 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 function Navbar({
   style,
@@ -30643,9 +30944,9 @@ function Navbar({
 }) {
   const isMobileView = canvasMode === "mobile" || canvasMode === "tablet";
   const router = (0, import_navigation4.useRouter)();
-  const [showExitDialog, setShowExitDialog] = (0, import_react33.useState)(false);
-  const [pendingUrl, setPendingUrl] = (0, import_react33.useState)(null);
-  const handleBuilderExit = (0, import_react33.useCallback)(
+  const [showExitDialog, setShowExitDialog] = (0, import_react32.useState)(false);
+  const [pendingUrl, setPendingUrl] = (0, import_react32.useState)(null);
+  const handleBuilderExit = (0, import_react32.useCallback)(
     (e, url) => {
       if (isBuilder) {
         e.preventDefault();
@@ -30661,7 +30962,7 @@ function Navbar({
       router.push(pendingUrl);
     }
   };
-  const formatedMenu = (0, import_react33.useMemo)(() => {
+  const formatedMenu = (0, import_react32.useMemo)(() => {
     if (source === "state" && navList && navList.length) {
       return navList.map((i) => ({ ...i, header: i.name || "Menu" }));
     }
@@ -30764,7 +31065,7 @@ function Navbar({
 }
 
 // src/components/Chart/BarChart.tsx
-var import_react34 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 var import_recharts = require("recharts");
 var import_jsx_runtime64 = require("react/jsx-runtime");
 var ChartComponent = ({ className, style, loading, ...props }) => {
@@ -30825,10 +31126,10 @@ var ChartComponent = ({ className, style, loading, ...props }) => {
     )
   ] }) }) });
 };
-var BarChart_default = import_react34.default.memo(ChartComponent);
+var BarChart_default = import_react33.default.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-var import_react35 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var import_recharts2 = require("recharts");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var getRandomColor = () => {
@@ -30850,18 +31151,18 @@ var DonutChart = ({ className, style, loading, ...props }) => {
   const showLegends = props.showLegends ?? true;
   const labelType = props.labelType || "inside";
   const canvasMode = props.canvasMode;
-  const data = (0, import_react35.useMemo)(() => {
+  const data = (0, import_react34.useMemo)(() => {
     if (!Array.isArray(props.data)) return [];
     return props.data.map((item) => ({ ...item, color: getRandomColor() }));
   }, [props.data]);
-  const total = (0, import_react35.useMemo)(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
+  const total = (0, import_react34.useMemo)(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
   const forceMobile = canvasMode === "mobile" || canvasMode === "tablet";
-  const [mounted, setMounted] = (0, import_react35.useState)(false);
-  (0, import_react35.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react34.useState)(false);
+  (0, import_react34.useEffect)(() => {
     const timeout = setTimeout(() => setMounted(true), 100);
     return () => clearTimeout(timeout);
   }, []);
-  const renderLegends = (0, import_react35.useMemo)(() => {
+  const renderLegends = (0, import_react34.useMemo)(() => {
     if (!showLegends) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_jsx_runtime65.Fragment, { children: data.map((d) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
       "div",
@@ -30949,7 +31250,7 @@ var DonutChart = ({ className, style, loading, ...props }) => {
     }
   );
 };
-var PieChart_default = import_react35.default.memo(DonutChart);
+var PieChart_default = import_react34.default.memo(DonutChart);
 
 // src/components/Blocks/EmailComposer.tsx
 var import_jsx_runtime66 = require("react/jsx-runtime");