# Lemn UI Catalog

## Colors
kind: foundation
slug: colors
group: Foundations
status: stable
url: https://portal.ui.le-mn.com/foundations/colors
summary: Surface, text, accent, status, and soft-status tokens — resolved per theme.

## Typography
kind: foundation
slug: typography
group: Foundations
status: stable
url: https://portal.ui.le-mn.com/foundations/typography
summary: Type scale with unitless line-height ratios, weights, and the mono family.

## Spacing & radii
kind: foundation
slug: spacing
group: Foundations
status: stable
url: https://portal.ui.le-mn.com/foundations/spacing
summary: The non-contiguous spacing scale and the four corner radii.

## Elevation
kind: foundation
slug: elevation
group: Foundations
status: stable
url: https://portal.ui.le-mn.com/foundations/elevation
summary: Three elevation levels, shadow-led in Light and border-led in Dark.

## Motion
kind: foundation
slug: motion
group: Foundations
status: stable
url: https://portal.ui.le-mn.com/foundations/motion
summary: Durations, easings, and loops that go static under reduced motion.

## Icons
kind: foundation
slug: icons
group: Foundations
status: stable
url: https://portal.ui.le-mn.com/foundations/icons
summary: The product-neutral base glyph set the package re-exports.

## Button
kind: component
slug: button
group: Primitives
status: stable
url: https://portal.ui.le-mn.com/components/button
summary: A clickable action with six variants mapped to data-variant.
import: import { Button } from '@lemn-ltd/ui';

## Icon button
kind: component
slug: icon-button
group: Primitives
status: stable
url: https://portal.ui.le-mn.com/components/icon-button
summary: A square, icon-only action requiring an aria-label; four variants.
import: import { IconButton } from '@lemn-ltd/ui';

## Scroll to bottom button
kind: component
slug: scroll-to-bottom-button
group: Primitives
status: stable
url: https://portal.ui.le-mn.com/components/scroll-to-bottom-button
summary: 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
kind: component
slug: input
group: Inputs
status: stable
url: https://portal.ui.le-mn.com/components/input
summary: A single-line text field with an invalid state for inline errors.
import: import { Input } from '@lemn-ltd/ui';

## Textarea
kind: component
slug: textarea
group: Inputs
status: stable
url: https://portal.ui.le-mn.com/components/textarea
summary: A multi-line text field with an invalid state and a default row count.
import: import { Textarea } from '@lemn-ltd/ui';

## Select
kind: component
slug: select
group: Inputs
status: stable
url: https://portal.ui.le-mn.com/components/select
summary: A styled wrapper over the native select with a trailing chevron.
import: import { InputSelect } from '@lemn-ltd/ui';

## Search
kind: component
slug: search
group: Inputs
status: stable
url: https://portal.ui.le-mn.com/components/search
summary: An expand-on-focus search field that collapses back to its icon.
import: import { InputSearch } from '@lemn-ltd/ui';

## Checkbox
kind: component
slug: checkbox
group: Inputs
status: stable
url: https://portal.ui.le-mn.com/components/checkbox
summary: A checkbox with checked, unchecked, and indeterminate states.
import: import { Checkbox } from '@lemn-ltd/ui';

## Radio
kind: component
slug: radio
group: Inputs
status: stable
url: https://portal.ui.le-mn.com/components/radio
summary: A single-choice radio group built from RadioGroup and RadioGroupItem.
import: import { RadioGroup, RadioGroupItem } from '@lemn-ltd/ui';

## Toggle
kind: component
slug: toggle
group: Inputs
status: stable
url: https://portal.ui.le-mn.com/components/toggle
summary: A switch with a sliding thumb for an immediate on/off setting.
import: import { Toggle } from '@lemn-ltd/ui';

## Badge
kind: component
slug: badge
group: Primitives
status: stable
url: https://portal.ui.le-mn.com/components/badge
summary: A small status label with eight tones and an optional leading dot.
import: import { Badge } from '@lemn-ltd/ui';

## Tag
kind: component
slug: tag
group: Primitives
status: stable
url: https://portal.ui.le-mn.com/components/tag
summary: An inline metadata label with three variants.
import: import { Tag } from '@lemn-ltd/ui';

