@ayseaistudio/ui-components 3.6.1 → 3.8.0

package/dist/Calendar/Calendar.d.ts

@@ -0,0 +1,41 @@
+import PropTypes from "prop-types";
+import React from "react";
+import "./style.css";
+interface Props {
+    property1?: "medium" | "small";
+    className?: any;
+    tertiaryButtonIcon?: React.JSX.Element;
+    override?: React.JSX.Element;
+    showPrevButton?: boolean;
+    showNextButton?: boolean;
+    padToSixWeeks?: boolean;
+    disableOutsideDays?: boolean;
+    month?: number;
+    year?: number;
+    value?: Date | null;
+    onChange?: (date: Date) => void;
+    selectionMode?: "single" | "multiple" | "week" | string;
+    values?: Date[];
+    onChangeMultiple?: (dates: Date[]) => void;
+    appointmentDates?: Date[];
+    onDaySelection?: (dates: Date[]) => void;
+    maxDate?: Date;
+    highlightWeekSelection?: boolean;
+    selectionVariant?: "single" | "multi" | "week";
+}
+export declare const Calendar: {
+    ({ property1, className, tertiaryButtonIcon, override, showPrevButton, showNextButton, padToSixWeeks, disableOutsideDays, month, year, value, onChange, selectionMode, values, onChangeMultiple, appointmentDates, onDaySelection, maxDate, highlightWeekSelection, selectionVariant, }: Props): React.JSX.Element;
+    propTypes: {
+        property1: PropTypes.Requireable<string>;
+        divideDashedWrapperDivideHorizontalDivide: PropTypes.Requireable<string>;
+        tertiaryButtonIcon: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        override: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        showPrevButton: PropTypes.Requireable<boolean>;
+        showNextButton: PropTypes.Requireable<boolean>;
+        month: PropTypes.Requireable<number>;
+        year: PropTypes.Requireable<number>;
+        highlightWeekSelection: PropTypes.Requireable<boolean>;
+        selectionVariant: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/Calendar/Calendar.js

@@ -0,0 +1,338 @@
+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 { Label } from "../Label/Label";
+import { TertiaryButton } from "../TertiaryButton/TertiaryButton";
+import { CalendarYearDay } from "../CalendarYearDay/CalendarYearDay";
+const normalizeVariantInput = (value) => {
+    if (!value)
+        return undefined;
+    const normalized = value.toLowerCase();
+    if (normalized === "single")
+        return "single";
+    if (normalized === "multi" || normalized === "multiple")
+        return "multi";
+    if (normalized === "week" || normalized === "weekly")
+        return "week";
+    return undefined;
+};
+export const Calendar = ({ property1, className, tertiaryButtonIcon = (_jsx(IconChevronLeft, { size: 20, color: "#6D6D6D" })), override = _jsx(IconChevronRight, { size: 20, color: "#6D6D6D" }), showPrevButton = true, showNextButton = true, padToSixWeeks = true, disableOutsideDays = false, month, year, value, onChange, selectionMode, values, onChangeMultiple, appointmentDates = [], onDaySelection, maxDate, highlightWeekSelection = true, selectionVariant, }) => {
+    const effectiveVariant = React.useMemo(() => {
+        // Accept both selectionVariant and selectionMode, with case-insensitive + legacy aliases
+        const fromVariant = normalizeVariantInput(selectionVariant);
+        const fromMode = normalizeVariantInput(selectionMode);
+        if (fromVariant)
+            return fromVariant;
+        if (fromMode)
+            return fromMode;
+        return "multi";
+    }, [selectionVariant, selectionMode]);
+    const [selectedDay, setSelectedDay] = React.useState(null);
+    const [selectedDays, setSelectedDays] = React.useState([]);
+    const [selectedWeekRange, setSelectedWeekRange] = React.useState(null);
+    const today = new Date();
+    const [currentMonth, setCurrentMonth] = React.useState(month ?? today.getMonth());
+    const [currentYear, setCurrentYear] = React.useState(year ?? today.getFullYear());
+    React.useEffect(() => {
+        if (year !== undefined && year !== currentYear) {
+            setCurrentYear(year);
+        }
+    }, [year]);
+    React.useEffect(() => {
+        if (month !== undefined && month !== currentMonth) {
+            setCurrentMonth(month);
+        }
+    }, [month]);
+    React.useEffect(() => {
+        if (effectiveVariant !== "single")
+            return; // ignore single value in other modes
+        if (value instanceof Date) {
+            setCurrentMonth(value.getMonth());
+            setCurrentYear(value.getFullYear());
+            setSelectedDay(value.getDate());
+        }
+    }, [value, effectiveVariant]);
+    // Controlled multiple values support (when provided)
+    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) {
+                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
+    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([]);
+            }
+        }
+    }, [selectedDays, currentYear, currentMonth]);
+    // Reset selection when variant changes
+    React.useEffect(() => {
+        if (effectiveVariant === "single") {
+            setSelectedDays([]);
+            setSelectedWeekRange(null);
+        }
+        else {
+            setSelectedDay(null);
+            if (effectiveVariant !== "week") {
+                setSelectedWeekRange(null);
+            }
+        }
+    }, [effectiveVariant]);
+    // Verilen bir tarih için randevu sayısını bul ve badge'e dönüştür
+    const getAppointmentCountForDate = (checkDate) => {
+        let count = 0;
+        for (const appointmentDate of appointmentDates) {
+            if (appointmentDate.getFullYear() === checkDate.getFullYear() &&
+                appointmentDate.getMonth() === checkDate.getMonth() &&
+                appointmentDate.getDate() === checkDate.getDate()) {
+                count += 1;
+            }
+        }
+        return count;
+    };
+    const buildWeekFromDate = React.useCallback((cellDate) => {
+        const dayOfWeek = (cellDate.getDay() + 6) % 7; // convert Sunday=0 to Monday=0
+        const monday = new Date(cellDate);
+        monday.setDate(cellDate.getDate() - dayOfWeek);
+        return Array.from({ length: 7 }, (_, i) => new Date(monday.getFullYear(), monday.getMonth(), monday.getDate() + i));
+    }, []);
+    // Sync week selection when a single value is provided in week mode
+    React.useEffect(() => {
+        if (effectiveVariant !== "week")
+            return;
+        if (!(value instanceof Date))
+            return;
+        setCurrentMonth(value.getMonth());
+        setCurrentYear(value.getFullYear());
+        const resolvedWeek = buildWeekFromDate(value);
+        const currentMonthDays = resolvedWeek
+            .filter((d) => d.getFullYear() === value.getFullYear() && d.getMonth() === value.getMonth())
+            .map((d) => d.getDate());
+        setSelectedDays(currentMonthDays);
+        setSelectedWeekRange({ start: resolvedWeek[0], end: resolvedWeek[resolvedWeek.length - 1] });
+    }, [value, effectiveVariant, buildWeekFromDate]);
+    const isSameDay = (d1, d2) => d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
+    const getWeekRangeMeta = React.useCallback((cellDate) => {
+        if (!selectedWeekRange)
+            return { inRange: false, isStart: false, isEnd: false };
+        const { start, end } = selectedWeekRange;
+        const time = cellDate.getTime();
+        const inRange = time >= start.getTime() && time <= end.getTime();
+        const isStart = isSameDay(cellDate, start);
+        const isEnd = isSameDay(cellDate, end);
+        return { inRange, isStart, isEnd };
+    }, [selectedWeekRange]);
+    const handleSelectDate = React.useCallback((cellDate, isCurrentMonth, weekDates) => {
+        if (disableOutsideDays && !isCurrentMonth)
+            return;
+        if (maxDate && cellDate > maxDate)
+            return;
+        if (effectiveVariant === "single") {
+            setCurrentMonth(cellDate.getMonth());
+            setCurrentYear(cellDate.getFullYear());
+            setSelectedDay(cellDate.getDate());
+            onChange?.(cellDate);
+            return;
+        }
+        if (effectiveVariant === "week") {
+            const resolvedWeek = weekDates ?? buildWeekFromDate(cellDate);
+            setCurrentMonth(cellDate.getMonth());
+            setCurrentYear(cellDate.getFullYear());
+            const currentMonthDays = resolvedWeek
+                .filter((d) => d.getFullYear() === cellDate.getFullYear() && d.getMonth() === cellDate.getMonth())
+                .map((d) => d.getDate());
+            setSelectedDays(currentMonthDays);
+            setSelectedWeekRange({ start: resolvedWeek[0], end: resolvedWeek[resolvedWeek.length - 1] });
+            onChangeMultiple?.(resolvedWeek);
+            onDaySelection?.(resolvedWeek);
+            return;
+        }
+        // multi
+        if (!isCurrentMonth) {
+            setCurrentMonth(cellDate.getMonth());
+            setCurrentYear(cellDate.getFullYear());
+            setSelectedDays([]);
+            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]);
+    const getStatusForDay = (day, cellDate) => {
+        if (effectiveVariant === "week" && selectedWeekRange) {
+            const { isStart, isEnd } = getWeekRangeMeta(cellDate);
+            if (isStart || isEnd)
+                return "selected";
+        }
+        if (day.currentMonth && (selectedDays.includes(day.day) || day.day === selectedDay)) {
+            return "selected";
+        }
+        return "default";
+    };
+    const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
+    const firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay();
+    const emptyDays = (firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1);
+    const monthNames = [
+        "Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran",
+        "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"
+    ];
+    const prevMonth = () => {
+        if (currentMonth === 0) {
+            setCurrentMonth(11);
+            setCurrentYear(currentYear - 1);
+        }
+        else {
+            setCurrentMonth(currentMonth - 1);
+        }
+        if (effectiveVariant !== "single") {
+            setSelectedDays([]);
+            setSelectedWeekRange(null);
+        }
+        else {
+            setSelectedDay(1);
+        }
+    };
+    const nextMonth = () => {
+        if (currentMonth === 11) {
+            setCurrentMonth(0);
+            setCurrentYear(currentYear + 1);
+        }
+        else {
+            setCurrentMonth(currentMonth + 1);
+        }
+        if (effectiveVariant !== "single") {
+            setSelectedDays([]);
+            setSelectedWeekRange(null);
+        }
+        else {
+            setSelectedDay(1);
+        }
+    };
+    const prevMonthDays = new Date(currentYear, currentMonth, 0).getDate(); // önceki ayın son günü
+    const weeks = [];
+    let currentWeek = [];
+    // Ayın başındaki boşlukları önceki ayın günleriyle doldur
+    for (let i = emptyDays - 1; i >= 0; i--) {
+        currentWeek.push({ day: prevMonthDays - i, currentMonth: false });
+    }
+    // Günleri ekle
+    for (let d = 1; d <= daysInMonth; d++) {
+        currentWeek.push({ day: d, currentMonth: true });
+        if (currentWeek.length === 7) {
+            weeks.push(currentWeek);
+            currentWeek = [];
+        }
+    }
+    // Son haftayı doldur (sonraki ayın günleriyle)
+    let nextDay = 1;
+    if (currentWeek.length > 0) {
+        while (currentWeek.length < 7) {
+            currentWeek.push({ day: nextDay++, currentMonth: false });
+        }
+        weeks.push(currentWeek);
+    }
+    // 6 haftaya tamamla (önceki/sonraki ay günleriyle)
+    if (padToSixWeeks) {
+        while (weeks.length < 6) {
+            const newWeek = [];
+            for (let i = 0; i < 7; i++) {
+                newWeek.push({ day: nextDay++, currentMonth: false });
+            }
+            weeks.push(newWeek);
+        }
+    }
+    else {
+        // Ensure at least 5 weeks; add extra week(s) only until 5
+        while (weeks.length < 5) {
+            const newWeek = [];
+            for (let i = 0; i < 7; i++) {
+                newWeek.push({ day: nextDay++, currentMonth: false });
+            }
+            weeks.push(newWeek);
+        }
+    }
+    return (_jsxs("div", { className: `calendar ${className} ${property1 ? `size-${property1}` : ""}`, children: [_jsxs("div", { className: "top", children: [showPrevButton && (_jsx(TertiaryButton, { color: "black", leftIcon: tertiaryButtonIcon, size: "large", status: "default", onClick: prevMonth, "aria-label": "\u00D6nceki ay" })), _jsxs("div", { className: "label-13", children: [_jsx(Label, { bold: "on", className: "label-14", color: "black", size: "large", spacing: "on", stroke: "off", text: monthNames[currentMonth], version: "primary" }), _jsx(Label, { bold: "on", className: "label-14-year", color: "black", size: "small", spacing: "off", stroke: "off", text: currentYear.toString(), version: "secondary" })] }), showNextButton && (_jsx(TertiaryButton, { color: "black", leftIcon: override, size: "large", status: "default", onClick: nextMonth, "aria-label": "Sonraki ay" }))] }), _jsx("div", { className: "divide-dashed-12" }), _jsxs("div", { className: "days", children: [_jsx(Label, { bold: "off", className: "label-15", color: "black", size: "small", spacing: "on", stroke: "off", text: "Pzt.", version: "primary" }), _jsx(Label, { bold: "off", className: "label-15", color: "black", size: "small", spacing: "on", stroke: "off", text: "Sal.", version: "primary" }), _jsx(Label, { bold: "off", className: "label-15", color: "black", size: "small", spacing: "on", stroke: "off", text: "\u00C7ar.", version: "primary" }), _jsx(Label, { bold: "off", className: "label-15", color: "black", size: "small", spacing: "on", stroke: "off", text: "Per.", version: "primary" }), _jsx(Label, { bold: "off", className: "label-15", color: "black", size: "small", spacing: "on", stroke: "off", text: "Cum.", version: "primary" }), _jsx(Label, { bold: "off", className: "label-15", color: "black", size: "small", spacing: "on", stroke: "off", text: "Cmt.", version: "primary" }), _jsx(Label, { bold: "off", className: "label-15", color: "black", size: "small", spacing: "on", stroke: "off", text: "Pzr.", version: "primary" })] }), _jsx("div", { className: "weeks", children: weeks.map((week, wi) => {
+                    const isWeekMode = effectiveVariant === "week";
+                    const weekHasSelection = highlightWeekSelection && !isWeekMode && week.some((d) => d.currentMonth && ((selectedDays || []).includes(d.day) || d.day === selectedDay));
+                    return (_jsx("div", { className: `week${weekHasSelection ? " selected-week" : ""}${isWeekMode ? " week-mode" : ""}`, children: week.map((day, di) => {
+                            const cellKey = `w${wi}-d${di}`;
+                            const isToday = day.currentMonth &&
+                                day.day === today.getDate() &&
+                                currentMonth === today.getMonth() &&
+                                currentYear === today.getFullYear();
+                            // Hücre için gerçek tarihi hesapla (önceki/sonraki aylar dahil)
+                            let cellYear = currentYear;
+                            let cellMonth = currentMonth;
+                            if (!day.currentMonth) {
+                                if (wi === 0) {
+                                    // İlk hafta ve mevcut ay dışı ise: önceki ay
+                                    if (currentMonth === 0) {
+                                        cellMonth = 11;
+                                        cellYear = currentYear - 1;
+                                    }
+                                    else {
+                                        cellMonth = currentMonth - 1;
+                                    }
+                                }
+                                else {
+                                    if (currentMonth === 11) {
+                                        cellMonth = 0;
+                                        cellYear = currentYear + 1;
+                                    }
+                                    else {
+                                        cellMonth = currentMonth + 1;
+                                    }
+                                }
+                            }
+                            const cellDate = new Date(cellYear, cellMonth, day.day);
+                            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)
+                                ? "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));
+                        }) }, `week-${wi}`));
+                }) })] }));
+};
+Calendar.propTypes = {
+    property1: PropTypes.oneOf(["medium"]),
+    divideDashedWrapperDivideHorizontalDivide: PropTypes.string,
+    tertiaryButtonIcon: PropTypes.element,
+    override: PropTypes.element,
+    showPrevButton: PropTypes.bool,
+    showNextButton: PropTypes.bool,
+    month: PropTypes.number,
+    year: PropTypes.number,
+    highlightWeekSelection: PropTypes.bool,
+    selectionVariant: PropTypes.oneOf(["single", "multi", "week"]),
+};

