@number-flow/react 0.1.1 → 0.1.3

package/README.md

@@ -1,6 +1,6 @@
 # Number Flow for React
 
-A lightweight React component to transition & format numbers.
+A React component to transition & format numbers.
 
 [![NumberFlow for React](https://number-flow.barvian.me/preview.webp)](https://number-flow.barvian.me)
 

package/dist/framer-motion.d.mts

@@ -1,5 +1,7 @@
-import { Transition } from 'framer-motion';
+import { Easing, Transition } from 'framer-motion';
 
-declare const defaultXTiming: Transition;
+declare function toEase(_easing: string): Easing;
+declare function toTransition(timing: EffectTiming): Transition;
+declare function useTiming(timing: EffectTiming): Transition;
 
-export { defaultXTiming };
+export { toEase, toTransition, useTiming };

package/dist/framer-motion.d.ts

@@ -1,5 +1,7 @@
-import { Transition } from 'framer-motion';
+import { Easing, Transition } from 'framer-motion';
 
-declare const defaultXTiming: Transition;
+declare function toEase(_easing: string): Easing;
+declare function toTransition(timing: EffectTiming): Transition;
+declare function useTiming(timing: EffectTiming): Transition;
 
-export { defaultXTiming };
+export { toEase, toTransition, useTiming };

package/dist/framer-motion.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,28 +17,84 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/framer-motion.ts
 var framer_motion_exports = {};
 __export(framer_motion_exports, {
-  defaultXTiming: () => defaultXTiming
+  toEase: () => toEase,
+  toTransition: () => toTransition,
+  useTiming: () => useTiming
 });
 module.exports = __toCommonJS(framer_motion_exports);
-var import_number_flow = require("number-flow");
+var React = __toESM(require("react"));
 var import_framer_motion = require("framer-motion");
-var defaultTransformer = (0, import_framer_motion.transform)(
-  import_number_flow.defaultXTimingLinearPoints.map((_, i) => i / (import_number_flow.defaultXTimingLinearPoints.length - 1)),
-  import_number_flow.defaultXTimingLinearPoints
-);
-var defaultXTiming = import_number_flow.supportsLinear ? {
-  duration: import_number_flow.defaultXTimingLinearDuration / 1e3,
-  ease: defaultTransformer
-} : {
-  duration: import_number_flow.defaultXTimingFallbackDuration / 1e3,
-  easing: import_number_flow.defaultXTimingFallbackPoints
-};
+var bezierRegExp = /^cubic-bezier\((.*?),(.*?),(.*?),(.*?)\)$/;
+var linearRegExp = /^linear\((.*?)\)$/;
+function toEase(_easing) {
+  const easing = _easing.trim();
+  if (easing === "linear") return easing;
+  if (easing === "ease-in") return "easeIn";
+  if (easing === "ease-out") return "easeOut";
+  if (easing === "ease-in-out") return "easeInOut";
+  const bezierMatch = easing.match(bezierRegExp);
+  if (bezierMatch) {
+    return bezierMatch.slice(1).map(parseFloat);
+  }
+  const linearMatch = easing.match(linearRegExp);
+  const linearExpr = linearMatch?.[1];
+  if (linearExpr) {
+    const points = linearExpr.split(",");
+    const times = [];
+    const values = [];
+    try {
+      points.forEach((point, i) => {
+        const [p1, p2] = point.trim().split(/\s+/);
+        if (p1?.includes("%")) {
+          times.push(parseFloat(p1) / 100);
+          values.push(parseFloat(p2));
+        } else if (p2?.includes("%")) {
+          times.push(parseFloat(p2) / 100);
+          values.push(parseFloat(p1));
+        } else {
+          times.push(i / (points.length - 1));
+          values.push(parseFloat(p1));
+        }
+      });
+    } catch {
+      throw new Error(`Cannot parse linear() expression: ${easing}`);
+    }
+    return (0, import_framer_motion.transform)(times, values);
+  }
+  throw new Error(`Cannot convert ${easing} to a Framer Motion easing`);
+}
+function toTransition(timing) {
+  const { duration = 0, delay = 0, easing = "ease" } = timing;
+  if (typeof duration != "number") throw new Error("Duration must be a number");
+  return {
+    duration: duration / 1e3,
+    delay: delay / 1e3,
+    ease: toEase(easing)
+  };
+}
+function useTiming(timing) {
+  const [ret, setRet] = React.useState(toTransition(timing));
+  React.useEffect(() => {
+    setRet(toTransition(timing));
+  }, [timing]);
+  return ret;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  defaultXTiming
+  toEase,
+  toTransition,
+  useTiming
 });

package/dist/framer-motion.mjs

@@ -1,23 +1,63 @@
 // src/framer-motion.ts
-import {
-  supportsLinear,
-  defaultXTimingFallbackPoints,
-  defaultXTimingFallbackDuration,
-  defaultXTimingLinearDuration,
-  defaultXTimingLinearPoints
-} from "number-flow";
+import * as React from "react";
 import { transform } from "framer-motion";
-var defaultTransformer = transform(
-  defaultXTimingLinearPoints.map((_, i) => i / (defaultXTimingLinearPoints.length - 1)),
-  defaultXTimingLinearPoints
-);
-var defaultXTiming = supportsLinear ? {
-  duration: defaultXTimingLinearDuration / 1e3,
-  ease: defaultTransformer
-} : {
-  duration: defaultXTimingFallbackDuration / 1e3,
-  easing: defaultXTimingFallbackPoints
-};
+var bezierRegExp = /^cubic-bezier\((.*?),(.*?),(.*?),(.*?)\)$/;
+var linearRegExp = /^linear\((.*?)\)$/;
+function toEase(_easing) {
+  const easing = _easing.trim();
+  if (easing === "linear") return easing;
+  if (easing === "ease-in") return "easeIn";
+  if (easing === "ease-out") return "easeOut";
+  if (easing === "ease-in-out") return "easeInOut";
+  const bezierMatch = easing.match(bezierRegExp);
+  if (bezierMatch) {
+    return bezierMatch.slice(1).map(parseFloat);
+  }
+  const linearMatch = easing.match(linearRegExp);
+  const linearExpr = linearMatch?.[1];
+  if (linearExpr) {
+    const points = linearExpr.split(",");
+    const times = [];
+    const values = [];
+    try {
+      points.forEach((point, i) => {
+        const [p1, p2] = point.trim().split(/\s+/);
+        if (p1?.includes("%")) {
+          times.push(parseFloat(p1) / 100);
+          values.push(parseFloat(p2));
+        } else if (p2?.includes("%")) {
+          times.push(parseFloat(p2) / 100);
+          values.push(parseFloat(p1));
+        } else {
+          times.push(i / (points.length - 1));
+          values.push(parseFloat(p1));
+        }
+      });
+    } catch {
+      throw new Error(`Cannot parse linear() expression: ${easing}`);
+    }
+    return transform(times, values);
+  }
+  throw new Error(`Cannot convert ${easing} to a Framer Motion easing`);
+}
+function toTransition(timing) {
+  const { duration = 0, delay = 0, easing = "ease" } = timing;
+  if (typeof duration != "number") throw new Error("Duration must be a number");
+  return {
+    duration: duration / 1e3,
+    delay: delay / 1e3,
+    ease: toEase(easing)
+  };
+}
+function useTiming(timing) {
+  const [ret, setRet] = React.useState(toTransition(timing));
+  React.useEffect(() => {
+    setRet(toTransition(timing));
+  }, [timing]);
+  return ret;
+}
 export {
-  defaultXTiming
+  toEase,
+  toTransition,
+  useTiming
 };

package/dist/index.d.mts

@@ -28,4 +28,12 @@ declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<N
     yTiming?: (typeof NumberFlowElement)["prototype"]["yTiming"];
 } & React.RefAttributes<NumberFlowElement>>;
 
