@youcan/celeste 0.21.2 → 0.22.1

package/dist/es/chunks/tooltip-content.js

@@ -1,601 +1,9 @@
-import { t as clsx } from "./clsx.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { _ as tryOnScopeDispose, p as refAutoReset, t as createEventHook } from "./dist.js";
-import { s as useEventListener } from "./dist2.js";
-import { t as DismissableLayer_default } from "./DismissableLayer.js";
-import { t as defu } from "./defu.js";
-import { t as useForwardExpose } from "./useForwardExpose.js";
-import { t as useForwardProps } from "./useForwardProps.js";
-import { t as useForwardPropsEmits } from "./useForwardPropsEmits.js";
-import { t as Presence_default } from "./Presence.js";
-import { t as Teleport_default } from "./Teleport.js";
-import { t as VisuallyHidden_default } from "./VisuallyHidden.js";
-import { t as PopperArrow_default } from "./PopperArrow.js";
-import { n as PopperContent_default } from "./PopperContent.js";
-import { n as injectTooltipProviderContext } from "./TooltipProvider.js";
-import { n as injectTooltipRootContext, r as TOOLTIP_OPEN } from "./TooltipRoot.js";
 import { t as compact_button_default } from "./compact-button.js";
 import { useDelegatedProps } from "../use-delegated-props.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, onMounted, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, watchEffect, withCtx, withModifiers } from "vue";
