@kkkarsss/ui 1.2.2 → 1.3.0

package/dist/ui/controls/button/button.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { animated, useSpring, config } from '@react-spring/web';
+import { useState } from 'react';
 import { jc } from '../../../utils';
 import { Typo } from '../../information';
 const variantMap = {
@@ -7,5 +9,10 @@ const variantMap = {
     selling: 'bg-accent text-accent-foreground',
 };
 export const Button = ({ children, onClick, variant = 'active', disabled = false }) => {
-    return (_jsx("button", { className: jc('w-auto px-4 py-2 text-[14px] font-medium border border-transparent cursor-pointer outline-none transition-opacity duration-200', 'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none hover:not-disabled:opacity-90', variantMap[variant]), onClick: onClick, disabled: disabled, children: _jsx(Typo, { size: 'm', children: children }) }));
+    const [pressed, setPressed] = useState(false);
+    const springs = useSpring({
+        transform: pressed ? 'scale(0.96)' : 'scale(1)',
+        config: config.stiff,
+    });
+    return (_jsx(animated.button, { style: springs, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), onMouseLeave: () => setPressed(false), className: jc('w-auto px-4 py-2 text-[14px] font-medium border border-transparent cursor-pointer outline-none', 'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none hover:not-disabled:opacity-90', variantMap[variant]), onClick: onClick, disabled: disabled, children: _jsx(Typo, { size: 'm', children: children }) }));
 };

package/dist/ui/controls/chip/chip.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Activity, createElement } from 'react';
+import { animated, config, useSpring } from '@react-spring/web';
+import { Activity, createElement, useState } from 'react';
 import { jc } from '../../../utils';
 const variantMap = {
     default: 'bg-secondary text-secondary-foreground',
@@ -7,5 +8,10 @@ const variantMap = {
     secondary: 'bg-transparent text-secondary-foreground border border-secondary-foreground',
 };
 export const Chip = ({ children, onClick, accLeft, variant = 'default' }) => {
-    return (_jsxs("button", { onClick: onClick, className: jc('flex items-center text-nowrap gap-[5px] w-min px-2 py-1 rounded-2xl outline-none border-none cursor-pointer text-[14px]', variantMap[variant]), children: [_jsx(Activity, { mode: accLeft ? 'visible' : 'hidden', children: accLeft ? createElement(accLeft, { size: 14, color: 'white', strokeWidth: 3 }) : null }), children] }));
+    const [pressed, setPressed] = useState(false);
+    const springs = useSpring({
+        transform: pressed ? 'scale(0.95)' : 'scale(1)',
+        config: config.stiff,
+    });
+    return (_jsxs(animated.button, { style: springs, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), onMouseLeave: () => setPressed(false), onClick: onClick, className: jc('flex items-center text-nowrap gap-[5px] w-min px-2 py-1 rounded-2xl outline-none border-none cursor-pointer text-[14px]', variantMap[variant]), children: [_jsx(Activity, { mode: accLeft ? 'visible' : 'hidden', children: accLeft ? createElement(accLeft, { size: 14, color: 'white', strokeWidth: 3 }) : null }), children] }));
 };

package/dist/ui/information/block/block.d.ts

@@ -9,5 +9,6 @@ export type TBlockProps = PropsWithChildren<{
     maxHeight?: number | string;
     minWidth?: number | string;
     minHeight?: number | string;
+    animate?: boolean;
 }>;
 export declare const Block: FC<TBlockProps>;

package/dist/ui/information/block/block.js

@@ -1,10 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { animated, config, useSpring } from '@react-spring/web';
 import { jc } from '../../../utils';
 import { Flex, Offset } from '../../layout';
 const typeMap = {
     fill: 'h-full',
     hug: 'h-auto',
 };
