react-led-digit 0.0.11 → 0.0.12

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 +28 -4
  2. package/lib/Digit/Digit.stories.js +1 -1
  3. package/lib/Digit/UnstyledDigit.d.ts +1 -1
  4. package/lib/Digit/UnstyledDigit.js +1 -1
  5. package/lib/Digit/UnstyledDigit.stories.js +1 -1
  6. package/lib/Digit/digit.css +44 -32
  7. package/lib/Digit/digit.css.generated.js +45 -33
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -1,16 +1,13 @@
1
1
  <img src="images/react-led-digit.gif" width="576" alt="react led digit" />
2
2
 
3
- # React Seven-Segment Digit Component
3
+ # Led Digit (Seven-Segment) React Component
4
4
 
5
- Intended to use in digital clock or calculator.
6
- HTML and CSS only.
7
5
  → [Codesandbox playground](https://codesandbox.io/p/sandbox/friendly-dewdney-7jvh5w)
8
6
 
9
7
  Use example:
10
8
 
11
9
  ```tsx
12
10
  import { Digit, BlinkingDigit } from 'react-led-digit';
13
- import 'react-led-digit/lib/Digit/digit.css';
14
11
 
15
12
  <div className="digital-clock">
16
13
  <Digit value="0" />
@@ -21,3 +18,30 @@ import 'react-led-digit/lib/Digit/digit.css';
21
18
  <Digit value="am" />
22
19
  </div>;
23
20
  ```
21
+
22
+ Segment style example ([sandbox](https://codesandbox.io/p/sandbox/react-led-digit-forked-c4f2v3)):
23
+
24
+ ```tsx
25
+ import { Digit, BlinkingDigit } from 'react-led-digit';
26
+
27
+ <>
28
+ <Digit
29
+ value="0"
30
+ segmentStyle={{
31
+ color: 'red',
32
+ colorOff: 'blue',
33
+ length: '1em',
34
+ thickness: '.5em',
35
+ cornerShift: '-.1em',
36
+ spacing: '-.1em',
37
+ shiftAD: '.1em',
38
+ opacityOn: 1,
39
+ opacityOff: 0.25,
40
+ transitionDuration: '.5s',
41
+ }}
42
+ />
43
+ <Digit value="1" shape="rect" />
44
+ <Digit value="2" shape="pill" />
45
+ <Digit value="3" shape="round" />
46
+ </>;
47
+ ```
package/lib/Digit/Digit.stories.js CHANGED
@@ -40,7 +40,7 @@ const CustomDigit = (_a) => {
40
40
  thickness: '.25rem',
41
41
  length: '1.5rem',
42
42
  spacing: '0.25rem',
43
- filament: '.0625rem',
43
+ shiftAD: '.0625rem',
44
44
  } })));
45
45
  };
46
46
  const DigitTest = () => {
package/lib/Digit/UnstyledDigit.d.ts CHANGED
@@ -14,7 +14,7 @@ type SegmentStyle = {
14
14
  length?: CSSProperties['width'];
15
15
  thickness?: CSSProperties['width'];
16
16
  spacing?: CSSProperties['width'];
17
- filament?: CSSProperties['width'];
17
+ shiftAD?: CSSProperties['width'];
18
18
  opacityOn?: CSSProperties['opacity'];
19
19
  opacityOff?: CSSProperties['opacity'];
20
20
  transitionDuration?: CSSProperties['transitionDuration'];
package/lib/Digit/UnstyledDigit.js CHANGED
@@ -24,7 +24,7 @@ const Digit = (_a) => {
24
24
  const v = value.toString();
25
25
  const type = valueToType(value);
26
26
  const segments = type && valueToSegments(value); // {A: true, ...}
27
- const sx = Object.assign({ '--segment-color': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.color, '--segment-color-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.colorOff, '--segment-thickness': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.thickness, '--segment-spacing': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.spacing, '--segment-length': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.length, '--segment-filament': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.filament, '--segment-opacity-on': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOn, '--segment-opacity-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOff, '--segment-transition-duration': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.transitionDuration, '--segment-corner-shift': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.cornerShift }, rest.style);
27
+ const sx = Object.assign({ '--segment-color': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.color, '--segment-color-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.colorOff, '--segment-thickness': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.thickness, '--segment-spacing': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.spacing, '--segment-length': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.length, '--segment-shift-ad': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.shiftAD, '--segment-opacity-on': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOn, '--segment-opacity-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOff, '--segment-transition-duration': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.transitionDuration, '--segment-corner-shift': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.cornerShift }, rest.style);
28
28
  if (type === 'digit')
29
29
  return (0, jsx_runtime_1.jsx)(components_1.DigitSegments, Object.assign({ "aria-label": v }, rest, segments, { style: sx }));
30
30
  if (type === 'colon')
package/lib/Digit/UnstyledDigit.stories.js CHANGED
@@ -39,7 +39,7 @@ const CustomDigit = (_a) => {
39
39
  thickness: '.25rem',
40
40
  length: '1.5rem',
41
41
  spacing: '0.25rem',
42
- filament: '.0625rem',
42
+ shiftAD: '.0625rem',
43
43
  } })));
