@gradeui/ui 3.1.0 → 3.2.0
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/components/ui/combobox.md +46 -0
- package/components/ui/data-view.md +59 -0
- package/components/ui/map.md +6 -0
- package/components/ui/property-list.md +43 -0
- package/dist/contracts.js +6 -6
- package/dist/contracts.js.map +1 -1
- package/dist/contracts.mjs +6 -6
- package/dist/contracts.mjs.map +1 -1
- package/dist/index.d.mts +323 -26
- package/dist/index.d.ts +323 -26
- package/dist/index.js +94 -94
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +94 -94
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +2 -1
- package/styles/globals.css +179 -92
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradeui/ui",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.2.0",
|
|
4
4
|
"description": "Grade Design System — React components, theme engine, and design tokens",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": {
|
|
@@ -146,6 +146,7 @@
|
|
|
146
146
|
"@radix-ui/react-toggle": "^1.1.10",
|
|
147
147
|
"@radix-ui/react-toggle-group": "^1.1.11",
|
|
148
148
|
"@radix-ui/react-tooltip": "^1.2.8",
|
|
149
|
+
"@tanstack/react-table": "^8.20.0",
|
|
149
150
|
"class-variance-authority": "^0.7.1",
|
|
150
151
|
"clsx": "^2.1.1",
|
|
151
152
|
"cmdk": "^1.1.1",
|
package/styles/globals.css
CHANGED
|
@@ -48,102 +48,108 @@
|
|
|
48
48
|
@theme {
|
|
49
49
|
--text-2xs: 0.6875rem;
|
|
50
50
|
--text-2xs--line-height: 1rem;
|
|
51
|
+
/* Accent font role — gives a `font-accent` utility that references the
|
|
52
|
+
runtime --font-accent var (set by the theme generator / apply.ts).
|
|
53
|
+
Plain @theme (not inline) so the utility stays var-referencing and
|
|
54
|
+
re-skins live; falls back to the display/sans stack until a theme
|
|
55
|
+
sets one. */
|
|
56
|
+
--font-accent: var(--font-display, var(--font-sans));
|
|
51
57
|
}
|
|
52
58
|
|
|
53
59
|
@theme inline reference {
|
|
54
60
|
/* -- Brand color ramps — values live in @gradeui/core as --gds-* vars. -- */
|
|
55
|
-
--color-
|
|
56
|
-
--color-
|
|
57
|
-
--color-
|
|
58
|
-
--color-
|
|
59
|
-
--color-
|
|
60
|
-
--color-
|
|
61
|
-
--color-
|
|
62
|
-
--color-
|
|
63
|
-
--color-
|
|
64
|
-
--color-
|
|
65
|
-
--color-
|
|
66
|
-
--color-
|
|
67
|
-
--color-
|
|
68
|
-
--color-
|
|
69
|
-
--color-
|
|
70
|
-
--color-
|
|
71
|
-
--color-
|
|
72
|
-
--color-
|
|
73
|
-
--color-
|
|
74
|
-
--color-
|
|
75
|
-
--color-
|
|
76
|
-
--color-
|
|
77
|
-
--color-
|
|
78
|
-
--color-
|
|
79
|
-
--color-
|
|
80
|
-
--color-
|
|
81
|
-
--color-
|
|
82
|
-
--color-
|
|
83
|
-
--color-
|
|
84
|
-
--color-
|
|
85
|
-
--color-
|
|
86
|
-
--color-
|
|
87
|
-
--color-
|
|
88
|
-
--color-
|
|
89
|
-
--color-
|
|
90
|
-
--color-
|
|
91
|
-
--color-
|
|
92
|
-
--color-
|
|
93
|
-
--color-
|
|
94
|
-
--color-
|
|
95
|
-
--color-
|
|
96
|
-
--color-
|
|
97
|
-
--color-
|
|
98
|
-
--color-
|
|
99
|
-
--color-
|
|
100
|
-
--color-
|
|
101
|
-
--color-
|
|
102
|
-
--color-
|
|
103
|
-
--color-
|
|
104
|
-
--color-
|
|
105
|
-
--color-
|
|
106
|
-
--color-
|
|
107
|
-
--color-
|
|
108
|
-
--color-
|
|
109
|
-
--color-
|
|
110
|
-
--color-
|
|
111
|
-
--color-
|
|
112
|
-
--color-
|
|
113
|
-
--color-
|
|
114
|
-
--color-
|
|
115
|
-
--color-
|
|
116
|
-
--color-
|
|
117
|
-
--color-
|
|
118
|
-
--color-
|
|
119
|
-
--color-
|
|
120
|
-
--color-
|
|
121
|
-
--color-
|
|
122
|
-
--color-
|
|
123
|
-
--color-
|
|
124
|
-
--color-
|
|
125
|
-
--color-
|
|
126
|
-
--color-
|
|
127
|
-
--color-
|
|
128
|
-
--color-
|
|
129
|
-
--color-
|
|
130
|
-
--color-
|
|
131
|
-
--color-
|
|
132
|
-
--color-
|
|
133
|
-
--color-
|
|
134
|
-
--color-
|
|
135
|
-
--color-
|
|
136
|
-
--color-
|
|
137
|
-
--color-
|
|
138
|
-
--color-
|
|
139
|
-
--color-
|
|
140
|
-
--color-
|
|
141
|
-
--color-
|
|
142
|
-
--color-
|
|
143
|
-
--color-
|
|
144
|
-
--color-
|
|
145
|
-
--color-
|
|
146
|
-
--color-
|
|
61
|
+
--color-gds-green: var(--gds-green);
|
|
62
|
+
--color-gds-green-50: var(--gds-green-50);
|
|
63
|
+
--color-gds-green-100: var(--gds-green-100);
|
|
64
|
+
--color-gds-green-200: var(--gds-green-200);
|
|
65
|
+
--color-gds-green-300: var(--gds-green-300);
|
|
66
|
+
--color-gds-green-400: var(--gds-green-400);
|
|
67
|
+
--color-gds-green-500: var(--gds-green-500);
|
|
68
|
+
--color-gds-green-600: var(--gds-green-600);
|
|
69
|
+
--color-gds-green-700: var(--gds-green-700);
|
|
70
|
+
--color-gds-green-800: var(--gds-green-800);
|
|
71
|
+
--color-gds-green-900: var(--gds-green-900);
|
|
72
|
+
--color-gds-green-950: var(--gds-green-950);
|
|
73
|
+
--color-gds-yellow: var(--gds-yellow);
|
|
74
|
+
--color-gds-yellow-50: var(--gds-yellow-50);
|
|
75
|
+
--color-gds-yellow-100: var(--gds-yellow-100);
|
|
76
|
+
--color-gds-yellow-200: var(--gds-yellow-200);
|
|
77
|
+
--color-gds-yellow-300: var(--gds-yellow-300);
|
|
78
|
+
--color-gds-yellow-400: var(--gds-yellow-400);
|
|
79
|
+
--color-gds-yellow-500: var(--gds-yellow-500);
|
|
80
|
+
--color-gds-yellow-600: var(--gds-yellow-600);
|
|
81
|
+
--color-gds-yellow-700: var(--gds-yellow-700);
|
|
82
|
+
--color-gds-yellow-800: var(--gds-yellow-800);
|
|
83
|
+
--color-gds-yellow-900: var(--gds-yellow-900);
|
|
84
|
+
--color-gds-orange: var(--gds-orange);
|
|
85
|
+
--color-gds-orange-50: var(--gds-orange-50);
|
|
86
|
+
--color-gds-orange-100: var(--gds-orange-100);
|
|
87
|
+
--color-gds-orange-200: var(--gds-orange-200);
|
|
88
|
+
--color-gds-orange-300: var(--gds-orange-300);
|
|
89
|
+
--color-gds-orange-400: var(--gds-orange-400);
|
|
90
|
+
--color-gds-orange-500: var(--gds-orange-500);
|
|
91
|
+
--color-gds-orange-600: var(--gds-orange-600);
|
|
92
|
+
--color-gds-orange-700: var(--gds-orange-700);
|
|
93
|
+
--color-gds-orange-800: var(--gds-orange-800);
|
|
94
|
+
--color-gds-orange-900: var(--gds-orange-900);
|
|
95
|
+
--color-gds-red: var(--gds-red);
|
|
96
|
+
--color-gds-red-50: var(--gds-red-50);
|
|
97
|
+
--color-gds-red-100: var(--gds-red-100);
|
|
98
|
+
--color-gds-red-200: var(--gds-red-200);
|
|
99
|
+
--color-gds-red-300: var(--gds-red-300);
|
|
100
|
+
--color-gds-red-400: var(--gds-red-400);
|
|
101
|
+
--color-gds-red-500: var(--gds-red-500);
|
|
102
|
+
--color-gds-red-600: var(--gds-red-600);
|
|
103
|
+
--color-gds-red-700: var(--gds-red-700);
|
|
104
|
+
--color-gds-red-800: var(--gds-red-800);
|
|
105
|
+
--color-gds-red-900: var(--gds-red-900);
|
|
106
|
+
--color-gds-teal: var(--gds-teal);
|
|
107
|
+
--color-gds-teal-50: var(--gds-teal-50);
|
|
108
|
+
--color-gds-teal-100: var(--gds-teal-100);
|
|
109
|
+
--color-gds-teal-200: var(--gds-teal-200);
|
|
110
|
+
--color-gds-teal-300: var(--gds-teal-300);
|
|
111
|
+
--color-gds-teal-400: var(--gds-teal-400);
|
|
112
|
+
--color-gds-teal-500: var(--gds-teal-500);
|
|
113
|
+
--color-gds-teal-600: var(--gds-teal-600);
|
|
114
|
+
--color-gds-teal-700: var(--gds-teal-700);
|
|
115
|
+
--color-gds-teal-800: var(--gds-teal-800);
|
|
116
|
+
--color-gds-teal-900: var(--gds-teal-900);
|
|
117
|
+
--color-gds-teal-950: var(--gds-teal-950);
|
|
118
|
+
--color-gds-navy: var(--gds-navy);
|
|
119
|
+
--color-gds-navy-50: var(--gds-navy-50);
|
|
120
|
+
--color-gds-navy-100: var(--gds-navy-100);
|
|
121
|
+
--color-gds-navy-200: var(--gds-navy-200);
|
|
122
|
+
--color-gds-navy-300: var(--gds-navy-300);
|
|
123
|
+
--color-gds-navy-400: var(--gds-navy-400);
|
|
124
|
+
--color-gds-navy-500: var(--gds-navy-500);
|
|
125
|
+
--color-gds-navy-600: var(--gds-navy-600);
|
|
126
|
+
--color-gds-navy-700: var(--gds-navy-700);
|
|
127
|
+
--color-gds-navy-800: var(--gds-navy-800);
|
|
128
|
+
--color-gds-navy-900: var(--gds-navy-900);
|
|
129
|
+
--color-gds-blue: var(--gds-blue);
|
|
130
|
+
--color-gds-blue-50: var(--gds-blue-50);
|
|
131
|
+
--color-gds-blue-100: var(--gds-blue-100);
|
|
132
|
+
--color-gds-blue-200: var(--gds-blue-200);
|
|
133
|
+
--color-gds-blue-300: var(--gds-blue-300);
|
|
134
|
+
--color-gds-blue-400: var(--gds-blue-400);
|
|
135
|
+
--color-gds-blue-500: var(--gds-blue-500);
|
|
136
|
+
--color-gds-blue-600: var(--gds-blue-600);
|
|
137
|
+
--color-gds-blue-700: var(--gds-blue-700);
|
|
138
|
+
--color-gds-blue-800: var(--gds-blue-800);
|
|
139
|
+
--color-gds-blue-900: var(--gds-blue-900);
|
|
140
|
+
--color-gds-gray-50: var(--gds-gray-50);
|
|
141
|
+
--color-gds-gray-100: var(--gds-gray-100);
|
|
142
|
+
--color-gds-gray-200: var(--gds-gray-200);
|
|
143
|
+
--color-gds-gray-300: var(--gds-gray-300);
|
|
144
|
+
--color-gds-gray-400: var(--gds-gray-400);
|
|
145
|
+
--color-gds-gray-500: var(--gds-gray-500);
|
|
146
|
+
--color-gds-gray-600: var(--gds-gray-600);
|
|
147
|
+
--color-gds-gray-700: var(--gds-gray-700);
|
|
148
|
+
--color-gds-gray-800: var(--gds-gray-800);
|
|
149
|
+
--color-gds-gray-900: var(--gds-gray-900);
|
|
150
|
+
--color-gds-gray-950: var(--gds-gray-950);
|
|
151
|
+
--color-gds-black: var(--gds-black);
|
|
152
|
+
--color-gds-white: var(--gds-white);
|
|
147
153
|
|
|
148
154
|
/* -- Semantic roles — runtime vars hold bare "L C H" OKLCH triplets,
|
|
149
155
|
wrapped with oklch() at use. Opacity shortcuts (bg-primary/50) come
|
|
@@ -869,6 +875,19 @@
|
|
|
869
875
|
--gds-map-marker-border: oklch(var(--border));
|
|
870
876
|
--gds-map-marker-shadow: 0 1px 3px oklch(0 0 0 / 0.22),
|
|
871
877
|
0 0 0 1px oklch(0 0 0 / 0.05);
|
|
878
|
+
/* Halo behind floating map labels (the text-stroke that separates a
|
|
879
|
+
label from busy tiles). Mode-aware: a white halo reads on pale
|
|
880
|
+
light tiles; the dark-mode override flips it to near-black so a
|
|
881
|
+
light label on dark tiles isn't a white-on-white wash-out. Applied
|
|
882
|
+
via the `.gds-map-label` helper. */
|
|
883
|
+
--gds-map-label-halo: oklch(1 0 0);
|
|
884
|
+
/* Map canvas — the backing colour BEHIND the raster tiles. Leaflet's
|
|
885
|
+
default is `#dddddd`, so subpixel gaps between tiles flash light
|
|
886
|
+
"seams" over a dark basemap. Defaulting this to the tile base
|
|
887
|
+
colour (here, the CARTO voyager land tone) makes those gaps blend
|
|
888
|
+
away. Neutral on purpose: tint it and the seams come back as
|
|
889
|
+
coloured lines unless your tiles match. */
|
|
890
|
+
--gds-map-canvas: oklch(0.97 0.004 95);
|
|
872
891
|
|
|
873
892
|
/* Sidebar knobs — the width pair drives the collapsed/expanded animation
|
|
874
893
|
on `<Sidebar>` (compound nav primitive). Header height + section
|
|
@@ -881,6 +900,33 @@
|
|
|
881
900
|
--gds-sidebar-section-px: 0.5rem;
|
|
882
901
|
--gds-sidebar-section-gap: 0.125rem;
|
|
883
902
|
|
|
903
|
+
/* Property list knobs — <PropertyList> renders a single record as
|
|
904
|
+
label / value rows (a Table row transposed). The label column width
|
|
905
|
+
and the row/column rhythm are exposed so a dense inspector and an
|
|
906
|
+
airy settings page share one primitive. Read as
|
|
907
|
+
`var(--gds-property-list-* , <fallback>)` in the component, so a
|
|
908
|
+
missing stanza degrades gracefully. */
|
|
909
|
+
--gds-property-list-label-width: 8.5rem;
|
|
910
|
+
--gds-property-list-col-gap: 1rem;
|
|
911
|
+
--gds-property-list-row-gap: 0.625rem;
|
|
912
|
+
--gds-property-list-row-gap-compact: 0.375rem;
|
|
913
|
+
--gds-property-list-row-gap-relaxed: 1rem;
|
|
914
|
+
--gds-property-list-icon-size: 0.875rem;
|
|
915
|
+
--gds-property-list-label-color: oklch(var(--muted-foreground));
|
|
916
|
+
--gds-property-list-divider-color: oklch(var(--border));
|
|
917
|
+
|
|
918
|
+
/* Data view knobs — <DataView> draws one dataset as a table, cards, or a
|
|
919
|
+
grid. The card / grid tiles auto-fill, so these min column widths set
|
|
920
|
+
how many tiles sit per row at a given container width; the pinned and
|
|
921
|
+
header backgrounds back the sticky column / header so scrolled content
|
|
922
|
+
doesn't bleed through. */
|
|
923
|
+
--gds-data-view-card-min: 18rem;
|
|
924
|
+
--gds-data-view-grid-min: 11rem;
|
|
925
|
+
--gds-data-view-gap: 0.75rem;
|
|
926
|
+
--gds-data-view-pinned-bg: oklch(var(--background));
|
|
927
|
+
--gds-data-view-header-bg: oklch(var(--background));
|
|
928
|
+
--gds-data-view-table-max-h: 28rem; /* scroll height when stickyHeader is on */
|
|
929
|
+
|
|
884
930
|
/* Carousel knobs — every visual dimension of <Carousel> is driven from
|
|
885
931
|
this stanza so consumers can re-skin the slideshow (dot shape, arrow
|
|
886
932
|
chrome, transition feel) without prop-drilling. The component reads
|
|
@@ -1008,6 +1054,12 @@
|
|
|
1008
1054
|
--gds-map-marker-border: oklch(1 0 0 / 0.3);
|
|
1009
1055
|
--gds-map-marker-shadow: 0 1px 3px oklch(0 0 0 / 0.5),
|
|
1010
1056
|
0 0 0 1px oklch(0 0 0 / 0.4);
|
|
1057
|
+
/* Dark-mode label halo — near-black so light labels stay legible on
|
|
1058
|
+
dark tiles (mirror of the light-mode white halo above). */
|
|
1059
|
+
--gds-map-label-halo: oklch(0.18 0 0);
|
|
1060
|
+
/* Dark-mode map canvas — near-black to match the CARTO dark_all base,
|
|
1061
|
+
so tile seams vanish on the dark basemap. */
|
|
1062
|
+
--gds-map-canvas: oklch(0.17 0 0);
|
|
1011
1063
|
|
|
1012
1064
|
/* Alert surface pairs — dark-mode variant: tint sits just above the dark
|
|
1013
1065
|
background without going gray; deep text stays bright and readable. */
|
|
@@ -1690,6 +1742,15 @@
|
|
|
1690
1742
|
box-shadow: var(--gds-map-marker-shadow);
|
|
1691
1743
|
}
|
|
1692
1744
|
|
|
1745
|
+
/* Floating map label halo — put this class on a text element inside a
|
|
1746
|
+
MapMarker to give it a mode-aware outline (white on light tiles,
|
|
1747
|
+
near-black on dark) instead of hard-coding a white text-stroke that
|
|
1748
|
+
washes out in dark mode. Pairs with the `--gds-map-label-halo` token. */
|
|
1749
|
+
.gds-map-label {
|
|
1750
|
+
-webkit-text-stroke: 1.5px var(--gds-map-label-halo);
|
|
1751
|
+
paint-order: stroke;
|
|
1752
|
+
}
|
|
1753
|
+
|
|
1693
1754
|
/* Vendor font reset — Leaflet (`.leaflet-container`) and MapLibre
|
|
1694
1755
|
(`.maplibregl-map`) both hard-set `font-family` on their map
|
|
1695
1756
|
containers, which beats inheritance and strands marker content on
|
|
@@ -1702,6 +1763,32 @@
|
|
|
1702
1763
|
font-family: var(--font-sans);
|
|
1703
1764
|
}
|
|
1704
1765
|
|
|
1766
|
+
/* Vendor z-index neutralizer — Leaflet's stylesheet sets `z-index: 200`
|
|
1767
|
+
on every `<svg>` inside the map. That hijacks an inline SVG used as
|
|
1768
|
+
marker content (e.g. a pin shield) and paints it ABOVE later sibling
|
|
1769
|
+
DOM — so a count/label sitting on top of the shield vanishes behind
|
|
1770
|
+
it. The Mapbox/MapLibre/Google adapters have no such rule, so the
|
|
1771
|
+
same marker markup renders fine there; this made pins look provider-
|
|
1772
|
+
dependent ("numbers show on Mapbox, not Leaflet"). Reset marker SVGs
|
|
1773
|
+
to `z-index: auto` so author paint order (DOM order) holds on every
|
|
1774
|
+
provider. `!important` to beat Leaflet's vendor selector. */
|
|
1775
|
+
[data-gds-part="map-marker-content"] svg {
|
|
1776
|
+
z-index: auto !important;
|
|
1777
|
+
}
|
|
1778
|
+
|
|
1779
|
+
/* Map canvas backing — sits behind the tiles so Leaflet's default
|
|
1780
|
+
`#dddddd` no longer flashes through the subpixel gaps between raster
|
|
1781
|
+
tiles ("seams"), most visible on a dark basemap. Harmless on the GL
|
|
1782
|
+
providers (their opaque canvas covers it). Mode-aware via the token.
|
|
1783
|
+
NB the selector is compounded with `[data-gds-part="map"]` on purpose:
|
|
1784
|
+
Leaflet stamps `.leaflet-container` (which sets `background:#ddd`) onto
|
|
1785
|
+
the SAME element, and its stylesheet loads after ours — a bare
|
|
1786
|
+
`.gds-map` ties on specificity and loses. The data-part attribute
|
|
1787
|
+
(present on every provider's root) lifts us above Leaflet's default. */
|
|
1788
|
+
.gds-map[data-gds-part="map"] {
|
|
1789
|
+
background-color: var(--gds-map-canvas);
|
|
1790
|
+
}
|
|
1791
|
+
|
|
1705
1792
|
/* ============================================
|
|
1706
1793
|
STREAM-IN — data-gds-streaming on <html>
|
|
1707
1794
|
============================================
|