@windrun-huaiin/third-ui 29.1.0 → 29.2.1

package/dist/main/calendar/calendar-date-range-input.js

@@ -0,0 +1,81 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var icons = require('@windrun-huaiin/base-ui/icons');
+var lib = require('@windrun-huaiin/base-ui/lib');
+var utils = require('@windrun-huaiin/lib/utils');
+var usePressFeedback = require('../buttons/use-press-feedback.js');
+var randomDateRangeDialog = require('./random-date-range-dialog.js');
+
+const DEFAULT_PLACEHOLDER = '滑动窗口日期';
+const DEFAULT_RANGE_DAYS = 7;
+const CLEAR_PRESS_FEEDBACK_MS = 180;
+function parseDateString(value) {
+    return new Date(`${value}T00:00:00.000Z`);
+}
+function getTodayString() {
+    return new Date().toISOString().slice(0, 10);
+}
+function getInclusiveDayCount(value) {
+    if (!value.startDate || !value.endDate) {
+        return 0;
+    }
+    const startTime = parseDateString(value.startDate).getTime();
+    const endTime = parseDateString(value.endDate).getTime();
+    return Math.max(0, Math.floor(Math.abs(endTime - startTime) / 86400000) + 1);
+}
+function getRangeLabel(value, showDayCount, dayCountUnit) {
+    if (!value.startDate || !value.endDate) {
+        return null;
+    }
+    const dateLabel = `${value.startDate} ~ ${value.endDate}`;
+    if (!showDayCount) {
+        return dateLabel;
+    }
+    return `${dateLabel} · ${getInclusiveDayCount(value)}${dayCountUnit}`;
+}
+function CalendarDateRangeInput({ value, onChange, placeholder = DEFAULT_PLACEHOLDER, defaultRangeDays = DEFAULT_RANGE_DAYS, disabled = false, className, showDayCount = false, dayCountUnit = 'D', themedCalendarIcon = true, clearPressFeedback = 'subtle', onOpenChange, }) {
+    var _a;
+    const [open, setOpen] = React.useState(false);
+    const pressMode = usePressFeedback.resolvePressFeedbackMode(clearPressFeedback);
+    const { pressedKey, flash, getPressProps } = usePressFeedback.usePressFeedback(CLEAR_PRESS_FEEDBACK_MS);
+    const label = getRangeLabel(value, showDayCount, dayCountUnit);
+    const hasValue = Boolean(value.startDate || value.endDate);
+    const isClearPressed = pressMode !== 'none' && pressedKey === 'clear' && !disabled;
+    function handleOpenChange(nextOpen) {
+        setOpen(nextOpen);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
+    }
+    function handleClear() {
+        onChange({ startDate: null, endDate: null });
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, onClick: () => {
+                    if (!disabled) {
+                        handleOpenChange(true);
+                    }
+                }, onKeyDown: (event) => {
+                    if (disabled) {
+                        return;
+                    }
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        handleOpenChange(true);
+                    }
+                }, className: utils.cn('flex h-11 w-full cursor-pointer items-center rounded-2xl border border-border/70 bg-background/80 text-left text-sm shadow-sm transition hover:bg-accent/40', disabled && 'cursor-not-allowed opacity-60 hover:bg-background/80', className), children: [jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 px-3", children: [jsxRuntime.jsx(icons.CalendarDaysIcon, { className: utils.cn('h-4 w-4 shrink-0', themedCalendarIcon ? lib.themeIconColor : 'text-muted-foreground') }), jsxRuntime.jsx("span", { className: utils.cn('truncate', label ? 'text-foreground' : 'text-muted-foreground'), children: label !== null && label !== void 0 ? label : placeholder })] }), jsxRuntime.jsx("button", Object.assign({ type: "button", disabled: disabled || !hasValue, onClick: (event) => {
+                            event.stopPropagation();
+                            if (disabled || !hasValue) {
+                                return;
+                            }
+                            if (pressMode !== 'none') {
+                                flash('clear');
+                            }
+                            handleClear();
+                        }, className: utils.cn('mr-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-[transform,background-color,color,box-shadow]', hasValue
+                            ? 'hover:bg-black/10 hover:text-foreground dark:hover:bg-white/12'
+                            : 'cursor-default opacity-35', isClearPressed &&
+                            'scale-90 bg-black/15 text-foreground shadow-inner dark:bg-white/18'), "aria-label": "Clear date range", title: "Clear date range" }, (pressMode !== 'none' && !disabled && hasValue ? getPressProps('clear') : {}), { children: jsxRuntime.jsx(icons.XIcon, { className: "h-4 w-4" }) }))] }), jsxRuntime.jsx(randomDateRangeDialog.RandomDateRangeDialog, { open: open, value: value, anchorDate: (_a = value.startDate) !== null && _a !== void 0 ? _a : getTodayString(), defaultRangeDays: defaultRangeDays, onOpenChange: handleOpenChange, onApply: onChange, onClear: onChange })] }));
+}
+
+exports.CalendarDateRangeInput = CalendarDateRangeInput;

