@phpsoftbox/react-softbox 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/components/Button/Button.d.ts +3 -1
  2. package/dist/components/Button/Button.js +16 -17
  3. package/dist/components/Button/Button.js.map +1 -1
  4. package/dist/components/FileUploader/FileUploader.d.ts +22 -0
  5. package/dist/components/FileUploader/FileUploader.js +156 -0
  6. package/dist/components/FileUploader/FileUploader.js.map +1 -0
  7. package/dist/components/FileUploader/FileUploader.module.css +142 -0
  8. package/dist/components/Input/Checkbox/Checkbox.d.ts +8 -0
  9. package/dist/components/Input/Checkbox/Checkbox.js +15 -0
  10. package/dist/components/Input/Checkbox/Checkbox.js.map +1 -0
  11. package/dist/components/Input/Checkbox/Checkbox.module.css +105 -0
  12. package/dist/components/Input/FloatLabel/FloatLabel.module.css +6 -6
  13. package/dist/components/Input/Input.d.ts +2 -0
  14. package/dist/components/Input/Input.js +2 -0
  15. package/dist/components/Input/Input.js.map +1 -1
  16. package/dist/components/Input/Select/Select.js +1 -1
  17. package/dist/components/Input/Select/Select.js.map +1 -1
  18. package/dist/components/Table/Table.d.ts +56 -0
  19. package/dist/components/Table/Table.js +199 -0
  20. package/dist/components/Table/Table.js.map +1 -0
  21. package/dist/components/Table/Table.module.css +203 -0
  22. package/dist/{components/Button/Button.module.css → foundations/buttons.css} +47 -19
  23. package/dist/foundations/index.css +1 -0
  24. package/dist/index.d.ts +4 -0
  25. package/dist/index.js +3 -0
  26. package/dist/index.js.map +1 -1
  27. package/docs/README.md +1 -1
  28. package/docs/forms.md +27 -0
  29. package/docs/layout.md +16 -0
  30. package/package.json +5 -1
@@ -2,9 +2,11 @@ import React from 'react';
2
2
  import type { UiVariant } from '../../types';
3
3
  type ButtonVariant = UiVariant;
4
4
  type ButtonAppearance = 'solid' | 'outline' | 'ghost';
5
+ type ButtonSize = 'sm' | 'md' | 'lg';
5
6
  type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
6
7
  variant?: ButtonVariant | 'ghost' | 'outline';
7
8
  appearance?: ButtonAppearance;
9
+ size?: ButtonSize;
8
10
  };
