@flowtomic/ui 0.1.2 → 0.1.4

package/dist/components/atoms/forms/autocomplete/autocomplete-item.d.ts

@@ -0,0 +1,16 @@
+import type { ListState } from "@react-stately/list";
+import * as React from "react";
+type CollectionItem = ReturnType<ListState<unknown>["collection"]["getItem"]>;
+export interface AutocompleteItemProps {
+    value?: string;
+    disabled?: boolean;
+    startContent?: React.ReactNode;
+    endContent?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    item?: NonNullable<CollectionItem>;
+    state?: ListState<unknown>;
+}
+declare const AutocompleteItemComponent: React.ForwardRefExoticComponent<AutocompleteItemProps & React.RefAttributes<HTMLLIElement>>;
+export { AutocompleteItemComponent as AutocompleteItem };
+//# sourceMappingURL=autocomplete-item.d.ts.map

package/dist/components/atoms/forms/autocomplete/autocomplete-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-item.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/autocomplete/autocomplete-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,KAAK,cAAc,GAAG,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;AAE9E,MAAM,WAAW,qBAAqB;IAEpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,yBAAyB,6FAiF9B,CAAC;AAIF,OAAO,EAAE,yBAAyB,IAAI,gBAAgB,EAAE,CAAC"}

package/dist/components/atoms/forms/autocomplete/autocomplete-item.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useOption } from "@react-aria/listbox";
+import { mergeProps } from "@react-aria/utils";
+import { CheckIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { useAutocompleteContext } from "./autocomplete-context";
+const AutocompleteItemComponent = React.forwardRef(({ className, startContent, endContent, value, disabled, children, item, state, ...props }, ref) => {
+    const context = useAutocompleteContext();
+    const optionRef = React.useRef(null);
+    // Determinar se está usando composição ou API antiga
+    const useComposition = value !== undefined || children !== undefined;
+    // Sempre usar o contexto para composição, ou state/item para API antiga
+    const listStateToUse = useComposition ? context.listState : state;
+    const itemKey = useComposition ? value || String(children) : item?.key;
+    const isDisabledProp = useComposition ? disabled : item?.props?.isDisabled;
+    // Sempre chamar useOption no topo (regra dos hooks)
+    // Se não tiver key válido, usar um fallback
+    const validKey = itemKey || String(children || value || "");
+    const { optionProps: propsFromHook, isSelected: selected, isFocused: focused, isDisabled: disabledState, } = useOption({
+        key: validKey,
+        isDisabled: isDisabledProp,
+    }, listStateToUse, optionRef);
+    // Validar se tem os dados necessários
+    if (!useComposition && (!item || !state)) {
+        throw new Error("AutocompleteItem requires either (value/children) or (item/state)");
+    }
+    const optionProps = propsFromHook;
+    const isSelected = selected;
+    const isFocused = focused;
+    const isDisabled = disabledState || false;
+    const itemChildren = useComposition ? children : item?.props?.children || item?.rendered;
+    const mergedRef = React.useMemo(() => {
+        if (ref) {
+            if (typeof ref === "function") {
+                return (node) => {
+                    ref(node);
+                    optionRef.current = node;
+                };
+            }
+            return Object.assign(ref, optionRef);
+        }
+        return optionRef;
+    }, [ref]);
+    return (_jsxs("li", { ...mergeProps(optionProps, props), ref: mergedRef, className: cn("relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none transition-colors", "focus:bg-accent focus:text-accent-foreground", isSelected && "bg-accent text-accent-foreground", isFocused && !isSelected && "bg-accent/50", isDisabled && "pointer-events-none opacity-50", className), children: [startContent && _jsx("span", { className: "shrink-0", children: startContent }), _jsx("span", { className: "flex-1 truncate", children: itemChildren }), endContent && _jsx("span", { className: "shrink-0", children: endContent }), isSelected && (_jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: _jsx(CheckIcon, { className: "size-4" }) }))] }));
+});
+AutocompleteItemComponent.displayName = "AutocompleteItem";
+export { AutocompleteItemComponent as AutocompleteItem };

package/dist/components/atoms/forms/autocomplete/autocomplete-section.d.ts

