@libxai/board 0.11.5 → 0.11.6

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.
package/dist/styles.css CHANGED
@@ -11,6 +11,503 @@
11
11
  ============================================================================ */
12
12
 
13
13
 
14
+ /* Dropdown - Base dropdown component */
15
+
16
+
17
+ /**
18
+ * Dropdown Styles
19
+ * Theme-aware dropdown component styles using design tokens
20
+ */
21
+
22
+
23
+ /* Trigger wrapper */
24
+
25
+
26
+ .dropdown-trigger {
27
+ display: inline-block;
28
+ cursor: pointer;
29
+ }
30
+
31
+
32
+ /* Dropdown content container */
33
+
34
+
35
+ .dropdown-content {
36
+ background: var(--asakaa-color-background-card, #ffffff);
37
+ border: 1px solid var(--asakaa-color-border-default, #e0e0e0);
38
+ border-radius: var(--asakaa-spacing-radius-md, 8px);
39
+ box-shadow:
40
+ 0 4px 6px -1px rgba(0, 0, 0, 0.1),
41
+ 0 2px 4px -1px rgba(0, 0, 0, 0.06),
42
+ 0 10px 15px -3px rgba(0, 0, 0, 0.1);
43
+ overflow: hidden;
44
+ transform-origin: top center;
45
+ will-change: opacity, transform;
46
+ }
47
+
48
+
49
+ /* Inner scrollable container */
50
+
51
+
52
+ .dropdown-inner {
53
+ overflow-y: auto;
54
+ overflow-x: hidden;
55
+ max-height: inherit;
56
+ }
57
+
58
+
59
+ /* Scrollbar styling */
60
+
61
+
62
+ .dropdown-inner::-webkit-scrollbar {
63
+ width: 8px;
64
+ }
65
+
66
+
67
+ .dropdown-inner::-webkit-scrollbar-track {
68
+ background: transparent;
69
+ }
70
+
71
+
72
+ .dropdown-inner::-webkit-scrollbar-thumb {
73
+ background: var(--asakaa-color-border-default, #e0e0e0);
74
+ border-radius: 4px;
75
+ }
76
+
77
+
78
+ .dropdown-inner::-webkit-scrollbar-thumb:hover {
79
+ background: var(--asakaa-color-border-hover, #bdbdbd);
80
+ }
81
+
82
+
83
+ /* Dropdown item */
84
+
85
+
86
+ .dropdown-item {
87
+ padding: var(--asakaa-spacing-sm, 8px) var(--asakaa-spacing-md, 12px);
88
+ cursor: pointer;
89
+ color: var(--asakaa-color-text-primary, #212121);
90
+ font-size: 14px;
91
+ line-height: 1.5;
92
+ transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
93
+ -webkit-user-select: none;
94
+ -moz-user-select: none;
95
+ user-select: none;
96
+ display: flex;
97
+ align-items: center;
98
+ gap: var(--asakaa-spacing-sm, 8px);
99
+ }
100
+
101
+
102
+ .dropdown-item:hover {
103
+ background: var(--asakaa-color-background-hover, #f5f5f5);
104
+ }
105
+
106
+
107
+ .dropdown-item[data-active="true"] {
108
+ background: var(--asakaa-color-interactive-primaryHover, #e3f2fd);
109
+ color: var(--asakaa-color-interactive-primary, #1976d2);
110
+ font-weight: 500;
111
+ }
112
+
113
+
114
+ .dropdown-item:active {
115
+ background: var(--asakaa-color-background-active, #eeeeee);
116
+ }
117
+
118
+
119
+ .dropdown-item[aria-disabled="true"] {
120
+ opacity: 0.5;
121
+ cursor: not-allowed;
122
+ pointer-events: none;
123
+ }
124
+
125
+
126
+ /* Dropdown arrow */
127
+
128
+
129
+ .dropdown-arrow {
130
+ fill: var(--asakaa-color-background-card, #ffffff);
131
+ stroke: var(--asakaa-color-border-default, #e0e0e0);
132
+ stroke-width: 1px;
133
+ }
134
+
135
+
136
+ /* Dropdown sections */
137
+
138
+
139
+ .dropdown-section {
140
+ padding: var(--asakaa-spacing-xs, 4px) 0;
141
+ }
142
+
143
+
144
+ .dropdown-section:not(:last-child) {
145
+ border-bottom: 1px solid var(--asakaa-color-border-default, #e0e0e0);
146
+ }
147
+
148
+
149
+ .dropdown-section-header {
150
+ padding: var(--asakaa-spacing-xs, 4px) var(--asakaa-spacing-md, 12px);
151
+ font-size: 12px;
152
+ font-weight: 600;
153
+ color: var(--asakaa-color-text-secondary, #757575);
154
+ text-transform: uppercase;
155
+ letter-spacing: 0.5px;
156
+ }
157
+
158
+
159
+ /* Dropdown search */
160
+
161
+
162
+ .dropdown-search {
163
+ padding: var(--asakaa-spacing-sm, 8px);
164
+ border-bottom: 1px solid var(--asakaa-color-border-default, #e0e0e0);
165
+ position: sticky;
166
+ top: 0;
167
+ background: var(--asakaa-color-background-card, #ffffff);
168
+ z-index: 1;
169
+ }
170
+
171
+
172
+ .dropdown-search input {
173
+ width: 100%;
174
+ padding: var(--asakaa-spacing-xs, 4px) var(--asakaa-spacing-sm, 8px);
175
+ border: 1px solid var(--asakaa-color-border-default, #e0e0e0);
176
+ border-radius: var(--asakaa-spacing-radius-sm, 4px);
177
+ background: var(--asakaa-color-background-secondary, #fafafa);
178
+ color: var(--asakaa-color-text-primary, #212121);
179
+ font-size: 14px;
180
+ outline: none;
181
+ transition: border-color 150ms ease-in-out;
182
+ }
183
+
184
+
185
+ .dropdown-search input:focus {
186
+ border-color: var(--asakaa-color-interactive-primary, #1976d2);
187
+ }
188
+
189
+
190
+ .dropdown-search input::-moz-placeholder {
191
+ color: var(--asakaa-color-text-tertiary, #9e9e9e);
192
+ }
193
+
194
+
195
+ .dropdown-search input::placeholder {
196
+ color: var(--asakaa-color-text-tertiary, #9e9e9e);
197
+ }
198
+
199
+
200
+ /* Dropdown empty state */
201
+
202
+
203
+ .dropdown-empty {
204
+ padding: var(--asakaa-spacing-lg, 16px);
205
+ text-align: center;
206
+ color: var(--asakaa-color-text-secondary, #757575);
207
+ font-size: 14px;
208
+ }
209
+
210
+
211
+ /* Dropdown loading state */
212
+
213
+
214
+ .dropdown-loading {
215
+ padding: var(--asakaa-spacing-lg, 16px);
216
+ text-align: center;
217
+ color: var(--asakaa-color-text-secondary, #757575);
218
+ font-size: 14px;
219
+ display: flex;
220
+ align-items: center;
221
+ justify-content: center;
222
+ gap: var(--asakaa-spacing-sm, 8px);
223
+ }
224
+
225
+
226
+ .dropdown-loading-spinner {
227
+ width: 16px;
228
+ height: 16px;
229
+ border: 2px solid var(--asakaa-color-border-default, #e0e0e0);
230
+ border-top-color: var(--asakaa-color-interactive-primary, #1976d2);
231
+ border-radius: 50%;
232
+ animation: dropdown-spin 600ms linear infinite;
233
+ }
234
+
235
+
236
+ @keyframes dropdown-spin {
237
+ to {
238
+ transform: rotate(360deg);
239
+ }
240
+ }
241
+
242
+
243
+ /* Responsive adjustments */
244
+
245
+
246
+ @media (max-width: 768px) {
247
+ .dropdown-content {
248
+ max-width: calc(100vw - 32px) !important;
249
+ }
250
+ }
251
+
252
+
253
+ /* Dark theme adjustments */
254
+
255
+
256
+ [data-theme="dark"] .dropdown-content {
257
+ box-shadow:
258
+ 0 4px 6px -1px rgba(0, 0, 0, 0.3),
259
+ 0 2px 4px -1px rgba(0, 0, 0, 0.2),
260
+ 0 10px 15px -3px rgba(0, 0, 0, 0.3);
261
+ }
262
+
263
+
264
+ /* High contrast mode */
265
+
266
+
267
+ @media (prefers-contrast: high) {
268
+ .dropdown-item:hover {
269
+ outline: 2px solid currentColor;
270
+ outline-offset: -2px;
271
+ }
272
+ }
273
+
274
+
275
+ /* Reduced motion */
276
+
277
+
278
+ @media (prefers-reduced-motion: reduce) {
279
+ .dropdown-content,
280
+ .dropdown-item {
281
+ transition: none !important;
282
+ }
283
+ }
284
+
285
+
286
+ /* Additional utility classes for V2 selectors */
287
+
288
+
289
+ .dropdown-search-input {
290
+ width: 100%;
291
+ padding: var(--asakaa-spacing-sm, 8px) var(--asakaa-spacing-md, 12px);
292
+ border: 1px solid var(--asakaa-color-border-default, #e0e0e0);
293
+ border-radius: var(--asakaa-spacing-radius-sm, 4px);
294
+ background: var(--asakaa-color-background-input, #fafafa);
295
+ color: var(--asakaa-color-text-primary, #212121);
296
+ font-size: 13px;
297
+ outline: none;
298
+ transition: border-color 150ms ease-in-out;
299
+ }
300
+
301
+
302
+ .dropdown-search-input:focus {
303
+ border-color: var(--asakaa-color-interactive-primary, #1976d2);
304
+ }
305
+
306
+
307
+ .dropdown-search-input::-moz-placeholder {
308
+ color: var(--asakaa-color-text-tertiary, #9e9e9e);
309
+ }
310
+
311
+
312
+ .dropdown-search-input::placeholder {
313
+ color: var(--asakaa-color-text-tertiary, #9e9e9e);
314
+ }
315
+
316
+
317
+ .dropdown-search-wrapper {
318
+ padding: var(--asakaa-spacing-md, 12px);
319
+ border-bottom: 1px solid var(--asakaa-color-border-subtle, #f0f0f0);
320
+ }
321
+
322
+
323
+ .dropdown-list {
324
+ padding: var(--asakaa-spacing-xs, 4px) 0;
325
+ max-height: 240px;
326
+ overflow-y: auto;
327
+ }
328
+
329
+
330
+ .dropdown-danger-button {
331
+ width: 100%;
332
+ padding: var(--asakaa-spacing-sm, 8px) var(--asakaa-spacing-md, 12px);
333
+ border-radius: var(--asakaa-spacing-radius-sm, 4px);
334
+ font-size: 13px;
335
+ font-weight: 600;
336
+ transition: all 150ms ease-in-out;
337
+ border: 1px solid var(--asakaa-color-danger-border, rgba(239, 68, 68, 0.3));
338
+ background: var(--asakaa-color-danger-background, rgba(239, 68, 68, 0.08));
339
+ color: var(--asakaa-color-danger, #ef4444);
340
+ cursor: pointer;
341
+ }
342
+
343
+
344
+ .dropdown-danger-button:hover {
345
+ background: var(--asakaa-color-danger-backgroundHover, rgba(239, 68, 68, 0.15));
346
+ }
347
+
348
+
349
+ .dropdown-danger-button:active {
350
+ transform: scale(0.98);
351
+ }
352
+
353
+
354
+ .dropdown-button-wrapper {
355
+ padding: var(--asakaa-spacing-md, 12px);
356
+ border-top: 1px solid var(--asakaa-color-border-subtle, #f0f0f0);
357
+ }
358
+
359
+
360
+ .dropdown-primary-button {
361
+ width: 100%;
362
+ padding: var(--asakaa-spacing-sm, 8px) var(--asakaa-spacing-md, 12px);
363
+ border-radius: var(--asakaa-spacing-radius-sm, 4px);
364
+ font-size: 13px;
365
+ font-weight: 600;
366
+ transition: all 150ms ease-in-out;
367
+ border: none;
368
+ background: var(--asakaa-color-interactive-primary, #1976d2);
369
+ color: var(--asakaa-color-text-inverse, #ffffff);
370
+ cursor: pointer;
371
+ }
372
+
373
+
374
+ .dropdown-primary-button:hover {
375
+ background: var(--asakaa-color-interactive-primaryHover, #1565c0);
376
+ }
377
+
378
+
379
+ .dropdown-primary-button:active {
380
+ transform: scale(0.98);
381
+ }
382
+
383
+
384
+ .dropdown-quick-grid {
385
+ display: grid;
386
+ grid-template-columns: repeat(2, 1fr);
387
+ gap: var(--asakaa-spacing-sm, 8px);
388
+ }
389
+
390
+
391
+ .dropdown-quick-button {
392
+ padding: var(--asakaa-spacing-sm, 8px) var(--asakaa-spacing-md, 12px);
393
+ border-radius: var(--asakaa-spacing-radius-sm, 4px);
394
+ font-size: 12px;
395
+ font-weight: 600;
396
+ transition: all 150ms ease-in-out;
397
+ border: 1px solid var(--asakaa-color-interactive-primaryBorder, rgba(25, 118, 210, 0.3));
398
+ background: var(--asakaa-color-interactive-primaryBackground, rgba(25, 118, 210, 0.08));
399
+ color: var(--asakaa-color-interactive-primary, #1976d2);
400
+ cursor: pointer;
401
+ }
402
+
403
+
404
+ .dropdown-quick-button:hover {
405
+ background: var(--asakaa-color-interactive-primaryBackgroundHover, rgba(25, 118, 210, 0.15));
406
+ }
407
+
408
+
409
+ .dropdown-quick-button:active {
410
+ transform: scale(0.98);
411
+ }
412
+
413
+
414
+ .dropdown-label {
415
+ display: block;
416
+ font-size: 11px;
417
+ font-weight: 600;
418
+ margin-bottom: 6px;
419
+ color: var(--asakaa-color-text-secondary, #757575);
420
+ text-transform: uppercase;
421
+ letter-spacing: 0.5px;
422
+ }
423
+
424
+
425
+ .dropdown-input {
426
+ width: 100%;
427
+ padding: var(--asakaa-spacing-sm, 8px) var(--asakaa-spacing-md, 12px);
428
+ border-radius: var(--asakaa-spacing-radius-sm, 4px);
429
+ font-size: 13px;
430
+ background: var(--asakaa-color-background-input, #fafafa);
431
+ border: 1px solid var(--asakaa-color-border-default, #e0e0e0);
432
+ color: var(--asakaa-color-text-primary, #212121);
433
+ outline: none;
434
+ transition: border-color 150ms ease-in-out;
435
+ }
436
+
437
+
438
+ .dropdown-input:focus {
439
+ border-color: var(--asakaa-color-interactive-primary, #1976d2);
440
+ }
441
+
442
+
443
+ .dropdown-form-group {
444
+ margin-bottom: var(--asakaa-spacing-md, 12px);
445
+ }
446
+
447
+
448
+ .dropdown-form-actions {
449
+ margin-top: var(--asakaa-spacing-sm, 8px);
450
+ display: flex;
451
+ flex-direction: column;
452
+ gap: var(--asakaa-spacing-sm, 8px);
453
+ }
454
+
455
+
456
+ /* Avatar trigger styles */
457
+
458
+
459
+ .dropdown-avatar-trigger {
460
+ display: flex;
461
+ align-items: center;
462
+ gap: 4px;
463
+ padding: 2px;
464
+ border-radius: var(--asakaa-spacing-radius-md, 8px);
465
+ transition: all 150ms ease-in-out;
466
+ background: transparent;
467
+ border: none;
468
+ cursor: pointer;
469
+ }
470
+
471
+
472
+ .dropdown-avatar-trigger:hover {
473
+ background: rgba(255, 255, 255, 0.1);
474
+ transform: scale(1.05);
475
+ }
476
+
477
+
478
+ .dropdown-avatar-trigger:active {
479
+ transform: scale(0.95);
480
+ }
481
+
482
+
483
+ .dropdown-avatar-empty-trigger {
484
+ width: 28px;
485
+ height: 28px;
486
+ border-radius: 9999px;
487
+ display: flex;
488
+ align-items: center;
489
+ justify-content: center;
490
+ transition: all 150ms ease-in-out;
491
+ /* Color azul fijo que se ve bien en todos los temas */
492
+ background: rgba(59, 130, 246, 0.15);
493
+ border: 2px solid #3b82f6;
494
+ color: #3b82f6;
495
+ }
496
+
497
+
498
+ .dropdown-avatar-empty-trigger:hover {
499
+ background: rgba(59, 130, 246, 0.3);
500
+ border-color: #2563eb;
501
+ color: #2563eb;
502
+ }
503
+
504
+
505
+ .dropdown-avatar-overflow {
506
+ background: var(--asakaa-color-interactive-secondary);
507
+ color: var(--asakaa-color-text-inverse);
508
+ }
509
+
510
+
14
511
  /* FilterBar - Advanced filtering and sorting UI */
15
512
 
16
513
 
@@ -7430,11 +7927,6 @@ body {
7430
7927
  }
7431
7928
 
7432
7929
 
7433
- .h-7 {
7434
- height: 1.75rem;
7435
- }
7436
-
7437
-
7438
7930
  .h-8 {
7439
7931
  height: 2rem;
7440
7932
  }
@@ -7475,16 +7967,6 @@ body {
7475
7967
  }
7476
7968
 
7477
7969
 
7478
- .max-h-\[280px\] {
7479
- max-height: 280px;
7480
- }
7481
-
7482
-
7483
- .max-h-\[300px\] {
7484
- max-height: 300px;
7485
- }
7486
-
7487
-
7488
7970
  .max-h-\[500px\] {
7489
7971
  max-height: 500px;
7490
7972
  }
@@ -7555,11 +8037,6 @@ body {
7555
8037
  }
7556
8038
 
7557
8039
 
7558
- .w-7 {
7559
- width: 1.75rem;
7560
- }
7561
-
7562
-
7563
8040
  .w-8 {
7564
8041
  width: 2rem;
7565
8042
  }
@@ -7595,11 +8072,6 @@ body {
7595
8072
  }
7596
8073
 
7597
8074
 
7598
- .min-w-\[300px\] {
7599
- min-width: 300px;
7600
- }
7601
-
7602
-
7603
8075
  .min-w-\[320px\] {
7604
8076
  min-width: 320px;
7605
8077
  }
@@ -7640,6 +8112,11 @@ body {
7640
8112
  }
7641
8113
 
7642
8114
 
8115
+ .max-w-\[60px\] {
8116
+ max-width: 60px;
8117
+ }
8118
+
8119
+
7643
8120
  .max-w-md {
7644
8121
  max-width: 28rem;
7645
8122
  }
@@ -7761,6 +8238,11 @@ body {
7761
8238
  }
7762
8239
 
7763
8240
 
8241
+ .justify-start {
8242
+ justify-content: flex-start;
8243
+ }
8244
+
8245
+
7764
8246
  .justify-end {
7765
8247
  justify-content: flex-end;
7766
8248
  }
@@ -7938,6 +8420,11 @@ body {
7938
8420
  }
7939
8421
 
7940
8422
 
8423
+ .border-none {
8424
+ border-style: none;
8425
+ }
8426
+
8427
+
7941
8428
  .border-blue-500 {
7942
8429
  --tw-border-opacity: 1;
7943
8430
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
@@ -7999,11 +8486,6 @@ body {
7999
8486
  }
8000
8487
 
8001
8488
 
8002
- .border-white\/5 {
8003
- border-color: rgb(255 255 255 / 0.05);
8004
- }
8005
-
8006
-
8007
8489
  .border-yellow-500\/30 {
8008
8490
  border-color: rgb(234 179 8 / 0.3);
8009
8491
  }
@@ -8323,11 +8805,6 @@ body {
8323
8805
  }
8324
8806
 
8325
8807
 
8326
- .pt-0\.5 {
8327
- padding-top: 0.125rem;
8328
- }
8329
-
8330
-
8331
8808
  .pt-1 {
8332
8809
  padding-top: 0.25rem;
8333
8810
  }
@@ -8381,11 +8858,6 @@ body {
8381
8858
  }
8382
8859
 
8383
8860
 
8384
- .text-\[11px\] {
8385
- font-size: 11px;
8386
- }
8387
-
8388
-
8389
8861
  .text-base {
8390
8862
  font-size: 1rem;
8391
8863
  line-height: 1.5rem;
@@ -8457,11 +8929,6 @@ body {
8457
8929
  }
8458
8930
 
8459
8931
 
8460
- .tracking-wide {
8461
- letter-spacing: 0.025em;
8462
- }
8463
-
8464
-
8465
8932
  .tracking-wider {
8466
8933
  letter-spacing: 0.05em;
8467
8934
  }
@@ -8659,13 +9126,6 @@ body {
8659
9126
  }
8660
9127
 
8661
9128
 
8662
- .shadow-sm {
8663
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
8664
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
8665
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
8666
- }
8667
-
8668
-
8669
9129
  .shadow-xl {
8670
9130
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
8671
9131
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -8998,11 +9458,6 @@ body {
8998
9458
  }
8999
9459
 
9000
9460
 
9001
- .hover\:bg-red-600\/30:hover {
9002
- background-color: rgb(220 38 38 / 0.3);
9003
- }
9004
-
9005
-
9006
9461
  .hover\:bg-white\/10:hover {
9007
9462
  background-color: rgb(255 255 255 / 0.1);
9008
9463
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@libxai/board",
3
- "version": "0.11.5",
3
+ "version": "0.11.6",
4
4
  "type": "module",
5
5
  "description": "Professional Gantt Chart + Kanban Board for React - Part of LibXAI Suite - TypeScript - Production-Ready - Zero Config",
6
6
  "author": "LibXAI <hello@libxai.com>",