feat: numbers

packages/torph/src/index.ts

@@ -1,3 +1,6 @@
 export { DEFAULT_AS, DEFAULT_TEXT_MORPH_OPTIONS, MorphController, TextMorph } from "./lib/text-morph";
 export type { TextMorphOptions } from "./lib/text-morph/types";
-export type { SpringParams } from "./lib/text-morph/utils/spring";
+export type { SpringParams } from "./lib/utils/spring";
+
+export { DEFAULT_NUMBER_MORPH_OPTIONS, NumberMorph } from "./lib/number-morph";
+export type { NumberMorphOptions } from "./lib/number-morph/types";

packages/torph/src/lib/number-morph/animate.ts

@@ -0,0 +1,120 @@
+import {
+  parseTranslate,
+  cancelAnimations,
+  fadeDuration,
+} from "../utils/animate";
+
+export function animateNumberExit(
+  child: HTMLElement,
+  options: {
+    dx: number;
+    dy: number;
+    slideDistance: number;
+    duration: number;
+    ease: string;
+  },
+) {
+  const { dx, dy, slideDistance, duration, ease } = options;
+
+  child.animate(
+    {
+      transform: `translate(${dx}px, ${dy + slideDistance}px)`,
+      offset: 1,
+    },
+    {
+      duration,
+      easing: ease,
+      fill: "both",
+    },
+  );
+
+  const fadeAnimation = child.animate(
+    {
+      opacity: 0,
+      offset: 1,
+    },
+    {
+      duration: fadeDuration(duration, 0.25),
+      easing: "linear",
+      fill: "both",
+    },
+  );
+
+  fadeAnimation.onfinish = () => child.remove();
+}
+
+export function animateNumberEnter(
+  child: HTMLElement,
+  options: {
+    deltaX: number;
+    deltaY: number;
+    slideDistance: number;
+    kind: "digit" | "symbol";
+    duration: number;
+    ease: string;
+  },
+) {
+  const { deltaX, deltaY, slideDistance, kind, duration, ease } = options;
+
+  const prev = cancelAnimations(child);
+
+  const slideOffset = kind === "digit" ? -slideDistance : slideDistance;
+  const startX = deltaX + prev.tx;
+  const startY = deltaY + prev.ty + slideOffset;
+
+  child.animate(
+    {
+      transform: `translate(${startX}px, ${startY}px)`,
+      offset: 0,
+    },
+    {
+      duration,
+      easing: ease,
+      fill: "both",
+    },
+  );
+
+  const startOpacity = prev.opacity >= 1 ? 0 : prev.opacity;
+  if (startOpacity < 1) {
+    child.animate(
+      [{ opacity: startOpacity }, { opacity: 1 }],
+      {
+        duration: fadeDuration(duration, 0.5),
+        easing: "linear",
+        fill: "both",
+      },
+    );
+  }
+}
+
+export function animateNumberPersist(
+  child: HTMLElement,
+  options: {
+    deltaX: number;
+    deltaY: number;
+    duration: number;
+    ease: string;
+  },
+) {
+  const { deltaX, deltaY, duration, ease } = options;
+
+  const { tx, ty } = parseTranslate(child);
+  child.getAnimations().forEach((a) => a.cancel());
+
+  const startX = deltaX + tx;
+  const startY = deltaY + ty;
+
+  if (startX === 0 && startY === 0) return;
+
+  child.animate(
+    {
+      transform: `translate(${startX}px, ${startY}px)`,
+      offset: 0,
+    },
+    {
+      duration,
+      easing: ease,
+      fill: "both",
+    },
+  );
+}

packages/torph/src/lib/number-morph/controller.ts

@@ -0,0 +1,45 @@
+import { NumberMorph } from "./index";
+import type { NumberMorphOptions } from "./types";
+
+export class NumberMorphController {
+  private instance: NumberMorph | null = null;
+  private lastValue: number | string = "";
+  private lastCursorIndex?: number;
+  private configKey = "";
+
+  attach(element: HTMLElement, options: Omit<NumberMorphOptions, "element">) {
+    this.instance?.destroy();
+    this.instance = new NumberMorph({ element, ...options });
+    this.configKey = NumberMorphController.serializeConfig(options);
+
+    if (this.lastValue !== "") {
+      this.instance.update(this.lastValue, this.lastCursorIndex);
+    }
+  }
+
+  update(value: number | string, cursorIndex?: number) {
+    this.lastValue = value;
+    this.lastCursorIndex = cursorIndex;
+    this.instance?.update(value, cursorIndex);
+  }
+
+  needsRecreate(options: Omit<NumberMorphOptions, "element">): boolean {
+    return NumberMorphController.serializeConfig(options) !== this.configKey;
+  }
+
+  destroy() {
+    this.instance?.destroy();
+    this.instance = null;
+  }
+
+  static serializeConfig(options: Omit<NumberMorphOptions, "element">): string {
+    return JSON.stringify({
+      ease: options.ease,
+      duration: options.duration,
+      locale: options.locale,
+      decimals: options.decimals,
+      disabled: options.disabled,
+      respectReducedMotion: options.respectReducedMotion,
+    });
+  }
+}