Skeleton

"use client";
// easeui.dev/components/motion/skeleton

import { type ComponentProps, type ReactNode, useEffect, useRef } from "react";
import { cn } from "@/lib/utils";

/** A soft light band. Fixed to the viewport, so every skeleton on the page shimmers as one. */
const BAND =
  "linear-gradient(90deg, transparent, color-mix(in oklch, var(--foreground) 7%, transparent), transparent)";

const SWEEP: Keyframe[] = [{ backgroundPosition: "-50vw 0" }, { backgroundPosition: "150vw 0" }];
const SWEEP_MS = 1800;

export interface SkeletonProps extends Omit<ComponentProps<"div">, "ref" | "children"> {
  /** Shows the placeholder. With children, false crossfades to the real content. Default true. */
  loading?: boolean;
  /** Real content. It keeps its space while loading, so nothing shifts when it appears. */
  children?: ReactNode;
}

function useShimmer(active: boolean) {
  const ref = useRef<HTMLSpanElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (!active || !element || typeof element.animate !== "function") return;
    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
    const animation = element.animate(SWEEP, {
      duration: SWEEP_MS,
      iterations: Number.POSITIVE_INFINITY,
      easing: "ease-in-out",
    });
    // Starting every skeleton at the same moment keeps their bands lined up.
    animation.startTime = 0;
    const sync = () => (reducedMotion.matches ? animation.pause() : animation.play());
    sync();
    reducedMotion.addEventListener("change", sync);
    return () => {
      reducedMotion.removeEventListener("change", sync);
      animation.cancel();
    };
  }, [active]);

  return ref;
}

/**
 * A loading placeholder with a quiet shimmer. Size it with classes, or wrap
 * the real content so the placeholder takes its exact shape and fades away
 * when loading ends.
 */
export function Skeleton({ loading = true, children, className, ...props }: SkeletonProps) {
  const shimmer = useShimmer(loading);

  const placeholder = (
    <span
      ref={shimmer}
      aria-hidden="true"
      className={cn(
        "block rounded-lg bg-muted transition-opacity duration-200 ease-out motion-reduce:transition-none",
        children ? "absolute inset-0" : "h-4 w-full",
        !loading && "opacity-0",
        !children && className,
      )}
      style={{
        backgroundImage: BAND,
        backgroundSize: "50vw 100%",
        backgroundRepeat: "no-repeat",
        backgroundAttachment: "fixed",
      }}
    />
  );

  if (!children) return placeholder;

  return (
    <div
      aria-busy={loading}
      className={cn("relative", className)}
      {...props}
    >
      <div
        aria-hidden={loading}
        inert={loading}
        className={cn(
          "transition-opacity duration-200 ease-out motion-reduce:transition-none",
          loading ? "opacity-0" : "opacity-100",
        )}
      >
        {children}
      </div>
      {placeholder}
    </div>
  );
}

"use client";

import { type HTMLMotionProps, motion, useReducedMotion } from "motion/react";
import { forwardRef, type ReactNode } from "react";
import { cn } from "@/lib/utils";

export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
export type ButtonSize = "sm" | "md" | "lg" | "icon";

export interface ButtonProps extends Omit<HTMLMotionProps<"button">, "children"> {
  /** Visual style. Default "primary". */
  variant?: ButtonVariant;
  /** Height and padding. "icon" is a square button for a single icon. Default "md". */
  size?: ButtonSize;
  children?: ReactNode;
}

// A quick press confirms the tap before the action finishes.
const PRESS = { scale: 0.97 };
const NO_PRESS = { scale: 1 };
const PRESS_TRANSITION = { duration: 0.15, ease: [0.23, 1, 0.32, 1] } as const;

// Hairline rings are drawn with box-shadow so they blend with any background.
const VARIANT_CLASS: Record<ButtonVariant, string> = {
  primary: "bg-foreground text-background hover:bg-foreground/90",
  secondary:
    "bg-card text-foreground shadow-[0_0_0_1px_var(--border)] hover:bg-muted",
  outline:
    "text-foreground shadow-[0_0_0_1px_var(--border-strong)] hover:bg-foreground/5",
  ghost: "text-muted-foreground hover:bg-foreground/5 hover:text-foreground",
};

// Small sizes grow an invisible hit area so the tap target stays around 44px.
const SIZE_CLASS: Record<ButtonSize, string> = {
  sm: "h-8 gap-1.5 px-3 text-xs after:absolute after:-inset-1.5",
  md: "h-10 gap-2 px-4 text-sm",
  lg: "h-12 gap-2 px-5 text-base",
  icon: "h-9 w-9 after:absolute after:-inset-1",
};

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
  { variant = "primary", size = "md", type = "button", className, children, ...props },
  ref,
) {
  const reduce = useReducedMotion();

  return (
    <motion.button
      ref={ref}
      type={type}
      // Always pass a gesture so the server and client render the same attributes.
      whileTap={reduce ? NO_PRESS : PRESS}
      transition={PRESS_TRANSITION}
      className={cn(
        "relative inline-flex shrink-0 touch-manipulation select-none items-center justify-center rounded-full font-medium outline-none",
        "transition-[background-color,color,box-shadow] duration-150 ease-out",
        "focus-visible:ring-2 focus-visible:ring-foreground/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
        "disabled:pointer-events-none disabled:opacity-50",
        VARIANT_CLASS[variant],
        SIZE_CLASS[size],
        className,
      )}
      {...props}
    >
      {children}
    </motion.button>
  );
});