@eric-emg/symphiq-components 1.2.90 → 1.2.92

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.
Files changed (6) hide show
  1. package/fesm2022/symphiq-components.mjs +4261 -2938
  2. package/fesm2022/symphiq-components.mjs.map +1 -1
  3. package/index.d.ts +177 -27
  4. package/index.d.ts.map +1 -1
  5. package/package.json +2 -2
  6. package/styles.css +120 -0
package/styles.css CHANGED
@@ -24,6 +24,7 @@
24
24
  --color-orange-500: oklch(70.5% 0.213 47.604);
25
25
  --color-orange-600: oklch(64.6% 0.222 41.116);
26
26
  --color-orange-700: oklch(55.3% 0.195 38.402);
27
+ --color-orange-800: oklch(47% 0.157 37.304);
27
28
  --color-orange-900: oklch(40.8% 0.123 38.172);
28
29
  --color-amber-50: oklch(98.7% 0.022 95.277);
29
30
  --color-amber-100: oklch(96.2% 0.059 95.617);
@@ -42,6 +43,7 @@
42
43
  --color-emerald-500: oklch(69.6% 0.17 162.48);
43
44
  --color-emerald-600: oklch(59.6% 0.145 163.225);
44
45
  --color-emerald-700: oklch(50.8% 0.118 165.612);
46
+ --color-emerald-800: oklch(43.2% 0.095 166.913);
45
47
  --color-emerald-900: oklch(37.8% 0.077 168.94);
46
48
  --color-emerald-950: oklch(26.2% 0.051 172.552);
47
49
  --color-teal-50: oklch(98.4% 0.014 180.72);
@@ -123,6 +125,7 @@
123
125
  --font-weight-bold: 700;
124
126
  --tracking-wide: 0.025em;
125
127
  --tracking-wider: 0.05em;
128
+ --leading-snug: 1.375;
126
129
  --leading-relaxed: 1.625;
127
130
  --radius-lg: 0.5rem;
128
131
  --radius-xl: 0.75rem;
@@ -510,6 +513,9 @@
510
513
  .mb-20 {
511
514
  margin-bottom: calc(var(--spacing) * 20);
512
515
  }
516
+ .ml-3\.5 {
517
+ margin-left: calc(var(--spacing) * 3.5);
518
+ }
513
519
  .ml-auto {
514
520
  margin-left: auto;
515
521
  }
@@ -630,6 +636,12 @@
630
636
  .max-h-20 {
631
637
  max-height: calc(var(--spacing) * 20);
632
638
  }
639
+ .max-h-48 {
640
+ max-height: calc(var(--spacing) * 48);
641
+ }
642
+ .max-h-64 {
643
+ max-height: calc(var(--spacing) * 64);
644
+ }
633
645
  .max-h-96 {
634
646
  max-height: calc(var(--spacing) * 96);
635
647
  }
@@ -1634,6 +1646,12 @@
1634
1646
  .bg-orange-50 {
1635
1647
  background-color: var(--color-orange-50);
1636
1648
  }
1649
+ .bg-orange-50\/50 {
1650
+ background-color: color-mix(in srgb, oklch(98% 0.016 73.684) 50%, transparent);
1651
+ @supports (color: color-mix(in lab, red, red)) {
1652
+ background-color: color-mix(in oklab, var(--color-orange-50) 50%, transparent);
1653
+ }
1654
+ }
1637
1655
  .bg-orange-100 {
1638
1656
  background-color: var(--color-orange-100);
1639
1657
  }
@@ -2025,6 +2043,13 @@
2025
2043
  }
2026
2044
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2027
2045
  }
2046
+ .from-blue-500\/30 {
2047
+ --tw-gradient-from: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
2048
+ @supports (color: color-mix(in lab, red, red)) {
2049
+ --tw-gradient-from: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
2050
+ }
2051
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2052
+ }
2028
2053
  .from-blue-600 {
2029
2054
  --tw-gradient-from: var(--color-blue-600);
2030
2055
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -2079,6 +2104,13 @@
2079
2104
  }
2080
2105
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2081
2106
  }