9
- export default function Button({ variant, appearance, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
11
+ export default function Button({ variant, appearance, size, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
10
12
  export {};
@@ -1,17 +1,21 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import styles from './Button.module.css';
3
2
  const variantClass = {
4
- default: styles.variantDefault,
5
- primary: styles.variantPrimary,
6
- info: styles.variantInfo,
7
- success: styles.variantSuccess,
8
- warning: styles.variantWarning,
9
- danger: styles.variantDanger,
3
+ default: 'btn-default',
4
+ primary: 'btn-primary',
5
+ info: 'btn-info',
6
+ success: 'btn-success',
7
+ warning: 'btn-warning',
8
+ danger: 'btn-danger',
10
9
  };
11
10
  const appearanceClass = {
12
- solid: styles.solid,
13
- outline: styles.outline,
14
- ghost: styles.ghost,
11
+ solid: 'btn-solid',
12
+ outline: 'btn-outline',
13
+ ghost: 'btn-ghost',
14
+ };
15
+ const sizeClass = {
16
+ sm: 'btn-sm',
17
+ md: 'btn-md',
18
+ lg: 'btn-lg',
15
19
  };
16
20
  const normalizeVariant = (variant, appearance) => {
17
21
  if (variant === 'ghost' || variant === 'outline') {
@@ -22,14 +26,9 @@ const normalizeVariant = (variant, appearance) => {
22
26
  appearance: appearance ?? 'solid',
23
27
  };
24
28
  };
25
- export default function Button({ variant, appearance, className, ...props }) {
29
+ export default function Button({ variant, appearance, size = 'md', className, ...props }) {
26
30
  const resolved = normalizeVariant(variant, appearance);
27
- const classes = [
28
- styles.button,
29
- variantClass[resolved.variant],
30
- appearanceClass[resolved.appearance],
31
- className,
32
- ]
31
+ const classes = ['btn', variantClass[resolved.variant], appearanceClass[resolved.appearance], sizeClass[size], className]
33
32
  .filter(Boolean)
34
33
  .join(' ');
35
34
  return _jsx("button", { className: classes, ...props });
@@ -1 +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"}
1
+ {"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"}
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+ export type FileUploaderProps = {
3
+ value?: File[];
4
+ defaultValue?: File[];
5
+ onChange?: (files: File[]) => void;
6
+ onUpload?: (files: File[]) => Promise<void> | void;
7
+ autoUpload?: boolean;
8
+ multiple?: boolean;
9
+ accept?: string;
10
+ allowedTypes?: string[];
11
+ maxFileSizeKb?: number;
12
+ disabled?: boolean;
13
+ showPreview?: boolean;
14
+ dropLabel?: React.ReactNode;
15
+ supportedTypesLabel?: React.ReactNode;
16
+ maxFileSizeLabel?: React.ReactNode;
17
+ buttonLabel?: React.ReactNode;
18
+ uploadLabel?: React.ReactNode;
19
+ filesLabel?: (count: number) => React.ReactNode;
20
+ className?: string;
21
+ };
22
+ 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;
@@ -0,0 +1,156 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import React from 'react';
3
+ import Button from '../Button/Button';
4
+ import styles from './FileUploader.module.css';
5
+ const toLower = (value) => value.trim().toLowerCase();
6
+ const getExtension = (name) => {
7
+ const segments = name.split('.');
8
+ if (segments.length < 2) {
9
+ return '';
10
+ }
11
+ return `.${segments.pop()}`.toLowerCase();
12
+ };
13
+ const isAllowedType = (file, allowedTypes) => {
14
+ if (!allowedTypes.length) {
15
+ return true;
16
+ }
17
+ const fileType = toLower(file.type || '');
18
+ const ext = getExtension(file.name);
19
+ return allowedTypes.some((type) => {
20
+ const token = toLower(type);
21
+ if (!token) {
22
+ return false;
23
+ }
24
+ if (token.endsWith('/*')) {
25
+ return fileType.startsWith(token.slice(0, -1));
26
+ }
27
+ if (token.startsWith('.')) {
28
+ return ext === token;
29
+ }
30
+ return fileType === token || ext === token;
31
+ });
32
+ };
33
+ const isImage = (file) => file.type.startsWith('image/');
34
+ const defaultFilesLabel = (count) => `Выбрано: ${count}`;
35
+ 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, }) {
36
+ const [internalFiles, setInternalFiles] = React.useState(defaultValue ?? []);
37
+ const [errors, setErrors] = React.useState([]);
38
+ const [isUploading, setIsUploading] = React.useState(false);
39
+ const [dragActive, setDragActive] = React.useState(false);
40
+ const [previews, setPreviews] = React.useState([]);
41
+ const inputRef = React.useRef(null);
42
+ const files = value ?? internalFiles;
43
+ const updateFiles = React.useCallback((next) => {
44
+ if (value === undefined) {
45
+ setInternalFiles(next);
46
+ }
47
+ onChange?.(next);
48
+ }, [onChange, value]);
49
+ const validateFiles = React.useCallback((incoming) => {
50
+ const nextErrors = [];
51
+ const validFiles = incoming.filter((file) => {
52
+ if (!isAllowedType(file, allowedTypes)) {
53
+ nextErrors.push(`Файл ${file.name} имеет недопустимый формат`);
54
+ return false;
55
+ }
56
+ if (maxFileSizeKb) {
57
+ const sizeKb = Math.ceil(file.size / 1024);
58
+ if (sizeKb > maxFileSizeKb) {
59
+ nextErrors.push(`Файл ${file.name} превышает ${maxFileSizeKb} кбайт`);
60
+ return false;
61
+ }
62
+ }
63
+ return true;
64
+ });
65
+ return { validFiles, nextErrors };
66
+ }, [allowedTypes, maxFileSizeKb]);
67
+ const handleFiles = React.useCallback((list) => {
68
+ if (disabled || !list) {
69
+ return;
70
+ }
71
+ const incoming = Array.from(list);
72
+ const { validFiles, nextErrors } = validateFiles(incoming);
73
+ setErrors(nextErrors);
74
+ if (!validFiles.length) {
75
+ return;
76
+ }
77
+ const next = multiple ? [...files, ...validFiles] : [validFiles[0]];
78
+ updateFiles(next);
79
+ if (inputRef.current) {
80
+ inputRef.current.value = '';
81
+ }
82
+ }, [disabled, files, multiple, updateFiles, validateFiles]);
83
+ const handleBrowse = () => {
84
+ if (disabled) {
85
+ return;
86
+ }
87
+ inputRef.current?.click();
88
+ };
89
+ const handleDrop = (event) => {
90
+ event.preventDefault();
91
+ if (disabled) {
92
+ return;
93
+ }
94
+ setDragActive(false);
95
+ handleFiles(event.dataTransfer.files);
96
+ };
97
+ const handleDrag = (event) => {
98
+ event.preventDefault();
99
+ if (disabled) {
100
+ return;
101
+ }
102
+ if (event.type === 'dragenter' || event.type === 'dragover') {
103
+ setDragActive(true);
104
+ }
105
+ if (event.type === 'dragleave') {
106
+ setDragActive(false);
107
+ }
108
+ };
109
+ const handleUpload = React.useCallback(async () => {
110
+ if (!onUpload || !files.length || disabled) {
111
+ return;
112
+ }
113
+ try {
114
+ setIsUploading(true);
115
+ await onUpload(files);
116
+ updateFiles([]);
117
+ }
118
+ finally {
119
+ setIsUploading(false);
120
+ }
121
+ }, [disabled, files, onUpload, updateFiles]);
122
+ React.useEffect(() => {
123
+ if (autoUpload && onUpload && files.length) {
124
+ handleUpload();
125
+ }
126
+ }, [autoUpload, files, handleUpload, onUpload]);
127
+ React.useEffect(() => {
128
+ if (!showPreview) {
129
+ setPreviews([]);
130
+ return;
131
+ }
132
+ const next = files.filter(isImage).map((file) => ({
133
+ name: file.name,
134
+ url: URL.createObjectURL(file),
135
+ }));
136
+ setPreviews(next);
137
+ return () => {
138
+ next.forEach((item) => URL.revokeObjectURL(item.url));
139
+ };
140
+ }, [files, showPreview]);
141
+ const acceptValue = accept ?? (allowedTypes.length ? allowedTypes.join(',') : undefined);
142
+ const metaParts = [
143
+ allowedTypes.length ? `${supportedTypesLabel} ${allowedTypes.join(', ')}` : null,
144
+ maxFileSizeKb ? `${maxFileSizeLabel} ${maxFileSizeKb} кбайт` : null,
145
+ ].filter(Boolean);
146
+ const wrapperClasses = [
147
+ styles.uploader,
148
+ dragActive ? styles.dragActive : null,
149
+ disabled ? styles.disabled : null,
150
+ className,
151
+ ]
152
+ .filter(Boolean)
153
+ .join(' ');
154
+ 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] }));
155
+ }
156
+ //# sourceMappingURL=FileUploader.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FileUploader.js","sourceRoot":"","sources":["../../../src/components/FileUploader/FileUploader.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,142 @@
1
+ .uploader {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: var(--spacing-4);
5
+ }
6
+
7
+ .dropzone {
8
+ border: 1px dashed var(--color-line);
9
+ border-radius: var(--radius-md);
10
+ padding: var(--spacing-5);
11
+ background: var(--surface-panel-soft);
12
+ transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
13
+ }
14
+
15
+ .dragActive .dropzone {
16
+ border-color: rgba(20, 201, 214, 0.7);
17
+ box-shadow: 0 0 0 3px rgba(20, 201, 214, 0.2);
18
+ background: var(--surface-panel);
19
+ }
20
+
21
+ .disabled .dropzone {
22
+ opacity: 0.6;
23
+ pointer-events: none;
24
+ }
25
+
26
+ .input {
27
+ position: absolute;
28
+ opacity: 0;
29
+ pointer-events: none;
30
+ width: 0;
31
+ height: 0;
32
+ }
33
+
34
+ .dropContent {
35
+ display: flex;
36
+ flex-direction: column;
37
+ gap: var(--spacing-3);
38
+ align-items: flex-start;
39
+ }
40
+
41
+ .dropLabel {
42
+ font-size: var(--font-size-4);
43
+ font-weight: 600;
44
+ color: var(--color-text);
45
+ }
46
+
47
+ .meta {
48
+ display: flex;
49
+ flex-direction: column;
50
+ gap: var(--spacing-1);
51
+ font-size: var(--font-size-2);
52
+ color: var(--color-muted);
53
+ }
54
+
55
+ .filesInfo {
56
+ display: flex;
57
+ flex-direction: column;
58
+ gap: var(--spacing-2);
59
+ }
60
+
61
+ .filesCount {
62
+ font-size: var(--font-size-3);
63
+ font-weight: 600;
64
+ }
65
+
66
+ .filesList {
67
+ display: flex;
68
+ flex-direction: column;
69
+ gap: var(--spacing-2);
70
+ }
71
+
72
+ .fileItem {
73
+ display: flex;
74
+ justify-content: space-between;
75
+ gap: var(--spacing-3);
76
+ padding: var(--spacing-2) var(--spacing-3);
77
+ border-radius: var(--radius-sm);
78
+ background: var(--surface-tile);
79
+ border: 1px solid var(--color-divider);
80
+ }
81
+
82
+ .fileName {
83
+ color: var(--color-text);
84
+ font-size: var(--font-size-3);
85
+ }
86
+
87
+ .fileSize {
88
+ color: var(--color-muted);
89
+ font-size: var(--font-size-2);
90
+ }
91
+
92
+ .previewGrid {
93
+ display: grid;
94
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
95
+ gap: var(--spacing-3);
96
+ }
97
+
98
+ .previewItem {
99
+ display: flex;
100
+ flex-direction: column;
101
+ gap: var(--spacing-2);
102
+ padding: var(--spacing-2);
103
+ border-radius: var(--radius-sm);
104
+ background: var(--surface-tile);
105
+ border: 1px solid var(--color-divider);
106
+ align-items: center;
107
+ text-align: center;
108
+ }
109
+
110
+ .previewImage {
111
+ width: 100%;
112
+ height: 90px;
113
+ object-fit: cover;
114
+ border-radius: var(--radius-xs);
115
+ }
116
+
117
+ .previewName {
118
+ font-size: var(--font-size-2);
119
+ color: var(--color-muted);
120
+ word-break: break-word;
121
+ }
122
+
123
+ .errors {
124
+ margin: 0;
125
+ padding-left: var(--spacing-5);
126
+ color: var(--btn-danger-accent, #ff6b6b);
127
+ font-size: var(--font-size-2);
128
+ display: flex;
129
+ flex-direction: column;
130
+ gap: var(--spacing-1);
131
+ }
132
+
133
+ .actions {
134
+ display: flex;
135
+ justify-content: flex-end;
136
+ }
137
+
138
+ @media (prefers-reduced-motion: reduce) {
139
+ .dropzone {
140
+ transition: none;
141
+ }
142
+ }
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
3
+ label?: React.ReactNode;
4
+ description?: React.ReactNode;
5
+ indeterminate?: boolean;
6
+ };
7
+ export default function Checkbox({ id, label, description, indeterminate, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
8
+ export {};
@@ -0,0 +1,15 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import React from 'react';
3
+ import styles from './Checkbox.module.css';
4
+ export default function Checkbox({ id, label, description, indeterminate = false, className, ...props }) {
5
+ const inputId = id ?? React.useId();
6
+ const classes = [styles.checkbox, className].filter(Boolean).join(' ');
7
+ const inputRef = React.useRef(null);
8
+ React.useEffect(() => {
9
+ if (inputRef.current) {
10
+ inputRef.current.indeterminate = indeterminate;
11
+ }
12
+ }, [indeterminate]);
13
+ 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] })] }));
14
+ }
15
+ //# sourceMappingURL=Checkbox.js.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,105 @@
1
+ .checkbox {
2
+ display: inline-flex;
3
+ align-items: flex-start;
4
+ gap: 10px;
5
+ cursor: pointer;
6
+ color: var(--color-text);
7
+ }
8
+
9
+ .input {
10
+ position: absolute;
11
+ opacity: 0;
12
+ pointer-events: none;
13
+ }
14
+
15
+ .box {
16
+ width: 18px;
17
+ height: 18px;
18
+ border-radius: 4px;
19
+ border: 1px solid rgba(30, 99, 233, 0.45);
20
+ background: var(--surface-input);
21
+ display: inline-flex;
22
+ align-items: center;
23
+ justify-content: center;
24
+ position: relative;
25
+ transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
26
+ }
27
+
28
+ .box::after,
29
+ .box::before {
30
+ content: '';
31
+ position: absolute;
32
+ top: 5px;
33
+ opacity: 0;
34
+ transition: opacity 0.2s ease, transform 0.2s ease;
35
+ }
36
+
37
+ .box::after {
38
+ width: 9px;
39
+ height: 5px;
40
+ border-left: 2px solid var(--color-teal);
41
+ border-bottom: 2px solid var(--color-teal);
42
+ transform: rotate(-45deg) scale(0.6);
43
+ }
44
+
45
+ .box::before {
46
+ width: 10px;
47
+ height: 2px;
48
+ background: var(--color-teal);
49
+ border-radius: 999px;
50
+ }
51
+
52
+ .input:checked + .box,
53
+ .input:indeterminate + .box {
54
+ border-color: rgba(20, 201, 214, 0.8);
55
+ box-shadow: 0 0 0 3px rgba(20, 201, 214, 0.2);
56
+ }
57
+
58
+ .input:checked + .box::after {
59
+ opacity: 1;
60
+ transform: rotate(-45deg) scale(1);
61
+ }
62
+
63
+ .input:indeterminate + .box::before {
64
+ opacity: 1;
65
+ }
66
+
67
+ .input:focus-visible + .box {
68
+ outline: none;
69
+ box-shadow: 0 0 0 3px rgba(20, 201, 214, 0.2);
70
+ border-color: rgba(20, 201, 214, 0.8);
71
+ }
72
+
73
+ .input:disabled + .box {
74
+ opacity: 0.6;
75
+ cursor: not-allowed;
76
+ }
77
+
78
+ .input:disabled ~ .texts {
79
+ opacity: 0.6;
80
+ cursor: not-allowed;
81
+ }
82
+
83
+ .texts {
84
+ display: flex;
85
+ flex-direction: column;
86
+ gap: 4px;
87
+ }
88
+
89
+ .label {
90
+ font-size: 14px;
91
+ font-weight: 600;
92
+ }
93
+
94
+ .description {
95
+ font-size: 12px;
96
+ color: var(--color-muted);
97
+ }
98
+
99
+ @media (prefers-reduced-motion: reduce) {
100
+ .box,
101
+ .box::after,
102
+ .box::before {
103
+ transition: none;
104
+ }
105
+ }
@@ -6,7 +6,7 @@
6
6
  .label {
7
7
  position: absolute;
8
8
  left: 16px;
9
- top: 12px;
9
+ top: 16px;
10
10
  color: var(--color-muted-2);
11
11
  font-size: 13px;
12
12
  letter-spacing: 0.02em;
@@ -16,34 +16,34 @@
16
16
 
17
17
  .wrapper input:focus + .label,
18
18
  .wrapper input:not(:placeholder-shown) + .label {
19
- transform: translateY(-8px);
19
+ transform: translateY(-10px);
20
20
  color: var(--color-teal);
21
21
  opacity: 0.9;
22
22
  }
23
23
 
24
24
  .wrapper input:-webkit-autofill + .label,
25
25
  .wrapper input:autofill + .label {
26
- transform: translateY(-8px);
26
+ transform: translateY(-10px);
27
27
  color: var(--color-teal);
28
28
  opacity: 0.9;
29
29
  }
30
30
 
31
31
  .wrapper textarea:focus + .label,
32
32
  .wrapper textarea:not(:placeholder-shown) + .label {
33
- transform: translateY(-8px);
33
+ transform: translateY(-10px);
34
34
  color: var(--color-teal);
35
35
  opacity: 0.9;
36
36
  }
37
37
 
38
38
  .wrapper textarea:-webkit-autofill + .label,
39
39
  .wrapper textarea:autofill + .label {
40
- transform: translateY(-8px);
40
+ transform: translateY(-10px);
41
41
  color: var(--color-teal);
42
42
  opacity: 0.9;
43
43
  }
44
44
 
45
45
  .wrapper [data-float-label="true"][data-float-active="true"] + .label {
46
- transform: translateY(-8px);
46
+ transform: translateY(-10px);
47
47
  color: var(--color-teal);
48
48
  opacity: 0.9;
49
49
  }
@@ -9,6 +9,7 @@ import TimePicker from './TimePicker';
9
9
  import DateRangePicker from './DateRangePicker';
10
10
  import Radio from './Radio/Radio';
11
11
  import Switch from './Switch/Switch';
12
+ import Checkbox from './Checkbox/Checkbox';
12
13
  declare const Input: import("react").FC<import("react").HTMLAttributes<HTMLDivElement> & {
13
14
  layout?: "row" | "column";
14
15
  gap?: number | string;
@@ -42,6 +43,7 @@ declare const Input: import("react").FC<import("react").HTMLAttributes<HTMLDivEl
42
43
  DateRange: typeof DateRangePicker;
43
44
  Radio: typeof Radio;
44
45
  Switch: typeof Switch;
46
+ Checkbox: typeof Checkbox;
45
47
  FormField: import("react").FC<import("react").HTMLAttributes<HTMLDivElement> & {
46
48
  layout?: "row" | "column";
47
49
  gap?: number | string;
@@ -11,6 +11,7 @@ import TimePicker from './TimePicker';
11
11
  import DateRangePicker from './DateRangePicker';
12
12
  import Radio from './Radio/Radio';
13
13
  import Switch from './Switch/Switch';
14
+ import Checkbox from './Checkbox/Checkbox';
14
15
  const Input = Object.assign(FormField, {
15
16
  Label: FormField.Label,
16
17
  Control: FormField.Control,
@@ -28,6 +29,7 @@ const Input = Object.assign(FormField, {
28
29
  DateRange: DateRangePicker,
29
30
  Radio,
30
31
  Switch,
32
+ Checkbox,
31
33
  FormField,
32
34
  });
33
35
  export default Input;
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAC9C,OAAO,UAAU,MAAM,SAAS,CAAC;AACjC,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;IACrC,KAAK,EAAE,SAAS,CAAC,KAAK;IACtB,OAAO,EAAE,SAAS,CAAC,OAAO;IAC1B,QAAQ,EAAE,SAAS,CAAC,QAAQ;IAC5B,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,QAAQ;IAClB,MAAM;IACN,UAAU;IACV,KAAK,EAAE,UAAU;IACjB,KAAK,EAAE,UAAU;IACjB,WAAW;IACX,MAAM,EAAE,WAAW;IACnB,UAAU;IACV,UAAU;IACV,SAAS,EAAE,eAAe;IAC1B,KAAK;IACL,MAAM;IACN,SAAS;CACV,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAC9C,OAAO,UAAU,MAAM,SAAS,CAAC;AACjC,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAE3C,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;IACrC,KAAK,EAAE,SAAS,CAAC,KAAK;IACtB,OAAO,EAAE,SAAS,CAAC,OAAO;IAC1B,QAAQ,EAAE,SAAS,CAAC,QAAQ;IAC5B,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,QAAQ;IAClB,MAAM;IACN,UAAU;IACV,KAAK,EAAE,UAAU;IACjB,KAAK,EAAE,UAAU;IACjB,WAAW;IACX,MAAM,EAAE,WAAW;IACnB,UAAU;IACV,UAAU;IACV,SAAS,EAAE,eAAe;IAC1B,KAAK;IACL,MAAM;IACN,QAAQ;IACR,SAAS;CACV,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC"}
@@ -10,7 +10,7 @@ const defaultMapOptions = (data) => {
10
10
  }
11
11
  return [];
12
12
  };
13
- export default function Select({ label, id, name, options = [], value, defaultValue, placeholder = 'Выберите...', multiple = false, searchable = true, loadingText = 'Загрузка...', emptyText = 'Нет данных', loadOptions, request, onAfterRequest, placement = 'auto', disabled = false, floatLabel = false, className, onChange, }) {
13
+ export default function Select({ label, id, name, options = [], value, defaultValue, placeholder = 'Выберите...', multiple = false, searchable = false, loadingText = 'Загрузка...', emptyText = 'Нет данных', loadOptions, request, onAfterRequest, placement = 'auto', disabled = false, floatLabel = false, className, onChange, }) {
14
14
  const context = useFormFieldContext();
15
15
  const [open, setOpen] = React.useState(false);
16
16
  const [query, setQuery] = React.useState('');