@funstack/ui 0.0.0-stage → 0.1.0-alpha.1

package/dist/tooltip/tooltip-root.d.mts

@@ -0,0 +1,41 @@
+import { StateValue } from "../internal/types.mjs";
+import { TooltipProvides } from "./tooltip-context.mjs";
+import { ReactNode } from "react";
+//#region src/tooltip/tooltip-root.d.ts
+export interface TooltipRootState {
+  readonly disabled: boolean;
+}
+export interface TooltipRootProps {
+  /**
+   * Milliseconds from hover or keyboard focus to open. Default 250 (Chromium's
+   * `interest-delay-start`). The same delay applies to hover and focus.
+   */
+  delay?: number;
+  /** Milliseconds from de-hover or blur to close. Default 150 (Chromium's `interest-delay-end`). */
+  closeDelay?: number;
+  /** When true the tooltip never opens. The ARIA relation stays in place. */
+  disabled?: boolean;
+  /**
+   * Which accessibility relation the tooltip provides for the trigger.
+   * `"description"` (default): `aria-describedby`, for triggers that have their own name.
+   * `"name"`: `aria-labelledby`, for icon-only triggers; do not also set `aria-label`.
+   */
+  provides?: TooltipProvides;
+  children?: StateValue<ReactNode, TooltipRootState>;
+}
+/**
+ * Owns the popup id, the options and the one interaction effect. Renders no DOM, so it has no
+ * `ref`, `className` or `style`. The open state is browser-owned (the popover's top-layer state):
+ * there is no `open` prop, no action, and no `data-open`; style with `:popover-open`.
+ *
+ * Render `Tooltip.Popup` immediately after `Tooltip.Trigger` in DOM order: the HTML spec
+ * recommends that reading order for popovers, and some screen readers attach an adjacent tooltip
+ * to the wrong control otherwise. This is documented, not enforced.
+ */
+export declare function TooltipRoot({ delay, closeDelay, disabled, provides, children }: TooltipRootProps): import("react").JSX.Element;
+export declare namespace TooltipRoot {
+  var displayName: string;
+}
+//#endregion
+export type { TooltipProvides };
+//# sourceMappingURL=tooltip-root.d.mts.map

package/dist/tooltip/tooltip-root.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-root.d.mts","names":[],"sources":["../../src/tooltip/tooltip-root.tsx"],"mappings":";;;;iBAWiB;WACN;;iBAGM;;;;;EAKf;;EAEA;;EAEA;;;;;;EAMA,WAAW;EACX,WAAW,WAAW,WAAW;;;;;;;;;;;wBAiBnB,cACd,OACA,YACA,UACA,UACA,YACC,mCAAgB,IAAA;yBANH"}

package/dist/tooltip/tooltip-root.mjs

@@ -0,0 +1,86 @@
+"use client";
+import { resolveStateValue } from "../internal/use-render.mjs";
+import { TooltipContext } from "./tooltip-context.mjs";
+import { useTooltipInteraction } from "./use-tooltip-interaction.mjs";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/tooltip/tooltip-root.tsx
+const isDev = process.env.NODE_ENV !== "production";
+const FOCUSABLE = "a[href],area[href],button,input,select,textarea,iframe,[tabindex],[contenteditable]";
+/**
+* Owns the popup id, the options and the one interaction effect. Renders no DOM, so it has no
+* `ref`, `className` or `style`. The open state is browser-owned (the popover's top-layer state):
+* there is no `open` prop, no action, and no `data-open`; style with `:popover-open`.
+*
+* Render `Tooltip.Popup` immediately after `Tooltip.Trigger` in DOM order: the HTML spec
+* recommends that reading order for popovers, and some screen readers attach an adjacent tooltip
+* to the wrong control otherwise. This is documented, not enforced.
+*/
+function TooltipRoot({ delay = 250, closeDelay = 150, disabled = false, provides = "description", children }) {
+	const popupId = useId();
+	const [trigger, setTriggerElement] = useState(null);
+	const [popup, setPopupElement] = useState(null);
+	const [interestForRequested, setInterestForRequested] = useState(false);
+	useTooltipInteraction(trigger, popup, {
+		delay,
+		closeDelay,
+		disabled,
+		interestForRequested
+	});
+	useTooltipDevWarnings(trigger, popup, provides);
+	const context = useMemo(() => ({
+		popupId,
+		disabled,
+		delay,
+		closeDelay,
+		provides,
+		setTriggerElement,
+		setPopupElement,
+		setInterestForRequested
+	}), [
+		popupId,
+		disabled,
+		delay,
+		closeDelay,
+		provides
+	]);
+	return /* @__PURE__ */ jsx(TooltipContext, {
+		value: context,
+		children: resolveStateValue(children, { disabled })
+	});
+}
+TooltipRoot.displayName = "TooltipRoot";
+/** Development-only checks that need the mounted elements (design 12.5). Each fires once. */
+function useTooltipDevWarnings(trigger, popup, provides) {
+	const warned = useRef({
+		label: false,
+		focusable: false,
+		interactive: false
+	});
+	useEffect(() => {
+		if (!isDev) return;
+		const w = warned.current;
+		if (trigger !== null) {
+			if (provides === "name" && trigger.hasAttribute("aria-label") && !w.label) {
+				w.label = true;
+				console.error("[Tooltip] provides=\"name\" together with aria-label on the trigger announces the name twice. Remove aria-label.");
+			}
+			if (trigger.tabIndex < 0 && !w.focusable) {
+				w.focusable = true;
+				console.error("[Tooltip] The trigger is not focusable; keyboard users cannot open the tooltip. Render a <button> or a link, or set tabIndex={0}.");
+			}
+		}
+		if (popup !== null && popup.querySelector(FOCUSABLE) !== null && !w.interactive) {
+			w.interactive = true;
+			console.error("[Tooltip] Tooltips must not contain interactive content. Use a non-modal dialog or a popover instead.");
+		}
+	}, [
+		trigger,
+		popup,
+		provides
+	]);
+}
+//#endregion
+export { TooltipRoot };
+
+//# sourceMappingURL=tooltip-root.mjs.map

