@adea-ai/ui 0.60.4 → 0.61.1

package/src/components/ui/checkbox/checkbox.tsx

@@ -0,0 +1,99 @@
+import { Checkbox as KobalteCheckbox } from '@kobalte/core/checkbox'
+import { Check, Minus } from 'lucide-solid'
+import type { ComponentProps, JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * Checkbox.
+ *
+ * Three states: unchecked, checked, and indeterminate. Indeterminate is what a
+ * "select all" box shows when only some rows are selected; Kobalte expresses
+ * it through `checked="indeterminate"` rather than a second boolean, so there
+ * is no way to render a box that is both.
+ *
+ * The paint is `Control` and the value is a real hidden `Input`, so the control
+ * participates in a form submission and in native validation while looking
+ * nothing like a browser checkbox. Focus is tracked by the input, which is why
+ * the ring lives on the control and reads the input's focus state.
+ */
+export type CheckboxProps = Omit<ComponentProps<typeof KobalteCheckbox>, 'children'> & {
+  controlClass?: string
+  labelClass?: string
+  descriptionClass?: string
+  /**
+   * Replaces the control and label. Omit it to get the default control beside
+   * `label` and `description`; supply it to compose the parts yourself.
+   */
+  children?: JSX.Element
+}
+
+export function Checkbox(props: CheckboxProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'controlClass',
+    'labelClass',
+    'descriptionClass',
+    'children',
+    'indeterminate',
+    'aria-label',
+    'aria-labelledby',
+  ])
+
+  return (
+    <KobalteCheckbox class={cn('group/checkbox flex items-start gap-2.5', local.class)} {...rest}>
+      {/*
+       * The name goes on the input, which is what carries the value and takes
+       * focus. On the Root it would land on a plain div and name nothing — the
+       * box would announce its state with no subject.
+       */}
+      <KobalteCheckbox.Input
+        aria-label={local['aria-label']}
+        aria-labelledby={local['aria-labelledby']}
+      />
+      <KobalteCheckbox.Control
+        class={cn(
+          'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-sm border',
+          'transition-[color,box-shadow,border-color,background-color] ease-out outline-none',
+          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+          'data-[checked]:bg-primary data-[checked]:border-primary data-[checked]:text-primary-foreground',
+          'data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[indeterminate]:text-primary-foreground',
+          'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',
+          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+          local.controlClass
+        )}
+      >
+        <KobalteCheckbox.Indicator class="flex items-center justify-center">
+          {local.indeterminate ? <Minus class="size-3" /> : <Check class="size-3" />}
+        </KobalteCheckbox.Indicator>
+      </KobalteCheckbox.Control>
+      {local.children ?? (
+        <div class="grid gap-0.5 leading-none">
+          <KobalteCheckbox.Label class={cn('text-sm font-medium', local.labelClass)} />
+          <KobalteCheckbox.Description
+            class={cn('text-muted-foreground text-sm', local.descriptionClass)}
+          />
+        </div>
+      )}
+    </KobalteCheckbox>
+  )
+}
+
+/**
+ * The box's own label. Valid only inside a `<Checkbox>`, for the same reason as
+ * `SwitchLabel`: outside its root there is no control to associate with.
+ */
+export function CheckboxLabel(props: ComponentProps<typeof KobalteCheckbox.Label>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <KobalteCheckbox.Label class={cn('text-sm font-medium', local.class)} {...rest} />
+}
+
+export function CheckboxDescription(props: ComponentProps<typeof KobalteCheckbox.Description>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteCheckbox.Description
+      class={cn('text-muted-foreground text-sm', local.class)}
+      {...rest}
+    />
+  )
+}

package/src/components/ui/checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox, CheckboxDescription, CheckboxLabel, type CheckboxProps } from './checkbox'

package/src/components/ui/code-block/code-block.tsx