-export { NumberFlowElement, type NumberFlowProps, NumberFlow as default };
+declare function useSupportsLinear(): boolean;
+type LinearEasing = `linear(${string})`;
+type LinearTiming = EffectTiming & {
+    easing: LinearEasing;
+};
+declare function useLinear(linear: LinearEasing, fallback: string): string;
+declare function useLinear(linear: LinearTiming, fallback: EffectTiming): EffectTiming;
+
+export { NumberFlowElement, type NumberFlowProps, NumberFlow as default, useLinear, useSupportsLinear };

package/dist/index.d.ts

@@ -28,4 +28,12 @@ declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<N
     yTiming?: (typeof NumberFlowElement)["prototype"]["yTiming"];
 } & React.RefAttributes<NumberFlowElement>>;
 
-export { NumberFlowElement, type NumberFlowProps, NumberFlow as default };
+declare function useSupportsLinear(): boolean;
+type LinearEasing = `linear(${string})`;
+type LinearTiming = EffectTiming & {
+    easing: LinearEasing;
+};
+declare function useLinear(linear: LinearEasing, fallback: string): string;
+declare function useLinear(linear: LinearTiming, fallback: EffectTiming): EffectTiming;
+
+export { NumberFlowElement, type NumberFlowProps, NumberFlow as default, useLinear, useSupportsLinear };

