@kitn.ai/ui/dist/ui/input.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 InputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'onInput' | 'onChange' | 'size'> {
    /** Field label rendered above the control and linked via `for`/`id`. */
    label?: string;
    /** Helper text rendered below the control. */
    hint?: string;
    /** Error text; rendered below the control and flips the field invalid. */
    error?: string;
    /** Control density. Defaults to `md`. */
    size?: 'sm' | 'md';
    /** Force the invalid (destructive-border) state without an `error` string. */
    invalid?: boolean;
    /** Leading affix (icon, unit). Rendered inside the field row, before the input. */
    leading?: JSX.Element;
    /** Trailing affix (icon, inline button). Rendered inside the field row, after the input. */
    trailing?: JSX.Element;
    /** Fires per keystroke with the current value. */
    onValueInput?: (value: string) => void;
    /** Fires on commit (blur) with the current value. */
    onValueChange?: (value: string) => void;
}
export declare const FIELD_BASE = "w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:pointer-events-none";
/**
 * `Input`: the token-themed single-line text field shell. A label/hint/error
 * stack around a field row that holds an optional `leading` affix, the
 * `<input>`, and an optional `trailing` affix. The shared border/background/ring
 * styling lives here (the single field source the form widgets build on).
 *
 * Parts: `field` (the bordered control), `input`, `label`, `hint`.
 * a11y: a generated id links `<label for>`; `invalid`/`error` set `aria-invalid`;
 * the hint/error text is linked via `aria-describedby`.
 */
export declare function Input(props: InputProps): JSX.Element;