@kitn.ai/ui/dist/components/coachmark.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';
import { Placement } from '@floating-ui/dom';
/** Imperative open controller, handed to the kai-coachmark facade via
 *  `controllerRef` so it can drive/observe open state with `wireDisclosure`. */
export interface CoachmarkController {
    open: Accessor<boolean>;
    setOpen: (v: boolean) => void;
}
export interface CoachmarkProps {
    /** The anchor/trigger (the default slot). The bubble is positioned against it. */
    children?: JSX.Element;
    /** The bubble body text (the `content` slot). */
    content?: JSX.Element;
    /** The bold title. NOT `title` — that is a reserved IDL attr (see define.tsx). */
    headline?: JSX.Element;
    /** A small badge pill (e.g. "New"). */
    badge?: JSX.Element;
    /** Floating placement relative to the anchor. Defaults to `'bottom'`. */
    placement?: Placement;
    /** Color tone: `primary` (default, theme accent), `info` (blue), `success`
     *  (green), `warning` (amber), or `error` (red) — reusing the kit's tool hues. */
    tone?: 'primary' | 'info' | 'success' | 'warning' | 'error';
    /** 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 open wants to change (the × button / a method). */
    onOpenChange?: (open: boolean) => void;
    /** Dismiss intent: the × button. */
    onDismiss?: () => void;
    /** Render the arrow that points at the anchor. Defaults to `true`; set `false`
     *  for a plain bubble with no pointer. */
    arrow?: boolean;
    /** Receive the open controller once mounted. */
    controllerRef?: (api: CoachmarkController) => void;
}
/**
 * Coachmark is the presentational onboarding hint: a tinted bubble with an arrow,
 * anchored to a trigger. It wraps the anchor (the default slot) and positions the
 * bubble against it with `usePosition` (the shared Floating UI primitive) so the
 * arrow tracks the anchor on scroll/resize AND when a sibling reflows it,
 * flipping/shifting to stay on screen. The developer owns when it shows
 * (`open`/`default-open`); the ×, Escape, OR clicking the trigger fires
 * `onDismiss`. Color comes from `--kai-coachmark-bg` / `--kai-coachmark-fg` (each
 * defaulting to the `tone` palette), so a consumer can recolor purely in CSS; the
 * arrow reads the same bg var so it always continues the bubble.
 */
export declare function Coachmark(props: CoachmarkProps): JSX.Element;