# BeatUI — Full Documentation

> BeatUI is a comprehensive TypeScript UI component library built on the Tempo ecosystem (@tempots/dom) with fine-grained reactivity, theme support (light/dark), i18n, RTL/LTR support, and full accessibility. Components are plain TypeScript functions — no JSX, no virtual DOM, no framework-specific wrappers.

## Core Concepts

### Reactive Primitives

BeatUI is built on `@tempots/dom` which provides fine-grained reactivity:

- `Value<T>` — A reactive value that can be static or a signal
- `prop<T>(initial)` — Creates a mutable reactive signal
- `computedOf(a, b)(fn)` — Derives a computed value from multiple signals
- `html.*` — Element factories (`html.div`, `html.button`, etc.)
- `attr.*`, `style.*`, `on.*` — Attribute, style, and event bindings
- `When(condition, trueNode, falseNode)` — Conditional rendering
- `MapSignal(signal, fn)` — Reactive child rendering
- `Fragment(...nodes)` — Groups multiple nodes
- `Empty` — Renders nothing

### Component Pattern

```typescript
import { Button, Stack, TextInput } from '@tempots/beatui'
import { html, attr, prop } from '@tempots/dom'

// Components accept options + children
Button({ variant: 'filled', color: 'primary', size: 'md' }, 'Click me')

// Props can be reactive signals
const name = prop('')
TextInput({ value: name, onInput: v => name.set(v), placeholder: 'Name' })

// Compose freely — components are just functions returning TNode
Stack(
  attr.class('gap-4 p-6'),
  TextInput({ value: name, onInput: v => name.set(v) }),
  Button({ variant: 'filled' }, 'Submit')
)
```

### App Setup

```typescript
import { render } from '@tempots/dom'
import { BeatUI } from '@tempots/beatui'

// BeatUI() provides theme, locale, i18n, and notification providers
render(BeatUI({}, YourApp()), document.getElementById('app')!)
```

### CSS Setup (Tailwind v4)

```typescript
// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
import { beatuiTailwindPlugin } from '@tempots/beatui/tailwind/vite-plugin'

export default defineConfig({
  plugins: [
    tailwindcss(),
    beatuiTailwindPlugin({
      semanticColors: { primary: 'sky', secondary: 'cyan' },
    }),
  ],
})
```

```css
/* main.css */
@import 'tailwindcss';
@custom-variant dark (&:is(.dark *));
```

### Theme Access

```typescript
import { Use } from '@tempots/dom'
import { Theme } from '@tempots/beatui'

Use(Theme, ({ appearance }) =>
  html.div(appearance.map(a => `Current theme: ${a}`))
)
```

### Form System

```typescript
import { useForm, Control, TextInput } from '@tempots/beatui'
import { z } from 'zod'

const { controller } = useForm({
  schema: z.object({
    name: z.string().min(1),
    email: z.string().email(),
  }),
  validationMode: 'eager',
  initialValue: { name: '', email: '' },
})

const ctrl = controller.object()
Control(TextInput, { controller: ctrl.field('name'), label: 'Name' })
Control(TextInput, { controller: ctrl.field('email'), label: 'Email' })
```

## Entry Points

| Import | Description |
|--------|-------------|
| `@tempots/beatui` | Core components: buttons, forms, layout, overlays, data display, navigation |
| `@tempots/beatui/auth` | Authentication UI: sign-in, sign-up, social login, two-factor, passkeys |
| `@tempots/beatui/codehighlight` | Syntax highlighting powered by Shiki (separate bundle) |
| `@tempots/beatui/json-schema` | Auto-generated forms from JSON Schema with AJV validation |
| `@tempots/beatui/json-structure` | Auto-generated forms from a custom JSON structure schema |
| `@tempots/beatui/lexical` | Lexical rich text editor (BareEditor, DockedEditor, ContextualEditor) |
| `@tempots/beatui/monaco` | Monaco code editor integration |
| `@tempots/beatui/prosemirror` | ProseMirror rich text editor |
| `@tempots/beatui/markdown` | Markdown rendering with GFM support |
| `@tempots/beatui/tailwind` | Tailwind CSS v4 preset and Vite plugin |

## Guides

### Authentication

Pre-built authentication UI with sign-in, sign-up, password reset, social login, and modal support.

```typescript
import { AuthContainer, SignInData, SignUpData, ResetPasswordData } from '@tempots/beatui/auth'

AuthContainer({
  mode: 'signin',  // 'signin' | 'signup' | 'reset-password'
  socialProviders: [{ provider: 'google' }, { provider: 'github' }],
  onSignIn: async (data: SignInData) => {
    const result = await api.signIn(data.email, data.password)
    return result.error ?? null  // Return null for success, string for error
  },
  onSignUp: async (data: SignUpData) => {
    await api.signUp(data.email, data.password, data.name)
    return null
  },
  onResetPassword: async (data: ResetPasswordData) => {
    await api.resetPassword(data.email)
    return null
  },
  onModeChange: mode => console.log('Mode changed to:', mode),
  showRememberMe: true,
  showPasswordStrength: true,
})
```

```typescript
import { AuthModal } from '@tempots/beatui/auth'
import { Button } from '@tempots/beatui'

AuthModal(open =>
  Button({
    variant: 'filled',
    onClick: () => open({
      mode: 'signin',
      onSignIn: handleSignIn,
      onSignUp: handleSignUp,
      onResetPassword: handleResetPassword,
      socialProviders: [{ provider: 'google' }, { provider: 'github' }],
    }),
  }, 'Sign In')
)
```

```typescript
import { SignInForm, SignUpForm, ResetPasswordForm } from '@tempots/beatui/auth'

// Sign-in form only
SignInForm({
  showRememberMe: true,
  onSignIn: async (data) => { /* ... */ return null },
})

// Sign-up form with all optional fields
SignUpForm({
  showPasswordStrength: true,
  showNameField: true,            // Show name field (default: true)
  showConfirmPassword: true,      // Show confirm password (default: false)
  showAcceptTermsAndConditions: true, // Show terms checkbox (default: false)
  termsAndConditions: 'I agree to the Terms of Service',
  onSignUp: async (data) => { /* ... */ return null },
})

// Password reset form only
ResetPasswordForm({
  onResetPassword: async (data) => { /* ... */ return null },
})
```

### CSS Variables

A full interactive reference for all BeatUI design tokens — colors, spacing, typography, radius, shadows, motion, z-index, and breakpoints — exposed as CSS custom properties.

### Customization

Override CSS properties, use reactive props, compose components, and tree-shake with entry points.

```css
.bc-button {
  --bc-button-border-radius: 9999px;
}

.bc-card {
  --bc-card-padding: 2rem;
}
```

```css
Button({
  variant: 'filled',
  size: 'lg',
  color: 'primary',
  loading: true,
}, 'Save Changes')
```

```typescript
import { prop, Value } from '@tempots/dom'

const size = prop<'sm' | 'md' | 'lg'>('md')

Button({ size, variant: 'filled' }, 'Dynamic Size')

// Later: size.set('lg') — button updates automatically
```

### DataSource

Create sortable, filterable, paginated data tables with createDataSource and composable table primitives.

```typescript
import { createDataSource } from '@tempots/beatui'
import { prop, OnDispose } from '@tempots/dom'

interface Employee {
  id: string
  name: string
  department: string
  salary: number
}

const ds = createDataSource<Employee>({
  data: prop(employees),  // Can be a reactive signal for live data
  rowId: e => e.id,       // Unique row identifier
  pageSize: 5,            // Rows per page
})

// Don't forget cleanup
OnDispose(() => ds.dispose())
```

```typescript
import { SortableHeader, Table } from '@tempots/beatui'

Table({ fullWidth: true, hoverable: true },
  html.thead(
    html.tr(
      SortableHeader({ dataSource: ds, column: 'name', size: 'sm' }, 'Name'),
      SortableHeader({ dataSource: ds, column: 'salary', size: 'sm' }, 'Salary'),
    )
  ),
  // ...tbody
)
```

```typescript
import { ColumnFilter, ColumnFilterPanel } from '@tempots/beatui'

// Text search filter
ColumnFilter({ dataSource: ds, column: 'name', placeholder: 'Search...' })

// Select filter for enum columns
ColumnFilter({
  dataSource: ds, column: 'department', type: 'select',
  options: [
    { value: 'Engineering', label: 'Engineering' },
    { value: 'Marketing', label: 'Marketing' },
  ],
})

// Advanced filter panel (supports number ranges, etc.)
ColumnFilterPanel({ dataSource: ds, column: 'salary', columnType: 'number', size: 'sm' })
```

### Forms

Build type-safe forms with Zod schemas, reactive controllers, and the Control wrapper for validation display.

```typescript
import { useForm, Control, TextInput, NumberInput } from '@tempots/beatui'
import { z } from 'zod'

const { controller } = useForm({
  schema: z.object({
    name: z.string().min(1, 'Name is required'),
    email: z.string().email('Enter a valid email'),
    age: z.number().min(18, 'Must be at least 18'),
  }),
  validationMode: 'eager',
  initialValue: { name: '', email: '', age: 0 },
})
```

```css
Control(TextInput, {
  controller: controller.field('name'),
  label: 'Full Name',
  description: 'Enter your legal name',
  layout: 'vertical', // or 'horizontal', 'horizontal-label-right', 'horizontal-fixed'
})
```

```css
// vertical (default) — label above input
Control(TextInput, {
  controller: controller.field('name'),
  label: 'Name',
  layout: 'vertical',
})

// horizontal — label left, input right
Control(TextInput, {
  controller: controller.field('name'),
  label: 'Name',
  layout: 'horizontal',
})

// horizontal-label-right — input left, label right
Control(TextInput, {
  controller: controller.field('name'),
  label: 'Name',
  layout: 'horizontal-label-right',
})

// horizontal-fixed — label left with fixed CSS width
Control(TextInput, {
  controller: controller.field('name'),
  label: 'Name',
  layout: 'horizontal-fixed',
  labelWidth: '10rem',
})
```

### Getting Started

Install BeatUI, set up Tailwind or standalone CSS, and build your first component.

```typescript
pnpm add @tempots/beatui @tempots/dom @tempots/ui @tempots/std
```

```typescript
pnpm add -D tailwindcss @tailwindcss/vite
```

```typescript
import tailwindcss from '@tailwindcss/vite'
import { beatuiTailwindPlugin } from '@tempots/beatui/tailwind/vite-plugin'

export default defineConfig({
  plugins: [
    tailwindcss(),
    beatuiTailwindPlugin({
      semanticColors: {
        primary: 'sky',
        secondary: 'cyan',
      },
    }),
  ],
})
```

### JSON Schema Display

Read-only rendering of JSON data annotated by a JSON Schema. Highlights type mismatches, supports custom display widgets, and works without AJV.

```typescript
import { JSONSchemaDisplay } from '@tempots/beatui/json-schema-display'

const schema = {
  type: 'object',
  properties: {
    name: { type: 'string', title: 'Full Name' },
    age: { type: 'integer', title: 'Age' },
    email: { type: 'string', format: 'email', title: 'Email' },
  },
}

const value = {
  name: 'Jane Doe',
  age: 32,
  email: 'jane@example.com',
}

JSONSchemaDisplay({ schema, value })
```

```css
// Mismatches are detected automatically when the value
// doesn't match the schema (e.g., wrong type, missing required field).

JSONSchemaDisplay({
  schema,
  value: {
    name: 42,           // Expected string, got number
    age: 'not a number', // Expected integer, got string
    email: 'jane@example.com',
  },
  showMismatches: true, // default
})

// Disable mismatch highlighting
JSONSchemaDisplay({ schema, value, showMismatches: false })
```

```typescript
import { JSONSchemaDisplay } from '@tempots/beatui/json-schema-display'
import { prop } from '@tempots/dom'

const data = prop({ name: 'Jane', age: 32 })

// Display updates reactively when data changes
JSONSchemaDisplay({ schema, value: data })

// Later...
data.set({ name: 'John', age: 28 })
```

### JSON Schema Forms

Auto-generate forms from JSON Schema definitions with AJV validation, custom widgets, and sanitization support.

```typescript
import { JSONSchemaForm } from '@tempots/beatui/json-schema'
import { prop } from '@tempots/dom'

const schema = {
  type: 'object',
  properties: {
    name: { type: 'string', title: 'Full Name' },
    age: { type: 'integer', minimum: 0, title: 'Age' },
    email: { type: 'string', format: 'email', title: 'Email' },
  },
  required: ['name', 'email'],
}

const data = prop({})

JSONSchemaForm({ schema, initialValue: data }, ({ Form, controller }) => {
  controller.signal.feedProp(data)
  return Form
})
```

```css
JSONSchemaForm({
  schema,
  initialValue: data,
  sanitizeAdditional: 'all', // 'all' | 'failing' | false
}, ({ Form }) => Form)
```

```typescript
import { JSONSchemaForm } from '@tempots/beatui/json-schema'
import { prop } from '@tempots/dom'

const data = prop({})

JSONSchemaForm({ schema, initialValue: data }, ({ Form, controller }) => {
  // controller.status is a Signal<ControllerValidation>
  // ControllerValidation: { valid: boolean; errors: ValidationError[] }
  controller.status.on(status => {
    if (status.valid) {
      console.log('Form is valid:', controller.signal.value)
    } else {
      console.log('Validation errors:', status.errors)
    }
  })

  return Form
})
```

### JSON Structure Forms

Form generation from a custom JSON Structure schema format with layout control and widget customization.

```typescript
import { JSONStructureForm, type JSONStructureSchema } from '@tempots/beatui/json-structure'
import { prop } from '@tempots/dom'

const schema: JSONStructureSchema = {
  type: 'object',
  properties: {
    name: { type: 'string', label: 'Full Name' },
    age: { type: 'number', label: 'Age', min: 0 },
    bio: { type: 'string', label: 'Biography', widget: 'textarea' },
  },
  required: ['name'],
}

const data = prop({})

JSONStructureForm({ schema, initialValue: data }, ({ Form, controller }) => {
  controller.signal.feedProp(data)
  return Form
})
```

```typescript
import { JSONStructureForm, type JSONStructureSchema } from '@tempots/beatui/json-structure'

const schema: JSONStructureSchema = {
  type: 'object',
  properties: {
    // Default widget for string is a single-line text input
    title: { type: 'string', label: 'Title' },

    // Override to a multiline textarea
    description: { type: 'string', label: 'Description', widget: 'textarea' },

    // Enum with explicit options renders as a select/dropdown
    status: {
      type: 'string',
      label: 'Status',
      widget: 'select',
      options: [
        { value: 'draft', label: 'Draft' },
        { value: 'published', label: 'Published' },
        { value: 'archived', label: 'Archived' },
      ],
    },

    // Boolean defaults to a checkbox; switch is an alternative
    active: { type: 'boolean', label: 'Active', widget: 'switch' },

    // Number with a slider widget
    priority: { type: 'number', label: 'Priority', min: 1, max: 10, widget: 'slider' },
  },
}
```

```typescript
import { type JSONStructureSchema } from '@tempots/beatui/json-structure'

const schema: JSONStructureSchema = {
  type: 'object',
  label: 'User Profile',          // Top-level form title
  description: 'Edit your info', // Optional section description
  properties: {
    // String field with optional constraints
    username: {
      type: 'string',
      label: 'Username',
      description: 'Must be lowercase with no spaces',
      minLength: 3,
      maxLength: 20,
      pattern: '^[a-z0-9_]+$',
    },

    // Number field with bounds
    score: {
      type: 'number',
      label: 'Score',
      min: 0,
      max: 100,
    },

    // Boolean field
    newsletter: {
      type: 'boolean',
      label: 'Subscribe to newsletter',
    },

    // Nested object
    address: {
      type: 'object',
      label: 'Address',
      properties: {
        street: { type: 'string', label: 'Street' },
        city:   { type: 'string', label: 'City' },
      },
    },

    // Array of items
    tags: {
      type: 'array',
      label: 'Tags',
      items: { type: 'string', label: 'Tag' },
    },
  },
  required: ['username'],
}
```

### Lexical Editor

Extensible rich text editor with docked toolbar, contextual toolbar, and bare presets. Supports markdown, HTML, and JSON content formats.

```typescript
// Import the component
import { BareEditor, DockedEditor, ContextualEditor } from '@tempots/beatui/lexical'

// Import the stylesheet (required)
import '@tempots/beatui/lexical.css'
```

```typescript
import { BareEditor, DockedEditor, ContextualEditor } from '@tempots/beatui/lexical'

// Minimal editor surface — no built-in toolbar
BareEditor({ value: '# Hello', format: 'markdown', onInput: handleInput })

// Full toolbar docked above the editor
DockedEditor({
  value: '# Hello',
  format: 'markdown',
  onInput: handleInput,
  toolbar: { hiddenGroups: [] },
})

// Floating toolbar that appears on text selection
ContextualEditor({
  value: '# Hello',
  format: 'markdown',
  onInput: handleInput,
  floatingToolbarGroups: ['text-formatting', 'links'],
})
```

```typescript
import { DockedEditor } from '@tempots/beatui/lexical'

// Markdown format (default)
DockedEditor({
  value: '# Hello\\n\\nSome **bold** and _italic_ text.',
  format: 'markdown',
  onInput: (md) => console.log('markdown:', md),
})

// HTML format
DockedEditor({
  value: '<h1>Hello</h1><p>Some <strong>bold</strong> text.</p>',
  format: 'html',
  onInput: (html) => console.log('html:', html),
})

// JSON format (Lexical editor state)
DockedEditor({
  value: JSON.stringify({ root: { children: [], direction: null, format: '', indent: 0, type: 'root', version: 1 } }),
  format: 'json',
  onInput: (json) => console.log('editor state:', json),
})
```

### Localization

Translate UI strings, create custom i18n providers, and integrate your own translations with BeatUI components.

```typescript
import { Provide } from '@tempots/dom'
import { BeatUI, Locale, BeatUII18n } from '@tempots/beatui'

BeatUI(
  {},
  // BeatUI() already sets up Locale + BeatUII18n providers.
  // Component labels, placeholders, and ARIA text
  // automatically update when the locale changes.
  YourApp()
)
```

```typescript
import { LocaleSelector } from '@tempots/beatui'

// Provide a list of locales your app supports
LocaleSelector({
  locales: [
    { code: 'en', name: 'English' },
    { code: 'es', name: 'Spanish', nativeName: 'Español' },
    { code: 'fr', name: 'French', nativeName: 'Français' },
    { code: 'ar', name: 'Arabic', nativeName: 'العربية' },
  ],
})
```

```typescript
import { Use } from '@tempots/dom'
import { BeatUII18n } from '@tempots/beatui'

// Access any built-in translation string reactively
Use(BeatUII18n, t =>
  html.div(
    html.button(t.$.confirm),         // "Confirm" / "Confirmar" / ...
    html.button(t.$.cancel),          // "Cancel" / "Cancelar" / ...
    html.span(t.$.loadingShort),      // "Loading..." / "Cargando..." / ...
  )
)
```

### Markdown Renderer

Render Markdown content to styled HTML with optional GFM support, using micromark under the hood.

```typescript
// Import the component
import { Markdown } from '@tempots/beatui/markdown'

// Option A: Import CSS yourself (default)
import '@tempots/beatui/markdown.css'

// Option B: Let the component inject it via a <link> tag
// No manual import needed — set cssInjection: 'link' instead
```

```typescript
import { Markdown } from '@tempots/beatui/markdown'
import { prop } from '@tempots/dom'

const content = prop('# Hello\\n\\nSome **markdown** content.')

Markdown({ content })
```

```typescript
import { Markdown } from '@tempots/beatui/markdown'
import { prop } from '@tempots/dom'

// content is a reactive signal — Markdown re-renders on every change
const content = prop('# Initial heading')

// Later: content.set('# Updated heading') — renderer updates in place
Markdown({ content })
```

### Monaco Editor

VS Code-powered code editor with language support, JSON Schema validation, and theme integration.

```typescript
// Import the component
import { MonacoEditorInput } from '@tempots/beatui/monaco'

// Import the stylesheet (required)
import '@tempots/beatui/monaco.css'
```

```typescript
import { MonacoEditorInput } from '@tempots/beatui/monaco'
import { prop } from '@tempots/dom'

const code = prop('const hello = "world"')

MonacoEditorInput({
  value: code,
  onChange: v => code.set(v),
  language: 'typescript',
})
```

```typescript
import { MonacoEditorInput } from '@tempots/beatui/monaco'
import { prop } from '@tempots/dom'

// JSON
MonacoEditorInput({
  value: prop('{ "name": "BeatUI" }'),
  onChange: handleChange,
  language: 'json',
})

// CSS
MonacoEditorInput({
  value: prop('.bc-button { border-radius: 9999px; }'),
  onChange: handleChange,
  language: 'css',
})

// YAML
MonacoEditorInput({
  value: prop('name: BeatUI\\nversion: 1.0.0'),
  onChange: handleChange,
  language: 'yaml',
})

// Supported languages include: typescript, javascript, json, yaml,
// html, css, scss, less, markdown, sql, python, rust, go, and many more.
```

### OpenUI Playground

Interactive playground for OpenUI Lang.

### ProseMirror Editor

Markdown-focused rich text editor with configurable features, toolbar, and bidirectional markdown serialization.

```typescript
// Import the component
import { ProseMirrorMarkdownInput } from '@tempots/beatui/prosemirror'

// Import the stylesheet (required)
import '@tempots/beatui/prosemirror.css'
```

```typescript
import { ProseMirrorMarkdownInput } from '@tempots/beatui/prosemirror'
import { prop } from '@tempots/dom'

const markdown = prop('# Hello\\n\\n**Bold** and _italic_ text.')

ProseMirrorMarkdownInput({
  value: markdown,
  onInput: v => markdown.set(v),
  showToolbar: true,
  placeholder: 'Start typing...',
})
```

```typescript
import { ProseMirrorMarkdownInput, MarkdownFeatures } from '@tempots/beatui/prosemirror'
import { prop } from '@tempots/dom'

const markdown = prop('')

// MarkdownFeatures controls which editing capabilities are active
const features: MarkdownFeatures = {
  headings: true,          // # Heading support
  headerLevels: [1, 2, 3], // Restrict to H1, H2, H3 only
  bold: true,              // **bold**
  italic: true,            // _italic_
  code: true,              // \
```

### RTL & LTR

Automatic direction detection, locale switching, logical properties, and bidirectional content support.

```typescript
import { Use, Locale } from '@tempots/beatui'

Use(Locale, ({ locale, setLocale, direction, directionPreference, setDirectionPreference }) => {
  // locale: Signal<string> — current locale (e.g., 'en-US', 'ar-SA')
  // direction: Signal<'ltr' | 'rtl'> — computed from locale + preference
  // directionPreference: Signal<'auto' | 'ltr' | 'rtl'>
  // setLocale: (locale: string) => void
  // setDirectionPreference: (pref: 'auto' | 'ltr' | 'rtl') => void
})
```

```typescript
// Direction is automatically set based on locale
setLocale('ar-SA') // → direction becomes 'rtl'
setLocale('en-US') // → direction becomes 'ltr'

// Override direction manually
setDirectionPreference('rtl') // Force RTL regardless of locale
setDirectionPreference('auto') // Back to automatic detection
```

```css
/* Use logical properties instead of physical ones */
.my-component {
  padding-inline-start: 1rem;  /* Instead of padding-left */
  margin-inline-end: 0.5rem;   /* Instead of margin-right */
  text-align: start;            /* Instead of text-align: left */
}
```

### Theming

Configure light/dark mode, customize semantic color tokens, register custom color palettes, fonts, and access theme state programmatically.

## Components

### Layout

#### Accordion

Expandable content sections with single or multiple open item support.

