@orvui/vue 0.0.0-stage → 0.1.1

package/src/motion/drawer/src/Drawer.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import { computed, onMounted, ref } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { EASE_OUT, SPRING_PANEL } from "../../../lib/ease";
+import { resolveElement, useOverlay, useReducedMotion } from "../../../lib/composables";
+import { useExitInteractivity } from "../../_overlay/interactivity";
+const props = withDefaults(defineProps<{ open: boolean; side?: "left" | "right"; ariaLabel?: string; dismissable?: boolean; backdropClassName?: string }>(), { side: "right", dismissable: true });
+const emit = defineEmits<{ "update:open": [open: boolean] }>();
+const active = computed(() => props.open), mounted = ref(false), reduced = useReducedMotion();
+const panel = ref<HTMLElement | null>(null), backdrop = ref<HTMLElement | null>(null);
+const hidden = computed(() => reduced.value ? { opacity: 0 } : { x: props.side === "right" ? "100%" : "-100%" });
+function dismiss() { if (props.dismissable) emit("update:open", false); }
+useOverlay(active, panel, dismiss);
+useExitInteractivity(active, [panel, backdrop], [panel]);
+onMounted(() => { mounted.value = true; });
+</script>
+<template><Teleport v-if="mounted" to="body"><AnimatePresence>
+  <motion.button v-if="open" :ref="node => backdrop = resolveElement<HTMLElement>(node)" key="backdrop" type="button" aria-label="Close" :tabindex="-1" @click="dismiss"
+    :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" :exit="{ opacity: 0 }" :transition="{ duration: 0.25, ease: EASE_OUT }" :class="cn('fixed inset-0 z-50 h-full w-full cursor-default bg-black/40 backdrop-blur-sm', backdropClassName)" />
+  <motion.div v-if="open" :ref="node => panel = resolveElement<HTMLElement>(node)" key="panel" :tabindex="-1" role="dialog" aria-modal="true" :aria-label="ariaLabel"
+    :initial="hidden" :animate="reduced ? { opacity: 1 } : { x: 0 }" :exit="hidden" :transition="reduced ? { duration: 0.2, ease: EASE_OUT } : SPRING_PANEL" v-bind="$attrs"
+    :class="cn('fixed inset-y-0 z-50 flex w-80 max-w-[85vw] flex-col bg-background shadow-xl outline-none', side === 'right' ? 'right-0 border-l border-border' : 'left-0 border-r border-border', $attrs.class as string)"><slot /></motion.div>
+</AnimatePresence></Teleport></template>

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

@@ -0,0 +1,4 @@
+// Vue public prop types, derived from the actual components.
+export type DrawerProps = InstanceType<
+  (typeof import("./Drawer.vue"))["default"]
+>["$props"];

package/src/motion/expandable-control/index.ts

@@ -0,0 +1,4 @@
+export { default as ExpandableButton } from "./src/ExpandableButton.vue";
+export { default as ExpandableChip } from "./src/ExpandableChip.vue";
+
+export type * from "./src/api-types";

package/src/motion/expandable-control/src/ExpandableButton.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import { computed } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { Plus } from "lucide-vue-next";
+import { cn } from "../../../lib/utils";
+import { useReducedMotion } from "../../../lib/composables";
+import { useMotionState } from "../../state";
+import { EXPAND_TRANSITION } from "./transition";
+const props = withDefaults(defineProps<{
+  expanded?: boolean; defaultExpanded?: boolean; icon?: any; label?: string; disabled?: boolean; type?: "button" | "submit" | "reset";
+}>(), { expanded: undefined, defaultExpanded: false, label: "Create new", type: "button" });
+const emit = defineEmits(["update:expanded"]);
+const expanded = useMotionState(props, emit, "expanded", props.defaultExpanded), reduced = useReducedMotion();
+const transition = computed(() => reduced.value ? { duration: 0 } : EXPAND_TRANSITION);
+function toggle(event: MouseEvent) { if (!props.disabled && !event.defaultPrevented) expanded.value = !expanded.value; }
+</script>
+<template>
+  <motion.span layout :transition="transition" class="inline-flex">
+    <motion.button v-bind="$attrs" layout :type="type" :aria-label="($attrs['aria-label'] as string) ?? label" :aria-expanded="expanded" :disabled="disabled"
+      :class="cn('relative inline-flex h-11 min-w-11 items-center overflow-hidden rounded-full border border-border bg-transparent p-1 pr-1 text-sm font-medium text-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', expanded && !disabled && 'border-primary/40', $attrs.class as string)"
+      :style="{ borderRadius: '9999px' }" @click="toggle" :while-press="reduced || disabled ? undefined : { scale: 0.97 }" :transition="transition">
+      <motion.span layout="position" class="grid size-9 shrink-0 place-items-center" aria-hidden="true" :transition="transition"><slot name="icon"><component :is="icon ?? Plus" class="size-5" /></slot></motion.span>
+      <AnimatePresence mode="popLayout" :initial="false">
+        <motion.span v-if="expanded" key="label" layout :initial="reduced ? { opacity: 0 } : { opacity: 0, filter: 'blur(4px)' }"
+          :animate="reduced ? { opacity: 1 } : { opacity: 1, filter: 'blur(0px)' }" :exit="reduced ? { opacity: 0 } : { opacity: 0, filter: 'blur(4px)' }"
+          :transition="transition" class="relative inline-flex w-max items-center whitespace-nowrap pr-3" aria-hidden="true"><slot>{{ label }}</slot></motion.span>
+      </AnimatePresence>
+    </motion.button>
+  </motion.span>
+</template>

