nucleus-core-ts 0.8.7 → 0.8.8

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

@@ -0,0 +1,315 @@
+export const datePickerTheme = {
+    container: {
+        base: "relative flex flex-col w-full",
+        spacing: "gap-1"
+    },
+    input: {
+        wrapper: {
+            base: "relative flex items-center w-full cursor-pointer",
+            border: {
+                base: "border border-gray-300 dark:border-gray-600",
+                focused: "border-blue-500 dark:border-blue-400 ring-2 ring-blue-500/20",
+                error: "border-red-500 dark:border-red-400",
+                disabled: "border-gray-200 dark:border-gray-700 cursor-not-allowed"
+            },
+            background: {
+                light: "bg-white",
+                dark: "dark:bg-gray-800"
+            },
+            padding: "px-4 py-3",
+            rounded: "rounded-lg",
+            shadow: "shadow-sm",
+            transition: "transition-all duration-200 ease-out"
+        },
+        text: {
+            base: "flex-1",
+            size: "text-base",
+            color: {
+                light: "text-gray-900",
+                dark: "dark:text-white"
+            },
+            placeholder: {
+                light: "text-gray-400",
+                dark: "dark:text-gray-500"
+            }
+        },
+        icon: {
+            base: "flex items-center justify-center flex-shrink-0",
+            size: "w-5 h-5",
+            color: {
+                light: "text-gray-400",
+                dark: "dark:text-gray-500",
+                focused: "text-blue-500 dark:text-blue-400"
+            },
+            spacing: {
+                left: "mr-3",
+                right: "ml-3"
+            }
+        }
+    },
+    label: {
+        base: "block",
+        text: {
+            size: "text-sm font-medium",
+            color: {
+                light: "text-gray-700",
+                dark: "dark:text-gray-300"
+            }
+        },
+        spacing: "mb-1.5"
+    },
+    dropdown: {
+        base: "absolute left-0 right-0 z-50",
+        background: {
+            light: "bg-white",
+            dark: "dark:bg-gray-800"
+        },
+        border: {
+            light: "border border-gray-200",
+            dark: "dark:border-gray-700"
+        },
+        rounded: "rounded-xl",
+        shadow: "shadow-xl",
+        padding: "p-4",
+        spacing: {
+            top: "mb-2",
+            bottom: "mt-2"
+        },
+        position: {
+            top: "bottom-full",
+            bottom: "top-full"
+        }
+    },
+    calendar: {
+        base: "select-none",
+        width: "w-72"
+    },
+    header: {
+        base: "flex items-center justify-between",
+        padding: "mb-4",
+        button: {
+            base: "flex items-center justify-center",
+            size: "w-8 h-8",
+            color: {
+                light: "text-gray-600",
+                dark: "dark:text-gray-400"
+            },
+            hover: {
+                light: "hover:bg-gray-100",
+                dark: "dark:hover:bg-gray-700"
+            },
+            rounded: "rounded-lg",
+            transition: "transition-colors duration-150"
+        },
+        title: {
+            base: "flex items-center justify-center cursor-pointer",
+            text: {
+                size: "text-base",
+                weight: "font-semibold",
+                color: {
+                    light: "text-gray-900",
+                    dark: "dark:text-white"
+                }
+            },
+            hover: {
+                light: "hover:bg-gray-100",
+                dark: "dark:hover:bg-gray-700"
+            },
+            rounded: "rounded-lg",
+            padding: "px-3 py-1.5",
+            transition: "transition-colors duration-150"
+        }
+    },
+    weekdays: {
+        base: "grid grid-cols-7",
+        padding: "mb-2",
+        text: {
+            size: "text-xs",
+            weight: "font-medium",
+            color: {
+                light: "text-gray-500",
+                dark: "dark:text-gray-400"
+            }
+        }
+    },
+    grid: {
+        base: "grid grid-cols-7",
+        gap: ""
+    },
+    dayWrapper: {
+        base: "flex items-center justify-center",
+        inRange: {
+            light: "bg-blue-100",
+            dark: "dark:bg-blue-900/40"
+        },
+        rangeStart: "rounded-l-lg",
+        rangeEnd: "rounded-r-lg"
+    },
+    day: {
+        base: "flex items-center justify-center cursor-pointer",
+        size: "w-9 h-9",
+        text: {
+            size: "text-sm",
+            color: {
+                light: "text-gray-900",
+                dark: "dark:text-white"
+            }
+        },
+        rounded: "rounded-lg",
+        transition: "transition-all duration-150",
+        states: {
+            hover: {
+                light: "hover:bg-gray-100",
+                dark: "dark:hover:bg-gray-700"
+            },
+            selected: {
+                background: "bg-blue-500 dark:bg-blue-600",
+                text: "text-white"
+            },
+            today: {
+                border: "ring-2 ring-blue-500 ring-inset",
+                text: "text-blue-600 dark:text-blue-400 font-semibold"
+            },
+            disabled: {
+                opacity: "opacity-30",
+                cursor: "cursor-not-allowed"
+            },
+            inRange: {
+                light: "bg-blue-100",
+                dark: "dark:bg-blue-900/40"
+            },
+            rangeStart: {
+                rounded: "rounded-l-lg rounded-r-none"
+            },
+            rangeEnd: {
+                rounded: "rounded-r-lg rounded-l-none"
+            },
+            otherMonth: {
+                opacity: "opacity-40"
+            }
+        }
+    },
+    monthSelector: {
+        base: "py-2",
+        grid: "grid grid-cols-3 gap-2",
+        item: {
+            base: "flex items-center justify-center cursor-pointer",
+            padding: "px-3 py-2",
+            rounded: "rounded-lg",
+            text: {
+                size: "text-sm",
+                color: {
+                    light: "text-gray-900",
+                    dark: "dark:text-white"
+                }
+            },
+            hover: {
+                light: "hover:bg-gray-100",
+                dark: "dark:hover:bg-gray-700"
+            },
+            selected: {
+                background: "bg-blue-500 dark:bg-blue-600",
+                text: "text-white"
+            },
+            transition: "transition-colors duration-150"
+        }
+    },
+    yearSelector: {
+        base: "py-2 max-h-64 overflow-y-auto",
+        grid: "grid grid-cols-4 gap-2",
+        item: {
+            base: "flex items-center justify-center cursor-pointer",
+            padding: "px-2 py-2",
+            rounded: "rounded-lg",
+            text: {
+                size: "text-sm",
+                color: {
+                    light: "text-gray-900",
+                    dark: "dark:text-white"
+                }
+            },
+            hover: {
+                light: "hover:bg-gray-100",
+                dark: "dark:hover:bg-gray-700"
+            },
+            selected: {
+                background: "bg-blue-500 dark:bg-blue-600",
+                text: "text-white"
+            },
+            transition: "transition-colors duration-150"
+        }
+    },
+    footer: {
+        base: "flex items-center justify-between",
+        padding: "mt-4 pt-4",
+        border: {
+            light: "border-t border-gray-200",
+            dark: "dark:border-gray-700"
+        },
+        button: {
+            base: "flex items-center justify-center",
+            padding: "px-4 py-2",
+            rounded: "rounded-lg",
+            text: {
+                size: "text-sm font-medium"
+            },
+            today: {
+                background: {
+                    light: "bg-blue-50",
+                    dark: "dark:bg-blue-900/30"
+                },
+                text: {
+                    light: "text-blue-600",
+                    dark: "dark:text-blue-400"
+                },
+                hover: {
+                    light: "hover:bg-blue-100",
+                    dark: "dark:hover:bg-blue-900/50"
+                }
+            },
+            clear: {
+                background: "bg-transparent",
+                text: {
+                    light: "text-gray-600",
+                    dark: "dark:text-gray-400"
+                },
+                hover: {
+                    light: "hover:bg-gray-100",
+                    dark: "dark:hover:bg-gray-700"
+                }
+            },
+            transition: "transition-colors duration-150"
+        }
+    },
+    rangeIndicator: {
+        base: "flex items-center justify-center",
+        text: {
+            size: "text-sm",
+            color: {
+                light: "text-gray-600",
+                dark: "dark:text-gray-400"
+            }
+        },
+        padding: "py-2 mb-2",
+        separator: "mx-2"
+    },
+    helperText: {
+        base: "mt-1",
+        text: "text-sm",
+        color: {
+            light: "text-gray-500",
+            dark: "dark:text-gray-400"
+        }
+    },
+    errorText: {
+        base: "mt-1",
+        text: "text-sm",
+        color: "text-red-500"
+    }
+};
+export function extendDatePickerTheme(overrides) {
+    return {
+        ...datePickerTheme,
+        ...overrides
+    };
+}

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

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

