Multi Select Nova

1"use client";
2 
3import * as React from "react";
4import { cva } from "class-variance-authority";
5import { CheckIcon, XCircle, ChevronDown, XIcon } from "lucide-react";
6import { motion, AnimatePresence } from "motion/react";
7 
8import { cn } from "@/lib/utils";
9import { Button } from "@/components/ui/button";
10import { Badge } from "@/components/ui/badge";
11import {
12  Popover,
13  PopoverContent,
14  PopoverTrigger,
15} from "@/components/ui/popover";
16import {
17  Command,
18  CommandEmpty,
19  CommandGroup,
20  CommandItem,
21  CommandList,
22  CommandSeparator,
23} from "@/components/ui/command";
24 
25const multiSelectVariants = cva(
26  "m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
27  {
28    variants: {
29      variant: {
30        default:
31          "border-foreground/10 text-foreground bg-card hover:bg-card/80",
32        secondary:
33          "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
34        destructive:
35          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
36        inverted: "inverted",
37      },
38    },
39    defaultVariants: {
40      variant: "default",
41    },
42  }
43);
44 
45export const MultiSelect = React.forwardRef(
46  (
47    {
48      options,
49      value,
50      variant,
51      placeholder = "Select options",
52      modalPopover = false,
53      asChild = false,
54      className,
55      wrap = true,
56      maxHeight = 200,
57      ...props
58    },
59    ref
60  ) => {
61    const [selectedValues, setSelectedValues] = React.useState(value ?? []);
62    const [maxCount, setMaxCount] = React.useState(null);
63    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
64    const triggerRef = React.useRef(null);
65    const [triggerWidth, setTriggerWidth] = React.useState(0);
66    const optionsRefs = React.useRef([]);
67    const [lineBreak, setLineBreak] = React.useState(true);
68    const badgeRef = React.useRef(null);
69    const crossRef = React.useRef(null);
70 
71    const areAllSelected = options.every((opt) =>
72      selectedValues.includes(opt.value)
73    );
74 
75    const handleSelectAll = () => {
76      const allValues = options.map((opt) => opt.value);
77      const currentlyAllSelected = options.every((opt) =>
78        selectedValues.includes(opt.value)
79      );
80 
81      const newSelectedValues = currentlyAllSelected ? [] : allValues;
82      setSelectedValues(newSelectedValues);
83    };
84 
85    React.useEffect(() => {
86      if (isPopoverOpen && triggerRef.current) {
87// … truncated