package/src/motion/expandable-control/src/ExpandableChip.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import { computed, ref } from "vue";
+import { motion } from "motion-v";
+import { X } from "lucide-vue-next";
+import { cn } from "../../../lib/utils";
+import { resolveElement, useReducedMotion } from "../../../lib/composables";
+import { useMotionState } from "../../state";
+import { EXPAND_TRANSITION } from "./transition";
+const props = withDefaults(defineProps<{
+  expanded?: boolean; defaultExpanded?: boolean; label: string; actionIcon?: any; actionLabel?: string;
+  collapseOnAction?: boolean; disabled?: boolean; labelClassName?: string; actionClassName?: string;
+}>(), { expanded: undefined, defaultExpanded: false, actionLabel: "Remove", collapseOnAction: true });
+const emit = defineEmits(["update:expanded", "action"]);
+const expanded = useMotionState(props, emit, "expanded", props.defaultExpanded), reduced = useReducedMotion();
+const trigger = ref<HTMLButtonElement | null>(null);
+const transition = computed(() => reduced.value ? { duration: 0 } : EXPAND_TRANSITION);
+function toggle(event: MouseEvent) { if (!props.disabled && !event.defaultPrevented) expanded.value = !expanded.value; }
+function act(event: MouseEvent) {
+  if (props.disabled || !expanded.value || event.defaultPrevented) return;
+  emit("action");
+  if (props.collapseOnAction) { expanded.value = false; trigger.value?.focus(); }
+}
+</script>
+<template>
+  <motion.span layout :transition="transition" class="inline-flex">
+    <motion.div v-bind="$attrs" layout :transition="transition" :style="{ borderRadius: '9999px' }"
+      :class="cn('inline-flex h-10 items-center overflow-hidden rounded-full border border-border bg-transparent text-sm text-foreground has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-ring', expanded && !disabled && 'border-primary/40', $attrs.class as string)">
+      <motion.button layout="position" :ref="node => trigger = resolveElement<HTMLButtonElement>(node)" type="button" :aria-expanded="expanded" :disabled="disabled"
+        :class="cn('h-full whitespace-nowrap py-0 pl-3 font-medium outline-none disabled:pointer-events-none disabled:opacity-50', expanded ? 'pr-1' : 'pr-3', labelClassName)" @click="toggle" :transition="transition">{{ label }}</motion.button>
+      <motion.span :class="cn('relative inline-flex h-10 shrink-0 items-center overflow-hidden', expanded ? 'w-8' : 'w-0')" :aria-hidden="!expanded" :initial="false"
+        :animate="reduced ? { opacity: expanded ? 1 : 0 } : { opacity: expanded ? 1 : 0, filter: expanded ? 'blur(0px)' : 'blur(4px)' }" :transition="transition">
+        <motion.button type="button" :aria-label="actionLabel" :disabled="disabled || !expanded"
+          :class="cn('flex h-10 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground outline-none transition-colors hover:text-foreground disabled:pointer-events-none', disabled && 'opacity-50', actionClassName)"
+          @click="act" :while-press="reduced || disabled ? undefined : { scale: 0.97 }" :transition="transition">
+          <span aria-hidden="true"><slot name="actionIcon"><component :is="actionIcon ?? X" class="size-3.5" /></slot></span>
+        </motion.button>
+      </motion.span>
+    </motion.div>
+  </motion.span>
+</template>

package/src/motion/expandable-control/src/api-types.ts

@@ -0,0 +1,7 @@
+// Vue public prop types, derived from the actual components.
+export type ExpandableButtonProps = InstanceType<
+  (typeof import("./ExpandableButton.vue"))["default"]
+>["$props"];
+export type ExpandableChipProps = InstanceType<
+  (typeof import("./ExpandableChip.vue"))["default"]
+>["$props"];

package/src/motion/expandable-control/src/transition.ts

@@ -0,0 +1 @@
+export const EXPAND_TRANSITION = { type: "spring" as const, stiffness: 220, damping: 17, mass: 0.85 };

package/src/motion/expanding-arrow-button/index.ts

@@ -0,0 +1,5 @@
+export { default as ExpandingArrowButton } from "./src/ExpandingArrowButton.vue";
+export { default as HoldActionButton } from "./src/HoldActionButton.vue";
+export { default as SlideActionButton } from "./src/SlideActionButton.vue";
+
+export type * from "./src/api-types";

package/src/motion/expanding-arrow-button/src/DottedChevron.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+const dots = Array.from({ length: 5 }, (_, index) => ({ x: 16 - Math.abs(index - 2) * 6, y: 4 + index * 5 }));
+</script>
+<template>
+  <svg viewBox="0 0 20 28" fill="none" aria-hidden="true"><circle v-for="dot in dots" :key="dot.y" :cx="dot.x" :cy="dot.y" r="2" fill="currentColor" /></svg>
+</template>

