ehscan-react-components 0.1.7 → 0.1.8
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/Button.d.ts +1 -0
- package/dist/Button.js +1 -0
- package/dist/Components.d.ts +0 -1
- package/dist/Components.js +0 -1
- package/dist/style/button.css +50 -66
- package/dist/style/style/button.css +50 -66
- package/package.json +1 -1
package/dist/Button.d.ts
CHANGED
package/dist/Button.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useRef, useCallback } from "react";
|
|
3
3
|
import useRipple from "./tools/useRipple";
|
|
4
|
+
import './style/button.css';
|
|
4
5
|
export const Button = ({ index, text, selected, addClass, notimeout, size = 'md', click, children }) => {
|
|
5
6
|
const buttonRef = useRef(null);
|
|
6
7
|
const handleRipple = useRipple();
|
package/dist/Components.d.ts
CHANGED
package/dist/Components.js
CHANGED
package/dist/style/button.css
CHANGED
|
@@ -1,23 +1,19 @@
|
|
|
1
1
|
/* EHSCAN Base Button */
|
|
2
|
-
|
|
3
|
-
button {
|
|
4
|
-
/* Button default variables */
|
|
5
|
-
--btn-bg: #007aff;
|
|
6
|
-
--btn-color: #fff;
|
|
7
|
-
--btn-radius: 18px;
|
|
8
|
-
--btn-padding-y: 0.5rem;
|
|
9
|
-
--btn-padding-x: 1rem;
|
|
10
|
-
--btn-width: fit-content;
|
|
11
|
-
--btn-height: auto;
|
|
12
|
-
--btn-font-size: 1rem;
|
|
13
|
-
--btn-font-weight: 500;
|
|
14
|
-
--btn-transition: all 0.2s ease;
|
|
15
|
-
--btn-line-height: 1.5;
|
|
16
|
-
--ripple-box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
|
|
17
|
-
--ripple-effect-bck: rgb(0 0 0 / 15%);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
2
|
.ext-btn {
|
|
3
|
+
/* Button default variables */
|
|
4
|
+
--btn-bg: #007aff;
|
|
5
|
+
--btn-color: #fff;
|
|
6
|
+
--btn-radius: 18px;
|
|
7
|
+
--btn-padding-y: 0.5rem;
|
|
8
|
+
--btn-padding-x: 1rem;
|
|
9
|
+
--btn-width: fit-content;
|
|
10
|
+
--btn-height: auto;
|
|
11
|
+
--btn-font-size: 1rem;
|
|
12
|
+
--btn-font-weight: 500;
|
|
13
|
+
--btn-transition: all 0.2s ease;
|
|
14
|
+
--btn-line-height: 1.5;
|
|
15
|
+
--ripple-box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
|
|
16
|
+
--ripple-effect-bck: rgb(0 0 0 / 15%);
|
|
21
17
|
display: inline-flex;
|
|
22
18
|
align-items: center;
|
|
23
19
|
justify-content: center;
|
|
@@ -39,47 +35,25 @@ button {
|
|
|
39
35
|
user-select: none;
|
|
40
36
|
}
|
|
41
37
|
|
|
42
|
-
._ripple {
|
|
43
|
-
line-height: var(--btn-line-height);
|
|
44
|
-
font-weight: var(--btn-font-weight);
|
|
45
|
-
box-shadow: var(--ripple-box-shadow);
|
|
46
|
-
position: relative;
|
|
47
|
-
overflow: hidden;
|
|
48
|
-
-webkit-user-select: none;
|
|
49
|
-
user-select: none;
|
|
50
|
-
display: flex;
|
|
51
|
-
align-items: center;
|
|
52
|
-
justify-content: center;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
/* 🧭 Focus */
|
|
56
38
|
.ext-btn:focus-visible {
|
|
57
39
|
outline: 2px solid #007aff;
|
|
58
40
|
outline-offset: 2px;
|
|
59
41
|
}
|
|
60
42
|
|
|
61
|
-
/* 🚫 Disabled */
|
|
62
43
|
.ext-btn:disabled,
|
|
63
44
|
.ext-btn[aria-disabled="true"] {
|
|
64
45
|
opacity: 0.6;
|
|
65
46
|
cursor: not-allowed;
|
|
66
47
|
}
|
|
67
48
|
|
|
68
|
-
/* Hover — slightly darker */
|
|
69
49
|
.ext-btn:hover:not(:disabled):not([aria-disabled="true"]) {
|
|
70
|
-
filter: brightness(0.9);
|
|
50
|
+
filter: brightness(0.9);
|
|
71
51
|
}
|
|
72
52
|
|
|
73
|
-
/* 🖱️ Hover + Active */
|
|
74
|
-
/* .ext-btn:hover:not(:disabled):not([aria-disabled="true"]) {
|
|
75
|
-
filter: brightness(1.1);
|
|
76
|
-
} */
|
|
77
|
-
|
|
78
53
|
.ext-btn:active:not(:disabled):not([aria-disabled="true"]) {
|
|
79
54
|
transform: scale(0.97);
|
|
80
55
|
}
|
|
81
56
|
|
|
82
|
-
/* 🧩 Sizes */
|
|
83
57
|
.ext-btn--sm {
|
|
84
58
|
--btn-padding-y: 0.25rem;
|
|
85
59
|
--btn-padding-x: 0.75rem;
|
|
@@ -98,7 +72,6 @@ button {
|
|
|
98
72
|
--btn-font-size: 1.1rem;
|
|
99
73
|
}
|
|
100
74
|
|
|
101
|
-
/* 🎨 Variants */
|
|
102
75
|
.ext-btn--primary {
|
|
103
76
|
--btn-bg: #007aff;
|
|
104
77
|
--btn-color: #fff;
|
|
@@ -124,13 +97,11 @@ button {
|
|
|
124
97
|
--btn-color: #fff;
|
|
125
98
|
}
|
|
126
99
|
|
|
127
|
-
/* 🌀 Loading (optional if using spinner) */
|
|
128
100
|
.ext-btn--loading {
|
|
129
101
|
pointer-events: none;
|
|
130
102
|
opacity: 0.8;
|
|
131
103
|
}
|
|
132
104
|
|
|
133
|
-
/* 📦 Content Layout */
|
|
134
105
|
.ext-btn-icon {
|
|
135
106
|
display: flex;
|
|
136
107
|
align-items: center;
|
|
@@ -143,7 +114,41 @@ button {
|
|
|
143
114
|
white-space: nowrap;
|
|
144
115
|
}
|
|
145
116
|
|
|
146
|
-
/*
|
|
117
|
+
/* Button Types */
|
|
118
|
+
.closeBtn {
|
|
119
|
+
--btn-width: 35px;
|
|
120
|
+
--btn-height: 35px;
|
|
121
|
+
padding: 0;
|
|
122
|
+
--btn-bg: lightgray;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.saveBtn {
|
|
126
|
+
--btn-height: 35px;
|
|
127
|
+
--btn-padding-x: 30px;
|
|
128
|
+
--btn-bg: #007aff;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.trashBtn {
|
|
132
|
+
--btn-height: 35px;
|
|
133
|
+
--btn-padding-x: 10px;
|
|
134
|
+
--btn-radius: 4px;
|
|
135
|
+
--btn-bg: lightgray;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* Ripple Effect */
|
|
139
|
+
._ripple {
|
|
140
|
+
line-height: var(--btn-line-height);
|
|
141
|
+
font-weight: var(--btn-font-weight);
|
|
142
|
+
box-shadow: var(--ripple-box-shadow);
|
|
143
|
+
position: relative;
|
|
144
|
+
overflow: hidden;
|
|
145
|
+
-webkit-user-select: none;
|
|
146
|
+
user-select: none;
|
|
147
|
+
display: flex;
|
|
148
|
+
align-items: center;
|
|
149
|
+
justify-content: center;
|
|
150
|
+
}
|
|
151
|
+
|
|
147
152
|
.ripple {
|
|
148
153
|
background: var(--ripple-effect-bck);
|
|
149
154
|
position: absolute;
|
|
@@ -155,7 +160,6 @@ button {
|
|
|
155
160
|
will-change: transform, opacity;
|
|
156
161
|
}
|
|
157
162
|
|
|
158
|
-
/* Only devices that can hover (desktop/laptop) */
|
|
159
163
|
@media (hover: hover) and (pointer: fine) {
|
|
160
164
|
._ripple {
|
|
161
165
|
cursor: pointer;
|
|
@@ -227,24 +231,4 @@ button {
|
|
|
227
231
|
opacity: .2;
|
|
228
232
|
transform: translate(-50%, -50%);
|
|
229
233
|
}
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
.closeBtn{
|
|
233
|
-
--btn-width: 35px;
|
|
234
|
-
--btn-height: 35px;
|
|
235
|
-
padding: 0;
|
|
236
|
-
--btn-bg: lightgray;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
.saveBtn{
|
|
240
|
-
--btn-height: 35px;
|
|
241
|
-
--btn-padding-x: 30px;
|
|
242
|
-
--btn-bg: #007aff;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
.trashBtn{
|
|
246
|
-
--btn-height: 35px;
|
|
247
|
-
--btn-padding-x: 10px;
|
|
248
|
-
--btn-radius: 4px;
|
|
249
|
-
--btn-bg: lightgray;
|
|
250
234
|
}
|
|
@@ -1,23 +1,19 @@
|
|
|
1
1
|
/* EHSCAN Base Button */
|
|
2
|
-
|
|
3
|
-
button {
|
|
4
|
-
/* Button default variables */
|
|
5
|
-
--btn-bg: #007aff;
|
|
6
|
-
--btn-color: #fff;
|
|
7
|
-
--btn-radius: 18px;
|
|
8
|
-
--btn-padding-y: 0.5rem;
|
|
9
|
-
--btn-padding-x: 1rem;
|
|
10
|
-
--btn-width: fit-content;
|
|
11
|
-
--btn-height: auto;
|
|
12
|
-
--btn-font-size: 1rem;
|
|
13
|
-
--btn-font-weight: 500;
|
|
14
|
-
--btn-transition: all 0.2s ease;
|
|
15
|
-
--btn-line-height: 1.5;
|
|
16
|
-
--ripple-box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
|
|
17
|
-
--ripple-effect-bck: rgb(0 0 0 / 15%);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
2
|
.ext-btn {
|
|
3
|
+
/* Button default variables */
|
|
4
|
+
--btn-bg: #007aff;
|
|
5
|
+
--btn-color: #fff;
|
|
6
|
+
--btn-radius: 18px;
|
|
7
|
+
--btn-padding-y: 0.5rem;
|
|
8
|
+
--btn-padding-x: 1rem;
|
|
9
|
+
--btn-width: fit-content;
|
|
10
|
+
--btn-height: auto;
|
|
11
|
+
--btn-font-size: 1rem;
|
|
12
|
+
--btn-font-weight: 500;
|
|
13
|
+
--btn-transition: all 0.2s ease;
|
|
14
|
+
--btn-line-height: 1.5;
|
|
15
|
+
--ripple-box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
|
|
16
|
+
--ripple-effect-bck: rgb(0 0 0 / 15%);
|
|
21
17
|
display: inline-flex;
|
|
22
18
|
align-items: center;
|
|
23
19
|
justify-content: center;
|
|
@@ -39,47 +35,25 @@ button {
|
|
|
39
35
|
user-select: none;
|
|
40
36
|
}
|
|
41
37
|
|
|
42
|
-
._ripple {
|
|
43
|
-
line-height: var(--btn-line-height);
|
|
44
|
-
font-weight: var(--btn-font-weight);
|
|
45
|
-
box-shadow: var(--ripple-box-shadow);
|
|
46
|
-
position: relative;
|
|
47
|
-
overflow: hidden;
|
|
48
|
-
-webkit-user-select: none;
|
|
49
|
-
user-select: none;
|
|
50
|
-
display: flex;
|
|
51
|
-
align-items: center;
|
|
52
|
-
justify-content: center;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
/* 🧭 Focus */
|
|
56
38
|
.ext-btn:focus-visible {
|
|
57
39
|
outline: 2px solid #007aff;
|
|
58
40
|
outline-offset: 2px;
|
|
59
41
|
}
|
|
60
42
|
|
|
61
|
-
/* 🚫 Disabled */
|
|
62
43
|
.ext-btn:disabled,
|
|
63
44
|
.ext-btn[aria-disabled="true"] {
|
|
64
45
|
opacity: 0.6;
|
|
65
46
|
cursor: not-allowed;
|
|
66
47
|
}
|
|
67
48
|
|
|
68
|
-
/* Hover — slightly darker */
|
|
69
49
|
.ext-btn:hover:not(:disabled):not([aria-disabled="true"]) {
|
|
70
|
-
filter: brightness(0.9);
|
|
50
|
+
filter: brightness(0.9);
|
|
71
51
|
}
|
|
72
52
|
|
|
73
|
-
/* 🖱️ Hover + Active */
|
|
74
|
-
/* .ext-btn:hover:not(:disabled):not([aria-disabled="true"]) {
|
|
75
|
-
filter: brightness(1.1);
|
|
76
|
-
} */
|
|
77
|
-
|
|
78
53
|
.ext-btn:active:not(:disabled):not([aria-disabled="true"]) {
|
|
79
54
|
transform: scale(0.97);
|
|
80
55
|
}
|
|
81
56
|
|
|
82
|
-
/* 🧩 Sizes */
|
|
83
57
|
.ext-btn--sm {
|
|
84
58
|
--btn-padding-y: 0.25rem;
|
|
85
59
|
--btn-padding-x: 0.75rem;
|
|
@@ -98,7 +72,6 @@ button {
|
|
|
98
72
|
--btn-font-size: 1.1rem;
|
|
99
73
|
}
|
|
100
74
|
|
|
101
|
-
/* 🎨 Variants */
|
|
102
75
|
.ext-btn--primary {
|
|
103
76
|
--btn-bg: #007aff;
|
|
104
77
|
--btn-color: #fff;
|
|
@@ -124,13 +97,11 @@ button {
|
|
|
124
97
|
--btn-color: #fff;
|
|
125
98
|
}
|
|
126
99
|
|
|
127
|
-
/* 🌀 Loading (optional if using spinner) */
|
|
128
100
|
.ext-btn--loading {
|
|
129
101
|
pointer-events: none;
|
|
130
102
|
opacity: 0.8;
|
|
131
103
|
}
|
|
132
104
|
|
|
133
|
-
/* 📦 Content Layout */
|
|
134
105
|
.ext-btn-icon {
|
|
135
106
|
display: flex;
|
|
136
107
|
align-items: center;
|
|
@@ -143,7 +114,41 @@ button {
|
|
|
143
114
|
white-space: nowrap;
|
|
144
115
|
}
|
|
145
116
|
|
|
146
|
-
/*
|
|
117
|
+
/* Button Types */
|
|
118
|
+
.closeBtn {
|
|
119
|
+
--btn-width: 35px;
|
|
120
|
+
--btn-height: 35px;
|
|
121
|
+
padding: 0;
|
|
122
|
+
--btn-bg: lightgray;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.saveBtn {
|
|
126
|
+
--btn-height: 35px;
|
|
127
|
+
--btn-padding-x: 30px;
|
|
128
|
+
--btn-bg: #007aff;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.trashBtn {
|
|
132
|
+
--btn-height: 35px;
|
|
133
|
+
--btn-padding-x: 10px;
|
|
134
|
+
--btn-radius: 4px;
|
|
135
|
+
--btn-bg: lightgray;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* Ripple Effect */
|
|
139
|
+
._ripple {
|
|
140
|
+
line-height: var(--btn-line-height);
|
|
141
|
+
font-weight: var(--btn-font-weight);
|
|
142
|
+
box-shadow: var(--ripple-box-shadow);
|
|
143
|
+
position: relative;
|
|
144
|
+
overflow: hidden;
|
|
145
|
+
-webkit-user-select: none;
|
|
146
|
+
user-select: none;
|
|
147
|
+
display: flex;
|
|
148
|
+
align-items: center;
|
|
149
|
+
justify-content: center;
|
|
150
|
+
}
|
|
151
|
+
|
|
147
152
|
.ripple {
|
|
148
153
|
background: var(--ripple-effect-bck);
|
|
149
154
|
position: absolute;
|
|
@@ -155,7 +160,6 @@ button {
|
|
|
155
160
|
will-change: transform, opacity;
|
|
156
161
|
}
|
|
157
162
|
|
|
158
|
-
/* Only devices that can hover (desktop/laptop) */
|
|
159
163
|
@media (hover: hover) and (pointer: fine) {
|
|
160
164
|
._ripple {
|
|
161
165
|
cursor: pointer;
|
|
@@ -227,24 +231,4 @@ button {
|
|
|
227
231
|
opacity: .2;
|
|
228
232
|
transform: translate(-50%, -50%);
|
|
229
233
|
}
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
.closeBtn{
|
|
233
|
-
--btn-width: 35px;
|
|
234
|
-
--btn-height: 35px;
|
|
235
|
-
padding: 0;
|
|
236
|
-
--btn-bg: lightgray;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
.saveBtn{
|
|
240
|
-
--btn-height: 35px;
|
|
241
|
-
--btn-padding-x: 30px;
|
|
242
|
-
--btn-bg: #007aff;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
.trashBtn{
|
|
246
|
-
--btn-height: 35px;
|
|
247
|
-
--btn-padding-x: 10px;
|
|
248
|
-
--btn-radius: 4px;
|
|
249
|
-
--btn-bg: lightgray;
|
|
250
234
|
}
|