@leavepulse/ui 0.24.1 → 0.26.0

package/src/composables/easing.ts

@@ -0,0 +1,88 @@
+/*
+ * Easing curves for animations driven in JAVASCRIPT rather than by CSS.
+ *
+ * Most of the kit eases with a CSS custom property — `var(--ease-travel)` and
+ * friends in tokens.css. A few animations cannot: they interpolate a NUMBER
+ * that several elements then derive from (LpProgress drives an arc and its
+ * counter off one value; LpPie sweeps a clip path; LpNumberFlow moves a figure
+ * its digit columns are computed from). There is no property to transition, so
+ * the curve has to be a function.
+ *
+ * These are the counterparts of the CSS tokens, kept together so a component
+ * picks a named feel instead of open-coding a polynomial — which is how the
+ * curve in LpProgress and the one in LpNumberFlow drifted apart while a comment
+ * in each still claimed they matched.
+ *
+ * They are approximations of the cubic-beziers, not exact ports: a bezier needs
+ * solving per frame, and for these the shape is what matters, not the decimals.
+ * Change one and change its token in tokens.css.
+ */
+
+/**
+ * Does the OS ask for less motion?
+ *
+ * Written out in eight places before this, in two different shapes — some
+ * guarded against SSR, some not, which is a crash in a Nuxt app rather than a
+ * style difference. Anything that animates asks here.
+ *
+ * A plain function, not a reactive composable: it is read at the moment an
+ * animation starts, and a component that also needs to RE-RENDER when the
+ * setting changes mid-session should use motion-v's `useReducedMotion`.
+ */
+export const prefersReducedMotion = (): boolean =>
+  typeof window !== "undefined" &&
+  (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false)
+
+/**
+ * A motion token's value, for an API that cannot take a `var()`.
+ *
+ * The Web Animations API and SVG's SMIL both want a literal easing string, so
+ * three call sites had `cubic-bezier(0.2, 0, 0, 1)` typed out — the value of
+ * `--ease-emphasized`, copied. A theme that retuned the token moved everything
+ * except those, and nothing said they were meant to match.
+ *
+ * Reading the custom property keeps them themeable. The fallback covers SSR and
+ * the frame before tokens are applied.
+ */
+export const easingToken = (
+  name: "ease-emphasized" | "ease-travel" | "ease-settle",
+  fallback = "cubic-bezier(0.2, 0, 0, 1)",
+): string => {
+  if (typeof window === "undefined" || !window.getComputedStyle) return fallback
+  const value = getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim()
+  return value || fallback
+}
+
+/**
+ * Comes to rest — `--ease-settle`'s shape without the overshoot.
+ *
+ * Gently decelerating: the value keeps moving visibly for most of the travel
+ * instead of arriving early and then creeping. Use it wherever a figure counts
+ * up to something, so the digits keep turning across the whole duration.
+ */
+export const easeOut = (t: number): number => 1 - (1 - t) ** 2
+
+/**
+ * Travels a distance the eye follows — the JS form of `--ease-travel`.
+ *
+ * Nearly linear, and deliberately so: an ease-out spends about half its
+ * duration covering the last tenth of the path, so a stroke or sweep animated
+ * with one flashes past and then visibly creeps. Use this wherever the journey
+ * is the content — a line drawing itself, a wipe crossing a plot, a circle
+ * sweeping open.
+ *
+ * The ease is applied only near the ends, and the finish is NOT flattened onto
+ * the target: the motion is still moving when it lands, which is what keeps
+ * the tail short.
+ */
+export const easeTravel = (t: number): number => {
+  // Smooth the first and last ~20% and run straight through the middle.
+  const EDGE = 0.2
+  if (t < EDGE) return (t * t) / (2 * EDGE) + t * 0.1
+  if (t > 1 - EDGE) {
+    const r = 1 - t
+    return 1 - ((r * r) / (2 * EDGE) + r * 0.1)
+  }
+  const head = (EDGE * EDGE) / (2 * EDGE) + EDGE * 0.1
+  return head + ((t - EDGE) / (1 - 2 * EDGE)) * (1 - 2 * head)
+}

package/src/composables/usePillTransition.ts

