"use client"; /** * @author: @dorianbaffier * @description: Team Selector * @version: 2.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { AnimatePresence, motion, type Variants } from "motion/react"; import Image from "next/image"; import { useRef, useState } from "react"; const AVATAR_OVERLAP = 10; interface TeamMember { id: string; avatarUrl: string; name: string; } const DEFAULT_MEMBERS: TeamMember[] = [ { id: "member-1", avatarUrl: "https://bykuknqwpctcjrowysyf.supabase.co/storage/v1/object/public/assets/avatar-01.png", name: "Team Member 1", }, { id: "member-2", avatarUrl: "https://bykuknqwpctcjrowysyf.supabase.co/storage/v1/object/public/assets/avatar-02.png", name: "Team Member 2", }, { id: "member-3", avatarUrl: "https://bykuknqwpctcjrowysyf.supabase.co/storage/v1/object/public/assets/avatar-03.png", name: "Team Member 3", }, { id: "member-4", avatarUrl: "https://bykuknqwpctcjrowysyf.supabase.co/storage/v1/object/public/assets/avatar-04.png", name: "Team Member 4", }, ]; const animations = { container: { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0, transition: { duration: 0.45, ease: "easeOut" }, }, exit: { opacity: 0, y: -20, transition: { duration: 0.3, ease: "easeOut" }, }, } satisfies Variants, avatar: { visible: { opacity: 1, scale: 1, transition: { type: "spring", stiffness: 300, damping: 24, mass: 0.8, }, }, hidden: { opacity: 0, scale: 0.6, transition: { duration: 0.22, ease: "easeOut" }, }, } satisfies Variants, vibration: { idle: { x: 0 }, shake: { x: [-4, 4, -4, 4, 0] as const, transition: { duration: 0.38, ease: "easeOut" }, }, } satisfies Variants, } as const; interface TeamSelectorProps { members?: TeamMember[]; defaultValue?: number; onChange?: (size: number) => void; label?: string; className?: string; } export default function TeamSelector({ members = DEFAULT_MEMBERS, defaultValue = 1, onChange, label = "Team Size", className = "", }: TeamSelectorProps) { const maxTeamSize = members.length; const [peopleCount, setPeopleCount] = useState(defaultValue); const [isVibrating, setIsVibrating] = useState(false); const directionRef = useRef<1 | -1>(1); const handleIncrement = (e: React.MouseEvent | React.KeyboardEvent) => { e.preventDefault(); if (peopleCount < maxTeamSize) { directionRef.current = 1; const newCount = peopleCount + 1; setPeopleCount(newCount); onChange?.(newCount); } else { triggerVibration(); } }; const handleDecrement = (e: React.MouseEvent | React.KeyboardEvent) => { e.preventDefault(); if (peopleCount > 1) { directionRef.current = -1; const newCount = peopleCount - 1; setPeopleCount(newCount); onChange?.(newCount); } else { triggerVibration(); } }; const triggerVibration = () => { setIsVibrating(true); setTimeout(() => setIsVibrating(false), 380); }; const handleKeyDown = ( e: React.KeyboardEvent, action: "increment" | "decrement" ) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); action === "increment" ? handleIncrement(e) : handleDecrement(e); } }; return (

{label} {/* Avatar stack — all 4 always rendered, toggled via variants */}

{members.map((member, index) => ( {member.name}

))}

{/* Controls row */} {/* Counter + label */}

{peopleCount}

{peopleCount === 1 ? "member" : "members"}

); }

Team Selector

Instalação

Dependências