@@ -0,0 +1,14 @@
+import type { ListState } from "@react-stately/list";
+import * as React from "react";
+export interface AutocompleteSectionProps {
+    state: ListState<unknown>;
+    title?: string;
+    "aria-label"?: string;
+    children?: React.ReactNode;
+    className?: string;
+    titleClassName?: string;
+    separatorClassName?: string;
+}
+declare const AutocompleteSection: React.ForwardRefExoticComponent<AutocompleteSectionProps & React.RefAttributes<HTMLLIElement>>;
+export { AutocompleteSection };
+//# sourceMappingURL=autocomplete-section.d.ts.map

package/dist/components/atoms/forms/autocomplete/autocomplete-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/autocomplete/autocomplete-section.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,QAAA,MAAM,mBAAmB,gGAyCxB,CAAC;AAIF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/components/atoms/forms/autocomplete/autocomplete-section.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useListBoxSection } from "@react-aria/listbox";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+const AutocompleteSection = React.forwardRef(({ state: _state, className, titleClassName, separatorClassName, title, "aria-label": ariaLabel, children, ..._props }, ref) => {
+    const { itemProps, headingProps, groupProps } = useListBoxSection({
+        heading: title,
+        "aria-label": ariaLabel,
+    });
+    return (_jsxs(_Fragment, { children: [title && (_jsx("li", { className: cn("sticky top-0 z-10 bg-popover px-2 py-1.5 text-xs font-semibold text-muted-foreground", separatorClassName), children: _jsx("div", { ...headingProps, className: cn("truncate", titleClassName), children: title }) })), _jsx("li", { ...itemProps, ref: ref, className: cn("list-none", className), children: _jsx("ul", { ...groupProps, className: "list-none p-0", children: children }) })] }));
+});
+AutocompleteSection.displayName = "AutocompleteSection";
+export { AutocompleteSection };

package/dist/components/atoms/forms/autocomplete/autocomplete.d.ts

@@ -1,11 +1,7 @@
 import * as React from "react";
-export interface AutocompleteOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-}
-export interface AutocompleteProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "onChange"> {
-    options: AutocompleteOption[];
+import { type AutocompleteOption } from "./autocomplete-context";
+export interface AutocompleteProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "onChange" | "defaultValue"> {
+    options?: AutocompleteOption[];
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string | undefined) => void;
@@ -17,7 +13,15 @@ export interface AutocompleteProps extends Omit<React.InputHTMLAttributes<HTMLIn
     emptyMessage?: string;
     filterFunction?: (option: AutocompleteOption, searchTerm: string) => boolean;
     allowCustomValue?: boolean;
+    isLoading?: boolean;
+    maxListboxHeight?: string;
+    children?: React.ReactNode;
 }
-declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<HTMLInputElement>>;
-export { Autocomplete };
+export declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<HTMLInputElement>> & {
+    List: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>>;
+    Empty: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Loading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<import("./autocomplete-item").AutocompleteItemProps & React.RefAttributes<HTMLLIElement>>;
+};
+export type { AutocompleteOption } from "./autocomplete-context";
 //# sourceMappingURL=autocomplete.d.ts.map

package/dist/components/atoms/forms/autocomplete/autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/autocomplete/autocomplete.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IACxF,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IAC7E,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAMD,QAAA,MAAM,YAAY,4FAiNjB,CAAC;AAIF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/autocomplete/autocomplete.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,KAAK,kBAAkB,EAExB,MAAM,wBAAwB,CAAC;AAIhC,MAAM,WAAW,iBACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,cAAc,CAC/C;IAED,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAEpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IAC7E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA0eD,eAAO,MAAM,YAAY;;;;;CAKvB,CAAC;AAEH,YAAY,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/atoms/forms/autocomplete/autocomplete.js

@@ -1,119 +1,327 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
+import { useComboBox } from "@react-aria/combobox";
+import { useListBox } from "@react-aria/listbox";
+import { usePopover } from "@react-aria/overlays";
+import { useComboBoxState } from "@react-stately/combobox";
+import { useListState } from "@react-stately/list";
+import { ChevronDownIcon, XIcon } from "lucide-react";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 import { inputVariants } from "../input/input";
+import { AutocompleteContext, useAutocompleteContext, } from "./autocomplete-context";
+import { AutocompleteItem } from "./autocomplete-item";
 function defaultFilter(option, searchTerm) {
     return option.label.toLowerCase().includes(searchTerm.toLowerCase());
 }
