flikkui 0.2.0-beta.2 → 0.2.0-beta.5

package/dist/components/core/index.d.ts

@@ -21,6 +21,7 @@ export * from "./Metric";
 export * from "./Modal";
 export * from "./Pagination";
 export * from "./Popover";
+export * from "./Progress";
 export * from "./ProgressiveBlur";
 export * from "./Segmented";
 export * from "./Skeleton";
@@ -29,6 +30,7 @@ export * from "./Stepper";
 export * from "./Tabs";
 export * from "./Tooltip";
 export * from "./Tree";
+export * from "./Tag";
 export * from "./Alert";
 export * from "./Toast";
 export * from "./Notification";
@@ -41,5 +43,4 @@ export * from "./DragDrop";
 export * from "./Sortable";
 export * from "./NavItem";
 export * from "./Sidebar";
-export * from "./RetryBoundary";
 export * from "./OfflineIndicator";

package/dist/components/core/index.js

@@ -36,6 +36,7 @@ export { Modal } from './Modal/Modal.js';
 export { Pagination } from './Pagination/Pagination.js';
 export { Popover } from './Popover/Popover.js';
 export { PopoverContext, usePopoverContext } from './Popover/PopoverContext.js';
+export { Progress } from './Progress/Progress.js';
 export { default as ProgressiveBlur } from './ProgressiveBlur/ProgressiveBlur.js';
 export { Segmented } from './Segmented/Segmented.js';
 export { Skeleton } from './Skeleton/Skeleton.js';
@@ -50,6 +51,8 @@ export { Tooltip } from './Tooltip/Tooltip.js';
 export { baseTooltipVariants, getTooltipVariants, tooltipSpringConfig } from './Tooltip/Tooltip.animations.js';
 export { Tree } from './Tree/Tree.js';
 export { treeTheme } from './Tree/Tree.theme.js';
+export { Tag } from './Tag/Tag.js';
+export { tagTheme } from './Tag/Tag.theme.js';
 export { Alert } from './Alert/Alert.js';
 export { alertTheme } from './Alert/Alert.theme.js';
 export { Toast } from './Toast/Toast.js';
@@ -79,8 +82,6 @@ export { SidebarNavGroup } from './Sidebar/SidebarNavGroup.js';
 export { SidebarSubmenu } from './Sidebar/SidebarSubmenu.js';
 export { SidebarToggle } from './Sidebar/SidebarToggle.js';
 export { useSidebarContext } from './Sidebar/SidebarContext.js';
-export { RetryBoundary } from './RetryBoundary/RetryBoundary.js';
-export { retryBoundaryTheme } from './RetryBoundary/RetryBoundary.theme.js';
 export { OfflineIndicator } from './OfflineIndicator/OfflineIndicator.js';
 export { offlineIndicatorTheme } from './OfflineIndicator/OfflineIndicator.theme.js';
 export { CardHeader } from './Card/CardHeader.js';
@@ -88,7 +89,13 @@ export { CardTitle } from './Card/CardTitle.js';
 export { CardDescription } from './Card/CardDescription.js';
 export { CardContent } from './Card/CardContent.js';
 export { CardFooter } from './Card/CardFooter.js';
-export { TableActions } from './Table/components/TableActions/TableActions.js';
-export { TableActionsMenu } from './Table/components/TableActions/TableActionsMenu.js';
-export { TablePagination } from './Table/components/TablePagination/TablePagination.js';
+export { useTableColumns } from './Table/hooks/useTableColumns.js';
+export { useTableSelection } from './Table/hooks/useTableSelection.js';
+export { useTableExpansion } from './Table/hooks/useTableExpansion.js';
+export { useTablePagination } from './Table/hooks/useTablePagination.js';
+export { useTableFilter } from './Table/hooks/useTableFilter.js';
+export { TableActions } from './Table/TableActions.js';
+export { TableActionsMenu } from './Table/TableActionsMenu.js';
+export { TablePagination } from './Table/TablePagination.js';
+export { TableFilter } from './Table/TableFilter.js';
 export { AnimatePresence } from 'motion/react';

package/dist/components/effects/CustomCursor/CustomCursor.d.ts

