@ui-sdk/react 0.0.0-stage → 0.1.0-beta.1

package/dist/combobox.d.ts

@@ -0,0 +1,152 @@
+import { type ComboboxChipProps, type ComboboxChipState, type ComboboxChipsOverflowState, type ComboboxClearState, type ComboboxContentProps, type ComboboxContentState, type ComboboxCreateProps, type ComboboxCreateState, type ComboboxEmptyState, type ComboboxInputState, type ComboboxItemIconProps, type ComboboxItemIconState, type ComboboxItemProps, type ComboboxItemState, type ComboboxItemTextState, type ComboboxOptions, type ComboboxSelectAllState, type ComboboxValueProps, type ComboboxValueState, type ListData } from "@ui-sdk/core/combobox";
+import * as React from "react";
+import { type PartProps } from "./use-primitive.js";
+type Clashing = "value" | "defaultValue" | "onChange" | "onSelect";
+/**
+ * The props of `Combobox`.
+ * @stable
+ */
+type ComboboxProps<T = string, Multiple extends boolean | undefined = false> = ComboboxOptions<T, Multiple> & {
+    children?: React.ReactNode;
+};
+/**
+ * A text input that filters a list as you type.
+ * `T` is inferred from `value`, `defaultValue`, `items` or `onValueChange`, and
+ * `multiple` makes the value a list.
+ * @stable
+ */
+declare function Combobox<T = string, Multiple extends boolean | undefined = false>({ children, container, ...options }: ComboboxProps<T, Multiple>): React.JSX.Element;
+/**
+ * A visible label for the input.
+ * @stable
+ */
+declare const ComboboxLabel: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/combobox").ComboboxPrimitive, "label", "label">;
+/**
+ * The text input that filters the list and holds the chosen item's label.
+ * @stable
+ */
+declare function ComboboxInput({ render, ...props }: Omit<PartProps<"input", ComboboxInputState>, "value" | "defaultValue" | "children" | "readOnly">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+/**
+ * A button that opens and closes the list, out of the tab order.
+ * @stable
+ */
+declare const ComboboxTrigger: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/combobox").ComboboxPrimitive, "trigger", "button">;
+/**
+ * The popup that holds the list, positioned against the input.
+ * @stable
+ */
+declare function ComboboxContent({ side, align, sideOffset, alignOffset, collisionPadding, arrowPadding, anchor, keepMounted, container, render, children, ...props }: PartProps<"div", ComboboxContentState> & ComboboxContentProps): React.JSX.Element | null;
+/**
+ * The listbox. Without children, it renders the combobox's `items`, filtered.
+ * @stable
+ */
+declare function ComboboxList({ children, ...props }: PartProps<"div", ComboboxContentState>): React.JSX.Element | null;
+/**
+ * An option. Pressing it selects it, or toggles it with `multiple`.
+ * @stable
+ */
+declare const ComboboxItem: <T = string>(props: Omit<PartProps<"div", ComboboxItemState>, Clashing> & ComboboxItemProps<T>) => React.ReactNode;
+/**
+ * The item's text, with the part the input's text matched in `<mark>`. Without string content, it shows the item's label.
+ * @stable
+ */
+declare function ComboboxItemText({ children, ...props }: PartProps<"span", ComboboxItemTextState>): React.JSX.Element | null;
+/**
+ * An option that selects every item that matches, with `multiple`: in its group inside a `ComboboxGroup`, or in the whole list.
+ * @stable
+ */
+declare function ComboboxSelectAll({ render, ...props }: PartProps<"div", ComboboxSelectAllState>): React.JSX.Element | null;
+/**
+ * The check inside a selected item. Rendered while it's selected, or always with `keepMounted`.
+ * @stable
+ */
+declare const ComboboxItemIndicator: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/combobox").ComboboxPrimitive, "item-indicator", "span">;
+/**
+ * An icon inside an item. `ComboboxValueIcon` shows the selected item's next to the input. Screen
+ * readers, typeahead and filtering skip it, and `mirror` flips it in right-to-left text.
+ * @stable
+ */
+declare const ComboboxItemIcon: ({ mirror, render, ...props }: PartProps<"span", ComboboxItemIconState> & ComboboxItemIconProps) => React.JSX.Element | null;
+/**
+ * The selected item's icon, copied from its `ComboboxItemIcon`, like next to the input. Rendered
+ * while one item is selected and it has an icon.
+ * @stable
+ */
+declare function ComboboxValueIcon(props: Omit<PartProps<"span">, "children">): React.JSX.Element | null;
+/**
+ * A group of items, named by its `ComboboxGroupLabel`, and hidden while none of its items shows.
+ * @stable
+ */
+declare const ComboboxGroup: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/combobox").ComboboxPrimitive, "group", "div">;
+/**
+ * The group's heading, which names the group.
+ * @stable
+ */
+declare const ComboboxGroupLabel: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/combobox").ComboboxPrimitive, "group-label", "div">;
+/**
+ * A line between items or groups, hidden from screen readers.
+ * @stable
+ */
+declare const ComboboxSeparator: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/combobox").ComboboxPrimitive, "separator", "div">;
+/**
+ * An option that creates an item from the input's text. Shown while the text matches no item's label exactly.
+ * @stable
+ */
+declare function ComboboxCreate({ onCreate, minLength, children, ...props }: Omit<PartProps<"div", ComboboxCreateState>, Clashing> & ComboboxCreateProps): React.JSX.Element | null;
+/**
+ * Shown while no item matches. Its message is announced when it appears.
+ * @stable
+ */
+declare function ComboboxEmpty({ children, ...props }: PartProps<"div", ComboboxEmptyState>): React.JSX.Element | null;
+/**
+ * A polite live region for loading and result counts. Its content is yours, usually a function of its state.
+ * @stable
+ */
+declare const ComboboxStatus: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/combobox").ComboboxPrimitive, "status", "div">;
+/**
+ * A button that empties the input and selects nothing. Shown while there's something to clear.
+ * @stable
+ */
+declare const ComboboxClear: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/combobox").ComboboxPrimitive, "clear", "button">;
+/**
+ * The selected value, as a function of its state, like one chip per value. Without children, the labels joined with commas, or "France, Chile and 2 more" with `maxLabels`. Renders no element of its own.
+ * @stable
+ */
+declare function ComboboxValue({ maxLabels, getMoreLabel, children, }: ComboboxValueProps & {
+    children?: React.ReactNode | ((state: ComboboxValueState) => React.ReactNode);
+}): React.JSX.Element | null;
+/**
+ * How many chips don't fit on the chips' line, once some collapse. Rendering it inside `ComboboxChips` turns collapsing on. Without children, "+2 more".
+ * @stable
+ */
+declare function ComboboxChipsOverflow({ children, ...props }: PartProps<"span", ComboboxChipsOverflowState>): React.JSX.Element | null;
+/**
+ * The selected values as chips, around the input.
+ * @stable
+ */
+declare function ComboboxChips({ render, ...props }: PartProps<"div">): React.JSX.Element | null;
+/**
+ * One selected value. Without children, it shows the value's label.
+ * @stable
+ */
+declare function ComboboxChip<T = string>({ value, children, ...props }: Omit<PartProps<"div", ComboboxChipState>, Clashing> & ComboboxChipProps<T>): React.JSX.Element;
+/**
+ * A button inside a chip that removes its value. Name it with `aria-label`.
+ * @stable
+ */
+declare function ComboboxChipRemove({ render, ...props }: PartProps<"button", ComboboxClearState>): React.JSX.Element | null;
+/**
+ * An arrow on the popup's edge that points at the input.
+ * @stable
+ */
+declare const ComboboxArrow: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/combobox").ComboboxPrimitive, "arrow", "div">;
+/**
+ * Renders data items. Used by data comboboxes, and available for custom layouts.
+ * @stable
+ */
+declare function ComboboxItems({ items }: {
+    items: ListData<unknown>;
+}): React.JSX.Element;
+export { createComboboxController } from "@ui-sdk/core/combobox";
+export type { ComboboxApi, ComboboxArrowState, ComboboxChangeOptions, ComboboxChipProps, ComboboxChipState, ComboboxChipsOverflowState, ComboboxClearProps, ComboboxClearState, ComboboxContentProps, ComboboxContentState, ComboboxController, ComboboxCreateProps, ComboboxCreateState, ComboboxDismissReason, ComboboxEmptyState, ComboboxInputState, ComboboxItemIconProps, ComboboxItemIconState, ComboboxItemIndicatorProps, ComboboxItemIndicatorState, ComboboxItemProps, ComboboxItemState, ComboboxItemTextState, ComboboxOpenChangeReason, ComboboxOptions, ComboboxPrimitive, ComboboxQueryChangeReason, ComboboxSelectAllState, ComboboxStatusState, ComboboxTriggerState, ComboboxValue as ComboboxValueData, ComboboxValueChangeReason, ComboboxValueProps, ComboboxValueState, ListAnnouncement, ListData, ListFilter, ListGroup, ListHighlightDetails, ListItem, ListSeparator, MatchSegment, } from "@ui-sdk/core/combobox";
+export { Combobox, ComboboxArrow, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxChipsOverflow, ComboboxClear, ComboboxContent, ComboboxCreate, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxItemIcon, ComboboxItemIndicator, ComboboxItems, ComboboxItemText, ComboboxLabel, ComboboxList, type ComboboxProps, ComboboxSelectAll, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, ComboboxValueIcon, };

package/dist/combobox.js

@@ -0,0 +1,338 @@
+"use client";
+// src/combobox.tsx
+import {
+  combobox as comboboxPrimitive
+} from "@ui-sdk/core/combobox";
+import {
+  comboboxChips,
+  comboboxCreate,
+  comboboxItemIcons,
+  comboboxSelectAll,
+  selectAllKey
+} from "@ui-sdk/core/renderer";
+import * as React from "react";
+import {
+  hasChild,
+  learnLabels,
+  notLabel,
+  Placed,
+  usePlaceContent,
+  usePlacedContent
+} from "./children.js";
+import { controlRender, useFieldControl } from "./field-context.js";
+import { markSegments, textToMark } from "./list-text.js";
+import {
+  renderPopup,
+  SheetHeaderContext,
+  inSheetHeader,
+  sheetHeader,
+  sheetViewport,
+  useControllerEntry,
+  useOwnContainer,
+  usePopupContainer
+} from "./popup.js";
+import {
+  createParts,
+  HandleScope,
+  useAround,
+  useHandle,
+  useNearest,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { FormInputs } from "./form-inputs.js";
+import { ListItems } from "./list-items.js";
+import { createComboboxController } from "@ui-sdk/core/combobox";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var parts = createParts(comboboxPrimitive, {
+  label: "label",
+  trigger: "button",
+  item: "div",
+  "item-indicator": "span",
+  group: "div",
+  "group-label": "div",
+  separator: "div",
+  status: "div",
+  clear: "button",
+  arrow: "div"
+});
+var ContainerContext = React.createContext(void 0);
+var ChipContext = React.createContext(null);
+function useCombobox() {
+  return useHandle(comboboxPrimitive);
+}
+function Combobox({
+  children,
+  container,
+  ...options
+}) {
+  const field = useFieldControl();
+  const combobox = usePrimitive(comboboxPrimitive, {
+    ...options,
+    name: options.name ?? field?.name,
+    disabled: options.disabled || field?.disabled
+  });
+  useControllerEntry(options.controller, combobox);
+  learnLabels(combobox.api.internal, children, itemDecorations);
+  const header = React.useState(null);
+  const found = hasChild(children, ComboboxContent);
+  const [placed, place] = usePlacedContent(!!options.items && !found);
+  const own = placed || found;
+  return /* @__PURE__ */ jsx(HandleScope, { handle: combobox, children: /* @__PURE__ */ jsx(ContainerContext.Provider, { value: container, children: /* @__PURE__ */ jsxs(SheetHeaderContext.Provider, { value: header, children: [
+    /* @__PURE__ */ jsx(Placed, { value: place, children }),
+    /* @__PURE__ */ jsx(Placed, { value: null, children: options.items && !own && /* @__PURE__ */ jsx(ComboboxContent, {}) }),
+    /* @__PURE__ */ jsx(FormInputs, { handle: combobox })
+  ] }) }) });
+}
+var ComboboxLabel = parts.Label;
+function ComboboxInput({
+  render,
+  ...props
+}) {
+  const [header] = React.useContext(SheetHeaderContext);
+  const element = {
+    ...props,
+    render: controlRender(useFieldControl(props), "input", render)
+  };
+  const input = usePart(comboboxPrimitive, "input", {}, element, "input");
+  return input && inSheetHeader(input, header);
+}
+var ComboboxTrigger = parts.Trigger;
+function ComboboxContent({
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  collisionPadding,
+  arrowPadding,
+  anchor,
+  keepMounted,
+  container,
+  render,
+  children,
+  ...props
+}) {
+  usePlaceContent();
+  const combobox = useCombobox();
+  const target = usePopupContainer(useOwnContainer(container, ContainerContext));
+  const content = {
+    side,
+    align,
+    sideOffset,
+    alignOffset,
+    collisionPadding,
+    arrowPadding,
+    anchor,
+    keepMounted
+  };
+  const [, setHeader] = React.useContext(SheetHeaderContext);
+  const body = (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    sheetHeader(combobox, setHeader),
+    typeof children === "function" ? children(state) : children ?? (state.items && combobox.state.items && /* @__PURE__ */ jsx(ComboboxList, {}))
+  ] });
+  const element = usePart(combobox, "content", content, {
+    ...props,
+    children: body,
+    render: sheetViewport(combobox, render)
+  });
+  return element && renderPopup(element, target);
+}
+function ComboboxList({
+  children = listItems,
+  ...props
+}) {
+  return usePart(comboboxPrimitive, "list", {}, { ...props, children });
+}
+var listItems = (state) => /* @__PURE__ */ jsx(ComboboxItems, { items: state.items });
+var ComboboxItem = parts.Item;
+function ComboboxItemText({
+  children,
+  ...props
+}) {
+  const item = useAround(comboboxPrimitive, "item");
+  if (!item) {
+    throw new Error("<ComboboxItemText> must be used inside <ComboboxItem>.");
+  }
+  const label2 = item.label ?? item.value;
+  const part = { id: item.value, text: textToMark(children, label2) };
+  const content = typeof children === "function" ? children : (state) => markSegments(state.segments);
+  return usePart(
+    comboboxPrimitive,
+    "item-text",
+    part,
+    { ...props, children: content },
+    "span"
+  );
+}
+function ComboboxSelectAll({
+  render,
+  ...props
+}) {
+  const combobox = useCombobox();
+  combobox.instance.use(comboboxSelectAll);
+  const part = {
+    id: selectAllKey(
+      useAround(comboboxPrimitive, "group")?.id
+    )
+  };
+  return usePart(combobox, "select-all", part, { ...props, render }, "div");
+}
+var ComboboxItemIndicator = parts.ItemIndicator;
+var itemDecorations = /* @__PURE__ */ new Set([ComboboxItemIndicator]);
+var ComboboxItemIcon = /* @__PURE__ */ notLabel(function ComboboxItemIcon2({
+  mirror,
+  render,
+  ...props
+}) {
+  const combobox = useCombobox();
+  combobox.instance.use(comboboxItemIcons);
+  const part = {
+    id: React.useId(),
+    mirror,
+    item: useAround(comboboxPrimitive, "item")?.value
+  };
+  return usePart(combobox, "item-icon", part, { ...props, render }, "span");
+});
+function ComboboxValueIcon(props) {
+  return useNearest(comboboxPrimitive) ? /* @__PURE__ */ jsx(ComboboxValueIconPart, { ...props }) : null;
+}
+function ComboboxValueIconPart(props) {
+  const combobox = useCombobox();
+  combobox.instance.use(comboboxItemIcons);
+  return usePart(combobox, "value-icon", {}, props, "span");
+}
+var ComboboxGroup = parts.Group;
+var ComboboxGroupLabel = parts.GroupLabel;
+var ComboboxSeparator = parts.Separator;
+function ComboboxCreate({
+  onCreate,
+  minLength,
+  children = create,
+  ...props
+}) {
+  const combobox = useCombobox();
+  combobox.instance.use(comboboxCreate);
+  return usePart(
+    combobox,
+    "create",
+    { onCreate, minLength },
+    { ...props, children }
+  );
+}
+var create = (state) => `Create \u201C${state.query}\u201D`;
+function ComboboxEmpty({
+  children,
+  ...props
+}) {
+  const content = (state) => typeof children === "function" ? children(state) : state.empty ? children : null;
+  return usePart(
+    comboboxPrimitive,
+    "empty",
+    {},
+    { ...props, children: content }
+  );
+}
+var ComboboxStatus = parts.Status;
+var ComboboxClear = parts.Clear;
+function ComboboxValue({
+  maxLabels,
+  getMoreLabel,
+  children
+}) {
+  const value = (_props, state) => /* @__PURE__ */ jsx(Fragment, { children: typeof children === "function" ? children(state) : children ?? state.label });
+  return usePart(
+    comboboxPrimitive,
+    "value",
+    { maxLabels, getMoreLabel },
+    { render: value }
+  );
+}
+function ComboboxChipsOverflow({
+  children = more,
+  ...props
+}) {
+  const combobox = useCombobox();
+  combobox.instance.use(comboboxChips);
+  return usePart(combobox, "chips-overflow", {}, { ...props, children }, "span");
+}
+var more = (state) => `+${state.count} more`;
+function ComboboxChips({ render, ...props }) {
+  const combobox = useCombobox();
+  combobox.instance.use(comboboxChips);
+  return usePart(combobox, "chips", {}, { ...props, render }, "div");
+}
+function ComboboxChip({
+  value,
+  children = label,
+  ...props
+}) {
+  const combobox = useCombobox();
+  combobox.instance.use(comboboxChips);
+  const part = { id: combobox.api.internal.keyOf(value), value };
+  const chip = React.useMemo(() => ({ value }), [value]);
+  return /* @__PURE__ */ jsx(ChipContext.Provider, { value: chip, children: usePart(combobox, "chip", part, { ...props, children }) });
+}
+var label = (state) => state.label;
+function ComboboxChipRemove({
+  render,
+  ...props
+}) {
+  const combobox = useCombobox();
+  combobox.instance.use(comboboxChips);
+  const chip = React.useContext(ChipContext);
+  if (!chip) {
+    throw new Error("<ComboboxChipRemove> must be used inside <ComboboxChip>.");
+  }
+  const part = {
+    id: combobox.api.internal.keyOf(chip.value),
+    value: chip.value
+  };
+  return usePart(combobox, "chip-remove", part, { ...props, render }, "button");
+}
+var ComboboxArrow = parts.Arrow;
+function ComboboxItems({ items }) {
+  const combobox = useCombobox();
+  return /* @__PURE__ */ jsx(
+    ListItems,
+    {
+      items,
+      parts: listParts,
+      keyOf: combobox.api.internal.keyOf
+    }
+  );
+}
+var listParts = {
+  Item: ComboboxItem,
+  Group: ComboboxGroup,
+  GroupLabel: ComboboxGroupLabel,
+  Separator: ComboboxSeparator
+};
+export {
+  Combobox,
+  ComboboxArrow,
+  ComboboxChip,
+  ComboboxChipRemove,
+  ComboboxChips,
+  ComboboxChipsOverflow,
+  ComboboxClear,
+  ComboboxContent,
+  ComboboxCreate,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIcon,
+  ComboboxItemIndicator,
+  ComboboxItemText,
+  ComboboxItems,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSelectAll,
+  ComboboxSeparator,
+  ComboboxStatus,
+  ComboboxTrigger,
+  ComboboxValue,
+  ComboboxValueIcon,
+  createComboboxController
+};

