@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.
75 lines (74 loc) • 3.7 kB
TypeScript
import { JSX } from 'solid-js';
import { CardEnvelope, CardHost, CardResolution } from '../primitives/card-contract';
export type ConfirmActionStyle = 'primary' | 'default' | 'destructive';
export type ConfirmTone = 'default' | 'warning' | 'danger';
export interface ConfirmAction {
id: string;
label: string;
style?: ConfirmActionStyle;
payload?: unknown;
default?: boolean;
}
export interface ConfirmCardData {
heading?: string;
body?: string;
tone?: ConfirmTone;
actions: ConfirmAction[];
dismissible?: boolean;
}
export type ConfirmCardEnvelope = CardEnvelope<'confirm', ConfirmCardData>;
export declare const CONFIRM_CARD_TYPE: "confirm";
/** Map an action's `style` to a Button variant (falls back + warns on unknown). */
export declare function buttonVariantForStyle(style: ConfirmActionStyle | undefined): 'default' | 'outline' | 'destructive';
/** De-dupe actions by id (first wins) and validate their shape. Returns the usable
* list + an optional error message when there's nothing renderable. */
export declare function normalizeActions(actions: unknown): {
actions: ConfirmAction[];
error?: string;
};
/** The id of the default action (first with `default:true`), if any. */
export declare function defaultActionId(actions: ConfirmAction[]): string | undefined;
/** Imperative handle exposed via `controllerRef` — surfaces the confirm card's
* latent action/dismiss capabilities so the `<kai-confirm>` facade can forward
* them as instance methods (focus/confirm/dismiss/reopen). */
export interface ConfirmController {
/** Focus the default action button (or the first action if none default). */
focus(options?: FocusOptions): void;
/** Activate an action by id (or the default action when omitted) — emits the
* `action` verb + resolves single-shot. */
confirm(actionId?: string): void;
/** Dismiss the card — emits `dismiss` + optimistically collapses to the stub. */
dismiss(): void;
/** Re-open a dismissed card from its stub — emits `reopen`. */
reopen(): void;
}
export interface ConfirmCardProps {
/** The confirm definition (CardEnvelope.data). */
data?: ConfirmCardData;
/** The card id used to correlate every emitted CardEvent. */
cardId?: string;
/** The envelope title rendered in the card chrome. */
heading?: string;
/** Optional explicit CardHost (otherwise read from a CardProvider, otherwise the
* bubbling `kai-card` CustomEvent off `hostElement`). */
host?: CardHost;
/** The custom-element host node, for the bubbling `kai-card` fallback emit. */
hostElement?: HTMLElement;
/** Focus the default action on mount. Default OFF (no focus-stealing mid-stream). */
autofocus?: boolean;
class?: string;
/** When set, render the chromed read-only view instead of the buttons. */
resolution?: CardResolution;
/** Receive the imperative controller once mounted. The `<kai-confirm>` facade
* forwards these as element methods (focus/confirm/dismiss/reopen). */
controllerRef?: (controller: ConfirmController) => void;
}
/**
* `ConfirmCard` — a named-intent approval card. Renders a title + body + a small
* set of action buttons inside `Card` chrome. Activating an action emits the Card
* contract's `action` verb (`{ kind:'action', cardId, action, payload }`) and
* resolves the card (other actions disabled, the chosen one marked) so the same
* approval can't double-fire. Emits `ready` on mount, `dismiss` for the optional
* close affordance, and `error` for an unusable definition (inline error state).
*/
export declare function ConfirmCard(props: ConfirmCardProps): JSX.Element;