@orvui/vue 0.0.0-stage → 0.1.0

package/src/motion/breadcrumb/src/Breadcrumb.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { useId } from "vue";
+import { LayoutGroup } from "motion-v";
+withDefaults(defineProps<{ ariaLabel?: string }>(), { ariaLabel: "Breadcrumb" });
+const groupId = useId();
+</script>
+<template><nav :aria-label="ariaLabel" class="min-w-0"><LayoutGroup :id="groupId"><slot /></LayoutGroup></nav></template>

package/src/motion/breadcrumb/src/BreadcrumbEllipsis.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { Ellipsis } from "lucide-vue-next";
+import { MorphPopover, MorphPopoverContent, MorphPopoverTrigger } from "../../popover";
+import { useMediaQuery } from "../../../lib/composables";
+withDefaults(defineProps<{ label?: string }>(), { label: "Show hidden paths" });
+const open = ref(false), trigger = ref<HTMLButtonElement | null>(null), panel = ref<HTMLOListElement | null>(null);
+const placement = ref<{ align: "start" | "end"; side: "top" | "bottom"; width: number }>({ align: "start", side: "bottom", width: 224 });
+const hover = useMediaQuery("(hover: hover) and (pointer: fine)");
+let closing: ReturnType<typeof setTimeout> | undefined, focusFrame = 0;
+let focusRequested = false, disposed = false;
+function position() {
+  const bounds = trigger.value?.getBoundingClientRect();
+  if (!bounds) return;
+  const after = window.innerWidth - bounds.left - 8, before = bounds.right - 8;
+  const align = after < 224 && before > after ? "end" : "start";
+  const below = window.innerHeight - bounds.bottom;
+  placement.value = { align, side: below < 280 && bounds.top > below ? "top" : "bottom", width: Math.max(32, Math.min(224, align === "start" ? after : before)) };
+}
+function cancelClose() { clearTimeout(closing); closing = undefined; }
+function leave() {
+  cancelClose();
+  closing = setTimeout(() => {
+    if (!panel.value?.contains(document.activeElement) && document.activeElement !== trigger.value) open.value = false;
+  }, 160);
+}
+function enter(event: PointerEvent) {
+  cancelClose();
+  if (hover.value && event.pointerType === "mouse") { focusRequested = false; open.value = true; }
+}
+function focusPaths() {
+  if (!focusRequested) return;
+  const focus = () => { if (!disposed && open.value) panel.value?.querySelector<HTMLElement>("a[href],button")?.focus(); };
+  void nextTick(() => {
+    if (disposed) return;
+    focus();
+    cancelAnimationFrame(focusFrame);
+    focusFrame = requestAnimationFrame(() => { focus(); focusRequested = false; });
+  });
+}
+function arrow(event: KeyboardEvent) {
+  if (event.key !== "ArrowDown") return;
+  event.preventDefault();
+  focusRequested = true;
+  open.value = true;
+  focusPaths();
+}
+function focusOutside(event: FocusEvent) {
+  const target = event.target as Node | null;
+  if (open.value && target && target !== trigger.value && !panel.value?.contains(target)) open.value = false;
+}
+function followLink(event: MouseEvent) { if ((event.target as Element).closest("a[href]")) open.value = false; }
+watch(open, active => { if (active) { position(); focusPaths(); } });
+watch(panel, focusPaths);
+onMounted(() => { window.addEventListener("resize", position); document.addEventListener("focusin", focusOutside); });
+onBeforeUnmount(() => {
+  disposed = true; cancelClose(); cancelAnimationFrame(focusFrame);
+  window.removeEventListener("resize", position); document.removeEventListener("focusin", focusOutside);
+});
+</script>
+<template>
+  <MorphPopover v-model:open="open"><span @pointerenter="enter" @pointerleave="leave">
+    <MorphPopoverTrigger><button ref="trigger" type="button" :aria-label="label" @keydown="arrow"
+      class="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><Ellipsis aria-hidden="true" class="size-4" /></button></MorphPopoverTrigger>
+    <MorphPopoverContent :align="placement.align" :side="placement.side" :radius="10" :side-offset="6" class="p-1.5">
+      <ol ref="panel" :style="{ width: `${placement.width - 14}px` }" @pointerenter="cancelClose(); open = true" @pointerleave="leave" @click="followLink"
+        class="flex max-h-64 flex-col gap-0.5 overflow-y-auto [&>li]:w-full [&_a]:w-full [&_a]:py-1 [&_a]:[overflow-wrap:anywhere] [&_[data-breadcrumb-separator]]:hidden"><slot /></ol>
+    </MorphPopoverContent>
+  </span></MorphPopover>
+</template>

