@flowtomic/ui 0.1.0 → 0.1.2

package/dist/components/molecules/auth/password-input/password-input.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Eye, EyeOff } from "lucide-react";
+import { useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { inputVariants } from "../../../atoms/forms/input/input";
+export const PasswordInput = ({ id, label, placeholder = "••••••••", error, variant = "default", size = "lg", autoComplete = "new-password", value, onChange, onFocus, onBlur, className = "", required = false, register, }) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const [isManuallyVisible, setIsManuallyVisible] = useState(false);
+    const inputRef = useRef(null);
+    // A senha é visível se estiver em foco OU se o usuário clicou no botão de mostrar
+    const isPasswordVisible = isFocused || isManuallyVisible;
+    const handleFocus = (e) => {
+        setIsFocused(true);
+        onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        // Delay para permitir clique no botão antes de esconder
+        setTimeout(() => {
+            // Se o elemento ativo não for o input nem o botão, remove o foco
+            const activeElement = document.activeElement;
+            const buttonElement = activeElement?.closest('button[type="button"]');
+            if (activeElement !== inputRef.current && !buttonElement) {
+                setIsFocused(false);
+                // Se não estava manualmente visível, a senha já será escondida
+                // porque isPasswordVisible = isFocused || isManuallyVisible
+            }
+        }, 150);
+        onBlur?.(e);
+    };
+    const toggleVisibility = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsManuallyVisible(!isManuallyVisible);
+        // Manter foco no input se estiver focado
+        if (document.activeElement === inputRef.current || isFocused) {
+            setTimeout(() => {
+                inputRef.current?.focus();
+            }, 0);
+        }
+    };
+    // Separar props do input HTML das props customizadas
+    const baseInputProps = register
+        ? {
+            ...register,
+            id,
+            type: isPasswordVisible ? "text" : "password",
+            autoComplete,
+            placeholder,
+            required,
+            onFocus: handleFocus,
+            onBlur: (e) => {
+                register.onBlur(e);
+                handleBlur(e);
+            },
+            onChange: (e) => {
+                register.onChange(e);
+            },
+            ref: (e) => {
+                inputRef.current = e;
+                if (register?.ref) {
+                    register.ref(e);
+                }
+            },
+        }
+        : {
+            id,
+            name: id,
+            type: isPasswordVisible ? "text" : "password",
+            autoComplete,
+            placeholder,
+            required,
+            value,
+            onChange,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            ref: inputRef,
+        };
+    const inputClassName = cn(inputVariants({ size, variant: error ? "error" : variant }), className, "pr-16");
+    return (_jsxs("div", { className: "space-y-2", children: [label && (_jsx("label", { htmlFor: id, className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: label })), _jsxs("div", { className: "relative", children: [_jsx("input", { ...baseInputProps, className: inputClassName }), _jsx("button", { type: "button", onClick: toggleVisibility, className: "absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center bg-transparent border-0 p-0 cursor-pointer z-10 hover:opacity-70 transition-opacity", "aria-label": isPasswordVisible ? "Ocultar senha" : "Mostrar senha", tabIndex: -1, onMouseDown: (e) => {
+                            // Prevenir que o blur seja acionado antes do clique
+                            e.preventDefault();
+                        }, children: isPasswordVisible ? (_jsx(EyeOff, { className: "w-5 h-5 text-muted-foreground" })) : (_jsx(Eye, { className: "w-5 h-5 text-muted-foreground" })) })] }), error && _jsx("p", { className: "text-sm text-destructive", children: error })] }));
+};

package/dist/components/molecules/auth/social-login-buttons/index.d.ts

@@ -0,0 +1,3 @@
+export type { SocialLoginButtonsProps } from "./social-login-buttons";
+export { SocialLoginButtons } from "./social-login-buttons";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/auth/social-login-buttons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/auth/social-login-buttons/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/molecules/auth/social-login-buttons/index.js

@@ -0,0 +1 @@
+export { SocialLoginButtons } from "./social-login-buttons";

package/dist/components/molecules/auth/social-login-buttons/social-login-buttons.d.ts

