@kkkarsss/ui 1.0.0

package/dist/src/providers/alert/alert-provider.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback, useRef } from 'react';
+import { AlertContext } from './alert-context';
+export function AlertProvider({ children }) {
+    const [currentAlert, setCurrentAlert] = useState(null);
+    const [history, setHistory] = useState([]);
+    const timerRef = useRef(null);
+    const dismissCurrentAlert = useCallback((isRead = false) => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        if (isRead && currentAlert) {
+            setHistory((prev) => prev.map((a) => (a.id === currentAlert.id ? { ...a, isRead: true } : a)));
+        }
+        setCurrentAlert(null);
+    }, [currentAlert]);
+    const addAlert = useCallback((alertData) => {
+        const newAlert = {
+            ...alertData,
+            id: Math.random().toString(36).substring(2, 9),
+            timestamp: new Date(),
+            isRead: false,
+        };
+        setHistory((prev) => [newAlert, ...prev]);
+        setCurrentAlert(newAlert);
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        timerRef.current = setTimeout(() => {
+            setCurrentAlert(null);
+            timerRef.current = null;
+        }, 5000);
+    }, []);
+    const clearHistory = useCallback(() => {
+        setHistory([]);
+    }, []);
+    const markAllAsRead = useCallback(() => {
+        setHistory((prev) => prev.map((a) => ({ ...a, isRead: true })));
+    }, []);
+    const value = {
+        currentAlert,
+        history,
+        addAlert,
+        clearHistory,
+        dismissCurrentAlert,
+        markAllAsRead,
+    };
+    return _jsx(AlertContext.Provider, { value: value, children: children });
+}

package/dist/src/providers/alert/use-alerts.d.ts

@@ -0,0 +1 @@
+export declare const useAlerts: () => import("./alert-context").TAlertContext;

package/dist/src/providers/alert/use-alerts.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { AlertContext } from './alert-context';
+export const useAlerts = () => {
+    const context = useContext(AlertContext);
+    if (context === undefined) {
+        throw new Error('useAlerts must be used within an AlertProvider');
+    }
+    return context;
+};

package/dist/src/providers/index.d.ts

@@ -0,0 +1,9 @@
+export { WidgetsProviderContext } from './widget/widget-context';
+export { WidgetProvider } from './widget/widget-provider';
+export { useWidget } from './widget/use-widgets';
+export { type TTheme, ThemeProviderContext } from './theme/theme-context';
+export { useTheme } from './theme/use-theme';
+export { ThemeProvider } from './theme/theme-provider';
+export { AlertContext, type TAlert } from './alert/alert-context';
+export { AlertProvider } from './alert/alert-provider';
+export { useAlerts } from './alert/use-alerts';

package/dist/src/providers/index.js

@@ -0,0 +1,9 @@
+export { WidgetsProviderContext } from './widget/widget-context';
+export { WidgetProvider } from './widget/widget-provider';
+export { useWidget } from './widget/use-widgets';
+export { ThemeProviderContext } from './theme/theme-context';
+export { useTheme } from './theme/use-theme';
+export { ThemeProvider } from './theme/theme-provider';
+export { AlertContext } from './alert/alert-context';
+export { AlertProvider } from './alert/alert-provider';
+export { useAlerts } from './alert/use-alerts';

package/dist/src/providers/theme/theme-context.d.ts

@@ -0,0 +1,7 @@
+export type TTheme = 'dark' | 'light' | 'system';
+type ThemeProviderState = {
+    theme: TTheme;
+    setTheme: (theme: TTheme) => void;
+};
+export declare const ThemeProviderContext: import("react").Context<ThemeProviderState>;
+export {};

package/dist/src/providers/theme/theme-context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+const initialState = {
+    theme: 'system',
+    setTheme: () => null,
+};
+export const ThemeProviderContext = createContext(initialState);

