@neoptocom/neopto-ui 1.5.3 → 1.6.0

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React3 = require('react');
+var React11 = require('react');
 var reactDom = require('react-dom');
 
 function _interopNamespace(e) {
@@ -22,7 +22,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -107,9 +107,9 @@ function BackgroundBlur({
   zIndex = 40,
   className = ""
 }) {
-  const [shouldRender, setShouldRender] = React3.useState(false);
-  const [isVisible, setIsVisible] = React3.useState(false);
-  React3.useEffect(() => {
+  const [shouldRender, setShouldRender] = React11.useState(false);
+  const [isVisible, setIsVisible] = React11.useState(false);
+  React11.useEffect(() => {
     if (open) {
       setShouldRender(true);
       requestAnimationFrame(() => {
@@ -264,7 +264,40 @@ function Card({
     }
   );
 }
-var Input = React3__namespace.forwardRef(
+var sizeMap = {
+  sm: 16,
+  md: 24,
+  lg: 36
+};
+function Icon({
+  name,
+  className = "",
+  title,
+  size = "md",
+  fill = 0
+}) {
+  const fontSize = sizeMap[size] ?? sizeMap.md;
+  const hasColorClass = /\b(?:text-|fill-|stroke-)\S+/.test(className);
+  const style = {
+    fontVariationSettings: `'FILL' ${fill}, 'wght' 300, 'GRAD' 0, 'opsz' ${fontSize}`,
+    fontSize,
+    lineHeight: 1,
+    display: "inline-block",
+    verticalAlign: "middle",
+    ...hasColorClass ? {} : { color: "inherit" }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: `material-symbols-rounded rounded ${className}`,
+      style,
+      "aria-hidden": title ? void 0 : true,
+      title,
+      children: name
+    }
+  );
+}
+var Input = React11__namespace.forwardRef(
   ({
     className,
     disabled,
@@ -273,14 +306,17 @@ var Input = React3__namespace.forwardRef(
     fieldsetProps,
     legendProps,
     error = false,
+    icon,
     ...props
   }, ref) => {
     const isInlineVariant = variant === "inline";
     const shouldUseInlineStyles = isInlineVariant || Boolean(label);
     const isError = error && !disabled;
+    const hasIcon = Boolean(icon);
     const inputClasses = [
       "w-full bg-transparent outline-none transition-colors",
-      shouldUseInlineStyles ? "h-9" : "h-12 px-4 rounded-full",
+      shouldUseInlineStyles ? "h-9" : "h-12 rounded-full",
+      shouldUseInlineStyles ? hasIcon ? "pr-8" : "" : hasIcon ? "px-4 pr-10" : "px-4",
       "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]"
     ];
     if (!shouldUseInlineStyles) {
@@ -307,6 +343,12 @@ var Input = React3__namespace.forwardRef(
     const inputClassName = inputClasses.join(" ");
     const inputElement = /* @__PURE__ */ jsxRuntime.jsx("input", { ref, disabled, className: inputClassName, ...props });
     if (!label) {
+      if (hasIcon) {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          inputElement,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, className: "text-[var(--muted-fg)] opacity-50" }) })
+        ] });
+      }
       return inputElement;
     }
     const { className: fieldsetClassNameProp = "", ...restFieldsetProps } = fieldsetProps ?? {};
@@ -338,14 +380,17 @@ var Input = React3__namespace.forwardRef(
               children: label
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex pl-5 pr-3 pb-1 h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full", children: inputElement }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex pl-5 pr-3 pb-1 h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full relative", children: [
+            inputElement,
+            hasIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-1 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, className: "text-[var(--muted-fg)] opacity-50" }) })
+          ] }) })
         ]
       }
     );
   }
 );
 Input.displayName = "Input";