@@ -0,0 +1,32 @@
+/**
+ * SocialLoginButtons - Componente Molecule
+ *
+ * Componente reutilizável para botões de login social (Google e Apple)
+ *
+ * Molecule que combina múltiplos átomos (Button) para criar funcionalidade de login social
+ */
+export interface SocialLoginButtonsProps {
+    /**
+     * Callback quando clicar no botão do Google
+     */
+    onGoogleClick?: () => void;
+    /**
+     * Callback quando clicar no botão do Apple
+     */
+    onAppleClick?: () => void;
+    /**
+     * Classe CSS adicional
+     */
+    className?: string;
+    /**
+     * Texto do divisor (padrão: "ou")
+     */
+    dividerText?: string;
+}
+/**
+ * Componente reutilizável para botões de login social (Google e Apple)
+ *
+ * Molecule que combina múltiplos átomos (Button) para criar funcionalidade de login social
+ */
+export declare function SocialLoginButtons({ onGoogleClick, onAppleClick, dividerText, className, }: SocialLoginButtonsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=social-login-buttons.d.ts.map

package/dist/components/molecules/auth/social-login-buttons/social-login-buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"social-login-buttons.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/auth/social-login-buttons/social-login-buttons.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,aAAa,EACb,YAAY,EACZ,WAAkB,EAClB,SAAS,GACV,EAAE,uBAAuB,2CA8DzB"}

package/dist/components/molecules/auth/social-login-buttons/social-login-buttons.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SocialLoginButtons - Componente Molecule
+ *
+ * Componente reutilizável para botões de login social (Google e Apple)
+ *
+ * Molecule que combina múltiplos átomos (Button) para criar funcionalidade de login social
+ */
+import { cn } from "@/lib/utils";
+import { Button } from "../../../atoms";
+/**
+ * Componente reutilizável para botões de login social (Google e Apple)
+ *
+ * Molecule que combina múltiplos átomos (Button) para criar funcionalidade de login social
+ */
+export function SocialLoginButtons({ onGoogleClick, onAppleClick, dividerText = "ou", className, }) {
+    return (_jsxs("div", { className: cn("space-y-4", className), children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx("div", { className: "w-full border-t border-gray-200 dark:border-gray-700" }) }), _jsx("div", { className: "relative flex justify-center text-sm", children: _jsx("span", { className: "px-4 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 font-medium", children: dividerText }) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs(Button, { type: "button", variant: "outline", onClick: onGoogleClick, className: "w-full h-14 border-2 border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 bg-transparent transition-all duration-300 font-medium text-base", "aria-label": "Entrar com Google", children: [_jsxs("svg", { className: "w-5 h-5 mr-3", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { fill: "currentColor", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }), _jsx("path", { fill: "currentColor", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }), _jsx("path", { fill: "currentColor", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }), _jsx("path", { fill: "currentColor", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })] }), "Google"] }), _jsxs(Button, { type: "button", variant: "outline", onClick: onAppleClick, className: "w-full h-14 border-2 border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 bg-transparent transition-all duration-300 font-medium text-base", "aria-label": "Entrar com Apple", children: [_jsx("svg", { className: "w-5 h-5 mr-3", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) }), "Apple"] })] })] }));
+}

package/dist/components/molecules/data-display/artifact/artifact.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Artifact Component - Flowtomic UI
+ *
+ * Componente de artifact container com header e actions
+ */
+import { type LucideIcon } from "lucide-react";
+import type { ComponentProps, HTMLAttributes } from "react";
+import * as React from "react";
+import { Button } from "../../../atoms";
+export type ArtifactProps = HTMLAttributes<HTMLDivElement>;
+export declare const Artifact: React.ForwardRefExoticComponent<ArtifactProps & React.RefAttributes<HTMLDivElement>>;
+export type ArtifactHeaderProps = HTMLAttributes<HTMLDivElement>;
+export declare const ArtifactHeader: React.ForwardRefExoticComponent<ArtifactHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export type ArtifactCloseProps = ComponentProps<typeof Button>;
+export declare const ArtifactClose: React.ForwardRefExoticComponent<Omit<import("../../../atoms").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;
+export declare const ArtifactTitle: React.ForwardRefExoticComponent<ArtifactTitleProps & React.RefAttributes<HTMLParagraphElement>>;
+export type ArtifactDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+export declare const ArtifactDescription: React.ForwardRefExoticComponent<ArtifactDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>;
+export declare const ArtifactActions: React.ForwardRefExoticComponent<ArtifactActionsProps & React.RefAttributes<HTMLDivElement>>;
+export type ArtifactActionProps = ComponentProps<typeof Button> & {
+    tooltip?: string;
+    label?: string;
+    icon?: LucideIcon;
+};
+export declare const ArtifactAction: React.ForwardRefExoticComponent<Omit<ArtifactActionProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type ArtifactContentProps = HTMLAttributes<HTMLDivElement>;
+export declare const ArtifactContent: React.ForwardRefExoticComponent<ArtifactContentProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=artifact.d.ts.map

