@kitn.ai/ui 0.28.0 → 0.29.0

package/src/ui/checkbox-group.tsx

@@ -1,153 +0,0 @@
-import { type JSX, For, Show, splitProps } from 'solid-js';
-import { cn } from '../utils/cn';
-import { Checkbox } from './checkbox';
-
-/** One choice in a {@link CheckboxGroup}. */
-export interface CheckboxOption<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 CheckboxGroupProps<T = string>
-  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
-  /**
-   * The choices, in display order. Rendered in full: the kit never truncates,
-   * re-orders or de-duplicates a consumer's option list.
-   */
-  options: readonly CheckboxOption<T>[];
-  /** The selected values. Each option is checked when its `value` is in here (by identity). */
-  value?: readonly T[];
-  /**
-   * The shared form-control name every box in the group carries, so a native form
-   * submits the whole selection under one key and `FormData.getAll(name)` reads it back.
-   *
-   * UNLIKE {@link RadioGroup}, this has no default. A radio group needs a shared `name`
-   * for the browser to make the set exclusive and arrow-navigable, so one is generated
-   * when none is given; checkboxes are independent controls and need nothing to behave
-   * correctly. Generating a name here would submit the selection under a random key,
-   * which is worse than submitting nothing.
-   */
-  name?: string;
-  /** Disable every row. */
-  disabled?: boolean;
-  /** Accessible name for the group. Rendered as `aria-label` on the `group`. */
-  label?: string;
-  /**
-   * Fires on every toggle with the NEXT selection, plus the option that moved and
-   * which way it went. The next selection is a fresh array — the group holds no state
-   * of its own, so `value` is yours to own.
-   */
-  onChange?: (value: T[], option: CheckboxOption<T>, checked: boolean) => void;
-  /** Fires when a box 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
-   * checkbox component existing. The control, the row chrome and the group semantics
-   * stay ours.
-   */
-  children?: (option: CheckboxOption<T>, state: { checked: boolean; disabled: boolean }) => JSX.Element;
-}
-
-/**
- * A vertical set of checkbox rows in a bordered, divided list — the kit's standard
- * "pick any number" control, and {@link RadioGroup}'s sibling: same options shape,
- * same row chrome, same presentation slot, multi-value instead of single.
- *
- * Every row is a real `<input type="checkbox">` inside a `<label>`, so clicking
- * anywhere on the row toggles it and the keyboard behaviour (a tab stop per box,
- * Space to toggle) is the browser's rather than a reimplementation. The wrapper is
- * `role="group"`, not `role="listbox"`: the boxes are independent controls and
- * nothing here overrides what they already announce.
- *
- * Everything not listed in `CheckboxGroupProps` is forwarded to the group element, so
- * `id`, `aria-labelledby`, any other `aria-*` and any `data-*` hook land where a form
- * expects them. No validation is applied — "at least one" is your application's rule,
- * not the kit's.
- *
- * ```tsx
- * <CheckboxGroup
- *   label="Environments"
- *   name="env"
- *   options={[{ value: 'prod', label: 'Production' }, { value: 'staging', label: 'Staging' }]}
- *   value={envs()}
- *   onChange={setEnvs}
- * />
- * ```
- */
-export function CheckboxGroup<T = string>(props: CheckboxGroupProps<T>): JSX.Element {
-  const [local, rest] = splitProps(props, [
-    'options', 'value', 'name', 'disabled', 'label', 'onChange', 'onOptionBlur', 'itemClass', 'children', 'class',
-  ]);
-  const selected = (): readonly T[] => local.value ?? [];
-  return (
-    <div
-      {...rest}
-      role="group"
-      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 = () => selected().includes(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,
-              )}
-            >
-              <Checkbox
-                name={local.name}
-                value={String(opt.value)}
-                checked={checked()}
-                disabled={rowDisabled()}
-                class={opt.description === undefined ? undefined : 'mt-0.5'}
-                onChange={(e) => {
-                  const on = e.currentTarget.checked;
-                  const now = selected();
-                  // Filter-or-append rather than a toggle on the previous array, so the
-                  // emitted selection follows the CONTROL's state. They diverge when the
-                  // caller re-renders mid-interaction, and following the box is what a
-                  // native form would report.
-                  const next = on ? [...now.filter((v) => v !== opt.value), opt.value] : now.filter((v) => v !== opt.value);
-                  local.onChange?.(next, opt, on);
-                }}
-                onBlur={() => local.onOptionBlur?.()}
-              />
-              <Show
-                when={local.children}
-                fallback={
-                  // No description, a bare <span> — byte for byte what the form's
-                  // hand-rolled checkbox list rendered before this component existed.
-                  // The two-line column only appears when there is a second line.
-                  <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>
-  );
-}

