@plexui/vue 0.0.0-stage → 0.1.0

package/dist/es/components/Toast/toast.js

@@ -0,0 +1,18 @@
+import clsx from "clsx";
+import { toast as sonnerToast } from "vue-sonner";
+const withDescriptionClass = (data) => data?.descriptionClass
+    ? { ...data, classes: { ...data.classes, description: clsx(data.descriptionClass, data.classes?.description) } }
+    : data;
+const withData = (show) => (message, data) => show(message, withDescriptionClass(data));
+export const toast = Object.assign(withData(sonnerToast), {
+    ...sonnerToast,
+    success: withData(sonnerToast.success),
+    info: withData(sonnerToast.info),
+    warning: withData(sonnerToast.warning),
+    error: withData(sonnerToast.error),
+    message: withData(sonnerToast.message),
+    loading: withData(sonnerToast.loading),
+    custom: ((component, data) => sonnerToast.custom(component, withDescriptionClass(data))),
+    promise: ((promise, data) => sonnerToast.promise(promise, withDescriptionClass(data))),
+});
+//# sourceMappingURL=toast.js.map

package/dist/es/components/Toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../../src/components/Toast/toast.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,KAAK,IAAI,WAAW,EAAyC,MAAM,YAAY,CAAA;AASxF,MAAM,oBAAoB,GAAG,CAAkC,IAAO,EAAK,EAAE,CAC3E,IAAI,EAAE,gBAAgB;IACpB,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,EAAE;IAChH,CAAC,CAAC,IAAI,CAAA;AAIV,MAAM,QAAQ,GACZ,CAAC,IAAiE,EAAE,EAAE,CAAC,CAAC,OAAgB,EAAE,IAAoB,EAAE,EAAE,CAChH,IAAI,CAAC,OAAO,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAA;AAE7C,MAAM,CAAC,MAAM,KAAK,GAAuB,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;IAC5E,GAAG,WAAW;IACd,OAAO,EAAE,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC;IAChC,OAAO,EAAE,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC;IACtC,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC;IAClC,OAAO,EAAE,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC;IACtC,OAAO,EAAE,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC;IACtC,MAAM,EAAE,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAA8B;IACrH,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAA+B;CACrH,CAAC,CAAA","sourcesContent":["import clsx from \"clsx\"\nimport { toast as sonnerToast, type ExternalToast, type ToastClasses } from \"vue-sonner\"\n\n// vue-sonner's `toast`, with a toast's own `descriptionClass` (sonner\n// `descriptionClassName`) applied: vue-sonner reads only the Toaster's, so the\n// toast's goes into its `classes.description`. It then comes after the\n// Toaster's description class in the class list, where sonner puts it before.\n\ntype ToastData = { descriptionClass?: string; classes?: ToastClasses }\n\nconst withDescriptionClass = <T extends ToastData | undefined>(data: T): T =>\n  data?.descriptionClass\n    ? { ...data, classes: { ...data.classes, description: clsx(data.descriptionClass, data.classes?.description) } }\n    : data\n\ntype Message = Parameters<typeof sonnerToast>[0]\n\nconst withData =\n  (show: (message: Message, data?: ExternalToast) => string | number) => (message: Message, data?: ExternalToast) =>\n    show(message, withDescriptionClass(data))\n\nexport const toast: typeof sonnerToast = Object.assign(withData(sonnerToast), {\n  ...sonnerToast,\n  success: withData(sonnerToast.success),\n  info: withData(sonnerToast.info),\n  warning: withData(sonnerToast.warning),\n  error: withData(sonnerToast.error),\n  message: withData(sonnerToast.message),\n  loading: withData(sonnerToast.loading),\n  custom: ((component, data) => sonnerToast.custom(component, withDescriptionClass(data))) as typeof sonnerToast.custom,\n  promise: ((promise, data) => sonnerToast.promise(promise, withDescriptionClass(data))) as typeof sonnerToast.promise,\n})\n"]}

