@kitn.ai/ui 0.28.0 → 0.30.0

package/src/ui/popover.tsx

@@ -1,106 +0,0 @@
-import { createSignal, Show, type JSX, type Accessor } from 'solid-js';
-import type { Placement } from '@floating-ui/dom';
-import { cn } from '../utils/cn';
-import { createPresence, usePosition, useDismiss } from './overlay';
-
-/** Imperative open controller, handed to a parent (e.g. the kai-popover facade)
- *  via `controllerRef` so it can drive/observe open state. */
-export interface PopoverController { open: Accessor<boolean>; setOpen: (v: boolean) => void; }
-
-export interface PopoverProps {
-  /** The trigger content (e.g. a button). Clicking it toggles the popover. */
-  trigger: JSX.Element;
-  /** The popover panel content — arbitrary nodes (rows, toggles, nested groups). */
-  children: JSX.Element;
-  /** Floating placement relative to the trigger. */
-  placement?: Placement;
-  /** Gap in px between trigger and panel. */
-  gutter?: number;
-  /** Controlled open state. When set, the component never changes it itself —
-   *  drive it from `onOpenChange`. Omit for uncontrolled (internal) state. */
-  open?: boolean;
-  /** Initial open state when uncontrolled. */
-  defaultOpen?: boolean;
-  /** When true, clicking the trigger never opens the popover. */
-  disabled?: boolean;
-  /** Fires whenever the popover wants to open or close. */
-  onOpenChange?: (open: boolean) => void;
-  /** Receive the open controller (open accessor + setOpen) once mounted. */
-  controllerRef?: (api: PopoverController) => void;
-  /** Extra elements counted as "inside" for outside-click dismissal — e.g. the
-   *  custom-element host, so clicks on slotted panel content don't dismiss. */
-  boundary?: () => HTMLElement | undefined;
-  /** Class applied to the floating panel. */
-  class?: string;
-}
-
-/**
- * A general popover: a trigger that toggles a floating panel of arbitrary
- * content. Unlike `Dropdown` (role="menu" + roving focus), the panel is a
- * `role="dialog"` region, so it can hold model rows, toggles, nested groups —
- * anything. Positioning, exit animation, and Escape/outside-click dismissal
- * come from the shared overlay primitives.
- */
-export function Popover(props: PopoverProps) {
-  const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);
-  const [trigger, setTrigger] = createSignal<HTMLElement>();
-  const [panel, setPanel] = createSignal<HTMLElement>();
-
-  const isControlled = () => props.open !== undefined;
-  const isOpen = () => (isControlled() ? !!props.open : internalOpen());
-  const setOpen = (v: boolean) => {
-    if (!isControlled()) setInternalOpen(v);
-    props.onOpenChange?.(v);
-  };
-
-  // Hand the open controller up to a parent (e.g. the kai-popover facade) so it
-  // can drive/observe open state via wireDisclosure.
-  props.controllerRef?.({ open: isOpen, setOpen });
-
-  const presence = createPresence(isOpen);
-  const position = usePosition(trigger, panel, {
-    placement: props.placement ?? 'bottom-start',
-    gutter: props.gutter ?? 6,
-    // Trigger removed from the DOM -> close so the panel portal doesn't orphan.
-    onDisconnect: () => setOpen(false),
-  });
-  useDismiss({
-    enabled: isOpen,
-    onDismiss: () => setOpen(false),
-    refs: () => [trigger(), panel(), props.boundary?.()],
-  });
-
-  return (
-    <>
-      <span
-        ref={setTrigger}
-        style={{ display: 'inline-flex' }}
-        onClick={() => { if (!props.disabled) setOpen(!isOpen()); }}
-      >
-        {props.trigger}
-      </span>
-      <Show when={presence.present()}>
-        <div
-          ref={(el) => { setPanel(el); presence.setRef(el); }}
-          role="dialog"
-          data-expanded={presence.state() === 'open' ? '' : undefined}
-          data-closed={presence.state() === 'closed' ? '' : undefined}
-          style={{
-            position: 'fixed', left: `${position.pos().x}px`, top: `${position.pos().y}px`,
-            // hide (without unmounting) when the trigger scrolls out of view
-            visibility: position.hidden() ? 'hidden' : 'visible',
-            'pointer-events': position.hidden() ? 'none' : undefined,
-          }}
-          class={cn(
-            // text-sm is a sensible menu default; slotted content can override it.
-            'z-50 min-w-[12rem] rounded-lg bg-card p-1 text-sm kai-elevation',
-            'animate-in fade-in-0 zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95',
-            props.class,
-          )}
-        >
-          {props.children}
-        </div>
-      </Show>
-    </>
-  );
-}

