@proyecto-viviana/solidaria 0.3.0 → 0.4.0

package/dist/_chunk/tooltip.js

@@ -0,0 +1,185 @@
+import { o as mergeProps } from "./env.js";
+import { t as filterDOMProps } from "./filterDOMProps.js";
+import { n as createFocusable } from "./createFocusable.js";
+import { t as createHover } from "./createHover.js";
+import { createId } from "../ssr/index.js";
+import { createEffect, onCleanup } from "solid-js";
+//#region src/tooltip/createTooltip.ts
+/**
+* Provides the accessibility implementation for a Tooltip component.
+*
+* When hovering over the tooltip itself, it stays open. When the mouse leaves
+* the tooltip, it closes.
+*
+* @example
+* ```tsx
+* import { createTooltip } from 'solidaria';
+* import { createTooltipTriggerState } from 'solid-stately';
+*
+* function Tooltip(props) {
+*   const state = props.state;
+*   const { tooltipProps } = createTooltip(props, state);
+*
+*   return (
+*     <div {...tooltipProps} role="tooltip">
+*       {props.children}
+*     </div>
+*   );
+* }
+* ```
+*/
+function createTooltip(props = {}, state) {
+	const domProps = filterDOMProps(props, { labelable: true });
+	const { hoverProps } = createHover({
+		onHoverStart: () => state?.open(true),
+		onHoverEnd: () => state?.close()
+	});
+	return { tooltipProps: mergeProps(domProps, hoverProps, { role: "tooltip" }) };
+}
+//#endregion
+//#region src/tooltip/createTooltipTrigger.ts
+/**
+* createTooltipTrigger hook for Solidaria
+*
+* Provides the behavior and accessibility implementation for a tooltip trigger,
+* e.g. a button that shows a description when focused or hovered.
+*
+* Port of @react-aria/tooltip useTooltipTrigger.
+*/
+let currentModality = null;
+if (typeof document !== "undefined") {
+	document.addEventListener("keydown", () => {
+		currentModality = "keyboard";
+	}, true);
+	document.addEventListener("pointerdown", () => {
+		currentModality = "pointer";
+	}, true);
+	document.addEventListener("pointermove", () => {
+		currentModality = "pointer";
+	}, true);
+}
+function isFocusVisible() {
+	return currentModality === "keyboard";
+}
+/**
+* Provides the behavior and accessibility implementation for a tooltip trigger.
+*
+* @example
+* ```tsx
+* import { createTooltipTrigger } from 'solidaria';
+* import { createTooltipTriggerState } from 'solid-stately';
+*
+* function TooltipButton(props) {
+*   let ref;
+*   const state = createTooltipTriggerState({ delay: 500 });
+*   const { triggerProps, tooltipProps } = createTooltipTrigger(
+*     { isDisabled: props.isDisabled },
+*     state,
+*     () => ref
+*   );
+*
+*   return (
+*     <>
+*       <button ref={ref} {...triggerProps}>
+*         Hover me
+*       </button>
+*       <Show when={state.isOpen()}>
+*         <div {...tooltipProps}>Tooltip content</div>
+*       </Show>
+*     </>
+*   );
+* }
+* ```
+*/
+function createTooltipTrigger(props, state, ref) {
+	const isDisabled = () => props.isDisabled ?? false;
+	const trigger = () => props.trigger ?? "hover";
+	const shouldCloseOnPress = () => props.shouldCloseOnPress ?? true;
+	const generatedTooltipId = createId();
+	const tooltipId = () => props.tooltipId ?? generatedTooltipId;
+	let isHovered = false;
+	let isFocused = false;
+	const handleShow = () => {
+		if (!isDisabled() && (isHovered || isFocused)) state.open(isFocused);
+	};
+	const handleHide = (immediate) => {
+		if (!isHovered && !isFocused) state.close(immediate);
+	};
+	createEffect(() => {
+		if (!state.isOpen()) return;
+		const onKeyDown = (e) => {
+			if (ref()) {
+				if (e.key === "Escape") {
+					e.stopPropagation();
+					state.close(true);
+				}
+			}
+		};
+		document.addEventListener("keydown", onKeyDown, true);
+		onCleanup(() => {
+			document.removeEventListener("keydown", onKeyDown, true);
+		});
+	});
+	const onHoverStart = () => {
+		if (isDisabled() || trigger() === "focus") return;
+		isHovered = true;
+		handleShow();
+	};
+	const onHoverEnd = () => {
+		if (isDisabled() || trigger() === "focus") return;
+		isFocused = false;
+		isHovered = false;
+		handleHide();
+	};
+	const closeOnPress = () => {
+		if (isDisabled() || !shouldCloseOnPress()) return;
+		isFocused = false;
+		isHovered = false;
+		handleHide(true);
+	};
+	const onKeyDownPress = (event) => {
+		if (event.key !== "Enter" && event.key !== " " && event.key !== "Spacebar") return;
+		closeOnPress();
+	};
+	const onFocus = () => {
+		if (isDisabled()) return;
+		if (isFocusVisible()) {
+			isFocused = true;
+			handleShow();
+		}
+	};
+	const onBlur = () => {
+		isFocused = false;
+		isHovered = false;
+		handleHide(true);
+	};
+	const { hoverProps } = createHover(() => ({
+		isDisabled: isDisabled(),
+		onHoverStart,
+		onHoverEnd
+	}));
+	const { focusableProps } = createFocusable({
+		isDisabled,
+		onFocus,
+		onBlur
+	});
+	return {
+		triggerProps: {
+			...focusableProps,
+			...hoverProps,
+			get "aria-describedby"() {
+				return !isDisabled() && state.isOpen() ? tooltipId() : void 0;
+			},
+			onPointerDown: closeOnPress,
+			onKeyDown: onKeyDownPress,
+			tabIndex: void 0
+		},
+		tooltipProps: { get id() {
+			return tooltipId();
+		} }
+	};
+}
+//#endregion
+export { createTooltip as n, createTooltipTrigger as t };
+
+//# sourceMappingURL=tooltip.js.map

