@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/overlay/tooltip/TooltipProvider.cjs

@@ -0,0 +1,238 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactDom = require('react-dom');
+var styles = require('./Tooltip.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const TooltipContext = react.createContext(null);
+const VIEWPORT_PADDING = 8;
+const SHOW_DELAY_MS = 500;
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(n, max));
+}
+function flippedPlacement(p) {
+  if (p === "top") return "bottom";
+  if (p === "bottom") return "top";
+  if (p === "left") return "right";
+  return "left";
+}
+function computePosition(args) {
+  const { triggerRect, bubbleRect, placement, offset } = args;
+  switch (placement) {
+    case "top":
+      return {
+        left: triggerRect.left + triggerRect.width / 2 - bubbleRect.width / 2,
+        top: triggerRect.top - bubbleRect.height - offset
+      };
+    case "bottom":
+      return {
+        left: triggerRect.left + triggerRect.width / 2 - bubbleRect.width / 2,
+        top: triggerRect.bottom + offset
+      };
+    case "left":
+      return {
+        left: triggerRect.left - bubbleRect.width - offset,
+        top: triggerRect.top + triggerRect.height / 2 - bubbleRect.height / 2
+      };
+    case "right":
+      return {
+        left: triggerRect.right + offset,
+        top: triggerRect.top + triggerRect.height / 2 - bubbleRect.height / 2
+      };
+  }
+}
+function fitsViewport(pos, bubbleRect) {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const leftOk = pos.left >= VIEWPORT_PADDING;
+  const rightOk = pos.left + bubbleRect.width <= vw - VIEWPORT_PADDING;
+  const topOk = pos.top >= VIEWPORT_PADDING;
+  const bottomOk = pos.top + bubbleRect.height <= vh - VIEWPORT_PADDING;
+  return leftOk && rightOk && topOk && bottomOk;
+}
+function shallowEqualActive(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.id === b.id && a.open === b.open && a.content === b.content && a.placement === b.placement && a.offset === b.offset && a.triggerEl === b.triggerEl;
+}
+function TooltipProvider({ children }) {
+  const [active, setActive] = react.useState(null);
+  const showTimerRef = react.useRef(null);
+  const show = react.useCallback((next) => {
+    if (showTimerRef.current) clearTimeout(showTimerRef.current);
+    showTimerRef.current = setTimeout(() => {
+      showTimerRef.current = null;
+      setActive((curr) => {
+        const proposed = { ...next, open: true };
+        return shallowEqualActive(curr, proposed) ? curr : proposed;
+      });
+    }, SHOW_DELAY_MS);
+  }, []);
+  const hide = react.useCallback((id) => {
+    if (showTimerRef.current) {
+      clearTimeout(showTimerRef.current);
+      showTimerRef.current = null;
+    }
+    setActive((curr) => {
+      if (!curr || curr.id !== id) return curr;
+      return null;
+    });
+  }, []);
+  const update = react.useCallback((id, patch) => {
+    setActive((curr) => {
+      if (!curr || curr.id !== id) return curr;
+      const proposed = { ...curr, ...patch };
+      return shallowEqualActive(curr, proposed) ? curr : proposed;
+    });
+  }, []);
+  const value = react.useMemo(() => ({ show, hide, update, active }), [show, hide, update, active]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(TooltipContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipLayer, {})
+  ] });
+}
+function TooltipLayer() {
+  const ctx = react.useContext(TooltipContext);
+  const active = ctx == null ? void 0 : ctx.active;
+  const bubbleRef = react.useRef(null);
+  const [mounted, setMounted] = react.useState(false);
+  const [open, setOpen] = react.useState(false);
+  const [visible, setVisible] = react.useState(false);
+  const [placement, setPlacement] = react.useState("top");
+  const [pos, setPos] = react.useState({ top: 0, left: 0 });
+  const lastPlacementRef = react.useRef("top");
+  const lastPosRef = react.useRef({ top: 0, left: 0 });
+  const lastActiveIdRef = react.useRef(null);
+  const rafRef = react.useRef(null);
+  react.useEffect(() => setMounted(true), []);
+  const recompute = react.useCallback(() => {
+    if (!(active == null ? void 0 : active.open)) return;
+    const trigger = active.triggerEl;
+    const bubble = bubbleRef.current;
+    if (!trigger || !bubble) return;
+    const triggerRect = trigger.getBoundingClientRect();
+    const bubbleRect = bubble.getBoundingClientRect();
+    if (bubbleRect.width === 0 || bubbleRect.height === 0) {
+      if (visible) setVisible(false);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(recompute);
+      return;
+    }
+    const candidates = [active.placement, flippedPlacement(active.placement)];
+    let chosen = candidates[0];
+    let nextPos = computePosition({
+      triggerRect,
+      bubbleRect,
+      placement: chosen,
+      offset: active.offset
+    });
+    if (!fitsViewport(nextPos, bubbleRect)) {
+      const alt = candidates[1];
+      const altPos = computePosition({
+        triggerRect,
+        bubbleRect,
+        placement: alt,
+        offset: active.offset
+      });
+      if (fitsViewport(altPos, bubbleRect)) {
+        chosen = alt;
+        nextPos = altPos;
+      }
+    }
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const left = clamp(nextPos.left, VIEWPORT_PADDING, vw - bubbleRect.width - VIEWPORT_PADDING);
+    const top = clamp(nextPos.top, VIEWPORT_PADDING, vh - bubbleRect.height - VIEWPORT_PADDING);
+    const prevPos = lastPosRef.current;
+    if (prevPos.left !== left || prevPos.top !== top) {
+      lastPosRef.current = { left, top };
+      setPos({ left, top });
+    }
+    if (lastPlacementRef.current !== chosen) {
+      lastPlacementRef.current = chosen;
+      setPlacement(chosen);
+    }
+    if (!visible) setVisible(true);
+  }, [active == null ? void 0 : active.open, active == null ? void 0 : active.triggerEl, active == null ? void 0 : active.placement, active == null ? void 0 : active.offset, visible]);
+  react.useEffect(() => {
+    const nextOpen = !!(active == null ? void 0 : active.open);
+    setOpen((prev) => prev === nextOpen ? prev : nextOpen);
+    if (nextOpen) setVisible(false);
+    if (!nextOpen) lastActiveIdRef.current = null;
+  }, [active == null ? void 0 : active.open]);
+  react.useLayoutEffect(() => {
+    var _a;
+    const id = (_a = active == null ? void 0 : active.id) != null ? _a : null;
+    if (!id) return;
+    if (lastActiveIdRef.current && lastActiveIdRef.current !== id) {
+      setVisible(false);
+    }
+    lastActiveIdRef.current = id;
+    if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(recompute);
+    return () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [active == null ? void 0 : active.id, recompute]);
+  react.useLayoutEffect(() => {
+    if (!open) return;
+    if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(recompute);
+    const onResize = () => recompute();
+    const onScroll = () => recompute();
+    window.addEventListener("resize", onResize);
+    window.addEventListener("scroll", onScroll, true);
+    const ro = new ResizeObserver(() => recompute());
+    if (active == null ? void 0 : active.triggerEl) ro.observe(active.triggerEl);
+    if (bubbleRef.current) ro.observe(bubbleRef.current);
+    return () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onScroll, true);
+      ro.disconnect();
+    };
+  }, [open, recompute, active == null ? void 0 : active.triggerEl]);
+  react.useEffect(() => {
+    if (!open || !active) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") ctx.hide(active.id);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, active == null ? void 0 : active.id]);
+  if (!ctx) return null;
+  if (!mounted || !active) return null;
+  const bubbleStyle = visible ? { top: pos.top, left: pos.left } : { top: -9999, left: -9999 };
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: bubbleRef,
+        id: active.id,
+        role: "tooltip",
+        className: styles__default.default.bubble,
+        "data-open": visible ? "true" : "false",
+        "data-placement": placement,
+        style: bubbleStyle,
+        "aria-hidden": !visible,
+        children: active.content
+      }
+    ),
+    document.body
+  );
+}
+
+exports.TooltipContext = TooltipContext;
+exports.TooltipProvider = TooltipProvider;

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

