motion-ui-skill 2.0.0

package/components/motion/filter-builder.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import {
+  Check,
+  ChevronDown,
+  Filter,
+  Plus,
+  RotateCcw,
+  Sparkles,
+  X,
+} from "lucide-react";
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useState } from "react";
+import { EASE_OUT, SPRING_BOUNCE, SPRING_LAYOUT, SPRING_PRESS } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export interface FilterField {
+  id: string;
+  label: string;
+  type: "text" | "select" | "number";
+  options?: string[];
+}
+
+export interface FilterRule {
+  id: string;
+  fieldId: string;
+  operator: string;
+  value: string;
+}
+
+export interface FilterBuilderProps extends Omit<HTMLMotionProps<"div">, "children" | "onChange"> {
+  fields: FilterField[];
+  initialRules?: FilterRule[];
+  conjunction?: "AND" | "OR";
+  onChange?: (rules: FilterRule[], conjunction: "AND" | "OR") => void;
+  className?: string;
+}
+
+const OPERATORS_BY_TYPE = {
+  text: [
+    { label: "contains", value: "contains" },
+    { label: "equals", value: "equals" },
+    { label: "starts with", value: "starts_with" },
+  ],
+  select: [
+    { label: "is", value: "is" },
+    { label: "is not", value: "is_not" },
+  ],
+  number: [
+    { label: "equals", value: "=" },
+    { label: "greater than", value: ">" },
+    { label: "less than", value: "<" },
+  ],
+};
+
+export function FilterBuilder({
+  fields,
+  initialRules = [],
+  conjunction: initialConjunction = "AND",
+  onChange,
+  className,
+  ...props
+}: FilterBuilderProps) {
+  const [rules, setRules] = useState<FilterRule[]>(initialRules);
+  const [conjunction, setConjunction] = useState<"AND" | "OR">(initialConjunction);
+  const shouldReduceMotion = useReducedMotion();
+
+  const addRule = () => {
+    if (fields.length === 0) return;
+    const defaultField = fields[0];
+    const defaultOperator = OPERATORS_BY_TYPE[defaultField.type][0].value;
+    const defaultVal = defaultField.options ? defaultField.options[0] : "";
+
+    const newRule: FilterRule = {
+      id: `rule-${Date.now()}-${Math.random().toString(36).substr(2, 4)}`,
+      fieldId: defaultField.id,
+      operator: defaultOperator,
+      value: defaultVal,
+    };
+
+    const next = [...rules, newRule];
+    setRules(next);
+    onChange?.(next, conjunction);
+  };
+
+  const removeRule = (id: string) => {
+    const next = rules.filter((r) => r.id !== id);
+    setRules(next);
+    onChange?.(next, conjunction);
+  };
+
+  const updateRule = (id: string, partial: Partial<FilterRule>) => {
+    const next = rules.map((r) => {
+      if (r.id === id) {
+        const updated = { ...r, ...partial };
+        if (partial.fieldId && partial.fieldId !== r.fieldId) {
+          const field = fields.find((f) => f.id === partial.fieldId);
+          if (field) {
+            updated.operator = OPERATORS_BY_TYPE[field.type][0].value;
+            updated.value = field.options ? field.options[0] : "";
+          }
+        }
+        return updated;
+      }
+      return r;
+    });
+    setRules(next);
+    onChange?.(next, conjunction);
+  };
+
+  const toggleConjunction = () => {
+    const next = conjunction === "AND" ? "OR" : "AND";
+    setConjunction(next);
+    onChange?.(rules, next);
+  };
+
+  const resetFilters = () => {
+    setRules([]);
+    onChange?.([], conjunction);
+  };
+
+  return (
+    <motion.div
+      className={cn(
+        "flex flex-col gap-3 rounded-2xl border border-border bg-card p-4 shadow-sm",
+        className
+      )}
+      {...props}
+    >
+      {/* Header Bar */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Filter className="size-4 text-primary" />
+          <h3 className="text-sm font-semibold text-foreground tracking-tight">
+            Filters
+          </h3>
+          {rules.length > 0 && (
+            <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-semibold text-primary tabular-nums">
+              {rules.length}
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          {rules.length > 1 && (
+            <motion.button
+              type="button"
+              whileTap={shouldReduceMotion ? undefined : { scale: 0.95 }}
+              onClick={toggleConjunction}
+              className="rounded-lg border border-border bg-muted/60 px-2.5 py-1 text-xs font-medium text-foreground hover:bg-muted transition-colors"
+            >
+              Match: <span className="font-semibold text-primary">{conjunction}</span>
+            </motion.button>
+          )}
+
+          {rules.length > 0 && (
+            <motion.button
+              type="button"
+              whileTap={shouldReduceMotion ? undefined : { scale: 0.95 }}
+              onClick={resetFilters}
+              aria-label="Reset all filters"
+              className="flex items-center gap-1 rounded-lg px-2 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <RotateCcw className="size-3.5" />
+              <span>Clear</span>
+            </motion.button>
+          )}
+        </div>
+      </div>
+
+      {/* Rules List */}
+      <div className="flex flex-col gap-2">
+        <AnimatePresence mode="popLayout">
+          {rules.map((rule, idx) => {
+            const field = fields.find((f) => f.id === rule.fieldId) || fields[0];
+            if (!field) return null;
+            const availableOps = OPERATORS_BY_TYPE[field.type];
+
+            return (
+              <motion.div
+                key={rule.id}
+                layout
+                initial={{ opacity: 0, y: -8, scale: 0.98 }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.95, transition: { duration: 0.15 } }}
+                transition={SPRING_LAYOUT}
+                className="flex flex-wrap items-center gap-2 rounded-xl border border-border/70 bg-background/80 p-2 text-xs"
+              >
+                {idx > 0 && (
+                  <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground uppercase">
+                    {conjunction}
+                  </span>
+                )}
+
+                {/* Field Selector */}
+                <select
+                  value={rule.fieldId}
+                  onChange={(e) => updateRule(rule.id, { fieldId: e.target.value })}
+                  className="rounded-lg border border-border bg-card px-2.5 py-1.5 font-medium text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                >
+                  {fields.map((f) => (
+                    <option key={f.id} value={f.id}>
+                      {f.label}
+                    </option>
+                  ))}
+                </select>
+
+                {/* Operator Selector */}
+                <select
+                  value={rule.operator}
+                  onChange={(e) => updateRule(rule.id, { operator: e.target.value })}
+                  className="rounded-lg border border-border bg-card px-2 py-1.5 text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                >
+                  {availableOps.map((op) => (
+                    <option key={op.value} value={op.value}>
+                      {op.label}
+                    </option>
+                  ))}
+                </select>
+
+                {/* Value Input */}
+                {field.options ? (
+                  <select
+                    value={rule.value}
+                    onChange={(e) => updateRule(rule.id, { value: e.target.value })}
+                    className="flex-1 min-w-[120px] rounded-lg border border-border bg-card px-2.5 py-1.5 font-medium text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                  >
+                    {field.options.map((opt) => (
+                      <option key={opt} value={opt}>
+                        {opt}
+                      </option>
+                    ))}
+                  </select>
+                ) : (
+                  <input
+                    type={field.type === "number" ? "number" : "text"}
+                    value={rule.value}
+                    placeholder="Enter value..."
+                    onChange={(e) => updateRule(rule.id, { value: e.target.value })}
+                    className="flex-1 min-w-[120px] rounded-lg border border-border bg-card px-2.5 py-1.5 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                  />
+                )}
+
+                {/* Delete Button */}
+                <motion.button
+                  type="button"
+                  whileTap={shouldReduceMotion ? undefined : { scale: 0.9 }}
+                  onClick={() => removeRule(rule.id)}
+                  aria-label="Remove filter rule"
+                  className="rounded-lg p-1.5 text-muted-foreground hover:bg-destructive/10 hover:text-destructive transition-colors"
+                >
+                  <X className="size-3.5" />
+                </motion.button>
+              </motion.div>
+            );
+          })}
+        </AnimatePresence>
+
+        {rules.length === 0 && (
+          <div className="flex h-20 flex-col items-center justify-center rounded-xl border border-dashed border-border/80 text-xs text-muted-foreground">
+            <span>No filters currently applied.</span>
+          </div>
+        )}
+      </div>
+
+      {/* Add Filter Button */}
+      <motion.button
+        type="button"
+        whileTap={shouldReduceMotion ? undefined : { scale: 0.98 }}
+        onClick={addRule}
+        className="flex items-center justify-center gap-1.5 rounded-xl border border-dashed border-border py-2 text-xs font-medium text-muted-foreground hover:border-primary/50 hover:bg-primary/5 hover:text-primary transition-colors"
+      >
+        <Plus className="size-3.5" />
+        <span>Add Filter Rule</span>
+      </motion.button>
+    </motion.div>
+  );
+}

package/components/motion/frame.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { Laptop, Smartphone, Tablet, ExternalLink } from "lucide-react";
+import {
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useState } from "react";
+import { SPRING_LAYOUT } from "@/lib/ease";
+import { useHaptic } from "@/lib/hooks/use-haptic";
+import { cn } from "@/lib/utils";
+
+export type FrameViewport = "desktop" | "tablet" | "mobile";
+
+export interface FrameProps extends HTMLMotionProps<"div"> {
+  url?: string;
+  defaultViewport?: FrameViewport;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const VIEWPORT_WIDTHS = {
+  desktop: "w-full max-w-4xl",
+  tablet: "w-full max-w-xl",
+  mobile: "w-full max-w-sm",
+};
+
+export function Frame({
+  url = "https://acme.inc",
+  defaultViewport = "desktop",
+  children,
+  className,
+  ...props
+}: FrameProps) {
+  const [viewport, setViewport] = useState<FrameViewport>(defaultViewport);
+  const shouldReduceMotion = useReducedMotion();
+  const triggerHaptic = useHaptic();
+
+  const selectViewport = (vp: FrameViewport) => {
+    triggerHaptic("selection");
+    setViewport(vp);
+  };
+
+  return (
+    <motion.div className={cn("flex flex-col items-center w-full py-4", className)} {...props}>
+      {/* Top Device Switcher Controls */}
+      <div className="flex items-center gap-1.5 p-1 rounded-xl border border-border bg-card/80 backdrop-blur-md mb-4 shadow-sm">
+        <button
+          type="button"
+          onClick={() => selectViewport("desktop")}
+          className={cn(
+            "flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-colors",
+            viewport === "desktop" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
+          )}
+        >
+          <Laptop className="size-3.5" />
+          <span>Desktop</span>
+        </button>
+        <button
+          type="button"
+          onClick={() => selectViewport("tablet")}
+          className={cn(
+            "flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-colors",
+            viewport === "tablet" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
+          )}
+        >
+          <Tablet className="size-3.5" />
+          <span>Tablet</span>
+        </button>
+        <button
+          type="button"
+          onClick={() => selectViewport("mobile")}
+          className={cn(
+            "flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-colors",
+            viewport === "mobile" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
+          )}
+        >
+          <Smartphone className="size-3.5" />
+          <span>Mobile</span>
+        </button>
+      </div>
+
+      {/* Frame Container */}
+      <motion.div
+        layout
+        transition={shouldReduceMotion ? undefined : SPRING_LAYOUT}
+        className={cn(
+          "overflow-hidden rounded-2xl border border-border bg-card shadow-2xl transition-all",
+          VIEWPORT_WIDTHS[viewport]
+        )}
+      >
+        {/* Browser Chrome Header */}
+        <div className="flex items-center justify-between border-b border-border bg-muted/40 px-4 py-2.5">
+          <div className="flex items-center gap-1.5">
+            <span className="size-2.5 rounded-full bg-rose-500/80" />
+            <span className="size-2.5 rounded-full bg-amber-500/80" />
+            <span className="size-2.5 rounded-full bg-emerald-500/80" />
+          </div>
+
+          <div className="flex items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-1 text-[11px] font-mono text-muted-foreground">
+            <span className="truncate max-w-[200px]">{url}</span>
+            <ExternalLink className="size-2.5" />
+          </div>
+
+          <div className="w-8" />
+        </div>
+
+        {/* Content Area */}
+        <div className="min-h-[320px] max-h-[600px] overflow-auto bg-background p-4">
+          {children}
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+}

package/components/motion/gantt.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import {
+  Calendar,
+  CheckCircle2,
+  ChevronRight,
+  Diamond,
+} from "lucide-react";
+import {
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useState } from "react";
+import { SPRING_BOUNCE, SPRING_LAYOUT } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export interface GanttTask {
+  id: string;
+  name: string;
+  startDay: number; // 1 to 30
+  duration: number; // days
+  progress?: number; // 0 to 100
+  isMilestone?: boolean;
+  color?: string;
+}
+
+export interface GanttProps extends Omit<HTMLMotionProps<"div">, "children"> {
+  tasks: GanttTask[];
+  totalDays?: number;
+  onTaskClick?: (task: GanttTask) => void;
+  className?: string;
+}
+
+export function Gantt({
+  tasks,
+  totalDays = 20,
+  onTaskClick,
+  className,
+  ...props
+}: GanttProps) {
+  const [hoveredTask, setHoveredTask] = useState<string | null>(null);
+  const shouldReduceMotion = useReducedMotion();
+
+  return (
+    <motion.div
+      className={cn(
+        "flex w-full flex-col rounded-2xl border border-border bg-card p-4 shadow-sm overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      {/* Header Timeline Days */}
+      <div className="flex items-center border-b border-border/80 pb-2 mb-3">
+        <div className="w-48 shrink-0 text-xs font-semibold text-muted-foreground">
+          Task Name
+        </div>
+        <div className="flex flex-1 justify-between px-2 text-[10px] font-mono text-muted-foreground">
+          {Array.from({ length: totalDays }).map((_, i) => (
+            <span key={i} className="w-6 text-center tabular-nums">
+              D{i + 1}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* Task Rows */}
+      <div className="flex flex-col gap-2">
+        {tasks.map((task) => {
+          const isHovered = hoveredTask === task.id;
+          const leftPercent = ((task.startDay - 1) / totalDays) * 100;
+          const widthPercent = (task.duration / totalDays) * 100;
+
+          return (
+            <div
+              key={task.id}
+              role={onTaskClick ? "button" : undefined}
+              tabIndex={onTaskClick ? 0 : undefined}
+              aria-label={onTaskClick ? `Open task ${task.name}` : undefined}
+              onMouseEnter={() => setHoveredTask(task.id)}
+              onMouseLeave={() => setHoveredTask(null)}
+              onClick={() => onTaskClick?.(task)}
+              onKeyDown={(event) => {
+                if (onTaskClick && (event.key === "Enter" || event.key === " ")) {
+                  event.preventDefault();
+                  onTaskClick(task);
+                }
+              }}
+              className={cn(
+                "group flex items-center rounded-xl p-1.5 transition-colors cursor-pointer",
+                isHovered ? "bg-muted/50" : "hover:bg-muted/30",
+                onTaskClick && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              )}
+            >
+              {/* Task Title */}
+              <div className="flex w-48 shrink-0 items-center gap-2 pr-2">
+                {task.isMilestone ? (
+                  <Diamond className="size-3 text-amber-500 fill-amber-500/20 shrink-0" />
+                ) : (
+                  <div className="size-2 rounded-full bg-primary shrink-0" />
+                )}
+                <span className="truncate text-xs font-medium text-foreground">
+                  {task.name}
+                </span>
+              </div>
+
+              {/* Timeline Bar Track */}
+              <div
+                className="relative flex flex-1 h-7 items-center bg-muted/20 rounded-lg overflow-hidden"
+                style={{
+                  backgroundImage: "linear-gradient(to right, hsl(var(--border) / 0.3) 1px, transparent 1px)",
+                  backgroundSize: `calc(100% / ${Math.max(totalDays, 1)}) 100%`,
+                }}
+              >
+
+                {/* Progress Task Bar */}
+                {task.isMilestone ? (
+                  <motion.div
+                    style={{ left: `${leftPercent}%` }}
+                    whileHover={shouldReduceMotion ? undefined : { scale: 1.25 }}
+                    transition={SPRING_BOUNCE}
+                    className="absolute size-4 rotate-45 rounded-sm bg-amber-500 shadow-md border border-background"
+                  />
+                ) : (
+                  <motion.div
+                    style={{
+                      left: `${leftPercent}%`,
+                      width: `${widthPercent}%`,
+                    }}
+                    whileHover={shouldReduceMotion ? undefined : { y: -1 }}
+                    transition={SPRING_LAYOUT}
+                    className={cn(
+                      "absolute h-5 rounded-md px-2 flex items-center shadow-sm overflow-hidden",
+                      task.color || "bg-primary text-primary-foreground"
+                    )}
+                  >
+                    {/* Completion Fill Layer */}
+                    {task.progress !== undefined && (
+                      <div
+                        className="absolute inset-y-0 left-0 bg-black/15"
+                        style={{ width: `${task.progress}%` }}
+                      />
+                    )}
+                    <span className="relative z-10 text-[10px] font-semibold truncate leading-none">
+                      {task.progress !== undefined ? `${task.progress}%` : `${task.duration}d`}
+                    </span>
+                  </motion.div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </motion.div>
+  );
+}

package/components/motion/glow-button.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import {
+  motion,
+  useMotionValue,
+  useReducedMotion,
+  useSpring,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useRef } from "react";
+import { SPRING_MOUSE, SPRING_PRESS } from "@/lib/ease";
+import { useHaptic } from "@/lib/hooks/use-haptic";
+import { cn } from "@/lib/utils";
+
+export interface GlowButtonProps extends HTMLMotionProps<"button"> {
+  children: React.ReactNode;
+  magnetic?: boolean;
+  magneticDistance?: number;
+  glowColor?: string;
+  className?: string;
+}
+
+export function GlowButton({
+  children,
+  magnetic = true,
+  magneticDistance = 0.25,
+  glowColor = "from-primary via-purple-500 to-pink-500",
+  className,
+  onClick,
+  ...props
+}: GlowButtonProps) {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const shouldReduceMotion = useReducedMotion();
+  const triggerHaptic = useHaptic();
+
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+
+  const springX = useSpring(mouseX, SPRING_MOUSE);
+  const springY = useSpring(mouseY, SPRING_MOUSE);
+
+  const handleMouseMove = (e: React.PointerEvent<HTMLButtonElement>) => {
+    if (!magnetic || shouldReduceMotion || !buttonRef.current) return;
+    const { left, top, width, height } = buttonRef.current.getBoundingClientRect();
+    const centerX = left + width / 2;
+    const centerY = top + height / 2;
+    mouseX.set((e.clientX - centerX) * magneticDistance);
+    mouseY.set((e.clientY - centerY) * magneticDistance);
+  };
+
+  const handleMouseLeave = () => {
+    mouseX.set(0);
+    mouseY.set(0);
+  };
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    triggerHaptic("light");
+    onClick?.(e);
+  };
+
+  return (
+    <motion.button
+      ref={buttonRef}
+      style={magnetic && !shouldReduceMotion ? { x: springX, y: springY } : undefined}
+      onPointerMove={handleMouseMove}
+      onPointerLeave={handleMouseLeave}
+      onClick={handleClick}
+      whileTap={shouldReduceMotion ? undefined : { scale: 0.96 }}
+      transition={SPRING_PRESS}
+      className={cn(
+        "group relative inline-flex items-center justify-center rounded-xl p-[1px] font-medium text-sm transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      )}
+      {...props}
+    >
+      {/* Animated Iridescent Glow Perimeter */}
+      <span
+        aria-hidden="true"
+        className={cn(
+          "absolute inset-0 rounded-xl bg-gradient-to-r opacity-70 blur-sm transition-opacity duration-300 group-hover:opacity-100",
+          glowColor,
+          !shouldReduceMotion && "animate-pulse"
+        )}
+      />
+
+      {/* Outer Border Layer */}
+      <span
+        aria-hidden="true"
+        className={cn(
+          "absolute inset-0 rounded-xl bg-gradient-to-r transition-all duration-300",
+          glowColor
+        )}
+      />
+
+      {/* Button Body Surface */}
+      <span className="relative flex items-center justify-center gap-2 rounded-[11px] bg-background/95 px-4 py-2.5 text-foreground backdrop-blur-md transition-colors group-hover:bg-background/80">
+        {children}
+      </span>
+    </motion.button>
+  );
+}