package/dist/_chunk/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../src/tooltip/createTooltip.ts","../../src/tooltip/createTooltipTrigger.ts"],"sourcesContent":["/**\n * createTooltip hook for Solidaria\n *\n * Provides the accessibility implementation for a Tooltip component.\n *\n * Port of @react-aria/tooltip useTooltip.\n */\n\nimport { type JSX } from \"solid-js\";\nimport { type TooltipTriggerState } from \"@proyecto-viviana/solid-stately\";\nimport { createHover } from \"../interactions/createHover\";\nimport { filterDOMProps, mergeProps } from \"../utils\";\n\nexport interface TooltipProps {\n  /** Whether the tooltip is disabled. */\n  isDisabled?: boolean;\n  /** Custom aria-label for the tooltip. */\n  \"aria-label\"?: string;\n  /** ID of an element that labels the tooltip. */\n  \"aria-labelledby\"?: string;\n  /** ID of an element that describes the tooltip. */\n  \"aria-describedby\"?: string;\n}\n\nexport interface TooltipAria {\n  /** Props to spread on the tooltip element. */\n  tooltipProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides the accessibility implementation for a Tooltip component.\n *\n * When hovering over the tooltip itself, it stays open. When the mouse leaves\n * the tooltip, it closes.\n *\n * @example\n * ```tsx\n * import { createTooltip } from 'solidaria';\n * import { createTooltipTriggerState } from 'solid-stately';\n *\n * function Tooltip(props) {\n *   const state = props.state;\n *   const { tooltipProps } = createTooltip(props, state);\n *\n *   return (\n *     <div {...tooltipProps} role=\"tooltip\">\n *       {props.children}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function createTooltip(props: TooltipProps = {}, state?: TooltipTriggerState): TooltipAria {\n  const domProps = filterDOMProps(props, { labelable: true });\n\n  const { hoverProps } = createHover({\n    onHoverStart: () => state?.open(true),\n    onHoverEnd: () => state?.close(),\n  });\n\n  return {\n    tooltipProps: mergeProps<JSX.HTMLAttributes<HTMLElement>>(domProps, hoverProps, {\n      role: \"tooltip\",\n    }),\n  };\n}\n","/**\n * createTooltipTrigger hook for Solidaria\n *\n * Provides the behavior and accessibility implementation for a tooltip trigger,\n * e.g. a button that shows a description when focused or hovered.\n *\n * Port of @react-aria/tooltip useTooltipTrigger.\n */\n\nimport { type JSX, createEffect, onCleanup } from \"solid-js\";\nimport { type TooltipTriggerState } from \"@proyecto-viviana/solid-stately\";\nimport { createHover } from \"../interactions/createHover\";\nimport { createFocusable } from \"../interactions/createFocusable\";\nimport { createId } from \"../ssr\";\n\nexport interface TooltipTriggerProps {\n  /** Whether the tooltip should be disabled. */\n  isDisabled?: boolean;\n  /**\n   * The trigger mechanism for the tooltip.\n   * @default 'hover'\n   */\n  trigger?: \"focus\" | \"hover\";\n  /**\n   * Whether the tooltip should close when the trigger is pressed.\n   * @default true\n   */\n  shouldCloseOnPress?: boolean;\n  /**\n   * ID of the tooltip element.\n   * @internal Used by component wrappers to merge explicit tooltip ids with trigger aria-describedby.\n   */\n  tooltipId?: string;\n}\n\nexport interface TooltipTriggerAria {\n  /** Props to spread on the trigger element. */\n  triggerProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props to spread on the tooltip element (id for accessibility). */\n  tooltipProps: { readonly id: string };\n}\n\ntype Modality = \"keyboard\" | \"pointer\" | \"virtual\";\nlet currentModality: Modality | null = null;\n\n// Track interaction modality (pointer vs keyboard)\nif (typeof document !== \"undefined\") {\n  document.addEventListener(\n    \"keydown\",\n    () => {\n      currentModality = \"keyboard\";\n    },\n    true,\n  );\n  document.addEventListener(\n    \"pointerdown\",\n    () => {\n      currentModality = \"pointer\";\n    },\n    true,\n  );\n  document.addEventListener(\n    \"pointermove\",\n    () => {\n      currentModality = \"pointer\";\n    },\n    true,\n  );\n}\n\nfunction isFocusVisible(): boolean {\n  return currentModality === \"keyboard\";\n}\n\n/**\n * Provides the behavior and accessibility implementation for a tooltip trigger.\n *\n * @example\n * ```tsx\n * import { createTooltipTrigger } from 'solidaria';\n * import { createTooltipTriggerState } from 'solid-stately';\n *\n * function TooltipButton(props) {\n *   let ref;\n *   const state = createTooltipTriggerState({ delay: 500 });\n *   const { triggerProps, tooltipProps } = createTooltipTrigger(\n *     { isDisabled: props.isDisabled },\n *     state,\n *     () => ref\n *   );\n *\n *   return (\n *     <>\n *       <button ref={ref} {...triggerProps}>\n *         Hover me\n *       </button>\n *       <Show when={state.isOpen()}>\n *         <div {...tooltipProps}>Tooltip content</div>\n *       </Show>\n *     </>\n *   );\n * }\n * ```\n */\nexport function createTooltipTrigger(\n  props: TooltipTriggerProps,\n  state: TooltipTriggerState,\n  ref: () => HTMLElement | null | undefined,\n): TooltipTriggerAria {\n  const isDisabled = () => props.isDisabled ?? false;\n  const trigger = () => props.trigger ?? \"hover\";\n  const shouldCloseOnPress = () => props.shouldCloseOnPress ?? true;\n\n  const generatedTooltipId = createId();\n  const tooltipId = () => props.tooltipId ?? generatedTooltipId;\n\n  // Track hover and focus state\n  let isHovered = false;\n  let isFocused = false;\n\n  const handleShow = () => {\n    if (!isDisabled() && (isHovered || isFocused)) {\n      state.open(isFocused);\n    }\n  };\n\n  const handleHide = (immediate?: boolean) => {\n    if (!isHovered && !isFocused) {\n      state.close(immediate);\n    }\n  };\n\n  // Handle Escape key to dismiss tooltip\n  createEffect(() => {\n    if (!state.isOpen()) return;\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      const element = ref();\n      if (element) {\n        if (e.key === \"Escape\") {\n          e.stopPropagation();\n          state.close(true);\n        }\n      }\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown, true);\n    onCleanup(() => {\n      document.removeEventListener(\"keydown\", onKeyDown, true);\n    });\n  });\n\n  const onHoverStart = () => {\n    if (isDisabled() || trigger() === \"focus\") {\n      return;\n    }\n    // Hover events (onPointerEnter) only fire from pointer interactions,\n    // so we can always set isHovered to true here\n    isHovered = true;\n    handleShow();\n  };\n\n  const onHoverEnd = () => {\n    if (isDisabled() || trigger() === \"focus\") {\n      return;\n    }\n    isFocused = false;\n    isHovered = false;\n    handleHide();\n  };\n\n  const closeOnPress = () => {\n    if (isDisabled() || !shouldCloseOnPress()) {\n      return;\n    }\n    isFocused = false;\n    isHovered = false;\n    handleHide(true);\n  };\n\n  const onKeyDownPress = (event: KeyboardEvent) => {\n    if (event.key !== \"Enter\" && event.key !== \" \" && event.key !== \"Spacebar\") {\n      return;\n    }\n    closeOnPress();\n  };\n\n  const onFocus = () => {\n    if (isDisabled()) {\n      return;\n    }\n\n    const visible = isFocusVisible();\n    if (visible) {\n      isFocused = true;\n      handleShow();\n    }\n  };\n\n  const onBlur = () => {\n    isFocused = false;\n    isHovered = false;\n    handleHide(true);\n  };\n\n  const { hoverProps } = createHover(() => ({\n    isDisabled: isDisabled(),\n    onHoverStart,\n    onHoverEnd,\n  }));\n\n  const { focusableProps } = createFocusable({\n    isDisabled,\n    onFocus,\n    onBlur,\n  });\n\n  const triggerProps = {\n    ...focusableProps,\n    ...hoverProps,\n    get \"aria-describedby\"() {\n      return !isDisabled() && state.isOpen() ? tooltipId() : undefined;\n    },\n    onPointerDown: closeOnPress,\n    onKeyDown: onKeyDownPress,\n    // Remove tabIndex set by focusableProps to avoid overriding\n    tabIndex: undefined,\n  };\n\n  return {\n    triggerProps: triggerProps as JSX.HTMLAttributes<HTMLElement>,\n    tooltipProps: {\n      get id() {\n        return tooltipId();\n      },\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/tooltip.jsx

