nucleus-core-ts 0.8.6 → 0.8.8

package/dist/fe/components/DataTable/theme/index.js

@@ -0,0 +1,144 @@
+export const dataTableTheme = {
+    container: {
+        base: "w-full overflow-hidden",
+        border: "border border-gray-200 dark:border-gray-700",
+        rounded: "rounded-lg",
+        shadow: "shadow-sm"
+    },
+    scrollContainer: {
+        base: "overflow-auto",
+        maxHeight: "max-h-[70vh]",
+        scrollbar: "scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent"
+    },
+    table: {
+        base: "w-full border-collapse table-fixed",
+        layout: "min-w-full"
+    },
+    header: {
+        wrapper: {
+            base: "sticky top-0 z-10",
+            background: "bg-gray-50 dark:bg-gray-800"
+        },
+        row: {
+            base: "",
+            border: "border-b border-gray-200 dark:border-gray-700"
+        },
+        cell: {
+            base: "relative select-none bg-gray-50 dark:bg-gray-800",
+            padding: "px-4 py-3",
+            text: "text-left text-xs font-semibold uppercase tracking-wider",
+            color: "text-gray-600 dark:text-gray-300",
+            transition: "transition-colors duration-200",
+            hover: "hover:bg-gray-100 dark:hover:bg-gray-750",
+            sortable: "cursor-pointer",
+            sorted: "bg-gray-100 dark:bg-gray-750"
+        },
+        sortIcon: {
+            base: "inline-flex ml-1.5 transition-transform duration-300",
+            active: "text-primary-500 dark:text-primary-400",
+            inactive: "text-gray-400 dark:text-gray-500"
+        },
+        resizeHandle: {
+            base: "absolute right-0 top-0 h-full w-1 cursor-col-resize",
+            idle: "bg-transparent hover:bg-primary-400 dark:hover:bg-primary-500",
+            active: "bg-primary-500 dark:bg-primary-400",
+            hitArea: 'before:absolute before:right-[-4px] before:top-0 before:h-full before:w-[9px] before:content-[""]'
+        }
+    },
+    body: {
+        wrapper: {
+            base: ""
+        },
+        row: {
+            base: "group",
+            border: "border-b border-gray-100 dark:border-gray-700/50",
+            transition: "transition-colors duration-150",
+            hover: "hover:bg-gray-50 dark:hover:bg-gray-800/50",
+            zebra: {
+                even: "bg-white dark:bg-gray-900",
+                odd: "bg-gray-50/50 dark:bg-gray-800/30"
+            }
+        },
+        cell: {
+            base: "relative",
+            padding: "px-4 py-3",
+            text: "text-sm",
+            color: "text-gray-900 dark:text-gray-100",
+            truncate: "truncate",
+            transition: "transition-all duration-150",
+            hover: "group-hover:bg-gray-50/50 dark:group-hover:bg-gray-800/30"
+        },
+        resizeHandle: {
+            base: "absolute bottom-0 left-0 w-full h-1 cursor-row-resize",
+            idle: "bg-transparent hover:bg-primary-400 dark:hover:bg-primary-500",
+            active: "bg-primary-500 dark:bg-primary-400",
+            hitArea: 'before:absolute before:bottom-[-4px] before:left-0 before:w-full before:h-[9px] before:content-[""]'
+        }
+    },
+    loading: {
+        wrapper: "flex items-center justify-center py-8",
+        spinner: {
+            base: "animate-spin rounded-full border-2",
+            size: "h-8 w-8",
+            color: "border-primary-500 border-t-transparent"
+        },
+        text: "ml-3 text-sm text-gray-500 dark:text-gray-400"
+    },
+    empty: {
+        wrapper: "flex flex-col items-center justify-center py-12",
+        icon: "h-12 w-12 text-gray-300 dark:text-gray-600 mb-4",
+        text: "text-sm text-gray-500 dark:text-gray-400"
+    },
+    infiniteScroll: {
+        trigger: "h-1 w-full",
+        loader: "flex items-center justify-center py-4"
+    },
+    animation: {
+        row: {
+            enter: {
+                opacity: 0,
+                y: 10
+            },
+            visible: {
+                opacity: 1,
+                y: 0
+            },
+            duration: 0.3,
+            stagger: 0.02
+        },
+        cell: {
+            hover: {
+                scale: 1.01
+            },
+            duration: 0.15
+        },
+        sort: {
+            duration: 0.3,
+            ease: "power2.out"
+        },
+        resize: {
+            duration: 0.1,
+            ease: "power1.out"
+        }
+    }
+};
+export function extendTheme(overrides) {
+    return deepMerge(dataTableTheme, overrides);
+}
+function deepMerge(target, source) {
+    const output = {
+        ...target
+    };
+    for(const key in source){
+        if (Object.hasOwn(source, key)) {
+            const sourceValue = source[key];
+            const targetValue = target[key];
+            if (sourceValue !== undefined && typeof sourceValue === "object" && sourceValue !== null && !Array.isArray(sourceValue) && typeof targetValue === "object" && targetValue !== null && !Array.isArray(targetValue)) {
+                output[key] = deepMerge(targetValue, sourceValue);
+            } else if (sourceValue !== undefined) {
+                output[key] = sourceValue;
+            }
+        }
+    }
+    return output;
+}

