@llui/components

66 headless UI components for LLui. Pure state machines with no DOM opinions -- you own the markup and styling via data-scope / data-part attributes.

Usage

Each component exports init, update, connect, and a barrel object:

import { component, div, button, text } from '@llui/dom'
import { tabs } from '@llui/components/tabs'

type State = { tabs: tabs.TabsState }
type Msg = { type: 'tabs'; msg: tabs.TabsMsg }

const App = component<State, Msg>({
  name: 'App',
  init: () => ({ tabs: tabs.init({ items: ['a', 'b', 'c'], value: 'a' }) }),
  update: (s, m) => {
    const [t] = tabs.update(s.tabs, m.msg)
    return [{ tabs: t }, []]
  },
  // `connect` takes the sliced SIGNAL handle (`state.at('tabs')`), not an accessor.
  view: ({ state, send }) => {
    const t = tabs.connect(state.at('tabs'), (m) => send({ type: 'tabs', msg: m }), { id: 'demo' })
    return [
      div({ ...t.root }, [
        div({ ...t.list }, [
          button({ ...t.item('a').trigger }, [text('Tab A')]),
          button({ ...t.item('b').trigger }, [text('Tab B')]),
          button({ ...t.item('c').trigger }, [text('Tab C')]),
        ]),
        div({ ...t.item('a').panel }, [text('Content A')]),
        div({ ...t.item('b').panel }, [text('Content B')]),
        div({ ...t.item('c').panel }, [text('Content C')]),
      ]),
    ]
  },
})

Pattern

init(opts?) -- creates the initial state
update(state, msg) -- pure reducer, returns [newState, effects[]]
connect(state, send, opts?) -- takes the sliced Signal handle; returns parts objects with reactive props, ARIA attributes, and event handlers. Spread parts onto your elements: div({ ...parts.root }, [...])
Overlay helpers (dialog, popover, menu, etc.) -- overlay() wires up portals, focus traps, dismiss layers, and positioning

Composition: delegated `update`

The parent owns the component's state as a slice and routes its messages through the parent's Msg union — a flat switch, no special combinator. connect(state, send, opts?) takes the sliced signal handle and returns spreadable, signal-based parts.

import { tabs } from '@llui/components/tabs'
import { div } from '@llui/dom'

type State = { tabs: tabs.TabsState /* … */ }
type Msg = { type: 'tabs'; msg: tabs.TabsMsg } /* | … */

update: (state, msg) => {
  switch (msg.type) {
    case 'tabs':
      return [{ ...state, tabs: tabs.update(state.tabs, msg.msg)[0] }, []]
    // … other slices
  }
}

// view — connect() takes the sliced signal and a routed `send`:
view: ({ state, send }) => {
  const parts = tabs.connect(state.at('tabs'), (m) => send({ type: 'tabs', msg: m }))
  return [
    div({ ...parts.root }, [
      /* … */
    ]),
  ]
}

Components (66)

Form controls

accordion, checkbox, collapsible, editable, field, fieldset, form, number-input, password-input, pin-input, radio-group, rating-group, search-field, slider, switch, tabs, tags-input, theme-switch, toggle, toggle-group

Overlays

alert-dialog, combobox, context-menu, dialog, drawer, hover-card, menu, menubar, navigation-menu, popover, select, toast, tooltip, tour

Data display

async-list, avatar, breadcrumbs, carousel, cascade-select, clipboard, in-view, listbox, meter, pagination, progress, qr-code, scroll-area, sortable, steps, table, toc, toolbar, tree-view

Pickers

color-picker, date-input, date-picker, time-picker, angle-slider

Media / canvas

file-upload, floating-panel, image-cropper, marquee, presence, signature-pad, splitter, timer

Patterns

@llui/components/patterns/confirm-dialog -- pre-wired alert-dialog for destructive confirmations.

Utilities

Shared helpers used internally and exported for advanced use:

Utility	Purpose
`typeahead`	First-letter search across menu, select, listbox, tree-view
`TreeCollection`	Indexed tree traversal -- visibleItems, labels, indeterminate computation
`floating`	`@floating-ui/dom` wrapper for popover/menu positioning
`focus-trap`	Stack-based focus containment for modals
`dismissable`	Esc / outside-click dismiss layer stack
`aria-hidden`	`aria-hidden` on siblings of a modal for screen readers
`remove-scroll`	Body scroll lock for modals/drawers

Styling (opt-in)

Components are fully headless by default. An opt-in styling layer provides two complementary mechanisms:

CSS theme -- `theme.css`

Import once at your app root for a complete default look based on data-scope/data-part attribute selectors:

import '@llui/components/styles/theme.css'

Includes design tokens (@theme) and enter/exit animations for overlays. Override any token in your own CSS:

@theme {
  --color-primary: #8b5cf6;
  --radius-lg: 1rem;
}

For dark mode, import the separate dark theme file after Tailwind and theme.css:

import '@llui/components/styles/theme-dark.css'

This activates automatically via prefers-color-scheme: dark. Force light with <html data-theme="light">, force dark with <html data-theme="dark">. The dark file is separate because Tailwind 4's @theme scanner would otherwise merge dark tokens into the root theme.

JS class helpers -- Tailwind utility strings

Each component has a class helper that returns Tailwind utility strings per part, with size/variant props:

import { tabsClasses } from '@llui/components/styles/tabs'

