@asnewyla/unstyled-tooltip 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 XD
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,58 @@
+# @asnewyla/unstyled-tooltip
+
+Unstyled, accessible tooltip primitive. Compound components, hover/focus open
+with a delay, Escape to dismiss — no visual styling, the base layer under
+`@asnewyla/tooltip`.
+
+## Install
+
+```bash
+npm install @asnewyla/unstyled-tooltip
+```
+
+## Usage
+
+```tsx
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from '@asnewyla/unstyled-tooltip';
+
+<Tooltip>
+  <TooltipTrigger>
+    <button type="button">Save</button>
+  </TooltipTrigger>
+  <TooltipContent>Saves your work automatically</TooltipContent>
+</Tooltip>
+
+// Controlled
+<Tooltip open={open} onOpenChange={setOpen}>
+  ...
+</Tooltip>
+```
+
+### Components
+
+| Component | Renders | Notes |
+|---|---|---|
+| `Tooltip` | `<span>` wrapper | Owns open state (`open`/`defaultOpen`/`onOpenChange`), `delay?` (hover open delay, ms, default `700`). The wrapper is `position: relative; display: inline-block` so `TooltipContent` can place itself with plain CSS |
+| `TooltipTrigger` | its single child, cloned | Injects `aria-describedby` (while open) and pointer/focus/blur handlers onto whatever element you pass — a `<button>`, a link, an input. The child must forward `ref` and props |
+| `TooltipContent` | `<span role="tooltip">` | `side?` → `data-side` (`top`/`right`/`bottom`/`left`, default `top`). Rendered only while open |
+
+### Behavior
+
+- Opens on pointer enter after `delay` ms, or immediately on keyboard focus.
+- Closes on pointer leave, blur, `Escape`, or pressing the trigger.
+- `Escape` closing is the one hard WAI-ARIA requirement and works regardless of how the tooltip was opened.
+- `aria-describedby` on the trigger points at the content's id only while the tooltip is open.
+
+### Not yet supported
+
+- **Collision-aware positioning.** `side` is honored as-is; a tooltip near a viewport edge is not flipped or shifted.
+- **Portal rendering.** The content renders inline, so an ancestor with `overflow: hidden` can clip it.
+- **Hoverable content.** Moving the pointer onto the tooltip closes it — it's for display, not interaction.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+import { ReactNode, ComponentPropsWithoutRef, ReactElement } from 'react';
+
+type TooltipProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Hover open delay in ms. Keyboard focus always opens with no delay. */
+    delay?: number;
+    children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<'span'>, 'onChange' | 'children'>;
+declare const Tooltip: react.ForwardRefExoticComponent<{
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Hover open delay in ms. Keyboard focus always opens with no delay. */
+    delay?: number;
+    children: ReactNode;
+} & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children" | "onChange"> & react.RefAttributes<HTMLSpanElement>>;
+
+type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
+type TooltipContentProps = {
+    side?: TooltipSide;
+} & Omit<ComponentPropsWithoutRef<'span'>, 'role' | 'id'>;
+declare const TooltipContent: react.ForwardRefExoticComponent<{
+    side?: TooltipSide;
+} & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "id" | "role"> & react.RefAttributes<HTMLSpanElement>>;
+
+type TooltipTriggerProps = {
+    /** A single focusable element. It is cloned, not wrapped. */
+    children: ReactNode;
+};
+declare function TooltipTrigger({ children, }: TooltipTriggerProps): ReactElement;
+
+export { Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, type TooltipSide, TooltipTrigger, type TooltipTriggerProps };

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+import { ReactNode, ComponentPropsWithoutRef, ReactElement } from 'react';
+
+type TooltipProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Hover open delay in ms. Keyboard focus always opens with no delay. */
+    delay?: number;
+    children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<'span'>, 'onChange' | 'children'>;
+declare const Tooltip: react.ForwardRefExoticComponent<{
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Hover open delay in ms. Keyboard focus always opens with no delay. */
+    delay?: number;
+    children: ReactNode;
+} & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children" | "onChange"> & react.RefAttributes<HTMLSpanElement>>;
+
+type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
+type TooltipContentProps = {
+    side?: TooltipSide;
+} & Omit<ComponentPropsWithoutRef<'span'>, 'role' | 'id'>;
+declare const TooltipContent: react.ForwardRefExoticComponent<{
+    side?: TooltipSide;
+} & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "id" | "role"> & react.RefAttributes<HTMLSpanElement>>;
+
+type TooltipTriggerProps = {
+    /** A single focusable element. It is cloned, not wrapped. */
+    children: ReactNode;
+};
+declare function TooltipTrigger({ children, }: TooltipTriggerProps): ReactElement;
+
+export { Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, type TooltipSide, TooltipTrigger, type TooltipTriggerProps };

package/dist/index.js

