react-led-digit 0.0.9 → 0.0.10

package/lib/Digit/Digit.js

@@ -17,11 +17,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Digit = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const UnstyledDigit_1 = require("./UnstyledDigit");
-const useStyleInjection_1 = __importDefault(require("./useStyleInjection"));
-const digit_css_js_1 = __importDefault(require("./digit.css.js"));
+const useStyleInjector_1 = __importDefault(require("./useStyleInjector"));
+const digit_css_generated_js_1 = __importDefault(require("./digit.css.generated.js"));
 const Digit = (_a) => {
     var rest = __rest(_a, []);
-    const scopeAttribute = (0, useStyleInjection_1.default)(digit_css_js_1.default.content, digit_css_js_1.default.hash, []);
-    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)) })));
+    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))
+        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));
 };
 exports.Digit = Digit;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { StoryObj } from '@storybook/react';
 import { Digit } from '../';
 declare const meta: {

package/lib/Digit/Digit.stories.js

@@ -98,9 +98,9 @@ const BlinkingDigitTest = () => {
           input { border: 1px solid black; border-radius: .5rem; padding: .5rem .25rem;}
           button { border: none; border-radius: .5rem; padding: .5rem 1rem;}
           button, input, p { font-size: 100%; font-family: sans-serif; margin: .25rem;}
-        ` }), (0, jsx_runtime_1.jsxs)("p", { children: ["charset: ", Array.from(charset).join(', ')] }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "digit", ref: input, onChange: handleChange, maxLength: 1 }), (0, jsx_runtime_1.jsx)("button", { onClick: addDigit, children: "Add digit" }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.Digit, { value: "8", segmentStyle: { thickness: '.35rem' } }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "b" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: ":", blinkOptions: {
+        ` }), (0, jsx_runtime_1.jsx)("p", { children: "asynchronous blinking example (blinkOptions.sync = false)" }), (0, jsx_runtime_1.jsxs)("p", { children: ["charset: ", Array.from(charset).join(', ')] }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "digit", ref: input, onChange: handleChange, maxLength: 1 }), (0, jsx_runtime_1.jsx)("button", { onClick: addDigit, children: "Add digit" }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "8", segmentStyle: { thickness: '.35rem' } }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "b" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: ":", blinkOptions: {
                             period: 2000,
-                            ratio: 3,
+                            ratio: 1 / 3,
                         } }), dgts.split('').map((char, idx) => ((0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: char, onClick: () => removeDigit(idx), segmentStyle: {
                             transitionDuration: '0.5s',
                         }, blinkOptions: { sync: false } }, idx)))] })] }));

package/lib/Digit/UnstyledDigit.js

@@ -21,19 +21,20 @@ const charToSevenSegments_1 = require("./charToSevenSegments");
 const components_1 = require("./components");
 const Digit = (_a) => {
     var { segmentStyle, value } = _a, rest = __rest(_a, ["segmentStyle", "value"]);
+    const v = value.toString();
     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-color-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.colorOff, '--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-transition-duration': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.transitionDuration, '--segment-corner-shift': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.cornerShift }, rest.style);
     if (type === 'digit')
-        return (0, jsx_runtime_1.jsx)(components_1.DigitSegments, Object.assign({}, rest, segments, { style: sx }));
+        return (0, jsx_runtime_1.jsx)(components_1.DigitSegments, Object.assign({ "aria-label": v }, rest, segments, { style: sx }));
     if (type === 'colon')
-        return (0, jsx_runtime_1.jsx)(components_1.ColonSegments, Object.assign({}, rest, segments, { style: sx }));
+        return (0, jsx_runtime_1.jsx)(components_1.ColonSegments, Object.assign({ "aria-label": v }, rest, segments, { style: sx }));
     if (type === 'ampm')
