@tenerife.music/ui 1.2.1 → 2.0.1

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