**Props** (`AccordionOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| multiple | boolean | false | Whether multiple items can be open simultaneously. When false, opening an item closes all others. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the accordion. *(reactive)* |
| variant | 'default' \| 'separated' | default | Visual variant of the accordion. - `'default'` has visible borders between items - `'separated'` renders each item as a  *(reactive)* |

**Sections:** Default Open, Disabled Items

#### ActionCard

An interactive card with an icon, title, and description. Used for selection grids, feature highlights, and navigation tiles.

**Props** (`ActionCardOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| icon | string | required | Iconify icon identifier displayed on the left side of the card. *(reactive)* |
| title | string | required | Primary title text displayed prominently in the card. *(reactive)* |
| description | string | required | Secondary description text displayed below the title. *(reactive)* |
| active | boolean | false | Whether the card is in an active/selected state, adding a visual highlight. *(reactive)* |
| disabled | boolean | false | Whether the card is disabled. Disabled cards cannot be clicked and appear dimmed. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size variant controlling the card's padding and text sizing. *(reactive)* |
| iconColor | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color for the icon. *(reactive)* |
| iconSize | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size of the icon. *(reactive)* |
| backgroundColor | string | — | CSS variable override for the card background color. Sets `--action-card-bg`. *(reactive)* |
| borderColor | string | — | CSS variable override for the card border color. Sets `--action-card-border`. *(reactive)* |
| titleColor | string | — | CSS variable override for the title text color. Sets `--action-card-title-color`. *(reactive)* |
| descriptionColor | string | — | CSS variable override for the description text color. Sets `--action-card-description-color`. *(reactive)* |

**Sections:** Basic, Clickable, Selection Grid, Disabled State, Icon Colors, Sizes, Custom Colors

#### AppShell

A responsive application layout shell using CSS Grid with structured sections for banner, header, menu, main content, aside, and footer.

**Props** (`AppShellOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| mediumBreakpoint | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'zero' | md | Breakpoint at which menu/aside collapse to float panels. |
| smallBreakpoint | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'zero' | sm | Breakpoint at which all panels collapse to hamburger menu. |

**Sections:** Header Only, With Navigation Menu, With Menu and Aside, With Banner and Footer, Full Layout, Responsive Breakpoints, Section Configuration

#### Card

A content container with visual separation using elevation, borders, or background depending on the variant.

**Props** (`CardOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | 'default' \| 'elevated' \| 'flat' \| 'outlined' | default | The visual style variant of the card. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Controls the internal padding size. *(reactive)* |
| roundedness | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'none' \| 'full' | lg | The border radius of the card. *(reactive)* |

**Sections:** Variants, Sizes, Border Radius, Structured Card, Cover Image, As Content Container

#### Center

Centers its children both horizontally and vertically within a container, with configurable gap spacing.

**Props** (`CenterOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| gap | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'none' | lg | Gap size between centered content and surrounding elements. *(reactive)* |

**Sections:** Center (both axes), CenterH (horizontal only), Loading State, Page Hero

#### Collapse

Animated collapsible container that smoothly expands and contracts content with CSS height transitions.

**Props** (`CollapseOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| open | boolean | required | Reactive boolean controlling whether the content is expanded or collapsed. *(reactive)* |

**Sections:** Basic Collapse, Initially Open, Multiple Panels

#### Divider

A visual separator between content sections.

**Props** (`DividerOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| orientation | 'horizontal' \| 'vertical' | horizontal | Orientation of the divider. *(reactive)* |
| variant | 'solid' \| 'dashed' \| 'dotted' | solid | Line style variant. *(reactive)* |
| tone | 'default' \| 'subtle' \| 'strong' | default | Visual prominence level. *(reactive)* |
| label | string | — | Optional label to display in the middle of the divider. *(reactive)* |
| labelAlign | 'right' \| 'left' \| 'center' | center | Alignment of the label text. *(reactive)* |

**Sections:** With Label, Vertical

#### Fieldset

Groups form fields with a legend, cascading layout configuration, multi-column grid, and optional collapsible content.

**Props** (`FieldsetOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| legend | string | — | Legend content (always visible header for the fieldset) *(reactive)* |
| description | string | — | Description text displayed below the legend *(reactive)* |
| variant | 'bordered' \| 'card' \| 'plain' | plain | Visual variant of the fieldset container. *(reactive)* |
| collapsible | boolean | false | Whether the fieldset body can be collapsed/expanded. *(reactive)* |
| defaultCollapsed | boolean | false | Initial collapsed state (only used when collapsible is true). *(reactive)* |
| disabled | boolean | false | Whether the entire fieldset (and all children) is disabled. *(reactive)* |
| layout | 'horizontal' \| 'vertical' \| 'horizontal-fixed' \| 'horizontal-end' \| 'horizontal-label-right' \| 'responsive' | vertical | Label position cascaded to descendant Field components. *(reactive)* |
| labelWidth | string | 7.5rem | Label column width cascaded to descendant Field components. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Control size cascaded to descendant Field components. *(reactive)* |
| gap | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Gap between fields in the grid. *(reactive)* |
| minFieldWidth | string | 15rem | Minimum field width before columns auto-collapse. *(reactive)* |
| compact | boolean | false | Reduced spacing mode cascaded to descendant Field components. *(reactive)* |

**Sections:** Bordered Variant, Plain Variant, Card Variant, Horizontal Layout, Multi-Column Grid, Responsive Layout, Collapsible, Compact Mode, Nested Fieldsets, Disabled

#### Group

Horizontal group layout that arranges children in a row with consistent spacing using flexbox.

**Sections:** Gap Sizes, Justify Content, Wrap, Button Group, Inline Items, Toolbar-style Layout, Mixed Content

#### NineSliceScrollView

A scrollable container divided into nine regions: a scrollable body with fixed header, footer, and sidebars that stay in place while the body scrolls in both axes.

**Props** (`NineSliceScrollViewOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| contentWidth | bigint | required | Total width of the scrollable content in the body, as a bigint in pixels. *(reactive)* |
| contentHeight | bigint | required | Total height of the scrollable content in the body, as a bigint in pixels. *(reactive)* |
| headerHeight | number | 0 | Fixed pixel height of the header region. *(reactive)* |
| topStart | string | — | Content for the top-start corner (top-left in LTR, top-right in RTL). *(reactive)* |
| topEnd | string | — | Content for the top-end corner (top-right in LTR, top-left in RTL). *(reactive)* |
| footerHeight | number | 0 | Fixed pixel height of the footer region. *(reactive)* |
| bottomStart | string | — | Content for the bottom-start corner (bottom-left in LTR, bottom-right in RTL). *(reactive)* |
| bottomEnd | string | — | Content for the bottom-end corner (bottom-right in LTR, bottom-left in RTL). *(reactive)* |
| sidebarStart | string | — | Content for the start sidebar (left in LTR, right in RTL). Scrolls vertically with the body but remains fixed horizontal *(reactive)* |
| sidebarStartWidth | number | 0 | Fixed pixel width of the start sidebar. *(reactive)* |
| sidebarEnd | string | — | Content for the end sidebar (right in LTR, left in RTL). Scrolls vertically with the body but remains fixed horizontally *(reactive)* |
| sidebarEndWidth | number | 0 | Fixed pixel width of the end sidebar. *(reactive)* |
| anchorMode | 'container-edge' \| 'body-end' \| 'body-bottom' \| 'body-end-bottom' | container-edge | Controls how the end sidebar and footer anchor relative to the body content. *(reactive)* |

**Sections:** Spreadsheet Layout, Full Nine-Slice, Body Only

#### ScrollablePanel

A panel with a scrollable body and optional fixed header and footer. Displays scroll shadow indicators when content overflows.

**Props** (`ScrollablePanelOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| shadowOnScroll | boolean | true | Whether to display scroll shadow indicators at the top/bottom edges when the body content overflows. Shadows help indica *(reactive)* |

**Sections:** Basic Scrollable Panel, With Header and Footer, Without Scroll Shadows, Short Content (no scroll), Scroll Shadow Behavior

#### Sink

A sunken/inset container with configurable depth, padding, and border radius. Useful for code blocks, input areas, or nested content that needs a recessed visual appearance.

**Props** (`SinkOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | 'default' \| 'flat' \| 'deep' \| 'shallow' | default | The visual depth variant controlling the inset shadow appearance.  - `'default'` - Standard inset effect - `'deep'` - St *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Padding size applied to the sink container. *(reactive)* |
| roundedness | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'none' \| 'full' | lg | Border radius token controlling corner roundedness. *(reactive)* |

**Sections:** Depth Variants, Sizes, Roundedness, Code Block Use Case, Nested Content

#### Stack

Vertical stack layout that arranges children in a column with consistent spacing using flexbox.

**Sections:** Gap Sizes, Alignment, Basic Stack, With Cards, Form Layout

#### WithBreakpoint

A reactive breakpoint utility that monitors viewport or element width and provides the current breakpoint name and comparison helpers to a render callback.

**Props** (`WithBreakpointOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| mode | 'element' \| 'viewport' | viewport | Whether to track the viewport (window) size or the parent element size. Use `'element'` for container-query-like behavio |

**Sections:** Viewport Breakpoints, Element Breakpoints (Container Queries), Standard BeatUI Breakpoints, Element Container Breakpoints, Comparison Operators

### Overlays

#### AlertDialog

An informational dialog for presenting important messages to the user with a single acknowledgement action. Supports info, success, warning, and danger variants.

**Props** (`AlertDialogOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| title | string | required | Dialog title displayed next to the icon. *(reactive)* |
| variant | 'success' \| 'warning' \| 'danger' \| 'info' | info | Visual variant controlling the default icon and color. |
| icon | string | — | Override icon. If not provided, a default icon is used based on the variant. *(reactive)* |
| okText | string | OK | Custom label for the OK button. *(reactive)* |
| dismissable | boolean | true | Whether the dialog can be closed by clicking outside or pressing Escape. *(reactive)* |

**Sections:** Variants, Custom OK Text, Non-dismissable, Rich Body Content

#### BlockCommandPalette

An inline block-level command palette with search filtering and keyboard navigation. Designed for slash-command menus in editors.

**Sections:** Basic Usage, With Position, Filtered Results

#### ConfirmationDialog

A confirmation dialog for destructive or irreversible actions. Displays a title with a colored icon, descriptive body, optional consequence list, and confirm/cancel buttons.

**Props** (`ConfirmationDialogOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| title | string | Confirm action | Dialog title displayed next to the icon. *(reactive)* |
| icon | string | lucide:alert-triangle | Iconify icon identifier displayed in a colored circle. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | danger | Semantic color applied to the icon background and confirm button. *(reactive)* |
| confirmText | string | Confirm | Custom label for the confirm button. Falls back to i18n `confirm` string. *(reactive)* |
| cancelText | string | Cancel | Custom label for the cancel button. Falls back to i18n `cancel` string. *(reactive)* |
| dismissable | boolean | true | Whether the dialog can be closed by clicking outside or pressing Escape. *(reactive)* |

**Sections:** Colors, With Consequences, Custom Button Labels, Non-dismissable

#### Drawer

A sliding panel anchored to any edge of the viewport.

**Props** (`DrawerOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| size | 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size preset controlling the width (for left/right drawers) or height (for top/bottom drawers). *(reactive)* |
| side | 'top' \| 'right' \| 'bottom' \| 'left' \| 'inline-start' \| 'inline-end' | right | Side of the viewport or container element to anchor the drawer to. Logical values `'inline-start'` and `'inline-end'` re *(reactive)* |
| dismissable | boolean | true | Whether the drawer can be closed by clicking outside or pressing the Escape key. When `false`, the overlay enters non-ca *(reactive)* |
| showCloseButton | boolean | true | Whether to show the close button in the drawer header. Only rendered when header content is provided. *(reactive)* |
| overlayEffect | 'none' \| 'transparent' \| 'opaque' | opaque | Visual effect applied to the overlay backdrop behind the drawer. *(reactive)* |
| container | 'element' \| 'body' | body | Where to attach the overlay in the DOM. - `'body'` - Renders via a portal to the document body. - `'element'` - Renders  |

**Sections:** Sides, Sizes, Non-dismissable, With Navigation Content

#### Flyout

A positioned floating panel anchored to a trigger element, with configurable trigger modes, placement, delays, and animated transitions.

**Props** (`FlyoutOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| placement | 'top' \| 'top-start' \| 'top-end' \| 'right' \| 'right-start' \| 'right-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' | top | Placement of the flyout relative to the trigger element. Uses the Floating UI placement model (e.g., `'top'`, `'bottom-s *(reactive)* |
| showDelay | number | 250 | Delay in milliseconds before showing the flyout after trigger activation. *(reactive)* |
| hideDelay | number | 500 | Delay in milliseconds before hiding the flyout after trigger deactivation. *(reactive)* |
| mainAxisOffset | number | 8 | Offset in pixels from the main axis (vertical for top/bottom placements, horizontal for left/right placements). *(reactive)* |
| crossAxisOffset | number | 0 | Offset in pixels from the cross axis (horizontal for top/bottom placements, vertical for left/right placements). *(reactive)* |
| closable | boolean | true | Whether the flyout can be closed with the Escape key or by clicking outside. *(reactive)* |
| arrow | string | — | Optional arrow renderer. Receives a signal with  {@link  PopOverArrowOptions }  positioning data and returns a TNode to  *(reactive)* |
| role | string | dialog | ARIA role attribute applied to the flyout container. *(reactive)* |
| hasPopup | 'dialog' \| 'menu' \| 'listbox' \| 'tree' \| 'grid' | dialog | Value for the `aria-haspopup` attribute on the trigger element. Indicates the type of popup that the trigger controls. *(reactive)* |

**Sections:** Trigger Modes, Placements, Rich Content

#### Lightbox

A full-screen overlay for displaying images or arbitrary content centered over a dark backdrop with dismiss support.

**Props** (`LightboxOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| dismissable | boolean | true | Whether the lightbox can be closed by clicking outside or pressing the Escape key. When `false`, the overlay ignores dis *(reactive)* |
| showCloseButton | boolean | true | Whether to show a close button in the top-end corner of the lightbox. *(reactive)* |
| overlayEffect | 'none' \| 'transparent' \| 'opaque' | opaque | Visual effect applied to the overlay backdrop behind the lightbox. *(reactive)* |
| container | 'element' \| 'body' | body | Where to attach the overlay in the DOM. - `'body'` - Renders via a portal to the document body. - `'element'` - Renders  |
| padding | number | 32 | Padding in pixels kept around the content. The content is constrained to the viewport dimensions minus this padding on e *(reactive)* |

**Sections:** Custom Padding, Non-dismissable

#### Modal

A dialog overlay for focused interactions, with customizable size and position.

**Props** (`ModalOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| size | 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size preset controlling the maximum width of the modal dialog. *(reactive)* |
| dismissable | boolean | true | Whether the modal can be closed by clicking outside or pressing the Escape key. When `false`, the overlay enters non-cap *(reactive)* |
| showCloseButton | boolean | true | Whether to show the close button in the modal header. Only rendered when header content is provided. *(reactive)* |
| overlayEffect | 'none' \| 'transparent' \| 'opaque' | opaque | Visual effect applied to the overlay backdrop behind the modal. *(reactive)* |
| container | 'element' \| 'body' | body | Where to attach the overlay in the DOM. - `'body'` - Renders via a portal to the document body. - `'element'` - Renders  |
| position | 'top' \| 'top-start' \| 'top-end' \| 'right' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'center' | center | Position of the modal dialog within the overlay. Controls alignment relative to the viewport or container. *(reactive)* |

**Sections:** Sizes, Positions, With Custom Header, Non-dismissable, Confirmation Modal

#### Popover

A positioned popover panel attached to a trigger element. Placed as a child of the trigger — not a wrapper.

**Props** (`PopoverOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| placement | 'top' \| 'top-start' \| 'top-end' \| 'right' \| 'right-start' \| 'right-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' | bottom | Placement of the popover relative to the trigger element. Uses the Floating UI placement model (e.g., `'top'`, `'bottom- *(reactive)* |
| showDelay | number | 0 | Delay in milliseconds before showing the popover after trigger activation. *(reactive)* |
| hideDelay | number | 0 | Delay in milliseconds before hiding the popover after trigger deactivation. *(reactive)* |
| mainAxisOffset | number | 8 | Offset in pixels from the main axis (vertical for top/bottom placements, horizontal for left/right placements). *(reactive)* |
| crossAxisOffset | number | 0 | Offset in pixels from the cross axis (horizontal for top/bottom placements, vertical for left/right placements). *(reactive)* |
| showOn | 'hover' \| 'focus' \| 'hover-focus' \| 'click' \| 'never' | click | How the popover is triggered to show and hide. *(reactive)* |
| closable | boolean | true | Whether the popover can be closed with the Escape key or by clicking outside. *(reactive)* |
| role | string | dialog | ARIA role attribute applied to the popover container. *(reactive)* |
| hasPopup | 'dialog' \| 'menu' \| 'listbox' \| 'tree' \| 'grid' | dialog | Value for the `aria-haspopup` attribute on the trigger element. Indicates the type of popup that the trigger controls. *(reactive)* |

**Sections:** Basic Popover, Placements, Hover Trigger, Rich Content

#### PromptDialog

A dialog that prompts the user for text input. Includes a title, optional description, a text field, and confirm/cancel buttons. Pressing Enter submits the form.

**Props** (`PromptDialogOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| title | string | Enter a value | Dialog title displayed in the header. *(reactive)* |
| placeholder | string | Type here... | Placeholder text for the input field. *(reactive)* |
| defaultValue | string |  | Default value pre-filled in the input field. *(reactive)* |
| confirmText | string | Save | Custom label for the confirm button. Falls back to i18n `confirm` string. *(reactive)* |
| cancelText | string | Cancel | Custom label for the cancel button. Falls back to i18n `cancel` string. *(reactive)* |
| dismissable | boolean | true | Whether the dialog can be closed by clicking outside or pressing Escape. *(reactive)* |

**Sections:** Basic Prompt, Without Default Value, Various Use Cases, Non-dismissable

#### Spotlight

A searchable command/search overlay with fuzzy search, keyboard navigation, section grouping, recent items, and a global hotkey.

**Props** (`SpotlightOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| placeholder | string | Search | — *(reactive)* |
| emptyMessage | string | No results | — *(reactive)* |
| size | 'sm' \| 'md' \| 'lg' | md | — *(reactive)* |
| hotkey | string | mod+k | — |
| container | 'element' \| 'body' | body | — |
| overlayEffect | 'transparent' \| 'opaque' | opaque | Overlay backdrop effect. |

**Sections:** Basic Usage, Sizes, Custom Placeholder

#### Tooltip

A small popup that shows contextual information on hover or focus.

**Props** (`TooltipOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| placement | 'top' \| 'top-start' \| 'top-end' \| 'right' \| 'right-start' \| 'right-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' | top | Placement of the tooltip relative to the trigger element. *(reactive)* |
| showDelay | number | 250 | Delay in milliseconds before showing the tooltip on hover. *(reactive)* |
| hideDelay | number | 500 | Delay in milliseconds before hiding the tooltip after mouse leave. *(reactive)* |
| mainAxisOffset | number | 8 | Offset in pixels from the main axis (vertical for top/bottom, horizontal for left/right). *(reactive)* |
| crossAxisOffset | number | 0 | Offset in pixels from the cross axis (horizontal for top/bottom, vertical for left/right). *(reactive)* |
| showOn | 'hover' \| 'focus' \| 'hover-focus' \| 'click' \| 'never' | hover-focus | How to show the tooltip. *(reactive)* |

**Sections:** Placements, On Different Elements, Rich Content

### Feedback

#### AnnouncementBar

A colored banner displayed at the top of a page or container for announcements, promotions, or system messages. Supports icons and user-dismissal.

**Props** (`AnnouncementBarOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color applied to the announcement bar background. *(reactive)* |
| icon | string | — | Optional icon identifier displayed at the start of the announcement bar. When `undefined` or not provided, no icon is re *(reactive)* |
| closable | boolean | false | Whether the announcement bar can be dismissed by the user via a close button. *(reactive)* |
| class | string | — | Additional CSS class names to apply to the announcement bar element. *(reactive)* |
| portal | boolean | false | Controls where the announcement bar is rendered in the DOM. - `true` (default) - Portals to the document body, fixed at  |

**Sections:** With Icon, Dismissable

#### EmptyState

Placeholder displayed when content or data is absent, with optional icon, title, description, and call-to-action.

**Props** (`EmptyStateOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| icon | string | — | Icon identifier string (Iconify format) to display above the title. When `undefined`, no icon is rendered. *(reactive)* |
| title | string | required | Main heading text for the empty state. *(reactive)* |
| description | string | — | Optional description text displayed below the title. *(reactive)* |
| size | 'sm' \| 'md' \| 'lg' | md | Visual size of the empty state component. *(reactive)* |
| action | string | — | Optional action element (e.g., a button) displayed below the description. *(reactive)* |
| class | string | — | Additional CSS class name(s) to apply to the root element. *(reactive)* |

**Sections:** With Icon and Description, With Action, Minimal (No Icon), Sizes, Common Scenarios

#### LoadingOverlay

A semi-transparent overlay with a centered loading spinner. Place inside a relatively-positioned container to cover its content while loading.

**Props** (`LoadingOverlayOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| visible | boolean | false | Whether the overlay is visible. *(reactive)* |
| message | string | — | Optional message to display below the spinner. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | lg | Size of the spinner icon. *(reactive)* |

**Sections:** Basic Usage, With Message, Sizes, Simulated Async Action

#### Notice

An informational banner or callout with variant-driven styling, optional title, icon, and dismiss support.

**Props** (`NoticeOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | 'success' \| 'warning' \| 'danger' \| 'info' | info | The semantic variant controlling color scheme and default icon. *(reactive)* |
| tone | 'subtle' \| 'prominent' | subtle | The visual tone controlling background intensity. *(reactive)* |
| role | 'status' \| 'alert' | — | ARIA role override. When not specified, defaults to `'alert'` for the `'danger'` variant and `'status'` for all others. *(reactive)* |
| title | string | — | Optional title text displayed prominently above the notice body content. *(reactive)* |
| icon | boolean | — | Icon identifier string (Iconify format), or `false` to suppress the icon entirely. When `undefined`, a default icon is c *(reactive)* |
| closable | boolean | false | Whether the notice can be dismissed by the user via a close button. *(reactive)* |
| class | string | — | Additional CSS class name(s) to apply to the notice root element. *(reactive)* |

**Sections:** Variants, With Title, Prominent Tone, Closable, No Icon

#### NotificationPanel

A panel for displaying a list of notifications with read/unread state, icons, and metadata.

**Sections:** Notification Panel, Empty State

#### NotificationService

A toast notification system for dispatching ephemeral popup notifications programmatically. Wrap your app with NotificationProvider and place a NotificationViewport to render toasts.

**Props** (`ShowNotificationOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| loading | boolean | false | Whether the notification is in a loading state. When `true`, a spinner icon replaces the custom icon. *(reactive)* |
| showCloseButton | boolean | false | Whether to display a close button in the notification. *(reactive)* |
| showBorder | boolean | false | Whether the notification displays a colored border. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color applied to the notification accent, icon, and close button. *(reactive)* |
| roundedness | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'none' \| 'full' | md | Border radius applied to the notification container. *(reactive)* |
| title | string | — | Optional title content rendered above the notification body. *(reactive)* |
| icon | string | — | Iconify icon identifier to display. When `undefined` and not loading, a colored accent bar is shown instead. *(reactive)* |
| class | string | — | Additional CSS class name(s) to apply to the notification root element. *(reactive)* |

**Sections:** Basic Usage, Positions

#### Notification

A notification card with optional icon, title, body content, loading state, and close button. Supports theme colors and roundedness customization.

**Props** (`NotificationOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| loading | boolean | false | Whether the notification is in a loading state. When `true`, a spinner icon replaces the custom icon. *(reactive)* |
| showCloseButton | boolean | false | Whether to display a close button in the notification. *(reactive)* |
| showBorder | boolean | false | Whether the notification displays a colored border. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color applied to the notification accent, icon, and close button. *(reactive)* |
| roundedness | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'none' \| 'full' | md | Border radius applied to the notification container. *(reactive)* |
| title | string | — | Optional title content rendered above the notification body. *(reactive)* |
| icon | string | — | Iconify icon identifier to display. When `undefined` and not loading, a colored accent bar is shown instead. *(reactive)* |
| class | string | — | Additional CSS class name(s) to apply to the notification root element. *(reactive)* |

**Sections:** Colors, With Border, With Close Button, Loading State, Without Icon (Accent Bar), Gallery

#### OnboardingTour

A step-by-step guided tour overlay that highlights UI elements with a spotlight effect and tooltip navigation.

**Props** (`OnboardingTourOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| backdropAction | 'close' \| 'advance' \| 'ignore' | ignore | Behavior when backdrop is clicked. |
| spotlightPadding | number | 8 | Padding around the highlighted element in pixels. |
| spotlightRadius | number | 8 | Border radius for the spotlight cutout in pixels. |
| showStepIndicator | boolean | true | Whether to show step indicators (e.g. "Step 2 of 5"). |
| showSkipButton | boolean | true | Whether to show the Skip button. |
| container | 'element' \| 'body' | body | Where to attach the overlay in the DOM. - `'body'` - Renders via a portal to the document body. - `'element'` - Renders  |

**Sections:** Basic Tour, Multi-Step Flow, Custom Step Content, Programmatic Control, Backdrop Click Behavior

### Inputs

#### AppearanceSelector

A segmented input for selecting the application appearance: light, dark, or system. Connects to the theme provider or can be controlled manually.

**Props** (`AppearanceSelectorOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | 'light' \| 'dark' \| 'system' | required | The current appearance preference value. *(reactive)* |
| disabled | boolean | false | Whether the selector is disabled. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | sm | Visual size of the selector. *(reactive)* |

**Sections:** Controlled, Standalone (Theme-Connected), Disabled, All Preferences

#### BigintInput

A numeric input for arbitrarily large integers (bigint), with optional stepper buttons, min/max clamping, and digit-only masking.

**Props** (`BigintInputOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| value | bigint | required | The current value of the input (can be static or reactive signal) *(reactive)* |
| step | bigint | 1n | Step value for increment/decrement buttons. If provided, stepper buttons are shown. *(reactive)* |
| min | bigint | 0n | Minimum allowed value. Values below this are clamped. *(reactive)* |
| max | bigint | 100n | Maximum allowed value. Values above this are clamped. *(reactive)* |

**Sections:** With Steppers, Min / Max, Sizes

#### CheckboxInput

A custom icon-based checkbox with ARIA semantics, keyboard support, and optional text label.

**Props** (`CheckboxInputOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| value | boolean | required | The current value of the input (can be static or reactive signal) *(reactive)* |
| activeIcon | string | ri:checkbox-fill | Icon name to display when the checkbox is active (checked). *(reactive)* |
| inactiveIcon | string | mdi:checkbox-blank-outline | Icon name to display when the checkbox is inactive (unchecked). *(reactive)* |
| iconSize | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | lg | Size of the checkbox icon. *(reactive)* |

**Sections:** With Labels, Sizes, Disabled

#### ColorInput

A color picker combining a text field and a clickable color swatch that opens the native color picker.

**Props** (`ColorInputOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| value | string | #000000 | The current color value as a CSS color string. *(reactive)* |
| swatchSize | number | 32 | Size in pixels of the color swatch preview (square). *(reactive)* |

**Sections:** Sizes, States

#### ColorPicker

A full-featured color picker with saturation/lightness area, hue strip, optional alpha, format-specific input panels, and swatch presets. Supports hex, RGB, HSL, HWB, and OKLCH. Each format also available as a standalone picker.

#### EditableText

An inline editable text that toggles between display and input modes on click.

**Props** (`EditableTextOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | string | The content | The current text value to display and edit. *(reactive)* |
| placeholder | string | Edit me | Placeholder text shown when the value is empty. *(reactive)* |
| startEditing | boolean | false | Whether the component should start in editing mode. *(reactive)* |
| disabled | boolean | false | Whether the component is disabled and cannot be edited. *(reactive)* |

**Sections:** With Placeholder, Multiple Instances, Disabled, Start in Edit Mode

#### EmailInput

An email input with a default email icon, browser-native email validation, and autocomplete support.

**Sections:** With Default Icon, Sizes, States

#### MaskInput

A text input with configurable input masking. Supports static and dynamic masks, custom token definitions, cursor behavior, completion detection, and unmask strategies.

**Props** (`MaskInputOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | (___) ___-____ | Placeholder text displayed when the input is empty   Placeholder text displayed when the input is empty. *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| value | string | required | The current value of the input (can be static or reactive signal) *(reactive)* |
| debounceMs | number | — | Debounce delay in milliseconds for change events. *(reactive)* |
| mask | string | (999) 999-9999 | The mask pattern or dynamic mask function. *(reactive)* |
| useDefaultDefinitions | boolean | true | Whether to include the default definitions (`9`, `A`, `*`). *(reactive)* |
| prefix | string | — | A string prepended to the conformed value. *(reactive)* |
| suffix | string | — | A string appended to the conformed value. *(reactive)* |
| autofix | 'none' \| 'pad' \| 'truncate' | none | Auto-fix mode for out-of-range values. *(reactive)* |
| autoclear | boolean | — | Whether to clear the input when incomplete on blur. *(reactive)* |
| allowMode | 'custom' \| 'all' \| 'digits' \| 'letters' \| 'alphanumeric' | all | Character filtering mode. *(reactive)* |
| maxLengthHard | number | — | Hard maximum character length. *(reactive)* |
| compositionSafe | boolean | — | Whether to handle IME composition events safely. *(reactive)* |

**Sections:** Common Masks, Custom Token Definitions, Sizes, States

#### NumberInput

A numeric input with optional stepper buttons, min/max constraints, and scroll-to-step support.

**Props** (`NumberInputOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| value | number | required | The current value of the input (can be static or reactive signal) *(reactive)* |
| step | number | 1 | Step increment for stepper buttons and wheel interactions. When set, enables +/- buttons and scroll-to-step. Hold Shift  *(reactive)* |
| min | number | 0 | Minimum allowed value. Disables decrement when reached. *(reactive)* |
| max | number | 10 | Maximum allowed value. Disables increment when reached. *(reactive)* |
| unit | string | — | Unit of measurement label displayed after the input (e.g., "kg", "px", "%"). Rendered before stepper buttons. *(reactive)* |
| formatted | boolean | false | When true, displays the value formatted with locale-aware grouping and decimals (derived from step) when the input is no *(reactive)* |

**Sections:** With Steppers, With Unit, Formatted, Sizes

#### NumberStepper

A quantity selector with compact +/- buttons and a displayed value. Unlike NumberInput, this has no text field — ideal for cart quantities and counters.

**Props** (`NumberStepperOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | number | 1 | The current numeric value. *(reactive)* |
| min | number | 0 | Minimum allowed value. *(reactive)* |
| max | number | 100 | Maximum allowed value. *(reactive)* |
| step | number | 1 | Increment/decrement step. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size of the stepper. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | base | Theme color. *(reactive)* |
| disabled | boolean | false | Whether the stepper is disabled. *(reactive)* |
| orientation | 'horizontal' \| 'vertical' | horizontal | Layout orientation. *(reactive)* |

**Sections:** Basic, Min / Max, Custom Step, Vertical, Sizes, Disabled, In a Field

#### OtpInput

A one-time password input with individual cells, keyboard navigation, paste support, and masking.

**Props** (`OtpInputOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| length | number | 6 | Number of input digits/characters. *(reactive)* |
| value | string | — | The current OTP value as a string. *(reactive)* |
| disabled | boolean | false | Whether the input is disabled. *(reactive)* |
| mask | boolean | false | Whether to mask the input characters (like a password). *(reactive)* |
| type | 'alphanumeric' \| 'numeric' | numeric | Allowed input type. - `'numeric'` allows only digits 0-9 - `'alphanumeric'` allows letters and digits *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the input cells. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color for the focused input border. *(reactive)* |
| placeholder | string |  | Placeholder character shown in empty cells. *(reactive)* |
| autoFocus | boolean | false | Whether to auto-focus the first cell on mount. |

**Sections:** Lengths, Masked PIN, Alphanumeric, Sizes, Colors

#### PasswordInput

A password input with a built-in visibility toggle button, automatic autocomplete handling, and masked placeholder.

**Sections:** Toggle Visibility, Sizes, States

#### RadioGroup

A group of radio buttons for selecting one option from a mutually exclusive list.

**Props** (`RadioGroupOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| name | string | — | HTML name attribute for the radio group (generated if not provided) |
| disabled | boolean | — | Whether the entire radio group is disabled *(reactive)* |
| orientation | 'horizontal' \| 'vertical' | vertical | Layout orientation of the radio options. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the radio controls. *(reactive)* |
| class | string | — | Additional CSS class name(s) to apply to the root element. *(reactive)* |

**Sections:** Horizontal Layout, With Descriptions, Sizes

#### RangeSlider

A range slider supporting single-value, dual-thumb range, and multi-point modes with customizable thumbs, segment styles, tick marks, and keyboard accessibility.

**Props** (`RangeSliderOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| min | number | 0 | Minimum value of the slider range. *(reactive)* |
| max | number | 100 | Maximum value of the slider range. *(reactive)* |
| step | number | 1 | Step increment between valid values. *(reactive)* |
| disabled | boolean | false | Whether the slider is disabled. *(reactive)* |
| readonly | boolean | false | Whether the slider is readonly (visible but non-interactive). *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the slider. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color for the filled track and thumbs. *(reactive)* |
| value | number | — | Single-value mode: the current slider value. Use this for a simple single-thumb slider. *(reactive)* |
| ticks | boolean | — | Tick marks along the slider track (extend outward from the track). Can be `true` for automatic step-based ticks, or an a *(reactive)* |
| markers | boolean | — | Marker dots rendered directly on the track surface. Can be `true` for automatic step-based markers, or an array of custo *(reactive)* |
| showValue | boolean | false | Whether to show the current value label(s) above the thumb(s). *(reactive)* |
| orientation | 'horizontal' \| 'vertical' | horizontal | Orientation of the slider. When 'vertical', the track runs top-to-bottom visually but min is at the bottom and max is at *(reactive)* |

**Sections:** Single Value, Dual-Thumb Range, Multi-Point Mode, Vertical Orientation, Custom Thumbs, Segment Styles, Segment Styles (Multi-Point), Tick Marks, Markers, Custom Value Format, Colors, Sizes, Disabled, Readonly

#### RatingInput

A star rating input with fractional precision, keyboard navigation, and customizable icons and colors.

**Props** (`RatingInputOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes.   Visual size of the rating icons. *(reactive)* |
| value | number | required | The current value of the input (can be static or reactive signal) *(reactive)* |
| max | number | 5 | Maximum number of rating icons (stars). *(reactive)* |
| fullColor | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | yellow | Theme color for filled (active) icons. *(reactive)* |
| emptyColor | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | neutral | Theme color for empty (inactive) icons. *(reactive)* |
| activeIcon | string | line-md:star-alt-filled | Icon name for active (filled) rating icons. *(reactive)* |
| inactiveIcon | string | line-md:star-alt | Icon name for inactive (empty) rating icons. *(reactive)* |
| rounding | number | 1 | Step size for rounding during keyboard interactions (e.g., 0.25 for quarter steps). *(reactive)* |

**Sections:** Basic Rating, Fractional Precision, Custom Max, Custom Icons and Colors, Sizes, States, Nullable Rating

#### SegmentedInput

A segmented control for selecting one option from a set, with an animated sliding indicator.

**Props** (`SegmentedInputOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the segmented control. *(reactive)* |
| disabled | boolean | false | Whether the segmented control is disabled. *(reactive)* |
| variant | 'pill' \| 'squared' | pill | Shape variant. `'pill'` uses fully rounded corners, `'squared'` uses control-like border-radius and taller padding to ma *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | — | Theme color for the active segment indicator and text, using solid button-style coloring. When not set, uses the default *(reactive)* |

**Sections:** Sizes, Squared Variant, Colors

#### SegmentedSelect

A segmented control that selects from typed option values, combining the visual style of SegmentedInput with the option model of NativeSelect.

**Props** (`SegmentedSelectOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the segmented control. *(reactive)* |
| disabled | boolean | false | Whether the segmented control is disabled. *(reactive)* |
| variant | 'pill' \| 'squared' | squared | Shape variant. `'pill'` uses fully rounded corners, `'squared'` uses control-like border-radius and taller padding to ma *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | — | Theme color for the active segment indicator and text, using solid button-style coloring. When not set, uses the default *(reactive)* |

**Sections:** Basic Usage, With Disabled Options, Squared Variant, Sizes, With Color

#### SliderInput

A range slider input with configurable min, max, and step values for selecting a numeric value.

**Props** (`SliderInputOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| value | number | required | The current value of the input (can be static or reactive signal) *(reactive)* |
| step | number | 1 | Step increment between valid values on the slider. *(reactive)* |
| min | number | 0 | Minimum value of the slider range. *(reactive)* |
| max | number | 100 | Maximum value of the slider range. *(reactive)* |

**Sections:** Min, Max, and Step, Sizes, States, Nullable Slider

#### SortableList

A drag-and-drop reorderable list. Each item receives a drag handle for the user to grab.

**Props** (`SortableListOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| disabled | boolean | false | Whether drag-and-drop is disabled. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size variant. *(reactive)* |
| class | string | — | Additional CSS class(es) applied to the list container. *(reactive)* |
| variant | 'bordered' \| 'card' \| 'plain' | bordered | Visual variant for items. - `'bordered'` — border around each item (default) - `'card'` — elevated card with shadow, no  *(reactive)* |
| gap | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Gap between items. Mapped to CSS spacing tokens. *(reactive)* |
| handleIcon | string | lucide:grip-vertical | Iconify icon identifier for the drag handle. *(reactive)* |

**Sections:** Basic, Variants, Gap, Handle Icon, Rich Items, Custom Class, Disabled, Sizes

#### Switch

A toggle switch for boolean on/off states.

**Props** (`SwitchOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | boolean | required | The current boolean state of the switch (on/off) *(reactive)* |
| offLabel | string | — | Optional label displayed when the switch is in the off state *(reactive)* |
| onLabel | string | — | Optional label displayed when the switch is in the on state *(reactive)* |
| disabled | boolean | false | Whether the switch is disabled and cannot be toggled. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the switch. *(reactive)* |
| id | string | — | Unique HTML id attribute for the switch element *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color for the switch track when on. *(reactive)* |
| tabIndex | number | 0 | Tab index for keyboard navigation order. *(reactive)* |
| matchInputHeight | boolean | true | Whether to add vertical padding so the switch matches the height of text inputs at the same size. |
| ariaLabel | string | — | Accessible label for the switch (applied as aria-label) *(reactive)* |

**Sections:** With Labels, Disabled

#### TextArea

A multi-line text input with configurable row count, placeholder, and all standard input states.

**Props** (`TextAreaOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| value | string | required | The current value of the input (can be static or reactive signal) *(reactive)* |
| rows | number | 3 | Number of visible text rows. *(reactive)* |

**Sections:** Row Sizes, Sizes, States

#### TextInput

A single-line text input with support for prefix, suffix, icons, and all standard input states.

**Props** (`TextInputOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| value | string | required | The current value of the input (can be static or reactive signal) *(reactive)* |
| type | string | text | HTML input type attribute. *(reactive)* |

**Sections:** Sizes, States

#### TransferList

A dual-list component for transferring items between "available" and "selected" pools. Generic in T with custom rendering.

**Props** (`TransferListOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| searchable | boolean | false | Whether to show search inputs on each panel. *(reactive)* |
| disabled | boolean | false | Whether the component is disabled. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size variant. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color. *(reactive)* |

**Sections:** Basic, Searchable, Rich Items, Disabled, Sizes

#### TriStateCheckboxInput

A checkbox with three states: checked, unchecked, and indeterminate. Cycles through states on click with full ARIA semantics.

**Props** (`TriStateCheckboxInputOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| value | 'checked' \| 'unchecked' \| 'indeterminate' | required | The current value of the input (can be static or reactive signal) *(reactive)* |
| activeIcon | string | ri:checkbox-fill | Icon name to display when the checkbox is active (checked). *(reactive)* |
| inactiveIcon | string | mdi:checkbox-blank-outline | Icon name to display when the checkbox is inactive (unchecked). *(reactive)* |
| indeterminateIcon | string | ri/checkbox-indeterminate-fill | Icon name to display when the checkbox is in the indeterminate state. *(reactive)* |
| iconSize | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | — | Size of the checkbox icon. *(reactive)* |

**Sections:** All Three States, With Labels, Custom Icons, Sizes, Disabled

#### UrlInput

A URL input with browser-native URL validation via type="url".

**Sections:** Basic Usage, Sizes, States

#### UuidInput

A masked input for UUID values with automatic hyphen insertion and hex character validation.

**Sections:** Auto-formatting, Sizes, States

### Data Display

#### AutoColorBadge

A badge that derives a stable background color from its text content. The text is hashed to produce deterministic HSL values, with automatic black/white text for contrast.

**Props** (`AutoColorBadgeOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size of the badge affecting padding and font. *(reactive)* |
| roundedness | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'none' \| 'full' | full | Border radius of the badge. *(reactive)* |
| text | string | — | Explicit text to use for color derivation instead of the DOM text content. When provided, the MutationObserver is skippe *(reactive)* |

**Sections:** Automatic Color from Text, Sizes, Warm Hues, Cool Hues, Pastel Colors, Vivid Colors, Reactive HSL Ranges, Dynamic Tag List

#### AvatarGroup

Arranges multiple avatars in a row with overlapping or spaced layout and an overflow indicator.

**Props** (`AvatarGroupOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' | md | Size of avatars in the group. *(reactive)* |
| spacing | 'tight' \| 'normal' | tight | Spacing between avatars: 'tight' for overlap, 'normal' for standard gap. *(reactive)* |

**Sections:** Tight Spacing (Overlapping), Normal Spacing, Sizes, Overflow Indicator Colors, With Icon Avatars

#### Avatar

Displays a user avatar with image, initials, or icon fallback.

**Props** (`AvatarOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| src | string | undefined | Image URL for the avatar. *(reactive)* |
| name | string | undefined | Name for generating initials fallback. *(reactive)* |
| icon | string | undefined | Icon name (Iconify format) as a fallback. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' | md | Size of the avatar. *(reactive)* |
| variant | 'circle' \| 'square' | circle | Shape variant: circle or square. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | base | Theme color for the avatar background. *(reactive)* |
| bordered | boolean | false | Whether to add a border around the avatar. *(reactive)* |
| borderColor | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | — | Theme color for the avatar border. Implies bordered when set. *(reactive)* |

**Sections:** Initials Fallback, Sizes, Variants, Bordered, Icon Fallback, AvatarGroup

#### Badge

Small label for status indicators, counts, or categories. Supports removable badges with a close button.

**Props** (`BadgeOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | 'light' \| 'filled' \| 'outline' \| 'dashed' \| 'default' \| 'subtle' \| 'text' | filled | Visual style variant matching button variants. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size of the badge affecting padding and font. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | base | Theme color for the badge background and text. *(reactive)* |
| roundedness | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'none' \| 'full' | full | Border radius of the badge. *(reactive)* |
| circle | boolean | false | Whether to render as a circle (equal width and height). *(reactive)* |
| fullWidth | boolean | false | Whether the badge takes the full width of its container. *(reactive)* |
| disabled | boolean | false | Whether the badge is disabled. *(reactive)* |

**Sections:** Circle Badges, With Icons, Removable Sizes, Removable Badges, Disabled

#### CodeHighlight

Syntax-highlighted code block powered by Shiki. Ships as a separate entry point to keep the core bundle small.

**Props** (`CodeHighlightOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| code | string | required | The source code to highlight. *(reactive)* |
| language | string | — | The language identifier (e.g., 'typescript', 'css', 'json'). *(reactive)* |
| lightTheme | 'red' \| 'andromeeda' \| 'aurora-x' \| 'ayu-dark' \| 'ayu-light' \| 'ayu-mirage' \| 'catppuccin-frappe' \| 'catppuccin-latte' \| 'catppuccin-macchiato' \| 'catppuccin-mocha' \| 'dark-plus' \| 'dracula' \| 'dracula-soft' \| 'everforest-dark' \| 'everforest-light' \| 'github-dark' \| 'github-dark-default' \| 'github-dark-dimmed' \| 'github-dark-high-contrast' \| 'github-light' \| 'github-light-default' \| 'github-light-high-contrast' \| 'gruvbox-dark-hard' \| 'gruvbox-dark-medium' \| 'gruvbox-dark-soft' \| 'gruvbox-light-hard' \| 'gruvbox-light-medium' \| 'gruvbox-light-soft' \| 'horizon' \| 'horizon-bright' \| 'houston' \| 'kanagawa-dragon' \| 'kanagawa-lotus' \| 'kanagawa-wave' \| 'laserwave' \| 'light-plus' \| 'material-theme' \| 'material-theme-darker' \| 'material-theme-lighter' \| 'material-theme-ocean' \| 'material-theme-palenight' \| 'min-dark' \| 'min-light' \| 'monokai' \| 'night-owl' \| 'night-owl-light' \| 'nord' \| 'one-dark-pro' \| 'one-light' \| 'plastic' \| 'poimandres' \| 'rose-pine' \| 'rose-pine-dawn' \| 'rose-pine-moon' \| 'slack-dark' \| 'slack-ochin' \| 'snazzy-light' \| 'solarized-dark' \| 'solarized-light' \| 'synthwave-84' \| 'tokyo-night' \| 'vesper' \| 'vitesse-black' \| 'vitesse-dark' \| 'vitesse-light' | github-light | Light-mode Shiki theme. |
| darkTheme | 'red' \| 'andromeeda' \| 'aurora-x' \| 'ayu-dark' \| 'ayu-light' \| 'ayu-mirage' \| 'catppuccin-frappe' \| 'catppuccin-latte' \| 'catppuccin-macchiato' \| 'catppuccin-mocha' \| 'dark-plus' \| 'dracula' \| 'dracula-soft' \| 'everforest-dark' \| 'everforest-light' \| 'github-dark' \| 'github-dark-default' \| 'github-dark-dimmed' \| 'github-dark-high-contrast' \| 'github-light' \| 'github-light-default' \| 'github-light-high-contrast' \| 'gruvbox-dark-hard' \| 'gruvbox-dark-medium' \| 'gruvbox-dark-soft' \| 'gruvbox-light-hard' \| 'gruvbox-light-medium' \| 'gruvbox-light-soft' \| 'horizon' \| 'horizon-bright' \| 'houston' \| 'kanagawa-dragon' \| 'kanagawa-lotus' \| 'kanagawa-wave' \| 'laserwave' \| 'light-plus' \| 'material-theme' \| 'material-theme-darker' \| 'material-theme-lighter' \| 'material-theme-ocean' \| 'material-theme-palenight' \| 'min-dark' \| 'min-light' \| 'monokai' \| 'night-owl' \| 'night-owl-light' \| 'nord' \| 'one-dark-pro' \| 'one-light' \| 'plastic' \| 'poimandres' \| 'rose-pine' \| 'rose-pine-dawn' \| 'rose-pine-moon' \| 'slack-dark' \| 'slack-ochin' \| 'snazzy-light' \| 'solarized-dark' \| 'solarized-light' \| 'synthwave-84' \| 'tokyo-night' \| 'vesper' \| 'vitesse-black' \| 'vitesse-dark' \| 'vitesse-light' | github-dark | Dark-mode Shiki theme. |

**Sections:** Import, Languages, Reactive Code, Dark Mode

#### Icon

Renders an SVG icon from the Iconify library with lazy loading, caching, and theme color support.

**Props** (`IconOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| icon | string | required | Icon name in Iconify format (e.g., `'mdi:home'`, `'line-md:loading-twotone-loop'`). *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size of the icon. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | — | Theme color applied to the icon. Uses foreground color values. *(reactive)* |
| title | string | — | Accessible title for informative icons. Also sets the tooltip. *(reactive)* |
| accessibility | 'decorative' \| 'informative' \| 'auto' | auto | Accessibility mode for the icon. - `'decorative'`: Hidden from screen readers with `aria-hidden="true"` - `'informative' *(reactive)* |
| tone | 'solid' \| 'soft' | solid | Foreground color tone: `'solid'` for vibrant or `'soft'` for muted. *(reactive)* |

**Sections:** Sizes, Theme Colors, Icon Sources, Informative Icons

#### Indicator

Overlays a small dot or count badge on any child content. Useful for notification icons, unread counts, and status indicators.

**Props** (`IndicatorOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| show | boolean | true | Whether to show the indicator. *(reactive)* |
| count | number | — | Count to display. When > 0, shows a count badge instead of a dot. *(reactive)* |
| maxCount | number | 9 | Maximum count before showing "N+". *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | danger | Theme color of the indicator. *(reactive)* |
| placement | 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' | top-right | Position of the indicator. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | sm | Size of the indicator. *(reactive)* |

**Sections:** Dot Indicator, Count Badge, Max Count, On Avatars, Placements, Colors, Hidden

#### Kbd

A styled keyboard key indicator for displaying keyboard shortcuts with a 3D pressed appearance.

**Props** (`KbdOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| size | 'xs' \| 'sm' \| 'md' | sm | Size of the keyboard key element. *(reactive)* |

**Sections:** Common Keys, Shortcut Combinations, Sizes, In Context

#### Label

Inline text labels with semantic styling variants for emphasis, muted, and danger states.

**Sections:** Variants, Inline Usage

#### Ribbon

A diagonal corner ribbon for labeling cards or containers with status tags like "New", "Sale", or "Featured".

**Props** (`RibbonOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' \| 'transparent' | primary | Theme color applied to the ribbon background and text. Accepts any named theme color or an extended color value. *(reactive)* |
| class | string | — | Additional CSS class names to apply to the ribbon element. *(reactive)* |
| angle | number | 45 | Rotation angle of the ribbon in degrees. *(reactive)* |
| corner | 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' | top-end | Corner of the parent container where the ribbon is positioned. *(reactive)* |

**Sections:** Colors, Corner Positions, Angle Variations, On a Card

#### StatCard

A dashboard metric display with composable value, label, trend indicator, icon, and sparkline sections.

**Props** (`StatCardOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | 'default' \| 'elevated' \| 'outlined' | default | Visual style variant. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Controls internal padding. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color accent. *(reactive)* |

**Sections:** Basic, With Trend, With Icon, Variants, Sizes, With Sparkline Slot, Interactive Trend

### Files

#### Base64Input

A single-file upload input that stores the file as a base64 string. Supports drag-and-drop, file type filtering, and size limits.

**Props** (`Base64InputOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| value | string | required | The current value of the input (can be static or reactive signal) *(reactive)* |
| accept | string | — | Comma-separated list of accepted MIME types or file extensions. *(reactive)* |
| maxFileSize | number | — | Maximum allowed file size in bytes. *(reactive)* |
| mode | 'default' \| 'input' \| 'compact' | default | Display mode for the file input. *(reactive)* |
| showFileList | boolean | true | Whether to show the selected file in a list below the drop zone. *(reactive)* |

**Sections:** File Upload, Accept Filter, Max File Size, States

#### FileInput

A drag-and-drop file input with click-to-select support, file type filtering, size limits, and multiple display modes.

**Props** (`FileInputOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| accept | string | — | Comma-separated list of accepted MIME types or file extensions (e.g., `'image/*,.pdf'`). *(reactive)* |
| maxFileSize | number | — | Maximum allowed file size in bytes. Files exceeding this size are rejected. *(reactive)* |
| mode | 'default' \| 'input' \| 'compact' | default | Display mode for the file input. *(reactive)* |
| showFileList | boolean | true | Whether to show the selected file in a list below the drop zone. *(reactive)* |

**Sections:** Default Mode, Compact Mode, Input Mode, File Type Filtering, Max File Size, Multiple Files (FilesInput), States

#### ListInput

A dynamic list component for managing ordered arrays. Each item receives actions for removal and reordering (up, down, first, last).

**Sections:** Add & Remove Items, With Separator

#### PageDropZone

A full-page drag-and-drop file zone that listens for file drag events anywhere on the document, showing an overlay while dragging and providing programmatic file picker access.

**Props** (`PageDropZoneOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| accept | string | *\/* | MIME type filter for accepted files (e.g., `'image/*'`, `'application/pdf'`). Files that do not match are filtered out a *(reactive)* |
| disabled | boolean | false | Whether the drop zone is disabled. Disabled zones ignore all drag events. *(reactive)* |

**Sections:** Basic Drop Zone, MIME Type Filtering, Drag Overlay

### Navigation

#### Breadcrumbs

Hierarchical navigation trail showing the current page location within a site structure.

**Props** (`BreadcrumbsOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| separator | string | › | Separator character or string displayed between items. *(reactive)* |
| maxItems | number | undefined | Maximum number of items to display. When exceeded, middle items are collapsed into an ellipsis ("..."). *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size of the breadcrumb text and icons. *(reactive)* |

**Sections:** Sizes, Custom Separator, With Icons, Collapsed (maxItems), With Click Handlers

#### Link

A themed navigation link with support for variants, colors, disabled state, and client-side routing.

**Props** (`LinkOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| href | string | required | The URL or path that the link navigates to. *(reactive)* |
| variant | 'default' \| 'hover' \| 'plain' | default | Visual style variant controlling underline behavior. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color applied to the link text and hover state. *(reactive)* |
| colorDisabled | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | base | Theme color applied to the link text when disabled. *(reactive)* |
| disabled | boolean | false | Whether the link is disabled. When `true`, the link renders as a non-interactive `<span>` element instead of an anchor. *(reactive)* |
| viewTransition | boolean | true | Whether to use the View Transitions API for navigation animations. |
| scroll | 'auto' \| 'preserve' | — | Scroll behavior after navigation (e.g., scroll to top or preserve position). |
| replace | boolean | — | Whether to replace the current history entry instead of pushing a new one. |
| target | string | — | Target attribute for the anchor element (e.g., `'_blank'` for new tab). *(reactive)* |
| rel | string | — | Relationship attribute for the anchor element (e.g., `'noopener noreferrer'`). *(reactive)* |

**Sections:** Variants, Colors, Disabled State, External Link

#### NavigationLink

A styled navigation link that automatically detects the active route and disables itself when the current URL matches.

**Props** (`NavigationLinkOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| matchMode | 'prefix' \| 'exact' \| 'params' | — | How to match the current URL against the link's href - 'exact': URL must match exactly (default) - 'prefix': Current URL |
| disableWhenActive | boolean | true | Whether to disable the link when it matches the current location *(reactive)* |
| replace | boolean | — | Whether to replace the current history entry instead of pushing a new one. |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color applied to the link text and hover state. *(reactive)* |
| scroll | 'auto' \| 'preserve' | — | Scroll behavior after navigation (e.g., scroll to top or preserve position). |
| href | string | required | The URL or path that the link navigates to. *(reactive)* |
| variant | 'default' \| 'hover' \| 'plain' | default | Visual style variant controlling underline behavior. *(reactive)* |
| colorDisabled | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | base | Theme color applied to the link text when disabled. *(reactive)* |
| viewTransition | boolean | true | Whether to use the View Transitions API for navigation animations. |
| target | string | — | Target attribute for the anchor element (e.g., `'_blank'` for new tab). *(reactive)* |
| rel | string | — | Relationship attribute for the anchor element (e.g., `'noopener noreferrer'`). *(reactive)* |

**Sections:** Basic Navigation Links, Variants, Colors, Match Modes, Keep Active Links Enabled, In a Nav Bar

#### NavigationProgress

A thin progress bar fixed to the top or bottom of the viewport, indicating navigation or loading progress. Inspired by NProgress.

**Props** (`NavigationProgressOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color for the progress bar fill. *(reactive)* |
| height | number | 3 | Height of the progress bar in pixels. *(reactive)* |
| position | 'top' \| 'bottom' | top | Position of the bar in the viewport. *(reactive)* |
| showSpinner | boolean | false | Whether to show a spinner indicator alongside the bar. *(reactive)* |
| trickleSpeed | number | 200 | Trickle speed in milliseconds (interval for auto-increment). *(reactive)* |
| minimumDuration | number | 300 | Minimum display duration in milliseconds to prevent flash. *(reactive)* |
| animationSpeed | number | 200 | Animation speed for CSS transitions in milliseconds. *(reactive)* |

**Sections:** Basic Start / Done, Manual Progress Control, Trickle Speed, Custom Styling, Spinner Indicator

#### Pagination

Page navigation control for moving through multi-page content, with configurable sibling pages, first/last buttons, visual variants, and responsive layout.

**Props** (`PaginationOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| currentPage | number | required | Current page number (1-indexed). *(reactive)* |
| totalPages | number | required | Total number of pages available. *(reactive)* |
| siblings | number | 1 | Number of page siblings to show around the current page. *(reactive)* |
| showPrevNext | boolean | true | Whether to show Previous/Next navigation buttons. *(reactive)* |
| showFirstLast | boolean | false | Whether to show First/Last page buttons. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size affecting button dimensions and font size. *(reactive)* |
| variant | 'light' \| 'filled' \| 'outline' \| 'subtle' \| 'pill' | filled | Visual style variant for the pagination items. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color for the active page indicator. *(reactive)* |
| justify | boolean | false | Whether to distribute items across the full available width. *(reactive)* |
| responsive | boolean | false | Whether to dynamically adjust the number of visible page numbers to fit available space. *(reactive)* |

**Sections:** Variants, Colors, Variants with Color, Sizes, With First and Last Buttons, More Sibling Pages, Justified Layout

#### Sidebar

Vertical navigation panel with grouped links, collapsible sections, and support for light and dark background modes.

**Props** (`SidebarOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| backgroundMode | 'light' \| 'dark' | light | Background mode controlling the sidebar's visual appearance. When set to `'dark'`, the sidebar applies a dark background *(reactive)* |

**Sections:** Basic Sidebar, With Group Headers, Collapsible Groups, Dark Background Mode, SidebarLink with Action Button, SidebarSeparator, With Right Badge

#### Stepper

A multi-step workflow indicator with content panels, navigation buttons, and programmatic control via createStepper.

**Props** (`StepperOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | number | — | The active step index (0-based). *(reactive)* |
| orientation | 'horizontal' \| 'vertical' | horizontal | Layout orientation. *(reactive)* |
| variant | 'default' \| 'compact' | default | Visual variant. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size of the stepper. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color for active/completed steps. *(reactive)* |
| disabled | boolean | false | Whether the stepper is disabled. *(reactive)* |
| showNavigation | boolean | false | Whether to show navigation buttons. *(reactive)* |

**Sections:** Basic, With Descriptions, Vertical, Programmatic Control, Compact, Sizes, Colors

#### Tabs

Tabbed navigation for switching between content panels.

**Props** (`TabsOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size of the tabs. *(reactive)* |
| variant | 'filled' \| 'outline' \| 'default' \| 'pill' \| 'underline' | default | Visual variant. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Color used by certain variants (e.g., filled). *(reactive)* |
| disabled | boolean | false | Whether tabs are disabled. *(reactive)* |
| orientation | 'horizontal' \| 'vertical' | horizontal | Orientation of the tabs. *(reactive)* |
| showContent | boolean | true | Whether to show tab content. *(reactive)* |
| ariaLabel | string | — | ARIA label for the tab list *(reactive)* |

**Sections:** Variants, Sizes, Vertical, With Disabled Tab

#### Toolbar

Horizontal toolbar container with roving tabindex keyboard navigation, grouping, dividers, and spacers.

**Props** (`ToolbarOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| ariaLabel | string | — | Accessible label for the toolbar (`aria-label`). Provides a descriptive label for screen readers. *(reactive)* |

**Sections:** Basic Toolbar, With Groups and Dividers, With Spacer and Action Button, Text Labels

### Buttons

#### ButtonLink

A navigation link styled as a button, combining the visual appearance of a button with anchor semantics.

**Props** (`ButtonLinkOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| href | string | required | — *(reactive)* |
| viewTransition | boolean | — | — |
| scroll | 'auto' \| 'preserve' | — | — |
| replace | boolean | — | — |
| target | string | — | — *(reactive)* |
| rel | string | — | — *(reactive)* |
| matchMode | 'prefix' \| 'exact' \| 'params' | — | — |
| disableWhenActive | boolean | — | — *(reactive)* |
| variant | 'light' \| 'filled' \| 'outline' \| 'dashed' \| 'default' \| 'subtle' \| 'text' | — | — *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | — | — *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | — | — *(reactive)* |
| roundedness | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'none' \| 'full' | — | — *(reactive)* |
| disabled | boolean | — | — *(reactive)* |
| fullWidth | boolean | — | — *(reactive)* |
| loading | boolean | — | — *(reactive)* |

**Sections:** Variants, Colors, Sizes, With Icon, Disabled State, Full Width

#### Button

A clickable button with multiple variants, sizes, colors, and states.

**Props** (`ButtonOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| type | 'submit' \| 'reset' \| 'button' | button | The HTML button type attribute. *(reactive)* |
| disabled | boolean | false | Whether the button is disabled and non-interactive. *(reactive)* |
| loading | boolean | false | Whether to show a loading spinner and disable interaction. *(reactive)* |
| variant | 'light' \| 'filled' \| 'outline' \| 'dashed' \| 'default' \| 'subtle' \| 'text' | filled | Visual style variant controlling background, text, and border colors. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size affecting padding, font size, and icon dimensions. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | base | Theme color for the button's color scheme. *(reactive)* |
| roundedness | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'none' \| 'full' | sm | Border radius preset. *(reactive)* |
| fullWidth | boolean | false | Whether the button takes the full width of its container. *(reactive)* |
| stopPropagation | boolean | true | Whether to stop event propagation on click. When true (default), prevents the click event from bubbling up. Set to false |

**Sections:** With Icons, Loading State, Full Width

#### CloseButton

A small icon-only button for dismissing modals, drawers, notifications, and tags. Fully accessible with ARIA labeling.

**Props** (`CloseButtonOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | sm | Size of the close button icon and hit target. *(reactive)* |
| icon | string | line-md:close | Icon name from Iconify. *(reactive)* |
| disabled | boolean | — | Whether the button is disabled. *(reactive)* |
| roundedness | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'none' \| 'full' | full | Border radius of the button. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | base | Theme color for the icon. *(reactive)* |
| label | string | — | Localized label for screen readers. Defaults to the i18n `closeModal` translation. *(reactive)* |

**Sections:** Sizes, Colors, Custom Icon, Roundedness, Disabled State, Common Use: Dismissible Card

#### CopyButton

A button that copies text to the clipboard with visual feedback. Shows a checkmark icon briefly after a successful copy.

**Props** (`CopyButtonOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| text | string | Hello World!' | The text to copy to clipboard when clicked. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | sm | Size of the button. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | base | Theme color. *(reactive)* |
| variant | 'light' \| 'filled' \| 'outline' \| 'dashed' \| 'default' \| 'subtle' \| 'text' | subtle | Visual variant. *(reactive)* |
| roundedness | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'none' \| 'full' | sm | Border radius. *(reactive)* |
| disabled | boolean | false | Whether the button is disabled. *(reactive)* |
| timeout | number | 2000 | Duration in ms to show the "copied" state before resetting. *(reactive)* |

**Sections:** Basic, With Label, Interactive, Variants, Sizes

#### ToggleButtonGroup

A group of connected toggle buttons supporting single or multiple selection with shared borders and coordinated styling.

**Props** (`ToggleButtonGroupOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| multiple | boolean | false | Whether multiple items can be selected simultaneously. When false, selecting an item deselects all others. *(reactive)* |
| disabled | boolean | false | Whether the entire group is disabled. *(reactive)* |
| variant | 'light' \| 'filled' \| 'outline' \| 'dashed' \| 'default' \| 'subtle' \| 'text' | outline | Visual style variant applied to all buttons. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size affecting padding, font size, and dimensions. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color for pressed buttons. *(reactive)* |
| roundedness | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'none' \| 'full' | sm | Border radius preset for the group's outer corners. *(reactive)* |
| orientation | 'horizontal' \| 'vertical' | horizontal | Layout orientation of the button group. *(reactive)* |

**Sections:** Single Selection, Multiple Selection, Icon Buttons, Sizes, Variants, Colors, Vertical Orientation, Disabled State

#### ToggleButton

A button that toggles between pressed and unpressed states with full variant and color support.

**Props** (`ToggleButtonOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| pressed | boolean | required | Whether the button is currently pressed/active. *(reactive)* |
| disabled | boolean | false | Whether the button is disabled. *(reactive)* |
| variant | 'light' \| 'filled' \| 'outline' \| 'dashed' \| 'default' \| 'subtle' \| 'text' | outline | Visual style variant. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size affecting padding, font size, and icon dimensions. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color for the pressed state. *(reactive)* |
| roundedness | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'none' \| 'full' | sm | Border radius preset. *(reactive)* |
| fullWidth | boolean | false | Whether the button takes the full width of its container. *(reactive)* |

**Sections:** Colors, Sizes, Variants, Disabled

### Media

#### Carousel

A fully-featured carousel for cycling through slide content with auto-play, drag, swipe, and keyboard navigation.

**Props** (`CarouselOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| currentIndex | number | 0 | Index of the currently active slide. *(reactive)* |
| autoPlay | boolean | false | Enable auto-play rotation. *(reactive)* |
| interval | number | 3000 | Auto-play interval in milliseconds. *(reactive)* |
| loop | boolean | false | Whether to loop infinitely. *(reactive)* |
| slidesPerView | number | 1 | Number of slides visible at once. *(reactive)* |
| transition | 'slide' \| 'fade' | slide | Transition effect. *(reactive)* |
| transitionDuration | number | 300 | Transition duration in milliseconds. *(reactive)* |
| showArrows | boolean | true | Show navigation arrows. *(reactive)* |
| pauseOnHover | boolean | true | Pause auto-play on hover. *(reactive)* |
| keyboard | boolean | true | Enable keyboard navigation. *(reactive)* |
| ariaLabel | string | Carousel | Accessible label for the carousel. *(reactive)* |
| gap | string | 0px | Gap between slides (CSS units, e.g. '16px', '1rem'). *(reactive)* |
| peekAmount | string | 0px | Amount of next/prev slide to peek (CSS units, e.g. '40px', '10%'). *(reactive)* |
| align | 'center' \| 'start' \| 'end' | start | Slide alignment. *(reactive)* |
| easing | string | cubic-bezier(0.2, 0, 0, 1) | CSS timing function for transitions. *(reactive)* |
| indicator | 'none' \| 'dots' \| 'progress' \| 'fraction' | dots | Indicator type. *(reactive)* |
| dragThreshold | number | 50 | Pixel threshold for mouse drag navigation. *(reactive)* |
| prevIcon | string | lucide:chevron-left | Iconify icon name for the previous arrow. *(reactive)* |
| nextIcon | string | lucide:chevron-right | Iconify icon name for the next arrow. *(reactive)* |
| arrowIconSize | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size of the arrow icons. *(reactive)* |

**Sections:** Basic Usage, Auto-Play, Gap & Peek, Multiple Slides Per View, Indicator Types, Controller API, Slide Change Callback

#### PdfPageViewer

A PDF.js-powered page viewer with fit modes, rotation, text selection layer, and annotation support. Renders a single page at a time.

**Props** (`PdfPageViewerOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| page | number | 1 | Page number to display (1-based) *(reactive)* |
| fit | 'none' \| 'width' \| 'height' \| 'contain' \| 'cover' | width | How the PDF should fit in the available space: - 'none': Use explicit scale value (see scale option) - 'width': Fit to c *(reactive)* |
| scale | number | 1 | Explicit scale factor when fit='none' Ignored when fit is not 'none' *(reactive)* |
| quality | number | 2 | Rendering quality/pixel density multiplier Higher values produce sharper images but use more memory *(reactive)* |

**Sections:** Fit Modes, Page Navigation, Rotation

#### NativePdfPreview

Renders a PDF using the browser native viewer via an iframe. Accepts a URL string, Blob, ArrayBuffer, or Uint8Array and manages blob URL lifecycle automatically.

**Props** (`NativePdfPreviewOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| toolbar | boolean | — | Show/hide toolbar (Chrome only). Default: true *(reactive)* |
| page | number | — | Initial page number to display (Chrome, Firefox, Safari) *(reactive)* |
| zoom | number | — | Zoom level in percentage (Chrome, Firefox). Example: 150 for 150% *(reactive)* |
| view | 'FitV' \| 'FitH' \| 'Fit' | — | Zoom fit mode (Chrome only). FitV=vertical, FitH=horizontal, Fit=both *(reactive)* |
| pagemode | 'none' \| 'thumbs' \| 'bookmarks' \| 'attachments' \| 'full-screen' \| 'optionalcontent' | — | Page mode (Chrome only). none=normal, thumbs=thumbnail, bookmarks=bookmarks *(reactive)* |
| scrollbar | boolean | — | Show/hide scrollbar (Chrome only). Default: true *(reactive)* |
| navpanes | boolean | — | Show/hide navigation panes (Chrome only). Default: true *(reactive)* |
| search | string | — | Search term (Chrome only) *(reactive)* |
| nameddest | string | — | Named destination (Chrome only) *(reactive)* |
| viewrect | string | — | View rectangle (Chrome only) *(reactive)* |
| highlight | string | — | Highlight search term (Chrome only) *(reactive)* |
| allowfullscreen | boolean | — | Allow fullscreen (Chrome only). Default: true *(reactive)* |

**Sections:** URL String, Without Toolbar, Jump to Page, PDFJSPreview, PDFJSPreview Options, Blob / ArrayBuffer Input

#### BaseVideoPlayer

A unified video player supporting HTML5 video files, HLS streams, and YouTube URLs. Provides a consistent API across providers with reactive controls and playback callbacks.

**Props** (`BaseVideoPlayerOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| url | string | required | — *(reactive)* |
| playing | boolean | — | — *(reactive)* |
| loop | boolean | — | — *(reactive)* |
| controls | boolean | — | — *(reactive)* |
| volume | number | — | — *(reactive)* |
| muted | boolean | — | — *(reactive)* |
| playbackRate | number | — | — *(reactive)* |
| pip | boolean | — | — *(reactive)* |
| playsinline | boolean | — | — *(reactive)* |
| progressInterval | number | — | — *(reactive)* |
| seekTo | number | — | — *(reactive)* |

**Sections:** HTML5 Video File, YouTube Embed, Reactive Controls, Callbacks

### Dropdowns

#### ColorSwatchInput

A color picker that renders a unique organic SVG blob swatch for each color. Supports alpha channel control and multiple color format outputs.

**Props** (`ColorSwatchInputOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| value | string | required | The current value of the input (can be static or reactive signal) *(reactive)* |
| displayValue | boolean | false | When true, renders the formatted color value text next to the blob preview. *(reactive)* |
| swatchSize | number | 32 | Size in pixels of the blob preview (square). *(reactive)* |
| withAlpha | boolean | false | Enable alpha channel support with a small opacity slider. *(reactive)* |
| colorTextFormat | 'hex' \| 'rgb' \| 'hsl' \| 'hwb' \| 'oklch' | rgb' for display, 'hex' for emitted values | Color space format for the displayed text label and emitted value. *(reactive)* |

**Sections:** Display Value, Color Formats, With Alpha Channel, Swatch Sizes (Pixels), States

#### ComboboxInput

A searchable combobox with async option loading, keyboard navigation, and custom option rendering.

**Sections:** Basic Usage, Custom Option Rendering, Debounce Delay, Disabled

#### Dropdown

A select dropdown with keyboard navigation, searchable filtering, grouped options, and rich content support.

**Sections:** Grouped Options, Searchable, Disabled, With Placeholder

#### LazyNativeSelect

A native select input that loads its options asynchronously. Shows a loading spinner while fetching, then renders the populated select once options are ready.

**Props** (`LazyNativeSelectOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| unselectedLabel | string | — | Label for the initial unselected/placeholder option. *(reactive)* |

**Sections:** Basic Async Loading, Reactive Request Signal, With Sizes, Disabled State, API Reference

#### LocaleSelector

A dropdown for selecting the application locale. Reads the current locale from the Locale provider and optionally updates it when the user makes a selection.

**Props** (`LocaleSelectorOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| updateLocale | boolean | true | Whether to automatically update the `Locale` provider when the selection changes. |

**Sections:** Basic Usage, With Many Locales, Reactive Locale List, In a Settings Card

#### Menu

A dropdown action menu with keyboard navigation, submenus, disabled items, and accessible ARIA markup. Placed as a child of the trigger element.

**Props** (`MenuOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| placement | 'top' \| 'top-start' \| 'top-end' \| 'right' \| 'right-start' \| 'right-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' | bottom-start | Placement of the menu relative to the trigger element. *(reactive)* |
| showDelay | number | 0 | Delay in milliseconds before showing the menu after trigger activation. *(reactive)* |
| hideDelay | number | 100 | Delay in milliseconds before hiding the menu after trigger deactivation. *(reactive)* |
| mainAxisOffset | number | 4 | Offset in pixels from the main axis. *(reactive)* |
| crossAxisOffset | number | 0 | Offset in pixels from the cross axis. *(reactive)* |
| closable | boolean | true | Whether the menu can be closed with the Escape key or by clicking outside. *(reactive)* |
| ariaLabel | string | — | Accessible label for the menu container (`aria-label`). *(reactive)* |
| ariaLabelledBy | string | — | ID of the element that labels the menu (`aria-labelledby`). *(reactive)* |

**Sections:** Basic Menu, With Icons and Shortcuts, With Separator and Disabled Items, With Submenu, Placements

#### MultiSelect

A fully-featured multi-select dropdown with search, keyboard navigation, async loading, and select/clear all actions.

**Props** (`MultiSelectOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| placeholder | string | — | Placeholder text shown when no values are selected.   Placeholder text displayed when the input is empty *(reactive)* |
| searchPlaceholder | string | — | Placeholder text for the search input inside the dropdown. *(reactive)* |
| loadDebounce | number | 300 | Debounce delay in ms for async loading. |
| maxSelection | number | — | Maximum number of values that can be selected. *(reactive)* |
| showActions | boolean | false | Whether to show "Select all" / "Clear all" action buttons. *(reactive)* |
| selectAllLabel | string | Select all | Label for the "Select all" action. *(reactive)* |
| clearAllLabel | string | Clear all | Label for the "Clear all" action. *(reactive)* |
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |

**Sections:** Basic Usage, Grouped Options, Async Loading, Max Selection Limit, Select All / Clear All, Custom Option Rendering, Disabled

#### NativeSelect

A native HTML select element with styled appearance, grouped options, and custom equality support.

**Props** (`NativeSelectOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| unselectedLabel | string | — | Label for the initial unselected/placeholder option. Defaults to the i18n "Select one" message. *(reactive)* |

**Sections:** Basic Usage, Grouped Options, Sizes, States

#### TagInput

A tag/chip input that lets users type and add multiple string values, with keyboard and backspace support.

**Props** (`TagInputOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| placeholder | string | — | Placeholder text when no tags and input is empty *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | — | Control size *(reactive)* |
| disabled | boolean | — | Whether the input is disabled *(reactive)* |
| maxTags | number | — | Maximum number of tags allowed *(reactive)* |
| hasError | boolean | — | Whether the input has an error *(reactive)* |

**Sections:** Sizes, Max Tags, Disabled, SelectTagsInput (predefined options), ComboboxTagsInput (searchable)

### Tables & Data

#### DataTable

A full-featured data table with sorting, filtering, row selection, pagination, and bulk actions. Each feature is opt-in and configurable per column.

**Props** (`DataTableOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| sortable | 'single' \| 'multi' | false | Enable sorting. Columns opt-in via `column.sortable`. - `false` — sorting disabled (default) - `true` or `'single'` — si *(reactive)* |
| filterable | 'header' \| 'row' | false | Enable filtering. Columns opt-in via `column.filter`. - `false` — filtering disabled (default) - `true` or `'header'` —  *(reactive)* |
| selectable | boolean | false | Enable row selection with checkboxes. - `false` — selection disabled (default) - `true` — selection enabled with default *(reactive)* |
| reorderableColumns | boolean | false | Enable drag-to-reorder columns. *(reactive)* |
| pagination | boolean | — | Pagination config. `true` uses defaults, `false`/undefined disables. *(reactive)* |
| toolbar | boolean | — | Toolbar config. `true` uses defaults, `false`/undefined disables. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size variant. *(reactive)* |
| hoverable | boolean | false | Enable hover effect on rows. *(reactive)* |
| stickyHeader | boolean | false | Make header sticky. *(reactive)* |
| fullWidth | boolean | false | Full width table. *(reactive)* |
| withStripedRows | boolean | false | Striped rows. *(reactive)* |
| withTableBorder | boolean | true | Table border. *(reactive)* |
| withColumnBorders | boolean | false | Column borders. *(reactive)* |
| withRowBorders | boolean | true | Row borders. *(reactive)* |
| serverSide | boolean | false | Skip client-side processing. *(reactive)* |
| totalRows | number | — | Total rows for server-side pagination *(reactive)* |
| loading | boolean | — | Loading state *(reactive)* |
| groupCollapsible | boolean | true | Whether groups are collapsible. |
| showFooter | boolean | false | Show footer row. Columns opt-in via `column.footer`. *(reactive)* |
| groupSummary | string | — | Custom render function for collapsed group summaries. *(reactive)* |
| emptyContent | string | — | Content to show when no rows match *(reactive)* |

**Sections:** Basic Table, Sortable Columns, With Filtering, Row Selection, Pagination, Striped Rows, Grouped Rows, Row Details (Collapsible), Row Details with Grouping & Selection, Row Details (Always Visible), Row Details (Conditional), Sticky Header, Sticky Header with Pagination, Date Range Filter (Custom render), Full Featured

#### HistoryTimeline

A chronological audit log timeline with filter chips, colored action labels, and optional restore actions.

**Sections:** Basic Timeline, With Restore Actions, Custom Filter Chips, Reactive Data

#### ProgressBar

A horizontal bar indicating progress or loading state.

**Props** (`ProgressBarOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | number | 50 | Current progress value (0 to max). *(reactive)* |
| max | number | 100 | Maximum value for the progress bar. *(reactive)* |
| size | 'sm' \| 'md' \| 'lg' | md | Visual size variant. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color for the progress fill. *(reactive)* |
| indeterminate | boolean | false | Whether to show indeterminate loading animation. *(reactive)* |
| showLabel | boolean | false | Whether to show percentage text label. *(reactive)* |
| roundedness | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'none' \| 'full' | full | Border radius preset for the progress bar. *(reactive)* |

**Sections:** Values, With Label, Indeterminate

#### QueryDataTable

A DataTable that loads data asynchronously. Wraps createQueryDataSource with DataTable so sort, filter, and selection state persist across reloads.

**Props** (`QueryDataTableOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size variant. *(reactive)* |
| fullWidth | boolean | false | Full width table. *(reactive)* |
| sortable | 'single' \| 'multi' | false | Enable sorting. Columns opt-in via `column.sortable`. - `false` — sorting disabled (default) - `true` or `'single'` — si *(reactive)* |
| filterable | 'header' \| 'row' | false | Enable filtering. Columns opt-in via `column.filter`. - `false` — filtering disabled (default) - `true` or `'header'` —  *(reactive)* |
| selectable | boolean | false | Enable row selection with checkboxes. - `false` — selection disabled (default) - `true` — selection enabled with default *(reactive)* |
| reorderableColumns | boolean | false | Enable drag-to-reorder columns. *(reactive)* |
| pagination | boolean | — | Pagination config. `true` uses defaults, `false`/undefined disables. *(reactive)* |
| toolbar | boolean | — | Toolbar config. `true` uses defaults, `false`/undefined disables. *(reactive)* |
| hoverable | boolean | false | Enable hover effect on rows. *(reactive)* |
| stickyHeader | boolean | false | Make header sticky. *(reactive)* |
| withStripedRows | boolean | false | Striped rows. *(reactive)* |
| withTableBorder | boolean | true | Table border. *(reactive)* |
| withColumnBorders | boolean | false | Column borders. *(reactive)* |
| withRowBorders | boolean | true | Row borders. *(reactive)* |
| serverSide | boolean | false | Skip client-side processing. *(reactive)* |
| totalRows | number | — | Total rows for server-side pagination *(reactive)* |
| groupCollapsible | boolean | true | Whether groups are collapsible. |
| showFooter | boolean | false | Show footer row. Columns opt-in via `column.footer`. *(reactive)* |
| groupSummary | string | — | Custom render function for collapsed group summaries. *(reactive)* |
| emptyContent | string | — | Content to show when no rows match *(reactive)* |
| errorContent | string | — | Custom error rendering. When provided, shown instead of default error UI. Only displayed when no data has been loaded ye *(reactive)* |

**Sections:** Basic Usage, With Sorting & Filtering, Custom Error Content, With Pagination, Headless Usage (createQueryDataSource)

#### Skeleton

Placeholder loading indicators for content that is still loading.

**Props** (`SkeletonOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | 'text' \| 'circle' \| 'rect' | text | Visual style variant for the skeleton shape. *(reactive)* |
| width | string | — | CSS width value (e.g., '100px', '50%'). Default is 100% for text/rect. *(reactive)* |
| height | string | — | CSS height value (e.g., '100px', '2rem'). Default varies by variant. *(reactive)* |
| lines | number | 1 | Number of text lines to render (only applies to text variant). *(reactive)* |
| animate | boolean | true | Whether to show the shimmer animation. *(reactive)* |
| roundedness | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'none' \| 'full' | sm | Border radius preset for the skeleton. *(reactive)* |

**Sections:** Variants, Card Placeholder, Without Animation

#### Table

A styled HTML table wrapper with configurable borders, striped rows, hover effects, and sticky headers.

**Props** (`TableOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Size of the table affecting cell padding and font size. *(reactive)* |
| hoverable | boolean | false | Enable background color change on row hover. *(reactive)* |
| stickyHeader | boolean | false | Make the header row sticky when scrolling vertically. *(reactive)* |
| fullWidth | boolean | false | Whether the table takes the full width of its container. *(reactive)* |
| withStripedRows | boolean | false | Alternate row background colors for improved readability. *(reactive)* |
| withTableBorder | boolean | true | Show a border around the entire table container. *(reactive)* |
| withColumnBorders | boolean | false | Show vertical borders between columns. *(reactive)* |
| withRowBorders | boolean | true | Show horizontal borders between rows. *(reactive)* |
| borderRadius | 'sm' \| 'md' \| 'lg' \| 'xl' \| 'none' | undefined | Border radius of the table container. *(reactive)* |

**Sections:** Striped Rows, Hoverable, Column Borders, No Border, Sticky Header, Sizes

#### TreeView

Hierarchical tree navigation with expand/collapse, icon support, badges, and both controlled and uncontrolled expansion modes.

**Props** (`TreeViewOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| selectedId | string | — | Currently selected item ID *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | — | Size of the tree items *(reactive)* |

**Sections:** Basic Tree, With Badges, Controlled Expansion, Sizes

#### VirtualList

A virtualized list that renders only visible items for high performance with large datasets (10,000+ items).

**Props** (`VirtualListOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| overscan | number | 5 | Number of extra items to render above and below the visible viewport. Larger values reduce the chance of blank flickers  *(reactive)* |
| class | string | — | Additional CSS class names to apply to the outer container element. *(reactive)* |

**Sections:** 10,000 Items (Fixed Height), Variable Item Heights, Reactive Items, Custom Overscan

### Pickers

#### DateInput

A native date input (type="date") that binds to a JavaScript Date object.

**Sections:** Basic Usage, Sizes, States

#### DatePicker

A date selection panel with month/year navigation. Uses Temporal PlainDate internally.

**Props** (`DatePickerOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color for selected and today highlights. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the date picker. *(reactive)* |
| disabled | boolean | false | Whether the date picker is disabled. *(reactive)* |
| weekStartsOn | number | 0 | The day the week starts on. 0 = Sunday, 1 = Monday, etc. *(reactive)* |

**Sections:** Basic DatePicker, Colors, Sizes, Week Starts On Monday, Disabled Dates, Disabled DatePicker, DateRangePicker

#### DateRangeSelect

A dropdown date range selector with a single calendar showing range highlighting. Both start and end dates are required.

**Props** (`DateRangeSelectOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color. *(reactive)* |
| weekStartsOn | number | 0 | The day the week starts on (0=Sun, 1=Mon). *(reactive)* |

**Sections:** Basic, Custom Format, Disabled, Sizes

#### DateSelect

A dropdown date selector that opens a calendar picker. The selected date is always required — use NullableDateSelect when null is allowed.

**Props** (`DateSelectOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color. *(reactive)* |
| weekStartsOn | number | 0 | The day the week starts on (0=Sun, 1=Mon). *(reactive)* |

**Sections:** Basic, Custom Format, Disabled, Sizes

#### DateTimeInput

A native datetime-local input that binds to a JavaScript Date object.

**Sections:** Basic Usage, Sizes, States

#### DateTimeSelect

A dropdown date-time selector combining a calendar picker and a time picker. The selected date-time is always required — use NullableDateTimeSelect when null is allowed.

**Props** (`DateTimeSelectOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color. *(reactive)* |
| weekStartsOn | number | 0 | The day the week starts on (0=Sun, 1=Mon). *(reactive)* |
| showSeconds | boolean | false | Whether to show seconds in the time picker. *(reactive)* |
| use12Hour | boolean | — | Whether to use 12-hour format. When omitted, auto-detected from locale. *(reactive)* |
| minuteStep | number | 1 | Step for minutes column. *(reactive)* |
| secondStep | number | 1 | Step for seconds column. *(reactive)* |
| showNow | boolean | false | Whether to show a "Now" button in the time picker. *(reactive)* |

**Sections:** Basic, With Seconds & Now, Nullable, Custom Format, Disabled, Sizes, In a Field

#### NullableDateSelect

A dropdown date selector where the value may be null. Includes a clear button to reset back to null. Use DateSelect when a date is always required.

**Props** (`NullableDateSelectOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color. *(reactive)* |
| weekStartsOn | number | 0 | The day the week starts on (0=Sun, 1=Mon). *(reactive)* |

**Sections:** Basic (starts null), Pre-selected date, Custom placeholder, Custom Format, Disabled, Sizes

#### OpenDateRangeSelect

A dropdown date range selector where either or both dates can be null, allowing open-ended ranges.

**Props** (`OpenDateRangeSelectOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color. *(reactive)* |
| weekStartsOn | number | 0 | The day the week starts on (0=Sun, 1=Mon). *(reactive)* |
| startLabel | string | i18n dateRangeStart | Label for the start picker. |
| endLabel | string | i18n dateRangeEnd | Label for the end picker. |
| emptyPlaceholder | string | i18n dateRangeNoLimit | Placeholder when no date is selected. |

**Sections:** Open Start, Open End, Both Open

#### Temporal Inputs

A family of native date/time inputs that bind to Temporal API types (PlainDate, PlainDateTime, PlainTime, PlainYearMonth, PlainMonthDay). Requires the Temporal polyfill.

**Sections:** PlainDateInput, PlainDateTimeInput, PlainTimeInput, PlainYearMonthInput, PlainMonthDayInput, Sizes

#### TimePicker

A time selection panel with scrollable hour and minute columns. Uses Temporal PlainTime internally.

**Props** (`TimePickerOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| showSeconds | boolean | false | Whether to show the seconds column. *(reactive)* |
| use12Hour | boolean | — | Whether the picker uses 12-hour format with AM/PM. When omitted, auto-detected from the current locale. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color for the selected highlight. *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the time picker. *(reactive)* |
| disabled | boolean | false | Whether the time picker is disabled. *(reactive)* |
| minuteStep | number | 1 | Step for minutes column. *(reactive)* |
| secondStep | number | 1 | Step for seconds column. *(reactive)* |
| showNow | boolean | false | Whether to show a "Now" button that sets the time to the current local time. *(reactive)* |

**Sections:** Basic, With Seconds, With Now Button, Minute Step, Disabled, Sizes, Null Value

#### TimeSelect

A dropdown time selector that opens a time picker panel. The selected time is always required — use NullableTimeSelect when null is allowed.

**Props** (`TimeSelectOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autocomplete | string | — | HTML autocomplete attribute for browser autofill suggestions *(reactive)* |
| autofocus | boolean | — | Whether the input should automatically receive focus when mounted *(reactive)* |
| class | string | — | Additional CSS classes to apply to the input container root element *(reactive)* |
| disabled | boolean | — | Whether the input is disabled and cannot be interacted with *(reactive)* |
| hasError | boolean | — | Whether the input has a validation error (applies error styling) *(reactive)* |
| name | string | — | HTML name attribute, used for form submission *(reactive)* |
| placeholder | string | — | Placeholder text displayed when the input is empty *(reactive)* |
| id | string | — | Unique HTML id attribute for the input element *(reactive)* |
| required | boolean | — | Whether the input is required for form validation *(reactive)* |
| tabIndex | number | — | Tab index for keyboard navigation order *(reactive)* |
| ariaLabel | string | — | Accessible label for the input (applied as aria-label) *(reactive)* |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md | Visual size of the control, aligned with Button sizes. *(reactive)* |
| color | 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'primary' \| 'secondary' \| 'base' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'black' \| 'white' | primary | Theme color. *(reactive)* |
| showSeconds | boolean | false | Whether to show seconds. *(reactive)* |
| use12Hour | boolean | — | Whether to use 12-hour format. When omitted, auto-detected from the current locale. *(reactive)* |
| minuteStep | number | 1 | Step for minutes column. *(reactive)* |
| secondStep | number | 1 | Step for seconds column. *(reactive)* |
| showNow | boolean | false | Whether to show a "Now" button. *(reactive)* |

**Sections:** Basic, Custom Format, With Seconds, With Now Button, Minute Step, Nullable, Disabled, Sizes, In a Field

### Formatting

#### FormatBigInt

Locale-aware bigint formatting component for arbitrarily large integers with decimal, currency, and unit styles.

**Props** (`FormatBigIntOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | bigint | 9007199254740993 | The bigint value to format. *(reactive)* |
| locale | string | undefined | BCP 47 locale override. If omitted, uses the Locale provider. *(reactive)* |
| style | 'unit' \| 'decimal' \| 'currency' | decimal | Formatting style. *(reactive)* |
| currency | string | undefined | ISO 4217 currency code (required when style is 'currency'). *(reactive)* |
| currencyDisplay | 'symbol' \| 'name' \| 'narrowSymbol' \| 'code' | symbol | How to display the currency. *(reactive)* |
| signDisplay | 'auto' \| 'never' \| 'always' \| 'exceptZero' | auto | Sign display mode. *(reactive)* |
| unit | string | undefined | Unit identifier (e.g., 'kilometer') for style 'unit'. *(reactive)* |
| unitDisplay | 'short' \| 'long' \| 'narrow' | short | Unit display mode. *(reactive)* |
| useGrouping | boolean | true | Use grouping separators. *(reactive)* |
| minimumIntegerDigits | number | undefined | Minimum integer digits. *(reactive)* |
| minimumFractionDigits | number | undefined | Minimum fraction digits. *(reactive)* |
| maximumFractionDigits | number | undefined | Maximum fraction digits. *(reactive)* |

**Sections:** Basic Formatting, Currency, Sign Display

#### FormatDateTime

Locale-aware combined date and time formatting component with independent dateStyle and timeStyle controls.

**Props** (`FormatDateTimeOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| locale | string | undefined | BCP 47 locale override. If omitted, uses the Locale provider. *(reactive)* |
| dateStyle | 'full' \| 'short' \| 'long' \| 'medium' | medium | Date portion style. *(reactive)* |
| timeStyle | 'full' \| 'short' \| 'long' \| 'medium' | short | Time portion style. *(reactive)* |
| timeZone | string | undefined (browser default) | Time zone. *(reactive)* |
| calendar | string | undefined | Calendar system. *(reactive)* |
| hour12 | boolean | undefined (locale default) | Whether to use 12-hour time. *(reactive)* |
| hourCycle | 'h11' \| 'h12' \| 'h23' \| 'h24' | undefined | Hour cycle override. *(reactive)* |

**Sections:** Style Combinations, Locale Comparison, 12/24-Hour Override

#### FormatDate

Locale-aware date formatting component with preset styles, fine-grained part selection, and support for Temporal types.

**Props** (`FormatDateOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| locale | string | undefined | BCP 47 locale override. If omitted, uses the Locale provider. *(reactive)* |
| dateStyle | 'full' \| 'short' \| 'long' \| 'medium' | medium | Date format preset. *(reactive)* |
| calendar | string | undefined | Calendar system (e.g., 'gregory', 'islamic', 'hebrew'). *(reactive)* |
| numberingSystem | string | undefined | Numbering system (e.g., 'arab', 'latn'). *(reactive)* |
| timeZone | string | undefined (browser default) | Time zone for date interpretation. *(reactive)* |
| weekday | 'short' \| 'long' \| 'narrow' | undefined | Weekday representation (mutually exclusive with dateStyle). *(reactive)* |
| year | 'numeric' \| '2-digit' | undefined | Year representation (mutually exclusive with dateStyle). *(reactive)* |
| month | 'numeric' \| 'short' \| 'long' \| 'narrow' \| '2-digit' | undefined | Month representation (mutually exclusive with dateStyle). *(reactive)* |
| day | 'numeric' \| '2-digit' | undefined | Day representation (mutually exclusive with dateStyle). *(reactive)* |
| era | 'short' \| 'long' \| 'narrow' | undefined | Era representation (mutually exclusive with dateStyle). *(reactive)* |

**Sections:** Preset Styles, Custom Part Selection, Locales Compared, ISO Strings and Timestamps

#### FormatDisplayName

Locale-aware display name component for translating language, region, currency, script, and calendar codes into human-readable names.

**Props** (`FormatDisplayNameOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | string | en-US | The code to look up (e.g., 'en-US', 'USD', 'Latn'). *(reactive)* |
| type | 'currency' \| 'language' \| 'region' \| 'script' \| 'calendar' \| 'dateTimeField' | language | The type of display name to resolve. *(reactive)* |
| locale | string | undefined | BCP 47 locale override. If omitted, uses the Locale provider. *(reactive)* |
| style | 'short' \| 'long' \| 'narrow' | long | Format verbosity. *(reactive)* |
| languageDisplay | 'standard' \| 'dialect' | dialect | Language display style (only for type 'language'). *(reactive)* |
| fallback | 'none' \| 'code' | code | Fallback behavior when code is not found. *(reactive)* |

**Sections:** Languages, Regions, Currencies and Scripts

#### FormatFileSize

Locale-aware file size formatting component that converts byte counts into human-readable strings like "1.5 MB".

**Props** (`FormatFileSizeOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| decimalPlaces | number | 0 | Number of decimal places to show for values above bytes. |
| locale | string | — | BCP 47 locale string for number formatting (e.g., `'en-US'`, `'de-DE'`). Uses the browser default locale if not specifie |

**Sections:** Common File Sizes, Decimal Places, Locale Number Formatting, Custom Unit Labels

#### FormatList

Locale-aware list formatting component that joins arrays into natural language strings with conjunction, disjunction, or unit semantics.

**Props** (`FormatListOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| locale | string | undefined | BCP 47 locale override. If omitted, uses the Locale provider. *(reactive)* |
| type | 'unit' \| 'conjunction' \| 'disjunction' | conjunction | List semantics. *(reactive)* |
| style | 'short' \| 'long' \| 'narrow' | long | Format verbosity. *(reactive)* |

**Sections:** Conjunction, Disjunction, Style Variants

#### FormatNumber

Locale-aware number formatting component supporting decimal, currency, percent, unit, and compact notation styles.

**Props** (`FormatNumberOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | number | 1234.56 | The number to format. *(reactive)* |
| locale | string | undefined | BCP 47 locale override. If omitted, uses the Locale provider. *(reactive)* |
| style | 'unit' \| 'decimal' \| 'currency' \| 'percent' | decimal | Formatting style. *(reactive)* |
| currency | string | undefined | ISO 4217 currency code (required when style is 'currency'). *(reactive)* |
| currencyDisplay | 'symbol' \| 'name' \| 'narrowSymbol' \| 'code' | symbol | How to display the currency. *(reactive)* |
| signDisplay | 'auto' \| 'never' \| 'always' \| 'exceptZero' | auto | Sign display mode. *(reactive)* |
| notation | 'compact' \| 'standard' \| 'scientific' \| 'engineering' | standard | Notation. *(reactive)* |
| compactDisplay | 'short' \| 'long' | undefined | Compact display mode (used when notation is 'compact'). *(reactive)* |
| unit | string | undefined | Unit identifier (e.g., 'kilometer', 'liter') for style 'unit'. *(reactive)* |
| unitDisplay | 'short' \| 'long' \| 'narrow' | short | Unit display mode. *(reactive)* |
| useGrouping | boolean | true | Use grouping separators (e.g., thousand commas). *(reactive)* |
| minimumIntegerDigits | number | undefined | Minimum integer digits. *(reactive)* |
| minimumFractionDigits | number | undefined | Minimum fraction digits. *(reactive)* |
| maximumFractionDigits | number | undefined | Maximum fraction digits. *(reactive)* |
| minimumSignificantDigits | number | undefined | Minimum significant digits. *(reactive)* |
| maximumSignificantDigits | number | undefined | Maximum significant digits. *(reactive)* |

**Sections:** Currency, Percent, Unit, Compact Notation

#### FormatPlural

Locale-aware plural formatting component that selects the correct grammatical form based on CLDR plural rules and interpolates {count}.

**Props** (`FormatPluralOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | number | 3 | The numeric value to determine plural category for. *(reactive)* |
| locale | string | undefined | BCP 47 locale override. If omitted, uses the Locale provider. *(reactive)* |
| type | 'cardinal' \| 'ordinal' | cardinal | Plural rule type. *(reactive)* |
| minimumIntegerDigits | number | undefined | Minimum integer digits. *(reactive)* |
| minimumFractionDigits | number | undefined | Minimum fraction digits. *(reactive)* |
| maximumFractionDigits | number | undefined | Maximum fraction digits. *(reactive)* |
| minimumSignificantDigits | number | undefined | Minimum significant digits. *(reactive)* |
| maximumSignificantDigits | number | undefined | Maximum significant digits. *(reactive)* |

**Sections:** Cardinal Plural, Ordinal Plural, Multi-Language Comparison

#### FormatRelativeTime

Locale-aware relative time formatting component producing expressions like "2 days ago" or "in 3 hours".

**Props** (`FormatRelativeTimeOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | number | -2 | Numeric offset (e.g., -2 for "2 days ago", 3 for "in 3 hours"). *(reactive)* |
| unit | 'year' \| 'quarter' \| 'month' \| 'week' \| 'day' \| 'hour' \| 'minute' \| 'second' | day | The unit for the relative time. *(reactive)* |
| locale | string | undefined | BCP 47 locale override. If omitted, uses the Locale provider. *(reactive)* |
| numeric | 'auto' \| 'always' | auto | Numeric display. *(reactive)* |
| style | 'short' \| 'long' \| 'narrow' | long | Format verbosity. *(reactive)* |

**Sections:** Past and Future, Numeric vs Auto, Style Variants

#### FormatTime

Locale-aware time formatting component with preset styles, 12/24-hour control, and timezone support.

**Props** (`FormatTimeOptions`):

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| locale | string | undefined | BCP 47 locale override. If omitted, uses the Locale provider. *(reactive)* |
| timeStyle | 'full' \| 'short' \| 'long' \| 'medium' | medium | Time format preset. *(reactive)* |
| timeZone | string | undefined (browser default) | Time zone. *(reactive)* |
| hour12 | boolean | undefined (locale default) | Whether to use 12-hour time. *(reactive)* |
| hourCycle | 'h11' \| 'h12' \| 'h23' \| 'h24' | undefined | Hour cycle override. *(reactive)* |
| hour | 'numeric' \| '2-digit' | undefined | Hour representation (mutually exclusive with timeStyle). *(reactive)* |
| minute | 'numeric' \| '2-digit' | undefined | Minute representation (mutually exclusive with timeStyle). *(reactive)* |
| second | 'numeric' \| '2-digit' | undefined | Second representation (mutually exclusive with timeStyle). *(reactive)* |
| timeZoneName | 'short' \| 'long' \| 'shortOffset' \| 'longOffset' \| 'shortGeneric' \| 'longGeneric' | undefined | Time zone name display style (mutually exclusive with timeStyle). *(reactive)* |
| dayPeriod | 'short' \| 'long' \| 'narrow' | undefined | Day period display (mutually exclusive with timeStyle). *(reactive)* |

**Sections:** Preset Styles, 12-Hour vs 24-Hour, Custom Parts

## API Reference

### Auth

- `AuthContainerLabels` (interface) — Customizable label overrides for the AuthContainer component.

All labels are optional reactive `Value<string>` values. When not provided,
the component falls back to the current locale's i18n transla
- `AuthContainerOptions` (interface) — Options for the AuthContainer component.

The AuthContainer is the main authentication UI that switches between
sign-in, sign-up, and reset-password modes. It coordinates social login
buttons, form fi
- `AuthDividerOptions` (interface) — Options for the AuthDivider component.
- `AuthValidationMessages` (interface) — Localizable validation messages for authentication schemas.

Pass this to schema factory functions to override the default English messages.
Obtain localized values from `AuthI18n` provider messages.
- `PasswordRules` (interface) — Password validation rules used by the sign-up form and password strength indicator.

Each rule is optional. When enabled, it adds a corresponding validation
check to the password schema and a requirem
- `PasswordStrengthIndicatorOptions` (interface) — Options for the PasswordStrengthIndicator component.

Displays a visual bar, label, and requirements checklist for password strength.
- `ProviderInfo` (interface) — Display information for a social authentication provider.

Contains the human-readable name, icon identifier, and theme color
used to render the provider's social login button.
- `ResetPasswordData` (interface) — Data submitted by the reset password form.
- `ResetPasswordFormLabels` (interface) — Customizable label overrides for the ResetPasswordForm component.
- `ResetPasswordFormOptions` (interface) — Options for the ResetPasswordForm component.
- `SignInData` (interface) — Data submitted by the sign-in form.
- `SignInFormLabels` (interface) — Customizable label overrides for the SignInForm component.
- `SignInFormOptions` (interface) — Options for the SignInForm component.
- `SignUpData` (interface) — Data submitted by the sign-up form (without confirm password).

This is the cleaned data passed to the `onSignUp` callback, after
the confirm password field has been validated and removed.
- `SignUpFormData` (interface) — Internal form data for the sign-up form, including the confirm password field.

Extends SignUpData with the `confirmPassword` field used for
client-side validation before submission.
- `SignUpFormLabels` (interface) — Customizable label overrides for the SignUpForm component.
- `SignUpFormOptions` (interface) — Options for the SignUpForm component.
- `SocialLoginButtonOptions` (interface) — Options for the SocialLoginButton component.

Renders a branded button for a specific social authentication provider.
- `SocialProviderConfig` (interface) — Configuration for a social login provider.
- `SocialProvidersOptions` (interface) — Options for the SocialProviders component, which renders a list of social login buttons.
- `AuthMode` (type) — The current mode of the authentication container.

Determines which form is displayed: sign-in, sign-up, or reset password.
- `AuthProviderInfo` (type) — Minimal provider configuration passed to social login components.

Contains the provider name and optional OAuth flow type.
- `AuthProviderName` (type) — Supported social authentication provider names.

Represents all OAuth/social login providers that BeatUI auth components
can render buttons for. Each provider name maps to display information
(icon, c
- `PasswordStrength` (type) — Password strength levels used by the password strength indicator.

Computed based on how many configured password rules are satisfied.
- `ResetPasswordFormData` (type) — Alias for ResetPasswordData, used as the form data type for the reset password form.
- `SignInFormData` (type) — Alias for SignInData, used as the form data type for the sign-in form.
- `SocialLoginFlow` (type) — The OAuth flow type for social login.

- `'redirect'` - Navigates the user to the provider's login page.
- `'popup'` - Opens the provider's login page in a popup window.
- `SpecialSocialLoginButtonOptions` (type) — Options type for specialized social login button variants.

Same as SocialLoginButtonOptions but with `provider`, `name`, `icon`, and `color`
pre-configured for the specific provider.
- `authSchemas` (variable) — Collection of schema factory functions for dynamic configuration.

Provides convenient access to all auth schema creators.
- `defaultPasswordRules` (variable) — Default password validation rules used across auth components.

Requires at least 8 characters, one uppercase letter, one lowercase letter,
and one number. Special characters are not required by defau
- `defaultSignInSchema` (variable) — Pre-built sign-in schema using default password rules.

Convenience constant equivalent to `createSignInSchema()`.
- `defaultSignUpSchema` (variable) — Pre-built sign-up schema using default password rules.

Convenience constant equivalent to `createSignUpSchema()`.
- `emailSchema` (variable) — Base email validation schema.

Validates that the value is a non-empty string with a valid email format.
- `providerInfo` (variable) — Mapping of every supported social provider name to its display metadata.

Contains the human-readable name, Iconify icon identifier, and hex brand color
for each AuthProviderName.
- `resetPasswordSchema` (variable) — Validation schema for the reset password form.

Validates that the email field is present and in a valid format.
- `socialProviderInfo` (variable) — Mapping of all supported social provider names to their display metadata.

Contains the human-readable name, Iconify icon identifier, and BeatUI theme
color name for each provider. Used internally by
- `AmazonLoginButton` (function)
- `AppleLoginButton` (function)
- `AuthContainer` (function)
- `AuthDivider` (function)
- `AuthModal` (function)
- `calculatePasswordStrength` (function)
- `createEmailSchema` (function)
- `createPasswordSchema` (function)
- `createSignInSchema` (function)
- `createSignUpSchema` (function)
- `createSocialLoginUrl` (function)
- `DiscordLoginButton` (function)
- `EpicLoginButton` (function)
- `FacebookLoginButton` (function)
- `formatAuthError` (function)
- `formatProviderName` (function)
- `formatSocialLoginText` (function)
- `generateRandomString` (function)
- `getProviderColor` (function)
- `getProviderIcon` (function)
- `GitHubLoginButton` (function)
- `GoogleLoginButton` (function)
- `InstagramLoginButton` (function)
- `isBrowser` (function)
- `isValidEmail` (function)
- `LinkedInLoginButton` (function)
- `MicrosoftLoginButton` (function)
- `openSocialLoginPopup` (function)
- `PasswordStrengthBar` (function)
- `PasswordStrengthIndicator` (function)
- `PasswordStrengthText` (function)
- `PayPalLoginButton` (function)
- `PinterestLoginButton` (function)
- `PlayStationLoginButton` (function)
- `RedditLoginButton` (function)
- `requestToControllerValidation` (function)
- `ResetPasswordForm` (function)
- `SignInForm` (function)
- `SignUpForm` (function)
- `SnapchatLoginButton` (function)
- `SocialLoginButton` (function)
- `SocialLoginButtons` (function)
- `SocialProviders` (function)
- `SteamLoginButton` (function)
- `TiktokLoginButton` (function)
- `TwitchLoginButton` (function)
- `TwitterLoginButton` (function)
- `useAuthEmailProp` (function)
- `validateEmail` (function)
- `validatePassword` (function)
- `WeChatLoginButton` (function)
- `WhatsAppLoginButton` (function)
- `XboxLoginButton` (function)
- `XLoginButtin` (function)
- `YahooLoginButton` (function)

### Better Auth

- `AuthFieldError` (interface) — Describes an error associated with a specific form field.
- `AuthGuardOptions` (interface) — Options for Authenticated and Unauthenticated guard components.
- `BetterAuthBridge` (interface) — The bridge object returned by createBetterAuthBridge.

Provides reactive session state, pre-configured form options for auth
components, and methods for sign-out and session management.
- `BetterAuthBridgeOptions` (interface) — Configuration options for the better-auth bridge.

Controls OAuth callback URLs, social providers, form display options,
session polling, and event callbacks.
- `BetterAuthClient` (interface) — Structural interface for the better-auth client.

Defines the expected shape of the better-auth client object without
importing the actual library, avoiding a hard dependency. Components
that receive
- `BetterAuthProviderOptions` (interface) — Options for the BetterAuth provider.

Extends BetterAuthBridgeOptions with the required `client` instance.
- `BetterAuthResult` (interface) — Result type returned by better-auth client methods.

Either `data` or `error` will be non-null, but not both.
- `BetterAuthSession` (interface) — Represents an active authentication session.

Contains the authenticated user and any additional session data
from the better-auth backend.
- `BetterAuthUser` (interface) — Represents a user object from the better-auth system.
- `MagicLinkFormOptions` (interface)
- `PasskeyClient` (interface) — Client interface for passkey (WebAuthn) operations.

Provides methods for adding, listing, deleting, and renaming passkeys.
- `PasskeyInfo` (interface) — Information about a registered passkey.
- `PasskeyManagementOptions` (interface)
- `PasskeySignInOptions` (interface)
- `SessionManager` (interface)
- `TwoFactorClient` (interface) — Client interface for two-factor authentication operations.

Provides methods for enabling/disabling 2FA, verifying TOTP codes,
sending and verifying OTP codes, and managing backup codes.
- `TwoFactorSetupOptions` (interface)
- `TwoFactorVerifyOptions` (interface)
- `AuthError` (type) — Error returned by auth callbacks.

- `string` — a generic error message displayed at the form root
- `AuthFieldError[]` — field-specific errors for per-field highlighting
- `BetterAuthMessages` (type)
- `TwoFactorMethod` (type)
- `BetterAuth` (variable) — Context provider for the better-auth bridge.

Creates a BetterAuthBridge from the provided client and options,
making it available to descendant components via the Tempo provider system.
Automatically
- `BetterAuthI18n` (variable)
- `Authenticated` (function)
- `BetterAuthContainer` (function)
- `BetterAuthModal` (function)
- `createBetterAuthBridge` (function)
- `createSessionManager` (function)
- `MagicLinkForm` (function)
- `mapSocialProviders` (function)
- `PasskeyManagement` (function)
- `PasskeySignIn` (function)
- `TwoFactorSetup` (function)
- `TwoFactorVerify` (function)
- `Unauthenticated` (function)

### Main

- `StandardSchemaV1` (namespace)
- `ArrayController` (class) — Controller specialized for array values that provides item-level access and array manipulation methods.
Automatically tracks deep touched and dirty states by monitoring all child item controllers.
- `BooleanValidator` (class)
- `ColorController` (class) — Specialized controller for color values with validation and transformation utilities.

Extends the base `Controller<string>` with color-specific functionality including
hex color validation, normaliza
- `Controller` (class) — Reactive form field controller that manages value, validation state, touched/dirty tracking, and disabled state.
Provides the foundation for type-safe form handling with fine-grained reactivity.
- `ObjectController` (class) — Controller specialized for object values that provides field-level access via the `.field()` method.
Automatically tracks deep touched and dirty states by monitoring all child field controllers.
- `ObjectValidator` (class)
- `StringValidator` (class)
- `UnionController` (class) — Controller for union/discriminated types that manages multiple possible value branches.

Extends `Controller<T>` to support values that can be one of several types.
Automatically detects which branch
- `AccordionItem` (interface) — Describes a single item in an Accordion.

Each item has a unique key, a header (rendered as the clickable trigger),
and body content revealed when the item is expanded.
- `AccordionOptions` (interface) — Configuration options for the Accordion component.
- `ActionCardOptions` (interface) — Configuration options for the ActionCard component.
- `AlertDialogOptions` (interface) — Configuration options for the AlertDialog component.
- `AlphaChannelPickerOptions` (interface)
- `AppShellBreakpointOptions` (interface) — Per-breakpoint dimension values (in pixels) for AppShell sections.
Each property corresponds to a standard BeatUI breakpoint.
- `AppShellHorizontalOptions` (interface) — Options for horizontal AppShell sections (banner, header, footer, mainHeader, mainFooter).
- `AppShellMainOptions` (interface) — Options for the main content area of the AppShell.
- `AppShellOptions` (interface) — Configuration options for the AppShell component.
Each section (banner, header, menu, main, aside, footer) is optional except `main`.
- `AppShellVerticalOptions` (interface) — Options for vertical AppShell sections (menu, aside).
- `AutoColorBadgeOptions` (interface) — Configuration options for the AutoColorBadge component.
- `AvatarGroupOptions` (interface) — Configuration options for the AvatarGroup component.
- `AvatarGroupOverflowOptions` (interface) — Configuration options for the AvatarGroupOverflow component.
- `AvatarOptions` (interface) — Configuration options for the Avatar component.
- `BadgeOptions` (interface) — Configuration options for the Badge component.
- `BeatuiPresetOptions` (interface) — Options for customising the BeatUI Tailwind preset.

Allows overriding semantic design tokens (colors, fonts, radii, shadows,
motion, spacing, text-shadows) and controlling which token layers are
incl
- `BeatuiTailwindPluginOptions` (interface)
- `BlockCommandItem` (interface)
- `BlockCommandPaletteOptions` (interface)
- `BooleanFilter` (interface) — Boolean filter.
- `BreadcrumbItem` (interface) — Represents a single item in the breadcrumb navigation trail.
- `BreadcrumbsOptions` (interface) — Configuration options for the Breadcrumbs component.
- `BreakpointInfo` (interface) — Information object provided to the callback in WithBreakpoint,
containing the current breakpoint state and comparison utilities.
- `BulkAction` (interface) — An action available when rows are selected.
- `ButtonLinkOptions` (interface)
- `ButtonOptions` (interface) — Configuration options for the Button component.
- `CardCoverImageOptions` (interface) — Options for CardCoverImage.
- `CardOptions` (interface) — Configuration options for the Card component.
- `CardSectionOptions` (interface) — Options for CardHeader, CardBody, and CardFooter.
- `CarouselController` (interface) — Controller for programmatic carousel control, returned by createCarousel.
- `CenterOptions` (interface) — Configuration options for the Center component.
- `ChannelPickerOptions` (interface)
- `ColorFieldOptions` (interface)
- `ColumnFilterBase` (interface) — Base options shared by all ColumnFilter variants.
- `ColumnFilterPanelOptions` (interface) — Options for the ColumnFilterPanel component.
- `ColumnHeaderMenuOptions` (interface) — Options for the ColumnHeaderMenu component.
- `CompletionOptions` (interface) — Options for determining when a masked input value is considered complete.
- `CompositeColumnFilter` (interface) — A composite per-column filter that combines multiple child filters
using AND or OR logic. All children share the same column.
- `ConfirmationDialogOptions` (interface) — Configuration options for the ConfirmationDialog component.
- `ConfirmModalOptions` (interface) — Configuration options for the ConfirmModal component.

Extends ModalOptions with confirmation-specific settings for
custom button labels and confirm/cancel callbacks.
- `CopyButtonOptions` (interface) — Configuration options for the CopyButton component.
- `CursorBehavior` (interface) — Options controlling cursor positioning behavior within the masked input.
- `CustomColorRegistry` (interface) — Registry interface for user-defined custom color palettes.

Augment this interface via declaration merging to make custom color names
available in component `color` props with full type-safety and aut
- `CustomWidgetRegistration` (interface) — Custom widget registration for form-scoped widgets
- `DataColumnDef` (interface) — Column definition for a DataTable.
- `DataSource` (interface) — A headless reactive data source managing sort, filter, selection, and pagination state.
- `DataSourceOptions` (interface)
- `DataTableOptions` (interface) — Configuration options for the DataTable component.
- `DataTablePaginationOptions` (interface) — Pagination options for DataTable.
- `DataTableToolbarOptions` (interface) — Toolbar options for DataTable.
- `DataToolbarOptions` (interface) — Options for the DataToolbar component.
- `DatePickerOptions` (interface) — Configuration options for the DatePicker component.
Uses Temporal `PlainDate` for date values — no time or timezone concerns.
- `DateRangePickerOptions` (interface) — Configuration options for the DateRangePicker component.
Uses Temporal `PlainDate` for date values — no time or timezone concerns.
- `DateRangeSelectShellOptions` (interface) — Internal base options for the date range select shell (trigger + flyout).
The actual picker content is provided via `panelContent`.
- `DateTimeSelectShellOptions` (interface) — Internal base options for the date-time select shell (trigger + flyout).
The actual picker content is provided via `panelContent`.
- `DescribeFilterLocalizedOptions` (interface)
- `DescribeFilterOptions` (interface)
- `DividerOptions` (interface) — Configuration options for the Divider component.
- `Done` (interface) — Represents a completed download with the resulting file.
- `DownloadError` (interface) — Represents a failed download with the error that occurred.
- `DrawerOptions` (interface) — Configuration options for the Drawer component, defining its content layout
and behavioral properties.
- `EmptyStateOptions` (interface) — Configuration options for the EmptyState component.
- `EvaluateFilterOptions` (interface)
- `FieldLayoutOptions` (interface) — Options accepted by the FieldLayout provider.

All properties are optional — unspecified properties fall back to
FIELD_LAYOUT_DEFAULTS.
- `FieldLayoutValue` (interface) — Layout configuration values cascaded by the FieldLayout provider.

When a `Fieldset` provides this context, descendant `Field` components
automatically inherit these defaults. Local options on individ
- `FieldsetOptions` (interface) — Configuration options for the `Fieldset` component.
- `FilterBase` (interface) — Open base type for all filters.
- `FilterDescriptionMessages` (interface) — Localized message functions for describing filter conditions.
Each function receives the column name and relevant values,
returning a human-readable description.
- `FilterRenderProps` (interface) — Props passed to a custom filter render function.
- `FlyoutOptions` (interface) — Configuration options for the Flyout component.
- `FocusTrapOptions` (interface) — Configuration options for the focus trap behavior.
- `FormatBigIntOptions` (interface) — Options for the FormatBigInt component.

Separate from FormatNumber because `bigint` values cannot use `percent`,
`compact`, or significant digit options with `Intl.NumberFormat`.
- `FormatDateOptions` (interface) — Options for the FormatDate component.
- `FormatDateTimeOptions` (interface) — Options for the FormatDateTime component.
- `FormatDisplayNameOptions` (interface) — Options for the FormatDisplayName component.
- `FormatFileSizeComponentOptions` (interface) — Options for the FormatFileSize component.
- `FormatListOptions` (interface) — Options for the FormatList component.
- `FormatNumberOptions` (interface) — Options for the FormatNumber component.
- `FormatPluralOptions` (interface) — Options for the FormatPlural component.
- `FormatRelativeTimeOptions` (interface) — Options for the FormatRelativeTime component.
- `FormatTimeOptions` (interface) — Options for the FormatTime component.
- `HexColorPickerOptions` (interface)
- `HistoryEntry` (interface)
- `HistoryTimelineOptions` (interface)
- `HslColorPickerOptions` (interface)
- `HSLRange` (interface) — HSL range constraint for a single component (hue, saturation, or lightness).
- `HwbColorPickerOptions` (interface)
- `IconOptions` (interface) — Configuration options for the Icon component.
- `IndicatorOptions` (interface) — Configuration options for the Indicator component.
- `KbdOptions` (interface) — Configuration options for the Kbd component.
- `LightboxOptions` (interface) — Configuration options for the Lightbox component.
- `LinkOptions` (interface) — Configuration options for the Link component.
- `LoadingOverlayOptions` (interface) — Options for the LoadingOverlay component.
- `MaskDictionary` (interface) — A dictionary mapping mask symbol characters to their pattern definitions.
Used to define custom mask tokens (e.g., `'9'` for digits, `'A'` for letters).
- `MaskedInputOptions` (interface) — Low-level configuration options for the masked input engine.
These options control how raw input is conformed to a mask pattern.
- `MenuItemOptions` (interface) — Configuration options for the MenuItem component.
- `MenuOptions` (interface) — Configuration options for the Menu component.
- `MenuSeparatorOptions` (interface) — Configuration options for the MenuSeparator component.
- `ModalContentOptions` (interface) — Content layout options for a modal dialog, defining the header, body, and footer sections.
- `ModalOptions` (interface) — Configuration options for the Modal component.
- `NativePdfPreviewOptions` (interface)
- `NavigationLinkOptions` (interface)
- `NavigationProgressController` (interface) — Controller returned by NavigationProgress for programmatic control.
- `NavigationProgressOptions` (interface) — Configuration options for the NavigationProgress component.
- `NotificationPanelItem` (interface)
- `NotificationPanelOptions` (interface)
- `NullFilter` (interface) — Null-check filter.
- `NumberStepperOptions` (interface) — Configuration options for the NumberStepper component.
- `OklchColorPickerOptions` (interface)
- `OnboardingTourController` (interface) — Controller returned by OnboardingTour for programmatic control.
- `OnboardingTourOptions` (interface) — Configuration options for the OnboardingTour component.
- `OtpInputOptions` (interface) — Configuration options for the OtpInput component.
- `PaginationOptions` (interface) — Configuration options for the Pagination component.
- `PDFJSPreviewOptions` (interface)
- `PdfPageViewerOptions` (interface)
- `PipeMeta` (interface) — Metadata passed to pipe functions during mask conforming.
- `PlaceholderOptions` (interface) — Options for placeholder display within the masked input.
- `PopOverArrowOptions` (interface) — Positioning data for a popover arrow element, provided by the PopOver positioning engine.
- `PopoverOptions` (interface) — Configuration options for the Popover component.
- `PresenceSelection` (interface)
- `Progress` (interface) — Represents an in-progress download with a known content length.
- `ProgressBarOptions` (interface) — Configuration options for the ProgressBar component.
- `PromptDialogOptions` (interface) — Configuration options for the PromptDialog component.
- `QueryDataSourceOptions` (interface) — Options for createQueryDataSource.
- `QueryDataSourceResult` (interface) — The result of createQueryDataSource.
- `RadioGroupOptions` (interface) — Configuration options for the RadioGroup component.
- `RadioOption` (interface) — Configuration for a single radio option within a RadioGroup.
- `RangeSliderMarker` (interface) — Definition of a marker dot on the range slider track.
Markers are small circles rendered directly on the track,
unlike ticks which extend outward from the track.
- `RangeSliderOptions` (interface) — Configuration options for the RangeSlider component.

Supports single-value, dual-thumb (range), and multi-point modes with
customizable thumbs, segment styles, tick marks, and full keyboard
accessibi
- `RangeSliderSegmentStyle` (interface) — Style configuration for an individual track segment.
- `RangeSliderTick` (interface) — Definition of a tick mark on the range slider track.
- `RenderOptions` (interface)
- `RgbColorPickerOptions` (interface)
- `RowDetailsConfig` (interface) — Configuration for row detail panels in DataTable.
- `RowGroup` (interface) — A group of rows sharing the same group-by value.
- `SegmentedInputOptions` (interface) — Configuration options for the SegmentedInput component.
- `SegmentedSelectOptions` (interface) — Configuration options for the SegmentedSelect component.
- `SelectAllCheckboxOptions` (interface) — Options for the SelectAllCheckbox component.
- `SelectColumnFilter` (interface) — Options for a select-dropdown column filter.
- `SelectionCheckboxOptions` (interface) — Options for the SelectionCheckbox component.
- `SelectionOptions` (interface) — Options for row selection behavior.
- `SemanticTokenOverrideOptions` (interface)
- `SinkOptions` (interface) — Configuration options for the Sink component.
- `SkeletonOptions` (interface) — Configuration options for the Skeleton component.
- `SortableHeaderOptions` (interface) — Options for the SortableHeader component.
- `SortableListOptions` (interface) — Configuration options for the SortableList component.
- `SortDescriptor` (interface) — Describes how a column should be sorted.
- `SpotlightController` (interface)
- `SpotlightItem` (interface)
- `SpotlightOptions` (interface)
- `StandardSchemaV1` (interface) — The Standard Schema v1 interface for schema validation libraries.

This is an implementation of the
[Standard Schema](https://github.com/standard-schema/standard-schema) specification (v1),
which prov
- `StatCardOptions` (interface) — Configuration options for the StatCard component.
- `StatCardSectionOptions` (interface) — Options for a StatCardSection.
- `StatCardTrendOptions` (interface) — Configuration for the StatCardTrend sub-component.
- `StepDefinition` (interface) — Definition of a single step in a Stepper.
- `StepperController` (interface) — Programmatic controller for the stepper.
- `StepperOptions` (interface) — Configuration options for the Stepper component.
- `TabItem` (interface)
- `TableOptions` (interface) — Configuration options for the Table component.
Controls visual presentation including size, borders, hover effects, and sticky headers.
- `TabsOptions` (interface)
- `TagInputOptions` (interface)
- `TagsColumnFilter` (interface) — Options for a multi-select tags column filter.
- `TextColumnFilter` (interface) — Options for a text-input column filter.
- `TextFilter` (interface) — Text (string-only) filter with case-sensitivity option.
- `ThemeOptions` (interface) — Configuration options for the Theme provider.
- `ThemeValue` (interface) — Theme context value provided by the Theme provider.
Contains reactive signals for appearance state and a setter for user preferences.
- `TimePickerOptions` (interface) — Configuration options for the TimePicker component.
Uses Temporal `PlainTime` for time values — no date or timezone concerns.
- `TimeSelectShellOptions` (interface) — Internal base options for the time select shell (trigger + flyout).
The actual picker content is provided via `panelContent`.
- `ToggleButtonGroupItem` (interface) — Describes a single item within a ToggleButtonGroup.
- `ToggleButtonGroupOptions` (interface) — Configuration options for the ToggleButtonGroup component.
- `ToggleButtonOptions` (interface) — Configuration options for the ToggleButton component.
- `ToolbarButtonOptions` (interface) — Configuration options for the ToolbarButton component.
Extends ButtonOptions with toolbar-specific properties.
- `ToolbarGroupOptions` (interface) — Configuration options for the ToolbarGroup component.
- `ToolbarOptions` (interface) — Configuration options for the Toolbar component.
- `TooltipOptions` (interface)
- `TourStep` (interface) — Definition of a single step in the onboarding tour.
- `TransferListOptions` (interface) — Configuration options for the TransferList component.
- `TreeItemData` (interface) — Data structure representing a single item in the tree hierarchy.
- `TreeViewOptions` (interface) — Configuration options for the TreeView component.
- `Undetermined` (interface) — Represents an in-progress download with an unknown content length.
- `UnionBranch` (interface) — Defines a single branch (variant) within a union type for use with UnionController.

Each branch has a unique key, a display label, a detection predicate, an optional
conversion function for migrating
- `UnmaskOptions` (interface) — Options for unmasking a conformed value back to raw form.
- `UseControllerOptions` (interface) — Configuration options for creating a standalone controller with useController.
- `UseFormOptions` (interface) — Configuration options for creating a form with useForm.
- `Validator` (interface)
- `VirtualListOptions` (interface) — Configuration options for the VirtualList component.

A virtualized list that renders only visible items for performance with
large datasets. Items outside the visible viewport are not rendered in the
- `WithBreakpointOptions` (interface) — Configuration options for the WithBreakpoint component.
- `AlertDialogVariant` (type) — Visual variant for the AlertDialog, controlling the default icon and color.
- `AlignContent` (type) — CSS `align-content` property values for multi-line flex containers.
Controls alignment of flex lines along the cross axis.
- `AlignItems` (type) — CSS `align-items` property values for flexbox layouts.
Controls alignment of flex items along the cross axis.
- `AlignSelf` (type) — CSS `align-self` property values for individual flex/grid items.
Controls alignment of a single item along the cross axis.
- `AnchorMode` (type) — Controls how the end sidebar and footer regions are anchored relative
to the body content or the container edge.

- `'container-edge'` - Anchors to the container edge (fixed position)
- `'body-end'` -
- `AnimatedElementToggleOptions` (type)
- `AnimatedToggleOptions` (type)
- `AnimationConfig` (type)
- `AnnouncementBarOptions` (type) — Configuration options for the AnnouncementBar component.
- `AnyOption` (type) — Generic union of all option types for maximum flexibility.
- `Appearance` (type) — Resolved appearance mode (excludes system option).
Either `'light'` or `'dark'`.
- `AppearancePreference` (type) — User's appearance preference setting.
- `'light'`: Light theme
- `'dark'`: Dark theme
- `'system'`: Follow system preference
- `AppearanceSelectorOptions` (type) — Options for the AppearanceSelector component.
- `AppShellBreakpointOptionalOptions` (type) — Partial version of AppShellBreakpointOptions where all breakpoints are optional.
- `AvatarSize` (type) — Size options for Avatar components.
Ranges from `'xs'` (24px) to `'2xl'` (96px).
- `BackgroundColorName` (type) — Union type of background color role names used in the theme system.
Each role represents a different surface elevation level.
- `BackgroundVariant` (type) — Union type of background variant styles used for component backgrounds.
Controls the shade intensity applied to colored backgrounds.
- `Base64InputOptions` (type) — Options for the Base64Input component.
Extends standard `InputOptions` for a single base64-encoded file string.
- `Base64sInputOptions` (type) — Options for the Base64sInput component.
Extends standard `InputOptions` for multiple base64-encoded file strings.
- `BaseControlInputOptions` (type) — Base options type for any input component, derived from InputOptions.
- `BaseControlOptions` (type) — Options for connecting a controller to an input component without a wrapper.
- `BaseListControlOptions` (type) — Base configuration options for BaseListControl (without Field).
- `BaseVideoConfig` (type)
- `BaseVideoPlayerOptions` (type)
- `BaseVideoProgress` (type)
- `BeatUIBreakpoint` (type) — Union type of all standard BeatUI viewport breakpoint names.
- `BeatUIBreakpoints` (type) — Standard BeatUI viewport breakpoint thresholds. Values are read from
CSS custom properties (`--breakpoint-*`) with sensible defaults.

| Name   | Default (px) |
|--------|-------------|
| `zero` | 0
- `BeatUIMessages` (type) — The type representing the complete set of BeatUI UI messages.

Derived from the structure of the default (English) messages object.
All locale translation files must conform to this type.
- `BeatUIOptions` (type) — Configuration options for the BeatUI root provider.
- `BeatUITemporal` (type)
- `BigintInputOptions` (type) — Options for the BigintInput component.
Extends standard `InputOptions` for `bigint` values with stepper and range constraints.
- `BorderColorName` (type) — Union type of border color role names used in the theme system.
- `BorderWidthName` (type) — Union type of all available border width names.
- `BreakOption` (type) — Represents a visual separator (divider) in the option list.

Used to add visual breaks between sections of options without creating a labeled group.
- `BreakPointComparison` (type) — A breakpoint comparison expression. Can be a plain breakpoint name (treated
as exact match) or an operator-prefixed breakpoint name (e.g., `'>=md'`, `'<lg'`).
- `BreakpointName` (type) — Union type of all available breakpoint size names.
- `Breakpoints` (type) — A record mapping breakpoint names to their minimum width thresholds in pixels.
Keys are string breakpoint names and values are numeric pixel widths.
- `BuiltinFilter` (type) — Closed union of all builtin filter kinds.
- `ButtonVariant` (type) — Visual style variant for button components.
- `'filled'`: Solid background with theme color
- `'light'`: Color-tinted background with normal text
- `'outline'`: Transparent background with colored bor
- `CardVariant` (type) — Visual style variant for card components.
- `'default'`: Standard card appearance
- `'elevated'`: Card with shadow elevation
- `'flat'`: Minimal card with no shadow
- `'outlined'`: Card with border ou
- `CarouselAlignment` (type) — Slide alignment when slidesPerView shows more slots than remaining slides.
- `CarouselIndicator` (type) — Indicator style for showing slide position.
- `CarouselOptions` (type) — Configuration options for the Carousel and createCarousel components.
- `CarouselTransition` (type) — Transition effect for slide changes.
- `CenterGap` (type) — Gap spacing size for centered layouts.
Ranges from `'none'` (no gap) to `'xl'` (extra large gap).
- `CheckboxInputOptions` (type) — Configuration options for the CheckboxInput component.

Extends InputOptions for boolean values with additional properties to
customize the checked/unchecked icons and their size.
- `CheckboxState` (type) — Represents the three possible states of a tri-state checkbox.

- `'checked'` — all items selected
- `'unchecked'` — no items selected
- `'indeterminate'` — some items selected (shown with a minus icon
- `ClickAction` (type) — Click-based action for a SidebarLink.
Renders the link as a button that invokes the provided callback on click.
- `CloseButtonOptions` (type) — Configuration options for the CloseButton component.
- `CollapseOptions` (type) — Configuration options for the Collapse component.
- `CollapsibleSidebarGroupOptions` (type)
- `ColorInputOptions` (type) — Configuration options for the ColorInput component.

Extends InputOptions for string color values with an optional size
property for the color swatch preview.
- `ColorName` (type) — Union type of all available base color names derived from the color palette.
- `ColorShade` (type) — Union type representing the available shade levels in the color scale.
Ranges from 50 (lightest) to 950 (darkest).
- `ColorShadeMap` (type) — A record mapping each shade (50–950) to a CSS color value.
Used to define custom color palettes.
- `ColorSwatchInputOptions` (type) — Configuration options for the ColorSwatchInput component.

Extends InputOptions for string color values with properties to control
the blob preview size, alpha channel support, value display, and outp
- `ColumnFilterConfig` (type) — Filter configuration for a column.

- `boolean` — `true` enables a text filter
- `'text'` — explicit text filter
- `'number'` — shortcut for `{ type: 'panel', valueType: 'number' }`
- `{ type: 'select
- `ColumnFilterOptions` (type) — Options for the ColumnFilter component.

Use the `type` discriminator to select between `'text'` (default),
`'select'`, and `'tags'` variants.
- `ColumnValueType` (type) — The value type of a column, used by the filter panel to determine available operators.
- `ComboboxInputOptions` (type) — Configuration options for the ComboboxInput component.

Extends InputOptions with combobox-specific properties including an
asynchronous option loader, custom renderers for options and the selected va
- `ComboboxTagsInputOptions` (type) — Options for the ComboboxTagsInput component.
Combines tag selection with a searchable dropdown.
- `CommonInputOptions` (type) — Common options shared across all input components in BeatUI.

This type defines the foundational properties that every input component
accepts, such as disabled state, size, placeholder text, and acce
- `CompareFilter` (type) — Comparison filter for orderable types.
- `CompareOperator` (type) — Operators for compare filters (any orderable type).
- `ComposableAnimation` (type)
- `ControlGapName` (type)
- `ControlHeightName` (type)
- `ControlInputOptions` (type) — Options for a control that includes both input and wrapper options.
- `ControllerError` (type) — Represents a validation error for a form controller with support for nested field errors.
- `ControllerValidation` (type) — Validation state for a controller, which can be valid, pending, or invalid with a ControllerError.
This is an alias for `Validation<ControllerError>` from @tempots/std.
- `ControlOptions` (type) — Options for connecting a controller to an input component with a wrapper.
- `ControlPaddingBlockName` (type)
- `ControlPaddingInlineName` (type)
- `ControlSize` (type) — Size options for form controls and interactive elements.
Ranges from `'xs'` (extra small) to `'xl'` (extra large).
- `CustomColorName` (type) — Union type of user-defined custom color names derived from CustomColorRegistry.
Evaluates to `never` when no custom colors are registered.
- `CustomWidgets` (type) — Array of custom widget registrations for the customWidgets option
- `DateFormatStyle` (type) — Preset date format styles matching `Intl.DateTimeFormat` dateStyle.
- `DateRange` (type) — A date range as a `[start, end]` tuple where both dates are required.
- `DateRangeSelectOptions` (type) — Configuration options for the DateRangeSelect component.

Both start and end dates are required. Use OpenDateRangeSelect
if either end can be null/undefined.
- `DateSelectOptions` (type) — Configuration options for the DateSelect component.
- `DateTimeSelectOptions` (type) — Configuration options for the DateTimeSelect component.
- `DateValue` (type) — Accepted date value types.
- `Date` — native JavaScript Date
- `string` — ISO 8601 date string
- `number` — Unix timestamp in milliseconds
- `TemporalDateLike` — any Temporal type with `toLocaleString
- `DirectionPreference` (type) — Direction preference options
- 'auto': Automatically detect from locale
- 'ltr': Force left-to-right
- 'rtl': Force right-to-left
- `DirectionValue` (type) — Text direction values
- `DisplayNameLanguageDisplay` (type) — Language display style (only for type 'language').
- `DisplayNameStyle` (type) — Format verbosity for display names.
- `DisplayNameType` (type) — Type of display name to resolve.
- `DividerLabelAlign` (type) — Alignment of the label text in a labeled divider.

- `'left'` - Label aligned to the left
- `'center'` - Label centered (default)
- `'right'` - Label aligned to the right
- `DividerOrientation` (type) — Orientation of the divider line.

- `'horizontal'` - Horizontal separator (default)
- `'vertical'` - Vertical separator
- `DividerTone` (type) — Visual weight/prominence of the divider.

- `'subtle'` - Lighter, less prominent
- `'default'` - Standard prominence
- `'strong'` - Darker, more prominent
- `DividerVariant` (type) — Visual style variant of the divider line.

- `'solid'` - Solid line (default)
- `'dashed'` - Dashed line
- `'dotted'` - Dotted line
- `DownloadResult` (type) — Discriminated union representing the current state of a monitored download.
Use the `type` property to determine the current state.
- `DropdownBaseOptions` (type) — Options for the DropdownBase component.
Provides a reusable foundation for building dropdown and combobox inputs
with full keyboard navigation, flyout positioning, and ARIA attributes.
- `DropdownInputOptions` (type) — Configuration options for the DropdownInput component.

Extends InputOptions with dropdown-specific properties including the
list of selectable options, custom equality comparison, and optional search
- `DropdownOption` (type) — Union type for all option types that can be used in dropdown and combobox inputs.

This is a discriminated union that allows type-safe handling of different option kinds:
- `ValueOption<T>` - A select
- `Duration` (type)
- `DynamicMask` (type) — A function that dynamically generates a mask based on the current raw input
and metadata. Useful for inputs where the mask structure depends on what has
been typed so far (e.g., phone numbers with var
- `EditableTextOptions` (type) — Options for the EditableText component.
- `EmptyStateSize` (type) — Size options for the EmptyState component.
- `FadeTransitionState` (type) — State of a fade transition animation.
- `'initial'`: Before animation begins
- `'entering'`: Fade-in animation in progress
- `'entered'`: Fade-in complete, element fully visible
- `'exiting'`: Fade-ou
- `FieldLabelLayout` (type) — Layout modes for the field structure.

- `'vertical'` - Label above input (default)
- `'horizontal'` - Label and input side-by-side with flexible label width
- `'horizontal-fixed'` - Label on the left
- `FieldOptions` (type) — Configuration options for the `Field` component.

This type defines all the options for wrapping an input with label, description,
error message, and contextual information. It's used by form controls
- `FileInputMode` (type) — Display mode for file input components.
- `'default'` - Full drop zone with file list below.
- `'input'` - Inline input-style with compact file chips.
- `'compact'` - Compact drop zone with inline fil
- `FileInputOptions` (type) — Options for the FileInput component.
Extends standard `InputOptions` for a single file with file-specific settings.
- `FilesInputOptions` (type) — Options for the FilesInput component.
Extends standard `InputOptions` for a `File[]` value with file-specific settings.
- `FilterExpr` (type)
- `FlexAlign` (type)
- `FlexGap` (type) — Shared flex modifier helpers that return TNode class attributes.
Use these composable helpers inside Stack or Group to control layout.
- `FlexJustify` (type)
- `FlyoutTrigger` (type) — Built-in trigger modes that control how the Flyout is shown.

- `'hover'` - Shows on mouse enter, hides on mouse leave.
- `'focus'` - Shows on focus, hides on blur.
- `'hover-focus'` - Combines both h
- `FlyoutTriggerFunction` (type) — Custom trigger function for the Flyout component.
Receives the open state signal and returns trigger content that controls
when the flyout appears and disappears.
- `FontFamily` (type) — Union type of all available font family names.
- `FontFamilyOverrides` (type) — Partial record for overriding default font family stacks.
Values can be a single font string or an array of font names.
- `FontSize` (type) — Union type of all available font size names.
- `FontWeight` (type) — Union type of all available font weight names.
- `FormatFileSizeOptions` (type) — Options for configuring file size formatting behavior.
- `FormatListStyle` (type) — Format verbosity for list formatting.
- `FormatListType` (type) — List semantics type for `Intl.ListFormat`.
- `FormatNumberCurrencyDisplay` (type) — Currency display mode when style is 'currency'.
- `FormatNumberNotation` (type) — Notation style for number formatting.
- `FormatNumberSignDisplay` (type) — How to display the sign for the number.
- `FormatNumberStyle` (type) — Style of number formatting.
- `FormError` (type) — Status indicating the form submission encountered an error.
- `FormFilling` (type) — Status indicating the form is being filled out by the user.
- `FormStatus` (type) — Discriminated union representing the current state of a form.

The form progresses through these states during its lifecycle:
1. `'filling'` - User is entering data
2. `'submitting'` - Form is being s
- `FormSubmitting` (type) — Status indicating the form is currently being submitted.
- `FormSuccess` (type) — Status indicating the form was submitted successfully.
- `GroupOption` (type) — Represents a group of options with a header label.

Used to organize options into logical sections in dropdowns and selects.
The group itself cannot be selected, but contains a list of selectable opti
- `IconSize` (type) — Size options for icon elements.
Ranges from `'xs'` (extra small) to `'xl'` (extra large).
- `IndicatorPlacement` (type) — Placement of the indicator relative to its container.
- `InputAdornmentOptions` (type) — Configuration options for InputAdornment.
- `InputClasses` (type) — Fine-grained CSS class targets for the three DOM levels of an input container.

Use this to apply CSS classes to specific parts of the input structure:
- `container` — the outer `div.bc-input-containe
- `InputOptions` (type) — Generic input options that extend `CommonInputOptions` with value handling.

This type is used by most form input components (TextInput, NumberInput, etc.)
to provide both common input properties and
- `Instant` (type)
- `InteractiveColorName` (type) — Union type of interactive color role names for focus, hover, and active states.
- `JustifyContent` (type) — CSS `justify-content` property values for flexbox layouts.
Controls alignment of flex items along the main axis.
- `JustifyItems` (type) — CSS `justify-items` property values for grid layouts.
Controls alignment of grid items along the inline (row) axis.
- `JustifySelf` (type) — CSS `justify-self` property values for individual grid/flex items.
Controls alignment of a single item along the inline (row) axis.
- `KbdSize` (type) — Size variants for the keyboard key component.

- `'xs'` - Extra small (12px)
- `'sm'` - Small (14px, default)
- `'md'` - Medium (16px)
- `LabelType` (type) — Semantic type for label text styling.
- `'emphasis'`: High-contrast, emphasized text
- `'default'`: Standard text appearance
- `'muted'`: Low-contrast, de-emphasized text
- `'danger'`: Error or warnin
- `LazyNativeSelectOptions` (type) — Options for the LazyNativeSelect component.
Extends standard `InputOptions` with async option loading.
- `LetterSpacing` (type) — Union type of all available letter spacing names.
- `LineHeight` (type) — Union type of all available line height names.
- `LinkAction` (type) — Discriminated union of navigation actions for a SidebarLink.
Either a URL-based navigation or a click-based callback action.
- `LinkPortalOptions` (type) — Configuration options for the LinkPortal component.
- `LinkVariant` (type) — Visual style variant for the Link component.

- `'default'` - Standard underlined link appearance.
- `'plain'` - No underline; inherits text color.
- `'hover'` - Underline appears only on hover.
- `ListControllerPayload` (type) — Payload provided to each list item element renderer, re-exported from ListInputPayload.
- `ListControlOptions` (type) — Configuration options for ListControl, combining Field options with list control options.

Inherits all properties from FieldOptions (except `content`, which is generated)
and BaseListControlOptions.
- `ListControlsLayout` (type) — Layout mode for list item controls (move/remove buttons).

- `'aside'` - Controls are rendered in a column to the right of each item
- `'below'` - Controls are rendered in a row below each item
- `ListInputPayload` (type) — Payload passed to the element render function of a ListInput.
Provides the controller, item data, position information, and
actions for removing and reordering items.
- `ListItemControlsOptions` (type) — Configuration options for ListItemControls.
- `LocaleItem` (type) — Represents a single locale entry for display in the locale selector.
- `LocaleSelectorOptions` (type) — Configuration options for the LocaleSelector component.
- `LocaleValue` (type) — Value provided by the Locale provider containing locale state, direction, and setters.
- `MappedControlOptions` (type) — Options for connecting a controller to an input with bidirectional value transformation.
- `Mask` (type) — A mask definition that can be a string pattern (e.g., `'999-999'`), an array
of strings, RegExp patterns, or MaskToken objects, or `null` to disable masking.
- `MaskInputOptions` (type) — Options for the MaskInput component, merging standard `InputOptions<string>`
with masked input configuration. The `value`, `defaultValue`, `onAccept`, and `onComplete`
fields from `MaskedInputOptions`
- `MaskToken` (type) — Represents a single token in a parsed mask definition.

- `'literal'` tokens represent fixed characters that are inserted automatically.
- `'pattern'` tokens match user input against a regular express
- `MenuTrigger` (type) — Trigger mode for the Menu component.
Alias for FlyoutTrigger -- controls how the menu is shown (e.g., `'click'`, `'hover'`).
- `MotionDurationName` (type) — Union type of all available motion duration names.
- `MotionEasingName` (type) — Union type of all available motion easing names.
- `MovableDirection` (type) — Directions that can be checked for movability (only up and down, since
first/last are always possible when movement in that direction is possible).
- `MoveDirection` (type) — Direction in which a list item can be moved.
- `MultiSelectOptions` (type) — Options for the MultiSelect component.
- `NativeSelectOptions` (type) — Options for the NativeSelect component.
Extends standard `InputOptions` with native `<select>` element configuration.
- `NavigationProgressPosition` (type) — Position of the navigation progress bar within the viewport.
- `NineSliceScrollViewOptions` (type) — Configuration options for the NineSliceScrollView component.

The nine-slice layout divides the view into nine regions arranged in a 3x3 grid:
```
+------------+----------+----------+
| topStart   | h
- `NoticeOptions` (type) — Configuration options for the Notice component.
- `NoticeRole` (type) — ARIA role for the Notice component, determining how assistive technologies
announce the notice.

- `'status'` - Non-urgent information updates (used for info, success, warning)
- `'alert'` - Urgent, t
- `NoticeTone` (type) — Visual tone for the Notice component, controlling its visual prominence.

- `'subtle'` - Lighter background with softer colors
- `'prominent'` - Stronger background with higher contrast
- `NoticeVariant` (type) — Visual variant for the Notice component, determining its color scheme
and semantic meaning.

- `'info'` - Informational notice (blue tones)
- `'success'` - Success confirmation (green tones)
- `'warni
- `NotificationOptions` (type) — Configuration options for the Notification component.
- `NotificationProviderOptions` (type) — Options for configuring the NotificationProvider.
- `NotificationProviderValue` (type) — Value exposed by the NotificationProvider to its consumers.
Provides methods to show and clear notifications, and reactive state
about active notification count.
- `NotificationShowFn` (type) — Function signature for showing a notification. Accepts configuration options
and child content nodes.
- `NotificationViewportPosition` (type) — Screen corner position where the notification viewport is anchored.

- `'top-start'` - Top-left in LTR layouts, top-right in RTL
- `'top-end'` - Top-right in LTR layouts, top-left in RTL
- `'bottom-st
- `NullableBigintInputOptions` (type) — Options for the NullableBigintInput component.
Extends standard `InputOptions` for `bigint | null` values with stepper and range constraints.
- `NullableColorInputOptions` (type) — Configuration options for the NullableColorInput component.

Extends InputOptions for `string | null` color values with an optional
size property for the color swatch preview.
- `NullableColorSwatchInputOptions` (type) — Configuration options for the NullableColorSwatchInput component.

Extends InputOptions for `string | null` color values with properties
to control the blob preview size, alpha channel support, value
- `NullableDateSelectOptions` (type) — Configuration options for the NullableDateSelect component.
- `NullableDateTimeSelectOptions` (type) — Configuration options for the NullableDateTimeSelect component.
- `NullableMaskInputOptions` (type) — Options for the NullableMaskInput component.
Merges nullable string `InputOptions` with `MaskInputOptions` (excluding value/change handlers).
- `NullableNumberInputOptions` (type) — Options for the NullableNumberInput component.
Extends standard `InputOptions` for `number | null` values with stepper and range constraints.
- `NullableRatingInputOptions` (type) — Options for the NullableRatingInput component.
Extends standard `InputOptions` for `number | null` values with rating-specific settings.
- `NullableSliderInputOptions` (type) — Configuration options for the NullableSliderInput component.

Similar to SliderInputOptions but accepts `null` as a valid value,
representing an unset state. The slider visually defaults to the minimu
- `NullableTextAreaOptions` (type) — Options for the NullableTextArea component.
Extends `TextAreaOptions` but accepts `null | string` for value and callbacks.
- `NullableTimeSelectOptions` (type) — Configuration options for the NullableTimeSelect component.
- `NumberInputOptions` (type) — Configuration options for the NumberInput component.

Extends InputOptions for numeric values with additional properties for
step increment, minimum and maximum bounds. When `step` is provided, steppe
- `NumberStepperOrientation` (type) — Orientation of the stepper layout.
- `OpenDateRange` (type) — An open date range where either or both dates may be null/undefined.
- `OpenDateRangeSelectOptions` (type) — Configuration options for the OpenDateRangeSelect component.

Either or both dates can be null/undefined, allowing open-ended ranges
like "from X onwards" or "up to Y".
- `OpenGraphOptions` (type) — OpenGraph meta tag options for social media sharing and SEO.
All properties are optional and support reactive Values.
- `Operator` (type) — Comparison operators supported in breakpoint comparison expressions.

- `'='` - Exact match (width falls within the breakpoint range)
- `'!='` - Not equal (width does not fall within the breakpoint ra
- `OutlineWidthName` (type) — Union type of all available outline width names.
- `OverlayEffect` (type) — Visual effect for overlay backgrounds.
- `'transparent'`: Semi-transparent background (e.g., modal backdrop)
- `'opaque'`: Fully opaque background
- `'none'`: No visual overlay effect
- `OverlayMode` (type) — Interaction mode for overlay elements.
- `'capturing'`: Captures clicks and prevents interaction with underlying content
- `'non-capturing'`: Allows click-through to underlying content
- `OverlayOptions` (type) — Configuration options for the Overlay component.
- `OverlayWidthName` (type)
- `PageDropZoneOptions` (type) — Configuration options for the PageDropZone component.
- `PaginationVariant` (type) — Visual style variant for pagination components.
- `'filled'`: Solid primary background on active page
- `'outline'`: Primary border on active page, no fill
- `'light'`: Light color-tinted background o
- `PanelColor` (type) — Color options for panel components.
Includes background color names, theme colors, and special values like `'white'`, `'black'`, and `'transparent'`.
- `PanelShadow` (type) — Shadow intensity for panel components.
Ranges from `'none'` (no shadow) to `'lg'` (large shadow).
- `Path` (type) — An array of path segments representing the location of a value within a nested data structure.
- `PathSegment` (type) — A single segment in a controller path.

- `string` represents a named property (e.g., `'name'`, `'address'`)
- `number` represents an array index (e.g., `0`, `1`)
- `PDFDocument` (type)
- `PipeResult` (type) — The return type of a pipe function. Can be:
- A `string` to replace the conformed value.
- An object `{ value, cursor? }` to set both the value and cursor position.
- `false` to reject the input and r
- `PlainDate` (type)
- `PlainDateTime` (type)
- `PlainMonthDay` (type)
- `PlainTime` (type)
- `PlainYearMonth` (type)
- `PluralCategory` (type) — CLDR plural category returned by `Intl.PluralRules`.
- `PluralMessages` (type) — A mapping from plural category to the string to display.
The `other` category is required as a fallback.
Strings may contain `{count}` which is replaced with the locale-formatted number.
- `PluralType` (type) — Plural rule type: 'cardinal' for counting, 'ordinal' for ordering.
- `PopoverTrigger` (type)
- `QueryDataTableOptions` (type) — Options for QueryDataTable.

Combines all DataTableOptions (except `data` and `loading`, which are
managed internally) with query options from QueryDataSourceOptions.
- `RadiusName` (type) — Union type of all available radius size names.
- `RangeFilter` (type) — Range filter (between min and max).
- `RangeSliderOrientation` (type) — Orientation of the range slider.
- `RatingInputOptions` (type) — Configuration options for the RatingInput component.

Extends InputOptions for numeric values with properties to control the
maximum rating, icon appearance, theme colors, and rounding precision.
- `RegisterColors` (type) — Utility type for registering custom color names from a `customColors` object.
Use with declaration merging to keep the registry in sync with your runtime config.
- `RelativeTimeNumeric` (type) — Numeric display style: 'always' => "1 day ago", 'auto' => "yesterday".
- `RelativeTimeStyle` (type) — Format verbosity for relative time.
- `RelativeTimeUnit` (type) — Relative time unit for `Intl.RelativeTimeFormat`.
- `RibbonCorner` (type) — Corner position for the Ribbon component.
Determines which corner of the parent container the ribbon is placed at.
- `RibbonOptions` (type) — Configuration options for the Ribbon component.
- `SafeParseError` (type)
- `SafeParseResult` (type)
- `SafeParseSuccess` (type)
- `ScrollablePanelOptions` (type) — Configuration options for the ScrollablePanel component.
- `SelectOption` (type) — Union type for all option types that can be used in select inputs.
- `SelectTagsInputOptions` (type) — Options for the SelectTagsInput component.
Combines tag selection with a click-to-open dropdown menu.
- `SemanticColorName` (type) — Union type of semantic color role names used throughout the theme system.
Semantic colors map to base color names and can be overridden per-theme.
- `SemanticColorOverrides` (type) — Partial record for overriding default semantic-to-base color mappings.

The generic parameter `C` allows additional custom color names (inferred from
a `customColors` configuration) to be accepted alo
- `SemanticFontName` (type) — Union type of all semantic font role names.
- `SemanticFontOverrides` (type) — Partial record for overriding default semantic font family assignments.
- `SemanticMotionName` (type) — Union type of all semantic motion role names.
- `SemanticMotionOverrides` (type) — Partial record for overriding default semantic motion assignments.
- `SemanticRadiusName` (type) — Union type of all semantic radius role names.
- `SemanticRadiusOverrides` (type) — Partial record for overriding default semantic radius assignments.
- `SemanticShadowName` (type) — Union type of all semantic shadow role names.
- `SemanticShadowOverrides` (type) — Partial record for overriding default semantic shadow assignments.
- `SemanticSpacingName` (type) — Union type of all semantic spacing names.
- `SemanticSpacingOverrides` (type) — Partial record for overriding default semantic spacing values.
- `SemanticTextShadowName` (type) — Union type of all semantic text shadow role names.
- `SemanticTextShadowOverrides` (type) — Partial record for overriding default semantic text shadow assignments.
- `SetFilter` (type) — Set membership filter.
- `ShadowSize` (type) — Union type of all available shadow size names.
- `ShowNotificationOptions` (type) — Options for showing a notification via the notification provider.
Extends NotificationOptions with animation and auto-dismiss settings.
- `Side` (type) — Specification for which sides of a box to apply styling (e.g., borders, padding).
- `'left' | 'right' | 'top' | 'bottom'`: Single side
- `'none'`: No sides
- `'all'`: All four sides
- Array of sides:
- `SidebarBackgroundMode` (type) — Background mode for the Sidebar component, controlling its visual appearance
in relation to the surrounding page content.
- `SidebarContextValue` (type) — Context value provided by the Sidebar component to its descendants.
Child components (e.g., SidebarLink, SidebarGroup) can consume
this context to adapt their appearance to the sidebar's background mo
- `SidebarGroupOptions` (type) — Configuration options for the SidebarGroup component.
- `SidebarLinkOptions` (type) — Configuration options for the SidebarLink component.
Extends LinkAction to provide either URL-based navigation or click-based actions.
- `SidebarOptions` (type) — Configuration options for the Sidebar component.
- `SinkVariant` (type) — Visual depth variant for sink/inset components.
- `'default'`: Standard inset depth
- `'deep'`: Stronger inset effect
- `'shallow'`: Subtle inset effect
- `'flat'`: Minimal or no inset effect
- `SlideDirection` (type)
- `SliderInputOptions` (type) — Configuration options for the SliderInput component.

Extends InputOptions for numeric values with properties to control the
slider range boundaries and step increment.
- `SortableListVariant` (type) — Visual variant for the sortable list items.
- `SortDirection` (type) — Sort direction for a column.
- `SpacingName` (type) — Union type of all available spacing size names.
- `StatCardVariant` (type) — Visual style variant for StatCard.
- `StepState` (type) — State of an individual step in a Stepper.
- `StylePortalOptions` (type) — Configuration options for the StylePortal component.
- `SwitchOptions` (type) — Configuration options for the Switch component.

Defines the properties for a toggle switch including its value, event callbacks,
optional on/off labels, visual size, theme color, and accessibility at
- `TabsDirection` (type)
- `TabsVariant` (type) — Visual variant for tabs.

- `'default'` — Standard tabs with bottom indicator
- `'filled'` — Color-filled inactive tabs, white active tab
- `'outline'` — Bordered tabs that connect to the panel
- `'un
- `TemporalDateLike` (type) — Any object with a `toLocaleString` method compatible with `Intl.DateTimeFormat` options.
This covers all Temporal types (PlainDate, PlainDateTime, Instant, ZonedDateTime,
PlainYearMonth, PlainMonthDay
- `TextAreaOptions` (type) — Configuration options for the TextArea component.

Extends InputOptions for string values with an additional `rows` property
to control the visible height of the textarea.
- `TextColorName` (type) — Union type of text color role names used in the theme system.
- `TextInputOptions` (type) — Configuration options for TextInput.

Extends InputOptions with an optional `type` attribute to support
different HTML input types (e.g., 'text', 'email', 'url', 'tel', 'password').
- `TextOperator` (type) — Operators for text (string-only) filters.
- `TextShadowSize` (type) — Union type of all available text shadow size names.
- `ThemeColorName` (type) — Union type of all theme-aware color names, including base colors,
semantic colors, custom colors registered via CustomColorRegistry,
and the special 'black' and 'white' values.
- `TimedToggleOptions` (type)
- `TimeFormatStyle` (type) — Preset time format styles matching `Intl.DateTimeFormat` timeStyle.
- `TimeSelectOptions` (type) — Configuration options for the TimeSelect component.
- `ToggleStatus` (type)
- `TooltipTrigger` (type)
- `TourBackdropAction` (type) — Behavior when the backdrop area (outside the highlighted element) is clicked.
- `TourTooltipPlacement` (type) — Placement of the tour tooltip relative to the target element.
- `TransformOrigin` (type)
- `TrendDirection` (type) — Trend direction for StatCardTrend.
- `TriStateCheckboxInputOptions` (type) — Configuration options for the TriStateCheckboxInput component.

Extends InputOptions for CheckboxState values with additional
properties to customize the icons for each state and their size.
- `TWElementBreakpoints` (type) — BeatUI element-level (container query) breakpoint thresholds. Values are
read from CSS custom properties (`--container-*`) with Tailwind-inspired defaults.

| Name   | Default (px) |
|--------|-------
- `TypedRange` (type) — A range bound annotated with its runtime type.
At least one of `min` or `max` must be provided.
- `TypedSet` (type) — A set of values annotated with its runtime type.
- `TypedValue` (type) — A value annotated with its runtime type. Used by compare, range, and set
filters so that the evaluator can handle each type correctly without
function predicates.
- `UnstyledDropZoneOptions` (type) — Configuration options for the UnstyledDropZone component.
- `UrlAction` (type) — URL-based navigation action for a SidebarLink.
Navigates to the specified URL using client-side routing.
- `UrlMatchMode` (type)
- `UseFormResult` (type) — The result returned by useForm, providing form state management and submission handling.
- `ValidationError` (type)
- `ValidationMode` (type) — Determines when validation errors are displayed.

- `'onSubmit'` - Errors shown only after form submission
- `'eager'` - Errors shown immediately as values change
- `'onTouched'` - Errors shown after
- `ValidatorResult` (type)
- `ValueOption` (type) — Represents a single selectable option with a value and label.

This is the primary option type used in dropdowns, select inputs, and comboboxes.
Each option has a unique value and a human-readable lab
- `WidgetFactory` (type) — Widget factory function signature
- `WithTemporalOptions` (type)
- `ZIndexName` (type) — Union type of all available z-index layer names.
- `ZonedDateTime` (type)
- `backgroundConfig` (variable) — Configuration object for background utility CSS generation.
Contains special color overrides, standard variant shade mappings for
light/dark modes, and color-specific overrides for 'white', 'black',
a
- `baseFontSize` (variable) — The base font size unit used as the foundation for the font size scale.
- `baseMotionDuration` (variable) — The base motion duration used as the foundation for the duration scale.
- `baseSpacing` (variable) — The base spacing unit used as the foundation for the spacing scale.
- `BeatUII18n` (variable) — The BeatUI internationalization provider.

This provider manages the loading and reactive delivery of BeatUI component
translations. It lazily loads locale files from the `./locales/` directory
and fa
- `beatuiPreset` (variable) — A ready-to-use BeatUI Tailwind preset with all default options.
- `bgColors` (variable) — Background color definitions for light and dark theme modes.
Each entry maps a background role to a `[ThemeColorName, ColorShade]` tuple.
- `borderColors` (variable) — Border color definitions for light and dark theme modes.
Each entry maps a border role to a `[ThemeColorName, ColorShade]` tuple.
- `borderWidth` (variable) — Border width scale mapping size names to CSS values.

| Name    | Value  | Usage                                |
|---------|--------|--------------------------------------|
| none    | 0      | No bo
- `breakpoints` (variable) — Breakpoint size definitions mapping size names to their `rem` values.

| Name | Value   | Pixels |
|------|---------|--------|
| sm   | 40rem   | 640px  |
| md   | 48rem   | 768px  |
| lg   | 64rem
- `colors` (variable) — Base color palette for BeatUI.

Defines the complete set of raw color values used as the foundation for the
design token color system. Colors are specified in OKLCH color space for
perceptual uniformi
- `colorShades` (variable) — Array of all available color shade values, ordered from lightest to darkest.
- `controlGap` (variable) — Semantic control gap scale for spacing between icon and text, items, etc.

| Name | Token reference  | Approx |
|------|------------------|--------|
| xs   | --spacing-xs     | 2px    |
| sm   | --spa
- `controlHeight` (variable) — Semantic control height scale. All values are multiples of `--spacing-base`,
so changing the base spacing unit scales every control uniformly.

| Name | Multiplier | Approx (at 0.25rem base) |
|------
- `ControllerValidation` (variable) — Helper object for creating ControllerValidation instances.
- `controlPaddingBlock` (variable) — Semantic control block (vertical) padding scale.

| Name | Token reference  | Approx |
|------|------------------|--------|
| xs   | --spacing-xs     | 2px    |
| sm   | --spacing-sm     | 4px    |
|
- `controlPaddingInline` (variable) — Semantic control inline (horizontal) padding scale.

| Name | Token reference  | Approx |
|------|------------------|--------|
| xs   | --spacing-md     | 8px    |
| sm   | --spacing-mdh    | 12px   |
- `defaultLocale` (variable) — The default locale code used by BeatUI when no locale is explicitly set.
- `defaultMessages` (variable) — The default messages for BeatUI components, sourced from the English locale.

This object serves as the fallback translation and as the type reference
for all locale-specific message bundles.
- `FIELD_LAYOUT_DEFAULTS` (variable) — Default values for the FieldLayout provider.
- `FieldLayout` (variable) — Provider that cascades form layout configuration to descendant `Field` components.

Typically provided by a `Fieldset`, but can also be used directly via `Provide`:
- `Filter` (variable) — Ergonomic builder namespace for constructing filter descriptors.
- `fontFamily` (variable) — Font family stacks mapping family names to ordered arrays of font names.
Each stack provides a comprehensive fallback chain including system fonts and emoji support.
- `fontSize` (variable) — Font size scale mapping size names to `[fontSize, { lineHeight }]` tuples.
Each entry provides a font size derived from `--font-size-base` via `calc()`
and its recommended line height. When `--font-si
- `fontWeight` (variable) — Font weight scale mapping weight names to their numeric CSS values.

| Name       | Value |
|------------|-------|
| thin       | 100   |
| extralight | 200   |
| light      | 300   |
| normal     | 4
- `FormStatus` (variable) — Factory object for creating FormStatus values.

Provides pre-built instances for `filling`, `submitting`, and `success`,
and a factory function for creating `error` statuses with a message.
- `Grow` (variable) — Allow the container to grow (flex-grow: 1).
- `interactiveColors` (variable) — Interactive color definitions for light and dark theme modes.
Used for focus rings, hover backgrounds, and active state backgrounds.
- `isIndexedDBAvailable` (variable)
- `letterSpacing` (variable) — Letter spacing scale mapping names to `em`-based values.

| Name    | Value    |
|---------|----------|
| tighter | -0.05em  |
| tight   | -0.025em |
| normal  | 0em      |
| wide    | 0.025em  |
| wi
- `lineHeight` (variable) — Line height scale mapping names to unitless multiplier values.

| Name    | Value |
|---------|-------|
| none    | 1     |
| tight   | 1.25  |
| snug    | 1.375 |
| normal  | 1.5   |
| relaxed | 1.62
- `Locale` (variable) — Locale provider that manages the current application locale with persistent storage.

Features:
- Automatically detects browser language as default
- Persists locale selection to localStorage with key
- `LOGICAL_PROPERTY_MAP` (variable) — Direction-aware logical property mappings
Maps logical properties to physical properties based on direction
- `motionDurations` (variable) — Motion duration scale mapping names to CSS time values.
All values (except `instant`) are derived from `--motion-duration-base`
via `calc()`, allowing the entire timing scale to be adjusted by changin
- `motionEasings` (variable) — Motion easing curve definitions mapping names to CSS `cubic-bezier()` values.

| Name       | Curve                          | Use case                |
|------------|--------------------------------|
- `NotificationProvider` (variable) — Provider that manages the notification system lifecycle. Creates a notification
queue, registers with the global NotificationService, and exposes
`show` / `clear` methods to consumers via the Tempo pr
- `NotificationService` (variable) — Global singleton notification service that delegates to the most recently
attached NotificationProvider. Use this to show notifications
imperatively from anywhere in the application without needing di
- `NoWrap` (variable) — Prevent items from wrapping.
- `NullableEmailInput` (variable) — A nullable variant of EmailInput that maps between `string | null` and `string`.

Empty strings are converted to `null` on change, and `null` values are displayed
as empty strings. Includes a reset bu
- `NullablePasswordInput` (variable) — A nullable variant of PasswordInput that maps between `string | null` and `string`.

Empty strings are converted to `null` on change, and `null` values are displayed
as empty strings. Includes a reset
- `NullablePlainDateInput` (variable) — A nullable variant of PlainDateInput for `PlainDate | null` values.

Renders a native HTML `date` input that can be cleared to `null`.
Created via createNullableTemporalInput with `PlainDate` serializ
- `NullablePlainDateTimeInput` (variable) — A nullable variant of PlainDateTimeInput for `PlainDateTime | null` values.

Renders a native HTML `datetime-local` input that can be cleared to `null`.
Created via createNullableTemporalInput with `P
- `NullablePlainTimeInput` (variable) — A nullable variant of PlainTimeInput for `PlainTime | null` values.

Renders a native HTML `time` input that can be cleared to `null`.
Created via createNullableTemporalInput with `PlainTime` serializ
- `NullablePlainYearMonthInput` (variable) — A nullable variant of PlainYearMonthInput for `PlainYearMonth | null` values.

Renders a native HTML `month` input that can be cleared to `null`.
Created via createNullableTemporalInput with `PlainYea
- `NullableTextArea` (variable) — A nullable variant of TextArea that maps between `string | null` and `string`.

Empty strings are converted to `null` on change, and `null` values are displayed
as empty strings. Includes a reset butt
- `NullableTextInput` (variable) — A nullable variant of TextInput that maps between `string | null` and `string`.

Empty strings are converted to `null` on change, and `null` values are displayed
as empty strings. Includes a reset but
- `NullableUrlInput` (variable) — A nullable variant of UrlInput that maps between `string | null` and `string`.

Empty strings are converted to `null` on change, and `null` values are displayed
as empty strings. Includes a reset butt
- `NullableUuidInput` (variable) — A nullable variant of UuidInput that maps between `string | null` and `string`.

Empty strings are converted to `null` on change, and `null` values are displayed
as empty strings. Includes a reset but
- `Option` (variable) — Utility namespace for creating and manipulating option structures.

Provides factory functions for creating options, groups, and breaks, as well as
helper methods for extracting values and checking op
- `outlineWidth` (variable) — Outline width scale mapping size names to CSS values.

| Name    | Value | Usage                            |
|---------|-------|----------------------------------|
| none    | 0     | No outline
- `overlayMinWidth` (variable) — Minimum width for overlay components (menus, dropdowns, popovers).
- `overlayWidth` (variable) — Semantic overlay/container width scale for modals, tooltips, menus, etc.

| Name      | Value               | Approx |
|-----------|---------------------|--------|
| xs        | min(20rem, 90vw)    |
- `PlainDateInput` (variable) — An input component for `Temporal.PlainDate` values.

Renders a native HTML `date` input. Created via createTemporalInput
with `PlainDate` serialization. Requires the Temporal polyfill.
- `PlainDateTimeInput` (variable) — An input component for `Temporal.PlainDateTime` values.

Renders a native HTML `datetime-local` input. Created via createTemporalInput
with `PlainDateTime` serialization. Requires the Temporal polyfil
- `PlainTimeInput` (variable) — An input component for `Temporal.PlainTime` values.

Renders a native HTML `time` input. Created via createTemporalInput
with `PlainTime` serialization. Requires the Temporal polyfill.
- `PlainYearMonthInput` (variable) — An input component for `Temporal.PlainYearMonth` values.

Renders a native HTML `month` input. Created via createTemporalInput
with `PlainYearMonth` serialization. Requires the Temporal polyfill.
- `radius` (variable) — Radius scale definitions mapping size names to CSS values.
Values are expressed as multiples of the base spacing variable.

| Name | Value              | Approx |
|------|--------------------|--------
- `RequiredSymbol` (variable) — A visual indicator (asterisk) appended to labels for required fields.

Renders as a red asterisk (" *") with the `bc-field__required` class.
- `semanticColorNames` (variable) — Tuple of all semantic color names, used for iteration and validation.
- `semanticColors` (variable) — Default mapping from semantic color names to base color names.
- `semanticFontNames` (variable) — Tuple of all semantic font role names.
- `semanticMotionNames` (variable) — Tuple of all semantic motion role names, covering both transition
durations and easing curves.
- `semanticRadiusNames` (variable) — Tuple of all semantic radius role names.
- `semanticShadowNames` (variable) — Tuple of all semantic shadow role names.
- `semanticSpacingNames` (variable) — Tuple of all semantic spacing names, used for stack/gap spacing roles.
- `semanticTextShadowNames` (variable) — Tuple of all semantic text shadow role names.
- `shadows` (variable) — Box shadow scale definitions mapping size names to CSS `box-shadow` values.
Includes standard (bottom-facing) and `top-*` (top-facing) variants.

Standard shadows project downward; `top-*` shadows pro
- `SidebarContext` (variable) — Provider for the sidebar context, allowing child components to access the sidebar's
background mode. Uses the Tempo provider pattern with a `mark` and `create` function.
- `spacing` (variable) — Spacing scale definitions mapping size names to CSS values.
All values (except `none`, `px`, `base`, and `full`) are computed
as multiples of `var(--spacing-base)`.

| Name | Value
- `textColors` (variable) — Text color definitions for light and dark theme modes.
Each entry maps a text role to a `[ThemeColorName, ColorShade]` tuple.
- `textShadows` (variable) — Text shadow scale definitions mapping size names to CSS `text-shadow` values.
Shadows increase in intensity from `2xs` (subtle) to `lg` (dramatic).
- `Theme` (variable) — Theme provider that manages light/dark appearance mode.
Tracks system appearance, user preference, and persists settings to localStorage.
The resolved appearance is available as a reactive signal.
- `themeColorNames` (variable) — Array of all available theme color names, combining semantic colors,
base palette colors, and the special 'black' and 'white' values.
- `Use` (variable)
- `Wrap` (variable) — Allow items to wrap to the next line.
- `zIndex` (variable) — Z-index scale definitions mapping layer names to numeric values.

| Name         | Value | Use case                |
|--------------|-------|-------------------------|
| base         | 0     | Default
- `Accordion` (function)
- `ActionCard` (function)
- `AlertDialog` (function)
- `Align` (function)
- `AlphaChannelPicker` (function)
- `AnimatedToggle` (function)
- `AnimatedToggleClass` (function)
- `AnnouncementBar` (function)
- `AppearanceSelector` (function)
- `AppShell` (function)
- `AutoColorBadge` (function)
- `Avatar` (function)
- `AvatarGroup` (function)
- `AvatarGroupOverflow` (function)
- `Badge` (function)
- `Base64Input` (function)
- `Base64sInput` (function)
- `BaseComboboxControl` (function)
- `BaseComboboxTagsControl` (function)
- `BaseControl` (function)
- `BaseDropdownControl` (function)
- `BaseListControl` (function)
- `BaseMappedControl` (function)
- `BaseMultiSelectControl` (function)
- `BaseNativeSelectControl` (function)
- `BaseSelectTagsControl` (function)
- `BaseVideoPlayer` (function)
- `BeatUI` (function)
- `BigintInput` (function)
- `BlockCommandPalette` (function)
- `boolean` (function)
- `Breadcrumbs` (function)
- `Button` (function)
- `ButtonLink` (function)
- `Card` (function)
- `CardBody` (function)
- `CardCoverImage` (function)
- `CardFooter` (function)
- `CardHeader` (function)
- `Carousel` (function)
- `Center` (function)
- `CenterH` (function)
- `changeFontSize` (function)
- `ChannelPicker` (function)
- `CheckboxInput` (function)
- `Chips` (function)
- `CloseButton` (function)
- `Collapse` (function)
- `CollapsibleSidebarGroup` (function)
- `ColorField` (function)
- `ColorInput` (function)
- `colorInputOptionsFromController` (function)
- `ColorSwatchInput` (function)
- `ColumnFilter` (function)
- `ColumnFilterPanel` (function)
- `ColumnHeaderMenu` (function)
- `ComboboxControl` (function)
- `ComboboxInput` (function)
- `ComboboxTagsControl` (function)
- `ComboboxTagsInput` (function)
- `CommonInputAttributes` (function)
- `compareBreakpoint` (function)
- `ConfirmationDialog` (function)
- `ConfirmModal` (function)
- `connectCommonAttributes` (function)
- `connectNumberInput` (function)
- `connectStringInput` (function)
- `Control` (function)
- `convertStandardSchemaIssues` (function)
- `convertStandardSchemaPathToPath` (function)
- `CopyButton` (function)
- `createBeatuiPreset` (function)
- `createCarousel` (function)
- `createColorController` (function)
- `createDataSource` (function)
- `createLocationMatcher` (function)
- `createQueryDataSource` (function)
- `createSpotlight` (function)
- `createStandardSchema` (function)
- `createStepper` (function)
- `DangerLabel` (function)
- `DataTable` (function)
- `DataToolbar` (function)
- `DateInput` (function)
- `DatePicker` (function)
- `DateRangePicker` (function)
- `DateRangeSelect` (function)
- `DateRangeSelectShell` (function)
- `DateSelect` (function)
- `DateTimeInput` (function)
- `DateTimeSelect` (function)
- `DateTimeSelectShell` (function)
- `deepMergeDefaults` (function)
- `delaySignal` (function)
- `describeBuiltinFilter` (function)
- `describeBuiltinFilterLocalized` (function)
- `describeFilter` (function)
- `describeFilterLocalized` (function)
- `Divider` (function)
- `downloadContent` (function)
- `downloadFile` (function)
- `downloadUrl` (function)
- `downloadUrlAndMonitor` (function)
- `drawCheckerboard` (function)
- `Drawer` (function)
- `drawHueCanvas` (function)
- `DropdownBase` (function)
- `DropdownControl` (function)
- `DropdownInput` (function)
- `DurationInput` (function)
- `EditableText` (function)
- `EmailInput` (function)
- `emitExpando` (function)
- `emitOptionExpando` (function)
- `EmphasisLabel` (function)
- `EmptyState` (function)
- `emptyToNull` (function)
- `EnsureControl` (function)
- `ensureTemporal` (function)
- `evaluateBuiltinFilter` (function)
- `evaluateFilterExpr` (function)
- `Expando` (function)
- `Field` (function)
- `Fieldset` (function)
- `FileInput` (function)
- `FilesInput` (function)
- `fileToBase64` (function)
- `findBreakpoint` (function)
- `Flyout` (function)
- `FocusTrap` (function)
- `forFormat` (function)
- `formatBigInt` (function)
- `FormatBigInt` (function)
- `formatDate` (function)
- `FormatDate` (function)
- `formatDateTime` (function)
- `FormatDateTime` (function)
- `formatDisplayName` (function)
- `FormatDisplayName` (function)
- `formatFileSize` (function)
- `FormatFileSize` (function)
- `formatList` (function)
- `FormatList` (function)
- `formatNumber` (function)
- `FormatNumber` (function)
- `formatPlural` (function)
- `FormatPlural` (function)
- `formatRelativeTime` (function)
- `FormatRelativeTime` (function)
- `formatTime` (function)
- `FormatTime` (function)
- `formatTime12` (function)
- `formatTime12WithSeconds` (function)
- `formatTime24` (function)
- `formatTime24WithSeconds` (function)
- `formatTimeAuto` (function)
- `forTypeAndFormat` (function)
- `forXUI` (function)
- `Gap` (function)
- `generateAllTokenVariables` (function)
- `generateBadgeClasses` (function)
- `generateBadgeStyles` (function)
- `generateBorderWidthVariables` (function)
- `generateBreakpointVariables` (function)
- `generateButtonClasses` (function)
- `generateButtonStyles` (function)
- `generateColorVariables` (function)
- `generateControlGapVariables` (function)
- `generateControlHeightVariables` (function)
- `generateControlPaddingVariables` (function)
- `generateControlTokenVariables` (function)
- `generateCoreColorVariables` (function)
- `generateCoreTokenVariables` (function)
- `generateFontFamilyOverrideVariables` (function)
- `generateInputContainerInputClasses` (function)
- `generateLinkClasses` (function)
- `generateLinkStyles` (function)
- `generateMotionVariables` (function)
- `generateNotificationClasses` (function)
- `generateNotificationStyles` (function)
- `generateOutlineWidthVariables` (function)
- `generateOverlayWidthVariables` (function)
- `generatePaginationRange` (function)
- `generatePaginationStyles` (function)
- `generateProgressBarClasses` (function)
- `generateProgressBarStyles` (function)
- `generateRadiusVariables` (function)
- `generateSemanticColorVariables` (function)
- `generateSemanticFontVariables` (function)
- `generateSemanticMotionVariables` (function)
- `generateSemanticRadiusVariables` (function)
- `generateSemanticShadowVariables` (function)
- `generateSemanticSpacingVariables` (function)
- `generateSemanticTextShadowVariables` (function)
- `generateSemanticTokenVariables` (function)
- `generateShadowVariables` (function)
- `generateSkeletonClasses` (function)
- `generateSkeletonStyles` (function)
- `generateSpacingVariables` (function)
- `generateTextShadowVariables` (function)
- `generateTypographyVariables` (function)
- `generateZIndexVariables` (function)
- `getBaseFontSizeVar` (function)
- `getBaseFontSizeVarName` (function)
- `getBaseMotionDurationVar` (function)
- `getBaseMotionDurationVarName` (function)
- `getBorderWidthVar` (function)
- `getBorderWidthVarName` (function)
- `getBreakpointMediaQuery` (function)
- `getBreakpointVar` (function)
- `getBreakpointVarName` (function)
- `getColorVar` (function)
- `getColorVarName` (function)
- `getControlGapVar` (function)
- `getControlGapVarName` (function)
- `getControlHeightVar` (function)
- `getControlHeightVarName` (function)
- `getControlPaddingBlockVar` (function)
- `getControlPaddingBlockVarName` (function)
- `getControlPaddingInlineVar` (function)
- `getControlPaddingInlineVarName` (function)
- `getDirectionClassName` (function)
- `getDirectionFromLocale` (function)
- `getFontFamilyVar` (function)
- `getFontFamilyVarName` (function)
- `getFontSizeLineHeightVar` (function)
- `getFontSizeLineHeightVarName` (function)
- `getFontSizeVar` (function)
- `getFontSizeVarName` (function)
- `getFontWeightVar` (function)
- `getFontWeightVarName` (function)
- `getIconLocally` (function)
- `getLetterSpacingVar` (function)
- `getLetterSpacingVarName` (function)
- `getLineHeightVar` (function)
- `getLineHeightVarName` (function)
- `getMotionDurationVar` (function)
- `getMotionDurationVarName` (function)
- `getMotionEasingVar` (function)
- `getMotionEasingVarName` (function)
- `getOppositeDirection` (function)
- `getOutlineWidthVar` (function)
- `getOutlineWidthVarName` (function)
- `getOverlayWidthVar` (function)
- `getOverlayWidthVarName` (function)
- `getPhysicalProperty` (function)
- `getRadiusMediaQuery` (function)
- `getRadiusVar` (function)
- `getRadiusVarName` (function)
- `getSemanticFontVar` (function)
- `getSemanticFontVarName` (function)
- `getSemanticMotionVarName` (function)
- `getSemanticRadiusVarName` (function)
- `getSemanticShadowVarName` (function)
- `getSemanticSpacingVarName` (function)
- `getSemanticTextShadowVarName` (function)
- `getShadowVar` (function)
- `getShadowVarName` (function)
- `getSpacingVar` (function)
- `getSpacingVarName` (function)
- `getTextShadowVar` (function)
- `getTextShadowVarName` (function)
- `getTokenValue` (function)
- `getZIndexVar` (function)
- `getZIndexVarName` (function)
- `Group` (function)
- `HexColorPicker` (function)
- `HistoryTimeline` (function)
- `HslColorPicker` (function)
- `HwbColorPicker` (function)
- `Icon` (function)
- `increaseSize` (function)
- `Indicator` (function)
- `inferValueType` (function)
- `InputAdornment` (function)
- `InputContainer` (function)
- `InputIcon` (function)
- `InstantInput` (function)
- `isBuiltinFilter` (function)
- `isRTLLocale` (function)
- `isUrlMatch` (function)
- `Justify` (function)
- `Kbd` (function)
- `Label` (function)
- `LazyNativeSelect` (function)
- `Lightbox` (function)
- `Link` (function)
- `LinkPortal` (function)
- `ListControl` (function)
- `ListInput` (function)
- `ListItemControls` (function)
- `LoadingOverlay` (function)
- `LocaleSelector` (function)
- `localeUses12Hour` (function)
- `makeI18nProvider` (function)
- `makeMapValidation` (function)
- `makeMessages` (function)
- `makeOnBlurHandler` (function)
- `makeOnChangeHandler` (function)
- `mapInputOptions` (function)
- `MappedControl` (function)
- `MaskInput` (function)
- `Menu` (function)
- `MenuItem` (function)
- `MenuSeparator` (function)
- `Modal` (function)
- `MultiSelect` (function)
- `MultiSelectControl` (function)
- `MutedLabel` (function)
- `NativePdfPreview` (function)
- `NativeSelect` (function)
- `NativeSelectControl` (function)
- `NavigationLink` (function)
- `NavigationProgress` (function)
- `NineSliceScrollView` (function)
- `normalizeColorName` (function)
- `Notice` (function)
- `Notification` (function)
- `NotificationPanel` (function)
- `NotificationViewport` (function)
- `NullableBigintInput` (function)
- `NullableColorInput` (function)
- `NullableColorSwatchInput` (function)
- `NullableDateInput` (function)
- `NullableDateSelect` (function)
- `NullableDateTimeInput` (function)
- `NullableDateTimeSelect` (function)
- `NullableDurationInput` (function)
- `NullableInstantInput` (function)
- `NullableMaskInput` (function)
- `NullableNumberInput` (function)
- `NullablePlainMonthDayInput` (function)
- `NullableRatingInput` (function)
- `NullableSliderInput` (function)
- `NullableTimeSelect` (function)
- `NullableZonedDateTimeInput` (function)
- `nullToEmpty` (function)
- `NumberInput` (function)
- `NumberStepper` (function)
- `object` (function)
- `OklchColorPicker` (function)
- `OnboardingTour` (function)
- `OpenDateRangeSelect` (function)
- `OpenGraph` (function)
- `OtpInput` (function)
- `Overlay` (function)
- `PageDropZone` (function)
- `Pagination` (function)
- `parsePath` (function)
- `PasswordInput` (function)
- `pathToString` (function)
- `PDFJSPreview` (function)
- `PdfPageViewer` (function)
- `PlainMonthDayInput` (function)
- `Popover` (function)
- `PresenceCursor` (function)
- `PresenceHighlight` (function)
- `PresenceSelectionMark` (function)
- `ProgressBar` (function)
- `PromptDialog` (function)
- `QueryDataTable` (function)
- `RadioGroup` (function)
- `RangeSlider` (function)
- `RatingInput` (function)
- `renderDetailRow` (function)
- `renderToggleCell` (function)
- `renderToggleFilterCell` (function)
- `renderToggleHeaderCell` (function)
- `resolveDirection` (function)
- `resolvePluralCategory` (function)
- `resolveSemanticColorMap` (function)
- `RgbColorPicker` (function)
- `Ribbon` (function)
- `ScrollablePanel` (function)
- `SegmentedInput` (function)
- `SegmentedSelect` (function)
- `SelectAllCheckbox` (function)
- `SelectionCheckbox` (function)
- `SelectTagsControl` (function)
- `SelectTagsInput` (function)
- `sessionId` (function)
- `Sidebar` (function)
- `SidebarActiveLink` (function)
- `SidebarClickLink` (function)
- `SidebarGroup` (function)
- `SidebarLink` (function)
- `SidebarSeparator` (function)
- `SidebarUrlLink` (function)
- `Sink` (function)
- `Skeleton` (function)
- `SliderInput` (function)
- `SortableHeader` (function)
- `SortableList` (function)
- `Spotlight` (function)
- `Stack` (function)
- `StandaloneAppearanceSelector` (function)
- `standardSchemaResultToValidation` (function)
- `StatCard` (function)
- `StatCardIcon` (function)
- `StatCardLabel` (function)
- `StatCardSparkline` (function)
- `StatCardTrend` (function)
- `StatCardValue` (function)
- `Stepper` (function)
- `storeIconLocally` (function)
- `string` (function)
- `StylePortal` (function)
- `Switch` (function)
- `Table` (function)
- `Tabs` (function)
- `TagInput` (function)
- `TagsInput` (function)
- `taskToValidation` (function)
- `TextArea` (function)
- `TextInput` (function)
- `ThemeAppearance` (function)
- `TimePicker` (function)
- `TimeSelect` (function)
- `TimeSelectShell` (function)
- `ToggleButton` (function)
- `ToggleButtonGroup` (function)
- `Toolbar` (function)
- `ToolbarButton` (function)
- `ToolbarDivider` (function)
- `ToolbarGroup` (function)
- `ToolbarSpacer` (function)
- `Tooltip` (function)
- `TransferList` (function)
- `transformEmptyStringToUndefined` (function)
- `transformNullToUndefined` (function)
- `transformUndefinedToNull` (function)
- `TreeView` (function)
- `TriStateCheckboxInput` (function)
- `UnstyledDropZone` (function)
- `UrlInput` (function)
- `useAnimatedElementToggle` (function)
- `useAnimatedToggle` (function)
- `useController` (function)
- `useFocusTrap` (function)
- `useForm` (function)
- `useTimedToggle` (function)
- `UuidInput` (function)
- `VirtualList` (function)
- `WithBeatUIBreakpoint` (function)
- `WithBeatUIElementBreakpoint` (function)
- `WithBreakpoint` (function)
- `WithTemporal` (function)
- `wrapSegment` (function)
- `ZonedDateTimeInput` (function)

### JSON Schema

- `SchemaContext` (class)
- `AjvBuildOptions` (interface) — Configuration options for building AJV instances with external reference support.
- `JSONSchema` (interface) — Represents a complete JSON Schema object supporting draft-07, 2019-09, and 2020-12 keywords.

This interface provides a unified type covering all standard JSON Schema keywords across
multiple specific
- `JSONSchemaFormExternalOptions` (interface) — Configuration options for JSONSchemaForm external reference resolution.
- `JSONSchemaFormProps` (interface) — Props for the JSONSchemaForm component.
- `AllOfMergeResult` (type) — Result of merging multiple schemas via `allOf` composition.

Contains the successfully merged schema along with any conflicts
that were encountered during the merge process.
- `BuildAjvResult` (type) — Result type for AJV instance creation and schema compilation.
Uses discriminated union for type-safe error handling.
- `ExternalRefResolver` (type) — External reference resolver function type.
Called when the form encounters external $ref URIs that need to be resolved.
- `JSONSchemaDefinition` (type) — A JSON Schema definition, which can be either a full schema object or a boolean.

When `true`, it accepts any value. When `false`, it rejects all values.
This is used in subschema positions like `addi
- `JSONSchemaType` (type) — Universal JSON Schema type identifiers that work across draft-07, 2019-09, and 2020-12.

These represent the fundamental data types recognized by all JSON Schema drafts.
- `NotViolation` (type) — Represents a violation of a `not` schema constraint.

A not violation occurs when the current value matches a schema
specified in the `not` keyword, meaning the value is disallowed.
- `SchemaConflict` (type) — Represents a conflict discovered when merging schemas in an `allOf` composition.

Schema conflicts occur when two or more subschemas in an `allOf` specify
incompatible constraints for the same propert
- `SchemaContextOptions` (type)
- `ajvErrorsToControllerValidation` (function)
- `ajvErrorsToDependencies` (function)
- `buildMessage` (function)
- `buildPath` (function)
- `clearCaches` (function)
- `clearCachesForAjv` (function)
- `compileWithCache` (function)
- `composeEffectiveObjectSchema` (function)
- `createAJVStandardSchema` (function)
- `createDiagnosticWidget` (function)
- `evaluateIfThenElseOverlay` (function)
- `evaluateNotViolation` (function)
- `extractSchemaDefaults` (function)
- `getAjvForSchema` (function)
- `getCacheStats` (function)
- `getEvaluatedProperties` (function)
- `hasConditionalFeatures` (function)
- `jsonPointerToSegments` (function)
- `JSONSchemaAllOf` (function)
- `JSONSchemaAny` (function)
- `JSONSchemaAnyOf` (function)
- `JSONSchemaArray` (function)
- `JSONSchemaBoolean` (function)
- `JSONSchemaConst` (function)
- `JSONSchemaControl` (function)
- `JSONSchemaEnum` (function)
- `JSONSchemaForm` (function)
- `JSONSchemaGenericControl` (function)
- `JSONSchemaInteger` (function)
- `JSONSchemaNull` (function)
- `JSONSchemaNumber` (function)
- `JSONSchemaObject` (function)
- `JSONSchemaOneOf` (function)
- `JSONSchemaString` (function)
- `JSONSchemaUnion` (function)
- `mergeAllOf` (function)

### JSON Schema Display

- `DisplayWidgetRegistry` (class) — Display widget registry for managing custom display widgets
- `DisplayWidgetRegistration` (interface) — Display widget registration entry
- `JSONSchemaDisplayProps` (interface)
- `Mismatch` (interface)
- `CustomDisplayWidgets` (type) — Array of custom display widget registrations
- `DisplayWidgetFactory` (type) — Display widget factory function signature.
Unlike form WidgetFactory, takes a read-only Value<unknown> instead of Controller<T>.
- `MismatchKind` (type)
- `AnyDisplay` (function)
- `ArrayDisplay` (function)
- `BooleanDisplay` (function)
- `CompositionDisplay` (function)
- `detectMismatches` (function)
- `DisplayWrapper` (function)
- `EnumConstDisplay` (function)
- `forDisplayFormat` (function)
- `forDisplayTypeAndFormat` (function)
- `forDisplayXUI` (function)
- `GenericDisplay` (function)
- `JSONSchemaDisplay` (function)
- `NullDisplay` (function)
- `NumberDisplay` (function)
- `ObjectDisplay` (function)
- `StringDisplay` (function)

### JSON Structure

- `DefaultWidgetRegistry` (class) — Default implementation of WidgetRegistry
- `RefResolver` (class) — Track visited refs to detect circular references
- `StructureContext` (class) — Immutable context for JSON Structure form rendering
- `Altnames` (interface) — Alternative names for a type definition, supporting language-specific labels.
- `ArrayTypeDefinition` (interface) — Type definition for ordered, variable-length array types.
- `ArrayValidation` (interface) — Validation constraints for array and set types.
- `BaseTypeDefinition` (interface) — Base type definition shared by all JSON Structure types.

Extends TypeMetadata with type specification, inheritance, enum, and const support.
- `ChoiceTypeDefinition` (interface) — Type definition for choice types (tagged unions / discriminated unions).

Each choice variant has a name and a type definition. An optional `selector`
property specifies the discriminator field name.
- `DecimalTypeDefinition` (interface) — Type definition for arbitrary-precision decimal types.

Extends numeric validation with `precision` and `scale` for fixed-point decimals.
- `FloatTypeDefinition` (interface) — Type definition for floating-point types (float, double) with optional numeric validation.
- `FormattedValidationError` (interface) — User-friendly validation error
- `GenericControlProps` (interface) — Props for the generic control
- `InheritanceError` (interface)
- `InheritanceResult` (interface) — Result of resolving inheritance
- `IntegerTypeDefinition` (interface) — Type definition for integer types (int8 through uint128) with optional numeric validation.
- `JSONStructureFormProps` (interface) — Props for JSONStructureForm component
- `JSONStructureSchema` (interface) — Root document type for a JSON Structure schema.

Represents a complete schema document with metadata, definitions, and optional
root-level object properties. This is the top-level type passed to
JSONS
- `MapTypeDefinition` (interface) — Type definition for map types (key-value pairs).

Keys are always strings; the `values` property defines the type for all values.
- `Namespace` (interface) — A namespace object for organizing type definitions hierarchically.

Namespaces can contain type definitions or nested namespaces,
but are not types themselves (they have no `type`, `$ref`, `enum`, or
- `NumericValidation` (interface) — Validation constraints for numeric types (integers and floats).

Values can be specified as `number` or `string` (the latter for BigInt precision).
- `ObjectTypeDefinition` (interface) — Type definition for object types with named properties.
- `ObjectValidation` (interface) — Validation constraints for object and map types.
- `RawValidationError` (interface) — Validation error from the JSON Structure validator
- `ResolvedWidget` (interface) — Resolved widget ready for use
- `SetTypeDefinition` (interface) — Type definition for set types (arrays with unique items).

Semantically equivalent to an array with `uniqueItems: true`,
but explicitly typed as 'set' for clarity.
- `StringTypeDefinition` (interface) — Type definition for string types with optional validation constraints.
- `StringValidation` (interface) — Validation constraints for string types.
- `StructureContextOptions` (interface) — Options for creating a StructureContext
- `StructureContextUpdates` (interface) — Updates that can be passed to context.with()
- `StructureValidator` (interface) — JSON Structure validator
- `TupleTypeDefinition` (interface) — Type definition for tuple types (fixed-length ordered elements).

The `tuple` array defines the order of elements by referencing keys in `properties`.
Each element has a named definition, but serializ
- `TypeMetadata` (interface) — Metadata annotations for a type definition.

These properties provide human-readable information and hints
for documentation, UI rendering, and deprecation tracking.
- `TypeReference` (interface) — A reference to a type definition defined elsewhere in the schema.

Uses the `$ref` keyword to point to a named type in the `definitions` section.
- `ValidationResult` (interface) — Validation result
- `ValidatorOptions` (interface) — Validator options
- `WidgetFactory` (interface) — Factory function to create a widget
- `WidgetOptions` (interface) — Options extracted from widget configuration
- `WidgetProps` (interface) — Props passed to widget factories
- `WidgetRegistration` (interface) — Widget registration entry
- `WidgetRegistrationOptions` (interface)
- `WidgetRegistry` (interface) — Widget registry interface
- `BigIntType` (type) — Integer types that require BigInt for full precision.

These types exceed the safe integer range of JavaScript's `number` type
and must be represented as `bigint` values.
- `CompoundType` (type) — Compound (complex) type keywords supported by JSON Structure.

These types contain or compose other types: objects, arrays, sets (unique arrays),
maps (key-value pairs), tuples (fixed-length ordered e
- `FloatType` (type) — All floating-point type keywords.

- `float` - IEEE 754 single-precision (32-bit)
- `double` - IEEE 754 double-precision (64-bit)
- `decimal` - Arbitrary-precision decimal
- `IntegerType` (type) — Union of all integer type keywords (signed and unsigned).
- `NumericType` (type) — Union of all numeric type keywords (integer and floating-point).
- `PrimitiveType` (type) — All primitive type keywords supported by JSON Structure.

Includes string, boolean, null, signed/unsigned integers of various sizes,
floating-point types, temporal types, UUID, URI, and binary.
- `SignedIntegerType` (type) — All signed integer type keywords (int8 through int128).
- `TemporalType` (type) — All temporal (date/time) type keywords.

- `date` - Calendar date (ISO 8601 `YYYY-MM-DD`)
- `datetime` - Date with time (ISO 8601 `YYYY-MM-DDTHH:MM:SS`)
- `time` - Time of day (ISO 8601 `HH:MM:SS`)
-
- `TypeDefinition` (type) — Union of all possible type definitions in a JSON Structure schema.

This is the primary type used to represent any field or property definition.
- `TypeKeyword` (type) — Union of all type keywords (primitive and compound) in JSON Structure.
- `TypeSpecifier` (type) — Specifies a type as a keyword, array of keywords (union), or a reference.

- A single `TypeKeyword` for a simple type
- An array of `TypeKeyword` for union types (e.g., `['string', 'null']`)
- A `Type
- `UnsignedIntegerType` (type) — All unsigned integer type keywords (uint8 through uint128).
- `ValidationMode` (type) — Validation mode for the form
- 'onSubmit': Validate only when form is submitted
- 'onTouched': Validate fields after they are touched
- 'eager': Validate fields as they change
- `INTEGER_BOUNDS` (variable) — Integer type bounds
- `createExtendsResolver` (function)
- `createRefResolver` (function)
- `createStructureContext` (function)
- `createValidator` (function)
- `createWidgetRegistry` (function)
- `ensureDefaultWidgets` (function)
- `extractStructureDefaults` (function)
- `forFormat` (function)
- `forMatcher` (function)
- `formatValidationError` (function)
- `formatValidationErrors` (function)
- `forType` (function)
- `forTypeAndFormat` (function)
- `getChildErrors` (function)
- `getErrorsForPath` (function)
- `getExplicitWidgetName` (function)
- `getGlobalWidgetRegistry` (function)
- `getNonNullTypes` (function)
- `getResolvedType` (function)
- `getWidgetOptions` (function)
- `groupErrorsByPath` (function)
- `hasConstValue` (function)
- `hasCustomWidget` (function)
- `hasDefaultWidgets` (function)
- `hasEnumValue` (function)
- `hasErrorsAtPath` (function)
- `isArrayTypeDefinition` (function)
- `isBigIntType` (function)
- `isChoiceTypeDefinition` (function)
- `isCompoundType` (function)
- `isFloatType` (function)
- `isIntegerType` (function)
- `isMapTypeDefinition` (function)
- `isNamespace` (function)
- `isNullableType` (function)
- `isNumericType` (function)
- `isObjectTypeDefinition` (function)
- `isPrimitiveType` (function)
- `isSetTypeDefinition` (function)
- `isTemporalType` (function)
- `isTupleTypeDefinition` (function)
- `isTypeDefinition` (function)
- `isTypeReference` (function)
- `JSONStructureForm` (function)
- `mergeWidgetOptions` (function)
- `parseRefPath` (function)
- `registerDefaultWidgets` (function)
- `resolveExtends` (function)
- `resolveRef` (function)
- `resolveTypeReference` (function)
- `resolveWidget` (function)
- `resolveWidgetWithOverride` (function)
- `setGlobalWidgetRegistry` (function)
- `StructureControl` (function)
- `StructureGenericControl` (function)
- `validate` (function)

### Lexical

- `DecoratorNode` (class)
- `ElementNode` (class)
- `HorizontalRuleNode` (class)
- `TextNode` (class)
- `AutoLinkMatcher` (interface) — Auto-link matcher definition
- `AutoLinkPluginOptions` (interface) — Options for the auto-link plugin
- `BlockCommand` (interface)
- `BlockHandleOptions` (interface)
- `CharacterCountInfo` (interface) — Character count information
- `CodePluginOptions` (interface) — Options for the code plugin
- `CollaborationConfig` (interface) — Collaboration configuration (Yjs)
- `CollaborationUser` (interface) — User information for collaboration
- `CustomToolbarGroup` (interface) — A custom group definition containing one or more custom items.
- `EditorState` (interface)
- `FloatingToolbarOptions` (interface)
- `HashtagPluginOptions` (interface) — Options for the hashtag plugin
- `HeadlessEditorOptions` (interface) — Options for headless editor (no UI)
- `HistoryPluginOptions` (interface) — Options for the history plugin
- `LexicalEditor` (interface)
- `LexicalNode` (interface)
- `LexicalPluginDefinition` (interface) — Plugin definition for Lexical editor
- `LexicalToolbarOptions` (interface)
- `MarkMetadata` (interface) — Mark/annotation metadata
- `MarkPluginCallbacks` (interface) — Callbacks for mark plugin
- `OverflowPluginOptions` (interface) — Options for the overflow plugin
- `PluginConfig` (interface) — Configuration for built-in editor plugins
- `SelectionInfo` (interface) — Selection information
- `SerializedEditorState` (interface)
- `SlashCommandCallbacks` (interface)
- `SlashCommandDefinition` (interface) — Slash command definition
- `SlashCommandPaletteOptions` (interface)
- `SlashCommandPluginOptions` (interface) — Options for the slash commands plugin
- `SlashCommandState` (interface)
- `TablePluginOptions` (interface) — Options for the table plugin
- `ToolbarButtonItem` (interface) — A custom icon button toolbar item, rendered identically to built-in buttons.
- `ToolbarConfig` (interface) — Toolbar configuration
- `ToolbarCustomItem` (interface) — A fully custom toolbar item where the user supplies a render function
that receives the full toolbar context.
- `ToolbarItemContext` (interface) — Context passed to custom toolbar items, providing access to editor state,
reactive signals, and the built-in button factory.
- `ToolbarLayoutCustomGroup` (interface) — A layout entry referencing a custom group by its id.
- `ToolbarLayoutGroup` (interface) — A group entry in the toolbar layout.
Specifies which group to render, optionally restricting to specific buttons.
- `ToolbarLayoutSeparator` (interface) — A visual separator between toolbar groups.
- `ToolbarSelectItem` (interface) — A select dropdown toolbar item: renders a `<select>` and calls
`onSelect(value, editor)` when the user picks an option.
- `ToolbarSelectOption` (interface) — A single option in a select dropdown toolbar item.
- `BareEditorOptions` (type) — Options for bare editor (minimal features)
- `ContentFormatType` (type) — Content format types supported by the editor
- `ContextualEditorOptions` (type) — Options for contextual editor (with floating toolbar and block handle)
- `CustomToolbarItem` (type) — Union of all custom toolbar item types.
- `DockedEditorOptions` (type) — Options for docked editor (with fixed toolbar)
- `EditorHeightMode` (type) — Height behavior mode for the editor surface.
- 'fixed': Fills the container height; scrolls when content overflows. Default for DockedEditor.
- 'auto': Grows with content; no built-in scrollbar. Defau
- `EditorPresetType` (type) — Editor preset type for createDefaultPluginConfig
- `EditorThemeClasses` (type)
- `JsonContent` (type) — JSON-based content (Lexical's serialized state)
- `LexicalEditorBaseOptions` (type)
- `LexicalInputOptions` (type) — Union of all input options
- `LexicalJsonInputOptions` (type) — Options for Lexical JSON input (Lexical state)
- `LexicalStringInputOptions` (type) — Options for Lexical string input (markdown or HTML)
- `NodeKey` (type)
- `SerializedHorizontalRuleNode` (type)
- `SerializedLexicalNode` (type) — The base type for all serialized nodes
- `ToolbarButtonId` (type) — Stable identifiers for individual toolbar buttons/controls.
Each ID corresponds to a single button or widget within a toolbar group.
- `ToolbarGroupId` (type) — Toolbar group identifiers
- `ToolbarLayoutEntry` (type) — A single entry in the toolbar layout.
Either a built-in group, a custom group, or a visual separator.
- `BLUR_COMMAND` (variable) — Lexical commands re-exports and custom BeatUI commands.

Re-exports commonly used Lexical commands so consumers don't need
to import from 'lexical' directly for basic operations.
- `CLEAR_EDITOR_COMMAND` (variable) — Lexical commands re-exports and custom BeatUI commands.

Re-exports commonly used Lexical commands so consumers don't need
to import from 'lexical' directly for basic operations.
- `CLICK_COMMAND` (variable) — Lexical commands re-exports and custom BeatUI commands.

Re-exports commonly used Lexical commands so consumers don't need
to import from 'lexical' directly for basic operations.
- `COMMAND_PRIORITY_CRITICAL` (variable)
- `COMMAND_PRIORITY_EDITOR` (variable)
- `COMMAND_PRIORITY_HIGH` (variable)
- `COMMAND_PRIORITY_LOW` (variable)
- `COMMAND_PRIORITY_NORMAL` (variable)
- `COPY_COMMAND` (variable) — Dispatched on a copy event, either via the clipboard or a KeyboardEvent
(Cmd+C on macOS, Ctrl+C elsewhere).
- `CUT_COMMAND` (variable) — Dispatched on a cut event, either via the clipboard or a KeyboardEvent
(Cmd+X on macOS, Ctrl+X elsewhere).
- `DEFAULT_BLOCK_COMMANDS` (variable)
- `DEFAULT_INLINE_STYLE_PROPERTIES` (variable) — Default set of CSS properties to preserve on inline text nodes during
HTML import. Matches the properties the toolbar applies via
`$patchStyleText()`.
- `DEFAULT_SLASH_COMMANDS` (variable) — Default slash commands for the editor
- `FOCUS_COMMAND` (variable) — Lexical commands re-exports and custom BeatUI commands.

Re-exports commonly used Lexical commands so consumers don't need
to import from 'lexical' directly for basic operations.
- `FORMAT_ELEMENT_COMMAND` (variable) — Lexical commands re-exports and custom BeatUI commands.

Re-exports commonly used Lexical commands so consumers don't need
to import from 'lexical' directly for basic operations.
- `FORMAT_TEXT_COMMAND` (variable) — Dispatched to format the selected text.
- `HR_TRANSFORMER` (variable) — Markdown transformer for horizontal rules (---).
Use this with $convertToMarkdownString / $convertFromMarkdownString.
- `INDENT_CONTENT_COMMAND` (variable) — Lexical commands re-exports and custom BeatUI commands.

Re-exports commonly used Lexical commands so consumers don't need
to import from 'lexical' directly for basic operations.
- `INSERT_CHECK_LIST_COMMAND` (variable)
- `INSERT_HORIZONTAL_RULE_COMMAND` (variable) — Command to insert a horizontal rule
- `INSERT_IMAGE_COMMAND` (variable) — Command to insert an image (future use)
- `INSERT_ORDERED_LIST_COMMAND` (variable)
- `INSERT_PARAGRAPH_COMMAND` (variable) — Lexical commands re-exports and custom BeatUI commands.

Re-exports commonly used Lexical commands so consumers don't need
to import from 'lexical' directly for basic operations.
- `INSERT_UNORDERED_LIST_COMMAND` (variable)
- `KEY_ENTER_COMMAND` (variable) — Dispatched when the enter key is pressed, may also be called with a null
payload when the intent is to insert a newline. The shift modifier key
must be down, any other modifier keys may also be down.
- `KEY_ESCAPE_COMMAND` (variable) — Dispatched whenever the `'Escape'` key is pressed, any modifier
keys may be down.
- `KEY_TAB_COMMAND` (variable) — Dispatched whenever the `'Tab'` key is pressed. The shift modifier key
may be down.
- `OUTDENT_CONTENT_COMMAND` (variable) — Lexical commands re-exports and custom BeatUI commands.

Re-exports commonly used Lexical commands so consumers don't need
to import from 'lexical' directly for basic operations.
- `PASTE_COMMAND` (variable) — Lexical commands re-exports and custom BeatUI commands.

Re-exports commonly used Lexical commands so consumers don't need
to import from 'lexical' directly for basic operations.
- `REDO_COMMAND` (variable) — Dispatched on redo (Shift+Cmd+Z on macOS, Shift+Ctrl+Z or Ctrl+Y elsewhere).
- `REMOVE_LIST_COMMAND` (variable)
- `SELECTION_CHANGE_COMMAND` (variable) — Lexical commands re-exports and custom BeatUI commands.

Re-exports commonly used Lexical commands so consumers don't need
to import from 'lexical' directly for basic operations.
- `TOGGLE_SLASH_COMMAND_PALETTE` (variable) — Command to toggle the slash command palette
- `TOOLBAR_SEPARATOR` (variable) — Convenience constant for inserting a separator in a toolbar layout.
- `UNDO_COMMAND` (variable) — Dispatched on undo (Cmd+Z on macOS, Ctrl+Z elsewhere).
- `$createHorizontalRuleNode` (function)
- `$isHorizontalRuleNode` (function)
- `applyMark` (function)
- `BareEditor` (function)
- `BlockHandle` (function)
- `buildInlineStyleImportMap` (function)
- `buildStyleImportMap` (function)
- `ContextualEditor` (function)
- `createCommand` (function)
- `createDefaultPluginConfig` (function)
- `createHeadlessEditor` (function)
- `DockedEditor` (function)
- `executeSlashCommand` (function)
- `exportEditorToFile` (function)
- `exportToHtml` (function)
- `exportToMarkdown` (function)
- `FloatingToolbar` (function)
- `getCharacterCount` (function)
- `getMarkdownTransformers` (function)
- `getNodesForPlugins` (function)
- `getSelectionInfo` (function)
- `getTextContent` (function)
- `getWordCount` (function)
- `htmlToLexicalJson` (function)
- `importFileToEditor` (function)
- `importFromHtml` (function)
- `importFromMarkdown` (function)
- `insertTable` (function)
- `insertTextAtCursor` (function)
- `LexicalEditorInput` (function)
- `lexicalJsonToHtml` (function)
- `lexicalJsonToMarkdown` (function)
- `LexicalToolbar` (function)
- `loadLexicalCore` (function)
- `loadOffsetUtils` (function)
- `markdownToLexicalJson` (function)
- `registerAutoLinkPlugin` (function)
- `registerClipboardPlugin` (function)
- `registerCodePlugin` (function)
- `registerCodeShikiPlugin` (function)
- `registerDragonPlugin` (function)
- `registerHashtagPlugin` (function)
- `registerHistoryPlugin` (function)
- `registerHorizontalRulePlugin` (function)
- `registerLinkPlugin` (function)
- `registerListPlugin` (function)
- `registerMarkPlugin` (function)
- `registerOverflowPlugin` (function)
- `registerPlainTextPlugin` (function)
- `registerRichTextPlugin` (function)
- `registerSlashCommandsPlugin` (function)
- `registerTablePlugin` (function)
- `registerYjsPlugin` (function)
- `removeMark` (function)
- `SlashCommandPalette` (function)

### Markdown

- `MarkdownOptions` (type)
- `Markdown` (function)

### Monaco

- `MonacoEditorInputOptions` (type) — Options for the MonacoEditorInput component.

Merges standard BeatUI InputOptions with Monaco-specific settings
such as `language`, `editorOptions`, and `jsonSchemas`.
- `MonacoEditorSpecificOptions` (type) — Monaco-specific options used by MonacoEditorInput in addition to
the standard BeatUI `InputOptions`.
- `MonacoJSONSchema` (type) — Describes a JSON Schema to be registered with the Monaco JSON language
service for validation and autocompletion.
- `MonacoLanguage` (type) — Supported language identifiers for the Monaco editor.

Includes the most common built-in languages as literal types, but any
valid Monaco language string is accepted.
- `configureMonacoEnvironment` (function)
- `MonacoEditorInput` (function)

### ProseMirror

- `MarkdownFeatures` (interface) — Markdown features that can be enabled/disabled in the editor
- `ProseMirrorToolbarOptions` (interface) — Options for configuring the ProseMirror markdown toolbar.
- `ProseMirrorMarkdownInputOptions` (type) — Options for the ProseMirror Markdown editor
- `DEFAULT_FEATURES` (variable) — Default markdown features - all enabled
- `ProseMirrorMarkdownInput` (function)
- `ProseMirrorToolbar` (function)

## Notes

- BeatUI is built on `@tempots/dom`, NOT React, Vue, or Svelte. Do not use JSX syntax.
- Components are plain TypeScript functions that return `TNode` or `Renderable`.
- Use `prop()` for mutable state, `Value<T>` for read-only reactive values.
- Use `When(condition, trueNode, falseNode)` for conditional rendering, NOT ternaries inside templates.
- Use `MapSignal(signal, fn)` for reactive lists, NOT `.map()` on arrays directly.
- The `BeatUI()` wrapper provides Theme, Locale, I18n, and NotificationService providers.
- CSS class prefix is `bc-` (e.g., `bc-button`, `bc-card`). Override with CSS custom properties.
- Dark mode: `.dark` class on `<html>`. Access via `Use(Theme, ({ appearance }) => ...)`.
- Heavy dependencies (Shiki, Monaco, Lexical, ProseMirror) are in separate entry points to keep the core bundle small.
- Button variants: `filled`, `light`, `outline`, `dashed`, `default`, `subtle`, `text`.
- Common sizes: `xs`, `sm`, `md`, `lg`, `xl`.
- Theme colors: `primary`, `secondary`, `success`, `warning`, `danger`, `info`, `base`.