@flowtomic/ui 0.1.0 → 0.1.2

package/dist/components/atoms/animation/backdrop-blur/backdrop-blur.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * BackdropBlur Component - Flowtomic UI
+ *
+ * Componente de backdrop blur reutilizável para overlays e modais
+ * Usa Framer Motion para animação suave do blur
+ */
+import { motion } from "motion/react";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+/**
+ * BackdropBlur - Componente de backdrop com blur animado
+ */
+const BackdropBlur = React.forwardRef(({ isOpen, className, blurIntensity = 10, opacity = 0.5, backgroundColor = "black", disabled = false, duration = 0.2, }, ref) => {
+    // Converte backgroundColor para rgba incluindo a opacidade
+    // Usa useMemo para evitar recálculos desnecessários
+    // IMPORTANTE: Hook deve ser chamado antes de qualquer early return
+    const backgroundColorWithOpacity = React.useMemo(() => {
+        const convertToRgba = (color, opacityValue) => {
+            // Se já é rgba, extrai os valores RGB e aplica nova opacidade
+            if (color.startsWith("rgba(")) {
+                const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+                if (match) {
+                    return `rgba(${match[1]}, ${match[2]}, ${match[3]}, ${opacityValue})`;
+                }
+            }
+            // Se é rgb, adiciona opacidade
+            if (color.startsWith("rgb(")) {
+                const match = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+                if (match) {
+                    return `rgba(${match[1]}, ${match[2]}, ${match[3]}, ${opacityValue})`;
+                }
+            }
+            // Se é hex, converte para rgba
+            if (color.startsWith("#")) {
+                const hex = color.replace("#", "");
+                const r = parseInt(hex.substring(0, 2), 16);
+                const g = parseInt(hex.substring(2, 4), 16);
+                const b = parseInt(hex.substring(4, 6), 16);
+                return `rgba(${r}, ${g}, ${b}, ${opacityValue})`;
+            }
+            // Para cores nomeadas comuns, usa valores conhecidos
+            const namedColors = {
+                black: [0, 0, 0],
+                white: [255, 255, 255],
+                red: [255, 0, 0],
+                green: [0, 128, 0],
+                blue: [0, 0, 255],
+                transparent: [0, 0, 0],
+            };
+            const lowerColor = color.toLowerCase();
+            if (namedColors[lowerColor]) {
+                const [r, g, b] = namedColors[lowerColor];
+                return `rgba(${r}, ${g}, ${b}, ${opacityValue})`;
+            }
+            // Fallback: retorna a cor original (opacidade será aplicada via CSS)
+            return color;
+        };
+        return {
+            open: convertToRgba(backgroundColor, opacity),
+            closed: convertToRgba(backgroundColor, 0),
+        };
+    }, [backgroundColor, opacity]);
+    if (disabled) {
+        return (_jsx("div", { ref: ref, className: cn("fixed inset-0 z-40", className), style: {
+                backgroundColor: `${backgroundColor}${Math.round(opacity * 255)
+                    .toString(16)
+                    .padStart(2, "0")}`,
+                backdropFilter: isOpen ? `blur(${blurIntensity}px)` : "blur(0px)",
+            } }));
+    }
+    return (_jsx(motion.div, { ref: ref, initial: false, animate: isOpen
+            ? {
+                backdropFilter: `blur(${blurIntensity}px)`,
+                backgroundColor: backgroundColorWithOpacity.open,
+            }
+            : {
+                backdropFilter: "blur(0px)",
+                backgroundColor: backgroundColorWithOpacity.closed,
+            }, transition: { duration }, className: cn("fixed inset-0 z-40", className) }));
+});
+BackdropBlur.displayName = "BackdropBlur";
+export { BackdropBlur };

package/dist/components/atoms/animation/backdrop-blur/index.d.ts

@@ -0,0 +1,3 @@
+export type { BackdropBlurProps } from "./backdrop-blur";
+export { BackdropBlur } from "./backdrop-blur";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/animation/backdrop-blur/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/animation/backdrop-blur/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/atoms/animation/backdrop-blur/index.js

