@kitn.ai/ui 0.15.0 → 0.16.0

package/dist/components/chat-thread.d.ts

@@ -0,0 +1,93 @@
+import { AttachmentData } from './attachments';
+import { SlashCommandItem } from './slash-command';
+import { ChatMessage } from '../elements/chat-types';
+import { ProseSize } from '../primitives/chat-config';
+import { ModelOption } from '../types';
+export interface ChatThreadContextUsage {
+    usedTokens: number;
+    maxTokens: number;
+    inputTokens?: number;
+    outputTokens?: number;
+    estimatedCost?: number;
+}
+export interface ChatThreadProps {
+    /** Extra classes for the thread root (e.g. `h-full`). */
+    class?: string;
+    /** The full message thread to render, newest last. Each entry carries its role,
+     *  content, and optional reasoning/tools/attachments/actions. Set as a JS
+     *  property (`el.messages = [...]`). */
+    messages: ChatMessage[];
+    /** Controlled value of the input. When set, the host owns the input text and
+     *  must update it on `kai-value-change`; leave unset for uncontrolled behavior. */
+    value?: string;
+    /** Placeholder text shown in the empty input. */
+    placeholder?: string;
+    /** When true, shows the loading/streaming state and disables submit (use while
+     *  awaiting the assistant's reply). */
+    loading?: boolean;
+    /** Starter prompts shown above the input when the thread is empty. Clicking one
+     *  follows `suggestionMode`. Set as a JS property. */
+    suggestions?: string[];
+    /** What clicking a suggestion does: `'submit'` (default) sends it immediately
+     *  as if typed and submitted; `'fill'` just places it in the input. */
+    suggestionMode?: 'submit' | 'fill';
+    /** Keep suggestions visible after the conversation starts. By default
+     *  suggestions are conversation starters and hide once `messages` is
+     *  non-empty; set this to keep them always shown. Default false. */
+    persistSuggestions?: boolean;
+    /** Body/prose font scale for rendered markdown (`'xs' | 'sm' | 'base' | 'lg'`).
+     *  Defaults to `'sm'`. */
+    proseSize?: ProseSize;
+    /** Shiki theme name for syntax-highlighted code blocks (e.g.
+     *  `'github-dark-dimmed'`). */
+    codeTheme?: string;
+    /** Enable Shiki syntax highlighting in code blocks. Turn off to render plain
+     *  `<pre>` blocks (lighter, no highlighter load). Default true. */
+    codeHighlight?: boolean;
+    /** Optional header title shown on the left of the header. */
+    chatTitle?: string;
+    /** Optional model list. When set (>1 model) a ModelSwitcher is shown in the
+     *  header and a `kai-model-change` event fires on selection. */
+    models?: ModelOption[];
+    /** The currently selected model id (pairs with `models`). */
+    currentModel?: string;
+    /** Optional context-window token usage. When set, a Context token meter is
+     *  shown in the header. */
+    context?: ChatThreadContextUsage;
+    /** Show the scroll-to-bottom button inside the scroll area. Default true. */
+    scrollButton?: boolean;
+    /** Whether the host has `slot="header-start"` content (left of the title) —
+     *  set by the `<kai-chat>` facade so a custom control forces the header open. */
+    headerStart?: boolean;
+    /** Whether the host has `slot="header-end"` content (right of the controls). */
+    headerEnd?: boolean;
+    /** Show a Search (Globe) button in the input toolbar; fires a `search` event. */
+    search?: boolean;
+    /** Show a Voice (Mic) button in the input toolbar; fires a `voice` event. */
+    voice?: boolean;
+    /** Slash commands — when set, typing `/` in the input opens the command
+     *  palette and fires `kai-slash-select`. Set as a JS property. */
+    slashCommands?: SlashCommandItem[];
+    /** Command ids to highlight as active in the palette. */
+    slashActiveIds?: string[];
+    /** Single-line palette rows. */
+    slashCompact?: boolean;
+    /** Whether each message's action bar is always visible (`'always'`, default)
+     *  or only revealed on hover of that message row (`'hover'`). */
+    actionsReveal?: 'always' | 'hover';
+    onValueChange?: (value: string) => void;
+    onSubmit?: (detail: {
+        value: string;
+        attachments: AttachmentData[];
+    }) => void;
+    onSuggestionClick?: (value: string) => void;
+    onModelChange?: (modelId: string) => void;
+    onMessageAction?: (detail: {
+        messageId: string;
+        action: string;
+    }) => void;
+    onSearch?: () => void;
+    onVoice?: () => void;
+    onSlashSelect?: (command: SlashCommandItem) => void;
+}
+export declare function ChatThread(props: ChatThreadProps): import("solid-js").JSX.Element;

