roots/ui API

<Accordion />

<Avatar />

<Badge />

<Button />

<Card />

<Center />

<Checkbox />

<Dialog />

<Divider />

<Drawer />

<Field />

<Form />

<Grid />

<Icon />

<IconButton />

<Input />

<Label />

<List />

<Menu />

<NumberInput />

<Pagination />

<Popover />

<ProgressBar />

<Radio />

<RadioGroup />

<ScrollArea />

<Select />

<Skeleton />

<Slider />

<Spinner />

<Splitter />

<Stack />

<Switch />

<Table />

<Tabs />

<Tag />

<Textarea />

<Toaster />

<Tooltip />

<Tree />

function controllable<T>(
  getValue: () => T | undefined,
  initial: T,
  onChange: ((a: T) => void) | null | undefined,
): Ref<T>

function createToaster(options?: { max?: number; duration?: number; errorDuration?: number; set?: (a: () => void, b: number) => unknown; clear?: (a: unknown) => void; now?: () => number }): Toaster

function createUI(config?: UiConfig): { install(app: any): void }

function handleKey(
  table: KeyTable,
  e: any,
  actions: KeyActions,
  conditions?: Conditions,
): boolean

function iconNames(): string[]

function initials(name: string | undefined): string

function matchKey(table: KeyTable, e: any, conditions?: Conditions): KeyBinding | null

function provideUI(config: UiConfig): void

function registerIcon(name: string, def: IconDef): void

function useToast(toaster?: ToastStore | undefined): ToastApi

const ACCORDION_KEYS: KeyTable

const BUTTON_KEYS: KeyTable

const CHECKBOX_KEYS: KeyTable

const DIALOG_KEYS: KeyTable

const LISTBOX_KEYS: KeyTable

const MENU_BUTTON_KEYS: KeyTable

const MENU_KEYS: KeyTable

const NUMBER_INPUT_KEYS: KeyTable

const PAGINATION_KEYS: KeyTable

const RADIO_GROUP_KEYS: KeyTable

const rules

const SCROLL_KEYS: KeyTable

const SELECT_KEYS: KeyTable

const SLIDER_KEYS: KeyTable

const SPLITTER_KEYS: KeyTable

const SWITCH_KEYS: KeyTable

const TABLE_KEYS: KeyTable

const TABS_KEYS: KeyTable

const TOAST_KEYS: KeyTable

const TOOLTIP_KEYS: KeyTable

const TREE_KEYS: KeyTable

interface AccordionProps extends CommonProps {
  modelValue?: unknown[];
  items?: readonly unknown[];
  multiple?: boolean;
  collapsible?: boolean;
  headingLevel?: number;
}

interface AvatarProps extends CommonProps {
  src?: string;
  name?: string;
  size?: "sm" | "md" | "lg";
  shape?: "circle" | "square";
}

interface BadgeProps extends CommonProps {
  value?: string | number;
  variant?: Tone;
  max?: number;
  dot?: boolean;
}

interface ButtonProps extends CommonProps {
  variant?: "primary" | "secondary" | "ghost" | "danger";
  size?: "sm" | "md" | "lg";
  type?: "button" | "submit" | "reset";
  label?: string;
  icon?: string;
  iconRight?: string;
  disabled?: boolean;
  loading?: boolean;
  block?: boolean;
}

interface CardProps extends CommonProps {
  title?: string;
  subtitle?: string;
  variant?: "outlined" | "elevated" | "filled";
  headingLevel?: number;
}

interface CenterProps extends CommonProps {
  inline?: boolean;
}

interface CheckboxProps extends CommonProps {
  modelValue?: boolean | unknown[];
  value?: unknown;
  label?: string;
  disabled?: boolean;
  indeterminate?: boolean;
  invalid?: boolean;
  name?: string;
}

interface Column {
  key: string;
  label?: string;
  sortable?: boolean;
  width?: number;
  align?: "left" | "center" | "right";
  compare?(a: unknown, b: unknown, rowA: Row, rowB: Row): number;
}

interface CommonProps {
  pt?: { [part: string]: unknown };
  unstyled?: boolean;
}

