# Lemn UI Component Catalog

## Button
slug: button
group: Primitives
status: stable
intent: A clickable action with six variants mapped to data-variant.
import: import { Button } from '@lemn-ltd/ui';

## Icon button
slug: icon-button
group: Primitives
status: stable
intent: A square, icon-only action requiring an aria-label; four variants.
import: import { IconButton } from '@lemn-ltd/ui';

## Scroll to bottom button
slug: scroll-to-bottom-button
group: Primitives
status: stable
intent: A compact floating chevron action that appears when a scrollport moves away from its newest content and restores the bottom-pinned view.
import: import { ScrollToBottomButton } from '@lemn-ltd/ui';

## Input
slug: input
group: Inputs
status: stable
intent: A single-line text field with an invalid state for inline errors.
import: import { Input } from '@lemn-ltd/ui';

## Textarea
slug: textarea
group: Inputs
status: stable
intent: A multi-line text field with an invalid state and a default row count.
import: import { Textarea } from '@lemn-ltd/ui';

## Select
slug: select
group: Inputs
status: stable
intent: A styled wrapper over the native select with a trailing chevron.
import: import { InputSelect } from '@lemn-ltd/ui';

## Search
slug: search
group: Inputs
status: stable
intent: An expand-on-focus search field that collapses back to its icon.
import: import { InputSearch } from '@lemn-ltd/ui';

## Checkbox
slug: checkbox
group: Inputs
status: stable
intent: A checkbox with checked, unchecked, and indeterminate states.
import: import { Checkbox } from '@lemn-ltd/ui';

## Radio
slug: radio
group: Inputs
status: stable
intent: A single-choice radio group built from RadioGroup and RadioGroupItem.
import: import { RadioGroup, RadioGroupItem } from '@lemn-ltd/ui';

## Toggle
slug: toggle
group: Inputs
status: stable
intent: A switch with a sliding thumb for an immediate on/off setting.
import: import { Toggle } from '@lemn-ltd/ui';

## Badge
slug: badge
group: Primitives
status: stable
intent: A small status label with eight tones and an optional leading dot.
import: import { Badge } from '@lemn-ltd/ui';

## Tag
slug: tag
group: Primitives
status: stable
intent: An inline metadata label with three variants.
import: import { Tag } from '@lemn-ltd/ui';

## Avatar
slug: avatar
group: Primitives
status: stable
intent: A circular identity badge, with a group that collapses overflow into +N.
import: import { Avatar } from '@lemn-ltd/ui';

## Kbd
slug: kbd
group: Primitives
status: stable
intent: A keyboard key hint that composes into shortcut chords.
import: import { Kbd } from '@lemn-ltd/ui';

## Meter
slug: meter
group: Visualizations
status: beta
intent: A linear ratio bar for a single value against a max (quota, budget, progress); tone signals headroom.
import: import { Meter } from '@lemn-ltd/ui';

## Filter pill
slug: filter-pill
group: Primitives
status: stable
intent: A toggleable filter trigger with active and open states.
import: import { FilterPill } from '@lemn-ltd/ui';

## Scope pill
slug: scope-pill
group: Primitives
status: stable
intent: A read-only pill labelling the scope something applies to.
import: import { ScopePill } from '@lemn-ltd/ui';

## Field
slug: field
group: Forms
status: stable
intent: The canonical form row: label, required asterisk, hint, and error, wired to any control via a render contract.
import: import { Field } from '@lemn-ltd/ui';

## Calendar
slug: calendar
group: Inputs
status: beta
intent: A month-grid date picker with selected/today states, prev/next and quick-year navigation, and min/max/future/past validation that disables out-of-range days.
import: import { Calendar } from '@lemn-ltd/ui';

## Inline edit
slug: inline-edit
group: Forms
status: stable
intent: Edit-in-place control for a text, number, or single-selection value, with edit, save, and cancel affordances.
import: import { InlineEdit } from '@lemn-ltd/ui';

## Segmented control
slug: segmented-control
group: Inputs
status: stable
intent: Single-select control on a recessed track; the pressed segment rises to a raised pill.
import: import { SegmentedControl } from '@lemn-ltd/ui';