package/dist/es/components/Tooltip/CopyTooltip.js

@@ -0,0 +1,109 @@
+import { defineComponent, h, onBeforeUnmount, ref } from "vue";
+import { copyText } from "../../lib/copyToClipboard.js";
+import { Check, Copy } from "../Icon/index.js";
+import { TooltipContent, TooltipRoot, TooltipTrigger } from "./Tooltip.js";
+// Vue port of packages/ui/src/components/Tooltip/CopyTooltip.tsx.
+/** Wraps a trigger (the default slot) and copies `copyValue` when it is pressed. */
+export const CopyTooltip = defineComponent({
+    name: "CopyTooltip",
+    props: {
+        /** Value to copy to the clipboard */
+        copyValue: { type: String, required: true },
+        /** Delay before the tooltip opens from the first interaction, in milliseconds. @default 150 */
+        openDelay: { type: Number, default: 150 },
+        /** Preferred alignment against the trigger. @default "center" */
+        align: { type: String, default: "center" },
+        /** Offset from the "start" or "end" alignment, in pixels. @default 0 */
+        alignOffset: { type: Number, default: 0 },
+        /** Preferred side of the trigger. @default "top" */
+        side: { type: String, default: "top" },
+        /** Distance from the trigger, in pixels. @default 5 */
+        sideOffset: { type: Number, default: 5 },
+    },
+    emits: {
+        /** The clipboard write settled; `copied` says whether it succeeded (React's `onCopy`). */
+        copy: (_copied) => true,
+    },
+    setup(props, { slots, emit }) {
+        const open = ref(false);
+        const copied = ref(false);
+        let copiedTimer;
+        let mounted = true;
+        const copy = async () => {
+            // "Copied!" follows the clipboard: a failed write keeps the tooltip as it was
+            const succeeded = await copyText(props.copyValue);
+            if (!mounted)
+                return;
+            emit("copy", succeeded);
+            if (!succeeded)
+                return;
+            copied.value = true;
+            // Persist the copied state for a second, then close
+            clearTimeout(copiedTimer);
+            copiedTimer = setTimeout(() => {
+                open.value = false;
+            }, 1000);
+        };
+        onBeforeUnmount(() => {
+            mounted = false;
+            clearTimeout(copiedTimer);
+        });
+        const handleOpenChange = (nextState) => {
+            // When opening, ensure timer and copied state are cleared
+            if (nextState) {
+                clearTimeout(copiedTimer);
+                copied.value = false;
+            }
+            open.value = nextState;
+        };
+        return () => h(TooltipRoot, {
+            "open": open.value,
+            "onUpdate:open": handleOpenChange,
+            "delayDuration": props.openDelay,
+            "disableHoverableContent": false,
+        }, {
+            default: () => [
+                h(TooltipTrigger, {
+                    onPointerdown: (evt) => {
+                        // Prevent tooltip listeners from closing
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                        // Copy the value
+                        copy();
+                    },
+                    // Prevent default behavior of closing on click from this handler
+                    onClick: (evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    },
+                    // Keyboard users copy with Enter or Space, like a click
+                    onKeydown: (evt) => {
+                        if (evt.key === "Enter" || evt.key === " ") {
+                            evt.preventDefault();
+                            open.value = true;
+                            copy();
+                        }
+                    },
+                }, { default: () => slots.default?.() }),
+                // React also passes an Escape handler here, which Tooltip.Content
+                // overrides with its own; Escape closes through TooltipRoot.
+                h(TooltipContent, {
+                    compact: true,
+                    clickable: !copied.value,
+                    align: props.align,
+                    alignOffset: props.alignOffset,
+                    side: props.side,
+                    sideOffset: props.sideOffset,
+                    collisionPadding: 15,
+                    onPointerdown: copy,
+                }, {
+                    default: () => copied.value
+                        ? // The <Check /> SVG canvas whitespace is larger than copy, so we use a smaller flexbox gap
+                            h("div", { class: "flex items-center gap-0.5" }, [h(Check), " Copied!"])
+                        : h("div", { class: "flex items-center gap-1" }, [h(Copy), " Copy"]),
+                }),
+            ],
+        });
+    },
+});
+//# sourceMappingURL=CopyTooltip.js.map