package/dist/tooltip/tooltip-root.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-root.mjs","names":[],"sources":["../../src/tooltip/tooltip-root.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type { StateValue } from \"../internal/types.js\";\nimport { resolveStateValue } from \"../internal/use-render.js\";\nimport { TooltipContext } from \"./tooltip-context.js\";\nimport type { TooltipContextValue, TooltipProvides } from \"./tooltip-context.js\";\nimport { useTooltipInteraction } from \"./use-tooltip-interaction.js\";\n\nexport type { TooltipProvides } from \"./tooltip-context.js\";\n\nexport interface TooltipRootState {\n  readonly disabled: boolean;\n}\n\nexport interface TooltipRootProps {\n  /**\n   * Milliseconds from hover or keyboard focus to open. Default 250 (Chromium's\n   * `interest-delay-start`). The same delay applies to hover and focus.\n   */\n  delay?: number;\n  /** Milliseconds from de-hover or blur to close. Default 150 (Chromium's `interest-delay-end`). */\n  closeDelay?: number;\n  /** When true the tooltip never opens. The ARIA relation stays in place. */\n  disabled?: boolean;\n  /**\n   * Which accessibility relation the tooltip provides for the trigger.\n   * `\"description\"` (default): `aria-describedby`, for triggers that have their own name.\n   * `\"name\"`: `aria-labelledby`, for icon-only triggers; do not also set `aria-label`.\n   */\n  provides?: TooltipProvides;\n  children?: StateValue<ReactNode, TooltipRootState>;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\nconst FOCUSABLE =\n  \"a[href],area[href],button,input,select,textarea,iframe,[tabindex],[contenteditable]\";\n\n/**\n * Owns the popup id, the options and the one interaction effect. Renders no DOM, so it has no\n * `ref`, `className` or `style`. The open state is browser-owned (the popover's top-layer state):\n * there is no `open` prop, no action, and no `data-open`; style with `:popover-open`.\n *\n * Render `Tooltip.Popup` immediately after `Tooltip.Trigger` in DOM order: the HTML spec\n * recommends that reading order for popovers, and some screen readers attach an adjacent tooltip\n * to the wrong control otherwise. This is documented, not enforced.\n */\nexport function TooltipRoot({\n  delay = 250,\n  closeDelay = 150,\n  disabled = false,\n  provides = \"description\",\n  children,\n}: TooltipRootProps) {\n  const popupId = useId();\n  const [trigger, setTriggerElement] = useState<HTMLElement | null>(null);\n  const [popup, setPopupElement] = useState<HTMLElement | null>(null);\n  const [interestForRequested, setInterestForRequested] = useState(false);\n\n  useTooltipInteraction(trigger, popup, { delay, closeDelay, disabled, interestForRequested });\n  useTooltipDevWarnings(trigger, popup, provides);\n\n  const context = useMemo<TooltipContextValue>(\n    () => ({\n      popupId,\n      disabled,\n      delay,\n      closeDelay,\n      provides,\n      setTriggerElement,\n      setPopupElement,\n      setInterestForRequested,\n    }),\n    [popupId, disabled, delay, closeDelay, provides],\n  );\n\n  const state: TooltipRootState = { disabled };\n  return <TooltipContext value={context}>{resolveStateValue(children, state)}</TooltipContext>;\n}\n\nTooltipRoot.displayName = \"TooltipRoot\";\n\n/** Development-only checks that need the mounted elements (design 12.5). Each fires once. */\nfunction useTooltipDevWarnings(\n  trigger: HTMLElement | null,\n  popup: HTMLElement | null,\n  provides: TooltipProvides,\n): void {\n  const warned = useRef({ label: false, focusable: false, interactive: false });\n  useEffect(() => {\n    if (!isDev) return;\n    const w = warned.current;\n    if (trigger !== null) {\n      if (provides === \"name\" && trigger.hasAttribute(\"aria-label\") && !w.label) {\n        w.label = true;\n        console.error(\n          '[Tooltip] provides=\"name\" together with aria-label on the trigger announces the name twice. Remove aria-label.',\n        );\n      }\n      if (trigger.tabIndex < 0 && !w.focusable) {\n        w.focusable = true;\n        console.error(\n          \"[Tooltip] The trigger is not focusable; keyboard users cannot open the tooltip. Render a <button> or a link, or set tabIndex={0}.\",\n        );\n      }\n    }\n    if (popup !== null && popup.querySelector(FOCUSABLE) !== null && !w.interactive) {\n      w.interactive = true;\n      console.error(\n        \"[Tooltip] Tooltips must not contain interactive content. Use a non-modal dialog or a popover instead.\",\n      );\n    }\n  }, [trigger, popup, provides]);\n}\n"],"mappings":";;;;;;;AAkCA,MAAM,QAAQ,QAAQ,IAAI,aAAa;AAEvC,MAAM,YACJ;;;;;;;;;;AAWF,SAAgB,YAAY,EAC1B,QAAQ,KACR,aAAa,KACb,WAAW,OACX,WAAW,eACX,YACmB;CACnB,MAAM,UAAU,MAAM;CACtB,MAAM,CAAC,SAAS,qBAAqB,SAA6B,IAAI;CACtE,MAAM,CAAC,OAAO,mBAAmB,SAA6B,IAAI;CAClE,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,KAAK;CAEtE,sBAAsB,SAAS,OAAO;EAAE;EAAO;EAAY;EAAU;CAAqB,CAAC;CAC3F,sBAAsB,SAAS,OAAO,QAAQ;CAE9C,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAS;EAAU;EAAO;EAAY;CAAQ,CACjD;CAGA,OAAO,oBAAC,gBAAD;EAAgB,OAAO;EAAU,UAAA,kBAAkB,UAAU,EADlC,SACsC,CAAC;CAAkB,CAAA;AAC7F;AAEA,YAAY,cAAc;;AAG1B,SAAS,sBACP,SACA,OACA,UACM;CACN,MAAM,SAAS,OAAO;EAAE,OAAO;EAAO,WAAW;EAAO,aAAa;CAAM,CAAC;CAC5E,gBAAgB;EACd,IAAI,CAAC,OAAO;EACZ,MAAM,IAAI,OAAO;EACjB,IAAI,YAAY,MAAM;GACpB,IAAI,aAAa,UAAU,QAAQ,aAAa,YAAY,KAAK,CAAC,EAAE,OAAO;IACzE,EAAE,QAAQ;IACV,QAAQ,MACN,kHACF;GACF;GACA,IAAI,QAAQ,WAAW,KAAK,CAAC,EAAE,WAAW;IACxC,EAAE,YAAY;IACd,QAAQ,MACN,mIACF;GACF;EACF;EACA,IAAI,UAAU,QAAQ,MAAM,cAAc,SAAS,MAAM,QAAQ,CAAC,EAAE,aAAa;GAC/E,EAAE,cAAc;GAChB,QAAQ,MACN,uGACF;EACF;CACF,GAAG;EAAC;EAAS;EAAO;CAAQ,CAAC;AAC/B"}

