@txnlab/use-wallet-ui-react 0.4.2 → 1.0.0-beta.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 (10) hide show
  1. package/README.md +311 -400
  2. package/dist/cjs/index.cjs +18 -18
  3. package/dist/cjs/index.cjs.map +1 -1
  4. package/dist/esm/index.js +1798 -1771
  5. package/dist/esm/index.js.map +1 -1
  6. package/dist/style.css +237 -350
  7. package/dist/types/index.d.cts +16 -1
  8. package/dist/types/index.d.ts +16 -1
  9. package/package.json +1 -1
  10. package/src/theme.css +83 -71
package/dist/types/index.d.cts CHANGED
@@ -8,9 +8,13 @@ import { RefObject } from 'react';
8
8
  import { UseQueryResult } from '@tanstack/react-query';
9
9
  import { Wallet } from '@txnlab/use-wallet-react';
10
10
 
11
+ export declare type ButtonSize = 'sm' | 'md' | 'lg';
12
+
11
13
  export declare const ConnectedWalletButton: default_2.ForwardRefExoticComponent<ConnectedWalletButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
12
14
 
13
15
  declare interface ConnectedWalletButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
16
+ /** Size variant for the button */
17
+ size?: ButtonSize;
14
18
  style?: default_2.CSSProperties;
15
19
  }
16
20
 
@@ -23,6 +27,8 @@ declare interface ConnectedWalletMenuProps {
23
27
  export declare const ConnectWalletButton: default_2.ForwardRefExoticComponent<ConnectWalletButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
24
28
 
25
29
  declare interface ConnectWalletButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
30
+ /** Size variant for the button */
31
+ size?: ButtonSize;
26
32
  style?: default_2.CSSProperties;
27
33
  }
28
34
 
@@ -126,7 +132,16 @@ export declare function useResolvedTheme(theme: Theme): ResolvedTheme;
126
132
  */
127
133
  export declare function useWalletUI(): WalletUIContextType;
128
134
 
129
- export declare function WalletButton(): JSX.Element;
135
+ export declare function WalletButton({ size, className, style }: WalletButtonProps): JSX.Element;
136
+
137
+ declare interface WalletButtonProps {
138
+ /** Size variant for the button */
139
+ size?: ButtonSize;
140
+ /** Additional CSS classes to apply to the button */
141
+ className?: string;
142
+ /** Inline styles to apply to the button (can include CSS variable overrides) */
143
+ style?: default_2.CSSProperties;
144
+ }
130
145
 
131
146
  export declare function WalletList({ wallets, handleWalletClick }: WalletListProps): JSX.Element;
132
147
 
package/dist/types/index.d.ts CHANGED
@@ -8,9 +8,13 @@ import { RefObject } from 'react';
8
8
  import { UseQueryResult } from '@tanstack/react-query';
9
9
  import { Wallet } from '@txnlab/use-wallet-react';
10
10
 
11
+ export declare type ButtonSize = 'sm' | 'md' | 'lg';
12
+
11
13
  export declare const ConnectedWalletButton: default_2.ForwardRefExoticComponent<ConnectedWalletButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
12
14
 
13
15
  declare interface ConnectedWalletButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
16
+ /** Size variant for the button */
17
+ size?: ButtonSize;
14
18
  style?: default_2.CSSProperties;
15
19
  }
16
20
 
@@ -23,6 +27,8 @@ declare interface ConnectedWalletMenuProps {
23
27
  export declare const ConnectWalletButton: default_2.ForwardRefExoticComponent<ConnectWalletButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
24
28
 
25
29
  declare interface ConnectWalletButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
30
+ /** Size variant for the button */
31
+ size?: ButtonSize;
26
32
  style?: default_2.CSSProperties;
27
33
  }
28
34
 
@@ -126,7 +132,16 @@ export declare function useResolvedTheme(theme: Theme): ResolvedTheme;
126
132
  */
127
133
  export declare function useWalletUI(): WalletUIContextType;
128
134
 
129
- export declare function WalletButton(): JSX.Element;
135
+ export declare function WalletButton({ size, className, style }: WalletButtonProps): JSX.Element;
136
+
137
+ declare interface WalletButtonProps {
138
+ /** Size variant for the button */
139
+ size?: ButtonSize;
140
+ /** Additional CSS classes to apply to the button */
141
+ className?: string;
142
+ /** Inline styles to apply to the button (can include CSS variable overrides) */
143
+ style?: default_2.CSSProperties;
144
+ }
130
145
 
131
146
  export declare function WalletList({ wallets, handleWalletClick }: WalletListProps): JSX.Element;
