nucleus-core-ts 0.8.7 → 0.8.8

package/dist/fe/components/DatePicker/components/DatePicker.js

@@ -0,0 +1,381 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useEffect, useId, useRef, useState } from "react";
+import { getLocale } from "../locales";
+import { datePickerTheme } from "../theme";
+import { cn } from "../utils/cn";
+import { addMonths, formatDateRangeWithLocale, formatDateWithLocale, startOfDay } from "../utils/date";
+import { CalendarGrid } from "./CalendarGrid";
+import { CalendarHeader } from "./CalendarHeader";
+import { MonthYearSelector } from "./MonthYearSelector";
+gsap.registerPlugin(useGSAP);
+export function DatePicker({ mode, value, onChange, locale = "en-US", placeholder, label, disabled = false, minDate, maxDate, disabledDates, disabledDaysOfWeek, className, inputClassName, dropdownClassName, showClearButton = true, showTodayButton = true, firstDayOfWeek, leftIcon, rightIcon, errorMessage, helperText, required = false, onOpen, onClose }) {
+    const localeConfig = getLocale(locale);
+    const effectiveFirstDayOfWeek = firstDayOfWeek ?? localeConfig.firstDayOfWeek;
+    const [isOpen, setIsOpen] = useState(false);
+    const [dropdownPosition, setDropdownPosition] = useState("bottom");
+    const [currentMonth, setCurrentMonth] = useState(()=>{
+        if (mode === "single" && value) {
+            return startOfDay(value);
+        }
+        if (mode === "range" && value?.start) {
+            const rangeValue = value;
+            return rangeValue.start ? startOfDay(rangeValue.start) : startOfDay(new Date());
+        }
+        return startOfDay(new Date());
+    });
+    const [calendarView, setCalendarView] = useState("calendar");
+    const [hoverDate, setHoverDate] = useState(null);
+    const containerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const inputId = useId();
+    const theme = datePickerTheme;
+    const selectedDate = mode === "single" ? value : null;
+    const selectedRange = mode === "range" ? value : null;
+    const displayValue = mode === "single" ? formatDateWithLocale(selectedDate, locale) : formatDateRangeWithLocale(selectedRange || {
+        start: null,
+        end: null
+    }, locale);
+    const placeholderText = placeholder || (mode === "range" ? `${localeConfig.selectStartDate} - ${localeConfig.selectEndDate}` : localeConfig.selectDate);
+    const { contextSafe } = useGSAP({
+        scope: containerRef
+    });
+    useEffect(()=>{
+        if (!isOpen) return;
+        const updatePosition = ()=>{
+            if (!containerRef.current) return;
+            const rect = containerRef.current.getBoundingClientRect();
+            const spaceBelow = window.innerHeight - rect.bottom;
+            const spaceAbove = rect.top;
+            const dropdownHeight = 400;
+            if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+                setDropdownPosition("top");
+            } else {
+                setDropdownPosition("bottom");
+            }
+        };
+        updatePosition();
+        window.addEventListener("scroll", updatePosition, true);
+        window.addEventListener("resize", updatePosition);
+        return ()=>{
+            window.removeEventListener("scroll", updatePosition, true);
+            window.removeEventListener("resize", updatePosition);
+        };
+    }, [
+        isOpen
+    ]);
+    useEffect(()=>{
+        if (!isOpen) return;
+        const handleClickOutside = (e)=>{
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                handleClose();
+            }
+        };
+        const handleEscape = (e)=>{
+            if (e.key === "Escape") {
+                handleClose();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        document.addEventListener("keydown", handleEscape);
+        return ()=>{
+            document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener("keydown", handleEscape);
+        };
+    }, [
+        isOpen
+    ]);
+    const handleOpen = contextSafe(()=>{
+        if (disabled) return;
+        setIsOpen(true);
+        setCalendarView("calendar");
+        onOpen?.();
+        requestAnimationFrame(()=>{
+            if (dropdownRef.current) {
+                gsap.fromTo(dropdownRef.current, {
+                    opacity: 0,
+                    y: dropdownPosition === "bottom" ? -12 : 12,
+                    scale: 0.96
+                }, {
+                    opacity: 1,
+                    y: 0,
+                    scale: 1,
+                    duration: 0.25,
+                    ease: "power3.out"
+                });
+            }
+        });
+    });
+    const handleClose = contextSafe(()=>{
+        if (dropdownRef.current) {
+            gsap.to(dropdownRef.current, {
+                opacity: 0,
+                y: dropdownPosition === "bottom" ? -8 : 8,
+                scale: 0.96,
+                duration: 0.15,
+                ease: "power2.in",
+                onComplete: ()=>{
+                    setIsOpen(false);
+                    setHoverDate(null);
+                    onClose?.();
+                }
+            });
+        } else {
+            setIsOpen(false);
+            setHoverDate(null);
+            onClose?.();
+        }
+    });
+    const handleDateSelect = (date)=>{
+        if (mode === "single") {
+            onChange(date);
+            handleClose();
+        } else {
+            const range = selectedRange || {
+                start: null,
+                end: null
+            };
+            if (!range.start || range.start && range.end) {
+                onChange({
+                    start: date,
+                    end: null
+                });
+            } else {
+                if (date < range.start) {
+                    onChange({
+                        start: date,
+                        end: range.start
+                    });
+                } else {
+                    onChange({
+                        start: range.start,
+                        end: date
+                    });
+                }
+                handleClose();
+            }
+        }
+    };
+    const handleClear = contextSafe(()=>{
+        if (mode === "single") {
+            onChange(null);
+        } else {
+            onChange({
+                start: null,
+                end: null
+            });
+        }
+    });
+    const handleToday = ()=>{
+        const today = startOfDay(new Date());
+        setCurrentMonth(today);
+        if (mode === "single") {
+            onChange(today);
+            handleClose();
+        }
+    };
+    const handlePrevMonth = ()=>setCurrentMonth(addMonths(currentMonth, -1));
+    const handleNextMonth = ()=>setCurrentMonth(addMonths(currentMonth, 1));
+    const handlePrevYear = ()=>setCurrentMonth(addMonths(currentMonth, -12));
+    const handleNextYear = ()=>setCurrentMonth(addMonths(currentMonth, 12));
+    const handleMonthYearClick = ()=>{
+        setCalendarView(calendarView === "calendar" ? "month" : "calendar");
+    };
+    const handleMonthSelect = (month)=>{
+        setCurrentMonth(new Date(currentMonth.getFullYear(), month, 1));
+        setCalendarView("calendar");
+    };
+    const handleYearSelect = (year)=>{
+        setCurrentMonth(new Date(year, currentMonth.getMonth(), 1));
+    };
+    const handleInputClick = ()=>{
+        if (isOpen) {
+            handleClose();
+        } else {
+            handleOpen();
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: containerRef,
+        className: cn(theme.container.base, theme.container.spacing, className),
+        children: [
+            label && /*#__PURE__*/ _jsxs("label", {
+                htmlFor: inputId,
+                className: cn(theme.label.base, theme.label.text.size, theme.label.text.color.light, theme.label.text.color.dark, theme.label.spacing),
+                children: [
+                    label,
+                    required && /*#__PURE__*/ _jsx("span", {
+                        className: "text-red-500 ml-1",
+                        children: "*"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "relative",
+                children: [
+                    /*#__PURE__*/ _jsxs("button", {
+                        id: inputId,
+                        type: "button",
+                        onClick: handleInputClick,
+                        disabled: disabled,
+                        className: cn(theme.input.wrapper.base, theme.input.wrapper.border.base, theme.input.wrapper.background.light, theme.input.wrapper.background.dark, theme.input.wrapper.padding, theme.input.wrapper.rounded, theme.input.wrapper.shadow, theme.input.wrapper.transition, isOpen && theme.input.wrapper.border.focused, errorMessage && theme.input.wrapper.border.error, disabled && theme.input.wrapper.border.disabled, inputClassName),
+                        "aria-expanded": isOpen,
+                        "aria-haspopup": "dialog",
+                        children: [
+                            leftIcon && /*#__PURE__*/ _jsx("span", {
+                                className: cn(theme.input.icon.base, theme.input.icon.size, theme.input.icon.color.light, theme.input.icon.color.dark, theme.input.icon.spacing.left, isOpen && theme.input.icon.color.focused),
+                                children: leftIcon
+                            }),
+                            !leftIcon && /*#__PURE__*/ _jsx("span", {
+                                className: cn(theme.input.icon.base, theme.input.icon.size, theme.input.icon.color.light, theme.input.icon.color.dark, theme.input.icon.spacing.left, isOpen && theme.input.icon.color.focused),
+                                children: /*#__PURE__*/ _jsxs("svg", {
+                                    xmlns: "http://www.w3.org/2000/svg",
+                                    viewBox: "0 0 24 24",
+                                    fill: "none",
+                                    stroke: "currentColor",
+                                    strokeWidth: "2",
+                                    strokeLinecap: "round",
+                                    strokeLinejoin: "round",
+                                    className: "w-full h-full",
+                                    "aria-hidden": "true",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("rect", {
+                                            x: "3",
+                                            y: "4",
+                                            width: "18",
+                                            height: "18",
+                                            rx: "2",
+                                            ry: "2"
+                                        }),
+                                        /*#__PURE__*/ _jsx("line", {
+                                            x1: "16",
+                                            y1: "2",
+                                            x2: "16",
+                                            y2: "6"
+                                        }),
+                                        /*#__PURE__*/ _jsx("line", {
+                                            x1: "8",
+                                            y1: "2",
+                                            x2: "8",
+                                            y2: "6"
+                                        }),
+                                        /*#__PURE__*/ _jsx("line", {
+                                            x1: "3",
+                                            y1: "10",
+                                            x2: "21",
+                                            y2: "10"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                className: cn(theme.input.text.base, theme.input.text.size, displayValue ? cn(theme.input.text.color.light, theme.input.text.color.dark) : cn(theme.input.text.placeholder.light, theme.input.text.placeholder.dark), "text-left"),
+                                children: displayValue || placeholderText
+                            }),
+                            rightIcon && /*#__PURE__*/ _jsx("span", {
+                                className: cn(theme.input.icon.base, theme.input.icon.size, theme.input.icon.color.light, theme.input.icon.color.dark, theme.input.icon.spacing.right, isOpen && theme.input.icon.color.focused),
+                                children: rightIcon
+                            })
+                        ]
+                    }),
+                    isOpen && /*#__PURE__*/ _jsx("div", {
+                        ref: dropdownRef,
+                        className: cn(theme.dropdown.base, theme.dropdown.background.light, theme.dropdown.background.dark, theme.dropdown.border.light, theme.dropdown.border.dark, theme.dropdown.rounded, theme.dropdown.shadow, theme.dropdown.padding, dropdownPosition === "top" && theme.dropdown.position.top, dropdownPosition === "top" && theme.dropdown.spacing.top, dropdownPosition === "bottom" && theme.dropdown.position.bottom, dropdownPosition === "bottom" && theme.dropdown.spacing.bottom, dropdownClassName),
+                        role: "dialog",
+                        "aria-modal": "true",
+                        "aria-label": localeConfig.selectDate,
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: theme.calendar.base,
+                            children: [
+                                mode === "range" && /*#__PURE__*/ _jsxs("div", {
+                                    className: cn(theme.rangeIndicator.base, theme.rangeIndicator.padding, "border-b", theme.footer.border.light, theme.footer.border.dark),
+                                    children: [
+                                        /*#__PURE__*/ _jsx("div", {
+                                            className: cn("flex-1 text-center", theme.rangeIndicator.text.size, selectedRange?.start ? cn(theme.input.text.color.light, theme.input.text.color.dark) : cn(theme.rangeIndicator.text.color.light, theme.rangeIndicator.text.color.dark)),
+                                            children: selectedRange?.start ? formatDateWithLocale(selectedRange.start, locale) : localeConfig.selectStartDate
+                                        }),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: cn(theme.rangeIndicator.separator, theme.rangeIndicator.text.color.light),
+                                            children: "→"
+                                        }),
+                                        /*#__PURE__*/ _jsx("div", {
+                                            className: cn("flex-1 text-center", theme.rangeIndicator.text.size, selectedRange?.end ? cn(theme.input.text.color.light, theme.input.text.color.dark) : cn(theme.rangeIndicator.text.color.light, theme.rangeIndicator.text.color.dark)),
+                                            children: selectedRange?.end ? formatDateWithLocale(selectedRange.end, locale) : localeConfig.selectEndDate
+                                        })
+                                    ]
+                                }),
+                                calendarView === "calendar" ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(CalendarHeader, {
+                                            currentMonth: currentMonth,
+                                            onPrevMonth: handlePrevMonth,
+                                            onNextMonth: handleNextMonth,
+                                            onPrevYear: handlePrevYear,
+                                            onNextYear: handleNextYear,
+                                            onMonthYearClick: handleMonthYearClick,
+                                            locale: locale,
+                                            minDate: minDate,
+                                            maxDate: maxDate
+                                        }),
+                                        /*#__PURE__*/ _jsx(CalendarGrid, {
+                                            currentMonth: currentMonth,
+                                            selectedDate: selectedDate,
+                                            selectedRange: selectedRange,
+                                            mode: mode,
+                                            locale: locale,
+                                            minDate: minDate,
+                                            maxDate: maxDate,
+                                            disabledDates: disabledDates,
+                                            disabledDaysOfWeek: disabledDaysOfWeek,
+                                            firstDayOfWeek: effectiveFirstDayOfWeek,
+                                            onDateSelect: handleDateSelect,
+                                            hoverDate: hoverDate,
+                                            onHoverChange: setHoverDate
+                                        })
+                                    ]
+                                }) : /*#__PURE__*/ _jsx(MonthYearSelector, {
+                                    currentMonth: currentMonth,
+                                    onMonthSelect: handleMonthSelect,
+                                    onYearSelect: handleYearSelect,
+                                    locale: locale,
+                                    minDate: minDate,
+                                    maxDate: maxDate,
+                                    view: calendarView === "month" ? "month" : "year",
+                                    onViewChange: (v)=>setCalendarView(v),
+                                    onClose: ()=>setCalendarView("calendar")
+                                }),
+                                (showTodayButton || showClearButton) && /*#__PURE__*/ _jsxs("div", {
+                                    className: cn(theme.footer.base, theme.footer.padding, theme.footer.border.light, theme.footer.border.dark),
+                                    children: [
+                                        showClearButton && /*#__PURE__*/ _jsx("button", {
+                                            type: "button",
+                                            onClick: handleClear,
+                                            className: cn(theme.footer.button.base, theme.footer.button.padding, theme.footer.button.rounded, theme.footer.button.text.size, theme.footer.button.clear.background, theme.footer.button.clear.text.light, theme.footer.button.clear.text.dark, theme.footer.button.clear.hover.light, theme.footer.button.clear.hover.dark, theme.footer.button.transition),
+                                            children: localeConfig.clear
+                                        }),
+                                        showTodayButton && /*#__PURE__*/ _jsx("button", {
+                                            type: "button",
+                                            onClick: handleToday,
+                                            className: cn(theme.footer.button.base, theme.footer.button.padding, theme.footer.button.rounded, theme.footer.button.text.size, theme.footer.button.today.background.light, theme.footer.button.today.background.dark, theme.footer.button.today.text.light, theme.footer.button.today.text.dark, theme.footer.button.today.hover.light, theme.footer.button.today.hover.dark, theme.footer.button.transition),
+                                            children: localeConfig.today
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            errorMessage && /*#__PURE__*/ _jsx("span", {
+                className: cn(theme.errorText.base, theme.errorText.text, theme.errorText.color),
+                children: errorMessage
+            }),
+            helperText && !errorMessage && /*#__PURE__*/ _jsx("span", {
+                className: cn(theme.helperText.base, theme.helperText.text, theme.helperText.color.light, theme.helperText.color.dark),
+                children: helperText
+            })
+        ]
+    });
+}

package/dist/fe/components/DatePicker/components/MonthYearSelector.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useRef } from "react";
+import { getLocale } from "../locales";
+import { datePickerTheme } from "../theme";
+import { cn } from "../utils/cn";
+import { getYearRange } from "../utils/date";
+gsap.registerPlugin(useGSAP);
+export function MonthYearSelector({ currentMonth, onMonthSelect, onYearSelect, locale, minDate, maxDate, view, onViewChange, onClose }) {
+    const containerRef = useRef(null);
+    const theme = datePickerTheme;
+    const localeConfig = getLocale(locale);
+    const currentYear = currentMonth.getFullYear();
+    const currentMonthIndex = currentMonth.getMonth();
+    const years = getYearRange(currentYear, 16);
+    useGSAP(()=>{
+        if (!containerRef.current) return;
+        const items = containerRef.current.querySelectorAll("[data-item]");
+        gsap.fromTo(items, {
+            opacity: 0,
+            scale: 0.9
+        }, {
+            opacity: 1,
+            scale: 1,
+            duration: 0.25,
+            stagger: 0.02,
+            ease: "power2.out"
+        });
+    }, [
+        view
+    ]);
+    const handleMonthClick = (monthIndex)=>{
+        onMonthSelect(monthIndex);
+        onClose();
+    };
+    const handleYearClick = (year)=>{
+        onYearSelect(year);
+        onViewChange("month");
+    };
+    if (view === "year") {
+        return /*#__PURE__*/ _jsx("div", {
+            ref: containerRef,
+            className: theme.yearSelector.base,
+            children: /*#__PURE__*/ _jsx("div", {
+                className: theme.yearSelector.grid,
+                children: years.map((year)=>{
+                    const isSelected = year === currentYear;
+                    const isDisabled = minDate && year < minDate.getFullYear() || maxDate && year > maxDate.getFullYear();
+                    return /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        "data-item": true,
+                        onClick: ()=>handleYearClick(year),
+                        disabled: isDisabled,
+                        className: cn(theme.yearSelector.item.base, theme.yearSelector.item.padding, theme.yearSelector.item.rounded, theme.yearSelector.item.text.size, theme.yearSelector.item.transition, isSelected ? cn(theme.yearSelector.item.selected.background, theme.yearSelector.item.selected.text) : cn(theme.yearSelector.item.text.color.light, theme.yearSelector.item.text.color.dark, theme.yearSelector.item.hover.light, theme.yearSelector.item.hover.dark), isDisabled && "opacity-30 cursor-not-allowed"),
+                        children: year
+                    }, year);
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: containerRef,
+        className: theme.monthSelector.base,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex justify-center mb-3",
+                children: /*#__PURE__*/ _jsx("button", {
+                    type: "button",
+                    onClick: ()=>onViewChange("year"),
+                    className: cn(theme.header.title.base, theme.header.title.text.size, theme.header.title.text.weight, theme.header.title.text.color.light, theme.header.title.text.color.dark, theme.header.title.hover.light, theme.header.title.hover.dark, theme.header.title.rounded, theme.header.title.padding, theme.header.title.transition),
+                    children: currentYear
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.monthSelector.grid,
+                children: localeConfig.monthsShort.map((month, index)=>{
+                    const isSelected = index === currentMonthIndex;
+                    const isDisabled = minDate && new Date(currentYear, index + 1, 0) < minDate || maxDate && new Date(currentYear, index, 1) > maxDate;
+                    return /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        "data-item": true,
+                        onClick: ()=>handleMonthClick(index),
+                        disabled: isDisabled,
+                        className: cn(theme.monthSelector.item.base, theme.monthSelector.item.padding, theme.monthSelector.item.rounded, theme.monthSelector.item.text.size, theme.monthSelector.item.transition, isSelected ? cn(theme.monthSelector.item.selected.background, theme.monthSelector.item.selected.text) : cn(theme.monthSelector.item.text.color.light, theme.monthSelector.item.text.color.dark, theme.monthSelector.item.hover.light, theme.monthSelector.item.hover.dark), isDisabled && "opacity-30 cursor-not-allowed"),
+                        children: month
+                    }, month);
+                })
+            })
+        ]
+    });
+}

package/dist/fe/components/DatePicker/index.js

@@ -0,0 +1,7 @@
+export { CalendarGrid } from "./components/CalendarGrid";
+export { CalendarHeader } from "./components/CalendarHeader";
+export { DatePicker } from "./components/DatePicker";
+export { MonthYearSelector } from "./components/MonthYearSelector";
+export { getAvailableLocales, getLocale, locales } from "./locales";
+export { datePickerTheme, extendDatePickerTheme } from "./theme";
+export { addMonths, addYears, endOfMonth, formatDate, formatDateRange, formatDateRangeWithLocale, formatDateWithLocale, getCalendarDays, getMonthDays, getWeekdaysForLocale, getYearRange, isDateDisabled, isDateInRange, isSameDay, isSameMonth, isToday, parseDate, startOfDay, startOfMonth } from "./utils/date";