## Combobox
slug: combobox
group: Inputs
status: stable
intent: Searchable select with single and multi modes, built on the canonical Popover and a cmdk filter.
import: import { Combobox } from '@lemn-ltd/ui';

## Accordion
slug: accordion
group: Forms
status: stable
intent: Stacked disclosure rows in single (one-open) or multiple modes, with an animated body height.
import: import { Accordion } from '@lemn-ltd/ui';

## SelectionList
slug: selection-list
group: Inputs
status: stable
intent: Searchable grouped multi-select: category pills with counts, group select-all with indeterminate state, and indented item rows with optional badges.
import: import { SelectionList } from '@lemn-ltd/ui';

## Composer
slug: composer
group: Forms
status: beta
intent: Chat/agent message input: a compact auto-grow composer with a lower anchored Send action that swaps to Stop while streaming.
import: import { Composer } from '@lemn-ltd/ui';

## Key-value editor
slug: key-value-editor
group: Forms
status: stable
intent: A compact editable table for string key/value pairs with add and remove actions.
import: import { KeyValueEditor } from '@lemn-ltd/ui';

## JSON code editor
slug: json-code-editor
group: Forms
status: beta
intent: A controlled JSON text editor with line numbers, folding, syntax tones, and parse diagnostics.
import: import { JsonCodeEditor } from '@lemn-ltd/ui';

## File dropzone
slug: file-dropzone
group: Forms
status: stable
intent: A drag-and-select file input with a per-file list showing progress, preview, and error/retry.
import: import { FileDropzone } from '@lemn-ltd/ui';

## File bundle editor
slug: file-bundle-editor
group: Forms
status: stable
intent: A controlled file-bundle workspace with upload actions, a file list, and one active text editor or read-only binary view.
import: import { FileBundleEditor } from '@lemn-ltd/ui';

## Markdown editor
slug: markdown-editor
group: Forms
status: stable
intent: A controlled Markdown textarea with a corner accent toggle that swaps between writing and the canonical Markdown preview.
import: import { MarkdownEditor } from '@lemn-ltd/ui';

## Agent activity line
slug: agent-activity-line
group: Conversation
status: beta
intent: A compact agent activity row with optional agent name, action phrase, pulse animation, and explicit runtime/local activity states.
import: import { AgentActivityLine } from '@lemn-ltd/ui';

## Agent message bubble
slug: agent-message-bubble
group: Conversation
status: beta
intent: A full-width transparent assistant response bubble for agent conversations, with copy and optional timestamp metadata.
import: import { AgentMessageBubble } from '@lemn-ltd/ui';

## Agent reasoning block
slug: agent-reasoning-block
group: Conversation
status: beta
intent: A collapsible Thinking block for streaming and completed agent reasoning parts.
import: import { AgentReasoningBlock } from '@lemn-ltd/ui';

## Agent text block
slug: agent-text-block
group: Conversation
status: beta
intent: A Markdown answer block for agent text parts that can stay hidden while reasoning streams.
import: import { AgentTextBlock } from '@lemn-ltd/ui';

## User message bubble
slug: user-message-bubble
group: Conversation
status: beta
intent: A right-aligned operator message bubble for agent conversations, using the accent surface plus copy and optional timestamp metadata.
import: import { UserMessageBubble } from '@lemn-ltd/ui';

## Agent status badge
slug: agent-status-badge
group: Runtime & evidence
status: beta
intent: A reusable status badge for agent lifecycle and execution state surfaces.
import: import { AgentStatusBadge } from '@lemn-ltd/ui';

## Capability chip
slug: capability-chip
group: Governance
status: beta
intent: A semantic chip for capability governance state: one component, three lenses (risk ceiling, surface drift, policy decision) mapped to consistent tones.
import: import { CapabilityChip } from '@lemn-ltd/ui';

## Capability constraints editor
slug: capability-constraints-editor
group: Governance
status: beta
intent: A controlled editor for capability narrowing: risk ceiling, approval gates, numeric limits, and allowlists.
import: import { CapabilityConstraintsEditor } from '@lemn-ltd/ui';

