@nar-bus/lena-ui-shared 1.3.4 → 1.3.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/theme.css CHANGED
@@ -168,6 +168,23 @@
168
168
  --sidebar-section-label: oklch(0.52 0.06 230);
169
169
  --sidebar-hover: oklch(0.25 0.06 245 / 0.60);
170
170
 
171
+ /* Dashboard Gradient (Teal-Navy topbar & card headers) */
172
+ /* #0f172a → #115e59 → #0f172a */
173
+ --gradient-teal: linear-gradient(to right, oklch(0.16 0.04 262), oklch(0.38 0.08 180), oklch(0.16 0.04 262));
174
+ --gradient-teal-border: oklch(0.32 0.06 180);
175
+ --gradient-teal-shadow: 0 0 50px oklch(0.35 0.08 180 / 0.25);
176
+ --gradient-teal-text: oklch(0.90 0.01 260);
177
+ --gradient-teal-muted: oklch(0.65 0.04 180);
178
+ --gradient-teal-accent: oklch(0.70 0.15 180);
179
+ --gradient-teal-icon-primary: oklch(0.75 0.15 220);
180
+ --gradient-teal-icon-secondary: oklch(0.70 0.20 350);
181
+ --gradient-teal-badge-success-bg: oklch(0.50 0.15 152 / 0.20);
182
+ --gradient-teal-badge-success-text: oklch(0.80 0.15 152);
183
+ --gradient-teal-badge-warning-bg: oklch(0.60 0.15 85 / 0.20);
184
+ --gradient-teal-badge-warning-text: oklch(0.85 0.15 85);
185
+ --gradient-teal-badge-error-bg: oklch(0.50 0.15 25 / 0.20);
186
+ --gradient-teal-badge-error-text: oklch(0.75 0.18 25);
187
+
171
188
  /* Charts */
172
189
  --chart-1: oklch(0.40 0.20 245);
173
190
  --chart-2: oklch(0.627 0.194 149);
@@ -175,6 +192,18 @@
175
192
  --chart-4: oklch(0.554 0.046 257);
176
193
  --chart-5: oklch(0.606 0.25 292);
177
194
 
195
+ /* Chart Component Tokens */
196
+ --chart-axis-text: oklch(0.556 0 0);
197
+ --chart-tooltip-bg: oklch(0.21 0.006 285.88 / 0.95);
198
+ --chart-tooltip-border: oklch(0.274 0 0 / 0.5);
199
+ --chart-tooltip-shadow: oklch(0 0 0 / 0.4);
200
+ --chart-tooltip-label: oklch(0.554 0.046 257);
201
+ --chart-cursor-fill: oklch(0.3 0 0 / 0.15);
202
+
203
+ /* Map Component Tokens */
204
+ --map-hover-color: oklch(0.376 0.023 261);
205
+ --map-bg: oklch(0.984 0.003 265);
206
+
178
207
  /* Table Rows */
179
208
  --table-row-even: oklch(0.984 0.003 265);
180
209
  --table-row-hover: oklch(0.968 0.007 265);
@@ -313,6 +342,22 @@
313
342
  --sidebar-section-label: oklch(0.50 0.000 0);
314
343
  --sidebar-hover: oklch(0.30 0.000 0 / 0.60);
315
344
 
345
+ /* Dashboard Gradient (dark mode) */
346
+ --gradient-teal: linear-gradient(to right, oklch(0.14 0.03 262), oklch(0.33 0.07 180), oklch(0.14 0.03 262));
347
+ --gradient-teal-border: oklch(0.28 0.05 180);
348
+ --gradient-teal-shadow: 0 0 50px oklch(0.30 0.07 180 / 0.2);
349
+ --gradient-teal-text: oklch(0.87 0.01 260);
350
+ --gradient-teal-muted: oklch(0.60 0.04 180);
351
+ --gradient-teal-accent: oklch(0.65 0.13 180);
352
+ --gradient-teal-icon-primary: oklch(0.72 0.13 220);
353
+ --gradient-teal-icon-secondary: oklch(0.67 0.18 350);
354
+ --gradient-teal-badge-success-bg: oklch(0.45 0.12 152 / 0.20);
355
+ --gradient-teal-badge-success-text: oklch(0.75 0.13 152);
356
+ --gradient-teal-badge-warning-bg: oklch(0.55 0.12 85 / 0.20);
357
+ --gradient-teal-badge-warning-text: oklch(0.80 0.13 85);
358
+ --gradient-teal-badge-error-bg: oklch(0.45 0.12 25 / 0.20);
359
+ --gradient-teal-badge-error-text: oklch(0.70 0.15 25);
360
+
316
361
  /* Charts */
317
362
  --chart-1: oklch(0.55 0.18 245);
318
363
  --chart-2: oklch(0.723 0.15 149);
@@ -320,6 +365,18 @@
320
365
  --chart-4: oklch(0.704 0.04 256);
321
366
  --chart-5: oklch(0.702 0.18 292);
322
367
 