package/dist/components/checkpoint.d.ts

@@ -0,0 +1,20 @@
+import { JSX } from 'solid-js';
+export interface CheckpointProps extends JSX.HTMLAttributes<HTMLDivElement> {
+}
+export declare function Checkpoint(props: CheckpointProps): JSX.Element;
+export interface CheckpointIconProps {
+    class?: string;
+    children?: JSX.Element;
+}
+export declare function CheckpointIcon(props: CheckpointIconProps): JSX.Element;
+export interface CheckpointTriggerProps {
+    tooltip?: string;
+    /** Accessible name for the button — required when it has no visible text (icon-only). */
+    'aria-label'?: string;
+    onClick?: () => void;
+    children?: JSX.Element;
+    class?: string;
+    variant?: 'ghost' | 'default' | 'outline';
+    size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
+}
+export declare function CheckpointTrigger(props: CheckpointTriggerProps): JSX.Element;

package/dist/components/choice-card.d.ts

@@ -0,0 +1,77 @@
+import { JSX } from 'solid-js';
+import { CardEnvelope, CardHost, CardResolution } from '../primitives/card-contract';
+export interface ChoiceOptionMedia {
+    image?: string;
+    imageAlt?: string;
+    icon?: string;
+}
+export interface ChoiceOption {
+    id: string;
+    label: string;
+    description?: string;
+    media?: ChoiceOptionMedia;
+    meta?: string;
+    recommended?: boolean;
+    disabled?: boolean;
+    payload?: unknown;
+}
+export type ChoiceAllowOther = boolean | {
+    label?: string;
+    placeholder?: string;
+};
+export interface ChoiceCardData {
+    prompt?: string;
+    options: ChoiceOption[];
+    allowOther?: ChoiceAllowOther;
+    submitLabel?: string;
+}
+export type ChoiceCardEnvelope = CardEnvelope<'choice', ChoiceCardData>;
+export declare const CHOICE_CARD_TYPE: "choice";
+/** The reserved action id emitted by the `allowOther` free-text submit. */
+export declare const OTHER_ACTION: "__other__";
+/** De-dupe options by id (first wins) and validate their shape. Returns the usable
+ *  list + an optional error message when there's nothing renderable. Modeled on
+ *  `normalizeActions`. */
+export declare function normalizeOptions(options: unknown): {
+    options: ChoiceOption[];
+    error?: string;
+};
+/** Resolve the `allowOther` data field to a config (or null when off). */
+export declare function resolveOtherConfig(allowOther: ChoiceAllowOther | undefined): {
+    label: string;
+    placeholder: string | undefined;
+} | null;
+/** Index of the next non-disabled option, moving by `dir` (+1/-1) from `from`,
+ *  wrapping. Returns `from` when nothing else is focusable. */
+export declare function nextEnabledIndex(options: ChoiceOption[], from: number, dir: 1 | -1): number;
+/** The first non-disabled option index (the initial roving tab stop), or -1. */
+export declare function firstEnabledIndex(options: ChoiceOption[]): number;
+export interface ChoiceCardProps {
+    /** The choice definition (CardEnvelope.data). */
+    data?: ChoiceCardData;
+    /** 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;
+    class?: string;
+    /** When set, render the chromed read-only view instead of the interactive radiogroup. */
+    resolution?: CardResolution;
+}
+/**
+ * `ChoiceCard` — a single-select "pick one of N rich options" card (plans, products,
+ * flights, quick replies) inside `Card` chrome. The options are a WAI-ARIA radiogroup
+ * (list rows) with roving tabindex: clicking a row (or Space/Enter on the focused row)
+ * **selects** it locally without emitting; a **Submit** button below the list then emits
+ * the Card contract's **`action`** verb (`{ kind:'action', cardId, action: option.id,
+ * payload }`) and resolves the card (chosen option shown read-only) so the same pick can't
+ * double-fire. An optional `allowOther` free-text escape appends a selectable "Other…" row;
+ * selecting it reveals an inline text input, and the same Submit emits `action:'__other__'`
+ * with `{ text }`. Emits `ready` on mount and `error` for an unusable definition (inline
+ * error state).
+ */
+export declare function ChoiceCard(props: ChoiceCardProps): JSX.Element;

