draft-components 3.5.0 → 4.0.0

package/dist/components/toaster/toaster.css

@@ -1,36 +1,36 @@
 .dc-toasts-list {
-  --dc-toaster-padding: 16px;
-  --dc-toaster-animation: 200ms ease;
+  --padding: 16px;
+  --animation: 200ms ease;
 
   position: fixed;
-  right: var(--dc-toaster-padding);
-  left: var(--dc-toaster-padding);
-  z-index: var(--dc-toaster-z-index);
+  right: var(--padding);
+  left: var(--padding);
+  z-index: var(--z-index);
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  list-style: none;
-  color-scheme: light;
   pointer-events: none;
+  color-scheme: light;
+  list-style: none;
 }
 
 .dc-toasts-list_top-left,
 .dc-toasts-list_top-center,
 .dc-toasts-list_top-right {
-  top: var(--dc-toaster-padding);
+  top: var(--padding);
 }
 
 .dc-toasts-list_bottom-left,
 .dc-toasts-list_bottom-center,
 .dc-toasts-list_bottom-right {
-  bottom: var(--dc-toaster-padding);
+  bottom: var(--padding);
 }
 
 .dc-toasts-list > * {
   position: absolute;
   right: 0;
   left: 0;
-  transition: transform var(--dc-toaster-animation);
+  transition: transform var(--animation);
 }
 
 .dc-toasts-list_top-left > *,
@@ -50,7 +50,7 @@
 
 .dc-toasts-list__toast {
   pointer-events: all;
-  animation: var(--dc-toaster-animation) forwards;
+  animation: var(--animation) forwards;
 }
 
 @keyframes dc-toast-slide-top {

package/dist/components/toaster/toaster.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 type YPosition = 'top' | 'bottom';
 type XPosition = 'left' | 'center' | 'right';
 export type ToastPosition = `${YPosition}-${XPosition}`;

package/dist/components/toaster/toaster.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { assertIfNullable } from '../../lib/helpers.js';
 import { classNames } from '../../lib/react-helpers.js';
 import { Portal } from '../portal/index.js';
 import { Toast, ToastButton } from '../toast/index.js';
@@ -13,11 +12,11 @@ export class Toaster {
     timeoutMs;
     onShow;
     onHide;
-    constructor(params) {
+    constructor(params = {}) {
         this._id = 0;
-        this.timeoutMs = params?.timeoutMs || 10_000;
-        this.onShow = params?.onShowToast;
-        this.onHide = params?.onHideToast;
+        this.timeoutMs = params.timeoutMs || 10_000;
+        this.onShow = params.onShowToast;
+        this.onHide = params.onHideToast;
     }
     _getNextId() {
         this._id += 1;
@@ -32,7 +31,9 @@ export class Toaster {
             },
         });
         const timeoutMs = toast.timeoutMs || this.timeoutMs;
-        this.onShow?.(event.detail.toast);
+        if (typeof this.onShow === 'function') {
+            this.onShow(event.detail.toast);
+        }
         window.dispatchEvent(event);
         window.setTimeout(() => this.hideToast(id), timeoutMs);
         return id;
@@ -44,11 +45,13 @@ export class Toaster {
                 toastId: id,
             },
         });
-        this.onHide?.(id);
+        if (typeof this.onHide === 'function') {
+            this.onHide(id);
+        }
         window.dispatchEvent(event);
     }
