@w3ux/react-odometer 2.1.0 → 2.2.2

package/index.cjs

@@ -0,0 +1,216 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  Odometer: () => Odometer,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Odometer = ({
+  value,
+  spaceBefore = 0,
+  spaceAfter = "0.25rem",
+  wholeColor = "var(--text-color-primary)",
+  decimalColor = "var(--text-color-secondary)",
+  zeroDecimals = 0
+}) => {
+  const [allDigits] = (0, import_react.useState)([
+    "comma",
+    "dot",
+    "0",
+    "1",
+    "2",
+    "3",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9"
+  ]);
+  const [digits, setDigits] = (0, import_react.useState)([]);
+  const [prevDigits, setPrevDigits] = (0, import_react.useState)([]);
+  const [status, setStatus] = (0, import_react.useState)("inactive");
+  const [initialized, setInitialized] = (0, import_react.useState)(false);
+  const [odometerRef] = (0, import_react.useState)((0, import_react.createRef)());
+  const [digitRefs, setDigitRefs] = (0, import_react.useState)([]);
+  const [allDigitRefs, setAllDigitRefs] = (0, import_react.useState)({});
+  const activeTransitionCounter = (0, import_react.useRef)(0);
+  const DURATION_MS = 750;
+  const DURATION_SECS = `${DURATION_MS / 1e3}s`;
+  (0, import_react.useEffect)(() => {
+    const all = Object.fromEntries(
+      Object.values(allDigits).map((v) => [`d_${v}`, (0, import_react.createRef)()])
+    );
+    setAllDigitRefs(all);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (Object.keys(allDigitRefs)) {
+      value = String(value) === "0" ? Number(value).toFixed(zeroDecimals) : value;
+      const newDigits = value.toString().split("").map((v) => v === "." ? "dot" : v).map((v) => v === "," ? "comma" : v);
+      setDigits(newDigits);
+      if (!initialized) {
+        setInitialized(true);
+      } else {
+        setStatus("new");
+        setPrevDigits(digits);
+      }
+      setDigitRefs(Array(newDigits.length).fill((0, import_react.createRef)()));
+    }
+  }, [value]);
+  (0, import_react.useEffect)(() => {
+    if (status === "new" && !digitRefs.find((d) => d.current === null)) {
+      setStatus("transition");
+      activeTransitionCounter.current++;
+      setTimeout(() => {
+        activeTransitionCounter.current--;
+        if (activeTransitionCounter.current === 0) {
+          setStatus("inactive");
+        }
+      }, DURATION_MS);
+    }
+  }, [status, digitRefs]);
+  const odometerCurrent = odometerRef.current;
+  let lineHeight = odometerCurrent ? window.getComputedStyle(odometerCurrent).lineHeight : "inherit";
+  lineHeight = lineHeight === "normal" ? "1.1rem" : lineHeight;
+  let foundDecimal = false;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    allDigits.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        ref: allDigitRefs[`d_${d}`],
+        style: {
+          opacity: 0,
+          position: "fixed",
+          top: "-999%",
+          left: "-999%",
+          userSelect: "none"
+        },
+        children: d === "dot" ? "." : d === "comma" ? "," : d
+      },
+      `odometer_template_digit_${i}`
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "odometer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "odometer-inner", ref: odometerRef, children: [
+      spaceBefore ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { paddingLeft: spaceBefore } }) : null,
+      digits.map((d, i) => {
+        if (d === "dot") {
+          foundDecimal = true;
+        }
+        let childDigits = null;
+        if (status === "transition") {
+          const digitsToAnimate = [];
+          const digitIndex = allDigits.indexOf(digits[i]);
+          const prevDigitIndex = allDigits.indexOf(prevDigits[i]);
+          const difference = Math.abs(digitIndex - prevDigitIndex);
+          const delay = `${0.01 * (digits.length - i - 1)}s`;
+          const direction = digitIndex === prevDigitIndex ? "none" : "down";
+          const animClass = `slide-${direction}-${difference} `;
+          digitsToAnimate.push(prevDigits[i]);
+          if (digitIndex < prevDigitIndex) {
+            digitsToAnimate.push(
+              ...Array.from(
+                { length: difference },
+                (_, k) => allDigits[prevDigitIndex - k - 1]
+              )
+            );
+          } else {
+            digitsToAnimate.push(
+              ...Array.from(
+                { length: difference },
+                (_, k) => allDigits[k + prevDigitIndex + 1]
+              )
+            );
+          }
+          childDigits = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                animationName: direction === "none" ? void 0 : animClass,
+                animationDuration: direction === "none" ? void 0 : DURATION_SECS,
+                animationFillMode: "forwards",
+                animationTimingFunction: "cubic-bezier(0.1, 1, 0.2, 1)",
+                animationDelay: delay,
+                color: foundDecimal ? decimalColor : wholeColor,
+                userSelect: "none"
+              },
+              children: digitsToAnimate.map((c, j) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: "odometer-digit odometer-child",
+                  style: {
+                    top: j === 0 ? 0 : `${100 * j}%`,
+                    height: lineHeight,
+                    lineHeight
+                  },
+                  children: c === "dot" ? "." : c === "comma" ? "," : c
+                },
+                `child_digit_${j}`
+              ))
+            }
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "span",
+          {
+            ref: digitRefs[i],
+            className: "odometer-digit",
+            style: {
+              color: foundDecimal ? decimalColor : wholeColor,
+              height: lineHeight,
+              lineHeight,
+              paddingRight: status === "transition" ? `${allDigitRefs[`d_${d}`]?.current?.offsetWidth}px` : "0"
+            },
+            children: [
+              status === "inactive" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: "odometer-digit odometer-child",
+                  style: {
+                    top: 0,
+                    height: lineHeight,
+                    lineHeight,
+                    width: `${allDigitRefs[`d_${d}`]?.current?.offsetWidth}px`
+                  },
+                  children: d === "dot" ? "." : d === "comma" ? "," : d
+                }
+              ),
+              status === "transition" && childDigits
+            ]
+          },
+          `digit_${i}`
+        );
+      }),
+      spaceAfter ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { paddingRight: spaceAfter } }) : null
+    ] }) })
+  ] });
+};
+var index_default = Odometer;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Odometer
+});
+/* @license Copyright 2024 w3ux authors & contributors
+SPDX-License-Identifier: GPL-3.0-only */

package/{cjs/index.css → index.css}

@@ -8,22 +8,22 @@ SPDX-License-Identifier: GPL-3.0-only */
   height: inherit;
   line-height: inherit;
   width: fit-content;