package/dist/tooltip/tooltip-trigger.d.mts

@@ -0,0 +1,38 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/tooltip/tooltip-trigger.d.ts
+export interface TooltipTriggerState {
+  readonly disabled: boolean;
+}
+export interface TooltipTriggerProps extends Omit<ComponentPropsWithRef<"button">, "className" | "style" | "children"> {
+  /**
+   * Experimental (Chromium 142+). Renders `interestfor` and `interest-delay-start/end` so the
+   * browser owns hover, focus, Escape and long-press; the library's JS trigger path is skipped
+   * where the rendered element implements `interestForElement`. No effect in other engines (the
+   * attribute is ignored and the JS path runs). Pair with `Tooltip.Popup experimental_hint`.
+   * Default `false`.
+   */
+  experimental_interestFor?: boolean;
+  className?: StateValue<string | undefined, TooltipTriggerState>;
+  style?: StateValue<CSSProperties | undefined, TooltipTriggerState>;
+  children?: StateValue<ReactNode, TooltipTriggerState>;
+  render?: RenderProp<ComponentPropsWithRef<"button">, TooltipTriggerState>;
+}
+/**
+ * The element the user hovers or focuses: a `<button type="button">` by default. `render` may
+ * substitute a link or a custom button; the element must be focusable (a dev warning fires when
+ * it is not). A natively `disabled` button never opens a tooltip; use `aria-disabled` instead.
+ *
+ * The library attaches its hover / focus listeners with `addEventListener` from `Tooltip.Root`,
+ * so every `on*` prop passes through untouched.
+ *
+ * Owned keys (conventions 1.2): `aria-describedby` (with `provides="description"`) or
+ * `aria-labelledby` (with `provides="name"`), both token-merged with the consumer's ids;
+ * `data-disabled`; and `interestfor` when `experimental_interestFor` is on.
+ */
+export declare function TooltipTrigger({ experimental_interestFor, className, style, children, render, ...rest }: TooltipTriggerProps): ReactNode;
+export declare namespace TooltipTrigger {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=tooltip-trigger.d.mts.map

package/dist/tooltip/tooltip-trigger.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-trigger.d.mts","names":[],"sources":["../../src/tooltip/tooltip-trigger.tsx"],"mappings":";;;iBASiB;WACN;;iBAGM,4BAA4B,KAC3C;;;;;;;;EAUA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;;;wBAevC,iBACd,0BACA,WACA,OACA,UACA,WACG,QACF,sBAAmB;yBAPN"}

package/dist/tooltip/tooltip-trigger.mjs

@@ -0,0 +1,55 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { rendersButton, resolveStateValue, useRender } from "../internal/use-render.mjs";
+import { useTooltipContext } from "./tooltip-context.mjs";
+import { useLayoutEffect } from "react";
+//#region src/tooltip/tooltip-trigger.tsx
+/**
+* The element the user hovers or focuses: a `<button type="button">` by default. `render` may
+* substitute a link or a custom button; the element must be focusable (a dev warning fires when
+* it is not). A natively `disabled` button never opens a tooltip; use `aria-disabled` instead.
+*
+* The library attaches its hover / focus listeners with `addEventListener` from `Tooltip.Root`,
+* so every `on*` prop passes through untouched.
+*
+* Owned keys (conventions 1.2): `aria-describedby` (with `provides="description"`) or
+* `aria-labelledby` (with `provides="name"`), both token-merged with the consumer's ids;
+* `data-disabled`; and `interestfor` when `experimental_interestFor` is on.
+*/
+function TooltipTrigger({ experimental_interestFor = false, className, style, children, render, ...rest }) {
+	const ctx = useTooltipContext("Tooltip.Trigger");
+	const { disabled, popupId, provides, setInterestForRequested } = ctx;
+	const native = experimental_interestFor && !disabled;
+	useLayoutEffect(() => {
+		setInterestForRequested(native);
+	}, [native, setInterestForRequested]);
+	const state = { disabled };
+	const libraryProps = {
+		...provides === "name" ? { "aria-labelledby": popupId } : { "aria-describedby": popupId },
+		"data-disabled": dataAttr(disabled),
+		...experimental_interestFor && { interestfor: native ? popupId : void 0 }
+	};
+	return useRender({
+		defaultElement: "button",
+		render,
+		state,
+		className,
+		style: native ? (s) => ({
+			interestDelayStart: `${ctx.delay}ms`,
+			interestDelayEnd: `${ctx.closeDelay}ms`,
+			...resolveStateValue(style, s)
+		}) : style,
+		children,
+		props: rendersButton(render) ? {
+			type: "button",
+			...rest
+		} : rest,
+		libraryProps,
+		ref: ctx.setTriggerElement
+	});
+}
+TooltipTrigger.displayName = "TooltipTrigger";
+//#endregion
+export { TooltipTrigger };
+
+//# sourceMappingURL=tooltip-trigger.mjs.map

package/dist/tooltip/tooltip-trigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-trigger.mjs","names":[],"sources":["../../src/tooltip/tooltip-trigger.tsx"],"sourcesContent":["\"use client\";\nimport { useLayoutEffect } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { rendersButton, resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { useTooltipContext } from \"./tooltip-context.js\";\n\nexport interface TooltipTriggerState {\n  readonly disabled: boolean;\n}\n\nexport interface TooltipTriggerProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * Experimental (Chromium 142+). Renders `interestfor` and `interest-delay-start/end` so the\n   * browser owns hover, focus, Escape and long-press; the library's JS trigger path is skipped\n   * where the rendered element implements `interestForElement`. No effect in other engines (the\n   * attribute is ignored and the JS path runs). Pair with `Tooltip.Popup experimental_hint`.\n   * Default `false`.\n   */\n  experimental_interestFor?: boolean;\n  className?: StateValue<string | undefined, TooltipTriggerState>;\n  style?: StateValue<CSSProperties | undefined, TooltipTriggerState>;\n  children?: StateValue<ReactNode, TooltipTriggerState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, TooltipTriggerState>;\n}\n\n/**\n * The element the user hovers or focuses: a `<button type=\"button\">` by default. `render` may\n * substitute a link or a custom button; the element must be focusable (a dev warning fires when\n * it is not). A natively `disabled` button never opens a tooltip; use `aria-disabled` instead.\n *\n * The library attaches its hover / focus listeners with `addEventListener` from `Tooltip.Root`,\n * so every `on*` prop passes through untouched.\n *\n * Owned keys (conventions 1.2): `aria-describedby` (with `provides=\"description\"`) or\n * `aria-labelledby` (with `provides=\"name\"`), both token-merged with the consumer's ids;\n * `data-disabled`; and `interestfor` when `experimental_interestFor` is on.\n */\nexport function TooltipTrigger({\n  experimental_interestFor = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: TooltipTriggerProps) {\n  const ctx = useTooltipContext(\"Tooltip.Trigger\");\n  const { disabled, popupId, provides, setInterestForRequested } = ctx;\n  const native = experimental_interestFor && !disabled;\n\n  useLayoutEffect(() => {\n    setInterestForRequested(native);\n  }, [native, setInterestForRequested]);\n\n  const state: TooltipTriggerState = { disabled };\n\n  const libraryProps: ComponentPropsWithRef<\"button\"> & DataAttributes = {\n    // Only the relation in use is owned; the other one passes through untouched.\n    ...(provides === \"name\" ? { \"aria-labelledby\": popupId } : { \"aria-describedby\": popupId }),\n    \"data-disabled\": dataAttr(disabled),\n    // Owned while the flag is on: a disabled tooltip removes the attribute, so the browser\n    // cannot open it either. Unflagged, the key is omitted (conventions 1.2).\n    ...(experimental_interestFor && { interestfor: native ? popupId : undefined }),\n  };\n\n  return useRender<ComponentPropsWithRef<\"button\">, TooltipTriggerState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    // The native delays sit under the consumer's style: the consumer wins.\n    style: native\n      ? (s) => ({\n          interestDelayStart: `${ctx.delay}ms`,\n          interestDelayEnd: `${ctx.closeDelay}ms`,\n          ...resolveStateValue(style, s),\n        })\n      : style,\n    children,\n    // `type=\"button\"` only on a real button (the consumer may override it); a link or a\n    // component element does not get it.\n    props: rendersButton(render) ? { type: \"button\", ...rest } : rest,\n    libraryProps,\n    ref: ctx.setTriggerElement,\n  });\n}\n\nTooltipTrigger.displayName = \"TooltipTrigger\";\n"],"mappings":";;;;;;;;;;;;;;;;;;AA2CA,SAAgB,eAAe,EAC7B,2BAA2B,OAC3B,WACA,OACA,UACA,QACA,GAAG,QACmB;CACtB,MAAM,MAAM,kBAAkB,iBAAiB;CAC/C,MAAM,EAAE,UAAU,SAAS,UAAU,4BAA4B;CACjE,MAAM,SAAS,4BAA4B,CAAC;CAE5C,sBAAsB;EACpB,wBAAwB,MAAM;CAChC,GAAG,CAAC,QAAQ,uBAAuB,CAAC;CAEpC,MAAM,QAA6B,EAAE,SAAS;CAE9C,MAAM,eAAiE;EAErE,GAAI,aAAa,SAAS,EAAE,mBAAmB,QAAQ,IAAI,EAAE,oBAAoB,QAAQ;EACzF,iBAAiB,SAAS,QAAQ;EAGlC,GAAI,4BAA4B,EAAE,aAAa,SAAS,UAAU,KAAA,EAAU;CAC9E;CAEA,OAAO,UAAgE;EACrE,gBAAgB;EAChB;EACA;EACA;EAEA,OAAO,UACF,OAAO;GACN,oBAAoB,GAAG,IAAI,MAAM;GACjC,kBAAkB,GAAG,IAAI,WAAW;GACpC,GAAG,kBAAkB,OAAO,CAAC;EAC/B,KACA;EACJ;EAGA,OAAO,cAAc,MAAM,IAAI;GAAE,MAAM;GAAU,GAAG;EAAK,IAAI;EAC7D;EACA,KAAK,IAAI;CACX,CAAC;AACH;AAEA,eAAe,cAAc"}

