react-led-digit 0.0.15 → 0.0.16

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 (6) hide show
  1. package/lib/Digit/Digit.stories.d.ts +1 -0
  2. package/lib/Digit/Digit.stories.js +17 -1
  3. package/lib/Digit/UnstyledDigit.d.ts +1 -1
  4. package/lib/Digit/digit.css +60 -49
  5. package/lib/Digit/digit.css.generated.js +61 -50
  6. package/package.json +1 -1
package/lib/Digit/Digit.stories.d.ts CHANGED
@@ -24,3 +24,4 @@ export declare const Clock: Story;
24
24
  export declare const Digits: Story;
25
25
  export declare const Blinking: Story;
26
26
  export declare const Firefox: Story;
27
+ export declare const Shape: Story;
package/lib/Digit/Digit.stories.js CHANGED
@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
11
11
  return t;
12
12
  };
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.Firefox = exports.Blinking = exports.Digits = exports.Clock = void 0;
14
+ exports.Shape = exports.Firefox = exports.Blinking = exports.Digits = exports.Clock = void 0;
15
15
  const jsx_runtime_1 = require("react/jsx-runtime");
16
16
  const react_1 = require("react");
17
17
  const __1 = require("../");
@@ -161,6 +161,16 @@ const FirefoxSubpixelTest = () => {
161
161
  } }));
162
162
  return ((0, jsx_runtime_1.jsxs)("div", { style: Object.assign({}, grid), children: [(0, jsx_runtime_1.jsx)(DigitFF, { v: 2 }), (0, jsx_runtime_1.jsx)(DigitFF, {}), (0, jsx_runtime_1.jsx)(DigitFF, { v: ":" }), (0, jsx_runtime_1.jsx)(DigitFF, {}), (0, jsx_runtime_1.jsx)(DigitFF, {})] }));
163
163
  };
