"use client";
import * as React from "react";
import { LayoutGroup, motion, type Variants } from "motion/react";
import type { Icon } from "@phosphor-icons/react";
import { springs } from "@/lib/motion";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";

const SidebarCtx = React.createContext("sidebar");

/** Items fade in one after another the first time the sidebar mounts. */
const list: Variants = {
  hidden: {},
  show: { transition: { staggerChildren: 0.03, delayChildren: 0.05 } },
};
const entry: Variants = {
  hidden: { opacity: 0 },
  show: { opacity: 1, transition: { duration: 0.35, ease: "easeOut" } },
};

export function Sidebar({ className, children, ...p }: React.HTMLAttributes<HTMLElement>) {
  const id = React.useId();
  return (
    <SidebarCtx.Provider value={id}>
      <LayoutGroup id={id}>
        <motion.aside
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.3, ease: "easeOut" }}
          className={cn("flex w-64 shrink-0 flex-col overflow-hidden rounded-[1.75rem] bg-surface shadow-clay-sm", className)}
          {...(p as React.ComponentProps<typeof motion.aside>)}
        >
          {/* Long nav scrolls inside the clay panel with the Parlemen scrollbar instead of the browser's. */}
          <ScrollArea className="min-h-0 flex-1">
            <div className="flex flex-col gap-6 p-4 pr-5">{children}</div>
          </ScrollArea>
        </motion.aside>
      </LayoutGroup>
    </SidebarCtx.Provider>
  );
}
export function SidebarGroup({ className, ...p }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <motion.div
      variants={list}
      initial="hidden"
      animate="show"
      className={cn("flex flex-col gap-1", className)}
      {...(p as React.ComponentProps<typeof motion.div>)}
    />
  );
}
export function SidebarLabel({ className, ...p }: React.HTMLAttributes<HTMLParagraphElement>) {
  return (
    <motion.p
      variants={entry}
      className={cn("px-3 pb-1 font-mono text-[11px] uppercase tracking-widest text-on-surface-muted", className)}
      {...(p as React.ComponentProps<typeof motion.p>)}
    />
  );
}
const motionCache = new Map<React.ElementType, React.ElementType>();
/** Wrap a link component (e.g. next/link) once so it can animate. */
function motionFor(as: React.ElementType) {
  if (!motionCache.has(as)) motionCache.set(as, motion.create(as as React.ComponentType));
  return motionCache.get(as)!;
}

export function SidebarItem({
  className,
  active,
  icon: Icon,
  as,
  children,
  ...p
}: React.AnchorHTMLAttributes<HTMLAnchorElement> & {
  active?: boolean;
  icon?: Icon;
  /** Link component to render, e.g. next/link for client-side navigation. Defaults to <a>. */
  as?: React.ElementType;
}) {
  const id = React.useContext(SidebarCtx);
  const Comp = (as ? motionFor(as) : motion.a) as typeof motion.a;
  // Hover/tap are tracked in state rather than whileHover variant labels. A variant label on the item
  // would make it its own controller and break the cascade it inherits from SidebarGroup.
  const [hover, setHover] = React.useState(false);
  const [tap, setTap] = React.useState(false);
  return (
    <Comp
      variants={entry}
      onHoverStart={() => setHover(true)}
      onHoverEnd={() => setHover(false)}
      onTapStart={() => setTap(true)}
      onTap={() => setTap(false)}
      onTapCancel={() => setTap(false)}
      data-active={active || undefined}
      className={cn(
        "group relative flex items-center gap-2 rounded-full px-3 py-2 text-sm font-semibold text-on-surface-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-on-surface data-[active]:font-bold data-[active]:text-on-primary data-[active]:hover:bg-transparent",
        className
      )}
      {...(p as React.ComponentProps<typeof motion.a>)}
    >
      {/* The active pill is shared across items and slides to the new one. */}
      {active && (
        <motion.span layoutId={`${id}-active`} className="absolute inset-0 rounded-full bg-primary shadow-clay-sm" transition={springs.snappy} />
      )}
      {Icon && (
        <motion.span
          className="relative grid"
          animate={tap ? { scale: 0.85, rotate: 0 } : hover ? { rotate: [0, -14, 10, 0], scale: 1.15 } : { rotate: 0, scale: 1 }}
          transition={hover && !tap ? { duration: 0.45 } : springs.squish}
        >
          {/* Icons switch to the filled weight when the item is active. */}
          <Icon weight={active ? "fill" : "bold"} className="size-[1.15em] shrink-0" aria-hidden />
        </motion.span>
      )}
      {/* Label nudges right on hover. */}
      <motion.span className="relative" animate={{ x: tap ? 1 : hover ? 3 : 0 }} transition={springs.squish}>
        {children}
      </motion.span>
    </Comp>
  );
}
Installation
