@chayns-components/core 5.5.57 → 5.5.59-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimatedNumber.js","names":["_react","_interopRequireWildcard","require","_react2","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DEFAULT_ROUND","Math","round","DEFAULT_EASE","AnimatedNumber","value","duration","delay","locale","format","startFrom","onComplete","ease","motionValue","useMotionValue","display","setDisplay","useState","formatter","useMemo","toLocaleString","useEffect","controls","animate","stop","unsub","on","v","createElement","Fragment","exports","displayName","_default"],"sources":["../../../../src/components/animated-number/AnimatedNumber.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport { animate, useMotionValue } from 'motion/react';\nimport { Easing
|
|
1
|
+
{"version":3,"file":"AnimatedNumber.js","names":["_react","_interopRequireWildcard","require","_react2","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DEFAULT_ROUND","Math","round","DEFAULT_EASE","AnimatedNumber","value","duration","delay","locale","format","startFrom","onComplete","ease","motionValue","useMotionValue","display","setDisplay","useState","formatter","useMemo","toLocaleString","useEffect","controls","animate","stop","unsub","on","v","createElement","Fragment","exports","displayName","_default"],"sources":["../../../../src/components/animated-number/AnimatedNumber.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport { animate, useMotionValue } from 'motion/react';\nimport { Easing } from 'motion';\n\ntype Ease = [number, number, number, number] | ((t: number) => number) | string;\n\nexport interface AnimatedNumberProps {\n /**\n * Start delay of the animation in seconds.\n */\n delay?: number;\n /**\n * Total duration of the animation in seconds.\n */\n duration?: number;\n /**\n * Easing curve of the animation (e.g., cubic-bezier like [0.16, 1, 0.3, 1] or predefined easings).\n * Controls how the animation accelerates/decelerates.\n */\n ease?: Ease;\n /**\n * Custom formatter for the displayed value.\n * If provided, it overrides locale/toLocaleString and round.\n * Example: (n) => `${Math.round(n)} points`\n */\n format?: (n: number) => string;\n /**\n * Locale used by toLocaleString when no custom formatter is provided.\n */\n locale?: string;\n /**\n * Callback invoked when the animation completes.\n */\n onComplete?: () => void;\n /**\n * Custom rounding function when no custom formatter is provided.\n * Default: Math.round\n */\n round?: (n: number) => number;\n /**\n * Starting value for the animation.\n * Default: 0\n */\n startFrom?: number;\n /**\n * Target value to animate to.\n */\n value: number;\n}\n\nconst DEFAULT_ROUND = Math.round;\nconst DEFAULT_EASE: Ease = [0.16, 1, 0.3, 1];\n\nexport const AnimatedNumber: FC<AnimatedNumberProps> = ({\n value,\n duration = 2,\n delay = 0,\n locale = 'de',\n format,\n round = DEFAULT_ROUND,\n startFrom = 0,\n onComplete,\n ease = DEFAULT_EASE,\n}) => {\n const motionValue = useMotionValue(startFrom);\n\n const [display, setDisplay] = useState<number>(startFrom);\n\n const formatter = useMemo(() => {\n if (format) return format;\n\n return (n: number) => round(n).toLocaleString(locale);\n }, [format, locale, round]);\n\n useEffect(() => {\n motionValue.set(startFrom);\n\n const controls = animate(motionValue, value, {\n duration,\n delay,\n ease: ease as Easing,\n onComplete,\n });\n\n return () => controls.stop();\n }, [value, duration, delay, startFrom, onComplete, ease, motionValue]);\n\n useEffect(() => {\n const unsub = motionValue.on('change', (v) => setDisplay(v));\n\n return () => unsub();\n }, [motionValue]);\n\n return <>{formatter(display)}</>;\n};\n\nAnimatedNumber.displayName = 'AnimatedNumber';\n\nexport default AnimatedNumber;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimatedNumber.js","names":["React","useEffect","useMemo","useState","animate","useMotionValue","DEFAULT_ROUND","Math","round","DEFAULT_EASE","AnimatedNumber","value","duration","delay","locale","format","startFrom","onComplete","ease","motionValue","display","setDisplay","formatter","n","toLocaleString","set","controls","stop","unsub","on","v","createElement","Fragment","displayName"],"sources":["../../../../src/components/animated-number/AnimatedNumber.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport { animate, useMotionValue } from 'motion/react';\nimport { Easing
|
|
1
|
+
{"version":3,"file":"AnimatedNumber.js","names":["React","useEffect","useMemo","useState","animate","useMotionValue","DEFAULT_ROUND","Math","round","DEFAULT_EASE","AnimatedNumber","value","duration","delay","locale","format","startFrom","onComplete","ease","motionValue","display","setDisplay","formatter","n","toLocaleString","set","controls","stop","unsub","on","v","createElement","Fragment","displayName"],"sources":["../../../../src/components/animated-number/AnimatedNumber.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport { animate, useMotionValue } from 'motion/react';\nimport { Easing } from 'motion';\n\ntype Ease = [number, number, number, number] | ((t: number) => number) | string;\n\nexport interface AnimatedNumberProps {\n /**\n * Start delay of the animation in seconds.\n */\n delay?: number;\n /**\n * Total duration of the animation in seconds.\n */\n duration?: number;\n /**\n * Easing curve of the animation (e.g., cubic-bezier like [0.16, 1, 0.3, 1] or predefined easings).\n * Controls how the animation accelerates/decelerates.\n */\n ease?: Ease;\n /**\n * Custom formatter for the displayed value.\n * If provided, it overrides locale/toLocaleString and round.\n * Example: (n) => `${Math.round(n)} points`\n */\n format?: (n: number) => string;\n /**\n * Locale used by toLocaleString when no custom formatter is provided.\n */\n locale?: string;\n /**\n * Callback invoked when the animation completes.\n */\n onComplete?: () => void;\n /**\n * Custom rounding function when no custom formatter is provided.\n * Default: Math.round\n */\n round?: (n: number) => number;\n /**\n * Starting value for the animation.\n * Default: 0\n */\n startFrom?: number;\n /**\n * Target value to animate to.\n */\n value: number;\n}\n\nconst DEFAULT_ROUND = Math.round;\nconst DEFAULT_EASE: Ease = [0.16, 1, 0.3, 1];\n\nexport const AnimatedNumber: FC<AnimatedNumberProps> = ({\n value,\n duration = 2,\n delay = 0,\n locale = 'de',\n format,\n round = DEFAULT_ROUND,\n startFrom = 0,\n onComplete,\n ease = DEFAULT_EASE,\n}) => {\n const motionValue = useMotionValue(startFrom);\n\n const [display, setDisplay] = useState<number>(startFrom);\n\n const formatter = useMemo(() => {\n if (format) return format;\n\n return (n: number) => round(n).toLocaleString(locale);\n }, [format, locale, round]);\n\n useEffect(() => {\n motionValue.set(startFrom);\n\n const controls = animate(motionValue, value, {\n duration,\n delay,\n ease: ease as Easing,\n onComplete,\n });\n\n return () => controls.stop();\n }, [value, duration, delay, startFrom, onComplete, ease, motionValue]);\n\n useEffect(() => {\n const unsub = motionValue.on('change', (v) => setDisplay(v));\n\n return () => unsub();\n }, [motionValue]);\n\n return <>{formatter(display)}</>;\n};\n\nAnimatedNumber.displayName = 'AnimatedNumber';\n\nexport default AnimatedNumber;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SAASC,OAAO,EAAEC,cAAc,QAAQ,cAAc;AAiDtD,MAAMC,aAAa,GAAGC,IAAI,CAACC,KAAK;AAChC,MAAMC,YAAkB,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;AAE5C,OAAO,MAAMC,cAAuC,GAAGA,CAAC;EACpDC,KAAK;EACLC,QAAQ,GAAG,CAAC;EACZC,KAAK,GAAG,CAAC;EACTC,MAAM,GAAG,IAAI;EACbC,MAAM;EACNP,KAAK,GAAGF,aAAa;EACrBU,SAAS,GAAG,CAAC;EACbC,UAAU;EACVC,IAAI,GAAGT;AACX,CAAC,KAAK;EACF,MAAMU,WAAW,GAAGd,cAAc,CAACW,SAAS,CAAC;EAE7C,MAAM,CAACI,OAAO,EAAEC,UAAU,CAAC,GAAGlB,QAAQ,CAASa,SAAS,CAAC;EAEzD,MAAMM,SAAS,GAAGpB,OAAO,CAAC,MAAM;IAC5B,IAAIa,MAAM,EAAE,OAAOA,MAAM;IAEzB,OAAQQ,CAAS,IAAKf,KAAK,CAACe,CAAC,CAAC,CAACC,cAAc,CAACV,MAAM,CAAC;EACzD,CAAC,EAAE,CAACC,MAAM,EAAED,MAAM,EAAEN,KAAK,CAAC,CAAC;EAE3BP,SAAS,CAAC,MAAM;IACZkB,WAAW,CAACM,GAAG,CAACT,SAAS,CAAC;IAE1B,MAAMU,QAAQ,GAAGtB,OAAO,CAACe,WAAW,EAAER,KAAK,EAAE;MACzCC,QAAQ;MACRC,KAAK;MACLK,IAAI,EAAEA,IAAc;MACpBD;IACJ,CAAC,CAAC;IAEF,OAAO,MAAMS,QAAQ,CAACC,IAAI,CAAC,CAAC;EAChC,CAAC,EAAE,CAAChB,KAAK,EAAEC,QAAQ,EAAEC,KAAK,EAAEG,SAAS,EAAEC,UAAU,EAAEC,IAAI,EAAEC,WAAW,CAAC,CAAC;EAEtElB,SAAS,CAAC,MAAM;IACZ,MAAM2B,KAAK,GAAGT,WAAW,CAACU,EAAE,CAAC,QAAQ,EAAGC,CAAC,IAAKT,UAAU,CAACS,CAAC,CAAC,CAAC;IAE5D,OAAO,MAAMF,KAAK,CAAC,CAAC;EACxB,CAAC,EAAE,CAACT,WAAW,CAAC,CAAC;EAEjB,oBAAOnB,KAAA,CAAA+B,aAAA,CAAA/B,KAAA,CAAAgC,QAAA,QAAGV,SAAS,CAACF,OAAO,CAAI,CAAC;AACpC,CAAC;AAEDV,cAAc,CAACuB,WAAW,GAAG,gBAAgB;AAE7C,eAAevB,cAAc","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.5.
|
|
3
|
+
"version": "5.5.59-beta.0",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
},
|
|
86
86
|
"peerDependencies": {
|
|
87
87
|
"chayns-api": ">=2.2.0",
|
|
88
|
-
"motion": "
|
|
88
|
+
"motion": "^12.4.1 || ^13.0.0",
|
|
89
89
|
"react": ">=18.0.0",
|
|
90
90
|
"react-dom": ">=18.0.0",
|
|
91
91
|
"styled-components": ">=5.3.11"
|
|
@@ -93,5 +93,5 @@
|
|
|
93
93
|
"publishConfig": {
|
|
94
94
|
"access": "public"
|
|
95
95
|
},
|
|
96
|
-
"gitHead": "
|
|
96
|
+
"gitHead": "e8dc8555063d257462a88de3e45dc960fc212d79"
|
|
97
97
|
}
|