@flowtomic/logic 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowtomic/logic",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Hooks headless e lógica reutilizável para React",
   "type": "module",
   "main": "./dist/index.js",
@@ -27,9 +27,9 @@
   "license": "MIT",
   "scripts": {
     "dev": "bun run --watch src/index.ts",
-    "build": "biome check . && tsc --emitDeclarationOnly && bun build ./src/index.ts --outdir ./dist --target browser --format esm --minify --external react --external react/jsx-runtime",
+    "build": "biome check . && tsc --emitDeclarationOnly && bun build --production ./src/index.ts --outdir ./dist --target browser --format esm --minify --external react --external react/jsx-runtime",
     "type-check": "tsc --noEmit",
-    "clean": "rm -rf dist",
+    "clean": "rm -rf dist *.tsbuildinfo",
     "lint": "biome check .",
     "lint:fix": "biome check --write .",
     "format": "biome format --write .",

package/dist/hooks/useAnimatedIndicator/index.js

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

package/dist/hooks/useAnimatedIndicator/useAnimatedIndicator.js

@@ -1,242 +0,0 @@
-/**
- * useAnimatedIndicator - Headless UI Hook
- *
- * Hook reutilizável para animação de indicador que se move entre elementos
- * Fornece apenas: lógica, estado e cálculos de posição
- * NÃO fornece: markup, styles ou implementações pré-construídas
- *
- * Padrão Headless UI: você controla o markup e styles
- */
-import { useCallback, useEffect, useRef, useState } from "react";
-/**
- * Hook headless para animação de indicador
- *
- * @example
- * ```tsx
- * const containerRef = useRef<HTMLDivElement>(null);
- * const { indicatorStyle, registerElement, unregisterElement } = useAnimatedIndicator({
- *   containerRef,
- *   activeSelector: '[data-state="active"]',
- * });
- *
- * return (
- *   <div ref={containerRef}>
- *     {items.map((item) => (
- *       <button
- *         ref={(el) => registerElement(el, item.id)}
- *         data-state={isActive ? "active" : "inactive"}
- *       >
- *         {item.label}
- *       </button>
- *     ))}
- *     <motion.div
- *       style={{
- *         left: `${indicatorStyle.left}px`,
- *         top: `${indicatorStyle.top}px`,
- *         width: indicatorStyle.width,
- *         height: indicatorStyle.height,
- *       }}
- *     />
- *   </div>
- * );
- * ```
- */
-export function useAnimatedIndicator(options) {
-    const { containerRef, activeSelector = '[data-state="active"]', getElementValue, updateOnResize = true, value: controlledValue, } = options;
-    const elementsRef = useRef(new Map());
-    const updateTimeoutRef = useRef(null);
-    const activeValueRef = useRef(undefined);
-    const [indicatorStyle, setIndicatorStyle] = useState({
-        left: 0,
-        width: 0,
-        height: 0,
-        top: 0,
-        opacity: 0,
-    });
-    const [activeValue, setActiveValue] = useState();
-    // Sincronizar ref com state
-    useEffect(() => {
-        activeValueRef.current = activeValue;
-    }, [activeValue]);
-    // Sincronizar valor controlado
-    useEffect(() => {
-        if (controlledValue !== undefined) {
-            setActiveValue(controlledValue);
-        }
-    }, [controlledValue]);
-    const updateIndicator = useCallback(() => {
-        const currentActiveValue = activeValueRef.current;
-        if (!currentActiveValue) {
-            setIndicatorStyle((prev) => {
-                if (prev.opacity === 0)
-                    return prev;
-                return { left: 0, width: 0, height: 0, top: 0, opacity: 0 };
-            });
-            return;
-        }
-        const activeElement = elementsRef.current.get(currentActiveValue);
-        const container = containerRef.current;
-        if (activeElement && container) {
-            const elementRect = activeElement.getBoundingClientRect();
-            const containerRect = container.getBoundingClientRect();
-            // Calcular posição relativa ao container
-            const left = elementRect.left - containerRect.left;
-            const width = elementRect.width;
-            const height = elementRect.height;
-            const top = elementRect.top - containerRect.top;
-            setIndicatorStyle((prev) => {
-                // Evitar atualização se os valores não mudaram
-                if (prev.left === left &&
-                    prev.width === width &&
-                    prev.height === height &&
-                    prev.top === top &&
-                    prev.opacity === 1) {
-                    return prev;
-                }
-                return {
-                    left,
-                    width,
-                    height,
-                    top,
-                    opacity: 1,
-                };
-            });
-        }
-    }, [containerRef]);
-    // Função para agendar atualização (debounce) - estável
-    const scheduleUpdateRef = useRef(undefined);
-    // Atualizar a função no ref sempre que updateIndicator mudar
-    useEffect(() => {
-        scheduleUpdateRef.current = () => {
-            if (updateTimeoutRef.current !== null) {
-                cancelAnimationFrame(updateTimeoutRef.current);
-            }
-            updateTimeoutRef.current = requestAnimationFrame(() => {
-                updateIndicator();
-                updateTimeoutRef.current = null;
-            });
-        };
-    }, [updateIndicator]);
-    const scheduleUpdate = useCallback(() => {
-        scheduleUpdateRef.current?.();
-    }, []);
-    // Atualizar quando activeValue mudar
-    useEffect(() => {
-        scheduleUpdate();
-    }, [scheduleUpdate]);
-    // Listener de resize
-    useEffect(() => {
-        if (!updateOnResize)
-            return;
-        const handleResize = () => scheduleUpdate();
-        window.addEventListener("resize", handleResize);
-        return () => {
-            window.removeEventListener("resize", handleResize);
-            if (updateTimeoutRef.current !== null) {
-                cancelAnimationFrame(updateTimeoutRef.current);
-            }
-        };
-    }, [scheduleUpdate, updateOnResize]);
-    const registerElement = useCallback((element, value) => {
-        const previousElement = elementsRef.current.get(value);
-        // Só atualizar se o elemento realmente mudou
-        if (element === previousElement) {
-            return;
-        }
-        if (element) {
-            elementsRef.current.set(value, element);
-        }
-        else {
-            // Só remover se o elemento existia antes
-            if (previousElement) {
-                elementsRef.current.delete(value);
-            }
-            else {
-                return; // Elemento já não existe, não precisa atualizar
-            }
-        }
-        // Agendar atualização de forma assíncrona para evitar loops
-        // Só atualizar se temos um elemento válido
-        if (element) {
-            scheduleUpdate();
-        }
-    }, [scheduleUpdate]);
-    const unregisterElement = useCallback((value) => {
-        elementsRef.current.delete(value);
-        scheduleUpdate();
-    }, [scheduleUpdate]);
-    // Refs para opções estáveis
-    const activeSelectorRef = useRef(activeSelector);
-    const getElementValueRef = useRef(getElementValue);
-    useEffect(() => {
-        activeSelectorRef.current = activeSelector;
-        getElementValueRef.current = getElementValue;
-    }, [activeSelector, getElementValue]);
-    // Ref para valor controlado
-    const controlledValueRef = useRef(controlledValue);
-    useEffect(() => {
-        controlledValueRef.current = controlledValue;
-    }, [controlledValue]);
-    // Observar mudanças no elemento ativo
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        const findActiveValue = () => {
-            // Se estiver em modo controlado, ignorar detecção DOM
-            if (controlledValueRef.current !== undefined)
-                return;
-            const activeElement = container.querySelector(activeSelectorRef.current);
-            if (activeElement) {
-                let value;
-                if (getElementValueRef.current) {
-                    value = getElementValueRef.current(activeElement);
-                }
-                else {
-                    // Tentar obter do atributo data-value
-                    value = activeElement.getAttribute("data-value") || undefined;
-                    // Se não tiver data-value, buscar no Map pelo elemento
-                    if (!value) {
-                        for (const [mapValue, mapElement] of elementsRef.current.entries()) {
-                            if (mapElement === activeElement) {
-                                value = mapValue;
-                                break;
-                            }
-                        }
-                    }
-                }
-                if (value) {
-                    setActiveValue((prev) => {
-                        // Só atualizar se o valor realmente mudou
-                        if (prev !== value) {
-                            return value;
-                        }
-                        return prev;
-                    });
-                }
-            }
-        };
-        const observer = new MutationObserver(() => {
-            // Usar requestAnimationFrame para evitar chamadas síncronas
-            requestAnimationFrame(findActiveValue);
-        });
-        observer.observe(container, {
-            attributes: true,
-            attributeFilter: ["data-state", "data-active", "aria-selected"],
-            subtree: true,
-        });
-        // Verificar estado inicial com delay para evitar loop
-        const timeoutId = setTimeout(findActiveValue, 0);
-        return () => {
-            observer.disconnect();
-            clearTimeout(timeoutId);
-        };
-    }, [containerRef]);
-    return {
-        indicatorStyle,
-        registerElement,
-        unregisterElement,
-        updateIndicator,
-        activeValue,
-    };
-}