interface DialogProps extends CommonProps {
  open?: boolean;
  title?: string;
  description?: string;
  modal?: boolean;
  dismissable?: boolean;
  size?: "sm" | "md" | "lg" | "full";
  role?: "dialog" | "alertdialog";
  side?: "left" | "right" | "top" | "bottom";
  closeLabel?: string;
}

interface DividerProps extends CommonProps {
  orientation?: "horizontal" | "vertical";
  label?: string;
}

interface FieldProps extends CommonProps {
  label?: string;
  hint?: string;
  error?: string;
  rules?: readonly Rule[];
  value?: unknown;
  required?: boolean;
  id?: string;
}

interface FormProps extends CommonProps {
  label?: string;
}

interface GridProps extends CommonProps {
  columns?: number;
  gap?: number;
  minItemWidth?: number;
  items?: readonly unknown[];
}

interface IconButtonProps extends CommonProps {
  icon: string;
  label: string;
  variant?: "primary" | "secondary" | "ghost" | "danger";
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
}

interface IconProps extends CommonProps {
  name: string;
  label?: string;
  size?: "sm" | "md" | "lg";
}

interface InputProps extends CommonProps {
  modelValue?: string | number;
  type?: "text" | "password" | "email" | "number" | "search" | "tel" | "url";
  placeholder?: string;
  disabled?: boolean;
  readonly?: boolean;
  invalid?: boolean;
  size?: "sm" | "md" | "lg";
  autofocus?: boolean;
  maxlength?: number;
  name?: string;
  label?: string;
}

interface Item {
  value: unknown;
  label?: string;
  disabled?: boolean;
}

interface KeyBinding {
  readonly key: string;
  readonly action: string;
  readonly when?: string;
  readonly shift?: boolean;
  readonly ctrl?: boolean;
  readonly alt?: boolean;
  readonly meta?: boolean;
  readonly note?: string;
}

type KeyTable = readonly KeyBinding[];

interface LabelProps extends CommonProps {
  for?: string;
  required?: boolean;
}

interface ListProps extends CommonProps {
  items?: readonly unknown[];
  modelValue?: unknown;
  selectable?: "none" | "single" | "multiple";
  label?: string;
}

interface MenuItem {
  value?: unknown;
  label?: string;
  icon?: string;
  disabled?: boolean;
  danger?: boolean;
  separator?: boolean;
  type?: "radio" | "checkbox";
  checked?: boolean;
}

interface MenuProps extends CommonProps {
  items?: readonly (MenuItem | string)[];
  label?: string;
  icon?: string;
  variant?: "primary" | "secondary" | "ghost" | "danger";
  align?: "start" | "end";
}

interface NumberInputProps extends CommonProps {
  modelValue?: number | null;
  min?: number;
  max?: number;
  step?: number;
  bigStep?: number;
  clearable?: boolean;
  placeholder?: string;
  disabled?: boolean;
  readonly?: boolean;
  invalid?: boolean;
  size?: "sm" | "md" | "lg";
  name?: string;
  label?: string;
  decrementLabel?: string;
  incrementLabel?: string;
}

interface PageEntry {
  type: "page" | "gap";
  page: number;
  key: string;
}

interface PaginationProps extends CommonProps {
  modelValue?: number;
  pageCount?: number;
  total?: number;
  pageSize?: number;
  siblings?: number;
  boundaries?: number;
  disabled?: boolean;
  label?: string;
  previousLabel?: string;
  nextLabel?: string;
  pageLabel?: (a: number) => string;
  statusLabel?: (a: number, b: number) => string;
}

interface PopoverProps extends CommonProps {
  open?: boolean;
  label?: string;
  title?: string;
  side?: "top" | "bottom" | "left" | "right";
  align?: "start" | "end";
  variant?: "primary" | "secondary" | "ghost" | "danger";
}

interface ProgressBarProps extends CommonProps {
  value?: number;
  max?: number;
  indeterminate?: boolean;
  label?: string;
  showValue?: boolean;
  variant?: "primary" | "success" | "warning" | "error";
}

interface RadioGroupProps extends CommonProps {
  modelValue?: unknown;
  options?: readonly unknown[];
  label?: string;
  disabled?: boolean;
  orientation?: "horizontal" | "vertical";
  name?: string;
}

interface RadioProps extends CommonProps {
  value?: unknown;
  label?: string;
  disabled?: boolean;
  modelValue?: unknown;
}

