@neoptocom/neopto-ui 1.5.3 → 1.6.0

package/dist/index.d.cts

@@ -70,6 +70,8 @@ type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     legendProps?: React.HTMLAttributes<HTMLLegendElement>;
     /** Flag to visually mark the input as errored */
     error?: boolean;
+    /** Optional icon name to display on the inner right of the input */
+    icon?: string;
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     /** Input visual variant */
@@ -82,6 +84,8 @@ declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttribu
     legendProps?: React.HTMLAttributes<HTMLLegendElement>;
     /** Flag to visually mark the input as errored */
     error?: boolean;
+    /** Optional icon name to display on the inner right of the input */
+    icon?: string;
 } & React.RefAttributes<HTMLInputElement>>;
 
 type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & {
@@ -388,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 };

package/dist/index.d.ts

@@ -70,6 +70,8 @@ type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     legendProps?: React.HTMLAttributes<HTMLLegendElement>;
     /** Flag to visually mark the input as errored */
     error?: boolean;
+    /** Optional icon name to display on the inner right of the input */
+    icon?: string;
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     /** Input visual variant */
@@ -82,6 +84,8 @@ declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttribu
     legendProps?: React.HTMLAttributes<HTMLLegendElement>;
     /** Flag to visually mark the input as errored */
     error?: boolean;
+    /** Optional icon name to display on the inner right of the input */
+    icon?: string;
 } & React.RefAttributes<HTMLInputElement>>;
 
 type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & {
@@ -388,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 };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React3 from 'react';
+import * as React11 from 'react';
 import { useState, useEffect, useMemo, useId, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -243,7 +243,40 @@ function Card({
     }
   );
 }
-var Input = React3.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__ */ jsx(
+    "span",
+    {
+      className: `material-symbols-rounded rounded ${className}`,
+      style,
+      "aria-hidden": title ? void 0 : true,
+      title,
+      children: name
+    }
+  );
+}
+var Input = React11.forwardRef(
   ({
     className,
     disabled,
@@ -252,14 +285,17 @@ var Input = React3.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) {
@@ -286,6 +322,12 @@ var Input = React3.forwardRef(
     const inputClassName = inputClasses.join(" ");
     const inputElement = /* @__PURE__ */ jsx("input", { ref, disabled, className: inputClassName, ...props });
     if (!label) {
+      if (hasIcon) {
+        return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          inputElement,
+          /* @__PURE__ */ jsx("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-[var(--muted-fg)] opacity-50" }) })
+        ] });
+      }
       return inputElement;
     }
     const { className: fieldsetClassNameProp = "", ...restFieldsetProps } = fieldsetProps ?? {};
@@ -317,14 +359,17 @@ var Input = React3.forwardRef(
               children: label
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "relative flex pl-5 pr-3 pb-1 h-full", children: /* @__PURE__ */ jsx("div", { className: "flex w-full", children: inputElement }) })
+          /* @__PURE__ */ jsx("div", { className: "relative flex pl-5 pr-3 pb-1 h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full relative", children: [
+            inputElement,
+            hasIcon && /* @__PURE__ */ jsx("div", { className: "absolute right-1 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-[var(--muted-fg)] opacity-50" }) })
+          ] }) })
         ]
       }
     );
   }
 );
 Input.displayName = "Input";
