@santi020k/lumen-react 0.3.0 → 1.0.0

package/dist/components.js

@@ -1,15 +1,29 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/* eslint-disable @eslint-react/no-children-only, @eslint-react/no-clone-element, @eslint-react/no-context-provider, @eslint-react/no-use-context -- Lumen uses React 19 ref props and context provider syntax that remains explicit for readability, and intentionally clones one child for polymorphic composition. */
-import { composeClassName, getLumenIcon, lumenCodeTokenClassNames, tokenizeLumenCode } from '@santi020k/lumen-core';
 import { Children, cloneElement, createContext, createElement, Fragment, isValidElement, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { alignLumenChartSeries, composeClassName, createLumenBarGeometry, createLumenLineGeometry, createLumenPieGeometry, getLumenChartCategories, getLumenChartDomain, getLumenChartTicks, getLumenChartToneClassName, getLumenIcon, getLumenPieChartVariantClassName, hasLumenChartData, hasLumenPieData, lumenCodeTokenClassNames, normalizeLumenFormErrors, resolveLumenChartTone, scaleLumenChartValue, tokenizeLumenCode } from '@santi020k/lumen-core';
 import { renderSVG } from 'uqr';
 import { useCalendar, useDialog, useDropdownMenu, useInputOTP, usePopover, useResizable, useSelect, useTabs, useTooltip } from './hooks.js';
+const setRefValue = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref) {
+        ref.current = value;
+    }
+};
 const emptyOptions = [];
 const emptyStringOptions = [];
 const emptyDataTableColumns = [];
 const emptyDataTableRows = [];
-const variantClass = (base, variant, defaultVariant = 'default') => variant === defaultVariant ? false : `${base}--${variant}`;
+const emptyChartSeries = [];
+const emptyPieSeries = {
+    data: [],
+    id: 'pie',
+    label: 'Values'
+};
+const emptyChartValues = [];
+const variantClass = (base, variant, defaultVariant = 'default') => (variant === defaultVariant ? false : `${base}--${variant}`);
 const iconSizeClass = (size) => size === 'default' ? undefined : `ui-icon--${size}`;
 const reactSvgAttributeNames = {
     'clip-rule': 'clipRule',
@@ -22,7 +36,10 @@ const reactSvgAttributeNames = {
     'stroke-width': 'strokeWidth',
     tabindex: 'tabIndex'
 };
-const toReactSvgAttributes = (attributes) => Object.fromEntries(Object.entries(attributes).map(([name, value]) => [reactSvgAttributeNames[name] ?? name, value]));
+const toReactSvgAttributes = (attributes) => Object.fromEntries(Object.entries(attributes).map(([name, value]) => [
+    reactSvgAttributeNames[name] ?? name,
+    value
+]));
 const renderIconNode = ([tagName, attributes, children], index) => createElement(tagName, {
     ...toReactSvgAttributes(attributes),
     key: attributes.key ?? index
@@ -43,24 +60,34 @@ const getIconAccessibility = ({ ariaHidden, ariaLabel, decorative, label, role }
         role: role ?? 'img'
     };
 };
-const renderIconSvg = (icon, className) => (_jsx("svg", { "aria-hidden": "true", className: className, fill: "none", focusable: "false", height: "1em", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: icon.node.map(renderIconNode) }));
-const renderNamedIcon = (icon) => renderIconSvg(icon, `ui-icon__svg lucide-${icon.name}`);
+const renderIconSvg = (icon, className) => {
+    const width = 'size' in icon ? icon.size : icon.width;
+    const height = 'size' in icon ? icon.size : icon.height;
+    return (_jsx("svg", { "aria-hidden": "true", className: className, fill: icon.style === 'fill' ? 'currentColor' : 'none', focusable: "false", height: "1em", stroke: icon.style === 'fill' ? 'none' : 'currentColor', strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: icon.style === 'fill' ? '0' : '2', viewBox: `0 0 ${width} ${height}`, width: "1em", xmlns: "http://www.w3.org/2000/svg", children: icon.node.map(renderIconNode) }));
+};
+const renderNamedIcon = (icon) => renderIconSvg(icon, `ui-icon__svg ${icon.source ?? 'lucide'}-${icon.name}`);
 const renderLucideIcon = (name, className) => {
     const icon = getLumenIcon(name);
     return icon ? renderIconSvg(icon, className) : null;
 };
-const resolveSurface = (surface, glass) => glass || surface === 'glass' ? 'glass' : surface;
-const glassIntensityClass = (glass) => glass === 'subtle' ? 'ui-glass-subtle' : glass === 'strong' && 'ui-glass-strong';
-const glassSurfaceClass = (base, surface, glass) => resolveSurface(surface, glass) === 'glass' && composeClassName(`${base}--glass`, glassIntensityClass(glass));
-const glassClass = (base, glass) => Boolean(glass) && composeClassName(`${base}--glass`, glassIntensityClass(glass));
+const resolveSurface = (glass) => glass ? 'glass' : 'default';
+const glassIntensityClass = (glass) => glass === 'subtle' ?
+    'ui-glass-subtle' :
+    glass === 'strong' && 'ui-glass-strong';
+const glassSurfaceClass = (base, glass) => resolveSurface(glass) === 'glass' &&
+    composeClassName(`${base}--glass`, glassIntensityClass(glass));
+const glassClass = (base, glass) => Boolean(glass) &&
+    composeClassName(`${base}--glass`, glassIntensityClass(glass));
 const normalizeOption = (option) => typeof option === 'string' ? { label: option, value: option } : option;
 const isDataTableCellObject = (cell) => typeof cell === 'object' && cell !== null;
 const formatDataTableCell = (cell) => {
-    const value = isDataTableCellObject(cell) ? cell.label ?? cell.value : cell;
+    const value = isDataTableCellObject(cell) ? (cell.label ?? cell.value) : cell;
     return value === undefined || value === null ? '' : String(value);
 };
 const getDataTableSortValue = (cell) => {
-    if (!isDataTableCellObject(cell) || cell.sortValue === undefined || cell.sortValue === null)
+    if (!isDataTableCellObject(cell) ||
+        cell.sortValue === undefined ||
+        cell.sortValue === null)
         return undefined;
     return String(cell.sortValue);
 };
@@ -77,7 +104,7 @@ const composeHandlers = (userHandler, lumenHandler) => (event) => {
 const Primitive = ({ as, className, uiClassName, ...props }) => {
     const Tag = as ?? 'div';
     const safeClassName = typeof className === 'string' ? className : undefined;
-    return _jsx(Tag, { className: composeClassName(uiClassName, safeClassName), ...props });
+    return (_jsx(Tag, { className: composeClassName(uiClassName, safeClassName), ...props }));
 };
 const DropdownMenuContext = createContext(null);
 const PopoverContext = createContext(null);
@@ -91,18 +118,18 @@ const requireContext = (context, componentName) => {
 };
 export const Accordion = ({ className, variant = 'default', ...props }) => (_jsx("div", { className: composeClassName('ui-accordion', variant === 'flush' && 'ui-accordion--flush', className), "data-variant": variant, ...props }));
 export const Alert = ({ className, glass = false, variant = 'default', ...props }) => (_jsx("aside", { className: composeClassName('ui-alert', variantClass('ui-alert', variant), glassClass('ui-alert', glass), className), "data-variant": variant, ...props }));
-export const AlertDialog = ({ className, defaultOpen, glass = false, onClick, onClose, onOpenChange, open, surface = 'default', ...props }) => {
+export const AlertDialog = ({ className, defaultOpen, glass = false, onClick, onClose, onOpenChange, open, ...props }) => {
     const dialog = useDialog({ alert: true, defaultOpen, onOpenChange, open });
-    return (_jsx("dialog", { ...dialog.dialogProps, ...props, className: composeClassName('ui-dialog ui-alert-dialog', glassSurfaceClass('ui-dialog', surface, glass), className), "data-surface": resolveSurface(surface, glass), onClick: composeHandlers(onClick, dialog.dialogProps.onClick), onClose: composeHandlers(onClose, dialog.dialogProps.onClose) }));
+    return (_jsx("dialog", { ...dialog.dialogProps, ...props, className: composeClassName('ui-dialog ui-alert-dialog', glassSurfaceClass('ui-dialog', glass), className), "data-surface": resolveSurface(glass), onClick: composeHandlers(onClick, dialog.dialogProps.onClick), onClose: composeHandlers(onClose, dialog.dialogProps.onClose) }));
 };
 export const Agenda = ({ className, glass = false, ...props }) => (_jsx("section", { className: composeClassName('ui-agenda', glassClass('ui-agenda', glass), className), ...props }));
 export const AspectRatio = ({ className, ratio = '16 / 9', style, ...props }) => (_jsx("div", { className: composeClassName('ui-aspect-ratio', className), style: { aspectRatio: ratio, ...style }, ...props }));
 export const Autocomplete = ({ className, type = 'search', ...props }) => (_jsx("input", { "aria-autocomplete": "list", className: composeClassName('ui-input ui-autocomplete', className), role: "combobox", type: type, ...props }));
 export const Attachment = ({ className, glass = false, href, ...props }) => {
     const nextClassName = composeClassName('ui-attachment', glassClass('ui-attachment', glass), className);
-    return href
-        ? _jsx("a", { className: nextClassName, href: href, ...props })
-        : _jsx("article", { className: nextClassName, ...props });
+    return href ?
+        (_jsx("a", { className: nextClassName, href: href, ...props })) :
+        (_jsx("article", { className: nextClassName, ...props }));
 };
 export const Avatar = ({ alt = '', children, className, fallback, src, ...props }) => (_jsxs("span", { className: composeClassName('ui-avatar', className), ...props, children: [src ? _jsx("img", { alt: alt, src: src }) : _jsx("span", { children: fallback }), children] }));
 export const Badge = ({ className, variant = 'default', ...props }) => (_jsx("span", { className: composeClassName('ui-badge', `ui-badge--${variant}`, className), "data-variant": variant, ...props }));
@@ -116,16 +143,10 @@ export const Button = ({ asChild = false, children, className, disabled, loading
         if (!isValidElement(child)) {
             throw new TypeError('Button with asChild requires exactly one React element child.');
         }
-        return cloneElement(child, {
-            ...props,
-            'aria-busy': loading ? true : undefined,
-            'aria-disabled': disabled ? true : undefined,
-            className: composeClassName(buttonClassName, child.props.className),
-            ref: ref,
-            children: (_jsxs(_Fragment, { children: [loading && _jsx("span", { "aria-hidden": "true", className: "ui-spinner" }), child.props.children] }))
-        });
+        const ChildComponent = child.type;
+        return (_jsxs(ChildComponent, { ...child.props, ...props, "aria-busy": loading ? true : undefined, "aria-disabled": disabled ? true : undefined, className: composeClassName(buttonClassName, child.props.className), "data-slot": "button", ref: ref, children: [loading && _jsx("span", { "aria-hidden": "true", className: "ui-spinner" }), child.props.children] }));
     }
-    return (_jsxs("button", { "aria-busy": loading || undefined, className: buttonClassName, disabled: disabled, ref: ref, type: type, ...props, children: [loading && _jsx("span", { "aria-hidden": "true", className: "ui-spinner" }), children] }));
+    return (_jsxs("button", { "aria-busy": loading || undefined, className: buttonClassName, "data-slot": "button", disabled: disabled, ref: ref, type: type, ...props, children: [loading && _jsx("span", { "aria-hidden": "true", className: "ui-spinner" }), children] }));
 };
 export const ButtonGroup = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-button-group', className), ...props }));
 export const Calendar = ({ className, defaultValue, disabled = false, glass = false, locale, max, min, month, name, onValueChange, value, ...props }) => {
@@ -142,17 +163,145 @@ export const Calendar = ({ className, defaultValue, disabled = false, glass = fa
     });
     return (_jsxs("div", { ...props, ...calendar.rootProps, className: composeClassName(calendar.rootProps.className, glassClass('ui-calendar', glass), className), "data-ui-glass-track": glass ? true : undefined, children: [_jsx("input", { ...calendar.inputProps }), _jsxs("div", { className: "ui-calendar__header", children: [_jsx("button", { ...calendar.previousProps, type: "button", children: _jsx("span", { "aria-hidden": "true", children: "\u2039" }) }), _jsx("strong", { ...calendar.labelProps, children: calendar.label }), _jsx("button", { ...calendar.nextProps, type: "button", children: _jsx("span", { "aria-hidden": "true", children: "\u203A" }) })] }), _jsxs("table", { ...calendar.gridProps, children: [_jsx("thead", { children: _jsx("tr", { role: "row", children: calendar.weekdays.map(weekday => (_jsx("th", { role: "columnheader", scope: "col", children: weekday }, weekday))) }) }), _jsx("tbody", { children: calendar.weeks.map(week => (_jsx("tr", { role: "row", children: week.map(day => (_jsx("td", { ...calendar.getDayProps(day), children: day.day }, day.date))) }, week[0]?.date ?? 'week'))) })] })] }));
 };
-export const Card = ({ as, className, glass = false, variant = 'default', ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), className: composeClassName(variant === 'muted' && 'ui-card--muted', variant === 'interactive' && 'ui-card--interactive', variant === 'unstyled' && 'ui-card--unstyled', (glass || variant === 'glass') && composeClassName('ui-card--glass', glassIntensityClass(glass)), className), "data-variant": variant, ...props, uiClassName: "ui-card" }));
+export const Card = ({ as, className, glass = false, variant = 'default', ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), className: composeClassName(variant === 'muted' && 'ui-card--muted', variant === 'interactive' && 'ui-card--interactive', variant === 'unstyled' && 'ui-card--unstyled', (glass || variant === 'glass') &&
+        composeClassName('ui-card--glass', glassIntensityClass(glass)), className), "data-slot": "card", "data-variant": variant, ...props, uiClassName: "ui-card" }));
+export const CardHeader = ({ as, ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), "data-slot": "card-header", ...props, uiClassName: "ui-card__header" }));
+export const CardTitle = ({ as, ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), "data-slot": "card-title", ...props, uiClassName: "ui-card__title" }));
+export const CardDescription = ({ as, ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), "data-slot": "card-description", ...props, uiClassName: "ui-card__description" }));
+export const CardContent = ({ as, ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), "data-slot": "card-content", ...props, uiClassName: "ui-card__content" }));
+export const CardFooter = ({ as, ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), "data-slot": "card-footer", ...props, uiClassName: "ui-card__footer" }));
 export const Carousel = ({ className, glass = false, ...props }) => (_jsx("section", { className: composeClassName('ui-carousel', glassClass('ui-carousel', glass), className), "data-ui-carousel": true, ...props }));