@@ -0,0 +1,185 @@
+import { o as mergeProps } from "./env.jsx";
+import { t as filterDOMProps } from "./filterDOMProps.jsx";
+import { n as createFocusable } from "./createFocusable.jsx";
+import { t as createHover } from "./createHover.jsx";
+import { createId } from "../ssr/index.jsx";
+import { createEffect, onCleanup } from "solid-js";
+//#region src/tooltip/createTooltip.ts
+/**
+* Provides the accessibility implementation for a Tooltip component.
+*
+* When hovering over the tooltip itself, it stays open. When the mouse leaves
+* the tooltip, it closes.
+*
+* @example
+* ```tsx
+* import { createTooltip } from 'solidaria';
+* import { createTooltipTriggerState } from 'solid-stately';
+*
+* function Tooltip(props) {
+*   const state = props.state;
+*   const { tooltipProps } = createTooltip(props, state);
+*
+*   return (
+*     <div {...tooltipProps} role="tooltip">
+*       {props.children}
+*     </div>
+*   );
+* }
+* ```
+*/
+function createTooltip(props = {}, state) {
+	const domProps = filterDOMProps(props, { labelable: true });
+	const { hoverProps } = createHover({
+		onHoverStart: () => state?.open(true),
+		onHoverEnd: () => state?.close()
+	});
+	return { tooltipProps: mergeProps(domProps, hoverProps, { role: "tooltip" }) };
+}
+//#endregion
+//#region src/tooltip/createTooltipTrigger.ts
+/**
+* createTooltipTrigger hook for Solidaria
+*
+* Provides the behavior and accessibility implementation for a tooltip trigger,
+* e.g. a button that shows a description when focused or hovered.
+*
+* Port of @react-aria/tooltip useTooltipTrigger.
+*/
+let currentModality = null;
+if (typeof document !== "undefined") {
+	document.addEventListener("keydown", () => {
+		currentModality = "keyboard";
+	}, true);
+	document.addEventListener("pointerdown", () => {
+		currentModality = "pointer";
+	}, true);
+	document.addEventListener("pointermove", () => {
+		currentModality = "pointer";
+	}, true);
+}
+function isFocusVisible() {
+	return currentModality === "keyboard";
+}
+/**
+* Provides the behavior and accessibility implementation for a tooltip trigger.
+*
+* @example
+* ```tsx
+* import { createTooltipTrigger } from 'solidaria';
+* import { createTooltipTriggerState } from 'solid-stately';
+*
+* function TooltipButton(props) {
+*   let ref;
+*   const state = createTooltipTriggerState({ delay: 500 });
+*   const { triggerProps, tooltipProps } = createTooltipTrigger(
+*     { isDisabled: props.isDisabled },
+*     state,
+*     () => ref
+*   );
+*
+*   return (
+*     <>
+*       <button ref={ref} {...triggerProps}>
+*         Hover me
+*       </button>
+*       <Show when={state.isOpen()}>
+*         <div {...tooltipProps}>Tooltip content</div>
+*       </Show>
+*     </>
+*   );
+* }
+* ```
+*/
+function createTooltipTrigger(props, state, ref) {
+	const isDisabled = () => props.isDisabled ?? false;
+	const trigger = () => props.trigger ?? "hover";
+	const shouldCloseOnPress = () => props.shouldCloseOnPress ?? true;
+	const generatedTooltipId = createId();
+	const tooltipId = () => props.tooltipId ?? generatedTooltipId;
+	let isHovered = false;
+	let isFocused = false;
+	const handleShow = () => {
+		if (!isDisabled() && (isHovered || isFocused)) state.open(isFocused);
+	};
+	const handleHide = (immediate) => {
+		if (!isHovered && !isFocused) state.close(immediate);
+	};
+	createEffect(() => {
+		if (!state.isOpen()) return;
+		const onKeyDown = (e) => {
+			if (ref()) {
+				if (e.key === "Escape") {
+					e.stopPropagation();
+					state.close(true);
+				}
+			}
+		};
+		document.addEventListener("keydown", onKeyDown, true);
+		onCleanup(() => {
+			document.removeEventListener("keydown", onKeyDown, true);
+		});
+	});
+	const onHoverStart = () => {
+		if (isDisabled() || trigger() === "focus") return;
+		isHovered = true;
+		handleShow();
+	};
+	const onHoverEnd = () => {
+		if (isDisabled() || trigger() === "focus") return;
+		isFocused = false;
+		isHovered = false;
+		handleHide();
+	};
+	const closeOnPress = () => {
+		if (isDisabled() || !shouldCloseOnPress()) return;
+		isFocused = false;
+		isHovered = false;
+		handleHide(true);
+	};
+	const onKeyDownPress = (event) => {
+		if (event.key !== "Enter" && event.key !== " " && event.key !== "Spacebar") return;
+		closeOnPress();
+	};
+	const onFocus = () => {
+		if (isDisabled()) return;
+		if (isFocusVisible()) {
+			isFocused = true;
+			handleShow();
+		}
+	};
+	const onBlur = () => {
+		isFocused = false;
+		isHovered = false;
+		handleHide(true);
+	};
+	const { hoverProps } = createHover(() => ({
+		isDisabled: isDisabled(),
+		onHoverStart,
+		onHoverEnd
+	}));
+	const { focusableProps } = createFocusable({
+		isDisabled,
+		onFocus,
+		onBlur
+	});
+	return {
+		triggerProps: {
+			...focusableProps,
+			...hoverProps,
+			get "aria-describedby"() {
+				return !isDisabled() && state.isOpen() ? tooltipId() : void 0;
+			},
+			onPointerDown: closeOnPress,
+			onKeyDown: onKeyDownPress,
+			tabIndex: void 0
+		},
+		tooltipProps: { get id() {
+			return tooltipId();
+		} }
+	};
+}
+//#endregion
+export { createTooltip as n, createTooltipTrigger as t };
+
+//# sourceMappingURL=tooltip.jsx.map