@@ -2,18 +2,83 @@ import { useReducedMotion } from "motion-v"
 import { computed, type ComputedRef } from "vue"
 
 /*
- * Shared motion-v transition for the sliding "pill" indicator used by LpTabs,
- * LpSegmented and LpPagination (a shared layoutId element that flies under the
- * active item). One spring keeps the feel identical across them; it collapses to
- * an instant move when the OS prefers reduced motion.
+ * Shared motion-v transition for an element that FLIES to a new position rather
+ * than cutting to it: the sliding "pill" indicator in LpTabs, LpSegmented and
+ * LpPagination (a shared layoutId element under the active item), and LpChart's
+ * tooltip trailing the cursor. One spring per feel keeps them consistent, and
+ * every preset collapses to an instant move when the OS prefers reduced motion.
+ *
+ * Two feels, because the two jobs want opposite things:
+ *
+ *   "pill"  — snappy. The move is a direct answer to a click, so it should read
+ *             as already-arrived: high stiffness, almost no visible travel.
+ *   "float" — trailing. The element chases a continuously moving pointer, so it
+ *             wants perceptible lag and a soft landing; a pill-stiff spring
+ *             tracks the cursor so exactly that it reads as jitter, not motion.
  */
 export type PillTransition =
   | { duration: number }
   | { type: "spring"; stiffness: number; damping: number }
 
