@tenerife.music/ui 1.2.0 → 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.
@@ -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 future extensibility
430
+ * Organized by variant for token-driven styling
425
431
  */
426
432
  variant: {
427
433
  default: {
428
- padding: "p-md",
429
- radius: "rounded-lg"
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
- padding: "p-md",
433
- radius: "rounded-lg"
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
- padding: "p-md",
437
- radius: "rounded-lg"
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
- padding: "p-md",
441
- radius: "rounded-lg"
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
- padding: "p-md",
445
- radius: "rounded-lg"
446
- },
447
- // Legacy semantic variants (mapped to canonical)
448
- success: {
449
- padding: "p-md",
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
- icon: "w-9"
680
- // 36px width for icon buttons
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: "bg-gradient-to-t from-black/60 via-transparent to-transparent"
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: "bg-gradient-to-br from-muted to-muted/50"
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: "bg-gradient-to-r from-accent-500 to-primary-600"
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 xs, sm, md, lg, xl sizes
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 xs, sm, md, lg, xl sizes
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: "transition-all duration-200 ease-in-out"
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 motion tokens for duration and easing
2758
+ * Uses MOTION_TOKENS for canonical motion values
2762
2759
  */
2763
2760
  transition: {
2764
- handle: "transition-transform duration-300 ease-in-out",
2765
- // Handle slide animation
2766
- track: "transition-colors duration-300 ease-in-out",
2767
- // Track color transition
2768
- combined: "transition-all duration-300 ease-in-out"
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: "transition-all duration-200 ease-in-out"
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
- flat: "shadow-none",
3011
+ default: "shadow-none",
3013
3012
  // No shadow - maps to elevationShadows.none
3014
- raised: "shadow-sm",
3013
+ elevated: "shadow-sm",
3015
3014
  // Small shadow - maps to elevationShadows.sm
3016
- sunken: "shadow-none",
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
- flat: {
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
- raised: {
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
- sunken: {
3042
+ outlined: {
3043
3043
  padding: "p-md",
3044
3044
  radius: "rounded-md",
3045
3045
  shadow: "shadow-none",
3046
- bg: "bg-muted",
3047
- border: "border border-border"
3046
+ bg: "bg-transparent",
3047
+ border: "border-2 border-border"
3048
3048
  },
3049
- outline: {
3049
+ filled: {
3050
3050
  padding: "p-md",
3051
3051
  radius: "rounded-md",
3052
3052
  shadow: "shadow-none",
3053
- bg: "bg-transparent",
3054
- border: "border-2 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-[384px]",
4408
- // Maximum height for scrollable content (24rem = 384px)
4409
- minWidth: "min-w-[128px]"
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 motionV2Durations = {
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 motionV2Easings = {
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 motionV2Transitions = {
4818
- fast: `${motionV2Durations.fast} ${motionV2Easings.standard}`,
4819
- normal: `${motionV2Durations.normal} ${motionV2Easings.standard}`,
4820
- slow: `${motionV2Durations.slow} ${motionV2Easings.emphasized}`,
4821
- soft: `${motionV2Durations.normal} ${motionV2Easings.soft}`,
4822
- reduced: `${motionV2Durations.reduced} linear`
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 motionV2Fade = {
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 motionV2Scale = {
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 motionV2Slide = {
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 motionV2Combined = {
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 motionV2CSSVariables = {
5176
+ var motionCSSVariables = {
4939
5177
  // Durations
4940
- "--motion-duration-fast": motionV2Durations.fast,
4941
- "--motion-duration-normal": motionV2Durations.normal,
4942
- "--motion-duration-slow": motionV2Durations.slow,
4943
- "--motion-duration-reduced": motionV2Durations.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": motionV2Easings.soft,
4946
- "--motion-easing-standard": motionV2Easings.standard,
4947
- "--motion-easing-emphasized": motionV2Easings.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": motionV2Transitions.fast,
4950
- "--motion-transition-normal": motionV2Transitions.normal,
4951
- "--motion-transition-slow": motionV2Transitions.slow,
4952
- "--motion-transition-soft": motionV2Transitions.soft,
4953
- "--motion-transition-reduced": motionV2Transitions.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 motionV2TailwindConfig = {
5202
+ var motionTailwindConfig = {
4956
5203
  transitionDuration: {
4957
- ...motionV2Durations
5204
+ ...motionDurations
4958
5205
  },
4959
5206
  transitionTimingFunction: {
4960
- ...motionV2Easings
5207
+ ...motionEasings
5208
+ },
5209
+ transitionProperty: {
5210
+ ...motionTransitionProperty
4961
5211
  },
4962
5212
  keyframes: {
4963
5213
  // Fade
4964
- "fade-in": motionV2Fade.in,
4965
- "fade-out": motionV2Fade.out,
5214
+ "fade-in": motionFade.in,
5215
+ "fade-out": motionFade.out,
4966
5216
  // Scale
4967
- "scale-in": motionV2Scale.in,
4968
- "scale-out": motionV2Scale.out,
5217
+ "scale-in": motionScale.in,
5218
+ "scale-out": motionScale.out,
4969
5219
  // Slide
4970
- "slide-up-in": motionV2Slide.up.in,
4971
- "slide-up-out": motionV2Slide.up.out,
4972
- "slide-down-in": motionV2Slide.down.in,
4973
- "slide-down-out": motionV2Slide.down.out,
4974
- "slide-left-in": motionV2Slide.left.in,
4975
- "slide-left-out": motionV2Slide.left.out,
4976
- "slide-right-in": motionV2Slide.right.in,
4977
- "slide-right-out": motionV2Slide.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": motionV2Combined.fadeScale.in,
4980
- "fade-scale-out": motionV2Combined.fadeScale.out,
4981
- "fade-slide-up-in": motionV2Combined.fadeSlideUp.in,
4982
- "fade-slide-up-out": motionV2Combined.fadeSlideUp.out,
4983
- "fade-slide-down-in": motionV2Combined.fadeSlideDown.in,
4984
- "fade-slide-down-out": motionV2Combined.fadeSlideDown.out,
4985
- "fade-slide-left-in": motionV2Combined.fadeSlideLeft.in,
4986
- "fade-slide-left-out": motionV2Combined.fadeSlideLeft.out,
4987
- "fade-slide-right-in": motionV2Combined.fadeSlideRight.in,
4988
- "fade-slide-right-out": motionV2Combined.fadeSlideRight.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
- // src/FOUNDATION/tokens/motion.ts
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
- // Reduced motion easing (linear for instant)
5244
+ /** Reduced motion easing (linear for instant) */
5250
5245
  easing: "linear",
5251
- // Reduced motion transition (instant)
5246
+ /** Reduced motion transition (instant) */
5252
5247
  transition: "0ms linear",
5253
- // CSS media query for reduced motion
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.motionV2CSSVariables = motionV2CSSVariables;
6168
- exports.motionV2Combined = motionV2Combined;
6169
- exports.motionV2Durations = motionV2Durations;
6170
- exports.motionV2Easings = motionV2Easings;
6171
- exports.motionV2Fade = motionV2Fade;
6172
- exports.motionV2Scale = motionV2Scale;
6173
- exports.motionV2Slide = motionV2Slide;
6174
- exports.motionV2TailwindConfig = motionV2TailwindConfig;
6175
- exports.motionV2Transitions = motionV2Transitions;
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;