@kkkarsss/ui 1.5.5 → 2.0.0

package/dist/components/ui/button.d.ts

@@ -0,0 +1,16 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "secondary" | "default" | "outline" | "destructive" | "ghost" | null | undefined;
+    size?: "icon" | "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ButtonProps = {
+    asChild?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>;
+declare const Button: React.ForwardRefExoticComponent<{
+    asChild?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
+    variant?: "link" | "secondary" | "default" | "outline" | "destructive" | "ghost" | null | undefined;
+    size?: "icon" | "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/components/ui/button.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+const buttonVariants = cva('inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+            destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+            outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+            ghost: 'hover:bg-accent hover:text-accent-foreground',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+        size: {
+            default: 'h-10 px-4 py-2',
+            sm: 'h-9 rounded-md px-3',
+            lg: 'h-11 rounded-md px-8',
+            icon: 'h-10 w-10',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return _jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props });
+});
+Button.displayName = 'Button';
+export { Button, buttonVariants };

package/dist/components/ui/calendar.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: React.ComponentProps<typeof DayPicker>): import("react/jsx-runtime").JSX.Element;
+export { Calendar };

package/dist/components/ui/calendar.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ru } from 'date-fns/locale';
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
+import { buttonVariants } from './button';
+import { cn } from '../../lib/utils';
+function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
+    return (_jsx(DayPicker, { locale: ru, showOutsideDays: showOutsideDays, className: cn('p-3 w-fit', className), classNames: {
+            months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 relative',
+            month: 'space-y-4 w-full',
+            month_caption: 'flex justify-center pt-1 relative items-center h-9 w-full',
+            caption_label: 'text-sm font-medium',
+            nav: 'flex items-center',
+            button_previous: cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1 top-1 z-10'),
+            button_next: cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1 top-1 z-10'),
+            month_grid: 'w-full border-collapse space-y-1',
+            weekdays: 'flex gap-[2px]',
+            weekday: 'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem] flex justify-center items-center',
+            week: 'flex w-full mt-[2px] gap-[2px]',
+            day: cn('h-9 w-9 p-0 font-normal aria-selected:opacity-100'),
+            day_button: cn('h-9 w-9 p-0 font-normal aria-selected:opacity-100 aria-selected:rounded-none'),
+            selected: 'bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground aria-selected:rounded-md',
+            range_start: '-selected:rounded-l-md aria-selected:bg-primary aria-selected:text-primary-foreground',
+            range_end: 'aria-selected:rounded-r-md aria-selected:bg-primary aria-selected:text-primary-foreground',
+            range_middle: 'aria-selected:bg-secondary/80 aria-selected:text-accent-foreground',
+            today: 'text-accent',
+            outside: 'day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground',
+            disabled: 'text-muted-foreground opacity-50',
+            hidden: 'invisible',
+            ...classNames,
+        }, components: {
+            Chevron: ({ ...props }) => {
+                if (props.orientation === 'left') {
+                    return _jsx(ChevronLeftIcon, { className: "h-4 w-4" });
+                }
+                return _jsx(ChevronRightIcon, { className: "h-4 w-4" });
+            },
+        }, ...props }));
+}
+export { Calendar };

package/dist/components/ui/popover.d.ts

@@ -0,0 +1,6 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent };

package/dist/components/ui/popover.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn('z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className), ...props }) })));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+export { Popover, PopoverTrigger, PopoverContent };

package/dist/index.css

@@ -134,67 +134,131 @@
     .gap-xl { gap: 32px; }
 }
 
