react-led-digit 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Sergey Yakunin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,18 @@
+# React Seven-Segment Digit Component
+
+Intended to use in digital clock or calculator.
+
+Use example:
+
+```tsx
+import { Digit, BlinkingDigit } from 'react-led-digit';
+
+<div className="digital-clock">
+  <Digit value="0" />
+  <Digit value="1" />
+  <BlinkingDigit value=":" />
+  <Digit value="2" />
+  <Digit value="3" />
+  <Digit value="am" />
+</div>;
+```

package/lib/Blinker/Blinker.d.ts

@@ -0,0 +1,31 @@
+type BlinkerSubscriber = (state: BlinkerState['visible']) => void;
+type BlinkerState = {
+    timeout: null | ReturnType<typeof setTimeout>;
+    subscribers: BlinkerSubscriber[];
+    period: number;
+    ratio: number;
+    visible: boolean;
+    blinks: number;
+};
+type BlinkerOptions = {
+    autoRun?: boolean;
+    period?: BlinkerState['period'];
+    ratio?: BlinkerState['ratio'];
+    visible?: BlinkerState['visible'];
+};
+export declare class Blinker {
+    #private;
+    private static instance;
+    constructor(options?: BlinkerOptions);
+    get period(): BlinkerState['period'];
+    get ratio(): BlinkerState['ratio'];
+    get visible(): BlinkerState['visible'];
+    set period(val: BlinkerState['period']);
+    set ratio(val: BlinkerState['ratio']);
+    set visible(val: BlinkerState['visible']);
+    start(visible?: boolean): void;
+    stop(): void;
+    subscribe(fn: BlinkerSubscriber): void;
+    unsubscribe(fn: BlinkerSubscriber): void;
+}
+export {};

package/lib/Blinker/Blinker.js

@@ -0,0 +1,107 @@
+"use strict";
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Blinker_instances, _Blinker_initOptions, _Blinker_state, _Blinker_on, _Blinker_off;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Blinker = void 0;
+const defaultOptions = {
+    autoRun: true,
+    period: 1000,
+    ratio: 1,
+    visible: true,
+};
+class Blinker {
+    constructor(options = defaultOptions) {
+        _Blinker_instances.add(this);
+        _Blinker_initOptions.set(this, defaultOptions); // store options
+        _Blinker_state.set(this, {
+            timeout: null,
+            subscribers: [],
+            period: defaultOptions.period,
+            ratio: defaultOptions.ratio,
+            visible: defaultOptions.visible,
+            blinks: 0,
+        });
+        if (!Blinker.instance) {
+            Blinker.instance = this;
+            __classPrivateFieldSet(this, _Blinker_initOptions, Object.assign(Object.assign({}, defaultOptions), options), "f");
+            __classPrivateFieldGet(this, _Blinker_state, "f").period = __classPrivateFieldGet(this, _Blinker_initOptions, "f").period;
+            __classPrivateFieldGet(this, _Blinker_state, "f").ratio = __classPrivateFieldGet(this, _Blinker_initOptions, "f").ratio;
+            __classPrivateFieldGet(this, _Blinker_state, "f").visible = __classPrivateFieldGet(this, _Blinker_initOptions, "f").visible;
+            if (__classPrivateFieldGet(this, _Blinker_initOptions, "f").autoRun)
+                this.start();
+        }
+        return Blinker.instance;
+    }
+    get period() {
+        return __classPrivateFieldGet(this, _Blinker_state, "f").period;
+    }
+    get ratio() {
+        return __classPrivateFieldGet(this, _Blinker_state, "f").ratio;
+    }
+    get visible() {
+        return __classPrivateFieldGet(this, _Blinker_state, "f").visible;
+    }
+    set period(val) {
+        if (val !== __classPrivateFieldGet(this, _Blinker_state, "f").period && val !== 0) {
+            __classPrivateFieldGet(this, _Blinker_state, "f").period = Math.abs(val);
+            this.start();
+        }
+    }
+    set ratio(val) {
+        if (val !== __classPrivateFieldGet(this, _Blinker_state, "f").ratio && val !== 0) {
+            __classPrivateFieldGet(this, _Blinker_state, "f").ratio = Math.abs(val);
+            this.start();
+        }
+    }
+    set visible(val) {
+        if (val !== __classPrivateFieldGet(this, _Blinker_state, "f").visible) {
+            __classPrivateFieldGet(this, _Blinker_state, "f").visible = val;
+            this.start();
+        }
+    }
+    start(visible = __classPrivateFieldGet(this, _Blinker_state, "f").visible) {
+        if (__classPrivateFieldGet(this, _Blinker_state, "f").timeout)
+            this.stop();
+        visible ? __classPrivateFieldGet(this, _Blinker_instances, "m", _Blinker_on).call(this) : __classPrivateFieldGet(this, _Blinker_instances, "m", _Blinker_off).call(this); // start blinking
+    }
+    stop() {
+        __classPrivateFieldGet(this, _Blinker_state, "f").timeout && clearTimeout(__classPrivateFieldGet(this, _Blinker_state, "f").timeout);
+        __classPrivateFieldGet(this, _Blinker_state, "f").timeout = null;
+    }
+    subscribe(fn) {
+        if (!__classPrivateFieldGet(this, _Blinker_state, "f").subscribers.includes(fn)) {
+            __classPrivateFieldGet(this, _Blinker_state, "f").subscribers.push(fn);
+        }
+        console.log('subscribe()', __classPrivateFieldGet(this, _Blinker_state, "f").subscribers, __classPrivateFieldGet(this, _Blinker_state, "f").blinks);
+    }
+    unsubscribe(fn) {
+        __classPrivateFieldGet(this, _Blinker_state, "f").subscribers = __classPrivateFieldGet(this, _Blinker_state, "f").subscribers.filter(i => i !== fn);
+        console.log('unsubscribe()', __classPrivateFieldGet(this, _Blinker_state, "f").subscribers, __classPrivateFieldGet(this, _Blinker_state, "f").blinks);
+    }
+}
+exports.Blinker = Blinker;
+_Blinker_initOptions = new WeakMap(), _Blinker_state = new WeakMap(), _Blinker_instances = new WeakSet(), _Blinker_on = function _Blinker_on() {
+    __classPrivateFieldGet(this, _Blinker_state, "f").blinks++;
+    __classPrivateFieldGet(this, _Blinker_state, "f").visible = true;
+    __classPrivateFieldGet(this, _Blinker_state, "f").subscribers.forEach(fn => fn(true));
+    __classPrivateFieldGet(this, _Blinker_state, "f").timeout = setTimeout(() => {
+        __classPrivateFieldGet(this, _Blinker_instances, "m", _Blinker_off).call(this);
+    }, __classPrivateFieldGet(this, _Blinker_state, "f").period * (1 - 1 / __classPrivateFieldGet(this, _Blinker_state, "f").ratio));
+}, _Blinker_off = function _Blinker_off() {
+    __classPrivateFieldGet(this, _Blinker_state, "f").blinks++;
+    __classPrivateFieldGet(this, _Blinker_state, "f").visible = false;
+    __classPrivateFieldGet(this, _Blinker_state, "f").subscribers.forEach(fn => fn(false));
+    __classPrivateFieldGet(this, _Blinker_state, "f").timeout = setTimeout(() => {
+        __classPrivateFieldGet(this, _Blinker_instances, "m", _Blinker_on).call(this);
+    }, __classPrivateFieldGet(this, _Blinker_state, "f").period * (1 / __classPrivateFieldGet(this, _Blinker_state, "f").ratio));
+};

