@kkkarsss/ui 1.0.0

package/dist/stories/Page.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Header } from './Header';
+import './page.css';
+export const Page = () => {
+    const [user, setUser] = React.useState();
+    return (_jsxs("article", { children: [_jsx(Header, { user: user, onLogin: () => setUser({ name: 'Jane Doe' }), onLogout: () => setUser(undefined), onCreateAccount: () => setUser({ name: 'Jane Doe' }) }), _jsxs("section", { className: "storybook-page", children: [_jsx("h2", { children: "Pages in Storybook" }), _jsxs("p", { children: ["We recommend building UIs with a", ' ', _jsx("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer", children: _jsx("strong", { children: "component-driven" }) }), ' ', "process starting with atomic components and ending with pages."] }), _jsx("p", { children: "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:" }), _jsxs("ul", { children: [_jsx("li", { children: "Use a higher-level connected component. Storybook helps you compose such data from the \"args\" of child component stories" }), _jsx("li", { children: "Assemble data in the page component from your services. You can mock these services out using Storybook." })] }), _jsxs("p", { children: ["Get a guided tutorial on component-driven development at", ' ', _jsx("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer", children: "Storybook tutorials" }), ". Read more in the", ' ', _jsx("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer", children: "docs" }), "."] }), _jsxs("div", { className: "tip-wrapper", children: [_jsx("span", { className: "tip", children: "Tip" }), " Adjust the width of the canvas with the", ' ', _jsx("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", fillRule: "evenodd", children: _jsx("path", { d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z", id: "a", fill: "#999" }) }) }), "Viewports addon in the toolbar"] })] })] }));
+};

package/dist/stories/Page.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{}>;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;

package/dist/stories/Page.stories.js

@@ -0,0 +1,24 @@
+import { expect, userEvent, within } from 'storybook/test';
+import { Page } from './Page';
+const meta = {
+    title: 'Example/Page',
+    component: Page,
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const LoggedOut = {};
+// More on component testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+export const LoggedIn = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const loginButton = canvas.getByRole('button', { name: /Log in/i });
+        await expect(loginButton).toBeInTheDocument();
+        await userEvent.click(loginButton);
+        await expect(loginButton).not.toBeInTheDocument();
+        const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+        await expect(logoutButton).toBeInTheDocument();
+    },
+};

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

@@ -0,0 +1,10 @@
+import { type FC, type ReactNode } from 'react';
+type ButtonVariant = 'active' | 'secondary' | 'selling';
+type ButtonProps = {
+    children: ReactNode;
+    onClick?: VoidFunction;
+    variant?: ButtonVariant;
+    disabled?: boolean;
+};
+export declare const Button: FC<ButtonProps>;
+export {};

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jc } from '../../../utils';
+import { Typo } from '../../information';
+const variantMap = {
+    active: 'bg-[var(--primary)] text-[var(--primary-foreground)]',
+    secondary: 'bg-secondary text-secondary-foreground border border-[var(--border)]',
+    selling: 'bg-accent text-accent-foreground',
+};
+export const Button = ({ children, onClick, variant = 'active', disabled = false }) => {
+    return (_jsx("button", { className: jc('w-auto px-4 py-2 text-[14px] font-medium border border-transparent cursor-pointer outline-none transition-opacity duration-200', 'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none hover:not-disabled:opacity-90', variantMap[variant]), onClick: onClick, disabled: disabled, children: _jsx(Typo, { size: 'm', children: children }) }));
+};

package/dist/ui/controls/button/button.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Active: Story;
+export declare const Secondary: Story;
+export declare const Selling: Story;
+export declare const Disabled: Story;

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

@@ -0,0 +1,38 @@
+import { Button } from './button';
+const meta = {
+    title: 'Controls/Button',
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: {
+        onClick: { action: 'clicked' },
+        variant: {
+            control: 'select',
+            options: ['active', 'secondary', 'selling'],
+        },
+    },
+};
+export default meta;
+export const Active = {
+    args: {
+        children: 'Активная кнопка',
+        variant: 'active',
+    },
+};
+export const Secondary = {
+    args: {
+        children: 'Вторичная кнопка',
+        variant: 'secondary',
+    },
+};
+export const Selling = {
+    args: {
+        children: 'Продающая кнопка',
+        variant: 'selling',
+    },
+};
+export const Disabled = {
+    args: {
+        children: 'Отключенная кнопка',
+        disabled: true,
+    },
+};

package/dist/ui/controls/chip/chip.d.ts

@@ -0,0 +1,12 @@
+import type { LucideProps } from 'lucide-react';
+import { type FC, type ReactElement } from 'react';
+import { type TTypoProps } from '../../information';
+type TVariant = 'default' | 'secondary' | 'accent';
+type TProps = {
+    variant?: TVariant;
+    onClick?: VoidFunction;
+    accLeft?: FC<LucideProps>;
+    children: ReactElement<TTypoProps>;
+};
+export declare const Chip: FC<TProps>;
+export {};

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Activity, createElement } from 'react';
+import { jc } from '../../../utils';
+const variantMap = {
+    default: 'bg-secondary text-secondary-foreground',
+    accent: 'bg-accent text-accent-foreground',
+    secondary: 'bg-transparent text-secondary-foreground border border-secondary-foreground',
+};
+export const Chip = ({ children, onClick, accLeft, variant = 'default' }) => {
+    return (_jsxs("button", { onClick: onClick, className: jc('flex items-center text-nowrap gap-[5px] w-min px-2 py-1 rounded-2xl outline-none border-none cursor-pointer text-[14px]', variantMap[variant]), children: [_jsx(Activity, { mode: accLeft ? 'visible' : 'hidden', children: accLeft ? createElement(accLeft, { size: 14, color: 'white', strokeWidth: 3 }) : null }), children] }));
+};

package/dist/ui/controls/chip/chip.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Chip } from './chip';
+declare const meta: Meta<typeof Chip>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Accent: Story;
+export declare const Secondary: Story;
+export declare const WithIcon: Story;

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Mail } from 'lucide-react';
+import { Chip } from './chip';
+import { Typo } from '../../information';
+const meta = {
+    title: 'Controls/Chip',
+    component: Chip,
+    tags: ['autodocs'],
+    argTypes: {
+        onClick: { action: 'clicked' },
+        variant: {
+            control: 'select',
+            options: ['default', 'secondary', 'accent'],
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: _jsx(Typo, { children: "Chip Content" }),
+        variant: 'default',
+    },
+};
+export const Accent = {
+    args: {
+        children: _jsx(Typo, { children: "Accent Chip" }),
+        variant: 'accent',
+    },
+};
+export const Secondary = {
+    args: {
+        children: _jsx(Typo, { children: "Secondary Chip" }),
+        variant: 'secondary',
+    },
+};
+export const WithIcon = {
+    args: {
+        children: _jsx(Typo, { children: "Email" }),
+        accLeft: Mail,
+        variant: 'accent',
+    },
+};

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

@@ -0,0 +1,8 @@
+import { type FC } from 'react';
+type TColorPickerProps = {
+    value: string;
+    onChange: (color: string) => void;
+    label?: string;
+};
+export declare const ColorPicker: FC<TColorPickerProps>;
+export {};

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '../../../providers';
+import { jc } from '../../../utils';
+import { Typo } from '../../information';
+import { Flex, Offset } from '../../layout';
+const COLORS = [
+    '#3b82f6', // blue
+    '#ef4444', // red
+    '#10b981', // green
+    '#f59e0b', // amber
+    '#6366f1', // indigo
+    '#8b5cf6', // violet
+    '#ec4899', // pink
+    '#14b8a6', // teal
+    '#f97316', // orange
+    '#71717a', // zinc
+];
+export const ColorPicker = ({ value, onChange, label }) => {
+    const { theme } = useTheme();
+    return (_jsxs("div", { className: "flex flex-col gap-[2px]", children: [label && (_jsx(Offset, { children: _jsx(Typo, { size: 's', color: 'secondary', weight: '500', children: label }) })), _jsx(Offset, { children: _jsx(Flex, { direction: 'row', gap: '8px', offset: '4px', children: COLORS.map((color) => (_jsx("button", { type: "button", className: jc('h-6 w-6 rounded-full border-2 transition-transform hover:scale-110 active:scale-95', value === color ? (theme === 'light' ? 'border-foreground' : `border-white`) : 'border-transparent'), style: { backgroundColor: color }, onClick: () => onChange(color), title: color }, color))) }) })] }));
+};

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

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

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

@@ -0,0 +1,21 @@
+import { ColorPicker } from './color-picker';
+const meta = {
+    title: 'Controls/ColorPicker',
+    component: ColorPicker,
+    tags: ['autodocs'],
+    argTypes: {
+        onChange: { action: 'changed' },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        value: '#3b82f6',
+        label: 'Выберите цвет',
+    },
+};
+export const WithoutLabel = {
+    args: {
+        value: '#ef4444',
+    },
+};

package/dist/ui/controls/copy/copy.d.ts

@@ -0,0 +1,6 @@
+import { type FC, type PropsWithChildren } from 'react';
+type CopyProps = PropsWithChildren<{
+    toCopy: string;
+}>;
+export declare const Copy: FC<CopyProps>;
+export {};

package/dist/ui/controls/copy/copy.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+export const Copy = ({ toCopy, children }) => {
+    const [active, setActive] = useState(false);
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(toCopy);
+            setActive(true);
+            setTimeout(() => setActive(false), 150);
+        }
+        catch (e) {
+            console.error('Failed to copy:', e);
+        }
+    };
+    return (_jsx("span", { onClick: handleCopy, className: `
+        cursor-pointer select-none
+        transition-opacity duration-150
+        ${active ? 'opacity-70' : 'opacity-100'}
+      `, children: children ?? toCopy }));
+};

package/dist/ui/controls/copy/copy.stories.d.ts

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

package/dist/ui/controls/copy/copy.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Copy } from './copy';
+import { Typo } from '../../information';
+const meta = {
+    title: 'Controls/Copy',
+    component: Copy,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    args: {
+        toCopy: 'Hello World',
+        children: _jsx(Typo, { children: "Click to copy \"Hello World\"" }),
+    },
+};
+export const JustText = {
+    args: {
+        toCopy: 'Plain text copy',
+    },
+};

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

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+export type TDateInputProps = {
+    value: string;
+    onChange: (value: string) => void;
+    label?: string;
+    placeholder?: string;
+    size?: 's' | 'm' | 'l';
+    disabled?: boolean;
+};
+export declare const DateInput: FC<TDateInputProps>;

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

@@ -0,0 +1,25 @@
+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 { DatePicker } from '../date-picker/date-picker';
+import { Input } from '../input/input';
+export const DateInput = ({ value, onChange, label, placeholder, size = 'm', disabled }) => {
+    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 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, onClose: () => setIsOpen(false), anchorRef: containerRef, children: _jsx(DatePicker, { selected: selectedDate, onSelect: handleDateSelect }) })] }));
+};

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

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

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

