@kitn.ai/ui 0.28.0 → 0.30.0

package/src/ui/status.tsx

@@ -1,48 +0,0 @@
-import { type JSX, Show, splitProps } from 'solid-js';
-import { cn } from '../utils/cn';
-
-export type StatusKind = 'new' | 'online' | 'busy' | 'away' | 'offline';
-
-/** status → background hue utility (backed by the kit's tool-* / muted tokens). */
-export const STATUS_BG: Record<StatusKind, string> = {
-  new: 'bg-tool-blue',
-  online: 'bg-tool-green',
-  busy: 'bg-tool-red',
-  away: 'bg-tool-amber',
-  offline: 'bg-muted-foreground',
-};
-
-const SIZE: Record<'sm' | 'md', string> = { sm: 'size-2', md: 'size-2.5' };
-
-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 function Status(props: StatusProps) {
-  const [local, rest] = splitProps(props, ['status', 'size', 'pulse', 'label', 'class']);
-  const kind = () => local.status ?? 'new';
-  return (
-    <span
-      class={cn('relative inline-flex', local.class)}
-      role={local.label ? 'status' : undefined}
-      aria-label={local.label}
-      aria-hidden={local.label ? undefined : 'true'}
-    >
-      <Show when={local.pulse}>
-        <span
-          aria-hidden="true"
-          class={cn(
-            'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:hidden',
-            STATUS_BG[kind()],
-          )}
-        />
-      </Show>
-      <span {...rest} class={cn('relative inline-block rounded-full', STATUS_BG[kind()], SIZE[local.size ?? 'sm'])} />
-    </span>
-  );
-}

package/src/ui/switch.tsx

@@ -1,119 +0,0 @@
-import { type JSX, createSignal, splitProps } from 'solid-js';
-import { cn } from '../utils/cn';
-
-export interface SwitchProps
-  extends Omit<
-    JSX.ButtonHTMLAttributes<HTMLButtonElement>,
-    | 'type' | 'role' | 'aria-checked' | 'children' | 'ref'
-    | 'onChange' | 'onchange' | 'onClick' | 'onclick' | 'onKeyDown' | 'onkeydown'
-  > {
-  /** Controlled checked state. When set, the component defers state to the
-   *  parent; drive it from `onChange`. Omit for uncontrolled (internal) state. */
-  checked?: boolean;
-  /** Initial checked state when uncontrolled. */
-  defaultChecked?: boolean;
-  /** Disable interaction. */
-  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;
-}
-
-/**
- * A toggle switch (`role="switch"`). Controlled via `checked`, or uncontrolled
- * from `defaultChecked`. Keyboard-operable (Space/Enter) and theme-tokened.
- *
- * Anything not named in `SwitchProps` is forwarded to the inner button, so `id`,
- * `aria-required` / `aria-invalid` / `aria-describedby` and any `data-*` hook land
- * on the focusable element without a caller stamping them through a `ref`. The
- * switch keeps ownership of `type`, `role`, `aria-checked` and the toggle handlers:
- * those are the control, not decoration.
- */
-export function Switch(props: SwitchProps) {
-  const [local, rest] = splitProps(props, [
-    'checked', 'defaultChecked', 'disabled', 'label', 'name', 'value', 'onChange', 'buttonRef', 'class',
-  ]);
-  const [internal, setInternal] = createSignal(local.defaultChecked ?? false);
-  const isControlled = () => local.checked !== undefined;
-  const isOn = () => (isControlled() ? !!local.checked : internal());
-
-  const toggle = () => {
-    if (local.disabled) return;
-    const next = !isOn();
-    if (!isControlled()) setInternal(next);
-    local.onChange?.(next);
-  };
-
-  return (
-    <>
-      {local.name != null && (
-        <input
-          type="checkbox"
-          name={local.name}
-          value={local.value ?? 'on'}
-          checked={isOn()}
-          disabled={local.disabled}
-          aria-hidden="true"
-          tabindex={-1}
-          style={{ position: 'absolute', width: '1px', height: '1px', overflow: 'hidden', clip: 'rect(0 0 0 0)', 'white-space': 'nowrap' }}
-          onChange={() => { /* driven by the button; keep the input in sync only */ }}
-        />
-      )}
-      {/* `{...rest}` comes FIRST so the attributes below win: a caller can add an
-          `id` or an `aria-describedby`, but cannot turn this into something that is
-          no longer a switch. */}
-      <button
-        {...rest}
-        type="button"
-        role="switch"
-        ref={local.buttonRef}
-        aria-checked={isOn()}
-        aria-label={local.label}
-        disabled={local.disabled}
-        onClick={toggle}
-        onKeyDown={(e) => {
-          if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); toggle(); }
-        }}
-        class={cn(
-          'relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border transition-colors',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
-          'disabled:cursor-not-allowed disabled:opacity-50',
-          // WCAG 2.1 SC 1.4.11: the track IS this control's visual boundary, so it
-          // needs 3:1 against the surface behind it. The OFF fill cannot carry that
-          // — `--color-muted` is a shared surface token (measured 1.10:1 light on
-          // `--color-background`) and darkening it to clear 3:1 would repaint every
-          // muted surface in the kit. So the boundary moves to a border on the
-          // control-edge token `--color-input`, which exists for exactly this and is
-          // already held to the 3:1 floor for radios, checkboxes and inputs
-          // (tests/primitives/control-contrast.test.ts). The ON track keeps its
-          // ~17:1 `--color-primary` fill and takes a transparent border purely so
-          // the two states stay the same size — the fill still paints under it.
-          isOn() ? 'border-transparent bg-primary' : 'border-input bg-muted',
-          local.class,
-        )}
-      >
-        <span
-          class={cn(
-            'inline-block h-4 w-4 rounded-full shadow transition-transform',
-            // On the `primary` track use `primary-foreground` so the thumb stays
-            // visible in both themes (in dark mode `primary` is light, where a
-            // hard-coded white thumb vanished). Off-track stays white over `muted`.
-            // The track is `border-box` with a 1px border, so the thumb travels
-            // inside a 34px box: 2px in from each inner edge keeps both end
-            // positions 3px from the track's outer edge.
-            isOn() ? 'translate-x-4 bg-primary-foreground' : 'translate-x-0.5 bg-white',
-          )}
-        />
-      </button>
-    </>
-  );
-}