## Principal picker
slug: principal-picker
group: Governance
status: beta
intent: A controlled principal target picker for roles, teams, API clients, and team member selection.
import: import { PrincipalPicker } from '@lemn-ltd/ui';

## Approval card
slug: approval-card
group: Approvals
status: beta
intent: A single pending HITL request as a decision surface: prompt, capability/integration context, risk chip, and mode-specific approve, reject, and choice actions.
import: import { ApprovalCard } from '@lemn-ltd/ui';

## Approvals inbox
slug: approvals-inbox
group: Approvals
status: beta
intent: A vertical queue of pending HITL requests rendered as approval cards with a count header, falling back to an empty state when the inbox is clear.
import: import { ApprovalsInbox } from '@lemn-ltd/ui';

## Capability matrix
slug: capability-matrix
group: Governance
status: beta
intent: A who-can-what grid of capability rows by target columns, each cell projecting a grant state, with reused risk and drift chips per capability.
import: import { CapabilityMatrix } from '@lemn-ltd/ui';

## Classification matrix
slug: classification-matrix
group: Governance
status: beta
intent: A controlled editor for a capability data policy: output classification, model-context policy, a per-field classification matrix, and allowed sink refs.
import: import { ClassificationMatrix } from '@lemn-ltd/ui';

## Effective surface viewer
slug: effective-surface-viewer
group: Governance
status: beta
intent: The consumption My Integrations view: a read-only surface of the effective capabilities available to the caller, grouped by integration, with risk, approval gate, quota, and drift block.
import: import { EffectiveSurfaceViewer } from '@lemn-ltd/ui';

## Agent tool call list
slug: agent-tool-call-list
group: Conversation
status: beta
intent: A collapsible group of agent tool calls; each row expands to show its input, output content blocks, and per-status evidence.
import: import { AgentToolCallList } from '@lemn-ltd/ui';

## Execution map
slug: execution-map
group: Runtime & evidence
status: beta
intent: A read-only lane canvas for agent execution evidence, synchronized graph selection, inspector, timeline, and relationship filters.
import: import { ExecutionMap } from '@lemn-ltd/ui';

## Dialog
slug: dialog
group: Overlays
status: stable
intent: A modal surface with a built-in focus trap, Escape-to-close, and focus return.
import: import { Dialog } from '@lemn-ltd/ui';

## Drawer
slug: drawer
group: Overlays
status: stable
intent: A floating, rounded right-side panel over a scrim with no close button; dismisses on click-outside or Escape and reflows to a floating bottom sheet on mobile.
import: import { Drawer } from '@lemn-ltd/ui';

## Markdown viewer
slug: markdown-viewer
group: Overlays
status: beta
intent: A floating non-modal reading window that renders Markdown above a page that stays interactive — no scrim.
import: import { MarkdownViewer } from '@lemn-ltd/ui';

## Confirm dialog
slug: confirm-dialog
group: Overlays
status: stable
intent: An alert dialog for a single decision, with default and danger variants.
import: import { ConfirmDialog } from '@lemn-ltd/ui';

## Form dialog
slug: form-dialog
group: Overlays
status: beta
intent: The create/edit modal: a scrollable form body, pinned Cancel/Submit footer, submitting state, and error summary.
import: import { FormDialog } from '@lemn-ltd/ui';

## Menu
slug: menu
group: Overlays
status: stable
intent: The canonical dropdown menu: sections, dividers, checks, shortcuts, and danger items.
import: import { Menu } from '@lemn-ltd/ui';

## Popover
slug: popover
group: Overlays
status: stable
intent: A non-modal floating panel anchored to a trigger on any of four sides.
import: import { Popover } from '@lemn-ltd/ui';

## Tooltip
slug: tooltip
group: Overlays
status: stable
intent: A hover and focus label that points back at its trigger from any of four sides.
import: import { Tooltip } from '@lemn-ltd/ui';

## Hint icon
slug: hint-icon
group: Overlays
status: stable
intent: An inline glyph that reveals a toned tooltip to flag and explain a constraint.
import: import { HintIcon } from '@lemn-ltd/ui';