package/dist/command.d.ts

@@ -0,0 +1,88 @@
+import { type CommandData, type CommandEmptyState, type CommandItemProps, type CommandItemState, type CommandItemTextState, type CommandListState, type CommandOptions, type CommandPageProps, type CommandState, type CommandShortcutProps, type CommandShortcutState } from "@ui-sdk/core/command";
+import * as React from "react";
+import { type PartProps } from "./use-primitive.js";
+type Clashing = "value" | "defaultValue" | "onChange" | "onSelect";
+/**
+ * The props of `Command`.
+ * @stable
+ */
+type CommandProps = CommandOptions & Omit<PartProps<"div", CommandState>, Clashing>;
+/**
+ * A search field over an always-open list of commands. Renders a `div` around them.
+ * @stable
+ */
+declare function Command({ value, defaultValue, onValueChange, query, defaultQuery, onQueryChange, pages, defaultPages, onPagesChange, onAction, pendingAnnouncement, items, emptyItems, filter, autoHighlight, loop, status, onLoadMore, announcement, controller, debug, children, ...props }: CommandProps): React.JSX.Element | null;
+/**
+ * The search field. It keeps focus while arrow keys move the highlight. Name it with `aria-label`.
+ * @stable
+ */
+declare const CommandInput: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/command").CommandPrimitive, "input", "input">;
+/**
+ * The listbox. Without children, it renders the command's `items`, ranked as the user types.
+ * @stable
+ */
+declare function CommandList({ children, ...props }: PartProps<"div", CommandListState>): React.JSX.Element | null;
+/**
+ * A command. Pressing it, or Enter while it's highlighted, runs it, with its `value` passed to the command's
+ * `onAction`.
+ * @stable
+ */
+declare function CommandItem({ value, label, keywords, disabled, shortcut, page, index, onSelect, render, ...props }: Omit<PartProps<"div", CommandItemState>, Clashing> & CommandItemProps): React.JSX.Element | null;
+/**
+ * The command's text, with the part the search matched in `<mark>`. Without string content, it shows the command's label.
+ * @stable
+ */
+declare function CommandItemText({ children, ...props }: PartProps<"span", CommandItemTextState>): React.JSX.Element | null;
+/**
+ * An icon inside a command. Screen readers, typeahead and filtering skip it, and `mirror` flips it
+ * in right-to-left text.
+ * @stable
+ */
+declare const CommandItemIcon: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/command").CommandPrimitive, "item-icon", "span">;
+/**
+ * The keys of a command's shortcut, formatted for the platform. Inside a command, its `shortcut`.
+ * @stable
+ */
+declare function CommandShortcut({ shortcut, children, ...props }: PartProps<"span", CommandShortcutState> & CommandShortcutProps): React.JSX.Element | null;
+/**
+ * Commands shown while this page is on top. Without `value`, it's the first page. Renders no element.
+ * @stable
+ */
+declare function CommandPage({ value, children, }: CommandPageProps & {
+    children?: React.ReactNode;
+}): React.JSX.Element | null;
+/**
+ * A group of commands. It hides while none of its commands matches the search.
+ * @stable
+ */
+declare const CommandGroup: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/command").CommandPrimitive, "group", "div">;
+/**
+ * A group's heading, which names it.
+ * @stable
+ */
+declare const CommandGroupLabel: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/command").CommandPrimitive, "group-label", "div">;
+/**
+ * A line between groups. Composed separators hide while the list is filtered.
+ * @stable
+ */
+declare const CommandSeparator: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/command").CommandPrimitive, "separator", "div">;
+/**
+ * Shown while no command matches. Its message is announced when it appears. Place it outside the list.
+ * @stable
+ */
+declare function CommandEmpty({ children, ...props }: PartProps<"div", CommandEmptyState>): React.JSX.Element | null;
+/**
+ * A polite live region for loading and result counts. Its content is yours, usually a function of its state.
+ * @stable
+ */
+declare const CommandStatus: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/command").CommandPrimitive, "status", "div">;
+/**
+ * Renders data commands. Used by data command lists, and available for custom layouts.
+ * @stable
+ */
+declare function CommandItems({ items }: {
+    items: CommandData;
+}): React.JSX.Element;
+export { createCommandController } from "@ui-sdk/core/command";
+export type { CommandActionDetails, CommandApi, CommandChangeOptions, CommandController, CommandData, CommandDataGroup, CommandDataItem, CommandEmptyState, CommandInputState, CommandItemIconProps, CommandItemIconState, CommandItemProps, CommandItemState, CommandItemTextState, CommandListState, CommandOptions, CommandPageProps, CommandPagesChangeReason, CommandPrimitive, CommandQueryChangeReason, CommandState, CommandShortcutProps, CommandShortcutState, CommandStatusState, CommandValueChangeDetails, CommandValueChangeReason, ListAnnouncement, ListFilter, ListSeparator, MatchSegment, SearchFilter, } from "@ui-sdk/core/command";
+export { Command, CommandEmpty, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandItemIcon, CommandItems, CommandItemText, CommandList, CommandPage, type CommandProps, CommandSeparator, CommandShortcut, CommandStatus, };