@flowtomic/ui 0.1.0 → 0.1.2

package/dist/components/molecules/navigation/sidebar-navigation/sidebar-navigation.d.ts

@@ -0,0 +1,56 @@
+/**
+ * SidebarNavigation - Componente Visual
+ *
+ * Menu lateral completo com logo, seções de navegação e card de download mobile
+ */
+import type React from "react";
+export interface NavigationItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    href?: string;
+    onClick?: () => void;
+    active?: boolean;
+}
+export interface MobileAppCard {
+    title: string;
+    description?: string;
+    buttonText?: string;
+    onDownload?: () => void;
+}
+export interface SidebarNavigationProps {
+    /**
+     * Logo do aplicativo
+     */
+    logo?: React.ReactNode;
+    /**
+     * Título do aplicativo
+     * @default "Flowtomic"
+     */
+    appName?: string;
+    /**
+     * Itens do menu principal
+     */
+    menuItems?: NavigationItem[];
+    /**
+     * Itens do menu geral (Settings, Help, Logout)
+     */
+    generalItems?: NavigationItem[];
+    /**
+     * Card de download mobile
+     */
+    mobileAppCard?: MobileAppCard;
+    /**
+     * Callback quando um item é clicado
+     */
+    onNavigate?: (item: NavigationItem) => void;
+    /**
+     * Classe CSS adicional
+     */
+    className?: string;
+}
+/**
+ * Componente de navegação lateral
+ */
+export declare function SidebarNavigation({ logo, appName, menuItems, generalItems, mobileAppCard, onNavigate, className, }: SidebarNavigationProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sidebar-navigation.d.ts.map

package/dist/components/molecules/navigation/sidebar-navigation/sidebar-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-navigation.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/navigation/sidebar-navigation/sidebar-navigation.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAE7B;;OAEG;IACH,YAAY,CAAC,EAAE,cAAc,EAAE,CAAC;IAEhC;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAE5C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAqB,EACrB,SAAc,EACd,YAAiB,EACjB,aAAa,EACb,UAAU,EACV,SAAS,GACV,EAAE,sBAAsB,2CAqIxB"}

package/dist/components/molecules/navigation/sidebar-navigation/sidebar-navigation.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * SidebarNavigation - Componente Visual
+ *
+ * Menu lateral completo com logo, seções de navegação e card de download mobile
+ */
+import { CheckCircle2, Download, LogOut, Settings } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button, Card, CardContent, Separator } from "../../../atoms";
+import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "../../../atoms/layout";
+/**
+ * Componente de navegação lateral
+ */
+export function SidebarNavigation({ logo, appName = "Flowtomic", menuItems = [], generalItems = [], mobileAppCard, onNavigate, className, }) {
+    const defaultMenuItems = menuItems.length > 0
+        ? menuItems
+        : [
+            { id: "dashboard", label: "Dashboard", active: true },
+            { id: "tasks", label: "Tasks" },
+            { id: "calendar", label: "Calendar" },
+            { id: "analytics", label: "Analytics" },
+            { id: "team", label: "Team" },
+        ];
+    const defaultGeneralItems = generalItems.length > 0
+        ? generalItems
+        : [
+            { id: "settings", label: "Settings", icon: _jsx(Settings, { className: "h-4 w-4" }) },
+            { id: "help", label: "Help" },
+            { id: "logout", label: "Logout", icon: _jsx(LogOut, { className: "h-4 w-4" }) },
+        ];
+    const handleItemClick = (item) => {
+        onNavigate?.(item);
+        item.onClick?.();
+    };
+    return (_jsx(Sidebar, { className: cn("border-r", className), children: _jsxs(SidebarContent, { children: [_jsx("div", { className: "flex items-center gap-2 px-4 py-6", children: logo || (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-6 w-6 text-primary" }), _jsx("span", { className: "font-bold text-lg", children: appName })] })) }), _jsx(Separator, {}), _jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "MENU" }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: defaultMenuItems.map((item) => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { onClick: () => handleItemClick(item), isActive: item.active, asChild: !!item.href, children: item.href ? (_jsxs("a", { href: item.href, children: [item.icon, _jsx("span", { children: item.label })] })) : (_jsxs(_Fragment, { children: [item.icon, _jsx("span", { children: item.label })] })) }) }, item.id))) }) })] }), _jsx(Separator, {}), _jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "GENERAL" }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: defaultGeneralItems.map((item) => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { onClick: () => handleItemClick(item), isActive: item.active, asChild: !!item.href, children: item.href ? (_jsxs("a", { href: item.href, children: [item.icon, _jsx("span", { children: item.label })] })) : (_jsxs(_Fragment, { children: [item.icon, _jsx("span", { children: item.label })] })) }) }, item.id))) }) })] }), mobileAppCard && (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "mt-auto" }), _jsx("div", { className: "p-4", children: _jsx(Card, { className: "bg-primary text-primary-foreground", children: _jsx(CardContent, { className: "p-4", children: _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "font-semibold text-sm", children: mobileAppCard.title }), mobileAppCard.description && (_jsx("div", { className: "text-xs opacity-90", children: mobileAppCard.description })), _jsxs(Button, { variant: "secondary", size: "sm", className: "w-full mt-3", onClick: mobileAppCard.onDownload, children: [_jsx(Download, { className: "h-4 w-4 mr-2" }), mobileAppCard.buttonText || "Download our Mobile App"] })] }) }) }) })] }))] }) }));
+}

package/dist/components/molecules/theme/theme-toggle-button/index.d.ts

@@ -0,0 +1,3 @@
+export type { StartPosition, ThemeToggleButtonProps } from "./theme-toggle-button";
+export { ThemeToggleButton } from "./theme-toggle-button";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/theme/theme-toggle-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/theme/theme-toggle-button/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/molecules/theme/theme-toggle-button/index.js

@@ -0,0 +1 @@
+export { ThemeToggleButton } from "./theme-toggle-button";

package/dist/components/molecules/theme/theme-toggle-button/theme-toggle-button.d.ts

@@ -0,0 +1,58 @@
+/**
+ * ThemeToggleButton - Componente de Toggle de Tema com Animação Circle Blur
+ *
+ * Componente consolidado para alternância de tema com animação suave
+ * usando View Transitions API e variante circle-blur (soft-edge circle)
+ *
+ * NOTA: Este componente requer que o projeto forneça um hook useThemeToggle
+ * ou props para controlar o tema. Por padrão, aceita props diretas.
+ */
+export type StartPosition = "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+export interface ThemeToggleButtonProps {
+    /**
+     * Tamanho do botão
+     * @default 'icon'
+     */
+    size?: "sm" | "md" | "lg" | "icon";
+    /**
+     * Posição inicial da animação circle-blur
+     * @default 'top-right'
+     */
+    start?: StartPosition;
+    /**
+     * Classes CSS adicionais
+     */
+    className?: string;
+    /**
+     * Desabilitar o botão
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Tema atual ('light' | 'dark')
+     * Se não fornecido, tenta detectar do sistema
+     */
+    theme?: "light" | "dark";
+    /**
+     * Callback quando o tema é alternado
+     */
+    onThemeChange?: (theme: "light" | "dark") => void;
+}
+/**
+ * Componente de toggle de tema com animação circle-blur
+ *
+ * Usa View Transitions API para transições suaves entre temas
+ * com animação de círculo expandindo com blur (soft-edge)
+ *
+ * @example
+ * ```tsx
+ * <ThemeToggleButton
+ *   size="icon"
+ *   start="top-right"
+ *   theme={currentTheme}
+ *   onThemeChange={setTheme}
+ * />
+ * ```
+ */
+export declare function ThemeToggleButton({ size, start, className, disabled, theme: controlledTheme, onThemeChange, }: ThemeToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=theme-toggle-button.d.ts.map

package/dist/components/molecules/theme/theme-toggle-button/theme-toggle-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle-button.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/theme/theme-toggle-button/theme-toggle-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAOH,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AAEjG,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAEnC;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;CACnD;AAgBD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAa,EACb,KAAmB,EACnB,SAAS,EACT,QAAgB,EAChB,KAAK,EAAE,eAAe,EACtB,aAAa,GACd,EAAE,sBAAsB,2CAgMxB"}

package/dist/components/molecules/theme/theme-toggle-button/theme-toggle-button.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ThemeToggleButton - Componente de Toggle de Tema com Animação Circle Blur
+ *
+ * Componente consolidado para alternância de tema com animação suave
+ * usando View Transitions API e variante circle-blur (soft-edge circle)
+ *
+ * NOTA: Este componente requer que o projeto forneça um hook useThemeToggle
+ * ou props para controlar o tema. Por padrão, aceita props diretas.
+ */
+import { Moon, Sun } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { cn } from "../../../../lib/utils";
+import { Button } from "../../../atoms";
+const buttonSizeMap = {
+    sm: "icon-sm",
+    md: "icon-lg",
+    lg: "icon-lg",
+    icon: "icon-lg",
+};
+const iconSizes = {
+    sm: 16,
+    md: 24,
+    lg: 24,
+    icon: 24,
+};
+/**
+ * Componente de toggle de tema com animação circle-blur
+ *
+ * Usa View Transitions API para transições suaves entre temas
+ * com animação de círculo expandindo com blur (soft-edge)
+ *
+ * @example
+ * ```tsx
+ * <ThemeToggleButton
+ *   size="icon"
+ *   start="top-right"
+ *   theme={currentTheme}
+ *   onThemeChange={setTheme}
+ * />
+ * ```
+ */
+export function ThemeToggleButton({ size = "icon", start = "top-right", className, disabled = false, theme: controlledTheme, onThemeChange, }) {
+    const [mounted, setMounted] = useState(false);
+    const [isToggling, setIsToggling] = useState(false);
+    const [internalTheme, setInternalTheme] = useState("light");
+    // Detectar tema do sistema se não fornecido
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+            setInternalTheme(prefersDark ? "dark" : "light");
+        }
+        setMounted(true);
+    }, []);
+    const theme = controlledTheme ?? internalTheme;
+    const isDark = theme === "dark";
+    const toggleTheme = useCallback(() => {
+        const newTheme = isDark ? "light" : "dark";
+        if (onThemeChange) {
+            onThemeChange(newTheme);
+        }
+        else {
+            setInternalTheme(newTheme);
+        }
+    }, [isDark, onThemeChange]);
+    const handleToggle = useCallback(() => {
+        if (disabled)
+            return;
+        setIsToggling(true);
+        // Verifica se estamos em ambiente de browser
+        if (typeof window === "undefined" || typeof document === "undefined") {
+            setIsToggling(false);
+            return;
+        }
+        const root = document.documentElement;
+        if ("startViewTransition" in document) {
+            // Injeta estilos de animação circle-blur para esta transição específica
+            const styleId = `theme-transition-${Date.now()}`;
+            const style = document.createElement("style");
+            style.id = styleId;
+            // Posições para a animação
+            const positions = {
+                center: "center",
+                "top-left": "top left",
+                "top-right": "top right",
+                "bottom-left": "bottom left",
+                "bottom-right": "bottom right",
+            };
+            // Calcula posição do círculo baseado no start
+            const cx = start === "center" ? "50" : start.includes("left") ? "0" : "100";
+            const cy = start === "center" ? "50" : start.includes("top") ? "0" : "100";
+            // CSS para animação circle-blur
+            const css = `
+        @supports (view-transition-name: root) {
+          ::view-transition-old(root) {
+            animation: none;
+          }
+          ::view-transition-new(root) {
+            animation: circle-blur-expand 0.5s ease-out;
+            transform-origin: ${positions[start]};
+            filter: blur(0);
+          }
+          @keyframes circle-blur-expand {
+            from {
+              clip-path: circle(0% at ${cx}% ${cy}%);
+              filter: blur(4px);
+            }
+            to {
+              clip-path: circle(150% at ${cx}% ${cy}%);
+              filter: blur(0);
+            }
+          }
+        }
+      `;
+            style.textContent = css;
+            document.head.appendChild(style);
+            // Usa View Transitions API se disponível
+            const docWithTransition = document;
+            const transition = docWithTransition.startViewTransition?.(() => {
+                toggleTheme();
+            });
+            // Aguarda a conclusão da transição antes de reabilitar o botão
+            if (transition) {
+                transition.finished.finally(() => {
+                    setIsToggling(false);
+                    // Remove os estilos após a transição
+                    setTimeout(() => {
+                        const styleEl = document.getElementById(styleId);
+                        if (styleEl) {
+                            styleEl.remove();
+                        }
+                    }, 100);
+                });
+            }
+            else {
+                setTimeout(() => {
+                    setIsToggling(false);
+                    const styleEl = document.getElementById(styleId);
+                    if (styleEl) {
+                        styleEl.remove();
+                    }
+                }, 500);
+            }
+        }
+        else {
+            // Fallback: animação CSS customizada
+            const styleId = `theme-toggle-style-${Date.now()}`;
+            const style = document.createElement("style");
+            style.id = styleId;
+            style.textContent = `
+        @keyframes theme-toggle-expand {
+          from {
+            clip-path: circle(0% at 50% 50%);
+          }
+          to {
+            clip-path: circle(150% at 50% 50%);
+          }
+        }
+        
+        html.theme-transitioning * {
+          animation: theme-toggle-expand 500ms ease-in-out;
+        }
+      `;
+            document.head.appendChild(style);
+            root.classList.add("theme-transitioning");
+            toggleTheme();
+            setTimeout(() => {
+                root.classList.remove("theme-transitioning");
+                const styleEl = document.getElementById(styleId);
+                if (styleEl) {
+                    styleEl.remove();
+                }
+                setIsToggling(false);
+            }, 500);
+        }
+    }, [disabled, start, toggleTheme]);
+    if (!mounted) {
+        return _jsx("div", { className: cn("h-9 w-9 rounded-lg", className) });
+    }
+    const buttonSize = buttonSizeMap[size];
+    const iconSize = iconSizes[size];
+    return (_jsx(Button, { variant: "outline", size: buttonSize, onClick: handleToggle, disabled: disabled || isToggling, className: cn("relative overflow-hidden", isToggling && "scale-95", className), "aria-label": `Alternar para tema ${isDark ? "claro" : "escuro"}`, "aria-pressed": isDark, children: _jsxs("div", { className: "relative w-full h-full flex items-center justify-center", children: [_jsx(Sun, { className: cn("absolute transition-all duration-300 ease-in-out", isDark ? "rotate-90 scale-0 opacity-0" : "rotate-0 scale-100 opacity-100"), size: iconSize }), _jsx(Moon, { className: cn("absolute transition-all duration-300 ease-in-out", isDark ? "rotate-0 scale-100 opacity-100" : "-rotate-90 scale-0 opacity-0"), size: iconSize })] }) }));
+}

package/dist/components/molecules/typography/animated-shiny-text/animated-shiny-text.d.ts

@@ -0,0 +1,25 @@
+/**
+ * AnimatedShinyText - Componente Molecule
+ *
+ * Componente de texto com efeito shimmer animado.
+ * Implementação especializada que usa o componente atômico Shimmer.
+ */
+import type { ComponentPropsWithoutRef, FC } from "react";
+export interface AnimatedShinyTextProps extends ComponentPropsWithoutRef<"span"> {
+    /**
+     * Largura do efeito shimmer em pixels
+     * @default 100
+     */
+    shimmerWidth?: number;
+    /**
+     * Duração da animação em segundos
+     * @default 2
+     */
+    duration?: number;
+}
+/**
+ * Componente de texto com efeito shimmer animado.
+ * Usa o componente atômico Shimmer internamente para maior flexibilidade.
+ */
+export declare const AnimatedShinyText: FC<AnimatedShinyTextProps>;
+//# sourceMappingURL=animated-shiny-text.d.ts.map

package/dist/components/molecules/typography/animated-shiny-text/animated-shiny-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-shiny-text.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/typography/animated-shiny-text/animated-shiny-text.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,wBAAwB,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI1D,MAAM,WAAW,sBAAuB,SAAQ,wBAAwB,CAAC,MAAM,CAAC;IAC9E;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA0CxD,CAAC"}

package/dist/components/molecules/typography/animated-shiny-text/animated-shiny-text.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@/lib/utils";
+import { Shimmer } from "../../../atoms/animation/shimmer";
+/**
+ * Componente de texto com efeito shimmer animado.
+ * Usa o componente atômico Shimmer internamente para maior flexibilidade.
+ */
+export const AnimatedShinyText = ({ children, className, shimmerWidth = 100, duration = 2, ...props }) => {
+    // Converte children para string para usar com Shimmer
+    const textContent = typeof children === "string"
+        ? children
+        : typeof children === "number"
+            ? String(children)
+            : null;
+    // Se não for string/number, renderiza sem shimmer (compatibilidade)
+    if (textContent === null) {
+        return (_jsx("span", { className: cn("relative inline-block", className), ...props, children: children }));
+    }
+    // Calcula spread baseado na largura do shimmer
+    // O Shimmer multiplica spread pelo comprimento do texto para calcular a largura do gradiente
+    // Para aproximar o comportamento do shimmerWidth original, usamos uma fórmula que
+    // considera o comprimento do texto e a largura desejada
+    const spread = textContent.length > 0 ? Math.max(0.5, shimmerWidth / (textContent.length * 10)) : 2;
+    return (_jsx(Shimmer, { as: "span", duration: duration, spread: spread, className: cn(className), ...props, children: textContent }));
+};

package/dist/components/molecules/typography/animated-shiny-text/index.d.ts

@@ -0,0 +1,3 @@
+export type { AnimatedShinyTextProps } from "./animated-shiny-text";
+export { AnimatedShinyText } from "./animated-shiny-text";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/typography/animated-shiny-text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/typography/animated-shiny-text/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/molecules/typography/animated-shiny-text/index.js

@@ -0,0 +1 @@
+export { AnimatedShinyText } from "./animated-shiny-text";

package/dist/components/molecules/typography/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Typography Molecules - Componentes de Tipografia Compostos
+ * Atomic Design: Componentes compostos de tipografia
+ */
+export type { AnimatedShinyTextProps } from "./animated-shiny-text";
+export { AnimatedShinyText } from "./animated-shiny-text";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/typography/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/typography/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,YAAY,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/molecules/typography/index.js

@@ -0,0 +1,5 @@
+/**
+ * Typography Molecules - Componentes de Tipografia Compostos
+ * Atomic Design: Componentes compostos de tipografia
+ */
+export { AnimatedShinyText } from "./animated-shiny-text";

package/dist/components/organisms/chain-of-thought/chain-of-thought.d.ts

@@ -0,0 +1,34 @@
+/**
+ * ChainOfThought Component - Flowtomic UI
+ *
+ * Componente para exibir cadeia de raciocínio
+ */
+import { type LucideIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { Badge, CollapsibleContent, CollapsibleTrigger } from "../../atoms";
+export type ChainOfThoughtProps = ComponentProps<"div"> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+export declare const ChainOfThought: import("react").MemoExoticComponent<({ className, open, defaultOpen, onOpenChange, children, ...props }: ChainOfThoughtProps) => import("react/jsx-runtime").JSX.Element>;
+export type ChainOfThoughtHeaderProps = ComponentProps<typeof CollapsibleTrigger>;
+export declare const ChainOfThoughtHeader: import("react").MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtHeaderProps) => import("react/jsx-runtime").JSX.Element>;
+export type ChainOfThoughtStepProps = ComponentProps<"div"> & {
+    icon?: LucideIcon;
+    label: ReactNode;
+    description?: ReactNode;
+    status?: "complete" | "active" | "pending";
+};
+export declare const ChainOfThoughtStep: import("react").MemoExoticComponent<({ className, icon: Icon, label, description, status, children, ...props }: ChainOfThoughtStepProps) => import("react/jsx-runtime").JSX.Element>;
+export type ChainOfThoughtSearchResultsProps = ComponentProps<"div">;
+export declare const ChainOfThoughtSearchResults: import("react").MemoExoticComponent<({ className, ...props }: ChainOfThoughtSearchResultsProps) => import("react/jsx-runtime").JSX.Element>;
+export type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>;
+export declare const ChainOfThoughtSearchResult: import("react").MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtSearchResultProps) => import("react/jsx-runtime").JSX.Element>;
+export type ChainOfThoughtContentProps = ComponentProps<typeof CollapsibleContent>;
+export declare const ChainOfThoughtContent: import("react").MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtContentProps) => import("react/jsx-runtime").JSX.Element>;
+export type ChainOfThoughtImageProps = ComponentProps<"div"> & {
+    caption?: string;
+};
+export declare const ChainOfThoughtImage: import("react").MemoExoticComponent<({ className, children, caption, ...props }: ChainOfThoughtImageProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=chain-of-thought.d.ts.map

package/dist/components/organisms/chain-of-thought/chain-of-thought.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chain-of-thought.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/chain-of-thought/chain-of-thought.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAuC,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AACpF,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,KAAK,EAAe,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAiBzF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,cAAc,2GAQtB,mBAAmB,6CAiBvB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAElF,eAAO,MAAM,oBAAoB,0EACK,yBAAyB,6CAqB9D,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC5D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,kBAAkB,kHAS1B,uBAAuB,6CA6B3B,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAErE,eAAO,MAAM,2BAA2B,gEACZ,gCAAgC,6CAG3D,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC;AAE3E,eAAO,MAAM,0BAA0B,0EACD,+BAA+B,6CASpE,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAEnF,eAAO,MAAM,qBAAqB,0EACI,0BAA0B,6CAkB/D,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,mBAAmB,mFACe,wBAAwB,6CAQtE,CAAC"}

package/dist/components/organisms/chain-of-thought/chain-of-thought.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ChainOfThought Component - Flowtomic UI
+ *
+ * Componente para exibir cadeia de raciocínio
+ */
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { BrainIcon, ChevronDownIcon, DotIcon } from "lucide-react";
+import { createContext, memo, useContext, useMemo } from "react";
+import { cn } from "@/lib/utils";
+import { Badge, Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../atoms";
+const ChainOfThoughtContext = createContext(null);
+const useChainOfThought = () => {
+    const context = useContext(ChainOfThoughtContext);
+    if (!context) {
+        throw new Error("ChainOfThought components must be used within ChainOfThought");
+    }
+    return context;
+};
+export const ChainOfThought = memo(({ className, open, defaultOpen = false, onOpenChange, children, ...props }) => {
+    const [isOpen, setIsOpen] = useControllableState({
+        prop: open,
+        defaultProp: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const chainOfThoughtContext = useMemo(() => ({ isOpen, setIsOpen }), [isOpen, setIsOpen]);
+    return (_jsx(ChainOfThoughtContext.Provider, { value: chainOfThoughtContext, children: _jsx("div", { className: cn("not-prose max-w-prose space-y-4", className), ...props, children: children }) }));
+});
+export const ChainOfThoughtHeader = memo(({ className, children, ...props }) => {
+    const { isOpen, setIsOpen } = useChainOfThought();
+    return (_jsx(Collapsible, { onOpenChange: setIsOpen, open: isOpen, children: _jsxs(CollapsibleTrigger, { className: cn("flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground", className), ...props, children: [_jsx(BrainIcon, { className: "size-4" }), _jsx("span", { className: "flex-1 text-left", children: children ?? "Chain of Thought" }), _jsx(ChevronDownIcon, { className: cn("size-4 transition-transform", isOpen ? "rotate-180" : "rotate-0") })] }) }));
+});
+export const ChainOfThoughtStep = memo(({ className, icon: Icon = DotIcon, label, description, status = "complete", children, ...props }) => {
+    const statusStyles = {
+        complete: "text-muted-foreground",
+        active: "text-foreground",
+        pending: "text-muted-foreground/50",
+    };
+    return (_jsxs("div", { className: cn("flex gap-2 text-sm", statusStyles[status], "fade-in-0 slide-in-from-top-2 animate-in", className), ...props, children: [_jsxs("div", { className: "relative mt-0.5", children: [_jsx(Icon, { className: "size-4" }), _jsx("div", { className: "-mx-px absolute top-7 bottom-0 left-1/2 w-px bg-border" })] }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx("div", { children: label }), description && _jsx("div", { className: "text-muted-foreground text-xs", children: description }), children] })] }));
+});
+export const ChainOfThoughtSearchResults = memo(({ className, ...props }) => (_jsx("div", { className: cn("flex items-center gap-2", className), ...props })));
+export const ChainOfThoughtSearchResult = memo(({ className, children, ...props }) => (_jsx(Badge, { className: cn("gap-1 px-2 py-0.5 font-normal text-xs", className), variant: "secondary", ...props, children: children })));
+export const ChainOfThoughtContent = memo(({ className, children, ...props }) => {
+    const { isOpen } = useChainOfThought();
+    return (_jsx(Collapsible, { open: isOpen, children: _jsx(CollapsibleContent, { className: cn("mt-2 space-y-3", "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in", className), ...props, children: children }) }));
+});
+export const ChainOfThoughtImage = memo(({ className, children, caption, ...props }) => (_jsxs("div", { className: cn("mt-2 space-y-2", className), ...props, children: [_jsx("div", { className: "relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg bg-muted p-3", children: children }), caption && _jsx("p", { className: "text-muted-foreground text-xs", children: caption })] })));
+ChainOfThought.displayName = "ChainOfThought";
+ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader";
+ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
+ChainOfThoughtSearchResults.displayName = "ChainOfThoughtSearchResults";
+ChainOfThoughtSearchResult.displayName = "ChainOfThoughtSearchResult";
+ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
+ChainOfThoughtImage.displayName = "ChainOfThoughtImage";

package/dist/components/organisms/chain-of-thought/index.d.ts

@@ -0,0 +1,2 @@
+export { ChainOfThought, ChainOfThoughtContent, type ChainOfThoughtContentProps, ChainOfThoughtHeader, type ChainOfThoughtHeaderProps, ChainOfThoughtImage, type ChainOfThoughtImageProps, type ChainOfThoughtProps, ChainOfThoughtSearchResult, type ChainOfThoughtSearchResultProps, ChainOfThoughtSearchResults, type ChainOfThoughtSearchResultsProps, ChainOfThoughtStep, type ChainOfThoughtStepProps, } from "./chain-of-thought";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/chain-of-thought/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/chain-of-thought/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,oBAAoB,EACpB,KAAK,yBAAyB,EAC9B,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EACxB,0BAA0B,EAC1B,KAAK,+BAA+B,EACpC,2BAA2B,EAC3B,KAAK,gCAAgC,EACrC,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,oBAAoB,CAAC"}

package/dist/components/organisms/chain-of-thought/index.js

@@ -0,0 +1 @@
+export { ChainOfThought, ChainOfThoughtContent, ChainOfThoughtHeader, ChainOfThoughtImage, ChainOfThoughtSearchResult, ChainOfThoughtSearchResults, ChainOfThoughtStep, } from "./chain-of-thought";

package/dist/components/organisms/context/context.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Context Component - Flowtomic UI
+ *
+ * Componente para exibir uso de contexto/tokens do modelo
+ */
+import type { LanguageModelUsage } from "ai";
+import { type ComponentProps } from "react";
+import { Button, HoverCard, HoverCardContent } from "../../atoms";
+type ModelId = string;
+type ContextSchema = {
+    usedTokens: number;
+    maxTokens: number;
+    usage?: LanguageModelUsage;
+    modelId?: ModelId;
+};
+export type ContextProps = ComponentProps<typeof HoverCard> & ContextSchema;
+export declare const Context: ({ usedTokens, maxTokens, usage, modelId, ...props }: ContextProps) => import("react/jsx-runtime").JSX.Element;
+export type ContextTriggerProps = ComponentProps<typeof Button>;
+export declare const ContextTrigger: ({ children, ...props }: ContextTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export type ContextContentProps = ComponentProps<typeof HoverCardContent>;
+export declare const ContextContent: ({ className, ...props }: ContextContentProps) => import("react/jsx-runtime").JSX.Element;
+export type ContextContentHeaderProps = ComponentProps<"div">;
+export declare const ContextContentHeader: ({ children, className, ...props }: ContextContentHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export type ContextContentBodyProps = ComponentProps<"div">;
+export declare const ContextContentBody: ({ children, className, ...props }: ContextContentBodyProps) => import("react/jsx-runtime").JSX.Element;
+export type ContextContentFooterProps = ComponentProps<"div">;
+export declare const ContextContentFooter: ({ children, className, ...props }: ContextContentFooterProps) => import("react/jsx-runtime").JSX.Element;
+export type ContextInputUsageProps = ComponentProps<"div">;
+export declare const ContextInputUsage: ({ className, children, ...props }: ContextInputUsageProps) => string | number | bigint | true | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;
+export type ContextOutputUsageProps = ComponentProps<"div">;
+export declare const ContextOutputUsage: ({ className, children, ...props }: ContextOutputUsageProps) => string | number | bigint | true | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;
+export type ContextReasoningUsageProps = ComponentProps<"div">;
+export declare const ContextReasoningUsage: ({ className, children, ...props }: ContextReasoningUsageProps) => string | number | bigint | true | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;
+export type ContextCacheUsageProps = ComponentProps<"div">;
+export declare const ContextCacheUsage: ({ className, children, ...props }: ContextCacheUsageProps) => string | number | bigint | true | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=context.d.ts.map

package/dist/components/organisms/context/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/context/context.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,IAAI,CAAC;AAC7C,OAAO,EAAE,KAAK,cAAc,EAA6B,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAA8B,MAAM,aAAa,CAAC;AAQ9F,KAAK,OAAO,GAAG,MAAM,CAAC;AAEtB,KAAK,aAAa,GAAG;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAcF,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG,aAAa,CAAC;AAE5E,eAAO,MAAM,OAAO,GAAI,qDAAqD,YAAY,4CAWxF,CAAC;AA2CF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAEhE,eAAO,MAAM,cAAc,GAAI,wBAAwB,mBAAmB,4CAkBzE,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE1E,eAAO,MAAM,cAAc,GAAI,yBAAyB,mBAAmB,4CAE1E,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE9D,eAAO,MAAM,oBAAoB,GAAI,mCAIlC,yBAAyB,4CA+B3B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE5D,eAAO,MAAM,kBAAkB,GAAI,mCAAmC,uBAAuB,4CAI5F,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE9D,eAAO,MAAM,oBAAoB,GAAI,mCAIlC,yBAAyB,4CAgC3B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE3D,eAAO,MAAM,iBAAiB,GAAI,mCAAmC,sBAAsB,6VA6B1F,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE5D,eAAO,MAAM,kBAAkB,GAAI,mCAAmC,uBAAuB,6VA6B5F,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE/D,eAAO,MAAM,qBAAqB,GAAI,mCAInC,0BAA0B,6VA6B5B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE3D,eAAO,MAAM,iBAAiB,GAAI,mCAAmC,sBAAsB,6VA6B1F,CAAC"}