@jcsoftdev/ui 0.1.6 → 0.2.0

package/dist/overlays/toaster/toaster.d.ts

@@ -1,10 +1,29 @@
-import type { ComponentProps } from "react";
-import { Toaster as SonnerToaster } from "sonner";
-export { toast } from "sonner";
-export interface ToasterProps extends ComponentProps<typeof SonnerToaster> {
+import type { ClassNames } from "../../utils/class-names.js";
+export type { ToastAction, ToastOptions } from "./toast.js";
+export { toast } from "./toast.js";
+export type ToasterPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export type ToasterPart = "root" | "list" | "toast" | "title" | "description" | "action";
+export interface ToasterProps {
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<ToasterPart>;
+    position?: ToasterPosition;
+    /** Default auto dismiss delay in ms; `Infinity` disables it. */
+    duration?: number;
+    /** Toasts shown at once; older ones wait until a newer one leaves. */
+    visibleToasts?: number;
+    className?: string;
+    /** Accessible name of the region. Defaults to the `notifications` UI string. */
+    label?: string;
+    /**
+     * Element the region is portaled into. Defaults to `document.body`, which sits outside
+     * wrapper-scoped CSS variables, theme classes and `dir`; pass the themed root to inherit them.
+     */
+    container?: HTMLElement | null;
+    /** Text direction of the region. Defaults to the `dir` of the `<html>` element. */
+    dir?: "ltr" | "rtl";
 }
 /**
  * Ephemeral, non-critical confirmations. Pass `action: { label, onClick }` to
  * `toast()` for an undo button. Critical messages belong in a banner instead.
  */
-export declare function Toaster({ position, duration, visibleToasts, ...props }: ToasterProps): import("react").JSX.Element;
+export declare function Toaster({ position, duration, visibleToasts, className, classNames, label, container, dir, }: ToasterProps): import("react").JSX.Element;

package/dist/overlays/toaster/toaster.js

@@ -1,28 +1,230 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { Toaster as SonnerToaster } from "sonner";
-import { toast } from "sonner";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+import { useUiStrings } from "../../i18n/ui-strings-provider.js";
+import { Portal } from "../../primitives/portal.js";
+import { cn } from "../../utils/cn.js";
+import { usePrefersReducedMotion } from "../../utils/reduced-motion.js";
+import {
+  dismiss,
+  getServerSnapshot,
+  getSnapshot,
+  remove,
+  selectVisible,
+  subscribe
+} from "./toast-store.js";
+import { toast } from "./toast.js";
+const EXIT_MS = 200;
+const SWIPE_THRESHOLD = 60;
+const POSITION = {
+  "top-left": "top-4 left-4 items-start",
+  "top-center": "top-4 left-1/2 -translate-x-1/2 items-center",
+  "top-right": "top-4 right-4 items-end",
+  "bottom-left": "bottom-4 left-4 items-start",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center",
+  "bottom-right": "bottom-4 right-4 items-end"
+};
+function documentDir() {
+  if (typeof document === "undefined") return void 0;
+  const value = document.documentElement.getAttribute("dir");
+  return value === "rtl" || value === "ltr" ? value : void 0;
+}
+function useDocumentHidden() {
+  const [hidden, setHidden] = useState(false);
+  useEffect(() => {
+    const sync = () => setHidden(document.visibilityState === "hidden");
+    sync();
+    document.addEventListener("visibilitychange", sync);
+    return () => document.removeEventListener("visibilitychange", sync);
+  }, []);
+  return hidden;
+}
+function useDismissTimer(record, duration, paused) {
+  const remaining = useRef(duration);
+  const lastRevision = useRef(record.revision);
+  if (lastRevision.current !== record.revision) {
+    lastRevision.current = record.revision;
+    remaining.current = duration;
+  }
+  const { id, revision, state } = record;
+  useEffect(() => {
+    if (state !== "open" || paused || !Number.isFinite(duration)) return;
+    const startedAt = Date.now();
+    const timer = setTimeout(() => dismiss(id), Math.max(0, remaining.current));
+    return () => {
+      clearTimeout(timer);
+      remaining.current -= Date.now() - startedAt;
+    };
+  }, [id, revision, state, paused, duration]);
+}
+function ToastItem({ record, duration, reducedMotion, classNames }) {
+  const { id, state, tone } = record;
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [entered, setEntered] = useState(false);
+  const [dragX, setDragX] = useState(0);
+  const drag = useRef(null);
+  const hidden = useDocumentHidden();
+  const effectiveDuration = record.duration ?? duration;
+  useDismissTimer(record, effectiveDuration, hovered || focused || hidden);
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => setEntered(true));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+  useEffect(() => {
+    if (state !== "closed") return;
+    if (reducedMotion) {
+      remove(id);
+      return;
+    }
+    const timer = setTimeout(() => remove(id), EXIT_MS);
+    return () => clearTimeout(timer);
+  }, [state, id, reducedMotion]);
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      dismiss(id);
+    }
+  };
+  const onPointerDown = (event) => {
+    if (event.pointerType !== "touch") return;
+    drag.current = { x: event.clientX, pointerId: event.pointerId };
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+  };
+  const onPointerMove = (event) => {
+    if (drag.current) setDragX(event.clientX - drag.current.x);
+  };
+  const endDrag = (event) => {
+    if (!drag.current) return;
+    const dx = event.clientX - drag.current.x;
+    drag.current = null;
+    setDragX(0);
+    if (Math.abs(dx) >= SWIPE_THRESHOLD) dismiss(id);
+  };
+  const isError = tone === "error";
+  const closed = state === "closed";
+  const swiping = dragX !== 0;
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: role is status/alert; handlers only pause the timer, swipe and Escape.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: isError ? "alert" : "status",
+        "aria-live": isError ? "assertive" : "polite",
+        "aria-atomic": "true",
+        "data-state": state,
+        "data-type": tone,
+        "data-swiping": swiping || void 0,
+        onPointerEnter: () => setHovered(true),
+        onPointerLeave: () => setHovered(false),
+        onFocus: () => setFocused(true),
+        onBlur: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
+        },
+        onKeyDown,
+        onPointerDown,
+        onPointerMove,
+        onPointerUp: endDrag,
+        onPointerCancel: endDrag,
+        style: swiping ? { transform: `translateX(${dragX}px)`, opacity: 1 - Math.abs(dragX) / 200 } : void 0,
+        className: cn(
+          "pointer-events-auto flex min-h-11 w-max max-w-[min(92vw,26rem)] touch-pan-y items-center gap-3 rounded-button bg-toast-bg py-1.5 pr-2 pl-4 text-control text-toast-ink shadow-overlay",
+          "transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none",
+          !entered && "opacity-0 data-[state=open]:translate-y-2",
+          closed && "opacity-0",
+          closed && !reducedMotion && "scale-95",
+          classNames?.toast
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: classNames?.title, children: record.message }),
+            record.description ? /* @__PURE__ */ jsx("div", { className: cn("opacity-70", classNames?.description), children: record.description }) : null
+          ] }),
+          record.action ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "h-8 shrink-0 rounded-button bg-toast-ink/18 px-3 font-bold text-toast-ink focus-ring",
+                classNames?.action
+              ),
+              onClick: (event) => {
+                record.action?.onClick(event);
+                if (!event.defaultPrevented) dismiss(id);
+              },
+              children: record.action.label
+            }
+          ) : null
+        ]
+      }
+    )
+  );
+}
 function Toaster({
   position = "bottom-center",
   duration = 6e3,
   visibleToasts = 2,
-  ...props
+  className,
+  classNames,
+  label,
+  container,
+  dir
 }) {
-  return /* @__PURE__ */ jsx(
-    SonnerToaster,
+  const strings = useUiStrings();
+  const reducedMotion = usePrefersReducedMotion();
+  const records = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const regionRef = useRef(null);
+  const shown = selectVisible(records, visibleToasts);
+  const fromTop = position.startsWith("top");
+  useEffect(() => {
+    const onKey = (event) => {
+      if (event.altKey && event.code === "KeyT") regionRef.current?.focus();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, []);
+  return /* @__PURE__ */ jsx(Portal, { container, children: /* @__PURE__ */ jsx(
+    "section",
     {
-      position,
-      duration,
-      visibleToasts,
-      toastOptions: {
-        classNames: {
-          toast: "rounded-button! border-none! bg-toast-bg! text-toast-ink! shadow-overlay! text-control! min-h-11! py-1.5! pr-2! pl-4!",
-          actionButton: "rounded-button! bg-toast-ink/18! text-toast-ink! font-bold! h-8! px-3!"
+      ref: regionRef,
+      dir: dir ?? documentDir(),
+      "data-ui-overlay-ignore": "",
+      "data-ui-layer-branch": "",
+      "aria-label": label ?? strings.notifications,
+      tabIndex: -1,
+      className: cn(
+        "pointer-events-none fixed z-[1000] flex outline-none",
+        POSITION[position],
+        classNames?.root,
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "m-0 flex list-none gap-2 p-0",
+            fromTop ? "flex-col-reverse" : "flex-col",
+            classNames?.list
+          ),
+          children: shown.map((record) => /* @__PURE__ */ jsx(
+            ToastItem,
+            {
+              record,
+              duration,
+              reducedMotion,
+              classNames
+            },
+            record.id
+          ))
         }
-      },
-      ...props
+      )
     }
-  );
+  ) });
 }
 export {
   Toaster,

package/dist/palette/command-palette/command-palette.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 export interface CommandPaletteItem {
     id: string;
     label: string;
@@ -10,6 +11,7 @@ export interface CommandPaletteItem {
     keywords?: string[];
     onSelect: () => void;
 }
+export type CommandPalettePart = "root" | "overlay" | "header" | "searchIcon" | "input" | "closeKey" | "list" | "empty" | "group" | "item" | "itemLabel" | "itemHint";
 export interface CommandPaletteProps {
     open: boolean;
     onClose: () => void;
@@ -27,6 +29,8 @@ export interface CommandPaletteProps {
     query?: string;
     onQueryChange?: (query: string) => void;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<CommandPalettePart>;
 }
-/** Global search/command palette built on `cmdk`, shown in a modal dialog. */
-export declare function CommandPalette({ open, onClose, items, label, placeholder, emptyLabel, formatResultCount, closeKeyLabel, query, onQueryChange, className, }: CommandPaletteProps): import("react").JSX.Element;
+/** Global search/command palette built on the in-house command primitive, shown in a modal dialog. */
+export declare function CommandPalette({ open, onClose, items, label, placeholder, emptyLabel, formatResultCount, closeKeyLabel, query, onQueryChange, className, classNames, }: CommandPaletteProps): import("react").JSX.Element;

package/dist/palette/command-palette/command-palette.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Command, useCommandState } from "cmdk";
-import { Search } from "lucide-react";
+import { Search } from "../../icons/index.js";
+import * as Command from "../../primitives/command/command.js";
 import { cn } from "../../utils/cn.js";
 function groupItems(items) {
   const groups = /* @__PURE__ */ new Map();
@@ -13,7 +13,7 @@ function groupItems(items) {
   return [...groups.entries()];
 }
 function ResultCount({ format }) {
-  const count = useCommandState((state) => state.filtered.count);
+  const count = Command.useCommandState((state) => state.filtered.count);
   return /* @__PURE__ */ jsx("span", { "data-palette-results": true, "aria-live": "polite", className: "sr-only", children: format(count) });
 }
 function CommandPalette({
@@ -27,7 +27,8 @@ function CommandPalette({
   closeKeyLabel = "Esc",
   query,
   onQueryChange,
-  className
+  className,
+  classNames
 }) {
   return /* @__PURE__ */ jsxs(
     Command.Dialog,
@@ -37,55 +38,104 @@ function CommandPalette({
         if (!next) onClose();
       },
       label,
-      overlayClassName: "fixed inset-0 z-50 bg-scrim",
+      overlayClassName: cn("fixed inset-0 z-50 bg-scrim", classNames?.overlay),
       contentClassName: cn(
         "@container/palette fixed top-[9vh] left-1/2 z-50 flex max-h-[70vh] w-[min(560px,calc(100vw-1rem))] -translate-x-1/2 flex-col overflow-hidden rounded-dialog surface-overlay shadow-overlay",
+        classNames?.root,
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 border-b-divider px-3 py-3 @min-[420px]/palette:px-4 @min-[420px]/palette:py-3.5", children: [
-          /* @__PURE__ */ jsx(Search, { className: "size-4.5 shrink-0 text-ink-3", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx(
-            Command.Input,
-            {
-              autoFocus: true,
-              placeholder,
-              className: "min-w-0 flex-1 bg-transparent text-body text-ink outline-none placeholder:text-ink-3",
-              ...onQueryChange ? { value: query ?? "", onValueChange: onQueryChange } : {}
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-xs border-divider bg-surface-2 px-1.25 py-1 font-mono @max-[360px]/palette:hidden text-count text-ink-2", children: closeKeyLabel })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2.5 border-b-divider px-3 py-3 @min-[420px]/palette:px-4 @min-[420px]/palette:py-3.5",
+              classNames?.header
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                Search,
+                {
+                  className: cn("size-4.5 shrink-0 text-ink-3", classNames?.searchIcon),
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Command.Input,
+                {
+                  autoFocus: true,
+                  placeholder,
+                  className: cn(
+                    "min-w-0 flex-1 bg-transparent text-body text-ink outline-none placeholder:text-ink-3",
+                    classNames?.input
+                  ),
+                  ...onQueryChange ? { value: query ?? "", onValueChange: onQueryChange } : {}
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "shrink-0 rounded-xs border-divider bg-surface-2 px-1.25 py-1 font-mono @max-[360px]/palette:hidden text-count text-ink-2",
+                    classNames?.closeKey
+                  ),
+                  children: closeKeyLabel
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(ResultCount, { format: formatResultCount }),
-        /* @__PURE__ */ jsxs(Command.List, { className: "overflow-y-auto p-1.5 @min-[420px]/palette:p-2", children: [
-          /* @__PURE__ */ jsx(Command.Empty, { className: "p-4 text-center text-ink-3 text-meta", children: emptyLabel }),
-          groupItems(items).map(([group, groupItemsList]) => /* @__PURE__ */ jsx(
-            Command.Group,
-            {
-              heading: group,
-              className: "[&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:pt-1.5 [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:text-meta [&_[cmdk-group-heading]]:text-ink-3",
-              children: groupItemsList.map((item) => /* @__PURE__ */ jsxs(
-                Command.Item,
+        /* @__PURE__ */ jsxs(
+          Command.List,
+          {
+            className: cn("overflow-y-auto p-1.5 @min-[420px]/palette:p-2", classNames?.list),
+            children: [
+              /* @__PURE__ */ jsx(Command.Empty, { className: cn("p-4 text-center text-ink-3 text-meta", classNames?.empty), children: emptyLabel }),
+              groupItems(items).map(([group, groupItemsList]) => /* @__PURE__ */ jsx(
+                Command.Group,
                 {
-                  value: item.id,
-                  keywords: [item.label, item.hint ?? "", ...item.keywords ?? []],
-                  onSelect: () => {
-                    item.onSelect();
-                    onClose();
-                  },
-                  className: "flex w-full cursor-pointer items-center gap-2.5 rounded-control px-2.5 py-2 text-ink text-meta data-[selected=true]:bg-surface-2 [&_svg]:size-4 [&_svg]:text-ink-3",
-                  children: [
-                    item.icon,
-                    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: item.label }),
-                    item.hint ? /* @__PURE__ */ jsx("span", { className: "ml-auto max-w-[40%] shrink-0 truncate text-ink-3 text-meta @max-[360px]/palette:hidden", children: item.hint }) : null
-                  ]
+                  heading: group,
+                  className: cn(
+                    "[&_[data-ui-command-group-heading]]:px-2.5 [&_[data-ui-command-group-heading]]:pt-1.5 [&_[data-ui-command-group-heading]]:pb-1 [&_[data-ui-command-group-heading]]:text-meta [&_[data-ui-command-group-heading]]:text-ink-3",
+                    classNames?.group
+                  ),
+                  children: groupItemsList.map((item) => /* @__PURE__ */ jsxs(
+                    Command.Item,
+                    {
+                      value: item.id,
+                      keywords: [item.label, item.hint ?? "", ...item.keywords ?? []],
+                      onSelect: () => {
+                        item.onSelect();
+                        onClose();
+                      },
+                      className: cn(
+                        "flex w-full cursor-pointer items-center gap-2.5 rounded-control px-2.5 py-2 text-ink text-meta data-[selected=true]:bg-surface-2 [&_svg]:size-4 [&_svg]:text-ink-3",
+                        classNames?.item
+                      ),
+                      children: [
+                        item.icon,
+                        /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate", classNames?.itemLabel), children: item.label }),
+                        item.hint ? /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn(
+                              "ml-auto max-w-[40%] shrink-0 truncate text-ink-3 text-meta in-data-[selected=true]:text-ink-2 @max-[360px]/palette:hidden",
+                              classNames?.itemHint
+                            ),
+                            children: item.hint
+                          }
+                        ) : null
+                      ]
+                    },
+                    item.id
+                  ))
                 },
-                item.id
+                group
               ))
-            },
-            group
-          ))
-        ] })
+            ]
+          }
+        )
       ]
     }
   );

package/dist/palette/command-palette/index.d.ts

@@ -1 +1 @@
-export { CommandPalette, type CommandPaletteItem, type CommandPaletteProps, } from "./command-palette.js";
+export { CommandPalette, type CommandPaletteItem, type CommandPalettePart, type CommandPaletteProps, } from "./command-palette.js";

package/dist/primitives/command/command.d.ts

@@ -0,0 +1,82 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type CommandFilter } from "./score.js";
+import { type CommandState } from "./store.js";
+/**
+ * Unstyled command menu (search box plus a filterable, keyboard-navigable listbox) in the
+ * shape of the popular React command menu libraries. Parts expose `data-ui-command-*` hooks, `data-selected` and
+ * `data-disabled`; the list height is published as `--ui-command-list-height`.
+ */
+export type { CommandFilter, CommandState };
+/** Subscribes to a slice of the command state. The selector must return a primitive or a stable reference. */
+export declare function useCommandState<T>(selector: (state: CommandState) => T): T;
+export interface CommandRootProps extends Omit<ComponentProps<"div">, "defaultValue" | "onChange"> {
+    /** Accessible name of the search box. */
+    label?: string;
+    /** Turn off to render results as given (server-side search). Defaults to true. */
+    shouldFilter?: boolean;
+    /** Scoring override: return 0 to hide an item, higher to rank it first. */
+    filter?: CommandFilter;
+    /** Controlled highlighted item `value`. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Wrap from the last item to the first and back. Defaults to false. */
+    loop?: boolean;
+    /** Ctrl+N/P/J/K navigate like ArrowDown/ArrowUp. Defaults to true. */
+    vimBindings?: boolean;
+}
+export declare function Root({ label, shouldFilter, filter, value, defaultValue, onValueChange, loop, vimBindings, onKeyDown, children, ref, ...props }: CommandRootProps): import("react").JSX.Element;
+export interface CommandInputProps extends Omit<ComponentProps<"input">, "value" | "onChange" | "type"> {
+    /** Controlled search text. */
+    value?: string;
+    onValueChange?: (search: string) => void;
+}
+export declare function Input({ value, onValueChange, onKeyDown, ref, ...props }: CommandInputProps): import("react").JSX.Element;
+export interface CommandListProps extends ComponentProps<"div"> {
+    /** Accessible name of the listbox. */
+    label?: string;
+}
+export declare function List({ label, children, ref, ...props }: CommandListProps): import("react").JSX.Element;
+export interface CommandItemProps extends Omit<ComponentProps<"div">, "onSelect" | "value"> {
+    /** Identity and default search text. Defaults to the item's text content. */
+    value?: string;
+    /** Extra terms that match this item. */
+    keywords?: string[];
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    /** Keep rendering the item while a search would hide it. */
+    forceMount?: boolean;
+}
+export declare function Item({ value: valueProp, keywords, disabled, onSelect, forceMount, onClick, onPointerMove, children, ref, ...props }: CommandItemProps): import("react").JSX.Element | null;
+export interface CommandGroupProps extends Omit<ComponentProps<"div">, "heading"> {
+    heading?: ReactNode;
+    /** Keep the group visible while a search would hide it. */
+    forceMount?: boolean;
+}
+export declare function Group({ heading, forceMount, children, ref, ...props }: CommandGroupProps): import("react").JSX.Element;
+export interface CommandSeparatorProps extends ComponentProps<"div"> {
+    /** Keep the separator while a search is active. */
+    alwaysRender?: boolean;
+}
+export declare function Separator({ alwaysRender, ...props }: CommandSeparatorProps): import("react").JSX.Element | null;
+export declare function Empty(props: ComponentProps<"div">): import("react").JSX.Element | null;
+export interface CommandLoadingProps extends ComponentProps<"div"> {
+    /** Progress from 0 to 100. */
+    progress?: number;
+    label?: string;
+}
+/** A progress indicator for async results. Place it next to `List`: a listbox may only contain options and groups. */
+export declare function Loading({ progress, label, children, ...props }: CommandLoadingProps): import("react").JSX.Element;
+export interface CommandDialogProps extends CommandRootProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Portal target. Defaults to `document.body`. */
+    container?: HTMLElement | null;
+    overlayClassName?: string;
+    contentClassName?: string;
+    onOpenAutoFocus?: (event: Event) => void;
+    onCloseAutoFocus?: (event: Event) => void;
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+}
+/** A modal dialog (focus trap, scroll lock, Escape and outside dismissal) around a command menu. */
+export declare function Dialog({ open, onOpenChange, container, overlayClassName, contentClassName, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, label, children, ...rootProps }: CommandDialogProps): import("react").JSX.Element;