-    render(options) {
-        return (_jsx(ToastsList, { toaster: this, toastGap: options?.toastGap, toastPosition: options?.toastPosition, toastCloseButtonAriaLabel: options?.toastCloseButtonAriaLabel }));
+    render(options = {}) {
+        return (_jsx(ToastsList, { toaster: this, toastGap: options.toastGap, toastPosition: options.toastPosition, toastCloseButtonAriaLabel: options.toastCloseButtonAriaLabel }));
     }
 }
 function ToastsList({ toaster, toastGap = 12, toastPosition = 'top-center', toastCloseButtonAriaLabel = 'Close', }) {
@@ -80,7 +83,9 @@ function ToastsList({ toaster, toastGap = 12, toastPosition = 'top-center', toas
     }, [toaster]);
     useEffect(() => {
         const listEl = ref.current;
-        assertIfNullable(listEl, 'ToastsList ref was not set');
+        if (!listEl) {
+            return;
+        }
         let offset = 0;
         for (const item of listEl.children) {
             if (item instanceof HTMLLIElement) {
@@ -102,12 +107,18 @@ function ToastsList({ toaster, toastGap = 12, toastPosition = 'top-center', toas
                 [`dc-toasts-list_${toastPosition}`]: toastPosition,
             }), children: toasts.map((toast) => {
                 const hideToast = () => toaster.hideToast(toast.id);
-                const actions = toast.actions?.map((action, index) => (_jsx(ToastButton, { onClick: () => {
-                        action.onClick?.();
-                        if (action.shouldHideAfterClick ?? true) {
-                            hideToast();
-                        }
-                    }, children: action.content }, index)));
-                return (_jsx("li", { children: _jsx(Toast, { className: "dc-toasts-list__toast", role: "alert", icon: toast.icon, message: toast.message, actions: actions, closeButtonAriaLabel: toastCloseButtonAriaLabel, onClickCloseButton: hideToast, children: toast.title }) }, toast.id));
+                let actionButtons = null;
+                if (toast.actions) {
+                    actionButtons = toast.actions.map((action, index) => (_jsx(ToastButton, { onClick: () => {
+                            if (typeof action.onClick === 'function') {
+                                action.onClick();
+                            }
+                            if (action.shouldHideAfterClick ?? true) {
+                                hideToast();
+                            }
+                        }, children: action.content }, index)));
+                }
+                return (_jsx("li", { children: _jsx(Toast, { className: "dc-toasts-list__toast", role: "alert", icon: toast.icon, message: toast.message, actions: actionButtons, closeButtonAriaLabel: toastCloseButtonAriaLabel, onClickCloseButton: hideToast, children: toast.title }) }, toast.id));
             }) }) }));
 }
+//# sourceMappingURL=toaster.js.map

package/dist/components/toaster/toaster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.js","sourceRoot":"","sources":["../../../src/components/toaster/toaster.tsx"],"names":[],"mappings":"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"}

package/dist/components/tooltip/index.js

@@ -1 +1,2 @@
 export * from './tooltip.js';
+//# sourceMappingURL=index.js.map

package/dist/components/tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/tooltip/tooltip.css

@@ -1,34 +1,101 @@
 .dc-tooltip {
-  --dc-tooltip-text-color: var(--dc-gray-50);
-  --dc-tooltip-bg: var(--dc-gray-700);
-  --dc-tooltip-transition-duration: 100ms;
+  --color: var(--dc-white);
+  --background: var(--dc-neutral-800);
+  --enter-animation-duration: 50ms;
+  --leave-animation-duration: 50ms;
 
+  position: fixed;
   top: 0;
   left: 0;
   z-index: var(--dc-overlay-z-index);
   box-sizing: border-box;
+  display: block;
+  max-width: 288px;
   padding: 4px 8px;
   font: var(--dc-text-xs);
-  color: var(--dc-tooltip-text-color);
+  color: var(--color);
+  white-space: pre-wrap;
   color-scheme: light;
-  background: var(--dc-tooltip-bg);
+  background: var(--background);
   border-radius: 6px;
   box-shadow: var(--dc-shadow-md);
 }
 
