@phpsoftbox/react-softbox 0.2.0 → 0.4.0

package/README.md

@@ -9,7 +9,39 @@ import '@phpsoftbox/react-softbox/foundations/index.css';
 ```
 
 ```ts
-import { Alert, Badge, Breadcrumbs, Button, Card, CollapseButton, Drawer, Dropdown, FloatLabel, FormField, Grid, Heading, Image, Input, Menu, Modal, Notifier, Pagination, Progress, Radio, Row, Select, Stack, Switch, Tabs, Text, Textarea } from '@phpsoftbox/react-softbox';
+import {
+  Alert,
+  Badge,
+  Breadcrumbs,
+  Button,
+  Card,
+  Checkbox,
+  CollapseButton,
+  Drawer,
+  Dropdown,
+  FileUploader,
+  FloatLabel,
+  FormField,
+  Grid,
+  Heading,
+  Image,
+  Input,
+  Menu,
+  Modal,
+  Notifier,
+  Pagination,
+  Progress,
+  Radio,
+  Row,
+  Select,
+  Stack,
+  Switch,
+  Table,
+  Tabs,
+  Text,
+  Textarea,
+  Tooltip,
+} from '@phpsoftbox/react-softbox';
 ```
 
 ## Тема
@@ -27,6 +59,8 @@ setThemeMode('dark');
 - `docs/layout.md`
 - `docs/navigation.md`
 - `docs/forms.md`
+- `docs/table.md`
+- `docs/tooltip.md`
 - `docs/overlays.md`
 - `docs/feedback.md`
 - `docs/card.md`
@@ -62,6 +96,7 @@ yarn build
 <Button variant="primary">Primary</Button>
 <Button variant="info" appearance="outline">Info</Button>
 <Button variant="danger" appearance="ghost">Danger</Button>
+<Button variant="primary" size="sm">Small</Button>
 ```
 
 ### Input / FloatLabel
@@ -84,6 +119,7 @@ yarn build
 ```tsx
 <Textarea placeholder="Комментарий" />
 <Radio name="mode" label="Основной" />
+<Checkbox label="Согласен с условиями" />
 ```
 
 ### Switch
@@ -99,6 +135,50 @@ yarn build
 <Select label="Сервисы" options={options} multiple searchable />
 ```
 
+### Table
+
+```tsx
+const columns = [
+  { id: 'name', header: 'Название', accessor: 'name' },
+  { id: 'amount', header: 'Сумма', accessor: 'amount', align: 'right', sortable: true },
+];
+
+<Table columns={columns} data={rows} />;
+```
+
+```tsx
+<Table
+  columns={columns}
+  data={rows}
+  selection={{
+    selectedIds,
+    onToggle: (id) => setSelected((prev) => prev.includes(id) ? prev.filter((key) => key !== id) : [...prev, id]),
+    onToggleAll: (ids) => setSelected((prev) => ids.length > 0 && ids.every((id) => prev.includes(id)) ? [] : ids),
+  }}
+  renderBulkAction={(ids) => <span>Выбрано: {ids.length}</span>}
+/>;
+```
+
+### FileUploader
+
+```tsx
+<FileUploader
+  allowedTypes={['.jpg', '.png', '.pdf']}
+  maxFileSizeKb={2048}
+  multiple
+  showPreview
+  onUpload={(files) => api.upload(files)}
+/>;
+```
+
+### Tooltip
+
+```tsx
+<Tooltip content="Подсказка">
+  <Button>Наведи</Button>
+</Tooltip>
+```
+
 ### Grid / Flex
 
 ```tsx

package/dist/components/Button/Button.d.ts

@@ -2,9 +2,11 @@ import React from 'react';
 import type { UiVariant } from '../../types';
 type ButtonVariant = UiVariant;
 type ButtonAppearance = 'solid' | 'outline' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
 type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: ButtonVariant | 'ghost' | 'outline';
     appearance?: ButtonAppearance;
+    size?: ButtonSize;
 };
