@causw/core 0.0.21 → 0.0.22

package/dist/components/BottomSheet/BottomSheet.d.mts

@@ -1,6 +1,6 @@
 import { HeaderAlign } from "./BottomSheet.styles.mjs";
 import React from "react";
-import * as react_jsx_runtime46 from "react/jsx-runtime";
+import * as react_jsx_runtime72 from "react/jsx-runtime";
 import * as _radix_ui_react_dialog0 from "@radix-ui/react-dialog";
 import { Drawer } from "vaul";
 
@@ -19,7 +19,7 @@ declare const BottomSheet: {
     defaultOpen,
     onOpenChange,
     headerAlign
-  }: BottomSheetRootProps): react_jsx_runtime46.JSX.Element;
+  }: BottomSheetRootProps): react_jsx_runtime72.JSX.Element;
   displayName: string;
 } & {
   Trigger: React.ForwardRefExoticComponent<_radix_ui_react_dialog0.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
@@ -28,7 +28,7 @@ declare const BottomSheet: {
       children,
       className,
       ...props
-    }: React.ComponentProps<typeof Drawer.Content>): react_jsx_runtime46.JSX.Element;
+    }: React.ComponentProps<typeof Drawer.Content>): react_jsx_runtime72.JSX.Element;
     displayName: string;
   };
   Header: {
@@ -38,7 +38,7 @@ declare const BottomSheet: {
     }: {
       title?: string;
       className?: string;
-    }): react_jsx_runtime46.JSX.Element;
+    }): react_jsx_runtime72.JSX.Element;
     displayName: string;
   };
   Body: {
@@ -50,7 +50,7 @@ declare const BottomSheet: {
       children: React.ReactNode;
       className?: string;
       maxHeight?: string | number;
-    }): react_jsx_runtime46.JSX.Element;
+    }): react_jsx_runtime72.JSX.Element;
     displayName: string;
   };
   Footer: {
@@ -60,7 +60,7 @@ declare const BottomSheet: {
     }: {
       children: React.ReactNode;
       className?: string;
-    }): react_jsx_runtime46.JSX.Element;
+    }): react_jsx_runtime72.JSX.Element;
     displayName: string;
   };
 };

package/dist/components/Box/Box.styles.d.cts

@@ -1,8 +1,8 @@
-import * as tailwind_variants5 from "tailwind-variants";
+import * as tailwind_variants3 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 
 //#region src/components/Box/Box.styles.d.ts
