@causw/core 0.0.12 → 0.0.13

package/dist/components/CTAButton/CTAButton.styles.d.mts

@@ -1,8 +1,8 @@
-import * as tailwind_variants35 from "tailwind-variants";
+import * as tailwind_variants39 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 
 //#region src/components/CTAButton/CTAButton.styles.d.ts
-declare const ctaButton: tailwind_variants35.TVReturnType<{
+declare const ctaButton: tailwind_variants39.TVReturnType<{
   color: {
     blue: string;
     red: string;
@@ -34,7 +34,7 @@ declare const ctaButton: tailwind_variants35.TVReturnType<{
     true: string;
     false: string;
   };
-}, undefined, tailwind_variants35.TVReturnType<{
+}, undefined, tailwind_variants39.TVReturnType<{
   color: {
     blue: string;
     red: string;

package/dist/components/Calendar/Calendar.cjs

@@ -0,0 +1,191 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_mergeStyles = require('../../utils/mergeStyles/mergeStyles.cjs');
+const require_Box = require('../Box/Box.cjs');
+const require_Flex = require('../Flex/Flex.cjs');
+const require_Grid = require('../Grid/Grid.cjs');
+const require_Calendar_styles = require('./Calendar.styles.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _causw_icons = require("@causw/icons");
+let date_fns = require("date-fns");
+let date_fns_locale = require("date-fns/locale");
+
+//#region src/components/Calendar/Calendar.tsx
+const parseDateStr = (dateStr) => {
+	const [y, m, d] = dateStr.split("-").map(Number);
+	return new Date(y, m - 1, d);
+};
+const formatDateStr = (date) => (0, date_fns.format)(date, "yyyy-MM-dd");
+const getEventRange = (event) => {
+	const start = parseDateStr(event.startDate);
+	return {
+		start,
+		end: event.endDate ? parseDateStr(event.endDate) : start
+	};
+};
+const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new Date(), today = /* @__PURE__ */ new Date(), size, selectedStartDate, selectedEndDate, onDateClick, onEventClick, enableHover = false }) => {
+	const { wrapper, layoutContainer, header, navContainerLeft, navContainerRight, navButton, navIcon, caption, gridHeader, weekday, gridBody, cell, cellEmpty, eventList, eventItemHeight } = require_Calendar_styles.calendar({
+		size,
+		hoverEffect: enableHover
+	});
+	const [currentMonth, setCurrentMonth] = (0, react.useState)(defaultMonth);
+	const totalDays = (0, date_fns.getDaysInMonth)(currentMonth);
+	const startDayIndex = (0, date_fns.getDay)((0, date_fns.startOfMonth)(currentMonth));
+	const weekDays = [
+		"일",
+		"월",
+		"화",
+		"수",
+		"목",
+		"금",
+		"토"
+	];
+	const handlePrevMonth = () => setCurrentMonth((prev) => (0, date_fns.subMonths)(prev, 1));
+	const handleNextMonth = () => setCurrentMonth((prev) => (0, date_fns.addMonths)(prev, 1));
+	const eventsByDate = (0, react.useMemo)(() => {
+		const map = /* @__PURE__ */ new Map();
+		const mStart = (0, date_fns.startOfMonth)(currentMonth);
+		const mEnd = (0, date_fns.endOfMonth)(currentMonth);
+		const relevantEvents = events.filter((event) => {
+			const { start, end } = getEventRange(event);
+			return start <= mEnd && end >= mStart;
+		});
+		for (const event of relevantEvents) {
+			const { start, end } = getEventRange(event);
+			let d = start < mStart ? mStart : start;
+			const eventEndDate = end > mEnd ? mEnd : end;
+			while (d <= eventEndDate) {
+				const dateKey = formatDateStr(d);
+				const dailyEvents = map.get(dateKey) ?? [];
+				map.set(dateKey, [...dailyEvents, event]);
+				d = (0, date_fns.addDays)(d, 1);
+			}
+		}
+		return map;
+	}, [currentMonth, events]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		className: wrapper({ className }),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
+			className: layoutContainer(),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Grid.Grid, {
+					columns: 7,
+					className: header(),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Flex, {
+							className: navContainerLeft(),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								onClick: handlePrevMonth,
+								className: navButton(),
+								type: "button",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_causw_icons.ChevronLeft, { className: navIcon() })
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+							className: "col-span-5 flex items-center justify-center",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: caption(),
+								children: (0, date_fns.format)(currentMonth, "yyyy년 M월", { locale: date_fns_locale.ko })
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Flex, {
+							className: navContainerRight(),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								onClick: handleNextMonth,
+								className: navButton(),
+								type: "button",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_causw_icons.ChevronRight, { className: navIcon() })
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Grid.Grid, {
+					columns: 7,
+					className: gridHeader(),
+					children: weekDays.map((day) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Flex, {
+						justify: "center",
+						align: "center",
+						className: weekday(),
+						children: day
+					}, day))
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Grid.Grid, {
+					columns: 7,
+					className: gridBody(),
+					children: [Array.from({ length: startDayIndex }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, { className: cellEmpty() }, `empty-${i}`)), Array.from({ length: totalDays }).map((_, i) => {
+						const day = i + 1;
+						const currentDate = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
+						const dateKey = formatDateStr(currentDate);
+						const daysEvents = eventsByDate.get(dateKey) || [];
+						const isToday = (0, date_fns.isSameDay)(currentDate, today);
+						const isStart = selectedStartDate && (0, date_fns.isSameDay)(currentDate, selectedStartDate);
+						const isEnd = selectedEndDate && (0, date_fns.isSameDay)(currentDate, selectedEndDate);
+						const isBetween = selectedStartDate && selectedEndDate && (0, date_fns.isWithinInterval)(currentDate, {
+							start: selectedStartDate,
+							end: selectedEndDate
+						}) && !isStart && !isEnd;
+						let selectionState = "none";
+						if (isStart) selectionState = "selected";
+						else if (isEnd) selectionState = "selected";
+						else if (isBetween) selectionState = "range";
+						else if (isToday) selectionState = "today";
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
+							direction: "column",
+							align: "center",
+							justify: "start",
+							className: cell(),
+							onClick: () => onDateClick?.(currentDate),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: require_Calendar_styles.calendar({ selectionState }).dayNumber(),
+								children: day
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Flex, {
+								className: eventList(),
+								children: daysEvents.map((ev, idx) => {
+									const { start, end } = getEventRange(ev);
+									const currentDayIndex = (0, date_fns.getDay)(currentDate);
+									const weekStart = (0, date_fns.subDays)(currentDate, currentDayIndex);
+									const weekEnd = (0, date_fns.addDays)(currentDate, 6 - currentDayIndex);
+									const segmentStart = start < weekStart ? weekStart : start;
+									const segmentDuration = (0, date_fns.differenceInCalendarDays)(end > weekEnd ? weekEnd : end, segmentStart) + 1;
+									const isRenderCell = (0, date_fns.differenceInCalendarDays)(currentDate, segmentStart) === Math.floor((segmentDuration - 1) / 2);
+									const startDateKey = formatDateStr(start);
+									const endDateKey = formatDateStr(end);
+									const isStartEvent = dateKey === startDateKey;
+									const isEndEvent = dateKey === endDateKey;
+									const isSingleDay = startDateKey === endDateKey;
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: require_mergeStyles.mergeStyles([
+											"relative w-full",
+											eventItemHeight(),
+											require_Calendar_styles.eventBarStyles.variants[ev.type],
+											isSingleDay ? "mx-[2px] !w-[calc(100%-4px)] rounded-[4px]" : "",
+											!isSingleDay && isStartEvent ? "mr-0 ml-[2px] !w-[calc(100%-2px)] rounded-l-[4px] rounded-r-none" : "",
+											!isSingleDay && isEndEvent ? "mr-[2px] ml-0 !w-[calc(100%-2px)] rounded-l-none rounded-r-[4px]" : "",
+											!isSingleDay && !isStartEvent && !isEndEvent ? "mx-0 w-full rounded-none" : ""
+										]),
+										onClick: (e) => {
+											e.stopPropagation();
+											onEventClick?.(ev);
+										},
+										children: isRenderCell && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											className: require_Calendar_styles.eventBarStyles.textWrapper,
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "block w-full truncate px-1 text-center",
+												children: ev.title
+											})
+										})
+									}, `${ev.id}-${idx}`);
+								})
+							})]
+						}, day);
+					})]
+				})
+			]
+		})
+	});
+};
+Calendar.displayName = "Calendar";
+
+//#endregion
+exports.Calendar = Calendar;