-}
-.odometer > .odometer-inner {
-  display: inline-block;
-  vertical-align: bottom;
-}
-.odometer > .odometer-inner .odometer-digit {
-  display: inline-block;
-  position: relative;
-  vertical-align: bottom;
-  z-index: 3;
-}
-.odometer > .odometer-inner .odometer-digit.odometer-child {
-  display: flex;
-  align-items: flex-end;
-  position: relative;
-  left: 0;
+  > .odometer-inner {
+    display: inline-block;
+    vertical-align: bottom;
+    .odometer-digit {
+      display: inline-block;
+      position: relative;
+      vertical-align: bottom;
+      z-index: 3;
+      &.odometer-child {
+        display: flex;
+        align-items: flex-end;
+        position: relative;
+        left: 0;
+      }
+    }
+  }
 }
 
 /* NOTE: Stylelint does not like inline scss variables to generate these. */
@@ -218,4 +218,6 @@ SPDX-License-Identifier: GPL-3.0-only */
   to {
     top: -1200%;
   }
-}
+}
+
+/*# sourceMappingURL=index.css.map */

package/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/index.css"],"names":[],"mappings":"AAAA;AAAA;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;IACE;IACA;IAEA;MACE;MACA;MACA;MACA;MAEA;QACE;QACA;QACA;QACA;;;;;;AAMR;AAEA;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE","file":"index.css"}

package/index.d.cts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Props {
+    value: number | string;
+    wholeColor?: string;
+    decimalColor?: string;
+    spaceBefore?: string | number;
+    spaceAfter?: string | number;
+    zeroDecimals?: number;
+}
+
+declare const Odometer: ({ value, spaceBefore, spaceAfter, wholeColor, decimalColor, zeroDecimals, }: Props) => react_jsx_runtime.JSX.Element;
+
+export { Odometer, Odometer as default };

package/index.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Props {
+    value: number | string;
+    wholeColor?: string;
+    decimalColor?: string;
+    spaceBefore?: string | number;
+    spaceAfter?: string | number;
+    zeroDecimals?: number;
+}
+
+declare const Odometer: ({ value, spaceBefore, spaceAfter, wholeColor, decimalColor, zeroDecimals, }: Props) => react_jsx_runtime.JSX.Element;
+
+export { Odometer, Odometer as default };

package/index.js

@@ -0,0 +1,191 @@
+// src/index.tsx
+import { createRef, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Odometer = ({
+  value,
+  spaceBefore = 0,
+  spaceAfter = "0.25rem",
+  wholeColor = "var(--text-color-primary)",
+  decimalColor = "var(--text-color-secondary)",
+  zeroDecimals = 0
+}) => {
+  const [allDigits] = useState([
+    "comma",
+    "dot",
+    "0",
+    "1",
+    "2",
+    "3",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9"
+  ]);
+  const [digits, setDigits] = useState([]);
+  const [prevDigits, setPrevDigits] = useState([]);
+  const [status, setStatus] = useState("inactive");
+  const [initialized, setInitialized] = useState(false);
+  const [odometerRef] = useState(createRef());
+  const [digitRefs, setDigitRefs] = useState([]);
+  const [allDigitRefs, setAllDigitRefs] = useState({});
+  const activeTransitionCounter = useRef(0);
+  const DURATION_MS = 750;
+  const DURATION_SECS = `${DURATION_MS / 1e3}s`;
+  useEffect(() => {
+    const all = Object.fromEntries(
+      Object.values(allDigits).map((v) => [`d_${v}`, createRef()])
+    );
+    setAllDigitRefs(all);
+  }, []);
+  useEffect(() => {
+    if (Object.keys(allDigitRefs)) {
+      value = String(value) === "0" ? Number(value).toFixed(zeroDecimals) : value;
+      const newDigits = value.toString().split("").map((v) => v === "." ? "dot" : v).map((v) => v === "," ? "comma" : v);
+      setDigits(newDigits);
+      if (!initialized) {
+        setInitialized(true);
+      } else {
+        setStatus("new");
+        setPrevDigits(digits);
+      }
+      setDigitRefs(Array(newDigits.length).fill(createRef()));
+    }
+  }, [value]);
+  useEffect(() => {
+    if (status === "new" && !digitRefs.find((d) => d.current === null)) {
+      setStatus("transition");
+      activeTransitionCounter.current++;
+      setTimeout(() => {
+        activeTransitionCounter.current--;
+        if (activeTransitionCounter.current === 0) {
+          setStatus("inactive");
+        }
+      }, DURATION_MS);
+    }
+  }, [status, digitRefs]);
+  const odometerCurrent = odometerRef.current;
+  let lineHeight = odometerCurrent ? window.getComputedStyle(odometerCurrent).lineHeight : "inherit";
+  lineHeight = lineHeight === "normal" ? "1.1rem" : lineHeight;
+  let foundDecimal = false;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    allDigits.map((d, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: allDigitRefs[`d_${d}`],
+        style: {
+          opacity: 0,
+          position: "fixed",
+          top: "-999%",
+          left: "-999%",
+          userSelect: "none"
+        },
+        children: d === "dot" ? "." : d === "comma" ? "," : d
+      },
+      `odometer_template_digit_${i}`
+    )),
+    /* @__PURE__ */ jsx("span", { className: "odometer", children: /* @__PURE__ */ jsxs("span", { className: "odometer-inner", ref: odometerRef, children: [
+      spaceBefore ? /* @__PURE__ */ jsx("span", { style: { paddingLeft: spaceBefore } }) : null,
+      digits.map((d, i) => {
+        if (d === "dot") {
+          foundDecimal = true;
+        }
+        let childDigits = null;
+        if (status === "transition") {
+          const digitsToAnimate = [];
+          const digitIndex = allDigits.indexOf(digits[i]);
+          const prevDigitIndex = allDigits.indexOf(prevDigits[i]);
+          const difference = Math.abs(digitIndex - prevDigitIndex);
+          const delay = `${0.01 * (digits.length - i - 1)}s`;
+          const direction = digitIndex === prevDigitIndex ? "none" : "down";
+          const animClass = `slide-${direction}-${difference} `;
+          digitsToAnimate.push(prevDigits[i]);
+          if (digitIndex < prevDigitIndex) {
+            digitsToAnimate.push(
+              ...Array.from(
+                { length: difference },
+                (_, k) => allDigits[prevDigitIndex - k - 1]
+              )
+            );
+          } else {
+            digitsToAnimate.push(
+              ...Array.from(
+                { length: difference },
+                (_, k) => allDigits[k + prevDigitIndex + 1]
+              )
+            );
+          }
+          childDigits = /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                animationName: direction === "none" ? void 0 : animClass,
+                animationDuration: direction === "none" ? void 0 : DURATION_SECS,
+                animationFillMode: "forwards",
+                animationTimingFunction: "cubic-bezier(0.1, 1, 0.2, 1)",
+                animationDelay: delay,
+                color: foundDecimal ? decimalColor : wholeColor,
+                userSelect: "none"
+              },
+              children: digitsToAnimate.map((c, j) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "odometer-digit odometer-child",
+                  style: {
+                    top: j === 0 ? 0 : `${100 * j}%`,
+                    height: lineHeight,
+                    lineHeight
+                  },
+                  children: c === "dot" ? "." : c === "comma" ? "," : c
+                },
+                `child_digit_${j}`
+              ))
+            }
+          );
+        }
+        return /* @__PURE__ */ jsxs(
+          "span",
+          {
+            ref: digitRefs[i],
+            className: "odometer-digit",
+            style: {
+              color: foundDecimal ? decimalColor : wholeColor,
+              height: lineHeight,
+              lineHeight,
+              paddingRight: status === "transition" ? `${allDigitRefs[`d_${d}`]?.current?.offsetWidth}px` : "0"
+            },
+            children: [
+              status === "inactive" && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "odometer-digit odometer-child",
+                  style: {
+                    top: 0,
+                    height: lineHeight,
+                    lineHeight,
+                    width: `${allDigitRefs[`d_${d}`]?.current?.offsetWidth}px`
+                  },
+                  children: d === "dot" ? "." : d === "comma" ? "," : d
+                }
+              ),
+              status === "transition" && childDigits
+            ]
+          },
+          `digit_${i}`
+        );
+      }),
+      spaceAfter ? /* @__PURE__ */ jsx("span", { style: { paddingRight: spaceAfter } }) : null
+    ] }) })
+  ] });
+};
+var index_default = Odometer;
+export {
+  Odometer,
+  index_default as default
+};
+/* @license Copyright 2024 w3ux authors & contributors
+SPDX-License-Identifier: GPL-3.0-only */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w3ux/react-odometer",
-  "version": "2.1.0",
+  "version": "2.2.2",
   "license": "GPL-3.0-only",
   "type": "module",
   "description": "An odometer effect used for number and balance transitions",
