@number-flow/react 0.5.2 → 0.5.3

package/dist/NumberFlow.d.mts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { NumberFlowLite, Value, Format, Props } from 'number-flow';
+
+declare const OBSERVED_ATTRIBUTES: readonly ["data", "digits"];
+type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
+declare class NumberFlowElement extends NumberFlowLite {
+    static observedAttributes: readonly ["data", "digits"] | never[];
+    attributeChangedCallback(attr: ObservedAttribute, _oldValue: string, newValue: string): void;
+}
+type BaseProps = React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
+    isolate?: boolean;
+    willChange?: boolean;
+    onAnimationsStart?: (e: CustomEvent<undefined>) => void;
+    onAnimationsFinish?: (e: CustomEvent<undefined>) => void;
+};
+type NumberFlowProps = BaseProps & {
+    value: Value;
+    locales?: Intl.LocalesArgument;
+    format?: Format;
+    prefix?: string;
+    suffix?: string;
+};
+declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
+    isolate?: boolean;
+    willChange?: boolean;
+    onAnimationsStart?: (e: CustomEvent<undefined>) => void;
+    onAnimationsFinish?: (e: CustomEvent<undefined>) => void;
+} & {
+    value: Value;
+    locales?: Intl.LocalesArgument;
+    format?: Format;
+    prefix?: string;
+    suffix?: string;
+} & React.RefAttributes<NumberFlowElement>>;
+
+declare function NumberFlowGroup({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+
+export { NumberFlowElement, NumberFlowGroup, type NumberFlowProps, NumberFlow as default };

package/dist/NumberFlow.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { NumberFlowLite, Value, Format, Props } from 'number-flow';
+
+declare const OBSERVED_ATTRIBUTES: readonly ["data", "digits"];
+type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
+declare class NumberFlowElement extends NumberFlowLite {
+    static observedAttributes: readonly ["data", "digits"] | never[];
+    attributeChangedCallback(attr: ObservedAttribute, _oldValue: string, newValue: string): void;
+}
+type BaseProps = React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
+    isolate?: boolean;
+    willChange?: boolean;
+    onAnimationsStart?: (e: CustomEvent<undefined>) => void;
+    onAnimationsFinish?: (e: CustomEvent<undefined>) => void;
+};
+type NumberFlowProps = BaseProps & {
+    value: Value;
+    locales?: Intl.LocalesArgument;
+    format?: Format;
+    prefix?: string;
+    suffix?: string;
+};
+declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
+    isolate?: boolean;
+    willChange?: boolean;
+    onAnimationsStart?: (e: CustomEvent<undefined>) => void;
+    onAnimationsFinish?: (e: CustomEvent<undefined>) => void;
+} & {
+    value: Value;
+    locales?: Intl.LocalesArgument;
+    format?: Format;
+    prefix?: string;
+    suffix?: string;
+} & React.RefAttributes<NumberFlowElement>>;
+
+declare function NumberFlowGroup({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+
+export { NumberFlowElement, NumberFlowGroup, type NumberFlowProps, NumberFlow as default };

package/dist/NumberFlow.js

@@ -0,0 +1,225 @@
+"use strict";
+"use client";
+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/NumberFlow.tsx
+var NumberFlow_exports = {};
+__export(NumberFlow_exports, {
+  NumberFlowElement: () => NumberFlowElement,
+  NumberFlowGroup: () => NumberFlowGroup,
+  default: () => NumberFlow_default
+});
+module.exports = __toCommonJS(NumberFlow_exports);
+var React = __toESM(require("react"));
+var import_number_flow = require("number-flow");
+var import_esm_env = require("esm-env");
+var REACT_MAJOR = parseInt(React.version.match(/^(\d+)\./)?.[1]);
+var isReact19 = REACT_MAJOR >= 19;
+var OBSERVED_ATTRIBUTES = ["data", "digits"];
+var NumberFlowElement = class extends import_number_flow.NumberFlowLite {
+  attributeChangedCallback(attr, _oldValue, newValue) {
+    this[attr] = JSON.parse(newValue);
+  }
+};
+NumberFlowElement.observedAttributes = isReact19 ? [] : OBSERVED_ATTRIBUTES;
+(0, import_number_flow.define)("number-flow-react", NumberFlowElement);
+var formatters = {};
+var serialize = isReact19 ? (p) => p : JSON.stringify;
+function splitProps(props) {
+  const {
+    transformTiming,
+    spinTiming,
+    opacityTiming,
+    animated,
+    respectMotionPreference,
+    trend,
+    plugins,
+    ...rest
+  } = props;
+  return [
+    {
+      transformTiming,
+      spinTiming,
+      opacityTiming,
+      animated,
+      respectMotionPreference,
+      trend,
+      plugins
+    },
+    rest
+  ];
+}
+var NumberFlowImpl = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleRef = this.handleRef.bind(this);
+  }
+  // Update the non-`data` props to avoid JSON serialization
+  // Data needs to be set in render still:
+  updateProperties(prevProps) {
+    if (!this.el) return;
+    this.el.manual = !this.props.isolate;
+    const [nonData] = splitProps(this.props);
+    Object.entries(nonData).forEach(([k, v]) => {
+      this.el[k] = v ?? NumberFlowElement.defaultProps[k];
+    });
+    if (prevProps?.onAnimationsStart)
+      this.el.removeEventListener("animationsstart", prevProps.onAnimationsStart);
+    if (this.props.onAnimationsStart)
+      this.el.addEventListener("animationsstart", this.props.onAnimationsStart);
+    if (prevProps?.onAnimationsFinish)
+      this.el.removeEventListener("animationsfinish", prevProps.onAnimationsFinish);
+    if (this.props.onAnimationsFinish)
+      this.el.addEventListener("animationsfinish", this.props.onAnimationsFinish);
+  }
+  componentDidMount() {
+    this.updateProperties();
+    if (isReact19 && this.el) {
+      this.el.digits = this.props.digits;
+      this.el.data = this.props.data;
+    }
+  }
+  getSnapshotBeforeUpdate(prevProps) {
+    this.updateProperties(prevProps);
+    if (prevProps.data !== this.props.data) {
+      if (this.props.group) {
+        this.props.group.willUpdate();
+        return () => this.props.group?.didUpdate();
+      }
+      if (!this.props.isolate) {
+        this.el?.willUpdate();
+        return () => this.el?.didUpdate();
+      }
+    }
+    return null;
+  }
+  componentDidUpdate(_, __, didUpdate) {
+    didUpdate?.();
+  }
+  handleRef(el) {
+    if (this.props.innerRef) this.props.innerRef.current = el;
+    this.el = el;
+  }
+  render() {
+    const [
+      _,
+      {
+        innerRef,
+        className,
+        data,
+        willChange,
+        isolate,
+        group,
+        digits,
+        onAnimationsStart,
+        onAnimationsFinish,
+        ...rest
+      }
+    ] = splitProps(this.props);
+    return (
+      // @ts-expect-error missing types
+      /* @__PURE__ */ React.createElement(
+        "number-flow-react",
+        {
+          ref: this.handleRef,
+          "data-will-change": willChange ? "" : void 0,
+          class: className,
+          "aria-label": data.valueAsString,
+          ...rest,
+          role: "img",
+          dangerouslySetInnerHTML: { __html: import_esm_env.BROWSER ? "" : (0, import_number_flow.renderInnerHTML)(data) },
+          suppressHydrationWarning: true,
+          digits: serialize(digits),
+          data: serialize(data)
+        }
+      )
+    );
+  }
+};
+var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format, prefix, suffix, ...props }, _ref) {
+  React.useImperativeHandle(_ref, () => ref.current, []);
+  const ref = React.useRef();
+  const group = React.useContext(NumberFlowGroupContext);
+  group?.useRegister(ref);
+  const localesString = React.useMemo(() => locales ? JSON.stringify(locales) : "", [locales]);
+  const formatString = React.useMemo(() => format ? JSON.stringify(format) : "", [format]);
+  const data = React.useMemo(() => {
+    const formatter = formatters[`${localesString}:${formatString}`] ??= new Intl.NumberFormat(
+      locales,
+      format
+    );
+    return (0, import_number_flow.formatToData)(value, formatter, prefix, suffix);
+  }, [value, localesString, formatString, prefix, suffix]);
+  return /* @__PURE__ */ React.createElement(NumberFlowImpl, { ...props, group, data, innerRef: ref });
+});
+var NumberFlow_default = NumberFlow;
+var NumberFlowGroupContext = React.createContext(void 0);
+function NumberFlowGroup({ children }) {
+  const flows = React.useRef(/* @__PURE__ */ new Set());
+  const updating = React.useRef(false);
+  const pending = React.useRef(/* @__PURE__ */ new WeakMap());
+  const value = React.useMemo(
+    () => ({
+      useRegister(ref) {
+        React.useEffect(() => {
+          flows.current.add(ref);
+          return () => {
+            flows.current.delete(ref);
+          };
+        }, []);
+      },
+      willUpdate() {
+        if (updating.current) return;
+        updating.current = true;
+        flows.current.forEach((ref) => {
+          const f = ref.current;
+          if (!f || !f.created) return;
+          f.willUpdate();
+          pending.current.set(f, true);
+        });
+      },
+      didUpdate() {
+        flows.current.forEach((ref) => {
+          const f = ref.current;
+          if (!f || !pending.current.get(f)) return;
+          f.didUpdate();
+          pending.current.delete(f);
+        });
+        updating.current = false;
+      }
+    }),
+    []
+  );
+  return /* @__PURE__ */ React.createElement(NumberFlowGroupContext.Provider, { value }, children);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NumberFlowElement,
+  NumberFlowGroup
+});

