motion-ui-skill 2.0.0

package/components/motion/toggle-group.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import {
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useState, type ReactNode } from "react";
+import { SPRING_PRESS } from "@/lib/ease";
+import { useHaptic } from "@/lib/hooks/use-haptic";
+import { cn } from "@/lib/utils";
+
+export interface ToggleItem {
+  value: string;
+  label?: string;
+  icon?: ReactNode;
+  ariaLabel?: string;
+  disabled?: boolean;
+}
+
+export interface ToggleGroupProps
+  extends Omit<HTMLMotionProps<"div">, "onChange" | "defaultValue"> {
+  items: ToggleItem[];
+  type?: "single" | "multiple";
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onChange?: (val: any) => void;
+  size?: "sm" | "md" | "lg";
+  variant?: "default" | "outline";
+  className?: string;
+}
+
+const SIZE_STYLES = {
+  sm: "size-8 text-xs",
+  md: "size-9 text-sm",
+  lg: "size-10 text-base",
+};
+
+export function ToggleGroup({
+  items,
+  type = "single",
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  size = "md",
+  variant = "default",
+  className,
+  ...props
+}: ToggleGroupProps) {
+  const [internalSingle, setInternalSingle] = useState<string>(
+    typeof defaultValue === "string" ? defaultValue : ""
+  );
+  const [internalMulti, setInternalMulti] = useState<string[]>(
+    Array.isArray(defaultValue) ? defaultValue : []
+  );
+  const shouldReduceMotion = useReducedMotion();
+  const triggerHaptic = useHaptic();
+
+  const isControlled = controlledValue !== undefined;
+
+  const isSelected = (val: string) => {
+    if (type === "single") {
+      return isControlled ? controlledValue === val : internalSingle === val;
+    }
+    const current = isControlled
+      ? (controlledValue as string[]) || []
+      : internalMulti;
+    return current.includes(val);
+  };
+
+  const handleToggle = (val: string) => {
+    triggerHaptic("selection");
+    if (type === "single") {
+      const next = isSelected(val) ? "" : val;
+      if (!isControlled) setInternalSingle(next);
+      onChange?.(next);
+    } else {
+      const current = isControlled
+        ? (controlledValue as string[]) || []
+        : internalMulti;
+      const next = current.includes(val)
+        ? current.filter((v) => v !== val)
+        : [...current, val];
+      if (!isControlled) setInternalMulti(next);
+      onChange?.(next);
+    }
+  };
+
+  return (
+    <motion.div
+      role="group"
+      className={cn(
+        "inline-flex items-center gap-1 rounded-xl p-1",
+        variant === "outline" ? "border border-border bg-background" : "bg-muted/60",
+        className
+      )}
+      {...props}
+    >
+      {items.map((item) => {
+        const selected = isSelected(item.value);
+
+        return (
+          <motion.button
+            key={item.value}
+            type="button"
+            aria-pressed={selected}
+            disabled={item.disabled}
+            onClick={() => handleToggle(item.value)}
+            whileTap={shouldReduceMotion || item.disabled ? undefined : { scale: 0.92 }}
+            transition={SPRING_PRESS}
+            aria-label={item.ariaLabel || item.label}
+            className={cn(
+              "relative flex items-center justify-center rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring select-none",
+              SIZE_STYLES[size],
+              selected
+                ? "bg-background text-foreground shadow-sm border border-border/80"
+                : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+              item.disabled && "opacity-40 cursor-not-allowed"
+            )}
+          >
+            {item.icon && <span className="size-4">{item.icon}</span>}
+            {item.label && <span className="px-1">{item.label}</span>}
+          </motion.button>
+        );
+      })}
+    </motion.div>
+  );
+}

package/components/motion/tooltip.tsx

