ehscan-react-components 0.1.7 → 0.1.9

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 (8) hide show
  1. package/README.md +66 -0
  2. package/dist/Button.d.ts +1 -0
  3. package/dist/Button.js +2 -1
  4. package/dist/Components.d.ts +0 -1
  5. package/dist/Components.js +0 -1
  6. package/dist/style/button.css +50 -66
  7. package/dist/style/style/button.css +76 -107
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -1,5 +1,71 @@
1
1
  # ehscan-react-components
2
2
 
3
+ # Styling
4
+
5
+ ## Base Button Variables
6
+
7
+ | Variable | Default/Fallback |
8
+ | --------------------- | ----------------------------------------- |
9
+ | `--btn-bg` | `#007aff` |
10
+ | `--btn-color` | `#fff` |
11
+ | `--btn-radius` | `18px` |
12
+ | `--btn-padding-y` | `0.5rem` |
13
+ | `--btn-padding-x` | `1rem` |
14
+ | `--btn-width` | `fit-content` |
15
+ | `--btn-height` | `auto` |
16
+ | `--btn-font-size` | `1rem` |
17
+ | `--btn-font-weight` | `500` |
18
+ | `--btn-transition` | `all 0.2s ease` |
19
+ | `--btn-line-height` | `1.5` |
20
+ | `--ripple-box-shadow` | `rgb(100 100 111 / 20%) 0px 7px 29px 0px` |
21
+ | `--ripple-effect-bck` | `rgb(0 0 0 / 15%)` |
22
+
23
+
24
+ ### Size-specific overrides
25
+
26
+ | Variable | Size | Default/Fallback |
27
+ | -------------------- | ---- | ---------------- |
28
+ | `--btn-padding-y-sm` | sm | `0.25rem` |
29
+ | `--btn-padding-x-sm` | sm | `0.75rem` |
30
+ | `--btn-font-size-sm` | sm | `0.85rem` |
31
+ | `--btn-padding-y-md` | md | `0.5rem` |
32
+ | `--btn-padding-x-md` | md | `1rem` |
33
+ | `--btn-font-size-md` | md | `1rem` |
34
+ | `--btn-padding-y-lg` | lg | `0.75rem` |
35
+ | `--btn-padding-x-lg` | lg | `1.5rem` |
36
+ | `--btn-font-size-lg` | lg | `1.1rem` |
37
+
38
+ ### Variant-specific variables
39
+
40
+ | Variable | Variant | Default/Fallback |
41
+ | ----------------------- | --------- | ---------------- |
42
+ | `--btn-bg-primary` | primary | `#007aff` |
43
+ | `--btn-color-primary` | primary | `#fff` |
44
+ | `--btn-bg-secondary` | secondary | `#e5e5ea` |
45
+ | `--btn-color-secondary` | secondary | `#111` |
46
+ | `--btn-bg-outline` | outline | `transparent` |
47
+ | `--btn-color-outline` | outline | `#007aff` |
48
+ | `--btn-bg-ghost` | ghost | `transparent` |
49
+ | `--btn-color-ghost` | ghost | `#007aff` |
50
+ | `--btn-bg-danger` | danger | `#ff3b30` |
51
+ | `--btn-color-danger` | danger | `#fff` |
52
+
53
+ ### Specific Button Types
54
+
55
+ | Variable | Type | Default/Fallback |
56
+ | ----------------------- | -------- | ---------------- |
57
+ | `--btn-width-close` | closeBtn | `35px` |
58
+ | `--btn-height-close` | closeBtn | `35px` |
59
+ | `--btn-bg-close` | closeBtn | `lightgray` |
60
+ | `--btn-height-save` | saveBtn | `35px` |
61
+ | `--btn-padding-x-save` | saveBtn | `30px` |
62
+ | `--btn-bg-save` | saveBtn | `#007aff` |
63
+ | `--btn-height-trash` | trashBtn | `35px` |
64
+ | `--btn-padding-x-trash` | trashBtn | `10px` |
65
+ | `--btn-radius-trash` | trashBtn | `4px` |
66
+ | `--btn-bg-trash` | trashBtn | `lightgray` |
67
+
68
+
3
69
  ----