132
147
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@txnlab/use-wallet-ui-react",
3
- "version": "0.4.2",
3
+ "version": "1.0.0-beta.2",
4
4
  "description": "React components for use-wallet UI",
5
5
  "type": "module",
6
6
  "main": "dist/cjs/index.cjs",
package/src/theme.css CHANGED
@@ -1,78 +1,42 @@
1
- /* Theme CSS custom properties for wallet UI components */
2
- /* Import this file in Tailwind projects to enable theming */
1
+ /*
2
+ Theme CSS custom properties for wallet UI components
3
+ Import this file in Tailwind projects to enable theming
3
4
 
4
- /* Light mode (default) */
5
- [data-wallet-ui] {
6
- --wui-color-primary: #2d2df1;
7
- --wui-color-primary-hover: #2929d9;
8
- --wui-color-primary-text: #ffffff;
9
- --wui-color-bg: #ffffff;
10
- --wui-color-bg-secondary: #f9fafb;
11
- --wui-color-bg-tertiary: #f3f4f6;
12
- --wui-color-bg-hover: #e9e9fd;
13
- --wui-color-text: #1f2937;
14
- --wui-color-text-secondary: #6b7280;
15
- --wui-color-text-tertiary: #9ca3af;
16
- --wui-color-border: #e5e7eb;
17
- --wui-color-link: rgba(45, 45, 241, 0.8);
18
- --wui-color-link-hover: #2d2df1;
19
- --wui-color-overlay: rgba(0, 0, 0, 0.3);
20
- --wui-color-danger-bg: #fee2e2;
21
- --wui-color-danger-bg-hover: #fecaca;
22
- --wui-color-danger-text: #b91c1c;
23
- --wui-color-avatar-bg: #e5e7eb;
24
- --wui-color-avatar-icon: #9ca3af;
25
- }
5
+ Uses @layer wui-theme so consumer CSS can easily override values.
6
+ Consumer CSS (unlayered) automatically beats layered styles.
26
7
 
27
- /* Dark mode via data-theme attribute (explicit) */
28
- [data-wallet-ui][data-theme='dark'] {
29
- --wui-color-primary: #bfbff9;
30
- --wui-color-primary-hover: #d4d4fa;
31
- --wui-color-primary-text: #001324;
32
- --wui-color-bg: #001324;
33
- --wui-color-bg-secondary: #101b29;
34
- --wui-color-bg-tertiary: #192a39;
35
- --wui-color-bg-hover: #192a39;
36
- --wui-color-text: #e9e9fd;
37
- --wui-color-text-secondary: #99a1a7;
38
- --wui-color-text-tertiary: #6b7280;
39
- --wui-color-border: #192a39;
40
- --wui-color-link: #6c6cf1;
41
- --wui-color-link-hover: #8080f3;
42
- --wui-color-overlay: rgba(0, 0, 0, 0.5);
43
- --wui-color-danger-bg: rgba(127, 29, 29, 0.4);
44
- --wui-color-danger-bg-hover: rgba(127, 29, 29, 0.6);
45
- --wui-color-danger-text: #fca5a5;
46
- --wui-color-avatar-bg: #192a39;
47
- --wui-color-avatar-icon: #6b7280;
48
- }
8
+ Example override:
9
+ [data-wallet-theme] {
10
+ --wui-color-primary: #8b5cf6;
11
+ }
12
+ */
49
13
 
