react-led-digit 0.0.13 → 0.0.15

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 (7) hide show
  1. package/README.md +3 -2
  2. package/lib/Digit/Digit.stories.js +1 -1
  3. package/lib/Digit/charToSevenSegments.d.ts +1 -1
  4. package/lib/Digit/charToSevenSegments.js +1 -0
  5. package/lib/Digit/digit.css +1 -1
  6. package/lib/Digit/digit.css.generated.js +2 -2
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -1,7 +1,8 @@
1
1
  <img src="images/react-led-digit.gif" width="576" alt="react led digit" />
2
2
 
3
- # Led Digit (Seven-Segment) React Component → [![npm version](https://img.shields.io/npm/v/react-led-digit.svg)](https://www.npmjs.com/package/react-led-digit)
3
+ # React Led Digit [![npm version](https://img.shields.io/npm/v/react-led-digit.svg)](https://www.npmjs.com/package/react-led-digit)
4
4
 
5
+ A react component to emulate seven-segment display.
5
6
  → [Codesandbox playground](https://codesandbox.io/p/sandbox/friendly-dewdney-7jvh5w)
6
7
 
7
8
  Use example:
@@ -19,7 +20,7 @@ import { Digit, BlinkingDigit } from 'react-led-digit';
19
20
  </div>;
20
21
  ```
21
22
 
22
- Segment style example ([sandbox](https://codesandbox.io/p/sandbox/react-led-digit-forked-c4f2v3)):
23
+ Styled segments example (see [sandbox](https://codesandbox.io/p/sandbox/react-led-digit-forked-c4f2v3)):
23
24
 
24
25
  ```tsx
25
26
  import { Digit, BlinkingDigit } from 'react-led-digit';
package/lib/Digit/Digit.stories.js CHANGED
@@ -48,7 +48,7 @@ const DigitTest = () => {
48
48
  thickness: '.35rem',
49
49
  color: 'green',
50
50
  colorOff: 'blue',
51
- } }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 2, shape: "pill", segmentStyle: { thickness: '.5rem' } }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 3, shape: "rect", segmentStyle: { spacing: '.25rem' } }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 4, style: { color: 'red' } }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: ":" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 5 }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 6 }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 7 }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 8, off: true }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 9 }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "." }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "pm" })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "pm", blinkOptions: { period: 2000 } }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: ":", shape: "round" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "pm", shape: "rect" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "am", shape: "round" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: ":", shape: "pill" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "pm", shape: "pill" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "-", shape: "pill" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "_", shape: "pill" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: 2, shape: "pill", segmentStyle: { thickness: '.5rem' } }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: ":", shape: "pill", segmentStyle: { thickness: '1rem' } })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.Digit, { value: "A" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "C" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "E" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "F" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "G" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "H" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "J" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "L" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "O" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "P" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "S" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "U" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "Y" })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.Digit, { value: "c" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "b" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "d" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "h" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "n" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "o" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "r" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "u" })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(CustomDigit, { value: 0 }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: 1 }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: ":" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: 2 }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: 3 }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "am" })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.Digit, { value: "E" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "r" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "r" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "o" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "r" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "." })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(CustomDigit, { value: "A" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "C" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "E" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "F" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "H" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "J" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "L" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "O" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "P" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "U" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "Y" })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(CustomDigit, { value: "c" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "b" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "d" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "h" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "n" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "o" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "r" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "u" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "2", shape: "round", segmentStyle: {
51
+ } }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 2, shape: "pill", segmentStyle: { thickness: '.5rem' } }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 3, shape: "rect", segmentStyle: { spacing: '.25rem' } }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 4, style: { color: 'red' } }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: ":" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 5 }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 6 }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 7 }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 8, off: true }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 9 }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "." }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "pm" })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "pm", blinkOptions: { period: 2000 } }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: ":", shape: "round" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "pm", shape: "rect" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "am", shape: "round" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: ":", shape: "pill" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "pm", shape: "pill" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "-", shape: "pill" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "_", shape: "pill" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: 2, shape: "pill", segmentStyle: { thickness: '.5rem' } }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: ":", shape: "pill", segmentStyle: { thickness: '1rem' } })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.Digit, { value: "A" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "C" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "E" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "F" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "G" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "H" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "J" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "L" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "O" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "P" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "S" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "U" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "Y" })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.Digit, { value: "c" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "b" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "d" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "h" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "n" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "o" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "r" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "u" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: " " }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "_" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "-" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: ":" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "." })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(CustomDigit, { value: 0 }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: 1 }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: ":" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: 2 }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: 3 }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "am" })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.Digit, { value: "E" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "r" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "r" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "o" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "r" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "." })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(CustomDigit, { value: "A" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "C" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "E" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "F" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "H" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "J" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "L" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "O" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "P" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "U" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "Y" })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(CustomDigit, { value: "c" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "b" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "d" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "h" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "n" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "o" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "r" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "u" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "2", shape: "round", segmentStyle: {
52
52
  color: 'green',
53
53
  colorOff: 'red',
54
54
  length: '1.5rem',
package/lib/Digit/charToSevenSegments.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export type SevenSegmentsValue = DigitNumber | DigitSpecial | DigitLetter;
2
2
  type DigitNumber = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
3
- type DigitSpecial = '_' | '-';
3
+ type DigitSpecial = '_' | '-' | ' ';
4
4
  type DigitLetter = 'A' | 'C' | 'E' | 'F' | 'G' | 'H' | 'J' | 'L' | 'O' | 'P' | 'S' | 'U' | 'Y' | 'c' | 'b' | 'd' | 'h' | 'n' | 'o' | 'r' | 't' | 'u';
5
5
  /**
6
6
  * A
package/lib/Digit/charToSevenSegments.js CHANGED
@@ -10,6 +10,7 @@ exports.charToSevenSegments = void 0;
10
10
  */
11
11
  exports.charToSevenSegments = {
12
12
  _: 'D',
13
+ ' ': '',
13
14
  '-': 'G',
14
15
  '0': 'ABCDEF',
15
16
  '1': 'BC',
package/lib/Digit/digit.css CHANGED
@@ -326,7 +326,7 @@
326
326
  & .segment {
327
327
  --dot-border-width: calc(var(--thk) * 0.6);
328
328
  --dot-size: calc(var(--dot-border-width) * 2);
329
- --dots-distance: calc(var(--thk) / 2);
329
+ --dots-distance: calc(var(--digit-height) / 8);
330
330
 
331
331
  position: absolute;
332
332
  width: var(--dot-size);
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: `y5tdgosc5m`,
5
+ hash: `8v5snasxzy`,
6
6
  content: `
7
7
  /**
8
8
  * A
@@ -332,7 +332,7 @@ const css = {
332
332
  & .segment {
333
333
  --dot-border-width: calc(var(--thk) * 0.6);
334
334
  --dot-size: calc(var(--dot-border-width) * 2);
335
- --dots-distance: calc(var(--thk) / 2);
335
+ --dots-distance: calc(var(--digit-height) / 8);
336
336
 
337
337
  position: absolute;
338
338
  width: var(--dot-size);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-led-digit",
3
- "version": "0.0.13",
3
+ "version": "0.0.15",
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": [