@kkkarsss/ui 1.0.0

package/dist/src/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: "relative flex w-full cursor-pointer flex-col gap-[2px] outline-none", onClick: handleToggle, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [label && (_jsx(Offset, { 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 pb-1 transition-all duration-200'), 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-50 transition-transform duration-200 mr-l', 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/src/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;

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

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

package/dist/src/ui/index.js

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

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

@@ -0,0 +1,10 @@
+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;
+    maxWidth?: number | string;
+    maxHeight?: number | string;
+}>;
+export declare const Block: FC<TBlockProps>;

package/dist/src/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, type = 'fill', maxWidth, maxHeight, }) => {
+    return (_jsx("div", { className: jc('w-full', 'relative rounded-2xl', 'bg-background-accent', 'shadow-[0_0_8px_var(--shadow)]', 'scrollbar-none', 'overflow-hidden', 'overflow-y-auto', typeMap[type]), style: { maxWidth, maxHeight }, children: _jsxs(Flex, { direction: 'column', type: 'fill', children: [_jsx("div", { className: jc('sticky', 'top-0', 'z-20', 'bg-background-accent', 'w-full'), children: _jsxs(Flex, { justify: 'space-between', align: 'center', children: [title && _jsx(Offset, { type: 'both', children: title }), _jsx("div", { className: 'mx-m', children: _jsx(Flex, { align: 'center', gap: '4px', children: topAcc }) })] }) }), children] }) }));
+};

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

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

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Block } from './block';
+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,
+    },
+};

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

@@ -0,0 +1,6 @@
+export * from './block/block';
+export * from './cell/cell';
+export * from './cell/cells-block';
+export * from './spinner/spinner';
+export * from './tag/tag';
+export * from './text/typo';

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

@@ -0,0 +1,6 @@
+export * from './block/block';
+export * from './cell/cell';
+export * from './cell/cells-block';
+export * from './spinner/spinner';
+export * from './tag/tag';
+export * from './text/typo';

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

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

package/dist/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/ui/information/text/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/src/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', }) => {
+    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/src/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;