@santi020k/lumen-react 3.0.1 → 4.1.0

package/dist/combobox.js

@@ -0,0 +1,137 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { composeClassName } from '@santi020k/lumen-core';
+const emptyOptions = [];
+const isOptions = (value) => Array.isArray(value) && Array.from(value).every(option => typeof option === 'string');
+const ignoresComboboxKeyboard = (event, composing) => event.defaultPrevented || event.nativeEvent.isComposing || composing ||
+    event.altKey || event.ctrlKey || event.metaKey;
+const comboboxActiveId = (list, expanded, index) => expanded && index >= 0 ? `${list}-option-${index}` : undefined;
+const comboboxIsExpanded = (open, disabled, readOnly) => open && !disabled && !readOnly;
+export const Combobox = ({ className, defaultValue, disabled, readOnly, form, id, label, list, onBlur, onChange, onFocus, onKeyDown, options: rawOptions = emptyOptions, type = 'text', value: valueProp, wrapperClassName, ...props }) => {
+    const options = isOptions(rawOptions) ? rawOptions : emptyOptions;
+    const inputId = id ?? `${list}-input`;
+    const rootRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [activeValue, setActiveValue] = useState();
+    const composingRef = useRef(false);
+    const [value, setValue] = useState(() => String(defaultValue ?? ''));
+    const renderedValue = valueProp ?? value;
+    const query = String(renderedValue).trim().toLowerCase();
+    const visibleOptions = useMemo(() => options.filter(option => !query || option.toLowerCase().includes(query)), [options, query]);
+    const activeIndex = activeValue === undefined ? -1 : visibleOptions.indexOf(activeValue);
+    const expanded = comboboxIsExpanded(open, disabled, readOnly);
+    const activeId = comboboxActiveId(list, expanded, activeIndex);
+    const close = () => {
+        setOpen(false);
+        setActiveValue(undefined);
+    };
+    const selectOption = (option) => {
+        const input = rootRef.current?.querySelector('input');
+        if (!input || disabled || readOnly)
+            return;
+        // Use the native setter so React's change event observes the selected value.
+        const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+        descriptor?.set?.call(input, option);
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        if (valueProp === undefined)
+            setValue(option);
+        input.focus({ preventScroll: true });
+        close();
+    };
+    const navigate = (key) => {
+        setOpen(true);
+        const index = expanded ? activeIndex : -1;
+        let next = (index + 1) % visibleOptions.length;
+        if (key === 'ArrowUp') {
+            next = index < 0 ? visibleOptions.length - 1 : (index - 1 + visibleOptions.length) % visibleOptions.length;
+        }
+        setActiveValue(visibleOptions[next]);
+    };
+    const commitActive = (event) => {
+        const option = visibleOptions[activeIndex];
+        if (!expanded || option === undefined)
+            return;
+        event.preventDefault();
+        selectOption(option);
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (ignoresComboboxKeyboard(event, composingRef.current) || disabled || readOnly)
+            return;
+        switch (event.key) {
+            case 'Escape':
+                if (!expanded)
+                    return;
+                event.preventDefault();
+                close();
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                navigate(event.key);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                navigate(event.key);
+                break;
+            case 'Enter':
+                commitActive(event);
+                break;
+        }
+    };
+    useEffect(() => {
+        const option = activeId ? rootRef.current?.ownerDocument.getElementById(activeId) : null;
+        if (typeof option?.scrollIntoView === 'function')
+            option.scrollIntoView({ block: 'nearest' });
+    }, [activeId]);
+    useEffect(() => {
+        const input = rootRef.current?.querySelector('input');
+        const owner = input?.form;
+        let active = true;
+        let resetTimer;
+        const reset = (event) => {
+            globalThis.clearTimeout(resetTimer);
+            resetTimer = globalThis.setTimeout(() => {
+                if (!active || event.defaultPrevented || !input?.isConnected)
+                    return;
+                if (valueProp === undefined)
+                    setValue(String(defaultValue ?? ''));
+                setOpen(false);
+                setActiveValue(undefined);
+            });
+        };
+        owner?.addEventListener('reset', reset);
+        return () => {
+            active = false;
+            globalThis.clearTimeout(resetTimer);
+            owner?.removeEventListener('reset', reset);
+        };
+    }, [defaultValue, form, valueProp]);
+    return (_jsxs("div", { className: composeClassName('ui-combobox', wrapperClassName), "data-ui-combobox": true, onBlur: event => {
+            const nextTarget = event.relatedTarget;
+            if (!nextTarget || !event.currentTarget.contains(nextTarget)) {
+                close();
+            }
+        }, ref: rootRef, children: [label && (_jsx("label", { className: "ui-label", htmlFor: inputId, id: `${inputId}-label`, children: label })), _jsx("input", { ...props, "aria-autocomplete": "list", "aria-controls": list, "aria-expanded": expanded, "aria-activedescendant": activeId, className: composeClassName('ui-input', className), id: inputId, disabled: disabled, form: form, readOnly: readOnly, role: "combobox", type: type, value: renderedValue, onBlur: onBlur, onChange: event => {
+                    if (valueProp === undefined) {
+                        setValue(event.currentTarget.value);
+                    }
+                    setActiveValue(undefined);
+                    setOpen(true);
+                    onChange?.(event);
+                }, onFocus: event => {
+                    if (!disabled && !readOnly)
+                        setOpen(true);
+                    onFocus?.(event);
+                }, onKeyDown: handleKeyDown, onCompositionStart: event => {
+                    composingRef.current = true;
+                    props.onCompositionStart?.(event);
+                }, onCompositionEnd: event => {
+                    composingRef.current = false;
+                    props.onCompositionEnd?.(event);
+                } }), _jsx("div", { className: "ui-combobox__list", hidden: !expanded, id: list, role: "listbox", "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'] ?? (label ? `${inputId}-label` : undefined), children: visibleOptions.map((option, index) => (_jsx("button", { id: `${list}-option-${index}`, "aria-selected": activeId === `${list}-option-${index}`, "data-ui-combobox-option": true, "data-value": option, role: "option", tabIndex: -1, type: "button", onClick: () => {
+                        selectOption(option);
+                    }, onMouseDown: event => {
+                        event.preventDefault();
+                    }, children: option }, option))) })] }));
+};

