@kkkarsss/ui 1.0.0

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

@@ -0,0 +1,40 @@
+import { Select } from './select';
+const meta = {
+    title: 'Controls/Select',
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: {
+        onChange: { action: 'changed' },
+    },
+};
+export default meta;
+const options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+    { value: '4', label: 'Option 4' },
+    { value: '5', label: 'Option 5' },
+];
+export const Default = {
+    args: {
+        label: 'Choose an option',
+        options,
+        value: '1',
+        placeholder: 'Select...',
+    },
+};
+export const WithoutLabel = {
+    args: {
+        options,
+        value: '',
+        placeholder: 'Pick something',
+    },
+};
+export const Disabled = {
+    args: {
+        label: 'Disabled Select',
+        options,
+        value: '1',
+        disabled: true,
+    },
+};

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

@@ -0,0 +1,11 @@
+import { type ChangeEvent, type FC } from 'react';
+export type TTextAreaProps = {
+    value: string;
+    onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    size?: 's' | 'm' | 'l';
+};
+export declare const TextArea: FC<TTextAreaProps>;

package/dist/ui/controls/textarea/textarea.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+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 TextArea = ({ onChange, label, value, required, disabled, placeholder, size = 'm', }) => {
+    const textareaRef = useRef(null);
+    useEffect(() => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = 'auto';
+            textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+        }
+    }, [value]);
+    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("textarea", { ref: textareaRef, className: jc('w-full cursor-text resize-none overflow-hidden rounded-sm border-none bg-inherit px-4 pb-2 pt-1 outline-none transition-all duration-200 placeholder:text-secondary-foreground', sizeMap[size]), placeholder: placeholder, value: value, onChange: onChange, disabled: disabled, required: required, rows: 1 })] }));
+};

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

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

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

@@ -0,0 +1,35 @@
+import { TextArea } from './textarea';
+const meta = {
+    title: 'Controls/TextArea',
+    component: TextArea,
+    tags: ['autodocs'],
+    argTypes: {
+        onChange: { action: 'changed' },
+        size: {
+            control: 'select',
+            options: ['s', 'm', 'l'],
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Description',
+        value: '',
+        placeholder: 'Type something...',
+    },
+};
+export const WithValue = {
+    args: {
+        label: 'Bio',
+        value: 'This is a long text that should automatically resize the textarea as it gets longer and longer...',
+        placeholder: 'Tell us about yourself',
+    },
+};
+export const Disabled = {
+    args: {
+        label: 'Disabled TextArea',
+        value: 'ReadOnly content',
+        disabled: true,
+    },
+};

package/dist/ui/controls/theme-toggle/theme-toggle.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ThemeToggle: React.FC;

package/dist/ui/controls/theme-toggle/theme-toggle.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from '../../../providers';
+import { Button } from '../button/button';
+export const ThemeToggle = () => {
+    const { theme, setTheme } = useTheme();
+    const toggleTheme = () => {
+        setTheme(theme === 'light' ? 'dark' : 'light');
+    };
+    return (_jsx(Button, { variant: "secondary", onClick: toggleTheme, children: theme === 'light' ? 'Темная тема' : 'Светлая тема' }));
+};

package/dist/ui/index.d.ts

@@ -0,0 +1,3 @@
+export * from './information';
+export * from './controls';
+export * from './layout';

package/dist/ui/index.js

@@ -0,0 +1,3 @@
+export * from './information';
+export * from './controls';
+export * from './layout';

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

@@ -0,0 +1,13 @@
+import type { FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
+import type { TTypoProps } from '../text/typo';
+export type TBlockProps = PropsWithChildren<{
+    title?: ReactElement<TTypoProps>;
+    type?: 'fill' | 'hug';
+    topAcc?: ReactNode;
+    filters?: ReactNode;
+    maxWidth?: number | string;
+    maxHeight?: number | string;
+    minWidth?: number | string;
+    minHeight?: number | string;
+}>;
+export declare const Block: FC<TBlockProps>;

package/dist/ui/information/block/block.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jc } from '../../../utils';
+import { Flex, Offset } from '../../layout';
+const typeMap = {
+    fill: 'h-full',
+    hug: 'h-auto',
+};
+export const Block = ({ children, title, topAcc, filters, type = 'fill', maxWidth, maxHeight, minWidth, minHeight, }) => {
+    return (_jsxs("div", { className: jc('w-full flex flex-col', 'rounded-2xl', 'bg-background-accent', 'shadow-[0_0_8px_var(--shadow)]', 'scrollbar-none', 'overflow-hidden', typeMap[type]), style: { maxWidth, maxHeight, minWidth, minHeight }, children: [_jsx("div", { className: jc('sticky', 'top-0', 'z-20', 'bg-background-accent', 'w-full', 'shrink-0'), children: _jsxs(Flex, { direction: 'column', children: [_jsxs(Flex, { justify: 'space-between', align: 'center', children: [title && _jsx(Offset, { type: 'both', children: title }), _jsx("div", { className: 'mx-m', children: _jsx(Flex, { direction: 'column', children: _jsx(Flex, { align: 'center', gap: '4px', children: topAcc }) }) })] }), filters && _jsx("div", { className: 'mb-l', children: filters })] }) }), _jsx("div", { className: "flex-1 overflow-auto scrollbar-none", children: _jsx(Flex, { direction: 'column', type: 'fill', children: children }) })] }));
+};

package/dist/ui/information/block/block.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Block } from './block';
+declare const meta: Meta<typeof Block>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithTopAcc: Story;
+export declare const Fill: Story;
+export declare const WithNotFound: Story;