## Avatar
kind: component
slug: avatar
group: Primitives
status: stable
url: https://portal.ui.le-mn.com/components/avatar
summary: A circular identity badge, with a group that collapses overflow into +N.
import: import { Avatar } from '@lemn-ltd/ui';

## Kbd
kind: component
slug: kbd
group: Primitives
status: stable
url: https://portal.ui.le-mn.com/components/kbd
summary: A keyboard key hint that composes into shortcut chords.
import: import { Kbd } from '@lemn-ltd/ui';

## Meter
kind: component
slug: meter
group: Visualizations
status: beta
url: https://portal.ui.le-mn.com/visualizations/meter
summary: 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
kind: component
slug: filter-pill
group: Primitives
status: stable
url: https://portal.ui.le-mn.com/components/filter-pill
summary: A toggleable filter trigger with active and open states.
import: import { FilterPill } from '@lemn-ltd/ui';

## Scope pill
kind: component
slug: scope-pill
group: Primitives
status: stable
url: https://portal.ui.le-mn.com/components/scope-pill
summary: A read-only pill labelling the scope something applies to.
import: import { ScopePill } from '@lemn-ltd/ui';

## Field
kind: component
slug: field
group: Forms
status: stable
url: https://portal.ui.le-mn.com/components/field
summary: 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
kind: component
slug: calendar
group: Inputs
status: beta
url: https://portal.ui.le-mn.com/components/calendar
summary: 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
kind: component
slug: inline-edit
group: Forms
status: stable
url: https://portal.ui.le-mn.com/components/inline-edit
summary: 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
kind: component
slug: segmented-control
group: Inputs
status: stable
url: https://portal.ui.le-mn.com/components/segmented-control
summary: Single-select control on a recessed track; the pressed segment rises to a raised pill.
import: import { SegmentedControl } from '@lemn-ltd/ui';

## Combobox
kind: component
slug: combobox
group: Inputs
status: stable
url: https://portal.ui.le-mn.com/components/combobox
summary: Searchable select with single and multi modes, built on the canonical Popover and a cmdk filter.
import: import { Combobox } from '@lemn-ltd/ui';

## Accordion
kind: component
slug: accordion
group: Forms
status: stable
url: https://portal.ui.le-mn.com/components/accordion
summary: Stacked disclosure rows in single (one-open) or multiple modes, with an animated body height.
import: import { Accordion } from '@lemn-ltd/ui';

## SelectionList
kind: component
slug: selection-list
group: Inputs
status: stable
url: https://portal.ui.le-mn.com/components/selection-list
summary: 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
kind: component
slug: composer
group: Forms
status: beta
url: https://portal.ui.le-mn.com/components/composer
summary: 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
kind: component
slug: key-value-editor
group: Forms
status: stable
url: https://portal.ui.le-mn.com/components/key-value-editor
summary: A compact editable table for string key/value pairs with add and remove actions.
import: import { KeyValueEditor } from '@lemn-ltd/ui';

## JSON code editor
kind: component
slug: json-code-editor
group: Forms
status: beta
url: https://portal.ui.le-mn.com/components/json-code-editor
summary: A controlled JSON text editor with line numbers, folding, syntax tones, and parse diagnostics.
import: import { JsonCodeEditor } from '@lemn-ltd/ui';

## File dropzone
kind: component
slug: file-dropzone
group: Forms
status: stable
url: https://portal.ui.le-mn.com/components/file-dropzone
summary: 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
kind: component
slug: file-bundle-editor
group: Forms
status: stable
url: https://portal.ui.le-mn.com/components/file-bundle-editor
summary: 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
kind: component
slug: markdown-editor
group: Forms
status: stable
url: https://portal.ui.le-mn.com/components/markdown-editor
summary: 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';

## Dialog
kind: component
slug: dialog
group: Overlays
status: stable
url: https://portal.ui.le-mn.com/components/dialog
summary: A modal surface with a built-in focus trap, Escape-to-close, and focus return.
import: import { Dialog } from '@lemn-ltd/ui';