package/src/motion/expanding-arrow-button/src/ExpandingArrowButton.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { EASE_OUT, SPRING_LAYOUT, SPRING_PRESS } from "../../../lib/ease";
+import { useReducedMotion, useMediaQuery } from "../../../lib/composables";
+import DottedChevron from "./DottedChevron.vue";
+const props = defineProps<{ disabled?: boolean; accentClassName?: string; labelClassName?: string }>();
+const reduce = useReducedMotion();
+const mouse = ref(false);
+const focus = ref(false);
+const hoverSupported = useMediaQuery("(hover: hover) and (pointer: fine)");
+const expanded = computed(() => !props.disabled && (focus.value || mouse.value && hoverSupported.value));
+const chevrons = [1, .82, .64, .46, .28];
+const accentStyle = computed(() => ({ width: expanded.value ? "calc(100% - 12px)" : "52px", borderRadius: "16px" }));
+function arrowPose() { return { opacity: expanded.value ? 1 : 0, transform: expanded.value && !reduce.value ? "translateX(0px)" : "translateX(-6px)" }; }
+function arrowTiming(index: number) { return { duration: reduce.value ? 0 : .18, delay: expanded.value && !reduce.value ? .04 + index * .025 : 0, ease: EASE_OUT }; }
+</script>
+<template>
+  <motion.button type="button" :disabled="disabled" @mouseenter="mouse = true" @mouseleave="mouse = false" @focus="focus = true" @blur="focus = false"
+    :while-press="reduce || disabled ? undefined : { scale: .97 }" :transition="SPRING_PRESS"
+    class="relative inline-flex h-16 min-w-72 items-center overflow-hidden rounded-[22px] bg-neutral-950 p-1.5 text-white select-none outline-none focus-visible:ring-2 focus-visible:ring-lime-300 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50">
+    <motion.span layout="size" aria-hidden="true" :style="accentStyle" :transition="reduce ? { duration: 0 } : SPRING_LAYOUT" :class="cn('absolute inset-y-1.5 left-1.5 z-10 overflow-hidden bg-lime-300 text-neutral-950', accentClassName)">
+      <motion.span class="absolute inset-0 grid place-items-center" :animate="{ opacity: expanded ? 0 : 1 }" :transition="{ duration: reduce ? 0 : .1, ease: EASE_OUT }"><DottedChevron class="h-7 w-5" /></motion.span>
+      <span class="absolute inset-0 flex items-center justify-around px-3"><motion.span v-for="(alpha, index) in chevrons" :key="index" class="inline-grid place-items-center" :style="{ color: `rgb(10 10 10 / ${alpha})` }" :animate="arrowPose()" :transition="arrowTiming(index)"><DottedChevron class="h-7 w-5" /></motion.span></span>
+    </motion.span>
+    <motion.span :animate="{ opacity: expanded ? 0 : 1, transform: expanded && !reduce ? 'translateX(6px)' : 'translateX(0px)' }" :transition="{ duration: reduce ? 0 : .12, ease: EASE_OUT }" :class="cn('relative z-0 ml-[76px] mr-5 whitespace-nowrap text-lg font-medium tracking-[-0.02em]', labelClassName)"><slot /></motion.span>
+  </motion.button>
+</template>

