motion-ui-skill 2.0.0

package/components/motion/infinite-masonry.tsx

@@ -0,0 +1,349 @@
+"use client";
+
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { AlertCircle, Inbox } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import {
+  useEffect,
+  useRef,
+  useState,
+  type MutableRefObject,
+  type ReactNode,
+} from "react";
+import { EASE_OUT, SPRING_PANEL } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export type InfiniteMasonryKey = string | number | bigint;
+
+export interface InfiniteMasonryProps<T> {
+  items: readonly T[];
+  getItemKey: (item: T, index: number) => InfiniteMasonryKey;
+  renderItem: (item: T, index: number) => ReactNode;
+  onLoadMore: () => void | Promise<void>;
+  hasMore: boolean;
+  loading?: boolean;
+  error?: ReactNode;
+  onRetry?: () => void;
+  estimateSize?: (item: T, index: number) => number;
+  renderLoadingItem?: (index: number) => ReactNode;
+  emptyState?: ReactNode;
+  endState?: ReactNode;
+  minColumnWidth?: number;
+  maxColumns?: number;
+  gap?: number;
+  overscan?: number;
+  prefetch?: number;
+  animateItems?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  contentClassName?: string;
+  itemClassName?: string;
+}
+
+type MasonryMetrics = {
+  columns: number;
+  width: number;
+};
+
+function useMasonryMetrics({
+  elementRef,
+  gap,
+  maxColumns,
+  minColumnWidth,
+}: {
+  elementRef: React.RefObject<HTMLDivElement | null>;
+  gap: number;
+  maxColumns: number;
+  minColumnWidth: number;
+}) {
+  const [metrics, setMetrics] = useState<MasonryMetrics>({
+    columns: 1,
+    width: 0,
+  });
+
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+
+    const update = (width: number) => {
+      const columns = Math.min(
+        maxColumns,
+        Math.max(1, Math.floor((width + gap) / (minColumnWidth + gap))),
+      );
+
+      setMetrics((current) =>
+        current.columns === columns && current.width === width
+          ? current
+          : { columns, width },
+      );
+    };
+
+    update(element.getBoundingClientRect().width);
+
+    const observer = new ResizeObserver(([entry]) => {
+      update(entry.contentRect.width);
+    });
+    observer.observe(element);
+
+    return () => observer.disconnect();
+  }, [elementRef, gap, maxColumns, minColumnWidth]);
+
+  return metrics;
+}
+
+function DefaultLoadingItem({ index }: { index: number }) {
+  return (
+    <div
+      aria-hidden="true"
+      className="animate-pulse rounded-2xl border border-border bg-card p-3"
+      style={{ minHeight: 144 + (index % 3) * 36 }}
+    >
+      <div className="h-3 w-2/3 rounded-full bg-muted" />
+      <div className="mt-3 h-2 w-full rounded-full bg-muted" />
+      <div className="mt-2 h-2 w-4/5 rounded-full bg-muted" />
+    </div>
+  );
+}
+
+function DefaultEmptyState() {
+  return (
+    <div className="flex h-full min-h-64 flex-col items-center justify-center px-6 text-center">
+      <Inbox className="size-8 text-muted-foreground" aria-hidden="true" />
+      <p className="mt-3 text-sm font-medium text-foreground">No items yet</p>
+      <p className="mt-1 max-w-xs text-xs leading-5 text-muted-foreground">
+        New items will appear here when they become available.
+      </p>
+    </div>
+  );
+}
+
+function MasonryItemReveal({
+  itemKey,
+  lane,
+  revealedKeys,
+  animate,
+  children,
+}: {
+  itemKey: InfiniteMasonryKey;
+  lane: number;
+  revealedKeys: MutableRefObject<Set<InfiniteMasonryKey>>;
+  animate: boolean;
+  children: ReactNode;
+}) {
+  const [shouldReveal] = useState(
+    () => animate && !revealedKeys.current.has(itemKey),
+  );
+
+  useEffect(() => {
+    revealedKeys.current.add(itemKey);
+  }, [itemKey, revealedKeys]);
+
+  const delay = Math.min(lane, 3) * 0.04;
+
+  return (
+    <motion.div
+      initial={shouldReveal ? { opacity: 0, y: 12 } : false}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{
+        y: { ...SPRING_PANEL, delay },
+        opacity: { duration: 0.2, ease: EASE_OUT, delay },
+      }}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export function InfiniteMasonry<T>({
+  items,
+  getItemKey,
+  renderItem,
+  onLoadMore,
+  hasMore,
+  loading = false,
+  error,
+  onRetry,
+  estimateSize = () => 240,
+  renderLoadingItem = (index) => <DefaultLoadingItem index={index} />,
+  emptyState = <DefaultEmptyState />,
+  endState,
+  minColumnWidth = 208,
+  maxColumns = 4,
+  gap = 12,
+  overscan = 4,
+  prefetch = 3,
+  animateItems = true,
+  ariaLabel = "Infinite masonry feed",
+  className,
+  contentClassName,
+  itemClassName,
+}: InfiniteMasonryProps<T>) {
+  const reduceMotion = useReducedMotion();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const loadMoreRef = useRef(onLoadMore);
+  const loadPendingRef = useRef(false);
+  const initialItemCountRef = useRef(items.length);
+  const revealedKeysRef = useRef(new Set<InfiniteMasonryKey>());
+  const { columns, width } = useMasonryMetrics({
+    elementRef: contentRef,
+    gap,
+    maxColumns,
+    minColumnWidth,
+  });
+
+  useEffect(() => {
+    loadMoreRef.current = onLoadMore;
+  }, [onLoadMore]);
+
+  useEffect(() => {
+    if (!loading) loadPendingRef.current = false;
+  }, [loading]);
+
+  const hasError = error !== undefined && error !== null;
+  const tailCount = hasError ? 1 : loading ? columns : 0;
+  const virtualizer = useVirtualizer({
+    count: items.length + tailCount,
+    getScrollElement: () => scrollRef.current,
+    getItemKey: (index) =>
+      index < items.length
+        ? getItemKey(items[index], index)
+        : `masonry-tail-${index - items.length}`,
+    estimateSize: (index) =>
+      index < items.length
+        ? estimateSize(items[index], index)
+        : 144 + ((index - items.length) % 3) * 36,
+    gap,
+    lanes: columns,
+    overscan: overscan * columns,
+  });
+
+  const virtualItems = virtualizer.getVirtualItems();
+  const viewportEnd =
+    (virtualizer.scrollOffset ?? 0) + (virtualizer.scrollRect?.height ?? 0);
+  const lastVisibleIndex = virtualItems.reduce(
+    (lastIndex, item) =>
+      item.start < viewportEnd ? Math.max(lastIndex, item.index) : lastIndex,
+    -1,
+  );
+
+  useEffect(() => {
+    if (
+      hasError ||
+      loading ||
+      !hasMore ||
+      loadPendingRef.current ||
+      lastVisibleIndex < Math.max(0, items.length - prefetch)
+    ) {
+      return;
+    }
+
+    loadPendingRef.current = true;
+    void Promise.resolve(loadMoreRef.current()).finally(() => {
+      loadPendingRef.current = false;
+    });
+  }, [hasError, hasMore, items.length, lastVisibleIndex, loading, prefetch]);
+
+  if (items.length === 0 && !hasMore && !loading && !hasError) {
+    return (
+      <section
+        aria-label={ariaLabel}
+        className={cn(
+          "w-full overflow-hidden rounded-3xl border border-border bg-background",
+          className,
+        )}
+      >
+        {emptyState}
+      </section>
+    );
+  }
+
+  const columnWidth =
+    columns > 0 ? Math.max(0, (width - gap * (columns - 1)) / columns) : 0;
+
+  return (
+    <section
+      ref={scrollRef}
+      aria-label={ariaLabel}
+      aria-busy={loading}
+      className={cn(
+        "w-full contain-[layout_paint] overflow-y-auto overscroll-none rounded-3xl border border-border bg-background p-3 [overflow-anchor:none] [scrollbar-gutter:stable]",
+        className,
+      )}
+    >
+      <div
+        ref={contentRef}
+        className={cn("relative w-full", contentClassName)}
+        style={{ height: virtualizer.getTotalSize() }}
+      >
+        {virtualItems.map((virtualItem) => {
+          const isTail = virtualItem.index >= items.length;
+          const tailIndex = virtualItem.index - items.length;
+
+          return (
+            <div
+              key={virtualItem.key}
+              ref={virtualizer.measureElement}
+              data-index={virtualItem.index}
+              className={cn(
+                "absolute left-0 top-0 will-change-transform",
+                !isTail && itemClassName,
+              )}
+              style={{
+                width: columnWidth,
+                transform: `translate3d(${virtualItem.lane * (columnWidth + gap)}px, ${virtualItem.start}px, 0)`,
+              }}
+            >
+              {isTail ? (
+                hasError ? (
+                  <div className="flex min-h-36 flex-col items-start justify-center rounded-2xl border border-destructive/20 bg-destructive/5 p-4">
+                    <div className="flex items-center gap-2 text-destructive">
+                      <AlertCircle className="size-4" aria-hidden="true" />
+                      <p className="text-sm font-medium">Couldn&apos;t load more</p>
+                    </div>
+                    <div className="mt-2 text-xs leading-5 text-muted-foreground">
+                      {error}
+                    </div>
+                    {onRetry ? (
+                      <button
+                        type="button"
+                        onClick={onRetry}
+                        className="mt-3 min-h-10 rounded-full border border-border bg-background px-4 text-xs font-medium text-foreground outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                      >
+                        Try again
+                      </button>
+                    ) : null}
+                  </div>
+                ) : (
+                  renderLoadingItem(tailIndex)
+                )
+              ) : (
+                <MasonryItemReveal
+                  itemKey={virtualItem.key}
+                  lane={virtualItem.lane}
+                  revealedKeys={revealedKeysRef}
+                  animate={
+                    animateItems &&
+                    !reduceMotion &&
+                    virtualItem.index >= initialItemCountRef.current
+                  }
+                >
+                  {renderItem(items[virtualItem.index], virtualItem.index)}
+                </MasonryItemReveal>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {!hasMore && items.length > 0 && endState ? (
+        <div className="py-4 text-center text-xs text-muted-foreground">
+          {endState}
+        </div>
+      ) : null}
+      <span className="sr-only" aria-live="polite">
+        {loading ? "Loading more items" : null}
+      </span>
+    </section>
+  );
+}

package/components/motion/input.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+import {
+  AnimatePresence,
+  animate,
+  motion,
+  useReducedMotion,
+} from "motion/react";
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type InputHTMLAttributes,
+  type ReactNode,
+} from "react";
+import { cn } from "@/lib/utils";
+
+export type InputClassNames = {
+  root?: string;
+  label?: string;
+  field?: string;
+  input?: string;
+  leftIcon?: string;
+  rightIcon?: string;
+  successIcon?: string;
+  errorMessage?: string;
+};
+
+export interface InputProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "value" | "defaultValue" | "onChange"
+> {
+  label?: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  /** Truthy error triggers a shake, red border and (if a string) a message. */
+  error?: string | boolean;
+  /** Reserve one message line so validation does not shift nearby content. */
+  reserveErrorLine?: boolean;
+  success?: boolean;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  className?: string;
+  classNames?: InputClassNames;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  {
+    label,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    onFocus,
+    onBlur,
+    error,
+    reserveErrorLine = false,
+    success,
+    leftIcon,
+    rightIcon,
+    className,
+    classNames,
+    disabled,
+    id: idProp,
+    type,
+    ...rest
+  },
+  ref,
+) {
+  const reactId = useId();
+  const id = idProp ?? reactId;
+  const reduce = useReducedMotion();
+
+  const controlled = valueProp !== undefined;
+  const [internal, setInternal] = useState(defaultValue ?? "");
+  const value = controlled ? (valueProp ?? "") : internal;
+
+  const [focused, setFocused] = useState(false);
+
+  const fieldRef = useRef<HTMLDivElement>(null);
+
+  const hasError = Boolean(error);
+  const errorMessage = typeof error === "string" ? error : null;
+
+  // Right edge shows the success check, otherwise the caller's right icon.
+  const rightSlot = success ? null : rightIcon;
+
+  // Shake the field when an error appears.
+  useEffect(() => {
+    if (!fieldRef.current || reduce || !hasError) return;
+    animate(
+      fieldRef.current,
+      { x: [0, -6, 6, -4, 4, -2, 0] },
+      { duration: 0.45 },
+    );
+  }, [hasError, reduce]);
+
+  const handleChange = (next: string) => {
+    if (!controlled) setInternal(next);
+    onChange?.(next);
+  };
+
+  return (
+    <div
+      className={cn("flex flex-col gap-1.5", className, classNames?.root)}
+    >
+      {label ? (
+        <label
+          htmlFor={id}
+          className={cn(
+            "px-1 text-sm font-medium text-foreground",
+            classNames?.label,
+          )}
+        >
+          {label}
+        </label>
+      ) : null}
+
+      <div
+        ref={fieldRef}
+        data-state={
+          hasError
+            ? "error"
+            : success
+              ? "success"
+              : focused
+                ? "focused"
+                : "idle"
+        }
+        className={cn(
+          "relative h-11 overflow-hidden rounded-full border transition-colors duration-200",
+          "border-border",
+          focused && !hasError && "border-foreground/40 ring-2 ring-ring/40",
+          hasError && "border-destructive ring-2 ring-destructive/25",
+          disabled && "opacity-60",
+          classNames?.field,
+        )}
+      >
+        {leftIcon ? (
+          <span
+            className={cn(
+              "pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 items-center text-muted-foreground [&_svg]:h-4 [&_svg]:w-4",
+              classNames?.leftIcon,
+            )}
+          >
+            {leftIcon}
+          </span>
+        ) : null}
+
+        <input
+          ref={ref}
+          id={id}
+          type={type}
+          value={value}
+          disabled={disabled}
+          aria-invalid={hasError || undefined}
+          aria-describedby={errorMessage ? `${id}-error` : undefined}
+          {...rest}
+          onChange={(e) => handleChange(e.target.value)}
+          onFocus={(event) => {
+            setFocused(true);
+            onFocus?.(event);
+          }}
+          onBlur={(event) => {
+            setFocused(false);
+            onBlur?.(event);
+          }}
+          className={cn(
+            "peer h-full w-full bg-transparent text-base leading-6 text-foreground caret-foreground outline-none",
+            "placeholder:text-muted-foreground/60",
+            leftIcon ? "pl-10" : "pl-3.5",
+            rightSlot || success ? "pr-10" : "pr-3.5",
+            disabled && "cursor-not-allowed",
+            classNames?.input,
+          )}
+        />
+
+        {success ? (
+          <motion.svg
+            viewBox="0 0 24 24"
+            fill="none"
+            className={cn(
+              "absolute right-3.5 top-1/2 h-5 w-5 -translate-y-1/2 text-(--color-success)",
+              classNames?.successIcon,
+            )}
+          >
+            <motion.path
+              d="M5 12.5l4.5 4.5L19 7.5"
+              stroke="currentColor"
+              strokeWidth={2.5}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              initial={reduce ? { pathLength: 1 } : { pathLength: 0 }}
+              animate={{ pathLength: 1 }}
+              transition={{ duration: 0.35, ease: "easeOut" }}
+            />
+          </motion.svg>
+        ) : rightSlot ? (
+          <span
+            className={cn(
+              "absolute right-0 top-0 flex h-full items-center text-muted-foreground [&_button]:grid [&_button]:size-11 [&_button]:place-items-center [&_svg]:h-4 [&_svg]:w-4",
+              classNames?.rightIcon,
+            )}
+          >
+            {rightSlot}
+          </span>
+        ) : null}
+      </div>
+
+      <div className={reserveErrorLine ? "min-h-4" : "contents"}>
+        <AnimatePresence initial={false}>
+          {errorMessage ? (
+            <motion.p
+              id={`${id}-error`}
+              role="alert"
+              initial={
+                reduce
+                  ? { opacity: 0 }
+                  : { opacity: 0, y: -4, filter: "blur(4px)" }
+              }
+              animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+              exit={
+                reduce
+                  ? { opacity: 0 }
+                  : { opacity: 0, y: -4, filter: "blur(4px)" }
+              }
+              transition={{ duration: 0.2 }}
+              className={cn(
+                "px-1 text-xs text-destructive",
+                classNames?.errorMessage,
+              )}
+            >
+              {errorMessage}
+            </motion.p>
+          ) : null}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+});