@@ -25,8 +25,12 @@
   },
   "exports": {
     ".": {
-      "import": "./mjs/index.js",
-      "require": "./cjs/index.js"
+      "import": "./index.js",
+      "require": "./index.cjs"
     }
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   }
 }

package/cjs/index.d.ts

@@ -1,4 +0,0 @@
-import './index.css';
-import type { Props } from './types';
-export declare const Odometer: ({ value, spaceBefore, spaceAfter, wholeColor, decimalColor, zeroDecimals, }: Props) => import("react/jsx-runtime").JSX.Element;
-export default Odometer;

package/cjs/index.js

@@ -1,138 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Odometer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-require("./index.css");
-const Odometer = ({ value, spaceBefore = 0, spaceAfter = '0.25rem', wholeColor = 'var(--text-color-primary)', decimalColor = 'var(--text-color-secondary)', zeroDecimals = 0, }) => {
-    const [allDigits] = (0, react_1.useState)([
-        'comma',
-        'dot',
-        '0',
-        '1',
-        '2',
-        '3',
-        '4',
-        '5',
-        '6',
-        '7',
-        '8',
-        '9',
-    ]);
-    const [digits, setDigits] = (0, react_1.useState)([]);
-    const [prevDigits, setPrevDigits] = (0, react_1.useState)([]);
-    const [status, setStatus] = (0, react_1.useState)('inactive');
-    const [initialized, setInitialized] = (0, react_1.useState)(false);
-    const [odometerRef] = (0, react_1.useState)((0, react_1.createRef)());
-    const [digitRefs, setDigitRefs] = (0, react_1.useState)([]);
-    const [allDigitRefs, setAllDigitRefs] = (0, react_1.useState)({});
-    const activeTransitionCounter = (0, react_1.useRef)(0);
-    const DURATION_MS = 750;
-    const DURATION_SECS = `${DURATION_MS / 1000}s`;
-    (0, react_1.useEffect)(() => {
-        const all = Object.fromEntries(Object.values(allDigits).map((v) => [`d_${v}`, (0, react_1.createRef)()]));
-        setAllDigitRefs(all);
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (Object.keys(allDigitRefs)) {
-            value =
-                String(value) === '0' ? Number(value).toFixed(zeroDecimals) : value;
-            const newDigits = value
-                .toString()
-                .split('')
-                .map((v) => (v === '.' ? 'dot' : v))
-                .map((v) => (v === ',' ? 'comma' : v));
-            setDigits(newDigits);
-            if (!initialized) {
-                setInitialized(true);
-            }
-            else {
-                setStatus('new');
-                setPrevDigits(digits);
-            }
-            setDigitRefs(Array(newDigits.length).fill((0, react_1.createRef)()));
-        }
-    }, [value]);
-    (0, react_1.useEffect)(() => {
-        if (status === 'new' && !digitRefs.find((d) => d.current === null)) {
-            setStatus('transition');
-            activeTransitionCounter.current++;
-            setTimeout(() => {
-                activeTransitionCounter.current--;
-                if (activeTransitionCounter.current === 0) {
-                    setStatus('inactive');
-                }
-            }, DURATION_MS);
-        }
-    }, [status, digitRefs]);
-    const odometerCurrent = odometerRef.current;
-    let lineHeight = odometerCurrent
-        ? window.getComputedStyle(odometerCurrent).lineHeight
-        : 'inherit';
-    lineHeight = lineHeight === 'normal' ? '1.1rem' : lineHeight;
-    let foundDecimal = false;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [allDigits.map((d, i) => ((0, jsx_runtime_1.jsx)("span", { ref: allDigitRefs[`d_${d}`], style: {
-                    opacity: 0,
-                    position: 'fixed',
-                    top: '-999%',
-                    left: '-999%',
-                    userSelect: 'none',
-                }, children: d === 'dot' ? '.' : d === 'comma' ? ',' : d }, `odometer_template_digit_${i}`))), (0, jsx_runtime_1.jsx)("span", { className: "odometer", children: (0, jsx_runtime_1.jsxs)("span", { className: "odometer-inner", ref: odometerRef, children: [spaceBefore ? (0, jsx_runtime_1.jsx)("span", { style: { paddingLeft: spaceBefore } }) : null, digits.map((d, i) => {
-                            var _a, _b, _c, _d;
-                            if (d === 'dot') {
-                                foundDecimal = true;
-                            }
-                            let childDigits = null;
-                            if (status === 'transition') {
-                                const digitsToAnimate = [];
-                                const digitIndex = allDigits.indexOf(digits[i]);
-                                const prevDigitIndex = allDigits.indexOf(prevDigits[i]);
-                                const difference = Math.abs(digitIndex - prevDigitIndex);
-                                const delay = `${0.01 * (digits.length - i - 1)}s`;
-                                const direction = digitIndex === prevDigitIndex ? 'none' : 'down';
-                                const animClass = `slide-${direction}-${difference} `;
-                                digitsToAnimate.push(prevDigits[i]);
-                                if (digitIndex < prevDigitIndex) {
-                                    digitsToAnimate.push(...Array.from({ length: difference }, (_, k) => allDigits[prevDigitIndex - k - 1]));
-                                }
-                                else {
-                                    digitsToAnimate.push(...Array.from({ length: difference }, (_, k) => allDigits[k + prevDigitIndex + 1]));
-                                }
-                                childDigits = ((0, jsx_runtime_1.jsx)("span", { style: {
-                                        position: 'absolute',
-                                        top: 0,
-                                        left: 0,
-                                        animationName: direction === 'none' ? undefined : animClass,
-                                        animationDuration: direction === 'none' ? undefined : DURATION_SECS,
-                                        animationFillMode: 'forwards',
-                                        animationTimingFunction: 'cubic-bezier(0.1, 1, 0.2, 1)',
-                                        animationDelay: delay,
-                                        color: foundDecimal ? decimalColor : wholeColor,
-                                        userSelect: 'none',
-                                    }, children: digitsToAnimate.map((c, j) => ((0, jsx_runtime_1.jsx)("span", { className: "odometer-digit odometer-child", style: {
-                                            top: j === 0 ? 0 : `${100 * j}%`,
-                                            height: lineHeight,
-                                            lineHeight,
-                                        }, children: c === 'dot' ? '.' : c === 'comma' ? ',' : c }, `child_digit_${j}`))) }));
-                            }
-                            return ((0, jsx_runtime_1.jsxs)("span", { ref: digitRefs[i], className: "odometer-digit", style: {
-                                    color: foundDecimal ? decimalColor : wholeColor,
-                                    height: lineHeight,
-                                    lineHeight,
-                                    paddingRight: status === 'transition'
-                                        ? `${(_b = (_a = allDigitRefs[`d_${d}`]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.offsetWidth}px`
-                                        : '0',
-                                }, children: [status === 'inactive' && ((0, jsx_runtime_1.jsx)("span", { className: "odometer-digit odometer-child", style: {
-                                            top: 0,
-                                            height: lineHeight,
-                                            lineHeight,
-                                            width: `${(_d = (_c = allDigitRefs[`d_${d}`]) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.offsetWidth}px`,
-                                        }, children: d === 'dot' ? '.' : d === 'comma' ? ',' : d })), status === 'transition' && childDigits] }, `digit_${i}`));
-                        }), spaceAfter ? (0, jsx_runtime_1.jsx)("span", { style: { paddingRight: spaceAfter } }) : null] }) })] }));
-};
-exports.Odometer = Odometer;
-exports.default = exports.Odometer;
-
-//# sourceMappingURL=index.js.map
-
-//# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nimport type { RefObject } from 'react'\nimport { createRef, useEffect, useRef, useState } from 'react'\nimport './index.css'\nimport type { Digit, DigitRef, Direction, Props, Status } from './types'\n\nexport const Odometer = ({\n  value,\n  spaceBefore = 0,\n  spaceAfter = '0.25rem',\n  wholeColor = 'var(--text-color-primary)',\n  decimalColor = 'var(--text-color-secondary)',\n  zeroDecimals = 0,\n}: Props) => {\n  // Store all possible digits.\n  const [allDigits] = useState<Digit[]>([\n    'comma',\n    'dot',\n    '0',\n    '1',\n    '2',\n    '3',\n    '4',\n    '5',\n    '6',\n    '7',\n    '8',\n    '9',\n  ])\n\n  // Store the digits of the current value.\n  const [digits, setDigits] = useState<Digit[]>([])\n\n  // Store digits of the previous value.\n  const [prevDigits, setPrevDigits] = useState<Digit[]>([])\n\n  // Store the status of the odometer (transitioning or stable).\n  const [status, setStatus] = useState<Status>('inactive')\n\n  // Store whether component has iniiialized.\n  const [initialized, setInitialized] = useState<boolean>(false)\n\n  // Store ref of the odometer.\n  const [odometerRef] = useState(createRef<HTMLSpanElement>())\n\n  // Store refs of each digit.\n  const [digitRefs, setDigitRefs] = useState<DigitRef[]>([])\n\n  // Store refs of each `all` digit.\n  const [allDigitRefs, setAllDigitRefs] = useState<\n    Record<string, RefObject<HTMLSpanElement | null>>\n  >({})\n\n  // Keep track of active transitions.\n  const activeTransitionCounter = useRef<number>(0)\n\n  // Transition duration.\n  const DURATION_MS = 750\n  const DURATION_SECS = `${DURATION_MS / 1000}s`\n\n  // Phase 0: populate `allDigitRefs`.\n  useEffect(() => {\n    const all: Record<\n      string,\n      RefObject<HTMLSpanElement | null>\n    > = Object.fromEntries(\n      Object.values(allDigits).map((v) => [`d_${v}`, createRef()])\n    )\n\n    setAllDigitRefs(all)\n  }, [])\n\n  // Phase 1: new digits and refs are added to the odometer.\n  useEffect(() => {\n    if (Object.keys(allDigitRefs)) {\n      value =\n        String(value) === '0' ? Number(value).toFixed(zeroDecimals) : value\n\n      const newDigits = value\n        .toString()\n        .split('')\n        .map((v) => (v === '.' ? 'dot' : v))\n        .map((v) => (v === ',' ? 'comma' : v)) as Digit[]\n\n      setDigits(newDigits)\n\n      if (!initialized) {\n        setInitialized(true)\n      } else {\n        setStatus('new')\n        setPrevDigits(digits)\n      }\n      setDigitRefs(Array(newDigits.length).fill(createRef()))\n    }\n  }, [value])\n\n  // Phase 2: set up digit transition.\n  useEffect(() => {\n    if (status === 'new' && !digitRefs.find((d) => d.current === null)) {\n      setStatus('transition')\n      activeTransitionCounter.current++\n\n      setTimeout(() => {\n        activeTransitionCounter.current--\n        if (activeTransitionCounter.current === 0) {\n          setStatus('inactive')\n        }\n      }, DURATION_MS)\n    }\n  }, [status, digitRefs])\n\n  const odometerCurrent: HTMLSpanElement | null = odometerRef.current\n  let lineHeight = odometerCurrent\n    ? window.getComputedStyle(odometerCurrent).lineHeight\n    : 'inherit'\n\n  // Fallback line height to `1.1rem` if `normal`.\n  lineHeight = lineHeight === 'normal' ? '1.1rem' : lineHeight\n\n  // Track whether decimal point has been found.\n  let foundDecimal = false\n\n  return (\n    <>\n      {allDigits.map((d, i) => (\n        <span\n          key={`odometer_template_digit_${i}`}\n          ref={allDigitRefs[`d_${d}`]}\n          style={{\n            opacity: 0,\n            position: 'fixed',\n            top: '-999%',\n            left: '-999%',\n            userSelect: 'none',\n          }}\n        >\n          {d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n        </span>\n      ))}\n      <span className=\"odometer\">\n        <span className=\"odometer-inner\" ref={odometerRef}>\n          {spaceBefore ? <span style={{ paddingLeft: spaceBefore }} /> : null}\n          {digits.map((d, i) => {\n            if (d === 'dot') {\n              foundDecimal = true\n            }\n\n            // If transitioning, get digits needed to animate.\n            let childDigits = null\n            if (status === 'transition') {\n              const digitsToAnimate = []\n              const digitIndex = allDigits.indexOf(digits[i])\n              const prevDigitIndex = allDigits.indexOf(prevDigits[i])\n              const difference = Math.abs(digitIndex - prevDigitIndex)\n              const delay = `${0.01 * (digits.length - i - 1)}s`\n              const direction: Direction =\n                digitIndex === prevDigitIndex ? 'none' : 'down'\n              const animClass = `slide-${direction}-${difference} `\n\n              // Push current prev digit to stop of stack.\n              digitsToAnimate.push(prevDigits[i])\n\n              // If transitioning between two digits, animate all digits in between.\n              if (digitIndex < prevDigitIndex) {\n                digitsToAnimate.push(\n                  ...Array.from(\n                    { length: difference },\n                    (_, k) => allDigits[prevDigitIndex - k - 1]\n                  )\n                )\n              } else {\n                digitsToAnimate.push(\n                  ...Array.from(\n                    { length: difference },\n                    (_, k) => allDigits[k + prevDigitIndex + 1]\n                  )\n                )\n              }\n\n              childDigits = (\n                <span\n                  style={{\n                    position: 'absolute',\n                    top: 0,\n                    left: 0,\n                    animationName: direction === 'none' ? undefined : animClass,\n                    animationDuration:\n                      direction === 'none' ? undefined : DURATION_SECS,\n                    animationFillMode: 'forwards',\n                    animationTimingFunction: 'cubic-bezier(0.1, 1, 0.2, 1)',\n                    animationDelay: delay,\n                    color: foundDecimal ? decimalColor : wholeColor,\n                    userSelect: 'none',\n                  }}\n                >\n                  {digitsToAnimate.map((c, j) => (\n                    <span\n                      key={`child_digit_${j}`}\n                      className=\"odometer-digit odometer-child\"\n                      style={{\n                        top: j === 0 ? 0 : `${100 * j}%`,\n                        height: lineHeight,\n                        lineHeight,\n                      }}\n                    >\n                      {c === 'dot' ? '.' : c === 'comma' ? ',' : c}\n                    </span>\n                  ))}\n                </span>\n              )\n            }\n\n            return (\n              <span\n                key={`digit_${i}`}\n                ref={digitRefs[i]}\n                className=\"odometer-digit\"\n                style={{\n                  color: foundDecimal ? decimalColor : wholeColor,\n                  height: lineHeight,\n                  lineHeight,\n                  paddingRight:\n                    status === 'transition'\n                      ? `${allDigitRefs[`d_${d}`]?.current?.offsetWidth}px`\n                      : '0',\n                }}\n              >\n                {status === 'inactive' && (\n                  <span\n                    className=\"odometer-digit odometer-child\"\n                    style={{\n                      top: 0,\n                      height: lineHeight,\n                      lineHeight,\n                      width: `${\n                        allDigitRefs[`d_${d}`]?.current?.offsetWidth\n                      }px`,\n                    }}\n                  >\n                    {d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n                  </span>\n                )}\n                {status === 'transition' && childDigits}\n              </span>\n            )\n          })}\n          {spaceAfter ? <span style={{ paddingRight: spaceAfter }} /> : null}\n        </span>\n      </span>\n    </>\n  )\n}\n\nexport default Odometer\n"]}

