@orvui/vue 0.0.0-stage → 0.1.1

package/src/motion/multi-select/src/MultiSelectValue.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { X } from "lucide-vue-next";
+import { EASE_OUT, SPRING_LAYOUT, SPRING_SWAP } from "../../../lib/ease";
+import { cn } from "../../../lib/utils";
+import { useSearchContext } from "../../_combobox/controller";
+withDefaults(defineProps<{ placeholder?: string; chipClassName?: string }>(), {
+  placeholder: "Select options",
+});
+const state = useSearchContext(true, "MultiSelectValue");
+const resting = {
+  opacity: 1,
+  clipPath: "inset(0 0 0 0% round 0.5rem)",
+  transform: "translateY(0px) scale(1)",
+};
+const enter = computed(() => ({
+  ...resting,
+  opacity: 0,
+  transform: state.reduce.value
+    ? resting.transform
+    : "translateY(6px) scale(0.92)",
+}));
+const leave = computed(() => ({
+  ...resting,
+  clipPath: state.reduce.value
+    ? resting.clipPath
+    : "inset(0 0 0 100% round 0.5rem)",
+  transition: {
+    clipPath: { duration: state.reduce.value ? 0 : 0.16, ease: EASE_OUT },
+    transform: { duration: 0 },
+  },
+}));
+const transition = computed(() => ({
+  layout: state.reduce.value ? { duration: 0 } : SPRING_LAYOUT,
+  opacity: { duration: 0.18, ease: EASE_OUT },
+  transform: state.reduce.value ? { duration: 0 } : SPRING_SWAP,
+}));
+function remove(value: string) {
+  if (!state.disabled.value) {
+    state.remove(value);
+    state.focusInput();
+  }
+}
+</script>
+<template>
+  <div class="contents">
+    <AnimatePresence :initial="false" mode="popLayout"
+      ><span
+        v-if="!state.values.value.length && !state.open.value"
+        key="placeholder"
+        class="text-muted-foreground"
+        >{{ placeholder }}</span
+      ><motion.span
+        v-for="value in state.values.value"
+        :key="value"
+        :layout="state.reduce.value ? false : 'position'"
+        :initial="enter"
+        :animate="resting"
+        :exit="leave"
+        :transition="transition"
+        :class="
+          cn(
+            'inline-flex h-7 max-w-full items-center gap-1 rounded-lg bg-muted px-2 text-xs font-medium text-foreground',
+            chipClassName,
+          )
+        "
+        ><span class="truncate"
+          ><slot :value="value" :label="state.labelFor(value)">{{
+            state.labelFor(value)
+          }}</slot></span
+        ><button
+          type="button"
+          data-multi-select-remove=""
+          :aria-label="'Remove ' + state.labelFor(value)"
+          :disabled="state.disabled.value"
+          @pointerdown.stop
+          @click.stop="remove(value)"
+          class="-mr-1 grid size-5 shrink-0 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-foreground/10 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <X aria-hidden="true" class="size-3" :stroke-width="2.5" /></button></motion.span
+    ></AnimatePresence>
+  </div>
+</template>

package/src/motion/multi-select/src/api-types.ts

@@ -0,0 +1,34 @@
+// Vue public prop types, derived from the actual components.
+export type MultiSelectContentProps = InstanceType<
+  (typeof import("./MultiSelectContent.vue"))["default"]
+>["$props"];
+export type MultiSelectEmptyProps = InstanceType<
+  (typeof import("./MultiSelectEmpty.vue"))["default"]
+>["$props"];
+export type MultiSelectGroupProps = InstanceType<
+  (typeof import("./MultiSelectGroup.vue"))["default"]
+>["$props"];
+export type MultiSelectInputProps = InstanceType<
+  (typeof import("./MultiSelectInput.vue"))["default"]
+>["$props"];
+export type MultiSelectItemProps = InstanceType<
+  (typeof import("./MultiSelectItem.vue"))["default"]
+>["$props"];
+export type MultiSelectLabelProps = InstanceType<
+  (typeof import("./MultiSelectLabel.vue"))["default"]
+>["$props"];
+export type MultiSelectListProps = InstanceType<
+  (typeof import("./MultiSelectList.vue"))["default"]
+>["$props"];
+export type MultiSelectProps = InstanceType<
+  (typeof import("./MultiSelect.vue"))["default"]
+>["$props"];
+export type MultiSelectSeparatorProps = InstanceType<
+  (typeof import("./MultiSelectSeparator.vue"))["default"]
+>["$props"];
+export type MultiSelectTriggerProps = InstanceType<
+  (typeof import("./MultiSelectTrigger.vue"))["default"]
+>["$props"];
+export type MultiSelectValueProps = InstanceType<
+  (typeof import("./MultiSelectValue.vue"))["default"]
+>["$props"];

package/src/motion/multi-select/src/public-types.ts

@@ -0,0 +1,6 @@
+import type { MultiSelectProps } from "./api-types";
+export type {
+  SearchController as MultiSelectContextValue,
+  SearchItem as RegisteredMultiSelectItem,
+} from "../../_combobox/controller";
+export type MultiSelectFilter = NonNullable<MultiSelectProps["filter"]>;

package/src/motion/number/index.ts

@@ -0,0 +1,9 @@
+export { default as AnimatedNumber } from "./src/AnimatedNumber.vue";
+export { default as DigitSwap } from "./src/DigitSwap.vue";
+export { default as NumberTicker } from "./src/NumberTicker.vue";
+export type {
+  AnimatedNumberProps,
+  NumberTickerProps,
+  DigitSwapProps,
+  DigitSwapDirection,
+} from "./src/types";

package/src/motion/number/src/AnimatedNumber.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { animate } from "motion-v";
+import { EASE_OUT } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import { useNumberViewGate } from "./view-gate";
+import type { AnimatedNumberProps } from "./types";
+const props = withDefaults(defineProps<AnimatedNumberProps>(), { duration: 1.2, startOnView: true });
+const element = ref<HTMLElement | null>(null), display = ref(0), mounted = ref(false);
+const ready = useNumberViewGate(element, () => props.startOnView);
+const reduced = useReducedMotion();
+let animation: ReturnType<typeof animate> | undefined;
+watch([() => props.value, () => props.duration, ready, reduced, mounted], () => {
+  animation?.stop();
+  if (!mounted.value || !ready.value) return;
+  if (reduced.value) { display.value = props.value; return; }
+  animation = animate(display.value, props.value, { duration: props.duration, ease: EASE_OUT, onUpdate(value) { display.value = value; } });
+});
+onMounted(() => { mounted.value = true; });
+onBeforeUnmount(() => { mounted.value = false; animation?.stop(); });
+</script>
+<template><span ref="element" :class="['tabular-nums', className]">{{ format ? format(display) : Math.round(display).toLocaleString() }}</span></template>

package/src/motion/number/src/DigitSwap.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { EASE_OUT } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import type { DigitSwapProps } from "./types";
+const props = withDefaults(defineProps<DigitSwapProps>(), { direction: "up", duration: 0.18, stagger: 0.006, suffixLength: 0 });
+const reduced = useReducedMotion(), text = computed(() => String(props.value));
+const glyphs = computed(() => Array.from(text.value, (character, position) => ({ character, position })));
+const suffixStart = computed(() => Math.max(0, text.value.length - Math.max(0, props.suffixLength)));
+const context = computed(() => ({ direction: props.direction, reduceMotion: reduced.value }));
+function hidden(data: unknown, departing: boolean) {
+  const state = data as { direction: "up" | "down"; reduceMotion: boolean };
+  const sign = state.direction === "up" ? 1 : -1;
+  return { opacity: 0, transform: state.reduceMotion ? "none" : `translateY(${45 * sign * (departing ? -1 : 1)}%)` };
+}
+const poses = { enter: (data: unknown) => hidden(data, false), visible: { opacity: 1, transform: "translateY(0%)" }, exit: (data: unknown) => hidden(data, true) };
+function key(character: string, position: number) { return `glyph-${position}-${character}${(props.animationKey ?? props.replayKey) === undefined ? "" : `-${props.animationKey ?? props.replayKey}`}`; }
+</script>
+<template>
+  <span data-slot="digit-swap" :data-direction="direction" :class="['inline-flex items-baseline whitespace-nowrap', className]">
+    <span class="sr-only">{{ text }}{{ suffix }}</span>
+    <span aria-hidden="true" class="inline-flex items-baseline">
+      <template v-for="glyph in glyphs" :key="glyph.position">
+        <span v-if="glyph.character === ' '" class="inline-block w-[0.7ch]" />
+        <span v-else data-slot="digit-swap-glyph" class="relative inline-block h-[1.1em] shrink-0 leading-[1.1em] [clip-path:inset(0)]" :class="/\d/.test(glyph.character) ? 'w-[1ch] text-center' : undefined">
+          <span class="invisible">{{ glyph.character }}</span>
+          <AnimatePresence :initial="false" :custom="context">
+            <motion.span :key="key(glyph.character, glyph.position)" :custom="context" :variants="poses" initial="enter" animate="visible" exit="exit"
+              :transition="{ duration: reduced ? Math.min(duration, 0.12) : duration, delay: reduced ? 0 : glyph.position * stagger, ease: EASE_OUT }"
+              :class="cn('absolute inset-0 flex items-center justify-center leading-none', glyphClassName, glyph.position >= suffixStart ? suffixClassName : undefined)">{{ glyph.character }}</motion.span>
+          </AnimatePresence>
+        </span>
+      </template>
+      <span v-if="suffix">{{ suffix }}</span>
+    </span>
+  </span>
+</template>

