@kkkarsss/ui 1.0.0

package/dist/ui/information/text/typo.js

@@ -0,0 +1,41 @@
+import { createElement } from 'react';
+import { jc } from '../../../utils';
+const SIZE_TO_TAG_CONFIG = {
+    inherit: 'span',
+    xs: 'p',
+    s: 'p',
+    m: 'p',
+    l: 'h2',
+    xl: 'h1',
+};
+const sizeMap = {
+    inherit: 'text-inherit',
+    xs: 'text-xs',
+    s: 'text-s',
+    m: 'text-m',
+    l: 'text-l',
+    xl: 'text-xl',
+};
+const weightMap = {
+    '300': 'font-light',
+    '400': 'font-normal',
+    '500': 'font-medium',
+};
+const colorMap = {
+    default: 'text-foreground',
+    secondary: 'text-secondary-foreground',
+    accent: 'text-accent',
+    error: 'text-error',
+};
+export const Typo = ({ children, size = 'm', color = 'default', weight = '400', textDecoration = 'none', className, }) => {
+    const tag = SIZE_TO_TAG_CONFIG[size];
+    const colorClass = colorMap[color] || '';
+    const inlineColor = !colorMap[color] ? color : undefined;
+    return createElement(tag, {
+        className: jc(sizeMap[size], colorClass, weightMap[weight], className),
+        style: {
+            color: inlineColor,
+            textDecoration: textDecoration,
+        },
+    }, children);
+};

package/dist/ui/information/text/typo.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Typo } from './typo';
+declare const meta: Meta<typeof Typo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const LargeHeading: Story;
+export declare const AccentText: Story;
+export declare const ErrorText: Story;
+export declare const CustomColor: Story;

package/dist/ui/information/text/typo.stories.js

@@ -0,0 +1,60 @@
+import { Typo } from './typo';
+const meta = {
+    title: 'Information/Typo',
+    component: Typo,
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['inherit', 'xs', 's', 'm', 'l', 'xl'],
+        },
+        weight: {
+            control: 'select',
+            options: ['300', '400', '500'],
+        },
+        color: {
+            control: 'text',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: 'This is a default typography example.',
+        size: 'm',
+        weight: '400',
+        color: 'default',
+    },
+};
+export const LargeHeading = {
+    args: {
+        children: 'Large Heading (XL)',
+        size: 'xl',
+        weight: '500',
+        color: 'default',
+    },
+};
+export const AccentText = {
+    args: {
+        children: 'Accentuated text',
+        size: 'm',
+        weight: '500',
+        color: 'accent',
+    },
+};
+export const ErrorText = {
+    args: {
+        children: 'This is an error message',
+        size: 's',
+        weight: '400',
+        color: 'error',
+    },
+};
+export const CustomColor = {
+    args: {
+        children: 'Text with custom hex color',
+        size: 'm',
+        weight: '400',
+        color: '#8b5cf6',
+    },
+};

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

@@ -0,0 +1,12 @@
+import { type CSSProperties, type FC, type PropsWithChildren } from 'react';
+type TypoSize = 'inherit' | 'xs' | 's' | 'm' | 'l' | 'xl';
+export type TUIColor = 'accent' | 'secondary' | 'default' | 'error' | string;
+type TypoWeight = '300' | '400' | '500';
+export type TTypoProps = PropsWithChildren<{
+    size?: TypoSize;
+    color?: TUIColor;
+    weight?: TypoWeight;
+    textDecoration?: CSSProperties['textDecoration'];
+}>;
+export declare const Typo: FC<TTypoProps>;
+export {};

package/dist/ui/information/typo.js