package/src/ui/tabs.tsx

@@ -1,168 +0,0 @@
-import { For, type JSX, splitProps } from 'solid-js';
-import { renderIcon } from './icon';
-import { cn } from '../utils/cn';
-
-/** 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 const TABLIST_CLASS: Record<TabsVariant, string> = {
-  segmented: 'inline-flex items-center gap-1 rounded-lg bg-muted p-1',
-  underline: 'inline-flex items-center gap-1 border-b border-border',
-};
-
-/** variant → per-tab utilities, given whether the tab is active. */
-export function tabClass(variant: TabsVariant, active: boolean): string {
-  const base =
-    'inline-flex items-center gap-1.5 whitespace-nowrap text-sm font-medium transition-colors ' +
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ' +
-    'disabled:pointer-events-none disabled:opacity-50';
-  if (variant === 'underline') {
-    return cn(
-      base,
-      'border-b-2 px-3 py-2 -mb-px',
-      active
-        ? 'border-primary text-foreground'
-        : 'border-transparent text-muted-foreground hover:text-foreground',
-    );
-  }
-  return cn(
-    base,
-    'rounded-md px-3 py-1.5',
-    active
-      ? 'bg-background text-foreground shadow-sm'
-      : 'text-muted-foreground hover:text-foreground',
-  );
-}
-
-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 function Tabs(props: TabsProps) {
-  const [local, rest] = splitProps(props, [
-    'items', 'value', 'variant', 'block', 'disabled', 'onChange', 'ref', 'class',
-  ]);
-  const items = () => local.items ?? [];
-  const variant = (): TabsVariant => local.variant ?? 'segmented';
-
-  const tabEls: Record<string, HTMLButtonElement> = {};
-
-  const enabled = () => items().filter((it) => !it.disabled);
-  const activeId = () => local.value;
-
-  // Roving tabindex needs exactly one tab in the tab order. The active tab gets
-  // it; if nothing is selected, the first enabled tab does, so the strip is still
-  // reachable by Tab.
-  const rovingId = () => {
-    if (activeId() !== undefined && enabled().some((it) => it.id === activeId())) return activeId();
-    return enabled()[0]?.id;
-  };
-
-  const select = (item: KaiTabItem) => {
-    if (local.disabled || item.disabled) return;
-    if (item.id === local.value) return;
-    local.onChange?.(item.id);
-  };
-
-  // Roving focus: move focus to the target tab and emit selection (activate on focus move).
-  const focusId = (id: string) => {
-    const el = tabEls[id];
-    if (el) el.focus();
-  };
-
-  const onKeyDown = (e: KeyboardEvent, item: KaiTabItem) => {
-    const list = enabled();
-    if (list.length === 0) return;
-    const i = list.findIndex((it) => it.id === item.id);
-    let next: KaiTabItem | undefined;
-    switch (e.key) {
-      case 'ArrowRight':
-      case 'ArrowDown':
-        next = list[(i + 1) % list.length];
-        break;
-      case 'ArrowLeft':
-      case 'ArrowUp':
-        next = list[(i - 1 + list.length) % list.length];
-        break;
-      case 'Home':
-        next = list[0];
-        break;
-      case 'End':
-        next = list[list.length - 1];
-        break;
-      case 'Enter':
-      case ' ':
-        e.preventDefault();
-        select(item);
-        return;
-      default:
-        return;
-    }
-    if (next) {
-      e.preventDefault();
-      select(next);
-      focusId(next.id);
-    }
-  };
-
-  return (
-    <div
-      {...rest}
-      ref={(el) => local.ref?.(el)}
-      role="tablist"
-      part="tablist"
-      aria-disabled={local.disabled ? 'true' : undefined}
-      class={cn(TABLIST_CLASS[variant()], local.block && 'flex w-full', local.class)}
-    >
-      <For each={items()}>
-        {(item) => {
-          const active = () => item.id === activeId();
-          return (
-            <button
-              ref={(el) => { tabEls[item.id] = el; }}
-              type="button"
-              part="tab"
-              role="tab"
-              data-active={active() ? '' : undefined}
-              aria-selected={active() ? 'true' : 'false'}
-              tabindex={item.id === rovingId() ? 0 : -1}
-              disabled={local.disabled || item.disabled}
-              class={cn(tabClass(variant(), active()), local.block && 'flex-1 justify-center')}
-              onClick={() => select(item)}
-              onKeyDown={(e) => onKeyDown(e, item)}
-            >
-              {renderIcon(item.icon, { class: 'size-4 shrink-0' })}
-              {item.label}
-            </button>
-          );
-        }}
-      </For>
-    </div>
-  );
-}