@@ -0,0 +1,297 @@
+"use client";
+
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type Variants,
+} from "motion/react";
+import {
+  cloneElement,
+  isValidElement,
+  type PointerEvent,
+  type ReactElement,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+import { EASE_OUT } from "@/lib/ease";
+import { useDismiss } from "@/lib/hooks/use-dismiss";
+import { useHoverGesture } from "@/lib/hooks/use-hover-gesture";
+import { useTapGesture } from "@/lib/hooks/use-tap-gesture";
+import { cn } from "@/lib/utils";
+
+type Side = "top" | "right" | "bottom" | "left";
+
+export interface TooltipProps {
+  content: ReactNode;
+  children: ReactElement;
+  side?: Side;
+  /** Delay before showing (ms). Default 120. */
+  delay?: number;
+  className?: string;
+  /** Classes for the outer wrapper span. Use to fix baseline / fill parent. */
+  wrapperClassName?: string;
+}
+
+// Gap between trigger and tooltip, in px.
+const GAP = 8;
+
+// Centering transform for the fixed-positioned anchor point, per side.
+const anchorTransform: Record<Side, string> = {
+  top: "translate(-50%, -100%)",
+  bottom: "translate(-50%, 0)",
+  left: "translate(-100%, -50%)",
+  right: "translate(0, -50%)",
+};
+
+const transformOrigin: Record<Side, string> = {
+  top: "center bottom",
+  bottom: "center top",
+  left: "right center",
+  right: "left center",
+};
+
+// Offset is in the direction *away* from the trigger — content originates near
+// the trigger and rises into resting position.
+const offsetFrom: Record<Side, { x?: number; y?: number }> = {
+  top: { y: 8 },
+  bottom: { y: -8 },
+  left: { x: 8 },
+  right: { x: -8 },
+};
+
+function buildVariants(side: Side): Variants {
+  const o = offsetFrom[side];
+  return {
+    initial: {
+      opacity: 0,
+      scale: 0.9,
+      filter: "blur(5px)",
+      x: o.x ?? 0,
+      y: o.y ?? 0,
+    },
+    animate: {
+      opacity: 1,
+      scale: 1,
+      filter: "blur(0px)",
+      x: 0,
+      y: 0,
+      transition: {
+        type: "spring",
+        stiffness: 380,
+        damping: 30,
+        mass: 0.7,
+        opacity: { duration: 0.14, ease: EASE_OUT },
+        filter: { duration: 0.18, ease: EASE_OUT },
+      },
+    },
+    exit: {
+      opacity: 0,
+      scale: 0.94,
+      filter: "blur(3px)",
+      x: (o.x ?? 0) * 0.6,
+      y: (o.y ?? 0) * 0.6,
+      transition: { duration: 0.12, ease: EASE_OUT },
+    },
+  };
+}
+
+const REDUCED_VARIANTS: Variants = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1, transition: { duration: 0.14, ease: EASE_OUT } },
+  exit: { opacity: 0, transition: { duration: 0.1, ease: EASE_OUT } },
+};
+
+// Once any tooltip has just closed, neighbouring tooltips open without the
+// initial delay — moving along a toolbar feels instant after the first one.
+const WARM_WINDOW_MS = 300;
+let lastHiddenAt = 0;
+
+export function Tooltip({
+  content,
+  children,
+  side = "top",
+  delay = 120,
+  className,
+  wrapperClassName,
+}: TooltipProps) {
+  const [open, setOpen] = useState(false);
+  const [coords, setCoords] = useState<{ top: number; left: number } | null>(
+    null,
+  );
+  const id = useId();
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const anchorRef = useRef<HTMLSpanElement>(null);
+  const hover = useHoverGesture();
+  const reduce = useReducedMotion();
+
+  // Anchor point in viewport coords, on the edge of the trigger facing `side`.
+  // Position:fixed means these viewport coords place the tooltip directly, so
+  // it escapes every ancestor's stacking context and overflow.
+  const place = useCallback(() => {
+    const el = anchorRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const cx = r.left + r.width / 2;
+    const cy = r.top + r.height / 2;
+    const point: Record<Side, { top: number; left: number }> = {
+      top: { top: r.top - GAP, left: cx },
+      bottom: { top: r.bottom + GAP, left: cx },
+      left: { top: cy, left: r.left - GAP },
+      right: { top: cy, left: r.right + GAP },
+    };
+    setCoords(point[side]);
+  }, [side]);
+
+  const show = useCallback(() => {
+    if (timer.current) clearTimeout(timer.current);
+    const warm = Date.now() - lastHiddenAt < WARM_WINDOW_MS;
+    timer.current = setTimeout(
+      () => {
+        place();
+        setOpen(true);
+      },
+      warm ? 0 : delay,
+    );
+  }, [delay, place]);
+
+  const hide = useCallback(() => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    if (open) lastHiddenAt = Date.now();
+    setOpen(false);
+  }, [open]);
+
+  // A finger never hovers, and Safari does not focus a button on tap either, so
+  // the label is only reachable if the tap itself opens the tooltip. A click
+  // carries no pointerType, so the pointerdown that preceded it is what says
+  // whether this was a tap; keyboard activation arrives with no pointerdown at
+  // all, and focus has already shown the label there.
+  const tap = useTapGesture<boolean>();
+
+  const toggleOnTap = useCallback(() => {
+    const gesture = tap.take();
+    if (!gesture || gesture.pointerType === "mouse") return;
+    if (gesture.state) {
+      hide();
+      return;
+    }
+    if (timer.current) clearTimeout(timer.current);
+    place();
+    setOpen(true);
+  }, [hide, place, tap]);
+
+  // ...and closed again by the next tap that lands somewhere else. The label
+  // covers nothing interactive, so that tap passes through to what it hit.
+  useDismiss(open, hide, anchorRef);
+
+  // Keep the tooltip pinned to the trigger while it's open and the page scrolls
+  // or resizes (fixed coords are viewport-relative).
+  useEffect(() => {
+    if (!open) return;
+    const onMove = () => place();
+    window.addEventListener("scroll", onMove, true);
+    window.addEventListener("resize", onMove);
+    return () => {
+      window.removeEventListener("scroll", onMove, true);
+      window.removeEventListener("resize", onMove);
+    };
+  }, [open, place]);
+
+  const variants = useMemo(
+    () => (reduce ? REDUCED_VARIANTS : buildVariants(side)),
+    [reduce, side],
+  );
+
+  if (!isValidElement(children)) return children;
+
+  // The label describes the trigger, so it has to name the trigger itself.
+  // Everything else the tooltip needs is read off the anchor below instead of
+  // cloned on: a handler written onto the child is the child's handler as far
+  // as that child can tell, and a component that owns its activation —
+  // hard-wiring onClick and spreading the rest of its props over it, as
+  // ThemeToggle does — then runs the tooltip's instead of its own. Composing
+  // with `props.onClick` cannot save it either, because a component element's
+  // props hold nothing the component does internally.
+  const trigger = cloneElement(children as ReactElement<Record<string, unknown>>, {
+    "aria-describedby": id,
+  });
+
+  return (
+    <>
+      {/* biome-ignore lint/a11y/noStaticElementInteractions: the anchor is not a
+          control — it observes the trigger it wraps. Every event listed reaches
+          it on its own (pointerdown/click/keydown/pointercancel bubble, focus
+          and blur arrive as focusin/focusout, and enter/leave are derived from
+          pointerover/pointerout along a path the anchor is on), so the trigger
+          keeps every handler it came with. */}
+      <span
+        ref={anchorRef}
+        className={cn("relative inline-flex align-middle", wrapperClassName)}
+        // Pointer events, not the mouse pair: a tap fires compatibility
+        // mouseenter/mouseleave that carry no pointerType, which raced the tap
+        // path into opening and closing the same label.
+        onPointerEnter={(event: PointerEvent) => {
+          if (hover.enter(event)) show();
+        }}
+        onPointerLeave={(event: PointerEvent) => {
+          if (hover.leave(event)) hide();
+        }}
+        onFocus={show}
+        onBlur={hide}
+        onPointerDown={(event: PointerEvent) => tap.start(event, open)}
+        // A gesture the platform took away sends no click, and a key press
+        // starts an activation that never had a pointer behind it. Either way
+        // the record has to go, or the next click reads a finger that has long
+        // since lifted.
+        onPointerCancel={tap.drop}
+        onKeyDown={tap.drop}
+        onClick={toggleOnTap}
+      >
+        {trigger}
+      </span>
+      {typeof document !== "undefined"
+        ? createPortal(
+            <AnimatePresence>
+              {open && coords ? (
+                <span
+                  aria-hidden
+                  className="pointer-events-none fixed z-[9999]"
+                  style={{
+                    top: coords.top,
+                    left: coords.left,
+                    transform: anchorTransform[side],
+                  }}
+                >
+                  <motion.span
+                    id={id}
+                    role="tooltip"
+                    variants={variants}
+                    initial="initial"
+                    animate="animate"
+                    exit="exit"
+                    style={{ transformOrigin: transformOrigin[side] }}
+                    className={cn(
+                      "block whitespace-nowrap rounded-lg border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground shadow-lg",
+                      className,
+                    )}
+                  >
+                    {content}
+                  </motion.span>
+                </span>
+              ) : null}
+            </AnimatePresence>,
+            document.body,
+          )
+        : null}
+    </>
+  );
+}

