motion-ui-skill 2.0.0

package/components/motion/range-slider.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import {
+  motion,
+  useMotionTemplate,
+  useMotionValue,
+  useReducedMotion,
+  useSpring,
+  useTransform,
+} from "motion/react";
+import { useEffect } from "react";
+
+import { SPRING_GLIDE } from "@/lib/ease";
+import { type SliderOptions, useSlider } from "@/lib/hooks/use-slider";
+import { TOUCH_GESTURE_CLASS } from "@/lib/touch";
+import { cn } from "@/lib/utils";
+
+// Bouncy grab feedback for the thumb scale only.
+const SPRING_BOUNCY = { type: "spring", stiffness: 500, damping: 14, mass: 0.7 } as const;
+
+export interface RangeSliderProps extends SliderOptions {
+  /** Render a tick dot at each step. */
+  showTicks?: boolean;
+  className?: string;
+}
+
+export function RangeSlider({ showTicks = true, className, ...options }: RangeSliderProps) {
+  const reduce = useReducedMotion();
+  const { percent, dragging, min, max, step, trackProps, sliderProps } = useSlider(options);
+
+  // Spring-smoothed position drives both the thumb and the fill.
+  const target = useMotionValue(percent);
+  useEffect(() => {
+    target.set(percent);
+  }, [percent, target]);
+  const smooth = useSpring(target, SPRING_GLIDE);
+  const pos = reduce ? target : smooth;
+  const left = useMotionTemplate`${pos}%`;
+  // Self-offset the thumb from 0% (flush left) to -100% (flush right) of its
+  // own width so it stays fully inside the track at both ends — no clip, no gap.
+  const thumbX = useTransform(pos, (p) => `${-p}%`);
+
+  // Floor rather than round, so a range the step does not divide (0 to 10 by 4)
+  // stops its dots at the last whole step instead of drawing one past max.
+  // toFixed comes first because 0.3/0.1 is 2.9999999999999996, which would
+  // floor to 2 and drop the last dot.
+  const steps = Math.floor(Number(((max - min) / step).toFixed(6)));
+  const ticks =
+    showTicks && steps > 0 && steps <= 50
+      ? Array.from({ length: steps + 1 }, (_, i) => Number((min + i * step).toFixed(6)))
+      : [];
+
+  return (
+    <div
+      {...trackProps}
+      className={cn(
+        "relative flex h-10 w-full touch-none items-center overflow-hidden rounded-lg bg-muted",
+        TOUCH_GESTURE_CLASS,
+        options.disabled
+          ? "pointer-events-none opacity-50"
+          : "cursor-grab active:cursor-grabbing",
+        className,
+      )}
+    >
+      {/* fill — runs from the left edge to the thumb, consistent tone */}
+      <motion.div className="absolute inset-y-0 left-0 bg-foreground/15" style={{ width: left }} />
+
+      {/* Ticks, inset by half the thumb's width. That inset is the span the
+          thumb's own centre travels, so a dot sits where the thumb lands. */}
+      <div className="pointer-events-none absolute inset-x-[3px] inset-y-0">
+        {ticks.map((t) => {
+          const tp = ((t - min) / (max - min)) * 100;
+          return (
+            <span
+              key={t}
+              className="absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground/25"
+              style={{ left: `${tp}%` }}
+            />
+          );
+        })}
+      </div>
+
+      {/* vertical bar thumb — contained at both ends via thumbX */}
+      <motion.div
+        {...sliderProps}
+        animate={reduce ? undefined : { scaleY: dragging ? 1.35 : 1 }}
+        transition={SPRING_BOUNCY}
+        className="absolute top-1/2 h-5 w-1.5 rounded-sm bg-foreground shadow-sm outline-none ring-inset ring-foreground/30 focus-visible:ring-4"
+        style={{ left, x: thumbX, y: "-50%" }}
+      />
+    </div>
+  );
+}

