@flowtomic/ui 0.1.0 → 0.1.1

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 | import("react/jsx-runtime").JSX.Element | 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> | null;
+export type ContextOutputUsageProps = ComponentProps<"div">;
+export declare const ContextOutputUsage: ({ className, children, ...props }: ContextOutputUsageProps) => string | number | bigint | true | import("react/jsx-runtime").JSX.Element | 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> | null;
+export type ContextReasoningUsageProps = ComponentProps<"div">;
+export declare const ContextReasoningUsage: ({ className, children, ...props }: ContextReasoningUsageProps) => string | number | bigint | true | import("react/jsx-runtime").JSX.Element | 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> | null;
+export type ContextCacheUsageProps = ComponentProps<"div">;
+export declare const ContextCacheUsage: ({ className, children, ...props }: ContextCacheUsageProps) => string | number | bigint | true | import("react/jsx-runtime").JSX.Element | 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> | 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"}

package/dist/components/organisms/context/context.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { getUsage } from "tokenlens";
+import { cn } from "@/lib/utils";
+import { Button, HoverCard, HoverCardContent, HoverCardTrigger, Progress } from "../../atoms";
+const PERCENT_MAX = 100;
+const ICON_RADIUS = 10;
+const ICON_VIEWBOX = 24;
+const ICON_CENTER = 12;
+const ICON_STROKE_WIDTH = 2;
+const ContextContext = createContext(null);
+const useContextValue = () => {
+    const context = useContext(ContextContext);
+    if (!context) {
+        throw new Error("Context components must be used within Context");
+    }
+    return context;
+};
+export const Context = ({ usedTokens, maxTokens, usage, modelId, ...props }) => (_jsx(ContextContext.Provider, { value: {
+        usedTokens,
+        maxTokens,
+        usage,
+        modelId,
+    }, children: _jsx(HoverCard, { closeDelay: 0, openDelay: 0, ...props }) }));
+const ContextIcon = () => {
+    const { usedTokens, maxTokens } = useContextValue();
+    const circumference = 2 * Math.PI * ICON_RADIUS;
+    const usedPercent = usedTokens / maxTokens;
+    const dashOffset = circumference * (1 - usedPercent);
+    return (_jsxs("svg", { "aria-label": "Model context usage", height: "20", role: "img", style: { color: "currentcolor" }, viewBox: `0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`, width: "20", children: [_jsx("circle", { cx: ICON_CENTER, cy: ICON_CENTER, fill: "none", opacity: "0.25", r: ICON_RADIUS, stroke: "currentColor", strokeWidth: ICON_STROKE_WIDTH }), _jsx("circle", { cx: ICON_CENTER, cy: ICON_CENTER, fill: "none", opacity: "0.7", r: ICON_RADIUS, stroke: "currentColor", strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: dashOffset, strokeLinecap: "round", strokeWidth: ICON_STROKE_WIDTH, style: { transformOrigin: "center", transform: "rotate(-90deg)" } })] }));
+};
+export const ContextTrigger = ({ children, ...props }) => {
+    const { usedTokens, maxTokens } = useContextValue();
+    const usedPercent = usedTokens / maxTokens;
+    const renderedPercent = new Intl.NumberFormat("en-US", {
+        style: "percent",
+        maximumFractionDigits: 1,
+    }).format(usedPercent);
+    return (_jsx(HoverCardTrigger, { asChild: true, children: children ?? (_jsxs(Button, { type: "button", variant: "ghost", ...props, children: [_jsx("span", { className: "font-medium text-muted-foreground", children: renderedPercent }), _jsx(ContextIcon, {})] })) }));
+};
+export const ContextContent = ({ className, ...props }) => (_jsx(HoverCardContent, { className: cn("min-w-60 divide-y overflow-hidden p-0", className), ...props }));
+export const ContextContentHeader = ({ children, className, ...props }) => {
+    const { usedTokens, maxTokens } = useContextValue();
+    const usedPercent = usedTokens / maxTokens;
+    const displayPct = new Intl.NumberFormat("en-US", {
+        style: "percent",
+        maximumFractionDigits: 1,
+    }).format(usedPercent);
+    const used = new Intl.NumberFormat("en-US", {
+        notation: "compact",
+    }).format(usedTokens);
+    const total = new Intl.NumberFormat("en-US", {
+        notation: "compact",
+    }).format(maxTokens);
+    return (_jsx("div", { className: cn("w-full space-y-2 p-3", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between gap-3 text-xs", children: [_jsx("p", { children: displayPct }), _jsxs("p", { className: "font-mono text-muted-foreground", children: [used, " / ", total] })] }), _jsx("div", { className: "space-y-2", children: _jsx(Progress, { className: "bg-muted", value: usedPercent * PERCENT_MAX }) })] })) }));
+};
+export const ContextContentBody = ({ children, className, ...props }) => (_jsx("div", { className: cn("w-full p-3", className), ...props, children: children }));
+export const ContextContentFooter = ({ children, className, ...props }) => {
+    const { modelId, usage } = useContextValue();
+    const costUSD = modelId
+        ? getUsage({
+            modelId,
+            usage: {
+                input: usage?.inputTokens ?? 0,
+                output: usage?.outputTokens ?? 0,
+            },
+        }).costUSD?.totalUSD
+        : undefined;
+    const totalCost = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+    }).format(costUSD ?? 0);
+    return (_jsx("div", { className: cn("flex w-full items-center justify-between gap-3 bg-secondary p-3 text-xs", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground", children: "Total cost" }), _jsx("span", { children: totalCost })] })) }));
+};
+export const ContextInputUsage = ({ className, children, ...props }) => {
+    const { usage, modelId } = useContextValue();
+    const inputTokens = usage?.inputTokens ?? 0;
+    if (children) {
+        return children;
+    }
+    if (!inputTokens) {
+        return null;
+    }
+    const inputCost = modelId
+        ? getUsage({
+            modelId,
+            usage: { input: inputTokens, output: 0 },
+        }).costUSD?.totalUSD
+        : undefined;
+    const inputCostText = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+    }).format(inputCost ?? 0);
+    return (_jsxs("div", { className: cn("flex items-center justify-between text-xs", className), ...props, children: [_jsx("span", { className: "text-muted-foreground", children: "Input" }), _jsx(TokensWithCost, { costText: inputCostText, tokens: inputTokens })] }));
+};
+export const ContextOutputUsage = ({ className, children, ...props }) => {
+    const { usage, modelId } = useContextValue();
+    const outputTokens = usage?.outputTokens ?? 0;
+    if (children) {
+        return children;
+    }
+    if (!outputTokens) {
+        return null;
+    }
+    const outputCost = modelId
+        ? getUsage({
+            modelId,
+            usage: { input: 0, output: outputTokens },
+        }).costUSD?.totalUSD
+        : undefined;
+    const outputCostText = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+    }).format(outputCost ?? 0);
+    return (_jsxs("div", { className: cn("flex items-center justify-between text-xs", className), ...props, children: [_jsx("span", { className: "text-muted-foreground", children: "Output" }), _jsx(TokensWithCost, { costText: outputCostText, tokens: outputTokens })] }));
+};
+export const ContextReasoningUsage = ({ className, children, ...props }) => {
+    const { usage, modelId } = useContextValue();
+    const reasoningTokens = usage?.reasoningTokens ?? 0;
+    if (children) {
+        return children;
+    }
+    if (!reasoningTokens) {
+        return null;
+    }
+    const reasoningCost = modelId
+        ? getUsage({
+            modelId,
+            usage: { reasoningTokens },
+        }).costUSD?.totalUSD
+        : undefined;
+    const reasoningCostText = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+    }).format(reasoningCost ?? 0);
+    return (_jsxs("div", { className: cn("flex items-center justify-between text-xs", className), ...props, children: [_jsx("span", { className: "text-muted-foreground", children: "Reasoning" }), _jsx(TokensWithCost, { costText: reasoningCostText, tokens: reasoningTokens })] }));
+};
+export const ContextCacheUsage = ({ className, children, ...props }) => {
+    const { usage, modelId } = useContextValue();
+    const cacheTokens = usage?.cachedInputTokens ?? 0;
+    if (children) {
+        return children;
+    }
+    if (!cacheTokens) {
+        return null;
+    }
+    const cacheCost = modelId
+        ? getUsage({
+            modelId,
+            usage: { cacheReads: cacheTokens, input: 0, output: 0 },
+        }).costUSD?.totalUSD
+        : undefined;
+    const cacheCostText = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+    }).format(cacheCost ?? 0);
+    return (_jsxs("div", { className: cn("flex items-center justify-between text-xs", className), ...props, children: [_jsx("span", { className: "text-muted-foreground", children: "Cache" }), _jsx(TokensWithCost, { costText: cacheCostText, tokens: cacheTokens })] }));
+};
+const TokensWithCost = ({ tokens, costText }) => (_jsxs("span", { children: [tokens === undefined
+            ? "—"
+            : new Intl.NumberFormat("en-US", {
+                notation: "compact",
+            }).format(tokens), costText ? _jsxs("span", { className: "ml-2 text-muted-foreground", children: ["\u2022 ", costText] }) : null] }));

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

