@kkkarsss/ui 1.5.6 → 2.0.1

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;
     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,13 +1,12 @@
 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';
+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 plainDate = Temporal.PlainDate.from({
@@ -15,14 +14,29 @@ export const DateInput = ({ value, onChange, label, placeholder, size = 'm', dis
                 month: date.getMonth() + 1,
                 day: date.getDate(),
             });
-            onChange(plainDate.toString());
-            setIsOpen(false);
+            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/package.json

@@ -1,70 +1,77 @@
-{
-  "name": "@kkkarsss/ui",
-  "version": "1.5.6",
-  "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"
-  }
-}
+{
+  "name": "@kkkarsss/ui",
+  "version": "2.0.1",
+  "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"
+  }
+}