-export const Block = ({ children, title, topAcc, filters, type = 'fill', maxWidth, maxHeight, minWidth, minHeight, }) => {
-    return (_jsxs("div", { className: jc('w-full flex flex-col', 'rounded-2xl', 'bg-background-accent', 'shadow-[0_0_8px_var(--shadow)]', 'scrollbar-none', 'overflow-hidden', typeMap[type]), style: { maxWidth, maxHeight, minWidth, minHeight }, children: [_jsx("div", { className: jc('sticky', 'top-0', 'z-20', 'bg-background-accent', 'w-full', 'shrink-0'), children: _jsxs(Flex, { direction: 'column', children: [_jsxs(Flex, { justify: 'space-between', align: 'center', children: [title && _jsx(Offset, { type: 'both', children: title }), _jsx("div", { className: 'mx-m', children: _jsx(Flex, { direction: 'column', children: _jsx(Flex, { align: 'center', gap: '4px', children: topAcc }) }) })] }), filters && _jsx("div", { className: 'mb-l', children: filters })] }) }), _jsx("div", { className: "flex-1 overflow-auto scrollbar-none", children: _jsx(Flex, { direction: 'column', type: 'fill', children: children }) })] }));
+export const Block = ({ children, title, topAcc, filters, type = 'fill', maxWidth, maxHeight, minWidth, minHeight, animate = true, }) => {
+    const springs = useSpring({
+        from: { opacity: 0, transform: 'translateY(10px)' },
+        to: { opacity: 1, transform: 'translateY(0px)' },
+        config: config.gentle,
+        immediate: !animate,
+    });
+    return (_jsxs(animated.div, { className: jc('w-full flex flex-col', 'rounded-2xl', 'bg-background-accent', 'shadow-[0_0_8px_var(--shadow)]', 'scrollbar-none', 'overflow-hidden', typeMap[type]), style: { ...springs, maxWidth, maxHeight, minWidth, minHeight }, children: [_jsx("div", { className: jc('sticky', 'top-0', 'z-20', 'bg-background-accent', 'w-full', 'shrink-0'), children: _jsxs(Flex, { direction: 'column', children: [_jsxs(Flex, { justify: 'space-between', align: 'center', children: [title && _jsx(Offset, { type: 'both', children: title }), _jsx("div", { className: 'mx-m', children: _jsx(Flex, { direction: 'column', children: _jsx(Flex, { align: 'center', gap: '4px', children: topAcc }) }) })] }), filters && _jsx("div", { className: 'mb-l', children: filters })] }) }), _jsx("div", { className: "flex-1 overflow-auto scrollbar-none", children: _jsx(Flex, { direction: 'column', type: 'fill', children: children }) })] }));
 };

package/dist/ui/information/calendar-like/calendar-item-wrapper.d.ts

@@ -12,5 +12,6 @@ export type TCalendarItemWrapperProps = {
     onDragEnd?: (e: DragEvent<HTMLDivElement>, id: string) => void;
     onResize?: (id: string, newEstimatedTime: number) => void;
     renderTask: (task: TCalendarTask) => ReactNode;
+    overlappingTasksCount?: number;
 };
 export declare const CalendarItemWrapper: FC<TCalendarItemWrapperProps>;

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

@@ -38,6 +38,7 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onDragEnd, on
     };
     const displayHeight = previewEstimatedTime ? `${(previewEstimatedTime / 15) * 20}px` : position.height;
     return (_jsx("div", { draggable: !!onDragStart, onDragStart: (e) => {
+            console.log('CalendarItemWrapper: onDragStart', task.id);
             onDragStart?.(e, task.id);
             const el = e.currentTarget;
             // Создаем пустой элемент для скрытия стандартного ghost image браузера
@@ -47,11 +48,12 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onDragEnd, on
             if (el) {
                 // Используем setTimeout, чтобы прозрачность и pointer-events применились после того, как браузер создаст ghost image
                 setTimeout(() => {
-                    el.style.opacity = '0';
+                    el.style.opacity = '0.4';
                     el.style.pointerEvents = 'none';
                 }, 0);
             }
         }, onDragEnd: (e) => {
+            console.log('CalendarItemWrapper: onDragEnd');
             onDragEnd?.(e, task.id);
             const el = e.currentTarget;
             if (el) {
@@ -63,5 +65,5 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onDragEnd, on
             width: position.width,
             left: position.left,
             top: position.top,
-        }, className: jc('calendar-item absolute p-[2px] transition-[height,width,left,opacity] flex flex-col z-50 select-none', onDragStart ? 'cursor-move' : '', 'hover:z-[60]', previewEstimatedTime !== null ? 'transition-none z-[60]' : ''), children: _jsxs("div", { className: "w-full h-full relative group/item", children: [renderTask(task), onResize && (_jsx("div", { className: "absolute bottom-0 left-0 right-1 h-2 cursor-ns-resize group/resize flex items-center justify-center z-[70]", onMouseDown: handleMouseDown, children: _jsx("div", { className: "w-8 h-1 bg-accent/30 rounded-full opacity-0 group-hover/resize:opacity-100 transition-opacity" }) }))] }) }));
+        }, className: jc('calendar-item absolute p-[2px] transition-[height,width,left,opacity] flex flex-col z-50 select-none', onDragStart ? 'cursor-move' : '', 'hover:z-[60]', previewEstimatedTime !== null ? 'transition-none z-[60]' : '', 'active:z-[100]'), children: _jsxs("div", { className: "w-full h-full relative group/item", children: [renderTask(task), onResize && (_jsx("div", { className: "absolute bottom-0 left-0 right-1 h-2 cursor-ns-resize group/resize flex items-center justify-center z-[70]", onMouseDown: handleMouseDown, children: _jsx("div", { className: "w-8 h-1 bg-accent/30 rounded-full opacity-0 group-hover/resize:opacity-100 transition-opacity" }) }))] }) }));
 };

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