package/dist/tooltip/use-tooltip-interaction.mjs

@@ -0,0 +1,119 @@
+"use client";
+import { createDelayedPair } from "../internal/use-delayed-pair.mjs";
+import { useEffect, useEffectEvent } from "react";
+//#region src/tooltip/use-tooltip-interaction.ts
+/**
+* The cross-engine JS path of design section 2.2: hover / keyboard focus with delays,
+* `showPopover({ source })`, Escape and pointerdown-anywhere. Listeners go through
+* `addEventListener` (conventions 7.4) so they can be feature-detected away: where the trigger
+* renders `interestfor` and the element implements `interestForElement`, the browser owns the
+* whole interaction and nothing is attached.
+*
+* Open state is browser-owned (conventions 3.5): every decision reads
+* `popup.matches(":popover-open")`, never a copy. The document listeners are attached right after
+* `showPopover()` (the `toggle` event is queued as a task, so waiting for it would leave a window
+* in which an Escape or pointerdown does nothing) and detached when `toggle` reports a close,
+* including closes the library did not perform (native light dismiss of `popover="hint"`).
+*/
+function useTooltipInteraction(trigger, popup, options) {
+	const getDelays = useEffectEvent(() => ({
+		delay: options.delay,
+		closeDelay: options.closeDelay
+	}));
+	const { disabled, interestForRequested } = options;
+	useEffect(() => {
+		if (popup === null) return;
+		if (disabled) {
+			if (isOpen(popup)) popup.hidePopover();
+			return;
+		}
+		if (trigger === null) return;
+		if (interestForRequested && trigger.hasAttribute("interestfor") && "interestForElement" in trigger) return;
+		const doc = trigger.ownerDocument;
+		const timers = createDelayedPair();
+		const clear = timers.cancel;
+		const show = () => {
+			if (isOpen(popup) || !popup.isConnected || !trigger.isConnected) return;
+			popup.showPopover({ source: trigger });
+			listenDocument(true);
+		};
+		const hide = () => {
+			if (!isOpen(popup)) return;
+			popup.hidePopover();
+			listenDocument(false);
+		};
+		const showLater = () => {
+			timers.open(getDelays().delay, show);
+		};
+		const hideLater = () => {
+			timers.close(getDelays().closeDelay, hide);
+		};
+		const hideNow = () => {
+			clear();
+			hide();
+		};
+		const onKeyDown = (event) => {
+			if (event.key !== "Escape") return;
+			clear();
+			if (!isOpen(popup)) return;
+			hide();
+			event.preventDefault();
+		};
+		function listenDocument(listen) {
+			if (listen) {
+				doc.addEventListener("keydown", onKeyDown);
+				doc.addEventListener("pointerdown", hideNow, true);
+			} else {
+				doc.removeEventListener("keydown", onKeyDown);
+				doc.removeEventListener("pointerdown", hideNow, true);
+			}
+		}
+		const onToggle = () => {
+			listenDocument(isOpen(popup));
+		};
+		const onTriggerEnter = (event) => {
+			if (event.pointerType !== "touch") showLater();
+		};
+		const onTriggerFocus = () => {
+			if (trigger.matches(":focus-visible")) showLater();
+		};
+		const onTriggerKeyDown = (event) => {
+			if (event.key === "Escape") clear();
+		};
+		trigger.addEventListener("pointerenter", onTriggerEnter);
+		trigger.addEventListener("pointerleave", hideLater);
+		trigger.addEventListener("pointerdown", clear);
+		trigger.addEventListener("keydown", onTriggerKeyDown);
+		trigger.addEventListener("focus", onTriggerFocus);
+		trigger.addEventListener("blur", hideLater);
+		popup.addEventListener("pointerenter", clear);
+		popup.addEventListener("pointerleave", hideLater);
+		popup.addEventListener("toggle", onToggle);
+		return () => {
+			hideNow();
+			listenDocument(false);
+			trigger.removeEventListener("pointerenter", onTriggerEnter);
+			trigger.removeEventListener("pointerleave", hideLater);
+			trigger.removeEventListener("pointerdown", clear);
+			trigger.removeEventListener("keydown", onTriggerKeyDown);
+			trigger.removeEventListener("focus", onTriggerFocus);
+			trigger.removeEventListener("blur", hideLater);
+			popup.removeEventListener("pointerenter", clear);
+			popup.removeEventListener("pointerleave", hideLater);
+			popup.removeEventListener("toggle", onToggle);
+		};
+	}, [
+		trigger,
+		popup,
+		disabled,
+		interestForRequested
+	]);
+}
+/** The popover's top-layer state, read from the DOM. A removed popover is never open. */
+function isOpen(popup) {
+	return popup.isConnected && popup.matches(":popover-open");
+}
+//#endregion
+export { useTooltipInteraction };
+
+//# sourceMappingURL=use-tooltip-interaction.mjs.map