package/src/motion/expanding-arrow-button/src/HoldActionButton.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, Text, useSlots, watch, type Component, type VNodeChild } from "vue";
+import { motion } from "motion-v";
+import RenderContent from "../../../lib/RenderContent";
+import { useReducedMotion } from "../../../lib/composables";
+import { EASE_OUT, SPRING_PRESS } from "../../../lib/ease";
+import { cn } from "../../../lib/utils";
+const props = withDefaults(defineProps<{ type?: "vertical" | "horizontal"; holdingLabel?: VNodeChild | Component; completeLabel?: VNodeChild | Component; holdDuration?: number; disabled?: boolean; fillClassName?: string; labelClassName?: string }>(), { type: "vertical", holdingLabel: "Keep holding", completeLabel: "Done", holdDuration: 1600 });
+const emit = defineEmits(["holdComplete"]);
+const slots = useSlots();
+const reduce = useReducedMotion();
+const phase = ref<"idle" | "holding" | "complete">("idle");
+const filling = computed(() => phase.value !== "idle");
+let capture: { element: HTMLElement; pointer: number } | undefined;
+function accessibleLabel() { const nodes = slots.default?.() ?? []; return nodes.length === 1 && nodes[0].type === Text ? String(nodes[0].children) : undefined; }
+function release() { const held = capture; capture = undefined; if (!held) return; try { if (held.element.hasPointerCapture(held.pointer)) held.element.releasePointerCapture(held.pointer); } catch {} }
+function reset() { phase.value = "idle"; release(); }
+function begin() { if (props.disabled || phase.value === "holding") return false; phase.value = "holding"; return true; }
+function finish() { if (phase.value !== "holding" || props.disabled) return; phase.value = "complete"; emit("holdComplete"); }
+function pointerDown(event: PointerEvent) { if (event.defaultPrevented || event.button !== 0 || capture || !begin()) return; const element = event.currentTarget as HTMLElement; capture = { element, pointer: event.pointerId }; try { element.setPointerCapture(event.pointerId); } catch {} }
+function pointerMove(event: PointerEvent) { if (!capture || capture.pointer !== event.pointerId) return; const b = capture.element.getBoundingClientRect(); if (event.clientX < b.left || event.clientX > b.right || event.clientY < b.top || event.clientY > b.bottom) reset(); }
+function pointerUp(event: PointerEvent) { if (!capture || capture.pointer === event.pointerId) reset(); }
+function key(event: KeyboardEvent, down: boolean) { if (event.key !== " " && event.key !== "Enter") return; event.preventDefault(); if (down) { if (!event.repeat) begin(); } else reset(); }
+const fillPose = computed(() => reduce.value ? { opacity: filling.value ? 1 : 0, transform: "none" } : { opacity: 1, transform: props.type === "horizontal" ? `translateX(${filling.value ? 0 : -100}%)` : `translateY(${filling.value ? 0 : 115}%)` });
+const fillTiming = computed(() => filling.value ? { duration: props.holdDuration / 1000, ease: "linear" as const } : { duration: reduce.value ? .15 : .24, ease: EASE_OUT });
+const wave = computed(() => props.type === "horizontal" ? { viewBox: "0 0 24 240", path: "M0 0h12C2 20 2 40 12 60s10 40 0 60-10 40 0 60 10 40 0 60H0Z", class: "absolute -right-5 top-0 h-[200%] w-6 text-sky-400", transform: phase.value === "holding" ? "translateY(-50%)" : "translateY(0%)" } : { viewBox: "0 0 240 24", path: "M0 12C20 2 40 2 60 12s40 10 60 0 40-10 60 0 40 10 60 0v12H0Z", class: "absolute -top-5 left-0 h-6 w-[200%] text-sky-400", transform: phase.value === "holding" ? "translateX(-50%)" : "translateX(0%)" });
+watch(() => props.disabled, value => { if (value) reset(); });
+onBeforeUnmount(reset);
+</script>
+<template>
+  <motion.button type="button" :disabled="disabled" :aria-label="($attrs['aria-label'] as string) ?? accessibleLabel()" @pointerdown="pointerDown" @pointermove="pointerMove" @pointerup="pointerUp" @pointercancel="pointerUp" @pointerleave="$event.pointerType !== 'touch' && reset()" @keydown="key($event, true)" @keyup="key($event, false)" @blur="reset" @contextmenu.prevent :while-press="reduce || disabled ? undefined : { scale: .98 }" :transition="SPRING_PRESS" class="relative inline-grid h-16 min-w-72 touch-none select-none [-webkit-touch-callout:none] place-items-center overflow-hidden rounded-[var(--hold-radius)] bg-primary px-8 text-primary-foreground [--hold-radius:22px] outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50">
+    <span aria-hidden="true" class="pointer-events-none absolute inset-0 [clip-path:inset(0_round_var(--hold-radius))]">
+      <motion.span :initial="false" :animate="fillPose" :transition="fillTiming" @animation-complete="finish" :class="cn('absolute inset-0 bg-sky-400 will-change-[opacity,transform]', fillClassName)">
+        <motion.svg v-if="!reduce" :viewBox="wave.viewBox" preserveAspectRatio="none" :class="wave.class" :animate="{ transform: wave.transform }" :transition="{ duration: 1.1, ease: 'linear', repeat: phase === 'holding' ? Infinity : 0 }"><path :d="wave.path" fill="currentColor" /></motion.svg>
+      </motion.span>
+    </span>
+    <span :class="cn('relative z-10 grid place-items-center text-base font-medium tracking-[-.01em]', labelClassName)">
+      <motion.span class="col-start-1 row-start-1" :animate="{ opacity: filling ? 0 : 1 }" :transition="{ duration: reduce ? 0 : .12, ease: EASE_OUT }"><slot /></motion.span>
+      <motion.span class="col-start-1 row-start-1" :aria-hidden="phase !== 'holding'" :animate="{ opacity: phase === 'holding' ? 1 : 0 }" :transition="{ duration: reduce ? 0 : .12, ease: EASE_OUT }"><slot name="holdingLabel"><RenderContent :node="holdingLabel" /></slot></motion.span>
+      <motion.span class="col-start-1 row-start-1" :aria-hidden="phase !== 'complete'" :animate="{ opacity: phase === 'complete' ? 1 : 0 }" :transition="{ duration: reduce ? 0 : .12, ease: EASE_OUT }"><slot name="completeLabel"><RenderContent :node="completeLabel" /></slot></motion.span>
+    </span>
+  </motion.button>
+</template>

