@number-flow/react 0.1.3 → 0.2.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Maxwell Barvian
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,10 +1,11 @@
+[![NumberFlow for React](https://number-flow.barvian.me/preview.webp)](https://number-flow.barvian.me)
+
 # Number Flow for React
 
 A React component to transition & format numbers.
 
-[![NumberFlow for React](https://number-flow.barvian.me/preview.webp)](https://number-flow.barvian.me)
-
 [![NPM Version](https://img.shields.io/npm/v/@number-flow/react.svg)](https://npmjs.com/package/@number-flow/react)
+[![Bundle size](https://badgen.net/bundlephobia/minzip/@number-flow/react@latest)](https://bundlephobia.com/package/@number-flow/react@latest)
 [![Follow @mbarvian](https://img.shields.io/twitter/follow/mbarvian.svg?style=social&label=Follow)](https://x.com/mbarvian)
 
 ---

package/dist/index.d.mts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { NumberFlowLite, Value, Format } from 'number-flow';
-export * from 'number-flow';
-export { defaultXTiming, defaultYTiming } from 'number-flow';
+export { Format, Trend, Value } from 'number-flow';
 
 declare const OBSERVED_ATTRIBUTES: readonly ["parts"];
 type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
@@ -13,27 +12,35 @@ type NumberFlowProps = React.HTMLAttributes<NumberFlowElement> & {
     value: Value;
     locales?: Intl.LocalesArgument;
     format?: Format;
-    root?: (typeof NumberFlowElement)['prototype']['root'];
-    fadeTiming?: (typeof NumberFlowElement)['prototype']['fadeTiming'];
-    xTiming?: (typeof NumberFlowElement)['prototype']['xTiming'];
-    yTiming?: (typeof NumberFlowElement)['prototype']['yTiming'];
+    isolate?: boolean;
+    animated?: boolean;
+    respectMotionPreference?: boolean;
+    willChange?: boolean;
+    onAnimationsStart?: () => void;
+    onAnimationsFinish?: () => void;
+    trend?: (typeof NumberFlowElement)['prototype']['trend'];
+    opacityTiming?: (typeof NumberFlowElement)['prototype']['opacityTiming'];
+    transformTiming?: (typeof NumberFlowElement)['prototype']['transformTiming'];
+    spinTiming?: (typeof NumberFlowElement)['prototype']['spinTiming'];
 };
 declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & {
     value: Value;
     locales?: Intl.LocalesArgument;
     format?: Format;
-    root?: (typeof NumberFlowElement)["prototype"]["root"];
-    fadeTiming?: (typeof NumberFlowElement)["prototype"]["fadeTiming"];
-    xTiming?: (typeof NumberFlowElement)["prototype"]["xTiming"];
-    yTiming?: (typeof NumberFlowElement)["prototype"]["yTiming"];
+    isolate?: boolean;
+    animated?: boolean;
+    respectMotionPreference?: boolean;
+    willChange?: boolean;
+    onAnimationsStart?: () => void;
+    onAnimationsFinish?: () => void;
+    trend?: (typeof NumberFlowElement)["prototype"]["trend"];
+    opacityTiming?: (typeof NumberFlowElement)["prototype"]["opacityTiming"];
+    transformTiming?: (typeof NumberFlowElement)["prototype"]["transformTiming"];
+    spinTiming?: (typeof NumberFlowElement)["prototype"]["spinTiming"];
 } & React.RefAttributes<NumberFlowElement>>;
 
-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;
+declare function useCanAnimate({ respectMotionPreference }?: {
+    respectMotionPreference?: boolean | undefined;
+}): boolean;
 
-export { NumberFlowElement, type NumberFlowProps, NumberFlow as default, useLinear, useSupportsLinear };
+export { NumberFlowElement, type NumberFlowProps, NumberFlow as default, useCanAnimate };

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { NumberFlowLite, Value, Format } from 'number-flow';
-export * from 'number-flow';
-export { defaultXTiming, defaultYTiming } from 'number-flow';
+export { Format, Trend, Value } from 'number-flow';
 
 declare const OBSERVED_ATTRIBUTES: readonly ["parts"];
 type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
@@ -13,27 +12,35 @@ type NumberFlowProps = React.HTMLAttributes<NumberFlowElement> & {
     value: Value;
     locales?: Intl.LocalesArgument;
     format?: Format;
-    root?: (typeof NumberFlowElement)['prototype']['root'];
-    fadeTiming?: (typeof NumberFlowElement)['prototype']['fadeTiming'];
-    xTiming?: (typeof NumberFlowElement)['prototype']['xTiming'];
-    yTiming?: (typeof NumberFlowElement)['prototype']['yTiming'];
+    isolate?: boolean;
+    animated?: boolean;
+    respectMotionPreference?: boolean;
+    willChange?: boolean;
+    onAnimationsStart?: () => void;
+    onAnimationsFinish?: () => void;
+    trend?: (typeof NumberFlowElement)['prototype']['trend'];
+    opacityTiming?: (typeof NumberFlowElement)['prototype']['opacityTiming'];
+    transformTiming?: (typeof NumberFlowElement)['prototype']['transformTiming'];
+    spinTiming?: (typeof NumberFlowElement)['prototype']['spinTiming'];
 };
 declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & {
     value: Value;
     locales?: Intl.LocalesArgument;
     format?: Format;
-    root?: (typeof NumberFlowElement)["prototype"]["root"];
-    fadeTiming?: (typeof NumberFlowElement)["prototype"]["fadeTiming"];
-    xTiming?: (typeof NumberFlowElement)["prototype"]["xTiming"];
-    yTiming?: (typeof NumberFlowElement)["prototype"]["yTiming"];
+    isolate?: boolean;
+    animated?: boolean;
+    respectMotionPreference?: boolean;
+    willChange?: boolean;
+    onAnimationsStart?: () => void;
+    onAnimationsFinish?: () => void;
+    trend?: (typeof NumberFlowElement)["prototype"]["trend"];
+    opacityTiming?: (typeof NumberFlowElement)["prototype"]["opacityTiming"];
+    transformTiming?: (typeof NumberFlowElement)["prototype"]["transformTiming"];
+    spinTiming?: (typeof NumberFlowElement)["prototype"]["spinTiming"];
 } & React.RefAttributes<NumberFlowElement>>;
 
-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;
+declare function useCanAnimate({ respectMotionPreference }?: {
+    respectMotionPreference?: boolean | undefined;
+}): boolean;
 
-export { NumberFlowElement, type NumberFlowProps, NumberFlow as default, useLinear, useSupportsLinear };
+export { NumberFlowElement, type NumberFlowProps, NumberFlow as default, useCanAnimate };

package/dist/index.js

@@ -6,6 +6,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -27,71 +30,94 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 
 // src/index.tsx
 var src_exports = {};
 __export(src_exports, {
   NumberFlowElement: () => NumberFlowElement,
   default: () => src_default,
-  defaultXTiming: () => import_number_flow2.defaultXTiming,
-  defaultYTiming: () => import_number_flow2.defaultYTiming,
-  useLinear: () => useLinear,
-  useSupportsLinear: () => useSupportsLinear
+  useCanAnimate: () => useCanAnimate
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
 var import_number_flow = require("number-flow");
-var import_number_flow2 = require("number-flow");
+var isReact19 = React.version.startsWith("19.");
 var OBSERVED_ATTRIBUTES = ["parts"];
 var NumberFlowElement = class extends import_number_flow.NumberFlowLite {
-  static observedAttributes = OBSERVED_ATTRIBUTES;
   attributeChangedCallback(attr, _oldValue, newValue) {
     this[attr] = JSON.parse(newValue);
   }
 };
+NumberFlowElement.observedAttributes = OBSERVED_ATTRIBUTES;
 NumberFlowElement.define();
 var formatters = {};
-var NumberFlowPriv = class extends React.Component {
+var serializeParts = isReact19 ? (p) => p : JSON.stringify;
+var _el;
+var NumberFlowImpl = class extends React.Component {
   constructor(props) {
     super(props);
+    __privateAdd(this, _el);
     this.handleRef = this.handleRef.bind(this);
   }
   // Update the non-parts props to avoid JSON serialization
   // Parts needs to be set in render still:
-  updateNonPartsProps() {
-    if (this.#el) {
-      if (this.props.root != null) this.#el.root = this.props.root;
-      if (this.props.fadeTiming) this.#el.fadeTiming = this.props.fadeTiming;
-      if (this.props.xTiming) this.#el.xTiming = this.props.xTiming;
-      if (this.props.yTiming) this.#el.yTiming = this.props.yTiming;
-    }
+  updateNonPartsProps(prevProps) {
+    if (!__privateGet(this, _el)) return;
+    __privateGet(this, _el).manual = !this.props.isolate;
+    if (this.props.animated != null) __privateGet(this, _el).animated = this.props.animated;
+    if (this.props.respectMotionPreference != null)
+      __privateGet(this, _el).respectMotionPreference = this.props.respectMotionPreference;
+    if (this.props.trend != null) __privateGet(this, _el).trend = this.props.trend;
+    if (this.props.opacityTiming) __privateGet(this, _el).opacityTiming = this.props.opacityTiming;
+    if (this.props.transformTiming) __privateGet(this, _el).transformTiming = this.props.transformTiming;
+    if (this.props.spinTiming) __privateGet(this, _el).spinTiming = this.props.spinTiming;
+    if (prevProps?.onAnimationsStart)
+      __privateGet(this, _el).removeEventListener("animationsstart", prevProps.onAnimationsStart);
+    if (this.props.onAnimationsStart)
+      __privateGet(this, _el).addEventListener("animationsstart", this.props.onAnimationsStart);
+    if (prevProps?.onAnimationsFinish)
+      __privateGet(this, _el).removeEventListener("animationsfinish", prevProps.onAnimationsFinish);
+    if (this.props.onAnimationsFinish)
+      __privateGet(this, _el).addEventListener("animationsfinish", this.props.onAnimationsFinish);
   }
   componentDidMount() {
+    if (isReact19 && __privateGet(this, _el)) {
+      __privateGet(this, _el).parts = this.props.parts;
+    }
     this.updateNonPartsProps();
-    if (this.#el) this.#el.manual = true;
   }
-  getSnapshotBeforeUpdate() {
-    this.updateNonPartsProps();
-    this.#el?.willUpdate();
-    return null;
+  getSnapshotBeforeUpdate(prevProps) {
+    this.updateNonPartsProps(prevProps);
+    if (this.props.isolate) return false;
+    if (prevProps.parts === this.props.parts) return false;
+    __privateGet(this, _el)?.willUpdate();
+    return true;
   }
-  componentDidUpdate() {
-    this.#el?.didUpdate();
+  componentDidUpdate(_, __, snapshot) {
+    if (snapshot) __privateGet(this, _el)?.didUpdate();
   }
-  #el;
   handleRef(el) {
     if (this.props.innerRef) this.props.innerRef.current = el;
-    this.#el = el;
+    __privateSet(this, _el, el);
   }
   render() {
     const {
       innerRef,
       className,
       parts,
+      willChange,
       // These are set in updateNonPartsProps, so ignore them here:
-      fadeTiming,
-      xTiming,
-      yTiming,
+      animated,
+      respectMotionPreference,
+      isolate,
+      trend,
+      opacityTiming,
+      transformTiming,
+      spinTiming,
       ...rest
     } = this.props;
     return (
@@ -100,15 +126,17 @@ var NumberFlowPriv = class extends React.Component {
         "number-flow",
         {
           ref: this.handleRef,
+          "data-will-change": willChange ? "" : void 0,
           class: className,
           ...rest,
-          parts: JSON.stringify(parts)
+          parts: serializeParts(parts)
         },
-        /* @__PURE__ */ React.createElement(import_number_flow.SlottedTag, { style: import_number_flow.slottedStyles }, parts.formatted)
+        /* @__PURE__ */ React.createElement(import_number_flow.SlottedTag, { style: (0, import_number_flow.slottedStyles)({ willChange }) }, parts.formatted)
       )
     );
   }
 };
+_el = new WeakMap();
 var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format, ...props }, _ref) {
   React.useImperativeHandle(_ref, () => ref.current, []);
   const ref = React.useRef();
@@ -121,25 +149,30 @@ var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format,
     );
     return (0, import_number_flow.partitionParts)(value, formatter);
   }, [value, localesString, formatString]);
-  return /* @__PURE__ */ React.createElement(NumberFlowPriv, { ...props, parts, innerRef: ref });
+  return /* @__PURE__ */ React.createElement(NumberFlowImpl, { ...props, parts, innerRef: ref });
 });
 var src_default = NumberFlow;
-function useSupportsLinear() {
-  const [supported, setSupported] = React.useState(false);
+function useCanAnimate({ respectMotionPreference = true } = {}) {
+  const [canAnimate, setCanAnimate] = React.useState(import_number_flow.canAnimate);
+  const [reducedMotion, setReducedMotion] = React.useState(false);
   React.useEffect(() => {
-    setSupported(import_number_flow.supportsLinear);
+    setCanAnimate(import_number_flow.canAnimate);
+    setReducedMotion(import_number_flow.prefersReducedMotion?.matches ?? false);
   }, []);
-  return supported;
-}
-function useLinear(linear, fallback) {
-  const supported = useSupportsLinear();
-  return supported ? linear : fallback;
+  React.useEffect(() => {
+    if (!respectMotionPreference) return;
+    const onChange = ({ matches }) => {
+      setReducedMotion(matches);
+    };
+    import_number_flow.prefersReducedMotion?.addEventListener("change", onChange);
+    return () => {
+      import_number_flow.prefersReducedMotion?.removeEventListener("change", onChange);
+    };
+  }, [respectMotionPreference]);
+  return canAnimate && (!respectMotionPreference || !reducedMotion);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   NumberFlowElement,
-  defaultXTiming,
-  defaultYTiming,
-  useLinear,
-  useSupportsLinear
+  useCanAnimate
 });

package/dist/index.mjs

@@ -1,4 +1,11 @@
 "use client";
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 
 // src/index.tsx
 import * as React from "react";
@@ -7,59 +14,82 @@ import {
   slottedStyles,
   partitionParts,
   NumberFlowLite,
-  supportsLinear
+  prefersReducedMotion,
+  canAnimate as _canAnimate
 } from "number-flow";
-import { defaultXTiming, defaultYTiming } from "number-flow";
+var isReact19 = React.version.startsWith("19.");
 var OBSERVED_ATTRIBUTES = ["parts"];
 var NumberFlowElement = class extends NumberFlowLite {
-  static observedAttributes = OBSERVED_ATTRIBUTES;
   attributeChangedCallback(attr, _oldValue, newValue) {
     this[attr] = JSON.parse(newValue);
   }
 };
+NumberFlowElement.observedAttributes = OBSERVED_ATTRIBUTES;
 NumberFlowElement.define();
 var formatters = {};
-var NumberFlowPriv = class extends React.Component {
+var serializeParts = isReact19 ? (p) => p : JSON.stringify;
+var _el;
+var NumberFlowImpl = class extends React.Component {
   constructor(props) {
     super(props);
+    __privateAdd(this, _el);
     this.handleRef = this.handleRef.bind(this);
   }
   // Update the non-parts props to avoid JSON serialization
   // Parts needs to be set in render still:
-  updateNonPartsProps() {
-    if (this.#el) {
-      if (this.props.root != null) this.#el.root = this.props.root;
-      if (this.props.fadeTiming) this.#el.fadeTiming = this.props.fadeTiming;
-      if (this.props.xTiming) this.#el.xTiming = this.props.xTiming;
-      if (this.props.yTiming) this.#el.yTiming = this.props.yTiming;
-    }
+  updateNonPartsProps(prevProps) {
+    if (!__privateGet(this, _el)) return;
+    __privateGet(this, _el).manual = !this.props.isolate;
+    if (this.props.animated != null) __privateGet(this, _el).animated = this.props.animated;
+    if (this.props.respectMotionPreference != null)
+      __privateGet(this, _el).respectMotionPreference = this.props.respectMotionPreference;
+    if (this.props.trend != null) __privateGet(this, _el).trend = this.props.trend;
+    if (this.props.opacityTiming) __privateGet(this, _el).opacityTiming = this.props.opacityTiming;
+    if (this.props.transformTiming) __privateGet(this, _el).transformTiming = this.props.transformTiming;
+    if (this.props.spinTiming) __privateGet(this, _el).spinTiming = this.props.spinTiming;
+    if (prevProps?.onAnimationsStart)
+      __privateGet(this, _el).removeEventListener("animationsstart", prevProps.onAnimationsStart);
+    if (this.props.onAnimationsStart)
+      __privateGet(this, _el).addEventListener("animationsstart", this.props.onAnimationsStart);
+    if (prevProps?.onAnimationsFinish)
+      __privateGet(this, _el).removeEventListener("animationsfinish", prevProps.onAnimationsFinish);
+    if (this.props.onAnimationsFinish)
+      __privateGet(this, _el).addEventListener("animationsfinish", this.props.onAnimationsFinish);
   }
   componentDidMount() {
+    if (isReact19 && __privateGet(this, _el)) {
+      __privateGet(this, _el).parts = this.props.parts;
+    }
     this.updateNonPartsProps();
-    if (this.#el) this.#el.manual = true;
   }
-  getSnapshotBeforeUpdate() {
-    this.updateNonPartsProps();
-    this.#el?.willUpdate();
-    return null;
+  getSnapshotBeforeUpdate(prevProps) {
+    this.updateNonPartsProps(prevProps);
+    if (this.props.isolate) return false;
+    if (prevProps.parts === this.props.parts) return false;
+    __privateGet(this, _el)?.willUpdate();
+    return true;
   }
-  componentDidUpdate() {
-    this.#el?.didUpdate();
+  componentDidUpdate(_, __, snapshot) {
+    if (snapshot) __privateGet(this, _el)?.didUpdate();
   }
-  #el;
   handleRef(el) {
     if (this.props.innerRef) this.props.innerRef.current = el;
-    this.#el = el;
+    __privateSet(this, _el, el);
   }
   render() {
     const {
       innerRef,
       className,
       parts,
+      willChange,
       // These are set in updateNonPartsProps, so ignore them here:
-      fadeTiming,
-      xTiming,
-      yTiming,
+      animated,
+      respectMotionPreference,
+      isolate,
+      trend,
+      opacityTiming,
+      transformTiming,
+      spinTiming,
       ...rest
     } = this.props;
     return (
@@ -68,15 +98,17 @@ var NumberFlowPriv = class extends React.Component {
         "number-flow",
         {
           ref: this.handleRef,
+          "data-will-change": willChange ? "" : void 0,
           class: className,
           ...rest,
-          parts: JSON.stringify(parts)
+          parts: serializeParts(parts)
         },
-        /* @__PURE__ */ React.createElement(SlottedTag, { style: slottedStyles }, parts.formatted)
+        /* @__PURE__ */ React.createElement(SlottedTag, { style: slottedStyles({ willChange }) }, parts.formatted)
       )
     );
   }
 };
+_el = new WeakMap();
 var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format, ...props }, _ref) {
   React.useImperativeHandle(_ref, () => ref.current, []);
   const ref = React.useRef();
@@ -89,25 +121,30 @@ var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format,
     );
     return partitionParts(value, formatter);
   }, [value, localesString, formatString]);
-  return /* @__PURE__ */ React.createElement(NumberFlowPriv, { ...props, parts, innerRef: ref });
+  return /* @__PURE__ */ React.createElement(NumberFlowImpl, { ...props, parts, innerRef: ref });
 });
 var src_default = NumberFlow;
-function useSupportsLinear() {
-  const [supported, setSupported] = React.useState(false);
+function useCanAnimate({ respectMotionPreference = true } = {}) {
+  const [canAnimate, setCanAnimate] = React.useState(_canAnimate);
+  const [reducedMotion, setReducedMotion] = React.useState(false);
   React.useEffect(() => {
-    setSupported(supportsLinear);
+    setCanAnimate(_canAnimate);
+    setReducedMotion(prefersReducedMotion?.matches ?? false);
   }, []);
-  return supported;
-}
-function useLinear(linear, fallback) {
-  const supported = useSupportsLinear();
-  return supported ? linear : fallback;
+  React.useEffect(() => {
+    if (!respectMotionPreference) return;
+    const onChange = ({ matches }) => {
+      setReducedMotion(matches);
+    };
+    prefersReducedMotion?.addEventListener("change", onChange);
+    return () => {
+      prefersReducedMotion?.removeEventListener("change", onChange);
+    };
+  }, [respectMotionPreference]);
+  return canAnimate && (!respectMotionPreference || !reducedMotion);
 }
 export {
   NumberFlowElement,
   src_default as default,
-  defaultXTiming,
-  defaultYTiming,
-  useLinear,
-  useSupportsLinear
+  useCanAnimate
 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.3",
+  "version": "0.2.1",
   "author": {
     "name": "Maxwell Barvian",
     "email": "max@barvian.me",
@@ -45,44 +45,26 @@
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
       }
-    },
-    "./framer-motion": {
-      "import": {
-        "types": "./dist/framer-motion.d.mts",
-        "default": "./dist/framer-motion.mjs"
-      },
-      "require": {
-        "types": "./dist/framer-motion.d.ts",
-        "default": "./dist/framer-motion.js"
-      }
     }
   },
   "dependencies": {
     "esm-env": "^1.0.0",
-    "number-flow": "0.2.3"
+    "number-flow": "0.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "framer-motion": "^11.9.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tsup": "^8.2.4"
   },
   "peerDependencies": {
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "framer-motion": "^11.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "peerDependenciesMeta": {
-    "framer-motion": {
-      "optional": true
-    }
+    "react": "^18 || ^19.0.0-rc-915b914b3a-20240515",
+    "react-dom": "^18"
   },
   "scripts": {
     "build": "tsup --tsconfig tsconfig.build.json",
-    "dev": "tsup --watch"
+    "dev": "tsup --watch",
+    "test": "pnpm -r --workspace-concurrency 1 --filter=\"./test/apps/*\" test"
   }
 }

package/dist/framer-motion.d.mts

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

package/dist/framer-motion.d.ts

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

package/dist/framer-motion.js

@@ -1,100 +0,0 @@
-"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)
-    __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 __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, {
-  toEase: () => toEase,
-  toTransition: () => toTransition,
-  useTiming: () => useTiming
-});
-module.exports = __toCommonJS(framer_motion_exports);
-var React = __toESM(require("react"));
-var import_framer_motion = require("framer-motion");
-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 = {
-  toEase,
-  toTransition,
-  useTiming
-});

package/dist/framer-motion.mjs

@@ -1,63 +0,0 @@
-// src/framer-motion.ts
-import * as React from "react";
-import { transform } from "framer-motion";
-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 {
-  toEase,
-  toTransition,
-  useTiming
-};