@flowtomic/ui 0.1.2 → 0.1.5

package/dist/components/atoms/feedback/tooltip/tooltip.js

@@ -1,10 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Tooltip Component - Flowtomic UI
  *
- * Componente Tooltip baseado em Radix UI
+ * Componente Tooltip baseado em Radix UI (padrão) ou React Aria (followMouse)
+ * com seguimento do mouse e posicionamento inteligente
+ * Baseado no Aceternity UI Tooltip Card para animações
  */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { useTooltip } from "@react-aria/tooltip";
+import { useTooltipTriggerState } from "@react-stately/tooltip";
+import { AnimatePresence, motion } from "motion/react";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 /**
@@ -20,7 +26,9 @@ Tooltip.displayName = "Tooltip";
 /**
  * TooltipTrigger - Trigger do tooltip
  */
-const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipTrigger = React.forwardRef(({ "data-follow-mouse": followMouse, ...props }, ref) => {
+    return (_jsx(TooltipPrimitive.Trigger, { ref: ref, "data-radix-tooltip-trigger": "", "data-follow-mouse": followMouse, ...props }));
+});
 TooltipTrigger.displayName = "TooltipTrigger";
 /**
  * TooltipPortal - Portal do tooltip
@@ -28,8 +36,183 @@ TooltipTrigger.displayName = "TooltipTrigger";
 const TooltipPortal = TooltipPrimitive.Portal;
 TooltipPortal.displayName = "TooltipPortal";
 /**
- * TooltipContent - Conteúdo do tooltip
+ * TooltipContent - Conteúdo do tooltip com suporte a seguimento do mouse
  */
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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", className), ...props })));
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, followMouse = false, minWidth = 240, children, ...props }, ref) => {
+    // Se não seguir o mouse, usar comportamento padrão do Radix
+    if (!followMouse) {
+        return (_jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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", className), ...props, children: children }));
+    }
+    // Comportamento com seguimento do mouse - implementação customizada baseada no Aceternity
+    return (_jsx(TooltipContentWithMouseFollow, { ref: ref, sideOffset: sideOffset, className: className, minWidth: minWidth, ...props, children: children }));
+});
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+/**
+ * TooltipContentWithMouseFollow - Versão com seguimento do mouse
+ * Este componente não renderiza nada - o tooltip é renderizado via portal
+ * O estado é gerenciado pelo TooltipWithMouseFollowWrapper
+ */
+const TooltipContentWithMouseFollow = React.forwardRef(({ className, minWidth, children, ...props }, ref) => {
+    // Este componente não renderiza - o tooltip é gerenciado pelo wrapper
+    return null;
+});
+TooltipContentWithMouseFollow.displayName = "TooltipContentWithMouseFollow";
+/**
+ * TooltipWithMouseFollow - Wrapper completo para tooltip com seguimento do mouse
+ * Implementação baseada no Aceternity UI, sem Radix
+ */
+export function TooltipWithMouseFollow({ content, children, containerClassName, className, minWidth = 240, }) {
+    const [isVisible, setIsVisible] = React.useState(false);
+    const [mouse, setMouse] = React.useState({ x: 0, y: 0 });
+    const [height, setHeight] = React.useState(0);
+    const [position, setPosition] = React.useState({ x: 0, y: 0 });
+    const contentRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+    // Usar React Aria para acessibilidade
+    const state = useTooltipTriggerState({ delay: 0 });
+    const { tooltipProps } = useTooltip({}, state);
+    // Sincronizar estado do React Aria com estado local
+    React.useEffect(() => {
+        setIsVisible(state.isOpen);
+    }, [state.isOpen]);
+    React.useEffect(() => {
+        if (isVisible && contentRef.current) {
+            // Usar múltiplos requestAnimationFrame para garantir que o DOM foi totalmente renderizado
+            const rafId1 = requestAnimationFrame(() => {
+                const rafId2 = requestAnimationFrame(() => {
+                    if (contentRef.current) {
+                        // scrollHeight do conteúdo interno
+                        const contentScrollHeight = contentRef.current.scrollHeight;
+                        // py-1.5 = 0.375rem = 6px top + 6px bottom = 12px total
+                        // Adicionar buffer extra para garantir que não corte
+                        setHeight(contentScrollHeight + 16);
+                    }
+                });
+                return () => cancelAnimationFrame(rafId2);
+            });
+            return () => cancelAnimationFrame(rafId1);
+        }
+    }, [isVisible, content]);
+    const calculatePosition = React.useCallback((mouseX, mouseY) => {
+        if (!contentRef.current || !containerRef.current) {
+            return { x: mouseX + 12, y: mouseY + 12 };
+        }
+        const tooltip = contentRef.current;
+        const container = containerRef.current;
+        const containerRect = container.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Dimensões do tooltip
+        const tooltipWidth = minWidth;
+        const tooltipHeight = tooltip.scrollHeight;
+        // Calcular posição absoluta relativa ao viewport
+        const absoluteX = containerRect.left + mouseX;
+        const absoluteY = containerRect.top + mouseY;
+        // Posição inicial relativa ao container (como no original)
+        let finalX = mouseX + 12;
+        let finalY = mouseY + 12;
+        // Verificar se ultrapassa a borda direita
+        if (absoluteX + 12 + tooltipWidth > viewportWidth) {
+            finalX = mouseX - tooltipWidth - 12;
+        }
+        // Verificar se ultrapassa a borda esquerda
+        if (absoluteX + finalX < 0) {
+            finalX = -containerRect.left + 12;
+        }
+        // Verificar se ultrapassa a borda inferior
+        if (absoluteY + 12 + tooltipHeight > viewportHeight) {
+            finalY = mouseY - tooltipHeight - 12;
+        }
+        // Verificar se ultrapassa a borda superior
+        if (absoluteY + finalY < 0) {
+            finalY = -containerRect.top + 12;
+        }
+        return { x: finalX, y: finalY };
+    }, [minWidth]);
+    const updateMousePosition = React.useCallback((mouseX, mouseY) => {
+        setMouse({ x: mouseX, y: mouseY });
+        const newPosition = calculatePosition(mouseX, mouseY);
+        setPosition(newPosition);
+    }, [calculatePosition]);
+    const handleMouseEnter = (e) => {
+        state.open();
+        const rect = e.currentTarget.getBoundingClientRect();
+        // Usar coordenadas relativas ao container para cálculo
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+        updateMousePosition(mouseX, mouseY);
+    };
+    const handleMouseLeave = () => {
+        state.close();
+        setMouse({ x: 0, y: 0 });
+        setPosition({ x: 0, y: 0 });
+    };
+    const handleMouseMove = (e) => {
+        if (!isVisible)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+        updateMousePosition(mouseX, mouseY);
+    };
+    const handleTouchStart = (e) => {
+        const touch = e.touches[0];
+        const rect = e.currentTarget.getBoundingClientRect();
+        const mouseX = touch.clientX - rect.left;
+        const mouseY = touch.clientY - rect.top;
+        updateMousePosition(mouseX, mouseY);
+        state.open();
+    };
+    const handleTouchEnd = () => {
+        setTimeout(() => {
+            state.close();
+            setMouse({ x: 0, y: 0 });
+            setPosition({ x: 0, y: 0 });
+        }, 2000);
+    };
+    const handleClick = (e) => {
+        if (window.matchMedia("(hover: none)").matches) {
+            e.preventDefault();
+            if (isVisible) {
+                state.close();
+                setMouse({ x: 0, y: 0 });
+                setPosition({ x: 0, y: 0 });
+            }
+            else {
+                const rect = e.currentTarget.getBoundingClientRect();
+                const mouseX = e.clientX - rect.left;
+                const mouseY = e.clientY - rect.top;
+                updateMousePosition(mouseX, mouseY);
+                state.open();
+            }
+        }
+    };
+    // Recalcular posição quando altura mudar ou tooltip ficar visível
+    React.useEffect(() => {
+        if (isVisible && mouse.x !== 0 && mouse.y !== 0) {
+            // Usar requestAnimationFrame para garantir que o DOM foi atualizado
+            requestAnimationFrame(() => {
+                const newPosition = calculatePosition(mouse.x, mouse.y);
+                setPosition(newPosition);
+            });
+        }
+    }, [isVisible, height, mouse.x, mouse.y, calculatePosition]);
+    return (_jsxs("div", { ref: containerRef, className: cn("relative inline-block", containerClassName), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onClick: handleClick, children: [children, _jsx(AnimatePresence, { children: isVisible && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height, opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
+                        type: "spring",
+                        stiffness: 200,
+                        damping: 20,
+                    }, role: "tooltip", id: tooltipProps.id, className: cn("pointer-events-none absolute z-50 rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md", className), style: {
+                        top: position.y,
+                        left: position.x,
+                        minWidth: `${minWidth}px`,
+                        zIndex: 9999,
+                        overflow: "visible",
+                        wordWrap: "break-word",
+                        whiteSpace: "normal",
+                    }, children: _jsx("div", { ref: contentRef, className: "overflow-visible", style: {
+                            whiteSpace: "normal",
+                            wordWrap: "break-word",
+                            overflowWrap: "break-word",
+                        }, children: content }) }, String(isVisible))) })] }));
+}
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipPortal };

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