@@ -0,0 +1,32 @@
+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)`,
+                },
+            } }) }));
+};

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

@@ -0,0 +1,9 @@
+export * from './button/button';
+export * from './chip/chip';
+export * from './color-picker/color-picker';
+export * from './copy/copy';
+export * from './input/input';
+export * from './select/select';
+export * from './textarea/textarea';
+export * from './date-picker/date-picker';
+export * from './date-input/date-input';

package/dist/ui/controls/index.js

@@ -0,0 +1,9 @@
+export * from './button/button';
+export * from './chip/chip';
+export * from './color-picker/color-picker';
+export * from './copy/copy';
+export * from './input/input';
+export * from './select/select';
+export * from './textarea/textarea';
+export * from './date-picker/date-picker';
+export * from './date-input/date-input';

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

@@ -0,0 +1,15 @@
+import type { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
+export type TInputProps = {
+    value: string;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (e: MouseEvent<HTMLInputElement>) => void;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    size?: 's' | 'm' | 'l';
+    autoFocus?: boolean;
+    type?: 'text' | 'date' | 'number' | 'password';
+    rightAcc?: ReactNode;
+};
+export declare const Input: FC<TInputProps>;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jc } from '../../../utils';
+import { Typo } from '../../information';
+import { Offset } from '../../layout';
+const sizeMap = {
+    s: 'text-[12px] font-normal placeholder:text-[12px] placeholder:font-normal',
+    m: 'text-[14px] font-medium placeholder:text-[14px] placeholder:font-medium',
+    l: 'text-[16px] font-medium placeholder:text-[16px] placeholder:font-medium',
+};
+export const Input = ({ onChange, onClick, label, value, required, disabled, placeholder, size = 's', autoFocus, type = 'text', rightAcc, }) => {
+    return (_jsxs("div", { className: "relative flex w-full", children: [_jsxs("label", { className: "flex w-full cursor-pointer flex-col gap-[2px]", children: [label && (_jsx(Offset, { className: rightAcc ? 'pr-10' : undefined, children: _jsx(Typo, { size: 's', color: 'secondary', weight: '500', children: label }) })), _jsx("div", { className: "relative flex items-center", children: _jsx("input", { className: jc('w-full cursor-text rounded-sm border-none bg-inherit px-4 pb-2 pt-1 outline-none transition-all duration-200 placeholder:text-secondary-foreground', sizeMap[size], rightAcc ? 'pr-10' : undefined), type: type, placeholder: placeholder, value: value, onChange: onChange, onClick: onClick, disabled: disabled, required: required, autoFocus: autoFocus }) })] }), rightAcc && _jsx("div", { className: "absolute right-3 flex items-center h-full top-0", children: rightAcc })] }));
+};

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Input } from './input';
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const Password: Story;
+export declare const Disabled: Story;

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

@@ -0,0 +1,46 @@
+import { Input } from './input';
+const meta = {
+    title: 'Controls/Input',
+    component: Input,
+    tags: ['autodocs'],
+    argTypes: {
+        onChange: { action: 'changed' },
+        size: {
+            control: 'select',
+            options: ['s', 'm', 'l'],
+        },
+        type: {
+            control: 'select',
+            options: ['text', 'date', 'number', 'password'],
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Label',
+        value: '',
+        placeholder: 'Placeholder...',
+    },
+};
+export const WithValue = {
+    args: {
+        label: 'Username',
+        value: 'JohnDoe',
+        placeholder: 'Enter username',
+    },
+};
+export const Password = {
+    args: {
+        label: 'Password',
+        value: 'secret',
+        type: 'password',
+    },
+};
+export const Disabled = {
+    args: {
+        label: 'Disabled Input',
+        value: 'Cannot edit this',
+        disabled: true,
+    },
+};

package/dist/ui/controls/select/select.d.ts

@@ -0,0 +1,14 @@
+import { type ReactElement } from 'react';
+export type TSelectOption<T> = {
+    value: T;
+    label: string;
+};
+export type TSelectProps<T> = {
+    options: TSelectOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+};
+export declare function Select<T = string>({ options, value, onChange, label, placeholder, disabled, }: TSelectProps<T>): ReactElement;

package/dist/ui/controls/select/select.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from 'lucide-react';
+import { useMemo, useRef, useState } from 'react';
+import { jc } from '../../../utils';
+import { Cell, Typo } from '../../information';
+import { Dropdown, Flex, Offset } from '../../layout';
+import { Input } from '../input/input';
+export function Select({ options, value, onChange, label, placeholder = 'Select...', disabled, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [search, setSearch] = useState('');
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const containerRef = useRef(null);
+    const selectedOption = useMemo(() => options.find((opt) => opt.value === value), [options, value]);
+    const filteredOptions = useMemo(() => {
+        if (!search)
+            return options;
+        return options.filter((opt) => opt.label.toLowerCase().includes(search.toLowerCase()));
+    }, [options, search]);
+    const handleSelect = (option) => {
+        onChange(option.value);
+        setIsOpen(false);
+        setSearch('');
+        setActiveIndex(-1);
+    };
+    const handleToggle = () => {
+        if (disabled)
+            return;
+        const nextOpen = !isOpen;
+        setIsOpen(nextOpen);
+        setActiveIndex(-1);
+        if (!nextOpen) {
+            setSearch('');
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        if (!isOpen) {
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
+                setIsOpen(true);
+                setActiveIndex(-1);
+                e.preventDefault();
+            }
+            return;
+        }
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                setActiveIndex((prev) => (prev < filteredOptions.length - 1 ? prev + 1 : prev));
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setActiveIndex((prev) => (prev > 0 ? prev - 1 : 0));
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (activeIndex >= 0 && activeIndex < filteredOptions.length) {
+                    handleSelect(filteredOptions[activeIndex]);
+                }
+                else if (filteredOptions.length === 1) {
+                    handleSelect(filteredOptions[0]);
+                }
+                break;
+            case 'Escape':
+                setIsOpen(false);
+                setActiveIndex(-1);
+                break;
+        }
+    };
+    return (_jsxs("div", { ref: containerRef, className: jc('relative flex w-full cursor-pointer flex-col gap-[2px] outline-none', isOpen && 'z-[1001]'), onClick: handleToggle, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [label && (_jsx(Offset, { className: "pr-10", children: _jsx(Typo, { size: 's', color: 'secondary', weight: '500', children: label }) })), _jsxs("div", { className: "relative w-full", children: [_jsxs("div", { className: jc('flex min-h-[36px] w-full items-center justify-between rounded bg-background-accent transition-all duration-200 pr-10'), children: [isOpen ? (_jsx(Input, { size: 'l', autoFocus: true, placeholder: selectedOption?.label || placeholder, value: search, onChange: (e) => {
+                                    setSearch(e.target.value);
+                                    setActiveIndex(-1);
+                                }, onClick: (e) => e.stopPropagation() })) : (_jsx(Offset, { children: _jsx(Typo, { size: 'l', color: selectedOption?.label ? 'default' : 'secondary', weight: '500', children: selectedOption?.label || placeholder }) })), _jsx(ChevronDown, { size: 16, className: jc('opacity-0 transition-transform duration-200', isOpen ? 'rotate-180' : undefined) })] }), _jsx("div", { className: "absolute right-3 flex items-center h-full top-0 pointer-events-none", children: _jsx(ChevronDown, { size: 16, className: jc('opacity-50 transition-transform duration-200', isOpen ? 'rotate-180' : undefined) }) }), _jsx(Dropdown, { isOpen: isOpen, onClose: () => {
+                            setIsOpen(false);
+                            setActiveIndex(-1);
+                        }, anchorRef: containerRef, children: filteredOptions.length > 0 ? (_jsx(Flex, { direction: 'column', gap: '4px', children: filteredOptions.map((option, index) => (_jsx(Cell, { active: index === activeIndex, onClick: (e) => {
+                                    e.stopPropagation();
+                                    handleSelect(option);
+                                }, title: _jsx(Typo, { size: 'l', color: 'secondary', children: option.label }) }, option.label))) })) : (_jsx("div", { className: "px-4 py-2 text-[12px] text-secondary-foreground", children: "No options found" })) })] })] }));
+}

package/dist/ui/controls/select/select.stories.d.ts

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