package/dist/ui/information/block/block.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Block } from './block';
+import { NotFound } from '../not-found/not-found';
+import { Typo } from '../text/typo';
+const meta = {
+    title: 'Information/Block',
+    component: Block,
+    tags: ['autodocs'],
+    argTypes: {
+        type: {
+            control: 'select',
+            options: ['fill', 'hug'],
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        title: _jsx(Typo, { weight: "500", children: "Block Title" }),
+        children: (_jsx("div", { className: "p-4", children: _jsx(Typo, { children: "This is the content of the block." }) })),
+        type: 'hug',
+    },
+};
+export const WithTopAcc = {
+    args: {
+        title: _jsx(Typo, { weight: "500", children: "Settings" }),
+        topAcc: _jsx("button", { className: "text-xs text-accent", children: "Edit" }),
+        children: (_jsx("div", { className: "p-4", children: _jsx(Typo, { children: "Content with top accessory." }) })),
+        type: 'hug',
+    },
+};
+export const Fill = {
+    args: {
+        title: _jsx(Typo, { weight: "500", children: "Full Height Block" }),
+        children: (_jsx("div", { className: "p-4 h-[200px]", children: _jsx(Typo, { children: "This block is set to fill height." }) })),
+        type: 'fill',
+        maxHeight: 300,
+    },
+};
+export const WithNotFound = {
+    args: {
+        title: _jsx(Typo, { weight: "500", children: "Empty State" }),
+        children: _jsx(NotFound, {}),
+        minHeight: '200px',
+        type: 'hug',
+    },
+};

package/dist/ui/information/calendar-like/calendar-like.d.ts

@@ -0,0 +1,24 @@
+import { type FC, type ReactNode, type DragEvent } from 'react';
+export type TCalendarItemProps = {
+    id: string;
+    title: string;
+    description?: string;
+    isCompleted?: boolean;
+    isInWork?: boolean;
+    onDragStart?: (e: DragEvent<HTMLDivElement>, id: string) => void;
+    onClick?: (id: string) => void;
+    onResize?: (id: string, newEstimatedTime: number) => void;
+    icon?: ReactNode;
+    estimatedTime?: number;
+    width?: string;
+    left?: string;
+    className?: string;
+    color?: string;
+};
+export declare const CalendarItem: FC<TCalendarItemProps>;
+export type TCalendarLikeProps = {
+    hours?: number[];
+    onDrop?: (e: DragEvent<HTMLDivElement>, hour: number) => void;
+    renderItem?: (hour: number) => ReactNode;
+};
+export declare const CalendarLike: FC<TCalendarLikeProps>;

package/dist/ui/information/calendar-like/calendar-like.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExternalLink } from 'lucide-react';
+import { useState } from 'react';
+import { jc } from '../../../utils';
+import { Flex } from '../../layout';
+import { Offset } from '../../layout';
+import { Typo } from '../text/typo';
+export const CalendarItem = ({ id, title, description, isCompleted, isInWork, onDragStart, onClick, onResize, icon, estimatedTime = 30, width = '100%', left = '0%', className, color, }) => {
+    const [previewEstimatedTime, setPreviewEstimatedTime] = useState(null);
+    const handleMouseDown = (e) => {
+        if (onResize) {
+            e.preventDefault();
+            e.stopPropagation();
+            const startY = e.clientY;
+            const startHeight = (estimatedTime / 60) * 80;
+            const onMouseMove = (moveEvent) => {
+                const deltaY = moveEvent.clientY - startY;
+                const newHeight = Math.max(20, startHeight + deltaY);
+                // Round to nearest 15 minutes
+                const newEstimatedTime = Math.max(15, Math.round(((newHeight / 80) * 60) / 15) * 15);
+                setPreviewEstimatedTime(newEstimatedTime);
+            };
+            const onMouseUp = (upEvent) => {
+                const deltaY = upEvent.clientY - startY;
+                const newHeight = Math.max(20, startHeight + deltaY);
+                const newEstimatedTime = Math.max(15, Math.round(((newHeight / 80) * 60) / 15) * 15);
+                if (newEstimatedTime !== estimatedTime) {
+                    onResize(id, newEstimatedTime);
+                }
+                setPreviewEstimatedTime(null);
+                document.removeEventListener('mousemove', onMouseMove);
+                document.removeEventListener('mouseup', onMouseUp);
+                // Prevent click event after resize
+                const clickPreventer = (e) => {
+                    e.stopImmediatePropagation();
+                    document.removeEventListener('click', clickPreventer, true);
+                };
+                document.addEventListener('click', clickPreventer, true);
+            };
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        }
+    };
+    const displayEstimatedTime = previewEstimatedTime ?? estimatedTime;
+    return (_jsx("div", { draggable: !!onDragStart, onDragStart: (e) => {
+            onDragStart?.(e, id);
+            // Delay applying pointer-events-none to allow the drag operation to start
+            setTimeout(() => {
+                const el = e.currentTarget;
+                if (el)
+                    el.style.pointerEvents = 'none';
+            }, 0);
+        }, onDragEnd: (e) => {
+            const el = e.currentTarget;
+            if (el)
+                el.style.pointerEvents = '';
+        }, style: { height: `${(displayEstimatedTime / 60) * 80}px`, width, left }, className: jc('calendar-item absolute p-[2px] transition-all flex flex-col z-50 select-none', onDragStart ? 'cursor-move' : '', 'hover:z-[60]', previewEstimatedTime !== null ? 'transition-none z-[60]' : '', className), children: _jsxs("div", { className: jc('w-full h-full p-1 rounded-sm border flex flex-col transition-colors relative', !color && (isCompleted ? 'opacity-50 border-secondary bg-accent/50' : 'border-accent bg-accent'), color && (isCompleted ? 'opacity-50' : ''), previewEstimatedTime !== null ? '!opacity-100' : ''), style: {
+                backgroundColor: color ? `${color}80` : undefined,
+                borderColor: color ? color : undefined,
+            }, children: [_jsxs(Flex, { gap: "8px", align: "center", justify: "space-between", type: "fill", children: [_jsxs(Flex, { gap: "8px", align: "center", type: "fill", className: "min-w-0 flex-1", children: [_jsx(Typo, { size: "s", weight: "500", textDecoration: isCompleted ? 'line-through' : 'none', className: "truncate", children: title }), isInWork && icon] }), onClick && (_jsx("div", { onClick: (e) => {
+                                e.stopPropagation();
+                                onClick(id);
+                            }, className: "cursor-pointer hover:text-primary transition-colors p-0.5", children: _jsx(ExternalLink, { size: 14 }) }))] }), description && displayEstimatedTime > 30 && (_jsx("div", { className: "truncate", children: _jsx(Typo, { size: "xs", color: "secondary", children: description }) })), onResize && !isCompleted && (_jsx("div", { className: "absolute bottom-0 left-0 right-1 h-2 cursor-ns-resize group/resize flex items-center justify-center", onMouseDown: handleMouseDown, children: _jsx("div", { className: "w-8 h-1 bg-accent/30 rounded-full opacity-0 group-hover/resize:opacity-100 transition-opacity" }) }))] }) }));
+};
+const DEFAULT_HOURS = Array.from({ length: 24 }, (_, i) => i);
+export const CalendarLike = ({ hours = DEFAULT_HOURS, onDrop, renderItem }) => {
+    const handleDragOver = (e) => {
+        e.preventDefault();
+    };
+    return (_jsx(Offset, { type: 'vertical', children: _jsx("div", { className: "relative border-l border-secondary/20 ml-12", children: hours.map((hour) => (_jsxs("div", { onDragOver: handleDragOver, onDrop: (e) => onDrop?.(e, hour), className: "relative h-20 border-b border-secondary-foreground group hover:z-10 has-[.calendar-item:hover]:z-30 has-[.calendar-item:active]:z-30", children: [_jsx("div", { className: "absolute -left-12 top-0 -translate-y-1/2 w-10 text-right", children: _jsxs(Typo, { size: "xs", color: "secondary", children: [String(hour).padStart(2, '0'), ":00"] }) }), _jsx("div", { className: "pl-4 py-1 relative h-full", children: renderItem?.(hour) })] }, hour))) }) }));
+};

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

