@optigrit/optigrit-ui 0.0.18 → 0.0.20

package/dist/components/index.js

@@ -6,7 +6,7 @@ import {
   ShowWithAnimation,
   Spinner,
   cn
-} from "../chunk-AGDACE33.js";
+} from "../chunk-4KHU7KPD.js";
 import "../chunk-MCQS3QNN.js";
 import {
   useKeyboardShortcuts
@@ -34,12 +34,12 @@ var getVariantClasses = (variant, color) => {
       info: "bg-info text-white shadow-sm hover:shadow"
     },
     outlined: {
-      primary: "border border-primary-500 text-primary hover:border-primary hover:bg-[color-mix(in_srgb,var(--primary)_4%,transparent)]",
-      secondary: "border border-primary-secondary-500 text-secondary hover:border-primary-secondary hover:bg-[color-mix(in_srgb,var(--primary-secondary)_4%,transparent)]",
-      error: "border border-error-500 text-error hover:border-error hover:bg-[color-mix(in_srgb,var(--error)_4%,transparent)]",
-      success: "border border-success-500 text-success hover:border-success hover:bg-[color-mix(in_srgb,var(--success)_4%,transparent)]",
-      warning: "border border-warning-500 text-warning hover:border-warning hover:bg-[color-mix(in_srgb,var(--warning)_4%,transparent)]",
-      info: "border border-info-500 text-info hover:border-info hover:bg-[color-mix(in_srgb,var(--info)_4%,transparent)]"
+      primary: "border border-primary-500 text-primary hover:border-primary hover:bg-[color-mix(in_srgb,var(--primary)_4%,transparent)] backdrop-blur-sm",
+      secondary: "border border-primary-secondary-500 text-secondary hover:border-primary-secondary hover:bg-[color-mix(in_srgb,var(--primary-secondary)_4%,transparent)] backdrop-blur-sm",
+      error: "border border-error-500 text-error hover:border-error hover:bg-[color-mix(in_srgb,var(--error)_4%,transparent)] backdrop-blur-sm",
+      success: "border border-success-500 text-success hover:border-success hover:bg-[color-mix(in_srgb,var(--success)_4%,transparent)] backdrop-blur-sm",
+      warning: "border border-warning-500 text-warning hover:border-warning hover:bg-[color-mix(in_srgb,var(--warning)_4%,transparent)] backdrop-blur-sm",
+      info: "border border-info-500 text-info hover:border-info hover:bg-[color-mix(in_srgb,var(--info)_4%,transparent)] backdrop-blur-sm"
     },
     soft: {
       primary: "bg-primary-100 text-primary hover:bg-primary-200",
@@ -157,11 +157,11 @@ import {
 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var iconOnlySizeClasses = {
-  xs: "text-xs h-7 w-7",
-  sm: "text-sm h-9 w-9",
-  md: "text-base h-11 w-11",
-  lg: "text-base h-13 w-13",
-  xl: "text-lg h-15 w-15"
+  xs: "text-xs h-6 w-6",
+  sm: "text-sm h-8 w-8",
+  md: "text-base h-12 w-12",
+  lg: "text-base h-14 w-14",
+  xl: "text-lg h-16 w-16"
 };
 var roundnessClasses2 = {
   none: "rounded-none",
@@ -170,6 +170,13 @@ var roundnessClasses2 = {
   lg: "rounded-[16px]",
   full: "rounded-full"
 };
+var borderWidthClasses = {
+  xs: "border-[1px]",
+  sm: "border-[1px]",
+  md: "border-[2px]",
+  lg: "border-[3px]",
+  xl: "border-[3px]"
+};
 var IconButton = forwardRef2(
   ({
     variant = "contained",
@@ -217,12 +224,13 @@ var IconButton = forwardRef2(
           getVariantClasses(variant, color),
           iconOnlySizeClasses[size],
           roundnessClasses2[roundness],
+          variant === "outlined" && borderWidthClasses[size],
           className
         ),
         ...rest,
         children: [
           /* @__PURE__ */ jsx2(Ripple, { ref: rippleRef, color: getRippleColor(variant, color) }),
-          loading ? /* @__PURE__ */ jsx2(Spinner, { size: spinnerSize[size], color: "inherit" }) : /* @__PURE__ */ jsx2("span", { className: "z-10 inline-flex items-center justify-center shrink-0", children })
+          loading ? /* @__PURE__ */ jsx2(Spinner, { size: spinnerSize[size], color: "inherit" }) : children
         ]
       }
     );
@@ -402,6 +410,7 @@ function Select(props) {
     options = [{ label: "None", value: "" }],
     renderOption,
     optionsPosition = "bottom-start",
+    disabled,
     ...inputProps
   } = props;
   const container = useRef5(null);
@@ -412,23 +421,23 @@ function Select(props) {
     {
       key: "ArrowDown",
       callback: () => handleKeyboardNavigation("ArrowDown"),
-      options: { preventDefault: isOpen }
+      options: { preventDefault: isOpen && !disabled }
     },
     {
       key: "ArrowUp",
       callback: () => handleKeyboardNavigation("ArrowUp"),
-      options: { preventDefault: isOpen }
+      options: { preventDefault: isOpen && !disabled }
     },
     {
       key: "Enter",
       callback: () => {
-        if (isOpen) {
+        if (isOpen && !disabled) {
           const option = options.find((option2) => option2.value === activeOption);
           if (option) handleOnChange(option);
           setActiveOption("");
         }
       },
-      options: { preventDefault: isOpen }
+      options: { preventDefault: isOpen && !disabled }
     },
     {
       key: "Escape",
@@ -442,7 +451,7 @@ function Select(props) {
     }
   ]);
   function handleKeyboardNavigation(key) {
-    if (isOpen) {
+    if (isOpen && !disabled) {
       setActiveOption((pre) => {
         const currentIndex = options.findIndex((option) => option.value === pre);
         const nextIndex = (currentIndex + (key === "ArrowDown" ? 1 : -1) + options.length) % options.length;
@@ -455,6 +464,7 @@ function Select(props) {
     }
   }
   function handleOnChange(options2) {
+    if (disabled) return;
     setIsOpen(false);
     props.onChangeValue?.(options2.value);
     setActiveOption("");
@@ -466,12 +476,22 @@ function Select(props) {
       InputField,
       {
         ...inputProps,
+        disabled,
         readOnly: true,
         value: options.find((option) => option.value === props.value)?.label || void 0,
         containerProps: {
+          ...inputProps.containerProps,
           ref: container,
-          className: "[&_*]:cursor-pointer",
-          onClick: () => setIsOpen(true)
+          className: cn(
+            disabled ? "opacity-50 cursor-not-allowed [&_*]:cursor-not-allowed" : "[&_*]:cursor-pointer",
+            inputProps.containerProps?.className
+          ),
+          onClick: (event) => {
+            inputProps.containerProps?.onClick?.(event);
+            if (!disabled) {
+              setIsOpen(true);
+            }
+          }
         },
         onBlur: (event) => {
           setIsOpen(false);
@@ -486,7 +506,7 @@ function Select(props) {
     /* @__PURE__ */ jsx5(
       Popover,
       {
-        open: isOpen,
+        open: isOpen && !disabled,
         targetRef: container,
         position: optionsPosition,
         className: "p-1 min-h-[100px]",
@@ -13247,8 +13267,92 @@ function FlagIcon(props) {
   );
 }
 
+// src/shared/Icons/CalendarIcon.tsx
+import { jsx as jsx287, jsxs as jsxs285 } from "react/jsx-runtime";
+var CalendarIcon = (props) => /* @__PURE__ */ jsxs285(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx287("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
+      /* @__PURE__ */ jsx287("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+      /* @__PURE__ */ jsx287("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+      /* @__PURE__ */ jsx287("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+    ]
+  }
+);
+
+// src/shared/Icons/ClockIcon.tsx
+import { jsx as jsx288, jsxs as jsxs286 } from "react/jsx-runtime";
+var ClockIcon = (props) => /* @__PURE__ */ jsxs286(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx288("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx288("polyline", { points: "12 6 12 12 16 14" })
+    ]
+  }
+);
+
+// src/shared/Icons/ChevronLeftIcon.tsx
+import { jsx as jsx289 } from "react/jsx-runtime";
+var ChevronLeftIcon = (props) => /* @__PURE__ */ jsx289(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: /* @__PURE__ */ jsx289("path", { d: "M15 19l-7-7 7-7" })
+  }
+);
+
+// src/shared/Icons/ChevronRightIcon.tsx
+import { jsx as jsx290 } from "react/jsx-runtime";
+var ChevronRightIcon = (props) => /* @__PURE__ */ jsx290(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: /* @__PURE__ */ jsx290("path", { d: "M9 5l7 7-7 7" })
+  }
+);
+
 // src/components/Forms/SearchBar/SearchBar.tsx
-import { jsx as jsx287 } from "react/jsx-runtime";
+import { jsx as jsx291 } from "react/jsx-runtime";
 var SearchBar = React.forwardRef(
   ({
     value,
@@ -13320,26 +13424,26 @@ var SearchBar = React.forwardRef(
         handleClear();
       }
     };
-    const defaultSearchIcon = /* @__PURE__ */ jsx287(SearchIcon, { className: "text-gray-400 ml-2" });
+    const defaultSearchIcon = /* @__PURE__ */ jsx291(SearchIcon, { className: "text-gray-400 ml-2" });
     const renderEndIcon = () => {
       if (loading) {
-        return /* @__PURE__ */ jsx287("div", { className: "flex items-center justify-center pr-3", children: /* @__PURE__ */ jsx287(Spinner, { size: 16, color: "primary" }) });
+        return /* @__PURE__ */ jsx291("div", { className: "flex items-center justify-center pr-3", children: /* @__PURE__ */ jsx291(Spinner, { size: 16, color: "primary" }) });
       }
       if (currentValue) {
-        return /* @__PURE__ */ jsx287(
+        return /* @__PURE__ */ jsx291(
           "button",
           {
             type: "button",
             onClick: handleClear,
             className: "flex items-center justify-center p-1 mr-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer focus:outline-none focus:ring-1 focus:ring-gray-300",
             "aria-label": "Clear search",
-            children: /* @__PURE__ */ jsx287(CrossIcon, {})
+            children: /* @__PURE__ */ jsx291(CrossIcon, {})
           }
         );
       }
       return endIcon;
     };
-    return /* @__PURE__ */ jsx287(
+    return /* @__PURE__ */ jsx291(
       Input,
       {
         ref,
@@ -13360,7 +13464,7 @@ import { useMemo as useMemo3, useState as useState7 } from "react";
 
 // src/components/Forms/TelInput/CountrySelector.tsx
 import { useMemo as useMemo2, useRef as useRef8, useState as useState6 } from "react";
-import { Fragment as Fragment4, jsx as jsx288, jsxs as jsxs285 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx292, jsxs as jsxs287 } from "react/jsx-runtime";
 function CountrySelector(props) {
   const {
     countries,
@@ -13441,8 +13545,8 @@ function CountrySelector(props) {
     setSearch("");
     setActiveISO2("");
   }
-  return /* @__PURE__ */ jsxs285(Fragment4, { children: [
-    /* @__PURE__ */ jsxs285(
+  return /* @__PURE__ */ jsxs287(Fragment4, { children: [
+    /* @__PURE__ */ jsxs287(
       "div",
       {
         ref: triggerRef,
@@ -13452,16 +13556,16 @@ function CountrySelector(props) {
           disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
         ),
         children: [
-          /* @__PURE__ */ jsx288(FlagIcon, { name: `Flag${selectedCountry.iso2.toUpperCase()}` }),
-          /* @__PURE__ */ jsx288("span", { className: "text-xs text-text-secondary font-medium", children: selectedCountry.dialCode }),
-          /* @__PURE__ */ jsx288("div", { className: cn(
+          /* @__PURE__ */ jsx292(FlagIcon, { name: `Flag${selectedCountry.iso2.toUpperCase()}` }),
+          /* @__PURE__ */ jsx292("span", { className: "text-xs text-text-secondary font-medium", children: selectedCountry.dialCode }),
+          /* @__PURE__ */ jsx292("div", { className: cn(
             "w-0 h-0 border-l-[4px] border-r-[4px] border-t-[4px] border-l-transparent border-r-transparent border-t-gray-500 transition-transform",
             isOpen ? "rotate-180" : ""
           ) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx288(
+    /* @__PURE__ */ jsx292(
       Popover,
       {
         open: isOpen,
@@ -13473,13 +13577,13 @@ function CountrySelector(props) {
           node.style.minWidth = "280px";
           setTimeout(() => searchInputRef.current?.focus(), 50);
         },
-        children: /* @__PURE__ */ jsxs285(
+        children: /* @__PURE__ */ jsxs287(
           "div",
           {
             className: "w-full bg-bg-secondary shadow-md border border-border/10 text-text rounded-xl flex flex-col overflow-hidden",
             onMouseDown: (e) => e.preventDefault(),
             children: [
-              searchable && /* @__PURE__ */ jsx288("div", { className: "p-2 border-b border-border/10", children: /* @__PURE__ */ jsx288(
+              searchable && /* @__PURE__ */ jsx292("div", { className: "p-2 border-b border-border/10", children: /* @__PURE__ */ jsx292(
                 Input,
                 {
                   ref: searchInputRef,
@@ -13493,12 +13597,12 @@ function CountrySelector(props) {
                   className: "text-xs"
                 }
               ) }),
-              /* @__PURE__ */ jsx288(
+              /* @__PURE__ */ jsx292(
                 "div",
                 {
                   ref: optionsRef,
                   className: "max-h-[200px] overflow-y-scroll scrollbar-hide [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden p-1 flex flex-col gap-0.5",
-                  children: filteredCountries.length === 0 ? /* @__PURE__ */ jsx288("div", { className: "p-3 text-center text-xs text-text-secondary/60", children: "No countries found" }) : filteredCountries.map((country) => /* @__PURE__ */ jsxs285(
+                  children: filteredCountries.length === 0 ? /* @__PURE__ */ jsx292("div", { className: "p-3 text-center text-xs text-text-secondary/60", children: "No countries found" }) : filteredCountries.map((country) => /* @__PURE__ */ jsxs287(
                     "div",
                     {
                       "data-iso2": country.iso2,
@@ -13510,9 +13614,9 @@ function CountrySelector(props) {
                         selectedCountry.iso2 === country.iso2 ? "bg-bg" : ""
                       ),
                       children: [
-                        /* @__PURE__ */ jsx288(FlagIcon, { name: `Flag${country.iso2.toUpperCase()}` }),
-                        /* @__PURE__ */ jsx288("span", { className: "text-sm truncate flex-1", children: country.name }),
-                        /* @__PURE__ */ jsx288("span", { className: "text-xs text-text-secondary font-mono shrink-0", children: country.dialCode })
+                        /* @__PURE__ */ jsx292(FlagIcon, { name: `Flag${country.iso2.toUpperCase()}` }),
+                        /* @__PURE__ */ jsx292("span", { className: "text-sm truncate flex-1", children: country.name }),
+                        /* @__PURE__ */ jsx292("span", { className: "text-xs text-text-secondary font-mono shrink-0", children: country.dialCode })
                       ]
                     },
                     country.iso2
@@ -13747,7 +13851,7 @@ function validatePhoneNumber(phone, country) {
 }
 
 // src/components/Forms/TelInput/TelInput.tsx
-import { jsx as jsx289 } from "react/jsx-runtime";
+import { jsx as jsx293 } from "react/jsx-runtime";
 function TelInput(props) {
   const {
     value,
@@ -13802,14 +13906,14 @@ function TelInput(props) {
     }
     return null;
   }
-  return /* @__PURE__ */ jsx289(
+  return /* @__PURE__ */ jsx293(
     InputField,
     {
       ...inputFieldProps,
       type: "tel",
       value,
       placeholder,
-      startIcon: /* @__PURE__ */ jsx289(
+      startIcon: /* @__PURE__ */ jsx293(
         CountrySelector,
         {
           countries: availableCountries,
@@ -13826,9 +13930,625 @@ function TelInput(props) {
   );
 }
 
+// src/components/Forms/DatePicker/DatePicker.tsx
+import { Fragment as Fragment5, useRef as useRef9, useState as useState8, useMemo as useMemo4 } from "react";
+import { jsx as jsx294, jsxs as jsxs288 } from "react/jsx-runtime";
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var WEEKDAY_NAMES = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function parseDateInput(input) {
+  if (!input) return null;
+  if (input instanceof Date) return isNaN(input.getTime()) ? null : input;
+  const parsed = new Date(input);
+  return isNaN(parsed.getTime()) ? null : parsed;
+}
+function formatDate(date, formatStr = "YYYY-MM-DD") {
+  if (!date) return "";
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const monthName = MONTH_NAMES[date.getMonth()];
+  const shortMonthName = monthName.substring(0, 3);
+  return formatStr.replace("YYYY", String(year)).replace("MMM", shortMonthName).replace("MM", month).replace("DD", day);
+}
+function isSameDay(d1, d2) {
+  if (!d1 || !d2) return false;
+  return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
+}
+function isToday(date) {
+  return isSameDay(date, /* @__PURE__ */ new Date());
+}
+function DatePicker(props) {
+  const {
+    value,
+    onChangeValue,
+    minDate: minDateProp,
+    maxDate: maxDateProp,
+    format = "YYYY-MM-DD",
+    optionsPosition = "bottom-start",
+    disabled = false,
+    clearable = true,
+    ...inputProps
+  } = props;
+  const container = useRef9(null);
+  const [isOpen, setIsOpen] = useState8(false);
+  const selectedDate = useMemo4(() => parseDateInput(value), [value]);
+  const minDate = useMemo4(() => parseDateInput(minDateProp), [minDateProp]);
+  const maxDate = useMemo4(() => parseDateInput(maxDateProp), [maxDateProp]);
+  const [viewDate, setViewDate] = useState8(() => selectedDate || /* @__PURE__ */ new Date());
+  const viewYear = viewDate.getFullYear();
+  const viewMonth = viewDate.getMonth();
+  const displayValue = useMemo4(() => {
+    return formatDate(selectedDate, format);
+  }, [selectedDate, format]);
+  const calendarDays = useMemo4(() => {
+    const firstDayOfMonth = new Date(viewYear, viewMonth, 1);
+    const startingDayOfWeek = firstDayOfMonth.getDay();
+    const days = [];
+    for (let i = startingDayOfWeek - 1; i >= 0; i--) {
+      const date = new Date(viewYear, viewMonth, -i);
+      days.push({ date, isCurrentMonth: false });
+    }
+    const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+    for (let i = 1; i <= daysInMonth; i++) {
+      const date = new Date(viewYear, viewMonth, i);
+      days.push({ date, isCurrentMonth: true });
+    }
+    const remaining = 42 - days.length;
+    for (let i = 1; i <= remaining; i++) {
+      const date = new Date(viewYear, viewMonth + 1, i);
+      days.push({ date, isCurrentMonth: false });
+    }
+    return days;
+  }, [viewYear, viewMonth]);
+  function isDateDisabled(date) {
+    if (disabled) return true;
+    if (minDate) {
+      const minStart = new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate());
+      if (date < minStart) return true;
+    }
+    if (maxDate) {
+      const maxEnd = new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate());
+      if (date > maxEnd) return true;
+    }
+    return false;
+  }
+  function handlePrevMonth() {
+    setViewDate(new Date(viewYear, viewMonth - 1, 1));
+  }
+  function handleNextMonth() {
+    setViewDate(new Date(viewYear, viewMonth + 1, 1));
+  }
+  function handleSelectDate(date) {
+    if (isDateDisabled(date)) return;
+    const formatted = formatDate(date, format);
+    onChangeValue?.(date, formatted);
+    setIsOpen(false);
+  }
+  function handleClear(e) {
+    e.stopPropagation();
+    if (disabled) return;
+    onChangeValue?.(null, "");
+    setIsOpen(false);
+  }
+  function handleSelectToday() {
+    const today = /* @__PURE__ */ new Date();
+    if (isDateDisabled(today)) return;
+    setViewDate(today);
+    handleSelectDate(today);
+  }
+  useKeyboardShortcuts([
+    {
+      key: "Escape",
+      callback: () => {
+        if (isOpen) setIsOpen(false);
+      },
+      options: { preventDefault: isOpen }
+    }
+  ]);
+  const DefaultCalendarIcon = /* @__PURE__ */ jsx294("div", { className: "relative h-full aspect-square pr-1 flex items-center justify-center text-text-secondary/70", children: /* @__PURE__ */ jsx294(CalendarIcon, {}) });
+  return /* @__PURE__ */ jsxs288(Fragment5, { children: [
+    /* @__PURE__ */ jsx294(
+      InputField,
+      {
+        ...inputProps,
+        disabled,
+        readOnly: true,
+        value: displayValue,
+        containerProps: {
+          ...inputProps.containerProps,
+          ref: container,
+          className: cn(
+            disabled ? "opacity-50 cursor-not-allowed [&_*]:cursor-not-allowed" : "[&_*]:cursor-pointer",
+            inputProps.containerProps?.className
+          ),
+          onClick: (event) => {
+            inputProps.containerProps?.onClick?.(event);
+            if (!disabled) {
+              if (selectedDate) setViewDate(selectedDate);
+              setIsOpen(true);
+            }
+          }
+        },
+        onBlur: (event) => {
+          setIsOpen(false);
+          inputProps.onBlur?.(event);
+        },
+        endIcon: props.endIcon ? props.endIcon : DefaultCalendarIcon
+      }
+    ),
+    /* @__PURE__ */ jsx294(
+      Popover,
+      {
+        open: isOpen && !disabled,
+        targetRef: container,
+        position: optionsPosition,
+        className: "p-2 select-none",
+        onClose: () => setIsOpen(false),
+        children: /* @__PURE__ */ jsxs288(
+          "div",
+          {
+            className: "w-[280px] bg-bg-secondary border-2 border-border/10 text-text p-3 rounded-2xl shadow-xl flex flex-col gap-3",
+            onMouseDown: (event) => {
+              event.preventDefault();
+            },
+            children: [
+              /* @__PURE__ */ jsxs288("div", { className: "flex items-center justify-between px-1", children: [
+                /* @__PURE__ */ jsx294(
+                  IconButton_default,
+                  {
+                    type: "button",
+                    variant: "text",
+                    size: "xs",
+                    "aria-label": "Previous month",
+                    onClick: handlePrevMonth,
+                    children: /* @__PURE__ */ jsx294(ChevronLeftIcon, { className: "w-4 h-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs288("div", { className: "font-semibold text-sm", children: [
+                  MONTH_NAMES[viewMonth],
+                  " ",
+                  viewYear
+                ] }),
+                /* @__PURE__ */ jsx294(
+                  IconButton_default,
+                  {
+                    type: "button",
+                    variant: "text",
+                    size: "xs",
+                    "aria-label": "Next month",
+                    onClick: handleNextMonth,
+                    children: /* @__PURE__ */ jsx294(ChevronRightIcon, { className: "w-4 h-4" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx294("div", { className: "grid grid-cols-7 gap-1 text-center", children: WEEKDAY_NAMES.map((day) => /* @__PURE__ */ jsx294("div", { className: "text-[11px] font-medium text-text-secondary/70 py-1", children: day }, day)) }),
+              /* @__PURE__ */ jsx294("div", { className: "grid grid-cols-7 gap-1 text-center", children: calendarDays.map(({ date, isCurrentMonth }, idx) => {
+                const isSelected = isSameDay(date, selectedDate);
+                const isDisabled = isDateDisabled(date);
+                const today = isToday(date);
+                return /* @__PURE__ */ jsx294(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: isDisabled,
+                    onClick: () => handleSelectDate(date),
+                    className: cn(
+                      "h-8 w-8 text-xs rounded-lg flex items-center justify-center transition-all mx-auto",
+                      isSelected ? "bg-primary text-white font-semibold shadow-sm" : isCurrentMonth ? "text-text hover:bg-bg" : "text-text-secondary/40 hover:bg-bg/50",
+                      today && !isSelected && "border border-primary font-medium text-primary",
+                      isDisabled && "opacity-25 cursor-not-allowed hover:bg-transparent"
+                    ),
+                    children: date.getDate()
+                  },
+                  idx
+                );
+              }) }),
+              /* @__PURE__ */ jsxs288("div", { className: "flex items-center justify-between pt-2 border-t border-border/10 text-xs", children: [
+                clearable && selectedDate ? /* @__PURE__ */ jsx294(
+                  Button_default,
+                  {
+                    type: "button",
+                    variant: "text",
+                    size: "xs",
+                    color: "secondary",
+                    onClick: handleClear,
+                    children: "Clear"
+                  }
+                ) : /* @__PURE__ */ jsx294("div", {}),
+                /* @__PURE__ */ jsx294(
+                  Button_default,
+                  {
+                    type: "button",
+                    variant: "text",
+                    size: "xs",
+                    color: "primary",
+                    onClick: handleSelectToday,
+                    className: "ml-auto",
+                    children: "Today"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/Forms/TimePicker/TimePicker.tsx
+import { Fragment as Fragment6, useRef as useRef10, useState as useState9, useMemo as useMemo5, useEffect as useEffect2 } from "react";
+import { jsx as jsx295, jsxs as jsxs289 } from "react/jsx-runtime";
+function parseTimeInput(input) {
+  if (!input) return null;
+  if (input instanceof Date) {
+    if (isNaN(input.getTime())) return null;
+    return {
+      hours: input.getHours(),
+      minutes: input.getMinutes(),
+      seconds: input.getSeconds()
+    };
+  }
+  if (typeof input === "string") {
+    const trimmed = input.trim();
+    if (!trimmed) return null;
+    const match12 = trimmed.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(AM|PM|am|pm)$/i);
+    if (match12) {
+      let h = parseInt(match12[1], 10);
+      const m = parseInt(match12[2], 10);
+      const s = match12[3] ? parseInt(match12[3], 10) : 0;
+      const period = match12[4].toUpperCase();
+      if (h === 12) h = period === "AM" ? 0 : 12;
+      else if (period === "PM") h += 12;
+      if (h >= 0 && h < 24 && m >= 0 && m < 60 && s >= 0 && s < 60) {
+        return { hours: h, minutes: m, seconds: s };
+      }
+    }
+    const match24 = trimmed.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
+    if (match24) {
+      const h = parseInt(match24[1], 10);
+      const m = parseInt(match24[2], 10);
+      const s = match24[3] ? parseInt(match24[3], 10) : 0;
+      if (h >= 0 && h < 24 && m >= 0 && m < 60 && s >= 0 && s < 60) {
+        return { hours: h, minutes: m, seconds: s };
+      }
+    }
+  }
+  return null;
+}
+function formatTimeString(state, format, useSeconds) {
+  if (!state) return "";
+  const { hours, minutes, seconds } = state;
+  const pad = (num) => String(num).padStart(2, "0");
+  if (format === "12h") {
+    const period = hours >= 12 ? "PM" : "AM";
+    let displayHours = hours % 12;
+    if (displayHours === 0) displayHours = 12;
+    const timeStr = `${pad(displayHours)}:${pad(minutes)}${useSeconds ? `:${pad(seconds)}` : ""}`;
+    return `${timeStr} ${period}`;
+  } else {
+    return `${pad(hours)}:${pad(minutes)}${useSeconds ? `:${pad(seconds)}` : ""}`;
+  }
+}
+function stateToDate(state) {
+  if (!state) return null;
+  const now = /* @__PURE__ */ new Date();
+  return new Date(now.getFullYear(), now.getMonth(), now.getDate(), state.hours, state.minutes, state.seconds);
+}
+function TimePicker(props) {
+  const {
+    value,
+    onChangeValue,
+    format = "12h",
+    useSeconds = false,
+    minuteInterval = 1,
+    optionsPosition = "bottom-start",
+    disabled = false,
+    clearable = true,
+    ...inputProps
+  } = props;
+  const container = useRef10(null);
+  const [isOpen, setIsOpen] = useState9(false);
+  const parsedTime = useMemo5(() => parseTimeInput(value), [value]);
+  const [draftTime, setDraftTime] = useState9(() => {
+    return parsedTime || { hours: 12, minutes: 0, seconds: 0 };
+  });
+  useEffect2(() => {
+    if (parsedTime) {
+      setDraftTime(parsedTime);
+    }
+  }, [parsedTime]);
+  const displayValue = useMemo5(() => {
+    return formatTimeString(parsedTime, format, useSeconds);
+  }, [parsedTime, format, useSeconds]);
+  const hourOptions = useMemo5(() => {
+    if (format === "12h") {
+      return [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+    } else {
+      return Array.from({ length: 24 }, (_, i) => i);
+    }
+  }, [format]);
+  const minuteOptions = useMemo5(() => {
+    const step = Math.max(1, minuteInterval);
+    const options = [];
+    for (let i = 0; i < 60; i += step) {
+      options.push(i);
+    }
+    return options;
+  }, [minuteInterval]);
+  const secondOptions = useMemo5(() => {
+    return Array.from({ length: 60 }, (_, i) => i);
+  }, []);
+  function commitTime(state) {
+    if (disabled) return;
+    if (!state) {
+      onChangeValue?.("", null);
+    } else {
+      const formatted = formatTimeString(state, format, useSeconds);
+      const dateObj = stateToDate(state);
+      onChangeValue?.(formatted, dateObj);
+    }
+  }
+  function handleHourSelect(displayHour) {
+    setDraftTime((prev) => {
+      let newHours = prev.hours;
+      if (format === "12h") {
+        const isPM2 = prev.hours >= 12;
+        if (displayHour === 12) {
+          newHours = isPM2 ? 12 : 0;
+        } else {
+          newHours = isPM2 ? displayHour + 12 : displayHour;
+        }
+      } else {
+        newHours = displayHour;
+      }
+      const updated = { ...prev, hours: newHours };
+      commitTime(updated);
+      return updated;
+    });
+  }
+  function handleMinuteSelect(min) {
+    setDraftTime((prev) => {
+      const updated = { ...prev, minutes: min };
+      commitTime(updated);
+      return updated;
+    });
+  }
+  function handleSecondSelect(sec) {
+    setDraftTime((prev) => {
+      const updated = { ...prev, seconds: sec };
+      commitTime(updated);
+      return updated;
+    });
+  }
+  function handlePeriodToggle(period) {
+    setDraftTime((prev) => {
+      let newHours = prev.hours;
+      if (period === "AM" && prev.hours >= 12) {
+        newHours -= 12;
+      } else if (period === "PM" && prev.hours < 12) {
+        newHours += 12;
+      }
+      const updated = { ...prev, hours: newHours };
+      commitTime(updated);
+      return updated;
+    });
+  }
+  function handleSelectNow() {
+    const now = /* @__PURE__ */ new Date();
+    const state = {
+      hours: now.getHours(),
+      minutes: now.getMinutes(),
+      seconds: now.getSeconds()
+    };
+    setDraftTime(state);
+    commitTime(state);
+    setIsOpen(false);
+  }
+  function handleClear(e) {
+    e.stopPropagation();
+    commitTime(null);
+    setIsOpen(false);
+  }
+  useKeyboardShortcuts([
+    {
+      key: "Escape",
+      callback: () => {
+        if (isOpen) setIsOpen(false);
+      },
+      options: { preventDefault: isOpen }
+    }
+  ]);
+  const currentDisplayHour = useMemo5(() => {
+    if (format === "12h") {
+      let h = draftTime.hours % 12;
+      return h === 0 ? 12 : h;
+    }
+    return draftTime.hours;
+  }, [draftTime.hours, format]);
+  const isPM = draftTime.hours >= 12;
+  const DefaultClockIcon = /* @__PURE__ */ jsx295("div", { className: "relative h-full aspect-square pr-1 flex items-center justify-center text-text-secondary/70", children: /* @__PURE__ */ jsx295(ClockIcon, {}) });
+  return /* @__PURE__ */ jsxs289(Fragment6, { children: [
+    /* @__PURE__ */ jsx295(
+      InputField,
+      {
+        ...inputProps,
+        disabled,
+        readOnly: true,
+        value: displayValue,
+        containerProps: {
+          ...inputProps.containerProps,
+          ref: container,
+          className: cn(
+            disabled ? "opacity-50 cursor-not-allowed [&_*]:cursor-not-allowed" : "[&_*]:cursor-pointer",
+            inputProps.containerProps?.className
+          ),
+          onClick: (event) => {
+            inputProps.containerProps?.onClick?.(event);
+            if (!disabled) {
+              if (parsedTime) setDraftTime(parsedTime);
+              setIsOpen(true);
+            }
+          }
+        },
+        onBlur: (event) => {
+          setIsOpen(false);
+          inputProps.onBlur?.(event);
+        },
+        endIcon: props.endIcon ? props.endIcon : DefaultClockIcon
+      }
+    ),
+    /* @__PURE__ */ jsx295(
+      Popover,
+      {
+        open: isOpen && !disabled,
+        targetRef: container,
+        position: optionsPosition,
+        className: "p-2 select-none",
+        onClose: () => setIsOpen(false),
+        children: /* @__PURE__ */ jsxs289(
+          "div",
+          {
+            className: "w-[260px] bg-bg-secondary border-2 border-border/10 text-text p-3 rounded-2xl shadow-xl flex flex-col gap-3",
+            onMouseDown: (event) => {
+              event.preventDefault();
+            },
+            children: [
+              /* @__PURE__ */ jsx295("div", { className: "flex items-center justify-center gap-1.5 py-1 px-3 bg-bg rounded-xl text-center", children: /* @__PURE__ */ jsx295("span", { className: "text-lg font-bold text-primary tracking-tight", children: formatTimeString(draftTime, format, useSeconds) }) }),
+              /* @__PURE__ */ jsxs289("div", { className: "grid grid-cols-3 gap-2 h-44 text-center", children: [
+                /* @__PURE__ */ jsxs289("div", { className: "flex flex-col gap-1 overflow-y-auto scrollbar-hide [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden pr-0.5", children: [
+                  /* @__PURE__ */ jsx295("div", { className: "text-[10px] uppercase font-bold text-text-secondary/70 sticky top-0 bg-bg-secondary py-0.5", children: "Hour" }),
+                  hourOptions.map((h) => {
+                    const isSelected = currentDisplayHour === h;
+                    return /* @__PURE__ */ jsx295(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => handleHourSelect(h),
+                        className: cn(
+                          "py-1 text-xs rounded-lg transition-all",
+                          isSelected ? "bg-primary text-white font-semibold" : "hover:bg-bg text-text"
+                        ),
+                        children: format === "24h" ? String(h).padStart(2, "0") : h
+                      },
+                      h
+                    );
+                  })
+                ] }),
+                /* @__PURE__ */ jsxs289("div", { className: "flex flex-col gap-1 overflow-y-auto scrollbar-hide [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden pr-0.5", children: [
+                  /* @__PURE__ */ jsx295("div", { className: "text-[10px] uppercase font-bold text-text-secondary/70 sticky top-0 bg-bg-secondary py-0.5", children: "Min" }),
+                  minuteOptions.map((m) => {
+                    const isSelected = draftTime.minutes === m;
+                    return /* @__PURE__ */ jsx295(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => handleMinuteSelect(m),
+                        className: cn(
+                          "py-1 text-xs rounded-lg transition-all",
+                          isSelected ? "bg-primary text-white font-semibold" : "hover:bg-bg text-text"
+                        ),
+                        children: String(m).padStart(2, "0")
+                      },
+                      m
+                    );
+                  })
+                ] }),
+                useSeconds ? /* @__PURE__ */ jsxs289("div", { className: "flex flex-col gap-1 overflow-y-auto scrollbar-hide [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden pr-0.5", children: [
+                  /* @__PURE__ */ jsx295("div", { className: "text-[10px] uppercase font-bold text-text-secondary/70 sticky top-0 bg-bg-secondary py-0.5", children: "Sec" }),
+                  secondOptions.map((s) => {
+                    const isSelected = draftTime.seconds === s;
+                    return /* @__PURE__ */ jsx295(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => handleSecondSelect(s),
+                        className: cn(
+                          "py-1 text-xs rounded-lg transition-all",
+                          isSelected ? "bg-primary text-white font-semibold" : "hover:bg-bg text-text"
+                        ),
+                        children: String(s).padStart(2, "0")
+                      },
+                      s
+                    );
+                  })
+                ] }) : format === "12h" ? /* @__PURE__ */ jsxs289("div", { className: "flex flex-col gap-2", children: [
+                  /* @__PURE__ */ jsx295("div", { className: "text-[10px] uppercase font-bold text-text-secondary/70 sticky top-0 bg-bg-secondary py-0.5", children: "Period" }),
+                  /* @__PURE__ */ jsx295(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handlePeriodToggle("AM"),
+                      className: cn(
+                        "py-2 text-xs font-semibold rounded-xl transition-all",
+                        !isPM ? "bg-primary text-white shadow-sm" : "bg-bg text-text hover:bg-bg/80"
+                      ),
+                      children: "AM"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx295(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handlePeriodToggle("PM"),
+                      className: cn(
+                        "py-2 text-xs font-semibold rounded-xl transition-all",
+                        isPM ? "bg-primary text-white shadow-sm" : "bg-bg text-text hover:bg-bg/80"
+                      ),
+                      children: "PM"
+                    }
+                  )
+                ] }) : null
+              ] }),
+              /* @__PURE__ */ jsxs289("div", { className: "flex items-center justify-between pt-2 border-t border-border/10 text-xs", children: [
+                clearable && parsedTime ? /* @__PURE__ */ jsx295(
+                  Button_default,
+                  {
+                    type: "button",
+                    variant: "text",
+                    size: "xs",
+                    color: "secondary",
+                    onClick: handleClear,
+                    children: "Clear"
+                  }
+                ) : /* @__PURE__ */ jsx295("div", {}),
+                /* @__PURE__ */ jsx295(
+                  Button_default,
+                  {
+                    type: "button",
+                    variant: "text",
+                    size: "xs",
+                    color: "primary",
+                    onClick: handleSelectNow,
+                    className: "ml-auto",
+                    children: "Now"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
 // src/components/Navigation/Tab/TabList/index.tsx
-import { useEffect as useEffect2, useRef as useRef9 } from "react";
-import { jsx as jsx290, jsxs as jsxs286 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useRef as useRef11 } from "react";
+import { jsx as jsx296, jsxs as jsxs290 } from "react/jsx-runtime";
 function TabList(props) {
   const {
     tabs,
@@ -13836,8 +14556,8 @@ function TabList(props) {
     onChangeActiveTabValue,
     ...rest
   } = props;
-  const tabsContainer = useRef9(null);
-  const activeIndicator = useRef9(null);
+  const tabsContainer = useRef11(null);
+  const activeIndicator = useRef11(null);
   function handleValueChange() {
     if (!tabsContainer.current || !activeIndicator.current) return;
     const tab = tabsContainer.current.querySelector(`#${activeTabValue}`);
@@ -13848,7 +14568,7 @@ function TabList(props) {
     activeIndicator.current.style.height = `${tabLayoutInfo.height}px`;
     activeIndicator.current.style.transform = `translateX(${tabLayoutInfo.left - containerLayoutInfo.left}px)`;
   }
-  useEffect2(() => {
+  useEffect3(() => {
     handleValueChange();
     window.addEventListener("resize", handleValueChange);
     tabsContainer.current?.addEventListener("scroll", handleValueChange);
@@ -13857,14 +14577,14 @@ function TabList(props) {
       tabsContainer.current?.removeEventListener("scroll", handleValueChange);
     };
   }, [activeTabValue]);
-  return /* @__PURE__ */ jsxs286(
+  return /* @__PURE__ */ jsxs290(
     "div",
     {
       ...rest,
       className: cn("bg-bg-secondary w-full p-1 rounded-xl relative", rest.className),
       children: [
-        /* @__PURE__ */ jsx290("div", { ref: activeIndicator, className: "absolute rounded-lg bg-primary transition-all duration-200" }),
-        /* @__PURE__ */ jsx290("div", { ref: tabsContainer, className: "flex items-center gap-1 w-full overflow-x-auto", children: tabs.map((tab) => /* @__PURE__ */ jsx290(
+        /* @__PURE__ */ jsx296("div", { ref: activeIndicator, className: "absolute rounded-lg bg-primary transition-all duration-200" }),
+        /* @__PURE__ */ jsx296("div", { ref: tabsContainer, className: "flex items-center gap-1 w-full overflow-x-auto", children: tabs.map((tab) => /* @__PURE__ */ jsx296(
           "div",
           {
             id: tab.value,
@@ -13884,7 +14604,7 @@ function TabList(props) {
 
 // src/components/Navigation/Tab/TabPanel/RenderPanel.tsx
 import { memo } from "react";
-import { jsx as jsx291 } from "react/jsx-runtime";
+import { jsx as jsx297 } from "react/jsx-runtime";
 var RenderPanel = memo((props) => {
   const {
     activePanelValue,
@@ -13893,14 +14613,14 @@ var RenderPanel = memo((props) => {
     panelRemoveOnHide
   } = props;
   if (panels.length === 0) return null;
-  return /* @__PURE__ */ jsx291(
+  return /* @__PURE__ */ jsx297(
     ShowWithAnimation,
     {
       when: panels[0].value === activePanelValue,
       containerProps: { className: "w-full h-full" },
       className: "w-full h-full",
       removeOnHide: panelRemoveOnHide,
-      otherwise: /* @__PURE__ */ jsx291(RenderPanel, { ...props, panels: panels.slice(1) }),
+      otherwise: /* @__PURE__ */ jsx297(RenderPanel, { ...props, panels: panels.slice(1) }),
       animationStyle: animationStyle ?? {
         children: {
           from: { scale: 0.9, opacity: 0 },
@@ -13914,7 +14634,7 @@ var RenderPanel = memo((props) => {
 });
 
 // src/components/Navigation/Tab/TabPanel/index.tsx
-import { jsx as jsx292 } from "react/jsx-runtime";
+import { jsx as jsx298 } from "react/jsx-runtime";
 function TabPanel(props) {
   const {
     activePanelValue,
@@ -13923,7 +14643,7 @@ function TabPanel(props) {
     panelRemoveOnHide,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx292("div", { ...rest, children: /* @__PURE__ */ jsx292(
+  return /* @__PURE__ */ jsx298("div", { ...rest, children: /* @__PURE__ */ jsx298(
     RenderPanel,
     {
       activePanelValue,
@@ -13935,7 +14655,7 @@ function TabPanel(props) {
 }
 
 // src/components/DataDisplay/Table/Table.tsx
-import { forwardRef as forwardRef3, useMemo as useMemo4 } from "react";
+import { forwardRef as forwardRef3, useMemo as useMemo6 } from "react";
 
 // src/components/DataDisplay/Table/TableContext.tsx
 import { createContext, useContext } from "react";
@@ -13945,17 +14665,17 @@ var TableContext = createContext({
 var useTableContext = () => useContext(TableContext);
 
 // src/components/DataDisplay/Table/Table.tsx
-import { jsx as jsx293 } from "react/jsx-runtime";
+import { jsx as jsx299 } from "react/jsx-runtime";
 var Table = forwardRef3(
   ({ className = "", children, stickyHeader = false, loading = false, ...props }, ref) => {
-    const value = useMemo4(() => ({ stickyHeader }), [stickyHeader]);
-    return /* @__PURE__ */ jsx293(TableContext.Provider, { value, children: /* @__PURE__ */ jsx293(
+    const value = useMemo6(() => ({ stickyHeader }), [stickyHeader]);
+    return /* @__PURE__ */ jsx299(TableContext.Provider, { value, children: /* @__PURE__ */ jsx299(
       "table",
       {
         ref,
         className: `w-full caption-bottom text-sm border-collapse ${stickyHeader ? "relative" : ""} ${className}`,
         ...props,
-        children: loading ? /* @__PURE__ */ jsx293("tbody", { className: "h-48", children: /* @__PURE__ */ jsx293("tr", { children: /* @__PURE__ */ jsx293("td", { colSpan: 100, className: "text-center align-middle h-full", children: /* @__PURE__ */ jsx293("div", { className: "flex justify-center items-center h-full", children: /* @__PURE__ */ jsx293(Spinner, { size: 32 }) }) }) }) }) : children
+        children: loading ? /* @__PURE__ */ jsx299("tbody", { className: "h-48", children: /* @__PURE__ */ jsx299("tr", { children: /* @__PURE__ */ jsx299("td", { colSpan: 100, className: "text-center align-middle h-full", children: /* @__PURE__ */ jsx299("div", { className: "flex justify-center items-center h-full", children: /* @__PURE__ */ jsx299(Spinner, { size: 32 }) }) }) }) }) : children
       }
     ) });
   }
@@ -13965,10 +14685,10 @@ var Table_default = Table;
 
 // src/components/DataDisplay/Table/TableContainer.tsx
 import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx294 } from "react/jsx-runtime";
+import { jsx as jsx300 } from "react/jsx-runtime";
 var TableContainer = forwardRef4(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx294(
+    return /* @__PURE__ */ jsx300(
       "div",
       {
         ref,
@@ -13984,10 +14704,10 @@ var TableContainer_default = TableContainer;
 
 // src/components/DataDisplay/Table/TableHead.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx295 } from "react/jsx-runtime";
+import { jsx as jsx301 } from "react/jsx-runtime";
 var TableHead = forwardRef5(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx295(
+    return /* @__PURE__ */ jsx301(
       "thead",
       {
         ref,
@@ -14003,10 +14723,10 @@ var TableHead_default = TableHead;
 
 // src/components/DataDisplay/Table/TableBody.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx296 } from "react/jsx-runtime";
+import { jsx as jsx302 } from "react/jsx-runtime";
 var TableBody = forwardRef6(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx296(
+    return /* @__PURE__ */ jsx302(
       "tbody",
       {
         ref,
@@ -14022,10 +14742,10 @@ var TableBody_default = TableBody;
 
 // src/components/DataDisplay/Table/TableRow.tsx
 import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx297 } from "react/jsx-runtime";
+import { jsx as jsx303 } from "react/jsx-runtime";
 var TableRow = forwardRef7(
   ({ className = "", children, hover = false, selected = false, ...props }, ref) => {
-    return /* @__PURE__ */ jsx297(
+    return /* @__PURE__ */ jsx303(
       "tr",
       {
         ref,
@@ -14041,7 +14761,7 @@ var TableRow_default = TableRow;
 
 // src/components/DataDisplay/Table/TableCell.tsx
 import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx298 } from "react/jsx-runtime";
+import { jsx as jsx304 } from "react/jsx-runtime";
 var TableCell = forwardRef8(
   ({ className = "", align = "left", variant, component, children, ...props }, ref) => {
     const { stickyHeader } = useTableContext();
@@ -14054,7 +14774,7 @@ var TableCell = forwardRef8(
       justify: "text-justify",
       inherit: "text-inherit"
     };
-    return /* @__PURE__ */ jsx298(
+    return /* @__PURE__ */ jsx304(
       Component,
       {
         ref,
@@ -14069,17 +14789,17 @@ TableCell.displayName = "TableCell";
 var TableCell_default = TableCell;
 
 // src/components/DataDisplay/Table/DataTable.tsx
-import { jsx as jsx299, jsxs as jsxs287 } from "react/jsx-runtime";
+import { jsx as jsx305, jsxs as jsxs291 } from "react/jsx-runtime";
 function DataTable({
   data,
   columns,
   loading,
   pagination
 }) {
-  return /* @__PURE__ */ jsxs287(TableContainer_default, { children: [
-    /* @__PURE__ */ jsxs287(Table_default, { loading, children: [
-      /* @__PURE__ */ jsx299(TableHead_default, { children: /* @__PURE__ */ jsx299(TableRow_default, { children: columns.map((col) => /* @__PURE__ */ jsx299(TableCell_default, { variant: "head", children: col.title }, col.key)) }) }),
-      /* @__PURE__ */ jsx299(TableBody_default, { children: data.map((row) => /* @__PURE__ */ jsx299(TableRow_default, { children: columns.map((col) => /* @__PURE__ */ jsx299(TableCell_default, { children: col.render ? col.render(row) : row[col.key] }, col.key)) }, row.id)) })
+  return /* @__PURE__ */ jsxs291(TableContainer_default, { children: [
+    /* @__PURE__ */ jsxs291(Table_default, { loading, children: [
+      /* @__PURE__ */ jsx305(TableHead_default, { children: /* @__PURE__ */ jsx305(TableRow_default, { children: columns.map((col) => /* @__PURE__ */ jsx305(TableCell_default, { variant: "head", children: col.title }, col.key)) }) }),
+      /* @__PURE__ */ jsx305(TableBody_default, { children: data.map((row) => /* @__PURE__ */ jsx305(TableRow_default, { children: columns.map((col) => /* @__PURE__ */ jsx305(TableCell_default, { children: col.render ? col.render(row) : row[col.key] }, col.key)) }, row.id)) })
     ] }),
     pagination && (() => {
       const getVisiblePages = (current, total) => {
@@ -14089,8 +14809,8 @@ function DataTable({
         return [1, "...", current - 1, current, current + 1, "...", total];
       };
       const visiblePages = getVisiblePages(pagination.page, pagination.totalPages);
-      return /* @__PURE__ */ jsx299("div", { className: "flex justify-end items-center px-3 py-2 border-t bg-transparent text-sm text-text-secondary", children: /* @__PURE__ */ jsxs287("div", { className: "flex justify-end gap-2 items-center", children: [
-        /* @__PURE__ */ jsx299(
+      return /* @__PURE__ */ jsx305("div", { className: "flex justify-end items-center px-3 py-2 border-t bg-transparent text-sm text-text-secondary", children: /* @__PURE__ */ jsxs291("div", { className: "flex justify-end gap-2 items-center", children: [
+        /* @__PURE__ */ jsx305(
           Button_default,
           {
             variant: "outlined",
@@ -14101,7 +14821,7 @@ function DataTable({
             children: "Previous"
           }
         ),
-        visiblePages.map((p, index) => p === "..." ? /* @__PURE__ */ jsx299("span", { className: "px-2", children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ jsx299(
+        visiblePages.map((p, index) => p === "..." ? /* @__PURE__ */ jsx305("span", { className: "px-2", children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ jsx305(
           Button_default,
           {
             variant: p === pagination.page ? "soft" : "outlined",
@@ -14114,7 +14834,7 @@ function DataTable({
           },
           p
         )),
-        /* @__PURE__ */ jsx299(
+        /* @__PURE__ */ jsx305(
           Button_default,
           {
             variant: "outlined",
@@ -14133,10 +14853,10 @@ var DataTable_default = DataTable;
 
 // src/components/DataDisplay/Table/TableFooter.tsx
 import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx300 } from "react/jsx-runtime";
+import { jsx as jsx306 } from "react/jsx-runtime";
 var TableFooter = forwardRef9(
   ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx300(
+    return /* @__PURE__ */ jsx306(
       "tfoot",
       {
         ref,
@@ -14151,8 +14871,8 @@ TableFooter.displayName = "TableFooter";
 var TableFooter_default = TableFooter;
 
 // src/components/DataDisplay/Carousel/Carousel.tsx
-import { useState as useState8, useEffect as useEffect3, useCallback as useCallback3, forwardRef as forwardRef10 } from "react";
-import { Fragment as Fragment5, jsx as jsx301, jsxs as jsxs288 } from "react/jsx-runtime";
+import { useState as useState10, useEffect as useEffect4, useCallback as useCallback3, forwardRef as forwardRef10 } from "react";
+import { Fragment as Fragment7, jsx as jsx307, jsxs as jsxs292 } from "react/jsx-runtime";
 var Carousel = forwardRef10(
   ({
     items,
@@ -14164,8 +14884,8 @@ var Carousel = forwardRef10(
     style,
     ...props
   }, ref) => {
-    const [currentIndex, setCurrentIndex] = useState8(0);
-    const [isHovered, setIsHovered] = useState8(false);
+    const [currentIndex, setCurrentIndex] = useState10(0);
+    const [isHovered, setIsHovered] = useState10(false);
     const goToNext = useCallback3(() => {
       setCurrentIndex((prevIndex) => prevIndex === items.length - 1 ? 0 : prevIndex + 1);
     }, [items.length]);
@@ -14175,7 +14895,7 @@ var Carousel = forwardRef10(
     const goToIndex = (index) => {
       setCurrentIndex(index);
     };
-    useEffect3(() => {
+    useEffect4(() => {
       if (!autoPlay || isHovered) return;
       const timer = setInterval(goToNext, interval);
       return () => clearInterval(timer);
@@ -14183,7 +14903,7 @@ var Carousel = forwardRef10(
     if (!items || items.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ jsxs288(
+    return /* @__PURE__ */ jsxs292(
       "div",
       {
         ref,
@@ -14193,13 +14913,13 @@ var Carousel = forwardRef10(
         onMouseLeave: () => setIsHovered(false),
         ...props,
         children: [
-          /* @__PURE__ */ jsx301(
+          /* @__PURE__ */ jsx307(
             "div",
             {
               className: "flex transition-transform duration-500 ease-in-out h-full w-full flex-1",
               style: { transform: `translateX(-${currentIndex * 100}%)` },
-              children: items.map((item) => /* @__PURE__ */ jsxs288("div", { className: "w-full h-full relative shrink-0", style: { flex: "0 0 100%" }, children: [
-                /* @__PURE__ */ jsx301(
+              children: items.map((item) => /* @__PURE__ */ jsxs292("div", { className: "w-full h-full relative shrink-0", style: { flex: "0 0 100%" }, children: [
+                /* @__PURE__ */ jsx307(
                   "img",
                   {
                     src: item.imageUrl,
@@ -14207,15 +14927,15 @@ var Carousel = forwardRef10(
                     className: "w-full h-full object-cover"
                   }
                 ),
-                (item.title || item.description) && /* @__PURE__ */ jsxs288("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent flex flex-col justify-end p-6 md:p-8", children: [
-                  item.title && /* @__PURE__ */ jsx301("h3", { className: "text-white text-xl md:text-3xl font-semibold mb-2 transform transition-all duration-500 translate-y-0 opacity-100", children: item.title }),
-                  item.description && /* @__PURE__ */ jsx301("p", { className: "text-white/80 text-sm md:text-base max-w-2xl transform transition-all duration-500 delay-100 translate-y-0 opacity-100", children: item.description })
+                (item.title || item.description) && /* @__PURE__ */ jsxs292("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent flex flex-col justify-end p-6 md:p-8", children: [
+                  item.title && /* @__PURE__ */ jsx307("h3", { className: "text-white text-xl md:text-3xl font-semibold mb-2 transform transition-all duration-500 translate-y-0 opacity-100", children: item.title }),
+                  item.description && /* @__PURE__ */ jsx307("p", { className: "text-white/80 text-sm md:text-base max-w-2xl transform transition-all duration-500 delay-100 translate-y-0 opacity-100", children: item.description })
                 ] })
               ] }, item.id))
             }
           ),
-          showArrows && items.length > 1 && /* @__PURE__ */ jsxs288(Fragment5, { children: [
-            /* @__PURE__ */ jsx301(
+          showArrows && items.length > 1 && /* @__PURE__ */ jsxs292(Fragment7, { children: [
+            /* @__PURE__ */ jsx307(
               IconButton_default,
               {
                 onClick: goToPrevious,
@@ -14223,7 +14943,7 @@ var Carousel = forwardRef10(
                 color: "secondary",
                 className: "absolute left-4 top-1/2 -translate-y-1/2 !bg-black/30 hover:!bg-black/50 text-white backdrop-blur-sm transition-all opacity-0 group-hover:opacity-100 disabled:opacity-0 z-10",
                 "aria-label": "Previous slide",
-                children: /* @__PURE__ */ jsx301(
+                children: /* @__PURE__ */ jsx307(
                   "svg",
                   {
                     xmlns: "http://www.w3.org/2000/svg",
@@ -14232,12 +14952,12 @@ var Carousel = forwardRef10(
                     strokeWidth: 2,
                     stroke: "currentColor",
                     className: "w-5 h-5",
-                    children: /* @__PURE__ */ jsx301("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5L8.25 12l7.5-7.5" })
+                    children: /* @__PURE__ */ jsx307("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5L8.25 12l7.5-7.5" })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx301(
+            /* @__PURE__ */ jsx307(
               IconButton_default,
               {
                 onClick: goToNext,
@@ -14245,7 +14965,7 @@ var Carousel = forwardRef10(
                 color: "secondary",
                 className: "absolute right-4 top-1/2 -translate-y-1/2 !bg-black/30 hover:!bg-black/50 text-white backdrop-blur-sm transition-all opacity-0 group-hover:opacity-100 disabled:opacity-0 z-10",
                 "aria-label": "Next slide",
-                children: /* @__PURE__ */ jsx301(
+                children: /* @__PURE__ */ jsx307(
                   "svg",
                   {
                     xmlns: "http://www.w3.org/2000/svg",
@@ -14254,13 +14974,13 @@ var Carousel = forwardRef10(
                     strokeWidth: 2,
                     stroke: "currentColor",
                     className: "w-5 h-5",
-                    children: /* @__PURE__ */ jsx301("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" })
+                    children: /* @__PURE__ */ jsx307("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" })
                   }
                 )
               }
             )
           ] }),
-          showIndicators && items.length > 1 && /* @__PURE__ */ jsx301("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2 z-20", children: items.map((_, index) => /* @__PURE__ */ jsx301(
+          showIndicators && items.length > 1 && /* @__PURE__ */ jsx307("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2 z-20", children: items.map((_, index) => /* @__PURE__ */ jsx307(
             "button",
             {
               onClick: () => goToIndex(index),
@@ -14281,10 +15001,10 @@ Carousel.displayName = "Carousel";
 
 // src/components/DataDisplay/Separator/Separator.tsx
 import React3 from "react";
-import { jsx as jsx302 } from "react/jsx-runtime";
+import { jsx as jsx308 } from "react/jsx-runtime";
 var Separator = React3.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => {
-    return /* @__PURE__ */ jsx302(
+    return /* @__PURE__ */ jsx308(
       "div",
       {
         ref,
@@ -14304,7 +15024,7 @@ Separator.displayName = "Separator";
 
 // src/components/Overlay/Dialog/Dialog.tsx
 import { createPortal } from "react-dom";
-import { jsx as jsx303 } from "react/jsx-runtime";
+import { jsx as jsx309 } from "react/jsx-runtime";
 function Dialog(props) {
   const {
     open,
@@ -14336,7 +15056,7 @@ function Dialog(props) {
   ]);
   if (typeof window === "undefined") return null;
   return createPortal(
-    /* @__PURE__ */ jsx303(
+    /* @__PURE__ */ jsx309(
       ShowWithAnimation,
       {
         when: open,
@@ -14364,7 +15084,7 @@ function Dialog(props) {
             onClose?.();
           }
         },
-        children: /* @__PURE__ */ jsx303(
+        children: /* @__PURE__ */ jsx309(
           ShowWithAnimation,
           {
             when: open,
@@ -14389,19 +15109,19 @@ function Dialog(props) {
 }
 
 // src/components/Overlay/Dialog/DialogHeader.tsx
-import { jsx as jsx304, jsxs as jsxs289 } from "react/jsx-runtime";
+import { jsx as jsx310, jsxs as jsxs293 } from "react/jsx-runtime";
 function DialogHeader(props) {
   const { title, children, ...rest } = props;
-  return /* @__PURE__ */ jsxs289("div", { ...rest, className: cn("p-4 sticky top-0 z-[20] backdrop-blur-sm", props.className), children: [
-    /* @__PURE__ */ jsx304(Show, { when: !!title, children: /* @__PURE__ */ jsx304("h1", { className: "text-lg font-bold", children: title }) }),
+  return /* @__PURE__ */ jsxs293("div", { ...rest, className: cn("p-4 sticky top-0 z-[20] backdrop-blur-sm", props.className), children: [
+    /* @__PURE__ */ jsx310(Show, { when: !!title, children: /* @__PURE__ */ jsx310("h1", { className: "text-lg font-bold", children: title }) }),
     children
   ] });
 }
 
 // src/components/Overlay/Dialog/DialogFooter.tsx
-import { jsx as jsx305 } from "react/jsx-runtime";
+import { jsx as jsx311 } from "react/jsx-runtime";
 function DialogFooter(props) {
-  return /* @__PURE__ */ jsx305(
+  return /* @__PURE__ */ jsx311(
     "div",
     {
       ...props,
@@ -14411,9 +15131,9 @@ function DialogFooter(props) {
 }
 
 // src/components/Overlay/Dialog/DialogContent.tsx
-import { jsx as jsx306 } from "react/jsx-runtime";
+import { jsx as jsx312 } from "react/jsx-runtime";
 function DialogContent(props) {
-  return /* @__PURE__ */ jsx306(
+  return /* @__PURE__ */ jsx312(
     "div",
     {
       ...props,
@@ -14424,7 +15144,7 @@ function DialogContent(props) {
 
 // src/components/Overlay/Drawer/Drawer.tsx
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx307 } from "react/jsx-runtime";
+import { jsx as jsx313 } from "react/jsx-runtime";
 function Drawer(props) {
   const {
     open,
@@ -14459,7 +15179,7 @@ function Drawer(props) {
     }[_size] + (isHorizontal ? "vw" : "vh");
   })();
   return createPortal2(
-    /* @__PURE__ */ jsx307(
+    /* @__PURE__ */ jsx313(
       ShowWithAnimation,
       {
         when: open,
@@ -14489,7 +15209,7 @@ function Drawer(props) {
             onClose?.();
           }
         },
-        children: /* @__PURE__ */ jsx307(
+        children: /* @__PURE__ */ jsx313(
           ShowWithAnimation,
           {
             when: open,
@@ -14536,9 +15256,9 @@ function Drawer(props) {
 }
 
 // src/components/Overlay/Drawer/DrawerContent.tsx
-import { jsx as jsx308 } from "react/jsx-runtime";
+import { jsx as jsx314 } from "react/jsx-runtime";
 function DrawerContent({ children, className, style }) {
-  return /* @__PURE__ */ jsx308(
+  return /* @__PURE__ */ jsx314(
     "div",
     {
       className: cn("overflow-auto flex-1 p-4 relative hide-scrollbar", className),
@@ -14549,9 +15269,9 @@ function DrawerContent({ children, className, style }) {
 }
 
 // src/components/Overlay/Drawer/DrawerHeader.tsx
-import { jsx as jsx309 } from "react/jsx-runtime";
+import { jsx as jsx315 } from "react/jsx-runtime";
 function DrawerHeader({ children, className, style }) {
-  return /* @__PURE__ */ jsx309(
+  return /* @__PURE__ */ jsx315(
     "div",
     {
       className: cn("sticky top-0 z-20 backdrop-blur-sm bg-bg-secondary/60 px-4 py-3 border-b border-border", className),
@@ -14562,9 +15282,9 @@ function DrawerHeader({ children, className, style }) {
 }
 
 // src/components/Overlay/Drawer/DrawerFooter.tsx
-import { jsx as jsx310 } from "react/jsx-runtime";
+import { jsx as jsx316 } from "react/jsx-runtime";
 function DrawerFooter({ children, className, style }) {
-  return /* @__PURE__ */ jsx310(
+  return /* @__PURE__ */ jsx316(
     "div",
     {
       className: cn("sticky bottom-0 z-20 backdrop-blur-sm bg-bg-secondary/60 px-4 py-3 border-t border-border", className),
@@ -14579,13 +15299,13 @@ import { createRoot } from "react-dom/client";
 import { createPortal as createPortal3 } from "react-dom";
 
 // src/components/Overlay/Alert/Alert.tsx
-import { useEffect as useEffect4, useState as useState9, useRef as useRef10, useCallback as useCallback4 } from "react";
-import { jsx as jsx311, jsxs as jsxs290 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useState as useState11, useRef as useRef12, useCallback as useCallback4 } from "react";
+import { jsx as jsx317, jsxs as jsxs294 } from "react/jsx-runtime";
 var icons = {
-  success: /* @__PURE__ */ jsx311(SuccessIcon, {}),
-  error: /* @__PURE__ */ jsx311(ErrorIcon, {}),
-  warning: /* @__PURE__ */ jsx311(WarningIcon, {}),
-  info: /* @__PURE__ */ jsx311(InfoIcon, {})
+  success: /* @__PURE__ */ jsx317(SuccessIcon, {}),
+  error: /* @__PURE__ */ jsx317(ErrorIcon, {}),
+  warning: /* @__PURE__ */ jsx317(WarningIcon, {}),
+  info: /* @__PURE__ */ jsx317(InfoIcon, {})
 };
 var textStyles = {
   success: "text-success-800",
@@ -14613,14 +15333,14 @@ var progressColors = {
 };
 function AlertComponent({ open, title, type, options, onClose }) {
   if (typeof window === "undefined") return null;
-  const [progress, setProgress] = useState9(100);
-  const [showContent, setShowContent] = useState9(false);
-  const timerRef = useRef10(null);
-  const animFrameRef = useRef10(null);
-  const startTimeRef = useRef10(0);
-  const remainingRef = useRef10(0);
-  const onCloseRef = useRef10(onClose);
-  useEffect4(() => {
+  const [progress, setProgress] = useState11(100);
+  const [showContent, setShowContent] = useState11(false);
+  const timerRef = useRef12(null);
+  const animFrameRef = useRef12(null);
+  const startTimeRef = useRef12(0);
+  const remainingRef = useRef12(0);
+  const onCloseRef = useRef12(onClose);
+  useEffect5(() => {
     onCloseRef.current = onClose;
   }, [onClose]);
   const clearTimers = useCallback4(() => {
@@ -14648,7 +15368,7 @@ function AlertComponent({ open, title, type, options, onClose }) {
     animFrameRef.current = requestAnimationFrame(animate);
     timerRef.current = setTimeout(() => onCloseRef.current(), duration);
   }, [options?.duration]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (open && options?.duration) {
       setProgress(100);
       const paintTimer = setTimeout(() => {
@@ -14673,7 +15393,7 @@ function AlertComponent({ open, title, type, options, onClose }) {
     if (!options?.duration || remainingRef.current <= 0) return;
     startProgressAnimation(remainingRef.current);
   }, [options?.duration, startProgressAnimation]);
-  return /* @__PURE__ */ jsx311(
+  return /* @__PURE__ */ jsx317(
     ShowWithAnimation,
     {
       when: open,
@@ -14692,7 +15412,7 @@ function AlertComponent({ open, title, type, options, onClose }) {
         }
       },
       className: "pointer-events-auto flex justify-center",
-      children: /* @__PURE__ */ jsxs290(
+      children: /* @__PURE__ */ jsxs294(
         "div",
         {
           className: cn(
@@ -14702,37 +15422,37 @@ function AlertComponent({ open, title, type, options, onClose }) {
           onMouseEnter: handleMouseEnter,
           onMouseLeave: handleMouseLeave,
           children: [
-            /* @__PURE__ */ jsxs290("div", { className: cn("flex gap-3 items-center px-4 pt-4", options?.content ? "pb-2" : "pb-4"), children: [
-              /* @__PURE__ */ jsx311("div", { className: cn("flex-shrink-0", iconStyles[type]), children: icons[type] }),
-              /* @__PURE__ */ jsx311("h3", { className: cn("flex-1 text-sm font-semibold", textStyles[type]), children: title }),
-              /* @__PURE__ */ jsx311(
+            /* @__PURE__ */ jsxs294("div", { className: cn("flex gap-3 items-center px-4 pt-4", options?.content ? "pb-2" : "pb-4"), children: [
+              /* @__PURE__ */ jsx317("div", { className: cn("flex-shrink-0", iconStyles[type]), children: icons[type] }),
+              /* @__PURE__ */ jsx317("h3", { className: cn("flex-1 text-sm font-semibold", textStyles[type]), children: title }),
+              /* @__PURE__ */ jsx317(
                 "button",
                 {
                   onClick: onClose,
                   className: cn("flex-shrink-0 opacity-50 hover:opacity-100 transition-opacity rounded-md", textStyles[type]),
                   "aria-label": "Close Alert",
-                  children: /* @__PURE__ */ jsx311(CloseIcon, {})
+                  children: /* @__PURE__ */ jsx317(CloseIcon, {})
                 }
               )
             ] }),
-            options?.content && /* @__PURE__ */ jsxs290("div", { className: "px-4 pb-4", children: [
-              /* @__PURE__ */ jsxs290(
+            options?.content && /* @__PURE__ */ jsxs294("div", { className: "px-4 pb-4", children: [
+              /* @__PURE__ */ jsxs294(
                 "button",
                 {
                   onClick: () => setShowContent(!showContent),
                   className: cn("text-xs font-medium underline opacity-80 hover:opacity-100 transition-opacity flex items-center gap-1", textStyles[type]),
                   children: [
                     showContent ? "Less Info" : "More Info",
-                    /* @__PURE__ */ jsx311(ChevronDownIcon, { className: cn("w-3 h-3 transition-transform duration-200", showContent ? "rotate-180" : "rotate-0") })
+                    /* @__PURE__ */ jsx317(ChevronDownIcon, { className: cn("w-3 h-3 transition-transform duration-200", showContent ? "rotate-180" : "rotate-0") })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx311("div", { className: cn(
+              /* @__PURE__ */ jsx317("div", { className: cn(
                 "grid transition-all duration-300 ease-in-out",
                 showContent ? "grid-rows-[1fr] opacity-100 mt-2" : "grid-rows-[0fr] opacity-0 mt-0"
-              ), children: /* @__PURE__ */ jsx311("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx311("div", { className: cn("text-sm opacity-90 leading-relaxed pb-1", textStyles[type]), children: options.content }) }) })
+              ), children: /* @__PURE__ */ jsx317("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx317("div", { className: cn("text-sm opacity-90 leading-relaxed pb-1", textStyles[type]), children: options.content }) }) })
             ] }),
-            options?.duration && /* @__PURE__ */ jsx311("div", { className: "w-full h-1 bg-black/5 dark:bg-white/5 absolute bottom-0 left-0", children: /* @__PURE__ */ jsx311(
+            options?.duration && /* @__PURE__ */ jsx317("div", { className: "w-full h-1 bg-black/5 dark:bg-white/5 absolute bottom-0 left-0", children: /* @__PURE__ */ jsx317(
               "div",
               {
                 className: cn("h-full transition-none", progressColors[type]),
@@ -14749,19 +15469,19 @@ function AlertComponent({ open, title, type, options, onClose }) {
 }
 
 // src/components/Overlay/Alert/renderAlert.tsx
-import { jsx as jsx312 } from "react/jsx-runtime";
+import { jsx as jsx318 } from "react/jsx-runtime";
 var alertRoot = null;
 var alertContainer = null;
 var alertStack = [];
 var nextId = 0;
 function AlertStackContainer({ alerts, onClose }) {
   return createPortal3(
-    /* @__PURE__ */ jsx312(
+    /* @__PURE__ */ jsx318(
       "div",
       {
         style: { position: "fixed", top: 0, left: 0, right: 0, zIndex: 9999, pointerEvents: "none" },
         className: "flex flex-col items-center gap-2 p-4 sm:p-6",
-        children: alerts.map((alert) => /* @__PURE__ */ jsx312(
+        children: alerts.map((alert) => /* @__PURE__ */ jsx318(
           AlertComponent,
           {
             open: alert.open,
@@ -14797,7 +15517,7 @@ var renderStack = () => {
     }, 300);
   };
   alertRoot.render(
-    /* @__PURE__ */ jsx312(AlertStackContainer, { alerts: [...alertStack], onClose: handleClose })
+    /* @__PURE__ */ jsx318(AlertStackContainer, { alerts: [...alertStack], onClose: handleClose })
   );
 };
 var renderAlert = (props) => {
@@ -14847,10 +15567,10 @@ var handleError = () => {
 
 // src/components/Surfaces/Card/Card.tsx
 import React5 from "react";
-import { jsx as jsx313 } from "react/jsx-runtime";
+import { jsx as jsx319 } from "react/jsx-runtime";
 var Card = React5.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx313(
+    return /* @__PURE__ */ jsx319(
       "div",
       {
         ref,
@@ -14868,22 +15588,22 @@ Card.displayName = "Card";
 
 // src/components/Surfaces/Card/CardHeader.tsx
 import React6 from "react";
-import { jsx as jsx314, jsxs as jsxs291 } from "react/jsx-runtime";
+import { jsx as jsx320, jsxs as jsxs295 } from "react/jsx-runtime";
 var CardHeader = React6.forwardRef(
   ({ className, avatar, action, title, subheader, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs291(
+    return /* @__PURE__ */ jsxs295(
       "div",
       {
         ref,
         className: cn("flex items-center p-6", className),
         ...props,
         children: [
-          avatar && /* @__PURE__ */ jsx314("div", { className: "mr-4 flex-shrink-0", children: avatar }),
-          /* @__PURE__ */ jsxs291("div", { className: "flex-1 flex flex-col gap-1", children: [
-            title && /* @__PURE__ */ jsx314("div", { className: "font-semibold leading-none tracking-tight", children: title }),
-            subheader && /* @__PURE__ */ jsx314("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: subheader })
+          avatar && /* @__PURE__ */ jsx320("div", { className: "mr-4 flex-shrink-0", children: avatar }),
+          /* @__PURE__ */ jsxs295("div", { className: "flex-1 flex flex-col gap-1", children: [
+            title && /* @__PURE__ */ jsx320("div", { className: "font-semibold leading-none tracking-tight", children: title }),
+            subheader && /* @__PURE__ */ jsx320("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: subheader })
           ] }),
-          action && /* @__PURE__ */ jsx314("div", { className: "ml-4 flex-shrink-0 self-start", children: action })
+          action && /* @__PURE__ */ jsx320("div", { className: "ml-4 flex-shrink-0 self-start", children: action })
         ]
       }
     );
@@ -14893,10 +15613,10 @@ CardHeader.displayName = "CardHeader";
 
 // src/components/Surfaces/Card/CardContent.tsx
 import React7 from "react";
-import { jsx as jsx315 } from "react/jsx-runtime";
+import { jsx as jsx321 } from "react/jsx-runtime";
 var CardContent = React7.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx315(
+    return /* @__PURE__ */ jsx321(
       "div",
       {
         ref,
@@ -14910,10 +15630,10 @@ CardContent.displayName = "CardContent";
 
 // src/components/Surfaces/Card/CardFooter.tsx
 import React8 from "react";
-import { Fragment as Fragment6, jsx as jsx316, jsxs as jsxs292 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx322, jsxs as jsxs296 } from "react/jsx-runtime";
 var CardFooter = React8.forwardRef(
   ({ className, text, action, children }, ref) => {
-    return /* @__PURE__ */ jsx316(
+    return /* @__PURE__ */ jsx322(
       "div",
       {
         ref,
@@ -14921,23 +15641,154 @@ var CardFooter = React8.forwardRef(
           "flex items-center justify-between p-6 bg-white dark:bg-gray-900 rounded-b-xl",
           className
         ),
-        children: children || /* @__PURE__ */ jsxs292(Fragment6, { children: [
-          text && /* @__PURE__ */ jsx316("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: text }),
-          action && /* @__PURE__ */ jsx316("div", { className: "ml-auto flex items-center gap-2", children: action })
+        children: children || /* @__PURE__ */ jsxs296(Fragment8, { children: [
+          text && /* @__PURE__ */ jsx322("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: text }),
+          action && /* @__PURE__ */ jsx322("div", { className: "ml-auto flex items-center gap-2", children: action })
         ] })
       }
     );
   }
 );
 CardFooter.displayName = "CardFooter";
+
+// src/components/Primitives/Avatar/index.tsx
+import { Fragment as Fragment9, useLayoutEffect as useLayoutEffect2, useState as useState12 } from "react";
+import { jsx as jsx323, jsxs as jsxs297 } from "react/jsx-runtime";
+function Avatar(props) {
+  const {
+    label,
+    labelProps,
+    src = "",
+    alt = "Avatar",
+    variant = "outlined",
+    color = "secondary",
+    size = "md",
+    ...iconButtonProps
+  } = props;
+  const [hasError, setHasError] = useState12(false);
+  const fallbackText = getInitials(alt);
+  const shouldRenderImage = Boolean(src) && !hasError;
+  useLayoutEffect2(() => {
+    setHasError(false);
+  }, [src]);
+  return /* @__PURE__ */ jsx323(
+    Tooltip,
+    {
+      ...labelProps,
+      label,
+      labelContainerProps: {
+        ...labelProps?.labelContainerProps,
+        style: {
+          ...labelProps?.labelContainerProps?.style,
+          display: label ? "flex" : "none"
+        }
+      },
+      children: /* @__PURE__ */ jsx323(
+        IconButton_default,
+        {
+          role: "img",
+          "aria-label": alt,
+          ...iconButtonProps,
+          variant,
+          color,
+          size,
+          children: shouldRenderImage ? /* @__PURE__ */ jsxs297(Fragment9, { children: [
+            /* @__PURE__ */ jsx323(
+              "img",
+              {
+                src,
+                alt: "",
+                "aria-hidden": "true",
+                className: "h-full w-full object-fill blur-sm absolute z-[-1]",
+                onError: () => setHasError(true),
+                loading: "lazy",
+                decoding: "async"
+              }
+            ),
+            /* @__PURE__ */ jsx323(
+              "img",
+              {
+                src,
+                alt: "",
+                "aria-hidden": "true",
+                className: "h-full w-full object-contain",
+                onError: () => setHasError(true),
+                loading: "lazy",
+                decoding: "async"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx323("span", { "aria-hidden": "true", className: "select-none leading-none", children: fallbackText })
+        }
+      )
+    }
+  );
+}
+function getInitials(label) {
+  const trimmedLabel = label.trim();
+  if (!trimmedLabel) return "?";
+  const words = trimmedLabel.split(/\s+/).filter(Boolean);
+  if (words.length === 1) {
+    return words[0].slice(0, 2).toUpperCase();
+  }
+  return words.slice(0, 2).map((word) => word[0]?.toUpperCase() ?? "").join("");
+}
+
+// src/components/Primitives/AvatarStack/index.tsx
+import { useState as useState13 } from "react";
+import { jsx as jsx324 } from "react/jsx-runtime";
+import { createElement } from "react";
+function AvatarStack(props) {
+  const {
+    avatars = [],
+    max = Infinity,
+    size = "md",
+    onClickAvatar
+  } = props;
+  const allowAvatars = avatars.slice(0, max);
+  const [hoverIndex, setHoverIndex] = useState13(-1);
+  return /* @__PURE__ */ jsx324("div", { className: cn(
+    "flex items-center",
+    {
+      "xs": "-space-x-2",
+      "sm": "-space-x-3",
+      "md": "-space-x-4",
+      "lg": "-space-x-5",
+      "xl": "-space-x-6"
+    }[size]
+  ), children: allowAvatars.map((avatarProps, index) => /* @__PURE__ */ createElement(
+    Avatar,
+    {
+      ...avatarProps,
+      size,
+      key: avatarProps.id,
+      className: "hover:scale-105 transition-all border-2",
+      style: {
+        zIndex: hoverIndex === index ? avatars.length + 1 : avatars.length - index
+      },
+      onClick: () => onClickAvatar?.(avatarProps.id),
+      onMouseEnter: () => setHoverIndex(index),
+      onMouseLeave: () => setHoverIndex(-1)
+    }
+  )) });
+}
 export {
+  Avatar,
+  AvatarStack,
   Button_default as Button,
+  CalendarIcon,
   Card,
   CardContent,
   CardFooter,
   CardHeader,
   Carousel,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ClockIcon,
+  CloseIcon,
+  CrossIcon,
   DataTable_default as DataTable,
+  DatePicker,
   Dialog,
   DialogContent,
   DialogFooter,
@@ -14946,13 +15797,17 @@ export {
   DrawerContent,
   DrawerFooter,
   DrawerHeader,
+  ErrorIcon,
   FlagIcon,
   IconButton_default as IconButton,
+  InfoIcon,
   InputField,
   MultiSelect,
   SearchBar,
+  SearchIcon,
   Select,
   Separator,
+  SuccessIcon,
   TabList,
   TabPanel,
   Table_default as Table,
@@ -14963,7 +15818,9 @@ export {
   TableHead_default as TableHead,
   TableRow_default as TableRow,
   TelInput,
+  TimePicker,
   Tooltip,
+  WarningIcon,
   handleAlert,
   handleError,
   isValidPhoneChars,