@tenerife.music/ui 4.0.0 → 5.0.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/README.md +11 -362
- package/package.json +1 -1
- package/dist/Link-B8gB8LrX.d.cts +0 -78
- package/dist/Link-Dg9GiZzj.d.ts +0 -78
- package/dist/agent-contract/index.d.cts +0 -133
- package/dist/ai/index.d.cts +0 -202
- package/dist/colors-BRUYtnG-.d.cts +0 -298
- package/dist/colors-BRUYtnG-.d.ts +0 -298
- package/dist/engine/index.d.cts +0 -135
- package/dist/extensions/next/index.d.cts +0 -37
- package/dist/index-4rLh47Jk.d.cts +0 -1460
- package/dist/index-B9bPI2VR.d.cts +0 -4523
- package/dist/index-Cgj5md_p.d.ts +0 -4523
- package/dist/index-DzJQZ5GE.d.ts +0 -1460
- package/dist/index.d.cts +0 -11680
- package/dist/preset.d.cts +0 -21
- package/dist/safe-native-DQVUNMW7.d.cts +0 -32
- package/dist/safe-native-DQVUNMW7.d.ts +0 -32
- package/dist/styles.cjs +0 -2
- package/dist/styles.d.cts +0 -2
- package/dist/styles.d.ts +0 -2
- package/dist/styles.mjs +0 -1
- package/dist/theme/index.d.cts +0 -368
- package/dist/tokens/index.d.cts +0 -4
- package/dist/types-BBXB5_Tj.d.ts +0 -407
- package/dist/types-BEG5B5HA.d.cts +0 -138
- package/dist/types-C9zHIyTu.d.ts +0 -80
- package/dist/types-CNgJi1zK.d.ts +0 -138
- package/dist/types-CeNHa-BU.d.cts +0 -12
- package/dist/types-CeNHa-BU.d.ts +0 -12
- package/dist/types-CoqbRddt.d.cts +0 -80
- package/dist/types-kjA4Koki.d.cts +0 -407
- package/dist/typography-BsoBDDcG.d.cts +0 -1216
- package/dist/typography-BsoBDDcG.d.ts +0 -1216
- package/dist/ui-node-union-BNt_iPQO.d.cts +0 -272
- package/dist/ui-node-union-BdALN0FB.d.ts +0 -272
package/dist/index-DzJQZ5GE.d.ts
DELETED
|
@@ -1,1460 +0,0 @@
|
|
|
1
|
-
import { b as borderRadius, e as elevationShadows, p as primaryColoredShadows, a as accentColoredShadows, g as glowEffects, f as focusRings, s as spacing, c as semanticSpacing, l as layoutSpacing, d as fontSize, h as fontWeight, i as lineHeight } from './typography-BsoBDDcG.js';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Responsive Typing Primitives
|
|
5
|
-
*
|
|
6
|
-
* Canonical types for responsive values in Tenerife UI.
|
|
7
|
-
* These types are the single source of truth for responsive prop typing.
|
|
8
|
-
*/
|
|
9
|
-
/**
|
|
10
|
-
* Breakpoint values matching Tailwind defaults
|
|
11
|
-
*/
|
|
12
|
-
type Breakpoint = "base" | "sm" | "md" | "lg" | "xl" | "2xl";
|
|
13
|
-
/**
|
|
14
|
-
* Responsive value type - can be a single value or an object with breakpoint keys
|
|
15
|
-
*
|
|
16
|
-
* @example
|
|
17
|
-
* ```typescript
|
|
18
|
-
* // Single value
|
|
19
|
-
* const padding: Responsive<SpaceToken> = "md";
|
|
20
|
-
*
|
|
21
|
-
* // Responsive object
|
|
22
|
-
* const padding: Responsive<SpaceToken> = {
|
|
23
|
-
* base: "sm",
|
|
24
|
-
* md: "lg",
|
|
25
|
-
* xl: "xl"
|
|
26
|
-
* };
|
|
27
|
-
* ```
|
|
28
|
-
*/
|
|
29
|
-
type Responsive<T> = T | {
|
|
30
|
-
base?: T;
|
|
31
|
-
sm?: T;
|
|
32
|
-
md?: T;
|
|
33
|
-
lg?: T;
|
|
34
|
-
xl?: T;
|
|
35
|
-
"2xl"?: T;
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* Select Component Tokens
|
|
40
|
-
*
|
|
41
|
-
* Component-level design tokens for Select component.
|
|
42
|
-
* Maps foundation tokens (spacing, typography, radius, shadows) to select-specific usage.
|
|
43
|
-
* All color values use CSS variables for theme-aware styling.
|
|
44
|
-
*
|
|
45
|
-
* All values reference foundation tokens to ensure consistency across the design system.
|
|
46
|
-
* Values are mapped to Tailwind utility classes for direct use in component variants.
|
|
47
|
-
*/
|
|
48
|
-
declare const SELECT_TOKENS: {
|
|
49
|
-
/**
|
|
50
|
-
* Select trigger heights by size
|
|
51
|
-
* Supports xs, sm, md, lg, xl sizes
|
|
52
|
-
*/
|
|
53
|
-
readonly trigger: {
|
|
54
|
-
readonly height: {
|
|
55
|
-
readonly xs: "h-7";
|
|
56
|
-
readonly sm: "h-8";
|
|
57
|
-
readonly md: "h-9";
|
|
58
|
-
readonly lg: "h-10";
|
|
59
|
-
readonly xl: "h-11";
|
|
60
|
-
};
|
|
61
|
-
readonly padding: {
|
|
62
|
-
readonly horizontal: {
|
|
63
|
-
readonly xs: "px-xs";
|
|
64
|
-
readonly sm: "px-sm";
|
|
65
|
-
readonly md: "px-sm";
|
|
66
|
-
readonly lg: "px-md";
|
|
67
|
-
readonly xl: "px-lg";
|
|
68
|
-
};
|
|
69
|
-
readonly vertical: {
|
|
70
|
-
readonly xs: "py-xs";
|
|
71
|
-
readonly sm: "py-xs";
|
|
72
|
-
readonly md: "py-xs";
|
|
73
|
-
readonly lg: "py-sm";
|
|
74
|
-
readonly xl: "py-md";
|
|
75
|
-
};
|
|
76
|
-
};
|
|
77
|
-
readonly radius: {
|
|
78
|
-
readonly xs: "rounded-sm";
|
|
79
|
-
readonly sm: "rounded-md";
|
|
80
|
-
readonly md: "rounded-md";
|
|
81
|
-
readonly lg: "rounded-md";
|
|
82
|
-
readonly xl: "rounded-lg";
|
|
83
|
-
};
|
|
84
|
-
readonly fontSize: {
|
|
85
|
-
readonly xs: "text-xs";
|
|
86
|
-
readonly sm: "text-sm";
|
|
87
|
-
readonly md: "text-base";
|
|
88
|
-
readonly lg: "text-lg";
|
|
89
|
-
readonly xl: "text-xl";
|
|
90
|
-
};
|
|
91
|
-
readonly icon: {
|
|
92
|
-
readonly size: "size-4";
|
|
93
|
-
readonly gap: "gap-sm";
|
|
94
|
-
readonly color: "text-[hsl(var(--tm-text-muted))]";
|
|
95
|
-
};
|
|
96
|
-
};
|
|
97
|
-
/**
|
|
98
|
-
* Select content (dropdown) tokens
|
|
99
|
-
*/
|
|
100
|
-
readonly content: {
|
|
101
|
-
readonly padding: {
|
|
102
|
-
readonly xs: "p-xs";
|
|
103
|
-
readonly sm: "p-sm";
|
|
104
|
-
readonly md: "p-sm";
|
|
105
|
-
readonly lg: "p-md";
|
|
106
|
-
readonly xl: "p-lg";
|
|
107
|
-
};
|
|
108
|
-
readonly radius: {
|
|
109
|
-
readonly xs: "rounded-sm";
|
|
110
|
-
readonly sm: "rounded-md";
|
|
111
|
-
readonly md: "rounded-md";
|
|
112
|
-
readonly lg: "rounded-md";
|
|
113
|
-
readonly xl: "rounded-lg";
|
|
114
|
-
};
|
|
115
|
-
readonly shadow: "shadow-md";
|
|
116
|
-
readonly background: "bg-[hsl(var(--tm-surface-overlay))]";
|
|
117
|
-
readonly text: "text-[hsl(var(--tm-text-primary))]";
|
|
118
|
-
readonly border: "border border-[hsl(var(--tm-border-default))]";
|
|
119
|
-
readonly maxHeight: "max-h-96";
|
|
120
|
-
readonly minWidth: "min-w-32";
|
|
121
|
-
};
|
|
122
|
-
/**
|
|
123
|
-
* Select item tokens
|
|
124
|
-
*/
|
|
125
|
-
readonly item: {
|
|
126
|
-
readonly padding: {
|
|
127
|
-
readonly horizontal: {
|
|
128
|
-
readonly xs: "px-xs";
|
|
129
|
-
readonly sm: "px-sm";
|
|
130
|
-
readonly md: "px-sm";
|
|
131
|
-
readonly lg: "px-md";
|
|
132
|
-
readonly xl: "px-lg";
|
|
133
|
-
};
|
|
134
|
-
readonly vertical: {
|
|
135
|
-
readonly xs: "py-xs";
|
|
136
|
-
readonly sm: "py-xs";
|
|
137
|
-
readonly md: "py-xs";
|
|
138
|
-
readonly lg: "py-sm";
|
|
139
|
-
readonly xl: "py-sm";
|
|
140
|
-
};
|
|
141
|
-
};
|
|
142
|
-
readonly radius: {
|
|
143
|
-
readonly xs: "rounded-[4px]";
|
|
144
|
-
readonly sm: "rounded-[4px]";
|
|
145
|
-
readonly md: "rounded-[4px]";
|
|
146
|
-
readonly lg: "rounded-[4px]";
|
|
147
|
-
readonly xl: "rounded-md";
|
|
148
|
-
};
|
|
149
|
-
readonly fontSize: {
|
|
150
|
-
readonly xs: "text-xs";
|
|
151
|
-
readonly sm: "text-sm";
|
|
152
|
-
readonly md: "text-base";
|
|
153
|
-
readonly lg: "text-lg";
|
|
154
|
-
readonly xl: "text-xl";
|
|
155
|
-
};
|
|
156
|
-
readonly indicator: {
|
|
157
|
-
readonly size: "size-4";
|
|
158
|
-
readonly position: "left-sm";
|
|
159
|
-
};
|
|
160
|
-
readonly focus: {
|
|
161
|
-
readonly background: "focus-visible:bg-[hsl(var(--tm-accent))]";
|
|
162
|
-
readonly text: "focus-visible:text-[hsl(var(--tm-accent-foreground))]";
|
|
163
|
-
};
|
|
164
|
-
readonly hover: {
|
|
165
|
-
readonly background: "hover:bg-[hsl(var(--tm-accent))]";
|
|
166
|
-
readonly text: "hover:text-[hsl(var(--tm-accent-foreground))]";
|
|
167
|
-
};
|
|
168
|
-
readonly selected: {
|
|
169
|
-
readonly background: "bg-[hsl(var(--tm-accent))]";
|
|
170
|
-
readonly text: "text-[hsl(var(--tm-accent-foreground))]";
|
|
171
|
-
};
|
|
172
|
-
readonly disabled: {
|
|
173
|
-
readonly opacity: "opacity-50";
|
|
174
|
-
readonly pointerEvents: "pointer-events-none";
|
|
175
|
-
};
|
|
176
|
-
};
|
|
177
|
-
/**
|
|
178
|
-
* Select label tokens
|
|
179
|
-
*/
|
|
180
|
-
readonly label: {
|
|
181
|
-
readonly padding: {
|
|
182
|
-
readonly horizontal: {
|
|
183
|
-
readonly xs: "px-xs";
|
|
184
|
-
readonly sm: "px-sm";
|
|
185
|
-
readonly md: "px-sm";
|
|
186
|
-
readonly lg: "px-md";
|
|
187
|
-
readonly xl: "px-lg";
|
|
188
|
-
};
|
|
189
|
-
readonly vertical: {
|
|
190
|
-
readonly xs: "py-xs";
|
|
191
|
-
readonly sm: "py-xs";
|
|
192
|
-
readonly md: "py-xs";
|
|
193
|
-
readonly lg: "py-sm";
|
|
194
|
-
readonly xl: "py-sm";
|
|
195
|
-
};
|
|
196
|
-
};
|
|
197
|
-
readonly fontSize: {
|
|
198
|
-
readonly xs: "text-xs";
|
|
199
|
-
readonly sm: "text-sm";
|
|
200
|
-
readonly md: "text-base";
|
|
201
|
-
readonly lg: "text-lg";
|
|
202
|
-
readonly xl: "text-xl";
|
|
203
|
-
};
|
|
204
|
-
readonly fontWeight: "font-semibold";
|
|
205
|
-
};
|
|
206
|
-
/**
|
|
207
|
-
* Select separator tokens
|
|
208
|
-
*/
|
|
209
|
-
readonly separator: {
|
|
210
|
-
readonly margin: {
|
|
211
|
-
readonly horizontal: {
|
|
212
|
-
readonly xs: "-mx-xs";
|
|
213
|
-
readonly sm: "-mx-xs";
|
|
214
|
-
readonly md: "-mx-xs";
|
|
215
|
-
readonly lg: "-mx-sm";
|
|
216
|
-
readonly xl: "-mx-sm";
|
|
217
|
-
};
|
|
218
|
-
readonly vertical: {
|
|
219
|
-
readonly xs: "my-xs";
|
|
220
|
-
readonly sm: "my-xs";
|
|
221
|
-
readonly md: "my-xs";
|
|
222
|
-
readonly lg: "my-sm";
|
|
223
|
-
readonly xl: "my-sm";
|
|
224
|
-
};
|
|
225
|
-
};
|
|
226
|
-
readonly height: "h-px";
|
|
227
|
-
readonly background: "bg-[hsl(var(--tm-muted))]";
|
|
228
|
-
};
|
|
229
|
-
/**
|
|
230
|
-
* Variant-based tokens
|
|
231
|
-
* Border, background, and text colors for different variants
|
|
232
|
-
* All use CSS variable references for theme support
|
|
233
|
-
*/
|
|
234
|
-
readonly variant: {
|
|
235
|
-
readonly primary: {
|
|
236
|
-
readonly border: "border-[hsl(var(--tm-primary))]";
|
|
237
|
-
readonly background: "bg-[hsl(var(--tm-primary))]";
|
|
238
|
-
readonly text: "text-[hsl(var(--tm-primary-foreground))]";
|
|
239
|
-
readonly focus: "focus-visible:shadow-[var(--focus-ring-primary)]";
|
|
240
|
-
};
|
|
241
|
-
readonly secondary: {
|
|
242
|
-
readonly border: "border-[hsl(var(--tm-secondary))]";
|
|
243
|
-
readonly background: "bg-[hsl(var(--tm-secondary))]";
|
|
244
|
-
readonly text: "text-[hsl(var(--tm-secondary-foreground))]";
|
|
245
|
-
readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
|
|
246
|
-
};
|
|
247
|
-
readonly outline: {
|
|
248
|
-
readonly border: "border-[hsl(var(--tm-surface-base))]";
|
|
249
|
-
readonly background: "bg-transparent";
|
|
250
|
-
readonly text: "text-[hsl(var(--tm-text-primary))]";
|
|
251
|
-
readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
|
|
252
|
-
};
|
|
253
|
-
readonly ghost: {
|
|
254
|
-
readonly border: "border-transparent";
|
|
255
|
-
readonly background: "bg-transparent";
|
|
256
|
-
readonly text: "text-[hsl(var(--tm-text-primary))]";
|
|
257
|
-
readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
|
|
258
|
-
};
|
|
259
|
-
readonly destructive: {
|
|
260
|
-
readonly border: "border-[hsl(var(--tm-destructive))]";
|
|
261
|
-
readonly background: "bg-[hsl(var(--tm-destructive))]";
|
|
262
|
-
readonly text: "text-[hsl(var(--tm-destructive-foreground))]";
|
|
263
|
-
readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
|
|
264
|
-
};
|
|
265
|
-
};
|
|
266
|
-
/**
|
|
267
|
-
* State-based tokens
|
|
268
|
-
* Border, background, and text colors for different states
|
|
269
|
-
* All use CSS variable references for theme support
|
|
270
|
-
*/
|
|
271
|
-
readonly state: {
|
|
272
|
-
readonly default: {
|
|
273
|
-
readonly border: "border-[hsl(var(--tm-surface-base))]";
|
|
274
|
-
readonly background: "bg-transparent";
|
|
275
|
-
readonly text: "text-[hsl(var(--tm-text-primary))]";
|
|
276
|
-
};
|
|
277
|
-
readonly disabled: {
|
|
278
|
-
readonly border: "border-[hsl(var(--tm-surface-base))]";
|
|
279
|
-
readonly background: "bg-transparent";
|
|
280
|
-
readonly text: "text-[hsl(var(--tm-text-primary))] disabled:opacity-50";
|
|
281
|
-
readonly cursor: "cursor-not-allowed";
|
|
282
|
-
};
|
|
283
|
-
readonly open: {
|
|
284
|
-
readonly border: "border-[hsl(var(--tm-focus-ring))]";
|
|
285
|
-
readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
|
|
286
|
-
};
|
|
287
|
-
readonly closed: {
|
|
288
|
-
readonly border: "border-[hsl(var(--tm-surface-base))]";
|
|
289
|
-
};
|
|
290
|
-
};
|
|
291
|
-
/**
|
|
292
|
-
* Width tokens
|
|
293
|
-
*/
|
|
294
|
-
readonly width: {
|
|
295
|
-
readonly auto: "w-auto";
|
|
296
|
-
readonly full: "w-full";
|
|
297
|
-
readonly sm: "w-48";
|
|
298
|
-
readonly md: "w-64";
|
|
299
|
-
readonly lg: "w-80";
|
|
300
|
-
readonly xl: "w-96";
|
|
301
|
-
};
|
|
302
|
-
/**
|
|
303
|
-
* Size-based token structure
|
|
304
|
-
* Organized by size for easy access
|
|
305
|
-
*/
|
|
306
|
-
readonly size: {
|
|
307
|
-
readonly xs: {
|
|
308
|
-
readonly trigger: {
|
|
309
|
-
readonly height: "h-7";
|
|
310
|
-
readonly padding: {
|
|
311
|
-
readonly horizontal: "px-xs";
|
|
312
|
-
readonly vertical: "py-xs";
|
|
313
|
-
};
|
|
314
|
-
readonly radius: "rounded-sm";
|
|
315
|
-
readonly fontSize: "text-xs";
|
|
316
|
-
};
|
|
317
|
-
readonly item: {
|
|
318
|
-
readonly padding: {
|
|
319
|
-
readonly horizontal: "px-xs";
|
|
320
|
-
readonly vertical: "py-xs";
|
|
321
|
-
};
|
|
322
|
-
readonly fontSize: "text-xs";
|
|
323
|
-
};
|
|
324
|
-
readonly content: {
|
|
325
|
-
readonly padding: "p-xs";
|
|
326
|
-
readonly radius: "rounded-sm";
|
|
327
|
-
};
|
|
328
|
-
};
|
|
329
|
-
readonly sm: {
|
|
330
|
-
readonly trigger: {
|
|
331
|
-
readonly height: "h-8";
|
|
332
|
-
readonly padding: {
|
|
333
|
-
readonly horizontal: "px-sm";
|
|
334
|
-
readonly vertical: "py-xs";
|
|
335
|
-
};
|
|
336
|
-
readonly radius: "rounded-md";
|
|
337
|
-
readonly fontSize: "text-sm";
|
|
338
|
-
};
|
|
339
|
-
readonly item: {
|
|
340
|
-
readonly padding: {
|
|
341
|
-
readonly horizontal: "px-sm";
|
|
342
|
-
readonly vertical: "py-xs";
|
|
343
|
-
};
|
|
344
|
-
readonly fontSize: "text-sm";
|
|
345
|
-
};
|
|
346
|
-
readonly content: {
|
|
347
|
-
readonly padding: "p-sm";
|
|
348
|
-
readonly radius: "rounded-md";
|
|
349
|
-
};
|
|
350
|
-
};
|
|
351
|
-
readonly md: {
|
|
352
|
-
readonly trigger: {
|
|
353
|
-
readonly height: "h-9";
|
|
354
|
-
readonly padding: {
|
|
355
|
-
readonly horizontal: "px-sm";
|
|
356
|
-
readonly vertical: "py-xs";
|
|
357
|
-
};
|
|
358
|
-
readonly radius: "rounded-md";
|
|
359
|
-
readonly fontSize: "text-base";
|
|
360
|
-
};
|
|
361
|
-
readonly item: {
|
|
362
|
-
readonly padding: {
|
|
363
|
-
readonly horizontal: "px-sm";
|
|
364
|
-
readonly vertical: "py-xs";
|
|
365
|
-
};
|
|
366
|
-
readonly fontSize: "text-base";
|
|
367
|
-
};
|
|
368
|
-
readonly content: {
|
|
369
|
-
readonly padding: "p-sm";
|
|
370
|
-
readonly radius: "rounded-md";
|
|
371
|
-
};
|
|
372
|
-
};
|
|
373
|
-
readonly lg: {
|
|
374
|
-
readonly trigger: {
|
|
375
|
-
readonly height: "h-10";
|
|
376
|
-
readonly padding: {
|
|
377
|
-
readonly horizontal: "px-md";
|
|
378
|
-
readonly vertical: "py-sm";
|
|
379
|
-
};
|
|
380
|
-
readonly radius: "rounded-md";
|
|
381
|
-
readonly fontSize: "text-lg";
|
|
382
|
-
};
|
|
383
|
-
readonly item: {
|
|
384
|
-
readonly padding: {
|
|
385
|
-
readonly horizontal: "px-md";
|
|
386
|
-
readonly vertical: "py-sm";
|
|
387
|
-
};
|
|
388
|
-
readonly fontSize: "text-lg";
|
|
389
|
-
};
|
|
390
|
-
readonly content: {
|
|
391
|
-
readonly padding: "p-md";
|
|
392
|
-
readonly radius: "rounded-md";
|
|
393
|
-
};
|
|
394
|
-
};
|
|
395
|
-
readonly xl: {
|
|
396
|
-
readonly trigger: {
|
|
397
|
-
readonly height: "h-11";
|
|
398
|
-
readonly padding: {
|
|
399
|
-
readonly horizontal: "px-lg";
|
|
400
|
-
readonly vertical: "py-md";
|
|
401
|
-
};
|
|
402
|
-
readonly radius: "rounded-lg";
|
|
403
|
-
readonly fontSize: "text-xl";
|
|
404
|
-
};
|
|
405
|
-
readonly item: {
|
|
406
|
-
readonly padding: {
|
|
407
|
-
readonly horizontal: "px-lg";
|
|
408
|
-
readonly vertical: "py-sm";
|
|
409
|
-
};
|
|
410
|
-
readonly fontSize: "text-xl";
|
|
411
|
-
};
|
|
412
|
-
readonly content: {
|
|
413
|
-
readonly padding: "p-lg";
|
|
414
|
-
readonly radius: "rounded-lg";
|
|
415
|
-
};
|
|
416
|
-
};
|
|
417
|
-
};
|
|
418
|
-
};
|
|
419
|
-
type SelectTriggerHeight = keyof typeof SELECT_TOKENS.trigger.height;
|
|
420
|
-
type SelectTriggerPaddingHorizontal = keyof typeof SELECT_TOKENS.trigger.padding.horizontal;
|
|
421
|
-
type SelectTriggerPaddingVertical = keyof typeof SELECT_TOKENS.trigger.padding.vertical;
|
|
422
|
-
type SelectTriggerRadius = keyof typeof SELECT_TOKENS.trigger.radius;
|
|
423
|
-
type SelectTriggerFontSize = keyof typeof SELECT_TOKENS.trigger.fontSize;
|
|
424
|
-
type SelectContentPadding = keyof typeof SELECT_TOKENS.content.padding;
|
|
425
|
-
type SelectContentRadius = keyof typeof SELECT_TOKENS.content.radius;
|
|
426
|
-
type SelectItemPaddingHorizontal = keyof typeof SELECT_TOKENS.item.padding.horizontal;
|
|
427
|
-
type SelectItemPaddingVertical = keyof typeof SELECT_TOKENS.item.padding.vertical;
|
|
428
|
-
type SelectItemRadius = keyof typeof SELECT_TOKENS.item.radius;
|
|
429
|
-
type SelectItemFontSize = keyof typeof SELECT_TOKENS.item.fontSize;
|
|
430
|
-
type SelectLabelPaddingHorizontal = keyof typeof SELECT_TOKENS.label.padding.horizontal;
|
|
431
|
-
type SelectLabelPaddingVertical = keyof typeof SELECT_TOKENS.label.padding.vertical;
|
|
432
|
-
type SelectLabelFontSize = keyof typeof SELECT_TOKENS.label.fontSize;
|
|
433
|
-
type SelectSeparatorMarginHorizontal = keyof typeof SELECT_TOKENS.separator.margin.horizontal;
|
|
434
|
-
type SelectSeparatorMarginVertical = keyof typeof SELECT_TOKENS.separator.margin.vertical;
|
|
435
|
-
|
|
436
|
-
/**
|
|
437
|
-
* Canonical token key arrays — explicit union sources (TYPING_STANDARD RULE 1)
|
|
438
|
-
* These const arrays are the single source of truth for valid values.
|
|
439
|
-
* The token object keys are validated against these via satisfies (see below).
|
|
440
|
-
*/
|
|
441
|
-
declare const TABS_SIZES: readonly ["sm", "md", "lg"];
|
|
442
|
-
declare const TABS_VARIANTS: readonly ["underline", "pill", "segmented"];
|
|
443
|
-
declare const TABS_TONES: readonly ["neutral", "primary"];
|
|
444
|
-
|
|
445
|
-
/**
|
|
446
|
-
* Modal Component Tokens
|
|
447
|
-
*
|
|
448
|
-
* Component-level design tokens for Modal component.
|
|
449
|
-
* Maps foundation tokens (spacing, typography, radius, shadows) to modal-specific usage.
|
|
450
|
-
* All color values use CSS variables for theme-aware styling.
|
|
451
|
-
*/
|
|
452
|
-
/**
|
|
453
|
-
* Modal Component Tokens
|
|
454
|
-
*
|
|
455
|
-
* Defines spacing, sizing, typography, and visual tokens for Modal component.
|
|
456
|
-
* All colors use CSS variable references (hsl(var(--token))) for theme-aware styling.
|
|
457
|
-
*/
|
|
458
|
-
declare const MODAL_TOKENS: {
|
|
459
|
-
/**
|
|
460
|
-
* Modal maximum height token
|
|
461
|
-
* Used for all modal sizes to prevent overflow on small screens
|
|
462
|
-
*/
|
|
463
|
-
readonly maxHeight: "max-h-screen";
|
|
464
|
-
/**
|
|
465
|
-
* Modal size tokens
|
|
466
|
-
* Supports sm, md, lg sizes only (overlay restriction per VARIANTS_SIZE_CANON)
|
|
467
|
-
*/
|
|
468
|
-
readonly size: {
|
|
469
|
-
readonly sm: {
|
|
470
|
-
readonly width: "w-full max-w-sm";
|
|
471
|
-
readonly height: "h-auto max-h-screen";
|
|
472
|
-
readonly padding: "p-md";
|
|
473
|
-
readonly radius: "rounded-lg";
|
|
474
|
-
readonly shadow: "shadow-lg";
|
|
475
|
-
};
|
|
476
|
-
readonly md: {
|
|
477
|
-
readonly width: "w-full max-w-md";
|
|
478
|
-
readonly height: "h-auto max-h-screen";
|
|
479
|
-
readonly padding: "p-lg";
|
|
480
|
-
readonly radius: "rounded-lg";
|
|
481
|
-
readonly shadow: "shadow-xl";
|
|
482
|
-
};
|
|
483
|
-
readonly lg: {
|
|
484
|
-
readonly width: "w-full max-w-lg";
|
|
485
|
-
readonly height: "h-auto max-h-screen";
|
|
486
|
-
readonly padding: "p-xl";
|
|
487
|
-
readonly radius: "rounded-xl";
|
|
488
|
-
readonly shadow: "shadow-2xl";
|
|
489
|
-
};
|
|
490
|
-
};
|
|
491
|
-
/**
|
|
492
|
-
* Modal overlay tokens
|
|
493
|
-
*/
|
|
494
|
-
readonly overlay: {
|
|
495
|
-
readonly background: "bg-black/80";
|
|
496
|
-
readonly backdrop: "backdrop-blur-sm";
|
|
497
|
-
readonly layout: "fixed inset-0 z-40";
|
|
498
|
-
readonly motion: {
|
|
499
|
-
readonly enter: "data-[state=open]:tm-motion-fade-in";
|
|
500
|
-
readonly exit: "data-[state=closed]:tm-motion-fade-out";
|
|
501
|
-
};
|
|
502
|
-
};
|
|
503
|
-
/**
|
|
504
|
-
* Modal content tokens
|
|
505
|
-
*/
|
|
506
|
-
readonly content: {
|
|
507
|
-
readonly shadow: "shadow-xl";
|
|
508
|
-
readonly background: "bg-popover";
|
|
509
|
-
readonly text: "text-popover-foreground";
|
|
510
|
-
readonly border: "border border-border";
|
|
511
|
-
readonly position: "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2";
|
|
512
|
-
readonly layout: "flex flex-col min-h-0";
|
|
513
|
-
readonly motion: {
|
|
514
|
-
readonly enter: "data-[state=open]:tm-motion-fade-scale";
|
|
515
|
-
readonly exit: "data-[state=closed]:tm-motion-fade-scale-out";
|
|
516
|
-
};
|
|
517
|
-
};
|
|
518
|
-
/**
|
|
519
|
-
* Modal body tokens
|
|
520
|
-
*/
|
|
521
|
-
readonly body: {
|
|
522
|
-
readonly layout: "flex-1 min-h-0 overflow-y-auto";
|
|
523
|
-
};
|
|
524
|
-
/**
|
|
525
|
-
* Modal header tokens
|
|
526
|
-
*/
|
|
527
|
-
readonly header: {
|
|
528
|
-
readonly gap: {
|
|
529
|
-
readonly sm: "gap-xs";
|
|
530
|
-
readonly md: "gap-sm";
|
|
531
|
-
readonly lg: "gap-md";
|
|
532
|
-
};
|
|
533
|
-
readonly marginBottom: {
|
|
534
|
-
readonly sm: "mb-sm";
|
|
535
|
-
readonly md: "mb-md";
|
|
536
|
-
readonly lg: "mb-lg";
|
|
537
|
-
};
|
|
538
|
-
};
|
|
539
|
-
/**
|
|
540
|
-
* Modal footer tokens
|
|
541
|
-
*/
|
|
542
|
-
readonly footer: {
|
|
543
|
-
readonly gap: {
|
|
544
|
-
readonly sm: "gap-xs";
|
|
545
|
-
readonly md: "gap-sm";
|
|
546
|
-
readonly lg: "gap-md";
|
|
547
|
-
};
|
|
548
|
-
readonly marginTop: {
|
|
549
|
-
readonly sm: "mt-sm";
|
|
550
|
-
readonly md: "mt-md";
|
|
551
|
-
readonly lg: "mt-lg";
|
|
552
|
-
};
|
|
553
|
-
readonly align: {
|
|
554
|
-
readonly left: "justify-start";
|
|
555
|
-
readonly center: "justify-center";
|
|
556
|
-
readonly right: "justify-end";
|
|
557
|
-
readonly between: "justify-between";
|
|
558
|
-
};
|
|
559
|
-
};
|
|
560
|
-
/**
|
|
561
|
-
* Modal title tokens
|
|
562
|
-
*/
|
|
563
|
-
readonly title: {
|
|
564
|
-
readonly fontSize: {
|
|
565
|
-
readonly sm: "text-base";
|
|
566
|
-
readonly md: "text-lg";
|
|
567
|
-
readonly lg: "text-xl";
|
|
568
|
-
};
|
|
569
|
-
readonly fontWeight: "font-semibold";
|
|
570
|
-
readonly lineHeight: "leading-none";
|
|
571
|
-
readonly tracking: "tracking-tight";
|
|
572
|
-
};
|
|
573
|
-
/**
|
|
574
|
-
* Modal description tokens
|
|
575
|
-
*/
|
|
576
|
-
readonly description: {
|
|
577
|
-
readonly fontSize: {
|
|
578
|
-
readonly sm: "text-xs";
|
|
579
|
-
readonly md: "text-sm";
|
|
580
|
-
readonly lg: "text-base";
|
|
581
|
-
};
|
|
582
|
-
readonly color: "text-muted-foreground";
|
|
583
|
-
};
|
|
584
|
-
/**
|
|
585
|
-
* Modal close button tokens
|
|
586
|
-
*/
|
|
587
|
-
readonly close: {
|
|
588
|
-
readonly size: "size-8";
|
|
589
|
-
readonly radius: "rounded-sm";
|
|
590
|
-
readonly opacity: {
|
|
591
|
-
readonly default: "opacity-70";
|
|
592
|
-
readonly hover: "hover:opacity-100";
|
|
593
|
-
};
|
|
594
|
-
readonly position: "absolute right-md top-md";
|
|
595
|
-
readonly icon: {
|
|
596
|
-
readonly size: "size-4";
|
|
597
|
-
};
|
|
598
|
-
};
|
|
599
|
-
/**
|
|
600
|
-
* Modal width tokens (independent of size)
|
|
601
|
-
*/
|
|
602
|
-
readonly width: {
|
|
603
|
-
readonly auto: "w-auto";
|
|
604
|
-
readonly sm: "w-full max-w-sm";
|
|
605
|
-
readonly md: "w-full max-w-md";
|
|
606
|
-
readonly lg: "w-full max-w-lg";
|
|
607
|
-
readonly xl: "w-full max-w-xl";
|
|
608
|
-
readonly "2xl": "w-full max-w-2xl";
|
|
609
|
-
readonly full: "w-full";
|
|
610
|
-
};
|
|
611
|
-
/**
|
|
612
|
-
* Modal height tokens (independent of size)
|
|
613
|
-
*/
|
|
614
|
-
readonly height: {
|
|
615
|
-
readonly auto: "h-auto";
|
|
616
|
-
readonly sm: "h-64";
|
|
617
|
-
readonly md: "h-96";
|
|
618
|
-
readonly lg: "h-full";
|
|
619
|
-
readonly xl: "h-full";
|
|
620
|
-
readonly full: "h-full";
|
|
621
|
-
};
|
|
622
|
-
/**
|
|
623
|
-
* Surface variant tokens
|
|
624
|
-
*/
|
|
625
|
-
readonly surface: {
|
|
626
|
-
readonly flat: "bg-background";
|
|
627
|
-
readonly raised: "bg-card shadow-lg";
|
|
628
|
-
readonly sunken: "bg-muted";
|
|
629
|
-
readonly outline: "bg-background border-2 border-border";
|
|
630
|
-
readonly subtle: "bg-muted";
|
|
631
|
-
};
|
|
632
|
-
};
|
|
633
|
-
|
|
634
|
-
/**
|
|
635
|
-
* Motion System Tokens
|
|
636
|
-
*
|
|
637
|
-
* Unified, token-driven motion system for Tenerife UI.
|
|
638
|
-
* CSS-only animations with gesture support, directional transitions,
|
|
639
|
-
* compound animations, and reduced-motion accessibility.
|
|
640
|
-
*
|
|
641
|
-
* All values are CSS-compatible and mapped through CSS variables.
|
|
642
|
-
* No framer-motion dependency - pure CSS animations.
|
|
643
|
-
*/
|
|
644
|
-
/**
|
|
645
|
-
* Motion Duration Presets
|
|
646
|
-
* Optimized for smooth CSS transitions
|
|
647
|
-
*/
|
|
648
|
-
declare const motionDurations: {
|
|
649
|
-
readonly fast: "250ms";
|
|
650
|
-
readonly normal: "450ms";
|
|
651
|
-
readonly slow: "650ms";
|
|
652
|
-
readonly reduced: "0ms";
|
|
653
|
-
};
|
|
654
|
-
/**
|
|
655
|
-
* Motion Easing Presets
|
|
656
|
-
* Advanced cubic-bezier curves for natural motion
|
|
657
|
-
*/
|
|
658
|
-
declare const motionEasings: {
|
|
659
|
-
readonly soft: "cubic-bezier(0.22, 1, 0.36, 1)";
|
|
660
|
-
readonly standard: "cubic-bezier(0.4, 0, 0.2, 1)";
|
|
661
|
-
readonly emphasized: "cubic-bezier(0.2, 0, 0, 1)";
|
|
662
|
-
};
|
|
663
|
-
/**
|
|
664
|
-
* Motion Transition Presets
|
|
665
|
-
* Pre-configured transitions combining duration and easing
|
|
666
|
-
*/
|
|
667
|
-
declare const motionTransitions: {
|
|
668
|
-
readonly fast: "250ms cubic-bezier(0.4, 0, 0.2, 1)";
|
|
669
|
-
readonly normal: "450ms cubic-bezier(0.4, 0, 0.2, 1)";
|
|
670
|
-
readonly slow: "650ms cubic-bezier(0.2, 0, 0, 1)";
|
|
671
|
-
readonly soft: "450ms cubic-bezier(0.22, 1, 0.36, 1)";
|
|
672
|
-
readonly reduced: "0ms linear";
|
|
673
|
-
};
|
|
674
|
-
/**
|
|
675
|
-
* Motion Fade Animations
|
|
676
|
-
* Opacity-based transitions
|
|
677
|
-
*/
|
|
678
|
-
declare const motionFade: {
|
|
679
|
-
readonly in: {
|
|
680
|
-
readonly from: {
|
|
681
|
-
readonly opacity: "0";
|
|
682
|
-
};
|
|
683
|
-
readonly to: {
|
|
684
|
-
readonly opacity: "1";
|
|
685
|
-
};
|
|
686
|
-
};
|
|
687
|
-
readonly out: {
|
|
688
|
-
readonly from: {
|
|
689
|
-
readonly opacity: "1";
|
|
690
|
-
};
|
|
691
|
-
readonly to: {
|
|
692
|
-
readonly opacity: "0";
|
|
693
|
-
};
|
|
694
|
-
};
|
|
695
|
-
};
|
|
696
|
-
/**
|
|
697
|
-
* Motion Scale Animations
|
|
698
|
-
* Transform scale-based transitions
|
|
699
|
-
*/
|
|
700
|
-
declare const motionScale: {
|
|
701
|
-
readonly in: {
|
|
702
|
-
readonly from: {
|
|
703
|
-
readonly transform: "scale(0.95)";
|
|
704
|
-
readonly opacity: "0";
|
|
705
|
-
};
|
|
706
|
-
readonly to: {
|
|
707
|
-
readonly transform: "scale(1)";
|
|
708
|
-
readonly opacity: "1";
|
|
709
|
-
};
|
|
710
|
-
};
|
|
711
|
-
readonly out: {
|
|
712
|
-
readonly from: {
|
|
713
|
-
readonly transform: "scale(1)";
|
|
714
|
-
readonly opacity: "1";
|
|
715
|
-
};
|
|
716
|
-
readonly to: {
|
|
717
|
-
readonly transform: "scale(0.95)";
|
|
718
|
-
readonly opacity: "0";
|
|
719
|
-
};
|
|
720
|
-
};
|
|
721
|
-
};
|
|
722
|
-
/**
|
|
723
|
-
* Motion Slide Animations
|
|
724
|
-
* Directional slide transitions
|
|
725
|
-
*/
|
|
726
|
-
declare const motionSlide: {
|
|
727
|
-
readonly up: {
|
|
728
|
-
readonly in: {
|
|
729
|
-
readonly from: {
|
|
730
|
-
readonly transform: "translateY(100%)";
|
|
731
|
-
readonly opacity: "0";
|
|
732
|
-
};
|
|
733
|
-
readonly to: {
|
|
734
|
-
readonly transform: "translateY(0)";
|
|
735
|
-
readonly opacity: "1";
|
|
736
|
-
};
|
|
737
|
-
};
|
|
738
|
-
readonly out: {
|
|
739
|
-
readonly from: {
|
|
740
|
-
readonly transform: "translateY(0)";
|
|
741
|
-
readonly opacity: "1";
|
|
742
|
-
};
|
|
743
|
-
readonly to: {
|
|
744
|
-
readonly transform: "translateY(100%)";
|
|
745
|
-
readonly opacity: "0";
|
|
746
|
-
};
|
|
747
|
-
};
|
|
748
|
-
};
|
|
749
|
-
readonly down: {
|
|
750
|
-
readonly in: {
|
|
751
|
-
readonly from: {
|
|
752
|
-
readonly transform: "translateY(-100%)";
|
|
753
|
-
readonly opacity: "0";
|
|
754
|
-
};
|
|
755
|
-
readonly to: {
|
|
756
|
-
readonly transform: "translateY(0)";
|
|
757
|
-
readonly opacity: "1";
|
|
758
|
-
};
|
|
759
|
-
};
|
|
760
|
-
readonly out: {
|
|
761
|
-
readonly from: {
|
|
762
|
-
readonly transform: "translateY(0)";
|
|
763
|
-
readonly opacity: "1";
|
|
764
|
-
};
|
|
765
|
-
readonly to: {
|
|
766
|
-
readonly transform: "translateY(-100%)";
|
|
767
|
-
readonly opacity: "0";
|
|
768
|
-
};
|
|
769
|
-
};
|
|
770
|
-
};
|
|
771
|
-
readonly left: {
|
|
772
|
-
readonly in: {
|
|
773
|
-
readonly from: {
|
|
774
|
-
readonly transform: "translateX(100%)";
|
|
775
|
-
readonly opacity: "0";
|
|
776
|
-
};
|
|
777
|
-
readonly to: {
|
|
778
|
-
readonly transform: "translateX(0)";
|
|
779
|
-
readonly opacity: "1";
|
|
780
|
-
};
|
|
781
|
-
};
|
|
782
|
-
readonly out: {
|
|
783
|
-
readonly from: {
|
|
784
|
-
readonly transform: "translateX(0)";
|
|
785
|
-
readonly opacity: "1";
|
|
786
|
-
};
|
|
787
|
-
readonly to: {
|
|
788
|
-
readonly transform: "translateX(100%)";
|
|
789
|
-
readonly opacity: "0";
|
|
790
|
-
};
|
|
791
|
-
};
|
|
792
|
-
};
|
|
793
|
-
readonly right: {
|
|
794
|
-
readonly in: {
|
|
795
|
-
readonly from: {
|
|
796
|
-
readonly transform: "translateX(-100%)";
|
|
797
|
-
readonly opacity: "0";
|
|
798
|
-
};
|
|
799
|
-
readonly to: {
|
|
800
|
-
readonly transform: "translateX(0)";
|
|
801
|
-
readonly opacity: "1";
|
|
802
|
-
};
|
|
803
|
-
};
|
|
804
|
-
readonly out: {
|
|
805
|
-
readonly from: {
|
|
806
|
-
readonly transform: "translateX(0)";
|
|
807
|
-
readonly opacity: "1";
|
|
808
|
-
};
|
|
809
|
-
readonly to: {
|
|
810
|
-
readonly transform: "translateX(-100%)";
|
|
811
|
-
readonly opacity: "0";
|
|
812
|
-
};
|
|
813
|
-
};
|
|
814
|
-
};
|
|
815
|
-
};
|
|
816
|
-
/**
|
|
817
|
-
* Motion Compound Animations
|
|
818
|
-
* Combined fade + scale, fade + slide transitions
|
|
819
|
-
*/
|
|
820
|
-
declare const motionCombined: {
|
|
821
|
-
readonly fadeScale: {
|
|
822
|
-
readonly in: {
|
|
823
|
-
readonly from: {
|
|
824
|
-
readonly transform: "scale(0.95)";
|
|
825
|
-
readonly opacity: "0";
|
|
826
|
-
};
|
|
827
|
-
readonly to: {
|
|
828
|
-
readonly transform: "scale(1)";
|
|
829
|
-
readonly opacity: "1";
|
|
830
|
-
};
|
|
831
|
-
};
|
|
832
|
-
readonly out: {
|
|
833
|
-
readonly from: {
|
|
834
|
-
readonly transform: "scale(1)";
|
|
835
|
-
readonly opacity: "1";
|
|
836
|
-
};
|
|
837
|
-
readonly to: {
|
|
838
|
-
readonly transform: "scale(0.95)";
|
|
839
|
-
readonly opacity: "0";
|
|
840
|
-
};
|
|
841
|
-
};
|
|
842
|
-
};
|
|
843
|
-
readonly fadeSlideUp: {
|
|
844
|
-
readonly in: {
|
|
845
|
-
readonly from: {
|
|
846
|
-
readonly transform: "translateY(100%)";
|
|
847
|
-
readonly opacity: "0";
|
|
848
|
-
};
|
|
849
|
-
readonly to: {
|
|
850
|
-
readonly transform: "translateY(0)";
|
|
851
|
-
readonly opacity: "1";
|
|
852
|
-
};
|
|
853
|
-
};
|
|
854
|
-
readonly out: {
|
|
855
|
-
readonly from: {
|
|
856
|
-
readonly transform: "translateY(0)";
|
|
857
|
-
readonly opacity: "1";
|
|
858
|
-
};
|
|
859
|
-
readonly to: {
|
|
860
|
-
readonly transform: "translateY(100%)";
|
|
861
|
-
readonly opacity: "0";
|
|
862
|
-
};
|
|
863
|
-
};
|
|
864
|
-
};
|
|
865
|
-
readonly fadeSlideDown: {
|
|
866
|
-
readonly in: {
|
|
867
|
-
readonly from: {
|
|
868
|
-
readonly transform: "translateY(-100%)";
|
|
869
|
-
readonly opacity: "0";
|
|
870
|
-
};
|
|
871
|
-
readonly to: {
|
|
872
|
-
readonly transform: "translateY(0)";
|
|
873
|
-
readonly opacity: "1";
|
|
874
|
-
};
|
|
875
|
-
};
|
|
876
|
-
readonly out: {
|
|
877
|
-
readonly from: {
|
|
878
|
-
readonly transform: "translateY(0)";
|
|
879
|
-
readonly opacity: "1";
|
|
880
|
-
};
|
|
881
|
-
readonly to: {
|
|
882
|
-
readonly transform: "translateY(-100%)";
|
|
883
|
-
readonly opacity: "0";
|
|
884
|
-
};
|
|
885
|
-
};
|
|
886
|
-
};
|
|
887
|
-
readonly fadeSlideLeft: {
|
|
888
|
-
readonly in: {
|
|
889
|
-
readonly from: {
|
|
890
|
-
readonly transform: "translateX(100%)";
|
|
891
|
-
readonly opacity: "0";
|
|
892
|
-
};
|
|
893
|
-
readonly to: {
|
|
894
|
-
readonly transform: "translateX(0)";
|
|
895
|
-
readonly opacity: "1";
|
|
896
|
-
};
|
|
897
|
-
};
|
|
898
|
-
readonly out: {
|
|
899
|
-
readonly from: {
|
|
900
|
-
readonly transform: "translateX(0)";
|
|
901
|
-
readonly opacity: "1";
|
|
902
|
-
};
|
|
903
|
-
readonly to: {
|
|
904
|
-
readonly transform: "translateX(100%)";
|
|
905
|
-
readonly opacity: "0";
|
|
906
|
-
};
|
|
907
|
-
};
|
|
908
|
-
};
|
|
909
|
-
readonly fadeSlideRight: {
|
|
910
|
-
readonly in: {
|
|
911
|
-
readonly from: {
|
|
912
|
-
readonly transform: "translateX(-100%)";
|
|
913
|
-
readonly opacity: "0";
|
|
914
|
-
};
|
|
915
|
-
readonly to: {
|
|
916
|
-
readonly transform: "translateX(0)";
|
|
917
|
-
readonly opacity: "1";
|
|
918
|
-
};
|
|
919
|
-
};
|
|
920
|
-
readonly out: {
|
|
921
|
-
readonly from: {
|
|
922
|
-
readonly transform: "translateX(0)";
|
|
923
|
-
readonly opacity: "1";
|
|
924
|
-
};
|
|
925
|
-
readonly to: {
|
|
926
|
-
readonly transform: "translateX(-100%)";
|
|
927
|
-
readonly opacity: "0";
|
|
928
|
-
};
|
|
929
|
-
};
|
|
930
|
-
};
|
|
931
|
-
};
|
|
932
|
-
/**
|
|
933
|
-
* Motion CSS Variables
|
|
934
|
-
* CSS custom properties for runtime theming
|
|
935
|
-
*/
|
|
936
|
-
declare const motionCSSVariables: {
|
|
937
|
-
readonly "--tm-motion-duration-fast": "250ms";
|
|
938
|
-
readonly "--tm-motion-duration-normal": "450ms";
|
|
939
|
-
readonly "--tm-motion-duration-slow": "650ms";
|
|
940
|
-
readonly "--tm-motion-duration-reduced": "0ms";
|
|
941
|
-
readonly "--tm-motion-easing-soft": "cubic-bezier(0.22, 1, 0.36, 1)";
|
|
942
|
-
readonly "--tm-motion-easing-standard": "cubic-bezier(0.4, 0, 0.2, 1)";
|
|
943
|
-
readonly "--tm-motion-easing-emphasized": "cubic-bezier(0.2, 0, 0, 1)";
|
|
944
|
-
readonly "--tm-motion-transition-fast": "250ms cubic-bezier(0.4, 0, 0.2, 1)";
|
|
945
|
-
readonly "--tm-motion-transition-normal": "450ms cubic-bezier(0.4, 0, 0.2, 1)";
|
|
946
|
-
readonly "--tm-motion-transition-slow": "650ms cubic-bezier(0.2, 0, 0, 1)";
|
|
947
|
-
readonly "--tm-motion-transition-soft": "450ms cubic-bezier(0.22, 1, 0.36, 1)";
|
|
948
|
-
readonly "--tm-motion-transition-reduced": "0ms linear";
|
|
949
|
-
};
|
|
950
|
-
/**
|
|
951
|
-
* Motion Transition Properties
|
|
952
|
-
* Defines which CSS properties to transition
|
|
953
|
-
*/
|
|
954
|
-
declare const motionTransitionProperty: {
|
|
955
|
-
readonly DEFAULT: "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter";
|
|
956
|
-
readonly colors: "color, background-color, border-color, text-decoration-color, fill, stroke";
|
|
957
|
-
readonly opacity: "opacity";
|
|
958
|
-
readonly shadow: "box-shadow";
|
|
959
|
-
readonly transform: "transform";
|
|
960
|
-
readonly all: "all";
|
|
961
|
-
readonly none: "none";
|
|
962
|
-
};
|
|
963
|
-
/**
|
|
964
|
-
* Motion Tailwind Config
|
|
965
|
-
* Maps to Tailwind theme for utility classes
|
|
966
|
-
*/
|
|
967
|
-
declare const motionTailwindConfig: {
|
|
968
|
-
readonly transitionDuration: {
|
|
969
|
-
readonly fast: "250ms";
|
|
970
|
-
readonly normal: "450ms";
|
|
971
|
-
readonly slow: "650ms";
|
|
972
|
-
readonly reduced: "0ms";
|
|
973
|
-
};
|
|
974
|
-
readonly transitionTimingFunction: {
|
|
975
|
-
readonly soft: "cubic-bezier(0.22, 1, 0.36, 1)";
|
|
976
|
-
readonly standard: "cubic-bezier(0.4, 0, 0.2, 1)";
|
|
977
|
-
readonly emphasized: "cubic-bezier(0.2, 0, 0, 1)";
|
|
978
|
-
};
|
|
979
|
-
readonly transitionProperty: {
|
|
980
|
-
readonly DEFAULT: "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter";
|
|
981
|
-
readonly colors: "color, background-color, border-color, text-decoration-color, fill, stroke";
|
|
982
|
-
readonly opacity: "opacity";
|
|
983
|
-
readonly shadow: "box-shadow";
|
|
984
|
-
readonly transform: "transform";
|
|
985
|
-
readonly all: "all";
|
|
986
|
-
readonly none: "none";
|
|
987
|
-
};
|
|
988
|
-
readonly keyframes: Record<string, Record<string, Record<string, string | number>>>;
|
|
989
|
-
};
|
|
990
|
-
/**
|
|
991
|
-
* Reduced Motion Support
|
|
992
|
-
* Respects prefers-reduced-motion media query
|
|
993
|
-
*/
|
|
994
|
-
declare const motionReducedMotion: {
|
|
995
|
-
/** Reduced motion duration (instant, no animation) */
|
|
996
|
-
readonly duration: "0ms";
|
|
997
|
-
/** Reduced motion easing (linear for instant) */
|
|
998
|
-
readonly easing: "linear";
|
|
999
|
-
/** Reduced motion transition (instant) */
|
|
1000
|
-
readonly transition: "0ms linear";
|
|
1001
|
-
/** CSS media query for reduced motion */
|
|
1002
|
-
readonly mediaQuery: "@media (prefers-reduced-motion: reduce)";
|
|
1003
|
-
};
|
|
1004
|
-
/**
|
|
1005
|
-
* Type Exports
|
|
1006
|
-
*/
|
|
1007
|
-
type MotionDuration = keyof typeof motionDurations;
|
|
1008
|
-
type MotionEasing = keyof typeof motionEasings;
|
|
1009
|
-
type MotionTransition = keyof typeof motionTransitions;
|
|
1010
|
-
type MotionSlideDirection = keyof typeof motionSlide;
|
|
1011
|
-
type MotionCombinedType = keyof typeof motionCombined;
|
|
1012
|
-
|
|
1013
|
-
/**
|
|
1014
|
-
* ContextMenu Component Tokens
|
|
1015
|
-
*
|
|
1016
|
-
* Component-level design tokens for ContextMenu component.
|
|
1017
|
-
* Maps foundation tokens (spacing, typography, radius, shadows) to context-menu-specific usage.
|
|
1018
|
-
* All color values use CSS variables for theme-aware styling.
|
|
1019
|
-
*/
|
|
1020
|
-
/**
|
|
1021
|
-
* ContextMenu Component Tokens
|
|
1022
|
-
*
|
|
1023
|
-
* Defines spacing, sizing, typography, and visual tokens for ContextMenu component.
|
|
1024
|
-
* All colors use CSS variable references (hsl(var(--token))) for theme-aware styling.
|
|
1025
|
-
*/
|
|
1026
|
-
declare const CONTEXT_MENU_TOKENS: {
|
|
1027
|
-
/**
|
|
1028
|
-
* ContextMenu size tokens
|
|
1029
|
-
* Supports sm, md, lg sizes
|
|
1030
|
-
*/
|
|
1031
|
-
readonly size: {
|
|
1032
|
-
readonly sm: {
|
|
1033
|
-
readonly content: {
|
|
1034
|
-
readonly padding: "p-sm";
|
|
1035
|
-
readonly radius: "rounded-md";
|
|
1036
|
-
readonly minWidth: "min-w-32";
|
|
1037
|
-
};
|
|
1038
|
-
readonly item: {
|
|
1039
|
-
readonly padding: {
|
|
1040
|
-
readonly horizontal: "px-sm";
|
|
1041
|
-
readonly vertical: "py-xs";
|
|
1042
|
-
};
|
|
1043
|
-
readonly gap: "gap-xs";
|
|
1044
|
-
readonly fontSize: "text-xs";
|
|
1045
|
-
readonly height: "h-8";
|
|
1046
|
-
};
|
|
1047
|
-
};
|
|
1048
|
-
readonly md: {
|
|
1049
|
-
readonly content: {
|
|
1050
|
-
readonly padding: "p-md";
|
|
1051
|
-
readonly radius: "rounded-lg";
|
|
1052
|
-
readonly minWidth: "min-w-48";
|
|
1053
|
-
};
|
|
1054
|
-
readonly item: {
|
|
1055
|
-
readonly padding: {
|
|
1056
|
-
readonly horizontal: "px-md";
|
|
1057
|
-
readonly vertical: "py-sm";
|
|
1058
|
-
};
|
|
1059
|
-
readonly gap: "gap-sm";
|
|
1060
|
-
readonly fontSize: "text-sm";
|
|
1061
|
-
readonly height: "h-10";
|
|
1062
|
-
};
|
|
1063
|
-
};
|
|
1064
|
-
readonly lg: {
|
|
1065
|
-
readonly content: {
|
|
1066
|
-
readonly padding: "p-lg";
|
|
1067
|
-
readonly radius: "rounded-lg";
|
|
1068
|
-
readonly minWidth: "min-w-56";
|
|
1069
|
-
};
|
|
1070
|
-
readonly item: {
|
|
1071
|
-
readonly padding: {
|
|
1072
|
-
readonly horizontal: "px-lg";
|
|
1073
|
-
readonly vertical: "py-sm";
|
|
1074
|
-
};
|
|
1075
|
-
readonly gap: "gap-md";
|
|
1076
|
-
readonly fontSize: "text-base";
|
|
1077
|
-
readonly height: "h-12";
|
|
1078
|
-
};
|
|
1079
|
-
};
|
|
1080
|
-
};
|
|
1081
|
-
/**
|
|
1082
|
-
* ContextMenu width tokens
|
|
1083
|
-
* Independent width control for content
|
|
1084
|
-
*/
|
|
1085
|
-
readonly width: {
|
|
1086
|
-
readonly auto: "w-auto";
|
|
1087
|
-
readonly sm: "w-32";
|
|
1088
|
-
readonly md: "w-48";
|
|
1089
|
-
readonly lg: "w-56";
|
|
1090
|
-
readonly xl: "w-64";
|
|
1091
|
-
};
|
|
1092
|
-
/**
|
|
1093
|
-
* ContextMenu content tokens
|
|
1094
|
-
*/
|
|
1095
|
-
readonly content: {
|
|
1096
|
-
readonly background: "bg-popover";
|
|
1097
|
-
readonly text: "text-foreground";
|
|
1098
|
-
readonly border: "border border-border";
|
|
1099
|
-
readonly shadow: "shadow-lg";
|
|
1100
|
-
readonly surface: {
|
|
1101
|
-
readonly flat: "bg-popover";
|
|
1102
|
-
readonly raised: "bg-popover shadow-lg";
|
|
1103
|
-
readonly sunken: "bg-muted";
|
|
1104
|
-
readonly outline: "bg-popover border-2 border-border";
|
|
1105
|
-
readonly subtle: "bg-muted";
|
|
1106
|
-
};
|
|
1107
|
-
/**
|
|
1108
|
-
* Animation offset for slide-in animations
|
|
1109
|
-
* Small 2px offset provides subtle visual feedback when menus slide in
|
|
1110
|
-
*/
|
|
1111
|
-
readonly animationOffset: "[2px]";
|
|
1112
|
-
};
|
|
1113
|
-
/**
|
|
1114
|
-
* ContextMenu item tokens
|
|
1115
|
-
*/
|
|
1116
|
-
readonly item: {
|
|
1117
|
-
readonly radius: "rounded-sm";
|
|
1118
|
-
readonly focus: {
|
|
1119
|
-
readonly background: "focus-visible:bg-accent";
|
|
1120
|
-
readonly text: "focus-visible:text-accent-foreground";
|
|
1121
|
-
};
|
|
1122
|
-
readonly disabled: {
|
|
1123
|
-
readonly opacity: "opacity-50";
|
|
1124
|
-
readonly pointerEvents: "pointer-events-none";
|
|
1125
|
-
};
|
|
1126
|
-
readonly tone: {
|
|
1127
|
-
readonly neutral: {
|
|
1128
|
-
readonly default: {
|
|
1129
|
-
readonly background: "bg-transparent";
|
|
1130
|
-
readonly text: "text-foreground";
|
|
1131
|
-
};
|
|
1132
|
-
readonly hover: {
|
|
1133
|
-
readonly background: "hover:bg-accent";
|
|
1134
|
-
readonly text: "hover:text-accent-foreground";
|
|
1135
|
-
};
|
|
1136
|
-
};
|
|
1137
|
-
readonly primary: {
|
|
1138
|
-
readonly default: {
|
|
1139
|
-
readonly background: "bg-transparent";
|
|
1140
|
-
readonly text: "text-primary";
|
|
1141
|
-
};
|
|
1142
|
-
readonly hover: {
|
|
1143
|
-
readonly background: "hover:bg-primary";
|
|
1144
|
-
readonly text: "hover:text-primary-foreground";
|
|
1145
|
-
};
|
|
1146
|
-
};
|
|
1147
|
-
readonly destructive: {
|
|
1148
|
-
readonly default: {
|
|
1149
|
-
readonly background: "bg-transparent";
|
|
1150
|
-
readonly text: "text-destructive";
|
|
1151
|
-
};
|
|
1152
|
-
readonly hover: {
|
|
1153
|
-
readonly background: "hover:bg-destructive";
|
|
1154
|
-
readonly text: "hover:text-destructive-foreground";
|
|
1155
|
-
};
|
|
1156
|
-
};
|
|
1157
|
-
};
|
|
1158
|
-
};
|
|
1159
|
-
/**
|
|
1160
|
-
* ContextMenu separator tokens
|
|
1161
|
-
*/
|
|
1162
|
-
readonly separator: {
|
|
1163
|
-
readonly margin: "my-xs";
|
|
1164
|
-
readonly height: "h-px";
|
|
1165
|
-
readonly color: "bg-border";
|
|
1166
|
-
};
|
|
1167
|
-
/**
|
|
1168
|
-
* ContextMenu label tokens
|
|
1169
|
-
*/
|
|
1170
|
-
readonly label: {
|
|
1171
|
-
readonly padding: {
|
|
1172
|
-
readonly sm: "px-sm py-xs";
|
|
1173
|
-
readonly md: "px-md py-sm";
|
|
1174
|
-
};
|
|
1175
|
-
readonly textStyle: "text-sm font-semibold";
|
|
1176
|
-
readonly color: "text-muted-foreground";
|
|
1177
|
-
};
|
|
1178
|
-
/**
|
|
1179
|
-
* ContextMenu indicator tokens (for checkboxes, radio buttons)
|
|
1180
|
-
*/
|
|
1181
|
-
readonly indicator: {
|
|
1182
|
-
readonly size: "size-4";
|
|
1183
|
-
readonly position: "left-sm";
|
|
1184
|
-
};
|
|
1185
|
-
};
|
|
1186
|
-
|
|
1187
|
-
/**
|
|
1188
|
-
* Token Union Types
|
|
1189
|
-
*
|
|
1190
|
-
* Centralized token union types for Tenerife UI.
|
|
1191
|
-
* These types are the single source of truth for all token-based props.
|
|
1192
|
-
* All visual/layout props MUST use these token unions, never raw strings or numbers.
|
|
1193
|
-
*/
|
|
1194
|
-
|
|
1195
|
-
/**
|
|
1196
|
-
* Base spacing token keys (numeric keys from spacing object)
|
|
1197
|
-
* Note: Removed number type - only string keys are allowed
|
|
1198
|
-
*/
|
|
1199
|
-
type SpaceToken = keyof typeof spacing | keyof typeof semanticSpacing;
|
|
1200
|
-
/**
|
|
1201
|
-
* Layout spacing token keys
|
|
1202
|
-
* Format: "section-xs", "container-md", "grid-lg", "stack-sm", "component-xl"
|
|
1203
|
-
*/
|
|
1204
|
-
type LayoutSpaceToken = `section-${keyof typeof layoutSpacing.section}` | `container-${keyof typeof layoutSpacing.container}` | `grid-${keyof typeof layoutSpacing.grid}` | `stack-${keyof typeof layoutSpacing.stack}` | `component-${keyof typeof layoutSpacing.component}`;
|
|
1205
|
-
/**
|
|
1206
|
-
* Combined spacing token (base + semantic + layout)
|
|
1207
|
-
*/
|
|
1208
|
-
type SpacingToken = SpaceToken | LayoutSpaceToken;
|
|
1209
|
-
/**
|
|
1210
|
-
* Border radius token keys
|
|
1211
|
-
*/
|
|
1212
|
-
type RadiusToken = keyof typeof borderRadius;
|
|
1213
|
-
/**
|
|
1214
|
-
* Shadow token keys
|
|
1215
|
-
* Includes elevation shadows, colored shadows, glow effects, and focus rings
|
|
1216
|
-
*/
|
|
1217
|
-
type ShadowToken = keyof typeof elevationShadows | keyof typeof primaryColoredShadows | keyof typeof accentColoredShadows | keyof typeof glowEffects | keyof typeof focusRings;
|
|
1218
|
-
/**
|
|
1219
|
-
* Semantic color token keys
|
|
1220
|
-
* Only semantic colors are allowed (no raw palette colors)
|
|
1221
|
-
* These map to CSS variables like --tm-surface-base, --tm-primary, etc.
|
|
1222
|
-
* Status colors map to --tm-status-* CSS variables
|
|
1223
|
-
*/
|
|
1224
|
-
type ColorToken = "background" | "foreground" | "card" | "card-foreground" | "popover" | "popover-foreground" | "primary" | "primary-foreground" | "secondary" | "secondary-foreground" | "accent" | "accent-foreground" | "muted" | "muted-foreground" | "destructive" | "destructive-foreground" | "border" | "input" | "ring" | "success" | "success-foreground" | "error" | "error-foreground" | "warning" | "warning-foreground" | "info" | "info-foreground";
|
|
1225
|
-
/**
|
|
1226
|
-
* Surface variant token keys
|
|
1227
|
-
*/
|
|
1228
|
-
type SurfaceToken = "flat" | "raised" | "sunken" | "outline" | "subtle";
|
|
1229
|
-
/**
|
|
1230
|
-
* Text size token keys
|
|
1231
|
-
*/
|
|
1232
|
-
type TextSizeToken = keyof typeof fontSize;
|
|
1233
|
-
/**
|
|
1234
|
-
* Text weight token keys
|
|
1235
|
-
*/
|
|
1236
|
-
type TextWeightToken = keyof typeof fontWeight;
|
|
1237
|
-
/**
|
|
1238
|
-
* Text line height token keys
|
|
1239
|
-
*/
|
|
1240
|
-
type TextLineHeightToken = keyof typeof lineHeight;
|
|
1241
|
-
/**
|
|
1242
|
-
* Text letter spacing token keys
|
|
1243
|
-
*/
|
|
1244
|
-
type TextLetterSpacingToken = "tighter" | "tight" | "normal" | "wide" | "wider" | "widest";
|
|
1245
|
-
/**
|
|
1246
|
-
* Motion duration token keys
|
|
1247
|
-
* Available: fast, normal, slow, reduced
|
|
1248
|
-
*/
|
|
1249
|
-
type MotionDurationToken = keyof typeof motionDurations;
|
|
1250
|
-
/**
|
|
1251
|
-
* Motion easing token keys
|
|
1252
|
-
* Available: soft, standard, emphasized
|
|
1253
|
-
*/
|
|
1254
|
-
type MotionEasingToken = keyof typeof motionEasings;
|
|
1255
|
-
/**
|
|
1256
|
-
* Motion transition token keys
|
|
1257
|
-
* Available: fast, normal, slow, soft, reduced
|
|
1258
|
-
*/
|
|
1259
|
-
type MotionTransitionToken = keyof typeof motionTransitions;
|
|
1260
|
-
/**
|
|
1261
|
-
* Combined motion token (duration, easing, or transition)
|
|
1262
|
-
*/
|
|
1263
|
-
type MotionToken = MotionDurationToken | MotionEasingToken | MotionTransitionToken;
|
|
1264
|
-
/**
|
|
1265
|
-
* Container max-width token keys
|
|
1266
|
-
*/
|
|
1267
|
-
type ContainerMaxWidthToken = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full";
|
|
1268
|
-
/**
|
|
1269
|
-
* Container padding token keys
|
|
1270
|
-
* Maps to container spacing tokens
|
|
1271
|
-
*/
|
|
1272
|
-
type ContainerPaddingToken = keyof typeof layoutSpacing.container;
|
|
1273
|
-
/**
|
|
1274
|
-
* Responsive spacing type
|
|
1275
|
-
*/
|
|
1276
|
-
type ResponsiveSpace = Responsive<SpacingToken>;
|
|
1277
|
-
/**
|
|
1278
|
-
* Responsive radius type
|
|
1279
|
-
*/
|
|
1280
|
-
type ResponsiveRadius = Responsive<RadiusToken>;
|
|
1281
|
-
/**
|
|
1282
|
-
* Responsive shadow type
|
|
1283
|
-
*/
|
|
1284
|
-
type ResponsiveShadow = Responsive<ShadowToken>;
|
|
1285
|
-
/**
|
|
1286
|
-
* Responsive color type
|
|
1287
|
-
*/
|
|
1288
|
-
type ResponsiveColor = Responsive<ColorToken>;
|
|
1289
|
-
/**
|
|
1290
|
-
* Responsive surface type
|
|
1291
|
-
*/
|
|
1292
|
-
type ResponsiveSurface = Responsive<SurfaceToken>;
|
|
1293
|
-
/**
|
|
1294
|
-
* Responsive text size type
|
|
1295
|
-
*/
|
|
1296
|
-
type ResponsiveTextSize = Responsive<TextSizeToken>;
|
|
1297
|
-
/**
|
|
1298
|
-
* Responsive text weight type
|
|
1299
|
-
*/
|
|
1300
|
-
type ResponsiveTextWeight = Responsive<TextWeightToken>;
|
|
1301
|
-
/**
|
|
1302
|
-
* Responsive text line height type
|
|
1303
|
-
*/
|
|
1304
|
-
type ResponsiveTextLineHeight = Responsive<TextLineHeightToken>;
|
|
1305
|
-
/**
|
|
1306
|
-
* Responsive motion type
|
|
1307
|
-
*/
|
|
1308
|
-
type ResponsiveMotion = Responsive<MotionToken>;
|
|
1309
|
-
/**
|
|
1310
|
-
* Responsive container max-width type
|
|
1311
|
-
*/
|
|
1312
|
-
type ResponsiveContainerMaxWidth = Responsive<ContainerMaxWidthToken | SpacingToken>;
|
|
1313
|
-
/**
|
|
1314
|
-
* Responsive container padding type
|
|
1315
|
-
*/
|
|
1316
|
-
type ResponsiveContainerPadding = Responsive<ContainerPaddingToken | SpacingToken>;
|
|
1317
|
-
/**
|
|
1318
|
-
* Flex basis token keys
|
|
1319
|
-
* Includes spacing tokens and semantic CSS values (auto, 0, 100%, etc.)
|
|
1320
|
-
*/
|
|
1321
|
-
type FlexBasisToken = SpacingToken | "auto" | "0" | "100%" | "fit-content" | "max-content" | "min-content";
|
|
1322
|
-
/**
|
|
1323
|
-
* Responsive flex basis type
|
|
1324
|
-
*/
|
|
1325
|
-
type ResponsiveFlexBasis = Responsive<FlexBasisToken>;
|
|
1326
|
-
/**
|
|
1327
|
-
* Aspect ratio token keys
|
|
1328
|
-
* Includes predefined aspect ratios (square, video, photo, wide) and semantic CSS values
|
|
1329
|
-
*/
|
|
1330
|
-
type AspectRatioToken = "square" | "video" | "photo" | "wide" | "auto" | "1/1" | "4/3" | "16/9" | "21/9" | "3/2" | "2/3";
|
|
1331
|
-
/**
|
|
1332
|
-
* Responsive aspect ratio type
|
|
1333
|
-
*/
|
|
1334
|
-
type ResponsiveAspectRatio = Responsive<AspectRatioToken>;
|
|
1335
|
-
/**
|
|
1336
|
-
* Animation preset token keys
|
|
1337
|
-
* Predefined animation preset names for component animations
|
|
1338
|
-
*/
|
|
1339
|
-
type AnimationPresetToken = "fadeIn" | "fadeInUp" | "fadeInDown" | "fadeInLeft" | "fadeInRight" | "slideInUp" | "slideInDown" | "slideInLeft" | "slideInRight" | "scaleIn";
|
|
1340
|
-
/**
|
|
1341
|
-
* Responsive animation preset type
|
|
1342
|
-
*/
|
|
1343
|
-
type ResponsiveAnimationPreset = Responsive<AnimationPresetToken>;
|
|
1344
|
-
/**
|
|
1345
|
-
* Delay token keys
|
|
1346
|
-
* Uses motion duration tokens for animation delays
|
|
1347
|
-
*/
|
|
1348
|
-
type DelayToken = MotionDurationToken;
|
|
1349
|
-
/**
|
|
1350
|
-
* Responsive delay type
|
|
1351
|
-
*/
|
|
1352
|
-
type ResponsiveDelay = Responsive<DelayToken>;
|
|
1353
|
-
/**
|
|
1354
|
-
* Side offset token keys
|
|
1355
|
-
* Uses spacing tokens for positioning offsets
|
|
1356
|
-
*/
|
|
1357
|
-
type SideOffsetToken = SpacingToken;
|
|
1358
|
-
/**
|
|
1359
|
-
* Responsive side offset type
|
|
1360
|
-
*/
|
|
1361
|
-
type ResponsiveSideOffset = Responsive<SideOffsetToken>;
|
|
1362
|
-
/**
|
|
1363
|
-
* Align offset token keys
|
|
1364
|
-
* Uses spacing tokens for positioning offsets
|
|
1365
|
-
*/
|
|
1366
|
-
type AlignOffsetToken = SpacingToken;
|
|
1367
|
-
/**
|
|
1368
|
-
* Responsive align offset type
|
|
1369
|
-
*/
|
|
1370
|
-
type ResponsiveAlignOffset = Responsive<AlignOffsetToken>;
|
|
1371
|
-
/**
|
|
1372
|
-
* Select size token keys
|
|
1373
|
-
*/
|
|
1374
|
-
type SelectSizeToken = keyof typeof SELECT_TOKENS.size;
|
|
1375
|
-
/**
|
|
1376
|
-
* Select variant token keys
|
|
1377
|
-
*/
|
|
1378
|
-
type SelectVariantToken = keyof typeof SELECT_TOKENS.variant;
|
|
1379
|
-
/**
|
|
1380
|
-
* Select width token keys
|
|
1381
|
-
*/
|
|
1382
|
-
type SelectWidthToken = keyof typeof SELECT_TOKENS.width;
|
|
1383
|
-
/**
|
|
1384
|
-
* Select state token keys
|
|
1385
|
-
*/
|
|
1386
|
-
type SelectStateToken = keyof typeof SELECT_TOKENS.state;
|
|
1387
|
-
/**
|
|
1388
|
-
* Responsive select size type
|
|
1389
|
-
*/
|
|
1390
|
-
type ResponsiveSelectSize = Responsive<SelectSizeToken>;
|
|
1391
|
-
/**
|
|
1392
|
-
* Responsive select width type
|
|
1393
|
-
*/
|
|
1394
|
-
type ResponsiveSelectWidth = Responsive<SelectWidthToken>;
|
|
1395
|
-
/**
|
|
1396
|
-
* Tabs size token keys (explicit union — TYPING_STANDARD RULE 1)
|
|
1397
|
-
*/
|
|
1398
|
-
type TabsSizeToken = (typeof TABS_SIZES)[number];
|
|
1399
|
-
/**
|
|
1400
|
-
* Tabs variant token keys (explicit union — TYPING_STANDARD RULE 1)
|
|
1401
|
-
*/
|
|
1402
|
-
type TabsVariantToken = (typeof TABS_VARIANTS)[number];
|
|
1403
|
-
/**
|
|
1404
|
-
* Tabs tone token keys (explicit union — TYPING_STANDARD RULE 1)
|
|
1405
|
-
*/
|
|
1406
|
-
type TabsToneToken = (typeof TABS_TONES)[number];
|
|
1407
|
-
/**
|
|
1408
|
-
* Responsive tabs size type
|
|
1409
|
-
*/
|
|
1410
|
-
type ResponsiveTabsSize = Responsive<TabsSizeToken>;
|
|
1411
|
-
/**
|
|
1412
|
-
* Modal size token keys
|
|
1413
|
-
*/
|
|
1414
|
-
type ModalSizeToken = keyof typeof MODAL_TOKENS.size;
|
|
1415
|
-
/**
|
|
1416
|
-
* Modal width token keys
|
|
1417
|
-
*/
|
|
1418
|
-
type ModalWidthToken = keyof typeof MODAL_TOKENS.width;
|
|
1419
|
-
/**
|
|
1420
|
-
* Modal height token keys
|
|
1421
|
-
*/
|
|
1422
|
-
type ModalHeightToken = keyof typeof MODAL_TOKENS.height;
|
|
1423
|
-
/**
|
|
1424
|
-
* Modal footer align token keys
|
|
1425
|
-
*/
|
|
1426
|
-
type ModalFooterAlignToken = keyof typeof MODAL_TOKENS.footer.align;
|
|
1427
|
-
/**
|
|
1428
|
-
* Responsive modal size type
|
|
1429
|
-
*/
|
|
1430
|
-
type ResponsiveModalSize = Responsive<ModalSizeToken>;
|
|
1431
|
-
/**
|
|
1432
|
-
* Responsive modal width type
|
|
1433
|
-
*/
|
|
1434
|
-
type ResponsiveModalWidth = Responsive<ModalWidthToken>;
|
|
1435
|
-
/**
|
|
1436
|
-
* Responsive modal height type
|
|
1437
|
-
*/
|
|
1438
|
-
type ResponsiveModalHeight = Responsive<ModalHeightToken>;
|
|
1439
|
-
/**
|
|
1440
|
-
* ContextMenu size token keys
|
|
1441
|
-
*/
|
|
1442
|
-
type ContextMenuSizeToken = keyof typeof CONTEXT_MENU_TOKENS.size;
|
|
1443
|
-
/**
|
|
1444
|
-
* ContextMenu width token keys
|
|
1445
|
-
*/
|
|
1446
|
-
type ContextMenuWidthToken = keyof typeof CONTEXT_MENU_TOKENS.width;
|
|
1447
|
-
/**
|
|
1448
|
-
* ContextMenu item tone token keys
|
|
1449
|
-
*/
|
|
1450
|
-
type ContextMenuItemToneToken = keyof typeof CONTEXT_MENU_TOKENS.item.tone;
|
|
1451
|
-
/**
|
|
1452
|
-
* Responsive context menu size type
|
|
1453
|
-
*/
|
|
1454
|
-
type ResponsiveContextMenuSize = Responsive<ContextMenuSizeToken>;
|
|
1455
|
-
/**
|
|
1456
|
-
* Responsive context menu width type
|
|
1457
|
-
*/
|
|
1458
|
-
type ResponsiveContextMenuWidth = Responsive<ContextMenuWidthToken>;
|
|
1459
|
-
|
|
1460
|
-
export { type SelectItemPaddingVertical as $, type MotionTransition as A, type Breakpoint as B, type ContainerMaxWidthToken as C, type MotionCombinedType as D, type MotionSlideDirection as E, motionCombined as F, motionCSSVariables as G, motionDurations as H, motionEasings as I, motionFade as J, motionReducedMotion as K, motionScale as L, type ModalFooterAlignToken as M, motionSlide as N, motionTailwindConfig as O, motionTransitionProperty as P, motionTransitions as Q, type Responsive as R, type ShadowToken as S, type TextSizeToken as T, type ResponsiveAspectRatio as U, type TabsSizeToken as V, SELECT_TOKENS as W, type SelectContentPadding as X, type SelectContentRadius as Y, type SelectItemFontSize as Z, type SelectItemPaddingHorizontal as _, type RadiusToken as a, type SelectItemRadius as a0, type SelectLabelFontSize as a1, type SelectLabelPaddingHorizontal as a2, type SelectLabelPaddingVertical as a3, type SelectSeparatorMarginHorizontal as a4, type SelectSeparatorMarginVertical as a5, type SelectTriggerFontSize as a6, type SelectTriggerHeight as a7, type SelectTriggerPaddingHorizontal as a8, type SelectTriggerPaddingVertical as a9, type SelectVariantToken as aA, type SelectWidthToken as aB, type SideOffsetToken as aC, type SpaceToken as aD, type TextLetterSpacingToken as aE, type SelectTriggerRadius as aa, type AlignOffsetToken as ab, type AnimationPresetToken as ac, type AspectRatioToken as ad, type ContainerPaddingToken as ae, type DelayToken as af, type FlexBasisToken as ag, type LayoutSpaceToken as ah, type ModalHeightToken as ai, type ModalSizeToken as aj, type ModalWidthToken as ak, type MotionEasingToken as al, type MotionToken as am, type MotionTransitionToken as an, type ResponsiveAnimationPreset as ao, type ResponsiveContainerPadding as ap, type ResponsiveMotion as aq, type ResponsiveSelectSize as ar, type ResponsiveSelectWidth as as, type ResponsiveShadow as at, type ResponsiveSurface as au, type ResponsiveTextLineHeight as av, type ResponsiveTextSize as aw, type ResponsiveTextWeight as ax, type SelectSizeToken as ay, type SelectStateToken as az, type SpacingToken as b, type ResponsiveColor as c, type ResponsiveRadius as d, type ResponsiveSpace as e, type ColorToken as f, type TextWeightToken as g, type TextLineHeightToken as h, type ResponsiveSideOffset as i, type ResponsiveAlignOffset as j, type ResponsiveModalSize as k, type ResponsiveModalWidth as l, type ResponsiveModalHeight as m, type SurfaceToken as n, type ResponsiveContainerMaxWidth as o, type ResponsiveFlexBasis as p, type ResponsiveContextMenuSize as q, type ResponsiveContextMenuWidth as r, type ContextMenuItemToneToken as s, type ResponsiveDelay as t, type MotionDurationToken as u, type ResponsiveTabsSize as v, type TabsVariantToken as w, type TabsToneToken as x, type MotionDuration as y, type MotionEasing as z };
|