## Command palette
slug: command-palette
group: Overlays
status: stable
intent: A ⌘K search dialog over grouped commands, with live filtering and an empty state.
import: import { CommandPalette } from '@lemn-ltd/ui';

## Sidebar
slug: sidebar
group: Navigation
status: stable
intent: The application rail in expanded, rail, and hidden collapse modes plus a drill-in variant, composing org, nav, user, and version slots.
import: import { Sidebar } from '@lemn-ltd/ui';

## Top bar
slug: top-bar
group: Navigation
status: stable
intent: The screen header: sidebar toggle and breadcrumb, optional center tabs, and actions.
import: import { TopBar } from '@lemn-ltd/ui';

## Entity toolbar
slug: entity-toolbar
group: Navigation
status: stable
intent: A per-entity header with tabs, identity, and actions that collapses when all slots are empty.
import: import { EntityToolbar } from '@lemn-ltd/ui';

## Breadcrumb
slug: breadcrumb
group: Navigation
status: stable
intent: A slash-separated navigation trail with link, button, and current-page segments.
import: import { Breadcrumb } from '@lemn-ltd/ui';

## Tabs
slug: tabs
group: Navigation
status: stable
intent: A controlled row of triggers with optional count badges.
import: import { Tabs } from '@lemn-ltd/ui';

## Stepper
slug: stepper
group: Navigation
status: stable
intent: A horizontal progress indicator with completed, active, and upcoming steps.
import: import { Stepper } from '@lemn-ltd/ui';

## Org switcher
slug: org-switcher
group: Navigation
status: stable
intent: A menu-backed organization picker in expanded and rail variants.
import: import { OrgSwitcher } from '@lemn-ltd/ui';

## Pagination
slug: pagination
group: Navigation
status: stable
intent: Page navigation in numbered-pages and load-more variants.
import: import { Pagination } from '@lemn-ltd/ui';

## Dock panel
slug: dock-panel
group: Navigation
status: stable
intent: A right-docked workspace panel with tabbed content and maximize/hide controls.
import: import { DockPanel } from '@lemn-ltd/ui';

## Card
slug: card
group: Data display
status: stable
intent: Surface container with optional title, body, and footer slots that collapse when absent.
import: import { Card } from '@lemn-ltd/ui';

## Settings row
slug: settings-row
group: Data display
status: stable
intent: A labelled settings row: title and optional description on the left, a value or control on the right. Stack inside a Card.
import: import { SettingsRow } from '@lemn-ltd/ui';

## Description list
slug: description-list
group: Data display
status: stable
intent: Label/value detail rows with first-line baseline alignment that inline controls cannot break. For detail panels and dialogs.
import: import { DescriptionList } from '@lemn-ltd/ui';

## Data table
slug: data-table
group: Data display
status: stable
intent: Prop-driven table: sort, selection, bulk + row actions, row click, column visibility, density, loading, and numbered/controlled pagination.
import: import { DataTable } from '@lemn-ltd/ui';

## Stat card
slug: stat-card
group: Data display
status: stable
intent: A single metric tile: muted label, display-sized value, and an optional signed delta.
import: import { StatCard } from '@lemn-ltd/ui';

## Stats strip
slug: stats-strip
group: Data display
status: stable
intent: Edge-to-edge horizontal row of stat cards separated by thin border dividers.
import: import { StatsStrip } from '@lemn-ltd/ui';

## Code block
slug: code-block
group: Data display
status: stable
intent: Monospace value with a copy control; command, token, and inline variants write data-variant.
import: import { CodeBlock } from '@lemn-ltd/ui';

## Syntax code block
slug: syntax-code-block
group: Data display
status: beta
intent: Copyable multi-line code snippet with lazy dual-theme syntax highlighting and optional wrapping.
import: import { SyntaxCodeBlock } from '@lemn-ltd/ui';

## JSON viewer
slug: json-viewer
group: Data display
status: stable
intent: Monospace JSON tree with per-node collapse and key/string/number/punctuation tones.
import: import { JsonViewer } from '@lemn-ltd/ui';

## Markdown
slug: markdown
group: Data display
status: beta
intent: Read-only GFM renderer with dual-theme code highlighting and copyable fenced blocks.
import: import { Markdown } from '@lemn-ltd/ui';