package/src/ui/checkbox.tsx

@@ -1,63 +0,0 @@
-import { type JSX, splitProps, createEffect } from 'solid-js';
-import { cn } from '../utils/cn';
-
-export interface CheckboxProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'children'> {
-  /**
-   * The mixed / partially-checked state ("some of the things below are ticked").
-   *
-   * `indeterminate` is a DOM PROPERTY with no HTML attribute, so it cannot be set
-   * from markup — every caller that wanted it used to reach for a `ref` plus a
-   * `createEffect`. That effect now lives in here, once, and callers pass a prop.
-   *
-   * Note that the property is purely visual plus an accessibility hint: a checkbox
-   * whose `indeterminate` is true still reports `checked === false` and submits
-   * accordingly. A native indeterminate checkbox already announces as "mixed", so
-   * this component does not stamp `aria-checked="mixed"` on top of it — pass one
-   * yourself if you also want the attribute in the DOM.
-   */
-  indeterminate?: boolean;
-}
-
-/**
- * A checkbox. A REAL `<input type="checkbox">` behind `appearance: none`, styled by
- * the kit's `.kai-checkbox` rule, never a `<div>` wearing `role="checkbox"`.
- *
- * That is the whole design: the native control brings keyboard operation (Space),
- * the `:focus-visible` ring, form participation via `name` / `value`, and correct
- * screen-reader announcement — all of it for free and all of it correct. Every
- * accessibility defect this kit's control audit found was in a control that had
- * replaced the native element with something hand-rolled.
- *
- * Everything not listed in `CheckboxProps` 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>`.
- *
- * Validation is deliberately absent. `required` is passed through to the native
- * attribute and nothing else — whether an unchecked box is an error is the
- * consuming application's call, not the kit's.
- *
- * ```tsx
- * <Checkbox name="notify" checked={on()} onChange={(e) => setOn(e.currentTarget.checked)} />
- * ```
- */
-export function Checkbox(props: CheckboxProps): JSX.Element {
-  const [local, rest] = splitProps(props, ['class', 'indeterminate', 'ref']);
-  return (
-    <input
-      {...rest}
-      type="checkbox"
-      class={cn('kai-checkbox', local.class)}
-      ref={(el) => {
-        // `ref` is split out and re-applied by hand because this component needs the
-        // element for `indeterminate` as well. Solid always hands a component a ref
-        // FUNCTION (a variable ref compiles into one), so the typeof guard is for the
-        // hand-written object case only.
-        const forward = local.ref;
-        if (typeof forward === 'function') (forward as (el: HTMLInputElement) => void)(el);
-        createEffect(() => {
-          el.indeterminate = !!local.indeterminate;
-        });
-      }}
-    />
-  );
-}

package/src/ui/collapsible.tsx