@@ -32,17 +32,4 @@ export declare const CustomCursorProvider: React.ForwardRefExoticComponent<Omit<
  * ```
  */
 export declare const CustomCursor: React.ForwardRefExoticComponent<Omit<CustomCursorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-/**
- * CustomCursorFollow - Smooth following cursor element
- * Follows the main cursor with spring physics for smooth, laggy movement
- *
- * @example
- * ```tsx
- * <CustomCursorFollow align="bottom-right" sideOffset={20}>
- *   <div className="bg-white rounded-lg shadow-lg p-2">
- *     Tooltip content
- *   </div>
- * </CustomCursorFollow>
- * ```
- */
 export declare const CustomCursorFollow: React.ForwardRefExoticComponent<Omit<CustomCursorFollowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/CustomCursor/CustomCursor.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useMotionValue, AnimatePresence, motion, useReducedMotion, useSpring } from 'motion/react';
 import { PaperAirplaneIcon } from '@heroicons/react/20/solid';
 import { cn } from '../../../utils/cn.js';
+import { Avatar } from '../../core/Avatar/Avatar.js';
 import { customCursorVariants, reducedMotionSpringConfig, defaultSpringConfig } from './CustomCursor.animations.js';
 import { customCursorTheme } from './CustomCursor.theme.js';
 
@@ -189,10 +190,24 @@ const calculateOffset = (align, sideOffset, width, height) => {
  * </CustomCursorFollow>
  * ```
  */
-const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align = 'bottom-right', transition, className, style, ...props }, ref) => {
+/** Available colors for random selection in user variant */
+const userVariantColors = [
+    'primary',
+    'success',
+    'warning',
+    'danger',
+];
+const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align = 'bottom-right', transition, variant = 'default', avatar, name, color, className, style, ...props }, ref) => {
     const { cursorPos, isActive, cursorRef } = useCustomCursor();
     const cursorFollowRef = React.useRef(null);
     const shouldReduceMotion = useReducedMotion();
+    // Select random color for user variant if not provided (stable across renders)
+    const resolvedColor = React.useMemo(() => {
+        if (color)
+            return color;
+        const randomIndex = Math.floor(Math.random() * userVariantColors.length);
+        return userVariantColors[randomIndex];
+    }, [color]);
     React.useImperativeHandle(ref, () => cursorFollowRef.current);
     const x = useMotionValue(0);
     const y = useMotionValue(0);
@@ -293,7 +308,16 @@ const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align
         x,
         y,
     ]);
-    return (React.createElement(AnimatePresence, null, isActive && (React.createElement(motion.div, { ref: cursorFollowRef, "data-slot": "custom-cursor-follow", className: cn(customCursorTheme.baseStyle, customCursorTheme.cursorFollowStyle, className), style: { top: springY, left: springX, ...style }, variants: customCursorVariants, initial: "initial", animate: "animate", exit: "exit", role: "presentation", "aria-hidden": "true", ...props }, children))));
+    // Determine content based on variant
+    const renderContent = () => {
+        if (variant === 'user') {
+            return (React.createElement(React.Fragment, null,
+                avatar && React.createElement(Avatar, { src: avatar, alt: name || 'User', size: "xs" }),
+                name && (React.createElement("span", { className: "text-white text-xs font-medium whitespace-nowrap" }, name))));
+        }
+        return children;
+    };
+    return (React.createElement(AnimatePresence, null, isActive && (React.createElement(motion.div, { ref: cursorFollowRef, "data-slot": "custom-cursor-follow", className: cn(customCursorTheme.baseStyle, customCursorTheme.cursorFollowVariants[variant], variant === 'user' && customCursorTheme.cursorFollowColors[resolvedColor], className), style: { top: springY, left: springX, ...style }, variants: customCursorVariants, initial: "initial", animate: "animate", exit: "exit", role: "presentation", "aria-hidden": "true", ...props }, renderContent()))));
 });
 CustomCursorFollow.displayName = 'CustomCursorFollow';
 

package/dist/components/effects/CustomCursor/CustomCursor.theme.js