package/src/ui/textarea.tsx

@@ -1,21 +0,0 @@
-import { type JSX, splitProps } from 'solid-js';
-import { cn } from '../utils/cn';
-import { useAutoResize } from '../primitives/use-auto-resize';
-
-export interface TextareaProps extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  maxHeight?: number;
-  autoResize?: boolean;
-}
-
-export function Textarea(props: TextareaProps) {
-  const [local, rest] = splitProps(props, ['class', 'maxHeight', 'autoResize']);
-  const { ref } = useAutoResize({ maxHeight: local.maxHeight });
-  return (
-    <textarea
-      ref={local.autoResize !== false ? ref : undefined}
-      class={cn('w-full resize-none rounded-md bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring', local.class)}
-      rows={1}
-      {...rest}
-    />
-  );
-}

package/src/ui/tooltip.tsx

@@ -1,118 +0,0 @@
-import { createSignal, createUniqueId, onCleanup, Show, type JSX, type Accessor, splitProps } from 'solid-js';
-import { Portal } from 'solid-js/web';
-import { type Placement } from '@floating-ui/dom';
-import { cn } from '../utils/cn';
-import { useChatConfig } from '../primitives/chat-config';
-import { createPresence, usePosition, useDismiss, As } from './overlay';
-
-/** 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 function Tooltip(props: TooltipProps) {
-  const [local] = splitProps(props, ['content', 'children', 'class', 'openDelay', 'closeDelay', 'placement', 'defaultOpen', 'disabled', 'controllerRef', 'dismissOnClick']);
-  const config = useChatConfig();
-  const id = createUniqueId();
-  const [open, setOpen] = createSignal(local.defaultOpen ?? false);
-  const [triggerEl, setTriggerEl] = createSignal<HTMLElement>();
-  const [contentEl, setContentEl] = createSignal<HTMLElement>();
-  // Hand the open controller up so a facade (kai-tooltip) can drive/observe it.
-  // setOpen is gated on `disabled` so the disclosure surface (show/hide/toggle)
-  // can never force the tooltip open while disabled.
-  local.controllerRef?.({ open, setOpen: (v) => setOpen(v && !local.disabled) });
-  let timer: number | undefined;
-  // True for the span of a click (pointerdown → focus → click). Suppresses the
-  // focus-show so clicking a hovered trigger DISMISSES it instead of flickering
-  // hide→show→hide (pointerdown hid it, the click-induced focus re-showed it,
-  // then click hid it again). Keyboard focus has no preceding pointerdown, so it
-  // still shows the tooltip normally.
-  let pointerDown = false;
-
-  const [pointerInside, setPointerInside] = createSignal(false);
-  const [focusInside, setFocusInside] = createSignal(false);
-
-  const show = (delay = 0) => {
-    if (local.disabled) return;
-    clearTimeout(timer);
-    if (delay) timer = window.setTimeout(() => setOpen(true), delay);
-    else setOpen(true);
-  };
-  const hide = () => {
-    clearTimeout(timer);
-    const delay = local.closeDelay ?? 0;
-    if (delay) timer = window.setTimeout(() => setOpen(false), delay);
-    else setOpen(false);
-  };
-  const maybeHide = () => { if (!pointerInside() && !focusInside()) hide(); };
-  // Action-style tooltips should dismiss when their trigger is clicked: the pointer
-  // never "leaves", so reset the inside flags and force-close until the next genuine
-  // hover/focus. Opt out with dismissOnClick={false}.
-  const dismiss = () => { if (local.dismissOnClick === false) return; setPointerInside(false); setFocusInside(false); hide(); };
-  onCleanup(() => clearTimeout(timer));
-
-  const presence = createPresence(open);
-  const position = usePosition(triggerEl, contentEl, {
-    placement: local.placement ?? 'top',
-    gutter: 6,
-    // Trigger removed from the DOM -> close so the tooltip portal doesn't orphan.
-    onDisconnect: () => setOpen(false),
-  });
-  useDismiss({ enabled: open, onDismiss: hide, refs: () => [triggerEl(), contentEl()] });
-
-  return (
-    <>
-      <As
-        as="span"
-        class="inline-flex"
-        ref={setTriggerEl}
-        aria-describedby={open() ? id : undefined}
-        onPointerEnter={() => { setPointerInside(true); show(local.openDelay ?? 600); }}
-        onPointerLeave={() => { setPointerInside(false); maybeHide(); }}
-        onPointerDown={() => { pointerDown = true; dismiss(); window.setTimeout(() => { pointerDown = false; }, 0); }}
-        onClick={dismiss}
-        onFocusIn={() => { setFocusInside(true); if (!pointerDown) show(); }}
-        onFocusOut={(e: FocusEvent) => { const t = triggerEl(); if (t && t.contains(e.relatedTarget as Node)) return; setFocusInside(false); maybeHide(); }}
-      >
-        {local.children}
-      </As>
-      <Show when={presence.present()}>
-        <Portal mount={config.portalMount()}>
-          <div
-            ref={(el) => { setContentEl(el); presence.setRef(el); }}
-            id={id}
-            role="tooltip"
-            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`, 'pointer-events': 'none', visibility: position.hidden() ? 'hidden' : 'visible' }}
-            class={cn(
-              'z-50 rounded-md bg-foreground px-2.5 py-1 text-xs text-background shadow-md',
-              'animate-in fade-in-0 zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95',
-              local.class,
-            )}
-          >
-            {local.content}
-          </div>
-        </Portal>
-      </Show>
-    </>
-  );
-}

package/src/utils/cn.ts

@@ -1,30 +0,0 @@
-import { clsx, type ClassValue } from 'clsx';
-import { extendTailwindMerge } from 'tailwind-merge';
-
-// The kit defines custom font-size utilities via @theme tokens in theme.css:
-// text-micro / text-caption / text-meta / text-compact / text-body / text-title.
-// tailwind-merge has no way to know these are font sizes, so by default it
-// buckets `text-body` with text COLORS and drops a real color
-// (`text-transparent`, `text-foreground`, …)
-// whenever both appear in the same cn() call — which silently broke TextShimmer
-// inside the web components (the element adds `text-body`, dropping
-// `text-transparent`, so the gradient stayed hidden behind opaque text).
-//
-// Register them in the `font-size` group so they conflict only with other font
-// sizes (text-xs/sm/base/lg/…) and never with text colors. Since theme.css now
-// re-points Tailwind's own scale at the same tokens (text-xs ≡ text-meta,
-// text-sm ≡ text-body, text-base ≡ text-title), the semantic name and its
-// Tailwind alias are literally the same size — so they MUST land in one group
-// or `cn('text-sm', 'text-body')` would emit two classes for one declaration.
-// `text-lg` needs no entry: it is already a stock Tailwind font size.
-const twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      'font-size': [{ text: ['micro', 'caption', 'meta', 'compact', 'body', 'title'] }],
-    },
-  },
-});
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}