## Sparkline
slug: sparkline
group: Visualizations
status: stable
intent: Compact inline bar chart: thin accent bars scaled to the series maximum.
import: import { Sparkline } from '@lemn-ltd/ui';

## Relative time
slug: relative-time
group: Data display
status: stable
intent: Renders an absolute timestamp as a muted relative label, anchored by the now prop.
import: import { RelativeTime } from '@lemn-ltd/ui';

## List shell
slug: list-shell
group: Data display
status: stable
intent: Outer content section giving every list or grid the same padding and vertical rhythm.
import: import { ListShell } from '@lemn-ltd/ui';

## List filters bar
slug: list-filters-bar
group: Data display
status: stable
intent: Layout-only filter row: a pills slot, a per-view search input, and a trailing slot.
import: import { ListFiltersBar } from '@lemn-ltd/ui';

## Filter
slug: filter
group: Data display
status: stable
intent: One type-driven column filter: enum menu (single/multi), text, number-range, date-range, or boolean.
import: import { Filter } from '@lemn-ltd/ui';

## Filter chip
slug: filter-chip
group: Data display
status: stable
intent: Applied-filter pill with a remove control; ActiveFiltersRow wraps a set with Clear all.
import: import { FilterChip } from '@lemn-ltd/ui';

## Empty state
slug: empty-state
group: Data display
status: stable
intent: Centered placeholder; first-run invites a first action, no-results is the filtered surface.
import: import { EmptyState } from '@lemn-ltd/ui';

## Recent chips
slug: recent-chips
group: Data display
status: stable
intent: A leading label followed by a row of muted Tag chips for recent items.
import: import { RecentChips } from '@lemn-ltd/ui';

## Preset selector
slug: preset-selector
group: Data display
status: stable
intent: Compact segmented control for picking a saved preset, plus an optional manage affordance.
import: import { PresetSelector } from '@lemn-ltd/ui';

## Toast
slug: toast
group: Feedback
status: stable
intent: Presentational status row; tone drives the icon and accent.
import: import { Toast } from '@lemn-ltd/ui';

## Toaster
slug: toaster
group: Feedback
status: stable
intent: The mounted toast stack region that owns the viewport, queue, and auto-dismiss.
import: import { Toaster } from '@lemn-ltd/ui';

## Info banner
slug: info-banner
group: Feedback
status: stable
intent: In-content tinted banner with a tone left border across four variants.
import: import { InfoBanner } from '@lemn-ltd/ui';

## System bar
slug: system-bar
group: Feedback
status: stable
intent: Full-width page-level notice above the top bar, with optional action and dismiss.
import: import { SystemBar } from '@lemn-ltd/ui';

## Skeleton
slug: skeleton
group: Feedback
status: stable
intent: Loading placeholders — base shapes, text, card, and table rows — static under reduced motion.
import: import { Skeleton } from '@lemn-ltd/ui';

## Spinner
slug: spinner
group: Feedback
status: stable
intent: Indeterminate circular spinner in three sizes; static under reduced motion.
import: import { Spinner } from '@lemn-ltd/ui';

## Progress bar
slug: progress-bar
group: Visualizations
status: stable
intent: Linear progress with determinate, indeterminate, and route loops.
import: import { ProgressBar } from '@lemn-ltd/ui';

## Screen shell
slug: screen-shell
group: Layout
status: stable
intent: The app frame: a fixed sidebar beside a main column with an optional top bar over scrolling content.
import: import { ScreenShell } from '@lemn-ltd/ui';

## Content layout
slug: content-layout
group: Layout
status: stable
intent: The reading-width column, capped at var(--content-max) with page padding; bleed spans full width.
import: import { ContentLayout } from '@lemn-ltd/ui';

## Page section
slug: page-section
group: Layout
status: stable
intent: A titled region with an optional title, caption, and actions header above its body.
import: import { PageSection } from '@lemn-ltd/ui';

## Section grid
slug: section-grid
group: Layout
status: stable
intent: An auto-fitting card grid that reflows 4 → 3 → 2 → 1 against its own container width.
import: import { SectionGrid } from '@lemn-ltd/ui';