@@ -1,10 +1,7 @@
 import { type FC, type ReactNode } from 'react';
 export type TCalendarItemProps = {
     title: ReactNode;
-    isCompleted?: boolean;
-    isInWork?: boolean;
     onClick?: () => void;
-    icon?: ReactNode;
     color?: string;
     className?: string;
 };

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

@@ -1,9 +1,18 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { animated, config, useSpring } from '@react-spring/web';
+import { useState } from 'react';
 import { jc } from '../../../utils';
 import { Flex } from '../../layout';
-export const CalendarItem = ({ title, isCompleted, isInWork, icon, color, className }) => {
-    return (_jsx("div", { className: jc('w-full h-full rounded-[8px] border flex flex-col transition-colors relative', !color && (isCompleted ? 'border-secondary bg-accent' : 'border-accent bg-accent'), className), style: {
-            backgroundColor: color ? color : undefined,
-            borderColor: color ? color : undefined,
-        }, children: _jsx(Flex, { gap: "8px", align: "center", justify: "space-between", type: "fill", children: _jsxs(Flex, { gap: "8px", align: "center", type: "fill", className: "min-w-0 flex-1", children: [title, isInWork && icon] }) }) }));
+export const CalendarItem = ({ title, color, className, onClick }) => {
+    const [pressed, setPressed] = useState(false);
+    const springs = useSpring({
+        transform: pressed ? 'scale(0.98)' : 'scale(1)',
+        config: config.stiff,
+    });
+    return (_jsx(animated.div, { style: {
+            ...springs,
+            backgroundColor: color ? `${color}ac` : undefined,
+            border: 0,
+            borderLeft: `3px solid ${color}`,
+        }, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), onMouseLeave: () => setPressed(false), onClick: onClick, className: jc('w-full h-full rounded-[8px] border flex flex-col transition-colors relative', onClick && 'cursor-pointer', className), children: _jsx(Flex, { gap: "8px", align: "center", justify: "space-between", type: "fill", children: _jsx(Flex, { gap: "8px", align: "center", type: "fill", className: "min-w-0 flex-1", children: title }) }) }));
 };

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

@@ -23,7 +23,7 @@ const CurrentTimeLine = () => {
         // 15 минут = 20 пикселей (высота слота)
         return totalMinutes * (20 / 15);
     }, [now]);