@@ -0,0 +1,41 @@
+import { jc } from '@kars/utils';
+import { createElement } from 'react';
+const SIZE_TO_TAG_CONFIG = {
+    inherit: 'span',
+    xs: 'p',
+    s: 'p',
+    m: 'p',
+    l: 'h2',
+    xl: 'h1',
+};
+const sizeMap = {
+    inherit: 'text-inherit',
+    xs: 'text-xs',
+    s: 'text-s',
+    m: 'text-m',
+    l: 'text-l',
+    xl: 'text-xl',
+};
+const weightMap = {
+    '300': 'font-light',
+    '400': 'font-normal',
+    '500': 'font-medium',
+};
+const colorMap = {
+    default: 'text-foreground',
+    secondary: 'text-secondary-foreground',
+    accent: 'text-accent',
+    error: 'text-error',
+};
+export const Typo = ({ children, size = 'm', color = 'default', weight = '400', textDecoration = 'none', }) => {
+    const tag = SIZE_TO_TAG_CONFIG[size];
+    const colorClass = colorMap[color] || '';
+    const inlineColor = !colorMap[color] ? color : undefined;
+    return createElement(tag, {
+        className: jc(sizeMap[size], colorClass, weightMap[weight]),
+        style: {
+            color: inlineColor,
+            textDecoration: textDecoration,
+        },
+    }, children);
+};

package/dist/ui/layout/dropdown/dropdown.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode, RefObject } from 'react';
+type DropdownProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    anchorRef: RefObject<HTMLElement | null>;
+    children: ReactNode;
+    className?: string;
+    matchWidth?: boolean;
+};
+export declare const Dropdown: ({ isOpen, onClose, anchorRef, children, className, matchWidth }: DropdownProps) => import("react").ReactPortal | null;
+export {};

package/dist/ui/layout/dropdown/dropdown.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { jc } from '../../../utils';
+export const Dropdown = ({ isOpen, onClose, anchorRef, children, className, matchWidth = true }) => {
+    const [coords, setCoords] = useState({ top: 0, left: 0, width: 0 });
+    const dropdownRef = useRef(null);
+    const updatePosition = useCallback(() => {
+        if (!anchorRef.current)
+            return;
+        const rect = anchorRef.current.getBoundingClientRect();
+        setCoords({
+            top: rect.bottom + window.scrollY,
+            left: rect.left + window.scrollX,
+            width: rect.width,
+        });
+    }, [anchorRef]);
+    useLayoutEffect(() => {
+        if (isOpen)
+            updatePosition();
+    }, [isOpen, updatePosition]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleResize = () => updatePosition();
+        const handleKeyDown = (e) => e.key === 'Escape' && onClose();
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('scroll', handleResize, true);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('scroll', handleResize, true);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen, onClose, updatePosition]);
+    if (!isOpen)
+        return null;
+    return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 bg-black/20 z-[999]", onClick: onClose }), _jsx("div", { ref: dropdownRef, style: {
+                    position: 'absolute',
+                    top: coords.top + 4,
+                    left: coords.left,
+                    width: matchWidth ? coords.width : 'auto',
+                }, className: jc('z-[1000] py-m overflow-hidden rounded border-x-2 border-secondary bg-background-accent shadow-lg', className), children: children })] }), document.body);
+};

package/dist/ui/layout/dropdown/dropdown.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Dropdown } from './dropdown';
+declare const meta: Meta<typeof Dropdown>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/ui/layout/dropdown/dropdown.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Dropdown } from './dropdown';
+import { Typo } from '../../information';
+const meta = {
+    title: 'Layout/Dropdown',
+    component: Dropdown,
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (_jsx("div", { style: { height: '200px', padding: '20px' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const DropdownWithTrigger = (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const anchorRef = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: anchorRef, onClick: () => setIsOpen(!isOpen), className: "px-4 py-2 bg-primary text-white rounded", children: "Toggle Dropdown" }), _jsx(Dropdown, { ...args, isOpen: isOpen, onClose: () => setIsOpen(false), anchorRef: anchorRef, children: _jsxs("div", { className: "p-2", children: [_jsx(Typo, { children: "Dropdown Content" }), _jsx(Typo, { size: "s", color: "secondary", children: "More details here..." })] }) })] }));
+};
+export const Default = {
+    render: (args) => _jsx(DropdownWithTrigger, { ...args }),
+    args: {
+        matchWidth: true,
+    },
+};