@@ -5,7 +5,18 @@
 const customCursorTheme = {
     baseStyle: 'pointer-events-none z-[9999] absolute transform-[translate(-50%,-50%)]',
     cursorStyle: 'transition-transform duration-150',
-    cursorFollowStyle: 'rounded-lg bg-white shadow-lg border border-[var(--color-border)] px-3 py-2 text-sm text-[var(--color-text-primary)]',
+    cursorFollowVariants: {
+        default: 'rounded-lg bg-white shadow-lg border border-[var(--color-border)] px-3 py-2 text-sm text-[var(--color-text-primary)]',
+        user: 'flex items-center gap-2 rounded-full pl-1 pr-3 py-1 shadow-xl',
+    },
+    cursorFollowColors: {
+        neutral: 'bg-[var(--color-background-quaternary)]',
+        dark: 'bg-[var(--color-text-primary)]',
+        primary: 'bg-[var(--color-primary)]',
+        success: 'bg-[var(--color-success)]',
+        warning: 'bg-[var(--color-warning)]',
+        danger: 'bg-[var(--color-danger)]',
+    },
     sizes: {
         sm: 'w-5 h-5',
         md: 'w-7 h-7',

package/dist/components/effects/CustomCursor/CustomCursor.types.d.ts

@@ -20,6 +20,10 @@ export type CustomCursorVariant = 'default' | 'glass';
  * Shape variants for the custom cursor
  */
 export type CustomCursorShape = 'circle' | 'arrow';
+/**
+ * Variant for CustomCursorFollow component
+ */
+export type CustomCursorFollowVariant = 'default' | 'user';
 /**
  * Context type for CustomCursor state management
  */
@@ -56,11 +60,18 @@ export interface CustomCursorProps extends HTMLMotionProps<'div'> {
  * Props for CustomCursorFollow component
  */
 export interface CustomCursorFollowProps extends HTMLMotionProps<'div'> {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     sideOffset?: number;
     align?: AlignType;
     transition?: SpringOptions;
+    variant?: CustomCursorFollowVariant;
     className?: string;
+    /** Avatar image URL (used with variant="user") */
+    avatar?: string;
+    /** User name to display (used with variant="user") */
+    name?: string;
+    /** Color for the user pill (used with variant="user"). If not provided, a random color is selected. */
+    color?: CustomCursorColor;
 }
 /**
  * Theme configuration for CustomCursor
@@ -69,6 +80,8 @@ export interface CustomCursorTheme {
     baseStyle: string;
     cursorStyle: string;
     cursorFollowStyle: string;
+    cursorFollowVariants: Record<CustomCursorFollowVariant, string>;
+    cursorFollowColors: Record<CustomCursorColor, string>;
     sizes: Record<CustomCursorSize, string>;
     colors: Record<CustomCursorColor, string>;
     variants: Record<CustomCursorVariant, string>;

package/dist/components/forms/Combobox/Combobox.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import type { ComboboxProps } from "./Combobox.types";
+/**
+ * Combobox Component
+ *
+ * An autocomplete input where the input IS the trigger.
+ * Type directly to filter options. Built on Select primitives.
+ *
+ * @example
+ * ```tsx
+ * <Combobox
+ *   options={[
+ *     { id: "1", label: "Apple", value: "apple" },
+ *     { id: "2", label: "Banana", value: "banana" },
+ *   ]}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   placeholder="Search fruits..."
+ * />
+ * ```
+ */
+export declare const Combobox: {
+    <T extends string | number = string>({ options, value, onChange, placeholder, label, helperText, size, state, clearable, iconStart, openOnFocus, filterFn, emptyMessage, creatable, onCreateOption, createLabel, required, name, className, wrapperClassName, inputClassName, dropdownClassName, theme: themeOverrides, portal, placement, offset, id, ...props }: ComboboxProps<T>): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/forms/Combobox/Combobox.js

@@ -0,0 +1,412 @@
+import React__default, { useId, useRef, useEffect, useCallback } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { createPortal } from 'react-dom';
+import { XMarkIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { comboboxTheme } from './Combobox.theme.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { createDropdownAnimations } from '../Select/Select.animations.js';
+import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
+import { cn } from '../../../utils/cn.js';
+import { SelectProvider, useSelectContext } from '../Select/Select.js';
+import '../Select/Select.theme.js';
+import { useSelectState } from '../Select/useSelectState.js';
+
+/**
+ * Hook to detect dark mode state from document
+ */
+const useDarkMode = () => {
+    const [isDark, setIsDark] = React__default.useState(false);
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const checkDarkMode = () => {
+            const hasDarkClass = document.documentElement.classList.contains("dark") ||
+                document.body.classList.contains("dark") ||
+                document.querySelector(".dark") !== null;
+            setIsDark(hasDarkClass);
+        };
+        checkDarkMode();
+        const observer = new MutationObserver(checkDarkMode);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return isDark;
+};
+/**
+ * Default filter function for options
+ */
+const defaultFilterFn = (option, inputValue) => {
+    return option.label.toLowerCase().includes(inputValue.toLowerCase());
+};
+const ComboboxOptions = ({ isOpen, onClose, triggerRef, portal, placement, offset, emptyMessage, className, }) => {
+    var _a;
+    const { filteredOptions, highlightedIndex, setHighlightedIndex, selectedValue, selectOption, optionsRef, theme, } = useSelectContext();
+    const isDarkMode = useDarkMode();
+    // Use enhanced dropdown positioning hook
+    const triggerWidth = ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+    const { position, cssVariables, contentRef, isFlipped } = useSelectPortal({
+        triggerRef,
+        isOpen,
+        placement,
+        offset,
+        estimatedWidth: triggerWidth,
+    });
+    const animations = createDropdownAnimations(isFlipped);
+    // Combine refs
+    const combinedRef = useCallback((el) => {
+        if (optionsRef &&
+            typeof optionsRef === "object" &&
+            "current" in optionsRef) {
+            optionsRef.current =
+                el;
+        }
+        if (contentRef &&
+            typeof contentRef === "object" &&
+            "current" in contentRef) {
+            contentRef.current = el;
+        }
+    }, [optionsRef, contentRef]);
+    // Handle click outside
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            const currentContentRef = portal
+                ? contentRef.current
+                : optionsRef.current;
+            if (currentContentRef &&
+                !currentContentRef.contains(event.target) &&
+                triggerRef.current &&
+                !triggerRef.current.contains(event.target)) {
+                onClose();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isOpen, onClose, portal, contentRef, optionsRef, triggerRef]);
+    // Theme can come from Select's theme (optionsContainerStyle) or Combobox's theme (dropdownStyle)
+    const dropdownStyle = theme.dropdownStyle ||
+        theme.optionsContainerStyle ||
+        comboboxTheme.dropdownStyle;
+    const optionStyle = theme.optionStyle || comboboxTheme.optionStyle;
+    const selectedOptionStyle = theme.selectedOptionStyle || comboboxTheme.selectedOptionStyle;
+    const highlightedOptionStyle = theme.highlightedOptionStyle || comboboxTheme.highlightedOptionStyle;
+    const disabledOptionStyle = theme.disabledOptionStyle || comboboxTheme.disabledOptionStyle;
+    const createOptionStyleTheme = theme.createOptionStyle || comboboxTheme.createOptionStyle;
+    const emptyMessageStyle = comboboxTheme.emptyMessageStyle;
+    const optionsContent = (React__default.createElement(AnimatePresence, { mode: "wait" }, isOpen && (React__default.createElement(motion.div, { ref: combinedRef, role: "listbox", className: cn(dropdownStyle, className), style: {
+            ...cssVariables,
+            overscrollBehavior: "contain",
+            ...(portal
+                ? {
+                    top: `${position.top}px`,
+                    left: `${position.left}px`,
+                    width: `${position.width}px`,
+                }
+                : {}),
+        }, tabIndex: -1, variants: animations, initial: "initial", animate: "visible", exit: "exit" }, filteredOptions.length === 0 ? (React__default.createElement("div", { className: emptyMessageStyle }, emptyMessage)) : (filteredOptions.map((option, index) => {
+        const isSelected = option.value === selectedValue;
+        const isHighlighted = index === highlightedIndex;
+        const isCreateOption = option.id === "__create__";
+        return (React__default.createElement("div", { key: option.id, role: "option", "aria-selected": isSelected, "aria-disabled": option.disabled, "data-option-index": index, className: cn(optionStyle, isSelected && selectedOptionStyle, isHighlighted && highlightedOptionStyle, option.disabled && disabledOptionStyle, isCreateOption && createOptionStyleTheme), onMouseEnter: () => !option.disabled && setHighlightedIndex(index), onClick: () => {
+                if (!option.disabled) {
+                    selectOption(option.value, isCreateOption);
+                    onClose();
+                }
+            } }, isCreateOption ? (React__default.createElement("span", { className: "flex items-center gap-1" },
+            React__default.createElement(PlusIcon, { className: "size-4 shrink-0", strokeWidth: 2 }),
+            React__default.createElement("span", { className: "block truncate" }, option.label))) : (React__default.createElement("span", { className: "block truncate" }, option.label))));
+    }))))));
+    if (portal && typeof document !== "undefined") {
+        return createPortal(React__default.createElement("div", { className: isDarkMode ? "dark" : undefined }, optionsContent), document.body);
+    }
+    return optionsContent;
+};
+// ============================================================================
+// Main Combobox Component
+// ============================================================================
+/**
+ * Combobox Component
+ *
+ * An autocomplete input where the input IS the trigger.
+ * Type directly to filter options. Built on Select primitives.
+ *
+ * @example
+ * ```tsx
+ * <Combobox
+ *   options={[
+ *     { id: "1", label: "Apple", value: "apple" },
+ *     { id: "2", label: "Banana", value: "banana" },
+ *   ]}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   placeholder="Search fruits..."
+ * />
+ * ```
+ */
+const Combobox = ({ options, value, onChange, placeholder = "Search...", label, helperText, size = "md", state = "default", clearable = true, iconStart, openOnFocus = true, filterFn = defaultFilterFn, emptyMessage = "No results found", creatable = false, onCreateOption, createLabel, required = false, name, className, wrapperClassName, inputClassName, dropdownClassName, theme: themeOverrides, portal = true, placement = "bottom-start", offset = 8, id, ...props }) => {
+    var _a;
+    // Merge theme
+    const theme = { ...comboboxTheme, ...(themeOverrides || {}) };
+    // Generate unique ID
+    const generatedId = useId();
+    const comboboxId = id || `combobox-${generatedId}`;
+    const listboxId = `${comboboxId}-listbox`;
+    // Refs
+    const inputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const justSelectedRef = useRef(false);
+    // Convert ComboboxOption to SelectOption format
+    const selectOptions = options.map((opt) => ({
+        id: opt.id,
+        label: opt.label,
+        value: opt.value,
+        disabled: opt.disabled,
+    }));
+    // Custom filter wrapper - filter options before passing to useSelectState
+    // This allows us to use the custom filterFn prop
+    selectOptions.filter((opt) => {
+        // If there's no search value in the internal state yet, return all
+        // We'll handle filtering via searchValue from selectState
+        return true; // Let useSelectState handle filtering
+    });
+    // Use the shared select state hook
+    const selectState = useSelectState({
+        options: selectOptions,
+        value,
+        onChange: (newValue) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        },
+        searchable: true, // Combobox is always searchable
+        creatable,
+        onCreateOption,
+        createLabel,
+    });
+    const { isOpen, setIsOpen, searchValue, setSearchValue, highlightedIndex, setHighlightedIndex, filteredOptions: baseFilteredOptions, selectedOption, selectOption, } = selectState;
+    // Apply custom filter function if provided (override the default filtering)
+    const customFilteredOptions = React__default.useMemo(() => {
+        if (!searchValue)
+            return baseFilteredOptions;
+        // Re-filter using custom filterFn
+        const refiltered = selectOptions.filter((option) => filterFn(option, searchValue));
+        // Check if we should show create option
+        const shouldShowCreate = creatable &&
+            searchValue.trim() !== "" &&
+            !refiltered.some((option) => option.label.toLowerCase() === searchValue.toLowerCase());
+        if (shouldShowCreate) {
+            const createOptionLabel = typeof createLabel === "function"
+                ? createLabel(searchValue)
+                : createLabel || `Create "${searchValue}"`;
+            return [
+                {
+                    id: "__create__",
+                    label: createOptionLabel,
+                    value: searchValue,
+                },
+                ...refiltered,
+            ];
+        }
+        return refiltered;
+    }, [
+        searchValue,
+        selectOptions,
+        filterFn,
+        creatable,
+        createLabel,
+        baseFilteredOptions,
+    ]);
+    // Derived state
+    const isDisabled = state === "disabled";
+    const isInvalid = state === "invalid";
+    // Sync input value with selected value when closed
+    useEffect(() => {
+        if (!isOpen && selectedOption) {
+            setSearchValue(selectedOption.label);
+        }
+        else if (!isOpen && !value) {
+            setSearchValue("");
+        }
+    }, [isOpen, selectedOption, value, setSearchValue]);
+    // Reset highlighted index when options change
+    useEffect(() => {
+        setHighlightedIndex(-1);
+    }, [customFilteredOptions.length, searchValue, setHighlightedIndex]);
+    // Handle clear
+    const handleClear = useCallback((e) => {
+        var _a;
+        e.stopPropagation();
+        e.preventDefault();
+        onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+        setSearchValue("");
+        setIsOpen(false);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [onChange, setSearchValue, setIsOpen]);
+    // Handle input change
+    const handleInputChange = (e) => {
+        const newValue = e.target.value;
+        setSearchValue(newValue);
+        // Open dropdown when typing
+        if (!isOpen && newValue) {
+            setIsOpen(true);
+        }
+        // If input is cleared, clear the value
+        if (!newValue && value !== undefined) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+        }
+    };
+    // Handle input focus
+    const handleInputFocus = () => {
+        // Skip reopening if we just selected an option
+        if (justSelectedRef.current) {
+            justSelectedRef.current = false;
+            return;
+        }
+        if (openOnFocus && !isDisabled) {
+            setIsOpen(true);
+        }
+    };
+    // Handle option selection
+    const handleSelectOption = useCallback((optionValue, isCreateAction = false) => {
+        var _a;
+        selectOption(optionValue, isCreateAction);
+        // Find the selected option to get its label
+        const selected = customFilteredOptions.find((opt) => opt.value === optionValue);
+        if (selected) {
+            setSearchValue(selected.label);
+        }
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+        // Prevent reopening on focus after selection
+        justSelectedRef.current = true;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [
+        selectOption,
+        customFilteredOptions,
+        setSearchValue,
+        setIsOpen,
+        setHighlightedIndex,
+    ]);
+    // Handle keyboard navigation
+    const handleKeyDown = (event) => {
+        if (isDisabled)
+            return;
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                if (!isOpen) {
+                    setIsOpen(true);
+                }
+                else {
+                    setHighlightedIndex((prev) => prev >= customFilteredOptions.length - 1 ? 0 : prev + 1);
+                }
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                if (!isOpen) {
+                    setIsOpen(true);
+                }
+                else {
+                    setHighlightedIndex((prev) => prev <= 0 ? customFilteredOptions.length - 1 : prev - 1);
+                }
+                break;
+            case "Enter":
+                event.preventDefault();
+                if (isOpen &&
+                    highlightedIndex >= 0 &&
+                    highlightedIndex < customFilteredOptions.length) {
+                    const highlightedOption = customFilteredOptions[highlightedIndex];
+                    const isCreateOption = highlightedOption.id === "__create__";
+                    handleSelectOption(highlightedOption.value, isCreateOption);
+                }
+                else if (!isOpen) {
+                    setIsOpen(true);
+                }
+                break;
+            case "Escape":
+                event.preventDefault();
+                if (isOpen) {
+                    setIsOpen(false);
+                    // Restore selected value
+                    if (selectedOption) {
+                        setSearchValue(selectedOption.label);
+                    }
+                    else {
+                        setSearchValue("");
+                    }
+                }
+                break;
+            case "Tab":
+                if (isOpen) {
+                    setIsOpen(false);
+                    // Restore selected value
+                    if (selectedOption) {
+                        setSearchValue(selectedOption.label);
+                    }
+                    else {
+                        setSearchValue("");
+                    }
+                }
+                break;
+        }
+    };
+    // Scroll highlighted option into view
+    useEffect(() => {
+        if (highlightedIndex >= 0 && isOpen) {
+            const optionElement = document.querySelector(`[data-option-index="${highlightedIndex}"]`);
+            if (optionElement) {
+                optionElement.scrollIntoView({ block: "nearest" });
+            }
+        }
+    }, [highlightedIndex, isOpen]);
+    // Theme classes
+    const containerClasses = theme.containerStyle;
+    const inputGroupClasses = theme.inputGroupStyle;
+    const inputClasses = theme.inputStyle;
+    const sizeClasses = theme.sizes[size];
+    const stateClasses = theme.states[state];
+    const helperTextClasses = theme.helperTextStyle;
+    const helperTextStateClasses = ((_a = theme.helperTextStates) === null || _a === void 0 ? void 0 : _a[state]) || "";
+    // State class for CSS selectors
+    const stateClass = isInvalid
+        ? "state-invalid"
+        : isDisabled
+            ? "state-disabled"
+            : "state-default";
+    // Show clear button
+    const showClearButton = clearable && value !== undefined && !isDisabled;
+    // Icon padding
+    const hasLeftIcon = Boolean(iconStart);
+    const iconStartPadding = hasLeftIcon ? theme.iconPadding.left : "";
+    // Create a modified selectState for the provider with our custom filtered options
+    const modifiedSelectState = {
+        ...selectState,
+        filteredOptions: customFilteredOptions,
+        selectOption: handleSelectOption,
+    };
+    return (React__default.createElement(SelectProvider, { selectState: modifiedSelectState, size: size, componentState: state, theme: theme, searchable: true, enableTypeahead: false },
+        React__default.createElement("div", { className: cn("relative", containerClasses, stateClass, wrapperClassName), ...props },
+            label && (React__default.createElement(FormLabel, { htmlFor: comboboxId, required: required }, label)),
+            React__default.createElement("div", { ref: wrapperRef, className: theme.wrapperStyle },
+                React__default.createElement("div", { className: cn(inputGroupClasses, stateClasses, className) },
+                    React__default.createElement("div", { className: "relative flex-1" },
+                        React__default.createElement("input", { ref: inputRef, id: comboboxId, type: "text", role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-activedescendant": highlightedIndex >= 0 &&
+                                customFilteredOptions[highlightedIndex]
+                                ? `${comboboxId}-option-${customFilteredOptions[highlightedIndex].id}`
+                                : undefined, "aria-autocomplete": "list", "aria-invalid": isInvalid, autoComplete: "off", className: cn(inputClasses, sizeClasses, iconStartPadding, showClearButton && "pr-8", inputClassName), value: searchValue, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isDisabled, required: required }),
+                        hasLeftIcon && (React__default.createElement("div", { className: theme.iconStartStyle }, iconStart)),
+                        showClearButton && (React__default.createElement("button", { type: "button", className: theme.clearButtonStyle, onClick: handleClear, "aria-label": "Clear selection", tabIndex: -1 },
+                            React__default.createElement(XMarkIcon, { className: theme.clearIconStyle }))))),
+                React__default.createElement(ComboboxOptions, { isOpen: isOpen, onClose: () => setIsOpen(false), triggerRef: wrapperRef, portal: portal, placement: placement, offset: offset, emptyMessage: emptyMessage, className: dropdownClassName })),
+            helperText && (React__default.createElement("p", { className: cn(helperTextClasses, helperTextStateClasses) }, helperText)),
+            name && (React__default.createElement("input", { type: "hidden", name: name, value: value !== undefined ? String(value) : "" })))));
+};
+Combobox.displayName = "Combobox";
+
+export { Combobox };

package/dist/components/forms/Combobox/Combobox.theme.d.ts

@@ -0,0 +1,6 @@
+import { ComboboxTheme } from "./Combobox.types";
+/**
+ * Default theme for the Combobox component
+ * Extends the common forms base theme
+ */
+export declare const comboboxTheme: ComboboxTheme;