@spear-ai/spectral 1.4.31 → 1.4.33

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.
Files changed (16) hide show
  1. package/README.md +37 -5
  2. package/dist/.js +204 -210
  3. package/dist/{Card.js → DataCard/Card.js} +3 -3
  4. package/dist/DataCard.d.ts +1 -1
  5. package/dist/DataCard.js +1 -1
  6. package/dist/Select.js +1 -1
  7. package/dist/index.d.ts +0 -1
  8. package/dist/index.d.ts.map +1 -1
  9. package/dist/styles/horizon/base-colors.css +62 -0
  10. package/dist/styles/horizon/base.css +28 -0
  11. package/dist/styles/horizon/colors.css +212 -0
  12. package/dist/styles/horizon/theme.css +142 -0
  13. package/dist/styles/horizon/utilities.css +99 -0
  14. package/dist/styles/main.css +1 -1
  15. package/package.json +14 -11
  16. /package/dist/{Card.d.ts → DataCard/Card.d.ts} +0 -0
package/dist/styles/horizon/base.css ADDED
@@ -0,0 +1,28 @@
1
+ /* raw element styles & resets - global typography, normalize, html/body rules */
2
+ /* DO NOT put any styles needed in the bundled version of Spectral as they will not be included */
3
+
4
+ @layer base {
5
+
6
+ html {
7
+ font-family: var(--font-sans);
8
+ }
9
+
10
+ *,
11
+ *::before,
12
+ *::after {
13
+ box-sizing: border-box !important;
14
+ }
15
+
16
+ body {
17
+ box-sizing: border-box;
18
+ color: var(--color-text-primary);
19
+ font-family: var(--font-sans)
20
+ }
21
+
22
+ h3 {
23
+ color: var(--color-text-primary);
24
+ font-size: 1.5rem;
25
+ font-weight: 700;
26
+ margin: 0;
27
+ }
28
+ }
package/dist/styles/horizon/colors.css ADDED
@@ -0,0 +1,212 @@
1
+ @import './base-colors.css';
2
+
3
+ /* Semantic color tokens - these reference the base colors from base-colors.css
4
+ * Using :root instead of @theme so these work without Tailwind processing */
5
+
6
+ /* dark default */
7
+ :root {
8
+ --color-background: var(--horizon-color-neutral-950);
9
+
10
+ --color-text-primary: var(--horizon-color-neutral-50);
11
+ --color-text-inverted: var(--horizon-color-neutral-950);
12
+ --color-text-secondary: var(--horizon-color-neutral-300);
13
+ --color-text-accent-primary: var(--horizon-color-primary-500);
14
+ --color-text-accent-secondary: var(--horizon-color-primary-300);
15
+
16
+ --color-border-primary: var(--horizon-color-neutral-900);
17
+ --color-border-secondary: var(--horizon-color-neutral-700);
18
+
19
+ --color-accent: var(--horizon-color-accent);
20
+ --color-selected-primary: var(--horizon-color-primary-700);
21
+ --color-divider-primary: var(--horizon-color-level-four);
22
+ --color-overlay: color-mix(in oklab, var(--horizon-color-neutral-950) 40%, transparent);
23
+
24
+ --color-level-zero: var(--horizon-color-level-zero);
25
+ --color-level-one: var(--horizon-color-level-one);
26
+ --color-level-two: var(--horizon-color-level-two);
27
+ --color-level-three: var(--horizon-color-level-three);
28
+ --color-level-four: var(--horizon-color-level-four);
29
+ --color-level-five: var(--horizon-color-level-five);
30
+
31
+ --color-success-50: var(--horizon-color-success-50);
32
+ --color-success-100: var(--horizon-color-success-100);
33
+ --color-success-200: var(--horizon-color-success-200);
34
+ --color-success-300: var(--horizon-color-success-300);
35
+ --color-success-400: var(--horizon-color-success-400);
36
+ --color-success-500: var(--horizon-color-success-500);
37
+
38
+ --color-warning-50: var(--horizon-color-warning-50);
39
+ --color-warning-100: var(--horizon-color-warning-100);
40
+ --color-warning-200: var(--horizon-color-warning-200);
41
+ --color-warning-300: var(--horizon-color-warning-300);
42
+ --color-warning-400: var(--horizon-color-warning-400);
43
+ --color-warning-500: var(--horizon-color-warning-500);
44
+
45
+ --color-danger-50: var(--horizon-color-danger-50);
46
+ --color-danger-100: var(--horizon-color-danger-100);
47
+ --color-danger-200: var(--horizon-color-danger-200);
48
+ --color-danger-300: var(--horizon-color-danger-300);
49
+ --color-danger-400: var(--horizon-color-danger-400);
50
+ --color-danger-500: var(--horizon-color-danger-500);
51
+
52
+ --color-alert-bg: var(--horizon-color-level-two);
53
+ --color-alert-border: var(--horizon-color-level-three);
54
+ --color-alert-text: var(--horizon-color-neutral-50);
55
+ --color-alert-success-bg: var(--horizon-color-success-50);
56
+ --color-alert-success-border: var(--horizon-color-success-500);
57
+ --color-alert-success-text: var(--horizon-color-success-500);
58
+ --color-alert-warning-bg: var(--horizon-color-warning-50);
59
+ --color-alert-warning-border: var(--horizon-color-warning-500);
60
+ --color-alert-warning-text: var(--horizon-color-warning-500);
61
+ --color-alert-danger-bg: var(--horizon-color-danger-50);
62
+ --color-alert-danger-border: var(--horizon-color-danger-500);
63
+ --color-alert-danger-text: var(--horizon-color-danger-500);
64
+ --color-alert-info-bg: var(--horizon-color-primary-100);
65
+ --color-alert-info-border: var(--horizon-color-primary-700);
66
+ --color-alert-info-text: var(--horizon-color-primary-700);
67
+
68
+ --color-badge-primary-bg: var(--horizon-color-level-five);
69
+ --color-badge-primary-bg--hover: var(--horizon-color-level-four);
70
+ --color-badge-primary-bg--active: var(--horizon-color-primary-800);
71
+ --color-badge-primary-border: var(--horizon-color-level-five);
72
+ --color-badge-secondary-bg: var(--horizon-color-accent);
73
+ --color-badge-secondary-border: var(--horizon-color-accent);
74
+ --color-badge-secondary-text: var(--horizon-color-neutral-950);
75
+ --color-badge-outline-bg: var(--horizon-color-transparent);
76
+ --color-badge-outline-border: var(--horizon-color-level-five);
77
+ --color-badge-destructive-bg: var(--horizon-color-danger-400);
78
+ --color-badge-destructive-border: var(--horizon-color-danger-400);
79
+
80
+ --color-button-primary-bg: var(--horizon-color-accent);
81
+ --color-button-primary-bg--hover: var(--horizon-color-level-two);
82
+ --color-button-primary-bg--disabled: var(--horizon-color-neutral-500);
83
+ --color-button-primary-border: var(--horizon-color-accent);
84
+ --color-button-primary-border--hover: var(--horizon-color-level-two);
85
+ --color-button-primary-border--disabled: var(--horizon-color-neutral-500);
86
+ --color-button-primary-text: var(--horizon-color-neutral-900);
87
+ --color-button-primary-text--hover: var(--horizon-color-accent);
88
+ --color-button-primary-text--disabled: var(--horizon-color-neutral-200);
89
+
90
+ --color-button-secondary-bg: var(--horizon-color-level-two);
91
+ --color-button-secondary-bg--hover: var(--horizon-color-accent);
92
+ --color-button-secondary-bg--disabled: var(--horizon-color-neutral-500);
93
+ --color-button-secondary-text: var(--horizon-color-neutral-50);
94
+ --color-button-secondary-text--hover: var(--horizon-color-level-two);
95
+ --color-button-secondary-text--disabled: var(--horizon-color-neutral-200);
96
+ --color-button-secondary-border: var(--horizon-color-neutral-900);
97
+ --color-button-secondary-border--disabled: var(--horizon-color-neutral-500);
98
+
99
+ --color-button-outline-bg: var(--horizon-color-transparent);
100
+ --color-button-outline-bg--hover: var(--horizon-color-level-two);
101
+ --color-button-outline-text: var(--horizon-color-neutral-50);
102
+ --color-button-outline-text--hover: var(--horizon-color-accent);
103
+ --color-button-outline-text--disabled: var(--horizon-color-neutral-400);
104
+ --color-button-outline-border: var(--horizon-color-accent);
105
+ --color-button-outline-border--disabled: var(--horizon-color-neutral-400);
106
+
107
+ --color-button-ghost-bg: var(--horizon-color-transparent);
108
+ --color-button-ghost-bg--hover: var(--horizon-color-level-two);
109
+ --color-button-ghost-text: var(--horizon-color-neutral-50);
110
+ --color-button-ghost-text--hover: var(--horizon-color-accent);
111
+ --color-button-ghost-text--disabled: var(--horizon-color-neutral-400);
112
+
113
+ --color-button-danger: var(--horizon-color-danger-400);
114
+ --color-button-danger--hover: color-mix(in oklab, var(--horizon-color-danger-400) 80%, transparent);
115
+
116
+ --color-checkbox-border: var(--horizon-color-neutral-100);
117
+ --color-checkbox-border--focus: var(--horizon-color-accent);
118
+ --color-checkbox-border--checked: var(--horizon-color-accent);
119
+ --color-checkbox-indicator--checked: var(--horizon-color-accent);
120
+
121
+ --color-data-card-description: var(--horizon-color-neutral-300);
122
+
123
+ --color-dialog-bg: var(--horizon-color-level-one);
124
+
125
+ --color-drawer-bg: var(--horizon-color-level-one);
126
+
127
+ --color-input-border: color-mix(in oklab, var(--horizon-color-white) 10%, transparent);
128
+ --color-input-border--hover: var(--horizon-color-neutral-300);
129
+ --color-input-border--focus: var(--horizon-color-accent);
130
+ --color-input-border--disabled: var(--horizon-color-neutral-500);
131
+ --color-input-bg: var(--horizon-color-level-zero);
132
+ --color-input-bg--hover: var(--horizon-color-level-four);
133
+ --color-input-bg--disabled: var(--horizon-color-neutral-700);
134
+ --color-input-bg--selected: var(--horizon-color-level-four);
135
+ --color-input-text: var(--horizon-color-neutral-50);
136
+ --color-input-text--disabled: var(--horizon-color-neutral-200);
137
+ --color-input-text-placeholder: var(--horizon-color-neutral-500);
138
+
139
+ --color-input-primitive-bg: var(--horizon-color-neutral-950);
140
+ --color-input-primitive-border: var(--horizon-color-neutral-800);
141
+
142
+ --color-input-otp-filled-bg: var(--horizon-color-level-two);
143
+ --color-input-otp-filled-border: var(--horizon-color-level-two);
144
+ --color-input-otp-filled-separator: var(--horizon-color-level-five);
145
+ --color-input-otp-border: var(--horizon-color-neutral-300);
146
+ --color-input-otp-border--focus: var(--horizon-color-accent);
147
+ --color-input-otp-caret: var(--horizon-color-neutral-200);
148
+
149
+ --color-kbd-bg: var(--horizon-color-level-two);
150
+ --color-kbd-text: var(--color-text-secondary);
151
+
152
+ --color-popover-bg: var(--horizon-color-level-one);
153
+ --color-popover-text: var(--horizon-color-neutral-50);
154
+
155
+ --color-radio-bg: var(--horizon-color-neutral-900);
156
+ --color-radio-bg--selected: var(--horizon-color-accent);
157
+ --color-radio-border: var(--horizon-color-neutral-800);
158
+ --color-radio-border--hover: var(--horizon-color-accent);
159
+ --color-radio-border--selected: var(--horizon-color-accent);
160
+
161
+ --color-select-item-bg--hover: var(--horizon-color-level-four);
162
+
163
+ --color-slider-track: var(--horizon-color-neutral-700);
164
+ --color-slider-range: var(--horizon-color-neutral-50);
165
+ --color-slider-thumb-border: var(--horizon-color-neutral-50);
166
+ --color-slider-thumb-bg: var(--horizon-color-neutral-50);
167
+ --color-slider-thumb-ring: var(--horizon-color-neutral-50);
168
+
169
+ --color-switch-bg: var(--horizon-color-neutral-500);
170
+ --color-switch-bg--checked: var(--horizon-color-success-500);
171
+ --color-switch-thumb: var(--horizon-color-neutral-950);
172
+
173
+ --color-tabs-bg: var(--horizon-color-level-one);
174
+ --color-tabs-group-bg: var(--horizon-color-level-one);
175
+ --color-tabs-indicator: var(--horizon-color-accent);
176
+ --color-tabs-enclosed-indicator: var(--horizon-color-level-two);
177
+ --color-tabs-border: var(--horizon-color-level-four);
178
+
179
+ --color-toggle-bg: var(--horizon-color-level-two);
180
+ --color-toggle-bg--active: var(--horizon-color-primary-700);
181
+ --color-toggle-bg--hover: var(--horizon-color-level-four);
182
+ --color-toggle-border: var(--horizon-color-transparent);
183
+ --color-toggle-border--hover: var(--horizon-color-level-four);
184
+ --color-toggle-border--active: var(--horizon-color-primary-700);
185
+ --color-toggle-text: var(--horizon-color-neutral-50);
186
+ --color-toggle-text--hover: var(--horizon-color-neutral-200);
187
+ --color-toggle-text--active: var(--horizon-color-neutral-50);
188
+ --color-toggle-outline-border: var(--horizon-color-transparent);
189
+ --color-toggle-group-bg: var(--horizon-color-level-five);
190
+
191
+ --color-tooltip-bg: var(--horizon-color-level-one);
192
+ --color-tooltip-border: var(--horizon-color-white);
193
+ --color-tooltip-arrow: var(--horizon-color-level-zero);
194
+ }
195
+
196
+ /* light theme variant */
197
+ :root[data-theme='light'] {
198
+ --color-background: var(--horizon-color-neutral-50);
199
+ --color-ring-offset: var(--horizon-color-neutral-50);
200
+ --color-text-primary: var(--horizon-color-neutral-900);
201
+ --color-text-secondary: var(--horizon-color-neutral-600);
202
+
203
+ --color-card-bg: var(--horizon-color-level-one);
204
+ --color-card-text: var(--horizon-color-neutral-900);
205
+
206
+ --color-switch-bg: var(--horizon-color-neutral-300);
207
+ --color-switch-bg--checked: var(--horizon-color-neutral-950);
208
+ --color-switch-thumb: var(--horizon-color-neutral-50);
209
+
210
+ --color-shadow-neumorphic: oklch(92.49% 0 0);
211
+ --color-shadow-neumorphic-large: oklch(88.56% 0.0014 286.37);
212
+ }
package/dist/styles/horizon/theme.css ADDED
@@ -0,0 +1,142 @@
1
+ /* Theme variables and animations
2
+ * Using :root instead of @theme so these work without Tailwind processing */
3
+
4
+ :root {
5
+ --font-sans: 'Work Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji';
6
+ --font-serif: 'Bitter', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
7
+ --font-mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;
8
+
9
+ --ring: var(--color-accent);
10
+ --ring-offset: var(--color-background);
11
+
12
+ /* animations */
13
+ --animate-animate-in: animate-in;
14
+ --animate-animate-out: animate-out;
15
+ --animate-zoom-in-95: zoom-in-95;
16
+ --animate-zoom-out-95: zoom-out-95;
17
+ --animate-fade-in-0: fade-in-0;
18
+ --animate-fade-out-0: fade-out-0;
19
+ --animate-fade-in-tabs: fade-in-tabs 0.5s ease-in-out;
20
+ --animate-slide-down-from-top: slide-down-from-top 0.3s ease-out;
21
+ --animate-slide-up-to-top: slide-up-to-top 0.3s ease-out;
22
+ --animate-fade-in-tabs-indicator: fade-in-tabs-indicator 0.3s ease-out;
23
+ --animate-caret-blink: caret-blink 1.2s ease-out infinite;
24
+ --animate-spin-around: spin-around 0.8s linear infinite;
25
+ }
26
+
27
+ @keyframes animate-in {
28
+ from {
29
+ opacity: 0;
30
+ transform: scale(0.95);
31
+ }
32
+ to {
33
+ opacity: 1;
34
+ transform: scale(1);
35
+ }
36
+ }
37
+
38
+ @keyframes animate-out {
39
+ from {
40
+ opacity: 1;
41
+ transform: scale(1);
42
+ }
43
+ to {
44
+ opacity: 0;
45
+ transform: scale(0.95);
46
+ }
47
+ }
48
+
49
+ @keyframes caret-blink {
50
+ 0%, 70%, 100% {
51
+ opacity: 1;
52
+ }
53
+ 20%, 50% {
54
+ opacity: 0;
55
+ }
56
+ }
57
+
58
+ @keyframes fade-in-0 {
59
+ from {
60
+ opacity: 0;
61
+ }
62
+ to {
63
+ opacity: 1;
64
+ }
65
+ }
66
+
67
+ @keyframes fade-out-0 {
68
+ from {
69
+ opacity: 1;
70
+ }
71
+ to {
72
+ opacity: 0;
73
+ }
74
+ }
75
+
76
+ @keyframes fade-in-tabs-indicator {
77
+ from {
78
+ opacity: 0;
79
+ transform: translateY(-2rem);
80
+ }
81
+ to {
82
+ opacity: 1;
83
+ transform: translateY(0);
84
+ }
85
+ }
86
+
87
+ @keyframes slide-down-from-top {
88
+ from {
89
+ transform: translateY(-100%);
90
+ opacity: 0;
91
+ scale: 0.95;
92
+ }
93
+ to {
94
+ transform: translateY(0);
95
+ opacity: 1;
96
+ scale: 1;
97
+ }
98
+ }
99
+
100
+ @keyframes slide-up-to-top {
101
+ from {
102
+ transform: translateY(0);
103
+ opacity: 1;
104
+ scale: 1;
105
+ }
106
+ to {
107
+ transform: translateY(-100%);
108
+ opacity: 0;
109
+ scale: 0.95;
110
+ }
111
+ }
112
+
113
+ @keyframes spin-around {
114
+ 0% {
115
+ transform: rotate(-90deg);
116
+ }
117
+ 100% {
118
+ transform: rotate(270deg);
119
+ }
120
+ }
121
+
122
+ @keyframes zoom-in-95 {
123
+ from {
124
+ opacity: 0;
125
+ transform: translateX(-50%) translateY(-50%) scale(0.95);
126
+ }
127
+ to {
128
+ opacity: 1;
129
+ transform: translateX(-50%) translateY(-50%) scale(1);
130
+ }
131
+ }
132
+
133
+ @keyframes zoom-out-95 {
134
+ from {
135
+ opacity: 1;
136
+ transform: translateX(-50%) translateY(-50%) scale(1);
137
+ }
138
+ to {
139
+ opacity: 0;
140
+ transform: translateX(-50%) translateY(-50%) scale(0.95);
141
+ }
142
+ }
package/dist/styles/horizon/utilities.css ADDED
@@ -0,0 +1,99 @@
1
+ /* new atomic utilities that don’t exist in Tailwind */
2
+
3
+ @layer utilities {
4
+
5
+ [data-vaul-drawer] *,
6
+ [data-vaul-drawer] *::before,
7
+ [data-vaul-drawer] *::after {
8
+ box-sizing: border-box !important;
9
+ }
10
+
11
+ [vaul-drawer] {
12
+ transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
13
+ }
14
+
15
+ [vaul-overlay] {
16
+ transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
17
+ }
18
+
19
+ .shadow-neumorphic-large {
20
+ box-shadow: 12px 12px 24px var(--color-shadow-neumorphic-large), -12px -12px 24px var(--color-white);
21
+ }
22
+
23
+ .shadow-neumorphic-small {
24
+ box-shadow: 4px 4px 8px var(--color-shadow-neumorphic), -4px -4px 8px var(--color-white);
25
+ }
26
+
27
+ .dialog-no-animations {
28
+ animation: none !important;
29
+ transform: translateX(-50%) translateY(-50%) !important;
30
+ }
31
+
32
+ .dialog-no-animations[data-state='open'] {
33
+ animation: none !important;
34
+ transform: translateX(-50%) translateY(-50%) !important;
35
+ }
36
+
37
+ .dialog-no-animations[data-state='closed'] {
38
+ animation: none !important;
39
+ transform: translateX(-50%) translateY(-50%) !important;
40
+ }
41
+
42
+ svg:focus-visible,
43
+ svg:focus {
44
+ outline: none;
45
+ }
46
+
47
+ .card-effects {
48
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.00) 100%), rgba(38, 38, 38, 0.50);
49
+ backdrop-filter: blur(12px);
50
+ border: 0.5px solid rgba(255, 255, 255, 0.05);
51
+ border-radius: 1rem;
52
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.10) inset, 0 20px 40px 0 rgba(0, 0, 0, 0.25), 0 15px 30px 0 rgba(0, 0, 0, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05);
53
+ }
54
+
55
+ .tooltip-effects {
56
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.00) 100%), rgba(38, 38, 38, 0.50);
57
+ backdrop-filter: blur(12px);
58
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.10) inset, 0 20px 40px 0 rgba(0, 0, 0, 0.25), 0 15px 30px 0 rgba(0, 0, 0, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05);
59
+ }
60
+
61
+ .map-card-effects {
62
+ background: var(--color-background);
63
+ backdrop-filter: blur(12px);
64
+ border: 0.5px solid rgba(255, 255, 255, 0.05);
65
+ border-radius: 1rem;
66
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.10) inset, 0 20px 40px 0 rgba(0, 0, 0, 0.25), 0 15px 30px 0 rgba(0, 0, 0, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05);
67
+ }
68
+
69
+ @supports not (backdrop-filter: blur(0)) {
70
+
71
+ .card-effects {
72
+ /* Fallback: slightly opaque fill to hint depth without blur */
73
+ background-color: hsla(240, 4%, 14%, 0.6);
74
+ }
75
+ }
76
+
77
+ body {
78
+
79
+ &::-webkit-scrollbar {
80
+ width: 14px;
81
+ }
82
+
83
+ &::-webkit-scrollbar-track {
84
+ background: var(--color-level-zero);
85
+ border-radius: 0;
86
+ }
87
+
88
+ &::-webkit-scrollbar-thumb {
89
+ background: var(--color-level-three);
90
+ border-radius: 6px;
91
+ }
92
+ }
93
+
94
+ @supports not selector(::-webkit-scrollbar) {
95
+ body {
96
+ scrollbar-color: var(--color-level-three) var(--color-level-zero);
97
+ }
98
+ }
99
+ }