@kitn.ai/ui/dist/ui/segmented.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 SegmentedOption {
    value: string;
    label: string;
    /** Optional leading icon (a JSX node, e.g. a lucide-solid icon). */
    icon?: JSX.Element;
}
export interface SegmentedProps {
    /** The selectable segments, left to right. */
    options: SegmentedOption[];
    /** The selected segment's `value` (controlled). */
    value: string;
    /** Fires with the next `value` when a segment is chosen. */
    onChange: (value: string) => void;
    /** Control density. Defaults to `md`. */
    size?: 'sm' | 'md';
    class?: string;
}
/**
 * `Segmented`: a single-select pill track (a.k.a. segmented / toggle-group). A
 * recessed `bg-surface-sunken` rail of segment buttons where the selected segment
 * lifts onto a raised `bg-background` chip. Token-driven, light + dark.
 *
 * a11y: `role="group"` of real `<button>`s, each carrying `aria-pressed`; a roving
 * tabindex (only the selected segment is in the tab order) with Arrow / Home / End
 * key navigation that moves selection between segments.
 */
export declare function Segmented(props: SegmentedProps): JSX.Element;