type Row = { [key: string]: unknown };

type Rule = (a: unknown) => boolean | string;

interface ScrollAreaProps extends CommonProps {
  height?: number;
  fill?: boolean;
  label?: string;
}

interface SelectProps extends CommonProps {
  modelValue?: unknown;
  options?: readonly unknown[];
  placeholder?: string;
  disabled?: boolean;
  invalid?: boolean;
  label?: string;
  size?: "sm" | "md" | "lg";
}

interface SkeletonProps extends CommonProps {
  shape?: "text" | "rect" | "circle";
  lines?: number;
  width?: number | string;
  height?: number;
}

interface SliderProps extends CommonProps {
  modelValue?: number;
  min?: number;
  max?: number;
  step?: number;
  bigStep?: number;
  disabled?: boolean;
  label?: string;
  showValue?: boolean;
  unit?: string;
}

interface SortState {
  key: string;
  direction: SortDirection;
}

interface SpinnerProps extends CommonProps {
  size?: "sm" | "md" | "lg";
  label?: string;
}

interface SplitterProps extends CommonProps {
  modelValue?: number;
  direction?: "horizontal" | "vertical";
  min?: number;
  max?: number;
  step?: number;
  label?: string;
}

interface StackProps extends CommonProps {
  direction?: "column" | "row";
  gap?: number;
  align?: "start" | "center" | "end" | "stretch";
  justify?: "start" | "center" | "end" | "between" | "around";
  wrap?: boolean;
  as?: string;
}

interface SwitchProps extends CommonProps {
  modelValue?: boolean;
  label?: string;
  disabled?: boolean;
}

interface TableProps extends CommonProps {
  columns?: readonly Column[];
  rows?: readonly Row[];
  rowKey?: string;
  sort?: SortState | null;
  page?: number;
  pageSize?: number;
  selection?: unknown[];
  selectionMode?: "none" | "single" | "multiple";
  label?: string;
  emptyText?: string;
}

interface TabsProps extends CommonProps {
  modelValue?: unknown;
  items?: readonly unknown[];
  orientation?: "horizontal" | "vertical";
  activation?: "automatic" | "manual";
  label?: string;
}

interface TagProps extends CommonProps {
  label?: string;
  variant?: Tone;
  icon?: string;
  removable?: boolean;
}

interface TextareaProps extends CommonProps {
  modelValue?: string;
  placeholder?: string;
  rows?: number;
  disabled?: boolean;
  readonly?: boolean;
  invalid?: boolean;
  maxlength?: number;
  label?: string;
}

interface Toast {
  readonly id: number;
  readonly key: string | number | undefined;
  title: string;
  description: string;
  variant: ToastVariant;
  duration: number;
  actionLabel: string;
  onAction?(): void;
}

interface ToastApi {
  readonly toasts: Ref<Toast[]>;
  show(options: ToastOptions | string): number;
  info(title: string, description?: string): number;
  success(title: string, description?: string): number;
  warning(title: string, description?: string): number;
  error(title: string, description?: string): number;
  dismiss(id: number): void;
  dismissNewest(): boolean;
  clear(): void;
}

interface ToasterProps extends CommonProps {
  toaster?: any;
  position?: "top-start" | "top-end" | "bottom-start" | "bottom-end";
  max?: number;
  label?: string;
}

interface ToastOptions {
  title?: string;
  description?: string;
  variant?: ToastVariant;
  duration?: number;
  key?: string | number;
  actionLabel?: string;
  onAction?(): void;
}

type Tone = "neutral" | "primary" | "success" | "warning" | "error" | "info";

interface TooltipProps extends CommonProps {
  text?: string;
  side?: "top" | "bottom" | "left" | "right";
  delay?: number;
  disabled?: boolean;
}

interface TreeNode {
  id: unknown;
  label: string;
  children?: readonly TreeNode[];
  disabled?: boolean;
}

interface TreeProps extends CommonProps {
  nodes?: readonly TreeNode[];
  modelValue?: unknown;
  expanded?: unknown[];
  multiple?: boolean;
  label?: string;
}

interface UiConfig {
  unstyled?: boolean;
  pt?: { [component: string]: unknown };
}