react-led-digit 0.0.17 → 0.0.18

package/lib/Blinker/Blinker.js

@@ -97,8 +97,6 @@ class Blinker {
     }
     unsubscribe(fn) {
         __classPrivateFieldGet(this, _Blinker_state, "f").subscribers = __classPrivateFieldGet(this, _Blinker_state, "f").subscribers.filter(i => i !== fn);
-        if (__classPrivateFieldGet(this, _Blinker_state, "f").subscribers.length === 0)
-            this.stop();
     }
 }
 exports.Blinker = Blinker;

package/lib/BlinkingDigit/BlinkingDigit.js

@@ -67,7 +67,7 @@ exports.BlinkingDigit = react_1.default.memo((_a) => {
     }, [blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.period, blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.ratio, blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.sync]);
     if ((blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.period) === 0 ||
         (blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.ratio) === 0 ||
-        typeof (rest === null || rest === void 0 ? void 0 : rest.off) === 'boolean')
+        typeof rest.off === 'boolean')
         return (0, jsx_runtime_1.jsx)(Digit_1.Digit, Object.assign({}, rest, { className: (0, clsx_1.default)('blinking', className) })); // no blinker required
     return ((0, jsx_runtime_1.jsx)(Digit_1.Digit, Object.assign({}, rest, { className: (0, clsx_1.default)('blinking', className), off: rest.off || !visible })));
 });

package/lib/Digit/Digit.stories.d.ts

@@ -17,6 +17,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export type DisplayProps = React.HTMLAttributes<HTMLDivElement> & {
     scale?: number;
+    shape?: Digit['shape'];
     segmentStyle?: Digit['segmentStyle'];
     value: string;
 };

package/lib/Digit/Digit.stories.js

@@ -58,10 +58,10 @@ const DigitTest = () => {
                         } })] })] }));
 };
 const charset = new Set(Object.keys(_1.charToSevenSegments));
-function setCharAt(str, index, chr) {
-    if (index > str.length - 1)
+function removeCharAt(str, index) {
+    if (index < 0 || index >= str.length)
         return str;
-    return str.substring(0, index) + chr + str.substring(index + 1);
+    return str.substring(0, index) + str.substring(index + 1);
 }
 const BlinkingDigitTest = () => {
     const input = (0, react_1.useRef)(null);
@@ -73,7 +73,7 @@ const BlinkingDigitTest = () => {
         }
     };
     const removeDigit = (idx) => {
-        const next = setCharAt(dgts, idx, '');
+        const next = removeCharAt(dgts, idx);
         setDgts(next);
     };
     const handleChange = () => {
@@ -119,11 +119,12 @@ const getDigits = (str) => {
     return result;
 };
 const Display = (_a) => {
-    var { scale = 1, value } = _a, rest = __rest(_a, ["scale", "value"]);
+    var { scale = 1, shape, value } = _a, rest = __rest(_a, ["scale", "shape", "value"]);
     const digits = getDigits(value);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { children: digits.map((digit, idx) => {
             const props = {
                 value: digit,
+                shape,
                 style: {
                     fontSize: `${scale * 100}%`,
                 },
@@ -141,7 +142,7 @@ const Display = (_a) => {
         }) })));
 };
 const getTime = () => new Date().toLocaleTimeString();
-const SimpleClock = () => {
+const SimpleClock = (args) => {
     const [time, setTime] = (0, react_1.useState)(getTime());
     (0, react_1.useEffect)(() => {
         const blinker = new __1.Blinker();
@@ -151,7 +152,7 @@ const SimpleClock = () => {
         blinker.subscribe(handleBlinkerChange);
         return () => blinker.unsubscribe(handleBlinkerChange);
     }, []);
-    return (0, jsx_runtime_1.jsx)(Display, { scale: 2, style: grid, value: time });
+    return ((0, jsx_runtime_1.jsx)(Display, { scale: 2, shape: args.shape, style: Object.assign(Object.assign({}, grid), { fontSize: `${args.fontSize}px` }), value: time }));
 };
 const FirefoxSubpixelTest = () => {
     const DigitFF = (props) => ((0, jsx_runtime_1.jsx)(__1.Digit, { value: props.v || 8, segmentStyle: {
@@ -162,19 +163,28 @@ const FirefoxSubpixelTest = () => {
         } }));
     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, {})] }));
 };