2107
+ .from-emerald-500\/30 {
2108
+ --tw-gradient-from: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);
2109
+ @supports (color: color-mix(in lab, red, red)) {
2110
+ --tw-gradient-from: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
2111
+ }
2112
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2113
+ }
2082
2114
  .from-emerald-950\/20 {
2083
2115
  --tw-gradient-from: color-mix(in srgb, oklch(26.2% 0.051 172.552) 20%, transparent);
2084
2116
  @supports (color: color-mix(in lab, red, red)) {
@@ -2122,6 +2154,20 @@
2122
2154
  --tw-gradient-from: var(--color-orange-100);
2123
2155
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2124
2156
  }
2157
+ .from-orange-100\/90 {
2158
+ --tw-gradient-from: color-mix(in srgb, oklch(95.4% 0.038 75.164) 90%, transparent);
2159
+ @supports (color: color-mix(in lab, red, red)) {
2160
+ --tw-gradient-from: color-mix(in oklab, var(--color-orange-100) 90%, transparent);
2161
+ }
2162
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2163
+ }
2164
+ .from-orange-500\/30 {
2165
+ --tw-gradient-from: color-mix(in srgb, oklch(70.5% 0.213 47.604) 30%, transparent);
2166
+ @supports (color: color-mix(in lab, red, red)) {
2167
+ --tw-gradient-from: color-mix(in oklab, var(--color-orange-500) 30%, transparent);
2168
+ }
2169
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2170
+ }
2125
2171
  .from-purple-50 {
2126
2172
  --tw-gradient-from: var(--color-purple-50);
2127
2173
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -2465,6 +2511,13 @@
2465
2511
  }
2466
2512
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2467
2513
  }
2514
+ .to-blue-500\/20 {
2515
+ --tw-gradient-to: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
2516
+ @supports (color: color-mix(in lab, red, red)) {
2517
+ --tw-gradient-to: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
2518
+ }
2519
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2520
+ }
2468
2521
  .to-blue-600 {
2469
2522
  --tw-gradient-to: var(--color-blue-600);
2470
2523
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -2543,6 +2596,20 @@
2543
2596
  --tw-gradient-to: var(--color-orange-50);
2544
2597
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2545
2598
  }
2599
+ .to-orange-50\/90 {
2600
+ --tw-gradient-to: color-mix(in srgb, oklch(98% 0.016 73.684) 90%, transparent);
2601
+ @supports (color: color-mix(in lab, red, red)) {
2602
+ --tw-gradient-to: color-mix(in oklab, var(--color-orange-50) 90%, transparent);
2603
+ }
2604
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2605
+ }
2606
+ .to-orange-500\/20 {
2607
+ --tw-gradient-to: color-mix(in srgb, oklch(70.5% 0.213 47.604) 20%, transparent);
2608
+ @supports (color: color-mix(in lab, red, red)) {
2609
+ --tw-gradient-to: color-mix(in oklab, var(--color-orange-500) 20%, transparent);
2610
+ }
2611
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2612
+ }
2546
2613
  .to-pink-50 {
2547
2614
  --tw-gradient-to: var(--color-pink-50);
2548
2615
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -2874,6 +2941,10 @@
2874
2941
  --tw-leading: var(--leading-relaxed);
2875
2942
  line-height: var(--leading-relaxed);
2876
2943
  }