package/cjs/types.d.ts

@@ -1,13 +0,0 @@
-import type { RefObject } from 'react';
-export interface Props {
-    value: number | string;
-    wholeColor?: string;
-    decimalColor?: string;
-    spaceBefore?: string | number;
-    spaceAfter?: string | number;
-    zeroDecimals?: number;
-}
-export type Digit = 'comma' | 'dot' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
-export type DigitRef = RefObject<HTMLSpanElement>;
-export type Status = 'new' | 'inactive' | 'transition' | 'finished';
-export type Direction = 'down' | 'none';

package/cjs/types.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-
-//# sourceMappingURL=types.js.map
-
-//# sourceMappingURL=types.js.map

package/cjs/types.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/types.ts"],"names":[],"mappings":"","file":"types.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nimport type { RefObject } from 'react'\n\nexport interface Props {\n  value: number | string\n  wholeColor?: string\n  decimalColor?: string\n  spaceBefore?: string | number\n  spaceAfter?: string | number\n  zeroDecimals?: number\n}\n\nexport type Digit =\n  | 'comma'\n  | 'dot'\n  | '0'\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n\nexport type DigitRef = RefObject<HTMLSpanElement>\n\nexport type Status = 'new' | 'inactive' | 'transition' | 'finished'\n\nexport type Direction = 'down' | 'none'\n"]}