package/dist/NumberFlow.mjs

@@ -0,0 +1,11 @@
+"use client";
+import {
+  NumberFlowElement,
+  NumberFlowGroup,
+  NumberFlow_default
+} from "./chunk-44AMDIF5.mjs";
+export {
+  NumberFlowElement,
+  NumberFlowGroup,
+  NumberFlow_default as default
+};

package/dist/chunk-44AMDIF5.mjs

@@ -0,0 +1,194 @@
+// src/NumberFlow.tsx
+import * as React from "react";
+import {
+  renderInnerHTML,
+  formatToData,
+  NumberFlowLite,
+  define
+} from "number-flow";
+import { BROWSER } from "esm-env";
+var REACT_MAJOR = parseInt(React.version.match(/^(\d+)\./)?.[1]);
+var isReact19 = REACT_MAJOR >= 19;
+var OBSERVED_ATTRIBUTES = ["data", "digits"];
+var NumberFlowElement = class extends NumberFlowLite {
+  attributeChangedCallback(attr, _oldValue, newValue) {
+    this[attr] = JSON.parse(newValue);
+  }
+};
+NumberFlowElement.observedAttributes = isReact19 ? [] : OBSERVED_ATTRIBUTES;
+define("number-flow-react", NumberFlowElement);
+var formatters = {};
+var serialize = isReact19 ? (p) => p : JSON.stringify;
+function splitProps(props) {
+  const {
+    transformTiming,
+    spinTiming,
+    opacityTiming,
+    animated,
+    respectMotionPreference,
+    trend,
+    plugins,
+    ...rest
+  } = props;
+  return [
+    {
+      transformTiming,
+      spinTiming,
+      opacityTiming,
+      animated,
+      respectMotionPreference,
+      trend,
+      plugins
+    },
+    rest
+  ];
+}
+var NumberFlowImpl = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleRef = this.handleRef.bind(this);
+  }
+  // Update the non-`data` props to avoid JSON serialization
+  // Data needs to be set in render still:
+  updateProperties(prevProps) {
+    if (!this.el) return;
+    this.el.manual = !this.props.isolate;
+    const [nonData] = splitProps(this.props);
+    Object.entries(nonData).forEach(([k, v]) => {
+      this.el[k] = v ?? NumberFlowElement.defaultProps[k];
+    });
+    if (prevProps?.onAnimationsStart)
+      this.el.removeEventListener("animationsstart", prevProps.onAnimationsStart);
+    if (this.props.onAnimationsStart)
+      this.el.addEventListener("animationsstart", this.props.onAnimationsStart);
+    if (prevProps?.onAnimationsFinish)
+      this.el.removeEventListener("animationsfinish", prevProps.onAnimationsFinish);
+    if (this.props.onAnimationsFinish)
+      this.el.addEventListener("animationsfinish", this.props.onAnimationsFinish);
+  }
+  componentDidMount() {
+    this.updateProperties();
+    if (isReact19 && this.el) {
+      this.el.digits = this.props.digits;
+      this.el.data = this.props.data;
+    }
+  }
+  getSnapshotBeforeUpdate(prevProps) {
+    this.updateProperties(prevProps);
+    if (prevProps.data !== this.props.data) {
+      if (this.props.group) {
+        this.props.group.willUpdate();
+        return () => this.props.group?.didUpdate();
+      }
+      if (!this.props.isolate) {
+        this.el?.willUpdate();
+        return () => this.el?.didUpdate();
+      }
+    }
+    return null;
+  }
+  componentDidUpdate(_, __, didUpdate) {
+    didUpdate?.();
+  }
+  handleRef(el) {
+    if (this.props.innerRef) this.props.innerRef.current = el;
+    this.el = el;
+  }
+  render() {
+    const [
+      _,
+      {
+        innerRef,
+        className,
+        data,
+        willChange,
+        isolate,
+        group,
+        digits,
+        onAnimationsStart,
+        onAnimationsFinish,
+        ...rest
+      }
+    ] = splitProps(this.props);
+    return (
+      // @ts-expect-error missing types
+      /* @__PURE__ */ React.createElement(
+        "number-flow-react",
+        {
+          ref: this.handleRef,
+          "data-will-change": willChange ? "" : void 0,
+          class: className,
+          "aria-label": data.valueAsString,
+          ...rest,
+          role: "img",
+          dangerouslySetInnerHTML: { __html: BROWSER ? "" : renderInnerHTML(data) },
+          suppressHydrationWarning: true,
+          digits: serialize(digits),
+          data: serialize(data)
+        }
+      )
+    );
+  }
+};
+var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format, prefix, suffix, ...props }, _ref) {
+  React.useImperativeHandle(_ref, () => ref.current, []);
+  const ref = React.useRef();
+  const group = React.useContext(NumberFlowGroupContext);
+  group?.useRegister(ref);
+  const localesString = React.useMemo(() => locales ? JSON.stringify(locales) : "", [locales]);
+  const formatString = React.useMemo(() => format ? JSON.stringify(format) : "", [format]);
+  const data = React.useMemo(() => {
+    const formatter = formatters[`${localesString}:${formatString}`] ??= new Intl.NumberFormat(
+      locales,
+      format
+    );
+    return formatToData(value, formatter, prefix, suffix);
+  }, [value, localesString, formatString, prefix, suffix]);
+  return /* @__PURE__ */ React.createElement(NumberFlowImpl, { ...props, group, data, innerRef: ref });
+});
+var NumberFlow_default = NumberFlow;
+var NumberFlowGroupContext = React.createContext(void 0);
+function NumberFlowGroup({ children }) {
+  const flows = React.useRef(/* @__PURE__ */ new Set());
+  const updating = React.useRef(false);
+  const pending = React.useRef(/* @__PURE__ */ new WeakMap());
+  const value = React.useMemo(
+    () => ({
+      useRegister(ref) {
+        React.useEffect(() => {
+          flows.current.add(ref);
+          return () => {
+            flows.current.delete(ref);
+          };
+        }, []);
+      },
+      willUpdate() {
+        if (updating.current) return;
+        updating.current = true;
+        flows.current.forEach((ref) => {
+          const f = ref.current;
+          if (!f || !f.created) return;
+          f.willUpdate();
+          pending.current.set(f, true);
+        });
+      },
+      didUpdate() {
+        flows.current.forEach((ref) => {
+          const f = ref.current;
+          if (!f || !pending.current.get(f)) return;
+          f.didUpdate();
+          pending.current.delete(f);
+        });
+        updating.current = false;
+      }
+    }),
+    []
+  );
+  return /* @__PURE__ */ React.createElement(NumberFlowGroupContext.Provider, { value }, children);
+}
+
+export {
+  NumberFlowElement,
+  NumberFlow_default,
+  NumberFlowGroup
+};

