@orvui/vue 0.0.0-stage → 0.1.1

package/src/motion/loader/src/clock.ts

@@ -0,0 +1,39 @@
+import { computed, onBeforeUnmount, onMounted, ref, watch, type Ref } from "vue";
+export const asciiFrames: Record<string, string[]> = {
+  ascii: Array.from("⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏"), "ascii-line": ["|", "/", "-", "\\"],
+  "ascii-braille": Array.from("⣾⣽⣻⢿⡿⣟⣯⣷"),
+  "ascii-blocks": Array.from("▁▂▃▄▅▆▇█▇▆▅▄▃▂"), "ascii-bounce": Array.from("⠁⠂⠄⡀⢀⠠⠐⠈"),
+};
+export function useLoaderClock(props: { variant: string; speed: number }, reduced: Ref<boolean>) {
+  const frame = ref(0), text = ref("LOADING"), percent = ref(0);
+  const frames = computed(() => asciiFrames[props.variant]);
+  let mounted = false, interval: ReturnType<typeof setInterval> | undefined;
+  function restart() {
+    clearInterval(interval);
+    frame.value = 0; text.value = "LOADING"; percent.value = 0;
+    if (!mounted) return;
+    if (frames.value) {
+      const count = frames.value.length;
+      interval = setInterval(() => { frame.value = (frame.value + 1) % count; }, 1000 * props.speed * (reduced.value ? 2.5 : 1) / count);
+    } else if (props.variant === "scramble" && !reduced.value) {
+      const symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789<>/*#@";
+      let iteration = 0;
+      interval = setInterval(() => {
+        const revealed = iteration++ % 11;
+        text.value = Array.from("LOADING", (letter, index) => index < revealed ? letter : symbols[Math.floor(Math.random() * symbols.length)]).join("");
+      }, 1000 * props.speed * 0.55 / 7);
+    } else if (props.variant === "percent") {
+      let elapsed = 0;
+      const duration = 1000 * props.speed * (reduced.value ? 2 : 1);
+      interval = setInterval(() => {
+        elapsed += 40;
+        percent.value = Math.min(100, Math.round(100 * elapsed / duration));
+        if (percent.value >= 100) elapsed = 0;
+      }, 40);
+    }
+  }
+  watch([() => props.variant, () => props.speed, reduced], restart);
+  onMounted(() => { mounted = true; restart(); });
+  onBeforeUnmount(() => { mounted = false; clearInterval(interval); });
+  return { frame, text, percent };
+}

package/src/motion/loader/src/model.ts

@@ -0,0 +1,29 @@
+export const MORPH_POINTS = 24;
+const fullTurn = 2 * Math.PI;
+function polygonRadius(angle: number, sides: number, orientation = 0) {
+  const repeated = sides * (angle - orientation - Math.PI / sides);
+  const local = Math.atan2(Math.sin(repeated), Math.cos(repeated)) / sides;
+  return Math.cos(Math.PI / sides) / Math.cos(local);
+}
+function sample(radius: (angle: number) => number) {
+  return Array.from({ length: MORPH_POINTS }, (_, index) => {
+    const angle = index * fullTurn / MORPH_POINTS - Math.PI / 2;
+    const distance = 46 * Math.min(1.05, radius(angle));
+    const x = (50 + distance * Math.cos(angle)).toFixed(2);
+    const y = (50 + distance * Math.sin(angle)).toFixed(2);
+    return `${index === 0 ? "M" : "L"}${x} ${y}`;
+  }).join(" ") + " Z";
+}
+export const MORPH_PATHS = [
+  sample(() => 1), sample(angle => polygonRadius(angle, 4, Math.PI / 4)),
+  sample(angle => polygonRadius(angle, 3)), sample(angle => polygonRadius(angle, 6)),
+  sample(angle => polygonRadius(angle, 4)),
+];
+export const MORPH_SEQ = Array.from({ length: 11 }, (_, index) => MORPH_PATHS[Math.floor(index / 2) % 5]!);
+export const MORPH_ROT = Array.from({ length: 11 }, (_, index) => Math.floor(index / 2) * 72);
+export const MORPH_SCALE = Array.from({ length: 11 }, (_, index) => index < 10 && Math.floor(index / 2) % 2 ? 0.88 : 1);
+const quadrants = [[0, 2], [3, 1]];
+export const BAYER_4 = Array.from({ length: 16 }, (_, index) => {
+  const x = index % 4, y = Math.floor(index / 4);
+  return 4 * quadrants[y % 2]![x % 2]! + quadrants[Math.floor(y / 2)]![Math.floor(x / 2)]!;
+});

package/src/motion/loader/src/visuals.ts

@@ -0,0 +1,88 @@
+import { h, type VNode, type VNodeChild } from "vue";
+import { motion } from "motion-v";
+import { EASE_IN_OUT } from "../../../lib/ease";
+import { BAYER_4, MORPH_PATHS, MORPH_ROT, MORPH_SCALE, MORPH_SEQ } from "./model";
+import { asciiFrames } from "./clock";
+import LoaderSvg from "./LoaderSvg.vue";
+interface LoaderVisualProps { variant: string; size: number; speed: number }
+interface LoaderVisualState { frame: number; text: string; percent: number; id: string }
+const px = (length: number) => `${length}px`;
+const indexes = (count: number) => Array.from({ length: count }, (_, index) => index);
+function moving(tag: string, props: Record<string, unknown>, children?: VNodeChild) {
+  if (tag === "svg" || tag === "circle" || tag === "path") {
+    const { animate: target, transition, ...attrs } = props;
+    return h(LoaderSvg, { ...attrs, as: tag, target, transition } as any, children === undefined ? undefined : { default: () => children });
+  }
+  const component = (motion as any)[tag];
+  return children === undefined ? h(component, props) : h(component, props, { default: () => children });
+}
+const span = (props: Record<string, unknown>, children?: VNodeChild) => h("span", props, children ?? undefined);
+const circleClass = "rounded-full bg-current";
+export function renderLoader(props: LoaderVisualProps, quiet: boolean, state: LoaderVisualState): VNode {
+  const { size, speed, variant } = props;
+  const loop = { duration: speed, ease: EASE_IN_OUT, repeat: Infinity };
+  const pulse = { opacity: [1, 0.4, 1] };
+  const pulseLoop = { duration: 1.4, ease: EASE_IN_OUT, repeat: Infinity };
+  const frames = asciiFrames[variant];
+  if (frames) return span({ "aria-hidden": true, class: "font-mono leading-none tabular-nums", style: { fontSize: px(size), lineHeight: 1 } }, frames[state.frame % frames.length]);
+  if (variant === "scramble") return span({ "aria-hidden": true, class: "font-mono font-medium tracking-[.2em] tabular-nums", style: { fontSize: px(size * 0.42) } }, state.text);
+  if (variant === "percent") return span({ "aria-hidden": true, class: "flex flex-col items-center", style: { gap: px(size * 0.14), width: px(size * 1.4) } }, [
+    span({ class: "font-mono font-medium tabular-nums", style: { fontSize: px(size * 0.42), lineHeight: 1 } }, `${state.percent}%`),
+    span({ class: "w-full overflow-hidden rounded-full bg-current/15", style: { height: px(Math.max(3, size * 0.1)) } }, span({ class: "block h-full rounded-full bg-current", style: { width: `${state.percent}%` } })),
+  ]);
+  if (variant === "dots") return span({ "aria-hidden": true, class: "flex items-center", style: { gap: px(size * 0.14) } }, indexes(3).map(index => moving("span", {
+    key: index, class: circleClass, style: { width: px(size * 0.24), height: px(size * 0.24) },
+    animate: quiet ? { opacity: [0.4, 1, 0.4] } : { y: [0, -size * 0.3, 0], opacity: [0.5, 1, 0.5] }, transition: { ...loop, delay: index * speed * 0.16 },
+  })));
+  if (variant === "bars") return span({ "aria-hidden": true, class: "flex items-center", style: { gap: px(size * 0.1), height: px(size) } }, indexes(4).map(index => moving("span", {
+    key: index, class: circleClass, style: { width: px(size * 0.16), height: px(size), transformOrigin: "bottom" },
+    animate: quiet ? { opacity: [0.4, 1, 0.4] } : { scaleY: [0.3, 1, 0.3] }, transition: { ...loop, delay: index * speed * 0.12 },
+  })));
+  if (variant === "dot-matrix" || variant === "dither") {
+    const matrix = variant === "dot-matrix", count = matrix ? 3 : 4;
+    const gap = matrix ? size * 0.14 : Math.max(1, size * 0.05);
+    const cell = (size - gap * (count - 1)) / count;
+    const values = matrix ? indexes(9) : BAYER_4;
+    return span({ "aria-hidden": true, class: "grid", style: { gap: px(gap), gridTemplateColumns: `repeat(${count},${cell}px)` } }, values.map((order, index) => moving("span", {
+      key: index, class: matrix ? circleClass : "bg-current", style: { width: px(cell), height: px(cell) },
+      animate: quiet ? { opacity: [0.3, 1, 0.3] } : matrix ? { opacity: [0.2, 1, 0.2], scale: [0.7, 1, 0.7] } : { opacity: [0.1, 1, 0.1] },
+      transition: { ...loop, delay: speed * (matrix ? ((index % 3) + Math.floor(index / 3)) / 4 : order / 16) },
+    })));
+  }
+  if (variant === "morph") return moving("svg", { width: size, height: size, viewBox: "0 0 100 100", "aria-hidden": true,
+    animate: quiet ? pulse : { rotate: MORPH_ROT, scale: MORPH_SCALE }, transition: quiet ? pulseLoop : { ...loop, duration: speed * 5 },
+  }, moving("path", { fill: "currentColor", d: MORPH_PATHS[0], animate: quiet ? undefined : { d: MORPH_SEQ }, transition: quiet ? undefined : { ...loop, duration: speed * 5 } }));
+  if (variant === "comet") return span({ "aria-hidden": true, class: "relative", style: { width: px(size), height: px(size) } }, moving("span", {
+    class: "absolute inset-0", animate: quiet ? pulse : { rotate: 360 }, transition: quiet ? pulseLoop : { duration: speed, ease: "linear", repeat: Infinity },
+  }, indexes(6).map(index => {
+    const diameter = size * 0.2 * (1 - index * 0.13);
+    return span({ key: index, class: "absolute left-1/2 top-1/2 rounded-full bg-current", style: {
+      width: px(diameter), height: px(diameter), marginLeft: px(-diameter / 2), marginTop: px(-diameter / 2),
+      opacity: 1 - index * 0.16, transform: `rotate(${-15 * index}deg) translateY(${-size * 0.4}px)`,
+    } });
+  })));
+  if (variant === "metaballs") return h("svg", { width: size, height: size, viewBox: "0 0 100 100", "aria-hidden": true }, [
+    h("defs", [h("filter", { id: state.id }, [h("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "5", result: "b" }), h("feColorMatrix", { in: "b", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -8" })])]),
+    h("g", { filter: `url(#${state.id})`, fill: "currentColor" }, [0, 1].map(side => moving("circle", {
+      key: side, cy: "50", r: "15", cx: quiet ? 40 + 20 * side : 30 + 40 * side,
+      animate: quiet ? { opacity: [0.4, 1, 0.4] } : { cx: side ? [70, 30, 70] : [30, 70, 30] }, transition: { ...loop, duration: speed * 1.6 },
+    }))),
+  ]);
+  if (variant === "newton") return span({ "aria-hidden": true, class: "flex items-center justify-center", style: { height: px(size * 0.2) } }, indexes(5).map(index => moving("span", {
+    key: index, class: circleClass, style: { width: px(size * 0.2), height: px(size * 0.2) },
+    animate: quiet ? undefined : index === 0 ? { x: [0, -size * 0.22, 0, 0] } : index === 4 ? { x: [0, 0, size * 0.22, 0] } : undefined,
+    transition: quiet || (index !== 0 && index !== 4) ? undefined : { duration: speed * 1.5, ease: EASE_IN_OUT, repeat: Infinity, times: index === 0 ? [0, 0.28, 0.5, 1] : [0, 0.5, 0.78, 1] },
+  })));
+  if (variant === "helix") return span({ "aria-hidden": true, class: "relative", style: { width: px(size), height: px(size) } }, indexes(7).map(row => span({ key: row }, [0, 1].map(side => moving("span", {
+    key: side, class: "absolute rounded-full bg-current", style: { width: px(size * 0.14), height: px(size * 0.14), left: px(size * 0.43), top: px(row / 6 * (size - size * 0.14)) },
+    animate: quiet ? { opacity: [0.4, 1, 0.4] } : {
+      x: side ? [-size * 0.32, size * 0.32, -size * 0.32] : [size * 0.32, -size * 0.32, size * 0.32],
+      scale: side ? [0.5, 1, 0.5] : [1, 0.5, 1], opacity: side ? [0.45, 1, 0.45] : [1, 0.45, 1],
+    }, transition: { ...loop, delay: row * speed / 7 },
+  })))));
+  const stroke = Math.max(2, size * 0.09), radius = (size - stroke) / 2;
+  return moving("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-hidden": true,
+    animate: quiet ? pulse : { rotate: 360 }, transition: quiet ? pulseLoop : { duration: speed, ease: "linear", repeat: Infinity },
+  }, [h("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: "currentColor", "stroke-opacity": ".2", "stroke-width": stroke }),
+    h("path", { d: `M ${size / 2} ${size / 2 - radius} A ${radius} ${radius} 0 0 1 ${size / 2 + radius} ${size / 2}`, fill: "none", stroke: "currentColor", "stroke-width": stroke, "stroke-linecap": "round" })]);
+}

package/src/motion/marquee/index.ts

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

package/src/motion/marquee/src/Marquee.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { Comment, computed, defineComponent, Fragment, h, isVNode, ref, useSlots, type VNode } from "vue";
+import { cn } from "../../../lib/utils";
+import { useReducedMotion } from "../../../lib/composables";
+const props = withDefaults(defineProps<{
+  direction?: "left" | "right" | "up" | "down"; speed?: number; pauseOnHover?: boolean; gap?: string; fade?: boolean;
+}>(), { direction: "left", speed: 30, pauseOnHover: true, gap: "1rem", fade: true });
+const slots = useSlots(), reduced = useReducedMotion(), hovered = ref(false);
+const vertical = computed(() => props.direction === "up" || props.direction === "down");
+const reverse = computed(() => props.direction === "right" || props.direction === "down");
+const running = computed(() => !reduced.value && !(hovered.value && props.pauseOnHover));
+function flatten(nodes: unknown[]): VNode[] {
+  return nodes.flatMap(node => {
+    if (!isVNode(node) || node.type === Comment) return [];
+    return node.type === Fragment && Array.isArray(node.children) ? flatten(node.children) : [node];
+  });
+}
+const Items = defineComponent({
+  setup: () => () => flatten(slots.default?.() ?? []).map((node, index) => h("div", { key: node.key ?? index, class: "shrink-0" }, [node])),
+});
+</script>
+<template>
+  <div :class="cn('group relative flex overflow-hidden', vertical ? 'flex-col' : 'flex-row', fade && (vertical
+      ? '[mask-image:linear-gradient(to_bottom,transparent,black_12%,black_88%,transparent)]'
+      : '[mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)]'))"
+    :style="{ '--gap': gap, gap }" @mouseenter="hovered = true" @mouseleave="hovered = false">
+    <div v-for="copy in 2" :key="copy" :aria-hidden="copy === 2" :inert="copy === 2"
+      :style="{ animationDuration: `${speed}s`, animationDirection: reverse ? 'reverse' : 'normal', animationPlayState: running ? 'running' : 'paused', gap }"
+      :class="cn('flex shrink-0 items-center', vertical ? 'flex-col orvui-marquee-vertical' : 'flex-row orvui-marquee')"><Items /></div>
+  </div>
+</template>
+<style scoped>
+.orvui-marquee { animation: orvui-marquee var(--duration, 30s) linear infinite; }
+.orvui-marquee-vertical { animation: orvui-marquee-vertical var(--duration, 30s) linear infinite; }
+@keyframes orvui-marquee { to { transform: translateX(calc(-100% - var(--gap))); } }
+@keyframes orvui-marquee-vertical { to { transform: translateY(calc(-100% - var(--gap))); } }
+</style>

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

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

package/src/motion/morphing-modal/index.ts

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

package/src/motion/morphing-modal/src/MorphingModal.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import { computed, nextTick, onMounted, onUpdated, ref, useAttrs, useId, watch } 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<{ viewId: string | null; placement?: "bottom" | "center"; ariaLabel?: string }>(), { placement: "bottom" });
+const emit = defineEmits<{ close: [] }>();
+const attrs = useAttrs(), id = useId(), reduced = useReducedMotion();
+const active = computed(() => props.viewId !== null), mounted = ref(false);
+const panel = ref<HTMLElement | null>(null), backdrop = ref<HTMLElement | null>(null), layer = ref<HTMLElement | null>(null);
+const headingId = ref<string>();
+const label = computed(() => props.ariaLabel ?? attrs["aria-label"] as string | undefined);
+const focusable = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+function view(key: string | null = props.viewId) { return [...(panel.value?.querySelectorAll<HTMLElement>("[data-view]") ?? [])].find(element => element.dataset.view === key); }
+function nameDialog() {
+  if (props.viewId === null || label.value) return;
+  const heading = view()?.querySelector<HTMLElement>("h1,h2,h3,h4,h5,h6");
+  if (heading && !heading.id) heading.id = `${id}-${props.viewId}-title`;
+  headingId.value = heading?.id;
+}
+watch(() => props.viewId, async (next, before, cleanup) => {
+  let cancelled = false;
+  cleanup(() => { cancelled = true; });
+  if (next === null) return;
+  const previous = view(before);
+  if (previous) { previous.inert = true; previous.setAttribute("aria-hidden", "true"); }
+  await nextTick();
+  if (cancelled) return;
+  const current = view();
+  if (current) { current.inert = false; current.removeAttribute("aria-hidden"); }
+  nameDialog();
+  if (before !== null && next !== before && panel.value) {
+    const focused = panel.value.ownerDocument.activeElement;
+    if (!focused || focused === document.body || panel.value.contains(focused)) (current?.querySelector<HTMLElement>(focusable) ?? panel.value).focus({ preventScroll: true });
+  }
+}, { flush: "pre" });
+useOverlay(active, panel, () => emit("close"));
+useExitInteractivity(active, [panel, backdrop], [layer]);
+onMounted(() => { mounted.value = true; void nextTick(nameDialog); });
+onUpdated(nameDialog);
+</script>
+<template><Teleport v-if="mounted" to="body"><AnimatePresence :initial="false">
+  <motion.button v-if="active" :ref="node => backdrop = resolveElement<HTMLElement>(node)" key="backdrop" type="button" aria-label="Close modal" :tabindex="-1"
+    :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" :exit="{ opacity: 0 }" :transition="{ duration: 0.2, ease: EASE_OUT }" @click="emit('close')"
+    class="pointer-events-auto fixed inset-0 z-[80] bg-background/5 [backdrop-filter:blur(14px)_saturate(140%)] [-webkit-backdrop-filter:blur(14px)_saturate(140%)]" />
+  <div v-if="active" key="panel-layer" ref="layer" :class="cn('pointer-events-none fixed inset-4 z-[80] flex justify-center', placement === 'bottom' ? 'items-end pb-4' : 'items-center')">
+    <motion.div :ref="node => panel = resolveElement<HTMLElement>(node)" role="dialog" aria-modal="true" :aria-label="label" :aria-labelledby="label ? undefined : headingId" :tabindex="-1" layout
+      :initial="{ opacity: 0, y: reduced ? 0 : placement === 'bottom' ? 40 : 20, scale: reduced ? 1 : 0.97 }" :animate="{ opacity: 1, y: 0, scale: 1 }"
+      :exit="{ opacity: 0, y: reduced ? 0 : placement === 'bottom' ? 40 : 20, scale: reduced ? 1 : 0.98, transition: { duration: 0.18, ease: EASE_OUT } }" :transition="SPRING_PANEL" v-bind="$attrs"
+      :class="cn('pointer-events-auto relative w-full max-w-sm overflow-hidden rounded-3xl border border-border bg-background shadow-xl outline-none will-change-transform', $attrs.class as string)">
+      <motion.div layout="position" class="p-5"><AnimatePresence mode="popLayout" :initial="false"><motion.div :key="viewId!" :data-view="viewId"
+        :initial="reduced ? { opacity: 0 } : { opacity: 0, y: 8, filter: 'blur(4px)' }"
+        :animate="reduced ? { opacity: 1, transition: { duration: 0.18, ease: EASE_OUT } } : { opacity: 1, y: 0, filter: 'blur(0px)', transition: { duration: 0.24, ease: EASE_OUT } }"
+        :exit="reduced ? { opacity: 0, transition: { duration: 0.14, ease: EASE_OUT } } : { opacity: 0, y: -8, filter: 'blur(4px)', transition: { duration: 0.16, ease: EASE_OUT } }"><slot :view-id="viewId" /></motion.div></AnimatePresence></motion.div>
+    </motion.div>
+  </div>
+</AnimatePresence></Teleport></template>

package/src/motion/morphing-modal/src/api-types.ts

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

package/src/motion/multi-select/index.ts

@@ -0,0 +1,21 @@
+export { default as MultiSelect } from "./src/MultiSelect.vue";
+export { default as MultiSelectTrigger } from "./src/MultiSelectTrigger.vue";
+export { default as MultiSelectValue } from "./src/MultiSelectValue.vue";
+export { default as MultiSelectContent } from "./src/MultiSelectContent.vue";
+export { default as MultiSelectItem } from "./src/MultiSelectItem.vue";
+export { default as MultiSelectInput } from "./src/MultiSelectInput.vue";
+export { default as MultiSelectEmpty } from "./src/MultiSelectEmpty.vue";
+export { default as MultiSelectList } from "./src/MultiSelectList.vue";
+export { default as MultiSelectGroup } from "./src/MultiSelectGroup.vue";
+export { default as MultiSelectLabel } from "./src/MultiSelectLabel.vue";
+export { default as MultiSelectSeparator } from "./src/MultiSelectSeparator.vue";
+
+export type * from "./src/api-types";
+export {
+  MultiSelectContext,
+  MultiSelectGroupContext,
+  mergeRefs,
+  useMultiSelectContext,
+} from "../_combobox/controller";
+
+export type * from "./src/public-types";

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { provide } from "vue";
+import {
+  createSearchController,
+  MultiSelectContext,
+} from "../../_combobox/controller";
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string[];
+    defaultValue?: string[];
+    open?: boolean;
+    defaultOpen?: boolean;
+    query?: string;
+    defaultQuery?: string;
+    disabled?: boolean;
+    filter?: (value: string, query: string, keywords: string[]) => boolean;
+  }>(),
+  { open: undefined, defaultOpen: false, defaultQuery: "" },
+);
+const emit = defineEmits([
+  "update:modelValue",
+  "change",
+  "update:open",
+  "update:query",
+]);
+const state = createSearchController(props, emit, true);
+provide(MultiSelectContext, state);
+</script>
+<template>
+  <div class="relative">
+    <slot
+      :value="state.value.value"
+      :open="state.open.value"
+      :query="state.query.value"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import SearchSurface from "../../_combobox/SearchSurface.vue";
+import { useSearchContext } from "../../_combobox/controller";
+const props = withDefaults(
+  defineProps<{
+    side?: "top" | "bottom";
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+    avoidCollisions?: boolean;
+  }>(),
+  { side: "bottom", align: "start", sideOffset: 6, avoidCollisions: true },
+);
+const surface = useSearchContext(true, "MultiSelectContent");
+</script>
+<template>
+  <SearchSurface :context="surface" v-bind="props" data-multi-select-content=""
+    ><slot
+  /></SearchSurface>
+</template>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useSearchContext } from "../../_combobox/controller";
+const state = useSearchContext(true, "MultiSelectEmpty");
+const empty = computed(() => state.visibleCount.value === 0);
+</script>
+<template>
+  <div
+    v-if="empty"
+    role="status"
+    class="px-3 py-8 text-center text-sm text-muted-foreground"
+  >
+    <slot>No options found.</slot>
+  </div>
+</template>

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { computed, provide, useId } from "vue";
+import {
+  useSearchContext,
+  MultiSelectGroupContext,
+} from "../../_combobox/controller";
+const id = useId();
+const state = useSearchContext(true, "MultiSelectGroup");
+provide(MultiSelectGroupContext, id);
+const hidden = computed(() => !state.hasVisibleItems(id));
+</script>
+<template>
+  <fieldset :hidden="hidden" class="m-0 min-w-0 border-0 p-0 py-0.5">
+    <slot />
+  </fieldset>
+</template>

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

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import { Search } from "lucide-vue-next";
+import { computed } from "vue";
+import { cn } from "../../../lib/utils";
+import { useSearchContext } from "../../_combobox/controller";
+withDefaults(
+  defineProps<{
+    placeholder?: string;
+    wrapperClassName?: string;
+    showIcon?: boolean;
+  }>(),
+  { placeholder: "Search…", showIcon: false },
+);
+const state = useSearchContext(true, "MultiSelectInput");
+const displayed = computed(() => state.query.value);
+let composing = false;
+function beginComposition() {
+  composing = true;
+}
+function endComposition() {
+  composing = false;
+}
+function input(event: Event) {
+  state.setOpen(true);
+  state.setQuery((event.target as HTMLInputElement).value);
+}
+function key(event: KeyboardEvent) {
+  if (!composing && !event.isComposing) state.keydown(event);
+}
+function pointer(event: PointerEvent) {
+  if (event.defaultPrevented || state.disabled.value || state.open.value)
+    return;
+  state.setOpen(true);
+}
+</script>
+<template>
+  <div
+    :class="cn('flex min-w-20 flex-1 items-center gap-1.5', wrapperClassName)"
+  >
+    <Search
+      v-if="showIcon"
+      aria-hidden="true"
+      class="size-3.5 text-muted-foreground"
+    />
+    <input
+      v-bind="$attrs"
+      :ref="(el) => (state.inputRef.value = el as HTMLInputElement)"
+      :id="state.inputId"
+      role="combobox"
+      :aria-label="($attrs['aria-label'] as string) ?? 'Search options'"
+      aria-autocomplete="list"
+      :aria-expanded="state.open.value"
+      :aria-controls="state.listId"
+      :aria-activedescendant="
+        state.open.value ? state.activeItemId.value : undefined
+      "
+      autocomplete="off"
+      :disabled="state.disabled.value"
+      :value="displayed"
+      :placeholder="state.values.value.length ? '' : placeholder"
+      @pointerdown="pointer"
+      @focus="state.setOpen(true)"
+      @click="state.setOpen(true)"
+      @input="input"
+      @keydown="key"
+      @compositionstart="beginComposition"
+      @compositionend="endComposition"
+      :class="
+        cn(
+          'h-7 min-w-12 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed',
+          $attrs.class as string,
+        )
+      "
+    />
+  </div>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import SearchOption from "../../combobox/src/SearchOption.vue";
+withDefaults(
+  defineProps<{
+    value: string;
+    textValue?: string;
+    label?: string;
+    keywords?: string[];
+    disabled?: boolean;
+  }>(),
+  { keywords: () => [] },
+);
+const emit = defineEmits<{ select: [value: string] }>();
+</script>
+<template>
+  <SearchOption
+    :multiple="true"
+    :value="value"
+    :text-value="textValue"
+    :label="label"
+    :keywords="keywords"
+    :disabled="disabled"
+    @select="emit('select', $event)"
+    ><slot>{ textValue ?? label ?? value }</slot></SearchOption
+  >
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { inject } from "vue";
+import { MultiSelectGroupContext } from "../../_combobox/controller";
+const group = inject(MultiSelectGroupContext, undefined);
+</script>
+<template>
+  <legend
+    v-if="group"
+    class="w-full px-2 py-1.5 text-[0.68rem] font-medium uppercase tracking-[0.12em] text-muted-foreground"
+  >
+    <slot />
+  </legend>
+  <div
+    v-else
+    class="w-full px-2 py-1.5 text-[0.68rem] font-medium uppercase tracking-[0.12em] text-muted-foreground"
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useSearchContext } from "../../_combobox/controller";
+const props = withDefaults(defineProps<{ ariaLabel?: string }>(), {
+  ariaLabel: "Options",
+});
+const state = useSearchContext(true, "MultiSelectList");
+</script>
+<template>
+  <div
+    :id="state.listId"
+    role="listbox"
+    :aria-label="props.ariaLabel"
+    :aria-multiselectable="true"
+    class="relative isolate max-h-64 overflow-y-auto overscroll-contain p-1.5 [-ms-overflow-style:none] scrollbar-none [&::-webkit-scrollbar]:hidden"
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+  <div aria-hidden="true" class="-mx-1 my-1 h-px bg-border"></div>
+</template>

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ChevronsUpDown } from "lucide-vue-next";
+import { cn } from "../../../lib/utils";
+import { useSearchContext } from "../../_combobox/controller";
+const state = useSearchContext(true, "MultiSelectTrigger");
+function activate(event: PointerEvent) {
+  const target = event.target instanceof Element ? event.target : null;
+  if (
+    event.defaultPrevented ||
+    state.disabled.value ||
+    target === state.inputRef.value ||
+    target?.closest("[data-multi-select-remove]")
+  )
+    return;
+  event.preventDefault();
+  state.setOpen(true);
+  state.focusInput();
+}
+</script>
+<template>
+  <div
+    :ref="(el) => (state.triggerRef.value = el as HTMLElement)"
+    :id="state.triggerId"
+    :data-state="state.open.value ? 'open' : 'closed'"
+    @pointerdown="activate"
+    :class="
+      cn(
+        'relative z-20 flex min-h-11 w-full min-w-52 cursor-text items-center gap-2 px-2.5 py-1.5 rounded-xl border border-border bg-transparent text-sm text-foreground transition-[border-color] hover:border-(--color-border-strong) focus-within:ring-2 focus-within:ring-foreground/20',
+        state.disabled.value && 'pointer-events-none opacity-50',
+      )
+    "
+  >
+    <div class="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
+      <slot />
+    </div>
+    <ChevronsUpDown
+      aria-hidden="true"
+      class="size-4 shrink-0 text-muted-foreground"
+    />
+  </div>
+</template>