motion-ui-skill 2.0.0

package/components/motion/dynamic-island.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { EASE_OUT } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+type IslandContextValue = {
+  view: string | null;
+};
+
+const IslandContext = createContext<IslandContextValue | null>(null);
+
+// Shell physics in Apple's duration/bounce form one long perceptual glide with barely-there bounce, identical in
+// both directions. The shell animates real width/height (not transforms), so
+// slots are never scale-distorted.
+const SHELL_SPRING = {
+  type: "spring",
+  duration: 0.8,
+  bounce: 0.2,
+} as const;
+
+// Content gets a touch more life than the shell.
+const CONTENT_SPRING = {
+  type: "spring",
+  duration: 0.8,
+  bounce: 0.35,
+} as const;
+
+// Constant radius — never animated. The browser clamps it to half the shell
+// height, so the pill-to-rounded-rect morph falls out of the resize for free
+// with zero chance of corner glitches.
+const RADIUS = 32;
+
+// iPhone pill dimensions. Also the shell's pre-measure animate target: if the
+// first commit already has a view active (e.g. a click replayed after
+// hydration), the shell blooms from the pill instead of rendering expanded
+// with no animation. Lives in `animate`, not `initial`, so server and client
+// markup agree.
+const PILL_WIDTH = 126;
+const PILL_HEIGHT = 37;
+
+/** Tracks the natural size of the content so the shell can spring to it. */
+function useContentSize() {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [size, setSize] = useState<{ width: number; height: number } | null>(
+    null,
+  );
+
+  // Synchronous mount measure: the shell must own explicit dimensions before
+  // the first interaction. ResizeObserver fires async after mount — a quick
+  // first press could beat it, leaving the shell auto-sized so the view
+  // snapped open instead of springing.
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    setSize({ width: el.offsetWidth, height: el.offsetHeight });
+  }, []);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      setSize({ width: el.offsetWidth, height: el.offsetHeight });
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return [ref, size] as const;
+}
+
+function Slot({
+  keyId,
+  children,
+  className,
+}: {
+  keyId: string;
+  children: ReactNode;
+  className?: string;
+}) {
+  const reduce = useReducedMotion();
+  return (
+    <motion.div
+      key={keyId}
+      initial={
+        reduce
+          ? { opacity: 0, filter: "blur(0px)" }
+          : { opacity: 0, scale: 0.9, y: -8, filter: "blur(5px)" }
+      }
+      animate={
+        reduce
+          ? { opacity: 1, filter: "blur(0px)" }
+          : { opacity: 1, scale: 1, y: 0, filter: "blur(0px)" }
+      }
+      // Exit gets sucked up into the pill — fast, blur-free, before the
+      // shrinking shell can clip it.
+      exit={
+        reduce
+          ? { opacity: 0, filter: "blur(0px)", transition: { duration: 0.1 } }
+          : {
+              opacity: 0,
+              scale: 0.9,
+              y: -6,
+              filter: "blur(0px)",
+              transition: { duration: 0.08, ease: EASE_OUT },
+            }
+      }
+      // One spring drives transform, opacity and blur together — no per
+      // property tweens, no delays. Content travels with the shell.
+      transition={reduce ? { duration: 0.15 } : CONTENT_SPRING}
+      // Anchored to the pill line: content unfurls downward out of it and is
+      // sucked back up into it.
+      style={{ transformOrigin: "top center" }}
+      className={cn("flex items-center justify-center", className)}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export interface DynamicIslandProps {
+  /** Active view id. `null` shows the compact pill. */
+  view: string | null;
+  /** Compact pill content, shown when no view is active. */
+  compact?: ReactNode;
+  /** DynamicIslandView elements. */
+  children?: ReactNode;
+  className?: string;
+}
+
+export function DynamicIsland({
+  view,
+  compact,
+  children,
+  className,
+}: DynamicIslandProps) {
+  const reduce = useReducedMotion();
+  const expanded = view !== null;
+  const [sizerRef, size] = useContentSize();
+  const contextValue = useMemo(() => ({ view }), [view]);
+
+  return (
+    <IslandContext.Provider value={contextValue}>
+      <motion.div
+        role="status"
+        aria-live="polite"
+        initial={false}
+        animate={
+          size
+            ? { width: size.width, height: size.height }
+            : { width: PILL_WIDTH, height: PILL_HEIGHT }
+        }
+        transition={reduce ? { duration: 0 } : SHELL_SPRING}
+        style={{ borderRadius: RADIUS }}
+        // items-start pins content to the top edge while the shell springs, so
+        // expansion reads as unfurling downward out of the pill. Top-align the
+        // island in its parent (like under a notch) to complete the effect.
+        className={cn(
+          "relative inline-flex items-start justify-center overflow-hidden",
+          "bg-foreground text-background shadow-2xl",
+          className,
+        )}
+      >
+        {/* w-max keeps this at the natural size of the active content; the
+            shell springs toward it. */}
+        <div ref={sizerRef} className="w-max">
+          <AnimatePresence mode="popLayout" initial={false}>
+            {!expanded && compact ? (
+              <Slot
+                keyId="compact"
+                // iPhone pill proportions: ~126 x 37.
+                className="min-h-[37px] min-w-[126px] gap-2 px-4 py-1.5 text-xs font-medium"
+              >
+                {compact}
+              </Slot>
+            ) : null}
+          </AnimatePresence>
+          {children}
+        </div>
+      </motion.div>
+    </IslandContext.Provider>
+  );
+}
+
+export interface DynamicIslandViewProps {
+  /** Matches the parent `view` prop when active. */
+  id: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function DynamicIslandView({
+  id,
+  children,
+  className,
+}: DynamicIslandViewProps) {
+  const ctx = useContext(IslandContext);
+  if (!ctx)
+    throw new Error("DynamicIslandView must be used inside <DynamicIsland>");
+  const active = ctx.view === id;
+
+  return (
+    <AnimatePresence mode="popLayout" initial={false}>
+      {active ? (
+        <Slot keyId={id} className={cn("px-6 py-4", className)}>
+          {children}
+        </Slot>
+      ) : null}
+    </AnimatePresence>
+  );
+}

package/components/motion/error-shake.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import {
+  motion,
+  useAnimationControls,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useEffect } from "react";
+import { useHaptic } from "@/lib/hooks/use-haptic";
+import { cn } from "@/lib/utils";
+
+export interface ErrorShakeProps extends HTMLMotionProps<"div"> {
+  error?: boolean;
+  onShakeEnd?: () => void;
+  intensity?: "mild" | "medium" | "strong";
+  children: React.ReactNode;
+  className?: string;
+}
+
+const SHAKE_OFFSETS = {
+  mild: [0, -6, 6, -4, 4, -2, 2, 0],
+  medium: [0, -12, 12, -8, 8, -4, 4, 0],
+  strong: [0, -18, 18, -12, 12, -6, 6, 0],
+};
+
+export function ErrorShake({
+  error = false,
+  onShakeEnd,
+  intensity = "medium",
+  children,
+  className,
+  ...props
+}: ErrorShakeProps) {
+  const controls = useAnimationControls();
+  const shouldReduceMotion = useReducedMotion();
+  const triggerHaptic = useHaptic();
+
+  useEffect(() => {
+    if (error) {
+      triggerHaptic("error");
+      if (!shouldReduceMotion) {
+        controls
+          .start({
+            x: SHAKE_OFFSETS[intensity],
+            transition: { duration: 0.45, ease: "easeInOut" },
+          })
+          .then(() => {
+            onShakeEnd?.();
+          });
+      } else {
+        onShakeEnd?.();
+      }
+    }
+  }, [error, controls, intensity, shouldReduceMotion, triggerHaptic, onShakeEnd]);
+
+  return (
+    <motion.div
+      animate={controls}
+      className={cn("w-full transition-colors", className)}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+}

package/components/motion/event-calendar.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import {
+  ChevronLeft,
+  ChevronRight,
+  Clock,
+  MapPin,
+  Plus,
+} from "lucide-react";
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useState } from "react";
+import { EASE_OUT, SPRING_LAYOUT, SPRING_PRESS } from "@/lib/ease";
+import { useHaptic } from "@/lib/hooks/use-haptic";
+import { cn } from "@/lib/utils";
+
+export interface CalendarEvent {
+  id: string;
+  title: string;
+  date: string; // YYYY-MM-DD
+  time?: string;
+  color?: "blue" | "emerald" | "amber" | "purple" | "rose";
+}
+
+export interface EventCalendarProps extends Omit<HTMLMotionProps<"div">, "children"> {
+  events: CalendarEvent[];
+  initialDate?: Date;
+  onEventClick?: (event: CalendarEvent) => void;
+  onDateClick?: (date: Date) => void;
+  className?: string;
+}
+
+const COLOR_CLASSES = {
+  blue: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20 hover:bg-blue-500/20",
+  emerald: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20 hover:bg-emerald-500/20",
+  amber: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20 hover:bg-amber-500/20",
+  purple: "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20 hover:bg-purple-500/20",
+  rose: "bg-rose-500/10 text-rose-600 dark:text-rose-400 border-rose-500/20 hover:bg-rose-500/20",
+};
+
+const MONTH_NAMES = [
+  "January", "February", "March", "April", "May", "June",
+  "July", "August", "September", "October", "November", "December"
+];
+
+const DAYS_OF_WEEK = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+export function EventCalendar({
+  events,
+  initialDate = new Date(),
+  onEventClick,
+  onDateClick,
+  className,
+  ...props
+}: EventCalendarProps) {
+  const [currentMonth, setCurrentMonth] = useState(initialDate.getMonth());
+  const [currentYear, setCurrentYear] = useState(initialDate.getFullYear());
+  const [direction, setDirection] = useState<"next" | "prev">("next");
+  const shouldReduceMotion = useReducedMotion();
+  const triggerHaptic = useHaptic();
+
+  const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
+  const firstDayOfWeek = new Date(currentYear, currentMonth, 1).getDay();
+
+  const prevMonth = () => {
+    setDirection("prev");
+    triggerHaptic("selection");
+    if (currentMonth === 0) {
+      setCurrentMonth(11);
+      setCurrentYear(currentYear - 1);
+    } else {
+      setCurrentMonth(currentMonth - 1);
+    }
+  };
+
+  const nextMonth = () => {
+    setDirection("next");
+    triggerHaptic("selection");
+    if (currentMonth === 11) {
+      setCurrentMonth(0);
+      setCurrentYear(currentYear + 1);
+    } else {
+      setCurrentMonth(currentMonth + 1);
+    }
+  };
+
+  const padZero = (n: number) => (n < 10 ? `0${n}` : `${n}`);
+
+  return (
+    <motion.div
+      className={cn(
+        "flex w-full flex-col rounded-2xl border border-border bg-card p-4 shadow-sm",
+        className
+      )}
+      {...props}
+    >
+      {/* Calendar Navigation Header */}
+      <div className="flex items-center justify-between pb-4">
+        <h3 className="text-base font-semibold text-foreground tracking-tight">
+          {MONTH_NAMES[currentMonth]} {currentYear}
+        </h3>
+
+        <div className="flex items-center gap-1.5">
+          <motion.button
+            type="button"
+            onClick={prevMonth}
+            whileTap={shouldReduceMotion ? undefined : { scale: 0.9 }}
+            transition={SPRING_PRESS}
+            aria-label="Previous month"
+            className="flex size-8 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+          >
+            <ChevronLeft className="size-4" />
+          </motion.button>
+          <motion.button
+            type="button"
+            onClick={nextMonth}
+            whileTap={shouldReduceMotion ? undefined : { scale: 0.9 }}
+            transition={SPRING_PRESS}
+            aria-label="Next month"
+            className="flex size-8 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+          >
+            <ChevronRight className="size-4" />
+          </motion.button>
+        </div>
+      </div>
+
+      {/* Weekday Labels Header */}
+      <div className="grid grid-cols-7 gap-1 pb-2 text-center text-[11px] font-semibold text-muted-foreground">
+        {DAYS_OF_WEEK.map((d) => (
+          <div key={d} className="py-1">
+            {d}
+          </div>
+        ))}
+      </div>
+
+      {/* Days Grid Container */}
+      <AnimatePresence mode="wait" initial={false}>
+        <motion.div
+          key={`${currentYear}-${currentMonth}`}
+          initial={
+            shouldReduceMotion
+              ? { opacity: 0 }
+              : { opacity: 0, x: direction === "next" ? 16 : -16 }
+          }
+          animate={{ opacity: 1, x: 0 }}
+          exit={
+            shouldReduceMotion
+              ? { opacity: 0 }
+              : { opacity: 0, x: direction === "next" ? -16 : 16, transition: { duration: 0.15 } }
+          }
+          transition={{ duration: 0.2, ease: EASE_OUT }}
+          className="grid grid-cols-7 gap-1"
+        >
+          {/* Empty prefix slots */}
+          {Array.from({ length: firstDayOfWeek }).map((_, i) => (
+            <div key={`empty-${i}`} className="min-h-20 rounded-xl bg-muted/10 p-1.5" />
+          ))}
+
+          {/* Month Day Cells */}
+          {Array.from({ length: daysInMonth }).map((_, i) => {
+            const dayNum = i + 1;
+            const dateString = `${currentYear}-${padZero(currentMonth + 1)}-${padZero(dayNum)}`;
+            const dayEvents = events.filter((e) => e.date === dateString);
+
+            return (
+              <div
+                key={dateString}
+                role="group"
+                aria-label={`${MONTH_NAMES[currentMonth]} ${dayNum}, ${currentYear}`}
+                className="group relative flex min-h-20 flex-col rounded-xl border border-border/50 bg-background/50 p-1.5 transition-colors hover:border-border hover:bg-background"
+              >
+                <button
+                  type="button"
+                  onClick={() => onDateClick?.(new Date(currentYear, currentMonth, dayNum))}
+                  aria-label={`Select ${MONTH_NAMES[currentMonth]} ${dayNum}, ${currentYear}`}
+                  className="flex w-full items-center justify-between rounded-md text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  <span className="text-xs font-medium text-foreground tabular-nums">
+                    {dayNum}
+                  </span>
+                  {dayEvents.length > 0 && (
+                    <span className="size-1.5 rounded-full bg-primary" />
+                  )}
+                </button>
+
+                {/* Event Chips */}
+                <div className="mt-1 flex flex-col gap-1 overflow-hidden">
+                  {dayEvents.slice(0, 2).map((ev) => (
+                    <motion.button
+                      key={ev.id}
+                      type="button"
+                      aria-label={`${ev.title}${ev.time ? ` at ${ev.time}` : ""}`}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onEventClick?.(ev);
+                      }}
+                      whileHover={shouldReduceMotion ? undefined : { scale: 1.02 }}
+                      className={cn(
+                        "w-full text-left truncate rounded-md border px-1.5 py-0.5 text-[10px] font-medium leading-tight transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                        COLOR_CLASSES[ev.color || "blue"]
+                      )}
+                    >
+                      {ev.time && <span className="font-semibold mr-1">{ev.time}</span>}
+                      <span>{ev.title}</span>
+                    </motion.button>
+                  ))}
+                  {dayEvents.length > 2 && (
+                    <span className="text-[9px] font-semibold text-muted-foreground pl-1">
+                      +{dayEvents.length - 2} more
+                    </span>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </motion.div>
+      </AnimatePresence>
+    </motion.div>
+  );
+}