const cls = tabsClasses({ size: 'sm', variant: 'pill' })
// cls.root, cls.list, cls.trigger, cls.panel, cls.indicator

div({ ...t.root, class: cls.root }, [
  div({ ...t.list, class: cls.list }, [
    button({ ...t.item('a').trigger, class: cls.trigger }, [text('Tab A')]),
  ]),
  div({ ...t.item('a').panel, class: cls.panel }, [text('Content A')]),
])

Or import everything from the barrel:

import { tabsClasses, dialogClasses, cx } from '@llui/components/styles'

Variant engine

The createVariants utility powers all class helpers and is exported for custom components:

import { createVariants, cx } from '@llui/components/styles'

const button = createVariants({
  base: 'inline-flex items-center font-medium',
  variants: {
    size: { sm: 'px-2 py-1 text-sm', md: 'px-4 py-2' },
    intent: { primary: 'bg-primary text-white', ghost: 'bg-transparent' },
  },
  defaultVariants: { size: 'md', intent: 'primary' },
  compoundVariants: [{ size: 'sm', intent: 'ghost', class: 'font-normal' }],
})

button({ size: 'sm', intent: 'ghost' }) // -> class string

Sub-path imports

Every component has its own entry point for tree-shaking:

import { tabs } from '@llui/components/tabs'
import { dialog } from '@llui/components/dialog'
import { timer } from '@llui/components/timer'

Validation

Input components accept an optional validate callback on ConnectOptions that gates state changes:

const parts = editable.connect<S>(get, send, {
  validate: (value) => {
    if (value.length < 3) return ['Too short']
    return null // valid
  },
})

Supported on: editable, number-input, tags-input, pin-input, file-upload.

Component Reference

All 67 components follow the same pattern:

import { componentName } from '@llui/components/component-name'

// State machine
const state = componentName.init({ /* options */ })
const [newState, effects] = componentName.update(state, msg)

// Connect to DOM
const parts = componentName.connect<State>(s => s.field, send, { id: '...' })
// Use parts: div({ ...parts.root }, [button({ ...parts.trigger }, [...])])

Accordion

State (AccordionState):

Field	Type
`value`	`string[]`
`multiple`	`boolean`
`collapsible`	`boolean`
`disabled`	`boolean`
`items`	`string[]`

Messages: toggle, open, close, setValue, setItems, focusNext, focusPrev, focusFirst, focusLast

Init options: value?: string[], multiple?: boolean, collapsible?: boolean, disabled?: boolean, items?: string[]

Connect options: ConnectOptions

Parts: root, item

Utilities: focusTarget()

Alert Dialog

State: AlertDialogState (see parent component)

Connect options: AlertDialogConnectOptions

Angle Slider

State (AngleSliderState):

Field	Type
`value`	`number`
`min`	`number`
`max`	`number`
`step`	`number`
`disabled`	`boolean`
`readonly`	`boolean`
`dir`	`'ltr' \| 'rtl'`

Messages: setValue, increment, decrement, setMin, setMax, setDir

Init options: value?: number, min?: number, max?: number, step?: number, disabled?: boolean, readonly?: boolean, dir?: 'ltr' | 'rtl'

Connect options: ConnectOptions

Parts: root, control, thumb, valueText, hiddenInput

Async List

State (AsyncListState):

Field	Type
`items`	`T[]`
`page`	`number`
`hasMore`	`boolean`
`status`	`AsyncStatus`
`error`	`string \| null`

Messages: loadMore, pageLoaded, pageFailed, reset, setItems, retry

Init options: items?: T[], page?: number, hasMore?: boolean

Parts: root, sentinel, loadMoreTrigger, retryTrigger, errorText

Avatar

State (AvatarState):

Field	Type
`status`	`ImageStatus`

Messages: loadStart, loaded, error, reset

Init options: status?: ImageStatus

Connect options: ConnectOptions

Parts: root, image, fallback

Breadcrumbs

State (BreadcrumbsState):

Field	Type
`items`	`BreadcrumbItem[]`
`maxVisible`	`number \| null`
`expanded`	`boolean`

Messages: setItems, expand, collapse

Init options: items?: BreadcrumbItem[], maxVisible?: number | null, expanded?: boolean

Connect options: ConnectOptions

Parts: root, list, item, link, separator, ellipsisTrigger

Utilities: visibleItems()

Carousel

State (CarouselState):

Field	Type
`current`	`number`
`count`	`number`
`loop`	`boolean`
`autoplay`	`boolean`
`interval`	`number`
`paused`	`boolean`
`direction`	`'forward' \| 'backward'`
`swipeThreshold`	`number`
`dragging`	`CarouselDrag \| null`
`dir`	`'ltr' \| 'rtl'`

Messages: goTo, next, prev, setCount, pause, resume, setAutoplay, dragStart, dragMove, dragEnd, setDir

Init options: current?: number, count?: number, loop?: boolean, autoplay?: boolean, interval?: number, swipeThreshold?: number, dir?: 'ltr' | 'rtl'

Connect options: ConnectOptions

Parts: root, viewport, indicatorGroup, nextTrigger, prevTrigger, slide

Utilities: canGoNext(), canGoPrev(), swipeDecision()

Cascade Select

State (CascadeSelectState):

Field	Type
`levels`	`CascadeLevel[]`
`values`	`(string \| null)[]`
`disabled`	`boolean`