-    return (_jsxs("div", { className: "absolute left-0 right-0 z-50 pointer-events-none flex items-center", style: { top: `${topOffset}px` }, children: [_jsx("div", { className: "w-2 h-2 rounded-full bg-red-500 -ml-1" }), _jsx("div", { className: "flex-1 h-[2px] bg-red-500" })] }));
+    return (_jsxs("div", { className: "absolute left-0 right-0 z-[101] pointer-events-none flex items-center", style: { top: `${topOffset}px` }, children: [_jsx("div", { className: "w-2 h-2 rounded-full bg-red-500 -ml-1" }), _jsx("div", { className: "flex-1 h-[2px] bg-red-500" })] }));
 };
 export const CalendarLike = ({ tasks, slots = DEFAULT_SLOTS, showCurrentTime = true, autoScrollToCurrentTime = true, renderTask, onTaskDrop, onTaskResize, onCreateTask, }) => {
     const containerRef = useRef(null);
@@ -58,6 +58,7 @@ export const CalendarLike = ({ tasks, slots = DEFAULT_SLOTS, showCurrentTime = t
         }
     }, [showCurrentTime, autoScrollToCurrentTime]);
     const handleDragStart = (e, task) => {
+        console.log('CalendarLike: handleDragStart', task.id);
         setIsDragging(true);
         e.dataTransfer.setData('taskId', task.id);
         e.dataTransfer.setData('taskTitle', task.title || '');
@@ -67,26 +68,46 @@ export const CalendarLike = ({ tasks, slots = DEFAULT_SLOTS, showCurrentTime = t
         }
         // Сохраняем в глобальную переменную для доступа во время dragOver
         // eslint-disable-next-line react-hooks/immutability
-        window._draggingTask = {
-            id: task.id,
-            title: task.title,
-            estimatedTime: task.estimatedTime,
-            color: task.color,
-        };
+        window._draggingTask = task;
     };
     const handleDragEnd = () => {
         setIsDragging(false);
         delete window._draggingTask;
     };
     const handleDrop = (e, hour, minutes) => {
+        console.log('CalendarLike: handleDrop triggered', { hour, minutes });
         setIsDragging(false);
-        const taskId = e.dataTransfer.getData('taskId');
+        // Пытаемся получить taskId из dataTransfer
+        let taskId = e.dataTransfer.getData('taskId');
+        // Если в dataTransfer пусто (бывает в некоторых браузерах/ситуациях),
+        // берем из глобальной переменной, которую мы засетили в handleDragStart
+        if (!taskId && window._draggingTask) {
+            taskId = window._draggingTask.id;
+            console.log('CalendarLike: taskId recovered from _draggingTask:', taskId);
+        }
+        console.log('CalendarLike: taskId for drop:', taskId);
         if (taskId && onTaskDrop) {
             onTaskDrop(taskId, hour, minutes);
         }
+        else {
+            console.warn('CalendarLike: taskId or onTaskDrop missing', { taskId, hasOnTaskDrop: !!onTaskDrop });
+        }
+        // Очищаем глобальную переменную после дропа
+        delete window._draggingTask;
     };
-    return (_jsxs("div", { ref: containerRef, className: jc('relative border-l border-secondary/20 ml-12 select-none', isDragging ? 'is-dragging' : ''), children: [showCurrentTime && _jsx(CurrentTimeLine, {}), slots.map((slotIndex) => {
+    return (_jsxs("div", { ref: containerRef, className: jc('relative border-l border-secondary ml-12 select-none', isDragging ? 'is-dragging' : ''), children: [showCurrentTime && _jsx(CurrentTimeLine, {}), slots.map((slotIndex) => {
                 const tasksForSlot = tasksBySlot[slotIndex];
-                return (_jsx(CalendarSlot, { slotIndex: slotIndex, onDrop: handleDrop, onCreateTask: onCreateTask, 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));
+                const currentSlotTime = slotIndex * 15; // в минутах от начала дня
+                // Считаем сколько задач пересекают этот слот (для кластеризации превью)
+                // Исключаем текущую перетаскиваемую задачу из подсчета, чтобы превью не считало себя помехой
+                const draggingTask = window._draggingTask;
+                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;
+                    return currentSlotTime >= taskStart && currentSlotTime < taskEnd;
+                }).length;
+                return (_jsx(CalendarSlot, { slotIndex: slotIndex, onDrop: handleDrop, onCreateTask: onCreateTask, renderTask: renderTask, overlappingTasksCount: overlappingTasksCount, 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,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Circle, CircleCheckBig, Clock } from 'lucide-react';
+import { Circle, CircleCheckBig } from 'lucide-react';
 import { useState } from 'react';
 import { CalendarLike, CalendarItem } from './calendar-like';
 import { Cell } from '../cell/cell';
@@ -53,6 +53,7 @@ const INITIAL_TASKS = [
         dueDate: getTodayAtHour(17),
         estimatedTime: 30,
         isCompleted: true,
+        color: '#8b5cf6',
     },
 ];
 export const Interactive = {
@@ -96,14 +97,14 @@ export const Interactive = {
                         return (_jsx(CalendarItem, { title: _jsx(Cell, { subtitle: _jsx(Typo, { size: 'xs', weight: '500', children: "CODE-1" }), title: _jsx(Typo, { weight: "500", textDecoration: isCompleted ? 'line-through' : 'none', className: "truncate", children: task.title }), accLeft: [
                                     {
                                         icon: isCompleted ? CircleCheckBig : Circle,
-                                        color: 'var(--accent)',
+                                        color: 'white',
                                         strokeWidth: 3,
                                         onClick: (e) => {
                                             e?.stopPropagation();
                                             setTasks((prev) => prev.map((t) => (t.id === task.id ? { ...t, isCompleted: !t.isCompleted } : t)));
                                         },
                                     },
-                                ] }), color: task.color, isCompleted: isCompleted, isInWork: task.isInWork, icon: task.isInWork ? _jsx(Clock, { size: 12, className: "text-white animate-pulse" }) : undefined, onClick: () => handleTaskClick(task.id) }));
+                                ] }), color: task.color, onClick: () => handleTaskClick(task.id) }));
                     } })] }));
     },
 };

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