-export function usePillTransition(): ComputedRef<PillTransition> {
+export type PillFeel = "pill" | "float"
+
+const SPRING: Record<PillFeel, { type: "spring"; stiffness: number; damping: number }> = {
+  pill: { type: "spring", stiffness: 520, damping: 40 },
+  float: { type: "spring", stiffness: 210, damping: 26 },
+}
+
+export function usePillTransition(feel: PillFeel = "pill"): ComputedRef<PillTransition> {
   const reduceMotion = useReducedMotion()
   return computed<PillTransition>(() =>
-    reduceMotion.value ? { duration: 0 } : { type: "spring", stiffness: 520, damping: 40 },
+    reduceMotion.value ? { duration: 0 } : SPRING[feel],
   )
 }
+
+/*
+ * The same feels as a step function, for a follower that cannot be driven by
+ * motion-v.
+ *
+ * LpChart's readout is positioned inside its own plot, so it can hand motion-v
+ * an absolute target and let the library do the work. LpTooltip's panel is
+ * portalled into <body> and placed by reka; all it can contribute is an offset
+ * on top of that, which no declarative animation owns — so it integrates the
+ * spring itself, one frame at a time.
+ *
+ * Two mechanisms, then, but one place to tune them. The constants below are NOT
+ * the motion-v pair reused: an explicit integrator needs a mass-normalised
+ * stiffness and a damping ratio, and feeding it motion-v's numbers produced a
+ * spring so slack the panel crept toward the cursor and never arrived. They are
+ * matched by feel and kept beside their motion-v counterparts so that a change
+ * to one is an obvious prompt to check the other.
+ */
+const STEP_SPRING: Record<PillFeel, { stiffness: number; damping: number }> = {
+  // Critically damped: reaches the target quickly, never past it.
+  pill: { stiffness: 420, damping: 41 },
+  float: { stiffness: 260, damping: 32 },
+}
+
+export interface SpringState {
+  /** Current position; seed it with the start value. */
+  value: number
+  /** Current velocity; seed with 0. */
+  velocity: number
+}
+
+export function springStep(
+  state: SpringState,
+  target: number,
+  feel: PillFeel = "float",
+  /** Frame time in seconds; clamped so a backgrounded tab can't explode it. */
+  dt = 1 / 60,
+): SpringState {
+  const { stiffness, damping } = STEP_SPRING[feel]
+  const step = Math.min(dt, 1 / 30)
+  const force = (target - state.value) * stiffness
+  const drag = state.velocity * damping
+  const velocity = state.velocity + (force - drag) * step
+  return { value: state.value + velocity * step, velocity }
+}
+
+/** True once a spring is close enough to its target to stop animating. */
+export const springSettled = (state: SpringState, target: number): boolean =>
+  Math.abs(target - state.value) < 0.3 && Math.abs(state.velocity) < 0.3

package/src/composables/useReveal.ts

@@ -0,0 +1,113 @@
+import { onBeforeUnmount, ref, toValue, watch, type MaybeRefOrGetter, type Ref } from "vue"
+import { prefersReducedMotion } from "./easing"
+
+/*
+ * "Has this element actually been SEEN yet?"
+ *
+ * An entrance animation is a statement about arrival, and mounting is not
+ * arrival. A component mounts when Vue builds its subtree — which happens while
+ * the tab is still painting its first frame, while the element sits below the
+ * fold, inside a panel that is closed, or in a tab nobody has switched to. By
+ * the time any of those become visible the animation has already run to the
+ * end, and the user sees the finished state and wonders why the thing they were
+ * told animates does not.
+ *
+ * The gap is easy to miss in development, because a hot reload remounts an
+ * element that is already on screen — the one case where mount and arrival do
+ * coincide. It shows up on a cold page load, which is the only load a user ever
+ * performs.
+ *
+ * So the trigger is intersection, not lifecycle: the flag flips the first time
+ * the element is both in the viewport and in a visible subtree, and never
+ * flips back. Entrances do not replay — an element that scrolls away and
+ * returns has already arrived, and re-drawing it every time it crosses the
+ * fold reads as a page that will not settle.
+ *
+ * Reduced motion resolves immediately: there is no entrance to protect, and
+ * making the content wait for an observer would only delay it.
+ *
+ * Every animated element in the kit routes through this, so "animate on
+ * appearance" means the same thing in a sparkline, a chart and a progress bar,
+ * and a consumer scrolling a dashboard sees each of them draw as it comes into
+ * view rather than finding them all already finished.
+ */
+
+export interface UseRevealOptions {
+  /**
+   * Skip the wait and reveal at once. For a caller that has switched its
+   * entrance off — there is nothing to gate, and holding content back for an
+   * observer that no longer guards anything only delays the first paint.
+   */
+  immediate?: MaybeRefOrGetter<boolean | undefined>
+  /**
+   * Fraction of the element that must be on screen. A sliver of a tall chart
+   * scrolling into view is not yet an arrival; a quarter of it is.
+   */
+  threshold?: number
+  /**
+   * Grow the viewport for the test, so an element just past the fold starts
+   * drawing as it is scrolled toward rather than after it lands.
+   */
+  rootMargin?: string
+}
+
+export interface UseReveal {
+  /** Attach to the element whose appearance starts the animation. */
+  el: Ref<Element | null>
+  /** False until that element has been seen; true forever after. */
+  revealed: Ref<boolean>
+}
+
+export function useReveal(options: UseRevealOptions = {}): UseReveal {
+  const { threshold = 0.25, rootMargin = "0px 0px -10% 0px" } = options
+
+  const el = ref<Element | null>(null)
+  // SSR has no viewport to intersect with, and no animation runs there either;
+  // the client takes over on hydration and gates it properly then.
+  const revealed = ref(typeof window === "undefined")
+
+  let observer: IntersectionObserver | null = null
+
+  function stop() {
+    observer?.disconnect()
+    observer = null
+  }
+
+  function reveal() {
+    revealed.value = true
+    stop()
+  }
+
+  watch(
+    [el, () => toValue(options.immediate)],
+    ([node, immediate]) => {
+      if (revealed.value) return
+      if (immediate || prefersReducedMotion()) {
+        reveal()
+        return
+      }
+      stop()
+      if (!node) return
+
+      // No IntersectionObserver (older WebKitGTK in the launcher shell, jsdom
+      // under test): show the animation rather than withholding the content.
+      if (typeof IntersectionObserver === "undefined") {
+        reveal()
+        return
+      }
+
+      observer = new IntersectionObserver(
+        (entries) => {
+          if (entries.some((entry) => entry.isIntersecting)) reveal()
+        },
+        { threshold, rootMargin },
+      )
+      observer.observe(node)
+    },
+    { immediate: true, flush: "post" },
+  )
+
+  onBeforeUnmount(stop)
+
+  return { el, revealed }
+}

package/src/composables/useSettled.ts

@@ -1,4 +1,5 @@
 import { onScopeDispose, ref, watch, type MaybeRefOrGetter, toValue } from "vue"
+import { prefersReducedMotion } from "./easing"
 
 /*
  * "Has the opening animation had the frame to itself yet?"
@@ -73,10 +74,7 @@ export function useSettled(
       // id stays open while its whole body is replaced, and that second mount
       // is as expensive as the first.
       settled.value = false
-      const reduced =
-        typeof window !== "undefined" &&
-        window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
-      const wait = reduced ? 0 : (toValue(options.delay) ?? SETTLE_MS)
+      const wait = prefersReducedMotion() ? 0 : (toValue(options.delay) ?? SETTLE_MS)
       timer = setTimeout(() => {
         settled.value = true
         timer = undefined

package/src/composables/useShift.ts

@@ -1,4 +1,5 @@
 import { onBeforeUnmount, ref, toValue, watch, type MaybeRefOrGetter, type Ref } from "vue"
+import { prefersReducedMotion } from "./easing"
 
 /*
  * "Let this box shift its neighbours smoothly instead of jolting them."
@@ -85,13 +86,6 @@ export function useShift(
   const wantsHeight = () => axisOf() !== "width"
   const wantsWidth = () => axisOf() !== "height"
 
-  function reducedMotion() {
-    return (
-      typeof window !== "undefined" &&
-      window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
-    )
-  }
-
   /*
    * The size is driven imperatively rather than through a style binding. By the
    * time replacement content is in the DOM the box has already reflowed to its
@@ -153,7 +147,7 @@ export function useShift(
     inFlight = true
     resizing.value = true
     clearTimeout(settleTimer)
-    const wait = reducedMotion() ? 0 : (toValue(options.duration) ?? TWEEN_MS)
+    const wait = prefersReducedMotion() ? 0 : (toValue(options.duration) ?? TWEEN_MS)
     settleTimer = setTimeout(() => {
       inFlight = false
       resizing.value = false

package/src/index.ts

@@ -32,6 +32,15 @@ export type { Crumb } from "./components/LpBreadcrumbs.vue"
 export { default as LpButton } from "./components/LpButton.vue"
 export { default as LpCalendar } from "./components/LpCalendar.vue"
 export { default as LpCard } from "./components/LpCard.vue"
+export { default as LpChart } from "./components/LpChart.vue"
+export type { ChartPointEvent } from "./components/LpChart.vue"
+export {
+  CHART_PALETTE,
+  axisTicks,
+  formatTick,
+  niceScale,
+} from "./components/chart"
+export type { ChartAxis, ChartPoint, ChartSeries } from "./components/chart"
 export { default as LpCheckbox } from "./components/LpCheckbox.vue"
 export { default as LpCodeBlock } from "./components/LpCodeBlock.vue"
 export type { CodeLang } from "./components/codeHighlight"
@@ -80,9 +89,14 @@ export type {
   NotificationLabels,
 } from "./components/LpNotificationBell.vue"
 export { default as LpNumberField } from "./components/LpNumberField.vue"
+export { default as LpNumberFlow } from "./components/LpNumberFlow.vue"
 export { default as LpOtpInput } from "./components/LpOtpInput.vue"
 export { default as LpPagination } from "./components/LpPagination.vue"
 export { default as LpPasswordInput } from "./components/LpPasswordInput.vue"
+export { default as LpPie } from "./components/LpPie.vue"
+export type { SliceEvent } from "./components/LpPie.vue"
+export { resolveSlices } from "./components/chart"
+export type { PieSlice, ResolvedSlice } from "./components/chart"
 export { default as LpPhoneInput } from "./components/LpPhoneInput.vue"
 export type { PhoneDetail } from "./components/LpPhoneInput.vue"
 export { flagEmoji, loadCountries, matchCountryByValue } from "./components/countries"
@@ -92,6 +106,7 @@ export { default as LpProgress } from "./components/LpProgress.vue"
 export { default as LpRadio } from "./components/LpRadio.vue"
 export { default as LpRadioGroup } from "./components/LpRadioGroup.vue"
 export type { RadioOption } from "./components/LpRadioGroup.vue"
+export { default as LpRollingText } from "./components/LpRollingText.vue"
 export { default as LpScrollArea } from "./components/LpScrollArea.vue"
 export { default as LpSegmented } from "./components/LpSegmented.vue"
 export type { SegmentedOption } from "./components/LpSegmented.vue"
@@ -106,6 +121,7 @@ export { default as LpSidebar } from "./components/LpSidebar.vue"
 export type { SidebarItem, SidebarSection } from "./components/LpSidebar.vue"
 export { default as LpSkeleton } from "./components/LpSkeleton.vue"
 export { default as LpSlider } from "./components/LpSlider.vue"
+export { default as LpSparkline } from "./components/LpSparkline.vue"
 export { default as LpStat } from "./components/LpStat.vue"
 export { default as LpStepper } from "./components/LpStepper.vue"
 export type { Step } from "./components/LpStepper.vue"
@@ -189,6 +205,9 @@ export { useHotkeys, isAppleKeyboard, appleModifierLabel } from "./composables/u
 export type { HotkeyBinding } from "./composables/useHotkeys"
 export { useInputFilter } from "./composables/useInputFilter"
 export type { UseInputFilterOptions } from "./composables/useInputFilter"
+export { easeOut, easeTravel, easingToken, prefersReducedMotion } from "./composables/easing"
+export { useReveal } from "./composables/useReveal"
+export type { UseReveal, UseRevealOptions } from "./composables/useReveal"
 export { useRovingFocus } from "./composables/useRovingFocus"
 export type { RovingItem, UseRovingFocusOptions } from "./composables/useRovingFocus"
 export { useSettled } from "./composables/useSettled"

package/src/theme/useTheme.ts

@@ -5,6 +5,7 @@
  * serialize/parse with validation.
  */
 import { computed, readonly, shallowRef, type ComputedRef, type DeepReadonly, type Ref } from "vue"
+import { easingToken, prefersReducedMotion } from "../composables/easing"
 import { detectBackdropFilter } from "./backdrop"
 import {
   COLOR_VARS,
@@ -91,13 +92,6 @@ type ViewTransitionDocument = Document & {
   startViewTransition?: (cb: () => void) => { ready: Promise<void>; finished: Promise<void> }
 }
 
-function prefersReducedMotion(): boolean {
-  return (
-    typeof window !== "undefined" &&
-    window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true
-  )
-}
-
 /*
  * Apply a theme with the "circular reveal" transition — a clip-path circle
  * grows from `origin` (usually the toggle button's centre), repainting the page
@@ -139,7 +133,7 @@ export function applyThemeWithTransition(
       },
       {
         duration: durationMs,
-        easing: "cubic-bezier(0.2, 0, 0, 1)",
+        easing: easingToken("ease-emphasized"),
         // Hold the fully-shrunk circle after the keyframes end. Without it the
         // old snapshot snaps back to its default (un-clipped) state for the one
         // frame between animation-end and the browser tearing down the

package/src/tokens/tokens.css

@@ -97,6 +97,42 @@
 
   /* ── motion ──────────────────────────────────── */
   --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /* For motion that TRAVELS a distance the eye is meant to follow: a line
+     drawing itself, a wipe crossing a plot, a bar filling — anything where the
+     journey is the content rather than a way of arriving.
+
+     Very nearly LINEAR, and that is the point.
+
+     The usual "ease-out by default" rule is about interaction: the fast start
+     answers a click, so the interface feels responsive. A chart drawing itself
+     answers no click, and ease-out actively hurts it — every ease-out curve,
+     tuned however you like, spends 45–65% of its duration covering the final
+     10% of the path. The stroke flashes past and then visibly creeps, so the
+     part worth watching is the part you miss.
+
+     The same reasoning the field applies to progress bars and other steady,
+     time-representing motion, where an even rate is what makes the progress
+     readable.
+
+     Note the second control point's y is 0.85, NOT 1. A curve ending on y=1
+     arrives with zero velocity and therefore always creeps, however gentle the
+     rest of it looks — that single coordinate is what separates a 22% tail
+     from a 46% one. Holding it below the line lets the stroke still be moving
+     when it lands. */
+  --ease-travel: cubic-bezier(0.2, 0.25, 0.5, 0.85);
+  /* For something that COMES TO REST: an odometer wheel stopping on its digit,
+     a value landing after a count, a knob settling after a flick.
+
+     It overshoots very slightly and drifts back, which is what a real mechanism
+     does — mass carries a wheel a hair past its mark before it settles. Without
+     it a digit arrives by simply ceasing to move, and a row of columns all
+     ceasing together reads as a screen redraw rather than as a thing coming to
+     a stop.
+
+     The overshoot is deliberately small. Anything more bounces, and a figure
+     that bounces past its value looks briefly WRONG — which matters when the
+     number is a real reading somebody is about to act on. */
+  --ease-settle: cubic-bezier(0.22, 1.12, 0.36, 1);
   /* Three-step motion scale, themeable like everything else. fast = state
      feedback (hover/press/focus); medium = transforms & most enter/exit;
      slow = larger reveals (disclosure height, drawer slide).

package/dist/chunks/LpProgress-BhI0IbjC.js

@@ -1,37 +0,0 @@
-import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, normalizeClass } from "vue";
-import { ProgressRoot, ProgressIndicator } from "reka-ui";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "LpProgress",
-  props: {
-    value: { default: 0 },
-    max: { default: 100 },
-    tone: { default: "brand" }
-  },
-  setup(__props) {
-    const props = __props;
-    const pct = computed(() => Math.max(0, Math.min(100, props.value / props.max * 100)));
-    const bar = {
-      brand: "bg-brand",
-      action: "bg-action",
-      danger: "bg-danger"
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ProgressRoot), {
-        "model-value": __props.value,
-        max: __props.max,
-        class: "h-1.5 w-full overflow-hidden rounded-pill bg-surface-soft"
-      }, {
-        default: withCtx(() => [
-          createVNode(unref(ProgressIndicator), {
-            class: normalizeClass(["h-full rounded-pill transition-[width] duration-slow ease-[var(--ease-emphasized)]", bar[__props.tone]]),
-            style: normalizeStyle({ width: `${pct.value}%` })
-          }, null, 8, ["class", "style"])
-        ]),
-        _: 1
-      }, 8, ["model-value", "max"]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};

package/dist/chunks/LpSkeleton-eSFIo4kD.js

@@ -1,22 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass } from "vue";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "LpSkeleton",
-  props: {
-    rounded: {}
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        "aria-hidden": "true",
-        class: normalizeClass(["animate-pulse bg-surface-soft", {
-          "rounded-control": __props.rounded === "control" || !__props.rounded,
-          "rounded-card": __props.rounded === "card",
-          "rounded-pill": __props.rounded === "pill"
-        }])
-      }, null, 2);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};

package/dist/chunks/LpTooltip-D1hbjQWG.js

@@ -1,63 +0,0 @@
-import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, renderSlot, normalizeClass, createTextVNode, toDisplayString } from "vue";
-import { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent } from "reka-ui";
-import { PANEL_SURFACE, TOOLTIP_ANIM } from "../components/dropdown.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "LpTooltip",
-  props: {
-    content: {},
-    sideOffset: {},
-    side: { default: "top" },
-    label: { type: Boolean },
-    delay: { default: 200 },
-    showOnPointerFocus: { type: Boolean }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TooltipProvider), { "delay-duration": __props.delay }, {
-        default: withCtx(() => [
-          createVNode(unref(TooltipRoot), {
-            "ignore-non-keyboard-focus": !__props.showOnPointerFocus
-          }, {
-            default: withCtx(() => [
-              createVNode(unref(TooltipTrigger), {
-                "as-child": "",
-                "aria-label": __props.label ? __props.content : void 0
-              }, {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "default")
-                ]),
-                _: 3
-              }, 8, ["aria-label"]),
-              createVNode(unref(TooltipPortal), null, {
-                default: withCtx(() => [
-                  createVNode(unref(TooltipContent), {
-                    side: __props.side,
-                    "side-offset": __props.sideOffset ?? 6,
-                    class: normalizeClass([
-                      unref(PANEL_SURFACE),
-                      unref(TOOLTIP_ANIM),
-                      "z-(--z-tooltip) max-w-[min(20rem,90vw)] px-2.5 py-1.5 text-xs text-ink"
-                    ])
-                  }, {
-                    default: withCtx(() => [
-                      renderSlot(_ctx.$slots, "content", {}, () => [
-                        createTextVNode(toDisplayString(__props.content), 1)
-                      ])
-                    ]),
-                    _: 3
-                  }, 8, ["side", "side-offset", "class"])
-                ]),
-                _: 3
-              })
-            ]),
-            _: 3
-          }, 8, ["ignore-non-keyboard-focus"])
-        ]),
-        _: 3
-      }, 8, ["delay-duration"]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};