Messages: setLevels, setValue, clear

Init options: levels?: CascadeLevel[], values?: (string | null)[], disabled?: boolean

Connect options: ConnectOptions

Parts: root, clearTrigger, level

Checkbox

State (CheckboxState):

Field	Type
`checked`	`CheckedState`
`disabled`	`boolean`
`required`	`boolean`

Messages: toggle, setChecked, setDisabled

Init options: checked?: CheckedState, disabled?: boolean, required?: boolean

Parts: root, hiddenInput, indicator

Clipboard

State (ClipboardState):

Field	Type
`value`	`string`
`copied`	`boolean`

Messages: setValue, copy, copied, reset

Init options: value?: string

Connect options: ConnectOptions

Parts: root, trigger, input, indicator

Utilities: copyToClipboard()

Collapsible

State (CollapsibleState):

Field	Type
`open`	`boolean`
`disabled`	`boolean`

Messages: toggle, open, close, setOpen

Init options: open?: boolean, disabled?: boolean

Connect options: ConnectOptions

Parts: root, trigger, content

Color Picker

State (ColorPickerState):

Field	Type
`hsv`	`Hsv`
`alpha`	`number`
`disabled`	`boolean`

Messages: setHsl, setHue, setSaturation, setLightness, setAlpha, setHex, setSv, nudgeSv, setColor

Init options: hsl?: Hsl, hsv?: Hsv, alpha?: number, disabled?: boolean

Connect options: ConnectOptions

Parts: root, hueSlider, saturationSlider, lightnessSlider, hexInput, preview, area, areaThumb, alphaSlider, swatchGroup, swatch

Combobox

State (ComboboxState):

Field	Type
`open`	`boolean`
`value`	`string[]`
`inputValue`	`string`
`items`	`string[]`
`groups`	`ComboboxGroup[]`
`disabledItems`	`string[]`
`filteredItems`	`string[]`
`highlightedIndex`	`number \| null`
`selectionMode`	`SelectionMode`
`disabled`	`boolean`
`allowCreate`	`boolean`
`status`	`AsyncStatus`
`requestId`	`number`
`error`	`string \| null`

Messages: open, close, setInputValue, selectOption, setValue, clear, highlightNext, highlightPrev, highlightFirst, highlightLast, highlight, selectHighlighted, setItems, loadStart, loadSuccess, loadError

Init options: value?: string[], inputValue?: string, items?: string[], groups?: ComboboxGroup[], disabledItems?: string[], selectionMode?: SelectionMode, disabled?: boolean, allowCreate?: boolean

Connect options: ConnectOptions

Parts: root, input, trigger, positioner, content, item, group, liveRegion, empty

Utilities: overlay(), isCreateOption(), CREATE_OPTION_VALUE()

State (ContextMenuState):

Field	Type
`x`	`number`
`y`	`number`

Messages: openAt, close, highlight, highlightNext, highlightPrev, highlightFirst, highlightLast, selectHighlighted, select, openSub, closeSub, setItems, typeahead, setDir, animationEnd

Init options: items?: ContextMenuItem[], checked?: string[], closeOnSelect?: boolean, dir?: 'ltr' | 'rtl', skipAnimations?: boolean

Connect options: ConnectOptions

Parts: trigger, positioner, content, item, checkboxItem, radioItem, group, separator, subTrigger, subPositioner, subContent

Date Input

State (DateInputState):

Field	Type
`input`	`string`
`value`	`Date \| null`
`min`	`Date \| null`
`max`	`Date \| null`
`error`	`DateError`
`disabled`	`boolean`
`readonly`	`boolean`
`required`	`boolean`

Messages: setInput, setValue, clear, setMin, setMax, setDisabled

Init options: input?: string, value?: Date | null, min?: Date | null, max?: Date | null, disabled?: boolean, readonly?: boolean, required?: boolean

Connect options: ConnectOptions

Parts: root, input, clearTrigger, errorText

Date Picker

State (DatePickerState):

Field	Type
`mode`	`DatePickerMode`
`value`	`string \| null`
`start`	`string \| null`
`end`	`string \| null`
`hoverDate`	`string \| null`
`visibleMonth`	`number`
`visibleYear`	`number`
`months`	`number`
`focused`	`string`
`min`	`string \| null`
`max`	`string \| null`
`weekStartsOn`	`0 \| 1`
`disabled`	`boolean`

Messages: setValue, setRange, setFocused, setHover, clearHover, prevMonth, nextMonth, prevYear, nextYear, selectFocused, moveFocus, focusStartOfWeek, focusEndOfWeek, focusToday, clear

Connect options: ConnectOptions

Parts: root, grid, row, prevMonthTrigger, nextMonthTrigger, dayCell, preset

Dialog

State (DialogState):

Field	Type
`open`	`boolean`
`status`	`PresenceStatus`
`skipAnimations`	`boolean`

Messages: open, close, toggle, setOpen, animationEnd, transitionEnd

Init options: open?: boolean, skipAnimations?: boolean

Connect options: ConnectOptions

Parts: trigger, backdrop, positioner, content, title, description, closeTrigger

Utilities: overlay(), isMounted(), isPresent()

Drawer

State (DrawerState):

Field	Type
`open`	`boolean`
`status`	`PresenceStatus`
`skipAnimations`	`boolean`

Messages: open, close, toggle, setOpen, animationEnd, transitionEnd

