@orvui/vue 0.0.0-stage → 0.1.0

package/src/motion/center-morph-modal/index.ts

@@ -0,0 +1,6 @@
+export { default as CenterMorphModal } from "./src/CenterMorphModal.vue";
+export { default as CenterMorphModalTrigger } from "./src/CenterMorphModalTrigger.vue";
+export { default as CenterMorphModalClose } from "./src/CenterMorphModalClose.vue";
+export { default as CenterMorphModalContent } from "./src/CenterMorphModalContent.vue";
+
+export type * from "./src/api-types";

package/src/motion/center-morph-modal/src/CenterMorphModal.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { provide, useId } from "vue";
+import { useMotionState } from "../../state";
+import type { CenterModalContext } from "./context";
+const props = withDefaults(defineProps<{ open?: boolean; defaultOpen?: boolean }>(), { open: undefined, defaultOpen: false });
+const emit = defineEmits(["update:open"]);
+const opened = useMotionState(props, emit, "open", props.defaultOpen), instanceId = useId();
+const context: CenterModalContext = { open: opened, triggerId: `${instanceId}-trigger`, contentId: `${instanceId}-content` };
+provide("orvui-center-modal", context);
+</script>
+<template><slot :open="opened" /></template>

package/src/motion/center-morph-modal/src/CenterMorphModalClose.vue

@@ -0,0 +1,10 @@
+<script lang="ts">
+import { defineComponent, inject } from "vue";
+import { modalControl } from "./control";
+import type { CenterModalContext } from "./context";
+export default defineComponent({ name: "CenterMorphModalClose", inheritAttrs: false, setup(_, { attrs, slots }) {
+  const state = inject<CenterModalContext>("orvui-center-modal");
+  if (!state) throw new Error("CenterMorphModalClose must be inside CenterMorphModal");
+  return () => modalControl(slots.default?.() ?? [], { ...attrs, onClick(event: MouseEvent) { if (!event.defaultPrevented) state.open.value = false; } });
+} });
+</script>