package/src/motion/breadcrumb/src/BreadcrumbItem.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import { motion } from "motion-v";
+import { EASE_OUT, SPRING_LAYOUT } from "../../../lib/ease";
+import { resolveElement, useReducedMotion } from "../../../lib/composables";
+const element = ref<HTMLElement | null>(null), reduced = useReducedMotion();
+let observer: ResizeObserver | undefined;
+function measure() {
+  const item = element.value;
+  if (item) item.style.setProperty("--breadcrumb-exit-width", `${item.getBoundingClientRect().width}px`);
+}
+onMounted(() => {
+  measure();
+  if (element.value && typeof ResizeObserver !== "undefined") { observer = new ResizeObserver(measure); observer.observe(element.value); }
+});
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  const item = element.value;
+  if (item) { item.inert = true; item.style.minWidth = "var(--breadcrumb-exit-width)"; item.style.pointerEvents = "none"; item.setAttribute("aria-hidden", "true"); }
+});
+</script>
+<template>
+  <motion.li :ref="node => element = resolveElement<HTMLElement>(node)" :layout="reduced ? false : 'position'"
+    :initial="{ opacity: 0, y: reduced ? 0 : 6 }" :animate="{ opacity: 1, y: 0 }" :exit="{ opacity: 0, y: reduced ? 0 : 6 }"
+    :transition="{ duration: 0.2, ease: EASE_OUT, layout: SPRING_LAYOUT }" class="relative inline-flex min-w-0 max-w-full items-center gap-1"><slot /></motion.li>
+</template>

package/src/motion/breadcrumb/src/BreadcrumbLink.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { computed } from "vue";
+const props = defineProps<{ href?: string; as?: any }>();
+const tag = computed(() => props.as ?? "a");
+</script>
+<template>
+  <component :is="tag" :href="href" class="inline-flex min-h-8 min-w-0 items-center gap-1.5 rounded-md px-2 font-medium text-muted-foreground transition-colors duration-150 hover:bg-muted/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&>svg]:size-3.5 [&>svg]:shrink-0"><slot /></component>
+</template>

package/src/motion/breadcrumb/src/BreadcrumbList.vue

@@ -0,0 +1,30 @@
+<script lang="ts">
+import { Comment, defineComponent, Fragment, h, isVNode, type VNode } from "vue";
+import { AnimatePresence } from "motion-v";
+import { cn } from "../../../lib/utils";
+import BreadcrumbEllipsis from "./BreadcrumbEllipsis.vue";
+import BreadcrumbItem from "./BreadcrumbItem.vue";
+import BreadcrumbSeparator from "./BreadcrumbSeparator.vue";
+function paths(nodes: unknown[]): VNode[] {
+  return nodes.flatMap(node => !isVNode(node) || node.type === Comment ? [] : node.type === Fragment && Array.isArray(node.children) ? paths(node.children) : [node]);
+}
+export default defineComponent({
+  name: "BreadcrumbList", inheritAttrs: false,
+  props: { maxItems: { type: Number, default: 4 }, overflowLabel: { type: String, default: "Show hidden paths" } },
+  setup(props, { attrs, slots }) {
+    return () => {
+      const nodes = paths(slots.default?.() ?? []);
+      const limit = Number.isFinite(props.maxItems) ? Math.max(3, Math.floor(props.maxItems)) : 4;
+      let visible = nodes;
+      if (props.maxItems !== Infinity && nodes.length > limit) {
+        const tailCount = limit - 2;
+        const parents = nodes.slice(1, nodes.length - tailCount);
+        const overflow = h(BreadcrumbItem, { key: "breadcrumb-overflow" }, () => [h(BreadcrumbSeparator), h(BreadcrumbEllipsis, { label: props.overflowLabel }, () => parents)]);
+        visible = [nodes[0]!, overflow, ...nodes.slice(-tailCount)];
+      }
+      return h("ol", { ...attrs, class: cn("relative flex flex-wrap items-center gap-x-1 gap-y-1 text-sm", attrs.class as string) },
+        h(AnimatePresence, { initial: false, mode: "popLayout" }, () => visible));
+    };
+  },
+});
+</script>

