@stanfordspezi/spezi-web-design-system/dist/src/components/Command/Command.d.ts

Stanford Biodesign Digital Health Spezi Web Design System

import { Command as CommandPrimitive } from 'cmdk';
import { ComponentProps } from 'react';
import { DialogContent } from '../Dialog';
/**
 * Root command component built on top of [cmdk](https://github.com/pacocoursey/cmdk).
 *
 * Provides the container and base styles. Compose with {@link CommandInput}, {@link CommandList},
 * {@link CommandGroup}, {@link CommandItem}, {@link CommandSeparator}, {@link CommandEmpty}, and {@link CommandShortcut}.
 *
 * @example
 * ```tsx
 * // Basic searchable list
 * <Command>
 *   <CommandInput placeholder="Search..." />
 *   <CommandList>
 *     <CommandEmpty>No results found.</CommandEmpty>
 *     <CommandGroup heading="Suggestions">
 *       <CommandItem>Calendar</CommandItem>
 *       <CommandItem>
 *         Calculator
 *         <CommandShortcut>⌘K</CommandShortcut>
 *       </CommandItem>
 *     </CommandGroup>
 *     <CommandSeparator />
 *     <CommandGroup heading="Settings">
 *       <CommandItem>Profile</CommandItem>
 *       <CommandItem>Billing</CommandItem>
 *     </CommandGroup>
 *   </CommandList>
 * </Command>
 * ```
 */
export declare const Command: ({ className, ...props }: ComponentProps<typeof CommandPrimitive>) => import("react").JSX.Element;
interface CommandDialogContentProps extends ComponentProps<typeof DialogContent> {
    /**
     * Accessible title announced by screen readers. Visually hidden.
     * @default "Command Palette"
     */
    title?: string;
    /**
     * Accessible description announced by screen readers. Visually hidden.
     * @default "Search for a command to run..."
     */
    description?: string;
}
/**
 * Command dialog content composed of {@link DialogContent} and {@link Command}.
 *
 * Use this inside your own Dialog wrapper for maximum composability.
 * The {@link CommandDialogContentProps#title|title} and {@link CommandDialogContentProps#description|description} are announced to assistive tech but are visually hidden.
 *
 * @example
 * ```tsx
 * const [open, setOpen] = useState(false);
 * <Dialog open={open} onOpenChange={setOpen}>
 *   <CommandDialogContent title="Command Palette">
 *     <CommandInput placeholder="Search..." />
 *     <CommandList>
 *       <CommandGroup heading="Files">
 *         <CommandItem>Open Recent</CommandItem>
 *       </CommandGroup>
 *     </CommandList>
 *   </CommandDialogContent>
 * </Dialog>
 * ```
 */
export declare const CommandDialogContent: ({ title, description, children, className, ...props }: CommandDialogContentProps) => import("react").JSX.Element;
/**
 * Search input with an inline search icon and bottom border.
 *
 * Place inside {@link Command} (or compose with {@link Dialog} using {@link CommandDialogContent}) to filter list items automatically.
 *
 * @example
 * ```tsx
 * <Command>
 *   <CommandInput placeholder="Search..." />
 *   <CommandList>
 *     <CommandItem>Calendar</CommandItem>
 *     <CommandItem>Calculator</CommandItem>
 *   </CommandList>
 * </Command>
 * ```
 */
export declare const CommandInput: ({ className, placeholder, ...props }: ComponentProps<typeof CommandPrimitive.Input>) => import("react").JSX.Element;
/**
 * Scrollable list container for groups and items.
 *
 * Must wrap {@link CommandGroup}, {@link CommandItem}, {@link CommandEmpty}, and {@link CommandSeparator}.
 *
 * @example
 * ```tsx
 * <CommandList>
 *   <CommandEmpty>No results</CommandEmpty>
 *   <CommandGroup heading="General">
 *     <CommandItem>Open</CommandItem>
 *   </CommandGroup>
 * </CommandList>
 * ```
 */
export declare const CommandList: ({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>) => import("react").JSX.Element;
/**
 * Displayed when there are no results.
 *
 * @example
 * ```tsx
 * <CommandList>
 *   <CommandEmpty>No results found.</CommandEmpty>
 * </CommandList>
 * ```
 */
export declare const CommandEmpty: ({ className, children, ...props }: ComponentProps<typeof CommandPrimitive.Empty>) => import("react").JSX.Element;
/**
 * Group container with heading support.
 *
 * @example
 * ```tsx
 * <CommandList>
 *   <CommandGroup heading="Suggestions">
 *     <CommandItem>Calendar</CommandItem>
 *   </CommandGroup>
 * </CommandList>
 * ```
 */
export declare const CommandGroup: ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>) => import("react").JSX.Element;
/**
 * Visual separator between items/groups.
 *
 * @example
 * ```tsx
 * <CommandList>
 *   <CommandGroup heading="General" />
 *   <CommandSeparator />
 *   <CommandGroup heading="Settings" />
 * </CommandList>
 * ```
 */
export declare const CommandSeparator: ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>) => import("react").JSX.Element;
/**
 * Selectable item row.
 *
 * @example
 * ```tsx
 * <CommandItem>
 *   Open File
 *   <CommandShortcut>⌘O</CommandShortcut>
 * </CommandItem>
 * ```
 */
export declare const CommandItem: ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Item>) => import("react").JSX.Element;
/**
 * Right-aligned keyboard shortcut hint.
 *
 * @example
 * ```tsx
 * <CommandItem>
 *   Preferences
 *   <CommandShortcut>⌘,</CommandShortcut>
 * </CommandItem>
 * ```
 */
export declare const CommandShortcut: ({ className, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
export {};