@adea-ai/ui 0.85.0 → 0.88.0

package/dist/r/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/dist/r/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/dist/r/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/dist/r/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/dist/r/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/dist/r/src/components/ui/combobox/index.ts

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

package/dist/r/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) : ''
+}

package/dist/r/src/components/ui/empty/empty-state.tsx

@@ -0,0 +1,71 @@
+import { Search } from 'lucide-solid'
+import type { ComponentProps, JSX } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { ActionButton } from '../../composites/action-button'
+import { Spinner } from '../spinner'
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from './empty'
+
+export type EmptyStateProps = Omit<ComponentProps<'div'>, 'children' | 'role' | 'aria-live'> & {
+  title: string
+  detail: string
+  busy?: boolean
+  icon?: JSX.Element
+  announceAs?: 'alert' | 'status'
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+  action?: () => void
+  actionLabel?: string
+  actionTooltip?: string
+}
+
+/** A semantic empty, loading, or error state built from the shared empty parts. */
+export function EmptyState(props: EmptyStateProps) {
+  const [local, rest] = splitProps(props, [
+    'title',
+    'detail',
+    'busy',
+    'icon',
+    'announceAs',
+    'headingLevel',
+    'action',
+    'actionLabel',
+    'actionTooltip',
+    'class',
+  ])
+
+  return (
+    <Empty
+      {...rest}
+      class={local.class}
+      role={local.announceAs}
+      aria-live={local.announceAs === 'status' ? 'polite' : undefined}
+      aria-busy={local.busy || undefined}
+    >
+      <EmptyHeader>
+        <Show when={local.busy || local.icon}>
+          <EmptyMedia variant="icon">
+            {local.busy ? (
+              <Spinner label={false} aria-hidden="true" />
+            ) : (
+              (local.icon ?? <Search aria-hidden="true" />)
+            )}
+          </EmptyMedia>
+        </Show>
+        <EmptyTitle role="heading" aria-level={local.headingLevel ?? 1}>
+          {local.title}
+        </EmptyTitle>
+        <EmptyDescription>{local.detail}</EmptyDescription>
+      </EmptyHeader>
+      <Show when={local.action}>
+        <EmptyContent>
+          <ActionButton
+            tooltip={local.actionTooltip ?? local.actionLabel ?? 'Try again'}
+            aria-label={local.actionLabel ?? 'Try again'}
+            onClick={local.action}
+          >
+            {local.actionLabel ?? 'Try again'}
+          </ActionButton>
+        </EmptyContent>
+      </Show>
+    </Empty>
+  )
+}

package/dist/r/src/components/ui/empty/index.ts

@@ -8,3 +8,4 @@ export {
   type EmptyMediaProps,
   type EmptyProps,
 } from './empty'
+export { EmptyState, type EmptyStateProps } from './empty-state'

package/dist/r/src/components/ui/entity-icon/entity-icon.tsx

@@ -1,4 +1,11 @@
-import { Show, splitProps, type Component, type ComponentProps, type JSX } from 'solid-js'
+import {
+  createSignal,
+  Show,
+  splitProps,
+  type Component,
+  type ComponentProps,
+  type JSX,
+} from 'solid-js'
 import { Dynamic } from 'solid-js/web'
 import { cva, type VariantProps } from '../../../lib/variants'
 import { cn } from '../../../lib/utils'
@@ -16,7 +23,8 @@ import { cn } from '../../../lib/utils'
  *
  * 1. **A glyph is always present.** A brand with no logo gets a monogram, not an
  *    empty box. `fallback` takes the name and returns the glyph, so a caller can
- *    choose initials, a domain letter, or a kind icon.
+ *    choose initials, a domain letter, or a kind icon. When `src` is supplied,
+ *    its contained image overlays that glyph and failure reveals the glyph below.
  * 2. **The tile owns its own contrast.** `tone` tints the background while
  *    monogram text keeps the body foreground; vector glyphs retain the status
  *    colour. A caller never picks a colour pair or ships a glyph that disappears.
