@yarcl/react 0.1.0 → 0.2.0

package/dist/components/Card.d.ts

@@ -0,0 +1,36 @@
+import type { ComponentProps } from 'react';
+import type { Radius, Shadow, Spacing } from '../types';
+/** Props for {@link Card}. */
+export interface CardProps extends ComponentProps<'div'> {
+    /**
+     * Element to render.
+     * @default 'div'
+     */
+    as?: 'div' | 'section' | 'article' | 'aside';
+    /**
+     * Inner padding, from the `spacing` config.
+     * @default config.defaults.padding
+     */
+    padding?: Spacing;
+    /**
+     * Corner radius, from the `radii` config.
+     * @default config.defaults.radius
+     */
+    radius?: Radius;
+    /** Elevation, from the `shadows` config. No shadow when omitted. */
+    shadow?: Shadow;
+}
+/**
+ * A bordered surface for grouping content.
+ *
+ * @example
+ * ```tsx
+ * <Card shadow="md">
+ *   <Stack>
+ *     <Heading level={3}>Plan</Heading>
+ *     <Text muted>Pro, billed yearly</Text>
+ *   </Stack>
+ * </Card>
+ * ```
+ */
+export declare function Card({ as, padding, radius, shadow, className, ...props }: CardProps): import("react").JSX.Element;

package/dist/components/Card.js

@@ -0,0 +1,26 @@
+import { useDefaults } from "../runtime.js";
+import { cx, paddingClass, radiusClass, shadowClass } from "../classes.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Card.tsx
+/**
+* A bordered surface for grouping content.
+*
+* @example
+* ```tsx
+* <Card shadow="md">
+*   <Stack>
+*     <Heading level={3}>Plan</Heading>
+*     <Text muted>Pro, billed yearly</Text>
+*   </Stack>
+* </Card>
+* ```
+*/
+function Card({ as = "div", padding, radius, shadow, className, ...props }) {
+	const own = useDefaults("Card");
+	return /* @__PURE__ */ jsx(as, {
+		className: cx("yarcl-card", paddingClass(padding ?? own.padding), radiusClass(radius ?? own.radius), shadowClass(shadow ?? own.shadow), className),
+		...props
+	});
+}
+//#endregion
+export { Card };

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,28 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { Color, ComponentSize } from '../types';
+/** Props for {@link Checkbox}. Accepts all native `<input>` attributes except `type`, `color` and `size`. */
+export interface CheckboxProps extends Omit<ComponentProps<'input'>, 'type' | 'color' | 'size' | 'children'> {
+    /** Label shown next to the box. */
+    children?: ReactNode;
+    /**
+     * Box size, from the `sizes` config (uses the size's `iconSize`).
+     * @default config.defaults.size
+     */
+    size?: ComponentSize<'Checkbox'>;
+    /**
+     * Color of the checked box, from the `colors` config.
+     * @default config.defaults.color
+     */
+    color?: Color;
+    /** Shows a mixed state. Cleared by the browser when the user toggles the box. */
+    indeterminate?: boolean;
+}
+/**
+ * A checkbox with an optional label.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox defaultChecked>Remember me</Checkbox>
+ * ```
+ */
+export declare function Checkbox(props: CheckboxProps): import("react").JSX.Element;

package/dist/components/Checkbox.js