4
70
  # Changelog
5
71
 
package/dist/Button.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { ReactNode } from "react";
2
+ import './style/button.css';
2
3
  type Props = {
3
4
  index?: string | number;
4
5
  text?: string;
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();
@@ -14,5 +15,5 @@ export const Button = ({ index, text, selected, addClass, notimeout, size = 'md'
14
15
  click === null || click === void 0 ? void 0 : click(event);
15
16
  }, 200);
16
17
  }, [notimeout, click, handleRipple]);
17
- return (_jsx(_Fragment, { children: _jsxs("button", { type: "button", ref: buttonRef, onClick: handleButtonClick, className: `ext-btn ext-btn--primary ext-btn--${size} _ripple ${addClass !== null && addClass !== void 0 ? addClass : ''}`, "aria-pressed": selected, children: [children, text && _jsx("div", { className: "ext-btn-label", children: text })] }, index) }));
18
+ return (_jsx(_Fragment, { children: _jsxs("button", { type: "button", ref: buttonRef, onClick: handleButtonClick, className: `ext-btn ext-btn--${size} _ripple ${addClass !== null && addClass !== void 0 ? addClass : 'ext-btn--primary'}`, "aria-pressed": selected, children: [children, text && _jsx("div", { className: "ext-btn-label", children: text })] }, index) }));
18
19
  };
package/dist/Components.d.ts CHANGED
@@ -1,2 +1 @@
1
- import './style/button.css';
2
1
  export { Button } from './Button';
package/dist/Components.js CHANGED
@@ -1,4 +1,3 @@
1
- import './style/button.css';
2
1
  // export const ExtButton = () => {
3
2
  // return <Button />
4
3
  // }
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); /* 10% darker */
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
- /* RIPPLE EFFECT */
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
  }