package/src/motion/breadcrumb/src/BreadcrumbPage.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { defineComponent, h } from "vue";
+const Surface = defineComponent({ name: "BreadcrumbPage", setup(_, { slots }) {
+  return () => h("span", { "aria-current": "page", class: "relative isolate inline-flex min-h-8 min-w-0 items-center gap-1.5 rounded-md px-2 font-medium text-foreground [overflow-wrap:anywhere] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&>svg]:size-3.5 [&>svg]:shrink-0" }, slots.default?.());
+} });
+defineSlots<{ default?: () => any }>();
+</script>
+<template><Surface><slot /></Surface></template>

package/src/motion/breadcrumb/src/BreadcrumbSeparator.vue

@@ -0,0 +1 @@
+<template><span aria-hidden="true" data-breadcrumb-separator="" class="inline-flex shrink-0 items-center text-muted-foreground/50 [&>svg]:size-3.5 rtl:rotate-180"><slot><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6 9 18" /></svg></slot></span></template>

package/src/motion/breadcrumb/src/api-types.ts

@@ -0,0 +1,22 @@
+// Vue public prop types, derived from the actual components.
+export type BreadcrumbEllipsisProps = InstanceType<
+  (typeof import("./BreadcrumbEllipsis.vue"))["default"]
+>["$props"];
+export type BreadcrumbItemProps = InstanceType<
+  (typeof import("./BreadcrumbItem.vue"))["default"]
+>["$props"];
+export type BreadcrumbLinkProps = InstanceType<
+  (typeof import("./BreadcrumbLink.vue"))["default"]
+>["$props"];
+export type BreadcrumbListProps = InstanceType<
+  (typeof import("./BreadcrumbList.vue"))["default"]
+>["$props"];
+export type BreadcrumbPageProps = InstanceType<
+  (typeof import("./BreadcrumbPage.vue"))["default"]
+>["$props"];
+export type BreadcrumbProps = InstanceType<
+  (typeof import("./Breadcrumb.vue"))["default"]
+>["$props"];
+export type BreadcrumbSeparatorProps = InstanceType<
+  (typeof import("./BreadcrumbSeparator.vue"))["default"]
+>["$props"];

package/src/motion/button/index.ts

@@ -0,0 +1,11 @@
+export { default as Button } from "./src/Button.vue";
+export { default as ButtonLink } from "./src/ButtonLink.vue";
+export { default as MagneticButton } from "./src/MagneticButton.vue";
+export { default as MetallicButton } from "./src/MetallicButton.vue";
+export { default as StatefulButton } from "./src/StatefulButton.vue";
+
+export type * from "./src/api-types";
+
+export type { ButtonState } from "./src/StatefulButton.vue";
+
+export type * from "./src/public-types";

package/src/motion/button/src/Button.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from "vue";
+import { motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { EASE_OUT, SPRING_PRESS } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+
+export interface ButtonProps {
+  variant?: "primary" | "secondary" | "ghost" | "outline";
+  size?: "sm" | "md" | "lg" | "icon";
+  pressScale?: number;
+  ripple?: boolean;
+  disabled?: boolean;
+  type?: "button" | "submit" | "reset";
+}
+const props = withDefaults(defineProps<ButtonProps>(), { variant: "primary", size: "md", pressScale: 0.93, type: "button" });
+const reduced = useReducedMotion();
+const waves = ref<{ key: number; left: number; top: number; diameter: number }[]>([]);
+let sequence = 0;
+const appearance = computed(() => ({
+  primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+  secondary: "border border-border bg-card text-foreground",
+  ghost: "text-muted-foreground hover:text-foreground hover:bg-muted/60",
+  outline: "border border-border bg-transparent text-foreground hover:bg-muted/60",
+})[props.variant]);
+const geometry = computed(() => ({
+  sm: "h-8 px-3 text-xs gap-1.5 rounded-full", md: "h-10 px-5 text-sm gap-2 rounded-full",
+  lg: "h-12 px-6 text-base gap-2 rounded-full", icon: "h-8 w-8 rounded-lg",
+})[props.size]);
+function startWave(event: PointerEvent) {
+  if (!props.ripple || props.disabled || reduced.value) return;
+  const bounds = (event.currentTarget as HTMLElement).getBoundingClientRect();
+  waves.value = [...waves.value, {
+    key: sequence++, left: event.clientX - bounds.left, top: event.clientY - bounds.top,
+    diameter: 2 * Math.max(bounds.width, bounds.height),
+  }];
+}
+function finishWave(key: number) { waves.value = waves.value.filter(wave => wave.key !== key); }
+onBeforeUnmount(() => { waves.value = []; });
+</script>
+
+<template>
+  <motion.button :type="type" :disabled="disabled" :transition="SPRING_PRESS" @pointerdown="startWave"
+    :while-press="reduced || disabled ? undefined : { scale: pressScale }"
+    :while-hover="reduced || disabled ? undefined : { scale: 1.02 }"
+    :class="cn('relative inline-flex items-center justify-center font-medium select-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', ripple && 'overflow-hidden', appearance, geometry, $attrs.class)">
+    <span v-if="ripple" class="pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]">
+      <motion.span v-for="wave in waves" :key="wave.key" class="absolute rounded-full bg-current"
+        :style="{ left: `${wave.left}px`, top: `${wave.top}px`, width: `${wave.diameter}px`, height: `${wave.diameter}px`, x: '-50%', y: '-50%' }"
+        :initial="{ scale: 0.05, opacity: 0.3 }" :animate="{ scale: 1, opacity: 0 }"
+        :transition="{ duration: 1.6, ease: EASE_OUT }" @animation-complete="finishWave(wave.key)" />
+    </span>
+    <slot />
+  </motion.button>
+</template>

package/src/motion/button/src/ButtonLink.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { SPRING_PRESS } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+const props = withDefaults(defineProps<{ href?: string; variant?: "primary" | "secondary" | "ghost" | "outline"; size?: "sm" | "md" | "lg" | "icon"; pressScale?: number }>(), { variant: "primary", size: "md", pressScale: 0.93 });
+const reduced = useReducedMotion();
+const color = computed(() => ({ primary: "bg-primary text-primary-foreground hover:bg-primary/90", secondary: "border border-border bg-card text-foreground hover:border-border", ghost: "text-muted-foreground hover:text-foreground hover:bg-muted/60", outline: "border border-border bg-transparent text-foreground hover:bg-muted/60" })[props.variant]);
+const geometry = computed(() => ({ sm: "h-8 px-3 text-xs gap-1.5 rounded-full", md: "h-10 px-5 text-sm gap-2 rounded-full", lg: "h-12 px-6 text-base gap-2 rounded-full", icon: "h-8 w-8 rounded-lg" })[props.size]);
+</script>
+<template>
+  <motion.a :href="href" :while-press="reduced ? undefined : { scale: pressScale }" :while-hover="reduced ? undefined : { scale: 1.02 }"
+    :transition="SPRING_PRESS" :class="cn('inline-flex items-center justify-center font-medium select-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', color, geometry, $attrs.class)"><slot /></motion.a>
+</template>

package/src/motion/button/src/Magnetic.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { motion, useMotionValue, useSpring } from "motion-v";
+import { SPRING_MOUSE } from "../../../lib/ease";
+import { resolveElement, useMediaQuery, useReducedMotion } from "../../../lib/composables";
+const props = withDefaults(defineProps<{ strength?: number }>(), { strength: 0.35 });
+const element = ref<HTMLElement | null>(null), reduced = useReducedMotion();
+const hover = useMediaQuery("(hover: hover) and (pointer: fine)");
+const enabled = computed(() => hover.value && !reduced.value);
+const x = useMotionValue(0), y = useMotionValue(0);
+const springX = useSpring(x, SPRING_MOUSE), springY = useSpring(y, SPRING_MOUSE);
+function reset() { x.set(0); y.set(0); }
+function track(event: MouseEvent) {
+  if (!enabled.value || !element.value) return;
+  const bounds = element.value.getBoundingClientRect();
+  x.set(props.strength * (event.clientX - bounds.left - bounds.width / 2));
+  y.set(props.strength * (event.clientY - bounds.top - bounds.height / 2));
+}
+watch(enabled, active => { if (!active) { reset(); springX.jump(0); springY.jump(0); } });
+onBeforeUnmount(() => { x.destroy(); y.destroy(); });
+defineExpose({ x, y });
+</script>
+<template><motion.div :ref="node => element = resolveElement<HTMLElement>(node)" @mousemove="track" @mouseleave="reset"
+  :style="{ x: springX, y: springY }" class="inline-block"><slot /></motion.div></template>

package/src/motion/button/src/MagneticButton.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import { ref } from "vue";
+import { resolveElement } from "../../../lib/composables";
+import Button from "./Button.vue";
+import Magnetic from "./Magnetic.vue";
+withDefaults(defineProps<{ strength?: number; disabled?: boolean; magneticClassName?: string }>(), { strength: 0.25 });
+const button = ref<unknown>();
+function focus() { resolveElement<HTMLButtonElement>(button.value)?.focus(); }
+defineExpose({ focus });
+</script>
+<template><Magnetic :strength="strength" :class="magneticClassName"><Button ref="button" v-bind="$attrs" :disabled="disabled"><slot /></Button></Magnetic></template>

package/src/motion/button/src/MetallicButton.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { EASE_IN_OUT } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import Button from "./Button.vue";
+const props = withDefaults(defineProps<{ size?: "sm" | "md" | "lg" | "icon"; paused?: boolean; disabled?: boolean }>(), { size: "md", paused: false });
+const reduced = useReducedMotion(), hovered = ref(false);
+const animated = computed(() => !props.paused && !reduced.value);
+</script>
+<template>
+  <Button variant="ghost" :size="size" :disabled="disabled" @hover-start="hovered = true" @hover-end="hovered = false"
+    :class="cn('group relative isolate overflow-hidden border-0 bg-transparent text-foreground hover:bg-transparent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 shadow-[0_8px_22px_rgba(0,0,0,0.16)]', size === 'icon' && 'rounded-full', $attrs.class)">
+    <motion.span aria-hidden="true" class="pointer-events-none absolute inset-y-0 left-[-18%] z-0 w-[136%] rounded-[inherit] bg-[linear-gradient(105deg,#111_0%,#737373_14%,#fafafa_26%,#525252_38%,#0a0a0a_50%,#a3a3a3_64%,#fff_75%,#404040_87%,#111_100%)]"
+      :animate="animated ? { x: ['0%', '13%', '0%'] } : undefined" :transition="animated ? { duration: 8, ease: EASE_IN_OUT, repeat: Infinity } : undefined" />
+    <motion.span aria-hidden="true" class="pointer-events-none absolute inset-y-0 left-[-58%] z-[1] w-[52%] -skew-x-12 bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.5)_48%,transparent)] opacity-50 blur-[3px] mix-blend-screen"
+      :animate="animated ? { x: hovered ? '310%' : '0%' } : undefined" :transition="animated ? { duration: 2.4, ease: EASE_IN_OUT } : undefined" />
+    <span aria-hidden="true" class="pointer-events-none absolute inset-[2px] z-[2] rounded-[inherit] bg-background transition-colors group-hover:bg-muted/40" />
+    <span aria-hidden="true" class="pointer-events-none absolute inset-[2px] z-[3] rounded-[inherit] shadow-[inset_0_1px_0_rgba(255,255,255,0.28),inset_0_-1px_0_rgba(0,0,0,0.16)]" />
+    <span class="relative z-10 inline-flex items-center justify-center gap-2"><slot /></span>
+  </Button>
+</template>

package/src/motion/button/src/StatefulButton.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import { computed, useSlots, type Component, type VNodeChild } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { Check, Loader2, X } from "lucide-vue-next";
+import { EASE_OUT, SPRING_SWAP } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import RenderContent from "../../../lib/RenderContent";
+import Button, { type ButtonProps } from "./Button.vue";
+import StatefulText from "./StatefulText.vue";
+export type ButtonState = "idle" | "loading" | "success" | "error";
+interface Props extends ButtonProps {
+  state?: ButtonState; loadingText?: VNodeChild | Component; successText?: VNodeChild | Component;
+  errorText?: VNodeChild | Component; icon?: VNodeChild | Component;
+}
+const props = withDefaults(defineProps<Props>(), { state: "idle", loadingText: "Loading", successText: "Done", errorText: "Try again" });
+const slots = useSlots(), reduced = useReducedMotion();
+const statusIcon = computed(() => ({ loading: Loader2, success: Check, error: X })[props.state === "idle" ? "loading" : props.state]);
+function content(): VNodeChild | Component {
+  if (props.state === "idle") return slots.default?.();
+  const overrides = { loading: props.loadingText, success: props.successText, error: props.errorText };
+  return slots[props.state]?.() ?? overrides[props.state];
+}
+const iconPoses = {
+  initial: { opacity: 0, width: 0, scale: 0.7, filter: "blur(6px)" },
+  animate: { opacity: 1, width: "1.5rem", scale: 1, filter: "blur(0px)", transition: SPRING_SWAP },
+  exit: { opacity: 0, width: 0, scale: 0.7, filter: "blur(6px)", transition: { duration: 0.16, ease: EASE_OUT } },
+};
+</script>
+<template>
+  <Button v-bind="$attrs" :variant="variant" :size="size" :press-scale="pressScale" :ripple="ripple" :type="type"
+    :disabled="disabled || state === 'loading'" :aria-busy="state === 'loading'" :while-hover="undefined">
+    <span aria-live="polite" class="relative inline-flex items-center justify-center overflow-hidden">
+      <AnimatePresence :initial="false" as="span" class="contents">
+        <motion.span v-if="state !== 'idle'" :key="`${state}-icon`" :variants="iconPoses"
+          :initial="reduced ? { opacity: 0 } : 'initial'" :animate="reduced ? { opacity: 1 } : 'animate'" :exit="reduced ? { opacity: 0 } : 'exit'"
+          :transition="reduced ? { duration: 0.15 } : undefined" class="inline-grid shrink-0 place-items-center overflow-hidden">
+          <component :is="statusIcon" :class="['h-4 w-4', state === 'loading' && !reduced && 'animate-spin']" />
+        </motion.span>
+      </AnimatePresence>
+      <StatefulText :value="state" :nodes="content()" />
+      <AnimatePresence :initial="false" as="span" class="contents">
+        <motion.span v-if="state === 'idle' && (icon || slots.icon)" key="idle-icon" :variants="iconPoses"
+          :initial="reduced ? { opacity: 0 } : 'initial'" :animate="reduced ? { opacity: 1 } : 'animate'" :exit="reduced ? { opacity: 0 } : 'exit'"
+          :transition="reduced ? { duration: 0.15 } : undefined" class="inline-grid shrink-0 place-items-center overflow-hidden"><slot name="icon"><RenderContent :node="icon" /></slot></motion.span>
+      </AnimatePresence>
+    </span>
+  </Button>
+</template>

package/src/motion/button/src/StatefulText.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed, isVNode, onBeforeUnmount, onMounted, onUpdated, ref, Text, type Component, type VNodeChild } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { EASE_OUT, SPRING_SWAP } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import RenderContent from "../../../lib/RenderContent";
+const props = defineProps<{ value: string; nodes: VNodeChild | Component }>();
+const reduced = useReducedMotion(), measureElement = ref<HTMLSpanElement>(), width = ref<number>();
+function plainText(node: VNodeChild | Component): string | null {
+  if (typeof node === "string") return node;
+  if (Array.isArray(node)) return node.length === 1 ? plainText(node[0]) : null;
+  return isVNode(node) && node.type === Text && typeof node.children === "string" ? node.children : null;
+}
+const label = computed(() => plainText(props.nodes));
+const cascade = computed(() => label.value !== null && !reduced.value);
+const identity = computed(() => label.value === null ? props.value : `${props.value}-${label.value}`);
+function delay(custom: unknown) { return typeof custom === "number" ? custom : 0; }
+const poses = {
+  initial: { opacity: 0, y: "105%", filter: "blur(6px)" },
+  animate: (custom: unknown) => ({ opacity: 1, y: "0%", filter: "blur(0px)", transition: { ...SPRING_SWAP, delay: delay(custom) } }),
+  exit: (custom: unknown) => ({ opacity: 0, y: "-105%", filter: "blur(6px)", transition: { duration: 0.16, ease: EASE_OUT, delay: delay(custom) / 2 } }),
+};
+function measure() { const measured = measureElement.value?.offsetWidth; if (measured && measured !== width.value) width.value = measured; }
+let observer: ResizeObserver | undefined;
+onMounted(() => { measure(); if (measureElement.value && typeof ResizeObserver !== "undefined") { observer = new ResizeObserver(measure); observer.observe(measureElement.value); } });
+onUpdated(measure);
+onBeforeUnmount(() => observer?.disconnect());
+</script>
+<template>
+  <motion.span :initial="false" :animate="{ width: width === undefined ? undefined : `${width}px` }" :transition="reduced ? { duration: 0 } : SPRING_SWAP" class="relative inline-block overflow-hidden whitespace-nowrap align-bottom">
+    <span ref="measureElement" aria-hidden="true" class="invisible inline-block whitespace-nowrap">
+      <template v-if="cascade"><span v-for="(character, index) in label!.split('')" :key="index" class="inline-block whitespace-pre">{{ character }}</span></template>
+      <RenderContent v-else :node="nodes" />
+    </span>
+    <template v-if="cascade">
+      <span class="sr-only">{{ label }}</span>
+      <AnimatePresence :initial="false" as="span" class="contents">
+        <motion.span :key="`cascade-${identity}`" aria-hidden="true" initial="initial" animate="animate" exit="exit" class="absolute left-0 top-0 inline-block whitespace-pre">
+          <motion.span v-for="(character, index) in label!.split('')" :key="index" :custom="index * 0.025" :variants="poses" initial="initial" animate="animate" exit="exit" class="inline-block whitespace-pre will-change-[opacity,filter,transform]">{{ character }}</motion.span>
+        </motion.span>
+      </AnimatePresence>
+    </template>
+    <AnimatePresence v-else :initial="false" as="span" class="contents">
+      <motion.span :key="`text-${identity}`" :initial="reduced ? { opacity: 0 } : { opacity: 0, y: 14, filter: 'blur(6px)' }"
+        :animate="reduced ? { opacity: 1 } : { opacity: 1, y: 0, filter: 'blur(0px)' }" :exit="reduced ? { opacity: 0 } : { opacity: 0, y: -14, filter: 'blur(6px)' }"
+        :transition="reduced ? { duration: 0.15 } : SPRING_SWAP" class="absolute left-0 top-0 inline-block will-change-[opacity,filter,transform]"><RenderContent :node="nodes" /></motion.span>
+    </AnimatePresence>
+  </motion.span>
+</template>

package/src/motion/button/src/api-types.ts

@@ -0,0 +1,16 @@
+// Vue public prop types, derived from the actual components.
+export type ButtonLinkProps = InstanceType<
+  (typeof import("./ButtonLink.vue"))["default"]
+>["$props"];
+export type ButtonProps = InstanceType<
+  (typeof import("./Button.vue"))["default"]
+>["$props"];
+export type MagneticButtonProps = InstanceType<
+  (typeof import("./MagneticButton.vue"))["default"]
+>["$props"];
+export type MetallicButtonProps = InstanceType<
+  (typeof import("./MetallicButton.vue"))["default"]
+>["$props"];
+export type StatefulButtonProps = InstanceType<
+  (typeof import("./StatefulButton.vue"))["default"]
+>["$props"];

package/src/motion/button/src/public-types.ts

@@ -0,0 +1,3 @@
+import type { ButtonProps } from "./api-types";
+export type ButtonSize = NonNullable<ButtonProps["size"]>;
+export type ButtonVariant = NonNullable<ButtonProps["variant"]>;

package/src/motion/card/index.ts

@@ -0,0 +1,12 @@
+export { default as Card } from "./src/Card.vue";
+export { default as CardHeader } from "./src/CardHeader.vue";
+export { default as CardDescription } from "./src/CardDescription.vue";
+export { default as CardAction } from "./src/CardAction.vue";
+export { default as CardContent } from "./src/CardContent.vue";
+export { default as CardFooter } from "./src/CardFooter.vue";
+export { default as CardTitle } from "./src/CardTitle.vue";
+export const CARD_TARGET_CLASS = "after:absolute after:inset-0";
+export type CardVariant = "outlined" | "muted";
+export type CardSize = "default" | "compact";
+
+export type * from "./src/api-types";