Init options: open?: boolean, skipAnimations?: boolean

Connect options: ConnectOptions

Parts: trigger, backdrop, positioner, content, title, description, closeTrigger

Utilities: overlay(), isMounted(), isPresent()

Editable

State (EditableState):

Field	Type
`value`	`string`
`editing`	`boolean`
`draft`	`string`
`disabled`	`boolean`

Messages: edit, setDraft, submit, cancel, setValue

Init options: value?: string, editing?: boolean, disabled?: boolean

Connect options: ConnectOptions

Parts: root, preview, input, submitTrigger, cancelTrigger, editTrigger

Field

State (FieldState):

Field	Type
`id`	`string`
`invalid`	`boolean`
`required`	`boolean`
`disabled`	`boolean`
`readonly`	`boolean`
`touched`	`boolean`

Messages: setInvalid, setRequired, setDisabled, setReadonly, setTouched

Init options: id: string, invalid?: boolean, required?: boolean, disabled?: boolean, readonly?: boolean, touched?: boolean

Connect options: FieldConnectOptions

Parts: root, label, control, description, errorText

Fieldset

State (FieldsetState):

Field	Type
`id`	`string`
`disabled`	`boolean`
`invalid`	`boolean`

Messages: setDisabled, setInvalid

Init options: id: string, disabled?: boolean, invalid?: boolean

Connect options: FieldsetConnectOptions

Parts: root, legend, errorText

File Upload

State (FileUploadState):

Field	Type
`files`	`File[]`
`rejectedFiles`	`RejectedFile[]`
`disabled`	`boolean`
`multiple`	`boolean`
`accept`	`AcceptValue`
`maxFiles`	`number`
`maxSize`	`number`
`minFileSize`	`number`
`required`	`boolean`
`readonly`	`boolean`
`invalid`	`boolean`
`dragging`	`boolean`

Messages: setFiles, addFiles, removeFile, removeRejected, clear, clearRejected, dragEnter, dragLeave, drop, setInvalid

Init options: files?: File[], disabled?: boolean, multiple?: boolean, accept?: AcceptValue, maxFiles?: number, maxSize?: number, minFileSize?: number, required?: boolean, readonly?: boolean, invalid?: boolean

Connect options: ConnectOptions

Parts: root, dropzone, trigger, hiddenInput, label, clearTrigger, itemGroup, item

Floating Panel

State (FloatingPanelState):

Field	Type
`position`	`{ x: number; y: number }`
`size`	`{ width: number; height: number }`
`minSize`	`{ width: number; height: number }`
`maxSize`	`{ width: number; height: number } \| null`
`open`	`boolean`
`minimized`	`boolean`
`maximized`	`boolean`
`dragging`	`boolean`
`resizing`	`ResizeHandle \| null`
`restoreBounds`	`{ x: number; y: number; width: number; height: number } \| null`
`disabled`	`boolean`

Messages: open, close, minimize, restoreFromMinimized, maximize, restoreFromMaximized, toggleMinimize, toggleMaximize, dragStart, dragMove, dragEnd, resizeStart, resizeMove, resizeEnd, setPosition, setSize

Init options: position?: { x: number; y: number }, size?: { width: number; height: number }, minSize?: { width: number; height: number }, maxSize?: { width: number; height: number } | null, open?: boolean, disabled?: boolean

Connect options: ConnectOptions

Parts: root, dragHandle, content, minimizeTrigger, maximizeTrigger, closeTrigger, resizeHandle

Form

State (FormState):

Field	Type
`status`	`FormStatus`
`touched`	`Record<string, boolean>`
`submitError`	`string \| null`

Messages: touch, touchAll, submit, submitSuccess, submitError, reset

Connect options: ConnectOptions

Parts: root, field, submit

Utilities: validateSchema(), validateSchemaAsync()

State (HoverCardState):

Field	Type
`open`	`boolean`
`status`	`PresenceStatus`
`skipAnimations`	`boolean`

Messages: show, hide, setOpen, animationEnd, transitionEnd

Init options: open?: boolean, skipAnimations?: boolean

Connect options: ConnectOptions

Parts: trigger, positioner, content, arrow

Image Cropper

State (ImageCropperState):

Field	Type
`image`	`{ width: number; height: number }`
`crop`	`CropRect`
`aspectRatio`	`number \| null`
`minSize`	`number`
`dragging`	`boolean`
`resizing`	`ResizeHandle \| null`
`disabled`	`boolean`

Messages: setImage, setCrop, setAspectRatio, dragStart, dragMove, dragEnd, resizeStart, resizeMove, resizeEnd, reset, centerFill

Init options: image?: { width: number; height: number }, crop?: CropRect, aspectRatio?: number | null, minSize?: number, disabled?: boolean

Connect options: ConnectOptions

Parts: root, image, cropBox, resizeHandle, resetTrigger

In View

State (InViewState):

Field	Type
`visible`	`boolean`

Messages: enter, leave

Connect options: ConnectOptions

Parts: root

Listbox

State (ListboxState):

Field	Type
`value`	`string[]`
`items`	`string[]`
`disabledItems`	`string[]`
`disabled`	`boolean`
`selectionMode`	`SelectionMode`
`highlightedIndex`	`number \| null`
`typeahead`	`string`
`typeaheadExpiresAt`	`number`

