motion-ui-skill 2.0.0

package/components/motion/bounce-sidebar.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import { animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import {
+  type ReactNode,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { cn } from "@/lib/utils";
+
+export interface BounceSidebarItem {
+  id: string;
+  label: ReactNode;
+  href?: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  target?: "_blank" | "_self" | "_parent" | "_top";
+  rel?: string;
+}
+
+export interface BounceSidebarProps {
+  items: BounceSidebarItem[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  ariaLabel?: string;
+  className?: string;
+  listClassName?: string;
+  itemClassName?: string;
+  indicatorClassName?: string;
+}
+
+const DOT_SIZE = 6;
+
+// A compact, lightly underdamped spring gives the dot a quick landing without
+// turning the sidebar into a playful toy. The sideways arc carries the bounce.
+const BOUNCE_SPRING = {
+  type: "spring",
+  stiffness: 280,
+  damping: 18,
+  mass: 0.3,
+} as const;
+
+function quadraticBezier(start: number, control: number, end: number, progress: number) {
+  const remaining = 1 - progress;
+  return (
+    remaining * remaining * start +
+    2 * remaining * progress * control +
+    progress * progress * end
+  );
+}
+
+export function BounceSidebar({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  ariaLabel = "Sidebar navigation",
+  className,
+  listClassName,
+  itemClassName,
+  indicatorClassName,
+}: BounceSidebarProps) {
+  const reduce = useReducedMotion();
+  const [internalValue, setInternalValue] = useState(
+    defaultValue ?? items[0]?.id ?? "",
+  );
+  const requestedValue = value ?? internalValue;
+  const selectedValue = items.some((item) => item.id === requestedValue)
+    ? requestedValue
+    : (items[0]?.id ?? "");
+  const selectedIndex = items.findIndex((item) => item.id === selectedValue);
+  const listRef = useRef<HTMLUListElement>(null);
+  const itemRefs = useRef(new Map<string, HTMLLIElement>());
+  const selectedValueRef = useRef(selectedValue);
+  const previousIndexRef = useRef(selectedIndex);
+  const hasPositionRef = useRef(false);
+  const animationRef = useRef<ReturnType<typeof animate> | null>(null);
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  selectedValueRef.current = selectedValue;
+
+  const snapIndicator = useCallback(() => {
+    const selectedItem = itemRefs.current.get(selectedValueRef.current);
+    if (!selectedItem) return;
+
+    animationRef.current?.stop();
+    x.set(0);
+    y.set(
+      selectedItem.offsetTop + (selectedItem.offsetHeight - DOT_SIZE) / 2,
+    );
+    hasPositionRef.current = true;
+  }, [x, y]);
+
+  const positionIndicator = useCallback(
+    (shouldAnimate: boolean) => {
+      const selectedItem = itemRefs.current.get(selectedValue);
+      if (!selectedItem) return;
+
+      const destinationY =
+        selectedItem.offsetTop + (selectedItem.offsetHeight - DOT_SIZE) / 2;
+
+      animationRef.current?.stop();
+
+      if (!hasPositionRef.current || reduce || !shouldAnimate) {
+        x.set(0);
+        y.set(destinationY);
+        hasPositionRef.current = true;
+        previousIndexRef.current = selectedIndex;
+        return;
+      }
+
+      const startY = y.get();
+      const distance = destinationY - startY;
+      const travel = Math.abs(distance);
+      const longJumpProgress = Math.min(1, Math.max(0, (travel - 48) / 120));
+      const controlX = -Math.min(40, Math.max(8, travel * 0.25));
+      const midpointY = (startY + destinationY) / 2;
+      const controlY =
+        destinationY + (midpointY - destinationY) * longJumpProgress;
+
+      animationRef.current = animate(0, 1, {
+        ...BOUNCE_SPRING,
+        stiffness:
+          BOUNCE_SPRING.stiffness - 60 * longJumpProgress,
+        damping: BOUNCE_SPRING.damping + longJumpProgress,
+        mass: BOUNCE_SPRING.mass + 0.15 * longJumpProgress,
+        onUpdate: (progress) => {
+          x.set(quadraticBezier(0, controlX, 0, progress));
+          y.set(quadraticBezier(startY, controlY, destinationY, progress));
+        },
+        onComplete: () => {
+          x.set(0);
+          y.set(destinationY);
+        },
+      });
+
+      previousIndexRef.current = selectedIndex;
+    },
+    [reduce, selectedIndex, selectedValue, x, y],
+  );
+
+  useLayoutEffect(() => {
+    const shouldAnimate =
+      hasPositionRef.current && previousIndexRef.current !== selectedIndex;
+    positionIndicator(shouldAnimate);
+  }, [positionIndicator, selectedIndex]);
+
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list || typeof ResizeObserver === "undefined") return;
+
+    const observer = new ResizeObserver(snapIndicator);
+    observer.observe(list);
+    return () => observer.disconnect();
+  }, [snapIndicator]);
+
+  useLayoutEffect(
+    () => () => {
+      animationRef.current?.stop();
+    },
+    [],
+  );
+
+  const selectItem = (id: string) => {
+    if (value === undefined) setInternalValue(id);
+    onValueChange?.(id);
+  };
+
+  return (
+    <nav aria-label={ariaLabel} className={cn("relative", className)}>
+      <ul
+        ref={listRef}
+        className={cn("relative flex list-none flex-col gap-1.5 pl-6", listClassName)}
+      >
+        {selectedIndex >= 0 ? (
+          <li
+            aria-hidden="true"
+            role="presentation"
+            className="pointer-events-none absolute inset-0"
+          >
+            <motion.span
+              style={{ x, y }}
+              className={cn(
+                "absolute top-0 left-3 h-1.5 w-1.5 rounded-full bg-primary",
+                indicatorClassName,
+              )}
+            />
+          </li>
+        ) : null}
+
+        {items.map((item) => {
+          const active = item.id === selectedValue;
+          const content = (
+            <>
+              {item.icon ? (
+                <span aria-hidden="true" className="shrink-0">
+                  {item.icon}
+                </span>
+              ) : null}
+              <span>{item.label}</span>
+            </>
+          );
+          const interactiveClasses = cn(
+            "flex min-h-9 w-full items-center gap-2 rounded-lg px-2 text-left text-sm font-medium outline-none transition-colors",
+            "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            active
+              ? "text-foreground"
+              : "text-muted-foreground hover:text-foreground",
+            item.disabled ? "cursor-not-allowed opacity-40" : undefined,
+            itemClassName,
+          );
+
+          return (
+            <li
+              key={item.id}
+              ref={(node) => {
+                if (node) itemRefs.current.set(item.id, node);
+                else itemRefs.current.delete(item.id);
+              }}
+              className="relative"
+            >
+              {item.href ? (
+                <a
+                  href={item.href}
+                  target={item.target}
+                  rel={
+                    item.rel ??
+                    (item.target === "_blank" ? "noreferrer noopener" : undefined)
+                  }
+                  aria-current={active ? "page" : undefined}
+                  aria-disabled={item.disabled || undefined}
+                  data-active={active || undefined}
+                  tabIndex={item.disabled ? -1 : undefined}
+                  onClick={(event) => {
+                    if (item.disabled) {
+                      event.preventDefault();
+                      return;
+                    }
+                    selectItem(item.id);
+                  }}
+                  className={interactiveClasses}
+                >
+                  {content}
+                </a>
+              ) : (
+                <button
+                  type="button"
+                  disabled={item.disabled}
+                  aria-current={active ? "page" : undefined}
+                  data-active={active || undefined}
+                  onClick={() => selectItem(item.id)}
+                  className={interactiveClasses}
+                >
+                  {content}
+                </button>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}

package/components/motion/bouncy-accordion.tsx

@@ -0,0 +1,325 @@
+"use client";
+
+import {
+  motion,
+  useReducedMotion,
+  type Transition,
+} from "motion/react";
+import { ChevronDown } from "lucide-react";
+import {
+  useCallback,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { EASE_OUT } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export type BouncyAccordionItem = {
+  id: string;
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  disabled?: boolean;
+};
+
+export type BouncyAccordionClassNames = {
+  root?: string;
+  item?: string;
+  trigger?: string;
+  icon?: string;
+  title?: string;
+  chevron?: string;
+  content?: string;
+  description?: string;
+};
+
+export interface BouncyAccordionProps {
+  items: BouncyAccordionItem[];
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+  collapsible?: boolean;
+  className?: string;
+  classNames?: BouncyAccordionClassNames;
+}
+
+// Local springs keep the accordion's connected groups moving together while
+// avoiding scale projection on text-heavy row contents.
+// Gap spring: must not overshoot y — positive y overshoot drifts items below
+// their mt-3 resting point and briefly overlaps the next item.
+const ROW_TRANSITION: Transition = {
+  type: "spring",
+  duration: 0.55,
+  bounce: 0.38,
+};
+
+const CONTENT_OPEN_TRANSITION: Transition = {
+  type: "spring",
+  duration: 0.58,
+  bounce: 0.32,
+};
+
+const CONTENT_CLOSE_TRANSITION: Transition = {
+  type: "spring",
+  duration: 0.46,
+  bounce: 0.26,
+};
+
+const DESCRIPTION_TRANSITION: Transition = {
+  duration: 0.18,
+  ease: EASE_OUT,
+};
+
+const CHEVRON_TRANSITION: Transition = {
+  type: "spring",
+  duration: 0.42,
+  bounce: 0.28,
+};
+
+
+function useControllableAccordionValue({
+  value,
+  defaultValue,
+  onValueChange,
+}: {
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+}) {
+  const [internalValue, setInternalValue] = useState(defaultValue ?? null);
+  const isControlled = value !== undefined;
+  const currentValue = value ?? internalValue;
+
+  const setValue = useCallback(
+    (next: string | null) => {
+      if (!isControlled) {
+        setInternalValue(next);
+      }
+
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange],
+  );
+
+  return [currentValue, setValue] as const;
+}
+
+function BouncyAccordionRow({
+  item,
+  open,
+  startsGroup,
+  endsGroup,
+  separatedFromPrevious,
+  contentId,
+  triggerId,
+  reduce,
+  classNames,
+  onToggle,
+}: {
+  item: BouncyAccordionItem;
+  open: boolean;
+  startsGroup: boolean;
+  endsGroup: boolean;
+  separatedFromPrevious: boolean;
+  contentId: string;
+  triggerId: string;
+  reduce: boolean | null;
+  classNames?: BouncyAccordionClassNames;
+  onToggle: () => void;
+}) {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [contentHeight, setContentHeight] = useState(0);
+
+  useLayoutEffect(() => {
+    const node = contentRef.current;
+    if (!node) return;
+
+    const updateHeight = () => {
+      setContentHeight(node.offsetHeight);
+    };
+
+    updateHeight();
+
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(node);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <motion.div
+      layout="position"
+      initial={false}
+      style={{ marginTop: separatedFromPrevious ? 12 : 0 }}
+      transition={reduce ? { duration: 0 } : ROW_TRANSITION}
+    >
+      <motion.div
+        data-state={open ? "open" : "closed"}
+        initial={false}
+        animate={{
+          borderTopLeftRadius: startsGroup ? 28 : 0,
+          borderTopRightRadius: startsGroup ? 28 : 0,
+          borderBottomLeftRadius: endsGroup ? 28 : 0,
+          borderBottomRightRadius: endsGroup ? 28 : 0,
+        }}
+        transition={reduce ? { duration: 0 } : ROW_TRANSITION}
+        className={cn(
+          "overflow-hidden bg-card text-card-foreground",
+          item.disabled && "opacity-50",
+          classNames?.item,
+        )}
+      >
+        <button
+          id={triggerId}
+          type="button"
+          disabled={item.disabled}
+          aria-expanded={open}
+          aria-controls={contentId}
+          onClick={onToggle}
+          className={cn(
+            "flex min-h-[54px] w-full items-center gap-4 px-5 text-left outline-none transition-colors",
+            "focus-visible:bg-muted/25",
+            "disabled:pointer-events-none",
+            classNames?.trigger,
+          )}
+        >
+          {item.icon ? (
+            <span
+              className={cn(
+                "grid h-7 w-7 shrink-0 place-items-center text-muted-foreground",
+                classNames?.icon,
+              )}
+            >
+              {item.icon}
+            </span>
+          ) : null}
+          <span
+            className={cn(
+              "min-w-0 flex-1 truncate text-[15px] font-medium text-foreground",
+              classNames?.title,
+            )}
+          >
+            {item.title}
+          </span>
+          <motion.span
+            aria-hidden
+            animate={{ rotate: open ? 180 : 0 }}
+            transition={reduce ? { duration: 0 } : CHEVRON_TRANSITION}
+            className={cn(
+              "grid h-6 w-6 shrink-0 place-items-center text-muted-foreground",
+              classNames?.chevron,
+            )}
+          >
+            <ChevronDown className="h-4 w-4" />
+          </motion.span>
+        </button>
+
+        <motion.div
+          layout="size"
+          id={contentId}
+          role="region"
+          aria-labelledby={triggerId}
+          aria-hidden={!open}
+          inert={!open}
+          initial={false}
+          style={{ height: open && item.description ? contentHeight : 0 }}
+          transition={
+            reduce
+              ? { duration: 0 }
+              : open
+                ? CONTENT_OPEN_TRANSITION
+                : CONTENT_CLOSE_TRANSITION
+          }
+          className={cn("overflow-hidden", classNames?.content)}
+        >
+          <motion.div
+            ref={contentRef}
+            animate={{
+              opacity: open ? 1 : 0,
+            }}
+            transition={reduce ? { duration: 0 } : DESCRIPTION_TRANSITION}
+            className="px-5 pb-5"
+          >
+            <div
+              className={cn(
+                "text-[15px] leading-6 text-muted-foreground",
+                classNames?.description,
+              )}
+            >
+              {item.description}
+            </div>
+          </motion.div>
+        </motion.div>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+export function BouncyAccordion({
+  items,
+  value,
+  defaultValue = null,
+  onValueChange,
+  collapsible = true,
+  className,
+  classNames,
+}: BouncyAccordionProps) {
+  const reduce = useReducedMotion();
+  const baseId = useId();
+  const [activeValue, setActiveValue] = useControllableAccordionValue({
+    value,
+    defaultValue,
+    onValueChange,
+  });
+  const activeIndex = items.findIndex((item) => item.id === activeValue);
+
+  const toggleItem = useCallback(
+    (id: string) => {
+      if (activeValue === id) {
+        if (collapsible) {
+          setActiveValue(null);
+        }
+        return;
+      }
+
+      setActiveValue(id);
+    },
+    [activeValue, collapsible, setActiveValue],
+  );
+
+  return (
+    <div className={cn("w-full", className, classNames?.root)}>
+      {items.map((item, index) => {
+        const open = activeValue === item.id;
+        const previousIsOpen = activeIndex === index - 1;
+        const nextIsOpen = activeIndex === index + 1;
+        const startsGroup = open || index === 0 || previousIsOpen;
+        const endsGroup = open || index === items.length - 1 || nextIsOpen;
+        const separatedFromPrevious = index > 0 && (open || previousIsOpen);
+        const contentId = `${baseId}-${item.id}-content`;
+        const triggerId = `${baseId}-${item.id}-trigger`;
+
+        return (
+          <BouncyAccordionRow
+            key={item.id}
+            item={item}
+            open={open}
+            startsGroup={startsGroup}
+            endsGroup={endsGroup}
+            separatedFromPrevious={separatedFromPrevious}
+            contentId={contentId}
+            triggerId={triggerId}
+            reduce={reduce}
+            classNames={classNames}
+            onToggle={() => toggleItem(item.id)}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/components/motion/breadcrumb.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useState } from "react";
+import { SPRING_PRESS } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export interface BreadcrumbItem {
+  id: string;
+  label: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+export interface BreadcrumbProps extends HTMLMotionProps<"nav"> {
+  items: BreadcrumbItem[];
+  maxItems?: number;
+  separator?: React.ReactNode;
+  className?: string;
+}
+
+export function Breadcrumb({
+  items,
+  maxItems = 4,
+  separator = <ChevronRight className="size-3.5 text-muted-foreground/60" />,
+  className,
+  ...props
+}: BreadcrumbProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const shouldReduceMotion = useReducedMotion();
+
+  let displayedItems: BreadcrumbItem[];
+  let collapsedMiddle: BreadcrumbItem[] = [];
+
+  if (!isExpanded && items.length > maxItems) {
+    // Keep first 1 and last 2 items
+    displayedItems = [items[0], ...items.slice(-2)];
+    collapsedMiddle = items.slice(1, -2);
+  } else {
+    displayedItems = items;
+  }
+
+  return (
+    <motion.nav
+      aria-label="Breadcrumb"
+      className={cn("flex items-center text-xs font-medium", className)}
+      {...props}
+    >
+      <ol className="flex flex-wrap items-center gap-1.5">
+        {displayedItems.map((item, idx) => {
+          const isLast = idx === displayedItems.length - 1;
+          const isEllipsis = !isExpanded && collapsedMiddle.length > 0 && idx === 1;
+
+          return (
+            <React.Fragment key={item.id}>
+              {/* Ellipsis Expander */}
+              {isEllipsis && (
+                <>
+                  <li className="flex items-center">
+                    <motion.button
+                      type="button"
+                      whileTap={shouldReduceMotion ? undefined : { scale: 0.9 }}
+                      transition={SPRING_PRESS}
+                      onClick={() => setIsExpanded(true)}
+                      aria-label="Show collapsed breadcrumb steps"
+                      className="flex size-6 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+                    >
+                      <MoreHorizontal className="size-3.5" />
+                    </motion.button>
+                  </li>
+                  <li aria-hidden="true" className="select-none">
+                    {separator}
+                  </li>
+                </>
+              )}
+
+              {/* Breadcrumb Node */}
+              <li className="flex items-center">
+                {isLast ? (
+                  <span
+                    aria-current="page"
+                    className="font-semibold text-foreground tracking-tight"
+                  >
+                    {item.label}
+                  </span>
+                ) : item.href ? (
+                  <a
+                    href={item.href}
+                    className="text-muted-foreground hover:text-foreground transition-colors underline-offset-4 hover:underline"
+                  >
+                    {item.label}
+                  </a>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={item.onClick}
+                    className="text-muted-foreground hover:text-foreground transition-colors underline-offset-4 hover:underline"
+                  >
+                    {item.label}
+                  </button>
+                )}
+              </li>
+
+              {/* Separator */}
+              {!isLast && (
+                <li aria-hidden="true" className="select-none">
+                  {separator}
+                </li>
+              )}
+            </React.Fragment>
+          );
+        })}
+      </ol>
+    </motion.nav>
+  );
+}