package/dist/ui/layout/flex/flex.d.ts

@@ -0,0 +1,13 @@
+import type { FC, PropsWithChildren, RefObject } from 'react';
+type TProps = {
+    direction?: 'row' | 'column';
+    type?: 'hug' | 'fill';
+    justify?: 'start' | 'center' | 'end' | 'space-between';
+    align?: 'start' | 'center' | 'end';
+    gap?: '0' | '4px' | '8px' | '16px';
+    ref?: RefObject<HTMLDivElement | null>;
+    offset?: '0' | '4px' | '8px' | '16px';
+    className?: string;
+};
+export declare const Flex: FC<PropsWithChildren<TProps>>;
+export {};

package/dist/ui/layout/flex/flex.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jc } from '../../../utils';
+const directionMap = {
+    row: 'flex-row',
+    column: 'flex-col',
+};
+const typeMap = {
+    hug: 'w-auto h-auto',
+    fill: 'w-full h-auto',
+};
+const justifyMap = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    'space-between': 'justify-between',
+};
+const alignMap = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+};
+const gapMap = {
+    '0': 'gap-0',
+    '4px': 'gap-s',
+    '8px': 'gap-m',
+    '16px': 'gap-l',
+};
+const offsetMap = {
+    '0': 'p-0',
+    '4px': 'p-s',
+    '8px': 'p-m',
+    '16px': 'p-l',
+};
+export const Flex = ({ children, justify, align, direction = 'row', type = 'hug', gap = '4px', ref, offset = '0', className, }) => {
+    return (_jsx("div", { className: jc('flex', 'scrollbar-none', 'overflow-hidden', 'overflow-x-auto', directionMap[direction], typeMap[type], gapMap[gap], offsetMap[offset], align && alignMap[align], justify && justifyMap[justify], className), ref: ref, children: children }));
+};

package/dist/ui/layout/flex/flex.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Flex } from './flex';
+declare const meta: Meta<typeof Flex>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Row: Story;
+export declare const Column: Story;
+export declare const SpaceBetween: Story;

package/dist/ui/layout/flex/flex.stories.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from './flex';
+const meta = {
+    title: 'Layout/Flex',
+    component: Flex,
+    tags: ['autodocs'],
+    argTypes: {
+        direction: {
+            control: 'select',
+            options: ['row', 'column'],
+        },
+        justify: {
+            control: 'select',
+            options: ['start', 'center', 'end', 'space-between'],
+        },
+        align: {
+            control: 'select',
+            options: ['start', 'center', 'end'],
+        },
+        gap: {
+            control: 'select',
+            options: ['0', '4px', '8px', '16px'],
+        },
+        offset: {
+            control: 'select',
+            options: ['0', '4px', '8px', '16px'],
+        },
+    },
+};
+export default meta;
+const Box = ({ children }) => _jsx("div", { className: "bg-accent p-4 text-white rounded", children: children });
+export const Row = {
+    args: {
+        direction: 'row',
+        gap: '8px',
+        children: [_jsx(Box, { children: "Box 1" }, "1"), _jsx(Box, { children: "Box 2" }, "2"), _jsx(Box, { children: "Box 3" }, "3")],
+    },
+};
+export const Column = {
+    args: {
+        direction: 'column',
+        gap: '16px',
+        children: [_jsx(Box, { children: "Row 1" }, "1"), _jsx(Box, { children: "Row 2" }, "2"), _jsx(Box, { children: "Row 3" }, "3")],
+    },
+};
+export const SpaceBetween = {
+    args: {
+        direction: 'row',
+        justify: 'space-between',
+        type: 'fill',
+        children: [_jsx(Box, { children: "Left" }, "1"), _jsx(Box, { children: "Right" }, "2")],
+    },
+};