Messages: select, setValue, clear, highlight, highlightNext, highlightPrev, highlightFirst, highlightLast, selectHighlighted, setItems, typeahead

Init options: value?: string[], items?: string[], disabledItems?: string[], disabled?: boolean, selectionMode?: SelectionMode

Connect options: ConnectOptions

Parts: root, item

Marquee

State (MarqueeState):

Field	Type
`running`	`boolean`
`direction`	`MarqueeDirection`
`durationSec`	`number`
`pauseOnHover`	`boolean`
`hovered`	`boolean`
`disabled`	`boolean`

Messages: play, pause, toggle, hoverPause, hoverResume, setDirection, setDuration

Init options: running?: boolean, direction?: MarqueeDirection, durationSec?: number, pauseOnHover?: boolean, disabled?: boolean

Parts: root, content

Utilities: isRunning(), cssAnimationDirection(), axis()

State (MenuTreeState):

Field	Type
`open`	`boolean`
`status`	`PresenceStatus`
`skipAnimations`	`boolean`
`items`	`MenuNode[]`
`highlights`	`Record<string, string \| null>`
`openPath`	`string[]`
`checked`	`string[]`
`closeOnSelect`	`boolean`
`typeahead`	`string`
`typeaheadExpiresAt`	`number`
`dir`	`'ltr' \| 'rtl'`

Messages: close, highlight, highlightNext, highlightPrev, highlightFirst, highlightLast, selectHighlighted, select, openSub, closeSub, setItems, typeahead, setDir, animationEnd

Parts: item, checkboxItem, radioItem, group, separator, subTrigger, subPositioner, subContent, rootKeyNav

State (MenuState):

Field	Type
`open`	`boolean`
`status`	`PresenceStatus`
`skipAnimations`	`boolean`
`items`	`MenuItem[]`
`highlights`	`Record<string, string \| null>`
`openPath`	`string[]`
`checked`	`string[]`
`closeOnSelect`	`boolean`
`typeahead`	`string`
`typeaheadExpiresAt`	`number`
`dir`	`'ltr' \| 'rtl'`

Messages: open, close, toggle, highlight, highlightNext, highlightPrev, highlightFirst, highlightLast, selectHighlighted, select, openSub, closeSub, setItems, typeahead, setDir, animationEnd

Init options: open?: boolean, items?: MenuItem[], highlighted?: string | null, checked?: string[], closeOnSelect?: boolean, dir?: 'ltr' | 'rtl', skipAnimations?: boolean

Connect options: ConnectOptions

Parts: trigger, positioner, content, item, checkboxItem, radioItem, group, separator, subTrigger, subPositioner, subContent

Utilities: overlay(), isPresent(), isMounted()

Menubar

State (MenubarState):

Field	Type
`menus`	`string[]`
`open`	`string \| null`
`focused`	`string \| null`
`disabledMenus`	`string[]`
`menuStates`	`Record<string, MenuState>`

Messages: openMenu, closeMenu, focusMenu, focusNext, focusPrev, menuMsg

Init options: menus: MenubarMenu[], focused?: string | null

Connect options: ConnectOptions

Parts: root, menuTrigger, menu

Utilities: overlay()

Meter

State (MeterState):

Field	Type
`value`	`number`
`min`	`number`
`max`	`number`
`low`	`number`
`high`	`number`
`optimum`	`number`

Messages: setValue, setMax

Init options: value?: number, min?: number, max?: number, low?: number, high?: number, optimum?: number

Connect options: ConnectOptions

Parts: root, track, range, label, valueText

Utilities: percent(), thresholdState()

State (NavMenuState):

Field	Type
`open`	`string[]`
`focused`	`string \| null`
`disabled`	`boolean`
`dir`	`'ltr' \| 'rtl'`

Messages: openBranch, closeBranch, toggleBranch, closeAll, focus, setDir

Init options: open?: string[], focused?: string | null, disabled?: boolean, dir?: 'ltr' | 'rtl'

Connect options: ConnectOptions

Parts: root, item

Number Input

State (NumberInputState):

Field	Type
`value`	`number \| null`
`min`	`number`
`max`	`number`
`step`	`number`
`disabled`	`boolean`
`readonly`	`boolean`
`rawText`	`string`

Messages: setValue, setRawText, commit, increment, decrement, toMin, toMax, setDisabled

Init options: value?: number | null, min?: number, max?: number, step?: number, disabled?: boolean, readonly?: boolean

Connect options: ConnectOptions

Parts: root, input, increment, decrement

Pagination

State (PaginationState):

Field	Type
`page`	`number`
`pageSize`	`number`
`total`	`number`
`siblings`	`number`
`boundaries`	`number`
`disabled`	`boolean`
`dir`	`TextDirection`

Messages: goTo, next, prev, first, last, setPageSize, setTotal, setDir

Init options: page?: number, pageSize?: number, total?: number, siblings?: number, boundaries?: number, disabled?: boolean, dir?: TextDirection

Connect options: ConnectOptions

Parts: root, prevTrigger, nextTrigger, item, ellipsis

Utilities: totalPages(), pageItems(), onControlKeyDown()

Password Input

State (PasswordInputState):

Field	Type
`value`	`string`
`visible`	`boolean`
`disabled`	`boolean`

Messages: setValue, toggleVisibility, setVisible

Init options: value?: string, visible?: boolean, disabled?: boolean

Connect options: ConnectOptions

