@kitn.ai/ui/dist/ui/nav.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';
/** Status tone for a nav item's dot. `primary` is the theme accent; the rest use
 *  the kit's tool hues (the same colors as kai-status / kai-progress-bar). Generic
 *  enough for thread/onboarding states (success = "Completed", info = "Working")
 *  and task-run states (neutral = queued, info = running, success = done,
 *  error = failed). */
export type NavStatusTone = 'primary' | 'info' | 'success' | 'warning' | 'error' | 'neutral';
/** A small colored status indicator on a nav row. The `label` (when set) is folded
 *  into the row's accessible name; `pulse` adds an animated ping ring. */
export interface NavItemStatus {
    tone: NavStatusTone;
    /** Short status word ("Working", "Failed"). Shown as muted text and announced. */
    label?: string;
    /** Animated ping ring (disabled under prefers-reduced-motion). */
    pulse?: boolean;
}
export interface KaiNavItem {
    id: string;
    label?: string;
    /** Leading icon: a named icon, an image URL / data-URI, or plain text. */
    icon?: string;
    /** Trailing text pill (e.g. "Beta"). */
    badge?: string;
    /** Trailing icon (a named icon), e.g. an edit/compose affordance. */
    trailing?: string;
    disabled?: boolean;
    /** Nested items. When present, the row becomes a collapsible group: a parent
     *  row with a disclosure chevron over an indented child list. Recurses for
     *  arbitrary depth (primarily 2 levels, e.g. project -> threads). */
    children?: KaiNavItem[];
    /** A small colored status dot (+ optional label) on the row. */
    status?: NavItemStatus;
    /** Right-aligned muted trailing text (e.g. a relative time, "24d ago").
     *  Distinct from `trailing` (a hover icon). */
    meta?: string;
    /** An interactive trailing action button (`icon` is a named icon; `label` is
     *  its accessible name). Activating it fires `onItemAction` and does NOT select
     *  the row. Distinct from `trailing` (a decorative hover icon, not a button). */
    action?: {
        icon: string;
        label: string;
    };
    /** Render an interactive trailing close (×) button. Activating it fires
     *  `onItemClose` and does NOT select the row. */
    closable?: boolean;
}
export interface NavProps extends JSX.HTMLAttributes<HTMLElement> {
    items?: KaiNavItem[];
    /** Active item id (drives aria-current + the selected look). */
    value?: string;
    onItemSelect?: (id: string) => void;
    /** A row's trailing `action` button was activated (not a select). */
    onItemAction?: (id: string, action?: {
        icon: string;
        label: string;
    }) => void;
    /** A `closable` row's trailing close button was activated (not a select). */
    onItemClose?: (id: string) => void;
    /** Ids of group items collapsed on first render. Groups default to expanded. */
    defaultCollapsed?: string[];
}
export declare function Nav(props: NavProps): JSX.Element;