package/dist/components/molecules/data-display/artifact/artifact.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"artifact.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/artifact/artifact.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,UAAU,EAAS,MAAM,cAAc,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAA4D,MAAM,gBAAgB,CAAC;AAElG,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE3D,eAAO,MAAM,QAAQ,sFAWpB,CAAC;AAGF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjE,eAAO,MAAM,cAAc,4FAQ1B,CAAC;AAGF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAE/D,eAAO,MAAM,aAAa,sKAczB,CAAC;AAGF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AAEtE,eAAO,MAAM,aAAa,iGAIzB,CAAC;AAGF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AAE5E,eAAO,MAAM,mBAAmB,uGAI/B,CAAC;AAGF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,eAAO,MAAM,eAAe,6FAI3B,CAAC;AAGF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc,4GAkC1B,CAAC;AAGF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,eAAO,MAAM,eAAe,6FAI3B,CAAC"}

package/dist/components/molecules/data-display/artifact/artifact.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Artifact Component - Flowtomic UI
+ *
+ * Componente de artifact container com header e actions
+ */
+import { XIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../../atoms";
+export const Artifact = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm", className), ...props })));
+Artifact.displayName = "Artifact";
+export const ArtifactHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center justify-between border-b bg-muted/50 px-4 py-3", className), ...props })));
+ArtifactHeader.displayName = "ArtifactHeader";
+export const ArtifactClose = React.forwardRef(({ className, children, size = "sm", variant = "ghost", ...props }, ref) => (_jsxs(Button, { ref: ref, className: cn("size-8 p-0 text-muted-foreground hover:text-foreground", className), size: size, type: "button", variant: variant, ...props, children: [children ?? _jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })));
+ArtifactClose.displayName = "ArtifactClose";
+export const ArtifactTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("p", { ref: ref, className: cn("font-medium text-foreground text-sm", className), ...props })));
+ArtifactTitle.displayName = "ArtifactTitle";
+export const ArtifactDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("p", { ref: ref, className: cn("text-muted-foreground text-sm", className), ...props })));
+ArtifactDescription.displayName = "ArtifactDescription";
+export const ArtifactActions = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center gap-1", className), ...props })));
+ArtifactActions.displayName = "ArtifactActions";
+export const ArtifactAction = React.forwardRef(({ tooltip, label, icon: Icon, children, className, size = "sm", variant = "ghost", ...props }, ref) => {
+    const button = (_jsxs(Button, { ref: ref, className: cn("size-8 p-0 text-muted-foreground hover:text-foreground", className), size: size, type: "button", variant: variant, ...props, children: [Icon ? _jsx(Icon, { className: "size-4" }) : children, _jsx("span", { className: "sr-only", children: label || tooltip })] }));
+    if (tooltip) {
+        return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { children: _jsx("p", { children: tooltip }) })] }) }));
+    }
+    return button;
+});
+ArtifactAction.displayName = "ArtifactAction";
+export const ArtifactContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex-1 overflow-auto p-4", className), ...props })));
+ArtifactContent.displayName = "ArtifactContent";

package/dist/components/molecules/data-display/artifact/index.d.ts

@@ -0,0 +1,3 @@
+export type { ArtifactActionProps, ArtifactActionsProps, ArtifactCloseProps, ArtifactContentProps, ArtifactDescriptionProps, ArtifactHeaderProps, ArtifactProps, ArtifactTitleProps, } from "./artifact";
+export { Artifact, ArtifactAction, ArtifactActions, ArtifactClose, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle, } from "./artifact";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/data-display/artifact/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/artifact/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,mBAAmB,EACnB,oBAAoB,EACpB,kBAAkB,EAClB,oBAAoB,EACpB,wBAAwB,EACxB,mBAAmB,EACnB,aAAa,EACb,kBAAkB,GACnB,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,QAAQ,EACR,cAAc,EACd,eAAe,EACf,aAAa,EACb,eAAe,EACf,mBAAmB,EACnB,cAAc,EACd,aAAa,GACd,MAAM,YAAY,CAAC"}

