@algobright/solana-connector 0.1.0 → 0.1.2

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 (29) hide show
  1. package/dist/{Avatar.module-P7KEBP7R.module.css → Avatar.module-AACAT34D.module.css} +42 -42
  2. package/dist/{Button.module-7TPMDOJN.module.css → Button.module-HQNNX6IB.module.css} +145 -145
  3. package/dist/{Collapsible.module-NXSN3MGI.module.css → Collapsible.module-F4VIL5FH.module.css} +24 -24
  4. package/dist/ConnectButton.d.mts +4 -0
  5. package/dist/ConnectButton.d.ts +4 -0
  6. package/dist/ConnectButton.js +145 -39
  7. package/dist/ConnectButton.js.map +1 -1
  8. package/dist/ConnectButton.mjs +140 -34
  9. package/dist/ConnectButton.mjs.map +1 -1
  10. package/dist/{ConnectButton.module-UWQKSVTP.module.css → ConnectButton.module-O3M32YJK.module.css} +8 -8
  11. package/dist/{CustomQRCode.module-FOXENMZG.module.css → CustomQRCode.module-JW3JU3FX.module.css} +176 -176
  12. package/dist/{Dialog.module-HCRT743N.module.css → Dialog.module-AYJTMDAD.module.css} +136 -136
  13. package/dist/{Menu.module-GV627ZLI.module.css → Menu.module-6ATSLATI.module.css} +79 -79
  14. package/dist/{Spinner.module-G7GUQJZJ.module.css → Spinner.module-BLSWZSIL.module.css} +16 -16
  15. package/dist/WalletDropdown.d.mts +4 -0
  16. package/dist/WalletDropdown.d.ts +4 -0
  17. package/dist/WalletDropdown.js +132 -28
  18. package/dist/WalletDropdown.js.map +1 -1
  19. package/dist/WalletDropdown.mjs +129 -25
  20. package/dist/WalletDropdown.mjs.map +1 -1
  21. package/dist/{WalletDropdown.module-342MM7XM.module.css → WalletDropdown.module-DOK7CUOQ.module.css} +223 -220
  22. package/dist/WalletModal.js +7 -7
  23. package/dist/WalletModal.js.map +1 -1
  24. package/dist/WalletModal.mjs +7 -7
  25. package/dist/WalletModal.mjs.map +1 -1
  26. package/dist/{WalletModal.module-PVV5PRXU.module.css → WalletModal.module-ZRTJGOQY.module.css} +341 -341
  27. package/dist/index.js.map +1 -1
  28. package/dist/index.mjs.map +1 -1
  29. package/package.json +11 -9