## Drawer
kind: component
slug: drawer
group: Overlays
status: stable
url: https://portal.ui.le-mn.com/components/drawer
summary: 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
kind: component
slug: markdown-viewer
group: Overlays
status: beta
url: https://portal.ui.le-mn.com/components/markdown-viewer
summary: 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
kind: component
slug: confirm-dialog
group: Overlays
status: stable
url: https://portal.ui.le-mn.com/components/confirm-dialog
summary: An alert dialog for a single decision, with default and danger variants.
import: import { ConfirmDialog } from '@lemn-ltd/ui';

## Form dialog
kind: component
slug: form-dialog
group: Overlays
status: beta
url: https://portal.ui.le-mn.com/components/form-dialog
summary: 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
kind: component
slug: menu
group: Overlays
status: stable
url: https://portal.ui.le-mn.com/components/menu
summary: The canonical dropdown menu: sections, dividers, checks, shortcuts, and danger items.
import: import { Menu } from '@lemn-ltd/ui';

## Popover
kind: component
slug: popover
group: Overlays
status: stable
url: https://portal.ui.le-mn.com/components/popover
summary: A non-modal floating panel anchored to a trigger on any of four sides.
import: import { Popover } from '@lemn-ltd/ui';

## Tooltip
kind: component
slug: tooltip
group: Overlays
status: stable
url: https://portal.ui.le-mn.com/components/tooltip
summary: 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
kind: component
slug: hint-icon
group: Overlays
status: stable
url: https://portal.ui.le-mn.com/components/hint-icon
summary: An inline glyph that reveals a toned tooltip to flag and explain a constraint.
import: import { HintIcon } from '@lemn-ltd/ui';

## Command palette
kind: component
slug: command-palette
group: Overlays
status: stable
url: https://portal.ui.le-mn.com/components/command-palette
summary: A ⌘K search dialog over grouped commands, with live filtering and an empty state.
import: import { CommandPalette } from '@lemn-ltd/ui';

## Sidebar
kind: component
slug: sidebar
group: Navigation
status: stable
url: https://portal.ui.le-mn.com/components/sidebar
summary: 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
kind: component
slug: top-bar
group: Navigation
status: stable
url: https://portal.ui.le-mn.com/components/top-bar
summary: The screen header: sidebar toggle and breadcrumb, optional center tabs, and actions.
import: import { TopBar } from '@lemn-ltd/ui';

## Entity toolbar
kind: component
slug: entity-toolbar
group: Navigation
status: stable
url: https://portal.ui.le-mn.com/components/entity-toolbar
summary: A per-entity header with tabs, identity, and actions that collapses when all slots are empty.
import: import { EntityToolbar } from '@lemn-ltd/ui';

## Breadcrumb
kind: component
slug: breadcrumb
group: Navigation
status: stable
url: https://portal.ui.le-mn.com/components/breadcrumb
summary: A slash-separated navigation trail with link, button, and current-page segments.
import: import { Breadcrumb } from '@lemn-ltd/ui';

## Tabs
kind: component
slug: tabs
group: Navigation
status: stable
url: https://portal.ui.le-mn.com/components/tabs
summary: A controlled row of triggers with optional count badges.
import: import { Tabs } from '@lemn-ltd/ui';

## Stepper
kind: component
slug: stepper
group: Navigation
status: stable
url: https://portal.ui.le-mn.com/components/stepper
summary: A horizontal progress indicator with completed, active, and upcoming steps.
import: import { Stepper } from '@lemn-ltd/ui';

## Org switcher
kind: component
slug: org-switcher
group: Navigation
status: stable
url: https://portal.ui.le-mn.com/components/org-switcher
summary: A menu-backed organization picker in expanded and rail variants.
import: import { OrgSwitcher } from '@lemn-ltd/ui';

## Pagination
kind: component
slug: pagination
group: Navigation
status: stable
url: https://portal.ui.le-mn.com/components/pagination
summary: Page navigation in numbered-pages and load-more variants.
import: import { Pagination } from '@lemn-ltd/ui';