package/dist/components/molecules/data-display/artifact/index.js

@@ -0,0 +1 @@
+export { Artifact, ArtifactAction, ArtifactActions, ArtifactClose, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle, } from "./artifact";

package/dist/components/molecules/data-display/bar-chart/bar-chart.d.ts

@@ -0,0 +1,58 @@
+/**
+ * BarChart - Componente Visual
+ *
+ * Gráfico de barras simples para analytics usando SVG puro
+ */
+export interface BarChartDataPoint {
+    /**
+     * Label da barra
+     */
+    label: string;
+    /**
+     * Valor da barra
+     */
+    value: number;
+    /**
+     * Cor da barra (opcional)
+     */
+    color?: string;
+}
+export interface BarChartProps {
+    /**
+     * Dados do gráfico
+     */
+    data: BarChartDataPoint[];
+    /**
+     * Título do gráfico
+     */
+    title?: string;
+    /**
+     * Altura do gráfico em pixels
+     * @default 200
+     */
+    height?: number;
+    /**
+     * Cor padrão das barras
+     * @default "hsl(var(--primary))"
+     */
+    defaultColor?: string;
+    /**
+     * Cor das barras inativas/pendentes
+     * @default "hsl(var(--muted))"
+     */
+    inactiveColor?: string;
+    /**
+     * Se deve mostrar valores nas barras
+     * @default false
+     */
+    showValues?: boolean;
+    /**
+     * Classe CSS adicional
+     */
+    className?: string;
+}
+/**
+ * Componente de gráfico de barras
+ */
+export declare function BarChart({ data, title, height, defaultColor, inactiveColor, showValues, className, }: BarChartProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=bar-chart.d.ts.map

package/dist/components/molecules/data-display/bar-chart/bar-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/bar-chart/bar-chart.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAE1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,MAAY,EACZ,YAAoC,EACpC,aAAmC,EACnC,UAAkB,EAClB,SAAS,GACV,EAAE,aAAa,2CA8Ff"}

package/dist/components/molecules/data-display/bar-chart/bar-chart.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BarChart - Componente Visual
+ *
+ * Gráfico de barras simples para analytics usando SVG puro
+ */
+import { Card, CardContent, CardHeader, CardTitle } from "../../../atoms";
+/**
+ * Componente de gráfico de barras
+ */
+export function BarChart({ data, title, height = 200, defaultColor = "hsl(var(--primary))", inactiveColor = "hsl(var(--muted))", showValues = false, className, }) {
+    if (!data || data.length === 0) {
+        return (_jsxs(Card, { className: className, children: [title && (_jsx(CardHeader, { children: _jsx(CardTitle, { children: title }) })), _jsx(CardContent, { children: _jsx("div", { className: "flex items-center justify-center h-[200px] text-muted-foreground", children: "No data available" }) })] }));
+    }
+    // Calcular valores máximos para normalização
+    const maxValue = Math.max(...data.map((d) => d.value));
+    const chartPadding = 40;
+    const _barWidth = Math.max(20, (height - chartPadding * 2) / data.length - 8);
+    const chartWidth = 300;
+    return (_jsxs(Card, { className: className, children: [title && (_jsx(CardHeader, { children: _jsx(CardTitle, { children: title }) })), _jsx(CardContent, { children: _jsx("div", { className: "w-full", children: _jsxs("svg", { width: "100%", height: height, viewBox: `0 0 ${chartWidth} ${height}`, className: "overflow-visible", role: "img", "aria-label": title || "Bar chart", children: [_jsx("title", { children: title || "Bar chart" }), data.map((point, index) => {
+                                const barHeight = maxValue > 0 ? (point.value / maxValue) * (height - chartPadding * 2) : 0;
+                                const x = (index * chartWidth) / data.length + chartPadding / 2;
+                                const y = height - chartPadding - barHeight;
+                                const isActive = point.value > 0;
+                                const fillColor = point.color || (isActive ? defaultColor : inactiveColor);
+                                return (_jsxs("g", { children: [_jsx("rect", { x: x, y: y, width: (chartWidth - chartPadding) / data.length - 4, height: barHeight, fill: fillColor, rx: 4, className: "transition-all duration-300" }), showValues && point.value > 0 && (_jsxs("text", { x: x + (chartWidth - chartPadding) / data.length / 2 - 4, y: y - 5, fontSize: "10", fill: "currentColor", textAnchor: "middle", className: "fill-foreground", children: [point.value, "%"] })), _jsx("text", { x: x + (chartWidth - chartPadding) / data.length / 2 - 4, y: height - chartPadding + 15, fontSize: "12", fill: "currentColor", textAnchor: "middle", className: "fill-muted-foreground", children: point.label })] }, `bar-${point.label}-${index}`));
+                            })] }) }) })] }));
+}

package/dist/components/molecules/data-display/bar-chart/index.d.ts

@@ -0,0 +1,3 @@
+export type { BarChartDataPoint, BarChartProps } from "./bar-chart";
+export { BarChart } from "./bar-chart";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/data-display/bar-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/bar-chart/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/molecules/data-display/bar-chart/index.js

@@ -0,0 +1 @@
+export { BarChart } from "./bar-chart";

package/dist/components/molecules/data-display/chart-area-interactive/chart-area-interactive.d.ts

@@ -0,0 +1,48 @@
+/**
+ * ChartAreaInteractive Component - Flowtomic UI
+ *
+ * Componente de gráfico de área interativo com filtro de tempo
+ */
+import { type ChartConfig } from "../../../atoms/data-display/chart";
+export type ChartAreaInteractiveDataPoint = {
+    date: string;
+    desktop: number;
+    mobile: number;
+};
+export type ChartAreaInteractiveProps = {
+    /**
+     * Dados do gráfico
+     */
+    data?: ChartAreaInteractiveDataPoint[];
+    /**
+     * Configuração do gráfico
+     */
+    config?: ChartConfig;
+    /**
+     * Título do card
+     */
+    title?: string;
+    /**
+     * Descrição do card
+     */
+    description?: string;
+    /**
+     * Valor inicial do filtro de tempo
+     * @default "90d"
+     */
+    defaultTimeRange?: "7d" | "30d" | "90d";
+    /**
+     * Altura do gráfico
+     * @default "250px"
+     */
+    height?: string;
+    /**
+     * Classe CSS adicional
+     */
+    className?: string;
+};
+export declare function ChartAreaInteractive({ data, config, title, description, defaultTimeRange, height, className, }: ChartAreaInteractiveProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChartAreaInteractive {
+    var displayName: string;
+}
+//# sourceMappingURL=chart-area-interactive.d.ts.map

package/dist/components/molecules/data-display/chart-area-interactive/chart-area-interactive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-area-interactive.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/chart-area-interactive/chart-area-interactive.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EACL,KAAK,WAAW,EAMjB,MAAM,mCAAmC,CAAC;AAgB3C,MAAM,MAAM,6BAA6B,GAAG;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC;;OAEG;IACH,IAAI,CAAC,EAAE,6BAA6B,EAAE,CAAC;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA8GF,wBAAgB,oBAAoB,CAAC,EACnC,IAAuB,EACvB,MAA2B,EAC3B,KAAkC,EAClC,WAA4D,EAC5D,gBAAwB,EACxB,MAAgB,EAChB,SAAS,GACV,EAAE,yBAAyB,2CAoH3B;yBA5He,oBAAoB"}

package/dist/components/molecules/data-display/chart-area-interactive/chart-area-interactive.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ChartAreaInteractive Component - Flowtomic UI
+ *
+ * Componente de gráfico de área interativo com filtro de tempo
+ */
+import * as React from "react";
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "../../../atoms/data-display/chart";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "../../../atoms/display/card";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../../atoms/forms/select";
+const defaultChartData = [
+    { date: "2024-04-01", desktop: 222, mobile: 150 },
+    { date: "2024-04-02", desktop: 97, mobile: 180 },
+    { date: "2024-04-03", desktop: 167, mobile: 120 },
+    { date: "2024-04-04", desktop: 242, mobile: 260 },
+    { date: "2024-04-05", desktop: 373, mobile: 290 },
+    { date: "2024-04-06", desktop: 301, mobile: 340 },
+    { date: "2024-04-07", desktop: 245, mobile: 180 },
+    { date: "2024-04-08", desktop: 409, mobile: 320 },
+    { date: "2024-04-09", desktop: 59, mobile: 110 },
+    { date: "2024-04-10", desktop: 261, mobile: 190 },
+    { date: "2024-04-11", desktop: 327, mobile: 350 },
+    { date: "2024-04-12", desktop: 292, mobile: 210 },
+    { date: "2024-04-13", desktop: 342, mobile: 380 },
+    { date: "2024-04-14", desktop: 137, mobile: 220 },
+    { date: "2024-04-15", desktop: 120, mobile: 170 },
+    { date: "2024-04-16", desktop: 138, mobile: 190 },
+    { date: "2024-04-17", desktop: 446, mobile: 360 },
+    { date: "2024-04-18", desktop: 364, mobile: 410 },
+    { date: "2024-04-19", desktop: 243, mobile: 180 },
+    { date: "2024-04-20", desktop: 89, mobile: 150 },
+    { date: "2024-04-21", desktop: 137, mobile: 200 },
+    { date: "2024-04-22", desktop: 224, mobile: 170 },
+    { date: "2024-04-23", desktop: 138, mobile: 230 },
+    { date: "2024-04-24", desktop: 387, mobile: 290 },
+    { date: "2024-04-25", desktop: 215, mobile: 250 },
+    { date: "2024-04-26", desktop: 75, mobile: 130 },
+    { date: "2024-04-27", desktop: 383, mobile: 420 },
+    { date: "2024-04-28", desktop: 122, mobile: 180 },
+    { date: "2024-04-29", desktop: 315, mobile: 240 },
+    { date: "2024-04-30", desktop: 454, mobile: 380 },
+    { date: "2024-05-01", desktop: 165, mobile: 220 },
+    { date: "2024-05-02", desktop: 293, mobile: 310 },
+    { date: "2024-05-03", desktop: 247, mobile: 190 },
+    { date: "2024-05-04", desktop: 385, mobile: 420 },
+    { date: "2024-05-05", desktop: 481, mobile: 390 },
+    { date: "2024-05-06", desktop: 498, mobile: 520 },
+    { date: "2024-05-07", desktop: 388, mobile: 300 },
+    { date: "2024-05-08", desktop: 149, mobile: 210 },
+    { date: "2024-05-09", desktop: 227, mobile: 180 },
+    { date: "2024-05-10", desktop: 293, mobile: 330 },
+    { date: "2024-05-11", desktop: 335, mobile: 270 },
+    { date: "2024-05-12", desktop: 197, mobile: 240 },
+    { date: "2024-05-13", desktop: 197, mobile: 160 },
+    { date: "2024-05-14", desktop: 448, mobile: 490 },
+    { date: "2024-05-15", desktop: 473, mobile: 380 },
+    { date: "2024-05-16", desktop: 338, mobile: 400 },
+    { date: "2024-05-17", desktop: 499, mobile: 420 },
+    { date: "2024-05-18", desktop: 315, mobile: 350 },
+    { date: "2024-05-19", desktop: 235, mobile: 180 },
+    { date: "2024-05-20", desktop: 177, mobile: 230 },
+    { date: "2024-05-21", desktop: 82, mobile: 140 },
+    { date: "2024-05-22", desktop: 81, mobile: 120 },
+    { date: "2024-05-23", desktop: 252, mobile: 290 },
+    { date: "2024-05-24", desktop: 294, mobile: 220 },
+    { date: "2024-05-25", desktop: 201, mobile: 250 },
+    { date: "2024-05-26", desktop: 213, mobile: 170 },
+    { date: "2024-05-27", desktop: 420, mobile: 460 },
+    { date: "2024-05-28", desktop: 233, mobile: 190 },
+    { date: "2024-05-29", desktop: 78, mobile: 130 },
+    { date: "2024-05-30", desktop: 340, mobile: 280 },
+    { date: "2024-05-31", desktop: 178, mobile: 230 },
+    { date: "2024-06-01", desktop: 178, mobile: 200 },
+    { date: "2024-06-02", desktop: 470, mobile: 410 },
+    { date: "2024-06-03", desktop: 103, mobile: 160 },
+    { date: "2024-06-04", desktop: 439, mobile: 380 },
+    { date: "2024-06-05", desktop: 88, mobile: 140 },
+    { date: "2024-06-06", desktop: 294, mobile: 250 },
+    { date: "2024-06-07", desktop: 323, mobile: 370 },
+    { date: "2024-06-08", desktop: 385, mobile: 320 },
+    { date: "2024-06-09", desktop: 438, mobile: 480 },
+    { date: "2024-06-10", desktop: 155, mobile: 200 },
+    { date: "2024-06-11", desktop: 92, mobile: 150 },
+    { date: "2024-06-12", desktop: 492, mobile: 420 },
+    { date: "2024-06-13", desktop: 81, mobile: 130 },
+    { date: "2024-06-14", desktop: 426, mobile: 380 },
+    { date: "2024-06-15", desktop: 307, mobile: 350 },
+    { date: "2024-06-16", desktop: 371, mobile: 310 },
+    { date: "2024-06-17", desktop: 475, mobile: 520 },
+    { date: "2024-06-18", desktop: 107, mobile: 170 },
+    { date: "2024-06-19", desktop: 341, mobile: 290 },
+    { date: "2024-06-20", desktop: 408, mobile: 450 },
+    { date: "2024-06-21", desktop: 169, mobile: 210 },
+    { date: "2024-06-22", desktop: 317, mobile: 270 },
+    { date: "2024-06-23", desktop: 480, mobile: 530 },
+    { date: "2024-06-24", desktop: 132, mobile: 180 },
+    { date: "2024-06-25", desktop: 141, mobile: 190 },
+    { date: "2024-06-26", desktop: 434, mobile: 380 },
+    { date: "2024-06-27", desktop: 448, mobile: 490 },
+    { date: "2024-06-28", desktop: 149, mobile: 200 },
+    { date: "2024-06-29", desktop: 103, mobile: 160 },
+    { date: "2024-06-30", desktop: 446, mobile: 400 },
+];
+const defaultChartConfig = {
+    visitors: {
+        label: "Visitors",
+    },
+    desktop: {
+        label: "Desktop",
+        color: "var(--chart-1)",
+    },
+    mobile: {
+        label: "Mobile",
+        color: "var(--chart-2)",
+    },
+};
+export function ChartAreaInteractive({ data = defaultChartData, config = defaultChartConfig, title = "Area Chart - Interactive", description = "Showing total visitors for the last 3 months", defaultTimeRange = "90d", height = "250px", className, }) {
+    const [timeRange, setTimeRange] = React.useState(defaultTimeRange);
+    const filteredData = React.useMemo(() => {
+        if (!data.length)
+            return [];
+        const referenceDate = new Date(data[data.length - 1]?.date || new Date().toISOString());
+        let daysToSubtract = 90;
+        if (timeRange === "30d") {
+            daysToSubtract = 30;
+        }
+        else if (timeRange === "7d") {
+            daysToSubtract = 7;
+        }
+        const startDate = new Date(referenceDate);
+        startDate.setDate(startDate.getDate() - daysToSubtract);
+        return data.filter((item) => {
+            const date = new Date(item.date);
+            return date >= startDate;
+        });
+    }, [data, timeRange]);
+    return (_jsxs(Card, { className: className, children: [_jsxs(CardHeader, { className: "flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row", children: [_jsxs("div", { className: "grid flex-1 gap-1", children: [_jsx(CardTitle, { children: title }), _jsx(CardDescription, { children: description })] }), _jsxs(Select, { value: timeRange, onValueChange: (value) => setTimeRange(value), children: [_jsx(SelectTrigger, { className: "hidden w-[160px] rounded-lg sm:ml-auto sm:flex", "aria-label": "Select time range", children: _jsx(SelectValue, { placeholder: "Last 3 months" }) }), _jsxs(SelectContent, { className: "rounded-xl", children: [_jsx(SelectItem, { value: "90d", className: "rounded-lg", children: "Last 3 months" }), _jsx(SelectItem, { value: "30d", className: "rounded-lg", children: "Last 30 days" }), _jsx(SelectItem, { value: "7d", className: "rounded-lg", children: "Last 7 days" })] })] })] }), _jsx(CardContent, { className: "px-2 pt-4 sm:px-6 sm:pt-6", children: _jsx(ChartContainer, { config: config, className: "aspect-auto w-full", style: { height }, children: _jsxs(AreaChart, { data: filteredData, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: "fillDesktop", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: "var(--color-desktop)", stopOpacity: 0.8 }), _jsx("stop", { offset: "95%", stopColor: "var(--color-desktop)", stopOpacity: 0.1 })] }), _jsxs("linearGradient", { id: "fillMobile", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: "var(--color-mobile)", stopOpacity: 0.8 }), _jsx("stop", { offset: "95%", stopColor: "var(--color-mobile)", stopOpacity: 0.1 })] })] }), _jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "date", tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 32, tickFormatter: (value) => {
+                                    const date = new Date(value);
+                                    return date.toLocaleDateString("en-US", {
+                                        month: "short",
+                                        day: "numeric",
+                                    });
+                                } }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { labelFormatter: (value) => {
+                                        return new Date(value).toLocaleDateString("en-US", {
+                                            month: "short",
+                                            day: "numeric",
+                                        });
+                                    }, indicator: "dot" }) }), _jsx(Area, { dataKey: "mobile", type: "natural", fill: "url(#fillMobile)", stroke: "var(--color-mobile)", stackId: "a" }), _jsx(Area, { dataKey: "desktop", type: "natural", fill: "url(#fillDesktop)", stroke: "var(--color-desktop)", stackId: "a" }), _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) })] }) }) })] }));
+}
+ChartAreaInteractive.displayName = "ChartAreaInteractive";