package/src/motion/center-morph-modal/src/CenterMorphModalContent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import { inject, onMounted, ref } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { X } from "lucide-vue-next";
+import { cn } from "../../../lib/utils";
+import { EASE_OUT } from "../../../lib/ease";
+import { resolveElement, useOverlay, useReducedMotion } from "../../../lib/composables";
+import { useExitInteractivity } from "../../_overlay/interactivity";
+import type { CenterModalContext } from "./context";
+const props = withDefaults(defineProps<{
+  ariaLabel: string; ariaDescribedBy?: string; dismissible?: boolean; showCloseButton?: boolean; closeButtonLabel?: string; backdropClassName?: string;
+}>(), { dismissible: true, showCloseButton: true, closeButtonLabel: "Close modal" });
+const state = inject<CenterModalContext>("orvui-center-modal");
+if (!state) throw new Error("CenterMorphModalContent must be inside CenterMorphModal");
+const mounted = ref(false), reduced = useReducedMotion();
+const panel = ref<HTMLElement | null>(null), backdrop = ref<HTMLElement | null>(null), layer = ref<HTMLElement | null>(null);
+const folded = "inset(48% 48% 48% 48% round 30px)", unfolded = "inset(0% 0% 0% 0% round 30px)";
+function dismiss() { if (props.dismissible) state!.open.value = false; }
+useOverlay(state.open, panel, dismiss);
+useExitInteractivity(state.open, [panel, backdrop], [layer]);
+onMounted(() => { mounted.value = true; });
+</script>
+<template><Teleport v-if="mounted" to="body"><AnimatePresence>
+  <motion.button v-if="state.open.value" :ref="node => backdrop = resolveElement<HTMLElement>(node)" key="backdrop" type="button" aria-label="Dismiss modal" :tabindex="-1" :disabled="!dismissible"
+    :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" :exit="{ opacity: 0 }" :transition="{ duration: reduced ? 0.1 : 0.28, ease: EASE_OUT }" @click="dismiss"
+    :class="cn('pointer-events-auto fixed inset-0 z-[100] h-full w-full cursor-default bg-background/10 backdrop-blur-sm', backdropClassName)" />
+  <div v-if="state.open.value" key="surface" ref="layer" class="pointer-events-none fixed inset-4 z-[100] flex items-center justify-center overflow-y-auto drop-shadow-2xl"><div class="flex w-full flex-col items-center py-8">
+    <motion.div :ref="node => panel = resolveElement<HTMLElement>(node)" :id="state.contentId" role="dialog" aria-modal="true" :aria-label="ariaLabel" :aria-describedby="ariaDescribedBy" :tabindex="-1"
+      :initial="reduced ? { opacity: 0, clipPath: unfolded } : { opacity: 1, clipPath: folded }" :animate="{ opacity: 1, clipPath: unfolded }" :exit="reduced ? { opacity: 0, clipPath: unfolded } : { opacity: 1, clipPath: folded }"
+      :transition="reduced ? { duration: 0.14, ease: EASE_OUT } : { duration: 0.43, ease: [0.2, 0, 0.2, 1] }" v-bind="$attrs"
+      :class="cn('pointer-events-auto relative w-full max-w-[26rem] origin-center overflow-hidden rounded-[30px] border border-border bg-background will-change-[clip-path]', $attrs.class as string)">
+      <slot /><motion.button v-if="showCloseButton" type="button" :aria-label="closeButtonLabel" @click="state.open.value = false"
+        :initial="reduced ? { opacity: 0 } : { opacity: 0, scale: 0.8 }" :animate="{ opacity: 1, scale: 1 }" :exit="{ opacity: 0, scale: reduced ? 1 : 0.88, transition: { duration: 0.1, ease: EASE_OUT } }"
+        :transition="{ delay: reduced ? 0 : 0.16, duration: reduced ? 0.12 : 0.2, ease: EASE_OUT }"
+        class="absolute right-4 top-4 inline-flex h-8 w-8 items-center justify-center rounded-full bg-foreground/[0.05] text-muted-foreground transition-colors hover:bg-foreground/[0.08] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"><X class="h-4 w-4" aria-hidden="true" /></motion.button>
+    </motion.div>
+  </div></div>
+</AnimatePresence></Teleport></template>

package/src/motion/center-morph-modal/src/CenterMorphModalTrigger.vue

@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent, inject } from "vue";
+import { modalControl } from "./control";
+import type { CenterModalContext } from "./context";
+export default defineComponent({ name: "CenterMorphModalTrigger", inheritAttrs: false, setup(_, { attrs, slots }) {
+  const state = inject<CenterModalContext>("orvui-center-modal");
+  if (!state) throw new Error("CenterMorphModalTrigger must be inside CenterMorphModal");
+  return () => modalControl(slots.default?.() ?? [], {
+    ...attrs, id: state.triggerId, "aria-haspopup": "dialog", "aria-expanded": state.open.value, "aria-controls": state.open.value ? state.contentId : undefined,
+    onClick(event: MouseEvent) { if (!event.defaultPrevented) state.open.value = !state.open.value; },
+  });
+} });
+</script>

package/src/motion/center-morph-modal/src/api-types.ts

@@ -0,0 +1,13 @@
+// Vue public prop types, derived from the actual components.
+export type CenterMorphModalCloseProps = InstanceType<
+  (typeof import("./CenterMorphModalClose.vue"))["default"]
+>["$props"];
+export type CenterMorphModalContentProps = InstanceType<
+  (typeof import("./CenterMorphModalContent.vue"))["default"]
+>["$props"];
+export type CenterMorphModalProps = InstanceType<
+  (typeof import("./CenterMorphModal.vue"))["default"]
+>["$props"];
+export type CenterMorphModalTriggerProps = InstanceType<
+  (typeof import("./CenterMorphModalTrigger.vue"))["default"]
+>["$props"];

package/src/motion/center-morph-modal/src/context.ts

@@ -0,0 +1,2 @@
+import type { WritableComputedRef } from "vue";
+export interface CenterModalContext { open: WritableComputedRef<boolean>; triggerId: string; contentId: string }

