@ayseaistudio/ui-components 3.9.2 → 3.9.3

package/dist/Calendar/Calendar.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import React from "react";
-import { IconChevronRight } from "@tabler/icons-react";
-import { IconChevronLeft } from "@tabler/icons-react";
-import "./style.css";
+import { IconChevronRight, IconChevronLeft } from "@tabler/icons-react";
 import { Label } from "../Label/Label";
 import { TertiaryButton } from "../TertiaryButton/TertiaryButton";
 import { CalendarYearDay } from "../CalendarYearDay/CalendarYearDay";
+import "./style.css";
 const normalizeVariantInput = (value) => {
     if (!value)
         return undefined;
@@ -33,6 +32,8 @@ export const Calendar = ({ property1, className, tertiaryButtonIcon = (_jsx(Icon
     const [selectedDay, setSelectedDay] = React.useState(null);
     const [selectedDays, setSelectedDays] = React.useState([]);
     const [selectedWeekRange, setSelectedWeekRange] = React.useState(null);
+    const [rangeStart, setRangeStart] = React.useState(null);
+    const [rangeEnd, setRangeEnd] = React.useState(null);
     const today = new Date();
     const [currentMonth, setCurrentMonth] = React.useState(month ?? today.getMonth());
     const [currentYear, setCurrentYear] = React.useState(year ?? today.getFullYear());
@@ -55,38 +56,61 @@ export const Calendar = ({ property1, className, tertiaryButtonIcon = (_jsx(Icon
             setSelectedDay(value.getDate());
         }
     }, [value, effectiveVariant]);
-    // Controlled multiple values support (when provided)
+    // Controlled multiple values support (when provided) – treat as range in multi mode
     React.useEffect(() => {
         if (effectiveVariant !== "multi")
             return;
         if (Array.isArray(values) && values.length > 0) {
-            // sync month/year to first value for visibility
-            const first = values[0];
-            if (first instanceof Date) {
+            const sorted = [...values].sort((a, b) => a.getTime() - b.getTime());
+            const first = sorted[0];
+            const last = sorted[sorted.length - 1];
+            if (first instanceof Date && last instanceof Date) {
+                setRangeStart(first);
+                setRangeEnd(last);
                 setCurrentMonth(first.getMonth());
                 setCurrentYear(first.getFullYear());
             }
-            // take only current month days for highlighting
-            const currentMonthDays = values
-                .filter(d => d.getFullYear() === currentYear && d.getMonth() === currentMonth)
-                .map(d => d.getDate());
-            setSelectedDays(currentMonthDays);
         }
-    }, [values, currentMonth, currentYear, effectiveVariant]);
-    // Notify parent component when selection changes
+        else {
+            setRangeStart(null);
+            setRangeEnd(null);
+        }
+    }, [values, effectiveVariant]);
+    // Compute selectedDays for the current month from the active range in multi mode
     React.useEffect(() => {
-        if (onDaySelection) {
-            if (selectedDays.length > 0) {
-                const dates = selectedDays
-                    .sort((a, b) => a - b)
-                    .map(d => new Date(currentYear, currentMonth, d));
-                onDaySelection(dates);
-            }
-            else {
-                onDaySelection([]);
+        if (effectiveVariant !== "multi")
+            return;
+        if (!rangeStart) {
+            setSelectedDays([]);
+            return;
+        }
+        const end = rangeEnd && rangeEnd.getTime() >= rangeStart.getTime() ? rangeEnd : rangeStart;
+        const days = [];
+        const cursor = new Date(rangeStart);
+        while (cursor.getTime() <= end.getTime()) {
+            if (cursor.getFullYear() === currentYear && cursor.getMonth() === currentMonth) {
+                days.push(cursor.getDate());
             }
+            cursor.setDate(cursor.getDate() + 1);
         }
-    }, [selectedDays, currentYear, currentMonth]);
+        setSelectedDays(days);
+    }, [rangeStart, rangeEnd, currentMonth, currentYear, effectiveVariant]);
+    // Notify parent component when selection changes (except multi, which calls manually)
+    React.useEffect(() => {
+        if (!onDaySelection)
+            return;
+        if (effectiveVariant === "multi")
+            return;
+        if (selectedDays.length > 0) {
+            const dates = selectedDays
+                .sort((a, b) => a - b)
+                .map(d => new Date(currentYear, currentMonth, d));
+            onDaySelection(dates);
+        }
+        else {
+            onDaySelection([]);
+        }
+    }, [selectedDays, currentYear, currentMonth, effectiveVariant, onDaySelection]);
     // Reset selection when variant changes
     React.useEffect(() => {
         if (effectiveVariant === "single") {
@@ -169,22 +193,40 @@ export const Calendar = ({ property1, className, tertiaryButtonIcon = (_jsx(Icon
             onDaySelection?.(resolvedWeek);
             return;
         }
-        // multi
-        if (!isCurrentMonth) {
+        // multi: treat as date range (start + end)
+        if (effectiveVariant === "multi") {
+            // Always move view to clicked date
             setCurrentMonth(cellDate.getMonth());
             setCurrentYear(cellDate.getFullYear());
-            setSelectedDays([]);
+            // Case 1: no start yet OR both start & end already selected -> start new range
+            if (!rangeStart || rangeEnd) {
+                setRangeStart(cellDate);
+                setRangeEnd(null);
+                onChangeMultiple?.([cellDate]);
+                onDaySelection?.([cellDate]);
+                return;
+            }
+            // Case 2: we have a start but no end -> complete the range
+            let start = rangeStart;
+            let end = cellDate;
+            if (end.getTime() < start.getTime()) {
+                const tmp = start;
+                start = end;
+                end = tmp;
+            }
+            setRangeStart(start);
+            setRangeEnd(end);
+            const allDates = [];
+            const cursor = new Date(start);
+            while (cursor.getTime() <= end.getTime()) {
+                allDates.push(new Date(cursor));
+                cursor.setDate(cursor.getDate() + 1);
+            }
+            onChangeMultiple?.(allDates);
+            onDaySelection?.(allDates);
             return;
         }
-        setSelectedDays((prev) => {
-            const dayNum = cellDate.getDate();
-            const next = prev.includes(dayNum) ? prev.filter((d) => d !== dayNum) : [...prev, dayNum];
-            onChangeMultiple?.(next
-                .sort((a, b) => a - b)
-                .map((d) => new Date(cellDate.getFullYear(), cellDate.getMonth(), d)));
-            return next;
-        });
-    }, [buildWeekFromDate, disableOutsideDays, effectiveVariant, onChange, onChangeMultiple, onDaySelection, maxDate]);
+    }, [buildWeekFromDate, disableOutsideDays, effectiveVariant, onChange, onChangeMultiple, onDaySelection, maxDate, rangeStart, rangeEnd]);
     const getStatusForDay = (day, cellDate) => {
         if (effectiveVariant === "week" && selectedWeekRange) {
             const { isStart, isEnd } = getWeekRangeMeta(cellDate);
@@ -315,12 +357,31 @@ export const Calendar = ({ property1, className, tertiaryButtonIcon = (_jsx(Icon
                             const taskCount = getAppointmentCountForDate(cellDate);
                             const weekDates = buildWeekFromDate(cellDate);
                             const weekMeta = effectiveVariant === "week" ? getWeekRangeMeta(cellDate) : { inRange: false, isStart: false, isEnd: false };
-                            const isWeekRangeCell = effectiveVariant === "week" && weekMeta.inRange;
-                            const isDisabled = !isWeekRangeCell && ((disableOutsideDays && !day.currentMonth) || (maxDate && cellDate > maxDate));
-                            const status = effectiveVariant === "week" && (weekMeta.isStart || weekMeta.isEnd)
+                            // Range meta for multi-mode (date range)
+                            let multiRangeMeta = { inRange: false, isStart: false, isEnd: false };
+                            if (effectiveVariant === "multi" && rangeStart) {
+                                let start = rangeStart;
+                                let end = rangeEnd && rangeEnd.getTime() >= rangeStart.getTime() ? rangeEnd : rangeStart;
+                                if (rangeEnd && rangeEnd.getTime() < rangeStart.getTime()) {
+                                    start = rangeEnd;
+                                    end = rangeStart;
+                                }
+                                const time = cellDate.getTime();
+                                multiRangeMeta = {
+                                    inRange: time >= start.getTime() && time <= end.getTime(),
+                                    isStart: time === start.getTime(),
+                                    isEnd: time === end.getTime(),
+                                };
+                            }
+                            const isRangeCell = (effectiveVariant === "week" && weekMeta.inRange) || (effectiveVariant === "multi" && multiRangeMeta.inRange);
+                            const isStartCell = effectiveVariant === "week" ? weekMeta.isStart : multiRangeMeta.isStart;
+                            const isEndCell = effectiveVariant === "week" ? weekMeta.isEnd : multiRangeMeta.isEnd;
+                            const isDisabled = !isRangeCell && ((disableOutsideDays && !day.currentMonth) || (maxDate && cellDate > maxDate));
+                            const status = ((effectiveVariant === "week" && (weekMeta.isStart || weekMeta.isEnd)) ||
+                                (effectiveVariant === "multi" && (multiRangeMeta.isStart || multiRangeMeta.isEnd)))
                                 ? "selected"
                                 : getStatusForDay(day, cellDate);
-                            return day ? (_jsx("div", { className: `calendar-year-day-clickable${isDisabled ? " disabled" : ""}${weekMeta.inRange ? " week-range" : ""}${weekMeta.isStart ? " week-start" : ""}${weekMeta.isEnd ? " week-end" : ""}`, onClick: () => handleSelectDate(cellDate, day.currentMonth, weekDates), children: _jsx(CalendarYearDay, { className: `calendar-year-day-instance ${day.currentMonth ? 'current-month' : 'other-month'}${isToday ? ' today' : ''}`, size: "medium", status: status, text: day.day.toString(), taskCount: taskCount, version: day.currentMonth ? "month-day" : "different-month-day" }) }, cellKey)) : (_jsx("div", { className: "calendar-year-day-empty" }, cellKey));
+                            return day ? (_jsx("div", { className: `calendar-year-day-clickable${isDisabled ? " disabled" : ""}${isRangeCell ? " week-range" : ""}${isStartCell ? " week-start" : ""}${isEndCell ? " week-end" : ""}`, onClick: () => handleSelectDate(cellDate, day.currentMonth, weekDates), children: _jsx(CalendarYearDay, { className: `calendar-year-day-instance ${day.currentMonth ? 'current-month' : 'other-month'}${isToday ? ' today' : ''}`, size: "medium", status: status, text: day.day.toString(), taskCount: taskCount, version: day.currentMonth ? "month-day" : "different-month-day" }) }, cellKey)) : (_jsx("div", { className: "calendar-year-day-empty" }, cellKey));
                         }) }, `week-${wi}`));
                 }) })] }));
 };

