├── .eslintrc.json
├── .gitignore
├── LICENSE
├── README.md
├── components.json
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── next.svg
    └── vercel.svg
├── src
    ├── app
    │   ├── favicon.ico
    │   ├── globals.css
    │   ├── layout.tsx
    │   └── page.tsx
    ├── components
    │   ├── icons.tsx
    │   ├── mode-toggle.tsx
    │   ├── multi-select.tsx
    │   ├── page-header.tsx
    │   ├── site-header.tsx
    │   ├── theme-provider.tsx
    │   └── ui
    │   │   ├── badge.tsx
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   ├── command.tsx
    │   │   ├── dialog.tsx
    │   │   ├── form.tsx
    │   │   ├── label.tsx
    │   │   ├── popover.tsx
    │   │   ├── separator.tsx
    │   │   ├── sonner.tsx
    │   │   ├── toast.tsx
    │   │   ├── toaster.tsx
    │   │   └── use-toast.ts
    └── lib
    │   └── utils.ts
├── tailwind.config.ts
└── tsconfig.json


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 sersavan
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## Star History
  2 | 
  3 | [![Star History Chart](https://api.star-history.com/svg?repos=sersavan/shadcn-multi-select-component&type=Date)](https://star-history.com/#sersavan/shadcn-multi-select-component&Date)
  4 | 
  5 | ## Multi-Select Component Setup in Next.js
  6 | 
  7 | ### Prerequisites
  8 | 
  9 | Ensure you have a Next.js project set up. If not, create one:
 10 | 
 11 | ```bash
 12 | npx create-next-app my-app --typescript
 13 | cd my-app
 14 | ```
 15 | 
 16 | ### Step 1: Install shadcn Components
 17 | 
 18 | Install required shadcn components:
 19 | 
 20 | ```bash
 21 | npx shadcn@latest init
 22 | npx shadcn@latest add command popover button separator badge
 23 | ```
 24 | 
 25 | ### Step 2: Create the Multi-Select Component
 26 | 
 27 | Create `multi-select.tsx` in your `components` directory:
 28 | 
 29 | ```tsx
 30 | // src/components/multi-select.tsx
 31 | 
 32 | import * as React from "react";
 33 | import { cva, type VariantProps } from "class-variance-authority";
 34 | import {
 35 |   CheckIcon,
 36 |   XCircle,
 37 |   ChevronDown,
 38 |   XIcon,
 39 |   WandSparkles,
 40 | } from "lucide-react";
 41 | 
 42 | import { cn } from "@/lib/utils";
 43 | import { Separator } from "@/components/ui/separator";
 44 | import { Button } from "@/components/ui/button";
 45 | import { Badge } from "@/components/ui/badge";
 46 | import {
 47 |   Popover,
 48 |   PopoverContent,
 49 |   PopoverTrigger,
 50 | } from "@/components/ui/popover";
 51 | import {
 52 |   Command,
 53 |   CommandEmpty,
 54 |   CommandGroup,
 55 |   CommandInput,
 56 |   CommandItem,
 57 |   CommandList,
 58 |   CommandSeparator,
 59 | } from "@/components/ui/command";
 60 | 
 61 | /**
 62 |  * Variants for the multi-select component to handle different styles.
 63 |  * Uses class-variance-authority (cva) to define different styles based on "variant" prop.
 64 |  */
 65 | const multiSelectVariants = cva(
 66 |   "m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
 67 |   {
 68 |     variants: {
 69 |       variant: {
 70 |         default:
 71 |           "border-foreground/10 text-foreground bg-card hover:bg-card/80",
 72 |         secondary:
 73 |           "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
 74 |         destructive:
 75 |           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
 76 |         inverted: "inverted",
 77 |       },
 78 |     },
 79 |     defaultVariants: {
 80 |       variant: "default",
 81 |     },
 82 |   }
 83 | );
 84 | 
 85 | /**
 86 |  * Props for MultiSelect component
 87 |  */
 88 | interface MultiSelectProps
 89 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
 90 |     VariantProps<typeof multiSelectVariants> {
 91 |   /**
 92 |    * An array of option objects to be displayed in the multi-select component.
 93 |    * Each option object has a label, value, and an optional icon.
 94 |    */
 95 |   options: {
 96 |     /** The text to display for the option. */
 97 |     label: string;
 98 |     /** The unique value associated with the option. */
 99 |     value: string;
100 |     /** Optional icon component to display alongside the option. */
101 |     icon?: React.ComponentType<{ className?: string }>;
102 |   }[];
103 | 
104 |   /**
105 |    * Callback function triggered when the selected values change.
106 |    * Receives an array of the new selected values.
107 |    */
108 |   onValueChange: (value: string[]) => void;
109 | 
110 |   /** The default selected values when the component mounts. */
111 |   defaultValue?: string[];
112 | 
113 |   /**
114 |    * Placeholder text to be displayed when no values are selected.
115 |    * Optional, defaults to "Select options".
116 |    */
117 |   placeholder?: string;
118 | 
119 |   /**
120 |    * Animation duration in seconds for the visual effects (e.g., bouncing badges).
121 |    * Optional, defaults to 0 (no animation).
122 |    */
123 |   animation?: number;
124 | 
125 |   /**
126 |    * Maximum number of items to display. Extra selected items will be summarized.
127 |    * Optional, defaults to 3.
128 |    */
129 |   maxCount?: number;
130 | 
131 |   /**
132 |    * The modality of the popover. When set to true, interaction with outside elements
133 |    * will be disabled and only popover content will be visible to screen readers.
134 |    * Optional, defaults to false.
135 |    */
136 |   modalPopover?: boolean;
137 | 
138 |   /**
139 |    * If true, renders the multi-select component as a child of another component.
140 |    * Optional, defaults to false.
141 |    */
142 |   asChild?: boolean;
143 | 
144 |   /**
145 |    * Additional class names to apply custom styles to the multi-select component.
146 |    * Optional, can be used to add custom styles.
147 |    */
148 |   className?: string;
149 | }
150 | 
151 | export const MultiSelect = React.forwardRef<
152 |   HTMLButtonElement,
153 |   MultiSelectProps
154 | >(
155 |   (
156 |     {
157 |       options,
158 |       onValueChange,
159 |       variant,
160 |       defaultValue = [],
161 |       placeholder = "Select options",
162 |       animation = 0,
163 |       maxCount = 3,
164 |       modalPopover = false,
165 |       asChild = false,
166 |       className,
167 |       ...props
168 |     },
169 |     ref
170 |   ) => {
171 |     const [selectedValues, setSelectedValues] =
172 |       React.useState<string[]>(defaultValue);
173 |     const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
174 |     const [isAnimating, setIsAnimating] = React.useState(false);
175 | 
176 |     const handleInputKeyDown = (
177 |       event: React.KeyboardEvent<HTMLInputElement>
178 |     ) => {
179 |       if (event.key === "Enter") {
180 |         setIsPopoverOpen(true);
181 |       } else if (event.key === "Backspace" && !event.currentTarget.value) {
182 |         const newSelectedValues = [...selectedValues];
183 |         newSelectedValues.pop();
184 |         setSelectedValues(newSelectedValues);
185 |         onValueChange(newSelectedValues);
186 |       }
187 |     };
188 | 
189 |     const toggleOption = (option: string) => {
190 |       const newSelectedValues = selectedValues.includes(option)
191 |         ? selectedValues.filter((value) => value !== option)
192 |         : [...selectedValues, option];
193 |       setSelectedValues(newSelectedValues);
194 |       onValueChange(newSelectedValues);
195 |     };
196 | 
197 |     const handleClear = () => {
198 |       setSelectedValues([]);
199 |       onValueChange([]);
200 |     };
201 | 
202 |     const handleTogglePopover = () => {
203 |       setIsPopoverOpen((prev) => !prev);
204 |     };
205 | 
206 |     const clearExtraOptions = () => {
207 |       const newSelectedValues = selectedValues.slice(0, maxCount);
208 |       setSelectedValues(newSelectedValues);
209 |       onValueChange(newSelectedValues);
210 |     };
211 | 
212 |     const toggleAll = () => {
213 |       if (selectedValues.length === options.length) {
214 |         handleClear();
215 |       } else {
216 |         const allValues = options.map((option) => option.value);
217 |         setSelectedValues(allValues);
218 |         onValueChange(allValues);
219 |       }
220 |     };
221 | 
222 |     return (
223 |       <Popover
224 |         open={isPopoverOpen}
225 |         onOpenChange={setIsPopoverOpen}
226 |         modal={modalPopover}
227 |       >
228 |         <PopoverTrigger asChild>
229 |           <Button
230 |             ref={ref}
231 |             {...props}
232 |             onClick={handleTogglePopover}
233 |             className={cn(
234 |               "flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-inherit hover:bg-inherit [&_svg]:pointer-events-auto",
235 |               className
236 |             )}
237 |           >
238 |             {selectedValues.length > 0 ? (
239 |               <div className="flex justify-between items-center w-full">
240 |                 <div className="flex flex-wrap items-center">
241 |                   {selectedValues.slice(0, maxCount).map((value) => {
242 |                     const option = options.find((o) => o.value === value);
243 |                     const IconComponent = option?.icon;
244 |                     return (
245 |                       <Badge
246 |                         key={value}
247 |                         className={cn(
248 |                           isAnimating ? "animate-bounce" : "",
249 |                           multiSelectVariants({ variant })
250 |                         )}
251 |                         style={{ animationDuration: `${animation}s` }}
252 |                       >
253 |                         {IconComponent && (
254 |                           <IconComponent className="h-4 w-4 mr-2" />
255 |                         )}
256 |                         {option?.label}
257 |                         <XCircle
258 |                           className="ml-2 h-4 w-4 cursor-pointer"
259 |                           onClick={(event) => {
260 |                             event.stopPropagation();
261 |                             toggleOption(value);
262 |                           }}
263 |                         />
264 |                       </Badge>
265 |                     );
266 |                   })}
267 |                   {selectedValues.length > maxCount && (
268 |                     <Badge
269 |                       className={cn(
270 |                         "bg-transparent text-foreground border-foreground/1 hover:bg-transparent",
271 |                         isAnimating ? "animate-bounce" : "",
272 |                         multiSelectVariants({ variant })
273 |                       )}
274 |                       style={{ animationDuration: `${animation}s` }}
275 |                     >
276 |                       {`+ ${selectedValues.length - maxCount} more`}
277 |                       <XCircle
278 |                         className="ml-2 h-4 w-4 cursor-pointer"
279 |                         onClick={(event) => {
280 |                           event.stopPropagation();
281 |                           clearExtraOptions();
282 |                         }}
283 |                       />
284 |                     </Badge>
285 |                   )}
286 |                 </div>
287 |                 <div className="flex items-center justify-between">
288 |                   <XIcon
289 |                     className="h-4 mx-2 cursor-pointer text-muted-foreground"
290 |                     onClick={(event) => {
291 |                       event.stopPropagation();
292 |                       handleClear();
293 |                     }}
294 |                   />
295 |                   <Separator
296 |                     orientation="vertical"
297 |                     className="flex min-h-6 h-full"
298 |                   />
299 |                   <ChevronDown className="h-4 mx-2 cursor-pointer text-muted-foreground" />
300 |                 </div>
301 |               </div>
302 |             ) : (
303 |               <div className="flex items-center justify-between w-full mx-auto">
304 |                 <span className="text-sm text-muted-foreground mx-3">
305 |                   {placeholder}
306 |                 </span>
307 |                 <ChevronDown className="h-4 cursor-pointer text-muted-foreground mx-2" />
308 |               </div>
309 |             )}
310 |           </Button>
311 |         </PopoverTrigger>
312 |         <PopoverContent
313 |           className="w-auto p-0"
314 |           align="start"
315 |           onEscapeKeyDown={() => setIsPopoverOpen(false)}
316 |         >
317 |           <Command>
318 |             <CommandInput
319 |               placeholder="Search..."
320 |               onKeyDown={handleInputKeyDown}
321 |             />
322 |             <CommandList>
323 |               <CommandEmpty>No results found.</CommandEmpty>
324 |               <CommandGroup>
325 |                 <CommandItem
326 |                   key="all"
327 |                   onSelect={toggleAll}
328 |                   className="cursor-pointer"
329 |                 >
330 |                   <div
331 |                     className={cn(
332 |                       "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
333 |                       selectedValues.length === options.length
334 |                         ? "bg-primary text-primary-foreground"
335 |                         : "opacity-50 [&_svg]:invisible"
336 |                     )}
337 |                   >
338 |                     <CheckIcon className="h-4 w-4" />
339 |                   </div>
340 |                   <span>(Select All)</span>
341 |                 </CommandItem>
342 |                 {options.map((option) => {
343 |                   const isSelected = selectedValues.includes(option.value);
344 |                   return (
345 |                     <CommandItem
346 |                       key={option.value}
347 |                       onSelect={() => toggleOption(option.value)}
348 |                       className="cursor-pointer"
349 |                     >
350 |                       <div
351 |                         className={cn(
352 |                           "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
353 |                           isSelected
354 |                             ? "bg-primary text-primary-foreground"
355 |                             : "opacity-50 [&_svg]:invisible"
356 |                         )}
357 |                       >
358 |                         <CheckIcon className="h-4 w-4" />
359 |                       </div>
360 |                       {option.icon && (
361 |                         <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
362 |                       )}
363 |                       <span>{option.label}</span>
364 |                     </CommandItem>
365 |                   );
366 |                 })}
367 |               </CommandGroup>
368 |               <CommandSeparator />
369 |               <CommandGroup>
370 |                 <div className="flex items-center justify-between">
371 |                   {selectedValues.length > 0 && (
372 |                     <>
373 |                       <CommandItem
374 |                         onSelect={handleClear}
375 |                         className="flex-1 justify-center cursor-pointer"
376 |                       >
377 |                         Clear
378 |                       </CommandItem>
379 |                       <Separator
380 |                         orientation="vertical"
381 |                         className="flex min-h-6 h-full"
382 |                       />
383 |                     </>
384 |                   )}
385 |                   <CommandItem
386 |                     onSelect={() => setIsPopoverOpen(false)}
387 |                     className="flex-1 justify-center cursor-pointer max-w-full"
388 |                   >
389 |                     Close
390 |                   </CommandItem>
391 |                 </div>
392 |               </CommandGroup>
393 |             </CommandList>
394 |           </Command>
395 |         </PopoverContent>
396 |         {animation > 0 && selectedValues.length > 0 && (
397 |           <WandSparkles
398 |             className={cn(
399 |               "cursor-pointer my-2 text-foreground bg-background w-3 h-3",
400 |               isAnimating ? "" : "text-muted-foreground"
401 |             )}
402 |             onClick={() => setIsAnimating(!isAnimating)}
403 |           />
404 |         )}
405 |       </Popover>
406 |     );
407 |   }
408 | );
409 | 
410 | MultiSelect.displayName = "MultiSelect";
411 | ```
412 | 
413 | ### Step 3: Integrate the Component
414 | 
415 | Update `page.tsx`:
416 | 
417 | ```tsx
418 | // src/app/page.tsx
419 | 
420 | "use client";
421 | 
422 | import React, { useState } from "react";
423 | import { MultiSelect } from "@/components/multi-select";
424 | import { Cat, Dog, Fish, Rabbit, Turtle } from "lucide-react";
425 | 
426 | const frameworksList = [
427 |   { value: "react", label: "React", icon: Turtle },
428 |   { value: "angular", label: "Angular", icon: Cat },
429 |   { value: "vue", label: "Vue", icon: Dog },
430 |   { value: "svelte", label: "Svelte", icon: Rabbit },
431 |   { value: "ember", label: "Ember", icon: Fish },
432 | ];
433 | 
434 | function Home() {
435 |   const [selectedFrameworks, setSelectedFrameworks] = useState<string[]>(["react", "angular"]);
436 | 
437 |   return (
438 |     <div className="p-4 max-w-xl">
439 |       <h1 className="text-2xl font-bold mb-4">Multi-Select Component</h1>
440 |       <MultiSelect
441 |         options={frameworksList}
442 |         onValueChange={setSelectedFrameworks}
443 |         defaultValue={selectedFrameworks}
444 |         placeholder="Select frameworks"
445 |         variant="inverted"
446 |         animation={2}
447 |         maxCount={3}
448 |       />
449 |       <div className="mt-4">
450 |         <h2 className="text-xl font-semibold">Selected Frameworks:</h2>
451 |         <ul className="list-disc list-inside">
452 |           {selectedFrameworks.map((framework) => (
453 |             <li key={framework}>{framework}</li>
454 |           ))}
455 |         </ul>
456 |       </div>
457 |     </div>
458 |   );
459 | }
460 | 
461 | export default Home;
462 | ```
463 | 
464 | ### Step 4: Run Your Project
465 | 
466 | ```bash
467 | npm run dev
468 | ```
469 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "src/app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "multi-select-component",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@hookform/resolvers": "^3.3.4",
13 |     "@radix-ui/react-dialog": "^1.0.5",
14 |     "@radix-ui/react-label": "^2.0.2",
15 |     "@radix-ui/react-popover": "^1.0.7",
16 |     "@radix-ui/react-separator": "^1.0.3",
17 |     "@radix-ui/react-slot": "^1.0.2",
18 |     "@radix-ui/react-toast": "^1.1.5",
19 |     "@vercel/analytics": "^1.2.2",
20 |     "@vercel/speed-insights": "^1.0.10",
21 |     "class-variance-authority": "^0.7.0",
22 |     "clsx": "^2.1.0",
23 |     "cmdk": "^1.0.0",
24 |     "lucide-react": "^0.367.0",
25 |     "next": "14.1.4",
26 |     "next-themes": "^0.3.0",
27 |     "react": "^18",
28 |     "react-dom": "^18",
29 |     "react-hook-form": "^7.51.2",
30 |     "react-wrap-balancer": "^1.1.0",
31 |     "sonner": "^1.4.41",
32 |     "tailwind-merge": "^2.2.2",
33 |     "tailwindcss-animate": "^1.0.7",
34 |     "zod": "^3.22.4"
35 |   },
36 |   "devDependencies": {
37 |     "@types/node": "^20",
38 |     "@types/react": "^18",
39 |     "@types/react-dom": "^18",
40 |     "autoprefixer": "^10.0.1",
41 |     "eslint": "^8",
42 |     "eslint-config-next": "14.1.4",
43 |     "postcss": "^8",
44 |     "tailwindcss": "^3.3.0",
45 |     "typescript": "^5"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sersavan/shadcn-multi-select-component/db485c0955016c7d60b6f8535b968522429d5d81/src/app/favicon.ico


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 |   @tailwind components;
 3 |   @tailwind utilities;
 4 | 
 5 |   @layer base {
 6 |     :root {
 7 |       --background: 0 0% 100%;
 8 |       --foreground: 222.2 84% 4.9%;
 9 | 
10 |       --card: 0 0% 100%;
11 |       --card-foreground: 222.2 84% 4.9%;
12 | 
13 |       --popover: 0 0% 100%;
14 |       --popover-foreground: 222.2 84% 4.9%;
15 | 
16 |       --primary: 222.2 47.4% 11.2%;
17 |       --primary-foreground: 210 40% 98%;
18 | 
19 |       --secondary: 210 40% 96.1%;
20 |       --secondary-foreground: 222.2 47.4% 11.2%;
21 | 
22 |       --muted: 210 40% 96.1%;
23 |       --muted-foreground: 215.4 16.3% 46.9%;
24 | 
25 |       --accent: 210 40% 96.1%;
26 |       --accent-foreground: 222.2 47.4% 11.2%;
27 | 
28 |       --destructive: 0 84.2% 60.2%;
29 |       --destructive-foreground: 210 40% 98%;
30 | 
31 |       --border: 214.3 31.8% 91.4%;
32 |       --input: 214.3 31.8% 91.4%;
33 |       --ring: 222.2 84% 4.9%;
34 | 
35 |       --radius: 0.5rem;
36 |     }
37 | 
38 |     .dark {
39 |       --background: 222.2 84% 4.9%;
40 |       --foreground: 210 40% 98%;
41 | 
42 |       --card: 222.2 84% 4.9%;
43 |       --card-foreground: 210 40% 98%;
44 | 
45 |       --popover: 222.2 84% 4.9%;
46 |       --popover-foreground: 210 40% 98%;
47 | 
48 |       --primary: 210 40% 98%;
49 |       --primary-foreground: 222.2 47.4% 11.2%;
50 | 
51 |       --secondary: 217.2 32.6% 17.5%;
52 |       --secondary-foreground: 210 40% 98%;
53 | 
54 |       --muted: 217.2 32.6% 17.5%;
55 |       --muted-foreground: 215 20.2% 65.1%;
56 | 
57 |       --accent: 217.2 32.6% 17.5%;
58 |       --accent-foreground: 210 40% 98%;
59 | 
60 |       --destructive: 0 62.8% 30.6%;
61 |       --destructive-foreground: 210 40% 98%;
62 | 
63 |       --border: 217.2 32.6% 17.5%;
64 |       --input: 217.2 32.6% 17.5%;
65 |       --ring: 212.7 26.8% 83.9%;
66 |     }
67 |   }
68 | 
69 |   @layer base {
70 |     * {
71 |       @apply border-border;
72 |     }
73 |     body {
74 |       @apply bg-background text-foreground;
75 |     }
76 |   }


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Inter } from "next/font/google";
 3 | import { SpeedInsights } from "@vercel/speed-insights/next";
 4 | import { Analytics } from "@vercel/analytics/react";
 5 | 
 6 | import "./globals.css";
 7 | import { Toaster } from "@/components/ui/sonner";
 8 | import { ThemeProvider } from "@/components/theme-provider";
 9 | import { SiteHeader } from "@/components/site-header";
10 | import { cn } from "@/lib/utils";
11 | 
12 | const inter = Inter({ subsets: ["latin"] });
13 | 
14 | export const metadata: Metadata = {
15 |   title: "shadcn Multi select component",
16 |   description: "A multi select component designed with shadcn/ui",
17 | };
18 | 
19 | export default function RootLayout({
20 |   children,
21 | }: Readonly<{
22 |   children: React.ReactNode;
23 | }>) {
24 |   return (
25 |     <html lang="en" suppressHydrationWarning>
26 |       <body
27 |         className={cn(
28 |           "min-h-screen bg-background antialiased",
29 |           inter.className
30 |         )}
31 |       >
32 |         <ThemeProvider
33 |           attribute="class"
34 |           defaultTheme="system"
35 |           enableSystem
36 |           disableTransitionOnChange
37 |         >
38 |           <div className="relative flex min-h-screen flex-col bg-background">
39 |             <SiteHeader />
40 |             {children}
41 |           </div>
42 |         </ThemeProvider>
43 |         <Toaster position="bottom-center" />
44 |         <SpeedInsights />
45 |         <Analytics />
46 |       </body>
47 |     </html>
48 |   );
49 | }
50 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { zodResolver } from "@hookform/resolvers/zod";
  4 | import { useForm } from "react-hook-form";
  5 | import { z } from "zod";
  6 | import { toast } from "sonner";
  7 | import Link from "next/link";
  8 | 
  9 | import { cn } from "@/lib/utils";
 10 | import { Button, buttonVariants } from "@/components/ui/button";
 11 | import { Card } from "@/components/ui/card";
 12 | import { Icons } from "@/components/icons";
 13 | import {
 14 |   Form,
 15 |   FormControl,
 16 |   FormDescription,
 17 |   FormField,
 18 |   FormItem,
 19 |   FormLabel,
 20 |   FormMessage,
 21 | } from "@/components/ui/form";
 22 | import {
 23 |   PageActions,
 24 |   PageHeader,
 25 |   PageHeaderDescription,
 26 |   PageHeaderHeading,
 27 | } from "@/components/page-header";
 28 | import { MultiSelect } from "@/components/multi-select";
 29 | 
 30 | const frameworksList = [
 31 |   {
 32 |     value: "next.js",
 33 |     label: "Next.js",
 34 |     icon: Icons.dog,
 35 |   },
 36 |   {
 37 |     value: "sveltekit",
 38 |     label: "SvelteKit",
 39 |     icon: Icons.cat,
 40 |   },
 41 |   {
 42 |     value: "nuxt.js",
 43 |     label: "Nuxt.js",
 44 |     icon: Icons.turtle,
 45 |   },
 46 |   {
 47 |     value: "remix",
 48 |     label: "Remix",
 49 |     icon: Icons.rabbit,
 50 |   },
 51 |   {
 52 |     value: "astro",
 53 |     label: "Astro",
 54 |     icon: Icons.fish,
 55 |   },
 56 | ];
 57 | 
 58 | const FormSchema = z.object({
 59 |   frameworks: z
 60 |     .array(z.string().min(1))
 61 |     .min(1)
 62 |     .nonempty("Please select at least one framework."),
 63 | });
 64 | 
 65 | export default function Home() {
 66 |   const form = useForm<z.infer<typeof FormSchema>>({
 67 |     resolver: zodResolver(FormSchema),
 68 |     defaultValues: {
 69 |       frameworks: ["next.js", "nuxt.js"],
 70 |     },
 71 |   });
 72 | 
 73 |   function onSubmit(data: z.infer<typeof FormSchema>) {
 74 |     toast(
 75 |       `You have selected following frameworks: ${data.frameworks.join(", ")}.`
 76 |     );
 77 |   }
 78 | 
 79 |   return (
 80 |     <main className="flex min-h-screen:calc(100vh - 3rem) flex-col items-center justify-start space-y-3 p-3">
 81 |       <PageHeader>
 82 |         <PageHeaderHeading>Multi select component</PageHeaderHeading>
 83 |         <PageHeaderDescription>assembled with shadcn/ui</PageHeaderDescription>
 84 |         <PageActions>
 85 |           <Link
 86 |             target="_blank"
 87 |             rel="noreferrer"
 88 |             href="https://github.com/sersavan/shadcn-multi-select-component"
 89 |             className={cn(buttonVariants({ variant: "outline" }))}
 90 |           >
 91 |             <Icons.gitHub className="mr-2 h-4 w-4" />
 92 |             GitHub
 93 |           </Link>
 94 |         </PageActions>
 95 |       </PageHeader>
 96 |       <Card className="w-full max-w-xl p-5">
 97 |         <Form {...form}>
 98 |           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
 99 |             <FormField
100 |               control={form.control}
101 |               name="frameworks"
102 |               render={({ field }) => (
103 |                 <FormItem>
104 |                   <FormLabel>Frameworks</FormLabel>
105 |                   <FormControl>
106 |                     <MultiSelect
107 |                       options={frameworksList}
108 |                       onValueChange={field.onChange}
109 |                       defaultValue={field.value}
110 |                       placeholder="Select options"
111 |                       variant="inverted"
112 |                       animation={2}
113 |                       maxCount={3}
114 |                     />
115 |                   </FormControl>
116 |                   <FormDescription>
117 |                     Choose the frameworks you are interested in.
118 |                   </FormDescription>
119 |                   <FormMessage />
120 |                 </FormItem>
121 |               )}
122 |             />
123 |             <Button variant="default" type="submit" className="w-full">
124 |               Submit
125 |             </Button>
126 |           </form>
127 |         </Form>
128 |       </Card>
129 |     </main>
130 |   );
131 | }
132 | 


--------------------------------------------------------------------------------
/src/components/icons.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   MoonIcon,
 3 |   SunMedium,
 4 |   LucideProps,
 5 |   Cat,
 6 |   Dog,
 7 |   Fish,
 8 |   Rabbit,
 9 |   Turtle,
10 | } from "lucide-react";
11 | 
12 | export const Icons = {
13 |   moonIcon: MoonIcon,
14 |   sunIcon: SunMedium,
15 |   cat: Cat,
16 |   dog: Dog,
17 |   fish: Fish,
18 |   rabbit: Rabbit,
19 |   turtle: Turtle,
20 |   gitHub: ({ ...props }: LucideProps) => (
21 |     <svg
22 |       aria-hidden="true"
23 |       focusable="false"
24 |       data-prefix="fab"
25 |       data-icon="github"
26 |       role="img"
27 |       xmlns="http://www.w3.org/2000/svg"
28 |       viewBox="0 0 496 512"
29 |       {...props}
30 |     >
31 |       <path
32 |         fill="currentColor"
33 |         d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
34 |       ></path>
35 |     </svg>
36 |   ),
37 | };
38 | 