package/lib/Blinker/index.d.ts

@@ -0,0 +1 @@
+export * from './Blinker';

package/lib/Blinker/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Blinker"), exports);

package/lib/BlinkingDigit/BlinkingDigit.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BlinkingDigit: React.MemoExoticComponent<({ blink, ...rest }: BlinkingDigit) => import("react/jsx-runtime").JSX.Element>;

package/lib/BlinkingDigit/BlinkingDigit.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlinkingDigit = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const Digit_1 = require("../Digit");
+const Blinker_1 = require("../Blinker");
+const digitBlinker = new Blinker_1.Blinker(); // all BlinkingDigit's to blink in sync
+exports.BlinkingDigit = react_1.default.memo((_a) => {
+    var { blink } = _a, rest = __rest(_a, ["blink"]);
+    if ((blink === null || blink === void 0 ? void 0 : blink.period) === 0 ||
+        (blink === null || blink === void 0 ? void 0 : blink.ratio) === 0 ||
+        typeof (rest === null || rest === void 0 ? void 0 : rest.off) === 'boolean')
+        return (0, jsx_runtime_1.jsx)(Digit_1.Digit, Object.assign({}, rest)); // no blinker required
+    const [visible, setVisible] = (0, react_1.useState)(digitBlinker.visible);
+    (0, react_1.useEffect)(() => {
+        if (blink === null || blink === void 0 ? void 0 : blink.period)
+            digitBlinker.period = blink.period;
+        if (blink === null || blink === void 0 ? void 0 : blink.ratio)
+            digitBlinker.ratio = blink.ratio;
+        digitBlinker.subscribe(setVisible);
+        return () => digitBlinker.unsubscribe(setVisible);
+    }, [blink === null || blink === void 0 ? void 0 : blink.period, blink === null || blink === void 0 ? void 0 : blink.ratio]);
+    return (0, jsx_runtime_1.jsx)(Digit_1.Digit, Object.assign({}, rest, { off: rest.off || !visible }));
+});

package/lib/BlinkingDigit/index.d.ts

@@ -0,0 +1 @@
+export * from './BlinkingDigit';

package/lib/BlinkingDigit/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./BlinkingDigit"), exports);

package/lib/Digit/Digit.d.ts