-//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/shared/useGraceArea.js
-function useGraceArea(triggerElement, containerElement) {
-	const isPointerInTransit = refAutoReset(false, 300);
-	tryOnScopeDispose(() => {
-		isPointerInTransit.value = false;
-	});
-	const pointerGraceArea = ref(null);
-	const pointerExit = createEventHook();
-	function handleRemoveGraceArea() {
-		pointerGraceArea.value = null;
-		isPointerInTransit.value = false;
-	}
-	function handleCreateGraceArea(event, hoverTarget) {
-		if (!hoverTarget) return;
-		const currentTarget = event.currentTarget;
-		const exitPoint = {
-			x: event.clientX,
-			y: event.clientY
-		};
-		const paddedExitPoints = getPaddedExitPoints(exitPoint, getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect()), 1);
-		const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
-		const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);
-		pointerGraceArea.value = graceArea;
-		isPointerInTransit.value = true;
-	}
-	watchEffect((cleanupFn) => {
-		if (triggerElement.value && containerElement.value) {
-			const trigger = triggerElement.value;
-			const container = containerElement.value;
-			const handleTriggerLeave = (event) => handleCreateGraceArea(event, container);
-			const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
-			trigger.addEventListener("pointerleave", handleTriggerLeave);
-			container.addEventListener("pointerleave", handleContentLeave);
-			cleanupFn(() => {
-				trigger.removeEventListener("pointerleave", handleTriggerLeave);
-				container.removeEventListener("pointerleave", handleContentLeave);
-			});
-		}
-	});
-	watchEffect((cleanupFn) => {
-		if (pointerGraceArea.value) {
-			const handleTrackPointerGrace = (event) => {
-				if (!pointerGraceArea.value || !(event.target instanceof Element)) return;
-				const target = event.target;
-				const pointerPosition = {
-					x: event.clientX,
-					y: event.clientY
-				};
-				const hasEnteredTarget = triggerElement.value?.contains(target) || containerElement.value?.contains(target);
-				const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea.value);
-				const isAnotherGraceAreaTrigger = !!target.closest("[data-grace-area-trigger]");
-				if (hasEnteredTarget) handleRemoveGraceArea();
-				else if (isPointerOutsideGraceArea || isAnotherGraceAreaTrigger) {
-					handleRemoveGraceArea();
-					pointerExit.trigger();
-				}
-			};
-			const ownerDocument = triggerElement.value?.ownerDocument;
-			ownerDocument?.addEventListener("pointermove", handleTrackPointerGrace);
-			cleanupFn(() => ownerDocument?.removeEventListener("pointermove", handleTrackPointerGrace));
-		}
-	});
-	return {
-		isPointerInTransit,
-		onPointerExit: pointerExit.on
-	};
-}
-function getExitSideFromRect(point, rect) {
-	const top = Math.abs(rect.top - point.y);
-	const bottom = Math.abs(rect.bottom - point.y);
-	const right = Math.abs(rect.right - point.x);
-	const left = Math.abs(rect.left - point.x);
-	switch (Math.min(top, bottom, right, left)) {
-		case left: return "left";
-		case right: return "right";
-		case top: return "top";
-		case bottom: return "bottom";
-		default: throw new Error("unreachable");
-	}
-}
-function getPaddedExitPoints(exitPoint, exitSide, padding = 5) {
-	const paddedExitPoints = [];
-	switch (exitSide) {
-		case "top":
-			paddedExitPoints.push({
-				x: exitPoint.x - padding,
-				y: exitPoint.y + padding
-			}, {
-				x: exitPoint.x + padding,
-				y: exitPoint.y + padding
-			});
-			break;
-		case "bottom":
-			paddedExitPoints.push({
-				x: exitPoint.x - padding,
-				y: exitPoint.y - padding
-			}, {
-				x: exitPoint.x + padding,
-				y: exitPoint.y - padding
-			});
-			break;
-		case "left":
-			paddedExitPoints.push({
-				x: exitPoint.x + padding,
-				y: exitPoint.y - padding
-			}, {
-				x: exitPoint.x + padding,
-				y: exitPoint.y + padding
-			});
-			break;
-		case "right": paddedExitPoints.push({
-			x: exitPoint.x - padding,
-			y: exitPoint.y - padding
-		}, {
-			x: exitPoint.x - padding,
-			y: exitPoint.y + padding
-		});
-	}
-	return paddedExitPoints;
-}
-function getPointsFromRect(rect) {
-	const { top, right, bottom, left } = rect;
-	return [
-		{
-			x: left,
-			y: top
-		},
-		{
-			x: right,
-			y: top
-		},
-		{
-			x: right,
-			y: bottom
-		},
-		{
-			x: left,
-			y: bottom
-		}
-	];
-}
-function isPointInPolygon(point, polygon) {
-	const { x, y } = point;
-	let inside = false;
-	for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-		const xi = polygon[i].x;
-		const yi = polygon[i].y;
-		const xj = polygon[j].x;
-		const yj = polygon[j].y;
-		if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) inside = !inside;
-	}
-	return inside;
-}
-function getHull(points) {
-	const newPoints = points.slice();
-	newPoints.sort((a, b) => {
-		if (a.x < b.x) return -1;
-		else if (a.x > b.x) return 1;
-		else if (a.y < b.y) return -1;
-		else if (a.y > b.y) return 1;
-		else return 0;
-	});
-	return getHullPresorted(newPoints);
-}
-function getHullPresorted(points) {
-	if (points.length <= 1) return points.slice();
-	const upperHull = [];
-	for (let i = 0; i < points.length; i++) {
-		const p = points[i];
-		while (upperHull.length >= 2) {
-			const q = upperHull.at(-1);
-			const r = upperHull[upperHull.length - 2];
-			if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upperHull.pop();
-			else break;
-		}
-		upperHull.push(p);
-	}
-	upperHull.pop();
-	const lowerHull = [];
-	for (let i = points.length - 1; i >= 0; i--) {
-		const p = points[i];
-		while (lowerHull.length >= 2) {
-			const q = lowerHull.at(-1);
-			const r = lowerHull[lowerHull.length - 2];
-			if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lowerHull.pop();
-			else break;
-		}
-		lowerHull.push(p);
-	}
-	lowerHull.pop();
-	if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) return upperHull;
-	else return upperHull.concat(lowerHull);
-}
-//#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Tooltip/TooltipArrow.js
-var TooltipArrow_default = /* @__PURE__ */ defineComponent({
-	__name: "TooltipArrow",
-	props: {
-		width: {
-			type: Number,
-			required: false,
-			default: 10
-		},
-		height: {
-			type: Number,
-			required: false,
-			default: 5
-		},
-		asChild: {
-			type: Boolean,
-			required: false
-		},
-		as: {
-			type: null,
-			required: false,
-			default: "svg"
-		}
-	},
-	setup(__props) {
-		const props = __props;
-		useForwardExpose();
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(PopperArrow_default), normalizeProps(guardReactiveProps(props)), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 16);
-		};
-	}
-});
-//#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Tooltip/TooltipContentImpl.js
-var TooltipContentImpl_default = /* @__PURE__ */ defineComponent({
-	__name: "TooltipContentImpl",
-	props: {
-		ariaLabel: {
-			type: String,
-			required: false
-		},
-		asChild: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		as: {
-			type: null,
-			required: false
-		},
-		side: {
-			type: null,
-			required: false
-		},
-		sideOffset: {
-			type: Number,
-			required: false
-		},
-		align: {
-			type: null,
-			required: false
-		},
-		alignOffset: {
-			type: Number,
-			required: false
-		},
-		avoidCollisions: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		collisionBoundary: {
-			type: null,
-			required: false
-		},
-		collisionPadding: {
-			type: [Number, Object],
-			required: false
-		},
-		arrowPadding: {
-			type: Number,
-			required: false
-		},
-		sticky: {
-			type: String,
-			required: false
-		},
-		hideWhenDetached: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		positionStrategy: {
-			type: String,
-			required: false
-		},
-		updatePositionStrategy: {
-			type: String,
-			required: false
-		}
-	},
-	emits: ["escapeKeyDown", "pointerDownOutside"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emits = __emit;
-		const rootContext = injectTooltipRootContext();
-		const providerContext = injectTooltipProviderContext();
-		const { forwardRef, currentElement } = useForwardExpose();
-		const ariaLabel = computed(() => props.ariaLabel || currentElement.value?.textContent);
-		const popperContentProps = computed(() => {
-			const { ariaLabel: _, ...restProps } = props;
-			return defu(restProps, providerContext.content.value ?? {}, {
-				side: "top",
-				sideOffset: 0,
-				align: "center",
-				avoidCollisions: true,
-				collisionBoundary: [],
-				collisionPadding: 0,
-				arrowPadding: 0,
-				sticky: "partial",
-				hideWhenDetached: false
-			});
-		});
-		onMounted(() => {
-			useEventListener(window, "scroll", (event) => {
-				if (event.target?.contains(rootContext.trigger.value)) rootContext.onClose();
-			}, { capture: true });
-			useEventListener(document, TOOLTIP_OPEN, rootContext.onClose);
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(DismissableLayer_default), {
-				"as-child": "",
-				"disable-outside-pointer-events": false,
-				onEscapeKeyDown: _cache[0] || (_cache[0] = ($event) => emits("escapeKeyDown", $event)),
-				onPointerDownOutside: _cache[1] || (_cache[1] = (event) => {
-					if (unref(rootContext).disableClosingTrigger.value && unref(rootContext).trigger.value?.contains(event.target)) event.preventDefault();
-					emits("pointerDownOutside", event);
-				}),
-				onFocusOutside: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
-				onDismiss: _cache[3] || (_cache[3] = ($event) => unref(rootContext).onClose())
-			}, {
-				default: withCtx(() => [createVNode(unref(PopperContent_default), mergeProps({
-					ref: unref(forwardRef),
-					"data-state": unref(rootContext).stateAttribute.value
-				}, {
-					..._ctx.$attrs,
-					...popperContentProps.value
-				}, { style: {
-					"--reka-tooltip-content-transform-origin": "var(--reka-popper-transform-origin)",
-					"--reka-tooltip-content-available-width": "var(--reka-popper-available-width)",
-					"--reka-tooltip-content-available-height": "var(--reka-popper-available-height)",
-					"--reka-tooltip-trigger-width": "var(--reka-popper-anchor-width)",
-					"--reka-tooltip-trigger-height": "var(--reka-popper-anchor-height)"
-				} }), {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "default"), createVNode(unref(VisuallyHidden_default), {
-						id: unref(rootContext).contentId,
-						role: "tooltip"
-					}, {
-						default: withCtx(() => [createTextVNode(toDisplayString(ariaLabel.value), 1)]),
-						_: 1
-					}, 8, ["id"])]),
-					_: 3
-				}, 16, ["data-state"])]),
-				_: 3
-			});
-		};
-	}
-});
-//#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Tooltip/TooltipContentHoverable.js
-var TooltipContentHoverable_default = /* @__PURE__ */ defineComponent({
-	__name: "TooltipContentHoverable",
-	props: {
-		ariaLabel: {
-			type: String,
-			required: false
-		},
-		asChild: {
-			type: Boolean,
-			required: false
-		},
-		as: {
-			type: null,
-			required: false
-		},
-		side: {
-			type: null,
-			required: false
-		},
-		sideOffset: {
-			type: Number,
-			required: false
-		},
-		align: {
-			type: null,
-			required: false
-		},
-		alignOffset: {
-			type: Number,
-			required: false
-		},
-		avoidCollisions: {
-			type: Boolean,
-			required: false
-		},
-		collisionBoundary: {
-			type: null,
-			required: false
-		},
-		collisionPadding: {
-			type: [Number, Object],
-			required: false
-		},
-		arrowPadding: {
-			type: Number,
-			required: false
-		},
-		sticky: {
-			type: String,
-			required: false
-		},
-		hideWhenDetached: {
-			type: Boolean,
-			required: false
-		},
-		positionStrategy: {
-			type: String,
-			required: false
-		},
-		updatePositionStrategy: {
-			type: String,
-			required: false
-		}
-	},
-	setup(__props) {
-		const forwardedProps = useForwardProps(__props);
-		const { forwardRef, currentElement } = useForwardExpose();
-		const { trigger, onClose } = injectTooltipRootContext();
-		const providerContext = injectTooltipProviderContext();
-		const { isPointerInTransit, onPointerExit } = useGraceArea(trigger, currentElement);
-		providerContext.isPointerInTransitRef = isPointerInTransit;
-		onPointerExit(() => {
-			onClose();
-		});
-		useEventListener(currentElement, "pointermove", (event) => {
-			const content = currentElement.value;
-			if (!content || event.pointerType === "touch") return;
-			if (content.ownerDocument.elementsFromPoint?.(event.clientX, event.clientY).some((el) => {
-				if (content.contains(el)) return false;
-				const coveredTrigger = el.closest("[data-grace-area-trigger]");
-				return !!coveredTrigger && coveredTrigger !== trigger.value;
-			})) onClose();
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(TooltipContentImpl_default, mergeProps({ ref: unref(forwardRef) }, unref(forwardedProps)), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 16);
-		};
-	}
-});
-//#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Tooltip/TooltipContent.js
-var TooltipContent_default = /* @__PURE__ */ defineComponent({
-	__name: "TooltipContent",
-	props: {
-		forceMount: {
-			type: Boolean,
-			required: false
-		},
-		ariaLabel: {
-			type: String,
-			required: false
-		},
-		asChild: {
-			type: Boolean,
-			required: false
-		},
-		as: {
-			type: null,
-			required: false
-		},
-		side: {
-			type: null,
-			required: false
-		},
-		sideOffset: {
-			type: Number,
-			required: false
-		},
-		align: {
-			type: null,
-			required: false
-		},
-		alignOffset: {
-			type: Number,
-			required: false
-		},
-		avoidCollisions: {
-			type: Boolean,
-			required: false
-		},
-		collisionBoundary: {
-			type: null,
-			required: false
-		},
-		collisionPadding: {
-			type: [Number, Object],
-			required: false
-		},
-		arrowPadding: {
-			type: Number,
-			required: false
-		},
-		sticky: {
-			type: String,
-			required: false
-		},
-		hideWhenDetached: {
-			type: Boolean,
-			required: false
-		},
-		positionStrategy: {
-			type: String,
-			required: false
-		},
-		updatePositionStrategy: {
-			type: String,
-			required: false
-		}
-	},
-	emits: ["escapeKeyDown", "pointerDownOutside"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emits = __emit;
-		const rootContext = injectTooltipRootContext();
-		const forwarded = useForwardPropsEmits(props, emits);
-		const { forwardRef } = useForwardExpose();
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Presence_default), { present: _ctx.forceMount || unref(rootContext).open.value }, {
-				default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(rootContext).disableHoverableContent.value ? TooltipContentImpl_default : TooltipContentHoverable_default), mergeProps({ ref: unref(forwardRef) }, unref(forwarded)), {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-					_: 3
-				}, 16))]),
-				_: 3
-			}, 8, ["present"]);
-		};
-	}
-});
-//#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Tooltip/TooltipPortal.js
-var TooltipPortal_default = /* @__PURE__ */ defineComponent({
-	__name: "TooltipPortal",
-	props: {
-		to: {
-			type: null,
-			required: false
-		},
-		disabled: {
-			type: Boolean,
-			required: false
-		},
-		defer: {
-			type: Boolean,
-			required: false
-		},
-		forceMount: {
-			type: Boolean,
-			required: false
-		}
-	},
-	setup(__props) {
-		const props = __props;
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Teleport_default), normalizeProps(guardReactiveProps(props)), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 16);
-		};
-	}
-});
-//#endregion
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import clsx$1 from "clsx";
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui";
 //#region src/components/tooltip/tooltip-content.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "celeste-tooltip-content-box" };
 var _hoisted_2 = {
@@ -661,11 +69,11 @@ var tooltip_content_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			props.onDismiss?.();
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(TooltipPortal_default), { class: "celeste-tooltip-portal" }, {
-				default: withCtx(() => [createVNode(unref(TooltipContent_default), mergeProps(unref(forwarded), {
+			return openBlock(), createBlock(unref(TooltipPortal), { class: "celeste-tooltip-portal" }, {
+				default: withCtx(() => [createVNode(unref(TooltipContent), mergeProps(unref(forwarded), {
 					size: __props.size,
 					variant: __props.variant,
-					class: unref(clsx)("celeste-tooltip-content", props.class)
+					class: unref(clsx$1)("celeste-tooltip-content", props.class)
 				}), {
 					default: withCtx(() => [
 						__props.icon ? (openBlock(), createElementBlock("i", {
@@ -683,7 +91,7 @@ var tooltip_content_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 							icon: "i-celeste-close-line",
 							onClick: handleDismiss
 						})) : createCommentVNode("", true),
-						createVNode(unref(TooltipArrow_default), { "as-child": "" }, {
+						createVNode(unref(TooltipArrow), { "as-child": "" }, {
 							default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("span", { class: "celeste-tooltip-content-arrow" }, null, -1)])]),
 							_: 1
 						})

package/dist/es/chunks/tooltip-provider.js

@@ -1,5 +1,5 @@
-import { t as TooltipProvider_default } from "./TooltipProvider.js";
 import { createBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { TooltipProvider } from "reka-ui";
 //#endregion
 //#region src/components/tooltip/tooltip-provider.vue
 var tooltip_provider_default = /* @__PURE__ */ defineComponent({
@@ -16,7 +16,7 @@ var tooltip_provider_default = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		const props = __props;
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(TooltipProvider_default), normalizeProps(guardReactiveProps(props)), {
+			return openBlock(), createBlock(unref(TooltipProvider), normalizeProps(guardReactiveProps(props)), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
 			}, 16);

package/dist/es/chunks/tooltip-root.js

@@ -1,7 +1,6 @@
-import { t as useForwardPropsEmits } from "./useForwardPropsEmits.js";
-import { t as TooltipRoot_default } from "./TooltipRoot.js";
 import { useDelegatedProps } from "../use-delegated-props.js";
 import { createBlock, defineComponent, mergeProps, openBlock, ref, renderSlot, unref, withCtx } from "vue";
+import { TooltipRoot, useForwardPropsEmits } from "reka-ui";
 //#endregion
 //#region src/components/tooltip/tooltip-root.vue
 var tooltip_root_default = /* @__PURE__ */ defineComponent({
@@ -23,7 +22,7 @@ var tooltip_root_default = /* @__PURE__ */ defineComponent({
 		const forwarded = useForwardPropsEmits(delegatedProps, emits);
 		const open = ref(false);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(TooltipRoot_default), mergeProps(unref(forwarded), {
+			return openBlock(), createBlock(unref(TooltipRoot), mergeProps(unref(forwarded), {
 				open: open.value,
 				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event)
 			}), {