package/dist/fe/components/DataTable/types/index.js

@@ -0,0 +1 @@
+export { };

package/dist/fe/components/DataTable/utils/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

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

@@ -0,0 +1,95 @@
+"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 { datePickerTheme } from "../theme";
+import { cn } from "../utils/cn";
+import { getCalendarDays, getWeekdaysForLocale, isDateDisabled, isDateInRange, isSameDay, isSameMonth, isToday } from "../utils/date";
+gsap.registerPlugin(useGSAP);
+export function CalendarGrid({ currentMonth, selectedDate, selectedRange, mode, locale, minDate, maxDate, disabledDates, disabledDaysOfWeek, firstDayOfWeek, onDateSelect, hoverDate, onHoverChange }) {
+    const gridRef = useRef(null);
+    const theme = datePickerTheme;
+    const days = getCalendarDays(currentMonth.getFullYear(), currentMonth.getMonth(), firstDayOfWeek);
+    const weekdays = getWeekdaysForLocale(locale, firstDayOfWeek);
+    useGSAP(()=>{
+        if (!gridRef.current) return;
+        const dayElements = gridRef.current.querySelectorAll("[data-day]");
+        gsap.fromTo(dayElements, {
+            opacity: 0,
+            scale: 0.8
+        }, {
+            opacity: 1,
+            scale: 1,
+            duration: 0.3,
+            stagger: {
+                amount: 0.15,
+                grid: [
+                    6,
+                    7
+                ],
+                from: "start"
+            },
+            ease: "power2.out"
+        });
+    }, [
+        currentMonth
+    ]);
+    const getDayClasses = (date)=>{
+        const isSelected = mode === "single" ? isSameDay(date, selectedDate) : selectedRange && (isSameDay(date, selectedRange.start) || isSameDay(date, selectedRange.end));
+        const isInCurrentMonth = isSameMonth(date, currentMonth);
+        const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates, disabledDaysOfWeek);
+        const isTodayDate = isToday(date);
+        const inRange = mode === "range" && selectedRange ? isDateInRange(date, selectedRange.start, selectedRange.end) || hoverDate && selectedRange.start && !selectedRange.end && isDateInRange(date, selectedRange.start, hoverDate) : false;
+        const isHoverRangeEnd = mode === "range" && selectedRange?.start && !selectedRange?.end && hoverDate && isSameDay(date, hoverDate);
+        return cn(theme.day.base, theme.day.size, theme.day.text.size, theme.day.rounded, theme.day.transition, !isSelected && !inRange && theme.day.text.color.light, !isSelected && !inRange && theme.day.text.color.dark, !isSelected && !inRange && !isDisabled && theme.day.states.hover.light, !isSelected && !inRange && !isDisabled && theme.day.states.hover.dark, !isInCurrentMonth && theme.day.states.otherMonth.opacity, isDisabled && theme.day.states.disabled.opacity, isDisabled && theme.day.states.disabled.cursor, isTodayDate && !isSelected && theme.day.states.today.border, isTodayDate && !isSelected && theme.day.states.today.text, isSelected && theme.day.states.selected.background, isSelected && theme.day.states.selected.text, isHoverRangeEnd && "ring-2 ring-blue-400 ring-inset");
+    };
+    const handleDayClick = (date)=>{
+        if (isDateDisabled(date, minDate, maxDate, disabledDates, disabledDaysOfWeek)) {
+            return;
+        }
+        onDateSelect(date);
+    };
+    const handleDayHover = (date)=>{
+        if (mode === "range") {
+            onHoverChange(date);
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: cn(theme.weekdays.base, theme.weekdays.padding),
+                children: weekdays.map((day, index)=>/*#__PURE__*/ _jsx("div", {
+                        className: cn("flex items-center justify-center", theme.day.size, theme.weekdays.text.size, theme.weekdays.text.weight, theme.weekdays.text.color.light, theme.weekdays.text.color.dark),
+                        children: day
+                    }, `weekday-${index}`))
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                ref: gridRef,
+                className: cn(theme.grid.base, theme.grid.gap),
+                children: days.map((date, index)=>{
+                    const isRangeStart = mode === "range" && selectedRange?.start && isSameDay(date, selectedRange.start);
+                    const isRangeEnd = mode === "range" && selectedRange?.end && isSameDay(date, selectedRange.end);
+                    const inRange = mode === "range" && selectedRange ? isDateInRange(date, selectedRange.start, selectedRange.end) || hoverDate && selectedRange.start && !selectedRange.end && isDateInRange(date, selectedRange.start, hoverDate) : false;
+                    const isHoverEnd = mode === "range" && selectedRange?.start && !selectedRange?.end && hoverDate && isSameDay(date, hoverDate);
+                    const showRangeBg = inRange || isRangeStart || isRangeEnd || isHoverEnd;
+                    return /*#__PURE__*/ _jsx("div", {
+                        className: cn(theme.dayWrapper.base, showRangeBg && theme.dayWrapper.inRange.light, showRangeBg && theme.dayWrapper.inRange.dark, isRangeStart && theme.dayWrapper.rangeStart, (isRangeEnd || isHoverEnd) && theme.dayWrapper.rangeEnd, isRangeStart && !isRangeEnd && !isHoverEnd && "rounded-r-none", (isRangeEnd || isHoverEnd) && !isRangeStart && "rounded-l-none", inRange && !isRangeStart && !isRangeEnd && !isHoverEnd && "rounded-none"),
+                        children: /*#__PURE__*/ _jsx("button", {
+                            type: "button",
+                            "data-day": true,
+                            onClick: ()=>handleDayClick(date),
+                            onMouseEnter: ()=>handleDayHover(date),
+                            onMouseLeave: ()=>handleDayHover(null),
+                            disabled: isDateDisabled(date, minDate, maxDate, disabledDates, disabledDaysOfWeek),
+                            className: getDayClasses(date),
+                            "aria-label": date.toLocaleDateString(locale),
+                            "aria-pressed": mode === "single" ? isSameDay(date, selectedDate) : !!(selectedRange && (isSameDay(date, selectedRange.start) || isSameDay(date, selectedRange.end))),
+                            children: date.getDate()
+                        })
+                    }, `day-${index}`);
+                })
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,152 @@
+"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";
+gsap.registerPlugin(useGSAP);
+export function CalendarHeader({ currentMonth, onPrevMonth, onNextMonth, onPrevYear, onNextYear, onMonthYearClick, locale, minDate, maxDate }) {
+    const titleRef = useRef(null);
+    const theme = datePickerTheme;
+    const localeConfig = getLocale(locale);
+    const monthName = localeConfig.months[currentMonth.getMonth()];
+    const year = currentMonth.getFullYear();
+    const canGoPrev = !minDate || currentMonth > minDate;
+    const canGoNext = !maxDate || currentMonth < maxDate;
+    useGSAP(()=>{
+        if (!titleRef.current) return;
+        gsap.fromTo(titleRef.current, {
+            opacity: 0,
+            y: -10
+        }, {
+            opacity: 1,
+            y: 0,
+            duration: 0.2,
+            ease: "power2.out"
+        });
+    }, [
+        currentMonth
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn(theme.header.base, theme.header.padding),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-1",
+                children: [
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: onPrevYear,
+                        disabled: !canGoPrev,
+                        className: cn(theme.header.button.base, theme.header.button.size, theme.header.button.color.light, theme.header.button.color.dark, theme.header.button.hover.light, theme.header.button.hover.dark, theme.header.button.rounded, theme.header.button.transition, !canGoPrev && "opacity-30 cursor-not-allowed"),
+                        "aria-label": "Previous year",
+                        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-4 h-4",
+                            "aria-hidden": "true",
+                            children: [
+                                /*#__PURE__*/ _jsx("polyline", {
+                                    points: "11 17 6 12 11 7"
+                                }),
+                                /*#__PURE__*/ _jsx("polyline", {
+                                    points: "18 17 13 12 18 7"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: onPrevMonth,
+                        disabled: !canGoPrev,
+                        className: cn(theme.header.button.base, theme.header.button.size, theme.header.button.color.light, theme.header.button.color.dark, theme.header.button.hover.light, theme.header.button.hover.dark, theme.header.button.rounded, theme.header.button.transition, !canGoPrev && "opacity-30 cursor-not-allowed"),
+                        "aria-label": "Previous month",
+                        children: /*#__PURE__*/ _jsx("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-4 h-4",
+                            "aria-hidden": "true",
+                            children: /*#__PURE__*/ _jsx("polyline", {
+                                points: "15 18 9 12 15 6"
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("button", {
+                ref: titleRef,
+                type: "button",
+                onClick: onMonthYearClick,
+                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: [
+                    monthName,
+                    " ",
+                    year
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-1",
+                children: [
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: onNextMonth,
+                        disabled: !canGoNext,
+                        className: cn(theme.header.button.base, theme.header.button.size, theme.header.button.color.light, theme.header.button.color.dark, theme.header.button.hover.light, theme.header.button.hover.dark, theme.header.button.rounded, theme.header.button.transition, !canGoNext && "opacity-30 cursor-not-allowed"),
+                        "aria-label": "Next month",
+                        children: /*#__PURE__*/ _jsx("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-4 h-4",
+                            "aria-hidden": "true",
+                            children: /*#__PURE__*/ _jsx("polyline", {
+                                points: "9 18 15 12 9 6"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: onNextYear,
+                        disabled: !canGoNext,
+                        className: cn(theme.header.button.base, theme.header.button.size, theme.header.button.color.light, theme.header.button.color.dark, theme.header.button.hover.light, theme.header.button.hover.dark, theme.header.button.rounded, theme.header.button.transition, !canGoNext && "opacity-30 cursor-not-allowed"),
+                        "aria-label": "Next year",
+                        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-4 h-4",
+                            "aria-hidden": "true",
+                            children: [
+                                /*#__PURE__*/ _jsx("polyline", {
+                                    points: "6 17 11 12 6 7"
+                                }),
+                                /*#__PURE__*/ _jsx("polyline", {
+                                    points: "13 17 18 12 13 7"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}