@santi020k/lumen-react 0.1.0

package/dist/components.js

@@ -0,0 +1,842 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @eslint-react/no-context-provider, @eslint-react/no-use-context -- Lumen React keeps React 18 peer support, so React 19 context shorthand and use() are not available. */
+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 { renderSVG } from 'uqr';
+import { useCalendar, useDialog, useDropdownMenu, useInputOTP, usePopover, useResizable, useSelect, useTabs, useTooltip } from './hooks.js';
+const emptyOptions = [];
+const emptyStringOptions = [];
+const emptyDataTableColumns = [];
+const emptyDataTableRows = [];
+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',
+    'fill-rule': 'fillRule',
+    'stroke-dasharray': 'strokeDasharray',
+    'stroke-dashoffset': 'strokeDashoffset',
+    'stroke-linecap': 'strokeLinecap',
+    'stroke-linejoin': 'strokeLinejoin',
+    'stroke-miterlimit': 'strokeMiterlimit',
+    'stroke-width': 'strokeWidth',
+    tabindex: 'tabIndex'
+};
+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
+}, children?.map(renderIconNode));
+const getIconAccessibility = ({ ariaHidden, ariaLabel, decorative, label, role }) => {
+    const accessibleLabel = label ?? ariaLabel;
+    const isDecorative = decorative ?? !accessibleLabel;
+    if (isDecorative) {
+        return {
+            ariaHidden: ariaHidden ?? true,
+            ariaLabel: undefined,
+            role
+        };
+    }
+    return {
+        ariaHidden,
+        ariaLabel: accessibleLabel,
+        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 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 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;
+    return value === undefined || value === null ? '' : String(value);
+};
+const getDataTableSortValue = (cell) => {
+    if (!isDataTableCellObject(cell) || cell.sortValue === undefined || cell.sortValue === null)
+        return undefined;
+    return String(cell.sortValue);
+};
+const getDataTableRowValue = (row, index) => String(row.rowValue ?? row.value ?? row.id ?? index);
+const toInputValue = (value) => {
+    if (value === undefined)
+        return undefined;
+    return String(value);
+};
+const composeHandlers = (userHandler, lumenHandler) => (event) => {
+    userHandler?.(event);
+    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 });
+};
+const DropdownMenuContext = createContext(null);
+const PopoverContext = createContext(null);
+const TabsContext = createContext(null);
+const TooltipContext = createContext(null);
+const requireContext = (context, componentName) => {
+    if (!context) {
+        throw new Error(`${componentName} must be used inside its matching Lumen root component.`);
+    }
+    return context;
+};
+export const Accordion = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-accordion', className), ...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 }) => {
+    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) }));
+};
+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 });
+};
+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 }));
+export const Breadcrumb = ({ 'aria-label': ariaLabel = 'Breadcrumb', className, ...props }) => (_jsx("nav", { "aria-label": ariaLabel, className: composeClassName('ui-breadcrumb', className), ...props }));
+export const Bubble = ({ className, from = 'assistant', glass = false, ...props }) => (_jsx("article", { className: composeClassName('ui-bubble', from === 'user' && 'ui-bubble--user', glassClass('ui-bubble', glass), className), "data-from": from, ...props }));
+export const Button = ({ children, className, disabled, loading = false, size = 'default', type = 'button', variant = 'default', ...props }) => (_jsxs("button", { "aria-busy": loading || undefined, className: composeClassName('ui-button', `ui-button--${variant}`, size === 'default' ? 'ui-button--default-size' : `ui-button--${size}`, disabled && 'ui-button--disabled', loading && 'ui-button--loading', className), disabled: disabled, 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 }) => {
+    const calendar = useCalendar({
+        defaultValue,
+        disabled,
+        locale,
+        max,
+        min,
+        month,
+        name,
+        onValueChange,
+        value
+    });
+    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', (glass || variant === 'glass') && composeClassName('ui-card--glass', glassIntensityClass(glass)), className), "data-variant": variant, ...props, uiClassName: "ui-card" }));
+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 }));
+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 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)
+        return null;
+    return (_jsxs("figcaption", { className: "ui-code__header", children: [_jsxs("span", { "aria-hidden": "true", className: "ui-code__dots", children: [_jsx("span", { className: "ui-code__dot ui-code__dot--red" }), _jsx("span", { className: "ui-code__dot ui-code__dot--yellow" }), _jsx("span", { className: "ui-code__dot ui-code__dot--green" })] }), _jsxs("span", { className: "ui-code__meta", children: [language && _jsx("span", { className: "ui-code__language", children: language }), label && _jsx("span", { className: "ui-code__label", children: label })] }), copy && renderCodeCopyButton()] }));
+};
+export const Code = ({ children, className, code, copy = false, highlighted = false, label, language, theme = 'auto', variant = 'inline', ...props }) => {
+    const codeChildren = renderCodeChildren(code, children, language);
+    if (variant === 'block') {
+        return (_jsxs("figure", { className: composeClassName('ui-code ui-code--block', 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 (_jsx("code", { className: composeClassName('ui-code ui-code--inline', className), "data-code-theme": theme, "data-language": language, ...props, children: code ?? 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`;
+    const [open, setOpen] = useState(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 selectOption = (option) => {
+        if (valueProp === undefined) {
+            setValue(option);
+        }
+        setOpen(false);
+    };
+    return (_jsxs("div", { className: composeClassName('ui-combobox', wrapperClassName), "data-ui-combobox": true, onBlur: event => {
+            const nextTarget = event.relatedTarget;
+            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 => {
+                    if (valueProp === undefined) {
+                        setValue(event.currentTarget.value);
+                    }
+                    setOpen(true);
+                    onChange?.(event);
+                }, onFocus: event => {
+                    setOpen(true);
+                    onFocus?.(event);
+                }, onKeyDown: event => {
+                    if (event.key === 'Escape') {
+                        setOpen(false);
+                    }
+                    if (event.key === 'Enter' && visibleOptions[0]) {
+                        event.preventDefault();
+                        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))) })] }));
+};
+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 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 }));
+const formatDatePickerDisplayValue = (value, placeholder) => {
+    if (!value || !/^\d{4}-\d{2}-\d{2}$/.test(value))
+        return placeholder;
+    const date = new Date(`${value}T00:00:00.000Z`);
+    if (Number.isNaN(date.getTime()))
+        return placeholder;
+    return new Intl.DateTimeFormat(undefined, {
+        day: 'numeric',
+        month: 'short',
+        timeZone: 'UTC',
+        year: 'numeric'
+    }).format(date);
+};
+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 }) => {
+    const generatedId = useId();
+    const datePickerId = id ?? generatedId;
+    const triggerId = `${datePickerId}-trigger`;
+    const popoverId = `${datePickerId}-popover`;
+    const rootRef = useRef(null);
+    const inputRef = useRef(null);
+    const triggerRef = useRef(null);
+    const [internalValue, setInternalValue] = useState(defaultValue ?? '');
+    const [open, setOpen] = useState(false);
+    const selectedValue = value ?? internalValue;
+    const hasSelectedValue = selectedValue !== '';
+    const placeholderText = placeholder ?? 'Choose a date';
+    const maxStr = stringifyDatePickerConstraint(max);
+    const minStr = stringifyDatePickerConstraint(min);
+    const accessibleLabel = props['aria-label'];
+    useEffect(() => {
+        if (!open)
+            return;
+        const handlePointerDown = (event) => {
+            if (event.target instanceof Node && !rootRef.current?.contains(event.target))
+                setOpen(false);
+        };
+        const handleKeyDown = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            setOpen(false);
+            triggerRef.current?.focus();
+        };
+        document.addEventListener('mousedown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [open]);
+    const selectDate = (nextValue) => {
+        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 }));
+        }
+        setOpen(false);
+        globalThis.setTimeout(() => triggerRef.current?.focus());
+    };
+    return (_jsxs("div", { className: composeClassName('ui-date-picker-field', glass && 'ui-date-picker-field--glass', glass === 'subtle' && 'ui-glass-subtle', glass === 'strong' && 'ui-glass-strong', className), "data-placeholder": hasSelectedValue ? undefined : 'true', "data-ui-date-picker": true, "data-ui-glass-track": glass ? true : undefined, ref: rootRef, children: [_jsx("input", { "aria-hidden": "true", className: "ui-date-picker ui-date-picker__native", "data-ui-date-picker-native": true, "data-ui-enhanced": "true", disabled: disabled, id: datePickerId, max: max, min: min, name: name, onChange: event => {
+                    if (value === undefined)
+                        setInternalValue(event.currentTarget.value);
+                    onChange?.(event);
+                }, onInvalid: event => {
+                    event.preventDefault();
+                    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 => {
+                            if (event.key !== 'ArrowDown')
+                                return;
+                            event.preventDefault();
+                            setOpen(true);
+                        }, ref: triggerRef, type: "button", children: [_jsx("span", { "data-ui-date-picker-value": true, children: formatDatePickerDisplayValue(selectedValue, placeholderText) }), _jsx("svg", { "aria-hidden": "true", className: "ui-date-picker__icon", fill: "none", viewBox: "0 0 24 24", children: _jsx("path", { d: "M7 2v3M17 2v3M3.5 9h17M5 4h14a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" }) })] }), _jsx("div", { "aria-label": "Choose date", className: "ui-date-picker__popover", "data-state": open ? 'open' : 'closed', "data-ui-date-picker-popover": true, hidden: !open, id: popoverId, role: "dialog", children: _jsx(Calendar, { disabled: disabled, max: maxStr, min: minStr, onValueChange: selectDate, value: selectedValue }) })] })] }));
+};
+const setDateRangeConstraint = (input, property, value) => {
+    if (value)
+        input[property] = value;
+    else
+        input.removeAttribute(property);
+};
+const getDateRangeState = (start, end) => {
+    if (!start)
+        return 'empty';
+    return end ? 'complete' : 'selecting-end';
+};
+const syncDateRangePickerElement = (root) => {
+    const inputs = [...root.querySelectorAll('[data-ui-date-picker-native]')];
+    const start = inputs[0];
+    const end = inputs.at(-1);
+    if (!(start && end) || start === end)
+        return {};
+    const datePickers = root.querySelectorAll('[data-ui-date-picker]');
+    datePickers[0]?.setAttribute('data-range-part', 'start');
+    datePickers[datePickers.length - 1]?.setAttribute('data-range-part', 'end');
+    setDateRangeConstraint(end, 'min', start.value);
+    setDateRangeConstraint(start, 'max', end.value);
+    root.dataset.rangeState = getDateRangeState(start.value, end.value);
+    const range = {};
+    if (end.value)
+        range.end = end.value;
+    if (start.value)
+        range.start = start.value;
+    return range;
+};
+export const DateRangePicker = ({ className, onInput, onRangeChange, ...props }) => {
+    const rootRef = useRef(null);
+    useEffect(() => {
+        if (rootRef.current)
+            syncDateRangePickerElement(rootRef.current);
+    });
+    return (_jsx("div", { className: composeClassName('ui-date-range-picker', className), "data-ui-date-range-picker": true, onInput: event => {
+            onInput?.(event);
+            onRangeChange?.(syncDateRangePickerElement(event.currentTarget));
+        }, ref: rootRef, ...props }));
+};
+export const Dialog = ({ className, defaultOpen, glass = false, onClick, onClose, onOpenChange, open, surface = 'default', ...props }) => {
+    const dialog = useDialog({ defaultOpen, onOpenChange, open });
+    return (_jsx("dialog", { ...dialog.dialogProps, ...props, className: composeClassName('ui-dialog', glassSurfaceClass('ui-dialog', surface, glass), className), "data-surface": resolveSurface(surface, 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 }) => {
+    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 }) }));
+};
+export const DropdownMenuTrigger = ({ onClick, onKeyDown, ...props }) => {
+    const menu = requireContext(useContext(DropdownMenuContext), 'DropdownMenuTrigger');
+    return (_jsx("button", { ...menu.triggerProps, ...props, onClick: composeHandlers(onClick, menu.triggerProps.onClick), onKeyDown: composeHandlers(onKeyDown, menu.triggerProps.onKeyDown), type: props.type ?? 'button' }));
+};
+export const DropdownMenuContent = ({ className, onKeyDown, ...props }) => {
+    const menu = requireContext(useContext(DropdownMenuContext), 'DropdownMenuContent');
+    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 }) => {
+    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 }));
+};
+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 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 });
+    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, size = 'default', type = 'text', ...props }) => (_jsx("input", { className: composeClassName('ui-input', size === 'sm' && 'ui-input--sm', size === 'lg' && 'ui-input--lg', className), type: type, ...props }));
+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 }) => {
+    const otp = useInputOTP({
+        defaultValue: toInputValue(defaultValue),
+        disabled,
+        inputMode,
+        invalid: ariaInvalid === true || ariaInvalid === 'true',
+        length,
+        pattern,
+        value: toInputValue(value)
+    });
+    return (_jsxs("div", { ...otp.rootProps, className: composeClassName(otp.rootProps.className, className), children: [_jsx("input", { ...otp.getInputProps({
+                    ...props,
+                    'aria-invalid': ariaInvalid,
+                    className: inputClassName,
+                    disabled,
+                    inputMode,
+                    maxLength,
+                    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 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 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)))] }));
+};
+const phoneInputSizeModifiers = (size) => {
+    if (size === 'sm') {
+        return { inputClass: 'ui-input--sm', selectClass: 'ui-select--sm' };
+    }
+    if (size === 'lg') {
+        return { inputClass: 'ui-input--lg', selectClass: 'ui-select--lg' };
+    }
+    return { inputClass: undefined, selectClass: undefined };
+};
+export const PhoneInput = ({ className, countries = emptyOptions, countryLabel = 'Country code', countryName = 'country', defaultCountryValue, defaultValue, name = 'phone', placeholder = 'Phone number', size = 'default', ...props }) => {
+    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', ...props }) => (_jsx("nav", { className: composeClassName('ui-navigation-menu', glassSurfaceClass('ui-navigation-menu', surface, glass), className), "data-surface": resolveSurface(surface, glass), "data-ui-navigation-menu": true, ...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 }) => {
+    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 }) }));
+};
+export const PopoverTrigger = ({ onClick, onKeyDown, ...props }) => {
+    const popover = requireContext(useContext(PopoverContext), 'PopoverTrigger');
+    return (_jsx("button", { ...popover.triggerProps, ...props, onClick: composeHandlers(onClick, popover.triggerProps.onClick), onKeyDown: composeHandlers(onKeyDown, popover.triggerProps.onKeyDown), type: props.type ?? 'button' }));
+};
+export const PopoverPanel = ({ onKeyDown, ...props }) => {
+    const popover = requireContext(useContext(PopoverContext), 'PopoverPanel');
+    return (_jsx("div", { ...popover.panelProps, ...props, onKeyDown: composeHandlers(onKeyDown, popover.panelProps.onKeyDown) }));
+};
+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}%` } }) }));
+};
+export const RadioGroup = ({ className, ...props }) => (_jsx("fieldset", { className: composeClassName('ui-radio-group', className), "data-ui-radio-group": true, ...props }));
+const renderResizablePane = (child, index, panelProps) => {
+    if (isValidElement(child)) {
+        const childProps = child.props;
+        return cloneElement(child, {
+            ...panelProps,
+            className: composeClassName(childProps.className, panelProps.className),
+            style: {
+                ...childProps.style,
+                ...panelProps.style
+            }
+        });
+    }
+    return _jsx("div", { ...panelProps, children: child });
+};
+export const Resizable = ({ children, className, defaultSizes, direction = 'horizontal', maxSize, minSize, resetOnDoubleClick = true, ...props }) => {
+    const panes = Children.toArray(children);
+    const resizable = useResizable({
+        defaultSizes,
+        direction,
+        maxSize,
+        minSize,
+        panelCount: panes.length,
+        resetOnDoubleClick
+    });
+    return (_jsx("div", { ...props, ...resizable.rootProps, className: composeClassName(resizable.rootProps.className, className), children: panes.map((child, index) => (_jsxs(Fragment, { children: [renderResizablePane(child, index, resizable.getPanelProps(index)), index < panes.length - 1 && (_jsx("button", { ...resizable.getHandleProps(index), type: "button" }))] }, index))) }));
+};
+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 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 }));
+const getSelectSizeClass = (size) => {
+    if (size === 'sm')
+        return 'ui-select--sm';
+    if (size === 'lg')
+        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 }) => {
+    const select = useSelect({
+        defaultValue,
+        disabled,
+        id,
+        name,
+        onValueChange,
+        options,
+        placeholder,
+        required,
+        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 => {
+                            const optionProps = select.getOptionProps(option);
+                            return (_jsx("button", { ...optionProps, type: optionProps.type ?? 'button', children: option.label }, option.value));
+                        }) })] })] }));
+};
+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', ...props }) => (_jsx("aside", { className: composeClassName('ui-sidebar', glassSurfaceClass('ui-sidebar', surface, glass), className), "data-surface": resolveSurface(surface, glass), ...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 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 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 }) }));
+};
+export const TabsList = ({ ...props }) => {
+    const tabs = requireContext(useContext(TabsContext), 'TabsList');
+    return _jsx("div", { ...tabs.listProps, ...props });
+};
+export const TabsTrigger = ({ onClick, onKeyDown, value, ...props }) => {
+    const tabs = requireContext(useContext(TabsContext), 'TabsTrigger');
+    return (_jsx("button", { ...tabs.getTriggerProps(value, props), onClick: composeHandlers(onClick, tabs.getTriggerProps(value).onClick), onKeyDown: composeHandlers(onKeyDown, tabs.getTriggerProps(value).onKeyDown), type: props.type ?? 'button' }));
+};
+export const TabsPanel = ({ value, ...props }) => {
+    const tabs = requireContext(useContext(TabsContext), 'TabsPanel');
+    return _jsx("div", { ...tabs.getPanelProps(value, props) });
+};
+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 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 Toggle = ({ className, pressed = false, type = 'button', ...props }) => (_jsx("button", { "aria-pressed": pressed, className: composeClassName('ui-toggle', pressed && 'ui-toggle--pressed', className), "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 }) => {
+    const tooltip = useTooltip({ defaultOpen, delay, onOpenChange, open });
+    return (_jsx(TooltipContext.Provider, { value: tooltip, children: _jsx("span", { ...tooltip.rootProps, ...props, className: composeClassName('ui-tooltip', className), onKeyDown: composeHandlers(onKeyDown, tooltip.rootProps.onKeyDown), onMouseEnter: composeHandlers(onMouseEnter, tooltip.rootProps.onMouseEnter), onMouseLeave: composeHandlers(onMouseLeave, tooltip.rootProps.onMouseLeave), children: children }) }));
+};
+export const TooltipContent = ({ ...props }) => {
+    const tooltip = requireContext(useContext(TooltipContext), 'TooltipContent');
+    return _jsx("span", { ...tooltip.tooltipProps, ...props });
+};
+export const Tree = ({ className, glass = false, role = 'tree', ...props }) => (_jsx("div", { className: composeClassName('ui-tree', glassClass('ui-tree', glass), className), role: role, ...props }));
+export const TreeGrid = ({ className, glass = false, role = 'treegrid', ...props }) => (_jsx("div", { className: composeClassName('ui-tree-grid', glassClass('ui-tree-grid', glass), className), role: role, ...props }));
+export const Typography = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-typography', className), ...props }));
+export const VirtualList = ({ className, glass = false, itemSize, overscan, ...props }) => (_jsx("div", { className: composeClassName('ui-virtual-list', glassClass('ui-virtual-list', glass), className), "data-ui-item-size": itemSize, "data-ui-overscan": overscan, "data-ui-virtual-list": true, ...props }));
+export const BackToTop = ({ className, type = 'button', ...props }) => (_jsx("button", { className: composeClassName('ui-back-to-top', className), type: type, ...props }));
+export const Callout = ({ className, ...props }) => (_jsx("aside", { className: composeClassName('ui-callout', className), ...props }));
+export const Eyebrow = ({ className, ...props }) => (_jsx("p", { className: composeClassName('ui-eyebrow', className), ...props }));
+export const FloatingBadge = ({ className, ...props }) => (_jsx("span", { className: composeClassName('ui-floating-badge', className), ...props }));
+export const FormattedDate = ({ className, ...props }) => (_jsx("time", { className: composeClassName('ui-formatted-date', className), ...props }));
+export const Image = ({ as, className, invertOnDark = false, loading, ...props }) => {
+    const Component = as ?? 'img';
+    const resolvedLoading = loading ?? (as ? undefined : 'lazy');
+    return createElement(Component, {
+        ...props,
+        className: composeClassName('ui-image', invertOnDark && 'ui-image--invert-dark', className),
+        ...(resolvedLoading ? { loading: resolvedLoading } : {})
+    });
+};
+export const Link = ({ className, ...props }) => (_jsx("a", { className: composeClassName('ui-link', className), ...props }));
+export const Pill = ({ className, count, children, ...props }) => (_jsxs("span", { className: composeClassName('ui-pill', className), ...props, children: [children, count !== undefined && _jsx("span", { className: "ui-pill__count", children: count })] }));
+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 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 parseMotionDuration = (value) => {
+    const parsedDuration = Number.parseFloat(value);
+    if (!Number.isFinite(parsedDuration))
+        return 300;
+    return value.endsWith('ms') ? parsedDuration : parsedDuration * 1000;
+};
+export const ScrollReveal = ({ animation = 'fade', className, delay = 0, duration = 'slow', once = true, style, threshold = 0.15, ...props }) => {
+    const rootRef = useRef(null);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        root.dataset.uiScrollRevealBound = 'true';
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches
+            || typeof IntersectionObserver === 'undefined') {
+            root.classList.add('is-revealed');
+            return;
+        }
+        const observer = new IntersectionObserver(([entry]) => {
+            if (!entry)
+                return;
+            root.classList.toggle('is-revealed', entry.isIntersecting);
+            if (entry.isIntersecting && once)
+                observer.disconnect();
+        }, { threshold: Math.min(1, Math.max(0, threshold)) });
+        observer.observe(root);
+        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 }));
+};
+export const RevealGroup = ({ animation = 'slide-up', className, delay = 0, duration = 'slow', once = true, stagger = 80, style, threshold = 0.15, ...props }) => {
+    const rootRef = useRef(null);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        root.dataset.uiScrollRevealBound = 'true';
+        for (const [index, child] of [...root.children].entries()) {
+            if (child instanceof HTMLElement) {
+                child.style.setProperty('--ui-reveal-index', String(index));
+            }
+        }
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches
+            || typeof IntersectionObserver === 'undefined') {
+            root.classList.add('is-revealed');
+            return;
+        }
+        const observer = new IntersectionObserver(([entry]) => {
+            if (!entry)
+                return;
+            root.classList.toggle('is-revealed', entry.isIntersecting);
+            if (entry.isIntersecting && once)
+                observer.disconnect();
+        }, { threshold: Math.min(1, Math.max(0, threshold)) });
+        observer.observe(root);
+        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,
+            '--ui-reveal-delay': `${Math.max(0, delay)}ms`,
+            '--ui-reveal-stagger': `${Math.max(0, stagger)}ms`
+        }, ...props }));
+};
+export const AnimatedNumber = ({ className, decimals = 0, duration = 'slow', from = 0, locale, prefix = '', suffix = '', value, ...props }) => {
+    const outputRef = useRef(null);
+    const safeDecimals = Math.max(0, Math.min(20, Math.floor(decimals)));
+    const formatter = useMemo(() => new Intl.NumberFormat(locale, {
+        maximumFractionDigits: safeDecimals,
+        minimumFractionDigits: safeDecimals
+    }), [locale, safeDecimals]);
+    const formattedValue = `${prefix}${formatter.format(value)}${suffix}`;
+    useEffect(() => {
+        const output = outputRef.current;
+        if (!output)
+            return;
+        const format = (current) => `${prefix}${formatter.format(current)}${suffix}`;
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches
+            || typeof IntersectionObserver === 'undefined') {
+            output.textContent = format(value);
+            return;
+        }
+        output.textContent = format(from);
+        const root = output.parentElement;
+        if (!root)
+            return;
+        const observer = new IntersectionObserver(entries => {
+            if (!entries.some(entry => entry.isIntersecting))
+                return;
+            observer.disconnect();
+            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));
+                if (progress < 1) {
+                    requestAnimationFrame(update);
+                }
+                else {
+                    output.textContent = format(value);
+                }
+            };
+            requestAnimationFrame(update);
+        }, { threshold: 0.15 });
+        observer.observe(root);
+        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 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))) }));
+};
+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, shape = 'default', variant = 'primary', ...props }) => {
+    const variantClass = variant === 'inline'
+        ? 'ui-button ui-button--inline'
+        : `ui-button ui-button--${variant} min-h-11 rounded-full border`;
+    const shapeClass = shape === 'icon' && variant !== 'inline' ? 'ui-button-link--icon' : undefined;
+    return (_jsx("a", { className: composeClassName('ui-button-link group inline-flex cursor-pointer items-center justify-center gap-2 text-sm font-semibold tracking-[0.01em]', variantClass, shapeClass, className), ...props }));
+};
+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" }) }));
+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) => {
+            let state = 'upcoming';
+            if (index < currentStep) {
+                state = 'complete';
+            }
+            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));
+        }), children] }));
+export const FileUpload = ({ children, className, hint, id, inputClassName, label = 'Choose a file or drag it here', onChange, ...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] ?? '';
+    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 })] }));
+};
+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] }));
+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 = [];
+export const Descriptions = ({ children, className, columns = 1, items = emptyDescriptionsItems, style, ...props }) => (_jsxs("dl", { className: composeClassName('ui-descriptions', className), "data-columns": columns, style: { ['--ui-descriptions-columns']: columns, ...style }, ...props, children: [items.map((item, index) => (_jsxs("div", { className: "ui-descriptions__item", children: [_jsx("dt", { className: "ui-descriptions__term", children: item.label }), _jsx("dd", { className: "ui-descriptions__detail", children: item.value })] }, index))), children] }));
+export const Popconfirm = ({ cancelLabel = 'Cancel', children, className, confirmLabel = 'Confirm', title = 'Are you sure?', ...props }) => (_jsxs("div", { className: composeClassName('ui-popover ui-popconfirm', className), "data-surface": "default", "data-ui-popconfirm": true, "data-ui-popover": true, ...props, children: [_jsx("span", { "aria-expanded": "false", "aria-haspopup": "dialog", className: "ui-popconfirm__trigger", "data-ui-trigger": true, children: children }), _jsxs("div", { className: "ui-popover__panel ui-popconfirm__panel", "data-ui-panel": true, hidden: true, role: "dialog", children: [_jsx("p", { className: "ui-popconfirm__message", children: title }), _jsxs("div", { className: "ui-popconfirm__actions", children: [_jsx("button", { className: "ui-button ui-button--ghost ui-button--sm", "data-ui-popconfirm-cancel": true, type: "button", children: cancelLabel }), _jsx("button", { className: "ui-button ui-button--destructive ui-button--sm", "data-ui-popconfirm-confirm": true, type: "button", children: confirmLabel })] })] })] }));
+const emptyTransferItems = [];
+const renderTransferItems = (items) => items.map(item => (_jsx("li", { className: "ui-transfer__item", children: _jsxs("label", { className: "ui-transfer__option", children: [_jsx("input", { className: "ui-checkbox", "data-ui-transfer-item": true, type: "checkbox", value: item.key }), _jsx("span", { children: item.label })] }) }, item.key)));
+export const Transfer = ({ className, items = emptyTransferItems, name, sourceTitle = 'Available', targetItems = emptyTransferItems, targetTitle = 'Selected', ...props }) => (_jsxs("div", { className: composeClassName('ui-transfer', className), "data-ui-transfer": true, "data-ui-transfer-name": name, ...props, children: [_jsxs("div", { className: "ui-transfer__panel", children: [_jsx("p", { className: "ui-transfer__title", children: sourceTitle }), _jsx("ul", { className: "ui-transfer__list", "data-side": "source", "data-ui-transfer-list": true, children: renderTransferItems(items) })] }), _jsxs("div", { className: "ui-transfer__controls", children: [_jsx("button", { "aria-label": `Move to ${targetTitle}`, className: "ui-button ui-button--outline ui-button--icon", "data-ui-transfer-move": "target", type: "button", children: _jsx(Icon, { name: "chevron-right" }) }), _jsx("button", { "aria-label": `Move to ${sourceTitle}`, className: "ui-button ui-button--outline ui-button--icon", "data-ui-transfer-move": "source", type: "button", children: _jsx(Icon, { name: "chevron-left" }) })] }), _jsxs("div", { className: "ui-transfer__panel", children: [_jsx("p", { className: "ui-transfer__title", children: targetTitle }), _jsx("ul", { className: "ui-transfer__list", "data-side": "target", "data-ui-transfer-list": true, children: renderTransferItems(targetItems) })] })] }));
+const buildCascaderColumns = (options, idPrefix) => {
+    const columns = [];
+    let count = 0;
+    const build = (items, root) => {
+        count += 1;
+        const id = `${idPrefix}-column-${count}`;
+        const rendered = items.map(item => ({
+            label: item.label,
+            value: item.value
+        }));
+        columns.push({ id, options: rendered, root });
+        for (const [index, item] of items.entries()) {
+            const renderedOption = rendered[index];
+            if (item.children && item.children.length > 0 && renderedOption) {
+                renderedOption.nextId = build(item.children, false);
+            }
+        }
+        return id;
+    };
+    if (options.length > 0)
+        build(options, true);
+    return columns;
+};
+const emptyCascaderOptions = [];
+export const Cascader = ({ children, className, id, name, options = emptyCascaderOptions, placeholder = 'Select…', ...props }) => {
+    const generatedId = useId().replaceAll(':', '');
+    const cascaderId = id ?? `ui-cascader-${generatedId}`;
+    const panelId = `${cascaderId}-panel`;
+    const columns = buildCascaderColumns(options, cascaderId);
+    return (_jsxs("div", { className: composeClassName('ui-cascader', className), "data-surface": "default", "data-ui-cascader": true, "data-ui-popover": true, id: id, ...props, children: [_jsx("button", { "aria-controls": panelId, "aria-expanded": "false", "aria-haspopup": "listbox", className: "ui-select ui-select__trigger ui-cascader__trigger", "data-ui-trigger": true, role: "combobox", type: "button", children: _jsx("span", { "data-ui-cascader-placeholder": placeholder, "data-ui-cascader-value": true, children: placeholder }) }), _jsxs("div", { className: "ui-cascader__panel", "data-ui-panel": true, hidden: true, id: panelId, children: [columns.map(column => (_jsx("ol", { "aria-label": column.root ? 'Options' : 'Sub-options', className: "ui-cascader__column", hidden: !column.root, id: column.id, role: "listbox", children: column.options.map(option => (_jsx("li", { role: "presentation", children: _jsxs("button", { "aria-selected": "false", className: "ui-cascader__option", "data-ui-cascader-next": option.nextId ? `#${option.nextId}` : undefined, "data-ui-cascader-option": true, "data-value": option.value, role: "option", type: "button", children: [_jsx("span", { children: option.label }), option.nextId && _jsx("span", { "aria-hidden": "true", children: "\u203A" })] }) }, option.value))) }, column.id))), children] }), name && _jsx("input", { "data-ui-cascader-input": true, name: name, type: "hidden" })] }));
+};
+const flattenTreeSelect = (nodes, depth = 0, acc = []) => {
+    for (const node of nodes) {
+        acc.push({ depth, label: node.label, value: node.value });
+        if (node.children && node.children.length > 0)
+            flattenTreeSelect(node.children, depth + 1, acc);
+    }
+    return 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 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 })] }));
+};
+export const Watermark = ({ children, className, content, gap = 120, rotate = -22, style, text = 'Confidential', ...props }) => {
+    const watermarkText = content ?? text;
+    const tileSize = Math.max(1, gap);
+    const watermarkXmlEntities = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&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}">`,
+        `<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">',
+        `${escapedWatermarkText}</text></svg>`
+    ].join('');
+    const watermarkImage = `url("data:image/svg+xml,${encodeURIComponent(watermarkSvg)}")`;
+    return (_jsxs("div", { className: composeClassName('ui-watermark', className), "data-ui-watermark": true, style: {
+            ['--ui-watermark-gap']: `${tileSize}px`,
+            ['--ui-watermark-image']: watermarkImage,
+            ...style
+        }, ...props, children: [children, _jsx("div", { "aria-hidden": "true", className: "ui-watermark__overlay", "data-text": watermarkText })] }));
+};
+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 }));
+};
+const emptySpeedDialActions = [];
+const speedDialNavigationKeys = ['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home'];
+const getSpeedDialNavigationIndex = (key, currentIndex, itemCount) => {
+    if (key === 'Home')
+        return 0;
+    if (key === 'End')
+        return itemCount - 1;
+    if (key === 'ArrowDown' || key === 'ArrowRight')
+        return (currentIndex + 1) % itemCount;
+    return (currentIndex - 1 + itemCount) % itemCount;
+};
+export const SpeedDial = ({ actions = emptySpeedDialActions, children, className, defaultOpen = false, direction = 'up', label = 'Actions', onBlur, ...props }) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const menuRef = useRef(null);
+    const triggerRef = useRef(null);
+    const close = (restoreFocus = false) => {
+        setIsOpen(false);
+        if (restoreFocus)
+            triggerRef.current?.focus();
+    };
+    const focusAction = (position) => {
+        setIsOpen(true);
+        requestAnimationFrame(() => {
+            const items = menuRef.current?.querySelectorAll('[role="menuitem"], button:not([disabled]), a[href]');
+            const target = position === 'first' ? items?.[0] : items?.[items.length - 1];
+            target?.focus();
+        });
+    };
+    return (_jsxs("div", { className: composeClassName('ui-speed-dial', `ui-speed-dial--${direction}`, className), ...props, "data-direction": direction, "data-state": isOpen ? 'open' : 'closed', "data-ui-bound": "true", "data-ui-speed-dial": true, onBlur: event => {
+            onBlur?.(event);
+            if (!event.currentTarget.contains(event.relatedTarget))
+                close();
+        }, children: [_jsx("button", { "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": label, className: "ui-speed-dial__trigger", "data-ui-speed-dial-trigger": true, onClick: () => {
+                    setIsOpen(open => !open);
+                }, onKeyDown: event => {
+                    if (event.key === 'Escape')
+                        close();
+                    if (['ArrowDown', 'ArrowRight'].includes(event.key)) {
+                        event.preventDefault();
+                        focusAction('first');
+                        return;
+                    }
+                    if (['ArrowLeft', 'ArrowUp'].includes(event.key)) {
+                        event.preventDefault();
+                        focusAction('last');
+                    }
+                }, ref: triggerRef, type: "button", children: _jsx("span", { "aria-hidden": "true", className: "ui-speed-dial__icon" }) }), _jsxs("menu", { "aria-label": label, className: "ui-speed-dial__actions", "data-ui-speed-dial-actions": true, onClick: event => {
+                    if (event.target.closest('[role="menuitem"], button, a'))
+                        close();
+                }, onKeyDown: event => {
+                    const items = [...(menuRef.current?.querySelectorAll('[role="menuitem"], button:not([disabled]), a[href]') ?? [])];
+                    if (event.key === 'Escape') {
+                        event.preventDefault();
+                        close(true);
+                        return;
+                    }
+                    if (!speedDialNavigationKeys.includes(event.key))
+                        return;
+                    const currentIndex = items.indexOf(document.activeElement);
+                    const targetIndex = getSpeedDialNavigationIndex(event.key, currentIndex, items.length);
+                    event.preventDefault();
+                    items[targetIndex]?.focus();
+                }, ref: menuRef, role: "menu", children: [actions.map((action, index) => (_jsx("li", { role: "presentation", style: { '--ui-speed-dial-index': index }, children: _jsxs("button", { "aria-label": action.label, className: "ui-speed-dial__action", "data-icon": action.icon, "data-value": action.value ?? action.label, role: "menuitem", type: "button", children: [action.icon && (_jsx("span", { "aria-hidden": "true", className: "ui-speed-dial__action-icon ui-icon", children: renderLucideIcon(action.icon, `ui-icon__svg lucide-${action.icon}`) })), _jsx("span", { className: "ui-speed-dial__action-label", children: action.label })] }) }, action.value ?? action.label))), children] })] }));
+};