motion-ui-skill 2.0.0

package/components/motion/swap.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { Settings } from "lucide-react";
+import { useReducedMotion } from "motion/react";
+import { cn } from "@/lib/utils";
+import { CHAINS, TOKENS } from "./swap/data";
+import { ActionButton, DestinationRow, FlipButton } from "./swap/controls";
+import { Field } from "./swap/field";
+import { QuoteRow } from "./swap/quote-row";
+import { TokenPicker } from "./swap/token-picker";
+import type { Chain, Token, TokenSide } from "./swap/types";
+import { formatAmount } from "./swap/utils";
+
+export type { Chain, Token } from "./swap/types";
+export { SWAP_DRAWER_EASE } from "./swap/constants";
+
+export interface MultiChainSwapProps {
+  chains?: Chain[];
+  tokens?: Token[];
+  defaultFromId?: string;
+  defaultToId?: string;
+  className?: string;
+}
+
+export function MultiChainSwap({
+  chains = CHAINS,
+  tokens = TOKENS,
+  defaultFromId = "eth-eth",
+  defaultToId = "sol-sol",
+  className,
+}: MultiChainSwapProps) {
+  const reduce = useReducedMotion();
+  const [fromId, setFromId] = useState(defaultFromId);
+  const [toId, setToId] = useState(defaultToId);
+  const [amount, setAmount] = useState("1");
+  const [flipRot, setFlipRot] = useState(0);
+  const [quoting, setQuoting] = useState(false);
+  const [picking, setPicking] = useState<TokenSide | null>(null);
+  const [showDest, setShowDest] = useState(false);
+  const [destAddress, setDestAddress] = useState("");
+
+  const from = findToken(tokens, fromId);
+  const to = findToken(tokens, toId);
+  const fromChain = findChain(chains, from.chainId);
+  const toChain = findChain(chains, to.chainId);
+
+  const numericAmount = Number(amount) || 0;
+  const quoteKey = `${numericAmount}:${fromId}:${toId}`;
+  const rate = useMemo(() => {
+    if (!from.usd || !to.usd) return 1;
+    return from.usd / to.usd;
+  }, [from.usd, to.usd]);
+  const toAmount = numericAmount * rate;
+
+  useEffect(() => {
+    if (!quoteKey) return;
+    if (numericAmount === 0) return;
+    setQuoting(true);
+    const id = setTimeout(() => setQuoting(false), 450);
+    return () => clearTimeout(id);
+  }, [numericAmount, quoteKey]);
+
+  const flip = () => {
+    setFlipRot((r) => r + 180);
+    setFromId(toId);
+    setToId(fromId);
+  };
+
+  const pickToken = (id: string) => {
+    if (!picking) return;
+
+    if (picking === "from") {
+      if (id === toId) setToId(fromId);
+      setFromId(id);
+    } else {
+      if (id === fromId) setFromId(toId);
+      setToId(id);
+    }
+
+    setPicking(null);
+  };
+
+  return (
+    <div
+      className={cn(
+        "relative isolate w-full max-w-[420px] overflow-hidden rounded-3xl",
+        "border border-border/20 bg-card",
+        className,
+      )}
+    >
+      <div className="flex h-12 items-center justify-between border-b border-border/50 px-3">
+        <span className="px-2 text-sm font-semibold tracking-tight text-foreground">
+          Swap
+        </span>
+        <button
+          type="button"
+          aria-label="Settings"
+          className="inline-flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground transition-transform hover:bg-primary/5 hover:text-foreground active:scale-[0.97]"
+        >
+          <Settings className="h-4 w-4" />
+        </button>
+      </div>
+
+      <div className="flex flex-col gap-1.5 p-4">
+        <Field
+          side="from"
+          token={from}
+          chain={fromChain}
+          amount={amount}
+          onAmount={setAmount}
+          editable
+          quoting={false}
+          onOpenPicker={() => setPicking("from")}
+        />
+
+        <FlipButton rotation={flipRot} reduce={!!reduce} onClick={flip} />
+
+        <Field
+          side="to"
+          token={to}
+          chain={toChain}
+          amount={toAmount > 0 ? formatAmount(toAmount) : ""}
+          editable={false}
+          quoting={quoting}
+          onOpenPicker={() => setPicking("to")}
+        />
+
+        <QuoteRow
+          from={from}
+          to={to}
+          rate={rate}
+          fee={0.42}
+          slippage={0.5}
+          eta="≈ 24s"
+          quoting={quoting}
+        />
+
+        <DestinationRow
+          show={showDest}
+          onToggle={() => {
+            if (showDest) setDestAddress("");
+            setShowDest((v) => !v);
+          }}
+          address={destAddress}
+          onAddress={setDestAddress}
+          reduce={!!reduce}
+        />
+
+        <ActionButton
+          from={from}
+          to={to}
+          amount={numericAmount}
+          destAddress={destAddress}
+        />
+      </div>
+
+      <TokenPicker
+        open={picking !== null}
+        side={picking}
+        chains={chains}
+        tokens={tokens}
+        selectedId={picking === "from" ? fromId : toId}
+        onPick={pickToken}
+        onClose={() => setPicking(null)}
+        reduce={!!reduce}
+      />
+    </div>
+  );
+}
+
+function findToken(tokens: Token[], id: string) {
+  const token = tokens.find((t) => t.id === id);
+  if (!token) throw new Error(`Unknown token id: ${id}`);
+  return token;
+}
+
+function findChain(chains: Chain[], id: string) {
+  const chain = chains.find((c) => c.id === id);
+  if (!chain) throw new Error(`Unknown chain id: ${id}`);
+  return chain;
+}