-const Autocomplete = React.forwardRef(({ options, value: controlledValue, defaultValue, onValueChange, placeholder = "Selecione uma opção...", disabled = false, size = "default", className, inputClassName, emptyMessage = "Nenhum resultado encontrado.", filterFunction = defaultFilter, allowCustomValue = false, id, ...props }, ref) => {
-    const [open, setOpen] = React.useState(false);
-    const [inputValue, setInputValue] = React.useState(controlledValue || defaultValue || "");
-    const [selectedValue, setSelectedValue] = React.useState(controlledValue || defaultValue);
+const AutocompleteRoot = React.forwardRef(({ options = [], value: controlledValue, defaultValue, onValueChange, placeholder = "Selecione uma opção...", disabled = false, size = "default", className, inputClassName, emptyMessage = "Nenhum resultado encontrado.", filterFunction = defaultFilter, allowCustomValue = false, isLoading = false, maxListboxHeight = "300px", children, id, ...props }, ref) => {
     const isControlled = controlledValue !== undefined;
-    const currentValue = isControlled ? controlledValue : selectedValue;
-    const currentInputValue = isControlled ? controlledValue || "" : inputValue;
-    // Sincroniza o estado interno quando o valor controlado muda
-    React.useEffect(() => {
-        if (isControlled) {
-            setInputValue(controlledValue || "");
-        }
-    }, [controlledValue, isControlled]);
+    const [selectedKey, setSelectedKey] = React.useState(controlledValue || defaultValue || null);
+    const [inputValue, setInputValue] = React.useState("");
+    // Filtrar opções baseado no inputValue
     const filteredOptions = React.useMemo(() => {
-        if (!currentInputValue.trim()) {
+        if (!inputValue.trim()) {
             return options;
         }
-        return options.filter((option) => filterFunction(option, currentInputValue));
-    }, [options, currentInputValue, filterFunction]);
-    const selectedOption = React.useMemo(() => {
-        return options.find((option) => option.value === currentValue);
-    }, [options, currentValue]);
-    const handleInputChange = (e) => {
-        const newValue = e.target.value;
-        setInputValue(newValue);
-        setOpen(true);
-        if (!isControlled) {
-            // Se não está controlado, atualiza o valor local
-            if (allowCustomValue) {
-                setSelectedValue(newValue);
-                onValueChange?.(newValue);
-            }
-            else {
-                // Se não permite valor customizado, limpa a seleção se não encontrar match exato
-                const matchingOption = options.find((opt) => opt.label === newValue);
-                if (matchingOption) {
-                    setSelectedValue(matchingOption.value);
-                    onValueChange?.(matchingOption.value);
+        return options.filter((option) => filterFunction(option, inputValue));
+    }, [options, inputValue, filterFunction]);
+    // Determinar se deve usar composição ou API antiga
+    const useComposition = React.useMemo(() => {
+        return children !== undefined;
+    }, [children]);
+    // Função helper para extrair items dos children em modo composição
+    const extractItemsFromChildren = React.useCallback((childrenNodes) => {
+        const items = [];
+        const processChild = (child) => {
+            // Ignorar valores primitivos (null, undefined, strings, números, booleanos)
+            if (!React.isValidElement(child)) {
+                // Se for um Fragment, processar seus children
+                if (child === null || child === undefined) {
+                    return;
                 }
-                else {
-                    setSelectedValue(undefined);
-                    onValueChange?.(undefined);
+                return;
+            }
+            const props = child.props;
+            const componentType = child.type;
+            const displayName = componentType?.displayName;
+            // Debug: verificar tipo do componente
+            if (process.env.NODE_ENV === "development") {
+                // biome-ignore lint/suspicious/noConsoleLog: Debug temporário
+                console.log("[extractItemsFromChildren] Processing child:", {
+                    type: typeof componentType,
+                    displayName,
+                    hasValue: props.value !== undefined,
+                    hasTitle: props.title !== undefined,
+                    hasChildren: props.children !== undefined,
+                });
+            }
+            // Se tiver prop 'value', é um Autocomplete.Item
+            if (props.value !== undefined) {
+                const value = String(props.value);
+                // Extrair o texto dos children (pode ser string, ReactNode, etc)
+                let name = value;
+                if (props.children !== undefined && props.children !== null) {
+                    if (typeof props.children === "string") {
+                        name = props.children;
+                    }
+                    else if (typeof props.children === "number") {
+                        name = String(props.children);
+                    }
+                    else if (typeof props.children === "boolean") {
+                        name = String(props.children);
+                    }
+                    else if (React.isValidElement(props.children)) {
+                        // Se children é um elemento React, tentar extrair texto recursivamente
+                        const childProps = props.children.props;
+                        if (typeof childProps?.children === "string") {
+                            name = childProps.children;
+                        }
+                        else {
+                            name = String(props.children);
+                        }
+                    }
+                    else if (Array.isArray(props.children)) {
+                        // Se children é um array, processar recursivamente e pegar o primeiro texto encontrado
+                        React.Children.forEach(props.children, (c) => {
+                            if (typeof c === "string" && name === value) {
+                                name = c;
+                            }
+                        });
+                    }
+                    else {
+                        name = String(props.children);
+                    }
                 }
+                items.push({
+                    id: value,
+                    name,
+                    disabled: props.disabled,
+                });
+                return;
             }
-        }
-        else {
-            // Se está controlado, apenas notifica a mudança
-            if (allowCustomValue) {
-                onValueChange?.(newValue);
+            // Se tiver prop 'title', é um AutocompleteSection - processar seus children
+            if (props.title !== undefined) {
+                if (props.children) {
+                    React.Children.forEach(props.children, processChild);
+                }
+                return;
             }
-            else {
-                const matchingOption = options.find((opt) => opt.label === newValue);
-                if (matchingOption) {
-                    onValueChange?.(matchingOption.value);
+            // Se tiver children mas não é Item nem Section, pode ser um wrapper (como Autocomplete.List, Fragment, etc)
+            // Processar seus children recursivamente
+            if (props.children !== undefined && props.children !== null) {
+                // Se children é uma string, número ou booleano, não processar (é conteúdo de texto, não componentes)
+                if (typeof props.children === "string" || typeof props.children === "number" || typeof props.children === "boolean") {
+                    // É um componente com conteúdo de texto (como Autocomplete.Loading ou Autocomplete.Empty)
+                    // Ignorar - não contém items
+                    return;
+                }
+                // Se children é um array ou ReactNode, processar recursivamente
+                if (Array.isArray(props.children) || React.isValidElement(props.children)) {
+                    React.Children.forEach(props.children, processChild);
                 }
-                else {
-                    onValueChange?.(undefined);
+                else if (typeof props.children === "object") {
+                    // Pode ser um Fragment ou outro wrapper
+                    React.Children.forEach(props.children, processChild);
                 }
+                return;
             }
+            // Se chegou aqui, é um componente sem children e sem value (como Autocomplete.Empty ou Autocomplete.Loading vazio)
+            // Ignorar esses componentes
+        };
+        // Processar todos os children, incluindo arrays e Fragments
+        React.Children.forEach(childrenNodes, processChild);
+        return items;
+    }, []);
+    // Criar items para o React Aria
+    const items = React.useMemo(() => {
+        if (useComposition) {
+            // Em modo composição, extrair items dos children
+            const extractedItems = extractItemsFromChildren(children);
+            // Debug temporário: verificar se items foram extraídos
+            if (process.env.NODE_ENV === "development") {
+                // biome-ignore lint/suspicious/noConsoleLog: Debug temporário
+                console.log("[Autocomplete] Children:", children);
+                // biome-ignore lint/suspicious/noConsoleLog: Debug temporário
+                console.log("[Autocomplete] Extracted items:", extractedItems);
+                // biome-ignore lint/suspicious/noConsoleLog: Debug temporário
+                console.log("[Autocomplete] Items count:", extractedItems.length);
+            }
+            return extractedItems;
         }
-    };
-    const handleSelectOption = (optionValue) => {
-        const option = options.find((opt) => opt.value === optionValue);
-        if (option && !option.disabled) {
-            if (!isControlled) {
-                setSelectedValue(option.value);
+        return filteredOptions.map((option) => ({
+            id: option.value,
+            name: option.label,
+            disabled: option.disabled,
+        }));
+    }, [filteredOptions, useComposition, children, extractItemsFromChildren]);
+    // Estado do combobox
+    const state = useComboBoxState({
+        items,
+        selectedKey: selectedKey ?? undefined,
+        onSelectionChange: (key) => {
+            setSelectedKey(key ? String(key) : null);
+            onValueChange?.(key ? String(key) : undefined);
+        },
+        inputValue,
+        onInputChange: setInputValue,
+        allowsCustomValue: allowCustomValue,
+        isDisabled: disabled,
+        defaultSelectedKey: defaultValue ? defaultValue : undefined,
+    });
+    // Sincronizar com valor controlado
+    React.useEffect(() => {
+        if (isControlled && controlledValue !== undefined) {
+            const option = options.find((opt) => opt.value === controlledValue);
+            if (option) {
+                setSelectedKey(controlledValue);
                 setInputValue(option.label);
             }
-            onValueChange?.(option.value);
-            setOpen(false);
+            else {
+                setSelectedKey(null);
+                setInputValue(controlledValue);
+            }
         }
-    };
+    }, [isControlled, controlledValue, options]);
+    // Sincronizar inputValue quando seleção muda (apenas para API antiga)
+    React.useEffect(() => {
+        if (!useComposition && state.selectedKey) {
+            const option = options.find((opt) => opt.value === state.selectedKey);
+            if (option && state.inputValue !== option.label) {
+                state.setInputValue(option.label);
+            }
+        }
+    }, [state.selectedKey, options, state, useComposition]);
+    // Refs
+    const inputRef = React.useRef(null);
+    const listBoxRef = React.useRef(null);
+    const popoverRef = React.useRef(null);
+    const mergedInputRef = React.useMemo(() => {
+        if (ref) {
+            if (typeof ref === "function") {
+                return (node) => {
+                    ref(node);
+                    inputRef.current = node;
+                };
+            }
+            return Object.assign(ref, inputRef);
+        }
+        return inputRef;
+    }, [ref]);
+    // Hooks do React Aria
+    const { inputProps, listBoxProps } = useComboBox({
+        ...props,
+        inputRef: mergedInputRef,
+        listBoxRef,
+        popoverRef,
+        isDisabled: disabled,
+        placeholder,
+    }, state);
+    const listState = useListState({
+        items,
+        selectedKeys: state.selectedKey ? [state.selectedKey] : [],
+    });
+    const { listBoxProps: listBoxPropsMerged } = useListBox({
+        ...listBoxProps,
+        autoFocus: state.focusStrategy ?? undefined,
+        shouldSelectOnPressUp: true,
+    }, listState, listBoxRef);
+    const { popoverProps } = usePopover({
+        popoverRef,
+        triggerRef: mergedInputRef,
+        placement: "bottom start",
+        offset: 4,
+    }, state);
+    // Handler para limpar
     const handleClear = (e) => {
         e.stopPropagation();
         e.preventDefault();
-        if (!isControlled) {
-            setSelectedValue(undefined);
-            setInputValue("");
-        }
+        state.setSelectedKey(null);
+        state.setInputValue("");
         onValueChange?.(undefined);
-        setOpen(false);
     };
-    const handleInputFocus = () => {
-        if (!disabled) {
-            setOpen(true);
+    // Valor de exibição
+    const displayValue = React.useMemo(() => {
+        if (useComposition) {
+            // Em modo composição, usar inputValue diretamente
+            return state.inputValue;
         }
+        // Em modo API antiga, buscar label da opção
+        if (state.selectedKey) {
+            const option = options.find((opt) => opt.value === state.selectedKey);
+            return option?.label || state.inputValue;
+        }
+        return state.inputValue;
+    }, [state.selectedKey, state.inputValue, options, useComposition]);
+    const contextValue = {
+        state,
+        listState,
+        inputRef: mergedInputRef,
+        listBoxRef: listBoxRef,
+        popoverRef: popoverRef,
+        inputProps,
+        listBoxProps: listBoxPropsMerged,
+        popoverProps,
+        handleClear,
+        size,
+        disabled,
+        maxListboxHeight,
+        isLoading,
+        emptyMessage,
+        options: useComposition ? undefined : filteredOptions,
     };
-    const handleInputBlur = () => {
-        // Delay para permitir clique no item
-        setTimeout(() => {
-            if (!allowCustomValue && selectedOption) {
-                // Restaura o label do item selecionado se não permite valor customizado
-                if (!isControlled) {
-                    setInputValue(selectedOption.label);
-                }
-            }
-            setOpen(false);
-        }, 200);
-    };
-    const displayValue = selectedOption?.label || currentInputValue;
-    return (_jsx(PopoverPrimitive.Root, { open: open, onOpenChange: setOpen, children: _jsxs("div", { className: cn("relative w-full", className), children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsx("input", { ref: ref, id: id, value: displayValue, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, placeholder: placeholder, disabled: disabled, className: cn(inputVariants({ size }), "pr-8", inputClassName), ...props }) }), _jsxs("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1 pointer-events-none", children: [currentValue && !disabled && (_jsxs("button", { type: "button", onClick: handleClear, onMouseDown: (e) => {
+    return (_jsx(AutocompleteContext.Provider, { value: contextValue, children: _jsx("div", { className: cn("relative w-full", className), children: _jsxs(PopoverPrimitive.Root, { open: state.isOpen, onOpenChange: state.setOpen, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs("div", { className: "relative", children: [_jsx("input", { ...inputProps, ...props, ref: mergedInputRef, id: id, value: displayValue, onChange: (e) => {
+                                        setInputValue(e.target.value);
+                                        state.setInputValue(e.target.value);
+                                        state.open();
+                                    }, className: cn(inputVariants({ size }), "pr-8", inputClassName), disabled: disabled }), _jsxs("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1 pointer-events-none", children: [state.selectedKey && !disabled && (_jsxs("button", { type: "button", onClick: handleClear, onMouseDown: (e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                            }, className: "text-muted-foreground hover:text-foreground rounded-sm p-1 opacity-70 hover:opacity-100 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-events-auto", children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Limpar" })] })), _jsx(ChevronDownIcon, { className: cn("size-4 text-muted-foreground transition-transform", state.isOpen && "rotate-180") })] })] }) }), _jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ...popoverProps, ref: popoverRef, className: cn("bg-popover text-popover-foreground", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", "relative z-50", "min-w-(--radix-popover-trigger-width) w-full", "overflow-hidden rounded-md border shadow-md"), style: {
+                                maxHeight: maxListboxHeight,
+                                ...popoverProps.style,
+                            }, align: "start", sideOffset: 4, onOpenAutoFocus: (e) => {
                                 e.preventDefault();
-                                e.stopPropagation();
-                            }, className: "text-muted-foreground hover:text-foreground rounded-sm p-1 opacity-70 hover:opacity-100 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-events-auto", children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Limpar" })] })), _jsx(ChevronDownIcon, { className: cn("size-4 text-muted-foreground transition-transform", open && "rotate-180") })] }), _jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-[300px] min-w-(--radix-popover-trigger-width) w-full overflow-x-hidden overflow-y-auto rounded-md border shadow-md"), align: "start", sideOffset: 4, onOpenAutoFocus: (e) => {
-                            // Previne o foco automático no popover, mantendo o foco no input
-                            e.preventDefault();
-                        }, children: filteredOptions.length > 0 ? (_jsx("div", { className: "p-1", children: filteredOptions.map((option) => (_jsxs("button", { type: "button", onClick: () => handleSelectOption(option.value), disabled: option.disabled, className: cn("focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none transition-colors", currentValue === option.value && "bg-accent text-accent-foreground", option.disabled && "pointer-events-none opacity-50"), children: [_jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: currentValue === option.value && _jsx(CheckIcon, { className: "size-4" }) }), option.label] }, option.value))) })) : (_jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage })) }) })] }) }));
+                            }, children: _jsx("div", { className: "overflow-y-auto overflow-x-hidden", style: { maxHeight: maxListboxHeight }, children: useComposition ? (children) : isLoading ? (_jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: "Carregando..." })) : filteredOptions.length > 0 ? (_jsx("ul", { ...listBoxPropsMerged, ref: listBoxRef, className: "p-1 outline-none", children: Array.from(listState.collection).map((item) => {
+                                        return _jsx(AutocompleteItem, { item: item, state: listState }, item.key);
+                                    }) })) : (_jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage })) }) }) })] }) }) }));
+});
+AutocompleteRoot.displayName = "Autocomplete";
+// Subcomponentes para composição
+const AutocompleteList = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { listBoxProps, listBoxRef } = useAutocompleteContext();
+    const mergedRef = React.useMemo(() => {
+        if (ref) {
+            if (typeof ref === "function") {
+                return (node) => {
+                    ref(node);
+                    if (listBoxRef.current !== node) {
+                        listBoxRef.current = node;
+                    }
+                };
+            }
+            return Object.assign(ref, listBoxRef);
+        }
+        return listBoxRef;
+    }, [ref, listBoxRef]);
+    return (_jsx("ul", { ...listBoxProps, ...props, ref: mergedRef, className: cn("p-1 outline-none", className), children: children }));
+});
+AutocompleteList.displayName = "AutocompleteList";
+const AutocompleteEmpty = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { emptyMessage } = useAutocompleteContext();
+    return (_jsx("div", { ref: ref, ...props, className: cn("py-6 text-center text-sm text-muted-foreground", className), children: children || emptyMessage }));
+});
+AutocompleteEmpty.displayName = "AutocompleteEmpty";
+const AutocompleteLoading = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { isLoading } = useAutocompleteContext();
+    if (!isLoading)
+        return null;
+    return (_jsx("div", { ref: ref, ...props, className: cn("py-6 text-center text-sm text-muted-foreground", className), children: children || "Carregando..." }));
+});
+AutocompleteLoading.displayName = "AutocompleteLoading";
+// Exportar componente composto
+export const Autocomplete = Object.assign(AutocompleteRoot, {
+    List: AutocompleteList,
+    Empty: AutocompleteEmpty,
+    Loading: AutocompleteLoading,
+    Item: AutocompleteItem,
 });