@@ -1,163 +0,0 @@
-import {
-  createContext,
-  useContext,
-  createSignal,
-  createUniqueId,
-  splitProps,
-  type JSX,
-  type Accessor,
-} from 'solid-js';
-import { cn } from '../utils/cn';
-
-// Extend SolidJS JSX to allow `bool:inert` (forces setAttribute so jsdom reflects it as an attribute).
-declare module 'solid-js' {
-  namespace JSX {
-    interface ExplicitBoolAttributes {
-      inert: boolean;
-    }
-  }
-}
-
-interface CollapsibleCtx {
-  open: Accessor<boolean>;
-  toggle: () => void;
-  contentId: string;
-  disabled: Accessor<boolean>;
-}
-
-const Ctx = createContext<CollapsibleCtx>();
-
-const useCollapsible = () => {
-  const c = useContext(Ctx);
-  if (!c) throw new Error('Collapsible parts must be used within <Collapsible>');
-  return c;
-};
-
-/** Imperative open controller, handed to a parent (e.g. the kai-tool facade)
- *  via `controllerRef` so it can drive/observe open state — mirrors
- *  HoverCardController. Only available when the Collapsible is UNCONTROLLED
- *  (no `open` prop); in controlled mode the parent already owns the state. */
-export interface CollapsibleController { open: Accessor<boolean>; setOpen: (v: boolean) => void; }
-
-export interface CollapsibleProps {
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  /** When true, the trigger no longer toggles (programmatic show/hide still work
-   *  via the controller; this only gates the user-facing trigger). */
-  disabled?: boolean;
-  /** Receive the open controller (open accessor + setOpen) once mounted.
-   *  Only meaningful in uncontrolled mode (no `open` prop). */
-  controllerRef?: (api: CollapsibleController) => void;
-  children: JSX.Element;
-  class?: string;
-}
-
-export function Collapsible(props: CollapsibleProps) {
-  const [local, rest] = splitProps(props, ['open', 'defaultOpen', 'onOpenChange', 'disabled', 'controllerRef', 'children', 'class']);
-  const [uncontrolled, setUncontrolled] = createSignal(local.defaultOpen ?? false);
-  const isControlled = () => local.open !== undefined;
-  const open = () => (isControlled() ? !!local.open : uncontrolled());
-  const disabled = () => !!local.disabled;
-  // setOpen drives the open state and notifies onOpenChange — the single mutate
-  // path shared by the trigger and the imperative controller.
-  const setOpen = (next: boolean) => {
-    if (open() === next) return;
-    if (!isControlled()) setUncontrolled(next);
-    local.onOpenChange?.(next);
-  };
-  const toggle = () => {
-    if (disabled()) return;
-    setOpen(!open());
-  };
-  // Hand the controller up once. setOpen is NOT gated by disabled — disabled only
-  // suppresses the user trigger; programmatic show/hide remain available (the
-  // facade's wireDisclosure applies its own disabled-gating on show/toggle).
-  local.controllerRef?.({ open, setOpen });
-  const contentId = createUniqueId();
-  return (
-    <Ctx.Provider value={{ open, toggle, contentId, disabled }}>
-      <div
-        class={local.class}
-        {...rest}
-        data-expanded={open() ? '' : undefined}
-        data-closed={open() ? undefined : ''}
-        data-state={open() ? 'open' : 'closed'}
-      >
-        {local.children}
-      </div>
-    </Ctx.Provider>
-  );
-}
-
-export interface CollapsibleTriggerProps {
-  children?: JSX.Element;
-  class?: string;
-  as?: (props: Record<string, any>) => JSX.Element;
-  onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
-  /** Remaining attributes are spread onto the rendered trigger. */
-  [k: string]: any;
-}
-
-export function CollapsibleTrigger(props: CollapsibleTriggerProps) {
-  const ctx = useCollapsible();
-  const [local, rest] = splitProps(props, ['children', 'class', 'as', 'onClick']);
-
-  const triggerProps = () => ({
-    type: 'button' as const,
-    'aria-expanded': ctx.open(),
-    'aria-controls': ctx.contentId,
-    disabled: ctx.disabled() || undefined,
-    'data-expanded': ctx.open() ? '' : undefined,
-    'data-closed': ctx.open() ? undefined : '',
-    'data-state': ctx.open() ? 'open' : 'closed',
-    onClick: (e: MouseEvent) => {
-      if (ctx.disabled()) return;
-      if (typeof local.onClick === 'function') {
-        (local.onClick as (e: MouseEvent) => void)(e);
-      }
-      ctx.toggle();
-    },
-    class: local.class,
-    ...rest,
-  });
-
-  return (
-    <>
-      {local.as
-        ? local.as(triggerProps() as any)
-        : (
-          <button {...triggerProps()}>
-            {local.children}
-          </button>
-        )}
-    </>
-  );
-}
-
-export interface CollapsibleContentProps {
-  children?: JSX.Element;
-  class?: string;
-  /** Remaining attributes are spread onto the rendered panel. */
-  [k: string]: any;
-}
-
-export function CollapsibleContent(props: CollapsibleContentProps) {
-  const ctx = useCollapsible();
-  const [local, rest] = splitProps(props, ['children', 'class']);
-  return (
-    <div
-      {...rest}
-      id={ctx.contentId}
-      data-expanded={ctx.open() ? '' : undefined}
-      data-closed={ctx.open() ? undefined : ''}
-      class={cn(
-        'grid transition-[grid-template-rows] duration-200 ease-out',
-        ctx.open() ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
-      )}
-      bool:inert={!ctx.open()}
-    >
-      <div class={cn('overflow-hidden', local.class)}>{local.children}</div>
-    </div>
-  );
-}