package/components/motion/tree-view.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import {
+  ChevronRight,
+  File,
+  Folder,
+  FolderOpen,
+} from "lucide-react";
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+} from "motion/react";
+import React, { useEffect, useState } from "react";
+import { EASE_OUT, SPRING_LAYOUT, SPRING_PRESS } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export interface TreeNode {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  children?: TreeNode[];
+}
+
+export interface TreeViewProps {
+  data: TreeNode[];
+  selectedId?: string;
+  onSelect?: (node: TreeNode) => void;
+  className?: string;
+}
+
+interface TreeItemProps {
+  node: TreeNode;
+  level: number;
+  selectedId?: string;
+  onSelect?: (node: TreeNode) => void;
+  focusable?: boolean;
+}
+
+function containsNode(node: TreeNode, id?: string): boolean {
+  return Boolean(id && (node.id === id || node.children?.some((child) => containsNode(child, id))));
+}
+
+function TreeItem({ node, level, selectedId, onSelect, focusable = false }: TreeItemProps) {
+  const hasChildren = Boolean(node.children && node.children.length > 0);
+  const [isOpen, setIsOpen] = useState(() => level === 0 || containsNode(node, selectedId));
+  const shouldReduceMotion = useReducedMotion();
+  const isSelected = selectedId === node.id;
+
+  useEffect(() => {
+    if (selectedId && containsNode(node, selectedId)) setIsOpen(true);
+  }, [node, selectedId]);
+
+  const handleClick = () => {
+    if (hasChildren) {
+      setIsOpen(!isOpen);
+    }
+    onSelect?.(node);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleClick();
+      return;
+    }
+    if (event.key === "ArrowRight" && hasChildren && !isOpen) {
+      event.preventDefault();
+      setIsOpen(true);
+      return;
+    }
+    if (event.key === "ArrowLeft" && hasChildren && isOpen) {
+      event.preventDefault();
+      setIsOpen(false);
+      return;
+    }
+    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+    const tree = event.currentTarget.closest('[role="tree"]');
+    const items = tree
+      ? Array.from(tree.querySelectorAll<HTMLElement>('[role="treeitem"]'))
+      : [];
+    const currentIndex = items.indexOf(event.currentTarget);
+    const nextIndex = event.key === "ArrowDown" ? currentIndex + 1 : currentIndex - 1;
+    if (items[nextIndex]) {
+      event.preventDefault();
+      items[nextIndex].focus();
+    }
+  };
+
+  return (
+    <div className="select-none">
+      <motion.div
+        role="treeitem"
+        tabIndex={isSelected || focusable ? 0 : -1}
+        aria-selected={isSelected}
+        aria-expanded={hasChildren ? isOpen : undefined}
+        aria-level={level + 1}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        whileTap={shouldReduceMotion ? undefined : { scale: 0.98 }}
+        transition={SPRING_PRESS}
+        style={{ paddingLeft: `${level * 16 + 8}px` }}
+        className={cn(
+          "flex items-center gap-2 rounded-xl py-1.5 pr-2.5 text-xs font-medium transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          isSelected
+            ? "bg-primary/10 text-primary font-semibold"
+            : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+        )}
+      >
+        {hasChildren ? (
+          <motion.span
+            animate={{ rotate: isOpen ? 90 : 0 }}
+            transition={shouldReduceMotion ? { duration: 0 } : SPRING_LAYOUT}
+            className="text-muted-foreground/80"
+          >
+            <ChevronRight className="size-3.5" />
+          </motion.span>
+        ) : (
+          <span className="size-3.5" />
+        )}
+
+        {hasChildren ? (
+          isOpen ? (
+            <FolderOpen className="size-4 text-primary shrink-0" />
+          ) : (
+            <Folder className="size-4 text-muted-foreground shrink-0" />
+          )
+        ) : (
+          <File className="size-3.5 text-muted-foreground shrink-0" />
+        )}
+
+        <span className="truncate">{node.label}</span>
+      </motion.div>
+
+      {/* Children Nodes */}
+      <AnimatePresence initial={false}>
+        {hasChildren && isOpen && (
+          <motion.div
+            role="group"
+            initial={{ opacity: 0, height: 0 }}
+            animate={{
+              opacity: 1,
+              height: "auto",
+              transition: shouldReduceMotion
+                ? { duration: 0 }
+                : { height: SPRING_LAYOUT, opacity: { duration: 0.2, ease: EASE_OUT } },
+            }}
+            exit={{
+              opacity: 0,
+              height: 0,
+              transition: shouldReduceMotion
+                ? { duration: 0 }
+                : { height: { duration: 0.2 }, opacity: { duration: 0.15 } },
+            }}
+            className="relative overflow-hidden"
+          >
+            {/* Indentation line */}
+            <div
+              className="absolute bottom-0 top-0 border-l border-border/50"
+              style={{ left: `${level * 16 + 14}px` }}
+            />
+            {node.children!.map((child) => (
+              <TreeItem
+                key={child.id}
+                node={child}
+                level={level + 1}
+                selectedId={selectedId}
+                onSelect={onSelect}
+              />
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+export function TreeView({ data, selectedId, onSelect, className }: TreeViewProps) {
+  return (
+    <div
+      role="tree"
+      aria-label="Tree"
+      className={cn(
+        "flex flex-col gap-0.5 rounded-2xl border border-border bg-card p-2 shadow-sm",
+        className
+      )}
+    >
+      {data.map((node, index) => (
+        <TreeItem
+          key={node.id}
+          node={node}
+          level={0}
+          selectedId={selectedId}
+          onSelect={onSelect}
+          focusable={!selectedId && index === 0}
+        />
+      ))}
+    </div>
+  );
+}

package/components/motion/wallet-card/account-avatar.tsx

@@ -0,0 +1,21 @@
+import { cn } from "@/lib/utils";
+import type { WalletAccount } from "./types";
+import { diceBearGlassUrl } from "./utils";
+
+export function AccountAvatar({
+  account,
+  className,
+}: {
+  account: WalletAccount;
+  className?: string;
+}) {
+  if (account.avatar) return <>{account.avatar}</>;
+  return (
+    // biome-ignore lint/performance/noImgElement: remote DiceBear SVG, no next/image benefit
+    <img
+      src={diceBearGlassUrl(account.id || account.address)}
+      alt={account.name}
+      className={cn("h-7 w-7 shrink-0 rounded-full bg-muted", className)}
+    />
+  );
+}