@@ -0,0 +1,26 @@
+import type { LucideProps } from 'lucide-react';
+import { type FC, type MouseEvent, type ReactElement } from 'react';
+import type { TTypoProps, TUIColor } from '../text/typo';
+export type TAccessory = {
+    icon: FC<LucideProps>;
+    onClick?: VoidFunction;
+    color?: string;
+    strokeWidth?: number;
+    bgc?: CSSStyleDeclaration['backgroundColor'];
+};
+export type TCellProps = {
+    title: ReactElement<TTypoProps>;
+    subtitle?: ReactElement<TTypoProps>;
+    description?: ReactElement<TTypoProps>;
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+    accLeft?: TAccessory[];
+    accRight?: TAccessory[];
+    disabled?: boolean;
+    active?: boolean;
+    tags?: {
+        id: string;
+        title: string;
+        color?: TUIColor;
+    }[];
+};
+export declare const Cell: FC<TCellProps>;

package/dist/ui/information/cell/cell.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Activity, createElement } from 'react';
+import { jc } from '../../../utils';
+import { Flex, IconAction } from '../../layout';
+import { Tag } from '../tag/tag';
+export const Cell = ({ title, subtitle, description, accLeft, accRight, onClick, tags, disabled = false, active = false, }) => {
+    const getColor = (defaultColor = 'default') => {
+        if (disabled)
+            return { ui: 'secondary', icon: 'var(--secondary-foreground)' };
+        if (active)
+            return { ui: 'accent', icon: 'var(--accent)' };
+        return { ui: defaultColor || 'default', icon: 'var(--foreground)' };
+    };
+    return (_jsx("div", { className: jc('w-full px-l py-m select-none min-h-[32px]', onClick && !disabled ? 'cursor-pointer transition-all duration-200 hover:bg-[var(--shadow)]' : undefined), onClick: !disabled ? onClick : undefined, children: _jsxs(Flex, { type: 'fill', justify: 'space-between', children: [_jsx(Activity, { mode: accLeft?.length ? 'visible' : 'hidden', children: accLeft?.map((acc, i) => (_jsx(IconAction, { icon: createElement(acc.icon, {
+                            size: 16,
+                            color: acc.color || getColor().icon,
+                            strokeWidth: acc.strokeWidth || 2,
+                        }), bgc: acc.bgc, onClick: acc.onClick }, acc.icon.name + i.toString()))) }), _jsxs(Flex, { direction: 'column', type: 'fill', justify: 'center', gap: '4px', children: [subtitle &&
+                            React.cloneElement(subtitle, {
+                                color: getColor(subtitle.props.color).ui,
+                            }), React.cloneElement(title, {
+                            color: getColor(title.props.color).ui,
+                        }), description &&
+                            React.cloneElement(description, {
+                                color: getColor(description.props.color).ui,
+                            }), !!tags?.length && (_jsx("span", { className: 'mt-xs flex gap-xs', children: tags?.map((tag) => (_jsx(Tag, { color: tag.color, children: tag.title }, tag.id))) }))] }), _jsx(Activity, { mode: accRight?.length ? 'visible' : 'hidden', children: accRight?.map((acc, i) => (_jsx(IconAction, { icon: createElement(acc.icon, {
+                            size: 16,
+                            color: acc.color || getColor().icon,
+                            strokeWidth: acc.strokeWidth || 2,
+                        }), bgc: acc.bgc, onClick: acc.onClick }, acc.icon.name + i.toString()))) })] }) }));
+};