368
+ /* Chart Component Tokens */
369
+ --chart-axis-text: oklch(0.71 0 0);
370
+ --chart-tooltip-bg: oklch(0.18 0 0 / 0.95);
371
+ --chart-tooltip-border: oklch(0.35 0 0 / 0.5);
372
+ --chart-tooltip-shadow: oklch(0 0 0 / 0.6);
373
+ --chart-tooltip-label: oklch(0.71 0 0);
374
+ --chart-cursor-fill: oklch(0.7 0 0 / 0.15);
375
+
376
+ /* Map Component Tokens */
377
+ --map-hover-color: oklch(0.65 0.02 261);
378
+ --map-bg: oklch(0.18 0 0);
379
+
323
380
  /* Table Rows - Neutral */
324
381
  --table-row-even: oklch(0.160 0.000 0);
325
382
  --table-row-hover: oklch(0.220 0.000 0);
@@ -452,6 +509,17 @@
452
509
  --color-gradient-amber-text: var(--gradient-amber-text);
453
510
  --color-gradient-amber-muted: var(--gradient-amber-muted);
454
511
  --color-gradient-amber-accent: var(--gradient-amber-accent);
512
+ --color-gradient-teal-text: var(--gradient-teal-text);
513
+ --color-gradient-teal-muted: var(--gradient-teal-muted);
514
+ --color-gradient-teal-accent: var(--gradient-teal-accent);
515
+ --color-gradient-teal-icon-primary: var(--gradient-teal-icon-primary);
516
+ --color-gradient-teal-icon-secondary: var(--gradient-teal-icon-secondary);
517
+ --color-gradient-teal-badge-success-bg: var(--gradient-teal-badge-success-bg);
518
+ --color-gradient-teal-badge-success-text: var(--gradient-teal-badge-success-text);
519
+ --color-gradient-teal-badge-warning-bg: var(--gradient-teal-badge-warning-bg);
520
+ --color-gradient-teal-badge-warning-text: var(--gradient-teal-badge-warning-text);
521
+ --color-gradient-teal-badge-error-bg: var(--gradient-teal-badge-error-bg);
522
+ --color-gradient-teal-badge-error-text: var(--gradient-teal-badge-error-text);
455
523
 
456
524
  --color-chart-1: var(--chart-1);
457
525
  --color-chart-2: var(--chart-2);
@@ -463,6 +531,15 @@
463
531
  --color-table-row-hover: var(--table-row-hover);
464
532
  --color-table-row-selected: var(--table-row-selected);
465
533
  --color-table-header: var(--table-header);
534
+
535
+ --color-chart-axis-text: var(--chart-axis-text);
536
+ --color-chart-tooltip-bg: var(--chart-tooltip-bg);
537
+ --color-chart-tooltip-border: var(--chart-tooltip-border);
538
+ --color-chart-tooltip-shadow: var(--chart-tooltip-shadow);
539
+ --color-chart-tooltip-label: var(--chart-tooltip-label);
540
+ --color-chart-cursor-fill: var(--chart-cursor-fill);
541
+ --color-map-hover-color: var(--map-hover-color);
542
+ --color-map-bg: var(--map-bg);
466
543
  }
467
544
 
468
545
  /* =============================================================================
@@ -578,7 +655,8 @@
578
655
  --toolbar-input-border: oklch(0.67 0.02 260 / 0.3);
579
656
  --toolbar-hover-bg: oklch(1 0 0 / 0.1);
580
657
  --toolbar-hover-text: oklch(1 0 0);
581
- --toolbar-padding: 0.45rem 0.75rem;
658
+ --toolbar-padding: 0.25rem 0.75rem;
659
+ --toolbar-min-height: 2.5rem;
582
660
  }
583
661
 
584
662
  /* Dark/Navy toolbar */
@@ -617,11 +695,21 @@
617
695
  --toolbar-input-text: var(--gradient-amber-text);
618
696
  }
619
697
 
698
+ /* Teal toolbar */
699
+ .datatable-teal-toolbar {
700
+ --toolbar-bg: var(--gradient-teal);
701
+ --toolbar-border: var(--gradient-teal-border);
702
+ --toolbar-text: var(--gradient-teal-text);
703
+ --toolbar-input-bg: oklch(1.00 0 0 / 0.06);
704
+ --toolbar-input-text: var(--gradient-teal-text);
705
+ }
706
+
620
707
  /* Margin-top for all toolbar variants */
621
708
  .datatable-dark-toolbar,
622
709
  .datatable-cherry-toolbar,
623
710
  .datatable-emerald-toolbar,
