Avatar Picker

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Avatar Picker
6 * @version: 2.0.0
7 * @date: 2026-02-22
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { Check, ChevronRight, User2 } from "lucide-react";
14import type { Variants } from "motion/react";
15import { AnimatePresence, motion, useReducedMotion } from "motion/react";
16import type { ReactNode } from "react";
17import { useState } from "react";
18import { Button } from "@/components/ui/button";
19import { Card, CardContent } from "@/components/ui/card";
20import { Input } from "@/components/ui/input";
21import { cn } from "@/lib/utils";
22 
23interface Avatar {
24  id: number;
25  svg: ReactNode;
26  alt: string;
27}
28 
29// RGB values for the per-avatar color ring on the stage
30const AVATAR_RGB: Record<number, string> = {
31  1: "255, 0, 91",
32  2: "255, 125, 16",
33  3: "255, 0, 91",
34  4: "137, 252, 179",
35};
36 
37const avatars: Avatar[] = [
38  {
39    id: 1,
40    svg: (
41      <svg
42        aria-label="Avatar 1"
43        fill="none"
44        height="40"
45        role="img"
46        viewBox="0 0 36 36"
47        width="40"
48        xmlns="http://www.w3.org/2000/svg"
49      >
50        <title>Avatar 1</title>
51        <mask
52          height="36"
53          id=":r111:"
54          maskUnits="userSpaceOnUse"
55          width="36"
56          x="0"
57          y="0"
58        >
59          <rect fill="#FFFFFF" height="36" rx="72" width="36" />
60        </mask>
61        <g mask="url(#:r111:)">
62          <rect fill="#ff005b" height="36" width="36" />
63          <rect
64            fill="#ffb238"
65            height="36"
66            rx="6"
67            transform="translate(9 -5) rotate(219 18 18) scale(1)"
68            width="36"
69            x="0"
70            y="0"
71          />
72          <g transform="translate(4.5 -4) rotate(9 18 18)">
73            <path
74              d="M15 19c2 1 4 1 6 0"
75              fill="none"
76              stroke="#000000"
77              strokeLinecap="round"
78            />
79            <rect
80              fill="#000000"
81              height="2"
82              rx="1"
83              stroke="none"
84              width="1.5"
85              x="10"
86              y="14"
87            />
88            <rect
89              fill="#000000"
90              height="2"
91              rx="1"
92              stroke="none"
93              width="1.5"
94              x="24"
95              y="14"
96            />
97          </g>
98        </g>
99      </svg>
100    ),
101    alt: "Avatar 1",
102  },
103  {
104    id: 2,
105    svg: (
106// … truncated