package/dist/src/providers/theme/theme-provider.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import { type TTheme } from './theme-context';
+type TThemeProviderProps = {
+    children: ReactNode;
+    defaultTheme?: TTheme;
+    storageKey?: string;
+};
+export declare function ThemeProvider({ children, defaultTheme, storageKey, ...props }: TThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/providers/theme/theme-provider.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { ThemeProviderContext } from './theme-context';
+export function ThemeProvider({ children, defaultTheme = 'system', storageKey = 'theme', ...props }) {
+    const [theme, setTheme] = useState(() => localStorage.getItem(storageKey) || defaultTheme);
+    useEffect(() => {
+        const root = window.document.documentElement;
+        root.classList.remove('light', 'dark');
+        if (theme === 'system') {
+            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
+                .matches
+                ? 'dark'
+                : 'light';
+            root.classList.add(systemTheme);
+            return;
+        }
+        root.classList.add(theme);
+    }, [theme]);
+    const value = {
+        theme,
+        setTheme: (theme) => {
+            localStorage.setItem(storageKey, theme);
+            setTheme(theme);
+        },
+    };
+    return (_jsx(ThemeProviderContext.Provider, { ...props, value: value, children: children }));
+}

package/dist/src/providers/theme/use-theme.d.ts

@@ -0,0 +1,4 @@
+export declare const useTheme: () => {
+    theme: import("./theme-context").TTheme;
+    setTheme: (theme: import("./theme-context").TTheme) => void;
+};

package/dist/src/providers/theme/use-theme.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { ThemeProviderContext } from './theme-context';
+export const useTheme = () => {
+    const context = useContext(ThemeProviderContext);
+    if (context === undefined)
+        throw new Error('useTheme must be used within a ThemeProvider');
+    return context;
+};

package/dist/src/providers/widget/use-widgets.d.ts

@@ -0,0 +1,4 @@
+export declare const useWidget: () => {
+    widget: import("./widget-context").TWidget | null;
+    setWidget: (widgets: import("./widget-context").TWidget | null) => void;
+};

package/dist/src/providers/widget/use-widgets.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { WidgetsProviderContext } from './widget-context';
+export const useWidget = () => {
+    const context = useContext(WidgetsProviderContext);
+    if (context === undefined)
+        throw new Error('useWidget must be used within a WidgetsProvider');
+    return context;
+};

package/dist/src/providers/widget/widget-context.d.ts

@@ -0,0 +1,12 @@
+import { type ReactElement } from 'react';
+import type { TBlockProps } from '../../ui';
+export type TWidget = {
+    ui: ReactElement<TBlockProps>;
+    id: string;
+};
+type TWidgetProviderState = {
+    widget: TWidget | null;
+    setWidget: (widgets: TWidget | null) => void;
+};
+export declare const WidgetsProviderContext: import("react").Context<TWidgetProviderState>;
+export {};

package/dist/src/providers/widget/widget-context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+const initialState = {
+    widget: null,
+    setWidget: () => null,
+};
+export const WidgetsProviderContext = createContext(initialState);

package/dist/src/providers/widget/widget-provider.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+type TWidgetProviderProps = {
+    children: ReactNode;
+};
+export declare function WidgetProvider({ children }: TWidgetProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/providers/widget/widget-provider.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { WidgetsProviderContext } from './widget-context';
+export function WidgetProvider({ children }) {
+    const [widget, setWidget] = useState(null);
+    const value = useMemo(() => ({
+        widget,
+        setWidget: (newWidget) => {
+            if (newWidget?.id === widget?.id) {
+                setWidget(newWidget);
+            }
+        },
+    }), [widget]);
+    return _jsx(WidgetsProviderContext.Provider, { value: value, children: children });
+}

package/dist/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/ui/controls/index.d.ts

@@ -0,0 +1,7 @@
+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';

package/dist/src/ui/controls/index.js

@@ -0,0 +1,7 @@
+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';

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

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

package/dist/src/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, label, value, required, disabled, placeholder, size = 's', autoFocus, type = 'text', }) => {
+    return (_jsxs("label", { className: "flex w-full cursor-pointer flex-col gap-[2px]", children: [_jsx(Offset, { children: _jsx(Typo, { size: 's', color: 'secondary', weight: '500', children: label }) }), _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]), type: type, placeholder: placeholder, value: value, onChange: onChange, disabled: disabled, required: required, autoFocus: autoFocus })] }));
+};

package/dist/src/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/src/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/src/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;