package/dist/ui/layout/icon-action/icon-action.d.ts

@@ -0,0 +1,9 @@
+import type { LucideProps } from 'lucide-react';
+import type { FC, ReactElement } from 'react';
+type TIconActionProps = {
+    icon: ReactElement<LucideProps>;
+    onClick?: VoidFunction;
+    bgc?: CSSStyleDeclaration['backgroundColor'];
+};
+export declare const IconAction: FC<TIconActionProps>;
+export {};

package/dist/ui/layout/icon-action/icon-action.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jc } from '../../../utils';
+export const IconAction = ({ onClick, icon, bgc }) => {
+    const onClickHandler = (e) => {
+        e.stopPropagation();
+        if (onClick) {
+            onClick();
+        }
+    };
+    return (_jsx("div", { className: jc('relative z-10 flex h-8 w-8 items-center justify-center rounded transition-all duration-200 ease-in-out', onClick ? 'hover:bg-[var(--shadow)] cursor-pointer' : undefined), onClick: onClickHandler, children: _jsx("span", { className: "absolute left-1/2 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full", style: { backgroundColor: bgc }, children: icon }) }));
+};

package/dist/ui/layout/icon-action/icon-action.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { IconAction } from './icon-action';
+declare const meta: Meta<typeof IconAction>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithBackground: Story;

package/dist/ui/layout/icon-action/icon-action.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Settings } from 'lucide-react';
+import { IconAction } from './icon-action';
+const meta = {
+    title: 'Layout/IconAction',
+    component: IconAction,
+    tags: ['autodocs'],
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        icon: _jsx(Settings, { size: 16 }),
+    },
+};
+export const WithBackground = {
+    args: {
+        icon: _jsx(Settings, { size: 16, color: "white" }),
+        bgc: '#ef4444',
+    },
+};

package/dist/ui/layout/index.d.ts

@@ -0,0 +1,5 @@
+export * from './dropdown/dropdown';
+export * from './flex/flex';
+export * from './icon-action/icon-action';
+export * from './main-page-layout/main-page-layout';
+export * from './offset/offset';

package/dist/ui/layout/index.js

@@ -0,0 +1,5 @@
+export * from './dropdown/dropdown';
+export * from './flex/flex';
+export * from './icon-action/icon-action';
+export * from './main-page-layout/main-page-layout';
+export * from './offset/offset';

package/dist/ui/layout/main-page-layout/main-page-layout.d.ts

@@ -0,0 +1,7 @@
+import { type FC, type PropsWithChildren, type ReactNode } from 'react';
+type TProps = {
+    leftPanel?: ReactNode;
+    rightPanel?: ReactNode;
+};
+export declare const MainPageLayout: FC<PropsWithChildren<TProps>>;
+export {};

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { useWidget } from '../../../providers';
+import { Flex } from '../flex/flex';
+export const MainPageLayout = ({ children, leftPanel, rightPanel }) => {
+    const { widget } = useWidget();
+    return (_jsxs("main", { className: "grid h-[100dvh] w-full grid-cols-[300px_1fr_300px] py-xl px-l gap-l", children: [_jsx("aside", { className: "h-full w-full", children: leftPanel }), _jsxs(Flex, { justify: 'center', gap: '16px', type: 'fill', children: [children, widget && _jsx(Fragment, { children: widget.ui }, widget.id)] }), _jsx("aside", { className: "h-full w-full", children: rightPanel })] }));
+};

