@loke/ui/dist/components/command/command.d.mts

import { Primitive } from "@loke/ui/primitive";
import { type ComponentPropsWithoutRef, type ReactNode } from "react";
type Children = {
    children?: ReactNode;
};
type DivProps = ComponentPropsWithoutRef<typeof Primitive.div>;
type CommandProps = Children & DivProps & {
    /**
     * Accessible label for this command menu. Not shown visually.
     * Used by screen readers to describe the purpose of the command menu.
     */
    label?: string;
    /**
     * Optionally set to `false` to turn off the automatic filtering and sorting.
     * When disabled, items will remain in their original order and all items will be visible.
     */
    shouldFilter?: boolean;
    /**
     * Custom filter function for whether each command menu item should matches the given search query.
     * Receives the item value, search query, and optional keywords, and should return a score.
     * Higher scores indicate better matches.
     */
    filter?: CommandFilter;
    /**
     * Optional default item value when it is initially rendered.
     * Only used in uncontrolled mode when no `value` prop is provided.
     */
    defaultValue?: string;
    /**
     * Optional controlled state of the selected command menu item.
     * When provided, the component operates in controlled mode.
     */
    value?: string;
    /**
     * Event handler called when the selected item of the menu changes.
     * Receives the value of the newly selected item.
     */
    onValueChange?: (value: string) => void;
    /**
     * Optionally set to `true` to turn on looping around when using the arrow keys.
     * When enabled, pressing down on the last item moves to the first item, and vice versa.
     */
    loop?: boolean;
    /**
     * Optionally set to `true` to disable selection via pointer events.
     * Useful when you want to force users to use keyboard navigation only.
     */
    disablePointerSelection?: boolean;
    /**
     * Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
     * These vim-style keybindings provide alternative navigation options.
     */
    vimBindings?: boolean;
};
type CommandInputProps = Omit<ComponentPropsWithoutRef<typeof Primitive.input>, "value" | "onChange" | "type"> & {
    /**
     * Optional controlled state for the value of the search input.
     * When provided, the input operates in controlled mode.
     */
    value?: string;
    /**
     * Event handler called when the search value changes.
     * Receives the new search string value.
     */
    onValueChange?: (search: string) => void;
};
type CommandListProps = Children & DivProps & {
    /**
     * Accessible label for this List of suggestions. Not shown visually.
     * Used by screen readers to describe the list of command options.
     */
    label?: string;
};
type CommandItemProps = Children & Omit<DivProps, "disabled" | "onSelect" | "value"> & {
    /**
     * Whether this item is currently disabled.
     * Disabled items cannot be selected or interacted with.
     */
    disabled?: boolean;
    /**
     * Event handler for when this item is selected, either via click or keyboard selection.
     * Receives the value of the selected item.
     */
    onSelect?: (value: string) => void;
    /**
     * A unique value for this item.
     * If not provided, the value will be inferred from the item's text content.
     */
    value?: string;
    /**
     * Optional keywords to match against when filtering.
     * These additional terms can be used to make items discoverable through alternative search terms.
     */
    keywords?: string[];
    /**
     * Whether this item is forcibly rendered regardless of filtering.
     * Useful for items that should always be visible, like headers or special actions.
     */
    forceMount?: boolean;
};
type CommandGroupProps = Children & Omit<DivProps, "heading" | "value"> & {
    /**
     * Optional heading to render for this group.
     * Provides a visual and semantic grouping for related command items.
     */
    heading?: ReactNode;
    /**
     * If no heading is provided, you must provide a value that is unique for this group.
     * Used internally for group identification and filtering logic.
     */
    value?: string;
    /**
     * Whether this group is forcibly rendered regardless of filtering.
     * When true, the group will always be visible even if none of its items match the search.
     */
    forceMount?: boolean;
};
type CommandSeparatorProps = DivProps & {
    /**
     * Whether this separator should always be rendered. Useful if you disable automatic filtering.
     * By default, separators are hidden when there's an active search query.
     */
    alwaysRender?: boolean;
};
type CommandEmptyProps = Children & DivProps & {};
type CommandLoadingProps = Children & DivProps & {
    /**
     * Estimated progress of loading asynchronous options.
     * Value should be between 0 and 100, representing percentage completion.
     */
    progress?: number;
    /**
     * Accessible label for this loading progressbar. Not shown visually.
     * Used by screen readers to describe the loading state.
     */
    label?: string;
};
/**
 * Function type for custom filtering logic.
 *
 * @returns A numeric score where higher values indicate better matches
 */