package/dist/Calendar/index.d.ts

@@ -0,0 +1 @@
+export { Calendar } from "./Calendar";

package/dist/Calendar/index.js

@@ -0,0 +1 @@
+export { Calendar } from "./Calendar";

package/dist/Calendar/style.css

@@ -0,0 +1,217 @@
+.calendar {
+  align-items: flex-start;
+  background-color: #ffffff;
+  border: 1px solid;
+  border-color: #e7e7e7;
+  border-radius: 20px;
+  box-shadow: var(--drop-shadow-low);
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  gap: 4px;
+  padding: 8px;
+  position: relative;
+  width: 100%;
+}
+
+.calendar-year-day-clickable {
+  cursor: pointer;
+}
+
+.calendar .top {
+  align-items: flex-start;
+  align-self: stretch;
+  display: flex;
+  flex: 0 0 auto;
+  gap: 8px;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+}
+
+.divide-dashed-12 {
+  align-self: stretch !important;
+
+  
+  width: 100% !important;
+  border-top: 1px dashed #E7E7E7;
+}
+
+.calendar .tertiary-button-3 {
+  flex: 0 0 auto !important;
+
+  
+}
+
+.calendar .label-13 {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  flex-grow: 1;
+  position: relative;
+}
+
+.calendar .label-14 {
+  display: flex !important;
+  padding: 0 !important;
+
+  width: 100% !important;
+}
+.calendar .label-14-year {
+  align-self: stretch !important;
+  display: flex !important;
+  flex: 0 0 auto !important;
+
+  
+  width: 100% !important;
+  padding: 0 !important;
+}
+
+
+.calendar .days {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  width: 100%;
+  height: 20px;
+}
+
+.calendar .label-15 {
+  flex: 0 0 calc(100% / 7);
+  text-align: center;
+  display: flex !important;
+  width: 38px !important;
+}
+
+.weeks {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 6px;
+}
+
+.calendar .week {
+  align-items: center;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+  position: relative;
+  width: 100%;
+  height: auto;
+}
+
+.calendar .week.week-mode {
+  gap: 0;
+}
+
+.calendar .week.selected-week {
+  background-color: rgba(113, 163, 13, 0.1);
+  border-radius: 8px;
+}
+
+.calendar .calendar-year-day-clickable.week-range {
+  background-color: rgba(113, 163, 13, 0.1);
+  border-radius: 0;
+}
+
+.calendar .calendar-year-day-clickable.week-range .calendar-year-day-instance {
+  background: transparent !important;
+  border: none !important;
+  outline: none !important;
+}
+
+.calendar .calendar-year-day-clickable.week-range .calendar-year-day {
+  border: none !important;
+  outline: none !important;
+}
+
+.calendar .calendar-year-day-clickable.week-range .calendar-year-day-label,
+.calendar .calendar-year-day-clickable.week-range .calendar-year-day-label .text-wrapper {
+  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;
+  border: 1px solid #b1e635 !important;
+  color: #1f1f1f !important;
+  opacity: 1 !important; /* keep edge days visible even when disabled */
+}
+
+
+.calendar .calendar-year-day-clickable.week-range.week-start .calendar-year-day-instance.selected .calendar-year-day-label,
+.calendar .calendar-year-day-clickable.week-range.week-end .calendar-year-day-instance.selected .calendar-year-day-label {
+  color: #1f1f1f !important;
+}
+
+/* When a whole week is highlighted, make the selected day blend with the row.
+   Keep a subtle border so the selected cell is still noticeable. */
+.calendar .week.selected-week .calendar-year-day-4 {
+  background-color: transparent !important;
+  border: none !important;
+  border-radius: 8px; /* keep radius to match the week */
+}
+
+
+.calendar-year-day,
+.calendar-year-day-empty {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.calendar .calendar-year-day-instance.selected {
+  background-color: #b1e635 !important;
+  color: #2f2f2f !important;
+  border-radius: 8px;
+  border: 1px solid rgba(113, 163, 13, 0.1) !important;
+}
+
+.calendar .calendar-year-day-2 {
+  align-self: stretch !important;
+  display: flex !important;
+  height: 36px !important;
+
+  
+  width: 100% !important;
+}
+
+
+.calendar .calendar-year-day-3 {
+  color: #b0b0b0 !important;
+}
+
+.calendar .calendar-year-day-instance.today {
+  border: 1px solid rgba(113, 163, 13, 0.2);
+  border-radius: 8px;
+}
+
+.calendar .calendar-year-day-4 {
+  background-color: #b1e635 !important;
+  flex: 1 !important;
+  flex-grow: 1 !important;
+
+  
+  width: unset !important;
+}
+
+
+.calendar .icons-9 {
+  height: 20px !important;
+  position: relative !important;
+  width: 20px !important;
+}

package/dist/CalendarYearDay/CalendarYearDay.d.ts

@@ -3,16 +3,18 @@ import "./style.css";
 interface Props {
     size: "large" | "medium";
     version: "month-day" | "different-month-day";
-    status: "two-task" | "non-task" | "one-task" | "selected" | "focus" | "four-task" | "three-task" | "five-task" | "on-date";
+    status?: "default" | "selected" | "focus";
     className: any;
     text: string;
+    taskCount?: number;
 }
 export declare const CalendarYearDay: {
-    ({ size, version, status, className, text, }: Props): React.JSX.Element;
+    ({ size, version, status, className, text, taskCount, }: Props): React.JSX.Element;
     propTypes: {
         size: PropTypes.Requireable<string>;
         version: PropTypes.Requireable<string>;
         status: PropTypes.Requireable<string>;
+        taskCount: PropTypes.Requireable<number>;
     };
 };
 export {};

package/dist/CalendarYearDay/CalendarYearDay.js

@@ -1,54 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import "./style.css";
-import { Badge } from "../Badge";
-import { TertiaryButton } from "../TertiaryButton";
-import { PrimaryButton } from "../PrimaryButton";
-export const CalendarYearDay = ({ size, version, status, className, text, }) => {
+import { Badge } from "../Badge/Badge";
+import { Label } from "../Label/Label";
+export const CalendarYearDay = ({ size, version, status, className, text, taskCount, }) => {
+    const dayStatus = status ?? "default";
     const getBadgeCount = () => {
-        switch (status) {
-            case "one-task":
-                return 1;
-            case "two-task":
-                return 2;
-            case "three-task":
-                return 3;
-            case "four-task":
-                return 4;
-            case "five-task":
-                return 5;
-            default:
-                return 0;
+        if (typeof taskCount === "number") {
+            return Math.max(0, Math.min(taskCount, 5));
         }
-    };
-    const getTertiaryButtonClass = () => {
-        if (size === "medium") {
-            return ["five-task", "focus", "selected"].includes(status) ? "class-5" : "class-3";
-        }
-        // size === "large"
-        if (status === "selected")
-            return "class-4";
-        if (version === "month-day" && ["five-task", "focus"].includes(status))
-            return "class-4";
-        return "class-3";
+        return 0;
     };
     const badgeCount = getBadgeCount();
-    const showTertiaryButton = status !== "on-date";
-    const tertiaryButtonClass = getTertiaryButtonClass();
-    return (_jsxs("div", { className: `calendar-year-day ${status} ${version} size-0-${size} ${className}`, children: [showTertiaryButton && (_jsx(TertiaryButton, { className: tertiaryButtonClass, color: "black", size: size === "medium" ? "medium" : "large", status: version === "different-month-day" ? "disabled" : "default", text: text })), badgeCount > 0 && (_jsx("div", { className: "frame", children: Array.from({ length: badgeCount }).map((_, idx) => (_jsx(Badge, { size: "XX-small", color: "grey", className: "instance-node" }, idx))) })), status === "on-date" && (_jsx(PrimaryButton, { className: `${size === "medium" ? "class-5" : "class-4"}`, color: "black", size: size === "medium" ? "medium" : "large", status: "default", text: text }))] }));
+    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))) }))] }));
 };
 CalendarYearDay.propTypes = {
     size: PropTypes.oneOf(["large", "medium"]),
     version: PropTypes.oneOf(["month-day", "different-month-day"]),
-    status: PropTypes.oneOf([
-        "two-task",
-        "non-task",
-        "one-task",
-        "selected",
-        "focus",
-        "four-task",
-        "three-task",
-        "five-task",
-        "on-date",
-    ]),
+    status: PropTypes.oneOf(["default", "selected", "focus"]),
+    taskCount: PropTypes.number,
 };