package/src/ui/command.tsx

@@ -1,103 +0,0 @@
-import { For, Show, type JSX } from 'solid-js';
-import { cn } from '../utils/cn';
-import { renderIcon } from './icon';
-import { Kbd } from './kbd';
-
-export interface CommandRow {
-  id: string;
-  label: string;
-  icon?: string;
-  description?: string;
-  /** Optional keyboard shortcut shown as right-aligned key caps; uses the
-   *  kai-kbd `keys` syntax (e.g. "Mod+K", "Alt+1"). */
-  shortcut?: string;
-}
-
-export interface CommandGroup {
-  group?: string;
-  items: CommandRow[];
-}
-
-export interface CommandListProps {
-  groups: CommandGroup[];
-  activeId?: string;
-  onSelect: (id: string) => void;
-  emptyLabel?: string;
-  /** Accessible label for the listbox container. Defaults to 'Command palette'. */
-  ariaLabel?: string;
-  /** id applied to the listbox container, for aria-controls wiring. */
-  id?: string;
-}
-
-/**
- * `CommandList` — a presentational grouped listbox for command/mention palettes.
- *
- * Renders a `role="listbox"` container. Groups with a `group` name get a muted
- * section header. Each row is a `role="option"` button with icon, label, and
- * optional description. Clicking a row calls `onSelect(id)`. When there are no
- * groups/items it renders `emptyLabel` (default "No results").
- */
-export function CommandList(props: CommandListProps): JSX.Element {
-  const hasItems = () => props.groups.some((g) => g.items.length > 0);
-
-  return (
-    <div
-      role={hasItems() ? 'listbox' : undefined}
-      aria-label={hasItems() ? (props.ariaLabel ?? 'Command palette') : undefined}
-      id={props.id}
-    >
-      <Show
-        when={hasItems()}
-        fallback={
-          <div class="px-3 py-4 text-center text-sm text-muted-foreground select-none">
-            {props.emptyLabel ?? 'No results'}
-          </div>
-        }
-      >
-        <For each={props.groups}>
-          {(group) => (
-            <Show when={group.items.length > 0}>
-              <>
-                <Show when={group.group}>
-                  <div class="px-3 pt-2 pb-1 text-xs font-medium text-muted-foreground select-none">
-                    {group.group}
-                  </div>
-                </Show>
-                <For each={group.items}>
-                  {(row) => (
-                    <button
-                      role="option"
-                      aria-selected={row.id === props.activeId}
-                      class={cn(
-                        'flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors',
-                        row.id === props.activeId
-                          ? 'bg-muted text-foreground'
-                          : 'text-foreground hover:bg-muted',
-                      )}
-                      // Prevent blur on the search input so keyboard nav keeps working.
-                      onMouseDown={(e) => e.preventDefault()}
-                      onClick={() => props.onSelect(row.id)}
-                    >
-                      <Show when={row.icon}>{(icon) => renderIcon(icon(), { imgClass: 'size-4 shrink-0 rounded object-cover', spanClass: 'flex size-4 shrink-0 items-center justify-center text-sm', ariaHidden: true })}</Show>
-                      <span class="font-medium whitespace-nowrap shrink-0">{row.label}</span>
-                      <Show when={row.description}>
-                        <span class="min-w-0 truncate text-muted-foreground">{row.description}</span>
-                      </Show>
-                      <Show when={row.shortcut}>
-                        {(sc) => (
-                          <span part="shortcut" class="ml-auto shrink-0 pl-3">
-                            <Kbd keys={sc()} platform="auto" size="sm" />
-                          </span>
-                        )}
-                      </Show>
-                    </button>
-                  )}
-                </For>
-              </>
-            </Show>
-          )}
-        </For>
-      </Show>
-    </div>
-  );
-}