## Two column
slug: two-column
group: Layout
status: stable
intent: A main-and-aside split that sits side by side at lg and up, then stacks below.
import: import { TwoColumn } from '@lemn-ltd/ui';

## Settings shell
slug: settings-shell
group: Layout
status: stable
intent: A master-detail settings surface: a grouped, searchable section nav that can be fully collapsed beside an independently scrolling detail pane.
import: import { SettingsShell } from '@lemn-ltd/ui';

## Sign-in screen
slug: sign-in-screen
group: Layout
status: stable
intent: The centered single-card auth screen: app mark/name identity, title/subtitle header, and a full-width form the caller fills.
import: import { SignInScreen } from '@lemn-ltd/ui';

## Version tag
slug: version-tag
group: Layout
status: stable
intent: The sidebar footer build marker: a version string with an optional env badge, or a collapsed dot.
import: import { VersionTag } from '@lemn-ltd/ui';

## Automation status badge
slug: automation-status-badge
group: Runtime & evidence
status: beta
intent: A status pill for automation definition lifecycle and run state: draft, published, and archived plus queued, scheduled, running, waiting, completed, failed, and cancelled.
import: import { AutomationStatusBadge } from '@lemn-ltd/ui';

## Trigger tile
slug: trigger-tile
group: Automation
status: beta
intent: A bordered tile for a trigger kind: a leading glyph, a label and optional description, and a trailing enabled/disabled/error status pill.
import: import { TriggerTile } from '@lemn-ltd/ui';

## Schedule editor
slug: schedule-editor
group: Automation
status: beta
intent: A schedule configuration block: a cron/interval/fixed kind selector, the expression, an optional timezone, and a live next/last-run summary with a status pill.
import: import { ScheduleEditor } from '@lemn-ltd/ui';

## Trigger composer
slug: trigger-composer
group: Automation
status: beta
intent: The trigger authoring surface: a list of configured triggers — each a deep preset-driven schedule builder (once/hourly/daily/weekdays/weekly/custom with a per-preset input and a live human summary) or a titled card — plus a collapsible add-another-trigger picker.
import: import { TriggerComposer } from '@lemn-ltd/ui';

## Automation graph
slug: automation-graph
group: Automation
status: beta
intent: A read-only automation graph: typed nodes on an absolute canvas connected by orthogonal edges, each node toned by execution state, with an inline state legend.
import: import { GraphCanvas } from '@lemn-ltd/ui';

## Node inspector
slug: node-inspector
group: Automation
status: beta
intent: A selected node's detail panel — a kind pill, a config/policy/knowledge tab strip, and label/value rows — beside the authoring node palette.
import: import { NodeInspector } from '@lemn-ltd/ui';

## Run timeline
slug: run-timeline
group: Runtime & evidence
status: beta
intent: The chronological evidence log for an automation run: a bordered column of tone-dotted, timestamped event rows.
import: import { RunTimeline } from '@lemn-ltd/ui';

## Wait & retry chips
slug: wait-retry-chip
group: Runtime & evidence
status: beta
intent: Compact pills for a node's wait timer and retry budget, toned by state, for graph, scheduler, and evidence rows.
import: import { WaitChip, RetryChip } from '@lemn-ltd/ui';

## Approval panel
slug: approval-panel
group: Approvals
status: beta
intent: The decision surface for an automation human-task node: automation/run context, graph-hash and stale-approval conflicts that block approval, a comment, and Approve/Reject actions.
import: import { ApprovalPanel } from '@lemn-ltd/ui';

## Planner status
slug: planner-status
group: Runtime & evidence
status: beta
intent: The planner runtime indicator for the planned-graph flow: a dotted status pill that pulses while the planner is planning or streaming.
import: import { PlannerStatus } from '@lemn-ltd/ui';

## Proposal preview
slug: proposal-preview
group: Automation
status: beta
intent: The review surface for a generated automation graph: a monospace node preview, a compile-result banner, and accept/reject actions gated on a clean compile.
import: import { ProposalPreview } from '@lemn-ltd/ui';

