react-led-digit 0.0.5 → 0.0.7

package/lib/BlinkingDigit/BlinkingDigit.js

@@ -40,7 +40,7 @@ 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 classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const Digit_1 = require("../Digit");
 const Blinker_1 = require("../Blinker");
 const blinker = new Blinker_1.Blinker(); // singleton makes all BlinkingDigit's to blink synchronoulsy
@@ -58,6 +58,6 @@ exports.BlinkingDigit = react_1.default.memo((_a) => {
     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')
-        return (0, jsx_runtime_1.jsx)(Digit_1.Digit, Object.assign({}, rest, { className: (0, classnames_1.default)('blinking', className) })); // no blinker required
-    return ((0, jsx_runtime_1.jsx)(Digit_1.Digit, Object.assign({}, rest, { className: (0, classnames_1.default)('blinking', className), off: rest.off || !visible })));
+        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.d.ts

@@ -1,27 +1,3 @@
-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?: 'default' | 'rect' | 'round' | 'pill';
-    value: DigitValue;
-};
-type SegmentStyle = {
-    color?: CSSProperties['color'];
-    colorOff?: CSSProperties['color'];
-    length?: CSSProperties['width'];
-    thickness?: CSSProperties['width'];
-    spacing?: CSSProperties['width'];
-    filament?: CSSProperties['width'];
-    opacityOn?: CSSProperties['opacity'];
-    opacityOff?: CSSProperties['opacity'];
-    transitionDuration?: CSSProperties['transitionDuration'];
-};
-export type Digit = DivProps & DigitProps & {
-    segmentStyle?: SegmentStyle;
-};
-export declare const Digit: ({ segmentStyle, value, ...rest }: Digit) => import("react/jsx-runtime").JSX.Element;
-export {};
+import { Digit as UnstyledDigit } from './UnstyledDigit';
+export type Digit = UnstyledDigit;
+export declare const Digit: ({ ...rest }: Digit) => import("react/jsx-runtime").JSX.Element;

package/lib/Digit/Digit.js

@@ -16,74 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (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 UnstyledDigit_1 = require("./UnstyledDigit");
+const useStyleInjection_1 = __importDefault(require("./useStyleInjection"));
+const digit_css_js_1 = __importDefault(require("./digit.css.js"));
 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-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 }, 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) }));
+    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)) })));
 };
 exports.Digit = Digit;
-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, 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)('segment A horizontal', onOffCx(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment B vertical', onOffCx(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment C vertical', onOffCx(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment D horizontal', onOffCx(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment E vertical', onOffCx(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment F vertical', onOffCx(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment G horizontal', onOffCx(G, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment A horizontal', onOffCx(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment B vertical', onOffCx(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment C vertical', onOffCx(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment D horizontal', onOffCx(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment E vertical', onOffCx(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment F vertical', onOffCx(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment G horizontal', onOffCx(G, off)) })] })] })));
-};
-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, classnames_1.default)('digit ampm', 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)('segment AM', onOffCx(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment PM', onOffCx(PM, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('opacity-wrapper on', off && 'off'), 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 = 'default', 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.jsxs)("div", { className: "opacity-wrapper off", 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)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('opacity-wrapper on', off && 'off'), 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 = 'default', DP } = _a, rest = __rest(_a, ["className", "off", "shape", "DP"]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('digit dot', shapeCx(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("div", { className: "opacity-wrapper off", children: (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment DP', onOffCx(DP, off)) }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('opacity-wrapper on', off && 'off'), 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/UnstyledDigit.d.ts

@@ -0,0 +1,26 @@
+import React, { 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' | ':' | '.';
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+export type DigitProps = {
+    off?: boolean;
+    shape?: 'default' | 'rect' | 'round' | 'pill';
+    value: DigitValue;
+};
+type SegmentStyle = {
+    color?: CSSProperties['color'];
+    colorOff?: CSSProperties['color'];
+    length?: CSSProperties['width'];
+    thickness?: CSSProperties['width'];
+    spacing?: CSSProperties['width'];
+    filament?: CSSProperties['width'];
+    opacityOn?: CSSProperties['opacity'];
+    opacityOff?: CSSProperties['opacity'];
+    transitionDuration?: 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/UnstyledDigit.js

@@ -0,0 +1,66 @@
+"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 clsx_1 = __importDefault(require("clsx"));
+const charToSevenSegments_1 = require("./charToSevenSegments");
+const components_1 = require("./components");
+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-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 }, rest.style);
+    if (type === 'digit')
+        return (0, jsx_runtime_1.jsx)(components_1.DigitSegments, Object.assign({}, rest, segments, { style: sx }));
+    if (type === 'colon')
+        return (0, jsx_runtime_1.jsx)(components_1.ColonSegments, Object.assign({}, rest, segments, { style: sx }));
+    if (type === 'ampm')
+        return (0, jsx_runtime_1.jsx)(components_1.AmpmSegments, Object.assign({}, rest, segments, { style: sx }));
+    if (type === 'dot')
+        return (0, jsx_runtime_1.jsx)(components_1.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, clsx_1.default)('digit unknown', rest.className) }));
+};
+exports.Digit = Digit;
+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]));