package/dist/index.d.mts

@@ -1,47 +1,12 @@
-import * as React from 'react';
-import { NumberFlowLite, Value, Format, Props } from 'number-flow';
-export { Format, NumberPartType, Trend, Value } from 'number-flow';
 export * from 'number-flow/plugins';
+export { NumberFlowElement, NumberFlowGroup, NumberFlowProps, default } from './NumberFlow.mjs';
+export { Format, NumberPartType, Trend, Value } from 'number-flow';
+import 'react';
 
-declare const OBSERVED_ATTRIBUTES: readonly ["data", "digits"];
-type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
-declare class NumberFlowElement extends NumberFlowLite {
-    static observedAttributes: readonly ["data", "digits"] | never[];
-    attributeChangedCallback(attr: ObservedAttribute, _oldValue: string, newValue: string): void;
-}
-type BaseProps = React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
-    isolate?: boolean;
-    willChange?: boolean;
-    onAnimationsStart?: (e: CustomEvent<undefined>) => void;
-    onAnimationsFinish?: (e: CustomEvent<undefined>) => void;
-};
-type NumberFlowProps = BaseProps & {
-    value: Value;
-    locales?: Intl.LocalesArgument;
-    format?: Format;
-    prefix?: string;
-    suffix?: string;
-};
-declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
-    isolate?: boolean;
-    willChange?: boolean;
-    onAnimationsStart?: (e: CustomEvent<undefined>) => void;
-    onAnimationsFinish?: (e: CustomEvent<undefined>) => void;
-} & {
-    value: Value;
-    locales?: Intl.LocalesArgument;
-    format?: Format;
-    prefix?: string;
-    suffix?: string;
-} & React.RefAttributes<NumberFlowElement>>;
-
-declare function NumberFlowGroup({ children }: {
-    children: React.ReactNode;
-}): React.JSX.Element;
 declare const useIsSupported: () => boolean;
 declare const usePrefersReducedMotion: () => boolean;
 declare function useCanAnimate({ respectMotionPreference }?: {
     respectMotionPreference?: boolean | undefined;
 }): boolean;
 