package/components/motion/rating.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { Star } from "lucide-react";
+import {
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useRef, useState } from "react";
+import { SPRING_BOUNCE, SPRING_PRESS } from "@/lib/ease";
+import { useHaptic } from "@/lib/hooks/use-haptic";
+import { cn } from "@/lib/utils";
+
+export interface RatingProps extends Omit<HTMLMotionProps<"div">, "onChange"> {
+  value?: number;
+  defaultValue?: number;
+  max?: number;
+  allowHalf?: boolean;
+  readOnly?: boolean;
+  disabled?: boolean;
+  size?: "sm" | "md" | "lg";
+  onChange?: (val: number) => void;
+  className?: string;
+}
+
+const SIZE_CLASSES = {
+  sm: "size-4",
+  md: "size-5",
+  lg: "size-7",
+};
+
+export function Rating({
+  value: controlledValue,
+  defaultValue = 0,
+  max = 5,
+  allowHalf = true,
+  readOnly = false,
+  disabled = false,
+  size = "md",
+  onChange,
+  className,
+  ...props
+}: RatingProps) {
+  const [uncontrolledVal, setUncontrolledVal] = useState(defaultValue);
+  const [hoverVal, setHoverVal] = useState<number | null>(null);
+  const starRefs = useRef<Array<HTMLButtonElement | null>>([]);
+  const shouldReduceMotion = useReducedMotion();
+  const triggerHaptic = useHaptic();
+
+  const isControlled = controlledValue !== undefined;
+  const currentVal = isControlled ? controlledValue : uncontrolledVal;
+  const activeVal = hoverVal !== null ? hoverVal : currentVal;
+
+  const handlePointerMove = (e: React.PointerEvent<HTMLButtonElement>, index: number) => {
+    if (readOnly || disabled) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const isFirstHalf = x < rect.width / 2;
+
+    const calculatedVal = allowHalf && isFirstHalf ? index + 0.5 : index + 1;
+    if (calculatedVal !== hoverVal) {
+      setHoverVal(calculatedVal);
+      triggerHaptic("selection");
+    }
+  };
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>, index: number) => {
+    if (readOnly || disabled) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const isFirstHalf = x < rect.width / 2;
+
+    const newVal = allowHalf && isFirstHalf ? index + 0.5 : index + 1;
+    if (!isControlled) setUncontrolledVal(newVal);
+    onChange?.(newVal);
+    triggerHaptic("success");
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (readOnly || disabled) return;
+    const step = allowHalf ? 0.5 : 1;
+    let next: number | null = null;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+      e.preventDefault();
+      next = Math.min(max, currentVal + step);
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+      e.preventDefault();
+      next = Math.max(0, currentVal - step);
+    }
+    if (next !== null) {
+      if (!isControlled) setUncontrolledVal(next);
+      onChange?.(next);
+      triggerHaptic("selection");
+      requestAnimationFrame(() => {
+        starRefs.current[Math.min(max - 1, Math.max(0, Math.ceil(next) - 1))]?.focus();
+      });
+    }
+  };
+
+  const selectedIndex = Math.min(max - 1, Math.max(0, Math.ceil(currentVal) - 1));
+
+  return (
+    <motion.div
+      role="radiogroup"
+      onPointerLeave={() => setHoverVal(null)}
+      aria-label="Rating"
+      className={cn(
+        "inline-flex items-center gap-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-lg p-1",
+        disabled && "opacity-50 cursor-not-allowed",
+        readOnly && "cursor-default",
+        className
+      )}
+      {...props}
+    >
+      {Array.from({ length: max }).map((_, idx) => {
+        const starNumber = idx + 1;
+        const fillPercent = Math.max(
+          0,
+          Math.min(100, (activeVal - idx) * 100)
+        );
+
+        return (
+          <motion.button
+            key={idx}
+            type="button"
+            ref={(element) => { starRefs.current[idx] = element; }}
+            role="radio"
+            aria-checked={currentVal === starNumber || (allowHalf && currentVal === starNumber - 0.5)}
+            aria-label={`${starNumber} star${starNumber === 1 ? "" : "s"}`}
+            tabIndex={readOnly || disabled ? -1 : idx === selectedIndex ? 0 : -1}
+            disabled={disabled || readOnly}
+            onClick={(e) => handleClick(e, idx)}
+            onPointerMove={(e) => handlePointerMove(e, idx)}
+            onKeyDown={handleKeyDown}
+            whileTap={shouldReduceMotion || readOnly || disabled ? undefined : { scale: 0.85 }}
+            whileHover={shouldReduceMotion || readOnly || disabled ? undefined : { scale: 1.15 }}
+            transition={SPRING_BOUNCE}
+            className="relative p-0.5 rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer disabled:cursor-not-allowed"
+          >
+            {/* Background Empty Star */}
+            <Star
+              className={cn(
+                SIZE_CLASSES[size],
+                "text-muted-foreground/30 transition-colors"
+              )}
+            />
+
+            {/* Foreground Filled Star with Clip Path */}
+            <div
+              className="absolute inset-0 p-0.5 overflow-hidden text-amber-500 pointer-events-none"
+              style={{ width: `${fillPercent}%` }}
+            >
+              <Star
+                className={cn(
+                  SIZE_CLASSES[size],
+                  "fill-current stroke-current"
+                )}
+              />
+            </div>
+          </motion.button>
+        );
+      })}
+
+      {!readOnly && (
+        <span className="ml-2 text-xs font-semibold tabular-nums text-muted-foreground min-w-[2.5rem]">
+          {activeVal.toFixed(1)}
+        </span>
+      )}
+    </motion.div>
+  );
+}