package/lib/Digit/charToSevenSegments.d.ts

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

package/lib/Digit/charToSevenSegments.js

@@ -2,13 +2,11 @@
 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',

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

@@ -0,0 +1,11 @@
+import { DigitProps } from '../UnstyledDigit';
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+export type AmpmSegments = DivProps & {
+    className?: string;
+    off?: DigitProps['off'];
+    shape?: DigitProps['shape'];
+    AM?: boolean;
+    PM?: boolean;
+};
+export declare const AmpmSegments: ({ className, off, shape, AM, PM, ...rest }: AmpmSegments) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/Digit/components/AmpmSegments.js

@@ -0,0 +1,25 @@
+"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.AmpmSegments = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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)) })] })] })));
+};
+exports.AmpmSegments = AmpmSegments;

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

@@ -0,0 +1,11 @@
+import { DigitProps } from '../UnstyledDigit';
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+export type ColonSegments = DivProps & {
+    className?: string;
+    off?: DigitProps['off'];
+    shape?: DigitProps['shape'];
+    D1?: boolean;
+    D2?: boolean;
+};
+export declare const ColonSegments: ({ className, off, shape, D1, D2, ...rest }: ColonSegments) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/Digit/components/ColonSegments.js

@@ -0,0 +1,25 @@
+"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.ColonSegments = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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)) })] })] })));
+};
+exports.ColonSegments = ColonSegments;

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

@@ -0,0 +1,16 @@
+import { DigitProps } from '../UnstyledDigit';
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+export type DigitSegments = DivProps & {
+    className?: string;
+    off?: DigitProps['off'];
+    shape?: DigitProps['shape'];
+    A?: boolean;
+    B?: boolean;
+    C?: boolean;
+    D?: boolean;
+    E?: boolean;
+    F?: boolean;
+    G?: boolean;
+};
+export declare const DigitSegments: ({ className, off, shape, A, B, C, D, E, F, G, ...rest }: DigitSegments) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/Digit/components/DigitSegments.js

@@ -0,0 +1,25 @@
+"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.DigitSegments = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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)) })] })] })));
+};
+exports.DigitSegments = DigitSegments;

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

@@ -0,0 +1,10 @@
+import { DigitProps } from '../UnstyledDigit';
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+export type DotSegments = DivProps & {
+    className?: string;
+    off?: DigitProps['off'];
+    shape?: DigitProps['shape'];
+    DP?: boolean;
+};
+export declare const DotSegments: ({ className, off, shape, DP, ...rest }: DotSegments) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/Digit/components/DotSegments.js

@@ -0,0 +1,25 @@
+"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.DotSegments = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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)) }) })] })));
+};
+exports.DotSegments = DotSegments;

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

