@kitn.ai/ui 0.16.0 → 0.18.0

package/dist/ui/prompt-dock.d.ts

@@ -0,0 +1,96 @@
+import { JSX } from 'solid-js';
+/** How the tray frames the input — the SPATIAL axis (padding/inset only).
+ *  Orthogonal to {@link PromptDockAppearance}, which controls the surface.
+ *  - `inset` (default) — uniform inset frames the input on ALL edges (the classic look).
+ *  - `edge` — top/bottom inset only; the input sits FLUSH left/right so the lips span
+ *    the full width.
+ *  - `none` — no inset at all; the lips attach directly to the input as a plain stack. */
+export type PromptDockFrame = 'inset' | 'edge' | 'none';
+/** How the tray surface looks — the VISUAL axis (background / border / radius only).
+ *  Orthogonal to {@link PromptDockFrame}, which controls the spatial inset. Works like
+ *  a button variant.
+ *  - `soft` (default) — sunken surface + border + radius (the classic look).
+ *  - `outlined` — transparent surface + border + radius.
+ *  - `filled` — sunken surface, no border, + radius.
+ *  - `plain` — transparent surface, no border, no radius (truly bare). */
+export type PromptDockAppearance = 'soft' | 'outlined' | 'filled' | 'plain';
+export interface PromptDockProps {
+    /** Optional content for the recessed band ABOVE the input (a notice, a hint).
+     *  When omitted, no top lip renders and only the input shows. */
+    top?: JSX.Element;
+    /** Optional content for the recessed band BELOW the input (a mode / control row).
+     *  When omitted, no bottom lip renders. */
+    bottom?: JSX.Element;
+    /** Extra classes for the TOP lip wrapper, merged over the default band styling.
+     *  Use this to give the top region its own surface (e.g. a tinted notice) without
+     *  affecting the bottom. The eventual `kai-prompt-dock` element will expose the
+     *  same region via `::part(top)`. */
+    topClass?: string;
+    /** Extra classes for the BOTTOM lip wrapper, merged over the default band styling.
+     *  The eventual `kai-prompt-dock` element will expose this region via
+     *  `::part(bottom)`. */
+    bottomClass?: string;
+    /** How the tray frames the input — the SPATIAL inset only. Defaults to `'inset'`
+     *  (the classic recessed look), so existing consumers are unaffected.
+     *  See {@link PromptDockFrame}. */
+    frame?: PromptDockFrame;
+    /** How the tray surface looks — the VISUAL axis (background / border / radius),
+     *  orthogonal to `frame`. Defaults to `'soft'` (the classic look), so existing
+     *  consumers are unaffected. See {@link PromptDockAppearance}. */
+    appearance?: PromptDockAppearance;
+    /** The prompt input - the raised card that floats on the tray. */
+    children: JSX.Element;
+    /** Extra classes for the outer tray. */
+    class?: string;
+}
+/**
+ * PromptDock - a recessed tray that frames a prompt input and can extend with
+ * optional "lip" regions above and/or below it.
+ *
+ * The model: the input stays the prominent, fully-rounded RAISED card; the lips
+ * sit in a slightly darker, RECESSED band tucked above and/or below it, sharing
+ * the tray's outer rounding so the whole thing reads as one cohesive control.
+ * When nothing is slotted top or bottom, only the input shows: no visible lip.
+ *
+ * Styling splits into two ORTHOGONAL axes so the spatial framing and the surface
+ * can be set independently (like a button's size vs. its variant):
+ *
+ * `frame` - the SPATIAL inset (padding only):
+ *   - `inset` (default) - a small, uniform inset frames the input on EVERY side
+ *     (the tray padding plus the flex gap give a ~6px frame). The classic look.
+ *   - `edge` - top/bottom inset only; the input is FLUSH on the left / right so the
+ *     lips span the full width. Matches the Claude Code / Codex references, where the
+ *     lip is a top/bottom phenomenon.
+ *   - `none` - no inset at all; the lips attach directly to the input as a plain
+ *     vertical stack. The lips keep their own internal padding so content still has
+ *     breathing room.
+ *
+ * `appearance` - the SURFACE (background / border / radius):
+ *   - `soft` (default) - sunken surface + border + radius (the classic look).
+ *   - `outlined` - transparent surface + border + radius.
+ *   - `filled` - sunken surface, no border, + radius.
+ *   - `plain` - transparent surface, no border, no radius (truly bare).
+ *
+ * The two are independent: e.g. `frame="none" appearance="plain"` is a bare stack,
+ * while `frame="inset" appearance="outlined"` keeps the inset but drops the fill.
+ *
+ * Surface, border, radius and inset come from four CSS custom-property TOKENS, so
+ * a consumer can fine-tune the chrome without touching internals (override the var
+ * from outside; the variant chooses the structure). Each is referenced with a
+ * fallback so it resolves stand-alone:
+ *   - `--kai-prompt-dock-surface` - tray background (default `var(--color-surface-sunken)`)
+ *   - `--kai-prompt-dock-border`  - tray border color (default `var(--color-border)`)
+ *   - `--kai-prompt-dock-radius`  - outer radius (default `1.25rem`)
+ *   - `--kai-prompt-dock-inset`   - frame thickness around the input (default `0.375rem`)
+ *
+ * Colors default to the surface tokens (surface-sunken for the tray and lips; the
+ * input brings its own raised bg-surface), so it reads correctly in both light and
+ * dark themes without hardcoded colors. The top and bottom lips are independently
+ * styleable via `topClass` / `bottomClass` (e.g. a tinted notice up top over a
+ * neutral control row below).
+ *
+ * The eventual `kai-prompt-dock` element will expose the same three regions via
+ * `::part(tray)` / `::part(top)` / `::part(bottom)`; the primitive's equivalent
+ * hooks are the `class` / `topClass` / `bottomClass` props.
+ */
+export declare function PromptDock(props: PromptDockProps): JSX.Element;

