@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
314 lines • 9.88 kB
TypeScript
import { Dialog as BaseDialog } from "@base-ui/react/dialog";
import { Separator as BaseSeparator } from "@base-ui/react/separator";
import * as React from "react";
type CommandFilter = (value: string, search: string, keywords?: string[]) => number;
interface CommandProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* Command palette content.
* @default undefined
*/
children?: React.ReactNode;
/**
* Accessible label announced for the command region.
* @default undefined
*/
label?: string;
/**
* Whether items should be filtered automatically as the search value changes.
* @default true
*/
shouldFilter?: boolean;
/**
* Custom scoring function used to determine whether an item matches the current search value.
* @default undefined
*/
filter?: CommandFilter;
/**
* Deprecated uncontrolled search value placeholder retained for API compatibility.
* @default undefined
*/
defaultValue?: string;
/**
* Deprecated controlled search value placeholder retained for API compatibility.
* @default undefined
*/
value?: string;
/**
* Deprecated change callback retained for API compatibility.
* @default undefined
*/
onValueChange?: (value: string) => void;
/**
* Whether keyboard navigation should wrap from the last item to the first.
* @default false
*/
loop?: boolean;
/**
* Whether pointer hover should avoid changing the active item.
* @default false
*/
disablePointerSelection?: boolean;
/**
* Deprecated Vim keybinding toggle retained for API compatibility.
* @default undefined
*/
vimBindings?: boolean;
}
interface CommandDialogProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseDialog.Root>, "children"> {
/**
* Command palette content rendered inside the dialog popup.
* @default undefined
*/
children?: React.ReactNode;
/**
* Accessible dialog title announced to assistive technologies.
* @default "Command menu"
*/
title?: React.ReactNode;
}
interface CommandInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "value"> {
/**
* Controlled search value.
* @default undefined
*/
value?: string;
/**
* Native input change handler invoked before the command-specific callback.
* @default undefined
*/
onChange?: React.ChangeEventHandler<HTMLInputElement>;
/**
* Callback fired when the command search value changes.
* @default undefined
*/
onValueChange?: (search: string) => void;
}
interface CommandListProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* Command items and groups.
* @default undefined
*/
children?: React.ReactNode;
/**
* Accessible label for the listbox container.
* @default undefined
*/
label?: string;
}
interface CommandGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "value"> {
/**
* Group contents.
* @default undefined
*/
children?: React.ReactNode;
/**
* Optional visual heading displayed above the group items.
* @default undefined
*/
heading?: React.ReactNode;
/**
* Optional stable value retained for API compatibility.
* @default undefined
*/
value?: string;
/**
* Whether the group should remain rendered even when it has no visible items.
* @default false
*/
forceMount?: boolean;
}
interface CommandSeparatorProps extends React.ComponentPropsWithoutRef<typeof BaseSeparator> {
/**
* Whether the separator should remain visible while filtering is active.
* @default false
*/
alwaysRender?: boolean;
}
interface CommandItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
/**
* Item contents.
* @default undefined
*/
children?: React.ReactNode;
/**
* Whether the item is disabled and should be skipped by selection logic.
* @default false
*/
disabled?: boolean;
/**
* Callback invoked when the item is selected.
* @default undefined
*/
onSelect?: (value: string) => void;
/**
* Optional value used for filtering and selection callbacks.
* @default undefined
*/
value?: string;
/**
* Additional search keywords included in the filter match set.
* @default []
*/
keywords?: string[];
/**
* Whether the item should remain rendered even when filtered out.
* @default false
*/
forceMount?: boolean;
}
/**
* Provides a lightweight, filterable command surface without depending on cmdk.
*
* @remarks
* This wrapper preserves the existing compound-component API while replacing the
* underlying implementation with a small context-driven registry. It supports
* text filtering, arrow-key navigation, Enter-to-select, and pointer hover
* selection for common command palette use cases.
*
* @example
* ```tsx
* <Command label='Quick actions'>
* <CommandInput placeholder='Search actions...' />
* <CommandList>
* <CommandItem onSelect={() => console.log("Open")}>Open</CommandItem>
* </CommandList>
* </Command>
* ```
*
* @see {@link https://base-ui.com/react/components/dialog | Base UI Dialog Docs}
*/
declare const Command: React.ForwardRefExoticComponent<CommandProps & React.RefAttributes<HTMLDivElement>>;
/**
* Renders the command surface inside a modal dialog.
*
* @remarks
* - Renders a Base UI dialog popup
* - Built on Base UI Dialog primitives
*
* @example
* ```tsx
* <CommandDialog open={open} onOpenChange={setOpen}>
* <CommandInput placeholder='Search...' />
* </CommandDialog>
* ```
*
* @see {@link https://base-ui.com/react/components/dialog | Base UI Dialog Docs}
*/
declare function CommandDialog({ children, open, onOpenChange, title, ...props }: Readonly<CommandDialogProps>): React.JSX.Element;
declare namespace CommandDialog {
var displayName: string;
}
/**
* Provides the searchable input surface for a command palette.
*
* @remarks
* - Renders an `<input>` element inside a wrapper `<div>`
* - Built on the shared command registry context
*
* @example
* ```tsx
* <CommandInput placeholder='Search...' />
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/combobox_role | ARIA Combobox Role}
*/
declare const CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>;
/**
* Renders the listbox container that hosts command items and groups.
*
* @remarks
* - Renders a `<div>` element with `role="listbox"`
* - Built on the shared command registry context
*
* @example
* ```tsx
* <CommandList>
* <CommandItem>Settings</CommandItem>
* </CommandList>
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/listbox_role | ARIA Listbox Role}
*/
declare const CommandList: React.ForwardRefExoticComponent<CommandListProps & React.RefAttributes<HTMLDivElement>>;
/**
* Renders a fallback empty-state message when no command items are visible.
*
* @remarks
* - Renders a `<div>` element with `role="status"`
* - Built on the shared command registry context
*
* @example
* ```tsx
* <CommandEmpty>No results found.</CommandEmpty>
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/status_role | ARIA Status Role}
*/
declare const CommandEmpty: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
/**
* Groups related command items under an optional heading.
*
* @remarks
* - Renders a `<div>` element
* - Built on the shared command registry context
*
* @example
* ```tsx
* <CommandGroup heading='Suggestions'>
* <CommandItem>Profile</CommandItem>
* </CommandGroup>
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/group_role | ARIA Group Role}
*/
declare const CommandGroup: React.ForwardRefExoticComponent<CommandGroupProps & React.RefAttributes<HTMLDivElement>>;
/**
* Renders a separator between command groups or item sections.
*
* @remarks
* - Renders the shared separator primitive
* - Built on Base UI Separator
*
* @example
* ```tsx
* <CommandSeparator />
* ```
*
* @see {@link https://base-ui.com/react/components/separator | Base UI Separator Docs}
*/
declare const CommandSeparator: React.ForwardRefExoticComponent<CommandSeparatorProps & React.RefAttributes<HTMLDivElement>>;
/**
* Renders a selectable command option with filtering metadata and keyboard support.
*
* @remarks
* - Renders a `<div>` element with `role="option"`
* - Built on the shared command registry context
*
* @example
* ```tsx
* <CommandItem keywords={["preferences"]}>Settings</CommandItem>
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/option_role | ARIA Option Role}
*/
declare const CommandItem: React.ForwardRefExoticComponent<CommandItemProps & React.RefAttributes<HTMLDivElement>>;
/**
* Renders auxiliary shortcut text aligned to the edge of a command item.
*
* @remarks
* - Renders a `<span>` element
* - Built as a lightweight presentational helper for command menus
*
* @example
* ```tsx
* <CommandShortcut>⌘K</CommandShortcut>
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/span | HTML span element}
*/
declare const CommandShortcut: {
({ className, ...props }: Readonly<React.HTMLAttributes<HTMLSpanElement>>): React.JSX.Element;
displayName: string;
};
export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
//# sourceMappingURL=command.d.ts.map