cynx-ui 1.3.23 → 1.3.24

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 (3) hide show
  1. package/components/Select.jsx +39 -28
  2. package/index.js +97 -97
  3. package/package.json +1 -1
package/components/Select.jsx CHANGED
@@ -37,6 +37,7 @@ export default function Select({
37
37
  size = 'md',
38
38
  style = {},
39
39
  rounded = false,
40
+ showCount = false,
40
41
  }) {
41
42
  const [open, setOpen] = useState(false);
42
43
  const [query, setQuery] = useState('');
@@ -217,32 +218,42 @@ export default function Select({
217
218
  >
218
219
  <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center' }}>
219
220
  {multi && selectedValues.length > 0 ? (
220
- <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, flex: 1, minWidth: 0 }}>
221
- {selectedValues.map(v => (
222
- <span key={v} style={{
223
- display: 'inline-flex',
224
- alignItems: 'center',
225
- gap: 4,
226
- padding: '2px 6px',
227
- background: 'var(--pd,var(--accent-bg, rgba(249,158,44,.1)))',
228
- border: '1px solid var(--accent, #f99e2c)',
229
- borderRadius: 4,
230
- fontSize: 11,
231
- fontWeight: 600,
232
- color: 'var(--accent, #f99e2c)',
233
- whiteSpace: 'nowrap',
234
- maxWidth: 140,
235
- opacity: 0.85,
236
- }}>
237
- {getLabel(v)}
238
- <X
239
- size={11}
240
- style={{ cursor: 'pointer', flexShrink: 0, opacity: 0.5 }}
241
- onMouseDown={(e) => removeTag(e, v)}
242
- />
243
- </span>
244
- ))}
245
- </div>
221
+ showCount ? (
222
+ <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: 'var(--t,var(--primary-text, #0f172a))' }}>
223
+ {typeof showCount === 'function'
224
+ ? showCount(selectedValues.length)
225
+ : selectedValues.length === 1
226
+ ? getLabel(selectedValues[0])
227
+ : `Выбрано: ${selectedValues.length}`}
228
+ </span>
229
+ ) : (
230
+ <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, flex: 1, minWidth: 0 }}>
231
+ {selectedValues.map(v => (
232
+ <span key={v} style={{
233
+ display: 'inline-flex',
234
+ alignItems: 'center',
235
+ gap: 4,
236
+ padding: '2px 6px',
237
+ background: 'var(--pd,var(--accent-bg, rgba(249,158,44,.1)))',
238
+ border: '1px solid var(--accent, #f99e2c)',
239
+ borderRadius: 4,
240
+ fontSize: 11,
241
+ fontWeight: 600,
242
+ color: 'var(--accent, #f99e2c)',
243
+ whiteSpace: 'nowrap',
244
+ maxWidth: 140,
245
+ opacity: 0.85,
246
+ }}>
247
+ {getLabel(v)}
248
+ <X
249
+ size={11}
250
+ style={{ cursor: 'pointer', flexShrink: 0, opacity: 0.5 }}
251
+ onMouseDown={(e) => removeTag(e, v)}
252
+ />
253
+ </span>
254
+ ))}
255
+ </div>
256
+ )
246
257
  ) : !multi && selectedValues.length > 0 ? (
247
258
  <span style={{ fontWeight: 400, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
248
259
  {getLabel(selectedValues[0]) || '\u00A0'}
@@ -251,12 +262,12 @@ export default function Select({
251
262
  <span style={{ color: 'var(--t3,var(--grey-3, #cbd5e1))', fontWeight: 400 }}>{placeholder}</span>
252
263
  )}
253
264
  </div>
254
- {!multi && selectedValues.length > 0 && selectedValues[0] !== '' && selectedValues[0] !== null && (clearable || !!onClear) ? (
265
+ {selectedValues.length > 0 && selectedValues[0] !== '' && selectedValues[0] !== null && (clearable || !!onClear) ? (
255
266
  <span
256
267
  onClick={(e) => {
257
268
  e.stopPropagation();
258
269
  if (onClear) onClear();
259
- else onChange?.('');
270
+ else onChange?.(multi ? [] : '');
260
271
  }}
261
272
  title="Сбросить выбор"
262
273
  style={{
package/index.js CHANGED
@@ -1,97 +1,97 @@
1
- // cynx-ui — shared component library
2
- import { default as _Button } from './components/Button.jsx';
3
- import { default as _Input } from './components/Input.jsx';
4
- import { default as _Toggle } from './components/Toggle.jsx';
5
- import { default as _Spinner, Spinner as _SpinnerNamed } from './components/Spinner.jsx';
6
- import { default as _TabBar } from './components/TabBar.jsx';
7
- import { default as _ImageUpload } from './components/ImageUpload.jsx';
8
- import { default as _ChipSelect } from './components/ChipSelect.jsx';
9
- import { default as _Checkbox } from './components/Checkbox.jsx';
10
- import { default as _AuthOverlay } from './components/AuthOverlay.jsx';
11
- import { default as _UptimeBar } from './components/UptimeBar.jsx';
12
- import { default as _LinearProgress } from './components/LinearProgress.jsx';
13
- import { default as _StatBarCard } from './components/StatBarCard.jsx';
14
- import { default as _StatsCard } from './components/StatsCard.jsx';
15
- import { default as _ActivityCard } from './components/ActivityCard.jsx';
16
- import { default as _HoverCard } from './components/HoverCard.jsx';
17
- import { default as _StatsBar } from './components/StatsBar.jsx';
18
- import { default as _Select } from './components/Select.jsx';
19
- import { default as _Badge } from './components/Badge.jsx';
20
- import { default as _PulseDot } from './components/PulseDot.jsx';
21
- import { default as _CircularProgress } from './components/CircularProgress.jsx';
22
- import { default as _Skeleton } from './components/Skeleton.jsx';
23
- import { Modal as _Modal, Confirm as _Confirm } from './components/Modal.jsx';
24
- import { toast as _toast, useToast as _useToast, Toast as _Toast } from './components/Toast.jsx';
25
- import { ConfirmRoot as _ConfirmRoot, confirm as _confirm } from './components/Confirm.jsx';
26
- import { Pagination as _Pagination } from './components/Pagination.jsx';
27
- import { DatePicker as _DatePicker } from './components/DatePicker.jsx';
28
- import { TimePicker as _TimePicker } from './components/TimePicker.jsx';
29
- import { ActionsMenu as _ActionsMenu } from './components/ActionsMenu.jsx';
30
- import { BrandingCard as _BrandingCard } from './components/BrandingCard.jsx';
31
- import { Dropzone as _Dropzone } from './components/Dropzone.jsx';
32
- import { Tabs as _Tabs } from './components/Tabs.jsx';
33
- import { SkeletonText as _SkeletonText, SkeletonCard as _SkeletonCard, SkeletonRows as _SkeletonRows, SkeletonStats as _SkeletonStats } from './components/Skeleton.jsx';
34
- import { XTable as _XTable, XThead as _XThead, XTbody as _XTbody, XTr as _XTr, XTh as _XTh, XTd as _XTd, SkeletonTable as _SkeletonTable } from './components/XTable.jsx';
35
- import { PageShell as _PageShell, TableCard as _TableCard, TableCardFilters as _TableCardFilters, TableCardBody as _TableCardBody, TableCardFooter as _TableCardFooter, CardHdr as _CardHdr, StatCard as _StatCard, StatCardSkeleton as _StatCardSkeleton } from './components/Card.jsx';
36
-
37
- import { default as _FilePicker } from './components/FilePicker.jsx';
38
- import { default as _Divider } from './components/Divider.jsx';
39
- import { default as _InfoBadge } from './components/InfoBadge.jsx';
40
-
41
- export const Button = _Button;
42
- export const FilePicker = _FilePicker;
43
- export const Divider = _Divider;
44
- export const InfoBadge = _InfoBadge;
45
- export const Input = _Input;
46
- export const Toggle = _Toggle;
47
- export const Spinner = _Spinner || _SpinnerNamed;
48
- export const TabBar = _TabBar;
49
- export const ImageUpload = _ImageUpload;
50
- export const ChipSelect = _ChipSelect;
51
- export const Checkbox = _Checkbox;
52
- export const AuthOverlay = _AuthOverlay;
53
- export const UptimeBar = _UptimeBar;
54
- export const LinearProgress = _LinearProgress;
55
- export const StatBarCard = _StatBarCard;
56
- export const StatsCard = _StatsCard;
57
- export const ActivityCard = _ActivityCard;
58
- export const HoverCard = _HoverCard;
59
- export const StatsBar = _StatsBar;
60
- export const Select = _Select;
61
- export const Badge = _Badge;
62
- export const PulseDot = _PulseDot;
63
- export const CircularProgress = _CircularProgress;
64
- export const Skeleton = _Skeleton;
65
- export const Modal = _Modal;
66
- export const Confirm = _Confirm;
67
- export const toast = _toast;
68
- export const useToast = _useToast;
69
- export const Toast = _Toast;
70
- export const ConfirmRoot = _ConfirmRoot;
71
- export const confirm = _confirm;
72
- export const Pagination = _Pagination;
73
- export const DatePicker = _DatePicker;
74
- export const TimePicker = _TimePicker;
75
- export const ActionsMenu = _ActionsMenu;
76
- export const BrandingCard = _BrandingCard;
77
- export const Dropzone = _Dropzone;
78
- export const Tabs = _Tabs;
79
- export const SkeletonText = _SkeletonText;
80
- export const SkeletonCard = _SkeletonCard;
81
- export const SkeletonRows = _SkeletonRows;
82
- export const SkeletonStats = _SkeletonStats;
83
- export const XTable = _XTable;
84
- export const XThead = _XThead;
85
- export const XTbody = _XTbody;
86
- export const XTr = _XTr;
87
- export const XTh = _XTh;
88
- export const XTd = _XTd;
89
- export const SkeletonTable = _SkeletonTable;
90
- export const PageShell = _PageShell;
91
- export const TableCard = _TableCard;
92
- export const TableCardFilters = _TableCardFilters;
93
- export const TableCardBody = _TableCardBody;
94
- export const TableCardFooter = _TableCardFooter;
95
- export const CardHdr = _CardHdr;
96
- export const StatCard = _StatCard;
97
- export const StatCardSkeleton = _StatCardSkeleton;
1
+ // cynx-ui — shared component library
2
+ import { default as _Button } from './components/Button.jsx';
3
+ import { default as _Input } from './components/Input.jsx';
4
+ import { default as _Toggle } from './components/Toggle.jsx';
5
+ import { default as _Spinner, Spinner as _SpinnerNamed } from './components/Spinner.jsx';
6
+ import { default as _TabBar } from './components/TabBar.jsx';
7
+ import { default as _ImageUpload } from './components/ImageUpload.jsx';
8
+ import { default as _ChipSelect } from './components/ChipSelect.jsx';
9
+ import { default as _Checkbox } from './components/Checkbox.jsx';
10
+ import { default as _AuthOverlay } from './components/AuthOverlay.jsx';
11
+ import { default as _UptimeBar } from './components/UptimeBar.jsx';
12
+ import { default as _LinearProgress } from './components/LinearProgress.jsx';
13
+ import { default as _StatBarCard } from './components/StatBarCard.jsx';
14
+ import { default as _StatsCard } from './components/StatsCard.jsx';
15
+ import { default as _ActivityCard } from './components/ActivityCard.jsx';
16
+ import { default as _HoverCard } from './components/HoverCard.jsx';
17
+ import { default as _StatsBar } from './components/StatsBar.jsx';
18
+ import { default as _Select } from './components/Select.jsx';
19
+ import { default as _Badge } from './components/Badge.jsx';
20
+ import { default as _PulseDot } from './components/PulseDot.jsx';
21
+ import { default as _CircularProgress } from './components/CircularProgress.jsx';
22
+ import { default as _Skeleton } from './components/Skeleton.jsx';
23
+ import { Modal as _Modal, Confirm as _Confirm } from './components/Modal.jsx';
24
+ import { toast as _toast, useToast as _useToast, Toast as _Toast } from './components/Toast.jsx';
25
+ import { ConfirmRoot as _ConfirmRoot, confirm as _confirm } from './components/Confirm.jsx';
26
+ import { Pagination as _Pagination } from './components/Pagination.jsx';
27
+ import { DatePicker as _DatePicker } from './components/DatePicker.jsx';
28
+ import { TimePicker as _TimePicker } from './components/TimePicker.jsx';
29
+ import { ActionsMenu as _ActionsMenu } from './components/ActionsMenu.jsx';
30
+ import { BrandingCard as _BrandingCard } from './components/BrandingCard.jsx';
31
+ import { Dropzone as _Dropzone } from './components/Dropzone.jsx';
32
+ import { Tabs as _Tabs } from './components/Tabs.jsx';
33
+ import { SkeletonText as _SkeletonText, SkeletonCard as _SkeletonCard, SkeletonRows as _SkeletonRows, SkeletonStats as _SkeletonStats } from './components/Skeleton.jsx';
34
+ import { XTable as _XTable, XThead as _XThead, XTbody as _XTbody, XTr as _XTr, XTh as _XTh, XTd as _XTd, SkeletonTable as _SkeletonTable } from './components/XTable.jsx';
35
+ import { PageShell as _PageShell, TableCard as _TableCard, TableCardFilters as _TableCardFilters, TableCardBody as _TableCardBody, TableCardFooter as _TableCardFooter, CardHdr as _CardHdr, StatCard as _StatCard, StatCardSkeleton as _StatCardSkeleton } from './components/Card.jsx';
36
+
37
+ import { default as _FilePicker } from './components/FilePicker.jsx';
38
+ import { default as _Divider } from './components/Divider.jsx';
39
+ import { default as _InfoBadge } from './components/InfoBadge.jsx';
40
+
41
+ export const Button = _Button;
42
+ export const FilePicker = _FilePicker;
43
+ export const Divider = _Divider;
44
+ export const InfoBadge = _InfoBadge;
45
+ export const Input = _Input;
46
+ export const Toggle = _Toggle;
47
+ export const Spinner = _Spinner || _SpinnerNamed;
48
+ export const TabBar = _TabBar;
49
+ export const ImageUpload = _ImageUpload;
50
+ export const ChipSelect = _ChipSelect;
51
+ export const Checkbox = _Checkbox;
52
+ export const AuthOverlay = _AuthOverlay;
53
+ export const UptimeBar = _UptimeBar;
54
+ export const LinearProgress = _LinearProgress;
55
+ export const StatBarCard = _StatBarCard;
56
+ export const StatsCard = _StatsCard;
57
+ export const ActivityCard = _ActivityCard;
58
+ export const HoverCard = _HoverCard;
59
+ export const StatsBar = _StatsBar;
60
+ export const Select = _Select;
61
+ export const Badge = _Badge;
62
+ export const PulseDot = _PulseDot;
63
+ export const CircularProgress = _CircularProgress;
64
+ export const Skeleton = _Skeleton;
65
+ export const Modal = _Modal;
66
+ export const Confirm = _Confirm;
67
+ export const toast = _toast;
68
+ export const useToast = _useToast;
69
+ export const Toast = _Toast;
70
+ export const ConfirmRoot = _ConfirmRoot;
71
+ export const confirm = _confirm;
72
+ export const Pagination = _Pagination;
73
+ export const DatePicker = _DatePicker;
74
+ export const TimePicker = _TimePicker;
75
+ export const ActionsMenu = _ActionsMenu;
76
+ export const BrandingCard = _BrandingCard;
77
+ export const Dropzone = _Dropzone;
78
+ export const Tabs = _Tabs;
79
+ export const SkeletonText = _SkeletonText;
80
+ export const SkeletonCard = _SkeletonCard;
81
+ export const SkeletonRows = _SkeletonRows;
82
+ export const SkeletonStats = _SkeletonStats;
83
+ export const XTable = _XTable;
84
+ export const XThead = _XThead;
85
+ export const XTbody = _XTbody;
86
+ export const XTr = _XTr;
87
+ export const XTh = _XTh;
88
+ export const XTd = _XTd;
89
+ export const SkeletonTable = _SkeletonTable;
90
+ export const PageShell = _PageShell;
91
+ export const TableCard = _TableCard;
92
+ export const TableCardFilters = _TableCardFilters;
93
+ export const TableCardBody = _TableCardBody;
94
+ export const TableCardFooter = _TableCardFooter;
95
+ export const CardHdr = _CardHdr;
96
+ export const StatCard = _StatCard;
97
+ export const StatCardSkeleton = _StatCardSkeleton;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cynx-ui",
3
- "version": "1.3.23",
3
+ "version": "1.3.24",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": "./index.js"