package/src/motion/center-morph-modal/src/control.ts

@@ -0,0 +1,9 @@
+import { Comment, Fragment, Text, cloneVNode, h, isVNode, type VNode } from "vue";
+function content(nodes: VNode[]): VNode[] {
+  return nodes.flatMap(node => node.type === Comment ? [] : node.type === Fragment && Array.isArray(node.children) ? content(node.children.filter(isVNode)) : [node]);
+}
+export function modalControl(nodes: VNode[], attributes: Record<string, unknown>) {
+  const children = content(nodes);
+  const only = children.length === 1 && children[0]!.type !== Text ? children[0]! : h("button", { type: "button" }, children);
+  return cloneVNode(only, attributes, true);
+}

package/src/motion/checkbox/index.ts

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

package/src/motion/checkbox/src/Checkbox.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import { computed, useAttrs, useId } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { EASE_OUT, SPRING_PRESS } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import { useMotionState } from "../../state";
+
+const props = withDefaults(defineProps<{
+  modelValue?: boolean; defaultValue?: boolean; disabled?: boolean; indeterminate?: boolean;
+  label?: string; description?: string; id?: string; ariaLabel?: string; ariaDescribedBy?: string;
+}>(), { modelValue: undefined, defaultValue: false });
+const emit = defineEmits(["update:modelValue", "change"]);
+const checked = useMotionState(props, emit, "modelValue", props.defaultValue);
+const generatedId = useId(), attrs = useAttrs(), reduced = useReducedMotion();
+const controlId = computed(() => props.id ?? generatedId);
+const accessibleName = computed(() => props.ariaLabel ?? attrs["aria-label"] as string | undefined);
+const labelId = computed(() => props.description && props.label && !accessibleName.value ? `${controlId.value}-label` : undefined);
+const descriptionIds = computed(() => [props.ariaDescribedBy ?? attrs["aria-describedby"], props.description ? `${controlId.value}-description` : undefined].filter(Boolean).join(" ") || undefined);
+const hasMark = computed(() => checked.value || props.indeterminate);
+const state = computed(() => checked.value ? "checked" : props.indeterminate ? "indeterminate" : "unchecked");
+const mark = computed(() => props.indeterminate ? "M6 12h12" : "M5 13l4 4L19 7");
+function toggle(event: MouseEvent) { if (!props.disabled && !event.defaultPrevented) checked.value = !checked.value; }
+</script>
+
+<template>
+  <label :for="controlId" :style="$attrs.style as any"
+    :class="cn('inline-flex gap-3', description ? 'items-start' : 'items-center', disabled ? 'cursor-not-allowed' : 'cursor-pointer', $attrs.class as string)">
+    <motion.button v-bind="{ ...$attrs, class: undefined, style: undefined }" :id="controlId"
+      type="button" role="checkbox" :aria-checked="indeterminate ? 'mixed' : checked"
+      :aria-label="accessibleName" :aria-labelledby="labelId" :aria-describedby="descriptionIds"
+      :disabled="disabled" :data-state="state" @click="toggle"
+      :while-press="reduced || disabled ? undefined : { scale: 0.92 }" :transition="SPRING_PRESS"
+      :class="cn('inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-2 outline-none transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-60', hasMark ? 'border-primary bg-primary text-primary-foreground' : 'border-muted-foreground/65 bg-background hover:border-muted-foreground')">
+      <AnimatePresence :initial="false">
+        <motion.svg v-if="hasMark" :key="indeterminate ? 'indeterminate' : 'checked'"
+          width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" :stroke-width="3"
+          stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
+          :initial="reduced ? { opacity: 1 } : { opacity: 0, scale: 0.5 }"
+          :animate="reduced ? { opacity: 1 } : { opacity: 1, scale: 1 }"
+          :exit="reduced ? { opacity: 0 } : { opacity: 0, scale: 0.5, filter: 'blur(4px)' }"
+          :transition="reduced ? { duration: 0 } : { duration: 0.16, ease: EASE_OUT }">
+          <title>{{ indeterminate ? 'Partially selected' : 'Selected' }}</title>
+          <motion.path :d="mark" :initial="{ pathLength: reduced ? 1 : 0 }" :animate="{ pathLength: 1 }"
+            :transition="reduced ? { duration: 0 } : { duration: indeterminate ? 0.2 : 0.3, ease: EASE_OUT, delay: 0.04 }" />
+        </motion.svg>
+      </AnimatePresence>
+    </motion.button>
+    <span v-if="label || description" :class="cn('flex min-w-0 flex-col gap-0.5 select-none', disabled && 'opacity-60')">
+      <span v-if="label" :id="labelId" :class="cn('text-sm text-foreground', description && 'leading-4')">{{ label }}</span>
+      <span v-if="description" :id="controlId + '-description'" class="text-xs text-muted-foreground">{{ description }}</span>
+    </span>
+  </label>
+</template>

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

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

package/src/motion/collapsible/index.ts

@@ -0,0 +1,9 @@
+export { default as Collapsible } from "./src/Collapsible.vue";
+export { default as CollapsibleTrigger } from "./src/CollapsibleTrigger.vue";
+export { default as CollapsibleContent } from "./src/CollapsibleContent.vue";
+export { default as CollapsibleIndicator } from "./src/CollapsibleIndicator.vue";
+export * from "./src/useCollapsible";
+
+export type * from "./src/api-types";
+
+export type * from "./src/public-types";

package/src/motion/collapsible/src/Collapsible.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed, provide, ref, useId } from "vue";
+import { motion } from "motion-v";
+import { SPRING_LAYOUT } from "../../../lib/ease";
+import { cn } from "../../../lib/utils";
+import { useReducedMotion } from "../../../lib/composables";
+import { useMotionState } from "../../state";
+import type { CollapsibleContext } from "./context";
+const props = withDefaults(defineProps<{ open?: boolean; defaultOpen?: boolean; disabled?: boolean; contentClassName?: string }>(), { open: undefined, defaultOpen: false });
+const emit = defineEmits(["update:open"]);
+const opened = useMotionState(props, emit, "open", props.defaultOpen);
+const reduced = useReducedMotion();
+function setOpen(requested: boolean) { if (!props.disabled && opened.value !== requested) opened.value = requested; }
+function toggle() { setOpen(!opened.value); }
+const state: CollapsibleContext = { open: opened, id: useId(), triggerRef: ref(null), reduce: reduced, disabled: computed(() => props.disabled), setOpen, toggle };
+provide("orvui-collapsible", state);
+</script>
+<template>
+  <motion.div data-slot="collapsible" :data-state="opened ? 'open' : 'closed'" :data-disabled="disabled || undefined"
+    class="relative w-full" :layout="!reduced" :transition="{ layout: SPRING_LAYOUT }" :style="{ originY: 0 }">
+    <motion.div :layout="reduced ? false : 'position'" :transition="{ layout: SPRING_LAYOUT }"
+      :style="{ originY: 0 }" :class="cn('min-w-0', contentClassName)"><slot :open="opened" :toggle="toggle" /></motion.div>
+  </motion.div>
+</template>