package/dist/ui/resizable.d.ts

@@ -20,6 +20,18 @@ export declare function normalizeSize(value: SizeValue | undefined): string | un
  * Returns `undefined` when the value is unset.
  */
 export declare function resolveToPx(value: SizeValue | undefined, containerPx: number): number | undefined;
+/**
+ * Build a panel's INITIAL `flex-basis`, clamped into its `[min, max]` bounds so
+ * it never PAINTS past its max (or below its min). The drag handler already
+ * clamps, but only once a drag begins — without this, a percentage default on a
+ * wide container (e.g. `40%` against a `480px` max) renders wider than max and
+ * then SNAPS to max on the first resize. Uses CSS `clamp()`/`min()`/`max()` so
+ * the bound is enforced at layout time against the live container size, with
+ * MIXED units (a `%` default vs a `px` max) resolving correctly — no JS measure.
+ * `basis`/`min`/`max` are already-normalized CSS lengths (see `normalizeSize`);
+ * an undefined `basis` stays undefined → the caller falls back to flexible.
+ */
+export declare function clampBasis(basis: string | undefined, min: string | undefined, max: string | undefined): string | undefined;
 export interface ResizablePanelGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
     orientation?: Orientation;
     children: JSX.Element;

package/dist/ui/scroll-area.d.ts

@@ -1,5 +1,9 @@
 import { JSX } from 'solid-js';
+export type ScrollOrientation = 'vertical' | 'horizontal' | 'both';
 export interface ScrollAreaProps extends JSX.HTMLAttributes<HTMLDivElement> {
     children: JSX.Element;
+    /** Which axis scrolls. `vertical` (default) · `horizontal` · `both`. The cross
+     *  axis is clamped to `hidden` so content can't overflow it. */
+    orientation?: ScrollOrientation;
 }
 export declare function ScrollArea(props: ScrollAreaProps): JSX.Element;

package/dist/ui/segmented.d.ts

@@ -0,0 +1,28 @@
+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;

package/dist/ui/settings-group.d.ts

@@ -0,0 +1,32 @@
+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;

package/dist/ui/skeleton.d.ts

@@ -1,5 +1,17 @@
 import { JSX } from 'solid-js';
+export type SkeletonVariant = 'text' | 'rect' | 'circle';
 export interface SkeletonProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    /** Shape preset. `text` = one or more lines; `rect` = a block; `circle` =
+     *  round. Omit for the bare, class-driven block (size it with utility classes
+     *  yourself — the original low-level usage). */
+    variant?: SkeletonVariant;
+    /** CSS width (a number is treated as px). With a `variant` and no width it
+     *  fills its container (responsive); for `circle` it is the diameter. */
+    width?: string | number;
+    /** CSS height (a number is treated as px). Defaults per variant. */
+    height?: string | number;
+    /** `text` only: how many lines to render (the last is shorter). Default 1. */
+    lines?: number;
 }
 declare function Skeleton(props: SkeletonProps): JSX.Element;
 export { Skeleton };

package/dist/ui/stat.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'solid-js';
+export interface StatProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    /** The small muted caption above the value. */
+    label?: string;
+    /** The big value. A default-slot / `children` override wins over this. */
+    value?: string;
+    /** A small caption below the value. */
+    hint?: string;
+}
+/**
+ * A single metric / KPI tile: a muted label on top, a large value below, and an
+ * optional hint caption. The consumer arranges tiles in their own CSS grid — this
+ * is ONE cell. `children` (the default slot in the element) override `value` for
+ * rich content.
+ */
+export declare function Stat(props: StatProps): JSX.Element;

package/dist/ui/status.d.ts