package/dist/hooks/useAutocomplete/index.js

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

package/dist/hooks/useAutocomplete/useAutocomplete.js

@@ -1,380 +0,0 @@
-/**
- * useAutocomplete - Headless UI Hook
- *
- * Fornece apenas: lógica, estado, processamento e API
- * NÃO fornece: markup, styles ou implementações pré-construídas
- *
- * Padrão Headless UI: você controla o markup e styles
- *
- * @example
- * ```tsx
- * function MyCustomAutocomplete() {
- *   const {
- *     inputValue,
- *     selectedValue,
- *     isOpen,
- *     filteredItems,
- *     getInputProps,
- *     getPopoverProps,
- *     getListProps,
- *     getItemProps,
- *     open,
- *     close,
- *     select,
- *     clear,
- *   } = useAutocomplete({
- *     options: [
- *       { value: "1", label: "Option 1" },
- *       { value: "2", label: "Option 2" },
- *     ],
- *   });
- *
- *   return (
- *     <div>
- *       <input {...getInputProps()} />
- *       {isOpen && (
- *         <div {...getPopoverProps()}>
- *           <ul {...getListProps()}>
- *             {filteredItems.map((item) => (
- *               <li key={item.value} {...getItemProps(item)}>
- *                 {item.label}
- *               </li>
- *             ))}
- *           </ul>
- *         </div>
- *       )}
- *     </div>
- *   );
- * }
- * ```
- */
-import * as React from "react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-/**
- * Função de filtro padrão (case-insensitive)
- */
-function defaultFilter(option, searchTerm) {
-    return option.label.toLowerCase().includes(searchTerm.toLowerCase());
-}
-/**
- * Extrai items dos children em modo composição
- */
-function extractItemsFromChildren(children) {
-    const items = [];
-    const processChild = (child) => {
-        if (!React.isValidElement(child)) {
-            return;
-        }
-        const props = child.props;
-        // Se tiver prop 'value', é um Autocomplete.Item
-        if (props.value !== undefined) {
-            const value = String(props.value);
-            let label = value;
-            // Extrair o texto dos children
-            if (props.children !== undefined && props.children !== null) {
-                if (typeof props.children === "string") {
-                    label = props.children;
-                }
-                else if (typeof props.children === "number") {
-                    label = String(props.children);
-                }
-                else if (React.isValidElement(props.children)) {
-                    const childProps = props.children.props;
-                    if (typeof childProps?.children === "string") {
-                        label = childProps.children;
-                    }
-                    else {
-                        label = String(props.children);
-                    }
-                }
-                else if (Array.isArray(props.children)) {
-                    React.Children.forEach(props.children, (c) => {
-                        if (typeof c === "string" && label === value) {
-                            label = c;
-                        }
-                    });
-                }
-                else {
-                    label = String(props.children);
-                }
-            }
-            items.push({
-                value,
-                label,
-                disabled: props.disabled,
-            });
-            return;
-        }
-        // Se tiver prop 'title', é um AutocompleteSection - processar seus children
-        if (props.title !== undefined) {
-            if (props.children) {
-                React.Children.forEach(props.children, processChild);
-            }
-            return;
-        }
-        // Se tiver children mas não é Item nem Section, processar recursivamente
-        if (props.children !== undefined && props.children !== null) {
-            if (typeof props.children === "string" ||
-                typeof props.children === "number" ||
-                typeof props.children === "boolean") {
-                return;
-            }
-            if (Array.isArray(props.children) || React.isValidElement(props.children)) {
-                React.Children.forEach(props.children, processChild);
-            }
-            else if (typeof props.children === "object") {
-                React.Children.forEach(props.children, processChild);
-            }
-        }
-    };
-    React.Children.forEach(children, processChild);
-    return items;
-}
-/**
- * Hook Headless UI para Autocomplete
- *
- * Fornece apenas a lógica e API, sem markup ou styles.
- * Você é responsável por criar o visual.
- */
-export function useAutocomplete(options = {}) {
-    const { options: providedOptions = [], value: controlledValue, defaultValue, onValueChange, filterFunction = defaultFilter, allowCustomValue = false, isLoading = false, emptyMessage: _emptyMessage = "Nenhum resultado encontrado.", children, } = options;
-    // Determinar se está usando composição ou API antiga
-    const useComposition = children !== undefined;
-    // Estado interno
-    const [inputValue, setInputValueState] = useState("");
-    const [selectedValue, setSelectedValue] = useState(controlledValue ?? defaultValue);
-    const [isOpen, setIsOpen] = useState(false);
-    const [highlightedIndex, setHighlightedIndex] = useState(-1);
-    // Determinar se é controlado
-    const isControlled = controlledValue !== undefined;
-    // Extrair items dos children se em modo composição
-    const itemsFromChildren = useMemo(() => {
-        if (!useComposition)
-            return [];
-        return extractItemsFromChildren(children);
-    }, [useComposition, children]);
-    // Items disponíveis (API antiga ou composição)
-    const allItems = useMemo(() => {
-        if (useComposition) {
-            return itemsFromChildren;
-        }
-        return providedOptions;
-    }, [useComposition, itemsFromChildren, providedOptions]);
-    // Filtrar items baseado no inputValue
-    const filteredItems = useMemo(() => {
-        if (!inputValue.trim()) {
-            return allItems;
-        }
-        return allItems.filter((item) => filterFunction(item, inputValue));
-    }, [allItems, inputValue, filterFunction]);
-    // Estado derivado
-    const isEmpty = filteredItems.length === 0 && !isLoading;
-    // IDs para acessibilidade
-    const listIdRef = useRef(`autocomplete-list-${React.useId()}`);
-    const listId = listIdRef.current;
-    // Sincronizar com valor controlado
-    useEffect(() => {
-        if (isControlled && controlledValue !== undefined) {
-            const option = allItems.find((opt) => opt.value === controlledValue);
-            if (option) {
-                setSelectedValue(controlledValue);
-                setInputValueState(option.label);
-            }
-            else {
-                setSelectedValue(undefined);
-                setInputValueState(controlledValue);
-            }
-        }
-    }, [isControlled, controlledValue, allItems]);
-    // Sincronizar inputValue quando seleção muda (apenas para API antiga)
-    useEffect(() => {
-        if (!useComposition && selectedValue) {
-            const option = allItems.find((opt) => opt.value === selectedValue);
-            if (option && inputValue !== option.label) {
-                setInputValueState(option.label);
-            }
-        }
-    }, [selectedValue, allItems, useComposition, inputValue]);
-    // Controles
-    const open = useCallback(() => {
-        if (filteredItems.length > 0 || isLoading) {
-            setIsOpen(true);
-        }
-    }, [filteredItems.length, isLoading]);
-    const close = useCallback(() => {
-        setIsOpen(false);
-        setHighlightedIndex(-1);
-    }, []);
-    const select = useCallback((value) => {
-        const option = allItems.find((opt) => opt.value === value);
-        if (option) {
-            setSelectedValue(value);
-            setInputValueState(option.label);
-            onValueChange?.(value);
-            close();
-        }
-        else if (allowCustomValue) {
-            setSelectedValue(value);
-            setInputValueState(value);
-            onValueChange?.(value);
-            close();
-        }
-    }, [allItems, allowCustomValue, onValueChange, close]);
-    const clear = useCallback(() => {
-        setSelectedValue(undefined);
-        setInputValueState("");
-        onValueChange?.(undefined);
-        close();
-    }, [onValueChange, close]);
-    const setInputValue = useCallback((value) => {
-        setInputValueState(value);
-        if (value.trim() && (filteredItems.length > 0 || isLoading)) {
-            setIsOpen(true);
-        }
-        else if (!value.trim()) {
-            setIsOpen(false);
-        }
-    }, [filteredItems.length, isLoading]);
-    // Helpers de props
-    const getInputProps = useCallback((props = {}) => {
-        const highlightedItem = filteredItems[highlightedIndex];
-        const activeDescendant = highlightedItem
-            ? `${listId}-item-${highlightedItem.value}`
-            : undefined;
-        const handleFocus = (e) => {
-            open();
-            props.onFocus?.(e);
-        };
-        const handleBlur = (e) => {
-            // Delay para permitir cliques nos items
-            setTimeout(() => {
-                // Não fechar o popover no onBlur - deixar o Popover gerenciar o fechamento
-                // O Popover do Radix UI já gerencia o fechamento quando você clica fora
-                // via onOpenChange. Fechar aqui causa conflito e comportamento inconsistente.
-                props.onBlur?.(e);
-            }, 200);
-        };
-        return {
-            ...props,
-            value: inputValue,
-            onChange: (e) => {
-                setInputValue(e.target.value);
-                props.onChange?.(e);
-            },
-            onFocus: handleFocus,
-            onBlur: handleBlur,
-            onKeyDown: (e) => {
-                if (e.key === "ArrowDown") {
-                    e.preventDefault();
-                    if (isOpen) {
-                        setHighlightedIndex((prev) => (prev < filteredItems.length - 1 ? prev + 1 : prev));
-                    }
-                    else {
-                        open();
-                    }
-                }
-                else if (e.key === "ArrowUp") {
-                    e.preventDefault();
-                    if (isOpen) {
-                        setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : -1));
-                    }
-                }
-                else if (e.key === "Enter") {
-                    e.preventDefault();
-                    if (isOpen && highlightedItem) {
-                        select(highlightedItem.value);
-                    }
-                    else if (isOpen && filteredItems.length === 1) {
-                        select(filteredItems[0].value);
-                    }
-                    else if (allowCustomValue && inputValue.trim()) {
-                        select(inputValue);
-                    }
-                }
-                else if (e.key === "Escape") {
-                    e.preventDefault();
-                    close();
-                }
-                props.onKeyDown?.(e);
-            },
-            "aria-expanded": isOpen,
-            "aria-autocomplete": "list",
-            "aria-controls": listId,
-            "aria-activedescendant": activeDescendant,
-            role: "combobox",
-        };
-    }, [
-        inputValue,
-        isOpen,
-        filteredItems,
-        highlightedIndex,
-        listId,
-        open,
-        close,
-        select,
-        allowCustomValue,
-        setInputValue,
-    ]);
-    const getPopoverProps = useCallback((props = {}) => {
-        return {
-            ...props,
-            "aria-label": "Lista de opções",
-            role: "listbox",
-        };
-    }, []);
-    const getListProps = useCallback((props = {}) => {
-        return {
-            ...props,
-            id: listId,
-            role: "listbox",
-            "aria-label": "Opções disponíveis",
-        };
-    }, [listId]);
-    const getItemProps = useCallback((item, props = {}) => {
-        const itemId = `${listId}-item-${item.value}`;
-        const isSelected = selectedValue === item.value;
-        const isHighlighted = filteredItems[highlightedIndex]?.value === item.value;
-        const handleClick = (e) => {
-            if (!item.disabled) {
-                select(item.value);
-            }
-            props.onClick?.(e);
-        };
-        const handleMouseEnter = (e) => {
-            const index = filteredItems.findIndex((i) => i.value === item.value);
-            if (index >= 0) {
-                setHighlightedIndex(index);
-            }
-            props.onMouseEnter?.(e);
-        };
-        return {
-            ...props,
-            role: "option",
-            "aria-selected": isSelected,
-            "aria-disabled": item.disabled ?? false,
-            id: itemId,
-            onClick: handleClick,
-            onMouseEnter: handleMouseEnter,
-            className: `${props.className || ""} ${isHighlighted ? "bg-accent" : ""} ${isSelected ? "font-semibold" : ""}`.trim(),
-        };
-    }, [listId, selectedValue, filteredItems, highlightedIndex, select]);
-    return {
-        inputValue,
-        selectedValue,
-        isOpen,
-        filteredItems,
-        highlightedIndex,
-        isLoading,
-        isEmpty,
-        open,
-        close,
-        select,
-        clear,
-        setInputValue,
-        getInputProps,
-        getPopoverProps,
-        getListProps,
-        getItemProps,
-        extractItemsFromChildren,
-    };
-}

package/dist/hooks/useDashboardLayout/index.js

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