-Autocomplete.displayName = "Autocomplete";
-export { Autocomplete };

package/dist/components/atoms/forms/autocomplete/index.d.ts

@@ -1,3 +1,9 @@
 export type { AutocompleteOption, AutocompleteProps } from "./autocomplete";
 export { Autocomplete } from "./autocomplete";
+export type { AutocompleteContextValue } from "./autocomplete-context";
+export { useAutocompleteContext } from "./autocomplete-context";
+export type { AutocompleteItemProps } from "./autocomplete-item";
+export { AutocompleteItem } from "./autocomplete-item";
+export type { AutocompleteSectionProps } from "./autocomplete-section";
+export { AutocompleteSection } from "./autocomplete-section";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/forms/autocomplete/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/autocomplete/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/autocomplete/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAChE,YAAY,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,YAAY,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/atoms/forms/autocomplete/index.js

@@ -1 +1,4 @@
 export { Autocomplete } from "./autocomplete";
+export { useAutocompleteContext } from "./autocomplete-context";
+export { AutocompleteItem } from "./autocomplete-item";
+export { AutocompleteSection } from "./autocomplete-section";

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

@@ -1,5 +1,3 @@
-export type { AutocompleteOption, AutocompleteProps } from "./autocomplete";
-export { Autocomplete } from "./autocomplete";
 export type { CheckboxProps } from "./checkbox";
 export { Checkbox } from "./checkbox";
 export type { FieldContentProps, FieldDescriptionProps, FieldErrorProps, FieldGroupProps, FieldLabelProps, FieldLegendProps, FieldProps, FieldSeparatorProps, FieldSetProps, FieldTitleProps, } from "./field";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/forms/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EACV,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,EACf,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,eAAe,GAChB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,QAAQ,EACR,UAAU,GACX,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,gBAAgB,EAChB,oBAAoB,EACpB,cAAc,EACd,aAAa,EACb,cAAc,EACd,gBAAgB,GACjB,MAAM,QAAQ,CAAC;AAChB,OAAO,EACL,IAAI,EACJ,WAAW,EACX,eAAe,EACf,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EACX,YAAY,GACb,MAAM,QAAQ,CAAC;AAChB,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC/C,YAAY,EACV,kBAAkB,EAClB,aAAa,EACb,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACvF,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/forms/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EACV,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,EACf,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,eAAe,GAChB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,QAAQ,EACR,UAAU,GACX,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,gBAAgB,EAChB,oBAAoB,EACpB,cAAc,EACd,aAAa,EACb,cAAc,EACd,gBAAgB,GACjB,MAAM,QAAQ,CAAC;AAChB,OAAO,EACL,IAAI,EACJ,WAAW,EACX,eAAe,EACf,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EACX,YAAY,GACb,MAAM,QAAQ,CAAC;AAChB,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC/C,YAAY,EACV,kBAAkB,EAClB,aAAa,EACb,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACvF,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC"}

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

@@ -1,4 +1,3 @@
-export { Autocomplete } from "./autocomplete";
 export { Checkbox } from "./checkbox";
 export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from "./field";
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField, } from "./form";

package/dist/components/atoms/forms/input/input.d.ts

@@ -1,8 +1,8 @@
 import { type VariantProps } from "class-variance-authority";
 import React from "react";
 declare const inputVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
-    variant?: "default" | "success" | "error" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
+    variant?: "default" | "error" | "success" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
     label?: string;