package/dist/components/code-block.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'solid-js';
+export interface CodeBlockProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    children?: JSX.Element;
+}
+declare function CodeBlock(props: CodeBlockProps): JSX.Element;
+export interface CodeBlockCodeProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    code: string;
+    language?: string;
+    theme?: string;
+}
+declare function CodeBlockCode(props: CodeBlockCodeProps): JSX.Element;
+export interface CodeBlockGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    children?: JSX.Element;
+}
+declare function CodeBlockGroup(props: CodeBlockGroupProps): JSX.Element;
+export { CodeBlock, CodeBlockCode, CodeBlockGroup };

package/dist/components/confirm-card.d.ts

@@ -0,0 +1,57 @@
+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;
+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;
+}
+/**
+ * `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;

package/dist/components/context.d.ts

@@ -0,0 +1,65 @@
+import { JSX } from 'solid-js';
+/** Default fraction (0–1) at which the meter transitions to the warning colour. */
+export declare const DEFAULT_WARN_THRESHOLD = 0.7;
+/** Default fraction (0–1) at which the meter transitions to the danger colour. */
+export declare const DEFAULT_DANGER_THRESHOLD = 0.9;
+/**
+ * Compute the severity level for a given usage fraction and thresholds.
+ * `pct` is a 0–1 fraction (e.g. `usedTokens / maxTokens`).
+ */
+export declare function computeSeverity(pct: number, warnThreshold?: number, dangerThreshold?: number): ContextSeverity;
+export type ContextSeverity = 'ok' | 'warn' | 'danger';
+export interface ContextProps {
+    usedTokens: number;
+    maxTokens: number;
+    inputTokens?: number;
+    outputTokens?: number;
+    reasoningTokens?: number;
+    cacheTokens?: number;
+    estimatedCost?: number;
+    /**
+     * Fraction (0–1) above which the progress bar turns yellow.
+     * Defaults to `0.7` (70%).
+     */
+    warnThreshold?: number;
+    /**
+     * Fraction (0–1) above which the progress bar turns red.
+     * Defaults to `0.9` (90%).
+     */
+    dangerThreshold?: number;
+    children?: JSX.Element;
+}
+export declare function Context(props: ContextProps): JSX.Element;
+export interface ContextTriggerProps {
+    children?: JSX.Element;
+    class?: string;
+}
+export declare function ContextTrigger(props: ContextTriggerProps): JSX.Element;
+export interface ContextContentProps {
+    class?: string;
+    children?: JSX.Element;
+}
+export declare function ContextContent(props: ContextContentProps): JSX.Element;
+export interface ContextContentHeaderProps {
+    class?: string;
+    children?: JSX.Element;
+}
+export declare function ContextContentHeader(props: ContextContentHeaderProps): JSX.Element;
+export interface ContextContentBodyProps {
+    class?: string;
+    children?: JSX.Element;
+}
+export declare function ContextContentBody(props: ContextContentBodyProps): JSX.Element;
+export interface ContextContentFooterProps {
+    class?: string;
+    children?: JSX.Element;
+}
+export declare function ContextContentFooter(props: ContextContentFooterProps): JSX.Element;
+export interface ContextUsageRowProps {
+    class?: string;
+    children?: JSX.Element;
+}
+export declare function ContextInputUsage(props: ContextUsageRowProps): JSX.Element;
+export declare function ContextOutputUsage(props: ContextUsageRowProps): JSX.Element;
+export declare function ContextReasoningUsage(props: ContextUsageRowProps): JSX.Element;
+export declare function ContextCacheUsage(props: ContextUsageRowProps): JSX.Element;