--------------------------------------------------------------------------------
/src/components/mode-toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useTheme } from "next-themes";
 4 | 
 5 | import { Button } from "@/components/ui/button";
 6 | import { Icons } from "@/components/icons";
 7 | 
 8 | export function ModeToggle() {
 9 |   const { setTheme, theme } = useTheme();
10 | 
11 |   return (
12 |     <Button
13 |       variant="ghost"
14 |       size="icon"
15 |       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
16 |     >
17 |       <Icons.sunIcon className="h-[1.5rem] w-[1.3rem] dark:hidden" />
18 |       <Icons.moonIcon className="hidden h-5 w-5 dark:block" />
19 |       <span className="sr-only">Toggle theme</span>
20 |     </Button>
21 |   );
22 | }
23 | 
24 | export default ModeToggle;
25 | 


--------------------------------------------------------------------------------
/src/components/multi-select.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import { cva, type VariantProps } from "class-variance-authority";
  3 | import {
  4 |   CheckIcon,
  5 |   XCircle,
  6 |   ChevronDown,
  7 |   XIcon,
  8 |   WandSparkles,
  9 | } from "lucide-react";
 10 | 
 11 | import { cn } from "@/lib/utils";
 12 | import { Separator } from "@/components/ui/separator";
 13 | import { Button } from "@/components/ui/button";
 14 | import { Badge } from "@/components/ui/badge";
 15 | import {
 16 |   Popover,
 17 |   PopoverContent,
 18 |   PopoverTrigger,
 19 | } from "@/components/ui/popover";
 20 | import {
 21 |   Command,
 22 |   CommandEmpty,
 23 |   CommandGroup,
 24 |   CommandInput,
 25 |   CommandItem,
 26 |   CommandList,
 27 |   CommandSeparator,
 28 | } from "@/components/ui/command";
 29 | 
 30 | /**
 31 |  * Variants for the multi-select component to handle different styles.
 32 |  * Uses class-variance-authority (cva) to define different styles based on "variant" prop.
 33 |  */
 34 | const multiSelectVariants = cva(
 35 |   "m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
 36 |   {
 37 |     variants: {
 38 |       variant: {
 39 |         default:
 40 |           "border-foreground/10 text-foreground bg-card hover:bg-card/80",
 41 |         secondary:
 42 |           "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
 43 |         destructive:
 44 |           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
 45 |         inverted: "inverted",
 46 |       },
 47 |     },
 48 |     defaultVariants: {
 49 |       variant: "default",
 50 |     },
 51 |   }
 52 | );
 53 | 
 54 | /**
 55 |  * Props for MultiSelect component
 56 |  */
 57 | interface MultiSelectProps
 58 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
 59 |     VariantProps<typeof multiSelectVariants> {
 60 |   /**
 61 |    * An array of option objects to be displayed in the multi-select component.
 62 |    * Each option object has a label, value, and an optional icon.
 63 |    */
 64 |   options: {
 65 |     /** The text to display for the option. */
 66 |     label: string;
 67 |     /** The unique value associated with the option. */
 68 |     value: string;
 69 |     /** Optional icon component to display alongside the option. */
 70 |     icon?: React.ComponentType<{ className?: string }>;
 71 |   }[];
 72 | 
 73 |   /**
 74 |    * Callback function triggered when the selected values change.
 75 |    * Receives an array of the new selected values.
 76 |    */
 77 |   onValueChange: (value: string[]) => void;
 78 | 
 79 |   /** The default selected values when the component mounts. */
 80 |   defaultValue?: string[];
 81 | 
 82 |   /**
 83 |    * Placeholder text to be displayed when no values are selected.
 84 |    * Optional, defaults to "Select options".
 85 |    */
 86 |   placeholder?: string;
 87 | 
 88 |   /**
 89 |    * Animation duration in seconds for the visual effects (e.g., bouncing badges).
 90 |    * Optional, defaults to 0 (no animation).
 91 |    */
 92 |   animation?: number;
 93 | 
 94 |   /**
 95 |    * Maximum number of items to display. Extra selected items will be summarized.
 96 |    * Optional, defaults to 3.
 97 |    */
 98 |   maxCount?: number;
 99 | 
100 |   /**
101 |    * The modality of the popover. When set to true, interaction with outside elements
102 |    * will be disabled and only popover content will be visible to screen readers.
103 |    * Optional, defaults to false.
104 |    */
105 |   modalPopover?: boolean;
106 | 
107 |   /**
108 |    * If true, renders the multi-select component as a child of another component.
109 |    * Optional, defaults to false.
110 |    */
111 |   asChild?: boolean;
112 | 
113 |   /**
114 |    * Additional class names to apply custom styles to the multi-select component.
115 |    * Optional, can be used to add custom styles.
116 |    */
117 |   className?: string;
118 | }
119 | 
120 | export const MultiSelect = React.forwardRef<
121 |   HTMLButtonElement,
122 |   MultiSelectProps
123 | >(
124 |   (
125 |     {
126 |       options,
127 |       onValueChange,
128 |       variant,
129 |       defaultValue = [],
130 |       placeholder = "Select options",
131 |       animation = 0,
132 |       maxCount = 3,
133 |       modalPopover = false,
134 |       asChild = false,
135 |       className,
136 |       ...props
137 |     },
138 |     ref
139 |   ) => {
140 |     const [selectedValues, setSelectedValues] =
141 |       React.useState<string[]>(defaultValue);
142 |     const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
143 |     const [isAnimating, setIsAnimating] = React.useState(false);
144 | 
145 |     const handleInputKeyDown = (
146 |       event: React.KeyboardEvent<HTMLInputElement>
147 |     ) => {
148 |       if (event.key === "Enter") {
149 |         setIsPopoverOpen(true);
150 |       } else if (event.key === "Backspace" && !event.currentTarget.value) {
151 |         const newSelectedValues = [...selectedValues];
152 |         newSelectedValues.pop();
153 |         setSelectedValues(newSelectedValues);
154 |         onValueChange(newSelectedValues);
155 |       }
156 |     };
157 | 
158 |     const toggleOption = (option: string) => {
159 |       const newSelectedValues = selectedValues.includes(option)
160 |         ? selectedValues.filter((value) => value !== option)
161 |         : [...selectedValues, option];
162 |       setSelectedValues(newSelectedValues);
163 |       onValueChange(newSelectedValues);
164 |     };
165 | 
166 |     const handleClear = () => {
167 |       setSelectedValues([]);
168 |       onValueChange([]);
169 |     };
170 | 
171 |     const handleTogglePopover = () => {
172 |       setIsPopoverOpen((prev) => !prev);
173 |     };
174 | 
175 |     const clearExtraOptions = () => {
176 |       const newSelectedValues = selectedValues.slice(0, maxCount);
177 |       setSelectedValues(newSelectedValues);
178 |       onValueChange(newSelectedValues);
179 |     };
180 | 
181 |     const toggleAll = () => {
182 |       if (selectedValues.length === options.length) {
183 |         handleClear();
184 |       } else {
185 |         const allValues = options.map((option) => option.value);
186 |         setSelectedValues(allValues);
187 |         onValueChange(allValues);
188 |       }
189 |     };
190 | 
191 |     return (
192 |       <Popover
193 |         open={isPopoverOpen}
194 |         onOpenChange={setIsPopoverOpen}
195 |         modal={modalPopover}
196 |       >
197 |         <PopoverTrigger asChild>
198 |           <Button
199 |             ref={ref}
200 |             {...props}
201 |             onClick={handleTogglePopover}
202 |             className={cn(
203 |               "flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-inherit hover:bg-inherit [&_svg]:pointer-events-auto",
204 |               className
205 |             )}
206 |           >
207 |             {selectedValues.length > 0 ? (
208 |               <div className="flex justify-between items-center w-full">
209 |                 <div className="flex flex-wrap items-center">
210 |                   {selectedValues.slice(0, maxCount).map((value) => {
211 |                     const option = options.find((o) => o.value === value);
212 |                     const IconComponent = option?.icon;
213 |                     return (
214 |                       <Badge
215 |                         key={value}
216 |                         className={cn(
217 |                           isAnimating ? "animate-bounce" : "",
218 |                           multiSelectVariants({ variant })
219 |                         )}
220 |                         style={{ animationDuration: `${animation}s` }}
221 |                       >
222 |                         {IconComponent && (
223 |                           <IconComponent className="h-4 w-4 mr-2" />
224 |                         )}
225 |                         {option?.label}
226 |                         <XCircle
227 |                           className="ml-2 h-4 w-4 cursor-pointer"
228 |                           onClick={(event) => {
229 |                             event.stopPropagation();
230 |                             toggleOption(value);
231 |                           }}
232 |                         />
233 |                       </Badge>
234 |                     );
235 |                   })}
236 |                   {selectedValues.length > maxCount && (
237 |                     <Badge
238 |                       className={cn(
239 |                         "bg-transparent text-foreground border-foreground/1 hover:bg-transparent",
240 |                         isAnimating ? "animate-bounce" : "",
241 |                         multiSelectVariants({ variant })
242 |                       )}
243 |                       style={{ animationDuration: `${animation}s` }}
244 |                     >
245 |                       {`+ ${selectedValues.length - maxCount} more`}
246 |                       <XCircle
247 |                         className="ml-2 h-4 w-4 cursor-pointer"
248 |                         onClick={(event) => {
249 |                           event.stopPropagation();
250 |                           clearExtraOptions();
251 |                         }}
252 |                       />
253 |                     </Badge>
254 |                   )}
255 |                 </div>
256 |                 <div className="flex items-center justify-between">
257 |                   <XIcon
258 |                     className="h-4 mx-2 cursor-pointer text-muted-foreground"
259 |                     onClick={(event) => {
260 |                       event.stopPropagation();
261 |                       handleClear();
262 |                     }}
263 |                   />
264 |                   <Separator
265 |                     orientation="vertical"
266 |                     className="flex min-h-6 h-full"
267 |                   />
268 |                   <ChevronDown className="h-4 mx-2 cursor-pointer text-muted-foreground" />
269 |                 </div>
270 |               </div>
271 |             ) : (
272 |               <div className="flex items-center justify-between w-full mx-auto">
273 |                 <span className="text-sm text-muted-foreground mx-3">
274 |                   {placeholder}
275 |                 </span>
276 |                 <ChevronDown className="h-4 cursor-pointer text-muted-foreground mx-2" />
277 |               </div>
278 |             )}
279 |           </Button>
280 |         </PopoverTrigger>
281 |         <PopoverContent
282 |           className="w-auto p-0"
283 |           align="start"
284 |           onEscapeKeyDown={() => setIsPopoverOpen(false)}
285 |         >
286 |           <Command>
287 |             <CommandInput
288 |               placeholder="Search..."
289 |               onKeyDown={handleInputKeyDown}
290 |             />
291 |             <CommandList>
292 |               <CommandEmpty>No results found.</CommandEmpty>
293 |               <CommandGroup>
294 |                 <CommandItem
295 |                   key="all"
296 |                   onSelect={toggleAll}
297 |                   className="cursor-pointer"
298 |                 >
299 |                   <div
300 |                     className={cn(
301 |                       "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
302 |                       selectedValues.length === options.length
303 |                         ? "bg-primary text-primary-foreground"
304 |                         : "opacity-50 [&_svg]:invisible"
305 |                     )}
306 |                   >
307 |                     <CheckIcon className="h-4 w-4" />
308 |                   </div>
309 |                   <span>(Select All)</span>
310 |                 </CommandItem>
311 |                 {options.map((option) => {
312 |                   const isSelected = selectedValues.includes(option.value);
313 |                   return (
314 |                     <CommandItem
315 |                       key={option.value}
316 |                       onSelect={() => toggleOption(option.value)}
317 |                       className="cursor-pointer"
318 |                     >
319 |                       <div
320 |                         className={cn(
321 |                           "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
322 |                           isSelected
323 |                             ? "bg-primary text-primary-foreground"
324 |                             : "opacity-50 [&_svg]:invisible"
325 |                         )}
326 |                       >
327 |                         <CheckIcon className="h-4 w-4" />
328 |                       </div>
329 |                       {option.icon && (
330 |                         <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
331 |                       )}
332 |                       <span>{option.label}</span>
333 |                     </CommandItem>
334 |                   );
335 |                 })}
336 |               </CommandGroup>
337 |               <CommandSeparator />
338 |               <CommandGroup>
339 |                 <div className="flex items-center justify-between">
340 |                   {selectedValues.length > 0 && (
341 |                     <>
342 |                       <CommandItem
343 |                         onSelect={handleClear}
344 |                         className="flex-1 justify-center cursor-pointer"
345 |                       >
346 |                         Clear
347 |                       </CommandItem>
348 |                       <Separator
349 |                         orientation="vertical"
350 |                         className="flex min-h-6 h-full"
351 |                       />
352 |                     </>
353 |                   )}
354 |                   <CommandItem
355 |                     onSelect={() => setIsPopoverOpen(false)}
356 |                     className="flex-1 justify-center cursor-pointer max-w-full"
357 |                   >
358 |                     Close
359 |                   </CommandItem>
360 |                 </div>
361 |               </CommandGroup>
362 |             </CommandList>
363 |           </Command>
364 |         </PopoverContent>
365 |         {animation > 0 && selectedValues.length > 0 && (
366 |           <WandSparkles
367 |             className={cn(
368 |               "cursor-pointer my-2 text-foreground bg-background w-3 h-3",
369 |               isAnimating ? "" : "text-muted-foreground"
370 |             )}
371 |             onClick={() => setIsAnimating(!isAnimating)}
372 |           />
373 |         )}
374 |       </Popover>
375 |     );
376 |   }
377 | );
378 | 
379 | MultiSelect.displayName = "MultiSelect";
380 | 


