@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,42 +1,42 @@
1
- :where(.avatar) {
2
- display: flex;
3
- align-items: center;
4
- justify-content: center;
5
-
6
- height: 3rem;
7
- max-height: 100%;
8
-
9
- aspect-ratio: 1 / 1;
10
- overflow: hidden;
11
- border-radius: 50%;
12
-
13
- --fallback-avatar-bg: #f4f4f5;
14
- --fallback-avatar-fg: #71717a;
15
- }
16
-
17
- :where(.avatar[data-theme="dark"]) {
18
- --fallback-avatar-bg: #27272a;
19
- --fallback-avatar-fg: #a1a1aa;
20
- }
21
-
22
- :where(.avatar img) {
23
- border-radius: 50%;
24
- display: block;
25
- max-width: 100%;
26
- max-height: 100%;
27
- object-fit: cover;
28
- }
29
-
30
- :where(.fallback) {
31
- display: flex;
32
- height: 100%;
33
- width: 100%;
34
- align-items: center;
35
- justify-content: center;
36
- background-color: var(--fallback-avatar-bg);
37
- color: var(--fallback-avatar-fg);
38
- }
39
- :where(.fallback svg) {
40
- width: 50%;
41
- height: 50%;
42
- }
1
+ :where(.avatar) {
2
+ display: flex;
3
+ align-items: center;
4
+ justify-content: center;
5
+
6
+ height: 3rem;
7
+ max-height: 100%;
8
+
9
+ aspect-ratio: 1 / 1;
10
+ overflow: hidden;
11
+ border-radius: 50%;
12
+
13
+ --fallback-avatar-bg: #f4f4f5;
14
+ --fallback-avatar-fg: #71717a;
15
+ }
16
+
17
+ :where(.avatar[data-theme="dark"]) {
18
+ --fallback-avatar-bg: #27272a;
19
+ --fallback-avatar-fg: #a1a1aa;
20
+ }
21
+
22
+ :where(.avatar img) {
23
+ border-radius: 50%;
24
+ display: block;
25
+ max-width: 100%;
26
+ max-height: 100%;
27
+ object-fit: cover;
28
+ }
29
+
30
+ :where(.fallback) {
31
+ display: flex;
32
+ height: 100%;
33
+ width: 100%;
34
+ align-items: center;
35
+ justify-content: center;
36
+ background-color: var(--fallback-avatar-bg);
37
+ color: var(--fallback-avatar-fg);
38
+ }
39
+ :where(.fallback svg) {
40
+ width: 50%;
41
+ height: 50%;
42
+ }
@@ -1,145 +1,145 @@
1
- :where(.button) {
2
- /* --- 1. Base Reset & Layout --- */
3
- display: inline-flex;
4
- align-items: center;
5
- justify-content: center;
6
- gap: 0.5rem;
7
- white-space: nowrap;
8
- font-weight: 500;
9
- cursor: pointer;
10
- user-select: none;
11
- border-radius: 0.375rem;
12
- border: 1px solid var(--btn-border, transparent);
13
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
14
- font-family: var(--font-inter, inherit);
15
- text-decoration: none;
16
-
17
- /* --- 2. Common Properties --- */
18
- background: var(--btn-bg);
19
- color: var(--btn-fg);
20
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
21
-
22
- /* --- 3. Light Theme Tokens (Default) --- */
23
- --btn-bg: #09090b;
24
- --btn-fg: #ffffff;
25
- --btn-bg-hover: #18181b;
26
- --focus-ring: #2563eb;
27
- }
28
- :where(.button span) {
29
- display: inline-flex;
30
- align-items: center;
31
- gap: 0.25rem;
32
- }
33
-
34
- /* --- 4. Dark Theme Overrides --- */
35
- :where(.button[data-theme="dark"]) {
36
- --btn-bg: #fafafa;
37
- --btn-fg: #09090b;
38
- --btn-bg-hover: #f4f4f5;
39
- --focus-ring: #3b82f6;
40
- }
41
-
42
- /* --- 5. Interactive & State Logic --- */
43
- :where(.button:hover) {
44
- background-color: var(--btn-bg-hover);
45
- color: var(--btn-fg-hover, var(--btn-fg));
46
- }
47
-
48
- :where(.button:focus-visible) {
49
- outline: 2px solid var(--focus-ring);
50
- outline-offset: 2px;
51
- }
52
-
53
- :where(.button[data-disabled="true"]) {
54
- pointer-events: none;
55
- opacity: 0.4;
56
- }
57
-
58
- /* --- 6. Variants --- */
59
-
60
- /* Destructive */
61
- :where(.button[data-variant="destructive"]) {
62
- --btn-bg: #ef4444;
63
- --btn-fg: #ffffff;
64
- --btn-bg-hover: #dc2626;
65
- }
66
- :where(.button[data-theme="dark"][data-variant="destructive"]) {
67
- --btn-bg: #7f1d1d;
68
- --btn-fg: #fef2f2;
69
- --btn-bg-hover: #991b1b;
70
- }
71
-
72
- /* Outline */
73
- :where(.button[data-variant="outline"]) {
74
- --btn-bg: #f4f4f5;
75
- --btn-fg: #09090b;
76
- --btn-border: #e4e4e7;
77
- --btn-bg-hover: #f4f4f5;
78
- }
79
- :where(.button[data-theme="dark"][data-variant="outline"]) {
80
- --btn-bg: #27272a;
81
- --btn-fg: #fafafa;
82
- --btn-border: #27272a;
83
- --btn-bg-hover: #18181b;
84
- }
85
-
86
- /* Secondary */
87
- :where(.button[data-variant="secondary"]) {
88
- --btn-bg: #f4f4f5;
89
- --btn-fg: #18181b;
90
- --btn-bg-hover: #e4e4e7;
91
- }
92
- :where(.button[data-theme="dark"][data-variant="secondary"]) {
93
- --btn-bg: #27272a;
94
- --btn-fg: #fafafa;
95
- --btn-bg-hover: #3f3f46;
96
- }
97
-
98
- /* Ghost */
99
- :where(.button[data-variant="ghost"]) {
100
- --btn-bg: transparent;
101
- --btn-fg: #71717a;
102
- --btn-bg-hover: #f4f4f5;
103
- }
104
- :where(.button[data-theme="dark"][data-variant="ghost"]) {
105
- --btn-fg: #a1a1aa;
106
- --btn-bg-hover: #18181b;
107
- }
108
-
109
- /* Link - FIXED: Added subtle bg-hover and underline */
110
- :where(.button[data-variant="link"]) {
111
- --btn-bg: transparent;
112
- --btn-fg: #2563eb;
113
- --btn-bg-hover: #eff6ff;
114
- box-shadow: none;
115
- }
116
- :where(.button[data-theme="dark"][data-variant="link"]) {
117
- --btn-fg: #60a5fa;
118
- --btn-bg-hover: rgba(59, 130, 246, 0.1);
119
- }
120
- :where(.button[data-variant="link"]:hover) {
121
- text-decoration: underline;
122
- text-underline-offset: 4px;
123
- }
124
-
125
- /* --- 7. Sizes --- */
126
- :where(.button[data-size="sm"]) {
127
- height: 2rem;
128
- padding: 0 0.75rem;
129
- font-size: 0.75rem;
130
- }
131
- :where(.button[data-size="default"]) {
132
- height: 2.25rem;
133
- padding: 0.5rem 1rem;
134
- font-size: 0.875rem;
135
- }
136
- :where(.button[data-size="lg"]) {
137
- height: 2.75rem;
138
- padding: 0 1.5rem;
139
- font-size: 1rem;
140
- }
141
- :where(.button[data-size="icon"]) {
142
- height: 2.25rem;
143
- width: 2.25rem;
144
- padding: 0;
145
- }
1
+ :where(.button) {
2
+ /* --- 1. Base Reset & Layout --- */
3
+ display: inline-flex;
4
+ align-items: center;
5
+ justify-content: center;
6
+ gap: 0.5rem;
7
+ white-space: nowrap;
8
+ font-weight: 500;
9
+ cursor: pointer;
10
+ user-select: none;
11
+ border-radius: 0.375rem;
12
+ border: 1px solid var(--btn-border, transparent);
13
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
14
+ font-family: var(--font-inter, inherit);
15
+ text-decoration: none;
16
+
17
+ /* --- 2. Common Properties --- */
18
+ background: var(--btn-bg);
19
+ color: var(--btn-fg);
20
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
21
+
22
+ /* --- 3. Light Theme Tokens (Default) --- */
23
+ --btn-bg: #09090b;
24
+ --btn-fg: #ffffff;
25
+ --btn-bg-hover: #18181b;
26
+ --focus-ring: #2563eb;
27
+ }
28
+ :where(.button span) {
29
+ display: inline-flex;
30
+ align-items: center;
31
+ gap: 0.25rem;
32
+ }
33
+
34
+ /* --- 4. Dark Theme Overrides --- */
35
+ :where(.button[data-theme="dark"]) {
36
+ --btn-bg: #fafafa;
37
+ --btn-fg: #09090b;
38
+ --btn-bg-hover: #f4f4f5;
39
+ --focus-ring: #3b82f6;
40
+ }
41
+
42
+ /* --- 5. Interactive & State Logic --- */
43
+ :where(.button:hover) {
44
+ background-color: var(--btn-bg-hover);
45
+ color: var(--btn-fg-hover, var(--btn-fg));
46
+ }
47
+
48
+ :where(.button:focus-visible) {
49
+ outline: 2px solid var(--focus-ring);
50
+ outline-offset: 2px;
51
+ }
52
+
53
+ :where(.button[data-disabled="true"]) {
54
+ pointer-events: none;
55
+ opacity: 0.4;
56
+ }
57
+
58
+ /* --- 6. Variants --- */
59
+
60
+ /* Destructive */
61
+ :where(.button[data-variant="destructive"]) {
62
+ --btn-bg: #ef4444;
63
+ --btn-fg: #ffffff;
64
+ --btn-bg-hover: #dc2626;
65
+ }
66
+ :where(.button[data-theme="dark"][data-variant="destructive"]) {
67
+ --btn-bg: #7f1d1d;
68
+ --btn-fg: #fef2f2;
69
+ --btn-bg-hover: #991b1b;
70
+ }
71
+
72
+ /* Outline */
73
+ :where(.button[data-variant="outline"]) {
74
+ --btn-bg: #f4f4f5;
75
+ --btn-fg: #09090b;
76
+ --btn-border: #e4e4e7;
77
+ --btn-bg-hover: #f4f4f5;
78
+ }
79
+ :where(.button[data-theme="dark"][data-variant="outline"]) {
80
+ --btn-bg: #27272a;
81
+ --btn-fg: #fafafa;
82
+ --btn-border: #27272a;
83
+ --btn-bg-hover: #18181b;
84
+ }
85
+
86
+ /* Secondary */
87
+ :where(.button[data-variant="secondary"]) {
88
+ --btn-bg: #f4f4f5;
89
+ --btn-fg: #18181b;
90
+ --btn-bg-hover: #e4e4e7;
91
+ }
92
+ :where(.button[data-theme="dark"][data-variant="secondary"]) {
93
+ --btn-bg: #27272a;
94
+ --btn-fg: #fafafa;
95
+ --btn-bg-hover: #3f3f46;
96
+ }
97
+
98
+ /* Ghost */
99
+ :where(.button[data-variant="ghost"]) {
100
+ --btn-bg: transparent;
101
+ --btn-fg: #71717a;
102
+ --btn-bg-hover: #f4f4f5;
103
+ }
104
+ :where(.button[data-theme="dark"][data-variant="ghost"]) {
105
+ --btn-fg: #a1a1aa;
106
+ --btn-bg-hover: #18181b;
107
+ }
108
+
109
+ /* Link - FIXED: Added subtle bg-hover and underline */
110
+ :where(.button[data-variant="link"]) {
111
+ --btn-bg: transparent;
112
+ --btn-fg: #2563eb;
113
+ --btn-bg-hover: #eff6ff;
114
+ box-shadow: none;
115
+ }
116
+ :where(.button[data-theme="dark"][data-variant="link"]) {
117
+ --btn-fg: #60a5fa;
118
+ --btn-bg-hover: rgba(59, 130, 246, 0.1);
119
+ }
120
+ :where(.button[data-variant="link"]:hover) {
121
+ text-decoration: underline;
122
+ text-underline-offset: 4px;
123
+ }
124
+
125
+ /* --- 7. Sizes --- */
126
+ :where(.button[data-size="sm"]) {
127
+ height: 2rem;
128
+ padding: 0 0.75rem;
129
+ font-size: 0.75rem;
130
+ }
131
+ :where(.button[data-size="default"]) {
132
+ height: 2.25rem;
133
+ padding: 0.5rem 1rem;
134
+ font-size: 0.875rem;
135
+ }
136
+ :where(.button[data-size="lg"]) {
137
+ height: 2.75rem;
138
+ padding: 0 1.5rem;
139
+ font-size: 1rem;
140
+ }
141
+ :where(.button[data-size="icon"]) {
142
+ height: 2.25rem;
143
+ width: 2.25rem;
144
+ padding: 0;
145
+ }
@@ -1,24 +1,24 @@
1
- :where(.trigger) {
2
- display: flex;
3
- width: 100%;
4
- align-items: center;
5
- justify-content: space-between;
6
- padding: 0.5rem 1rem;
7
- border: none;
8
- cursor: pointer;
9
- transition: all 0.2s ease;
10
- border-radius: 1rem;
11
- }
12
- :where(.trigger[data-panel-open] svg) {
13
- transform: rotate(180deg);
14
- }
15
-
16
- :where(.content) {
17
- overflow: hidden;
18
- height: var(--collapsible-panel-height);
19
- transition: height 0.2s ease-out;
20
- }
21
- :where(.content[data-starting-style],
22
- .content[data-ending-style]) {
23
- height: 0;
24
- }
1
+ :where(.trigger) {
2
+ display: flex;
3
+ width: 100%;
4
+ align-items: center;
5
+ justify-content: space-between;
6
+ padding: 0.5rem 1rem;
7
+ border: none;
8
+ cursor: pointer;
9
+ transition: all 0.2s ease;
10
+ border-radius: 1rem;
11
+ }
12
+ :where(.trigger[data-panel-open] svg) {
13
+ transform: rotate(180deg);
14
+ }
15
+
16
+ :where(.content) {
17
+ overflow: hidden;
18
+ height: var(--collapsible-panel-height);
19
+ transition: height 0.2s ease-out;
20
+ }
21
+ :where(.content[data-starting-style],
22
+ .content[data-ending-style]) {
23
+ height: 0;
24
+ }
@@ -8,6 +8,10 @@ interface ConnectButtonProps {
8
8
  connectText?: string;
9
9
  connectingText?: string;
10
10
  showSolBalance?: boolean;
11
+ showDefaultToken?: {
12
+ address: string;
13
+ symbol: string;
14
+ };
11
15
  }
12
16
  declare function ConnectButton(props: ConnectButtonProps): react_jsx_runtime.JSX.Element;
13
17
 
@@ -8,6 +8,10 @@ interface ConnectButtonProps {
8
8
  connectText?: string;
9
9
  connectingText?: string;
10
10
  showSolBalance?: boolean;
11
+ showDefaultToken?: {
12
+ address: string;
13
+ symbol: string;
14
+ };
11
15
  }
12
16
  declare function ConnectButton(props: ConnectButtonProps): react_jsx_runtime.JSX.Element;
13
17