package/dist/components/conversation-item.d.ts

@@ -0,0 +1,8 @@
+import { ConversationSummary } from '../types';
+export interface ConversationItemProps {
+    conversation: ConversationSummary;
+    isActive: boolean;
+    onSelect: (id: string) => void;
+    class?: string;
+}
+export declare function ConversationItem(props: ConversationItemProps): import("solid-js").JSX.Element;

package/dist/components/conversation-list.d.ts

@@ -0,0 +1,11 @@
+import { ConversationSummary, ConversationGroup } from '../types';
+export interface ConversationListProps {
+    groups: ConversationGroup[];
+    conversations: ConversationSummary[];
+    activeId?: string;
+    onSelect: (id: string) => void;
+    onNewChat: () => void;
+    onToggleSidebar?: () => void;
+    class?: string;
+}
+export declare function ConversationList(props: ConversationListProps): import("solid-js").JSX.Element;

package/dist/components/embed.d.ts

@@ -0,0 +1,21 @@
+import { JSX } from 'solid-js';
+import { CardEvent } from '../primitives/card-contract';
+import { EmbedCardData } from '../primitives/embed-providers';
+export interface EmbedProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onError'> {
+    /** The card id correlating every emitted event. */
+    cardId: string;
+    /** The embed payload (data-down). */
+    data: EmbedCardData;
+    /** Emit a contract CardEvent up (host routes it). */
+    onEmit?: (event: CardEvent) => void;
+}
+/**
+ * `Embed` — a privacy-first lazy media facade. Initial render is a poster + a play
+ * button: NO provider iframe, NO provider JS, NO cookies until the user opts in.
+ * On play it swaps in the provider `<iframe>` (youtube-nocookie / vimeo dnt /
+ * allowlisted generic). A persistent "Open on {provider}" affordance routes the
+ * contract `open` verb so a blocked embed is never a dead end. The only verbs it
+ * emits are lifecycle `ready`, `open`, and failure `error`.
+ */
+export declare function Embed(props: EmbedProps): JSX.Element;
+export type { EmbedCardData } from '../primitives/embed-providers';

package/dist/components/empty.d.ts

@@ -0,0 +1,43 @@
+import { JSX } from 'solid-js';
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Empty — a composable empty-state block, modeled on shadcn/ui's `Empty`.
+ * Structure:
+ *   Empty
+ *   ├── EmptyHeader
+ *   │   ├── EmptyMedia   (icon / avatar)
+ *   │   ├── EmptyTitle
+ *   │   └── EmptyDescription
+ *   └── EmptyContent     (actions / suggestions)
+ *
+ * Styling is token-driven (`--color-*`), so it themes with the rest of the kit.
+ * No visible border by default; add `border border-dashed` via `class` for a card.
+ */
+export interface EmptyProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    children: JSX.Element;
+}
+declare function Empty(props: EmptyProps): JSX.Element;
+export interface EmptyHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    children: JSX.Element;
+}
+declare function EmptyHeader(props: EmptyHeaderProps): JSX.Element;
+declare const emptyMediaVariants: (props?: ({
+    variant?: "default" | "icon" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface EmptyMediaProps extends JSX.HTMLAttributes<HTMLDivElement>, VariantProps<typeof emptyMediaVariants> {
+    children: JSX.Element;
+}
+declare function EmptyMedia(props: EmptyMediaProps): JSX.Element;
+export interface EmptyTitleProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    children: JSX.Element;
+}
+declare function EmptyTitle(props: EmptyTitleProps): JSX.Element;
+export interface EmptyDescriptionProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
+    children: JSX.Element;
+}
+declare function EmptyDescription(props: EmptyDescriptionProps): JSX.Element;
+export interface EmptyContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    children: JSX.Element;
+}
+declare function EmptyContent(props: EmptyContentProps): JSX.Element;
+export { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent, emptyMediaVariants, };