package/components/motion/reorder-grid.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { GripVertical } from "lucide-react";
+import {
+  Reorder,
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useState } from "react";
+import { SPRING_PRESS } from "@/lib/ease";
+import { useHaptic } from "@/lib/hooks/use-haptic";
+import { cn } from "@/lib/utils";
+
+export interface ReorderItem {
+  id: string;
+  title: string;
+  subtitle?: string;
+  badge?: string;
+  icon?: React.ReactNode;
+}
+
+export interface ReorderGridProps extends Omit<HTMLMotionProps<"ul">, "onChange"> {
+  items: ReorderItem[];
+  onChange?: (newItems: ReorderItem[]) => void;
+  columns?: 1 | 2 | 3 | 4;
+  className?: string;
+}
+
+export function ReorderGrid({
+  items: initialItems,
+  onChange,
+  columns = 2,
+  className,
+  ...props
+}: ReorderGridProps) {
+  const [items, setItems] = useState<ReorderItem[]>(initialItems);
+  const shouldReduceMotion = useReducedMotion();
+  const triggerHaptic = useHaptic();
+
+  const handleReorder = (newOrder: ReorderItem[]) => {
+    setItems(newOrder);
+    triggerHaptic("selection");
+    onChange?.(newOrder);
+  };
+
+  const moveByKeyboard = (index: number, offset: number) => {
+    const nextIndex = index + offset;
+    if (nextIndex < 0 || nextIndex >= items.length) return;
+    const next = [...items];
+    [next[index], next[nextIndex]] = [next[nextIndex], next[index]];
+    handleReorder(next);
+  };
+
+  const gridColsClass = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
+    4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-4",
+  }[columns];
+
+  return (
+    <Reorder.Group<ReorderItem[]>
+      {...props}
+      axis="xy"
+      values={items}
+      onReorder={handleReorder}
+      className={cn("grid gap-3 w-full", gridColsClass, className)}
+    >
+      {items.map((item, index) => (
+        <Reorder.Item
+          key={item.id}
+          value={item}
+          tabIndex={0}
+          onKeyDown={(event) => {
+            const offset = event.key === "ArrowRight" || event.key === "ArrowDown"
+              ? 1
+              : event.key === "ArrowLeft" || event.key === "ArrowUp"
+              ? -1
+              : 0;
+            if (!offset) return;
+            event.preventDefault();
+            moveByKeyboard(index, offset);
+          }}
+          whileDrag={shouldReduceMotion ? undefined : {
+            scale: 1.04,
+            boxShadow: "0 12px 24px -10px rgba(0,0,0,0.2)",
+            zIndex: 50,
+          }}
+          transition={SPRING_PRESS}
+          className="relative flex items-center justify-between rounded-xl border border-border bg-card p-3.5 shadow-[0_1px_2px_0_rgb(0_0_0_/_0.05)] cursor-grab active:cursor-grabbing hover:border-primary/40 transition-colors select-none"
+        >
+          <div className="flex items-center gap-3 min-w-0">
+            <div className="text-muted-foreground/60 hover:text-muted-foreground p-0.5">
+              <GripVertical className="size-4" />
+            </div>
+            {item.icon && (
+              <div className="size-8 rounded-lg bg-muted flex items-center justify-center text-foreground shrink-0">
+                {item.icon}
+              </div>
+            )}
+            <div className="min-w-0">
+              <div className="text-xs font-semibold text-foreground truncate">
+                {item.title}
+              </div>
+              {item.subtitle && (
+                <div className="text-[11px] text-muted-foreground truncate">
+                  {item.subtitle}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {item.badge && (
+            <span className="rounded-full bg-secondary px-2 py-0.5 text-[10px] font-semibold text-secondary-foreground shrink-0">
+              {item.badge}
+            </span>
+          )}
+        </Reorder.Item>
+      ))}
+    </Reorder.Group>
+  );
+}

package/components/motion/resizable-panel.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { GripVertical, GripHorizontal } from "lucide-react";
+import { motion, type HTMLMotionProps } from "motion/react";
+import React, { useState, useRef, useCallback } from "react";
+import { useHaptic } from "@/lib/hooks/use-haptic";
+import { cn } from "@/lib/utils";
+
+export interface ResizablePanelGroupProps extends HTMLMotionProps<"div"> {
+  direction?: "horizontal" | "vertical";
+  defaultSize?: number; // percentage (0 - 100) for first panel
+  minSize?: number; // percentage
+  maxSize?: number; // percentage
+  onResize?: (size: number) => void;
+  panelA: React.ReactNode;
+  panelB: React.ReactNode;
+  className?: string;
+}
+
+export function ResizablePanelGroup({
+  direction = "horizontal",
+  defaultSize = 50,
+  minSize = 20,
+  maxSize = 80,
+  onResize,
+  panelA,
+  panelB,
+  className,
+  ...props
+}: ResizablePanelGroupProps) {
+  const clampSize = (value: number) => Math.min(Math.max(value, minSize), maxSize);
+  const [size, setSize] = useState<number>(() => clampSize(defaultSize));
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const triggerHaptic = useHaptic();
+
+  const handlePointerDown = (e: React.PointerEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+    triggerHaptic("light");
+    try {
+      (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    } catch {
+      // Pointer capture is not available on every custom target.
+    }
+  };
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      if (!isDragging || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      let newPercent: number;
+
+      if (direction === "horizontal") {
+        const offset = e.clientX - rect.left;
+        newPercent = (offset / rect.width) * 100;
+      } else {
+        const offset = e.clientY - rect.top;
+        newPercent = (offset / rect.height) * 100;
+      }
+
+      const clamped = clampSize(newPercent);
+      setSize(clamped);
+      onResize?.(clamped);
+    },
+    [isDragging, direction, minSize, maxSize, onResize]
+  );
+
+  const handlePointerUp = (e: React.PointerEvent) => {
+    if (isDragging) {
+      setIsDragging(false);
+      triggerHaptic("selection");
+      try {
+        (e.target as HTMLElement).releasePointerCapture(e.pointerId);
+      } catch {
+        // pointer capture already lost
+      }
+    }
+  };
+
+  const isHorizontal = direction === "horizontal";
+
+  return (
+    <motion.div
+      ref={containerRef}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onPointerCancel={handlePointerUp}
+      className={cn(
+        "relative flex size-full overflow-hidden rounded-xl border border-border bg-card",
+        isHorizontal ? "flex-row" : "flex-col",
+        isDragging && (isHorizontal ? "select-none cursor-col-resize" : "select-none cursor-row-resize"),
+        className
+      )}
+      {...props}
+    >
+      {/* Panel A */}
+      <div
+        style={{
+          [isHorizontal ? "width" : "height"]: `${size}%`,
+        }}
+        className="overflow-auto min-w-0 min-h-0"
+      >
+        {panelA}
+      </div>
+
+      {/* Resize Handle */}
+      <div
+        role="separator"
+        aria-orientation={isHorizontal ? "vertical" : "horizontal"}
+        aria-valuenow={Math.round(size)}
+        aria-valuemin={minSize}
+        aria-valuemax={maxSize}
+        tabIndex={0}
+        onPointerDown={handlePointerDown}
+        onKeyDown={(e) => {
+          if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+            const next = Math.max(size - 5, minSize);
+            setSize(next);
+            onResize?.(next);
+          } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+            const next = Math.min(size + 5, maxSize);
+            setSize(next);
+            onResize?.(next);
+          }
+        }}
+        className={cn(
+            "relative flex touch-none items-center justify-center transition-colors bg-border hover:bg-primary/50 focus-visible:bg-primary focus-visible:outline-none",
+          isHorizontal
+            ? "w-1.5 cursor-col-resize hover:w-2"
+            : "h-1.5 cursor-row-resize hover:h-2",
+          isDragging && "bg-primary"
+        )}
+      >
+        <div
+          className={cn(
+            "absolute z-10 flex items-center justify-center rounded-sm bg-card border border-border p-0.5 text-muted-foreground shadow-sm pointer-events-none",
+            isDragging && "border-primary text-primary"
+          )}
+        >
+          {isHorizontal ? (
+            <GripVertical className="size-3" />
+          ) : (
+            <GripHorizontal className="size-3" />
+          )}
+        </div>
+      </div>
+
+      {/* Panel B */}
+      <div
+        style={{
+          [isHorizontal ? "width" : "height"]: `${100 - size}%`,
+        }}
+        className="overflow-auto min-w-0 min-h-0 flex-1"
+      >
+        {panelB}
+      </div>
+    </motion.div>
+  );
+}

