@neoptocom/neopto-ui 1.5.4 → 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(() => {
@@ -297,7 +297,7 @@ function Icon({
     }
   );
 }
-var Input = React3__namespace.forwardRef(
+var Input = React11__namespace.forwardRef(
   ({
     className,
     disabled,
@@ -390,7 +390,7 @@ var Input = React3__namespace.forwardRef(
   }
 );
 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(
@@ -419,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({
@@ -431,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);
@@ -456,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?.();
@@ -579,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;
@@ -616,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: [
@@ -684,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,
@@ -731,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,
@@ -755,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) => {
@@ -764,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]
   );
@@ -843,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(" "),
@@ -969,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);
@@ -1058,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);
@@ -1165,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",
@@ -1237,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 = () => {
@@ -1281,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} {
@@ -1313,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",
     {
@@ -1362,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);
@@ -1471,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)";
@@ -1549,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;
@@ -1560,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;

package/dist/index.d.cts

@@ -392,4 +392,51 @@ interface BreadcrumbProps {
  */
 declare const Breadcrumb: React__default.FC<BreadcrumbProps>;
 
-export { AgentButton, type AgentButtonProps, AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, MessageBubble, type MessageBubbleProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Textarea, type TextareaProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };
+type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type"> & {
+    /** Label text displayed above the input */
+    label?: string;
+    /** Current date value */
+    value?: Date | null;
+    /** Callback when date changes */
+    onChange: (date: Date) => void;
+    /** Flag to visually mark the input as errored */
+    error?: boolean;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Placeholder text (default: "00/00/0000") */
+    placeholder?: string;
+};
+declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "value"> & {
+    /** Label text displayed above the input */
+    label?: string;
+    /** Current date value */
+    value?: Date | null;
+    /** Callback when date changes */
+    onChange: (date: Date) => void;
+    /** Flag to visually mark the input as errored */
+    error?: boolean;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Placeholder text (default: "00/00/0000") */
+    placeholder?: string;
+} & React.RefAttributes<HTMLInputElement>>;
+
+type CalendarProps = {
+    /** Currently selected date */
+    selectedDate?: Date;
+    /** Callback when a date is selected */
+    onDateSelect: (date: Date) => void;
+    /** Today's date (for highlighting) */
+    today?: Date;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+};
+declare function Calendar({ selectedDate, onDateSelect, today, minDate, maxDate, }: CalendarProps): react_jsx_runtime.JSX.Element;
+
+export { AgentButton, type AgentButtonProps, AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, Chip, type ChipProps, Counter, type CounterProps, DateInput, type DateInputProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, MessageBubble, type MessageBubbleProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Textarea, type TextareaProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };