Motion kbd

"use client"

import * as React from "react"
import { motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/* Motion kbd family: press feedback. Press listens to a real keyboard event (scoped to a single key, removed in the effect cleanup); the others react to hover and tap through framer-motion. Colour comes ONLY from tokens, all motion is disabled with useReducedMotion, and no value depends on time or randomness. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const box: Record<StyledSize, string> = {
  sm: "h-5 min-w-5 px-1.5 text-xs",
  md: "h-6 min-w-6 px-2 text-xs",
  lg: "h-7 min-w-7 px-2.5 text-sm",
  xl: "h-8 min-w-8 px-3 text-sm",
}

const base =
  "inline-flex w-fit shrink-0 select-none items-center justify-center gap-1 whitespace-nowrap rounded-md border border-border bg-surface-2 font-mono font-medium leading-none text-foreground [&_svg]:size-3 [&_svg]:shrink-0 [&_i]:text-xs [&_i]:leading-none"

const spring = { type: "spring" as const, stiffness: 520, damping: 22 }

type Props = React.ComponentProps<"kbd"> & { size?: StyledSize }

/* Press: it reflects the pressed state from real keydown/keyup. keyName is scoped to
   a single key; the listeners are removed in the effect cleanup (no leak). */
export function PressKbd({
  className,
  size = "md",
  children,
  keyName = "k",
  ...props
}: Props & { keyName?: string }) {
  const [pressed, setPressed] = React.useState(false)
  const reduce = useReducedMotion()

  React.useEffect(() => {
    const target = keyName.toLowerCase()
    const down = (e: KeyboardEvent) => {
      if (e.key.toLowerCase() === target) setPressed(true)
    }
    const up = (e: KeyboardEvent) => {
      if (e.key.toLowerCase() === target) setPressed(false)
    }
    /* Sekme arkaplana giderse keyup gelmeyebilir; durumu sifirla. */
    const reset = () => setPressed(false)

    window.addEventListener("keydown", down)
    window.addEventListener("keyup", up)
    window.addEventListener("blur", reset)
    return () => {
      window.removeEventListener("keydown", down)
      window.removeEventListener("keyup", up)
      window.removeEventListener("blur", reset)
    }
  }, [keyName])

  return (
    <kbd
      data-slot="styled-kbd"
      data-pressed={pressed ? "true" : undefined}
      className={cn(
        base,
        box[size],
        "shadow-[0_2px_0_0_color-mix(in_oklab,var(--color-foreground)_18%,transparent)]",
        "transition-all duration-(--motion-fast) ease-(--motion-ease) motion-reduce:transition-none",
        /* The pressed state is always readable through colour and shadow; the downward movement is added ONLY when reduced-motion is off, so motion goes away without the feedback disappearing. */
        "data-[pressed=true]:bg-secondary data-[pressed=true]:shadow-none",
        !reduce && "data-[pressed=true]:translate-y-0.5",
        className
      )}
      {...props}
    >
      {children ?? keyName.toUpperCase()}
    </kbd>
  )
}

/* Pop: grows on hover and pulls back on tap (spring). */
export function PopKbd({ className, size = "md", children, ...props }: Props) {
  const reduce = useReducedMotion()
  return (
    <motion.kbd
      data-slot="styled-kbd"
      className={cn(base, box[size], className)}
      whileHover={reduce ? undefined : { scale: 1.1 }}
      whileTap={reduce ? undefined : { scale: 0.92 }}
      transition={spring}
      {...(props as React.ComponentProps<typeof motion.kbd>)}
    >
      {children ?? "K"}
    </motion.kbd>
  )
}

/* Fade: the opacity drops softly on hover and tap. */
export function FadeKbd({ className, size = "md", children, ...props }: Props) {
  const reduce = useReducedMotion()
  return (
    <motion.kbd
      data-slot="styled-kbd"
      className={cn(base, box[size], className)}
      whileHover={reduce ? undefined : { opacity: 0.7 }}
      whileTap={reduce ? undefined : { opacity: 0.45 }}
      transition={{ duration: 0.18, ease: "easeOut" }}
      {...(props as React.ComponentProps<typeof motion.kbd>)}
    >
      {children ?? "K"}
    </motion.kbd>
  )
}

/* Bounce: bounces down on tap and springs back on release. */
export function BounceKbd({ className, size = "md", children, ...props }: Props) {
  const reduce = useReducedMotion()
  return (
    <motion.kbd
      data-slot="styled-kbd"
      className={cn(base, box[size], className)}
      whileHover={reduce ? undefined : { y: -3 }}
      whileTap={reduce ? undefined : { y: 3 }}
      transition={{ type: "spring" as const, stiffness: 700, damping: 12 }}
      {...(props as React.ComponentProps<typeof motion.kbd>)}
    >
      {children ?? "K"}
    </motion.kbd>
  )
}

/* GlowMotion: a token glow layer opens on hover and tap (an opacity animation; the colour is a fixed token color-mix shadow). */
export function GlowMotionKbd({ className, size = "md", children, ...props }: Props) {
  const reduce = useReducedMotion()
  return (
    <motion.kbd
      data-slot="styled-kbd"
      className={cn(base, box[size], "relative", className)}
      initial="rest"
      animate="rest"
      whileHover={reduce ? undefined : "lit"}
      whileTap={reduce ? undefined : "lit"}
      {...(props as React.ComponentProps<typeof motion.kbd>)}
    >
      <motion.span
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 rounded-md shadow-[0_0_14px_-1px_color-mix(in_oklab,var(--color-info)_75%,transparent)]"
        variants={{ rest: { opacity: 0 }, lit: { opacity: 1 } }}
        transition={{ duration: 0.2, ease: "easeOut" }}
      />
      <span className="relative">{children ?? "K"}</span>
    </motion.kbd>
  )
}