624
- .datatable-amber-toolbar {
711
+ .datatable-amber-toolbar,
712
+ .datatable-teal-toolbar {
625
713
  margin-top: 0.5rem;
626
714
  }
627
715
 
@@ -629,17 +717,20 @@
629
717
  .datatable-dark-toolbar [data-slot="datatable-toolbar"],
630
718
  .datatable-cherry-toolbar [data-slot="datatable-toolbar"],
631
719
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"],
632
- .datatable-amber-toolbar [data-slot="datatable-toolbar"] {
720
+ .datatable-amber-toolbar [data-slot="datatable-toolbar"],
721
+ .datatable-teal-toolbar [data-slot="datatable-toolbar"] {
633
722
  background: var(--toolbar-bg);
634
723
  border-bottom-color: var(--toolbar-border);
635
724
  color: var(--toolbar-text);
636
725
  padding: var(--toolbar-padding);
726
+ min-height: var(--toolbar-min-height);
637
727
  }
638
728
 
639
729
  .datatable-dark-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
640
730
  .datatable-cherry-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
641
731
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
642
- .datatable-amber-toolbar [data-slot="datatable-toolbar"] [data-slot="input"] {
732
+ .datatable-amber-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
733
+ .datatable-teal-toolbar [data-slot="datatable-toolbar"] [data-slot="input"] {
643
734
  background: var(--toolbar-input-bg);
644
735
  color: var(--toolbar-input-text);
645
736
  }
@@ -647,7 +738,8 @@
647
738
  .datatable-dark-toolbar [data-slot="datatable-toolbar"] select,
648
739
  .datatable-cherry-toolbar [data-slot="datatable-toolbar"] select,
649
740
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"] select,
650
- .datatable-amber-toolbar [data-slot="datatable-toolbar"] select {
741
+ .datatable-amber-toolbar [data-slot="datatable-toolbar"] select,
742
+ .datatable-teal-toolbar [data-slot="datatable-toolbar"] select {
651
743
  background: var(--toolbar-input-bg);
652
744
  color: var(--toolbar-input-text);
653
745
  }
@@ -655,14 +747,16 @@
655
747
  .datatable-dark-toolbar [data-slot="datatable-toolbar"] button,
656
748
  .datatable-cherry-toolbar [data-slot="datatable-toolbar"] button,
657
749
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"] button,
658
- .datatable-amber-toolbar [data-slot="datatable-toolbar"] button {
750
+ .datatable-amber-toolbar [data-slot="datatable-toolbar"] button,
751
+ .datatable-teal-toolbar [data-slot="datatable-toolbar"] button {
659
752
  color: var(--toolbar-text);
660
753
  }
661
754
 
662
755
  .datatable-dark-toolbar [data-slot="datatable-toolbar"] button:hover,
663
756
  .datatable-cherry-toolbar [data-slot="datatable-toolbar"] button:hover,
664
757
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"] button:hover,
665
- .datatable-amber-toolbar [data-slot="datatable-toolbar"] button:hover {
758
+ .datatable-amber-toolbar [data-slot="datatable-toolbar"] button:hover,
759
+ .datatable-teal-toolbar [data-slot="datatable-toolbar"] button:hover {
666
760
  background: var(--toolbar-hover-bg);
667
761
  color: var(--toolbar-hover-text);
668
762
  }
@@ -674,7 +768,8 @@
674
768
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
675
769
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"] select,
676
770
  .datatable-amber-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
677
- .datatable-amber-toolbar [data-slot="datatable-toolbar"] select {
771
+ .datatable-amber-toolbar [data-slot="datatable-toolbar"] select,
772
+ .datatable-teal-toolbar [data-slot="datatable-toolbar"] select {
678
773
  border-color: var(--toolbar-input-border);
679
774
  }
680
775
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nar-bus/lena-ui-shared",
3
- "version": "1.3.4",
3
+ "version": "1.3.6",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -27,7 +27,10 @@
27
27
  "react-hook-form": "^7.0.0",
28
28
  "tailwindcss": "^4.0.0",
29
29
  "zod": "^4.0.0",
30
- "zustand": "^5.0.0"
30
+ "zustand": "^5.0.0",
31
+ "recharts": "^3.0.0",
32
+ "leaflet": "^1.9.0",
33
+ "react-leaflet": "^5.0.0"
31
34
  },
32
35
  "peerDependenciesMeta": {
33
36
  "react-hook-form": {
@@ -38,6 +41,15 @@
38
41
  },
39
42
  "@tanstack/react-table": {
40
43
  "optional": true
44
+ },
45
+ "recharts": {
46
+ "optional": true
47
+ },
48
+ "leaflet": {
49
+ "optional": true
50
+ },
51
+ "react-leaflet": {
52
+ "optional": true
41
53
  }
42
54
  },
43
55
  "dependencies": {
@@ -95,7 +107,11 @@
95
107
  "vite": "7.1.7",
96
108
  "vite-plugin-dts": "^4.0.0",
97
109
  "zod": "^4.3.6",
98
- "zustand": "^5.0.10"
110
+ "zustand": "^5.0.10",
111
+ "recharts": "^3.7.0",
112
+ "leaflet": "^1.9.4",
113
+ "@types/leaflet": "^1.9.21",
114
+ "react-leaflet": "^5.0.0"
99
115
  },
100
116
  "scripts": {
101
117
  "build": "vite build && cp src/styles/theme.css dist/theme.css",