@kkkarsss/ui 1.5.4 → 1.5.6

package/dist/ui/controls/date-input/date-input.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Temporal } from '@js-temporal/polyfill';
 import { Calendar } from 'lucide-react';
 import { useRef, useState } from 'react';
 import { Dropdown } from '../../layout';
@@ -9,10 +10,12 @@ export const DateInput = ({ value, onChange, label, placeholder, size = 'm', dis
     const containerRef = useRef(null);
     const handleDateSelect = (date) => {
         if (date) {
-            const year = date.getFullYear();
-            const month = String(date.getMonth() + 1).padStart(2, '0');
-            const day = String(date.getDate()).padStart(2, '0');
-            onChange(`${year}-${month}-${day}`);
+            const plainDate = Temporal.PlainDate.from({
+                year: date.getFullYear(),
+                month: date.getMonth() + 1,
+                day: date.getDate(),
+            });
+            onChange(plainDate.toString());
             setIsOpen(false);
         }
     };

package/dist/ui/information/calendar-like/calendar-item-wrapper.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Temporal } from '@js-temporal/polyfill';
 import { useState } from 'react';
 import { jc } from '../../../utils';
 export const CalendarItemWrapper = ({ task, position, onDragStart, onDragEnd, onResize, renderTask, }) => {
@@ -8,9 +9,36 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onDragEnd, on
             e.preventDefault();
             e.stopPropagation();
             const startY = e.clientY;
-            const startHeight = (task.estimatedTime / 15) * 20;
-            const startHour = task.dueDate.getHours();
-            const startMinutes = task.dueDate.getMinutes();
+            const toISO = (d) => {
+                if (d instanceof Temporal.PlainDate || d instanceof Temporal.PlainDateTime || d instanceof Temporal.Instant)
+                    return d.toString().split('T')[0];
+                if (d instanceof Date)
+                    return d.toISOString().split('T')[0];
+                if (typeof d === 'string' && d.includes(' ')) {
+                    const parsed = new Date(d);
+                    if (!isNaN(parsed.getTime()))
+                        return parsed.toISOString().split('T')[0];
+                }
+                return String(d);
+            };
+            const dStart = task.dueDateStart instanceof Temporal.PlainDate
+                ? task.dueDateStart
+                : Temporal.PlainDate.from(toISO(task.dueDateStart));
+            const dEnd = task.dueDateEnd instanceof Temporal.PlainDate
+                ? task.dueDateEnd
+                : Temporal.PlainDate.from(toISO(task.dueDateEnd));
+            const tStart = task.dueTimeStart instanceof Temporal.PlainTime
+                ? task.dueTimeStart
+                : Temporal.PlainTime.from(String(task.dueTimeStart || '00:00'));
+            const tEnd = task.dueTimeEnd instanceof Temporal.PlainTime
+                ? task.dueTimeEnd
+                : Temporal.PlainTime.from(String(task.dueTimeEnd || '23:59'));
+            const dtStart = dStart.toPlainDateTime(tStart);
+            const dtEnd = dEnd.toPlainDateTime(tEnd);
+            const estimatedTime = Number(dtEnd.since(dtStart).total('minute'));
+            const startHeight = (estimatedTime / 15) * 20;
+            const startHour = tStart.hour;
+            const startMinutes = tStart.minute;
             const onMouseMove = (moveEvent) => {
                 const deltaY = moveEvent.clientY - startY;
                 let newHeight;
@@ -24,9 +52,9 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onDragEnd, on
                 else {
                     // Resizing top
                     const deltaMinutes = Math.round(deltaY / 20) * 15;
-                    newEstimatedTime = Math.max(15, task.estimatedTime - deltaMinutes);
+                    newEstimatedTime = Math.max(15, estimatedTime - deltaMinutes);
                     // If we hit min height, don't move the top further down
-                    const actualDeltaMinutes = task.estimatedTime - newEstimatedTime;
+                    const actualDeltaMinutes = estimatedTime - newEstimatedTime;
                     const totalStartMinutes = startHour * 60 + startMinutes + actualDeltaMinutes;
                     newStartHour = Math.floor(totalStartMinutes / 60);
                     newStartMinutes = totalStartMinutes % 60;
@@ -44,13 +72,13 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onDragEnd, on
                 }
                 else {
                     const deltaMinutes = Math.round(deltaY / 20) * 15;
-                    finalEstimatedTime = Math.max(15, task.estimatedTime - deltaMinutes);
-                    const actualDeltaMinutes = task.estimatedTime - finalEstimatedTime;
+                    finalEstimatedTime = Math.max(15, estimatedTime - deltaMinutes);
+                    const actualDeltaMinutes = estimatedTime - finalEstimatedTime;
                     const totalStartMinutes = startHour * 60 + startMinutes + actualDeltaMinutes;
                     finalStartHour = Math.floor(totalStartMinutes / 60);
                     finalStartMinutes = totalStartMinutes % 60;
                 }
-                if (finalEstimatedTime !== task.estimatedTime ||
+                if (finalEstimatedTime !== estimatedTime ||
                     finalStartHour !== startHour ||
                     finalStartMinutes !== startMinutes) {
                     onResize(task.id, finalEstimatedTime, finalStartHour, finalStartMinutes);
@@ -71,7 +99,10 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onDragEnd, on
     const displayHeight = preview ? `${(preview.estimatedTime / 15) * 20}px` : position.height;
     let displayTop = position.top;
     if (preview && (preview.startHour !== undefined || preview.startMinutes !== undefined)) {
-        const originalStartTotalMinutes = task.dueDate.getHours() * 60 + task.dueDate.getMinutes();
+        const tStart = task.dueTimeStart instanceof Temporal.PlainTime
+            ? task.dueTimeStart
+            : Temporal.PlainTime.from(String(task.dueTimeStart || '00:00'));
+        const originalStartTotalMinutes = tStart.hour * 60 + tStart.minute;
         const newStartTotalMinutes = preview.startHour * 60 + preview.startMinutes;
         const diffMinutes = newStartTotalMinutes - originalStartTotalMinutes;
         const diffPixels = (diffMinutes / 15) * 20;

package/dist/ui/information/calendar-like/calendar-like.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Temporal } from '@js-temporal/polyfill';
 import { useMemo, useState, useRef } from 'react';
 import { CalendarItemWrapper } from './calendar-item-wrapper';
 import { CalendarSlot } from './calendar-slot';
@@ -25,7 +26,32 @@ export const CalendarLike = ({ tasks, slots = DEFAULT_SLOTS, showCurrentTime = t
         setDraggingTask(task);
         e.dataTransfer.setData('taskId', task.id);
         e.dataTransfer.setData('taskTitle', task.title || '');
-        e.dataTransfer.setData('taskEstimatedTime', String(task.estimatedTime));
+        const toISO = (d) => {
+            if (d instanceof Temporal.PlainDate || d instanceof Temporal.PlainDateTime || d instanceof Temporal.Instant)
+                return d.toString().split('T')[0];
+            if (d instanceof Date)
+                return d.toISOString().split('T')[0];
+            if (typeof d === 'string' && d.includes(' ')) {
+                const parsed = new Date(d);
+                if (!isNaN(parsed.getTime()))
+                    return parsed.toISOString().split('T')[0];
+            }
+            return String(d);
+        };
+        const dStart = task.dueDateStart instanceof Temporal.PlainDate
+            ? task.dueDateStart
+            : Temporal.PlainDate.from(toISO(task.dueDateStart));
+        const dEnd = task.dueDateEnd instanceof Temporal.PlainDate ? task.dueDateEnd : Temporal.PlainDate.from(toISO(task.dueDateEnd));
+        const tStart = task.dueTimeStart instanceof Temporal.PlainTime
+            ? task.dueTimeStart
+            : Temporal.PlainTime.from(String(task.dueTimeStart || '00:00'));
+        const tEnd = task.dueTimeEnd instanceof Temporal.PlainTime
+            ? task.dueTimeEnd
+            : Temporal.PlainTime.from(String(task.dueTimeEnd || '23:59'));
+        const dtStart = dStart.toPlainDateTime(tStart);
+        const dtEnd = dEnd.toPlainDateTime(tEnd);
+        const estimatedTime = Number(dtEnd.since(dtStart).total('minute'));
+        e.dataTransfer.setData('taskEstimatedTime', String(estimatedTime));
         if (task.color) {
             e.dataTransfer.setData('taskColor', task.color);
         }
@@ -48,8 +74,14 @@ export const CalendarLike = ({ tasks, slots = DEFAULT_SLOTS, showCurrentTime = t
                 const overlappingTasksCount = tasks.filter((task) => {
                     if (draggingTask && task.id === draggingTask.id)
                         return false;
-                    const taskStart = task.dueDate.getHours() * 60 + task.dueDate.getMinutes();
-                    const taskEnd = taskStart + task.estimatedTime;
+                    const tStart = task.dueTimeStart instanceof Temporal.PlainTime
+                        ? task.dueTimeStart
+                        : Temporal.PlainTime.from(String(task.dueTimeStart || '00:00'));
+                    const tEnd = task.dueTimeEnd instanceof Temporal.PlainTime
+                        ? task.dueTimeEnd
+                        : Temporal.PlainTime.from(String(task.dueTimeEnd || '23:59'));
+                    const taskStart = tStart.hour * 60 + tStart.minute;
+                    const taskEnd = tEnd.hour * 60 + tEnd.minute;
                     return currentSlotTime >= taskStart && currentSlotTime < taskEnd;
                 }).length;
                 return (_jsx(CalendarSlot, { slotIndex: slotIndex, onDrop: handleDrop, onCreateTask: onCreateTask, renderTask: renderTask, overlappingTasksCount: overlappingTasksCount, draggingTask: draggingTask || undefined, children: tasksForSlot?.map((task) => (_jsx(CalendarItemWrapper, { task: task, position: task.position, onDragStart: (e) => handleDragStart(e, task), onDragEnd: handleDragEnd, onResize: onTaskResize, renderTask: renderTask }, task.id))) }, slotIndex));

package/dist/ui/information/calendar-like/calendar-like.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Temporal } from '@js-temporal/polyfill';
 import { Circle, CircleCheckBig } from 'lucide-react';
 import { useState } from 'react';
 import { CalendarLike, CalendarItem } from './calendar-like';
@@ -10,48 +11,59 @@ const meta = {
     tags: ['autodocs'],
 };
 export default meta;
-const getTodayAtHour = (hour, minutes = 0) => {
-    const date = new Date();
-    date.setHours(hour, minutes, 0, 0);
-    return date;
+const getTodayAtHour = (_hour, _minutes = 0) => {
+    return Temporal.Now.plainDateISO();
+};
+const getTodayTimeAtHour = (hour, minutes = 0) => {
+    return Temporal.PlainTime.from({ hour, minute: minutes });
 };
 const INITIAL_TASKS = [
     {
         id: '1',
         title: 'Утренняя почта',
         description: 'Проверить входящие и ответить на важные письма',
-        dueDate: getTodayAtHour(9),
-        estimatedTime: 45,
+        dueDateStart: getTodayAtHour(9),
+        dueDateEnd: getTodayAtHour(9),
+        dueTimeStart: getTodayTimeAtHour(9),
+        dueTimeEnd: getTodayTimeAtHour(9, 45),
         color: '#3b82f6',
     },
     {
         id: '2',
         title: 'Стендап',
-        dueDate: getTodayAtHour(10),
-        estimatedTime: 15,
+        dueDateStart: getTodayAtHour(10),
+        dueDateEnd: getTodayAtHour(10),
+        dueTimeStart: getTodayTimeAtHour(10),
+        dueTimeEnd: getTodayTimeAtHour(10, 15),
         color: '#10b981',
         isInWork: true,
     },
     {
         id: '3',
         title: 'Обед',
-        dueDate: getTodayAtHour(13),
-        estimatedTime: 60,
+        dueDateStart: getTodayAtHour(13),
+        dueDateEnd: getTodayAtHour(13),
+        dueTimeStart: getTodayTimeAtHour(13),
+        dueTimeEnd: getTodayTimeAtHour(14),
         color: '#f59e0b',
     },
     {
         id: '4',
         title: 'Разработка фичи',
         description: 'Реализация логики календаря',
-        dueDate: getTodayAtHour(14),
-        estimatedTime: 120,
+        dueDateStart: getTodayAtHour(14),
+        dueDateEnd: getTodayAtHour(14),
+        dueTimeStart: getTodayTimeAtHour(14),
+        dueTimeEnd: getTodayTimeAtHour(16),
         color: '#8b5cf6',
     },
     {
         id: '5',
         title: 'Завершенная задача',
-        dueDate: getTodayAtHour(17),
-        estimatedTime: 30,
+        dueDateStart: getTodayAtHour(17),
+        dueDateEnd: getTodayAtHour(17),
+        dueTimeStart: getTodayTimeAtHour(17),
+        dueTimeEnd: getTodayTimeAtHour(17, 30),
         isCompleted: true,
         color: '#8b5cf6',
     },
@@ -65,10 +77,18 @@ export const Interactive = {
             console.log(`Task ${taskId} dropped at ${hour}:${minutes}`);
             setTasks((prev) => prev.map((t) => {
                 if (t.id === taskId) {
-                    const newDate = new Date(t.dueDate);
-                    // Storybook handles the date update
-                    newDate.setHours(hour, minutes, 0, 0);
-                    return { ...t, dueDate: newDate };
+                    const dtStart = t.dueDateStart.toPlainDateTime(t.dueTimeStart || Temporal.PlainTime.from('00:00'));
+                    const dtEnd = (t.dueDateEnd || t.dueDateStart).toPlainDateTime(t.dueTimeEnd || Temporal.PlainTime.from('23:59'));
+                    const duration = dtEnd.since(dtStart);
+                    const newDtStart = t.dueDateStart.toPlainDateTime(Temporal.PlainTime.from({ hour, minute: minutes }));
+                    const newDtEnd = newDtStart.add(duration);
+                    return {
+                        ...t,
+                        dueDateStart: newDtStart.toPlainDate(),
+                        dueDateEnd: newDtEnd.toPlainDate(),
+                        dueTimeStart: newDtStart.toPlainTime(),
+                        dueTimeEnd: newDtEnd.toPlainTime(),
+                    };
                 }
                 return t;
             }));
@@ -77,24 +97,36 @@ export const Interactive = {
             console.log(`Task ${taskId} resized to ${newEstimatedTime} minutes. New start: ${newStartHour}:${newStartMinutes}`);
             setTasks((prev) => prev.map((t) => {
                 if (t.id === taskId) {
-                    const newTask = { ...t, estimatedTime: newEstimatedTime };
+                    let newDtStart;
                     if (newStartHour !== undefined && newStartMinutes !== undefined) {
-                        const newDate = new Date(t.dueDate);
-                        newDate.setHours(newStartHour, newStartMinutes, 0, 0);
-                        newTask.dueDate = newDate;
+                        newDtStart = t.dueDateStart.toPlainDateTime(Temporal.PlainTime.from({ hour: newStartHour, minute: newStartMinutes }));
+                    }
+                    else {
+                        newDtStart = t.dueDateStart.toPlainDateTime(t.dueTimeStart || Temporal.PlainTime.from('00:00'));
                     }
-                    return newTask;
+                    const newDtEnd = newDtStart.add({ minutes: newEstimatedTime });
+                    return {
+                        ...t,
+                        dueDateStart: newDtStart.toPlainDate(),
+                        dueDateEnd: newDtEnd.toPlainDate(),
+                        dueTimeStart: newDtStart.toPlainTime(),
+                        dueTimeEnd: newDtEnd.toPlainTime(),
+                    };
                 }
                 return t;
             }));
         };
         const handleCreateTask = (hour, minutes, estimatedTime) => {
             console.log(`Create task at ${hour}:${minutes} with duration ${estimatedTime}`);
+            const dtStart = Temporal.Now.plainDateISO().toPlainDateTime(Temporal.PlainTime.from({ hour, minute: minutes }));
+            const dtEnd = dtStart.add({ minutes: estimatedTime });
             const newTask = {
                 id: Math.random().toString(36).substr(2, 9),
                 title: 'Новая задача',
-                dueDate: getTodayAtHour(hour, minutes),
-                estimatedTime,
+                dueDateStart: dtStart.toPlainDate(),
+                dueDateEnd: dtEnd.toPlainDate(),
+                dueTimeStart: dtStart.toPlainTime(),
+                dueTimeEnd: dtEnd.toPlainTime(),
                 color: '#8b5cf6',
             };
             setTasks((prev) => [...prev, newTask]);

package/dist/ui/information/calendar-like/calendar-slot.js

@@ -1,4 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Temporal } from '@js-temporal/polyfill';
 import { animated, config, useSpring } from '@react-spring/web';
 import { useState } from 'react';
 import { jc } from '../../../utils';
@@ -12,7 +13,41 @@ export const CalendarSlot = ({ slotIndex, onDrop, onCreateTask, renderTask, chil
     const springs = useSpring({
         to: {
             opacity: dragOverInfo ? 1 : 0.6,
-            height: dragOverInfo ? `${(dragOverInfo.task.estimatedTime / 15) * 20}px` : '40px',
+            height: dragOverInfo
+                ? (() => {
+                    const toISO = (d) => {
+                        if (d instanceof Temporal.PlainDate ||
+                            d instanceof Temporal.PlainDateTime ||
+                            d instanceof Temporal.Instant)
+                            return d.toString().split('T')[0];
+                        if (d instanceof Date)
+                            return d.toISOString().split('T')[0];
+                        if (typeof d === 'string' && d.includes(' ')) {
+                            const parsed = new Date(d);
+                            if (!isNaN(parsed.getTime()))
+                                return parsed.toISOString().split('T')[0];
+                        }
+                        return String(d);
+                    };
+                    const task = dragOverInfo.task;
+                    const dStart = task.dueDateStart instanceof Temporal.PlainDate
+                        ? task.dueDateStart
+                        : Temporal.PlainDate.from(toISO(task.dueDateStart));
+                    const dEnd = task.dueDateEnd instanceof Temporal.PlainDate
+                        ? task.dueDateEnd
+                        : Temporal.PlainDate.from(toISO(task.dueDateEnd));
+                    const tStart = task.dueTimeStart instanceof Temporal.PlainTime
+                        ? task.dueTimeStart
+                        : Temporal.PlainTime.from(String(task.dueTimeStart || '00:00'));
+                    const tEnd = task.dueTimeEnd instanceof Temporal.PlainTime
+                        ? task.dueTimeEnd
+                        : Temporal.PlainTime.from(String(task.dueTimeEnd || '23:59'));
+                    const dtStart = dStart.toPlainDateTime(tStart);
+                    const dtEnd = dEnd.toPlainDateTime(tEnd);
+                    const minutes = Number(dtEnd.since(dtStart).total('minute'));
+                    return `${(minutes / 15) * 20}px`;
+                })()
+                : '40px',
         },
         config: { ...config.stiff, precision: 0.001 },
     });
@@ -81,8 +116,12 @@ export const CalendarSlot = ({ slotIndex, onDrop, onCreateTask, renderTask, chil
                         }, children: renderTask ? (renderTask({
                             id: 'new-task-preview',
                             title: 'Новая задача',
-                            dueDate: new Date(new Date().setHours(hour, minutes, 0, 0)),
-                            estimatedTime: selection.currentEstimatedTime,
+                            dueDateStart: Temporal.Now.plainDateISO(),
+                            dueTimeStart: Temporal.PlainTime.from({ hour, minute: minutes }),
+                            dueDateEnd: Temporal.Now.plainDateISO(),
+                            dueTimeEnd: Temporal.PlainTime.from({ hour, minute: minutes }).add({
+                                minutes: selection.currentEstimatedTime,
+                            }),
                             color: 'white',
                         })) : (_jsxs("div", { className: "border rounded-sm h-full p-1", children: [_jsx(Typo, { size: "xs", weight: "500", children: "\u041D\u043E\u0432\u0430\u044F \u0437\u0430\u0434\u0430\u0447\u0430" }), _jsxs(Typo, { size: "xs", color: "secondary", children: [selection.currentEstimatedTime, " \u043C\u0438\u043D"] })] })) }))] })] }));
 };

package/dist/ui/information/calendar-like/types.d.ts

@@ -1,8 +1,9 @@
+import { Temporal } from '@js-temporal/polyfill';
 import { ReactNode } from 'react';
 export type TCalendarTask = {
     id: string;
-    dueDate: Date;
-    estimatedTime: number;
+    dueDateStart: Temporal.PlainDate;
+    dueDateEnd: Temporal.PlainDate;
     [key: string]: any;
 };
 export type TCalendarTaskWithPosition = TCalendarTask & {

package/dist/ui/information/calendar-like/use-auto-scroll.js

@@ -1,3 +1,4 @@
+import { Temporal } from '@js-temporal/polyfill';
 import { useEffect } from 'react';
 export const useAutoScroll = (containerRef, enabled, topOffset) => {
     useEffect(() => {
@@ -5,9 +6,9 @@ export const useAutoScroll = (containerRef, enabled, topOffset) => {
             const scroll = (retryCount = 0) => {
                 if (!containerRef.current)
                     return;
-                const now = new Date();
-                const hours = now.getHours();
-                const minutes = now.getMinutes();
+                const now = Temporal.Now.plainTimeISO();
+                const hours = now.hour;
+                const minutes = now.minute;
                 const totalMinutes = hours * 60 + minutes;
                 // Находим ближайший скроллируемый родитель или используем окно
                 const scrollParent = (node) => {

package/dist/ui/information/calendar-like/use-current-time.d.ts

@@ -1,4 +1,5 @@
+import { Temporal } from '@js-temporal/polyfill';
 export declare const useCurrentTime: (updateInterval?: number) => {
-    now: Date;
+    now: Temporal.PlainTime;
     topOffset: number;
 };

package/dist/ui/information/calendar-like/use-current-time.js

@@ -1,15 +1,16 @@
+import { Temporal } from '@js-temporal/polyfill';
 import { useState, useEffect, useMemo } from 'react';
 export const useCurrentTime = (updateInterval = 60000) => {
-    const [now, setNow] = useState(new Date());
+    const [now, setNow] = useState(Temporal.Now.plainTimeISO());
     useEffect(() => {
         const interval = setInterval(() => {
-            setNow(new Date());
+            setNow(Temporal.Now.plainTimeISO());
         }, updateInterval);
         return () => clearInterval(interval);
     }, [updateInterval]);
     const topOffset = useMemo(() => {
-        const hours = now.getHours();
-        const minutes = now.getMinutes();
+        const hours = now.hour;
+        const minutes = now.minute;
         const totalMinutes = hours * 60 + minutes;
         // 15 минут = 20 пикселей (высота слота)
         return totalMinutes * (20 / 15);

package/dist/ui/information/calendar-like/utils.js

@@ -1,19 +1,39 @@
+import { Temporal } from '@js-temporal/polyfill';
+const toDateTime = (date, time) => {
+    const toISO = (d) => {
+        if (d instanceof Temporal.PlainDate || d instanceof Temporal.PlainDateTime || d instanceof Temporal.Instant)
+            return d.toString().split('T')[0];
+        if (d instanceof Date)
+            return d.toISOString().split('T')[0];
+        if (typeof d === 'string' && d.includes(' ')) {
+            const parsed = new Date(d);
+            if (!isNaN(parsed.getTime()))
+                return parsed.toISOString().split('T')[0];
+        }
+        return String(d);
+    };
+    const d = date instanceof Temporal.PlainDate ? date : Temporal.PlainDate.from(toISO(date));
+    const t = time instanceof Temporal.PlainTime ? time : Temporal.PlainTime.from(String(time || '00:00'));
+    return d.toPlainDateTime(t);
+};
 export const calculateTaskPositions = (tasks) => {
     const tasksToRender = [...tasks]
-        .map((t) => ({
-        ...t,
-        dueDate: t.dueDate instanceof Date ? t.dueDate : new Date(t.dueDate),
-    }))
-        .filter((t) => t.dueDate && !isNaN(t.dueDate.getTime()))
-        .sort((a, b) => a.dueDate.getTime() - b.dueDate.getTime());
+        .map((t) => {
+        const dtStart = toDateTime(t.dueDateStart, t.dueTimeStart);
+        const dtEnd = toDateTime(t.dueDateEnd, t.dueTimeEnd);
+        return {
+            ...t,
+            dtStart,
+            dtEnd,
+        };
+    })
+        .sort((a, b) => Temporal.PlainDateTime.compare(a.dtStart, b.dtStart));
     const columns = [];
     tasksToRender.forEach((task) => {
-        const startTime = task.dueDate.getTime();
         let placed = false;
         for (const column of columns) {
             const lastTask = column[column.length - 1];
-            const lastEndTime = lastTask.dueDate.getTime() + lastTask.estimatedTime * 60 * 1000;
-            if (startTime >= lastEndTime) {
+            if (Temporal.PlainDateTime.compare(task.dtStart, lastTask.dtEnd) >= 0) {
                 column.push(task);
                 placed = true;
                 break;
@@ -25,24 +45,27 @@ export const calculateTaskPositions = (tasks) => {
     });
     const clusters = [];
     let currentCluster = [];
-    let clusterMaxEndTime = 0;
+    let clusterMaxEndTime = null;
     columns.forEach((column) => {
-        let columnMinStartTime = Infinity;
+        let columnMinStartTime = null;
         column.forEach((t) => {
-            const start = t.dueDate.getTime();
-            if (start < columnMinStartTime)
-                columnMinStartTime = start;
+            if (!columnMinStartTime || Temporal.PlainDateTime.compare(t.dtStart, columnMinStartTime) < 0) {
+                columnMinStartTime = t.dtStart;
+            }
         });
-        if (columnMinStartTime >= clusterMaxEndTime && currentCluster.length > 0) {
+        if (clusterMaxEndTime &&
+            columnMinStartTime &&
+            Temporal.PlainDateTime.compare(columnMinStartTime, clusterMaxEndTime) >= 0 &&
+            currentCluster.length > 0) {
             clusters.push(currentCluster);
             currentCluster = [];
-            clusterMaxEndTime = 0;
+            clusterMaxEndTime = null;
         }
         currentCluster.push(column);
         column.forEach((t) => {
-            const end = t.dueDate.getTime() + t.estimatedTime * 60 * 1000;
-            if (end > clusterMaxEndTime)
-                clusterMaxEndTime = end;
+            if (!clusterMaxEndTime || Temporal.PlainDateTime.compare(t.dtEnd, clusterMaxEndTime) > 0) {
+                clusterMaxEndTime = t.dtEnd;
+            }
         });
     });
     if (currentCluster.length > 0)
@@ -55,11 +78,12 @@ export const calculateTaskPositions = (tasks) => {
                 const width = clusterColumnsCount > 1 ? `${100 / clusterColumnsCount}%` : '100%';
                 const left = clusterColumnsCount > 1 ? `${(colIndex * 100) / clusterColumnsCount}%` : '0%';
                 // Расчитываем смещение внутри 15-минутного слота
-                const minutes = task.dueDate.getMinutes();
+                const minutes = task.dtStart.minute;
                 const minutesInSlot = minutes % 15;
                 const topOffset = (minutesInSlot / 15) * 20;
-                const top = `${Math.round(topOffset)}px`; // Округляем для надежности, но по идее minutesInSlot должен быть 0 если все по сетке
-                const height = `${Math.round((Math.max(15, task.estimatedTime || 15) / 15) * 20)}px`;
+                const top = `${Math.round(topOffset)}px`;
+                const diffMinutes = Math.round(Number(task.dtEnd.since(task.dtStart).total('minute')));
+                const height = `${Math.round((Math.max(15, diffMinutes || 15) / 15) * 20)}px`;
                 result.push({
                     ...task,
                     position: { width, left, top, height },
@@ -72,8 +96,9 @@ export const calculateTaskPositions = (tasks) => {
 export const groupTasksBySlot = (tasksWithPosition) => {
     const map = {};
     tasksWithPosition.forEach((task) => {
-        const hour = task.dueDate.getHours();
-        const minutes = task.dueDate.getMinutes();
+        const dtStart = toDateTime(task.dueDateStart, task.dueTimeStart);
+        const hour = dtStart.hour;
+        const minutes = dtStart.minute;
         const slotIndex = hour * 4 + Math.floor(minutes / 15);
         if (!map[slotIndex])
             map[slotIndex] = [];

package/dist/ui/layout/main-page-layout/main-page-layout.js

@@ -8,5 +8,5 @@ import { IconAction } from '../icon-action/icon-action';
 export const MainPageLayout = ({ children, leftPanel, rightPanel, leftIcon, rightIcon, }) => {
     const { widget } = useWidget();
     const { expandedPanel, toggleLeftPanel, toggleRightPanel } = useLayout();
-    return (_jsx("div", { className: "@container w-full h-[100dvh]", children: _jsxs("main", { className: "grid h-full w-full grid-cols-1 @s:grid-cols-[300px_1fr_300px] @s:py-xl @s:px-l @s:gap-l py-m px-s gap-s relative overflow-hidden", children: [_jsx("aside", { className: "hidden @s:block h-full w-full", children: leftPanel }), _jsx("div", { className: "@s:hidden absolute left-4 top-4 z-50", children: _jsx(IconAction, { icon: expandedPanel === 'left' ? _jsx(X, { size: 20 }) : leftIcon || _jsx(Menu, { size: 20 }), onClick: toggleLeftPanel }) }), _jsxs(Flex, { direction: 'column', justify: 'center', gap: '16px', type: 'fill', className: jc(expandedPanel ? 'hidden @s:flex' : 'flex', 'h-full mt-[50px] @s:m-0', '@s:flex-row @s:items-stretch'), children: [!widget?.isFullWidth && (_jsx("div", { className: jc('h-[100dvh] scrollbar-none overflow-auto', '@s:flex-1', widget ? 'hidden @s:block' : 'block'), children: children })), widget && (_jsx("div", { className: jc('flex-1 min-h-0 h-full w-full', !widget.isFullWidth && '@s:flex-initial @s:w-[360px]'), children: _jsx(Fragment, { children: widget.ui }, widget.id) }))] }), _jsx("aside", { className: "hidden @s:block h-full w-full", children: rightPanel }), _jsx("div", { className: "@s:hidden absolute right-4 top-4 z-50", children: _jsx(IconAction, { icon: expandedPanel === 'right' ? _jsx(X, { size: 20 }) : rightIcon || _jsx(Menu, { size: 20 }), onClick: toggleRightPanel }) }), expandedPanel && (_jsx("div", { className: "@s:hidden absolute inset-0 z-40 bg-background pt-16 px-4 pb-4 overflow-auto", children: expandedPanel === 'left' ? leftPanel : rightPanel }))] }) }));
+    return (_jsx("div", { className: "@container w-full h-[100dvh]", children: _jsxs("main", { className: "grid h-full w-full grid-cols-1 @s:grid-cols-[300px_1fr_300px] @s:py-xl @s:px-l @s:gap-l py-m px-s gap-s relative overflow-hidden", children: [_jsx("aside", { className: "hidden @s:block h-full w-full", children: leftPanel }), _jsx("div", { className: "@s:hidden absolute left-4 top-4 z-50", children: _jsx(IconAction, { icon: expandedPanel === 'left' ? _jsx(X, { size: 20 }) : leftIcon || _jsx(Menu, { size: 20 }), onClick: toggleLeftPanel }) }), _jsxs(Flex, { direction: 'column', justify: 'center', gap: '16px', type: 'fill', className: jc(expandedPanel ? 'hidden @s:flex' : 'flex', 'h-full mt-[50px] @s:m-0', '@s:flex-row @s:items-stretch'), children: [!widget?.isFullWidth && (_jsx("div", { className: jc('min-h-0 h-full scrollbar-none overflow-auto', '@s:flex-1', widget ? 'hidden @s:block' : 'block'), children: children })), widget && (_jsx("div", { className: jc('flex-1 min-h-0 h-full w-full', !widget.isFullWidth && '@s:flex-initial @s:w-[360px]'), children: _jsx(Fragment, { children: widget.ui }, widget.id) }))] }), _jsx("aside", { className: "hidden @s:block h-full w-full", children: rightPanel }), _jsx("div", { className: "@s:hidden absolute right-4 top-4 z-50", children: _jsx(IconAction, { icon: expandedPanel === 'right' ? _jsx(X, { size: 20 }) : rightIcon || _jsx(Menu, { size: 20 }), onClick: toggleRightPanel }) }), expandedPanel && (_jsx("div", { className: "@s:hidden absolute inset-0 z-40 bg-background pt-16 px-4 pb-4 overflow-auto", children: expandedPanel === 'left' ? leftPanel : rightPanel }))] }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kkkarsss/ui",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "description": "UI Kit for kkkarsss projects",
   "type": "module",
   "main": "dist/index.js",
@@ -33,7 +33,6 @@
     "@storybook/react": "^10.2.7",
     "@storybook/react-vite": "^10.2.7",
     "@tailwindcss/container-queries": "^0.1.1",
-    "tailwindcss": "^3.4.19",
     "@types/node": "^25.0.10",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
@@ -55,12 +54,14 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "storybook": "^10.2.7",
+    "tailwindcss": "^3.4.19",
     "typescript": "5.9.3",
     "typescript-eslint": "^8.53.1",
     "vite": "^7.3.1",
     "vitest": "^4.0.18"
   },
   "dependencies": {
+    "@js-temporal/polyfill": "^0.5.1",
     "@react-spring/web": "^10.0.3",
     "date-fns": "^4.1.0",
     "react-datepicker": "^9.1.0",