Parts: root, input, visibilityTrigger

Pin Input

State (PinInputState):

Field	Type
`values`	`string[]`
`length`	`number`
`type`	`PinType`
`mask`	`boolean`
`disabled`	`boolean`
`focusedIndex`	`number`

Messages: setValue, setAll, focus, clear, backspace

Init options: length?: number, type?: PinType, mask?: boolean, disabled?: boolean, values?: string[]

Connect options: ConnectOptions

Parts: root, label, input

State (PopoverState):

Field	Type
`open`	`boolean`
`status`	`PresenceStatus`
`skipAnimations`	`boolean`

Messages: open, close, toggle, setOpen, animationEnd, transitionEnd

Init options: open?: boolean, skipAnimations?: boolean

Connect options: ConnectOptions

Parts: trigger, positioner, content, title, description, arrow, closeTrigger

Utilities: overlay(), isMounted(), isPresent()

Presence

State (PresenceState):

Field	Type
`status`	`PresenceStatus`
`unmountOnExit`	`boolean`

Messages: open, close, toggle, animationEnd, setPresent

Init options: present?: boolean, unmountOnExit?: boolean

Parts: root

Utilities: isMounted(), isVisible(), isAnimating()

Progress

State (ProgressState):

Field	Type
`value`	`number \| null`
`min`	`number`
`max`	`number`
`orientation`	`ProgressOrientation`

Messages: setValue, setMax

Init options: value?: number | null, min?: number, max?: number, orientation?: ProgressOrientation

Connect options: ConnectOptions

Parts: root, track, range, label, valueText

Utilities: percent(), valueState()

Qr Code

State (QrCodeState):

Field	Type
`value`	`string`
`matrix`	`boolean[][]`
`errorCorrection`	`ErrorCorrectionLevel`

Messages: setValue, setMatrix, setErrorCorrection

Init options: value?: string, matrix?: boolean[][], errorCorrection?: ErrorCorrectionLevel

Connect options: ConnectOptions

Parts: root, svg, background, foreground, downloadTrigger

Radio Group

State (RadioGroupState):

Field	Type
`value`	`string \| null`
`items`	`string[]`
`disabledItems`	`string[]`
`disabled`	`boolean`
`orientation`	`Orientation`
`dir`	`'ltr' \| 'rtl'`

Messages: setValue, setItems, selectNext, selectPrev, selectFirst, selectLast, setDir

Init options: value?: string | null, items?: string[], disabledItems?: string[], disabled?: boolean, orientation?: Orientation, dir?: 'ltr' | 'rtl'

Connect options: ConnectOptions

Parts: root, item

Rating Group

State (RatingGroupState):

Field	Type
`value`	`number`
`count`	`number`
`allowHalf`	`boolean`
`disabled`	`boolean`
`readonly`	`boolean`
`hoveredValue`	`number \| null`
`dir`	`'ltr' \| 'rtl'`

Messages: setValue, hover, clickItem, hoverItem, incrementValue, decrementValue, toEnd, setDir

Init options: value?: number, count?: number, allowHalf?: boolean, disabled?: boolean, readonly?: boolean, dir?: 'ltr' | 'rtl'

Connect options: ConnectOptions

Parts: root, item

Scroll Area

State (ScrollAreaState):

Field	Type
`overflowX`	`boolean`
`overflowY`	`boolean`
`scrolling`	`boolean`
`hovered`	`boolean`
`visibility`	`ScrollbarVisibility`

Messages: setScroll, setScrolling, setHovered

Init options: visibility?: ScrollbarVisibility

Parts: root, viewport, content, scrollbarX, scrollbarY, thumbX, thumbY, corner

Search Field

State (SearchFieldState):

Field	Type
`value`	`string`
`disabled`	`boolean`

Messages: setValue, clear, submit

Init options: value?: string, disabled?: boolean

Connect options: ConnectOptions

Parts: root, label, input, clearTrigger

Select

State (SelectState):

Field	Type
`open`	`boolean`
`value`	`string[]`
`items`	`string[]`
`groups`	`SelectGroup[]`
`disabledItems`	`string[]`
`selectionMode`	`SelectionMode`
`highlightedIndex`	`number \| null`
`disabled`	`boolean`
`required`	`boolean`
`typeahead`	`string`
`typeaheadExpiresAt`	`number`

Messages: open, close, toggle, selectOption, setValue, clear, highlight, highlightNext, highlightPrev, highlightFirst, highlightLast, selectHighlighted, setItems, typeahead

Init options: value?: string[], items?: string[], groups?: SelectGroup[], disabledItems?: string[], selectionMode?: SelectionMode, disabled?: boolean, required?: boolean

Connect options: ConnectOptions

Parts: trigger, positioner, content, hiddenSelect, hiddenOption, item, group, valueText

Utilities: overlay()

Signature Pad

State (SignaturePadState):

Field	Type
`strokes`	`Stroke[]`
`current`	`Stroke \| null`
`drawing`	`boolean`
`disabled`	`boolean`
`readonly`	`boolean`

Messages: strokeStart, strokePoint, strokeEnd, strokeCancel, undo, redo, clear, setStrokes

Init options: strokes?: Stroke[], disabled?: boolean, readonly?: boolean

Connect options: ConnectOptions

Parts: root, control, clearTrigger, undoTrigger, guide, hiddenInput

Slider

State (SliderState):

