@kitn.ai/ui/dist/ui/dialog.d.ts

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

import { Accessor, JSX } from 'solid-js';
/** Imperative open controller, handed to a parent (e.g. the kai-dialog facade)
 *  via `controllerRef` so it can drive/observe open state with `wireDisclosure`. */
export interface DialogController {
    open: Accessor<boolean>;
    setOpen: (v: boolean) => void;
}
export interface DialogProps {
    /** Dialog body — the default slot / main content. */
    children?: JSX.Element;
    /** Optional header region (e.g. a title). Rendered above the body with a divider. */
    header?: JSX.Element;
    /** Optional footer region (e.g. action buttons). Rendered below the body with a divider. */
    footer?: JSX.Element;
    /** Controlled open state. When set, the component never changes it itself —
     *  drive it from `onOpenChange`. Omit for uncontrolled (internal) state. */
    open?: boolean;
    /** Initial open state when uncontrolled. */
    defaultOpen?: boolean;
    /** Fires whenever the dialog wants to open or close (Escape / backdrop / method). */
    onOpenChange?: (open: boolean) => void;
    /** Receive the open controller (open accessor + setOpen) once mounted. */
    controllerRef?: (api: DialogController) => void;
    /** Receive the focusable panel node so a facade's `focus()` can target it. */
    panelRef?: (el: HTMLElement) => void;
    /** Accessible name for the dialog when no `header` is provided. */
    'aria-label'?: string;
    /** Extra class applied to the panel (e.g. a wider `max-w-*`). */
    class?: string;
}
/**
 * Dialog is the presentational centered modal surface. It renders through a Portal
 * (so it escapes any clipping/stacking ancestor), dims the page with a backdrop,
 * and centers a panel with a sensible max width/height and internal scroll. It
 * closes on Escape and on a backdrop click (never on a panel click), moves focus
 * into the panel on open and restores it on close, and runs a basic Tab focus
 * trap so keyboard focus cycles within the panel while open. The developer owns
 * when it opens (drive `open` / `defaultOpen`); this owns being the modal.
 *
 * Styleable parts: `backdrop` · `panel` · `header` · `body` · `footer`.
 */
export declare function Dialog(props: DialogProps): JSX.Element;