@stereopt/data-table 0.1.9 → 0.1.10

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
@@ -1,8 +1,28 @@
1
1
  /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
+ .sr-only {
4
+ position: absolute;
5
+ width: 1px;
6
+ height: 1px;
7
+ padding: 0;
8
+ margin: -1px;
9
+ overflow: hidden;
10
+ clip-path: inset(50%);
11
+ white-space: nowrap;
12
+ border-width: 0;
13
+ }
3
14
  .relative {
4
15
  position: relative;
5
16
  }
17
+ .flex {
18
+ display: flex;
19
+ }
20
+ .hidden {
21
+ display: none;
22
+ }
23
+ .inline-flex {
24
+ display: inline-flex;
25
+ }
6
26
  .table {
7
27
  display: table;
8
28
  }
@@ -15,12 +35,30 @@
15
35
  .table-row {
16
36
  display: table-row;
17
37
  }
38
+ .w-\[100px\] {
39
+ width: 100px;
40
+ }
18
41
  .w-full {
19
42
  width: 100%;
20
43
  }
44
+ .flex-1 {
45
+ flex: 1;
46
+ }
47
+ .shrink-0 {
48
+ flex-shrink: 0;
49
+ }
21
50
  .caption-bottom {
22
51
  caption-side: bottom;
23
52
  }
53
+ .items-center {
54
+ align-items: center;
55
+ }
56
+ .justify-between {
57
+ justify-content: space-between;
58
+ }
59
+ .justify-center {
60
+ justify-content: center;
61
+ }
24
62
  .truncate {
25
63
  overflow: hidden;
26
64
  text-overflow: ellipsis;
@@ -32,6 +70,12 @@
32
70
  .overflow-x-auto {
33
71
  overflow-x: auto;
34
72
  }
73
+ .rounded-\[min\(var\(--radius-md\)\,10px\)\] {
74
+ border-radius: min(var(--radius-md), 10px);
75
+ }
76
+ .rounded-\[min\(var\(--radius-md\)\,12px\)\] {
77
+ border-radius: min(var(--radius-md), 12px);
78
+ }
35
79
  .border {
36
80
  border-style: var(--tw-border-style);
37
81
  border-width: 1px;
@@ -44,6 +88,21 @@
44
88
  border-bottom-style: var(--tw-border-style);
45
89
  border-bottom-width: 1px;
46
90
  }
91
+ .border-border {
92
+ border-color: var(--color-border);
93
+ }
94
+ .border-transparent {
95
+ border-color: transparent;
96
+ }
97
+ .bg-background {
98
+ background-color: var(--color-background);
99
+ }
100
+ .bg-destructive\/10 {
101
+ background-color: color-mix(in srgb, 0 84.2% 60.2% 10%, transparent);
102
+ @supports (color: color-mix(in lab, red, red)) {
103
+ background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
104
+ }
105
+ }
47
106
  .bg-muted {
48
107
  background-color: var(--color-muted);
49
108
  }
@@ -53,6 +112,15 @@
53
112
  background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
54
113
  }
55
114
  }
115
+ .bg-primary {
116
+ background-color: var(--color-primary);
117
+ }
118
+ .bg-secondary {
119
+ background-color: var(--color-secondary);
120
+ }
121
+ .bg-clip-padding {
122
+ background-clip: padding-box;
123
+ }
56
124
  .text-center {
57
125
  text-align: center;
58
126
  }
@@ -62,20 +130,72 @@
62
130
  .align-middle {
63
131
  vertical-align: middle;
64
132
  }
133
+ .text-\[0\.8rem\] {
134
+ font-size: 0.8rem;
135
+ }
65
136
  .whitespace-nowrap {
66
137
  white-space: nowrap;
67
138
  }
139
+ .text-destructive {
140
+ color: var(--color-destructive);
141
+ }
68
142
  .text-foreground {
69
143
  color: var(--color-foreground);
70
144
  }
71
145
  .text-muted-foreground {
72
146
  color: var(--color-muted-foreground);
73
147
  }