-        return (0, jsx_runtime_1.jsx)(components_1.AmpmSegments, Object.assign({}, rest, segments, { style: sx }));
+        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({}, rest, segments, { style: sx }));
+        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()}`);
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: (0, clsx_1.default)('digit unknown', rest.className) }));
+    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;
 const charset = new Set(Object.keys(charToSevenSegments_1.charToSevenSegments));

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

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react';
+import { UnstyledDigit } from '..';
+declare const meta: {
+    title: string;
+    component: ({ segmentStyle, value, ...rest }: UnstyledDigit) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        off: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const UnstyledDigits: Story;

package/lib/Digit/UnstyledDigit.stories.js

@@ -0,0 +1,57 @@
+"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;
+};
+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,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen', // https://storybook.js.org/docs/configure/story-layout
+    },
+    argTypes: {
+        off: { control: 'boolean' },
+    },
+};
+exports.default = meta;
+const grid = {
+    display: 'flex',
+    gap: '.35rem',
+    padding: '1rem',
+    placeItems: 'center center',
+};
+const CustomDigit = (_a) => {
+    var rest = __rest(_a, []);
+    return ((0, jsx_runtime_1.jsx)(__1.UnstyledDigit, Object.assign({}, rest, { shape: "pill", segmentStyle: {
+            thickness: '.25rem',
+            length: '1.5rem',
+            spacing: '0.25rem',
+            filament: '.0625rem',
+        } })));
+};
+const UnstyledDigitTest = () => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: 0, className: "test" }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: 1, shape: "round", segmentStyle: {
+                            thickness: '.35rem',
+                            color: 'green',
+                            colorOff: 'blue',
+                        } }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: 2, shape: "pill", segmentStyle: { thickness: '.5rem' } }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: 3, shape: "rect", segmentStyle: { spacing: '.25rem' } }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: 4, style: { color: 'red' } }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: ":" }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: 5 }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: 6 }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: 7 }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: 8, off: true }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: 9 }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: "." }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: "pm" })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: "A" }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: "C" }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: "E" }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: "F" }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: "G" }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: "H" }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: "J" }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: "L" }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: "O" }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: "P" }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: "S" }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: "U" }), (0, jsx_runtime_1.jsx)(__1.UnstyledDigit, { value: "Y" })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(CustomDigit, { value: 0 }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: 1 }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: ":" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: 2 }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: 3 }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "am" })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(CustomDigit, { value: "A" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "C" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "E" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "F" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "H" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "J" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "L" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "O" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "P" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "U" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "Y" })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(CustomDigit, { value: "c" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "b" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "d" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "h" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "n" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "o" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "r" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "u" })] })] }));
+};
+exports.UnstyledDigits = {
+    args: {
+        value: '0',
+    },
+    render: UnstyledDigitTest,
+};

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.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: "hidden-value", 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.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: "hidden-value", 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.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: "hidden-value", 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)("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: "hidden-value", 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

@@ -51,6 +51,10 @@
     min-width: var(--thick);
   }
 
+  .hidden-value {
+    display: none;
+  }
+
   .opacity-wrapper {
     position: absolute;
     width: 100%;

package/lib/Digit/{digit.css.js → digit.css.generated.js}

@@ -2,7 +2,7 @@
 
 const css = {
   src: `src/Digit/digit.css`,
-  hash: `21rs68w6m0r`,
+  hash: `3775688054381318`,
   content: `
 /**
  *    A
@@ -57,6 +57,10 @@ const css = {
     min-width: var(--thick);
   }
 
+  .hidden-value {
+    display: none;
+  }
+
   .opacity-wrapper {
     position: absolute;
     width: 100%;

package/lib/Digit/useStyleInjector.d.ts

@@ -0,0 +1,22 @@
+type Style = {
+    id: string;
+    content: string;
+};
+type InjectorOptions = {
+    scopeID?: string;
+    scopeAttributePrefix?: string;
+    selector?: string;
+};
+declare const useStyleInjector: (css: string, dependencies?: never[], options?: InjectorOptions) => {
+    [x: string]: boolean | undefined;
+};
+export declare class StyleInjector {
+    #private;
+    private static instance;
+    constructor();
+    increase(s: Style): void;
+    reduce(s: Style): void;
+    count(s: Style): number;
+    generateID: (s: string) => string;
+}
+export default useStyleInjector;

package/lib/Digit/useStyleInjector.js

@@ -0,0 +1,98 @@
+"use strict";
+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 _StyleInjector_styles;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyleInjector = void 0;
+const react_1 = require("react");
+const defaultInjectorOptions = {
+    scopeAttributePrefix: 'data-style-scope-',
+    selector: 'head',
+};
+// Runtime style injection
+const useStyleInjector = (css, dependencies = [], options) => {
+    const injector = new StyleInjector(); // singleton
+    const o = Object.assign(Object.assign({}, defaultInjectorOptions), options);
+    const id = (o === null || o === void 0 ? void 0 : o.scopeID) || injector.generateID(css);
+    const scopeAttribute = `${o.scopeAttributePrefix}${id}`;
+    const style = {
+        id: `css_id__${id}`,
+        content: o.scopeID ? wrapWithScope(css, scopeAttribute) : css,
+    };
+    (0, react_1.useInsertionEffect)(() => {
+        injector.increase(style);
+        return () => injector.reduce(style);
+    }, dependencies);
+    return {
+        [scopeAttribute]: o.scopeID ? true : undefined,
+    };
+};
+// Inject style into head if it
+class StyleInjector {
+    constructor() {
+        _StyleInjector_styles.set(this, new Map());
+        this.generateID = (s) => cyrb53string(s);
+        if (!StyleInjector.instance) {
+            StyleInjector.instance = this;
+        }
+        return StyleInjector.instance; // singleton
+    }
+    increase(s) {
+        if (this.count(s) === 0)
+            document.head.appendChild(createStyleElement(s));
+        if (this.count(s) >= 0)
+            __classPrivateFieldGet(this, _StyleInjector_styles, "f").set(s.id, this.count(s) + 1);
+    }
+    reduce(s) {
+        var _a;
+        if (this.count(s) > 0)
+            __classPrivateFieldGet(this, _StyleInjector_styles, "f").set(s.id, this.count(s) - 1);
+        if (this.count(s) === 0)
+            (_a = document.head.querySelector(`#${s.id}`)) === null || _a === void 0 ? void 0 : _a.remove();
+    }
+    count(s) {
+        if (__classPrivateFieldGet(this, _StyleInjector_styles, "f").has(s.id))
+            return __classPrivateFieldGet(this, _StyleInjector_styles, "f").get(s.id);
+        return 0;
+    }
+}
+exports.StyleInjector = StyleInjector;
+_StyleInjector_styles = new WeakMap();
+const createStyleElement = (style) => {
+    const el = document.createElement('style');
+    el.innerHTML = style.content;
+    if (style.id !== '')
+        el.id = style.id;
+    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; }` +
+        `[${scopeAttribute}] {` +
+        `${css}` +
+        `}`;
+    return isolated;
+};
+// https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript
+const cyrb53string = (str, seed = 0) => {
+    let h1 = 0xdeadbeef ^ seed, h2 = 0x41c6ce57 ^ seed;
+    for (let i = 0, ch; i < str.length; i++) {
+        ch = str.charCodeAt(i);
+        h1 = Math.imul(h1 ^ ch, 2654435761);
+        h2 = Math.imul(h2 ^ ch, 1597334677);
+    }
+    h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507);
+    h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+    h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507);
+    h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+    const num = 4294967296 * (2097151 & h2) + (h1 >>> 0);
+    return num.toString(36);
+};
+exports.default = useStyleInjector;

package/package.json

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

package/lib/Digit/useStyleInjection.d.ts

@@ -1,16 +0,0 @@
-type Style = {
-    id: string;
-    content: string;
-};
-declare const useHeadStyleInjection: (css: string, cssHash: string, dependencies?: never[], scoped?: boolean) => {
-    [x: string]: boolean | undefined;
-};
-export declare class StyleInjector {
-    #private;
-    private static instance;
-    constructor();
-    add(s: Style): void;
-    remove(s: Style): void;
-    has(s: Style): boolean;
-}
-export default useHeadStyleInjection;

package/lib/Digit/useStyleInjection.js

@@ -1,87 +0,0 @@
-"use strict";
-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 _StyleInjector_state;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyleInjector = void 0;
-const react_1 = require("react");
-const scopeAttributePrefix = 'data-style-scope-';
-// Runtime style injection
-const useHeadStyleInjection = (css, cssHash, dependencies = [], scoped = true // isolate css behind @scope
-) => {
-    const injector = new StyleInjector(); // singleton!
-    const scopeAttribute = `${scopeAttributePrefix}-${cssHash}`;
-    const style = {
-        id: `css_id__${cssHash}`,
-        content: scoped ? wrapWithScope(css, scopeAttribute) : css,
-    };
-    (0, react_1.useInsertionEffect)(() => {
-        injector.add(style);
-        return () => injector.remove(style);
-    }, dependencies);
-    return {
-        [scopeAttribute]: scoped ? true : undefined,
-    };
-};
-class StyleInjector {
-    constructor() {
-        _StyleInjector_state.set(this, new Map());
-        if (!StyleInjector.instance) {
-            StyleInjector.instance = this;
-        }
-        return StyleInjector.instance;
-    }
-    add(s) {
-        if (this.has(s)) {
-            const count = __classPrivateFieldGet(this, _StyleInjector_state, "f").get(s.id) + 1;
-            __classPrivateFieldGet(this, _StyleInjector_state, "f").set(s.id, count);
-        }
-        else {
-            __classPrivateFieldGet(this, _StyleInjector_state, "f").set(s.id, 1);
-        }
-        if (__classPrivateFieldGet(this, _StyleInjector_state, "f").get(s.id) === 1) {
-            document.head.appendChild(createStyleElement(s));
-        }
-    }
-    remove(s) {
-        var _a;
-        if (this.has(s)) {
-            const count = __classPrivateFieldGet(this, _StyleInjector_state, "f").get(s.id) - 1;
-            __classPrivateFieldGet(this, _StyleInjector_state, "f").set(s.id, count);
-        }
-        else {
-            console.warn(`(at useStyleInjection.ts) unable to remove style: ${s.id}`);
-        }
-        if (__classPrivateFieldGet(this, _StyleInjector_state, "f").get(s.id) === 0) {
-            (_a = document.head.querySelector(`#${s.id}`)) === null || _a === void 0 ? void 0 : _a.remove();
-        }
-    }
-    has(s) {
-        return __classPrivateFieldGet(this, _StyleInjector_state, "f").has(s.id);
-    }
-}
-exports.StyleInjector = StyleInjector;
-_StyleInjector_state = new WeakMap();
-const createStyleElement = (style) => {
-    const el = document.createElement('style');
-    el.innerHTML = style.content;
-    if (style.id !== '')
-        el.id = style.id;
-    return el;
-};
-const wrapWithScope = (css, scopeAttribute) => {
-    // unused bc @scope at-rule does not work in Firefox
-    const scoped = `@scope ([${scopeAttribute}]) {` +
-        `:scope { display: contents; }` +
-        `${css}` +
-        `}`;
-    const isolated = `[${scopeAttribute}] { display: contents; }` +
-        `[${scopeAttribute}] {` +
-        `${css}` +
-        `}`;
-    return isolated;
-};
-exports.default = useHeadStyleInjection;