package/src/ui/progress-bar.tsx

@@ -1,83 +0,0 @@
-import { type JSX, Show, splitProps, createUniqueId } from 'solid-js';
-import { cn } from '../utils/cn';
-
-export type ProgressTone = 'primary' | 'success' | 'warning' | 'error' | 'info';
-
-/** Fill hue per `tone`. `primary` is the theme accent; the rest use the kit's
- *  tool hues (the same colors as kai-status / kai-notice). */
-export const TONE_FILL: Record<ProgressTone, string> = {
-  primary: 'bg-primary',
-  success: 'bg-tool-green',
-  warning: 'bg-tool-amber',
-  error: 'bg-tool-red',
-  info: 'bg-tool-blue',
-};
-
-export interface ProgressBarProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  /** Current progress value (0..max). */
-  value: number;
-  /** The value `value` runs to. Defaults to 100. */
-  max?: number;
-  /** Optional caption above the track. */
-  label?: string;
-  /** Fill color. Defaults to `primary`. Override via `::part(fill)` for custom hues. */
-  tone?: ProgressTone;
-}
-
-/**
- * A thin determinate progress bar: a rounded track with a `bg-primary` fill whose
- * width is `value / max`, clamped to 0..100%. Theme-aware (track = `bg-surface-strong`,
- * fill = `bg-primary`). Set `tone` for a semantic fill hue. Restyle via
- * `::part(track)` / `::part(fill)`. The fill width transitions smoothly under
- * `prefers-reduced-motion: no-preference`.
- */
-export function ProgressBar(props: ProgressBarProps) {
-  const [local, rest] = splitProps(props, [
-    'value', 'max', 'label', 'tone', 'class', 'aria-label', 'aria-labelledby',
-  ]);
-  const labelId = createUniqueId();
-  const max = () => local.max ?? 100;
-  // Clamp value into [0, max]; drive both the fill width and aria-valuenow off it
-  // so the bar and the announced value stay consistent.
-  const clamped = () => {
-    const m = max();
-    if (!(m > 0)) return 0;
-    return Math.max(0, Math.min(local.value, m));
-  };
-  const percent = () => {
-    const m = max();
-    return m > 0 ? (clamped() / m) * 100 : 0;
-  };
-  // The progressbar must always carry an accessible name. Prefer the rendered
-  // visible label; else a caller-supplied aria-labelledby/aria-label; else a
-  // generic default so the bar is never nameless (axe `aria-progressbar-name`).
-  const labelledBy = () => (local.label ? labelId : local['aria-labelledby']);
-  const ariaLabel = () =>
-    local.label || local['aria-labelledby'] ? undefined : local['aria-label'] ?? 'Progress';
-  return (
-    <div class={cn('flex flex-col gap-1', local.class)} {...rest}>
-      <Show when={local.label}>
-        <span id={labelId} class="text-xs text-muted-foreground">{local.label}</span>
-      </Show>
-      <div
-        part="track"
-        role="progressbar"
-        aria-valuenow={clamped()}
-        aria-valuemin={0}
-        aria-valuemax={max()}
-        aria-labelledby={labelledBy()}
-        aria-label={ariaLabel()}
-        class="h-1.5 w-full overflow-hidden rounded-full bg-surface-strong"
-      >
-        <div
-          part="fill"
-          class={cn(
-            'h-full rounded-full motion-safe:transition-[width] motion-safe:duration-500 motion-safe:ease-out',
-            TONE_FILL[local.tone ?? 'primary'],
-          )}
-          style={{ width: `${percent()}%` }}
-        />
-      </div>
-    </div>
-  );
-}

package/src/ui/prompt-dock.tsx

