@raydenui/ui 0.9.7 → 0.10.0

package/dist/components/DatePicker/DatePicker.cjs

@@ -0,0 +1,343 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+/* ─── Calendar Utilities ───────────────────────────────────────────────── */
+const MONTH_NAMES = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+const DAY_LABELS = ["M", "T", "W", "T", "F", "S", "S"];
+function getDaysInMonth(year, month) {
+    return new Date(year, month + 1, 0).getDate();
+}
+function getFirstDayOfWeek(year, month) {
+    const day = new Date(year, month, 1).getDay();
+    return day === 0 ? 6 : day - 1; // Monday = 0
+}
+function isSameDay(a, b) {
+    if (!a || !b)
+        return false;
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+function isToday(date) {
+    return isSameDay(date, new Date());
+}
+function isBetween(date, start, end) {
+    if (!start || !end)
+        return false;
+    const t = date.getTime();
+    const s = Math.min(start.getTime(), end.getTime());
+    const e = Math.max(start.getTime(), end.getTime());
+    return t > s && t < e;
+}
+function dayTime(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+}
+function isDateDisabled(date, minDate, maxDate) {
+    if (minDate && dayTime(date) < dayTime(minDate))
+        return true;
+    if (maxDate && dayTime(date) > dayTime(maxDate))
+        return true;
+    return false;
+}
+/* ─── Icons ────────────────────────────────────────────────────────────── */
+function ChevronLeft({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M9 3L5 7l4 4" }) }));
+}
+function ChevronRight({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M5 3l4 4-4 4" }) }));
+}
+function ChevronDown({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M6 9l6 6 6-6" }) }));
+}
+function DayCell({ day, state, fullDate, onClick, tabStop, onFocus }) {
+    const isInteractive = state !== "disabled";
+    const cellClasses = (0, cn_1.cn)("flex items-center justify-center w-full min-w-0 h-10 text-sm font-medium relative select-none", state === "selected" && "bg-action-primary text-white rounded-[10px]", state === "start-range" && "bg-action-primary text-white rounded-l-[10px]", state === "end-range" && "bg-action-primary text-white rounded-r-[10px]", state === "mid-range" && "bg-primary-50 text-action-primary-text", state === "disabled" && "text-grey-300", state === "default" && "text-on-surface hover:bg-grey-75 rounded-[10px]", state === "today" && "text-on-surface hover:bg-grey-75 rounded-[10px]", isInteractive && "cursor-pointer");
+    // Build accessible label with full date and state context
+    const dateLabel = fullDate.toLocaleDateString("en-US", {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+    });
+    const stateLabel = state === "today"
+        ? "Today, "
+        : state === "selected"
+            ? "Selected, "
+            : state === "start-range"
+                ? "Start of range, "
+                : state === "end-range"
+                    ? "End of range, "
+                    : state === "mid-range"
+                        ? "In selected range, "
+                        : "";
+    return ((0, jsx_runtime_1.jsx)("div", { role: "gridcell", className: "flex-1 min-w-0", "aria-selected": state === "selected" || state.endsWith("range"), children: (0, jsx_runtime_1.jsxs)("button", { type: "button", "data-day": dayTime(fullDate), onFocus: onFocus, className: (0, cn_1.cn)(cellClasses, "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-action-primary-text"), onClick: isInteractive ? onClick : undefined, disabled: !isInteractive, tabIndex: isInteractive && tabStop ? 0 : -1, "aria-label": `${stateLabel}${dateLabel}`, "aria-current": state === "today" ? "date" : undefined, "aria-pressed": state === "selected" || state === "start-range" || state === "end-range"
+                ? true
+                : undefined, children: [day, state === "today" && ((0, jsx_runtime_1.jsx)("span", { className: "absolute bottom-[5px] left-1/2 -translate-x-1/2 size-1 rounded-full bg-primary-400", "aria-hidden": "true" }))] }) }));
+}
+function MonthGrid({ year, month, selectedDate, rangeStart, rangeEnd, isRange, minDate, maxDate, onDayClick, focusedDate, onDayFocus, }) {
+    const daysInMonth = getDaysInMonth(year, month);
+    const firstDay = getFirstDayOfWeek(year, month);
+    const prevMonthDays = getDaysInMonth(year, month - 1);
+    const cells = [];
+    // Previous month trailing days
+    for (let i = firstDay - 1; i >= 0; i--) {
+        const d = prevMonthDays - i;
+        cells.push({ day: d, state: "disabled", date: new Date(year, month - 1, d) });
+    }
+    // Current month days
+    for (let d = 1; d <= daysInMonth; d++) {
+        const date = new Date(year, month, d);
+        let state = "default";
+        if (isDateDisabled(date, minDate, maxDate)) {
+            state = "disabled";
+        }
+        else if (isRange && rangeStart && rangeEnd) {
+            const start = rangeStart.getTime() <= rangeEnd.getTime() ? rangeStart : rangeEnd;
+            const end = rangeStart.getTime() <= rangeEnd.getTime() ? rangeEnd : rangeStart;
+            if (isSameDay(date, start))
+                state = "start-range";
+            else if (isSameDay(date, end))
+                state = "end-range";
+            else if (isBetween(date, start, end))
+                state = "mid-range";
+        }
+        else if (isRange && rangeStart && !rangeEnd && isSameDay(date, rangeStart)) {
+            state = "selected";
+        }
+        else if (!isRange && isSameDay(date, selectedDate)) {
+            state = "selected";
+        }
+        if (state === "default" && isToday(date)) {
+            state = "today";
+        }
+        cells.push({ day: d, state, date });
+    }
+    // Next month leading days
+    const remaining = 42 - cells.length;
+    for (let d = 1; d <= remaining; d++) {
+        cells.push({ day: d, state: "disabled", date: new Date(year, month + 1, d) });
+    }
+    // Only show 5 rows if last row is all disabled
+    const rows = [];
+    for (let i = 0; i < cells.length; i += 7) {
+        rows.push(cells.slice(i, i + 7));
+    }
+    // Remove last row if all disabled
+    if (rows.length === 6 && rows[5].every((c) => c.state === "disabled")) {
+        rows.pop();
+    }
+    const tabDate = cells.find((cell) => cell.state !== "disabled" && isSameDay(cell.date, focusedDate))?.date ??
+        cells.find((cell) => cell.state !== "disabled")?.date;
+    const fullDayNames = [
+        "Monday",
+        "Tuesday",
+        "Wednesday",
+        "Thursday",
+        "Friday",
+        "Saturday",
+        "Sunday",
+    ];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", role: "grid", "aria-label": `${MONTH_NAMES[month]} ${year}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-10 items-center", role: "row", children: DAY_LABELS.map((label, i) => ((0, jsx_runtime_1.jsx)("div", { role: "columnheader", "aria-label": fullDayNames[i], className: "flex items-center justify-center flex-1 min-w-0 h-10 text-sm font-medium text-on-surface-secondary", children: label }, i))) }), rows.map((row, ri) => ((0, jsx_runtime_1.jsx)("div", { className: "flex h-10 items-center", role: "row", children: row.map((cell, ci) => ((0, jsx_runtime_1.jsx)(DayCell, { day: cell.day, state: cell.state, fullDate: cell.date, onClick: () => onDayClick(cell.date), tabStop: isSameDay(cell.date, tabDate), onFocus: () => onDayFocus(cell.date) }, ci))) }, ri)))] }));
+}
+function YearGrid({ baseYear, selectedYear, onYearClick, minYear, maxYear }) {
+    const [focusedYear, setFocusedYear] = (0, react_1.useState)(selectedYear ?? baseYear);
+    const firstYear = Math.max(baseYear, minYear ?? baseYear);
+    const lastYear = Math.min(baseYear + 19, maxYear ?? baseYear + 19);
+    const tabYear = Math.min(lastYear, Math.max(firstYear, focusedYear));
+    const years = [];
+    for (let i = 0; i < 20; i++) {
+        years.push(baseYear + i);
+    }
+    const rows = [];
+    for (let i = 0; i < years.length; i += 4) {
+        rows.push(years.slice(i, i + 4));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2 w-full", role: "grid", "aria-label": "Year selection", onKeyDown: (event) => {
+            const target = event.target;
+            if (!target.dataset.year)
+                return;
+            const current = Number(target.dataset.year);
+            const delta = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: 4, ArrowUp: -4 }[event.key];
+            const next = event.key === "Home"
+                ? firstYear
+                : event.key === "End"
+                    ? lastYear
+                    : delta !== undefined
+                        ? Math.min(lastYear, Math.max(firstYear, current + delta))
+                        : null;
+            if (next === null)
+                return;
+            event.preventDefault();
+            setFocusedYear(next);
+            event.currentTarget.querySelector(`[data-year="${next}"]`)?.focus();
+        }, children: rows.map((row, ri) => ((0, jsx_runtime_1.jsx)("div", { className: "flex gap-4 h-10 items-center w-full", role: "row", children: row.map((year) => ((0, jsx_runtime_1.jsx)("div", { role: "gridcell", className: "flex-1 min-w-0", "aria-selected": year === selectedYear, children: (0, jsx_runtime_1.jsx)("button", { type: "button", "data-year": year, tabIndex: year === tabYear ? 0 : -1, onFocus: () => setFocusedYear(year), disabled: year < firstYear || year > lastYear, "aria-label": year === selectedYear ? `${year}, selected` : String(year), "aria-pressed": year === selectedYear || undefined, className: (0, cn_1.cn)("w-full flex items-center justify-center py-2.5 px-1 rounded-[10px] disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-action-primary-text text-sm font-medium cursor-pointer select-none", year === selectedYear
+                        ? "bg-action-primary text-white"
+                        : "text-on-surface hover:bg-grey-75"), onClick: () => onYearClick(year), children: year }) }, year))) }, ri))) }));
+}
+/* ─── Nav Button ───────────────────────────────────────────────────────── */
+function NavButton({ direction, label, onClick, hidden, className, }) {
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClick, "aria-label": label ?? (direction === "left" ? "Previous month" : "Next month"), "aria-hidden": hidden || undefined, tabIndex: hidden ? -1 : undefined, className: (0, cn_1.cn)("flex items-center justify-center p-2 rounded-lg bg-grey-75 hover:bg-grey-200 transition-colors cursor-pointer", hidden && "opacity-0 pointer-events-none", className), children: direction === "left" ? ((0, jsx_runtime_1.jsx)(ChevronLeft, { className: "size-3.5 text-on-surface-body" })) : ((0, jsx_runtime_1.jsx)(ChevronRight, { className: "size-3.5 text-on-surface-body" })) }));
+}
+/* ─── DatePicker ───────────────────────────────────────────────────────── */
+exports.DatePicker = (0, react_1.forwardRef)(({ mode = "single", value, defaultValue = null, rangeValue, defaultRangeValue = [null, null], onChange, onRangeChange, showFooter = false, onDone, onClear, minDate, maxDate, className, ...rest }, ref) => {
+    const now = new Date();
+    const [internalDate, setInternalDate] = (0, react_1.useState)(defaultValue);
+    const [internalRange, setInternalRange] = (0, react_1.useState)(defaultRangeValue);
+    const selectedDate = value === undefined ? internalDate : value;
+    const [rangeStart, rangeEnd] = rangeValue === undefined ? internalRange : rangeValue;
+    const candidate = selectedDate ?? rangeStart ?? now;
+    const initialDate = minDate && dayTime(candidate) < dayTime(minDate)
+        ? minDate
+        : maxDate && dayTime(candidate) > dayTime(maxDate)
+            ? maxDate
+            : candidate;
+    const [focusedDate, setFocusedDate] = (0, react_1.useState)(initialDate);
+    const calendarRef = (0, react_1.useRef)(null);
+    const focusRequested = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (!focusRequested.current)
+            return;
+        calendarRef.current
+            ?.querySelector(`[data-day="${dayTime(focusedDate)}"]:not(:disabled)`)
+            ?.focus();
+        focusRequested.current = false;
+    }, [focusedDate]);
+    const [viewMonth, setViewMonth] = (0, react_1.useState)(initialDate.getMonth());
+    const [viewYear, setViewYear] = (0, react_1.useState)(initialDate.getFullYear());
+    const [yearBase, setYearBase] = (0, react_1.useState)(Math.floor(initialDate.getFullYear() / 20) * 20);
+    const goToPrevMonth = (0, react_1.useCallback)(() => {
+        const previous = new Date(viewYear, viewMonth - 1, 1);
+        setViewMonth(previous.getMonth());
+        setViewYear(previous.getFullYear());
+    }, [viewMonth, viewYear]);
+    const goToNextMonth = (0, react_1.useCallback)(() => {
+        const next = new Date(viewYear, viewMonth + 1, 1);
+        setViewMonth(next.getMonth());
+        setViewYear(next.getFullYear());
+    }, [viewMonth, viewYear]);
+    const selectDate = (date) => {
+        if (value === undefined)
+            setInternalDate(date);
+        onChange?.(date);
+    };
+    const selectRange = (range) => {
+        if (rangeValue === undefined)
+            setInternalRange(range);
+        onRangeChange?.(range);
+    };
+    const handleDayClick = (date) => {
+        if (isDateDisabled(date, minDate, maxDate))
+            return;
+        if (mode === "single")
+            selectDate(date);
+        else if (mode === "range") {
+            if (!rangeStart || rangeEnd)
+                selectRange([date, null]);
+            else
+                selectRange(date < rangeStart ? [date, rangeStart] : [rangeStart, date]);
+        }
+    };
+    const handleYearClick = (year) => {
+        let date = new Date(year, selectedDate?.getMonth() ?? 0, 1);
+        if (minDate && date < minDate)
+            date = minDate;
+        if (maxDate && date > maxDate)
+            date = maxDate;
+        selectDate(date);
+        setViewYear(year);
+    };
+    const handleClear = () => {
+        if (mode === "range")
+            selectRange([null, null]);
+        else
+            selectDate(null);
+        onClear?.();
+    };
+    const handleCalendarKey = (event) => {
+        const target = event.target;
+        if (!target.dataset.day)
+            return;
+        const date = new Date(Number(target.dataset.day));
+        const next = new Date(date);
+        const weekday = (date.getDay() + 6) % 7;
+        switch (event.key) {
+            case "ArrowRight":
+                next.setDate(date.getDate() + 1);
+                break;
+            case "ArrowLeft":
+                next.setDate(date.getDate() - 1);
+                break;
+            case "ArrowDown":
+                next.setDate(date.getDate() + 7);
+                break;
+            case "ArrowUp":
+                next.setDate(date.getDate() - 7);
+                break;
+            case "Home":
+                next.setDate(date.getDate() - weekday);
+                break;
+            case "End":
+                next.setDate(date.getDate() + 6 - weekday);
+                break;
+            case "PageUp":
+            case "PageDown": {
+                const month = date.getMonth() + (event.key === "PageUp" ? -1 : 1) * (event.shiftKey ? 12 : 1);
+                next.setDate(1);
+                next.setMonth(month);
+                next.setDate(Math.min(date.getDate(), getDaysInMonth(next.getFullYear(), next.getMonth())));
+                break;
+            }
+            default:
+                return;
+        }
+        event.preventDefault();
+        const bounded = minDate && dayTime(next) < dayTime(minDate)
+            ? new Date(dayTime(minDate))
+            : maxDate && dayTime(next) > dayTime(maxDate)
+                ? new Date(dayTime(maxDate))
+                : next;
+        focusRequested.current = true;
+        setViewMonth(bounded.getMonth());
+        setViewYear(bounded.getFullYear());
+        setFocusedDate(bounded);
+    };
+    // Second month for range mode
+    const secondMonth = (0, react_1.useMemo)(() => {
+        const m = viewMonth + 1;
+        return { month: m > 11 ? 0 : m, year: m > 11 ? viewYear + 1 : viewYear };
+    }, [viewMonth, viewYear]);
+    const monthYearLabel = `${MONTH_NAMES[viewMonth]} ${viewYear}`;
+    const secondMonthLabel = `${MONTH_NAMES[secondMonth.month]} ${secondMonth.year}`;
+    return ((0, jsx_runtime_1.jsxs)("div", { ...rest, ref: (node) => {
+            calendarRef.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, onKeyDown: (event) => {
+            rest.onKeyDown?.(event);
+            if (!event.defaultPrevented)
+                handleCalendarKey(event);
+        }, className: (0, cn_1.cn)("bg-surface border border-grey-75 rounded-2xl p-5 shadow-soft-xs", "flex flex-col gap-6", mode !== "range" && "w-full max-w-[340px]", className), children: [mode === "single" && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between w-full", children: [(0, jsx_runtime_1.jsx)(NavButton, { direction: "left", onClick: goToPrevMonth }), (0, jsx_runtime_1.jsx)("span", { "aria-live": "polite", className: "text-sm font-medium text-on-surface-body", children: monthYearLabel }), (0, jsx_runtime_1.jsx)(NavButton, { direction: "right", onClick: goToNextMonth })] }), (0, jsx_runtime_1.jsx)(MonthGrid, { year: viewYear, month: viewMonth, selectedDate: selectedDate, minDate: minDate, maxDate: maxDate, onDayClick: handleDayClick, focusedDate: focusedDate.getMonth() === viewMonth && focusedDate.getFullYear() === viewYear
+                                ? focusedDate
+                                : new Date(viewYear, viewMonth, 1), onDayFocus: setFocusedDate })] }) })), mode === "range" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col md:flex-row gap-6 md:gap-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between w-full md:w-[280px]", children: [(0, jsx_runtime_1.jsx)(NavButton, { direction: "left", onClick: goToPrevMonth }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-on-surface-body", children: monthYearLabel }) }), (0, jsx_runtime_1.jsx)(NavButton, { direction: "right", onClick: goToNextMonth, className: "md:hidden" }), (0, jsx_runtime_1.jsx)(NavButton, { direction: "right", hidden: true, className: "hidden md:flex" })] }), (0, jsx_runtime_1.jsx)(MonthGrid, { year: viewYear, month: viewMonth, rangeStart: rangeStart, rangeEnd: rangeEnd, isRange: true, minDate: minDate, maxDate: maxDate, onDayClick: handleDayClick, focusedDate: focusedDate.getMonth() === viewMonth && focusedDate.getFullYear() === viewYear
+                                    ? focusedDate
+                                    : new Date(viewYear, viewMonth, 1), onDayFocus: setFocusedDate })] }), (0, jsx_runtime_1.jsxs)("div", { className: "hidden md:flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between w-[280px]", children: [(0, jsx_runtime_1.jsx)(NavButton, { direction: "left", hidden: true }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-on-surface-body", children: secondMonthLabel }) }), (0, jsx_runtime_1.jsx)(NavButton, { direction: "right", onClick: goToNextMonth })] }), (0, jsx_runtime_1.jsx)(MonthGrid, { year: secondMonth.year, month: secondMonth.month, rangeStart: rangeStart, rangeEnd: rangeEnd, isRange: true, minDate: minDate, maxDate: maxDate, onDayClick: handleDayClick, focusedDate: focusedDate, onDayFocus: setFocusedDate })] })] })), mode === "year" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4 items-center w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-sm font-medium text-on-surface-body", children: [yearBase, "\u2013", yearBase + 19] }), (0, jsx_runtime_1.jsx)(ChevronDown, { className: "size-6 text-on-surface-muted" })] }), (0, jsx_runtime_1.jsx)(YearGrid, { baseYear: yearBase, selectedYear: selectedDate?.getFullYear(), onYearClick: handleYearClick, minYear: minDate?.getFullYear(), maxYear: maxDate?.getFullYear() }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4 mt-2", children: [(0, jsx_runtime_1.jsx)(NavButton, { direction: "left", label: "Previous 20 years", onClick: () => setYearBase((b) => b - 20) }), (0, jsx_runtime_1.jsx)(NavButton, { direction: "right", label: "Next 20 years", onClick: () => setYearBase((b) => b + 20) })] })] })), showFooter && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between border-t border-grey-100 pt-4", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClear, className: "text-sm font-semibold text-on-surface-body hover:text-on-surface px-2 cursor-pointer", children: "Clear" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onDone, className: "bg-action-primary text-white text-sm font-semibold px-5 py-2.5 rounded-lg hover:bg-action-primary-hover cursor-pointer", children: "Done" })] }))] }));
+});
+exports.DatePicker.displayName = "DatePicker";