package/src/motion/card/src/Card.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import { computed, onBeforeUnmount, provide, watch } from "vue";
+import { animate, isDragActive, motion, useMotionValue } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { SPRING_PRESS } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+
+const props = withDefaults(defineProps<{ variant?: "outlined" | "muted"; size?: "default" | "compact"; interactive?: boolean; selected?: boolean }>(), { variant: "outlined", size: "default" });
+const reduced = useReducedMotion();
+const scale = useMotionValue(1);
+provide("orvui-card-size", computed(() => props.size));
+let animation: ReturnType<typeof animate> | undefined;
+let pointer: number | undefined;
+let listening = false;
+function animateScale(target: number) {
+  animation?.stop();
+  animation = animate(scale, target, SPRING_PRESS);
+}
+function detach() {
+  if (!listening) return;
+  listening = false;
+  window.removeEventListener("pointerup", release, true);
+  window.removeEventListener("pointercancel", release, true);
+  window.removeEventListener("pointermove", checkDrag);
+}
+function release(event?: PointerEvent) {
+  if (event && event.pointerId !== pointer) return;
+  pointer = undefined;
+  detach();
+  animateScale(1);
+}
+function checkDrag() { if (isDragActive()) release(); }
+function press(event: PointerEvent) {
+  if (!props.interactive || reduced.value || event.defaultPrevented || listening
+      || event.isPrimary === false || event.button !== 0 || isDragActive()) return;
+  pointer = event.pointerId;
+  listening = true;
+  window.addEventListener("pointerup", release, true);
+  window.addEventListener("pointercancel", release, true);
+  window.addEventListener("pointermove", checkDrag);
+  animateScale(0.985);
+}
+watch([() => props.interactive, reduced], ([interactive, quiet]) => { if (listening && (!interactive || quiet)) release(); });
+onBeforeUnmount(() => { detach(); animation?.stop(); });
+</script>
+
+<template>
+  <motion.div v-bind="$attrs" data-slot="card" :data-selected="selected || undefined" @pointerdown="press"
+    :style="interactive ? { scale } : undefined"
+    :class="cn('relative flex flex-col rounded-2xl border text-card-foreground transition-[border-color,box-shadow,background-color] duration-200',
+      variant === 'outlined' ? 'border-border bg-background' : 'border-transparent bg-muted',
+      size === 'default' ? 'gap-6 py-6' : 'gap-4 py-4',
+      interactive && 'cursor-pointer hover:border-border-strong has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-foreground',
+      selected && 'border-primary hover:border-primary', $attrs.class as string)">
+    <slot />
+  </motion.div>
+</template>