package/dist/fe/components/DatePicker/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/utils/date.js

@@ -0,0 +1,132 @@
+import { getLocale } from "../locales";
+export function getMonthDays(year, month) {
+    const days = [];
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    for(let i = 1; i <= lastDay.getDate(); i++){
+        days.push(new Date(year, month, i));
+    }
+    return days;
+}
+export function getCalendarDays(year, month, firstDayOfWeek) {
+    const days = [];
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    let startDay = firstDay.getDay() - firstDayOfWeek;
+    if (startDay < 0) startDay += 7;
+    for(let i = startDay - 1; i >= 0; i--){
+        days.push(new Date(year, month, -i));
+    }
+    for(let i = 1; i <= lastDay.getDate(); i++){
+        days.push(new Date(year, month, i));
+    }
+    const remainingDays = 42 - days.length;
+    for(let i = 1; i <= remainingDays; i++){
+        days.push(new Date(year, month + 1, i));
+    }
+    return days;
+}
+export function isSameDay(date1, date2) {
+    if (!date1 || !date2) return false;
+    return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+}
+export function isSameMonth(date1, date2) {
+    return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
+}
+export function isToday(date) {
+    return isSameDay(date, new Date());
+}
+export function isDateInRange(date, start, end) {
+    if (!start || !end) return false;
+    const time = date.getTime();
+    return time > start.getTime() && time < end.getTime();
+}
+export function isDateDisabled(date, minDate, maxDate, disabledDates, disabledDaysOfWeek) {
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    if (disabledDates) {
+        for (const disabledDate of disabledDates){
+            if (isSameDay(date, disabledDate)) return true;
+        }
+    }
+    if (disabledDaysOfWeek && disabledDaysOfWeek.includes(date.getDay())) {
+        return true;
+    }
+    return false;
+}
+export function formatDate(date, format) {
+    if (!date) return "";
+    const day = date.getDate().toString().padStart(2, "0");
+    const month = (date.getMonth() + 1).toString().padStart(2, "0");
+    const year = date.getFullYear().toString();
+    return format.replace("dd", day).replace("MM", month).replace("yyyy", year);
+}
+export function formatDateRange(range, format, separator = " - ") {
+    if (!range.start && !range.end) return "";
+    if (!range.start) return formatDate(range.end, format);
+    if (!range.end) return formatDate(range.start, format);
+    return `${formatDate(range.start, format)}${separator}${formatDate(range.end, format)}`;
+}
+export function formatDateWithLocale(date, locale) {
+    if (!date) return "";
+    const config = getLocale(locale);
+    return formatDate(date, config.dateFormat);
+}
+export function formatDateRangeWithLocale(range, locale, separator = " - ") {
+    const config = getLocale(locale);
+    return formatDateRange(range, config.dateFormat, separator);
+}
+export function addMonths(date, months) {
+    const result = new Date(date);
+    result.setMonth(result.getMonth() + months);
+    return result;
+}
+export function addYears(date, years) {
+    const result = new Date(date);
+    result.setFullYear(result.getFullYear() + years);
+    return result;
+}
+export function startOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+export function endOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+}
+export function startOfDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+export function getYearRange(centerYear, range = 12) {
+    const years = [];
+    const startYear = centerYear - Math.floor(range / 2);
+    for(let i = 0; i < range; i++){
+        years.push(startYear + i);
+    }
+    return years;
+}
+export function parseDate(dateString, format) {
+    if (!dateString) return null;
+    try {
+        const dayIndex = format.indexOf("dd");
+        const monthIndex = format.indexOf("MM");
+        const yearIndex = format.indexOf("yyyy");
+        const day = Number.parseInt(dateString.slice(dayIndex, dayIndex + 2), 10);
+        const month = Number.parseInt(dateString.slice(monthIndex, monthIndex + 2), 10) - 1;
+        const year = Number.parseInt(dateString.slice(yearIndex, yearIndex + 4), 10);
+        if (Number.isNaN(day) || Number.isNaN(month) || Number.isNaN(year)) {
+            return null;
+        }
+        return new Date(year, month, day);
+    } catch  {
+        return null;
+    }
+}
+export function getWeekdaysForLocale(locale, firstDayOfWeek) {
+    const config = getLocale(locale);
+    const weekdays = [
+        ...config.weekdaysMin
+    ];
+    for(let i = 0; i < firstDayOfWeek; i++){
+        weekdays.push(weekdays.shift());
+    }
+    return weekdays;
+}