package/mjs/index.css

@@ -1,221 +0,0 @@
-/* @license Copyright 2024 w3ux authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
-.odometer {
-  display: flex;
-  align-items: flex-end;
-  position: relative;
-  overflow: hidden;
-  height: inherit;
-  line-height: inherit;
-  width: fit-content;
-}
-.odometer > .odometer-inner {
-  display: inline-block;
-  vertical-align: bottom;
-}
-.odometer > .odometer-inner .odometer-digit {
-  display: inline-block;
-  position: relative;
-  vertical-align: bottom;
-  z-index: 3;
-}
-.odometer > .odometer-inner .odometer-digit.odometer-child {
-  display: flex;
-  align-items: flex-end;
-  position: relative;
-  left: 0;
-}
-
-/* NOTE: Stylelint does not like inline scss variables to generate these. */
-@keyframes slide-up-1 {
-  from {
-    top: 0;
-  }
-  to {
-    top: 100%;
-  }
-}
-@keyframes slide-up-2 {
-  from {
-    top: 0;
-  }
-  to {
-    top: 200%;
-  }
-}
-@keyframes slide-up-3 {
-  from {
-    top: 0;
-  }
-  to {
-    top: 300%;
-  }
-}
-@keyframes slide-up-4 {
-  from {
-    top: 0;
-  }
-  to {
-    top: 400%;
-  }
-}
-@keyframes slide-up-5 {
-  from {
-    top: 0;
-  }
-  to {
-    top: 500%;
-  }
-}
-@keyframes slide-up-6 {
-  from {
-    top: 0;
-  }
-  to {
-    top: 600%;
-  }
-}
-@keyframes slide-up-7 {
-  from {
-    top: 0;
-  }
-  to {
-    top: 700%;
-  }
-}
-@keyframes slide-up-8 {
-  from {
-    top: 0;
-  }
-  to {
-    top: 800%;
-  }
-}
-@keyframes slide-up-9 {
-  from {
-    top: 0;
-  }
-  to {
-    top: 900%;
-  }
-}
-@keyframes slide-up-10 {
-  from {
-    top: 0;
-  }
-  to {
-    top: 1000%;
-  }
-}
-@keyframes slide-up-11 {
-  from {
-    top: 0;
-  }
-  to {
-    top: 1100%;
-  }
-}
-@keyframes slide-up-12 {
-  from {
-    top: 0;
-  }
-  to {
-    top: 1200%;
-  }
-}
-@keyframes slide-down-1 {
-  from {
-    top: 0;
-  }
-  to {
-    top: -100%;
-  }
-}
-@keyframes slide-down-2 {
-  from {
-    top: 0;
-  }
-  to {
-    top: -200%;
-  }
-}
-@keyframes slide-down-3 {
-  from {
-    top: 0;
-  }
-  to {
-    top: -300%;
-  }
-}
-@keyframes slide-down-4 {
-  from {
-    top: 0;
-  }
-  to {
-    top: -400%;
-  }
-}
-@keyframes slide-down-5 {
-  from {
-    top: 0;
-  }
-  to {
-    top: -500%;
-  }
-}
-@keyframes slide-down-6 {
-  from {
-    top: 0;
-  }
-  to {
-    top: -600%;
-  }
-}
-@keyframes slide-down-7 {
-  from {
-    top: 0;
-  }
-  to {
-    top: -700%;
-  }
-}
-@keyframes slide-down-8 {
-  from {
-    top: 0;
-  }
-  to {
-    top: -800%;
-  }
-}
-@keyframes slide-down-9 {
-  from {
-    top: 0;
-  }
-  to {
-    top: -900%;
-  }
-}
-@keyframes slide-down-10 {
-  from {
-    top: 0;
-  }
-  to {
-    top: -1000%;
-  }
-}
-@keyframes slide-down-11 {
-  from {
-    top: 0;
-  }
-  to {
-    top: -1100%;
-  }
-}
-@keyframes slide-down-12 {
-  from {
-    top: 0;
-  }
-  to {
-    top: -1200%;
-  }
-}