package/dist/_chunk/tooltip.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.jsx","names":[],"sources":["../../src/tooltip/createTooltip.ts","../../src/tooltip/createTooltipTrigger.ts"],"sourcesContent":["/**\n * createTooltip hook for Solidaria\n *\n * Provides the accessibility implementation for a Tooltip component.\n *\n * Port of @react-aria/tooltip useTooltip.\n */\n\nimport { type JSX } from \"solid-js\";\nimport { type TooltipTriggerState } from \"@proyecto-viviana/solid-stately\";\nimport { createHover } from \"../interactions/createHover\";\nimport { filterDOMProps, mergeProps } from \"../utils\";\n\nexport interface TooltipProps {\n  /** Whether the tooltip is disabled. */\n  isDisabled?: boolean;\n  /** Custom aria-label for the tooltip. */\n  \"aria-label\"?: string;\n  /** ID of an element that labels the tooltip. */\n  \"aria-labelledby\"?: string;\n  /** ID of an element that describes the tooltip. */\n  \"aria-describedby\"?: string;\n}\n\nexport interface TooltipAria {\n  /** Props to spread on the tooltip element. */\n  tooltipProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides the accessibility implementation for a Tooltip component.\n *\n * When hovering over the tooltip itself, it stays open. When the mouse leaves\n * the tooltip, it closes.\n *\n * @example\n * ```tsx\n * import { createTooltip } from 'solidaria';\n * import { createTooltipTriggerState } from 'solid-stately';\n *\n * function Tooltip(props) {\n *   const state = props.state;\n *   const { tooltipProps } = createTooltip(props, state);\n *\n *   return (\n *     <div {...tooltipProps} role=\"tooltip\">\n *       {props.children}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function createTooltip(props: TooltipProps = {}, state?: TooltipTriggerState): TooltipAria {\n  const domProps = filterDOMProps(props, { labelable: true });\n\n  const { hoverProps } = createHover({\n    onHoverStart: () => state?.open(true),\n    onHoverEnd: () => state?.close(),\n  });\n\n  return {\n    tooltipProps: mergeProps<JSX.HTMLAttributes<HTMLElement>>(domProps, hoverProps, {\n      role: \"tooltip\",\n    }),\n  };\n}\n","/**\n * createTooltipTrigger hook for Solidaria\n *\n * Provides the behavior and accessibility implementation for a tooltip trigger,\n * e.g. a button that shows a description when focused or hovered.\n *\n * Port of @react-aria/tooltip useTooltipTrigger.\n */\n\nimport { type JSX, createEffect, onCleanup } from \"solid-js\";\nimport { type TooltipTriggerState } from \"@proyecto-viviana/solid-stately\";\nimport { createHover } from \"../interactions/createHover\";\nimport { createFocusable } from \"../interactions/createFocusable\";\nimport { createId } from \"../ssr\";\n\nexport interface TooltipTriggerProps {\n  /** Whether the tooltip should be disabled. */\n  isDisabled?: boolean;\n  /**\n   * The trigger mechanism for the tooltip.\n   * @default 'hover'\n   */\n  trigger?: \"focus\" | \"hover\";\n  /**\n   * Whether the tooltip should close when the trigger is pressed.\n   * @default true\n   */\n  shouldCloseOnPress?: boolean;\n  /**\n   * ID of the tooltip element.\n   * @internal Used by component wrappers to merge explicit tooltip ids with trigger aria-describedby.\n   */\n  tooltipId?: string;\n}\n\nexport interface TooltipTriggerAria {\n  /** Props to spread on the trigger element. */\n  triggerProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props to spread on the tooltip element (id for accessibility). */\n  tooltipProps: { readonly id: string };\n}\n\ntype Modality = \"keyboard\" | \"pointer\" | \"virtual\";\nlet currentModality: Modality | null = null;\n\n// Track interaction modality (pointer vs keyboard)\nif (typeof document !== \"undefined\") {\n  document.addEventListener(\n    \"keydown\",\n    () => {\n      currentModality = \"keyboard\";\n    },\n    true,\n  );\n  document.addEventListener(\n    \"pointerdown\",\n    () => {\n      currentModality = \"pointer\";\n    },\n    true,\n  );\n  document.addEventListener(\n    \"pointermove\",\n    () => {\n      currentModality = \"pointer\";\n    },\n    true,\n  );\n}\n\nfunction isFocusVisible(): boolean {\n  return currentModality === \"keyboard\";\n}\n\n/**\n * Provides the behavior and accessibility implementation for a tooltip trigger.\n *\n * @example\n * ```tsx\n * import { createTooltipTrigger } from 'solidaria';\n * import { createTooltipTriggerState } from 'solid-stately';\n *\n * function TooltipButton(props) {\n *   let ref;\n *   const state = createTooltipTriggerState({ delay: 500 });\n *   const { triggerProps, tooltipProps } = createTooltipTrigger(\n *     { isDisabled: props.isDisabled },\n *     state,\n *     () => ref\n *   );\n *\n *   return (\n *     <>\n *       <button ref={ref} {...triggerProps}>\n *         Hover me\n *       </button>\n *       <Show when={state.isOpen()}>\n *         <div {...tooltipProps}>Tooltip content</div>\n *       </Show>\n *     </>\n *   );\n * }\n * ```\n */\nexport function createTooltipTrigger(\n  props: TooltipTriggerProps,\n  state: TooltipTriggerState,\n  ref: () => HTMLElement | null | undefined,\n): TooltipTriggerAria {\n  const isDisabled = () => props.isDisabled ?? false;\n  const trigger = () => props.trigger ?? \"hover\";\n  const shouldCloseOnPress = () => props.shouldCloseOnPress ?? true;\n\n  const generatedTooltipId = createId();\n  const tooltipId = () => props.tooltipId ?? generatedTooltipId;\n\n  // Track hover and focus state\n  let isHovered = false;\n  let isFocused = false;\n\n  const handleShow = () => {\n    if (!isDisabled() && (isHovered || isFocused)) {\n      state.open(isFocused);\n    }\n  };\n\n  const handleHide = (immediate?: boolean) => {\n    if (!isHovered && !isFocused) {\n      state.close(immediate);\n    }\n  };\n\n  // Handle Escape key to dismiss tooltip\n  createEffect(() => {\n    if (!state.isOpen()) return;\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      const element = ref();\n      if (element) {\n        if (e.key === \"Escape\") {\n          e.stopPropagation();\n          state.close(true);\n        }\n      }\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown, true);\n    onCleanup(() => {\n      document.removeEventListener(\"keydown\", onKeyDown, true);\n    });\n  });\n\n  const onHoverStart = () => {\n    if (isDisabled() || trigger() === \"focus\") {\n      return;\n    }\n    // Hover events (onPointerEnter) only fire from pointer interactions,\n    // so we can always set isHovered to true here\n    isHovered = true;\n    handleShow();\n  };\n\n  const onHoverEnd = () => {\n    if (isDisabled() || trigger() === \"focus\") {\n      return;\n    }\n    isFocused = false;\n    isHovered = false;\n    handleHide();\n  };\n\n  const closeOnPress = () => {\n    if (isDisabled() || !shouldCloseOnPress()) {\n      return;\n    }\n    isFocused = false;\n    isHovered = false;\n    handleHide(true);\n  };\n\n  const onKeyDownPress = (event: KeyboardEvent) => {\n    if (event.key !== \"Enter\" && event.key !== \" \" && event.key !== \"Spacebar\") {\n      return;\n    }\n    closeOnPress();\n  };\n\n  const onFocus = () => {\n    if (isDisabled()) {\n      return;\n    }\n\n    const visible = isFocusVisible();\n    if (visible) {\n      isFocused = true;\n      handleShow();\n    }\n  };\n\n  const onBlur = () => {\n    isFocused = false;\n    isHovered = false;\n    handleHide(true);\n  };\n\n  const { hoverProps } = createHover(() => ({\n    isDisabled: isDisabled(),\n    onHoverStart,\n    onHoverEnd,\n  }));\n\n  const { focusableProps } = createFocusable({\n    isDisabled,\n    onFocus,\n    onBlur,\n  });\n\n  const triggerProps = {\n    ...focusableProps,\n    ...hoverProps,\n    get \"aria-describedby\"() {\n      return !isDisabled() && state.isOpen() ? tooltipId() : undefined;\n    },\n    onPointerDown: closeOnPress,\n    onKeyDown: onKeyDownPress,\n    // Remove tabIndex set by focusableProps to avoid overriding\n    tabIndex: undefined,\n  };\n\n  return {\n    triggerProps: triggerProps as JSX.HTMLAttributes<HTMLElement>,\n    tooltipProps: {\n      get id() {\n        return tooltipId();\n      },\n    },\n  };\n}\n"],"mappings":"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"}