@@ -0,0 +1,4 @@
+export * from './AmpmSegments';
+export * from './ColonSegments';
+export * from './DigitSegments';
+export * from './DotSegments';

package/lib/Digit/components/index.js

@@ -0,0 +1,20 @@
+"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("./AmpmSegments"), exports);
+__exportStar(require("./ColonSegments"), exports);
+__exportStar(require("./DigitSegments"), exports);
+__exportStar(require("./DotSegments"), exports);

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

@@ -0,0 +1,3 @@
+import { DigitProps } from '../UnstyledDigit';
+export declare const onOffCx: (value?: boolean, off?: boolean) => "on" | "off";
+export declare const shapeCx: (shape: DigitProps["shape"]) => string | null;

package/lib/Digit/components/utils.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shapeCx = exports.onOffCx = void 0;
+const onOffCx = (value, off) => value && !off ? 'on' : 'off';
+exports.onOffCx = onOffCx;
+const shapeCx = (shape) => {
+    if (!shape) {
+        return null;
+    }
+    return 'shape-' + shape;
+};
+exports.shapeCx = shapeCx;

package/lib/Digit/digit.css

@@ -1,23 +1,23 @@
 /**
- *
- *   A
- * F   B      D2      AM
- *   G 
- * E   C      D1      PM
- *   D       DP
- *
+ *    A
+ *  F   B      D2      AM
+ *    G 
+ *  E   C      D1      PM
+ *    D       DP
  */
 
 .digit {
   --color: var(--segment-color, currentColor);
   --color-off: var(--segment-color-off, var(--color));
-  --thick: var(--segment-thickness, 0.25em); /* 4px */
-  --length: var(--segment-length, 1em);
-  --spacing: var(--segment-spacing, 0.0625em); /* 1px */
-  --filament: var(--segment-filament, 0); /* vertical shift of segments A,D */
+  --thick: var(--segment-thickness, 0.25rem); /* =4px */
+  --length: var(--segment-length, 1rem);
+  --spacing: var(--segment-spacing, 0.0625rem); /* =1px */
+  --filament: var(--segment-filament, 0rem); /* vertical squeeze for A, D */
   --opacity-on: var(--segment-opacity-on, 1);
   --opacity-off: var(--segment-opacity-off, 0.1);
   --transition-duration: var(--segment-transition-duration, 0.25s);
+  /* distortion of diamond, -0.5...0.5 */
+  --corner-shift: var(--diamond-corner-shift, 0.2);
 
   --svg-am: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:black;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:1;}</style><polyline class="st0" points="1.4,11.5 1.4,11.4 3.8,3.5 4.2,3.5 6.6,11.4 6.6,11.5 "/><polyline class="st0" points="14.5,11.5 14.5,3.5 14.1,3.5 11.5,9.9 11.3,9.9 8.9,3.5 8.5,3.5 8.5,11.5 "/><line class="st0" x1="2.6" y1="9.5" x2="5.4" y2="9.5"/></svg>');
   --svg-pm: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:black;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:1;}</style><path class="st0" d="M1.5,11.5V3.4h2.1c1.6,0,2.5,1,2.5,2.2s-1,2.3-2.5,2.3H2.2"/><polyline class="st0" points="14.5,11.5 14.5,3.5 14.1,3.5 11.5,9.9 11.3,9.9 8.9,3.5 8.5,3.5 8.5,11.5 "/></svg>');
@@ -50,41 +50,48 @@
     min-width: var(--thick);
   }
 
