pure-react-ui 1.3.0 → 1.4.1

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.
@@ -1,454 +0,0 @@
1
- .pru-btn {
2
- cursor: pointer;
3
- letter-spacing: .02em;
4
- border: none;
5
- border-radius: 2px;
6
- justify-content: center;
7
- align-items: center;
8
- gap: 8px;
9
- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
10
- font-weight: 500;
11
- text-decoration: none;
12
- transition: all .2s cubic-bezier(.4, 0, .2, 1);
13
- display: inline-flex;
14
- position: relative;
15
- overflow: hidden;
16
- }
17
-
18
- .pru-btn:disabled {
19
- opacity: .5;
20
- cursor: not-allowed;
21
- }
22
-
23
- .pru-btn-xs {
24
- gap: 4px;
25
- padding: 4px 10px;
26
- font-size: 12px;
27
- }
28
-
29
- .pru-btn-small {
30
- gap: 6px;
31
- padding: 6px 14px;
32
- font-size: 13px;
33
- }
34
-
35
- .pru-btn-medium {
36
- padding: 10px 20px;
37
- font-size: 14px;
38
- }
39
-
40
- .pru-btn-large {
41
- padding: 14px 28px;
42
- font-size: 16px;
43
- }
44
-
45
- .pru-btn-xl {
46
- gap: 10px;
47
- padding: 18px 36px;
48
- font-size: 18px;
49
- }
50
-
51
- .pru-btn-full {
52
- width: 100%;
53
- }
54
-
55
- .pru-btn-rounded {
56
- border-radius: 50px;
57
- }
58
-
59
- .pru-btn-elevation-none {
60
- box-shadow: none;
61
- }
62
-
63
- .pru-btn-elevation-sm {
64
- box-shadow: 0 1px 2px #0000000d;
65
- }
66
-
67
- .pru-btn-elevation-md {
68
- box-shadow: 0 4px 6px #00000012;
69
- }
70
-
71
- .pru-btn-elevation-lg {
72
- box-shadow: 0 10px 15px #0000001a;
73
- }
74
-
75
- .pru-btn-elevation-sm:hover:not(:disabled), .pru-btn-elevation-md:hover:not(:disabled), .pru-btn-elevation-lg:hover:not(:disabled) {
76
- transform: translateY(-1px);
77
- box-shadow: 0 12px 20px #0000001f;
78
- }
79
-
80
- .pru-btn-primary {
81
- color: #fff;
82
- background-color: #2563eb;
83
- }
84
-
85
- .pru-btn-primary:hover:not(:disabled) {
86
- background-color: #1d4ed8;
87
- }
88
-
89
- .pru-btn-primary:active:not(:disabled) {
90
- background-color: #1e40af;
91
- }
92
-
93
- .pru-btn-secondary {
94
- color: #fff;
95
- background-color: #64748b;
96
- }
97
-
98
- .pru-btn-secondary:hover:not(:disabled) {
99
- background-color: #475569;
100
- }
101
-
102
- .pru-btn-secondary:active:not(:disabled) {
103
- background-color: #334155;
104
- }
105
-
106
- .pru-btn-success {
107
- color: #fff;
108
- background-color: #10b981;
109
- }
110
-
111
- .pru-btn-success:hover:not(:disabled) {
112
- background-color: #059669;
113
- }
114
-
115
- .pru-btn-success:active:not(:disabled) {
116
- background-color: #047857;
117
- }
118
-
119
- .pru-btn-danger {
120
- color: #fff;
121
- background-color: #ef4444;
122
- }
123
-
124
- .pru-btn-danger:hover:not(:disabled) {
125
- background-color: #dc2626;
126
- }
127
-
128
- .pru-btn-danger:active:not(:disabled) {
129
- background-color: #b91c1c;
130
- }
131
-
132
- .pru-btn-warning {
133
- color: #fff;
134
- background-color: #f59e0b;
135
- }
136
-
137
- .pru-btn-warning:hover:not(:disabled) {
138
- background-color: #d97706;
139
- }
140
-
141
- .pru-btn-warning:active:not(:disabled) {
142
- background-color: #b45309;
143
- }
144
-
145
- .pru-btn-info {
146
- color: #fff;
147
- background-color: #06b6d4;
148
- }
149
-
150
- .pru-btn-info:hover:not(:disabled) {
151
- background-color: #0891b2;
152
- }
153
-
154
- .pru-btn-info:active:not(:disabled) {
155
- background-color: #0e7490;
156
- }
157
-
158
- .pru-btn-outline-primary {
159
- color: #2563eb;
160
- background-color: #0000;
161
- border: 2px solid #2563eb;
162
- }
163
-
164
- .pru-btn-outline-primary:hover:not(:disabled) {
165
- color: #fff;
166
- background-color: #2563eb;
167
- }
168
-
169
- .pru-btn-outline-primary:active:not(:disabled) {
170
- background-color: #1d4ed8;
171
- border-color: #1d4ed8;
172
- }
173
-
174
- .pru-btn-outline-secondary {
175
- color: #64748b;
176
- background-color: #0000;
177
- border: 2px solid #64748b;
178
- }
179
-
180
- .pru-btn-outline-secondary:hover:not(:disabled) {
181
- color: #fff;
182
- background-color: #64748b;
183
- }
184
-
185
- .pru-btn-outline-secondary:active:not(:disabled) {
186
- background-color: #475569;
187
- border-color: #475569;
188
- }
189
-
190
- .pru-btn-outline-success {
191
- color: #10b981;
192
- background-color: #0000;
193
- border: 2px solid #10b981;
194
- }
195
-
196
- .pru-btn-outline-success:hover:not(:disabled) {
197
- color: #fff;
198
- background-color: #10b981;
199
- }
200
-
201
- .pru-btn-outline-success:active:not(:disabled) {
202
- background-color: #059669;
203
- border-color: #059669;
204
- }
205
-
206
- .pru-btn-outline-danger {
207
- color: #ef4444;
208
- background-color: #0000;
209
- border: 2px solid #ef4444;
210
- }
211
-
212
- .pru-btn-outline-danger:hover:not(:disabled) {
213
- color: #fff;
214
- background-color: #ef4444;
215
- }
216
-
217
- .pru-btn-outline-danger:active:not(:disabled) {
218
- background-color: #dc2626;
219
- border-color: #dc2626;
220
- }
221
-
222
- .pru-btn-outline-warning {
223
- color: #f59e0b;
224
- background-color: #0000;
225
- border: 2px solid #f59e0b;
226
- }
227
-
228
- .pru-btn-outline-warning:hover:not(:disabled) {
229
- color: #fff;
230
- background-color: #f59e0b;
231
- }
232
-
233
- .pru-btn-outline-warning:active:not(:disabled) {
234
- background-color: #d97706;
235
- border-color: #d97706;
236
- }
237
-
238
- .pru-btn-outline-info {
239
- color: #06b6d4;
240
- background-color: #0000;
241
- border: 2px solid #06b6d4;
242
- }
243
-
244
- .pru-btn-outline-info:hover:not(:disabled) {
245
- color: #fff;
246
- background-color: #06b6d4;
247
- }
248
-
249
- .pru-btn-outline-info:active:not(:disabled) {
250
- background-color: #0891b2;
251
- border-color: #0891b2;
252
- }
253
-
254
- .pru-btn-ghost-primary {
255
- color: #2563eb;
256
- background-color: #0000;
257
- }
258
-
259
- .pru-btn-ghost-primary:hover:not(:disabled) {
260
- background-color: #2563eb1a;
261
- }
262
-
263
- .pru-btn-ghost-primary:active:not(:disabled) {
264
- background-color: #2563eb26;
265
- }
266
-
267
- .pru-btn-ghost-secondary {
268
- color: #64748b;
269
- background-color: #0000;
270
- }
271
-
272
- .pru-btn-ghost-secondary:hover:not(:disabled) {
273
- background-color: #64748b1a;
274
- }
275
-
276
- .pru-btn-ghost-secondary:active:not(:disabled) {
277
- background-color: #64748b26;
278
- }
279
-
280
- .pru-btn-ghost-success {
281
- color: #10b981;
282
- background-color: #0000;
283
- }
284
-
285
- .pru-btn-ghost-success:hover:not(:disabled) {
286
- background-color: #10b9811a;
287
- }
288
-
289
- .pru-btn-ghost-success:active:not(:disabled) {
290
- background-color: #10b98126;
291
- }
292
-
293
- .pru-btn-ghost-danger {
294
- color: #ef4444;
295
- background-color: #0000;
296
- }
297
-
298
- .pru-btn-ghost-danger:hover:not(:disabled) {
299
- background-color: #ef44441a;
300
- }
301
-
302
- .pru-btn-ghost-danger:active:not(:disabled) {
303
- background-color: #ef444426;
304
- }
305
-
306
- .pru-btn-ghost-warning {
307
- color: #f59e0b;
308
- background-color: #0000;
309
- }
310
-
311
- .pru-btn-ghost-warning:hover:not(:disabled) {
312
- background-color: #f59e0b1a;
313
- }
314
-
315
- .pru-btn-ghost-warning:active:not(:disabled) {
316
- background-color: #f59e0b26;
317
- }
318
-
319
- .pru-btn-ghost-info {
320
- color: #06b6d4;
321
- background-color: #0000;
322
- }
323
-
324
- .pru-btn-ghost-info:hover:not(:disabled) {
325
- background-color: #06b6d41a;
326
- }
327
-
328
- .pru-btn-ghost-info:active:not(:disabled) {
329
- background-color: #06b6d426;
330
- }
331
-
332
- .pru-btn-gradient-primary {
333
- color: #fff;
334
- background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
335
- border: none;
336
- }
337
-
338
- .pru-btn-gradient-primary:hover:not(:disabled) {
339
- background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
340
- }
341
-
342
- .pru-btn-gradient-primary:active:not(:disabled) {
343
- background: linear-gradient(135deg, #1e40af 0%, #5b21b6 100%);
344
- }
345
-
346
- .pru-btn-gradient-success {
347
- color: #fff;
348
- background: linear-gradient(135deg, #10b981 0%, #059669 100%);
349
- border: none;
350
- }
351
-
352
- .pru-btn-gradient-success:hover:not(:disabled) {
353
- background: linear-gradient(135deg, #059669 0%, #047857 100%);
354
- }
355
-
356
- .pru-btn-gradient-success:active:not(:disabled) {
357
- background: linear-gradient(135deg, #047857 0%, #065f46 100%);
358
- }
359
-
360
- .pru-btn-gradient-danger {
361
- color: #fff;
362
- background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
363
- border: none;
364
- }
365
-
366
- .pru-btn-gradient-danger:hover:not(:disabled) {
367
- background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
368
- }
369
-
370
- .pru-btn-gradient-danger:active:not(:disabled) {
371
- background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
372
- }
373
-
374
- .pru-btn-spinner {
375
- width: 16px;
376
- height: 16px;
377
- display: inline-flex;
378
- }
379
-
380
- .pru-btn-spinner-inner {
381
- border: 2px solid;
382
- border-color: currentColor currentColor #0000 #0000;
383
- border-radius: 50%;
384
- width: 100%;
385
- height: 100%;
386
- animation: .6s linear infinite pru-spin;
387
- }
388
-
389
- @keyframes pru-spin {
390
- to {
391
- transform: rotate(360deg);
392
- }
393
- }
394
-
395
- .pru-btn-ripple {
396
- pointer-events: none;
397
- background-color: #fff9;
398
- border-radius: 50%;
399
- animation: .6s ease-out pru-ripple;
400
- position: absolute;
401
- transform: scale(0);
402
- }
403
-
404
- @keyframes pru-ripple {
405
- to {
406
- opacity: 0;
407
- transform: scale(4);
408
- }
409
- }
410
-
411
- .pru-btn-icon-left, .pru-btn-icon-right {
412
- align-items: center;
413
- display: flex;
414
- }
415
-
416
- .pru-btn-content {
417
- opacity: 1;
418
- transition: opacity .2s;
419
- }
420
-
421
- .pru-btn[aria-disabled="true"] .pru-btn-content {
422
- opacity: .7;
423
- }
424
-
425
- .pru-btn:active:not(:disabled) {
426
- transform: scale(.98);
427
- }
428
-
429
- .pru-btn:focus {
430
- outline: none;
431
- }
432
-
433
- .pru-btn:focus-visible {
434
- outline-offset: 2px;
435
- outline: 2px solid;
436
- }
437
-
438
- .pru-btn > * {
439
- align-items: center;
440
- display: inline-flex;
441
- }
442
-
443
- @media (width <= 640px) {
444
- .pru-btn-xl {
445
- padding: 14px 28px;
446
- font-size: 16px;
447
- }
448
-
449
- .pru-btn-large {
450
- padding: 12px 24px;
451
- font-size: 15px;
452
- }
453
- }
454
- /*# sourceMappingURL=index.esm.css.map */
@@ -1 +0,0 @@
1
- {"mappings":"AACA;;;;;;;;;;;;;;;;;AAiBA;;;;;AAWA;;;;;;AAMA;;;;;;AAMA;;;;;AAKA;;;;;AAKA;;;;;;AAOA;;;;AAKA;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAQA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAMA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAKA;;;;;;AAKA;;;;AAGA;;;;AAIA;;;;;;AAKA;;;;AAGA;;;;AAIA;;;;;;AAKA;;;;AAGA;;;;AAKA;;;;;;AAMA;;;;;;;;;AAUA;;;;;;AAOA;;;;;;;;;AASA;;;;;;;AAQA;;;;;AAMA;;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAIA;;;;;AAMA;;;;;AAMA;EACE;;;;;EAKA","sources":["components/Button/Button.css"],"sourcesContent":["/* Base Button Styles */\r\n.pru-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n border: none;\r\n border-radius: 2px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n overflow: hidden;\r\n text-decoration: none;\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;\r\n letter-spacing: 0.02em;\r\n}\r\n\r\n.pru-btn:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n}\r\n\r\n.pru-btn:focus-visible {\r\n outline: 2px solid currentColor;\r\n outline-offset: 2px;\r\n}\r\n\r\n/* Sizes */\r\n.pru-btn-xs {\r\n padding: 4px 10px;\r\n font-size: 12px;\r\n gap: 4px;\r\n}\r\n\r\n.pru-btn-small {\r\n padding: 6px 14px;\r\n font-size: 13px;\r\n gap: 6px;\r\n}\r\n\r\n.pru-btn-medium {\r\n padding: 10px 20px;\r\n font-size: 14px;\r\n}\r\n\r\n.pru-btn-large {\r\n padding: 14px 28px;\r\n font-size: 16px;\r\n}\r\n\r\n.pru-btn-xl {\r\n padding: 18px 36px;\r\n font-size: 18px;\r\n gap: 10px;\r\n}\r\n\r\n/* Full width */\r\n.pru-btn-full {\r\n width: 100%;\r\n}\r\n\r\n/* Rounded */\r\n.pru-btn-rounded {\r\n border-radius: 50px;\r\n}\r\n\r\n/* Elevation Shadows */\r\n.pru-btn-elevation-none {\r\n box-shadow: none;\r\n}\r\n\r\n.pru-btn-elevation-sm {\r\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.pru-btn-elevation-md {\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);\r\n}\r\n\r\n.pru-btn-elevation-lg {\r\n box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.pru-btn-elevation-sm:hover:not(:disabled),\r\n.pru-btn-elevation-md:hover:not(:disabled),\r\n.pru-btn-elevation-lg:hover:not(:disabled) {\r\n transform: translateY(-1px);\r\n box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n/* Solid Variants */\r\n.pru-btn-primary {\r\n background-color: #2563eb;\r\n color: white;\r\n}\r\n.pru-btn-primary:hover:not(:disabled) {\r\n background-color: #1d4ed8;\r\n}\r\n.pru-btn-primary:active:not(:disabled) {\r\n background-color: #1e40af;\r\n}\r\n\r\n.pru-btn-secondary {\r\n background-color: #64748b;\r\n color: white;\r\n}\r\n.pru-btn-secondary:hover:not(:disabled) {\r\n background-color: #475569;\r\n}\r\n.pru-btn-secondary:active:not(:disabled) {\r\n background-color: #334155;\r\n}\r\n\r\n.pru-btn-success {\r\n background-color: #10b981;\r\n color: white;\r\n}\r\n.pru-btn-success:hover:not(:disabled) {\r\n background-color: #059669;\r\n}\r\n.pru-btn-success:active:not(:disabled) {\r\n background-color: #047857;\r\n}\r\n\r\n.pru-btn-danger {\r\n background-color: #ef4444;\r\n color: white;\r\n}\r\n.pru-btn-danger:hover:not(:disabled) {\r\n background-color: #dc2626;\r\n}\r\n.pru-btn-danger:active:not(:disabled) {\r\n background-color: #b91c1c;\r\n}\r\n\r\n.pru-btn-warning {\r\n background-color: #f59e0b;\r\n color: white;\r\n}\r\n.pru-btn-warning:hover:not(:disabled) {\r\n background-color: #d97706;\r\n}\r\n.pru-btn-warning:active:not(:disabled) {\r\n background-color: #b45309;\r\n}\r\n\r\n.pru-btn-info {\r\n background-color: #06b6d4;\r\n color: white;\r\n}\r\n.pru-btn-info:hover:not(:disabled) {\r\n background-color: #0891b2;\r\n}\r\n.pru-btn-info:active:not(:disabled) {\r\n background-color: #0e7490;\r\n}\r\n\r\n/* Outline Variants */\r\n.pru-btn-outline-primary {\r\n background-color: transparent;\r\n border: 2px solid #2563eb;\r\n color: #2563eb;\r\n}\r\n.pru-btn-outline-primary:hover:not(:disabled) {\r\n background-color: #2563eb;\r\n color: white;\r\n}\r\n.pru-btn-outline-primary:active:not(:disabled) {\r\n background-color: #1d4ed8;\r\n border-color: #1d4ed8;\r\n}\r\n\r\n.pru-btn-outline-secondary {\r\n background-color: transparent;\r\n border: 2px solid #64748b;\r\n color: #64748b;\r\n}\r\n.pru-btn-outline-secondary:hover:not(:disabled) {\r\n background-color: #64748b;\r\n color: white;\r\n}\r\n.pru-btn-outline-secondary:active:not(:disabled) {\r\n background-color: #475569;\r\n border-color: #475569;\r\n}\r\n\r\n.pru-btn-outline-success {\r\n background-color: transparent;\r\n border: 2px solid #10b981;\r\n color: #10b981;\r\n}\r\n.pru-btn-outline-success:hover:not(:disabled) {\r\n background-color: #10b981;\r\n color: white;\r\n}\r\n.pru-btn-outline-success:active:not(:disabled) {\r\n background-color: #059669;\r\n border-color: #059669;\r\n}\r\n\r\n.pru-btn-outline-danger {\r\n background-color: transparent;\r\n border: 2px solid #ef4444;\r\n color: #ef4444;\r\n}\r\n.pru-btn-outline-danger:hover:not(:disabled) {\r\n background-color: #ef4444;\r\n color: white;\r\n}\r\n.pru-btn-outline-danger:active:not(:disabled) {\r\n background-color: #dc2626;\r\n border-color: #dc2626;\r\n}\r\n\r\n.pru-btn-outline-warning {\r\n background-color: transparent;\r\n border: 2px solid #f59e0b;\r\n color: #f59e0b;\r\n}\r\n.pru-btn-outline-warning:hover:not(:disabled) {\r\n background-color: #f59e0b;\r\n color: white;\r\n}\r\n.pru-btn-outline-warning:active:not(:disabled) {\r\n background-color: #d97706;\r\n border-color: #d97706;\r\n}\r\n\r\n.pru-btn-outline-info {\r\n background-color: transparent;\r\n border: 2px solid #06b6d4;\r\n color: #06b6d4;\r\n}\r\n.pru-btn-outline-info:hover:not(:disabled) {\r\n background-color: #06b6d4;\r\n color: white;\r\n}\r\n.pru-btn-outline-info:active:not(:disabled) {\r\n background-color: #0891b2;\r\n border-color: #0891b2;\r\n}\r\n\r\n/* Ghost Variants */\r\n.pru-btn-ghost-primary {\r\n background-color: transparent;\r\n color: #2563eb;\r\n}\r\n.pru-btn-ghost-primary:hover:not(:disabled) {\r\n background-color: rgba(37, 99, 235, 0.1);\r\n}\r\n.pru-btn-ghost-primary:active:not(:disabled) {\r\n background-color: rgba(37, 99, 235, 0.15);\r\n}\r\n\r\n.pru-btn-ghost-secondary {\r\n background-color: transparent;\r\n color: #64748b;\r\n}\r\n.pru-btn-ghost-secondary:hover:not(:disabled) {\r\n background-color: rgba(100, 116, 139, 0.1);\r\n}\r\n.pru-btn-ghost-secondary:active:not(:disabled) {\r\n background-color: rgba(100, 116, 139, 0.15);\r\n}\r\n\r\n.pru-btn-ghost-success {\r\n background-color: transparent;\r\n color: #10b981;\r\n}\r\n.pru-btn-ghost-success:hover:not(:disabled) {\r\n background-color: rgba(16, 185, 129, 0.1);\r\n}\r\n.pru-btn-ghost-success:active:not(:disabled) {\r\n background-color: rgba(16, 185, 129, 0.15);\r\n}\r\n\r\n.pru-btn-ghost-danger {\r\n background-color: transparent;\r\n color: #ef4444;\r\n}\r\n.pru-btn-ghost-danger:hover:not(:disabled) {\r\n background-color: rgba(239, 68, 68, 0.1);\r\n}\r\n.pru-btn-ghost-danger:active:not(:disabled) {\r\n background-color: rgba(239, 68, 68, 0.15);\r\n}\r\n\r\n.pru-btn-ghost-warning {\r\n background-color: transparent;\r\n color: #f59e0b;\r\n}\r\n.pru-btn-ghost-warning:hover:not(:disabled) {\r\n background-color: rgba(245, 158, 11, 0.1);\r\n}\r\n.pru-btn-ghost-warning:active:not(:disabled) {\r\n background-color: rgba(245, 158, 11, 0.15);\r\n}\r\n\r\n.pru-btn-ghost-info {\r\n background-color: transparent;\r\n color: #06b6d4;\r\n}\r\n.pru-btn-ghost-info:hover:not(:disabled) {\r\n background-color: rgba(6, 182, 212, 0.1);\r\n}\r\n.pru-btn-ghost-info:active:not(:disabled) {\r\n background-color: rgba(6, 182, 212, 0.15);\r\n}\r\n\r\n/* Gradient Variants */\r\n.pru-btn-gradient-primary {\r\n background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);\r\n color: white;\r\n border: none;\r\n}\r\n.pru-btn-gradient-primary:hover:not(:disabled) {\r\n background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);\r\n}\r\n.pru-btn-gradient-primary:active:not(:disabled) {\r\n background: linear-gradient(135deg, #1e40af 0%, #5b21b6 100%);\r\n}\r\n\r\n.pru-btn-gradient-success {\r\n background: linear-gradient(135deg, #10b981 0%, #059669 100%);\r\n color: white;\r\n border: none;\r\n}\r\n.pru-btn-gradient-success:hover:not(:disabled) {\r\n background: linear-gradient(135deg, #059669 0%, #047857 100%);\r\n}\r\n.pru-btn-gradient-success:active:not(:disabled) {\r\n background: linear-gradient(135deg, #047857 0%, #065f46 100%);\r\n}\r\n\r\n.pru-btn-gradient-danger {\r\n background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\r\n color: white;\r\n border: none;\r\n}\r\n.pru-btn-gradient-danger:hover:not(:disabled) {\r\n background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\r\n}\r\n.pru-btn-gradient-danger:active:not(:disabled) {\r\n background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);\r\n}\r\n\r\n/* Loading Spinner */\r\n.pru-btn-spinner {\r\n display: inline-flex;\r\n width: 16px;\r\n height: 16px;\r\n}\r\n\r\n.pru-btn-spinner-inner {\r\n width: 100%;\r\n height: 100%;\r\n border: 2px solid transparent;\r\n border-top-color: currentColor;\r\n border-right-color: currentColor;\r\n border-radius: 50%;\r\n animation: pru-spin 0.6s linear infinite;\r\n}\r\n\r\n@keyframes pru-spin {\r\n to { \r\n transform: rotate(360deg); \r\n }\r\n}\r\n\r\n/* Ripple Effect */\r\n.pru-btn-ripple {\r\n position: absolute;\r\n border-radius: 50%;\r\n background-color: rgba(255, 255, 255, 0.6);\r\n pointer-events: none;\r\n transform: scale(0);\r\n animation: pru-ripple 0.6s ease-out;\r\n}\r\n\r\n@keyframes pru-ripple {\r\n to {\r\n transform: scale(4);\r\n opacity: 0;\r\n }\r\n}\r\n\r\n/* Icon spacing */\r\n.pru-btn-icon-left,\r\n.pru-btn-icon-right {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.pru-btn-content {\r\n opacity: 1;\r\n transition: opacity 0.2s;\r\n}\r\n\r\n.pru-btn[aria-disabled=\"true\"] .pru-btn-content {\r\n opacity: 0.7;\r\n}\r\n\r\n/* Active state for better feedback */\r\n.pru-btn:active:not(:disabled) {\r\n transform: scale(0.98);\r\n}\r\n\r\n/* Improved focus states for accessibility */\r\n.pru-btn:focus {\r\n outline: none;\r\n}\r\n\r\n.pru-btn:focus-visible {\r\n outline: 2px solid currentColor;\r\n outline-offset: 2px;\r\n}\r\n\r\n/* Ensure proper alignment */\r\n.pru-btn > * {\r\n display: inline-flex;\r\n align-items: center;\r\n}\r\n\r\n/* Responsive adjustments */\r\n@media (max-width: 640px) {\r\n .pru-btn-xl {\r\n padding: 14px 28px;\r\n font-size: 16px;\r\n }\r\n \r\n .pru-btn-large {\r\n padding: 12px 24px;\r\n font-size: 15px;\r\n }\r\n}"],"names":[],"version":3,"file":"index.esm.css.map"}
package/dist/index.esm.js DELETED
@@ -1,98 +0,0 @@
1
- import "./index.esm.css";
2
- import {jsxs as $hCgyA$jsxs, jsx as $hCgyA$jsx} from "react/jsx-runtime";
3
- import $hCgyA$react from "react";
4
-
5
-
6
- function $parcel$exportWildcard(dest, source) {
7
- Object.keys(source).forEach(function(key) {
8
- if (key === 'default' || key === '__esModule' || Object.prototype.hasOwnProperty.call(dest, key)) {
9
- return;
10
- }
11
-
12
- Object.defineProperty(dest, key, {
13
- enumerable: true,
14
- get: function get() {
15
- return source[key];
16
- }
17
- });
18
- });
19
-
20
- return dest;
21
- }
22
-
23
- function $parcel$export(e, n, v, s) {
24
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
25
- }
26
- var $09061bf36a328a3d$exports = {};
27
- var $718c29e90f2592b1$exports = {};
28
-
29
- $parcel$export($718c29e90f2592b1$exports, "Button", () => $3b676a50c78284a9$export$353f5b6fc5456de1);
30
-
31
-
32
-
33
- const $3b676a50c78284a9$export$353f5b6fc5456de1 = ({ children: children, variant: variant = 'primary', size: size = 'medium', loading: loading = false, iconLeft: iconLeft, iconRight: iconRight, fullWidth: fullWidth = false, disabled: disabled = false, rounded: rounded = false, elevation: elevation = 'none', ripple: ripple = true, className: className = '', onClick: onClick, ...rest })=>{
34
- const isDisabled = disabled || loading;
35
- const buttonRef = (0, $hCgyA$react).useRef(null);
36
- const handleClick = (e)=>{
37
- if (ripple && !isDisabled && buttonRef.current) createRipple(e, buttonRef.current);
38
- if (onClick && !isDisabled) onClick(e);
39
- };
40
- const createRipple = (event, button)=>{
41
- const ripple = document.createElement('span');
42
- const rect = button.getBoundingClientRect();
43
- const size = Math.max(rect.width, rect.height);
44
- const x = event.clientX - rect.left - size / 2;
45
- const y = event.clientY - rect.top - size / 2;
46
- ripple.style.width = ripple.style.height = `${size}px`;
47
- ripple.style.left = `${x}px`;
48
- ripple.style.top = `${y}px`;
49
- ripple.classList.add('pru-btn-ripple');
50
- const existingRipple = button.querySelector('.pru-btn-ripple');
51
- if (existingRipple) existingRipple.remove();
52
- button.appendChild(ripple);
53
- setTimeout(()=>{
54
- ripple.remove();
55
- }, 600);
56
- };
57
- return /*#__PURE__*/ (0, $hCgyA$jsxs)("button", {
58
- ref: buttonRef,
59
- className: `pru-btn pru-btn-${variant} pru-btn-${size} ${fullWidth ? 'pru-btn-full' : ''} ${rounded ? 'pru-btn-rounded' : ''} pru-btn-elevation-${elevation} ${className}`,
60
- disabled: isDisabled,
61
- "aria-disabled": isDisabled,
62
- "aria-busy": loading,
63
- onClick: handleClick,
64
- ...rest,
65
- children: [
66
- loading && /*#__PURE__*/ (0, $hCgyA$jsx)("span", {
67
- className: "pru-btn-spinner",
68
- "aria-hidden": "true",
69
- children: /*#__PURE__*/ (0, $hCgyA$jsx)("span", {
70
- className: "pru-btn-spinner-inner"
71
- })
72
- }),
73
- iconLeft && !loading && /*#__PURE__*/ (0, $hCgyA$jsx)("span", {
74
- className: "pru-btn-icon-left",
75
- children: iconLeft
76
- }),
77
- /*#__PURE__*/ (0, $hCgyA$jsx)("span", {
78
- className: "pru-btn-content",
79
- children: children
80
- }),
81
- iconRight && !loading && /*#__PURE__*/ (0, $hCgyA$jsx)("span", {
82
- className: "pru-btn-icon-right",
83
- children: iconRight
84
- })
85
- ]
86
- });
87
- };
88
-
89
-
90
-
91
-
92
- $parcel$exportWildcard($09061bf36a328a3d$exports, $718c29e90f2592b1$exports);
93
-
94
-
95
-
96
-
97
- export {$3b676a50c78284a9$export$353f5b6fc5456de1 as Button};
98
- //# sourceMappingURL=index.esm.js.map
@@ -1 +0,0 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AGqCO,MAAM,4CAAgC,CAAC,YAC5C,QAAQ,WACR,UAAU,iBACV,OAAO,mBACP,UAAU,iBACV,QAAQ,aACR,SAAS,aACT,YAAY,iBACZ,WAAW,gBACX,UAAU,kBACV,YAAY,gBACZ,SAAS,iBACT,YAAY,aACZ,OAAO,EACP,GAAG,MACJ;IACC,MAAM,aAAa,YAAY;IAC/B,MAAM,YAAY,CAAA,GAAA,YAAI,EAAE,MAAM,CAAoB;IAElD,MAAM,cAAc,CAAC;QACnB,IAAI,UAAU,CAAC,cAAc,UAAU,OAAO,EAC5C,aAAa,GAAG,UAAU,OAAO;QAEnC,IAAI,WAAW,CAAC,YACd,QAAQ;IAEZ;IAEA,MAAM,eAAe,CAAC,OAA4C;QAChE,MAAM,SAAS,SAAS,aAAa,CAAC;QACtC,MAAM,OAAO,OAAO,qBAAqB;QACzC,MAAM,OAAO,KAAK,GAAG,CAAC,KAAK,KAAK,EAAE,KAAK,MAAM;QAC7C,MAAM,IAAI,MAAM,OAAO,GAAG,KAAK,IAAI,GAAG,OAAO;QAC7C,MAAM,IAAI,MAAM,OAAO,GAAG,KAAK,GAAG,GAAG,OAAO;QAE5C,OAAO,KAAK,CAAC,KAAK,GAAG,OAAO,KAAK,CAAC,MAAM,GAAG,GAAG,KAAK,EAAE,CAAC;QACtD,OAAO,KAAK,CAAC,IAAI,GAAG,GAAG,EAAE,EAAE,CAAC;QAC5B,OAAO,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,EAAE,CAAC;QAC3B,OAAO,SAAS,CAAC,GAAG,CAAC;QAErB,MAAM,iBAAiB,OAAO,aAAa,CAAC;QAC5C,IAAI,gBACF,eAAe,MAAM;QAGvB,OAAO,WAAW,CAAC;QAEnB,WAAW;YACT,OAAO,MAAM;QACf,GAAG;IACL;IAEA,qBACE,iBAAC;QACC,KAAK;QACL,WAAW,CAAC,gBAAgB,EAAE,QAAQ,SAAS,EAAE,KAAK,CAAC,EAAE,YAAY,iBAAiB,GAAG,CAAC,EACxF,UAAU,oBAAoB,GAC/B,mBAAmB,EAAE,UAAU,CAAC,EAAE,WAAW;QAC9C,UAAU;QACV,iBAAe;QACf,aAAW;QACX,SAAS;QACR,GAAG,IAAI;;YAEP,yBACC,gBAAC;gBAAK,WAAU;gBAAkB,eAAY;0BAC5C,cAAA,gBAAC;oBAAK,WAAU;;;YAGnB,YAAY,CAAC,yBAAW,gBAAC;gBAAK,WAAU;0BAAqB;;0BAC9D,gBAAC;gBAAK,WAAU;0BAAmB;;YAClC,aAAa,CAAC,yBAAW,gBAAC;gBAAK,WAAU;0BAAsB;;;;AAGtE","sources":["index.ts","components/index.ts","components/Button/index.ts","components/Button/Button.tsx"],"sourcesContent":["export * from './components';","export * from './Button';","export { Button } from './Button';\r\nexport type { ButtonProps } from './Button';","import React from 'react';\r\nimport './Button.css';\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n children: React.ReactNode;\r\n variant?:\r\n | 'primary'\r\n | 'secondary'\r\n | 'success'\r\n | 'danger'\r\n | 'warning'\r\n | 'info'\r\n | 'outline-primary'\r\n | 'outline-secondary'\r\n | 'outline-success'\r\n | 'outline-danger'\r\n | 'outline-warning'\r\n | 'outline-info'\r\n | 'ghost-primary'\r\n | 'ghost-secondary'\r\n | 'ghost-success'\r\n | 'ghost-danger'\r\n | 'ghost-warning'\r\n | 'ghost-info'\r\n | 'gradient-primary'\r\n | 'gradient-success'\r\n | 'gradient-danger';\r\n size?: 'xs' | 'small' | 'medium' | 'large' | 'xl';\r\n loading?: boolean;\r\n iconLeft?: React.ReactNode;\r\n iconRight?: React.ReactNode;\r\n fullWidth?: boolean;\r\n rounded?: boolean;\r\n elevation?: 'none' | 'sm' | 'md' | 'lg';\r\n ripple?: boolean;\r\n}\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n children,\r\n variant = 'primary',\r\n size = 'medium',\r\n loading = false,\r\n iconLeft,\r\n iconRight,\r\n fullWidth = false,\r\n disabled = false,\r\n rounded = false,\r\n elevation = 'none',\r\n ripple = true,\r\n className = '',\r\n onClick,\r\n ...rest\r\n}) => {\r\n const isDisabled = disabled || loading;\r\n const buttonRef = React.useRef<HTMLButtonElement>(null);\r\n\r\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n if (ripple && !isDisabled && buttonRef.current) {\r\n createRipple(e, buttonRef.current);\r\n }\r\n if (onClick && !isDisabled) {\r\n onClick(e);\r\n }\r\n };\r\n\r\n const createRipple = (event: React.MouseEvent<HTMLButtonElement>, button: HTMLButtonElement) => {\r\n const ripple = document.createElement('span');\r\n const rect = button.getBoundingClientRect();\r\n const size = Math.max(rect.width, rect.height);\r\n const x = event.clientX - rect.left - size / 2;\r\n const y = event.clientY - rect.top - size / 2;\r\n\r\n ripple.style.width = ripple.style.height = `${size}px`;\r\n ripple.style.left = `${x}px`;\r\n ripple.style.top = `${y}px`;\r\n ripple.classList.add('pru-btn-ripple');\r\n\r\n const existingRipple = button.querySelector('.pru-btn-ripple');\r\n if (existingRipple) {\r\n existingRipple.remove();\r\n }\r\n\r\n button.appendChild(ripple);\r\n\r\n setTimeout(() => {\r\n ripple.remove();\r\n }, 600);\r\n };\r\n\r\n return (\r\n <button\r\n ref={buttonRef}\r\n className={`pru-btn pru-btn-${variant} pru-btn-${size} ${fullWidth ? 'pru-btn-full' : ''} ${\r\n rounded ? 'pru-btn-rounded' : ''\r\n } pru-btn-elevation-${elevation} ${className}`}\r\n disabled={isDisabled}\r\n aria-disabled={isDisabled}\r\n aria-busy={loading}\r\n onClick={handleClick}\r\n {...rest}\r\n >\r\n {loading && (\r\n <span className=\"pru-btn-spinner\" aria-hidden=\"true\">\r\n <span className=\"pru-btn-spinner-inner\"></span>\r\n </span>\r\n )}\r\n {iconLeft && !loading && <span className=\"pru-btn-icon-left\">{iconLeft}</span>}\r\n <span className=\"pru-btn-content\">{children}</span>\r\n {iconRight && !loading && <span className=\"pru-btn-icon-right\">{iconRight}</span>}\r\n </button>\r\n );\r\n};"],"names":[],"version":3,"file":"index.esm.js.map"}
package/dist/index.js DELETED
@@ -1,102 +0,0 @@
1
- require("./index.css");
2
- var $g5Y9E$reactjsxruntime = require("react/jsx-runtime");
3
- var $g5Y9E$react = require("react");
4
-
5
-
6
- function $parcel$exportWildcard(dest, source) {
7
- Object.keys(source).forEach(function(key) {
8
- if (key === 'default' || key === '__esModule' || Object.prototype.hasOwnProperty.call(dest, key)) {
9
- return;
10
- }
11
-
12
- Object.defineProperty(dest, key, {
13
- enumerable: true,
14
- get: function get() {
15
- return source[key];
16
- }
17
- });
18
- });
19
-
20
- return dest;
21
- }
22
-
23
- function $parcel$export(e, n, v, s) {
24
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
25
- }
26
-
27
- function $parcel$interopDefault(a) {
28
- return a && a.__esModule ? a.default : a;
29
- }
30
- var $0bfc0d07c177cab5$exports = {};
31
- var $792310cfcca9bf5b$exports = {};
32
-
33
- $parcel$export($792310cfcca9bf5b$exports, "Button", () => $af8861f1a735d489$export$353f5b6fc5456de1);
34
-
35
-
36
-
37
- const $af8861f1a735d489$export$353f5b6fc5456de1 = ({ children: children, variant: variant = 'primary', size: size = 'medium', loading: loading = false, iconLeft: iconLeft, iconRight: iconRight, fullWidth: fullWidth = false, disabled: disabled = false, rounded: rounded = false, elevation: elevation = 'none', ripple: ripple = true, className: className = '', onClick: onClick, ...rest })=>{
38
- const isDisabled = disabled || loading;
39
- const buttonRef = (0, ($parcel$interopDefault($g5Y9E$react))).useRef(null);
40
- const handleClick = (e)=>{
41
- if (ripple && !isDisabled && buttonRef.current) createRipple(e, buttonRef.current);
42
- if (onClick && !isDisabled) onClick(e);
43
- };
44
- const createRipple = (event, button)=>{
45
- const ripple = document.createElement('span');
46
- const rect = button.getBoundingClientRect();
47
- const size = Math.max(rect.width, rect.height);
48
- const x = event.clientX - rect.left - size / 2;
49
- const y = event.clientY - rect.top - size / 2;
50
- ripple.style.width = ripple.style.height = `${size}px`;
51
- ripple.style.left = `${x}px`;
52
- ripple.style.top = `${y}px`;
53
- ripple.classList.add('pru-btn-ripple');
54
- const existingRipple = button.querySelector('.pru-btn-ripple');
55
- if (existingRipple) existingRipple.remove();
56
- button.appendChild(ripple);
57
- setTimeout(()=>{
58
- ripple.remove();
59
- }, 600);
60
- };
61
- return /*#__PURE__*/ (0, $g5Y9E$reactjsxruntime.jsxs)("button", {
62
- ref: buttonRef,
63
- className: `pru-btn pru-btn-${variant} pru-btn-${size} ${fullWidth ? 'pru-btn-full' : ''} ${rounded ? 'pru-btn-rounded' : ''} pru-btn-elevation-${elevation} ${className}`,
64
- disabled: isDisabled,
65
- "aria-disabled": isDisabled,
66
- "aria-busy": loading,
67
- onClick: handleClick,
68
- ...rest,
69
- children: [
70
- loading && /*#__PURE__*/ (0, $g5Y9E$reactjsxruntime.jsx)("span", {
71
- className: "pru-btn-spinner",
72
- "aria-hidden": "true",
73
- children: /*#__PURE__*/ (0, $g5Y9E$reactjsxruntime.jsx)("span", {
74
- className: "pru-btn-spinner-inner"
75
- })
76
- }),
77
- iconLeft && !loading && /*#__PURE__*/ (0, $g5Y9E$reactjsxruntime.jsx)("span", {
78
- className: "pru-btn-icon-left",
79
- children: iconLeft
80
- }),
81
- /*#__PURE__*/ (0, $g5Y9E$reactjsxruntime.jsx)("span", {
82
- className: "pru-btn-content",
83
- children: children
84
- }),
85
- iconRight && !loading && /*#__PURE__*/ (0, $g5Y9E$reactjsxruntime.jsx)("span", {
86
- className: "pru-btn-icon-right",
87
- children: iconRight
88
- })
89
- ]
90
- });
91
- };
92
-
93
-
94
-
95
-
96
- $parcel$exportWildcard($0bfc0d07c177cab5$exports, $792310cfcca9bf5b$exports);
97
-
98
-
99
- $parcel$exportWildcard(module.exports, $0bfc0d07c177cab5$exports);
100
-
101
-
102
- //# sourceMappingURL=index.js.map