Field	Type
`value`	`number[]`
`min`	`number`
`max`	`number`
`step`	`number`
`disabled`	`boolean`
`orientation`	`Orientation`
`minStepsBetweenThumbs`	`number`
`dir`	`'ltr' \| 'rtl'`

Messages: setValue, setThumb, increment, decrement, toMin, toMax, setDisabled, setDir

Init options: value?: number[], min?: number, max?: number, step?: number, disabled?: boolean, orientation?: Orientation, minStepsBetweenThumbs?: number, dir?: 'ltr' | 'rtl'

Parts: thumb, root, control, track, range, thumb, value

Utilities: valueFromPoint(), closestThumbIndex()

Sortable

State (SortableState):

Field	Type
`id`	`string`
`startIndex`	`number`
`currentIndex`	`number`
`fromContainer`	`string`
`toContainer`	`string`
`startX`	`number`
`startY`	`number`
`currentX`	`number`
`currentY`	`number`
`dragging`	`DragState \| null`

Messages: start, move, drop, cancel, toggleGrab, moveBy

Connect options: ConnectOptions

Parts: root, item, handle

Utilities: reorder()

Splitter

State (SplitterState):

Field	Type
`position`	`number`
`min`	`number`
`max`	`number`
`step`	`number`
`orientation`	`Orientation`
`disabled`	`boolean`
`dragging`	`boolean`
`dir`	`'ltr' \| 'rtl'`

Messages: setPosition, increment, decrement, toMin, toMax, startDrag, endDrag, setDir

Init options: position?: number, min?: number, max?: number, step?: number, orientation?: Orientation, disabled?: boolean, dir?: 'ltr' | 'rtl'

Parts: root, primaryPanel, secondaryPanel, resizeTrigger

Utilities: positionFromPoint()

Steps

State (StepsState):

Field	Type
`current`	`number`
`completed`	`number[]`
`errors`	`number[]`
`steps`	`string[]`
`linear`	`boolean`
`disabled`	`boolean`

Messages: goTo, next, prev, complete, markError, clearError, reset

Init options: current?: number, completed?: number[], steps?: string[], linear?: boolean, disabled?: boolean

Connect options: ConnectOptions

Parts: root, nextTrigger, prevTrigger, item

Utilities: stepStatus()

Switch

State (SwitchState):

Field	Type
`checked`	`boolean`
`disabled`	`boolean`

Messages: toggle, setChecked, setDisabled

Init options: checked?: boolean, disabled?: boolean

Parts: root, track, thumb, hiddenInput

Table

State (TableState):

Field	Type
`columns`	`TableColumn[]`
`rows`	`string[]`
`sort`	`TableSort \| null`
`selection`	`string[]`
`selectionMode`	`TableSelectionMode`
`focusedCell`	`TableCellCoord \| null`
`rangeAnchor`	`number \| null`
`pageSize`	`number`
`descFirst`	`boolean`
`disabled`	`boolean`

Messages: toggleSort, setSort, toggleRow, selectAll, clearSelection, toggleAll, setSelection, selectRange, activateRow, setRows, setColumns, focusCell, moveCell, rowStart, rowEnd, gridStart, gridEnd, pageDown, pageUp

Init options: columns?: TableColumn[], rows?: string[], sort?: TableSort | null, selection?: string[], selectionMode?: TableSelectionMode, focusedCell?: TableCellCoord | null, pageSize?: number, descFirst?: boolean, disabled?: boolean

Connect options: ConnectOptions

Parts: root, columnHeader, row, cell, selectAllCheckbox, rowCheckbox

Utilities: isRowSelected(), isAllSelected(), isSomeSelected(), sortDirectionFor()

Tabs

State (TabsState):

Field	Type
`value`	`string`
`items`	`string[]`
`disabledItems`	`string[]`
`orientation`	`Orientation`
`activation`	`Activation`
`focused`	`string \| null`
`loopFocus`	`boolean`
`deselectable`	`boolean`
`dir`	`'ltr' \| 'rtl'`

Messages: setValue, setItems, focusTab, focusNext, focusPrev, focusFirst, focusLast, activateFocused, setDir

Init options: value?: string, items?: string[], disabledItems?: string[], orientation?: Orientation, activation?: Activation, loopFocus?: boolean, deselectable?: boolean, dir?: 'ltr' | 'rtl'

Connect options: ConnectOptions

Parts: root, list, indicator, item

Utilities: watchTabIndicator()

Tags Input

State (TagsInputState):

Field	Type
`value`	`string[]`
`inputValue`	`string`
`disabled`	`boolean`
`max`	`number`
`unique`	`boolean`
`focusedIndex`	`number \| null`

Messages: setInput, addTag, removeTag, removeLast, setValue, focusTag, focusTagNext, focusTagPrev, clearAll

Init options: value?: string[], inputValue?: string, disabled?: boolean, max?: number, unique?: boolean

Connect options: ConnectOptions

Parts: root, input, tag, clearTrigger

Theme Switch

State (ThemeSwitchState):

Field	Type
`theme`	`Theme`

Messages: setTheme, toggle

Connect options: ConnectOptions

Parts: root, option, toggle

Time Picker

State (TimePickerState):

Field	Type
`value`	`TimeValue`
`format`	`TimeFormat`
`minuteStep`	`number`
`secondStep`	`number`
`showSeconds`	`boolean`
`disabled`	`boolean`