44
44
  };
45
45
  const UnstyledDigitTest = () => {
package/lib/Digit/digit.css CHANGED
@@ -12,7 +12,7 @@
12
12
  --thickness: var(--segment-thickness, 0.25em); /* =4px */
13
13
  --length: var(--segment-length, 1em);
14
14
  --spacing: var(--segment-spacing, 0.0625em); /* =1px */
15
- --filament: var(--segment-filament, 0em); /* vertical squeeze for A, D */
15
+ --shift-ad: var(--segment-shift-ad, 0em); /* squeezes segments A and D */
16
16
  --opacity-on: var(--segment-opacity-on, 1);
17
17
  --opacity-off: var(--segment-opacity-off, 0.1);
18
18
  --transition-duration: var(--segment-transition-duration, 0.25s);
@@ -24,6 +24,7 @@
24
24
 
25
25
  /* computed values */
26
26
  --thick: var(--thickness);
27
+ --thick-half: calc(var(--thick) * 0.5);
27
28
  --digit-width: calc(var(--length) + var(--thick) + var(--spacing));
28
29
  --digit-height: calc(var(--length) * 2 + var(--thick) + var(--spacing) * 2);
29
30
 
@@ -35,7 +36,7 @@
35
36
  --sp-half-minus: calc(var(--sp-half) * -1);
36
37
 
37
38
  --radius-round: calc(var(--thick) * 0.33);
38
- --radius-pill: 100em;
39
+ --radius-pill: var(--thick-half, 10em);
39
40
 
40
41
  display: inline-block;
41
42
  position: relative;
@@ -61,9 +62,10 @@
61
62
  height: 100%;
62
63
  }
63
64
 
65
+ &.digit,
64
66
  .opacity-wrapper,
65
67
  .opacity-wrapper .segment {
66
- transition-property: background-color, border-color, opacity, visibility;
68
+ transition-property: all;
67
69
  transition-duration: var(--transition-duration);
68
70
  }
69
71
 
@@ -139,10 +141,10 @@
139
141
  left: calc(var(--th-half) + var(--sp-half) - var(--shft));
140
142
  }
141
143
  &.A {
142
- top: calc(var(--filament) + var(--shft));
144
+ top: calc(var(--shift-ad) + var(--shft));
143
145
  }
144
146
  &.D {
145
- bottom: calc(var(--filament) + var(--shft));
147
+ bottom: calc(var(--shift-ad) + var(--shft));
146
148
  }