@@ -1,176 +1,176 @@
1
- /* --- Main Container --- */
2
- :where(.container) {
3
- position: relative;
4
- display: block;
5
- }
6
-
7
- /* --- Viewfinder Frame --- */
8
- :where(.viewfinder) {
9
- position: absolute;
10
- inset: 0;
11
- z-index: 10;
12
- pointer-events: none;
13
- }
14
-
15
- /* --- Content Area (The box containing the QR) --- */
16
- :where(.contentArea) {
17
- position: absolute;
18
- inset: 0;
19
- z-index: 20;
20
- display: flex;
21
- align-items: center;
22
- justify-content: center;
23
-
24
- /* Borders & Shape */
25
- border: 3px solid rgba(0, 0, 0, 0.05);
26
- border-radius: 28px;
27
- overflow: hidden;
28
- }
29
-
30
- /* Error State for Content Area */
31
- :where(.contentArea[data-error="true"]) {
32
- border-color: rgba(239, 68, 68, 0.3); /* red-500/30 */
33
- }
34
-
35
- /* --- Glow Background --- */
36
- :where(.glow) {
37
- position: absolute;
38
- inset: 0;
39
- opacity: 0.25;
40
- filter: blur(15px);
41
- pointer-events: none;
42
- transform: scale(0.9);
43
- background: linear-gradient(to bottom right, #f3e8ff, #bfdbfe);
44
- }
45
-
46
- :where(.glow[data-error="true"]) {
47
- background: linear-gradient(to bottom right, #ef4444, #dc2626);
48
- }
49
-
50
- /* --- Shine Animation --- */
51
- :where(.shine) {
52
- position: absolute;
53
- inset: 0;
54
- z-index: 30;
55
- pointer-events: none;
56
- overflow: hidden;
57
-
58
- /* The Shine Gradient */
59
- background: linear-gradient(
60
- to bottom,
61
- rgba(255, 255, 255, 0) 0%,
62
- rgba(255, 255, 255, 0.6) 50%,
63
- rgba(255, 255, 255, 0) 100%
64
- );
65
-
66
- /* The Animation */
67
- animation: qrScanSlide 2s ease-in-out infinite;
68
- }
69
-
70
- @keyframes qrScanSlide {
71
- :where(0%) {
72
- transform: translateY(-100%);
73
- }
74
- :where(100%) {
75
- transform: translateY(100%);
76
- }
77
- }
78
-
79
- /* --- QR Wrapper --- */
80
- :where(.qrWrapper) {
81
- position: relative;
82
- z-index: 20;
83
- display: flex;
84
- align-items: center;
85
- justify-content: center;
86
- transform: scale(1);
87
- }
88
-
89
- /* --- Logo in Center --- */
90
- :where(.logoWrapper) {
91
- position: absolute;
92
- left: 50%;
93
- top: 50%;
94
- transform: translate(-50%, -50%);
95
- overflow: hidden;
96
- border-radius: 17px;
97
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
98
- }
99
-
100
- /* --- SVG Utility --- */
101
- :where(.svgFull) {
102
- width: 100%;
103
- height: 100%;
104
- }
105
-
106
- /* =========================================
107
- Placeholder Component Styles
108
- ========================================= */
109
-
110
- :where(.placeholderContainer) {
111
- position: relative;
112
- display: flex;
113
- align-items: center;
114
- justify-content: center;
115
- }
116
-
117
- /* The faint dots in the background */
118
- :where(.placeholderPattern) {
119
- position: absolute;
120
- inset: 0;
121
- opacity: 0.1;
122
- border-radius: 14px;
123
- background-size: 1.888% 1.888%;
124
- background-repeat: repeat;
125
- }
126
-
127
- /* The 3 corner squares */
128
- :where(.cornerSquare) {
129
- position: absolute;
130
- border-radius: 12px;
131
- opacity: 0.1;
132
- width: 13.25%;
133
- height: 13.25%;
134
- }
135
-
136
- /* The center blank area */
137
- :where(.centerArea) {
138
- position: relative;
139
- border-radius: 20px;
140
- z-index: 10;
141
- width: 28%;
142
- height: 28%;
143
- }
144
-
145
- /* Loading Spinner Wrapper */
146
- :where(.loaderWrapper) {
147
- position: absolute;
148
- inset: 0;
149
- display: flex;
150
- flex-direction: column;
151
- align-items: center;
152
- justify-content: center;
153
- z-index: 20;
154
- }
155
-
156
- :where(.spinner) {
157
- width: 2rem; /* w-8 */
158
- height: 2rem; /* h-8 */
159
- border-width: 2px;
160
- border-style: solid;
161
- border-color: currentColor;
162
- border-top-color: transparent;
163
- border-radius: 50%;
164
- margin-bottom: 0.75rem; /* mb-3 */
165
- animation: spin 1s linear infinite;
166
- }
167
-
168
- @keyframes spin {
169
- :where(to) {
170
- transform: rotate(360deg);
171
- }
172
- }
173
-
174
- :where(.loadingText) {
175
- font-size: 0.75rem;
176
- }
1
+ /* --- Main Container --- */
2
+ :where(.container) {
3
+ position: relative;
4
+ display: block;
5
+ }
6
+
7
+ /* --- Viewfinder Frame --- */
8
+ :where(.viewfinder) {
9
+ position: absolute;
10
+ inset: 0;
11
+ z-index: 10;
12
+ pointer-events: none;
13
+ }
14
+
15
+ /* --- Content Area (The box containing the QR) --- */
16
+ :where(.contentArea) {
17
+ position: absolute;
18
+ inset: 0;
19
+ z-index: 20;
20
+ display: flex;
21
+ align-items: center;
22
+ justify-content: center;
23
+
24
+ /* Borders & Shape */
25
+ border: 3px solid rgba(0, 0, 0, 0.05);
26
+ border-radius: 28px;
27
+ overflow: hidden;
28
+ }
29
+
30
+ /* Error State for Content Area */
31
+ :where(.contentArea[data-error="true"]) {
32
+ border-color: rgba(239, 68, 68, 0.3); /* red-500/30 */
33
+ }
34
+
35
+ /* --- Glow Background --- */
36
+ :where(.glow) {
37
+ position: absolute;
38
+ inset: 0;
39
+ opacity: 0.25;
40
+ filter: blur(15px);
41
+ pointer-events: none;
42
+ transform: scale(0.9);
43
+ background: linear-gradient(to bottom right, #f3e8ff, #bfdbfe);
44
+ }
45
+
46
+ :where(.glow[data-error="true"]) {
47
+ background: linear-gradient(to bottom right, #ef4444, #dc2626);
48
+ }
49
+
50
+ /* --- Shine Animation --- */
51
+ :where(.shine) {
52
+ position: absolute;
53
+ inset: 0;
54
+ z-index: 30;
55
+ pointer-events: none;
56
+ overflow: hidden;
57
+
58
+ /* The Shine Gradient */
59
+ background: linear-gradient(
60
+ to bottom,
61
+ rgba(255, 255, 255, 0) 0%,
62
+ rgba(255, 255, 255, 0.6) 50%,
63
+ rgba(255, 255, 255, 0) 100%
64
+ );
65
+
66
+ /* The Animation */
67
+ animation: qrScanSlide 2s ease-in-out infinite;
68
+ }
69
+
70
+ @keyframes qrScanSlide {
71
+ :where(0%) {
72
+ transform: translateY(-100%);
73
+ }
74
+ :where(100%) {
75
+ transform: translateY(100%);
76
+ }
77
+ }
78
+
79
+ /* --- QR Wrapper --- */
80
+ :where(.qrWrapper) {
81
+ position: relative;
82
+ z-index: 20;
83
+ display: flex;
84
+ align-items: center;
85
+ justify-content: center;
86
+ transform: scale(1);
87
+ }
88
+
89
+ /* --- Logo in Center --- */
90
+ :where(.logoWrapper) {
91
+ position: absolute;
92
+ left: 50%;
93
+ top: 50%;
94
+ transform: translate(-50%, -50%);
95
+ overflow: hidden;
96
+ border-radius: 17px;
97
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
98
+ }
99
+
100
+ /* --- SVG Utility --- */
101
+ :where(.svgFull) {
102
+ width: 100%;
103
+ height: 100%;
104
+ }
105
+
106
+ /* =========================================
107
+ Placeholder Component Styles
108
+ ========================================= */
109
+
110
+ :where(.placeholderContainer) {
111
+ position: relative;
112
+ display: flex;
113
+ align-items: center;
114
+ justify-content: center;
115
+ }
116
+
117
+ /* The faint dots in the background */
118
+ :where(.placeholderPattern) {
119
+ position: absolute;
120
+ inset: 0;
121
+ opacity: 0.1;
122
+ border-radius: 14px;
123
+ background-size: 1.888% 1.888%;
124
+ background-repeat: repeat;
125
+ }
126
+
127
+ /* The 3 corner squares */
128
+ :where(.cornerSquare) {
129
+ position: absolute;
130
+ border-radius: 12px;
131
+ opacity: 0.1;
132
+ width: 13.25%;
133
+ height: 13.25%;
134
+ }
135
+
136
+ /* The center blank area */
137
+ :where(.centerArea) {
138
+ position: relative;
139
+ border-radius: 20px;
140
+ z-index: 10;
141
+ width: 28%;
142
+ height: 28%;
143
+ }
144
+
145
+ /* Loading Spinner Wrapper */
146
+ :where(.loaderWrapper) {
147
+ position: absolute;
148
+ inset: 0;
149
+ display: flex;
150
+ flex-direction: column;
151
+ align-items: center;
152
+ justify-content: center;
153
+ z-index: 20;
154
+ }
155
+
156
+ :where(.spinner) {
157
+ width: 2rem; /* w-8 */
158
+ height: 2rem; /* h-8 */
159
+ border-width: 2px;
160
+ border-style: solid;
161
+ border-color: currentColor;
162
+ border-top-color: transparent;
163
+ border-radius: 50%;
164
+ margin-bottom: 0.75rem; /* mb-3 */
165
+ animation: spin 1s linear infinite;
166
+ }
167
+
168
+ @keyframes spin {
169
+ :where(to) {
170
+ transform: rotate(360deg);
171
+ }
172
+ }
173
+
174
+ :where(.loadingText) {
175
+ font-size: 0.75rem;
176
+ }
@@ -1,136 +1,136 @@
1
- /* backdrop */
2
- :where(.backdrop) {
3
- position: fixed;
4
- inset: 0;
5
- z-index: 50;
6
- background-color: var(--bg-color);
7
- min-height: 100dvh;
8
- transition: opacity 150ms ease;
9
- --bg-color: rgba(0, 0, 0, 0.5);
10
- }
11
- :where(.backdrop[data-theme="dark"]) {
12
- --bg-color: rgba(0, 0, 0, 0.8);
13
- }
14
- :where(.backdrop[data-starting-style],
15
- .backdrop[data-ending-style]) {
16
- opacity: 0;
17
- }
18
-
19
- /* --- Variables (Optional: Adjust to match your theme) --- */
20
- :where(.content) {
21
- position: fixed;
22
- left: 50%;
23
- top: 50%;
24
- transform: translate(-50%, -50%);
25
- width: 100%;
26
- max-width: 32rem;
27
- max-height: 90vh;
28
- overflow-y: auto;
29
- border-radius: 0.5rem;
30
- padding: 1.5rem;
31
-
32
- background-color: var(--bg-background);
33
- color: var(--fg-foreground);
34
- border: 1px solid var(--border-color);
35
-
36
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
37
- outline: none;
38
- z-index: 9999;
39
- /* Animation */
40
- transition:
41
- opacity 150ms ease,
42
- transform 150ms ease;
43
-
44
- --bg-background: #ffffff;
45
- --fg-foreground: #09090b;
46
- --border-color: #e4e4e7;
47
- --muted-foreground: #71717a;
48
- }
49
- :where(.content[data-theme="dark"]) {
50
- --bg-background: #18181b;
51
- --fg-foreground: #fafafa;
52
- --border-color: #27272a;
53
- --muted-foreground: #a1a1aa;
54
- }
55
- :where(.content[data-starting-style],
56
- .content[data-ending-style]) {
57
- opacity: 0;
58
- transform: translate(-50%, -50%) scale(0.95); /* Zoom out effect */
59
- }
60
-
61
- /* --- Close Button --- */
62
- :where(.closeButton) {
63
- display: inline-flex;
64
- flex-direction: column;
65
- position: absolute;
66
- gap: 0;
67
- align-items: center;
68
- justify-content: center;
69
- right: 0.5rem;
70
- top: 0.5rem;
71
- border-radius: 0.25rem;
72
- opacity: 0.7;
73
- cursor: pointer;
74
- background: var(--close-bg);
75
- border: none;
76
- color: inherit;
77
- transition: opacity 0.2s;
78
- padding: 4px;
79
-
80
- --close-bg: rgba(0, 0, 0, 0.1);
81
- }
82
- :where(.closeButton[data-theme="light"]) {
83
- --close-bg: rgba(255, 255, 255, 0.8);
84
- }
85
- :where(.closeButton:hover) {
86
- opacity: 1;
87
- }
88
- :where(.closeButton:focus-visible) {
89
- outline: 2px solid var(--fg-foreground);
90
- outline-offset: 2px;
91
- }
92
-
93
- /* --- Header & Footer --- */
94
- :where(.header) {
95
- display: flex;
96
- flex-direction: column;
97
- gap: 0.375rem; /* space-y-1.5 */
98
- text-align: center;
99
- margin-bottom: 1rem;
100
- }
101
-
102
- /* Desktop alignment */
103
- @media (min-width: 640px) {
104
- :where(.header) {
105
- text-align: left;
106
- }
107
- }
108
-
109
- :where(.footer) {
110
- display: flex;
111
- flex-direction: column-reverse;
112
- margin-top: 1.5rem;
113
- }
114
-
115
- @media (min-width: 640px) {
116
- :where(.footer) {
117
- flex-direction: row;
118
- justify-content: flex-end;
119
- gap: 0.5rem;
120
- }
121
- }
122
-
123
- /* --- Typography --- */
124
- :where(.title) {
125
- margin: 0;
126
- font-size: 1.125rem; /* text-lg */
127
- font-weight: 600;
128
- line-height: 1;
129
- letter-spacing: -0.025em;
130
- }
131
-
132
- :where(.description) {
133
- margin: 0;
134
- font-size: 0.875rem; /* text-sm */
135
- color: var(--muted-foreground);
136
- }
1
+ /* backdrop */
2
+ :where(.backdrop) {
3
+ position: fixed;
4
+ inset: 0;
5
+ z-index: 50;
6
+ background-color: var(--bg-color);
7
+ min-height: 100dvh;
8
+ transition: opacity 150ms ease;
9
+ --bg-color: rgba(0, 0, 0, 0.5);
10
+ }
11
+ :where(.backdrop[data-theme="dark"]) {
12
+ --bg-color: rgba(0, 0, 0, 0.8);
13
+ }
14
+ :where(.backdrop[data-starting-style],
15
+ .backdrop[data-ending-style]) {
16
+ opacity: 0;
17
+ }
18
+
19
+ /* --- Variables (Optional: Adjust to match your theme) --- */
20
+ :where(.content) {
21
+ position: fixed;
22
+ left: 50%;
23
+ top: 50%;
24
+ transform: translate(-50%, -50%);
25
+ width: 100%;
26
+ max-width: 32rem;
27
+ max-height: 90vh;
28
+ overflow-y: auto;
29
+ border-radius: 0.5rem;
30
+ padding: 1.5rem;
31
+
32
+ background-color: var(--bg-background);
33
+ color: var(--fg-foreground);
34
+ border: 1px solid var(--border-color);
35
+
36
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
37
+ outline: none;
38
+ z-index: 9999;
39
+ /* Animation */
40
+ transition:
41
+ opacity 150ms ease,
42
+ transform 150ms ease;
43
+
44
+ --bg-background: #ffffff;
45
+ --fg-foreground: #09090b;
46
+ --border-color: #e4e4e7;
47
+ --muted-foreground: #71717a;
48
+ }
49
+ :where(.content[data-theme="dark"]) {
50
+ --bg-background: #18181b;
51
+ --fg-foreground: #fafafa;
52
+ --border-color: #27272a;
53
+ --muted-foreground: #a1a1aa;
54
+ }
55
+ :where(.content[data-starting-style],
56
+ .content[data-ending-style]) {
57
+ opacity: 0;
58
+ transform: translate(-50%, -50%) scale(0.95); /* Zoom out effect */
59
+ }
60
+
61
+ /* --- Close Button --- */
62
+ :where(.closeButton) {
63
+ display: inline-flex;
64
+ flex-direction: column;
65
+ position: absolute;
66
+ gap: 0;
67
+ align-items: center;
68
+ justify-content: center;
69
+ right: 0.5rem;
70
+ top: 0.5rem;
71
+ border-radius: 0.25rem;
72
+ opacity: 0.7;
73
+ cursor: pointer;
74
+ background: var(--close-bg);
75
+ border: none;
76
+ color: inherit;
77
+ transition: opacity 0.2s;
78
+ padding: 4px;
79
+
80
+ --close-bg: rgba(0, 0, 0, 0.1);
81
+ }
82
+ :where(.closeButton[data-theme="light"]) {
83
+ --close-bg: rgba(255, 255, 255, 0.8);
84
+ }
85
+ :where(.closeButton:hover) {
86
+ opacity: 1;
87
+ }
88
+ :where(.closeButton:focus-visible) {
89
+ outline: 2px solid var(--fg-foreground);
90
+ outline-offset: 2px;
91
+ }
92
+
93
+ /* --- Header & Footer --- */
94
+ :where(.header) {
95
+ display: flex;
96
+ flex-direction: column;
97
+ gap: 0.375rem; /* space-y-1.5 */
98
+ text-align: center;
99
+ margin-bottom: 1rem;
100
+ }
101
+
102
+ /* Desktop alignment */
103
+ @media (min-width: 640px) {
104
+ :where(.header) {
105
+ text-align: left;
106
+ }
107
+ }
108
+
109
+ :where(.footer) {
110
+ display: flex;
111
+ flex-direction: column-reverse;
112
+ margin-top: 1.5rem;
113
+ }
114
+
115
+ @media (min-width: 640px) {
116
+ :where(.footer) {
117
+ flex-direction: row;
118
+ justify-content: flex-end;
119
+ gap: 0.5rem;
120
+ }
121
+ }
122
+
123
+ /* --- Typography --- */
124
+ :where(.title) {
125
+ margin: 0;
126
+ font-size: 1.125rem; /* text-lg */
127
+ font-weight: 600;
128
+ line-height: 1;
129
+ letter-spacing: -0.025em;
130
+ }
131
+
132
+ :where(.description) {
133
+ margin: 0;
134
+ font-size: 0.875rem; /* text-sm */
135
+ color: var(--muted-foreground);
136
+ }