@@ -0,0 +1,29 @@
+import type { ComboBoxState } from "@react-stately/combobox";
+import type { ListState } from "@react-stately/list";
+import * as React from "react";
+export interface AutocompleteOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface AutocompleteContextValue {
+    state: ComboBoxState<unknown>;
+    listState: ListState<unknown>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    listBoxRef: React.RefObject<HTMLUListElement | null>;
+    popoverRef: React.RefObject<HTMLDivElement | null>;
+    inputProps: React.InputHTMLAttributes<HTMLInputElement>;
+    listBoxProps: React.HTMLAttributes<HTMLUListElement>;
+    popoverProps: React.HTMLAttributes<HTMLDivElement>;
+    handleClear: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    size: "sm" | "default" | "lg";
+    disabled: boolean;
+    maxListboxHeight: string;
+    isLoading: boolean;
+    emptyMessage: string;
+    options?: AutocompleteOption[];
+}
+declare const AutocompleteContext: React.Context<AutocompleteContextValue | null>;
+export declare const useAutocompleteContext: () => AutocompleteContextValue;
+export { AutocompleteContext };
+//# sourceMappingURL=autocomplete-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-context.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/autocomplete/autocomplete-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACnD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACrD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,UAAU,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACxD,YAAY,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;IACrD,YAAY,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACnD,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAChC;AAED,QAAA,MAAM,mBAAmB,gDAA6D,CAAC;AAEvF,eAAO,MAAM,sBAAsB,gCAMlC,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+const AutocompleteContext = React.createContext(null);
+export const useAutocompleteContext = () => {
+    const context = React.useContext(AutocompleteContext);
+    if (!context) {
+        throw new Error("Autocomplete components must be used within Autocomplete");
+    }
+    return context;
+};
+export { AutocompleteContext };

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"}