package/dist/ui/information/cell/cell.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Cell } from './cell';
+declare const meta: Meta<typeof Cell>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithSubtitleAndDescription: Story;
+export declare const WithAccessories: Story;
+export declare const WithTags: Story;
+export declare const Active: Story;
+export declare const Disabled: Story;

package/dist/ui/information/cell/cell.stories.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Mail, Settings } from 'lucide-react';
+import { Cell } from './cell';
+import { Typo } from '../text/typo';
+const meta = {
+    title: 'Information/Cell',
+    component: Cell,
+    tags: ['autodocs'],
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        title: _jsx(Typo, { weight: "500", children: "Cell Title" }),
+    },
+};
+export const WithSubtitleAndDescription = {
+    args: {
+        title: _jsx(Typo, { weight: "500", children: "John Doe" }),
+        subtitle: _jsx(Typo, { size: "s", children: "Lead Developer" }),
+        description: _jsx(Typo, { size: "xs", children: "Currently working on Storybook integration." }),
+    },
+};
+export const WithAccessories = {
+    args: {
+        title: _jsx(Typo, { weight: "500", children: "Contact Support" }),
+        accLeft: [
+            {
+                icon: Mail,
+            },
+        ],
+        accRight: [
+            {
+                icon: Settings,
+                onClick: () => alert('Settings clicked'),
+            },
+        ],
+    },
+};
+export const WithTags = {
+    args: {
+        title: _jsx(Typo, { weight: "500", children: "Task #123" }),
+        tags: [
+            { id: '1', title: 'High Priority', color: '#ef4444' },
+            { id: '2', title: 'Feature', color: '#3b82f6' },
+        ],
+    },
+};
+export const Active = {
+    args: {
+        title: _jsx(Typo, { weight: "500", children: "Active Cell" }),
+        active: true,
+    },
+};
+export const Disabled = {
+    args: {
+        title: _jsx(Typo, { weight: "500", children: "Disabled Cell" }),
+        disabled: true,
+    },
+};