package/dist/index.js

@@ -34,7 +34,9 @@ __export(src_exports, {
   NumberFlowElement: () => NumberFlowElement,
   default: () => src_default,
   defaultXTiming: () => import_number_flow2.defaultXTiming,
-  defaultYTiming: () => import_number_flow2.defaultYTiming
+  defaultYTiming: () => import_number_flow2.defaultYTiming,
+  useLinear: () => useLinear,
+  useSupportsLinear: () => useSupportsLinear
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
@@ -122,9 +124,22 @@ var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format,
   return /* @__PURE__ */ React.createElement(NumberFlowPriv, { ...props, parts, innerRef: ref });
 });
 var src_default = NumberFlow;
+function useSupportsLinear() {
+  const [supported, setSupported] = React.useState(false);
+  React.useEffect(() => {
+    setSupported(import_number_flow.supportsLinear);
+  }, []);
+  return supported;
+}
+function useLinear(linear, fallback) {
+  const supported = useSupportsLinear();
+  return supported ? linear : fallback;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   NumberFlowElement,
   defaultXTiming,
-  defaultYTiming
+  defaultYTiming,
+  useLinear,
+  useSupportsLinear
 });

package/dist/index.mjs

@@ -6,7 +6,8 @@ import {
   SlottedTag,
   slottedStyles,
   partitionParts,
-  NumberFlowLite
+  NumberFlowLite,
+  supportsLinear
 } from "number-flow";
 import { defaultXTiming, defaultYTiming } from "number-flow";
 var OBSERVED_ATTRIBUTES = ["parts"];
@@ -91,9 +92,22 @@ var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format,
   return /* @__PURE__ */ React.createElement(NumberFlowPriv, { ...props, parts, innerRef: ref });
 });
 var src_default = NumberFlow;
+function useSupportsLinear() {
+  const [supported, setSupported] = React.useState(false);
+  React.useEffect(() => {
+    setSupported(supportsLinear);
+  }, []);
+  return supported;
+}
+function useLinear(linear, fallback) {
+  const supported = useSupportsLinear();
+  return supported ? linear : fallback;
+}
 export {
   NumberFlowElement,
   src_default as default,
   defaultXTiming,
-  defaultYTiming
+  defaultYTiming,
+  useLinear,
+  useSupportsLinear
 };

package/package.json

@@ -3,15 +3,15 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.1",
+  "version": "0.1.3",
   "author": {
     "name": "Maxwell Barvian",
     "email": "max@barvian.me",
     "url": "https://barvian.me"
   },
-  "description": "A lightweight component to transition and format numbers.",
+  "description": "A component to transition and format numbers.",
   "license": "MIT",
-  "homepage": "https://number-flow.barvian.me/react",
+  "homepage": "https://number-flow.barvian.me",
   "repository": {
     "type": "git",
     "url": "https://github.com/barvian/number-flow",
@@ -59,7 +59,7 @@
   },
   "dependencies": {
     "esm-env": "^1.0.0",
-    "number-flow": "0.2.1"
+    "number-flow": "0.2.3"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",