package/mjs/index.d.ts

@@ -1,4 +0,0 @@
-import './index.css';
-import type { Props } from './types';
-export declare const Odometer: ({ value, spaceBefore, spaceAfter, wholeColor, decimalColor, zeroDecimals, }: Props) => import("react/jsx-runtime").JSX.Element;
-export default Odometer;

package/mjs/index.js

@@ -1,133 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createRef, useEffect, useRef, useState } from 'react';
-import './index.css';
-export const Odometer = ({ value, spaceBefore = 0, spaceAfter = '0.25rem', wholeColor = 'var(--text-color-primary)', decimalColor = 'var(--text-color-secondary)', zeroDecimals = 0, }) => {
-    const [allDigits] = useState([
-        'comma',
-        'dot',
-        '0',
-        '1',
-        '2',
-        '3',
-        '4',
-        '5',
-        '6',
-        '7',
-        '8',
-        '9',
-    ]);
-    const [digits, setDigits] = useState([]);
-    const [prevDigits, setPrevDigits] = useState([]);
-    const [status, setStatus] = useState('inactive');
-    const [initialized, setInitialized] = useState(false);
-    const [odometerRef] = useState(createRef());
-    const [digitRefs, setDigitRefs] = useState([]);
-    const [allDigitRefs, setAllDigitRefs] = useState({});
-    const activeTransitionCounter = useRef(0);
-    const DURATION_MS = 750;
-    const DURATION_SECS = `${DURATION_MS / 1000}s`;
-    useEffect(() => {
-        const all = Object.fromEntries(Object.values(allDigits).map((v) => [`d_${v}`, createRef()]));
-        setAllDigitRefs(all);
-    }, []);
-    useEffect(() => {
-        if (Object.keys(allDigitRefs)) {
-            value =
-                String(value) === '0' ? Number(value).toFixed(zeroDecimals) : value;
-            const newDigits = value
-                .toString()
-                .split('')
-                .map((v) => (v === '.' ? 'dot' : v))
-                .map((v) => (v === ',' ? 'comma' : v));
-            setDigits(newDigits);
-            if (!initialized) {
-                setInitialized(true);
-            }
-            else {
-                setStatus('new');
-                setPrevDigits(digits);
-            }
-            setDigitRefs(Array(newDigits.length).fill(createRef()));
-        }
-    }, [value]);
-    useEffect(() => {
-        if (status === 'new' && !digitRefs.find((d) => d.current === null)) {
-            setStatus('transition');
-            activeTransitionCounter.current++;
-            setTimeout(() => {
-                activeTransitionCounter.current--;
-                if (activeTransitionCounter.current === 0) {
-                    setStatus('inactive');
-                }
-            }, DURATION_MS);
-        }
-    }, [status, digitRefs]);
-    const odometerCurrent = odometerRef.current;
-    let lineHeight = odometerCurrent
-        ? window.getComputedStyle(odometerCurrent).lineHeight
-        : 'inherit';
-    lineHeight = lineHeight === 'normal' ? '1.1rem' : lineHeight;
-    let foundDecimal = false;
-    return (_jsxs(_Fragment, { children: [allDigits.map((d, i) => (_jsx("span", { ref: allDigitRefs[`d_${d}`], style: {
-                    opacity: 0,
-                    position: 'fixed',
-                    top: '-999%',
-                    left: '-999%',
-                    userSelect: 'none',
-                }, children: d === 'dot' ? '.' : d === 'comma' ? ',' : d }, `odometer_template_digit_${i}`))), _jsx("span", { className: "odometer", children: _jsxs("span", { className: "odometer-inner", ref: odometerRef, children: [spaceBefore ? _jsx("span", { style: { paddingLeft: spaceBefore } }) : null, digits.map((d, i) => {
-                            if (d === 'dot') {
-                                foundDecimal = true;
-                            }
-                            let childDigits = null;
-                            if (status === 'transition') {
-                                const digitsToAnimate = [];
-                                const digitIndex = allDigits.indexOf(digits[i]);
-                                const prevDigitIndex = allDigits.indexOf(prevDigits[i]);
-                                const difference = Math.abs(digitIndex - prevDigitIndex);
-                                const delay = `${0.01 * (digits.length - i - 1)}s`;
-                                const direction = digitIndex === prevDigitIndex ? 'none' : 'down';
-                                const animClass = `slide-${direction}-${difference} `;
-                                digitsToAnimate.push(prevDigits[i]);
-                                if (digitIndex < prevDigitIndex) {
-                                    digitsToAnimate.push(...Array.from({ length: difference }, (_, k) => allDigits[prevDigitIndex - k - 1]));
-                                }
-                                else {
-                                    digitsToAnimate.push(...Array.from({ length: difference }, (_, k) => allDigits[k + prevDigitIndex + 1]));
-                                }
-                                childDigits = (_jsx("span", { style: {
-                                        position: 'absolute',
-                                        top: 0,
-                                        left: 0,
-                                        animationName: direction === 'none' ? undefined : animClass,
-                                        animationDuration: direction === 'none' ? undefined : DURATION_SECS,
-                                        animationFillMode: 'forwards',
-                                        animationTimingFunction: 'cubic-bezier(0.1, 1, 0.2, 1)',
-                                        animationDelay: delay,
-                                        color: foundDecimal ? decimalColor : wholeColor,
-                                        userSelect: 'none',
-                                    }, children: digitsToAnimate.map((c, j) => (_jsx("span", { className: "odometer-digit odometer-child", style: {
-                                            top: j === 0 ? 0 : `${100 * j}%`,
-                                            height: lineHeight,
-                                            lineHeight,
-                                        }, children: c === 'dot' ? '.' : c === 'comma' ? ',' : c }, `child_digit_${j}`))) }));
-                            }
-                            return (_jsxs("span", { ref: digitRefs[i], className: "odometer-digit", style: {
-                                    color: foundDecimal ? decimalColor : wholeColor,
-                                    height: lineHeight,
-                                    lineHeight,
-                                    paddingRight: status === 'transition'
-                                        ? `${allDigitRefs[`d_${d}`]?.current?.offsetWidth}px`
-                                        : '0',
-                                }, children: [status === 'inactive' && (_jsx("span", { className: "odometer-digit odometer-child", style: {
-                                            top: 0,
-                                            height: lineHeight,
-                                            lineHeight,
-                                            width: `${allDigitRefs[`d_${d}`]?.current?.offsetWidth}px`,
-                                        }, children: d === 'dot' ? '.' : d === 'comma' ? ',' : d })), status === 'transition' && childDigits] }, `digit_${i}`));
-                        }), spaceAfter ? _jsx("span", { style: { paddingRight: spaceAfter } }) : null] }) })] }));
-};
-export default Odometer;
-
-//# sourceMappingURL=index.js.map
-
-//# sourceMappingURL=index.js.map

