@tenerife.music/ui 1.2.1 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +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 +3376 -2793
- package/dist/index.d.cts +1670 -722
- package/dist/index.d.ts +1670 -722
- package/dist/index.mjs +3336 -2765
- package/dist/preset.cjs +129 -321
- package/dist/preset.mjs +129 -321
- package/dist/styles.css +417 -101
- package/dist/theme/index.cjs +20 -230
- package/dist/theme/index.mjs +20 -230
- package/dist/tokens/index.cjs +502 -593
- package/dist/tokens/index.d.cts +165 -2
- package/dist/tokens/index.d.ts +165 -2
- package/dist/tokens/index.mjs +490 -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,42 @@ 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
|
|
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
|
+
}};
|
|
1138
|
+
|
|
1086
1139
|
// src/FOUNDATION/tokens/spacing.ts
|
|
1087
1140
|
var spacing = {
|
|
1088
1141
|
// Zero spacing
|
|
@@ -1640,17 +1693,19 @@ var DOMAIN_TOKENS = {
|
|
|
1640
1693
|
/**
|
|
1641
1694
|
* Overlay gradient tokens for image overlays
|
|
1642
1695
|
* Used for hover states and text readability
|
|
1696
|
+
* References GRADIENT_TOKENS.overlay.dark
|
|
1643
1697
|
*/
|
|
1644
1698
|
overlay: {
|
|
1645
|
-
gradient:
|
|
1699
|
+
gradient: GRADIENT_TOKENS.overlay.dark
|
|
1646
1700
|
// Gradient overlay for image hover states
|
|
1647
1701
|
},
|
|
1648
1702
|
/**
|
|
1649
1703
|
* Placeholder gradient tokens for image placeholders
|
|
1650
1704
|
* Used when no image URL is provided
|
|
1705
|
+
* References GRADIENT_TOKENS.surface.muted
|
|
1651
1706
|
*/
|
|
1652
1707
|
placeholder: {
|
|
1653
|
-
gradient:
|
|
1708
|
+
gradient: GRADIENT_TOKENS.surface.muted
|
|
1654
1709
|
// Placeholder gradient background
|
|
1655
1710
|
}
|
|
1656
1711
|
},
|
|
@@ -1761,11 +1816,12 @@ var DOMAIN_TOKENS = {
|
|
|
1761
1816
|
/**
|
|
1762
1817
|
* Badge surface (background) tokens
|
|
1763
1818
|
* Maps to semantic color tokens
|
|
1819
|
+
* References GRADIENT_TOKENS.brand.featured for featured badges
|
|
1764
1820
|
*/
|
|
1765
1821
|
surface: {
|
|
1766
1822
|
default: "bg-primary",
|
|
1767
1823
|
// Default badge background - maps to semantic primary color
|
|
1768
|
-
featured:
|
|
1824
|
+
featured: GRADIENT_TOKENS.brand.featured
|
|
1769
1825
|
// Featured badge gradient
|
|
1770
1826
|
},
|
|
1771
1827
|
/**
|
|
@@ -1995,19 +2051,15 @@ var DOMAIN_TOKENS = {
|
|
|
1995
2051
|
var INPUT_TOKENS = {
|
|
1996
2052
|
/**
|
|
1997
2053
|
* Input heights by size
|
|
1998
|
-
* Supports
|
|
2054
|
+
* Supports sm, md, lg sizes (canonical interactive size scale)
|
|
1999
2055
|
*/
|
|
2000
2056
|
height: {
|
|
2001
|
-
xs: "h-7",
|
|
2002
|
-
// 28px (1.75rem)
|
|
2003
2057
|
sm: "h-8",
|
|
2004
2058
|
// 32px (2rem)
|
|
2005
2059
|
md: "h-9",
|
|
2006
2060
|
// 36px (2.25rem) - default
|
|
2007
|
-
lg: "h-10"
|
|
2061
|
+
lg: "h-10"
|
|
2008
2062
|
// 40px (2.5rem)
|
|
2009
|
-
xl: "h-11"
|
|
2010
|
-
// 44px (2.75rem)
|
|
2011
2063
|
},
|
|
2012
2064
|
/**
|
|
2013
2065
|
* Input padding by size
|
|
@@ -2015,60 +2067,44 @@ var INPUT_TOKENS = {
|
|
|
2015
2067
|
*/
|
|
2016
2068
|
padding: {
|
|
2017
2069
|
horizontal: {
|
|
2018
|
-
xs: "px-xs",
|
|
2019
|
-
// 4px (0.25rem)
|
|
2020
2070
|
sm: "px-sm",
|
|
2021
2071
|
// 8px (0.5rem)
|
|
2022
2072
|
md: "px-sm",
|
|
2023
2073
|
// 8px (0.5rem) - default
|
|
2024
|
-
lg: "px-md"
|
|
2074
|
+
lg: "px-md"
|
|
2025
2075
|
// 16px (1rem)
|
|
2026
|
-
xl: "px-lg"
|
|
2027
|
-
// 24px (1.5rem)
|
|
2028
2076
|
},
|
|
2029
2077
|
vertical: {
|
|
2030
|
-
xs: "py-xs",
|
|
2031
|
-
// 4px (0.25rem)
|
|
2032
2078
|
sm: "py-xs",
|
|
2033
2079
|
// 4px (0.25rem)
|
|
2034
2080
|
md: "py-xs",
|
|
2035
2081
|
// 4px (0.25rem) - default
|
|
2036
|
-
lg: "py-sm"
|
|
2082
|
+
lg: "py-sm"
|
|
2037
2083
|
// 8px (0.5rem)
|
|
2038
|
-
xl: "py-md"
|
|
2039
|
-
// 16px (1rem)
|
|
2040
2084
|
}
|
|
2041
2085
|
},
|
|
2042
2086
|
/**
|
|
2043
2087
|
* Border radius by size
|
|
2044
2088
|
*/
|
|
2045
2089
|
radius: {
|
|
2046
|
-
xs: "rounded-sm",
|
|
2047
|
-
// 4px (0.25rem)
|
|
2048
2090
|
sm: "rounded-md",
|
|
2049
2091
|
// 6px (0.375rem)
|
|
2050
2092
|
md: "rounded-md",
|
|
2051
2093
|
// 6px (0.375rem) - default
|
|
2052
|
-
lg: "rounded-md"
|
|
2094
|
+
lg: "rounded-md"
|
|
2053
2095
|
// 6px (0.375rem)
|
|
2054
|
-
xl: "rounded-lg"
|
|
2055
|
-
// 8px (0.5rem)
|
|
2056
2096
|
},
|
|
2057
2097
|
/**
|
|
2058
2098
|
* Font sizes by size variant
|
|
2059
2099
|
* Maps to foundation typography fontSize tokens
|
|
2060
2100
|
*/
|
|
2061
2101
|
fontSize: {
|
|
2062
|
-
xs: "text-xs",
|
|
2063
|
-
// Maps to fontSize.xs[0]
|
|
2064
2102
|
sm: "text-sm",
|
|
2065
2103
|
// Maps to fontSize.sm[0]
|
|
2066
2104
|
md: "text-base",
|
|
2067
2105
|
// Maps to fontSize.base[0] - default
|
|
2068
|
-
lg: "text-base"
|
|
2106
|
+
lg: "text-base"
|
|
2069
2107
|
// Maps to fontSize.base[0]
|
|
2070
|
-
xl: "text-lg"
|
|
2071
|
-
// Maps to fontSize.lg[0]
|
|
2072
2108
|
},
|
|
2073
2109
|
/**
|
|
2074
2110
|
* Responsive font size (md breakpoint)
|
|
@@ -2250,16 +2286,6 @@ var INPUT_TOKENS = {
|
|
|
2250
2286
|
* Organized by size for easy access
|
|
2251
2287
|
*/
|
|
2252
2288
|
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
2289
|
sm: {
|
|
2264
2290
|
height: "h-8",
|
|
2265
2291
|
padding: {
|
|
@@ -2290,16 +2316,6 @@ var INPUT_TOKENS = {
|
|
|
2290
2316
|
radius: "rounded-md",
|
|
2291
2317
|
fontSize: "text-base",
|
|
2292
2318
|
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
2319
|
}
|
|
2304
2320
|
}
|
|
2305
2321
|
};
|
|
@@ -2308,20 +2324,13 @@ var INPUT_TOKENS = {
|
|
|
2308
2324
|
var CHECKBOX_TOKENS = {
|
|
2309
2325
|
/**
|
|
2310
2326
|
* Checkbox sizes by size variant
|
|
2311
|
-
* Supports
|
|
2327
|
+
* Supports sm, md, lg sizes (canonical interactive scale)
|
|
2312
2328
|
* Checkboxes are typically square and smaller than input fields
|
|
2329
|
+
*
|
|
2330
|
+
* NOTE: Size scale restricted to sm|md|lg per canonical interactive size scale (FOUNDATION_LOCK.md).
|
|
2331
|
+
* xs and xl sizes removed to comply with Button-defined canonical scale.
|
|
2313
2332
|
*/
|
|
2314
2333
|
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
2334
|
sm: {
|
|
2326
2335
|
width: "w-4",
|
|
2327
2336
|
// 16px (1rem)
|
|
@@ -2351,16 +2360,6 @@ var CHECKBOX_TOKENS = {
|
|
|
2351
2360
|
// 6px (0.375rem)
|
|
2352
2361
|
iconSize: "size-4"
|
|
2353
2362
|
// 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
2363
|
}
|
|
2365
2364
|
},
|
|
2366
2365
|
/**
|
|
@@ -2466,19 +2465,16 @@ var CHECKBOX_TOKENS = {
|
|
|
2466
2465
|
/**
|
|
2467
2466
|
* Icon tokens
|
|
2468
2467
|
* Size and styling for checkmark icon within checkbox
|
|
2468
|
+
* NOTE: Icon sizes restricted to sm|md|lg per canonical interactive size scale
|
|
2469
2469
|
*/
|
|
2470
2470
|
icon: {
|
|
2471
2471
|
size: {
|
|
2472
|
-
xs: "size-2.5",
|
|
2473
|
-
// 10px (0.625rem)
|
|
2474
2472
|
sm: "size-3",
|
|
2475
2473
|
// 12px (0.75rem)
|
|
2476
2474
|
md: "size-3.5",
|
|
2477
2475
|
// 14px (0.875rem) - default
|
|
2478
|
-
lg: "size-4"
|
|
2476
|
+
lg: "size-4"
|
|
2479
2477
|
// 16px (1rem)
|
|
2480
|
-
xl: "size-5"
|
|
2481
|
-
// 20px (1.25rem)
|
|
2482
2478
|
},
|
|
2483
2479
|
stroke: "stroke-2",
|
|
2484
2480
|
// 2px stroke width for checkmark
|
|
@@ -2510,9 +2506,10 @@ var CHECKBOX_TOKENS = {
|
|
|
2510
2506
|
/**
|
|
2511
2507
|
* Transition tokens
|
|
2512
2508
|
* Smooth transitions for state changes
|
|
2509
|
+
* Uses MOTION_TOKENS for canonical motion values
|
|
2513
2510
|
*/
|
|
2514
|
-
transition:
|
|
2515
|
-
// Smooth transitions
|
|
2511
|
+
transition: MOTION_TOKENS.transitionPreset.normal
|
|
2512
|
+
// Smooth transitions - Motion Authority compliant
|
|
2516
2513
|
};
|
|
2517
2514
|
|
|
2518
2515
|
// src/FOUNDATION/tokens/components/switch.ts
|
|
@@ -2758,15 +2755,15 @@ var SWITCH_TOKENS = {
|
|
|
2758
2755
|
/**
|
|
2759
2756
|
* Transition tokens
|
|
2760
2757
|
* Smooth transitions for handle animation and state changes
|
|
2761
|
-
* Uses
|
|
2758
|
+
* Uses MOTION_TOKENS for canonical motion values
|
|
2762
2759
|
*/
|
|
2763
2760
|
transition: {
|
|
2764
|
-
handle:
|
|
2765
|
-
// Handle slide animation
|
|
2766
|
-
track:
|
|
2767
|
-
// Track color transition
|
|
2768
|
-
combined:
|
|
2769
|
-
// Combined transitions
|
|
2761
|
+
handle: `${MOTION_TOKENS.transition.transform} ${MOTION_TOKENS.duration.normal} ${MOTION_TOKENS.easing["in-out"]}`,
|
|
2762
|
+
// Handle slide animation - Motion Authority compliant
|
|
2763
|
+
track: `${MOTION_TOKENS.transition.colors} ${MOTION_TOKENS.duration.normal} ${MOTION_TOKENS.easing["in-out"]}`,
|
|
2764
|
+
// Track color transition - Motion Authority compliant
|
|
2765
|
+
combined: MOTION_TOKENS.transitionPreset.normal
|
|
2766
|
+
// Combined transitions - Motion Authority compliant
|
|
2770
2767
|
},
|
|
2771
2768
|
/**
|
|
2772
2769
|
* Shadow token
|
|
@@ -2970,9 +2967,10 @@ var RADIO_TOKENS = {
|
|
|
2970
2967
|
/**
|
|
2971
2968
|
* Transition tokens
|
|
2972
2969
|
* Smooth transitions for state changes
|
|
2970
|
+
* Uses MOTION_TOKENS for canonical motion values
|
|
2973
2971
|
*/
|
|
2974
|
-
transition:
|
|
2975
|
-
// Smooth transitions
|
|
2972
|
+
transition: MOTION_TOKENS.transitionPreset.normal
|
|
2973
|
+
// Smooth transitions - Motion Authority compliant
|
|
2976
2974
|
};
|
|
2977
2975
|
|
|
2978
2976
|
// src/FOUNDATION/tokens/components/surface.ts
|
|
@@ -3007,51 +3005,53 @@ var SURFACE_TOKENS = {
|
|
|
3007
3005
|
/**
|
|
3008
3006
|
* Shadow tokens by surface variant
|
|
3009
3007
|
* Maps to foundation elevation shadow tokens
|
|
3008
|
+
* Uses canonical SurfaceVariant names
|
|
3010
3009
|
*/
|
|
3011
3010
|
shadow: {
|
|
3012
|
-
|
|
3011
|
+
default: "shadow-none",
|
|
3013
3012
|
// No shadow - maps to elevationShadows.none
|
|
3014
|
-
|
|
3013
|
+
elevated: "shadow-sm",
|
|
3015
3014
|
// Small shadow - maps to elevationShadows.sm
|
|
3016
|
-
|
|
3017
|
-
// No shadow - maps to elevationShadows.none
|
|
3018
|
-
outline: "shadow-none",
|
|
3015
|
+
outlined: "shadow-none",
|
|
3019
3016
|
// No shadow - border-focused variant
|
|
3017
|
+
filled: "shadow-none",
|
|
3018
|
+
// No shadow - maps to elevationShadows.none
|
|
3020
3019
|
subtle: "shadow-none"
|
|
3021
3020
|
// No shadow - minimal background difference
|
|
3022
3021
|
},
|
|
3023
3022
|
/**
|
|
3024
3023
|
* Variant-based token structure
|
|
3025
3024
|
* Organized by variant for easy access
|
|
3025
|
+
* Uses canonical SurfaceVariant names: default, elevated, outlined, filled, subtle
|
|
3026
3026
|
*/
|
|
3027
3027
|
variant: {
|
|
3028
|
-
|
|
3028
|
+
default: {
|
|
3029
3029
|
padding: "p-md",
|
|
3030
3030
|
radius: "rounded-md",
|
|
3031
3031
|
shadow: "shadow-none",
|
|
3032
3032
|
bg: "bg-background",
|
|
3033
3033
|
border: "border border-border"
|
|
3034
3034
|
},
|
|
3035
|
-
|
|
3035
|
+
elevated: {
|
|
3036
3036
|
padding: "p-md",
|
|
3037
3037
|
radius: "rounded-md",
|
|
3038
3038
|
shadow: "shadow-sm",
|
|
3039
3039
|
bg: "bg-card",
|
|
3040
3040
|
border: "border border-border"
|
|
3041
3041
|
},
|
|
3042
|
-
|
|
3042
|
+
outlined: {
|
|
3043
3043
|
padding: "p-md",
|
|
3044
3044
|
radius: "rounded-md",
|
|
3045
3045
|
shadow: "shadow-none",
|
|
3046
|
-
bg: "bg-
|
|
3047
|
-
border: "border border-border"
|
|
3046
|
+
bg: "bg-transparent",
|
|
3047
|
+
border: "border-2 border-border"
|
|
3048
3048
|
},
|
|
3049
|
-
|
|
3049
|
+
filled: {
|
|
3050
3050
|
padding: "p-md",
|
|
3051
3051
|
radius: "rounded-md",
|
|
3052
3052
|
shadow: "shadow-none",
|
|
3053
|
-
bg: "bg-
|
|
3054
|
-
border: "border
|
|
3053
|
+
bg: "bg-muted",
|
|
3054
|
+
border: "border border-border"
|
|
3055
3055
|
},
|
|
3056
3056
|
subtle: {
|
|
3057
3057
|
padding: "p-md",
|
|
@@ -4404,10 +4404,10 @@ var SELECT_TOKENS = {
|
|
|
4404
4404
|
// Text color using CSS var
|
|
4405
4405
|
border: "border border-[hsl(var(--border))]",
|
|
4406
4406
|
// 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)
|
|
4407
|
+
maxHeight: "max-h-96",
|
|
4408
|
+
// Maximum height for scrollable content (24rem = 384px) - maps to spacing[96]
|
|
4409
|
+
minWidth: "min-w-32"
|
|
4410
|
+
// Minimum width (8rem = 128px) - maps to spacing[32]
|
|
4411
4411
|
},
|
|
4412
4412
|
/**
|
|
4413
4413
|
* Select item tokens
|
|
@@ -4795,8 +4795,246 @@ var SELECT_TOKENS = {
|
|
|
4795
4795
|
}
|
|
4796
4796
|
};
|
|
4797
4797
|
|
|
4798
|
+
// src/FOUNDATION/tokens/components/simple-table.ts
|
|
4799
|
+
var SIMPLETABLE_TOKENS = {
|
|
4800
|
+
/**
|
|
4801
|
+
* Cell padding by size
|
|
4802
|
+
* Maps to semanticSpacing tokens
|
|
4803
|
+
*/
|
|
4804
|
+
padding: {
|
|
4805
|
+
cell: {
|
|
4806
|
+
sm: "p-xs",
|
|
4807
|
+
// 4px - maps to semanticSpacing.xs
|
|
4808
|
+
md: "p-sm",
|
|
4809
|
+
// 8px - maps to semanticSpacing.sm
|
|
4810
|
+
lg: "p-md"
|
|
4811
|
+
// 16px - maps to semanticSpacing.md
|
|
4812
|
+
},
|
|
4813
|
+
header: {
|
|
4814
|
+
sm: "px-xs py-xs",
|
|
4815
|
+
// 4px horizontal, 4px vertical
|
|
4816
|
+
md: "px-sm py-sm",
|
|
4817
|
+
// 8px horizontal, 8px vertical
|
|
4818
|
+
lg: "px-md py-md"
|
|
4819
|
+
// 16px horizontal, 16px vertical
|
|
4820
|
+
}
|
|
4821
|
+
},
|
|
4822
|
+
/**
|
|
4823
|
+
* Typography tokens for table headers and cells by size
|
|
4824
|
+
* Maps to fontSize and fontWeight tokens
|
|
4825
|
+
*/
|
|
4826
|
+
typography: {
|
|
4827
|
+
header: {
|
|
4828
|
+
sm: "text-xs font-medium text-muted-foreground",
|
|
4829
|
+
// Maps to fontSize.xs, fontWeight.medium
|
|
4830
|
+
md: "text-sm font-medium text-muted-foreground",
|
|
4831
|
+
// Maps to fontSize.sm, fontWeight.medium
|
|
4832
|
+
lg: "text-base font-medium text-muted-foreground"
|
|
4833
|
+
// Maps to fontSize.base, fontWeight.medium
|
|
4834
|
+
},
|
|
4835
|
+
cell: {
|
|
4836
|
+
sm: "text-xs",
|
|
4837
|
+
// Maps to fontSize.xs
|
|
4838
|
+
md: "text-sm",
|
|
4839
|
+
// Maps to fontSize.sm
|
|
4840
|
+
lg: "text-base"
|
|
4841
|
+
// Maps to fontSize.base
|
|
4842
|
+
}
|
|
4843
|
+
},
|
|
4844
|
+
/**
|
|
4845
|
+
* Layout tokens for table container and base styles
|
|
4846
|
+
*/
|
|
4847
|
+
layout: {
|
|
4848
|
+
overflow: "overflow-x-auto",
|
|
4849
|
+
// Table container overflow
|
|
4850
|
+
table: "w-full border-collapse"
|
|
4851
|
+
// Table base styles
|
|
4852
|
+
},
|
|
4853
|
+
/**
|
|
4854
|
+
* Border tokens for table
|
|
4855
|
+
*/
|
|
4856
|
+
border: {
|
|
4857
|
+
bottom: "border-b",
|
|
4858
|
+
// Border bottom for rows and headers
|
|
4859
|
+
color: "border-border"
|
|
4860
|
+
// Border color
|
|
4861
|
+
},
|
|
4862
|
+
/**
|
|
4863
|
+
* State tokens for table rows
|
|
4864
|
+
*/
|
|
4865
|
+
state: {
|
|
4866
|
+
rowHover: "hover:bg-muted/50"
|
|
4867
|
+
// Row hover background
|
|
4868
|
+
},
|
|
4869
|
+
/**
|
|
4870
|
+
* Text alignment tokens
|
|
4871
|
+
*/
|
|
4872
|
+
alignment: {
|
|
4873
|
+
left: "text-left"
|
|
4874
|
+
// Left alignment
|
|
4875
|
+
}
|
|
4876
|
+
};
|
|
4877
|
+
|
|
4878
|
+
// src/FOUNDATION/tokens/components/data-list.ts
|
|
4879
|
+
var DATA_LIST_TOKENS = {
|
|
4880
|
+
/**
|
|
4881
|
+
* Spacing tokens for DataList
|
|
4882
|
+
* Maps to semantic spacing tokens
|
|
4883
|
+
*/
|
|
4884
|
+
spacing: {
|
|
4885
|
+
gap: "gap-md",
|
|
4886
|
+
// 16px (1rem) - gap between items - maps to semanticSpacing.md
|
|
4887
|
+
padding: "p-md"
|
|
4888
|
+
// 16px (1rem) - container padding - maps to semanticSpacing.md
|
|
4889
|
+
},
|
|
4890
|
+
/**
|
|
4891
|
+
* Label width tokens (for desktop horizontal layout)
|
|
4892
|
+
* Maps to Tailwind width utilities
|
|
4893
|
+
*/
|
|
4894
|
+
labelWidth: {
|
|
4895
|
+
sm: "w-24",
|
|
4896
|
+
// 96px (6rem) - small label width
|
|
4897
|
+
md: "w-32",
|
|
4898
|
+
// 128px (8rem) - default label width
|
|
4899
|
+
lg: "w-40"
|
|
4900
|
+
// 160px (10rem) - large label width
|
|
4901
|
+
},
|
|
4902
|
+
/**
|
|
4903
|
+
* Row padding tokens
|
|
4904
|
+
* Maps to semantic spacing tokens
|
|
4905
|
+
*/
|
|
4906
|
+
rowPadding: {
|
|
4907
|
+
sm: "py-xs",
|
|
4908
|
+
// 4px (0.25rem) - maps to semanticSpacing.xs
|
|
4909
|
+
md: "py-sm",
|
|
4910
|
+
// 8px (0.5rem) - maps to semanticSpacing.sm
|
|
4911
|
+
lg: "py-md"
|
|
4912
|
+
// 16px (1rem) - maps to semanticSpacing.md
|
|
4913
|
+
},
|
|
4914
|
+
/**
|
|
4915
|
+
* Item tokens
|
|
4916
|
+
* For individual DataList item styling
|
|
4917
|
+
*/
|
|
4918
|
+
item: {
|
|
4919
|
+
/**
|
|
4920
|
+
* Border tokens for items
|
|
4921
|
+
*/
|
|
4922
|
+
border: "border-b border-border last:border-0",
|
|
4923
|
+
// Item borders
|
|
4924
|
+
/**
|
|
4925
|
+
* Responsive layout tokens
|
|
4926
|
+
*/
|
|
4927
|
+
layout: {
|
|
4928
|
+
mobile: "flex flex-col",
|
|
4929
|
+
// Mobile layout - vertical
|
|
4930
|
+
desktop: "md:flex-row md:items-center"
|
|
4931
|
+
// Desktop layout - horizontal
|
|
4932
|
+
}
|
|
4933
|
+
},
|
|
4934
|
+
/**
|
|
4935
|
+
* Label tokens
|
|
4936
|
+
* For DataList label styling
|
|
4937
|
+
*/
|
|
4938
|
+
label: {
|
|
4939
|
+
mobile: "mb-1 font-semibold text-foreground",
|
|
4940
|
+
// Mobile label styles
|
|
4941
|
+
desktop: "md:mb-0"
|
|
4942
|
+
// Desktop label margin override
|
|
4943
|
+
},
|
|
4944
|
+
/**
|
|
4945
|
+
* Value tokens
|
|
4946
|
+
* For DataList value styling
|
|
4947
|
+
*/
|
|
4948
|
+
value: {
|
|
4949
|
+
color: "text-muted-foreground",
|
|
4950
|
+
// Value text color
|
|
4951
|
+
flex: "flex-1"
|
|
4952
|
+
// Value flex grow
|
|
4953
|
+
}
|
|
4954
|
+
};
|
|
4955
|
+
|
|
4956
|
+
// src/FOUNDATION/tokens/components/list.ts
|
|
4957
|
+
var LIST_TOKENS = {
|
|
4958
|
+
/**
|
|
4959
|
+
* Spacing tokens for List container
|
|
4960
|
+
* Maps to semantic spacing tokens
|
|
4961
|
+
*/
|
|
4962
|
+
spacing: {
|
|
4963
|
+
gap: "space-y-sm"
|
|
4964
|
+
// 8px (0.5rem) - gap between list items - maps to semanticSpacing.sm
|
|
4965
|
+
},
|
|
4966
|
+
/**
|
|
4967
|
+
* List item tokens
|
|
4968
|
+
* For individual list item styling
|
|
4969
|
+
*/
|
|
4970
|
+
item: {
|
|
4971
|
+
/**
|
|
4972
|
+
* Padding tokens for item container
|
|
4973
|
+
* Maps to semantic spacing tokens
|
|
4974
|
+
*/
|
|
4975
|
+
padding: "p-md",
|
|
4976
|
+
// 16px (1rem) - item padding - maps to semanticSpacing.md
|
|
4977
|
+
/**
|
|
4978
|
+
* Border radius tokens for item container
|
|
4979
|
+
* Maps to foundation radius tokens
|
|
4980
|
+
*/
|
|
4981
|
+
radius: "rounded-lg",
|
|
4982
|
+
// 8px (0.5rem) - item border radius - maps to borderRadius.lg
|
|
4983
|
+
/**
|
|
4984
|
+
* Border token
|
|
4985
|
+
*/
|
|
4986
|
+
border: "border",
|
|
4987
|
+
// Standard border
|
|
4988
|
+
/**
|
|
4989
|
+
* Transition token
|
|
4990
|
+
*/
|
|
4991
|
+
transition: "transition-colors",
|
|
4992
|
+
// Color transitions
|
|
4993
|
+
/**
|
|
4994
|
+
* Hover state tokens
|
|
4995
|
+
*/
|
|
4996
|
+
hover: {
|
|
4997
|
+
background: "hover:bg-muted/50"
|
|
4998
|
+
// Hover background - maps to muted color with 50% opacity
|
|
4999
|
+
}
|
|
5000
|
+
},
|
|
5001
|
+
/**
|
|
5002
|
+
* Title tokens
|
|
5003
|
+
* For list item title styling
|
|
5004
|
+
*/
|
|
5005
|
+
title: {
|
|
5006
|
+
fontWeight: "font-medium",
|
|
5007
|
+
// Medium font weight
|
|
5008
|
+
color: "text-foreground"
|
|
5009
|
+
// Foreground text color
|
|
5010
|
+
},
|
|
5011
|
+
/**
|
|
5012
|
+
* Description tokens
|
|
5013
|
+
* For list item description styling
|
|
5014
|
+
*/
|
|
5015
|
+
description: {
|
|
5016
|
+
/**
|
|
5017
|
+
* Margin top token
|
|
5018
|
+
* Maps to semantic spacing tokens
|
|
5019
|
+
*/
|
|
5020
|
+
marginTop: "mt-xs",
|
|
5021
|
+
// 4px (0.25rem) - margin top - maps to semanticSpacing.xs
|
|
5022
|
+
/**
|
|
5023
|
+
* Font size token
|
|
5024
|
+
* Maps to foundation typography tokens
|
|
5025
|
+
*/
|
|
5026
|
+
fontSize: "text-sm",
|
|
5027
|
+
// Small font size - maps to fontSize.sm
|
|
5028
|
+
/**
|
|
5029
|
+
* Text color token
|
|
5030
|
+
*/
|
|
5031
|
+
color: "text-muted-foreground"
|
|
5032
|
+
// Muted foreground text color
|
|
5033
|
+
}
|
|
5034
|
+
};
|
|
5035
|
+
|
|
4798
5036
|
// src/FOUNDATION/tokens/motion/v2.ts
|
|
4799
|
-
var
|
|
5037
|
+
var motionDurations = {
|
|
4800
5038
|
fast: "150ms",
|
|
4801
5039
|
// Quick interactions
|
|
4802
5040
|
normal: "250ms",
|
|
@@ -4806,7 +5044,7 @@ var motionV2Durations = {
|
|
|
4806
5044
|
reduced: "0ms"
|
|
4807
5045
|
// For prefers-reduced-motion
|
|
4808
5046
|
};
|
|
4809
|
-
var
|
|
5047
|
+
var motionEasings = {
|
|
4810
5048
|
soft: "cubic-bezier(0.22, 1, 0.36, 1)",
|
|
4811
5049
|
// Gentle, smooth
|
|
4812
5050
|
standard: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
@@ -4814,526 +5052,201 @@ var motionV2Easings = {
|
|
|
4814
5052
|
emphasized: "cubic-bezier(0.2, 0, 0, 1)"
|
|
4815
5053
|
// Strong, decisive
|
|
4816
5054
|
};
|
|
4817
|
-
var
|
|
4818
|
-
fast: `${
|
|
4819
|
-
normal: `${
|
|
4820
|
-
slow: `${
|
|
4821
|
-
soft: `${
|
|
4822
|
-
reduced: `${
|
|
5055
|
+
var motionTransitions = {
|
|
5056
|
+
fast: `${motionDurations.fast} ${motionEasings.standard}`,
|
|
5057
|
+
normal: `${motionDurations.normal} ${motionEasings.standard}`,
|
|
5058
|
+
slow: `${motionDurations.slow} ${motionEasings.emphasized}`,
|
|
5059
|
+
soft: `${motionDurations.normal} ${motionEasings.soft}`,
|
|
5060
|
+
reduced: `${motionDurations.reduced} linear`
|
|
4823
5061
|
};
|
|
4824
|
-
var
|
|
5062
|
+
var motionFade = {
|
|
4825
5063
|
in: {
|
|
4826
|
-
from: { opacity: 0 },
|
|
4827
|
-
to: { opacity: 1 }
|
|
5064
|
+
from: { opacity: "0" },
|
|
5065
|
+
to: { opacity: "1" }
|
|
4828
5066
|
},
|
|
4829
5067
|
out: {
|
|
4830
|
-
from: { opacity: 1 },
|
|
4831
|
-
to: { opacity: 0 }
|
|
5068
|
+
from: { opacity: "1" },
|
|
5069
|
+
to: { opacity: "0" }
|
|
4832
5070
|
}
|
|
4833
5071
|
};
|
|
4834
|
-
var
|
|
5072
|
+
var motionScale = {
|
|
4835
5073
|
in: {
|
|
4836
|
-
from: { transform: "scale(0.95)", opacity: 0 },
|
|
4837
|
-
to: { transform: "scale(1)", opacity: 1 }
|
|
5074
|
+
from: { transform: "scale(0.95)", opacity: "0" },
|
|
5075
|
+
to: { transform: "scale(1)", opacity: "1" }
|
|
4838
5076
|
},
|
|
4839
5077
|
out: {
|
|
4840
|
-
from: { transform: "scale(1)", opacity: 1 },
|
|
4841
|
-
to: { transform: "scale(0.95)", opacity: 0 }
|
|
5078
|
+
from: { transform: "scale(1)", opacity: "1" },
|
|
5079
|
+
to: { transform: "scale(0.95)", opacity: "0" }
|
|
4842
5080
|
}
|
|
4843
5081
|
};
|
|
4844
|
-
var
|
|
5082
|
+
var motionSlide = {
|
|
4845
5083
|
up: {
|
|
4846
5084
|
in: {
|
|
4847
|
-
from: { transform: "translateY(100%)", opacity: 0 },
|
|
4848
|
-
to: { transform: "translateY(0)", opacity: 1 }
|
|
5085
|
+
from: { transform: "translateY(100%)", opacity: "0" },
|
|
5086
|
+
to: { transform: "translateY(0)", opacity: "1" }
|
|
4849
5087
|
},
|
|
4850
5088
|
out: {
|
|
4851
|
-
from: { transform: "translateY(0)", opacity: 1 },
|
|
4852
|
-
to: { transform: "translateY(100%)", opacity: 0 }
|
|
5089
|
+
from: { transform: "translateY(0)", opacity: "1" },
|
|
5090
|
+
to: { transform: "translateY(100%)", opacity: "0" }
|
|
4853
5091
|
}
|
|
4854
5092
|
},
|
|
4855
5093
|
down: {
|
|
4856
5094
|
in: {
|
|
4857
|
-
from: { transform: "translateY(-100%)", opacity: 0 },
|
|
4858
|
-
to: { transform: "translateY(0)", opacity: 1 }
|
|
5095
|
+
from: { transform: "translateY(-100%)", opacity: "0" },
|
|
5096
|
+
to: { transform: "translateY(0)", opacity: "1" }
|
|
4859
5097
|
},
|
|
4860
5098
|
out: {
|
|
4861
|
-
from: { transform: "translateY(0)", opacity: 1 },
|
|
4862
|
-
to: { transform: "translateY(-100%)", opacity: 0 }
|
|
5099
|
+
from: { transform: "translateY(0)", opacity: "1" },
|
|
5100
|
+
to: { transform: "translateY(-100%)", opacity: "0" }
|
|
4863
5101
|
}
|
|
4864
5102
|
},
|
|
4865
5103
|
left: {
|
|
4866
5104
|
in: {
|
|
4867
|
-
from: { transform: "translateX(100%)", opacity: 0 },
|
|
4868
|
-
to: { transform: "translateX(0)", opacity: 1 }
|
|
5105
|
+
from: { transform: "translateX(100%)", opacity: "0" },
|
|
5106
|
+
to: { transform: "translateX(0)", opacity: "1" }
|
|
4869
5107
|
},
|
|
4870
5108
|
out: {
|
|
4871
|
-
from: { transform: "translateX(0)", opacity: 1 },
|
|
4872
|
-
to: { transform: "translateX(100%)", opacity: 0 }
|
|
5109
|
+
from: { transform: "translateX(0)", opacity: "1" },
|
|
5110
|
+
to: { transform: "translateX(100%)", opacity: "0" }
|
|
4873
5111
|
}
|
|
4874
5112
|
},
|
|
4875
5113
|
right: {
|
|
4876
5114
|
in: {
|
|
4877
|
-
from: { transform: "translateX(-100%)", opacity: 0 },
|
|
4878
|
-
to: { transform: "translateX(0)", opacity: 1 }
|
|
5115
|
+
from: { transform: "translateX(-100%)", opacity: "0" },
|
|
5116
|
+
to: { transform: "translateX(0)", opacity: "1" }
|
|
4879
5117
|
},
|
|
4880
5118
|
out: {
|
|
4881
|
-
from: { transform: "translateX(0)", opacity: 1 },
|
|
4882
|
-
to: { transform: "translateX(-100%)", opacity: 0 }
|
|
5119
|
+
from: { transform: "translateX(0)", opacity: "1" },
|
|
5120
|
+
to: { transform: "translateX(-100%)", opacity: "0" }
|
|
4883
5121
|
}
|
|
4884
5122
|
}
|
|
4885
5123
|
};
|
|
4886
|
-
var
|
|
5124
|
+
var motionCombined = {
|
|
4887
5125
|
fadeScale: {
|
|
4888
5126
|
in: {
|
|
4889
|
-
from: { transform: "scale(0.95)", opacity: 0 },
|
|
4890
|
-
to: { transform: "scale(1)", opacity: 1 }
|
|
5127
|
+
from: { transform: "scale(0.95)", opacity: "0" },
|
|
5128
|
+
to: { transform: "scale(1)", opacity: "1" }
|
|
4891
5129
|
},
|
|
4892
5130
|
out: {
|
|
4893
|
-
from: { transform: "scale(1)", opacity: 1 },
|
|
4894
|
-
to: { transform: "scale(0.95)", opacity: 0 }
|
|
5131
|
+
from: { transform: "scale(1)", opacity: "1" },
|
|
5132
|
+
to: { transform: "scale(0.95)", opacity: "0" }
|
|
4895
5133
|
}
|
|
4896
5134
|
},
|
|
4897
5135
|
fadeSlideUp: {
|
|
4898
5136
|
in: {
|
|
4899
|
-
from: { transform: "translateY(100%)", opacity: 0 },
|
|
4900
|
-
to: { transform: "translateY(0)", opacity: 1 }
|
|
5137
|
+
from: { transform: "translateY(100%)", opacity: "0" },
|
|
5138
|
+
to: { transform: "translateY(0)", opacity: "1" }
|
|
4901
5139
|
},
|
|
4902
5140
|
out: {
|
|
4903
|
-
from: { transform: "translateY(0)", opacity: 1 },
|
|
4904
|
-
to: { transform: "translateY(100%)", opacity: 0 }
|
|
5141
|
+
from: { transform: "translateY(0)", opacity: "1" },
|
|
5142
|
+
to: { transform: "translateY(100%)", opacity: "0" }
|
|
4905
5143
|
}
|
|
4906
5144
|
},
|
|
4907
5145
|
fadeSlideDown: {
|
|
4908
5146
|
in: {
|
|
4909
|
-
from: { transform: "translateY(-100%)", opacity: 0 },
|
|
4910
|
-
to: { transform: "translateY(0)", opacity: 1 }
|
|
5147
|
+
from: { transform: "translateY(-100%)", opacity: "0" },
|
|
5148
|
+
to: { transform: "translateY(0)", opacity: "1" }
|
|
4911
5149
|
},
|
|
4912
5150
|
out: {
|
|
4913
|
-
from: { transform: "translateY(0)", opacity: 1 },
|
|
4914
|
-
to: { transform: "translateY(-100%)", opacity: 0 }
|
|
5151
|
+
from: { transform: "translateY(0)", opacity: "1" },
|
|
5152
|
+
to: { transform: "translateY(-100%)", opacity: "0" }
|
|
4915
5153
|
}
|
|
4916
5154
|
},
|
|
4917
5155
|
fadeSlideLeft: {
|
|
4918
5156
|
in: {
|
|
4919
|
-
from: { transform: "translateX(100%)", opacity: 0 },
|
|
4920
|
-
to: { transform: "translateX(0)", opacity: 1 }
|
|
5157
|
+
from: { transform: "translateX(100%)", opacity: "0" },
|
|
5158
|
+
to: { transform: "translateX(0)", opacity: "1" }
|
|
4921
5159
|
},
|
|
4922
5160
|
out: {
|
|
4923
|
-
from: { transform: "translateX(0)", opacity: 1 },
|
|
4924
|
-
to: { transform: "translateX(100%)", opacity: 0 }
|
|
5161
|
+
from: { transform: "translateX(0)", opacity: "1" },
|
|
5162
|
+
to: { transform: "translateX(100%)", opacity: "0" }
|
|
4925
5163
|
}
|
|
4926
5164
|
},
|
|
4927
5165
|
fadeSlideRight: {
|
|
4928
5166
|
in: {
|
|
4929
|
-
from: { transform: "translateX(-100%)", opacity: 0 },
|
|
4930
|
-
to: { transform: "translateX(0)", opacity: 1 }
|
|
5167
|
+
from: { transform: "translateX(-100%)", opacity: "0" },
|
|
5168
|
+
to: { transform: "translateX(0)", opacity: "1" }
|
|
4931
5169
|
},
|
|
4932
5170
|
out: {
|
|
4933
|
-
from: { transform: "translateX(0)", opacity: 1 },
|
|
4934
|
-
to: { transform: "translateX(-100%)", opacity: 0 }
|
|
5171
|
+
from: { transform: "translateX(0)", opacity: "1" },
|
|
5172
|
+
to: { transform: "translateX(-100%)", opacity: "0" }
|
|
4935
5173
|
}
|
|
4936
5174
|
}
|
|
4937
5175
|
};
|
|
4938
|
-
var
|
|
5176
|
+
var motionCSSVariables = {
|
|
4939
5177
|
// Durations
|
|
4940
|
-
"--motion-duration-fast":
|
|
4941
|
-
"--motion-duration-normal":
|
|
4942
|
-
"--motion-duration-slow":
|
|
4943
|
-
"--motion-duration-reduced":
|
|
5178
|
+
"--motion-duration-fast": motionDurations.fast,
|
|
5179
|
+
"--motion-duration-normal": motionDurations.normal,
|
|
5180
|
+
"--motion-duration-slow": motionDurations.slow,
|
|
5181
|
+
"--motion-duration-reduced": motionDurations.reduced,
|
|
4944
5182
|
// Easings
|
|
4945
|
-
"--motion-easing-soft":
|
|
4946
|
-
"--motion-easing-standard":
|
|
4947
|
-
"--motion-easing-emphasized":
|
|
5183
|
+
"--motion-easing-soft": motionEasings.soft,
|
|
5184
|
+
"--motion-easing-standard": motionEasings.standard,
|
|
5185
|
+
"--motion-easing-emphasized": motionEasings.emphasized,
|
|
4948
5186
|
// Transitions
|
|
4949
|
-
"--motion-transition-fast":
|
|
4950
|
-
"--motion-transition-normal":
|
|
4951
|
-
"--motion-transition-slow":
|
|
4952
|
-
"--motion-transition-soft":
|
|
4953
|
-
"--motion-transition-reduced":
|
|
5187
|
+
"--motion-transition-fast": motionTransitions.fast,
|
|
5188
|
+
"--motion-transition-normal": motionTransitions.normal,
|
|
5189
|
+
"--motion-transition-slow": motionTransitions.slow,
|
|
5190
|
+
"--motion-transition-soft": motionTransitions.soft,
|
|
5191
|
+
"--motion-transition-reduced": motionTransitions.reduced
|
|
5192
|
+
};
|
|
5193
|
+
var motionTransitionProperty = {
|
|
5194
|
+
DEFAULT: "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
|
|
5195
|
+
colors: "color, background-color, border-color, text-decoration-color, fill, stroke",
|
|
5196
|
+
opacity: "opacity",
|
|
5197
|
+
shadow: "box-shadow",
|
|
5198
|
+
transform: "transform",
|
|
5199
|
+
all: "all",
|
|
5200
|
+
none: "none"
|
|
4954
5201
|
};
|
|
4955
|
-
var
|
|
5202
|
+
var motionTailwindConfig = {
|
|
4956
5203
|
transitionDuration: {
|
|
4957
|
-
...
|
|
5204
|
+
...motionDurations
|
|
4958
5205
|
},
|
|
4959
5206
|
transitionTimingFunction: {
|
|
4960
|
-
...
|
|
5207
|
+
...motionEasings
|
|
5208
|
+
},
|
|
5209
|
+
transitionProperty: {
|
|
5210
|
+
...motionTransitionProperty
|
|
4961
5211
|
},
|
|
4962
5212
|
keyframes: {
|
|
4963
5213
|
// Fade
|
|
4964
|
-
"fade-in":
|
|
4965
|
-
"fade-out":
|
|
5214
|
+
"fade-in": motionFade.in,
|
|
5215
|
+
"fade-out": motionFade.out,
|
|
4966
5216
|
// Scale
|
|
4967
|
-
"scale-in":
|
|
4968
|
-
"scale-out":
|
|
5217
|
+
"scale-in": motionScale.in,
|
|
5218
|
+
"scale-out": motionScale.out,
|
|
4969
5219
|
// 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":
|
|
5220
|
+
"slide-up-in": motionSlide.up.in,
|
|
5221
|
+
"slide-up-out": motionSlide.up.out,
|
|
5222
|
+
"slide-down-in": motionSlide.down.in,
|
|
5223
|
+
"slide-down-out": motionSlide.down.out,
|
|
5224
|
+
"slide-left-in": motionSlide.left.in,
|
|
5225
|
+
"slide-left-out": motionSlide.left.out,
|
|
5226
|
+
"slide-right-in": motionSlide.right.in,
|
|
5227
|
+
"slide-right-out": motionSlide.right.out,
|
|
4978
5228
|
// 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":
|
|
5229
|
+
"fade-scale-in": motionCombined.fadeScale.in,
|
|
5230
|
+
"fade-scale-out": motionCombined.fadeScale.out,
|
|
5231
|
+
"fade-slide-up-in": motionCombined.fadeSlideUp.in,
|
|
5232
|
+
"fade-slide-up-out": motionCombined.fadeSlideUp.out,
|
|
5233
|
+
"fade-slide-down-in": motionCombined.fadeSlideDown.in,
|
|
5234
|
+
"fade-slide-down-out": motionCombined.fadeSlideDown.out,
|
|
5235
|
+
"fade-slide-left-in": motionCombined.fadeSlideLeft.in,
|
|
5236
|
+
"fade-slide-left-out": motionCombined.fadeSlideLeft.out,
|
|
5237
|
+
"fade-slide-right-in": motionCombined.fadeSlideRight.in,
|
|
5238
|
+
"fade-slide-right-out": motionCombined.fadeSlideRight.out
|
|
4989
5239
|
}
|
|
4990
5240
|
};
|
|
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)
|
|
5241
|
+
var motionReducedMotion = {
|
|
5242
|
+
/** Reduced motion duration (instant, no animation) */
|
|
5248
5243
|
duration: "0ms",
|
|
5249
|
-
|
|
5244
|
+
/** Reduced motion easing (linear for instant) */
|
|
5250
5245
|
easing: "linear",
|
|
5251
|
-
|
|
5246
|
+
/** Reduced motion transition (instant) */
|
|
5252
5247
|
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
|
-
}
|
|
5248
|
+
/** CSS media query for reduced motion */
|
|
5249
|
+
mediaQuery: "@media (prefers-reduced-motion: reduce)"
|
|
5337
5250
|
};
|
|
5338
5251
|
|
|
5339
5252
|
// src/FOUNDATION/tokens/radius.ts
|
|
@@ -6118,10 +6031,12 @@ exports.ARTIST_TOKENS = ARTIST_TOKENS;
|
|
|
6118
6031
|
exports.BUTTON_TOKENS = BUTTON_TOKENS;
|
|
6119
6032
|
exports.CARD_TOKENS = CARD_TOKENS;
|
|
6120
6033
|
exports.CHECKBOX_TOKENS = CHECKBOX_TOKENS;
|
|
6034
|
+
exports.DATA_LIST_TOKENS = DATA_LIST_TOKENS;
|
|
6121
6035
|
exports.DATA_TOKENS = DATA_TOKENS;
|
|
6122
6036
|
exports.DOMAIN_TOKENS = DOMAIN_TOKENS;
|
|
6123
6037
|
exports.ICON_TOKENS = ICON_TOKENS;
|
|
6124
6038
|
exports.INPUT_TOKENS = INPUT_TOKENS;
|
|
6039
|
+
exports.LIST_TOKENS = LIST_TOKENS;
|
|
6125
6040
|
exports.MENU_TOKENS = MENU_TOKENS;
|
|
6126
6041
|
exports.MOTION_TOKENS = MOTION_TOKENS;
|
|
6127
6042
|
exports.NAVIGATION_TOKENS = NAVIGATION_TOKENS;
|
|
@@ -6131,6 +6046,7 @@ exports.POPOVER_TOKENS = POPOVER_TOKENS;
|
|
|
6131
6046
|
exports.RADIO_TOKENS = RADIO_TOKENS;
|
|
6132
6047
|
exports.SECTION_TOKENS = SECTION_TOKENS;
|
|
6133
6048
|
exports.SELECT_TOKENS = SELECT_TOKENS;
|
|
6049
|
+
exports.SIMPLETABLE_TOKENS = SIMPLETABLE_TOKENS;
|
|
6134
6050
|
exports.SURFACE_TOKENS = SURFACE_TOKENS;
|
|
6135
6051
|
exports.SWITCH_TOKENS = SWITCH_TOKENS;
|
|
6136
6052
|
exports.TEXT_TOKENS = TEXT_TOKENS;
|
|
@@ -6141,7 +6057,6 @@ exports.accentColoredShadows = accentColoredShadows;
|
|
|
6141
6057
|
exports.accentColors = accentColors;
|
|
6142
6058
|
exports.allCSSVariables = allCSSVariables;
|
|
6143
6059
|
exports.allCSSVariablesCSS = allCSSVariablesCSS;
|
|
6144
|
-
exports.animations = animations;
|
|
6145
6060
|
exports.baseColors = baseColors;
|
|
6146
6061
|
exports.borderRadius = borderRadius;
|
|
6147
6062
|
exports.chartColors = chartColors;
|
|
@@ -6149,8 +6064,6 @@ exports.colorCSSVariables = colorCSSVariables;
|
|
|
6149
6064
|
exports.componentRadius = componentRadius;
|
|
6150
6065
|
exports.componentShadowMapping = componentShadowMapping;
|
|
6151
6066
|
exports.cssVariableColorTokens = cssVariableColorTokens;
|
|
6152
|
-
exports.durations = durations;
|
|
6153
|
-
exports.easings = easings;
|
|
6154
6067
|
exports.elevationShadows = elevationShadows;
|
|
6155
6068
|
exports.focusRings = focusRings;
|
|
6156
6069
|
exports.fontFamily = fontFamily;
|
|
@@ -6159,24 +6072,23 @@ exports.fontSizeWithMd = fontSizeWithMd;
|
|
|
6159
6072
|
exports.fontWeight = fontWeight;
|
|
6160
6073
|
exports.generateCSSVariablesCSS = generateCSSVariablesCSS;
|
|
6161
6074
|
exports.glowEffects = glowEffects;
|
|
6162
|
-
exports.keyframes = keyframes;
|
|
6163
6075
|
exports.layoutSpacing = layoutSpacing;
|
|
6164
6076
|
exports.letterSpacing = letterSpacing;
|
|
6165
6077
|
exports.lineHeight = lineHeight;
|
|
6166
6078
|
exports.motionCSSVariables = motionCSSVariables;
|
|
6167
|
-
exports.
|
|
6168
|
-
exports.
|
|
6169
|
-
exports.
|
|
6170
|
-
exports.
|
|
6171
|
-
exports.
|
|
6172
|
-
exports.
|
|
6173
|
-
exports.
|
|
6174
|
-
exports.
|
|
6175
|
-
exports.
|
|
6079
|
+
exports.motionCombined = motionCombined;
|
|
6080
|
+
exports.motionDurations = motionDurations;
|
|
6081
|
+
exports.motionEasings = motionEasings;
|
|
6082
|
+
exports.motionFade = motionFade;
|
|
6083
|
+
exports.motionReducedMotion = motionReducedMotion;
|
|
6084
|
+
exports.motionScale = motionScale;
|
|
6085
|
+
exports.motionSlide = motionSlide;
|
|
6086
|
+
exports.motionTailwindConfig = motionTailwindConfig;
|
|
6087
|
+
exports.motionTransitionProperty = motionTransitionProperty;
|
|
6088
|
+
exports.motionTransitions = motionTransitions;
|
|
6176
6089
|
exports.primaryColoredShadows = primaryColoredShadows;
|
|
6177
6090
|
exports.primaryColors = primaryColors;
|
|
6178
6091
|
exports.radiusCSSVariables = radiusCSSVariables;
|
|
6179
|
-
exports.reducedMotion = reducedMotion;
|
|
6180
6092
|
exports.secondaryColors = secondaryColors;
|
|
6181
6093
|
exports.semanticColors = semanticColors;
|
|
6182
6094
|
exports.semanticSpacing = semanticSpacing;
|
|
@@ -6185,9 +6097,7 @@ exports.shadowCSSVariables = shadowCSSVariables;
|
|
|
6185
6097
|
exports.shadowOpacity = shadowOpacity;
|
|
6186
6098
|
exports.spacing = spacing;
|
|
6187
6099
|
exports.spacingCSSVariables = spacingCSSVariables;
|
|
6188
|
-
exports.springs = springs;
|
|
6189
6100
|
exports.surfaceColors = surfaceColors;
|
|
6190
|
-
exports.tailwindMotionConfig = tailwindMotionConfig;
|
|
6191
6101
|
exports.tailwindRadiusConfig = tailwindRadiusConfig;
|
|
6192
6102
|
exports.tailwindShadowConfig = tailwindShadowConfig;
|
|
6193
6103
|
exports.tailwindSpacingConfig = tailwindSpacingConfig;
|
|
@@ -6196,5 +6106,4 @@ exports.tailwindTypographyConfig = tailwindTypographyConfig;
|
|
|
6196
6106
|
exports.textColors = textColors;
|
|
6197
6107
|
exports.textStyles = textStyles;
|
|
6198
6108
|
exports.tokenSystemSummary = tokenSystemSummary;
|
|
6199
|
-
exports.transitions = transitions;
|
|
6200
6109
|
exports.typographyCSSVariables = typographyCSSVariables;
|