148
+ .text-primary {
149
+ color: var(--color-primary);
150
+ }
151
+ .text-primary-foreground {
152
+ color: var(--color-primary-foreground);
153
+ }
154
+ .text-secondary-foreground {
155
+ color: var(--color-secondary-foreground);
156
+ }
157
+ .underline-offset-4 {
158
+ text-underline-offset: 4px;
159
+ }
160
+ .outline {
161
+ outline-style: var(--tw-outline-style);
162
+ outline-width: 1px;
163
+ }
164
+ .transition-all {
165
+ transition-property: all;
166
+ transition-timing-function: var(--tw-ease, ease);
167
+ transition-duration: var(--tw-duration, 0s);
168
+ }
74
169
  .transition-colors {
75
170
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
76
171
  transition-timing-function: var(--tw-ease, ease);
77
172
  transition-duration: var(--tw-duration, 0s);
78
173
  }
174
+ .outline-none {
175
+ --tw-outline-style: none;
176
+ outline-style: none;
177
+ }
178
+ .select-none {
179
+ -webkit-user-select: none;
180
+ user-select: none;
181
+ }
182
+ .hover\:bg-destructive\/20 {
183
+ &:hover {
184
+ @media (hover: hover) {
185
+ background-color: color-mix(in srgb, 0 84.2% 60.2% 20%, transparent);
186
+ @supports (color: color-mix(in lab, red, red)) {
187
+ background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
188
+ }
189
+ }
190
+ }
191
+ }
192
+ .hover\:bg-muted {
193
+ &:hover {
194
+ @media (hover: hover) {
195
+ background-color: var(--color-muted);
196
+ }
197
+ }
198
+ }
79
199
  .hover\:bg-muted\/50 {
80
200
  &:hover {
81
201
  @media (hover: hover) {
@@ -86,6 +206,83 @@
86
206
  }
87
207
  }
88
208
  }
209
+ .hover\:bg-secondary\/80 {
210
+ &:hover {
211
+ @media (hover: hover) {
212
+ background-color: color-mix(in srgb, 0 0% 96.1% 80%, transparent);
213
+ @supports (color: color-mix(in lab, red, red)) {
214
+ background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
215
+ }
216
+ }
217
+ }
218
+ }
219
+ .hover\:text-foreground {
220
+ &:hover {
221
+ @media (hover: hover) {
222
+ color: var(--color-foreground);
223
+ }
224
+ }
225
+ }
226
+ .hover\:underline {
227
+ &:hover {
228
+ @media (hover: hover) {
229
+ text-decoration-line: underline;
230
+ }
231
+ }
232
+ }
233
+ .focus-visible\:border-destructive\/40 {
234
+ &:focus-visible {
235
+ border-color: color-mix(in srgb, 0 84.2% 60.2% 40%, transparent);
236
+ @supports (color: color-mix(in lab, red, red)) {
237
+ border-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
238
+ }
239
+ }
240
+ }
241
+ .focus-visible\:border-ring {
242
+ &:focus-visible {
243
+ border-color: var(--color-ring);
244
+ }
245
+ }
246
+ .focus-visible\:ring-3 {
247
+ &:focus-visible {
248
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
249
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
250
+ }
251
+ }
252
+ .focus-visible\:ring-destructive\/20 {
253
+ &:focus-visible {
254
+ --tw-ring-color: color-mix(in srgb, 0 84.2% 60.2% 20%, transparent);
255
+ @supports (color: color-mix(in lab, red, red)) {
256
+ --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
257
+ }
258
+ }
259
+ }
260
+ .focus-visible\:ring-ring\/50 {
261
+ &:focus-visible {
262
+ --tw-ring-color: color-mix(in srgb, 0 0% 3.6% 50%, transparent);
263
+ @supports (color: color-mix(in lab, red, red)) {
264
+ --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
265
+ }
266
+ }
267
+ }
268
+ .active\:not-aria-\[haspopup\]\:translate-y-px {
269
+ &:active {
270
+ &:not(*[aria-haspopup]) {
271
+ --tw-translate-y: 1px;
272
+ translate: var(--tw-translate-x) var(--tw-translate-y);
273
+ }
274
+ }
275
+ }
276
+ .disabled\:pointer-events-none {
277
+ &:disabled {
278
+ pointer-events: none;
279
+ }
280
+ }
281
+ .disabled\:opacity-50 {
282
+ &:disabled {
283
+ opacity: 50%;
284
+ }
285
+ }
89
286
  .has-aria-expanded\:bg-muted\/50 {
90
287
  &:has(*[aria-expanded="true"]) {
91
288
  background-color: color-mix(in srgb, 0 0% 96.1% 50%, transparent);
@@ -94,11 +291,147 @@
94
291
  }
95
292
  }