## Dock panel
kind: component
slug: dock-panel
group: Navigation
status: stable
url: https://portal.ui.le-mn.com/components/dock-panel
summary: A right-docked workspace panel with tabbed content and maximize/hide controls.
import: import { DockPanel } from '@lemn-ltd/ui';

## Card
kind: component
slug: card
group: Data display
status: stable
url: https://portal.ui.le-mn.com/components/card
summary: Surface container with optional title, body, and footer slots that collapse when absent.
import: import { Card } from '@lemn-ltd/ui';

## Settings row
kind: component
slug: settings-row
group: Data display
status: stable
url: https://portal.ui.le-mn.com/components/settings-row
summary: 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
kind: component
slug: description-list
group: Data display
status: stable
url: https://portal.ui.le-mn.com/components/description-list
summary: 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
kind: component
slug: data-table
group: Data display
status: stable
url: https://portal.ui.le-mn.com/components/data-table
summary: 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
kind: component
slug: stat-card
group: Data display
status: stable
url: https://portal.ui.le-mn.com/components/stat-card
summary: A single metric tile: muted label, display-sized value, and an optional signed delta.
import: import { StatCard } from '@lemn-ltd/ui';

## Stats strip
kind: component
slug: stats-strip
group: Data display
status: stable
url: https://portal.ui.le-mn.com/components/stats-strip
summary: Edge-to-edge horizontal row of stat cards separated by thin border dividers.
import: import { StatsStrip } from '@lemn-ltd/ui';

## Code block
kind: component
slug: code-block
group: Data display
status: stable
url: https://portal.ui.le-mn.com/components/code-block
summary: Monospace value with a copy control; command, token, and inline variants write data-variant.
import: import { CodeBlock } from '@lemn-ltd/ui';

## Syntax code block
kind: component
slug: syntax-code-block
group: Data display
status: beta
url: https://portal.ui.le-mn.com/components/syntax-code-block
summary: Copyable multi-line code snippet with lazy dual-theme syntax highlighting and optional wrapping.
import: import { SyntaxCodeBlock } from '@lemn-ltd/ui';

## JSON viewer
kind: component
slug: json-viewer
group: Data display
status: stable
url: https://portal.ui.le-mn.com/components/json-viewer
summary: Monospace JSON tree with per-node collapse and key/string/number/punctuation tones.
import: import { JsonViewer } from '@lemn-ltd/ui';

## Markdown
kind: component
slug: markdown
group: Data display
status: beta
url: https://portal.ui.le-mn.com/components/markdown
summary: Read-only GFM renderer with dual-theme code highlighting and copyable fenced blocks.
import: import { Markdown } from '@lemn-ltd/ui';

## Sparkline
kind: component
slug: sparkline
group: Visualizations
status: stable
url: https://portal.ui.le-mn.com/visualizations/sparkline
summary: Compact inline bar chart: thin accent bars scaled to the series maximum.
import: import { Sparkline } from '@lemn-ltd/ui';

## Relative time
kind: component
slug: relative-time
group: Data display
status: stable
url: https://portal.ui.le-mn.com/components/relative-time
summary: Renders an absolute timestamp as a muted relative label, anchored by the now prop.
import: import { RelativeTime } from '@lemn-ltd/ui';

## List shell
kind: component
slug: list-shell
group: Data display
status: stable
url: https://portal.ui.le-mn.com/components/list-shell
summary: Outer content section giving every list or grid the same padding and vertical rhythm.
import: import { ListShell } from '@lemn-ltd/ui';

## List filters bar
kind: component
slug: list-filters-bar
group: Data display
status: stable
url: https://portal.ui.le-mn.com/components/list-filters-bar
summary: Layout-only filter row: a pills slot, a per-view search input, and a trailing slot.
import: import { ListFiltersBar } from '@lemn-ltd/ui';

## Filter
kind: component
slug: filter
group: Data display
status: stable
url: https://portal.ui.le-mn.com/components/filter
summary: 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
kind: component
slug: filter-chip
group: Data display
status: stable
url: https://portal.ui.le-mn.com/components/filter-chip
summary: Applied-filter pill with a remove control; ActiveFiltersRow wraps a set with Clear all.
import: import { FilterChip } from '@lemn-ltd/ui';