-export default function Button({ variant, appearance, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Button({ variant, appearance, size, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Button/Button.js

@@ -1,17 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import styles from './Button.module.css';
 const variantClass = {
-    default: styles.variantDefault,
-    primary: styles.variantPrimary,
-    info: styles.variantInfo,
-    success: styles.variantSuccess,
-    warning: styles.variantWarning,
-    danger: styles.variantDanger,
+    default: 'btn-default',
+    primary: 'btn-primary',
+    info: 'btn-info',
+    success: 'btn-success',
+    warning: 'btn-warning',
+    danger: 'btn-danger',
 };
 const appearanceClass = {
-    solid: styles.solid,
-    outline: styles.outline,
-    ghost: styles.ghost,
+    solid: 'btn-solid',
+    outline: 'btn-outline',
+    ghost: 'btn-ghost',
+};
+const sizeClass = {
+    sm: 'btn-sm',
+    md: 'btn-md',
+    lg: 'btn-lg',
 };
 const normalizeVariant = (variant, appearance) => {
     if (variant === 'ghost' || variant === 'outline') {
@@ -22,14 +26,9 @@ const normalizeVariant = (variant, appearance) => {
         appearance: appearance ?? 'solid',
     };
 };
-export default function Button({ variant, appearance, className, ...props }) {
+export default function Button({ variant, appearance, size = 'md', className, ...props }) {
     const resolved = normalizeVariant(variant, appearance);
-    const classes = [
-        styles.button,
-        variantClass[resolved.variant],
-        appearanceClass[resolved.appearance],
-        className,
-    ]
+    const classes = ['btn', variantClass[resolved.variant], appearanceClass[resolved.appearance], sizeClass[size], className]
         .filter(Boolean)
         .join(' ');
     return _jsx("button", { className: classes, ...props });

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAWzC,MAAM,YAAY,GAAkC;IAClD,OAAO,EAAE,MAAM,CAAC,cAAc;IAC9B,OAAO,EAAE,MAAM,CAAC,cAAc;IAC9B,IAAI,EAAE,MAAM,CAAC,WAAW;IACxB,OAAO,EAAE,MAAM,CAAC,cAAc;IAC9B,OAAO,EAAE,MAAM,CAAC,cAAc;IAC9B,MAAM,EAAE,MAAM,CAAC,aAAa;CAC7B,CAAC;AAEF,MAAM,eAAe,GAAqC;IACxD,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,KAAK,EAAE,MAAM,CAAC,KAAK;CACpB,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,OAA6C,EAAE,UAA6B,EAAE,EAAE;IACxG,IAAI,OAAO,KAAK,OAAO,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QACjD,OAAO,EAAE,OAAO,EAAE,SAA0B,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC;IACtE,CAAC;IAED,OAAO;QACL,OAAO,EAAE,OAAO,IAAI,SAAS;QAC7B,UAAU,EAAE,UAAU,IAAI,OAAO;KAClC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAS;IAChF,MAAM,QAAQ,GAAG,gBAAgB,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG;QACd,MAAM,CAAC,MAAM;QACb,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC;QAC9B,eAAe,CAAC,QAAQ,CAAC,UAAU,CAAC;QACpC,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,iBAAQ,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AACnD,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAaA,MAAM,YAAY,GAAkC;IAClD,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,YAAY;CACrB,CAAC;AAEF,MAAM,eAAe,GAAqC;IACxD,KAAK,EAAE,WAAW;IAClB,OAAO,EAAE,aAAa;IACtB,KAAK,EAAE,WAAW;CACnB,CAAC;AAEF,MAAM,SAAS,GAA+B;IAC5C,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;CACb,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,OAA6C,EAAE,UAA6B,EAAE,EAAE;IACxG,IAAI,OAAO,KAAK,OAAO,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QACjD,OAAO,EAAE,OAAO,EAAE,SAA0B,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC;IACtE,CAAC;IAED,OAAO;QACL,OAAO,EAAE,OAAO,IAAI,SAAS;QAC7B,UAAU,EAAE,UAAU,IAAI,OAAO;KAClC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAS;IAC7F,MAAM,QAAQ,GAAG,gBAAgB,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;SACtH,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,iBAAQ,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AACnD,CAAC"}

package/dist/components/FileUploader/FileUploader.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export type FileUploaderProps = {
+    value?: File[];
+    defaultValue?: File[];
+    onChange?: (files: File[]) => void;
+    onUpload?: (files: File[]) => Promise<void> | void;
+    autoUpload?: boolean;
+    multiple?: boolean;
+    accept?: string;
+    allowedTypes?: string[];
+    maxFileSizeKb?: number;
+    disabled?: boolean;
+    showPreview?: boolean;
+    dropLabel?: React.ReactNode;
+    supportedTypesLabel?: React.ReactNode;
+    maxFileSizeLabel?: React.ReactNode;
+    buttonLabel?: React.ReactNode;
+    uploadLabel?: React.ReactNode;
+    filesLabel?: (count: number) => React.ReactNode;
+    className?: string;
+};
+export default function FileUploader({ value, defaultValue, onChange, onUpload, autoUpload, multiple, accept, allowedTypes, maxFileSizeKb, disabled, showPreview, dropLabel, supportedTypesLabel, maxFileSizeLabel, buttonLabel, uploadLabel, filesLabel, className, }: FileUploaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/FileUploader/FileUploader.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import Button from '../Button/Button';
+import styles from './FileUploader.module.css';
+const toLower = (value) => value.trim().toLowerCase();
+const getExtension = (name) => {
+    const segments = name.split('.');
+    if (segments.length < 2) {
+        return '';
+    }
+    return `.${segments.pop()}`.toLowerCase();
+};
+const isAllowedType = (file, allowedTypes) => {
+    if (!allowedTypes.length) {
+        return true;
+    }
+    const fileType = toLower(file.type || '');
+    const ext = getExtension(file.name);
+    return allowedTypes.some((type) => {
+        const token = toLower(type);
+        if (!token) {
+            return false;
+        }
+        if (token.endsWith('/*')) {
+            return fileType.startsWith(token.slice(0, -1));
+        }
+        if (token.startsWith('.')) {
+            return ext === token;
+        }
+        return fileType === token || ext === token;
+    });
+};
+const isImage = (file) => file.type.startsWith('image/');
+const defaultFilesLabel = (count) => `Выбрано: ${count}`;
+export default function FileUploader({ value, defaultValue, onChange, onUpload, autoUpload = false, multiple = false, accept, allowedTypes = [], maxFileSizeKb, disabled = false, showPreview = false, dropLabel = 'Перетащите файлы сюда или выберите вручную', supportedTypesLabel = 'Допустимые форматы:', maxFileSizeLabel = 'Максимальный размер файла:', buttonLabel = 'Выбрать файлы', uploadLabel = 'Загрузить', filesLabel = defaultFilesLabel, className, }) {
+    const [internalFiles, setInternalFiles] = React.useState(defaultValue ?? []);
+    const [errors, setErrors] = React.useState([]);
+    const [isUploading, setIsUploading] = React.useState(false);
+    const [dragActive, setDragActive] = React.useState(false);
+    const [previews, setPreviews] = React.useState([]);
+    const inputRef = React.useRef(null);
+    const files = value ?? internalFiles;
+    const updateFiles = React.useCallback((next) => {
+        if (value === undefined) {
+            setInternalFiles(next);
+        }
+        onChange?.(next);
+    }, [onChange, value]);
+    const validateFiles = React.useCallback((incoming) => {
+        const nextErrors = [];
+        const validFiles = incoming.filter((file) => {
+            if (!isAllowedType(file, allowedTypes)) {
+                nextErrors.push(`Файл ${file.name} имеет недопустимый формат`);
+                return false;
+            }
+            if (maxFileSizeKb) {
+                const sizeKb = Math.ceil(file.size / 1024);
+                if (sizeKb > maxFileSizeKb) {
+                    nextErrors.push(`Файл ${file.name} превышает ${maxFileSizeKb} кбайт`);
+                    return false;
+                }
+            }
+            return true;
+        });
+        return { validFiles, nextErrors };
+    }, [allowedTypes, maxFileSizeKb]);
+    const handleFiles = React.useCallback((list) => {
+        if (disabled || !list) {
+            return;
+        }
+        const incoming = Array.from(list);
+        const { validFiles, nextErrors } = validateFiles(incoming);
+        setErrors(nextErrors);
+        if (!validFiles.length) {
+            return;
+        }
+        const next = multiple ? [...files, ...validFiles] : [validFiles[0]];
+        updateFiles(next);
+        if (inputRef.current) {
+            inputRef.current.value = '';
+        }
+    }, [disabled, files, multiple, updateFiles, validateFiles]);
+    const handleBrowse = () => {
+        if (disabled) {
+            return;
+        }
+        inputRef.current?.click();
+    };
+    const handleDrop = (event) => {
+        event.preventDefault();
+        if (disabled) {
+            return;
+        }
+        setDragActive(false);
+        handleFiles(event.dataTransfer.files);
+    };
+    const handleDrag = (event) => {
+        event.preventDefault();
+        if (disabled) {
+            return;
+        }
+        if (event.type === 'dragenter' || event.type === 'dragover') {
+            setDragActive(true);
+        }
+        if (event.type === 'dragleave') {
+            setDragActive(false);
+        }
+    };
+    const handleUpload = React.useCallback(async () => {
+        if (!onUpload || !files.length || disabled) {
+            return;
+        }
+        try {
+            setIsUploading(true);
+            await onUpload(files);
+            updateFiles([]);
+        }
+        finally {
+            setIsUploading(false);
+        }
+    }, [disabled, files, onUpload, updateFiles]);
+    React.useEffect(() => {
+        if (autoUpload && onUpload && files.length) {
+            handleUpload();
+        }
+    }, [autoUpload, files, handleUpload, onUpload]);
+    React.useEffect(() => {
+        if (!showPreview) {
+            setPreviews([]);
+            return;
+        }
+        const next = files.filter(isImage).map((file) => ({
+            name: file.name,
+            url: URL.createObjectURL(file),
+        }));
+        setPreviews(next);
+        return () => {
+            next.forEach((item) => URL.revokeObjectURL(item.url));
+        };
+    }, [files, showPreview]);
+    const acceptValue = accept ?? (allowedTypes.length ? allowedTypes.join(',') : undefined);
+    const metaParts = [
+        allowedTypes.length ? `${supportedTypesLabel} ${allowedTypes.join(', ')}` : null,
+        maxFileSizeKb ? `${maxFileSizeLabel} ${maxFileSizeKb} кбайт` : null,
+    ].filter(Boolean);
+    const wrapperClasses = [
+        styles.uploader,
+        dragActive ? styles.dragActive : null,
+        disabled ? styles.disabled : null,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: wrapperClasses, children: [_jsxs("div", { className: styles.dropzone, onDrop: handleDrop, onDragEnter: handleDrag, onDragOver: handleDrag, onDragLeave: handleDrag, children: [_jsx("input", { ref: inputRef, type: "file", className: styles.input, onChange: (event) => handleFiles(event.target.files), multiple: multiple, accept: acceptValue, disabled: disabled }), _jsxs("div", { className: styles.dropContent, children: [_jsx("div", { className: styles.dropLabel, children: dropLabel }), metaParts.length ? (_jsx("div", { className: styles.meta, children: metaParts.map((item, index) => (_jsx("div", { className: styles.metaItem, children: item }, `${index}`))) })) : null, _jsx(Button, { appearance: "outline", type: "button", onClick: handleBrowse, disabled: disabled, children: buttonLabel })] })] }), files.length ? (_jsxs("div", { className: styles.filesInfo, children: [_jsx("div", { className: styles.filesCount, children: filesLabel(files.length) }), _jsx("div", { className: styles.filesList, children: files.map((file) => (_jsxs("div", { className: styles.fileItem, children: [_jsx("span", { className: styles.fileName, children: file.name }), _jsxs("span", { className: styles.fileSize, children: [Math.ceil(file.size / 1024), " \u043A\u0431\u0430\u0439\u0442"] })] }, `${file.name}-${file.size}-${file.lastModified}`))) })] })) : null, showPreview && previews.length ? (_jsx("div", { className: styles.previewGrid, children: previews.map((preview) => (_jsxs("div", { className: styles.previewItem, children: [_jsx("img", { src: preview.url, alt: preview.name, className: styles.previewImage }), _jsx("div", { className: styles.previewName, children: preview.name })] }, preview.url))) })) : null, errors.length ? (_jsx("ul", { className: styles.errors, children: errors.map((error, index) => (_jsx("li", { children: error }, `${error}-${index}`))) })) : null, onUpload && !autoUpload && files.length ? (_jsx("div", { className: styles.actions, children: _jsx(Button, { variant: "primary", type: "button", onClick: handleUpload, disabled: disabled || isUploading, children: isUploading ? 'Загрузка...' : uploadLabel }) })) : null] }));
+}
+//# sourceMappingURL=FileUploader.js.map

package/dist/components/FileUploader/FileUploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploader.js","sourceRoot":"","sources":["../../../src/components/FileUploader/FileUploader.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAuB/C,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;AAE9D,MAAM,YAAY,GAAG,CAAC,IAAY,EAAE,EAAE;IACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACjC,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACxB,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,OAAO,IAAI,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,WAAW,EAAE,CAAC;AAC5C,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,IAAU,EAAE,YAAsB,EAAE,EAAE;IAC3D,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;IAC1C,MAAM,GAAG,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;QAChC,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,KAAK,CAAC;QACf,CAAC;QACD,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YACzB,OAAO,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACjD,CAAC;QACD,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC1B,OAAO,GAAG,KAAK,KAAK,CAAC;QACvB,CAAC;QACD,OAAO,QAAQ,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;AAE/D,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,YAAY,KAAK,EAAE,CAAC;AAEjE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,QAAQ,GAAG,KAAK,EAChB,MAAM,EACN,YAAY,GAAG,EAAE,EACjB,aAAa,EACb,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,KAAK,EACnB,SAAS,GAAG,4CAA4C,EACxD,mBAAmB,GAAG,qBAAqB,EAC3C,gBAAgB,GAAG,4BAA4B,EAC/C,WAAW,GAAG,eAAe,EAC7B,WAAW,GAAG,WAAW,EACzB,UAAU,GAAG,iBAAiB,EAC9B,SAAS,GACS;IAClB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,YAAY,IAAI,EAAE,CAAC,CAAC;IACrF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAW,EAAE,CAAC,CAAC;IACzD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAkC,EAAE,CAAC,CAAC;IACpF,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEtD,MAAM,KAAK,GAAG,KAAK,IAAI,aAAa,CAAC;IAErC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,IAAY,EAAE,EAAE;QACf,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC;QACD,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB,CAAC;IAEF,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACrC,CAAC,QAAgB,EAAE,EAAE;QACnB,MAAM,UAAU,GAAa,EAAE,CAAC;QAChC,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;YAC1C,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,YAAY,CAAC,EAAE,CAAC;gBACvC,UAAU,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,4BAA4B,CAAC,CAAC;gBAC/D,OAAO,KAAK,CAAC;YACf,CAAC;YACD,IAAI,aAAa,EAAE,CAAC;gBAClB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;gBAC3C,IAAI,MAAM,GAAG,aAAa,EAAE,CAAC;oBAC3B,UAAU,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,cAAc,aAAa,QAAQ,CAAC,CAAC;oBACtE,OAAO,KAAK,CAAC;gBACf,CAAC;YACH,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;QACH,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC;IACpC,CAAC,EACD,CAAC,YAAY,EAAE,aAAa,CAAC,CAC9B,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,IAAqB,EAAE,EAAE;QACxB,IAAI,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QACD,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC3D,SAAS,CAAC,UAAU,CAAC,CAAC;QAEtB,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QACpE,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,CAAC,CACxD,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QACD,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC5D,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QACD,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,WAAW,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC5D,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QACD,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC5D,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;QACD,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;YAC/B,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAChD,IAAI,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,QAAQ,EAAE,CAAC;YAC3C,OAAO;QACT,CAAC;QACD,IAAI,CAAC;YACH,cAAc,CAAC,IAAI,CAAC,CAAC;YACrB,MAAM,QAAQ,CAAC,KAAK,CAAC,CAAC;YACtB,WAAW,CAAC,EAAE,CAAC,CAAC;QAClB,CAAC;gBAAS,CAAC;YACT,cAAc,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IAE7C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,UAAU,IAAI,QAAQ,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YAC3C,YAAY,EAAE,CAAC;QACjB,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEhD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,WAAW,CAAC,EAAE,CAAC,CAAC;YAChB,OAAO;QACT,CAAC;QACD,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAChD,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,GAAG,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC;SAC/B,CAAC,CAAC,CAAC;QACJ,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,OAAO,GAAG,EAAE;YACV,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACxD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;IAEzB,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACzF,MAAM,SAAS,GAAG;QAChB,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,mBAAmB,IAAI,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;QAChF,aAAa,CAAC,CAAC,CAAC,GAAG,gBAAgB,IAAI,aAAa,QAAQ,CAAC,CAAC,CAAC,IAAI;KACpE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAElB,MAAM,cAAc,GAAG;QACrB,MAAM,CAAC,QAAQ;QACf,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI;QACrC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;QACjC,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,eAAK,SAAS,EAAE,cAAc,aAC5B,eACE,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU,EAClB,WAAW,EAAE,UAAU,EACvB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,UAAU,aAEvB,gBACE,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,WAAW,EACnB,QAAQ,EAAE,QAAQ,GAClB,EACF,eAAK,SAAS,EAAE,MAAM,CAAC,WAAW,aAChC,cAAK,SAAS,EAAE,MAAM,CAAC,SAAS,YAAG,SAAS,GAAO,EAClD,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAClB,cAAK,SAAS,EAAE,MAAM,CAAC,IAAI,YACxB,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,cAAsB,SAAS,EAAE,MAAM,CAAC,QAAQ,YAC7C,IAAI,IADG,GAAG,KAAK,EAAE,CAEd,CACP,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,MAAM,IAAC,UAAU,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,YACjF,WAAW,GACL,IACL,IACF,EAEL,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACd,eAAK,SAAS,EAAE,MAAM,CAAC,SAAS,aAC9B,cAAK,SAAS,EAAE,MAAM,CAAC,UAAU,YAAG,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,GAAO,EACnE,cAAK,SAAS,EAAE,MAAM,CAAC,SAAS,YAC7B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,eAA4D,SAAS,EAAE,MAAM,CAAC,QAAQ,aACpF,eAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,YAAG,IAAI,CAAC,IAAI,GAAQ,EACpD,gBAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,aAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,uCAAc,KAFpE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,EAAE,CAGpD,CACP,CAAC,GACE,IACF,CACP,CAAC,CAAC,CAAC,IAAI,EAEP,WAAW,IAAI,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAChC,cAAK,SAAS,EAAE,MAAM,CAAC,WAAW,YAC/B,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACzB,eAAuB,SAAS,EAAE,MAAM,CAAC,WAAW,aAClD,cAAK,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,YAAY,GAAI,EAC5E,cAAK,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,OAAO,CAAC,IAAI,GAAO,KAFhD,OAAO,CAAC,GAAG,CAGf,CACP,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,EAEP,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CACf,aAAI,SAAS,EAAE,MAAM,CAAC,MAAM,YACzB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,uBAA+B,KAAK,IAA3B,GAAG,KAAK,IAAI,KAAK,EAAE,CAAc,CAC3C,CAAC,GACC,CACN,CAAC,CAAC,CAAC,IAAI,EAEP,QAAQ,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACzC,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAC5B,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,IAAI,WAAW,YAC7F,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,GACnC,GACL,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC"}

package/dist/components/FileUploader/FileUploader.module.css

@@ -0,0 +1,142 @@
+.uploader {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+.dropzone {
+  border: 1px dashed var(--color-line);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-5);
+  background: var(--surface-panel-soft);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.dragActive .dropzone {
+  border-color: rgba(20, 201, 214, 0.7);
+  box-shadow: 0 0 0 3px rgba(20, 201, 214, 0.2);
+  background: var(--surface-panel);
+}
+
+.disabled .dropzone {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 0;
+  height: 0;
+}
+
+.dropContent {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  align-items: flex-start;
+}
+
+.dropLabel {
+  font-size: var(--font-size-4);
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.meta {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  font-size: var(--font-size-2);
+  color: var(--color-muted);
+}
+
+.filesInfo {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.filesCount {
+  font-size: var(--font-size-3);
+  font-weight: 600;
+}
+
+.filesList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.fileItem {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-sm);
+  background: var(--surface-tile);
+  border: 1px solid var(--color-divider);
+}
+
+.fileName {
+  color: var(--color-text);
+  font-size: var(--font-size-3);
+}
+
+.fileSize {
+  color: var(--color-muted);
+  font-size: var(--font-size-2);
+}
+
+.previewGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: var(--spacing-3);
+}
+
+.previewItem {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2);
+  border-radius: var(--radius-sm);
+  background: var(--surface-tile);
+  border: 1px solid var(--color-divider);
+  align-items: center;
+  text-align: center;
+}
+
+.previewImage {
+  width: 100%;
+  height: 90px;
+  object-fit: cover;
+  border-radius: var(--radius-xs);
+}
+
+.previewName {
+  font-size: var(--font-size-2);
+  color: var(--color-muted);
+  word-break: break-word;
+}
+
+.errors {
+  margin: 0;
+  padding-left: var(--spacing-5);
+  color: var(--btn-danger-accent, #ff6b6b);
+  font-size: var(--font-size-2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dropzone {
+    transition: none;
+  }
+}

package/dist/components/Input/Checkbox/Checkbox.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    indeterminate?: boolean;
+};
+export default function Checkbox({ id, label, description, indeterminate, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Input/Checkbox/Checkbox.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import styles from './Checkbox.module.css';
+export default function Checkbox({ id, label, description, indeterminate = false, className, ...props }) {
+    const inputId = id ?? React.useId();
+    const classes = [styles.checkbox, className].filter(Boolean).join(' ');
+    const inputRef = React.useRef(null);
+    React.useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    return (_jsxs("label", { className: classes, htmlFor: inputId, children: [_jsx("input", { id: inputId, ref: inputRef, type: "checkbox", className: styles.input, "aria-checked": indeterminate ? 'mixed' : undefined, ...props }), _jsx("span", { className: styles.box, "aria-hidden": "true" }), _jsxs("span", { className: styles.texts, children: [label ? _jsx("span", { className: styles.label, children: label }) : null, description ? _jsx("span", { className: styles.description, children: description }) : null] })] }));
+}
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Input/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Input/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAQ3C,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,aAAa,GAAG,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAS;IAC5G,MAAM,OAAO,GAAG,EAAE,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;IACpC,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACvE,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEtD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;QACjD,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,iBAAO,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,aACzC,gBACE,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,MAAM,CAAC,KAAK,kBACT,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,KAC7C,KAAK,GACT,EACF,eAAM,SAAS,EAAE,MAAM,CAAC,GAAG,iBAAc,MAAM,GAAG,EAClD,gBAAM,SAAS,EAAE,MAAM,CAAC,KAAK,aAC1B,KAAK,CAAC,CAAC,CAAC,eAAM,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAQ,CAAC,CAAC,CAAC,IAAI,EAC5D,WAAW,CAAC,CAAC,CAAC,eAAM,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,WAAW,GAAQ,CAAC,CAAC,CAAC,IAAI,IAC1E,IACD,CACT,CAAC;AACJ,CAAC"}

package/dist/components/Input/Checkbox/Checkbox.module.css

@@ -0,0 +1,105 @@
+.checkbox {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 10px;
+  cursor: pointer;
+  color: var(--color-text);
+}
+
+.input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.box {
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  border: 1px solid rgba(30, 99, 233, 0.45);
+  background: var(--surface-input);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.box::after,
+.box::before {
+  content: '';
+  position: absolute;
+  top: 5px;
+  opacity: 0;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.box::after {
+  width: 9px;
+  height: 5px;
+  border-left: 2px solid var(--color-teal);
+  border-bottom: 2px solid var(--color-teal);
+  transform: rotate(-45deg) scale(0.6);
+}
+
+.box::before {
+  width: 10px;
+  height: 2px;
+  background: var(--color-teal);
+  border-radius: 999px;
+}
+
+.input:checked + .box,
+.input:indeterminate + .box {
+  border-color: rgba(20, 201, 214, 0.8);
+  box-shadow: 0 0 0 3px rgba(20, 201, 214, 0.2);
+}
+
+.input:checked + .box::after {
+  opacity: 1;
+  transform: rotate(-45deg) scale(1);
+}
+
+.input:indeterminate + .box::before {
+  opacity: 1;
+}
+
+.input:focus-visible + .box {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(20, 201, 214, 0.2);
+  border-color: rgba(20, 201, 214, 0.8);
+}
+
+.input:disabled + .box {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.input:disabled ~ .texts {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.texts {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.label {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.description {
+  font-size: 12px;
+  color: var(--color-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .box,
+  .box::after,
+  .box::before {
+    transition: none;
+  }
+}

package/dist/components/Input/ErrorTooltip/ErrorTooltip.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type TooltipPlacement, type TooltipVariant } from '../../Tooltip/Tooltip';
+type Props = {
+    content: React.ReactNode;
+    placement?: TooltipPlacement;
+    variant?: TooltipVariant;
+    target?: 'icon' | 'input';
+    icon?: React.ReactNode;
+    className?: string;
+};
+export default function ErrorTooltip({ content, placement, variant, target, icon, className, }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};