package/dist/comparison-chart.d.ts

@@ -0,0 +1,13 @@
+import { type LumenChartLabels, type LumenComparisonDatum, type LumenComparisonOptions } from '@santi020k/lumen-core';
+import { type ChartProps } from './components.js';
+export interface ComparisonChartProps extends Omit<ChartProps, 'children'>, Omit<LumenComparisonOptions, 'paired'> {
+    data: readonly LumenComparisonDatum[];
+    formatValue?: (value: number) => string;
+    labels?: Partial<LumenChartLabels>;
+    referenceLabel?: string;
+    valueLabel?: string;
+    showTable?: boolean;
+}
+export declare const LollipopChart: (props: ComparisonChartProps) => import("react").JSX.Element;
+export declare const DumbbellChart: (props: ComparisonChartProps) => import("react").JSX.Element;
+//# sourceMappingURL=comparison-chart.d.ts.map

package/dist/comparison-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comparison-chart.d.ts","sourceRoot":"","sources":["../src/comparison-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+E,KAAK,gBAAgB,EAAE,KAAK,oBAAoB,EAAE,KAAK,sBAAsB,EAA2B,MAAM,uBAAuB,CAAA;AAE3N,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAExD,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,EAAE,IAAI,CAAC,sBAAsB,EAAE,QAAQ,CAAC;IAChH,IAAI,EAAE,SAAS,oBAAoB,EAAE,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAClC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAkGD,eAAO,MAAM,aAAa,GAAI,OAAO,oBAAoB,gCAAoK,CAAA;AAC7N,eAAO,MAAM,aAAa,GAAI,OAAO,oBAAoB,gCAA4J,CAAA"}