## Empty state
kind: component
slug: empty-state
group: Data display
status: stable
url: https://portal.ui.le-mn.com/components/empty-state
summary: Centered placeholder; first-run invites a first action, no-results is the filtered surface.
import: import { EmptyState } from '@lemn-ltd/ui';

## Recent chips
kind: component
slug: recent-chips
group: Data display
status: stable
url: https://portal.ui.le-mn.com/components/recent-chips
summary: A leading label followed by a row of muted Tag chips for recent items.
import: import { RecentChips } from '@lemn-ltd/ui';

## Preset selector
kind: component
slug: preset-selector
group: Data display
status: stable
url: https://portal.ui.le-mn.com/components/preset-selector
summary: Compact segmented control for picking a saved preset, plus an optional manage affordance.
import: import { PresetSelector } from '@lemn-ltd/ui';

## Toast
kind: component
slug: toast
group: Feedback
status: stable
url: https://portal.ui.le-mn.com/components/toast
summary: Presentational status row; tone drives the icon and accent.
import: import { Toast } from '@lemn-ltd/ui';

## Toaster
kind: component
slug: toaster
group: Feedback
status: stable
url: https://portal.ui.le-mn.com/components/toaster
summary: The mounted toast stack region that owns the viewport, queue, and auto-dismiss.
import: import { Toaster } from '@lemn-ltd/ui';

## Info banner
kind: component
slug: info-banner
group: Feedback
status: stable
url: https://portal.ui.le-mn.com/components/info-banner
summary: In-content tinted banner with a tone left border across four variants.
import: import { InfoBanner } from '@lemn-ltd/ui';

## System bar
kind: component
slug: system-bar
group: Feedback
status: stable
url: https://portal.ui.le-mn.com/components/system-bar
summary: Full-width page-level notice above the top bar, with optional action and dismiss.
import: import { SystemBar } from '@lemn-ltd/ui';

## Skeleton
kind: component
slug: skeleton
group: Feedback
status: stable
url: https://portal.ui.le-mn.com/components/skeleton
summary: Loading placeholders — base shapes, text, card, and table rows — static under reduced motion.
import: import { Skeleton } from '@lemn-ltd/ui';

## Spinner
kind: component
slug: spinner
group: Feedback
status: stable
url: https://portal.ui.le-mn.com/components/spinner
summary: Indeterminate circular spinner in three sizes; static under reduced motion.
import: import { Spinner } from '@lemn-ltd/ui';

## Progress bar
kind: component
slug: progress-bar
group: Visualizations
status: stable
url: https://portal.ui.le-mn.com/visualizations/progress-bar
summary: Linear progress with determinate, indeterminate, and route loops.
import: import { ProgressBar } from '@lemn-ltd/ui';

## Screen shell
kind: component
slug: screen-shell
group: Layout
status: stable
url: https://portal.ui.le-mn.com/components/screen-shell
summary: 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
kind: component
slug: content-layout
group: Layout
status: stable
url: https://portal.ui.le-mn.com/components/content-layout
summary: The reading-width column, capped at var(--lemn-content-max) with page padding; bleed spans full width.
import: import { ContentLayout } from '@lemn-ltd/ui';

## Page section
kind: component
slug: page-section
group: Layout
status: stable
url: https://portal.ui.le-mn.com/components/page-section
summary: A titled region with an optional title, caption, and actions header above its body.
import: import { PageSection } from '@lemn-ltd/ui';

## Section grid
kind: component
slug: section-grid
group: Layout
status: stable
url: https://portal.ui.le-mn.com/components/section-grid
summary: 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
kind: component
slug: two-column
group: Layout
status: stable
url: https://portal.ui.le-mn.com/components/two-column
summary: 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
kind: component
slug: settings-shell
group: Layout
status: stable
url: https://portal.ui.le-mn.com/components/settings-shell
summary: 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
kind: component
slug: sign-in-screen
group: Layout
status: stable
url: https://portal.ui.le-mn.com/components/sign-in-screen
summary: 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
kind: component
slug: version-tag
group: Layout
status: stable
url: https://portal.ui.le-mn.com/components/version-tag
summary: The sidebar footer build marker: a version string with an optional env badge, or a collapsed dot.
import: import { VersionTag } from '@lemn-ltd/ui';

