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

package/dist/components/forms/Select/useSelectState.d.ts

@@ -0,0 +1,66 @@
+import type { SelectOption } from "./Select.types";
+/**
+ * Props for the useSelectState hook
+ */
+export interface UseSelectStateProps<T = any> {
+    /** Array of available options */
+    options: SelectOption<T>[];
+    /** Currently selected value (controlled) */
+    value?: T;
+    /** Callback when selection changes */
+    onChange?: (value: T) => void;
+    /** Whether filtering/search is enabled */
+    searchable?: boolean;
+    /** Whether new options can be created */
+    creatable?: boolean;
+    /** Callback when creating a new option */
+    onCreateOption?: (inputValue: string) => void;
+    /** Label template for create option */
+    createLabel?: string | ((inputValue: string) => string);
+    /** Whether typeahead is enabled (default: true) */
+    enableTypeahead?: boolean;
+}
+/**
+ * Return type for the useSelectState hook
+ */
+export interface UseSelectStateReturn<T = any> {
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    highlightedIndex: number;
+    setHighlightedIndex: React.Dispatch<React.SetStateAction<number>>;
+    searchValue: string;
+    setSearchValue: React.Dispatch<React.SetStateAction<string>>;
+    selectedValue: T | undefined;
+    setSelectedValue: React.Dispatch<React.SetStateAction<T | undefined>>;
+    typeaheadValue: string;
+    setTypeaheadValue: React.Dispatch<React.SetStateAction<string>>;
+    typeaheadTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;
+    filteredOptions: SelectOption<T>[];
+    selectedOption: SelectOption<T> | undefined;
+    hasCreateOption: boolean;
+    selectOption: (value: T, isCreateAction?: boolean) => void;
+    getOptionByValue: (searchValue: T) => SelectOption<T> | undefined;
+    triggerRef: React.MutableRefObject<HTMLElement | null>;
+    optionsRef: React.MutableRefObject<HTMLDivElement | null>;
+    options: SelectOption<T>[];
+}
+/**
+ * useSelectState
+ *
+ * A headless hook that manages all state for select/dropdown components.
+ * This hook can be used by Select, Combobox, MultiSelect, TagInput, etc.
+ *
+ * @example
+ * ```tsx
+ * const selectState = useSelectState({
+ *   options,
+ *   value,
+ *   onChange,
+ *   searchable: true,
+ * });
+ *
+ * // Use in your component:
+ * const { isOpen, setIsOpen, filteredOptions, selectOption } = selectState;
+ * ```
+ */
+export declare function useSelectState<T = any>({ options, value, onChange, searchable, creatable, onCreateOption, createLabel, enableTypeahead, }: UseSelectStateProps<T>): UseSelectStateReturn<T>;

package/dist/components/forms/Select/useSelectState.js