@@ -0,0 +1,38 @@
+import { useDefaults } from "../runtime.js";
+import { colorClass, cx, sizeClass } from "../classes.js";
+import { useFieldProps } from "../field-context.js";
+import { useEffect, useImperativeHandle, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Checkbox.tsx
+/**
+* A checkbox with an optional label.
+*
+* @example
+* ```tsx
+* <Checkbox defaultChecked>Remember me</Checkbox>
+* ```
+*/
+function Checkbox(props) {
+	const own = useDefaults("Checkbox");
+	const { children, size, color, indeterminate = false, className, style, ref, ...rest } = useFieldProps(props);
+	const inner = useRef(null);
+	useImperativeHandle(ref, () => inner.current, []);
+	useEffect(() => {
+		if (inner.current) inner.current.indeterminate = indeterminate;
+	}, [indeterminate]);
+	return /* @__PURE__ */ jsxs("label", {
+		className: cx("yarcl-checkbox", sizeClass(size ?? own.size, "Checkbox"), colorClass(color ?? own.color), className),
+		style,
+		children: [/* @__PURE__ */ jsx("input", {
+			ref: inner,
+			type: "checkbox",
+			className: "yarcl-checkbox-input",
+			...rest
+		}), children != null && /* @__PURE__ */ jsx("span", {
+			className: "yarcl-checkbox-label",
+			children
+		})]
+	});
+}
+//#endregion
+export { Checkbox };

package/dist/components/Combobox.d.ts

@@ -0,0 +1,75 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { TokenProps } from '../types';
+import type { SelectOption } from './Select';
+/** Props shared by both forms of {@link ComboboxProps}. */
+export interface ComboboxBaseProps<V extends string = string> extends TokenProps<'Combobox'>, Omit<ComponentProps<'input'>, 'color' | 'size' | 'value' | 'defaultValue' | 'onChange' | 'children' | 'multiple'> {
+    /** The options to suggest. For async search, update this as results arrive and set `filter={false}`. */
+    options: readonly SelectOption<V>[];
+    /** Controlled text in the input. */
+    inputValue?: string;
+    /** Called on every keystroke with the input text. Use it to fetch options for async search. */
+    onInputValueChange?: (text: string) => void;
+    /**
+     * How options are matched against the typed text.
+     * `true`: case-insensitive "contains" on the label; a function for custom matching;
+     * `false` to show `options` as given (e.g. already filtered by a server).
+     * @default true
+     */
+    filter?: boolean | ((option: SelectOption<V>, text: string) => boolean);
+    /**
+     * Accepts typed text that doesn't match an option (typeahead / autocomplete).
+     * When `false`, unchosen text is discarded on blur: the input resets to the selected option's label,
+     * or clears with `multiple`. With `multiple`, Enter adds the typed text as a chip.
+     * @default false
+     */
+    allowCustomValue?: boolean;
+    /** Shows a loading row instead of options. */
+    loading?: boolean;
+    /**
+     * Shown when no options match.
+     * @default 'No results'
+     */
+    emptyMessage?: ReactNode;
+    /**
+     * Shown while `loading` is set.
+     * @default 'Loading…'
+     */
+    loadingMessage?: ReactNode;
+}
+/** Props for {@link Combobox}. `multiple` switches the value from one option to an array of them. */
+export type ComboboxProps<V extends string = string> = ComboboxBaseProps<V> & ({
+    /** One value at a time. The input shows the selected option's label. */
+    multiple?: false;
+    /** Controlled selected value. `null` means nothing is selected. */
+    value?: V | null;
+    /** Initial selected value when uncontrolled. */
+    defaultValue?: V | null;
+    /** Called when an option is chosen, or with the typed text when `allowCustomValue` is set. */
+    onValueChange?: (value: V | null) => void;
+    maxSelected?: never;
+} | {
+    /** Any number of values, shown as removable chips before the input. */
+    multiple: true;
+    /** Controlled selected values. */
+    value?: readonly V[];
+    /** Initial selected values when uncontrolled. */
+    defaultValue?: readonly V[];
+    /** Called with all selected values. */
+    onValueChange?: (value: V[]) => void;
+    /** The most values that can be selected. Other options are disabled once it is reached. */
+    maxSelected?: number;
+});
+/**
+ * A text input with a filtered list of suggestions.
+ * Covers searchable select (default), typeahead / autocomplete (`allowCustomValue`),
+ * async search (`filter={false}` + `onInputValueChange` + `loading`)
+ * and multi-select with removable chips (`multiple`).
+ * Shares the size scale with {@link Input}. Works inside a {@link Field}.
+ *
+ * @example
+ * ```tsx
+ * <Combobox placeholder="Country" options={countries} onValueChange={setCountry} />
+ * <Combobox multiple placeholder="Countries" options={countries} onValueChange={setCountries} />
+ * ```
+ */
+export declare function Combobox<V extends string = string>(props: ComboboxProps<V>): import("react").JSX.Element;

package/dist/components/Combobox.js

@@ -0,0 +1,362 @@
+import { useDefaults } from "../runtime.js";
+import { colorClass, cx, radiusClass, sizeClass } from "../classes.js";
+import { useControllable } from "../hooks.js";
+import { useFieldProps } from "../field-context.js";
+import { CheckIcon, floatingMiddleware } from "../floating.js";
+import { Badge, BadgeRemove } from "./Badge.js";
+import { useId, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FloatingPortal, autoUpdate, useDismiss, useFloating, useInteractions, useListNavigation, useMergeRefs, useRole } from "@floating-ui/react";
+//#region src/components/Combobox.tsx
+var contains = (option, text) => option.label.toLowerCase().includes(text.trim().toLowerCase());
+/**
+* A text input with a filtered list of suggestions.
+* Covers searchable select (default), typeahead / autocomplete (`allowCustomValue`),
+* async search (`filter={false}` + `onInputValueChange` + `loading`)
+* and multi-select with removable chips (`multiple`).
+* Shares the size scale with {@link Input}. Works inside a {@link Field}.
+*
+* @example
+* ```tsx
+* <Combobox placeholder="Country" options={countries} onValueChange={setCountry} />
+* <Combobox multiple placeholder="Countries" options={countries} onValueChange={setCountries} />
+* ```
+*/
+function Combobox(props) {
+	return props.multiple ? /* @__PURE__ */ jsx(MultipleCombobox, { ...props }) : /* @__PURE__ */ jsx(SingleCombobox, { ...props });
+}
+function useComboboxList(opts) {
+	const { options, text, filter, loading, isSelected, isDisabled, onChoose, containerRef } = opts;
+	const [open, setOpen] = useState(false);
+	const [activeIndex, setActiveIndex] = useState(null);
+	const listRef = useRef([]);
+	const idPrefix = useId();
+	const match = filter === true || filter === void 0 ? contains : filter === false ? () => true : filter;
+	const visible = options.filter((option) => match(option, text));
+	function close() {
+		setOpen(false);
+		setActiveIndex(null);
+	}
+	const { refs, floatingStyles, context } = useFloating({
+		open,
+		onOpenChange(next) {
+			setOpen(next);
+			if (!next) opts.onDismiss();
+		},
+		placement: "bottom-start",
+		transform: false,
+		whileElementsMounted: autoUpdate,
+		middleware: floatingMiddleware({
+			gap: 4,
+			matchWidth: true
+		})
+	});
+	const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+		useRole(context, { role: "combobox" }),
+		useDismiss(context, { outsidePress: (event) => !containerRef?.current?.contains(event.target) }),
+		useListNavigation(context, {
+			listRef,
+			activeIndex,
+			onNavigate: setActiveIndex,
+			virtual: true,
+			loop: true,
+			disabledIndices: visible.flatMap((option, i) => isDisabled(option) ? [i] : [])
+		})
+	]);
+	return {
+		open,
+		setOpen,
+		activeIndex,
+		setActiveIndex,
+		close,
+		visible,
+		match,
+		refs,
+		getReferenceProps,
+		list: open && (loading || visible.length > 0 || text.trim() !== "") && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx("div", {
+			ref: refs.setFloating,
+			style: floatingStyles,
+			className: cx("yarcl-floating yarcl-panel yarcl-listbox", sizeClass(opts.size, "Combobox"), colorClass(opts.color)),
+			...getFloatingProps({
+				"aria-multiselectable": opts.multiple || void 0,
+				onMouseDown: (event) => event.preventDefault()
+			}),
+			children: loading ? /* @__PURE__ */ jsx("div", {
+				className: "yarcl-listbox-message",
+				children: opts.loadingMessage
+			}) : visible.length === 0 ? /* @__PURE__ */ jsx("div", {
+				className: "yarcl-listbox-message",
+				children: opts.emptyMessage
+			}) : visible.map((option, i) => {
+				const isActive = i === activeIndex;
+				const selected = isSelected(option);
+				return /* @__PURE__ */ jsxs("div", {
+					id: `${idPrefix}-${i}`,
+					ref: (node) => {
+						listRef.current[i] = node;
+					},
+					"aria-disabled": isDisabled(option) || void 0,
+					"data-active": isActive || void 0,
+					className: "yarcl-option",
+					...getItemProps({
+						active: isActive,
+						selected,
+						onClick: () => onChoose(option)
+					}),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "yarcl-option-label",
+						children: option.label
+					}), selected && /* @__PURE__ */ jsx(CheckIcon, {})]
+				}, option.value);
+			})
+		}) })
+	};
+}
+function SingleCombobox(props) {
+	const own = useDefaults("Combobox");
+	const { options, value: valueProp, defaultValue = null, onValueChange, inputValue: inputValueProp, onInputValueChange, filter = true, allowCustomValue = false, loading = false, emptyMessage = "No results", loadingMessage = "Loading…", size, radius, color, className, onBlur, name, multiple: _multiple, maxSelected: _maxSelected, ...rest } = useFieldProps(props);
+	const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);
+	const labelOf = (v) => options.find((option) => option.value === v)?.label ?? (allowCustomValue ? v ?? "" : "");
+	const [text, setText] = useControllable(inputValueProp, labelOf(defaultValue), onInputValueChange);
+	function choose(option) {
+		if (option.disabled) return;
+		setValue(option.value);
+		setText(option.label);
+		close();
+	}
+	function restore() {
+		if (allowCustomValue) return;
+		const label = labelOf(value);
+		if (text !== label) setText(label);
+	}
+	const { open, setOpen, activeIndex, setActiveIndex, close, visible, refs, getReferenceProps, list } = useComboboxList({
+		options,
+		text,
+		filter,
+		loading,
+		emptyMessage,
+		loadingMessage,
+		size: size ?? own.size,
+		color: color ?? own.color,
+		multiple: false,
+		isSelected: (option) => option.value === value,
+		isDisabled: (option) => !!option.disabled,
+		onChoose: choose,
+		onDismiss: restore
+	});
+	function onChange(event) {
+		const next = event.target.value;
+		setText(next);
+		setOpen(true);
+		setActiveIndex(next ? 0 : null);
+		if (allowCustomValue) setValue(next ? next : null);
+		else if (!next) setValue(null);
+	}
+	function onKeyDown(event) {
+		if (event.key !== "Enter" || !open) return;
+		event.preventDefault();
+		const option = activeIndex != null ? visible[activeIndex] : void 0;
+		if (option) choose(option);
+		else close();
+	}
+	const referenceRef = useMergeRefs([refs.setReference, rest.ref]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("input", {
+			ref: referenceRef,
+			className: cx("yarcl-input yarcl-combobox", sizeClass(size ?? own.size, "Combobox"), radiusClass(radius ?? own.radius, size ?? own.size), colorClass(color ?? own.color), className),
+			autoComplete: "off",
+			"aria-autocomplete": "list",
+			...getReferenceProps({
+				...rest,
+				value: text,
+				onChange,
+				onKeyDown,
+				onFocus: () => setOpen(true),
+				onClick: () => setOpen(true),
+				onBlur(event) {
+					restore();
+					onBlur?.(event);
+				}
+			})
+		}),
+		name && /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value: value ?? ""
+		}),
+		list
+	] });
+}
+function MultipleCombobox(props) {
+	const own = useDefaults("Combobox");
+	const { options, value: valueProp, defaultValue = [], onValueChange, maxSelected, inputValue: inputValueProp, onInputValueChange, filter = true, allowCustomValue = false, loading = false, emptyMessage = "No results", loadingMessage = "Loading…", size, radius, color, className, style, name, required, disabled, placeholder, onBlur, multiple: _multiple, ...rest } = useFieldProps(props);
+	const [values, setValues] = useControllable(valueProp, defaultValue, onValueChange);
+	const [text, setText] = useControllable(inputValueProp, "", onInputValueChange);
+	const controlRef = useRef(null);
+	const inputRef = useRef(null);
+	const chipsRef = useRef(null);
+	const knownLabels = useRef(/* @__PURE__ */ new Map());
+	const quietFocus = useRef(false);
+	const full = maxSelected != null && values.length >= maxSelected;
+	const labelOf = (v) => options.find((option) => option.value === v)?.label ?? knownLabels.current.get(v) ?? v;
+	function toggle(option) {
+		if (option.disabled) return;
+		const selected = values.includes(option.value);
+		if (!selected && full) return;
+		knownLabels.current.set(option.value, option.label);
+		setValues(selected ? values.filter((v) => v !== option.value) : [...values, option.value]);
+		if (text) {
+			setText("");
+			const index = options.filter((o) => match(o, "")).indexOf(option);
+			setActiveIndex(index >= 0 ? index : null);
+		}
+	}
+	function addCustom() {
+		const typed = text.trim();
+		if (!values.includes(typed) && !full) setValues([...values, typed]);
+		setText("");
+		setActiveIndex(null);
+	}
+	function focusInput() {
+		const input = inputRef.current;
+		if (!input) return;
+		if (document.activeElement !== input) quietFocus.current = true;
+		input.focus();
+	}
+	function remove(v) {
+		setValues(values.filter((x) => x !== v));
+		focusInput();
+	}
+	function restore() {
+		if (!allowCustomValue && text) setText("");
+	}
+	const { open, setOpen, activeIndex, setActiveIndex, close, visible, match, refs, getReferenceProps, list } = useComboboxList({
+		options,
+		text,
+		filter,
+		loading,
+		emptyMessage,
+		loadingMessage,
+		size: size ?? own.size,
+		color: color ?? own.color,
+		multiple: true,
+		isSelected: (option) => values.includes(option.value),
+		isDisabled: (option) => !!option.disabled || full && !values.includes(option.value),
+		onChoose: toggle,
+		onDismiss: () => {},
+		containerRef: controlRef
+	});
+	const controlRefs = useMergeRefs([controlRef, refs.setPositionReference]);
+	const inputRefs = useMergeRefs([
+		inputRef,
+		refs.setReference,
+		rest.ref
+	]);
+	const chipButtons = () => [...chipsRef.current?.querySelectorAll(".yarcl-badge-remove") ?? []];
+	function onChange(event) {
+		const next = event.target.value;
+		setText(next);
+		setOpen(true);
+		setActiveIndex(next ? 0 : null);
+	}
+	function onKeyDown(event) {
+		const input = event.currentTarget;
+		if (event.key === "Enter") {
+			const option = open && activeIndex != null ? visible[activeIndex] : void 0;
+			if (option) toggle(option);
+			else if (allowCustomValue && text.trim()) addCustom();
+			else if (open) close();
+			else return;
+			event.preventDefault();
+		} else if (event.key === "Backspace" && text === "" && values.length > 0) {
+			event.preventDefault();
+			setValues(values.slice(0, -1));
+		} else if (event.key === "ArrowLeft" && input.selectionStart === 0 && input.selectionEnd === 0 && values.length > 0) {
+			event.preventDefault();
+			close();
+			chipButtons().at(-1)?.focus();
+		}
+	}
+	function onChipKeyDown(event) {
+		const buttons = chipButtons();
+		const i = buttons.indexOf(event.target);
+		if (i < 0) return;
+		if (event.key === "ArrowLeft") buttons[Math.max(i - 1, 0)].focus();
+		else if (event.key === "ArrowRight") {
+			if (i === buttons.length - 1) focusInput();
+			else buttons[i + 1].focus();
+		} else if (event.key === "Backspace" || event.key === "Delete") remove(values[i]);
+		else if (event.key === "Escape") focusInput();
+		else return;
+		event.preventDefault();
+	}
+	function onControlMouseDown(event) {
+		if (disabled || event.target.closest("button, input")) return;
+		event.preventDefault();
+		inputRef.current?.focus();
+		setOpen(true);
+	}
+	const s = size ?? own.size;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		ref: controlRefs,
+		className: cx("yarcl-input yarcl-combobox-control", sizeClass(s, "Combobox"), radiusClass(radius ?? own.radius, s), colorClass(color ?? own.color), className),
+		style,
+		onMouseDown: onControlMouseDown,
+		children: [
+			values.length > 0 && /* @__PURE__ */ jsx("ul", {
+				ref: chipsRef,
+				role: "list",
+				"aria-label": "Selected",
+				className: "yarcl-combobox-chips",
+				onKeyDown: onChipKeyDown,
+				children: values.map((v) => {
+					const label = labelOf(v);
+					return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Badge, {
+						size: s,
+						color: color ?? own.color,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "yarcl-combobox-chip-label",
+							children: label
+						}), /* @__PURE__ */ jsx(BadgeRemove, {
+							"aria-label": `Remove ${label}`,
+							tabIndex: -1,
+							disabled,
+							onClick: () => remove(v)
+						})]
+					}) }, v);
+				})
+			}),
+			/* @__PURE__ */ jsx("input", {
+				ref: inputRefs,
+				className: "yarcl-combobox-input",
+				autoComplete: "off",
+				"aria-autocomplete": "list",
+				...getReferenceProps({
+					...rest,
+					disabled,
+					required: required && values.length === 0,
+					placeholder: values.length > 0 ? void 0 : placeholder,
+					value: text,
+					onChange,
+					onKeyDown,
+					onFocus() {
+						if (quietFocus.current) quietFocus.current = false;
+						else setOpen(true);
+					},
+					onClick: () => setOpen(true),
+					onBlur(event) {
+						if (!controlRef.current?.contains(event.relatedTarget)) restore();
+						onBlur?.(event);
+					}
+				})
+			}),
+			name && values.map((v) => /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: v
+			}, v))
+		]
+	}), list] });
+}
+//#endregion
+export { Combobox };