@@ -0,0 +1,20 @@
+import React, { type ReactNode } from 'react';
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipState = {
+    id: string;
+    open: boolean;
+    content: ReactNode;
+    placement: TooltipPlacement;
+    offset: number;
+    triggerEl: HTMLElement | null;
+};
+export type TooltipContextValue = {
+    show: (next: Omit<TooltipState, 'open'>) => void;
+    hide: (id: string) => void;
+    update: (id: string, patch: Partial<Omit<TooltipState, 'id'>>) => void;
+    active: TooltipState | null;
+};
+export declare const TooltipContext: React.Context<TooltipContextValue | null>;
+export declare function TooltipProvider({ children }: {
+    children: ReactNode;
+}): React.ReactElement;

package/dist/components/overlay/tooltip/TooltipProvider.js

@@ -0,0 +1,231 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useState, useRef, useCallback, useMemo, useContext, useEffect, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import styles from './Tooltip.module.css';
+
+const TooltipContext = createContext(null);
+const VIEWPORT_PADDING = 8;
+const SHOW_DELAY_MS = 500;
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(n, max));
+}
+function flippedPlacement(p) {
+  if (p === "top") return "bottom";
+  if (p === "bottom") return "top";
+  if (p === "left") return "right";
+  return "left";
+}
+function computePosition(args) {
+  const { triggerRect, bubbleRect, placement, offset } = args;
+  switch (placement) {
+    case "top":
+      return {
+        left: triggerRect.left + triggerRect.width / 2 - bubbleRect.width / 2,
+        top: triggerRect.top - bubbleRect.height - offset
+      };
+    case "bottom":
+      return {
+        left: triggerRect.left + triggerRect.width / 2 - bubbleRect.width / 2,
+        top: triggerRect.bottom + offset
+      };
+    case "left":
+      return {
+        left: triggerRect.left - bubbleRect.width - offset,
+        top: triggerRect.top + triggerRect.height / 2 - bubbleRect.height / 2
+      };
+    case "right":
+      return {
+        left: triggerRect.right + offset,
+        top: triggerRect.top + triggerRect.height / 2 - bubbleRect.height / 2
+      };
+  }
+}
+function fitsViewport(pos, bubbleRect) {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const leftOk = pos.left >= VIEWPORT_PADDING;
+  const rightOk = pos.left + bubbleRect.width <= vw - VIEWPORT_PADDING;
+  const topOk = pos.top >= VIEWPORT_PADDING;
+  const bottomOk = pos.top + bubbleRect.height <= vh - VIEWPORT_PADDING;
+  return leftOk && rightOk && topOk && bottomOk;
+}
+function shallowEqualActive(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.id === b.id && a.open === b.open && a.content === b.content && a.placement === b.placement && a.offset === b.offset && a.triggerEl === b.triggerEl;
+}
+function TooltipProvider({ children }) {
+  const [active, setActive] = useState(null);
+  const showTimerRef = useRef(null);
+  const show = useCallback((next) => {
+    if (showTimerRef.current) clearTimeout(showTimerRef.current);
+    showTimerRef.current = setTimeout(() => {
+      showTimerRef.current = null;
+      setActive((curr) => {
+        const proposed = { ...next, open: true };
+        return shallowEqualActive(curr, proposed) ? curr : proposed;
+      });
+    }, SHOW_DELAY_MS);
+  }, []);
+  const hide = useCallback((id) => {
+    if (showTimerRef.current) {
+      clearTimeout(showTimerRef.current);
+      showTimerRef.current = null;
+    }
+    setActive((curr) => {
+      if (!curr || curr.id !== id) return curr;
+      return null;
+    });
+  }, []);
+  const update = useCallback((id, patch) => {
+    setActive((curr) => {
+      if (!curr || curr.id !== id) return curr;
+      const proposed = { ...curr, ...patch };
+      return shallowEqualActive(curr, proposed) ? curr : proposed;
+    });
+  }, []);
+  const value = useMemo(() => ({ show, hide, update, active }), [show, hide, update, active]);
+  return /* @__PURE__ */ jsxs(TooltipContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsx(TooltipLayer, {})
+  ] });
+}
+function TooltipLayer() {
+  const ctx = useContext(TooltipContext);
+  const active = ctx == null ? void 0 : ctx.active;
+  const bubbleRef = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [placement, setPlacement] = useState("top");
+  const [pos, setPos] = useState({ top: 0, left: 0 });
+  const lastPlacementRef = useRef("top");
+  const lastPosRef = useRef({ top: 0, left: 0 });
+  const lastActiveIdRef = useRef(null);
+  const rafRef = useRef(null);
+  useEffect(() => setMounted(true), []);
+  const recompute = useCallback(() => {
+    if (!(active == null ? void 0 : active.open)) return;
+    const trigger = active.triggerEl;
+    const bubble = bubbleRef.current;
+    if (!trigger || !bubble) return;
+    const triggerRect = trigger.getBoundingClientRect();
+    const bubbleRect = bubble.getBoundingClientRect();
+    if (bubbleRect.width === 0 || bubbleRect.height === 0) {
+      if (visible) setVisible(false);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(recompute);
+      return;
+    }
+    const candidates = [active.placement, flippedPlacement(active.placement)];
+    let chosen = candidates[0];
+    let nextPos = computePosition({
+      triggerRect,
+      bubbleRect,
+      placement: chosen,
+      offset: active.offset
+    });
+    if (!fitsViewport(nextPos, bubbleRect)) {
+      const alt = candidates[1];
+      const altPos = computePosition({
+        triggerRect,
+        bubbleRect,
+        placement: alt,
+        offset: active.offset
+      });
+      if (fitsViewport(altPos, bubbleRect)) {
+        chosen = alt;
+        nextPos = altPos;
+      }
+    }
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const left = clamp(nextPos.left, VIEWPORT_PADDING, vw - bubbleRect.width - VIEWPORT_PADDING);
+    const top = clamp(nextPos.top, VIEWPORT_PADDING, vh - bubbleRect.height - VIEWPORT_PADDING);
+    const prevPos = lastPosRef.current;
+    if (prevPos.left !== left || prevPos.top !== top) {
+      lastPosRef.current = { left, top };
+      setPos({ left, top });
+    }
+    if (lastPlacementRef.current !== chosen) {
+      lastPlacementRef.current = chosen;
+      setPlacement(chosen);
+    }
+    if (!visible) setVisible(true);
+  }, [active == null ? void 0 : active.open, active == null ? void 0 : active.triggerEl, active == null ? void 0 : active.placement, active == null ? void 0 : active.offset, visible]);
+  useEffect(() => {
+    const nextOpen = !!(active == null ? void 0 : active.open);
+    setOpen((prev) => prev === nextOpen ? prev : nextOpen);
+    if (nextOpen) setVisible(false);
+    if (!nextOpen) lastActiveIdRef.current = null;
+  }, [active == null ? void 0 : active.open]);
+  useLayoutEffect(() => {
+    var _a;
+    const id = (_a = active == null ? void 0 : active.id) != null ? _a : null;
+    if (!id) return;
+    if (lastActiveIdRef.current && lastActiveIdRef.current !== id) {
+      setVisible(false);
+    }
+    lastActiveIdRef.current = id;
+    if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(recompute);
+    return () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [active == null ? void 0 : active.id, recompute]);
+  useLayoutEffect(() => {
+    if (!open) return;
+    if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(recompute);
+    const onResize = () => recompute();
+    const onScroll = () => recompute();
+    window.addEventListener("resize", onResize);
+    window.addEventListener("scroll", onScroll, true);
+    const ro = new ResizeObserver(() => recompute());
+    if (active == null ? void 0 : active.triggerEl) ro.observe(active.triggerEl);
+    if (bubbleRef.current) ro.observe(bubbleRef.current);
+    return () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onScroll, true);
+      ro.disconnect();
+    };
+  }, [open, recompute, active == null ? void 0 : active.triggerEl]);
+  useEffect(() => {
+    if (!open || !active) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") ctx.hide(active.id);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, active == null ? void 0 : active.id]);
+  if (!ctx) return null;
+  if (!mounted || !active) return null;
+  const bubbleStyle = visible ? { top: pos.top, left: pos.left } : { top: -9999, left: -9999 };
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: bubbleRef,
+        id: active.id,
+        role: "tooltip",
+        className: styles.bubble,
+        "data-open": visible ? "true" : "false",
+        "data-placement": placement,
+        style: bubbleStyle,
+        "aria-hidden": !visible,
+        children: active.content
+      }
+    ),
+    document.body
+  );
+}
+
+export { TooltipContext, TooltipProvider };