package/src/motion/expanding-arrow-button/src/SlideActionButton.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, Text, useSlots, watch, type Component, type VNodeChild } from "vue";
+import { animate, motion, useMotionValue, useTransform } from "motion-v";
+import { useReducedMotion, resolveElement } from "../../../lib/composables";
+import { EASE_OUT, SPRING_LAYOUT, SPRING_PRESS } from "../../../lib/ease";
+import { cn } from "../../../lib/utils";
+import RenderContent from "../../../lib/RenderContent";
+const props = withDefaults(defineProps<{ completeLabel?: VNodeChild | Component; threshold?: number; resetDelay?: number; thumbClassName?: string; fillClassName?: string; disabled?: boolean }>(), { completeLabel: "Complete", threshold: .82, resetDelay: 1200 });
+const emit = defineEmits(["complete"]);
+const reduce = useReducedMotion();
+const slots = useSlots();
+const track = ref<HTMLElement | null>(null);
+const thumb = ref<HTMLElement | null>(null);
+const extent = ref(0);
+const completed = ref(false);
+const x = useMotionValue(0);
+const progress = useTransform(x, value => value / Math.max(1, extent.value));
+const labelOpacity = useTransform(progress, [0, .35, .65], [1, .75, 0]);
+const arrowPath = useTransform(progress, [0, .5, 1], ["M 8 5 L 15 12 L 8 19", "M 7 8 L 12 14 L 17 10", "M 5 12 L 10 17 L 19 7"]);
+let observer: ResizeObserver | undefined;
+let resetTimer: ReturnType<typeof setTimeout> | undefined;
+let animation: ReturnType<typeof animate> | undefined;
+function label() { const nodes = slots.default?.() ?? []; return nodes.length === 1 && nodes[0].type === Text ? String(nodes[0].children) : "Slide action"; }
+function settle(position: number) { animation?.stop(); if (reduce.value) x.set(position); else animation = animate(x, position, SPRING_LAYOUT); }
+function reset() { completed.value = false; settle(0); }
+function complete() { if (completed.value || props.disabled || extent.value <= 0) return; completed.value = true; settle(extent.value); emit("complete"); clearTimeout(resetTimer); resetTimer = setTimeout(reset, props.resetDelay); }
+function dragEnd() { if (x.get() >= extent.value * props.threshold) complete(); else settle(0); }
+function key(event: KeyboardEvent) { if (event.key === " " || event.key === "Enter") { event.preventDefault(); complete(); } }
+function measure() { extent.value = Math.max(0, (track.value?.clientWidth ?? 0) - (thumb.value?.clientWidth ?? 0) - 8); if (completed.value) settle(extent.value); }
+watch(extent, () => progress.set(x.get() / Math.max(1, extent.value)));
+watch(() => props.disabled, disabled => { if (disabled && !completed.value) settle(0); });
+onMounted(() => { measure(); if (typeof ResizeObserver !== "undefined") { observer = new ResizeObserver(measure); if (track.value) observer.observe(track.value); if (thumb.value) observer.observe(thumb.value); } });
+onBeforeUnmount(() => { observer?.disconnect(); clearTimeout(resetTimer); animation?.stop(); });
+</script>
+<template>
+  <div ref="track" class="relative h-16 w-72 overflow-hidden rounded-[22px] bg-muted p-1 [-webkit-touch-callout:none] pointer-coarse:select-none ring-1 ring-primary/10">
+    <motion.span aria-hidden="true" :style="{ scaleX: progress }" :class="cn('absolute inset-0 origin-left bg-primary will-change-transform', fillClassName)" />
+    <motion.span aria-hidden="true" :style="{ opacity: labelOpacity }" class="pointer-events-none absolute inset-0 grid place-items-center pl-10 text-sm font-medium text-foreground"><slot /></motion.span>
+    <motion.span aria-live="polite" :animate="{ opacity: completed ? 1 : 0 }" :transition="{ duration: reduce ? 0 : .15, ease: EASE_OUT }" class="pointer-events-none absolute inset-0 grid place-items-center text-sm font-medium text-primary-foreground"><template v-if="completed"><slot name="completeLabel"><RenderContent :node="completeLabel" /></slot></template></motion.span>
+    <motion.button :ref="element => thumb = resolveElement<HTMLElement>(element)" type="button" :aria-label="($attrs['aria-label'] as string) ?? label()" :disabled="disabled" :drag="completed || disabled ? false : 'x'" :drag-constraints="{ left: 0, right: extent }" :drag-elastic="0" :drag-momentum="false" :style="{ x }" @drag-end="dragEnd" @keydown="key" :while-press="reduce || completed ? undefined : { scale: .94 }" :transition="SPRING_PRESS" :class="cn('relative z-10 grid size-14 touch-none select-none [-webkit-touch-callout:none] cursor-grab place-items-center rounded-[18px] bg-primary text-primary-foreground shadow-sm outline-none active:cursor-grabbing focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background', completed && 'cursor-default bg-background text-foreground', thumbClassName)"><motion.svg viewBox="0 0 24 24" aria-hidden="true" class="size-5"><motion.path :d="arrowPath" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" /></motion.svg></motion.button>
+  </div>
+</template>

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

@@ -0,0 +1,10 @@
+// Vue public prop types, derived from the actual components.
+export type ExpandingArrowButtonProps = InstanceType<
+  (typeof import("./ExpandingArrowButton.vue"))["default"]
+>["$props"];
+export type HoldActionButtonProps = InstanceType<
+  (typeof import("./HoldActionButton.vue"))["default"]
+>["$props"];
+export type SlideActionButtonProps = InstanceType<
+  (typeof import("./SlideActionButton.vue"))["default"]
+>["$props"];

package/src/motion/file-tree/index.ts

@@ -0,0 +1,7 @@
+export { default as FileTree } from "./src/FileTree.vue";
+export { default as FileTreeFolder } from "./src/FileTreeFolder.vue";
+export { default as FileTreeFile } from "./src/FileTreeFile.vue";
+
+export type * from "./src/api-types";
+
+export type { FileTreeClassNames } from "./src/FileTree.vue";