package/dist/style/style/button.css CHANGED
@@ -1,136 +1,94 @@
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 {
21
3
  display: inline-flex;
22
4
  align-items: center;
23
5
  justify-content: center;
24
6
  gap: 0.5rem;
25
7
  font-family: inherit;
26
- font-size: var(--btn-font-size);
27
- font-weight: var(--btn-font-weight);
28
- color: var(--btn-color);
29
- background-color: var(--btn-bg);
8
+ font-size: var(--btn-font-size, 1rem);
9
+ font-weight: var(--btn-font-weight, 500);
10
+ color: var(--btn-color, #fff);
11
+ background-color: var(--btn-bg, #007aff);
30
12
  border: none;
31
- border-radius: var(--btn-radius);
32
- padding: var(--btn-padding-y) var(--btn-padding-x);
33
- width: var(--btn-width);
34
- height: var(--btn-height);
13
+ border-radius: var(--btn-radius, 18px);
14
+ padding: var(--btn-padding-y, 0.5rem) var(--btn-padding-x, 1rem);
15
+ width: var(--btn-width, fit-content);
16
+ height: var(--btn-height, auto);
35
17
  cursor: pointer;
36
- transition: var(--btn-transition);
18
+ transition: var(--btn-transition, all 0.2s ease);
37
19
  text-align: center;
38
20
  text-decoration: none;
39
21
  user-select: none;
22
+ line-height: var(--btn-line-height, 1.5);
40
23
  }
41
24
 
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
25
  .ext-btn:focus-visible {
57
- outline: 2px solid #007aff;
26
+ outline: 2px solid var(--btn-bg, #007aff);
58
27
  outline-offset: 2px;
59
28
  }
60
29
 
61
- /* 🚫 Disabled */
62
30
  .ext-btn:disabled,
63
31
  .ext-btn[aria-disabled="true"] {
64
32
  opacity: 0.6;
65
33
  cursor: not-allowed;
66
34
  }
67
35
 
68
- /* Hover — slightly darker */
69
36
  .ext-btn:hover:not(:disabled):not([aria-disabled="true"]) {
70
- filter: brightness(0.9); /* 10% darker */
37
+ filter: brightness(0.9);
71
38
  }
72
39
 
73
- /* 🖱️ Hover + Active */
74
- /* .ext-btn:hover:not(:disabled):not([aria-disabled="true"]) {
75
- filter: brightness(1.1);
76
- } */
77
-
78
40
  .ext-btn:active:not(:disabled):not([aria-disabled="true"]) {
79
41
  transform: scale(0.97);
80
42
  }
81
43
 
82
- /* 🧩 Sizes */
44
+ /* Sizes */
83
45
  .ext-btn--sm {
84
- --btn-padding-y: 0.25rem;
85
- --btn-padding-x: 0.75rem;
86
- --btn-font-size: 0.85rem;
46
+ padding: var(--btn-padding-y-sm, 0.25rem) var(--btn-padding-x-sm, 0.75rem);
47
+ font-size: var(--btn-font-size-sm, 0.85rem);
87
48
  }
88
49
 
89
50
  .ext-btn--md {
90
- --btn-padding-y: 0.5rem;
91
- --btn-padding-x: 1rem;
92
- --btn-font-size: 1rem;
51
+ padding: var(--btn-padding-y-md, 0.5rem) var(--btn-padding-x-md, 1rem);
52
+ font-size: var(--btn-font-size-md, 1rem);
93
53
  }
94
54
 
95
55
  .ext-btn--lg {
96
- --btn-padding-y: 0.75rem;
97
- --btn-padding-x: 1.5rem;
98
- --btn-font-size: 1.1rem;
56
+ padding: var(--btn-padding-y-lg, 0.75rem) var(--btn-padding-x-lg, 1.5rem);
57
+ font-size: var(--btn-font-size-lg, 1.1rem);
99
58
  }
100
59
 
101
- /* 🎨 Variants */
60
+ /* Variants */
102
61
  .ext-btn--primary {
103
- --btn-bg: #007aff;
104
- --btn-color: #fff;
62
+ color: var(--btn-color-primary, #fff);
63
+ background-color: var(--btn-bg-primary, #007aff);
105
64
  }
106
65
 
107
66
  .ext-btn--secondary {
108
- --btn-bg: #e5e5ea;
109
- --btn-color: #111;
67
+ color: var(--btn-color-secondary, #111);
68
+ background-color: var(--btn-bg-secondary, #e5e5ea);
110
69
  }
111
70
 
112
71
  .ext-btn--outline {
113
- --btn-bg: transparent;
114
- --btn-color: #007aff;
72
+ color: var(--btn-color-outline, #007aff);
73
+ background-color: var(--btn-bg-outline, transparent);
115
74
  }
116
75
 
117
76
  .ext-btn--ghost {
118
- --btn-bg: transparent;
119
- --btn-color: #007aff;
77
+ color: var(--btn-color-ghost, #007aff);
78
+ background-color: var(--btn-bg-ghost, transparent);
120
79
  }
121
80
 
122
81
  .ext-btn--danger {
123
- --btn-bg: #ff3b30;
124
- --btn-color: #fff;
82
+ color: var(--btn-color-danger, #fff);
83
+ background-color: var(--btn-bg-danger, #ff3b30);
125
84
  }
126
85
 
127
- /* 🌀 Loading (optional if using spinner) */
128
86
  .ext-btn--loading {
129
87
  pointer-events: none;
130
88
  opacity: 0.8;
131
89
  }
132
90
 
133
- /* 📦 Content Layout */
91
+ /* Icons and labels */
134
92
  .ext-btn-icon {
135
93
  display: flex;
136
94
  align-items: center;
@@ -143,9 +101,43 @@ button {
143
101
  white-space: nowrap;
144
102
  }
145
103
 
146
- /* RIPPLE EFFECT */
104
+ /* Specific buttons */
105
+ .closeBtn {
106
+ width: var(--btn-width-close, 35px);
107
+ height: var(--btn-height-close, 35px);
108
+ padding: 0;
109
+ background-color: var(--btn-bg-close, lightgray);
110
+ }
111
+
112
+ .saveBtn {
113
+ height: var(--btn-height-save, 35px);
114
+ padding-left: var(--btn-padding-x-save, 30px);
115
+ padding-right: var(--btn-padding-x-save, 30px);
116
+ background-color: var(--btn-bg-save, #007aff);
117
+ }
118
+
119
+ .trashBtn {
120
+ height: var(--btn-height-trash, 35px);
121
+ padding-left: var(--btn-padding-x-trash, 10px);
122
+ padding-right: var(--btn-padding-x-trash, 10px);
123
+ border-radius: var(--btn-radius-trash, 4px);
124
+ background-color: var(--btn-bg-trash, lightgray);
125
+ }
126
+
127
+ /* Ripple Effect */
128
+ ._ripple {
129
+ font-weight: var(--btn-font-weight, 500);
130
+ box-shadow: var(--ripple-box-shadow, rgb(100 100 111 / 20%) 0px 7px 29px 0px);
131
+ position: relative;
132
+ overflow: hidden;
133
+ display: flex;
134
+ align-items: center;
135
+ justify-content: center;
136
+ user-select: none;
137
+ }
138
+
147
139
  .ripple {
148
- background: var(--ripple-effect-bck);
140
+ background: var(--ripple-effect-bck, rgb(0 0 0 / 15%));
149
141
  position: absolute;
150
142
  border-radius: 50%;
151
143
  transform: scale(0);
@@ -155,14 +147,12 @@ button {
155
147
  will-change: transform, opacity;
156
148
  }
157
149
 
158
- /* Only devices that can hover (desktop/laptop) */
159
150
  @media (hover: hover) and (pointer: fine) {
160
151
  ._ripple {
161
152
  cursor: pointer;
162
153
  }
163
154
  }
164
155
 
165
-
166
156
  @keyframes ripple-animation {
167
157
  to {
168
158
  transform: scale(4);
@@ -170,26 +160,25 @@ button {
170
160
  }
171
161
  }
172
162
 
163
+ /* Loader */
173
164
  .lds-ripple,
174
165
  .lds-ripple div {
175
166
  box-sizing: border-box;
176
167
  }
177
168
 
178
169
  .lds-ripple {
179
- --image-sync-wh: 100%;
180
- --bw: 5px;
181
170
  position: absolute;
182
171
  top: 50%;
183
172
  left: 50%;
184
173
  transform: translate(-50%, -50%);
185
- height: var(--image-sync-wh);
186
- width: var(--image-sync-wh);
174
+ height: var(--image-sync-wh, 100%);
175
+ width: var(--image-sync-wh, 100%);
187
176
  z-index: 9999;
188
177
  }
189
178
 
190
179
  .lds-ripple div {
191
180
  position: absolute;
192
- border: var(--bw) solid white;
181
+ border: var(--bw, 5px) solid white;
193
182
  opacity: 1;
194
183
  border-radius: 50%;
195
184
  animation: lds-ripple 1s cubic-bezier(0, 0.4, 0.8, 1) infinite;
@@ -197,7 +186,7 @@ button {
197
186
 
198
187
  .lds-ripple div:nth-child(2) {
199
188
  animation-delay: -0.5s;
200
- border: var(--bw) solid whitesmoke;
189
+ border: var(--bw, 5px) solid whitesmoke;
201
190
  }
202
191
 
203
192
  @keyframes lds-ripple {
@@ -206,7 +195,7 @@ button {
206
195
  left: 50%;
207
196
  width: 8%;
208
197
  height: 8%;
209
- opacity: .2;
198
+ opacity: 0.2;
210
199
  transform: translate(-50%, -50%);
211
200
  }
212
201
 
@@ -222,29 +211,9 @@ button {
222
211
  100% {
223
212
  top: 50%;
224
213
  left: 50%;
225
- width: var(--image-sync-wh);
226
- height: var(--image-sync-wh);
227
- opacity: .2;
214
+ width: var(--image-sync-wh, 100%);
215
+ height: var(--image-sync-wh, 100%);
216
+ opacity: 0.2;
228
217
  transform: translate(-50%, -50%);
229
218
  }
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
219
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ehscan-react-components",
3
- "version": "0.1.7",
3
+ "version": "0.1.9",
4
4
  "description": "components",
5
5
  "main": "dist/Components.js",
6
6
  "types": "dist/Components.d.ts",