-export const Chart = ({ className, glass = false, ...props }) => (_jsx("figure", { className: composeClassName('ui-chart', glassClass('ui-chart', glass), className), ...props }));
-export const Checkbox = ({ className, ...props }) => (_jsx("input", { className: composeClassName('ui-checkbox', className), type: "checkbox", ...props }));
+const ChartHeader = ({ description, heading, value }) => {
+    if (!heading && !description && !value)
+        return null;
+    return (_jsxs("header", { children: [_jsxs("div", { className: "ui-chart__heading", children: [heading && _jsx("h3", { children: heading }), description && _jsx("p", { children: description })] }), value && _jsx("strong", { "data-ui-chart-value": true, children: value })] }));
+};
+export const Chart = ({ caption, children, className, description, glass = false, heading, presentation = 'default', value, ...props }) => (_jsxs("figure", { className: composeClassName('ui-chart', presentation === 'bare' && 'ui-chart--bare', glassClass('ui-chart', glass), className), ...props, children: [_jsx(ChartHeader, { description: description, heading: heading, value: value }), children, caption && _jsx("figcaption", { children: caption })] }));
+const ChartLegend = ({ series }) => (_jsx("ul", { "aria-label": "Chart legend", className: "ui-chart__legend", children: series.map((item, index) => (_jsxs("li", { className: getLumenChartToneClassName(item.tone, index), children: [_jsx("span", { "aria-hidden": "true" }), item.label] }, item.id))) }));
+const ChartDataTable = ({ categories, formatCategory = String, formatValue = String, series }) => (_jsxs("details", { className: "ui-chart__data", children: [_jsx("summary", { children: "View chart data" }), _jsx("div", { children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Category" }), series.map(item => (_jsx("th", { scope: "col", children: item.label }, item.id)))] }) }), _jsx("tbody", { children: categories.map(category => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: series
+                                        .flatMap(item => item.data)
+                                        .find(datum => datum.x === category)?.xLabel ??
+                                        formatCategory(category) }), series.map(item => {
+                                    const datum = item.data.find(candidate => candidate.x === category);
+                                    return (_jsx("td", { children: datum?.label ??
+                                            (datum?.y === null || datum === undefined ?
+                                                'Not available' :
+                                                formatValue(datum.y)) }, item.id));
+                                })] }, `${typeof category}:${String(category)}`))) })] }) })] }));
+const formatChartPercentage = (percentage) => new Intl.NumberFormat(undefined, {
+    maximumFractionDigits: percentage < 0.01 ? 1 : 0,
+    style: 'percent'
+}).format(percentage);
+export const Sparkline = ({ area = false, className, label = 'Trend', showEndpoint = true, tone, values = emptyChartValues, ...props }) => {
+    const geometry = createLumenLineGeometry(values.map((value, index) => ({ x: index, y: value })), { height: 40, padding: 3, width: 120 });
+    const resolvedTone = resolveLumenChartTone(tone);
+    const endpoint = geometry.points.at(-1);
+    return (_jsxs("span", { "aria-label": label, className: composeClassName('ui-sparkline', `ui-chart-tone--${resolvedTone}`, className), role: "img", ...props, children: [_jsxs("svg", { "aria-hidden": "true", preserveAspectRatio: "none", viewBox: "0 0 120 40", children: [area &&
+                        geometry.areaPaths.map(path => (_jsx("path", { className: "ui-sparkline__area", d: path }, path))), _jsx("path", { className: "ui-sparkline__line", d: geometry.path }), showEndpoint && endpoint && (_jsx("circle", { className: "ui-sparkline__endpoint", cx: endpoint.xCoordinate, cy: endpoint.yCoordinate, r: "2.5" }))] }), _jsx("span", { className: "ui-sr-only", children: label })] }));
+};
+/* eslint-disable complexity -- Chart renderers keep optional semantic and SVG layers colocated. */
+export const BarChart = ({ categoryWidth, className, emptyLabel = 'No chart data available.', formatCategory = String, formatValue = String, layout = 'grouped', orientation = 'vertical', series = emptyChartSeries, showLegend = series.length > 1, showTable = true, ...props }) => {
+    const geometry = createLumenBarGeometry(series, {
+        ...(categoryWidth === undefined ? {} : { categoryWidth }),
+        layout,
+        orientation
+    });
+    const hasData = hasLumenChartData(series);
+    const ticks = getLumenChartTicks(geometry.domain);
+    const categories = geometry.categories.map(category => category.category);
+    const margin = orientation === 'horizontal' ?
+        {
+            bottom: 24,
+            left: Math.max(64, Math.min(240, categoryWidth ?? 112)),
+            right: 20,
+            top: 16
+        } :
+        { bottom: 52, left: 52, right: 16, top: 16 };
+    return (_jsxs(Chart, { className: composeClassName('ui-bar-chart', className), ...props, children: [showLegend && hasData && _jsx(ChartLegend, { series: series }), !hasData && (_jsx("p", { className: "ui-chart__empty", role: "status", children: emptyLabel })), _jsx("div", { className: "ui-chart__plot", hidden: !hasData, children: _jsxs("svg", { "aria-hidden": "true", preserveAspectRatio: "xMidYMid meet", viewBox: `0 0 ${geometry.width} ${geometry.height}`, children: [_jsx("g", { className: "ui-chart__grid", children: ticks.map(tick => {
+                                const coordinate = orientation === 'horizontal' ?
+                                    scaleLumenChartValue(tick, geometry.domain, margin.left, geometry.width - margin.right) :
+                                    scaleLumenChartValue(tick, geometry.domain, geometry.height - margin.bottom, margin.top);
+                                return orientation === 'horizontal' ?
+                                    (_jsx("line", { x1: coordinate, x2: coordinate, y1: margin.top, y2: geometry.height - margin.bottom }, tick)) :
+                                    (_jsx("line", { x1: margin.left, x2: geometry.width - margin.right, y1: coordinate, y2: coordinate }, tick));
+                            }) }), _jsx("g", { className: "ui-chart__axis-labels", children: geometry.categories.map(category => (_jsx("text", { dominantBaseline: orientation === 'horizontal' ? 'middle' : undefined, textAnchor: orientation === 'horizontal' ? 'end' : 'middle', x: category.x, y: category.y, children: String(category.label) }, `${typeof category.label}:${String(category.label)}`))) }), _jsx("g", { className: "ui-bar-chart__marks", children: geometry.marks.map(mark => (_jsx("rect", { className: getLumenChartToneClassName(mark.tone), height: mark.height, rx: "4", width: mark.width, x: mark.x, y: mark.y, children: _jsx("title", { children: `${series
+                                        .flatMap(item => item.data)
+                                        .find(datum => datum.x === mark.category)?.xLabel ??
+                                        formatCategory(mark.category)} · ${mark.seriesLabel}: ${formatValue(mark.value)}` }) }, `${mark.seriesId}:${String(mark.category)}`))) })] }) }), showTable && hasData && (_jsx(ChartDataTable, { categories: categories, formatCategory: formatCategory, formatValue: formatValue, series: series }))] }));
+};
+const getLineChartMarkerStep = (markers, categoryCount) => {
+    if (markers === false || markers === 'none')
+        return Number.POSITIVE_INFINITY;
+    if (typeof markers === 'number')
+        return Math.max(1, Math.round(markers));
+    if (markers === 'auto')
+        return Math.max(1, Math.ceil(categoryCount / 24));
+    return 1;
+};
+export const LineChart = ({ area = false, className, emptyLabel = 'No chart data available.', formatCategory = String, formatValue = String, markers = 'auto', referenceValue, series = emptyChartSeries, showLegend = series.length > 1, showTable = true, ...props }) => {
+    const width = 640;
+    const height = 320;
+    const padding = 44;
+    const categories = getLumenChartCategories(series);
+    const hasData = hasLumenChartData(series);
+    const alignedSeries = series.map(item => alignLumenChartSeries(item, categories));
+    const domain = getLumenChartDomain([
+        ...alignedSeries.flatMap(item => item.data.map(datum => datum.y)),
+        referenceValue ?? null
+    ], false);
+    const geometries = alignedSeries.map(item => createLumenLineGeometry(item.data, {
+        domain,
+        height,
+        includeZero: false,
+        padding,
+        width
+    }));
+    const ticks = getLumenChartTicks(domain);
+    const labelStep = Math.max(1, Math.ceil(categories.length / 8));
+    const markerStep = getLineChartMarkerStep(markers, categories.length);
+    const referenceY = referenceValue === undefined ?
+        undefined :
+        scaleLumenChartValue(referenceValue, domain, height - padding, padding);
+    return (_jsxs(Chart, { className: composeClassName('ui-line-chart', className), ...props, children: [showLegend && hasData && _jsx(ChartLegend, { series: series }), !hasData && (_jsx("p", { className: "ui-chart__empty", role: "status", children: emptyLabel })), _jsx("div", { className: "ui-chart__plot", hidden: !hasData, children: _jsxs("svg", { "aria-hidden": "true", preserveAspectRatio: "xMidYMid meet", viewBox: `0 0 ${width} ${height}`, children: [_jsx("g", { className: "ui-chart__grid", children: ticks.map(tick => {
+                                const y = scaleLumenChartValue(tick, domain, height - padding, padding);
+                                return (_jsxs(Fragment, { children: [_jsx("line", { x1: padding, x2: width - padding, y1: y, y2: y }), _jsx("text", { x: padding - 8, y: y, children: formatValue(tick) })] }, tick));
+                            }) }), _jsx("g", { className: "ui-chart__axis-labels", children: categories.map((category, index) => {
+                                if (index % labelStep !== 0 && index !== categories.length - 1)
+                                    return null;
+                                const denominator = Math.max(1, categories.length - 1);
+                                const x = padding + (index / denominator) * (width - padding * 2);
+                                return (_jsx("text", { textAnchor: "middle", x: x, y: height - 14, children: series
+                                        .flatMap(item => item.data)
+                                        .find(datum => datum.x === category)?.xLabel ??
+                                        formatCategory(category) }, `${typeof category}:${String(category)}`));
+                            }) }), referenceY !== undefined && (_jsx("line", { className: "ui-chart__reference", x1: padding, x2: width - padding, y1: referenceY, y2: referenceY })), geometries.map((geometry, index) => {
+                            const item = series[index];
+                            if (!item)
+                                return null;
+                            const tone = resolveLumenChartTone(item.tone, index);
+                            return (_jsxs("g", { className: composeClassName('ui-line-chart__series', getLumenChartToneClassName(tone)), children: [area &&
+                                        geometry.areaPaths.map(path => (_jsx("path", { className: "ui-line-chart__area", d: path }, path))), _jsx("path", { className: "ui-line-chart__line", d: geometry.path }), Number.isFinite(markerStep) &&
+                                        geometry.points.map((point, pointIndex) => pointIndex % markerStep === 0 && (_jsx("circle", { className: "ui-line-chart__point", cx: point.xCoordinate, cy: point.yCoordinate, r: "3", children: _jsx("title", { children: `${point.xLabel ?? formatCategory(point.x)} · ${item.label}: ${formatValue(point.y ?? 0)}` }) }, `${typeof point.x}:${String(point.x)}`)))] }, item.id));
+                        })] }) }), showTable && hasData && (_jsx(ChartDataTable, { categories: categories, formatCategory: formatCategory, formatValue: formatValue, series: series }))] }));
+};
+export const PieChart = ({ centerLabel, centerValue, className, series = emptyPieSeries, showLegend = true, showTable = true, valueFormatter = String, variant = 'donut', ...props }) => {
+    const geometry = createLumenPieGeometry(series.data, { variant });
+    const hasData = hasLumenPieData(series.data);
+    const hasCenterLabel = centerLabel !== null && centerLabel !== undefined;
+    const hasCenterValue = centerValue !== null && centerValue !== undefined;
+    return (_jsxs(Chart, { className: composeClassName('ui-pie-chart', getLumenPieChartVariantClassName(variant), className), ...props, children: [showLegend && hasData && (_jsx("ul", { "aria-label": "Chart legend", className: "ui-chart__legend", children: geometry.slices.map(slice => (_jsxs("li", { className: getLumenChartToneClassName(slice.tone), children: [_jsx("span", { "aria-hidden": "true" }), slice.label] }, `${typeof slice.x}:${String(slice.x)}`))) })), !hasData && (_jsx("p", { className: "ui-chart__empty", role: "status", children: "No chart data available." })), _jsxs("div", { className: "ui-chart__plot ui-pie-chart__plot", hidden: !hasData, children: [_jsx("svg", { "aria-hidden": "true", preserveAspectRatio: "xMidYMid meet", viewBox: `0 0 ${geometry.size} ${geometry.size}`, children: _jsx("g", { className: "ui-pie-chart__slices", children: geometry.slices.map(slice => (_jsx("path", { className: getLumenChartToneClassName(slice.tone), d: slice.path, fillRule: "evenodd", children: _jsx("title", { children: `${slice.label}: ${valueFormatter(slice.value)} (${formatChartPercentage(slice.percentage)})` }) }, `${typeof slice.x}:${String(slice.x)}`))) }) }), variant === 'donut' && (hasCenterLabel || hasCenterValue) && (_jsxs(_Fragment, { children: [_jsxs("div", { "aria-hidden": "true", className: "ui-pie-chart__center", children: [hasCenterValue && _jsx("strong", { children: centerValue }), hasCenterLabel && _jsx("span", { children: centerLabel })] }), _jsxs("div", { className: "ui-sr-only", children: [centerValue, ' ', centerLabel] })] }))] }), showTable && hasData && (_jsxs("details", { className: "ui-chart__data", children: [_jsx("summary", { children: "View chart data" }), _jsx("div", { children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Category" }), _jsx("th", { scope: "col", children: "Value" }), _jsx("th", { scope: "col", children: "Share" })] }) }), _jsx("tbody", { children: geometry.slices.map(slice => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: slice.label }), _jsx("td", { children: valueFormatter(slice.value) }), _jsx("td", { children: formatChartPercentage(slice.percentage) })] }, `${typeof slice.x}:${String(slice.x)}`))) })] }) })] }))] }));
+};
+export const Checkbox = ({ className, ref, ...props }) => (_jsx("input", { className: composeClassName('ui-checkbox', className), ref: ref, type: "checkbox", ...props }));
+export const CheckboxGroup = ({ children, className, invalid = false, legend, orientation = 'vertical', ...props }) => (_jsxs("fieldset", { "aria-invalid": invalid || undefined, className: composeClassName('ui-checkbox-group', `ui-checkbox-group--${orientation}`, className), "data-invalid": invalid ? 'true' : undefined, "data-orientation": orientation, "data-ui-checkbox-group": true, ...props, children: [legend && _jsx("legend", { children: legend }), children] }));
 export const Collapsible = ({ className, ...props }) => (_jsx("details", { className: composeClassName('ui-collapsible', className), "data-ui-collapsible": true, ...props }));
 const renderCodeToken = (token) => {
     if (!token.kind)
         return token.value;
     return (_jsx("span", { className: lumenCodeTokenClassNames[token.kind], children: token.value }, `${token.start}-${token.kind}`));
 };
-const renderCodeChildren = (code, children, language) => code === undefined ? children : tokenizeLumenCode(code, language).map(renderCodeToken);
+const renderCodeChildren = (code, children, language) => code === undefined ?
+    children :
+    tokenizeLumenCode(code, language).map(renderCodeToken);
 const renderCodeCopyButton = () => (_jsxs("button", { "aria-label": "Copy code to clipboard", className: "ui-code__copy", "data-ui-code-copy": true, type: "button", children: [renderLucideIcon('copy', 'ui-code__copy-icon'), renderLucideIcon('check', 'ui-code__check-icon')] }));
 const renderCodeHeader = ({ copy, label, language }) => {
     if (!copy && !label && !language)
@@ -162,9 +311,59 @@ const renderCodeHeader = ({ copy, label, language }) => {
 export const Code = ({ children, className, code, copy = false, highlighted = false, label, language, theme = 'auto', variant = 'inline', wrap = false, ...props }) => {
     const codeChildren = renderCodeChildren(code, children, language);
     if (variant === 'block') {
-        return (_jsxs("figure", { className: composeClassName('ui-code ui-code--block', wrap && 'ui-code--wrap', className), "data-code-theme": theme, "data-language": language, "data-ui-code": true, ...props, children: [renderCodeHeader({ copy, label, language }), highlighted ? children : _jsx("pre", { children: _jsx("code", { children: codeChildren }) })] }));
+        return (_jsxs("figure", { className: composeClassName('ui-code ui-code--block', wrap && 'ui-code--wrap', className), "data-code-theme": theme, "data-language": language, "data-slot": "code", "data-ui-code": true, ...props, children: [renderCodeHeader({ copy, label, language }), highlighted ?
+                    (children) :
+                    (_jsx("pre", { children: _jsx("code", { children: codeChildren }) }))] }));
     }
-    return (_jsx("code", { className: composeClassName('ui-code ui-code--inline', className), "data-code-theme": theme, "data-language": language, ...props, children: code ?? children }));
+    return (_jsx("code", { className: composeClassName('ui-code ui-code--inline', className), "data-code-theme": theme, "data-language": language, "data-slot": "code", ...props, children: code ?? children }));
+};
+const dispatchCopyToast = (enabled, title, variant) => {
+    if (!enabled)
+        return;
+    document.dispatchEvent(new CustomEvent('ui:toast', {
+        detail: { title, variant }
+    }));
+};
+const getCopyButtonLabel = (state, copiedLabel, errorLabel, label) => ({ copied: copiedLabel, error: errorLabel, idle: label })[state];
+export const CopyButton = ({ children = 'Copy', className, copiedLabel = 'Copied to clipboard', errorLabel = 'Could not copy to clipboard', label = 'Copy to clipboard', onClick, resetAfter = 2000, target, toast = false, type = 'button', value, ...props }) => {
+    const [state, setState] = useState('idle');
+    const resetTimerRef = useRef(undefined);
+    useEffect(() => () => {
+        globalThis.clearTimeout(resetTimerRef.current);
+    }, []);
+    const handleClick = async (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        const button = event.currentTarget;
+        const targetElement = target ? document.querySelector(target) : null;
+        const text = value ?? targetElement?.innerText ?? targetElement?.textContent;
+        try {
+            if (text === undefined)
+                throw new Error(errorLabel);
+            await navigator.clipboard.writeText(text);
+            setState('copied');
+            button.dispatchEvent(new CustomEvent('ui:copy-success', {
+                bubbles: true,
+                detail: { value: text }
+            }));
+            dispatchCopyToast(toast, copiedLabel, 'success');
+        }
+        catch (error) {
+            setState('error');
+            button.dispatchEvent(new CustomEvent('ui:copy-error', {
+                bubbles: true,
+                detail: { error }
+            }));
+            dispatchCopyToast(toast, errorLabel, 'destructive');
+        }
+        globalThis.clearTimeout(resetTimerRef.current);
+        resetTimerRef.current = globalThis.setTimeout(() => {
+            setState('idle');
+        }, resetAfter);
+    };
+    const accessibleLabel = getCopyButtonLabel(state, copiedLabel, errorLabel, label);
+    return (_jsx("button", { "aria-label": accessibleLabel, className: composeClassName('ui-button ui-button--outline ui-copy-button', className), "data-state": state, "data-ui-copy-button": true, onClick: handleClick, type: type, ...props, children: children }));
 };
 export const Combobox = ({ className, defaultValue, id, label, list, onBlur, onChange, onFocus, onKeyDown, options = emptyStringOptions, type = 'text', value: valueProp, wrapperClassName, ...props }) => {
     const inputId = id ?? `${list}-input`;
@@ -184,7 +383,7 @@ export const Combobox = ({ className, defaultValue, id, label, list, onBlur, onC
             if (!nextTarget || !event.currentTarget.contains(nextTarget)) {
                 setOpen(false);
             }
-        }, children: [label && _jsx("label", { className: "ui-label", htmlFor: inputId, children: label }), _jsx("input", { "aria-autocomplete": "list", "aria-controls": list, "aria-expanded": open, className: composeClassName('ui-input', className), id: inputId, role: "combobox", type: type, value: renderedValue, onBlur: onBlur, onChange: event => {
+        }, children: [label && (_jsx("label", { className: "ui-label", htmlFor: inputId, children: label })), _jsx("input", { "aria-autocomplete": "list", "aria-controls": list, "aria-expanded": open, className: composeClassName('ui-input', className), id: inputId, role: "combobox", type: type, value: renderedValue, onBlur: onBlur, onChange: event => {
                     if (valueProp === undefined) {
                         setValue(event.currentTarget.value);
                     }
@@ -202,14 +401,18 @@ export const Combobox = ({ className, defaultValue, id, label, list, onBlur, onC
                         selectOption(visibleOptions[0]);
                     }
                     onKeyDown?.(event);
-                }, ...props }), _jsx("div", { className: "ui-combobox__list", hidden: !open, id: list, role: "listbox", children: visibleOptions.map(option => (_jsx("button", { "data-ui-combobox-option": true, "data-value": option, role: "option", type: "button", onClick: () => { selectOption(option); }, onMouseDown: event => { event.preventDefault(); }, children: option }, option))) })] }));
+                }, ...props }), _jsx("div", { className: "ui-combobox__list", hidden: !open, id: list, role: "listbox", children: visibleOptions.map(option => (_jsx("button", { "data-ui-combobox-option": true, "data-value": option, role: "option", type: "button", onClick: () => {
+                        selectOption(option);
+                    }, onMouseDown: event => {
+                        event.preventDefault();
+                    }, children: option }, option))) })] }));
 };
 export const Command = ({ className, glass = false, ...props }) => (_jsx("div", { className: composeClassName('ui-command', glassClass('ui-command', glass), className), "data-ui-command": true, ...props }));
-export const ContextMenu = ({ className, glass = false, surface = 'default', ...props }) => (_jsx("menu", { className: composeClassName('ui-menu', glassSurfaceClass('ui-menu', surface, glass), className), "data-surface": resolveSurface(surface, glass), "data-ui-context-menu": true, role: props.role ?? 'menu', ...props }));
+export const ContextMenu = ({ className, glass = false, ...props }) => (_jsx("menu", { className: composeClassName('ui-menu', glassSurfaceClass('ui-menu', glass), className), "data-surface": resolveSurface(glass), "data-ui-context-menu": true, role: props.role ?? 'menu', ...props }));
 export const ColorPicker = ({ className, type = 'color', ...props }) => (_jsx("input", { className: composeClassName('ui-color-picker', className), type: type, ...props }));
-export const DataTable = ({ children, className, columns = emptyDataTableColumns, glass = false, name, rows = emptyDataTableRows, selectable = false, ...props }) => (_jsx("div", { className: composeClassName('ui-data-table', glassClass('ui-data-table', glass), className), "data-ui-datatable": true, "data-ui-datatable-name": name, "data-ui-datatable-selectable": selectable ? 'true' : undefined, "data-ui-glass-track": glass ? true : undefined, ...props, children: columns.length > 0
-        ? (_jsxs("table", { children: [_jsx("thead", { children: _jsx("tr", { children: columns.map(column => (_jsx("th", { "data-ui-datatable-sort-type": column.sort, "data-ui-datatable-sortable": column.sortable ? 'true' : undefined, scope: "col", children: column.header ?? column.label ?? column.key }, column.key))) }) }), _jsx("tbody", { children: rows.map((row, rowIndex) => (_jsx("tr", { "data-ui-datatable-row": true, "data-value": getDataTableRowValue(row, rowIndex), children: columns.map(column => (_jsx("td", { "data-sort-value": getDataTableSortValue(row[column.key]), children: formatDataTableCell(row[column.key]) }, column.key))) }, getDataTableRowValue(row, rowIndex)))) })] }))
-        : children }));
+export const DataTable = ({ children, className, columns = emptyDataTableColumns, glass = false, name, rows = emptyDataTableRows, selectable = false, ...props }) => (_jsx("div", { className: composeClassName('ui-data-table', glassClass('ui-data-table', glass), className), "data-ui-datatable": true, "data-ui-datatable-name": name, "data-ui-datatable-selectable": selectable ? 'true' : undefined, "data-ui-glass-track": glass ? true : undefined, ...props, children: columns.length > 0 ?
+        (_jsxs("table", { children: [_jsx("thead", { children: _jsx("tr", { children: columns.map(column => (_jsx("th", { "data-ui-datatable-sort-type": column.sort, "data-ui-datatable-sortable": column.sortable ? 'true' : undefined, scope: "col", children: column.header ?? column.label ?? column.key }, column.key))) }) }), _jsx("tbody", { children: rows.map((row, rowIndex) => (_jsx("tr", { "data-ui-datatable-row": true, "data-value": getDataTableRowValue(row, rowIndex), children: columns.map(column => (_jsx("td", { "data-sort-value": getDataTableSortValue(row[column.key]), children: formatDataTableCell(row[column.key]) }, column.key))) }, getDataTableRowValue(row, rowIndex)))) })] })) :
+        (children) }));
 const formatDatePickerDisplayValue = (value, placeholder) => {
     if (!value || !/^\d{4}-\d{2}-\d{2}$/.test(value))
         return placeholder;
@@ -223,15 +426,15 @@ const formatDatePickerDisplayValue = (value, placeholder) => {
         year: 'numeric'
     }).format(date);
 };
-const stringifyDatePickerConstraint = (value) => value === undefined ? undefined : String(value);
+const stringifyDatePickerConstraint = (value) => (value === undefined ? undefined : String(value));
 /* eslint-disable complexity -- DatePicker coordinates controlled input, disclosure, Calendar, and native form contracts. */
-export const DatePicker = ({ className, defaultValue, disabled, glass = false, id, max, min, name, onChange, onInvalid, onValueChange, placeholder, required, value, ...props }) => {
+export const DatePicker = ({ className, defaultValue, disabled, glass = false, id, inputRef, max, min, name, onChange, onInvalid, onValueChange, placeholder, required, value, ...props }) => {
     const generatedId = useId();
     const datePickerId = id ?? generatedId;
     const triggerId = `${datePickerId}-trigger`;
     const popoverId = `${datePickerId}-popover`;
     const rootRef = useRef(null);
-    const inputRef = useRef(null);
+    const nativeInputRef = useRef(null);
     const triggerRef = useRef(null);
     const [internalValue, setInternalValue] = useState(defaultValue ?? '');
     const [open, setOpen] = useState(false);
@@ -245,7 +448,8 @@ export const DatePicker = ({ className, defaultValue, disabled, glass = false, i
         if (!open)
             return;
         const handlePointerDown = (event) => {
-            if (event.target instanceof Node && !rootRef.current?.contains(event.target))
+            if (event.target instanceof Node &&
+                !rootRef.current?.contains(event.target))
                 setOpen(false);
         };
         const handleKeyDown = (event) => {
@@ -265,10 +469,10 @@ export const DatePicker = ({ className, defaultValue, disabled, glass = false, i
         if (value === undefined)
             setInternalValue(nextValue);
         onValueChange?.(nextValue);
-        if (inputRef.current) {
-            inputRef.current.value = nextValue;
-            inputRef.current.dispatchEvent(new Event('input', { bubbles: true }));
-            inputRef.current.dispatchEvent(new Event('change', { bubbles: true }));
+        if (nativeInputRef.current) {
+            nativeInputRef.current.value = nextValue;
+            nativeInputRef.current.dispatchEvent(new Event('input', { bubbles: true }));
+            nativeInputRef.current.dispatchEvent(new Event('change', { bubbles: true }));
         }
         setOpen(false);
         globalThis.setTimeout(() => triggerRef.current?.focus());
@@ -282,7 +486,12 @@ export const DatePicker = ({ className, defaultValue, disabled, glass = false, i
                     triggerRef.current?.setAttribute('aria-invalid', 'true');
                     triggerRef.current?.focus();
                     onInvalid?.(event);
-                }, ref: inputRef, required: required, tabIndex: -1, type: "date", value: selectedValue, ...props }), _jsxs("div", { className: "ui-date-picker__control", "data-ui-date-picker-control": true, children: [_jsxs("button", { "aria-controls": popoverId, "aria-expanded": open, "aria-haspopup": "dialog", "aria-label": accessibleLabel, "aria-required": required ?? undefined, className: "ui-input ui-date-picker ui-date-picker__trigger", "data-ui-date-picker-trigger": true, disabled: disabled, id: triggerId, onClick: () => { setOpen(current => !current); }, onKeyDown: event => {
+                }, ref: node => {
+                    nativeInputRef.current = node;
+                    setRefValue(inputRef, node);
+                }, required: required, tabIndex: -1, type: "date", value: selectedValue, ...props }), _jsxs("div", { className: "ui-date-picker__control", "data-ui-date-picker-control": true, children: [_jsxs("button", { "aria-controls": popoverId, "aria-expanded": open, "aria-haspopup": "dialog", "aria-label": accessibleLabel, "aria-required": required ?? undefined, className: "ui-input ui-date-picker ui-date-picker__trigger", "data-ui-date-picker-trigger": true, disabled: disabled, id: triggerId, onClick: () => {
+                            setOpen(current => !current);
+                        }, onKeyDown: event => {
                             if (event.key !== 'ArrowDown')
                                 return;
                             event.preventDefault();
@@ -301,7 +510,9 @@ const getDateRangeState = (start, end) => {
     return end ? 'complete' : 'selecting-end';
 };
 const syncDateRangePickerElement = (root) => {
-    const inputs = [...root.querySelectorAll('[data-ui-date-picker-native]')];
+    const inputs = [
+        ...root.querySelectorAll('[data-ui-date-picker-native]')
+    ];
     const start = inputs[0];
     const end = inputs.at(-1);
     if (!(start && end) || start === end)
@@ -330,15 +541,41 @@ export const DateRangePicker = ({ className, onInput, onRangeChange, ...props })
             onRangeChange?.(syncDateRangePickerElement(event.currentTarget));
         }, ref: rootRef, ...props }));
 };
-export const Dialog = ({ className, defaultOpen, glass = false, layout = 'centered', onClick, onClose, onOpenChange, open, surface = 'default', ...props }) => {
+export const Dialog = ({ className, defaultOpen, glass = false, layout = 'centered', onClick, onClose, onOpenChange, open, ...props }) => {
     const dialog = useDialog({ defaultOpen, onOpenChange, open });
-    return (_jsx("dialog", { ...dialog.dialogProps, ...props, className: composeClassName('ui-dialog', layout === 'fullscreen' && 'ui-dialog--fullscreen', glassSurfaceClass('ui-dialog', surface, glass), className), "data-layout": layout, "data-surface": resolveSurface(surface, glass), onClick: composeHandlers(onClick, dialog.dialogProps.onClick), onClose: composeHandlers(onClose, dialog.dialogProps.onClose) }));
+    return (_jsx("dialog", { ...dialog.dialogProps, ...props, className: composeClassName('ui-dialog', layout === 'fullscreen' && 'ui-dialog--fullscreen', glassSurfaceClass('ui-dialog', glass), className), "data-layout": layout, "data-surface": resolveSurface(glass), onClick: composeHandlers(onClick, dialog.dialogProps.onClick), onClose: composeHandlers(onClose, dialog.dialogProps.onClose) }));
 };
 export const Direction = ({ className, dir = 'ltr', ...props }) => (_jsx("div", { className: composeClassName('ui-direction', className), dir: dir, ...props }));
-export const Drawer = ({ className, glass = false, surface = 'default', ...props }) => (_jsx("dialog", { className: composeClassName('ui-drawer', glassSurfaceClass('ui-drawer', surface, glass), className), "data-surface": resolveSurface(surface, glass), "data-ui-drawer": true, ...props }));
-export const DropdownMenu = ({ children, className, defaultOpen, glass = false, onOpenChange, open, surface = 'default', ...props }) => {
+export const Container = ({ as = 'div', className, size = 'lg', ...props }) => createElement(as, {
+    className: composeClassName('ui-container', `ui-container--${size}`, className),
+    'data-size': size,
+    'data-ui-container': true,
+    ...props
+});
+export const Grid = ({ as = 'div', className, columns = 'auto', gap = 'md', minItemWidth, style, ...props }) => {
+    const gridStyle = {
+        ...style,
+        '--ui-grid-min': minItemWidth
+    };
+    return createElement(as, {
+        className: composeClassName('ui-grid', `ui-grid--columns-${columns}`, `ui-grid--gap-${gap}`, className),
+        'data-columns': columns,
+        'data-ui-grid': true,
+        style: gridStyle,
+        ...props
+    });
+};
+export const Stack = ({ align = 'stretch', as = 'div', className, direction = 'vertical', gap = 'md', justify = 'start', wrap = false, ...props }) => createElement(as, {
+    className: composeClassName('ui-stack', `ui-stack--${direction}`, `ui-stack--gap-${gap}`, `ui-stack--align-${align}`, `ui-stack--justify-${justify}`, wrap && 'ui-stack--wrap', className),
+    'data-direction': direction,
+    'data-ui-stack': true,
+    ...props
+});
+export const VisuallyHidden = ({ className, focusable = false, ...props }) => (_jsx("span", { className: composeClassName('ui-visually-hidden', focusable && 'ui-visually-hidden--focusable', className), "data-ui-visually-hidden": true, ...props }));
+export const Drawer = ({ className, glass = false, ...props }) => (_jsx("dialog", { className: composeClassName('ui-drawer', glassSurfaceClass('ui-drawer', glass), className), "data-surface": resolveSurface(glass), "data-ui-drawer": true, ...props }));
+export const DropdownMenu = ({ children, className, defaultOpen, glass = false, onOpenChange, open, ...props }) => {
     const menu = useDropdownMenu({ defaultOpen, onOpenChange, open });
-    return (_jsx(DropdownMenuContext.Provider, { value: menu, children: _jsx("menu", { ...menu.rootProps, ...props, className: composeClassName('ui-menu', glassSurfaceClass('ui-menu', surface, glass), className), "data-surface": resolveSurface(surface, glass), "data-ui-dropdown-menu": true, children: children }) }));
+    return (_jsx(DropdownMenuContext.Provider, { value: menu, children: _jsx("menu", { ...menu.rootProps, ...props, className: composeClassName('ui-menu', glassSurfaceClass('ui-menu', glass), className), "data-surface": resolveSurface(glass), "data-ui-dropdown-menu": true, children: children }) }));
 };
 export const DropdownMenuTrigger = ({ onClick, onKeyDown, ...props }) => {
     const menu = requireContext(useContext(DropdownMenuContext), 'DropdownMenuTrigger');
@@ -349,23 +586,93 @@ export const DropdownMenuContent = ({ className, onKeyDown, ...props }) => {
     return (_jsx("div", { ...menu.panelProps, ...props, className: composeClassName('ui-menu__content', className), onKeyDown: composeHandlers(onKeyDown, menu.panelProps.onKeyDown), role: props.role ?? 'menu' }));
 };
 export const Empty = ({ className, glass = false, ...props }) => (_jsx("section", { className: composeClassName('ui-empty', glassClass('ui-empty', glass), className), ...props }));
-export const Field = ({ 'aria-describedby': ariaDescribedby, className, controlId, describedBy, glass = false, ...props }) => {
+export const ErrorSummary = ({ className, errors, heading = 'There is a problem', id = 'ui-error-summary', ...props }) => {
+    const normalizedErrors = normalizeLumenFormErrors(errors);
+    const allErrors = [
+        ...normalizedErrors.form.map(message => ({ message })),
+        ...normalizedErrors.fields
+    ];
+    const headingId = `${id}-heading`;
+    return (_jsxs("section", { "aria-labelledby": headingId, className: composeClassName('ui-error-summary', className), "data-ui-error-summary": true, hidden: allErrors.length === 0, id: id, tabIndex: -1, ...props, children: [_jsx("h2", { id: headingId, children: heading }), _jsx("ul", { children: allErrors.map(error => (_jsx("li", { children: error.controlId ?
+                        (_jsx("a", { href: `#${error.controlId}`, children: error.message })) :
+                        (error.message) }, `${error.name ?? 'form'}:${error.controlId ?? ''}:${error.message}`))) })] }));
+};
+export const Field = ({ 'aria-describedby': ariaDescribedby, className, controlId, describedBy, glass = false, invalid = false, ...props }) => {
     const fieldDescribedBy = [ariaDescribedby, describedBy].filter(Boolean).join(' ') || undefined;
-    return (_jsx("div", { "aria-describedby": ariaDescribedby, className: composeClassName('ui-field', glassClass('ui-field', glass), className), "data-ui-field": true, "data-ui-field-control": controlId, "data-ui-field-describedby": fieldDescribedBy, ...props }));
+    return (_jsx("div", { "aria-describedby": ariaDescribedby, className: composeClassName('ui-field', glassClass('ui-field', glass), className), "data-invalid": invalid ? 'true' : undefined, "data-ui-field": true, "data-ui-field-control": controlId, "data-ui-field-describedby": fieldDescribedBy, ...props }));
 };
-export const HoverCard = ({ className, glass = false, surface = 'default', ...props }) => (_jsx("aside", { className: composeClassName('ui-hover-card', glassSurfaceClass('ui-hover-card', surface, glass), className), "data-surface": resolveSurface(surface, glass), "data-ui-hover-card": true, ...props }));
+export const FieldError = ({ children, className, hidden, message, ...props }) => {
+    const content = message ?? children;
+    return (_jsx("p", { className: composeClassName('ui-field-error', className), "data-ui-field-error": true, hidden: hidden ?? !content, ...props, children: content }));
+};
+export const Form = ({ 'aria-busy': ariaBusy, className, enhance = false, status = 'idle', ...props }) => (_jsx("form", { "aria-busy": ariaBusy ?? (status === 'submitting' ? true : undefined), className: composeClassName('ui-form', className), "data-status": status, "data-ui-form": enhance ? true : undefined, ...props }));
+export const HoverCard = ({ className, glass = false, ...props }) => (_jsx("aside", { className: composeClassName('ui-hover-card', glassSurfaceClass('ui-hover-card', glass), className), "data-surface": resolveSurface(glass), "data-ui-hover-card": true, ...props }));
 export const Icon = ({ 'aria-hidden': ariaHidden, 'aria-label': ariaLabel, children, className, decorative, label, name, role, size = 'default', ...props }) => {
     const icon = name ? getLumenIcon(name) : undefined;
-    const accessibility = getIconAccessibility({ ariaHidden, ariaLabel, decorative, label, role });
+    const accessibility = getIconAccessibility({
+        ariaHidden,
+        ariaLabel,
+        decorative,
+        label,
+        role
+    });
     return (_jsx("span", { "aria-hidden": accessibility.ariaHidden, "aria-label": accessibility.ariaLabel, className: composeClassName('ui-icon', iconSizeClass(size), className), role: accessibility.role, ...props, children: icon ? renderNamedIcon(icon) : children }));
 };
 export const Input = ({ className, ref, type = 'text', visualSize = 'default', ...props }) => (_jsx("input", { className: composeClassName('ui-input', visualSize === 'sm' && 'ui-input--sm', visualSize === 'lg' && 'ui-input--lg', className), ref: ref, type: type, ...props }));
+export const Label = ({ className, ...props }) => (_jsx("label", { className: composeClassName('ui-label', className), ...props }));
+const getPasswordFieldDescribedBy = (ariaDescribedBy, hintId, errorId) => [ariaDescribedBy, hintId, errorId].filter(Boolean).join(' ') || undefined;
+const usePasswordVisibility = (inputRef) => {
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        const form = inputRef.current?.form;
+        if (!form)
+            return;
+        const handleReset = () => {
+            setVisible(false);
+        };
+        const hideAfterSuccess = () => {
+            if (form.dataset.status === 'success')
+                setVisible(false);
+        };
+        form.addEventListener('reset', handleReset);
+        const observer = new MutationObserver(hideAfterSuccess);
+        observer.observe(form, {
+            attributeFilter: ['data-status'],
+            attributes: true
+        });
+        return () => {
+            form.removeEventListener('reset', handleReset);
+            observer.disconnect();
+        };
+    }, [inputRef]);
+    const toggleVisibility = () => {
+        setVisible(current => !current);
+        inputRef.current?.focus({ preventScroll: true });
+    };
+    return { toggleVisibility, visible };
+};
+const PasswordFieldControl = ({ controlId, describedBy, error, forwardedRef, hideLabel, inputProps, inputRef, name, showLabel, toggleVisibility, visible }) => (_jsxs("div", { className: "ui-password-field__control", "data-ui-password-field": true, children: [_jsx(Input, { ...inputProps, "aria-describedby": describedBy, "aria-invalid": error ? true : undefined, id: controlId, name: name, ref: node => {
+                inputRef.current = node;
+                setRefValue(forwardedRef, node);
+            }, type: visible ? 'text' : 'password' }), _jsx(Button, { "aria-controls": controlId, "aria-label": visible ? hideLabel : showLabel, "aria-pressed": visible, "data-ui-password-toggle": true, onClick: toggleVisibility, size: "icon", type: "button", variant: "ghost", children: _jsx("span", { "aria-hidden": "true", children: visible ? 'Hide' : 'Show' }) })] }));
+const PasswordFieldMessages = ({ error, errorId, hint, hintId }) => (_jsxs(_Fragment, { children: [hint && (_jsx("p", { className: "ui-field__hint", "data-ui-field-hint": true, id: hintId, children: hint })), _jsx(FieldError, { id: errorId, message: error })] }));
+export const PasswordField = ({ 'aria-describedby': ariaDescribedby, className, error, hideLabel = 'Hide password', hint, id, label = 'Password', name, ref, showLabel = 'Show password', ...props }) => {
+    const generatedId = useId();
+    const controlId = id ?? `ui-password-${generatedId}`;
+    const hintId = hint ? `${controlId}-hint` : undefined;
+    const errorId = `${controlId}-error`;
+    const describedBy = getPasswordFieldDescribedBy(ariaDescribedby, hintId, error ? errorId : undefined);
+    const inputRef = useRef(null);
+    const { toggleVisibility, visible } = usePasswordVisibility(inputRef);
+    return (_jsxs(Field, { className: composeClassName('ui-password-field', className), controlId: controlId, invalid: Boolean(error), ...(describedBy ? { describedBy } : {}), children: [_jsx(Label, { htmlFor: controlId, children: label }), _jsx(PasswordFieldControl, { controlId: controlId, describedBy: describedBy, error: error, forwardedRef: ref, hideLabel: hideLabel, inputProps: props, inputRef: inputRef, name: name, showLabel: showLabel, toggleVisibility: toggleVisibility, visible: visible }), _jsx(PasswordFieldMessages, { error: error, errorId: errorId, hint: hint, hintId: hintId })] }));
+};
 export const InputGroup = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-input-group', className), ...props }));
-export const InputOTP = ({ 'aria-invalid': ariaInvalid, className, defaultValue, disabled = false, inputClassName, inputMode = 'numeric', length = 6, maxLength = length, pattern = '[0-9]*', value, ...props }) => {
+export const InputOTP = ({ 'aria-invalid': ariaInvalid, className, defaultValue, disabled = false, inputClassName, inputMode = 'numeric', length = 6, maxLength = length, pattern = '[0-9]*', ref, value, ...props }) => {
     const otp = useInputOTP({
         defaultValue: toInputValue(defaultValue),
         disabled,
         inputMode,
+        inputRef: ref,
         invalid: ariaInvalid === true || ariaInvalid === 'true',
         length,
         pattern,
@@ -381,17 +688,22 @@ export const InputOTP = ({ 'aria-invalid': ariaInvalid, className, defaultValue,
                     pattern
                 }) }), _jsx("div", { ...otp.segmentsProps, children: otp.segmentIndexes.map(index => (_jsx("button", { ...otp.getSegmentProps(index), type: "button", children: _jsx("span", { "data-ui-input-otp-char": true, children: otp.getSegmentChar(index) }) }, index))) })] }));
 };
-export const NumberField = ({ className, type = 'number', ...props }) => (_jsx("input", { className: composeClassName('ui-input ui-number-field', className), type: type, ...props }));
-export const Item = ({ className, glass = false, ...props }) => (_jsx("div", { className: composeClassName('ui-item', glassClass('ui-item', glass), className), ...props }));
+export const NumberField = ({ className, ref, type = 'number', ...props }) => (_jsx("input", { className: composeClassName('ui-input ui-number-field', className), ref: ref, type: type, ...props }));
+export const Item = ({ as = 'div', className, glass = false, ...props }) => createElement(as, {
+    className: composeClassName('ui-item', glassClass('ui-item', glass), className),
+    'data-slot': 'item',
+    ...props
+});
 export const Kbd = ({ className, ...props }) => (_jsx("kbd", { className: composeClassName('ui-kbd', className), ...props }));
-export const Label = ({ className, ...props }) => (_jsx("label", { className: composeClassName('ui-label', className), ...props }));
 export const Marker = ({ className, variant = 'default', ...props }) => (_jsx("span", { className: composeClassName('ui-marker', variantClass('ui-marker', variant), className), "data-variant": variant, ...props }));
-export const Menubar = ({ className, glass = false, surface = 'default', ...props }) => (_jsx("nav", { className: composeClassName('ui-menubar', glassSurfaceClass('ui-menubar', surface, glass), className), "data-surface": resolveSurface(surface, glass), "data-ui-menubar": true, ...props }));
+export const Menubar = ({ className, glass = false, ...props }) => (_jsx("nav", { className: composeClassName('ui-menubar', glassSurfaceClass('ui-menubar', glass), className), "data-surface": resolveSurface(glass), "data-ui-menubar": true, ...props }));
 export const Message = ({ className, from = 'assistant', ...props }) => (_jsx("article", { className: composeClassName('ui-message', `ui-message--${from}`, className), "data-from": from, ...props }));
 export const MessageScroller = ({ className, glass = false, ...props }) => (_jsx("div", { className: composeClassName('ui-message-scroller', glassClass('ui-message-scroller', glass), className), ...props }));
-export const NativeSelect = ({ children, className, defaultValue, options = emptyOptions, placeholder, value, ...props }) => {
-    const placeholderDefaultValue = placeholder && value === undefined && defaultValue === undefined ? '' : undefined;
-    return (_jsxs("select", { className: composeClassName('ui-select', className), defaultValue: defaultValue ?? placeholderDefaultValue, value: value, ...props, children: [placeholder && _jsx("option", { disabled: true, value: "", children: placeholder }), children, options.map(normalizeOption).map(option => (_jsx("option", { disabled: option.disabled, value: option.value, children: option.label }, option.value)))] }));
+export const NativeSelect = ({ children, className, defaultValue, options = emptyOptions, placeholder, ref, value, visualSize = 'default', ...props }) => {
+    const placeholderDefaultValue = placeholder && value === undefined && defaultValue === undefined ?
+        '' :
+        undefined;
+    return (_jsxs("select", { className: composeClassName('ui-select', visualSize === 'sm' && 'ui-select--sm', visualSize === 'lg' && 'ui-select--lg', className), defaultValue: defaultValue ?? placeholderDefaultValue, ref: ref, value: value, ...props, children: [placeholder && (_jsx("option", { disabled: true, value: "", children: placeholder })), children, options.map(normalizeOption).map(option => (_jsx("option", { disabled: option.disabled, value: option.value, children: option.label }, option.value)))] }));
 };
 const phoneInputSizeModifiers = (size) => {
     if (size === 'sm') {
@@ -406,11 +718,11 @@ export const PhoneInput = ({ className, countries = emptyOptions, countryLabel =
     const { selectClass, inputClass } = phoneInputSizeModifiers(size);
     return (_jsxs("div", { className: composeClassName('ui-phone-input ui-input-group', className), ...props, children: [_jsx("select", { "aria-label": countryLabel, className: composeClassName('ui-select ui-phone-input__country', selectClass), defaultValue: defaultCountryValue, name: countryName, children: countries.map(normalizeOption).map(option => (_jsx("option", { disabled: option.disabled, value: option.value, children: option.label }, option.value))) }), _jsx("input", { autoComplete: "tel", className: composeClassName('ui-input ui-phone-input__number', inputClass), defaultValue: defaultValue, inputMode: "tel", name: name, placeholder: placeholder, type: "tel" })] }));
 };
-export const NavigationMenu = ({ className, glass = false, surface = 'default', variant = 'default', ...props }) => (_jsx("nav", { className: composeClassName('ui-navigation-menu', variant === 'unstyled' && 'ui-navigation-menu--unstyled', glassSurfaceClass('ui-navigation-menu', surface, glass), className), "data-surface": resolveSurface(surface, glass), "data-ui-navigation-menu": true, "data-variant": variant, ...props }));
+export const NavigationMenu = ({ className, glass = false, variant = 'default', ...props }) => (_jsx("nav", { className: composeClassName('ui-navigation-menu', variant === 'unstyled' && 'ui-navigation-menu--unstyled', glassSurfaceClass('ui-navigation-menu', glass), className), "data-slot": "navigation-menu", "data-surface": resolveSurface(glass), "data-ui-navigation-menu": true, "data-variant": variant, ...props }));
 export const Pagination = ({ 'aria-label': ariaLabel = 'Pagination', className, ...props }) => (_jsx("nav", { "aria-label": ariaLabel, className: composeClassName('ui-pagination', className), ...props }));
-export const Popover = ({ children, className, defaultOpen, glass = false, onOpenChange, open, surface = 'default', ...props }) => {
+export const Popover = ({ children, className, defaultOpen, glass = false, onOpenChange, open, ...props }) => {
     const popover = usePopover({ defaultOpen, onOpenChange, open });
-    return (_jsx(PopoverContext.Provider, { value: popover, children: _jsx("div", { ...popover.rootProps, ...props, className: composeClassName('ui-popover', glassSurfaceClass('ui-popover', surface, glass), className), "data-surface": resolveSurface(surface, glass), "data-ui-popover": true, children: children }) }));
+    return (_jsx(PopoverContext.Provider, { value: popover, children: _jsx("div", { ...popover.rootProps, ...props, className: composeClassName('ui-popover', glassSurfaceClass('ui-popover', glass), className), "data-surface": resolveSurface(glass), "data-ui-popover": true, children: children }) }));
 };
 export const PopoverTrigger = ({ onClick, onKeyDown, ...props }) => {
     const popover = requireContext(useContext(PopoverContext), 'PopoverTrigger');
@@ -424,7 +736,7 @@ export const Progress = ({ className, max = 100, value = 0, ...props }) => {
     const safeMax = max > 0 ? max : 100;
     const safeValue = Math.min(safeMax, Math.max(0, value));
     const percentage = (safeValue / safeMax) * 100;
-    return (_jsx("div", { "aria-valuemax": safeMax, "aria-valuemin": 0, "aria-valuenow": safeValue, className: composeClassName('ui-progress', className), role: "progressbar", ...props, children: _jsx("span", { className: "ui-progress__bar", style: { width: `${percentage}%` } }) }));
+    return (_jsx("div", { "aria-valuemax": safeMax, "aria-valuemin": 0, "aria-valuenow": safeValue, className: composeClassName('ui-progress', className), role: "progressbar", ...props, children: _jsx("span", { className: "ui-progress__bar", "data-slot": "progress-indicator", style: { width: `${percentage}%` } }) }));
 };
 export const RadioGroup = ({ className, ...props }) => (_jsx("fieldset", { className: composeClassName('ui-radio-group', className), "data-ui-radio-group": true, ...props }));
 const renderResizablePane = (child, index, panelProps) => {
@@ -455,8 +767,44 @@ export const Resizable = ({ children, className, defaultSizes, direction = 'hori
 };
 export const RichTextEditor = ({ className, glass = false, ...props }) => (_jsx("section", { className: composeClassName('ui-rich-text-editor', glassClass('ui-rich-text-editor', glass), className), "data-ui-rich-text-editor": true, ...props }));
 export const ScrollArea = ({ className, glass = false, ...props }) => (_jsx("div", { className: composeClassName('ui-scroll-area', glassClass('ui-scroll-area', glass), className), ...props }));
+export const ScrollProgress = ({ 'aria-label': ariaLabel = 'Reading progress', className, position = 'top', ...props }) => {
+    const rootRef = useRef(null);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        let frame = 0;
+        const update = () => {
+            frame = 0;
+            const scrollingElement = document.scrollingElement ?? document.documentElement;
+            const maximum = scrollingElement.scrollHeight - scrollingElement.clientHeight;
+            const percentage = maximum > 0 ?
+                Math.min(100, Math.max(0, (scrollingElement.scrollTop / maximum) * 100)) :
+                0;
+            const bar = root.querySelector('.ui-scroll-progress__bar');
+            root.setAttribute('aria-valuenow', `${Math.round(percentage)}`);
+            if (bar)
+                bar.style.transform = `scaleX(${percentage / 100})`;
+        };
+        const scheduleUpdate = () => {
+            if (frame)
+                return;
+            frame = window.requestAnimationFrame(update);
+        };
+        scheduleUpdate();
+        window.addEventListener('resize', scheduleUpdate, { passive: true });
+        window.addEventListener('scroll', scheduleUpdate, { passive: true });
+        return () => {
+            if (frame)
+                window.cancelAnimationFrame(frame);
+            window.removeEventListener('resize', scheduleUpdate);
+            window.removeEventListener('scroll', scheduleUpdate);
+        };
+    }, []);
+    return (_jsx("div", { "aria-label": ariaLabel, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": 0, className: composeClassName('ui-scroll-progress', position === 'bottom' && 'ui-scroll-progress--bottom', className), "data-position": position, "data-ui-scroll-progress": true, ref: rootRef, role: "progressbar", ...props, children: _jsx("span", { className: "ui-scroll-progress__bar" }) }));
+};
 export const Schedule = ({ className, glass = false, ...props }) => (_jsx("section", { className: composeClassName('ui-schedule', glassClass('ui-schedule', glass), className), "data-ui-schedule": true, ...props }));
-export const SearchField = ({ className, type = 'search', ...props }) => (_jsx("input", { className: composeClassName('ui-input ui-search-field', className), type: type, ...props }));
+export const SearchField = ({ className, ref, type = 'search', ...props }) => (_jsx("input", { className: composeClassName('ui-input ui-search-field', className), ref: ref, type: type, ...props }));
 const getSelectSizeClass = (size) => {
     if (size === 'sm')
         return 'ui-select--sm';
@@ -464,7 +812,7 @@ const getSelectSizeClass = (size) => {
         return 'ui-select--lg';
     return false;
 };
-export const Select = ({ children, className, defaultValue, disabled = false, glass = false, id, name, onChange, onValueChange, options = emptyOptions, placeholder, required = false, size = 'default', value, ...props }) => {
+export const Select = ({ children, className, defaultValue, disabled = false, glass = false, id, inputRef, name, onChange, onValueChange, options = emptyOptions, placeholder, required = false, size = 'default', value, ...props }) => {
     const select = useSelect({
         defaultValue,
         disabled,
@@ -477,23 +825,236 @@ export const Select = ({ children, className, defaultValue, disabled = false, gl
         value
     });
     const sizeClass = getSelectSizeClass(size);
-    return (_jsxs("div", { ...select.rootProps, className: composeClassName('ui-select-field', glassClass('ui-select-field', glass), className), "data-ui-glass-track": glass ? true : undefined, children: [_jsxs("select", { ...select.nativeSelectProps, ...props, className: composeClassName('ui-select ui-select__native', sizeClass), onChange: composeHandlers(onChange, select.nativeSelectProps.onChange), children: [placeholder && _jsx("option", { "data-ui-select-placeholder": true, disabled: true, value: "", children: placeholder }), children, select.options.map(option => (_jsx("option", { disabled: option.disabled, value: option.value, children: option.label }, option.value)))] }), _jsxs("div", { ...select.controlProps, className: "ui-select__control", children: [_jsx("button", { ...select.triggerProps, className: composeClassName('ui-select ui-select__trigger', sizeClass), type: select.triggerProps.type ?? 'button', children: _jsx("span", { "data-ui-select-value": true, children: select.triggerText }) }), _jsx("div", { ...select.listProps, className: "ui-select__list", children: select.options.map(option => {
+    return (_jsxs("div", { ...select.rootProps, className: composeClassName('ui-select-field', glassClass('ui-select-field', glass), className), "data-ui-glass-track": glass ? true : undefined, children: [_jsxs("select", { ...select.nativeSelectProps, ...props, className: composeClassName('ui-select ui-select__native', sizeClass), onChange: composeHandlers(onChange, select.nativeSelectProps.onChange), ref: inputRef, children: [placeholder && (_jsx("option", { "data-ui-select-placeholder": true, disabled: true, value: "", children: placeholder })), children, select.options.map(option => (_jsx("option", { disabled: option.disabled, value: option.value, children: option.label }, option.value)))] }), _jsxs("div", { ...select.controlProps, className: "ui-select__control", children: [_jsx("button", { ...select.triggerProps, className: composeClassName('ui-select ui-select__trigger', sizeClass), type: select.triggerProps.type ?? 'button', children: _jsx("span", { "data-ui-select-value": true, children: select.triggerText }) }), _jsx("div", { ...select.listProps, className: "ui-select__list", children: select.options.map(option => {
                             const optionProps = select.getOptionProps(option);
                             return (_jsx("button", { ...optionProps, type: optionProps.type ?? 'button', children: option.label }, option.value));
                         }) })] })] }));
 };
+const groupListBoxOptions = (options) => {
+    const groups = [];
+    options.forEach((option, index) => {
+        const currentGroup = groups.at(-1);
+        if (!currentGroup || currentGroup.label !== option.section) {
+            groups.push({
+                ...(option.section ? { label: option.section } : {}),
+                options: [{ ...option, index }]
+            });
+            return;
+        }
+        currentGroup.options.push({ ...option, index });
+    });
+    return groups;
+};
+const getListBoxGroupKey = (group) => {
+    const values = group.options.map(option => option.value).join('|');
+    return group.label ? `${group.label}:${values}` : values;
+};
+const optionalTrue = (value) => value ? true : undefined;
+const ListBoxNativeOptions = ({ groups }) => groups.map(group => {
+    const options = group.options.map(option => (_jsx("option", { disabled: option.disabled, value: option.value, children: option.label }, option.value)));
+    return group.label ?
+        (_jsx("optgroup", { label: group.label, children: options }, getListBoxGroupKey(group))) :
+        (_jsx(Fragment, { children: options }, getListBoxGroupKey(group)));
+});
+const ListBoxVisibleOptions = ({ activeIndex, controlId, emptyMessage, groups, loading, onSelect, selectedValues }) => {
+    if (loading)
+        return null;
+    if (!groups.length) {
+        return (_jsx("div", { "aria-disabled": "true", className: "ui-list-box__empty", role: "option", children: emptyMessage }));
+    }
+    return groups.map(group => {
+        const groupKey = getListBoxGroupKey(group);
+        const safeGroupKey = groupKey.replaceAll(/[^a-zA-Z0-9_-]/g, '-');
+        const groupLabelId = group.label ? `${controlId}-group-${safeGroupKey}` : undefined;
+        const options = group.options.map(option => (_jsx("div", { "aria-disabled": option.disabled ? true : undefined, "aria-selected": selectedValues.has(option.value), className: composeClassName('ui-list-box__option', option.index === activeIndex && 'ui-list-box__option--active'), "data-active": option.index === activeIndex ? 'true' : undefined, "data-ui-list-box-option": true, "data-value": option.value, onClick: () => {
+                onSelect(option.index);
+            }, role: "option", children: option.label }, option.value)));
+        if (!group.label)
+            return _jsx(Fragment, { children: options }, groupKey);
+        return (_jsxs("div", { "aria-labelledby": groupLabelId, role: "group", children: [_jsx("div", { className: "ui-list-box__section", id: groupLabelId, children: group.label }), options] }, groupKey));
+    });
+};
+const normalizeListBoxValues = (value) => {
+    if (value === undefined)
+        return [];
+    return Array.isArray(value) ? value : [value];
+};
+const findLastEnabledOptionIndex = (options) => {
+    let lastEnabledIndex = -1;
+    for (const [index, option] of options.entries()) {
+        if (!option.disabled)
+            lastEnabledIndex = index;
+    }
+    return lastEnabledIndex;
+};
+const getListBoxSelectedValues = (controlledValue, internalValues) => controlledValue === undefined ?
+    internalValues :
+    normalizeListBoxValues(controlledValue);
+const getListBoxSelectValue = (multiple, selectedValues) => (multiple ? selectedValues : (selectedValues[0] ?? ''));
+const ListBoxLabel = ({ controlId, label }) => label ?
+    (_jsx("label", { className: "ui-label", htmlFor: controlId, children: label })) :
+    null;
+const normalizeListBoxProps = ({ disabled = false, emptyMessage = 'No options available', loading = false, loadingMessage = 'Loading options', multiple = false, options = emptyOptions, required = false, selectionFollowsFocus = false, ...props }) => ({
+    disabled,
+    emptyMessage,
+    loading,
+    loadingMessage,
+    multiple,
+    options,
+    required,
+    selectionFollowsFocus,
+    ...props
+});
+export const ListBox = (inputProps) => {
+    const { className, defaultValue, disabled, emptyMessage, id, label, loading, loadingMessage, multiple, name, onValueChange, options, ref, required, selectionFollowsFocus, value, ...props } = normalizeListBoxProps(inputProps);
+    const generatedId = useId();
+    const controlId = id ?? `ui-list-box-${generatedId}`;
+    const normalizedOptions = options.map(option => typeof option === 'string' ? { label: option, value: option } : option);
+    const optionGroups = groupListBoxOptions(normalizedOptions);
+    const [internalValues, setInternalValues] = useState(() => normalizeListBoxValues(defaultValue));
+    const selectedValues = getListBoxSelectedValues(value, internalValues);
+    const selectedSet = new Set(selectedValues);
+    const firstEnabledIndex = Math.max(0, normalizedOptions.findIndex(option => !option.disabled));
+    const [activeIndex, setActiveIndex] = useState(firstEnabledIndex);
+    const selectRef = useRef(null);
+    const typeaheadRef = useRef('');
+    const typeaheadTimerRef = useRef(undefined);
+    const commitValues = (nextValues) => {
+        if (value === undefined) {
+            setInternalValues(nextValues);
+        }
+        onValueChange?.(nextValues);
+        const select = selectRef.current;
+        if (!select)
+            return;
+        for (const option of select.options) {
+            option.selected = nextValues.includes(option.value);
+        }
+        select.dispatchEvent(new Event('input', { bubbles: true }));
+        select.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+    const selectOption = (index) => {
+        const option = normalizedOptions[index];
+        if (!option || option.disabled || disabled || loading)
+            return;
+        const optionValue = option.value;
+        let nextValues;
+        if (!multiple) {
+            nextValues = [optionValue];
+        }
+        else if (selectedSet.has(optionValue)) {
+            nextValues = selectedValues.filter(selectedValue => selectedValue !== optionValue);
+        }
+        else {
+            nextValues = [...selectedValues, optionValue];
+        }
+        commitValues(nextValues);
+    };
+    const moveActive = (direction) => {
+        if (!normalizedOptions.length || loading)
+            return;
+        let nextIndex = activeIndex;
+        for (const _option of normalizedOptions) {
+            nextIndex =
+                (nextIndex + direction + normalizedOptions.length) %
+                    normalizedOptions.length;
+            if (!normalizedOptions[nextIndex]?.disabled) {
+                setActiveIndex(nextIndex);
+                if (selectionFollowsFocus)
+                    selectOption(nextIndex);
+                return;
+            }
+        }
+    };
+    useEffect(() => () => {
+        if (typeaheadTimerRef.current)
+            clearTimeout(typeaheadTimerRef.current);
+    }, []);
+    useEffect(() => {
+        const select = selectRef.current;
+        const form = select?.form;
+        if (!form || value !== undefined)
+            return;
+        const handleReset = () => {
+            setInternalValues(normalizeListBoxValues(defaultValue));
+            setActiveIndex(firstEnabledIndex);
+        };
+        form.addEventListener('reset', handleReset);
+        return () => {
+            form.removeEventListener('reset', handleReset);
+        };
+    }, [defaultValue, firstEnabledIndex, value]);
+    const handleNavigationKey = (key) => {
+        if (key === 'ArrowDown')
+            moveActive(1);
+        else if (key === 'ArrowUp')
+            moveActive(-1);
+        else if (key === 'Home') {
+            setActiveIndex(firstEnabledIndex);
+            if (selectionFollowsFocus)
+                selectOption(firstEnabledIndex);
+        }
+        else if (key === 'End') {
+            const lastEnabledIndex = findLastEnabledOptionIndex(normalizedOptions);
+            if (lastEnabledIndex >= 0) {
+                setActiveIndex(lastEnabledIndex);
+                if (selectionFollowsFocus)
+                    selectOption(lastEnabledIndex);
+            }
+        }
+        else if (key === 'Enter' || key === ' ')
+            selectOption(activeIndex);
+        else
+            return false;
+        return true;
+    };
+    const handleTypeaheadKey = (event) => {
+        if (event.key.length !== 1 ||
+            event.ctrlKey ||
+            event.metaKey ||
+            event.altKey)
+            return false;
+        typeaheadRef.current += event.key.toLowerCase();
+        if (typeaheadTimerRef.current)
+            clearTimeout(typeaheadTimerRef.current);
+        typeaheadTimerRef.current = setTimeout(() => {
+            typeaheadRef.current = '';
+        }, 700);
+        const nextIndex = normalizedOptions.findIndex(option => !option.disabled &&
+            option.label.toLowerCase().startsWith(typeaheadRef.current));
+        if (nextIndex >= 0) {
+            setActiveIndex(nextIndex);
+            if (selectionFollowsFocus)
+                selectOption(nextIndex);
+        }
+        return true;
+    };
+    const handleListKeyDown = (event) => {
+        if (handleNavigationKey(event.key) || handleTypeaheadKey(event))
+            event.preventDefault();
+    };
+    return (_jsxs("div", { className: composeClassName('ui-list-box', className), "data-multiple": multiple ? 'true' : undefined, "data-ui-list-box": true, children: [_jsx(ListBoxLabel, { controlId: controlId, label: label }), _jsx("select", { ...props, className: "ui-list-box__native", "data-ui-enhanced": true, "data-ui-list-box-native": true, disabled: disabled || loading, id: controlId, multiple: multiple, name: name, ref: node => {
+                    selectRef.current = node;
+                    setRefValue(ref, node);
+                }, required: required, value: getListBoxSelectValue(multiple, selectedValues), children: _jsx(ListBoxNativeOptions, { groups: optionGroups }) }), _jsx("div", { "aria-busy": optionalTrue(loading), "aria-disabled": optionalTrue(disabled || loading), "aria-multiselectable": optionalTrue(multiple), className: "ui-list-box__list", "data-ui-list-box-list": true, onKeyDown: handleListKeyDown, role: "listbox", tabIndex: disabled || loading ? undefined : 0, children: _jsx(ListBoxVisibleOptions, { activeIndex: activeIndex, controlId: controlId, emptyMessage: emptyMessage, groups: optionGroups, loading: loading, onSelect: index => {
+                        setActiveIndex(index);
+                        selectOption(index);
+                    }, selectedValues: selectedSet }) }), loading ?
+                (_jsx("p", { className: "ui-list-box__status", role: "status", children: loadingMessage })) :
+                null] }));
+};
 export const Separator = ({ className, orientation = 'horizontal', ...props }) => (_jsx("hr", { "aria-orientation": orientation, className: composeClassName('ui-separator', `ui-separator--${orientation}`, className), "data-orientation": orientation, ...props }));
-export const Sheet = ({ className, glass = false, surface = 'default', ...props }) => (_jsx("dialog", { className: composeClassName('ui-sheet', glassSurfaceClass('ui-sheet', surface, glass), className), "data-surface": resolveSurface(surface, glass), "data-ui-sheet": true, ...props }));
-export const Sidebar = ({ className, glass = false, surface = 'default', variant = 'default', ...props }) => (_jsx("aside", { className: composeClassName('ui-sidebar', variant === 'unstyled' && 'ui-sidebar--unstyled', glassSurfaceClass('ui-sidebar', surface, glass), className), "data-surface": resolveSurface(surface, glass), "data-variant": variant, ...props }));
+export const Sheet = ({ className, glass = false, ...props }) => (_jsx("dialog", { className: composeClassName('ui-sheet', glassSurfaceClass('ui-sheet', glass), className), "data-surface": resolveSurface(glass), "data-ui-sheet": true, ...props }));
+export const Sidebar = ({ className, glass = false, variant = 'default', ...props }) => (_jsx("aside", { className: composeClassName('ui-sidebar', variant === 'unstyled' && 'ui-sidebar--unstyled', glassSurfaceClass('ui-sidebar', glass), className), "data-slot": "sidebar", "data-surface": resolveSurface(glass), "data-variant": variant, ...props }));
 export const Skeleton = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-skeleton', className), ...props }));
-export const Slider = ({ className, type = 'range', ...props }) => (_jsx("input", { className: composeClassName('ui-slider', className), type: type, ...props }));
+export const Slider = ({ className, ref, type = 'range', ...props }) => (_jsx("input", { className: composeClassName('ui-slider', className), ref: ref, type: type, ...props }));
 export const Sonner = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-sonner', className), "data-ui-sonner": true, ...props }));
 export const Spinner = ({ 'aria-hidden': ariaHidden, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, className, role, ...props }) => {
     const isAccessible = Boolean(ariaLabel || ariaLabelledby);
     return (_jsx("span", { "aria-hidden": ariaHidden ?? (isAccessible ? undefined : true), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className: composeClassName('ui-spinner', className), role: role ?? (isAccessible ? 'status' : undefined), ...props }));
 };
-export const Switch = ({ className, role = 'switch', ...props }) => (_jsx("input", { className: composeClassName('ui-switch', className), role: role, type: "checkbox", ...props }));
-export const Table = ({ className, glass = false, ...props }) => (_jsx("div", { className: composeClassName('ui-table-wrap', glassClass('ui-table-wrap', glass), className), ...props }));
+export const Switch = ({ className, ref, role = 'switch', ...props }) => (_jsx("input", { className: composeClassName('ui-switch', className), ref: ref, role: role, type: "checkbox", ...props }));
+export const Table = ({ className, glass = false, ...props }) => (_jsx("div", { className: composeClassName('ui-table-wrap', glassClass('ui-table-wrap', glass), className), "data-slot": "table", ...props }));
 export const Tabs = ({ children, className, defaultValue, glass = false, onValueChange, orientation, value, ...props }) => {
     const tabs = useTabs({ defaultValue, onValueChange, orientation, value });
     return (_jsx(TabsContext.Provider, { value: tabs, children: _jsx("div", { ...tabs.rootProps, ...props, className: composeClassName('ui-tabs', glassClass('ui-tabs', glass), className), children: children }) }));
@@ -523,9 +1084,9 @@ export const CodeTabs = ({ ariaLabel = 'Code examples', className, copy = true,
                 // Storage can be unavailable in privacy modes; tab selection should still work.
             }
         }
-        return storedValue && items.some(item => item.value === storedValue)
-            ? storedValue
-            : (selectedValue ?? '');
+        return storedValue && items.some(item => item.value === storedValue) ?
+            storedValue :
+            (selectedValue ?? '');
     });
     useEffect(() => {
         const synchronize = (event) => {
@@ -556,13 +1117,15 @@ export const CodeTabs = ({ ariaLabel = 'Code examples', className, copy = true,
             detail: { storageKey, value: nextValue }
         }));
     };
-    return (_jsxs(Tabs, { className: composeClassName('ui-code-tabs', className), "data-storage-key": storageKey, onValueChange: selectValue, value: value, ...props, children: [_jsx(TabsList, { "aria-label": ariaLabel, className: "ui-code-tabs__list", children: items.map(item => (_jsx(TabsTrigger, { className: "ui-code-tabs__tab", value: item.value, children: item.label }, item.value))) }), items.map(item => (_jsx(TabsPanel, { className: "ui-code-tabs__panel", value: item.value, children: _jsx(Code, { code: item.code, copy: copy, ...(item.language === undefined ? {} : { language: item.language }), theme: theme, variant: "block", wrap: wrap }) }, item.value)))] }));
+    return (_jsxs(Tabs, { className: composeClassName('ui-code-tabs', className), "data-slot": "code-tabs", "data-storage-key": storageKey, onValueChange: selectValue, value: value, ...props, children: [_jsx(TabsList, { "aria-label": ariaLabel, className: "ui-code-tabs__list", children: items.map(item => (_jsx(TabsTrigger, { className: "ui-code-tabs__tab", value: item.value, children: item.label }, item.value))) }), items.map(item => (_jsx(TabsPanel, { className: "ui-code-tabs__panel", value: item.value, children: _jsx(Code, { code: item.code, copy: copy, ...(item.language === undefined ?
+                        {} :
+                        { language: item.language }), theme: theme, variant: "block", wrap: wrap }) }, item.value)))] }));
 };
 export const TagGroup = ({ className, role = 'list', ...props }) => (_jsx("div", { className: composeClassName('ui-tag-group', className), role: role, ...props }));
-export const Textarea = ({ className, rows = 4, ...props }) => (_jsx("textarea", { className: composeClassName('ui-textarea', className), rows: rows, ...props }));
+export const Textarea = ({ className, ref, rows = 4, ...props }) => (_jsx("textarea", { className: composeClassName('ui-textarea', className), ref: ref, rows: rows, ...props }));
 export const ThemeBuilder = ({ className, glass = false, ...props }) => (_jsx("section", { className: composeClassName('ui-theme-builder', glassClass('ui-theme-builder', glass), className), "data-ui-theme-builder": true, ...props }));
-export const TimeField = ({ className, type = 'time', ...props }) => (_jsx("input", { className: composeClassName('ui-input ui-time-field', className), type: type, ...props }));
-export const Toast = ({ 'aria-live': ariaLive, className, glass = false, role, surface = 'default', variant = 'default', ...props }) => (_jsx("aside", { "aria-live": ariaLive ?? (variant === 'destructive' ? 'assertive' : 'polite'), className: composeClassName('ui-toast', variantClass('ui-toast', variant), glassSurfaceClass('ui-toast', surface, glass), className), "data-surface": resolveSurface(surface, glass), "data-ui-toast": true, "data-variant": variant, role: role ?? (variant === 'destructive' ? 'alert' : 'status'), ...props }));
+export const TimeField = ({ className, ref, type = 'time', ...props }) => (_jsx("input", { className: composeClassName('ui-input ui-time-field', className), ref: ref, type: type, ...props }));
+export const Toast = ({ 'aria-live': ariaLive, className, glass = false, role, variant = 'default', ...props }) => (_jsx("aside", { "aria-live": ariaLive ?? (variant === 'destructive' ? 'assertive' : 'polite'), className: composeClassName('ui-toast', variantClass('ui-toast', variant), glassSurfaceClass('ui-toast', glass), className), "data-surface": resolveSurface(glass), "data-ui-toast": true, "data-variant": variant, role: role ?? (variant === 'destructive' ? 'alert' : 'status'), ...props }));
 export const Toggle = ({ className, controlled = false, pressed = false, type = 'button', ...props }) => (_jsx("button", { "aria-pressed": pressed, className: composeClassName('ui-toggle', className), "data-ui-controlled": controlled || undefined, "data-ui-toggle": true, type: type, ...props }));
 export const ToggleGroup = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-toggle-group', className), "data-ui-toggle-group": true, ...props }));
 export const Tooltip = ({ children, className, defaultOpen, delay, onKeyDown, onMouseEnter, onMouseLeave, onOpenChange, open, ...props }) => {
@@ -591,18 +1154,54 @@ export const Image = ({ as, className, invertOnDark = false, loading, ...props }
         ...(resolvedLoading ? { loading: resolvedLoading } : {})
     });
 };
-export const Link = ({ className, newTab = false, ref, rel, target, variant = 'default', ...props }) => (_jsx("a", { className: composeClassName('ui-link', variant === 'inherit' && 'ui-link--inherit', className), "data-variant": variant, ref: ref, rel: newTab ? [...new Set(`${rel ?? ''} noopener noreferrer`.trim().split(/\s+/))].join(' ') : rel, target: newTab ? '_blank' : target, ...props }));
-export const Pill = ({ className, count, children, href, ...props }) => {
+export const Link = ({ className, newTab = false, ref, rel, target, variant = 'default', ...props }) => (_jsx("a", { className: composeClassName('ui-link', variant === 'inherit' && 'ui-link--inherit', className), "data-slot": "link", "data-variant": variant, ref: ref, rel: newTab ?
+        [
+            ...new Set(`${rel ?? ''} noopener noreferrer`.trim().split(/\s+/))
+        ].join(' ') :
+        rel, target: newTab ? '_blank' : target, ...props }));
+export const Pill = ({ className, count, children, href, variant = 'neutral', ...props }) => {
     const content = (_jsxs(_Fragment, { children: [children, count !== undefined && _jsx("span", { className: "ui-pill__count", children: count })] }));
-    return href
-        ? _jsx("a", { className: composeClassName('ui-pill', className), href: href, ...props, children: content })
-        : _jsx("span", { className: composeClassName('ui-pill', className), ...props, children: content });
+    return href ?
+        (_jsx("a", { className: composeClassName('ui-pill', variantClass('ui-pill', variant, 'neutral'), className), "data-variant": variant, href: href, ...props, children: content })) :
+        (_jsx("span", { className: composeClassName('ui-pill', variantClass('ui-pill', variant, 'neutral'), className), "data-variant": variant, ...props, children: content }));
 };
 export const Prose = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-prose', className), ...props }));
 export const SkipLink = ({ className, ...props }) => (_jsx("a", { className: composeClassName('ui-skip-link', className), ...props }));
-export const ThemeToggle = ({ className, type = 'button', ...props }) => (_jsxs("button", { className: composeClassName('ui-theme-toggle', className), type: type, ...props, children: [_jsx("span", { className: "ui-sr-only", children: "Toggle color theme" }), _jsx(Icon, { className: "ui-theme-toggle__sun", name: "sun" }), _jsx(Icon, { className: "ui-theme-toggle__moon", name: "moon" })] }));
+export const ThemeToggle = ({ className, type = 'button', ...props }) => (_jsxs("button", { className: composeClassName('ui-theme-toggle', className), "data-slot": "theme-toggle", type: type, ...props, children: [_jsx("span", { className: "ui-sr-only", children: "Toggle color theme" }), _jsx(Icon, { className: "ui-theme-toggle__sun", name: "sun" }), _jsx(Icon, { className: "ui-theme-toggle__moon", name: "moon" })] }));
 export const LanguageToggle = ({ className, type = 'button', ...props }) => (_jsx("button", { className: composeClassName('ui-language-toggle', className), type: type, ...props }));
-export const Particles = ({ className, density = 'medium', ...props }) => (_jsx("div", { "aria-hidden": "true", className: composeClassName('ui-particles', className), "data-ui-particles": density, ...props }));
+const particleDensityConfig = { high: 40, low: 15, medium: 25 };
+const particleTones = [
+    'var(--brand)',
+    'var(--accent)',
+    'var(--glow, var(--brand))'
+];
+const createParticles = (density) => Array.from({ length: particleDensityConfig[density] }, (_, index) => {
+    const size = Math.random() * 12 + 8;
+    const left = Math.random() * 100;
+    const top = Math.random() * 100;
+    return {
+        id: `${index}-${left}-${top}`,
+        style: {
+            '--ui-particle-delay': `${Math.random() * 8}s`,
+            '--ui-particle-duration': `${20 + Math.random() * 15}s`,
+            '--ui-particle-left': `${left}%`,
+            '--ui-particle-size': `${size}px`,
+            '--ui-particle-tone': particleTones[Math.floor(Math.random() * particleTones.length)],
+            '--ui-particle-top': `${top}%`
+        }
+    };
+});
+export const Particles = ({ children, className, density = 'medium', ...props }) => {
+    const [particles, setParticles] = useState([]);
+    useEffect(() => {
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+            return;
+        // Particle geometry is client-only to keep SSR output stable while retaining per-load variation.
+        // eslint-disable-next-line @eslint-react/set-state-in-effect
+        setParticles(createParticles(density));
+    }, [density]);
+    return (_jsxs("div", { "aria-hidden": "true", className: composeClassName('ui-particles', className), "data-ui-particles": density, ...props, children: [children, particles.map(particle => (_jsx("span", { className: "ui-particles__particle", style: particle.style }, particle.id)))] }));
+};
 const parseMotionDuration = (value) => {
     const parsedDuration = Number.parseFloat(value);
     if (!Number.isFinite(parsedDuration))
@@ -616,8 +1215,8 @@ export const ScrollReveal = ({ animation = 'fade', className, delay = 0, duratio
         if (!root)
             return;
         root.dataset.uiScrollRevealBound = 'true';
-        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches
-            || typeof IntersectionObserver === 'undefined') {
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches ||
+            typeof IntersectionObserver === 'undefined') {
             root.classList.add('is-revealed');
             return;
         }
@@ -629,9 +1228,14 @@ export const ScrollReveal = ({ animation = 'fade', className, delay = 0, duratio
                 observer.disconnect();
         }, { threshold: Math.min(1, Math.max(0, threshold)) });
         observer.observe(root);
-        return () => { observer.disconnect(); };
+        return () => {
+            observer.disconnect();
+        };
     }, [once, threshold]);
-    return (_jsx("div", { className: composeClassName('ui-scroll-reveal', `ui-scroll-reveal-${animation}`, `ui-motion-duration-${duration}`, className), "data-ui-reveal-once": String(once), "data-ui-reveal-threshold": Math.min(1, Math.max(0, threshold)), "data-ui-scroll-reveal": true, ref: rootRef, style: { ...style, '--ui-reveal-delay': `${Math.max(0, delay)}ms` }, ...props }));
+    return (_jsx("div", { className: composeClassName('ui-scroll-reveal', `ui-scroll-reveal-${animation}`, `ui-motion-duration-${duration}`, className), "data-ui-reveal-once": String(once), "data-ui-reveal-threshold": Math.min(1, Math.max(0, threshold)), "data-ui-scroll-reveal": true, ref: rootRef, style: {
+            ...style,
+            '--ui-reveal-delay': `${Math.max(0, delay)}ms`
+        }, ...props }));
 };
 export const RevealGroup = ({ animation = 'slide-up', className, delay = 0, duration = 'slow', once = true, stagger = 80, style, threshold = 0.15, ...props }) => {
     const rootRef = useRef(null);
@@ -645,8 +1249,8 @@ export const RevealGroup = ({ animation = 'slide-up', className, delay = 0, dura
                 child.style.setProperty('--ui-reveal-index', String(index));
             }
         }
-        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches
-            || typeof IntersectionObserver === 'undefined') {
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches ||
+            typeof IntersectionObserver === 'undefined') {
             root.classList.add('is-revealed');
             return;
         }
@@ -658,7 +1262,9 @@ export const RevealGroup = ({ animation = 'slide-up', className, delay = 0, dura
                 observer.disconnect();
         }, { threshold: Math.min(1, Math.max(0, threshold)) });
         observer.observe(root);
-        return () => { observer.disconnect(); };
+        return () => {
+            observer.disconnect();
+        };
     }, [once, threshold]);
     return (_jsx("div", { className: composeClassName('ui-reveal-group', `ui-reveal-group-${animation}`, `ui-motion-duration-${duration}`, className), "data-ui-reveal-group": true, "data-ui-reveal-once": String(once), "data-ui-reveal-threshold": Math.min(1, Math.max(0, threshold)), ref: rootRef, style: {
             ...style,
@@ -679,8 +1285,8 @@ export const AnimatedNumber = ({ className, decimals = 0, duration = 'slow', fro
         if (!output)
             return;
         const format = (current) => `${prefix}${formatter.format(current)}${suffix}`;
-        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches
-            || typeof IntersectionObserver === 'undefined') {
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches ||
+            typeof IntersectionObserver === 'undefined') {
             output.textContent = format(value);
             return;
         }
@@ -692,13 +1298,15 @@ export const AnimatedNumber = ({ className, decimals = 0, duration = 'slow', fro
             if (!entries.some(entry => entry.isIntersecting))
                 return;
             observer.disconnect();
-            const durationValue = getComputedStyle(root).getPropertyValue('--ui-motion-duration').trim();
+            const durationValue = getComputedStyle(root)
+                .getPropertyValue('--ui-motion-duration')
+                .trim();
             const durationMs = parseMotionDuration(durationValue);
             const startedAt = performance.now();
             const update = (now) => {
                 const progress = Math.min(1, (now - startedAt) / Math.max(1, durationMs));
                 const eased = 1 - Math.pow(1 - progress, 3);
-                output.textContent = format(from + ((value - from) * eased));
+                output.textContent = format(from + (value - from) * eased);
                 if (progress < 1) {
                     requestAnimationFrame(update);
                 }
@@ -709,34 +1317,54 @@ export const AnimatedNumber = ({ className, decimals = 0, duration = 'slow', fro
             requestAnimationFrame(update);
         }, { threshold: 0.15 });
         observer.observe(root);
-        return () => { observer.disconnect(); };
+        return () => {
+            observer.disconnect();
+        };
     }, [formatter, from, prefix, suffix, value]);
     return (_jsxs("span", { className: composeClassName('ui-animated-number', `ui-motion-duration-${duration}`, className), "data-ui-animated-number": true, ...props, children: [_jsx("span", { "aria-hidden": "true", "data-ui-animated-number-output": true, ref: outputRef, children: formattedValue }), _jsx("span", { className: "ui-sr-only", children: formattedValue })] }));
 };
-export const Stat = ({ className, label, value, children, ...props }) => (_jsxs("div", { className: composeClassName('ui-stat', className), ...props, children: [label && _jsx("div", { className: "ui-stat-label", children: label }), value && _jsx("div", { className: "ui-stat-value", children: value }), children] }));
+export const Stat = ({ as, className, label, value, variant = 'default', children, ...props }) => (_jsxs(Primitive, { ...(as ? { as } : {}), className: composeClassName(variant !== 'default' && `ui-stat--${variant}`, className), "data-slot": "stat", "data-variant": variant, ...props, uiClassName: "ui-stat", children: [label && (_jsx("div", { className: "ui-stat-label", "data-slot": "stat-label", children: label })), value && (_jsx("div", { className: "ui-stat-value", "data-slot": "stat-value", children: value })), children] }));
+export const StatLabel = ({ as, ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), "data-slot": "stat-label", ...props, uiClassName: "ui-stat-label" }));
+export const StatValue = ({ as, ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), "data-slot": "stat-value", ...props, uiClassName: "ui-stat-value" }));
+export const StatDescription = ({ as, ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), "data-slot": "stat-description", ...props, uiClassName: "ui-stat-description" }));
+export const StatIcon = ({ className, ...props }) => (_jsx("span", { className: composeClassName('ui-stat-icon', className), "data-slot": "stat-icon", ...props }));
+export const StatTrend = ({ className, tone = 'neutral', ...props }) => (_jsx("span", { className: composeClassName('ui-stat-trend', `ui-stat-trend--${tone}`, className), "data-slot": "stat-trend", "data-tone": tone, ...props }));
 export const Meter = ({ className, ...props }) => (_jsx("meter", { className: composeClassName('ui-meter', className), ...props }));
 export const Note = ({ className, label, borderPosition = 'left', children, ...props }) => (_jsxs("div", { className: composeClassName('ui-note', `ui-note--border-${borderPosition}`, className), ...props, children: [label && _jsx("p", { className: "ui-note__label", children: label }), _jsx("div", { className: "ui-note__content", children: children })] }));
 export const Rating = ({ className, value = 0, max = 5, readonly = false, ...props }) => {
     const stars = Array.from({ length: max }, (_, i) => i + 1);
-    return (_jsx("div", { className: composeClassName('ui-rating', readonly && 'ui-rating--readonly', className), "data-ui-rating": true, "data-value": value, "data-max": max, "data-readonly": readonly ? 'true' : 'false', ...props, children: stars.map((star) => (_jsx("button", { type: "button", className: "ui-rating__star", "data-active": star <= value ? 'true' : 'false', disabled: readonly, "aria-label": `Rate ${star} out of ${max}`, children: _jsx("svg", { viewBox: "0 0 24 24", width: "24", height: "24", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", className: "ui-icon", children: _jsx("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) }) }, star))) }));
+    return (_jsx("div", { className: composeClassName('ui-rating', readonly && 'ui-rating--readonly', className), "data-ui-rating": true, "data-value": value, "data-max": max, "data-readonly": readonly ? 'true' : 'false', ...props, children: stars.map(star => (_jsx("button", { type: "button", className: "ui-rating__star", "data-active": star <= value ? 'true' : 'false', disabled: readonly, "aria-label": `Rate ${star} out of ${max}`, children: _jsx("svg", { viewBox: "0 0 24 24", width: "24", height: "24", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", className: "ui-icon", children: _jsx("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) }) }, star))) }));
 };
 export const Timeline = ({ className, ...props }) => (_jsx("ol", { className: composeClassName('ui-timeline', className), ...props }));
 export const TimelineItem = ({ className, children, dot, ...props }) => (_jsxs("li", { className: composeClassName('ui-timeline-item', className), ...props, children: [_jsx("div", { className: "ui-timeline-item__tail" }), _jsx("div", { className: "ui-timeline-item__dot", children: dot }), _jsx("div", { className: "ui-timeline-item__content", children: children })] }));
 export const AnimatedLogo = ({ animation = 'reveal', className, ...props }) => (_jsx("span", { className: composeClassName('ui-animated-logo', className), "data-animation": animation, "data-ui-animated-logo": true, ...props }));
 export const AnimatedPortrait = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-animated-portrait relative isolate w-full animate-reveal-lcp motion-reduce:animate-none', className), ...props }));
-export const ButtonLink = ({ className, ref, shape = 'default', variant = 'primary', ...props }) => {
-    let variantClass = `ui-button ui-button--${variant} min-h-11 rounded-full border`;
-    if (variant === 'unstyled') {
-        variantClass = 'ui-button-link--unstyled';
-    }
-    else if (variant === 'inline') {
-        variantClass = 'ui-button ui-button--inline';
+const getButtonLinkVariantClass = (variant) => {
+    if (variant === 'unstyled')
+        return 'ui-button-link--unstyled';
+    if (variant === 'inline')
+        return 'ui-button ui-button--inline';
+    return `ui-button ui-button--${variant} min-h-11 rounded-full border`;
+};
+export const ButtonLink = ({ asChild = false, children, className, ref, shape = 'default', variant = 'primary', ...props }) => {
+    const variantClass = getButtonLinkVariantClass(variant);
+    const shapeClass = shape === 'icon' && variant !== 'inline' ?
+        'ui-button-link--icon' :
+        undefined;
+    const buttonLinkClassName = composeClassName('ui-button-link', variant !== 'unstyled' &&
+        'group inline-flex cursor-pointer items-center justify-center gap-2 text-sm font-semibold tracking-[0.01em]', variantClass, shapeClass, className);
+    if (asChild) {
+        const child = Children.only(children);
+        if (!isValidElement(child)) {
+            throw new Error('ButtonLink with asChild requires exactly one valid React element child.');
+        }
+        const ChildComponent = child.type;
+        return (_jsx(ChildComponent, { ...child.props, ...props, className: composeClassName(buttonLinkClassName, child.props.className), "data-slot": "button-link", ref: ref, children: child.props.children }));
     }
-    const shapeClass = shape === 'icon' && variant !== 'inline' ? 'ui-button-link--icon' : undefined;
-    return (_jsx("a", { className: composeClassName('ui-button-link', variant !== 'unstyled' && 'group inline-flex cursor-pointer items-center justify-center gap-2 text-sm font-semibold tracking-[0.01em]', variantClass, shapeClass, className), ref: ref, ...props }));
+    return (_jsx("a", { className: buttonLinkClassName, "data-slot": "button-link", ref: ref, ...props, children: children }));
 };
-export const CoverImage = ({ className, hover = false, showBottomGradient = false, children, ...props }) => (_jsxs("div", { className: composeClassName('ui-cover-image relative overflow-hidden bg-surface-muted', hover && 'ui-cover-image--hover', className), ...props, children: [children, showBottomGradient && _jsx("div", { "aria-hidden": "true", className: "ui-cover-image__bottom-gradient" })] }));
-export const GradientDivider = ({ className, ...props }) => (_jsx("div", { "aria-hidden": "true", className: composeClassName('ui-gradient-divider pointer-events-none flex justify-center', className), ...props, children: _jsx("div", { className: "h-px w-full max-w-5xl bg-gradient-to-r from-transparent via-brand/40 to-transparent" }) }));
+export const CoverImage = ({ className, hover = false, showBottomGradient = false, children, ...props }) => (_jsxs("div", { className: composeClassName('ui-cover-image relative overflow-hidden bg-surface-muted', hover && 'ui-cover-image--hover', className), ...props, children: [children, showBottomGradient && (_jsx("div", { "aria-hidden": "true", className: "ui-cover-image__bottom-gradient" }))] }));
+export const GradientDivider = ({ className, ...props }) => (_jsx("div", { "aria-hidden": "true", className: composeClassName('ui-gradient-divider pointer-events-none flex justify-center', className), ...props, children: _jsx("div", { className: "\n        via-brand/40 h-px w-full max-w-5xl bg-linear-to-r from-transparent\n        to-transparent\n      " }) }));
 const emptySteps = [];
 const normalizeStep = (step) => typeof step === 'string' ? { description: undefined, title: step } : step;
 export const Stepper = ({ children, className, currentStep = 0, orientation = 'horizontal', steps = emptySteps, ...props }) => (_jsxs("ol", { className: composeClassName('ui-stepper', orientation === 'vertical' && 'ui-stepper--vertical', className), "data-orientation": orientation, ...props, children: [steps.map(normalizeStep).map((step, index) => {
@@ -747,24 +1375,104 @@ export const Stepper = ({ children, className, currentStep = 0, orientation = 'h
             else if (index === currentStep) {
                 state = 'current';
             }
-            return (_jsxs("li", { "aria-current": state === 'current' ? 'step' : undefined, className: "ui-stepper__step", "data-state": state, children: [_jsx("span", { className: "ui-stepper__marker", children: index + 1 }), _jsxs("span", { className: "ui-stepper__content", children: [_jsx("span", { className: "ui-stepper__title", children: step.title }), step.description && _jsx("span", { className: "ui-stepper__description", children: step.description })] })] }, step.title));
+            return (_jsxs("li", { "aria-current": state === 'current' ? 'step' : undefined, className: "ui-stepper__step", "data-state": state, children: [_jsx("span", { className: "ui-stepper__marker", children: index + 1 }), _jsxs("span", { className: "ui-stepper__content", children: [_jsx("span", { className: "ui-stepper__title", children: step.title }), step.description && (_jsx("span", { className: "ui-stepper__description", children: step.description }))] })] }, step.title));
         }), children] }));
-export const FileUpload = ({ children, className, hint, id, inputClassName, label = 'Choose a file or drag it here', onChange, ...props }) => {
+export const FileUpload = ({ children, className, hint, id, inputClassName, label = 'Choose a file or drag it here', onChange, ref, ...props }) => {
     const generatedId = useId();
     const inputId = id ?? `ui-file-upload-${generatedId.replaceAll(':', '')}`;
     const [selectedFiles, setSelectedFiles] = useState([]);
-    const selectedFileText = selectedFiles.length > 1
-        ? `${selectedFiles.length} files selected`
-        : selectedFiles[0] ?? '';
+    const selectedFileText = selectedFiles.length > 1 ?
+        `${selectedFiles.length} files selected` :
+        (selectedFiles[0] ?? '');
     return (_jsxs("label", { className: composeClassName('ui-file-upload', className), "data-state": selectedFiles.length > 0 ? 'selected' : 'idle', "data-ui-file-upload": true, htmlFor: inputId, children: [_jsx("input", { className: composeClassName('ui-file-upload__input', inputClassName), "data-ui-file-upload-input": true, id: inputId, onChange: event => {
                     setSelectedFiles([...(event.currentTarget.files ?? [])].map(file => file.name));
                     onChange?.(event);
-                }, type: "file", ...props }), _jsxs("svg", { "aria-hidden": "true", className: "ui-file-upload__icon", fill: "none", focusable: "false", viewBox: "0 0 24 24", children: [_jsx("path", { d: "M12 16V4m0 0L8 8m4-4 4 4" }), _jsx("path", { d: "M5 14v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4" })] }), _jsx("span", { className: "ui-file-upload__prompt", children: children ?? label }), hint && _jsx("span", { className: "ui-file-upload__hint", children: hint }), _jsx("span", { "aria-live": "polite", className: "ui-file-upload__files", "data-ui-file-upload-files": true, children: selectedFileText })] }));
+                }, ref: ref, type: "file", ...props }), _jsxs("svg", { "aria-hidden": "true", className: "ui-file-upload__icon", fill: "none", focusable: "false", viewBox: "0 0 24 24", children: [_jsx("path", { d: "M12 16V4m0 0L8 8m4-4 4 4" }), _jsx("path", { d: "M5 14v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4" })] }), _jsx("span", { className: "ui-file-upload__prompt", children: children ?? label }), hint && _jsx("span", { className: "ui-file-upload__hint", children: hint }), _jsx("span", { "aria-live": "polite", className: "ui-file-upload__files", "data-ui-file-upload-files": true, children: selectedFileText })] }));
 };
 const emptyTourSteps = [];
 export const Tour = ({ children, className, closeLabel = 'Done', hidden = true, nextLabel = 'Next', steps = emptyTourSteps, ...props }) => (_jsxs("div", { className: composeClassName('ui-tour', className), "data-ui-tour": true, hidden: hidden, ...props, children: [_jsx("div", { "aria-hidden": "true", className: "ui-tour__backdrop", "data-ui-tour-backdrop": true }), _jsxs("div", { className: "ui-tour__popover", "data-ui-tour-popover": true, role: "dialog", children: [steps.map((step, index) => (_jsxs("div", { className: "ui-tour__step", "data-target": step.target, "data-ui-tour-step": true, hidden: index !== 0, children: [step.title && _jsx("p", { className: "ui-tour__title", children: step.title }), _jsx("p", { className: "ui-tour__content", children: step.content }), _jsxs("div", { className: "ui-tour__actions", children: [_jsx("button", { className: "ui-button ui-button--ghost ui-button--sm", "data-ui-tour-close": true, type: "button", children: closeLabel }), index < steps.length - 1 && (_jsx("button", { className: "ui-button ui-button--default ui-button--sm", "data-ui-tour-next": true, type: "button", children: nextLabel }))] })] }, step.target))), children] })] }));
 const emptyAnchorLinks = [];
-export const Anchor = ({ 'aria-label': ariaLabel = 'On this page', children, className, items = emptyAnchorLinks, ...props }) => (_jsxs("nav", { "aria-label": ariaLabel, className: composeClassName('ui-anchor', className), "data-ui-anchor": true, ...props, children: [items.length > 0 && (_jsx("ol", { children: items.map((item, index) => (_jsx("li", { children: _jsx("a", { "data-active": index === 0 ? 'true' : 'false', href: item.href, children: item.label }) }, item.href))) })), children] }));
+const createAnchorRef = () => {
+    let cleanup;
+    return (root) => {
+        cleanup?.();
+        cleanup = undefined;
+        if (!root)
+            return;
+        const links = [...root.querySelectorAll('a[href^="#"]')];
+        const targets = links.flatMap(link => {
+            const id = decodeURIComponent(link.getAttribute('href')?.slice(1) ?? '');
+            const target = id ? document.getElementById(id) : null;
+            return target ? [{ link, target }] : [];
+        });
+        if (!targets.length)
+            return;
+        const abortController = new AbortController();
+        let frame = 0;
+        const setActive = (active) => {
+            for (const link of links) {
+                const isActive = link === active;
+                link.dataset.active = String(isActive);
+                if (isActive) {
+                    link.setAttribute('aria-current', 'location');
+                }
+                else {
+                    link.removeAttribute('aria-current');
+                }
+            }
+        };
+        const update = () => {
+            frame = 0;
+            const scrollingElement = document.scrollingElement ?? document.documentElement;
+            const atEnd = scrollingElement.scrollTop + scrollingElement.clientHeight >=
+                scrollingElement.scrollHeight - 1;
+            const offset = Number(root.dataset.uiAnchorOffset) || 0;
+            let active = targets[0]?.link;
+            if (atEnd) {
+                active = targets.at(-1)?.link;
+            }
+            else {
+                for (const item of targets) {
+                    if (item.target.getBoundingClientRect().top > offset)
+                        break;
+                    active = item.link;
+                }
+            }
+            if (active)
+                setActive(active);
+        };
+        const requestUpdate = () => {
+            if (frame)
+                return;
+            frame = requestAnimationFrame(update);
+        };
+        for (const { link } of targets) {
+            link.addEventListener('click', () => {
+                setActive(link);
+            }, {
+                signal: abortController.signal
+            });
+        }
+        window.addEventListener('resize', requestUpdate, {
+            passive: true,
+            signal: abortController.signal
+        });
+        window.addEventListener('scroll', requestUpdate, {
+            passive: true,
+            signal: abortController.signal
+        });
+        update();
+        cleanup = () => {
+            abortController.abort();
+            if (frame)
+                cancelAnimationFrame(frame);
+        };
+    };
+};
+export const Anchor = ({ 'aria-label': ariaLabel = 'On this page', activationOffset = 96, children, className, items = emptyAnchorLinks, ...props }) => {
+    const anchorRef = createAnchorRef();
+    return (_jsxs("nav", { "aria-label": ariaLabel, className: composeClassName('ui-anchor', className), "data-ui-anchor": true, "data-ui-anchor-offset": Math.max(0, activationOffset), ref: anchorRef, ...props, children: [items.length > 0 && (_jsx("ol", { children: items.map((item, index) => (_jsx("li", { children: _jsxs("a", { "aria-current": index === 0 ? 'location' : undefined, "data-active": index === 0 ? 'true' : 'false', "data-depth": item.depth, href: item.href, children: [item.index !== undefined && (_jsx("span", { className: "ui-anchor__index", children: item.index })), _jsxs("span", { className: "ui-anchor__content", children: [_jsx("span", { className: "ui-anchor__label", children: item.label }), item.description && (_jsx("span", { className: "ui-anchor__description", children: item.description }))] })] }) }, item.href))) })), children] }));
+};
 export const Segmented = ({ children, className, defaultValue, name = 'segmented', onValueChange, options = emptyOptions, size = 'default', value = defaultValue, ...props }) => (_jsxs("div", { className: composeClassName('ui-segmented', size === 'sm' && 'ui-segmented--sm', size === 'lg' && 'ui-segmented--lg', className), role: "group", ...props, children: [options.map(normalizeOption).map(option => (_jsxs("label", { className: "ui-segmented__option", children: [_jsx("input", { defaultChecked: value === option.value, className: "ui-segmented__input", disabled: option.disabled, name: name, type: "radio", value: option.value, onChange: () => onValueChange?.(option.value) }), _jsx("span", { className: "ui-segmented__label", children: option.label })] }, option.value))), children] }));
 export const Toolbar = ({ 'aria-label': ariaLabel = 'Toolbar', className, orientation = 'horizontal', ...props }) => (_jsx("div", { "aria-label": ariaLabel, "aria-orientation": orientation, className: composeClassName('ui-toolbar', orientation === 'vertical' && 'ui-toolbar--vertical', className), "data-orientation": orientation, "data-ui-toolbar": true, role: "toolbar", ...props }));
 const emptyDescriptionsItems = [];
@@ -814,13 +1522,93 @@ const flattenTreeSelect = (nodes, depth = 0, acc = []) => {
 };
 const emptyTreeSelectNodes = [];
 export const TreeSelect = ({ children, className, name, placeholder = 'Select…', treeData = emptyTreeSelectNodes, ...props }) => (_jsxs("div", { className: composeClassName('ui-tree-select', className), "data-surface": "default", "data-ui-popover": true, "data-ui-tree-select": true, ...props, children: [_jsx("button", { "aria-expanded": "false", "aria-haspopup": "tree", className: "ui-select ui-select__trigger ui-tree-select__trigger", "data-ui-trigger": true, type: "button", children: _jsx("span", { "data-ui-tree-select-placeholder": placeholder, "data-ui-tree-select-value": true, children: placeholder }) }), _jsxs("div", { className: "ui-tree-select__panel", "data-ui-panel": true, hidden: true, children: [_jsx("div", { className: "ui-tree-select__tree", role: "tree", children: flattenTreeSelect(treeData).map(row => (_jsx("button", { className: "ui-tree-select__option", "data-value": row.value, role: "treeitem", style: { ['--ui-tree-depth']: row.depth }, type: "button", children: row.label }, row.value))) }), children] }), name && _jsx("input", { "data-ui-tree-select-input": true, name: name, type: "hidden" })] }));
-export const Mentions = ({ className, name, options = emptyOptions, placeholder, trigger = '@', ...props }) => (_jsxs("div", { className: composeClassName('ui-mentions', className), "data-ui-mentions": true, "data-ui-mentions-trigger": trigger, ...props, children: [_jsx("textarea", { className: "ui-textarea ui-mentions__input", "data-ui-mentions-input": true, name: name, placeholder: placeholder, rows: 3 }), _jsx("ul", { className: "ui-mentions__list", "data-ui-mentions-list": true, hidden: true, role: "listbox", children: options.map(normalizeOption).map(option => (_jsx("li", { children: _jsx("button", { className: "ui-mentions__option", "data-ui-mentions-option": true, "data-value": option.value, role: "option", type: "button", children: option.label }) }, option.value))) })] }));
+export const Mentions = ({ className, defaultValue = '', label = 'Mentions', name, onValueChange, options = emptyOptions, placeholder, trigger = '@', value, ...props }) => {
+    const generatedId = useId();
+    const inputRef = useRef(null);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [query, setQuery] = useState(null);
+    const currentValue = value ?? internalValue;
+    const listId = `ui-mentions-${generatedId}-list`;
+    const escapedTrigger = trigger.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const normalizedOptions = options.map(normalizeOption);
+    const visibleOptions = query === null ?
+        [] :
+        normalizedOptions.filter(option => option.value.toLowerCase().startsWith(query));
+    const expanded = visibleOptions.length > 0;
+    const resolvedActiveIndex = expanded ?
+        Math.min(Math.max(activeIndex, 0), visibleOptions.length - 1) :
+        -1;
+    const activeOption = visibleOptions[resolvedActiveIndex];
+    const setNextValue = (nextValue) => {
+        if (value === undefined)
+            setInternalValue(nextValue);
+        onValueChange?.(nextValue);
+    };
+    const closeList = () => {
+        setQuery(null);
+        setActiveIndex(-1);
+    };
+    const insertMention = (mention) => {
+        const caret = inputRef.current?.selectionStart ?? currentValue.length;
+        const before = currentValue
+            .slice(0, caret)
+            .replace(new RegExp(`${escapedTrigger}\\w*$`), `${trigger}${mention} `);
+        const nextValue = before + currentValue.slice(caret);
+        setNextValue(nextValue);
+        closeList();
+        requestAnimationFrame(() => {
+            inputRef.current?.focus();
+            inputRef.current?.setSelectionRange(before.length, before.length);
+        });
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Escape' && expanded) {
+            event.preventDefault();
+            closeList();
+            return;
+        }
+        if (expanded && (event.key === 'ArrowDown' || event.key === 'ArrowUp' ||
+            event.key === 'End' || event.key === 'Home')) {
+            event.preventDefault();
+            setActiveIndex(current => {
+                if (event.key === 'Home')
+                    return 0;
+                if (event.key === 'End')
+                    return visibleOptions.length - 1;
+                if (event.key === 'ArrowDown')
+                    return (current + 1) % visibleOptions.length;
+                return (current - 1 + visibleOptions.length) % visibleOptions.length;
+            });
+            return;
+        }
+        if (event.key === 'Enter' && activeOption) {
+            event.preventDefault();
+            insertMention(activeOption.value);
+        }
+    };
+    return (_jsxs("div", { className: composeClassName('ui-mentions', className), "data-ui-mentions": true, "data-ui-mentions-trigger": trigger, ...props, children: [_jsx("textarea", { "aria-activedescendant": activeOption ? `${listId}-option-${resolvedActiveIndex}` : undefined, "aria-autocomplete": "list", "aria-controls": listId, "aria-expanded": expanded, "aria-label": label, className: "ui-textarea ui-mentions__input", "data-ui-mentions-input": true, name: name, onBlur: closeList, onChange: event => {
+                    const nextValue = event.currentTarget.value;
+                    const match = new RegExp(`${escapedTrigger}(\\w*)$`)
+                        .exec(nextValue.slice(0, event.currentTarget.selectionStart));
+                    const nextQuery = match ? (match[1] ?? '').toLowerCase() : null;
+                    setNextValue(nextValue);
+                    setQuery(nextQuery);
+                    setActiveIndex(nextQuery === null ? -1 : 0);
+                }, onKeyDown: handleKeyDown, placeholder: placeholder, ref: inputRef, role: "combobox", rows: 3, value: currentValue }), _jsx("ul", { className: "ui-mentions__list", "data-ui-mentions-list": true, hidden: !expanded, id: listId, role: "listbox", children: visibleOptions.map((option, index) => (_jsx("li", { children: _jsx("button", { "aria-selected": index === resolvedActiveIndex, className: "ui-mentions__option", "data-ui-mentions-option": true, "data-value": option.value, id: `${listId}-option-${index}`, onClick: () => {
+                            insertMention(option.value);
+                        }, onMouseDown: event => {
+                            event.preventDefault();
+                        }, role: "option", type: "button", children: option.label }) }, option.value))) })] }));
+};
 export const QRCode = ({ children, className, size = 160, src, style, value, ...props }) => {
     const qrSvg = !src && value ? renderSVG(value) : null;
-    const qrSrc = qrSvg ? `data:image/svg+xml;utf8,${encodeURIComponent(qrSvg)}` : src;
-    return (_jsxs("figure", { className: composeClassName('ui-qr-code', className), "data-ui-qr-code": true, style: { ['--ui-qr-code-size']: `${size}px`, ...style }, ...props, children: [_jsx("div", { className: "ui-qr-code__frame", children: qrSrc
-                    ? _jsx("img", { alt: value ? `QR code for ${value}` : 'QR code', className: "ui-qr-code__image", height: size, src: qrSrc, width: size })
-                    : children }), value && _jsx("figcaption", { className: "ui-qr-code__value", children: value })] }));
+    const qrSrc = qrSvg ?
+        `data:image/svg+xml;utf8,${encodeURIComponent(qrSvg)}` :
+        src;
+    return (_jsxs("figure", { className: composeClassName('ui-qr-code', className), "data-ui-qr-code": true, style: { ['--ui-qr-code-size']: `${size}px`, ...style }, ...props, children: [_jsx("div", { className: "ui-qr-code__frame", children: qrSrc ?
+                    (_jsx("img", { alt: value ? `QR code for ${value}` : 'QR code', className: "ui-qr-code__image", height: size, src: qrSrc, width: size })) :
+                    (children) }), value && _jsx("figcaption", { className: "ui-qr-code__value", children: value })] }));
 };
 export const Watermark = ({ children, className, content, gap = 120, rotate = -22, style, text = 'Confidential', ...props }) => {
     const watermarkText = content ?? text;
@@ -830,14 +1618,15 @@ export const Watermark = ({ children, className, content, gap = 120, rotate = -2
         '<': '&lt;',
         '>': '&gt;',
         '"': '&quot;',
-        "'": '&apos;'
+        '\'': '&apos;'
     };
     const escapedWatermarkText = watermarkText.replaceAll(/[&<>"']/g, character => watermarkXmlEntities[character] ?? character);
     const watermarkSvg = [
-        `<svg xmlns="http://www.w3.org/2000/svg" width="${tileSize}" height="${tileSize}" viewBox="0 0 ${tileSize} ${tileSize}">`,
+        '<svg xmlns="http://www.w3.org/2000/svg"',
+        ` width="${tileSize}" height="${tileSize}" viewBox="0 0 ${tileSize} ${tileSize}">`,
         `<text x="${tileSize / 2}" y="${tileSize / 2}" dominant-baseline="middle" text-anchor="middle"`,
         ` transform="rotate(${rotate} ${tileSize / 2} ${tileSize / 2})"`,
-        ' fill="black" font-family="system-ui, sans-serif" font-size="16" font-weight="500" letter-spacing="1.6">',
+        ' fill="black" font-family="Montserrat, Avenir Next, Segoe UI, sans-serif" font-size="16" font-weight="500" letter-spacing="1.6">',
         `${escapedWatermarkText}</text></svg>`
     ].join('');
     const watermarkImage = `url("data:image/svg+xml,${encodeURIComponent(watermarkSvg)}")`;
@@ -850,10 +1639,20 @@ export const Watermark = ({ children, className, content, gap = 120, rotate = -2
 export const Affix = ({ className, offset = 0, offsetBottom, offsetTop, position: positionProp, style, ...props }) => {
     const position = positionProp ?? (offsetBottom === undefined ? 'top' : 'bottom');
     const resolvedOffset = offsetBottom ?? offsetTop ?? offset;
-    return (_jsx("div", { className: composeClassName('ui-affix', position === 'bottom' && 'ui-affix--bottom', className), "data-position": position, style: { ['--ui-affix-offset']: `${resolvedOffset}px`, ...style }, ...props }));
+    return (_jsx("div", { className: composeClassName('ui-affix', position === 'bottom' && 'ui-affix--bottom', className), "data-position": position, style: {
+            ['--ui-affix-offset']: `${resolvedOffset}px`,
+            ...style
+        }, ...props }));
 };
 const emptySpeedDialActions = [];
-const speedDialNavigationKeys = ['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home'];
+const speedDialNavigationKeys = [
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'End',
+    'Home'
+];
 const getSpeedDialNavigationIndex = (key, currentIndex, itemCount) => {
     if (key === 'Home')
         return 0;
@@ -902,7 +1701,9 @@ export const SpeedDial = ({ actions = emptySpeedDialActions, children, className
                     if (event.target.closest('[role="menuitem"], button, a'))
                         close();
                 }, onKeyDown: event => {
-                    const items = [...(menuRef.current?.querySelectorAll('[role="menuitem"], button:not([disabled]), a[href]') ?? [])];
+                    const items = [
+                        ...(menuRef.current?.querySelectorAll('[role="menuitem"], button:not([disabled]), a[href]') ?? [])
+                    ];
                     if (event.key === 'Escape') {
                         event.preventDefault();
                         close(true);