-export { NumberFlowElement, NumberFlowGroup, type NumberFlowProps, NumberFlow as default, useCanAnimate, useIsSupported, usePrefersReducedMotion };
+export { useCanAnimate, useIsSupported, usePrefersReducedMotion };

package/dist/index.d.ts

@@ -1,47 +1,12 @@
-import * as React from 'react';
-import { NumberFlowLite, Value, Format, Props } from 'number-flow';
-export { Format, NumberPartType, Trend, Value } from 'number-flow';
 export * from 'number-flow/plugins';
+export { NumberFlowElement, NumberFlowGroup, NumberFlowProps, default } from './NumberFlow.js';
+export { Format, NumberPartType, Trend, Value } from 'number-flow';
+import 'react';
 
-declare const OBSERVED_ATTRIBUTES: readonly ["data", "digits"];
-type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
-declare class NumberFlowElement extends NumberFlowLite {
-    static observedAttributes: readonly ["data", "digits"] | never[];
-    attributeChangedCallback(attr: ObservedAttribute, _oldValue: string, newValue: string): void;
-}
-type BaseProps = React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
-    isolate?: boolean;
-    willChange?: boolean;
-    onAnimationsStart?: (e: CustomEvent<undefined>) => void;
-    onAnimationsFinish?: (e: CustomEvent<undefined>) => void;
-};
-type NumberFlowProps = BaseProps & {
-    value: Value;
-    locales?: Intl.LocalesArgument;
-    format?: Format;
-    prefix?: string;
-    suffix?: string;
-};
-declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
-    isolate?: boolean;
-    willChange?: boolean;
-    onAnimationsStart?: (e: CustomEvent<undefined>) => void;
-    onAnimationsFinish?: (e: CustomEvent<undefined>) => void;
-} & {
-    value: Value;
-    locales?: Intl.LocalesArgument;
-    format?: Format;
-    prefix?: string;
-    suffix?: string;
-} & React.RefAttributes<NumberFlowElement>>;
-
-declare function NumberFlowGroup({ children }: {
-    children: React.ReactNode;
-}): React.JSX.Element;
 declare const useIsSupported: () => boolean;
 declare const usePrefersReducedMotion: () => boolean;
 declare function useCanAnimate({ respectMotionPreference }?: {
     respectMotionPreference?: boolean | undefined;
 }): boolean;
 