package/dist/main/calendar/calendar-date-range-input.mjs

@@ -0,0 +1,79 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { CalendarDaysIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { usePressFeedback, resolvePressFeedbackMode } from '../buttons/use-press-feedback.mjs';
+import { RandomDateRangeDialog } from './random-date-range-dialog.mjs';
+
+const DEFAULT_PLACEHOLDER = '滑动窗口日期';
+const DEFAULT_RANGE_DAYS = 7;
+const CLEAR_PRESS_FEEDBACK_MS = 180;
+function parseDateString(value) {
+    return new Date(`${value}T00:00:00.000Z`);
+}
+function getTodayString() {
+    return new Date().toISOString().slice(0, 10);
+}
+function getInclusiveDayCount(value) {
+    if (!value.startDate || !value.endDate) {
+        return 0;
+    }
+    const startTime = parseDateString(value.startDate).getTime();
+    const endTime = parseDateString(value.endDate).getTime();
+    return Math.max(0, Math.floor(Math.abs(endTime - startTime) / 86400000) + 1);
+}
+function getRangeLabel(value, showDayCount, dayCountUnit) {
+    if (!value.startDate || !value.endDate) {
+        return null;
+    }
+    const dateLabel = `${value.startDate} ~ ${value.endDate}`;
+    if (!showDayCount) {
+        return dateLabel;
+    }
+    return `${dateLabel} · ${getInclusiveDayCount(value)}${dayCountUnit}`;
+}
+function CalendarDateRangeInput({ value, onChange, placeholder = DEFAULT_PLACEHOLDER, defaultRangeDays = DEFAULT_RANGE_DAYS, disabled = false, className, showDayCount = false, dayCountUnit = 'D', themedCalendarIcon = true, clearPressFeedback = 'subtle', onOpenChange, }) {
+    var _a;
+    const [open, setOpen] = useState(false);
+    const pressMode = resolvePressFeedbackMode(clearPressFeedback);
+    const { pressedKey, flash, getPressProps } = usePressFeedback(CLEAR_PRESS_FEEDBACK_MS);
+    const label = getRangeLabel(value, showDayCount, dayCountUnit);
+    const hasValue = Boolean(value.startDate || value.endDate);
+    const isClearPressed = pressMode !== 'none' && pressedKey === 'clear' && !disabled;
+    function handleOpenChange(nextOpen) {
+        setOpen(nextOpen);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
+    }
+    function handleClear() {
+        onChange({ startDate: null, endDate: null });
+    }
+    return (jsxs(Fragment, { children: [jsxs("div", { role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, onClick: () => {
+                    if (!disabled) {
+                        handleOpenChange(true);
+                    }
+                }, onKeyDown: (event) => {
+                    if (disabled) {
+                        return;
+                    }
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        handleOpenChange(true);
+                    }
+                }, className: cn('flex h-11 w-full cursor-pointer items-center rounded-2xl border border-border/70 bg-background/80 text-left text-sm shadow-sm transition hover:bg-accent/40', disabled && 'cursor-not-allowed opacity-60 hover:bg-background/80', className), children: [jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 px-3", children: [jsx(CalendarDaysIcon, { className: cn('h-4 w-4 shrink-0', themedCalendarIcon ? themeIconColor : 'text-muted-foreground') }), jsx("span", { className: cn('truncate', label ? 'text-foreground' : 'text-muted-foreground'), children: label !== null && label !== void 0 ? label : placeholder })] }), jsx("button", Object.assign({ type: "button", disabled: disabled || !hasValue, onClick: (event) => {
+                            event.stopPropagation();
+                            if (disabled || !hasValue) {
+                                return;
+                            }
+                            if (pressMode !== 'none') {
+                                flash('clear');
+                            }
+                            handleClear();
+                        }, className: cn('mr-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-[transform,background-color,color,box-shadow]', hasValue
+                            ? 'hover:bg-black/10 hover:text-foreground dark:hover:bg-white/12'
+                            : 'cursor-default opacity-35', isClearPressed &&
+                            'scale-90 bg-black/15 text-foreground shadow-inner dark:bg-white/18'), "aria-label": "Clear date range", title: "Clear date range" }, (pressMode !== 'none' && !disabled && hasValue ? getPressProps('clear') : {}), { children: jsx(XIcon, { className: "h-4 w-4" }) }))] }), jsx(RandomDateRangeDialog, { open: open, value: value, anchorDate: (_a = value.startDate) !== null && _a !== void 0 ? _a : getTodayString(), defaultRangeDays: defaultRangeDays, onOpenChange: handleOpenChange, onApply: onChange, onClear: onChange })] }));
+}
+
+export { CalendarDateRangeInput };