package/dist/components/Calendar/Calendar.d.cts

@@ -0,0 +1,40 @@
+import { CalendarVariants, eventBarStyles } from "./Calendar.styles.cjs";
+import * as react_jsx_runtime78 from "react/jsx-runtime";
+
+//#region src/components/Calendar/Calendar.d.ts
+type CalendarEvent = {
+  id: string | number;
+  title: string;
+  startDate: string;
+  endDate?: string;
+  type: keyof typeof eventBarStyles.variants;
+};
+interface CalendarProps extends CalendarVariants {
+  className?: string;
+  events?: CalendarEvent[];
+  defaultMonth?: Date;
+  today?: Date;
+  selectedStartDate?: Date;
+  selectedEndDate?: Date;
+  onDateClick?: (date: Date) => void;
+  onEventClick?: (event: CalendarEvent) => void;
+  enableHover?: boolean;
+}
+declare const Calendar: {
+  ({
+    className,
+    events,
+    defaultMonth,
+    today,
+    size,
+    selectedStartDate,
+    selectedEndDate,
+    onDateClick,
+    onEventClick,
+    enableHover
+  }: CalendarProps): react_jsx_runtime78.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Calendar, CalendarEvent, CalendarProps };
+//# sourceMappingURL=Calendar.d.cts.map