50
- /* Dark mode via .dark class on ancestor (Tailwind convention) */
51
- .dark [data-wallet-ui]:not([data-theme='light']) {
52
- --wui-color-primary: #bfbff9;
53
- --wui-color-primary-hover: #d4d4fa;
54
- --wui-color-primary-text: #001324;
55
- --wui-color-bg: #001324;
56
- --wui-color-bg-secondary: #101b29;
57
- --wui-color-bg-tertiary: #192a39;
58
- --wui-color-bg-hover: #192a39;
59
- --wui-color-text: #e9e9fd;
60
- --wui-color-text-secondary: #99a1a7;
61
- --wui-color-text-tertiary: #6b7280;
62
- --wui-color-border: #192a39;
63
- --wui-color-link: #6c6cf1;
64
- --wui-color-link-hover: #8080f3;
65
- --wui-color-overlay: rgba(0, 0, 0, 0.5);
66
- --wui-color-danger-bg: rgba(127, 29, 29, 0.4);
67
- --wui-color-danger-bg-hover: rgba(127, 29, 29, 0.6);
68
- --wui-color-danger-text: #fca5a5;
69
- --wui-color-avatar-bg: #192a39;
70
- --wui-color-avatar-icon: #6b7280;
71
- }
14
+ @layer wui-theme {
15
+ /* Light mode (default) */
16
+ [data-wallet-theme] {
17
+ --wui-color-primary: #2d2df1;
18
+ --wui-color-primary-hover: #2929d9;
19
+ --wui-color-primary-text: #ffffff;
20
+ --wui-color-bg: #ffffff;
21
+ --wui-color-bg-secondary: #f9fafb;
22
+ --wui-color-bg-tertiary: #f3f4f6;
23
+ --wui-color-bg-hover: #e9e9fd;
24
+ --wui-color-text: #1f2937;
25
+ --wui-color-text-secondary: #6b7280;
26
+ --wui-color-text-tertiary: #9ca3af;
27
+ --wui-color-border: #e5e7eb;
28
+ --wui-color-link: rgba(45, 45, 241, 0.8);
29
+ --wui-color-link-hover: #2d2df1;
30
+ --wui-color-overlay: rgba(0, 0, 0, 0.3);
31
+ --wui-color-danger-bg: #fee2e2;
32
+ --wui-color-danger-bg-hover: #fecaca;
33
+ --wui-color-danger-text: #b91c1c;
34
+ --wui-color-avatar-bg: #e5e7eb;
35
+ --wui-color-avatar-icon: #9ca3af;
36
+ }
72
37
 
73
- /* Dark mode via system preference (when theme="system" or no explicit theme) */
74
- @media (prefers-color-scheme: dark) {
75
- [data-wallet-ui]:not([data-theme='light']):not([data-theme='dark']) {
38
+ /* Dark mode via data-theme attribute (explicit) */
39
+ [data-wallet-theme][data-theme='dark'] {
76
40
  --wui-color-primary: #bfbff9;
77
41
  --wui-color-primary-hover: #d4d4fa;
78
42
  --wui-color-primary-text: #001324;
@@ -93,4 +57,52 @@
93
57
  --wui-color-avatar-bg: #192a39;
94
58
  --wui-color-avatar-icon: #6b7280;
95
59
  }
60
+
61
+ /* Dark mode via .dark class on ancestor (Tailwind convention) */
62
+ .dark [data-wallet-theme]:not([data-theme='light']) {
63
+ --wui-color-primary: #bfbff9;
64
+ --wui-color-primary-hover: #d4d4fa;
65
+ --wui-color-primary-text: #001324;
66
+ --wui-color-bg: #001324;
67
+ --wui-color-bg-secondary: #101b29;
68
+ --wui-color-bg-tertiary: #192a39;
69
+ --wui-color-bg-hover: #192a39;
70
+ --wui-color-text: #e9e9fd;
71
+ --wui-color-text-secondary: #99a1a7;
72
+ --wui-color-text-tertiary: #6b7280;
73
+ --wui-color-border: #192a39;
74
+ --wui-color-link: #6c6cf1;
75
+ --wui-color-link-hover: #8080f3;
76
+ --wui-color-overlay: rgba(0, 0, 0, 0.5);
77
+ --wui-color-danger-bg: rgba(127, 29, 29, 0.4);
78
+ --wui-color-danger-bg-hover: rgba(127, 29, 29, 0.6);
79
+ --wui-color-danger-text: #fca5a5;
80
+ --wui-color-avatar-bg: #192a39;
81
+ --wui-color-avatar-icon: #6b7280;
82
+ }
83
+
84
+ /* Dark mode via system preference (when theme="system" or no explicit theme) */
85
+ @media (prefers-color-scheme: dark) {
86
+ [data-wallet-theme]:not([data-theme='light']):not([data-theme='dark']) {
87
+ --wui-color-primary: #bfbff9;
88
+ --wui-color-primary-hover: #d4d4fa;
89
+ --wui-color-primary-text: #001324;
90
+ --wui-color-bg: #001324;
91
+ --wui-color-bg-secondary: #101b29;
92
+ --wui-color-bg-tertiary: #192a39;
93
+ --wui-color-bg-hover: #192a39;
94
+ --wui-color-text: #e9e9fd;
95
+ --wui-color-text-secondary: #99a1a7;
96
+ --wui-color-text-tertiary: #6b7280;
97
+ --wui-color-border: #192a39;
98
+ --wui-color-link: #6c6cf1;
99
+ --wui-color-link-hover: #8080f3;
100
+ --wui-color-overlay: rgba(0, 0, 0, 0.5);
101
+ --wui-color-danger-bg: rgba(127, 29, 29, 0.4);
102
+ --wui-color-danger-bg-hover: rgba(127, 29, 29, 0.6);
103
+ --wui-color-danger-text: #fca5a5;
104
+ --wui-color-avatar-bg: #192a39;
105
+ --wui-color-avatar-icon: #6b7280;
106
+ }
107
+ }
96
108
  }