package/dist/main/calendar/calendar-status-view.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+export type CalendarDayTone = 'saved' | 'planned' | 'warning' | 'danger' | 'neutral';
+export type CalendarDayState<TStateKey extends string = string> = {
+    key: TStateKey;
+    title?: string;
+    tone?: CalendarDayTone;
+};
+export type CalendarToolbarAction = {
+    icon: ReactNode;
+    label: string;
+    title?: string;
+    disabled?: boolean;
+    onPress: () => void;
+};
+type CalendarStatusViewProps<TStateKey extends string = string> = {
+    selectedDate: string;
+    dayStates?: Map<string, CalendarDayState<TStateKey>>;
+    action?: CalendarToolbarAction;
+    className?: string;
+    onSelectedDateChange: (date: string) => void;
+};
+export declare const CalendarStatusView: import("react").MemoExoticComponent<(<TStateKey extends string = string>({ selectedDate, dayStates, action, className, onSelectedDateChange, }: CalendarStatusViewProps<TStateKey>) => import("react/jsx-runtime").JSX.Element)>;
+export {};

package/dist/main/calendar/calendar-status-view.js

@@ -0,0 +1,155 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var icons = require('@windrun-huaiin/base-ui/icons');
+var utils = require('@windrun-huaiin/lib/utils');
+var usePressFeedback = require('../buttons/use-press-feedback.js');
+
+const WEEKDAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const CALENDAR_TOOLBAR_BUTTON_BASE_CLASS_NAME = 'inline-flex h-9 w-8 items-center justify-center border transition-[transform,background-color,color,box-shadow,border-color] duration-150 ease-out sm:w-9';
+const CALENDAR_TOOLBAR_BUTTON_REST_CLASS_NAME = 'border-black/10 text-slate-700 hover:bg-black/5 dark:border-white/10 dark:text-slate-200 dark:hover:bg-white/5';
+const CALENDAR_TOOLBAR_BUTTON_PRESSED_CLASS_NAME = 'translate-y-[2px] scale-[0.9] border-black/25 bg-black/10 text-slate-950 shadow-[inset_0_2px_4px_rgba(15,23,42,0.18)] dark:border-white/25 dark:bg-white/18 dark:text-white dark:shadow-[inset_0_2px_4px_rgba(255,255,255,0.14)]';
+function parseDateString(value) {
+    return new Date(`${value}T00:00:00.000Z`);
+}
+function getTodayString() {
+    return new Date().toISOString().slice(0, 10);
+}
+function formatDateString(date) {
+    return date.toISOString().slice(0, 10);
+}
+function getMonthParts(date) {
+    return {
+        year: date.toLocaleDateString('en-US', {
+            year: 'numeric',
+            timeZone: 'UTC',
+        }),
+        month: date.toLocaleDateString('en-US', {
+            month: 'long',
+            timeZone: 'UTC',
+        }),
+    };
+}
+function buildMonthDays(currentMonth) {
+    const year = currentMonth.getUTCFullYear();
+    const month = currentMonth.getUTCMonth();
+    const firstDay = new Date(Date.UTC(year, month, 1));
+    const startWeekday = firstDay.getUTCDay();
+    const gridStart = new Date(Date.UTC(year, month, 1 - startWeekday));
+    return Array.from({ length: 42 }, (_, index) => new Date(Date.UTC(gridStart.getUTCFullYear(), gridStart.getUTCMonth(), gridStart.getUTCDate() + index)));
+}
+function addMonthsClamped(value, months) {
+    const source = parseDateString(value);
+    const sourceYear = source.getUTCFullYear();
+    const sourceMonth = source.getUTCMonth();
+    const sourceDay = source.getUTCDate();
+    const targetMonthIndex = sourceMonth + months;
+    const targetYear = sourceYear + Math.floor(targetMonthIndex / 12);
+    const normalizedMonth = ((targetMonthIndex % 12) + 12) % 12;
+    const targetMonthLastDay = new Date(Date.UTC(targetYear, normalizedMonth + 1, 0)).getUTCDate();
+    const targetDay = Math.min(sourceDay, targetMonthLastDay);
+    return formatDateString(new Date(Date.UTC(targetYear, normalizedMonth, targetDay)));
+}
+function getToneClassName(tone, selected) {
+    if (selected) {
+        return 'border-black/20 dark:border-white/20';
+    }
+    switch (tone) {
+        case 'saved':
+            return 'border-emerald-300 dark:border-emerald-400';
+        case 'planned':
+            return 'border-amber-300 dark:border-amber-400';
+        case 'warning':
+            return 'border-orange-300 dark:border-orange-400';
+        case 'danger':
+            return 'border-red-300 dark:border-red-400';
+        case 'neutral':
+            return 'border-slate-300 dark:border-slate-500';
+        default:
+            return 'border-black/10 dark:border-white/10';
+    }
+}
+function getToneDotClassName(tone) {
+    switch (tone) {
+        case 'saved':
+            return 'bg-emerald-500 dark:bg-emerald-300';
+        case 'planned':
+            return 'bg-amber-500 dark:bg-amber-300';
+        case 'warning':
+            return 'bg-orange-500 dark:bg-orange-300';
+        case 'danger':
+            return 'bg-red-500 dark:bg-red-300';
+        case 'neutral':
+            return 'bg-slate-400 dark:bg-slate-300';
+        default:
+            return '';
+    }
+}
+const CalendarStatusView = React.memo(function CalendarStatusView({ selectedDate, dayStates, action, className, onSelectedDateChange, }) {
+    var _a;
+    const calendarMonth = React.useMemo(() => parseDateString(`${selectedDate.slice(0, 7)}-01`), [selectedDate]);
+    const monthTitle = React.useMemo(() => getMonthParts(calendarMonth), [calendarMonth]);
+    const monthDays = React.useMemo(() => buildMonthDays(calendarMonth), [calendarMonth]);
+    const today = React.useMemo(() => getTodayString(), []);
+    const { pressedKey: pressedToolbarButton, flash: flashToolbarButtonPress, getPressProps: getToolbarButtonPressProps, } = usePressFeedback.usePressFeedback();
+    function getToolbarButtonClassName(button, shapeClassName) {
+        return utils.cn(CALENDAR_TOOLBAR_BUTTON_BASE_CLASS_NAME, shapeClassName, pressedToolbarButton === button
+            ? CALENDAR_TOOLBAR_BUTTON_PRESSED_CLASS_NAME
+            : CALENDAR_TOOLBAR_BUTTON_REST_CLASS_NAME, button === 'action' && (action === null || action === void 0 ? void 0 : action.disabled) ? 'pointer-events-none opacity-45' : '');
+    }
+    const handlePreviousYear = React.useCallback(() => {
+        onSelectedDateChange(addMonthsClamped(selectedDate, -12));
+    }, [onSelectedDateChange, selectedDate]);
+    const handlePreviousMonth = React.useCallback(() => {
+        onSelectedDateChange(addMonthsClamped(selectedDate, -1));
+    }, [onSelectedDateChange, selectedDate]);
+    const handleSelectToday = React.useCallback(() => {
+        onSelectedDateChange(today);
+    }, [onSelectedDateChange, today]);
+    const handleNextMonth = React.useCallback(() => {
+        onSelectedDateChange(addMonthsClamped(selectedDate, 1));
+    }, [onSelectedDateChange, selectedDate]);
+    const handleNextYear = React.useCallback(() => {
+        onSelectedDateChange(addMonthsClamped(selectedDate, 12));
+    }, [onSelectedDateChange, selectedDate]);
+    const handleDayPress = React.useCallback((nextDate) => {
+        onSelectedDateChange(nextDate);
+    }, [onSelectedDateChange]);
+    return (jsxRuntime.jsx("div", { className: utils.cn('flex h-full w-full min-w-0 max-w-full flex-col overflow-hidden rounded-3xl border border-black/10 p-3 dark:border-white/10 sm:p-4 xl:self-stretch', className), children: jsxRuntime.jsxs("div", { className: "flex h-full flex-col space-y-4", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center", children: [jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
+                                        flashToolbarButtonPress('prevYear');
+                                        handlePreviousYear();
+                                    }, className: getToolbarButtonClassName('prevYear', 'rounded-l-full') }, getToolbarButtonPressProps('prevYear'), { "aria-label": "Previous year", title: "Previous year", children: jsxRuntime.jsx(icons.ChevronsLeftIcon, { className: "h-4 w-4" }) })), jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
+                                        flashToolbarButtonPress('prevMonth');
+                                        handlePreviousMonth();
+                                    }, className: getToolbarButtonClassName('prevMonth', '-ml-px') }, getToolbarButtonPressProps('prevMonth'), { "aria-label": "Previous month", title: "Previous month", children: jsxRuntime.jsx(icons.ChevronLeftIcon, { className: "h-4 w-4" }) })), jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
+                                        flashToolbarButtonPress('today');
+                                        handleSelectToday();
+                                    }, className: getToolbarButtonClassName('today', '-ml-px rounded-r-full') }, getToolbarButtonPressProps('today'), { "aria-label": "Select today", title: "Select today", children: jsxRuntime.jsx(icons.CalendarHeartIcon, { className: "h-4 w-4" }) }))] }), jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 px-2 text-center", children: [jsxRuntime.jsx("div", { className: "text-[11px] font-semibold leading-none text-slate-500 dark:text-slate-400 sm:text-xs", children: monthTitle.year }), jsxRuntime.jsx("div", { className: "mt-1 truncate text-sm font-semibold leading-none text-slate-900 dark:text-white", children: monthTitle.month })] }), jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center", children: [action ? (jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
+                                        if (action.disabled) {
+                                            return;
+                                        }
+                                        flashToolbarButtonPress('action');
+                                        action.onPress();
+                                    }, className: getToolbarButtonClassName('action', 'rounded-l-full') }, getToolbarButtonPressProps('action'), { "aria-label": action.label, title: (_a = action.title) !== null && _a !== void 0 ? _a : action.label, disabled: action.disabled, children: action.icon }))) : null, jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
+                                        flashToolbarButtonPress('nextMonth');
+                                        handleNextMonth();
+                                    }, className: getToolbarButtonClassName('nextMonth', action ? '-ml-px' : 'rounded-l-full') }, getToolbarButtonPressProps('nextMonth'), { "aria-label": "Next month", title: "Next month", children: jsxRuntime.jsx(icons.ChevronRightIcon, { className: "h-4 w-4" }) })), jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
+                                        flashToolbarButtonPress('nextYear');
+                                        handleNextYear();
+                                    }, className: getToolbarButtonClassName('nextYear', '-ml-px rounded-r-full') }, getToolbarButtonPressProps('nextYear'), { "aria-label": "Next year", title: "Next year", children: jsxRuntime.jsx(icons.ChevronsRightIcon, { className: "h-4 w-4" }) }))] })] }), jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1 text-center text-[11px] font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400", children: WEEKDAY_LABELS.map((label) => (jsxRuntime.jsx("div", { className: "py-1", children: label }, label))) }), jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1", children: monthDays.map((day) => {
+                        const date = formatDateString(day);
+                        const state = dayStates === null || dayStates === void 0 ? void 0 : dayStates.get(date);
+                        return (jsxRuntime.jsx(CalendarDayButton, { date: date, label: String(day.getUTCDate()), currentMonth: day.getUTCMonth() === calendarMonth.getUTCMonth(), selected: date === selectedDate, dayState: state, onPress: handleDayPress }, date));
+                    }) })] }) }));
+});
+const CalendarDayButton = React.memo(function CalendarDayButton({ date, label, currentMonth, selected, dayState, onPress, }) {
+    var _a;
+    const tone = dayState === null || dayState === void 0 ? void 0 : dayState.tone;
+    return (jsxRuntime.jsxs("button", { type: "button", onClick: () => onPress(date), className: utils.cn('relative flex h-11 select-none items-center justify-center rounded-2xl border text-sm transition', selected
+            ? 'bg-black text-white dark:bg-white dark:text-slate-950'
+            : 'text-slate-700 hover:bg-black/5 dark:text-slate-200 dark:hover:bg-white/5', getToneClassName(tone, selected), currentMonth ? '' : 'opacity-45'), title: (_a = dayState === null || dayState === void 0 ? void 0 : dayState.title) !== null && _a !== void 0 ? _a : `Open ${date}`, children: [jsxRuntime.jsx("span", { children: label }), tone ? (jsxRuntime.jsx("span", { className: utils.cn('absolute bottom-1 h-1.5 w-1.5 rounded-full', getToneDotClassName(tone)) })) : null] }));
+});
+
+exports.CalendarStatusView = CalendarStatusView;

