"use client"; import { useEffect, useId, useRef, useState } from "react"; import { AnimatePresence, motion, MotionConfig, useReducedMotion, } from "motion/react"; import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react"; import { ArrowDown01Icon, GlobalIcon, LanguageCircleIcon, Location01Icon, Moon02Icon, PaintBoardIcon, Sun03Icon, Tick02Icon, } from "@hugeicons/core-free-icons"; import clsx from "clsx"; const ON_GREEN = "#34C759"; const panelSpring = { type: "spring" as const, stiffness: 420, damping: 32, mass: 0.75, }; const rowSpring = { type: "spring" as const, stiffness: 480, damping: 28, mass: 0.65, }; const ROW_EASE: [number, number, number, number] = [0.215, 0.61, 0.355, 1]; export type SelectOption = { value: string; label: string; description?: string; icon?: IconSvgElement; }; type SoftSelectProps = { value: string; onValueChange: (value: string) => void; options: SelectOption[]; placeholder?: string; label?: string; "aria-label"?: string; }; /** Animated select — trigger morphs, list springs, tick draws, highlight slides. */ export function SoftSelect({ value, onValueChange, options, placeholder = "انتخاب کنید", label, "aria-label": ariaLabel, }: SoftSelectProps) { const reduce = useReducedMotion() ?? false; const [open, setOpen] = useState(false); const [hovered, setHovered] = useState(null); const rootRef = useRef(null); const listId = useId(); const highlightId = useId().replace(/:/g, ""); const selected = options.find((o) => o.value === value); useEffect(() => { if (!open) return; function onPointerDown(event: MouseEvent) { if ( rootRef.current && !rootRef.current.contains(event.target as Node) ) { setOpen(false); } } function onKey(event: KeyboardEvent) { if (event.key === "Escape") setOpen(false); } document.addEventListener("mousedown", onPointerDown); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("mousedown", onPointerDown); document.removeEventListener("keydown", onKey); }; }, [open]); function pick(next: string) { onValueChange(next); window.setTimeout(() => setOpen(false), 140); } return (

{label ? (

{label}

) : null} {open ? ( ) : null}

); } const LANGUAGE_OPTIONS: SelectOption[] = [ { value: "fa", label: "فارسی", description: "راست‌چین و اعداد فارسی", icon: LanguageCircleIcon, }, { value: "en", label: "English", description: "Left to right", icon: GlobalIcon, }, { value: "ar", label: "العربية", description: "من اليمين إلى اليسار", icon: LanguageCircleIcon, }, ]; const THEME_OPTIONS: SelectOption[] = [ { value: "system", label: "سیستم", description: "هم‌قدم با دستگاه", icon: PaintBoardIcon, }, { value: "light", label: "روشن", description: "پس‌زمینهٔ روشن", icon: Sun03Icon, }, { value: "dark", label: "تیره", description: "پس‌زمینهٔ تیره", icon: Moon02Icon, }, ]; const CITY_OPTIONS: SelectOption[] = [ { value: "teh", label: "تهران", description: "پایتخت", icon: Location01Icon, }, { value: "isf", label: "اصفهان", description: "نصف جهان", icon: Location01Icon, }, { value: "shiraz", label: "شیراز", description: "شهر شعر", icon: Location01Icon, }, { value: "mashhad", label: "مشهد", description: "خراسان", icon: Location01Icon, }, ]; export default function AnimatedSelect() { const [language, setLanguage] = useState("fa"); const [theme, setTheme] = useState("dark"); const [city, setCity] = useState("teh"); return (

); }