96
293
  }
294
+ .aria-expanded\:bg-muted {
295
+ &[aria-expanded="true"] {
296
+ background-color: var(--color-muted);
297
+ }
298
+ }
299
+ .aria-expanded\:bg-secondary {
300
+ &[aria-expanded="true"] {
301
+ background-color: var(--color-secondary);
302
+ }
303
+ }
304
+ .aria-expanded\:text-foreground {
305
+ &[aria-expanded="true"] {
306
+ color: var(--color-foreground);
307
+ }
308
+ }
309
+ .aria-expanded\:text-secondary-foreground {
310
+ &[aria-expanded="true"] {
311
+ color: var(--color-secondary-foreground);
312
+ }
313
+ }
314
+ .aria-invalid\:border-destructive {
315
+ &[aria-invalid="true"] {
316
+ border-color: var(--color-destructive);
317
+ }
318
+ }
319
+ .aria-invalid\:ring-3 {
320
+ &[aria-invalid="true"] {
321
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
322
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
323
+ }
324
+ }
325
+ .aria-invalid\:ring-destructive\/20 {
326
+ &[aria-invalid="true"] {
327
+ --tw-ring-color: color-mix(in srgb, 0 84.2% 60.2% 20%, transparent);
328
+ @supports (color: color-mix(in lab, red, red)) {
329
+ --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
330
+ }
331
+ }
332
+ }
97
333
  .data-\[state\=selected\]\:bg-muted {
98
334
  &[data-state="selected"] {
99
335
  background-color: var(--color-muted);
100
336
  }
101
337
  }
338
+ .dark\:border-input {
339
+ @media (prefers-color-scheme: dark) {
340
+ border-color: var(--color-input);
341
+ }
342
+ }
343
+ .dark\:bg-destructive\/20 {
344
+ @media (prefers-color-scheme: dark) {
345
+ background-color: color-mix(in srgb, 0 84.2% 60.2% 20%, transparent);
346
+ @supports (color: color-mix(in lab, red, red)) {
347
+ background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
348
+ }
349
+ }
350
+ }
351
+ .dark\:bg-input\/30 {
352
+ @media (prefers-color-scheme: dark) {
353
+ background-color: color-mix(in srgb, 0 0% 89.8% 30%, transparent);
354
+ @supports (color: color-mix(in lab, red, red)) {
355
+ background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
356
+ }
357
+ }
358
+ }
359
+ .dark\:hover\:bg-destructive\/30 {
360
+ @media (prefers-color-scheme: dark) {
361
+ &:hover {
362
+ @media (hover: hover) {
363
+ background-color: color-mix(in srgb, 0 84.2% 60.2% 30%, transparent);
364
+ @supports (color: color-mix(in lab, red, red)) {
365
+ background-color: color-mix(in oklab, var(--color-destructive) 30%, transparent);
366
+ }
367
+ }
368
+ }
369
+ }
370
+ }
371
+ .dark\:hover\:bg-input\/50 {
372
+ @media (prefers-color-scheme: dark) {
373
+ &:hover {
374
+ @media (hover: hover) {
375
+ background-color: color-mix(in srgb, 0 0% 89.8% 50%, transparent);
376
+ @supports (color: color-mix(in lab, red, red)) {
377
+ background-color: color-mix(in oklab, var(--color-input) 50%, transparent);
378
+ }
379
+ }
380
+ }
381
+ }
382
+ }
383
+ .dark\:hover\:bg-muted\/50 {
384
+ @media (prefers-color-scheme: dark) {
385
+ &:hover {
386
+ @media (hover: hover) {
387
+ background-color: color-mix(in srgb, 0 0% 96.1% 50%, transparent);
388
+ @supports (color: color-mix(in lab, red, red)) {
389
+ background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
390
+ }
391
+ }
392
+ }
393
+ }
394
+ }
395
+ .dark\:focus-visible\:ring-destructive\/40 {
396
+ @media (prefers-color-scheme: dark) {
397
+ &:focus-visible {
398
+ --tw-ring-color: color-mix(in srgb, 0 84.2% 60.2% 40%, transparent);
399
+ @supports (color: color-mix(in lab, red, red)) {
400
+ --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
401
+ }
402
+ }
403
+ }
404
+ }
405
+ .dark\:aria-invalid\:border-destructive\/50 {
406
+ @media (prefers-color-scheme: dark) {
407
+ &[aria-invalid="true"] {
408
+ border-color: color-mix(in srgb, 0 84.2% 60.2% 50%, transparent);
409
+ @supports (color: color-mix(in lab, red, red)) {
410
+ border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
411
+ }
412
+ }
413
+ }
414
+ }
415
+ .dark\:aria-invalid\:ring-destructive\/40 {
416
+ @media (prefers-color-scheme: dark) {
417
+ &[aria-invalid="true"] {
418
+ --tw-ring-color: color-mix(in srgb, 0 84.2% 60.2% 40%, transparent);
419
+ @supports (color: color-mix(in lab, red, red)) {
420
+ --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
421
+ }
422
+ }
423
+ }
424
+ }
425
+ .\[\&_svg\]\:pointer-events-none {
426
+ & svg {
427
+ pointer-events: none;
428
+ }
429
+ }
430
+ .\[\&_svg\]\:shrink-0 {
431
+ & svg {
432
+ flex-shrink: 0;
433
+ }
434
+ }
102
435
  .\[\&_tr\]\:border-b {
103
436
  & tr {
104
437
  border-bottom-style: var(--tw-border-style);
@@ -111,6 +444,18 @@
111
444
  border-width: 0px;
112
445
  }
113
446
  }