package/dist/components/feedback-bar.d.ts

@@ -0,0 +1,45 @@
+import { JSX } from 'solid-js';
+export type FeedbackValue = 'helpful' | 'not-helpful';
+/** Payload of the optional detail form (phase 2). */
+export interface FeedbackDetail {
+    value: FeedbackValue;
+    /** The selected category chip, if any. */
+    category?: string;
+    /** The free-text comment, if entered. */
+    comment?: string;
+}
+export interface FeedbackBarProps {
+    class?: string;
+    /** Prompt shown in the initial "ask" state. */
+    title?: string;
+    /** Optional leading icon shown before the title. */
+    icon?: JSX.Element;
+    /** When set, a not-helpful vote opens an optional detail form before the
+     *  thank-you confirmation. Off → a vote goes straight to thanks. */
+    collectDetail?: boolean;
+    /** Optional category chips offered in the detail form. */
+    categories?: string[];
+    /** Heading for the detail form. */
+    detailTitle?: string;
+    /** Placeholder for the detail comment box. */
+    detailPlaceholder?: string;
+    /** Submit button label in the detail form. */
+    submitLabel?: string;
+    /** Confirmation copy shown after a vote/submit. */
+    thanksMessage?: string;
+    /** Fired immediately when a rating button is clicked (the vote is recorded
+     *  even if the user never fills in the detail form). */
+    onFeedback?: (value: FeedbackValue) => void;
+    /** Fired when the optional detail form is submitted. */
+    onSubmitDetail?: (detail: FeedbackDetail) => void;
+    /** Fired when the bar is dismissed via the close (X) button. */
+    onClose?: () => void;
+}
+/**
+ * An inline thumbs up/down feedback bar that owns its own flow: it asks, then
+ * (optionally, on a not-helpful vote) collects a category + comment, then
+ * confirms with a thank-you — all in place, the way ChatGPT/Claude do it. The
+ * vote fires `onFeedback` immediately; the optional detail fires
+ * `onSubmitDetail`; `onClose` dismisses the bar.
+ */
+export declare function FeedbackBar(props: FeedbackBarProps): JSX.Element;

package/dist/components/file-tree.d.ts