Messages: setValue, setHours, setMinutes, setSeconds, incrementHours, decrementHours, incrementMinutes, decrementMinutes, toggleAmPm

Init options: value?: TimeValue, format?: TimeFormat, minuteStep?: number, secondStep?: number, showSeconds?: boolean, disabled?: boolean

Connect options: ConnectOptions

Parts: root, hoursInput, minutesInput, periodTrigger

Timer

State (TimerState):

Field	Type
`running`	`boolean`
`direction`	`Direction`
`targetMs`	`number`
`elapsedMs`	`number`
`startedAt`	`number \| null`

Messages: start, pause, reset, tick, setTarget

Init options: direction?: Direction, targetMs?: number, elapsedMs?: number

Connect options: ConnectOptions

Parts: root, display, startTrigger, pauseTrigger, resetTrigger

Utilities: display(), isComplete(), parts(), formatMs()

Toast

State (ToasterState):

Field	Type
`toasts`	`Toast[]`
`max`	`number`
`placement`	`ToastPlacement`
`animated`	`boolean`

Messages: create, dismiss, dismissAll, update, tick, pause, resume, pauseAll, resumeAll, animationEnd

Init options: max?: number, placement?: ToastPlacement, animated?: boolean

Connect options: ConnectOptions

Parts: region, toast, progress, isPresent

Utilities: nextToastId(), politeness(), progress(), isPresent()

Toggle Group

State (ToggleGroupState):

Field	Type
`value`	`string[]`
`type`	`'single' \| 'multiple'`
`items`	`string[]`
`disabledItems`	`string[]`
`disabled`	`boolean`
`orientation`	`Orientation`
`deselectable`	`boolean`
`focused`	`string \| null`
`loopFocus`	`boolean`
`dir`	`'ltr' \| 'rtl'`

Messages: toggle, setValue, setItems, focusNext, focusPrev, focusItem, setDir

Init options: value?: string[], type?: 'single' | 'multiple', items?: string[], disabledItems?: string[], disabled?: boolean, orientation?: Orientation, deselectable?: boolean, focused?: string | null, loopFocus?: boolean, dir?: 'ltr' | 'rtl'

Parts: root, item

Toggle

State (ToggleState):

Field	Type
`pressed`	`boolean`
`disabled`	`boolean`

Messages: toggle, setPressed, setDisabled

Init options: pressed?: boolean, disabled?: boolean

Parts: root

State (ToolbarState):

Field	Type
`items`	`string[]`
`disabledItems`	`string[]`
`focused`	`string \| null`
`orientation`	`Orientation`
`loopFocus`	`boolean`
`disabled`	`boolean`

Messages: setItems, setFocused, focusNext, focusPrev, focusFirst, focusLast

Init options: items?: string[], disabledItems?: string[], focused?: string | null, orientation?: Orientation, loopFocus?: boolean, disabled?: boolean

Connect options: ConnectOptions

Parts: root, separator, item, group

State (TooltipState):

Field	Type
`open`	`boolean`
`status`	`PresenceStatus`
`animated`	`boolean`

Messages: show, hide, toggle, setOpen, animationEnd

Init options: open?: boolean, animated?: boolean

Connect options: ConnectOptions

Parts: trigger, positioner, content, arrow

Utilities: overlay(), isMounted()

Tour

State (TourState):

Field	Type
`steps`	`TourStep[]`
`open`	`boolean`
`index`	`number`
`visited`	`string[]`

Messages: start, stop, next, prev, goto, setSteps

Init options: steps?: TourStep[], open?: boolean, index?: number

Connect options: ConnectOptions

Parts: root, backdrop, spotlight, title, description, progressText, prevTrigger, nextTrigger, closeTrigger

Utilities: currentStep(), isFirst(), isLast(), progress()

Tree View

State (TreeViewState):

Field	Type
`expanded`	`string[]`
`selected`	`string[]`
`checked`	`string[]`
`indeterminate`	`string[]`
`focused`	`string \| null`
`selectionMode`	`SelectionMode`
`visibleItems`	`string[]`
`visibleLabels`	`string[]`
`disabled`	`boolean`
`typeahead`	`string`
`typeaheadExpiresAt`	`number`
`renaming`	`string \| null`
`renameDraft`	`string`
`loading`	`string[]`
`nodes`	`Record<string, TreeNodeMeta>`
`roots`	`string[]`
`loaded`	`string[]`
`loadFailed`	`string[]`

Messages: toggleBranch, expand, collapse, expandAll, collapseAll, select, setSelected, focus, focusNext, focusPrev, focusFirst, focusLast, setVisibleItems, typeahead, arrowLeftFrom, arrowRightFrom, toggleChecked, setChecked, setIndeterminate, renameStart, renameChange, renameCommit, renameCancel, loadingStart, loadingEnd, setNodes, childrenLoaded, childrenLoadFailed

Init options: expanded?: string[], selected?: string[], checked?: string[], indeterminate?: string[], selectionMode?: SelectionMode, disabled?: boolean, visibleItems?: string[], visibleLabels?: string[], nodes?: Record<string, TreeNodeMeta>, roots?: string[], loaded?: string[], loadFailed?: string[]

Connect options: ConnectOptions

Parts: root, item

Field	Type
`items`	`TocEntry[]`
`activeId`	`string \| null`
`expanded`	`string[]`