package/src/motion/file-tree/src/FileTree.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, ref, useSlots } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { ChevronRight, File, Folder, FolderOpen } from "lucide-vue-next";
+import { SharedLayoutBg } from "../../shared-layout-bg";
+import RenderContent from "../../../lib/RenderContent";
+import { cn } from "../../../lib/utils";
+import { EASE_OUT, SPRING_LAYOUT, SPRING_SWAP } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import { useMotionState } from "../../state";
+import { readTree, visibleTree, type TreeRow } from "./tree-model";
+export interface FileTreeClassNames { tree?: string; item?: string; icon?: string; label?: string }
+const props = withDefaults(defineProps<{ modelValue?: string | null; defaultValue?: string | null; expandedIds?: string[]; defaultExpandedIds?: string[]; ariaLabel?: string; indent?: number; classNames?: FileTreeClassNames }>(), { defaultValue: null, defaultExpandedIds: () => [], ariaLabel: "Files", indent: 18 });
+const emit = defineEmits(["update:modelValue", "change", "update:expandedIds", "expandedChange"]);
+const selected = useMotionState<string | null>(props, emit, "modelValue", props.defaultValue);
+const expanded = useMotionState<string[]>(props, emit, "expandedIds", props.defaultExpandedIds);
+const reduced = useReducedMotion();
+const slots = useSlots();
+const focused = ref<string | null>(null);
+const elements = new Map<string, HTMLButtonElement>();
+let disposed = false;
+let focusVersion = 0;
+let prefix = "";
+let typedAt = 0;
+function rows() { return visibleTree(readTree(slots.default?.() ?? []), expanded.value); }
+function isOpen(row: TreeRow) { return expanded.value.includes(row.item.value); }
+function tabIndex(row: TreeRow) { const all = rows(); const candidates = [focused.value, selected.value, all[0]?.item.value]; return row.item.value === candidates.find(id => all.some(other => other.item.value === id)) ? 0 : -1; }
+function toggle(row: TreeRow) { const id = row.item.value; expanded.value = isOpen(row) ? expanded.value.filter(item => item !== id) : [...expanded.value, id]; emit("expandedChange", expanded.value); }
+function select(row: TreeRow) { if (row.item.disabled) return; selected.value = row.item.value; if (row.item.type === "folder") toggle(row); }
+async function focus(id: string | undefined) { if (!id) return; focused.value = id; const version = ++focusVersion; await nextTick(); if (!disposed && version === focusVersion) elements.get(id)?.focus(); }
+function key(event: KeyboardEvent, row: TreeRow) {
+  const all = rows(); const index = all.findIndex(item => item.item.value === row.item.value);
+  let destination: string | undefined; let handled = true;
+  switch (event.key) {
+    case "ArrowDown": destination = all[index + 1]?.item.value; handled = !!destination; break;
+    case "ArrowUp": destination = all[index - 1]?.item.value; handled = !!destination; break;
+    case "Home": destination = all[0]?.item.value; break;
+    case "End": destination = all.at(-1)?.item.value; break;
+    case "ArrowLeft": if (row.item.type === "folder" && isOpen(row) && !row.item.disabled) toggle(row); else destination = row.parentId ?? undefined; break;
+    case "ArrowRight": if (row.item.type !== "folder") { handled = false; break; } if (!isOpen(row) && !row.item.disabled) toggle(row); else if (all[index + 1]?.parentId === row.item.value) destination = all[index + 1].item.value; break;
+    case "Enter": case " ": select(row); break;
+    default: {
+      handled = false;
+      if (event.key.length !== 1 || event.ctrlKey || event.altKey || event.metaKey) break;
+      const time = performance.now(); prefix = time - typedAt < 500 ? prefix + event.key : event.key; typedAt = time;
+      const searchOrder = all.slice(index + 1).concat(all.slice(0, index + 1));
+      destination = searchOrder.find(item => item.item.name.toLocaleLowerCase().startsWith(prefix.toLocaleLowerCase()))?.item.value; handled = !!destination;
+    }
+  }
+  if (handled) event.preventDefault(); if (destination) void focus(destination);
+}
+function register(id: string, node: unknown) { if (node) elements.set(id, node as HTMLButtonElement); else elements.delete(id); }
+onBeforeUnmount(() => { disposed = true; ++focusVersion; elements.clear(); });
+</script>
+<template>
+  <SharedLayoutBg role="tree" :aria-label="ariaLabel" aria-multiselectable="false" :inset="0" pill-class-name="rounded-xl bg-muted" pill-container-class-name="inset-y-auto top-0 h-9" :class="cn('min-w-0', classNames?.tree)">
+    <motion.div v-for="row in rows()" :key="row.item.value" :layout="reduced ? false : 'position'" :initial="reduced ? false : { opacity: 0, y: -6 }" :animate="{ opacity: row.item.disabled ? .42 : 1, y: 0, transition: reduced ? { duration: 0 } : { duration: .22, ease: EASE_OUT, delay: Math.min(row.position * .025, .1) } }" :transition="reduced ? { duration: 0 } : SPRING_LAYOUT">
+      <button :ref="node => register(row.item.value, node)" type="button" role="treeitem" :aria-level="row.depth + 1" :aria-posinset="row.position" :aria-setsize="row.setSize" :aria-selected="selected === row.item.value" :aria-expanded="row.item.type === 'folder' ? isOpen(row) : undefined" :aria-disabled="row.item.disabled || undefined" :tabindex="tabIndex(row)" :class="cn('group/file-tree relative flex h-9 w-full items-center gap-2 overflow-hidden rounded-lg pr-2 text-left text-sm text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset aria-disabled:cursor-not-allowed', selected === row.item.value && 'bg-muted font-medium text-foreground', classNames?.item, row.item.class)" :style="{ paddingLeft: `${8 + row.depth * indent}px` }" @focus="focused = row.item.value" @keydown="key($event, row)" @click="select(row)">
+        <motion.span v-if="row.depth > 0" aria-hidden="true" class="absolute bottom-0 top-0 w-px origin-top bg-border" :style="{ left: `${16 + (row.depth - 1) * indent}px` }" :initial="reduced ? false : { opacity: 0, scaleY: 0 }" :animate="{ opacity: 1, scaleY: 1 }" :exit="{ opacity: 0, scaleY: 0 }" :transition="{ duration: reduced ? 0 : .3, ease: EASE_OUT }" />
+        <motion.span aria-hidden="true" class="relative z-10 grid size-4 shrink-0 place-items-center" :class="row.item.type === 'file' ? 'opacity-0' : ''" :animate="{ rotate: row.item.type === 'folder' && isOpen(row) ? 90 : 0 }" :transition="reduced ? { duration: 0 } : SPRING_SWAP"><ChevronRight class="size-3.5" /></motion.span>
+        <span aria-hidden="true" :class="cn('relative z-10 grid size-4 shrink-0 place-items-center text-muted-foreground transition-colors group-hover/file-tree:text-foreground', row.item.type === 'folder' && isOpen(row) && 'text-foreground', classNames?.icon)">
+          <RenderContent v-if="row.item.icon" :node="row.item.icon" /><File v-else-if="row.item.type === 'file'" class="size-4" />
+          <AnimatePresence v-else :initial="false" mode="popLayout"><motion.span :key="isOpen(row) ? 'open' : 'closed'" class="absolute inset-0 grid place-items-center" :initial="reduced ? false : { opacity: 0, scale: .75, rotate: isOpen(row) ? -8 : 8 }" :animate="{ opacity: 1, scale: 1, rotate: 0 }" :exit="reduced ? undefined : { opacity: 0, scale: .75, rotate: isOpen(row) ? 8 : -8 }" :transition="reduced ? { duration: 0 } : SPRING_SWAP"><FolderOpen v-if="isOpen(row)" class="size-4" /><Folder v-else class="size-4" /></motion.span></AnimatePresence>
+        </span>
+        <span :class="cn('relative z-10 min-w-0 flex-1 truncate', classNames?.label)">{{ row.item.name }}</span>
+      </button>
+    </motion.div>
+  </SharedLayoutBg>
+</template>