--------------------------------------------------------------------------------
/src/components/page-header.tsx:
--------------------------------------------------------------------------------
 1 | import Balance from "react-wrap-balancer";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | function PageHeader({
 6 |   className,
 7 |   children,
 8 |   ...props
 9 | }: React.HTMLAttributes<HTMLDivElement>) {
10 |   return (
11 |     <section
12 |       className={cn(
13 |         "mx-auto flex max-w-[980px] flex-col items-center gap-2 py-4 mt-4",
14 |         className
15 |       )}
16 |       {...props}
17 |     >
18 |       {children}
19 |     </section>
20 |   );
21 | }
22 | 
23 | function PageHeaderHeading({
24 |   className,
25 |   ...props
26 | }: React.HTMLAttributes<HTMLHeadingElement>) {
27 |   return (
28 |     <h1
29 |       className={cn(
30 |         "text-center text-2xl font-bold leading-tight tracking-tighter md:text-3xl lg:leading-[1.1]",
31 |         className
32 |       )}
33 |       {...props}
34 |     />
35 |   );
36 | }
37 | 
38 | function PageHeaderDescription({
39 |   className,
40 |   ...props
41 | }: React.HTMLAttributes<HTMLParagraphElement>) {
42 |   return (
43 |     <Balance
44 |       className={cn(
45 |         "max-w-[750px] text-center text-sm text-muted-foreground sm:text-lg",
46 |         className
47 |       )}
48 |       {...props}
49 |     />
50 |   );
51 | }
52 | 
53 | function PageActions({
54 |   className,
55 |   ...props
56 | }: React.HTMLAttributes<HTMLDivElement>) {
57 |   return (
58 |     <div
59 |       className={cn(
60 |         "flex w-full items-center justify-center space-x-4 py-4 md:pb-10",
61 |         className
62 |       )}
63 |       {...props}
64 |     />
65 |   );
66 | }
67 | 
68 | export { PageHeader, PageHeaderHeading, PageHeaderDescription, PageActions };
69 | 