package/dist/main/calendar/calendar-status-view.mjs

@@ -0,0 +1,153 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo, useMemo, useCallback } from 'react';
+import { ChevronsLeftIcon, ChevronLeftIcon, CalendarHeartIcon, ChevronRightIcon, ChevronsRightIcon } from '@windrun-huaiin/base-ui/icons';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { usePressFeedback } from '../buttons/use-press-feedback.mjs';
+
+const WEEKDAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const CALENDAR_TOOLBAR_BUTTON_BASE_CLASS_NAME = 'inline-flex h-9 w-8 items-center justify-center border transition-[transform,background-color,color,box-shadow,border-color] duration-150 ease-out sm:w-9';
+const CALENDAR_TOOLBAR_BUTTON_REST_CLASS_NAME = 'border-black/10 text-slate-700 hover:bg-black/5 dark:border-white/10 dark:text-slate-200 dark:hover:bg-white/5';
+const CALENDAR_TOOLBAR_BUTTON_PRESSED_CLASS_NAME = 'translate-y-[2px] scale-[0.9] border-black/25 bg-black/10 text-slate-950 shadow-[inset_0_2px_4px_rgba(15,23,42,0.18)] dark:border-white/25 dark:bg-white/18 dark:text-white dark:shadow-[inset_0_2px_4px_rgba(255,255,255,0.14)]';
+function parseDateString(value) {
+    return new Date(`${value}T00:00:00.000Z`);
+}
+function getTodayString() {
+    return new Date().toISOString().slice(0, 10);
+}
+function formatDateString(date) {
+    return date.toISOString().slice(0, 10);
+}
+function getMonthParts(date) {
+    return {
+        year: date.toLocaleDateString('en-US', {
+            year: 'numeric',
+            timeZone: 'UTC',
+        }),
+        month: date.toLocaleDateString('en-US', {
+            month: 'long',
+            timeZone: 'UTC',
+        }),
+    };
+}
+function buildMonthDays(currentMonth) {
+    const year = currentMonth.getUTCFullYear();
+    const month = currentMonth.getUTCMonth();
+    const firstDay = new Date(Date.UTC(year, month, 1));
+    const startWeekday = firstDay.getUTCDay();
+    const gridStart = new Date(Date.UTC(year, month, 1 - startWeekday));
+    return Array.from({ length: 42 }, (_, index) => new Date(Date.UTC(gridStart.getUTCFullYear(), gridStart.getUTCMonth(), gridStart.getUTCDate() + index)));
+}
+function addMonthsClamped(value, months) {
+    const source = parseDateString(value);
+    const sourceYear = source.getUTCFullYear();
+    const sourceMonth = source.getUTCMonth();
+    const sourceDay = source.getUTCDate();
+    const targetMonthIndex = sourceMonth + months;
+    const targetYear = sourceYear + Math.floor(targetMonthIndex / 12);
+    const normalizedMonth = ((targetMonthIndex % 12) + 12) % 12;
+    const targetMonthLastDay = new Date(Date.UTC(targetYear, normalizedMonth + 1, 0)).getUTCDate();
+    const targetDay = Math.min(sourceDay, targetMonthLastDay);
+    return formatDateString(new Date(Date.UTC(targetYear, normalizedMonth, targetDay)));
+}
+function getToneClassName(tone, selected) {
+    if (selected) {
+        return 'border-black/20 dark:border-white/20';
+    }
+    switch (tone) {
+        case 'saved':
+            return 'border-emerald-300 dark:border-emerald-400';
+        case 'planned':
+            return 'border-amber-300 dark:border-amber-400';
+        case 'warning':
+            return 'border-orange-300 dark:border-orange-400';
+        case 'danger':
+            return 'border-red-300 dark:border-red-400';
+        case 'neutral':
+            return 'border-slate-300 dark:border-slate-500';
+        default:
+            return 'border-black/10 dark:border-white/10';
+    }
+}
+function getToneDotClassName(tone) {
+    switch (tone) {
+        case 'saved':
+            return 'bg-emerald-500 dark:bg-emerald-300';
+        case 'planned':
+            return 'bg-amber-500 dark:bg-amber-300';
+        case 'warning':
+            return 'bg-orange-500 dark:bg-orange-300';
+        case 'danger':
+            return 'bg-red-500 dark:bg-red-300';
+        case 'neutral':
+            return 'bg-slate-400 dark:bg-slate-300';
+        default:
+            return '';
+    }
+}
+const CalendarStatusView = memo(function CalendarStatusView({ selectedDate, dayStates, action, className, onSelectedDateChange, }) {
+    var _a;
+    const calendarMonth = useMemo(() => parseDateString(`${selectedDate.slice(0, 7)}-01`), [selectedDate]);
+    const monthTitle = useMemo(() => getMonthParts(calendarMonth), [calendarMonth]);
+    const monthDays = useMemo(() => buildMonthDays(calendarMonth), [calendarMonth]);
+    const today = useMemo(() => getTodayString(), []);
+    const { pressedKey: pressedToolbarButton, flash: flashToolbarButtonPress, getPressProps: getToolbarButtonPressProps, } = usePressFeedback();
+    function getToolbarButtonClassName(button, shapeClassName) {
+        return cn(CALENDAR_TOOLBAR_BUTTON_BASE_CLASS_NAME, shapeClassName, pressedToolbarButton === button
+            ? CALENDAR_TOOLBAR_BUTTON_PRESSED_CLASS_NAME
+            : CALENDAR_TOOLBAR_BUTTON_REST_CLASS_NAME, button === 'action' && (action === null || action === void 0 ? void 0 : action.disabled) ? 'pointer-events-none opacity-45' : '');
+    }
+    const handlePreviousYear = useCallback(() => {
+        onSelectedDateChange(addMonthsClamped(selectedDate, -12));
+    }, [onSelectedDateChange, selectedDate]);
+    const handlePreviousMonth = useCallback(() => {
+        onSelectedDateChange(addMonthsClamped(selectedDate, -1));
+    }, [onSelectedDateChange, selectedDate]);
+    const handleSelectToday = useCallback(() => {
+        onSelectedDateChange(today);
+    }, [onSelectedDateChange, today]);
+    const handleNextMonth = useCallback(() => {
+        onSelectedDateChange(addMonthsClamped(selectedDate, 1));
+    }, [onSelectedDateChange, selectedDate]);
+    const handleNextYear = useCallback(() => {
+        onSelectedDateChange(addMonthsClamped(selectedDate, 12));
+    }, [onSelectedDateChange, selectedDate]);
+    const handleDayPress = useCallback((nextDate) => {
+        onSelectedDateChange(nextDate);
+    }, [onSelectedDateChange]);
+    return (jsx("div", { className: cn('flex h-full w-full min-w-0 max-w-full flex-col overflow-hidden rounded-3xl border border-black/10 p-3 dark:border-white/10 sm:p-4 xl:self-stretch', className), children: jsxs("div", { className: "flex h-full flex-col space-y-4", children: [jsxs("div", { className: "flex items-center justify-between gap-3", children: [jsxs("div", { className: "flex shrink-0 items-center", children: [jsx("button", Object.assign({ type: "button", onClick: () => {
+                                        flashToolbarButtonPress('prevYear');
+                                        handlePreviousYear();
+                                    }, className: getToolbarButtonClassName('prevYear', 'rounded-l-full') }, getToolbarButtonPressProps('prevYear'), { "aria-label": "Previous year", title: "Previous year", children: jsx(ChevronsLeftIcon, { className: "h-4 w-4" }) })), jsx("button", Object.assign({ type: "button", onClick: () => {
+                                        flashToolbarButtonPress('prevMonth');
+                                        handlePreviousMonth();
+                                    }, className: getToolbarButtonClassName('prevMonth', '-ml-px') }, getToolbarButtonPressProps('prevMonth'), { "aria-label": "Previous month", title: "Previous month", children: jsx(ChevronLeftIcon, { className: "h-4 w-4" }) })), jsx("button", Object.assign({ type: "button", onClick: () => {
+                                        flashToolbarButtonPress('today');
+                                        handleSelectToday();
+                                    }, className: getToolbarButtonClassName('today', '-ml-px rounded-r-full') }, getToolbarButtonPressProps('today'), { "aria-label": "Select today", title: "Select today", children: jsx(CalendarHeartIcon, { className: "h-4 w-4" }) }))] }), jsxs("div", { className: "min-w-0 flex-1 px-2 text-center", children: [jsx("div", { className: "text-[11px] font-semibold leading-none text-slate-500 dark:text-slate-400 sm:text-xs", children: monthTitle.year }), jsx("div", { className: "mt-1 truncate text-sm font-semibold leading-none text-slate-900 dark:text-white", children: monthTitle.month })] }), jsxs("div", { className: "flex shrink-0 items-center", children: [action ? (jsx("button", Object.assign({ type: "button", onClick: () => {
+                                        if (action.disabled) {
+                                            return;
+                                        }
+                                        flashToolbarButtonPress('action');
+                                        action.onPress();
+                                    }, className: getToolbarButtonClassName('action', 'rounded-l-full') }, getToolbarButtonPressProps('action'), { "aria-label": action.label, title: (_a = action.title) !== null && _a !== void 0 ? _a : action.label, disabled: action.disabled, children: action.icon }))) : null, jsx("button", Object.assign({ type: "button", onClick: () => {
+                                        flashToolbarButtonPress('nextMonth');
+                                        handleNextMonth();
+                                    }, className: getToolbarButtonClassName('nextMonth', action ? '-ml-px' : 'rounded-l-full') }, getToolbarButtonPressProps('nextMonth'), { "aria-label": "Next month", title: "Next month", children: jsx(ChevronRightIcon, { className: "h-4 w-4" }) })), jsx("button", Object.assign({ type: "button", onClick: () => {
+                                        flashToolbarButtonPress('nextYear');
+                                        handleNextYear();
+                                    }, className: getToolbarButtonClassName('nextYear', '-ml-px rounded-r-full') }, getToolbarButtonPressProps('nextYear'), { "aria-label": "Next year", title: "Next year", children: jsx(ChevronsRightIcon, { className: "h-4 w-4" }) }))] })] }), jsx("div", { className: "grid grid-cols-7 gap-1 text-center text-[11px] font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400", children: WEEKDAY_LABELS.map((label) => (jsx("div", { className: "py-1", children: label }, label))) }), jsx("div", { className: "grid grid-cols-7 gap-1", children: monthDays.map((day) => {
+                        const date = formatDateString(day);
+                        const state = dayStates === null || dayStates === void 0 ? void 0 : dayStates.get(date);
+                        return (jsx(CalendarDayButton, { date: date, label: String(day.getUTCDate()), currentMonth: day.getUTCMonth() === calendarMonth.getUTCMonth(), selected: date === selectedDate, dayState: state, onPress: handleDayPress }, date));
+                    }) })] }) }));
+});
+const CalendarDayButton = memo(function CalendarDayButton({ date, label, currentMonth, selected, dayState, onPress, }) {
+    var _a;
+    const tone = dayState === null || dayState === void 0 ? void 0 : dayState.tone;
+    return (jsxs("button", { type: "button", onClick: () => onPress(date), className: cn('relative flex h-11 select-none items-center justify-center rounded-2xl border text-sm transition', selected
+            ? 'bg-black text-white dark:bg-white dark:text-slate-950'
+            : 'text-slate-700 hover:bg-black/5 dark:text-slate-200 dark:hover:bg-white/5', getToneClassName(tone, selected), currentMonth ? '' : 'opacity-45'), title: (_a = dayState === null || dayState === void 0 ? void 0 : dayState.title) !== null && _a !== void 0 ? _a : `Open ${date}`, children: [jsx("span", { children: label }), tone ? (jsx("span", { className: cn('absolute bottom-1 h-1.5 w-1.5 rounded-full', getToneDotClassName(tone)) })) : null] }));
+});
+
+export { CalendarStatusView };