package/dist/CalendarYearDay/style.css

@@ -1,152 +1,100 @@
 .calendar-year-day {
+  appearance: none;
   align-items: center;
-  flex-direction: column;
-  position: relative;
-}
-
-.calendar-year-day .class {
-  margin-bottom: -1.00px !important;
-  margin-left: -0.50px !important;
-  margin-right: -0.50px !important;
-  margin-top: -3.00px !important;
-}
-
-.calendar-year-day .class-2 {
-  margin-bottom: -1.00px !important;
-  margin-top: -3.00px !important;
-}
-
-.calendar-year-day .class-3 {
-  align-self: stretch !important;
-  display: flex !important;
-}
-
-.calendar-year-day .class-4 {
-  align-self: stretch !important;
-  display: flex !important;
-  height: 44px !important;
-  left: unset !important;
-  top: unset !important;
-  width: 100% !important;
-}
-
-.calendar-year-day .class-5 {
-  align-self: stretch !important;
-  display: flex !important;
-  height: 36px !important;
-  left: unset !important;
-  top: unset !important;
-  width: 100% !important;
-}
-
-.calendar-year-day .frame {
-  align-items: flex-start;
-  flex: 0 0 auto;
-  gap: 2px;
-  position: relative;
-}
-
-.calendar-year-day.non-task {
-  justify-content: space-around;
-}
-
-.calendar-year-day.focus {
-  border: 1px solid;
-  border-radius: 8px;
-}
-
-.calendar-year-day.on-date {
-  background-color: #e7e7e7;
-  border-radius: 8px;
-}
-
-.calendar-year-day.month-day {
-  display: flex;
-}
-
-.calendar-year-day.size-0-medium {
-  display: flex;
-  width: 36px;
-}
-
-.calendar-year-day.selected {
-  background-color: #e7e7e7;
+  justify-content: center;
+  background-color: transparent;
+  border: 1px solid transparent;
   border-radius: 8px;
-}
-
-.calendar-year-day.focus.different-month-day {
-  background-color: #eeeeee;
-  border-color: #b0b0b0;
-}
-
-.calendar-year-day.size-0-medium.one-task {
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
   height: 36px;
+  padding: 0;
+  position: relative;
+  width: 36px;
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
 }
 