@@ -0,0 +1 @@
+export { BackdropBlur } from "./backdrop-blur";

package/dist/components/atoms/animation/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Animation Atoms - Componentes de Animação
+ * Atomic Design: Componentes atômicos de animação reutilizáveis
+ */
+export type { Animated3DProps } from "./animated-3d";
+export { Animated3D } from "./animated-3d";
+export type { BackdropBlurProps } from "./backdrop-blur";
+export { BackdropBlur } from "./backdrop-blur";
+export type { LoaderProps } from "./loader";
+export { Loader } from "./loader";
+export type { ProgressProps } from "./progress";
+export { Progress } from "./progress";
+export type { TextShimmerProps } from "./shimmer";
+export { Shimmer } from "./shimmer";
+export type { SlidingNumberProps } from "./sliding-number";
+export { SlidingNumber } from "./sliding-number";
+export type { SpinnerProps } from "./spinner";
+export { Spinner } from "./spinner";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/animation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/animation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/atoms/animation/index.js

@@ -0,0 +1,11 @@
+/**
+ * Animation Atoms - Componentes de Animação
+ * Atomic Design: Componentes atômicos de animação reutilizáveis
+ */
+export { Animated3D } from "./animated-3d";
+export { BackdropBlur } from "./backdrop-blur";
+export { Loader } from "./loader";
+export { Progress } from "./progress";
+export { Shimmer } from "./shimmer";
+export { SlidingNumber } from "./sliding-number";
+export { Spinner } from "./spinner";

package/dist/components/atoms/animation/loader/index.d.ts

@@ -0,0 +1,3 @@
+export type { LoaderProps } from "./loader";
+export { Loader } from "./loader";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/animation/loader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/animation/loader/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/atoms/animation/loader/index.js

@@ -0,0 +1 @@
+export { Loader } from "./loader";

package/dist/components/atoms/animation/loader/loader.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Loader Component - Flowtomic UI
+ *
+ * Componente de loading spinner
+ */
+import * as React from "react";
+export type LoaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    size?: number;
+};
+export declare const Loader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    size?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=loader.d.ts.map

package/dist/components/atoms/animation/loader/loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/animation/loader/loader.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4E/B,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,MAAM;WAHV,MAAM;wCAad,CAAC"}

package/dist/components/atoms/animation/loader/loader.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Loader Component - Flowtomic UI
+ *
+ * Componente de loading spinner
+ */
+import * as React from "react";
+import { cn } from "@/lib/utils";
+const LoaderIcon = ({ size = 16 }) => (_jsxs("svg", { height: size, strokeLinejoin: "round", style: { color: "currentcolor" }, viewBox: "0 0 16 16", width: size, children: [_jsx("title", { children: "Loader" }), _jsxs("g", { clipPath: "url(#clip0_2393_1490)", children: [_jsx("path", { d: "M8 0V4", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M8 16V12", opacity: "0.5", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M3.29773 1.52783L5.64887 4.7639", opacity: "0.9", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M12.7023 1.52783L10.3511 4.7639", opacity: "0.1", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M12.7023 14.472L10.3511 11.236", opacity: "0.4", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M3.29773 14.472L5.64887 11.236", opacity: "0.6", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M15.6085 5.52783L11.8043 6.7639", opacity: "0.2", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M0.391602 10.472L4.19583 9.23598", opacity: "0.7", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M15.6085 10.4722L11.8043 9.2361", opacity: "0.3", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M0.391602 5.52783L4.19583 6.7639", opacity: "0.8", stroke: "currentColor", strokeWidth: "1.5" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_2393_1490", children: _jsx("rect", { fill: "white", height: "16", width: "16" }) }) })] }));
+export const Loader = React.forwardRef(({ className, size = 16, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("inline-flex animate-spin items-center justify-center", className), ...props, children: _jsx(LoaderIcon, { size: size }) })));
+Loader.displayName = "Loader";

package/dist/components/atoms/animation/progress/index.d.ts