package/dist/components/Calendar/Calendar.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.cts","names":[],"sources":["../../../src/components/Calendar/Calendar.tsx"],"mappings":";;;;KA6BY,aAAA;EACV,EAAA;EACA,KAAA;EACA,SAAA;EACA,OAAA;EACA,IAAA,eAAmB,cAAA,CAAe,QAAA;AAAA;AAAA,UAGnB,aAAA,SAAsB,gBAAA;EACrC,SAAA;EACA,MAAA,GAAS,aAAA;EACT,YAAA,GAAe,IAAA;EACf,KAAA,GAAQ,IAAA;EACR,iBAAA,GAAoB,IAAA;EACpB,eAAA,GAAkB,IAAA;EAClB,WAAA,IAAe,IAAA,EAAM,IAAA;EACrB,YAAA,IAAgB,KAAA,EAAO,aAAA;EACvB,WAAA;AAAA;AAAA,cAeW,QAAA;EAAA;;;;;;;;;;;KAWV,aAAA,GAAa,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/Calendar/Calendar.d.mts

@@ -0,0 +1,40 @@
+import { CalendarVariants, eventBarStyles } from "./Calendar.styles.mjs";
+import * as react_jsx_runtime76 from "react/jsx-runtime";
+
+//#region src/components/Calendar/Calendar.d.ts
+type CalendarEvent = {
+  id: string | number;
+  title: string;
+  startDate: string;
+  endDate?: string;
+  type: keyof typeof eventBarStyles.variants;
+};
+interface CalendarProps extends CalendarVariants {
+  className?: string;
+  events?: CalendarEvent[];
+  defaultMonth?: Date;
+  today?: Date;
+  selectedStartDate?: Date;
+  selectedEndDate?: Date;
+  onDateClick?: (date: Date) => void;
+  onEventClick?: (event: CalendarEvent) => void;
+  enableHover?: boolean;
+}
+declare const Calendar: {
+  ({
+    className,
+    events,
+    defaultMonth,
+    today,
+    size,
+    selectedStartDate,
+    selectedEndDate,
+    onDateClick,
+    onEventClick,
+    enableHover
+  }: CalendarProps): react_jsx_runtime76.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Calendar, CalendarEvent, CalendarProps };
+//# sourceMappingURL=Calendar.d.mts.map

package/dist/components/Calendar/Calendar.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.mts","names":[],"sources":["../../../src/components/Calendar/Calendar.tsx"],"mappings":";;;;KA6BY,aAAA;EACV,EAAA;EACA,KAAA;EACA,SAAA;EACA,OAAA;EACA,IAAA,eAAmB,cAAA,CAAe,QAAA;AAAA;AAAA,UAGnB,aAAA,SAAsB,gBAAA;EACrC,SAAA;EACA,MAAA,GAAS,aAAA;EACT,YAAA,GAAe,IAAA;EACf,KAAA,GAAQ,IAAA;EACR,iBAAA,GAAoB,IAAA;EACpB,eAAA,GAAkB,IAAA;EAClB,WAAA,IAAe,IAAA,EAAM,IAAA;EACrB,YAAA,IAAgB,KAAA,EAAO,aAAA;EACvB,WAAA;AAAA;AAAA,cAeW,QAAA;EAAA;;;;;;;;;;;KAWV,aAAA,GAAa,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/Calendar/Calendar.mjs