-  & .opacity-wrapper {
+  .opacity-wrapper {
     position: absolute;
     width: 100%;
     height: 100%;
   }
 
-  & .opacity-wrapper,
-  & .opacity-wrapper .segment {
+  .opacity-wrapper,
+  .opacity-wrapper .segment {
     transition-property: background-color, border-color, opacity, visibility;
     transition-duration: var(--transition-duration);
   }
 
-  & .opacity-wrapper.on .segment.off,
-  & .opacity-wrapper.off.on .segment.off,
-  & .opacity-wrapper.off .segment.on {
+  .opacity-wrapper.off.on .segment.off,
+  .opacity-wrapper.on .segment.off,
+  .opacity-wrapper.off .segment.on {
     visibility: hidden;
   }
-  & .opacity-wrapper.off .segment.off,
-  & .opacity-wrapper.on .segment.on {
+  .opacity-wrapper.off .segment.off,
+  .opacity-wrapper.on .segment.on {
     visibility: visible;
   }
 
-  & .opacity-wrapper.on {
+  .opacity-wrapper.on {
     opacity: var(--opacity-on);
   }
-  & .opacity-wrapper.off {
+  .opacity-wrapper.off {
     opacity: var(--opacity-off);
   }
-  & .opacity-wrapper.off.on {
+  .opacity-wrapper.off.on {
+    opacity: 0;
+  }
+  .opacity-wrapper.on:not(.off) .segment.on {
+    opacity: 1;
+  }
+  .opacity-wrapper.on:not(.off) .segment.off {
     opacity: 0;
   }
 
   /* segments */
-  & .segment {
+  .segment {
     --th-half-100: calc(100% - var(--th-half));
+    --shft: calc(var(--thick) * var(--corner-shift));
 
     background-color: var(--color);
     display: block;
@@ -120,15 +127,21 @@
       width: var(--length);
       height: var(--thick);
       left: calc(var(--th-half) + var(--sp-half));
-    }
-    &.A {
-      top: var(--filament);
-    }
-    &.D {
-      bottom: var(--filament);
-    }
-    &.G {
-      bottom: calc(var(--length) + var(--spacing));
+
+      &.A,
+      &.D {
+        width: calc(var(--length) + var(--shft) * 2);
+        left: calc(var(--th-half) + var(--sp-half) - var(--shft));
+      }
+      &.A {
+        top: calc(var(--filament) + var(--shft));
+      }
+      &.D {
+        bottom: calc(var(--filament) + var(--shft));
+      }
+      &.G {
+        bottom: calc(var(--length) + var(--spacing));
+      }
     }
 
     /* spearheads */
@@ -141,6 +154,28 @@
         var(--th-half-100) 100%,
         var(--th-half) 100%
       );
+      &.A {
+        /* x y */
+        clip-path: polygon(
+          0 calc(50% - var(--shft)),
+          calc(var(--th-half) - var(--shft)) 0,
+          calc(var(--th-half-100) + var(--shft)) 0,
+          100% calc(50% - var(--shft)),
+          calc(var(--th-half-100) - var(--shft)) 100%,
+          calc(var(--th-half) + var(--shft)) 100%
+        );
+      }
+      &.D {
+        /* x y */
+        clip-path: polygon(
+          0 calc(50% + var(--shft)),
+          calc(var(--th-half) + var(--shft)) 0,
+          calc(var(--th-half-100) - var(--shft)) 0,
+          100% calc(50% + var(--shft)),
+          calc(var(--th-half-100) + var(--shft)) 100%,
+          calc(var(--th-half) - var(--shft)) 100%
+        );
+      }
     }
     &.vertical {
       clip-path: polygon(
@@ -151,6 +186,50 @@
         100% var(--th-half-100),
         100% var(--th-half)
       );
+      &.B {
+        /* x y */
+        clip-path: polygon(
+          calc(50% + var(--shft)) 0,
+          0 calc(var(--th-half) + var(--shft)),
+          0 var(--th-half-100),
+          50% 100%,
+          100% var(--th-half-100),
+          100% calc(var(--th-half) - var(--shft))
+        );
+      }
+      &.C {
+        /* x y */
+        clip-path: polygon(
+          50% 0,
+          0 var(--th-half),
+          0 calc(var(--th-half-100) - var(--shft)),
+          calc(50% + var(--shft)) 100%,
+          100% calc(var(--th-half-100) + var(--shft)),
+          100% var(--th-half)
+        );
+      }
+      &.E {
+        /* x y */
+        clip-path: polygon(
+          50% 0,
+          0 var(--th-half),
+          0 calc(var(--th-half-100) + var(--shft)),
+          calc(50% - var(--shft)) 100%,
+          100% calc(var(--th-half-100) - var(--shft)),
+          100% var(--th-half)
+        );
+      }
+      &.F {
+        /* x y */
+        clip-path: polygon(
+          calc(50% - var(--shft)) 0,
+          0 calc(var(--th-half) - var(--shft)),
+          0 var(--th-half-100),
+          50% 100%,
+          100% var(--th-half-100),
+          100% calc(var(--th-half) + var(--shft))
+        );
+      }
     }
   }
 
@@ -170,7 +249,7 @@
   &.ampm {
     --digit-width: calc(var(--length) + var(--thick) + var(--spacing));
 
-    & .segment {
+    .segment {
       background: var(--color);
       width: var(--digit-width);
       height: var(--length);
@@ -183,7 +262,7 @@
         contain;
     }
 
-    & .AM {
+    .AM {
       bottom: calc(var(--digit-height) / 2 + var(--thick) / 4);
       mask-image: var(--svg-am);
     }
@@ -193,7 +272,7 @@
       mask-composite: exclude;
       mask-image: var(--svg-am), linear-gradient(var(--color) 0 0);
     }
-    & .PM {
+    .PM {
       top: calc(var(--digit-height) / 2 + var(--thick) / 4);
       mask-image: var(--svg-pm);
     }
@@ -225,19 +304,19 @@
       left: calc(var(--digit-width) / 2 - var(--dot-border-width));
     }
     /* lower part of a colon */
-    & .segment.D1 {
+    .segment.D1 {
       top: calc(var(--digit-height) / 3 - var(--thick) / 2);
     }
     /* upper part of a colon */
-    & .segment.D2 {
+    .segment.D2 {
       bottom: calc(var(--digit-height) / 3 - var(--thick) / 2);
     }
     /* dot itself */
-    & .segment.DP {
+    .segment.DP {
       bottom: 0;
     }
-  }
-  &.shape-default .segment {
-    border-radius: var(--radius-pill);
+    &.shape-default .segment {
+      border-radius: var(--radius-pill);
+    }
   }
 }

package/lib/Digit/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Digit';
+export { Digit as UnstyledDigit } from './UnstyledDigit';
 export * from './charToSevenSegments';

package/lib/Digit/index.js

@@ -14,5 +14,8 @@ 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 });
+exports.UnstyledDigit = void 0;
 __exportStar(require("./Digit"), exports);
+var UnstyledDigit_1 = require("./UnstyledDigit");
+Object.defineProperty(exports, "UnstyledDigit", { enumerable: true, get: function () { return UnstyledDigit_1.Digit; } });
 __exportStar(require("./charToSevenSegments"), exports);

package/lib/Digit/useStyleInjection.d.ts

@@ -0,0 +1,4 @@
+declare const useHeadStyleInjection: (css: string, id: string, dependencies?: never[], scoped?: boolean) => {
+    "data-style-scope-id": string;
+};
+export default useHeadStyleInjection;

package/lib/Digit/useStyleInjection.js

@@ -0,0 +1,70 @@
+"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 _StyleInjectionState_state;
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const scopeAttribute = 'data-style-scope-id';
+// Runtime style injection
+const useHeadStyleInjection = (css, id, dependencies = [], scoped = true // isolate css behind @scope
+) => {
+    const injected = new StyleInjectionState(); // singleton's state
+    const _id = `_${id}`; // safe id to make CSS selectors work
+    const style = {
+        id: `inject_id_${_id}`, // hash of css content
+        css: scoped ? wrapWithScope(css, _id) : css,
+    };
+    (0, react_1.useInsertionEffect)(() => {
+        injected.add(style);
+        return () => injected.remove(style);
+    }, dependencies);
+    return {
+        [scopeAttribute]: _id,
+    };
+};
+class StyleInjectionState {
+    constructor() {
+        _StyleInjectionState_state.set(this, {
+            injected: new Set(),
+        });
+        if (!StyleInjectionState.instance) {
+            StyleInjectionState.instance = this; // create first instance if needed
+        }
+        return StyleInjectionState.instance;
+    }
+    add(s) {
+        if (!this.has(s)) {
+            __classPrivateFieldGet(this, _StyleInjectionState_state, "f").injected.add(s.id);
+            document.head.appendChild(createStyleElement(s.css, s.id));
+        }
+    }
+    remove(s) {
+        var _a;
+        if (this.has(s)) {
+            __classPrivateFieldGet(this, _StyleInjectionState_state, "f").injected.delete(s.id);
+            (_a = document.head.querySelector(`#${s.id}`)) === null || _a === void 0 ? void 0 : _a.remove();
+        }
+    }
+    has(s) {
+        return __classPrivateFieldGet(this, _StyleInjectionState_state, "f").injected.has(s.id);
+    }
+}
+_StyleInjectionState_state = new WeakMap();
+const createStyleElement = (content, id = '') => {
+    const el = document.createElement('style');
+    el.innerHTML = content;
+    if (id !== '')
+        el.id = id;
+    return el;
+};
+const wrapWithScope = (rules, _id) => {
+    const isolated = `@scope ([${scopeAttribute}=${_id}]) {
+      :scope { display: contents; }
+      ${rules}
+    }`;
+    return isolated;
+};
+exports.default = useHeadStyleInjection;

package/package.json

@@ -1,23 +1,26 @@
 {
   "name": "react-led-digit",
-  "version": "0.0.5",
-  "description": "",
+  "version": "0.0.7",
+  "description": "react component for 7-segment display (digit), includes dot, colon and am-pm digits",
   "main": "./lib/index.js",
   "files": [
     "lib/**/*"
   ],
   "scripts": {
-    "build": "npm run clean && npm run build-ts && npm run copy-css",
+    "build": "npm-run-all clean css-to-js build-ts css-copy",
+    "build-storybook": "storybook build",
     "build-ts": "tsc --project tsconfig.build.json",
     "clean": "rimraf lib",
-    "copy-css": "npx cpy src/**/*.css lib",
+    "css-copy": "npx cpy src/**/*.css lib",
+    "css-to-js-watch": "node css-to-js --watch",
+    "css-to-js": "node css-to-js",
+    "dev": "npm-run-all --parallel storybook css-to-js-watch",
     "lint": "eslint ./src/ --fix",
     "semantic-release": "semantic-release",
+    "storybook": "storybook dev -p 6006 && npm run css-to-js-watch",
     "test:watch": "jest --watch",
     "test": "jest --coverage",
-    "typecheck": "tsc --noEmit",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "typecheck": "tsc --noEmit"
   },
   "repository": {
     "type": "git",
@@ -34,17 +37,15 @@
     "node": ">=12.0"
   },
   "keywords": [
-    "react",
+    "7-segment",
     "led",
     "digit",
+    "react",
     "component",
-    "7-segment",
-    "digital",
+    "seven-segments",
+    "display",
     "clock"
   ],
-  "dependencies": {
-    "classnames": "^2.5.1"
-  },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
     "@storybook/addon-essentials": "^8.2.4",
@@ -59,6 +60,8 @@
     "@types/node": "^18.19.41",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.1",
+    "chokidar": "^4.0.1",
+    "clsx": "^2.1.1",
     "cpy-cli": "^5.0.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -66,6 +69,7 @@
     "eslint-plugin-storybook": "^0.8.0",
     "jest": "^29.7.0",
     "lint-staged": "^15.2.7",
+    "npm-run-all": "^4.1.5",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",