package/dist/components/CommandPalette.d.ts

@@ -0,0 +1,92 @@
+import { type ComponentProps, type MouseEvent, type ReactElement, type ReactNode } from 'react';
+import type { TokenProps } from '../types';
+/** A command shown in a {@link CommandPalette}. */
+export interface CommandPaletteCommand {
+    /** Unique id of the command. */
+    id: string;
+    /** Text shown in the list and matched by the search. */
+    label: string;
+    /** Heading of the group the command is listed under. Groups appear in the order they're first used. */
+    group?: string;
+    /** Extra words the search matches, e.g. synonyms. */
+    keywords?: readonly string[];
+    /**
+     * Keyboard shortcut hint shown next to the label, e.g. `'Mod+S'`, or `'G D'` for a sequence.
+     * `Mod` is ⌘ on Apple devices and Ctrl elsewhere. Only a hint: bind the shortcut yourself.
+     */
+    shortcut?: string;
+    /** An icon shown before the label. */
+    icon?: ReactNode;
+    /** Shows the command but prevents choosing it. */
+    disabled?: boolean;
+    /** Called when the command is chosen. The palette closes first. */
+    onSelect?: () => void;
+}
+/** Props for {@link CommandPalette}. */
+export interface CommandPaletteProps extends TokenProps<'CommandPalette'>, Omit<ComponentProps<'dialog'>, 'color' | 'open' | 'onSelect' | 'children' | 'title'> {
+    /** The commands to search. Commands with the same `group` are listed together under a heading. */
+    commands: readonly CommandPaletteCommand[];
+    /** Controlled open state. */
+    open?: boolean;
+    /**
+     * Initial open state when uncontrolled.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Called when the palette opens or closes, including by the shortcut, Esc or a backdrop click. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Keyboard shortcut that toggles the palette from anywhere on the page, e.g. `'Mod+K'` or `'Shift+Mod+P'`.
+     * `Mod` is ⌘ on Apple devices and Ctrl elsewhere. `false` disables it.
+     * @default 'Mod+K'
+     */
+    shortcut?: string | false;
+    /** An element that opens the palette when clicked, e.g. a {@link Button}. */
+    trigger?: ReactElement<{
+        onClick?: (event: MouseEvent) => void;
+    }>;
+    /** Called with the chosen command, after its own `onSelect`. */
+    onSelect?: (command: CommandPaletteCommand) => void;
+    /** Controlled search text. */
+    inputValue?: string;
+    /** Called on every keystroke with the search text. */
+    onInputValueChange?: (text: string) => void;
+    /**
+     * How commands are matched against the search text.
+     * `true`: every typed word appears in the label, group or keywords (case-insensitive);
+     * a function for custom matching; `false` to show `commands` as given.
+     * @default true
+     */
+    filter?: boolean | ((command: CommandPaletteCommand, text: string) => boolean);
+    /**
+     * Placeholder of the search input.
+     * @default 'Search commands…'
+     */
+    placeholder?: string;
+    /**
+     * Accessible name of the palette and its search input.
+     * @default 'Command palette'
+     */
+    label?: string;
+    /**
+     * Shown when no commands match.
+     * @default 'No results'
+     */
+    emptyMessage?: ReactNode;
+}
+/**
+ * A searchable command menu in a modal dialog, opened with a keyboard shortcut (⌘K or Ctrl+K by default).
+ * The search input is a combobox: arrow keys, Home and End move through the matching commands,
+ * Enter runs the highlighted one, Esc closes the palette and returns focus.
+ *
+ * @example
+ * ```tsx
+ * <CommandPalette
+ *   commands={[
+ *     { id: 'new', label: 'New file', group: 'File', shortcut: 'Mod+N', onSelect: createFile },
+ *     { id: 'theme', label: 'Toggle dark mode', group: 'View', keywords: ['theme'], onSelect: toggleTheme },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function CommandPalette({ commands, open: openProp, defaultOpen, onOpenChange, shortcut, trigger, onSelect, inputValue, onInputValueChange, filter, placeholder, label, emptyMessage, size, radius, color, className, onClick, onClose, ...props }: CommandPaletteProps): import("react").JSX.Element;