@kitn.ai/ui/dist/ui/editable-label.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 { JSX } from 'solid-js';
export interface EditableLabelProps {
    /** The label text. */
    value: string;
    /** Controlled edit state. When it flips true the field opens; double-click and
     *  the host's `edit()` open it too. */
    editing?: boolean;
    /** Placeholder shown while editing (and as muted text when the value is empty). */
    placeholder?: string;
    /** Disable entering edit mode. */
    disabled?: boolean;
    /** Fires on commit (Enter / blur) with the new value — ONLY when it changed. */
    onRename?: (value: string) => void;
    /** Fires on Esc (cancel); the text is restored. */
    onCancel?: () => void;
    class?: string;
}
/**
 * `EditableLabel`: inline rename. Shows `value` as text; double-click (or the
 * `editing` prop, or a host `edit()`) swaps in an autofocused `Input` with the
 * text pre-selected. Enter or blur commits (fires `onRename` only when the value
 * changed); Esc cancels (fires `onCancel`, restores the text). Both exit editing.
 *
 * Parts: `text` (the read view), `input` (the field while editing).
 */
export declare function EditableLabel(props: EditableLabelProps): JSX.Element;