164
+ const SegmentShapeTest = () => {
165
+ const Dgt = ({ shape }) => ((0, jsx_runtime_1.jsx)(__1.Digit, { value: 'F', shape: shape, segmentStyle: {
166
+ color: 'green',
167
+ thickness: '2em',
168
+ length: '5em',
169
+ spacing: '0.1em',
170
+ cornerShift: '0.5em',
171
+ } }));
172
+ return ((0, jsx_runtime_1.jsxs)("div", { style: Object.assign({}, grid), children: [(0, jsx_runtime_1.jsx)(Dgt, { shape: 'default' }), (0, jsx_runtime_1.jsx)(Dgt, { shape: 'rect' }), (0, jsx_runtime_1.jsx)(Dgt, { shape: 'round' }), (0, jsx_runtime_1.jsx)(Dgt, { shape: 'pill' }), (0, jsx_runtime_1.jsx)(Dgt, { shape: 'calculator' })] }));
173
+ };
164
174
  exports.Clock = {
165
175
  args: {
166
176
  value: '0',
@@ -185,3 +195,9 @@ exports.Firefox = {
185
195
  },
186
196
  render: FirefoxSubpixelTest,
187
197
  };
198
+ exports.Shape = {
199
+ args: {
200
+ value: '0',
201
+ },
202
+ render: SegmentShapeTest,
203
+ };
package/lib/Digit/UnstyledDigit.d.ts CHANGED
@@ -5,7 +5,7 @@ type DigitValue = NumValue | SevenSegmentsValue | 'am' | 'pm' | ':' | '.';
5
5
  type DivProps = React.HTMLAttributes<HTMLDivElement>;
6
6
  export type DigitProps = {
7
7
  off?: boolean;
8
- shape?: 'default' | 'rect' | 'round' | 'pill';
8
+ shape?: 'default' | 'rect' | 'round' | 'pill' | 'calculator';
9
9
  value: DigitValue;
10
10
  };
11
11
  type SegmentStyle = {
package/lib/Digit/digit.css CHANGED
@@ -47,11 +47,15 @@
47
47
 
48
48
  --digit-width: calc(var(--len) + var(--thk) + var(--spc) * 2);
49
49
  --digit-height: calc(var(--len) * 2 + var(--thk) + var(--spc) * 4);
50
+ --dw: var(--digit-width);
51
+ --dh: var(--digit-height);
52
+ --dw-half: calc(var(--digit-width) / 2);
53
+ --dh-half: calc(var(--digit-height) / 2);
50
54
 
51
- width: var(--digit-width);
52
- height: var(--digit-height);
53
- min-width: var(--digit-width); /* to prevent flex-shrink effects */
54
- min-height: var(--digit-height);
55
+ width: var(--dw);
56
+ height: var(--dh);
57
+ min-width: var(--dw); /* to prevent flex-shrink effects */
58
+ min-height: var(--dh);
55
59
 
56
60
  &.ampm {
57
61
  --digit-width: calc(var(--len) + var(--thk) + var(--spc));
@@ -120,10 +124,13 @@
120
124
 
121
125
  /* vertical segments pos */
122
126
  &.vertical {
127
+ --w: var(--thk);
128
+ --h: calc(var(--len) + var(--crn));
123
129
  --x100--thk-half: var(--thk-half);
124
- --y100--thk-half: calc(var(--len) - var(--thk-half));
125
- width: var(--thk);
126
- height: var(--len);
130
+ --y100--thk-half: calc(var(--len) - var(--thk-half) + var(--crn));
131
+
132
+ width: var(--w);
133
+ height: var(--h);
127
134
  left: 0;
128
135
 
129
136
  &.B,
@@ -133,7 +140,7 @@
133
140
  }
134
141
  &.F,
135
142
  &.B {
136
- top: calc(var(--thk-half) + var(--spc));
143
+ top: calc(var(--thk-half) + var(--spc) - var(--crn));
137
144
  }
138
145
  &.E,
139
146
  &.C {
@@ -142,23 +149,25 @@
142
149
 
143
150
  /* horizontal segments pos */
144
151
  &.horizontal {
152
+ --w: var(--len);
153
+ --h: var(--thk);
145
154
  --x100--thk-half: calc(var(--len) - var(--thk-half));
146
155
  --y100--thk-half: var(--thk-half);
147
156
 
148
- width: var(--len);
149
- height: var(--thk);
157
+ width: var(--w);
158
+ height: var(--h);
150
159
  left: calc(var(--thk-half) + var(--spc));
151
160
 
152
161
  &.A,
153
162
  &.D {
154
- width: calc(var(--len) + var(--crn) * 2);
155
163
  left: calc(var(--thk-half) + var(--spc) - var(--crn));
164
+ width: calc(var(--w) + var(--crn) * 2);
156
165
  }
157
166
  &.A {
158
- top: calc(var(--ad) + var(--crn));
167
+ top: calc(var(--ad) + 0px);
159
168
  }
160
169
  &.D {
161
- top: calc(var(--len) * 2 + var(--spc) * 4 - var(--ad) - var(--crn));
170
+ top: calc(var(--len) * 2 + var(--spc) * 4 - var(--ad) - 0px);
162
171
  }
163
172
  &.G {
164
173
  top: calc(var(--len) + var(--spc) * 2);
@@ -170,87 +179,80 @@
170
179
  &.A {
171
180
  /* x y */
172
181
  clip-path: polygon(
173
- 0% calc(50% - var(--crn)),
182
+ 0% calc(var(--thk-half) - var(--crn)),
174
183
  calc(var(--thk-half) - var(--crn)) 0%,
175
184
  calc(var(--x100--thk-half) + var(--crn) * 3) 0%,
176
- 100% calc(50% - var(--crn)),
177
- calc(var(--x100--thk-half) + var(--crn)) 100%,
178
- calc(var(--thk-half) + var(--crn)) 100%
185
+ calc(var(--len) + var(--crn) * 2) calc(var(--thk-half) - var(--crn)),
186
+ calc(var(--x100--thk-half) + var(--crn)) var(--thk),
187
+ calc(var(--thk-half) + var(--crn)) var(--thk)
179
188
  );
180
189
  }
181
190
  &.G {
182
191
  clip-path: polygon(
183
- 0% 50%,
192
+ 0% calc(var(--thk) / 2),
184
193
  var(--thk-half) 0%,
185
194
  var(--x100--thk-half) 0%,
186
- 100% 50%,
187
- var(--x100--thk-half) 100%,
188
- var(--thk-half) 100%
195
+ var(--len) var(--thk-half),
196
+ var(--x100--thk-half) var(--thk),
197
+ var(--thk-half) var(--thk)
189
198
  );
190
199
  }
191
200
  &.D {
192
201
  /* x y */
193
202
  clip-path: polygon(
194
- 0% calc(50% + var(--crn)),
203
+ 0% calc(var(--thk-half) + var(--crn)),
195
204
  calc(var(--thk-half) + var(--crn)) 0%,
196
205
  calc(var(--x100--thk-half) + var(--crn)) 0%,
197
- 100% calc(50% + var(--crn)),
198
- calc(var(--x100--thk-half) + var(--crn) * 3) 100%,
199
- calc(var(--thk-half) - var(--crn)) 100%
206
+ calc(var(--len) + var(--crn) * 2) calc(var(--thk-half) + var(--crn)),
207
+ calc(var(--x100--thk-half) + var(--crn) * 3) var(--thk),
208
+ calc(var(--thk-half) - var(--crn)) var(--thk)
200
209
  );
201
210
  }
202
211
  }
212
+
203
213
  &.vertical {
204
- clip-path: polygon(
205
- 50% 0%,
206
- 0% var(--thk-half),
207
- 0% var(--y100--thk-half),
208
- 50% 100%,
209
- 100% var(--y100--thk-half),
210
- 100% var(--thk-half)
211
- );
212
214
  &.B {
213
215
  /* x y */
214
216
  clip-path: polygon(
215
- calc(50% + var(--crn)) 0%,
217
+ calc(var(--thk-half) + var(--crn)) 0%,
216
218
  0% calc(var(--thk-half) + var(--crn)),
217
219
  0% var(--y100--thk-half),
218
- 50% 100%,
219
- 100% var(--y100--thk-half),
220
- 100% calc(var(--thk-half) - var(--crn))
220
+ var(--thk-half) calc(var(--len) + var(--crn)),
221
+ var(--thk) var(--y100--thk-half),
222
+ var(--thk) calc(var(--thk-half) - var(--crn))
221
223
  );
222
224
  }
223
225
  &.C {
224
226
  /* x y */
225
227
  clip-path: polygon(
226
- 50% 0%,
228
+ var(--thk-half) 0%,
227
229
  0% var(--thk-half),
228
230
  0% calc(var(--y100--thk-half) - var(--crn)),
229
- calc(50% + var(--crn)) 100%,
230
- 100% calc(var(--y100--thk-half) + var(--crn)),
231
- 100% var(--thk-half)
231
+ calc(var(--thk-half) + var(--crn)) calc(var(--len) + var(--crn)),
232
+ var(--thk) calc(var(--y100--thk-half) + var(--crn)),
233
+ var(--thk) var(--thk-half)
232
234
  );
233
235
  }
234
236
  &.E {
235
237
  /* x y */
236
238
  clip-path: polygon(
237
- 50% 0%,
239
+ var(--thk-half) 0%,
238
240
  0% var(--thk-half),
239
241
  0% calc(var(--y100--thk-half) + var(--crn)),
240
- calc(50% - var(--crn)) 100%,
241
- 100% calc(var(--y100--thk-half) - var(--crn)),
242
- 100% var(--thk-half)
242
+ calc(var(--thk-half) - var(--crn)) calc(var(--len) + var(--crn)),
243
+ var(--thk) calc(var(--y100--thk-half) - var(--crn)),
244
+ var(--thk) var(--thk-half)
243
245
  );
244
246
  }
245
247
  &.F {
246
248
  /* x y */
247
249
  clip-path: polygon(
248
- calc(50% - var(--crn)) 0%,
250
+ calc(var(--thk-half) - var(--crn)) 0%,
249
251
  0% calc(var(--thk-half) - var(--crn)),
250
252
  0% var(--y100--thk-half),
251
- 50% 100%,
252
- 100% var(--y100--thk-half),
253
- 100% calc(var(--thk-half) + var(--crn))
253
+ var(--thk-half) calc(var(--len) + var(--crn)),
254
+ var(--thk) var(--y100--thk-half),
255
+ var(--thk) calc(var(--thk-half) + var(--crn))
254
256
  );
255
257
  }
256
258
  }
@@ -267,6 +269,15 @@
267
269
  &.shape-pill .segment.segment {
268
270
  border-radius: var(--radius-pill);
269
271
  }
272
+ &.shape-calculator {
273
+ border-radius: calc(var(--thk) * 1.2);
274
+ overflow: hidden;
275
+
276
+ .segment.segment {
277
+ --crn: var(--thk);
278
+ --shft: calc(var(--thk) * 1);
279
+ }
280
+ }
270
281
 
271
282
  &.shape-rect,
272
283
  &.shape-round,
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: `8v5snasxzy`,
5
+ hash: `4bpttscfgs`,
6
6
  content: `
7
7
  /**
8
8
  * A
@@ -53,11 +53,15 @@ const css = {
53
53
 
54
54
  --digit-width: calc(var(--len) + var(--thk) + var(--spc) * 2);
55
55
  --digit-height: calc(var(--len) * 2 + var(--thk) + var(--spc) * 4);
56
+ --dw: var(--digit-width);
57
+ --dh: var(--digit-height);
58
+ --dw-half: calc(var(--digit-width) / 2);
59
+ --dh-half: calc(var(--digit-height) / 2);
56
60
 
57
- width: var(--digit-width);
58
- height: var(--digit-height);
59
- min-width: var(--digit-width); /* to prevent flex-shrink effects */
60
- min-height: var(--digit-height);
61
+ width: var(--dw);
62
+ height: var(--dh);
63
+ min-width: var(--dw); /* to prevent flex-shrink effects */
64
+ min-height: var(--dh);
61
65
 
62
66
  &.ampm {
63
67
  --digit-width: calc(var(--len) + var(--thk) + var(--spc));
@@ -126,10 +130,13 @@ const css = {
126
130
 
127
131
  /* vertical segments pos */
128
132
  &.vertical {
133
+ --w: var(--thk);
134
+ --h: calc(var(--len) + var(--crn));
129
135
  --x100--thk-half: var(--thk-half);
130
- --y100--thk-half: calc(var(--len) - var(--thk-half));
131
- width: var(--thk);
132
- height: var(--len);
136
+ --y100--thk-half: calc(var(--len) - var(--thk-half) + var(--crn));
137
+
138
+ width: var(--w);
139
+ height: var(--h);
133
140
  left: 0;
134
141
 
135
142
  &.B,
@@ -139,7 +146,7 @@ const css = {
139
146
  }
140
147
  &.F,
141
148
  &.B {
142
- top: calc(var(--thk-half) + var(--spc));
149
+ top: calc(var(--thk-half) + var(--spc) - var(--crn));
143
150
  }
144
151
  &.E,
145
152
  &.C {
@@ -148,23 +155,25 @@ const css = {
148
155
 
149
156
  /* horizontal segments pos */
150
157
  &.horizontal {
158
+ --w: var(--len);
159
+ --h: var(--thk);
151
160
  --x100--thk-half: calc(var(--len) - var(--thk-half));
152
161
  --y100--thk-half: var(--thk-half);
153
162
 
154
- width: var(--len);
155
- height: var(--thk);
163
+ width: var(--w);
164
+ height: var(--h);
156
165
  left: calc(var(--thk-half) + var(--spc));
157
166
 
158
167
  &.A,
159
168
  &.D {
160
- width: calc(var(--len) + var(--crn) * 2);
161
169
  left: calc(var(--thk-half) + var(--spc) - var(--crn));
170
+ width: calc(var(--w) + var(--crn) * 2);
162
171
  }
163
172
  &.A {
164
- top: calc(var(--ad) + var(--crn));
173
+ top: calc(var(--ad) + 0px);
165
174
  }
166
175
  &.D {
167
- top: calc(var(--len) * 2 + var(--spc) * 4 - var(--ad) - var(--crn));
176
+ top: calc(var(--len) * 2 + var(--spc) * 4 - var(--ad) - 0px);
168
177
  }
169
178
  &.G {
170
179
  top: calc(var(--len) + var(--spc) * 2);
@@ -176,87 +185,80 @@ const css = {
176
185
  &.A {
177
186
  /* x y */
178
187
  clip-path: polygon(
179
- 0% calc(50% - var(--crn)),
188
+ 0% calc(var(--thk-half) - var(--crn)),
180
189
  calc(var(--thk-half) - var(--crn)) 0%,
181
190
  calc(var(--x100--thk-half) + var(--crn) * 3) 0%,
182
- 100% calc(50% - var(--crn)),
183
- calc(var(--x100--thk-half) + var(--crn)) 100%,
184
- calc(var(--thk-half) + var(--crn)) 100%
191
+ calc(var(--len) + var(--crn) * 2) calc(var(--thk-half) - var(--crn)),
192
+ calc(var(--x100--thk-half) + var(--crn)) var(--thk),
193
+ calc(var(--thk-half) + var(--crn)) var(--thk)
185
194
  );
186
195
  }
187
196
  &.G {
188
197
  clip-path: polygon(
189
- 0% 50%,
198
+ 0% calc(var(--thk) / 2),
190
199
  var(--thk-half) 0%,
191
200
  var(--x100--thk-half) 0%,
192
- 100% 50%,
193
- var(--x100--thk-half) 100%,
194
- var(--thk-half) 100%
201
+ var(--len) var(--thk-half),
202
+ var(--x100--thk-half) var(--thk),
203
+ var(--thk-half) var(--thk)
195
204
  );
196
205
  }
197
206
  &.D {
198
207
  /* x y */
199
208
  clip-path: polygon(
200
- 0% calc(50% + var(--crn)),
209
+ 0% calc(var(--thk-half) + var(--crn)),
201
210
  calc(var(--thk-half) + var(--crn)) 0%,
202
211
  calc(var(--x100--thk-half) + var(--crn)) 0%,
203
- 100% calc(50% + var(--crn)),
204
- calc(var(--x100--thk-half) + var(--crn) * 3) 100%,
205
- calc(var(--thk-half) - var(--crn)) 100%
212
+ calc(var(--len) + var(--crn) * 2) calc(var(--thk-half) + var(--crn)),
213
+ calc(var(--x100--thk-half) + var(--crn) * 3) var(--thk),
214
+ calc(var(--thk-half) - var(--crn)) var(--thk)
206
215
  );
207
216
  }
208
217
  }
218
+
209
219
  &.vertical {
210
- clip-path: polygon(
211
- 50% 0%,
212
- 0% var(--thk-half),
213
- 0% var(--y100--thk-half),
214
- 50% 100%,
215
- 100% var(--y100--thk-half),
216
- 100% var(--thk-half)
217
- );
218
220
  &.B {
219
221
  /* x y */
220
222
  clip-path: polygon(
221
- calc(50% + var(--crn)) 0%,
223
+ calc(var(--thk-half) + var(--crn)) 0%,
222
224
  0% calc(var(--thk-half) + var(--crn)),
223
225
  0% var(--y100--thk-half),
224
- 50% 100%,
225
- 100% var(--y100--thk-half),
226
- 100% calc(var(--thk-half) - var(--crn))
226
+ var(--thk-half) calc(var(--len) + var(--crn)),
227
+ var(--thk) var(--y100--thk-half),
228
+ var(--thk) calc(var(--thk-half) - var(--crn))
227
229
  );
228
230
  }
229
231
  &.C {
230
232
  /* x y */
231
233
  clip-path: polygon(
232
- 50% 0%,
234
+ var(--thk-half) 0%,
233
235
  0% var(--thk-half),
234
236
  0% calc(var(--y100--thk-half) - var(--crn)),
235
- calc(50% + var(--crn)) 100%,
236
- 100% calc(var(--y100--thk-half) + var(--crn)),
237
- 100% var(--thk-half)
237
+ calc(var(--thk-half) + var(--crn)) calc(var(--len) + var(--crn)),
238
+ var(--thk) calc(var(--y100--thk-half) + var(--crn)),
239
+ var(--thk) var(--thk-half)
238
240
  );
239
241
  }
240
242
  &.E {
241
243
  /* x y */
242
244
  clip-path: polygon(
243
- 50% 0%,
245
+ var(--thk-half) 0%,
244
246
  0% var(--thk-half),
245
247
  0% calc(var(--y100--thk-half) + var(--crn)),
246
- calc(50% - var(--crn)) 100%,
247
- 100% calc(var(--y100--thk-half) - var(--crn)),
248
- 100% var(--thk-half)
248
+ calc(var(--thk-half) - var(--crn)) calc(var(--len) + var(--crn)),
249
+ var(--thk) calc(var(--y100--thk-half) - var(--crn)),
250
+ var(--thk) var(--thk-half)
249
251
  );
250
252
  }
251
253
  &.F {
252
254
  /* x y */
253
255
  clip-path: polygon(
254
- calc(50% - var(--crn)) 0%,
256
+ calc(var(--thk-half) - var(--crn)) 0%,
255
257
  0% calc(var(--thk-half) - var(--crn)),
256
258
  0% var(--y100--thk-half),
257
- 50% 100%,
258
- 100% var(--y100--thk-half),
259
- 100% calc(var(--thk-half) + var(--crn))
259
+ var(--thk-half) calc(var(--len) + var(--crn)),
260
+ var(--thk) var(--y100--thk-half),
261
+ var(--thk) calc(var(--thk-half) + var(--crn))
260
262
  );
261
263
  }
262
264
  }
@@ -273,6 +275,15 @@ const css = {
273
275
  &.shape-pill .segment.segment {
274
276
  border-radius: var(--radius-pill);
275
277
  }
278
+ &.shape-calculator {
279
+ border-radius: calc(var(--thk) * 1.2);
280
+ overflow: hidden;
281
+
282
+ .segment.segment {
283
+ --crn: var(--thk);
284
+ --shft: calc(var(--thk) * 1);
285
+ }
286
+ }
276
287
 
277
288
  &.shape-rect,
278
289
  &.shape-round,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-led-digit",
3
- "version": "0.0.15",
3
+ "version": "0.0.16",
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": [