package/dist/components/overlay/tooltip/useTooltipTrigger.cjs

@@ -0,0 +1,117 @@
+'use strict';
+
+var react = require('react');
+var TooltipProvider = require('./TooltipProvider');
+
+function useTooltipTrigger(options) {
+  const ctx = react.useContext(TooltipProvider.TooltipContext);
+  if (!ctx) throw new Error("useTooltipTrigger must be used within <TooltipProvider>.");
+  const {
+    content,
+    placement = "top",
+    offset = 8,
+    open,
+    defaultOpen = false,
+    delayOpenMs = 150,
+    delayCloseMs = 50,
+    focusOpenMode = "focus-visible",
+    closeOnPointerDown = true
+  } = options;
+  const id = react.useId();
+  const triggerElRef = react.useRef(null);
+  const isControlled = open !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = react.useState(defaultOpen);
+  const isOpen = isControlled ? !!open : uncontrolledOpen;
+  const openTimer = react.useRef(null);
+  const closeTimer = react.useRef(null);
+  const clearTimers = () => {
+    if (openTimer.current) window.clearTimeout(openTimer.current);
+    if (closeTimer.current) window.clearTimeout(closeTimer.current);
+    openTimer.current = null;
+    closeTimer.current = null;
+  };
+  const lastSentRef = react.useRef(null);
+  const show = react.useCallback(() => {
+    if (!content) return;
+    ctx.show({
+      id,
+      content,
+      placement,
+      offset,
+      triggerEl: triggerElRef.current
+    });
+    lastSentRef.current = { content, placement, offset };
+  }, [ctx, id, content, placement, offset]);
+  const hide = react.useCallback(() => {
+    ctx.hide(id);
+  }, [ctx, id]);
+  react.useEffect(() => {
+    if (!isOpen) {
+      hide();
+      return;
+    }
+    show();
+  }, [isOpen, show, hide]);
+  react.useEffect(() => {
+    var _a;
+    if (!isOpen) return;
+    if (((_a = ctx.active) == null ? void 0 : _a.id) !== id) return;
+    const last = lastSentRef.current;
+    const changed = !last || last.content !== content || last.placement !== placement || last.offset !== offset;
+    if (!changed) return;
+    ctx.update(id, {
+      content,
+      placement,
+      offset,
+      triggerEl: triggerElRef.current
+    });
+    lastSentRef.current = { content, placement, offset };
+  }, [ctx, id, isOpen, content, placement, offset]);
+  const setOpen = (next) => {
+    if (isControlled) return;
+    setUncontrolledOpen(next);
+  };
+  const onPointerEnter = () => {
+    clearTimers();
+    if (isControlled) return;
+    openTimer.current = window.setTimeout(() => setOpen(true), delayOpenMs);
+  };
+  const onPointerLeave = () => {
+    clearTimers();
+    if (isControlled) return;
+    closeTimer.current = window.setTimeout(() => setOpen(false), delayCloseMs);
+  };
+  const onPointerDown = () => {
+    clearTimers();
+    if (!isControlled && closeOnPointerDown) setOpen(false);
+  };
+  const onFocus = (e) => {
+    clearTimers();
+    if (focusOpenMode === "off") return;
+    const shouldOpen = focusOpenMode === "any" || e.currentTarget.matches(":focus-visible");
+    if (!isControlled && shouldOpen) {
+      openTimer.current = window.setTimeout(() => setOpen(true), delayOpenMs);
+    }
+  };
+  const onBlur = () => {
+    clearTimers();
+    if (!isControlled) setOpen(false);
+  };
+  return {
+    id,
+    isOpen,
+    triggerProps: {
+      ref: (node) => {
+        triggerElRef.current = node;
+      },
+      onPointerEnter,
+      onPointerLeave,
+      onPointerDown,
+      onFocus,
+      onBlur,
+      "aria-describedby": content ? id : void 0
+    }
+  };
+}
+
+exports.useTooltipTrigger = useTooltipTrigger;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { TooltipPlacement } from './TooltipProvider';
+type UseTooltipOptions = {
+    content: ReactNode;
+    placement?: TooltipPlacement;
+    offset?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    delayOpenMs?: number;
+    delayCloseMs?: number;
+    focusOpenMode?: 'focus-visible' | 'any' | 'off';
+    closeOnPointerDown?: boolean;
+};
+export declare function useTooltipTrigger(options: UseTooltipOptions): {
+    id: string;
+    isOpen: boolean;
+    triggerProps: {
+        ref: (node: HTMLElement | null) => void;
+        onPointerEnter: () => void;
+        onPointerLeave: () => void;
+        onPointerDown: () => void;
+        onFocus: (e: React.FocusEvent) => void;
+        onBlur: () => void;
+        'aria-describedby'?: string;
+    };
+};
+export {};