type CommandFilter = (
/** The item's value to be filtered */
value: string, 
/** The current search query */
search: string, 
/** Optional additional keywords for matching */
keywords?: string[]) => number;
/**
 * Internal group type for managing group state.
 */
type Group = {
    /** Unique identifier for the group */
    id: string;
    /** Whether this group should always be rendered */
    forceMount?: boolean;
};
declare const createCommandScope: import("@loke/ui/context").CreateScope;
/**
 * Command component for creating searchable command palettes and menus.
 *
 * Features:
 * - Fuzzy search filtering with customizable scoring
 * - Keyboard navigation with arrow keys and vim bindings
 * - Support for grouped items with headings
 * - Controlled and uncontrolled modes
 * - Accessibility support with ARIA attributes
 * - Customizable rendering and styling
 * - Automatic focus management
 * - Loading and empty states
 *
 * The component manages its own internal state for search, selection, and filtering,
 * while allowing external control through props when needed.
 */
declare const Command: import("react").ForwardRefExoticComponent<Children & Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
    asChild?: boolean;
}, "ref"> & {
    /**
     * Accessible label for this command menu. Not shown visually.
     * Used by screen readers to describe the purpose of the command menu.
     */
    label?: string;
    /**
     * Optionally set to `false` to turn off the automatic filtering and sorting.
     * When disabled, items will remain in their original order and all items will be visible.
     */
    shouldFilter?: boolean;
    /**
     * Custom filter function for whether each command menu item should matches the given search query.
     * Receives the item value, search query, and optional keywords, and should return a score.
     * Higher scores indicate better matches.
     */
    filter?: CommandFilter;
    /**
     * Optional default item value when it is initially rendered.
     * Only used in uncontrolled mode when no `value` prop is provided.
     */
    defaultValue?: string;
    /**
     * Optional controlled state of the selected command menu item.
     * When provided, the component operates in controlled mode.
     */
    value?: string;
    /**
     * Event handler called when the selected item of the menu changes.
     * Receives the value of the newly selected item.
     */
    onValueChange?: (value: string) => void;
    /**
     * Optionally set to `true` to turn on looping around when using the arrow keys.
     * When enabled, pressing down on the last item moves to the first item, and vice versa.
     */
    loop?: boolean;
    /**
     * Optionally set to `true` to disable selection via pointer events.
     * Useful when you want to force users to use keyboard navigation only.
     */
    disablePointerSelection?: boolean;
    /**
     * Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
     * These vim-style keybindings provide alternative navigation options.
     */
    vimBindings?: boolean;
} & import("react").RefAttributes<HTMLDivElement>>;
/**
 * Command menu input component.
 * Provides a search input with fuzzy filtering capabilities.
 * All props are forwarded to the underlying `input` element.
 */
declare const CommandInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
    asChild?: boolean;
}, "ref">, "value" | "type" | "onChange"> & {
    /**
     * Optional controlled state for the value of the search input.
     * When provided, the input operates in controlled mode.
     */
    value?: string;
    /**
     * Event handler called when the search value changes.
     * Receives the new search string value.
     */
    onValueChange?: (search: string) => void;
} & import("react").RefAttributes<HTMLInputElement>>;
/**
 * Container for command items, groups, and separators.
 * Provides scrollable list with automatic height calculation.
 * Use the `--loke-cmd-list-height` CSS variable to animate height based on the number of results.
 */
declare const CommandList: import("react").ForwardRefExoticComponent<Children & Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
    asChild?: boolean;
}, "ref"> & {
    /**
     * Accessible label for this List of suggestions. Not shown visually.
     * Used by screen readers to describe the list of command options.
     */
    label?: string;
} & import("react").RefAttributes<HTMLDivElement>>;
/**
 * Command menu item component.
 * Becomes active on pointer enter or through keyboard navigation.
 * Preferably pass a `value` prop, otherwise the value will be inferred from `children` or
 * the rendered item's `textContent`.
 */