package/dist/ui/layout/main-page-layout/main-page-layout.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { MainPageLayout } from './main-page-layout';
+declare const meta: Meta<typeof MainPageLayout>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MainPageLayout } from './main-page-layout';
+import { Typo } from '../../information';
+const meta = {
+    title: 'Layout/MainPageLayout',
+    component: MainPageLayout,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        leftPanel: (_jsxs("div", { className: "h-full bg-secondary/20 p-4 border-r border-border", children: [_jsx(Typo, { weight: "500", children: "Left Panel" }), _jsx(Typo, { size: "s", children: "Navigation or filters" })] })),
+        rightPanel: (_jsxs("div", { className: "h-full bg-secondary/20 p-4 border-l border-border", children: [_jsx(Typo, { weight: "500", children: "Right Panel" }), _jsx(Typo, { size: "s", children: "Additional info" })] })),
+        children: (_jsxs("div", { className: "w-full h-full bg-background-accent p-4 rounded-xl shadow-sm", children: [_jsx(Typo, { size: "xl", weight: "500", children: "Main Content Area" }), _jsxs("div", { className: "mt-4 space-y-2", children: [_jsx(Typo, { children: "This is where the main application content goes." }), _jsx(Typo, { color: "secondary", children: "It is centered and has a gap between panels." })] })] })),
+    },
+};

package/dist/ui/layout/offset/offset.d.ts

@@ -0,0 +1,7 @@
+import { type FC, type PropsWithChildren } from 'react';
+type TProps = {
+    type?: 'horizontal' | 'vertical' | 'both';
+    className?: string;
+};
+export declare const Offset: FC<PropsWithChildren<TProps>>;
+export {};

package/dist/ui/layout/offset/offset.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jc } from '../../../utils';
+const typeMap = {
+    horizontal: 'mx-l',
+    vertical: 'my-l',
+    both: 'm-l',
+};
+export const Offset = ({ children, type = 'horizontal', className }) => {
+    return _jsx("div", { className: jc(typeMap[type], className), children: children });
+};

package/dist/ui/layout/offset/offset.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Offset } from './offset';
+declare const meta: Meta<typeof Offset>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Horizontal: Story;
+export declare const Vertical: Story;
+export declare const Both: Story;

package/dist/ui/layout/offset/offset.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Offset } from './offset';
+import { Typo } from '../../information';
+const meta = {
+    title: 'Layout/Offset',
+    component: Offset,
+    tags: ['autodocs'],
+    argTypes: {
+        type: {
+            control: 'select',
+            options: ['horizontal', 'vertical', 'both'],
+        },
+    },
+};
+export default meta;
+export const Horizontal = {
+    args: {
+        type: 'horizontal',
+        children: (_jsx("div", { className: "bg-accent-secondary p-2", children: _jsx(Typo, { children: "Horizontal Offset (mx-l)" }) })),
+    },
+};
+export const Vertical = {
+    args: {
+        type: 'vertical',
+        children: (_jsx("div", { className: "bg-accent-secondary p-2", children: _jsx(Typo, { children: "Vertical Offset (my-l)" }) })),
+    },
+};
+export const Both = {
+    args: {
+        type: 'both',
+        children: (_jsx("div", { className: "bg-accent-secondary p-2", children: _jsx(Typo, { children: "Both Offset (m-l)" }) })),
+    },
+};

package/dist/utils/classes.d.ts

@@ -0,0 +1 @@
+export declare const jc: (...classes: (string | undefined | boolean)[]) => string;

package/dist/utils/classes.js

@@ -0,0 +1 @@
+export const jc = (...classes) => classes.filter(Boolean).join(' ').trim();

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export { jc } from './classes';

package/dist/utils/index.js

@@ -0,0 +1 @@
+export { jc } from './classes';

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@kkkarsss/ui",
+  "version": "1.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.1",
+    "@storybook/addon-docs": "^10.2.1",
+    "@storybook/addon-onboarding": "^10.2.1",
+    "@storybook/addon-vitest": "^10.2.1",
+    "@storybook/react": "^10.2.1",
+    "@storybook/react-vite": "^10.2.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.1",
+    "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.1",
+    "tailwindcss": "^3.4.19",
+    "typescript": "5.9.3",
+    "typescript-eslint": "^8.53.1",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  },
+  "dependencies": {
+    "date-fns": "^4.1.0",
+    "react-datepicker": "^9.1.0",
+    "react-day-picker": "^9.13.0"
+  }
+}