@@ -67,6 +75,8 @@ export type EntityIconProps = Omit<ComponentProps<'span'>, 'children'> &
   EntityIconVariantProps & {
     /** The entity's name. Used for the accessible label and, via `fallback`, the monogram. */
     name: string
+    /** Optional image URL. The image is decorative; `name` remains the accessible label. */
+    src?: string
     /**
      * A logo or icon — a Lucide icon reference (`icon={Wrench}`) or an element
      * (`icon={<Wrench />}`). Both are accepted because both are what a caller
@@ -108,9 +118,27 @@ function Glyph(props: { glyph: Glyph }) {
   )
 }
 
+function EntityIconImage(props: { src: string }) {
+  const [failed, setFailed] = createSignal(false)
+
+  return (
+    <Show when={!failed()}>
+      <img
+        data-slot="entity-icon-image"
+        src={props.src}
+        alt=""
+        aria-hidden="true"
+        class="pointer-events-none absolute inset-0 size-full object-contain"
+        onError={() => setFailed(true)}
+      />
+    </Show>
+  )
+}
+
 export function EntityIcon(props: EntityIconProps) {
   const [local, rest] = splitProps(props, [
     'name',
+    'src',
     'icon',
     'fallback',
     'badge',
@@ -146,6 +174,9 @@ export function EntityIcon(props: EntityIconProps) {
       >
         {(value) => <Glyph glyph={value()} />}
       </Show>
+      <Show when={local.src} keyed>
+        {(src) => <EntityIconImage src={src} />}
+      </Show>
       <Show when={local.badge}>
         <span class="absolute right-0 bottom-0 translate-x-1/4 translate-y-1/4">{local.badge}</span>
       </Show>

package/dist/r/src/components/ui/field/field.tsx

@@ -1,6 +1,8 @@
 import { TextField as KobalteTextField } from '@kobalte/core/text-field'
-import type { ComponentProps } from 'solid-js'
-import { Show, splitProps } from 'solid-js'
+import type { ComponentProps, JSX } from 'solid-js'
+import { createUniqueId, Show, splitProps } from 'solid-js'
+import { Label } from '../label/label'
+import { createFormFieldContext, FormFieldContext } from '../../../lib/form-field'
 import { cn } from '../../../lib/utils'
 
 /**
@@ -9,21 +11,110 @@ import { cn } from '../../../lib/utils'
  * The wrapper that makes a form control describable and validatable: a label,
  * a description, an error message, and the ARIA relationships between them.
  *
+ * This Kobalte TextField composition is for its own `FieldLabel`, `FieldInput`
+ * and `FieldTextArea` parts. Use `FormField` to wire the standalone shared
+ * controls, including checkboxes, switches and comboboxes.
+ *
  * It is built on Kobalte's TextField specifically so `aria-describedby`,
  * `aria-invalid` and `aria-errormessage` are wired by construction. Those three
  * attributes are the difference between "this field is required and empty" and
  * a red border that only a sighted user can perceive — and they are also the
  * first thing a hand-rolled form drops.
  *
- * `Field` owns the description and the error slot, so a form's controls line up
- * and its messages land in the same place regardless of which control is used.
- * Compose it with any control: `Field` wraps, `Label`/`Input`/`Select` fill it.
+ * `Field` owns the description and the error slot, so its controls line up and
+ * its messages land in the same place regardless of which TextField part is used.
  */
 export function Field(props: ComponentProps<typeof KobalteTextField>) {
   const [local, rest] = splitProps(props, ['class'])
   return <KobalteTextField class={cn('flex flex-col gap-1.5', local.class)} {...rest} />
 }
 
+export type FormFieldProps = Omit<ComponentProps<'div'>, 'children' | 'ref'> & {
+  label: string
+  hint?: string
+  error?: string
+  controlId?: string
+  group?: boolean
+  children: JSX.Element
+}
+
+/**
+ * FormField.
+ *
+ * A shared label, help and validation wrapper for any one shared control. Its
+ * context is consumed by Input, Textarea, NativeSelect, Checkbox, Switch,
+ * RadioGroup and ComboboxInput, so the actual focusable element receives the
+ * generated ID and description relationships. Set `group` when the label names
+ * a set of controls; the wrapper then uses fieldset and legend semantics.
+ */
+export function FormField(props: FormFieldProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'label',
+    'hint',
+    'error',
+    'controlId',
+    'group',
+    'children',
+  ])
+  const fieldId = createUniqueId()
+  const labelId = `${fieldId}-label`
+  const descriptionId = `${fieldId}-description`
+  const errorId = `${fieldId}-error`
+  const field = createFormFieldContext({
+    controlId: local.controlId,
+    defaultControlId: fieldId,
+    labelId,
+    descriptionId,
+    errorId,
+    hint: () => local.hint,
+    error: () => local.error,
+    group: () => local.group ?? false,
+  })
+  const help = () => (
+    <>
+      <Show when={local.hint}>
+        <p id={descriptionId} class="text-muted-foreground text-sm">
+          {local.hint}
+        </p>
+      </Show>
+      <Show when={local.error}>
+        <p id={errorId} role="alert" class="text-foreground text-sm">
+          {local.error}
+        </p>
+      </Show>
+    </>
+  )
+
+  return (
+    <FormFieldContext.Provider value={field}>
+      <div class={cn('flex flex-col gap-1.5', local.class)} {...rest}>
+        {local.group ? (
+          <FieldSet
+            class="flex flex-col gap-1.5"
+            aria-describedby={field.describedBy()}
+            aria-invalid={field.invalid() || undefined}
+          >
+            <FieldLegend id={labelId} variant="label">
+              {local.label}
+            </FieldLegend>
+            {local.children}
+            {help()}
+          </FieldSet>
+        ) : (
+          <>
+            <Label id={labelId} for={field.controlId()}>
+              {local.label}
+            </Label>
+            {local.children}
+            {help()}
+          </>
+        )}
+      </div>
+    </FormFieldContext.Provider>
+  )
+}
+
 export function FieldLabel(props: ComponentProps<typeof KobalteTextField.Label>) {
   const [local, rest] = splitProps(props, ['class'])
   return (
@@ -96,6 +187,12 @@ export function FieldSet(props: ComponentProps<'fieldset'>) {
   return <fieldset class={cn('flex flex-col gap-4', local.class)} {...rest} />
 }
 
+/** A visual stack for related controls that does not imply fieldset semantics. */
+export function FieldGroup(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <div data-slot="field-group" class={cn('flex flex-col gap-4', local.class)} {...rest} />
+}
+
 export function FieldLegend(props: ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
   const [local, rest] = splitProps(props, ['class', 'variant'])
   return (

package/dist/r/src/components/ui/field/index.ts

@@ -1,11 +1,16 @@
 export {
   Field,
+  FormField,
   FieldDescription,
   FieldError,
+  FieldGroup,
   FieldInput,
   FieldLabel,
   FieldLegend,
   FieldSeparator,
   FieldSet,
   FieldTextArea,
+  type FormFieldProps,
 } from './field'
+export { NumberField } from './number-field'
+export type { NumberFieldProps } from './number-field'