react-led-digit 0.0.16 → 0.0.18

package/lib/Blinker/Blinker.d.ts

@@ -1,5 +1,5 @@
 /**
- * Switches intrnal state periodically (visible), calling subscribers each time.
+ * Switches internal state periodically (visible), calling subscribers each time.
  */
 type BlinkerSubscriber = (state: BlinkerState['visible']) => void;
 type BlinkerState = {

package/lib/Blinker/Blinker.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Switches intrnal state periodically (visible), calling subscribers each time.
+ * Switches internal state periodically (visible), calling subscribers each time.
  */
 var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
@@ -81,7 +81,7 @@ class Blinker {
     }
     start(visible = __classPrivateFieldGet(this, _Blinker_state, "f").visible) {
         if (__classPrivateFieldGet(this, _Blinker_state, "f").timeout)
-            return; // already runnning
+            this.stop(); // restart with new params
         visible ? __classPrivateFieldGet(this, _Blinker_instances, "m", _Blinker_on).call(this) : __classPrivateFieldGet(this, _Blinker_instances, "m", _Blinker_off).call(this); // start blinking
     }
     stop() {

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.js

@@ -24,7 +24,7 @@ const Digit = (_a) => {
     const scopeAttribute = (0, useStyleInjector_1.default)(digit_css_generated_js_1.default.content, [], {
         scopeID: digit_css_generated_js_1.default.hash,
     });
-    if (Object.entries(scopeAttribute)[0].includes(true))
+    if (Object.values(scopeAttribute).some(v => v === true))
         return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, scopeAttribute, { style: { display: 'contents' }, children: (0, jsx_runtime_1.jsx)(UnstyledDigit_1.Digit, Object.assign({}, rest)) })));
     return (0, jsx_runtime_1.jsx)(UnstyledDigit_1.Digit, Object.assign({}, rest));
 };

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,25 +58,26 @@ 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.substr(0, index) + chr + str.substr(index + 1);
+    return str.substring(0, index) + str.substring(index + 1);
 }
 const BlinkingDigitTest = () => {
     const input = (0, react_1.useRef)(null);
     const [dgts, setDgts] = (0, react_1.useState)('');
     const addDigit = () => {
-        if (input.current.value) {
+        var _a;
+        if ((_a = input.current) === null || _a === void 0 ? void 0 : _a.value) {
             setDgts(prev => prev + input.current.value);
         }
     };
     const removeDigit = (idx) => {
-        const next = setCharAt(dgts, idx, '');
+        const next = removeCharAt(dgts, idx);
         setDgts(next);
     };
     const handleChange = () => {
-        if (!charset.has(input.current.value)) {
+        if (input.current && !charset.has(input.current.value)) {
             input.current.value = '';
         }
     };
@@ -118,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}%`,
                 },
@@ -140,17 +142,17 @@ const Display = (_a) => {
         }) })));
 };
 const getTime = () => new Date().toLocaleTimeString();
-const SimpleClock = () => {
+const SimpleClock = (args) => {
     const [time, setTime] = (0, react_1.useState)(getTime());
-    const blinker = new __1.Blinker();
-    blinker.period = 2000;
-    blinker.ratio = 1;
-    const handleBlinkerChange = () => setTime(getTime());
     (0, react_1.useEffect)(() => {
+        const blinker = new __1.Blinker();
+        blinker.period = 2000;
+        blinker.ratio = 1;
+        const handleBlinkerChange = () => setTime(getTime());
         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: {
@@ -161,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,
 };
@@ -197,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.js

@@ -33,7 +33,7 @@ const Digit = (_a) => {
         return (0, jsx_runtime_1.jsx)(components_1.AmpmSegments, Object.assign({ "aria-label": v }, rest, segments, { style: sx }));
     if (type === 'dot')
         return (0, jsx_runtime_1.jsx)(components_1.DotSegments, Object.assign({ "aria-label": v }, rest, segments, { style: sx }));
-    console.warn(`(at Digit.tsx) incompatible value: ${value.toString()}`);
+    console.warn(`(at UnstyledDigit.tsx) incompatible value: ${value.toString()}`);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-label": v }, rest, { className: (0, clsx_1.default)('digit unknown', rest.className) })));
 };
 exports.Digit = Digit;
@@ -51,7 +51,8 @@ function valueToType(v) {
     return undefined;
 }
 function valueToSegments(v) {
-    const str = v === null || v === void 0 ? void 0 : v.toString();
+    var _a;
+    const str = (_a = v === null || v === void 0 ? void 0 : v.toString()) !== null && _a !== void 0 ? _a : '';
     if (str.toLowerCase() === 'am')
         return { AM: true };
     if (str.toLowerCase() === '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/lib/Digit/useStyleInjector.js

@@ -41,7 +41,7 @@ class StyleInjector {
         return StyleInjector.instance; // singleton
     }
     increase(s) {
-        if (this.count(s) === 0)
+        if (this.count(s) === 0 && typeof document !== 'undefined')
             document.head.appendChild(createStyleElement(s));
         if (this.count(s) >= 0)
             __classPrivateFieldGet(this, _StyleInjector_styles, "f").set(s.id, this.count(s) + 1);
@@ -50,7 +50,7 @@ class StyleInjector {
         var _a;
         if (this.count(s) > 0)
             __classPrivateFieldGet(this, _StyleInjector_styles, "f").set(s.id, this.count(s) - 1);
-        if (this.count(s) === 0)
+        if (this.count(s) === 0 && typeof document !== 'undefined')
             (_a = document.head.querySelector(`#${s.id}`)) === null || _a === void 0 ? void 0 : _a.remove();
     }
     count(s) {
@@ -69,16 +69,10 @@ const createStyleElement = (style) => {
     return el;
 };
 const wrapWithScope = (css, scopeAttribute) => {
-    const scoped = // unused bc @scope at-rule does not work in Firefox
-     `@scope ([${scopeAttribute}]) {` +
-        `:scope { display: contents; }` +
-        `${css}` +
-        `}`;
-    const isolated = `[${scopeAttribute}] { display: contents; }` +
+    return (`[${scopeAttribute}] { display: contents; }` +
         `[${scopeAttribute}] {` +
         `${css}` +
-        `}`;
-    return isolated;
+        `}`);
 };
 // https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript
 const cyrb53string = (str, seed = 0) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-led-digit",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "react component for 7-segment display (digit), includes dot, colon and am-pm digits",
   "main": "./lib/index.js",
   "files": [
@@ -36,6 +36,10 @@
   "engines": {
     "node": ">=12.0"
   },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
   "dependencies": {
     "clsx": "^2.1.1"
   },