@@ -0,0 +1,57 @@
+import { JSX } from 'solid-js';
+/** A single artifact file the tree can show + the preview can load. */
+export interface FileTreeFile {
+    /** Tree label/key. Folders are built from `/`-delimited segments. */
+    path: string;
+    /** Where the preview loads it (CDN/S3/dev-server/API). */
+    url?: string;
+    /** Source for the Code tab. */
+    code?: string;
+    /** Language id for syntax highlighting (e.g. `html`, `css`, `tsx`). */
+    language?: string;
+    /** Kind — drives the icon + whether Code applies. */
+    type?: 'html' | 'pdf' | 'image' | 'other';
+}
+/** A folder node in the built tree. */
+export interface FileTreeFolderNode {
+    kind: 'folder';
+    /** Last path segment (the folder's display name). */
+    name: string;
+    /** Full `/`-joined path to this folder (stable key). */
+    path: string;
+    children: FileTreeNode[];
+}
+/** A leaf (file) node in the built tree. */
+export interface FileTreeFileNode {
+    kind: 'file';
+    name: string;
+    path: string;
+    file: FileTreeFile;
+}
+export type FileTreeNode = FileTreeFolderNode | FileTreeFileNode;
+/**
+ * Build a nested folder/file tree from a flat list of `/`-delimited paths.
+ *
+ * - `a/b/c.html` nests `c.html` under `b` under `a`.
+ * - Folders are de-duplicated and reused across files.
+ * - Insertion order is preserved per level, with folders sorted before files
+ *   and each group sorted alphabetically (case-insensitive) for a stable,
+ *   readable tree regardless of input order.
+ */
+export declare function buildFileTree(files: FileTreeFile[]): FileTreeNode[];
+export interface FileTreeProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** Flat file list; folders are derived from `/`-delimited paths. */
+    files: FileTreeFile[];
+    /** Currently-selected file path (highlighted). */
+    activeFile?: string;
+    /** Called with a file's path when the user selects it. */
+    onSelect?: (path: string, file: FileTreeFile) => void;
+    /** Folder paths expanded by default. When omitted, all folders start open. */
+    defaultExpanded?: string[];
+}
+/**
+ * `FileTree` — a collapsible, keyboard-navigable file explorer built from a flat
+ * list of `/`-delimited paths. ARIA `tree`/`treeitem`/`group`. Selecting a file
+ * calls `onSelect(path, file)`.
+ */
+export declare function FileTree(props: FileTreeProps): JSX.Element;

package/dist/components/file-upload.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'solid-js';
+export interface FileUploadProps {
+    onFilesAdded: (files: File[]) => void;
+    children: JSX.Element;
+    multiple?: boolean;
+    accept?: string;
+    disabled?: boolean;
+}
+declare function FileUpload(props: FileUploadProps): JSX.Element;
+export interface FileUploadTriggerProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+declare function FileUploadTrigger(props: FileUploadTriggerProps): JSX.Element;
+export interface FileUploadContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+}
+declare function FileUploadContent(props: FileUploadContentProps): JSX.Element;
+export { FileUpload, FileUploadTrigger, FileUploadContent };

package/dist/components/form-widgets.d.ts

@@ -0,0 +1,31 @@
+import { JSX } from 'solid-js';
+import { FormField } from './form';
+/** The shared prop shape every leaf widget receives from FieldRow. */
+export interface WidgetProps {
+    id: string;
+    value: unknown;
+    field: FormField;
+    disabled: boolean;
+    placeholder?: string;
+    required: boolean;
+    invalid: boolean;
+    describedBy?: string;
+    label: string;
+    onInput: (value: unknown) => void;
+    onBlur: () => void;
+}
+/** text / email / url / date / datetime / time / password — all <input> variants. */
+export declare function TextWidget(props: WidgetProps & {
+    variant: 'text' | 'email' | 'url' | 'date' | 'datetime' | 'time' | 'password';
+}): JSX.Element;
+export declare function TextareaWidget(props: WidgetProps): JSX.Element;
+export declare function NumberWidget(props: WidgetProps): JSX.Element;
+export declare function SliderWidget(props: WidgetProps): JSX.Element;
+export declare function RatingWidget(props: WidgetProps): JSX.Element;
+export declare function SwitchWidget(props: WidgetProps): JSX.Element;
+export declare function CheckboxWidget(props: WidgetProps): JSX.Element;
+export declare function RadioGroupWidget(props: WidgetProps): JSX.Element;
+export declare function SelectWidget(props: WidgetProps): JSX.Element;
+export declare function CheckboxGroupWidget(props: WidgetProps): JSX.Element;
+export declare function MultiSelectWidget(props: WidgetProps): JSX.Element;
+export declare function TagListWidget(props: WidgetProps): JSX.Element;