@nar-bus/lena-ui-shared 1.3.3 → 1.3.5

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
  /* =============================================================================
@@ -618,11 +695,21 @@
618
695
  --toolbar-input-text: var(--gradient-amber-text);
619
696
  }
620
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
+
621
707
  /* Margin-top for all toolbar variants */
622
708
  .datatable-dark-toolbar,
623
709
  .datatable-cherry-toolbar,
624
710
  .datatable-emerald-toolbar,
625
- .datatable-amber-toolbar {
711
+ .datatable-amber-toolbar,
712
+ .datatable-teal-toolbar {
626
713
  margin-top: 0.5rem;
627
714
  }
628
715
 
@@ -630,7 +717,8 @@
630
717
  .datatable-dark-toolbar [data-slot="datatable-toolbar"],
631
718
  .datatable-cherry-toolbar [data-slot="datatable-toolbar"],
632
719
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"],
633
- .datatable-amber-toolbar [data-slot="datatable-toolbar"] {
720
+ .datatable-amber-toolbar [data-slot="datatable-toolbar"],
721
+ .datatable-teal-toolbar [data-slot="datatable-toolbar"] {
634
722
  background: var(--toolbar-bg);
635
723
  border-bottom-color: var(--toolbar-border);
636
724
  color: var(--toolbar-text);
@@ -641,7 +729,8 @@
641
729
  .datatable-dark-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
642
730
  .datatable-cherry-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
643
731
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
644
- .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"] {
645
734
  background: var(--toolbar-input-bg);
646
735
  color: var(--toolbar-input-text);
647
736
  }
@@ -649,7 +738,8 @@
649
738
  .datatable-dark-toolbar [data-slot="datatable-toolbar"] select,
650
739
  .datatable-cherry-toolbar [data-slot="datatable-toolbar"] select,
651
740
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"] select,
652
- .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 {
653
743
  background: var(--toolbar-input-bg);
654
744
  color: var(--toolbar-input-text);
655
745
  }
@@ -657,14 +747,16 @@
657
747
  .datatable-dark-toolbar [data-slot="datatable-toolbar"] button,
658
748
  .datatable-cherry-toolbar [data-slot="datatable-toolbar"] button,
659
749
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"] button,
660
- .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 {
661
752
  color: var(--toolbar-text);
662
753
  }
663
754
 
664
755
  .datatable-dark-toolbar [data-slot="datatable-toolbar"] button:hover,
665
756
  .datatable-cherry-toolbar [data-slot="datatable-toolbar"] button:hover,
666
757
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"] button:hover,
667
- .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 {
668
760
  background: var(--toolbar-hover-bg);
669
761
  color: var(--toolbar-hover-text);
670
762
  }
@@ -676,7 +768,8 @@
676
768
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
677
769
  .datatable-emerald-toolbar [data-slot="datatable-toolbar"] select,
678
770
  .datatable-amber-toolbar [data-slot="datatable-toolbar"] [data-slot="input"],
679
- .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 {
680
773
  border-color: var(--toolbar-input-border);
681
774
  }
682
775
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nar-bus/lena-ui-shared",
3
- "version": "1.3.3",
3
+ "version": "1.3.5",
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",