motion-ui-skill 2.0.0

package/components/motion/audio-player.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import { Play, Pause, Volume2, VolumeX, RotateCcw } from "lucide-react";
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useState, useEffect, useRef } from "react";
+import { SPRING_PRESS, SPRING_BOUNCE } from "@/lib/ease";
+import { useHaptic } from "@/lib/hooks/use-haptic";
+import { cn } from "@/lib/utils";
+
+export interface AudioPlayerProps extends HTMLMotionProps<"div"> {
+  src?: string;
+  title: string;
+  artist?: string;
+  durationSeconds?: number;
+  className?: string;
+}
+
+export function AudioPlayer({
+  src,
+  title,
+  artist,
+  durationSeconds = 184, // 3:04
+  className,
+  ...props
+}: AudioPlayerProps) {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [isMuted, setIsMuted] = useState(false);
+  const [duration, setDuration] = useState(durationSeconds);
+  const shouldReduceMotion = useReducedMotion();
+  const triggerHaptic = useHaptic();
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  useEffect(() => {
+    if (src) {
+      const audio = audioRef.current;
+      if (!audio) return;
+      if (isPlaying) {
+        void audio.play().catch(() => setIsPlaying(false));
+      } else {
+        audio.pause();
+      }
+      return;
+    }
+
+    if (isPlaying) {
+      timerRef.current = setInterval(() => {
+        setCurrentTime((prev) => {
+          if (prev >= durationSeconds) {
+            setIsPlaying(false);
+            return 0;
+          }
+          return prev + 1;
+        });
+      }, 1000);
+    } else {
+      if (timerRef.current) clearInterval(timerRef.current);
+    }
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [isPlaying, src, durationSeconds]);
+
+  useEffect(() => {
+    if (audioRef.current) audioRef.current.muted = isMuted;
+  }, [isMuted, src]);
+
+  useEffect(() => {
+    setDuration(durationSeconds);
+    setCurrentTime(0);
+    setIsPlaying(false);
+  }, [src, durationSeconds]);
+
+  const togglePlay = () => {
+    triggerHaptic(isPlaying ? "light" : "medium");
+    setIsPlaying((playing) => !playing);
+  };
+
+  const formatTime = (secs: number) => {
+    const m = Math.floor(secs / 60);
+    const s = Math.floor(secs % 60);
+    return `${m}:${s < 10 ? "0" : ""}${s}`;
+  };
+
+  const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+
+  // Waveform bars simulation
+  const waveformBars = [
+    24, 45, 78, 55, 90, 65, 40, 75, 95, 30, 60, 85, 45, 100, 70, 40, 65, 80, 50, 30,
+  ];
+
+  return (
+    <motion.div
+      className={cn(
+        "relative w-full max-w-sm rounded-2xl border border-border bg-card p-4 shadow-sm",
+        className
+      )}
+      {...props}
+    >
+      {/* Track info & Mute toggle */}
+      <div className="flex items-center justify-between pb-3">
+        <div className="min-w-0 flex-1 pr-2">
+          <h4 className="text-xs font-semibold text-foreground truncate">{title}</h4>
+          {artist && (
+            <p className="text-[11px] text-muted-foreground truncate">{artist}</p>
+          )}
+        </div>
+        <button
+          type="button"
+          aria-label={isMuted ? "Unmute audio" : "Mute audio"}
+          onClick={() => {
+            triggerHaptic("selection");
+            setIsMuted(!isMuted);
+          }}
+          className="rounded-lg p-1.5 text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors"
+        >
+          {isMuted ? <VolumeX className="size-4" /> : <Volume2 className="size-4" />}
+        </button>
+      </div>
+
+      {src && (
+        <audio
+          ref={audioRef}
+          src={src}
+          preload="metadata"
+          onLoadedMetadata={(e) => setDuration(e.currentTarget.duration || durationSeconds)}
+          onTimeUpdate={(e) => setCurrentTime(e.currentTarget.currentTime)}
+          onEnded={() => {
+            setIsPlaying(false);
+            setCurrentTime(0);
+          }}
+          className="sr-only"
+          aria-label={title}
+        />
+      )}
+
+      {/* Waveform graphic */}
+      <div className="flex items-center justify-between gap-1 h-10 px-1 my-2">
+        {waveformBars.map((height, i) => {
+          const barProgress = (i / waveformBars.length) * 100;
+          const isPassed = barProgress <= progress;
+
+          return (
+            <motion.div
+              key={i}
+              className={cn(
+                "w-1 rounded-full transition-colors",
+                isPassed ? "bg-primary" : "bg-muted"
+              )}
+              animate={
+                isPlaying && !shouldReduceMotion
+                  ? {
+                      height: [`${height * 0.4}%`, `${height}%`, `${height * 0.3}%`],
+                      transition: {
+                        duration: 0.6 + (i % 3) * 0.2,
+                        repeat: Infinity,
+                        repeatType: "reverse",
+                        ease: "easeInOut",
+                      },
+                    }
+                  : { height: `${height * 0.6}%` }
+              }
+            />
+          );
+        })}
+      </div>
+
+      {/* Progress scrub bar */}
+      <div className="space-y-1 pt-1">
+        <div
+          role="slider"
+          aria-label="Seek audio"
+          aria-valuemin={0}
+          aria-valuemax={duration}
+          aria-valuenow={currentTime}
+          tabIndex={0}
+          className="relative h-1.5 w-full bg-muted rounded-full overflow-hidden cursor-pointer"
+          onClick={(e) => {
+            const rect = e.currentTarget.getBoundingClientRect();
+            const clickX = e.clientX - rect.left;
+            const pct = Math.max(0, Math.min(1, clickX / rect.width));
+            const nextTime = pct * duration;
+            setCurrentTime(nextTime);
+            if (audioRef.current && src) audioRef.current.currentTime = nextTime;
+            triggerHaptic("selection");
+          }}
+          onKeyDown={(e) => {
+            if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+            e.preventDefault();
+            const nextTime = Math.max(
+              0,
+              Math.min(duration, currentTime + (e.key === "ArrowRight" ? 5 : -5))
+            );
+            setCurrentTime(nextTime);
+            if (audioRef.current && src) audioRef.current.currentTime = nextTime;
+          }}
+        >
+          <div
+            className="h-full bg-primary rounded-full transition-all"
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+        <div className="flex justify-between text-[10px] font-mono text-muted-foreground">
+          <span>{formatTime(currentTime)}</span>
+          <span>{formatTime(duration)}</span>
+        </div>
+      </div>
+
+      {/* Controls */}
+      <div className="flex items-center justify-center gap-3 pt-2">
+        <button
+          type="button"
+          aria-label="Restart audio"
+          onClick={() => {
+            setCurrentTime(0);
+            if (audioRef.current && src) audioRef.current.currentTime = 0;
+            triggerHaptic("selection");
+          }}
+          className="rounded-full p-2 text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors"
+        >
+          <RotateCcw className="size-4" />
+        </button>
+
+        <motion.button
+          type="button"
+          aria-label={isPlaying ? "Pause audio" : "Play audio"}
+          onClick={togglePlay}
+          whileTap={shouldReduceMotion ? undefined : { scale: 0.92 }}
+          transition={SPRING_PRESS}
+          className="size-11 rounded-full bg-primary text-primary-foreground flex items-center justify-center shadow-md hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <AnimatePresence mode="wait" initial={false}>
+            {isPlaying ? (
+              <motion.div
+                key="pause"
+                initial={{ scale: 0.7, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                exit={{ scale: 0.7, opacity: 0 }}
+                transition={SPRING_BOUNCE}
+              >
+                <Pause className="size-5 fill-current" />
+              </motion.div>
+            ) : (
+              <motion.div
+                key="play"
+                initial={{ scale: 0.7, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                exit={{ scale: 0.7, opacity: 0 }}
+                transition={SPRING_BOUNCE}
+                className="translate-x-0.5"
+              >
+                <Play className="size-5 fill-current" />
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </motion.button>
+      </div>
+    </motion.div>
+  );
+}

package/components/motion/autocomplete.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { Check, Loader2, Search, X } from "lucide-react";
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useState, useRef } from "react";
+import { SPRING_PANEL } from "@/lib/ease";
+import { useDismiss } from "@/lib/hooks/use-dismiss";
+import { useHaptic } from "@/lib/hooks/use-haptic";
+import { cn } from "@/lib/utils";
+
+export interface AutocompleteItem {
+  id: string;
+  label: string;
+  category?: string;
+}
+
+export interface AutocompleteProps extends Omit<HTMLMotionProps<"div">, "onChange"> {
+  items: AutocompleteItem[];
+  value?: string;
+  onChange?: (item: AutocompleteItem) => void;
+  placeholder?: string;
+  loading?: boolean;
+  className?: string;
+}
+
+export function Autocomplete({
+  items,
+  value = "",
+  onChange,
+  placeholder = "Search items...",
+  loading = false,
+  className,
+  ...props
+}: AutocompleteProps) {
+  const [query, setQuery] = useState(value);
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const shouldReduceMotion = useReducedMotion();
+  const triggerHaptic = useHaptic();
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  useDismiss(isOpen, () => setIsOpen(false), containerRef);
+
+  const filteredItems = items.filter((item) =>
+    item.label.toLowerCase().includes(query.toLowerCase())
+  );
+
+  const handleSelect = (item: AutocompleteItem) => {
+    setQuery(item.label);
+    setIsOpen(false);
+    triggerHaptic("selection");
+    onChange?.(item);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!isOpen && (e.key === "ArrowDown" || e.key === "Enter")) {
+      setIsOpen(true);
+      return;
+    }
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((prev) => (prev < filteredItems.length - 1 ? prev + 1 : 0));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((prev) => (prev > 0 ? prev - 1 : filteredItems.length - 1));
+    } else if (e.key === "Enter" && activeIndex >= 0 && filteredItems[activeIndex]) {
+      e.preventDefault();
+      handleSelect(filteredItems[activeIndex]);
+    } else if (e.key === "Escape") {
+      setIsOpen(false);
+    }
+  };
+
+  const highlightMatch = (text: string, match: string) => {
+    if (!match.trim()) return text;
+    const regex = new RegExp(`(${match.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
+    const parts = text.split(regex);
+    const normalizedMatch = match.toLowerCase();
+    return parts.map((part, i) =>
+      part.toLowerCase() === normalizedMatch ? (
+        <span key={i} className="font-semibold text-primary underline underline-offset-2">
+          {part}
+        </span>
+      ) : (
+        part
+      )
+    );
+  };
+
+  return (
+    <motion.div ref={containerRef} className={cn("relative w-full max-w-sm", className)} {...props}>
+      {/* Search Input Box */}
+      <div className="relative flex items-center rounded-xl border border-border bg-card shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all">
+        <Search className="absolute left-3 size-4 text-muted-foreground pointer-events-none" />
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            setIsOpen(true);
+            setActiveIndex(-1);
+          }}
+          onFocus={() => setIsOpen(true)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          className="w-full bg-transparent pl-9 pr-8 py-2 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none"
+        />
+
+        {loading ? (
+          <Loader2 className={cn("absolute right-3 size-4 text-muted-foreground", !shouldReduceMotion && "animate-spin")} />
+        ) : query ? (
+          <button
+            type="button"
+            onClick={() => {
+              setQuery("");
+              setIsOpen(false);
+              inputRef.current?.focus();
+            }}
+            className="absolute right-2.5 p-0.5 rounded text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <X className="size-3.5" />
+          </button>
+        ) : null}
+      </div>
+
+      {/* Autocomplete Results Dropdown */}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 4, scale: 0.98 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 2, scale: 0.98 }}
+            transition={SPRING_PANEL}
+            className="absolute left-0 top-full z-50 mt-1.5 w-full rounded-xl border border-border bg-card p-1 shadow-xl backdrop-blur-md max-h-60 overflow-y-auto"
+          >
+            {filteredItems.map((item, index) => {
+              const isActive = index === activeIndex;
+              const isSelected = item.label.toLowerCase() === query.toLowerCase();
+
+              return (
+                <button
+                  key={item.id}
+                  type="button"
+                  onClick={() => handleSelect(item)}
+                  onMouseEnter={() => setActiveIndex(index)}
+                  className={cn(
+                    "flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-xs transition-colors",
+                    isActive ? "bg-muted text-foreground" : "text-foreground hover:bg-muted/70",
+                    isSelected && "font-medium"
+                  )}
+                >
+                  <div className="flex flex-col">
+                    <span>{highlightMatch(item.label, query)}</span>
+                    {item.category && (
+                      <span className="text-[10px] text-muted-foreground">
+                        {item.category}
+                      </span>
+                    )}
+                  </div>
+                  {isSelected && <Check className="size-3.5 text-primary" />}
+                </button>
+              );
+            })}
+
+            {filteredItems.length === 0 && (
+              <div className="p-3 text-center text-xs text-muted-foreground">
+                No matching results found
+              </div>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  );
+}

package/components/motion/availability-scheduler/copy-menu.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { Check, Copy } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useState } from "react";
+import { Checkbox } from "@/components/motion/checkbox";
+import {
+  MorphPopover,
+  MorphPopoverContent,
+} from "@/components/motion/popover-morph";
+import { Tooltip } from "@/components/motion/tooltip";
+import { SPRING_PRESS } from "@/lib/ease";
+import { IconButton } from "./icon-button";
+import { type DayKey, WEEKDAYS } from "./types";
+
+// Copy this day's hours to other days: a morph popover with a day picker.
+export function CopyMenu({
+  fromLabel,
+  reduce,
+  onApply,
+}: {
+  fromLabel: string;
+  reduce: boolean;
+  onApply: (targets: DayKey[]) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [picked, setPicked] = useState<Set<DayKey>>(new Set());
+  const others = WEEKDAYS.filter((d) => d.label !== fromLabel);
+
+  const toggle = (k: DayKey) =>
+    setPicked((prev) => {
+      const next = new Set(prev);
+      if (next.has(k)) next.delete(k);
+      else next.add(k);
+      return next;
+    });
+
+  const apply = (targets: DayKey[]) => {
+    if (!targets.length) return;
+    onApply(targets);
+    setOpen(false);
+    setPicked(new Set());
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1200);
+  };
+
+  return (
+    <MorphPopover open={open} onOpenChange={setOpen}>
+      <Tooltip content="Copy times">
+        <IconButton
+          label={`Copy ${fromLabel} hours to other days`}
+          reduce={reduce}
+          expanded={open}
+          onClick={() => setOpen(!open)}
+        >
+          <AnimatePresence mode="popLayout" initial={false}>
+            {copied ? (
+              <motion.span
+                key="done"
+                initial={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.5 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.5 }}
+                transition={SPRING_PRESS}
+                className="text-foreground"
+              >
+                <Check className="h-4 w-4" />
+              </motion.span>
+            ) : (
+              <motion.span
+                key="copy"
+                initial={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.5 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.5 }}
+                transition={SPRING_PRESS}
+              >
+                <Copy className="h-4 w-4" />
+              </motion.span>
+            )}
+          </AnimatePresence>
+        </IconButton>
+      </Tooltip>
+
+      <MorphPopoverContent align="end" className="w-52 p-2">
+        <p className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+          Copy times to
+        </p>
+        <div className="flex flex-col">
+          {others.map((d) => (
+            <Checkbox
+              key={d.key}
+              checked={picked.has(d.key)}
+              onCheckedChange={() => toggle(d.key)}
+              label={d.label}
+              className="w-full flex-row-reverse justify-between rounded-lg px-2 py-1.5 transition-colors hover:bg-muted [&_button]:size-4 [&_button]:rounded-[5px] [&_button]:border [&_button[data-state=unchecked]]:border-border-strong"
+            />
+          ))}
+        </div>
+        <div className="mt-1 flex items-center gap-2 border-t border-border px-1 pt-2">
+          <button
+            type="button"
+            onClick={() => apply(others.map((d) => d.key))}
+            className="flex-1 rounded-lg px-2 py-1.5 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:bg-muted"
+          >
+            Every day
+          </button>
+          <button
+            type="button"
+            onClick={() => apply([...picked])}
+            disabled={picked.size === 0}
+            className="flex-1 rounded-lg bg-primary px-2 py-1.5 text-xs font-semibold text-primary-foreground outline-none transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"
+          >
+            Apply
+          </button>
+        </div>
+      </MorphPopoverContent>
+    </MorphPopover>
+  );
+}