Team Selector

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Team Selector
6 * @version: 3.0.0
7 * @date: 2026-04-23
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { Minus, Plus } from "lucide-react";
14import {
15  AnimatePresence,
16  motion,
17  useReducedMotion,
18  type Variants,
19} from "motion/react";
20import Image from "next/image";
21import { useRef, useState } from "react";
22 
23const AVATAR_OVERLAP = 12;
24const DICEBEAR_STYLE = "notionists-neutral";
25const dicebearUrl = (seed: string) =>
26  `https://api.dicebear.com/9.x/${DICEBEAR_STYLE}/svg?seed=${encodeURIComponent(seed)}&backgroundColor=f4f4f5,e4e4e7,d4d4d8,a1a1aa`;
27 
28interface TeamMember {
29  id: string;
30  name: string;
31  avatarUrl: string;
32}
33 
34const DEFAULT_MEMBERS: TeamMember[] = [
35  { id: "member-1", name: "Alex Rivera", avatarUrl: dicebearUrl("Alex") },
36  { id: "member-2", name: "Blair Kim", avatarUrl: dicebearUrl("Blair") },
37  { id: "member-3", name: "Casey Lin", avatarUrl: dicebearUrl("Casey") },
38  { id: "member-4", name: "Devon Marsh", avatarUrl: dicebearUrl("Devon") },
39];
40 
41const animations = {
42  avatar: {
43    visible: {
44      opacity: 1,
45      scale: 1,
46      transition: {
47        type: "spring",
48        stiffness: 260,
49        damping: 22,
50        mass: 0.6,
51      },
52    },
53    hidden: {
54      opacity: 0,
55      scale: 0.85,
56      transition: { duration: 0.18, ease: "easeOut" },
57    },
58  } satisfies Variants,
59  vibration: {
60    idle: { x: 0 },
61    shake: {
62      x: [-3, 3, -2, 2, 0] as const,
63      transition: { duration: 0.28, ease: "easeOut" },
64    },
65  } satisfies Variants,
66} as const;
67 
68interface TeamSelectorProps {
69  members?: TeamMember[];
70  defaultValue?: number;
71  onChange?: (size: number) => void;
72  label?: string;
73  className?: string;
74}
75 
76export default function TeamSelector({
77  members = DEFAULT_MEMBERS,
78  defaultValue = 1,
79  onChange,
80  label = "Team Size",
81  className = "",
82}: TeamSelectorProps) {
83  const maxTeamSize = members.length;
84  const [peopleCount, setPeopleCount] = useState(defaultValue);
85  const [isVibrating, setIsVibrating] = useState(false);
86  const directionRef = useRef<1 | -1>(1);
87  const prefersReducedMotion = useReducedMotion();
88 
89  const triggerVibration = () => {
90    if (prefersReducedMotion) {
91      return;
92    }
93    setIsVibrating(true);
94    setTimeout(() => setIsVibrating(false), 280);
95  };
96 
97  const handleIncrement = (e: React.MouseEvent | React.KeyboardEvent) => {
98    e.preventDefault();
99// … truncated