@reopt-ai/opt-ui 1.4.1
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/CHANGELOG.md +40 -0
- package/COMPONENT_CATALOG.md +3000 -0
- package/LICENSE +21 -0
- package/README.md +244 -0
- package/dist/chunk-3GWWZKX7.js +38 -0
- package/dist/chunk-AFF2HPE5.cjs +5008 -0
- package/dist/chunk-ELWICXYY.js +4745 -0
- package/dist/chunk-N4NDU5ET.cjs +4745 -0
- package/dist/chunk-ONE3C5RV.cjs +38 -0
- package/dist/chunk-QWBHD54V.js +3218 -0
- package/dist/chunk-RBM2RNC2.js +5008 -0
- package/dist/chunk-X5WCXJAF.cjs +3218 -0
- package/dist/core/index.cjs +324 -0
- package/dist/core/index.d.cts +5 -0
- package/dist/core/index.d.ts +5 -0
- package/dist/core/index.js +324 -0
- package/dist/docs/01-getting-started.md +129 -0
- package/dist/docs/02-components/01-core.md +1841 -0
- package/dist/docs/02-components/02-visuals.md +11 -0
- package/dist/docs/02-components/03-shells.md +1361 -0
- package/dist/docs/02-components/04-surfaces.md +11 -0
- package/dist/docs/02-components/index.md +106 -0
- package/dist/docs/03-recipes/01-forms.md +471 -0
- package/dist/docs/03-recipes/02-dashboards.md +397 -0
- package/dist/docs/03-recipes/03-layouts.md +424 -0
- package/dist/docs/04-theming.md +232 -0
- package/dist/docs/05-migration/01-breaking-changes.md +117 -0
- package/dist/docs/05-migration/02-formstore.md +336 -0
- package/dist/docs/06-troubleshooting.md +119 -0
- package/dist/docs/index.md +71 -0
- package/dist/id-registry.cjs +1875 -0
- package/dist/id-registry.d.cts +27 -0
- package/dist/id-registry.d.ts +27 -0
- package/dist/id-registry.js +1875 -0
- package/dist/id-registry.json +3799 -0
- package/dist/index-BZ_lBlO1.d.ts +474 -0
- package/dist/index-BuvxoWHf.d.cts +474 -0
- package/dist/index-DlAcuvQp.d.cts +1686 -0
- package/dist/index-Slu5hOj1.d.ts +1686 -0
- package/dist/index.cjs +9959 -0
- package/dist/index.d.cts +2351 -0
- package/dist/index.d.ts +2351 -0
- package/dist/index.js +9959 -0
- package/dist/meta.cjs +6898 -0
- package/dist/meta.d.cts +36 -0
- package/dist/meta.d.ts +36 -0
- package/dist/meta.js +6869 -0
- package/dist/shells/index.cjs +65 -0
- package/dist/shells/index.d.cts +5 -0
- package/dist/shells/index.d.ts +5 -0
- package/dist/shells/index.js +65 -0
- package/dist/tailwind.css +401 -0
- package/dist/theme/presets/default.css +355 -0
- package/dist/theme/presets/minimal.css +354 -0
- package/dist/theme/presets/mono-dark.css +354 -0
- package/dist/theme/presets/natural.css +181 -0
- package/dist/theme/presets/pro.css +354 -0
- package/dist/types-D4-0lwaE.d.cts +298 -0
- package/dist/types-D4-0lwaE.d.ts +298 -0
- package/dist/visuals/index.cjs +4 -0
- package/dist/visuals/index.d.cts +1 -0
- package/dist/visuals/index.d.ts +1 -0
- package/dist/visuals/index.js +4 -0
- package/package.json +165 -0
|
@@ -0,0 +1,354 @@
|
|
|
1
|
+
/* AUTOGENERATED by scripts/gen-theme-css.ts — DO NOT EDIT.
|
|
2
|
+
Edit the source token map in presets/tokens.ts and re-run:
|
|
3
|
+
bun run --filter @reopt-ai/opt-ui gen:theme-css
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/* ── Pro Theme ── */
|
|
7
|
+
|
|
8
|
+
[data-theme="pro"] {
|
|
9
|
+
/* Surface */
|
|
10
|
+
--opt-surface: #ffffff;
|
|
11
|
+
--opt-surface-raised: #ffffff;
|
|
12
|
+
--opt-surface-overlay: #ffffff;
|
|
13
|
+
--opt-surface-input: hsl(215 25% 95%);
|
|
14
|
+
--opt-surface-input-hover: hsl(215 25% 92%);
|
|
15
|
+
--opt-surface-inset: hsl(215 20% 97%);
|
|
16
|
+
|
|
17
|
+
/* Accent */
|
|
18
|
+
--opt-accent: hsl(210 100% 50%);
|
|
19
|
+
--opt-accent-hover: hsl(210 100% 43%);
|
|
20
|
+
--opt-accent-active: hsl(210 100% 37%);
|
|
21
|
+
--opt-accent-subtle: hsl(210 100% 50% / 0.08);
|
|
22
|
+
--opt-accent-fg: #ffffff;
|
|
23
|
+
|
|
24
|
+
/* Text */
|
|
25
|
+
--opt-text-body-size: var(--opt-font-size-sm);
|
|
26
|
+
--opt-text-body-weight: var(--opt-font-weight-normal);
|
|
27
|
+
--opt-text-body-leading: 1.5;
|
|
28
|
+
--opt-text-label-size: var(--opt-font-size-sm);
|
|
29
|
+
--opt-text-label-weight: var(--opt-font-weight-medium);
|
|
30
|
+
--opt-text-label-leading: 1.25;
|
|
31
|
+
--opt-text-supporting-size: var(--opt-font-size-xs);
|
|
32
|
+
--opt-text-supporting-weight: var(--opt-font-weight-normal);
|
|
33
|
+
--opt-text-supporting-leading: 1.5;
|
|
34
|
+
--opt-text-code-size: var(--opt-font-size-sm);
|
|
35
|
+
--opt-text-code-weight: var(--opt-font-weight-normal);
|
|
36
|
+
--opt-text-code-leading: 1.5;
|
|
37
|
+
--opt-text-heading-1-size: var(--opt-font-size-3xl);
|
|
38
|
+
--opt-text-heading-1-weight: var(--opt-font-weight-semibold);
|
|
39
|
+
--opt-text-heading-1-leading: 1.2;
|
|
40
|
+
--opt-text-heading-2-size: var(--opt-font-size-2xl);
|
|
41
|
+
--opt-text-heading-2-weight: var(--opt-font-weight-semibold);
|
|
42
|
+
--opt-text-heading-2-leading: 1.25;
|
|
43
|
+
--opt-text-heading-3-size: var(--opt-font-size-xl);
|
|
44
|
+
--opt-text-heading-3-weight: var(--opt-font-weight-semibold);
|
|
45
|
+
--opt-text-heading-3-leading: 1.3;
|
|
46
|
+
--opt-text-heading-4-size: var(--opt-font-size-lg);
|
|
47
|
+
--opt-text-heading-4-weight: var(--opt-font-weight-semibold);
|
|
48
|
+
--opt-text-heading-4-leading: 1.35;
|
|
49
|
+
--opt-text-heading-5-size: var(--opt-font-size-base);
|
|
50
|
+
--opt-text-heading-5-weight: var(--opt-font-weight-semibold);
|
|
51
|
+
--opt-text-heading-5-leading: 1.4;
|
|
52
|
+
--opt-text-heading-6-size: var(--opt-font-size-sm);
|
|
53
|
+
--opt-text-heading-6-weight: var(--opt-font-weight-semibold);
|
|
54
|
+
--opt-text-heading-6-leading: 1.5;
|
|
55
|
+
--opt-text-display-1-size: var(--opt-font-size-4xl);
|
|
56
|
+
--opt-text-display-1-weight: var(--opt-font-weight-normal);
|
|
57
|
+
--opt-text-display-1-leading: 1.1;
|
|
58
|
+
--opt-text-display-2-size: var(--opt-font-size-3xl);
|
|
59
|
+
--opt-text-display-2-weight: var(--opt-font-weight-normal);
|
|
60
|
+
--opt-text-display-2-leading: 1.15;
|
|
61
|
+
--opt-text-display-3-size: var(--opt-font-size-2xl);
|
|
62
|
+
--opt-text-display-3-weight: var(--opt-font-weight-normal);
|
|
63
|
+
--opt-text-display-3-leading: 1.2;
|
|
64
|
+
--opt-text: hsl(215 25% 12%);
|
|
65
|
+
--opt-text-secondary: hsl(215 15% 38%);
|
|
66
|
+
--opt-text-tertiary: hsl(215 10% 52%);
|
|
67
|
+
|
|
68
|
+
/* Border */
|
|
69
|
+
--opt-border-width: 1px;
|
|
70
|
+
--opt-border: hsl(215 15% 88%);
|
|
71
|
+
--opt-border-hover: hsl(215 15% 72%);
|
|
72
|
+
--opt-border-subtle: hsl(215 15% 93%);
|
|
73
|
+
|
|
74
|
+
/* Focus */
|
|
75
|
+
--opt-ring: hsl(210 100% 50%);
|
|
76
|
+
--opt-ring-offset: #f4f6fa;
|
|
77
|
+
|
|
78
|
+
/* Background */
|
|
79
|
+
--opt-bg: #f4f6fa;
|
|
80
|
+
--opt-bg-subtle: hsl(215 20% 94%);
|
|
81
|
+
--opt-bg-muted: hsl(215 18% 90%);
|
|
82
|
+
|
|
83
|
+
/* Status */
|
|
84
|
+
--opt-success: hsl(155 85% 40%);
|
|
85
|
+
--opt-success-subtle: hsl(155 70% 94%);
|
|
86
|
+
--opt-success-fg: hsl(155 85% 26%);
|
|
87
|
+
--opt-warning: hsl(42 95% 48%);
|
|
88
|
+
--opt-warning-subtle: hsl(45 90% 93%);
|
|
89
|
+
--opt-warning-fg: hsl(42 95% 30%);
|
|
90
|
+
--opt-danger: hsl(0 85% 55%);
|
|
91
|
+
--opt-danger-subtle: hsl(0 80% 95%);
|
|
92
|
+
--opt-danger-fg: hsl(0 85% 38%);
|
|
93
|
+
--opt-info: hsl(210 100% 50%);
|
|
94
|
+
--opt-info-subtle: hsl(210 90% 95%);
|
|
95
|
+
--opt-info-fg: hsl(210 100% 36%);
|
|
96
|
+
|
|
97
|
+
/* Chart */
|
|
98
|
+
--opt-chart-6: color-mix(in oklch, var(--opt-chart-1) 62%, var(--opt-chart-2));
|
|
99
|
+
--opt-chart-7: color-mix(in oklch, var(--opt-chart-2) 62%, var(--opt-chart-3));
|
|
100
|
+
--opt-chart-8: color-mix(in oklch, var(--opt-chart-3) 62%, var(--opt-chart-4));
|
|
101
|
+
--opt-chart-9: color-mix(in oklch, var(--opt-chart-4) 62%, var(--opt-chart-5));
|
|
102
|
+
--opt-chart-10: color-mix(in oklch, var(--opt-chart-5) 62%, var(--opt-chart-1));
|
|
103
|
+
--opt-chart-11: color-mix(in oklch, var(--opt-chart-1) 55%, var(--opt-chart-3));
|
|
104
|
+
--opt-chart-12: color-mix(in oklch, var(--opt-chart-2) 55%, var(--opt-chart-4));
|
|
105
|
+
--opt-chart-13: color-mix(in oklch, var(--opt-chart-3) 55%, var(--opt-chart-5));
|
|
106
|
+
--opt-chart-14: color-mix(in oklch, var(--opt-chart-4) 55%, var(--opt-chart-1));
|
|
107
|
+
--opt-chart-15: color-mix(in oklch, var(--opt-chart-5) 55%, var(--opt-chart-2));
|
|
108
|
+
--opt-chart-16: color-mix(in oklch, var(--opt-chart-1) 35%, var(--opt-chart-4));
|
|
109
|
+
--opt-chart-sequential-1: color-mix(in oklch, var(--opt-chart-1) 18%, var(--opt-surface));
|
|
110
|
+
--opt-chart-sequential-2: color-mix(in oklch, var(--opt-chart-1) 36%, var(--opt-surface));
|
|
111
|
+
--opt-chart-sequential-3: color-mix(in oklch, var(--opt-chart-1) 54%, var(--opt-surface));
|
|
112
|
+
--opt-chart-sequential-4: color-mix(in oklch, var(--opt-chart-1) 76%, var(--opt-surface));
|
|
113
|
+
--opt-chart-sequential-5: var(--opt-chart-1);
|
|
114
|
+
--opt-chart-diverging-negative: var(--opt-danger);
|
|
115
|
+
--opt-chart-diverging-neutral: var(--opt-text-tertiary);
|
|
116
|
+
--opt-chart-diverging-positive: var(--opt-success);
|
|
117
|
+
--opt-chart-1: hsl(210 100% 50%);
|
|
118
|
+
--opt-chart-2: hsl(170 85% 42%);
|
|
119
|
+
--opt-chart-3: hsl(42 95% 48%);
|
|
120
|
+
--opt-chart-4: hsl(290 80% 55%);
|
|
121
|
+
--opt-chart-5: hsl(340 85% 52%);
|
|
122
|
+
|
|
123
|
+
/* Radius */
|
|
124
|
+
--opt-radius-sm: 0.125rem;
|
|
125
|
+
--opt-radius-md: 0.25rem;
|
|
126
|
+
--opt-radius-lg: 0.375rem;
|
|
127
|
+
--opt-radius-xl: 0.5rem;
|
|
128
|
+
|
|
129
|
+
/* Shadow */
|
|
130
|
+
--opt-shadow-sm: 0 1px 2px rgba(0, 80, 200, 0.06);
|
|
131
|
+
--opt-shadow-md: 0 2px 6px rgba(0, 80, 200, 0.08);
|
|
132
|
+
--opt-shadow-lg: 0 6px 16px rgba(0, 80, 200, 0.1);
|
|
133
|
+
|
|
134
|
+
/* Spacing */
|
|
135
|
+
--opt-space-0: 0px;
|
|
136
|
+
--opt-space-0-5: 0.125rem;
|
|
137
|
+
--opt-space-1: 0.25rem;
|
|
138
|
+
--opt-space-1-5: 0.375rem;
|
|
139
|
+
--opt-space-2: 0.5rem;
|
|
140
|
+
--opt-space-3: 0.75rem;
|
|
141
|
+
--opt-space-4: 1rem;
|
|
142
|
+
--opt-space-5: 1.25rem;
|
|
143
|
+
--opt-space-6: 1.5rem;
|
|
144
|
+
--opt-space-8: 2rem;
|
|
145
|
+
--opt-space-section: 0.875rem;
|
|
146
|
+
--opt-space-group: 0.5rem;
|
|
147
|
+
--opt-space-element: 0.25rem;
|
|
148
|
+
|
|
149
|
+
/* Typography */
|
|
150
|
+
--opt-font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
151
|
+
--opt-font-size-xs: 0.75rem;
|
|
152
|
+
--opt-font-size-sm: 0.875rem;
|
|
153
|
+
--opt-font-size-base: 1rem;
|
|
154
|
+
--opt-font-size-lg: 1.125rem;
|
|
155
|
+
--opt-font-size-xl: 1.25rem;
|
|
156
|
+
--opt-font-size-2xl: 1.5rem;
|
|
157
|
+
--opt-font-size-3xl: 1.875rem;
|
|
158
|
+
--opt-font-size-4xl: 2.25rem;
|
|
159
|
+
--opt-font-weight-normal: 400;
|
|
160
|
+
--opt-font-weight-medium: 500;
|
|
161
|
+
--opt-font-weight-semibold: 600;
|
|
162
|
+
--opt-font-weight-bold: 700;
|
|
163
|
+
--opt-font-heading: var(--font-geist-mono), ui-monospace, monospace;
|
|
164
|
+
--opt-font-body: var(--font-geist-sans), system-ui, sans-serif;
|
|
165
|
+
--opt-tracking-heading: 0.02em;
|
|
166
|
+
--opt-weight-heading: 500;
|
|
167
|
+
|
|
168
|
+
/* Other */
|
|
169
|
+
--opt-control-sm: 2rem;
|
|
170
|
+
--opt-control-md: 2.5rem;
|
|
171
|
+
--opt-control-lg: 3rem;
|
|
172
|
+
--opt-control-padding-sm: 0.75rem;
|
|
173
|
+
--opt-control-padding-md: 1rem;
|
|
174
|
+
--opt-control-padding-lg: 1.5rem;
|
|
175
|
+
--opt-duration-fast: 150ms;
|
|
176
|
+
--opt-duration-medium: 250ms;
|
|
177
|
+
--opt-duration-slow: 400ms;
|
|
178
|
+
--opt-ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
179
|
+
--opt-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
[data-theme="pro-dark"] {
|
|
183
|
+
/* Surface */
|
|
184
|
+
--opt-surface: #0f1117;
|
|
185
|
+
--opt-surface-raised: #161922;
|
|
186
|
+
--opt-surface-overlay: #1a1d28;
|
|
187
|
+
--opt-surface-input: #0a0c12;
|
|
188
|
+
--opt-surface-input-hover: #080a0f;
|
|
189
|
+
--opt-surface-inset: rgba(0, 140, 255, 0.03);
|
|
190
|
+
|
|
191
|
+
/* Accent */
|
|
192
|
+
--opt-accent: hsl(210 100% 55%);
|
|
193
|
+
--opt-accent-hover: hsl(210 100% 65%);
|
|
194
|
+
--opt-accent-active: hsl(210 100% 72%);
|
|
195
|
+
--opt-accent-subtle: hsl(210 100% 55% / 0.15);
|
|
196
|
+
--opt-accent-fg: #ffffff;
|
|
197
|
+
|
|
198
|
+
/* Text */
|
|
199
|
+
--opt-text-body-size: var(--opt-font-size-sm);
|
|
200
|
+
--opt-text-body-weight: var(--opt-font-weight-normal);
|
|
201
|
+
--opt-text-body-leading: 1.5;
|
|
202
|
+
--opt-text-label-size: var(--opt-font-size-sm);
|
|
203
|
+
--opt-text-label-weight: var(--opt-font-weight-medium);
|
|
204
|
+
--opt-text-label-leading: 1.25;
|
|
205
|
+
--opt-text-supporting-size: var(--opt-font-size-xs);
|
|
206
|
+
--opt-text-supporting-weight: var(--opt-font-weight-normal);
|
|
207
|
+
--opt-text-supporting-leading: 1.5;
|
|
208
|
+
--opt-text-code-size: var(--opt-font-size-sm);
|
|
209
|
+
--opt-text-code-weight: var(--opt-font-weight-normal);
|
|
210
|
+
--opt-text-code-leading: 1.5;
|
|
211
|
+
--opt-text-heading-1-size: var(--opt-font-size-3xl);
|
|
212
|
+
--opt-text-heading-1-weight: var(--opt-font-weight-semibold);
|
|
213
|
+
--opt-text-heading-1-leading: 1.2;
|
|
214
|
+
--opt-text-heading-2-size: var(--opt-font-size-2xl);
|
|
215
|
+
--opt-text-heading-2-weight: var(--opt-font-weight-semibold);
|
|
216
|
+
--opt-text-heading-2-leading: 1.25;
|
|
217
|
+
--opt-text-heading-3-size: var(--opt-font-size-xl);
|
|
218
|
+
--opt-text-heading-3-weight: var(--opt-font-weight-semibold);
|
|
219
|
+
--opt-text-heading-3-leading: 1.3;
|
|
220
|
+
--opt-text-heading-4-size: var(--opt-font-size-lg);
|
|
221
|
+
--opt-text-heading-4-weight: var(--opt-font-weight-semibold);
|
|
222
|
+
--opt-text-heading-4-leading: 1.35;
|
|
223
|
+
--opt-text-heading-5-size: var(--opt-font-size-base);
|
|
224
|
+
--opt-text-heading-5-weight: var(--opt-font-weight-semibold);
|
|
225
|
+
--opt-text-heading-5-leading: 1.4;
|
|
226
|
+
--opt-text-heading-6-size: var(--opt-font-size-sm);
|
|
227
|
+
--opt-text-heading-6-weight: var(--opt-font-weight-semibold);
|
|
228
|
+
--opt-text-heading-6-leading: 1.5;
|
|
229
|
+
--opt-text-display-1-size: var(--opt-font-size-4xl);
|
|
230
|
+
--opt-text-display-1-weight: var(--opt-font-weight-normal);
|
|
231
|
+
--opt-text-display-1-leading: 1.1;
|
|
232
|
+
--opt-text-display-2-size: var(--opt-font-size-3xl);
|
|
233
|
+
--opt-text-display-2-weight: var(--opt-font-weight-normal);
|
|
234
|
+
--opt-text-display-2-leading: 1.15;
|
|
235
|
+
--opt-text-display-3-size: var(--opt-font-size-2xl);
|
|
236
|
+
--opt-text-display-3-weight: var(--opt-font-weight-normal);
|
|
237
|
+
--opt-text-display-3-leading: 1.2;
|
|
238
|
+
--opt-text: hsl(215 15% 93%);
|
|
239
|
+
--opt-text-secondary: hsl(215 10% 63%);
|
|
240
|
+
--opt-text-tertiary: hsl(215 8% 43%);
|
|
241
|
+
|
|
242
|
+
/* Border */
|
|
243
|
+
--opt-border-width: 1px;
|
|
244
|
+
--opt-border: rgba(255, 255, 255, 0.08);
|
|
245
|
+
--opt-border-hover: rgba(255, 255, 255, 0.18);
|
|
246
|
+
--opt-border-subtle: rgba(255, 255, 255, 0.05);
|
|
247
|
+
|
|
248
|
+
/* Focus */
|
|
249
|
+
--opt-ring: hsl(210 100% 55%);
|
|
250
|
+
--opt-ring-offset: #08090d;
|
|
251
|
+
|
|
252
|
+
/* Background */
|
|
253
|
+
--opt-bg: #08090d;
|
|
254
|
+
--opt-bg-subtle: rgba(255, 255, 255, 0.04);
|
|
255
|
+
--opt-bg-muted: rgba(255, 255, 255, 0.07);
|
|
256
|
+
|
|
257
|
+
/* Status */
|
|
258
|
+
--opt-success: hsl(155 100% 45%);
|
|
259
|
+
--opt-success-subtle: hsl(155 100% 45% / 0.15);
|
|
260
|
+
--opt-success-fg: hsl(155 90% 70%);
|
|
261
|
+
--opt-warning: hsl(42 100% 55%);
|
|
262
|
+
--opt-warning-subtle: hsl(42 100% 55% / 0.15);
|
|
263
|
+
--opt-warning-fg: hsl(42 95% 72%);
|
|
264
|
+
--opt-danger: hsl(0 90% 60%);
|
|
265
|
+
--opt-danger-subtle: hsl(0 90% 60% / 0.15);
|
|
266
|
+
--opt-danger-fg: hsl(0 85% 72%);
|
|
267
|
+
--opt-info: hsl(210 100% 55%);
|
|
268
|
+
--opt-info-subtle: hsl(210 100% 55% / 0.15);
|
|
269
|
+
--opt-info-fg: hsl(210 95% 72%);
|
|
270
|
+
|
|
271
|
+
/* Chart */
|
|
272
|
+
--opt-chart-6: color-mix(in oklch, var(--opt-chart-1) 62%, var(--opt-chart-2));
|
|
273
|
+
--opt-chart-7: color-mix(in oklch, var(--opt-chart-2) 62%, var(--opt-chart-3));
|
|
274
|
+
--opt-chart-8: color-mix(in oklch, var(--opt-chart-3) 62%, var(--opt-chart-4));
|
|
275
|
+
--opt-chart-9: color-mix(in oklch, var(--opt-chart-4) 62%, var(--opt-chart-5));
|
|
276
|
+
--opt-chart-10: color-mix(in oklch, var(--opt-chart-5) 62%, var(--opt-chart-1));
|
|
277
|
+
--opt-chart-11: color-mix(in oklch, var(--opt-chart-1) 55%, var(--opt-chart-3));
|
|
278
|
+
--opt-chart-12: color-mix(in oklch, var(--opt-chart-2) 55%, var(--opt-chart-4));
|
|
279
|
+
--opt-chart-13: color-mix(in oklch, var(--opt-chart-3) 55%, var(--opt-chart-5));
|
|
280
|
+
--opt-chart-14: color-mix(in oklch, var(--opt-chart-4) 55%, var(--opt-chart-1));
|
|
281
|
+
--opt-chart-15: color-mix(in oklch, var(--opt-chart-5) 55%, var(--opt-chart-2));
|
|
282
|
+
--opt-chart-16: color-mix(in oklch, var(--opt-chart-1) 35%, var(--opt-chart-4));
|
|
283
|
+
--opt-chart-sequential-1: color-mix(in oklch, var(--opt-chart-1) 18%, var(--opt-surface));
|
|
284
|
+
--opt-chart-sequential-2: color-mix(in oklch, var(--opt-chart-1) 36%, var(--opt-surface));
|
|
285
|
+
--opt-chart-sequential-3: color-mix(in oklch, var(--opt-chart-1) 54%, var(--opt-surface));
|
|
286
|
+
--opt-chart-sequential-4: color-mix(in oklch, var(--opt-chart-1) 76%, var(--opt-surface));
|
|
287
|
+
--opt-chart-sequential-5: var(--opt-chart-1);
|
|
288
|
+
--opt-chart-diverging-negative: var(--opt-danger);
|
|
289
|
+
--opt-chart-diverging-neutral: var(--opt-text-tertiary);
|
|
290
|
+
--opt-chart-diverging-positive: var(--opt-success);
|
|
291
|
+
--opt-chart-1: hsl(210 100% 55%);
|
|
292
|
+
--opt-chart-2: hsl(170 90% 48%);
|
|
293
|
+
--opt-chart-3: hsl(42 100% 55%);
|
|
294
|
+
--opt-chart-4: hsl(290 85% 60%);
|
|
295
|
+
--opt-chart-5: hsl(340 90% 58%);
|
|
296
|
+
|
|
297
|
+
/* Radius */
|
|
298
|
+
--opt-radius-sm: 0.125rem;
|
|
299
|
+
--opt-radius-md: 0.25rem;
|
|
300
|
+
--opt-radius-lg: 0.375rem;
|
|
301
|
+
--opt-radius-xl: 0.5rem;
|
|
302
|
+
|
|
303
|
+
/* Shadow */
|
|
304
|
+
--opt-shadow-sm: 0 1px 3px rgba(0, 100, 255, 0.12);
|
|
305
|
+
--opt-shadow-md: 0 4px 8px rgba(0, 100, 255, 0.18);
|
|
306
|
+
--opt-shadow-lg: 0 8px 24px rgba(0, 100, 255, 0.25);
|
|
307
|
+
|
|
308
|
+
/* Spacing */
|
|
309
|
+
--opt-space-0: 0px;
|
|
310
|
+
--opt-space-0-5: 0.125rem;
|
|
311
|
+
--opt-space-1: 0.25rem;
|
|
312
|
+
--opt-space-1-5: 0.375rem;
|
|
313
|
+
--opt-space-2: 0.5rem;
|
|
314
|
+
--opt-space-3: 0.75rem;
|
|
315
|
+
--opt-space-4: 1rem;
|
|
316
|
+
--opt-space-5: 1.25rem;
|
|
317
|
+
--opt-space-6: 1.5rem;
|
|
318
|
+
--opt-space-8: 2rem;
|
|
319
|
+
--opt-space-section: 0.875rem;
|
|
320
|
+
--opt-space-group: 0.5rem;
|
|
321
|
+
--opt-space-element: 0.25rem;
|
|
322
|
+
|
|
323
|
+
/* Typography */
|
|
324
|
+
--opt-font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
325
|
+
--opt-font-size-xs: 0.75rem;
|
|
326
|
+
--opt-font-size-sm: 0.875rem;
|
|
327
|
+
--opt-font-size-base: 1rem;
|
|
328
|
+
--opt-font-size-lg: 1.125rem;
|
|
329
|
+
--opt-font-size-xl: 1.25rem;
|
|
330
|
+
--opt-font-size-2xl: 1.5rem;
|
|
331
|
+
--opt-font-size-3xl: 1.875rem;
|
|
332
|
+
--opt-font-size-4xl: 2.25rem;
|
|
333
|
+
--opt-font-weight-normal: 400;
|
|
334
|
+
--opt-font-weight-medium: 500;
|
|
335
|
+
--opt-font-weight-semibold: 600;
|
|
336
|
+
--opt-font-weight-bold: 700;
|
|
337
|
+
--opt-font-heading: var(--font-geist-mono), ui-monospace, monospace;
|
|
338
|
+
--opt-font-body: var(--font-geist-sans), system-ui, sans-serif;
|
|
339
|
+
--opt-tracking-heading: 0.02em;
|
|
340
|
+
--opt-weight-heading: 500;
|
|
341
|
+
|
|
342
|
+
/* Other */
|
|
343
|
+
--opt-control-sm: 2rem;
|
|
344
|
+
--opt-control-md: 2.5rem;
|
|
345
|
+
--opt-control-lg: 3rem;
|
|
346
|
+
--opt-control-padding-sm: 0.75rem;
|
|
347
|
+
--opt-control-padding-md: 1rem;
|
|
348
|
+
--opt-control-padding-lg: 1.5rem;
|
|
349
|
+
--opt-duration-fast: 150ms;
|
|
350
|
+
--opt-duration-medium: 250ms;
|
|
351
|
+
--opt-duration-slow: 400ms;
|
|
352
|
+
--opt-ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
353
|
+
--opt-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
354
|
+
}
|
|
@@ -0,0 +1,298 @@
|
|
|
1
|
+
/** Defines the command shape (data for command palettes / menus). */
|
|
2
|
+
interface CommandDef {
|
|
3
|
+
id: string;
|
|
4
|
+
label: string;
|
|
5
|
+
group: string;
|
|
6
|
+
shortcut?: string;
|
|
7
|
+
action: () => void;
|
|
8
|
+
}
|
|
9
|
+
/** Defines the stat card shape. */
|
|
10
|
+
interface StatCard {
|
|
11
|
+
id: string;
|
|
12
|
+
title: string;
|
|
13
|
+
value: string;
|
|
14
|
+
change: string;
|
|
15
|
+
trend: "up" | "down" | "neutral";
|
|
16
|
+
rawValue?: number;
|
|
17
|
+
format?: "text" | "duration" | "percentage";
|
|
18
|
+
durationUnit?: "ms" | "s";
|
|
19
|
+
}
|
|
20
|
+
/** Defines the nav item shape. */
|
|
21
|
+
interface NavItem {
|
|
22
|
+
id: string;
|
|
23
|
+
label: string;
|
|
24
|
+
href: string;
|
|
25
|
+
}
|
|
26
|
+
/** Defines the faq item shape. */
|
|
27
|
+
interface FaqItem {
|
|
28
|
+
id: string;
|
|
29
|
+
question: string;
|
|
30
|
+
answer: string;
|
|
31
|
+
}
|
|
32
|
+
/** Defines the select option shape. */
|
|
33
|
+
interface SelectOption {
|
|
34
|
+
value: string;
|
|
35
|
+
label: string;
|
|
36
|
+
color?: string;
|
|
37
|
+
}
|
|
38
|
+
/** Defines the menu item shape. */
|
|
39
|
+
interface MenuItemDef {
|
|
40
|
+
id: string;
|
|
41
|
+
label: string;
|
|
42
|
+
type?: "item" | "separator" | "checkbox" | "radio";
|
|
43
|
+
shortcut?: string;
|
|
44
|
+
name?: string;
|
|
45
|
+
value?: string;
|
|
46
|
+
checked?: boolean;
|
|
47
|
+
onChange?: (checked: boolean) => void;
|
|
48
|
+
onClick?: () => void;
|
|
49
|
+
}
|
|
50
|
+
/** Defines the menu shape. */
|
|
51
|
+
interface MenuDef {
|
|
52
|
+
id: string;
|
|
53
|
+
label: string;
|
|
54
|
+
items: MenuItemDef[];
|
|
55
|
+
}
|
|
56
|
+
/** Defines the nav item shape. */
|
|
57
|
+
interface NavItemDef {
|
|
58
|
+
id: string;
|
|
59
|
+
label: string;
|
|
60
|
+
href: string;
|
|
61
|
+
separator?: boolean;
|
|
62
|
+
sectionLabel?: string;
|
|
63
|
+
}
|
|
64
|
+
/** Defines the toolbar button shape. */
|
|
65
|
+
interface ToolbarButtonDef {
|
|
66
|
+
id: string;
|
|
67
|
+
label: string;
|
|
68
|
+
icon: React.ReactNode;
|
|
69
|
+
separator?: boolean;
|
|
70
|
+
}
|
|
71
|
+
/** Defines the tab shape. */
|
|
72
|
+
interface TabDef {
|
|
73
|
+
id: string;
|
|
74
|
+
label: string;
|
|
75
|
+
content: React.ReactNode;
|
|
76
|
+
}
|
|
77
|
+
/** Defines the form field shape. */
|
|
78
|
+
interface FormFieldDef {
|
|
79
|
+
name: string;
|
|
80
|
+
label: string;
|
|
81
|
+
type?: "text" | "email" | "password" | "number" | "checkbox" | "radio" | "textarea" | "select" | "switch" | "tags";
|
|
82
|
+
placeholder?: string;
|
|
83
|
+
defaultValue?: unknown;
|
|
84
|
+
required?: boolean;
|
|
85
|
+
requiredMessage?: string;
|
|
86
|
+
validate?: (value: unknown) => string | undefined;
|
|
87
|
+
options?: {
|
|
88
|
+
value: string;
|
|
89
|
+
label: string;
|
|
90
|
+
}[];
|
|
91
|
+
/** textarea 전용: 표시 줄 수 */
|
|
92
|
+
rows?: number;
|
|
93
|
+
/** textarea 전용: 크기 조절 방향 */
|
|
94
|
+
resize?: "none" | "vertical" | "horizontal" | "both";
|
|
95
|
+
/** textarea 전용: 폰트 스타일 */
|
|
96
|
+
font?: "default" | "mono";
|
|
97
|
+
/** switch 전용: 설명 텍스트 */
|
|
98
|
+
description?: string;
|
|
99
|
+
/** 조건부 필드 표시 — false 또는 함수가 false를 반환하면 필드 숨김 */
|
|
100
|
+
visible?: boolean | ((values: Record<string, unknown>) => boolean);
|
|
101
|
+
}
|
|
102
|
+
/** Defines the deployment step shape. */
|
|
103
|
+
interface DeploymentStep {
|
|
104
|
+
id: string;
|
|
105
|
+
name: string;
|
|
106
|
+
status: "pending" | "running" | "success" | "error" | "skipped";
|
|
107
|
+
duration?: string;
|
|
108
|
+
detail?: string;
|
|
109
|
+
}
|
|
110
|
+
/** Defines the project shape. */
|
|
111
|
+
interface ProjectDef {
|
|
112
|
+
id: string;
|
|
113
|
+
name: string;
|
|
114
|
+
framework: string;
|
|
115
|
+
status: "active" | "paused" | "error";
|
|
116
|
+
domain?: string;
|
|
117
|
+
}
|
|
118
|
+
/** Defines the env var shape. */
|
|
119
|
+
interface EnvVarDef {
|
|
120
|
+
key: string;
|
|
121
|
+
value: string;
|
|
122
|
+
isSecret?: boolean;
|
|
123
|
+
}
|
|
124
|
+
/** Defines the env group shape. */
|
|
125
|
+
interface EnvGroupDef {
|
|
126
|
+
env: string;
|
|
127
|
+
vars: EnvVarDef[];
|
|
128
|
+
}
|
|
129
|
+
/** Defines the branch shape. */
|
|
130
|
+
interface BranchDef {
|
|
131
|
+
name: string;
|
|
132
|
+
isDefault?: boolean;
|
|
133
|
+
lastCommit?: string;
|
|
134
|
+
author?: string;
|
|
135
|
+
}
|
|
136
|
+
/** Defines the domain shape. */
|
|
137
|
+
interface DomainDef {
|
|
138
|
+
domain: string;
|
|
139
|
+
status: "active" | "pending" | "error";
|
|
140
|
+
ssl: "valid" | "expired" | "pending";
|
|
141
|
+
redirect?: string;
|
|
142
|
+
addedAt?: string;
|
|
143
|
+
}
|
|
144
|
+
/** Defines the table column shape. */
|
|
145
|
+
interface TableColumn<T> {
|
|
146
|
+
id: string;
|
|
147
|
+
header: string;
|
|
148
|
+
accessor: keyof T | ((row: T) => React.ReactNode);
|
|
149
|
+
width?: string;
|
|
150
|
+
align?: "left" | "center" | "right";
|
|
151
|
+
}
|
|
152
|
+
/** Defines the toast options shape. */
|
|
153
|
+
interface ToastOptions {
|
|
154
|
+
variant: "info" | "success" | "warning" | "error";
|
|
155
|
+
title?: string;
|
|
156
|
+
message: string;
|
|
157
|
+
duration?: number;
|
|
158
|
+
}
|
|
159
|
+
/** Defines the task shape. */
|
|
160
|
+
interface TaskDef {
|
|
161
|
+
id: string;
|
|
162
|
+
title: string;
|
|
163
|
+
description?: string;
|
|
164
|
+
status: "todo" | "in-progress" | "review" | "done";
|
|
165
|
+
priority: "low" | "medium" | "high" | "urgent";
|
|
166
|
+
assignee?: TeamMemberDef;
|
|
167
|
+
dueDate?: string;
|
|
168
|
+
tags?: string[];
|
|
169
|
+
subtasks?: {
|
|
170
|
+
id: string;
|
|
171
|
+
title: string;
|
|
172
|
+
completed: boolean;
|
|
173
|
+
}[];
|
|
174
|
+
}
|
|
175
|
+
/** Defines the team member shape. */
|
|
176
|
+
interface TeamMemberDef {
|
|
177
|
+
id: string;
|
|
178
|
+
name: string;
|
|
179
|
+
email: string;
|
|
180
|
+
avatar?: string;
|
|
181
|
+
role?: string;
|
|
182
|
+
status?: "online" | "away" | "busy" | "offline";
|
|
183
|
+
}
|
|
184
|
+
/** Defines the activity shape. */
|
|
185
|
+
interface ActivityDef {
|
|
186
|
+
id: string;
|
|
187
|
+
type: "created" | "updated" | "completed" | "commented" | "assigned" | "deployed" | "merged";
|
|
188
|
+
title: string;
|
|
189
|
+
description?: string;
|
|
190
|
+
actor: TeamMemberDef;
|
|
191
|
+
timestamp: string;
|
|
192
|
+
metadata?: Record<string, unknown>;
|
|
193
|
+
variant?: "default" | "error" | "warning";
|
|
194
|
+
}
|
|
195
|
+
/** Defines the filter option shape. */
|
|
196
|
+
interface FilterOption {
|
|
197
|
+
id: string;
|
|
198
|
+
label: string;
|
|
199
|
+
value: string;
|
|
200
|
+
}
|
|
201
|
+
/** Defines the filter group shape. */
|
|
202
|
+
interface FilterGroupDef {
|
|
203
|
+
id: string;
|
|
204
|
+
label: string;
|
|
205
|
+
type: "select" | "multi-select" | "search" | "date-range" | "tag" | "toggle";
|
|
206
|
+
options?: FilterOption[];
|
|
207
|
+
value?: string | string[] | boolean;
|
|
208
|
+
}
|
|
209
|
+
/** Defines the quick action shape. */
|
|
210
|
+
interface QuickActionDef {
|
|
211
|
+
id: string;
|
|
212
|
+
label: string;
|
|
213
|
+
description?: string;
|
|
214
|
+
icon?: React.ReactNode;
|
|
215
|
+
shortcut?: string;
|
|
216
|
+
onClick: () => void;
|
|
217
|
+
disabled?: boolean;
|
|
218
|
+
}
|
|
219
|
+
/** Defines the time preset shape. */
|
|
220
|
+
interface TimePreset {
|
|
221
|
+
label: string;
|
|
222
|
+
days: number;
|
|
223
|
+
}
|
|
224
|
+
/** Type definition for export format. */
|
|
225
|
+
type ExportFormat = "csv" | "json" | "pdf";
|
|
226
|
+
/** Defines the export column shape. */
|
|
227
|
+
interface ExportColumn {
|
|
228
|
+
key: string;
|
|
229
|
+
header: string;
|
|
230
|
+
}
|
|
231
|
+
/** Defines the failure item shape. */
|
|
232
|
+
interface FailureItem {
|
|
233
|
+
id: string;
|
|
234
|
+
title: string;
|
|
235
|
+
message?: string;
|
|
236
|
+
severity: "critical" | "error" | "warning";
|
|
237
|
+
timestamp: string;
|
|
238
|
+
group?: string;
|
|
239
|
+
metadata?: Record<string, unknown>;
|
|
240
|
+
}
|
|
241
|
+
/** Defines the chart data point shape. */
|
|
242
|
+
interface ChartDataPoint {
|
|
243
|
+
name: string;
|
|
244
|
+
[key: string]: string | number;
|
|
245
|
+
}
|
|
246
|
+
/** Defines the chart series shape. */
|
|
247
|
+
interface ChartSeriesDef {
|
|
248
|
+
dataKey: string;
|
|
249
|
+
name: string;
|
|
250
|
+
color?: string;
|
|
251
|
+
type?: "line" | "bar" | "area";
|
|
252
|
+
stackId?: string;
|
|
253
|
+
}
|
|
254
|
+
/** Configuration for chart. */
|
|
255
|
+
interface ChartConfig {
|
|
256
|
+
series: ChartSeriesDef[];
|
|
257
|
+
xAxisKey?: string;
|
|
258
|
+
showGrid?: boolean;
|
|
259
|
+
showTooltip?: boolean;
|
|
260
|
+
showLegend?: boolean;
|
|
261
|
+
animate?: boolean;
|
|
262
|
+
}
|
|
263
|
+
/** Defines the chart margin shape. */
|
|
264
|
+
interface ChartMargin {
|
|
265
|
+
top?: number;
|
|
266
|
+
right?: number;
|
|
267
|
+
bottom?: number;
|
|
268
|
+
left?: number;
|
|
269
|
+
}
|
|
270
|
+
/** Defines the chat conversation shape. */
|
|
271
|
+
interface ChatConversationDef {
|
|
272
|
+
id: string;
|
|
273
|
+
title: string;
|
|
274
|
+
lastMessage?: string;
|
|
275
|
+
timestamp: string;
|
|
276
|
+
unread?: boolean;
|
|
277
|
+
}
|
|
278
|
+
/** Defines the chat message shape. */
|
|
279
|
+
interface ChatMessageDef {
|
|
280
|
+
id: string;
|
|
281
|
+
role: "user" | "assistant";
|
|
282
|
+
content: string;
|
|
283
|
+
timestamp: string;
|
|
284
|
+
}
|
|
285
|
+
/** Defines the chat model shape. */
|
|
286
|
+
interface ChatModelDef {
|
|
287
|
+
id: string;
|
|
288
|
+
label: string;
|
|
289
|
+
description?: string;
|
|
290
|
+
}
|
|
291
|
+
/** Defines the chat style preset shape. */
|
|
292
|
+
interface ChatStylePresetDef {
|
|
293
|
+
id: string;
|
|
294
|
+
label: string;
|
|
295
|
+
systemPrompt?: string;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
export type { ActivityDef as A, BranchDef as B, ChatConversationDef as C, DeploymentStep as D, ExportColumn as E, FilterGroupDef as F, MenuDef as M, NavItem as N, ProjectDef as P, QuickActionDef as Q, StatCard as S, TaskDef as T, TeamMemberDef as a, FormFieldDef as b, ExportFormat as c, TabDef as d, ChatModelDef as e, ChatStylePresetDef as f, ChatMessageDef as g, ChartConfig as h, ChartDataPoint as i, ChartMargin as j, ChartSeriesDef as k, CommandDef as l, DomainDef as m, EnvGroupDef as n, EnvVarDef as o, FailureItem as p, FaqItem as q, FilterOption as r, MenuItemDef as s, NavItemDef as t, SelectOption as u, TableColumn as v, TimePreset as w, ToastOptions as x, ToolbarButtonDef as y };
|