-const SegmentShapeTest = () => {
+const SegmentShapeTest = (args) => {
     const Dgt = ({ shape }) => ((0, jsx_runtime_1.jsx)(__1.Digit, { value: 'F', shape: shape, segmentStyle: {
             color: 'green',
-            thickness: '2em',
-            length: '5em',
-            spacing: '0.1em',
-            cornerShift: '0.5em',
+            length: `${args.length}em`,
+            thickness: `${args.thickness}em`,
+            spacing: `${args.spacing}em`,
+            shiftAD: `${args.shiftAD}em`,
+            cornerShift: `${args.cornerShift}em`,
         } }));
     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' })] }));
 };
 exports.Clock = {
     args: {
-        value: '0',
+        shape: 'default',
+        fontSize: 16,
+    },
+    argTypes: {
+        shape: {
+            control: 'radio',
+            options: ['default', 'rect', 'round', 'pill', 'calculator'],
+        },
+        fontSize: { control: { type: 'range', min: 8, max: 64, step: 1 } },
     },
     render: SimpleClock,
 };
@@ -198,7 +208,19 @@ exports.Firefox = {
 };
 exports.Shape = {
     args: {
-        value: '0',
+        value: 'F',
+        length: 5,
+        thickness: 2,
+        spacing: 0.1,
+        shiftAD: 0,
+        cornerShift: 0,
+    },
+    argTypes: {
+        length: { control: { type: 'range', min: 1, max: 20, step: 0.5 } },
+        thickness: { control: { type: 'range', min: 0.5, max: 10, step: 0.25 } },
+        spacing: { control: { type: 'range', min: -0.5, max: 2, step: 0.05 } },
+        shiftAD: { control: { type: 'range', min: -1, max: 1, step: 0.05 } },
+        cornerShift: { control: { type: 'range', min: -5, max: 5, step: 0.1 } },
     },
     render: SegmentShapeTest,
 };

package/lib/Digit/UnstyledDigit.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import { CSSProperties } from 'react';
 import { SevenSegmentsValue } from './charToSevenSegments';
 type NumValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 type DigitValue = NumValue | SevenSegmentsValue | 'am' | 'pm' | ':' | '.';

package/lib/Digit/UnstyledDigit.stories.js

@@ -14,7 +14,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UnstyledDigits = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const __1 = require("..");
-//import './digit.css';
 const meta = {
     title: 'Example/UnstyledDigit',
     component: __1.UnstyledDigit,

package/lib/Digit/components/AmpmSegments.js

@@ -20,6 +20,6 @@ const clsx_1 = __importDefault(require("clsx"));
 const utils_1 = require("./utils");
 const AmpmSegments = (_a) => {
     var { className, off, shape = 'default', AM, PM } = _a, rest = __rest(_a, ["className", "off", "shape", "AM", "PM"]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit ampm', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "aria-label", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment AM', (0, utils_1.onOffCx)(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment PM', (0, utils_1.onOffCx)(PM, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment AM', (0, utils_1.onOffCx)(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment PM', (0, utils_1.onOffCx)(PM, off)) })] })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit ampm', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "aria-label", "aria-hidden": "true", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment AM', (0, utils_1.onOffCx)(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment PM', (0, utils_1.onOffCx)(PM, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment AM', (0, utils_1.onOffCx)(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment PM', (0, utils_1.onOffCx)(PM, off)) })] })] })));
 };
 exports.AmpmSegments = AmpmSegments;

package/lib/Digit/components/ColonSegments.js

@@ -20,6 +20,6 @@ const clsx_1 = __importDefault(require("clsx"));
 const utils_1 = require("./utils");
 const ColonSegments = (_a) => {
     var { className, off, shape = 'default', D1, D2 } = _a, rest = __rest(_a, ["className", "off", "shape", "D1", "D2"]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit colon', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "aria-label", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D1', (0, utils_1.onOffCx)(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D2', (0, utils_1.onOffCx)(D2, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D1', (0, utils_1.onOffCx)(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D2', (0, utils_1.onOffCx)(D2, off)) })] })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit colon', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "aria-label", "aria-hidden": "true", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D1', (0, utils_1.onOffCx)(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D2', (0, utils_1.onOffCx)(D2, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D1', (0, utils_1.onOffCx)(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D2', (0, utils_1.onOffCx)(D2, off)) })] })] })));
 };
 exports.ColonSegments = ColonSegments;

package/lib/Digit/components/DigitSegments.js

