@algorithm-shift/design-system 1.2.968 → 1.2.970

package/dist/index.mjs

@@ -27916,6 +27916,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 ?? axios;
+    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,
@@ -27923,7 +27949,8 @@ function useLazyDropdown(config) {
     loadMore,
     search,
     reset,
-    loadPage
+    loadPage,
+    createNewOption
   };
 }
 
@@ -27944,7 +27971,8 @@ function LazySelectDropdown({
   dataKey = "id",
   dataLabel = "name",
   errorMessage,
-  axiosInstance
+  axiosInstance,
+  enableAddNewOption = false
 }) {
   const [isOpen, setIsOpen] = useState5(false);
   const [searchTerm, setSearchTerm] = useState5("");
@@ -27957,7 +27985,8 @@ function LazySelectDropdown({
     loadMore,
     search,
     reset,
-    loadPage
+    loadPage,
+    createNewOption
   } = useLazyDropdown({
     enabled: true,
     dataSource: source || "",
@@ -28015,6 +28044,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__ */ jsxs18("div", { ref: dropdownRef, className: "relative w-full", children: [
     /* @__PURE__ */ jsx36(
       "input",
@@ -28084,7 +28122,19 @@ function LazySelectDropdown({
               ] }) : "Scroll for more..."
             }
           )
-        ] }) : /* @__PURE__ */ jsx36("div", { className: "px-3 py-4 text-sm text-center text-gray-500", children: searchTerm ? `No results for "${searchTerm}"` : "No options available" })
+        ] }) : /* @__PURE__ */ jsxs18("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__ */ jsx36(
+            "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}"`
+            }
+          )
+        ] })
       }
     ) })
   ] });
@@ -28363,82 +28413,13 @@ var FileInput2 = ({ className, style, ...props }) => {
 var FileInput_default = FileInput2;
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
-import { useEffect as useEffect20 } from "react";
-import { Fragment as Fragment16, jsx as jsx43, jsxs as jsxs24 } from "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);
-  useEffect20(() => {
-    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__ */ jsxs24(Fragment16, { children: [
-    /* @__PURE__ */ jsx43("div", { className: "flex justify-start items-center relative", children: /* @__PURE__ */ jsx43(
-      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__ */ jsx43("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
-  ] });
-}
-
-// src/components/Inputs/DateRange/DateRange.tsx
-import React7, { useEffect as useEffect22 } from "react";
-import { addDays, format } from "date-fns";
+import * as React6 from "react";
+import { format } from "date-fns";
 
 // src/components/ui/calendar.tsx
-import * as React6 from "react";
+import * as React5 from "react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function Calendar2({
   className,
   classNames,
@@ -28450,7 +28431,7 @@ function Calendar2({
   ...props
 }) {
   const defaultClassNames = getDefaultClassNames();
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx43(
     DayPicker,
     {
       showOutsideDays,
@@ -28549,7 +28530,7 @@ function Calendar2({
       },
       components: {
         Root: ({ className: className2, rootRef, ...props2 }) => {
-          return /* @__PURE__ */ jsx44(
+          return /* @__PURE__ */ jsx43(
             "div",
             {
               "data-slot": "calendar",
@@ -28561,10 +28542,10 @@ function Calendar2({
         },
         Chevron: ({ className: className2, orientation, ...props2 }) => {
           if (orientation === "left") {
-            return /* @__PURE__ */ jsx44(ChevronLeft, { className: cn("size-4", className2), ...props2 });
+            return /* @__PURE__ */ jsx43(ChevronLeft, { className: cn("size-4", className2), ...props2 });
           }
           if (orientation === "right") {
-            return /* @__PURE__ */ jsx44(
+            return /* @__PURE__ */ jsx43(
               ChevronRight,
               {
                 className: cn("size-4", className2),
@@ -28572,11 +28553,11 @@ function Calendar2({
               }
             );
           }
-          return /* @__PURE__ */ jsx44(ChevronDown, { className: cn("size-4", className2), ...props2 });
+          return /* @__PURE__ */ jsx43(ChevronDown, { className: cn("size-4", className2), ...props2 });
         },
         DayButton: CalendarDayButton,
         WeekNumber: ({ children, ...props2 }) => {
-          return /* @__PURE__ */ jsx44("td", { ...props2, children: /* @__PURE__ */ jsx44("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
+          return /* @__PURE__ */ jsx43("td", { ...props2, children: /* @__PURE__ */ jsx43("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
         },
         ...components
       },
@@ -28591,11 +28572,11 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = 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__ */ jsx44(
+  return /* @__PURE__ */ jsx43(
     Button,
     {
       ref,
@@ -28618,16 +28599,16 @@ function CalendarDayButton({
 
 // src/components/ui/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ jsx45(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ jsx44(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx45(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ jsx44(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({
   className,
@@ -28635,7 +28616,7 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx45(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx44(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx44(
     PopoverPrimitive.Content,
     {
       "data-slot": "popover-content",
@@ -28650,7 +28631,327 @@ function PopoverContent({
   ) });
 }
 
+// src/components/Inputs/DatePicker/DatePicker.tsx
+import { Fragment as Fragment16, jsx as jsx45, jsxs as jsxs24 } from "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 = format(nextDate, "yyyy-MM-dd");
+    } else if (mode === "time") {
+      valueString = 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 format(date, "yyyy-MM-dd");
+      if (mode === "time") return format(date, "hh:mm aa");
+      return 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__ */ jsxs24("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs24(Popover, { children: [
+      /* @__PURE__ */ jsx45(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs24(
+        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__ */ jsx45(Calendar1, { className: "absolute right-2 top-2" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx45(PopoverContent, { className: "w-auto text-sm p-2", align: "start", children: /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-1", children: [
+        (mode === "date" || mode === "datetime") && /* @__PURE__ */ jsxs24(Fragment16, { children: [
+          /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between gap-1", children: [
+            /* @__PURE__ */ jsx45(
+              "label",
+              {
+                className: "text-xs text-blue-600 font-bold cursor-pointer",
+                role: "presentation",
+                onClick: handleToday,
+                children: "Today"
+              }
+            ),
+            /* @__PURE__ */ jsx45(
+              "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__ */ jsx45("option", { value: y, children: y }, y))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx45("div", { className: "calendar-container", children: /* @__PURE__ */ jsx45(
+            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__ */ jsxs24("div", { className: "flex items-center gap-2 mt-0", children: [
+          /* @__PURE__ */ jsx45("label", { className: "text-xs text-muted-foreground", children: "Time" }),
+          /* @__PURE__ */ jsx45(
+            "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__ */ jsx45("option", { value: hour, children: hour.toString().padStart(2, "0") }, hour))
+            }
+          ),
+          /* @__PURE__ */ jsx45("span", { className: "text-sm", children: ":" }),
+          /* @__PURE__ */ jsx45(
+            "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__ */ jsx45("option", { value: val, children: val.toString().padStart(2, "0") }, val);
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxs24(
+            "select",
+            {
+              className: "h-8 rounded border bg-background px-2 text-xs",
+              value: amPm,
+              onChange: handleAmPmChange,
+              disabled: isInputDisabled || isReadonly,
+              children: [
+                /* @__PURE__ */ jsx45("option", { value: "AM", children: "AM" }),
+                /* @__PURE__ */ jsx45("option", { value: "PM", children: "PM" })
+              ]
+            }
+          )
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx45(
+      Input,
+      {
+        type: "hidden",
+        id: props.name,
+        name: props.name,
+        autoComplete: isAutocomplete ? "on" : "off",
+        readOnly: isReadonly,
+        value: !date ? "" : mode === "date" ? format(date, "yyyy-MM-dd") : mode === "time" ? format(date, "HH:mm:ss") : date.toISOString(),
+        onChange: () => {
+        }
+      }
+    ),
+    props.errorMessage && /* @__PURE__ */ jsx45("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+  ] });
+}
+
 // src/components/Inputs/DateRange/DateRange.tsx
+import React7, { useEffect as useEffect22 } from "react";
+import { addDays, format as format2 } from "date-fns";
 import { Fragment as Fragment17, jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
 var DateRange = ({ className, style, ...props }) => {
   const isDateRange = (val) => !!val && val.from instanceof Date;
@@ -28683,11 +28984,11 @@ var DateRange = ({ className, style, ...props }) => {
             !date && "text-muted-foreground"
           ),
           children: date?.from ? date.to ? /* @__PURE__ */ jsxs25(Fragment17, { children: [
-            format(date.from, "LLL dd, y"),
+            format2(date.from, "LLL dd, y"),
             " -",
             " ",
-            format(date.to, "LLL dd, y")
-          ] }) : format(date.from, "LLL dd, y") : /* @__PURE__ */ jsx46("span", { children: "Pick a date range" })
+            format2(date.to, "LLL dd, y")
+          ] }) : format2(date.from, "LLL dd, y") : /* @__PURE__ */ jsx46("span", { children: "Pick a date range" })
         }
       ) }),
       /* @__PURE__ */ jsx46(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx46(
@@ -28768,7 +29069,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
 var TextInputGroup_default = TextInputGroup;
 
 // src/components/Inputs/Multiselect/MultiSelect.tsx
-import { useState as useState6, useRef as useRef6, useEffect as useEffect24, useMemo as useMemo4 } from "react";
+import { useState as useState7, useRef as useRef6, useEffect as useEffect24, useMemo as useMemo5 } from "react";
 import { Fragment as Fragment19, jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
 function LazyMultiSelectDropdown({
   options = [],
@@ -28788,8 +29089,8 @@ function LazyMultiSelectDropdown({
   axiosInstance,
   outputFormat = "array"
 }) {
-  const [isOpen, setIsOpen] = useState6(false);
-  const [searchTerm, setSearchTerm] = useState6("");
+  const [isOpen, setIsOpen] = useState7(false);
+  const [searchTerm, setSearchTerm] = useState7("");
   const dropdownRef = useRef6(null);
   const observerTarget = useRef6(null);
   const ensureUnique = (arr) => {
@@ -28839,7 +29140,7 @@ function LazyMultiSelectDropdown({
         return unique;
     }
   };
-  const selectedOptions = useMemo4(() => {
+  const selectedOptions = useMemo5(() => {
     return lazyOptions.filter((opt) => normalizedValue.includes(opt.value));
   }, [lazyOptions, normalizedValue]);
   useEffect24(() => {
@@ -29089,14 +29390,14 @@ dayjs.extend(utc);
 var dayjs_setup_default = dayjs;
 
 // 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");
@@ -29179,8 +29480,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 -------------------- */
@@ -29189,7 +29490,7 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
     case "number":
       return /* @__PURE__ */ jsx50("span", { className: "tabular-nums text-right", children: valueFormatter(rowValue || value, "number:2") });
     case "date":
-      return /* @__PURE__ */ jsx50("span", { children: valueFormatter(rowValue || value, format2) });
+      return /* @__PURE__ */ jsx50("span", { children: valueFormatter(rowValue || value, format3) });
     case "link":
       return /* @__PURE__ */ jsx50(
         "a",
@@ -30002,7 +30303,7 @@ var CustomPagination = ({
 var Pagination_default = CustomPagination;
 
 // src/components/Navigation/Tabs/Tabs.tsx
-import { useCallback as useCallback3, useMemo as useMemo6, useState as useState8 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo7, useState as useState9 } from "react";
 import Link5 from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 
@@ -30160,7 +30461,7 @@ function showSonnerToast({
 // src/components/Navigation/Tabs/Tabs.tsx
 import { Fragment as Fragment22, jsx as jsx56, jsxs as jsxs33 } from "react/jsx-runtime";
 var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder = false, source, parentKey, menuNameKey, menuUrlKey, loading, bgActiveColor, textActiveColor }) => {
-  const [openIndex, setOpenIndex] = useState8(null);
+  const [openIndex, setOpenIndex] = useState9(null);
   const currentPathname = usePathname();
   function groupMenus(menus = []) {
     const menuMap = /* @__PURE__ */ new Map();
@@ -30194,7 +30495,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     });
     return sortMenus(rootMenus);
   }
-  const rawTabs = useMemo6(() => {
+  const rawTabs = useMemo7(() => {
     if (!Array.isArray(tabs)) return [];
     if (source === "manual") return Array.isArray(tabs) ? tabs : [];
     return groupMenus(tabs);
@@ -30224,8 +30525,8 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     return tab.children.some((child) => isActive(child.url));
   };
   const router = useRouter();
-  const [showExitDialog, setShowExitDialog] = useState8(false);
-  const [pendingUrl, setPendingUrl] = useState8(null);
+  const [showExitDialog, setShowExitDialog] = useState9(false);
+  const [pendingUrl, setPendingUrl] = useState9(null);
   const handleBuilderExit = useCallback3(
     (e, url) => {
       if (isBuilder) {
@@ -30393,11 +30694,11 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-import React10, { useState as useState9 } from "react";
+import React10, { useState as useState10 } from "react";
 import { jsx as jsx57, jsxs as jsxs34 } from "react/jsx-runtime";
 var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey = "key", dataLabel = "header", loading, saving, triggerOnClick = false }) => {
-  const [activeStage, setActiveStage] = useState9(currentStage || (stages && stages.length > 0 ? stages[0].key : null));
-  const [isCompleted, setIsCompleted] = useState9(false);
+  const [activeStage, setActiveStage] = useState10(currentStage || (stages && stages.length > 0 ? stages[0].key : null));
+  const [isCompleted, setIsCompleted] = useState10(false);
   const updateStage = (stageKey) => {
     setActiveStage(stageKey);
     onStageChange?.(stageKey);
@@ -30533,7 +30834,7 @@ import Link6 from "next/link";
 import Image4 from "next/image";
 import { useRouter as useRouter2 } from "next/navigation";
 import { DropdownMenuSeparator } from "@radix-ui/react-dropdown-menu";
-import { useCallback as useCallback4, useMemo as useMemo7, useState as useState10 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo8, useState as useState11 } from "react";
 import { Fragment as Fragment23, jsx as jsx63, jsxs as jsxs37 } from "react/jsx-runtime";
 function Navbar({
   style,
@@ -30554,8 +30855,8 @@ function Navbar({
 }) {
   const isMobileView = canvasMode === "mobile" || canvasMode === "tablet";
   const router = useRouter2();
-  const [showExitDialog, setShowExitDialog] = useState10(false);
-  const [pendingUrl, setPendingUrl] = useState10(null);
+  const [showExitDialog, setShowExitDialog] = useState11(false);
+  const [pendingUrl, setPendingUrl] = useState11(null);
   const handleBuilderExit = useCallback4(
     (e, url) => {
       if (isBuilder) {
@@ -30572,7 +30873,7 @@ function Navbar({
       router.push(pendingUrl);
     }
   };
-  const formatedMenu = useMemo7(() => {
+  const formatedMenu = useMemo8(() => {
     if (source === "state" && navList && navList.length) {
       return navList.map((i) => ({ ...i, header: i.name || "Menu" }));
     }
@@ -30750,7 +31051,7 @@ var ChartComponent = ({ className, style, loading, ...props }) => {
 var BarChart_default = React12.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-import React13, { useEffect as useEffect25, useMemo as useMemo8, useState as useState11 } from "react";
+import React13, { useEffect as useEffect25, useMemo as useMemo9, useState as useState12 } from "react";
 import {
   PieChart,
   Pie,
@@ -30779,18 +31080,18 @@ var DonutChart = ({ className, style, loading, ...props }) => {
   const showLegends = props.showLegends ?? true;
   const labelType = props.labelType || "inside";
   const canvasMode = props.canvasMode;
-  const data = useMemo8(() => {
+  const data = useMemo9(() => {
     if (!Array.isArray(props.data)) return [];
     return props.data.map((item) => ({ ...item, color: getRandomColor() }));
   }, [props.data]);
-  const total = useMemo8(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
+  const total = useMemo9(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
   const forceMobile = canvasMode === "mobile" || canvasMode === "tablet";
-  const [mounted, setMounted] = useState11(false);
+  const [mounted, setMounted] = useState12(false);
   useEffect25(() => {
     const timeout = setTimeout(() => setMounted(true), 100);
     return () => clearTimeout(timeout);
   }, []);
-  const renderLegends = useMemo8(() => {
+  const renderLegends = useMemo9(() => {
     if (!showLegends) return null;
     return /* @__PURE__ */ jsx65(Fragment24, { children: data.map((d) => /* @__PURE__ */ jsxs39(
       "div",
@@ -30990,7 +31291,7 @@ export {
   SplitButton as ButtonGroup,
   Checkbox_default as Checkbox,
   Container_default as Container,
-  DatePicker,
+  DateTimePicker as DatePicker,
   DateRange_default as DateRange,
   Dropdown_default as Dropdown,
   EmailInput_default as Email,