--------------------------------------------------------------------------------
/src/components/site-header.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | 
 3 | import ModeToggle from "@/components/mode-toggle";
 4 | import { buttonVariants } from "@/components/ui/button";
 5 | import { Icons } from "@/components/icons";
 6 | 
 7 | export async function SiteHeader() {
 8 |   return (
 9 |     <header className="sticky top-0 z-40 w-full border-b bg-background">
10 |       <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
11 |         <div className="flex flex-1 items-center justify-end space-x-4">
12 |           <nav className="flex items-center space-x-1">
13 |             <Link
14 |               href="https://github.com/sersavan/shadcn-multi-select-component"
15 |               target="_blank"
16 |               rel="noreferrer"
17 |             >
18 |               <div
19 |                 className={buttonVariants({
20 |                   size: "icon",
21 |                   variant: "ghost",
22 |                 })}
23 |               >
24 |                 <Icons.gitHub className="h-5 w-5" />
25 |                 <span className="sr-only">GitHub</span>
26 |               </div>
27 |             </Link>
28 |             <ModeToggle />
29 |           </nav>
30 |         </div>
31 |       </div>
32 |     </header>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/src/components/theme-provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import { ThemeProvider as NextThemesProvider } from "next-themes";
 5 | import { type ThemeProviderProps } from "next-themes/dist/types";
 6 | 
 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
 8 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const badgeVariants = cva(
 7 |   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
13 |         secondary:
14 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 |         destructive:
16 |           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
17 |         outline: "text-foreground",
18 |       },
19 |     },
20 |     defaultVariants: {
21 |       variant: "default",
22 |     },
23 |   }
24 | )
25 | 
26 | export interface BadgeProps
27 |   extends React.HTMLAttributes<HTMLDivElement>,
28 |     VariantProps<typeof badgeVariants> {}
29 | 
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 |   return (
32 |     <div className={cn(badgeVariants({ variant }), className)} {...props} />
33 |   )
34 | }
35 | 
36 | export { Badge, badgeVariants }
37 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card text-card-foreground shadow-sm",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ))
45 | CardTitle.displayName = "CardTitle"
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <p
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ))
65 | CardContent.displayName = "CardContent"
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 | 
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 | 