@@ -0,0 +1,134 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+
+/**
+ * useSelectState
+ *
+ * A headless hook that manages all state for select/dropdown components.
+ * This hook can be used by Select, Combobox, MultiSelect, TagInput, etc.
+ *
+ * @example
+ * ```tsx
+ * const selectState = useSelectState({
+ *   options,
+ *   value,
+ *   onChange,
+ *   searchable: true,
+ * });
+ *
+ * // Use in your component:
+ * const { isOpen, setIsOpen, filteredOptions, selectOption } = selectState;
+ * ```
+ */
+function useSelectState({ options = [], value, onChange, searchable = false, creatable = false, onCreateOption, createLabel, enableTypeahead = true, }) {
+    // Core state
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValue, setSelectedValue] = useState(value);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [searchValue, setSearchValue] = useState("");
+    // Typeahead state
+    const [typeaheadValue, setTypeaheadValue] = useState("");
+    const typeaheadTimeoutRef = useRef(null);
+    // Refs for trigger and options container
+    const triggerRef = useRef(null);
+    const optionsRef = useRef(null);
+    // Sync internal state with controlled value
+    useEffect(() => {
+        setSelectedValue(value);
+    }, [value]);
+    // Get option by value
+    const getOptionByValue = useCallback((searchVal) => {
+        return options.find((option) => option.value === searchVal);
+    }, [options]);
+    // Selected option derived from selectedValue
+    const selectedOption = useMemo(() => {
+        return selectedValue !== undefined
+            ? getOptionByValue(selectedValue)
+            : undefined;
+    }, [selectedValue, getOptionByValue]);
+    // Filter options based on search query
+    const baseFilteredOptions = useMemo(() => {
+        if (!searchValue)
+            return options;
+        return options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase()));
+    }, [options, searchValue]);
+    // Check if we should show the create option
+    const hasCreateOption = useMemo(() => {
+        return (creatable &&
+            searchable &&
+            searchValue.trim() !== "" &&
+            !baseFilteredOptions.some((option) => option.label.toLowerCase() === searchValue.toLowerCase()));
+    }, [creatable, searchable, searchValue, baseFilteredOptions]);
+    // Final filtered options with create option if applicable
+    const filteredOptions = useMemo(() => {
+        if (!hasCreateOption)
+            return baseFilteredOptions;
+        const createOptionLabel = typeof createLabel === "function"
+            ? createLabel(searchValue)
+            : createLabel || `Create "${searchValue}"`;
+        return [
+            {
+                id: "__create__",
+                label: createOptionLabel,
+                value: searchValue,
+            },
+            ...baseFilteredOptions,
+        ];
+    }, [hasCreateOption, baseFilteredOptions, searchValue, createLabel]);
+    // Select an option
+    const selectOption = useCallback((newValue, isCreateAction = false) => {
+        // Handle create action callback
+        if (isCreateAction && onCreateOption) {
+            onCreateOption(String(newValue));
+        }
+        // Update state if value changed
+        if (newValue !== selectedValue) {
+            setSelectedValue(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }
+        // Close and reset
+        setIsOpen(false);
+        setSearchValue("");
+    }, [selectedValue, onChange, onCreateOption]);
+    // Reset state when closing
+    useEffect(() => {
+        if (!isOpen) {
+            setSearchValue("");
+            setHighlightedIndex(-1);
+            setTypeaheadValue("");
+            // Clear any pending typeahead timeout
+            if (typeaheadTimeoutRef.current) {
+                clearTimeout(typeaheadTimeoutRef.current);
+                typeaheadTimeoutRef.current = null;
+            }
+        }
+    }, [isOpen]);
+    return {
+        // Core state
+        isOpen,
+        setIsOpen,
+        highlightedIndex,
+        setHighlightedIndex,
+        searchValue,
+        setSearchValue,
+        selectedValue,
+        setSelectedValue,
+        // Typeahead state
+        typeaheadValue,
+        setTypeaheadValue,
+        typeaheadTimeoutRef,
+        // Derived state
+        filteredOptions,
+        selectedOption,
+        hasCreateOption,
+        // Actions
+        selectOption,
+        getOptionByValue,
+        // Refs
+        triggerRef,
+        optionsRef,
+        // Original options
+        options,
+    };
+}
+
+export { useSelectState };

package/dist/components/forms/SelectExpand/SelectExpand.animations.d.ts

@@ -0,0 +1,20 @@
+import type { Variants } from "motion/react";
+/**
+ * Container expand/collapse animation variants
+ * Uses scale animation from center with spring physics
+ */
+export declare const containerAnimations: Variants;
+/**
+ * Options panel content animation variants
+ * Scale and fade from center with spring physics
+ */
+export declare const optionsPanelAnimations: Variants;
+/**
+ * Chevron rotation animation variants with spring
+ */
+export declare const chevronAnimations: Variants;
+/**
+ * Individual option animation for staggered reveal
+ * Can be used with staggerChildren on parent
+ */
+export declare const optionAnimations: Variants;

package/dist/components/forms/SelectExpand/SelectExpand.animations.js

