@kitn.ai/ui 0.17.0 → 0.18.0

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,9 +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;