## Area chart
kind: component
slug: area-chart
group: Visualizations
status: beta
url: https://portal.ui.le-mn.com/visualizations/area-chart
summary: A selectable normal, stacked, or percent area chart with configurable axes, legends, and tooltips.
import: import { AreaChart } from '@lemn-ltd/ui';

## Bar chart
kind: component
slug: bar-chart
group: Visualizations
status: beta
url: https://portal.ui.le-mn.com/visualizations/bar-chart
summary: A selectable grouped, stacked, or percent bar chart with vertical and horizontal orientations.
import: import { BarChart } from '@lemn-ltd/ui';

## Combo chart
kind: component
slug: combo-chart
group: Visualizations
status: beta
url: https://portal.ui.le-mn.com/visualizations/combo-chart
summary: A declared composition of bar and line series with configurable primary and secondary axes.
import: import { ComboChart } from '@lemn-ltd/ui';

## Bar list
kind: component
slug: bar-list
group: Visualizations
status: beta
url: https://portal.ui.le-mn.com/visualizations/bar-list
summary: A sortable, selectable category list whose native CSS bars compare values against the maximum.
import: import { BarList } from '@lemn-ltd/ui';

## Category bar
kind: component
slug: category-bar
group: Visualizations
status: beta
url: https://portal.ui.le-mn.com/visualizations/category-bar
summary: A segmented native distribution bar with cumulative labels, an optional marker, and non-color cues.
import: import { CategoryBar } from '@lemn-ltd/ui';

## Donut chart
kind: component
slug: donut-chart
group: Visualizations
status: beta
url: https://portal.ui.le-mn.com/visualizations/donut-chart
summary: A selectable donut or pie chart with normalized tooltips and an explicit zero-total state.
import: import { DonutChart } from '@lemn-ltd/ui';

## Heatmap chart
kind: component
slug: heatmap-chart
group: Visualizations
status: beta
url: https://portal.ui.le-mn.com/visualizations/heatmap-chart
summary: An ECharts-backed categorical heatmap with a provider-neutral contract, live brand tokens, selection, and an SSR data table.
import: import { HeatmapChart } from '@lemn-ltd/ui';

## Line chart
kind: component
slug: line-chart
group: Visualizations
status: beta
url: https://portal.ui.le-mn.com/visualizations/line-chart
summary: A selectable multi-series line chart with configurable axes, legends, and normalized tooltips.
import: import { LineChart } from '@lemn-ltd/ui';

## Progress circle
kind: component
slug: progress-circle
group: Visualizations
status: beta
url: https://portal.ui.le-mn.com/visualizations/progress-circle
summary: A semantic native SVG progress indicator with determinate, indeterminate, and motion policies.
import: import { ProgressCircle } from '@lemn-ltd/ui';

## Spark chart
kind: component
slug: spark-chart
group: Visualizations
status: beta
url: https://portal.ui.le-mn.com/visualizations/spark-chart
summary: A compact multi-series line, area, or bar chart with domain, stack, and tooltip controls.
import: import { SparkChart } from '@lemn-ltd/ui';

## Tracker
kind: component
slug: tracker
group: Visualizations
status: beta
url: https://portal.ui.le-mn.com/visualizations/tracker
summary: A discrete status sequence with optional token colors, tooltips, and hover emphasis.
import: import { Tracker } from '@lemn-ltd/ui';

## Select native
kind: component
slug: select-native
group: Inputs
status: beta
url: https://portal.ui.le-mn.com/components/select-native
summary: A platform-native select for simple forms, mobile UI, and progressive enhancement.
import: import { SelectNative } from '@lemn-ltd/ui';

## Radio card group
kind: component
slug: radio-card-group
group: Inputs
status: beta
url: https://portal.ui.le-mn.com/components/radio-card-group
summary: A single-choice radio group whose full labelled options render as selectable cards.
import: import { RadioCardGroup } from '@lemn-ltd/ui';

