@neoptocom/neopto-ui 1.5.4 → 1.6.0

package/dist/index.d.ts

@@ -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 };

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';
 
@@ -276,7 +276,7 @@ function Icon({
     }
   );
 }
-var Input = React3.forwardRef(
+var Input = React11.forwardRef(
   ({
     className,
     disabled,
@@ -369,7 +369,7 @@ var Input = React3.forwardRef(
   }
 );
 Input.displayName = "Input";
-var Textarea = React3.forwardRef(
+var Textarea = React11.forwardRef(
   ({ className, disabled, variant = "default", ...props }, ref) => {
     const isInline = variant === "inline";
     return /* @__PURE__ */ jsx(
@@ -398,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({
@@ -410,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);
@@ -435,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?.();
@@ -595,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: [
@@ -663,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,
@@ -822,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(" "),
@@ -1037,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);
@@ -1144,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",
@@ -1216,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 = () => {
@@ -1450,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)";
@@ -1528,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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "1.5.4",
+  "version": "1.6.0",
   "private": false,
   "description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive Storybook documentation. Requires Tailwind v4+.",
   "keywords": [

package/src/components/Autocomplete.tsx

@@ -167,7 +167,7 @@ export default 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(" ")}