package/src/motion/file-tree/src/FileTreeFile.vue

@@ -0,0 +1,4 @@
+<script setup lang="ts">
+defineProps<{ value: string; name: string; icon?: any; disabled?: boolean }>();
+</script>
+<template><!-- Declarative tree entries are read by FileTree before rendering. --></template>

package/src/motion/file-tree/src/FileTreeFolder.vue

@@ -0,0 +1,4 @@
+<script setup lang="ts">
+defineProps<{ value: string; name: string; icon?: any; disabled?: boolean }>();
+</script>
+<template><!-- Declarative tree entries are read by FileTree before rendering. --></template>

package/src/motion/file-tree/src/api-types.ts

@@ -0,0 +1,10 @@
+// Vue public prop types, derived from the actual components.
+export type FileTreeFileProps = InstanceType<
+  (typeof import("./FileTreeFile.vue"))["default"]
+>["$props"];
+export type FileTreeFolderProps = InstanceType<
+  (typeof import("./FileTreeFolder.vue"))["default"]
+>["$props"];
+export type FileTreeProps = InstanceType<
+  (typeof import("./FileTree.vue"))["default"]
+>["$props"];

package/src/motion/file-tree/src/tree-model.ts

@@ -0,0 +1,26 @@
+import { Fragment, isVNode, type VNodeChild } from "vue";
+import FileTreeFile from "./FileTreeFile.vue";
+import FileTreeFolder from "./FileTreeFolder.vue";
+export interface TreeNode { value: string; name: string; type: "folder" | "file"; icon?: any; disabled: boolean; class?: any; children: TreeNode[] }
+export interface TreeRow { item: TreeNode; depth: number; parentId: string | null; position: number; setSize: number }
+export function readTree(nodes: VNodeChild[]): TreeNode[] {
+  const output: TreeNode[] = [];
+  for (const node of nodes) {
+    if (!isVNode(node)) continue;
+    if (node.type === Fragment) { output.push(...readTree(Array.isArray(node.children) ? node.children as VNodeChild[] : [])); continue; }
+    if (node.type !== FileTreeFile && node.type !== FileTreeFolder) continue;
+    const p = node.props ?? {};
+    const childSlot = (node.children as { default?: () => VNodeChild[] } | null)?.default;
+    output.push({ value: p.value, name: p.name, type: node.type === FileTreeFolder ? "folder" : "file", icon: p.icon, disabled: p.disabled === true || p.disabled === "", class: p.class, children: childSlot ? readTree(childSlot()) : [] });
+  }
+  return output;
+}
+export function visibleTree(nodes: TreeNode[], expanded: string[]): TreeRow[] {
+  const rows: TreeRow[] = [];
+  const open = new Set(expanded);
+  function visit(siblings: TreeNode[], depth: number, parentId: string | null) {
+    siblings.forEach((item, index) => { rows.push({ item, depth, parentId, position: index + 1, setSize: siblings.length }); if (item.type === "folder" && open.has(item.value)) visit(item.children, depth + 1, item.value); });
+  }
+  visit(nodes, 0, null);
+  return rows;
+}

package/src/motion/image-viewer/index.ts

@@ -0,0 +1,14 @@
+export { default as ImageViewer } from "./src/ImageViewer.vue";
+export { default as ImageViewerGallery } from "./src/ImageViewerGallery.vue";
+export { default as ImageViewerThumbnail } from "./src/ImageViewerThumbnail.vue";
+export { default as ImageViewerContent } from "./src/ImageViewerContent.vue";
+export { default as ImageViewerCounter } from "./src/ImageViewerCounter.vue";
+export { default as ImageViewerCaption } from "./src/ImageViewerCaption.vue";
+export { default as ImageViewerClose } from "./src/ImageViewerClose.vue";
+export { default as ImageViewerPrevious } from "./src/ImageViewerPrevious.vue";
+export { default as ImageViewerNext } from "./src/ImageViewerNext.vue";
+export * from "./src/types";
+export * from "./src/useImageViewer";
+export { default as MorphingLightbox } from "./src/ImageViewer.vue";
+
+export type * from "./src/api-types";