package/dist/comparison-chart.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { composeClassName, createLumenComparisonGeometry, getLumenChartToneClassName, resolveLumenChartLabels } from '@santi020k/lumen-core';
+import { Chart } from './components.js';
+const resolveComparisonProps = (props) => ({
+    ...props, formatValue: props.formatValue ?? String, referenceLabel: props.referenceLabel ?? 'Before', showTable: props.showTable ?? true
+});
+const ComparisonChart = ({ data, domain, paired, formatValue, labels, referenceLabel, valueLabel, showTable, ...props }) => {
+    const text = resolveLumenChartLabels(labels);
+    const title = valueLabel ?? text.value;
+    const model = createLumenComparisonGeometry(data, { domain, paired });
+    const format = (value) => value === null ? text.notAvailable : formatValue(value);
+    return (_jsx(Chart, { ...props, children: !model.valid || model.rows.length === 0 ?
+            _jsx("p", { className: "ui-chart__empty", role: "status", children: model.valid ? text.empty : text.invalidData }) :
+            (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ui-comparison-chart__legend", children: [_jsx("span", { children: text.category }), _jsx("span", { children: paired ? `${referenceLabel} → ${title}` : title })] }), _jsx("ul", { className: "ui-comparison-chart__rows", children: model.rows.map((row, index) => (_jsxs("li", { className: getLumenChartToneClassName(row.tone, index), children: [_jsxs("div", { className: "ui-comparison-chart__label", children: [_jsx("span", { children: row.label }), _jsxs("span", { children: [paired && (_jsxs(_Fragment, { children: [format(row.reference), ' ', _jsx("span", { "aria-hidden": "true", children: "\u2192" }), ' '] })), _jsx("strong", { children: format(row.value) })] })] }), _jsxs("div", { className: "ui-comparison-chart__track", "aria-hidden": "true", children: [row.valuePosition !== null && row.referencePosition !== null && (_jsx("span", { className: "ui-comparison-chart__connector", style: { left: `${row.start * 100}%`, width: `${row.width * 100}%` } })), paired && row.referencePosition !== null && (_jsx("span", { className: "ui-comparison-chart__reference", style: { left: `${row.referencePosition * 100}%` } })), row.valuePosition !== null && (_jsx("span", { className: "ui-comparison-chart__dot", style: { left: `${row.valuePosition * 100}%` } }))] })] }, row.id))) }), _jsx("div", { className: "ui-bullet-chart__ticks", "aria-hidden": "true", children: model.ticks.map(tick => _jsx("span", { children: formatValue(tick) }, tick)) }), showTable && (_jsxs("details", { className: "ui-chart__data", children: [_jsx("summary", { children: text.viewData }), _jsx("div", { role: "group", tabIndex: 0, "aria-label": text.chartData, children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: text.category }), paired && _jsx("th", { scope: "col", children: referenceLabel }), _jsx("th", { scope: "col", children: title })] }) }), _jsx("tbody", { children: model.rows.map(row => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: row.label }), paired && _jsx("td", { children: format(row.reference) }), _jsx("td", { children: format(row.value) })] }, row.id))) })] }) })] }))] })) }));
+};
+export const LollipopChart = (props) => _jsx(ComparisonChart, { ...resolveComparisonProps(props), paired: false, className: composeClassName('ui-comparison-chart', 'ui-lollipop-chart', props.className) });
+export const DumbbellChart = (props) => _jsx(ComparisonChart, { ...resolveComparisonProps(props), paired: true, className: composeClassName('ui-comparison-chart', 'ui-dumbbell-chart', props.className) });

package/dist/components.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef, ComponentPropsWithRef, CSSProperties, ElementType, HTMLAttributes, ReactNode, Ref } from 'react';
-import { type LumenBarChartLayout, type LumenChartLabels, type LumenChartOrientation, type LumenChartScaleType, type LumenChartSeries, type LumenChartTone, type LumenComboSeries, type LumenErrorStateAnnouncement, type LumenErrorStateKind, type LumenErrorStateLayout, type LumenFormErrorInput, type LumenFormStatus, type LumenHeatmapDatum, type LumenIconName, type LumenPhoneCountry, type LumenPhoneCountryOptions, type LumenPhoneNumber, type LumenPieChartVariant, type LumenRangeDatum } from '@santi020k/lumen-core';
+import { type LumenBarChartLayout, type LumenChartDatumActivationDetail, type LumenChartDomain, type LumenChartLabels, type LumenChartOrientation, type LumenChartSeries, type LumenChartTone, type LumenComboSeries, type LumenControlVisualSize, type LumenErrorStateAnnouncement, type LumenErrorStateKind, type LumenErrorStateLayout, type LumenFormErrorInput, type LumenFormStatus, type LumenHeatmapDatum, type LumenHeatmapOptions, type LumenIconName, type LumenLineChartOptions, type LumenPhoneCountry, type LumenPhoneCountryOptions, type LumenPhoneNumber, type LumenPieChartVariant, type LumenRangeDatum, type LumenScatterReference, type LumenScatterScaleType } from '@santi020k/lumen-core';
+import { type ChartInteractionProps } from './chart-interaction.js';
 import { type DialogOptions, type DropdownMenuOptions, type LanguageToggleOptions, type PopoverOptions, type ResizableDirection, type SelectOptions, type TabsOptions, type ToastPlacement, type TooltipOptions } from './hooks.js';
 import { type InputProps } from './server-components.js';
 export { Badge, type BadgeProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Container, type ContainerProps, Direction, type DirectionProps, Grid, type GridProps, Input, type InputProps, Label, type LabelProps, Progress, type ProgressProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Stack, type StackProps, Textarea, type TextareaProps, Typography, type TypographyProps, VisuallyHidden, type VisuallyHiddenProps } from './server-components.js';
@@ -10,23 +11,6 @@ type ButtonVariant = 'default' | 'destructive' | 'ghost' | 'link' | 'outline' |
 type CodeTheme = 'auto' | 'lumen' | 'santi020k';
 type CodeVariant = 'block' | 'inline';
 type IconSize = 'default' | 'lg' | 'sm' | 'xl';
-export type DataTableCell = boolean | null | number | string | undefined | {
-    label?: boolean | null | number | string;
-    sortValue?: boolean | null | number | string;
-    value?: boolean | null | number | string;
-};
-export interface DataTableColumn {
-    header?: string;
-    key: string;
-    label?: string;
-    sort?: 'number' | 'string';
-    sortable?: boolean;
-}
-export type DataTableRow = Record<string, DataTableCell> & {
-    id?: number | string;
-    rowValue?: number | string;
-    value?: number | string;
-};
 type MessageFrom = 'assistant' | 'user';
 type MarkerVariant = 'danger' | 'default' | 'success' | 'warning';
 type Orientation = 'horizontal' | 'vertical';
@@ -56,7 +40,7 @@ export interface AlertProps extends ComponentPropsWithoutRef<'aside'> {
 }
 export declare const Alert: ({ className, glass, variant, ...props }: AlertProps) => import("react").JSX.Element;
 export type AlertDialogProps = Omit<ComponentPropsWithoutRef<'dialog'>, 'open'> & SurfaceProps & Omit<DialogOptions, 'id'>;
-export declare const AlertDialog: ({ className, defaultOpen, glass, onClick, onClose, onOpenChange, open, ...props }: AlertDialogProps) => import("react").JSX.Element;
+export declare const AlertDialog: ({ className, defaultOpen, dismissOnEscape, dismissOnOutsidePress, glass, onCancel, onClick, onClose, onOpenChange, onPointerDown, open, ...props }: AlertDialogProps) => import("react").JSX.Element;
 export interface AgendaProps extends ComponentPropsWithoutRef<'section'> {
     glass?: LumenGlassProp;
 }
@@ -100,15 +84,20 @@ export interface CalendarProps extends ComponentPropsWithoutRef<'div'> {
     defaultValue?: string | undefined;
     disabled?: boolean | undefined;
     glass?: LumenGlassProp;
+    labels?: {
+        previousMonth?: string;
+        nextMonth?: string;
+    } | undefined;
     locale?: string | undefined;
     max?: string | undefined;
     min?: string | undefined;
     month?: string | undefined;
     name?: string | undefined;
     onValueChange?: ((value: string) => void) | undefined;
+    readOnly?: boolean | undefined;
     value?: string | undefined;
 }
-export declare const Calendar: ({ className, defaultValue, disabled, glass, locale, max, min, month, name, onValueChange, value, ...props }: CalendarProps) => import("react").JSX.Element;
+export declare const Calendar: ({ className, defaultValue, disabled, glass, labels, locale, max, min, month, name, onValueChange, readOnly, value, ...props }: CalendarProps) => import("react").JSX.Element;
 export interface CarouselProps extends ComponentPropsWithoutRef<'section'> {
     glass?: LumenGlassProp;
 }
@@ -132,6 +121,7 @@ export interface SparklineProps extends Omit<ComponentPropsWithoutRef<'span'>, '
 }
 export declare const Sparkline: ({ area, className, label, showEndpoint, tone, values, ...props }: SparklineProps) => import("react").JSX.Element;
 export interface BarChartProps extends Omit<ChartProps, 'children'> {
+    onDatumActivate?: (detail: LumenChartDatumActivationDetail) => void;
     categoryWidth?: number;
     emptyLabel?: ReactNode;
     formatCategory?: (category: number | string) => string;
@@ -143,8 +133,9 @@ export interface BarChartProps extends Omit<ChartProps, 'children'> {
     showLegend?: boolean;
     showTable?: boolean;
 }
-export declare const BarChart: ({ categoryWidth, className, emptyLabel, formatCategory, formatValue, layout, labels, orientation, series, showLegend, showTable, summary, ...props }: BarChartProps) => import("react").JSX.Element;
-export interface LineChartProps extends Omit<ChartProps, 'children'> {
+export declare const BarChart: ({ categoryWidth, className, onDatumActivate, emptyLabel, formatCategory, formatValue, layout, labels, orientation, series, showLegend, showTable, summary, ...props }: BarChartProps) => import("react").JSX.Element;
+export interface LineChartProps extends Omit<ChartProps, 'children'>, LumenLineChartOptions, ChartInteractionProps {
+    onDatumActivate?: (detail: LumenChartDatumActivationDetail) => void;
     area?: boolean;
     emptyLabel?: ReactNode;
     formatCategory?: (category: number | string) => string;
@@ -156,8 +147,9 @@ export interface LineChartProps extends Omit<ChartProps, 'children'> {
     showLegend?: boolean;
     showTable?: boolean;
 }
-export declare const LineChart: ({ area, className, emptyLabel, formatCategory, formatValue, labels, markers, referenceValue, series, showLegend, showTable, summary, ...props }: LineChartProps) => import("react").JSX.Element;
+export declare const LineChart: ({ area, onDatumActivate, annotations, domain: requestedDomain, height: requestedHeight, width: requestedWidth, xDomain, xScale, interactive, syncGroup, cursor, onCursorChange, className, emptyLabel, formatCategory, formatValue, labels, markers, referenceValue, series, showLegend, showTable, summary, ...props }: LineChartProps) => import("react").JSX.Element;
 export interface PieChartProps extends Omit<ChartProps, 'children'> {
+    onDatumActivate?: (detail: LumenChartDatumActivationDetail) => void;
     centerLabel?: ReactNode;
     centerValue?: ReactNode;
     labels?: Partial<LumenChartLabels>;
@@ -167,39 +159,49 @@ export interface PieChartProps extends Omit<ChartProps, 'children'> {
     valueFormatter?: (value: number) => string;
     variant?: LumenPieChartVariant;
 }
-export declare const PieChart: ({ centerLabel, centerValue, className, labels, series, showLegend, showTable, summary, valueFormatter, variant, ...props }: PieChartProps) => import("react").JSX.Element;
+export declare const PieChart: ({ centerLabel, centerValue, className, onDatumActivate, labels, series, showLegend, showTable, summary, valueFormatter, variant, ...props }: PieChartProps) => import("react").JSX.Element;
 export interface ScatterChartProps extends Omit<ChartProps, 'children'> {
+    onDatumActivate?: (detail: LumenChartDatumActivationDetail) => void;
     formatValue?: (value: number) => string;
+    formatX?: (value: number | string) => string;
+    formatY?: (value: number) => string;
+    xDomain?: Partial<LumenChartDomain>;
+    domain?: Partial<LumenChartDomain>;
+    references?: readonly LumenScatterReference[];
     labels?: Partial<LumenChartLabels>;
     series?: readonly LumenChartSeries[];
     showLegend?: boolean;
     showTable?: boolean;
-    xScale?: Exclude<LumenChartScaleType, 'categorical'>;
+    xScale?: LumenScatterScaleType;
 }
-export declare const ScatterChart: ({ className, formatValue, labels, series, showLegend, showTable, summary, xScale, ...props }: ScatterChartProps) => import("react").JSX.Element;
-export interface HeatmapProps extends Omit<ChartProps, 'children'> {
+export declare const ScatterChart: ({ className, onDatumActivate, formatValue, formatX, formatY, xDomain, domain, references, labels, series, showLegend, showTable, summary, xScale, ...props }: ScatterChartProps) => import("react").JSX.Element;
+export interface HeatmapProps extends Omit<ChartProps, 'children'>, LumenHeatmapOptions {
+    onDatumActivate?: (detail: LumenChartDatumActivationDetail) => void;
+    showLegend?: boolean;
     data?: readonly LumenHeatmapDatum[];
     formatValue?: (value: number) => string;
     labels?: Partial<LumenChartLabels>;
     showTable?: boolean;
 }
-export declare const Heatmap: ({ className, data, formatValue, labels, showTable, summary, ...props }: HeatmapProps) => import("react").JSX.Element;
+export declare const Heatmap: ({ onDatumActivate, colorScale, midpoint, domain, showLegend, className, data, formatValue, labels, showTable, summary, ...props }: HeatmapProps) => import("react").JSX.Element;
 export interface RangeChartProps extends Omit<ChartProps, 'children'> {
+    onDatumActivate?: (detail: LumenChartDatumActivationDetail) => void;
     data?: readonly LumenRangeDatum[];
     formatValue?: (value: number) => string;
     labels?: Partial<LumenChartLabels>;
     showTable?: boolean;
     tone?: LumenChartTone;
 }
-export declare const RangeChart: ({ className, data, formatValue, labels, showTable, summary, tone, ...props }: RangeChartProps) => import("react").JSX.Element;
+export declare const RangeChart: ({ className, onDatumActivate, data, formatValue, labels, showTable, summary, tone, ...props }: RangeChartProps) => import("react").JSX.Element;
 export interface ComboChartProps extends Omit<ChartProps, 'children'> {
+    onDatumActivate?: (detail: LumenChartDatumActivationDetail) => void;
     formatValue?: (value: number) => string;
     labels?: Partial<LumenChartLabels>;
     series?: readonly LumenComboSeries[];
     showLegend?: boolean;
     showTable?: boolean;
 }
-export declare const ComboChart: ({ className, formatValue, labels, series, showLegend, showTable, summary, ...props }: ComboChartProps) => import("react").JSX.Element;
+export declare const ComboChart: ({ className, onDatumActivate, formatValue, labels, series, showLegend, showTable, summary, ...props }: ComboChartProps) => import("react").JSX.Element;
 export type CheckboxProps = Omit<ComponentPropsWithRef<'input'>, 'type'>;
 export declare const Checkbox: ({ className, ref, ...props }: CheckboxProps) => import("react").JSX.Element;
 export interface CheckboxGroupProps extends ComponentPropsWithRef<'fieldset'> {
@@ -211,6 +213,10 @@ export declare const CheckboxGroup: ({ children, className, invalid, legend, ori
 export type CollapsibleProps = ComponentPropsWithoutRef<'details'>;
 export declare const Collapsible: ({ className, ...props }: CollapsibleProps) => import("react").JSX.Element;
 export interface CodeProps extends ComponentPropsWithoutRef<'figure'> {
+    codeLabel?: string;
+    copyLabel?: string;
+    copiedLabel?: string;
+    errorLabel?: string;
     code?: string;
     copy?: boolean;
     highlighted?: boolean;
@@ -220,7 +226,7 @@ export interface CodeProps extends ComponentPropsWithoutRef<'figure'> {
     variant?: CodeVariant;
     wrap?: boolean;
 }
-export declare const Code: ({ children, className, code, copy, highlighted, label, language, theme, variant, wrap, ...props }: CodeProps) => import("react").JSX.Element;
+export declare const Code: ({ children, className, code, copy, codeLabel, copyLabel, copiedLabel, errorLabel, highlighted, label, language, theme, variant, wrap, ...props }: CodeProps) => import("react").JSX.Element;
 export interface CopyButtonProps extends ComponentPropsWithoutRef<'button'> {
     copiedContent?: ReactNode;
     copiedLabel?: string;
@@ -244,19 +250,17 @@ export interface CodeTabItem {
 export interface CodeTabsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'defaultValue'> {
     ariaLabel?: string;
     copy?: boolean;
+    codeLabel?: string;
+    copyLabel?: string;
+    copiedLabel?: string;
+    errorLabel?: string;
     initialValue?: string;
     items?: readonly CodeTabItem[];
     storageKey?: string;
     theme?: CodeTheme;
     wrap?: boolean;
 }
-export interface ComboboxProps extends ComponentPropsWithoutRef<'input'> {
-    label?: ReactNode;
-    list: string;
-    options?: string[];
-    wrapperClassName?: string;
-}
-export declare const Combobox: ({ className, defaultValue, id, label, list, onBlur, onChange, onFocus, onKeyDown, options, type, value: valueProp, wrapperClassName, ...props }: ComboboxProps) => import("react").JSX.Element;
+export { Combobox, type ComboboxProps } from './combobox.js';
 export interface CommandProps extends ComponentPropsWithoutRef<'div'> {
     glass?: LumenGlassProp;
 }
@@ -266,22 +270,21 @@ export interface ContextMenuProps extends ComponentPropsWithoutRef<'menu'>, Surf
 export declare const ContextMenu: ({ className, glass, ...props }: ContextMenuProps) => import("react").JSX.Element;
 export type ColorPickerProps = ComponentPropsWithoutRef<'input'>;
 export declare const ColorPicker: ({ className, type, ...props }: ColorPickerProps) => import("react").JSX.Element;
-export interface DataTableProps extends ComponentPropsWithoutRef<'div'> {
-    columns?: DataTableColumn[];
-    glass?: LumenGlassProp;
-    name?: string;
-    rows?: DataTableRow[];
-    selectable?: boolean;
-}
-export declare const DataTable: ({ children, className, columns, glass, name, rows, selectable, ...props }: DataTableProps) => import("react").JSX.Element;
 export type DatePickerProps = Omit<ComponentPropsWithoutRef<'input'>, 'defaultValue' | 'type' | 'value'> & SurfaceProps & {
     defaultValue?: string;
+    formatDate?: (value: string) => string;
     inputRef?: Ref<HTMLInputElement>;
+    labels?: {
+        chooseDate?: string;
+        previousMonth?: string;
+        nextMonth?: string;
+    };
+    locale?: string;
     onValueChange?: (value: string) => void;
     placeholder?: string;
     value?: string;
 };
-export declare const DatePicker: ({ className, defaultValue, disabled, glass, id, inputRef, max, min, name, onChange, onInvalid, onValueChange, placeholder, required, value, ...props }: DatePickerProps) => import("react").JSX.Element;
+export declare const DatePicker: ({ className, defaultValue, disabled, formatDate, glass, id, inputRef, labels, locale, max, min, name, onChange, onInvalid, onValueChange, placeholder, readOnly, required, value, ...props }: DatePickerProps) => import("react").JSX.Element;
 export type DateRangePickerProps = ComponentPropsWithoutRef<'div'> & {
     onRangeChange?: (range: {
         end?: string;
@@ -292,12 +295,24 @@ export declare const DateRangePicker: ({ className, onInput, onRangeChange, ...p
 export type DialogProps = Omit<ComponentPropsWithoutRef<'dialog'>, 'open'> & SurfaceProps & Omit<DialogOptions, 'id'> & {
     layout?: 'centered' | 'fullscreen';
 };
-export declare const Dialog: ({ className, defaultOpen, glass, layout, onClick, onClose, onOpenChange, open, ...props }: DialogProps) => import("react").JSX.Element;
+export type DialogHeaderProps = ComponentPropsWithRef<'header'>;
+export declare const DialogHeader: ({ className, ...props }: DialogHeaderProps) => import("react").JSX.Element;
+export type DialogTitleProps = ComponentPropsWithRef<'h2'> & {
+    as?: 'h2' | 'h3' | 'h4';
+};
+export declare const DialogTitle: ({ as: Tag, className, ...props }: DialogTitleProps) => import("react").JSX.Element;
+export type DialogBodyProps = ComponentPropsWithRef<'div'>;
+export declare const DialogBody: ({ className, ...props }: DialogBodyProps) => import("react").JSX.Element;
+export type DialogFooterProps = ComponentPropsWithRef<'footer'>;
+export declare const DialogFooter: ({ className, ...props }: DialogFooterProps) => import("react").JSX.Element;
+export type DialogCloseProps = ButtonProps;
+export declare const DialogClose: ({ className, onClick, ...props }: DialogCloseProps) => import("react").JSX.Element;
+export declare const Dialog: ({ children, className, defaultOpen, dismissOnEscape, dismissOnOutsidePress, glass, layout, onCancel, onClick, onClose, onOpenChange, onPointerDown, open, ...props }: DialogProps) => import("react").JSX.Element;
 export interface DrawerProps extends ComponentPropsWithoutRef<'dialog'>, SurfaceProps {
 }
 export declare const Drawer: ({ className, glass, ...props }: DrawerProps) => import("react").JSX.Element;
 export type DropdownMenuProps = ComponentPropsWithoutRef<'menu'> & SurfaceProps & Omit<DropdownMenuOptions, 'id'>;
-export declare const DropdownMenu: ({ children, className, defaultOpen, glass, onOpenChange, open, ...props }: DropdownMenuProps) => import("react").JSX.Element;
+export declare const DropdownMenu: ({ children, className, collisionPadding, defaultOpen, glass, offset, onOpenChange, open, placement, positioning, ...props }: DropdownMenuProps) => import("react").JSX.Element;
 export type DropdownMenuTriggerProps = ComponentPropsWithoutRef<'button'>;
 export declare const DropdownMenuTrigger: ({ onClick, onKeyDown, ...props }: DropdownMenuTriggerProps) => import("react").JSX.Element;
 export type DropdownMenuContentProps = ComponentPropsWithoutRef<'div'>;
@@ -692,17 +707,25 @@ export interface MessageProps extends ComponentPropsWithoutRef<'article'> {
 export declare const Message: ({ className, from, ...props }: MessageProps) => import("react").JSX.Element;
 export interface MessageScrollerProps extends ComponentPropsWithoutRef<'div'> {
     glass?: LumenGlassProp;
+    autoScroll?: boolean;
+    scrollThreshold?: number;
 }
-export declare const MessageScroller: ({ className, glass, ...props }: MessageScrollerProps) => import("react").JSX.Element;
+export declare const MessageScroller: ({ className, glass, autoScroll, scrollThreshold, ...props }: MessageScrollerProps) => import("react").JSX.Element;
 export interface NativeSelectProps extends ComponentPropsWithRef<'select'> {
     options?: SelectOption[];
     placeholder?: string;
-    visualSize?: 'default' | 'lg' | 'sm';
+    visualSize?: LumenControlVisualSize;
 }
 export declare const NativeSelect: ({ children, className, defaultValue, options, placeholder, ref, value, visualSize, ...props }: NativeSelectProps) => import("react").JSX.Element;
 export interface PhoneInputProps extends Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue'> {
     countries?: SelectOption[];
     countryOptions?: readonly LumenPhoneCountry[];
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    errorMessage?: string;
+    inputProps?: Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'defaultValue' | 'onChange' | 'name' | 'type'>;
+    inputRef?: Ref<HTMLInputElement>;
     countryLabel?: string;
     countryName?: string;
     defaultCountryValue?: string;
@@ -713,9 +736,19 @@ export interface PhoneInputProps extends Omit<ComponentPropsWithoutRef<'div'>, '
     onValueChange?: (value: LumenPhoneNumber) => void;
     placeholder?: string;
     showValidationError?: boolean;
-    size?: 'default' | 'lg' | 'sm';
+    visualSize?: LumenControlVisualSize;
     value?: LumenPhoneNumber;
 }
+export interface CountryFlagProps extends ComponentPropsWithoutRef<'span'> {
+    regionCode: string;
+    decorative?: boolean;
+}
+export declare const CountryFlag: ({ regionCode, decorative, className, ...props }: CountryFlagProps) => import("react").JSX.Element;
+export interface PhoneNumberProps extends ComponentPropsWithoutRef<'span'> {
+    value: LumenPhoneNumber;
+    link?: boolean;
+}
+export declare const PhoneNumber: ({ value, link, className, ...props }: PhoneNumberProps) => import("react").JSX.Element;
 export declare const PhoneInput: (props: PhoneInputProps) => import("react").JSX.Element;
 export interface NavigationMenuProps extends ComponentPropsWithoutRef<'nav'>, SurfaceProps {
     variant?: 'default' | 'unstyled';
@@ -729,11 +762,11 @@ export declare const ContextNavigation: ({ children, className, context, variant
 export type PaginationProps = ComponentPropsWithoutRef<'nav'>;
 export declare const Pagination: ({ "aria-label": ariaLabel, className, ...props }: PaginationProps) => import("react").JSX.Element;
 export type PopoverProps = ComponentPropsWithoutRef<'div'> & SurfaceProps & Omit<PopoverOptions, 'id'>;
-export declare const Popover: ({ children, className, defaultOpen, glass, onOpenChange, open, ...props }: PopoverProps) => import("react").JSX.Element;
-export type PopoverTriggerProps = ComponentPropsWithoutRef<'button'>;
+export declare const Popover: ({ children, className, collisionPadding, defaultOpen, glass, offset, onOpenChange, open, placement, positioning, ...props }: PopoverProps) => import("react").JSX.Element;
+export type PopoverTriggerProps = ButtonProps;
 export declare const PopoverTrigger: ({ onClick, onKeyDown, ...props }: PopoverTriggerProps) => import("react").JSX.Element;
 export type PopoverPanelProps = ComponentPropsWithoutRef<'div'>;
-export declare const PopoverPanel: ({ onKeyDown, ...props }: PopoverPanelProps) => import("react").JSX.Element;
+export declare const PopoverPanel: ({ className, onKeyDown, ...props }: PopoverPanelProps) => import("react").JSX.Element;
 export type RadioGroupProps = ComponentPropsWithoutRef<'fieldset'>;
 export declare const RadioGroup: ({ className, ...props }: RadioGroupProps) => import("react").JSX.Element;
 export interface ResizableProps extends ComponentPropsWithoutRef<'div'> {
@@ -762,13 +795,13 @@ export interface ScheduleProps extends ComponentPropsWithoutRef<'section'> {
 export declare const Schedule: ({ className, glass, ...props }: ScheduleProps) => import("react").JSX.Element;
 export type SearchFieldProps = ComponentPropsWithRef<'input'>;
 export declare const SearchField: ({ className, ref, type, ...props }: SearchFieldProps) => import("react").JSX.Element;
-export interface SelectProps extends Omit<NativeSelectProps, 'defaultValue' | 'disabled' | 'id' | 'name' | 'onChange' | 'options' | 'placeholder' | 'required' | 'size' | 'value'>, SelectOptions {
+export interface SelectProps extends Omit<NativeSelectProps, 'defaultValue' | 'disabled' | 'id' | 'name' | 'onChange' | 'options' | 'placeholder' | 'required' | 'value'>, SelectOptions {
     glass?: LumenGlassProp;
     inputRef?: Ref<HTMLSelectElement>;
     onChange?: ComponentPropsWithoutRef<'select'>['onChange'];
-    size?: 'default' | 'lg' | 'md' | 'sm';
+    visualSize?: LumenControlVisualSize;
 }
-export declare const Select: ({ children, className, defaultValue, disabled, glass, id, inputRef, name, onChange, onValueChange, options, placeholder, required, size, value, ...props }: SelectProps) => import("react").JSX.Element;
+export declare const Select: ({ children, className, defaultValue, disabled, glass, id, inputRef, name, onChange, onValueChange, options, placeholder, required, visualSize, value, ...props }: SelectProps) => import("react").JSX.Element;
 export interface ListBoxProps extends Omit<ComponentPropsWithRef<'select'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'value'> {
     defaultValue?: string | string[];
     emptyMessage?: ReactNode;
@@ -803,9 +836,10 @@ export interface TableProps extends ComponentPropsWithoutRef<'div'> {
 }
 export declare const Table: ({ className, glass, layout, ...props }: TableProps) => import("react").JSX.Element;
 export interface TabsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'id' | 'onChange'>, Omit<TabsOptions, 'id'> {
+    indicator?: boolean;
     glass?: LumenGlassProp;
 }
-export declare const Tabs: ({ children, className, defaultValue, glass, onValueChange, orientation, value, ...props }: TabsProps) => import("react").JSX.Element;
+export declare const Tabs: ({ children, className, defaultValue, glass, indicator, onValueChange, orientation, value, ...props }: TabsProps) => import("react").JSX.Element;
 export type TabsListProps = ComponentPropsWithoutRef<'div'>;
 export declare const TabsList: ({ ...props }: TabsListProps) => import("react").JSX.Element;
 export interface TabsTriggerProps extends ComponentPropsWithoutRef<'button'> {
@@ -816,7 +850,7 @@ export interface TabsPanelProps extends ComponentPropsWithoutRef<'div'> {
     value: string;
 }
 export declare const TabsPanel: ({ value, ...props }: TabsPanelProps) => import("react").JSX.Element;
-export declare const CodeTabs: ({ ariaLabel, className, copy, initialValue, items, storageKey, theme, wrap, ...props }: CodeTabsProps) => import("react").JSX.Element;
+export declare const CodeTabs: ({ ariaLabel, className, copy, codeLabel, copyLabel, copiedLabel, errorLabel, initialValue, items, storageKey, theme, wrap, ...props }: CodeTabsProps) => import("react").JSX.Element;
 export type TagGroupProps = ComponentPropsWithoutRef<'div'>;
 export declare const TagGroup: ({ className, role, ...props }: TagGroupProps) => import("react").JSX.Element;
 export interface ThemeBuilderProps extends ComponentPropsWithoutRef<'section'> {
@@ -848,12 +882,7 @@ export interface TreeGridProps extends ComponentPropsWithoutRef<'div'> {
     glass?: LumenGlassProp;
 }
 export declare const TreeGrid: ({ className, glass, role, ...props }: TreeGridProps) => import("react").JSX.Element;
-export interface VirtualListProps extends ComponentPropsWithoutRef<'div'> {
-    glass?: LumenGlassProp;
-    itemSize?: number | string;
-    overscan?: number | string;
-}
-export declare const VirtualList: ({ className, glass, itemSize, overscan, ...props }: VirtualListProps) => import("react").JSX.Element;
+export { VirtualList, type VirtualListDataProps, type VirtualListProps } from './virtual-list.js';
 export type BackToTopProps = ComponentPropsWithoutRef<'button'>;
 export declare const BackToTop: ({ className, type, ...props }: BackToTopProps) => import("react").JSX.Element;
 export type CalloutProps = ComponentPropsWithoutRef<'aside'>;
@@ -1007,12 +1036,13 @@ export interface StepperProps extends ComponentPropsWithoutRef<'ol'> {
     steps?: StepItem[];
 }
 export declare const Stepper: ({ children, className, currentStep, orientation, steps, ...props }: StepperProps) => import("react").JSX.Element;
-export interface FileUploadProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'size'> {
+export interface FileUploadProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'size' | 'value' | 'defaultValue'> {
     hint?: ReactNode;
     inputClassName?: string;
     label?: ReactNode;
+    selectedFilesLabel?: string;
 }
-export declare const FileUpload: ({ children, className, hint, id, inputClassName, label, onChange, ref, ...props }: FileUploadProps) => import("react").JSX.Element;
+export declare const FileUpload: ({ children, className, hint, id, inputClassName, label, selectedFilesLabel, onChange, ref, ...props }: FileUploadProps) => import("react").JSX.Element;
 export interface TourStep {
     content: ReactNode;
     target: string;
@@ -1041,10 +1071,10 @@ export interface SegmentedProps extends Omit<ComponentPropsWithoutRef<'div'>, 'o
     name?: string;
     onValueChange?: (value: string) => void;
     options?: SelectOption[];
-    size?: 'default' | 'lg' | 'sm';
+    visualSize?: LumenControlVisualSize;
     value?: string;
 }
-export declare const Segmented: ({ children, className, defaultValue, name, onValueChange, options, size, value, ...props }: SegmentedProps) => import("react").JSX.Element;
+export declare const Segmented: ({ children, className, defaultValue, name, onValueChange, options, visualSize, value, ...props }: SegmentedProps) => import("react").JSX.Element;
 export interface ToolbarProps extends ComponentPropsWithoutRef<'div'> {
     orientation?: Orientation;
 }
@@ -1141,4 +1171,10 @@ export interface SpeedDialProps extends ComponentPropsWithoutRef<'div'> {
     label?: string;
 }
 export declare const SpeedDial: ({ actions, children, className, defaultOpen, direction, label, onBlur, ...props }: SpeedDialProps) => import("react").JSX.Element;
+export type DescriptionItemProps = ComponentPropsWithRef<'div'>;
+export declare const DescriptionItem: ({ className, ...props }: DescriptionItemProps) => import("react").JSX.Element;
+export type DescriptionTermProps = ComponentPropsWithRef<'dt'>;
+export declare const DescriptionTerm: ({ className, ...props }: DescriptionTermProps) => import("react").JSX.Element;
+export type DescriptionDetailProps = ComponentPropsWithRef<'dd'>;
+export declare const DescriptionDetail: ({ className, ...props }: DescriptionDetailProps) => import("react").JSX.Element;
 //# sourceMappingURL=components.d.ts.map