declare const CommandItem: import("react").ForwardRefExoticComponent<Children & Omit<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
    asChild?: boolean;
}, "ref">, "value" | "onSelect" | "disabled"> & {
    /**
     * Whether this item is currently disabled.
     * Disabled items cannot be selected or interacted with.
     */
    disabled?: boolean;
    /**
     * Event handler for when this item is selected, either via click or keyboard selection.
     * Receives the value of the selected item.
     */
    onSelect?: (value: string) => void;
    /**
     * A unique value for this item.
     * If not provided, the value will be inferred from the item's text content.
     */
    value?: string;
    /**
     * Optional keywords to match against when filtering.
     * These additional terms can be used to make items discoverable through alternative search terms.
     */
    keywords?: string[];
    /**
     * Whether this item is forcibly rendered regardless of filtering.
     * Useful for items that should always be visible, like headers or special actions.
     */
    forceMount?: boolean;
} & import("react").RefAttributes<HTMLDivElement>>;
/**
 * Groups command menu items together with an optional heading.
 * Grouped items are always shown together and can be filtered as a unit.
 */
declare const CommandGroup: import("react").ForwardRefExoticComponent<Children & Omit<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
    asChild?: boolean;
}, "ref">, "value" | "heading"> & {
    /**
     * Optional heading to render for this group.
     * Provides a visual and semantic grouping for related command items.
     */
    heading?: ReactNode;
    /**
     * If no heading is provided, you must provide a value that is unique for this group.
     * Used internally for group identification and filtering logic.
     */
    value?: string;
    /**
     * Whether this group is forcibly rendered regardless of filtering.
     * When true, the group will always be visible even if none of its items match the search.
     */
    forceMount?: boolean;
} & import("react").RefAttributes<HTMLDivElement>>;
/**
 * A visual and semantic separator between items or groups.
 * Visible when the search query is empty or `alwaysRender` is true, hidden otherwise.
 */
declare const CommandSeparator: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
    asChild?: boolean;
}, "ref"> & {
    /**
     * Whether this separator should always be rendered. Useful if you disable automatic filtering.
     * By default, separators are hidden when there's an active search query.
     */
    alwaysRender?: boolean;
} & import("react").RefAttributes<HTMLDivElement>>;
/**
 * Automatically renders when there are no results for the search query.
 * Provides feedback to users when their search returns no matches.
 */
declare const CommandEmpty: import("react").ForwardRefExoticComponent<Children & Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
    asChild?: boolean;
}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/**
 * Loading state component for asynchronous command items.
 * You should conditionally render this with `progress` while loading asynchronous items.
 */