@@ -1,145 +0,0 @@
-import { type JSX, Show } from 'solid-js';
-import { cn } from '../utils/cn';
-
-/** 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;
-}
-
-/** Shared base styling for a lip region; per-region classes append/override it. */
-const LIP_BASE = 'px-3 py-2 text-sm leading-snug text-muted-foreground';
-
-/**
- * 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 function PromptDock(props: PromptDockProps) {
-  const frame = (): PromptDockFrame => props.frame ?? 'inset';
-  const appearance = (): PromptDockAppearance => props.appearance ?? 'soft';
-  // `appearance` drives the surface (background / border / radius); `frame` drives the
-  // inset (padding). The two axes are independent.
-  const filled = () => appearance() === 'soft' || appearance() === 'filled';
-  const bordered = () => appearance() === 'soft' || appearance() === 'outlined';
-  return (
-    <div
-      data-prompt-dock
-      part="tray"
-      // Surface / border / radius / inset live in the tokenized inline style so the
-      // var fallbacks resolve and external overrides win; only the structural
-      // flex + gap stay in classes.
-      class={cn('flex flex-col gap-1.5', props.class)}
-      style={{
-        background: filled()
-          ? 'var(--kai-prompt-dock-surface, var(--color-surface-sunken))'
-          : 'transparent',
-        border: bordered()
-          ? '1px solid var(--kai-prompt-dock-border, var(--color-border))'
-          : '0',
-        'border-radius':
-          appearance() === 'plain' ? '0' : 'var(--kai-prompt-dock-radius, 1.25rem)',
-        padding:
-          frame() === 'none'
-            ? '0'
-            : frame() === 'edge'
-              ? 'var(--kai-prompt-dock-inset, 0.375rem) 0'
-              : 'var(--kai-prompt-dock-inset, 0.375rem)',
-      }}
-    >
-      <Show when={props.top}>
-        <div part="top" class={cn(LIP_BASE, props.topClass)}>{props.top}</div>
-      </Show>
-      {props.children}
-      <Show when={props.bottom}>
-        <div part="bottom" class={cn(LIP_BASE, props.bottomClass)}>{props.bottom}</div>
-      </Show>
-    </div>
-  );
-}

package/src/ui/radio.tsx

@@ -1,150 +0,0 @@
-import { type JSX, For, Show, splitProps, createUniqueId } from 'solid-js';
-import { cn } from '../utils/cn';
-
-export interface RadioProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'children'> {}
-
-/**
- * A single radio button. A REAL `<input type="radio">` behind `appearance: none`,
- * styled by the kit's `.kai-radio` rule, never a `<div role="radio">`.
- *
- * The native element is what makes a set of radios a GROUP: browsers give same-`name`
- * radios one tab stop, arrow-key navigation between them, mutual exclusion and form
- * participation, and screen readers announce "2 of 4". None of that is reimplementable
- * for free, and every hand-rolled radio in this kit's control audit had lost some of it.
- *
- * Use {@link RadioGroup} for a set. Reach for a bare `Radio` when you are laying the
- * group out yourself — give every member the same `name`.
- *
- * Everything not listed in `RadioProps` is forwarded to the input, so `id`, `name`,
- * `value`, `required`, `disabled`, `aria-*` and any `data-*` hook behave exactly as
- * they do on a plain `<input>`. No validation is applied: `required` reaches the
- * native attribute and stops there.
- */
-export function Radio(props: RadioProps): JSX.Element {
-  const [local, rest] = splitProps(props, ['class']);
-  return <input {...rest} type="radio" class={cn('kai-radio', local.class)} />;
-}
-
-/** One choice in a {@link RadioGroup}. */
-export interface RadioOption<T = string> {
-  /** The value this row selects. Compared to the group's `value` by identity. */
-  value: T;
-  /** The row's visible label. */
-  label: JSX.Element;
-  /** Optional second line under the label. */
-  description?: JSX.Element;
-  /** Disable this row alone (the group's `disabled` disables all of them). */
-  disabled?: boolean;
-}
-
-export interface RadioGroupProps<T = string>
-  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
-  /** The choices, in display order. */
-  options: readonly RadioOption<T>[];
-  /** The selected value. Matched against each option's `value` by identity. */
-  value?: T;
-  /**
-   * The shared form-control name every radio in the group carries — what makes the
-   * browser treat them as one control. Defaults to a generated id, so the group is
-   * exclusive and keyboard-navigable even when nothing is being submitted.
-   */
-  name?: string;
-  /** Disable every row. */
-  disabled?: boolean;
-  /** Accessible name for the group. Rendered as `aria-label` on the `radiogroup`. */
-  label?: string;
-  /** Fires with the newly selected value (and its option) on selection. */
-  onChange?: (value: T, option: RadioOption<T>) => void;
-  /** Fires when a radio loses focus — the commit point for a form field. */
-  onOptionBlur?: () => void;
-  /** Extra classes for each row. */
-  itemClass?: string;
-  /**
-   * Presentation slot. Replaces the default label/description column with whatever
-   * you return, so a row can carry media, a badge or a price without a second radio
-   * component existing. The control, the row chrome and the group semantics stay ours.
-   */
-  children?: (option: RadioOption<T>, state: { checked: boolean; disabled: boolean }) => JSX.Element;
-}
-
-/**
- * A vertical set of radio rows in a bordered, divided list — the kit's standard
- * "pick exactly one" control.
- *
- * The group is a `role="radiogroup"` wrapper around real `<input type="radio">`s that
- * share a `name`, so the keyboard behaviour (one tab stop, arrows to move) is the
- * browser's and not a reimplementation. Clicking anywhere on a row selects it, because
- * each row is a `<label>`.
- *
- * Everything not listed in `RadioGroupProps` is forwarded to the group element, so
- * `id`, `aria-*` and any `data-*` hook land where a form expects them.
- *
- * ```tsx
- * <RadioGroup
- *   label="Severity"
- *   options={[{ value: 'blocking', label: 'Blocking' }, { value: 'cosmetic', label: 'Cosmetic' }]}
- *   value={severity()}
- *   onChange={setSeverity}
- * />
- * ```
- */
-export function RadioGroup<T = string>(props: RadioGroupProps<T>): JSX.Element {
-  const [local, rest] = splitProps(props, [
-    'options', 'value', 'name', 'disabled', 'label', 'onChange', 'onOptionBlur', 'itemClass', 'children', 'class',
-  ]);
-  const fallbackName = createUniqueId();
-  const groupName = () => local.name ?? fallbackName;
-  return (
-    <div
-      {...rest}
-      role="radiogroup"
-      aria-label={local.label}
-      class={cn('divide-y divide-border overflow-hidden rounded-lg border border-border', local.class)}
-    >
-      <For each={local.options}>
-        {(opt) => {
-          const checked = () => local.value === opt.value;
-          const rowDisabled = () => !!(local.disabled || opt.disabled);
-          return (
-            <label
-              class={cn(
-                'flex cursor-pointer items-center gap-3 px-3 py-2.5 text-sm transition-colors',
-                opt.description !== undefined && 'items-start',
-                checked()
-                  ? 'bg-accent font-medium text-accent-foreground'
-                  : 'text-foreground hover:bg-muted/50',
-                local.itemClass,
-              )}
-            >
-              <Radio
-                name={groupName()}
-                value={String(opt.value)}
-                checked={checked()}
-                disabled={rowDisabled()}
-                class={opt.description === undefined ? undefined : 'mt-0.5'}
-                onChange={() => local.onChange?.(opt.value, opt)}
-                onBlur={() => local.onOptionBlur?.()}
-              />
-              <Show
-                when={local.children}
-                fallback={
-                  // No description → a bare <span>, byte for byte what every call site
-                  // rendered before this component existed. The two-line column only
-                  // appears when there is a second line to put in it.
-                  <Show when={opt.description !== undefined} fallback={<span>{opt.label}</span>}>
-                    <span class="flex flex-col gap-0.5">
-                      <span>{opt.label}</span>
-                      <span class="text-xs font-normal text-muted-foreground">{opt.description}</span>
-                    </span>
-                  </Show>
-                }
-              >
-                {(render) => render()(opt, { checked: checked(), disabled: rowDisabled() })}
-              </Show>
-            </label>
-          );
-        }}
-      </For>
-    </div>
-  );
-}