package/dist/components/molecules/data-display/chart-area-interactive/index.d.ts

@@ -0,0 +1,3 @@
+export type { ChartAreaInteractiveDataPoint, ChartAreaInteractiveProps, } from "./chart-area-interactive";
+export { ChartAreaInteractive } from "./chart-area-interactive";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/data-display/chart-area-interactive/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/chart-area-interactive/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,6BAA6B,EAC7B,yBAAyB,GAC1B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/components/molecules/data-display/chart-area-interactive/index.js

@@ -0,0 +1 @@
+export { ChartAreaInteractive } from "./chart-area-interactive";

package/dist/components/molecules/data-display/chart-bar-interactive/chart-bar-interactive.d.ts

@@ -0,0 +1,48 @@
+/**
+ * ChartBarInteractive Component - Flowtomic UI
+ *
+ * Componente de gráfico de barras interativo com alternância entre desktop e mobile
+ */
+import { type ChartConfig } from "../../../atoms/data-display/chart";
+export type ChartBarInteractiveDataPoint = {
+    date: string;
+    desktop: number;
+    mobile: number;
+};
+export type ChartBarInteractiveProps = {
+    /**
+     * Dados do gráfico
+     */
+    data?: ChartBarInteractiveDataPoint[];
+    /**
+     * Configuração do gráfico
+     */
+    config?: ChartConfig;
+    /**
+     * Título do card
+     */
+    title?: string;
+    /**
+     * Descrição do card
+     */
+    description?: string;
+    /**
+     * Gráfico ativo inicial
+     * @default "desktop"
+     */
+    defaultActiveChart?: "desktop" | "mobile";
+    /**
+     * Altura do gráfico
+     * @default "250px"
+     */
+    height?: string;
+    /**
+     * Classe CSS adicional
+     */
+    className?: string;
+};
+export declare function ChartBarInteractive({ data, config, title, description, defaultActiveChart, height, className, }: ChartBarInteractiveProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChartBarInteractive {
+    var displayName: string;
+}
+//# sourceMappingURL=chart-bar-interactive.d.ts.map

package/dist/components/molecules/data-display/chart-bar-interactive/chart-bar-interactive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-bar-interactive.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/chart-bar-interactive/chart-bar-interactive.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EACL,KAAK,WAAW,EAIjB,MAAM,mCAAmC,CAAC;AAS3C,MAAM,MAAM,4BAA4B,GAAG;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,IAAI,CAAC,EAAE,4BAA4B,EAAE,CAAC;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC1C;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA8GF,wBAAgB,mBAAmB,CAAC,EAClC,IAAuB,EACvB,MAA2B,EAC3B,KAAiC,EACjC,WAA4D,EAC5D,kBAA8B,EAC9B,MAAgB,EAChB,SAAS,GACV,EAAE,wBAAwB,2CA0F1B;yBAlGe,mBAAmB"}