@@ -0,0 +1,2 @@
+export { Context, ContextCacheUsage, type ContextCacheUsageProps, ContextContent, ContextContentBody, type ContextContentBodyProps, ContextContentFooter, type ContextContentFooterProps, ContextContentHeader, type ContextContentHeaderProps, type ContextContentProps, ContextInputUsage, type ContextInputUsageProps, ContextOutputUsage, type ContextOutputUsageProps, type ContextProps, ContextReasoningUsage, type ContextReasoningUsageProps, ContextTrigger, type ContextTriggerProps, } from "./context";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,cAAc,EACd,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,oBAAoB,EACpB,KAAK,yBAAyB,EAC9B,oBAAoB,EACpB,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,EACxB,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,KAAK,YAAY,EACjB,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,WAAW,CAAC"}

package/dist/components/organisms/context/index.js

@@ -0,0 +1 @@
+export { Context, ContextCacheUsage, ContextContent, ContextContentBody, ContextContentFooter, ContextContentHeader, ContextInputUsage, ContextOutputUsage, ContextReasoningUsage, ContextTrigger, } from "./context";

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

@@ -0,0 +1,10 @@
+/**
+ * Controls Component - Flowtomic UI
+ *
+ * Wrapper do Controls do @xyflow/react
+ */
+import { Controls as ControlsPrimitive } from "@xyflow/react";
+import type { ComponentProps } from "react";
+export type ControlsProps = ComponentProps<typeof ControlsPrimitive>;
+export declare const Controls: ({ className, ...props }: ControlsProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=controls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/controls/controls.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAErE,eAAO,MAAM,QAAQ,GAAI,yBAAyB,aAAa,4CAS9D,CAAC"}

package/dist/components/organisms/controls/controls.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Controls Component - Flowtomic UI
+ *
+ * Wrapper do Controls do @xyflow/react
+ */
+import { Controls as ControlsPrimitive } from "@xyflow/react";
+import { cn } from "@/lib/utils";
+export const Controls = ({ className, ...props }) => (_jsx(ControlsPrimitive, { className: cn("gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!", "[&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!", className), ...props }));

package/dist/components/organisms/controls/index.d.ts

@@ -0,0 +1,2 @@
+export { Controls, type ControlsProps } from "./controls";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/controls/index.d.ts.map

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