react-led-digit 0.0.19 → 0.0.21

package/README.md

@@ -23,7 +23,7 @@ import { Digit, BlinkingDigit } from 'react-led-digit';
 Styled segments example (see [sandbox](https://codesandbox.io/p/sandbox/react-led-digit-forked-c4f2v3)):
 
 ```tsx
-import { Digit, BlinkingDigit } from 'react-led-digit';
+import { Digit } from 'react-led-digit';
 
 <>
   <Digit
@@ -33,7 +33,7 @@ import { Digit, BlinkingDigit } from 'react-led-digit';
       colorOff: 'blue',
       length: '1em',
       thickness: '.5em',
-      cornerShift: '-.1em',
+      cornerCutoff: '-.1em',
       spacing: '-.1em',
       shiftAD: '.1em',
       opacityOn: 1,

package/lib/BlinkingDigit/BlinkingDigit.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Digit } from '../Digit';
+import { type DigitProps } from '../Digit';
 import { Blinker } from '../Blinker';
-type BlinkingDigit = Digit & {
+type BlinkingDigitProps = DigitProps & {
     blinkOptions?: {
         period?: Blinker['period'];
         ratio?: Blinker['ratio'];
         sync?: boolean;
     };
 };
-export declare const BlinkingDigit: React.MemoExoticComponent<({ blinkOptions, className, ...rest }: BlinkingDigit) => import("react/jsx-runtime").JSX.Element>;
+export declare const BlinkingDigit: React.MemoExoticComponent<({ blinkOptions, className, ...rest }: BlinkingDigitProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/lib/Digit/Digit.d.ts

@@ -1,3 +1,3 @@
-import { Digit as UnstyledDigit } from './UnstyledDigit';
-export type Digit = UnstyledDigit;
-export declare const Digit: ({ ...rest }: Digit) => import("react/jsx-runtime").JSX.Element;
+import { type DigitProps } from './UnstyledDigit';
+export type { DigitProps } from './UnstyledDigit';
+export declare const Digit: ({ ...rest }: DigitProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,8 @@
 import type { StoryObj } from '@storybook/react';
-import { Digit } from '../';
+import { type DigitProps } from '../';
 declare const meta: {
     title: string;
-    component: ({ ...rest }: Digit) => import("react/jsx-runtime").JSX.Element;
+    component: ({ ...rest }: DigitProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;
@@ -17,8 +17,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export type DisplayProps = React.HTMLAttributes<HTMLDivElement> & {
     scale?: number;
-    shape?: Digit['shape'];
-    segmentStyle?: Digit['segmentStyle'];
+    shape?: DigitProps['shape'];
+    segmentStyle?: DigitProps['segmentStyle'];
     value: string;
 };
 export declare const Clock: Story;

package/lib/Digit/Digit.stories.js

@@ -129,8 +129,13 @@ const Display = (_a) => {
                     fontSize: `${scale * 100}%`,
                 },
                 segmentStyle: {
-                    color: 'green',
-                    cornerShift: 'calc(var(--thickness) / 4)',
+                    spacing: '.01em',
+                    color: 'black',
+                    colorOff: 'orange',
+                    opacityOff: 0.25,
+                    thickness: '.35em',
+                    cornerCutoff: '-.025em',
+                    transitionDuration: '1s',
                 },
             };
             if (digit === ':') {
@@ -170,7 +175,7 @@ const SegmentShapeTest = (args) => {
             thickness: `${args.thickness}em`,
             spacing: `${args.spacing}em`,
             shiftAD: `${args.shiftAD}em`,
-            cornerShift: `${args.cornerShift}em`,
+            cornerCutoff: `${args.cornerCutoff}em`,
         } }));
     return ((0, jsx_runtime_1.jsxs)("div", { style: Object.assign({}, grid), children: [(0, jsx_runtime_1.jsx)(Dgt, { shape: 'default' }), (0, jsx_runtime_1.jsx)(Dgt, { shape: 'rect' }), (0, jsx_runtime_1.jsx)(Dgt, { shape: 'round' }), (0, jsx_runtime_1.jsx)(Dgt, { shape: 'pill' }), (0, jsx_runtime_1.jsx)(Dgt, { shape: 'calculator' })] }));
 };
@@ -213,14 +218,14 @@ exports.Shape = {
         thickness: 2,
         spacing: 0.1,
         shiftAD: 0,
-        cornerShift: 0,
+        cornerCutoff: 0,
     },
     argTypes: {
         length: { control: { type: 'range', min: 1, max: 20, step: 0.5 } },
         thickness: { control: { type: 'range', min: 0.5, max: 10, step: 0.25 } },
         spacing: { control: { type: 'range', min: -0.5, max: 2, step: 0.05 } },
         shiftAD: { control: { type: 'range', min: -1, max: 1, step: 0.05 } },
-        cornerShift: { control: { type: 'range', min: -5, max: 5, step: 0.1 } },
+        cornerCutoff: { control: { type: 'range', min: -5, max: 5, step: 0.1 } },
     },
     render: SegmentShapeTest,
 };

package/lib/Digit/UnstyledDigit.d.ts

@@ -3,25 +3,83 @@ 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 = {
+export type DigitBaseProps = {
+    /**
+     * When `true`, all segments are dimmed to `opacityOff` (default 0.1),
+     * simulating a powered-off LED display.
+     */
     off?: boolean;
+    /**
+     * Controls the visual shape of each segment.
+     * - `"default"` — diamond for digits, circle for colon/dot, plain text for am/pm
+     * - `"rect"` — rectangular segments with sharp corners
+     * - `"round"` — segments with fully rounded ends
+     * - `"pill"` — capsule-shaped segments (rounded rectangle)
+     * - `"calculator"` — angled segments resembling a classic LCD calculator
+     */
     shape?: 'default' | 'rect' | 'round' | 'pill' | 'calculator';
+    /**
+     * The character to display.
+     * - `0`–`9` or a supported letter (e.g. `"L"`, `"H"`) — renders as a 7-segment digit
+     * - `":"` — renders as a colon (two vertically stacked dots)
+     * - `"."` — renders as a single decimal dot
+     * - `"am"` / `"pm"` — renders as an AM/PM indicator
+     * - A `SevenSegmentsValue` string — directly specifies which segments to light up
+     */
     value: DigitValue;
 };
 type SegmentStyle = {
+    /**
+     * Color of active (lit) segments. Overrides the inherited `currentColor`.
+     * Accepts any CSS color value (e.g. `"#ff0000"`, `"red"`, `"rgb(0,255,0)"`).
+     */
     color?: CSSProperties['color'];
+    /**
+     * Color of inactive (unlit) segments. Useful for showing a faint "ghost"
+     * outline of the full display. Defaults to the same as `color` at reduced opacity.
+     */
     colorOff?: CSSProperties['color'];
+    /**
+     * Length of each segment (the longer dimension).
+     * Accepts any CSS length value (e.g. `"20px"`, `"1.5em"`).
+     */
     length?: CSSProperties['width'];
+    /**
+     * Thickness of each segment (the shorter dimension).
+     * Accepts any CSS length value (e.g. `"4px"`, `"0.3em"`).
+     */
     thickness?: CSSProperties['width'];
+    /**
+     * Gap between adjacent segments. Can be negative to overlap segments.
+     * Accepts any CSS length value (e.g. `"1px"`, `"-0.5px"`).
+     */
     spacing?: CSSProperties['width'];
+    /**
+     * Vertical offset applied to the top (A) and bottom (D) horizontal segments,
+     * pushing them closer together or farther apart. Useful for fine-tuning
+     * the digit's aspect ratio.
+     */
     shiftAD?: CSSProperties['width'];
+    /**
+     * Opacity of active (lit) segments. Defaults to `1`.
+     */
     opacityOn?: CSSProperties['opacity'];
+    /**
+     * Opacity of inactive (unlit) segments. Defaults to `0.1`.
+     */
     opacityOff?: CSSProperties['opacity'];
+    /**
+     * CSS transition duration for segment color and opacity changes.
+     * Defaults to `".25s"`. Set to `"0s"` for instant switching.
+     */
     transitionDuration?: CSSProperties['transitionDuration'];
-    cornerShift?: CSSProperties['width'];
+    /**
+     * Size of the corner cutoff. Don't applies when `shape` is `"calculator"`.
+     */
+    cornerCutoff?: CSSProperties['width'];
 };
-export type Digit = DivProps & DigitProps & {
+export type DigitProps = DivProps & DigitBaseProps & {
     segmentStyle?: SegmentStyle;
 };
-export declare const Digit: ({ segmentStyle, value, ...rest }: Digit) => import("react/jsx-runtime").JSX.Element;
+export declare const Digit: ({ segmentStyle, value, ...rest }: DigitProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/Digit/UnstyledDigit.js

@@ -24,7 +24,7 @@ const Digit = (_a) => {
     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-shift-ad': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.shiftAD, '--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);
+    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-shift-ad': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.shiftAD, '--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-cutoff': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.cornerCutoff }, rest.style);
     if (type === 'digit')
         return (0, jsx_runtime_1.jsx)(components_1.DigitSegments, Object.assign({ "aria-label": v }, rest, segments, { style: sx }));
     if (type === 'colon')

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

@@ -1,8 +1,8 @@
 import type { StoryObj } from '@storybook/react';
-import { UnstyledDigit } from '..';
+import { type DigitProps } from '..';
 declare const meta: {
     title: string;
-    component: ({ segmentStyle, value, ...rest }: UnstyledDigit) => import("react/jsx-runtime").JSX.Element;
+    component: ({ segmentStyle, value, ...rest }: DigitProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

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

@@ -1,9 +1,9 @@
-import { DigitProps } from '../UnstyledDigit';
+import { DigitBaseProps } from '../UnstyledDigit';
 type DivProps = React.HTMLAttributes<HTMLDivElement>;
 export type AmpmSegments = DivProps & {
     className?: string;
-    off?: DigitProps['off'];
-    shape?: DigitProps['shape'];
+    off?: DigitBaseProps['off'];
+    shape?: DigitBaseProps['shape'];
     AM?: boolean;
     PM?: boolean;
 };

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

@@ -1,9 +1,9 @@
-import { DigitProps } from '../UnstyledDigit';
+import { DigitBaseProps } from '../UnstyledDigit';
 type DivProps = React.HTMLAttributes<HTMLDivElement>;
 export type ColonSegments = DivProps & {
     className?: string;
-    off?: DigitProps['off'];
-    shape?: DigitProps['shape'];
+    off?: DigitBaseProps['off'];
+    shape?: DigitBaseProps['shape'];
     D1?: boolean;
     D2?: boolean;
 };

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

@@ -1,9 +1,9 @@
-import { DigitProps } from '../UnstyledDigit';
+import { DigitBaseProps } from '../UnstyledDigit';
 type DivProps = React.HTMLAttributes<HTMLDivElement>;
 export type DigitSegments = DivProps & {
     className?: string;
-    off?: DigitProps['off'];
-    shape?: DigitProps['shape'];
+    off?: DigitBaseProps['off'];
+    shape?: DigitBaseProps['shape'];
     A?: boolean;
     B?: boolean;
     C?: boolean;

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

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

package/lib/Digit/digit.css

@@ -14,8 +14,8 @@
   --ad: calc(
     var(--segment-shift-ad, 0em) * var(--scale)
   ); /* moves segments A, D in vertical direction */
-  --corner-shift: var(
-    --segment-corner-shift,
+  --corner-cutoff: var(
+    --segment-corner-cutoff,
     0em
   ); /* distortion of outer corners of a digit */
 
@@ -34,7 +34,7 @@
   --thk-half: calc(var(--thk) / 2);
 
   --spc: calc(var(--spacing) / 1.4142); /* divided by sqrt(2) */
-  --crn: var(--corner-shift);
+  --crn: var(--corner-cutoff);
 
   --radius-round: calc(var(--thk) * 0.33);
   --radius-pill: var(--thk, 10em);
@@ -255,23 +255,71 @@
     }
   }
 
-  /* segment shapes */
-  &.shape-default .segment.segment,
-  &.shape-rect .segment.segment {
-    border-radius: 0;
-  }
-  &.shape-round .segment.segment {
-    border-radius: var(--radius-round);
-  }
-  &.shape-pill .segment.segment {
-    border-radius: var(--radius-pill);
+  /* digit shape */
+  &.digit .opacity-wrapper {
+    clip-path: polygon(
+      0px 0px,
+      0px 0px,
+      0px 0px,
+      0px 0px,
+      0px 0px,
+      0px 0px,
+      100% 0px,
+      100% 0px,
+      100% 0px,
+      100% 0px,
+      100% 0px,
+      100% 0px,
+      100% 100%,
+      100% 100%,
+      100% 100%,
+      100% 100%,
+      100% 100%,
+      100% 100%,
+      0px 100%,
+      0px 100%,
+      0px 100%,
+      0px 100%,
+      0px 100%,
+      0px 100%
+    );
   }
-  &.shape-calculator {
-    --r: calc(var(--thk) * 1.2);
+
+  &.shape-default .opacity-wrapper {
+    --crn-2: calc(var(--crn) * -1 + var(--spc) + var(--thk));
+
+    clip-path: polygon(
+      0px var(--crn-2),
+      0px var(--crn-2),
+      0px var(--crn-2),
+      var(--crn-2) 0px,
+      var(--crn-2) 0px,
+      var(--crn-2) 0px,
+      calc(100% - var(--crn-2)) 0px,
+      calc(100% - var(--crn-2)) 0px,
+      calc(100% - var(--crn-2)) 0px,
+      100% var(--crn-2),
+      100% var(--crn-2),
+      100% var(--crn-2),
+      100% calc(100% - var(--crn-2)),
+      100% calc(100% - var(--crn-2)),
+      100% calc(100% - var(--crn-2)),
+      calc(100% - var(--crn-2)) 100%,
+      calc(100% - var(--crn-2)) 100%,
+      calc(100% - var(--crn-2)) 100%,
+      var(--crn-2) 100%,
+      var(--crn-2) 100%,
+      var(--crn-2) 100%,
+      0px calc(100% - var(--crn-2)),
+      0px calc(100% - var(--crn-2)),
+      0px calc(100% - var(--crn-2))
+    );
   }
-  & {
-    --r: calc(var(--thk) * 0);
 
+  &.shape-calculator .opacity-wrapper {
+    --r: calc(var(--thk) * 1.35);
+
+    /* rounded corners */
     clip-path: polygon(
       /* top-left corner */ 0px var(--r),
       calc(var(--r) * 0.0495) calc(var(--r) * 0.691),
@@ -298,11 +346,22 @@
       calc(var(--r) * 0.0495) calc(var(--dh) - var(--r) * 0.691),
       0px calc(var(--dh) - var(--r))
     );
+  }
 
-    .segment.segment {
-      --crn: var(--thk);
-      --shft: calc(var(--thk) * 1);
-    }
+  /* segment shapes */
+  &.shape-default .segment.segment,
+  &.shape-rect .segment.segment {
+    border-radius: 0;
+  }
+  &.shape-round .segment.segment {
+    border-radius: var(--radius-round);
+  }
+  &.shape-pill .segment.segment {
+    border-radius: var(--radius-pill);
+  }
+  &.shape-calculator .segment.segment {
+    --crn: var(--thk);
+    --shft: calc(var(--thk) * 1);
   }
 
   &.shape-rect,
@@ -395,7 +454,7 @@
   transform: rotate3d(1, -1, 0, 0.025deg);
 }
 
-/* better subpixel rendering (Firefox) */
+/* better subpixel (16x) rendering for Firefox */
 @-moz-document url-prefix() {
   .digit {
     --scale: 4;

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

@@ -2,7 +2,7 @@
 
 const css = {
   src: `src/Digit/digit.css`,
-  hash: `27bilryv8nf`,
+  hash: `ru8357il70`,
   content: `
 /**
  *    A
@@ -20,8 +20,8 @@ const css = {
   --ad: calc(
     var(--segment-shift-ad, 0em) * var(--scale)
   ); /* moves segments A, D in vertical direction */
-  --corner-shift: var(
-    --segment-corner-shift,
+  --corner-cutoff: var(
+    --segment-corner-cutoff,
     0em
   ); /* distortion of outer corners of a digit */
 
@@ -40,7 +40,7 @@ const css = {
   --thk-half: calc(var(--thk) / 2);
 
   --spc: calc(var(--spacing) / 1.4142); /* divided by sqrt(2) */
-  --crn: var(--corner-shift);
+  --crn: var(--corner-cutoff);
 
   --radius-round: calc(var(--thk) * 0.33);
   --radius-pill: var(--thk, 10em);
@@ -261,23 +261,71 @@ const css = {
     }
   }
 
-  /* segment shapes */
-  &.shape-default .segment.segment,
-  &.shape-rect .segment.segment {
-    border-radius: 0;
-  }
-  &.shape-round .segment.segment {
-    border-radius: var(--radius-round);
-  }
-  &.shape-pill .segment.segment {
-    border-radius: var(--radius-pill);
+  /* digit shape */
+  &.digit .opacity-wrapper {
+    clip-path: polygon(
+      0px 0px,
+      0px 0px,
+      0px 0px,
+      0px 0px,
+      0px 0px,
+      0px 0px,
+      100% 0px,
+      100% 0px,
+      100% 0px,
+      100% 0px,
+      100% 0px,
+      100% 0px,
+      100% 100%,
+      100% 100%,
+      100% 100%,
+      100% 100%,
+      100% 100%,
+      100% 100%,
+      0px 100%,
+      0px 100%,
+      0px 100%,
+      0px 100%,
+      0px 100%,
+      0px 100%
+    );
   }
-  &.shape-calculator {
-    --r: calc(var(--thk) * 1.2);
+
+  &.shape-default .opacity-wrapper {
+    --crn-2: calc(var(--crn) * -1 + var(--spc) + var(--thk));
+
+    clip-path: polygon(
+      0px var(--crn-2),
+      0px var(--crn-2),
+      0px var(--crn-2),
+      var(--crn-2) 0px,
+      var(--crn-2) 0px,
+      var(--crn-2) 0px,
+      calc(100% - var(--crn-2)) 0px,
+      calc(100% - var(--crn-2)) 0px,
+      calc(100% - var(--crn-2)) 0px,
+      100% var(--crn-2),
+      100% var(--crn-2),
+      100% var(--crn-2),
+      100% calc(100% - var(--crn-2)),
+      100% calc(100% - var(--crn-2)),
+      100% calc(100% - var(--crn-2)),
+      calc(100% - var(--crn-2)) 100%,
+      calc(100% - var(--crn-2)) 100%,
+      calc(100% - var(--crn-2)) 100%,
+      var(--crn-2) 100%,
+      var(--crn-2) 100%,
+      var(--crn-2) 100%,
+      0px calc(100% - var(--crn-2)),
+      0px calc(100% - var(--crn-2)),
+      0px calc(100% - var(--crn-2))
+    );
   }
-  & {
-    --r: calc(var(--thk) * 0);
 
+  &.shape-calculator .opacity-wrapper {
+    --r: calc(var(--thk) * 1.35);
+
+    /* rounded corners */
     clip-path: polygon(
       /* top-left corner */ 0px var(--r),
       calc(var(--r) * 0.0495) calc(var(--r) * 0.691),
@@ -304,11 +352,22 @@ const css = {
       calc(var(--r) * 0.0495) calc(var(--dh) - var(--r) * 0.691),
       0px calc(var(--dh) - var(--r))
     );
+  }
 
-    .segment.segment {
-      --crn: var(--thk);
-      --shft: calc(var(--thk) * 1);
-    }
+  /* segment shapes */
+  &.shape-default .segment.segment,
+  &.shape-rect .segment.segment {
+    border-radius: 0;
+  }
+  &.shape-round .segment.segment {
+    border-radius: var(--radius-round);
+  }
+  &.shape-pill .segment.segment {
+    border-radius: var(--radius-pill);
+  }
+  &.shape-calculator .segment.segment {
+    --crn: var(--thk);
+    --shft: calc(var(--thk) * 1);
   }
 
   &.shape-rect,
@@ -401,7 +460,7 @@ const css = {
   transform: rotate3d(1, -1, 0, 0.025deg);
 }
 
-/* better subpixel rendering (Firefox) */
+/* better subpixel (16x) rendering for Firefox */
 @-moz-document url-prefix() {
   .digit {
     --scale: 4;

package/package.json

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