package/src/motion/number/src/NumberTicker.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import NumberTickerDigit from "./NumberTickerDigit.vue";
+import { useNumberViewGate } from "./view-gate";
+import type { NumberTickerProps } from "./types";
+const props = withDefaults(defineProps<NumberTickerProps>(), { duration: 0.9, stagger: 0.04, startOnView: true, blur: false, locale: false });
+const element = ref<HTMLElement | null>(null), entered = ref(false), mounted = ref(false);
+const ready = useNumberViewGate(element, () => props.startOnView);
+const text = computed(() => {
+  const places = Math.max(0, Math.floor(props.decimals ?? props.decimalPlaces ?? 0));
+  const rounded = Math.round(props.value * 10 ** places) / 10 ** places;
+  const formatted = props.format ? props.format(rounded) : props.locale
+    ? rounded.toLocaleString(undefined, { minimumFractionDigits: places, maximumFractionDigits: places })
+    : rounded.toFixed(places);
+  return props.pad ? formatted.padStart(props.pad, "0") : formatted;
+});
+const glyphs = computed(() => Array.from(text.value, (character, index) => ({ character, id: `g-${text.value.length - index - 1}` })));
+let timer: ReturnType<typeof setTimeout> | undefined;
+watch([ready, mounted, () => props.duration, () => props.stagger, () => glyphs.value.length], () => {
+  clearTimeout(timer);
+  if (!mounted.value || !ready.value || entered.value) return;
+  timer = setTimeout(() => { entered.value = true; }, 1000 * (props.duration + glyphs.value.length * props.stagger));
+});
+onMounted(() => { mounted.value = true; });
+onBeforeUnmount(() => { mounted.value = false; clearTimeout(timer); });
+</script>
+<template>
+  <span ref="element" :class="['inline-flex items-baseline tabular-nums', className]">
+    <span class="sr-only">{{ (prefix ?? '') + text + (suffix ?? '') }}</span>
+    <span aria-hidden="true" class="inline-flex items-baseline">
+      <span v-if="prefix">{{ prefix }}</span>
+      <template v-for="(glyph, index) in glyphs" :key="glyph.id">
+        <NumberTickerDigit v-if="/\d/.test(glyph.character)" :digit="ready ? Number(glyph.character) : 0"
+          :delay="entered ? 0 : index * stagger" :duration="duration" :blur="blur" :class-name="digitClassName" />
+        <span v-else class="inline-block">{{ glyph.character }}</span>
+      </template>
+      <span v-if="suffix">{{ suffix }}</span>
+    </span>
+  </span>
+</template>

package/src/motion/number/src/NumberTickerDigit.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref, watch } from "vue";
+import { animate, motion } from "motion-v";
+import { EASE_OUT } from "../../../lib/ease";
+import { resolveElement, useReducedMotion } from "../../../lib/composables";
+const props = defineProps<{ digit: number; delay: number; duration: number; blur: boolean; className?: string }>();
+const column = ref<HTMLElement | null>(null), reduced = useReducedMotion();
+let animation: ReturnType<typeof animate> | undefined;
+watch([() => props.digit, () => props.delay, () => props.duration, () => props.blur, reduced, column], () => {
+  animation?.stop();
+  const target = column.value;
+  if (!target) return;
+  if (reduced.value || !props.blur || !Number.isFinite(props.digit)) { target.style.filter = "blur(0px)"; return; }
+  animation = animate(target, { filter: ["blur(10px)", "blur(0px)"] }, { duration: Math.min(0.32, props.duration * 0.75), delay: props.delay, ease: EASE_OUT });
+}, { flush: "post" });
+onBeforeUnmount(() => { animation?.stop(); if (column.value) column.value.style.filter = "blur(0px)"; });
+</script>
+<template>
+  <span :class="['relative inline-block text-center [clip-path:inset(0)]', className]" :style="{ height: '1.1em', lineHeight: '1.1em', width: '1ch' }">
+    <span class="invisible">{{ digit }}</span>
+    <motion.span :ref="node => column = resolveElement<HTMLElement>(node)" :initial="{ y: 0 }" :animate="{ y: `-${digit * 1.1}em` }"
+      :transition="reduced ? { duration: 0 } : { duration, delay, ease: EASE_OUT }" class="absolute inset-x-0 top-0 flex flex-col items-center will-change-[transform,filter]">
+      <span v-for="digitValue in 10" :key="digitValue - 1" class="flex h-[1.1em] items-center justify-center leading-none">{{ digitValue - 1 }}</span>
+    </motion.span>
+  </span>
+</template>

package/src/motion/number/src/types.ts

@@ -0,0 +1,39 @@
+export interface NumberTickerProps {
+  value: number;
+  pad?: number;
+  decimals?: number;
+  /** Compatibility alias for decimals. */
+  decimalPlaces?: number;
+  duration?: number;
+  stagger?: number;
+  startOnView?: boolean;
+  prefix?: string;
+  suffix?: string;
+  blur?: boolean;
+  className?: string;
+  digitClassName?: string;
+  locale?: boolean;
+  format?: (value: number) => string;
+}
+export type DigitSwapDirection = "up" | "down";
+export interface DigitSwapProps {
+  value: string | number;
+  animationKey?: string | number;
+  /** Compatibility alias for animationKey. */
+  replayKey?: string | number;
+  direction?: DigitSwapDirection;
+  duration?: number;
+  stagger?: number;
+  suffixLength?: number;
+  className?: string;
+  glyphClassName?: string;
+  suffixClassName?: string;
+  suffix?: string;
+}
+export interface AnimatedNumberProps {
+  value: number;
+  duration?: number;
+  format?: (n: number) => string;
+  className?: string;
+  startOnView?: boolean;
+}

package/src/motion/number/src/view-gate.ts

@@ -0,0 +1,20 @@
+import { onBeforeUnmount, onMounted, ref, watch, type Ref } from "vue";
+
+/** A one-shot viewport gate shared by the two number renderers. */
+export function useNumberViewGate(element: Ref<HTMLElement | null>, startOnView: () => boolean) {
+  const ready = ref(!startOnView());
+  let mounted = false, observer: IntersectionObserver | undefined;
+  function arm() {
+    if (!mounted || ready.value) return;
+    observer?.disconnect();
+    if (!startOnView() || !element.value || typeof IntersectionObserver === "undefined") { ready.value = true; return; }
+    observer = new IntersectionObserver(entries => {
+      if (entries.some(entry => entry.isIntersecting)) { ready.value = true; observer?.disconnect(); }
+    }, { threshold: 0.6 });
+    observer.observe(element.value);
+  }
+  onMounted(() => { mounted = true; arm(); });
+  watch(startOnView, arm);
+  onBeforeUnmount(() => { mounted = false; observer?.disconnect(); });
+  return ready;
+}

package/src/motion/popover/index.ts

@@ -0,0 +1,8 @@
+export { default as Popover } from "./src/Popover.vue";
+export { default as PopoverTrigger } from "./src/PopoverTrigger.vue";
+export { default as PopoverContent } from "./src/PopoverContent.vue";
+export { default as MorphPopover } from "./src/MorphPopover.vue";
+export { default as MorphPopoverContent } from "./src/MorphPopoverContent.vue";
+export { default as MorphPopoverTrigger } from "./src/MorphPopoverTrigger.vue";
+
+export type * from "./src/api-types";