2944
+ .leading-snug {
2945
+ --tw-leading: var(--leading-snug);
2946
+ line-height: var(--leading-snug);
2947
+ }
2877
2948
  .font-bold {
2878
2949
  --tw-font-weight: var(--font-weight-bold);
2879
2950
  font-weight: var(--font-weight-bold);
@@ -2915,6 +2986,9 @@
2915
2986
  .text-amber-700 {
2916
2987
  color: var(--color-amber-700);
2917
2988
  }
2989
+ .text-blue-50 {
2990
+ color: var(--color-blue-50);
2991
+ }
2918
2992
  .text-blue-100 {
2919
2993
  color: var(--color-blue-100);
2920
2994
  }
@@ -2933,9 +3007,18 @@
2933
3007
  .text-blue-700 {
2934
3008
  color: var(--color-blue-700);
2935
3009
  }
3010
+ .text-blue-800 {
3011
+ color: var(--color-blue-800);
3012
+ }
2936
3013
  .text-blue-900 {
2937
3014
  color: var(--color-blue-900);
2938
3015
  }
3016
+ .text-emerald-50 {
3017
+ color: var(--color-emerald-50);
3018
+ }
3019
+ .text-emerald-100 {
3020
+ color: var(--color-emerald-100);
3021
+ }
2939
3022
  .text-emerald-300 {
2940
3023
  color: var(--color-emerald-300);
2941
3024
  }
@@ -2951,6 +3034,12 @@
2951
3034
  .text-emerald-700 {
2952
3035
  color: var(--color-emerald-700);
2953
3036
  }
3037
+ .text-emerald-800 {
3038
+ color: var(--color-emerald-800);
3039
+ }
3040
+ .text-emerald-900 {
3041
+ color: var(--color-emerald-900);
3042
+ }
2954
3043
  .text-indigo-400 {
2955
3044
  color: var(--color-indigo-400);
2956
3045
  }
@@ -2960,6 +3049,12 @@
2960
3049
  .text-indigo-600 {
2961
3050
  color: var(--color-indigo-600);
2962
3051
  }
3052
+ .text-orange-50 {
3053
+ color: var(--color-orange-50);
3054
+ }
3055
+ .text-orange-100 {
3056
+ color: var(--color-orange-100);
3057
+ }
2963
3058
  .text-orange-400 {
2964
3059
  color: var(--color-orange-400);
2965
3060
  }
@@ -2972,6 +3067,12 @@
2972
3067
  .text-orange-700 {
2973
3068
  color: var(--color-orange-700);
2974
3069
  }
3070
+ .text-orange-800 {
3071
+ color: var(--color-orange-800);
3072
+ }
3073
+ .text-orange-900 {
3074
+ color: var(--color-orange-900);
3075
+ }
2975
3076
  .text-purple-300 {
2976
3077
  color: var(--color-purple-300);
2977
3078
  }
@@ -2999,6 +3100,9 @@
2999
3100
  .text-red-700 {
3000
3101
  color: var(--color-red-700);
3001
3102
  }
3103
+ .text-slate-100 {
3104
+ color: var(--color-slate-100);
3105
+ }
3002
3106
  .text-slate-200 {
3003
3107
  color: var(--color-slate-200);
3004
3108
  }
@@ -3017,6 +3121,9 @@
3017
3121
  .text-slate-700 {
3018
3122
  color: var(--color-slate-700);
3019
3123
  }
3124
+ .text-slate-800 {
3125
+ color: var(--color-slate-800);
3126
+ }
3020
3127
  .text-slate-900 {
3021
3128
  color: var(--color-slate-900);
3022
3129
  }
@@ -3026,6 +3133,9 @@
3026
3133
  .text-white {
3027
3134
  color: var(--color-white);
3028
3135
  }
3136
+ .capitalize {
3137
+ text-transform: capitalize;
3138
+ }
3029
3139
  .uppercase {
3030
3140
  text-transform: uppercase;
3031
3141
  }
@@ -3068,6 +3178,10 @@
3068
3178
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
3069
3179
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3070
3180
  }
3181
+ .shadow-\[2px_2px_4px_rgba\(163\,163\,163\,0\.25\)\,-2px_-2px_4px_rgba\(255\,255\,255\,0\.75\)\] {
3182
+ --tw-shadow: 2px 2px 4px var(--tw-shadow-color, rgba(163,163,163,0.25)), -2px -2px 4px var(--tw-shadow-color, rgba(255,255,255,0.75));
3183
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3184
+ }
3071
3185
  .shadow-\[3px_3px_6px_rgba\(163\,163\,163\,0\.25\)\,-3px_-3px_6px_rgba\(255\,255\,255\,0\.75\)\] {
3072
3186
  --tw-shadow: 3px 3px 6px var(--tw-shadow-color, rgba(163,163,163,0.25)), -3px -3px 6px var(--tw-shadow-color, rgba(255,255,255,0.75));
3073
3187
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3200,6 +3314,12 @@
3200
3314
  --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-500) 10%, transparent) var(--tw-shadow-alpha), transparent);
3201
3315
  }
3202
3316
  }
3317
+ .shadow-orange-500\/20 {
3318
+ --tw-shadow-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 20%, transparent);
3319
+ @supports (color: color-mix(in lab, red, red)) {
3320
+ --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
3321
+ }
3322
+ }
3203
3323
  .shadow-purple-500\/5 {
3204
3324
  --tw-shadow-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 5%, transparent);
3205
3325
  @supports (color: color-mix(in lab, red, red)) {