-:root {
-    font-family: Roboto, sans-serif;
+@layer base {
+  .dark {
+    --background: 0 0% 14%;
+    --foreground: 0 0% 85%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 0 0% 23%;
+    --secondary-foreground: 0 0% 60%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 346 84% 58%;
+    --accent-foreground: 0 0% 100%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+
+    --background-accent: #272727;
+    --shadow: rgba(0, 0, 0, 0.1);
+  }
+
+  :root {
+    --background: 0 0% 14%;
+    --foreground: 0 0% 85%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 0 0% 23%;
+    --secondary-foreground: 0 0% 60%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 346 84% 58%;
+    --accent-foreground: 0 0% 100%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+
+    --radius: 0.5rem;
+
+    --background-accent: #272727;
+    --shadow: rgba(0, 0, 0, 0.1);
+    --success: #22c55e;
+    --warning: #f59e0b;
+    --error: #ef4444;
 
-    /* Text Sizes */
     --text-xl: 18px;
     --text-l: 16px;
     --text-m: 14px;
     --text-s: 12px;
     --text-xs: 10px;
+  }
 
-    /* Dark theme (default) */
-    --background: #232323;
-    --background-accent: #272727;
-    --foreground: #d9d9d9;
+  .light {
+    --background: 0 0% 96%;
+    --foreground: 240 10% 4%;
 
-    --secondary: #3b3b3b;
-    --secondary-foreground: #999;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
 
-    --accent: #ed3a64;
-    --accent-foreground: #ffffff;
-    --shadow: rgba(0, 0, 0, 0.1);
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
 
-    --success: #22c55e;
-    --warning: #f59e0b;
-    --error: #ef4444;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
 
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-}
+    --secondary: 220 14% 91%;
+    --secondary-foreground: 240 0% 57%;
 
-.dark {
-    color-scheme: dark;
-    --background: #232323;
-    --background-accent: #272727;
-    --foreground: #d9d9d9;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
 
-    --secondary: #3b3b3b;
-    --secondary-foreground: #999;
+    --accent: 346 84% 58%;
+    --accent-foreground: 0 0% 100%;
 
-    --accent: #ed3a64;
-    --accent-foreground: #ffffff;
-    --shadow: rgba(0, 0, 0, 0.1);
-}
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
 
-.light {
-    color-scheme: light;
-    --background: #f4f4f4;
-    --background-accent: #fafafa;
-    --foreground: #080809;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
 
-    --secondary: #e5e7eb;
-    --secondary-foreground: #919191;
+    --background-accent: #fafafa;
     --shadow: rgba(0, 0, 0, 0.03);
+  }
 }
 
-* {
+@layer base {
+  * {
+    @apply border-border;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: Roboto, sans-serif;
+  }
+  body {
+    @apply bg-background text-foreground;
+    width: 100%;
+    height: 100vh;
+  }
 }
 
 .cursor {
@@ -206,16 +270,9 @@ a {
     color: inherit;
 }
 
-body {
-    width: 100%;
-    height: 100vh;
-    background-color: var(--background);
-    color: var(--foreground);
-}
-
 .scrollbar-custom {
     scrollbar-width: thin;
-    scrollbar-color: var(--secondary) transparent;
+    scrollbar-color: hsl(var(--secondary)) transparent;
 }
 .scrollbar-custom::-webkit-scrollbar {
     width: 4px;
@@ -225,7 +282,7 @@ body {
     background: transparent;
 }
 .scrollbar-custom::-webkit-scrollbar-thumb {
-    background-color: var(--secondary);
+    background-color: hsl(var(--secondary));
     border-radius: 10px;
 }
 

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/ui/controls/date-input/date-input.d.ts

@@ -6,5 +6,6 @@ export type TDateInputProps = {
     placeholder?: string;
     size?: 's' | 'm' | 'l';
     disabled?: boolean;
+    showTime?: boolean;
 };
 export declare const DateInput: FC<TDateInputProps>;

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

@@ -1,25 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Calendar } from 'lucide-react';
-import { useRef, useState } from 'react';
-import { Dropdown } from '../../layout';
+import { Temporal } from '@js-temporal/polyfill';
+import { Calendar as CalendarIcon } from 'lucide-react';
+import { useState } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../components/ui/popover';
 import { DatePicker } from '../date-picker/date-picker';
 import { Input } from '../input/input';
-export const DateInput = ({ value, onChange, label, placeholder, size = 'm', disabled }) => {
+export const DateInput = ({ value, onChange, label, placeholder, size = 'm', disabled, showTime, }) => {
     const [isOpen, setIsOpen] = useState(false);
-    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}`);
-            setIsOpen(false);
+            const plainDate = Temporal.PlainDate.from({
+                year: date.getFullYear(),
+                month: date.getMonth() + 1,
+                day: date.getDate(),
+            });
+            if (showTime) {
+                // Если уже есть время в value, сохраняем его
+                let currentTime = '00:00';
+                if (value && value.includes('T')) {
+                    currentTime = value.split('T')[1].substring(0, 5);
+                }
+                else if (value && value.includes(':')) {
+                    currentTime = value.split(' ')[1] || value;
+                }
+                onChange(`${plainDate.toString()}T${currentTime}`);
+            }
+            else {
+                onChange(plainDate.toString());
+                setIsOpen(false);
+            }
         }
     };
-    const selectedDate = value ? new Date(value) : undefined;
-    return (_jsxs("div", { ref: containerRef, className: "relative w-full", children: [_jsx(Input, { label: label, value: value, onChange: (e) => onChange(e.target.value), type: "text", placeholder: placeholder || 'YYYY-MM-DD', size: size, disabled: disabled, rightAcc: _jsx("div", { className: "flex items-center h-full", children: _jsx(Calendar, { size: 16, className: "cursor-pointer text-secondary transition-colors hover:text-accent", onClick: (e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            setIsOpen(!isOpen);
-                        } }) }) }), _jsx(Dropdown, { isOpen: isOpen, matchWidth: false, onClose: () => setIsOpen(false), anchorRef: containerRef, children: _jsx(DatePicker, { selected: selectedDate, onSelect: handleDateSelect }) })] }));
+    const handleTimeChange = (e) => {
+        const time = e.target.value;
+        const datePart = value.split('T')[0] || new Date().toISOString().split('T')[0];
+        onChange(`${datePart}T${time}`);
+    };
+    const selectedDate = value ? new Date(value.split('T')[0]) : undefined;
+    const timeValue = value && value.includes('T') ? value.split('T')[1].substring(0, 5) : '';
+    return (_jsx("div", { className: "relative w-full", children: _jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsxs("div", { className: "flex items-end gap-2", children: [_jsx(Input, { label: label, value: value, onChange: (e) => onChange(e.target.value), type: "text", placeholder: placeholder || (showTime ? 'YYYY-MM-DDTHH:mm' : 'YYYY-MM-DD'), size: size, disabled: disabled, rightAcc: _jsx("div", { className: "flex items-center h-full", children: _jsx(PopoverTrigger, { asChild: true, children: _jsx(CalendarIcon, { size: 16, className: "cursor-pointer text-secondary transition-colors hover:text-accent" }) }) }) }), showTime && (_jsx("div", { className: "w-24", children: _jsx(Input, { type: "text", value: timeValue, onChange: handleTimeChange, placeholder: "HH:mm", size: size, disabled: disabled }) }))] }), _jsx(PopoverContent, { className: "w-auto p-0", align: "end", children: _jsx(DatePicker, { selected: selectedDate, onSelect: handleDateSelect }) })] }) }));
 };

package/dist/ui/controls/date-input/date-input.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DateInput } from './date-input';
+declare const meta: Meta<typeof DateInput>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Empty: Story;
+export declare const Sizes: Story;
+export declare const Disabled: Story;
+export declare const WithTime: Story;

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DateInput } from './date-input';
+const meta = {
+    title: 'Controls/DateInput',
+    component: DateInput,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: (args) => {
+        const [value, setValue] = useState(args.value);
+        return _jsx(DateInput, { ...args, value: value, onChange: setValue });
+    },
+    args: {
+        value: '2024-05-20',
+        label: 'Выберите дату',
+    },
+};
+export const Empty = {
+    render: (args) => {
+        const [value, setValue] = useState(args.value);
+        return _jsx(DateInput, { ...args, value: value, onChange: setValue });
+    },
+    args: {
+        value: '',
+        label: 'Пустая дата',
+        placeholder: 'Выберите день...',
+    },
+};
+export const Sizes = {
+    render: (args) => {
+        const [v1, setV1] = useState('2024-01-01');
+        const [v2, setV2] = useState('2024-01-01');
+        const [v3, setV3] = useState('2024-01-01');
+        return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(DateInput, { ...args, size: "s", label: "Small", value: v1, onChange: setV1 }), _jsx(DateInput, { ...args, size: "m", label: "Medium", value: v2, onChange: setV2 }), _jsx(DateInput, { ...args, size: "l", label: "Large", value: v3, onChange: setV3 })] }));
+    },
+};
+export const Disabled = {
+    args: {
+        value: '2024-05-20',
+        label: 'Заблокировано',
+        disabled: true,
+    },
+};
+export const WithTime = {
+    render: (args) => {
+        const [value, setValue] = useState(args.value);
+        return _jsx(DateInput, { ...args, value: value, onChange: setValue });
+    },
+    args: {
+        value: '2024-05-20T14:30',
+        label: 'С выбором времени',
+        showTime: true,
+    },
+};

package/dist/ui/controls/date-picker/date-picker.d.ts

@@ -1,7 +1,12 @@
 import type { FC } from 'react';
-import 'react-day-picker/dist/style.css';
+import type { DateRange } from 'react-day-picker';
 export type TDatePickerProps = {
+    mode?: 'single';
     selected?: Date;
-    onSelect: (date: Date | undefined) => void;
+    onSelect?: (date: Date | undefined) => void;
+} | {
+    mode: 'range';
+    selected?: DateRange;
+    onSelect?: (range: DateRange | undefined) => void;
 };
 export declare const DatePicker: FC<TDatePickerProps>;

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

@@ -1,32 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DayPicker } from 'react-day-picker';
-import 'react-day-picker/dist/style.css';
-export const DatePicker = ({ selected, onSelect }) => {
-    return (_jsx("div", { className: `rounded-lg p-4 shadow-md`, style: {
-            background: `var(--background-accent)`,
-            color: `var(--foreground)`,
-            boxShadow: `0 4px 6px var(--shadow)`,
-        }, children: _jsx(DayPicker, { mode: "single", selected: selected, onSelect: onSelect, className: "react-day-picker", styles: {
-                caption: {
-                    color: `var(--foreground)`,
-                },
-                day: {
-                    borderRadius: '0.375rem',
-                    color: `var(--foreground)`,
-                },
-                day_selected: {
-                    backgroundColor: `var(--accent)`,
-                    color: `var(--accent-foreground)`,
-                },
-                day_today: {
-                    backgroundColor: `var(--background-secondary)`,
-                    color: `var(--foreground)`,
-                },
-                day_outside: {
-                    color: `var(--secondary-foreground)`,
-                },
-                root: {
-                    background: `var(--background-accent)`,
-                },
-            } }) }));
+import { Calendar } from '../../../components/ui/calendar';
+export const DatePicker = (props) => {
+    if (props.mode === 'range') {
+        return (_jsx(Calendar, { mode: "range", selected: props.selected, onSelect: props.onSelect, className: 'rounded-lg border w-fit' }));
+    }
+    return (_jsx(Calendar, { mode: "single", selected: props.selected, onSelect: props.onSelect, className: 'rounded-lg border-accent w-fit' }));
 };

package/dist/ui/controls/date-picker/date-picker.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { type TDatePickerProps } from './date-picker';
+declare const meta: Meta<TDatePickerProps>;
+export default meta;
+type Story = StoryObj<TDatePickerProps>;
+export declare const Default: Story;
+export declare const Range: Story;
+export declare const Empty: Story;

package/dist/ui/controls/date-picker/date-picker.stories.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { addDays } from 'date-fns';
+import { useState } from 'react';
+import { DatePicker } from './date-picker';
+const meta = {
+    title: 'Controls/DatePicker',
+    component: DatePicker,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: (args) => {
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+        const [selected, setSelected] = useState(args.selected);
+        return _jsx(DatePicker, { ...args, selected: selected, onSelect: setSelected });
+    },
+    args: {
+        mode: 'single',
+        selected: new Date(),
+    },
+};
+export const Range = {
+    render: (args) => {
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+        const [selected, setSelected] = useState(args.selected);
+        return _jsx(DatePicker, { ...args, mode: "range", selected: selected, onSelect: setSelected });
+    },
+    args: {
+        mode: 'range',
+        selected: {
+            from: new Date(),
+            to: addDays(new Date(), 7),
+        },
+    },
+};
+export const Empty = {
+    render: (args) => {
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+        const [selected, setSelected] = useState(args.selected);
+        return _jsx(DatePicker, { ...args, selected: selected, onSelect: setSelected });
+    },
+    args: {
+        mode: 'single',
+        selected: undefined,
+    },
+};

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,12 +9,36 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onDragEnd, on
             e.preventDefault();
             e.stopPropagation();
             const startY = e.clientY;
-            const dStart = task.dueDateStart instanceof Date ? task.dueDateStart : new Date(task.dueDateStart);
-            const dEnd = task.dueDateEnd instanceof Date ? task.dueDateEnd : new Date(task.dueDateEnd);
-            const estimatedTime = (dEnd.getTime() - dStart.getTime()) / (60 * 1000);
+            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 = dStart.getHours();
-            const startMinutes = dStart.getMinutes();
+            const startHour = tStart.hour;
+            const startMinutes = tStart.minute;
             const onMouseMove = (moveEvent) => {
                 const deltaY = moveEvent.clientY - startY;
                 let newHeight;
@@ -74,8 +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 dStart = task.dueDateStart instanceof Date ? task.dueDateStart : new Date(task.dueDateStart);
-        const originalStartTotalMinutes = dStart.getHours() * 60 + dStart.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,9 +26,31 @@ export const CalendarLike = ({ tasks, slots = DEFAULT_SLOTS, showCurrentTime = t
         setDraggingTask(task);
         e.dataTransfer.setData('taskId', task.id);
         e.dataTransfer.setData('taskTitle', task.title || '');
-        const dStart = task.dueDateStart instanceof Date ? task.dueDateStart : new Date(task.dueDateStart);
-        const dEnd = task.dueDateEnd instanceof Date ? task.dueDateEnd : new Date(task.dueDateEnd);
-        const estimatedTime = (dEnd.getTime() - dStart.getTime()) / (60 * 1000);
+        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);
@@ -51,10 +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 dStart = task.dueDateStart instanceof Date ? task.dueDateStart : new Date(task.dueDateStart);
-                    const dEnd = task.dueDateEnd instanceof Date ? task.dueDateEnd : new Date(task.dueDateEnd);
-                    const taskStart = dStart.getHours() * 60 + dStart.getMinutes();
-                    const taskEnd = dEnd.getHours() * 60 + dEnd.getMinutes();
+                    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,10 +11,11 @@ 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 = [
     {
@@ -21,14 +23,18 @@ const INITIAL_TASKS = [
         title: 'Утренняя почта',
         description: 'Проверить входящие и ответить на важные письма',
         dueDateStart: getTodayAtHour(9),
-        dueDateEnd: getTodayAtHour(9, 45),
+        dueDateEnd: getTodayAtHour(9),
+        dueTimeStart: getTodayTimeAtHour(9),
+        dueTimeEnd: getTodayTimeAtHour(9, 45),
         color: '#3b82f6',
     },
     {
         id: '2',
         title: 'Стендап',
         dueDateStart: getTodayAtHour(10),
-        dueDateEnd: getTodayAtHour(10, 15),
+        dueDateEnd: getTodayAtHour(10),
+        dueTimeStart: getTodayTimeAtHour(10),
+        dueTimeEnd: getTodayTimeAtHour(10, 15),
         color: '#10b981',
         isInWork: true,
     },
@@ -36,7 +42,9 @@ const INITIAL_TASKS = [
         id: '3',
         title: 'Обед',
         dueDateStart: getTodayAtHour(13),
-        dueDateEnd: getTodayAtHour(14),
+        dueDateEnd: getTodayAtHour(13),
+        dueTimeStart: getTodayTimeAtHour(13),
+        dueTimeEnd: getTodayTimeAtHour(14),
         color: '#f59e0b',
     },
     {
@@ -44,14 +52,18 @@ const INITIAL_TASKS = [
         title: 'Разработка фичи',
         description: 'Реализация логики календаря',
         dueDateStart: getTodayAtHour(14),
-        dueDateEnd: getTodayAtHour(16),
+        dueDateEnd: getTodayAtHour(14),
+        dueTimeStart: getTodayTimeAtHour(14),
+        dueTimeEnd: getTodayTimeAtHour(16),
         color: '#8b5cf6',
     },
     {
         id: '5',
         title: 'Завершенная задача',
         dueDateStart: getTodayAtHour(17),
-        dueDateEnd: getTodayAtHour(17, 30),
+        dueDateEnd: getTodayAtHour(17),
+        dueTimeStart: getTodayTimeAtHour(17),
+        dueTimeEnd: getTodayTimeAtHour(17, 30),
         isCompleted: true,
         color: '#8b5cf6',
     },
@@ -65,11 +77,18 @@ export const Interactive = {
             console.log(`Task ${taskId} dropped at ${hour}:${minutes}`);
             setTasks((prev) => prev.map((t) => {
                 if (t.id === taskId) {
-                    const durationMs = t.dueDateEnd.getTime() - t.dueDateStart.getTime();
-                    const newStartDate = new Date(t.dueDateStart);
-                    newStartDate.setHours(hour, minutes, 0, 0);
-                    const newEndDate = new Date(newStartDate.getTime() + durationMs);
-                    return { ...t, dueDateStart: newStartDate, dueDateEnd: newEndDate };
+                    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;
             }));
@@ -78,25 +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 newStartDate = new Date(t.dueDateStart);
+                    let newDtStart;
                     if (newStartHour !== undefined && newStartMinutes !== undefined) {
-                        newStartDate.setHours(newStartHour, newStartMinutes, 0, 0);
+                        newDtStart = t.dueDateStart.toPlainDateTime(Temporal.PlainTime.from({ hour: newStartHour, minute: newStartMinutes }));
+                    }
+                    else {
+                        newDtStart = t.dueDateStart.toPlainDateTime(t.dueTimeStart || Temporal.PlainTime.from('00:00'));
                     }
-                    const newEndDate = new Date(newStartDate.getTime() + newEstimatedTime * 60 * 1000);
-                    return { ...t, dueDateStart: newStartDate, dueDateEnd: newEndDate };
+                    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 dueDateStart = getTodayAtHour(hour, minutes);
-            const dueDateEnd = new Date(dueDateStart.getTime() + estimatedTime * 60 * 1000);
+            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: 'Новая задача',
-                dueDateStart,
-                dueDateEnd,
+                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';
@@ -13,7 +14,39 @@ export const CalendarSlot = ({ slotIndex, onDrop, onCreateTask, renderTask, chil
         to: {
             opacity: dragOverInfo ? 1 : 0.6,
             height: dragOverInfo
-                ? `${((new Date(dragOverInfo.task.dueDateEnd).getTime() - new Date(dragOverInfo.task.dueDateStart).getTime()) / (60 * 1000) / 15) * 20}px`
+                ? (() => {
+                    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 },
@@ -83,8 +116,12 @@ export const CalendarSlot = ({ slotIndex, onDrop, onCreateTask, renderTask, chil
                         }, children: renderTask ? (renderTask({
                             id: 'new-task-preview',
                             title: 'Новая задача',
-                            dueDateStart: new Date(new Date().setHours(hour, minutes, 0, 0)),
-                            dueDateEnd: new Date(new Date().setHours(hour, minutes + selection.currentEstimatedTime, 0, 0)),
+                            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;
-    dueDateStart: Date;
-    dueDateEnd: Date;
+    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,24 +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) => {
-        const dStart = t.dueDateStart instanceof Date ? t.dueDateStart : new Date(t.dueDateStart);
-        const dEnd = t.dueDateEnd instanceof Date ? t.dueDateEnd : new Date(t.dueDateEnd);
+        const dtStart = toDateTime(t.dueDateStart, t.dueTimeStart);
+        const dtEnd = toDateTime(t.dueDateEnd, t.dueTimeEnd);
         return {
             ...t,
-            dueDateStart: dStart,
-            dueDateEnd: dEnd,
+            dtStart,
+            dtEnd,
         };
     })
-        .filter((t) => t.dueDateStart && !isNaN(t.dueDateStart.getTime()) && t.dueDateEnd && !isNaN(t.dueDateEnd.getTime()))
-        .sort((a, b) => a.dueDateStart.getTime() - b.dueDateStart.getTime());
+        .sort((a, b) => Temporal.PlainDateTime.compare(a.dtStart, b.dtStart));
     const columns = [];
     tasksToRender.forEach((task) => {
-        const startTime = task.dueDateStart.getTime();
         let placed = false;
         for (const column of columns) {
             const lastTask = column[column.length - 1];
-            const lastEndTime = lastTask.dueDateEnd.getTime();
-            if (startTime >= lastEndTime) {
+            if (Temporal.PlainDateTime.compare(task.dtStart, lastTask.dtEnd) >= 0) {
                 column.push(task);
                 placed = true;
                 break;
@@ -30,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.dueDateStart.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.dueDateEnd.getTime();
-            if (end > clusterMaxEndTime)
-                clusterMaxEndTime = end;
+            if (!clusterMaxEndTime || Temporal.PlainDateTime.compare(t.dtEnd, clusterMaxEndTime) > 0) {
+                clusterMaxEndTime = t.dtEnd;
+            }
         });
     });
     if (currentCluster.length > 0)
@@ -60,11 +78,11 @@ export const calculateTaskPositions = (tasks) => {
                 const width = clusterColumnsCount > 1 ? `${100 / clusterColumnsCount}%` : '100%';
                 const left = clusterColumnsCount > 1 ? `${(colIndex * 100) / clusterColumnsCount}%` : '0%';
                 // Расчитываем смещение внутри 15-минутного слота
-                const minutes = task.dueDateStart.getMinutes();
+                const minutes = task.dtStart.minute;
                 const minutesInSlot = minutes % 15;
                 const topOffset = (minutesInSlot / 15) * 20;
                 const top = `${Math.round(topOffset)}px`;
-                const diffMinutes = Math.round((task.dueDateEnd.getTime() - task.dueDateStart.getTime()) / (60 * 1000));
+                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,
@@ -78,9 +96,9 @@ export const calculateTaskPositions = (tasks) => {
 export const groupTasksBySlot = (tasksWithPosition) => {
     const map = {};
     tasksWithPosition.forEach((task) => {
-        const dStart = task.dueDateStart instanceof Date ? task.dueDateStart : new Date(task.dueDateStart);
-        const hour = dStart.getHours();
-        const minutes = dStart.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/package.json

@@ -1,69 +1,77 @@
-{
-  "name": "@kkkarsss/ui",
-  "version": "1.5.5",
-  "description": "UI Kit for kkkarsss projects",
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsc && copy src\\index.css dist\\index.css",
-    "prepare": "npm run build",
-    "lint": "eslint .",
-    "format": "prettier --write .",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.0",
-    "@eslint/js": "^9.39.2",
-    "@storybook/addon-a11y": "^10.2.7",
-    "@storybook/addon-docs": "^10.2.7",
-    "@storybook/addon-onboarding": "^10.2.7",
-    "@storybook/addon-vitest": "^10.2.7",
-    "@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",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/coverage-v8": "^4.0.18",
-    "autoprefixer": "^10.4.23",
-    "eslint": "^9.39.1",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-import-resolver-typescript": "^4.4.4",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.26",
-    "eslint-plugin-storybook": "^10.2.7",
-    "globals": "^16.5.0",
-    "lucide-react": "^0.563.0",
-    "playwright": "^1.58.0",
-    "postcss": "^8.5.6",
-    "prettier": "^3.8.1",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "storybook": "^10.2.7",
-    "typescript": "5.9.3",
-    "typescript-eslint": "^8.53.1",
-    "vite": "^7.3.1",
-    "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"
-  }
-}
+{
+  "name": "@kkkarsss/ui",
+  "version": "2.0.0",
+  "description": "UI Kit for kkkarsss projects",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && copy src\\index.css dist\\index.css",
+    "prepare": "npm run build",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.0",
+    "@eslint/js": "^9.39.2",
+    "@storybook/addon-a11y": "^10.2.7",
+    "@storybook/addon-docs": "^10.2.7",
+    "@storybook/addon-onboarding": "^10.2.7",
+    "@storybook/addon-vitest": "^10.2.7",
+    "@storybook/react": "^10.2.7",
+    "@storybook/react-vite": "^10.2.7",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@types/node": "^25.0.10",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "eslint-plugin-storybook": "^10.2.7",
+    "globals": "^16.5.0",
+    "lucide-react": "^0.563.0",
+    "playwright": "^1.58.0",
+    "postcss": "^8.5.6",
+    "prettier": "^3.8.1",
+    "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",
+    "react-day-picker": "^9.13.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.2",
+    "class-variance-authority": "^0.7.0",
+    "radix-ui": "^1.1.0",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-slot": "^1.1.0",
+    "tailwindcss-animate": "^1.0.7"
+  }
+}