@@ -0,0 +1,13 @@
+import { JSX } from 'solid-js';
+export type StatusKind = 'new' | 'online' | 'busy' | 'away' | 'offline';
+/** status → background hue utility (backed by the kit's tool-* / muted tokens). */
+export declare const STATUS_BG: Record<StatusKind, string>;
+export interface StatusProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+    status?: StatusKind;
+    size?: 'sm' | 'md';
+    /** Add an animated ping ring (disabled under prefers-reduced-motion). */
+    pulse?: boolean;
+    /** Accessible name. With it, the dot is announced; without it, it is decorative. */
+    label?: string;
+}
+export declare function Status(props: StatusProps): JSX.Element;

package/dist/ui/switch.d.ts

@@ -1,6 +1,6 @@
 export interface SwitchProps {
     /** Controlled checked state. When set, the component defers state to the
-     *  parent — drive it from `onChange`. Omit for uncontrolled (internal) state. */
+     *  parent; drive it from `onChange`. Omit for uncontrolled (internal) state. */
     checked?: boolean;
     /** Initial checked state when uncontrolled. */
     defaultChecked?: boolean;
@@ -8,8 +8,15 @@ export interface SwitchProps {
     disabled?: boolean;
     /** Accessible label for the control. */
     label?: string;
+    /** Form-control name. When set (paired with `value`), a hidden checkbox carries
+     *  the on/off value for serialization. */
+    name?: string;
+    /** Submitted value when checked (paired with `name`). Defaults to `'on'`. */
+    value?: string;
     /** Fires with the next checked state on toggle. */
     onChange?: (checked: boolean) => void;
+    /** Receives the inner `role="switch"` button so a parent can focus it. */
+    buttonRef?: (el: HTMLButtonElement) => void;
     class?: string;
 }
 /**

package/dist/ui/tabs.d.ts

@@ -0,0 +1,35 @@
+import { JSX } from 'solid-js';
+/** One tab in a `Tabs` strip. `id` is the selected `value` throughout. */
+export interface KaiTabItem {
+    /** Stable id, emitted as the selected `value`. Also useful for `aria-controls`. */
+    id: string;
+    label?: string;
+    /** Named icon (e.g. "code"), image URL / data-URI, or plain text. */
+    icon?: string;
+    disabled?: boolean;
+}
+export type TabsVariant = 'segmented' | 'underline';
+/** variant → tablist container utilities. */
+export declare const TABLIST_CLASS: Record<TabsVariant, string>;
+/** variant → per-tab utilities, given whether the tab is active. */
+export declare function tabClass(variant: TabsVariant, active: boolean): string;
+export interface TabsProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    items?: KaiTabItem[];
+    /** Selected item id. */
+    value?: string;
+    variant?: TabsVariant;
+    /** Stretch the strip to full width, each tab sharing the space equally. */
+    block?: boolean;
+    /** Disable the whole strip. */
+    disabled?: boolean;
+    /** Fired with the newly-selected item's id. */
+    onChange?: (value: string) => void;
+    /** Capture the tablist node (so the facade's `focus()` can target the active tab). */
+    ref?: (el: HTMLDivElement) => void;
+}
+/**
+ * Accessible tab strip. Selection only (emits the selected id via `onChange`);
+ * the consumer renders each tab's content. Roving tabindex, Arrow/Home/End
+ * keyboard nav, disabled items skipped.
+ */
+export declare function Tabs(props: TabsProps): JSX.Element;

package/dist/ui/tooltip.d.ts

@@ -1,8 +1,27 @@
-import { JSX } from 'solid-js';
+import { JSX, Accessor } from 'solid-js';
+import { Placement } from '@floating-ui/dom';
+/** Imperative open controller, handed to a parent (e.g. the kai-tooltip facade)
+ *  via `controllerRef` so it can drive/observe open state. */
+export interface TooltipController {
+    open: Accessor<boolean>;
+    setOpen: (v: boolean) => void;
+}
 export interface TooltipProps {
     content: string;
     children: JSX.Element;
     class?: string;
     openDelay?: number;
+    /** Delay (ms) before it hides after the pointer leaves. Defaults to 0 (hides
+     *  immediately). */
+    closeDelay?: number;
+    /** Preferred placement (post flip/shift). Defaults to `'top'`. */
+    placement?: Placement;
+    /** Initial open state on mount (uncontrolled seed). */
+    defaultOpen?: boolean;
+    /** When true, hover/focus (and `show()`) never opens the tooltip. */
+    disabled?: boolean;
+    /** Receive the open controller (open accessor + setOpen) once mounted. */
+    controllerRef?: (api: TooltipController) => void;
+    dismissOnClick?: boolean;
 }
 export declare function Tooltip(props: TooltipProps): JSX.Element;