-var Textarea = React3__namespace.forwardRef(
+var Textarea = React11__namespace.forwardRef(
   ({ className, disabled, variant = "default", ...props }, ref) => {
     const isInline = variant === "inline";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -374,7 +419,7 @@ var Textarea = React3__namespace.forwardRef(
 );
 Textarea.displayName = "Textarea";
 function useIsomorphicLayoutEffect(effect, deps) {
-  const useEffectHook = typeof window !== "undefined" ? React3__namespace.useLayoutEffect : React3__namespace.useEffect;
+  const useEffectHook = typeof window !== "undefined" ? React11__namespace.useLayoutEffect : React11__namespace.useEffect;
   useEffectHook(effect, deps);
 }
 function Modal({
@@ -386,9 +431,9 @@ function Modal({
   zIndex = 50,
   showDecorations = true
 }) {
-  const [mounted, setMounted] = React3__namespace.useState(false);
-  const [isDark, setIsDark] = React3__namespace.useState(false);
-  React3__namespace.useEffect(() => {
+  const [mounted, setMounted] = React11__namespace.useState(false);
+  const [isDark, setIsDark] = React11__namespace.useState(false);
+  React11__namespace.useEffect(() => {
     const checkDarkMode = () => {
       const hasDarkClass = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark") || document.querySelector(".dark") !== null;
       setIsDark(hasDarkClass);
@@ -411,7 +456,7 @@ function Modal({
       document.body.style.overflow = original;
     };
   }, [open]);
-  React3__namespace.useEffect(() => {
+  React11__namespace.useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose?.();
@@ -534,9 +579,9 @@ function Avatar({
   style,
   ...props
 }) {
-  const [imgError, setImgError] = React3.useState(false);
-  const initials = React3.useMemo(() => getInitials(name), [name]);
-  const computedStyle = React3.useMemo(() => {
+  const [imgError, setImgError] = React11.useState(false);
+  const initials = React11.useMemo(() => getInitials(name), [name]);
+  const computedStyle = React11.useMemo(() => {
     const s = { ...style };
     if (color) s.backgroundColor = color;
     return s;
@@ -571,7 +616,7 @@ function AvatarGroup({
   overlapPx = 8,
   withRings = true
 }) {
-  const avatars = React3__namespace.Children.toArray(children);
+  const avatars = React11__namespace.Children.toArray(children);
   const displayAvatars = typeof max === "number" ? avatars.slice(0, max) : avatars;
   const extraCount = typeof max === "number" && avatars.length > max ? avatars.length - max : 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["flex items-center", className].filter(Boolean).join(" "), children: [
@@ -625,39 +670,6 @@ function Skeleton({ className = "", rounded = "md", ...props }) {
     }
   );
 }
-var sizeMap = {
-  sm: 16,
-  md: 24,
-  lg: 36
-};
-function Icon({
-  name,
-  className = "",
-  title,
-  size = "md",
-  fill = 0
-}) {
-  const fontSize = sizeMap[size] ?? sizeMap.md;
-  const hasColorClass = /\b(?:text-|fill-|stroke-)\S+/.test(className);
-  const style = {
-    fontVariationSettings: `'FILL' ${fill}, 'wght' 300, 'GRAD' 0, 'opsz' ${fontSize}`,
-    fontSize,
-    lineHeight: 1,
-    display: "inline-block",
-    verticalAlign: "middle",
-    ...hasColorClass ? {} : { color: "inherit" }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: `material-symbols-rounded rounded ${className}`,
-      style,
-      "aria-hidden": title ? void 0 : true,
-      title,
-      children: name
-    }
-  );
-}
 function getIconButtonClasses(variant = "ghost", size = "md", className) {
   const base = "cursor-pointer flex items-center justify-center rounded-full flex-shrink-0 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50";
   const variants = {
@@ -672,7 +684,7 @@ function getIconButtonClasses(variant = "ghost", size = "md", className) {
   };
   return [base, variants[variant], sizes[size], className].filter(Boolean).join(" ");
 }
-var IconButton = React3__namespace.forwardRef(
+var IconButton = React11__namespace.forwardRef(
   ({
     variant,
     size,
@@ -719,14 +731,14 @@ function Autocomplete({
   id,
   ...props
 }) {
-  const inputId = id ?? React3.useId();
+  const inputId = id ?? React11.useId();
   const listboxId = `${inputId}-listbox`;
-  const [searchQuery, setSearchQuery] = React3.useState("");
-  const [open, setOpen] = React3.useState(false);
-  const [activeIndex, setActiveIndex] = React3.useState(-1);
-  const rootRef = React3.useRef(null);
-  const listRef = React3.useRef(null);
-  const normalizedOptions = React3.useMemo(() => {
+  const [searchQuery, setSearchQuery] = React11.useState("");
+  const [open, setOpen] = React11.useState(false);
+  const [activeIndex, setActiveIndex] = React11.useState(-1);
+  const rootRef = React11.useRef(null);
+  const listRef = React11.useRef(null);
+  const normalizedOptions = React11.useMemo(() => {
     if (Array.isArray(options) && typeof options[0] === "string") {
       return options.map((str) => ({
         name: str,
@@ -743,7 +755,7 @@ function Autocomplete({
       };
     });
   }, [options]);
-  const filtered = React3.useMemo(() => {
+  const filtered = React11.useMemo(() => {
     const q = searchQuery.trim().toLowerCase();
     if (!q) return normalizedOptions;
     return normalizedOptions.filter((o) => {
@@ -752,7 +764,7 @@ function Autocomplete({
       return name.includes(q) || label.includes(q);
     });
   }, [normalizedOptions, searchQuery]);
-  const anyOptionHasImage = React3.useMemo(
+  const anyOptionHasImage = React11.useMemo(
     () => normalizedOptions.some((o) => !!o.image),
     [normalizedOptions]
   );
@@ -831,7 +843,7 @@ function Autocomplete({
           "fieldset",
           {
             className: [
-              "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-13",
+              "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-14",
               "border-[var(--border)] focus-within:border-[var(--color-brand)]",
               disabled ? "opacity-60 cursor-not-allowed" : ""
             ].join(" "),
@@ -957,27 +969,27 @@ function Search({
   children,
   ...props
 }) {
-  const inputId = id ?? React3.useId();
+  const inputId = id ?? React11.useId();
   const listboxId = `${inputId}-listbox`;
-  const [searchQuery, setSearchQuery] = React3.useState("");
-  const [open, setOpen] = React3.useState(false);
-  const [activeIndex, setActiveIndex] = React3.useState(-1);
-  const [filtersExpanded, setFiltersExpanded] = React3.useState(false);
-  const rootRef = React3.useRef(null);
-  const listRef = React3.useRef(null);
-  const searchTimeoutRef = React3.useRef(null);
-  const normalizedOptions = React3.useMemo(() => {
+  const [searchQuery, setSearchQuery] = React11.useState("");
+  const [open, setOpen] = React11.useState(false);
+  const [activeIndex, setActiveIndex] = React11.useState(-1);
+  const [filtersExpanded, setFiltersExpanded] = React11.useState(false);
+  const rootRef = React11.useRef(null);
+  const listRef = React11.useRef(null);
+  const searchTimeoutRef = React11.useRef(null);
+  const normalizedOptions = React11.useMemo(() => {
     if (Array.isArray(options) && typeof options[0] === "string") {
       return options.map((str) => ({ label: str, value: str }));
     }
     return options;
   }, [options]);
-  React3.useMemo(
+  React11.useMemo(
     () => normalizedOptions.some((o) => !!o.image),
     [normalizedOptions]
   );
   const displayValue = selectedOption != null ? typeof selectedOption === "string" ? selectedOption : selectedOption.label : searchQuery;
-  const debouncedSearch = React3.useCallback(
+  const debouncedSearch = React11.useCallback(
     (query) => {
       if (searchTimeoutRef.current) {
         clearTimeout(searchTimeoutRef.current);
@@ -1046,7 +1058,7 @@ function Search({
     const el = list.children[idx];
     el?.scrollIntoView({ block: "nearest" });
   }
-  React3__namespace.useEffect(() => {
+  React11__namespace.useEffect(() => {
     return () => {
       if (searchTimeoutRef.current) {
         clearTimeout(searchTimeoutRef.current);
@@ -1153,7 +1165,7 @@ function getButtonClasses(variant = "primary", size = "md", fullWidth, className
     className
   ].filter(Boolean).join(" ");
 }
-var Button = React3__namespace.forwardRef(
+var Button = React11__namespace.forwardRef(
   ({ variant, size, fullWidth, className, children, icon, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -1225,8 +1237,8 @@ function Counter({
   className = "",
   ...props
 }) {
-  const [count, setCount] = React3__namespace.useState(value);
-  React3__namespace.useEffect(() => {
+  const [count, setCount] = React11__namespace.useState(value);
+  React11__namespace.useEffect(() => {
     setCount(value);
   }, [value]);
   const handleIncrement = () => {
@@ -1269,7 +1281,7 @@ function Counter({
   ] });
 }
 var AnimatedBgCircle = ({ colors, delay = 0 }) => {
-  const uniqueId = React3.useMemo(() => Math.random().toString(36).substr(2, 9), []);
+  const uniqueId = React11.useMemo(() => Math.random().toString(36).substr(2, 9), []);
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 64 64", fill: "none", className: "h-full transition-all duration-500 ease-in-out w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
           @keyframes colorCycle-${uniqueId} {
@@ -1301,7 +1313,7 @@ var AnimatedBgCircle = ({ colors, delay = 0 }) => {
 };
 var AnimatedBgCircle_default = AnimatedBgCircle;
 var AnimatedBgRectangle = ({ colors, delay = 0 }) => {
-  const uniqueId = React3.useMemo(() => Math.random().toString(36).substr(2, 9), []);
+  const uniqueId = React11.useMemo(() => Math.random().toString(36).substr(2, 9), []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
@@ -1350,14 +1362,14 @@ var AgentButton = ({
   animationColors = ["#7DADB9", "#3864F5", "#55468D", "#479A8D"],
   disabled = false
 }) => {
-  const [showText, setShowText] = React3.useState(false);
-  const [delayedHasNotification, setDelayedHasNotification] = React3.useState(false);
-  const [isMounted, setIsMounted] = React3.useState(false);
-  React3.useEffect(() => {
+  const [showText, setShowText] = React11.useState(false);
+  const [delayedHasNotification, setDelayedHasNotification] = React11.useState(false);
+  const [isMounted, setIsMounted] = React11.useState(false);
+  React11.useEffect(() => {
     const timer = setTimeout(() => setIsMounted(true), 250);
     return () => clearTimeout(timer);
   }, []);
-  React3.useEffect(() => {
+  React11.useEffect(() => {
     if (hasNotification) {
       const textTimer = setTimeout(() => setShowText(true), 500);
       setDelayedHasNotification(true);
@@ -1459,7 +1471,7 @@ var AgentButton = ({
   );
 };
 var AgentButton_default = AgentButton;
-var MessageBubble = React3__namespace.forwardRef(
+var MessageBubble = React11__namespace.forwardRef(
   ({ direction, color, children, className, ...props }, ref) => {
     const borderRadiusClass = direction === "left" ? "[border-radius:16px_16px_16px_2px]" : direction === "right" ? "[border-radius:16px_16px_2px_16px]" : "rounded-2xl";
     const backgroundColor = color || "var(--muted)";
@@ -1537,6 +1549,305 @@ var Breadcrumb = ({
     ] }, index);
   }) }) });
 };
+var DAYS_OF_WEEK = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function isSameDay(date1, date2) {
+  return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+}
+function isSameMonth(date1, date2) {
+  return date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+}
+function startOfDay(date) {
+  const d = new Date(date);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+function Calendar({
+  selectedDate,
+  onDateSelect,
+  today = /* @__PURE__ */ new Date(),
+  minDate,
+  maxDate
+}) {
+  const [currentMonth, setCurrentMonth] = React11__namespace.useState(
+    selectedDate || /* @__PURE__ */ new Date()
+  );
+  const todayStart = startOfDay(today);
+  const selectedDateStart = selectedDate ? startOfDay(selectedDate) : null;
+  const firstDayOfMonth = new Date(
+    currentMonth.getFullYear(),
+    currentMonth.getMonth(),
+    1
+  );
+  const lastDayOfMonth = new Date(
+    currentMonth.getFullYear(),
+    currentMonth.getMonth() + 1,
+    0
+  );
+  const daysInMonth = lastDayOfMonth.getDate();
+  const startingDayOfWeek = firstDayOfMonth.getDay();
+  const prevMonth = () => {
+    setCurrentMonth(
+      new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)
+    );
+  };
+  const nextMonth = () => {
+    setCurrentMonth(
+      new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1)
+    );
+  };
+  const handleDateClick = (day) => {
+    const date = new Date(
+      currentMonth.getFullYear(),
+      currentMonth.getMonth(),
+      day
+    );
+    const dateStart = startOfDay(date);
+    if (minDate && dateStart < startOfDay(minDate)) return;
+    if (maxDate && dateStart > startOfDay(maxDate)) return;
+    onDateSelect(date);
+  };
+  const isDateDisabled = (day) => {
+    const date = new Date(
+      currentMonth.getFullYear(),
+      currentMonth.getMonth(),
+      day
+    );
+    const dateStart = startOfDay(date);
+    if (minDate && dateStart < startOfDay(minDate)) return true;
+    if (maxDate && dateStart > startOfDay(maxDate)) return true;
+    return false;
+  };
+  const days = [];
+  for (let i = 0; i < startingDayOfWeek; i++) {
+    days.push(null);
+  }
+  for (let day = 1; day <= daysInMonth; day++) {
+    days.push(day);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: prevMonth,
+          className: "p-2 rounded-full hover:bg-[var(--muted)] transition-colors",
+          "aria-label": "Previous month",
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-symbols-rounded text-[var(--fg)]", children: "chevron_left" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-sm font-medium text-[var(--fg)]", children: [
+        MONTHS[currentMonth.getMonth()],
+        " ",
+        currentMonth.getFullYear()
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: nextMonth,
+          className: "p-2 rounded-full hover:bg-[var(--muted)] transition-colors",
+          "aria-label": "Next month",
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-symbols-rounded text-[var(--fg)]", children: "chevron_right" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS_OF_WEEK.map((day) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "text-xs text-center text-[var(--muted-fg)] font-medium py-1",
+        children: day
+      },
+      day
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((day, idx) => {
+      if (day === null) {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square" }, `empty-${idx}`);
+      }
+      const date = new Date(
+        currentMonth.getFullYear(),
+        currentMonth.getMonth(),
+        day
+      );
+      const dateStart = startOfDay(date);
+      const isSelected = selectedDateStart && isSameDay(dateStart, selectedDateStart);
+      const isToday = isSameDay(dateStart, todayStart);
+      const isDisabled = isDateDisabled(day);
+      const isCurrentMonth = isSameMonth(dateStart, currentMonth);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleDateClick(day),
+          disabled: isDisabled,
+          className: [
+            "aspect-square rounded-lg text-sm transition-colors",
+            isSelected ? "bg-[var(--color-brand)] text-white font-medium" : isToday ? "bg-[var(--muted)] text-[var(--fg)] font-medium border border-[var(--color-brand)]" : "text-[var(--fg)] hover:bg-[var(--muted)]",
+            isDisabled ? "opacity-30 cursor-not-allowed" : "cursor-pointer",
+            !isCurrentMonth ? "opacity-50" : ""
+          ].filter(Boolean).join(" "),
+          children: day
+        },
+        day
+      );
+    }) })
+  ] });
+}
+function formatDate(date) {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const year = date.getFullYear();
+  return `${day}/${month}/${year}`;
+}
+function parseDate(dateString) {
+  const parts = dateString.split("/");
+  if (parts.length !== 3) return null;
+  const day = parseInt(parts[0], 10);
+  const month = parseInt(parts[1], 10) - 1;
+  const year = parseInt(parts[2], 10);
+  if (isNaN(day) || isNaN(month) || isNaN(year)) return null;
+  const date = new Date(year, month, day);
+  if (date.getDate() !== day || date.getMonth() !== month || date.getFullYear() !== year) {
+    return null;
+  }
+  return date;
+}
+function isValidDate(date) {
+  return date instanceof Date && !isNaN(date.getTime());
+}
+function startOfDay2(date) {
+  const d = new Date(date);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+var DateInput = React11__namespace.forwardRef(
+  ({
+    label,
+    value,
+    onChange,
+    error = false,
+    disabled = false,
+    minDate,
+    maxDate,
+    placeholder = "00/00/0000",
+    className = "",
+    ...props
+  }, ref) => {
+    const [inputValue, setInputValue] = React11__namespace.useState(
+      value && isValidDate(value) ? formatDate(value) : placeholder
+    );
+    const [isFocused, setIsFocused] = React11__namespace.useState(false);
+    const [showCalendar, setShowCalendar] = React11__namespace.useState(false);
+    const [initialDateSet, setInitialDateSet] = React11__namespace.useState(true);
+    const containerRef = React11__namespace.useRef(null);
+    React11__namespace.useEffect(() => {
+      if (value && isValidDate(value)) {
+        setInputValue(formatDate(value));
+      } else {
+        setInputValue(placeholder);
+      }
+    }, [value, placeholder]);
+    React11__namespace.useEffect(() => {
+      if (showCalendar && initialDateSet) {
+        const today = /* @__PURE__ */ new Date();
+        onChange(today);
+        setInputValue(formatDate(today));
+        setInitialDateSet(false);
+      }
+    }, [showCalendar, initialDateSet, onChange]);
+    React11__namespace.useEffect(() => {
+      const handleClickOutside = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target)) {
+          setShowCalendar(false);
+          setInitialDateSet(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    const handleInputChange = (e) => {
+      let rawValue = e.target.value;
+      rawValue = rawValue.replace(/\D/g, "").replace(/^(\d{2})/, "$1/").replace(/^(\d{2}\/\d{2})/, "$1/").slice(0, 10);
+      setInputValue(rawValue);
+      if (rawValue.length === 10) {
+        const parsedDate = parseDate(rawValue);
+        if (parsedDate && isValidDate(parsedDate)) {
+          onChange(parsedDate);
+        }
+      }
+    };
+    const handleCalendarSelect = (date) => {
+      const selectedDate = parseDate(inputValue);
+      const sameDay = selectedDate && isValidDate(selectedDate) && selectedDate.getDate() === date.getDate() && selectedDate.getMonth() === date.getMonth() && selectedDate.getFullYear() === date.getFullYear();
+      if (!sameDay) {
+        onChange(date);
+        setInputValue(formatDate(date));
+      }
+      setInitialDateSet(false);
+      setShowCalendar(false);
+    };
+    const handleInputFocus = () => {
+      setIsFocused(true);
+      setShowCalendar(true);
+    };
+    const handleInputBlur = () => {
+      setIsFocused(false);
+      const parsed = parseDate(inputValue);
+      if (!parsed || !isValidDate(parsed)) {
+        const today = /* @__PURE__ */ new Date();
+        onChange(today);
+        setInputValue(formatDate(today));
+      }
+    };
+    const isEmpty = inputValue === placeholder;
+    const textColorClass = isEmpty ? "text-[var(--muted-fg)]" : "";
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["relative w-full", className].join(" "), ref: containerRef, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          ref,
+          label,
+          type: "text",
+          value: inputValue,
+          onChange: handleInputChange,
+          onFocus: handleInputFocus,
+          onBlur: handleInputBlur,
+          onClick: () => !disabled && setShowCalendar(true),
+          disabled,
+          error,
+          icon: "calendar_today",
+          className: textColorClass,
+          ...props
+        }
+      ),
+      showCalendar && !disabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-20 mt-2 w-full max-w-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", showDecorations: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Calendar,
+        {
+          selectedDate: inputValue !== placeholder && parseDate(inputValue) && isValidDate(parseDate(inputValue)) ? parseDate(inputValue) : /* @__PURE__ */ new Date(),
+          onDateSelect: handleCalendarSelect,
+          today: startOfDay2(/* @__PURE__ */ new Date()),
+          minDate,
+          maxDate
+        }
+      ) }) })
+    ] });
+  }
+);
+DateInput.displayName = "DateInput";
 
 exports.AgentButton = AgentButton_default;
 exports.AnimatedBgCircle = AnimatedBgCircle_default;
@@ -1548,9 +1859,11 @@ exports.AvatarGroup = AvatarGroup;
 exports.BackgroundBlur = BackgroundBlur;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
+exports.Calendar = Calendar;
 exports.Card = Card;
 exports.Chip = Chip;
 exports.Counter = Counter;
+exports.DateInput = DateInput;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Input = Input;