@kitn.ai/ui
Version:
Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.
24 lines (23 loc) • 1.17 kB
TypeScript
import { JSX } from 'solid-js';
export type ProgressTone = 'primary' | 'success' | 'warning' | 'error' | 'info';
/** Fill hue per `tone`. `primary` is the theme accent; the rest use the kit's
* tool hues (the same colors as kai-status / kai-notice). */
export declare const TONE_FILL: Record<ProgressTone, string>;
export interface ProgressBarProps extends JSX.HTMLAttributes<HTMLDivElement> {
/** Current progress value (0..max). */
value: number;
/** The value `value` runs to. Defaults to 100. */
max?: number;
/** Optional caption above the track. */
label?: string;
/** Fill color. Defaults to `primary`. Override via `::part(fill)` for custom hues. */
tone?: ProgressTone;
}
/**
* A thin determinate progress bar: a rounded track with a `bg-primary` fill whose
* width is `value / max`, clamped to 0..100%. Theme-aware (track = `bg-surface-strong`,
* fill = `bg-primary`). Set `tone` for a semantic fill hue. Restyle via
* `::part(track)` / `::part(fill)`. The fill width transitions smoothly under
* `prefers-reduced-motion: no-preference`.
*/
export declare function ProgressBar(props: ProgressBarProps): JSX.Element;