@adea-ai/ui 0.85.0 → 0.88.0

package/src/components/layout/floating-preview/model.ts

@@ -0,0 +1,285 @@
+/*
+ * Copyright (c) 2026 Adea contributors
+ * SPDX-License-Identifier: MIT
+ * Geometry translated from t3code apps/web/src/components/preview/
+ * previewMiniPlayerLayout.ts, issue #422, revision
+ * 77bca8b2d76a1f42552e5eee7d277fcb1160347a (MIT). Runtime and device
+ * behavior are excluded. See NOTICE.
+ */
+
+export const PREVIEW_MINI_PLAYER_EDGE_GAP = 12
+export const PREVIEW_MINI_PLAYER_CORNER_RADIUS = 12
+export interface PreviewMiniPlayerSize {
+  readonly width: number
+  readonly height: number
+}
+export interface PreviewMiniPlayerPosition {
+  readonly x: number
+  readonly y: number
+}
+export interface PreviewMiniPlayerFrame extends PreviewMiniPlayerPosition, PreviewMiniPlayerSize {}
+
+export type BrowserViewportResizeDirection =
+  | 'north'
+  | 'south'
+  | 'east'
+  | 'west'
+  | 'northwest'
+  | 'northeast'
+  | 'southwest'
+  | 'southeast'
+
+const PREVIEW_MINI_PLAYER_DEFAULT_BOX = { width: 320, height: 320 } as const
+const PREVIEW_MINI_PLAYER_MIN_SIZE = { width: 240, height: 150 } as const
+
+interface HorizontalSpan {
+  readonly left: number
+  readonly right: number
+}
+
+/**
+ * The composer stack docked to the bottom edge, in container coordinates. It
+ * only reserves the columns it covers, so the margins beside it stay open all
+ * the way down.
+ */
+export interface PreviewMiniPlayerObstacles {
+  readonly composer: (HorizontalSpan & { readonly height: number }) | null
+}
+
+export const NO_PREVIEW_MINI_PLAYER_OBSTACLES: PreviewMiniPlayerObstacles = { composer: null }
+
+const spanOf = (x: number, width: number): HorizontalSpan => ({ left: x, right: x + width })
+
+const spansOverlap = (a: HorizontalSpan, b: HorizontalSpan) => a.left < b.right && a.right > b.left
+
+/** The lowest row (before the edge gap) open to a player covering these columns. */
+function floorFor(
+  span: HorizontalSpan,
+  container: PreviewMiniPlayerSize,
+  obstacles: PreviewMiniPlayerObstacles
+): number {
+  const { composer } = obstacles
+  return composer && spansOverlap(span, composer)
+    ? container.height - Math.max(0, composer.height)
+    : container.height
+}
+
+/**
+ * The box a stored size is fitted into. A player with a position keeps the
+ * rows its own columns have, so a tall frame parked beside the composer
+ * survives the next layout pass; without one it takes the rows above the
+ * composer, which every column has.
+ */
+const availableArea = (
+  container: PreviewMiniPlayerSize,
+  obstacles: PreviewMiniPlayerObstacles,
+  span: HorizontalSpan | null
+): PreviewMiniPlayerSize => ({
+  width: container.width - PREVIEW_MINI_PLAYER_EDGE_GAP * 2,
+  height:
+    (span
+      ? floorFor(span, container, obstacles)
+      : container.height - Math.max(0, obstacles.composer?.height ?? 0)) -
+    PREVIEW_MINI_PLAYER_EDGE_GAP * 2,
+})
+
+/**
+ * Width is the player's only free dimension; height always follows the source
+ * aspect ratio so the content fills the box without letterboxing. The player
+ * never grows past the source's own size, and a tight container wins over the
+ * minimum.
+ */
+function fitPreviewMiniPlayerWidth(
+  desiredWidth: number,
+  source: PreviewMiniPlayerSize,
+  max: PreviewMiniPlayerSize
+): PreviewMiniPlayerSize {
+  const aspectRatio = source.width / source.height
+  const width = Math.min(
+    Math.max(
+      desiredWidth,
+      PREVIEW_MINI_PLAYER_MIN_SIZE.width,
+      PREVIEW_MINI_PLAYER_MIN_SIZE.height * aspectRatio
+    ),
+    source.width,
+    Math.max(1, max.width),
+    Math.max(1, max.height * aspectRatio)
+  )
+  return { width: Math.round(width), height: Math.round(width / aspectRatio) }
+}
+
+function defaultPreviewMiniPlayerWidth(source: PreviewMiniPlayerSize): number {
+  return Math.min(
+    PREVIEW_MINI_PLAYER_DEFAULT_BOX.width,
+    (PREVIEW_MINI_PLAYER_DEFAULT_BOX.height * source.width) / source.height
+  )
+}
+
+const clampToContainer = (
+  position: PreviewMiniPlayerPosition,
+  container: PreviewMiniPlayerSize,
+  player: PreviewMiniPlayerSize,
+  bottom = container.height
+): PreviewMiniPlayerPosition => ({
+  x: Math.min(
+    Math.max(position.x, PREVIEW_MINI_PLAYER_EDGE_GAP),
+    Math.max(
+      PREVIEW_MINI_PLAYER_EDGE_GAP,
+      container.width - player.width - PREVIEW_MINI_PLAYER_EDGE_GAP
+    )
+  ),
+  y: Math.min(
+    Math.max(position.y, PREVIEW_MINI_PLAYER_EDGE_GAP),
+    Math.max(PREVIEW_MINI_PLAYER_EDGE_GAP, bottom - player.height - PREVIEW_MINI_PLAYER_EDGE_GAP)
+  ),
+})
+
+const overlapsObstacle = (
+  position: PreviewMiniPlayerPosition,
+  player: PreviewMiniPlayerSize,
+  container: PreviewMiniPlayerSize,
+  obstacles: PreviewMiniPlayerObstacles
+): boolean =>
+  position.y + player.height > floorFor(spanOf(position.x, player.width), container, obstacles)
+
+/**
+ * Keeps the player inside the container and off the composer. An overlapping
+ * player is pushed out along whichever side needs the smaller move, so a drag
+ * slides along the composer into the margin beside it instead of stopping at
+ * its top edge; when no side leaves it fully clear it sits above the composer.
+ */
+export function clampPreviewMiniPlayerPosition(
+  position: PreviewMiniPlayerPosition,
+  container: PreviewMiniPlayerSize,
+  player: PreviewMiniPlayerSize,
+  obstacles: PreviewMiniPlayerObstacles = NO_PREVIEW_MINI_PLAYER_OBSTACLES
+): PreviewMiniPlayerPosition {
+  const inside = clampToContainer(position, container, player)
+  const { composer } = obstacles
+  if (!composer || !overlapsObstacle(inside, player, container, obstacles)) return inside
+  const gap = PREVIEW_MINI_PLAYER_EDGE_GAP
+  const above = { x: inside.x, y: container.height - composer.height - gap - player.height }
+  const beside = [
+    { x: composer.left - gap - player.width, y: inside.y },
+    { x: composer.right + gap, y: inside.y },
+  ]
+  let best = clampToContainer(above, container, player)
+  let bestDistance = Math.abs(best.y - inside.y)
+  for (const candidate of beside) {
+    const clamped = clampToContainer(candidate, container, player)
+    if (clamped.x !== candidate.x || overlapsObstacle(candidate, player, container, obstacles)) {
+      continue
+    }
+    const distance = Math.abs(candidate.x - inside.x)
+    if (distance < bestDistance) {
+      best = candidate
+      bestDistance = distance
+    }
+  }
+  return best
+}
+
+/**
+ * Resolves the on-screen frame from the stored width and position. Clamping
+ * happens here on every layout pass instead of being written back to the
+ * store, so a temporarily narrow container never destroys the user's chosen
+ * width. A player without a position sits in the top-right corner.
+ */
+export function resolvePreviewMiniPlayerFrame(input: {
+  readonly width: number | null
+  readonly position: PreviewMiniPlayerPosition | null
+  readonly source: PreviewMiniPlayerSize
+  readonly container: PreviewMiniPlayerSize
+  readonly obstacles?: PreviewMiniPlayerObstacles
+}): PreviewMiniPlayerFrame {
+  const { width, position, source, container, obstacles = NO_PREVIEW_MINI_PLAYER_OBSTACLES } = input
+  const size = fitPreviewMiniPlayerWidth(
+    width ?? defaultPreviewMiniPlayerWidth(source),
+    source,
+    availableArea(container, obstacles, position && width ? spanOf(position.x, width) : null)
+  )
+  const anchored = position ?? {
+    x: container.width - PREVIEW_MINI_PLAYER_EDGE_GAP - size.width,
+    y: PREVIEW_MINI_PLAYER_EDGE_GAP,
+  }
+  return { ...clampPreviewMiniPlayerPosition(anchored, container, size, obstacles), ...size }
+}
+
+/**
+ * Resizes from any edge or corner while holding the aspect ratio. The edge
+ * opposite the dragged one stays anchored, so growth stops at the container
+ * on that axis and the pointer keeps tracking the grabbed edge.
+ */
+export function resizePreviewMiniPlayer(input: {
+  readonly start: PreviewMiniPlayerFrame
+  readonly direction: BrowserViewportResizeDirection
+  readonly delta: PreviewMiniPlayerPosition
+  readonly source: PreviewMiniPlayerSize
+  readonly container: PreviewMiniPlayerSize
+  readonly obstacles?: PreviewMiniPlayerObstacles
+}): PreviewMiniPlayerFrame {
+  const {
+    start,
+    direction,
+    delta,
+    source,
+    container,
+    obstacles = NO_PREVIEW_MINI_PLAYER_OBSTACLES,
+  } = input
+  const east = direction.includes('east')
+  const west = direction.includes('west')
+  const north = direction.includes('north')
+  const south = direction.includes('south')
+  const right = start.x + start.width
+  const bottom = start.y + start.height
+  const floor = floorFor(spanOf(start.x, start.width), container, obstacles)
+  const max = {
+    width: west
+      ? right - PREVIEW_MINI_PLAYER_EDGE_GAP
+      : east
+        ? container.width - PREVIEW_MINI_PLAYER_EDGE_GAP - start.x
+        : container.width - PREVIEW_MINI_PLAYER_EDGE_GAP * 2,
+    height: north
+      ? bottom - PREVIEW_MINI_PLAYER_EDGE_GAP
+      : south
+        ? floor - PREVIEW_MINI_PLAYER_EDGE_GAP - start.y
+        : floor - PREVIEW_MINI_PLAYER_EDGE_GAP * 2,
+  }
+  const desiredWidth = start.width + (east ? delta.x : west ? -delta.x : 0)
+  const desiredHeight = start.height + (south ? delta.y : north ? -delta.y : 0)
+  const horizontal = east || west
+  const vertical = north || south
+  const widthLeads =
+    horizontal && !vertical
+      ? true
+      : vertical && !horizontal
+        ? false
+        : Math.abs(desiredWidth - start.width) / start.width >=
+          Math.abs(desiredHeight - start.height) / start.height
+  const size = fitPreviewMiniPlayerWidth(
+    widthLeads ? desiredWidth : (desiredHeight * source.width) / source.height,
+    source,
+    max
+  )
+  const position = clampPreviewMiniPlayerPosition(
+    { x: west ? right - size.width : start.x, y: north ? bottom - size.height : start.y },
+    container,
+    size,
+    obstacles
+  )
+  return { ...position, ...size }
+}
+
+// Product-neutral names for new consumers. The PreviewMiniPlayer names stay
+// exported for Adea Dev Runtime's existing browser model API.
+export type FloatingPreviewSize = PreviewMiniPlayerSize
+export type FloatingPreviewPosition = PreviewMiniPlayerPosition
+export type FloatingPreviewFrame = PreviewMiniPlayerFrame
+export type FloatingPreviewResizeDirection = BrowserViewportResizeDirection
+export type FloatingPreviewObstacles = PreviewMiniPlayerObstacles
+export const FLOATING_PREVIEW_EDGE_GAP = PREVIEW_MINI_PLAYER_EDGE_GAP
+export const FLOATING_PREVIEW_CORNER_RADIUS = PREVIEW_MINI_PLAYER_CORNER_RADIUS
+export const NO_FLOATING_PREVIEW_OBSTACLES = NO_PREVIEW_MINI_PLAYER_OBSTACLES
+export const resolveFloatingPreviewFrame = resolvePreviewMiniPlayerFrame
+export const resizeFloatingPreview = resizePreviewMiniPlayer
+export const clampFloatingPreviewPosition = clampPreviewMiniPlayerPosition