package/dist/ui/information/cell/cells-block.d.ts

@@ -0,0 +1,9 @@
+import type { FC, ReactElement } from 'react';
+import type { TCellProps } from './cell';
+import type { TTypoProps } from '../text/typo';
+type TProps = {
+    title?: ReactElement<TTypoProps>;
+    children: ReactElement<TCellProps> | ReactElement<TCellProps>[];
+};
+export declare const CellsBlock: FC<TProps>;
+export {};

package/dist/ui/information/cell/cells-block.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Block } from '../block/block';
+export const CellsBlock = ({ children, title }) => {
+    return _jsx(Block, { title: title, children: children });
+};

package/dist/ui/information/cell/cells-block.stories.d.ts

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

package/dist/ui/information/cell/cells-block.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Cell } from './cell';
+import { CellsBlock } from './cells-block';
+import { Typo } from '../text/typo';
+const meta = {
+    title: 'Information/CellsBlock',
+    component: CellsBlock,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    args: {
+        title: _jsx(Typo, { weight: "500", children: "Group of Cells" }),
+        children: [
+            _jsx(Cell, { title: _jsx(Typo, { children: "First Cell" }) }, "1"),
+            _jsx(Cell, { title: _jsx(Typo, { children: "Second Cell" }) }, "2"),
+            _jsx(Cell, { title: _jsx(Typo, { children: "Third Cell" }) }, "3"),
+        ],
+    },
+};

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