@@ -1,8 +1,11 @@
 import { type FC, type DragEvent, ReactNode } from 'react';
+import { TCalendarTask } from './types';
 export type TCalendarSlotProps = {
     slotIndex: number;
     onDrop?: (e: DragEvent<HTMLDivElement>, hour: number, minutes: number) => void;
     onCreateTask?: (hour: number, minutes: number, estimatedTime: number) => void;
+    renderTask?: (task: TCalendarTask) => ReactNode;
     children?: ReactNode;
+    overlappingTasksCount?: number;
 };
 export declare const CalendarSlot: FC<TCalendarSlotProps>;

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

@@ -1,30 +1,43 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { animated, config, useSpring } from '@react-spring/web';
 import { useState } from 'react';
+import { jc } from '../../../utils';
 import { Typo } from '../text/typo';
-export const CalendarSlot = ({ slotIndex, onDrop, onCreateTask, children }) => {
+export const CalendarSlot = ({ slotIndex, onDrop, onCreateTask, renderTask, children, overlappingTasksCount = 0, }) => {
     const hour = Math.floor(slotIndex / 4);
     const minutes = (slotIndex % 4) * 15;
     const isTopSlot = slotIndex % 4 === 0;
     const [selection, setSelection] = useState(null);
     const [dragOverInfo, setDragOverInfo] = useState(null);
+    const springs = useSpring({
+        to: {
+            opacity: dragOverInfo ? 1 : 0.6,
+            height: dragOverInfo ? `${(dragOverInfo.task.estimatedTime / 15) * 20}px` : '40px',
+        },
+        config: { ...config.stiff, precision: 0.001 },
+    });
+    const handleDragEnter = (e) => {
+        e.preventDefault();
+    };
     const handleDragOver = (e) => {
         e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
         // Пытаемся получить данные из глобальной переменной
         const draggingTask = window._draggingTask;
-        const title = draggingTask?.title || e.dataTransfer.getData('taskTitle');
-        const estimatedTime = draggingTask?.estimatedTime || Number(e.dataTransfer.getData('taskEstimatedTime')) || 15;
-        const color = draggingTask?.color || e.dataTransfer.getData('taskColor');
-        setDragOverInfo({
-            title,
-            estimatedTime,
-            color,
-            topOffset: 0, // Приклеиваем к началу слота (15-минутка)
-        });
+        if (!draggingTask)
+            return;
+        if (!dragOverInfo) {
+            setDragOverInfo({
+                task: draggingTask,
+                topOffset: 0, // Приклеиваем к началу слота (15-минутка)
+            });
+        }
     };
     const handleDragLeave = () => {
         setDragOverInfo(null);
     };
     const handleInternalDrop = (e) => {
+        console.log('CalendarSlot: handleInternalDrop triggered', { hour, minutes });
         setDragOverInfo(null);
         onDrop?.(e, hour, minutes); // Приклеиваем к началу слота (15-минутка)
     };
@@ -57,14 +70,22 @@ export const CalendarSlot = ({ slotIndex, onDrop, onCreateTask, children }) => {
         document.addEventListener('mousemove', onMouseMove);
         document.addEventListener('mouseup', onMouseUp);
     };
-    return (_jsxs("div", { onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleInternalDrop, onMouseDown: handleMouseDown, className: `relative h-5 group hover:z-10 has-[.calendar-item:hover]:z-30 has-[.calendar-item:active]:z-30 ${isTopSlot ? 'border-t border-t-secondary/20' : ''}`, children: [isTopSlot && (_jsx("div", { className: "absolute -left-12 top-0 -translate-y-1/2 w-10 text-right", children: _jsxs(Typo, { size: "xs", color: "secondary", children: [String(hour).padStart(2, '0'), ":00"] }) })), _jsxs("div", { className: "pl-4 relative h-full", children: [children, dragOverInfo !== null && (_jsx("div", { className: "absolute left-4 right-1 rounded-sm z-[40] pointer-events-none flex flex-col overflow-hidden border border-accent transition-colors", style: {
+    return (_jsxs("div", { onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleInternalDrop, onMouseDown: handleMouseDown, className: `relative h-5 group hover:z-10 has-[.calendar-item:hover]:z-30 has-[.calendar-item:active]:z-30 ${isTopSlot ? 'border-t border-t-secondary' : ''}`, children: [isTopSlot && (_jsx("div", { className: "absolute -left-12 top-0 -translate-y-1/2 w-10 text-right", children: _jsxs(Typo, { size: "xs", color: "secondary", children: [String(hour).padStart(2, '0'), ":00"] }) })), _jsxs("div", { className: "pl-4 relative h-full", children: [children, dragOverInfo !== null && (_jsx(animated.div, { className: jc('absolute z-[100] pointer-events-none flex flex-col overflow-hidden'), style: {
+                            ...springs,
                             top: `${dragOverInfo.topOffset}px`,
-                            height: `${(dragOverInfo.estimatedTime / 15) * 20}px`,
                             minHeight: '20px',
-                            backgroundColor: dragOverInfo.color ? `${dragOverInfo.color}80` : 'var(--accent)',
-                            borderColor: dragOverInfo.color ? dragOverInfo.color : 'var(--accent)',
-                        }, children: _jsx("div", { className: "p-1", children: _jsx(Typo, { size: "s", weight: "500", className: "truncate leading-none", children: dragOverInfo.title || 'Переместить сюда' }) }) })), selection && (_jsx("div", { className: "absolute left-4 right-1 bg-accent/30 border border-accent rounded-sm z-[40] pointer-events-none", style: {
+                            width: overlappingTasksCount > 0 ? `${100 / (overlappingTasksCount + 1)}%` : '100%',
+                            left: overlappingTasksCount > 0 ? `${(overlappingTasksCount * 100) / (overlappingTasksCount + 1)}%` : '0',
+                        }, children: renderTask ? (renderTask(dragOverInfo.task)) : (_jsx("div", { className: "p-1", children: _jsx(Typo, { size: "s", weight: "500", className: "truncate leading-none", children: dragOverInfo.task.title || 'Переместить сюда' }) })) })), selection && (_jsx("div", { className: "absolute left-4 right-1 z-[40] pointer-events-none", style: {
                             top: '0px',
                             height: `${(selection.currentEstimatedTime / 15) * 20}px`,
-                        }, children: _jsxs("div", { className: "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"] })] }) }))] })] }));
+                            width: overlappingTasksCount > 0 ? `${100 / (overlappingTasksCount + 1)}%` : '100%',
+                            left: overlappingTasksCount > 0 ? `${(overlappingTasksCount * 100) / (overlappingTasksCount + 1)}%` : '0',
+                        }, children: renderTask ? (renderTask({
+                            id: 'new-task-preview',
+                            title: 'Новая задача',
+                            dueDate: new Date(new Date().setHours(hour, minutes, 0, 0)),
+                            estimatedTime: 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kkkarsss/ui",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "UI Kit for kkkarsss projects",
   "type": "module",
   "main": "dist/index.js",
@@ -60,6 +60,7 @@
     "vitest": "^4.0.18"
   },
   "dependencies": {
+    "@react-spring/web": "^10.0.3",
     "date-fns": "^4.1.0",
     "react-datepicker": "^9.1.0",
     "react-day-picker": "^9.13.0"