## Node attempts table
slug: node-attempts-table
group: Runtime & evidence
status: beta
intent: The per-node attempt ledger for a run — node, type, attempt, state, duration, and error — composed over the canonical DataTable.
import: import { NodeAttemptsTable } from '@lemn-ltd/ui';

## Runtime refs panel
slug: runtime-refs-panel
group: Runtime & evidence
status: beta
intent: The runtime integration summary for an execution node: runtime session/run refs and source context as aligned monospace lines, plus a policy/limits/safety/knowledge metric strip.
import: import { RuntimeRefsPanel } from '@lemn-ltd/ui';

## Area chart
slug: area-chart
group: Visualizations
status: beta
intent: A responsive normal or stacked area chart for one or more time-series metrics.
import: import { AreaChart } from '@lemn-ltd/ui';

## Bar chart
slug: bar-chart
group: Visualizations
status: beta
intent: A grouped or stacked bar chart with vertical and horizontal orientations.
import: import { BarChart } from '@lemn-ltd/ui';

## Combo chart
slug: combo-chart
group: Visualizations
status: beta
intent: A declared composition of bar and line series with an optional secondary axis.
import: import { ComboChart } from '@lemn-ltd/ui';

## Bar list
slug: bar-list
group: Visualizations
status: beta
intent: An ordered category list whose native CSS bars compare values against the maximum.
import: import { BarList } from '@lemn-ltd/ui';

## Category bar
slug: category-bar
group: Visualizations
status: beta
intent: A segmented native distribution bar with labels and non-color shape cues.
import: import { CategoryBar } from '@lemn-ltd/ui';

## Donut chart
slug: donut-chart
group: Visualizations
status: beta
intent: A labelled part-to-whole chart with a center label and explicit zero-total state.
import: import { DonutChart } from '@lemn-ltd/ui';

## Line chart
slug: line-chart
group: Visualizations
status: beta
intent: A responsive multi-series line chart with accessible legend and tooltip behavior.
import: import { LineChart } from '@lemn-ltd/ui';

## Progress circle
slug: progress-circle
group: Visualizations
status: beta
intent: A native SVG circular progress indicator for determinate or indeterminate work.
import: import { ProgressCircle } from '@lemn-ltd/ui';

## Spark chart
slug: spark-chart
group: Visualizations
status: beta
intent: A compact interactive line, area, or bar chart for dense report surfaces.
import: import { SparkChart } from '@lemn-ltd/ui';

## Tracker
slug: tracker
group: Visualizations
status: beta
intent: A discrete status sequence whose text and patterns preserve meaning beyond color.
import: import { Tracker } from '@lemn-ltd/ui';

## Select native
slug: select-native
group: Inputs
status: beta
intent: A platform-native select for simple forms, mobile UI, and progressive enhancement.
import: import { SelectNative } from '@lemn-ltd/ui';

## Radio card group
slug: radio-card-group
group: Inputs
status: beta
intent: A single-choice radio group whose full labelled options render as selectable cards.
import: import { RadioCardGroup } from '@lemn-ltd/ui';

## Toggle group
slug: toggle-group
group: Inputs
status: beta
intent: A single- or multi-select group of compact command toggles.
import: import { ToggleGroup } from '@lemn-ltd/ui';

## Slider
slug: slider
group: Inputs
status: beta
intent: A one- or two-thumb numeric input with explicit accessible labels and formatting.
import: import { Slider } from '@lemn-ltd/ui';

## Date picker
slug: date-picker
group: Inputs
status: beta
intent: A Field-labelled single-date trigger composed from Button, Popover, and Calendar.
import: import { DatePicker } from '@lemn-ltd/ui';

## Date range picker
slug: date-range-picker
group: Inputs
status: beta
intent: A partial-aware start and end date field composed from the shared Calendar range mode.
import: import { DateRangePicker } from '@lemn-ltd/ui';

## Tab navigation
slug: tab-navigation
group: Navigation
status: beta
intent: A horizontally scrollable navigation rail of real links with aria-current state.
import: import { TabNavigation } from '@lemn-ltd/ui';

## Separator
slug: separator
group: Layout
status: beta
intent: An explicit horizontal or vertical division that is decorative by default.
import: import { Separator } from '@lemn-ltd/ui';