pure-react-ui 1.0.0 → 1.1.0
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.
- package/dist/index.css +115 -3
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +7 -5
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.css +115 -3
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +26 -8
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +25 -7
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -2,10 +2,14 @@
|
|
|
2
2
|
cursor: pointer;
|
|
3
3
|
border: none;
|
|
4
4
|
border-radius: 6px;
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
justify-content: center;
|
|
6
|
+
align-items: center;
|
|
7
|
+
gap: 8px;
|
|
7
8
|
font-weight: 500;
|
|
8
|
-
|
|
9
|
+
text-decoration: none;
|
|
10
|
+
transition: all .2s;
|
|
11
|
+
display: inline-flex;
|
|
12
|
+
position: relative;
|
|
9
13
|
}
|
|
10
14
|
|
|
11
15
|
.pru-btn:disabled {
|
|
@@ -13,6 +17,25 @@
|
|
|
13
17
|
cursor: not-allowed;
|
|
14
18
|
}
|
|
15
19
|
|
|
20
|
+
.pru-btn-small {
|
|
21
|
+
padding: 6px 12px;
|
|
22
|
+
font-size: 14px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.pru-btn-medium {
|
|
26
|
+
padding: 10px 20px;
|
|
27
|
+
font-size: 16px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.pru-btn-large {
|
|
31
|
+
padding: 14px 28px;
|
|
32
|
+
font-size: 18px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.pru-btn-full {
|
|
36
|
+
width: 100%;
|
|
37
|
+
}
|
|
38
|
+
|
|
16
39
|
.pru-btn-primary {
|
|
17
40
|
color: #fff;
|
|
18
41
|
background-color: #007bff;
|
|
@@ -39,4 +62,93 @@
|
|
|
39
62
|
.pru-btn-danger:hover:not(:disabled) {
|
|
40
63
|
background-color: #c82333;
|
|
41
64
|
}
|
|
65
|
+
|
|
66
|
+
.pru-btn-outline-primary {
|
|
67
|
+
color: #007bff;
|
|
68
|
+
background-color: #0000;
|
|
69
|
+
border: 2px solid #007bff;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.pru-btn-outline-primary:hover:not(:disabled) {
|
|
73
|
+
color: #fff;
|
|
74
|
+
background-color: #007bff;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.pru-btn-outline-secondary {
|
|
78
|
+
color: #6c757d;
|
|
79
|
+
background-color: #0000;
|
|
80
|
+
border: 2px solid #6c757d;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.pru-btn-outline-secondary:hover:not(:disabled) {
|
|
84
|
+
color: #fff;
|
|
85
|
+
background-color: #6c757d;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.pru-btn-outline-danger {
|
|
89
|
+
color: #dc3545;
|
|
90
|
+
background-color: #0000;
|
|
91
|
+
border: 2px solid #dc3545;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.pru-btn-outline-danger:hover:not(:disabled) {
|
|
95
|
+
color: #fff;
|
|
96
|
+
background-color: #dc3545;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.pru-btn-ghost-primary {
|
|
100
|
+
color: #007bff;
|
|
101
|
+
background-color: #0000;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.pru-btn-ghost-primary:hover:not(:disabled) {
|
|
105
|
+
background-color: #007bff1a;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.pru-btn-ghost-secondary {
|
|
109
|
+
color: #6c757d;
|
|
110
|
+
background-color: #0000;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.pru-btn-ghost-secondary:hover:not(:disabled) {
|
|
114
|
+
background-color: #6c757d1a;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.pru-btn-ghost-danger {
|
|
118
|
+
color: #dc3545;
|
|
119
|
+
background-color: #0000;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.pru-btn-ghost-danger:hover:not(:disabled) {
|
|
123
|
+
background-color: #dc35451a;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.pru-btn-spinner {
|
|
127
|
+
border: 2px solid #0000;
|
|
128
|
+
border-top-color: currentColor;
|
|
129
|
+
border-radius: 50%;
|
|
130
|
+
width: 16px;
|
|
131
|
+
height: 16px;
|
|
132
|
+
animation: .8s linear infinite pru-spin;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
@keyframes pru-spin {
|
|
136
|
+
to {
|
|
137
|
+
transform: rotate(360deg);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.pru-btn-icon-left, .pru-btn-icon-right {
|
|
142
|
+
align-items: center;
|
|
143
|
+
display: flex;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.pru-btn-content {
|
|
147
|
+
opacity: 1;
|
|
148
|
+
transition: opacity .2s;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.pru-btn[aria-disabled="true"] .pru-btn-content {
|
|
152
|
+
opacity: .8;
|
|
153
|
+
}
|
|
42
154
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAA
|
|
1
|
+
{"mappings":"AAAA;;;;;;;;;;;;;;AAcA;;;;;AAMA;;;;;AAKA;;;;;AAKA;;;;;AAMA;;;;AAKA;;;;;AAIA;;;;AAIA;;;;;AAIA;;;;AAIA;;;;;AAIA;;;;AAKA;;;;;;AAKA;;;;;AAKA;;;;;;AAKA;;;;;AAKA;;;;;;AAKA;;;;;AAMA;;;;;AAIA;;;;AAIA;;;;;AAIA;;;;AAIA;;;;;AAIA;;;;AAKA;;;;;;;;;AASA;;;;;;AAKA;;;;;AAMA;;;;;AAKA","sources":["components/Button/Button.css"],"sourcesContent":[".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: 6px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n position: relative;\r\n text-decoration: none;\r\n}\r\n\r\n.pru-btn:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Sizes */\r\n.pru-btn-small {\r\n padding: 6px 12px;\r\n font-size: 14px;\r\n}\r\n\r\n.pru-btn-medium {\r\n padding: 10px 20px;\r\n font-size: 16px;\r\n}\r\n\r\n.pru-btn-large {\r\n padding: 14px 28px;\r\n font-size: 18px;\r\n}\r\n\r\n/* Full width */\r\n.pru-btn-full {\r\n width: 100%;\r\n}\r\n\r\n/* Solid Variants */\r\n.pru-btn-primary {\r\n background-color: #007bff;\r\n color: white;\r\n}\r\n.pru-btn-primary:hover:not(:disabled) {\r\n background-color: #0056b3;\r\n}\r\n\r\n.pru-btn-secondary {\r\n background-color: #6c757d;\r\n color: white;\r\n}\r\n.pru-btn-secondary:hover:not(:disabled) {\r\n background-color: #545b62;\r\n}\r\n\r\n.pru-btn-danger {\r\n background-color: #dc3545;\r\n color: white;\r\n}\r\n.pru-btn-danger:hover:not(:disabled) {\r\n background-color: #c82333;\r\n}\r\n\r\n/* Outline Variants */\r\n.pru-btn-outline-primary {\r\n background-color: transparent;\r\n border: 2px solid #007bff;\r\n color: #007bff;\r\n}\r\n.pru-btn-outline-primary:hover:not(:disabled) {\r\n background-color: #007bff;\r\n color: white;\r\n}\r\n\r\n.pru-btn-outline-secondary {\r\n background-color: transparent;\r\n border: 2px solid #6c757d;\r\n color: #6c757d;\r\n}\r\n.pru-btn-outline-secondary:hover:not(:disabled) {\r\n background-color: #6c757d;\r\n color: white;\r\n}\r\n\r\n.pru-btn-outline-danger {\r\n background-color: transparent;\r\n border: 2px solid #dc3545;\r\n color: #dc3545;\r\n}\r\n.pru-btn-outline-danger:hover:not(:disabled) {\r\n background-color: #dc3545;\r\n color: white;\r\n}\r\n\r\n/* Ghost Variants */\r\n.pru-btn-ghost-primary {\r\n background-color: transparent;\r\n color: #007bff;\r\n}\r\n.pru-btn-ghost-primary:hover:not(:disabled) {\r\n background-color: rgba(0, 123, 255, 0.1);\r\n}\r\n\r\n.pru-btn-ghost-secondary {\r\n background-color: transparent;\r\n color: #6c757d;\r\n}\r\n.pru-btn-ghost-secondary:hover:not(:disabled) {\r\n background-color: rgba(108, 117, 125, 0.1);\r\n}\r\n\r\n.pru-btn-ghost-danger {\r\n background-color: transparent;\r\n color: #dc3545;\r\n}\r\n.pru-btn-ghost-danger:hover:not(:disabled) {\r\n background-color: rgba(220, 53, 69, 0.1);\r\n}\r\n\r\n/* Loading Spinner */\r\n.pru-btn-spinner {\r\n width: 16px;\r\n height: 16px;\r\n border: 2px solid transparent;\r\n border-top-color: currentColor;\r\n border-radius: 50%;\r\n animation: pru-spin 0.8s linear infinite;\r\n}\r\n\r\n@keyframes pru-spin {\r\n to { transform: rotate(360deg); }\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.8;\r\n}"],"names":[],"version":3,"file":"index.css.map"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
export interface ButtonProps {
|
|
2
|
+
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
3
3
|
children: React.ReactNode;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
variant?: 'primary' | 'secondary' | 'danger' | 'outline-primary' | 'outline-secondary' | 'outline-danger' | 'ghost-primary' | 'ghost-secondary' | 'ghost-danger';
|
|
5
|
+
size?: 'small' | 'medium' | 'large';
|
|
6
|
+
loading?: boolean;
|
|
7
|
+
iconLeft?: React.ReactNode;
|
|
8
|
+
iconRight?: React.ReactNode;
|
|
9
|
+
fullWidth?: boolean;
|
|
8
10
|
}
|
|
9
11
|
export const Button: React.FC<ButtonProps>;
|
|
10
12
|
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";AAGA;
|
|
1
|
+
{"mappings":";AAGA,4BAA6B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF,QAAQ,EAAE,MAAM,SAAS,CAAC;IAC1B,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,QAAQ,GACR,iBAAiB,GACjB,mBAAmB,GACnB,gBAAgB,GAChB,eAAe,GACf,iBAAiB,GACjB,cAAc,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,OAAO,MAAM,QAAQ,MAAM,EAAE,CAAC,WAAW,CA2BxC,CAAC","sources":["components/Button/Button.tsx","components/Button/index.ts","components/index.ts","index.ts"],"sourcesContent":["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 | 'danger'\r\n | 'outline-primary'\r\n | 'outline-secondary'\r\n | 'outline-danger'\r\n | 'ghost-primary'\r\n | 'ghost-secondary'\r\n | 'ghost-danger';\r\n size?: 'small' | 'medium' | 'large';\r\n loading?: boolean;\r\n iconLeft?: React.ReactNode;\r\n iconRight?: React.ReactNode;\r\n fullWidth?: 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 className = '',\r\n ...rest\r\n}) => {\r\n const isDisabled = disabled || loading;\r\n\r\n return (\r\n <button\r\n className={`pru-btn pru-btn-${variant} pru-btn-${size} ${fullWidth ? 'pru-btn-full' : ''} ${className}`}\r\n disabled={isDisabled}\r\n aria-disabled={isDisabled}\r\n {...rest}\r\n >\r\n {loading && <span className=\"pru-btn-spinner\" aria-hidden=\"true\" />}\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};","export { Button } from './Button';\r\nexport type { ButtonProps } from './Button';","export * from './Button';","export * from './components';"],"names":[],"version":3,"file":"index.d.ts.map"}
|
package/dist/index.esm.css
CHANGED
|
@@ -2,10 +2,14 @@
|
|
|
2
2
|
cursor: pointer;
|
|
3
3
|
border: none;
|
|
4
4
|
border-radius: 6px;
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
justify-content: center;
|
|
6
|
+
align-items: center;
|
|
7
|
+
gap: 8px;
|
|
7
8
|
font-weight: 500;
|
|
8
|
-
|
|
9
|
+
text-decoration: none;
|
|
10
|
+
transition: all .2s;
|
|
11
|
+
display: inline-flex;
|
|
12
|
+
position: relative;
|
|
9
13
|
}
|
|
10
14
|
|
|
11
15
|
.pru-btn:disabled {
|
|
@@ -13,6 +17,25 @@
|
|
|
13
17
|
cursor: not-allowed;
|
|
14
18
|
}
|
|
15
19
|
|
|
20
|
+
.pru-btn-small {
|
|
21
|
+
padding: 6px 12px;
|
|
22
|
+
font-size: 14px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.pru-btn-medium {
|
|
26
|
+
padding: 10px 20px;
|
|
27
|
+
font-size: 16px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.pru-btn-large {
|
|
31
|
+
padding: 14px 28px;
|
|
32
|
+
font-size: 18px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.pru-btn-full {
|
|
36
|
+
width: 100%;
|
|
37
|
+
}
|
|
38
|
+
|
|
16
39
|
.pru-btn-primary {
|
|
17
40
|
color: #fff;
|
|
18
41
|
background-color: #007bff;
|
|
@@ -39,4 +62,93 @@
|
|
|
39
62
|
.pru-btn-danger:hover:not(:disabled) {
|
|
40
63
|
background-color: #c82333;
|
|
41
64
|
}
|
|
65
|
+
|
|
66
|
+
.pru-btn-outline-primary {
|
|
67
|
+
color: #007bff;
|
|
68
|
+
background-color: #0000;
|
|
69
|
+
border: 2px solid #007bff;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.pru-btn-outline-primary:hover:not(:disabled) {
|
|
73
|
+
color: #fff;
|
|
74
|
+
background-color: #007bff;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.pru-btn-outline-secondary {
|
|
78
|
+
color: #6c757d;
|
|
79
|
+
background-color: #0000;
|
|
80
|
+
border: 2px solid #6c757d;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.pru-btn-outline-secondary:hover:not(:disabled) {
|
|
84
|
+
color: #fff;
|
|
85
|
+
background-color: #6c757d;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.pru-btn-outline-danger {
|
|
89
|
+
color: #dc3545;
|
|
90
|
+
background-color: #0000;
|
|
91
|
+
border: 2px solid #dc3545;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.pru-btn-outline-danger:hover:not(:disabled) {
|
|
95
|
+
color: #fff;
|
|
96
|
+
background-color: #dc3545;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.pru-btn-ghost-primary {
|
|
100
|
+
color: #007bff;
|
|
101
|
+
background-color: #0000;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.pru-btn-ghost-primary:hover:not(:disabled) {
|
|
105
|
+
background-color: #007bff1a;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.pru-btn-ghost-secondary {
|
|
109
|
+
color: #6c757d;
|
|
110
|
+
background-color: #0000;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.pru-btn-ghost-secondary:hover:not(:disabled) {
|
|
114
|
+
background-color: #6c757d1a;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.pru-btn-ghost-danger {
|
|
118
|
+
color: #dc3545;
|
|
119
|
+
background-color: #0000;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.pru-btn-ghost-danger:hover:not(:disabled) {
|
|
123
|
+
background-color: #dc35451a;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.pru-btn-spinner {
|
|
127
|
+
border: 2px solid #0000;
|
|
128
|
+
border-top-color: currentColor;
|
|
129
|
+
border-radius: 50%;
|
|
130
|
+
width: 16px;
|
|
131
|
+
height: 16px;
|
|
132
|
+
animation: .8s linear infinite pru-spin;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
@keyframes pru-spin {
|
|
136
|
+
to {
|
|
137
|
+
transform: rotate(360deg);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.pru-btn-icon-left, .pru-btn-icon-right {
|
|
142
|
+
align-items: center;
|
|
143
|
+
display: flex;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.pru-btn-content {
|
|
147
|
+
opacity: 1;
|
|
148
|
+
transition: opacity .2s;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.pru-btn[aria-disabled="true"] .pru-btn-content {
|
|
152
|
+
opacity: .8;
|
|
153
|
+
}
|
|
42
154
|
/*# sourceMappingURL=index.esm.css.map */
|
package/dist/index.esm.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAA
|
|
1
|
+
{"mappings":"AAAA;;;;;;;;;;;;;;AAcA;;;;;AAMA;;;;;AAKA;;;;;AAKA;;;;;AAMA;;;;AAKA;;;;;AAIA;;;;AAIA;;;;;AAIA;;;;AAIA;;;;;AAIA;;;;AAKA;;;;;;AAKA;;;;;AAKA;;;;;;AAKA;;;;;AAKA;;;;;;AAKA;;;;;AAMA;;;;;AAIA;;;;AAIA;;;;;AAIA;;;;AAIA;;;;;AAIA;;;;AAKA;;;;;;;;;AASA;;;;;;AAKA;;;;;AAMA;;;;;AAKA","sources":["components/Button/Button.css"],"sourcesContent":[".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: 6px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n position: relative;\r\n text-decoration: none;\r\n}\r\n\r\n.pru-btn:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Sizes */\r\n.pru-btn-small {\r\n padding: 6px 12px;\r\n font-size: 14px;\r\n}\r\n\r\n.pru-btn-medium {\r\n padding: 10px 20px;\r\n font-size: 16px;\r\n}\r\n\r\n.pru-btn-large {\r\n padding: 14px 28px;\r\n font-size: 18px;\r\n}\r\n\r\n/* Full width */\r\n.pru-btn-full {\r\n width: 100%;\r\n}\r\n\r\n/* Solid Variants */\r\n.pru-btn-primary {\r\n background-color: #007bff;\r\n color: white;\r\n}\r\n.pru-btn-primary:hover:not(:disabled) {\r\n background-color: #0056b3;\r\n}\r\n\r\n.pru-btn-secondary {\r\n background-color: #6c757d;\r\n color: white;\r\n}\r\n.pru-btn-secondary:hover:not(:disabled) {\r\n background-color: #545b62;\r\n}\r\n\r\n.pru-btn-danger {\r\n background-color: #dc3545;\r\n color: white;\r\n}\r\n.pru-btn-danger:hover:not(:disabled) {\r\n background-color: #c82333;\r\n}\r\n\r\n/* Outline Variants */\r\n.pru-btn-outline-primary {\r\n background-color: transparent;\r\n border: 2px solid #007bff;\r\n color: #007bff;\r\n}\r\n.pru-btn-outline-primary:hover:not(:disabled) {\r\n background-color: #007bff;\r\n color: white;\r\n}\r\n\r\n.pru-btn-outline-secondary {\r\n background-color: transparent;\r\n border: 2px solid #6c757d;\r\n color: #6c757d;\r\n}\r\n.pru-btn-outline-secondary:hover:not(:disabled) {\r\n background-color: #6c757d;\r\n color: white;\r\n}\r\n\r\n.pru-btn-outline-danger {\r\n background-color: transparent;\r\n border: 2px solid #dc3545;\r\n color: #dc3545;\r\n}\r\n.pru-btn-outline-danger:hover:not(:disabled) {\r\n background-color: #dc3545;\r\n color: white;\r\n}\r\n\r\n/* Ghost Variants */\r\n.pru-btn-ghost-primary {\r\n background-color: transparent;\r\n color: #007bff;\r\n}\r\n.pru-btn-ghost-primary:hover:not(:disabled) {\r\n background-color: rgba(0, 123, 255, 0.1);\r\n}\r\n\r\n.pru-btn-ghost-secondary {\r\n background-color: transparent;\r\n color: #6c757d;\r\n}\r\n.pru-btn-ghost-secondary:hover:not(:disabled) {\r\n background-color: rgba(108, 117, 125, 0.1);\r\n}\r\n\r\n.pru-btn-ghost-danger {\r\n background-color: transparent;\r\n color: #dc3545;\r\n}\r\n.pru-btn-ghost-danger:hover:not(:disabled) {\r\n background-color: rgba(220, 53, 69, 0.1);\r\n}\r\n\r\n/* Loading Spinner */\r\n.pru-btn-spinner {\r\n width: 16px;\r\n height: 16px;\r\n border: 2px solid transparent;\r\n border-top-color: currentColor;\r\n border-radius: 50%;\r\n animation: pru-spin 0.8s linear infinite;\r\n}\r\n\r\n@keyframes pru-spin {\r\n to { transform: rotate(360deg); }\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.8;\r\n}"],"names":[],"version":3,"file":"index.esm.css.map"}
|
package/dist/index.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "./index.esm.css";
|
|
2
|
-
import {jsx as $hCgyA$jsx} from "react/jsx-runtime";
|
|
2
|
+
import {jsxs as $hCgyA$jsxs, jsx as $hCgyA$jsx} from "react/jsx-runtime";
|
|
3
3
|
import "react";
|
|
4
4
|
|
|
5
5
|
|
|
@@ -30,13 +30,31 @@ $parcel$export($718c29e90f2592b1$exports, "Button", () => $3b676a50c78284a9$expo
|
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
|
33
|
-
const $3b676a50c78284a9$export$353f5b6fc5456de1 = ({ children: children,
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
disabled:
|
|
38
|
-
|
|
39
|
-
|
|
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, className: className = '', ...rest })=>{
|
|
34
|
+
const isDisabled = disabled || loading;
|
|
35
|
+
return /*#__PURE__*/ (0, $hCgyA$jsxs)("button", {
|
|
36
|
+
className: `pru-btn pru-btn-${variant} pru-btn-${size} ${fullWidth ? 'pru-btn-full' : ''} ${className}`,
|
|
37
|
+
disabled: isDisabled,
|
|
38
|
+
"aria-disabled": isDisabled,
|
|
39
|
+
...rest,
|
|
40
|
+
children: [
|
|
41
|
+
loading && /*#__PURE__*/ (0, $hCgyA$jsx)("span", {
|
|
42
|
+
className: "pru-btn-spinner",
|
|
43
|
+
"aria-hidden": "true"
|
|
44
|
+
}),
|
|
45
|
+
iconLeft && !loading && /*#__PURE__*/ (0, $hCgyA$jsx)("span", {
|
|
46
|
+
className: "pru-btn-icon-left",
|
|
47
|
+
children: iconLeft
|
|
48
|
+
}),
|
|
49
|
+
/*#__PURE__*/ (0, $hCgyA$jsx)("span", {
|
|
50
|
+
className: "pru-btn-content",
|
|
51
|
+
children: children
|
|
52
|
+
}),
|
|
53
|
+
iconRight && !loading && /*#__PURE__*/ (0, $hCgyA$jsx)("span", {
|
|
54
|
+
className: "pru-btn-icon-right",
|
|
55
|
+
children: iconRight
|
|
56
|
+
})
|
|
57
|
+
]
|
|
40
58
|
});
|
|
41
59
|
};
|
|
42
60
|
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AGsBO,MAAM,4CAAgC,CAAC,YAC5C,QAAQ,WACR,UAAU,iBACV,OAAO,mBACP,UAAU,iBACV,QAAQ,aACR,SAAS,aACT,YAAY,iBACZ,WAAW,kBACX,YAAY,IACZ,GAAG,MACJ;IACC,MAAM,aAAa,YAAY;IAE/B,qBACE,iBAAC;QACC,WAAW,CAAC,gBAAgB,EAAE,QAAQ,SAAS,EAAE,KAAK,CAAC,EAAE,YAAY,iBAAiB,GAAG,CAAC,EAAE,WAAW;QACvG,UAAU;QACV,iBAAe;QACd,GAAG,IAAI;;YAEP,yBAAW,gBAAC;gBAAK,WAAU;gBAAkB,eAAY;;YACzD,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 | 'danger'\r\n | 'outline-primary'\r\n | 'outline-secondary'\r\n | 'outline-danger'\r\n | 'ghost-primary'\r\n | 'ghost-secondary'\r\n | 'ghost-danger';\r\n size?: 'small' | 'medium' | 'large';\r\n loading?: boolean;\r\n iconLeft?: React.ReactNode;\r\n iconRight?: React.ReactNode;\r\n fullWidth?: 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 className = '',\r\n ...rest\r\n}) => {\r\n const isDisabled = disabled || loading;\r\n\r\n return (\r\n <button\r\n className={`pru-btn pru-btn-${variant} pru-btn-${size} ${fullWidth ? 'pru-btn-full' : ''} ${className}`}\r\n disabled={isDisabled}\r\n aria-disabled={isDisabled}\r\n {...rest}\r\n >\r\n {loading && <span className=\"pru-btn-spinner\" aria-hidden=\"true\" />}\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
CHANGED
|
@@ -30,13 +30,31 @@ $parcel$export($792310cfcca9bf5b$exports, "Button", () => $af8861f1a735d489$expo
|
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
|
33
|
-
const $af8861f1a735d489$export$353f5b6fc5456de1 = ({ children: children,
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
disabled:
|
|
38
|
-
|
|
39
|
-
|
|
33
|
+
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, className: className = '', ...rest })=>{
|
|
34
|
+
const isDisabled = disabled || loading;
|
|
35
|
+
return /*#__PURE__*/ (0, $g5Y9E$reactjsxruntime.jsxs)("button", {
|
|
36
|
+
className: `pru-btn pru-btn-${variant} pru-btn-${size} ${fullWidth ? 'pru-btn-full' : ''} ${className}`,
|
|
37
|
+
disabled: isDisabled,
|
|
38
|
+
"aria-disabled": isDisabled,
|
|
39
|
+
...rest,
|
|
40
|
+
children: [
|
|
41
|
+
loading && /*#__PURE__*/ (0, $g5Y9E$reactjsxruntime.jsx)("span", {
|
|
42
|
+
className: "pru-btn-spinner",
|
|
43
|
+
"aria-hidden": "true"
|
|
44
|
+
}),
|
|
45
|
+
iconLeft && !loading && /*#__PURE__*/ (0, $g5Y9E$reactjsxruntime.jsx)("span", {
|
|
46
|
+
className: "pru-btn-icon-left",
|
|
47
|
+
children: iconLeft
|
|
48
|
+
}),
|
|
49
|
+
/*#__PURE__*/ (0, $g5Y9E$reactjsxruntime.jsx)("span", {
|
|
50
|
+
className: "pru-btn-content",
|
|
51
|
+
children: children
|
|
52
|
+
}),
|
|
53
|
+
iconRight && !loading && /*#__PURE__*/ (0, $g5Y9E$reactjsxruntime.jsx)("span", {
|
|
54
|
+
className: "pru-btn-icon-right",
|
|
55
|
+
children: iconRight
|
|
56
|
+
})
|
|
57
|
+
]
|
|
40
58
|
});
|
|
41
59
|
};
|
|
42
60
|
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AGsBO,MAAM,4CAAgC,CAAC,YAC5C,QAAQ,WACR,UAAU,iBACV,OAAO,mBACP,UAAU,iBACV,QAAQ,aACR,SAAS,aACT,YAAY,iBACZ,WAAW,kBACX,YAAY,IACZ,GAAG,MACJ;IACC,MAAM,aAAa,YAAY;IAE/B,qBACE,iCAAC;QACC,WAAW,CAAC,gBAAgB,EAAE,QAAQ,SAAS,EAAE,KAAK,CAAC,EAAE,YAAY,iBAAiB,GAAG,CAAC,EAAE,WAAW;QACvG,UAAU;QACV,iBAAe;QACd,GAAG,IAAI;;YAEP,yBAAW,gCAAC;gBAAK,WAAU;gBAAkB,eAAY;;YACzD,YAAY,CAAC,yBAAW,gCAAC;gBAAK,WAAU;0BAAqB;;0BAC9D,gCAAC;gBAAK,WAAU;0BAAmB;;YAClC,aAAa,CAAC,yBAAW,gCAAC;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 | 'danger'\r\n | 'outline-primary'\r\n | 'outline-secondary'\r\n | 'outline-danger'\r\n | 'ghost-primary'\r\n | 'ghost-secondary'\r\n | 'ghost-danger';\r\n size?: 'small' | 'medium' | 'large';\r\n loading?: boolean;\r\n iconLeft?: React.ReactNode;\r\n iconRight?: React.ReactNode;\r\n fullWidth?: 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 className = '',\r\n ...rest\r\n}) => {\r\n const isDisabled = disabled || loading;\r\n\r\n return (\r\n <button\r\n className={`pru-btn pru-btn-${variant} pru-btn-${size} ${fullWidth ? 'pru-btn-full' : ''} ${className}`}\r\n disabled={isDisabled}\r\n aria-disabled={isDisabled}\r\n {...rest}\r\n >\r\n {loading && <span className=\"pru-btn-spinner\" aria-hidden=\"true\" />}\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.js.map"}
|