cynx-ui 1.2.43 → 1.2.45

package/components/Badge.jsx

@@ -1,24 +1,24 @@
 const VARIANTS = {
-  ok:       { bg: 'var(--success-bg,rgba(39,174,96,.1))', color: 'var(--success,#27ae60)', border: 'var(--sd, rgba(39,174,96,.2))', dot: 'var(--success,#27ae60)' },
-  err:      { bg: 'var(--danger-bg,rgba(246,71,71,.1))', color: 'var(--danger,#f64747)', border: 'var(--dd, rgba(246,71,71,.2))', dot: 'var(--danger,#f64747)' },
-  warn:     { bg: 'var(--accent-bg,rgba(249,158,44,.1))', color: 'var(--accent,#f99e2c)', border: 'var(--accent-border,rgba(249,158,44,.25))', dot: 'var(--accent,#f99e2c)' },
-  blue:     { bg: 'var(--blue-bg,rgba(39,130,228,.1))', color: 'var(--blue,#2782e4)', border: 'var(--infd, rgba(39,130,228,.2))', dot: 'var(--blue,#2782e4)' },
-  dim:      { bg: 'var(--grey-1,#f5f5f8)', color: 'var(--grey-4,#797b8d)', border: 'var(--border,#d7d8e0)', dot: 'var(--grey-4,#797b8d)' },
-  purple:   { bg: 'rgba(139,92,246,.1)', color: '#8b5cf6', border: 'rgba(139,92,246,.2)', dot: '#8b5cf6' },
-  teal:     { bg: 'rgba(20,184,166,.1)', color: '#14b8a6', border: 'rgba(20,184,166,.2)', dot: '#14b8a6' },
-  pink:     { bg: 'rgba(236,72,153,.1)', color: '#ec4899', border: 'rgba(236,72,153,.2)', dot: '#ec4899' },
-  ghost:    { bg: 'transparent', color: 'var(--t2,var(--grey-4,#797b8d))', border: 'var(--bd,var(--border,#d7d8e0))', dot: 'var(--t3,var(--grey-4,#797b8d))' },
-  paid:     { bg: 'var(--pd, rgba(30,41,59,.08))', color: 'var(--t, #1e293b)', border: 'var(--accent-border, rgba(30,41,59,.15))', dot: 'var(--t, #1e293b)' },
+  ok: { bg: 'var(--success-bg,rgba(39,174,96,.1))', color: 'var(--success,#27ae60)', border: 'var(--sd, rgba(39,174,96,.2))', dot: 'var(--success,#27ae60)' },
+  err: { bg: 'var(--danger-bg,rgba(246,71,71,.1))', color: 'var(--danger,#f64747)', border: 'var(--dd, rgba(246,71,71,.2))', dot: 'var(--danger,#f64747)' },
+  warn: { bg: 'var(--accent-bg,rgba(249,158,44,.1))', color: 'var(--accent,#f99e2c)', border: 'var(--accent-border,rgba(249,158,44,.25))', dot: 'var(--accent,#f99e2c)' },
+  blue: { bg: 'var(--blue-bg,rgba(39,130,228,.1))', color: 'var(--blue,#2782e4)', border: 'var(--infd, rgba(39,130,228,.2))', dot: 'var(--blue,#2782e4)' },
+  dim: { bg: 'var(--grey-1,#f5f5f8)', color: 'var(--grey-4,#797b8d)', border: 'var(--border,#d7d8e0)', dot: 'var(--grey-4,#797b8d)' },
+  purple: { bg: 'rgba(139,92,246,.1)', color: '#8b5cf6', border: 'rgba(139,92,246,.2)', dot: '#8b5cf6' },
+  teal: { bg: 'rgba(20,184,166,.1)', color: '#14b8a6', border: 'rgba(20,184,166,.2)', dot: '#14b8a6' },
+  pink: { bg: 'rgba(236,72,153,.1)', color: '#ec4899', border: 'rgba(236,72,153,.2)', dot: '#ec4899' },
+  ghost: { bg: 'transparent', color: 'var(--t2,var(--grey-4,#797b8d))', border: 'var(--bd,var(--border,#d7d8e0))', dot: 'var(--t3,var(--grey-4,#797b8d))' },
+  paid: { bg: 'var(--pd, rgba(30,41,59,.08))', color: 'var(--t, #1e293b)', border: 'var(--accent-border, rgba(30,41,59,.15))', dot: 'var(--t, #1e293b)' },
   invoiced: { bg: 'rgba(120,120,130,.08)', color: 'var(--t2, #787882)', border: 'rgba(120,120,130,.15)', dot: 'var(--t2, #787882)' },
   verified: { bg: 'var(--sd, rgba(34,197,94,.08))', color: 'var(--s, #22c55e)', border: 'var(--sd, rgba(34,197,94,.15))', dot: 'var(--s, #22c55e)' },
-  partial:  { bg: 'rgba(100,100,110,.08)', color: '#64646e', border: 'rgba(100,100,110,.15)', dot: '#64646e' },
-  deleted:  { bg: 'var(--dd, rgba(239,68,68,.08))', color: 'var(--d, #ef4444)', border: 'var(--dd, rgba(239,68,68,.15))', dot: 'var(--d, #ef4444)' },
-  update:   { bg: 'var(--wd, rgba(249,115,22,.08))', color: 'var(--w, #f97316)', border: 'var(--wd, rgba(249,115,22,.15))', dot: 'var(--w, #f97316)' },
-  ready:    { bg: 'var(--wd, rgba(234,179,8,.08))', color: 'var(--w, #eab308)', border: 'var(--wd, rgba(234,179,8,.15))', dot: 'var(--w, #eab308)' },
-  new:      { bg: 'var(--infd, rgba(59,130,246,.08))', color: 'var(--inf, #3b82f6)', border: 'var(--infd, rgba(59,130,246,.15))', dot: 'var(--inf, #3b82f6)' },
-  active:   { bg: 'transparent', color: 'var(--s, #22c55e)', border: 'none', dot: 'var(--s, #22c55e)', noPad: true },
+  partial: { bg: 'rgba(100,100,110,.08)', color: '#64646e', border: 'rgba(100,100,110,.15)', dot: '#64646e' },
+  deleted: { bg: 'var(--dd, rgba(239,68,68,.08))', color: 'var(--d, #ef4444)', border: 'var(--dd, rgba(239,68,68,.15))', dot: 'var(--d, #ef4444)' },
+  update: { bg: 'var(--wd, rgba(249,115,22,.08))', color: 'var(--w, #f97316)', border: 'var(--wd, rgba(249,115,22,.15))', dot: 'var(--w, #f97316)' },
+  ready: { bg: 'var(--wd, rgba(234,179,8,.08))', color: 'var(--w, #eab308)', border: 'var(--wd, rgba(234,179,8,.15))', dot: 'var(--w, #eab308)' },
+  new: { bg: 'var(--infd, rgba(59,130,246,.08))', color: 'var(--inf, #3b82f6)', border: 'var(--infd, rgba(59,130,246,.15))', dot: 'var(--inf, #3b82f6)' },
+  active: { bg: 'transparent', color: 'var(--s, #22c55e)', border: 'none', dot: 'var(--s, #22c55e)', noPad: true },
   inactive: { bg: 'transparent', color: 'var(--d, #ef4444)', border: 'none', dot: 'var(--d, #ef4444)', noPad: true },
-  pending:  { bg: 'transparent', color: 'var(--w, #d97706)', border: 'none', dot: 'var(--w, #d97706)', noPad: true, pulse: true },
+  pending: { bg: 'transparent', color: 'var(--w, #d97706)', border: 'none', dot: 'var(--w, #d97706)', noPad: true, pulse: true },
 };
 
 const SHAPES = {
@@ -48,23 +48,47 @@ const SIZE_MAP = {
 };
 
 const SHAPE_STYLE = {
-  circle:   (c) => ({ width: 7, height: 7, borderRadius: '50%', background: c, border: 'none' }),
+  circle: (c) => ({ width: 7, height: 7, borderRadius: '50%', background: c, border: 'none' }),
   triangle: (c) => ({ width: 0, height: 0, borderLeft: '4px solid transparent', borderRight: '4px solid transparent', borderBottom: `7px solid ${c}`, background: 'none', borderTop: 'none' }),
-  diamond:  (c) => ({ width: 7, height: 7, borderRadius: 1, transform: 'rotate(45deg)', background: c, border: 'none' }),
-  semicircle:(c) => ({ width: 7, height: 7, borderRadius: '50%', border: 'none', borderTop: '2px solid var(--bg,#fff)', background: c }),
+  diamond: (c) => ({ width: 7, height: 7, borderRadius: 1, transform: 'rotate(45deg)', background: c, border: 'none' }),
+  semicircle: (c) => ({ width: 7, height: 7, borderRadius: '50%', border: 'none', borderTop: '2px solid var(--bg,#fff)', background: c }),
 };
 
 const COLOR_MAP = {
-  green: '#10b981', passed: '#10b981', ok: '#10b981',
-  yellow: '#f97316', violation: '#f97316', warn: '#f97316', amber: '#f97316', orange: '#f97316',
-  red: '#ef4444', failed: '#ef4444', err: '#ef4444', danger: '#ef4444',
-  blue: '#3b82f6', conditional: '#3b82f6',
+  green: '#10b981',
+  passed: '#10b981',
+  ok: '#10b981',
+  success: '#10b981',
+  emerald: '#10b981',
+  yellow: '#f59e0b',
+  violation: '#f97316',
+  warn: '#f97316',
+  warning: '#f97316',
+  amber: '#f59e0b',
+  orange: '#f97316',
+  medium: '#f59e0b',
+  red: '#ef4444',
+  failed: '#ef4444',
+  err: '#ef4444',
+  danger: '#ef4444',
+  error: '#ef4444',
+  high: '#ef4444',
+  critical: '#ef4444',
+  blue: '#3b82f6',
+  conditional: '#3b82f6',
+  info: '#3b82f6',
+  low: '#3b82f6',
+  sky: '#0284c7',
   purple: '#8b5cf6',
+  violet: '#8b5cf6',
   indigo: '#6366f1',
   cyan: '#06b6d4',
   teal: '#14b8a6',
   pink: '#ec4899',
-  grey: '#6b7280', gray: '#6b7280', dim: '#6b7280',
+  rose: '#f43f5e',
+  grey: '#6b7280',
+  gray: '#6b7280',
+  dim: '#6b7280',
 };
 
 function resolveBadgeColor(cStr) {

package/components/DatePicker.jsx

@@ -375,7 +375,7 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
     </button>
   );
 
-  const actualPos = stepperPosition || localStepperPos || 'around';
+  const actualPos = stepperPosition || 'around';
   const showStepperEffective = showStepper && actualPos !== 'off';
   const posMode = actualPos === 'left' || actualPos === 'start' ? 'left'
     : actualPos === 'right' || actualPos === 'end' ? 'right'

package/components/Dropzone.jsx

@@ -1,28 +1,202 @@
 import { useState, useRef } from 'react';
+import { UploadCloud, Paperclip, FileCheck, X, Eye, Trash2 } from 'lucide-react';
+import LineProgress from './LineProgress.jsx';
+import Badge from './Badge.jsx';
+import Button from './Button.jsx';
 
-export function Dropzone({ onFile, accept, hint, file }) {
+function formatBytes(bytes, decimals = 1) {
+  if (!bytes || bytes === 0) return '0 B';
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+export function Dropzone({
+  onFiles,
+  onFile,
+  accept = 'image/*,application/pdf,.*',
+  multiple = true,
+  hint = 'Поддерживаются изображения, PDF документы и любые файлы',
+  uploadingFiles = [],
+  existingFiles = [],
+  onRemoveUploading,
+  onRemoveExisting,
+  onPreview,
+  label = 'Прикрепить файлы (Фото, PDF, документы)',
+}) {
   const [over, setOver] = useState(false);
   const inputRef = useRef(null);
+
+  const handleFiles = (fileList) => {
+    const arr = Array.from(fileList || []);
+    if (arr.length === 0) return;
+    if (onFiles) onFiles(arr);
+    else if (onFile) arr.forEach(f => onFile(f));
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setOver(false);
+    if (e.dataTransfer && e.dataTransfer.files) {
+      handleFiles(e.dataTransfer.files);
+    }
+  };
+
   return (
-    <div className={`dropzone${over ? ' over' : ''}`}
-      onDragOver={e => { e.preventDefault(); setOver(true); }}
-      onDragLeave={() => setOver(false)}
-      onDrop={e => { e.preventDefault(); setOver(false); const f = e.dataTransfer.files[0]; if (f) onFile(f); }}
-      onClick={() => inputRef.current?.click()}>
-      <input ref={inputRef} type="file" accept={accept}
-        onChange={e => e.target.files[0] && onFile(e.target.files[0])} style={{ display: 'none' }} />
-      <div className="dropzone-icon">
-        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--grey-3)" strokeWidth="1.5" strokeLinecap="round">
-          <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
-        </svg>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      {label && (
+        <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--t2)', textTransform: 'uppercase', letterSpacing: '.08em', display: 'block' }}>
+          {label}
+        </label>
+      )}
+
+      <div
+        className={`dropzone${over ? ' over' : ''}`}
+        onDragOver={e => { e.preventDefault(); e.stopPropagation(); setOver(true); }}
+        onDragLeave={e => { e.preventDefault(); e.stopPropagation(); setOver(false); }}
+        onDrop={handleDrop}
+        onClick={() => inputRef.current?.click()}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '20px 20px',
+          border: `2px dashed ${over ? 'var(--accent, #3b82f6)' : 'var(--border-light)'}`,
+          borderRadius: 'var(--rad)',
+          cursor: 'pointer',
+          background: over ? 'rgba(59, 130, 246, 0.08)' : 'var(--grey-1)',
+          transition: 'all .2s ease',
+          textAlign: 'center',
+        }}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          multiple={multiple}
+          onChange={e => {
+            handleFiles(e.target.files);
+            e.target.value = '';
+          }}
+          style={{ display: 'none' }}
+        />
+        <UploadCloud size={24} color="var(--accent, #3b82f6)" style={{ marginBottom: 6, pointerEvents: 'none' }} />
+        <span style={{ fontSize: '.82rem', fontWeight: 600, pointerEvents: 'none' }}>
+          Выберите файлы, перетащите их сюда или вставьте через Ctrl+V
+        </span>
+        {hint && <span style={{ fontSize: '.72rem', color: 'var(--muted)', marginTop: 2, pointerEvents: 'none' }}>{hint}</span>}
       </div>
-      {file ? (
-        <div className="dropzone-file">{file.name}</div>
-      ) : (
-        <>
-          <div className="dropzone-text"><b>Click to select</b> or drag &amp; drop</div>
-          {hint && <div className="dropzone-hint">{hint}</div>}
-        </>
+
+      {/* Uploading progress items */}
+      {uploadingFiles.length > 0 && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          {uploadingFiles.map((item) => (
+            <div
+              key={item.tempId || item.name}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 4,
+                padding: '8px 10px',
+                background: 'var(--surface)',
+                border: '1px solid var(--border-light)',
+                borderRadius: 'var(--rads)',
+                fontSize: '.8rem',
+              }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
+                  {item.status === 'uploading' && <Paperclip size={14} color="var(--accent)" />}
+                  {item.status === 'done' && <FileCheck size={14} color="var(--success, #22c55e)" />}
+                  {item.status === 'error' && <X size={14} color="var(--err, #ef4444)" />}
+                  <span style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', fontWeight: 500 }}>
+                    {item.name} <span style={{ color: 'var(--muted)', fontSize: '.72rem' }}>({formatBytes(item.size)})</span>
+                  </span>
+                </div>
+
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                  {item.status === 'uploading' && (
+                    <span style={{ fontSize: '.75rem', fontWeight: 600, color: 'var(--accent, #3b82f6)' }}>
+                      {item.progress}%
+                    </span>
+                  )}
+                  {item.status === 'done' && <Badge variant="ok" size="xs">Загружен</Badge>}
+                  {item.status === 'error' && <Badge variant="err" size="xs">{item.error || 'Ошибка'}</Badge>}
+                  {onRemoveUploading && (
+                    <button
+                      onClick={(e) => { e.stopPropagation(); onRemoveUploading(item.tempId); }}
+                      style={{ border: 'none', background: 'none', cursor: 'pointer', padding: 2, color: 'var(--muted)' }}
+                    >
+                      <X size={14} />
+                    </button>
+                  )}
+                </div>
+              </div>
+
+              {item.status === 'uploading' && (
+                <LineProgress
+                  value={item.progress}
+                  color="var(--accent, #3b82f6)"
+                  height={4}
+                  showPercent={false}
+                  style={{ marginTop: 2 }}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Existing saved files list */}
+      {existingFiles.length > 0 && (
+        <div style={{ marginTop: 4 }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+            {existingFiles.map((f) => (
+              <div
+                key={f.id}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  padding: '6px 10px',
+                  background: 'var(--surface)',
+                  border: '1px solid var(--border-light)',
+                  borderRadius: 'var(--rads)',
+                  fontSize: '.8rem',
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
+                  <Paperclip size={14} color="var(--accent)" />
+                  <span style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', fontWeight: 500 }}>
+                    {f.original_name || f.originalName} <span style={{ color: 'var(--muted)', fontSize: '.72rem' }}>({formatBytes(f.file_size || f.fileSize)})</span>
+                  </span>
+                </div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                  {onPreview && (
+                    <Button
+                      variant="ghost"
+                      size="xs"
+                      icon={<Eye size={13} />}
+                      onClick={(e) => { e.stopPropagation(); onPreview(f); }}
+                    />
+                  )}
+                  {onRemoveExisting && (
+                    <Button
+                      variant="ghost"
+                      size="xs"
+                      icon={<Trash2 size={13} color="var(--err)" />}
+                      onClick={(e) => { e.stopPropagation(); onRemoveExisting(f.id); }}
+                    />
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
       )}
     </div>
   );

package/components/FilePicker.jsx

@@ -0,0 +1,205 @@
+import { useState, useRef } from 'react';
+import { UploadCloud, Paperclip, FileCheck, X, Eye, Trash2 } from 'lucide-react';
+import LineProgress from './LineProgress.jsx';
+import Badge from './Badge.jsx';
+import Button from './Button.jsx';
+
+function formatBytes(bytes, decimals = 1) {
+  if (!bytes || bytes === 0) return '0 B';
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+export function FilePicker({
+  onFiles,
+  onFile,
+  accept = 'image/*,application/pdf,.*',
+  multiple = true,
+  hint = 'Поддерживаются изображения, PDF документы и любые файлы',
+  uploadingFiles = [],
+  existingFiles = [],
+  onRemoveUploading,
+  onRemoveExisting,
+  onPreview,
+  label = 'Прикрепить файлы (Фото, PDF, документы)',
+}) {
+  const [over, setOver] = useState(false);
+  const inputRef = useRef(null);
+
+  const handleFiles = (fileList) => {
+    const arr = Array.from(fileList || []);
+    if (arr.length === 0) return;
+    if (onFiles) onFiles(arr);
+    else if (onFile) arr.forEach(f => onFile(f));
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setOver(false);
+    if (e.dataTransfer && e.dataTransfer.files) {
+      handleFiles(e.dataTransfer.files);
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      {label && (
+        <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--t2)', textTransform: 'uppercase', letterSpacing: '.08em', display: 'block' }}>
+          {label}
+        </label>
+      )}
+
+      <div
+        className={`file-picker${over ? ' over' : ''}`}
+        onDragOver={e => { e.preventDefault(); e.stopPropagation(); setOver(true); }}
+        onDragLeave={e => { e.preventDefault(); e.stopPropagation(); setOver(false); }}
+        onDrop={handleDrop}
+        onClick={() => inputRef.current?.click()}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '20px 20px',
+          border: `2px dashed ${over ? 'var(--accent, #3b82f6)' : 'var(--border-light)'}`,
+          borderRadius: 'var(--rad)',
+          cursor: 'pointer',
+          background: over ? 'rgba(59, 130, 246, 0.08)' : 'var(--grey-1)',
+          transition: 'all .2s ease',
+          textAlign: 'center',
+        }}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          multiple={multiple}
+          onChange={e => {
+            handleFiles(e.target.files);
+            e.target.value = '';
+          }}
+          style={{ display: 'none' }}
+        />
+        <UploadCloud size={24} color="var(--accent, #3b82f6)" style={{ marginBottom: 6, pointerEvents: 'none' }} />
+        <span style={{ fontSize: '.82rem', fontWeight: 600, pointerEvents: 'none' }}>
+          Выберите файлы, перетащите их сюда или вставьте через Ctrl+V
+        </span>
+        {hint && <span style={{ fontSize: '.72rem', color: 'var(--muted)', marginTop: 2, pointerEvents: 'none' }}>{hint}</span>}
+      </div>
+
+      {/* Uploading progress items */}
+      {uploadingFiles.length > 0 && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          {uploadingFiles.map((item) => (
+            <div
+              key={item.tempId || item.name}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 4,
+                padding: '8px 10px',
+                background: 'var(--surface)',
+                border: '1px solid var(--border-light)',
+                borderRadius: 'var(--rads)',
+                fontSize: '.8rem',
+              }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
+                  {item.status === 'uploading' && <Paperclip size={14} color="var(--accent)" />}
+                  {item.status === 'done' && <FileCheck size={14} color="var(--success, #22c55e)" />}
+                  {item.status === 'error' && <X size={14} color="var(--err, #ef4444)" />}
+                  <span style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', fontWeight: 500 }}>
+                    {item.name} <span style={{ color: 'var(--muted)', fontSize: '.72rem' }}>({formatBytes(item.size)})</span>
+                  </span>
+                </div>
+
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                  {item.status === 'uploading' && (
+                    <span style={{ fontSize: '.75rem', fontWeight: 600, color: 'var(--accent, #3b82f6)' }}>
+                      {item.progress}%
+                    </span>
+                  )}
+                  {item.status === 'done' && <Badge variant="ok" size="xs">Загружен</Badge>}
+                  {item.status === 'error' && <Badge variant="err" size="xs">{item.error || 'Ошибка'}</Badge>}
+                  {onRemoveUploading && (
+                    <button
+                      onClick={(e) => { e.stopPropagation(); onRemoveUploading(item.tempId); }}
+                      style={{ border: 'none', background: 'none', cursor: 'pointer', padding: 2, color: 'var(--muted)' }}
+                    >
+                      <X size={14} />
+                    </button>
+                  )}
+                </div>
+              </div>
+
+              {item.status === 'uploading' && (
+                <LineProgress
+                  value={item.progress}
+                  color="var(--accent, #3b82f6)"
+                  height={4}
+                  showPercent={false}
+                  style={{ marginTop: 2 }}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Existing saved files list */}
+      {existingFiles.length > 0 && (
+        <div style={{ marginTop: 4 }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+            {existingFiles.map((f) => (
+              <div
+                key={f.id}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  padding: '6px 10px',
+                  background: 'var(--surface)',
+                  border: '1px solid var(--border-light)',
+                  borderRadius: 'var(--rads)',
+                  fontSize: '.8rem',
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
+                  <Paperclip size={14} color="var(--accent)" />
+                  <span style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', fontWeight: 500 }}>
+                    {f.original_name || f.originalName} <span style={{ color: 'var(--muted)', fontSize: '.72rem' }}>({formatBytes(f.file_size || f.fileSize)})</span>
+                  </span>
+                </div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                  {onPreview && (
+                    <Button
+                      variant="ghost"
+                      size="xs"
+                      icon={<Eye size={13} />}
+                      onClick={(e) => { e.stopPropagation(); onPreview(f); }}
+                    />
+                  )}
+                  {onRemoveExisting && (
+                    <Button
+                      variant="ghost"
+                      size="xs"
+                      icon={<Trash2 size={13} color="var(--err)" />}
+                      onClick={(e) => { e.stopPropagation(); onRemoveExisting(f.id); }}
+                    />
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default FilePicker;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-ui",
-  "version": "1.2.43",
+  "version": "1.2.45",
   "type": "module",
   "exports": {
     ".": "./index.js"