package/src/motion/collapsible/src/CollapsibleContent.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { motion } from "motion-v";
+import { EASE_OUT, SPRING_LAYOUT } from "../../../lib/ease";
+import { cn } from "../../../lib/utils";
+import { resolveElement } from "../../../lib/composables";
+import type { CollapsibleContext } from "./context";
+defineProps<{ contentClassName?: string }>();
+const state = inject<CollapsibleContext>("orvui-collapsible");
+if (!state) throw new Error("CollapsibleContent must be inside Collapsible");
+const surface = ref<HTMLElement | null>(null), inner = ref<HTMLElement | null>(null), height = ref(0);
+let observer: ResizeObserver | undefined;
+function measure() { height.value = inner.value?.offsetHeight ?? 0; }
+onMounted(() => {
+  measure();
+  if (typeof ResizeObserver !== "undefined" && inner.value) {
+    observer = new ResizeObserver(measure);
+    observer.observe(inner.value);
+  }
+});
+watch(state.open, opened => {
+  const element = surface.value;
+  if (!opened && element?.contains(element.ownerDocument.activeElement)) state.triggerRef.value?.focus({ preventScroll: true });
+}, { flush: "sync" });
+onBeforeUnmount(() => observer?.disconnect());
+</script>
+<template>
+  <motion.div :ref="node => surface = resolveElement<HTMLElement>(node)" :id="state.id + '-content'"
+    role="region" :aria-labelledby="state.id + '-trigger'" :aria-hidden="!state.open.value" :inert="!state.open.value"
+    data-slot="collapsible-content" :data-state="state.open.value ? 'open' : 'closed'" :initial="false"
+    :layout="!state.reduce.value" :transition="{ layout: SPRING_LAYOUT }"
+    :style="{ height: state.open.value ? (height ? `${height}px` : 'auto') : '1px', originY: 0 }" class="overflow-hidden">
+    <motion.div :ref="node => inner = resolveElement<HTMLElement>(node)" :layout="!state.reduce.value" :initial="false"
+      :style="{ originY: 0 }" :animate="{ opacity: state.open.value ? 1 : 0 }"
+      :transition="{ opacity: { duration: state.open.value ? 0.18 : 0.12, ease: EASE_OUT }, layout: SPRING_LAYOUT }"
+      :class="cn('flow-root', contentClassName)"><slot /></motion.div>
+  </motion.div>
+</template>

package/src/motion/collapsible/src/CollapsibleIndicator.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { inject } from "vue";
+import { motion } from "motion-v";
+import { ChevronDown } from "lucide-vue-next";
+import { SPRING_LAYOUT } from "../../../lib/ease";
+import type { CollapsibleContext } from "./context";
+const state = inject<CollapsibleContext>("orvui-collapsible");
+if (!state) throw new Error("CollapsibleIndicator must be inside Collapsible");
+</script>
+<template>
+  <motion.span aria-hidden="true" data-slot="collapsible-indicator" :initial="false"
+    :animate="{ transform: `rotate(${state.open.value ? 180 : 0}deg)` }" :transition="state.reduce.value ? { duration: 0 } : SPRING_LAYOUT"
+    class="ml-auto inline-flex shrink-0 items-center justify-center text-muted-foreground"><slot><ChevronDown class="size-4" /></slot></motion.span>
+</template>

package/src/motion/collapsible/src/CollapsibleTrigger.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import { cloneVNode, Comment, createVNode, defineComponent, inject } from "vue";
+import { motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { SPRING_LAYOUT } from "../../../lib/ease";
+import { resolveElement } from "../../../lib/composables";
+import type { CollapsibleContext } from "./context";
+export default defineComponent({
+  name: "CollapsibleTrigger", inheritAttrs: false,
+  props: { disabled: Boolean, asChild: Boolean },
+  setup(props, { attrs, slots }) {
+    const state = inject<CollapsibleContext>("orvui-collapsible");
+    if (!state) throw new Error("CollapsibleTrigger must be inside Collapsible");
+    return () => {
+      const content = slots.default?.().filter(node => node.type !== Comment) ?? [];
+      const child = props.asChild ? content[0] : undefined;
+      if (child && typeof child.type === "string" && child.type !== "button")
+        throw new Error("CollapsibleTrigger asChild requires a button or button component");
+      const disabled = !!(props.disabled || state.disabled.value || child?.props?.disabled);
+      const bindings = {
+        ...attrs, id: `${state.id}-trigger`, type: "button" as const, disabled,
+        "aria-expanded": state.open.value, "aria-controls": `${state.id}-content`,
+        "data-slot": "collapsible-trigger", "data-state": state.open.value ? "open" : "closed", "data-disabled": disabled || undefined,
+        ref: (node: unknown) => { state.triggerRef.value = resolveElement<HTMLButtonElement>(node); },
+        onClick(event: MouseEvent) { if (!disabled && !event.defaultPrevented) state.toggle(); },
+      };
+      if (child) return cloneVNode(child, bindings, true);
+      return createVNode(motion.button, {
+        ...bindings, layout: state.reduce.value ? false : "position", transition: { layout: SPRING_LAYOUT },
+        class: cn("orvui-collapsible-trigger flex min-h-10 w-full items-center gap-3 rounded-xl px-3 py-2 text-left text-sm font-medium outline-none transition-colors hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", attrs.class as string),
+      }, { default: () => content });
+    };
+  },
+});
+</script>
+<style>
+.orvui-collapsible-trigger[data-state="open"] {
+  background-color: color-mix(in oklab, var(--primary) 4%, var(--background));
+}
+.orvui-collapsible-trigger[data-state="open"] [data-slot="collapsible-indicator"] {
+  color: var(--primary);
+}
+</style>

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

@@ -0,0 +1,13 @@
+// Vue public prop types, derived from the actual components.
+export type CollapsibleContentProps = InstanceType<
+  (typeof import("./CollapsibleContent.vue"))["default"]
+>["$props"];
+export type CollapsibleIndicatorProps = InstanceType<
+  (typeof import("./CollapsibleIndicator.vue"))["default"]
+>["$props"];
+export type CollapsibleProps = InstanceType<
+  (typeof import("./Collapsible.vue"))["default"]
+>["$props"];
+export type CollapsibleTriggerProps = InstanceType<
+  (typeof import("./CollapsibleTrigger.vue"))["default"]
+>["$props"];

package/src/motion/collapsible/src/context.ts

@@ -0,0 +1,10 @@
+import type { ComputedRef, Ref, WritableComputedRef } from "vue";
+export interface CollapsibleContext {
+  open: WritableComputedRef<boolean>;
+  id: string;
+  triggerRef: Ref<HTMLButtonElement | null>;
+  reduce: Ref<boolean>;
+  disabled: ComputedRef<boolean | undefined>;
+  setOpen(open: boolean): void;
+  toggle(): void;
+}

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

@@ -0,0 +1,7 @@
+import type { Ref, ComputedRef } from "vue";
+export interface CollapsibleState {
+  open: Ref<boolean>;
+  disabled: ComputedRef<boolean>;
+  setOpen: (open: boolean) => void;
+  toggle: () => void;
+}

package/src/motion/collapsible/src/useCollapsible.ts

@@ -0,0 +1,7 @@
+import { inject } from "vue";
+import type { CollapsibleContext } from "./context";
+export function useCollapsible() {
+  const state = inject<CollapsibleContext>("orvui-collapsible");
+  if (state === undefined) throw new Error("useCollapsible must be used within its provider");
+  return state;
+}

package/src/motion/color-picker/index.ts

@@ -0,0 +1,16 @@
+export { default as ColorPicker } from "./src/ColorPicker.vue";
+export { default as ColorPickerArea } from "./src/ColorPickerArea.vue";
+export { default as ColorPickerHue } from "./src/ColorPickerHue.vue";
+export { default as ColorPickerAlpha } from "./src/ColorPickerAlpha.vue";
+export { default as ColorPickerSwatch } from "./src/ColorPickerSwatch.vue";
+export { default as ColorPickerHexInput } from "./src/ColorPickerHexInput.vue";
+export { default as ColorPickerChannels } from "./src/ColorPickerChannels.vue";
+export { default as ColorPickerEyeDropper } from "./src/ColorPickerEyeDropper.vue";
+export { default as ColorPickerPresets } from "./src/ColorPickerPresets.vue";
+export { default as ColorPickerPreset } from "./src/ColorPickerPreset.vue";
+export { default as ColorPickerTrigger } from "./src/ColorPickerTrigger.vue";
+export { default as ColorPickerContent } from "./src/ColorPickerContent.vue";
+export * from "./src/color";
+export * from "./src/useColorPicker";
+
+export type * from "./src/api-types";

package/src/motion/color-picker/src/ChannelSlider.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { usePicker, useGlide, useColorDrag, keyStep } from "./context";
+import ColorThumb from "./ColorThumb.vue";
+const props = defineProps<{
+  value: number;
+  max: number;
+  label: string;
+  valueText: string;
+  background: string;
+  thumbColor: string;
+}>();
+const emit = defineEmits<{ value: [value: number] }>();
+const state = usePicker();
+const drag = useColorDrag(
+  (fraction) => emit("value", fraction * props.max),
+  state.commit,
+  state.disabled,
+);
+const rail = drag.rail;
+const glide = useGlide(computed(() => (props.value / props.max) * 100));
+function key(event: KeyboardEvent) {
+  const step = keyStep(event);
+  if (state.disabled.value || !step) return;
+  event.preventDefault();
+  emit(
+    "value",
+    step === "min"
+      ? 0
+      : step === "max"
+        ? props.max
+        : Math.round(props.value) + step.delta,
+  );
+  state.commit();
+}
+</script>
+<template>
+  <div
+    :class="[
+      'relative h-3.5 w-full touch-none select-none rounded-full',
+      state.disabled.value ? 'cursor-not-allowed' : 'cursor-pointer',
+    ]"
+    :style="{ background }"
+    @pointerdown="drag.down"
+    @pointermove="drag.move"
+    @pointerup="drag.end"
+    @pointercancel="drag.end"
+  >
+    <div
+      aria-hidden="true"
+      class="pointer-events-none absolute inset-0 rounded-full ring-1 ring-black/10 ring-inset"
+    />
+    <div ref="rail" class="absolute inset-y-0 right-[9px] left-[9px]">
+      <ColorThumb
+        :dragging="drag.dragging.value"
+        :color="thumbColor"
+        :glide="glide.spring"
+        :x="glide.offset"
+        :set-thumb="(node) => (drag.thumb.value = node)"
+        role="slider"
+        :tabindex="state.disabled.value ? -1 : 0"
+        :aria-label="label"
+        aria-orientation="horizontal"
+        :aria-valuemin="0"
+        :aria-valuemax="max"
+        :aria-valuenow="Math.round(value)"
+        :aria-valuetext="valueText"
+        :aria-disabled="state.disabled.value || undefined"
+        @keydown="key"
+      />
+    </div>
+  </div>
+</template>

