Avatar Circle

1"use client";
2 
3import { motion, type Easing } from "motion/react";
4import { useState } from "react";
5import { cn } from "@/lib/utils";
6 
7type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
8 
9export interface AvatarCircleProps {
10  children?: React.ReactNode;
11  size?: AvatarSize;
12  strokeColor?: string;
13  strokeWidth?: number;
14  duration?: number;
15  ease?: Easing | Easing[];
16  showTrack?: boolean;
17  lineCap?: "butt" | "round" | "square";
18  className?: string;
19}
20 
21const sizeMap: Record<AvatarSize, { wrapper: string; px: number }> = {
22  xs: { wrapper: "size-8", px: 32 },
23  sm: { wrapper: "size-12", px: 48 },
24  md: { wrapper: "size-16", px: 64 },
25  lg: { wrapper: "size-24", px: 96 },
26  xl: { wrapper: "size-32", px: 128 },
27};
28 
29// Ring sits slightly outside the avatar's edge for visual breathing room
30const RING_OFFSET = 2;
31 
32export function AvatarCircle({
33  children,
34  size = "md",
35  strokeColor = "currentColor",
36  strokeWidth = 1.5,
37  duration = 0.6,
38  ease = "easeInOut",
39  showTrack = true,
40  lineCap = "round",
41  className,
42}: AvatarCircleProps) {
43  const { px } = sizeMap[size];
44 
45  const half = px / 2;
46  const radius = half - strokeWidth / 2 + RING_OFFSET;
47  const circumference = 2 * Math.PI * radius;
48 
49  return (
50    <motion.div
51      tabIndex={0}
52      className={cn(
53        "relative inline-flex cursor-pointer items-center justify-center rounded-full focus:outline-none",
54        sizeMap[size].wrapper,
55        className
56      )}
57      initial="rest"
58      whileHover="active"
59      whileFocus="active"
60    >
61      <div className="relative z-10 size-full overflow-hidden rounded-full">
62        {children}
63      </div>
64 
65      <svg
66        className="pointer-events-none absolute inset-0 z-50 size-full"
67        viewBox={`0 0 ${px} ${px}`}
68        aria-hidden="true"
69        style={{ overflow: "visible" }}
70      >
71        {showTrack && (
72          <circle
73            cx={half}
74            cy={half}
75            r={radius}
76            fill="none"
77            stroke={strokeColor}
78            strokeWidth={strokeWidth}
79            opacity={0.12}
80            transform={`rotate(-90 ${half} ${half})`}
81          />
82        )}
83 
84        {/* Animated ring - draws clockwise on hover or keyboard focus */}
85        <motion.circle
86          cx={half}
87          cy={half}
88          r={radius}
89          fill="none"
90          stroke={strokeColor}
91          strokeWidth={strokeWidth}
92          strokeLinecap={lineCap}
93          strokeDasharray={circumference}
94          variants={{
95// … truncated