@tenerife.music/ui 1.2.1 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -2
- package/dist/Link-ZWr5iFB0.d.cts +60 -0
- package/dist/Link-ZWr5iFB0.d.ts +60 -0
- package/dist/extensions/next/index.cjs +406 -0
- package/dist/extensions/next/index.d.cts +37 -0
- package/dist/extensions/next/index.d.ts +37 -0
- package/dist/extensions/next/index.mjs +381 -0
- package/dist/{index-DXmHg8ji.d.cts → index-DGtRM9Db.d.cts} +193 -901
- package/dist/{index-DXmHg8ji.d.ts → index-DGtRM9Db.d.ts} +193 -901
- package/dist/index.cjs +8170 -4531
- package/dist/index.d.cts +2219 -673
- package/dist/index.d.ts +2219 -673
- package/dist/index.mjs +7860 -4246
- package/dist/preset.cjs +129 -321
- package/dist/preset.mjs +129 -321
- package/dist/styles.css +939 -93
- package/dist/theme/index.cjs +20 -230
- package/dist/theme/index.mjs +20 -230
- package/dist/tokens/index.cjs +501 -593
- package/dist/tokens/index.d.cts +165 -2
- package/dist/tokens/index.d.ts +165 -2
- package/dist/tokens/index.mjs +489 -577
- package/package.json +22 -7
package/dist/tokens/index.cjs
CHANGED
|
@@ -414,6 +414,12 @@ var ALERT_TOKENS = {
|
|
|
414
414
|
*/
|
|
415
415
|
radius: "rounded-lg",
|
|
416
416
|
// 8px (0.5rem) - maps to borderRadius.lg
|
|
417
|
+
/**
|
|
418
|
+
* Border token
|
|
419
|
+
* Base border style
|
|
420
|
+
*/
|
|
421
|
+
border: "border",
|
|
422
|
+
// Base border
|
|
417
423
|
/**
|
|
418
424
|
* Icon size within alerts
|
|
419
425
|
*/
|
|
@@ -421,45 +427,48 @@ var ALERT_TOKENS = {
|
|
|
421
427
|
// 16px (1rem) - standard icon size
|
|
422
428
|
/**
|
|
423
429
|
* Variant-based token structure
|
|
424
|
-
* Organized by variant for
|
|
430
|
+
* Organized by variant for token-driven styling
|
|
425
431
|
*/
|
|
426
432
|
variant: {
|
|
427
433
|
default: {
|
|
428
|
-
|
|
429
|
-
|
|
434
|
+
background: "bg-muted",
|
|
435
|
+
// Muted background using CSS var
|
|
436
|
+
border: "border-border",
|
|
437
|
+
// Border using CSS var
|
|
438
|
+
text: "text-foreground"
|
|
439
|
+
// Foreground text using CSS var
|
|
430
440
|
},
|
|
431
441
|
primary: {
|
|
432
|
-
|
|
433
|
-
|
|
442
|
+
background: "bg-primary/10",
|
|
443
|
+
// Primary background with opacity
|
|
444
|
+
border: "border-primary/20",
|
|
445
|
+
// Primary border with opacity
|
|
446
|
+
text: "text-primary-foreground"
|
|
447
|
+
// Primary text using CSS var
|
|
434
448
|
},
|
|
435
449
|
secondary: {
|
|
436
|
-
|
|
437
|
-
|
|
450
|
+
background: "bg-secondary/10",
|
|
451
|
+
// Secondary background with opacity
|
|
452
|
+
border: "border-secondary/20",
|
|
453
|
+
// Secondary border with opacity
|
|
454
|
+
text: "text-secondary-foreground"
|
|
455
|
+
// Secondary text using CSS var
|
|
438
456
|
},
|
|
439
457
|
accent: {
|
|
440
|
-
|
|
441
|
-
|
|
458
|
+
background: "bg-accent/10",
|
|
459
|
+
// Accent background with opacity
|
|
460
|
+
border: "border-accent/20",
|
|
461
|
+
// Accent border with opacity
|
|
462
|
+
text: "text-accent-foreground"
|
|
463
|
+
// Accent text using CSS var
|
|
442
464
|
},
|
|
443
465
|
destructive: {
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
radius: "rounded-lg"
|
|
451
|
-
},
|
|
452
|
-
warning: {
|
|
453
|
-
padding: "p-md",
|
|
454
|
-
radius: "rounded-lg"
|
|
455
|
-
},
|
|
456
|
-
danger: {
|
|
457
|
-
padding: "p-md",
|
|
458
|
-
radius: "rounded-lg"
|
|
459
|
-
},
|
|
460
|
-
info: {
|
|
461
|
-
padding: "p-md",
|
|
462
|
-
radius: "rounded-lg"
|
|
466
|
+
background: "bg-destructive/10",
|
|
467
|
+
// Destructive background with opacity
|
|
468
|
+
border: "border-destructive/20",
|
|
469
|
+
// Destructive border with opacity
|
|
470
|
+
text: "text-destructive-foreground"
|
|
471
|
+
// Destructive text using CSS var
|
|
463
472
|
}
|
|
464
473
|
}
|
|
465
474
|
};
|
|
@@ -608,10 +617,8 @@ var BUTTON_TOKENS = {
|
|
|
608
617
|
// 32px (2rem)
|
|
609
618
|
md: "h-9",
|
|
610
619
|
// 36px (2.25rem)
|
|
611
|
-
lg: "h-10"
|
|
620
|
+
lg: "h-10"
|
|
612
621
|
// 40px (2.5rem)
|
|
613
|
-
icon: "h-9"
|
|
614
|
-
// 36px (2.25rem) - same as md
|
|
615
622
|
},
|
|
616
623
|
/**
|
|
617
624
|
* Button padding by size
|
|
@@ -667,18 +674,28 @@ var BUTTON_TOKENS = {
|
|
|
667
674
|
// 14px (0.875rem) - smaller icon for small buttons
|
|
668
675
|
md: "[&_svg]:w-4 [&_svg]:h-4",
|
|
669
676
|
// 16px (1rem) - medium icon for medium buttons
|
|
670
|
-
lg: "[&_svg]:w-5 [&_svg]:h-5"
|
|
677
|
+
lg: "[&_svg]:w-5 [&_svg]:h-5"
|
|
671
678
|
// 20px (1.25rem) - larger icon for large buttons
|
|
672
|
-
icon: "[&_svg]:w-4 [&_svg]:h-4"
|
|
673
|
-
// 16px (1rem) - medium icon for icon-only buttons
|
|
674
679
|
},
|
|
675
680
|
/**
|
|
676
681
|
* Width tokens
|
|
682
|
+
* Used for icon-only buttons (square buttons with equal width and height)
|
|
677
683
|
*/
|
|
678
684
|
width: {
|
|
679
|
-
|
|
680
|
-
//
|
|
685
|
+
sm: "w-8",
|
|
686
|
+
// 32px (2rem) - matches height.sm for square icon-only buttons
|
|
687
|
+
md: "w-9",
|
|
688
|
+
// 36px (2.25rem) - matches height.md for square icon-only buttons
|
|
689
|
+
lg: "w-10"
|
|
690
|
+
// 40px (2.5rem) - matches height.lg for square icon-only buttons
|
|
681
691
|
},
|
|
692
|
+
/**
|
|
693
|
+
* Padding token for icon-only buttons
|
|
694
|
+
* Zero padding required for square dimensions (icon-only buttons have no text, so no padding needed)
|
|
695
|
+
* Uses p-0 which is a standard Tailwind class for zero spacing (spacing[0])
|
|
696
|
+
*/
|
|
697
|
+
paddingIconOnly: "p-0",
|
|
698
|
+
// Zero padding for icon-only buttons (required for square dimensions) - standard Tailwind class
|
|
682
699
|
/**
|
|
683
700
|
* Font sizes by button size
|
|
684
701
|
* References foundation typography fontSize tokens from Typography Authority
|
|
@@ -1083,6 +1100,41 @@ var ARTIST_TOKENS = {
|
|
|
1083
1100
|
}
|
|
1084
1101
|
};
|
|
1085
1102
|
|
|
1103
|
+
// src/FOUNDATION/tokens/gradients.ts
|
|
1104
|
+
var GRADIENT_TOKENS = {
|
|
1105
|
+
/**
|
|
1106
|
+
* Brand gradient tokens
|
|
1107
|
+
* Used for brand identity elements, hero sections, and featured content
|
|
1108
|
+
*/
|
|
1109
|
+
brand: {
|
|
1110
|
+
/**
|
|
1111
|
+
* Featured brand gradient: accent-500 → primary-600
|
|
1112
|
+
* Used for featured badges and premium content indicators
|
|
1113
|
+
*/
|
|
1114
|
+
featured: "bg-gradient-to-r from-accent-500 to-primary-600"
|
|
1115
|
+
},
|
|
1116
|
+
/**
|
|
1117
|
+
* Surface gradient tokens
|
|
1118
|
+
* Used for surface elevation effects and placeholders
|
|
1119
|
+
*/
|
|
1120
|
+
surface: {
|
|
1121
|
+
/**
|
|
1122
|
+
* Muted surface gradient: muted → muted/50
|
|
1123
|
+
* Used for placeholder backgrounds and subtle surface effects
|
|
1124
|
+
*/
|
|
1125
|
+
muted: "bg-gradient-to-br from-muted to-muted/50"
|
|
1126
|
+
},
|
|
1127
|
+
/**
|
|
1128
|
+
* Overlay gradient tokens
|
|
1129
|
+
* Used for image overlays and hover effects
|
|
1130
|
+
*/
|
|
1131
|
+
overlay: {
|
|
1132
|
+
/**
|
|
1133
|
+
* Dark overlay gradient: black/60 → transparent (top)
|
|
1134
|
+
* Used for image hover states and text readability overlays
|
|
1135
|
+
*/
|
|
1136
|
+
dark: "bg-gradient-to-t from-black/60 via-transparent to-transparent"}};
|
|
1137
|
+
|
|
1086
1138
|
// src/FOUNDATION/tokens/spacing.ts
|
|
1087
1139
|
var spacing = {
|
|
1088
1140
|
// Zero spacing
|
|
@@ -1640,17 +1692,19 @@ var DOMAIN_TOKENS = {
|
|
|
1640
1692
|
/**
|
|
1641
1693
|
* Overlay gradient tokens for image overlays
|
|
1642
1694
|
* Used for hover states and text readability
|
|
1695
|
+
* References GRADIENT_TOKENS.overlay.dark
|
|
1643
1696
|
*/
|
|
1644
1697
|
overlay: {
|
|
1645
|
-
gradient:
|
|
1698
|
+
gradient: GRADIENT_TOKENS.overlay.dark
|
|
1646
1699
|
// Gradient overlay for image hover states
|
|
1647
1700
|
},
|
|
1648
1701
|
/**
|
|
1649
1702
|
* Placeholder gradient tokens for image placeholders
|
|
1650
1703
|
* Used when no image URL is provided
|
|
1704
|
+
* References GRADIENT_TOKENS.surface.muted
|
|
1651
1705
|
*/
|
|
1652
1706
|
placeholder: {
|
|
1653
|
-
gradient:
|
|
1707
|
+
gradient: GRADIENT_TOKENS.surface.muted
|
|
1654
1708
|
// Placeholder gradient background
|
|
1655
1709
|
}
|
|
1656
1710
|
},
|
|
@@ -1761,11 +1815,12 @@ var DOMAIN_TOKENS = {
|
|
|
1761
1815
|
/**
|
|
1762
1816
|
* Badge surface (background) tokens
|
|
1763
1817
|
* Maps to semantic color tokens
|
|
1818
|
+
* References GRADIENT_TOKENS.brand.featured for featured badges
|
|
1764
1819
|
*/
|
|
1765
1820
|
surface: {
|
|
1766
1821
|
default: "bg-primary",
|
|
1767
1822
|
// Default badge background - maps to semantic primary color
|
|
1768
|
-
featured:
|
|
1823
|
+
featured: GRADIENT_TOKENS.brand.featured
|
|
1769
1824
|
// Featured badge gradient
|
|
1770
1825
|
},
|
|
1771
1826
|
/**
|
|
@@ -1995,19 +2050,15 @@ var DOMAIN_TOKENS = {
|
|
|
1995
2050
|
var INPUT_TOKENS = {
|
|
1996
2051
|
/**
|
|
1997
2052
|
* Input heights by size
|
|
1998
|
-
* Supports
|
|
2053
|
+
* Supports sm, md, lg sizes (canonical interactive size scale)
|
|
1999
2054
|
*/
|
|
2000
2055
|
height: {
|
|
2001
|
-
xs: "h-7",
|
|
2002
|
-
// 28px (1.75rem)
|
|
2003
2056
|
sm: "h-8",
|
|
2004
2057
|
// 32px (2rem)
|
|
2005
2058
|
md: "h-9",
|
|
2006
2059
|
// 36px (2.25rem) - default
|
|
2007
|
-
lg: "h-10"
|
|
2060
|
+
lg: "h-10"
|
|
2008
2061
|
// 40px (2.5rem)
|
|
2009
|
-
xl: "h-11"
|
|
2010
|
-
// 44px (2.75rem)
|
|
2011
2062
|
},
|
|
2012
2063
|
/**
|
|
2013
2064
|
* Input padding by size
|
|
@@ -2015,60 +2066,44 @@ var INPUT_TOKENS = {
|
|
|
2015
2066
|
*/
|
|
2016
2067
|
padding: {
|
|
2017
2068
|
horizontal: {
|
|
2018
|
-
xs: "px-xs",
|
|
2019
|
-
// 4px (0.25rem)
|
|
2020
2069
|
sm: "px-sm",
|
|
2021
2070
|
// 8px (0.5rem)
|
|
2022
2071
|
md: "px-sm",
|
|
2023
2072
|
// 8px (0.5rem) - default
|
|
2024
|
-
lg: "px-md"
|
|
2073
|
+
lg: "px-md"
|
|
2025
2074
|
// 16px (1rem)
|
|
2026
|
-
xl: "px-lg"
|
|
2027
|
-
// 24px (1.5rem)
|
|
2028
2075
|
},
|
|
2029
2076
|
vertical: {
|
|
2030
|
-
xs: "py-xs",
|
|
2031
|
-
// 4px (0.25rem)
|
|
2032
2077
|
sm: "py-xs",
|
|
2033
2078
|
// 4px (0.25rem)
|
|
2034
2079
|
md: "py-xs",
|
|
2035
2080
|
// 4px (0.25rem) - default
|
|
2036
|
-
lg: "py-sm"
|
|
2081
|
+
lg: "py-sm"
|
|
2037
2082
|
// 8px (0.5rem)
|
|
2038
|
-
xl: "py-md"
|
|
2039
|
-
// 16px (1rem)
|
|
2040
2083
|
}
|
|
2041
2084
|
},
|
|
2042
2085
|
/**
|
|
2043
2086
|
* Border radius by size
|
|
2044
2087
|
*/
|
|
2045
2088
|
radius: {
|
|
2046
|
-
xs: "rounded-sm",
|
|
2047
|
-
// 4px (0.25rem)
|
|
2048
2089
|
sm: "rounded-md",
|
|
2049
2090
|
// 6px (0.375rem)
|
|
2050
2091
|
md: "rounded-md",
|
|
2051
2092
|
// 6px (0.375rem) - default
|
|
2052
|
-
lg: "rounded-md"
|
|
2093
|
+
lg: "rounded-md"
|
|
2053
2094
|
// 6px (0.375rem)
|
|
2054
|
-
xl: "rounded-lg"
|
|
2055
|
-
// 8px (0.5rem)
|
|
2056
2095
|
},
|
|
2057
2096
|
/**
|
|
2058
2097
|
* Font sizes by size variant
|
|
2059
2098
|
* Maps to foundation typography fontSize tokens
|
|
2060
2099
|
*/
|
|
2061
2100
|
fontSize: {
|
|
2062
|
-
xs: "text-xs",
|
|
2063
|
-
// Maps to fontSize.xs[0]
|
|
2064
2101
|
sm: "text-sm",
|
|
2065
2102
|
// Maps to fontSize.sm[0]
|
|
2066
2103
|
md: "text-base",
|
|
2067
2104
|
// Maps to fontSize.base[0] - default
|
|
2068
|
-
lg: "text-base"
|
|
2105
|
+
lg: "text-base"
|
|
2069
2106
|
// Maps to fontSize.base[0]
|
|
2070
|
-
xl: "text-lg"
|
|
2071
|
-
// Maps to fontSize.lg[0]
|
|
2072
2107
|
},
|
|
2073
2108
|
/**
|
|
2074
2109
|
* Responsive font size (md breakpoint)
|
|
@@ -2250,16 +2285,6 @@ var INPUT_TOKENS = {
|
|
|
2250
2285
|
* Organized by size for easy access
|
|
2251
2286
|
*/
|
|
2252
2287
|
size: {
|
|
2253
|
-
xs: {
|
|
2254
|
-
height: "h-7",
|
|
2255
|
-
padding: {
|
|
2256
|
-
horizontal: "px-xs",
|
|
2257
|
-
vertical: "py-xs"
|
|
2258
|
-
},
|
|
2259
|
-
radius: "rounded-sm",
|
|
2260
|
-
fontSize: "text-xs",
|
|
2261
|
-
shadow: "shadow-sm"
|
|
2262
|
-
},
|
|
2263
2288
|
sm: {
|
|
2264
2289
|
height: "h-8",
|
|
2265
2290
|
padding: {
|
|
@@ -2290,16 +2315,6 @@ var INPUT_TOKENS = {
|
|
|
2290
2315
|
radius: "rounded-md",
|
|
2291
2316
|
fontSize: "text-base",
|
|
2292
2317
|
shadow: "shadow-sm"
|
|
2293
|
-
},
|
|
2294
|
-
xl: {
|
|
2295
|
-
height: "h-11",
|
|
2296
|
-
padding: {
|
|
2297
|
-
horizontal: "px-lg",
|
|
2298
|
-
vertical: "py-md"
|
|
2299
|
-
},
|
|
2300
|
-
radius: "rounded-lg",
|
|
2301
|
-
fontSize: "text-lg",
|
|
2302
|
-
shadow: "shadow-sm"
|
|
2303
2318
|
}
|
|
2304
2319
|
}
|
|
2305
2320
|
};
|
|
@@ -2308,20 +2323,13 @@ var INPUT_TOKENS = {
|
|
|
2308
2323
|
var CHECKBOX_TOKENS = {
|
|
2309
2324
|
/**
|
|
2310
2325
|
* Checkbox sizes by size variant
|
|
2311
|
-
* Supports
|
|
2326
|
+
* Supports sm, md, lg sizes (canonical interactive scale)
|
|
2312
2327
|
* Checkboxes are typically square and smaller than input fields
|
|
2328
|
+
*
|
|
2329
|
+
* NOTE: Size scale restricted to sm|md|lg per canonical interactive size scale (FOUNDATION_LOCK.md).
|
|
2330
|
+
* xs and xl sizes removed to comply with Button-defined canonical scale.
|
|
2313
2331
|
*/
|
|
2314
2332
|
size: {
|
|
2315
|
-
xs: {
|
|
2316
|
-
width: "w-3.5",
|
|
2317
|
-
// 14px (0.875rem)
|
|
2318
|
-
height: "h-3.5",
|
|
2319
|
-
// 14px (0.875rem)
|
|
2320
|
-
radius: "rounded-sm",
|
|
2321
|
-
// 4px (0.25rem)
|
|
2322
|
-
iconSize: "size-2.5"
|
|
2323
|
-
// 10px (0.625rem)
|
|
2324
|
-
},
|
|
2325
2333
|
sm: {
|
|
2326
2334
|
width: "w-4",
|
|
2327
2335
|
// 16px (1rem)
|
|
@@ -2351,16 +2359,6 @@ var CHECKBOX_TOKENS = {
|
|
|
2351
2359
|
// 6px (0.375rem)
|
|
2352
2360
|
iconSize: "size-4"
|
|
2353
2361
|
// 16px (1rem)
|
|
2354
|
-
},
|
|
2355
|
-
xl: {
|
|
2356
|
-
width: "w-6",
|
|
2357
|
-
// 24px (1.5rem)
|
|
2358
|
-
height: "h-6",
|
|
2359
|
-
// 24px (1.5rem)
|
|
2360
|
-
radius: "rounded-md",
|
|
2361
|
-
// 6px (0.375rem)
|
|
2362
|
-
iconSize: "size-5"
|
|
2363
|
-
// 20px (1.25rem)
|
|
2364
2362
|
}
|
|
2365
2363
|
},
|
|
2366
2364
|
/**
|
|
@@ -2466,19 +2464,16 @@ var CHECKBOX_TOKENS = {
|
|
|
2466
2464
|
/**
|
|
2467
2465
|
* Icon tokens
|
|
2468
2466
|
* Size and styling for checkmark icon within checkbox
|
|
2467
|
+
* NOTE: Icon sizes restricted to sm|md|lg per canonical interactive size scale
|
|
2469
2468
|
*/
|
|
2470
2469
|
icon: {
|
|
2471
2470
|
size: {
|
|
2472
|
-
xs: "size-2.5",
|
|
2473
|
-
// 10px (0.625rem)
|
|
2474
2471
|
sm: "size-3",
|
|
2475
2472
|
// 12px (0.75rem)
|
|
2476
2473
|
md: "size-3.5",
|
|
2477
2474
|
// 14px (0.875rem) - default
|
|
2478
|
-
lg: "size-4"
|
|
2475
|
+
lg: "size-4"
|
|
2479
2476
|
// 16px (1rem)
|
|
2480
|
-
xl: "size-5"
|
|
2481
|
-
// 20px (1.25rem)
|
|
2482
2477
|
},
|
|
2483
2478
|
stroke: "stroke-2",
|
|
2484
2479
|
// 2px stroke width for checkmark
|
|
@@ -2510,9 +2505,10 @@ var CHECKBOX_TOKENS = {
|
|
|
2510
2505
|
/**
|
|
2511
2506
|
* Transition tokens
|
|
2512
2507
|
* Smooth transitions for state changes
|
|
2508
|
+
* Uses MOTION_TOKENS for canonical motion values
|
|
2513
2509
|
*/
|
|
2514
|
-
transition:
|
|
2515
|
-
// Smooth transitions
|
|
2510
|
+
transition: MOTION_TOKENS.transitionPreset.normal
|
|
2511
|
+
// Smooth transitions - Motion Authority compliant
|
|
2516
2512
|
};
|
|
2517
2513
|
|
|
2518
2514
|
// src/FOUNDATION/tokens/components/switch.ts
|
|
@@ -2758,15 +2754,15 @@ var SWITCH_TOKENS = {
|
|
|
2758
2754
|
/**
|
|
2759
2755
|
* Transition tokens
|
|
2760
2756
|
* Smooth transitions for handle animation and state changes
|
|
2761
|
-
* Uses
|
|
2757
|
+
* Uses MOTION_TOKENS for canonical motion values
|
|
2762
2758
|
*/
|
|
2763
2759
|
transition: {
|
|
2764
|
-
handle:
|
|
2765
|
-
// Handle slide animation
|
|
2766
|
-
track:
|
|
2767
|
-
// Track color transition
|
|
2768
|
-
combined:
|
|
2769
|
-
// Combined transitions
|
|
2760
|
+
handle: `${MOTION_TOKENS.transition.transform} ${MOTION_TOKENS.duration.normal} ${MOTION_TOKENS.easing["in-out"]}`,
|
|
2761
|
+
// Handle slide animation - Motion Authority compliant
|
|
2762
|
+
track: `${MOTION_TOKENS.transition.colors} ${MOTION_TOKENS.duration.normal} ${MOTION_TOKENS.easing["in-out"]}`,
|
|
2763
|
+
// Track color transition - Motion Authority compliant
|
|
2764
|
+
combined: MOTION_TOKENS.transitionPreset.normal
|
|
2765
|
+
// Combined transitions - Motion Authority compliant
|
|
2770
2766
|
},
|
|
2771
2767
|
/**
|
|
2772
2768
|
* Shadow token
|
|
@@ -2970,9 +2966,10 @@ var RADIO_TOKENS = {
|
|
|
2970
2966
|
/**
|
|
2971
2967
|
* Transition tokens
|
|
2972
2968
|
* Smooth transitions for state changes
|
|
2969
|
+
* Uses MOTION_TOKENS for canonical motion values
|
|
2973
2970
|
*/
|
|
2974
|
-
transition:
|
|
2975
|
-
// Smooth transitions
|
|
2971
|
+
transition: MOTION_TOKENS.transitionPreset.normal
|
|
2972
|
+
// Smooth transitions - Motion Authority compliant
|
|
2976
2973
|
};
|
|
2977
2974
|
|
|
2978
2975
|
// src/FOUNDATION/tokens/components/surface.ts
|
|
@@ -3007,51 +3004,53 @@ var SURFACE_TOKENS = {
|
|
|
3007
3004
|
/**
|
|
3008
3005
|
* Shadow tokens by surface variant
|
|
3009
3006
|
* Maps to foundation elevation shadow tokens
|
|
3007
|
+
* Uses canonical SurfaceVariant names
|
|
3010
3008
|
*/
|
|
3011
3009
|
shadow: {
|
|
3012
|
-
|
|
3010
|
+
default: "shadow-none",
|
|
3013
3011
|
// No shadow - maps to elevationShadows.none
|
|
3014
|
-
|
|
3012
|
+
elevated: "shadow-sm",
|
|
3015
3013
|
// Small shadow - maps to elevationShadows.sm
|
|
3016
|
-
|
|
3017
|
-
// No shadow - maps to elevationShadows.none
|
|
3018
|
-
outline: "shadow-none",
|
|
3014
|
+
outlined: "shadow-none",
|
|
3019
3015
|
// No shadow - border-focused variant
|
|
3016
|
+
filled: "shadow-none",
|
|
3017
|
+
// No shadow - maps to elevationShadows.none
|
|
3020
3018
|
subtle: "shadow-none"
|
|
3021
3019
|
// No shadow - minimal background difference
|
|
3022
3020
|
},
|
|
3023
3021
|
/**
|
|
3024
3022
|
* Variant-based token structure
|
|
3025
3023
|
* Organized by variant for easy access
|
|
3024
|
+
* Uses canonical SurfaceVariant names: default, elevated, outlined, filled, subtle
|
|
3026
3025
|
*/
|
|
3027
3026
|
variant: {
|
|
3028
|
-
|
|
3027
|
+
default: {
|
|
3029
3028
|
padding: "p-md",
|
|
3030
3029
|
radius: "rounded-md",
|
|
3031
3030
|
shadow: "shadow-none",
|
|
3032
3031
|
bg: "bg-background",
|
|
3033
3032
|
border: "border border-border"
|
|
3034
3033
|
},
|
|
3035
|
-
|
|
3034
|
+
elevated: {
|
|
3036
3035
|
padding: "p-md",
|
|
3037
3036
|
radius: "rounded-md",
|
|
3038
3037
|
shadow: "shadow-sm",
|
|
3039
3038
|
bg: "bg-card",
|
|
3040
3039
|
border: "border border-border"
|
|
3041
3040
|
},
|
|
3042
|
-
|
|
3041
|
+
outlined: {
|
|
3043
3042
|
padding: "p-md",
|
|
3044
3043
|
radius: "rounded-md",
|
|
3045
3044
|
shadow: "shadow-none",
|
|
3046
|
-
bg: "bg-
|
|
3047
|
-
border: "border border-border"
|
|
3045
|
+
bg: "bg-transparent",
|
|
3046
|
+
border: "border-2 border-border"
|
|
3048
3047
|
},
|
|
3049
|
-
|
|
3048
|
+
filled: {
|
|
3050
3049
|
padding: "p-md",
|
|
3051
3050
|
radius: "rounded-md",
|
|
3052
3051
|
shadow: "shadow-none",
|
|
3053
|
-
bg: "bg-
|
|
3054
|
-
border: "border
|
|
3052
|
+
bg: "bg-muted",
|
|
3053
|
+
border: "border border-border"
|
|
3055
3054
|
},
|
|
3056
3055
|
subtle: {
|
|
3057
3056
|
padding: "p-md",
|
|
@@ -4404,10 +4403,10 @@ var SELECT_TOKENS = {
|
|
|
4404
4403
|
// Text color using CSS var
|
|
4405
4404
|
border: "border border-[hsl(var(--border))]",
|
|
4406
4405
|
// Border color using CSS var
|
|
4407
|
-
maxHeight: "max-h-
|
|
4408
|
-
// Maximum height for scrollable content (24rem = 384px)
|
|
4409
|
-
minWidth: "min-w-
|
|
4410
|
-
// Minimum width (8rem = 128px)
|
|
4406
|
+
maxHeight: "max-h-96",
|
|
4407
|
+
// Maximum height for scrollable content (24rem = 384px) - maps to spacing[96]
|
|
4408
|
+
minWidth: "min-w-32"
|
|
4409
|
+
// Minimum width (8rem = 128px) - maps to spacing[32]
|
|
4411
4410
|
},
|
|
4412
4411
|
/**
|
|
4413
4412
|
* Select item tokens
|
|
@@ -4795,8 +4794,246 @@ var SELECT_TOKENS = {
|
|
|
4795
4794
|
}
|
|
4796
4795
|
};
|
|
4797
4796
|
|
|
4797
|
+
// src/FOUNDATION/tokens/components/simple-table.ts
|
|
4798
|
+
var SIMPLETABLE_TOKENS = {
|
|
4799
|
+
/**
|
|
4800
|
+
* Cell padding by size
|
|
4801
|
+
* Maps to semanticSpacing tokens
|
|
4802
|
+
*/
|
|
4803
|
+
padding: {
|
|
4804
|
+
cell: {
|
|
4805
|
+
sm: "p-xs",
|
|
4806
|
+
// 4px - maps to semanticSpacing.xs
|
|
4807
|
+
md: "p-sm",
|
|
4808
|
+
// 8px - maps to semanticSpacing.sm
|
|
4809
|
+
lg: "p-md"
|
|
4810
|
+
// 16px - maps to semanticSpacing.md
|
|
4811
|
+
},
|
|
4812
|
+
header: {
|
|
4813
|
+
sm: "px-xs py-xs",
|
|
4814
|
+
// 4px horizontal, 4px vertical
|
|
4815
|
+
md: "px-sm py-sm",
|
|
4816
|
+
// 8px horizontal, 8px vertical
|
|
4817
|
+
lg: "px-md py-md"
|
|
4818
|
+
// 16px horizontal, 16px vertical
|
|
4819
|
+
}
|
|
4820
|
+
},
|
|
4821
|
+
/**
|
|
4822
|
+
* Typography tokens for table headers and cells by size
|
|
4823
|
+
* Maps to fontSize and fontWeight tokens
|
|
4824
|
+
*/
|
|
4825
|
+
typography: {
|
|
4826
|
+
header: {
|
|
4827
|
+
sm: "text-xs font-medium text-muted-foreground",
|
|
4828
|
+
// Maps to fontSize.xs, fontWeight.medium
|
|
4829
|
+
md: "text-sm font-medium text-muted-foreground",
|
|
4830
|
+
// Maps to fontSize.sm, fontWeight.medium
|
|
4831
|
+
lg: "text-base font-medium text-muted-foreground"
|
|
4832
|
+
// Maps to fontSize.base, fontWeight.medium
|
|
4833
|
+
},
|
|
4834
|
+
cell: {
|
|
4835
|
+
sm: "text-xs",
|
|
4836
|
+
// Maps to fontSize.xs
|
|
4837
|
+
md: "text-sm",
|
|
4838
|
+
// Maps to fontSize.sm
|
|
4839
|
+
lg: "text-base"
|
|
4840
|
+
// Maps to fontSize.base
|
|
4841
|
+
}
|
|
4842
|
+
},
|
|
4843
|
+
/**
|
|
4844
|
+
* Layout tokens for table container and base styles
|
|
4845
|
+
*/
|
|
4846
|
+
layout: {
|
|
4847
|
+
overflow: "overflow-x-auto",
|
|
4848
|
+
// Table container overflow
|
|
4849
|
+
table: "w-full border-collapse"
|
|
4850
|
+
// Table base styles
|
|
4851
|
+
},
|
|
4852
|
+
/**
|
|
4853
|
+
* Border tokens for table
|
|
4854
|
+
*/
|
|
4855
|
+
border: {
|
|
4856
|
+
bottom: "border-b",
|
|
4857
|
+
// Border bottom for rows and headers
|
|
4858
|
+
color: "border-border"
|
|
4859
|
+
// Border color
|
|
4860
|
+
},
|
|
4861
|
+
/**
|
|
4862
|
+
* State tokens for table rows
|
|
4863
|
+
*/
|
|
4864
|
+
state: {
|
|
4865
|
+
rowHover: "hover:bg-muted/50"
|
|
4866
|
+
// Row hover background
|
|
4867
|
+
},
|
|
4868
|
+
/**
|
|
4869
|
+
* Text alignment tokens
|
|
4870
|
+
*/
|
|
4871
|
+
alignment: {
|
|
4872
|
+
left: "text-left"
|
|
4873
|
+
// Left alignment
|
|
4874
|
+
}
|
|
4875
|
+
};
|
|
4876
|
+
|
|
4877
|
+
// src/FOUNDATION/tokens/components/data-list.ts
|
|
4878
|
+
var DATA_LIST_TOKENS = {
|
|
4879
|
+
/**
|
|
4880
|
+
* Spacing tokens for DataList
|
|
4881
|
+
* Maps to semantic spacing tokens
|
|
4882
|
+
*/
|
|
4883
|
+
spacing: {
|
|
4884
|
+
gap: "gap-md",
|
|
4885
|
+
// 16px (1rem) - gap between items - maps to semanticSpacing.md
|
|
4886
|
+
padding: "p-md"
|
|
4887
|
+
// 16px (1rem) - container padding - maps to semanticSpacing.md
|
|
4888
|
+
},
|
|
4889
|
+
/**
|
|
4890
|
+
* Label width tokens (for desktop horizontal layout)
|
|
4891
|
+
* Maps to Tailwind width utilities
|
|
4892
|
+
*/
|
|
4893
|
+
labelWidth: {
|
|
4894
|
+
sm: "w-24",
|
|
4895
|
+
// 96px (6rem) - small label width
|
|
4896
|
+
md: "w-32",
|
|
4897
|
+
// 128px (8rem) - default label width
|
|
4898
|
+
lg: "w-40"
|
|
4899
|
+
// 160px (10rem) - large label width
|
|
4900
|
+
},
|
|
4901
|
+
/**
|
|
4902
|
+
* Row padding tokens
|
|
4903
|
+
* Maps to semantic spacing tokens
|
|
4904
|
+
*/
|
|
4905
|
+
rowPadding: {
|
|
4906
|
+
sm: "py-xs",
|
|
4907
|
+
// 4px (0.25rem) - maps to semanticSpacing.xs
|
|
4908
|
+
md: "py-sm",
|
|
4909
|
+
// 8px (0.5rem) - maps to semanticSpacing.sm
|
|
4910
|
+
lg: "py-md"
|
|
4911
|
+
// 16px (1rem) - maps to semanticSpacing.md
|
|
4912
|
+
},
|
|
4913
|
+
/**
|
|
4914
|
+
* Item tokens
|
|
4915
|
+
* For individual DataList item styling
|
|
4916
|
+
*/
|
|
4917
|
+
item: {
|
|
4918
|
+
/**
|
|
4919
|
+
* Border tokens for items
|
|
4920
|
+
*/
|
|
4921
|
+
border: "border-b border-border last:border-0",
|
|
4922
|
+
// Item borders
|
|
4923
|
+
/**
|
|
4924
|
+
* Responsive layout tokens
|
|
4925
|
+
*/
|
|
4926
|
+
layout: {
|
|
4927
|
+
mobile: "flex flex-col",
|
|
4928
|
+
// Mobile layout - vertical
|
|
4929
|
+
desktop: "md:flex-row md:items-center"
|
|
4930
|
+
// Desktop layout - horizontal
|
|
4931
|
+
}
|
|
4932
|
+
},
|
|
4933
|
+
/**
|
|
4934
|
+
* Label tokens
|
|
4935
|
+
* For DataList label styling
|
|
4936
|
+
*/
|
|
4937
|
+
label: {
|
|
4938
|
+
mobile: "mb-1 font-semibold text-foreground",
|
|
4939
|
+
// Mobile label styles
|
|
4940
|
+
desktop: "md:mb-0"
|
|
4941
|
+
// Desktop label margin override
|
|
4942
|
+
},
|
|
4943
|
+
/**
|
|
4944
|
+
* Value tokens
|
|
4945
|
+
* For DataList value styling
|
|
4946
|
+
*/
|
|
4947
|
+
value: {
|
|
4948
|
+
color: "text-muted-foreground",
|
|
4949
|
+
// Value text color
|
|
4950
|
+
flex: "flex-1"
|
|
4951
|
+
// Value flex grow
|
|
4952
|
+
}
|
|
4953
|
+
};
|
|
4954
|
+
|
|
4955
|
+
// src/FOUNDATION/tokens/components/list.ts
|
|
4956
|
+
var LIST_TOKENS = {
|
|
4957
|
+
/**
|
|
4958
|
+
* Spacing tokens for List container
|
|
4959
|
+
* Maps to semantic spacing tokens
|
|
4960
|
+
*/
|
|
4961
|
+
spacing: {
|
|
4962
|
+
gap: "space-y-sm"
|
|
4963
|
+
// 8px (0.5rem) - gap between list items - maps to semanticSpacing.sm
|
|
4964
|
+
},
|
|
4965
|
+
/**
|
|
4966
|
+
* List item tokens
|
|
4967
|
+
* For individual list item styling
|
|
4968
|
+
*/
|
|
4969
|
+
item: {
|
|
4970
|
+
/**
|
|
4971
|
+
* Padding tokens for item container
|
|
4972
|
+
* Maps to semantic spacing tokens
|
|
4973
|
+
*/
|
|
4974
|
+
padding: "p-md",
|
|
4975
|
+
// 16px (1rem) - item padding - maps to semanticSpacing.md
|
|
4976
|
+
/**
|
|
4977
|
+
* Border radius tokens for item container
|
|
4978
|
+
* Maps to foundation radius tokens
|
|
4979
|
+
*/
|
|
4980
|
+
radius: "rounded-lg",
|
|
4981
|
+
// 8px (0.5rem) - item border radius - maps to borderRadius.lg
|
|
4982
|
+
/**
|
|
4983
|
+
* Border token
|
|
4984
|
+
*/
|
|
4985
|
+
border: "border",
|
|
4986
|
+
// Standard border
|
|
4987
|
+
/**
|
|
4988
|
+
* Transition token
|
|
4989
|
+
*/
|
|
4990
|
+
transition: "transition-colors",
|
|
4991
|
+
// Color transitions
|
|
4992
|
+
/**
|
|
4993
|
+
* Hover state tokens
|
|
4994
|
+
*/
|
|
4995
|
+
hover: {
|
|
4996
|
+
background: "hover:bg-muted/50"
|
|
4997
|
+
// Hover background - maps to muted color with 50% opacity
|
|
4998
|
+
}
|
|
4999
|
+
},
|
|
5000
|
+
/**
|
|
5001
|
+
* Title tokens
|
|
5002
|
+
* For list item title styling
|
|
5003
|
+
*/
|
|
5004
|
+
title: {
|
|
5005
|
+
fontWeight: "font-medium",
|
|
5006
|
+
// Medium font weight
|
|
5007
|
+
color: "text-foreground"
|
|
5008
|
+
// Foreground text color
|
|
5009
|
+
},
|
|
5010
|
+
/**
|
|
5011
|
+
* Description tokens
|
|
5012
|
+
* For list item description styling
|
|
5013
|
+
*/
|
|
5014
|
+
description: {
|
|
5015
|
+
/**
|
|
5016
|
+
* Margin top token
|
|
5017
|
+
* Maps to semantic spacing tokens
|
|
5018
|
+
*/
|
|
5019
|
+
marginTop: "mt-xs",
|
|
5020
|
+
// 4px (0.25rem) - margin top - maps to semanticSpacing.xs
|
|
5021
|
+
/**
|
|
5022
|
+
* Font size token
|
|
5023
|
+
* Maps to foundation typography tokens
|
|
5024
|
+
*/
|
|
5025
|
+
fontSize: "text-sm",
|
|
5026
|
+
// Small font size - maps to fontSize.sm
|
|
5027
|
+
/**
|
|
5028
|
+
* Text color token
|
|
5029
|
+
*/
|
|
5030
|
+
color: "text-muted-foreground"
|
|
5031
|
+
// Muted foreground text color
|
|
5032
|
+
}
|
|
5033
|
+
};
|
|
5034
|
+
|
|
4798
5035
|
// src/FOUNDATION/tokens/motion/v2.ts
|
|
4799
|
-
var
|
|
5036
|
+
var motionDurations = {
|
|
4800
5037
|
fast: "150ms",
|
|
4801
5038
|
// Quick interactions
|
|
4802
5039
|
normal: "250ms",
|
|
@@ -4806,7 +5043,7 @@ var motionV2Durations = {
|
|
|
4806
5043
|
reduced: "0ms"
|
|
4807
5044
|
// For prefers-reduced-motion
|
|
4808
5045
|
};
|
|
4809
|
-
var
|
|
5046
|
+
var motionEasings = {
|
|
4810
5047
|
soft: "cubic-bezier(0.22, 1, 0.36, 1)",
|
|
4811
5048
|
// Gentle, smooth
|
|
4812
5049
|
standard: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
@@ -4814,526 +5051,201 @@ var motionV2Easings = {
|
|
|
4814
5051
|
emphasized: "cubic-bezier(0.2, 0, 0, 1)"
|
|
4815
5052
|
// Strong, decisive
|
|
4816
5053
|
};
|
|
4817
|
-
var
|
|
4818
|
-
fast: `${
|
|
4819
|
-
normal: `${
|
|
4820
|
-
slow: `${
|
|
4821
|
-
soft: `${
|
|
4822
|
-
reduced: `${
|
|
5054
|
+
var motionTransitions = {
|
|
5055
|
+
fast: `${motionDurations.fast} ${motionEasings.standard}`,
|
|
5056
|
+
normal: `${motionDurations.normal} ${motionEasings.standard}`,
|
|
5057
|
+
slow: `${motionDurations.slow} ${motionEasings.emphasized}`,
|
|
5058
|
+
soft: `${motionDurations.normal} ${motionEasings.soft}`,
|
|
5059
|
+
reduced: `${motionDurations.reduced} linear`
|
|
4823
5060
|
};
|
|
4824
|
-
var
|
|
5061
|
+
var motionFade = {
|
|
4825
5062
|
in: {
|
|
4826
|
-
from: { opacity: 0 },
|
|
4827
|
-
to: { opacity: 1 }
|
|
5063
|
+
from: { opacity: "0" },
|
|
5064
|
+
to: { opacity: "1" }
|
|
4828
5065
|
},
|
|
4829
5066
|
out: {
|
|
4830
|
-
from: { opacity: 1 },
|
|
4831
|
-
to: { opacity: 0 }
|
|
5067
|
+
from: { opacity: "1" },
|
|
5068
|
+
to: { opacity: "0" }
|
|
4832
5069
|
}
|
|
4833
5070
|
};
|
|
4834
|
-
var
|
|
5071
|
+
var motionScale = {
|
|
4835
5072
|
in: {
|
|
4836
|
-
from: { transform: "scale(0.95)", opacity: 0 },
|
|
4837
|
-
to: { transform: "scale(1)", opacity: 1 }
|
|
5073
|
+
from: { transform: "scale(0.95)", opacity: "0" },
|
|
5074
|
+
to: { transform: "scale(1)", opacity: "1" }
|
|
4838
5075
|
},
|
|
4839
5076
|
out: {
|
|
4840
|
-
from: { transform: "scale(1)", opacity: 1 },
|
|
4841
|
-
to: { transform: "scale(0.95)", opacity: 0 }
|
|
5077
|
+
from: { transform: "scale(1)", opacity: "1" },
|
|
5078
|
+
to: { transform: "scale(0.95)", opacity: "0" }
|
|
4842
5079
|
}
|
|
4843
5080
|
};
|
|
4844
|
-
var
|
|
5081
|
+
var motionSlide = {
|
|
4845
5082
|
up: {
|
|
4846
5083
|
in: {
|
|
4847
|
-
from: { transform: "translateY(100%)", opacity: 0 },
|
|
4848
|
-
to: { transform: "translateY(0)", opacity: 1 }
|
|
5084
|
+
from: { transform: "translateY(100%)", opacity: "0" },
|
|
5085
|
+
to: { transform: "translateY(0)", opacity: "1" }
|
|
4849
5086
|
},
|
|
4850
5087
|
out: {
|
|
4851
|
-
from: { transform: "translateY(0)", opacity: 1 },
|
|
4852
|
-
to: { transform: "translateY(100%)", opacity: 0 }
|
|
5088
|
+
from: { transform: "translateY(0)", opacity: "1" },
|
|
5089
|
+
to: { transform: "translateY(100%)", opacity: "0" }
|
|
4853
5090
|
}
|
|
4854
5091
|
},
|
|
4855
5092
|
down: {
|
|
4856
5093
|
in: {
|
|
4857
|
-
from: { transform: "translateY(-100%)", opacity: 0 },
|
|
4858
|
-
to: { transform: "translateY(0)", opacity: 1 }
|
|
5094
|
+
from: { transform: "translateY(-100%)", opacity: "0" },
|
|
5095
|
+
to: { transform: "translateY(0)", opacity: "1" }
|
|
4859
5096
|
},
|
|
4860
5097
|
out: {
|
|
4861
|
-
from: { transform: "translateY(0)", opacity: 1 },
|
|
4862
|
-
to: { transform: "translateY(-100%)", opacity: 0 }
|
|
5098
|
+
from: { transform: "translateY(0)", opacity: "1" },
|
|
5099
|
+
to: { transform: "translateY(-100%)", opacity: "0" }
|
|
4863
5100
|
}
|
|
4864
5101
|
},
|
|
4865
5102
|
left: {
|
|
4866
5103
|
in: {
|
|
4867
|
-
from: { transform: "translateX(100%)", opacity: 0 },
|
|
4868
|
-
to: { transform: "translateX(0)", opacity: 1 }
|
|
5104
|
+
from: { transform: "translateX(100%)", opacity: "0" },
|
|
5105
|
+
to: { transform: "translateX(0)", opacity: "1" }
|
|
4869
5106
|
},
|
|
4870
5107
|
out: {
|
|
4871
|
-
from: { transform: "translateX(0)", opacity: 1 },
|
|
4872
|
-
to: { transform: "translateX(100%)", opacity: 0 }
|
|
5108
|
+
from: { transform: "translateX(0)", opacity: "1" },
|
|
5109
|
+
to: { transform: "translateX(100%)", opacity: "0" }
|
|
4873
5110
|
}
|
|
4874
5111
|
},
|
|
4875
5112
|
right: {
|
|
4876
5113
|
in: {
|
|
4877
|
-
from: { transform: "translateX(-100%)", opacity: 0 },
|
|
4878
|
-
to: { transform: "translateX(0)", opacity: 1 }
|
|
5114
|
+
from: { transform: "translateX(-100%)", opacity: "0" },
|
|
5115
|
+
to: { transform: "translateX(0)", opacity: "1" }
|
|
4879
5116
|
},
|
|
4880
5117
|
out: {
|
|
4881
|
-
from: { transform: "translateX(0)", opacity: 1 },
|
|
4882
|
-
to: { transform: "translateX(-100%)", opacity: 0 }
|
|
5118
|
+
from: { transform: "translateX(0)", opacity: "1" },
|
|
5119
|
+
to: { transform: "translateX(-100%)", opacity: "0" }
|
|
4883
5120
|
}
|
|
4884
5121
|
}
|
|
4885
5122
|
};
|
|
4886
|
-
var
|
|
5123
|
+
var motionCombined = {
|
|
4887
5124
|
fadeScale: {
|
|
4888
5125
|
in: {
|
|
4889
|
-
from: { transform: "scale(0.95)", opacity: 0 },
|
|
4890
|
-
to: { transform: "scale(1)", opacity: 1 }
|
|
5126
|
+
from: { transform: "scale(0.95)", opacity: "0" },
|
|
5127
|
+
to: { transform: "scale(1)", opacity: "1" }
|
|
4891
5128
|
},
|
|
4892
5129
|
out: {
|
|
4893
|
-
from: { transform: "scale(1)", opacity: 1 },
|
|
4894
|
-
to: { transform: "scale(0.95)", opacity: 0 }
|
|
5130
|
+
from: { transform: "scale(1)", opacity: "1" },
|
|
5131
|
+
to: { transform: "scale(0.95)", opacity: "0" }
|
|
4895
5132
|
}
|
|
4896
5133
|
},
|
|
4897
5134
|
fadeSlideUp: {
|
|
4898
5135
|
in: {
|
|
4899
|
-
from: { transform: "translateY(100%)", opacity: 0 },
|
|
4900
|
-
to: { transform: "translateY(0)", opacity: 1 }
|
|
5136
|
+
from: { transform: "translateY(100%)", opacity: "0" },
|
|
5137
|
+
to: { transform: "translateY(0)", opacity: "1" }
|
|
4901
5138
|
},
|
|
4902
5139
|
out: {
|
|
4903
|
-
from: { transform: "translateY(0)", opacity: 1 },
|
|
4904
|
-
to: { transform: "translateY(100%)", opacity: 0 }
|
|
5140
|
+
from: { transform: "translateY(0)", opacity: "1" },
|
|
5141
|
+
to: { transform: "translateY(100%)", opacity: "0" }
|
|
4905
5142
|
}
|
|
4906
5143
|
},
|
|
4907
5144
|
fadeSlideDown: {
|
|
4908
5145
|
in: {
|
|
4909
|
-
from: { transform: "translateY(-100%)", opacity: 0 },
|
|
4910
|
-
to: { transform: "translateY(0)", opacity: 1 }
|
|
5146
|
+
from: { transform: "translateY(-100%)", opacity: "0" },
|
|
5147
|
+
to: { transform: "translateY(0)", opacity: "1" }
|
|
4911
5148
|
},
|
|
4912
5149
|
out: {
|
|
4913
|
-
from: { transform: "translateY(0)", opacity: 1 },
|
|
4914
|
-
to: { transform: "translateY(-100%)", opacity: 0 }
|
|
5150
|
+
from: { transform: "translateY(0)", opacity: "1" },
|
|
5151
|
+
to: { transform: "translateY(-100%)", opacity: "0" }
|
|
4915
5152
|
}
|
|
4916
5153
|
},
|
|
4917
5154
|
fadeSlideLeft: {
|
|
4918
5155
|
in: {
|
|
4919
|
-
from: { transform: "translateX(100%)", opacity: 0 },
|
|
4920
|
-
to: { transform: "translateX(0)", opacity: 1 }
|
|
5156
|
+
from: { transform: "translateX(100%)", opacity: "0" },
|
|
5157
|
+
to: { transform: "translateX(0)", opacity: "1" }
|
|
4921
5158
|
},
|
|
4922
5159
|
out: {
|
|
4923
|
-
from: { transform: "translateX(0)", opacity: 1 },
|
|
4924
|
-
to: { transform: "translateX(100%)", opacity: 0 }
|
|
5160
|
+
from: { transform: "translateX(0)", opacity: "1" },
|
|
5161
|
+
to: { transform: "translateX(100%)", opacity: "0" }
|
|
4925
5162
|
}
|
|
4926
5163
|
},
|
|
4927
5164
|
fadeSlideRight: {
|
|
4928
5165
|
in: {
|
|
4929
|
-
from: { transform: "translateX(-100%)", opacity: 0 },
|
|
4930
|
-
to: { transform: "translateX(0)", opacity: 1 }
|
|
5166
|
+
from: { transform: "translateX(-100%)", opacity: "0" },
|
|
5167
|
+
to: { transform: "translateX(0)", opacity: "1" }
|
|
4931
5168
|
},
|
|
4932
5169
|
out: {
|
|
4933
|
-
from: { transform: "translateX(0)", opacity: 1 },
|
|
4934
|
-
to: { transform: "translateX(-100%)", opacity: 0 }
|
|
5170
|
+
from: { transform: "translateX(0)", opacity: "1" },
|
|
5171
|
+
to: { transform: "translateX(-100%)", opacity: "0" }
|
|
4935
5172
|
}
|
|
4936
5173
|
}
|
|
4937
5174
|
};
|
|
4938
|
-
var
|
|
5175
|
+
var motionCSSVariables = {
|
|
4939
5176
|
// Durations
|
|
4940
|
-
"--motion-duration-fast":
|
|
4941
|
-
"--motion-duration-normal":
|
|
4942
|
-
"--motion-duration-slow":
|
|
4943
|
-
"--motion-duration-reduced":
|
|
5177
|
+
"--motion-duration-fast": motionDurations.fast,
|
|
5178
|
+
"--motion-duration-normal": motionDurations.normal,
|
|
5179
|
+
"--motion-duration-slow": motionDurations.slow,
|
|
5180
|
+
"--motion-duration-reduced": motionDurations.reduced,
|
|
4944
5181
|
// Easings
|
|
4945
|
-
"--motion-easing-soft":
|
|
4946
|
-
"--motion-easing-standard":
|
|
4947
|
-
"--motion-easing-emphasized":
|
|
5182
|
+
"--motion-easing-soft": motionEasings.soft,
|
|
5183
|
+
"--motion-easing-standard": motionEasings.standard,
|
|
5184
|
+
"--motion-easing-emphasized": motionEasings.emphasized,
|
|
4948
5185
|
// Transitions
|
|
4949
|
-
"--motion-transition-fast":
|
|
4950
|
-
"--motion-transition-normal":
|
|
4951
|
-
"--motion-transition-slow":
|
|
4952
|
-
"--motion-transition-soft":
|
|
4953
|
-
"--motion-transition-reduced":
|
|
5186
|
+
"--motion-transition-fast": motionTransitions.fast,
|
|
5187
|
+
"--motion-transition-normal": motionTransitions.normal,
|
|
5188
|
+
"--motion-transition-slow": motionTransitions.slow,
|
|
5189
|
+
"--motion-transition-soft": motionTransitions.soft,
|
|
5190
|
+
"--motion-transition-reduced": motionTransitions.reduced
|
|
5191
|
+
};
|
|
5192
|
+
var motionTransitionProperty = {
|
|
5193
|
+
DEFAULT: "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
|
|
5194
|
+
colors: "color, background-color, border-color, text-decoration-color, fill, stroke",
|
|
5195
|
+
opacity: "opacity",
|
|
5196
|
+
shadow: "box-shadow",
|
|
5197
|
+
transform: "transform",
|
|
5198
|
+
all: "all",
|
|
5199
|
+
none: "none"
|
|
4954
5200
|
};
|
|
4955
|
-
var
|
|
5201
|
+
var motionTailwindConfig = {
|
|
4956
5202
|
transitionDuration: {
|
|
4957
|
-
...
|
|
5203
|
+
...motionDurations
|
|
4958
5204
|
},
|
|
4959
5205
|
transitionTimingFunction: {
|
|
4960
|
-
...
|
|
5206
|
+
...motionEasings
|
|
5207
|
+
},
|
|
5208
|
+
transitionProperty: {
|
|
5209
|
+
...motionTransitionProperty
|
|
4961
5210
|
},
|
|
4962
5211
|
keyframes: {
|
|
4963
5212
|
// Fade
|
|
4964
|
-
"fade-in":
|
|
4965
|
-
"fade-out":
|
|
5213
|
+
"fade-in": motionFade.in,
|
|
5214
|
+
"fade-out": motionFade.out,
|
|
4966
5215
|
// Scale
|
|
4967
|
-
"scale-in":
|
|
4968
|
-
"scale-out":
|
|
5216
|
+
"scale-in": motionScale.in,
|
|
5217
|
+
"scale-out": motionScale.out,
|
|
4969
5218
|
// Slide
|
|
4970
|
-
"slide-up-in":
|
|
4971
|
-
"slide-up-out":
|
|
4972
|
-
"slide-down-in":
|
|
4973
|
-
"slide-down-out":
|
|
4974
|
-
"slide-left-in":
|
|
4975
|
-
"slide-left-out":
|
|
4976
|
-
"slide-right-in":
|
|
4977
|
-
"slide-right-out":
|
|
5219
|
+
"slide-up-in": motionSlide.up.in,
|
|
5220
|
+
"slide-up-out": motionSlide.up.out,
|
|
5221
|
+
"slide-down-in": motionSlide.down.in,
|
|
5222
|
+
"slide-down-out": motionSlide.down.out,
|
|
5223
|
+
"slide-left-in": motionSlide.left.in,
|
|
5224
|
+
"slide-left-out": motionSlide.left.out,
|
|
5225
|
+
"slide-right-in": motionSlide.right.in,
|
|
5226
|
+
"slide-right-out": motionSlide.right.out,
|
|
4978
5227
|
// Combined
|
|
4979
|
-
"fade-scale-in":
|
|
4980
|
-
"fade-scale-out":
|
|
4981
|
-
"fade-slide-up-in":
|
|
4982
|
-
"fade-slide-up-out":
|
|
4983
|
-
"fade-slide-down-in":
|
|
4984
|
-
"fade-slide-down-out":
|
|
4985
|
-
"fade-slide-left-in":
|
|
4986
|
-
"fade-slide-left-out":
|
|
4987
|
-
"fade-slide-right-in":
|
|
4988
|
-
"fade-slide-right-out":
|
|
5228
|
+
"fade-scale-in": motionCombined.fadeScale.in,
|
|
5229
|
+
"fade-scale-out": motionCombined.fadeScale.out,
|
|
5230
|
+
"fade-slide-up-in": motionCombined.fadeSlideUp.in,
|
|
5231
|
+
"fade-slide-up-out": motionCombined.fadeSlideUp.out,
|
|
5232
|
+
"fade-slide-down-in": motionCombined.fadeSlideDown.in,
|
|
5233
|
+
"fade-slide-down-out": motionCombined.fadeSlideDown.out,
|
|
5234
|
+
"fade-slide-left-in": motionCombined.fadeSlideLeft.in,
|
|
5235
|
+
"fade-slide-left-out": motionCombined.fadeSlideLeft.out,
|
|
5236
|
+
"fade-slide-right-in": motionCombined.fadeSlideRight.in,
|
|
5237
|
+
"fade-slide-right-out": motionCombined.fadeSlideRight.out
|
|
4989
5238
|
}
|
|
4990
5239
|
};
|
|
4991
|
-
|
|
4992
|
-
|
|
4993
|
-
var durations = {
|
|
4994
|
-
instant: "0ms",
|
|
4995
|
-
fast: "150ms",
|
|
4996
|
-
// 1.5 × base (quick interactions)
|
|
4997
|
-
normal: "300ms",
|
|
4998
|
-
// 3 × base (default)
|
|
4999
|
-
slow: "500ms",
|
|
5000
|
-
// 5 × base (emphasized)
|
|
5001
|
-
slower: "700ms",
|
|
5002
|
-
// 7 × base (very emphasized)
|
|
5003
|
-
slowest: "1000ms",
|
|
5004
|
-
// 10 × base (maximum emphasis)
|
|
5005
|
-
// Additional granular durations
|
|
5006
|
-
"75": "75ms",
|
|
5007
|
-
// Ultra-fast
|
|
5008
|
-
"100": "100ms",
|
|
5009
|
-
// Base unit
|
|
5010
|
-
"200": "200ms",
|
|
5011
|
-
// Fast-normal
|
|
5012
|
-
"250": "250ms",
|
|
5013
|
-
// Between fast and normal
|
|
5014
|
-
"400": "400ms",
|
|
5015
|
-
// Between normal and slow
|
|
5016
|
-
"600": "600ms",
|
|
5017
|
-
// Between slow and slower
|
|
5018
|
-
"800": "800ms"
|
|
5019
|
-
// Between slower and slowest
|
|
5020
|
-
};
|
|
5021
|
-
var easings = {
|
|
5022
|
-
// Linear (no easing)
|
|
5023
|
-
linear: "linear",
|
|
5024
|
-
// Ease-in (accelerate) - cubic-bezier
|
|
5025
|
-
"ease-in": "cubic-bezier(0.4, 0, 1, 1)",
|
|
5026
|
-
// Ease-out (decelerate) - recommended for most UI - cubic-bezier
|
|
5027
|
-
"ease-out": "cubic-bezier(0, 0, 0.2, 1)",
|
|
5028
|
-
// Ease-in-out (accelerate and decelerate)
|
|
5029
|
-
"ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
5030
|
-
// Standard easing functions
|
|
5031
|
-
ease: "ease",
|
|
5032
|
-
// Advanced easing functions
|
|
5033
|
-
bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
|
|
5034
|
-
elastic: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
|
|
5035
|
-
// Material Design easing
|
|
5036
|
-
"ease-out-cubic": "cubic-bezier(0.215, 0.61, 0.355, 1)",
|
|
5037
|
-
"ease-in-cubic": "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
|
|
5038
|
-
"ease-in-out-cubic": "cubic-bezier(0.645, 0.045, 0.355, 1)"
|
|
5039
|
-
};
|
|
5040
|
-
var transitions = {
|
|
5041
|
-
// Fast transitions (quick interactions)
|
|
5042
|
-
fast: `${durations.fast} ${easings["ease-out"]}`,
|
|
5043
|
-
"fast-in": `${durations.fast} ${easings["ease-in"]}`,
|
|
5044
|
-
"fast-out": `${durations.fast} ${easings["ease-out"]}`,
|
|
5045
|
-
"fast-in-out": `${durations.fast} ${easings["ease-in-out"]}`,
|
|
5046
|
-
// Normal transitions (default)
|
|
5047
|
-
normal: `${durations.normal} ${easings["ease-in-out"]}`,
|
|
5048
|
-
"normal-in": `${durations.normal} ${easings["ease-in"]}`,
|
|
5049
|
-
"normal-out": `${durations.normal} ${easings["ease-out"]}`,
|
|
5050
|
-
"normal-in-out": `${durations.normal} ${easings["ease-in-out"]}`,
|
|
5051
|
-
// Slow transitions (emphasized)
|
|
5052
|
-
slow: `${durations.slow} ${easings["ease-in-out"]}`,
|
|
5053
|
-
"slow-in": `${durations.slow} ${easings["ease-in"]}`,
|
|
5054
|
-
"slow-out": `${durations.slow} ${easings["ease-out"]}`,
|
|
5055
|
-
"slow-in-out": `${durations.slow} ${easings["ease-in-out"]}`,
|
|
5056
|
-
// Special transitions
|
|
5057
|
-
bounce: `${durations.normal} ${easings.bounce}`,
|
|
5058
|
-
elastic: `${durations.slow} ${easings.elastic}`,
|
|
5059
|
-
// Default (normal)
|
|
5060
|
-
DEFAULT: `${durations.normal} ${easings["ease-in-out"]}`
|
|
5061
|
-
};
|
|
5062
|
-
var keyframes = {
|
|
5063
|
-
// Fade animations
|
|
5064
|
-
fadeIn: {
|
|
5065
|
-
from: { opacity: "0" },
|
|
5066
|
-
to: { opacity: "1" }
|
|
5067
|
-
},
|
|
5068
|
-
fadeOut: {
|
|
5069
|
-
from: { opacity: "1" },
|
|
5070
|
-
to: { opacity: "0" }
|
|
5071
|
-
},
|
|
5072
|
-
// Slide animations
|
|
5073
|
-
slideInUp: {
|
|
5074
|
-
from: { transform: "translateY(100%)", opacity: "0" },
|
|
5075
|
-
to: { transform: "translateY(0)", opacity: "1" }
|
|
5076
|
-
},
|
|
5077
|
-
slideInDown: {
|
|
5078
|
-
from: { transform: "translateY(-100%)", opacity: "0" },
|
|
5079
|
-
to: { transform: "translateY(0)", opacity: "1" }
|
|
5080
|
-
},
|
|
5081
|
-
slideInLeft: {
|
|
5082
|
-
from: { transform: "translateX(-100%)", opacity: "0" },
|
|
5083
|
-
to: { transform: "translateX(0)", opacity: "1" }
|
|
5084
|
-
},
|
|
5085
|
-
slideInRight: {
|
|
5086
|
-
from: { transform: "translateX(100%)", opacity: "0" },
|
|
5087
|
-
to: { transform: "translateX(0)", opacity: "1" }
|
|
5088
|
-
},
|
|
5089
|
-
slideOutUp: {
|
|
5090
|
-
from: { transform: "translateY(0)", opacity: "1" },
|
|
5091
|
-
to: { transform: "translateY(-100%)", opacity: "0" }
|
|
5092
|
-
},
|
|
5093
|
-
slideOutDown: {
|
|
5094
|
-
from: { transform: "translateY(0)", opacity: "1" },
|
|
5095
|
-
to: { transform: "translateY(100%)", opacity: "0" }
|
|
5096
|
-
},
|
|
5097
|
-
slideOutLeft: {
|
|
5098
|
-
from: { transform: "translateX(0)", opacity: "1" },
|
|
5099
|
-
to: { transform: "translateX(-100%)", opacity: "0" }
|
|
5100
|
-
},
|
|
5101
|
-
slideOutRight: {
|
|
5102
|
-
from: { transform: "translateX(0)", opacity: "1" },
|
|
5103
|
-
to: { transform: "translateX(100%)", opacity: "0" }
|
|
5104
|
-
},
|
|
5105
|
-
// Scale animations
|
|
5106
|
-
scaleIn: {
|
|
5107
|
-
from: { transform: "scale(0.95)", opacity: "0" },
|
|
5108
|
-
to: { transform: "scale(1)", opacity: "1" }
|
|
5109
|
-
},
|
|
5110
|
-
scaleOut: {
|
|
5111
|
-
from: { transform: "scale(1)", opacity: "1" },
|
|
5112
|
-
to: { transform: "scale(0.95)", opacity: "0" }
|
|
5113
|
-
},
|
|
5114
|
-
scaleUp: {
|
|
5115
|
-
from: { transform: "scale(1)" },
|
|
5116
|
-
to: { transform: "scale(1.05)" }
|
|
5117
|
-
},
|
|
5118
|
-
scaleDown: {
|
|
5119
|
-
from: { transform: "scale(1.05)" },
|
|
5120
|
-
to: { transform: "scale(1)" }
|
|
5121
|
-
},
|
|
5122
|
-
// Rotation animations
|
|
5123
|
-
spin: {
|
|
5124
|
-
from: { transform: "rotate(0deg)" },
|
|
5125
|
-
to: { transform: "rotate(360deg)" }
|
|
5126
|
-
},
|
|
5127
|
-
spinReverse: {
|
|
5128
|
-
from: { transform: "rotate(360deg)" },
|
|
5129
|
-
to: { transform: "rotate(0deg)" }
|
|
5130
|
-
},
|
|
5131
|
-
// Pulse and bounce
|
|
5132
|
-
pulse: {
|
|
5133
|
-
"0%, 100%": { opacity: "1" },
|
|
5134
|
-
"50%": { opacity: "0.5" }
|
|
5135
|
-
},
|
|
5136
|
-
bounce: {
|
|
5137
|
-
"0%, 100%": {
|
|
5138
|
-
transform: "translateY(-25%)",
|
|
5139
|
-
animationTimingFunction: "cubic-bezier(0.8, 0, 1, 1)"
|
|
5140
|
-
},
|
|
5141
|
-
"50%": {
|
|
5142
|
-
transform: "translateY(0)",
|
|
5143
|
-
animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)"
|
|
5144
|
-
}
|
|
5145
|
-
},
|
|
5146
|
-
// Shake animation
|
|
5147
|
-
shake: {
|
|
5148
|
-
"0%, 100%": { transform: "translateX(0)" },
|
|
5149
|
-
"10%, 30%, 50%, 70%, 90%": { transform: "translateX(-4px)" },
|
|
5150
|
-
"20%, 40%, 60%, 80%": { transform: "translateX(4px)" }
|
|
5151
|
-
},
|
|
5152
|
-
// Ping animation
|
|
5153
|
-
ping: {
|
|
5154
|
-
"75%, 100%": {
|
|
5155
|
-
transform: "scale(2)",
|
|
5156
|
-
opacity: "0"
|
|
5157
|
-
}
|
|
5158
|
-
},
|
|
5159
|
-
// Accordion animations (for Radix UI)
|
|
5160
|
-
"accordion-down": {
|
|
5161
|
-
from: { height: "0" },
|
|
5162
|
-
to: { height: "var(--radix-accordion-content-height)" }
|
|
5163
|
-
},
|
|
5164
|
-
"accordion-up": {
|
|
5165
|
-
from: { height: "var(--radix-accordion-content-height)" },
|
|
5166
|
-
to: { height: "0" }
|
|
5167
|
-
}
|
|
5168
|
-
};
|
|
5169
|
-
var animations = {
|
|
5170
|
-
// Fade animations
|
|
5171
|
-
fadeIn: `fadeIn ${durations.normal} ${easings["ease-out"]}`,
|
|
5172
|
-
fadeOut: `fadeOut ${durations.fast} ${easings["ease-in"]}`,
|
|
5173
|
-
// Slide animations
|
|
5174
|
-
slideInUp: `slideInUp ${durations.normal} ${easings["ease-out"]}`,
|
|
5175
|
-
slideInDown: `slideInDown ${durations.normal} ${easings["ease-out"]}`,
|
|
5176
|
-
slideInLeft: `slideInLeft ${durations.normal} ${easings["ease-out"]}`,
|
|
5177
|
-
slideInRight: `slideInRight ${durations.normal} ${easings["ease-out"]}`,
|
|
5178
|
-
slideOutUp: `slideOutUp ${durations.fast} ${easings["ease-in"]}`,
|
|
5179
|
-
slideOutDown: `slideOutDown ${durations.fast} ${easings["ease-in"]}`,
|
|
5180
|
-
slideOutLeft: `slideOutLeft ${durations.fast} ${easings["ease-in"]}`,
|
|
5181
|
-
slideOutRight: `slideOutRight ${durations.fast} ${easings["ease-in"]}`,
|
|
5182
|
-
// Scale animations
|
|
5183
|
-
scaleIn: `scaleIn ${durations.normal} ${easings["ease-out"]}`,
|
|
5184
|
-
scaleOut: `scaleOut ${durations.fast} ${easings["ease-in"]}`,
|
|
5185
|
-
// Continuous animations
|
|
5186
|
-
spin: `spin 1s ${easings.linear} infinite`,
|
|
5187
|
-
pulse: `pulse 2s ${easings["ease-in-out"]} infinite`,
|
|
5188
|
-
bounce: `bounce 1s ${easings.linear} infinite`,
|
|
5189
|
-
ping: `ping 1s ${easings["ease-out"]} cubic-bezier(0, 0, 0.2, 1) infinite`,
|
|
5190
|
-
shake: `shake 0.5s ${easings["ease-in-out"]}`,
|
|
5191
|
-
// Accordion animations
|
|
5192
|
-
"accordion-down": `accordion-down ${durations.normal} ${easings["ease-out"]}`,
|
|
5193
|
-
"accordion-up": `accordion-up ${durations.normal} ${easings["ease-out"]}`
|
|
5194
|
-
};
|
|
5195
|
-
var springs = {
|
|
5196
|
-
// Gentle spring (subtle, smooth)
|
|
5197
|
-
gentle: {
|
|
5198
|
-
type: "spring",
|
|
5199
|
-
stiffness: 120,
|
|
5200
|
-
damping: 14,
|
|
5201
|
-
mass: 1
|
|
5202
|
-
},
|
|
5203
|
-
// Default spring (balanced)
|
|
5204
|
-
default: {
|
|
5205
|
-
type: "spring",
|
|
5206
|
-
stiffness: 300,
|
|
5207
|
-
damping: 30,
|
|
5208
|
-
mass: 1
|
|
5209
|
-
},
|
|
5210
|
-
// Wobbly spring (bouncy, playful)
|
|
5211
|
-
wobbly: {
|
|
5212
|
-
type: "spring",
|
|
5213
|
-
stiffness: 180,
|
|
5214
|
-
damping: 12,
|
|
5215
|
-
mass: 1
|
|
5216
|
-
},
|
|
5217
|
-
// Stiff spring (quick, precise)
|
|
5218
|
-
stiff: {
|
|
5219
|
-
type: "spring",
|
|
5220
|
-
stiffness: 400,
|
|
5221
|
-
damping: 30,
|
|
5222
|
-
mass: 1
|
|
5223
|
-
},
|
|
5224
|
-
// Slow spring (smooth, deliberate)
|
|
5225
|
-
slow: {
|
|
5226
|
-
type: "spring",
|
|
5227
|
-
stiffness: 200,
|
|
5228
|
-
damping: 25,
|
|
5229
|
-
mass: 1
|
|
5230
|
-
},
|
|
5231
|
-
// Bouncy spring (energetic, fun)
|
|
5232
|
-
bouncy: {
|
|
5233
|
-
type: "spring",
|
|
5234
|
-
stiffness: 400,
|
|
5235
|
-
damping: 10,
|
|
5236
|
-
mass: 1
|
|
5237
|
-
},
|
|
5238
|
-
// No bounce (damped, controlled)
|
|
5239
|
-
noBounce: {
|
|
5240
|
-
type: "spring",
|
|
5241
|
-
stiffness: 300,
|
|
5242
|
-
damping: 35,
|
|
5243
|
-
mass: 1
|
|
5244
|
-
}
|
|
5245
|
-
};
|
|
5246
|
-
var reducedMotion = {
|
|
5247
|
-
// Reduced motion duration (instant or minimal)
|
|
5240
|
+
var motionReducedMotion = {
|
|
5241
|
+
/** Reduced motion duration (instant, no animation) */
|
|
5248
5242
|
duration: "0ms",
|
|
5249
|
-
|
|
5243
|
+
/** Reduced motion easing (linear for instant) */
|
|
5250
5244
|
easing: "linear",
|
|
5251
|
-
|
|
5245
|
+
/** Reduced motion transition (instant) */
|
|
5252
5246
|
transition: "0ms linear",
|
|
5253
|
-
|
|
5254
|
-
mediaQuery: "@media (prefers-reduced-motion: reduce)"
|
|
5255
|
-
// Utility class to disable animations
|
|
5256
|
-
disableAnimations: "animation: none !important; transition: none !important;",
|
|
5257
|
-
// Reduced motion spring (instant, no animation)
|
|
5258
|
-
spring: {
|
|
5259
|
-
type: "spring",
|
|
5260
|
-
stiffness: 1e3,
|
|
5261
|
-
damping: 100,
|
|
5262
|
-
mass: 1
|
|
5263
|
-
}
|
|
5264
|
-
};
|
|
5265
|
-
var motionCSSVariables = {
|
|
5266
|
-
// Durations
|
|
5267
|
-
"--duration-instant": durations.instant,
|
|
5268
|
-
"--duration-fast": durations.fast,
|
|
5269
|
-
"--duration-normal": durations.normal,
|
|
5270
|
-
"--duration-slow": durations.slow,
|
|
5271
|
-
"--duration-slower": durations.slower,
|
|
5272
|
-
"--duration-slowest": durations.slowest,
|
|
5273
|
-
// Additional granular durations
|
|
5274
|
-
"--duration-75": durations["75"],
|
|
5275
|
-
"--duration-100": durations["100"],
|
|
5276
|
-
"--duration-200": durations["200"],
|
|
5277
|
-
"--duration-250": durations["250"],
|
|
5278
|
-
"--duration-400": durations["400"],
|
|
5279
|
-
"--duration-600": durations["600"],
|
|
5280
|
-
"--duration-800": durations["800"],
|
|
5281
|
-
// Easings
|
|
5282
|
-
"--ease-linear": easings.linear,
|
|
5283
|
-
"--ease-in": easings["ease-in"],
|
|
5284
|
-
"--ease-out": easings["ease-out"],
|
|
5285
|
-
"--ease-in-out": easings["ease-in-out"],
|
|
5286
|
-
"--ease-bounce": easings.bounce,
|
|
5287
|
-
"--ease-elastic": easings.elastic,
|
|
5288
|
-
"--ease-out-cubic": easings["ease-out-cubic"],
|
|
5289
|
-
"--ease-in-cubic": easings["ease-in-cubic"],
|
|
5290
|
-
"--ease-in-out-cubic": easings["ease-in-out-cubic"],
|
|
5291
|
-
// Transitions
|
|
5292
|
-
"--transition-fast": transitions.fast,
|
|
5293
|
-
"--transition-normal": transitions.normal,
|
|
5294
|
-
"--transition-slow": transitions.slow,
|
|
5295
|
-
"--transition-default": transitions.DEFAULT,
|
|
5296
|
-
"--transition-fast-in": transitions["fast-in"],
|
|
5297
|
-
"--transition-fast-out": transitions["fast-out"],
|
|
5298
|
-
"--transition-fast-in-out": transitions["fast-in-out"],
|
|
5299
|
-
"--transition-normal-in": transitions["normal-in"],
|
|
5300
|
-
"--transition-normal-out": transitions["normal-out"],
|
|
5301
|
-
"--transition-normal-in-out": transitions["normal-in-out"],
|
|
5302
|
-
"--transition-slow-in": transitions["slow-in"],
|
|
5303
|
-
"--transition-slow-out": transitions["slow-out"],
|
|
5304
|
-
"--transition-slow-in-out": transitions["slow-in-out"],
|
|
5305
|
-
"--transition-bounce": transitions.bounce,
|
|
5306
|
-
"--transition-elastic": transitions.elastic
|
|
5307
|
-
};
|
|
5308
|
-
var tailwindMotionConfig = {
|
|
5309
|
-
transitionDuration: {
|
|
5310
|
-
...durations
|
|
5311
|
-
},
|
|
5312
|
-
transitionTimingFunction: {
|
|
5313
|
-
...easings
|
|
5314
|
-
},
|
|
5315
|
-
transitionProperty: {
|
|
5316
|
-
DEFAULT: "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
|
|
5317
|
-
colors: "color, background-color, border-color, text-decoration-color, fill, stroke",
|
|
5318
|
-
opacity: "opacity",
|
|
5319
|
-
shadow: "box-shadow",
|
|
5320
|
-
transform: "transform",
|
|
5321
|
-
all: "all",
|
|
5322
|
-
none: "none"
|
|
5323
|
-
},
|
|
5324
|
-
keyframes: {
|
|
5325
|
-
...keyframes
|
|
5326
|
-
},
|
|
5327
|
-
animation: {
|
|
5328
|
-
...animations,
|
|
5329
|
-
// Additional animation utilities
|
|
5330
|
-
none: "none",
|
|
5331
|
-
spin: animations.spin,
|
|
5332
|
-
pulse: animations.pulse,
|
|
5333
|
-
bounce: animations.bounce,
|
|
5334
|
-
ping: animations.ping,
|
|
5335
|
-
shake: animations.shake
|
|
5336
|
-
}
|
|
5247
|
+
/** CSS media query for reduced motion */
|
|
5248
|
+
mediaQuery: "@media (prefers-reduced-motion: reduce)"
|
|
5337
5249
|
};
|
|
5338
5250
|
|
|
5339
5251
|
// src/FOUNDATION/tokens/radius.ts
|
|
@@ -6118,10 +6030,12 @@ exports.ARTIST_TOKENS = ARTIST_TOKENS;
|
|
|
6118
6030
|
exports.BUTTON_TOKENS = BUTTON_TOKENS;
|
|
6119
6031
|
exports.CARD_TOKENS = CARD_TOKENS;
|
|
6120
6032
|
exports.CHECKBOX_TOKENS = CHECKBOX_TOKENS;
|
|
6033
|
+
exports.DATA_LIST_TOKENS = DATA_LIST_TOKENS;
|
|
6121
6034
|
exports.DATA_TOKENS = DATA_TOKENS;
|
|
6122
6035
|
exports.DOMAIN_TOKENS = DOMAIN_TOKENS;
|
|
6123
6036
|
exports.ICON_TOKENS = ICON_TOKENS;
|
|
6124
6037
|
exports.INPUT_TOKENS = INPUT_TOKENS;
|
|
6038
|
+
exports.LIST_TOKENS = LIST_TOKENS;
|
|
6125
6039
|
exports.MENU_TOKENS = MENU_TOKENS;
|
|
6126
6040
|
exports.MOTION_TOKENS = MOTION_TOKENS;
|
|
6127
6041
|
exports.NAVIGATION_TOKENS = NAVIGATION_TOKENS;
|
|
@@ -6131,6 +6045,7 @@ exports.POPOVER_TOKENS = POPOVER_TOKENS;
|
|
|
6131
6045
|
exports.RADIO_TOKENS = RADIO_TOKENS;
|
|
6132
6046
|
exports.SECTION_TOKENS = SECTION_TOKENS;
|
|
6133
6047
|
exports.SELECT_TOKENS = SELECT_TOKENS;
|
|
6048
|
+
exports.SIMPLETABLE_TOKENS = SIMPLETABLE_TOKENS;
|
|
6134
6049
|
exports.SURFACE_TOKENS = SURFACE_TOKENS;
|
|
6135
6050
|
exports.SWITCH_TOKENS = SWITCH_TOKENS;
|
|
6136
6051
|
exports.TEXT_TOKENS = TEXT_TOKENS;
|
|
@@ -6141,7 +6056,6 @@ exports.accentColoredShadows = accentColoredShadows;
|
|
|
6141
6056
|
exports.accentColors = accentColors;
|
|
6142
6057
|
exports.allCSSVariables = allCSSVariables;
|
|
6143
6058
|
exports.allCSSVariablesCSS = allCSSVariablesCSS;
|
|
6144
|
-
exports.animations = animations;
|
|
6145
6059
|
exports.baseColors = baseColors;
|
|
6146
6060
|
exports.borderRadius = borderRadius;
|
|
6147
6061
|
exports.chartColors = chartColors;
|
|
@@ -6149,8 +6063,6 @@ exports.colorCSSVariables = colorCSSVariables;
|
|
|
6149
6063
|
exports.componentRadius = componentRadius;
|
|
6150
6064
|
exports.componentShadowMapping = componentShadowMapping;
|
|
6151
6065
|
exports.cssVariableColorTokens = cssVariableColorTokens;
|
|
6152
|
-
exports.durations = durations;
|
|
6153
|
-
exports.easings = easings;
|
|
6154
6066
|
exports.elevationShadows = elevationShadows;
|
|
6155
6067
|
exports.focusRings = focusRings;
|
|
6156
6068
|
exports.fontFamily = fontFamily;
|
|
@@ -6159,24 +6071,23 @@ exports.fontSizeWithMd = fontSizeWithMd;
|
|
|
6159
6071
|
exports.fontWeight = fontWeight;
|
|
6160
6072
|
exports.generateCSSVariablesCSS = generateCSSVariablesCSS;
|
|
6161
6073
|
exports.glowEffects = glowEffects;
|
|
6162
|
-
exports.keyframes = keyframes;
|
|
6163
6074
|
exports.layoutSpacing = layoutSpacing;
|
|
6164
6075
|
exports.letterSpacing = letterSpacing;
|
|
6165
6076
|
exports.lineHeight = lineHeight;
|
|
6166
6077
|
exports.motionCSSVariables = motionCSSVariables;
|
|
6167
|
-
exports.
|
|
6168
|
-
exports.
|
|
6169
|
-
exports.
|
|
6170
|
-
exports.
|
|
6171
|
-
exports.
|
|
6172
|
-
exports.
|
|
6173
|
-
exports.
|
|
6174
|
-
exports.
|
|
6175
|
-
exports.
|
|
6078
|
+
exports.motionCombined = motionCombined;
|
|
6079
|
+
exports.motionDurations = motionDurations;
|
|
6080
|
+
exports.motionEasings = motionEasings;
|
|
6081
|
+
exports.motionFade = motionFade;
|
|
6082
|
+
exports.motionReducedMotion = motionReducedMotion;
|
|
6083
|
+
exports.motionScale = motionScale;
|
|
6084
|
+
exports.motionSlide = motionSlide;
|
|
6085
|
+
exports.motionTailwindConfig = motionTailwindConfig;
|
|
6086
|
+
exports.motionTransitionProperty = motionTransitionProperty;
|
|
6087
|
+
exports.motionTransitions = motionTransitions;
|
|
6176
6088
|
exports.primaryColoredShadows = primaryColoredShadows;
|
|
6177
6089
|
exports.primaryColors = primaryColors;
|
|
6178
6090
|
exports.radiusCSSVariables = radiusCSSVariables;
|
|
6179
|
-
exports.reducedMotion = reducedMotion;
|
|
6180
6091
|
exports.secondaryColors = secondaryColors;
|
|
6181
6092
|
exports.semanticColors = semanticColors;
|
|
6182
6093
|
exports.semanticSpacing = semanticSpacing;
|
|
@@ -6185,9 +6096,7 @@ exports.shadowCSSVariables = shadowCSSVariables;
|
|
|
6185
6096
|
exports.shadowOpacity = shadowOpacity;
|
|
6186
6097
|
exports.spacing = spacing;
|
|
6187
6098
|
exports.spacingCSSVariables = spacingCSSVariables;
|
|
6188
|
-
exports.springs = springs;
|
|
6189
6099
|
exports.surfaceColors = surfaceColors;
|
|
6190
|
-
exports.tailwindMotionConfig = tailwindMotionConfig;
|
|
6191
6100
|
exports.tailwindRadiusConfig = tailwindRadiusConfig;
|
|
6192
6101
|
exports.tailwindShadowConfig = tailwindShadowConfig;
|
|
6193
6102
|
exports.tailwindSpacingConfig = tailwindSpacingConfig;
|
|
@@ -6196,5 +6105,4 @@ exports.tailwindTypographyConfig = tailwindTypographyConfig;
|
|
|
6196
6105
|
exports.textColors = textColors;
|
|
6197
6106
|
exports.textStyles = textStyles;
|
|
6198
6107
|
exports.tokenSystemSummary = tokenSystemSummary;
|
|
6199
|
-
exports.transitions = transitions;
|
|
6200
6108
|
exports.typographyCSSVariables = typographyCSSVariables;
|