@@ -0,0 +1,8 @@
+export * from './block/block';
+export * from './cell/cell';
+export * from './cell/cells-block';
+export * from './spinner/spinner';
+export * from './not-found/not-found';
+export * from './tag/tag';
+export * from './text/typo';
+export * from './calendar-like/calendar-like';

package/dist/ui/information/index.js

@@ -0,0 +1,8 @@
+export * from './block/block';
+export * from './cell/cell';
+export * from './cell/cells-block';
+export * from './spinner/spinner';
+export * from './not-found/not-found';
+export * from './tag/tag';
+export * from './text/typo';
+export * from './calendar-like/calendar-like';

package/dist/ui/information/not-found/not-found.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const NotFound: FC;

package/dist/ui/information/not-found/not-found.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex } from '../../layout';
+import { Typo } from '../text/typo';
+export const NotFound = () => {
+    return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", type: "fill", gap: "8px", children: [_jsx(Typo, { size: "xl", weight: "500", color: "secondary", children: "404" }), _jsx(Typo, { color: "secondary", children: "\u0414\u0430\u043D\u043D\u044B\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u044B" })] }));
+};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Spinner: React.FC;

package/dist/ui/information/spinner/spinner.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader2 } from 'lucide-react';
+export const Spinner = () => {
+    return (_jsxs("span", { role: "status", "aria-label": "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430", className: "inline-flex items-center", children: [_jsx(Loader2, { size: 16, strokeWidth: 2, className: "animate-spin text-accent" }), _jsx("span", { className: "sr-only", children: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430" })] }));
+};

package/dist/ui/information/spinner/spinner.stories.d.ts

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

package/dist/ui/information/spinner/spinner.stories.js

@@ -0,0 +1,8 @@
+import { Spinner } from './spinner';
+const meta = {
+    title: 'Information/Spinner',
+    component: Spinner,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {};

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

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+export type TTagProps = {
+    children: string;
+    color?: string;
+};
+export declare const Tag: FC<TTagProps>;

package/dist/ui/information/tag/tag.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typo } from '../text/typo';
+export const Tag = ({ children, color }) => {
+    return (_jsx("span", { className: `inline py-xs text-nowrap px-m no-underline rounded-xl text-xxs w-min`, style: {
+            backgroundColor: `${color}22`,
+        }, children: _jsx(Typo, { size: 'inherit', weight: '500', color: color, children: children }) }));
+};

package/dist/ui/information/tag/tag.stories.d.ts

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

package/dist/ui/information/tag/tag.stories.js

@@ -0,0 +1,25 @@
+import { Tag } from './tag';
+const meta = {
+    title: 'Information/Tag',
+    component: Tag,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    args: {
+        children: 'Priority',
+        color: '#ef4444',
+    },
+};
+export const Blue = {
+    args: {
+        children: 'Feature',
+        color: '#3b82f6',
+    },
+};
+export const Green = {
+    args: {
+        children: 'Completed',
+        color: '#10b981',
+    },
+};

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

@@ -0,0 +1,13 @@
+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'];
+    className?: string;
+}>;
+export declare const Typo: FC<TTypoProps>;
+export {};