@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.
33 lines (32 loc) • 1.29 kB
TypeScript
import { JSX } from 'solid-js';
export interface SettingsGroupProps {
/** Small section heading shown above the card. */
heading: string;
/** Optional muted description under the heading. */
description?: string;
/** The stacked `SettingItem` rows. */
children: JSX.Element;
class?: string;
}
/**
* A settings section: a small heading + optional muted description over a bordered,
* rounded card that stacks `SettingItem` rows with hairline dividers between them.
* Host-agnostic chrome: the SAME group drops into a modal or a full settings page;
* only the content (the rows) changes per app.
*/
export declare function SettingsGroup(props: SettingsGroupProps): JSX.Element;
export interface SettingItemProps {
/** Row label (primary text). */
label: string;
/** Optional secondary description under the label. */
description?: string;
/** The control on the right (a `Switch`, `Segmented`, select, ...). Omit for a
* plain label row. */
control?: JSX.Element;
class?: string;
}
/**
* One row inside a `SettingsGroup`: a left label/description block and an optional
* right-aligned `control`, vertically centered with comfortable padding.
*/
export declare function SettingItem(props: SettingItemProps): JSX.Element;