package/src/motion/popover/src/MorphPopover.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { provide } from "vue";
+import {
+  createPopover,
+  popoverKey,
+  hoverGesture,
+  type PopoverProps,
+} from "./context";
+const props = withDefaults(
+  defineProps<{ open?: boolean; defaultOpen?: boolean; className?: string }>(),
+  { open: undefined },
+);
+const emit = defineEmits(["update:open", "openChange"]);
+const state = createPopover(props, emit, "morph");
+const root = state.root;
+const hover = hoverGesture();
+provide(popoverKey, state);
+function enter(event: PointerEvent) {
+  if (false && hover.enter(event)) state.openHover();
+}
+function leave(event: PointerEvent) {
+  if (false && hover.leave(event)) state.scheduleClose();
+}
+</script>
+<template>
+  <div
+    ref="root"
+    :class="['relative inline-flex', className]"
+    @pointerenter="enter"
+    @pointerleave="leave"
+  >
+    <slot :open="state.open.value" />
+  </div>
+</template>

package/src/motion/popover/src/MorphPopoverContent.vue

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+  type Ref,
+} from "vue";
+import { animate, motion, motionValue, useTransform } from "motion-v";
+import { EASE_OUT } from "../../../lib/ease";
+import { cn } from "../../../lib/utils";
+import { resolveElement } from "../../../lib/composables";
+import { usePopover, usePortalPosition } from "./context";
+import { createMorphFocus } from "./morph-focus";
+const props = withDefaults(
+  defineProps<{
+    side?: "top" | "bottom";
+    align?: "start" | "end";
+    sideOffset?: number;
+    radius?: number;
+    shadow?: boolean;
+    initialFocus?: HTMLElement | Ref<HTMLElement | null> | null;
+    onOpenAutoFocus?: (content: HTMLDivElement) => void;
+    className?: string;
+  }>(),
+  { side: "bottom", align: "end", sideOffset: 8, radius: 16, shadow: true },
+);
+const state = usePopover();
+const mounted = ref(false);
+const present = ref(state.open.value);
+const panel = ref<unknown>(null);
+const measured = computed({
+  get: () => resolveElement<HTMLElement>(panel.value),
+  set: (value) => {
+    panel.value = value;
+  },
+});
+const layout = usePortalPosition(
+  state.anchor,
+  measured,
+  computed(() => mounted.value && state.open.value),
+);
+const progress = motionValue(0);
+const fade = motionValue(state.reduce.value ? 0 : 1);
+const focus = createMorphFocus(
+  props,
+  () => state.open.value && !!layout.value,
+  state.takeFocusOnOpen,
+);
+watch(
+  panel,
+  (value) => {
+    state.content.value = resolveElement<HTMLElement>(value);
+  },
+  { flush: "post" },
+);
+const placement = computed(() => {
+  const box = layout.value;
+  if (!box) return { left: 0, top: 0, side: props.side, available: 0 };
+  const gutter = 12;
+  const free = {
+    bottom: Math.max(
+      0,
+      window.innerHeight -
+        box.trigger.top -
+        box.trigger.height -
+        props.sideOffset -
+        gutter,
+    ),
+    top: Math.max(0, box.trigger.top - props.sideOffset - gutter),
+  };
+  const alternative = props.side === "top" ? "bottom" : "top";
+  const side =
+    box.content.height > free[props.side] &&
+    free[alternative] > free[props.side]
+      ? alternative
+      : props.side;
+  const preferred =
+    box.trigger.left +
+    (props.align === "end" ? box.trigger.width - box.content.width : 0);
+  return {
+    left: Math.max(
+      gutter,
+      Math.min(preferred, window.innerWidth - box.content.width - gutter),
+    ),
+    top:
+      side === "bottom"
+        ? box.trigger.top + box.trigger.height + props.sideOffset
+        : Math.max(
+            gutter,
+            box.trigger.top - box.content.height - props.sideOffset,
+          ),
+    side,
+    available: free[side],
+  };
+});
+const clipPath = useTransform(() => {
+  const inset = 92 * (1 - progress.get());
+  return `inset(${placement.value.side === "top" ? inset : 0}% ${props.align === "start" ? inset : 0}% ${placement.value.side === "bottom" ? inset : 0}% ${props.align === "end" ? inset : 0}% round ${props.radius}px)`;
+});
+const opacity = useTransform(progress, [0, 0.15], [0, 1]);
+let animation: ReturnType<typeof animate> | undefined;
+let revision = 0;
+let disposed = false;
+function run() {
+  animation?.stop();
+  if (!mounted.value || !layout.value || disposed) return;
+  const version = ++revision;
+  const opened = state.open.value;
+  const done = () => {
+    if (!disposed && version === revision && !opened && !state.open.value)
+      present.value = false;
+  };
+  if (state.reduce.value) {
+    progress.jump(1);
+    animation = animate(fade, opened ? 1 : 0, {
+      duration: 0.12,
+      onComplete: done,
+    });
+  } else
+    animation = animate(progress, opened ? 1 : 0, {
+      ...(opened
+        ? { type: "spring", duration: 0.26, bounce: 0 }
+        : { duration: 0.2, ease: EASE_OUT }),
+      onComplete: done,
+    });
+  void focus.focus(state.content.value);
+}
+watch(
+  state.open,
+  async (opened) => {
+    focus.reset();
+    ++revision;
+    if (opened) {
+      layout.value = null;
+      progress.jump(0);
+      fade.jump(state.reduce.value ? 0 : 1);
+      present.value = true;
+      await nextTick();
+    }
+    run();
+  },
+  { flush: "post" },
+);
+watch(
+  () => !!layout.value,
+  (ready) => {
+    if (ready) run();
+  },
+  { flush: "post" },
+);
+onMounted(() => {
+  mounted.value = true;
+  present.value = state.open.value;
+});
+onBeforeUnmount(() => {
+  disposed = true;
+  ++revision;
+  animation?.stop();
+  progress.destroy();
+  fade.destroy();
+  state.content.value = null;
+});
+</script>
+<template>
+  <Teleport v-if="mounted" to="body"
+    ><motion.div
+      v-if="present"
+      data-morph-popover-portal=""
+      :inert="!state.open.value"
+      :style="{
+        left: placement.left + 'px',
+        top: placement.top + 'px',
+        opacity: state.reduce.value ? fade : opacity,
+        pointerEvents: state.open.value ? 'auto' : 'none',
+        visibility: layout ? 'visible' : 'hidden',
+      }"
+      :class="[
+        'fixed z-[9999]',
+        shadow
+          ? '[filter:drop-shadow(0_10px_18px_rgba(0,0,0,0.14))]'
+          : undefined,
+      ]"
+      ><motion.div
+        ref="panel"
+        v-bind="$attrs"
+        :id="state.contentId"
+        role="dialog"
+        :aria-labelledby="state.triggerId"
+        tabindex="-1"
+        :style="{
+          clipPath: state.reduce.value ? undefined : clipPath,
+          borderRadius: props.radius + 'px',
+          maxHeight: layout ? placement.available + 'px' : undefined,
+          overflowX: 'hidden',
+          overflowY: 'auto',
+        }"
+        :class="
+          cn(
+            'overflow-hidden border border-border bg-background outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',
+            $attrs.class as string,
+            className,
+          )
+        "
+        ><slot /></motion.div></motion.div
+  ></Teleport>
+</template>