@@ -0,0 +1,190 @@
+import { mergeStyles } from "../../utils/mergeStyles/mergeStyles.mjs";
+import { Box } from "../Box/Box.mjs";
+import { Flex } from "../Flex/Flex.mjs";
+import { Grid } from "../Grid/Grid.mjs";
+import { calendar, eventBarStyles } from "./Calendar.styles.mjs";
+import React, { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "@causw/icons";
+import { addDays, addMonths, differenceInCalendarDays, endOfMonth, format, getDay, getDaysInMonth, isSameDay, isWithinInterval, startOfMonth, subDays, subMonths } from "date-fns";
+import { ko } from "date-fns/locale";
+
+//#region src/components/Calendar/Calendar.tsx
+const parseDateStr = (dateStr) => {
+	const [y, m, d] = dateStr.split("-").map(Number);
+	return new Date(y, m - 1, d);
+};
+const formatDateStr = (date) => format(date, "yyyy-MM-dd");
+const getEventRange = (event) => {
+	const start = parseDateStr(event.startDate);
+	return {
+		start,
+		end: event.endDate ? parseDateStr(event.endDate) : start
+	};
+};
+const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new Date(), today = /* @__PURE__ */ new Date(), size, selectedStartDate, selectedEndDate, onDateClick, onEventClick, enableHover = false }) => {
+	const { wrapper, layoutContainer, header, navContainerLeft, navContainerRight, navButton, navIcon, caption, gridHeader, weekday, gridBody, cell, cellEmpty, eventList, eventItemHeight } = calendar({
+		size,
+		hoverEffect: enableHover
+	});
+	const [currentMonth, setCurrentMonth] = useState(defaultMonth);
+	const totalDays = getDaysInMonth(currentMonth);
+	const startDayIndex = getDay(startOfMonth(currentMonth));
+	const weekDays = [
+		"일",
+		"월",
+		"화",
+		"수",
+		"목",
+		"금",
+		"토"
+	];
+	const handlePrevMonth = () => setCurrentMonth((prev) => subMonths(prev, 1));
+	const handleNextMonth = () => setCurrentMonth((prev) => addMonths(prev, 1));
+	const eventsByDate = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		const mStart = startOfMonth(currentMonth);
+		const mEnd = endOfMonth(currentMonth);
+		const relevantEvents = events.filter((event) => {
+			const { start, end } = getEventRange(event);
+			return start <= mEnd && end >= mStart;
+		});
+		for (const event of relevantEvents) {
+			const { start, end } = getEventRange(event);
+			let d = start < mStart ? mStart : start;
+			const eventEndDate = end > mEnd ? mEnd : end;
+			while (d <= eventEndDate) {
+				const dateKey = formatDateStr(d);
+				const dailyEvents = map.get(dateKey) ?? [];
+				map.set(dateKey, [...dailyEvents, event]);
+				d = addDays(d, 1);
+			}
+		}
+		return map;
+	}, [currentMonth, events]);
+	return /* @__PURE__ */ jsx(Box, {
+		className: wrapper({ className }),
+		children: /* @__PURE__ */ jsxs(Box, {
+			className: layoutContainer(),
+			children: [
+				/* @__PURE__ */ jsxs(Grid, {
+					columns: 7,
+					className: header(),
+					children: [
+						/* @__PURE__ */ jsx(Flex, {
+							className: navContainerLeft(),
+							children: /* @__PURE__ */ jsx("button", {
+								onClick: handlePrevMonth,
+								className: navButton(),
+								type: "button",
+								children: /* @__PURE__ */ jsx(ChevronLeft, { className: navIcon() })
+							})
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							className: "col-span-5 flex items-center justify-center",
+							children: /* @__PURE__ */ jsx("span", {
+								className: caption(),
+								children: format(currentMonth, "yyyy년 M월", { locale: ko })
+							})
+						}),
+						/* @__PURE__ */ jsx(Flex, {
+							className: navContainerRight(),
+							children: /* @__PURE__ */ jsx("button", {
+								onClick: handleNextMonth,
+								className: navButton(),
+								type: "button",
+								children: /* @__PURE__ */ jsx(ChevronRight, { className: navIcon() })
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(Grid, {
+					columns: 7,
+					className: gridHeader(),
+					children: weekDays.map((day) => /* @__PURE__ */ jsx(Flex, {
+						justify: "center",
+						align: "center",
+						className: weekday(),
+						children: day
+					}, day))
+				}),
+				/* @__PURE__ */ jsxs(Grid, {
+					columns: 7,
+					className: gridBody(),
+					children: [Array.from({ length: startDayIndex }).map((_, i) => /* @__PURE__ */ jsx(Box, { className: cellEmpty() }, `empty-${i}`)), Array.from({ length: totalDays }).map((_, i) => {
+						const day = i + 1;
+						const currentDate = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
+						const dateKey = formatDateStr(currentDate);
+						const daysEvents = eventsByDate.get(dateKey) || [];
+						const isToday = isSameDay(currentDate, today);
+						const isStart = selectedStartDate && isSameDay(currentDate, selectedStartDate);
+						const isEnd = selectedEndDate && isSameDay(currentDate, selectedEndDate);
+						const isBetween = selectedStartDate && selectedEndDate && isWithinInterval(currentDate, {
+							start: selectedStartDate,
+							end: selectedEndDate
+						}) && !isStart && !isEnd;
+						let selectionState = "none";
+						if (isStart) selectionState = "selected";
+						else if (isEnd) selectionState = "selected";
+						else if (isBetween) selectionState = "range";
+						else if (isToday) selectionState = "today";
+						return /* @__PURE__ */ jsxs(Flex, {
+							direction: "column",
+							align: "center",
+							justify: "start",
+							className: cell(),
+							onClick: () => onDateClick?.(currentDate),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: calendar({ selectionState }).dayNumber(),
+								children: day
+							}), /* @__PURE__ */ jsx(Flex, {
+								className: eventList(),
+								children: daysEvents.map((ev, idx) => {
+									const { start, end } = getEventRange(ev);
+									const currentDayIndex = getDay(currentDate);
+									const weekStart = subDays(currentDate, currentDayIndex);
+									const weekEnd = addDays(currentDate, 6 - currentDayIndex);
+									const segmentStart = start < weekStart ? weekStart : start;
+									const segmentDuration = differenceInCalendarDays(end > weekEnd ? weekEnd : end, segmentStart) + 1;
+									const isRenderCell = differenceInCalendarDays(currentDate, segmentStart) === Math.floor((segmentDuration - 1) / 2);
+									const startDateKey = formatDateStr(start);
+									const endDateKey = formatDateStr(end);
+									const isStartEvent = dateKey === startDateKey;
+									const isEndEvent = dateKey === endDateKey;
+									const isSingleDay = startDateKey === endDateKey;
+									return /* @__PURE__ */ jsx("div", {
+										className: mergeStyles([
+											"relative w-full",
+											eventItemHeight(),
+											eventBarStyles.variants[ev.type],
+											isSingleDay ? "mx-[2px] !w-[calc(100%-4px)] rounded-[4px]" : "",
+											!isSingleDay && isStartEvent ? "mr-0 ml-[2px] !w-[calc(100%-2px)] rounded-l-[4px] rounded-r-none" : "",
+											!isSingleDay && isEndEvent ? "mr-[2px] ml-0 !w-[calc(100%-2px)] rounded-l-none rounded-r-[4px]" : "",
+											!isSingleDay && !isStartEvent && !isEndEvent ? "mx-0 w-full rounded-none" : ""
+										]),
+										onClick: (e) => {
+											e.stopPropagation();
+											onEventClick?.(ev);
+										},
+										children: isRenderCell && /* @__PURE__ */ jsx("div", {
+											className: eventBarStyles.textWrapper,
+											children: /* @__PURE__ */ jsx("span", {
+												className: "block w-full truncate px-1 text-center",
+												children: ev.title
+											})
+										})
+									}, `${ev.id}-${idx}`);
+								})
+							})]
+						}, day);
+					})]
+				})
+			]
+		})
+	});
+};
+Calendar.displayName = "Calendar";
+
+//#endregion
+export { Calendar };
+//# sourceMappingURL=Calendar.mjs.map

package/dist/components/Calendar/Calendar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.mjs","names":[],"sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport {\n  format,\n  addMonths,\n  subMonths,\n  startOfMonth,\n  endOfMonth,\n  addDays,\n  subDays,\n  getDay,\n  getDaysInMonth,\n  isSameDay,\n  isWithinInterval,\n  differenceInCalendarDays,\n} from 'date-fns';\nimport { ko } from 'date-fns/locale';\n\nimport { Box } from '../Box';\nimport { Flex } from '../Flex';\nimport { Grid } from '../Grid';\nimport { ChevronLeft, ChevronRight } from '@causw/icons';\n\nimport {\n  calendar,\n  eventBarStyles,\n  type CalendarVariants,\n} from './Calendar.styles';\nimport { mergeStyles } from '../../utils';\n\nexport type CalendarEvent = {\n  id: string | number;\n  title: string;\n  startDate: string;\n  endDate?: string;\n  type: keyof typeof eventBarStyles.variants;\n};\n\nexport interface CalendarProps extends CalendarVariants {\n  className?: string;\n  events?: CalendarEvent[];\n  defaultMonth?: Date;\n  today?: Date;\n  selectedStartDate?: Date;\n  selectedEndDate?: Date;\n  onDateClick?: (date: Date) => void;\n  onEventClick?: (event: CalendarEvent) => void;\n  enableHover?: boolean;\n}\n\nconst parseDateStr = (dateStr: string) => {\n  const [y, m, d] = dateStr.split('-').map(Number);\n  return new Date(y, m - 1, d);\n};\nconst formatDateStr = (date: Date) => format(date, 'yyyy-MM-dd');\n\nconst getEventRange = (event: CalendarEvent) => {\n  const start = parseDateStr(event.startDate);\n  const end = event.endDate ? parseDateStr(event.endDate) : start;\n  return { start, end };\n};\n\nexport const Calendar = ({\n  className,\n  events = [],\n  defaultMonth = new Date(),\n  today = new Date(),\n  size,\n  selectedStartDate,\n  selectedEndDate,\n  onDateClick,\n  onEventClick,\n  enableHover = false,\n}: CalendarProps) => {\n  const {\n    wrapper,\n    layoutContainer,\n    header,\n    navContainerLeft,\n    navContainerRight,\n    navButton,\n    navIcon,\n    caption,\n    gridHeader,\n    weekday,\n    gridBody,\n    cell,\n    cellEmpty,\n    eventList,\n    eventItemHeight,\n  } = calendar({ size, hoverEffect: enableHover });\n\n  const [currentMonth, setCurrentMonth] = useState(defaultMonth);\n  const totalDays = getDaysInMonth(currentMonth);\n  const startDayIndex = getDay(startOfMonth(currentMonth));\n  const weekDays = ['일', '월', '화', '수', '목', '금', '토'];\n\n  const handlePrevMonth = () => setCurrentMonth((prev) => subMonths(prev, 1));\n  const handleNextMonth = () => setCurrentMonth((prev) => addMonths(prev, 1));\n\n  const eventsByDate = useMemo(() => {\n    const map = new Map<string, CalendarEvent[]>();\n    const mStart = startOfMonth(currentMonth);\n    const mEnd = endOfMonth(currentMonth);\n\n    const relevantEvents = events.filter((event) => {\n      const { start, end } = getEventRange(event);\n      return start <= mEnd && end >= mStart;\n    });\n\n    for (const event of relevantEvents) {\n      const { start, end } = getEventRange(event);\n      let d = start < mStart ? mStart : start;\n      const eventEndDate = end > mEnd ? mEnd : end;\n\n      while (d <= eventEndDate) {\n        const dateKey = formatDateStr(d);\n        const dailyEvents = map.get(dateKey) ?? [];\n        map.set(dateKey, [...dailyEvents, event]);\n        d = addDays(d, 1);\n      }\n    }\n    return map;\n  }, [currentMonth, events]);\n\n  return (\n    <Box className={wrapper({ className })}>\n      <Box className={layoutContainer()}>\n        <Grid columns={7} className={header()}>\n          <Flex className={navContainerLeft()}>\n            <button\n              onClick={handlePrevMonth}\n              className={navButton()}\n              type=\"button\"\n            >\n              <ChevronLeft className={navIcon()} />\n            </button>\n          </Flex>\n          <Box className=\"col-span-5 flex items-center justify-center\">\n            <span className={caption()}>\n              {format(currentMonth, 'yyyy년 M월', { locale: ko })}\n            </span>\n          </Box>\n          <Flex className={navContainerRight()}>\n            <button\n              onClick={handleNextMonth}\n              className={navButton()}\n              type=\"button\"\n            >\n              <ChevronRight className={navIcon()} />\n            </button>\n          </Flex>\n        </Grid>\n\n        <Grid columns={7} className={gridHeader()}>\n          {weekDays.map((day) => (\n            <Flex\n              key={day}\n              justify=\"center\"\n              align=\"center\"\n              className={weekday()}\n            >\n              {day}\n            </Flex>\n          ))}\n        </Grid>\n\n        <Grid columns={7} className={gridBody()}>\n          {Array.from({ length: startDayIndex }).map((_, i) => (\n            <Box key={`empty-${i}`} className={cellEmpty()} />\n          ))}\n\n          {Array.from({ length: totalDays }).map((_, i) => {\n            const day = i + 1;\n            const currentDate = new Date(\n              currentMonth.getFullYear(),\n              currentMonth.getMonth(),\n              day,\n            );\n            const dateKey = formatDateStr(currentDate);\n\n            const daysEvents = eventsByDate.get(dateKey) || [];\n\n            const isToday = isSameDay(currentDate, today);\n            const isStart =\n              selectedStartDate && isSameDay(currentDate, selectedStartDate);\n            const isEnd =\n              selectedEndDate && isSameDay(currentDate, selectedEndDate);\n            const isBetween =\n              selectedStartDate &&\n              selectedEndDate &&\n              isWithinInterval(currentDate, {\n                start: selectedStartDate,\n                end: selectedEndDate,\n              }) &&\n              !isStart &&\n              !isEnd;\n\n            let selectionState:\n              | 'none'\n              | 'today'\n              | 'selected'\n              | 'range'\n              | 'rangeStart'\n              | 'rangeEnd' = 'none';\n            if (isStart) selectionState = 'selected';\n            else if (isEnd) selectionState = 'selected';\n            else if (isBetween) selectionState = 'range';\n            else if (isToday) selectionState = 'today';\n\n            return (\n              <Flex\n                key={day}\n                direction=\"column\"\n                align=\"center\"\n                justify=\"start\"\n                className={cell()}\n                onClick={() => onDateClick?.(currentDate)}\n              >\n                <span className={calendar({ selectionState }).dayNumber()}>\n                  {day}\n                </span>\n                <Flex className={eventList()}>\n                  {daysEvents.map((ev, idx) => {\n                    const { start, end } = getEventRange(ev);\n\n                    const currentDayIndex = getDay(currentDate);\n                    const weekStart = subDays(currentDate, currentDayIndex);\n                    const weekEnd = addDays(currentDate, 6 - currentDayIndex);\n\n                    const segmentStart = start < weekStart ? weekStart : start;\n                    const segmentEnd = end > weekEnd ? weekEnd : end;\n                    const segmentDuration =\n                      differenceInCalendarDays(segmentEnd, segmentStart) + 1;\n                    const indexInSegment = differenceInCalendarDays(\n                      currentDate,\n                      segmentStart,\n                    );\n\n                    const targetIndex = Math.floor((segmentDuration - 1) / 2);\n                    const isRenderCell = indexInSegment === targetIndex;\n\n                    const startDateKey = formatDateStr(start);\n                    const endDateKey = formatDateStr(end);\n                    const isStartEvent = dateKey === startDateKey;\n                    const isEndEvent = dateKey === endDateKey;\n                    const isSingleDay = startDateKey === endDateKey;\n\n                    return (\n                      <div\n                        key={`${ev.id}-${idx}`}\n                        className={mergeStyles([\n                          'relative w-full',\n                          eventItemHeight(),\n                          eventBarStyles.variants[ev.type],\n                          isSingleDay\n                            ? 'mx-[2px] !w-[calc(100%-4px)] rounded-[4px]'\n                            : '',\n                          !isSingleDay && isStartEvent\n                            ? 'mr-0 ml-[2px] !w-[calc(100%-2px)] rounded-l-[4px] rounded-r-none'\n                            : '',\n                          !isSingleDay && isEndEvent\n                            ? 'mr-[2px] ml-0 !w-[calc(100%-2px)] rounded-l-none rounded-r-[4px]'\n                            : '',\n                          !isSingleDay && !isStartEvent && !isEndEvent\n                            ? 'mx-0 w-full rounded-none'\n                            : '',\n                        ])}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onEventClick?.(ev);\n                        }}\n                      >\n                        {isRenderCell && (\n                          <div className={eventBarStyles.textWrapper}>\n                            <span className=\"block w-full truncate px-1 text-center\">\n                              {ev.title}\n                            </span>\n                          </div>\n                        )}\n                      </div>\n                    );\n                  })}\n                </Flex>\n              </Flex>\n            );\n          })}\n        </Grid>\n      </Box>\n    </Box>\n  );\n};\nCalendar.displayName = 'Calendar';\n"],"mappings":"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"}

package/dist/components/Calendar/Calendar.styles.cjs

@@ -0,0 +1,121 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let tailwind_variants = require("tailwind-variants");
+
+//#region src/components/Calendar/Calendar.styles.ts
+const SPACING = {
+	HEADER_MB_SM: "mb-[17px]",
+	HEADER_MB_MD: "mb-[23px]",
+	GRID_MT_SM: "mt-[16px]",
+	GRID_MT_MD: "mt-[26px]"
+};
+const calendar = (0, tailwind_variants.tv)({
+	slots: {
+		wrapper: [
+			"bg-white rounded-[20px] shadow-sm border border-gray-100 flex flex-col items-center gap-2",
+			"w-full min-w-[328px] max-w-[804px]",
+			"py-4 px-2 md:py-10"
+		],
+		layoutContainer: "w-full",
+		header: `w-full grid grid-cols-7 items-center gap-x-0 ${SPACING.HEADER_MB_SM} md:${SPACING.HEADER_MB_MD}`,
+		navContainerLeft: "flex items-center justify-center w-full",
+		navContainerRight: "flex items-center justify-center w-full text-gray-400",
+		navButton: "flex items-center justify-center bg-white border border-gray-200 rounded-[8px] hover:bg-gray-50 hover:text-gray-700 cursor-pointer w-[26px] h-[26px] md:h-[29px]",
+		navIcon: "w-[6px] h-[10px] text-gray-400",
+		caption: "text-[#364153] text-[16px] font-bold leading-[1.6] tracking-[-0.02em] select-none",
+		gridHeader: "w-full mb-0 gap-x-0",
+		weekday: "h-[44px] flex items-center justify-center text-gray-400 text-[14px] font-normal leading-[1.6] tracking-[-0.02em] select-none",
+		gridBody: `w-full gap-y-4 gap-x-0 ${SPACING.GRID_MT_SM} md:${SPACING.GRID_MT_MD}`,
+		cell: "relative group gap-1 min-h-[52px] md:min-h-[56px] cursor-pointer rounded-lg transition-colors",
+		cellEmpty: "min-h-[52px] md:min-h-[56px]",
+		dayNumber: "w-7 h-7 flex items-center justify-center rounded-full text-[15px] font-semibold leading-[1.6] tracking-[-0.02em] z-10 select-none transition-colors",
+		eventList: [
+			"w-full flex flex-col gap-1",
+			"max-h-[88px] overflow-y-auto",
+			"[&::-webkit-scrollbar]:hidden",
+			"[-ms-overflow-style:none]",
+			"[scrollbar-width:none]"
+		],
+		eventItemHeight: "min-h-[20px] h-auto flex-shrink-0 cursor-pointer"
+	},
+	variants: {
+		size: {
+			sm: {
+				wrapper: "!w-[328px] !max-w-none !min-w-0 !py-4 !px-2",
+				layoutContainer: "!w-[312px]",
+				header: `!${SPACING.HEADER_MB_SM}`,
+				gridBody: `!${SPACING.GRID_MT_SM}`,
+				navButton: "!w-[26px] !h-[26px]",
+				cell: "!min-h-[52px]",
+				cellEmpty: "!min-h-[52px]",
+				eventItemHeight: "!min-h-[20px]",
+				navContainerLeft: "!justify-center !translate-x-0",
+				navContainerRight: "!justify-center !translate-x-0"
+			},
+			md: {
+				wrapper: "!w-[412px] !max-w-none !min-w-0 !py-10 !px-2",
+				layoutContainer: "!w-[396px]",
+				navContainerLeft: "justify-end translate-x-[50%] z-20",
+				navContainerRight: "justify-start -translate-x-[50%] z-20",
+				header: `!${SPACING.HEADER_MB_MD}`,
+				gridBody: `!${SPACING.GRID_MT_MD}`,
+				navButton: "!w-[26px] !h-[29px]",
+				cell: "!min-h-[56px]",
+				cellEmpty: "!min-h-[56px]",
+				eventItemHeight: "!min-h-[24px]"
+			},
+			lg: {
+				wrapper: "!w-[804px] !max-w-none !min-w-0 !py-10 !px-2",
+				layoutContainer: "!w-[788px]",
+				navContainerLeft: "!justify-center !translate-x-0",
+				navContainerRight: "!justify-center !translate-x-0",
+				header: `!${SPACING.HEADER_MB_MD}`,
+				gridBody: `!${SPACING.GRID_MT_MD}`,
+				navButton: "!w-[26px] !h-[29px]",
+				cell: "!min-h-[56px]",
+				cellEmpty: "!min-h-[56px]",
+				eventItemHeight: "!min-h-[24px]"
+			}
+		},
+		selectionState: {
+			none: { dayNumber: "text-[#364153]" },
+			today: { dayNumber: "bg-gray-800 text-white shadow-sm" },
+			selected: { dayNumber: "bg-blue-600 text-white shadow-sm" },
+			range: { dayNumber: "bg-blue-100 text-blue-600 rounded-none w-full" },
+			rangeStart: {
+				dayNumber: "bg-blue-600 text-white shadow-sm rounded-r-none pl-1",
+				cell: "bg-blue-50/50 rounded-r-none"
+			},
+			rangeEnd: {
+				dayNumber: "bg-blue-600 text-white shadow-sm rounded-l-none pr-1",
+				cell: "bg-blue-50/50 rounded-l-none"
+			}
+		},
+		hoverEffect: {
+			true: { cell: "hover:bg-gray-50" },
+			false: {}
+		}
+	},
+	defaultVariants: {
+		selectionState: "none",
+		hoverEffect: false
+	}
+});
+const eventBarStyles = {
+	textWrapper: `
+    absolute top-0 left-0 w-full h-full
+    flex items-center justify-center
+    text-[11px] font-medium tracking-[-0.02em] leading-tight
+    select-none pointer-events-none
+    z-10
+    whitespace-nowrap
+  `,
+	variants: {
+		holiday: "bg-red-100 text-red-400",
+		event: "bg-gray-100 text-gray-600",
+		important: "bg-blue-100 text-blue-600"
+	}
+};
+
+//#endregion
+exports.calendar = calendar;
+exports.eventBarStyles = eventBarStyles;