package/src/components/layout/sidebar-nav/index.ts

@@ -11,6 +11,8 @@ export {
   sidebarNavItemStateClass,
   type SidebarNavItemProps,
   type SidebarNavProps,
+  type SidebarNavSectionProps,
+  type SidebarNavSectionTriggerProps,
   type SidebarNavTitleProps,
 } from './sidebar-nav'
 export {

package/src/components/layout/sidebar-nav/sidebar-nav.tsx

@@ -5,6 +5,15 @@ import type { ComponentProps, JSX, ValidComponent } from 'solid-js'
 import { Show, createSignal, splitProps } from 'solid-js'
 import { cn } from '#lib/utils'
 
+function invokeEventHandler(handler: unknown, event: Event) {
+  if (Array.isArray(handler)) {
+    const [callback, data] = handler as [(data: unknown, event: Event) => void, unknown]
+    callback(data, event)
+  } else if (typeof handler === 'function') {
+    ;(handler as (event: Event) => void)(event)
+  }
+}
+
 /**
  * SidebarNav.
  *
@@ -96,36 +105,69 @@ export function SidebarNavFooter(props: ComponentProps<'div'>) {
   )
 }
 
+/** Props forwarded to a collapsible section's disclosure button. */
+export type SidebarNavSectionTriggerProps = Omit<
+  ComponentProps<'button'>,
+  'type' | 'aria-expanded' | 'onClick' | 'onKeyDown' | 'children' | 'class' | 'style'
+> & {
+  /** Called for Alt+ArrowUp/Down; the host owns ordering and row identity. */
+  onReorder?: (direction: 'up' | 'down') => void
+  /** Runs before the section toggle and may cancel it with `preventDefault()`. */
+  onClick?: ComponentProps<'button'>['onClick']
+  /** Runs before shared Alt+Arrow handling and may cancel it with `preventDefault()`. */
+  onKeyDown?: ComponentProps<'button'>['onKeyDown']
+}
+
 /**
  * A titled, collapsible group. Collapsible because a list of projects
  * inevitably outgrows the column, and the user needs to put the ones they are
  * not using away *without* them disappearing into a menu.
  */
-export function SidebarNavSection(
-  props: ComponentProps<'div'> & {
-    label: string
-    /** Render a disclosure control instead of a plain heading. */
-    collapsible?: boolean
-    defaultOpen?: boolean
-    /** Count shown beside the label. */
-    count?: number
-    /** A control at the trailing edge of the heading row. */
-    action?: JSX.Element
-    /** Semantic heading element for a host's section hierarchy. */
-    headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-  }
-) {
+export type SidebarNavSectionProps = ComponentProps<'div'> & {
+  label: string
+  /** Render a disclosure control instead of a plain heading. */
+  collapsible?: boolean
+  defaultOpen?: boolean
+  /** Controlled disclosure state. When supplied, the host owns changes. */
+  open?: boolean
+  /** Called for user-initiated disclosure changes. */
+  onOpenChange?: (open: boolean) => void
+  /** Native props and reorder callbacks for the disclosure control. */
+  triggerProps?: SidebarNavSectionTriggerProps
+  /** Count shown beside the label. */
+  count?: number
+  /** A control at the trailing edge of the heading row. */
+  action?: JSX.Element
+  /** Semantic heading element for a host's section hierarchy. */
+  headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+}
+
+export function SidebarNavSection(props: SidebarNavSectionProps) {
   const [local, rest] = splitProps(props, [
     'class',
     'label',
     'collapsible',
     'defaultOpen',
+    'open',
+    'onOpenChange',
+    'triggerProps',
     'count',
     'action',
     'headingAs',
     'children',
   ])
-  const [open, setOpen] = createSignal(local.defaultOpen ?? true)
+  const [uncontrolledOpen, setUncontrolledOpen] = createSignal(local.defaultOpen ?? true)
+  const open = () => local.open ?? uncontrolledOpen()
+  const setOpen = (next: boolean) => {
+    if (local.open === undefined) setUncontrolledOpen(next)
+    local.onOpenChange?.(next)
+  }
+
+  const [trigger, triggerRest] = splitProps(local.triggerProps ?? {}, [
+    'onClick',
+    'onKeyDown',
+    'onReorder',
+  ])
 
   const heading = (
     <>
@@ -154,9 +196,22 @@ export function SidebarNavSection(
         >
           <Show when={local.collapsible} fallback={heading}>
             <button
+              {...(triggerRest as ComponentProps<'button'>)}
               type="button"
               aria-expanded={open()}
-              onClick={() => setOpen((value) => !value)}
+              onClick={(event) => {
+                invokeEventHandler(trigger.onClick, event)
+                if (event.defaultPrevented) return
+                setOpen(!open())
+              }}
+              onKeyDown={(event) => {
+                invokeEventHandler(trigger.onKeyDown, event)
+                if (event.defaultPrevented || !event.altKey) return
+                if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return
+                event.preventDefault()
+                event.stopPropagation()
+                trigger.onReorder?.(event.key === 'ArrowUp' ? 'up' : 'down')
+              }}
               class="flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase outline-none transition-colors ease-out hover:text-sidebar-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle"
             >
               {heading}

package/src/components/theme/index.ts

@@ -20,3 +20,4 @@ export {
   type ThemeSelection,
 } from './theme-provider'
 export { ThemeToggle, type ThemeToggleProps } from './theme-toggle'
+export { ThemeModeToggle, type ThemeModeToggleProps } from './theme-mode-toggle'

package/src/components/theme/theme-mode-toggle.tsx

@@ -0,0 +1,56 @@
+import { Monitor, Moon, Sun } from 'lucide-solid'
+import type { ComponentProps } from 'solid-js'
+import { For, splitProps } from 'solid-js'
+import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group/toggle-group'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
+
+const APPEARANCES = [
+  { value: 'light', label: 'Light', icon: Sun },
+  { value: 'dark', label: 'Dark', icon: Moon },
+  { value: 'system', label: 'System', icon: Monitor },
+] as const
+
+/** Controlled appearance selection for hosts that own their preference storage. */
+export type ThemeModeToggleProps = Omit<
+  ComponentProps<typeof ToggleGroup>,
+  'children' | 'value' | 'onChange' | 'multiple'
+> & {
+  mode: 'light' | 'dark' | 'system'
+  onModeChange: (mode: 'light' | 'dark' | 'system') => void
+  withLabels?: boolean
+}
+
+export function ThemeModeToggle(props: ThemeModeToggleProps) {
+  const [local, rest] = splitProps(props, ['mode', 'onModeChange', 'withLabels'])
+  return (
+    <ToggleGroup
+      {...rest}
+      attached
+      multiple={false}
+      value={local.mode}
+      onChange={(value: string | null) => {
+        const option = APPEARANCES.find((candidate) => candidate.value === value)
+        if (option) local.onModeChange(option.value)
+      }}
+      aria-label={rest['aria-label'] ?? 'Appearance'}
+    >
+      <For each={APPEARANCES}>
+        {(appearance) => (
+          <Tooltip>
+            <TooltipTrigger
+              as={ToggleGroupItem}
+              value={appearance.value}
+              variant="outline"
+              size={local.withLabels ? 'sm' : 'icon-sm'}
+              aria-label={appearance.label}
+            >
+              <appearance.icon aria-hidden="true" />
+              {local.withLabels ? <span>{appearance.label}</span> : null}
+            </TooltipTrigger>
+            <TooltipContent>Use {appearance.label.toLowerCase()} appearance</TooltipContent>
+          </Tooltip>
+        )}
+      </For>
+    </ToggleGroup>
+  )
+}

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

@@ -2,6 +2,7 @@ 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 { useFormFieldControl } from '#lib/form-field'
 import { cn } from '#lib/utils'
 
 /**
@@ -18,6 +19,8 @@ import { cn } from '#lib/utils'
  * the ring lives on the control and reads the input's focus state.
  */
 export type CheckboxProps = Omit<ComponentProps<typeof KobalteCheckbox>, 'children'> & {
+  /** ID for the hidden native checkbox input; useful with an external label. */
+  inputId?: string
   controlClass?: string
   labelClass?: string
   descriptionClass?: string
@@ -44,12 +47,24 @@ export function Checkbox(props: CheckboxProps) {
     'aria-labelledby',
     'aria-describedby',
     'aria-invalid',
+    'aria-errormessage',
     'aria-busy',
+    'id',
+    'inputId',
     'title',
   ])
+  const field = useFormFieldControl('control', {
+    id: local.inputId ?? local.id,
+    'aria-label': local['aria-label'],
+    'aria-labelledby': local['aria-labelledby'],
+    'aria-describedby': local['aria-describedby'],
+    'aria-invalid': local['aria-invalid'],
+    'aria-errormessage': local['aria-errormessage'],
+  })
 
   return (
     <KobalteCheckbox
+      id={field ? undefined : local.id}
       title={local.title}
       class={cn('group/checkbox flex items-start gap-2.5', local.class)}
       {...rest}
@@ -60,10 +75,12 @@ export function Checkbox(props: CheckboxProps) {
        * box would announce its state with no subject.
        */}
       <KobalteCheckbox.Input
+        id={field?.id ?? local.inputId}
         aria-label={local['aria-label']}
-        aria-labelledby={local['aria-labelledby']}
-        aria-describedby={local['aria-describedby']}
-        aria-invalid={local['aria-invalid']}
+        aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}
+        aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}
+        aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}
+        aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}
         aria-busy={local['aria-busy']}
         title={local.title}
       />

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

@@ -3,6 +3,7 @@ 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 { useFormFieldControl } from '#lib/form-field'
 import { cn } from '#lib/utils'
 
 /**
@@ -43,10 +44,32 @@ export function ComboboxControl(props: ComponentProps<typeof KobalteCombobox.Con
 }
 
 export function ComboboxInput(props: ComponentProps<typeof KobalteCombobox.Input>) {
-  const [local, rest] = splitProps(props, ['class'])
+  const [local, rest] = splitProps(props, [
+    'class',
+    'id',
+    'aria-label',
+    'aria-labelledby',
+    'aria-describedby',
+    'aria-invalid',
+    'aria-errormessage',
+  ])
+  const field = useFormFieldControl('control', {
+    id: local.id,
+    'aria-label': local['aria-label'],
+    'aria-labelledby': local['aria-labelledby'],
+    'aria-describedby': local['aria-describedby'],
+    'aria-invalid': local['aria-invalid'],
+    'aria-errormessage': local['aria-errormessage'],
+  })
 
   return (
     <KobalteCombobox.Input
+      id={field?.id ?? local.id}
+      aria-label={local['aria-label']}
+      aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}
+      aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}
+      aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}
+      aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}
       class={cn(
         'h-full flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground',
         'disabled:cursor-not-allowed',

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

@@ -8,3 +8,4 @@ export {
   ComboboxSection,
   ComboboxTrigger,
 } from './combobox'
+export { ValueCombobox, type ValueComboboxProps } from './value-combobox'

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

@@ -0,0 +1,38 @@
+import { splitProps, type ComponentProps, type JSX } from 'solid-js'
+import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from './combobox'
+
+export type ValueComboboxChoice =
+  | { value: string; label: string | number; textValue?: string }
+  | { value: string; label: JSX.Element; textValue: string }
+
+export type ValueComboboxProps = Omit<ComponentProps<typeof ComboboxInput>, 'value'> & {
+  value: string
+  choices: ValueComboboxChoice[]
+  onValueChange: (value: string) => void
+}
+
+/** A single-choice combobox for a controlled string value and labelled choices. */
+export function ValueCombobox(props: ValueComboboxProps) {
+  const [local, rest] = splitProps(props, ['value', 'choices', 'onValueChange'])
+
+  return (
+    <Combobox
+      options={local.choices}
+      optionValue="value"
+      optionTextValue={(choice) => choice.textValue ?? textFromLabel(choice.label)}
+      optionLabel={(choice) => choice.textValue ?? textFromLabel(choice.label)}
+      value={local.choices.find((choice) => String(choice.value) === local.value) ?? null}
+      onChange={(option) => option && local.onValueChange(String(option.value))}
+      itemComponent={(itemProps) => (
+        <ComboboxItem item={itemProps.item}>{itemProps.item.rawValue.label}</ComboboxItem>
+      )}
+    >
+      <ComboboxInput {...rest} />
+      <ComboboxContent />
+    </Combobox>
+  )
+}
+
+function textFromLabel(label: JSX.Element) {
+  return typeof label === 'string' || typeof label === 'number' ? String(label) : ''
+}