-.dc-tooltip_hidden {
-  opacity: 0;
-  transition: opacity var(--dc-tooltip-transition-duration) ease;
+.dc-tooltip::before {
+  position: absolute;
+  display: block;
+  content: "";
 }
 
-.dc-tooltip_visible {
-  opacity: 1;
+.dc-tooltip[data-placement="top"]::before {
+  top: 100%;
+  left: 0;
+  width: 100%;
+  height: var(--anchor-offset);
+}
+
+.dc-tooltip[data-placement="right"]::before {
+  top: 0;
+  right: 100%;
+  width: var(--anchor-offset);
+  height: 100%;
+}
+
+.dc-tooltip[data-placement="bottom"]::before {
+  bottom: 100%;
+  left: 0;
+  width: 100%;
+  height: var(--anchor-offset);
+}
+
+.dc-tooltip[data-placement="left"]::before {
+  top: 0;
+  left: 100%;
+  width: var(--anchor-offset);
+  height: 100%;
+}
+
+@keyframes dc-tooltip-enter {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.dc-tooltip[data-animation="enter"] {
+  animation: dc-tooltip-enter var(--enter-animation-duration) ease
+    forwards;
+}
+
+@keyframes dc-tooltip-leave {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.dc-tooltip[data-animation="leave"] {
+  animation: dc-tooltip-leave var(--leave-animation-duration) ease
+    forwards;
+}
+
+@media (prefers-reduced-motion) {
+  .dc-tooltip[data-animation="enter"],
+  .dc-tooltip[data-animation="leave"] {
+    animation-duration: 0ms;
+  }
 }
 
 .dark .dc-tooltip,
 .dark.dc-tooltip {
-  --dc-tooltip-text-color: var(--dc-gray-800);
-  --dc-tooltip-bg: var(--dc-gray-100);
+  --color: var(--dc-neutral-800);
+  --background: var(--dc-neutral-100);
 
   color-scheme: dark;
 }

package/dist/components/tooltip/tooltip.d.ts

@@ -1,26 +1,28 @@
-import { ComponentPropsWithoutRef, ReactNode, RefCallback } from 'react';
-import { PositionerProps } from '../positioner/index.js';
-type TooltipChildrenRenderFn = (props: {
-    ref: RefCallback<HTMLElement>;
-}, context: {
-    isShown: boolean;
-    tooltipId: string;
-    hideTooltip: () => void;
-    showTooltip: () => void;
-}) => ReactNode;
-type TooltipHTMLProps = ComponentPropsWithoutRef<'div'>;
-type TooltipBaseProps = Omit<TooltipHTMLProps, 'children' | 'content'>;
-export type TooltipPlacement = PositionerProps['placement'];
-export type TooltipAlignment = PositionerProps['alignment'];
-export type TooltipProps = {
-    htmlContent?: TooltipHTMLProps['content'];
-    anchorGap?: number;
+import { type ComponentProps, type FocusEventHandler, type MouseEventHandler, type ReactNode, type RefCallback, type JSX } from 'react';
+import { type ElementPlacement } from '../../lib/calc-element-position.js';
+export type TooltipPlacement = ElementPlacement;
+export type TooltipApi = {
+    show: () => void;
+    hide: () => void;
+};
+export type TooltipChildrenRenderer = (props: {
+    'ref': RefCallback<HTMLElement | SVGElement>;
+    'aria-describedby': string;
+    'onFocus': FocusEventHandler<HTMLElement | SVGElement>;
+    'onBlur': FocusEventHandler<HTMLElement | SVGElement>;
+    'onMouseEnter': MouseEventHandler<HTMLElement | SVGElement>;
+    'onMouseLeave': MouseEventHandler<HTMLElement | SVGElement>;
+}, api: TooltipApi) => JSX.Element;
+type TooltipHTMLProps = ComponentProps<'div'>;
+type TooltipBaseProps = {
+    anchorPadding?: number;
+    viewportPadding?: number;
     placement?: TooltipPlacement;
-    alignment?: TooltipAlignment;
-    defaultIsShown?: boolean;
-    isShown?: boolean;
-    content: ReactNode;
-    children: ReactNode | TooltipChildrenRenderFn;
-} & TooltipBaseProps;
-export declare function Tooltip({ anchorGap, placement, alignment, style, className, htmlContent, content, children, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+    isOpen?: boolean;
+    defaultIsVisible?: boolean;
+    title: ReactNode;
+    children: TooltipChildrenRenderer;
+};
+export type TooltipProps = TooltipBaseProps & Omit<TooltipHTMLProps, keyof TooltipBaseProps>;
+export declare function Tooltip({ className, placement, anchorPadding, viewportPadding, defaultIsVisible, title, children, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/tooltip/tooltip.js

@@ -1,70 +1,88 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cloneElement, useId, useMemo, useState, } from 'react';
-import { classNames, isReactElementWithRef, mergeRefs } from '../../lib/react-helpers.js';
-import { useMountTransition } from '../../hooks/index.js';
-import { Positioner } from '../positioner/index.js';
-export function Tooltip({ anchorGap = 8, placement = 'top', alignment = 'center', style, className, htmlContent, content, children, ...props }) {
-    const [defaultShow, setDefaultShow] = useState(props.defaultIsShown ?? false);
-    const defaultId = useId();
-    const tooltipId = props.id || defaultId;
-    const isShown = props.isShown ?? defaultShow;
-    const durationMs = 100;
-    const { isMounted, className: transitionClass } = useMountTransition({
-        isShown,
-        durationMs,
-        enterFrom: 'dc-tooltip_hidden',
-        enterTo: 'dc-tooltip_visible',
-    });
-    const { showTooltip, hideTooltip } = useMemo(() => ({
-        showTooltip: () => setDefaultShow(true),
-        hideTooltip: () => setDefaultShow(false),
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useId, useRef, useMemo, useLayoutEffect, } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+import { calcElementPosition } from '../../lib/calc-element-position.js';
+import { observeElementMove } from '../../lib/observe-element-move.js';
+import { Portal } from '../portal/portal.js';
+import { useCloseOnEsc } from '../../hooks/use-close-on-esc.js';
+import { observeElementChange } from '../../lib/observe-element-change.js';
+export function Tooltip({ className, placement = 'top', anchorPadding = 6, viewportPadding = 4, defaultIsVisible = false, title, children, ...props }) {
+    const [isVisible, setIsVisible] = useState(defaultIsVisible);
+    const [isMounted, setIsMounted] = useState(isVisible);
+    const id = useId();
+    const tooltipId = props.id || id;
+    const tooltipRef = useRef(null);
+    const anchorRef = useRef(null);
+    const api = useMemo(() => ({
+        show: () => {
+            setIsVisible(true);
+        },
+        hide: () => {
+            setIsVisible(false);
+        },
     }), []);
-    const renderAnchor = ({ setRef }) => {
-        if (typeof children === 'function') {
-            return children({
-                ref: setRef,
-            }, {
-                tooltipId,
-                showTooltip,
-                hideTooltip,
-                isShown: isShown || isMounted,
-            });
+    useLayoutEffect(() => {
+        const tooltip = tooltipRef.current;
+        const anchor = anchorRef.current;
+        if (!tooltip || !anchor) {
+            return;
         }
-        if (isReactElementWithRef(children)) {
-            const props = children.props;
-            return cloneElement(children, {
-                'ref': mergeRefs(setRef, children.ref),
-                'onFocus': (event) => {
-                    showTooltip();
-                    props.onFocus?.(event);
-                },
-                'onBlur': (event) => {
-                    hideTooltip();
-                    props.onBlur?.(event);
-                },
-                'onMouseEnter': (event) => {
-                    showTooltip();
-                    props.onMouseEnter?.(event);
-                },
-                'onMouseLeave': (event) => {
-                    hideTooltip();
-                    props.onMouseLeave?.(event);
-                },
-                'aria-describedby': props['aria-describedby'] || tooltipId,
+        if (isVisible) {
+            tooltip.dataset.animation = 'enter';
+            setIsMounted((isMounted) => {
+                if (isMounted) {
+                    return isMounted;
+                }
+                tooltip.dataset.animation = 'enter';
+                return !isMounted;
             });
+            const positionTooltip = () => {
+                tooltip.style.removeProperty('max-width');
+                tooltip.style.removeProperty('max-height');
+                const result = calcElementPosition(anchor, tooltip, {
+                    placement,
+                    anchorPadding,
+                    viewportPadding,
+                });
+                tooltip.dataset.placement = result.placement;
+                tooltip.dataset.alignment = result.alignment;
+                tooltip.style.setProperty('--anchor-offset', `${anchorPadding}px`);
+                tooltip.style.setProperty('top', `${result.y}px`);
+                tooltip.style.setProperty('left', `${result.x}px`);
+                tooltip.style.setProperty('max-width', `${result.maxWidth}px`);
+                tooltip.style.setProperty('max-height', `${result.maxHeight}px`);
+            };
+            positionTooltip();
+            const stopObserveAnchorMove = observeElementMove(anchor, positionTooltip);
+            const stopObserveTooltipChange = observeElementChange(tooltip, positionTooltip);
+            return () => {
+                stopObserveAnchorMove();
+                stopObserveTooltipChange();
+            };
         }
-        return children;
-    };
-    const renderContent = ({ setRef: portalRef, style: portalStyle, }) => {
-        if (isShown || isMounted) {
-            delete props.defaultIsShown;
-            delete props.isShown;
-            return (_jsx("div", { ...props, ref: portalRef, id: tooltipId, style: {
-                    '--dc-tooltip-transition-duration': `${durationMs}ms`,
-                    ...portalStyle,
-                    ...style,
-                }, className: classNames('dc-tooltip', transitionClass, className), content: htmlContent, role: "tooltip", children: content }));
+        else {
+            const handleAnimationEnd = () => {
+                setIsMounted(false);
+            };
+            tooltip.dataset.animation = 'leave';
+            tooltip.addEventListener('animationend', handleAnimationEnd);
+            return () => {
+                tooltip.removeEventListener('animationend', handleAnimationEnd);
+            };
         }
-    };
-    return (_jsx(Positioner, { placement: placement, alignment: alignment, anchorGap: anchorGap, renderAnchor: renderAnchor, renderContent: renderContent }));
+    }, [isVisible, placement, anchorPadding, viewportPadding]);
+    useCloseOnEsc(api.hide, {
+        disabled: !isMounted,
+    });
+    return (_jsxs(_Fragment, { children: [(isVisible || isMounted) && (_jsx(Portal, { children: _jsx("div", { ...props, className: classNames('dc-tooltip', className), ref: tooltipRef, role: "tooltip", onMouseEnter: api.show, onMouseLeave: api.hide, children: title }) })), children({
+                'ref': (el) => {
+                    anchorRef.current = el;
+                },
+                'aria-describedby': tooltipId,
+                'onFocus': api.show,
+                'onBlur': api.hide,
+                'onMouseEnter': api.show,
+                'onMouseLeave': api.hide,
+            }, api)] }));
 }
+//# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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"}

package/dist/hooks/index.d.ts

@@ -1,7 +1,6 @@
-export * from './use-callback-ref.js';
-export * from './use-disable-body-scroll.js';
-export * from './use-esc-key-down.js';
+export * from './use-close-on-click-outside.js';
+export * from './use-close-on-esc.js';
 export * from './use-focus-trap.js';
-export * from './use-mount-transition.js';
-export * from './use-show-transition.js';
+export * from './use-lock-body-scroll.js';
 export * from './use-preserve-props-when-closed.js';
+export * from './use-ref-callback.js';

package/dist/hooks/index.js

@@ -1,7 +1,7 @@
-export * from './use-callback-ref.js';
-export * from './use-disable-body-scroll.js';
-export * from './use-esc-key-down.js';
+export * from './use-close-on-click-outside.js';
+export * from './use-close-on-esc.js';
 export * from './use-focus-trap.js';
-export * from './use-mount-transition.js';
-export * from './use-show-transition.js';
+export * from './use-lock-body-scroll.js';
 export * from './use-preserve-props-when-closed.js';
+export * from './use-ref-callback.js';
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qCAAqC,CAAC;AACpD,cAAc,uBAAuB,CAAC"}

package/dist/hooks/use-close-on-click-outside.d.ts

@@ -0,0 +1,10 @@
+import { type RefObject } from 'react';
+type CloseHandler = () => void;
+type ContainerRef = RefObject<HTMLElement | null>;
+type ShouldIgnoreClickPredicate = (node: Node) => boolean;
+export declare function useCloseOnClickOutside(handler: CloseHandler, opts: {
+    ref: ContainerRef;
+    disabled?: boolean;
+    shouldIgnoreClick?: ShouldIgnoreClickPredicate;
+}): void;
+export {};

package/dist/hooks/use-close-on-click-outside.js

@@ -0,0 +1,57 @@
+import { useEffect } from 'react';
+import { useRefCallback } from './use-ref-callback.js';
+const handlerStack = [];
+const callbackParams = new Map();
+export function useCloseOnClickOutside(handler, opts) {
+    const ref = opts.ref;
+    const disabled = opts.disabled || false;
+    const onClose = useRefCallback(handler);
+    const shouldIgnoreClick = useRefCallback((node) => {
+        if (typeof opts.shouldIgnoreClick === 'function') {
+            return opts.shouldIgnoreClick(node);
+        }
+        return false;
+    });
+    useEffect(() => {
+        if (disabled) {
+            return;
+        }
+        const handleClick = (event) => {
+            const callback = handlerStack.at(-1);
+            if (!callback) {
+                return;
+            }
+            const params = callbackParams.get(callback);
+            if (!params) {
+                return;
+            }
+            const target = event.target;
+            const container = params.ref.current;
+            const shouldIgnoreClick = params.shouldIgnoreClick;
+            if (callback
+                && target instanceof Node
+                && container instanceof Node
+                && !container.contains(target)
+                && !shouldIgnoreClick(target)) {
+                event.preventDefault();
+                callback();
+            }
+        };
+        handlerStack.push(onClose);
+        callbackParams.set(onClose, { ref, shouldIgnoreClick });
+        if (handlerStack.length === 1) {
+            document.addEventListener('click', handleClick, { capture: true });
+        }
+        return () => {
+            const index = handlerStack.indexOf(onClose);
+            if (index >= 0) {
+                handlerStack.splice(index, 1);
+                callbackParams.delete(onClose);
+            }
+            if (handlerStack.length === 0) {
+                document.removeEventListener('click', handleClick, { capture: true });
+            }
+        };
+    }, [ref, disabled, onClose, shouldIgnoreClick]);
+}
+//# sourceMappingURL=use-close-on-click-outside.js.map

package/dist/hooks/use-close-on-click-outside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-close-on-click-outside.js","sourceRoot":"","sources":["../../src/hooks/use-close-on-click-outside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAavD,MAAM,YAAY,GAAmB,EAAE,CAAC;AACxC,MAAM,cAAc,GAAG,IAAI,GAAG,EAAwB,CAAC;AAEvD,MAAM,UAAU,sBAAsB,CAAC,OAAqB,EAAE,IAI7D;IACC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;IACrB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC;IACxC,MAAM,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,iBAAiB,GAAG,cAAc,CAA6B,CAAC,IAAI,EAAE,EAAE;QAC5E,IAAI,OAAO,IAAI,CAAC,iBAAiB,KAAK,UAAU,EAAE,CAAC;YACjD,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;QACtC,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QACD,MAAM,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YACxC,MAAM,QAAQ,GAAG,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YACrC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,OAAO;YACT,CAAC;YAED,MAAM,MAAM,GAAG,cAAc,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YAC5C,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,OAAO;YACT,CAAC;YAED,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;YAC5B,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC;YACrC,MAAM,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC;YACnD,IACE,QAAQ;mBACL,MAAM,YAAY,IAAI;mBACtB,SAAS,YAAY,IAAI;mBACzB,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC;mBAC3B,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAC7B,CAAC;gBACD,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,QAAQ,EAAE,CAAC;YACb,CAAC;QACH,CAAC,CAAC;QAEF,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC3B,cAAc,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,iBAAiB,EAAE,CAAC,CAAC;QACxD,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC9B,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACrE,CAAC;QAED,OAAO,GAAG,EAAE;YACV,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YAC5C,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;gBACf,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;gBAC9B,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACjC,CAAC;YACD,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBAC9B,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YACxE,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAClD,CAAC"}

package/dist/hooks/use-close-on-esc.d.ts

@@ -0,0 +1,5 @@
+type CloseHandler = () => void;
+export declare function useCloseOnEsc(handler: CloseHandler, opts?: {
+    disabled?: boolean;
+}): void;
+export {};