package/dist/es/components/Tooltip/CopyTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyTooltip.js","sourceRoot":"","sources":["../../../../src/components/Tooltip/CopyTooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import { defineComponent, h, onBeforeUnmount, ref, type PropType } from \"vue\"\nimport { copyText } from \"../../lib/copyToClipboard.js\"\nimport { Check, Copy } from \"../Icon/index.js\"\nimport { TooltipContent, TooltipRoot, TooltipTrigger, type TooltipAlign, type TooltipSide } from \"./Tooltip.js\"\n\n// Vue port of packages/ui/src/components/Tooltip/CopyTooltip.tsx.\n\n/** Wraps a trigger (the default slot) and copies `copyValue` when it is pressed. */\nexport const CopyTooltip = defineComponent({\n  name: \"CopyTooltip\",\n  props: {\n    /** Value to copy to the clipboard */\n    copyValue: { type: String, required: true },\n    /** Delay before the tooltip opens from the first interaction, in milliseconds. @default 150 */\n    openDelay: { type: Number, default: 150 },\n    /** Preferred alignment against the trigger. @default \"center\" */\n    align: { type: String as PropType<TooltipAlign>, default: \"center\" },\n    /** Offset from the \"start\" or \"end\" alignment, in pixels. @default 0 */\n    alignOffset: { type: Number, default: 0 },\n    /** Preferred side of the trigger. @default \"top\" */\n    side: { type: String as PropType<TooltipSide>, default: \"top\" },\n    /** Distance from the trigger, in pixels. @default 5 */\n    sideOffset: { type: Number, default: 5 },\n  },\n  emits: {\n    /** The clipboard write settled; `copied` says whether it succeeded (React's `onCopy`). */\n    copy: (_copied: boolean) => true,\n  },\n  setup(props, { slots, emit }) {\n    const open = ref(false)\n    const copied = ref(false)\n    let copiedTimer: ReturnType<typeof setTimeout> | undefined\n    let mounted = true\n\n    const copy = async () => {\n      // \"Copied!\" follows the clipboard: a failed write keeps the tooltip as it was\n      const succeeded = await copyText(props.copyValue)\n      if (!mounted) return\n      emit(\"copy\", succeeded)\n      if (!succeeded) return\n\n      copied.value = true\n\n      // Persist the copied state for a second, then close\n      clearTimeout(copiedTimer)\n      copiedTimer = setTimeout(() => {\n        open.value = false\n      }, 1000)\n    }\n\n    onBeforeUnmount(() => {\n      mounted = false\n      clearTimeout(copiedTimer)\n    })\n\n    const handleOpenChange = (nextState: boolean) => {\n      // When opening, ensure timer and copied state are cleared\n      if (nextState) {\n        clearTimeout(copiedTimer)\n        copied.value = false\n      }\n\n      open.value = nextState\n    }\n\n    return () =>\n      h(\n        TooltipRoot,\n        {\n          \"open\": open.value,\n          \"onUpdate:open\": handleOpenChange,\n          \"delayDuration\": props.openDelay,\n          \"disableHoverableContent\": false,\n        },\n        {\n          default: () => [\n            h(\n              TooltipTrigger,\n              {\n                onPointerdown: (evt: PointerEvent) => {\n                  // Prevent tooltip listeners from closing\n                  evt.preventDefault()\n                  evt.stopPropagation()\n\n                  // Copy the value\n                  copy()\n                },\n                // Prevent default behavior of closing on click from this handler\n                onClick: (evt: MouseEvent) => {\n                  evt.preventDefault()\n                  evt.stopPropagation()\n                },\n                // Keyboard users copy with Enter or Space, like a click\n                onKeydown: (evt: KeyboardEvent) => {\n                  if (evt.key === \"Enter\" || evt.key === \" \") {\n                    evt.preventDefault()\n                    open.value = true\n                    copy()\n                  }\n                },\n              },\n              { default: () => slots.default?.() },\n            ),\n            // React also passes an Escape handler here, which Tooltip.Content\n            // overrides with its own; Escape closes through TooltipRoot.\n            h(\n              TooltipContent,\n              {\n                compact: true,\n                clickable: !copied.value,\n                align: props.align,\n                alignOffset: props.alignOffset,\n                side: props.side,\n                sideOffset: props.sideOffset,\n                collisionPadding: 15,\n                onPointerdown: copy,\n              },\n              {\n                default: () =>\n                  copied.value\n                    ? // The <Check /> SVG canvas whitespace is larger than copy, so we use a smaller flexbox gap\n                      h(\"div\", { class: \"flex items-center gap-0.5\" }, [h(Check), \" Copied!\"])\n                    : h(\"div\", { class: \"flex items-center gap-1\" }, [h(Copy), \" Copy\"]),\n              },\n            ),\n          ],\n        },\n      )\n  },\n})\n\nexport type CopyTooltipProps = InstanceType<typeof CopyTooltip>[\"$props\"]\n"]}