@@ -0,0 +1,26 @@
+import React, { CSSProperties } from 'react';
+import { SevenSegmentsValue } from './charToSevenSegments';
+import './digit.css';
+type NumValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+type DigitValue = NumValue | SevenSegmentsValue | 'am' | 'pm' | ':' | '.';
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+type DigitProps = {
+    off?: boolean;
+    shape?: 'arduino' | 'diamond' | 'rect' | 'round' | 'pill';
+    value: DigitValue;
+};
+type SegmentStyle = {
+    color?: CSSProperties['color'];
+    length?: CSSProperties['width'];
+    thickness?: CSSProperties['width'];
+    spacing?: CSSProperties['width'];
+    filament?: CSSProperties['width'];
+    opacityOn?: CSSProperties['opacity'];
+    opacityOff?: CSSProperties['opacity'];
+    opacityDuration?: CSSProperties['transitionDuration'];
+};
+export type Digit = DivProps & DigitProps & {
+    segmentStyle?: SegmentStyle;
+};
+export declare const Digit: ({ segmentStyle, value, ...rest }: Digit) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/Digit/Digit.js

@@ -0,0 +1,89 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Digit = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const charToSevenSegments_1 = require("./charToSevenSegments");
+require("./digit.css");
+const Digit = (_a) => {
+    var { segmentStyle, value } = _a, rest = __rest(_a, ["segmentStyle", "value"]);
+    const type = valueToType(value);
+    const segments = type && valueToSegments(value); // {A: true, ...}
+    const sx = Object.assign({ '--segment-color': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.color, '--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-opacity-duration': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityDuration }, rest.style);
+    if (type === 'digit')
+        return (0, jsx_runtime_1.jsx)(DigitSegments, Object.assign({}, rest, segments, { style: sx }));
+    if (type === 'colon')
+        return (0, jsx_runtime_1.jsx)(ColonSegments, Object.assign({}, rest, segments, { style: sx }));
+    if (type === 'ampm')
+        return (0, jsx_runtime_1.jsx)(AmpmSegments, Object.assign({}, rest, segments, { style: sx }));
+    if (type === 'dot')
+        return (0, jsx_runtime_1.jsx)(DotSegments, Object.assign({}, rest, segments, { style: sx }));
+    console.warn(`Digit.tsx: incompatible value: ${value.toString()}`);
+    return (0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: (0, classnames_1.default)('digit unknown', rest.className) }));
+};
+exports.Digit = Digit;
+const DigitSegments = (_a) => {
+    var { className, off, shape, 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, classnames_1.default)('digit', shapeCx(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(A, off), 'segment A horizontal') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(B, off), 'segment B vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(C, off), 'segment C vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(D, off), 'segment D horizontal') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(E, off), 'segment E vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(F, off), 'segment F vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(G, off), 'segment G horizontal') })] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper on", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(A, off), 'segment A horizontal') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(B, off), 'segment B vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(C, off), 'segment C vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(D, off), 'segment D horizontal') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(E, off), 'segment E vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(F, off), 'segment F vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(G, off), 'segment G horizontal') })] })] })));
+};
+const AmpmSegments = (_a) => {
+    var { className, off, shape, AM, PM } = _a, rest = __rest(_a, ["className", "off", "shape", "AM", "PM"]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('digit ampm', shapeCx(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment AM', onOffCx(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment PM', onOffCx(PM, off)) })] })));
+};
+const ColonSegments = (_a) => {
+    var { className, off, shape = 'pill', D1, D2 } = _a, rest = __rest(_a, ["className", "off", "shape", "D1", "D2"]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('digit colon', shapeCx(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment D1', onOffCx(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment D2', onOffCx(D2, off)) })] })));
+};
+const DotSegments = (_a) => {
+    var { className, off, shape = 'pill', DP } = _a, rest = __rest(_a, ["className", "off", "shape", "DP"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)('digit dot', shapeCx(shape), className) }, rest, { children: (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment DP', onOffCx(DP, off)) }) })));
+};
+const charset = new Set(Object.keys(charToSevenSegments_1.charToSevenSegments));
+function valueToType(v) {
+    const str = v.toString();
+    if (str === ':')
+        return 'colon';
+    if (str === '.')
+        return 'dot';
+    if (str.toLowerCase() === 'am' || str.toLowerCase() === 'pm')
+        return 'ampm';
+    if (charset.has(str))
+        return 'digit';
+    return undefined;
+}
+function valueToSegments(v) {
+    const str = v === null || v === void 0 ? void 0 : v.toString();
+    if (str.toLowerCase() === 'am')
+        return { AM: true };
+    if (str.toLowerCase() === 'pm')
+        return { PM: true };
+    if (str === ':')
+        return { D1: true, D2: true };
+    if (str === '.')
+        return { DP: true };
+    const segments = charToSevenSegments_1.charToSevenSegments[str];
+    return stringToProps(segments);
+}
+// Convert "AB" into object {A: true, B: true}
+const stringToProps = (str) => Object.fromEntries(Array.from(str).map(char => [char, true]));
+const onOffCx = (value, off) => value && !off ? 'on' : 'off';
+const shapeCx = (shape) => {
+    if (!shape) {
+        return null;
+    }
+    return 'shape-' + shape;
+};

package/lib/Digit/charToSevenSegments.d.ts

@@ -0,0 +1,17 @@
+export type SevenSegmentsValue = DigitNumber | DigitSpecial | DigitLetter;
+type DigitNumber = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
+type DigitSpecial = '_' | '-';
+type DigitLetter = 'A' | 'C' | 'E' | 'F' | 'H' | 'J' | 'L' | 'O' | 'P' | 'S' | 'U' | 'Y' | 'c' | 'b' | 'd' | 'h' | 'n' | 'o' | 'r' | 'u';
+/**
+ *
+ *   A
+ * F   B      D2      AM
+ *   G
+ * E   C      D1      PM
+ *   D       DP
+ *
+ */
+export declare const charToSevenSegments: {
+    [keyName in SevenSegmentsValue]: string;
+};
+export {};

package/lib/Digit/charToSevenSegments.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.charToSevenSegments = void 0;
+/**
+ *
+ *   A
+ * F   B      D2      AM
+ *   G
+ * E   C      D1      PM
+ *   D       DP
+ *
+ */
+exports.charToSevenSegments = {
+    _: 'D',
+    '-': 'G',
+    '0': 'ABCDEF',
+    '1': 'BC',
+    '2': 'ABDEG',
+    '3': 'ABCDG',
+    '4': 'BCFG',
+    '5': 'ACDFG',
+    '6': 'ACDEFG',
+    '7': 'ABC',
+    '8': 'ABCDEFG',
+    '9': 'ABCDFG',
+    A: 'ABCEFG',
+    C: 'ADEF',
+    E: 'ADEFG',
+    F: 'AEFG',
+    H: 'BCEFG',
+    J: 'BCDE',
+    L: 'DEF',
+    O: 'ABCDEF',
+    P: 'ABEFG',
+    S: 'ACDFG',
+    U: 'BCDEF',
+    Y: 'BCDFG',
+    c: 'DEG',
+    b: 'CDEFG',
+    d: 'BCDEG',
+    h: 'CEFG',
+    n: 'CEG',
+    o: 'CDEG',
+    r: 'EG',
+    u: 'CDE',
+};

package/lib/Digit/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Digit';
+export * from './charToSevenSegments';

package/lib/Digit/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Digit"), exports);
+__exportStar(require("./charToSevenSegments"), exports);

package/lib/components/Digit/BlinkingDigit.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BlinkingDigit: React.MemoExoticComponent<({ blink, ...rest }: BlinkingDigit) => import("react/jsx-runtime").JSX.Element>;

package/lib/components/Digit/BlinkingDigit.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlinkingDigit = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const Digit_1 = require("./Digit");
+const utils_1 = require("./utils");
+const digitBlinker = new utils_1.Blinker(); // all BlinkingDigit's to blink in sync
+exports.BlinkingDigit = react_1.default.memo((_a) => {
+    var { blink } = _a, rest = __rest(_a, ["blink"]);
+    if ((blink === null || blink === void 0 ? void 0 : blink.period) === 0 ||
+        (blink === null || blink === void 0 ? void 0 : blink.ratio) === 0 ||
+        typeof (rest === null || rest === void 0 ? void 0 : rest.off) === 'boolean')
+        return (0, jsx_runtime_1.jsx)(Digit_1.Digit, Object.assign({}, rest)); // no blinker required
+    const [visible, setVisible] = (0, react_1.useState)(digitBlinker.visible);
+    (0, react_1.useEffect)(() => {
+        if (blink === null || blink === void 0 ? void 0 : blink.period)
+            digitBlinker.period = blink.period;
+        if (blink === null || blink === void 0 ? void 0 : blink.ratio)
+            digitBlinker.ratio = blink.ratio;
+        digitBlinker.subscribe(setVisible);
+        return () => digitBlinker.unsubscribe(setVisible);
+    }, [blink === null || blink === void 0 ? void 0 : blink.period, blink === null || blink === void 0 ? void 0 : blink.ratio]);
+    return (0, jsx_runtime_1.jsx)(Digit_1.Digit, Object.assign({}, rest, { off: rest.off || !visible }));
+});

package/lib/components/Digit/Digit.d.ts

@@ -0,0 +1,25 @@
+import React, { CSSProperties } from 'react';
+import { SevenSegmentsValue } from './utils/charToSevenSegments';
+import './digit.css';
+type NumValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+type DigitValue = NumValue | SevenSegmentsValue | 'am' | 'pm' | ':' | '.';
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+type DigitProps = {
+    off?: boolean;
+    shape?: 'arduino' | 'diamond' | 'rect' | 'round' | 'pill';
+    value: DigitValue;
+};
+type SegmentStyle = {
+    color?: CSSProperties['color'];
+    length?: CSSProperties['width'];
+    thickness?: CSSProperties['width'];
+    spacing?: CSSProperties['width'];
+    filament?: CSSProperties['width'];
+    opacityOn?: CSSProperties['opacity'];
+    opacityOff?: CSSProperties['opacity'];
+};
+export type Digit = DivProps & DigitProps & {
+    segmentStyle?: SegmentStyle;
+};
+export declare const Digit: ({ segmentStyle, value, ...rest }: Digit) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/Digit/Digit.js

@@ -0,0 +1,89 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Digit = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const charToSevenSegments_1 = require("./utils/charToSevenSegments");
+require("./digit.css");
+const Digit = (_a) => {
+    var { segmentStyle, value } = _a, rest = __rest(_a, ["segmentStyle", "value"]);
+    const type = valueToType(value);
+    const segments = type && valueToSegments(value); // {A: true, ...}
+    const sx = Object.assign({ '--segment-color': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.color, '--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 }, rest.style);
+    if (type === 'digit')
+        return (0, jsx_runtime_1.jsx)(DigitSegments, Object.assign({}, rest, segments, { style: sx }));
+    if (type === 'colon')
+        return (0, jsx_runtime_1.jsx)(ColonSegments, Object.assign({}, rest, segments, { style: sx }));
+    if (type === 'ampm')
+        return (0, jsx_runtime_1.jsx)(AmpmSegments, Object.assign({}, rest, segments, { style: sx }));
+    if (type === 'dot')
+        return (0, jsx_runtime_1.jsx)(DotSegments, Object.assign({}, rest, segments, { style: sx }));
+    console.warn(`Digit.tsx: incompatible value: ${value.toString()}`);
+    return (0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: (0, classnames_1.default)('digit unknown', rest.className) }));
+};
+exports.Digit = Digit;
+const DigitSegments = (_a) => {
+    var { className, off, shape, 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, classnames_1.default)('digit', shapeCx(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(A, off), 'segment A horizontal') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(B, off), 'segment B vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(C, off), 'segment C vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(D, off), 'segment D horizontal') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(E, off), 'segment E vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(F, off), 'segment F vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(G, off), 'segment G horizontal') })] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper on", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(A, off), 'segment A horizontal') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(B, off), 'segment B vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(C, off), 'segment C vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(D, off), 'segment D horizontal') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(E, off), 'segment E vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(F, off), 'segment F vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(G, off), 'segment G horizontal') })] })] })));
+};
+const AmpmSegments = (_a) => {
+    var { className, off, shape, AM, PM } = _a, rest = __rest(_a, ["className", "off", "shape", "AM", "PM"]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('digit ampm', shapeCx(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment AM', onOffCx(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment PM', onOffCx(PM, off)) })] })));
+};
+const ColonSegments = (_a) => {
+    var { className, off, shape = 'pill', D1, D2 } = _a, rest = __rest(_a, ["className", "off", "shape", "D1", "D2"]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('digit colon', shapeCx(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment D1', onOffCx(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment D2', onOffCx(D2, off)) })] })));
+};
+const DotSegments = (_a) => {
+    var { className, off, shape = 'pill', DP } = _a, rest = __rest(_a, ["className", "off", "shape", "DP"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)('digit dot', shapeCx(shape), className) }, rest, { children: (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment DP', onOffCx(DP, off)) }) })));
+};
+const charset = new Set(Object.keys(charToSevenSegments_1.charToSevenSegments));
+function valueToType(v) {
+    const str = v.toString();
+    if (str === ':')
+        return 'colon';
+    if (str === '.')
+        return 'dot';
+    if (str.toLowerCase() === 'am' || str.toLowerCase() === 'pm')
+        return 'ampm';
+    if (charset.has(str))
+        return 'digit';
+    return undefined;
+}
+function valueToSegments(v) {
+    const str = v === null || v === void 0 ? void 0 : v.toString();
+    if (str.toLowerCase() === 'am')
+        return { AM: true };
+    if (str.toLowerCase() === 'pm')
+        return { PM: true };
+    if (str === ':')
+        return { D1: true, D2: true };
+    if (str === '.')
+        return { DP: true };
+    const segments = charToSevenSegments_1.charToSevenSegments[str];
+    return stringToProps(segments);
+}
+// Convert "AB" into object {A: true, B: true}
+const stringToProps = (str) => Object.fromEntries(Array.from(str).map(char => [char, true]));
+const onOffCx = (value, off) => value && !off ? 'on' : 'off';
+const shapeCx = (shape) => {
+    if (!shape) {
+        return null;
+    }
+    return 'shape-' + shape;
+};

package/lib/components/Digit/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Digit';
+export * from './BlinkingDigit';
+export * from './utils';

package/lib/components/Digit/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Digit"), exports);
+__exportStar(require("./BlinkingDigit"), exports);
+__exportStar(require("./utils"), exports);

package/lib/components/Digit/utils/Blinker.d.ts

@@ -0,0 +1,31 @@
+type BlinkerSubscriber = (state: BlinkerState['visible']) => void;
+type BlinkerState = {
+    timeout: null | ReturnType<typeof setTimeout>;
+    subscribers: BlinkerSubscriber[];
+    period: number;
+    ratio: number;
+    visible: boolean;
+    blinks: number;
+};
+type BlinkerOptions = {
+    autoRun?: boolean;
+    period?: BlinkerState['period'];
+    ratio?: BlinkerState['ratio'];
+    visible?: BlinkerState['visible'];
+};
+export declare class Blinker {
+    #private;
+    private static instance;
+    constructor(options?: BlinkerOptions);
+    get period(): BlinkerState['period'];
+    get ratio(): BlinkerState['ratio'];
+    get visible(): BlinkerState['visible'];
+    set period(val: BlinkerState['period']);
+    set ratio(val: BlinkerState['ratio']);
+    set visible(val: BlinkerState['visible']);
+    start(visible?: boolean): void;
+    stop(): void;
+    subscribe(fn: BlinkerSubscriber): void;
+    unsubscribe(fn: BlinkerSubscriber): void;
+}
+export {};

package/lib/components/Digit/utils/Blinker.js

@@ -0,0 +1,107 @@
+"use strict";
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Blinker_instances, _Blinker_initOptions, _Blinker_state, _Blinker_on, _Blinker_off;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Blinker = void 0;
+const defaultOptions = {
+    autoRun: true,
+    period: 1000,
+    ratio: 1,
+    visible: true,
+};
+class Blinker {
+    constructor(options = defaultOptions) {
+        _Blinker_instances.add(this);
+        _Blinker_initOptions.set(this, defaultOptions); // store options
+        _Blinker_state.set(this, {
+            timeout: null,
+            subscribers: [],
+            period: defaultOptions.period,
+            ratio: defaultOptions.ratio,
+            visible: defaultOptions.visible,
+            blinks: 0,
+        });
+        if (!Blinker.instance) {
+            Blinker.instance = this;
+            __classPrivateFieldSet(this, _Blinker_initOptions, Object.assign(Object.assign({}, defaultOptions), options), "f");
+            __classPrivateFieldGet(this, _Blinker_state, "f").period = __classPrivateFieldGet(this, _Blinker_initOptions, "f").period;
+            __classPrivateFieldGet(this, _Blinker_state, "f").ratio = __classPrivateFieldGet(this, _Blinker_initOptions, "f").ratio;
+            __classPrivateFieldGet(this, _Blinker_state, "f").visible = __classPrivateFieldGet(this, _Blinker_initOptions, "f").visible;
+            if (__classPrivateFieldGet(this, _Blinker_initOptions, "f").autoRun)
+                this.start();
+        }
+        return Blinker.instance;
+    }
+    get period() {
+        return __classPrivateFieldGet(this, _Blinker_state, "f").period;
+    }
+    get ratio() {
+        return __classPrivateFieldGet(this, _Blinker_state, "f").ratio;
+    }
+    get visible() {
+        return __classPrivateFieldGet(this, _Blinker_state, "f").visible;
+    }
+    set period(val) {
+        if (val !== __classPrivateFieldGet(this, _Blinker_state, "f").period && val !== 0) {
+            __classPrivateFieldGet(this, _Blinker_state, "f").period = Math.abs(val);
+            this.start();
+        }
+    }
+    set ratio(val) {
+        if (val !== __classPrivateFieldGet(this, _Blinker_state, "f").ratio && val !== 0) {
+            __classPrivateFieldGet(this, _Blinker_state, "f").ratio = Math.abs(val);
+            this.start();
+        }
+    }
+    set visible(val) {
+        if (val !== __classPrivateFieldGet(this, _Blinker_state, "f").visible) {
+            __classPrivateFieldGet(this, _Blinker_state, "f").visible = val;
+            this.start();
+        }
+    }
+    start(visible = __classPrivateFieldGet(this, _Blinker_state, "f").visible) {
+        if (__classPrivateFieldGet(this, _Blinker_state, "f").timeout)
+            this.stop();
+        visible ? __classPrivateFieldGet(this, _Blinker_instances, "m", _Blinker_on).call(this) : __classPrivateFieldGet(this, _Blinker_instances, "m", _Blinker_off).call(this); // start blinking
+    }
+    stop() {
+        __classPrivateFieldGet(this, _Blinker_state, "f").timeout && clearTimeout(__classPrivateFieldGet(this, _Blinker_state, "f").timeout);
+        __classPrivateFieldGet(this, _Blinker_state, "f").timeout = null;
+    }
+    subscribe(fn) {
+        if (!__classPrivateFieldGet(this, _Blinker_state, "f").subscribers.includes(fn)) {
+            __classPrivateFieldGet(this, _Blinker_state, "f").subscribers.push(fn);
+        }
+        console.log('subscribe()', __classPrivateFieldGet(this, _Blinker_state, "f").subscribers, __classPrivateFieldGet(this, _Blinker_state, "f").blinks);
+    }
+    unsubscribe(fn) {
+        __classPrivateFieldGet(this, _Blinker_state, "f").subscribers = __classPrivateFieldGet(this, _Blinker_state, "f").subscribers.filter(i => i !== fn);
+        console.log('unsubscribe()', __classPrivateFieldGet(this, _Blinker_state, "f").subscribers, __classPrivateFieldGet(this, _Blinker_state, "f").blinks);
+    }
+}
+exports.Blinker = Blinker;
+_Blinker_initOptions = new WeakMap(), _Blinker_state = new WeakMap(), _Blinker_instances = new WeakSet(), _Blinker_on = function _Blinker_on() {
+    __classPrivateFieldGet(this, _Blinker_state, "f").blinks++;
+    __classPrivateFieldGet(this, _Blinker_state, "f").visible = true;
+    __classPrivateFieldGet(this, _Blinker_state, "f").subscribers.forEach(fn => fn(true));
+    __classPrivateFieldGet(this, _Blinker_state, "f").timeout = setTimeout(() => {
+        __classPrivateFieldGet(this, _Blinker_instances, "m", _Blinker_off).call(this);
+    }, __classPrivateFieldGet(this, _Blinker_state, "f").period * __classPrivateFieldGet(this, _Blinker_state, "f").ratio);
+}, _Blinker_off = function _Blinker_off() {
+    __classPrivateFieldGet(this, _Blinker_state, "f").blinks++;
+    __classPrivateFieldGet(this, _Blinker_state, "f").visible = false;
+    __classPrivateFieldGet(this, _Blinker_state, "f").subscribers.forEach(fn => fn(false));
+    __classPrivateFieldGet(this, _Blinker_state, "f").timeout = setTimeout(() => {
+        __classPrivateFieldGet(this, _Blinker_instances, "m", _Blinker_on).call(this);
+    }, __classPrivateFieldGet(this, _Blinker_state, "f").period / __classPrivateFieldGet(this, _Blinker_state, "f").ratio);
+};

package/lib/components/Digit/utils/blinkSingleton.d.ts

@@ -0,0 +1,23 @@
+type BlinkSubscriber = (state: BlinkSingleton['visible']) => void;
+type BlinkSingletonOptions = {
+    autoRun?: boolean;
+    period?: BlinkSingleton['period'];
+    ratio?: BlinkSingleton['ratio'];
+    visible?: BlinkSingleton['visible'];
+};
+export type BlinkSingleton = {
+    period: number;
+    ratio: number;
+    visible: boolean;
+    subscribe: (fn: BlinkSubscriber) => void;
+    unsubscribe: (fn: BlinkSubscriber) => void;
+    run: (opts?: BlinkSingletonOptions) => void;
+    stop: () => void;
+};
+export declare const blinkSingleton: (opts?: {
+    autoRun: boolean;
+    period: number;
+    ratio: number;
+    visible: boolean;
+}) => BlinkSingleton;
+export {};

package/lib/components/Digit/utils/blinkSingleton.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blinkSingleton = void 0;
+const defaultOpts = {
+    autoRun: true,
+    period: 1000,
+    ratio: 1,
+    visible: true,
+};
+const handler = {
+    timeout: null,
+    subscribers: [],
+    on(i) {
+        i.visible = true;
+        this.subscribers.forEach(fn => fn(true));
+        this.timeout = setTimeout(() => {
+            this.off(i);
+        }, i.period * i.ratio);
+    },
+    off(i) {
+        i.visible = false;
+        this.subscribers.forEach(fn => fn(false));
+        this.timeout = setTimeout(() => {
+            this.on(i);
+        }, i.period / i.ratio);
+    },
+};
+const blinkSingleton = (opts = defaultOpts) => {
+    const options = Object.assign(Object.assign({}, defaultOpts), opts);
+    const instance = {
+        period: options.period,
+        visible: options.visible,
+        ratio: options.ratio,
+        run(opts2 = options) {
+            const options2 = Object.assign(Object.assign({}, options), opts2);
+            if (handler.timeout) {
+                if (this.period === options2.period &&
+                    this.visible === options2.visible &&
+                    this.ratio === options2.ratio)
+                    return; // if nothing has changed, keep running
+                this.stop();
+            }
+            this.period = options2.period;
+            this.ratio = options2.ratio;
+            this.visible = options2.visible;
+            this.visible ? handler.on(this) : handler.off(this); // run here
+        },
+        stop() {
+            handler.timeout && clearTimeout(handler.timeout);
+            handler.timeout = null;
+        },
+        subscribe(fn) {
+            if (!handler.subscribers.includes(fn)) {
+                handler.subscribers.push(fn);
+            }
+        },
+        unsubscribe(fn) {
+            handler.subscribers.filter(i => i !== fn);
+        },
+    };
+    options.autoRun && instance.run();
+    return instance;
+};
+exports.blinkSingleton = blinkSingleton;

package/lib/components/Digit/utils/charToSevenSegments.d.ts

@@ -0,0 +1,17 @@
+export type SevenSegmentsValue = DigitNumber | DigitSpecial | DigitLetter;
+type DigitNumber = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
+type DigitSpecial = '_' | '-';
+type DigitLetter = 'A' | 'C' | 'E' | 'F' | 'H' | 'J' | 'L' | 'O' | 'P' | 'S' | 'U' | 'Y' | 'c' | 'b' | 'd' | 'h' | 'n' | 'o' | 'r' | 'u';
+/**
+ *
+ *   A
+ * F   B      D2      AM
+ *   G
+ * E   C      D1      PM
+ *   D       DP
+ *
+ */
+export declare const charToSevenSegments: {
+    [keyName in SevenSegmentsValue]: string;
+};
+export {};

package/lib/components/Digit/utils/charToSevenSegments.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.charToSevenSegments = void 0;
+/**
+ *
+ *   A
+ * F   B      D2      AM
+ *   G
+ * E   C      D1      PM
+ *   D       DP
+ *
+ */
+exports.charToSevenSegments = {
+    _: 'D',
+    '-': 'G',
+    '0': 'ABCDEF',
+    '1': 'BC',
+    '2': 'ABDEG',
+    '3': 'ABCDG',
+    '4': 'BCFG',
+    '5': 'ACDFG',
+    '6': 'ACDEFG',
+    '7': 'ABC',
+    '8': 'ABCDEFG',
+    '9': 'ABCDFG',
+    A: 'ABCEFG',
+    C: 'ADEF',
+    E: 'ADEFG',
+    F: 'AEFG',
+    H: 'BCEFG',
+    J: 'BCDE',
+    L: 'DEF',
+    O: 'ABCDEF',
+    P: 'ABEFG',
+    S: 'ACDFG',
+    U: 'BCDEF',
+    Y: 'BCDFG',
+    c: 'DEG',
+    b: 'CDEFG',
+    d: 'BCDEG',
+    h: 'CEFG',
+    n: 'CEG',
+    o: 'CDEG',
+    r: 'EG',
+    u: 'CDE',
+};

package/lib/components/Digit/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Blinker';
+export * from './charToSevenSegments';

package/lib/components/Digit/utils/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Blinker"), exports);
+__exportStar(require("./charToSevenSegments"), exports);

package/lib/components/index.d.ts

@@ -0,0 +1 @@
+export * from './Digit';

package/lib/components/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Digit"), exports);

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Digit';
+export * from './BlinkingDigit';
+export * from './Blinker';

package/lib/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Digit"), exports);
+__exportStar(require("./BlinkingDigit"), exports);
+__exportStar(require("./Blinker"), exports);

package/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "react-led-digit",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./lib/index.js",
+  "files": [
+    "lib/**/*"
+  ],
+  "scripts": {
+    "build": "tsc --project tsconfig.build.json",
+    "clean": "rm -rf ./lib/",
+    "lint": "eslint ./src/ --fix",
+    "semantic-release": "semantic-release",
+    "test:watch": "jest --watch",
+    "test": "jest --coverage",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yakunins/react-digit.git"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Sergey Yakunin",
+    "email": "s@yakunins.com",
+    "url": "https://github.com/yakunins"
+  },
+  "engines": {
+    "node": ">=12.0"
+  },
+  "keywords": [
+    "react",
+    "led",
+    "digit",
+    "component",
+    "7-segment",
+    "digital",
+    "clock"
+  ],
+  "homepage": "https://github.com/yakunins/real-clock",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
+    "@storybook/addon-essentials": "^8.2.4",
+    "@storybook/addon-interactions": "^8.2.4",
+    "@storybook/addon-links": "^8.2.4",
+    "@storybook/addon-onboarding": "^8.2.4",
+    "@storybook/blocks": "^8.2.4",
+    "@storybook/react": "^8.2.4",
+    "@storybook/react-vite": "^8.2.4",
+    "@storybook/test": "^8.2.4",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^18.19.41",
+    "@typescript-eslint/eslint-plugin": "^7.16.1",
+    "@typescript-eslint/parser": "^7.16.1",
+    "classnames": "^2.5.1",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-storybook": "^0.8.0",
+    "jest": "^29.7.0",
+    "lint-staged": "^15.2.7",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "semantic-release": "^22.0.12",
+    "storybook": "^8.2.4",
+    "ts-jest": "^29.2.3",
+    "typescript": "^5.5.3"
+  },
+  "lint-staged": {
+    "*.ts": "eslint --cache --cache-location .eslintcache --fix"
+  },
+  "release": {
+    "branches": [
+      "main"
+    ],
+    "plugins": [
+      [
+        "@semantic-release/commit-analyzer",
+        {
+          "preset": "conventionalcommits",
+          "releaseRules": [
+            {
+              "type": "build",
+              "scope": "deps",
+              "release": "patch"
+            }
+          ]
+        }
+      ],
+      [
+        "@semantic-release/release-notes-generator",
+        {
+          "preset": "conventionalcommits",
+          "presetConfig": {
+            "types": [
+              {
+                "type": "feat",
+                "section": "Features"
+              },
+              {
+                "type": "fix",
+                "section": "Bug Fixes"
+              },
+              {
+                "type": "build",
+                "section": "Dependencies and Other Build Updates",
+                "hidden": false
+              }
+            ]
+          }
+        }
+      ],
+      "@semantic-release/npm",
+      "@semantic-release/github"
+    ]
+  }
+}