-var Textarea = React3.forwardRef(
+var Textarea = React11.forwardRef(
   ({ className, disabled, variant = "default", ...props }, ref) => {
     const isInline = variant === "inline";
     return /* @__PURE__ */ jsx(
@@ -353,7 +398,7 @@ var Textarea = React3.forwardRef(
 );
 Textarea.displayName = "Textarea";
 function useIsomorphicLayoutEffect(effect, deps) {
-  const useEffectHook = typeof window !== "undefined" ? React3.useLayoutEffect : React3.useEffect;
+  const useEffectHook = typeof window !== "undefined" ? React11.useLayoutEffect : React11.useEffect;
   useEffectHook(effect, deps);
 }
 function Modal({
@@ -365,9 +410,9 @@ function Modal({
   zIndex = 50,
   showDecorations = true
 }) {
-  const [mounted, setMounted] = React3.useState(false);
-  const [isDark, setIsDark] = React3.useState(false);
-  React3.useEffect(() => {
+  const [mounted, setMounted] = React11.useState(false);
+  const [isDark, setIsDark] = React11.useState(false);
+  React11.useEffect(() => {
     const checkDarkMode = () => {
       const hasDarkClass = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark") || document.querySelector(".dark") !== null;
       setIsDark(hasDarkClass);
@@ -390,7 +435,7 @@ function Modal({
       document.body.style.overflow = original;
     };
   }, [open]);
-  React3.useEffect(() => {
+  React11.useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose?.();
@@ -550,7 +595,7 @@ function AvatarGroup({
   overlapPx = 8,
   withRings = true
 }) {
-  const avatars = React3.Children.toArray(children);
+  const avatars = React11.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__ */ jsxs("div", { className: ["flex items-center", className].filter(Boolean).join(" "), children: [
@@ -604,39 +649,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__ */ 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 = {
@@ -651,7 +663,7 @@ function getIconButtonClasses(variant = "ghost", size = "md", className) {
   };
   return [base, variants[variant], sizes[size], className].filter(Boolean).join(" ");
 }
-var IconButton = React3.forwardRef(
+var IconButton = React11.forwardRef(
   ({
     variant,
     size,
@@ -810,7 +822,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(" "),
@@ -1025,7 +1037,7 @@ function Search({
     const el = list.children[idx];
     el?.scrollIntoView({ block: "nearest" });
   }
-  React3.useEffect(() => {
+  React11.useEffect(() => {
     return () => {
       if (searchTimeoutRef.current) {
         clearTimeout(searchTimeoutRef.current);
@@ -1132,7 +1144,7 @@ function getButtonClasses(variant = "primary", size = "md", fullWidth, className
     className
   ].filter(Boolean).join(" ");
 }
-var Button = React3.forwardRef(
+var Button = React11.forwardRef(
   ({ variant, size, fullWidth, className, children, icon, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "button",
@@ -1204,8 +1216,8 @@ function Counter({
   className = "",
   ...props
 }) {
-  const [count, setCount] = React3.useState(value);
-  React3.useEffect(() => {
+  const [count, setCount] = React11.useState(value);
+  React11.useEffect(() => {
     setCount(value);
   }, [value]);
   const handleIncrement = () => {
@@ -1438,7 +1450,7 @@ var AgentButton = ({
   );
 };
 var AgentButton_default = AgentButton;
-var MessageBubble = React3.forwardRef(
+var MessageBubble = React11.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)";
@@ -1516,5 +1528,304 @@ 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.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__ */ jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: prevMonth,
+          className: "p-2 rounded-full hover:bg-[var(--muted)] transition-colors",
+          "aria-label": "Previous month",
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded text-[var(--fg)]", children: "chevron_left" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("h3", { className: "text-sm font-medium text-[var(--fg)]", children: [
+        MONTHS[currentMonth.getMonth()],
+        " ",
+        currentMonth.getFullYear()
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: nextMonth,
+          className: "p-2 rounded-full hover:bg-[var(--muted)] transition-colors",
+          "aria-label": "Next month",
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded text-[var(--fg)]", children: "chevron_right" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS_OF_WEEK.map((day) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "text-xs text-center text-[var(--muted-fg)] font-medium py-1",
+        children: day
+      },
+      day
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((day, idx) => {
+      if (day === null) {
+        return /* @__PURE__ */ 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__ */ 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.forwardRef(
+  ({
+    label,
+    value,
+    onChange,
+    error = false,
+    disabled = false,
+    minDate,
+    maxDate,
+    placeholder = "00/00/0000",
+    className = "",
+    ...props
+  }, ref) => {
+    const [inputValue, setInputValue] = React11.useState(
+      value && isValidDate(value) ? formatDate(value) : placeholder
+    );
+    const [isFocused, setIsFocused] = React11.useState(false);
+    const [showCalendar, setShowCalendar] = React11.useState(false);
+    const [initialDateSet, setInitialDateSet] = React11.useState(true);
+    const containerRef = React11.useRef(null);
+    React11.useEffect(() => {
+      if (value && isValidDate(value)) {
+        setInputValue(formatDate(value));
+      } else {
+        setInputValue(placeholder);
+      }
+    }, [value, placeholder]);
+    React11.useEffect(() => {
+      if (showCalendar && initialDateSet) {
+        const today = /* @__PURE__ */ new Date();
+        onChange(today);
+        setInputValue(formatDate(today));
+        setInitialDateSet(false);
+      }
+    }, [showCalendar, initialDateSet, onChange]);
+    React11.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__ */ jsxs("div", { className: ["relative w-full", className].join(" "), ref: containerRef, children: [
+      /* @__PURE__ */ 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__ */ jsx("div", { className: "absolute z-20 mt-2 w-full max-w-sm", children: /* @__PURE__ */ jsx(Card, { className: "p-4", showDecorations: false, children: /* @__PURE__ */ 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";
 
-export { AgentButton_default as AgentButton, AnimatedBgCircle_default as AnimatedBgCircle, AnimatedBgRectangle_default as AnimatedBgRectangle, AppBackground, Autocomplete, Avatar, AvatarGroup, BackgroundBlur, Breadcrumb, Button, Card, Chip, Counter, Icon, IconButton, Input, MessageBubble, Modal, Search, Separator, Skeleton, Textarea, Typo, assets_exports as assets };
+export { AgentButton_default as AgentButton, AnimatedBgCircle_default as AnimatedBgCircle, AnimatedBgRectangle_default as AnimatedBgRectangle, AppBackground, Autocomplete, Avatar, AvatarGroup, BackgroundBlur, Breadcrumb, Button, Calendar, Card, Chip, Counter, DateInput, Icon, IconButton, Input, MessageBubble, Modal, Search, Separator, Skeleton, Textarea, Typo, assets_exports as assets };