@wallet-ui/tailwind 2.0.0-canary-20250827030244 → 2.0.0-canary-20250829062001

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 (3) hide show
  1. package/dist/index.css +18 -142
  2. package/dist/index.css.map +1 -1
  3. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -30,6 +30,9 @@ html.dark:root,
30
30
  @apply rounded-md shadow-sm cursor-pointer;
31
31
  @apply flex items-center justify-center gap-2 whitespace-nowrap;
32
32
  @apply disabled:cursor-not-allowed disabled:opacity-50;
33
+ @apply px-4 py-3;
34
+ @apply text-base;
35
+ @apply font-semibold;
33
36
  &:hover {
34
37
  background: var(--wu-color-background-hover);
35
38
  color: var(--wu-color-foreground-hover);
@@ -39,45 +42,14 @@ html.dark:root,
39
42
  box-shadow: 0 0 0 2px var(--wu-color-ring);
40
43
  }
41
44
  }
42
- [data-wu=base-button].sm {
43
- @apply px-3 py-1.5;
44
- @apply text-sm;
45
- @apply font-normal;
46
- }
47
- [data-wu=base-button].md {
48
- @apply px-4 py-3;
49
- @apply text-base;
50
- @apply font-semibold;
51
- }
52
- [data-wu=base-button].lg {
53
- @apply px-6 py-4;
54
- @apply text-lg;
55
- @apply font-bold;
56
- }
57
- .sm [data-wu=base-button-left-section] {
58
- @apply mr-1;
59
- @apply text-xs;
60
- }
61
- .md [data-wu=base-button-left-section] {
45
+ [data-wu=base-button-left-section] {
62
46
  @apply mr-2;
63
47
  @apply text-sm;
64
48
  }
65
- .lg [data-wu=base-button-left-section] {
66
- @apply mr-4;
67
- @apply text-xl;
68
- }
69
- .sm [data-wu=base-button-right-section] {
70
- @apply ml-1;
71
- @apply text-xs;
72
- }
73
- .md [data-wu=base-button-right-section] {
49
+ [data-wu=base-button-right-section] {
74
50
  @apply ml-2;
75
51
  @apply text-sm;
76
52
  }
77
- .lg [data-wu=base-button-right-section] {
78
- @apply ml-4;
79
- @apply text-xl;
80
- }
81
53
 
82
54
  /* src/wallet-ui-base-dropdown.css */
83
55
  [data-wu=base-dropdown-list] {
@@ -91,41 +63,19 @@ html.dark:root,
91
63
  color: var(--wu-color-foreground);
92
64
  @apply flex items-center gap-2;
93
65
  @apply cursor-pointer w-full rounded-md;
66
+ @apply px-4 py-3;
67
+ @apply text-base;
94
68
  &:hover {
95
69
  background: var(--wu-color-background-hover);
96
70
  color: var(--wu-color-foreground-hover);
97
71
  }
98
72
  }
99
- [data-wu=base-dropdown-item].sm {
100
- @apply px-3 py-2;
101
- @apply text-sm;
102
- }
103
- [data-wu=base-dropdown-item].md {
104
- @apply px-4 py-3;
105
- @apply text-base;
106
- }
107
- [data-wu=base-dropdown-item].lg {
108
- @apply px-4 py-3;
109
- @apply text-lg;
110
- }
111
- .sm [data-wu=base-dropdown-item-left-section] {
112
- @apply mr-1;
113
- }
114
- .md [data-wu=base-dropdown-item-left-section] {
73
+ [data-wu=base-dropdown-item-left-section] {
115
74
  @apply mr-2;
116
75
  }
117
- .lg [data-wu=base-dropdown-item-left-section] {
118
- @apply mr-3;
119
- }
120
- .sm [data-wu=base-dropdown-item-right-section] {
121
- @apply ml-1;
122
- }
123
- .md [data-wu=base-dropdown-item-right-section] {
76
+ [data-wu=base-dropdown-item-right-section] {
124
77
  @apply ml-2;
125
78
  }
126
- .lg [data-wu=base-dropdown-item-right-section] {
127
- @apply ml-3;
128
- }
129
79
 
130
80
  /* src/wallet-ui-base-modal.css */
131
81
  [data-scope=dialog][data-part=backdrop] {
@@ -141,14 +91,19 @@ html.dark:root,
141
91
  @apply border;
142
92
  border-color: var(--wu-color-border);
143
93
  @apply w-full overflow-hidden shadow-lg;
144
- @apply rounded-xl outline-0;
94
+ @apply max-w-sm mx-4;
95
+ @apply rounded-lg outline-0;
96
+ @apply p-2;
145
97
  }
146
98
  [data-scope=dialog][data-part=content] header {
147
99
  @apply flex items-center justify-end;
148
100
  @apply pb-4;
101
+ @apply text-2xl;
149
102
  }
150
103
  [data-scope=dialog][data-part=description] {
151
104
  @apply flex items-center justify-center;
105
+ @apply pb-4 px-4;
106
+ @apply text-base;
152
107
  color: var(--wu-color-foreground);
153
108
  }
154
109
  [data-scope=dialog][data-part=close-trigger] {
@@ -156,6 +111,7 @@ html.dark:root,
156
111
  border-color: var(--wu-color-border);
157
112
  @apply cursor-pointer;
158
113
  @apply flex items-center justify-center;
114
+ @apply h-8 w-8 rounded-full;
159
115
  color: var(--wu-color-foreground);
160
116
  &:hover {
161
117
  background: var(--wu-color-background-hover);
@@ -168,51 +124,6 @@ html.dark:root,
168
124
  [data-scope=dialog][data-part=content][data-state=closed] {
169
125
  animation: anim-scale-out 200ms ease-in;
170
126
  }
171
- [data-scope=dialog][data-part=content].sm {
172
- @apply max-w-xs;
173
- @apply p-2 rounded-md;
174
- }
175
- [data-scope=dialog][data-part=content].md {
176
- @apply max-w-sm mx-4;
177
- @apply p-2 rounded-lg;
178
- }
179
- [data-scope=dialog][data-part=content].lg {
180
- @apply max-w-lg mx-auto;
181
- @apply p-4 rounded-xl;
182
- }
183
- [data-scope=dialog][data-part=content].sm header {
184
- @apply pb-2;
185
- @apply text-sm;
186
- }
187
- [data-scope=dialog][data-part=content].md header {
188
- @apply pb-4;
189
- @apply text-2xl;
190
- }
191
- [data-scope=dialog][data-part=content].lg header {
192
- @apply pb-4;
193
- @apply text-3xl;
194
- }
195
- .sm [data-scope=dialog][data-part=close-trigger] {
196
- @apply h-6 w-6 rounded-full;
197
- }
198
- .md [data-scope=dialog][data-part=close-trigger] {
199
- @apply h-8 w-8 rounded-full;
200
- }
201
- .lg [data-scope=dialog][data-part=close-trigger] {
202
- @apply h-10 w-10 rounded-full;
203
- }
204
- .sm [data-scope=dialog][data-part=description] {
205
- @apply pb-2 px-4;
206
- @apply text-sm;
207
- }
208
- .md [data-scope=dialog][data-part=description] {
209
- @apply pb-4 px-4;
210
- @apply text-base;
211
- }
212
- .lg [data-scope=dialog][data-part=description] {
213
- @apply pb-6 px-6;
214
- @apply text-lg;
215
- }
216
127
  @keyframes anim-scale-in {
217
128
  from {
218
129
  opacity: 0;
@@ -238,69 +149,34 @@ html.dark:root,
238
149
  [data-wu=wallet-ui-icon] {
239
150
  @apply border-0;
240
151
  @apply m-0;
241
- }
242
- [data-wu=wallet-ui-icon].sm {
243
- @apply rounded-sm;
244
- @apply h-[16px] w-[16px];
245
- }
246
- [data-wu=wallet-ui-icon].md {
247
152
  @apply rounded-md;
248
153
  @apply h-[24px] w-[24px];
249
154
  }
250
- [data-wu=wallet-ui-icon].lg {
251
- @apply rounded-lg;
252
- @apply h-[32px] w-[32px];
253
- }
254
155
 
255
156
  /* src/wallet-ui-label.css */
256
157
  [data-wu=wallet-ui-label] {
257
158
  color: var(--wu-color-foreground);
258
- }
259
- [data-wu=wallet-ui-label].sm {
260
- @apply text-xs;
261
- @apply font-light;
262
- }
263
- [data-wu=wallet-ui-label].md {
264
159
  @apply text-base;
265
160
  @apply font-normal;
266
161
  }
267
- [data-wu=wallet-ui-label].lg {
268
- @apply text-xl;
269
- @apply font-semibold;
270
- }
271
162
 
272
163
  /* src/wallet-ui-list-button.css */
273
164
  [data-wu=wallet-ui-list-button] {
274
165
  @apply flex items-center gap-2;
275
166
  @apply whitespace-nowrap;
276
167
  @apply cursor-pointer select-none appearance-none disabled:cursor-not-allowed disabled:opacity-50;
168
+ @apply rounded-lg;
169
+ @apply px-2 py-2 rounded-lg;
277
170
  &:hover {
278
171
  background: var(--wu-color-background-hover);
279
172
  }
280
173
  }
281
- [data-wu=wallet-ui-list-button].sm {
282
- @apply px-1 py-1 rounded-md;
283
- }
284
- [data-wu=wallet-ui-list-button].md {
285
- @apply px-2 py-2 rounded-lg;
286
- }
287
- [data-wu=wallet-ui-list-button].lg {
288
- @apply px-3 py-3 rounded-xl;
289
- }
290
174
 
291
175
  /* src/wallet-ui-list.css */
292
176
  [data-wu=wallet-ui-list] {
293
177
  @apply flex flex-col;
294
- }
295
- [data-wu=wallet-ui-list].sm {
296
- @apply gap-1;
297
- }
298
- [data-wu=wallet-ui-list].md {
299
178
  @apply gap-2;
300
179
  }
301
- [data-wu=wallet-ui-list].lg {
302
- @apply gap-3;
303
- }
304
180
 
305
181
  /* src/index.css */
306
182
  /*# sourceMappingURL=index.css.map */
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/wallet-ui-variables.css","../src/wallet-ui-base-button.css","../src/wallet-ui-base-dropdown.css","../src/wallet-ui-base-modal.css","../src/wallet-ui-icon.css","../src/wallet-ui-label.css","../src/wallet-ui-list-button.css","../src/wallet-ui-list.css"],"sourcesContent":["/**\n * These are the variables that are used in the @wallet-ui/tailwind styles.\n *\n * The goal is to make them compatible with the defaults used by Shadcn so it integrates automagically.\n *\n * These styles are compiled by the Tailwind compiler and used in the @wallet-ui/react package.\n */\n@import 'tailwindcss';\n\n:root,\nhtml.light:root,\n[data-theme='light']:root {\n --wu-color-background: var(--color-neutral-50);\n --wu-color-background-hover: var(--color-neutral-100);\n --wu-color-border: var(--color-neutral-200);\n --wu-color-foreground: var(--color-neutral-950);\n --wu-color-foreground-hover: var(--color-neutral-900);\n --wu-color-ring: var(--color-neutral-400);\n}\n\nhtml.dark:root,\n[data-theme='dark']:root {\n --wu-color-background: var(--color-neutral-950);\n --wu-color-background-hover: var(--color-neutral-900);\n --wu-color-border: var(--color-neutral-800);\n --wu-color-foreground: var(--color-neutral-100);\n --wu-color-foreground-hover: var(--color-white);\n --wu-color-ring: var(--color-neutral-500);\n}\n","/**\n * These are the variables that style the BaseButton component.\n *\n * It targets the [data-wu='base-button'] and related [data-wu='base-button-*'] selectors.\n *\n * The colors are coming from the wallet-ui-variables.css file. Other styles are Tailwind CSS.\n */\n\n/* Base Button */\n[data-wu='base-button'] {\n /* Background */\n background: var(--wu-color-background);\n /* Text color */\n color: var(--wu-color-foreground);\n /* Border */\n @apply border;\n border-color: var(--wu-color-border);\n /* Shape */\n @apply rounded-md shadow-sm cursor-pointer;\n /* Composition */\n @apply flex items-center justify-center gap-2 whitespace-nowrap;\n /* Disabled */\n @apply disabled:cursor-not-allowed disabled:opacity-50;\n\n &:hover {\n /* Background */\n background: var(--wu-color-background-hover);\n /* Text color */\n color: var(--wu-color-foreground-hover);\n }\n\n &:focus {\n /* Outline */\n @apply outline-none;\n /* Box shadow */\n box-shadow: 0 0 0 2px var(--wu-color-ring);\n }\n}\n\n/* Base Button Sizes */\n[data-wu='base-button'].sm {\n /* Shape */\n @apply px-3 py-1.5;\n /* Text size */\n @apply text-sm;\n /* Text weight */\n @apply font-normal;\n}\n\n[data-wu='base-button'].md {\n /* Shape */\n @apply px-4 py-3;\n /* Text size */\n @apply text-base;\n /* Text weight */\n @apply font-semibold;\n}\n\n[data-wu='base-button'].lg {\n /* Shape */\n @apply px-6 py-4;\n /* Text size */\n @apply text-lg;\n /* Text weight */\n @apply font-bold;\n}\n\n/* Left Section Sizes */\n.sm [data-wu='base-button-left-section'] {\n /* Composition */\n @apply mr-1;\n /* Text size */\n @apply text-xs;\n}\n\n.md [data-wu='base-button-left-section'] {\n /* Composition */\n @apply mr-2;\n /* Text size */\n @apply text-sm;\n}\n\n.lg [data-wu='base-button-left-section'] {\n /* Composition */\n @apply mr-4;\n /* Text size */\n @apply text-xl;\n}\n\n/* Right Section Sizes */\n.sm [data-wu='base-button-right-section'] {\n /* Composition */\n @apply ml-1;\n /* Text size */\n @apply text-xs;\n}\n\n.md [data-wu='base-button-right-section'] {\n /* Composition */\n @apply ml-2;\n /* Text size */\n @apply text-sm;\n}\n\n.lg [data-wu='base-button-right-section'] {\n /* Composition */\n @apply ml-4;\n /* Text size */\n @apply text-xl;\n}\n","/**\n * These are the variables that style the BaseDropdown component.\n *\n * It targets the [data-wu='base-dropdown'] and related [data-wu='base-dropdown-*'] selectors.\n *\n * The colors are coming from the wallet-ui-variables.css file. Other styles are Tailwind CSS.\n */\n\n/* Base Dropdown List */\n[data-wu='base-dropdown-list'] {\n /* Background */\n background: var(--wu-color-background);\n /* Border */\n @apply border outline-hidden;\n border-color: var(--wu-color-border);\n /*!* Shape *!*/\n @apply overflow-clip rounded-md p-1;\n}\n\n/* Base Dropdown Item */\n[data-wu='base-dropdown-item'] {\n /* Background */\n background: var(--wu-color-background);\n /* Text color */\n color: var(--wu-color-foreground);\n /* Content */\n @apply flex items-center gap-2;\n /* Shape */\n @apply cursor-pointer w-full rounded-md;\n\n &:hover {\n /* Background */\n background: var(--wu-color-background-hover);\n /* Text color */\n color: var(--wu-color-foreground-hover);\n }\n}\n\n/* Base Dropdown Item Sizes */\n[data-wu='base-dropdown-item'].sm {\n /* Shape */\n @apply px-3 py-2;\n /* Text size */\n @apply text-sm;\n}\n\n[data-wu='base-dropdown-item'].md {\n /* Shape */\n @apply px-4 py-3;\n /* Text size */\n @apply text-base;\n}\n\n[data-wu='base-dropdown-item'].lg {\n /* Shape */\n @apply px-4 py-3;\n /* Text size */\n @apply text-lg;\n}\n\n/* Left Section */\n.sm [data-wu='base-dropdown-item-left-section'] {\n @apply mr-1;\n}\n\n.md [data-wu='base-dropdown-item-left-section'] {\n @apply mr-2;\n}\n\n.lg [data-wu='base-dropdown-item-left-section'] {\n @apply mr-3;\n}\n\n/* Right Section */\n.sm [data-wu='base-dropdown-item-right-section'] {\n @apply ml-1;\n}\n\n.md [data-wu='base-dropdown-item-right-section'] {\n @apply ml-2;\n}\n\n.lg [data-wu='base-dropdown-item-right-section'] {\n @apply ml-3;\n}\n","/**\n * TBD: Figure out how to match the behavior (data-scope='dialog') with our styles.\n *\n * For now, we don't have the Modal feature so this can stay here for now.\n */\n[data-scope='dialog'][data-part='backdrop'] {\n /* Position */\n @apply fixed top-0 left-0 bottom-0 w-full z-20;\n /* Background */\n @apply bg-black/40 dark:bg-black/70;\n}\n\n[data-scope='dialog'][data-part='positioner'] {\n /* Position */\n @apply fixed top-0 left-0 bottom-0 w-full z-20;\n /* Content */\n @apply flex items-center justify-center;\n}\n\n[data-scope='dialog'][data-part='content'] {\n /* Background */\n background: var(--wu-color-background);\n /* Border */\n @apply border;\n border-color: var(--wu-color-border);\n /* Position */\n @apply w-full overflow-hidden shadow-lg;\n /* Shape */\n @apply rounded-xl outline-0;\n}\n\n[data-scope='dialog'][data-part='content'] header {\n /* Content */\n @apply flex items-center justify-end;\n /* Shape */\n @apply pb-4;\n}\n\n[data-scope='dialog'][data-part='description'] {\n /* Content */\n @apply flex items-center justify-center;\n /* Text */\n color: var(--wu-color-foreground);\n}\n\n[data-scope='dialog'][data-part='close-trigger'] {\n /* Border */\n @apply border;\n border-color: var(--wu-color-border);\n /* Behavior */\n @apply cursor-pointer;\n /* Content */\n @apply flex items-center justify-center;\n /* Text */\n color: var(--wu-color-foreground);\n\n &:hover {\n /* Background */\n background: var(--wu-color-background-hover);\n /* Text */\n color: var(--wu-color-foreground-hover);\n }\n}\n\n[data-scope='dialog'][data-part='content'][data-state='open'] {\n animation: anim-scale-in 300ms ease-out;\n}\n\n[data-scope='dialog'][data-part='content'][data-state='closed'] {\n animation: anim-scale-out 200ms ease-in;\n}\n\n/* Responsive Styles */\n\n/* CONTENT */\n[data-scope='dialog'][data-part='content'].sm {\n /* Position */\n @apply max-w-xs;\n /* Shape */\n @apply p-2 rounded-md;\n}\n\n[data-scope='dialog'][data-part='content'].md {\n /* Position */\n @apply max-w-sm mx-4;\n /* Shape */\n @apply p-2 rounded-lg;\n}\n\n[data-scope='dialog'][data-part='content'].lg {\n /* Position */\n @apply max-w-lg mx-auto;\n /* Shape */\n @apply p-4 rounded-xl;\n}\n\n/* HEADER */\n[data-scope='dialog'][data-part='content'].sm header {\n /* Shape */\n @apply pb-2;\n /* Text */\n @apply text-sm;\n}\n\n[data-scope='dialog'][data-part='content'].md header {\n /* Shape */\n @apply pb-4;\n /* Text */\n @apply text-2xl;\n}\n\n[data-scope='dialog'][data-part='content'].lg header {\n /* Shape */\n @apply pb-4;\n /* Text */\n @apply text-3xl;\n}\n\n/* CLOSE TRIGGER */\n.sm [data-scope='dialog'][data-part='close-trigger'] {\n /* Shape */\n @apply h-6 w-6 rounded-full;\n}\n\n.md [data-scope='dialog'][data-part='close-trigger'] {\n /* Shape */\n @apply h-8 w-8 rounded-full;\n}\n\n.lg [data-scope='dialog'][data-part='close-trigger'] {\n /* Shape */\n @apply h-10 w-10 rounded-full;\n}\n\n/* DESCRIPTION */\n.sm [data-scope='dialog'][data-part='description'] {\n /* Shape */\n @apply pb-2 px-4;\n /* Text */\n @apply text-sm;\n}\n\n.md [data-scope='dialog'][data-part='description'] {\n /* Shape */\n @apply pb-4 px-4;\n /* Text */\n @apply text-base;\n}\n\n.lg [data-scope='dialog'][data-part='description'] {\n /* Shape */\n @apply pb-6 px-6;\n /* Text */\n @apply text-lg;\n}\n\n/* Define the animations */\n@keyframes anim-scale-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes anim-scale-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n","[data-wu='wallet-ui-icon'] {\n /* Border */\n @apply border-0;\n /* Position */\n @apply m-0;\n}\n\n[data-wu='wallet-ui-icon'].sm {\n /* Radius */\n @apply rounded-sm;\n /* Shape */\n @apply h-[16px] w-[16px];\n}\n\n[data-wu='wallet-ui-icon'].md {\n /* Radius */\n @apply rounded-md;\n /* Shape */\n @apply h-[24px] w-[24px];\n}\n\n[data-wu='wallet-ui-icon'].lg {\n /* Radius */\n @apply rounded-lg;\n /* Shape */\n @apply h-[32px] w-[32px];\n}\n","[data-wu='wallet-ui-label'] {\n /* Text color */\n color: var(--wu-color-foreground);\n}\n\n[data-wu='wallet-ui-label'].sm {\n /* Size */\n @apply text-xs;\n /* Weight */\n @apply font-light;\n}\n\n[data-wu='wallet-ui-label'].md {\n /* Size */\n @apply text-base;\n /* Weight */\n @apply font-normal;\n}\n\n[data-wu='wallet-ui-label'].lg {\n /* Size */\n @apply text-xl;\n /* Weight */\n @apply font-semibold;\n}\n","[data-wu='wallet-ui-list-button'] {\n /* Composition */\n @apply flex items-center gap-2;\n /* No wrap */\n @apply whitespace-nowrap;\n /* Behavior */\n @apply cursor-pointer select-none appearance-none disabled:cursor-not-allowed disabled:opacity-50;\n\n &:hover {\n /* Background */\n background: var(--wu-color-background-hover);\n }\n}\n\n[data-wu='wallet-ui-list-button'].sm {\n @apply px-1 py-1 rounded-md;\n}\n\n[data-wu='wallet-ui-list-button'].md {\n @apply px-2 py-2 rounded-lg;\n}\n\n[data-wu='wallet-ui-list-button'].lg {\n @apply px-3 py-3 rounded-xl;\n}\n","[data-wu='wallet-ui-list'] {\n @apply flex flex-col;\n}\n\n[data-wu='wallet-ui-list'].sm {\n @apply gap-1;\n}\n\n[data-wu='wallet-ui-list'].md {\n @apply gap-2;\n}\n\n[data-wu='wallet-ui-list'].lg {\n @apply gap-3;\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/wallet-ui-variables.css","../src/wallet-ui-base-button.css","../src/wallet-ui-base-dropdown.css","../src/wallet-ui-base-modal.css","../src/wallet-ui-icon.css","../src/wallet-ui-label.css","../src/wallet-ui-list-button.css","../src/wallet-ui-list.css"],"sourcesContent":["/**\n * These are the variables that are used in the @wallet-ui/tailwind styles.\n *\n * The goal is to make them compatible with the defaults used by Shadcn so it integrates automagically.\n *\n * These styles are compiled by the Tailwind compiler and used in the @wallet-ui/react package.\n */\n@import 'tailwindcss';\n\n:root,\nhtml.light:root,\n[data-theme='light']:root {\n --wu-color-background: var(--color-neutral-50);\n --wu-color-background-hover: var(--color-neutral-100);\n --wu-color-border: var(--color-neutral-200);\n --wu-color-foreground: var(--color-neutral-950);\n --wu-color-foreground-hover: var(--color-neutral-900);\n --wu-color-ring: var(--color-neutral-400);\n}\n\nhtml.dark:root,\n[data-theme='dark']:root {\n --wu-color-background: var(--color-neutral-950);\n --wu-color-background-hover: var(--color-neutral-900);\n --wu-color-border: var(--color-neutral-800);\n --wu-color-foreground: var(--color-neutral-100);\n --wu-color-foreground-hover: var(--color-white);\n --wu-color-ring: var(--color-neutral-500);\n}\n","/**\n * These are the variables that style the BaseButton component.\n *\n * It targets the [data-wu='base-button'] and related [data-wu='base-button-*'] selectors.\n *\n * The colors are coming from the wallet-ui-variables.css file. Other styles are Tailwind CSS.\n */\n\n/* Base Button */\n[data-wu='base-button'] {\n /* Background */\n background: var(--wu-color-background);\n /* Text color */\n color: var(--wu-color-foreground);\n /* Border */\n @apply border;\n border-color: var(--wu-color-border);\n /* Shape */\n @apply rounded-md shadow-sm cursor-pointer;\n /* Composition */\n @apply flex items-center justify-center gap-2 whitespace-nowrap;\n /* Disabled */\n @apply disabled:cursor-not-allowed disabled:opacity-50;\n /* Padding */\n @apply px-4 py-3;\n /* Text size */\n @apply text-base;\n /* Text weight */\n @apply font-semibold;\n\n &:hover {\n /* Background */\n background: var(--wu-color-background-hover);\n /* Text color */\n color: var(--wu-color-foreground-hover);\n }\n\n &:focus {\n /* Outline */\n @apply outline-none;\n /* Box shadow */\n box-shadow: 0 0 0 2px var(--wu-color-ring);\n }\n}\n\n[data-wu='base-button-left-section'] {\n /* Composition */\n @apply mr-2;\n /* Text size */\n @apply text-sm;\n}\n\n[data-wu='base-button-right-section'] {\n /* Composition */\n @apply ml-2;\n /* Text size */\n @apply text-sm;\n}\n","/**\n * These are the variables that style the BaseDropdown component.\n *\n * It targets the [data-wu='base-dropdown'] and related [data-wu='base-dropdown-*'] selectors.\n *\n * The colors are coming from the wallet-ui-variables.css file. Other styles are Tailwind CSS.\n */\n\n/* Base Dropdown List */\n[data-wu='base-dropdown-list'] {\n /* Background */\n background: var(--wu-color-background);\n /* Border */\n @apply border outline-hidden;\n border-color: var(--wu-color-border);\n /*!* Shape *!*/\n @apply overflow-clip rounded-md p-1;\n}\n\n/* Base Dropdown Item */\n[data-wu='base-dropdown-item'] {\n /* Background */\n background: var(--wu-color-background);\n /* Text color */\n color: var(--wu-color-foreground);\n /* Content */\n @apply flex items-center gap-2;\n /* Shape */\n @apply cursor-pointer w-full rounded-md;\n /* Padding */\n @apply px-4 py-3;\n /* Text size */\n @apply text-base;\n\n &:hover {\n /* Background */\n background: var(--wu-color-background-hover);\n /* Text color */\n color: var(--wu-color-foreground-hover);\n }\n}\n\n/* Left Section */\n[data-wu='base-dropdown-item-left-section'] {\n @apply mr-2;\n}\n\n/* Right Section */\n[data-wu='base-dropdown-item-right-section'] {\n @apply ml-2;\n}\n","/**\n * TBD: Figure out how to match the behavior (data-scope='dialog') with our styles.\n *\n * For now, we don't have the Modal feature so this can stay here for now.\n */\n[data-scope='dialog'][data-part='backdrop'] {\n /* Position */\n @apply fixed top-0 left-0 bottom-0 w-full z-20;\n /* Background */\n @apply bg-black/40 dark:bg-black/70;\n}\n\n[data-scope='dialog'][data-part='positioner'] {\n /* Position */\n @apply fixed top-0 left-0 bottom-0 w-full z-20;\n /* Content */\n @apply flex items-center justify-center;\n}\n\n[data-scope='dialog'][data-part='content'] {\n /* Background */\n background: var(--wu-color-background);\n /* Border */\n @apply border;\n border-color: var(--wu-color-border);\n /* Position */\n @apply w-full overflow-hidden shadow-lg;\n /* Position */\n @apply max-w-sm mx-4;\n /* Shape */\n @apply rounded-lg outline-0;\n /* Padding */\n @apply p-2;\n}\n\n[data-scope='dialog'][data-part='content'] header {\n /* Content */\n @apply flex items-center justify-end;\n /* Padding */\n @apply pb-4;\n /* Text */\n @apply text-2xl;\n}\n\n[data-scope='dialog'][data-part='description'] {\n /* Content */\n @apply flex items-center justify-center;\n /* Padding */\n @apply pb-4 px-4;\n /* Text */\n @apply text-base;\n /* Text */\n color: var(--wu-color-foreground);\n}\n\n[data-scope='dialog'][data-part='close-trigger'] {\n /* Border */\n @apply border;\n border-color: var(--wu-color-border);\n /* Behavior */\n @apply cursor-pointer;\n /* Content */\n @apply flex items-center justify-center;\n /* Shape */\n @apply h-8 w-8 rounded-full;\n /* Text */\n color: var(--wu-color-foreground);\n\n &:hover {\n /* Background */\n background: var(--wu-color-background-hover);\n /* Text */\n color: var(--wu-color-foreground-hover);\n }\n}\n\n[data-scope='dialog'][data-part='content'][data-state='open'] {\n animation: anim-scale-in 300ms ease-out;\n}\n\n[data-scope='dialog'][data-part='content'][data-state='closed'] {\n animation: anim-scale-out 200ms ease-in;\n}\n\n/* Define the animations */\n@keyframes anim-scale-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes anim-scale-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n","[data-wu='wallet-ui-icon'] {\n /* Border */\n @apply border-0;\n /* Position */\n @apply m-0;\n /* Radius */\n @apply rounded-md;\n /* Shape */\n @apply h-[24px] w-[24px];\n}\n","[data-wu='wallet-ui-label'] {\n /* Text color */\n color: var(--wu-color-foreground);\n /* Size */\n @apply text-base;\n /* Weight */\n @apply font-normal;\n}\n","[data-wu='wallet-ui-list-button'] {\n /* Composition */\n @apply flex items-center gap-2;\n /* No wrap */\n @apply whitespace-nowrap;\n /* Behavior */\n @apply cursor-pointer select-none appearance-none disabled:cursor-not-allowed disabled:opacity-50;\n /* Radius */\n @apply rounded-lg;\n /* Padding */\n @apply px-2 py-2 rounded-lg;\n\n &:hover {\n /* Background */\n background: var(--wu-color-background-hover);\n }\n}\n","[data-wu='wallet-ui-list'] {\n @apply flex flex-col;\n @apply gap-2;\n}\n"],"mappings":"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","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wallet-ui/tailwind",
3
- "version": "2.0.0-canary-20250827030244",
3
+ "version": "2.0.0-canary-20250829062001",
4
4
  "description": "Tailwind CSS for Wallet UI",
5
5
  "exports": {
6
6
  ".": {