package/components/motion/swipeable-list.tsx

@@ -0,0 +1,507 @@
+"use client";
+
+import {
+  animate,
+  motion,
+  useMotionValue,
+  useReducedMotion,
+  type PanInfo,
+} from "motion/react";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { TOUCH_GESTURE_CONTENT_CLASS } from "@/lib/touch";
+import { cn } from "@/lib/utils";
+
+export type SwipeSide = "left" | "right";
+
+export type SwipeableListValue = {
+  id: string;
+  side: SwipeSide;
+};
+
+export type SwipeActionTone =
+  | "neutral"
+  | "primary"
+  | "success"
+  | "warning"
+  | "danger";
+
+export type SwipeAction = {
+  id: string;
+  label: ReactNode;
+  icon: ReactNode;
+  tone?: SwipeActionTone;
+  disabled?: boolean;
+  onClick?: (item: SwipeableListItem) => void;
+};
+
+export type SwipeableListItem = {
+  id: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  meta?: ReactNode;
+  leading?: ReactNode;
+  content?: ReactNode;
+  leftActions?: SwipeAction[];
+  rightActions?: SwipeAction[];
+  disabled?: boolean;
+};
+
+export type SwipeableListClassNames = {
+  root?: string;
+  item?: string;
+  rail?: string;
+  action?: string;
+  surface?: string;
+  leading?: string;
+  content?: string;
+  title?: string;
+  description?: string;
+  meta?: string;
+};
+
+export interface SwipeableListProps {
+  items: SwipeableListItem[];
+  value?: SwipeableListValue | null;
+  defaultValue?: SwipeableListValue | null;
+  onValueChange?: (value: SwipeableListValue | null) => void;
+  onAction?: (payload: {
+    item: SwipeableListItem;
+    action: SwipeAction;
+    side: SwipeSide;
+  }) => void;
+  actionWidth?: number;
+  revealThreshold?: number;
+  closeOnAction?: boolean;
+  className?: string;
+  classNames?: SwipeableListClassNames;
+  renderItem?: (item: SwipeableListItem) => ReactNode;
+}
+
+// Distance-based release spring keeps short rebounds and full reveals feeling
+// equally direct, closer to native mobile list interactions.
+const ROW_SETTLE = {
+  type: "spring",
+  stiffness: 560,
+  damping: 48,
+  mass: 0.82,
+  restDelta: 0.5,
+  restSpeed: 8,
+} as const;
+const OPEN_DISTANCE_RATIO = 0.46;
+const CLOSE_DISTANCE_RATIO = 0.72;
+const OPEN_VELOCITY = 720;
+const CLOSE_VELOCITY = 320;
+const FLING_DISTANCE = 14;
+const RELEASE_VELOCITY_LIMIT = 1500;
+
+const ACTION_TONE_CLASS: Record<SwipeActionTone, string> = {
+  neutral: "text-muted-foreground group-hover:text-foreground",
+  primary: "text-foreground",
+  success: "text-emerald-600 dark:text-emerald-400",
+  warning: "text-amber-600 dark:text-amber-400",
+  danger: "text-destructive",
+};
+
+function useControllableSwipeValue({
+  value,
+  defaultValue,
+  onValueChange,
+}: {
+  value?: SwipeableListValue | null;
+  defaultValue?: SwipeableListValue | null;
+  onValueChange?: (value: SwipeableListValue | null) => void;
+}) {
+  const [internalValue, setInternalValue] = useState(defaultValue ?? null);
+  const isControlled = value !== undefined;
+  const currentValue = value ?? internalValue;
+
+  const setValue = useCallback(
+    (next: SwipeableListValue | null) => {
+      if (!isControlled) {
+        setInternalValue(next);
+      }
+
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange],
+  );
+
+  return [currentValue, setValue] as const;
+}
+
+function isActionableSide(value: number, sideWidth: number) {
+  return sideWidth > 0 && Math.abs(value) > 0;
+}
+
+function clampReleaseVelocity(velocity: number) {
+  return Math.max(
+    -RELEASE_VELOCITY_LIMIT,
+    Math.min(RELEASE_VELOCITY_LIMIT, velocity),
+  );
+}
+
+function SwipeActionButton({
+  action,
+  actionWidth,
+  side,
+  focusable,
+  onAction,
+  className,
+}: {
+  action: SwipeAction;
+  actionWidth: number;
+  side: SwipeSide;
+  focusable: boolean;
+  onAction: (action: SwipeAction, side: SwipeSide) => void;
+  className?: string;
+}) {
+  return (
+    <button
+      type="button"
+      disabled={action.disabled}
+      tabIndex={focusable ? 0 : -1}
+      aria-label={typeof action.label === "string" ? action.label : undefined}
+      onClick={() => onAction(action, side)}
+      className={cn(
+        "group flex h-full shrink-0 items-center justify-center outline-none",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className,
+      )}
+      style={{ width: actionWidth }}
+    >
+      <span
+        className={cn(
+          "grid h-9 w-9 place-items-center rounded-full transition-[background-color,color,transform] duration-150 group-hover:bg-background group-active:scale-95",
+          ACTION_TONE_CLASS[action.tone ?? "neutral"],
+        )}
+      >
+        {action.icon}
+      </span>
+      <span className="sr-only">{action.label}</span>
+    </button>
+  );
+}
+
+function SwipeableListRow({
+  item,
+  actionWidth,
+  revealThreshold,
+  openValue,
+  setOpenValue,
+  closeOnAction,
+  onAction,
+  classNames,
+  renderItem,
+}: {
+  item: SwipeableListItem;
+  actionWidth: number;
+  revealThreshold: number;
+  openValue: SwipeableListValue | null;
+  setOpenValue: (value: SwipeableListValue | null) => void;
+  closeOnAction: boolean;
+  onAction?: SwipeableListProps["onAction"];
+  classNames?: SwipeableListClassNames;
+  renderItem?: (item: SwipeableListItem) => ReactNode;
+}) {
+  const reduce = useReducedMotion();
+  const x = useMotionValue(0);
+  const animationRef = useRef<{ stop: () => void } | null>(null);
+  const commandedTargetRef = useRef(0);
+  const leftActions = item.leftActions ?? [];
+  const rightActions = item.rightActions ?? [];
+  const leftWidth = leftActions.length * actionWidth;
+  const rightWidth = rightActions.length * actionWidth;
+  const openSide = openValue?.id === item.id ? openValue.side : null;
+  const targetX =
+    openSide === "left" ? leftWidth : openSide === "right" ? -rightWidth : 0;
+
+  const settleX = useCallback(
+    (nextX: number, velocity = 0) => {
+      commandedTargetRef.current = nextX;
+      animationRef.current?.stop();
+
+      if (reduce) {
+        x.set(nextX);
+        return;
+      }
+
+      animationRef.current = animate(x, nextX, {
+        ...ROW_SETTLE,
+        velocity: clampReleaseVelocity(velocity),
+        onComplete: () => x.set(nextX),
+      });
+    },
+    [reduce, x],
+  );
+
+  useEffect(() => {
+    return () => animationRef.current?.stop();
+  }, []);
+
+  useEffect(() => {
+    if (commandedTargetRef.current === targetX) {
+      return;
+    }
+
+    settleX(targetX);
+  }, [settleX, targetX]);
+
+  const getTargetX = useCallback(
+    (side: SwipeSide | null) =>
+      side === "left" ? leftWidth : side === "right" ? -rightWidth : 0,
+    [leftWidth, rightWidth],
+  );
+
+  const snapTo = useCallback(
+    (side: SwipeSide | null, velocity = 0) => {
+      setOpenValue(side ? { id: item.id, side } : null);
+      settleX(getTargetX(side), velocity);
+    },
+    [getTargetX, item.id, setOpenValue, settleX],
+  );
+
+  const onDragStart = useCallback(() => {
+    animationRef.current?.stop();
+
+    if (openValue && openValue.id !== item.id) {
+      setOpenValue(null);
+    }
+  }, [item.id, openValue, setOpenValue]);
+
+  const onDragEnd = useCallback(
+    (_: PointerEvent, info: PanInfo) => {
+      const velocity = info.velocity.x;
+      const latest = x.get();
+      const leftOpenThreshold = Math.max(
+        revealThreshold,
+        leftWidth * OPEN_DISTANCE_RATIO,
+      );
+      const rightOpenThreshold = Math.max(
+        revealThreshold,
+        rightWidth * OPEN_DISTANCE_RATIO,
+      );
+
+      if (openSide === "left") {
+        if (
+          latest < leftWidth * CLOSE_DISTANCE_RATIO ||
+          velocity < -CLOSE_VELOCITY
+        ) {
+          snapTo(null, velocity);
+          return;
+        }
+
+        snapTo("left", velocity);
+        return;
+      }
+
+      if (openSide === "right") {
+        if (
+          Math.abs(latest) < rightWidth * CLOSE_DISTANCE_RATIO ||
+          velocity > CLOSE_VELOCITY
+        ) {
+          snapTo(null, velocity);
+          return;
+        }
+
+        snapTo("right", velocity);
+        return;
+      }
+
+      if (
+        isActionableSide(latest, leftWidth) &&
+        (latest > leftOpenThreshold ||
+          (velocity > OPEN_VELOCITY && latest > FLING_DISTANCE))
+      ) {
+        snapTo("left", velocity);
+        return;
+      }
+
+      if (
+        isActionableSide(latest, rightWidth) &&
+        (latest < -rightOpenThreshold ||
+          (velocity < -OPEN_VELOCITY && latest < -FLING_DISTANCE))
+      ) {
+        snapTo("right", velocity);
+        return;
+      }
+
+      snapTo(null, velocity);
+    },
+    [
+      leftWidth,
+      openSide,
+      revealThreshold,
+      rightWidth,
+      snapTo,
+      x,
+    ],
+  );
+
+  const handleAction = useCallback(
+    (action: SwipeAction, side: SwipeSide) => {
+      action.onClick?.(item);
+      onAction?.({ item, action, side });
+
+      if (closeOnAction) {
+        snapTo(null);
+      }
+    },
+    [closeOnAction, item, onAction, snapTo],
+  );
+
+  const defaultContent = (
+    <div className="flex min-w-0 items-center gap-3">
+      {item.leading ? (
+        <div className={cn("shrink-0", classNames?.leading)}>
+          {item.leading}
+        </div>
+      ) : null}
+      <div className={cn("min-w-0 flex-1", classNames?.content)}>
+        {item.title ? (
+          <div
+            className={cn(
+              "truncate text-sm font-medium text-foreground",
+              classNames?.title,
+            )}
+          >
+            {item.title}
+          </div>
+        ) : null}
+        {item.description ? (
+          <div
+            className={cn(
+              "mt-0.5 truncate text-xs text-muted-foreground",
+              classNames?.description,
+            )}
+          >
+            {item.description}
+          </div>
+        ) : null}
+      </div>
+      {item.meta ? (
+        <div
+          className={cn(
+            "shrink-0 text-xs font-medium text-muted-foreground",
+            classNames?.meta,
+          )}
+        >
+          {item.meta}
+        </div>
+      ) : null}
+    </div>
+  );
+
+  return (
+    <div
+      className={cn(
+        "relative isolate overflow-hidden rounded-2xl bg-muted",
+        item.disabled && "opacity-60",
+        classNames?.item,
+      )}
+    >
+      <div
+        aria-hidden={!openSide}
+        inert={!openSide}
+        className={cn(
+          "absolute inset-0 z-0 flex overflow-hidden rounded-2xl",
+          classNames?.rail,
+        )}
+      >
+        <div className="flex h-full overflow-hidden rounded-l-2xl">
+          {leftActions.map((action) => (
+            <SwipeActionButton
+              key={action.id}
+              action={action}
+              actionWidth={actionWidth}
+              className={classNames?.action}
+              focusable={openSide === "left"}
+              onAction={handleAction}
+              side="left"
+            />
+          ))}
+        </div>
+        <div className="ml-auto flex h-full overflow-hidden rounded-r-2xl">
+          {rightActions.map((action) => (
+            <SwipeActionButton
+              key={action.id}
+              action={action}
+              actionWidth={actionWidth}
+              className={classNames?.action}
+              focusable={openSide === "right"}
+              onAction={handleAction}
+              side="right"
+            />
+          ))}
+        </div>
+      </div>
+
+      <motion.div
+        drag={item.disabled ? false : "x"}
+        dragConstraints={{ left: -rightWidth, right: leftWidth }}
+        dragElastic={0.04}
+        dragMomentum={false}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
+        style={{ x }}
+        className={cn(
+          // `touch-pan-y`, not `touch-none`: the row owns the horizontal
+          // swipe, the page keeps the vertical scroll through it.
+          "relative z-10 min-h-[72px] cursor-grab touch-pan-y rounded-2xl border border-border bg-card px-4 py-3 shadow-sm active:cursor-grabbing",
+          // The swipe is the row's, but what it carries is the consumer's:
+          // selection is only suppressed where the platform runs its own press
+          // gestures, so a mouse can still select and copy the row's text.
+          TOUCH_GESTURE_CONTENT_CLASS,
+          classNames?.surface,
+        )}
+      >
+        {renderItem ? renderItem(item) : item.content ?? defaultContent}
+      </motion.div>
+    </div>
+  );
+}
+
+export function SwipeableList({
+  items,
+  value,
+  defaultValue = null,
+  onValueChange,
+  onAction,
+  actionWidth = 56,
+  revealThreshold = 34,
+  closeOnAction = true,
+  className,
+  classNames,
+  renderItem,
+}: SwipeableListProps) {
+  const [openValue, setOpenValue] = useControllableSwipeValue({
+    value,
+    defaultValue,
+    onValueChange,
+  });
+
+  return (
+    <div className={cn("flex w-full flex-col gap-2", className, classNames?.root)}>
+      {items.map((item) => (
+        <SwipeableListRow
+          key={item.id}
+          item={item}
+          actionWidth={actionWidth}
+          revealThreshold={revealThreshold}
+          openValue={openValue}
+          setOpenValue={setOpenValue}
+          closeOnAction={closeOnAction}
+          onAction={onAction}
+          classNames={classNames}
+          renderItem={renderItem}
+        />
+      ))}
+    </div>
+  );
+}