react-led-digit 0.0.20 → 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/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'];
+    /**
+     * 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.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

@@ -454,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: `38bchlriaf`,
+  hash: `ru8357il70`,
   content: `
 /**
  *    A
@@ -460,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.20",
+  "version": "0.0.21",
   "description": "react component for 7-segment display (digit), includes dot, colon and am-pm digits",
   "main": "./lib/index.js",
   "files": [