declare const CommandLoading: import("react").ForwardRefExoticComponent<Children & Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
    asChild?: boolean;
}, "ref"> & {
    /**
     * Estimated progress of loading asynchronous options.
     * Value should be between 0 and 100, representing percentage completion.
     */
    progress?: number;
    /**
     * Accessible label for this loading progressbar. Not shown visually.
     * Used by screen readers to describe the loading state.
     */
    label?: string;
} & import("react").RefAttributes<HTMLDivElement>>;
declare const Root: import("react").ForwardRefExoticComponent<Children & Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
    asChild?: boolean;
}, "ref"> & {
    /**
     * Accessible label for this command menu. Not shown visually.
     * Used by screen readers to describe the purpose of the command menu.
     */
    label?: string;
    /**
     * Optionally set to `false` to turn off the automatic filtering and sorting.
     * When disabled, items will remain in their original order and all items will be visible.
     */
    shouldFilter?: boolean;
    /**
     * Custom filter function for whether each command menu item should matches the given search query.
     * Receives the item value, search query, and optional keywords, and should return a score.
     * Higher scores indicate better matches.
     */
    filter?: CommandFilter;
    /**
     * Optional default item value when it is initially rendered.
     * Only used in uncontrolled mode when no `value` prop is provided.
     */
    defaultValue?: string;
    /**
     * Optional controlled state of the selected command menu item.
     * When provided, the component operates in controlled mode.
     */
    value?: string;
    /**
     * Event handler called when the selected item of the menu changes.
     * Receives the value of the newly selected item.
     */
    onValueChange?: (value: string) => void;
    /**
     * Optionally set to `true` to turn on looping around when using the arrow keys.
     * When enabled, pressing down on the last item moves to the first item, and vice versa.
     */
    loop?: boolean;
    /**
     * Optionally set to `true` to disable selection via pointer events.
     * Useful when you want to force users to use keyboard navigation only.
     */
    disablePointerSelection?: boolean;
    /**
     * Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
     * These vim-style keybindings provide alternative navigation options.
     */
    vimBindings?: boolean;
} & import("react").RefAttributes<HTMLDivElement>>;
declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
    asChild?: boolean;
}, "ref">, "value" | "type" | "onChange"> & {
    /**
     * Optional controlled state for the value of the search input.
     * When provided, the input operates in controlled mode.
     */
    value?: string;
    /**
     * Event handler called when the search value changes.
     * Receives the new search string value.
     */
    onValueChange?: (search: string) => void;
} & import("react").RefAttributes<HTMLInputElement>>;
declare const List: import("react").ForwardRefExoticComponent<Children & Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
    asChild?: boolean;
}, "ref"> & {
    /**
     * Accessible label for this List of suggestions. Not shown visually.
     * Used by screen readers to describe the list of command options.
     */
    label?: string;
} & import("react").RefAttributes<HTMLDivElement>>;
declare const Item: import("react").ForwardRefExoticComponent<Children & Omit<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
    asChild?: boolean;
}, "ref">, "value" | "onSelect" | "disabled"> & {
    /**
     * Whether this item is currently disabled.
     * Disabled items cannot be selected or interacted with.
     */
    disabled?: boolean;
    /**
     * Event handler for when this item is selected, either via click or keyboard selection.
     * Receives the value of the selected item.
     */
    onSelect?: (value: string) => void;
    /**
     * A unique value for this item.
     * If not provided, the value will be inferred from the item's text content.
     */
    value?: string;
    /**
     * Optional keywords to match against when filtering.
     * These additional terms can be used to make items discoverable through alternative search terms.
     */
    keywords?: string[];
    /**
     * Whether this item is forcibly rendered regardless of filtering.
     * Useful for items that should always be visible, like headers or special actions.
     */
    forceMount?: boolean;
} & import("react").RefAttributes<HTMLDivElement>>;
declare const Group: import("react").ForwardRefExoticComponent<Children & Omit<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
    asChild?: boolean;
}, "ref">, "value" | "heading"> & {
    /**
     * Optional heading to render for this group.
     * Provides a visual and semantic grouping for related command items.
     */
    heading?: ReactNode;
    /**
     * If no heading is provided, you must provide a value that is unique for this group.
     * Used internally for group identification and filtering logic.
     */
    value?: string;
    /**
     * Whether this group is forcibly rendered regardless of filtering.
     * When true, the group will always be visible even if none of its items match the search.
     */
    forceMount?: boolean;
} & import("react").RefAttributes<HTMLDivElement>>;
declare const Separator: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
    asChild?: boolean;
}, "ref"> & {
    /**
     * Whether this separator should always be rendered. Useful if you disable automatic filtering.
     * By default, separators are hidden when there's an active search query.
     */
    alwaysRender?: boolean;
} & import("react").RefAttributes<HTMLDivElement>>;
declare const Empty: import("react").ForwardRefExoticComponent<Children & Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
    asChild?: boolean;
}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
declare const Loading: import("react").ForwardRefExoticComponent<Children & Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
    asChild?: boolean;
}, "ref"> & {
    /**
     * Estimated progress of loading asynchronous options.
     * Value should be between 0 and 100, representing percentage completion.
     */
    progress?: number;
    /**
     * Accessible label for this loading progressbar. Not shown visually.
     * Used by screen readers to describe the loading state.
     */
    label?: string;
} & import("react").RefAttributes<HTMLDivElement>>;
export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, createCommandScope, Empty, Group, Input, Item, List, Loading, Root, Separator, };
export type { CommandEmptyProps, CommandGroupProps, CommandInputProps, CommandItemProps, CommandListProps, CommandLoadingProps, CommandProps, CommandSeparatorProps, };