@@ -0,0 +1,74 @@
+/**
+ * Spring configuration for smooth, natural animations
+ */
+const springConfig = {
+    type: "spring",
+    stiffness: 400,
+    damping: 30,
+    mass: 1,
+};
+/**
+ * Container expand/collapse animation variants
+ * Uses scale animation from center with spring physics
+ */
+const containerAnimations = {
+    collapsed: {
+        scaleY: 1,
+        transition: springConfig,
+    },
+    expanded: {
+        scaleY: 1,
+        transition: springConfig,
+    },
+};
+/**
+ * Options panel content animation variants
+ * Scale and fade from center with spring physics
+ */
+const optionsPanelAnimations = {
+    collapsed: {
+        opacity: 0,
+        scaleY: 0.8,
+        scaleX: 0.98,
+        transition: {
+            type: "spring",
+            stiffness: 500,
+            damping: 30,
+            mass: 0.8,
+        },
+    },
+    expanded: {
+        opacity: 1,
+        scaleY: 1,
+        scaleX: 1,
+        transition: {
+            type: "spring",
+            stiffness: 400,
+            damping: 25,
+            mass: 0.8,
+        },
+    },
+};
+/**
+ * Chevron rotation animation variants with spring
+ */
+const chevronAnimations = {
+    collapsed: {
+        rotate: 0,
+        transition: {
+            type: "spring",
+            stiffness: 400,
+            damping: 25,
+        },
+    },
+    expanded: {
+        rotate: 180,
+        transition: {
+            type: "spring",
+            stiffness: 400,
+            damping: 25,
+        },
+    },
+};
+
+export { chevronAnimations, containerAnimations, optionsPanelAnimations };

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { SelectExpandProps } from "./SelectExpand.types";
+/**
+ * SelectExpand component - an in-place expanding select
+ * Instead of a dropdown, options expand below the trigger with smooth animation
+ *
+ * @template T - The type of the option values
+ */
+export declare const SelectExpand: <T extends string | number = string>({ options, value, onChange, placeholder, multiple, searchable, searchPlaceholder, size, maxHeight, disabled, state, label, helperText, iconStart, iconEnd, id, name, required, className, wrapperClassName, theme: themeOverrides, ...restProps }: SelectExpandProps<T>) => React.JSX.Element;

package/dist/components/forms/SelectExpand/SelectExpand.js