package/mjs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nimport type { RefObject } from 'react'\nimport { createRef, useEffect, useRef, useState } from 'react'\nimport './index.css'\nimport type { Digit, DigitRef, Direction, Props, Status } from './types'\n\nexport const Odometer = ({\n  value,\n  spaceBefore = 0,\n  spaceAfter = '0.25rem',\n  wholeColor = 'var(--text-color-primary)',\n  decimalColor = 'var(--text-color-secondary)',\n  zeroDecimals = 0,\n}: Props) => {\n  // Store all possible digits.\n  const [allDigits] = useState<Digit[]>([\n    'comma',\n    'dot',\n    '0',\n    '1',\n    '2',\n    '3',\n    '4',\n    '5',\n    '6',\n    '7',\n    '8',\n    '9',\n  ])\n\n  // Store the digits of the current value.\n  const [digits, setDigits] = useState<Digit[]>([])\n\n  // Store digits of the previous value.\n  const [prevDigits, setPrevDigits] = useState<Digit[]>([])\n\n  // Store the status of the odometer (transitioning or stable).\n  const [status, setStatus] = useState<Status>('inactive')\n\n  // Store whether component has iniiialized.\n  const [initialized, setInitialized] = useState<boolean>(false)\n\n  // Store ref of the odometer.\n  const [odometerRef] = useState(createRef<HTMLSpanElement>())\n\n  // Store refs of each digit.\n  const [digitRefs, setDigitRefs] = useState<DigitRef[]>([])\n\n  // Store refs of each `all` digit.\n  const [allDigitRefs, setAllDigitRefs] = useState<\n    Record<string, RefObject<HTMLSpanElement | null>>\n  >({})\n\n  // Keep track of active transitions.\n  const activeTransitionCounter = useRef<number>(0)\n\n  // Transition duration.\n  const DURATION_MS = 750\n  const DURATION_SECS = `${DURATION_MS / 1000}s`\n\n  // Phase 0: populate `allDigitRefs`.\n  useEffect(() => {\n    const all: Record<\n      string,\n      RefObject<HTMLSpanElement | null>\n    > = Object.fromEntries(\n      Object.values(allDigits).map((v) => [`d_${v}`, createRef()])\n    )\n\n    setAllDigitRefs(all)\n  }, [])\n\n  // Phase 1: new digits and refs are added to the odometer.\n  useEffect(() => {\n    if (Object.keys(allDigitRefs)) {\n      value =\n        String(value) === '0' ? Number(value).toFixed(zeroDecimals) : value\n\n      const newDigits = value\n        .toString()\n        .split('')\n        .map((v) => (v === '.' ? 'dot' : v))\n        .map((v) => (v === ',' ? 'comma' : v)) as Digit[]\n\n      setDigits(newDigits)\n\n      if (!initialized) {\n        setInitialized(true)\n      } else {\n        setStatus('new')\n        setPrevDigits(digits)\n      }\n      setDigitRefs(Array(newDigits.length).fill(createRef()))\n    }\n  }, [value])\n\n  // Phase 2: set up digit transition.\n  useEffect(() => {\n    if (status === 'new' && !digitRefs.find((d) => d.current === null)) {\n      setStatus('transition')\n      activeTransitionCounter.current++\n\n      setTimeout(() => {\n        activeTransitionCounter.current--\n        if (activeTransitionCounter.current === 0) {\n          setStatus('inactive')\n        }\n      }, DURATION_MS)\n    }\n  }, [status, digitRefs])\n\n  const odometerCurrent: HTMLSpanElement | null = odometerRef.current\n  let lineHeight = odometerCurrent\n    ? window.getComputedStyle(odometerCurrent).lineHeight\n    : 'inherit'\n\n  // Fallback line height to `1.1rem` if `normal`.\n  lineHeight = lineHeight === 'normal' ? '1.1rem' : lineHeight\n\n  // Track whether decimal point has been found.\n  let foundDecimal = false\n\n  return (\n    <>\n      {allDigits.map((d, i) => (\n        <span\n          key={`odometer_template_digit_${i}`}\n          ref={allDigitRefs[`d_${d}`]}\n          style={{\n            opacity: 0,\n            position: 'fixed',\n            top: '-999%',\n            left: '-999%',\n            userSelect: 'none',\n          }}\n        >\n          {d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n        </span>\n      ))}\n      <span className=\"odometer\">\n        <span className=\"odometer-inner\" ref={odometerRef}>\n          {spaceBefore ? <span style={{ paddingLeft: spaceBefore }} /> : null}\n          {digits.map((d, i) => {\n            if (d === 'dot') {\n              foundDecimal = true\n            }\n\n            // If transitioning, get digits needed to animate.\n            let childDigits = null\n            if (status === 'transition') {\n              const digitsToAnimate = []\n              const digitIndex = allDigits.indexOf(digits[i])\n              const prevDigitIndex = allDigits.indexOf(prevDigits[i])\n              const difference = Math.abs(digitIndex - prevDigitIndex)\n              const delay = `${0.01 * (digits.length - i - 1)}s`\n              const direction: Direction =\n                digitIndex === prevDigitIndex ? 'none' : 'down'\n              const animClass = `slide-${direction}-${difference} `\n\n              // Push current prev digit to stop of stack.\n              digitsToAnimate.push(prevDigits[i])\n\n              // If transitioning between two digits, animate all digits in between.\n              if (digitIndex < prevDigitIndex) {\n                digitsToAnimate.push(\n                  ...Array.from(\n                    { length: difference },\n                    (_, k) => allDigits[prevDigitIndex - k - 1]\n                  )\n                )\n              } else {\n                digitsToAnimate.push(\n                  ...Array.from(\n                    { length: difference },\n                    (_, k) => allDigits[k + prevDigitIndex + 1]\n                  )\n                )\n              }\n\n              childDigits = (\n                <span\n                  style={{\n                    position: 'absolute',\n                    top: 0,\n                    left: 0,\n                    animationName: direction === 'none' ? undefined : animClass,\n                    animationDuration:\n                      direction === 'none' ? undefined : DURATION_SECS,\n                    animationFillMode: 'forwards',\n                    animationTimingFunction: 'cubic-bezier(0.1, 1, 0.2, 1)',\n                    animationDelay: delay,\n                    color: foundDecimal ? decimalColor : wholeColor,\n                    userSelect: 'none',\n                  }}\n                >\n                  {digitsToAnimate.map((c, j) => (\n                    <span\n                      key={`child_digit_${j}`}\n                      className=\"odometer-digit odometer-child\"\n                      style={{\n                        top: j === 0 ? 0 : `${100 * j}%`,\n                        height: lineHeight,\n                        lineHeight,\n                      }}\n                    >\n                      {c === 'dot' ? '.' : c === 'comma' ? ',' : c}\n                    </span>\n                  ))}\n                </span>\n              )\n            }\n\n            return (\n              <span\n                key={`digit_${i}`}\n                ref={digitRefs[i]}\n                className=\"odometer-digit\"\n                style={{\n                  color: foundDecimal ? decimalColor : wholeColor,\n                  height: lineHeight,\n                  lineHeight,\n                  paddingRight:\n                    status === 'transition'\n                      ? `${allDigitRefs[`d_${d}`]?.current?.offsetWidth}px`\n                      : '0',\n                }}\n              >\n                {status === 'inactive' && (\n                  <span\n                    className=\"odometer-digit odometer-child\"\n                    style={{\n                      top: 0,\n                      height: lineHeight,\n                      lineHeight,\n                      width: `${\n                        allDigitRefs[`d_${d}`]?.current?.offsetWidth\n                      }px`,\n                    }}\n                  >\n                    {d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n                  </span>\n                )}\n                {status === 'transition' && childDigits}\n              </span>\n            )\n          })}\n          {spaceAfter ? <span style={{ paddingRight: spaceAfter }} /> : null}\n        </span>\n      </span>\n    </>\n  )\n}\n\nexport default Odometer\n"]}

package/mjs/types.d.ts

@@ -1,13 +0,0 @@
-import type { RefObject } from 'react';
-export interface Props {
-    value: number | string;
-    wholeColor?: string;
-    decimalColor?: string;
-    spaceBefore?: string | number;
-    spaceAfter?: string | number;
-    zeroDecimals?: number;
-}
-export type Digit = 'comma' | 'dot' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
-export type DigitRef = RefObject<HTMLSpanElement>;
-export type Status = 'new' | 'inactive' | 'transition' | 'finished';
-export type Direction = 'down' | 'none';

package/mjs/types.js

@@ -1,5 +0,0 @@
-export {};
-
-//# sourceMappingURL=types.js.map
-
-//# sourceMappingURL=types.js.map

package/mjs/types.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/types.ts"],"names":[],"mappings":"","file":"types.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nimport type { RefObject } from 'react'\n\nexport interface Props {\n  value: number | string\n  wholeColor?: string\n  decimalColor?: string\n  spaceBefore?: string | number\n  spaceAfter?: string | number\n  zeroDecimals?: number\n}\n\nexport type Digit =\n  | 'comma'\n  | 'dot'\n  | '0'\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n\nexport type DigitRef = RefObject<HTMLSpanElement>\n\nexport type Status = 'new' | 'inactive' | 'transition' | 'finished'\n\nexport type Direction = 'down' | 'none'\n"]}