package/src/motion/card/src/CardAction.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import { createCardPart } from "./parts";
+const Surface = createCardPart("CardAction", "div", "card-action", "col-start-2 row-span-2 row-start-1 flex items-center self-start justify-self-end");
+defineSlots<{ default?: () => any }>();
+</script>
+<template><Surface><slot /></Surface></template>

package/src/motion/card/src/CardContent.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import { createCardPart } from "./parts";
+const Surface = createCardPart("CardContent", "div", "card-content", "text-sm", true);
+defineSlots<{ default?: () => any }>();
+</script>
+<template><Surface><slot /></Surface></template>

package/src/motion/card/src/CardDescription.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import { createCardPart } from "./parts";
+const Surface = createCardPart("CardDescription", "p", "card-description", "text-sm leading-relaxed text-muted-foreground");
+defineSlots<{ default?: () => any }>();
+</script>
+<template><Surface><slot /></Surface></template>

package/src/motion/card/src/CardFooter.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import { createCardPart } from "./parts";
+const Surface = createCardPart("CardFooter", "div", "card-footer", "flex items-center gap-2", true);
+defineSlots<{ default?: () => any }>();
+</script>
+<template><Surface><slot /></Surface></template>

package/src/motion/card/src/CardHeader.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import { createCardPart } from "./parts";
+const Surface = createCardPart("CardHeader", "div", "card-header", "grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 has-data-[slot=card-action]:grid-cols-[1fr_auto]", true);
+defineSlots<{ default?: () => any }>();
+</script>
+<template><Surface><slot /></Surface></template>