447
+ .\[a\]\:hover\:bg-primary\/80 {
448
+ &:is(a) {
449
+ &:hover {
450
+ @media (hover: hover) {
451
+ background-color: color-mix(in srgb, 0 0% 9% 80%, transparent);
452
+ @supports (color: color-mix(in lab, red, red)) {
453
+ background-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
454
+ }
455
+ }
456
+ }
457
+ }
458
+ }
114
459
  .\[\&\>tr\]\:last\:border-b-0 {
115
460
  &>tr {
116
461
  &:last-child {
@@ -120,9 +465,18 @@
120
465
  }
121
466
  }
122
467
  :root, :host {
468
+ --color-background: 0 0% 100%;
123
469
  --color-foreground: 0 0% 3.6%;
124
470
  --color-muted: 0 0% 96.1%;
125
471
  --color-muted-foreground: 0 0% 45.1%;
472
+ --color-destructive: 0 84.2% 60.2%;
473
+ --color-border: 0 0% 89.8%;
474
+ --color-input: 0 0% 89.8%;
475
+ --color-primary: 0 0% 9%;
476
+ --color-primary-foreground: 0 0% 98%;
477
+ --color-secondary: 0 0% 96.1%;
478
+ --color-secondary-foreground: 0 0% 9%;
479
+ --color-ring: 0 0% 3.6%;
126
480
  }
127
481
  @media (prefers-color-scheme: dark) {
128
482
  :root {
@@ -152,10 +506,113 @@
152
506
  inherits: false;
153
507
  initial-value: solid;
154
508
  }
509
+ @property --tw-outline-style {
510
+ syntax: "*";
511
+ inherits: false;
512
+ initial-value: solid;
513
+ }
514
+ @property --tw-shadow {
515
+ syntax: "*";
516
+ inherits: false;
517
+ initial-value: 0 0 #0000;
518
+ }
519
+ @property --tw-shadow-color {
520
+ syntax: "*";
521
+ inherits: false;
522
+ }
523
+ @property --tw-shadow-alpha {
524
+ syntax: "<percentage>";
525
+ inherits: false;
526
+ initial-value: 100%;
527
+ }
528
+ @property --tw-inset-shadow {
529
+ syntax: "*";
530
+ inherits: false;
531
+ initial-value: 0 0 #0000;
532
+ }
533
+ @property --tw-inset-shadow-color {
534
+ syntax: "*";
535
+ inherits: false;
536
+ }
537
+ @property --tw-inset-shadow-alpha {
538
+ syntax: "<percentage>";
539
+ inherits: false;
540
+ initial-value: 100%;
541
+ }
542
+ @property --tw-ring-color {
543
+ syntax: "*";
544
+ inherits: false;
545
+ }
546
+ @property --tw-ring-shadow {
547
+ syntax: "*";
548
+ inherits: false;
549
+ initial-value: 0 0 #0000;
550
+ }
551
+ @property --tw-inset-ring-color {
552
+ syntax: "*";
553
+ inherits: false;
554
+ }
555
+ @property --tw-inset-ring-shadow {
556
+ syntax: "*";
557
+ inherits: false;
558
+ initial-value: 0 0 #0000;
559
+ }
560
+ @property --tw-ring-inset {
561
+ syntax: "*";
562
+ inherits: false;
563
+ }
564
+ @property --tw-ring-offset-width {
565
+ syntax: "<length>";
566
+ inherits: false;
567
+ initial-value: 0px;
568
+ }
569
+ @property --tw-ring-offset-color {
570
+ syntax: "*";
571
+ inherits: false;
572
+ initial-value: #fff;
573
+ }
574
+ @property --tw-ring-offset-shadow {
575
+ syntax: "*";
576
+ inherits: false;
577
+ initial-value: 0 0 #0000;
578
+ }
579
+ @property --tw-translate-x {
580
+ syntax: "*";
581
+ inherits: false;
582
+ initial-value: 0;
583
+ }
584
+ @property --tw-translate-y {
585
+ syntax: "*";
586
+ inherits: false;
587
+ initial-value: 0;
588
+ }
589
+ @property --tw-translate-z {
590
+ syntax: "*";
591
+ inherits: false;
592
+ initial-value: 0;
593
+ }
155
594
  @layer properties {
156
595
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
157
596
  *, ::before, ::after, ::backdrop {
158
597
  --tw-border-style: solid;
598
+ --tw-outline-style: solid;
599
+ --tw-shadow: 0 0 #0000;
600
+ --tw-shadow-color: initial;
601
+ --tw-shadow-alpha: 100%;
602
+ --tw-inset-shadow: 0 0 #0000;
603
+ --tw-inset-shadow-color: initial;
604
+ --tw-inset-shadow-alpha: 100%;
605
+ --tw-ring-color: initial;
606
+ --tw-ring-shadow: 0 0 #0000;
607
+ --tw-inset-ring-color: initial;
608
+ --tw-inset-ring-shadow: 0 0 #0000;
609
+ --tw-ring-inset: initial;
610
+ --tw-ring-offset-width: 0px;
611
+ --tw-ring-offset-color: #fff;
612
+ --tw-ring-offset-shadow: 0 0 #0000;
613
+ --tw-translate-x: 0;
614
+ --tw-translate-y: 0;
615
+ --tw-translate-z: 0;
159
616
  }
160
617
  }
161
618
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stereopt/data-table",
3
- "version": "0.1.9",
3
+ "version": "0.1.10",
4
4
  "description": "Simple reusable React data table component",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -23,9 +23,9 @@
23
23
  },
24
24
  "sideEffects": false,
25
25
  "scripts": {
26
- "build": "tsup src/index.ts --format esm,cjs --dts --external react,react-dom && postcss src/styles/globals.css -o dist/styles.css --minify",
26
+ "build": "tsup",
27
27
  "clean": "rm -rf dist",
28
- "dev": "tsup src/index.ts --format esm,cjs --dts --watch --external react,react-dom",
28
+ "dev": "tsup --watch",
29
29
  "format": "biome format ./src",
30
30
  "format:fix": "biome format ./src --write",
31
31
  "lint": "biome lint ./src && next lint",
@@ -57,6 +57,8 @@
57
57
  "@types/react": "^19.2.14",
58
58
  "@types/react-dom": "^19.2.3",
59
59
  "postcss-cli": "^11.0.1",
60
+ "lucide-react": "^0.574.0",
61
+ "radix-ui": "^1.4.3",
60
62
  "tailwindcss": "^4.2.2",
61
63
  "tsup": "^8.5.1",
62
64
  "typescript": "^5.9.3"