@number-flow/react 0.5.12 → 0.5.13

package/dist/{NumberFlow-client-48rw3j0J.mjs → NumberFlow-client-BTpPLmzo.mjs}

@@ -22,7 +22,10 @@ define('number-flow-react', NumberFlowElement);
 // Serialize to strings b/c React:
 const formatters = {};
 // Tiny workaround to support React 19 until it's released:
-const serialize = isReact19 ? (p)=>p : JSON.stringify;
+function identity(v) {
+    return v;
+}
+const serialize = isReact19 ? identity : JSON.stringify;
 function splitProps(props) {
     const { transformTiming, spinTiming, opacityTiming, animated, respectMotionPreference, trend, plugins, ...rest } = props;
     return [
@@ -85,16 +88,20 @@ class NumberFlowImpl extends React.Component {
         this.el = el;
     }
     render() {
-        const [_, { innerRef, className, data, willChange, isolate, group, digits, onAnimationsStart, onAnimationsFinish, ...rest }] = splitProps(this.props);
+        const [_, { innerRef, className, data, nonce, 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 ? '' : undefined,
             // Have to rename this:
             class: className,
+            nonce: nonce,
             ...rest,
             dangerouslySetInnerHTML: {
-                __html: BROWSER ? '' : renderInnerHTML(data)
+                __html: BROWSER ? '' : renderInnerHTML(data, {
+                    nonce,
+                    elementSuffix: '-react'
+                })
             },
             suppressHydrationWarning: true,
             digits: serialize(digits),

package/dist/{NumberFlow-client-8ThZK4QG.js → NumberFlow-client-CN4TfYrs.js}

@@ -45,7 +45,10 @@ NumberFlowLite.define('number-flow-react', NumberFlowElement);
 // Serialize to strings b/c React:
 const formatters = {};
 // Tiny workaround to support React 19 until it's released:
-const serialize = isReact19 ? (p)=>p : JSON.stringify;
+function identity(v) {
+    return v;
+}
+const serialize = isReact19 ? identity : JSON.stringify;
 function splitProps(props) {
     const { transformTiming, spinTiming, opacityTiming, animated, respectMotionPreference, trend, plugins, ...rest } = props;
     return [
@@ -108,16 +111,20 @@ class NumberFlowImpl extends React__namespace.Component {
         this.el = el;
     }
     render() {
-        const [_, { innerRef, className, data, willChange, isolate, group, digits, onAnimationsStart, onAnimationsFinish, ...rest }] = splitProps(this.props);
+        const [_, { innerRef, className, data, nonce, willChange, isolate, group, digits, onAnimationsStart, onAnimationsFinish, ...rest }] = splitProps(this.props);
         return(// @ts-expect-error missing types
         /*#__PURE__*/ React__namespace.createElement("number-flow-react", {
             ref: this.handleRef,
             "data-will-change": willChange ? '' : undefined,
             // Have to rename this:
             class: className,
+            nonce: nonce,
             ...rest,
             dangerouslySetInnerHTML: {
-                __html: esmEnv.BROWSER ? '' : NumberFlowLite.renderInnerHTML(data)
+                __html: esmEnv.BROWSER ? '' : NumberFlowLite.renderInnerHTML(data, {
+                    nonce,
+                    elementSuffix: '-react'
+                })
             },
             suppressHydrationWarning: true,
             digits: serialize(digits),

package/dist/index.d.mts

@@ -39,10 +39,12 @@ declare function NumberFlowGroup({ children }: {
     children: React.ReactNode;
 }): React.JSX.Element;
 
+declare const styles: readonly [string, string, string];
+
 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 { NumberFlowElement, NumberFlowGroup, type NumberFlowProps, NumberFlow as default, styles, useCanAnimate, useIsSupported, usePrefersReducedMotion };

package/dist/index.d.ts

@@ -39,10 +39,12 @@ declare function NumberFlowGroup({ children }: {
     children: React.ReactNode;
 }): React.JSX.Element;
 
+declare const styles: readonly [string, string, string];
+
 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 { NumberFlowElement, NumberFlowGroup, type NumberFlowProps, NumberFlow as default, styles, useCanAnimate, useIsSupported, usePrefersReducedMotion };

package/dist/index.js

@@ -2,8 +2,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var NumberFlowLite = require('number-flow/lite');
+var csp = require('number-flow/csp');
 var plugins = require('number-flow/plugins');
-var NumberFlowClient = require('./NumberFlow-client-8ThZK4QG.js');
+var NumberFlowClient = require('./NumberFlow-client-CN4TfYrs.js');
 
 function _interopNamespace(e) {
 	if (e && e.__esModule) return e;
@@ -25,6 +26,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+const styles = csp.buildStyles('-react');
 const useIsSupported = ()=>React__namespace.useSyncExternalStore(()=>()=>{}, ()=>NumberFlowLite.canAnimate, ()=>false);
 const usePrefersReducedMotion = ()=>React__namespace.useSyncExternalStore((cb)=>{
         NumberFlowLite.prefersReducedMotion?.addEventListener('change', cb);
@@ -39,6 +41,7 @@ function useCanAnimate({ respectMotionPreference = true } = {}) {
 exports.NumberFlowElement = NumberFlowClient.NumberFlowElement;
 exports.NumberFlowGroup = NumberFlowClient.NumberFlowGroup;
 exports.default = NumberFlowClient.NumberFlow;
+exports.styles = styles;
 exports.useCanAnimate = useCanAnimate;
 exports.useIsSupported = useIsSupported;
 exports.usePrefersReducedMotion = usePrefersReducedMotion;

package/dist/index.mjs

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { canAnimate, prefersReducedMotion } from 'number-flow/lite';
+import { buildStyles } from 'number-flow/csp';
 export * from 'number-flow/plugins';
-export { a as NumberFlowElement, b as NumberFlowGroup, N as default } from './NumberFlow-client-48rw3j0J.mjs';
+export { a as NumberFlowElement, b as NumberFlowGroup, N as default } from './NumberFlow-client-BTpPLmzo.mjs';
 
+const styles = buildStyles('-react');
 const useIsSupported = ()=>React.useSyncExternalStore(()=>()=>{}, ()=>canAnimate, ()=>false);
 const usePrefersReducedMotion = ()=>React.useSyncExternalStore((cb)=>{
         prefersReducedMotion?.addEventListener('change', cb);
@@ -14,4 +16,4 @@ function useCanAnimate({ respectMotionPreference = true } = {}) {
     return isSupported && (!respectMotionPreference || !reducedMotion);
 }
 
-export { useCanAnimate, useIsSupported, usePrefersReducedMotion };
+export { styles, useCanAnimate, useIsSupported, usePrefersReducedMotion };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.12",
+  "version": "0.5.13",
   "author": {
     "name": "Maxwell Barvian",
     "email": "max@barvian.me",
@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "esm-env": "^1.1.4",
-    "number-flow": "0.5.10"
+    "number-flow": "0.5.11"
   },
   "devDependencies": {
     "@playwright/test": "^1.48.0",