package/src/motion/card/src/CardTitle.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import { computed } from "vue";
+const props = withDefaults(defineProps<{ as?: "div" | "h2" | "h3" | "h4" }>(), { as: "div" });
+const tag = computed(() => props.as);
+</script>
+<template><component :is="tag" data-slot="card-title" class="text-[15px] leading-snug font-semibold text-foreground"><slot /></component></template>

package/src/motion/card/src/api-types.ts

@@ -0,0 +1,22 @@
+// Vue public prop types, derived from the actual components.
+export type CardActionProps = InstanceType<
+  (typeof import("./CardAction.vue"))["default"]
+>["$props"];
+export type CardContentProps = InstanceType<
+  (typeof import("./CardContent.vue"))["default"]
+>["$props"];
+export type CardDescriptionProps = InstanceType<
+  (typeof import("./CardDescription.vue"))["default"]
+>["$props"];
+export type CardFooterProps = InstanceType<
+  (typeof import("./CardFooter.vue"))["default"]
+>["$props"];
+export type CardHeaderProps = InstanceType<
+  (typeof import("./CardHeader.vue"))["default"]
+>["$props"];
+export type CardProps = InstanceType<
+  (typeof import("./Card.vue"))["default"]
+>["$props"];
+export type CardTitleProps = InstanceType<
+  (typeof import("./CardTitle.vue"))["default"]
+>["$props"];

package/src/motion/card/src/parts.ts

@@ -0,0 +1,11 @@
+import { computed, defineComponent, h, inject, unref, type Ref } from "vue";
+import { cn } from "../../../lib/utils";
+
+/** Static card regions share the provider's responsive inset contract. */
+export function createCardPart(name: string, tag: string, slot: string, base: string, padded = false) {
+  return defineComponent({ name, inheritAttrs: false, setup(_, { attrs, slots }) {
+    const size = padded ? inject<Ref<string> | string>("orvui-card-size", "default") : "default";
+    const inset = computed(() => padded ? unref(size) === "default" ? "px-6" : "px-4" : undefined);
+    return () => h(tag, { ...attrs, "data-slot": slot, class: cn(base, inset.value, attrs.class as string) }, slots.default?.());
+  } });
+}