package/dist/es/components/Tooltip/Tooltip.js

@@ -0,0 +1,421 @@
+import { Text, computed, defineComponent, h, inject, markRaw, normalizeStyle, onBeforeUnmount, provide, ref, watch, } from "vue";
+import { TooltipContent as RekaTooltipContent, TooltipPortal as RekaTooltipPortal, TooltipProvider as RekaTooltipProvider, TooltipRoot as RekaTooltipRoot, TooltipTrigger as RekaTooltipTrigger, injectTooltipProviderContext, injectTooltipRootContext, useId, } from "reka-ui";
+import { useEscCloseStack } from "../../composables/useEscCloseStack.js";
+import { preventDefaultHandler } from "../../lib/helpers.js";
+import { composeEventHandlers, concatAriaDescribedby, firstElementChild, flattenSlot, mergeSlotProps } from "./slot.js";
+import s from "@plexui/styles/components/Tooltip/Tooltip.module.css";
+const TOOLTIP_OPEN = "tooltip.open";
+// Radix's VisuallyHidden styles (Reka's add clip-path, top and left)
+const VISUALLY_HIDDEN_STYLE = {
+    position: "absolute",
+    border: "0",
+    width: "1px",
+    height: "1px",
+    padding: "0",
+    margin: "-1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    wordWrap: "normal",
+};
+/** React adds `px` to unitless numbers in style objects; Vue does not. */
+const toCssLength = (value) => (typeof value === "number" ? `${value}px` : value);
+/**
+ * The content custom properties under Radix's names (`--radix-tooltip-*`,
+ * `--radix-popover-*`), which the shared CSS reads. They still point at the
+ * `--reka-popper-*` values Reka sets on its positioning wrapper.
+ */
+export const withRadixVariableNames = (style, part) => {
+    const from = `--reka-${part}-`;
+    const result = {};
+    for (const [key, value] of Object.entries(normalizeStyle([style]))) {
+        result[key.startsWith(from) ? `--radix-${part}-${key.slice(from.length)}` : key] = value;
+    }
+    return result;
+};
+// The content's own `id`, which Radix uses as the content id (Reka's
+// `contentId` is a plain string the trigger reads once)
+const ContentIdKey = Symbol("PlexUITooltipContentId");
+const REKA_PROVIDER_HOOKS = Symbol("rekaProviderHooks");
+const REKA_STATE = Symbol("rekaStateAttribute");
+// Rendered inside Reka's root: adjusts the provider and root contexts the
+// Radix way (see the notes at the top).
+const TooltipContextBridge = defineComponent({
+    name: "TooltipContextBridge",
+    props: {
+        hooks: { type: Object, required: true },
+    },
+    setup(props, { slots }) {
+        // Reka's originals are kept on the contexts, so a second setup against
+        // the same provider and root (a remount, HMR) still finds them
+        const providerContext = injectTooltipProviderContext();
+        const rekaHooks = (providerContext[REKA_PROVIDER_HOOKS] ??= {
+            onOpen: providerContext.onOpen,
+            onClose: providerContext.onClose,
+        });
+        props.hooks.onOpen = rekaHooks.onOpen;
+        props.hooks.onClose = rekaHooks.onClose;
+        providerContext.onClose = undefined;
+        const rootContext = injectTooltipRootContext();
+        const rekaState = (rootContext[REKA_STATE] ??= rootContext.stateAttribute);
+        const state = ref(rekaState.value);
+        watch(() => rootContext.open.value, () => {
+            state.value = rekaState.value;
+        }, { flush: "sync" });
+        rootContext.stateAttribute = computed(() => state.value);
+        return () => slots.default?.();
+    },
+});
+/** Low-level tooltip root (`Tooltip.Root` in React). Always controlled: bind `v-model:open`. */
+export const TooltipRoot = defineComponent({
+    name: "TooltipRoot",
+    props: {
+        open: { type: Boolean, required: true },
+        /** Delay before the tooltip opens on hover, in milliseconds. @default 700 */
+        delayDuration: Number,
+        /** Closes the tooltip as soon as the pointer leaves the trigger. @default false */
+        disableHoverableContent: { type: Boolean, default: undefined },
+    },
+    emits: {
+        "update:open": (_open) => true,
+    },
+    setup(props, { slots, emit }) {
+        const hooks = { onOpen: () => { }, onClose: () => { } };
+        const onOpenChange = (nextState) => emit("update:open", nextState);
+        provide(ContentIdKey, ref());
+        useEscCloseStack(() => props.open, () => onOpenChange(false));
+        // Radix's controlled state: only real changes are reported
+        const handleOpenChange = (nextState) => {
+            if (nextState === props.open)
+                return;
+            if (nextState) {
+                hooks.onOpen();
+                document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
+            }
+            else {
+                hooks.onClose();
+            }
+            onOpenChange(nextState);
+        };
+        return () => h(RekaTooltipProvider, null, {
+            default: () => h(RekaTooltipRoot, {
+                "open": props.open,
+                "delayDuration": props.delayDuration,
+                "disableHoverableContent": props.disableHoverableContent,
+                // The trigger listeners are this port's (TooltipTrigger)
+                "disabled": true,
+                "onUpdate:open": handleOpenChange,
+            }, { default: () => h(TooltipContextBridge, { hooks }, { default: () => slots.default?.() }) }),
+        });
+    },
+});
+/**
+ * Low-level trigger (`Tooltip.Trigger` in React). Renders its child with the
+ * tooltip wiring merged in; `as-child="false"` renders a `<button>` instead.
+ */
+export const TooltipTrigger = defineComponent({
+    name: "TooltipTrigger",
+    inheritAttrs: false,
+    props: {
+        /** Merges into the child instead of rendering a `<button>`. @default true */
+        asChild: { type: Boolean, default: true },
+    },
+    setup(props, { slots, attrs }) {
+        const rootContext = injectTooltipRootContext();
+        const providerContext = injectTooltipProviderContext();
+        // Set before the first render, which describes the trigger by it
+        rootContext.contentId ||= useId(undefined, "reka-tooltip-content");
+        const contentIdProp = inject(ContentIdKey, undefined);
+        let isPointerDown = false;
+        let hasPointerMoveOpened = false;
+        const handlePointerUp = () => {
+            isPointerDown = false;
+        };
+        onBeforeUnmount(() => document.removeEventListener("pointerup", handlePointerUp));
+        // Radix's TooltipTrigger handlers
+        const handlers = {
+            onPointermove: (event) => {
+                if (event.pointerType === "touch")
+                    return;
+                if (!hasPointerMoveOpened && !providerContext.isPointerInTransitRef.value) {
+                    rootContext.onTriggerEnter();
+                    hasPointerMoveOpened = true;
+                }
+            },
+            onPointerleave: () => {
+                rootContext.onTriggerLeave();
+                hasPointerMoveOpened = false;
+            },
+            onPointerdown: () => {
+                if (rootContext.open.value) {
+                    rootContext.onClose();
+                }
+                isPointerDown = true;
+                document.addEventListener("pointerup", handlePointerUp, { once: true });
+            },
+            onFocus: () => {
+                if (!isPointerDown)
+                    rootContext.onOpen();
+            },
+            onBlur: () => rootContext.onClose(),
+            onClick: () => rootContext.onClose(),
+        };
+        return () => {
+            const child = props.asChild ? firstElementChild(slots.default?.()) : h("button", null, slots.default?.());
+            if (!child)
+                return null;
+            const contentId = contentIdProp?.value ?? rootContext.contentId;
+            const triggerProps = {
+                ...attrs,
+                // Radix adds the content id to the trigger's own while open (the
+                // child's own ids come first, as in Radix's Slot)
+                "aria-describedby": rootContext.open.value
+                    ? concatAriaDescribedby(attrs["aria-describedby"], contentId)
+                    : attrs["aria-describedby"],
+                "data-grace-area-trigger": undefined,
+            };
+            for (const [key, handler] of Object.entries(handlers)) {
+                triggerProps[key] = composeEventHandlers(attrs[key], handler);
+            }
+            return h(RekaTooltipTrigger, { asChild: true }, { default: () => mergeSlotProps(child, triggerProps) });
+        };
+    },
+});
+const ContentChildrenKey = Symbol("PlexUITooltipContent");
+// The element Reka's content renders (`as`), in place of Reka's visually
+// hidden copy of the text. Raw, as Reka may pass `as` through reactive props.
+const TooltipContentElement = markRaw(defineComponent({
+    name: "TooltipContentElement",
+    inheritAttrs: false,
+    setup(_props, { attrs }) {
+        const rootContext = injectTooltipRootContext();
+        const content = inject(ContentChildrenKey);
+        const contentIdProp = inject(ContentIdKey, undefined);
+        return () => {
+            const { dir: _dir, style, id: _id, ...rest } = attrs;
+            const ariaLabel = content.ariaLabel();
+            const contentId = contentIdProp?.value ?? (rootContext.contentId || undefined);
+            return h("div", {
+                role: ariaLabel ? undefined : "tooltip",
+                id: ariaLabel ? undefined : contentId,
+                ...rest,
+                style: withRadixVariableNames(style, "tooltip"),
+            }, [
+                content.render(),
+                ariaLabel ? h("span", { id: contentId, role: "tooltip", style: VISUALLY_HIDDEN_STYLE }, ariaLabel) : null,
+            ]);
+        };
+    },
+}));
+const sideProp = String;
+const alignProp = String;
+const gutterSizeProp = { type: String, default: "md" };
+const maxWidthProp = { type: [Number, String], default: 300 };
+/** Low-level content (`Tooltip.Content` in React). `class` lands on the tooltip. */
+export const TooltipContent = defineComponent({
+    name: "TooltipContent",
+    inheritAttrs: false,
+    props: {
+        /** `max-width` of the tooltip; `"none"` sizes it to a single line. @default 300 */
+        maxWidth: maxWidthProp,
+        /** Short, 1-3 word tooltips, stylized inversely from normal tooltips. @default false */
+        compact: { type: Boolean, default: false },
+        /** Whether the tooltip content responds to clicks */
+        clickable: { type: Boolean, default: undefined },
+        /** Preferred side of the trigger. @default "top" */
+        side: sideProp,
+        /** Distance from the trigger, in pixels. @default 5 */
+        sideOffset: { type: Number, default: 5 },
+        /** Preferred alignment against the trigger. @default "center" */
+        align: alignProp,
+        /** Offset from the "start" or "end" alignment, in pixels. @default 0 */
+        alignOffset: { type: Number, default: 0 },
+        /** Gutter sizing inside the tooltip. @default "md" */
+        gutterSize: gutterSizeProp,
+    },
+    setup(props, { slots, attrs }) {
+        provide(ContentChildrenKey, {
+            render: () => slots.default?.(),
+            ariaLabel: () => attrs["aria-label"],
+        });
+        // Radix's content `id` replaces the generated content id while mounted
+        const contentIdProp = inject(ContentIdKey, undefined);
+        if (contentIdProp) {
+            watch(() => attrs.id, (id) => {
+                contentIdProp.value = id || undefined;
+            }, { immediate: true });
+            onBeforeUnmount(() => {
+                contentIdProp.value = undefined;
+            });
+        }
+        return () => {
+            const { class: className, style, "aria-label": _ariaLabel, id: _id, ...restProps } = attrs;
+            return h(RekaTooltipPortal, null, {
+                default: () => h(RekaTooltipContent, {
+                    ...restProps,
+                    "as": TooltipContentElement,
+                    "side": props.side,
+                    "align": props.align,
+                    "class": [s.Tooltip, className],
+                    "data-compact": String(props.compact),
+                    "data-clickable": props.clickable === undefined ? undefined : String(props.clickable),
+                    "data-gutter-size": props.gutterSize,
+                    "alignOffset": props.alignOffset,
+                    "sideOffset": props.sideOffset,
+                    "collisionPadding": 15,
+                    "hideWhenDetached": true,
+                    "style": [style, { maxWidth: toCssLength(props.maxWidth) }],
+                    // Escape is handled by the Escape stack in TooltipRoot
+                    "onEscapeKeyDown": preventDefaultHandler,
+                }, 
+                // Rendered by TooltipContentElement from the injected slot
+                { default: () => [] }),
+            });
+        };
+    },
+});
+const isPlainText = (nodes) => nodes.length === 1 && nodes[0].type === Text;
+/**
+ * Optional trigger wrapper (`Tooltip.TriggerDecorator` in React) for content
+ * that is not accessible or visibly interactive on its own. Plain text is
+ * wrapped in a focusable `<span>`; an element child gets the props merged in.
+ */
+export const TooltipTriggerDecorator = defineComponent({
+    name: "TooltipTriggerDecorator",
+    inheritAttrs: false,
+    props: {
+        /** Applies `tabindex="0"` to the trigger. @default true */
+        focusable: { type: Boolean, default: true },
+    },
+    setup(props, { slots, attrs }) {
+        return () => {
+            const { class: className, ...restProps } = attrs;
+            const slotProps = {
+                ...restProps,
+                class: [s.TriggerDecorator, className],
+                tabindex: props.focusable ? 0 : undefined,
+            };
+            const children = flattenSlot(slots.default?.());
+            if (isPlainText(children)) {
+                return h("span", slotProps, String(children[0].children ?? ""));
+            }
+            const child = firstElementChild(children);
+            return child ? mergeSlotProps(child, slotProps) : null;
+        };
+    },
+});
+const TooltipComponent = defineComponent({
+    name: "Tooltip",
+    inheritAttrs: false,
+    props: {
+        /**
+         * The content of the tooltip (or the `#content` slot). `null` renders no
+         * tooltip.
+         */
+        content: { type: [String, Number, Object], default: undefined },
+        /** `max-width` of the tooltip; `"none"` sizes it to a single line. @default 300 */
+        maxWidth: maxWidthProp,
+        /** Forces the tooltip to remain open or closed */
+        forceOpen: { type: Boolean, default: undefined },
+        /** Delay before the tooltip opens from the first interaction, in milliseconds. @default 150 */
+        openDelay: { type: Number, default: 150 },
+        /** The tooltip has interactive content and stays open while hovered. @default false */
+        interactive: { type: Boolean, default: false },
+        /** Short, 1-3 word tooltips, stylized inversely from normal tooltips. @default false */
+        compact: { type: Boolean, default: false },
+        /** Keeps the tooltip open when the trigger is clicked right after it opened. @default false */
+        preventUnintentionalClickToClose: { type: Boolean, default: undefined },
+        /** Preferred alignment against the trigger. @default "center" */
+        align: alignProp,
+        /** Offset from the "start" or "end" alignment, in pixels. @default 0 */
+        alignOffset: { type: Number, default: 0 },
+        /** Preferred side of the trigger. @default "top" */
+        side: sideProp,
+        /** Distance from the trigger, in pixels. @default 5 */
+        sideOffset: { type: Number, default: 5 },
+        /** Gutter sizing inside the tooltip. @default "md" */
+        gutterSize: gutterSizeProp,
+        /** Class applied to the tooltip content */
+        contentClassName: String,
+    },
+    emits: {
+        pointerdown: (_event) => true,
+        click: (_event) => true,
+    },
+    setup(props, { slots, attrs, emit }) {
+        const visible = ref(false);
+        const temporarilyPreventClickToClose = ref(false);
+        watch(temporarilyPreventClickToClose, (prevent, _, onCleanup) => {
+            if (!prevent)
+                return;
+            const id = setTimeout(() => {
+                temporarilyPreventClickToClose.value = false;
+            }, 400);
+            onCleanup(() => clearTimeout(id));
+        });
+        const hasContent = () => !(props.content === null && !slots.content);
+        const forceOpen = () => props.forceOpen ?? (hasContent() ? undefined : false);
+        const handleOpenChange = (nextState) => {
+            // When forceOpen is passed, don't manage internal state
+            if (typeof forceOpen() === "boolean")
+                return;
+            visible.value = nextState;
+            if (props.preventUnintentionalClickToClose) {
+                temporarilyPreventClickToClose.value = nextState;
+            }
+        };
+        const maybePreventClickClose = (evt) => {
+            if (props.preventUnintentionalClickToClose && temporarilyPreventClickToClose.value) {
+                // Prevents tooltip listeners from closing
+                evt.preventDefault();
+                evt.stopPropagation();
+            }
+        };
+        const onPointerdown = (evt) => {
+            maybePreventClickClose(evt);
+            emit("pointerdown", evt);
+        };
+        const onClick = (evt) => {
+            maybePreventClickClose(evt);
+            emit("click", evt);
+        };
+        return () => {
+            const child = firstElementChild(slots.default?.());
+            return h(TooltipRoot, {
+                "open": forceOpen() ?? visible.value,
+                "delayDuration": props.openDelay,
+                "onUpdate:open": handleOpenChange,
+                "disableHoverableContent": !props.interactive,
+            }, {
+                default: () => [
+                    h(TooltipTrigger, null, {
+                        default: () => (child ? mergeSlotProps(child, { ...attrs, onPointerdown, onClick }) : null),
+                    }),
+                    h(TooltipContent, {
+                        maxWidth: props.maxWidth,
+                        compact: props.compact,
+                        align: props.align,
+                        alignOffset: props.alignOffset,
+                        side: props.side,
+                        sideOffset: props.sideOffset,
+                        gutterSize: props.gutterSize,
+                        class: props.contentClassName,
+                    }, { default: () => (slots.content ? slots.content() : props.content) }),
+                ],
+            });
+        };
+    },
+});
+/**
+ * Tooltip for any trigger element (the default slot). Content comes from the
+ * `content` prop or the `#content` slot; `null` disables the tooltip.
+ */
+// Typed explicitly so the published declaration refers to the parts instead of
+// expanding them (an expanded component type fails consumers' type checks)
+export const Tooltip = Object.assign(TooltipComponent, {
+    Root: TooltipRoot,
+    Content: TooltipContent,
+    Trigger: TooltipTrigger,
+    TriggerDecorator: TooltipTriggerDecorator,
+});
+//# sourceMappingURL=Tooltip.js.map