@joza/joza-ui-kit 0.1.6 → 0.1.8

package/dist/joza-ui-kit.cjs

@@ -0,0 +1,60 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+var styles$1 = {"animatedStat":"animated-stat-module_animatedStat__Hyy77","animatedStat__number":"animated-stat-module_animatedStat__number__xa33x","animatedStat__unit":"animated-stat-module_animatedStat__unit__N6MDD","animatedStat__label":"animated-stat-module_animatedStat__label__VpNaZ"};
+
+const AnimatedStat = ({ label, unit, value }) => {
+    const useCountUp = (end, duration = 2000, startCounting = false) => {
+        const [count, setCount] = react.useState(0);
+        react.useEffect(() => {
+            if (!startCounting)
+                return;
+            let startTime;
+            let animationFrame;
+            const animate = (currentTime) => {
+                if (!startTime)
+                    startTime = currentTime;
+                const progress = Math.min((currentTime - startTime) / duration, 1);
+                // Easing function for smooth animation
+                const easeOutQuart = 1 - Math.pow(1 - progress, 4);
+                setCount(Math.floor(easeOutQuart * end));
+                if (progress < 1) {
+                    animationFrame = requestAnimationFrame(animate);
+                }
+            };
+            animationFrame = requestAnimationFrame(animate);
+            return () => cancelAnimationFrame(animationFrame);
+        }, [end, duration, startCounting]);
+        return count;
+    };
+    react.useEffect(() => {
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                setIsVisible(true);
+            }
+        }, { threshold: 0.3 });
+        if (divRef.current) {
+            observer.observe(divRef.current);
+        }
+        return () => observer.disconnect();
+    }, []);
+    const [isVisible, setIsVisible] = react.useState(false);
+    const stat = useCountUp(value, 2000, isVisible);
+    const divRef = react.useRef(null);
+    return (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("div", { className: styles$1.animatedStat, ref: divRef, children: [jsxRuntime.jsxs("div", { className: styles$1.animatedStat, children: [jsxRuntime.jsx("span", { className: styles$1.animatedStat__number, children: stat }), jsxRuntime.jsx("span", { className: styles$1.animatedStat__unit, children: unit })] }), jsxRuntime.jsx("p", { className: styles$1.animatedStat__label, children: label })] }) }));
+};
+
+var styles = {"button2":"button2-module_button2__TJ0uA","button2__primary":"button2-module_button2__primary__b8-p4","button2__lg":"button2-module_button2__lg__KYxhn","button2__icon":"button2-module_button2__icon__k7LVe","button2__icon__picture":"button2-module_button2__icon__picture__MCRsw","button2__ghost":"button2-module_button2__ghost__yfm4E","button2__full":"button2-module_button2__full__S71L2"};
+
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+const Button2 = ({ label, size = "", style = "", disabled = false, icon: Icon, children = null, onClick = () => { } }) => {
+    return (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("button", { disabled: disabled, onClick: onClick, className: clsx(styles.button2, size === "lg" && styles.button2__lg, size === "full" && styles.button2__full, style === "" && styles.button2__primary, style === "ghost" && styles.button2__ghost), children: [!children &&
+                    jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label, Icon && jsxRuntime.jsx(Icon, { className: clsx(styles.button2__icon, styles.button2__icon__picture) })] }), children && jsxRuntime.jsx(jsxRuntime.Fragment, { children: children })] }) }));
+};
+
+exports.AnimatedStat = AnimatedStat;
+exports.Button2 = Button2;
+//# sourceMappingURL=joza-ui-kit.cjs.map

package/dist/joza-ui-kit.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"joza-ui-kit.cjs","sources":["../src/component/basic/animated-stat/animated-stat.tsx","../node_modules/clsx/dist/clsx.mjs","../src/component/basic/button2/button2.tsx"],"sourcesContent":["import styles from './animated-stat.module.scss';\nimport {useEffect, useRef, useState} from \"react\";\n\nexport interface AnimatedStatProps {\n    label: string;\n    unit: string;\n    value: number;\n}\n\nconst AnimatedStat = ({label, unit, value} : AnimatedStatProps) => {\n\n    const useCountUp = (end: number, duration: number = 2000, startCounting: boolean = false) => {\n        const [count, setCount] = useState(0);\n\n        useEffect(() => {\n            if (!startCounting) return;\n\n            let startTime: number;\n            let animationFrame: number;\n\n            const animate = (currentTime: number) => {\n                if (!startTime) startTime = currentTime;\n                const progress = Math.min((currentTime - startTime) / duration, 1);\n\n                // Easing function for smooth animation\n                const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n                setCount(Math.floor(easeOutQuart * end));\n\n                if (progress < 1) {\n                    animationFrame = requestAnimationFrame(animate);\n                }\n            };\n\n            animationFrame = requestAnimationFrame(animate);\n            return () => cancelAnimationFrame(animationFrame);\n        }, [end, duration, startCounting]);\n\n        return count;\n    };\n\n    useEffect(() => {\n        const observer = new IntersectionObserver(\n            ([entry]) => {\n                if (entry.isIntersecting) {\n                    setIsVisible(true);\n                }\n            },\n            { threshold: 0.3 }\n        );\n\n        if (divRef.current) {\n            observer.observe(divRef.current);\n        }\n\n        return () => observer.disconnect();\n    }, []);\n\n    const [isVisible, setIsVisible] = useState(false);\n    const stat = useCountUp(value, 2000, isVisible);\n    const divRef = useRef<HTMLDivElement>(null)\n\n    return (\n        <div>\n            <div className={styles.animatedStat} ref={divRef}>\n                <div className={styles.animatedStat}>\n                    <span className={styles.animatedStat__number}>{stat}</span>\n                    <span className={styles.animatedStat__unit}>{unit}</span>\n                </div>\n                <p className={styles.animatedStat__label}>{label}</p>\n            </div>\n        </div>)\n}\n\nexport default AnimatedStat;\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import {LucideIcon} from \"lucide-react\";\nimport styles from './button2.module.scss';\nimport clsx from 'clsx';\nimport {ReactNode} from \"react\";\n\nexport interface Button2Props {\n    label?: string;\n    icon?: LucideIcon;\n    size?: \"\" | \"lg\" | \"full\";\n    style?: \"\" | \"ghost\";\n    disabled?: boolean;\n    onClick?: () => void;\n    children?: ReactNode;\n}\n\nconst Button2 = ({label, size = \"\", style = \"\", disabled = false, icon :Icon, children = null, onClick = () => {}} : Button2Props) => {\n    return (\n        <div>\n        <button disabled={disabled} onClick={onClick}  className={\n                clsx(\n                    styles.button2,\n                    size === \"lg\" && styles.button2__lg,\n                    size === \"full\" && styles.button2__full,\n                    style === \"\" && styles.button2__primary,\n                    style === \"ghost\" && styles.button2__ghost)}>\n            {!children &&\n                <>\n                    {label}\n                    {Icon && <Icon className={clsx(styles.button2__icon, styles.button2__icon__picture)}/>}\n                </>}\n            {children && <>{children}</>}\n        </button>\n    </div>)\n}\n\nexport default Button2;\n"],"names":["useState","useEffect","useRef","_jsx","_jsxs","styles","_Fragment"],"mappings":"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","x_google_ignoreList":[1]}