@@ -20,6 +20,6 @@ const clsx_1 = __importDefault(require("clsx"));
 const utils_1 = require("./utils");
 const DigitSegments = (_a) => {
     var { className, off, shape = 'default', A, B, C, D, E, F, G } = _a, rest = __rest(_a, ["className", "off", "shape", "A", "B", "C", "D", "E", "F", "G"]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "aria-label", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment A horizontal', (0, utils_1.onOffCx)(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment B vertical', (0, utils_1.onOffCx)(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment C vertical', (0, utils_1.onOffCx)(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D horizontal', (0, utils_1.onOffCx)(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment E vertical', (0, utils_1.onOffCx)(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment F vertical', (0, utils_1.onOffCx)(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment G horizontal', (0, utils_1.onOffCx)(G, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment A horizontal', (0, utils_1.onOffCx)(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment B vertical', (0, utils_1.onOffCx)(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment C vertical', (0, utils_1.onOffCx)(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D horizontal', (0, utils_1.onOffCx)(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment E vertical', (0, utils_1.onOffCx)(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment F vertical', (0, utils_1.onOffCx)(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment G horizontal', (0, utils_1.onOffCx)(G, off)) })] })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "aria-label", "aria-hidden": "true", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment A horizontal', (0, utils_1.onOffCx)(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment B vertical', (0, utils_1.onOffCx)(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment C vertical', (0, utils_1.onOffCx)(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D horizontal', (0, utils_1.onOffCx)(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment E vertical', (0, utils_1.onOffCx)(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment F vertical', (0, utils_1.onOffCx)(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment G horizontal', (0, utils_1.onOffCx)(G, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment A horizontal', (0, utils_1.onOffCx)(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment B vertical', (0, utils_1.onOffCx)(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment C vertical', (0, utils_1.onOffCx)(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D horizontal', (0, utils_1.onOffCx)(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment E vertical', (0, utils_1.onOffCx)(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment F vertical', (0, utils_1.onOffCx)(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment G horizontal', (0, utils_1.onOffCx)(G, off)) })] })] })));
 };
 exports.DigitSegments = DigitSegments;

package/lib/Digit/components/DotSegments.js

@@ -20,6 +20,6 @@ const clsx_1 = __importDefault(require("clsx"));
 const utils_1 = require("./utils");
 const DotSegments = (_a) => {
     var { className, off, shape = 'default', DP } = _a, rest = __rest(_a, ["className", "off", "shape", "DP"]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit dot', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "aria-label", children: rest['aria-label'] }), (0, jsx_runtime_1.jsx)("div", { className: "opacity-wrapper off", children: (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment DP', (0, utils_1.onOffCx)(DP, off)) }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment DP', (0, utils_1.onOffCx)(DP, off)) }) })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit dot', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "aria-label", "aria-hidden": "true", children: rest['aria-label'] }), (0, jsx_runtime_1.jsx)("div", { className: "opacity-wrapper off", children: (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment DP', (0, utils_1.onOffCx)(DP, off)) }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment DP', (0, utils_1.onOffCx)(DP, off)) }) })] })));
 };
 exports.DotSegments = DotSegments;

package/lib/Digit/digit.css

@@ -31,12 +31,9 @@
   /* computed values */
   --len: var(--length);
   --thk: var(--thickness);
-  --thk-minus: calc(var(--thk) * -1);
   --thk-half: calc(var(--thk) / 2);
-  --thk-half-minus: calc(var(--thk) / -2);
 
   --spc: calc(var(--spacing) / 1.4142); /* divided by sqrt(2) */
-  --spc-minus: calc(var(--spc) * -1);
   --crn: var(--corner-shift);
 
   --radius-round: calc(var(--thk) * 0.33);