-.calendar-year-day.four-task.size-0-large {
+.calendar-year-day.size-0-large {
   height: 44px;
+  width: 44px;
 }
 
-.calendar-year-day.three-task.size-0-medium {
-  height: 36px;
+.calendar-year-day.different-month-day {
+  color: #b0b0b0;
 }
 
-.calendar-year-day.two-task.size-0-large {
-  height: 44px;
+.calendar-year-day.selected {
+  background-color: rgba(177, 230, 53, 1);
+  border-color: rgba(177, 230, 53, 1);
+  border: 1px solid rgba(113, 163, 13, 0.1) !important;
+  color: #1f1f1f;
 }
 
-.calendar-year-day.focus.month-day {
-  background-color: #e7e7e7;
-  border-color: #888888;
-}
+.calendar-year-day.selected .text-wrapper {
 
-.calendar-year-day.non-task.size-0-large {
-  height: 44px;
+  color: rgba(48, 48, 48, 1);
 }
 
-.calendar-year-day.three-task.size-0-large {
-  height: 44px;
+.calendar-year-day.focus {
+  border-color: #9ad11d;
 }
 
-.calendar-year-day.four-task.size-0-medium {
-  height: 36px;
+.calendar-year-day.today {
+  border-color: rgba(152, 211, 23, 1);
 }
 
-.calendar-year-day.two-task.size-0-medium {
-  height: 36px;
+.calendar-year-day:focus-visible {
+  outline: 2px solid rgba(152, 211, 23, 0.6);
+  outline-offset: 2px;
 }
 
-.calendar-year-day.size-0-large.month-day {
-  width: 44px;
-}
-
-.calendar-year-day.size-0-large.different-month-day {
-  display: inline-flex;
+.calendar-year-day .calendar-year-day-label {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  pointer-events: none;
+  color: #2f2f2f;
 }
 
-.calendar-year-day.non-task.size-0-medium {
-  height: 36px;
+.calendar-year-day .badge-container {
+  position: relative;
+  display: flex;
+  gap: 2px;
 }
 
-.calendar-year-day.size-0-large.one-task {
-  height: 44px;
+.calendar-year-day .badge-container .instance-node {
+  width: 4px !important;
+  height: 4px !important;
+  min-width: 4px !important;
+  min-height: 4px !important;
+  max-width: 4px !important;
+  max-height: 4px !important;
+  border-radius: 50% !important;
+  background-color: rgba(61, 61, 61, 1) !important;
+  padding: 0 !important;
+  border: none !important;
+  box-sizing: border-box !important;
+  display: block !important;
+  transform: none !important;
+  scale: 1 !important;
+  line-height: 4px !important;
+  font-size: 0 !important;
 }
 
-.calendar-year-day.focus.size-0-large.different-month-day {
-  height: 44px;
+.calendar-year-day.different-month-day .badge-container .instance-node {
+  background-color: rgba(209, 209, 209, 1) !important;
 }
 
-.calendar-year-day.five-task.size-0-large.different-month-day {
-  height: 44px;
+.calendar-year-day.different-month-day {
+  cursor: default;
 }
 
-.calendar-year-day.size-0-large .frame {
-  display: inline-flex;
+.calendar-year-day.different-month-day .calendar-year-day-label .text-wrapper {
+  color: #b0b0b0;
 }
 
-.calendar-year-day.size-0-medium .frame {
-  align-self: stretch;
-  display: flex;
-  justify-content: center;
-  width: 100%;
+.calendar-year-day.selected .calendar-year-day-label {
+  color: #1a1a1a;
 }

package/dist/Checkbox/Checkbox.d.ts

@@ -14,7 +14,6 @@ export declare const Checkbox: {
     ({ text, size, status, color, className, fieldClassName, onClick, onChange, }: Props): React.JSX.Element;
     propTypes: {
         text: PropTypes.Requireable<string>;
-        withText: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<string>;
         status: PropTypes.Requireable<string>;
         color: PropTypes.Requireable<string>;

package/dist/Checkbox/Checkbox.js

@@ -1,26 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
-import { useReducer } from "react";
+import { useReducer, useEffect } from "react";
 import "./style.css";
 import { IconCheck } from "@tabler/icons-react";
-export const Checkbox = ({ text, size, status, color, className, fieldClassName, onClick, onChange, }) => {
-    const initialState = {
+export const Checkbox = ({ text, size, status, color, className = "", fieldClassName = "", onClick, onChange, }) => {
+    const [state, dispatch] = useReducer(reducer, {
         size: size ?? "large",
-        status: status ?? "selected",
+        status: status ?? "default",
         color: color ?? "black",
-    };
-    const [state, dispatch] = useReducer(reducer, initialState);
-    return (_jsxs("div", { className: `checkbox ${state.size} ${state.color} ${state.status} ${className}`, onMouseEnter: () => {
-            dispatch("mouse_enter");
-        }, onMouseLeave: () => {
-            dispatch("mouse_leave");
-        }, onClick: () => {
-            dispatch("click");
+    });
+    useEffect(() => {
+        dispatch({
+            type: "sync",
+            payload: {
+                size: size ?? "large",
+                status: status ?? "default",
+                color: color ?? "black",
+            },
+        });
+    }, [size, status, color]);
+    return (_jsxs("div", { className: `checkbox ${state.size} ${state.color} ${state.status} ${className}`, onMouseEnter: () => dispatch("mouse_enter"), onMouseLeave: () => dispatch("mouse_leave"), onClick: () => {
+            if (status === undefined) {
+                dispatch("click");
+            }
             onClick?.();
             onChange?.();
-        }, children: [_jsx("div", { className: `field ${fieldClassName}`, children: state.status === "selected" && (_jsx(IconCheck, { className: `${state.size === "large" ? "class" : (state.size === "x-small") ? "class-2" : "class-3"}`, color: ["lime", "mauve"].includes(state.color) ? "#3D3D3D" : "#F1F1F1" })) }), text && _jsx("div", { className: "text", children: text })] }));
+        }, children: [_jsx("div", { className: `field ${fieldClassName}`, children: state.status === "selected" && (_jsx(IconCheck, { className: state.size === "large"
+                        ? "class"
+                        : state.size === "x-small"
+                            ? "class-2"
+                            : "class-3", color: ["lime", "mauve"].includes(state.color) ? "#3D3D3D" : "#F1F1F1" })) }), text && _jsx("div", { className: "text", children: text })] }));
 };
 function reducer(state, action) {
+    if (typeof action === "object" && action.type === "sync") {
+        return { ...state, ...action.payload };
+    }
     switch (action) {
         case "mouse_enter":
             return state.status === "default" ? { ...state, status: "hover" } : state;
@@ -34,7 +48,6 @@ function reducer(state, action) {
 }
 Checkbox.propTypes = {
     text: PropTypes.string,
-    withText: PropTypes.bool,
     size: PropTypes.oneOf(["large", "x-small", "medium", "small"]),
     status: PropTypes.oneOf(["default", "selected", "hover"]),
     color: PropTypes.oneOf(["mauve", "lime", "black", "blue", "galliano", "red"]),

package/dist/InputField/InputField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
-import React, { useReducer, useRef, useState } from "react";
+import React, { useEffect, useReducer, useRef, useState } from "react";
 import "./style.css";
 import { IconEyeOff, IconEye, IconX, IconAlertSquareRounded } from "@tabler/icons-react";
 const initialState = (size, status, radius) => ({
@@ -17,6 +17,8 @@ const reducer = (state, action) => {
             return { size, radius, status: "active" };
         case "mouse_leave":
             return { ...state, status: "default" };
+        case "set_active":
+            return { size, radius, status: "active" };
         default:
             return state;
     }
@@ -25,6 +27,7 @@ export const InputField = ({ withAlertIcon = true, withAlertMessage = true, left
     const [state, dispatch] = useReducer(reducer, initialState(size, status, radius));
     const [inputValue, setInputValue] = useState(defaultValue);
     const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
     const containerRef = useRef(null);
     const isControlled = value !== undefined;
     const handleInputChange = (event) => {
@@ -41,6 +44,22 @@ export const InputField = ({ withAlertIcon = true, withAlertMessage = true, left
         }
     };
     const currentValue = isControlled ? value : inputValue;
+    const hasValue = !!currentValue && currentValue.length > 0;
+    useEffect(() => {
+        if (hasValue && isFocused && state.status !== "active" && state.status !== "disabled") {
+            dispatch("set_active");
+        }
+    }, [hasValue, isFocused, state.status]);
+    const handleFocusInternal = (event) => {
+        setIsFocused(true);
+        dispatch("set_active");
+        onFocus?.(event);
+    };
+    const handleBlurInternal = (event) => {
+        setIsFocused(false);
+        dispatch("mouse_leave");
+        onBlur?.(event);
+    };
     const handleClear = () => {
         if (isControlled) {
             onClear?.();
@@ -55,7 +74,15 @@ export const InputField = ({ withAlertIcon = true, withAlertMessage = true, left
         onRequestPopupOpen?.(containerRef.current);
     };
     // selection is handled by parent when using external popup
-    return (_jsxs("div", { className: `input-field size-2-${state.size} ${className}`, ref: containerRef, onMouseLeave: () => dispatch("mouse_leave"), onMouseEnter: () => dispatch("mouse_enter"), onClick: () => dispatch("click"), children: [withHeader && (_jsx("div", { className: `frame ${["active", "default", "disabled", "hover"].includes(state.status) ? frameClassName : ""}`, children: _jsx("div", { className: `label-2 ${state.status}`, children: headerText }) })), _jsxs("div", { className: `input-fields size-4-${state.size} status-0-${state.status}`, onClick: toggleDropdown, children: [leftIcon && React.cloneElement(leftIcon, { color: getStatusColor(state.status) }), _jsx("input", { type: isPassword ? (isPasswordVisible ? "text" : "password") : "text", placeholder: text, value: currentValue, onChange: handleInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, className: `input-field-placeholder size-${state.size} ${state.status === "alert" ? "alert" : ""}`, style: {
+    return (_jsxs("div", { className: `input-field size-2-${state.size} ${className}`, ref: containerRef, onMouseLeave: () => {
+            if (hasValue && isFocused)
+                return;
+            dispatch("mouse_leave");
+        }, onMouseEnter: () => {
+            if (hasValue && isFocused)
+                return;
+            dispatch("mouse_enter");
+        }, onClick: () => dispatch("click"), children: [withHeader && (_jsx("div", { className: `frame ${["active", "default", "disabled", "hover"].includes(state.status) ? frameClassName : ""}`, children: _jsx("div", { className: `label-2 ${state.status}`, children: headerText }) })), _jsxs("div", { className: `input-fields size-4-${state.size} status-0-${state.status}`, onClick: toggleDropdown, children: [leftIcon && React.cloneElement(leftIcon, { color: getStatusColor(state.status) }), _jsx("input", { type: isPassword ? (isPasswordVisible ? "text" : "password") : "text", placeholder: text, value: currentValue, onChange: handleInputChange, onFocus: handleFocusInternal, onBlur: handleBlurInternal, onKeyDown: onKeyDown, className: `input-field-placeholder size-${state.size} ${state.status === "alert" ? "alert" : ""}`, style: {
                             backgroundColor: "transparent",
                             border: "none",
                             flex: 1,

package/dist/index.d.ts

@@ -40,3 +40,4 @@ export { InfoTooltip } from "./InfoTooltip/InfoTooltip";
 export { ColorFlag } from "./ColorFlag/ColorFlag";
 export { CallCenterTasks } from "./CallCenterTasks/CallCenterTasks";
 export { Breadcrumbs } from "./Breadcrumbs/Breadcrumbs";
+export { Calendar } from "./Calendar/Calendar";

package/dist/index.js

@@ -40,3 +40,4 @@ export { InfoTooltip } from "./InfoTooltip/InfoTooltip";
 export { ColorFlag } from "./ColorFlag/ColorFlag";
 export { CallCenterTasks } from "./CallCenterTasks/CallCenterTasks";
 export { Breadcrumbs } from "./Breadcrumbs/Breadcrumbs";
+export { Calendar } from "./Calendar/Calendar";

package/package.json

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