package/dist/main/calendar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './calendar-status-view';
+export * from './calendar-date-range-input';
+export * from './random-date-range-dialog';

package/dist/main/calendar/index.js

@@ -0,0 +1,12 @@
+"use client";
+'use strict';
+
+var calendarStatusView = require('./calendar-status-view.js');
+var calendarDateRangeInput = require('./calendar-date-range-input.js');
+var randomDateRangeDialog = require('./random-date-range-dialog.js');
+
+
+
+exports.CalendarStatusView = calendarStatusView.CalendarStatusView;
+exports.CalendarDateRangeInput = calendarDateRangeInput.CalendarDateRangeInput;
+exports.RandomDateRangeDialog = randomDateRangeDialog.RandomDateRangeDialog;

package/dist/main/calendar/index.mjs

@@ -0,0 +1,4 @@
+"use client";
+export { CalendarStatusView } from './calendar-status-view.mjs';
+export { CalendarDateRangeInput } from './calendar-date-range-input.mjs';
+export { RandomDateRangeDialog } from './random-date-range-dialog.mjs';

package/dist/main/calendar/random-date-range-dialog.d.ts

@@ -0,0 +1,18 @@
+import { DialogLoadingAction } from '../alert-dialog/dialog-loading-action';
+export type RandomCalendarRange = {
+    startDate: string | null;
+    endDate: string | null;
+};
+type RandomDateRangeDialogProps = {
+    open: boolean;
+    value: RandomCalendarRange;
+    anchorDate: string;
+    defaultRangeDays?: number;
+    onOpenChange: (open: boolean) => void;
+    loadingActions?: readonly DialogLoadingAction[];
+    loadingFullPage?: boolean;
+    onApply: (range: RandomCalendarRange) => void | Promise<void>;
+    onClear?: (range: RandomCalendarRange) => void;
+};
+export declare function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays, onOpenChange, loadingActions, loadingFullPage, onApply, onClear, }: RandomDateRangeDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};