package/dist/tooltip/use-tooltip-interaction.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tooltip-interaction.mjs","names":[],"sources":["../../src/tooltip/use-tooltip-interaction.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useEffectEvent } from \"react\";\nimport { createDelayedPair } from \"../internal/use-delayed-pair.js\";\n\nexport interface TooltipInteractionOptions {\n  readonly delay: number;\n  readonly closeDelay: number;\n  readonly disabled: boolean;\n  /** The Trigger renders `interestfor` (flag on and not disabled). Re-runs the detection. */\n  readonly interestForRequested: boolean;\n}\n\n/**\n * The cross-engine JS path of design section 2.2: hover / keyboard focus with delays,\n * `showPopover({ source })`, Escape and pointerdown-anywhere. Listeners go through\n * `addEventListener` (conventions 7.4) so they can be feature-detected away: where the trigger\n * renders `interestfor` and the element implements `interestForElement`, the browser owns the\n * whole interaction and nothing is attached.\n *\n * Open state is browser-owned (conventions 3.5): every decision reads\n * `popup.matches(\":popover-open\")`, never a copy. The document listeners are attached right after\n * `showPopover()` (the `toggle` event is queued as a task, so waiting for it would leave a window\n * in which an Escape or pointerdown does nothing) and detached when `toggle` reports a close,\n * including closes the library did not perform (native light dismiss of `popover=\"hint\"`).\n */\nexport function useTooltipInteraction(\n  trigger: HTMLElement | null,\n  popup: HTMLElement | null,\n  options: TooltipInteractionOptions,\n): void {\n  const getDelays = useEffectEvent(() => ({\n    delay: options.delay,\n    closeDelay: options.closeDelay,\n  }));\n  const { disabled, interestForRequested } = options;\n\n  useEffect(() => {\n    if (popup === null) return;\n    // Disabling while open hides the popup on both paths (design section 13, Disabled row). On the\n    // JS path the previous run's cleanup already did; on the native path nothing else would, and\n    // removing `interestfor` does not close an open popover.\n    if (disabled) {\n      if (isOpen(popup)) popup.hidePopover();\n      return;\n    }\n    if (trigger === null) return;\n    // Native path (conventions 8): only when the flag put `interestfor` on the element, and per\n    // element, so a `render`ed `<span>` (no `interestForElement`) keeps the JS path. Nothing is\n    // attached here, Escape included: the browser's interest handling and the `hint` close watcher\n    // decide, so in Chromium an Escape that closes the tooltip may also close an enclosing modal\n    // `<dialog>` (the library cannot `preventDefault()` a keydown it never sees).\n    if (\n      interestForRequested &&\n      trigger.hasAttribute(\"interestfor\") &&\n      \"interestForElement\" in trigger\n    ) {\n      return;\n    }\n\n    const doc = trigger.ownerDocument;\n    // One pending open or close at a time (the timer helper shared with Menu's hover intent).\n    const timers = createDelayedPair();\n    const clear = timers.cancel;\n    const show = () => {\n      if (isOpen(popup) || !popup.isConnected || !trigger.isConnected) return;\n      popup.showPopover({ source: trigger });\n      listenDocument(true);\n    };\n    const hide = () => {\n      // A removed popover is already hidden (`isOpen` is false), so this never throws.\n      if (!isOpen(popup)) return;\n      popup.hidePopover();\n      listenDocument(false);\n    };\n    const showLater = () => {\n      timers.open(getDelays().delay, show);\n    };\n    const hideLater = () => {\n      timers.close(getDelays().closeDelay, hide);\n    };\n    const hideNow = () => {\n      clear();\n      hide();\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Escape\") return;\n      clear();\n      // Escape while closed passes through untouched.\n      if (!isOpen(popup)) return;\n      hide();\n      // This Escape was the tooltip's: an enclosing modal `<dialog>` or `popover=\"auto\"` menu\n      // stays open (the close request sees a canceled keydown). A second Escape reaches them.\n      event.preventDefault();\n    };\n    function listenDocument(listen: boolean) {\n      if (listen) {\n        doc.addEventListener(\"keydown\", onKeyDown);\n        doc.addEventListener(\"pointerdown\", hideNow, true);\n      } else {\n        doc.removeEventListener(\"keydown\", onKeyDown);\n        doc.removeEventListener(\"pointerdown\", hideNow, true);\n      }\n    }\n    // Follows opens and closes the library did not perform; reads the DOM, not `newState`, so a\n    // toggle task that is stale by the time it runs cannot detach the listeners of an open popup.\n    const onToggle = () => {\n      listenDocument(isOpen(popup));\n    };\n    const onTriggerEnter = (event: PointerEvent) => {\n      // No hover on touch; the ARIA relation still works for screen-reader focus (design 5.3).\n      if (event.pointerType !== \"touch\") showLater();\n    };\n    const onTriggerFocus = () => {\n      // Pointer focus (a click) does not open; keyboard focus does (design 5.2).\n      if (trigger.matches(\":focus-visible\")) showLater();\n    };\n    // The document listeners exist only while the popup is open, so before that the trigger\n    // itself cancels a pending open: a click or Escape before `delay` elapses must not open the\n    // tooltip afterwards. Once open, the document listeners do the hiding.\n    const onTriggerKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") clear();\n    };\n\n    trigger.addEventListener(\"pointerenter\", onTriggerEnter);\n    trigger.addEventListener(\"pointerleave\", hideLater);\n    trigger.addEventListener(\"pointerdown\", clear);\n    trigger.addEventListener(\"keydown\", onTriggerKeyDown);\n    trigger.addEventListener(\"focus\", onTriggerFocus);\n    trigger.addEventListener(\"blur\", hideLater);\n    popup.addEventListener(\"pointerenter\", clear);\n    popup.addEventListener(\"pointerleave\", hideLater);\n    popup.addEventListener(\"toggle\", onToggle);\n\n    return () => {\n      hideNow();\n      listenDocument(false);\n      trigger.removeEventListener(\"pointerenter\", onTriggerEnter);\n      trigger.removeEventListener(\"pointerleave\", hideLater);\n      trigger.removeEventListener(\"pointerdown\", clear);\n      trigger.removeEventListener(\"keydown\", onTriggerKeyDown);\n      trigger.removeEventListener(\"focus\", onTriggerFocus);\n      trigger.removeEventListener(\"blur\", hideLater);\n      popup.removeEventListener(\"pointerenter\", clear);\n      popup.removeEventListener(\"pointerleave\", hideLater);\n      popup.removeEventListener(\"toggle\", onToggle);\n    };\n  }, [trigger, popup, disabled, interestForRequested]);\n}\n\n/** The popover's top-layer state, read from the DOM. A removed popover is never open. */\nfunction isOpen(popup: HTMLElement): boolean {\n  return popup.isConnected && popup.matches(\":popover-open\");\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,SAAgB,sBACd,SACA,OACA,SACM;CACN,MAAM,YAAY,sBAAsB;EACtC,OAAO,QAAQ;EACf,YAAY,QAAQ;CACtB,EAAE;CACF,MAAM,EAAE,UAAU,yBAAyB;CAE3C,gBAAgB;EACd,IAAI,UAAU,MAAM;EAIpB,IAAI,UAAU;GACZ,IAAI,OAAO,KAAK,GAAG,MAAM,YAAY;GACrC;EACF;EACA,IAAI,YAAY,MAAM;EAMtB,IACE,wBACA,QAAQ,aAAa,aAAa,KAClC,wBAAwB,SAExB;EAGF,MAAM,MAAM,QAAQ;EAEpB,MAAM,SAAS,kBAAkB;EACjC,MAAM,QAAQ,OAAO;EACrB,MAAM,aAAa;GACjB,IAAI,OAAO,KAAK,KAAK,CAAC,MAAM,eAAe,CAAC,QAAQ,aAAa;GACjE,MAAM,YAAY,EAAE,QAAQ,QAAQ,CAAC;GACrC,eAAe,IAAI;EACrB;EACA,MAAM,aAAa;GAEjB,IAAI,CAAC,OAAO,KAAK,GAAG;GACpB,MAAM,YAAY;GAClB,eAAe,KAAK;EACtB;EACA,MAAM,kBAAkB;GACtB,OAAO,KAAK,UAAU,CAAC,CAAC,OAAO,IAAI;EACrC;EACA,MAAM,kBAAkB;GACtB,OAAO,MAAM,UAAU,CAAC,CAAC,YAAY,IAAI;EAC3C;EACA,MAAM,gBAAgB;GACpB,MAAM;GACN,KAAK;EACP;EAEA,MAAM,aAAa,UAAyB;GAC1C,IAAI,MAAM,QAAQ,UAAU;GAC5B,MAAM;GAEN,IAAI,CAAC,OAAO,KAAK,GAAG;GACpB,KAAK;GAGL,MAAM,eAAe;EACvB;EACA,SAAS,eAAe,QAAiB;GACvC,IAAI,QAAQ;IACV,IAAI,iBAAiB,WAAW,SAAS;IACzC,IAAI,iBAAiB,eAAe,SAAS,IAAI;GACnD,OAAO;IACL,IAAI,oBAAoB,WAAW,SAAS;IAC5C,IAAI,oBAAoB,eAAe,SAAS,IAAI;GACtD;EACF;EAGA,MAAM,iBAAiB;GACrB,eAAe,OAAO,KAAK,CAAC;EAC9B;EACA,MAAM,kBAAkB,UAAwB;GAE9C,IAAI,MAAM,gBAAgB,SAAS,UAAU;EAC/C;EACA,MAAM,uBAAuB;GAE3B,IAAI,QAAQ,QAAQ,gBAAgB,GAAG,UAAU;EACnD;EAIA,MAAM,oBAAoB,UAAyB;GACjD,IAAI,MAAM,QAAQ,UAAU,MAAM;EACpC;EAEA,QAAQ,iBAAiB,gBAAgB,cAAc;EACvD,QAAQ,iBAAiB,gBAAgB,SAAS;EAClD,QAAQ,iBAAiB,eAAe,KAAK;EAC7C,QAAQ,iBAAiB,WAAW,gBAAgB;EACpD,QAAQ,iBAAiB,SAAS,cAAc;EAChD,QAAQ,iBAAiB,QAAQ,SAAS;EAC1C,MAAM,iBAAiB,gBAAgB,KAAK;EAC5C,MAAM,iBAAiB,gBAAgB,SAAS;EAChD,MAAM,iBAAiB,UAAU,QAAQ;EAEzC,aAAa;GACX,QAAQ;GACR,eAAe,KAAK;GACpB,QAAQ,oBAAoB,gBAAgB,cAAc;GAC1D,QAAQ,oBAAoB,gBAAgB,SAAS;GACrD,QAAQ,oBAAoB,eAAe,KAAK;GAChD,QAAQ,oBAAoB,WAAW,gBAAgB;GACvD,QAAQ,oBAAoB,SAAS,cAAc;GACnD,QAAQ,oBAAoB,QAAQ,SAAS;GAC7C,MAAM,oBAAoB,gBAAgB,KAAK;GAC/C,MAAM,oBAAoB,gBAAgB,SAAS;GACnD,MAAM,oBAAoB,UAAU,QAAQ;EAC9C;CACF,GAAG;EAAC;EAAS;EAAO;EAAU;CAAoB,CAAC;AACrD;;AAGA,SAAS,OAAO,OAA6B;CAC3C,OAAO,MAAM,eAAe,MAAM,QAAQ,eAAe;AAC3D"}