package/src/motion/color-picker/src/ColorPicker.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed, provide, ref, useId, watch } from "vue";
+import {
+  parseHex,
+  formatHex,
+  rgbaToHsva,
+  hsvaToRgba,
+  type Hsva,
+} from "./color";
+import type { ColorContext } from "./context";
+import ColorPickerArea from "./ColorPickerArea.vue";
+import ColorPickerHue from "./ColorPickerHue.vue";
+import ColorPickerAlpha from "./ColorPickerAlpha.vue";
+import ColorPickerHexInput from "./ColorPickerHexInput.vue";
+import ColorPickerSwatch from "./ColorPickerSwatch.vue";
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+    value?: string;
+    defaultValue?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    alpha?: boolean;
+    disabled?: boolean;
+    name?: string;
+    form?: string;
+  }>(),
+  { open: undefined, defaultValue: "#3478f6", defaultOpen: false, alpha: true },
+);
+const emit = defineEmits([
+  "update:modelValue",
+  "valueChange",
+  "change",
+  "valueCommit",
+  "update:open",
+  "openChange",
+]);
+const id = useId();
+const supplied = computed(() => props.modelValue ?? props.value);
+const draftCode = ref(supplied.value ?? props.defaultValue);
+const editing = ref(
+  rgbaToHsva(parseHex(draftCode.value) ?? { r: 0, g: 0, b: 0, a: 1 }),
+);
+const expanded = ref(props.defaultOpen);
+const anchor = ref<HTMLElement | null>(null);
+const open = computed({
+  get: () => props.open ?? expanded.value,
+  set: (next: boolean) => {
+    if (next === open.value) return;
+    if (props.open === undefined) expanded.value = next;
+    emit("update:open", next);
+    emit("openChange", next);
+  },
+});
+function reconcile() {
+  const incoming = supplied.value;
+  if (incoming === undefined || incoming === draftCode.value) return;
+  const parsed = parseHex(incoming);
+  if (parsed) editing.value = rgbaToHsva(parsed, editing.value);
+  draftCode.value = incoming;
+}
+watch(supplied, reconcile, { flush: "sync" });
+watch(draftCode, reconcile, { flush: "post" });
+const displayHsva = computed(() =>
+  !props.alpha && editing.value.a !== 1
+    ? { ...editing.value, a: 1 }
+    : editing.value,
+);
+const rgba = computed(() => hsvaToRgba(displayHsva.value));
+const hex = computed(() => formatHex(rgba.value));
+function update(patch: Partial<Hsva>) {
+  if (props.disabled) return;
+  const limits: Record<keyof Hsva, number> = { h: 360, s: 100, v: 100, a: 1 };
+  const next = Object.fromEntries(
+    (Object.keys(limits) as (keyof Hsva)[]).map((key) => [
+      key,
+      Math.min(
+        limits[key],
+        Math.max(
+          0,
+          Number.isFinite(patch[key]) ? patch[key]! : editing.value[key],
+        ),
+      ),
+    ]),
+  ) as Hsva;
+  if (!props.alpha) next.a = 1;
+  const code = formatHex(hsvaToRgba(next));
+  const changed = code !== hex.value;
+  editing.value = next;
+  draftCode.value = code;
+  if (changed) {
+    emit("update:modelValue", code);
+    emit("valueChange", code);
+    emit("change", code);
+  }
+}
+function commit() {
+  if (!props.disabled) emit("valueCommit", hex.value);
+}
+function setColor(code: string) {
+  const parsed = parseHex(code);
+  if (parsed) {
+    update(rgbaToHsva(parsed, editing.value));
+    commit();
+  }
+}
+provide<ColorContext>("orvui-color-picker", {
+  id,
+  hsva: displayHsva,
+  rgba,
+  hex,
+  open,
+  anchor,
+  alpha: computed(() => props.alpha),
+  disabled: computed(() => props.disabled),
+  update,
+  setColor,
+  commit,
+});
+</script>
+<template>
+  <fieldset
+    :disabled="disabled"
+    :form="form"
+    :class="[
+      'relative flex w-full min-w-0 max-w-72 flex-col gap-3 border-0 p-0 has-[>[data-color-picker-trigger]]:w-fit has-[>[data-color-picker-trigger]]:self-start',
+      disabled && 'opacity-50',
+    ]"
+  >
+    <slot :hex="hex" :hsva="displayHsva" :set-color="setColor"
+      ><ColorPickerArea /><ColorPickerHue /><ColorPickerAlpha />
+      <div class="flex gap-2">
+        <ColorPickerSwatch /><ColorPickerHexInput /></div></slot
+    ><input v-if="name" type="hidden" :name="name" :value="hex" :form="form" />
+  </fieldset>
+</template>

package/src/motion/color-picker/src/ColorPickerAlpha.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { usePicker, CHECKERBOARD } from "./context";
+import ChannelSlider from "./ChannelSlider.vue";
+withDefaults(defineProps<{ label?: string }>(), { label: "Opacity" });
+const state = usePicker();
+const rgb = computed(
+  () => `${state.rgba.value.r} ${state.rgba.value.g} ${state.rgba.value.b}`,
+);
+function change(percent: number) {
+  state.update({ a: Math.round(percent) / 100 });
+}
+</script>
+<template>
+  <ChannelSlider
+    v-if="state.alpha.value"
+    :value="state.hsva.value.a * 100"
+    :max="100"
+    :label="label"
+    :value-text="`${Math.round(state.hsva.value.a * 100)}%`"
+    :background="`linear-gradient(to right, rgb(${rgb} / 0), rgb(${rgb})), ${CHECKERBOARD}`"
+    :thumb-color="`rgb(${rgb} / ${state.hsva.value.a})`"
+    @value="change"
+  />
+</template>