## Toggle group
kind: component
slug: toggle-group
group: Inputs
status: beta
url: https://portal.ui.le-mn.com/components/toggle-group
summary: A single- or multi-select group of compact command toggles.
import: import { ToggleGroup } from '@lemn-ltd/ui';

## Slider
kind: component
slug: slider
group: Inputs
status: beta
url: https://portal.ui.le-mn.com/components/slider
summary: A one- or two-thumb numeric input with explicit accessible labels and formatting.
import: import { Slider } from '@lemn-ltd/ui';

## Date picker
kind: component
slug: date-picker
group: Inputs
status: beta
url: https://portal.ui.le-mn.com/components/date-picker
summary: A Field-labelled single-date trigger composed from Button, Popover, and Calendar.
import: import { DatePicker } from '@lemn-ltd/ui';

## Date range picker
kind: component
slug: date-range-picker
group: Inputs
status: beta
url: https://portal.ui.le-mn.com/components/date-range-picker
summary: A partial-aware start and end date field composed from the shared Calendar range mode.
import: import { DateRangePicker } from '@lemn-ltd/ui';

## Tab navigation
kind: component
slug: tab-navigation
group: Navigation
status: beta
url: https://portal.ui.le-mn.com/components/tab-navigation
summary: A horizontally scrollable navigation rail of real links with aria-current state.
import: import { TabNavigation } from '@lemn-ltd/ui';

## Separator
kind: component
slug: separator
group: Layout
status: beta
url: https://portal.ui.le-mn.com/components/separator
summary: An explicit horizontal or vertical division that is decorative by default.
import: import { Separator } from '@lemn-ltd/ui';

## Dashboard overview
kind: block
slug: dashboard-overview
group: Blocks
status: beta
url: https://portal.ui.le-mn.com/blocks/dashboard-overview
summary: Summarize operating metrics, a trend, and a ranked breakdown in one report surface.

## Appointment schedule
kind: block
slug: appointment-schedule
group: Blocks
status: beta
url: https://portal.ui.le-mn.com/blocks/appointment-schedule
summary: Present a time-ordered appointment queue with explicit status and host-owned actions.

## List + table
kind: pattern
slug: list-table
group: Patterns
status: stable
url: https://portal.ui.le-mn.com/patterns/list-table
summary: The canonical list screen: shell, page header, filter bar, and a sortable data table.

## List + grid
kind: pattern
slug: list-grid
group: Patterns
status: stable
url: https://portal.ui.le-mn.com/patterns/list-grid
summary: A card-grid variant of the list screen wrapping a responsive section grid.

## List + split
kind: pattern
slug: list-split
group: Patterns
status: stable
url: https://portal.ui.le-mn.com/patterns/list-split
summary: A master-detail split with a selectable list and a labeled detail panel.

## Detail
kind: pattern
slug: detail
group: Patterns
status: stable
url: https://portal.ui.le-mn.com/patterns/detail
summary: An entity detail screen: toolbar, stats strip, summary panels, and a tab strip.

## Settings form
kind: pattern
slug: settings-form
group: Patterns
status: stable
url: https://portal.ui.le-mn.com/patterns/settings-form
summary: A settings screen with a drill-in rail, form sections, and a Save footer.

## Dashboard
kind: pattern
slug: dashboard
group: Patterns
status: stable
url: https://portal.ui.le-mn.com/patterns/dashboard
summary: An overview screen with a stats strip and a section grid of sparkline trend cards.

## States
kind: pattern
slug: states
group: Patterns
status: stable
url: https://portal.ui.le-mn.com/patterns/states
summary: The loading, empty, and error states a data surface moves through, side by side.

## Responsive
kind: pattern
slug: responsive
group: Patterns
status: stable
url: https://portal.ui.le-mn.com/patterns/responsive
summary: How the shell composition reflows across the 375, 768, and 1280px breakpoints.

## Resource manager
kind: pattern
slug: resource-manager
group: Patterns
status: beta
url: https://portal.ui.le-mn.com/patterns/resource-manager
summary: The end-to-end CRUD screen with row actions, bulk selection, filters, search, and a create/edit dialog.