@@ -0,0 +1,144 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Tooltip.tsx
+var TooltipContext = react.createContext(null);
+function useTooltipContext() {
+  const context = react.useContext(TooltipContext);
+  if (!context) {
+    throw new Error(
+      "Tooltip compound components (TooltipTrigger, TooltipContent) must be rendered inside <Tooltip>"
+    );
+  }
+  return context;
+}
+function useTooltipOpen({
+  open,
+  defaultOpen,
+  onOpenChange
+}) {
+  const isControlled = open !== void 0;
+  const [internalOpen, setInternalOpen] = react.useState(defaultOpen ?? false);
+  const actualOpen = isControlled ? open : internalOpen;
+  const setOpen = react.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInternalOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  return { open: actualOpen, setOpen };
+}
+function TooltipInner({
+  open,
+  defaultOpen,
+  onOpenChange,
+  delay = 700,
+  children,
+  style,
+  ...rest
+}, ref) {
+  const contentId = react.useId();
+  const { open: isOpen, setOpen } = useTooltipOpen({
+    open,
+    defaultOpen,
+    onOpenChange
+  });
+  const openTimer = react.useRef(null);
+  const clearOpenTimer = react.useCallback(() => {
+    if (openTimer.current !== null) {
+      clearTimeout(openTimer.current);
+      openTimer.current = null;
+    }
+  }, []);
+  const close = react.useCallback(() => {
+    clearOpenTimer();
+    setOpen(false);
+  }, [clearOpenTimer, setOpen]);
+  const openNow = react.useCallback(() => {
+    clearOpenTimer();
+    setOpen(true);
+  }, [clearOpenTimer, setOpen]);
+  const openWithDelay = react.useCallback(() => {
+    clearOpenTimer();
+    if (delay <= 0) {
+      setOpen(true);
+      return;
+    }
+    openTimer.current = setTimeout(() => {
+      openTimer.current = null;
+      setOpen(true);
+    }, delay);
+  }, [clearOpenTimer, delay, setOpen]);
+  react.useEffect(() => clearOpenTimer, [clearOpenTimer]);
+  react.useEffect(() => {
+    if (!isOpen) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        close();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [isOpen, close]);
+  const contextValue = react.useMemo(
+    () => ({ open: isOpen, contentId, openNow, openWithDelay, close }),
+    [isOpen, contentId, openNow, openWithDelay, close]
+  );
+  const wrapperStyle = {
+    position: "relative",
+    display: "inline-block",
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("span", { ...rest, ref, style: wrapperStyle, children }) });
+}
+var Tooltip = react.forwardRef(TooltipInner);
+function TooltipContentInner({ side = "top", ...rest }, ref) {
+  const { open, contentId } = useTooltipContext();
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...rest, ref, role: "tooltip", id: contentId, "data-side": side });
+}
+var TooltipContent = react.forwardRef(
+  TooltipContentInner
+);
+
+// src/components/composeEventHandlers.ts
+function composeEventHandlers(consumerHandler, ownHandler) {
+  return (event) => {
+    consumerHandler?.(event);
+    ownHandler(event);
+  };
+}
+
+// src/components/TooltipTrigger.tsx
+function TooltipTrigger({
+  children
+}) {
+  const { open, contentId, openNow, openWithDelay, close } = useTooltipContext();
+  const child = react.Children.only(children);
+  const childProps = child.props;
+  const describedBy = open ? [childProps["aria-describedby"], contentId].filter(Boolean).join(" ") : childProps["aria-describedby"];
+  return react.cloneElement(child, {
+    "aria-describedby": describedBy,
+    onPointerEnter: composeEventHandlers(
+      childProps.onPointerEnter,
+      openWithDelay
+    ),
+    onPointerLeave: composeEventHandlers(childProps.onPointerLeave, close),
+    onPointerDown: composeEventHandlers(childProps.onPointerDown, close),
+    onFocus: composeEventHandlers(childProps.onFocus, openNow),
+    onBlur: composeEventHandlers(childProps.onBlur, close)
+  });
+}
+
+exports.Tooltip = Tooltip;
+exports.TooltipContent = TooltipContent;
+exports.TooltipTrigger = TooltipTrigger;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TooltipContext.tsx","../src/components/Tooltip.tsx","../src/components/TooltipContent.tsx","../src/components/composeEventHandlers.ts","../src/components/TooltipTrigger.tsx"],"names":["createContext","useContext","useState","useCallback","useId","useRef","useEffect","useMemo","jsx","forwardRef","Children","cloneElement"],"mappings":"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","file":"index.js","sourcesContent":["import { createContext, useCallback, useContext, useState } from 'react';\n\nexport type TooltipContextValue = {\n  open: boolean;\n  contentId: string;\n  /** Open now, no delay — used for keyboard focus. */\n  openNow: () => void;\n  /** Open after the configured hover delay — used for pointer enter. */\n  openWithDelay: () => void;\n  /** Close now and cancel any pending open. */\n  close: () => void;\n};\n\nexport const TooltipContext = createContext<TooltipContextValue | null>(null);\n\nexport function useTooltipContext(): TooltipContextValue {\n  const context = useContext(TooltipContext);\n  if (!context) {\n    throw new Error(\n      'Tooltip compound components (TooltipTrigger, TooltipContent) must be rendered inside <Tooltip>',\n    );\n  }\n  return context;\n}\n\nexport function useTooltipOpen({\n  open,\n  defaultOpen,\n  onOpenChange,\n}: {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}): { open: boolean; setOpen: (next: boolean) => void } {\n  const isControlled = open !== undefined;\n  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);\n  const actualOpen = isControlled ? open : internalOpen;\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(next);\n      }\n      onOpenChange?.(next);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  return { open: actualOpen, setOpen };\n}\n","import {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n} from 'react';\nimport { TooltipContext, useTooltipOpen } from './TooltipContext';\n\nexport type TooltipProps = {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Hover open delay in ms. Keyboard focus always opens with no delay. */\n  delay?: number;\n  children: ReactNode;\n} & Omit<ComponentPropsWithoutRef<'span'>, 'onChange' | 'children'>;\n\nfunction TooltipInner(\n  {\n    open,\n    defaultOpen,\n    onOpenChange,\n    delay = 700,\n    children,\n    style,\n    ...rest\n  }: TooltipProps,\n  ref: ForwardedRef<HTMLSpanElement>,\n) {\n  const contentId = useId();\n  const { open: isOpen, setOpen } = useTooltipOpen({\n    open,\n    defaultOpen,\n    onOpenChange,\n  });\n\n  const openTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const clearOpenTimer = useCallback(() => {\n    if (openTimer.current !== null) {\n      clearTimeout(openTimer.current);\n      openTimer.current = null;\n    }\n  }, []);\n\n  const close = useCallback(() => {\n    clearOpenTimer();\n    setOpen(false);\n  }, [clearOpenTimer, setOpen]);\n\n  const openNow = useCallback(() => {\n    clearOpenTimer();\n    setOpen(true);\n  }, [clearOpenTimer, setOpen]);\n\n  const openWithDelay = useCallback(() => {\n    clearOpenTimer();\n    if (delay <= 0) {\n      setOpen(true);\n      return;\n    }\n    openTimer.current = setTimeout(() => {\n      openTimer.current = null;\n      setOpen(true);\n    }, delay);\n  }, [clearOpenTimer, delay, setOpen]);\n\n  useEffect(() => clearOpenTimer, [clearOpenTimer]);\n\n  // Escape closes an open tooltip — WAI-ARIA APG's one hard requirement.\n  useEffect(() => {\n    if (!isOpen) return;\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        close();\n      }\n    };\n    document.addEventListener('keydown', onKeyDown);\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, [isOpen, close]);\n\n  const contextValue = useMemo(\n    () => ({ open: isOpen, contentId, openNow, openWithDelay, close }),\n    [isOpen, contentId, openNow, openWithDelay, close],\n  );\n\n  // A shrink-wrapped positioned box so TooltipContent can place itself with\n  // plain CSS (position: absolute + data-side) — no portal, no measurement.\n  const wrapperStyle: CSSProperties = {\n    position: 'relative',\n    display: 'inline-block',\n    ...style,\n  };\n\n  return (\n    <TooltipContext.Provider value={contextValue}>\n      <span {...rest} ref={ref} style={wrapperStyle}>\n        {children}\n      </span>\n    </TooltipContext.Provider>\n  );\n}\n\nexport const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(TooltipInner);\n","import {\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  forwardRef,\n} from 'react';\nimport { useTooltipContext } from './TooltipContext';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\n\nexport type TooltipContentProps = {\n  side?: TooltipSide;\n} & Omit<ComponentPropsWithoutRef<'span'>, 'role' | 'id'>;\n\nfunction TooltipContentInner(\n  { side = 'top', ...rest }: TooltipContentProps,\n  ref: ForwardedRef<HTMLSpanElement>,\n) {\n  const { open, contentId } = useTooltipContext();\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <span {...rest} ref={ref} role=\"tooltip\" id={contentId} data-side={side} />\n  );\n}\n\nexport const TooltipContent = forwardRef<HTMLSpanElement, TooltipContentProps>(\n  TooltipContentInner,\n);\n","/**\n * Wraps a consumer-supplied event handler so the component's own handler runs\n * after it. Both always run — a tooltip never wants the consumer to be able to\n * silently suppress its open/close behavior.\n */\nexport function composeEventHandlers<E>(\n  consumerHandler: ((event: E) => void) | undefined,\n  ownHandler: (event: E) => void,\n): (event: E) => void {\n  return (event: E) => {\n    consumerHandler?.(event);\n    ownHandler(event);\n  };\n}\n","import {\n  Children,\n  cloneElement,\n  type PointerEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { composeEventHandlers } from './composeEventHandlers';\nimport { useTooltipContext } from './TooltipContext';\n\nexport type TooltipTriggerProps = {\n  /** A single focusable element. It is cloned, not wrapped. */\n  children: ReactNode;\n};\n\ntype TriggerChildProps = {\n  'aria-describedby'?: string;\n  onPointerEnter?: (event: PointerEvent) => void;\n  onPointerLeave?: (event: PointerEvent) => void;\n  onPointerDown?: (event: PointerEvent) => void;\n  onFocus?: (event: React.FocusEvent) => void;\n  onBlur?: (event: React.FocusEvent) => void;\n};\n\nexport function TooltipTrigger({\n  children,\n}: TooltipTriggerProps): ReactElement {\n  const { open, contentId, openNow, openWithDelay, close } =\n    useTooltipContext();\n  const child = Children.only(children) as ReactElement<TriggerChildProps>;\n  const childProps = child.props;\n\n  const describedBy = open\n    ? [childProps['aria-describedby'], contentId].filter(Boolean).join(' ')\n    : childProps['aria-describedby'];\n\n  return cloneElement(child, {\n    'aria-describedby': describedBy,\n    onPointerEnter: composeEventHandlers(\n      childProps.onPointerEnter,\n      openWithDelay,\n    ),\n    onPointerLeave: composeEventHandlers(childProps.onPointerLeave, close),\n    onPointerDown: composeEventHandlers(childProps.onPointerDown, close),\n    onFocus: composeEventHandlers(childProps.onFocus, openNow),\n    onBlur: composeEventHandlers(childProps.onBlur, close),\n  });\n}\n"]}

package/dist/index.mjs

@@ -0,0 +1,140 @@
+import { createContext, forwardRef, useId, useRef, useCallback, useEffect, useMemo, useState, useContext, Children, cloneElement } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Tooltip.tsx
+var TooltipContext = createContext(null);
+function useTooltipContext() {
+  const context = useContext(TooltipContext);
+  if (!context) {
+    throw new Error(
+      "Tooltip compound components (TooltipTrigger, TooltipContent) must be rendered inside <Tooltip>"
+    );
+  }
+  return context;
+}
+function useTooltipOpen({
+  open,
+  defaultOpen,
+  onOpenChange
+}) {
+  const isControlled = open !== void 0;
+  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+  const actualOpen = isControlled ? open : internalOpen;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInternalOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  return { open: actualOpen, setOpen };
+}
+function TooltipInner({
+  open,
+  defaultOpen,
+  onOpenChange,
+  delay = 700,
+  children,
+  style,
+  ...rest
+}, ref) {
+  const contentId = useId();
+  const { open: isOpen, setOpen } = useTooltipOpen({
+    open,
+    defaultOpen,
+    onOpenChange
+  });
+  const openTimer = useRef(null);
+  const clearOpenTimer = useCallback(() => {
+    if (openTimer.current !== null) {
+      clearTimeout(openTimer.current);
+      openTimer.current = null;
+    }
+  }, []);
+  const close = useCallback(() => {
+    clearOpenTimer();
+    setOpen(false);
+  }, [clearOpenTimer, setOpen]);
+  const openNow = useCallback(() => {
+    clearOpenTimer();
+    setOpen(true);
+  }, [clearOpenTimer, setOpen]);
+  const openWithDelay = useCallback(() => {
+    clearOpenTimer();
+    if (delay <= 0) {
+      setOpen(true);
+      return;
+    }
+    openTimer.current = setTimeout(() => {
+      openTimer.current = null;
+      setOpen(true);
+    }, delay);
+  }, [clearOpenTimer, delay, setOpen]);
+  useEffect(() => clearOpenTimer, [clearOpenTimer]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        close();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [isOpen, close]);
+  const contextValue = useMemo(
+    () => ({ open: isOpen, contentId, openNow, openWithDelay, close }),
+    [isOpen, contentId, openNow, openWithDelay, close]
+  );
+  const wrapperStyle = {
+    position: "relative",
+    display: "inline-block",
+    ...style
+  };
+  return /* @__PURE__ */ jsx(TooltipContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("span", { ...rest, ref, style: wrapperStyle, children }) });
+}
+var Tooltip = forwardRef(TooltipInner);
+function TooltipContentInner({ side = "top", ...rest }, ref) {
+  const { open, contentId } = useTooltipContext();
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("span", { ...rest, ref, role: "tooltip", id: contentId, "data-side": side });
+}
+var TooltipContent = forwardRef(
+  TooltipContentInner
+);
+
+// src/components/composeEventHandlers.ts
+function composeEventHandlers(consumerHandler, ownHandler) {
+  return (event) => {
+    consumerHandler?.(event);
+    ownHandler(event);
+  };
+}
+
+// src/components/TooltipTrigger.tsx
+function TooltipTrigger({
+  children
+}) {
+  const { open, contentId, openNow, openWithDelay, close } = useTooltipContext();
+  const child = Children.only(children);
+  const childProps = child.props;
+  const describedBy = open ? [childProps["aria-describedby"], contentId].filter(Boolean).join(" ") : childProps["aria-describedby"];
+  return cloneElement(child, {
+    "aria-describedby": describedBy,
+    onPointerEnter: composeEventHandlers(
+      childProps.onPointerEnter,
+      openWithDelay
+    ),
+    onPointerLeave: composeEventHandlers(childProps.onPointerLeave, close),
+    onPointerDown: composeEventHandlers(childProps.onPointerDown, close),
+    onFocus: composeEventHandlers(childProps.onFocus, openNow),
+    onBlur: composeEventHandlers(childProps.onBlur, close)
+  });
+}
+
+export { Tooltip, TooltipContent, TooltipTrigger };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TooltipContext.tsx","../src/components/Tooltip.tsx","../src/components/TooltipContent.tsx","../src/components/composeEventHandlers.ts","../src/components/TooltipTrigger.tsx"],"names":["useCallback","jsx","forwardRef"],"mappings":";;;;AAaO,IAAM,cAAA,GAAiB,cAA0C,IAAI,CAAA;AAErE,SAAS,iBAAA,GAAyC;AACvD,EAAA,MAAM,OAAA,GAAU,WAAW,cAAc,CAAA;AACzC,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AACA,EAAA,OAAO,OAAA;AACT;AAEO,SAAS,cAAA,CAAe;AAAA,EAC7B,IAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAIwD;AACtD,EAAA,MAAM,eAAe,IAAA,KAAS,MAAA;AAC9B,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,QAAA,CAAS,eAAe,KAAK,CAAA;AACrE,EAAA,MAAM,UAAA,GAAa,eAAe,IAAA,GAAO,YAAA;AAEzC,EAAA,MAAM,OAAA,GAAU,WAAA;AAAA,IACd,CAAC,IAAA,KAAkB;AACjB,MAAA,IAAI,CAAC,YAAA,EAAc;AACjB,QAAA,eAAA,CAAgB,IAAI,CAAA;AAAA,MACtB;AACA,MAAA,YAAA,GAAe,IAAI,CAAA;AAAA,IACrB,CAAA;AAAA,IACA,CAAC,cAAc,YAAY;AAAA,GAC7B;AAEA,EAAA,OAAO,EAAE,IAAA,EAAM,UAAA,EAAY,OAAA,EAAQ;AACrC;AC1BA,SAAS,YAAA,CACP;AAAA,EACE,IAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA,GAAQ,GAAA;AAAA,EACR,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,YAAY,KAAA,EAAM;AACxB,EAAA,MAAM,EAAE,IAAA,EAAM,MAAA,EAAQ,OAAA,KAAY,cAAA,CAAe;AAAA,IAC/C,IAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,SAAA,GAAY,OAA6C,IAAI,CAAA;AAEnE,EAAA,MAAM,cAAA,GAAiBA,YAAY,MAAM;AACvC,IAAA,IAAI,SAAA,CAAU,YAAY,IAAA,EAAM;AAC9B,MAAA,YAAA,CAAa,UAAU,OAAO,CAAA;AAC9B,MAAA,SAAA,CAAU,OAAA,GAAU,IAAA;AAAA,IACtB;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,KAAA,GAAQA,YAAY,MAAM;AAC9B,IAAA,cAAA,EAAe;AACf,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,EACf,CAAA,EAAG,CAAC,cAAA,EAAgB,OAAO,CAAC,CAAA;AAE5B,EAAA,MAAM,OAAA,GAAUA,YAAY,MAAM;AAChC,IAAA,cAAA,EAAe;AACf,IAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,EACd,CAAA,EAAG,CAAC,cAAA,EAAgB,OAAO,CAAC,CAAA;AAE5B,EAAA,MAAM,aAAA,GAAgBA,YAAY,MAAM;AACtC,IAAA,cAAA,EAAe;AACf,IAAA,IAAI,SAAS,CAAA,EAAG;AACd,MAAA,OAAA,CAAQ,IAAI,CAAA;AACZ,MAAA;AAAA,IACF;AACA,IAAA,SAAA,CAAU,OAAA,GAAU,WAAW,MAAM;AACnC,MAAA,SAAA,CAAU,OAAA,GAAU,IAAA;AACpB,MAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,IACd,GAAG,KAAK,CAAA;AAAA,EACV,CAAA,EAAG,CAAC,cAAA,EAAgB,KAAA,EAAO,OAAO,CAAC,CAAA;AAEnC,EAAA,SAAA,CAAU,MAAM,cAAA,EAAgB,CAAC,cAAc,CAAC,CAAA;AAGhD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,MAAA,EAAQ;AACb,IAAA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,MAAA,IAAI,KAAA,CAAM,QAAQ,QAAA,EAAU;AAC1B,QAAA,KAAA,EAAM;AAAA,MACR;AAAA,IACF,CAAA;AACA,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,SAAS,CAAA;AAC9C,IAAA,OAAO,MAAM,QAAA,CAAS,mBAAA,CAAoB,SAAA,EAAW,SAAS,CAAA;AAAA,EAChE,CAAA,EAAG,CAAC,MAAA,EAAQ,KAAK,CAAC,CAAA;AAElB,EAAA,MAAM,YAAA,GAAe,OAAA;AAAA,IACnB,OAAO,EAAE,IAAA,EAAM,QAAQ,SAAA,EAAW,OAAA,EAAS,eAAe,KAAA,EAAM,CAAA;AAAA,IAChE,CAAC,MAAA,EAAQ,SAAA,EAAW,OAAA,EAAS,eAAe,KAAK;AAAA,GACnD;AAIA,EAAA,MAAM,YAAA,GAA8B;AAAA,IAClC,QAAA,EAAU,UAAA;AAAA,IACV,OAAA,EAAS,cAAA;AAAA,IACT,GAAG;AAAA,GACL;AAEA,EAAA,uBACE,GAAA,CAAC,cAAA,CAAe,QAAA,EAAf,EAAwB,OAAO,YAAA,EAC9B,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAM,GAAG,IAAA,EAAM,GAAA,EAAU,KAAA,EAAO,YAAA,EAC9B,UACH,CAAA,EACF,CAAA;AAEJ;AAEO,IAAM,OAAA,GAAU,WAA0C,YAAY;AChG7E,SAAS,oBACP,EAAE,IAAA,GAAO,OAAO,GAAG,IAAA,IACnB,GAAA,EACA;AACA,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAU,GAAI,iBAAA,EAAkB;AAE9C,EAAA,IAAI,CAAC,IAAA,EAAM;AACT,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACEC,GAAAA,CAAC,MAAA,EAAA,EAAM,GAAG,IAAA,EAAM,GAAA,EAAU,IAAA,EAAK,SAAA,EAAU,EAAA,EAAI,SAAA,EAAW,WAAA,EAAW,IAAA,EAAM,CAAA;AAE7E;AAEO,IAAM,cAAA,GAAiBC,UAAAA;AAAA,EAC5B;AACF;;;ACzBO,SAAS,oBAAA,CACd,iBACA,UAAA,EACoB;AACpB,EAAA,OAAO,CAAC,KAAA,KAAa;AACnB,IAAA,eAAA,GAAkB,KAAK,CAAA;AACvB,IAAA,UAAA,CAAW,KAAK,CAAA;AAAA,EAClB,CAAA;AACF;;;ACWO,SAAS,cAAA,CAAe;AAAA,EAC7B;AACF,CAAA,EAAsC;AACpC,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAW,SAAS,aAAA,EAAe,KAAA,KAC/C,iBAAA,EAAkB;AACpB,EAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,IAAA,CAAK,QAAQ,CAAA;AACpC,EAAA,MAAM,aAAa,KAAA,CAAM,KAAA;AAEzB,EAAA,MAAM,WAAA,GAAc,IAAA,GAChB,CAAC,UAAA,CAAW,kBAAkB,CAAA,EAAG,SAAS,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA,GACpE,WAAW,kBAAkB,CAAA;AAEjC,EAAA,OAAO,aAAa,KAAA,EAAO;AAAA,IACzB,kBAAA,EAAoB,WAAA;AAAA,IACpB,cAAA,EAAgB,oBAAA;AAAA,MACd,UAAA,CAAW,cAAA;AAAA,MACX;AAAA,KACF;AAAA,IACA,cAAA,EAAgB,oBAAA,CAAqB,UAAA,CAAW,cAAA,EAAgB,KAAK,CAAA;AAAA,IACrE,aAAA,EAAe,oBAAA,CAAqB,UAAA,CAAW,aAAA,EAAe,KAAK,CAAA;AAAA,IACnE,OAAA,EAAS,oBAAA,CAAqB,UAAA,CAAW,OAAA,EAAS,OAAO,CAAA;AAAA,IACzD,MAAA,EAAQ,oBAAA,CAAqB,UAAA,CAAW,MAAA,EAAQ,KAAK;AAAA,GACtD,CAAA;AACH","file":"index.mjs","sourcesContent":["import { createContext, useCallback, useContext, useState } from 'react';\n\nexport type TooltipContextValue = {\n  open: boolean;\n  contentId: string;\n  /** Open now, no delay — used for keyboard focus. */\n  openNow: () => void;\n  /** Open after the configured hover delay — used for pointer enter. */\n  openWithDelay: () => void;\n  /** Close now and cancel any pending open. */\n  close: () => void;\n};\n\nexport const TooltipContext = createContext<TooltipContextValue | null>(null);\n\nexport function useTooltipContext(): TooltipContextValue {\n  const context = useContext(TooltipContext);\n  if (!context) {\n    throw new Error(\n      'Tooltip compound components (TooltipTrigger, TooltipContent) must be rendered inside <Tooltip>',\n    );\n  }\n  return context;\n}\n\nexport function useTooltipOpen({\n  open,\n  defaultOpen,\n  onOpenChange,\n}: {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}): { open: boolean; setOpen: (next: boolean) => void } {\n  const isControlled = open !== undefined;\n  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);\n  const actualOpen = isControlled ? open : internalOpen;\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(next);\n      }\n      onOpenChange?.(next);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  return { open: actualOpen, setOpen };\n}\n","import {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n} from 'react';\nimport { TooltipContext, useTooltipOpen } from './TooltipContext';\n\nexport type TooltipProps = {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Hover open delay in ms. Keyboard focus always opens with no delay. */\n  delay?: number;\n  children: ReactNode;\n} & Omit<ComponentPropsWithoutRef<'span'>, 'onChange' | 'children'>;\n\nfunction TooltipInner(\n  {\n    open,\n    defaultOpen,\n    onOpenChange,\n    delay = 700,\n    children,\n    style,\n    ...rest\n  }: TooltipProps,\n  ref: ForwardedRef<HTMLSpanElement>,\n) {\n  const contentId = useId();\n  const { open: isOpen, setOpen } = useTooltipOpen({\n    open,\n    defaultOpen,\n    onOpenChange,\n  });\n\n  const openTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const clearOpenTimer = useCallback(() => {\n    if (openTimer.current !== null) {\n      clearTimeout(openTimer.current);\n      openTimer.current = null;\n    }\n  }, []);\n\n  const close = useCallback(() => {\n    clearOpenTimer();\n    setOpen(false);\n  }, [clearOpenTimer, setOpen]);\n\n  const openNow = useCallback(() => {\n    clearOpenTimer();\n    setOpen(true);\n  }, [clearOpenTimer, setOpen]);\n\n  const openWithDelay = useCallback(() => {\n    clearOpenTimer();\n    if (delay <= 0) {\n      setOpen(true);\n      return;\n    }\n    openTimer.current = setTimeout(() => {\n      openTimer.current = null;\n      setOpen(true);\n    }, delay);\n  }, [clearOpenTimer, delay, setOpen]);\n\n  useEffect(() => clearOpenTimer, [clearOpenTimer]);\n\n  // Escape closes an open tooltip — WAI-ARIA APG's one hard requirement.\n  useEffect(() => {\n    if (!isOpen) return;\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        close();\n      }\n    };\n    document.addEventListener('keydown', onKeyDown);\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, [isOpen, close]);\n\n  const contextValue = useMemo(\n    () => ({ open: isOpen, contentId, openNow, openWithDelay, close }),\n    [isOpen, contentId, openNow, openWithDelay, close],\n  );\n\n  // A shrink-wrapped positioned box so TooltipContent can place itself with\n  // plain CSS (position: absolute + data-side) — no portal, no measurement.\n  const wrapperStyle: CSSProperties = {\n    position: 'relative',\n    display: 'inline-block',\n    ...style,\n  };\n\n  return (\n    <TooltipContext.Provider value={contextValue}>\n      <span {...rest} ref={ref} style={wrapperStyle}>\n        {children}\n      </span>\n    </TooltipContext.Provider>\n  );\n}\n\nexport const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(TooltipInner);\n","import {\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  forwardRef,\n} from 'react';\nimport { useTooltipContext } from './TooltipContext';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\n\nexport type TooltipContentProps = {\n  side?: TooltipSide;\n} & Omit<ComponentPropsWithoutRef<'span'>, 'role' | 'id'>;\n\nfunction TooltipContentInner(\n  { side = 'top', ...rest }: TooltipContentProps,\n  ref: ForwardedRef<HTMLSpanElement>,\n) {\n  const { open, contentId } = useTooltipContext();\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <span {...rest} ref={ref} role=\"tooltip\" id={contentId} data-side={side} />\n  );\n}\n\nexport const TooltipContent = forwardRef<HTMLSpanElement, TooltipContentProps>(\n  TooltipContentInner,\n);\n","/**\n * Wraps a consumer-supplied event handler so the component's own handler runs\n * after it. Both always run — a tooltip never wants the consumer to be able to\n * silently suppress its open/close behavior.\n */\nexport function composeEventHandlers<E>(\n  consumerHandler: ((event: E) => void) | undefined,\n  ownHandler: (event: E) => void,\n): (event: E) => void {\n  return (event: E) => {\n    consumerHandler?.(event);\n    ownHandler(event);\n  };\n}\n","import {\n  Children,\n  cloneElement,\n  type PointerEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { composeEventHandlers } from './composeEventHandlers';\nimport { useTooltipContext } from './TooltipContext';\n\nexport type TooltipTriggerProps = {\n  /** A single focusable element. It is cloned, not wrapped. */\n  children: ReactNode;\n};\n\ntype TriggerChildProps = {\n  'aria-describedby'?: string;\n  onPointerEnter?: (event: PointerEvent) => void;\n  onPointerLeave?: (event: PointerEvent) => void;\n  onPointerDown?: (event: PointerEvent) => void;\n  onFocus?: (event: React.FocusEvent) => void;\n  onBlur?: (event: React.FocusEvent) => void;\n};\n\nexport function TooltipTrigger({\n  children,\n}: TooltipTriggerProps): ReactElement {\n  const { open, contentId, openNow, openWithDelay, close } =\n    useTooltipContext();\n  const child = Children.only(children) as ReactElement<TriggerChildProps>;\n  const childProps = child.props;\n\n  const describedBy = open\n    ? [childProps['aria-describedby'], contentId].filter(Boolean).join(' ')\n    : childProps['aria-describedby'];\n\n  return cloneElement(child, {\n    'aria-describedby': describedBy,\n    onPointerEnter: composeEventHandlers(\n      childProps.onPointerEnter,\n      openWithDelay,\n    ),\n    onPointerLeave: composeEventHandlers(childProps.onPointerLeave, close),\n    onPointerDown: composeEventHandlers(childProps.onPointerDown, close),\n    onFocus: composeEventHandlers(childProps.onFocus, openNow),\n    onBlur: composeEventHandlers(childProps.onBlur, close),\n  });\n}\n"]}

package/dist/test-utils.d.mts

@@ -0,0 +1,5 @@
+declare function getTooltip(): HTMLElement;
+declare function queryTooltip(): HTMLElement | null;
+declare function getTrigger(name: string | RegExp): HTMLElement;
+
+export { getTooltip, getTrigger, queryTooltip };

package/dist/test-utils.d.ts

@@ -0,0 +1,5 @@
+declare function getTooltip(): HTMLElement;
+declare function queryTooltip(): HTMLElement | null;
+declare function getTrigger(name: string | RegExp): HTMLElement;
+
+export { getTooltip, getTrigger, queryTooltip };

package/dist/test-utils.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var react = require('@testing-library/react');
+
+// src/test-utils.ts
+function getTooltip() {
+  return react.screen.getByRole("tooltip");
+}
+function queryTooltip() {
+  return react.screen.queryByRole("tooltip");
+}
+function getTrigger(name) {
+  return react.screen.getByRole("button", { name });
+}
+
+exports.getTooltip = getTooltip;
+exports.getTrigger = getTrigger;
+exports.queryTooltip = queryTooltip;
+//# sourceMappingURL=test-utils.js.map
+//# sourceMappingURL=test-utils.js.map

package/dist/test-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/test-utils.ts"],"names":["screen"],"mappings":";;;;;AAEO,SAAS,UAAA,GAA0B;AACxC,EAAA,OAAOA,YAAA,CAAO,UAAU,SAAS,CAAA;AACnC;AAEO,SAAS,YAAA,GAAmC;AACjD,EAAA,OAAOA,YAAA,CAAO,YAAY,SAAS,CAAA;AACrC;AAEO,SAAS,WAAW,IAAA,EAAoC;AAC7D,EAAA,OAAOA,YAAA,CAAO,SAAA,CAAU,QAAA,EAAU,EAAE,MAAM,CAAA;AAC5C","file":"test-utils.js","sourcesContent":["import { screen } from '@testing-library/react';\n\nexport function getTooltip(): HTMLElement {\n  return screen.getByRole('tooltip');\n}\n\nexport function queryTooltip(): HTMLElement | null {\n  return screen.queryByRole('tooltip');\n}\n\nexport function getTrigger(name: string | RegExp): HTMLElement {\n  return screen.getByRole('button', { name });\n}\n"]}

package/dist/test-utils.mjs

@@ -0,0 +1,16 @@
+import { screen } from '@testing-library/react';
+
+// src/test-utils.ts
+function getTooltip() {
+  return screen.getByRole("tooltip");
+}
+function queryTooltip() {
+  return screen.queryByRole("tooltip");
+}
+function getTrigger(name) {
+  return screen.getByRole("button", { name });
+}
+
+export { getTooltip, getTrigger, queryTooltip };
+//# sourceMappingURL=test-utils.mjs.map
+//# sourceMappingURL=test-utils.mjs.map

package/dist/test-utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/test-utils.ts"],"names":[],"mappings":";;;AAEO,SAAS,UAAA,GAA0B;AACxC,EAAA,OAAO,MAAA,CAAO,UAAU,SAAS,CAAA;AACnC;AAEO,SAAS,YAAA,GAAmC;AACjD,EAAA,OAAO,MAAA,CAAO,YAAY,SAAS,CAAA;AACrC;AAEO,SAAS,WAAW,IAAA,EAAoC;AAC7D,EAAA,OAAO,MAAA,CAAO,SAAA,CAAU,QAAA,EAAU,EAAE,MAAM,CAAA;AAC5C","file":"test-utils.mjs","sourcesContent":["import { screen } from '@testing-library/react';\n\nexport function getTooltip(): HTMLElement {\n  return screen.getByRole('tooltip');\n}\n\nexport function queryTooltip(): HTMLElement | null {\n  return screen.queryByRole('tooltip');\n}\n\nexport function getTrigger(name: string | RegExp): HTMLElement {\n  return screen.getByRole('button', { name });\n}\n"]}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@asnewyla/unstyled-tooltip",
+  "version": "0.2.0",
+  "description": "Unstyled tooltip primitive — hover/focus open with delay, Escape to dismiss, accessible aria-describedby wiring",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xavierDelaFuente/xd-components.git",
+    "directory": "packages/unstyled-tooltip"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./test-utils": {
+      "types": "./dist/test-utils.d.ts",
+      "import": "./dist/test-utils.mjs",
+      "require": "./dist/test-utils.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "keywords": [
+    "react",
+    "tooltip",
+    "unstyled",
+    "accessible"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@testing-library/react": {
+      "optional": true
+    },
+    "@testing-library/user-event": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.1.0",
+    "vitest": "^2.0.0",
+    "@vitest/coverage-v8": "^2.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@testing-library/jest-dom": "^6.4.0",
+    "jsdom": "^24.0.0",
+    "typescript": "^5.5.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "type-check": "tsc --noEmit"
+  }
+}