--------------------------------------------------------------------------------
/src/components/ui/command.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import { type DialogProps } from "@radix-ui/react-dialog"
  5 | import { Command as CommandPrimitive } from "cmdk"
  6 | import { Search } from "lucide-react"
  7 | 
  8 | import { cn } from "@/lib/utils"
  9 | import { Dialog, DialogContent } from "@/components/ui/dialog"
 10 | 
 11 | const Command = React.forwardRef<
 12 |   React.ElementRef<typeof CommandPrimitive>,
 13 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive>
 14 | >(({ className, ...props }, ref) => (
 15 |   <CommandPrimitive
 16 |     ref={ref}
 17 |     className={cn(
 18 |       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 19 |       className
 20 |     )}
 21 |     {...props}
 22 |   />
 23 | ))
 24 | Command.displayName = CommandPrimitive.displayName
 25 | 
 26 | interface CommandDialogProps extends DialogProps {}
 27 | 
 28 | const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 29 |   return (
 30 |     <Dialog {...props}>
 31 |       <DialogContent className="overflow-hidden p-0 shadow-lg">
 32 |         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 33 |           {children}
 34 |         </Command>
 35 |       </DialogContent>
 36 |     </Dialog>
 37 |   )
 38 | }
 39 | 
 40 | const CommandInput = React.forwardRef<
 41 |   React.ElementRef<typeof CommandPrimitive.Input>,
 42 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 43 | >(({ className, ...props }, ref) => (
 44 |   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
 45 |     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
 46 |     <CommandPrimitive.Input
 47 |       ref={ref}
 48 |       className={cn(
 49 |         "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 50 |         className
 51 |       )}
 52 |       {...props}
 53 |     />
 54 |   </div>
 55 | ))
 56 | 
 57 | CommandInput.displayName = CommandPrimitive.Input.displayName
 58 | 
 59 | const CommandList = React.forwardRef<
 60 |   React.ElementRef<typeof CommandPrimitive.List>,
 61 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 62 | >(({ className, ...props }, ref) => (
 63 |   <CommandPrimitive.List
 64 |     ref={ref}
 65 |     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
 66 |     {...props}
 67 |   />
 68 | ))
 69 | 
 70 | CommandList.displayName = CommandPrimitive.List.displayName
 71 | 
 72 | const CommandEmpty = React.forwardRef<
 73 |   React.ElementRef<typeof CommandPrimitive.Empty>,
 74 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 75 | >((props, ref) => (
 76 |   <CommandPrimitive.Empty
 77 |     ref={ref}
 78 |     className="py-6 text-center text-sm"
 79 |     {...props}
 80 |   />
 81 | ))
 82 | 
 83 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName
 84 | 
 85 | const CommandGroup = React.forwardRef<
 86 |   React.ElementRef<typeof CommandPrimitive.Group>,
 87 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 88 | >(({ className, ...props }, ref) => (
 89 |   <CommandPrimitive.Group
 90 |     ref={ref}
 91 |     className={cn(
 92 |       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
 93 |       className
 94 |     )}
 95 |     {...props}
 96 |   />
 97 | ))
 98 | 
 99 | CommandGroup.displayName = CommandPrimitive.Group.displayName