package/components/motion/scroll-progress.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import {
+  type MotionValue,
+  motion,
+  useReducedMotion,
+  useSpring,
+  useTransform,
+} from "motion/react";
+
+import { useSmoothScroll } from "@/components/motion/smooth-scroll";
+import { cn } from "@/lib/utils";
+
+// Soft follow so the indicator trails the scroll smoothly instead of snapping;
+// looser than the UI springs in lib/ease.ts on purpose.
+const PROGRESS_SPRING = { stiffness: 120, damping: 30, mass: 0.6 };
+
+type CommonProps = {
+  /** Override the scroll source. Defaults to the page via useSmoothScroll. */
+  progress?: MotionValue<number>;
+  /** Spring-smooth the value. Disabled automatically under reduced motion. */
+  spring?: boolean;
+  className?: string;
+};
+
+export interface ScrollProgressBarProps extends CommonProps {
+  variant?: "bar";
+  position?: "top" | "bottom";
+  /** Bar thickness in px. */
+  height?: number;
+  /** Position the bar with `fixed` (page) or `absolute` (embedded). */
+  fixed?: boolean;
+}
+
+export interface ScrollProgressCircleProps extends CommonProps {
+  variant: "circle";
+  /** Diameter in px. */
+  size?: number;
+  /** Stroke width in px. */
+  thickness?: number;
+}
+
+export type ScrollProgressProps =
+  | ScrollProgressBarProps
+  | ScrollProgressCircleProps;
+
+function useProgressValue(source: MotionValue<number> | undefined, spring: boolean) {
+  const reduce = useReducedMotion();
+  const fallback = useSmoothScroll().progress;
+  const raw = source ?? fallback;
+  const smoothed = useSpring(raw, PROGRESS_SPRING);
+  return spring && !reduce ? smoothed : raw;
+}
+
+export function ScrollProgress(props: ScrollProgressProps) {
+  if (props.variant === "circle") return <ScrollProgressCircle {...props} />;
+  return <ScrollProgressBar {...props} />;
+}
+
+function ScrollProgressBar({
+  progress,
+  spring = true,
+  position = "top",
+  height = 2,
+  fixed = true,
+  className,
+}: ScrollProgressBarProps) {
+  const value = useProgressValue(progress, spring);
+  return (
+    <motion.div
+      aria-hidden
+      style={{ height, scaleX: value }}
+      className={cn(
+        "left-0 right-0 z-50 origin-left bg-foreground",
+        fixed ? "fixed" : "absolute",
+        position === "top" ? "top-0" : "bottom-0",
+        className,
+      )}
+    />
+  );
+}
+
+function ScrollProgressCircle({
+  progress,
+  spring = true,
+  size = 40,
+  thickness = 3,
+  className,
+}: ScrollProgressCircleProps) {
+  const value = useProgressValue(progress, spring);
+  const radius = (size - thickness) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = useTransform(value, (v) => circumference * (1 - v));
+
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      role="presentation"
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      className={cn("text-foreground", className)}
+    >
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        fill="none"
+        strokeWidth={thickness}
+        className="stroke-current opacity-15"
+      />
+      <motion.circle
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        fill="none"
+        strokeWidth={thickness}
+        strokeLinecap="round"
+        className="stroke-current"
+        strokeDasharray={circumference}
+        style={{ strokeDashoffset: offset }}
+        transform={`rotate(-90 ${size / 2} ${size / 2})`}
+      />
+    </svg>
+  );
+}