@@ -0,0 +1,223 @@
+import React__default, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { ChevronDownIcon, MagnifyingGlassIcon, CheckIcon } from '@heroicons/react/24/outline';
+import { selectExpandTheme } from './SelectExpand.theme.js';
+import { containerAnimations, chevronAnimations, optionsPanelAnimations } from './SelectExpand.animations.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * SelectExpand component - an in-place expanding select
+ * Instead of a dropdown, options expand below the trigger with smooth animation
+ *
+ * @template T - The type of the option values
+ */
+const SelectExpand = ({ options, value, onChange, placeholder = "Select an option", multiple = false, searchable = false, searchPlaceholder = "Search...", size = "md", maxHeight = "20rem", disabled = false, state = "default", label, helperText, iconStart, iconEnd, id, name, required = false, className, wrapperClassName, theme: themeOverrides, ...restProps }) => {
+    var _a;
+    // Merge theme with overrides
+    const theme = {
+        ...selectExpandTheme,
+        ...themeOverrides,
+    };
+    // State
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    // Refs
+    const containerRef = useRef(null);
+    const triggerRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const optionsListRef = useRef(null);
+    // Determine if disabled
+    const isDisabled = disabled || state === "disabled";
+    // Generate unique ID
+    const componentId = id || `select-expand-${Math.random().toString(36).substring(2, 9)}`;
+    // Parse value to array for consistent handling
+    const selectedValues = useMemo(() => {
+        if (value === undefined || value === null)
+            return [];
+        return Array.isArray(value) ? value : [value];
+    }, [value]);
+    // Filter options based on search query
+    const filteredOptions = useMemo(() => {
+        if (!searchQuery.trim())
+            return options;
+        const query = searchQuery.toLowerCase();
+        return options.filter((option) => {
+            var _a, _b;
+            return option.label.toLowerCase().includes(query) ||
+                ((_b = (_a = option.description) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(query)) !== null && _b !== void 0 ? _b : false);
+        });
+    }, [options, searchQuery]);
+    // Get display value for trigger
+    const displayValue = useMemo(() => {
+        var _a, _b;
+        if (selectedValues.length === 0)
+            return null;
+        if (multiple) {
+            if (selectedValues.length === 1) {
+                const option = options.find((o) => o.value === selectedValues[0]);
+                return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : String(selectedValues[0]);
+            }
+            return `${selectedValues.length} selected`;
+        }
+        const option = options.find((o) => o.value === selectedValues[0]);
+        return (_b = option === null || option === void 0 ? void 0 : option.label) !== null && _b !== void 0 ? _b : String(selectedValues[0]);
+    }, [selectedValues, options, multiple]);
+    // Check if a value is selected
+    const isSelected = useCallback((optionValue) => {
+        return selectedValues.includes(optionValue);
+    }, [selectedValues]);
+    // Handle option selection
+    const handleSelect = useCallback((optionValue) => {
+        if (!onChange)
+            return;
+        if (multiple) {
+            const newValues = isSelected(optionValue)
+                ? selectedValues.filter((v) => v !== optionValue)
+                : [...selectedValues, optionValue];
+            onChange(newValues);
+        }
+        else {
+            onChange(optionValue);
+            setIsOpen(false);
+        }
+    }, [multiple, selectedValues, onChange, isSelected]);
+    // Handle trigger click
+    const handleTriggerClick = () => {
+        if (isDisabled)
+            return;
+        setIsOpen((prev) => !prev);
+    };
+    // Handle click outside
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isOpen]);
+    // Focus search input when opening
+    useEffect(() => {
+        if (isOpen && searchable && searchInputRef.current) {
+            // Small delay to allow animation to start
+            const timer = setTimeout(() => {
+                var _a;
+                (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 50);
+            return () => clearTimeout(timer);
+        }
+    }, [isOpen, searchable]);
+    // Reset search and highlighted index when closing
+    useEffect(() => {
+        if (!isOpen) {
+            setSearchQuery("");
+            setHighlightedIndex(-1);
+        }
+    }, [isOpen]);
+    // Handle keyboard navigation
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (event) => {
+            var _a;
+            switch (event.key) {
+                case "Escape":
+                    event.preventDefault();
+                    setIsOpen(false);
+                    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    break;
+                case "Tab":
+                    setIsOpen(false);
+                    break;
+                case "ArrowDown":
+                    event.preventDefault();
+                    setHighlightedIndex((prev) => prev >= filteredOptions.length - 1 ? 0 : prev + 1);
+                    break;
+                case "ArrowUp":
+                    event.preventDefault();
+                    setHighlightedIndex((prev) => prev <= 0 ? filteredOptions.length - 1 : prev - 1);
+                    break;
+                case "Enter":
+                case " ":
+                    if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
+                        event.preventDefault();
+                        const option = filteredOptions[highlightedIndex];
+                        if (!option.disabled) {
+                            handleSelect(option.value);
+                        }
+                    }
+                    break;
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, highlightedIndex, filteredOptions, handleSelect]);
+    // Scroll highlighted option into view
+    useEffect(() => {
+        if (highlightedIndex >= 0 && optionsListRef.current) {
+            const option = optionsListRef.current.querySelector(`[data-option-index="${highlightedIndex}"]`);
+            if (option) {
+                option.scrollIntoView({ block: "nearest" });
+            }
+        }
+    }, [highlightedIndex]);
+    // Calculate max height value
+    const maxHeightValue = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+    // CSS variable for collapsed height based on size
+    const collapsedHeightMap = {
+        sm: "var(--form-min-h-sm)",
+        md: "var(--form-min-h-md)",
+        lg: "var(--form-min-h-lg)",
+    };
+    return (React__default.createElement("div", { className: cn(theme.wrapperStyle, isOpen && "z-[100]", wrapperClassName), ...restProps },
+        label && (React__default.createElement(FormLabel, { htmlFor: componentId, required: required }, label)),
+        React__default.createElement("div", { className: "invisible", "aria-hidden": "true", style: { height: collapsedHeightMap[size] } }),
+        React__default.createElement(motion.div, { ref: containerRef, className: cn(theme.containerStyle, isOpen && theme.containerExpandedStyle, isDisabled && theme.disabledStyle), style: {
+                "--collapsed-height": collapsedHeightMap[size],
+            }, variants: containerAnimations, initial: "collapsed", animate: isOpen ? "expanded" : "collapsed" },
+            React__default.createElement("button", { ref: triggerRef, id: componentId, type: "button", className: cn(theme.triggerStyle, (_a = theme.triggerSizes) === null || _a === void 0 ? void 0 : _a[size], className), onClick: handleTriggerClick, disabled: isDisabled, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": `${componentId}-options` },
+                iconStart && (React__default.createElement("span", { className: cn(theme.iconStartStyle, "mr-2") }, iconStart)),
+                React__default.createElement("span", { className: cn("flex-1 truncate text-left", displayValue ? theme.valueStyle : theme.placeholderStyle) }, displayValue || placeholder),
+                React__default.createElement(motion.span, { className: theme.iconEndStyle, variants: chevronAnimations, initial: "collapsed", animate: isOpen ? "expanded" : "collapsed" }, iconEnd || React__default.createElement(ChevronDownIcon, { className: "size-4" }))),
+            React__default.createElement(AnimatePresence, null, isOpen && (React__default.createElement(motion.div, { className: theme.optionsPanelStyle, style: { transformOrigin: "top center" }, variants: optionsPanelAnimations, initial: "collapsed", animate: "expanded", exit: "collapsed" },
+                searchable && (React__default.createElement("div", { className: theme.searchContainerStyle },
+                    React__default.createElement("div", { className: "flex items-center gap-2" },
+                        React__default.createElement(MagnifyingGlassIcon, { className: "size-4 shrink-0 text-[var(--color-text-muted)]" }),
+                        React__default.createElement("input", { ref: searchInputRef, type: "text", className: theme.searchInputStyle, placeholder: searchPlaceholder, value: searchQuery, onChange: (e) => {
+                                setSearchQuery(e.target.value);
+                                setHighlightedIndex(-1);
+                            }, "aria-label": "Search options" })))),
+                React__default.createElement("div", { ref: optionsListRef, id: `${componentId}-options`, role: "listbox", "aria-multiselectable": multiple, className: theme.optionsListStyle, style: { maxHeight: maxHeightValue } }, filteredOptions.length === 0 ? (React__default.createElement("div", { className: "py-3 px-3 text-center text-sm text-[var(--color-text-muted)]" }, "No options found")) : (filteredOptions.map((option, index) => {
+                    const optionSelected = isSelected(option.value);
+                    const isHighlighted = index === highlightedIndex;
+                    return (React__default.createElement("div", { key: option.id, role: "option", "aria-selected": optionSelected, "aria-disabled": option.disabled, "data-option-index": index, className: cn(theme.optionStyle, theme.optionHoverStyle, optionSelected && !multiple && theme.optionSelectedStyle, option.disabled && theme.optionDisabledStyle, isHighlighted &&
+                            "bg-[var(--color-primary-50)]/50 text-[var(--color-primary)] dark:bg-[var(--color-primary-900)]/20"), onClick: () => {
+                            if (!option.disabled) {
+                                handleSelect(option.value);
+                            }
+                        }, onMouseEnter: () => {
+                            if (!option.disabled) {
+                                setHighlightedIndex(index);
+                            }
+                        } },
+                        multiple && (React__default.createElement("span", { className: cn(theme.checkboxStyle, optionSelected && theme.checkboxCheckedStyle) }, optionSelected && (React__default.createElement(CheckIcon, { className: "size-3", strokeWidth: 3 })))),
+                        React__default.createElement("div", { className: "flex-1 min-w-0" },
+                            React__default.createElement("span", { className: "block truncate" }, option.label),
+                            option.description && (React__default.createElement("span", { className: "block text-xs text-[var(--color-text-muted)] truncate" }, option.description))),
+                        !multiple && optionSelected && (React__default.createElement(CheckIcon, { className: "size-4 shrink-0 text-[var(--color-primary)]", strokeWidth: 2 }))));
+                }))))))),
+        helperText && (React__default.createElement("p", { className: theme.helperTextStyle }, helperText)),
+        name && (React__default.createElement("input", { type: "hidden", name: name, value: multiple
+                ? selectedValues.join(",")
+                : selectedValues[0] !== undefined
+                    ? String(selectedValues[0])
+                    : "" }))));
+};
+
+export { SelectExpand };

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

@@ -0,0 +1,5 @@
+import { SelectExpandTheme } from "./SelectExpand.types";
+/**
+ * Default theme for the SelectExpand component
+ */
+export declare const selectExpandTheme: SelectExpandTheme;

package/dist/components/forms/SelectExpand/SelectExpand.theme.js

@@ -0,0 +1,74 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * Default theme for the SelectExpand component
+ */
+const selectExpandTheme = {
+    // Wrapper style - maintains layout footprint
+    wrapperStyle: "relative inline-block w-full",
+    // Container style - the animated expanding container
+    containerStyle: "absolute top-0 left-0 w-full z-[100] overflow-hidden rounded-[var(--form-rounded)] " +
+        "border border-[var(--color-border)] bg-white transition-shadow " +
+        "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)]",
+    // Container expanded state
+    containerExpandedStyle: "ring-2 ring-[var(--color-primary)] border-[var(--color-primary)] shadow-lg " +
+        "dark:ring-[var(--color-primary-500)] dark:border-[var(--color-primary-500)]",
+    // Trigger button style
+    triggerStyle: "w-full flex items-center justify-between cursor-pointer bg-transparent " +
+        "text-left focus:outline-none",
+    // Trigger size variants
+    triggerSizes: {
+        sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,
+        md: `${formsBaseTheme.sizes.md.text} ${formsBaseTheme.sizes.md.padding} ${formsBaseTheme.sizes.md.height}`,
+        lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.height}`,
+    },
+    // Placeholder text style
+    placeholderStyle: "text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
+    // Selected value text style
+    valueStyle: "text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
+    // Options panel container
+    optionsPanelStyle: "border-t border-[var(--color-border)] dark:border-[var(--color-neutral-700)]",
+    // Scrollable options list
+    optionsListStyle: "overflow-y-auto overscroll-contain",
+    // Individual option style
+    optionStyle: "flex items-center gap-2 py-2 px-3 cursor-pointer select-none " +
+        "text-[var(--color-text-primary)] transition-colors " +
+        "dark:text-[var(--color-neutral-200)]",
+    // Selected option style
+    optionSelectedStyle: "bg-[var(--color-primary-50)] text-[var(--color-primary)] font-medium " +
+        "dark:bg-[var(--color-primary-900)]/30 dark:text-[var(--color-primary-400)]",
+    // Disabled option style
+    optionDisabledStyle: "cursor-not-allowed opacity-50 hover:bg-transparent",
+    // Option hover style
+    optionHoverStyle: "hover:bg-[var(--color-primary-50)]/50 hover:text-[var(--color-primary)] " +
+        "dark:hover:bg-[var(--color-primary-900)]/20 dark:hover:text-[var(--color-primary-400)]",
+    // Checkbox style for multi-select
+    checkboxStyle: "size-4 shrink-0 rounded border border-[var(--color-border)] bg-white " +
+        "flex items-center justify-center transition-colors " +
+        "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-600)]",
+    // Checkbox checked style
+    checkboxCheckedStyle: "bg-[var(--color-primary)] border-[var(--color-primary)] text-white " +
+        "dark:bg-[var(--color-primary-500)] dark:border-[var(--color-primary-500)]",
+    // Search input container
+    searchContainerStyle: "px-3 py-2 border-b border-[var(--color-border)] " +
+        "dark:border-[var(--color-neutral-700)]",
+    // Search input style
+    searchInputStyle: "w-full bg-transparent text-sm text-[var(--color-text-primary)] " +
+        "placeholder:text-[var(--color-text-placeholder)] focus:outline-none " +
+        "dark:text-[var(--color-neutral-200)] dark:placeholder:text-[var(--color-neutral-500)]",
+    // Icon start style
+    iconStartStyle: "shrink-0 text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
+    // Icon end style
+    iconEndStyle: "shrink-0 text-[var(--color-text-muted)] transition-transform duration-200 " +
+        "dark:text-[var(--color-neutral-500)]",
+    // Label style
+    labelStyle: "block text-sm font-medium text-[var(--color-text-primary)] mb-1.5 " +
+        "dark:text-[var(--color-neutral-200)]",
+    // Helper text style
+    helperTextStyle: "text-xs text-[var(--color-text-muted)] mt-1.5 " +
+        "dark:text-[var(--color-neutral-400)]",
+    // Disabled state style
+    disabledStyle: "cursor-not-allowed opacity-60 pointer-events-none",
+};
+
+export { selectExpandTheme };