-export { NumberFlowElement, NumberFlowGroup, type NumberFlowProps, NumberFlow as default, useCanAnimate, useIsSupported, usePrefersReducedMotion };
+export { useCanAnimate, useIsSupported, usePrefersReducedMotion };

package/dist/index.js

@@ -1,5 +1,4 @@
 "use strict";
-"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -30,20 +29,24 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.tsx
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   NumberFlowElement: () => NumberFlowElement,
   NumberFlowGroup: () => NumberFlowGroup,
-  default: () => src_default,
+  default: () => NumberFlow_default,
   useCanAnimate: () => useCanAnimate,
   useIsSupported: () => useIsSupported,
   usePrefersReducedMotion: () => usePrefersReducedMotion
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
+var React2 = __toESM(require("react"));
+var import_number_flow2 = require("number-flow");
+__reExport(index_exports, require("number-flow/plugins"), module.exports);
+
+// src/NumberFlow.tsx
 var React = __toESM(require("react"));
 var import_number_flow = require("number-flow");
 var import_esm_env = require("esm-env");
-__reExport(src_exports, require("number-flow/plugins"), module.exports);
 var REACT_MAJOR = parseInt(React.version.match(/^(\d+)\./)?.[1]);
 var isReact19 = REACT_MAJOR >= 19;
 var OBSERVED_ATTRIBUTES = ["data", "digits"];
