components
js/ui/components.ts
fino:ui/components — host-neutral UI component primitives.
Structural primitives and semantic style tokens form the shared floor. Layout, typography, icon, form, disclosure, menu, navigation, overlay, feedback, display, data, and virtual-list families compose that floor without branching on the active render target; co-located HTML and terminal lowerings own target-specific presentation.
/** @jsxImportSource fino:ui *\/
import { Code, Panel, Text, styles } from 'fino:ui/components';
const view = (
<Panel title="Status" width={32}>
<Text style={[styles.bold, styles.accent]}>Status</Text>
<Code code="const ready = true;" language="ts" />
</Panel>
);Types
type Direction = 'row' | 'column'
Main-axis direction for flex containers.
type Align = 'start' | 'center' | 'end' | 'stretch'
Cross-axis alignment for flex containers and children.
type Justify = 'start' | 'center' | 'end' | 'between'
Main-axis distribution for flex containers.
type WrapMode = 'none' | 'char' | 'word'
Text wrapping policy.
type BorderStyle = 'single' | 'ascii' | 'round' | 'heavy' | 'double'
Glyph family used for terminal borders.
type ExpanderPosition = 'start' | 'end' | 'none'
Where a disclosure component places its expander.
type ComboBoxOption = SelectOption
One option in a {@link ComboBox} list.
type MenuItem =
| {
kind?: 'item';
key: string;
label: string;
detail?: string;
glyph?: string;
disabled?: boolean;
}
| { kind: 'header'; label: string }
| { kind: 'separator' }
Entries accepted by {@link MenuList} and {@link ListSelection}.
type ToneVariant = 'accent' | 'muted' | 'danger' | 'success' | 'warning'
Semantic tone names used by compact feedback surfaces.
type StatusDotStatus = 'ok' | 'busy' | 'error' | 'idle' | 'warning'
Re-exported from display.StatusDotStatus.
type Trend = 'up' | 'down' | 'flat'
Re-exported from display.Trend.
type StatusVariant = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
Re-exported from overlay.StatusVariant.
Interfaces
interface StyleProps {
Style props accepted by structural primitives.
Properties
color?: Color
Foreground color.
background?: Color
Background color.
bold?: boolean
Whether to render bold text.
dim?: boolean
Whether to render dim text.
italic?: boolean
Whether to render italic text.
underline?: boolean
Whether to underline text.
inverse?: boolean
Whether to swap foreground and background colors.
strike?: boolean
Whether to strike through text.
style?: Style | Style[]
Style values merged left-to-right beneath individual style props.
id?: string
Stable identity used for focus, hit testing, and layer anchoring.
interface FlexChildProps {
Flex-child props accepted by structural primitives.
Properties
grow?: number
Relative share of unused main-axis space.
shrink?: number
Relative share of main-axis overflow to remove.
basis?: number
Preferred main-axis size before growing or shrinking.
flex?: number
Shorthand for grow.
alignSelf?: Align
Per-child override for the container's cross-axis alignment.
margin?: number
Margin on every edge.
marginX?: number
Horizontal margin overriding margin.
marginY?: number
Vertical margin overriding margin.
interface SizeProps {
Width and height props shared by sized primitives.
Properties
width?: number
Width in terminal cells or target-relative units.
height?: number
Height in terminal rows or target-relative units.
interface ConstrainedSizeProps extends SizeProps {
Minimum and maximum bounds for resizable primitives.
Properties
minWidth?: number
Minimum width.
maxWidth?: number
Maximum width.
minHeight?: number
Minimum height.
maxHeight?: number
Maximum height.
interface FlexLayoutProps {
Flex-container props shared by structural and interactive containers.
Properties
direction?: Direction
Main-axis direction; defaults to column.
justify?: Justify
Distribution of children along the main axis.
align?: Align
Alignment of children along the cross axis.
gap?: number
Space between adjacent children.
interface BoxProps extends StyleProps, FlexChildProps, ConstrainedSizeProps, FlexLayoutProps, Props {
Props accepted by {@link Box}.
Properties
wrap?: boolean
Whether row children may continue on another line.
padding?: number
Padding on every edge.
paddingX?: number
Horizontal padding overriding padding.
paddingY?: number
Vertical padding overriding padding.
border?: boolean | BorderStyle
Whether and how to draw a border.
borderStyle?: BorderStyle
Border glyph family used when border is true.
borderColor?: Color
Border color.
overflow?: 'hidden' | 'visible'
Whether content outside the box is clipped.
children?: Child
Content laid out inside the box.
interface TextProps extends StyleProps, FlexChildProps, SizeProps, Props {
Props accepted by {@link Text}.
Properties
wrap?: boolean | WrapMode
Whether and where text may wrap.
align?: 'start' | 'center' | 'end'
Horizontal text alignment within the assigned width.
truncate?: boolean
Whether clipped text ends with an ellipsis.
caret?: number
Character offset whose rendered cell should be reported.
children?: Child
Text content.
interface SpacerProps extends FlexChildProps, SizeProps, Props {
Props accepted by {@link Spacer}.
interface TextSelection {
Character range of an active text selection.
Properties
start: number
Inclusive character offset where the selection begins.
end: number
Exclusive character offset where the selection ends.
interface InputProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Input}.
Properties
value?: string
Controlled text value.
placeholder?: string
Text shown when value is empty.
focused?: boolean
Whether the input displays focus state.
caret?: number
Character offset of the caret.
selection?: TextSelection | null
Active selection, or null when no range is selected.
interface LayerProps extends StyleProps, SizeProps, Props {
Props accepted by {@link Layer}.
Properties
anchor?: { x: number; y: number }
Absolute target coordinate used as the placement origin.
placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'center'
Placement relative to anchor, or the target when no anchor is set.
children?: Child
Content painted above ordinary flow.
interface UiKeyEvent {
Key event delivered to component handlers.
Properties
type: 'key'
Event discriminator.
key: string
Normalized key name.
text?: string
Printable text associated with the key.
ctrl?: boolean
Whether Control was held.
alt?: boolean
Whether Alt was held.
shift?: boolean
Whether Shift was held.
interface UiMouseEvent {
Mouse event delivered to component handlers.
Properties
type: 'mouse'
Event discriminator.
action: 'press' | 'release' | 'drag' | 'move' | 'wheel'
Pointer action.
button: 'left' | 'middle' | 'right' | 'none' | 'wheel-up' | 'wheel-down'
Normalized pointer button.
x: number
Target-relative column.
y: number
Target-relative row.
ctrl: boolean
Whether Control was held.
alt: boolean
Whether Alt was held.
shift: boolean
Whether Shift was held.
localX?: number
Column relative to the deepest hit node.
localY?: number
Row relative to the deepest hit node.
interface ClickableProps extends StyleProps, FlexChildProps, SizeProps, FlexLayoutProps, Props {
Props accepted by {@link Clickable}.
Properties
onClick?: () => void
Called after an eligible pointer or keyboard activation.
onKey?: (event: UiKeyEvent) => boolean | void
Called for keys routed to this node.
onMouse?: (event: UiMouseEvent) => boolean | void
Called for pointer events routed to this node.
onFocus?: () => void
Called when this node receives focus.
onBlur?: () => void
Called when this node loses focus.
focusable?: boolean
Whether this node participates in focus traversal.
captureKeys?: boolean
Whether this node receives keys without focus.
disabled?: boolean
Whether activation and focus are disabled.
children?: Child
Interactive content.
interface ScrollProps extends StyleProps, FlexChildProps, SizeProps, Props {
Props accepted by {@link Scroll}.
Properties
offset?: number
First child row visible in the viewport.
children?: Child
Content clipped to the viewport.
interface RuleProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Rule}.
Properties
char?: string
Fill character; defaults to ─.
inset?: number
Cells left undrawn at the right edge.
interface FieldProps extends FlexChildProps, Props {
Props accepted by {@link Field}.
Properties
label: string
Visible label for the field control.
hint?: string
Supplemental guidance shown beneath the control.
error?: string
Validation error shown beneath the control.
required?: boolean
Whether the label displays a required marker.
htmlFor?: string
HTML control id targeted by the label instead of wrapping the control.
id?: string
Stable wrapper id used to derive hint and error ids.
children?: Child
Field control and related content.
interface FieldsetProps extends BoxProps {
Props accepted by {@link Fieldset}.
Properties
legend: string
Caption describing the grouped fields.
interface PanelProps extends BoxProps {
Props accepted by {@link Panel}.
Properties
title?: string
Optional heading associated with the content region.
interface StackProps extends Omit<BoxProps, 'direction'> {
Props accepted by {@link Stack}, {@link HStack}, and {@link VStack}.
Properties
children?: Child
Ordered stack content.
interface BlockquoteProps extends FlexChildProps, Props {
Props accepted by {@link Blockquote}.
Properties
id?: string
Stable target id.
children?: Child
Quoted content.
interface BoldProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Bold}.
Properties
children?: Child
Emphasized content.
interface CaptionProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Caption}.
Properties
children?: Child
Supplemental explanation for the preceding content.
interface CodeProps extends FlexChildProps, Props {
Props accepted by {@link Code}.
Properties
code: string
Source text.
language?: string
Highlighting language; unknown languages render as plain text.
showLineNumbers?: boolean
Whether to render a line-number gutter.
filename?: string
Optional filename shown above the source.
copyable?: boolean
Whether to show a copy affordance.
onCopy?: (code: string) => void
Terminal copy callback receiving the unmodified source.
id?: string
Stable target id.
interface HeadingProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Heading}.
Properties
level?: 1 | 2 | 3 | 4 | 5 | 6
Heading level from 1 through 6; defaults to 1.
children?: Child
Heading content.
interface InlineCodeProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link InlineCode}.
Properties
children?: Child
Inline source content.
interface ItalicProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Italic}.
Properties
children?: Child
Emphasized content.
interface LeadProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Lead}.
Properties
children?: Child
Introductory copy that establishes the main idea of a region.
interface LinkProps extends FlexChildProps, Props {
Props accepted by {@link Link}.
Properties
href?: string
Safe HTTP, mail, telephone, or relative navigation target.
onActivate?: () => void
In-application activation handler, taking precedence over navigation.
id?: string
Stable target id.
children?: Child
Link content.
interface ListProps extends FlexChildProps, Props {
Props accepted by {@link List}.
Properties
ordered?: boolean
Whether markers are ordinal numbers instead of bullets.
items: Child[]
Item content rendered in source order.
id?: string
Stable target id.
interface IconButtonProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link IconButton}.
Properties
icon: string
Semantic icon name.
label: string
Accessible name for the icon-only control.
onClick?: () => void
Activation callback.
focused?: boolean
Whether to render the focused terminal state.
disabled?: boolean
Whether interaction is disabled.
icons?: Record<string, IconForms>
Per-name registry overrides.
interface IconForms {
Per-target representations of one semantic icon.
Properties
tui: string
Monochrome terminal glyph.
html: string
Browser representation.
interface IconProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Icon}.
Properties
name: string
Semantic icon name.
label?: string
Accessible label; omitted icons are decorative.
icons?: Record<string, IconForms>
Per-name registry overrides.
interface ButtonProps extends FormControlProps {
Props accepted by {@link Button}.
Properties
label: string
Visible action label.
onClick?: () => void
Called when the button is activated.
interface CheckboxProps extends FormControlProps {
Props accepted by {@link Checkbox}.
Properties
checked: boolean
Controlled checked state.
label?: string
Optional visible label.
onChange?: (checked: boolean) => void
Called with the next checked state.
interface FormControlProps extends StyleProps, FlexChildProps, Props {
Props shared by focusable form controls.
Properties
focused?: boolean
Whether the terminal target paints the focused presentation.
disabled?: boolean
Whether interaction is disabled.
interface NumberInputProps extends FormControlProps {
Props accepted by {@link NumberInput}.
Properties
value: number
Controlled numeric value.
min?: number
Inclusive minimum.
max?: number
Inclusive maximum.
step?: number
Increment per step; defaults to one.
onChange?: (value: number) => void
Called with a finite, clamped value.
interface RadioGroupProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link RadioGroup}.
Properties
value: string
Controlled selected option key.
options: RadioOption[]
Ordered option definitions.
onChange?: (key: string) => void
Called with the selected option key.
direction?: Direction
Terminal layout direction; defaults to column.
gap?: number
Space between options.
focusedKey?: string
Option key painted as focused by the terminal target.
disabled?: boolean
Whether interaction is disabled for the whole group.
interface RadioOption {
One option rendered by {@link RadioGroup}.
Properties
key: string
Stable submitted value.
label: string
Visible option label.
disabled?: boolean
Whether this option is disabled.
interface RadioProps extends FormControlProps {
Props accepted by {@link Radio}.
Properties
selected: boolean
Whether this option is selected.
label?: string
Optional visible label.
onSelect?: () => void
Called when the option is selected.
interface SliderProps extends FormControlProps {
Props accepted by {@link Slider}.
Properties
value: number
Controlled numeric value.
min?: number
Inclusive minimum; defaults to zero.
max?: number
Inclusive maximum; defaults to 100.
step?: number
Increment per step; defaults to one.
onChange?: (value: number) => void
Called with a finite, stepped, clamped value.
orientation?: 'horizontal' | 'vertical'
Track orientation; defaults to horizontal.
width?: number
Track length in cells or rows; defaults to 20 or eight.
interface SwitchProps extends FormControlProps {
Props accepted by {@link Switch}.
Properties
on: boolean
Controlled on/off state.
label?: string
Optional visible label.
onChange?: (on: boolean) => void
Called with the next on/off state.
interface TextAreaProps extends TextControlProps {
Props accepted by {@link TextArea}.
Properties
rows?: number
Visible text rows; defaults to four.
interface TextControlProps extends FormControlProps {
Props shared by editable text controls.
Properties
value: string
Controlled text value.
caret?: number
Character offset of the caret.
selection?: TextSelection | null
Active selection; the caret is the moving head.
onChange?: (value: string, caret?: number, selection?: TextSelection | null) => void
Called after editing with the complete next edit state.
onSubmit?: (value: string) => void
Called by the target's explicit submit gesture.
onKey?: (event: UiKeyEvent) => boolean | void
Raw key hook consulted before built-in terminal editing.
interface TextInputProps extends TextControlProps {
Props accepted by {@link TextInput}.
Properties
placeholder?: string
Text shown while value is empty.
password?: boolean
Mask presentation without changing the controlled value.
interface TextEditController {
Reusable controlled state returned by {@link createTextField} and {@link createTextArea}.
Readonly Properties
readonly value: Signal<string>
Current value.
readonly caret: Signal<number>
Current caret offset.
readonly selection: Signal<TextSelection | null>
Current selection.
Methods
set(value: string, caret?: number, selection?: TextSelection | null): void
Replace the complete edit state.
apply(event: UiKeyEvent): boolean
Apply one key through the controller's reducer.
interface AccordionProps extends FlexChildProps, Props {
Props accepted by {@link Accordion}.
Properties
sections: readonly AccordionSection[]
Ordered sections.
openKeys: readonly string[]
Controlled set of expanded section keys.
onToggle?: (key: string) => void
Called with the section key whose state should toggle.
expander?: ExpanderPosition
Expander placement forwarded to each section.
interface AccordionSection {
One section of an {@link Accordion}.
Properties
key: string
Stable section identity.
title: string
Visible section title.
content: Child
Section body.
interface AccordionState {
Accordion open-key state helper.
Readonly Properties
readonly openKeys: Signal<string[]>
Current expanded keys.
Methods
toggle(key: string): void
Toggle one section key.
interface DetailsProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Details}.
Properties
title: string
Always-visible summary label.
open: boolean
Controlled expanded state.
onToggle?: (open: boolean) => void
Called with the next expanded state.
expander?: ExpanderPosition
Expander placement; defaults to start.
focused?: boolean
Whether the summary is painted as focused.
children?: Child
Content revealed while open.
interface Disclosure {
Controlled disclosure-state helper.
Readonly Properties
readonly open: Signal<boolean>
Current open state.
Methods
toggle(): void
Invert the current state.
set(open: boolean): void
Replace the current state.
interface ExpanderProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Expander}.
Properties
open: boolean
Controlled expanded state.
onToggle?: (open: boolean) => void
Called with the next expanded state.
disabled?: boolean
Whether interaction is disabled.
interface TabItem {
One entry in a tab strip.
Properties
key: string
Stable tab identity.
label: string
Visible tab label.
disabled?: boolean
Whether the tab is inert.
interface TabListProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link TabList}.
Properties
items: readonly TabItem[]
Ordered tabs.
value: string
Controlled active tab key.
onChange?: (key: string) => void
Called with a newly activated tab key.
interface TabsProps extends TabListProps {
Props accepted by {@link Tabs}.
Properties
children?: Child
Content of the active tab panel.
interface ComboBoxProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link ComboBox}.
Properties
value: string
options: readonly ComboBoxOption[]
open: boolean
onOpenChange?: (open: boolean) => void
onInput?: (value: string, caret?: number, selection?: TextSelection | null) => void
onSelect?: (key: string) => void
activeKey?: string | null
onActiveChange?: (key: string | null) => void
placeholder?: string
caret?: number
selection?: TextSelection | null
focused?: boolean
disabled?: boolean
filter?: (options: readonly ComboBoxOption[], query: string) => ComboBoxOption[]
id: string
Stable trigger id used to anchor the result surface.
interface MenuHeaderProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link MenuHeader}.
Properties
label: string
interface MenuListProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link MenuList}.
Properties
items: readonly MenuItem[]
selectedKey?: string | null
top?: number
First visible row when windowing.
maxRows?: number
Maximum visible rows.
marker?: string
onSelect?: (key: string) => void
interface MenuRowProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link MenuRow}.
Properties
label: string
detail?: string
glyph?: string
marker?: string
selected?: boolean
disabled?: boolean
onClick?: () => void
interface SelectOption {
One option in {@link Select} or {@link ComboBox}.
Properties
key: string
label: string
disabled?: boolean
interface SelectProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Select}.
Properties
value: string | null
options: readonly SelectOption[]
open: boolean
onOpenChange?: (open: boolean) => void
onChange?: (key: string) => void
placeholder?: string
focused?: boolean
disabled?: boolean
id: string
Stable trigger id used to anchor the option surface.
interface BreadcrumbsProps extends StyleProps, FlexChildProps, Props {
Re-exported from navigation.BreadcrumbsProps.
interface PaginationProps extends StyleProps, FlexChildProps, Props {
Re-exported from navigation.PaginationProps.
interface StepsProps extends StyleProps, FlexChildProps, Props {
Re-exported from navigation.StepsProps.
interface BadgeProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Badge}.
Properties
label: string
variant?: ToneVariant
interface CalloutProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Callout}.
Properties
title?: string
Optional short heading for the callout.
variant?: ToneVariant
Semantic tone. Defaults to accent.
children?: Child
Explanatory content.
interface KeyHintEntry {
One keyboard shortcut displayed by {@link KeyHint}.
Properties
key: string
label: string
interface KeyHintProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link KeyHint}.
Properties
keys: readonly KeyHintEntry[]
separator?: string
interface NormalizedProgress {
A normalized progress value shared by every render target.
Properties
fraction: number
Clamped completion fraction.
percent: number
Rounded integer percentage.
interface ProgressBarProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link ProgressBar}.
Properties
value: number
Completion fraction; values outside 0..1 are clamped.
width?: number
Terminal cell width; defaults to 20.
showPercent?: boolean
interface SpinnerProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Spinner}.
Properties
tick?: number
Pin the animation to a deterministic frame when supplied.
frames?: readonly string[]
Optional non-empty terminal frame set.
interface TagGroupProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link TagGroup}.
Properties
gap?: number
children?: Child
interface TagProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Tag}.
Properties
label: string
onRemove?: () => void
color?: ToneVariant
interface CardProps extends StyleProps, FlexChildProps, Props {
Re-exported from display.CardProps.
interface EmptyStateProps extends StyleProps, FlexChildProps, Props {
Re-exported from display.EmptyStateProps.
interface StatProps extends StyleProps, FlexChildProps, Props {
Re-exported from display.StatProps.
interface StatusDotProps extends StyleProps, FlexChildProps, Props {
Re-exported from display.StatusDotProps.
interface VirtualListProps extends StyleProps, FlexChildProps, Props {
Re-exported from virtual.VirtualListProps.
interface VirtualWindow {
Re-exported from virtual.VirtualWindow.
interface FileTreeNode {
Re-exported from js/ui/components/data.FileTreeNode.
interface FileTreeProps extends StyleProps, FlexChildProps, Props {
Re-exported from js/ui/components/data.FileTreeProps.
interface TableColumn {
Re-exported from js/ui/components/data.TableColumn.
interface TableProps extends StyleProps, FlexChildProps, Props {
Re-exported from js/ui/components/data.TableProps.
interface TimelineEntry {
Re-exported from js/ui/components/data.TimelineEntry.
interface TimelineProps extends StyleProps, FlexChildProps, Props {
Re-exported from js/ui/components/data.TimelineProps.
interface TreeState {
Re-exported from js/ui/components/data.TreeState.
interface VisibleTreeRow {
Re-exported from js/ui/components/data.VisibleTreeRow.
interface ContextMenuProps extends StyleProps, Props {
Re-exported from overlay.ContextMenuProps.
interface FloatingActionBarProps extends StyleProps, FlexChildProps, Props {
Re-exported from overlay.FloatingActionBarProps.
interface HoverCardProps extends StyleProps, FlexChildProps, Props {
Re-exported from overlay.HoverCardProps.
interface ModalProps extends StyleProps, Props {
Re-exported from overlay.ModalProps.
interface PopoverProps extends StyleProps, FlexChildProps, Props {
Re-exported from overlay.PopoverProps.
interface ToastEntry {
Re-exported from overlay.ToastEntry.
interface ToastProps extends StyleProps, FlexChildProps, Props {
Re-exported from overlay.ToastProps.
interface ToastStackProps extends StyleProps, Props {
Re-exported from overlay.ToastStackProps.
interface TooltipProps extends StyleProps, Props {
Re-exported from overlay.TooltipProps.
interface BarChartProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link BarChart}.
Properties
series: readonly Series[]
labels?: readonly string[]
height?: number
horizontal?: boolean
showValues?: boolean
interface LineChartProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link LineChart}.
Properties
series: readonly Series[]
height?: number
showAxis?: boolean
showLegend?: boolean
interface Series {
One evenly spaced chart series.
Properties
key: string
label?: string
color?: Color
points: readonly number[]
interface CalendarProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Calendar}.
Properties
month: string
selected?: string
today?: string
weekStartsOn?: 0 | 1
onSelect?: (date: string) => void
onMonthChange?: (month: string) => void
interface ClockParts {
Numeric parts parsed from a clock-time string.
Properties
hours: number
minutes: number
seconds: number
interface ColorPickerProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link ColorPicker}.
Properties
value: string
onChange: (value: string) => void
swatches?: readonly string[]
open?: boolean
onOpenChange?: (open: boolean) => void
id?: string
interface DatePickerProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link DatePicker}.
Properties
value?: string
open: boolean
onOpenChange: (open: boolean) => void
onChange: (date: string) => void
month?: string
onMonthChange?: (month: string) => void
today?: string
weekStartsOn?: 0 | 1
focused?: boolean
disabled?: boolean
placeholder?: string
id: string
interface DigitalClockProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link DigitalClock}.
Properties
time: string
seconds?: boolean
label?: string
interface MonthDayCell {
One day cell in a complete calendar week.
Properties
date: string
day: number
currentMonth: boolean
interface TimePickerProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link TimePicker}.
Properties
value?: string
open: boolean
onOpenChange: (open: boolean) => void
onChange: (time: string) => void
step?: number
seconds?: boolean
focused?: boolean
disabled?: boolean
placeholder?: string
id: string
Functions
function Box(props: BoxProps): VNode
Flex layout container.
function Text(props: TextProps): VNode
Styled text with wrapping and caret reporting.
function Spacer(props: SpacerProps): VNode
Flexible or fixed empty space.
function Input(props: InputProps): VNode
Single-line input primitive.
function Layer(props: LayerProps): VNode
Out-of-flow content layer.
function Clickable(props: ClickableProps): VNode
Focusable, non-visual interaction container.
function Scroll(props: ScrollProps): VNode
Clipped viewport over child content.
function Rule(props: RuleProps = {}): VNode
Horizontal rule filling its assigned width.
function Field(props: FieldProps): VNode
Label, control, hint, and error composition shared across targets.
function Fieldset(props: FieldsetProps): VNode
Related field group with a visible legend.
function HStack(props: StackProps): VNode
Horizontal stack composed from the shared {@link Box} primitive.
function Panel(props: PanelProps): VNode
Titled content region rendered as a card or terminal panel.
function Stack(props: StackProps): VNode
Alias for the default vertical stack.
function VStack(props: StackProps): VNode
Vertical stack composed from the shared {@link Box} primitive.
function Blockquote(props: BlockquoteProps): VNode
Quoted content with a target-appropriate gutter.
function Bold(props: BoldProps): VNode
Strong inline emphasis.
function Caption(props: CaptionProps): VNode
Muted supplemental copy associated with nearby content.
function Code(props: CodeProps): VNode
Syntax-highlighted code block using the shared TypeScript token service.
function Heading(props: HeadingProps): VNode
Section heading with target-appropriate hierarchy and emphasis.
function InlineCode(props: InlineCodeProps): VNode
Inline monospace code.
function Italic(props: ItalicProps): VNode
Italic inline emphasis.
function Lead(props: LeadProps): VNode
Prominent introductory prose below a title or section heading.
function Link(props: LinkProps): VNode
Navigation or in-application activation link.
function List(props: ListProps): VNode
Bulleted or numbered prose list.
function Icon(props: IconProps): VNode
Registry-backed semantic icon.
function IconButton(props: IconButtonProps): VNode
Accessible icon-only action button.
function Button(props: ButtonProps): VNode
Push button.
function Checkbox(props: CheckboxProps): VNode
Boolean checkbox.
function NumberInput(props: NumberInputProps): VNode
Numeric stepper.
function Radio(props: RadioProps): VNode
Single radio option.
function RadioGroup(props: RadioGroupProps): VNode
Controlled radio set rendered from an option list.
function Slider(props: SliderProps): VNode
Range slider.
function Switch(props: SwitchProps): VNode
Boolean switch with a distinct presentation from a checkbox.
function TextArea(props: TextAreaProps): VNode
Multi-line editable text field.
function TextInput(props: TextInputProps): VNode
Single-line editable text field.
function createTextArea(initial = ''): TextEditController
Create persistent state for a multi-line {@link TextArea}.
function createTextField(initial = ''): TextEditController
Create persistent state for a single-line {@link TextInput}.
function Accordion(props: AccordionProps): VNode
Stack of reusable {@link Details} sections.
function Details(props: DetailsProps): VNode
Collapsible summary and content section.
function Expander(props: ExpanderProps): VNode
Standalone open/closed disclosure affordance.
function TabList(props: TabListProps): VNode
Tab strip without a panel.
function Tabs(props: TabsProps): VNode
Tab strip with caller-owned active panel content.
function createAccordion(single = false): AccordionState
Create accordion state; single closes peers when opening a section.
function createDisclosure(defaultOpen = false): Disclosure
Create toggleable state that survives component re-renders.
function ComboBox(props: ComboBoxProps): VNode
Editable text field with a filtered, anchored option list.
function MenuHeader(props: MenuHeaderProps): VNode
Section heading inside a menu.
function MenuList(props: MenuListProps): VNode
Menu rendered from data with optional windowing.
function MenuRow(props: MenuRowProps): VNode
One selectable menu row.
function MenuSeparator(props: StyleProps & FlexChildProps & Props = {}): VNode
Divider inside a menu.
function Select(props: SelectProps): VNode
Controlled select trigger with an anchored option list.
function defaultComboBoxFilter(
options: readonly ComboBoxOption[],
query: string,
): ComboBoxOption[]
Default case-insensitive substring filter for combobox options.
function Breadcrumbs(props: BreadcrumbsProps): VNode
Re-exported from navigation.Breadcrumbs.
function Pagination(props: PaginationProps): VNode
Re-exported from navigation.Pagination.
function Steps(props: StepsProps): VNode
Re-exported from navigation.Steps.
function paginationRange(
page: number,
pages: number,
siblings = 1,
): Array<number | 'ellipsis'>
Re-exported from navigation.paginationRange.
function ContextMenu(props: ContextMenuProps): VNode
Re-exported from overlay.ContextMenu.
function FloatingActionBar(props: FloatingActionBarProps): VNode
Re-exported from overlay.FloatingActionBar.
function HoverCard(props: HoverCardProps): VNode
Re-exported from overlay.HoverCard.
function Modal(props: ModalProps): VNode
Re-exported from overlay.Modal.
function Popover(props: PopoverProps): VNode
Re-exported from overlay.Popover.
function Toast(props: ToastProps): VNode
Re-exported from overlay.Toast.
function ToastStack(props: ToastStackProps): VNode
Re-exported from overlay.ToastStack.
function Tooltip(props: TooltipProps): VNode
Re-exported from overlay.Tooltip.
function Badge(props: BadgeProps): VNode
Small inline status label in a semantic tone.
function Callout(props: CalloutProps): VNode
Explanatory aside with a semantic tone and optional title.
function KeyHint(props: KeyHintProps): VNode
Compact keyboard shortcut legend.
function ProgressBar(props: ProgressBarProps): VNode
Horizontal completion bar with an optional percentage label.
function Spinner(props: SpinnerProps = {}): VNode
Indeterminate activity indicator.
function Tag(props: TagProps): VNode
Tone-colored chip with an optional remove action.
function TagGroup(props: TagGroupProps): VNode
Wrapping row of tags composed from the shared layout primitive.
function normalizeProgress(value: number): NormalizedProgress
Clamp a possibly non-finite progress value to a deterministic 0..1 range.
function Card(props: CardProps): VNode
Re-exported from display.Card.
function EmptyState(props: EmptyStateProps): VNode
Re-exported from display.EmptyState.
function Stat(props: StatProps): VNode
Re-exported from display.Stat.
function StatusDot(props: StatusDotProps): VNode
Re-exported from display.StatusDot.
function FileTree(props: FileTreeProps): VNode
Re-exported from js/ui/components/data.FileTree.
function Table(props: TableProps): VNode
Re-exported from js/ui/components/data.Table.
function Timeline(props: TimelineProps): VNode
Re-exported from js/ui/components/data.Timeline.
function createTreeState(
defaultExpanded: readonly string[] = [],
defaultSelected: string | null = null,
): TreeState
Re-exported from js/ui/components/data.createTreeState.
function fileIcon(
node: Pick<FileTreeNode, 'label' | 'icon' | 'children'>,
icons?: Readonly<Record<string, string>>,
open = false,
folderIcons?: { open: string; closed: string },
): string
Re-exported from js/ui/components/data.fileIcon.
function visibleTreeRows(
nodes: readonly FileTreeNode[],
expanded: readonly string[],
): VisibleTreeRow[]
Re-exported from js/ui/components/data.visibleTreeRows.
function VirtualList(props: VirtualListProps): VNode
Re-exported from virtual.VirtualList.
function Calendar(props: CalendarProps): VNode
Controlled month grid with explicit selection and navigation callbacks.
function ColorPicker(props: ColorPickerProps): VNode
Native browser color input and terminal swatch-grid contract.
function DatePicker(props: DatePickerProps): VNode
Native browser date input and terminal calendar popover contract.
function DigitalClock(props: DigitalClockProps): VNode
Prominent readout of caller-owned clock time.
function TimePicker(props: TimePickerProps): VNode
Native browser time input and terminal column popover contract.
function formatClockTime(value: string, seconds = false): string
Normalize an input time to the selected precision.
function formatTimeParts(hours: number, minutes: number, seconds?: number): string
Format numeric parts as HH:MM or HH:MM:SS.
function isClockTime(value: string, seconds?: boolean): boolean
Whether a string is a valid 24-hour HH:MM or HH:MM:SS time.
function isIsoDate(value: string): boolean
Whether a string is a real Gregorian YYYY-MM-DD date.
function monthGrid(year: number, month: number, weekStartsOn: 0 | 1 = 0): MonthDayCell[][]
Build complete weeks for a month, including adjacent-month padding cells.
function monthLabel(year: number, month: number): string
Human-readable label for a numeric year and 1-based month.
function normalizeHexColor(value: string): string | null
Return a canonical lowercase color or null for malformed input.
function parseClockTime(value: string | undefined): ClockParts
Parse and clamp HH:MM or HH:MM:SS; malformed fields become zero.
function parseHexColor(value: string): [number, number, number] | null
Parse a six-digit hex color with an optional leading hash.
function parseIsoMonth(value: string): { year: number; month: number }
Parse YYYY-MM, falling back to January 1970 for malformed input.
function shiftMonth(value: string, delta: number): string
Shift a valid or fallback ISO month across year boundaries.
function timeColumnWindow(current: number, max: number, size = 5): number[]
Build a centered modular window used by terminal time columns.
function weekdayLabels(weekStartsOn: 0 | 1 = 0): string[]
Two-letter weekday labels beginning Sunday or Monday.
function BarChart(props: BarChartProps): VNode
Controlled grouped bar chart rendered appropriately for each target.
function LineChart(props: LineChartProps): VNode
Controlled evenly spaced line chart rendered appropriately for each target.
Classes
class ListSelection {
Stateful menu-list selection with disabled/header skipping and a viewport that follows the selected row.
Constructors
constructor(options: { maxRows?: number } = {})
Methods
setMaxRows(rows: number): void
Replace the visible row budget and re-snap the selection window.
setItems(items: readonly MenuItem[], options: { keepKey?: boolean } = {}): void
Replace menu items, retaining a still-selectable key by default.
selectKey(key: string): boolean
Select an enabled item by key.
move(delta: number): boolean
Move through enabled items without wrapping.
movePage(direction: 1 | -1): boolean
Move by one visible page.
handleKey(event: UiKeyEvent): boolean
Route standard vertical list-navigation keys.
Getters
get items(): readonly MenuItem[]
Current immutable item view.
get selectedKey(): string | null
Current selected key, or null when nothing is selectable.
get selected(): MenuItem | undefined
Current selected item.
get top(): number
First visible item index.
get maxRows(): number
Maximum visible rows.
class VirtualScroll {
Re-exported from virtual.VirtualScroll.
Constants
const SPINNER_FRAMES
Default terminal animation frames used by {@link Spinner}.
const FILE_ICONS: Readonly<Record<string, string>>
Re-exported from js/ui/components/data.FILE_ICONS.