package/src/motion/image-viewer/src/ImageViewer.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed, provide, useId, type VNodeChild } from "vue";
+import { LayoutGroup } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { useReducedMotion } from "../../../lib/composables";
+import { viewerKey, type ImageViewerContext } from "./context";
+import { useViewerSelection } from "./viewer-state";
+import type { LightboxImage } from "./types";
+import ImageViewerGallery from "./ImageViewerGallery.vue";
+import ImageViewerThumbnail from "./ImageViewerThumbnail.vue";
+import ImageViewerContent from "./ImageViewerContent.vue";
+defineOptions({ inheritAttrs: false });
+const props = withDefaults(defineProps<{ images: LightboxImage[]; modelValue?: string | null; value?: string | null; defaultValue?: string | null; label?: string; thumbnailClassName?: string; className?: string; renderCaption?: (image: LightboxImage) => VNodeChild }>(), { defaultValue: null, label: "Image gallery" });
+const emit = defineEmits(["update:modelValue", "valueChange", "change"]);
+const selection = useViewerSelection(props, emit);
+const { select } = selection;
+const id = useId();
+const reduce = useReducedMotion();
+provide<ImageViewerContext>(viewerKey, { ...selection, images: computed(() => props.images), id, label: computed(() => props.label), reduce, get renderCaption() { return props.renderCaption; } });
+</script>
+<template><LayoutGroup :id="id"><slot :images="images" :select="select"><ImageViewerGallery v-bind="$attrs" :class="cn(className, $attrs.class as string)"><ImageViewerThumbnail v-for="image in images" :key="image.id" :image-id="image.id" :class="thumbnailClassName" /></ImageViewerGallery><ImageViewerContent /></slot></LayoutGroup></template>

package/src/motion/image-viewer/src/ImageViewerCaption.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import RenderContent from "../../../lib/RenderContent";
+import { useViewer } from "./context";
+const viewer = useViewer();
+const content = computed(() => { const image = viewer.image.value; return image ? viewer.renderCaption ? viewer.renderCaption(image) : image.caption ?? image.alt : null; });
+</script>
+<template><div aria-live="polite" data-lightbox-content="" class="min-w-0 text-center text-sm"><slot :image="viewer.image.value"><RenderContent :node="content" /></slot></div></template>

package/src/motion/image-viewer/src/ImageViewerClose.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { X } from "lucide-vue-next";
+import { useViewer } from "./context";
+import { cn } from "../../../lib/utils";
+defineOptions({ inheritAttrs: false });
+defineProps<{ disabled?: boolean }>();
+const emit = defineEmits<{ click: [event: MouseEvent] }>();
+const viewer = useViewer();
+function activate(event: MouseEvent) { emit("click", event); if (!event.defaultPrevented) viewer.select(null); }
+</script>
+<template><button v-bind="$attrs" type="button" :aria-label="String($attrs['aria-label'] ?? 'Close viewer')" :disabled="disabled" @click="activate" :class="cn('inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white disabled:opacity-30', $attrs.class as string)"><slot><X :size="18" aria-hidden="true" /></slot></button></template>

package/src/motion/image-viewer/src/ImageViewerContent.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue";
+import { AnimatePresence } from "motion-v";
+import { useViewer, useViewerModal } from "./context";
+import ImageViewerSurface from "./ImageViewerSurface.vue";
+defineOptions({ inheritAttrs: false });
+const viewer = useViewer();
+const mounted = ref(false);
+const portal = ref<HTMLElement | null>(null);
+const panel = ref<HTMLElement | null>(null);
+const open = computed(() => mounted.value && !!viewer.image.value);
+useViewerModal(open, portal, panel, () => viewer.select(null));
+const renderedImage = shallowRef(viewer.image.value);
+const renderedIndex = ref(viewer.index.value);
+watch(() => [viewer.image.value, viewer.index.value] as const, ([image, index]) => {
+  if (image) { renderedImage.value = image; renderedIndex.value = index; }
+}, { immediate: true, flush: 'sync' });
+const session = ref(0);
+let exitCleanup: ReturnType<typeof setTimeout> | undefined;
+watch(open, (next, previous) => {
+  if (exitCleanup !== undefined) { clearTimeout(exitCleanup); exitCleanup = undefined; }
+  if (!mounted.value) return;
+  if (next && !previous) { ++session.value; panel.value = null; }
+  if (!next && previous) exitCleanup = setTimeout(() => {
+    exitCleanup = undefined;
+    if (!open.value) { renderedImage.value = undefined; ++session.value; panel.value = null; }
+  }, viewer.reduce.value ? 120 : 540);
+}, { flush: "sync" });
+let revision = 0;
+watch(() => viewer.image.value?.id, async (next, previous) => { const version = ++revision; if (!mounted.value || !next || !previous) return; await nextTick(); if (!mounted.value || version !== revision) return; const focused = panel.value?.ownerDocument.activeElement; if (!panel.value?.contains(focused ?? null) || focused instanceof HTMLButtonElement && focused.disabled) (panel.value?.querySelector<HTMLButtonElement>("button:not(:disabled)") ?? panel.value)?.focus({ preventScroll: true }); });
+onMounted(() => mounted.value = true);
+onBeforeUnmount(() => { mounted.value = false; ++revision; if (exitCleanup !== undefined) { clearTimeout(exitCleanup); exitCleanup = undefined; } });
+function panelRefFor(ownerSession: number) { return (node: HTMLElement | null) => { if (ownerSession === session.value) panel.value = node; }; }
+</script>
+<template><Teleport v-if="mounted" to="body"><div ref="portal" data-image-viewer-portal="" :inert="!open"><div :key="session" class="contents"><AnimatePresence><ImageViewerSurface v-if="renderedImage" v-bind="$attrs" :image="renderedImage" :index="renderedIndex" :set-panel="panelRefFor(session)"><template v-if="$slots.header" #header><slot name="header" /></template><template v-if="$slots.default" #default><slot /></template></ImageViewerSurface></AnimatePresence></div></div></Teleport></template>

package/src/motion/image-viewer/src/ImageViewerCounter.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useViewer } from "./context";
+const viewer = useViewer();
+const counter = computed(() => `${viewer.index.value + 1} / ${viewer.images.value.length}`);
+</script>
+<template><span aria-live="polite" class="text-xs tabular-nums">{{ counter }}</span></template>