-declare const box: tailwind_variants5.TVReturnType<{
+declare const box: tailwind_variants3.TVReturnType<{
   padding: {
     none: string;
     xs: string;
@@ -66,7 +66,7 @@ declare const box: tailwind_variants5.TVReturnType<{
     inverse: string;
     transparent: string;
   };
-}, undefined, tailwind_variants5.TVReturnType<{
+}, undefined, tailwind_variants3.TVReturnType<{
   padding: {
     none: string;
     xs: string;

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

@@ -1,8 +1,8 @@
-import * as tailwind_variants3 from "tailwind-variants";
+import * as tailwind_variants5 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 
 //#region src/components/Box/Box.styles.d.ts
-declare const box: tailwind_variants3.TVReturnType<{
+declare const box: tailwind_variants5.TVReturnType<{
   padding: {
     none: string;
     xs: string;
@@ -66,7 +66,7 @@ declare const box: tailwind_variants3.TVReturnType<{
     inverse: string;
     transparent: string;
   };
-}, undefined, tailwind_variants3.TVReturnType<{
+}, undefined, tailwind_variants5.TVReturnType<{
   padding: {
     none: string;
     xs: string;

package/dist/components/Button/Button.d.cts

@@ -2,7 +2,7 @@ import { PrimitiveProps } from "../Primitive/Primitive.cjs";
 import "../Primitive/index.cjs";
 import { ButtonVariants } from "./Button.styles.cjs";
 import { ComponentProps } from "react";
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+import * as react_jsx_runtime84 from "react/jsx-runtime";
 
 //#region src/components/Button/Button.d.ts
 interface ButtonProps extends Omit<ComponentProps<'button'>, 'color'>, ButtonVariants, PrimitiveProps {}
@@ -14,7 +14,7 @@ declare function Button({
   className,
   children,
   ...props
-}: ButtonProps): react_jsx_runtime18.JSX.Element;
+}: ButtonProps): react_jsx_runtime84.JSX.Element;
 //#endregion
 export { Button, ButtonProps };
 //# sourceMappingURL=Button.d.cts.map

package/dist/components/Button/Button.styles.d.cts

@@ -1,8 +1,8 @@
-import * as tailwind_variants39 from "tailwind-variants";
+import * as tailwind_variants57 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 
 //#region src/components/Button/Button.styles.d.ts
-declare const button: tailwind_variants39.TVReturnType<{
+declare const button: tailwind_variants57.TVReturnType<{
   size: {
     sm: string;
     md: string;
@@ -38,7 +38,7 @@ declare const button: tailwind_variants39.TVReturnType<{
     true: string;
     false: string;
   };
-}, undefined, tailwind_variants39.TVReturnType<{
+}, undefined, tailwind_variants57.TVReturnType<{
   size: {
     sm: string;
     md: string;

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

@@ -1,8 +1,8 @@
-import * as tailwind_variants41 from "tailwind-variants";
+import * as tailwind_variants39 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 
 //#region src/components/Button/Button.styles.d.ts
-declare const button: tailwind_variants41.TVReturnType<{
+declare const button: tailwind_variants39.TVReturnType<{
   size: {
     sm: string;
     md: string;
@@ -38,7 +38,7 @@ declare const button: tailwind_variants41.TVReturnType<{
     true: string;
     false: string;
   };
-}, undefined, tailwind_variants41.TVReturnType<{
+}, undefined, tailwind_variants39.TVReturnType<{
   size: {
     sm: string;
     md: string;

package/dist/components/CTAButton/CTAButton.d.cts

@@ -2,7 +2,7 @@ import { PrimitiveProps } from "../Primitive/Primitive.cjs";
 import "../Primitive/index.cjs";
 import { CTAButtonVariants } from "./CTAButton.styles.cjs";
 import { ComponentProps } from "react";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime85 from "react/jsx-runtime";
 
 //#region src/components/CTAButton/CTAButton.d.ts
 interface CTAButtonProps extends Omit<ComponentProps<'button'>, 'color'>, PrimitiveProps, CTAButtonVariants {}
@@ -13,7 +13,7 @@ declare function CTAButton({
   className,
   children,
   ...props
-}: CTAButtonProps): react_jsx_runtime16.JSX.Element;
+}: CTAButtonProps): react_jsx_runtime85.JSX.Element;
 //#endregion
 export { CTAButton, CTAButtonProps };
 //# sourceMappingURL=CTAButton.d.cts.map

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

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

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

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

package/dist/components/Calendar/Calendar.cjs

@@ -5,7 +5,6 @@ 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");
@@ -51,15 +50,42 @@ const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new D
 			const { start, end } = getEventRange(event);
 			return start <= mEnd && end >= mStart;
 		});
+		relevantEvents.sort((a, b) => {
+			const aRange = getEventRange(a);
+			const bRange = getEventRange(b);
+			const aDur = (0, date_fns.differenceInCalendarDays)(aRange.end, aRange.start);
+			const bDur = (0, date_fns.differenceInCalendarDays)(bRange.end, bRange.start);
+			if (bDur !== aDur) return bDur - aDur;
+			return aRange.start.getTime() - bRange.start.getTime();
+		});
 		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);
+			let slot = 0;
+			let found = false;
+			while (!found) {
+				let isFree = true;
+				let tempD = new Date(d);
+				while (tempD <= eventEndDate) {
+					const dateKey = formatDateStr(tempD);
+					if ((map.get(dateKey) || [])[slot]) {
+						isFree = false;
+						break;
+					}
+					tempD = (0, date_fns.addDays)(tempD, 1);
+				}
+				if (isFree) found = true;
+				else slot++;
+			}
+			let assignD = new Date(d);
+			while (assignD <= eventEndDate) {
+				const dateKey = formatDateStr(assignD);
+				const dailySlots = map.get(dateKey) || [];
+				while (dailySlots.length <= slot) dailySlots.push(null);
+				dailySlots[slot] = event;
+				map.set(dateKey, dailySlots);
+				assignD = (0, date_fns.addDays)(assignD, 1);
 			}
 		}
 		return map;
@@ -142,39 +168,38 @@ const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new D
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Flex, {
 								className: eventList(),
 								children: daysEvents.map((ev, idx) => {
+									if (!ev) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: eventItemHeight() }, `empty-${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 indexInSegment = (0, date_fns.differenceInCalendarDays)(currentDate, segmentStart);
 									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" : ""
-										]),
+									const blockPosition = startDateKey === endDateKey ? "single" : dateKey === startDateKey ? "start" : dateKey === endDateKey ? "end" : "middle";
+									const { wrapper: eventWrapper, bgBar, textLayer, textSpan } = require_Calendar_styles.eventBarStyles({
+										type: ev.type,
+										position: blockPosition
+									});
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: require_mergeStyles.mergeStyles(eventWrapper(), eventItemHeight()),
 										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)("div", { className: bgBar() }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											className: textLayer(),
+											style: {
+												width: `calc(${segmentDuration} * 100%)`,
+												left: `calc(-${indexInSegment} * 100%)`
+											},
 											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "block w-full truncate px-1 text-center",
+												className: textSpan(),
 												children: ev.title
 											})
-										})
+										})]
 									}, `${ev.id}-${idx}`);
 								})
 							})]

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

@@ -1,5 +1,5 @@
-import { CalendarVariants, eventBarStyles } from "./Calendar.styles.cjs";
-import * as react_jsx_runtime78 from "react/jsx-runtime";
+import { CalendarVariants, EventBarStylesVariants } from "./Calendar.styles.cjs";
+import * as react_jsx_runtime45 from "react/jsx-runtime";
 
 //#region src/components/Calendar/Calendar.d.ts
 type CalendarEvent = {
@@ -7,7 +7,7 @@ type CalendarEvent = {
   title: string;
   startDate: string;
   endDate?: string;
-  type: keyof typeof eventBarStyles.variants;
+  type: NonNullable<EventBarStylesVariants['type']>;
 };
 interface CalendarProps extends CalendarVariants {
   className?: string;
@@ -34,7 +34,7 @@ declare const Calendar: {
     onDateClick,
     onEventClick,
     enableHover
-  }: CalendarProps): react_jsx_runtime78.JSX.Element;
+  }: CalendarProps): react_jsx_runtime45.JSX.Element;
   displayName: string;
 };
 //#endregion

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

@@ -1 +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,SAAA;EACA,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;;;;;;;;;;;;KAYV,aAAA,GAAa,mBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Calendar.d.cts","names":[],"sources":["../../../src/components/Calendar/Calendar.tsx"],"mappings":";;;;KA8BY,aAAA;EACV,EAAA;EACA,KAAA;EACA,SAAA;EACA,OAAA;EACA,IAAA,EAAM,WAAA,CAAY,sBAAA;AAAA;AAAA,UAGH,aAAA,SAAsB,gBAAA;EACrC,SAAA;EACA,MAAA,GAAS,aAAA;EACT,YAAA,GAAe,IAAA;EACf,KAAA,GAAQ,IAAA;EACR,SAAA;EACA,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;;;;;;;;;;;;KAYV,aAAA,GAAa,mBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -1,5 +1,5 @@
-import { CalendarVariants, eventBarStyles } from "./Calendar.styles.mjs";
-import * as react_jsx_runtime51 from "react/jsx-runtime";
+import { CalendarVariants, EventBarStylesVariants } from "./Calendar.styles.mjs";
+import * as react_jsx_runtime82 from "react/jsx-runtime";
 
 //#region src/components/Calendar/Calendar.d.ts
 type CalendarEvent = {
@@ -7,7 +7,7 @@ type CalendarEvent = {
   title: string;
   startDate: string;
   endDate?: string;
-  type: keyof typeof eventBarStyles.variants;
+  type: NonNullable<EventBarStylesVariants['type']>;
 };
 interface CalendarProps extends CalendarVariants {
   className?: string;
@@ -34,7 +34,7 @@ declare const Calendar: {
     onDateClick,
     onEventClick,
     enableHover
-  }: CalendarProps): react_jsx_runtime51.JSX.Element;
+  }: CalendarProps): react_jsx_runtime82.JSX.Element;
   displayName: string;
 };
 //#endregion

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

@@ -1 +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,SAAA;EACA,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;;;;;;;;;;;;KAYV,aAAA,GAAa,mBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Calendar.d.mts","names":[],"sources":["../../../src/components/Calendar/Calendar.tsx"],"mappings":";;;;KA8BY,aAAA;EACV,EAAA;EACA,KAAA;EACA,SAAA;EACA,OAAA;EACA,IAAA,EAAM,WAAA,CAAY,sBAAA;AAAA;AAAA,UAGH,aAAA,SAAsB,gBAAA;EACrC,SAAA;EACA,MAAA,GAAS,aAAA;EACT,YAAA,GAAe,IAAA;EACf,KAAA,GAAQ,IAAA;EACR,SAAA;EACA,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;;;;;;;;;;;;KAYV,aAAA,GAAa,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/Calendar/Calendar.mjs

@@ -3,7 +3,7 @@ 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 { 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";
@@ -49,15 +49,42 @@ const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new D
 			const { start, end } = getEventRange(event);
 			return start <= mEnd && end >= mStart;
 		});
+		relevantEvents.sort((a, b) => {
+			const aRange = getEventRange(a);
+			const bRange = getEventRange(b);
+			const aDur = differenceInCalendarDays(aRange.end, aRange.start);
+			const bDur = differenceInCalendarDays(bRange.end, bRange.start);
+			if (bDur !== aDur) return bDur - aDur;
+			return aRange.start.getTime() - bRange.start.getTime();
+		});
 		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);
+			let slot = 0;
+			let found = false;
+			while (!found) {
+				let isFree = true;
+				let tempD = new Date(d);
+				while (tempD <= eventEndDate) {
+					const dateKey = formatDateStr(tempD);
+					if ((map.get(dateKey) || [])[slot]) {
+						isFree = false;
+						break;
+					}
+					tempD = addDays(tempD, 1);
+				}
+				if (isFree) found = true;
+				else slot++;
+			}
+			let assignD = new Date(d);
+			while (assignD <= eventEndDate) {
+				const dateKey = formatDateStr(assignD);
+				const dailySlots = map.get(dateKey) || [];
+				while (dailySlots.length <= slot) dailySlots.push(null);
+				dailySlots[slot] = event;
+				map.set(dateKey, dailySlots);
+				assignD = addDays(assignD, 1);
 			}
 		}
 		return map;
@@ -140,39 +167,38 @@ const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new D
 							}), /* @__PURE__ */ jsx(Flex, {
 								className: eventList(),
 								children: daysEvents.map((ev, idx) => {
+									if (!ev) return /* @__PURE__ */ jsx("div", { className: eventItemHeight() }, `empty-${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 indexInSegment = differenceInCalendarDays(currentDate, segmentStart);
 									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" : ""
-										]),
+									const blockPosition = startDateKey === endDateKey ? "single" : dateKey === startDateKey ? "start" : dateKey === endDateKey ? "end" : "middle";
+									const { wrapper: eventWrapper, bgBar, textLayer, textSpan } = eventBarStyles({
+										type: ev.type,
+										position: blockPosition
+									});
+									return /* @__PURE__ */ jsxs("div", {
+										className: mergeStyles(eventWrapper(), eventItemHeight()),
 										onClick: (e) => {
 											e.stopPropagation();
 											onEventClick?.(ev);
 										},
-										children: isRenderCell && /* @__PURE__ */ jsx("div", {
-											className: eventBarStyles.textWrapper,
+										children: [/* @__PURE__ */ jsx("div", { className: bgBar() }), /* @__PURE__ */ jsx("div", {
+											className: textLayer(),
+											style: {
+												width: `calc(${segmentDuration} * 100%)`,
+												left: `calc(-${indexInSegment} * 100%)`
+											},
 											children: /* @__PURE__ */ jsx("span", {
-												className: "block w-full truncate px-1 text-center",
+												className: textSpan(),
 												children: ev.title
 											})
-										})
+										})]
 									}, `${ev.id}-${idx}`);
 								})
 							})]

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

@@ -1 +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  showToday?: boolean;\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  showToday = true,\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 = showToday && 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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"}
+{"version":3,"file":"Calendar.mjs","names":[],"sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import { 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 EventBarStylesVariants,\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: NonNullable<EventBarStylesVariants['type']>;\n};\n\nexport interface CalendarProps extends CalendarVariants {\n  className?: string;\n  events?: CalendarEvent[];\n  defaultMonth?: Date;\n  today?: Date;\n  showToday?: boolean;\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  showToday = true,\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 | null)[]>();\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    relevantEvents.sort((a, b) => {\n      const aRange = getEventRange(a);\n      const bRange = getEventRange(b);\n      const aDur = differenceInCalendarDays(aRange.end, aRange.start);\n      const bDur = differenceInCalendarDays(bRange.end, bRange.start);\n      if (bDur !== aDur) return bDur - aDur;\n      return aRange.start.getTime() - bRange.start.getTime();\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      let slot = 0;\n      let found = false;\n      while (!found) {\n        let isFree = true;\n        let tempD = new Date(d);\n        while (tempD <= eventEndDate) {\n          const dateKey = formatDateStr(tempD);\n          const dailySlots = map.get(dateKey) || [];\n          if (dailySlots[slot]) {\n            isFree = false;\n            break;\n          }\n          tempD = addDays(tempD, 1);\n        }\n        if (isFree) found = true;\n        else slot++;\n      }\n\n      let assignD = new Date(d);\n      while (assignD <= eventEndDate) {\n        const dateKey = formatDateStr(assignD);\n        const dailySlots = map.get(dateKey) || [];\n\n        while (dailySlots.length <= slot) dailySlots.push(null);\n        dailySlots[slot] = event;\n        map.set(dateKey, dailySlots);\n        assignD = addDays(assignD, 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 = showToday && 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                    if (!ev) {\n                      return (\n                        <div\n                          key={`empty-${idx}`}\n                          className={eventItemHeight()}\n                        />\n                      );\n                    }\n\n                    const { start, end } = getEventRange(ev);\n                    const currentDayIndex = getDay(currentDate);\n                    const weekStart = subDays(currentDate, currentDayIndex);\n                    const weekEnd = addDays(currentDate, 6 - currentDayIndex);\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 startDateKey = formatDateStr(start);\n                    const endDateKey = formatDateStr(end);\n                    const isStartEvent = dateKey === startDateKey;\n                    const isEndEvent = dateKey === endDateKey;\n                    const isSingleDay = startDateKey === endDateKey;\n                    const blockPosition = isSingleDay\n                      ? 'single'\n                      : isStartEvent\n                        ? 'start'\n                        : isEndEvent\n                          ? 'end'\n                          : 'middle';\n                    const {\n                      wrapper: eventWrapper,\n                      bgBar,\n                      textLayer,\n                      textSpan,\n                    } = eventBarStyles({\n                      type: ev.type,\n                      position: blockPosition,\n                    });\n\n                    return (\n                      <div\n                        key={`${ev.id}-${idx}`}\n                        className={mergeStyles(\n                          eventWrapper(),\n                          eventItemHeight(),\n                        )}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onEventClick?.(ev);\n                        }}\n                      >\n                        <div className={bgBar()} />\n\n                        <div\n                          className={textLayer()}\n                          style={{\n                            width: `calc(${segmentDuration} * 100%)`,\n                            left: `calc(-${indexInSegment} * 100%)`,\n                          }}\n                        >\n                          <span className={textSpan()}>{ev.title}</span>\n                        </div>\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

@@ -100,21 +100,36 @@ const calendar = (0, tailwind_variants.tv)({
 		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
-  `,
+const eventBarStyles = (0, tailwind_variants.tv)({
+	slots: {
+		wrapper: "relative w-full",
+		bgBar: "absolute inset-0",
+		textLayer: "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 !bg-transparent",
+		textSpan: "block w-[95%] mx-auto truncate px-2   text-center"
+	},
 	variants: {
-		holiday: "bg-red-100 text-red-400",
-		event: "bg-gray-100 text-gray-600",
-		important: "bg-blue-100 text-blue-600"
+		type: {
+			holiday: {
+				bgBar: "bg-red-100",
+				textLayer: "text-red-400"
+			},
+			event: {
+				bgBar: "bg-gray-100",
+				textLayer: "text-gray-600"
+			},
+			important: {
+				bgBar: "bg-blue-100",
+				textLayer: "text-blue-600"
+			}
+		},
+		position: {
+			single: { bgBar: "mx-[2px] rounded-[4px]" },
+			start: { bgBar: "mr-0 ml-[2px] rounded-l-[4px] rounded-r-none" },
+			end: { bgBar: "mr-[2px] ml-0 rounded-l-none rounded-r-[4px]" },
+			middle: { bgBar: "mx-0 rounded-none" }
+		}
 	}
-};
+});
 
 //#endregion
 exports.calendar = calendar;