100 | 
101 | const CommandSeparator = React.forwardRef<
102 |   React.ElementRef<typeof CommandPrimitive.Separator>,
103 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
104 | >(({ className, ...props }, ref) => (
105 |   <CommandPrimitive.Separator
106 |     ref={ref}
107 |     className={cn("-mx-1 h-px bg-border", className)}
108 |     {...props}
109 |   />
110 | ))
111 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName
112 | 
113 | const CommandItem = React.forwardRef<
114 |   React.ElementRef<typeof CommandPrimitive.Item>,
115 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
116 | >(({ className, ...props }, ref) => (
117 |   <CommandPrimitive.Item
118 |     ref={ref}
119 |     className={cn(
120 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
121 |       className
122 |     )}
123 |     {...props}
124 |   />
125 | ))
126 | 
127 | CommandItem.displayName = CommandPrimitive.Item.displayName
128 | 
129 | const CommandShortcut = ({
130 |   className,
131 |   ...props
132 | }: React.HTMLAttributes<HTMLSpanElement>) => {
133 |   return (
134 |     <span
135 |       className={cn(
136 |         "ml-auto text-xs tracking-widest text-muted-foreground",
137 |         className
138 |       )}
139 |       {...props}
140 |     />
141 |   )
142 | }
143 | CommandShortcut.displayName = "CommandShortcut"
144 | 
145 | export {
146 |   Command,
147 |   CommandDialog,
148 |   CommandInput,
149 |   CommandList,
150 |   CommandEmpty,
151 |   CommandGroup,
152 |   CommandItem,
153 |   CommandShortcut,
154 |   CommandSeparator,
155 | }
156 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { X } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Dialog = DialogPrimitive.Root
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger
 12 | 
 13 | const DialogPortal = DialogPrimitive.Portal
 14 | 
 15 | const DialogClose = DialogPrimitive.Close
 16 | 
 17 | const DialogOverlay = React.forwardRef<
 18 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 19 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 20 | >(({ className, ...props }, ref) => (
 21 |   <DialogPrimitive.Overlay
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ))
 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 31 | 
 32 | const DialogContent = React.forwardRef<
 33 |   React.ElementRef<typeof DialogPrimitive.Content>,
 34 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 35 | >(({ className, children, ...props }, ref) => (
 36 |   <DialogPortal>
 37 |     <DialogOverlay />
 38 |     <DialogPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     >
 46 |       {children}
 47 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 48 |         <X className="h-4 w-4" />
 49 |         <span className="sr-only">Close</span>
 50 |       </DialogPrimitive.Close>
 51 |     </DialogPrimitive.Content>
 52 |   </DialogPortal>
 53 | ))
 54 | DialogContent.displayName = DialogPrimitive.Content.displayName
 55 | 
 56 | const DialogHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn(
 62 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 63 |       className
 64 |     )}
 65 |     {...props}
 66 |   />
 67 | )
 68 | DialogHeader.displayName = "DialogHeader"
 69 | 
 70 | const DialogFooter = ({
 71 |   className,
 72 |   ...props
 73 | }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div
 75 |     className={cn(
 76 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | )
 82 | DialogFooter.displayName = "DialogFooter"
 83 | 
 84 | const DialogTitle = React.forwardRef<
 85 |   React.ElementRef<typeof DialogPrimitive.Title>,
 86 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 87 | >(({ className, ...props }, ref) => (
 88 |   <DialogPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "text-lg font-semibold leading-none tracking-tight",
 92 |       className
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ))
 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 98 | 
 99 | const DialogDescription = React.forwardRef<
100 |   React.ElementRef<typeof DialogPrimitive.Description>,
101 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102 | >(({ className, ...props }, ref) => (
103 |   <DialogPrimitive.Description
104 |     ref={ref}
105 |     className={cn("text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 | 
111 | export {
112 |   Dialog,
113 |   DialogPortal,
114 |   DialogOverlay,
115 |   DialogClose,
116 |   DialogTrigger,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | }
123 | 


--------------------------------------------------------------------------------
/src/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as LabelPrimitive from "@radix-ui/react-label"
  3 | import { Slot } from "@radix-ui/react-slot"
  4 | import {
  5 |   Controller,
  6 |   ControllerProps,
  7 |   FieldPath,
  8 |   FieldValues,
  9 |   FormProvider,
 10 |   useFormContext,
 11 | } from "react-hook-form"
 12 | 
 13 | import { cn } from "@/lib/utils"
 14 | import { Label } from "@/components/ui/label"
 15 | 
 16 | const Form = FormProvider
 17 | 
 18 | type FormFieldContextValue<
 19 |   TFieldValues extends FieldValues = FieldValues,
 20 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 21 | > = {
 22 |   name: TName
 23 | }
 24 | 
 25 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 26 |   {} as FormFieldContextValue
 27 | )
 28 | 
 29 | const FormField = <
 30 |   TFieldValues extends FieldValues = FieldValues,
 31 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 32 | >({
 33 |   ...props
 34 | }: ControllerProps<TFieldValues, TName>) => {
 35 |   return (
 36 |     <FormFieldContext.Provider value={{ name: props.name }}>
 37 |       <Controller {...props} />
 38 |     </FormFieldContext.Provider>
 39 |   )
 40 | }
 41 | 
 42 | const useFormField = () => {
 43 |   const fieldContext = React.useContext(FormFieldContext)
 44 |   const itemContext = React.useContext(FormItemContext)
 45 |   const { getFieldState, formState } = useFormContext()
 46 | 
 47 |   const fieldState = getFieldState(fieldContext.name, formState)
 48 | 
 49 |   if (!fieldContext) {
 50 |     throw new Error("useFormField should be used within <FormField>")
 51 |   }
 52 | 
 53 |   const { id } = itemContext
 54 | 
 55 |   return {
 56 |     id,
 57 |     name: fieldContext.name,
 58 |     formItemId: `${id}-form-item`,
 59 |     formDescriptionId: `${id}-form-item-description`,
 60 |     formMessageId: `${id}-form-item-message`,
 61 |     ...fieldState,
 62 |   }
 63 | }
 64 | 
 65 | type FormItemContextValue = {
 66 |   id: string
 67 | }
 68 | 
 69 | const FormItemContext = React.createContext<FormItemContextValue>(
 70 |   {} as FormItemContextValue
 71 | )
 72 | 
 73 | const FormItem = React.forwardRef<
 74 |   HTMLDivElement,
 75 |   React.HTMLAttributes<HTMLDivElement>
 76 | >(({ className, ...props }, ref) => {
 77 |   const id = React.useId()
 78 | 
 79 |   return (
 80 |     <FormItemContext.Provider value={{ id }}>
 81 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 82 |     </FormItemContext.Provider>
 83 |   )
 84 | })
 85 | FormItem.displayName = "FormItem"
 86 | 
 87 | const FormLabel = React.forwardRef<
 88 |   React.ElementRef<typeof LabelPrimitive.Root>,
 89 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 90 | >(({ className, ...props }, ref) => {
 91 |   const { error, formItemId } = useFormField()
 92 | 
 93 |   return (
 94 |     <Label
 95 |       ref={ref}
 96 |       className={cn(error && "text-destructive", className)}
 97 |       htmlFor={formItemId}
 98 |       {...props}
 99 |     />
100 |   )
101 | })
102 | FormLabel.displayName = "FormLabel"
103 | 
104 | const FormControl = React.forwardRef<
105 |   React.ElementRef<typeof Slot>,
106 |   React.ComponentPropsWithoutRef<typeof Slot>
107 | >(({ ...props }, ref) => {
108 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
109 | 
110 |   return (
111 |     <Slot
112 |       ref={ref}
113 |       id={formItemId}
114 |       aria-describedby={
115 |         !error
116 |           ? `${formDescriptionId}`
117 |           : `${formDescriptionId} ${formMessageId}`
118 |       }
119 |       aria-invalid={!!error}
120 |       {...props}
121 |     />
122 |   )
123 | })
124 | FormControl.displayName = "FormControl"
125 | 
126 | const FormDescription = React.forwardRef<
127 |   HTMLParagraphElement,
128 |   React.HTMLAttributes<HTMLParagraphElement>
129 | >(({ className, ...props }, ref) => {
130 |   const { formDescriptionId } = useFormField()
131 | 
132 |   return (
133 |     <p
134 |       ref={ref}
135 |       id={formDescriptionId}
136 |       className={cn("text-sm text-muted-foreground", className)}
137 |       {...props}
138 |     />
139 |   )
140 | })
141 | FormDescription.displayName = "FormDescription"
142 | 
143 | const FormMessage = React.forwardRef<
144 |   HTMLParagraphElement,
145 |   React.HTMLAttributes<HTMLParagraphElement>
146 | >(({ className, children, ...props }, ref) => {
147 |   const { error, formMessageId } = useFormField()
148 |   const body = error ? String(error?.message) : children
149 | 
150 |   if (!body) {
151 |     return null
152 |   }
153 | 
154 |   return (
155 |     <p
156 |       ref={ref}
157 |       id={formMessageId}
158 |       className={cn("text-sm font-medium text-destructive", className)}
159 |       {...props}
160 |     >
161 |       {body}
162 |     </p>
163 |   )
164 | })
165 | FormMessage.displayName = "FormMessage"
166 | 
167 | export {
168 |   useFormField,
169 |   Form,
170 |   FormItem,
171 |   FormLabel,
172 |   FormControl,
173 |   FormDescription,
174 |   FormMessage,
175 |   FormField,
176 | }
177 | 


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as PopoverPrimitive from "@radix-ui/react-popover"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Popover = PopoverPrimitive.Root
 9 | 
10 | const PopoverTrigger = PopoverPrimitive.Trigger
11 | 
12 | const PopoverContent = React.forwardRef<
13 |   React.ElementRef<typeof PopoverPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |   <PopoverPrimitive.Portal>
17 |     <PopoverPrimitive.Content
18 |       ref={ref}
19 |       align={align}
20 |       sideOffset={sideOffset}
21 |       className={cn(
22 |         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23 |         className
24 |       )}
25 |       {...props}
26 |     />
27 |   </PopoverPrimitive.Portal>
28 | ))
29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName
30 | 
31 | export { Popover, PopoverTrigger, PopoverContent }
32 | 


--------------------------------------------------------------------------------
/src/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Separator = React.forwardRef<
 9 |   React.ElementRef<typeof SeparatorPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
11 | >(
12 |   (
13 |     { className, orientation = "horizontal", decorative = true, ...props },
14 |     ref
15 |   ) => (
16 |     <SeparatorPrimitive.Root
17 |       ref={ref}
18 |       decorative={decorative}
19 |       orientation={orientation}
20 |       className={cn(
21 |         "shrink-0 bg-border",
22 |         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
23 |         className
24 |       )}
25 |       {...props}
26 |     />
27 |   )
28 | )
29 | Separator.displayName = SeparatorPrimitive.Root.displayName
30 | 
31 | export { Separator }
32 | 


--------------------------------------------------------------------------------
/src/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useTheme } from "next-themes"
 4 | import { Toaster as Sonner } from "sonner"
 5 | 
 6 | type ToasterProps = React.ComponentProps<typeof Sonner>
 7 | 
 8 | const Toaster = ({ ...props }: ToasterProps) => {
 9 |   const { theme = "system" } = useTheme()
10 | 
11 |   return (
12 |     <Sonner
13 |       theme={theme as ToasterProps["theme"]}
14 |       className="toaster group"
15 |       toastOptions={{
16 |         classNames: {
17 |           toast:
18 |             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
19 |           description: "group-[.toast]:text-muted-foreground",
20 |           actionButton:
21 |             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
22 |           cancelButton:
23 |             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
24 |         },
25 |       }}
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | export { Toaster }
32 | 


--------------------------------------------------------------------------------
/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as ToastPrimitives from "@radix-ui/react-toast"
  5 | import { cva, type VariantProps } from "class-variance-authority"
  6 | import { X } from "lucide-react"
  7 | 
  8 | import { cn } from "@/lib/utils"
  9 | 
 10 | const ToastProvider = ToastPrimitives.Provider
 11 | 
 12 | const ToastViewport = React.forwardRef<
 13 |   React.ElementRef<typeof ToastPrimitives.Viewport>,
 14 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 15 | >(({ className, ...props }, ref) => (
 16 |   <ToastPrimitives.Viewport
 17 |     ref={ref}
 18 |     className={cn(
 19 |       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
 20 |       className
 21 |     )}
 22 |     {...props}
 23 |   />
 24 | ))
 25 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 26 | 
 27 | const toastVariants = cva(
 28 |   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
 29 |   {
 30 |     variants: {
 31 |       variant: {
 32 |         default: "border bg-background text-foreground",
 33 |         destructive:
 34 |           "destructive group border-destructive bg-destructive text-destructive-foreground",
 35 |       },
 36 |     },
 37 |     defaultVariants: {
 38 |       variant: "default",
 39 |     },
 40 |   }
 41 | )
 42 | 
 43 | const Toast = React.forwardRef<
 44 |   React.ElementRef<typeof ToastPrimitives.Root>,
 45 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 46 |     VariantProps<typeof toastVariants>
 47 | >(({ className, variant, ...props }, ref) => {
 48 |   return (
 49 |     <ToastPrimitives.Root
 50 |       ref={ref}
 51 |       className={cn(toastVariants({ variant }), className)}
 52 |       {...props}
 53 |     />
 54 |   )
 55 | })
 56 | Toast.displayName = ToastPrimitives.Root.displayName
 57 | 
 58 | const ToastAction = React.forwardRef<
 59 |   React.ElementRef<typeof ToastPrimitives.Action>,
 60 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 61 | >(({ className, ...props }, ref) => (
 62 |   <ToastPrimitives.Action
 63 |     ref={ref}
 64 |     className={cn(
 65 |       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
 66 |       className
 67 |     )}
 68 |     {...props}
 69 |   />
 70 | ))
 71 | ToastAction.displayName = ToastPrimitives.Action.displayName
 72 | 
 73 | const ToastClose = React.forwardRef<
 74 |   React.ElementRef<typeof ToastPrimitives.Close>,
 75 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 76 | >(({ className, ...props }, ref) => (
 77 |   <ToastPrimitives.Close
 78 |     ref={ref}
 79 |     className={cn(
 80 |       "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
 81 |       className
 82 |     )}
 83 |     toast-close=""
 84 |     {...props}
 85 |   >
 86 |     <X className="h-4 w-4" />
 87 |   </ToastPrimitives.Close>
 88 | ))
 89 | ToastClose.displayName = ToastPrimitives.Close.displayName
 90 | 
 91 | const ToastTitle = React.forwardRef<
 92 |   React.ElementRef<typeof ToastPrimitives.Title>,
 93 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 94 | >(({ className, ...props }, ref) => (
 95 |   <ToastPrimitives.Title
 96 |     ref={ref}
 97 |     className={cn("text-sm font-semibold", className)}
 98 |     {...props}
 99 |   />
100 | ))
101 | ToastTitle.displayName = ToastPrimitives.Title.displayName
102 | 
103 | const ToastDescription = React.forwardRef<
104 |   React.ElementRef<typeof ToastPrimitives.Description>,
105 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
106 | >(({ className, ...props }, ref) => (
107 |   <ToastPrimitives.Description
108 |     ref={ref}
109 |     className={cn("text-sm opacity-90", className)}
110 |     {...props}
111 |   />
112 | ))
113 | ToastDescription.displayName = ToastPrimitives.Description.displayName
114 | 
115 | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
116 | 
117 | type ToastActionElement = React.ReactElement<typeof ToastAction>
118 | 
119 | export {
120 |   type ToastProps,
121 |   type ToastActionElement,
122 |   ToastProvider,
123 |   ToastViewport,
124 |   Toast,
125 |   ToastTitle,
126 |   ToastDescription,
127 |   ToastClose,
128 |   ToastAction,
129 | }
130 | 


--------------------------------------------------------------------------------
/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import {
 4 |   Toast,
 5 |   ToastClose,
 6 |   ToastDescription,
 7 |   ToastProvider,
 8 |   ToastTitle,
 9 |   ToastViewport,
10 | } from "@/components/ui/toast"
11 | import { useToast } from "@/components/ui/use-toast"
12 | 
13 | export function Toaster() {
14 |   const { toasts } = useToast()
15 | 
16 |   return (
17 |     <ToastProvider>
18 |       {toasts.map(function ({ id, title, description, action, ...props }) {
19 |         return (
20 |           <Toast key={id} {...props}>
21 |             <div className="grid gap-1">
22 |               {title && <ToastTitle>{title}</ToastTitle>}
23 |               {description && (
24 |                 <ToastDescription>{description}</ToastDescription>
25 |               )}
26 |             </div>
27 |             {action}
28 |             <ToastClose />
29 |           </Toast>
30 |         )
31 |       })}
32 |       <ToastViewport />
33 |     </ToastProvider>
34 |   )
35 | }
36 | 


--------------------------------------------------------------------------------
/src/components/ui/use-toast.ts:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | // Inspired by react-hot-toast library
  4 | import * as React from "react"
  5 | 
  6 | import type {
  7 |   ToastActionElement,
  8 |   ToastProps,
  9 | } from "@/components/ui/toast"
 10 | 
 11 | const TOAST_LIMIT = 1
 12 | const TOAST_REMOVE_DELAY = 1000000
 13 | 
 14 | type ToasterToast = ToastProps & {
 15 |   id: string
 16 |   title?: React.ReactNode
 17 |   description?: React.ReactNode
 18 |   action?: ToastActionElement
 19 | }
 20 | 
 21 | const actionTypes = {
 22 |   ADD_TOAST: "ADD_TOAST",
 23 |   UPDATE_TOAST: "UPDATE_TOAST",
 24 |   DISMISS_TOAST: "DISMISS_TOAST",
 25 |   REMOVE_TOAST: "REMOVE_TOAST",
 26 | } as const
 27 | 
 28 | let count = 0
 29 | 
 30 | function genId() {
 31 |   count = (count + 1) % Number.MAX_SAFE_INTEGER
 32 |   return count.toString()
 33 | }
 34 | 
 35 | type ActionType = typeof actionTypes
 36 | 
 37 | type Action =
 38 |   | {
 39 |       type: ActionType["ADD_TOAST"]
 40 |       toast: ToasterToast
 41 |     }
 42 |   | {
 43 |       type: ActionType["UPDATE_TOAST"]
 44 |       toast: Partial<ToasterToast>
 45 |     }
 46 |   | {
 47 |       type: ActionType["DISMISS_TOAST"]
 48 |       toastId?: ToasterToast["id"]
 49 |     }
 50 |   | {
 51 |       type: ActionType["REMOVE_TOAST"]
 52 |       toastId?: ToasterToast["id"]
 53 |     }
 54 | 
 55 | interface State {
 56 |   toasts: ToasterToast[]
 57 | }
 58 | 
 59 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 60 | 
 61 | const addToRemoveQueue = (toastId: string) => {
 62 |   if (toastTimeouts.has(toastId)) {
 63 |     return
 64 |   }
 65 | 
 66 |   const timeout = setTimeout(() => {
 67 |     toastTimeouts.delete(toastId)
 68 |     dispatch({
 69 |       type: "REMOVE_TOAST",
 70 |       toastId: toastId,
 71 |     })
 72 |   }, TOAST_REMOVE_DELAY)
 73 | 
 74 |   toastTimeouts.set(toastId, timeout)
 75 | }
 76 | 
 77 | export const reducer = (state: State, action: Action): State => {
 78 |   switch (action.type) {
 79 |     case "ADD_TOAST":
 80 |       return {
 81 |         ...state,
 82 |         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
 83 |       }
 84 | 
 85 |     case "UPDATE_TOAST":
 86 |       return {
 87 |         ...state,
 88 |         toasts: state.toasts.map((t) =>
 89 |           t.id === action.toast.id ? { ...t, ...action.toast } : t
 90 |         ),
 91 |       }
 92 | 
 93 |     case "DISMISS_TOAST": {
 94 |       const { toastId } = action
 95 | 
 96 |       // ! Side effects ! - This could be extracted into a dismissToast() action,
 97 |       // but I'll keep it here for simplicity
 98 |       if (toastId) {
 99 |         addToRemoveQueue(toastId)
100 |       } else {
101 |         state.toasts.forEach((toast) => {
102 |           addToRemoveQueue(toast.id)
103 |         })
104 |       }
105 | 
106 |       return {
107 |         ...state,
108 |         toasts: state.toasts.map((t) =>
109 |           t.id === toastId || toastId === undefined
110 |             ? {
111 |                 ...t,
112 |                 open: false,
113 |               }
114 |             : t
115 |         ),
116 |       }
117 |     }
118 |     case "REMOVE_TOAST":
119 |       if (action.toastId === undefined) {
120 |         return {
121 |           ...state,
122 |           toasts: [],
123 |         }
124 |       }
125 |       return {
126 |         ...state,
127 |         toasts: state.toasts.filter((t) => t.id !== action.toastId),
128 |       }
129 |   }
130 | }
131 | 
132 | const listeners: Array<(state: State) => void> = []
133 | 
134 | let memoryState: State = { toasts: [] }
135 | 
136 | function dispatch(action: Action) {
137 |   memoryState = reducer(memoryState, action)
138 |   listeners.forEach((listener) => {
139 |     listener(memoryState)
140 |   })
141 | }
142 | 
143 | type Toast = Omit<ToasterToast, "id">
144 | 
145 | function toast({ ...props }: Toast) {
146 |   const id = genId()
147 | 
148 |   const update = (props: ToasterToast) =>
149 |     dispatch({
150 |       type: "UPDATE_TOAST",
151 |       toast: { ...props, id },
152 |     })
153 |   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
154 | 
155 |   dispatch({
156 |     type: "ADD_TOAST",
157 |     toast: {
158 |       ...props,
159 |       id,
160 |       open: true,
161 |       onOpenChange: (open) => {
162 |         if (!open) dismiss()
163 |       },
164 |     },
165 |   })
166 | 
167 |   return {
168 |     id: id,
169 |     dismiss,
170 |     update,
171 |   }
172 | }
173 | 
174 | function useToast() {
175 |   const [state, setState] = React.useState<State>(memoryState)
176 | 
177 |   React.useEffect(() => {
178 |     listeners.push(setState)
179 |     return () => {
180 |       const index = listeners.indexOf(setState)
181 |       if (index > -1) {
182 |         listeners.splice(index, 1)
183 |       }
184 |     }
185 |   }, [state])
186 | 
187 |   return {
188 |     ...state,
189 |     toast,
190 |     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
191 |   }
192 | }
193 | 
194 | export { useToast, toast }
195 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss"
 2 | 
 3 | const config = {
 4 |   darkMode: ["class"],
 5 |   content: [
 6 |     './pages/**/*.{ts,tsx}',
 7 |     './components/**/*.{ts,tsx}',
 8 |     './app/**/*.{ts,tsx}',
 9 |     './src/**/*.{ts,tsx}',
10 | 	],
11 |   prefix: "",
12 |   theme: {
13 |     container: {
14 |       center: true,
15 |       padding: "2rem",
16 |       screens: {
17 |         "2xl": "1400px",
18 |       },
19 |     },
20 |     extend: {
21 |       colors: {
22 |         border: "hsl(var(--border))",
23 |         input: "hsl(var(--input))",
24 |         ring: "hsl(var(--ring))",
25 |         background: "hsl(var(--background))",
26 |         foreground: "hsl(var(--foreground))",
27 |         primary: {
28 |           DEFAULT: "hsl(var(--primary))",
29 |           foreground: "hsl(var(--primary-foreground))",
30 |         },
31 |         secondary: {
32 |           DEFAULT: "hsl(var(--secondary))",
33 |           foreground: "hsl(var(--secondary-foreground))",
34 |         },
35 |         destructive: {
36 |           DEFAULT: "hsl(var(--destructive))",
37 |           foreground: "hsl(var(--destructive-foreground))",
38 |         },
39 |         muted: {
40 |           DEFAULT: "hsl(var(--muted))",
41 |           foreground: "hsl(var(--muted-foreground))",
42 |         },
43 |         accent: {
44 |           DEFAULT: "hsl(var(--accent))",
45 |           foreground: "hsl(var(--accent-foreground))",
46 |         },
47 |         popover: {
48 |           DEFAULT: "hsl(var(--popover))",
49 |           foreground: "hsl(var(--popover-foreground))",
50 |         },
51 |         card: {
52 |           DEFAULT: "hsl(var(--card))",
53 |           foreground: "hsl(var(--card-foreground))",
54 |         },
55 |       },
56 |       borderRadius: {
57 |         lg: "var(--radius)",
58 |         md: "calc(var(--radius) - 2px)",
59 |         sm: "calc(var(--radius) - 4px)",
60 |       },
61 |       keyframes: {
62 |         "accordion-down": {
63 |           from: { height: "0" },
64 |           to: { height: "var(--radix-accordion-content-height)" },
65 |         },
66 |         "accordion-up": {
67 |           from: { height: "var(--radix-accordion-content-height)" },
68 |           to: { height: "0" },
69 |         },
70 |       },
71 |       animation: {
72 |         "accordion-down": "accordion-down 0.2s ease-out",
73 |         "accordion-up": "accordion-up 0.2s ease-out",
74 |       },
75 |     },
76 |   },
77 |   plugins: [require("tailwindcss-animate")],
78 | } satisfies Config
79 | 
80 | export default config


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./src/*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------