@buun_group/brutalist-ui/dist/react/command/Command.d.ts

A brutalist-styled component library

/**
 * @module Command
 * @description A command palette component for building searchable, keyboard-navigable menus. Inspired by command palettes in modern applications with compound components for flexible composition.
 */
import React, { ReactNode, CSSProperties } from 'react';
/**
 * Props for the Command component
 */
export interface CommandProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
    /**
     * The content of the command palette (typically Command.Input, Command.List, etc.)
     */
    children: ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
    /**
     * Callback fired when an item is selected
     */
    onSelect?: (value: string) => void;
    /**
     * Default search value when uncontrolled
     * @default ''
     */
    defaultValue?: string;
    /**
     * Controlled search value
     */
    value?: string;
    /**
     * Callback fired when the search value changes
     */
    onValueChange?: (value: string) => void;
    /**
     * Custom filter function for matching items
     */
    filter?: (value: string, search: string, keywords?: string[]) => number;
    /**
     * Whether to filter items based on search input
     * @default true
     */
    shouldFilter?: boolean;
    /**
     * Placeholder text for the search input
     */
    placeholder?: string;
}
/**
 * A command palette component for searchable, keyboard-navigable menus.
 * Provides a flexible structure for building command interfaces with filtering and grouping.
 *
 * @example
 * ```tsx
 * <Command onSelect={(value) => console.log(value)}>
 *   <Command.Input placeholder="Type a command..." />
 *   <Command.List>
 *     <Command.Empty>No results found.</Command.Empty>
 *     <Command.Group heading="Suggestions">
 *       <Command.Item value="profile">Profile</Command.Item>
 *       <Command.Item value="settings">Settings</Command.Item>
 *     </Command.Group>
 *   </Command.List>
 * </Command>
 * ```
 */
export declare const Command: React.FC<CommandProps> & {
    Input: typeof CommandInput;
    List: typeof CommandList;
    Empty: typeof CommandEmpty;
    Group: typeof CommandGroup;
    Item: typeof CommandItem;
    Separator: typeof CommandSeparator;
};
/**
 * Props for the Command.Input component
 */
export interface CommandInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
}
/**
 * Search input for the command palette.
 * Handles keyboard navigation and filtering of command items.
 */
declare const CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>;
/**
 * Props for the Command.List component
 */
export interface CommandListProps {
    /**
     * Command items and groups to display
     */
    children: ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
}
/**
 * Container for command items and groups.
 * Provides scrollable area for the command options.
 */
declare const CommandList: React.ForwardRefExoticComponent<CommandListProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Props for the Command.Empty component
 */
export interface CommandEmptyProps {
    /**
     * Content to show when no results are found
     */
    children: ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
}
/**
 * Placeholder content shown when no command items match the search.
 * Only visible when search is active and no results are found.
 */
declare const CommandEmpty: React.ForwardRefExoticComponent<CommandEmptyProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Props for the Command.Group component
 */
export interface CommandGroupProps {
    /**
     * Command items within this group
     */
    children: ReactNode;
    /**
     * Optional heading text for the group
     */
    heading?: string;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
}
/**
 * Groups related command items together with an optional heading.
 * Useful for organizing commands by category or type.
 */
declare const CommandGroup: React.ForwardRefExoticComponent<CommandGroupProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Props for the Command.Item component
 */
export interface CommandItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
    /**
     * The content to display for this command
     */
    children: ReactNode;
    /**
     * The value to return when this item is selected
     */
    value: string;
    /**
     * Additional keywords to match during search
     * @default []
     */
    keywords?: string[];
    /**
     * Whether this item is disabled and cannot be selected
     * @default false
     */
    disabled?: boolean;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Callback fired when this specific item is selected
     */
    onSelect?: (value: string) => void;
}
/**
 * Individual command option within the palette.
 * Supports keyboard navigation and search filtering.
 */
declare const CommandItem: React.ForwardRefExoticComponent<CommandItemProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Props for the Command.Separator component
 */
export interface CommandSeparatorProps {
    /**
     * Additional CSS class name for styling
     */
    className?: string;
}
/**
 * Visual separator between command groups or items.
 * Helps organize and structure the command palette visually.
 */
declare const CommandSeparator: React.ForwardRefExoticComponent<CommandSeparatorProps & React.RefAttributes<HTMLDivElement>>;
export { CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator };