@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.
@@ -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.cjs';
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 };