@@ -183,7 +186,7 @@ var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format,
   }, [value, localesString, formatString, prefix, suffix]);
   return /* @__PURE__ */ React.createElement(NumberFlowImpl, { ...props, group, data, innerRef: ref });
 });
-var src_default = NumberFlow;
+var NumberFlow_default = NumberFlow;
 var NumberFlowGroupContext = React.createContext(void 0);
 function NumberFlowGroup({ children }) {
   const flows = React.useRef(/* @__PURE__ */ new Set());
@@ -223,19 +226,21 @@ function NumberFlowGroup({ children }) {
   );
   return /* @__PURE__ */ React.createElement(NumberFlowGroupContext.Provider, { value }, children);
 }
-var useIsSupported = () => React.useSyncExternalStore(
+
+// src/index.tsx
+var useIsSupported = () => React2.useSyncExternalStore(
   () => () => {
   },
   // this value doesn't change, but it's useful to specify a different SSR value:
-  () => import_number_flow.canAnimate,
+  () => import_number_flow2.canAnimate,
   () => false
 );
-var usePrefersReducedMotion = () => React.useSyncExternalStore(
+var usePrefersReducedMotion = () => React2.useSyncExternalStore(
   (cb) => {
-    import_number_flow.prefersReducedMotion?.addEventListener("change", cb);
-    return () => import_number_flow.prefersReducedMotion?.removeEventListener("change", cb);
+    import_number_flow2.prefersReducedMotion?.addEventListener("change", cb);
+    return () => import_number_flow2.prefersReducedMotion?.removeEventListener("change", cb);
   },
-  () => import_number_flow.prefersReducedMotion.matches,
+  () => import_number_flow2.prefersReducedMotion.matches,
   () => false
 );
 function useCanAnimate({ respectMotionPreference = true } = {}) {

package/dist/index.mjs

@@ -1,196 +1,16 @@
-"use client";
+import {
+  NumberFlowElement,
+  NumberFlowGroup,
+  NumberFlow_default
+} from "./chunk-44AMDIF5.mjs";
 
 // src/index.tsx
 import * as React from "react";
 import {
-  renderInnerHTML,
-  formatToData,
-  NumberFlowLite,
   prefersReducedMotion as _prefersReducedMotion,
-  canAnimate as _canAnimate,
-  define
+  canAnimate as _canAnimate
 } from "number-flow";
-import { BROWSER } from "esm-env";
 export * from "number-flow/plugins";
-var REACT_MAJOR = parseInt(React.version.match(/^(\d+)\./)?.[1]);
-var isReact19 = REACT_MAJOR >= 19;
-var OBSERVED_ATTRIBUTES = ["data", "digits"];
-var NumberFlowElement = class extends NumberFlowLite {
-  attributeChangedCallback(attr, _oldValue, newValue) {
-    this[attr] = JSON.parse(newValue);
-  }
-};
-NumberFlowElement.observedAttributes = isReact19 ? [] : OBSERVED_ATTRIBUTES;
-define("number-flow-react", NumberFlowElement);
-var formatters = {};
-var serialize = isReact19 ? (p) => p : JSON.stringify;
-function splitProps(props) {
-  const {
-    transformTiming,
-    spinTiming,
-    opacityTiming,
-    animated,
-    respectMotionPreference,
-    trend,
-    plugins,
-    ...rest
-  } = props;
-  return [
-    {
-      transformTiming,
-      spinTiming,
-      opacityTiming,
-      animated,
-      respectMotionPreference,
-      trend,
-      plugins
-    },
-    rest
-  ];
-}
-var NumberFlowImpl = class extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleRef = this.handleRef.bind(this);
-  }
-  // Update the non-`data` props to avoid JSON serialization
-  // Data needs to be set in render still:
-  updateProperties(prevProps) {
-    if (!this.el) return;
-    this.el.manual = !this.props.isolate;
-    const [nonData] = splitProps(this.props);
-    Object.entries(nonData).forEach(([k, v]) => {
-      this.el[k] = v ?? NumberFlowElement.defaultProps[k];
-    });
-    if (prevProps?.onAnimationsStart)
-      this.el.removeEventListener("animationsstart", prevProps.onAnimationsStart);
-    if (this.props.onAnimationsStart)
-      this.el.addEventListener("animationsstart", this.props.onAnimationsStart);
-    if (prevProps?.onAnimationsFinish)
-      this.el.removeEventListener("animationsfinish", prevProps.onAnimationsFinish);
-    if (this.props.onAnimationsFinish)
-      this.el.addEventListener("animationsfinish", this.props.onAnimationsFinish);
-  }
-  componentDidMount() {
-    this.updateProperties();
-    if (isReact19 && this.el) {
-      this.el.digits = this.props.digits;
-      this.el.data = this.props.data;
-    }
-  }
-  getSnapshotBeforeUpdate(prevProps) {
-    this.updateProperties(prevProps);
-    if (prevProps.data !== this.props.data) {
-      if (this.props.group) {
-        this.props.group.willUpdate();
-        return () => this.props.group?.didUpdate();
-      }
-      if (!this.props.isolate) {
-        this.el?.willUpdate();
-        return () => this.el?.didUpdate();
-      }
-    }
-    return null;
-  }
-  componentDidUpdate(_, __, didUpdate) {
-    didUpdate?.();
-  }
-  handleRef(el) {
-    if (this.props.innerRef) this.props.innerRef.current = el;
-    this.el = el;
-  }
-  render() {
-    const [
-      _,
-      {
-        innerRef,
-        className,
-        data,
-        willChange,
-        isolate,
-        group,
-        digits,
-        onAnimationsStart,
-        onAnimationsFinish,
-        ...rest
-      }
-    ] = splitProps(this.props);
-    return (
-      // @ts-expect-error missing types
-      /* @__PURE__ */ React.createElement(
-        "number-flow-react",
-        {
-          ref: this.handleRef,
-          "data-will-change": willChange ? "" : void 0,
-          class: className,
-          "aria-label": data.valueAsString,
-          ...rest,
-          role: "img",
-          dangerouslySetInnerHTML: { __html: BROWSER ? "" : renderInnerHTML(data) },
-          suppressHydrationWarning: true,
-          digits: serialize(digits),
-          data: serialize(data)
-        }
-      )
-    );
-  }
-};
-var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format, prefix, suffix, ...props }, _ref) {
-  React.useImperativeHandle(_ref, () => ref.current, []);
-  const ref = React.useRef();
-  const group = React.useContext(NumberFlowGroupContext);
-  group?.useRegister(ref);
-  const localesString = React.useMemo(() => locales ? JSON.stringify(locales) : "", [locales]);
-  const formatString = React.useMemo(() => format ? JSON.stringify(format) : "", [format]);
-  const data = React.useMemo(() => {
-    const formatter = formatters[`${localesString}:${formatString}`] ??= new Intl.NumberFormat(
-      locales,
-      format
-    );
-    return formatToData(value, formatter, prefix, suffix);
-  }, [value, localesString, formatString, prefix, suffix]);
-  return /* @__PURE__ */ React.createElement(NumberFlowImpl, { ...props, group, data, innerRef: ref });
-});
-var src_default = NumberFlow;
-var NumberFlowGroupContext = React.createContext(void 0);
-function NumberFlowGroup({ children }) {
-  const flows = React.useRef(/* @__PURE__ */ new Set());
-  const updating = React.useRef(false);
-  const pending = React.useRef(/* @__PURE__ */ new WeakMap());
-  const value = React.useMemo(
-    () => ({
-      useRegister(ref) {
-        React.useEffect(() => {
-          flows.current.add(ref);
-          return () => {
-            flows.current.delete(ref);
-          };
-        }, []);
-      },
-      willUpdate() {
-        if (updating.current) return;
-        updating.current = true;
-        flows.current.forEach((ref) => {
-          const f = ref.current;
-          if (!f || !f.created) return;
-          f.willUpdate();
-          pending.current.set(f, true);
-        });
-      },
-      didUpdate() {
-        flows.current.forEach((ref) => {
-          const f = ref.current;
-          if (!f || !pending.current.get(f)) return;
-          f.didUpdate();
-          pending.current.delete(f);
-        });
-        updating.current = false;
-      }
-    }),
-    []
-  );
-  return /* @__PURE__ */ React.createElement(NumberFlowGroupContext.Provider, { value }, children);
-}
 var useIsSupported = () => React.useSyncExternalStore(
   () => () => {
   },
@@ -214,7 +34,7 @@ function useCanAnimate({ respectMotionPreference = true } = {}) {
 export {
   NumberFlowElement,
   NumberFlowGroup,
-  src_default as default,
+  NumberFlow_default as default,
   useCanAnimate,
   useIsSupported,
   usePrefersReducedMotion

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.2",
+  "version": "0.5.3",
   "author": {
     "name": "Maxwell Barvian",
     "email": "max@barvian.me",
@@ -58,7 +58,7 @@
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tsup": "^8.2.4"
+    "tsup": "^8.3.5"
   },
   "peerDependencies": {
     "react": "^18 || ^19",