@@ -270,8 +267,37 @@
     border-radius: var(--radius-pill);
   }
   &.shape-calculator {
-    border-radius: calc(var(--thk) * 1.2);
-    overflow: hidden;
+    --r: calc(var(--thk) * 1.2);
+  }
+  & {
+    --r: calc(var(--thk) * 0);
+
+    clip-path: polygon(
+      /* top-left corner */ 0px var(--r),
+      calc(var(--r) * 0.0495) calc(var(--r) * 0.691),
+      calc(var(--r) * 0.191) calc(var(--r) * 0.4045),
+      calc(var(--r) * 0.4045) calc(var(--r) * 0.191),
+      calc(var(--r) * 0.691) calc(var(--r) * 0.0495),
+      var(--r) 0px,
+      /* top-right corner */ calc(var(--dw) - var(--r)) 0px,
+      calc(var(--dw) - var(--r) * 0.691) calc(var(--r) * 0.0495),
+      calc(var(--dw) - var(--r) * 0.4045) calc(var(--r) * 0.191),
+      calc(var(--dw) - var(--r) * 0.191) calc(var(--r) * 0.4045),
+      calc(var(--dw) - var(--r) * 0.0495) calc(var(--r) * 0.691),
+      var(--dw) var(--r),
+      /* bottom-right corner */ var(--dw) calc(var(--dh) - var(--r)),
+      calc(var(--dw) - var(--r) * 0.0495) calc(var(--dh) - var(--r) * 0.691),
+      calc(var(--dw) - var(--r) * 0.191) calc(var(--dh) - var(--r) * 0.4045),
+      calc(var(--dw) - var(--r) * 0.4045) calc(var(--dh) - var(--r) * 0.191),
+      calc(var(--dw) - var(--r) * 0.691) calc(var(--dh) - var(--r) * 0.0495),
+      calc(var(--dw) - var(--r)) var(--dh),
+      /* bottom-left corner */ var(--r) var(--dh),
+      calc(var(--r) * 0.691) calc(var(--dh) - var(--r) * 0.0495),
+      calc(var(--r) * 0.4045) calc(var(--dh) - var(--r) * 0.191),
+      calc(var(--r) * 0.191) calc(var(--dh) - var(--r) * 0.4045),
+      calc(var(--r) * 0.0495) calc(var(--dh) - var(--r) * 0.691),
+      0px calc(var(--dh) - var(--r))
+    );
 
     .segment.segment {
       --crn: var(--thk);

package/lib/Digit/digit.css.generated.js

@@ -2,7 +2,7 @@
 
 const css = {
   src: `src/Digit/digit.css`,
-  hash: `4bpttscfgs`,
+  hash: `27bilryv8nf`,
   content: `
 /**
  *    A
@@ -37,12 +37,9 @@ const css = {
   /* computed values */
   --len: var(--length);
   --thk: var(--thickness);
-  --thk-minus: calc(var(--thk) * -1);
   --thk-half: calc(var(--thk) / 2);
-  --thk-half-minus: calc(var(--thk) / -2);
 
   --spc: calc(var(--spacing) / 1.4142); /* divided by sqrt(2) */
-  --spc-minus: calc(var(--spc) * -1);
   --crn: var(--corner-shift);
 
   --radius-round: calc(var(--thk) * 0.33);
@@ -276,8 +273,37 @@ const css = {
     border-radius: var(--radius-pill);
   }
   &.shape-calculator {
-    border-radius: calc(var(--thk) * 1.2);
-    overflow: hidden;
+    --r: calc(var(--thk) * 1.2);
+  }
+  & {
+    --r: calc(var(--thk) * 0);
+
+    clip-path: polygon(
+      /* top-left corner */ 0px var(--r),
+      calc(var(--r) * 0.0495) calc(var(--r) * 0.691),
+      calc(var(--r) * 0.191) calc(var(--r) * 0.4045),
+      calc(var(--r) * 0.4045) calc(var(--r) * 0.191),
+      calc(var(--r) * 0.691) calc(var(--r) * 0.0495),
+      var(--r) 0px,
+      /* top-right corner */ calc(var(--dw) - var(--r)) 0px,
+      calc(var(--dw) - var(--r) * 0.691) calc(var(--r) * 0.0495),
+      calc(var(--dw) - var(--r) * 0.4045) calc(var(--r) * 0.191),
+      calc(var(--dw) - var(--r) * 0.191) calc(var(--r) * 0.4045),
+      calc(var(--dw) - var(--r) * 0.0495) calc(var(--r) * 0.691),
+      var(--dw) var(--r),
+      /* bottom-right corner */ var(--dw) calc(var(--dh) - var(--r)),
+      calc(var(--dw) - var(--r) * 0.0495) calc(var(--dh) - var(--r) * 0.691),
+      calc(var(--dw) - var(--r) * 0.191) calc(var(--dh) - var(--r) * 0.4045),
+      calc(var(--dw) - var(--r) * 0.4045) calc(var(--dh) - var(--r) * 0.191),
+      calc(var(--dw) - var(--r) * 0.691) calc(var(--dh) - var(--r) * 0.0495),
+      calc(var(--dw) - var(--r)) var(--dh),
+      /* bottom-left corner */ var(--r) var(--dh),
+      calc(var(--r) * 0.691) calc(var(--dh) - var(--r) * 0.0495),
+      calc(var(--r) * 0.4045) calc(var(--dh) - var(--r) * 0.191),
+      calc(var(--r) * 0.191) calc(var(--dh) - var(--r) * 0.4045),
+      calc(var(--r) * 0.0495) calc(var(--dh) - var(--r) * 0.691),
+      0px calc(var(--dh) - var(--r))
+    );
 
     .segment.segment {
       --crn: var(--thk);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-led-digit",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "react component for 7-segment display (digit), includes dot, colon and am-pm digits",
   "main": "./lib/index.js",
   "files": [