@deframe-sdk/components 0.1.14 → 0.1.16

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 (8) hide show
  1. package/dist/index.d.mts +69 -63
  2. package/dist/index.d.ts +69 -63
  3. package/dist/index.js +402 -338
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +404 -333
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +81 -126
  8. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -43,8 +43,6 @@
43
43
  --text-xs--line-height: calc(1 / 0.75);
44
44
  --text-sm: 0.875rem;
45
45
  --text-sm--line-height: calc(1.25 / 0.875);
46
- --text-lg: 1.125rem;
47
- --text-lg--line-height: calc(1.75 / 1.125);
48
46
  --font-weight-normal: 400;
49
47
  --font-weight-medium: 500;
50
48
  --font-weight-semibold: 600;
@@ -342,8 +340,8 @@
342
340
  .mx-auto {
343
341
  margin-inline: auto;
344
342
  }
345
- .-my-2 {
346
- margin-block: calc(var(--spacing) * -2);
343
+ .-my-5 {
344
+ margin-block: calc(var(--spacing) * -5);
347
345
  }
348
346
  .-my-\[var\(--deframe-widget-size-gap-sm\)\] {
349
347
  margin-block: calc(var(--deframe-widget-size-gap-sm) * -1);
@@ -360,9 +358,6 @@
360
358
  .mt-0\.5 {
361
359
  margin-top: calc(var(--spacing) * 0.5);
362
360
  }
363
- .mt-4 {
364
- margin-top: calc(var(--spacing) * 4);
365
- }
366
361
  .mt-\[-4px\] {
367
362
  margin-top: -4px;
368
363
  }
@@ -405,9 +400,6 @@
405
400
  .\[margin-bottom\:var\(--deframe-widget-size-gap-xs\)\] {
406
401
  margin-bottom: var(--deframe-widget-size-gap-xs);
407
402
  }
408
- .mb-4 {
409
- margin-bottom: calc(var(--spacing) * 4);
410
- }
411
403
  .mb-\[6px\] {
412
404
  margin-bottom: 6px;
413
405
  }
@@ -510,11 +502,11 @@
510
502
  .h-32 {
511
503
  height: calc(var(--spacing) * 32);
512
504
  }
513
- .h-48 {
514
- height: calc(var(--spacing) * 48);
505
+ .h-40 {
506
+ height: calc(var(--spacing) * 40);
515
507
  }
516
- .h-64 {
517
- height: calc(var(--spacing) * 64);
508
+ .h-60 {
509
+ height: calc(var(--spacing) * 60);
518
510
  }
519
511
  .h-80 {
520
512
  height: calc(var(--spacing) * 80);
@@ -1845,10 +1837,6 @@
1845
1837
  .font-\[inherit\] {
1846
1838
  font-family: inherit;
1847
1839
  }
1848
- .text-lg {
1849
- font-size: var(--text-lg);
1850
- line-height: var(--tw-leading, var(--text-lg--line-height));
1851
- }
1852
1840
  .text-sm {
1853
1841
  font-size: var(--text-sm);
1854
1842
  line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -2089,9 +2077,6 @@
2089
2077
  .text-\[color\:var\(--deframe-widget-color-brand-secondary\)\] {
2090
2078
  color: var(--deframe-widget-color-brand-secondary);
2091
2079
  }
2092
- .text-\[color\:var\(--deframe-widget-color-brand-tertiary\)\] {
2093
- color: var(--deframe-widget-color-brand-tertiary);
2094
- }
2095
2080
  .text-\[color\:var\(--deframe-widget-color-placeholder-primary\)\] {
2096
2081
  color: var(--deframe-widget-color-placeholder-primary);
2097
2082
  }
@@ -2107,6 +2092,18 @@
2107
2092
  .text-\[color\:var\(--deframe-widget-color-state-warning\)\] {
2108
2093
  color: var(--deframe-widget-color-state-warning);
2109
2094
  }
2095
+ .text-\[color\:var\(--deframe-widget-color-text-highlight\)\] {
2096
+ color: var(--deframe-widget-color-text-highlight);
2097
+ }
2098
+ .text-\[color\:var\(--deframe-widget-color-text-highlight-disabled\)\] {
2099
+ color: var(--deframe-widget-color-text-highlight-disabled);
2100
+ }
2101
+ .text-\[color\:var\(--deframe-widget-color-text-inverse\)\] {
2102
+ color: var(--deframe-widget-color-text-inverse);
2103
+ }
2104
+ .text-\[color\:var\(--deframe-widget-color-text-inverse-disabled\)\] {
2105
+ color: var(--deframe-widget-color-text-inverse-disabled);
2106
+ }
2110
2107
  .text-\[color\:var\(--deframe-widget-color-text-primary\)\] {
2111
2108
  color: var(--deframe-widget-color-text-primary);
2112
2109
  }
@@ -2131,9 +2128,6 @@
2131
2128
  .text-\[font-size\:var\(--deframe-widget-font-size-sm\)\] {
2132
2129
  color: var(--deframe-widget-font-size-sm);
2133
2130
  }
2134
- .text-\[var\(--deframe-widget-color-brand-primary-disabled\)\] {
2135
- color: var(--deframe-widget-color-brand-primary-disabled);
2136
- }
2137
2131
  .text-\[var\(--deframe-widget-color-state-error\)\] {
2138
2132
  color: var(--deframe-widget-color-state-error);
2139
2133
  }
@@ -2149,9 +2143,6 @@
2149
2143
  .text-\[var\(--deframe-widget-color-text-primary\)\] {
2150
2144
  color: var(--deframe-widget-color-text-primary);
2151
2145
  }
2152
- .text-\[var\(--deframe-widget-color-text-primary-disabled\)\] {
2153
- color: var(--deframe-widget-color-text-primary-disabled);
2154
- }
2155
2146
  .text-\[var\(--deframe-widget-color-text-secondary\)\] {
2156
2147
  color: var(--deframe-widget-color-text-secondary);
2157
2148
  }
@@ -2285,6 +2276,10 @@
2285
2276
  }
2286
2277
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2287
2278
  }
2279
+ .shadow-md {
2280
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2281
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2282
+ }
2288
2283
  .shadow-sm {
2289
2284
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2290
2285
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2390,6 +2385,11 @@
2390
2385
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2391
2386
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2392
2387
  }
2388
+ .transition-shadow {
2389
+ transition-property: box-shadow;
2390
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2391
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2392
+ }
2393
2393
  .transition-transform {
2394
2394
  transition-property: transform, translate, scale, rotate;
2395
2395
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2636,6 +2636,14 @@
2636
2636
  }
2637
2637
  }
2638
2638
  }
2639
+ .hover\:shadow-lg {
2640
+ &:hover {
2641
+ @media (hover: hover) {
2642
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2643
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2644
+ }
2645
+ }
2646
+ }
2639
2647
  .focus\:border-\[color\:var\(--deframe-widget-color-brand-primary\)\] {
2640
2648
  &:focus {
2641
2649
  border-color: var(--deframe-widget-color-brand-primary);
@@ -2738,8 +2746,7 @@
2738
2746
  }
2739
2747
  }
2740
2748
  }
2741
- :root,
2742
- .deframe-widget {
2749
+ :root {
2743
2750
  --deframe-widget-font-family: 'Satoshi', Inter, sans-serif;
2744
2751
  --deframe-widget-font-size-xs: 11px;
2745
2752
  --deframe-widget-font-size-sm: 13px;
@@ -2769,6 +2776,12 @@
2769
2776
  --deframe-widget-color-text-tertiary: #898d95;
2770
2777
  --deframe-widget-color-text-tertiary-dark: #c6c8cc;
2771
2778
  --deframe-widget-color-text-tertiary-disabled: #5c5f66;
2779
+ --deframe-widget-color-text-inverse: #252050;
2780
+ --deframe-widget-color-text-inverse-dark: #FFFFFF;
2781
+ --deframe-widget-color-text-inverse-disabled: #FFFFFF;
2782
+ --deframe-widget-color-text-highlight: #2BA176;
2783
+ --deframe-widget-color-text-highlight-dark: #2BA176;
2784
+ --deframe-widget-color-text-highlight-disabled: #2BA176;
2772
2785
  --deframe-widget-color-placeholder-primary: #898d95;
2773
2786
  --deframe-widget-color-placeholder-primary-dark: #e3e4e8;
2774
2787
  --deframe-widget-color-placeholder-primary-disabled: #898d95;
@@ -2787,6 +2800,9 @@
2787
2800
  --deframe-widget-color-brand-tertiary: #405eff;
2788
2801
  --deframe-widget-color-brand-tertiary-dark: #a9abf7;
2789
2802
  --deframe-widget-color-brand-tertiary-disabled: #d7deea;
2803
+ --deframe-widget-color-brand-tint: #EEF0FF;
2804
+ --deframe-widget-color-brand-tint-dark: #EEF0FF;
2805
+ --deframe-widget-color-brand-tint-disabled: #525866;
2790
2806
  --deframe-widget-color-bg-primary: #ffffff;
2791
2807
  --deframe-widget-color-bg-primary-dark: #0e0e0e;
2792
2808
  --deframe-widget-color-bg-primary-disabled: #eaecf0;
@@ -2794,17 +2810,23 @@
2794
2810
  --deframe-widget-color-bg-secondary-dark: #1a1a1a;
2795
2811
  --deframe-widget-color-bg-secondary-disabled: #eaecf0;
2796
2812
  --deframe-widget-color-bg-tertiary: #eaecf0;
2797
- --deframe-widget-color-bg-tertiary-dark: rgba(64, 94, 255, 0.15);
2798
- --deframe-widget-color-bg-tertiary-disabled: rgba(64, 94, 255, 0.08);
2799
- --deframe-widget-color-border-primary: rgba(64, 94, 255, 0.25);
2800
- --deframe-widget-color-border-primary-dark: rgba(64, 94, 255, 0.3);
2801
- --deframe-widget-color-border-primary-disabled: rgba(64, 94, 255, 0.12);
2813
+ --deframe-widget-color-bg-tertiary-dark: #405EFF26;
2814
+ --deframe-widget-color-bg-tertiary-disabled: #405EFF14;
2815
+ --deframe-widget-color-bg-raised: #FFFFFF;
2816
+ --deframe-widget-color-bg-raised-dark: #FFFFFF;
2817
+ --deframe-widget-color-bg-raised-disabled: #FFFFFF;
2818
+ --deframe-widget-color-bg-inverse: #252050;
2819
+ --deframe-widget-color-bg-inverse-dark: #252050;
2820
+ --deframe-widget-color-bg-inverse-disabled: #252050;
2821
+ --deframe-widget-color-border-primary: #405EFF40;
2822
+ --deframe-widget-color-border-primary-dark: #405EFF4D;
2823
+ --deframe-widget-color-border-primary-disabled: #405EFF1F;
2802
2824
  --deframe-widget-color-border-secondary: #e3e4e8;
2803
2825
  --deframe-widget-color-border-secondary-dark: #2c2c2c;
2804
2826
  --deframe-widget-color-border-secondary-disabled: #eaecf0;
2805
- --deframe-widget-color-border-tertiary: rgba(64, 94, 255, 0.08);
2806
- --deframe-widget-color-border-tertiary-dark: rgba(255, 255, 255, 0.05);
2807
- --deframe-widget-color-border-tertiary-disabled: rgba(64, 94, 255, 0.04);
2827
+ --deframe-widget-color-border-tertiary: #405EFF14;
2828
+ --deframe-widget-color-border-tertiary-dark: #FFFFFF0D;
2829
+ --deframe-widget-color-border-tertiary-disabled: #405EFF0A;
2808
2830
  --deframe-widget-color-state-info: #58b4ff;
2809
2831
  --deframe-widget-color-state-warning: #f6a700;
2810
2832
  --deframe-widget-color-state-error: #ff4d4f;
@@ -2846,101 +2868,39 @@
2846
2868
  --deframe-widget-size-radius-xxl: 32px;
2847
2869
  --deframe-widget-size-radius-full: 9999px;
2848
2870
  }
2849
- :root:is(.dark, .cryptocontrol, .cryptocontrol-v2),
2850
- .deframe-widget:is(.dark, .cryptocontrol, .cryptocontrol-v2) {
2851
- --deframe-widget-color-text-primary: var(--deframe-widget-color-text-primary-dark);
2871
+ :root.dark {
2872
+ --deframe-widget-color-text-primary: #ffffff;
2873
+ --deframe-widget-color-text-primary-dark: #ffffff;
2852
2874
  --deframe-widget-color-text-primary-disabled: #898d95;
2853
- --deframe-widget-color-text-secondary: var(--deframe-widget-color-text-secondary-dark);
2875
+ --deframe-widget-color-text-secondary: #5c5f66;
2854
2876
  --deframe-widget-color-text-secondary-disabled: #898d95;
2855
- --deframe-widget-color-text-tertiary: var(--deframe-widget-color-text-tertiary-dark);
2877
+ --deframe-widget-color-text-tertiary: #898d95;
2856
2878
  --deframe-widget-color-text-tertiary-disabled: #525866;
2857
- --deframe-widget-color-placeholder-primary: var(--deframe-widget-color-placeholder-primary-dark);
2879
+ --deframe-widget-color-placeholder-primary: #898d95;
2858
2880
  --deframe-widget-color-placeholder-primary-disabled: #898d95;
2859
- --deframe-widget-color-placeholder-secondary: var(--deframe-widget-color-placeholder-secondary-dark);
2881
+ --deframe-widget-color-placeholder-secondary: #c6c8cc;
2860
2882
  --deframe-widget-color-placeholder-secondary-disabled: #525866;
2861
- --deframe-widget-color-placeholder-tertiary: var(--deframe-widget-color-placeholder-tertiary-dark);
2883
+ --deframe-widget-color-placeholder-tertiary: #5c5f66;
2862
2884
  --deframe-widget-color-placeholder-tertiary-disabled: #3a3a3a;
2863
- --deframe-widget-color-brand-primary: var(--deframe-widget-color-brand-primary-dark);
2885
+ --deframe-widget-color-brand-primary: #405eff;
2864
2886
  --deframe-widget-color-brand-primary-disabled: #525866;
2865
- --deframe-widget-color-brand-secondary: var(--deframe-widget-color-brand-secondary-dark);
2887
+ --deframe-widget-color-brand-secondary: #a9abf7;
2866
2888
  --deframe-widget-color-brand-secondary-disabled: #525866;
2867
- --deframe-widget-color-brand-tertiary: var(--deframe-widget-color-brand-tertiary-dark);
2889
+ --deframe-widget-color-brand-tertiary: #405eff;
2868
2890
  --deframe-widget-color-brand-tertiary-disabled: #525866;
2869
- --deframe-widget-color-bg-primary: var(--deframe-widget-color-bg-primary-dark);
2891
+ --deframe-widget-color-bg-primary: #ffffff;
2870
2892
  --deframe-widget-color-bg-primary-disabled: #232323;
2871
- --deframe-widget-color-bg-secondary: var(--deframe-widget-color-bg-secondary-dark);
2893
+ --deframe-widget-color-bg-secondary: #f8f9fa;
2872
2894
  --deframe-widget-color-bg-secondary-disabled: #141414;
2873
- --deframe-widget-color-bg-tertiary: var(--deframe-widget-color-bg-tertiary-dark);
2874
- --deframe-widget-color-bg-tertiary-disabled: rgba(64, 94, 255, 0.08);
2875
- --deframe-widget-color-border-primary: var(--deframe-widget-color-border-primary-dark);
2876
- --deframe-widget-color-border-primary-disabled: rgba(255, 255, 255, 0.08);
2877
- --deframe-widget-color-border-secondary: var(--deframe-widget-color-border-secondary-dark);
2878
- --deframe-widget-color-border-secondary-disabled: rgba(255, 255, 255, 0.06);
2879
- --deframe-widget-color-border-tertiary: var(--deframe-widget-color-border-tertiary-dark);
2880
- --deframe-widget-color-border-tertiary-disabled: rgba(255, 255, 255, 0.03);
2881
- }
2882
- :root.cryptocontrol,
2883
- .deframe-widget.cryptocontrol {
2884
- --deframe-widget-color-brand-primary: #1fc16b;
2885
- --deframe-widget-color-brand-primary-dark: #1fc16b;
2886
- --deframe-widget-color-brand-tertiary: #1fc16b;
2887
- --deframe-widget-color-brand-tertiary-dark: #1fc16b;
2888
- --deframe-widget-color-bg-tertiary: rgba(31, 193, 107, 0.18);
2889
- --deframe-widget-color-bg-tertiary-dark: rgba(31, 193, 107, 0.18);
2890
- --deframe-widget-color-bg-tertiary-disabled: rgba(31, 193, 107, 0.1);
2891
- --deframe-widget-color-border-primary: rgba(31, 193, 107, 0.4);
2892
- --deframe-widget-color-border-primary-dark: rgba(31, 193, 107, 0.4);
2893
- --deframe-widget-color-border-primary-disabled: rgba(31, 193, 107, 0.18);
2894
- --deframe-widget-color-state-success: #1fc16b;
2895
- }
2896
- :root.cryptocontrol-v2,
2897
- .deframe-widget.cryptocontrol-v2 {
2898
- --deframe-widget-color-text-primary: #ffffff;
2899
- --deframe-widget-color-text-primary-dark: #ffffff;
2900
- --deframe-widget-color-text-primary-disabled: #525866;
2901
- --deframe-widget-color-text-secondary: #99a0ae;
2902
- --deframe-widget-color-text-secondary-dark: #99a0ae;
2903
- --deframe-widget-color-text-secondary-disabled: #525866;
2904
- --deframe-widget-color-text-tertiary: #525866;
2905
- --deframe-widget-color-text-tertiary-dark: #525866;
2906
- --deframe-widget-color-text-tertiary-disabled: #525866;
2907
- --deframe-widget-color-placeholder-primary: #99a0ae;
2908
- --deframe-widget-color-placeholder-primary-dark: #99a0ae;
2909
- --deframe-widget-color-placeholder-primary-disabled: #525866;
2910
- --deframe-widget-color-placeholder-secondary: #525866;
2911
- --deframe-widget-color-placeholder-secondary-dark: #525866;
2912
- --deframe-widget-color-placeholder-secondary-disabled: #525866;
2913
- --deframe-widget-color-placeholder-tertiary: #525866;
2914
- --deframe-widget-color-placeholder-tertiary-dark: #525866;
2915
- --deframe-widget-color-placeholder-tertiary-disabled: #525866;
2916
- --deframe-widget-color-brand-primary: #1fc16b;
2917
- --deframe-widget-color-brand-primary-dark: #1fc16b;
2918
- --deframe-widget-color-brand-primary-disabled: #525866;
2919
- --deframe-widget-color-brand-secondary: #a9abf7;
2920
- --deframe-widget-color-brand-secondary-dark: #a9abf7;
2921
- --deframe-widget-color-brand-secondary-disabled: #525866;
2922
- --deframe-widget-color-brand-tertiary: #1fc16b;
2923
- --deframe-widget-color-brand-tertiary-dark: #1fc16b;
2924
- --deframe-widget-color-brand-tertiary-disabled: #525866;
2925
- --deframe-widget-color-bg-primary: #11141b;
2926
- --deframe-widget-color-bg-primary-dark: #11141b;
2927
- --deframe-widget-color-bg-primary-disabled: #181b25;
2928
- --deframe-widget-color-bg-secondary: #181b25;
2929
- --deframe-widget-color-bg-secondary-dark: #181b25;
2930
- --deframe-widget-color-bg-secondary-disabled: #222530;
2931
- --deframe-widget-color-bg-tertiary: #222530;
2932
- --deframe-widget-color-bg-tertiary-dark: #222530;
2933
- --deframe-widget-color-bg-tertiary-disabled: #181b25;
2934
- --deframe-widget-color-border-primary: rgba(255, 255, 255, 0.12);
2935
- --deframe-widget-color-border-primary-dark: rgba(255, 255, 255, 0.12);
2936
- --deframe-widget-color-border-primary-disabled: rgba(255, 255, 255, 0.05);
2937
- --deframe-widget-color-border-secondary: rgba(255, 255, 255, 0.07);
2938
- --deframe-widget-color-border-secondary-dark: rgba(255, 255, 255, 0.07);
2939
- --deframe-widget-color-border-secondary-disabled: rgba(255, 255, 255, 0.05);
2940
- --deframe-widget-color-border-tertiary: rgba(255, 255, 255, 0.05);
2941
- --deframe-widget-color-border-tertiary-dark: rgba(255, 255, 255, 0.05);
2942
- --deframe-widget-color-border-tertiary-disabled: rgba(255, 255, 255, 0.03);
2943
- --deframe-widget-color-state-success: #1fc16b;
2895
+ --deframe-widget-color-bg-tertiary: #eaecf0;
2896
+ --deframe-widget-color-bg-tertiary-disabled: #405EFF14;
2897
+ --deframe-widget-color-bg-raised: #ffffff;
2898
+ --deframe-widget-color-border-primary: #405EFF40;
2899
+ --deframe-widget-color-border-primary-disabled: #FFFFFF14;
2900
+ --deframe-widget-color-border-secondary: #e3e4e8;
2901
+ --deframe-widget-color-border-secondary-disabled: #FFFFFF0F;
2902
+ --deframe-widget-color-border-tertiary: #405EFF14;
2903
+ --deframe-widget-color-border-tertiary-disabled: #FFFFFF08;
2944
2904
  }
2945
2905
  .deframe-widget {
2946
2906
  background: var(--deframe-widget-color-bg-primary);
@@ -2953,11 +2913,6 @@
2953
2913
  .deframe-widget select {
2954
2914
  font-family: inherit;
2955
2915
  }
2956
- body {
2957
- background: var(--deframe-widget-color-bg-primary);
2958
- color: var(--deframe-widget-color-text-primary);
2959
- font-family: var(--deframe-widget-font-family);
2960
- }
2961
2916
  @keyframes deframe-widget-slide-up {
2962
2917
  0% {
2963
2918
  transform: translateY(100%);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deframe-sdk/components",
3
- "version": "0.1.14",
3
+ "version": "0.1.16",
4
4
  "packageManager": "pnpm@9.0.0",
5
5
  "description": "Deframe SDK React component library",
6
6
  "engines": {