@santi020k/lumen-react 0.4.0 → 1.0.0

package/dist/hooks.js

@@ -1,8 +1,18 @@
-/* eslint-disable @eslint-react/no-context-provider, @eslint-react/no-use-context, react-refresh/only-export-components -- The package intentionally keeps public hooks, explicit context providers, and small helper components together in one library module. */
+/* eslint-disable @eslint-react/no-context-provider, @eslint-react/no-use-context */
+/* eslint-disable react-refresh/only-export-components */
+/* Public hooks, explicit context providers, and their small helpers intentionally share this module. */
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { coerceThemeBuilderExportFormat, composeClassName, createThemeBuilderTokens, exportThemeBuilderValue, getLumenRichTextShortcut, isLumenRichTextToggleCommand } from '@santi020k/lumen-core';
 import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { coerceThemeBuilderExportFormat, composeClassName, createThemeBuilderTokens, exportThemeBuilderValue, getLumenRichTextShortcut, isLumenRichTextToggleCommand } from '@santi020k/lumen-core';
+const setRefValue = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref) {
+        ref.current = value;
+    }
+};
 const defaultToastDuration = 5000;
 const defaultToastMax = 5;
 const closeDelay = 240;
@@ -28,8 +38,7 @@ const isElementVisible = (element) => {
 const getFocusable = (root) => {
     if (!root)
         return [];
-    return [...root.querySelectorAll(focusableSelector)]
-        .filter(element => !element.hasAttribute('hidden') && isElementVisible(element));
+    return [...root.querySelectorAll(focusableSelector)].filter(element => !element.hasAttribute('hidden') && isElementVisible(element));
 };
 const getLoopedIndex = (key, currentIndex, itemCount, forwardKeys) => {
     const lastIndex = itemCount - 1;
@@ -49,10 +58,10 @@ const useSafeId = (prefix, id) => {
 const useControllableState = ({ defaultValue, onChange, value }) => {
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
     const currentValue = value ?? uncontrolledValue;
-    const setValue = useCallback((next) => {
-        const resolvedValue = typeof next === 'function'
-            ? next(currentValue)
-            : next;
+    const setValue = useCallback(next => {
+        const resolvedValue = typeof next === 'function' ?
+            next(currentValue) :
+            next;
         if (value === undefined) {
             setUncontrolledValue(resolvedValue);
         }
@@ -107,17 +116,25 @@ const useDisclosureController = (options, hasPopup) => {
         onChange: options.onOpenChange,
         value: options.open
     });
-    const close = useCallback(() => { setOpen(false); }, [setOpen]);
-    const toggle = useCallback(() => { setOpen(current => !current); }, [setOpen]);
+    const close = useCallback(() => {
+        setOpen(false);
+    }, [setOpen]);
+    const toggle = useCallback(() => {
+        setOpen(current => !current);
+    }, [setOpen]);
     useOutsideClose(open, [rootRef, triggerRef, panelRef], close);
     const triggerProps = {
         'aria-controls': panelId,
         'aria-expanded': open,
         'aria-haspopup': hasPopup,
         'data-ui-trigger': true,
-        onClick: () => { toggle(); },
-        onKeyDown: (event) => {
-            if (event.key !== 'ArrowDown' && event.key !== 'Enter' && event.key !== ' ')
+        onClick: () => {
+            toggle();
+        },
+        onKeyDown: event => {
+            if (event.key !== 'ArrowDown' &&
+                event.key !== 'Enter' &&
+                event.key !== ' ')
                 return;
             event.preventDefault();
             setOpen(true);
@@ -130,7 +147,7 @@ const useDisclosureController = (options, hasPopup) => {
         'data-state': open ? 'open' : 'closed',
         hidden: !open,
         id: panelId,
-        onKeyDown: (event) => {
+        onKeyDown: event => {
             if (event.key === 'Escape') {
                 event.preventDefault();
                 close();
@@ -145,7 +162,9 @@ const useDisclosureController = (options, hasPopup) => {
                 return;
             event.preventDefault();
             const currentIndex = items.indexOf(document.activeElement);
-            const nextItem = items[getLoopedIndex(event.key, Math.max(0, currentIndex), items.length, ['ArrowDown'])];
+            const nextItem = items[getLoopedIndex(event.key, Math.max(0, currentIndex), items.length, [
+                'ArrowDown'
+            ])];
             nextItem?.focus();
         },
         ref: panelRef
@@ -173,7 +192,9 @@ export const useDialog = (options = {}) => {
         onChange: options.onOpenChange,
         value: options.open
     });
-    const close = useCallback(() => { setOpen(false); }, [setOpen]);
+    const close = useCallback(() => {
+        setOpen(false);
+    }, [setOpen]);
     useEffect(() => {
         const dialog = dialogRef.current;
         if (!dialog)
@@ -196,7 +217,7 @@ export const useDialog = (options = {}) => {
         'aria-modal': true,
         'data-ui-alert-dialog': options.alert ? true : undefined,
         'data-ui-dialog': options.alert ? undefined : true,
-        onClick: (event) => {
+        onClick: event => {
             if (event.target === dialogRef.current && !options.alert) {
                 close();
             }
@@ -210,7 +231,9 @@ export const useDialog = (options = {}) => {
     };
     const triggerProps = {
         'aria-haspopup': 'dialog',
-        onClick: () => { setOpen(true); },
+        onClick: () => {
+            setOpen(true);
+        },
         ref: triggerRef,
         type: 'button'
     };
@@ -240,7 +263,9 @@ export const useContextMenu = ({ defaultOpen = false, id, onOpenChange, open: co
         onChange: onOpenChange,
         value: controlledOpen
     });
-    const close = useCallback(() => { setOpen(false); }, [setOpen]);
+    const close = useCallback(() => {
+        setOpen(false);
+    }, [setOpen]);
     const openAt = useCallback((x, y) => {
         const rect = menuRef.current?.getBoundingClientRect();
         setPosition(getContextMenuPosition(x, y, rect));
@@ -256,7 +281,8 @@ export const useContextMenu = ({ defaultOpen = false, id, onOpenChange, open: co
             openAt(event.clientX, event.clientY);
         },
         onKeyDown: event => {
-            if (event.key !== 'ContextMenu' && !(event.shiftKey && event.key === 'F10'))
+            if (event.key !== 'ContextMenu' &&
+                !(event.shiftKey && event.key === 'F10'))
                 return;
             event.preventDefault();
             const rect = event.currentTarget.getBoundingClientRect();
@@ -271,7 +297,8 @@ export const useContextMenu = ({ defaultOpen = false, id, onOpenChange, open: co
         hidden: !open,
         id: menuId,
         onClick: event => {
-            if (event.target instanceof HTMLElement && event.target.closest('[role="menuitem"]')) {
+            if (event.target instanceof HTMLElement &&
+                event.target.closest('[role="menuitem"]')) {
                 close();
             }
         },
@@ -289,7 +316,9 @@ export const useContextMenu = ({ defaultOpen = false, id, onOpenChange, open: co
                 return;
             event.preventDefault();
             const activeElement = typeof document === 'undefined' ? null : document.activeElement;
-            const currentIndex = activeElement instanceof HTMLElement ? items.indexOf(activeElement) : -1;
+            const currentIndex = activeElement instanceof HTMLElement ?
+                items.indexOf(activeElement) :
+                -1;
             items[getLoopedIndex(event.key, currentIndex, items.length, ['ArrowDown'])]?.focus();
         },
         ref: menuRef,
@@ -332,14 +361,16 @@ export const useTabs = ({ defaultValue = '', id, onValueChange, orientation = 'h
             'aria-controls': panelId,
             'aria-selected': selected,
             id: props.id ?? triggerId,
-            onClick: composeHandlers(props.onClick, () => { activate(triggerValue); }),
-            onKeyDown: composeHandlers(props.onKeyDown, (event) => {
+            onClick: composeHandlers(props.onClick, () => {
+                activate(triggerValue);
+            }),
+            onKeyDown: composeHandlers(props.onKeyDown, event => {
                 const keys = ['ArrowLeft', 'ArrowRight', 'Home', 'End'];
                 if (!keys.includes(event.key))
                     return;
-                const tabs = rootRef.current
-                    ? [...rootRef.current.querySelectorAll('[role="tab"]')]
-                    : [];
+                const tabs = rootRef.current ?
+                    [...rootRef.current.querySelectorAll('[role="tab"]')] :
+                    [];
                 if (!tabs.length)
                     return;
                 event.preventDefault();
@@ -385,7 +416,10 @@ export const useTabs = ({ defaultValue = '', id, onValueChange, orientation = 'h
     };
 };
 const normalizeOption = (option) => typeof option === 'string' ? { label: option, value: option } : option;
-const isPrintableKey = (event) => event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey;
+const isPrintableKey = (event) => (event.key.length === 1 &&
+    !event.altKey &&
+    !event.ctrlKey &&
+    !event.metaKey);
 /* eslint-disable complexity -- Select owns the native select, ARIA listbox props, and keyboard/typeahead behavior as one public hook contract. */
 export const useSelect = ({ defaultValue = '', disabled = false, id, name, onValueChange, options = [], placeholder, required = false, value } = {}) => {
     const rootRef = useRef(null);
@@ -405,8 +439,12 @@ export const useSelect = ({ defaultValue = '', disabled = false, id, name, onVal
     const selectedOption = normalizedOptions.find(option => option.value === selectedValue);
     const triggerText = selectedOption?.label ?? placeholder ?? 'Select an option';
     const hasSelection = Boolean(selectedOption && selectedValue !== '');
-    const close = useCallback(() => { setOpen(false); }, [setOpen]);
-    const openList = useCallback(() => { setOpen(true); }, [setOpen]);
+    const close = useCallback(() => {
+        setOpen(false);
+    }, [setOpen]);
+    const openList = useCallback(() => {
+        setOpen(true);
+    }, [setOpen]);
     useOutsideClose(open, [rootRef, triggerRef, listRef], close);
     useEffect(() => () => {
         if (typeaheadTimerRef.current) {
@@ -416,8 +454,10 @@ export const useSelect = ({ defaultValue = '', disabled = false, id, name, onVal
     const getEnabledItems = useCallback(() => {
         if (!listRef.current)
             return [];
-        return [...listRef.current.querySelectorAll('[data-ui-select-option]')]
-            .filter(item => !item.hasAttribute('disabled') && item.getAttribute('aria-disabled') !== 'true');
+        return [
+            ...listRef.current.querySelectorAll('[data-ui-select-option]')
+        ].filter(item => !item.hasAttribute('disabled') &&
+            item.getAttribute('aria-disabled') !== 'true');
     }, []);
     const focusOption = useCallback((key, currentItem) => {
         const items = getEnabledItems();
@@ -428,7 +468,9 @@ export const useSelect = ({ defaultValue = '', disabled = false, id, name, onVal
         if (!current)
             return;
         const currentIndex = items.indexOf(current);
-        const nextItem = items[getLoopedIndex(key, Math.max(0, currentIndex), items.length, ['ArrowDown'])];
+        const nextItem = items[getLoopedIndex(key, Math.max(0, currentIndex), items.length, [
+            'ArrowDown'
+        ])];
         nextItem?.focus();
     }, [getEnabledItems]);
     const focusTypeaheadOption = useCallback((currentItem) => {
@@ -442,7 +484,10 @@ export const useSelect = ({ defaultValue = '', disabled = false, id, name, onVal
             return;
         const currentIndex = items.indexOf(current);
         const startIndex = Math.max(0, currentIndex + 1);
-        const orderedItems = [...items.slice(startIndex), ...items.slice(0, startIndex)];
+        const orderedItems = [
+            ...items.slice(startIndex),
+            ...items.slice(0, startIndex)
+        ];
         const nextItem = orderedItems.find(item => item.textContent.trim().toLowerCase().startsWith(typeahead));
         nextItem?.focus();
     }, [getEnabledItems]);
@@ -484,7 +529,9 @@ export const useSelect = ({ defaultValue = '', disabled = false, id, name, onVal
         disabled,
         id: selectId,
         name,
-        onChange: event => { setSelectedValue(event.currentTarget.value); },
+        onChange: event => {
+            setSelectedValue(event.currentTarget.value);
+        },
         required,
         tabIndex: -1,
         value: selectedValue
@@ -500,7 +547,7 @@ export const useSelect = ({ defaultValue = '', disabled = false, id, name, onVal
         onClick: () => {
             setOpen(current => !current);
         },
-        onKeyDown: (event) => {
+        onKeyDown: event => {
             if (handleTypeahead(event))
                 return;
             if (event.key === 'Escape') {
@@ -539,8 +586,10 @@ export const useSelect = ({ defaultValue = '', disabled = false, id, name, onVal
         'data-ui-select-option': true,
         'data-value': option.value,
         disabled: option.disabled,
-        onClick: composeHandlers(props.onClick, () => { selectOption(option.value); }),
-        onKeyDown: composeHandlers(props.onKeyDown, (event) => {
+        onClick: composeHandlers(props.onClick, () => {
+            selectOption(option.value);
+        }),
+        onKeyDown: composeHandlers(props.onKeyDown, event => {
             if (handleTypeahead(event, event.currentTarget))
                 return;
             if (event.key === 'Escape') {
@@ -619,9 +668,9 @@ const getValidationMessage = (control, field) => {
     for (const [validityKey, attributeName] of validityMessageAttributes) {
         if (!control.validity[validityKey])
             continue;
-        return control.getAttribute(attributeName) ??
+        return (control.getAttribute(attributeName) ??
             field?.getAttribute(attributeName) ??
-            control.validationMessage;
+            control.validationMessage);
     }
     return control.validationMessage;
 };
@@ -633,16 +682,19 @@ const getFieldDescriptionId = (element) => {
 };
 const syncFieldDescription = (field) => {
     const controlId = field.dataset.uiFieldControl;
-    const control = controlId
-        ? document.getElementById(controlId)
-        : field.querySelector(fieldControlSelector);
+    const control = controlId ?
+        document.getElementById(controlId) :
+        field.querySelector(fieldControlSelector);
     if (!(control instanceof HTMLElement))
         return;
     const existingIds = control.getAttribute('aria-describedby')?.trim().split(/\s+/) ?? [];
     const configuredIds = field.dataset.uiFieldDescribedby?.trim().split(/\s+/) ?? [];
-    const descriptionIds = [...field.querySelectorAll(fieldDescriptionSelector)]
-        .map(element => getFieldDescriptionId(element));
-    const describedBy = [...new Set([...existingIds, ...configuredIds, ...descriptionIds].filter(Boolean))];
+    const descriptionIds = [
+        ...field.querySelectorAll(fieldDescriptionSelector)
+    ].map(element => getFieldDescriptionId(element));
+    const describedBy = [
+        ...new Set([...existingIds, ...configuredIds, ...descriptionIds].filter(Boolean))
+    ];
     if (describedBy.length) {
         control.setAttribute('aria-describedby', describedBy.join(' '));
     }
@@ -671,8 +723,9 @@ export const useFormValidation = ({ onInvalid, onValid, onValidate } = {}) => {
     const getControls = useCallback((form = formRef.current) => {
         if (!form)
             return [];
-        return [...form.querySelectorAll(formControlSelector)]
-            .filter(control => control.form === form && !control.disabled);
+        return [
+            ...form.querySelectorAll(formControlSelector)
+        ].filter(control => control.form === form && !control.disabled);
     }, []);
     const validateControl = useCallback((control, form = formRef.current ?? control.form) => {
         if (!form)
@@ -684,7 +737,9 @@ export const useFormValidation = ({ onInvalid, onValid, onValidate } = {}) => {
         }));
         onValidate?.(validateDetail);
         const invalid = !control.validity.valid;
-        const message = invalid ? getValidationMessage(control, getFieldRoot(control)) : '';
+        const message = invalid ?
+            getValidationMessage(control, getFieldRoot(control)) :
+            '';
         setFieldValidity(control, invalid, message);
         return !invalid;
     }, [onValidate, setFieldValidity]);
@@ -713,17 +768,17 @@ export const useFormValidation = ({ onInvalid, onValid, onValidate } = {}) => {
     const formProps = {
         'data-ui-form': true,
         noValidate: true,
-        onBlur: (event) => {
+        onBlur: event => {
             const form = event.currentTarget;
             syncFields(form);
             if (!isNativeFormControl(event.target) || event.target.form !== form)
                 return;
             const valid = validateControl(event.target, form);
-            emitState(valid ? 'ui:valid' : 'ui:invalid', valid
-                ? { control: event.target, form }
-                : { control: event.target, controls: [event.target], form });
+            emitState(valid ? 'ui:valid' : 'ui:invalid', valid ?
+                { control: event.target, form } :
+                { control: event.target, controls: [event.target], form });
         },
-        onSubmit: (event) => {
+        onSubmit: event => {
             const form = event.currentTarget;
             syncFields(form);
             const invalidControls = validateForm(form);
@@ -732,7 +787,11 @@ export const useFormValidation = ({ onInvalid, onValid, onValidate } = {}) => {
                 const firstInvalid = invalidControls[0];
                 if (!firstInvalid)
                     return;
-                emitState('ui:invalid', { control: firstInvalid, controls: invalidControls, form });
+                emitState('ui:invalid', {
+                    control: firstInvalid,
+                    controls: invalidControls,
+                    form
+                });
                 firstInvalid.focus({ preventScroll: true });
                 firstInvalid.reportValidity();
                 return;
@@ -756,20 +815,24 @@ const calendarMonthPattern = /^\d{4}-\d{2}$/;
 const parseCalendarDate = (value) => {
     if (!value || !calendarDatePattern.test(value))
         return null;
-    const [year = Number.NaN, month = Number.NaN, day = Number.NaN] = value.split('-').map(Number);
+    const [year = Number.NaN, month = Number.NaN, day = Number.NaN] = value
+        .split('-')
+        .map(Number);
     const date = new Date(Date.UTC(year, month - 1, day));
     return date.getUTCFullYear() === year &&
         date.getUTCMonth() === month - 1 &&
-        date.getUTCDate() === day
-        ? date
-        : null;
+        date.getUTCDate() === day ?
+        date :
+        null;
 };
 const parseCalendarMonth = (value) => {
     if (!value || !calendarMonthPattern.test(value))
         return null;
     const [year = Number.NaN, month = Number.NaN] = value.split('-').map(Number);
     const date = new Date(Date.UTC(year, month - 1, 1));
-    return date.getUTCFullYear() === year && date.getUTCMonth() === month - 1 ? date : null;
+    return date.getUTCFullYear() === year && date.getUTCMonth() === month - 1 ?
+        date :
+        null;
 };
 const formatCalendarDate = (date) => date.toISOString().slice(0, 10);
 const formatCalendarMonth = (date) => date.toISOString().slice(0, 7);
@@ -778,13 +841,18 @@ const addCalendarDays = (date, days) => new Date(Date.UTC(date.getUTCFullYear(),
 const getCalendarDaysInMonth = (date) => new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 0)).getUTCDate();
 const addCalendarMonths = (date, months) => {
     const targetMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + months, 1));
-    return new Date(Date.UTC(targetMonth.getUTCFullYear(), targetMonth.getUTCMonth(), Math.min(date.getUTCDate(), getCalendarDaysInMonth(targetMonth))));
+    const day = Math.min(date.getUTCDate(), getCalendarDaysInMonth(targetMonth));
+    return new Date(Date.UTC(targetMonth.getUTCFullYear(), targetMonth.getUTCMonth(), day));
 };
 const getCalendarToday = () => {
     const today = new Date();
     return new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()));
 };
-const compareCalendarDates = (date, other) => other ? formatCalendarDate(date).localeCompare(formatCalendarDate(other)) : 0;
+const compareCalendarDates = (date, other) => {
+    if (!other)
+        return 0;
+    return formatCalendarDate(date).localeCompare(formatCalendarDate(other));
+};
 const isCalendarDateDisabled = (disabled, date, min, max) => disabled ||
     compareCalendarDates(date, min) < 0 ||
     compareCalendarDates(date, max) > 0;
@@ -807,7 +875,7 @@ const getCalendarLocale = (locale) => {
     }
     return 'en';
 };
-const coerceCalendarDate = (value) => value instanceof Date ? value : parseCalendarDate(value);
+const coerceCalendarDate = (value) => (value instanceof Date ? value : parseCalendarDate(value));
 const getCalendarFocusDate = (disabled, month, min, max, selectedDate, requestedDate) => {
     const today = getCalendarToday();
     const candidates = [requestedDate, selectedDate, today, month];
@@ -830,12 +898,16 @@ export const useCalendar = ({ defaultValue, disabled = false, locale, max, min,
     const generatedId = useId();
     const calendarId = `ui-calendar-${generatedId}`;
     const labelId = `${calendarId}-label`;
-    const minDate = useMemo(() => parseCalendarDate(min), [min]);
-    const maxDate = useMemo(() => parseCalendarDate(max), [max]);
+    const minDate = parseCalendarDate(min);
+    const maxDate = parseCalendarDate(max);
     const defaultDate = parseCalendarDate(defaultValue);
     const controlledDate = parseCalendarDate(controlledValue);
     const [uncontrolledValue, setUncontrolledValue] = useState(() => defaultDate ? formatCalendarDate(defaultDate) : '');
-    const selectedValue = controlledValue === undefined ? uncontrolledValue : controlledDate ? formatCalendarDate(controlledDate) : '';
+    const selectedValue = controlledValue === undefined ?
+        uncontrolledValue :
+        controlledDate ?
+            formatCalendarDate(controlledDate) :
+            '';
     const selectedDate = parseCalendarDate(selectedValue);
     const initialMonth = parseCalendarMonth(month) ??
         (selectedDate ? startOfCalendarMonth(selectedDate) : null) ??
@@ -883,16 +955,25 @@ export const useCalendar = ({ defaultValue, disabled = false, locale, max, min,
                 today: todayIso === dateIso
             };
         }));
-    }, [dayFormatter, disabled, focusIso, maxDate, minDate, selectedIso, todayIso, visibleMonth]);
-    const focusCalendarDate = useCallback((dateInput) => {
+    }, [
+        dayFormatter,
+        disabled,
+        focusIso,
+        maxDate,
+        minDate,
+        selectedIso,
+        todayIso,
+        visibleMonth
+    ]);
+    const focusCalendarDate = dateInput => {
         const date = coerceCalendarDate(dateInput);
         if (!date)
             return;
         const nextDate = clampCalendarDate(date, minDate, maxDate);
         setVisibleMonthValue(formatCalendarMonth(startOfCalendarMonth(nextDate)));
         setFocusValue(formatCalendarDate(nextDate));
-    }, [maxDate, minDate]);
-    const selectDate = useCallback((dateInput) => {
+    };
+    const selectDate = dateInput => {
         if (disabled)
             return;
         const date = coerceCalendarDate(dateInput);
@@ -908,8 +989,8 @@ export const useCalendar = ({ defaultValue, disabled = false, locale, max, min,
         setVisibleMonthValue(formatCalendarMonth(startOfCalendarMonth(nextDate)));
         setFocusValue(nextValue);
         onValueChange?.(nextValue);
-    }, [controlledValue, disabled, maxDate, minDate, onValueChange]);
-    const moveFocus = useCallback((currentDate, key) => {
+    };
+    const moveFocus = (currentDate, key) => {
         const column = (currentDate.getUTCDay() + 6) % 7;
         const keyOffsets = {
             ArrowDown: 7,
@@ -927,12 +1008,12 @@ export const useCalendar = ({ defaultValue, disabled = false, locale, max, min,
         if (offset !== undefined) {
             focusCalendarDate(addCalendarDays(currentDate, offset));
         }
-    }, [focusCalendarDate]);
+    };
     const previousMonthLastDay = addCalendarDays(visibleMonth, -1);
     const nextMonthFirstDay = addCalendarMonths(visibleMonth, 1);
     const previousDisabled = disabled || compareCalendarDates(previousMonthLastDay, minDate) < 0;
     const nextDisabled = disabled || compareCalendarDates(nextMonthFirstDay, maxDate) > 0;
-    const getDayProps = useCallback((day, props = {}) => ({
+    const getDayProps = (day, props = {}) => ({
         ...props,
         'aria-disabled': day.disabled ? true : undefined,
         'aria-label': props['aria-label'] ?? day.label,
@@ -973,7 +1054,7 @@ export const useCalendar = ({ defaultValue, disabled = false, locale, max, min,
         }),
         role: 'gridcell',
         tabIndex: props.tabIndex ?? day.tabIndex
-    }), [moveFocus, selectDate]);
+    });
     return {
         focusDate: focusCalendarDate,
         getDayProps,
@@ -1043,16 +1124,18 @@ export const useCalendar = ({ defaultValue, disabled = false, locale, max, min,
 /* eslint-enable @stylistic/padding-line-between-statements, complexity, no-nested-ternary */
 const defaultInputOtpLength = 6;
 const defaultInputOtpPattern = '[0-9]*';
-const normalizeInputOtpLength = (length) => Math.max(1, Math.floor(Number(length) || defaultInputOtpLength));
-const isNumericInputOtp = (inputMode, pattern) => inputMode === 'numeric' || pattern === defaultInputOtpPattern;
+const coerceInputOtpLength = (length) => Number(length) || defaultInputOtpLength;
+const clampInputOtpLength = (length) => Math.max(1, Math.floor(length));
+const normalizeInputOtpLength = (length) => (clampInputOtpLength(coerceInputOtpLength(length)));
+const isNumericInputOtp = (inputMode, pattern) => (inputMode === 'numeric' || pattern === defaultInputOtpPattern);
 const sanitizeInputOtpValue = (value, length, inputMode, pattern) => {
-    const normalized = isNumericInputOtp(inputMode, pattern)
-        ? value.replaceAll(/\D/g, '')
-        : value.replaceAll(/\s/g, '');
+    const normalized = isNumericInputOtp(inputMode, pattern) ?
+        value.replaceAll(/\D/g, '') :
+        value.replaceAll(/\s/g, '');
     return normalized.slice(0, length);
 };
 const getInputOtpActiveIndex = (length, value, selectionStart) => Math.min(length - 1, Math.max(0, selectionStart ?? value.length));
-export const useInputOTP = ({ defaultValue, disabled = false, inputMode = 'numeric', invalid = false, length: lengthOption, onValueChange, pattern = defaultInputOtpPattern, value: controlledValue } = {}) => {
+export const useInputOTP = ({ defaultValue, disabled = false, inputMode = 'numeric', inputRef: forwardedInputRef, invalid = false, length: lengthOption, onValueChange, pattern = defaultInputOtpPattern, value: controlledValue } = {}) => {
     const length = normalizeInputOtpLength(lengthOption);
     const rootRef = useRef(null);
     const inputRef = useRef(null);
@@ -1074,14 +1157,14 @@ export const useInputOTP = ({ defaultValue, disabled = false, inputMode = 'numer
         setActiveIndex(getInputOtpActiveIndex(length, nextValue, input.selectionStart));
         return nextValue;
     }, [controlledValue, inputMode, length, pattern, value]);
-    const setSelection = useCallback((index) => {
+    const setSelection = useCallback(index => {
         const input = inputRef.current;
         const position = Math.min(value.length, Math.max(0, index));
         setActiveIndex(getInputOtpActiveIndex(length, value, position));
         input?.focus({ preventScroll: true });
         input?.setSelectionRange(position, position);
     }, [length, value]);
-    const setValue = useCallback((nextValue) => {
+    const setValue = useCallback(nextValue => {
         const sanitizedValue = sanitizeInputOtpValue(nextValue, length, inputMode, pattern);
         const input = inputRef.current;
         if (controlledValue === undefined) {
@@ -1146,12 +1229,14 @@ export const useInputOTP = ({ defaultValue, disabled = false, inputMode = 'numer
         onKeyDown: composeHandlers(props.onKeyDown, event => {
             if (event.key === 'ArrowLeft') {
                 event.preventDefault();
-                setSelection((event.currentTarget.selectionStart ?? event.currentTarget.value.length) - 1);
+                setSelection((event.currentTarget.selectionStart ??
+                    event.currentTarget.value.length) - 1);
                 return;
             }
             if (event.key === 'ArrowRight') {
                 event.preventDefault();
-                setSelection((event.currentTarget.selectionStart ?? event.currentTarget.value.length) + 1);
+                setSelection((event.currentTarget.selectionStart ??
+                    event.currentTarget.value.length) + 1);
                 return;
             }
             if (event.key === 'Home') {
@@ -1175,10 +1260,25 @@ export const useInputOTP = ({ defaultValue, disabled = false, inputMode = 'numer
             setValue(pasted);
         }),
         pattern: props.pattern ?? pattern,
-        ref: inputRef,
+        ref: node => {
+            inputRef.current = node;
+            setRefValue(forwardedInputRef, node);
+        },
         type: 'text',
         value
-    }), [commitInputValue, disabled, inputMode, invalid, length, pattern, setSelection, setValue, syncValue, value]);
+    }), [
+        commitInputValue,
+        disabled,
+        forwardedInputRef,
+        inputMode,
+        invalid,
+        length,
+        pattern,
+        setSelection,
+        setValue,
+        syncValue,
+        value
+    ]);
     const getSegmentChar = useCallback(index => value[index] ?? '\u00a0', [value]);
     const getSegmentProps = useCallback((index, props = {}) => ({
         ...props,
@@ -1224,11 +1324,10 @@ const getDateRangeRoot = (control, fallback) => control.closest('[data-ui-date-r
 const getDateRangeInputs = (root, start, end) => {
     if (start && end && start !== end)
         return [start, end];
-    const inputs = root ? [...root.querySelectorAll('input[type="date"]')] : [];
-    return [
-        start ?? inputs[0] ?? null,
-        end ?? inputs.at(-1) ?? null
-    ];
+    const inputs = root ?
+        [...root.querySelectorAll('input[type="date"]')] :
+        [];
+    return [start ?? inputs[0] ?? null, end ?? inputs.at(-1) ?? null];
 };
 const syncDateInputConstraint = (input, property, value) => {
     if (value) {
@@ -1304,9 +1403,9 @@ const getRichTextChangeDetail = (root) => {
 const executeRichTextDocumentCommand = (commandDocument, command, value) => {
     if (typeof commandDocument?.execCommand !== 'function')
         return false;
-    return value === undefined
-        ? commandDocument.execCommand(command)
-        : commandDocument.execCommand(command, false, value);
+    return value === undefined ?
+        commandDocument.execCommand(command) :
+        commandDocument.execCommand(command, false, value);
 };
 // eslint-disable-next-line complexity -- Command-state normalization covers toggle and value-bearing controls together.
 const syncRichTextCommandStates = (root) => {
@@ -1322,7 +1421,8 @@ const syncRichTextCommandStates = (root) => {
             control.setAttribute('aria-pressed', String(active));
         }
         else if (command === 'formatBlock' && value) {
-            const currentValue = commandDocument.queryCommandValue?.(command)
+            const currentValue = commandDocument
+                .queryCommandValue?.(command)
                 .replaceAll(/[<>]/g, '')
                 .toLowerCase();
             active = currentValue === value.replaceAll(/[<>]/g, '').toLowerCase();
@@ -1347,9 +1447,9 @@ export const useRichTextEditor = ({ onChange, onCommand } = {}) => {
     const executeCommand = useCallback((command, root = rootRef.current, value) => {
         if (!command)
             return false;
-        const commandDocument = typeof document === 'undefined'
-            ? undefined
-            : document;
+        const commandDocument = typeof document === 'undefined' ?
+            undefined :
+            document;
         const executed = executeRichTextDocumentCommand(commandDocument, command, value);
         const detail = {
             command,
@@ -1439,7 +1539,9 @@ export const useSchedule = ({ onChange } = {}) => {
             }
         }),
         onDragStart: composeHandlers(props.onDragStart, event => {
-            const transferValue = eventId || event.currentTarget.id || event.currentTarget.textContent.trim();
+            const transferValue = eventId ||
+                event.currentTarget.id ||
+                event.currentTarget.textContent.trim();
             const root = getScheduleRoot(event.currentTarget, rootRef.current);
             event.dataTransfer.setData('text/plain', transferValue);
             if (root) {
@@ -1461,10 +1563,11 @@ export const useSchedule = ({ onChange } = {}) => {
             event.preventDefault();
             delete event.currentTarget.dataset.state;
             const draggedId = event.dataTransfer.getData('text/plain');
-            const dragged = typeof document !== 'undefined' && draggedId
-                ? document.getElementById(draggedId)
-                : null;
-            if (typeof HTMLElement !== 'undefined' && dragged instanceof HTMLElement) {
+            const dragged = typeof document !== 'undefined' && draggedId ?
+                document.getElementById(draggedId) :
+                null;
+            if (typeof HTMLElement !== 'undefined' &&
+                dragged instanceof HTMLElement) {
                 event.currentTarget.append(dragged);
             }
             emitChange({
@@ -1484,9 +1587,15 @@ export const useSchedule = ({ onChange } = {}) => {
         rootRef
     };
 };
-/* eslint-disable @stylistic/padding-line-between-statements, @eslint-react/set-state-in-effect, @typescript-eslint/prefer-optional-chain, complexity, no-nested-ternary -- Resizable mirrors Astro's compact pane sizing runtime. */
+/* eslint-disable @stylistic/padding-line-between-statements, @eslint-react/set-state-in-effect */
+/* eslint-disable @typescript-eslint/prefer-optional-chain, complexity, no-nested-ternary */
+/* Resizable mirrors Astro's compact pane sizing runtime. */
 const parseResizableNumberList = (value, count, fallback) => {
-    const values = Array.isArray(value) ? value : value === undefined ? [] : [value];
+    const values = Array.isArray(value) ?
+        value :
+        value === undefined ?
+            [] :
+            [value];
     return Array.from({ length: count }, (_, index) => values[index] ?? values[0] ?? fallback);
 };
 const normalizeResizableSizes = (sizes, count) => {
@@ -1500,7 +1609,11 @@ const normalizeResizableSizes = (sizes, count) => {
         return Array.from({ length: count }, () => fallbackSize);
     return usableSizes.map(size => (size / total) * 100);
 };
-const serializeResizableSize = (value) => Array.isArray(value) ? value.join(',') : value === undefined ? undefined : String(value);
+const serializeResizableSize = (value) => Array.isArray(value) ?
+    value.join(',') :
+    value === undefined ?
+        undefined :
+        String(value);
 export const useResizable = ({ defaultSizes, direction = 'horizontal', maxSize, minSize, onSizesChange, panelCount: panelCountOption = 2, resetOnDoubleClick = true } = {}) => {
     const panelCount = Math.max(0, Math.floor(panelCountOption));
     const rootRef = useRef(null);
@@ -1565,9 +1678,9 @@ export const useResizable = ({ defaultSizes, direction = 'horizontal', maxSize,
         }),
         onKeyDown: composeHandlers(props.onKeyDown, event => {
             const step = event.shiftKey ? 10 : 2;
-            const keyDeltas = direction === 'horizontal'
-                ? { ArrowLeft: -step, ArrowRight: step }
-                : { ArrowDown: step, ArrowUp: -step };
+            const keyDeltas = direction === 'horizontal' ?
+                { ArrowLeft: -step, ArrowRight: step } :
+                { ArrowDown: step, ArrowUp: -step };
             if (event.key === 'Home') {
                 event.preventDefault();
                 resizePair(index, minSizes[index] ?? 0);
@@ -1602,7 +1715,9 @@ export const useResizable = ({ defaultSizes, direction = 'horizontal', maxSize,
         }),
         onPointerMove: composeHandlers(props.onPointerMove, event => {
             const drag = dragRef.current;
-            if (!drag || drag.index !== index || event.currentTarget.dataset.active !== 'true')
+            if (!drag ||
+                drag.index !== index ||
+                event.currentTarget.dataset.active !== 'true')
                 return;
             const delta = ((event[axis] - drag.startPosition) / drag.containerSize) * 100;
             resizePair(index, drag.startSize + delta);
@@ -1708,7 +1823,10 @@ export const useThemeBuilder = ({ accentHue, defaultAccentHue = 54, defaultExpor
         currentSecondaryColor
     ]);
     const exportValue = useMemo(() => exportThemeBuilderValue(result.tokens, result.scheme, currentExportFormat), [currentExportFormat, result.scheme, result.tokens]);
-    const previewStyle = useMemo(() => Object.fromEntries(Object.entries(result.tokens).map(([token, value]) => [`--${token}`, value])), [result.tokens]);
+    const previewStyle = useMemo(() => Object.fromEntries(Object.entries(result.tokens).map(([token, value]) => [
+        `--${token}`,
+        value
+    ])), [result.tokens]);
     useEffect(() => {
         onThemeChange?.(result);
     }, [onThemeChange, result]);
@@ -1729,21 +1847,27 @@ export const useThemeBuilder = ({ accentHue, defaultAccentHue = 54, defaultExpor
         ...props,
         'aria-pressed': currentMode === nextMode,
         'data-ui-theme-mode': nextMode,
-        onClick: composeHandlers(props.onClick, () => { setMode(nextMode); }),
+        onClick: composeHandlers(props.onClick, () => {
+            setMode(nextMode);
+        }),
         type: props.type ?? 'button'
     }), [currentMode, setMode]);
     const getSchemeProps = useCallback((nextScheme, props = {}) => ({
         ...props,
         'aria-pressed': currentScheme === nextScheme,
         'data-ui-theme-scheme': nextScheme,
-        onClick: composeHandlers(props.onClick, () => { setScheme(nextScheme); }),
+        onClick: composeHandlers(props.onClick, () => {
+            setScheme(nextScheme);
+        }),
         type: props.type ?? 'button'
     }), [currentScheme, setScheme]);
     const getExportFormatProps = useCallback((format, props = {}) => ({
         ...props,
         'aria-pressed': currentExportFormat === format,
         'data-ui-theme-export-format': format,
-        onClick: composeHandlers(props.onClick, () => { setExportFormat(coerceThemeBuilderExportFormat(format)); }),
+        onClick: composeHandlers(props.onClick, () => {
+            setExportFormat(coerceThemeBuilderExportFormat(format));
+        }),
         type: props.type ?? 'button'
     }), [currentExportFormat, setExportFormat]);
     return {
@@ -1752,7 +1876,9 @@ export const useThemeBuilder = ({ accentHue, defaultAccentHue = 54, defaultExpor
             'data-ui-theme-accent-hue': true,
             max: 359,
             min: 0,
-            onChange: event => { setAccentHue(Number(event.currentTarget.value)); },
+            onChange: event => {
+                setAccentHue(Number(event.currentTarget.value));
+            },
             type: 'range',
             value: currentAccentHue
         },
@@ -1773,7 +1899,9 @@ export const useThemeBuilder = ({ accentHue, defaultAccentHue = 54, defaultExpor
             'data-ui-theme-brand-hue': true,
             max: 359,
             min: 0,
-            onChange: event => { setHue(Number(event.currentTarget.value)); },
+            onChange: event => {
+                setHue(Number(event.currentTarget.value));
+            },
             type: 'range',
             value: currentHue
         },
@@ -1785,7 +1913,9 @@ export const useThemeBuilder = ({ accentHue, defaultAccentHue = 54, defaultExpor
         previewStyle,
         primaryColorProps: {
             'data-ui-theme-primary-color': true,
-            onChange: event => { setPrimaryColor(event.currentTarget.value); },
+            onChange: event => {
+                setPrimaryColor(event.currentTarget.value);
+            },
             type: 'color',
             value: currentPrimaryColor
         },
@@ -1794,7 +1924,9 @@ export const useThemeBuilder = ({ accentHue, defaultAccentHue = 54, defaultExpor
         },
         secondaryColorProps: {
             'data-ui-theme-secondary-color': true,
-            onChange: event => { setSecondaryColor(event.currentTarget.value); },
+            onChange: event => {
+                setSecondaryColor(event.currentTarget.value);
+            },
             type: 'color',
             value: currentSecondaryColor
         },
@@ -1807,7 +1939,7 @@ export const useThemeBuilder = ({ accentHue, defaultAccentHue = 54, defaultExpor
         setSecondaryColor
     };
 };
-export const useTooltip = ({ defaultOpen = false, delay = 250, id, onOpenChange, open, } = {}) => {
+export const useTooltip = ({ defaultOpen = false, delay = 250, id, onOpenChange, open } = {}) => {
     const tooltipId = useSafeId('ui-tooltip', id);
     const timerRef = useRef(undefined);
     const [isOpen, setIsOpen] = useControllableState({
@@ -1825,7 +1957,9 @@ export const useTooltip = ({ defaultOpen = false, delay = 250, id, onOpenChange,
         if (timerRef.current) {
             clearTimeout(timerRef.current);
         }
-        timerRef.current = setTimeout(() => { setIsOpen(true); }, nextDelay);
+        timerRef.current = setTimeout(() => {
+            setIsOpen(true);
+        }, nextDelay);
     }, [setIsOpen]);
     useEffect(() => () => {
         if (timerRef.current) {
@@ -1838,13 +1972,17 @@ export const useTooltip = ({ defaultOpen = false, delay = 250, id, onOpenChange,
         rootProps: {
             'aria-describedby': isOpen ? tooltipId : undefined,
             'data-ui-tooltip': true,
-            onFocus: () => { scheduleOpen(0); },
-            onKeyDown: (event) => {
+            onFocus: () => {
+                scheduleOpen(0);
+            },
+            onKeyDown: event => {
                 if (event.key === 'Escape') {
                     close();
                 }
             },
-            onMouseEnter: () => { scheduleOpen(delay); },
+            onMouseEnter: () => {
+                scheduleOpen(delay);
+            },
             onMouseLeave: close
         },
         setOpen: setIsOpen,
@@ -1856,7 +1994,8 @@ export const useTooltip = ({ defaultOpen = false, delay = 250, id, onOpenChange,
     };
 };
 const createToastId = () => {
-    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    if (typeof crypto !== 'undefined' &&
+        typeof crypto.randomUUID === 'function') {
         return `ui-toast-${crypto.randomUUID()}`;
     }
     return `ui-toast-${Math.random().toString(36).slice(2)}`;
@@ -1894,9 +2033,9 @@ export const ToastProvider = ({ children, maxCount = defaultToastMax, placement
         const record = createToastRecord(detail, placement);
         const stackMax = detail.max ?? maxCount;
         setToasts(current => {
-            const next = current.some(toast => toast.id === record.id)
-                ? current.map(toast => toast.id === record.id ? record : toast)
-                : [...current, record];
+            const next = current.some(toast => toast.id === record.id) ?
+                current.map(toast => (toast.id === record.id ? record : toast)) :
+                [...current, record];
             const samePlacement = next.filter(toast => toast.placement === record.placement);
             const staleIds = samePlacement
                 .slice(0, Math.max(0, samePlacement.length - stackMax))
@@ -1926,7 +2065,9 @@ export const ToastProvider = ({ children, maxCount = defaultToastMax, placement
         toasts,
         update
     }), [create, dismiss, toasts, update]);
-    const placements = [...new Set([placement, ...toasts.map(toast => toast.placement)])];
+    const placements = [
+        ...new Set([placement, ...toasts.map(toast => toast.placement)])
+    ];
     return (_jsxs(ToastContext.Provider, { value: api, children: [children, placements.map(item => (_jsx(ToastViewport, { maxCount: maxCount, placement: item, removeToast: removeToast, toasts: toasts.filter(toast => toast.placement === item) }, item)))] }));
 };
 export const useToast = () => {
@@ -1936,7 +2077,9 @@ export const useToast = () => {
     }
     return api;
 };
-const ToastViewport = ({ maxCount, placement, removeToast, toasts }) => (_jsx("div", { "aria-atomic": "false", "aria-label": "Notifications", "aria-live": "polite", className: "ui-sonner", "data-placement": placement, "data-ui-sonner": true, "data-ui-toast-max": maxCount, children: toasts.map(toast => (_jsx(ToastItem, { onDismiss: () => { removeToast(toast.id); }, toast: toast }, toast.id))) }));
+const ToastViewport = ({ maxCount, placement, removeToast, toasts }) => (_jsx("div", { "aria-atomic": "false", "aria-label": "Notifications", "aria-live": "polite", className: "ui-sonner", "data-placement": placement, "data-ui-sonner": true, "data-ui-toast-max": maxCount, children: toasts.map(toast => (_jsx(ToastItem, { onDismiss: () => {
+            removeToast(toast.id);
+        }, toast: toast }, toast.id))) }));
 const ToastItem = ({ onDismiss, toast }) => {
     const toastRef = useRef(null);
     const timerRef = useRef(undefined);
@@ -1954,7 +2097,9 @@ const ToastItem = ({ onDismiss, toast }) => {
         if (!Number.isFinite(remaining) || remaining <= 0)
             return;
         startedAtRef.current = Date.now();
-        timerRef.current = setTimeout(() => { dismiss(toast.id); }, remaining);
+        timerRef.current = setTimeout(() => {
+            dismiss(toast.id);
+        }, remaining);
     }, [clearTimer, dismiss, toast.id]);
     const pauseTimer = useCallback(() => {
         clearTimer();
@@ -1973,31 +2118,35 @@ const ToastItem = ({ onDismiss, toast }) => {
     useEffect(() => {
         if (!toast.open) {
             const timer = setTimeout(onDismiss, closeDelay);
-            return () => { clearTimeout(timer); };
+            return () => {
+                clearTimeout(timer);
+            };
         }
     }, [onDismiss, toast.open]);
     const action = toast.action;
     const description = toast.description ?? '';
     const variantClass = getToastVariantClass(toast.variant);
-    return (_jsxs("aside", { "aria-live": toast.variant === 'destructive' ? 'assertive' : 'polite', className: composeClassName('ui-toast', variantClass), "data-description": description, "data-state": toast.open ? 'open' : 'closed', "data-title": toast.title, "data-ui-toast": true, "data-variant": toast.variant, id: toast.id, onFocus: pauseTimer, onKeyDown: (event) => {
+    return (_jsxs("aside", { "aria-live": toast.variant === 'destructive' ? 'assertive' : 'polite', className: composeClassName('ui-toast', variantClass), "data-description": description, "data-state": toast.open ? 'open' : 'closed', "data-title": toast.title, "data-ui-toast": true, "data-variant": toast.variant, id: toast.id, onFocus: pauseTimer, onKeyDown: event => {
             if (event.key !== 'Escape')
                 return;
             event.preventDefault();
             dismiss(toast.id);
-        }, onMouseEnter: pauseTimer, onMouseLeave: resumeTimer, ref: toastRef, role: toast.variant === 'destructive' ? 'alert' : 'status', children: [_jsxs("div", { className: "ui-toast__body", children: [_jsx("strong", { children: toast.title }), description && _jsx("p", { children: description })] }), action?.label && (_jsx("button", { className: "ui-button ui-button--secondary ui-button--sm ui-toast__action", onClick: (event) => {
+        }, onMouseEnter: pauseTimer, onMouseLeave: resumeTimer, ref: toastRef, role: toast.variant === 'destructive' ? 'alert' : 'status', children: [_jsxs("div", { className: "ui-toast__body", children: [_jsx("strong", { children: toast.title }), description && _jsx("p", { children: description })] }), action?.label && (_jsx("button", { className: "\n            ui-button ui-button--secondary ui-button--sm ui-toast__action\n          ", onClick: event => {
                     action.onClick?.(event, toastRef.current);
                     toastRef.current?.dispatchEvent(new CustomEvent(action.event ?? 'ui:toast-action', {
                         bubbles: true,
                         detail: { id: toast.id, value: action.value }
                     }));
                     dismiss(toast.id);
-                }, type: "button", children: action.label })), _jsx("button", { "aria-label": "Dismiss notification", className: "ui-toast__dismiss", onClick: () => { dismiss(toast.id); }, type: "button", children: "Dismiss" })] }));
+                }, type: "button", children: action.label })), _jsx("button", { "aria-label": "Dismiss notification", className: "ui-toast__dismiss", onClick: () => {
+                    dismiss(toast.id);
+                }, type: "button", children: "Dismiss" })] }));
 };
 export const useThemeToggle = (defaultTheme = 'light') => {
     const [theme, setTheme] = useState(() => {
         if (typeof window !== 'undefined') {
-            return localStorage.getItem('theme') ??
-                (document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+            return (localStorage.getItem('theme') ??
+                (document.documentElement.classList.contains('dark') ? 'dark' : 'light'));
         }
         return defaultTheme;
     });
@@ -2036,14 +2185,15 @@ export const useThemeToggle = (defaultTheme = 'light') => {
             pointerEvents: 'none',
             backgroundColor: oldBg,
             clipPath: `circle(${maxRadius}px at ${x}px ${y}px)`,
-            willChange: 'clip-path',
+            willChange: 'clip-path'
         });
         document.body.appendChild(overlay);
         // Switch theme behind the overlay
         setTheme(newTheme);
         requestAnimationFrame(() => {
             requestAnimationFrame(() => {
-                overlay.style.transition = 'clip-path 580ms cubic-bezier(0.4, 0, 0.2, 1)';
+                overlay.style.transition =
+                    'clip-path 580ms cubic-bezier(0.4, 0, 0.2, 1)';
                 overlay.style.clipPath = `circle(0px at ${x}px ${y}px)`;
                 const done = () => {
                     overlay.remove();