package/src/motion/popover/src/MorphPopoverTrigger.vue

@@ -0,0 +1,4 @@
+<script lang="ts">
+import PopoverTrigger from "./PopoverTrigger.vue";
+export default PopoverTrigger;
+</script>

package/src/motion/popover/src/Popover.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { provide } from "vue";
+import {
+  createPopover,
+  popoverKey,
+  hoverGesture,
+  type PopoverProps,
+} from "./context";
+const props = withDefaults(defineProps<PopoverProps>(), {
+  open: undefined,
+  defaultOpen: false,
+  trigger: "click",
+  side: "bottom",
+  align: "center",
+  sideOffset: 14,
+  panelRadius: 16,
+  gooStrength: 8,
+});
+const emit = defineEmits(["update:open", "openChange"]);
+const state = createPopover(props, emit, "goo");
+const root = state.root;
+const hover = hoverGesture();
+provide(popoverKey, state);
+function enter(event: PointerEvent) {
+  if (props.trigger === "hover" && hover.enter(event)) state.openHover();
+}
+function leave(event: PointerEvent) {
+  if (props.trigger === "hover" && hover.leave(event)) state.scheduleClose();
+}
+</script>
+<template>
+  <div
+    ref="root"
+    :class="['relative inline-flex isolate', className]"
+    @pointerenter="enter"
+    @pointerleave="leave"
+  >
+    <slot :open="state.open.value" />
+  </div>
+</template>