147
149
  &.G {
148
150
  bottom: calc(var(--length) + var(--spacing));
@@ -152,9 +154,9 @@
152
154
  /* spearheads */
153
155
  &.horizontal {
154
156
  clip-path: polygon(
155
- 0 50%,
156
- var(--th-half) 0,
157
- var(--th-half-100) 0,
157
+ 0% 50%,
158
+ var(--th-half) 0%,
159
+ var(--th-half-100) 0%,
158
160
  100% 50%,
159
161
  var(--th-half-100) 100%,
160
162
  var(--th-half) 100%
@@ -162,9 +164,9 @@
162
164
  &.A {
163
165
  /* x y */
164
166
  clip-path: polygon(
165
- 0 calc(50% - var(--shft)),
166
- calc(var(--th-half) - var(--shft)) 0,
167
- calc(var(--th-half-100) + var(--shft)) 0,
167
+ 0% calc(50% - var(--shft)),
168
+ calc(var(--th-half) - var(--shft)) 0%,
169
+ calc(var(--th-half-100) + var(--shft)) 0%,
168
170
  100% calc(50% - var(--shft)),
169
171
  calc(var(--th-half-100) - var(--shft)) 100%,
170
172
  calc(var(--th-half) + var(--shft)) 100%
@@ -173,9 +175,9 @@
173
175
  &.D {
174
176
  /* x y */
175
177
  clip-path: polygon(
176
- 0 calc(50% + var(--shft)),
177
- calc(var(--th-half) + var(--shft)) 0,
178
- calc(var(--th-half-100) - var(--shft)) 0,
178
+ 0% calc(50% + var(--shft)),
179
+ calc(var(--th-half) + var(--shft)) 0%,
180
+ calc(var(--th-half-100) - var(--shft)) 0%,
179
181
  100% calc(50% + var(--shft)),
180
182
  calc(var(--th-half-100) + var(--shft)) 100%,
181
183
  calc(var(--th-half) - var(--shft)) 100%
@@ -184,9 +186,9 @@
184
186
  }
185
187
  &.vertical {
186
188
  clip-path: polygon(
187
- 50% 0,
188
- 0 var(--th-half),
189
- 0 var(--th-half-100),
189
+ 50% 0%,
190
+ 0% var(--th-half),
191
+ 0% var(--th-half-100),
190
192
  50% 100%,
191
193
  100% var(--th-half-100),
192
194
  100% var(--th-half)
@@ -194,9 +196,9 @@
194
196
  &.B {
195
197
  /* x y */
196
198
  clip-path: polygon(
197
- calc(50% + var(--shft)) 0,
198
- 0 calc(var(--th-half) + var(--shft)),
199
- 0 var(--th-half-100),
199
+ calc(50% + var(--shft)) 0%,
200
+ 0% calc(var(--th-half) + var(--shft)),
201
+ 0% var(--th-half-100),
200
202
  50% 100%,
201
203
  100% var(--th-half-100),
202
204
  100% calc(var(--th-half) - var(--shft))
@@ -205,9 +207,9 @@
205
207
  &.C {
206
208
  /* x y */
207
209
  clip-path: polygon(
208
- 50% 0,
209
- 0 var(--th-half),
210
- 0 calc(var(--th-half-100) - var(--shft)),
210
+ 50% 0%,
211
+ 0% var(--th-half),
212
+ 0% calc(var(--th-half-100) - var(--shft)),
211
213
  calc(50% + var(--shft)) 100%,
212
214
  100% calc(var(--th-half-100) + var(--shft)),
213
215
  100% var(--th-half)
@@ -216,9 +218,9 @@
216
218
  &.E {
217
219
  /* x y */
218
220
  clip-path: polygon(
219
- 50% 0,
220
- 0 var(--th-half),
221
- 0 calc(var(--th-half-100) + var(--shft)),
221
+ 50% 0%,
222
+ 0% var(--th-half),
223
+ 0% calc(var(--th-half-100) + var(--shft)),
222
224
  calc(50% - var(--shft)) 100%,
223
225
  100% calc(var(--th-half-100) - var(--shft)),
224
226
  100% var(--th-half)
@@ -227,9 +229,9 @@
227
229
  &.F {
228
230
  /* x y */
229
231
  clip-path: polygon(
230
- calc(50% - var(--shft)) 0,
231
- 0 calc(var(--th-half) - var(--shft)),
232
- 0 var(--th-half-100),
232
+ calc(50% - var(--shft)) 0%,
233
+ 0% calc(var(--th-half) - var(--shft)),
234
+ 0% var(--th-half-100),
233
235
  50% 100%,
234
236
  100% var(--th-half-100),
235
237
  100% calc(var(--th-half) + var(--shft))
@@ -239,16 +241,26 @@
239
241
  }
240
242
 
241
243
  /* segment shapes */
244
+ &.shape-default .segment.segment,
242
245
  &.shape-rect .segment.segment {
243
- clip-path: unset;
246
+ border-radius: 0;
244
247
  }
245
248
  &.shape-round .segment.segment {
246
249
  border-radius: var(--radius-round);
247
- clip-path: unset;
248
250
  }
249
251
  &.shape-pill .segment.segment {
250
252
  border-radius: var(--radius-pill);
251
- clip-path: unset;
253
+ }
254
+
255
+ &.shape-rect,
256
+ &.shape-round,
257
+ &.shape-pill {
258
+ .segment.segment.horizontal {
259
+ clip-path: polygon(0% 50%, 0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);
260
+ }
261
+ .segment.segment.vertical {
262
+ clip-path: polygon(50% 0%, 0% 0%, 0% 100%, 50% 100%, 100% 100%, 100% 0%);
263
+ }
252
264
  }
253
265
 
254
266
  &.ampm {
package/lib/Digit/digit.css.generated.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  const css = {
4
4
  src: `src/Digit/digit.css`,
5
- hash: `3775688054381318`,
5
+ hash: `2ftmruudz6u`,
6
6
  content: `
7
7
  /**
8
8
  * A
@@ -18,7 +18,7 @@ const css = {
18
18
  --thickness: var(--segment-thickness, 0.25em); /* =4px */
19
19
  --length: var(--segment-length, 1em);
20
20
  --spacing: var(--segment-spacing, 0.0625em); /* =1px */
21
- --filament: var(--segment-filament, 0em); /* vertical squeeze for A, D */
21
+ --shift-ad: var(--segment-shift-ad, 0em); /* squeezes segments A and D */
22
22
  --opacity-on: var(--segment-opacity-on, 1);
23
23
  --opacity-off: var(--segment-opacity-off, 0.1);
24
24
  --transition-duration: var(--segment-transition-duration, 0.25s);
@@ -30,6 +30,7 @@ const css = {
30
30
 
31
31
  /* computed values */
32
32
  --thick: var(--thickness);
33
+ --thick-half: calc(var(--thick) * 0.5);
33
34
  --digit-width: calc(var(--length) + var(--thick) + var(--spacing));
34
35
  --digit-height: calc(var(--length) * 2 + var(--thick) + var(--spacing) * 2);
35
36
 
@@ -41,7 +42,7 @@ const css = {
41
42
  --sp-half-minus: calc(var(--sp-half) * -1);
42
43
 
43
44
  --radius-round: calc(var(--thick) * 0.33);
44
- --radius-pill: 100em;
45
+ --radius-pill: var(--thick-half, 10em);
45
46
 
46
47
  display: inline-block;
47
48
  position: relative;
@@ -67,9 +68,10 @@ const css = {
67
68
  height: 100%;
68
69
  }
69
70
 
71
+ &.digit,
70
72
  .opacity-wrapper,
71
73
  .opacity-wrapper .segment {
72
- transition-property: background-color, border-color, opacity, visibility;
74
+ transition-property: all;
73
75
  transition-duration: var(--transition-duration);
74
76
  }
75
77
 
@@ -145,10 +147,10 @@ const css = {
145
147
  left: calc(var(--th-half) + var(--sp-half) - var(--shft));
146
148
  }
147
149
  &.A {
148
- top: calc(var(--filament) + var(--shft));
150
+ top: calc(var(--shift-ad) + var(--shft));
149
151
  }
150
152
  &.D {
151
- bottom: calc(var(--filament) + var(--shft));
153
+ bottom: calc(var(--shift-ad) + var(--shft));
152
154
  }
153
155
  &.G {
154
156
  bottom: calc(var(--length) + var(--spacing));
@@ -158,9 +160,9 @@ const css = {
158
160
  /* spearheads */
159
161
  &.horizontal {
160
162
  clip-path: polygon(
161
- 0 50%,
162
- var(--th-half) 0,
163
- var(--th-half-100) 0,
163
+ 0% 50%,
164
+ var(--th-half) 0%,
165
+ var(--th-half-100) 0%,
164
166
  100% 50%,
165
167
  var(--th-half-100) 100%,
166
168
  var(--th-half) 100%
@@ -168,9 +170,9 @@ const css = {
168
170
  &.A {
169
171
  /* x y */
170
172
  clip-path: polygon(
171
- 0 calc(50% - var(--shft)),
172
- calc(var(--th-half) - var(--shft)) 0,
173
- calc(var(--th-half-100) + var(--shft)) 0,
173
+ 0% calc(50% - var(--shft)),
174
+ calc(var(--th-half) - var(--shft)) 0%,
175
+ calc(var(--th-half-100) + var(--shft)) 0%,
174
176
  100% calc(50% - var(--shft)),
175
177
  calc(var(--th-half-100) - var(--shft)) 100%,
176
178
  calc(var(--th-half) + var(--shft)) 100%
@@ -179,9 +181,9 @@ const css = {
179
181
  &.D {
180
182
  /* x y */
181
183
  clip-path: polygon(
182
- 0 calc(50% + var(--shft)),
183
- calc(var(--th-half) + var(--shft)) 0,
184
- calc(var(--th-half-100) - var(--shft)) 0,
184
+ 0% calc(50% + var(--shft)),
185
+ calc(var(--th-half) + var(--shft)) 0%,
186
+ calc(var(--th-half-100) - var(--shft)) 0%,
185
187
  100% calc(50% + var(--shft)),
186
188
  calc(var(--th-half-100) + var(--shft)) 100%,
187
189
  calc(var(--th-half) - var(--shft)) 100%
@@ -190,9 +192,9 @@ const css = {
190
192
  }
191
193
  &.vertical {
192
194
  clip-path: polygon(
193
- 50% 0,
194
- 0 var(--th-half),
195
- 0 var(--th-half-100),
195
+ 50% 0%,
196
+ 0% var(--th-half),
197
+ 0% var(--th-half-100),
196
198
  50% 100%,
197
199
  100% var(--th-half-100),
198
200
  100% var(--th-half)
@@ -200,9 +202,9 @@ const css = {
200
202
  &.B {
201
203
  /* x y */
202
204
  clip-path: polygon(
203
- calc(50% + var(--shft)) 0,
204
- 0 calc(var(--th-half) + var(--shft)),
205
- 0 var(--th-half-100),
205
+ calc(50% + var(--shft)) 0%,
206
+ 0% calc(var(--th-half) + var(--shft)),
207
+ 0% var(--th-half-100),
206
208
  50% 100%,
207
209
  100% var(--th-half-100),
208
210
  100% calc(var(--th-half) - var(--shft))
@@ -211,9 +213,9 @@ const css = {
211
213
  &.C {
212
214
  /* x y */
213
215
  clip-path: polygon(
214
- 50% 0,
215
- 0 var(--th-half),
216
- 0 calc(var(--th-half-100) - var(--shft)),
216
+ 50% 0%,
217
+ 0% var(--th-half),
218
+ 0% calc(var(--th-half-100) - var(--shft)),
217
219
  calc(50% + var(--shft)) 100%,
218
220
  100% calc(var(--th-half-100) + var(--shft)),
219
221
  100% var(--th-half)
@@ -222,9 +224,9 @@ const css = {
222
224
  &.E {
223
225
  /* x y */
224
226
  clip-path: polygon(
225
- 50% 0,
226
- 0 var(--th-half),
227
- 0 calc(var(--th-half-100) + var(--shft)),
227
+ 50% 0%,
228
+ 0% var(--th-half),
229
+ 0% calc(var(--th-half-100) + var(--shft)),
228
230
  calc(50% - var(--shft)) 100%,
229
231
  100% calc(var(--th-half-100) - var(--shft)),
230
232
  100% var(--th-half)
@@ -233,9 +235,9 @@ const css = {
233
235
  &.F {
234
236
  /* x y */
235
237
  clip-path: polygon(
236
- calc(50% - var(--shft)) 0,
237
- 0 calc(var(--th-half) - var(--shft)),
238
- 0 var(--th-half-100),
238
+ calc(50% - var(--shft)) 0%,
239
+ 0% calc(var(--th-half) - var(--shft)),
240
+ 0% var(--th-half-100),
239
241
  50% 100%,
240
242
  100% var(--th-half-100),
241
243
  100% calc(var(--th-half) + var(--shft))
@@ -245,16 +247,26 @@ const css = {
245
247
  }
246
248
 
247
249
  /* segment shapes */
250
+ &.shape-default .segment.segment,
248
251
  &.shape-rect .segment.segment {
249
- clip-path: unset;
252
+ border-radius: 0;
250
253
  }
251
254
  &.shape-round .segment.segment {
252
255
  border-radius: var(--radius-round);
253
- clip-path: unset;
254
256
  }
255
257
  &.shape-pill .segment.segment {
256
258
  border-radius: var(--radius-pill);
257
- clip-path: unset;
259
+ }
260
+
261
+ &.shape-rect,
262
+ &.shape-round,
263
+ &.shape-pill {
264
+ .segment.segment.horizontal {
265
+ clip-path: polygon(0% 50%, 0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);
266
+ }
267
+ .segment.segment.vertical {
268
+ clip-path: polygon(50% 0%, 0% 0%, 0% 100%, 50% 100%, 100% 100%, 100% 0%);
269
+ }
258
270
  }
259
271
 
260
272
  &.ampm {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-led-digit",
3
- "version": "0.0.11",
3
+ "version": "0.0.12",
4
4
  "description": "react component for 7-segment display (digit), includes dot, colon and am-pm digits",
5
5
  "main": "./lib/index.js",
6
6
  "files": [