@@ -0,0 +1,238 @@
+import {
+  createMemo,
+  createSignal,
+  For,
+  Show,
+  splitProps,
+  type ComponentProps,
+  type JSX,
+} from 'solid-js'
+import { Check, Copy } from 'lucide-solid'
+import { Button } from '../button'
+import { cn } from '#lib/utils'
+
+/**
+ * CodeBlock.
+ *
+ * A fenced block, rendered as a surface. The library ships no highlighter —
+ * syntax colouring is a large dependency with its own theme format, and a
+ * component that bundled one would force every consumer to pay for it. This
+ * renders the block, its chrome, and its behaviour; a caller that wants
+ * highlighting passes the result through `highlight`, which is the seam a
+ * Shiki/Pierre/Prism integration plugs into.
+ *
+ * Four details are the reason this exists rather than a styled `<pre>`:
+ *
+ * **Copy confirms only on success.** `navigator.clipboard.writeText` rejects
+ * outside a secure context, in a sandboxed frame, and when the document is not
+ * focused. Flipping to a tick unconditionally confirms a copy that did not
+ * happen, and the reader pastes something stale and does not know why. The
+ * rejection is caught and the button reports the failure instead.
+ *
+ * **A tall block repeats its action row at the bottom.** Copying from a block
+ * that is taller than the viewport otherwise costs a scroll back to the top and
+ * another scroll down to where you were. The threshold is a fixed 480px rather
+ * than viewport-relative so the behaviour does not change when the window is
+ * resized.
+ *
+ * **The scroller is focusable and named.** A horizontally scrollable region has
+ * to be reachable by keyboard — this is axe's `scrollable-region-focusable`, and
+ * a region that scrolls but cannot be focused is a WCAG 2.1.1 failure. It is a
+ * `region` with a label rather than a bare `tabindex`, so the tab stop announces
+ * what it is.
+ *
+ * **Resolving a streaming block must not move the reader.** When `complete` is
+ * false the block shows the code it has plus a generating indicator; the
+ * indicator is inside the scroller's own box and does not add a line, because a
+ * block that grows the moment its content resolves shifts everything below it.
+ * If a caller's `highlight` changes the line box, that is the caller's height to
+ * hold — `lineHeight` is a prop for exactly that reason.
+ */
+export type CodeBlockProps = Omit<ComponentProps<'div'>, 'children'> & {
+  code: string
+  /** The language, shown in the header and used as the region's label. */
+  language?: string
+  /** The code, transformed — highlighted HTML or a component. Omit for plain text. */
+  highlight?: (code: string) => JSX.Element
+  /** False while the block is still streaming. Adds a generating indicator. */
+  complete?: boolean
+  /** A filename or title, shown instead of the language. */
+  title?: string
+  /** Extra header controls, before the copy button. */
+  actions?: JSX.Element
+  /** Copy label. Override for a non-English application. */
+  copyLabel?: string
+  copiedLabel?: string
+  /** Line height of the rendered code. Set it when `highlight` changes the box. */
+  lineHeight?: string
+  /** A line-number gutter. Off by default; a short snippet rarely needs one. */
+  showLineNumbers?: boolean
+  /** The height above which the action row is repeated below the block. */
+  tallThreshold?: number
+}
+
+/** The height a block must exceed before its actions are repeated. */
+export const TALL_CODE_BLOCK_PX = 480
+
+/**
+ * Copy, reporting whether it worked. `navigator.clipboard` is absent in an
+ * insecure context, and `writeText` rejects when the document is not focused —
+ * both are normal in an embedded or iframed application, and neither should
+ * silently look like success.
+ */
+async function copyText(text: string): Promise<boolean> {
+  try {
+    if (!navigator.clipboard) return false
+    await navigator.clipboard.writeText(text)
+    return true
+  } catch {
+    return false
+  }
+}
+
+export function CodeBlock(props: CodeBlockProps) {
+  const [local, rest] = splitProps(props, [
+    'code',
+    'language',
+    'highlight',
+    'complete',
+    'title',
+    'actions',
+    'copyLabel',
+    'copiedLabel',
+    'lineHeight',
+    'showLineNumbers',
+    'tallThreshold',
+    'class',
+    'ref',
+  ])
+
+  const [copied, setCopied] = createSignal(false)
+  const [failed, setFailed] = createSignal(false)
+  const [tall, setTall] = createSignal(false)
+
+  const label = () => local.title ?? local.language ?? 'code'
+  const regionLabel = () => (local.language ? `${local.language} code` : 'code')
+  const lines = createMemo(() => local.code.replace(/\n$/, '').split('\n'))
+
+  const copy = async () => {
+    const ok = await copyText(local.code)
+    setCopied(ok)
+    setFailed(!ok)
+    if (ok) setTimeout(() => setCopied(false), 1500)
+  }
+
+  const Actions = () => (
+    <div class="flex items-center gap-1 opacity-0 transition-opacity group-focus-within/code:opacity-100 group-hover/code:opacity-100">
+      {local.actions}
+      <Button
+        variant="ghost"
+        size="icon-2xs"
+        aria-label={copied() ? (local.copiedLabel ?? 'Copied') : (local.copyLabel ?? 'Copy code')}
+        title={failed() ? 'Copying is unavailable in this context' : undefined}
+        onClick={() => void copy()}
+      >
+        <Show when={copied()} fallback={<Copy aria-hidden="true" />}>
+          <Check aria-hidden="true" />
+        </Show>
+      </Button>
+    </div>
+  )
+
+  return (
+    <div
+      class={cn('group/code overflow-hidden rounded-xl border border-border bg-card', local.class)}
+      {...rest}
+      ref={(element) => {
+        // Composed rather than replaced: a caller's ref must survive.
+        if (typeof local.ref === 'function') local.ref(element)
+        else if (local.ref) local.ref = element
+        // Measured rather than assumed: the caller controls the content, so only
+        // the rendered box can say whether the action row has scrolled away.
+        const observer = new ResizeObserver(() => {
+          setTall(element.offsetHeight > (local.tallThreshold ?? TALL_CODE_BLOCK_PX))
+        })
+        observer.observe(element)
+      }}
+    >
+      <div class="flex items-center justify-between gap-2 px-3 py-1">
+        <span class="truncate font-mono text-xs text-muted-foreground">{label()}</span>
+        <Actions />
+      </div>
+      <div
+        class="scroll-fade overflow-x-auto"
+        // A region that scrolls must be focusable, and a tab stop needs a name.
+        tabindex="0"
+        role="region"
+        aria-label={regionLabel()}
+      >
+        <Show
+          when={local.highlight}
+          fallback={
+            <pre class="m-0 px-3 py-2" style={{ 'line-height': local.lineHeight ?? '1.5' }}>
+              <code class="font-mono text-xs">
+                <Show when={local.showLineNumbers} fallback={local.code.replace(/\n$/, '')}>
+                  <For each={lines()}>
+                    {(line, index) => (
+                      <span class="grid grid-cols-[3ch_1fr] gap-3">
+                        <span
+                          class="text-right text-muted-foreground select-none"
+                          aria-hidden="true"
+                        >
+                          {index() + 1}
+                        </span>
+                        <span>{line || ' '}</span>
+                      </span>
+                    )}
+                  </For>
+                </Show>
+              </code>
+            </pre>
+          }
+        >
+          {(highlight) => <div class="px-3 py-2">{highlight()(local.code)}</div>}
+        </Show>
+        {/*
+          In the scroller's box, and a single line: the indicator must not add
+          height when it disappears, or a streaming block shifts everything below
+          it as it resolves.
+        */}
+        <Show when={!local.complete}>
+          <p class="px-3 pb-2 text-xs text-muted-foreground italic">Generating…</p>
+        </Show>
+      </div>
+      <Show when={tall()}>
+        <div
+          data-code-block-footer=""
+          class="flex items-center justify-end border-t border-transparent px-3 py-1 transition-colors group-focus-within/code:border-border group-hover/code:border-border"
+        >
+          <Actions />
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+/**
+ * InlineCode.
+ *
+ * The `code` inside a sentence. It is a component rather than a class because it
+ * has to hold three properties at once: it must not break the line's rhythm
+ * (`font-size: 0.9em`, so it tracks the surrounding text), it must wrap rather
+ * than overflow a narrow column (`overflow-wrap: anywhere` — an identifier with
+ * no spaces is one long token), and it must be legible against whatever surface
+ * it lands on, which is why the fill is a token and not a fixed grey.
+ */
+export function InlineCode(props: ComponentProps<'code'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <code
+      class={cn(
+        'rounded-sm bg-muted px-[0.4em] py-[0.15em] font-mono text-[0.9em] text-foreground [overflow-wrap:anywhere]',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}

package/src/components/ui/code-block/index.ts

@@ -0,0 +1 @@
+export { CodeBlock, InlineCode, TALL_CODE_BLOCK_PX, type CodeBlockProps } from './code-block'

package/src/components/ui/collapsible/collapsible.tsx

@@ -0,0 +1,54 @@
+import { Collapsible as KobalteCollapsible } from '@kobalte/core/collapsible'
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * Collapsible.
+ *
+ * One region that shows and hides. Accordion is this in a list; reach for
+ * Collapsible when there is exactly one, so a caller does not have to build a
+ * one-item accordion whose semantics say "list of one".
+ *
+ * The content animates its height rather than appearing, which is what keeps a
+ * disclosure from reading as a layout jump. Kobalte publishes the measured
+ * height as `--kb-collapsible-content-height`.
+ */
+export function Collapsible(props: ComponentProps<typeof KobalteCollapsible>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <KobalteCollapsible class={cn('flex w-full flex-col', local.class)} {...rest} />
+}
+
+export function CollapsibleTrigger(props: ComponentProps<typeof KobalteCollapsible.Trigger>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <KobalteCollapsible.Trigger
+      class={cn(
+        'flex items-center gap-1.5 text-sm font-medium',
+        'transition-colors ease-out outline-none',
+        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+        'disabled:pointer-events-none disabled:opacity-50',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function CollapsibleContent(props: ComponentProps<typeof KobalteCollapsible.Content>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteCollapsible.Content
+      class={cn(
+        'overflow-hidden',
+        /* Kobalte measures the content and exposes the height; the transition
+           reads it so the panel opens to its real size rather than a guess. */
+        'data-[expanded]:animate-in data-[expanded]:fade-in-0 data-[expanded]:slide-in-from-top-1',
+        'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:slide-out-to-top-1',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}

package/src/components/ui/collapsible/index.ts

@@ -0,0 +1 @@
+export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible'

package/src/components/ui/combobox/combobox.tsx

@@ -0,0 +1,142 @@
+import { Combobox as KobalteCombobox } from '@kobalte/core/combobox'
+import { Check, ChevronDown, X } from 'lucide-solid'
+import type { ComponentProps } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { menuContentPadding, menuItem, popoverArrow } from '#lib/overlay'
+import { cn } from '#lib/utils'
+
+/**
+ * Combobox.
+ *
+ * A Select whose list is filterable by typing. The difference from Select is
+ * not cosmetic: a Combobox has a text input, so the user can narrow forty
+ * options to one without reading the list. Above roughly ten options the
+ * search is the feature; below it, a Select is quieter and a RadioGroup is
+ * better still.
+ *
+ * Kobalte supplies the filtering, the `aria-activedescendant` wiring, the
+ * keyboard selection and the multiple-selection mode, which is the part a
+ * hand-rolled version reliably gets wrong.
+ */
+export function Combobox<Option, OptGroup = never>(
+  props: ComponentProps<typeof KobalteCombobox<Option, OptGroup>>
+) {
+  return <KobalteCombobox {...props} />
+}
+
+export function ComboboxControl(props: ComponentProps<typeof KobalteCombobox.Control>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <KobalteCombobox.Control
+      class={cn(
+        'border-input bg-transparent flex h-control-md w-full items-center gap-1.5 rounded-md border px-control-sm',
+        'transition-[color,box-shadow,border-color] ease-out',
+        'focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle',
+        'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',
+        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function ComboboxInput(props: ComponentProps<typeof KobalteCombobox.Input>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <KobalteCombobox.Input
+      class={cn(
+        'h-full flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground',
+        'disabled:cursor-not-allowed',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function ComboboxTrigger(props: ComponentProps<typeof KobalteCombobox.Trigger>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <KobalteCombobox.Trigger
+      class={cn(
+        'text-muted-foreground flex shrink-0 items-center justify-center rounded-sm outline-none',
+        'transition-colors ease-out hover:text-foreground',
+        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+        'disabled:pointer-events-none disabled:opacity-50',
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      <KobalteCombobox.Icon>
+        <ChevronDown class="size-4" />
+      </KobalteCombobox.Icon>
+    </KobalteCombobox.Trigger>
+  )
+}
+
+export function ComboboxContent(props: ComponentProps<typeof KobalteCombobox.Content>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <KobalteCombobox.Portal>
+      <KobalteCombobox.Content
+        class={cn(
+          'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',
+          'z-(--z-menu) max-h-72 min-w-(--kb-popper-anchor-width) origin-(--kb-combobox-content-transform-origin) overflow-hidden',
+          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',
+          'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+          'data-expanded:duration-150 data-closed:duration-100',
+          local.class
+        )}
+        {...rest}
+      >
+        <KobalteCombobox.Listbox class={cn('max-h-72 overflow-y-auto', menuContentPadding)} />
+        <KobalteCombobox.Arrow aria-hidden="true" class={popoverArrow} />
+      </KobalteCombobox.Content>
+    </KobalteCombobox.Portal>
+  )
+}
+
+export function ComboboxItem(props: ComponentProps<typeof KobalteCombobox.Item>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <KobalteCombobox.Item class={cn(menuItem, 'pe-8', local.class)} {...rest}>
+      <KobalteCombobox.ItemLabel>{local.children}</KobalteCombobox.ItemLabel>
+      <KobalteCombobox.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center">
+        <Check class="size-4" />
+      </KobalteCombobox.ItemIndicator>
+    </KobalteCombobox.Item>
+  )
+}
+
+export function ComboboxSection(props: ComponentProps<typeof KobalteCombobox.Section>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <KobalteCombobox.Section class={cn('flex flex-col', local.class)} {...rest} />
+}
+
+/** The clear affordance for a single-select Combobox with a value. */
+export function ComboboxClear(props: { class?: string; onClear: () => void }) {
+  return (
+    <Show when={props.onClear}>
+      <button
+        type="button"
+        aria-label="Clear selection"
+        onClick={() => props.onClear()}
+        class={cn(
+          'text-muted-foreground flex size-4 shrink-0 items-center justify-center rounded-sm',
+          'transition-colors ease-out outline-none hover:text-foreground',
+          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+          props.class
+        )}
+      >
+        <X class="size-3.5" />
+      </button>
+    </Show>
+  )
+}

package/src/components/ui/combobox/index.ts

@@ -0,0 +1,10 @@
+export {
+  Combobox,
+  ComboboxClear,
+  ComboboxContent,
+  ComboboxControl,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxSection,
+  ComboboxTrigger,
+} from './combobox'