@@ -0,0 +1,2 @@
+export { Progress, type ProgressProps } from "./progress";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/animation/progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/animation/progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/atoms/animation/progress/index.js

@@ -0,0 +1 @@
+export { Progress } from "./progress";

package/dist/components/atoms/animation/progress/progress.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Progress Component - Flowtomic UI
+ *
+ * Componente de barra de progresso
+ */
+import * as React from "react";
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    max?: number;
+}
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+export { Progress };
+//# sourceMappingURL=progress.d.ts.map

package/dist/components/atoms/animation/progress/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/animation/progress/progress.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,QAAA,MAAM,QAAQ,sFAqBb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/atoms/animation/progress/progress.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Progress Component - Flowtomic UI
+ *
+ * Componente de barra de progresso
+ */
+import * as React from "react";
+import { cn } from "@/lib/utils";
+const Progress = React.forwardRef(({ className, value = 0, max = 100, ...props }, ref) => {
+    const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+    return (_jsx("div", { ref: ref, className: cn("relative h-2 w-full overflow-hidden rounded-full bg-secondary", className), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": value, ...props, children: _jsx("div", { className: "h-full w-full flex-1 bg-primary transition-all", style: { transform: `translateX(-${100 - percentage}%)` } }) }));
+});
+Progress.displayName = "Progress";
+export { Progress };

package/dist/components/atoms/animation/shimmer/index.d.ts

@@ -0,0 +1,3 @@
+export type { TextShimmerProps } from "./shimmer";
+export { Shimmer } from "./shimmer";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/animation/shimmer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/animation/shimmer/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/atoms/animation/shimmer/index.js

@@ -0,0 +1 @@
+export { Shimmer } from "./shimmer";

package/dist/components/atoms/animation/shimmer/shimmer.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Shimmer Component - Flowtomic UI
+ *
+ * Componente de texto com efeito shimmer animado
+ */
+import { type ElementType } from "react";
+export type TextShimmerProps = {
+    children: string;
+    as?: ElementType;
+    className?: string;
+    duration?: number;
+    spread?: number;
+};
+export declare const Shimmer: import("react").MemoExoticComponent<({ children, as: Component, className, duration, spread, }: TextShimmerProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=shimmer.d.ts.map

package/dist/components/atoms/animation/shimmer/shimmer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shimmer.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/animation/shimmer/shimmer.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAsB,KAAK,WAAW,EAA2B,MAAM,OAAO,CAAC;AAGtF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAwCF,eAAO,MAAM,OAAO,kGAhCjB,gBAAgB,6CAgC0B,CAAC"}

package/dist/components/atoms/animation/shimmer/shimmer.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Shimmer Component - Flowtomic UI
+ *
+ * Componente de texto com efeito shimmer animado
+ */
+import { motion } from "motion/react";
+import { memo, useMemo } from "react";
+import { cn } from "@/lib/utils";
+const ShimmerComponent = ({ children, as: Component = "p", className, duration = 2, spread = 2, }) => {
+    const MotionComponent = motion.create(Component);
+    const dynamicSpread = useMemo(() => (children?.length ?? 0) * spread, [children, spread]);
+    return (_jsx(MotionComponent, { animate: { backgroundPosition: "0% center" }, className: cn("relative inline-block bg-size-[250%_100%,auto] bg-clip-text text-transparent", "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]", className), initial: { backgroundPosition: "100% center" }, style: {
+            "--spread": `${dynamicSpread}px`,
+            backgroundImage: "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))",
+        }, transition: {
+            repeat: Number.POSITIVE_INFINITY,
+            duration,
+            ease: "linear",
+        }, children: children }));
+};
+export const Shimmer = memo(ShimmerComponent);
+Shimmer.displayName = "Shimmer";

package/dist/components/atoms/animation/sliding-number/index.d.ts

@@ -0,0 +1,3 @@
+export type { SlidingNumberProps } from "./sliding-number";
+export { SlidingNumber } from "./sliding-number";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/animation/sliding-number/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/animation/sliding-number/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/atoms/animation/sliding-number/index.js

@@ -0,0 +1 @@
+export { SlidingNumber } from "./sliding-number";

package/dist/components/atoms/animation/sliding-number/sliding-number.d.ts

@@ -0,0 +1,21 @@
+/**
+ * SlidingNumber Component - Flowtomic UI
+ *
+ * Componente para exibir números com animação de deslizamento
+ * Baseado em motion/react para animações suaves
+ */
+import { type SpringOptions, type UseInViewOptions } from "motion/react";
+import * as React from "react";
+export interface SlidingNumberProps extends React.ComponentProps<"span"> {
+    number: number | string;
+    inView?: boolean;
+    inViewMargin?: UseInViewOptions["margin"];
+    inViewOnce?: boolean;
+    padStart?: boolean;
+    decimalSeparator?: string;
+    decimalPlaces?: number;
+    transition?: SpringOptions;
+}
+declare function SlidingNumber({ ref, number, className, inView, inViewMargin, inViewOnce, padStart, decimalSeparator, decimalPlaces, transition, ...props }: SlidingNumberProps): import("react/jsx-runtime").JSX.Element;
+export { SlidingNumber };
+//# sourceMappingURL=sliding-number.d.ts.map

package/dist/components/atoms/animation/sliding-number/sliding-number.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sliding-number.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/animation/sliding-number/sliding-number.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,gBAAgB,EAItB,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqF/B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;IACtE,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,EACH,MAAM,EACN,SAAS,EACT,MAAc,EACd,YAAoB,EACpB,UAAiB,EACjB,QAAgB,EAChB,gBAAsB,EACtB,aAAiB,EACjB,UAIC,EACD,GAAG,KAAK,EACT,EAAE,kBAAkB,2CA+GpB;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/atoms/animation/sliding-number/sliding-number.js

@@ -0,0 +1,96 @@
+/**
+ * SlidingNumber Component - Flowtomic UI
+ *
+ * Componente para exibir números com animação de deslizamento
+ * Baseado em motion/react para animações suaves
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { motion, useInView, useSpring, useTransform, } from "motion/react";
+import * as React from "react";
+import useMeasure from "react-use-measure";
+import { cn } from "@/lib/utils";
+function SlidingNumberRoller({ prevValue, value, place, transition }) {
+    const startNumber = Math.floor(prevValue / place) % 10;
+    const targetNumber = Math.floor(value / place) % 10;
+    const animatedValue = useSpring(startNumber, transition);
+    React.useEffect(() => {
+        animatedValue.set(targetNumber);
+    }, [targetNumber, animatedValue]);
+    const [measureRef, { height }] = useMeasure();
+    return (_jsxs("span", { ref: measureRef, "data-slot": "sliding-number-roller", className: "relative inline-block w-[1ch] overflow-x-visible overflow-y-clip leading-none tabular-nums", style: { color: "var(--animated-number-color, inherit)" }, children: [_jsx("span", { className: "invisible", children: "0" }), [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((digit) => (_jsx(SlidingNumberDisplay, { motionValue: animatedValue, number: digit, height: height, transition: transition }, `sliding-digit-${digit}`)))] }));
+}
+function SlidingNumberDisplay({ motionValue, number, height, transition, }) {
+    const y = useTransform(motionValue, (latest) => {
+        if (!height)
+            return 0;
+        const currentNumber = latest % 10;
+        const offset = (10 + number - currentNumber) % 10;
+        let translateY = offset * height;
+        if (offset > 5)
+            translateY -= 10 * height;
+        return translateY;
+    });
+    if (!height) {
+        return _jsx("span", { className: "invisible absolute", children: number });
+    }
+    return (_jsx(motion.span, { "data-slot": "sliding-number-display", style: {
+            y,
+            color: "var(--animated-number-color, inherit)",
+        }, className: "absolute inset-0 flex items-center justify-center", transition: { ...transition, type: "spring" }, children: number }));
+}
+function SlidingNumber({ ref, number, className, inView = false, inViewMargin = "0px", inViewOnce = true, padStart = false, decimalSeparator = ".", decimalPlaces = 0, transition = {
+    stiffness: 200,
+    damping: 20,
+    mass: 0.4,
+}, ...props }) {
+    const localRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => {
+        if (!localRef.current) {
+            throw new Error("SlidingNumber ref is not available");
+        }
+        return localRef.current;
+    });
+    const inViewResult = useInView(localRef, {
+        once: inViewOnce,
+        margin: inViewMargin,
+    });
+    const isInView = !inView || inViewResult;
+    const prevNumberRef = React.useRef(0);
+    const effectiveNumber = React.useMemo(() => (!isInView ? 0 : Math.abs(Number(number))), [number, isInView]);
+    const formatNumber = React.useCallback((num) => (decimalPlaces != null ? num.toFixed(decimalPlaces) : num.toString()), [decimalPlaces]);
+    const numberStr = formatNumber(effectiveNumber);
+    const [newIntStrRaw, newDecStrRaw = ""] = numberStr.split(".");
+    const newIntStr = padStart && newIntStrRaw?.length === 1 ? `0${newIntStrRaw}` : newIntStrRaw;
+    const prevFormatted = formatNumber(prevNumberRef.current);
+    const [prevIntStrRaw = "", prevDecStrRaw = ""] = prevFormatted.split(".");
+    const prevIntStr = padStart && prevIntStrRaw.length === 1 ? `0${prevIntStrRaw}` : prevIntStrRaw;
+    const adjustedPrevInt = React.useMemo(() => {
+        return prevIntStr.length > (newIntStr?.length ?? 0)
+            ? prevIntStr.slice(-(newIntStr?.length ?? 0))
+            : prevIntStr.padStart(newIntStr?.length ?? 0, "0");
+    }, [prevIntStr, newIntStr]);
+    const adjustedPrevDec = React.useMemo(() => {
+        if (!newDecStrRaw)
+            return "";
+        return prevDecStrRaw.length > newDecStrRaw.length
+            ? prevDecStrRaw.slice(0, newDecStrRaw.length)
+            : prevDecStrRaw.padEnd(newDecStrRaw.length, "0");
+    }, [prevDecStrRaw, newDecStrRaw]);
+    React.useEffect(() => {
+        if (isInView)
+            prevNumberRef.current = effectiveNumber;
+    }, [effectiveNumber, isInView]);
+    const intDigitCount = newIntStr?.length ?? 0;
+    const intPlaces = React.useMemo(() => Array.from({ length: intDigitCount }, (_, i) => 10 ** (intDigitCount - i - 1)), [intDigitCount]);
+    const decPlaces = React.useMemo(() => newDecStrRaw
+        ? Array.from({ length: newDecStrRaw.length }, (_, i) => 10 ** (newDecStrRaw.length - i - 1))
+        : [], [newDecStrRaw]);
+    const newDecValue = newDecStrRaw ? parseInt(newDecStrRaw, 10) : 0;
+    const prevDecValue = adjustedPrevDec ? parseInt(adjustedPrevDec, 10) : 0;
+    return (_jsxs("span", { ref: localRef, "data-slot": "sliding-number", className: cn("flex items-center", className), style: {
+            color: "inherit",
+            ...props.style,
+        }, ...props, children: [isInView && Number(number) < 0 && (_jsx("span", { className: "mr-1", style: { color: "var(--animated-number-color, inherit)" }, children: "-" })), intPlaces.map((place) => (_jsx(SlidingNumberRoller, { prevValue: parseInt(adjustedPrevInt, 10), value: parseInt(newIntStr ?? "0", 10), place: place, transition: transition }, `int-${place}`))), newDecStrRaw && (_jsxs(_Fragment, { children: [_jsx("span", { style: { color: "var(--animated-number-color, inherit)" }, children: decimalSeparator }), decPlaces.map((place) => (_jsx(SlidingNumberRoller, { prevValue: prevDecValue, value: newDecValue, place: place, transition: transition }, `dec-${place}`)))] }))] }));
+}
+export { SlidingNumber };

package/dist/components/atoms/animation/spinner/index.d.ts

@@ -0,0 +1,3 @@
+export type { SpinnerProps } from "./spinner";
+export { Spinner } from "./spinner";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/animation/spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/animation/spinner/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/atoms/animation/spinner/index.js

@@ -0,0 +1 @@
+export { Spinner } from "./spinner";

package/dist/components/atoms/animation/spinner/spinner.d.ts

@@ -0,0 +1,9 @@
+import type * as React from "react";
+export interface SpinnerProps extends React.ComponentProps<"svg"> {
+}
+declare function Spinner({ className, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Spinner {
+    var displayName: string;
+}
+export { Spinner };
+//# sourceMappingURL=spinner.d.ts.map

package/dist/components/atoms/animation/spinner/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/animation/spinner/spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;CAAG;AAEpE,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CASrD;kBATQ,OAAO;;;AAahB,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/atoms/animation/spinner/spinner.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Loader2Icon } from "lucide-react";
+import { cn } from "@/lib/utils";
+function Spinner({ className, ...props }) {
+    return (_jsx(Loader2Icon, { role: "status", "aria-label": "Loading", className: cn("size-4 animate-spin", className), ...props }));
+}
+Spinner.displayName = "Spinner";
+export { Spinner };

package/dist/components/atoms/code/code-block/code-block.d.ts

@@ -0,0 +1,27 @@
+/**
+ * CodeBlock Component - Flowtomic UI
+ *
+ * Componente de bloco de código com syntax highlighting usando Shiki
+ */
+import * as React from "react";
+import { type ComponentProps, type HTMLAttributes } from "react";
+import { type BundledLanguage } from "shiki";
+import { Button } from "../../actions/button";
+export type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
+    code: string;
+    language: BundledLanguage;
+    showLineNumbers?: boolean;
+};
+export declare function highlightCode(code: string, language: BundledLanguage, showLineNumbers?: boolean): Promise<[string, string]>;
+export declare const CodeBlock: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    code: string;
+    language: BundledLanguage;
+    showLineNumbers?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
+    onCopy?: () => void;
+    onError?: (error: Error) => void;
+    timeout?: number;
+};
+export declare const CodeBlockCopyButton: React.ForwardRefExoticComponent<Omit<CodeBlockCopyButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=code-block.d.ts.map

package/dist/components/atoms/code/code-block/code-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/code/code-block/code-block.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,eAAe,EAAqC,MAAM,OAAO,CAAC;AAEhF,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC5D,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,eAAe,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AA+BF,wBAAsB,aAAa,CACjC,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,eAAe,EACzB,eAAe,UAAQ,6BAgBxB;AAED,eAAO,MAAM,SAAS;UAvDd,MAAM;cACF,eAAe;sBACP,OAAO;wCAsG1B,CAAC;AAGF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACrE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,mBAAmB,iHAoC/B,CAAC"}

package/dist/components/atoms/code/code-block/code-block.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import * as React from "react";
+import { createContext, useContext, useEffect, useRef, useState, } from "react";
+import { codeToHtml } from "shiki";
+import { cn } from "@/lib/utils";
+import { Button } from "../../actions/button";
+const CodeBlockContext = createContext({
+    code: "",
+});
+const lineNumberTransformer = {
+    name: "line-numbers",
+    line(node, line) {
+        node.children.unshift({
+            type: "element",
+            tagName: "span",
+            properties: {
+                className: [
+                    "inline-block",
+                    "min-w-10",
+                    "mr-4",
+                    "text-right",
+                    "select-none",
+                    "text-muted-foreground",
+                ],
+            },
+            children: [{ type: "text", value: String(line) }],
+        });
+    },
+};
+export async function highlightCode(code, language, showLineNumbers = false) {
+    const transformers = showLineNumbers ? [lineNumberTransformer] : [];
+    return await Promise.all([
+        codeToHtml(code, {
+            lang: language,
+            theme: "one-light",
+            transformers,
+        }),
+        codeToHtml(code, {
+            lang: language,
+            theme: "one-dark-pro",
+            transformers,
+        }),
+    ]);
+}
+export const CodeBlock = React.forwardRef(({ code, language, showLineNumbers = false, className, children, ...props }, ref) => {
+    const [html, setHtml] = useState("");
+    const [darkHtml, setDarkHtml] = useState("");
+    const mounted = useRef(false);
+    useEffect(() => {
+        highlightCode(code, language, showLineNumbers).then(([light, dark]) => {
+            if (!mounted.current) {
+                setHtml(light);
+                setDarkHtml(dark);
+                mounted.current = true;
+            }
+        });
+        return () => {
+            mounted.current = false;
+        };
+    }, [code, language, showLineNumbers]);
+    return (_jsx(CodeBlockContext.Provider, { value: { code }, children: _jsx("div", { ref: ref, className: cn("group relative w-full overflow-hidden rounded-md border bg-background text-foreground", className), ...props, children: _jsxs("div", { className: "relative", children: [_jsx("div", { className: "overflow-hidden dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm", 
+                        // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed for syntax highlighting"
+                        dangerouslySetInnerHTML: { __html: html } }), _jsx("div", { className: "hidden overflow-hidden dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm", 
+                        // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed for syntax highlighting"
+                        dangerouslySetInnerHTML: { __html: darkHtml } }), children && (_jsx("div", { className: "absolute top-2 right-2 flex items-center gap-2", children: children }))] }) }) }));
+});
+CodeBlock.displayName = "CodeBlock";
+export const CodeBlockCopyButton = React.forwardRef(({ onCopy, onError, timeout = 2000, children, className, ...props }, ref) => {
+    const [isCopied, setIsCopied] = useState(false);
+    const { code } = useContext(CodeBlockContext);
+    const copyToClipboard = async () => {
+        if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+            onError?.(new Error("Clipboard API not available"));
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(code);
+            setIsCopied(true);
+            onCopy?.();
+            setTimeout(() => setIsCopied(false), timeout);
+        }
+        catch (error) {
+            onError?.(error);
+        }
+    };
+    const Icon = isCopied ? CheckIcon : CopyIcon;
+    return (_jsx(Button, { ref: ref, className: cn("shrink-0", className), onClick: copyToClipboard, size: "icon", variant: "ghost", ...props, children: children ?? _jsx(Icon, { size: 14 }) }));
+});
+CodeBlockCopyButton.displayName = "CodeBlockCopyButton";

package/dist/components/atoms/code/code-block/index.d.ts

@@ -0,0 +1,3 @@
+export type { CodeBlockCopyButtonProps, CodeBlockProps } from "./code-block";
+export { CodeBlock, CodeBlockCopyButton, highlightCode } from "./code-block";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/code/code-block/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/code/code-block/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,wBAAwB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/atoms/code/code-block/index.js

@@ -0,0 +1 @@
+export { CodeBlock, CodeBlockCopyButton, highlightCode } from "./code-block";

package/dist/components/atoms/code/index.d.ts

@@ -0,0 +1,5 @@
+export type { CodeBlockCopyButtonProps, CodeBlockProps } from "./code-block";
+export { CodeBlock, CodeBlockCopyButton, highlightCode } from "./code-block";
+export type { SnippetCopyButtonProps, SnippetProps, SnippetVariant } from "./snippet";
+export { Snippet, SnippetCopyButton } from "./snippet";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/code/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/code/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,wBAAwB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7E,YAAY,EAAE,sBAAsB,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AACtF,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/atoms/code/index.js

@@ -0,0 +1,2 @@
+export { CodeBlock, CodeBlockCopyButton, highlightCode } from "./code-block";
+export { Snippet, SnippetCopyButton } from "./snippet";

package/dist/components/atoms/code/snippet/index.d.ts

@@ -0,0 +1,3 @@
+export type { SnippetCopyButtonProps, SnippetProps, SnippetVariant } from "./snippet";
+export { Snippet, SnippetCopyButton } from "./snippet";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/code/snippet/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/code/snippet/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,sBAAsB,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AACtF,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/atoms/code/snippet/index.js

@@ -0,0 +1 @@
+export { Snippet, SnippetCopyButton } from "./snippet";