package/dist/Calendar/style.css

@@ -114,6 +114,24 @@
 .calendar .calendar-year-day-clickable.week-range {
   background-color: rgba(113, 163, 13, 0.1);
   border-radius: 0;
+  margin: 0 -2px;
+  padding: 0 2px;
+}
+
+/* Başlangıç hücresinde sol margin/padding yok */
+.calendar .calendar-year-day-clickable.week-range.week-start {
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  margin-left: 0;
+  padding-left: 0;
+}
+
+/* Bitiş hücresinde sağ margin/padding yok */
+.calendar .calendar-year-day-clickable.week-range.week-end {
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  margin-right: 0;
+  padding-right: 0;
 }
 
 .calendar .calendar-year-day-clickable.week-range .calendar-year-day-instance {
@@ -132,16 +150,6 @@
   color: rgba(61, 61, 61, 1) !important;
 }
 
-.calendar .calendar-year-day-clickable.week-range.week-start {
-  border-top-left-radius: 10px;
-  border-bottom-left-radius: 10px;
-}
-
-.calendar .calendar-year-day-clickable.week-range.week-end {
-  border-top-right-radius: 10px;
-  border-bottom-right-radius: 10px;
-}
-
 .calendar .calendar-year-day-clickable.week-range.week-start .calendar-year-day-instance.selected,
 .calendar .calendar-year-day-clickable.week-range.week-end .calendar-year-day-instance.selected {
   background-color: #b1e635 !important;

package/dist/CalendarYearDay/CalendarYearDay.js

@@ -12,7 +12,7 @@ export const CalendarYearDay = ({ size, version, status, className, text, taskCo
         return 0;
     };
     const badgeCount = getBadgeCount();
-    return (_jsxs("button", { type: "button", "aria-pressed": dayStatus === "selected", className: `calendar-year-day ${dayStatus} ${version} size-0-${size} ${className}`, children: [_jsx(Label, { className: "calendar-year-day-label", bold: "off", color: "black", size: "medium", spacing: "off", stroke: "off", text: text, version: "primary" }), badgeCount > 0 && (_jsx("div", { className: "badge-container", children: Array.from({ length: badgeCount }).map((_, idx) => (_jsx(Badge, { size: "XX-small", color: "grey", className: "instance-node" }, idx))) }))] }));
+    return (_jsxs("button", { type: "button", "aria-pressed": dayStatus === "selected", className: `calendar-year-day ${dayStatus} ${version} size-0-${size} ${className}`, onMouseDown: (e) => e.preventDefault(), children: [_jsx(Label, { className: "calendar-year-day-label", bold: "off", color: "black", size: "medium", spacing: "off", stroke: "off", text: text, version: "primary" }), badgeCount > 0 && (_jsx("div", { className: "badge-container", children: Array.from({ length: badgeCount }).map((_, idx) => (_jsx(Badge, { size: "XX-small", color: "grey", className: "instance-node" }, idx))) }))] }));
 };
 CalendarYearDay.propTypes = {
     size: PropTypes.oneOf(["large", "medium"]),

package/dist/CalendarYearDay/style.css

@@ -13,6 +13,7 @@
   position: relative;
   width: 36px;
   transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .calendar-year-day.size-0-large {
@@ -44,6 +45,17 @@
   border-color: rgba(152, 211, 23, 1);
 }
 
+.calendar-year-day:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.calendar-year-day:active {
+  outline: none !important;
+  box-shadow: none !important;
+  border-color: transparent !important;
+}
+
 .calendar-year-day:focus-visible {
   outline: 2px solid rgba(152, 211, 23, 0.6);
   outline-offset: 2px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ayseaistudio/ui-components",
-  "version": "3.9.2",
+  "version": "3.9.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",