package/package.json

@@ -1,6 +1,76 @@
 {
   "name": "@funstack/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0-alpha.1",
+  "description": "Headless UI library for React — the first Async React-native UI library",
+  "keywords": [
+    "components",
+    "headless",
+    "react",
+    "suspense",
+    "transitions",
+    "ui"
+  ],
+  "homepage": "https://ui.funstack.work/",
+  "bugs": {
+    "url": "https://github.com/uhyo/funstack-ui/issues"
+  },
+  "license": "MIT",
+  "author": "uhyo <uhyo@uhy.ooo>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uhyo/funstack-ui.git",
+    "directory": "packages/ui"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./accordion": "./dist/accordion/index.mjs",
+    "./checkbox": "./dist/checkbox/index.mjs",
+    "./checkbox-group": "./dist/checkbox-group/index.mjs",
+    "./dialog": "./dist/dialog/index.mjs",
+    "./menu": "./dist/menu/index.mjs",
+    "./popover": "./dist/popover/index.mjs",
+    "./radio-group": "./dist/radio-group/index.mjs",
+    "./switch": "./dist/switch/index.mjs",
+    "./tabs": "./dist/tabs/index.mjs",
+    "./toggle": "./dist/toggle/index.mjs",
+    "./tooltip": "./dist/tooltip/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/node": "^26.6.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitest/browser-playwright": "^5.0.5",
+    "jsdom": "^30.1.3",
+    "playwright": "^1.64.1",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "tsdown": "^0.23.1",
+    "typescript": "^7.0.2",
+    "vitest": "^5.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=19.3.0",
+    "react-dom": ">=19.3.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:jsdom": "vitest run --project jsdom",
+    "test:browser": "vitest run --project browser",
+    "test:browser:dev": "vitest --project browser --browser.headless=false",
+    "typecheck": "tsc --noEmit"
+  }
 }